Agent output panel

.gitignore

@@ -14,3 +14,10 @@ report.html
 .clj-kondo
 /target
 src/app/server/env.clj
+docs/
+CLAUDE.md
+AGENTS.md
+GEMINI.md
+.agents/
+.gemini/
+.claude/

components/_extractor.js

@@ -0,0 +1,146 @@
+/**
+ * Browser DOM extractor — runs via Claude-in-Chrome javascript_tool.
+ * Walks a DOM subtree, captures computed styles + bounds, returns a JSON tree
+ * matching the Design IR shape for ingestion by _css_parsers and _compiler.
+ *
+ * Usage: extractComponent('button.my-class') or extractComponent('#card-id')
+ */
+/**
+ * Auto-detect the most likely "main content" container.
+ * Tries semantic landmarks first, then falls back to the largest body child.
+ */
+function autoDetectSelector() {
+  var candidates = ['main', 'article', '[role="main"]', '.main-content', '#content'];
+  for (var i = 0; i < candidates.length; i++) {
+    var el = document.querySelector(candidates[i]);
+    if (el && el.children.length > 0 && el.getBoundingClientRect().height > 50) return candidates[i];
+  }
+  // Largest body child, excluding nav/header/footer
+  var skip = {NAV:1, HEADER:1, FOOTER:1, SCRIPT:1, STYLE:1, NOSCRIPT:1};
+  var best = null, bestArea = 0;
+  for (var j = 0; j < document.body.children.length; j++) {
+    var child = document.body.children[j];
+    if (skip[child.tagName]) continue;
+    var r = child.getBoundingClientRect();
+    if (r.width * r.height > bestArea) { bestArea = r.width * r.height; best = child; }
+  }
+  if (best) {
+    if (best.id) return '#' + best.id;
+    return 'body > :nth-child(' + (Array.from(document.body.children).indexOf(best) + 1) + ')';
+  }
+  return 'body';
+}
+
+function extractComponent(selector) {
+  if (!selector) selector = autoDetectSelector();
+  const SKIP_TAGS = new Set(['SCRIPT', 'STYLE', 'META', 'LINK', 'NOSCRIPT', 'BR', 'HR']);
+
+  const STYLE_PROPS = [
+    'backgroundColor', 'backgroundImage',
+    'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth',
+    'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor',
+    'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius',
+    'boxShadow',
+    'fontSize', 'fontWeight', 'fontFamily', 'color',
+    'display', 'flexDirection', 'alignItems', 'justifyContent', 'gap',
+    'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+    'overflow', 'opacity', 'visibility'
+  ];
+
+  const root = document.querySelector(selector);
+  if (!root) return JSON.stringify({ error: 'Element not found: ' + selector });
+
+  const rootRect = root.getBoundingClientRect();
+
+  function walkNode(el) {
+    if (SKIP_TAGS.has(el.tagName)) return null;
+
+    const cs = getComputedStyle(el);
+    if (cs.display === 'none' || cs.visibility === 'hidden') return null;
+
+    const rect = el.getBoundingClientRect();
+
+    // Capture style properties
+    const styles = {};
+    for (const prop of STYLE_PROPS) {
+      styles[prop] = cs[prop];
+    }
+
+    // Relative bounds (to root element)
+    const bounds = {
+      x: Math.round(rect.left - rootRect.left),
+      y: Math.round(rect.top - rootRect.top),
+      w: Math.round(rect.width),
+      h: Math.round(rect.height)
+    };
+
+    // Gather children
+    const children = [];
+    for (const child of el.children) {
+      const node = walkNode(child);
+      if (node) children.push(node);
+    }
+
+    // Text content (only on leaf elements with no element children)
+    let textContent = null;
+    if (children.length === 0) {
+      const text = el.textContent?.trim();
+      if (text && text.length > 0) textContent = text;
+    }
+
+    return {
+      tag: el.tagName.toLowerCase(),
+      bounds,
+      styles,
+      textContent,
+      children: children.length > 0 ? children : undefined
+    };
+  }
+
+  const tree = walkNode(root);
+
+  // Post-pass: collapse pure wrapper divs
+  function collapseWrappers(node) {
+    if (!node) return node;
+    if (node.children) {
+      node.children = node.children.map(collapseWrappers);
+    }
+
+    // Collapse if: single child, div/span, no visual styling
+    if (node.children && node.children.length === 1 && !node.textContent) {
+      const s = node.styles;
+      const isTransparent = !s.backgroundColor ||
+        s.backgroundColor === 'rgba(0, 0, 0, 0)' ||
+        s.backgroundColor === 'transparent';
+      const noBorder = (!s.borderTopWidth || parseFloat(s.borderTopWidth) === 0) &&
+        (!s.borderRightWidth || parseFloat(s.borderRightWidth) === 0);
+      const noShadow = !s.boxShadow || s.boxShadow === 'none';
+      const noBackground = !s.backgroundImage || s.backgroundImage === 'none';
+      const isWrapper = (node.tag === 'div' || node.tag === 'span');
+
+      if (isWrapper && isTransparent && noBorder && noShadow && noBackground) {
+        // Promote the single child, preserving the wrapper's bounds if child has none
+        const child = node.children[0];
+        if (!child.bounds || (child.bounds.w === 0 && child.bounds.h === 0)) {
+          child.bounds = node.bounds;
+        }
+        return child;
+      }
+    }
+
+    return node;
+  }
+
+  const collapsed = collapseWrappers(tree);
+
+  // Capture source HTML for the preview overlay
+  const sourceHTML = root.outerHTML;
+
+  return JSON.stringify({
+    version: 1,
+    sourceUrl: window.location.href,
+    rootBounds: { w: Math.round(rootRect.width), h: Math.round(rootRect.height) },
+    tree: collapsed,
+    sourceHTML: sourceHTML
+  }, null, 2);
+}

components/_registry.edn

@@ -0,0 +1,72 @@
+;; Component Registry — shadcn v4
+;; Auto-generated 2026-03-01 from ui.shadcn.com/docs/components
+;; 59 components, 54 with direct source files
+
+{:libraries [{:id :shadcn-v4
+              :name "shadcn/ui v4"
+              :repo "shadcn-ui/ui"
+              :branch "main"
+              :base-path "apps/v4/registry/bases/base/ui"
+              :docs-base "https://ui.shadcn.com/docs/components/radix"
+              :token-map "shadcn-v4.edn"}]
+
+ :components
+ [{:slug "accordion"      :name "Accordion"        :has-source? true  :category :disclosure}
+  {:slug "alert"           :name "Alert"            :has-source? true  :category :feedback}
+  {:slug "alert-dialog"    :name "Alert Dialog"     :has-source? true  :category :overlay}
+  {:slug "aspect-ratio"    :name "Aspect Ratio"     :has-source? true  :category :layout}
+  {:slug "avatar"          :name "Avatar"           :has-source? true  :category :data-display}
+  {:slug "badge"           :name "Badge"            :has-source? true  :category :data-display}
+  {:slug "breadcrumb"      :name "Breadcrumb"       :has-source? true  :category :navigation}
+  {:slug "button"          :name "Button"           :has-source? true  :category :action}
+  {:slug "button-group"    :name "Button Group"     :has-source? true  :category :action}
+  {:slug "calendar"        :name "Calendar"         :has-source? true  :category :date-time}
+  {:slug "card"            :name "Card"             :has-source? true  :category :data-display}
+  {:slug "carousel"        :name "Carousel"         :has-source? true  :category :data-display}
+  {:slug "chart"           :name "Chart"            :has-source? true  :category :data-display}
+  {:slug "checkbox"        :name "Checkbox"         :has-source? true  :category :input}
+  {:slug "collapsible"     :name "Collapsible"      :has-source? true  :category :disclosure}
+  {:slug "combobox"        :name "Combobox"         :has-source? true  :category :input}
+  {:slug "command"         :name "Command"          :has-source? true  :category :input}
+  {:slug "context-menu"    :name "Context Menu"     :has-source? true  :category :overlay}
+  {:slug "data-table"      :name "Data Table"       :has-source? false :category :data-display}
+  {:slug "date-picker"     :name "Date Picker"      :has-source? false :category :date-time}
+  {:slug "dialog"          :name "Dialog"           :has-source? true  :category :overlay}
+  {:slug "direction"       :name "Direction"        :has-source? true  :category :utility}
+  {:slug "drawer"          :name "Drawer"           :has-source? true  :category :overlay}
+  {:slug "dropdown-menu"   :name "Dropdown Menu"    :has-source? true  :category :overlay}
+  {:slug "empty"           :name "Empty"            :has-source? true  :category :feedback}
+  {:slug "field"           :name "Field"            :has-source? true  :category :input}
+  {:slug "hover-card"      :name "Hover Card"       :has-source? true  :category :overlay}
+  {:slug "input"           :name "Input"            :has-source? true  :category :input}
+  {:slug "input-group"     :name "Input Group"      :has-source? true  :category :input}
+  {:slug "input-otp"       :name "Input OTP"        :has-source? true  :category :input}
+  {:slug "item"            :name "Item"             :has-source? true  :category :data-display}
+  {:slug "kbd"             :name "Kbd"              :has-source? true  :category :data-display}
+  {:slug "label"           :name "Label"            :has-source? true  :category :input}
+  {:slug "menubar"         :name "Menubar"          :has-source? true  :category :navigation}
+  {:slug "native-select"   :name "Native Select"    :has-source? true  :category :input}
+  {:slug "navigation-menu" :name "Navigation Menu"  :has-source? true  :category :navigation}
+  {:slug "pagination"      :name "Pagination"       :has-source? true  :category :navigation}
+  {:slug "popover"         :name "Popover"          :has-source? true  :category :overlay}
+  {:slug "progress"        :name "Progress"         :has-source? true  :category :feedback}
+  {:slug "radio-group"     :name "Radio Group"      :has-source? true  :category :input}
+  {:slug "resizable"       :name "Resizable"        :has-source? true  :category :layout}
+  {:slug "scroll-area"     :name "Scroll Area"      :has-source? true  :category :layout}
+  {:slug "select"          :name "Select"           :has-source? true  :category :input}
+  {:slug "separator"       :name "Separator"        :has-source? true  :category :layout}
+  {:slug "sheet"           :name "Sheet"            :has-source? true  :category :overlay}
+  {:slug "sidebar"         :name "Sidebar"          :has-source? true  :category :navigation}
+  {:slug "skeleton"        :name "Skeleton"         :has-source? true  :category :feedback}
+  {:slug "slider"          :name "Slider"           :has-source? true  :category :input}
+  {:slug "sonner"          :name "Sonner"           :has-source? true  :category :feedback}
+  {:slug "spinner"         :name "Spinner"          :has-source? true  :category :feedback}
+  {:slug "switch"          :name "Switch"           :has-source? true  :category :input}
+  {:slug "table"           :name "Table"            :has-source? true  :category :data-display}
+  {:slug "tabs"            :name "Tabs"             :has-source? true  :category :navigation}
+  {:slug "textarea"        :name "Textarea"         :has-source? true  :category :input}
+  {:slug "toast"           :name "Toast"            :has-source? false :category :feedback}
+  {:slug "toggle"          :name "Toggle"           :has-source? true  :category :action}
+  {:slug "toggle-group"    :name "Toggle Group"     :has-source? true  :category :action}
+  {:slug "tooltip"         :name "Tooltip"          :has-source? true  :category :overlay}
+  {:slug "typography"      :name "Typography"       :has-source? false :category :data-display}]}

components/_token_maps/shadcn-v4.edn

@@ -0,0 +1,56 @@
+;; shadcn v4 token map — extracted 2026-03-01 from live ui.shadcn.com
+;; Colors converted from lab()/oklab() -> RGBA via canvas getImageData
+;; Dark theme (default)
+
+{:library "shadcn"
+ :version "v4"
+ :source "https://ui.shadcn.com"
+ :extracted "2026-03-01"
+
+ :colors
+ {:primary            [229 229 229 1.0]
+  :primary-foreground [23 23 23 1.0]
+  :secondary            [38 38 38 1.0]
+  :secondary-foreground [250 250 250 1.0]
+  :destructive          [255 100 103 1.0]
+  :destructive-foreground [250 250 250 1.0]
+  :foreground           [250 250 250 1.0]
+  :background           [10 10 10 1.0]
+  :muted                [38 38 38 1.0]
+  :muted-foreground     [163 163 163 1.0]
+  :accent               [64 64 64 1.0]
+  :accent-foreground    [250 250 250 1.0]
+  :border               [255 255 255 0.1]
+  :ring                 [212 212 212 1.0]
+  :input                [255 255 255 0.15]
+  :card                 [10 10 10 1.0]
+  :card-foreground      [250 250 250 1.0]
+  :popover              [10 10 10 1.0]
+  :popover-foreground   [250 250 250 1.0]}
+
+ :spacing
+ {:xs 4 :sm 8 :md 12 :lg 16 :xl 24 :2xl 32}
+
+ :radii
+ {:none 0 :sm 6 :md 8 :lg 10 :xl 12 :full 9999}
+
+ :radius 10
+
+ :font
+ {:family "Geist Sans"
+  :mono "Geist Mono"
+  :sizes {:xs 12 :sm 14 :md 16 :lg 18 :xl 20 :2xl 24}
+  :weights {:normal 400 :medium 500 :semibold 600 :bold 700}}
+
+ :shadows
+ {:sm  {:blur 4  :spread 0 :offset-y 1 :color [0 0 0 0.05]}
+  :md  {:blur 8  :spread 0 :offset-y 4 :color [0 0 0 0.1]}
+  :lg  {:blur 16 :spread 0 :offset-y 8 :color [0 0 0 0.15]}}
+
+ :hover-rules
+ {:default     [:alpha 0.8]
+  :secondary   [:alpha 0.8]
+  :destructive [:alpha-shift 0.1]
+  :outline     [:swap {:bg :muted :fg :foreground}]
+  :ghost       [:swap {:bg :muted :fg :foreground}]
+  :link        [:underline true]}}

components/accordion/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/accordion.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/accordion"
+  :converted nil}}

components/alert-dialog/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/alert-dialog.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/alert-dialog"
+  :converted nil}}

components/alert/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/alert.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/alert"
+  :converted nil}}

components/aspect-ratio/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/aspect-ratio.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/aspect-ratio"
+  :converted nil}}

components/avatar/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/avatar.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/avatar"
+  :converted nil}}

components/badge/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/badge.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/badge"
+  :converted nil}}

components/breadcrumb/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/breadcrumb.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/breadcrumb"
+  :converted nil}}

components/button-group/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/button-group.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/button-group"
+  :converted nil}}

components/button/_source.edn

@@ -0,0 +1 @@
+{:shadcn-v4 {:status :ready, :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/button.tsx", :docs "https://ui.shadcn.com/docs/components/radix/button", :converted "2026-03-01"}}

components/calendar/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/calendar.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/calendar"
+  :converted nil}}

components/card/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/card.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/card"
+  :converted nil}}

components/carousel/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/carousel.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/carousel"
+  :converted nil}}

components/chart/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/chart.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/chart"
+  :converted nil}}

components/checkbox/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/checkbox.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/checkbox"
+  :converted nil}}

components/collapsible/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/collapsible.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/collapsible"
+  :converted nil}}

components/combobox/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/combobox.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/combobox"
+  :converted nil}}

components/command/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/command.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/command"
+  :converted nil}}

components/context-menu/_source.edn

@@ -0,0 +1,5 @@
+{:shadcn-v4
+ {:status :stub
+  :source "https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/context-menu.tsx"
+  :docs "https://ui.shadcn.com/docs/components/radix/context-menu"
+  :converted nil}}

components/data-table/_source.edn

@@ -0,0 +1,6 @@
+{:shadcn-v4
+ {:status :stub
+  :source nil
+  :docs "https://ui.shadcn.com/docs/components/radix/data-table"
+  :note "Composite component - no single source file"
+  :converted nil}}