designagent-cli 0.1.0

package/dist/index.js

@@ -0,0 +1,3108 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { createRequire } from "node:module";
+import pc4 from "picocolors";
+
+// src/commands/init.ts
+import { basename as basename5 } from "node:path";
+import {
+  cancel,
+  confirm,
+  group,
+  intro,
+  isCancel,
+  multiselect,
+  note,
+  outro,
+  select,
+  spinner,
+  text
+} from "@clack/prompts";
+import pc from "picocolors";
+
+// ../scanner/dist/readers/css-vars.js
+import { readFileSync } from "node:fs";
+import { relative } from "node:path";
+import postcss from "postcss";
+
+// ../scanner/dist/util/walk.js
+import { readdirSync } from "node:fs";
+import { join } from "node:path";
+var IGNORE_DIRS = new Set([
+  "node_modules",
+  ".git",
+  "dist",
+  "build",
+  "out",
+  ".next",
+  ".turbo",
+  ".cache",
+  "coverage",
+  ".designagent",
+  "vendor",
+  "Pods"
+]);
+function walk(root, exts, maxFiles = 8000) {
+  const extSet = new Set(exts.map((e) => e.toLowerCase()));
+  const out = [];
+  const stack = [root];
+  while (stack.length > 0 && out.length < maxFiles) {
+    const dir = stack.pop();
+    if (dir === undefined)
+      break;
+    let entries;
+    try {
+      entries = readdirSync(dir, { withFileTypes: true });
+    } catch {
+      continue;
+    }
+    for (const entry of entries) {
+      if (entry.isDirectory()) {
+        if (IGNORE_DIRS.has(entry.name))
+          continue;
+        stack.push(join(dir, entry.name));
+        continue;
+      }
+      const dot = entry.name.lastIndexOf(".");
+      if (dot <= 0)
+        continue;
+      const ext = entry.name.slice(dot).toLowerCase();
+      if (extSet.has(ext))
+        out.push(join(dir, entry.name));
+    }
+  }
+  return out;
+}
+
+// ../scanner/dist/util/color.js
+function normalizeHex(input) {
+  const m = input.trim().toLowerCase().match(/^#?([0-9a-f]{3,8})$/);
+  if (!m)
+    return null;
+  let h = m[1];
+  if (h.length === 3) {
+    h = h.split("").map((c) => c + c).join("");
+  } else if (h.length === 4) {
+    h = h.slice(0, 3).split("").map((c) => c + c).join("");
+  } else if (h.length === 8) {
+    h = h.slice(0, 6);
+  } else if (h.length !== 6) {
+    return null;
+  }
+  return "#" + h;
+}
+function hexToRgb(hex) {
+  const h = hex.slice(1);
+  return {
+    r: parseInt(h.slice(0, 2), 16),
+    g: parseInt(h.slice(2, 4), 16),
+    b: parseInt(h.slice(4, 6), 16)
+  };
+}
+function srgbToLinear(channel) {
+  const c = channel / 255;
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+function rgbToLab({ r, g, b }) {
+  const R = srgbToLinear(r);
+  const G = srgbToLinear(g);
+  const B = srgbToLinear(b);
+  let x = (R * 0.4124 + G * 0.3576 + B * 0.1805) / 0.95047;
+  const y = R * 0.2126 + G * 0.7152 + B * 0.0722;
+  let z = (R * 0.0193 + G * 0.1192 + B * 0.9505) / 1.08883;
+  const f = (t) => t > 0.008856 ? Math.cbrt(t) : 7.787 * t + 16 / 116;
+  const fx = f(x);
+  const fy = f(y);
+  const fz = f(z);
+  return { L: 116 * fy - 16, a: 500 * (fx - fy), b: 200 * (fy - fz) };
+}
+function deltaE(a, b) {
+  return Math.sqrt((a.L - b.L) ** 2 + (a.a - b.a) ** 2 + (a.b - b.b) ** 2);
+}
+function relativeLuminance({ r, g, b }) {
+  return 0.2126 * srgbToLinear(r) + 0.7152 * srgbToLinear(g) + 0.0722 * srgbToLinear(b);
+}
+function contrastRatio(a, b) {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  const hi = Math.max(la, lb);
+  const lo = Math.min(la, lb);
+  return (hi + 0.05) / (lo + 0.05);
+}
+function saturation({ r, g, b }) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  if (max === min)
+    return 0;
+  const l = (max + min) / 2;
+  const d = max - min;
+  return l > 0.5 ? d / (2 - max - min) : d / (max + min);
+}
+function readableOn(bg) {
+  const white = contrastRatio(bg, { r: 255, g: 255, b: 255 });
+  const black = contrastRatio(bg, { r: 17, g: 17, b: 17 });
+  return white >= black ? "#ffffff" : "#111111";
+}
+
+// ../scanner/dist/readers/css-vars.js
+var HEX_RE = /#[0-9a-fA-F]{3,8}\b/;
+var PX_RE = /^(-?\d*\.?\d+)px$/;
+var REM_RE = /^(-?\d*\.?\d+)rem$/;
+function toPx(value) {
+  const v = value.trim();
+  const px = v.match(PX_RE);
+  if (px)
+    return { px: parseFloat(px[1]), raw: v };
+  const rem = v.match(REM_RE);
+  if (rem)
+    return { px: parseFloat(rem[1]) * 16, raw: v };
+  return null;
+}
+function lineOf(decl) {
+  return decl.source?.start?.line ?? 0;
+}
+function readCssVars(root) {
+  const files = walk(root, [".css", ".pcss"]);
+  const colors = [];
+  const dimensions = [];
+  const typography = [];
+  for (const file of files) {
+    let css;
+    try {
+      css = readFileSync(file, "utf8");
+    } catch {
+      continue;
+    }
+    let rootNode;
+    try {
+      rootNode = postcss.parse(css, { from: file });
+    } catch {
+      continue;
+    }
+    const rel = relative(root, file);
+    rootNode.walkDecls((decl) => {
+      const prop = decl.prop;
+      const value = decl.value;
+      const line = lineOf(decl);
+      const isVar = prop.startsWith("--");
+      const name = isVar ? prop.slice(2) : undefined;
+      const hexMatch = value.match(HEX_RE);
+      if (hexMatch) {
+        const hex = normalizeHex(hexMatch[0]);
+        if (hex) {
+          colors.push({
+            hex,
+            source: { file: rel, line },
+            origin: "css-var",
+            name
+          });
+        }
+      }
+      if (isVar) {
+        const dim = toPx(value);
+        if (dim && dim.px !== 0) {
+          const lname2 = (name ?? "").toLowerCase();
+          const category = lname2.includes("radius") || lname2.includes("rounded") ? "radius" : lname2.includes("spac") || lname2.includes("gap") || lname2.includes("size") ? "spacing" : "spacing";
+          dimensions.push({
+            px: dim.px,
+            raw: dim.raw,
+            source: { file: rel, line },
+            origin: "css-var",
+            category,
+            name
+          });
+        }
+        const lname = (name ?? "").toLowerCase();
+        if (lname.startsWith("font") || lname.includes("text")) {
+          typography.push({
+            name: name ?? prop,
+            fontSize: PX_RE.test(value) || REM_RE.test(value) ? value : undefined,
+            fontFamily: lname.includes("family") ? value : undefined,
+            source: { file: rel, line }
+          });
+        }
+      }
+    });
+  }
+  return { colors, dimensions, typography };
+}
+
+// ../scanner/dist/readers/tailwind.js
+import { existsSync, readFileSync as readFileSync2 } from "node:fs";
+import { join as join2, relative as relative2 } from "node:path";
+var CONFIG_NAMES = [
+  "tailwind.config.js",
+  "tailwind.config.ts",
+  "tailwind.config.cjs",
+  "tailwind.config.mjs"
+];
+var PX_RE2 = /^(-?\d*\.?\d+)px$/;
+var REM_RE2 = /^(-?\d*\.?\d+)rem$/;
+function toPx2(value) {
+  const px = value.match(PX_RE2);
+  if (px)
+    return parseFloat(px[1]);
+  const rem = value.match(REM_RE2);
+  if (rem)
+    return parseFloat(rem[1]) * 16;
+  return null;
+}
+function lineOfIndex(text, index) {
+  let line = 1;
+  for (let i = 0;i < index && i < text.length; i++) {
+    if (text[i] === `
+`)
+      line++;
+  }
+  return line;
+}
+function findSectionRanges(text, sectionRe) {
+  const ranges = [];
+  let m;
+  sectionRe.lastIndex = 0;
+  while ((m = sectionRe.exec(text)) !== null) {
+    const open = text.indexOf("{", m.index);
+    if (open === -1)
+      continue;
+    let depth = 0;
+    let close = -1;
+    for (let i = open;i < text.length; i++) {
+      if (text[i] === "{")
+        depth++;
+      else if (text[i] === "}") {
+        depth--;
+        if (depth === 0) {
+          close = i;
+          break;
+        }
+      }
+    }
+    if (close !== -1)
+      ranges.push([open, close]);
+  }
+  return ranges;
+}
+function readTailwind(root) {
+  let configFile = null;
+  for (const name of CONFIG_NAMES) {
+    const candidate = join2(root, name);
+    if (existsSync(candidate)) {
+      configFile = candidate;
+      break;
+    }
+  }
+  const empty = {
+    found: false,
+    configFile: null,
+    colors: [],
+    dimensions: [],
+    typography: []
+  };
+  if (!configFile)
+    return empty;
+  let text;
+  try {
+    text = readFileSync2(configFile, "utf8");
+  } catch {
+    return empty;
+  }
+  const rel = relative2(root, configFile);
+  const colors = [];
+  const dimensions = [];
+  const typography = [];
+  const hexRe = /#[0-9a-fA-F]{3,8}\b/g;
+  let m;
+  while ((m = hexRe.exec(text)) !== null) {
+    const hex = normalizeHex(m[0]);
+    if (hex) {
+      colors.push({
+        hex,
+        source: { file: rel, line: lineOfIndex(text, m.index) },
+        origin: "tailwind"
+      });
+    }
+  }
+  const dimRe = /['"]?([\w-]+)['"]?\s*:\s*['"](-?\d*\.?\d+(?:px|rem))['"]/g;
+  const radiusSectionRe = /\b(borderRadius|radius|rounded)\s*:/gi;
+  const radiusRanges = findSectionRanges(text, radiusSectionRe);
+  while ((m = dimRe.exec(text)) !== null) {
+    const px = toPx2(m[2]);
+    if (px === null || px === 0)
+      continue;
+    const key = m[1].toLowerCase();
+    const inRadiusSection = radiusRanges.some(([start, end]) => m.index > start && m.index < end);
+    const category = key.includes("round") || key.includes("radius") || inRadiusSection ? "radius" : "spacing";
+    dimensions.push({
+      px,
+      raw: m[2],
+      source: { file: rel, line: lineOfIndex(text, m.index) },
+      origin: "tailwind",
+      category,
+      name: m[1]
+    });
+  }
+  const line = (i) => lineOfIndex(text, i);
+  for (const [start, end] of findSectionRanges(text, /\bfontSize\s*:/gi)) {
+    const body = text.slice(start, end);
+    const re = /['"]?([\w-]+)['"]?\s*:\s*\[?\s*['"](-?\d*\.?\d+(?:px|rem|em))['"]/g;
+    let mm;
+    while ((mm = re.exec(body)) !== null) {
+      typography.push({
+        name: mm[1],
+        fontSize: mm[2],
+        origin: "tailwind",
+        source: { file: rel, line: line(start + mm.index) }
+      });
+    }
+  }
+  for (const [start, end] of findSectionRanges(text, /\bfontFamily\s*:/gi)) {
+    const body = text.slice(start, end);
+    const re = /['"]?([\w-]+)['"]?\s*:\s*\[?\s*['"]([^'"]+)['"]/g;
+    let mm;
+    while ((mm = re.exec(body)) !== null) {
+      typography.push({
+        name: `font-${mm[1]}`,
+        fontFamily: mm[2],
+        origin: "tailwind",
+        source: { file: rel, line: line(start + mm.index) }
+      });
+    }
+  }
+  for (const [start, end] of findSectionRanges(text, /\bfontWeight\s*:/gi)) {
+    const body = text.slice(start, end);
+    const re = /['"]?([\w-]+)['"]?\s*:\s*['"]?(\d{3})['"]?/g;
+    let mm;
+    while ((mm = re.exec(body)) !== null) {
+      typography.push({
+        name: `weight-${mm[1]}`,
+        fontWeight: Number(mm[2]),
+        origin: "tailwind",
+        source: { file: rel, line: line(start + mm.index) }
+      });
+    }
+  }
+  return { found: true, configFile, colors, dimensions, typography };
+}
+
+// ../scanner/dist/readers/jsx-tsx.js
+import { readFileSync as readFileSync3 } from "node:fs";
+import { basename, relative as relative3 } from "node:path";
+
+// ../scanner/dist/util/typography.js
+var TAILWIND_FONT_SIZES = {
+  xs: "0.75rem",
+  sm: "0.875rem",
+  base: "1rem",
+  lg: "1.125rem",
+  xl: "1.25rem",
+  "2xl": "1.5rem",
+  "3xl": "1.875rem",
+  "4xl": "2.25rem",
+  "5xl": "3rem",
+  "6xl": "3.75rem",
+  "7xl": "4.5rem",
+  "8xl": "6rem",
+  "9xl": "8rem"
+};
+var TAILWIND_FONT_WEIGHTS = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900
+};
+function fontSizeToPx(value) {
+  if (!value)
+    return null;
+  const v = value.trim();
+  let m = v.match(/^(-?\d*\.?\d+)rem$/i);
+  if (m)
+    return parseFloat(m[1]) * 16;
+  m = v.match(/^(-?\d*\.?\d+)px$/i);
+  if (m)
+    return parseFloat(m[1]);
+  m = v.match(/^(-?\d*\.?\d+)em$/i);
+  if (m)
+    return parseFloat(m[1]) * 16;
+  return null;
+}
+
+// ../scanner/dist/readers/jsx-tsx.js
+var HEX_RE2 = /#[0-9a-fA-F]{3,8}\b/g;
+var PX_STR_RE = /['"](-?\d*\.?\d+)px['"]/g;
+function componentName(text, file) {
+  const fn = text.match(/export\s+(?:default\s+)?function\s+([A-Z]\w+)/);
+  if (fn)
+    return fn[1];
+  const cn = text.match(/export\s+(?:default\s+)?const\s+([A-Z]\w+)\s*[:=]/);
+  if (cn)
+    return cn[1];
+  const base = basename(file).replace(/\.(tsx|jsx)$/, "");
+  return /^[A-Z]/.test(base) ? base : null;
+}
+function lineOfIndex2(text, index) {
+  let line = 1;
+  for (let i = 0;i < index && i < text.length; i++) {
+    if (text[i] === `
+`)
+      line++;
+  }
+  return line;
+}
+var SIZE_KEYS = Object.keys(TAILWIND_FONT_SIZES).map((k) => k.replace(/[^a-z0-9]/g, "\\$&")).join("|");
+var TEXT_SIZE_RE = new RegExp(`\\btext-(${SIZE_KEYS})\\b`, "g");
+var WEIGHT_KEYS = Object.keys(TAILWIND_FONT_WEIGHTS).join("|");
+var FONT_WEIGHT_RE = new RegExp(`\\bfont-(${WEIGHT_KEYS})\\b`, "g");
+var INLINE_SIZE_RE = /fontSize\s*:\s*['"]?(\d*\.?\d+(?:px|rem|em)?)['"]?/g;
+var INLINE_WEIGHT_RE = /fontWeight\s*:\s*['"]?(\d{3}|bold|normal)['"]?/g;
+var INLINE_FAMILY_RE = /fontFamily\s*:\s*['"]([^'"]+)['"]/g;
+function readJsxTsx(root) {
+  const files = walk(root, [".tsx", ".jsx"]);
+  const colors = [];
+  const dimensions = [];
+  const components = [];
+  const typoAgg = new Map;
+  const bump = (key, entry) => {
+    const existing = typoAgg.get(key);
+    if (existing)
+      existing.count = (existing.count ?? 1) + 1;
+    else
+      typoAgg.set(key, { ...entry, count: 1 });
+  };
+  for (const file of files) {
+    let text;
+    try {
+      text = readFileSync3(file, "utf8");
+    } catch {
+      continue;
+    }
+    const rel = relative3(root, file);
+    const name = componentName(text, file);
+    if (name)
+      components.push({ name, file: rel });
+    let t;
+    TEXT_SIZE_RE.lastIndex = 0;
+    while ((t = TEXT_SIZE_RE.exec(text)) !== null) {
+      const step = t[1];
+      bump(`size:${step}`, {
+        name: `text-${step}`,
+        fontSize: TAILWIND_FONT_SIZES[step],
+        origin: "source",
+        source: { file: rel, line: lineOfIndex2(text, t.index) }
+      });
+    }
+    FONT_WEIGHT_RE.lastIndex = 0;
+    while ((t = FONT_WEIGHT_RE.exec(text)) !== null) {
+      const w = t[1];
+      bump(`weight:${w}`, {
+        name: `font-${w}`,
+        fontWeight: TAILWIND_FONT_WEIGHTS[w],
+        origin: "source",
+        source: { file: rel, line: lineOfIndex2(text, t.index) }
+      });
+    }
+    INLINE_SIZE_RE.lastIndex = 0;
+    while ((t = INLINE_SIZE_RE.exec(text)) !== null) {
+      const raw = /[a-z%]/i.test(t[1]) ? t[1] : `${t[1]}px`;
+      bump(`inline-size:${raw}`, {
+        name: `size-${raw}`,
+        fontSize: raw,
+        origin: "source",
+        source: { file: rel, line: lineOfIndex2(text, t.index) }
+      });
+    }
+    INLINE_WEIGHT_RE.lastIndex = 0;
+    while ((t = INLINE_WEIGHT_RE.exec(text)) !== null) {
+      const w = t[1] === "bold" ? 700 : t[1] === "normal" ? 400 : Number(t[1]);
+      bump(`inline-weight:${w}`, {
+        name: `weight-${w}`,
+        fontWeight: w,
+        origin: "source",
+        source: { file: rel, line: lineOfIndex2(text, t.index) }
+      });
+    }
+    INLINE_FAMILY_RE.lastIndex = 0;
+    while ((t = INLINE_FAMILY_RE.exec(text)) !== null) {
+      const family = t[1].split(",")[0].trim();
+      if (!family)
+        continue;
+      bump(`inline-family:${family}`, {
+        name: `font-${family.toLowerCase().replace(/\s+/g, "-")}`,
+        fontFamily: family,
+        origin: "source",
+        source: { file: rel, line: lineOfIndex2(text, t.index) }
+      });
+    }
+    let m;
+    HEX_RE2.lastIndex = 0;
+    while ((m = HEX_RE2.exec(text)) !== null) {
+      const hex = normalizeHex(m[0]);
+      if (hex) {
+        colors.push({
+          hex,
+          source: { file: rel, line: lineOfIndex2(text, m.index) },
+          origin: "source"
+        });
+      }
+    }
+    PX_STR_RE.lastIndex = 0;
+    while ((m = PX_STR_RE.exec(text)) !== null) {
+      const px = parseFloat(m[1]);
+      if (px === 0)
+        continue;
+      dimensions.push({
+        px,
+        raw: `${m[1]}px`,
+        source: { file: rel, line: lineOfIndex2(text, m.index) },
+        origin: "source",
+        category: "spacing"
+      });
+    }
+  }
+  return { colors, dimensions, typography: [...typoAgg.values()], components };
+}
+
+// ../scanner/dist/readers/package-json.js
+import { existsSync as existsSync2, readFileSync as readFileSync4 } from "node:fs";
+import { join as join3 } from "node:path";
+var DESIGN_SYSTEMS = [
+  { dep: "tailwindcss", name: "tailwind" },
+  { dep: "@mui/material", name: "mui" },
+  { dep: "@radix-ui/themes", name: "radix" },
+  { dep: "@radix-ui/react-icons", name: "radix" },
+  { dep: "@chakra-ui/react", name: "chakra" },
+  { dep: "antd", name: "antd" }
+];
+function detectStack(root) {
+  let designSystem = null;
+  let tailwind = false;
+  const pkgPath = join3(root, "package.json");
+  if (existsSync2(pkgPath)) {
+    try {
+      const pkg = JSON.parse(readFileSync4(pkgPath, "utf8"));
+      const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+      if ("tailwindcss" in deps)
+        tailwind = true;
+      for (const { dep, name } of DESIGN_SYSTEMS) {
+        if (dep in deps) {
+          designSystem = name;
+          break;
+        }
+      }
+      if (designSystem === "tailwind" && (("class-variance-authority" in deps) || ("cmdk" in deps))) {
+        designSystem = "shadcn";
+      }
+    } catch {}
+  }
+  let canvas = null;
+  const mcpPath = join3(root, ".mcp.json");
+  if (existsSync2(mcpPath)) {
+    try {
+      const mcp = JSON.parse(readFileSync4(mcpPath, "utf8"));
+      const servers = Object.keys(mcp.mcpServers ?? {});
+      if (servers.includes("figma"))
+        canvas = "figma";
+      else if (servers.includes("pencil"))
+        canvas = "pencil";
+    } catch {}
+  }
+  return { tailwind, designSystem, canvas };
+}
+
+// ../scanner/dist/readers/theme.js
+import { readFileSync as readFileSync5 } from "node:fs";
+import { basename as basename2, relative as relative4 } from "node:path";
+
+// ../scanner/dist/util/dimension.js
+var PX_RE3 = /^(-?\d*\.?\d+)px$/i;
+var REM_RE3 = /^(-?\d*\.?\d+)rem$/i;
+var DP_RE = /^(-?\d*\.?\d+)dp$/i;
+var PT_RE = /^(-?\d*\.?\d+)pt$/i;
+function toPx3(value) {
+  const v = value.trim();
+  const px = v.match(PX_RE3);
+  if (px)
+    return { px: parseFloat(px[1]), raw: v };
+  const rem = v.match(REM_RE3);
+  if (rem)
+    return { px: parseFloat(rem[1]) * 16, raw: v };
+  const dp = v.match(DP_RE);
+  if (dp)
+    return { px: parseFloat(dp[1]), raw: v };
+  const pt = v.match(PT_RE);
+  if (pt)
+    return { px: parseFloat(pt[1]), raw: v };
+  return null;
+}
+function dimensionCategory(name) {
+  const n = name.toLowerCase();
+  return n.includes("radius") || n.includes("round") || n.includes("corner") ? "radius" : "spacing";
+}
+function lineOfIndex3(text, index) {
+  let line = 1;
+  for (let i = 0;i < index && i < text.length; i++) {
+    if (text[i] === `
+`)
+      line++;
+  }
+  return line;
+}
+
+// ../scanner/dist/readers/theme.js
+function isThemeFile(file) {
+  const b = basename2(file).toLowerCase();
+  return /(^|[.-])theme\.(t|j)sx?$/.test(b) || b === "theme.ts" || b === "theme.js";
+}
+function readTheme(root) {
+  const candidates = walk(root, [".ts", ".js", ".tsx", ".jsx", ".mjs", ".cjs"]).filter(isThemeFile);
+  if (candidates.length === 0)
+    return { found: false, colors: [] };
+  const colors = [];
+  const hexRe = /#[0-9a-fA-F]{3,8}\b/g;
+  const keyRe = /([a-zA-Z][\w-]*)\s*:\s*$/;
+  for (const file of candidates) {
+    let text;
+    try {
+      text = readFileSync5(file, "utf8");
+    } catch {
+      continue;
+    }
+    const rel = relative4(root, file);
+    let m;
+    hexRe.lastIndex = 0;
+    while ((m = hexRe.exec(text)) !== null) {
+      const hex = normalizeHex(m[0]);
+      if (!hex)
+        continue;
+      const before = text.slice(Math.max(0, m.index - 40), m.index);
+      const km = before.match(keyRe);
+      const name = km ? km[1] : undefined;
+      colors.push({
+        hex,
+        source: { file: rel, line: lineOfIndex3(text, m.index) },
+        origin: "theme",
+        name: name && name !== "main" && name !== "default" ? name : undefined
+      });
+    }
+  }
+  return { found: colors.length > 0, colors };
+}
+
+// ../scanner/dist/readers/scss.js
+import { readFileSync as readFileSync6 } from "node:fs";
+import { relative as relative5 } from "node:path";
+function isTypographyVar(name) {
+  const n = name.toLowerCase();
+  return n.includes("font") || n.includes("text") || n.includes("leading") || n.includes("line-height") || n.includes("tracking") || n.includes("letter-spacing");
+}
+function readScss(root) {
+  const files = walk(root, [".scss", ".sass"]);
+  const colors = [];
+  const dimensions = [];
+  const typography = [];
+  const varRe = /\$([\w-]+)\s*:\s*([^;\n]+)/g;
+  const hexRe = /#[0-9a-fA-F]{3,8}\b/;
+  for (const file of files) {
+    let text;
+    try {
+      text = readFileSync6(file, "utf8");
+    } catch {
+      continue;
+    }
+    const rel = relative5(root, file);
+    let m;
+    varRe.lastIndex = 0;
+    while ((m = varRe.exec(text)) !== null) {
+      const name = m[1];
+      const value = m[2].trim();
+      const line = lineOfIndex3(text, m.index);
+      const hexMatch = value.match(hexRe);
+      if (hexMatch) {
+        const hex = normalizeHex(hexMatch[0]);
+        if (hex)
+          colors.push({ hex, source: { file: rel, line }, origin: "scss", name });
+      }
+      if (isTypographyVar(name)) {
+        const n = name.toLowerCase();
+        const dim2 = toPx3(value);
+        const weight = /^\d{3}$/.test(value) ? Number(value) : undefined;
+        typography.push({
+          name,
+          fontSize: n.includes("size") && dim2 ? dim2.raw : undefined,
+          fontFamily: n.includes("family") ? value.replace(/['"]/g, "") : undefined,
+          fontWeight: n.includes("weight") ? weight : undefined,
+          lineHeight: n.includes("leading") || n.includes("line-height") ? value : undefined,
+          origin: "scss",
+          source: { file: rel, line }
+        });
+        continue;
+      }
+      const dim = toPx3(value);
+      if (dim && dim.px !== 0) {
+        dimensions.push({
+          px: dim.px,
+          raw: dim.raw,
+          source: { file: rel, line },
+          origin: "scss",
+          category: dimensionCategory(name),
+          name
+        });
+      }
+    }
+  }
+  return { colors, dimensions, typography };
+}
+
+// ../scanner/dist/readers/swift.js
+import { readFileSync as readFileSync7 } from "node:fs";
+import { relative as relative6 } from "node:path";
+function channelToHex(n) {
+  const v = n <= 1 ? Math.round(n * 255) : Math.round(n);
+  return Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0");
+}
+function readSwift(root) {
+  const files = walk(root, [".swift"]);
+  const colors = [];
+  const hexRe = /#[0-9a-fA-F]{3,8}\b/g;
+  const rgbRe = /(?:UI)?Color\(\s*red:\s*([\d.]+)\s*,\s*green:\s*([\d.]+)\s*,\s*blue:\s*([\d.]+)/g;
+  for (const file of files) {
+    let text;
+    try {
+      text = readFileSync7(file, "utf8");
+    } catch {
+      continue;
+    }
+    const rel = relative6(root, file);
+    let m;
+    hexRe.lastIndex = 0;
+    while ((m = hexRe.exec(text)) !== null) {
+      const hex = normalizeHex(m[0]);
+      if (hex)
+        colors.push({ hex, source: { file: rel, line: lineOfIndex3(text, m.index) }, origin: "swift" });
+    }
+    rgbRe.lastIndex = 0;
+    while ((m = rgbRe.exec(text)) !== null) {
+      const hex = "#" + channelToHex(parseFloat(m[1])) + channelToHex(parseFloat(m[2])) + channelToHex(parseFloat(m[3]));
+      colors.push({ hex, source: { file: rel, line: lineOfIndex3(text, m.index) }, origin: "swift" });
+    }
+  }
+  return { colors };
+}
+
+// ../scanner/dist/readers/kotlin.js
+import { readFileSync as readFileSync8 } from "node:fs";
+import { relative as relative7 } from "node:path";
+function readKotlin(root) {
+  const files = walk(root, [".kt", ".kts"]);
+  const colors = [];
+  const dimensions = [];
+  const colorRe = /Color\(\s*0x([0-9a-fA-F]{6,8})\s*\)/g;
+  const dpRe = /(\d+(?:\.\d+)?)\.dp\b/g;
+  for (const file of files) {
+    let text;
+    try {
+      text = readFileSync8(file, "utf8");
+    } catch {
+      continue;
+    }
+    const rel = relative7(root, file);
+    let m;
+    colorRe.lastIndex = 0;
+    while ((m = colorRe.exec(text)) !== null) {
+      let h = m[1].toLowerCase();
+      if (h.length === 8)
+        h = h.slice(2);
+      if (h.length === 6) {
+        colors.push({
+          hex: "#" + h,
+          source: { file: rel, line: lineOfIndex3(text, m.index) },
+          origin: "kotlin"
+        });
+      }
+    }
+    dpRe.lastIndex = 0;
+    while ((m = dpRe.exec(text)) !== null) {
+      const px = parseFloat(m[1]);
+      if (px === 0)
+        continue;
+      dimensions.push({
+        px,
+        raw: `${m[1]}dp`,
+        source: { file: rel, line: lineOfIndex3(text, m.index) },
+        origin: "kotlin",
+        category: "spacing"
+      });
+    }
+  }
+  return { colors, dimensions };
+}
+
+// ../scanner/dist/readers/storybook.js
+import { readFileSync as readFileSync9 } from "node:fs";
+import { basename as basename3, relative as relative8 } from "node:path";
+function isStoryFile(file) {
+  return /\.stories\.(t|j)sx?$/.test(basename3(file));
+}
+function readStorybook(root) {
+  const files = walk(root, [".tsx", ".jsx", ".ts", ".js"]).filter(isStoryFile);
+  const components = [];
+  for (const file of files) {
+    let text;
+    try {
+      text = readFileSync9(file, "utf8");
+    } catch {
+      continue;
+    }
+    const rel = relative8(root, file);
+    const titleM = text.match(/title\s*:\s*['"]([^'"]+)['"]/);
+    const compM = text.match(/component\s*:\s*([A-Z]\w+)/);
+    const name = compM ? compM[1] : titleM ? titleM[1].split("/").pop().trim() : basename3(file).replace(/\.stories\.(t|j)sx?$/, "");
+    const variants = [];
+    const storyRe = /export\s+const\s+([A-Z]\w+)\s*[:=]/g;
+    let m;
+    while ((m = storyRe.exec(text)) !== null) {
+      if (m[1] !== "default")
+        variants.push(m[1]);
+    }
+    components.push({ name, file: rel, variants: variants.length ? variants : undefined });
+  }
+  return { components };
+}
+
+// ../scanner/dist/readers/tokens-json.js
+import { readFileSync as readFileSync10 } from "node:fs";
+import { basename as basename4, relative as relative9 } from "node:path";
+function isTokenFile(file) {
+  const b = basename4(file).toLowerCase();
+  if (b === "package.json" || b === "tsconfig.json" || b.endsWith(".lock.json"))
+    return false;
+  return /tokens?(\.[\w-]+)?\.json$/.test(b) || /[\\/]tokens?[\\/]/.test(file.toLowerCase());
+}
+function collectLeaves(node, path, out) {
+  if (node === null || typeof node !== "object")
+    return;
+  const obj = node;
+  const value = obj.$value ?? obj.value;
+  if (value !== undefined && (typeof value === "string" || typeof value === "number")) {
+    out.push({
+      path,
+      value: String(value),
+      type: typeof obj.$type === "string" ? obj.$type : undefined
+    });
+    return;
+  }
+  for (const [k, v] of Object.entries(obj)) {
+    if (k.startsWith("$"))
+      continue;
+    collectLeaves(v, [...path, k], out);
+  }
+}
+function readTokensJson(root) {
+  const files = walk(root, [".json"]).filter(isTokenFile);
+  const colors = [];
+  const dimensions = [];
+  const typography = [];
+  let found = false;
+  for (const file of files) {
+    let parsed;
+    try {
+      parsed = JSON.parse(readFileSync10(file, "utf8"));
+    } catch {
+      continue;
+    }
+    const rel = relative9(root, file);
+    const leaves = [];
+    collectLeaves(parsed, [], leaves);
+    if (leaves.length === 0)
+      continue;
+    for (const leaf of leaves) {
+      const name = leaf.path.join("-");
+      const type = leaf.type?.toLowerCase();
+      const hex = normalizeHex(leaf.value);
+      const isColor = type === "color" || !type && hex !== null && /^#/.test(leaf.value.trim());
+      if (isColor && hex) {
+        colors.push({ hex, source: { file: rel, line: 0 }, origin: "tokens", name });
+        found = true;
+        continue;
+      }
+      const dim = toPx3(leaf.value);
+      const isDim = type === "dimension" || type === "spacing" || !type && dim !== null;
+      if (isDim && dim && dim.px !== 0) {
+        dimensions.push({
+          px: dim.px,
+          raw: dim.raw,
+          source: { file: rel, line: 0 },
+          origin: "tokens",
+          category: dimensionCategory(name),
+          name
+        });
+        found = true;
+        continue;
+      }
+      if (type === "fontfamily" || type === "typography" || /font/i.test(name)) {
+        typography.push({ name, fontFamily: leaf.value, origin: "tokens", source: { file: rel, line: 0 } });
+        found = true;
+      }
+    }
+  }
+  return { found, colors, dimensions, typography };
+}
+
+// ../scanner/dist/analyzers/colors.js
+var DUPLICATE_THRESHOLD = 5;
+function analyzeColors(raw) {
+  const exact = new Map;
+  for (const c of raw) {
+    const e = exact.get(c.hex) ?? { count: 0, names: new Map };
+    e.count++;
+    if (c.name)
+      e.names.set(c.name, (e.names.get(c.name) ?? 0) + 1);
+    exact.set(c.hex, e);
+  }
+  const sorted = [...exact.entries()].sort((a, b) => b[1].count - a[1].count);
+  const buckets = [];
+  for (const [hex, { count, names }] of sorted) {
+    const lab = rgbToLab(hexToRgb(hex));
+    const hit = buckets.find((b) => deltaE(b.lab, lab) < DUPLICATE_THRESHOLD);
+    if (hit) {
+      hit.count += count;
+      hit.members.set(hex, count);
+      for (const [n, v] of names)
+        hit.names.set(n, (hit.names.get(n) ?? 0) + v);
+    } else {
+      buckets.push({
+        hex,
+        count,
+        members: new Map([[hex, count]]),
+        lab,
+        names: new Map(names)
+      });
+    }
+  }
+  buckets.sort((a, b) => b.count - a.count);
+  const clusters = buckets.map((b, i) => {
+    const { name, named } = nameCluster(b, i);
+    return {
+      hex: b.hex,
+      count: b.count,
+      members: [...b.members.keys()],
+      name,
+      named
+    };
+  });
+  return { clusters, rawCount: exact.size };
+}
+function nameCluster(b, index) {
+  if (b.names.size > 0) {
+    const top = [...b.names.entries()].sort((x, y) => y[1] - x[1])[0][0];
+    const slug = top.toLowerCase().replace(/^--/, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+    if (slug && /^[a-z]/.test(slug))
+      return { name: slug, named: true };
+  }
+  const rgb = hexToRgb(b.hex);
+  const lum = (rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114) / 255;
+  const sat = saturation(rgb);
+  if (sat < 0.12) {
+    if (lum > 0.85)
+      return { name: "surface", named: false };
+    if (lum < 0.2)
+      return { name: "on-surface", named: false };
+    return { name: "neutral", named: false };
+  }
+  const role = ["primary", "secondary", "tertiary"][index] ?? `accent-${index}`;
+  return { name: role, named: false };
+}
+
+// ../scanner/dist/analyzers/spacing.js
+var DEFINITION_ORIGINS = new Set(["tailwind", "css-var", "scss", "tokens", "theme"]);
+function isDefinition(d) {
+  return DEFINITION_ORIGINS.has(d.origin);
+}
+function uniqueRounded(dims, min, max) {
+  return [
+    ...new Set(dims.map((d) => Math.round(d.px)).filter((v) => v >= min && v <= max))
+  ].sort((a, b) => a - b);
+}
+function analyzeSpacing(dims) {
+  const spacing = dims.filter((d) => d.category === "spacing");
+  const defined = uniqueRounded(spacing.filter(isDefinition), 1, 256);
+  if (defined.length > 0) {
+    return withGrid(defined);
+  }
+  const used = uniqueRounded(spacing, 1, 128);
+  const result = withGrid(used);
+  if (used.length >= 3 && result.grid !== null) {
+    const onGrid = used.filter((v) => v % result.grid === 0);
+    if (onGrid.length >= 3)
+      return { values: onGrid, grid: result.grid, outliers: [] };
+  }
+  return { values: [], grid: null, outliers: [] };
+}
+function withGrid(values) {
+  if (values.length === 0)
+    return { values: [], grid: null, outliers: [] };
+  let grid = null;
+  for (const base of [8, 4]) {
+    const onGrid = values.filter((v) => v % base === 0).length;
+    if (onGrid / values.length >= 0.6) {
+      grid = base;
+      break;
+    }
+  }
+  const outliers = grid ? values.filter((v) => v % grid !== 0) : [];
+  return { values, grid, outliers };
+}
+function analyzeRadius(dims) {
+  const radius = dims.filter((d) => d.category === "radius");
+  const defined = uniqueRounded(radius.filter(isDefinition), 0, 9999);
+  if (defined.length > 0)
+    return { values: defined };
+  return { values: uniqueRounded(radius, 0, 9999) };
+}
+
+// ../scanner/dist/analyzers/drift.js
+var MATCH_THRESHOLD = 5;
+function analyzeDrift(colors, dimensions, clusters, grid) {
+  const drift = [];
+  const clusterLabs = clusters.map((c) => ({
+    name: c.name,
+    lab: rgbToLab(hexToRgb(c.hex))
+  }));
+  for (const c of colors) {
+    if (c.origin !== "source")
+      continue;
+    const lab = rgbToLab(hexToRgb(c.hex));
+    let best = null;
+    for (const cl of clusterLabs) {
+      const d = deltaE(cl.lab, lab);
+      if (!best || d < best.d)
+        best = { name: cl.name, d };
+    }
+    drift.push({
+      file: c.source.file,
+      line: c.source.line,
+      value: c.hex,
+      kind: "color",
+      suggestion: best && best.d < MATCH_THRESHOLD ? `colors.${best.name}` : undefined
+    });
+  }
+  if (grid) {
+    for (const d of dimensions) {
+      if (d.origin !== "source")
+        continue;
+      const px = Math.round(d.px);
+      if (px > 0 && px % grid !== 0) {
+        const nearest = Math.round(px / grid) * grid;
+        drift.push({
+          file: d.source.file,
+          line: d.source.line,
+          value: d.raw,
+          kind: "spacing",
+          suggestion: `${nearest}px (nearest ${grid}pt step)`
+        });
+      }
+    }
+  }
+  drift.sort((a, b) => a.file === b.file ? a.line - b.line : a.file < b.file ? -1 : 1);
+  return drift;
+}
+
+// ../scanner/dist/analyzers/typography.js
+var DEFINITION_ORIGINS2 = new Set(["tailwind", "css-var", "scss", "tokens", "theme"]);
+function isDefinition2(t) {
+  return t.origin !== undefined && DEFINITION_ORIGINS2.has(t.origin);
+}
+function dominant(values) {
+  const tally = new Map;
+  for (const { value, weight } of values) {
+    tally.set(value, (tally.get(value) ?? 0) + weight);
+  }
+  let best;
+  let bestN = 0;
+  for (const [value, n] of tally) {
+    if (n > bestN) {
+      best = value;
+      bestN = n;
+    }
+  }
+  return best;
+}
+var MAX_TOKENS = 24;
+function analyzeTypography(raw) {
+  if (raw.length === 0)
+    return [];
+  const families = raw.filter((t) => t.fontFamily).map((t) => ({ value: t.fontFamily, weight: t.count ?? 1 }));
+  const weights = raw.filter((t) => typeof t.fontWeight === "number").map((t) => ({ value: String(t.fontWeight), weight: t.count ?? 1 }));
+  const dominantFamily = dominant(families);
+  const dominantWeight = dominant(weights);
+  const dominantWeightNum = dominantWeight ? Number(dominantWeight) : undefined;
+  const byPx = new Map;
+  const consider = [
+    ...raw.filter(isDefinition2),
+    ...raw.filter((t) => !isDefinition2(t))
+  ];
+  for (const t of consider) {
+    const px = fontSizeToPx(t.fontSize);
+    if (px === null)
+      continue;
+    if (byPx.has(px))
+      continue;
+    byPx.set(px, {
+      name: t.name,
+      fontSize: t.fontSize,
+      fontFamily: t.fontFamily ?? dominantFamily,
+      fontWeight: t.fontWeight ?? dominantWeightNum,
+      lineHeight: t.lineHeight,
+      origin: t.origin
+    });
+  }
+  if (byPx.size > 0) {
+    return [...byPx.entries()].sort((a, b) => b[0] - a[0]).slice(0, MAX_TOKENS).map(([, t]) => t);
+  }
+  const fallback = [];
+  const seen = new Set;
+  for (const t of raw) {
+    if (!t.fontFamily && t.fontWeight === undefined && !t.lineHeight)
+      continue;
+    const key = `${t.fontFamily ?? ""}|${t.fontWeight ?? ""}|${t.lineHeight ?? ""}`;
+    if (seen.has(key))
+      continue;
+    seen.add(key);
+    fallback.push({
+      name: t.name,
+      fontFamily: t.fontFamily,
+      fontWeight: t.fontWeight,
+      lineHeight: t.lineHeight,
+      origin: t.origin
+    });
+    if (fallback.length >= MAX_TOKENS)
+      break;
+  }
+  return fallback;
+}
+
+// ../scanner/dist/output/design-md.js
+var SPACING_NAMES = ["xs", "sm", "md", "lg", "xl", "xxl", "xxxl"];
+var RADIUS_NAMES = ["sm", "md", "lg"];
+function safeName(name, fallback) {
+  const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return /^[a-z]/.test(slug) ? slug : fallback;
+}
+function yamlColors(report) {
+  const lines = ["colors:"];
+  const used = new Set;
+  const pick = (role) => report.colors.clusters.find((c) => c.name === role)?.hex;
+  const primary = pick("primary") ?? report.colors.clusters[0]?.hex ?? "#1f2937";
+  const surface = pick("surface") ?? "#ffffff";
+  const onSurface = pick("on-surface") ?? "#111111";
+  const emit = (name, hex) => {
+    if (used.has(name))
+      return;
+    used.add(name);
+    lines.push(`  ${name}: "${hex}"`);
+  };
+  emit("primary", primary);
+  emit("on-primary", readableOn(hexToRgb(primary)));
+  const secondary = pick("secondary");
+  if (secondary) {
+    emit("secondary", secondary);
+    emit("on-secondary", readableOn(hexToRgb(secondary)));
+  }
+  const tertiary = pick("tertiary");
+  if (tertiary) {
+    emit("tertiary", tertiary);
+    emit("on-tertiary", readableOn(hexToRgb(tertiary)));
+  }
+  const neutral = pick("neutral");
+  if (neutral)
+    emit("neutral", neutral);
+  emit("surface", surface);
+  emit("on-surface", onSurface);
+  emit("error", pick("error") ?? "#b91c1c");
+  emit("on-error", "#ffffff");
+  return lines;
+}
+function yamlSpacing(report) {
+  const vals = report.spacing.values.length ? report.spacing.values : [4, 8, 16, 24, 32, 48];
+  const chosen = vals.slice(0, SPACING_NAMES.length);
+  const lines = ["spacing:"];
+  chosen.forEach((v, i) => lines.push(`  ${SPACING_NAMES[i]}: ${v}px`));
+  return lines;
+}
+function yamlRounded(report) {
+  const defaults = [4, 8, 12];
+  const detected = report.radius.values.filter((v) => v > 0);
+  const lines = ["rounded:", "  none: 0px"];
+  RADIUS_NAMES.slice(0, 3).forEach((name, i) => {
+    const v = detected[i] ?? defaults[i];
+    lines.push(`  ${name}: ${v}px`);
+  });
+  lines.push("  full: 9999px");
+  return lines;
+}
+function yamlTypography(report) {
+  const scanned = report.typography.filter((t) => t.fontSize);
+  if (scanned.length > 0) {
+    const lines = ["typography:"];
+    scanned.slice(0, 9).forEach((t, i) => {
+      const nm = safeName(t.name, `type-${i + 1}`);
+      const family = (t.fontFamily || "system-ui").split(",")[0].trim();
+      const lh = typeof t.lineHeight === "number" ? t.lineHeight : typeof t.lineHeight === "string" && /^[\d.]/.test(t.lineHeight) ? t.lineHeight : 1.4;
+      lines.push(`  ${nm}:`);
+      lines.push(`    fontFamily: ${family}`);
+      lines.push(`    fontSize: ${t.fontSize}`);
+      lines.push(`    fontWeight: ${t.fontWeight ?? 400}`);
+      lines.push(`    lineHeight: ${lh}`);
+    });
+    return lines;
+  }
+  return [
+    "typography:",
+    "  headline-lg:",
+    "    fontFamily: system-ui",
+    "    fontSize: 2.25rem",
+    "    fontWeight: 700",
+    "    lineHeight: 1.15",
+    "  headline-md:",
+    "    fontFamily: system-ui",
+    "    fontSize: 1.5rem",
+    "    fontWeight: 600",
+    "    lineHeight: 1.25",
+    "  body-md:",
+    "    fontFamily: system-ui",
+    "    fontSize: 1rem",
+    "    fontWeight: 400",
+    "    lineHeight: 1.6",
+    "  label-sm:",
+    "    fontFamily: system-ui",
+    "    fontSize: 0.75rem",
+    "    fontWeight: 500",
+    "    lineHeight: 1.3"
+  ];
+}
+function renderDesignMd(report, projectName) {
+  const name = safeName(projectName, "scanned-system");
+  const frontmatter = [
+    "---",
+    `name: ${name}`,
+    "version: alpha",
+    `description: Design tokens reverse-engineered from ${report.meta.filesScanned} files by DesignAgent.`,
+    ...yamlColors(report),
+    ...yamlTypography(report),
+    ...yamlSpacing(report),
+    ...yamlRounded(report),
+    "components:",
+    "  button-primary:",
+    '    backgroundColor: "{colors.primary}"',
+    '    textColor: "{colors.on-primary}"',
+    '    rounded: "{rounded.md}"',
+    "    padding: 12px",
+    "  card:",
+    '    backgroundColor: "{colors.surface}"',
+    '    textColor: "{colors.on-surface}"',
+    '    rounded: "{rounded.lg}"',
+    "    padding: 16px",
+    "---"
+  ].join(`
+`);
+  const gridNote = report.spacing.grid ? `Detected an ${report.spacing.grid}pt spacing grid${report.spacing.outliers.length ? `, with ${report.spacing.outliers.length} off-grid outlier(s).` : "."}` : "No consistent spacing grid detected — values are listed as found.";
+  const body = [
+    "",
+    "## Overview",
+    "",
+    `Reverse-engineered from your codebase: ${report.colors.raw} unique colors collapsed into ${report.colors.clusters.length} tokens, ${report.spacing.values.length} spacing values, ${report.components.length} components. ${report.drift.length} hardcoded value(s) flagged as drift.`,
+    "",
+    "## Colors",
+    "",
+    "Role-based palette clustered from real usage. Near-duplicates were merged.",
+    "",
+    "## Typography",
+    "",
+    "Starter type scale — refine to match your actual fonts.",
+    "",
+    "## Layout",
+    "",
+    gridNote,
+    "",
+    "## Elevation & Depth",
+    "",
+    "Keep elevation minimal; rely on surface and border contrast.",
+    "",
+    "## Components",
+    "",
+    "Token-composed primitives inferred from your component inventory.",
+    "",
+    "## Do's and Don'ts",
+    "",
+    "- **Do** replace hardcoded values flagged in the drift report with these tokens.",
+    "- **Don't** introduce off-grid spacing or one-off colors.",
+    ""
+  ].join(`
+`);
+  return frontmatter + `
+` + body;
+}
+
+// ../scanner/dist/index.js
+function mergeComponents(primary, stories) {
+  const byName = new Map;
+  for (const c of primary)
+    if (!byName.has(c.name))
+      byName.set(c.name, { ...c });
+  for (const s of stories) {
+    const existing = byName.get(s.name);
+    if (existing) {
+      if (s.variants?.length) {
+        existing.variants = [...new Set([...existing.variants ?? [], ...s.variants])];
+      }
+    } else {
+      byName.set(s.name, { ...s });
+    }
+  }
+  return [...byName.values()];
+}
+function scan(root, options = {}) {
+  const tailwind = readTailwind(root);
+  const css = readCssVars(root);
+  const scss = readScss(root);
+  const theme = readTheme(root);
+  const swift = readSwift(root);
+  const kotlin = readKotlin(root);
+  const tokens = readTokensJson(root);
+  const jsx = readJsxTsx(root);
+  const stories = readStorybook(root);
+  const detected = detectStack(root);
+  const colors = [
+    ...tailwind.colors,
+    ...css.colors,
+    ...scss.colors,
+    ...theme.colors,
+    ...tokens.colors,
+    ...swift.colors,
+    ...kotlin.colors,
+    ...jsx.colors
+  ];
+  const dimensions = [
+    ...tailwind.dimensions,
+    ...css.dimensions,
+    ...scss.dimensions,
+    ...tokens.dimensions,
+    ...kotlin.dimensions,
+    ...jsx.dimensions
+  ];
+  const rawTypography = [
+    ...tailwind.typography,
+    ...css.typography,
+    ...scss.typography,
+    ...tokens.typography,
+    ...jsx.typography
+  ];
+  const { clusters, rawCount } = analyzeColors(colors);
+  const spacing = analyzeSpacing(dimensions);
+  const radius = analyzeRadius(dimensions);
+  const typography = analyzeTypography(rawTypography);
+  const drift = analyzeDrift(colors, dimensions, clusters, spacing.grid);
+  const components = mergeComponents(jsx.components, stories.components);
+  const fileSet = new Set;
+  for (const c of colors)
+    fileSet.add(c.source.file);
+  for (const d of dimensions)
+    fileSet.add(d.source.file);
+  for (const comp of components)
+    fileSet.add(comp.file);
+  if (detected.tailwind || tailwind.found)
+    detected.tailwind = true;
+  return {
+    meta: {
+      root,
+      filesScanned: fileSet.size,
+      generatedAt: options.now ?? null
+    },
+    colors: { raw: rawCount, clusters },
+    spacing,
+    radius,
+    typography,
+    components,
+    drift,
+    detected
+  };
+}
+
+// src/scaffold.ts
+import {
+  copyFileSync,
+  existsSync as existsSync5,
+  mkdirSync as mkdirSync2,
+  readFileSync as readFileSync12,
+  renameSync,
+  writeFileSync
+} from "node:fs";
+import { join as join6 } from "node:path";
+
+// src/types.ts
+var FRAMEWORK_LABELS = {
+  react: "React",
+  vue: "Vue",
+  svelte: "Svelte",
+  "react-native": "React Native",
+  swiftui: "SwiftUI",
+  compose: "Jetpack Compose",
+  none: "None / other"
+};
+var DESIGN_SYSTEM_LABELS = {
+  tailwind: "Tailwind",
+  shadcn: "shadcn/ui",
+  custom: "Custom"
+};
+var CANVAS_LABELS = {
+  figma: "Figma",
+  pencil: "Pencil",
+  openpencil: "OpenPencil",
+  none: "None / code only"
+};
+
+// src/templates.ts
+import { readFileSync as readFileSync11, existsSync as existsSync3 } from "node:fs";
+import { dirname, join as join4, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+var here = dirname(fileURLToPath(import.meta.url));
+function resolveTemplatesDir() {
+  const candidates = [join4(here, "templates"), resolve(here, "..", "templates")];
+  for (const dir of candidates) {
+    if (existsSync3(dir))
+      return dir;
+  }
+  return candidates[0];
+}
+var TEMPLATES_DIR = resolveTemplatesDir();
+function readTemplate(relativePath) {
+  return readFileSync11(join4(TEMPLATES_DIR, relativePath), "utf8");
+}
+function fill(template, vars) {
+  return template.replace(/\{\{(\w+)\}\}/g, (match, key) => (key in vars) ? vars[key] : match);
+}
+
+// src/generators/claude-md.ts
+var FRAMEWORK_TEMPLATES = {
+  react: "react",
+  swiftui: "swiftui",
+  compose: "compose"
+};
+function canvasBlock(config) {
+  switch (config.canvas) {
+    case "figma":
+      return [
+        `Source of truth: **Figma**${config.figmaUrl ? ` — ${config.figmaUrl}` : ""}.`,
+        "",
+        "- Inspect components and variables via the Figma Dev Mode MCP (configured in `.mcp.json`).",
+        "- Use the `token-sync` skill to pull Figma variables into `DESIGN.md`. Treat Figma as the upstream for tokens.",
+        "- When code and Figma disagree on a token, sync `DESIGN.md` from Figma rather than hand-editing values."
+      ].join(`
+`);
+    case "pencil":
+    case "openpencil":
+      return [
+        `Source of truth: **${CANVAS_LABELS[config.canvas]}** (\`.pen\` files).`,
+        "",
+        "- Tokens live in the canvas's `.pen` JSON. Use the `token-sync` skill to extract them into `DESIGN.md`.",
+        "- Regenerate `DESIGN.md` from the canvas instead of editing token values by hand."
+      ].join(`
+`);
+    case "none":
+    default:
+      return [
+        "No external canvas. `DESIGN.md` is the source of truth for tokens.",
+        "",
+        "- Evolve the design system directly in `DESIGN.md` and keep it linting clean.",
+        "- You (Claude) act as the designer here — make confident, token-driven decisions and record the notable ones in `DECISIONS.md`."
+      ].join(`
+`);
+  }
+}
+function generateClaudeMd(config) {
+  const frameworkLabels = config.frameworks.map((f) => FRAMEWORK_LABELS[f]).join(", ");
+  const vars = {
+    PROJECT_NAME: config.projectName,
+    CANVAS: CANVAS_LABELS[config.canvas],
+    DESIGN_SYSTEM: DESIGN_SYSTEM_LABELS[config.designSystem],
+    FRAMEWORKS: frameworkLabels || "None",
+    CANVAS_BLOCK: canvasBlock(config)
+  };
+  const parts = [fill(readTemplate("claude-md/base.md"), vars)];
+  for (const framework of config.frameworks) {
+    const templateName = FRAMEWORK_TEMPLATES[framework];
+    if (templateName) {
+      parts.push(fill(readTemplate(`claude-md/${templateName}.md`), vars));
+    }
+  }
+  if (config.frameworks.filter((f) => f !== "none").length > 1) {
+    parts.push(fill(readTemplate("claude-md/monorepo.md"), vars));
+  }
+  return parts.join(`
+
+---
+
+`) + `
+`;
+}
+
+// src/generators/design-md.ts
+function generateDesignMd(config) {
+  const starter = readTemplate(`design-md/${config.designSystem}.md`);
+  return fill(starter, { PROJECT_NAME: config.projectName });
+}
+
+// src/generators/decisions-md.ts
+function generateDecisionsMd(config, today) {
+  const frameworks = config.frameworks.map((f) => FRAMEWORK_LABELS[f]).join(", ") || "None";
+  return `# Decisions — ${config.projectName}
+
+> The *why* behind the design system. Tokens live in \`DESIGN.md\`; conventions live in \`CLAUDE.md\`; this file records the reasoning so Claude (and you) keep context over time.
+
+## How to use this log
+Add an entry whenever you make a design decision that future-you would otherwise have to reverse-engineer: a token choice, a tradeoff, a deviation from a default, a deliberate inconsistency. Newest at the top.
+
+---
+
+## ${today} — Initialized with designagent
+
+- **Canvas:** ${CANVAS_LABELS[config.canvas]}${config.figmaUrl ? ` (${config.figmaUrl})` : ""}
+- **Design system:** ${DESIGN_SYSTEM_LABELS[config.designSystem]}
+- **Framework(s):** ${frameworks}
+
+Set up the three-file design context: \`DESIGN.md\` (tokens), \`CLAUDE.md\` (intelligence), \`DECISIONS.md\` (this log). Starting tokens are the ${DESIGN_SYSTEM_LABELS[config.designSystem]} defaults — replace with brand values and record notable choices here.
+`;
+}
+
+// src/generators/mcp-config.ts
+function generateMcpConfig(config) {
+  const mcpServers = {};
+  switch (config.canvas) {
+    case "figma":
+      mcpServers.figma = {
+        command: "npx",
+        args: ["-y", "figma-developer-mcp", "--stdio"],
+        env: { FIGMA_API_KEY: "${FIGMA_API_KEY}" }
+      };
+      break;
+    case "pencil":
+      mcpServers.pencil = {
+        command: "npx",
+        args: ["-y", "pencil-mcp"]
+      };
+      break;
+    case "openpencil":
+    case "none":
+    default:
+      return null;
+  }
+  return JSON.stringify({ mcpServers }, null, 2) + `
+`;
+}
+
+// src/lint.ts
+import { spawnSync } from "node:child_process";
+import { fileURLToPath as fileURLToPath2 } from "node:url";
+function resolveCliEntry() {
+  try {
+    const url = import.meta.resolve("@google/design.md");
+    return fileURLToPath2(url);
+  } catch {
+    return null;
+  }
+}
+function lintDesignMd(filePath) {
+  const cliEntry = resolveCliEntry();
+  if (!cliEntry) {
+    return {
+      ok: false,
+      skipped: true,
+      output: "@google/design.md not found — skipping lint."
+    };
+  }
+  const result = spawnSync(process.execPath, [cliEntry, "lint", filePath], {
+    encoding: "utf8"
+  });
+  const output = `${result.stdout ?? ""}${result.stderr ?? ""}`.trim();
+  return { ok: result.status === 0, skipped: false, output };
+}
+
+// src/skills.ts
+import { cpSync, existsSync as existsSync4, mkdirSync, readdirSync as readdirSync2 } from "node:fs";
+import { homedir } from "node:os";
+import { dirname as dirname2, join as join5, resolve as resolve2 } from "node:path";
+import { fileURLToPath as fileURLToPath3 } from "node:url";
+var here2 = dirname2(fileURLToPath3(import.meta.url));
+function resolveSkillsDir() {
+  const candidates = [
+    join5(here2, "skills"),
+    resolve2(here2, "..", "..", "skills")
+  ];
+  return candidates.find((dir) => existsSync4(dir)) ?? null;
+}
+function skillsInstallDir() {
+  return join5(homedir(), ".designagent", "skills");
+}
+function installSkills() {
+  const src = resolveSkillsDir();
+  if (!src)
+    return [];
+  const dest = skillsInstallDir();
+  mkdirSync(dest, { recursive: true });
+  const installed = [];
+  for (const entry of readdirSync2(src, { withFileTypes: true })) {
+    if (!entry.isDirectory())
+      continue;
+    cpSync(join5(src, entry.name), join5(dest, entry.name), { recursive: true });
+    installed.push(entry.name);
+  }
+  return installed.sort();
+}
+
+// src/scaffold.ts
+var AUGMENT_MARKER = "<!-- designagent:begin -->";
+function normalizeOptions(opts) {
+  return typeof opts === "string" ? { today: opts } : opts;
+}
+function scaffold(config, cwd, optsOrToday) {
+  const { today, designMd: designMdOverride, mode = "fresh" } = normalizeOptions(optsOrToday);
+  const designMd = designMdOverride ?? generateDesignMd(config);
+  const claudeMd = generateClaudeMd(config);
+  const decisionsMd = generateDecisionsMd(config, today);
+  const mcpConfig = generateMcpConfig(config);
+  const designMdPath = join6(cwd, "DESIGN.md");
+  const claudeMdPath = join6(cwd, "CLAUDE.md");
+  const decisionsMdPath = join6(cwd, "DECISIONS.md");
+  const mcpPath = join6(cwd, ".mcp.json");
+  const backedUp = [];
+  let claudeAugmented = false;
+  if (mode === "fresh") {
+    const backupDir = join6(cwd, ".designagent", "backup", today);
+    for (const [path, name] of [
+      [designMdPath, "DESIGN.md"],
+      [claudeMdPath, "CLAUDE.md"],
+      [decisionsMdPath, "DECISIONS.md"]
+    ]) {
+      if (existsSync5(path)) {
+        mkdirSync2(backupDir, { recursive: true });
+        copyFileSync(path, join6(backupDir, name));
+        backedUp.push(name);
+      }
+    }
+    writeFileSync(designMdPath, designMd, "utf8");
+    writeFileSync(claudeMdPath, claudeMd, "utf8");
+    writeFileSync(decisionsMdPath, decisionsMd, "utf8");
+  } else {
+    if (!existsSync5(designMdPath))
+      writeFileSync(designMdPath, designMd, "utf8");
+    if (!existsSync5(decisionsMdPath))
+      writeFileSync(decisionsMdPath, decisionsMd, "utf8");
+    if (!existsSync5(claudeMdPath)) {
+      writeFileSync(claudeMdPath, claudeMd, "utf8");
+    } else {
+      const current = readFileSync12(claudeMdPath, "utf8");
+      if (!current.includes(AUGMENT_MARKER)) {
+        const block = `
+
+${AUGMENT_MARKER}
+${claudeMd}
+<!-- designagent:end -->
+`;
+        writeFileSync(claudeMdPath, current + block, "utf8");
+        claudeAugmented = true;
+      }
+    }
+  }
+  let mcpWritten = false;
+  if (mcpConfig) {
+    const shouldWrite = mode === "fresh" || !existsSync5(mcpPath);
+    if (shouldWrite) {
+      writeFileSync(mcpPath, mcpConfig, "utf8");
+      mcpWritten = true;
+    }
+  }
+  const configDir = join6(cwd, ".designagent");
+  mkdirSync2(configDir, { recursive: true });
+  writeFileSync(join6(configDir, "config.json"), JSON.stringify(config, null, 2) + `
+`, "utf8");
+  const lint = lintDesignMd(designMdPath);
+  const installedSkills = installSkills();
+  return {
+    designMdPath,
+    mcpWritten,
+    lint,
+    installedSkills,
+    backedUp,
+    claudeAugmented
+  };
+}
+function migrateLowercaseDesignMd(cwd) {
+  const lower = join6(cwd, "design.md");
+  if (!existsSync5(lower))
+    return null;
+  const bak = join6(cwd, ".design.md.bak");
+  renameSync(lower, bak);
+  return bak;
+}
+
+// src/detect.ts
+import { readdirSync as readdirSync3 } from "node:fs";
+function detectExisting(cwd) {
+  let entries = [];
+  try {
+    entries = readdirSync3(cwd, { withFileTypes: true }).filter((e) => e.isFile()).map((e) => e.name);
+  } catch {}
+  const names = new Set(entries);
+  const claudeMd = names.has("CLAUDE.md");
+  const designMd = names.has("DESIGN.md");
+  const designMdLower = !designMd && names.has("design.md");
+  const decisionsMd = names.has("DECISIONS.md");
+  const mcp = names.has(".mcp.json");
+  return {
+    claudeMd,
+    designMd,
+    designMdLower,
+    decisionsMd,
+    mcp,
+    hasAny: claudeMd || designMd || designMdLower || decisionsMd,
+    migratable: designMdLower
+  };
+}
+
+// src/commands/init.ts
+function bail() {
+  cancel("Setup cancelled.");
+  process.exit(0);
+}
+function validateFigmaUrl(value) {
+  if (!value)
+    return "Paste a Figma file URL.";
+  if (!/figma\.com\/(file|design)\//.test(value)) {
+    return "That doesn't look like a Figma file URL (expected figma.com/design/... or /file/...).";
+  }
+  return;
+}
+var SKILLS_FOR_SUMMARY = ["design-to-code", "a11y-check", "token-sync"];
+function mapDetectedDesignSystem(detected) {
+  if (detected === "tailwind" || detected === "shadcn")
+    return detected;
+  return "custom";
+}
+function mapDetectedCanvas(detected) {
+  if (detected === "figma" || detected === "pencil")
+    return detected;
+  return "none";
+}
+function scanSummary(report) {
+  const { colors, spacing, radius, typography, components, drift, detected } = report;
+  const gridLine = spacing.grid ? `${spacing.values.length} (${spacing.values.length - spacing.outliers.length} on ${spacing.grid}pt grid, ${spacing.outliers.length} off)` : `${spacing.values.length}`;
+  const lines = [
+    `Colors found        ${colors.raw} ${pc.dim(`(${colors.clusters.length} tokens after clustering)`)}`,
+    `Typography found    ${typography.length}`,
+    `Spacing values      ${gridLine}`,
+    `Border radius       ${radius.values.length}`,
+    `Components found     ${components.length}`,
+    drift.length > 0 ? pc.yellow(`Hardcoded values    ${drift.length}  ← drift detected`) : pc.green("Hardcoded values    0")
+  ];
+  if (detected.designSystem)
+    lines.push(pc.dim(`Design system       ${detected.designSystem} detected`));
+  if (detected.canvas)
+    lines.push(pc.dim(`Canvas              ${detected.canvas} config found`));
+  return lines.join(`
+`);
+}
+async function init() {
+  console.log("");
+  intro(pc.bold(pc.cyan("Design Agent")) + pc.dim(" — reading your codebase"));
+  const cwd = process.cwd();
+  const existing = detectExisting(cwd);
+  let mode = "fresh";
+  let doMigrate = false;
+  if (existing.hasAny) {
+    const found = [
+      existing.claudeMd && "CLAUDE.md",
+      existing.designMd && "DESIGN.md",
+      existing.designMdLower && "design.md (non-standard)",
+      existing.decisionsMd && "DECISIONS.md"
+    ].filter(Boolean);
+    note(found.join(`
+`), "Existing files detected");
+    const choice = await select({
+      message: "What should DesignAgent do?",
+      options: [
+        {
+          value: "augment",
+          label: "Augment",
+          hint: "add DesignAgent without overwriting anything"
+        },
+        ...existing.migratable ? [
+          {
+            value: "migrate",
+            label: "Migrate",
+            hint: "convert design.md → DESIGN.md (keeps a .bak)"
+          }
+        ] : [],
+        {
+          value: "fresh",
+          label: "Fresh",
+          hint: "start clean (backs up originals first)"
+        },
+        { value: "cancel", label: "Cancel" }
+      ],
+      initialValue: "augment"
+    });
+    if (isCancel(choice) || choice === "cancel")
+      bail();
+    if (choice === "migrate") {
+      doMigrate = true;
+      mode = "fresh";
+    } else {
+      mode = choice;
+    }
+  }
+  const scanSpin = spinner();
+  scanSpin.start("Scanning your codebase");
+  const report = scan(cwd);
+  scanSpin.stop(`Scanned — ${report.colors.raw} colors, ${report.components.length} components, ${report.drift.length} drift`);
+  note(scanSummary(report), "What we found");
+  const answers = await group({
+    canvas: () => select({
+      message: "What's your canvas?",
+      options: [
+        { value: "figma", label: "Figma" },
+        { value: "pencil", label: "Pencil" },
+        { value: "openpencil", label: "OpenPencil" },
+        { value: "none", label: "None / code only" }
+      ],
+      initialValue: mapDetectedCanvas(report.detected.canvas)
+    }),
+    figmaUrl: ({ results }) => results.canvas === "figma" ? text({
+      message: "Paste your Figma file URL",
+      placeholder: "https://figma.com/design/…",
+      validate: validateFigmaUrl
+    }) : Promise.resolve(undefined),
+    designSystem: () => select({
+      message: "What's your design system?",
+      options: [
+        { value: "tailwind", label: "Tailwind" },
+        { value: "shadcn", label: "shadcn/ui" },
+        { value: "custom", label: "Custom" }
+      ],
+      initialValue: mapDetectedDesignSystem(report.detected.designSystem)
+    }),
+    frameworks: () => multiselect({
+      message: "Component framework? (space to select, enter to confirm)",
+      options: [
+        { value: "react", label: "React", hint: "Web" },
+        { value: "vue", label: "Vue", hint: "Web" },
+        { value: "svelte", label: "Svelte", hint: "Web" },
+        { value: "react-native", label: "React Native", hint: "Cross-platform" },
+        { value: "swiftui", label: "SwiftUI", hint: "Native mobile" },
+        { value: "compose", label: "Jetpack Compose", hint: "Native mobile" },
+        { value: "none", label: "None / other" }
+      ],
+      initialValues: ["react"],
+      required: true
+    }),
+    projectName: () => text({
+      message: "Project name?",
+      placeholder: basename5(cwd),
+      defaultValue: basename5(cwd)
+    })
+  }, { onCancel: bail });
+  const config = {
+    projectName: answers.projectName || basename5(cwd),
+    canvas: answers.canvas,
+    figmaUrl: answers.figmaUrl ?? null,
+    designSystem: answers.designSystem,
+    frameworks: answers.frameworks
+  };
+  const willWriteDesignMd = mode === "fresh" || !existing.designMd;
+  const scanHasTokens = report.colors.clusters.length > 0;
+  let designMdOverride;
+  if (willWriteDesignMd && scanHasTokens) {
+    const useScan = await confirm({
+      message: `Generate DESIGN.md from what we found? ${pc.dim(`(${report.colors.clusters.length} tokens, ${report.drift.length} drift)`)}`,
+      initialValue: true
+    });
+    if (isCancel(useScan))
+      bail();
+    if (useScan)
+      designMdOverride = renderDesignMd(report, config.projectName);
+  }
+  if (doMigrate)
+    migrateLowercaseDesignMd(cwd);
+  const today = new Date().toISOString().slice(0, 10);
+  const s = spinner();
+  s.start("Building your design system");
+  const result = scaffold(config, cwd, {
+    today,
+    mode,
+    designMd: designMdOverride
+  });
+  s.stop("Design system ready");
+  const lintLine = result.lint.skipped ? pc.yellow("DESIGN.md     written (lint skipped — @google/design.md not installed)") : result.lint.ok ? pc.green(`DESIGN.md     ${designMdOverride ? "reverse-engineered, linted clean" : "linted clean"}`) : pc.red("DESIGN.md     written, but lint reported issues (see below)");
+  const skillList = (result.installedSkills.length ? result.installedSkills : SKILLS_FOR_SUMMARY).join(", ");
+  const claudeLine = result.claudeAugmented ? pc.green("CLAUDE.md     augmented (existing file preserved)") : pc.green(`CLAUDE.md     ${config.frameworks.length ? frameworkSummary(config.frameworks) : "design intelligence"}`);
+  note([
+    lintLine,
+    claudeLine,
+    pc.green("DECISIONS.md  created"),
+    result.mcpWritten ? pc.green(`.mcp.json     ${config.canvas} MCP configured`) : pc.dim(".mcp.json     not changed"),
+    pc.green(`Skills        ${skillList}`),
+    result.backedUp.length ? pc.dim(`Backed up     ${result.backedUp.join(", ")} → .designagent/backup/${today}/`) : ""
+  ].filter(Boolean).join(`
+`), "Files");
+  if (!result.lint.ok && !result.lint.skipped && result.lint.output) {
+    note(pc.dim(result.lint.output), "Lint output");
+  }
+  outro(pc.bold("You're agent-ready.") + pc.dim(" Start Claude Code and build with design intelligence."));
+}
+function frameworkSummary(frameworks) {
+  const real = frameworks.filter((f) => f !== "none");
+  if (real.length === 0)
+    return "tokens only";
+  if (real.length === 1)
+    return real[0];
+  return `${real.length} targets`;
+}
+
+// src/commands/docs.ts
+import { mkdirSync as mkdirSync3, watch, writeFileSync as writeFileSync2 } from "node:fs";
+import { join as join7 } from "node:path";
+import { spawn } from "node:child_process";
+import { platform } from "node:os";
+import pc2 from "picocolors";
+
+// ../docs/dist/styles.js
+var STYLES = `
+:root {
+  --bg: #0b0c0e;
+  --panel: #14161a;
+  --panel-2: #1a1d22;
+  --border: #262a31;
+  --text: #e8eaed;
+  --text-2: #9aa1ab;
+  --text-3: #6b7280;
+  --accent: #6ea8fe;
+  --good: #4ade80;
+  --warn: #fbbf24;
+  --bad: #f87171;
+  --radius: 12px;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.55; }
+.wrap { max-width: 960px; margin: 0 auto; padding: 48px 24px 96px; }
+
+header.hero { margin-bottom: 8px; }
+.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
+h1 { font-size: 28px; font-weight: 650; margin: 6px 0 4px; }
+.hero-sub { color: var(--text-2); font-size: 14px; }
+
+.stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; }
+.stat { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; min-width: 92px; }
+.stat-num { font-size: 20px; font-weight: 650; }
+.stat-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
+.stat.warn .stat-num { color: var(--warn); }
+
+nav.toc { position: sticky; top: 0; background: rgba(11,12,14,.85); backdrop-filter: blur(8px); display: flex; gap: 4px; flex-wrap: wrap; padding: 12px 0; margin: 16px 0 8px; border-bottom: 1px solid var(--border); z-index: 10; }
+nav.toc a { font-size: 13px; color: var(--text-2); text-decoration: none; padding: 4px 10px; border-radius: 8px; }
+nav.toc a:hover { background: var(--panel-2); color: var(--text); }
+
+section { padding: 32px 0; border-bottom: 1px solid var(--border); }
+section:last-child { border-bottom: none; }
+h2 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
+h3 { font-size: 14px; font-weight: 600; margin: 20px 0 10px; color: var(--text-2); }
+h3 .count { color: var(--text-3); font-weight: 500; }
+.section-sub { color: var(--text-2); font-size: 13px; margin-bottom: 16px; }
+.empty { color: var(--text-3); font-size: 14px; padding: 16px 0; }
+.empty.good { color: var(--good); }
+.muted { color: var(--text-3); }
+code { font-family: var(--mono); font-size: 12px; background: var(--panel-2); padding: 1px 6px; border-radius: 5px; }
+.badge { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; background: var(--panel-2); color: var(--text-3); padding: 1px 5px; border-radius: 4px; vertical-align: middle; }
+.badge.warn { background: rgba(251,191,36,.15); color: var(--warn); }
+
+/* Colors */
+.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
+.swatch { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.swatch-chip { height: 88px; display: flex; align-items: flex-end; padding: 8px; }
+.swatch-ratio { font-size: 11px; font-family: var(--mono); opacity: .9; }
+.swatch-ratio em { font-style: normal; font-weight: 600; }
+.swatch-meta { padding: 10px 12px; }
+.swatch-name { font-family: var(--mono); font-size: 12px; font-weight: 600; }
+.swatch-hex { font-family: var(--mono); font-size: 12px; color: var(--text-2); text-transform: uppercase; }
+.swatch-count { font-size: 11px; color: var(--text-3); margin-top: 2px; }
+.swatch-dupes { font-size: 10px; color: var(--warn); margin-top: 4px; }
+
+/* Drift */
+.drift-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.drift-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); padding: 6px 10px; border-bottom: 1px solid var(--border); }
+.drift-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
+.drift-line { color: var(--text-3); }
+.drift-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--border); }
+.suggest { color: var(--good); background: rgba(74,222,128,.1); }
+
+/* Spacing ruler */
+.ruler { display: flex; flex-direction: column; gap: 6px; }
+.ruler-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; }
+.ruler-label { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
+.ruler-track { background: var(--panel); border-radius: 6px; height: 18px; overflow: hidden; }
+.ruler-bar { height: 100%; background: var(--accent); border-radius: 6px; }
+.ruler-row.off .ruler-bar { background: var(--warn); }
+
+/* Typography */
+.type-list { display: flex; flex-direction: column; gap: 4px; }
+.type-row { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 16px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
+.type-preview { font-size: 28px; line-height: 1; text-align: center; }
+.type-name { font-family: var(--mono); font-size: 13px; font-weight: 600; }
+.type-props { font-size: 12px; color: var(--text-2); }
+
+/* Components */
+.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
+.comp { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
+.comp-name { font-size: 14px; font-weight: 600; }
+.comp-file { font-size: 11px; color: var(--text-3); margin-top: 2px; }
+.comp-file code { background: none; padding: 0; }
+
+footer { margin-top: 48px; color: var(--text-3); font-size: 12px; text-align: center; }
+footer a { color: var(--text-2); }
+`;
+
+// ../docs/dist/util.js
+function esc(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function hexToRgb2(hex) {
+  const h = hex.replace("#", "");
+  return {
+    r: parseInt(h.slice(0, 2), 16),
+    g: parseInt(h.slice(2, 4), 16),
+    b: parseInt(h.slice(4, 6), 16)
+  };
+}
+function srgbToLinear2(c) {
+  const v = c / 255;
+  return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+}
+function relativeLuminance2(hex) {
+  const { r, g, b } = hexToRgb2(hex);
+  return 0.2126 * srgbToLinear2(r) + 0.7152 * srgbToLinear2(g) + 0.0722 * srgbToLinear2(b);
+}
+function contrastRatio2(a, b) {
+  const la = relativeLuminance2(a);
+  const lb = relativeLuminance2(b);
+  const hi = Math.max(la, lb);
+  const lo = Math.min(la, lb);
+  return (hi + 0.05) / (lo + 0.05);
+}
+function readableText(bgHex) {
+  return contrastRatio2(bgHex, "#ffffff") >= contrastRatio2(bgHex, "#111111") ? "#ffffff" : "#111111";
+}
+function wcagRating(ratio) {
+  if (ratio >= 7)
+    return { label: "AAA", pass: true };
+  if (ratio >= 4.5)
+    return { label: "AA", pass: true };
+  if (ratio >= 3)
+    return { label: "AA large", pass: false };
+  return { label: "Fail", pass: false };
+}
+
+// ../docs/dist/sections/colors.js
+function renderColors(report) {
+  const clusters = report.colors.clusters;
+  if (clusters.length === 0) {
+    return section("colors", "Colors", `<p class="empty">No colors found in the codebase.</p>`);
+  }
+  const cards = clusters.map((c) => {
+    const text2 = readableText(c.hex);
+    const ratio = contrastRatio2(c.hex, text2);
+    const rating = wcagRating(ratio);
+    const dupes = c.members.length > 1 ? `<div class="swatch-dupes" title="Near-duplicates merged into this token">+${c.members.length - 1} near-duplicate${c.members.length - 1 > 1 ? "s" : ""}</div>` : "";
+    return `
+      <div class="swatch">
+        <div class="swatch-chip" style="background:${esc(c.hex)};color:${text2}">
+          <span class="swatch-ratio" title="Contrast of ${text2 === "#ffffff" ? "white" : "black"} text">${ratio.toFixed(1)}:1 <em>${rating.label}</em></span>
+        </div>
+        <div class="swatch-meta">
+          <div class="swatch-name">colors.${esc(c.name)}${c.named ? "" : ' <span class="badge">auto</span>'}</div>
+          <div class="swatch-hex">${esc(c.hex)}</div>
+          <div class="swatch-count">${c.count} use${c.count === 1 ? "" : "s"}</div>
+          ${dupes}
+        </div>
+      </div>`;
+  }).join("");
+  const summary = `<p class="section-sub">${report.colors.raw} unique colors → ${clusters.length} tokens after clustering near-duplicates.</p>`;
+  return section("colors", "Colors", summary + `<div class="swatch-grid">${cards}</div>`);
+}
+function section(id, title, body) {
+  return `<section id="${id}"><h2>${title}</h2>${body}</section>`;
+}
+
+// ../docs/dist/sections/drift.js
+function renderDrift(report) {
+  const drift = report.drift;
+  if (drift.length === 0) {
+    return section2("drift", "Drift report", `<p class="empty good">✓ No hardcoded values detected. Everything references a token.</p>`);
+  }
+  const colorDrift = drift.filter((d) => d.kind === "color");
+  const spacingDrift = drift.filter((d) => d.kind === "spacing");
+  const rows = (items) => items.map((d) => `
+      <tr>
+        <td class="drift-loc"><code>${esc(d.file)}</code><span class="drift-line">:${d.line}</span></td>
+        <td class="drift-val">${d.kind === "color" ? `<span class="drift-chip" style="background:${esc(d.value)}"></span>` : ""}<code>${esc(d.value)}</code></td>
+        <td class="drift-fix">${d.suggestion ? `<code class="suggest">${esc(d.suggestion)}</code>` : `<span class="muted">no close token — consider adding one</span>`}</td>
+      </tr>`).join("");
+  const table = (label, items) => items.length ? `<h3>${label} <span class="count">${items.length}</span></h3>
+         <table class="drift-table">
+           <thead><tr><th>Location</th><th>Hardcoded value</th><th>Suggested token</th></tr></thead>
+           <tbody>${rows(items)}</tbody>
+         </table>` : "";
+  const summary = `<p class="section-sub"><strong>${drift.length}</strong> hardcoded value${drift.length === 1 ? "" : "s"} that should reference a token — ${colorDrift.length} color, ${spacingDrift.length} spacing.</p>`;
+  return section2("drift", "Drift report", summary + table("Colors", colorDrift) + table("Spacing", spacingDrift));
+}
+function section2(id, title, body) {
+  return `<section id="${id}"><h2>${title}</h2>${body}</section>`;
+}
+
+// ../docs/dist/sections/spacing.js
+function renderSpacing(report) {
+  const { values, grid, outliers } = report.spacing;
+  if (values.length === 0) {
+    return section3("spacing", "Spacing", `<p class="empty">No spacing scale detected.</p>`);
+  }
+  const outlierSet = new Set(outliers);
+  const max = Math.max(...values, 1);
+  const bars = values.map((v) => {
+    const off = outlierSet.has(v);
+    const width = Math.max(2, Math.round(v / max * 100));
+    return `
+      <div class="ruler-row${off ? " off" : ""}">
+        <div class="ruler-label">${v}px${off ? ' <span class="badge warn">off-grid</span>' : ""}</div>
+        <div class="ruler-track"><div class="ruler-bar" style="width:${width}%"></div></div>
+      </div>`;
+  }).join("");
+  const gridNote = grid ? `<p class="section-sub">Detected an <strong>${grid}pt grid</strong>${outliers.length ? ` — ${outliers.length} value${outliers.length === 1 ? "" : "s"} off the grid.` : " — all values aligned."}</p>` : `<p class="section-sub">No consistent grid detected.</p>`;
+  return section3("spacing", "Spacing", gridNote + `<div class="ruler">${bars}</div>`);
+}
+function section3(id, title, body) {
+  return `<section id="${id}"><h2>${title}</h2>${body}</section>`;
+}
+
+// ../docs/dist/sections/typography.js
+function renderTypography(report) {
+  const type = report.typography;
+  if (type.length === 0) {
+    return section4("typography", "Typography", `<p class="empty">No typography tokens detected in the codebase.</p>`);
+  }
+  const rows = type.map((t) => {
+    const size = t.fontSize ?? "—";
+    const family = t.fontFamily ?? "inherit";
+    const preview = t.fontSize && /^\d/.test(t.fontSize) ? `<div class="type-preview" style="font-size:${esc(t.fontSize)};font-family:${esc(family)}">Ag</div>` : `<div class="type-preview muted">Ag</div>`;
+    return `
+      <div class="type-row">
+        ${preview}
+        <div class="type-meta">
+          <div class="type-name">${esc(t.name)}</div>
+          <div class="type-props"><code>${esc(size)}</code>${t.fontFamily ? ` · ${esc(t.fontFamily)}` : ""}${t.fontWeight ? ` · ${t.fontWeight}` : ""}</div>
+        </div>
+      </div>`;
+  }).join("");
+  return section4("typography", "Typography", `<p class="section-sub">${type.length} type token${type.length === 1 ? "" : "s"} found.</p><div class="type-list">${rows}</div>`);
+}
+function section4(id, title, body) {
+  return `<section id="${id}"><h2>${title}</h2>${body}</section>`;
+}
+
+// ../docs/dist/sections/components.js
+function renderComponents(report) {
+  const components = report.components;
+  if (components.length === 0) {
+    return section5("components", "Components", `<p class="empty">No components found.</p>`);
+  }
+  const seen = new Map;
+  for (const c of components)
+    if (!seen.has(c.name))
+      seen.set(c.name, c.file);
+  const items = [...seen.entries()].sort((a, b) => a[0].localeCompare(b[0])).map(([name, file]) => `
+      <div class="comp">
+        <div class="comp-name">${esc(name)}</div>
+        <div class="comp-file"><code>${esc(file)}</code></div>
+      </div>`).join("");
+  return section5("components", "Components", `<p class="section-sub">${seen.size} component${seen.size === 1 ? "" : "s"} inventoried.</p><div class="comp-grid">${items}</div>`);
+}
+function section5(id, title, body) {
+  return `<section id="${id}"><h2>${title}</h2>${body}</section>`;
+}
+
+// ../docs/dist/renderer.js
+function renderDocs(report, options) {
+  const { projectName, generatedAt } = options;
+  const stat = (num, label, warn = false) => `<div class="stat${warn ? " warn" : ""}"><div class="stat-num">${esc(String(num))}</div><div class="stat-label">${esc(label)}</div></div>`;
+  const stats = [
+    stat(report.colors.clusters.length, "color tokens"),
+    stat(report.spacing.values.length, "spacing"),
+    stat(report.typography.length, "type"),
+    stat(report.components.length, "components"),
+    stat(report.drift.length, "drift", report.drift.length > 0)
+  ].join("");
+  const toc = [
+    ["colors", "Colors"],
+    ["drift", "Drift"],
+    ["spacing", "Spacing"],
+    ["typography", "Typography"],
+    ["components", "Components"]
+  ].map(([id, label]) => `<a href="#${id}">${label}</a>`).join("");
+  const sections = [
+    renderColors(report),
+    renderDrift(report),
+    renderSpacing(report),
+    renderTypography(report),
+    renderComponents(report)
+  ].join(`
+`);
+  const dateLine = generatedAt ? `<span class="hero-sub">Generated ${esc(generatedAt)}</span>` : "";
+  const reloadMeta = options.autoReloadSeconds && options.autoReloadSeconds > 0 ? `
+<meta http-equiv="refresh" content="${Math.round(options.autoReloadSeconds)}">` : "";
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">${reloadMeta}
+<title>${esc(projectName)} — Design System</title>
+<style>${STYLES}</style>
+</head>
+<body>
+<div class="wrap">
+  <header class="hero">
+    <div class="eyebrow">DesignAgent · reverse-engineered</div>
+    <h1>${esc(projectName)} — Design System</h1>
+    <p class="hero-sub">Pulled from your codebase. ${dateLine}</p>
+    <div class="stats">${stats}</div>
+  </header>
+  <nav class="toc">${toc}</nav>
+  <main>
+    ${sections}
+  </main>
+  <footer>
+    Generated by <a href="https://designagent.dev">DesignAgent</a> from <code>DESIGN.md</code> + codebase scan.
+  </footer>
+</div>
+</body>
+</html>
+`;
+}
+// src/commands/docs.ts
+function buildDocs(cwd, outPath, autoReloadSeconds) {
+  const report = scan(cwd);
+  const projectName = cwd.split("/").filter(Boolean).pop() ?? "project";
+  const html = renderDocs(report, { projectName, autoReloadSeconds });
+  writeFileSync2(outPath, html, "utf8");
+  return {
+    drift: report.drift.length,
+    tokens: report.colors.clusters.length,
+    components: report.components.length
+  };
+}
+function openInBrowser(path) {
+  const os = platform();
+  const cmd = os === "darwin" ? "open" : os === "win32" ? "start" : "xdg-open";
+  try {
+    const child = spawn(cmd, [path], { stdio: "ignore", detached: true, shell: os === "win32" });
+    child.on("error", () => {});
+    child.unref();
+  } catch {}
+}
+function docs(cwd, options = {}) {
+  let outPath;
+  if (options.exportStatic) {
+    const dir = join7(cwd, "designagent-docs");
+    mkdirSync3(dir, { recursive: true });
+    outPath = join7(dir, "index.html");
+  } else {
+    const dir = join7(cwd, ".designagent");
+    mkdirSync3(dir, { recursive: true });
+    outPath = join7(dir, "docs.html");
+  }
+  const reloadSeconds = options.watch ? 2 : undefined;
+  const stats = buildDocs(cwd, outPath, reloadSeconds);
+  console.log(pc2.green("✓ ") + `Visual docs written to ${pc2.bold(outPath)}
+` + pc2.dim(`  ${stats.tokens} color tokens · ${stats.components} components · ${stats.drift} drift`));
+  if (!options.noOpen && !options.exportStatic)
+    openInBrowser(outPath);
+  if (options.watch) {
+    console.log(pc2.dim("  watching for changes — Ctrl-C to stop"));
+    let timer = null;
+    const rebuild = () => {
+      if (timer)
+        clearTimeout(timer);
+      timer = setTimeout(() => {
+        try {
+          const s = buildDocs(cwd, outPath, reloadSeconds);
+          console.log(pc2.dim(`  ↻ regenerated — ${s.tokens} tokens · ${s.components} components · ${s.drift} drift`));
+        } catch {}
+      }, 150);
+    };
+    try {
+      watch(cwd, { recursive: true }, (_event, filename) => {
+        if (!filename)
+          return;
+        const f = filename.toString();
+        if (f.includes(".designagent") || f.includes("designagent-docs") || f.includes("node_modules"))
+          return;
+        rebuild();
+      });
+    } catch {
+      console.log(pc2.yellow("  (recursive watch unsupported on this platform)"));
+    }
+  }
+  return outPath;
+}
+
+// src/commands/studio.ts
+import { mkdirSync as mkdirSync4, writeFileSync as writeFileSync3 } from "node:fs";
+import { join as join9 } from "node:path";
+import { spawn as spawn2 } from "node:child_process";
+import { platform as platform2 } from "node:os";
+import pc3 from "picocolors";
+
+// ../studio/dist/model.js
+import { basename as basename6 } from "node:path";
+
+// ../studio/dist/discovery/components.js
+import { readFileSync as readFileSync13 } from "node:fs";
+import { join as join8 } from "node:path";
+
+// ../studio/dist/discovery/props.js
+import { existsSync as existsSync6 } from "node:fs";
+import { Project } from "ts-morph";
+function literalUnion(typeText) {
+  if (!typeText.includes("|"))
+    return [];
+  const matches = typeText.match(/'[^']*'|"[^"]*"/g);
+  if (!matches)
+    return [];
+  const parts = typeText.split("|").map((p) => p.trim());
+  if (matches.length < parts.length)
+    return [];
+  return matches.map((m) => m.slice(1, -1));
+}
+function propsFromMembers(decl) {
+  const props = [];
+  const variants = [];
+  const members = "getProperties" in decl && typeof decl.getProperties === "function" ? decl.getProperties() : [];
+  for (const m of members) {
+    let name;
+    let typeText = "unknown";
+    let required = true;
+    let description;
+    try {
+      name = m.getName();
+      const node = m.getTypeNode();
+      typeText = node ? node.getText() : m.getType().getText();
+      required = !m.hasQuestionToken();
+      const docs2 = m.getJsDocs();
+      if (docs2.length) {
+        const d = docs2[docs2.length - 1].getDescription().trim();
+        if (d)
+          description = d;
+      }
+    } catch {
+      continue;
+    }
+    props.push({ name, type: typeText, required, description });
+    const values = literalUnion(typeText);
+    if (values.length >= 2)
+      variants.push({ prop: name, values });
+  }
+  return { props, variants };
+}
+function discoverProps(absFilePath, componentName2) {
+  if (!existsSync6(absFilePath))
+    return { props: [], variants: [] };
+  let source;
+  try {
+    const project = new Project({
+      useInMemoryFileSystem: false,
+      skipAddingFilesFromTsConfig: true,
+      compilerOptions: { allowJs: true, jsx: 4 }
+    });
+    source = project.addSourceFileAtPath(absFilePath);
+  } catch {
+    return { props: [], variants: [] };
+  }
+  try {
+    const wanted = `${componentName2}Props`;
+    const iface = source.getInterface(wanted) ?? source.getInterfaces().find((i) => /props$/i.test(i.getName()));
+    if (iface) {
+      const out = propsFromMembers(iface);
+      const docs2 = iface.getJsDocs();
+      if (docs2.length) {
+        const d = docs2[docs2.length - 1].getDescription().trim();
+        if (d)
+          out.description = d;
+      }
+      return out;
+    }
+    const alias = source.getTypeAlias(wanted) ?? source.getTypeAliases().find((t) => /props$/i.test(t.getName()));
+    if (alias) {
+      const props = [];
+      const variants = [];
+      const body = alias.getTypeNode()?.getText() ?? "";
+      const memberRe = /([a-zA-Z_$][\w$]*)\s*(\?)?\s*:\s*([^;\n}]+)/g;
+      let m;
+      while ((m = memberRe.exec(body)) !== null) {
+        const name = m[1];
+        const required = !m[2];
+        const typeText = m[3].trim();
+        props.push({ name, type: typeText, required });
+        const values = literalUnion(typeText);
+        if (values.length >= 2)
+          variants.push({ prop: name, values });
+      }
+      return { props, variants };
+    }
+  } catch {}
+  return { props: [], variants: [] };
+}
+
+// ../studio/dist/discovery/components.js
+var COMPONENT_DIRS = ["components/", "src/components/", "ui/", "src/ui/", "app/components/"];
+function isComponentFile(file) {
+  const f = file.replace(/\\/g, "/");
+  return COMPONENT_DIRS.some((d) => f.includes(d)) || /\.(t|j)sx$/.test(f);
+}
+function escapeRe(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function bareForms(name) {
+  const base = name.replace(/^colors\.|^spacing\.|^rounded\./, "");
+  const forms = new Set([base]);
+  forms.add(base.replace(/^(color|colour|spacing|space|radius|rounded)-/, ""));
+  return [...forms].filter(Boolean);
+}
+function findTokenRefs(fileText, tokenNames) {
+  const refs = new Set;
+  const UTIL = "(?:bg|text|border|fill|stroke|ring|p|m|px|py|pt|pb|pl|pr|mx|my|gap|space|rounded|w|h)";
+  for (const name of tokenNames) {
+    for (const bare of bareForms(name)) {
+      if (!bare || /^\d+$/.test(bare) === false && bare.length < 2)
+        continue;
+      const e = escapeRe(bare);
+      const patterns = [
+        new RegExp(`var\\(--(?:color-|colour-|spacing-|space-|radius-|rounded-)?${e}\\b`),
+        new RegExp(`${UTIL}-${e}\\b`)
+      ];
+      if (patterns.some((re) => re.test(fileText))) {
+        refs.add(name);
+        break;
+      }
+    }
+  }
+  return [...refs].sort();
+}
+function discoverComponents(cwd, report) {
+  const tokenNames = [
+    ...report.colors.clusters.map((c) => `colors.${c.name}`),
+    ...report.spacing.values.map((v) => `spacing.${v}`)
+  ];
+  const driftByFile = new Map;
+  for (const d of report.drift) {
+    const list = driftByFile.get(d.file) ?? [];
+    list.push(d);
+    driftByFile.set(d.file, list);
+  }
+  const out = [];
+  for (const c of report.components) {
+    if (!isComponentFile(c.file))
+      continue;
+    const abs = join8(cwd, c.file);
+    let fileText = "";
+    try {
+      fileText = readFileSync13(abs, "utf8");
+    } catch {}
+    const { props, variants, description } = discoverProps(abs, c.name);
+    const tokenRefs = fileText ? findTokenRefs(fileText, tokenNames) : [];
+    const drift = driftByFile.get(c.file) ?? [];
+    const variantSets = [...variants];
+    if (c.variants?.length)
+      variantSets.push({ prop: "story", values: c.variants });
+    out.push({
+      name: c.name,
+      file: c.file,
+      description,
+      props,
+      variants: variantSets,
+      tokenRefs,
+      drift,
+      stories: c.variants
+    });
+  }
+  const seen = new Map;
+  for (const c of out)
+    if (!seen.has(c.name))
+      seen.set(c.name, c);
+  return [...seen.values()].sort((a, b) => a.name.localeCompare(b.name));
+}
+
+// ../studio/dist/model.js
+function buildStudioModel(cwd, options = {}) {
+  const report = scan(cwd, { now: options.now ?? null });
+  const components = discoverComponents(cwd, report);
+  return {
+    project: basename6(cwd) || "project",
+    generatedAt: options.now ?? null,
+    tokens: {
+      colors: report.colors.clusters.map((c) => ({
+        name: `colors.${c.name}`,
+        hex: c.hex,
+        count: c.count,
+        members: c.members
+      })),
+      spacing: report.spacing,
+      radius: report.radius.values,
+      typography: report.typography.map((t) => ({
+        name: t.name,
+        fontSize: t.fontSize,
+        fontFamily: t.fontFamily,
+        fontWeight: t.fontWeight
+      }))
+    },
+    components,
+    drift: report.drift,
+    detected: report.detected
+  };
+}
+// ../studio/dist/styles.js
+var STUDIO_STYLES = `
+:root{
+  --bg:#0a0b0d; --panel:#121419; --panel-2:#181b21; --border:#23272f;
+  --text:#e9ecf1; --text-2:#969db0; --text-3:#646b7a;
+  --accent:#6ea8fe; --good:#56d364; --warn:#e3b341; --bad:#f4716a;
+  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
+  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
+}
+*{box-sizing:border-box;margin:0;padding:0}
+html,body{height:100%}
+body{font-family:var(--sans);background:var(--bg);color:var(--text);display:flex;height:100vh;overflow:hidden}
+
+/* Sidebar */
+.sidebar{width:248px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);overflow-y:auto;padding:16px 0}
+.brand{padding:0 16px 14px;display:flex;align-items:baseline;gap:8px}
+.brand b{font-size:15px;font-weight:650}
+.brand span{font-size:11px;color:var(--text-3);font-family:var(--mono)}
+.filter{margin:0 12px 12px;width:calc(100% - 24px);background:var(--panel-2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;padding:7px 10px;font-family:var(--sans)}
+.filter::placeholder{color:var(--text-3)}
+.nav-group{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);padding:14px 16px 6px}
+.nav-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 16px;font-size:13px;color:var(--text-2);cursor:pointer;border-left:2px solid transparent}
+.nav-item:hover{background:var(--panel-2);color:var(--text)}
+.nav-item.active{background:var(--panel-2);color:var(--text);border-left-color:var(--accent)}
+.nav-item .tag{font-size:10px;font-family:var(--mono);color:var(--text-3)}
+.nav-item .tag.bad{color:var(--bad)}
+
+/* Main */
+.main{flex:1;overflow-y:auto;padding:32px 40px 80px}
+.main-head{margin-bottom:22px}
+.main-head h1{font-size:22px;font-weight:650;margin-bottom:3px}
+.main-head .sub{font-size:13px;color:var(--text-2)}
+.main-head .path{font-family:var(--mono);font-size:12px;color:var(--text-3)}
+h2.sec{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin:26px 0 12px}
+.empty{color:var(--text-3);font-size:14px;padding:14px 0}
+.muted{color:var(--text-3)}
+code{font-family:var(--mono);font-size:12px;background:var(--panel-2);padding:1px 5px;border-radius:5px}
+.badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:5px;background:var(--panel-2);color:var(--text-3)}
+.badge.good{background:rgba(86,211,100,.14);color:var(--good)}
+.badge.bad{background:rgba(244,113,106,.14);color:var(--bad)}
+.badge.warn{background:rgba(227,179,65,.14);color:var(--warn)}
+
+/* Swatches */
+.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
+.swatch{background:var(--panel);border:1px solid var(--border);border-radius:11px;overflow:hidden}
+.swatch .chip{height:78px;display:flex;align-items:flex-end;padding:8px}
+.swatch .chip .ratio{font-size:11px;font-family:var(--mono)}
+.swatch .meta{padding:9px 11px}
+.swatch .nm{font-family:var(--mono);font-size:12px;font-weight:600}
+.swatch .hx{font-family:var(--mono);font-size:12px;color:var(--text-2);text-transform:uppercase}
+.swatch .ct{font-size:11px;color:var(--text-3);margin-top:2px}
+
+/* Ruler */
+.ruler{display:flex;flex-direction:column;gap:6px}
+.ruler-row{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:12px}
+.ruler-row .lbl{font-family:var(--mono);font-size:12px;color:var(--text-2)}
+.ruler-row .track{background:var(--panel);border-radius:6px;height:18px;overflow:hidden}
+.ruler-row .bar{height:100%;background:var(--accent)}
+.ruler-row.off .bar{background:var(--warn)}
+
+/* Type list */
+.type-row{display:grid;grid-template-columns:90px 1fr;gap:16px;align-items:center;padding:10px 12px;background:var(--panel);border:1px solid var(--border);border-radius:10px;margin-bottom:6px}
+.type-row .prev{font-size:26px;line-height:1;text-align:center}
+.type-row .nm{font-family:var(--mono);font-size:13px;font-weight:600}
+.type-row .pp{font-size:12px;color:var(--text-2)}
+
+/* Component viewer */
+.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border)}
+.tab{font-size:13px;color:var(--text-2);padding:8px 12px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
+.tab:hover{color:var(--text)}
+.tab.active{color:var(--text);border-bottom-color:var(--accent)}
+.panel-box{background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:16px}
+table.props{width:100%;border-collapse:collapse;font-size:13px}
+table.props th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);padding:6px 10px;border-bottom:1px solid var(--border)}
+table.props td{padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:top}
+table.props td .req{color:var(--bad);font-size:11px}
+.chips{display:flex;flex-wrap:wrap;gap:6px}
+.chip-tok{font-family:var(--mono);font-size:12px;padding:3px 8px;border-radius:6px;background:rgba(86,211,100,.1);color:var(--good)}
+.chip-drift{font-family:var(--mono);font-size:12px;padding:3px 8px;border-radius:6px;background:rgba(244,113,106,.1);color:var(--bad)}
+.kv{display:flex;gap:8px;font-size:13px;padding:5px 0;border-bottom:1px solid var(--border)}
+.kv .k{width:160px;color:var(--text-3);font-family:var(--mono);font-size:12px}
+pre.code{background:var(--panel-2);border:1px solid var(--border);border-radius:9px;padding:12px;overflow:auto;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--text)}
+.drift-table{width:100%;border-collapse:collapse;font-size:13px}
+.drift-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);padding:6px 10px;border-bottom:1px solid var(--border)}
+.drift-table td{padding:7px 10px;border-bottom:1px solid var(--border)}
+.dot{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid var(--border);vertical-align:-1px;margin-right:6px}
+.suggest{color:var(--good);font-family:var(--mono);font-size:12px}
+.variant-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
+.vp{font-size:12px;padding:4px 10px;border-radius:7px;border:1px solid var(--border);color:var(--text-2);cursor:pointer;background:var(--panel)}
+.vp.active{border-color:var(--accent);color:var(--text)}
+`;
+
+// ../studio/dist/client.js
+var STUDIO_CLIENT = String.raw`
+(function(){
+  "use strict";
+  var M = window.MODEL;
+  var state = { view: "tokens:colors", componentTab: "preview", variant: null };
+
+  function el(tag, attrs, html){
+    var e = document.createElement(tag);
+    if (attrs) for (var k in attrs){ if(k==="class") e.className=attrs[k]; else e.setAttribute(k, attrs[k]); }
+    if (html != null) e.innerHTML = html;
+    return e;
+  }
+  function esc(s){ return String(s==null?"":s).replace(/[&<>"']/g, function(c){ return {"&":"&amp;","<":"&lt;",">":"&gt;","\"":"&quot;","'":"&#39;"}[c]; }); }
+  function rgb(hex){ hex=hex.replace("#",""); return {r:parseInt(hex.slice(0,2),16),g:parseInt(hex.slice(2,4),16),b:parseInt(hex.slice(4,6),16)}; }
+  function lin(c){ c/=255; return c<=0.04045?c/12.92:Math.pow((c+0.055)/1.055,2.4); }
+  function lum(hex){ var c=rgb(hex); return 0.2126*lin(c.r)+0.7152*lin(c.g)+0.0722*lin(c.b); }
+  function contrast(a,b){ var la=lum(a),lb=lum(b); var hi=Math.max(la,lb),lo=Math.min(la,lb); return (hi+0.05)/(lo+0.05); }
+  function readable(hex){ return contrast(hex,"#ffffff")>=contrast(hex,"#111111")?"#ffffff":"#111111"; }
+  function rating(r){ return r>=7?"AAA":r>=4.5?"AA":r>=3?"AA large":"Fail"; }
+
+  // ---- Sidebar ----
+  function buildSidebar(){
+    var sb = document.querySelector(".sidebar");
+    sb.innerHTML = "";
+    sb.appendChild(el("div",{class:"brand"},"<b>"+esc(M.project)+"</b><span>studio</span>"));
+    var filter = el("input",{class:"filter",placeholder:"Filter components…"});
+    filter.addEventListener("input", function(){ renderComponentNav(filter.value.toLowerCase()); });
+    sb.appendChild(filter);
+
+    sb.appendChild(el("div",{class:"nav-group"},"Tokens"));
+    [["tokens:colors","Colors", M.tokens.colors.length],
+     ["tokens:typography","Typography", M.tokens.typography.length],
+     ["tokens:spacing","Spacing", M.tokens.spacing.values.length]
+    ].forEach(function(it){ sb.appendChild(navItem(it[0],it[1],it[2])); });
+
+    sb.appendChild(el("div",{class:"nav-group"},"Components"));
+    var holder = el("div",{class:"comp-nav"});
+    sb.appendChild(holder);
+
+    sb.appendChild(el("div",{class:"nav-group"},"Report"));
+    var driftBad = M.drift.length>0;
+    var di = navItem("drift","Drift report", M.drift.length);
+    if (driftBad) di.querySelector(".tag").className = "tag bad";
+    sb.appendChild(di);
+
+    renderComponentNav("");
+  }
+  function navItem(view,label,count){
+    var it = el("div",{class:"nav-item"+(state.view===view?" active":"")});
+    it.innerHTML = "<span>"+esc(label)+"</span><span class='tag'>"+count+"</span>";
+    it.addEventListener("click", function(){ state.view=view; state.variant=null; render(); });
+    return it;
+  }
+  function renderComponentNav(q){
+    var holder = document.querySelector(".comp-nav"); if(!holder) return;
+    holder.innerHTML = "";
+    M.components.filter(function(c){ return c.name.toLowerCase().indexOf(q)>=0; }).forEach(function(c){
+      var view = "component:"+c.name;
+      var it = el("div",{class:"nav-item"+(state.view===view?" active":"")});
+      var tag = c.drift.length? "<span class='tag bad'>"+c.drift.length+"</span>" : "";
+      it.innerHTML = "<span>"+esc(c.name)+"</span>"+tag;
+      it.addEventListener("click", function(){ state.view=view; state.componentTab="preview"; state.variant=null; render(); });
+      holder.appendChild(it);
+    });
+    if (!M.components.length) holder.appendChild(el("div",{class:"nav-item muted"},"<span>none found</span>"));
+  }
+
+  // ---- Main ----
+  function head(title, sub, path){
+    var h = el("div",{class:"main-head"});
+    h.innerHTML = "<h1>"+esc(title)+"</h1>"+(sub?"<div class='sub'>"+sub+"</div>":"")+(path?"<div class='path'>"+esc(path)+"</div>":"");
+    return h;
+  }
+
+  function viewColors(main){
+    main.appendChild(head("Colors", M.tokens.colors.length+" tokens"));
+    if(!M.tokens.colors.length){ main.appendChild(el("div",{class:"empty"},"No colors found.")); return; }
+    var grid = el("div",{class:"swatch-grid"});
+    M.tokens.colors.forEach(function(c){
+      var t = readable(c.hex), r = contrast(c.hex,t);
+      var dup = c.members.length>1? "<div class='ct' style='color:var(--warn)'>+"+(c.members.length-1)+" near-dup</div>":"";
+      var s = el("div",{class:"swatch"});
+      s.innerHTML = "<div class='chip' style='background:"+esc(c.hex)+";color:"+t+"'><span class='ratio'>"+r.toFixed(1)+":1 "+rating(r)+"</span></div>"+
+        "<div class='meta'><div class='nm'>"+esc(c.name)+"</div><div class='hx'>"+esc(c.hex)+"</div><div class='ct'>"+c.count+" uses</div>"+dup+"</div>";
+      grid.appendChild(s);
+    });
+    main.appendChild(grid);
+  }
+  function viewTypography(main){
+    main.appendChild(head("Typography", M.tokens.typography.length+" tokens"));
+    if(!M.tokens.typography.length){ main.appendChild(el("div",{class:"empty"},"No typography tokens found.")); return; }
+    M.tokens.typography.forEach(function(t){
+      var row = el("div",{class:"type-row"});
+      var fs = t.fontSize && /^[0-9]/.test(t.fontSize) ? t.fontSize : "";
+      var prev = fs ? "<div class='prev' style='font-size:"+esc(fs)+";font-family:"+esc(t.fontFamily||"inherit")+"'>Ag</div>" : "<div class='prev muted'>Ag</div>";
+      row.innerHTML = prev+"<div><div class='nm'>"+esc(t.name)+"</div><div class='pp'>"+esc(t.fontSize||"—")+(t.fontFamily?" · "+esc(t.fontFamily):"")+(t.fontWeight?" · "+t.fontWeight:"")+"</div></div>";
+      main.appendChild(row);
+    });
+  }
+  function viewSpacing(main){
+    var sp = M.tokens.spacing;
+    main.appendChild(head("Spacing", sp.grid? sp.grid+"pt grid · "+sp.outliers.length+" off-grid":"no grid detected"));
+    if(!sp.values.length){ main.appendChild(el("div",{class:"empty"},"No spacing scale detected.")); return; }
+    var max = Math.max.apply(null, sp.values.concat([1]));
+    var ruler = el("div",{class:"ruler"});
+    sp.values.forEach(function(v){
+      var off = sp.outliers.indexOf(v)>=0;
+      var w = Math.max(2, Math.round(v/max*100));
+      var row = el("div",{class:"ruler-row"+(off?" off":"")});
+      row.innerHTML = "<div class='lbl'>"+v+"px"+(off?" <span class='badge warn'>off</span>":"")+"</div><div class='track'><div class='bar' style='width:"+w+"%'></div></div>";
+      ruler.appendChild(row);
+    });
+    main.appendChild(ruler);
+  }
+  function viewDrift(main){
+    main.appendChild(head("Drift report", M.drift.length+" hardcoded value"+(M.drift.length===1?"":"s")));
+    if(!M.drift.length){ main.appendChild(el("div",{class:"empty"},"✓ No drift. Everything references a token.")); return; }
+    var t = el("table",{class:"drift-table"});
+    t.innerHTML = "<thead><tr><th>Location</th><th>Value</th><th>Suggested token</th></tr></thead>";
+    var tb = el("tbody");
+    M.drift.forEach(function(d){
+      var chip = d.kind==="color"? "<span class='dot' style='background:"+esc(d.value)+"'></span>":"";
+      var sug = d.suggestion? "<span class='suggest'>"+esc(d.suggestion)+"</span>":"<span class='muted'>—</span>";
+      tb.appendChild(el("tr",null,"<td><code>"+esc(d.file)+"</code>:"+d.line+"</td><td>"+chip+"<code>"+esc(d.value)+"</code></td><td>"+sug+"</td>"));
+    });
+    t.appendChild(tb); main.appendChild(t);
+  }
+
+  function viewComponent(main, name){
+    var c = M.components.filter(function(x){return x.name===name;})[0];
+    if(!c){ main.appendChild(el("div",{class:"empty"},"Component not found.")); return; }
+    main.appendChild(head(c.name, c.description? esc(c.description) : (c.props.length+" props · "+c.tokenRefs.length+" tokens · "+c.drift.length+" drift"), c.file));
+
+    var tabs = el("div",{class:"tabs"});
+    [["preview","Preview"],["props","Props"],["tokens","Tokens"],["drift","Drift"],["spec","Spec"]].forEach(function(t){
+      var tab = el("div",{class:"tab"+(state.componentTab===t[0]?" active":"")}, t[1]);
+      tab.addEventListener("click", function(){ state.componentTab=t[0]; render(); });
+      tabs.appendChild(tab);
+    });
+    main.appendChild(tabs);
+
+    var box = el("div");
+    if (state.componentTab==="preview") renderPreview(box, c);
+    else if (state.componentTab==="props") renderProps(box, c);
+    else if (state.componentTab==="tokens") renderTokens(box, c);
+    else if (state.componentTab==="drift") renderCompDrift(box, c);
+    else if (state.componentTab==="spec") renderSpec(box, c);
+    main.appendChild(box);
+  }
+  function renderPreview(box, c){
+    if (c.variants.length){
+      var pills = el("div",{class:"variant-pills"});
+      c.variants.forEach(function(v){
+        v.values.forEach(function(val){
+          var key = v.prop+"="+val;
+          var p = el("div",{class:"vp"+(state.variant===key?" active":"")}, esc(v.prop)+": "+esc(val));
+          p.addEventListener("click", function(){ state.variant = state.variant===key?null:key; render(); });
+          pills.appendChild(p);
+        });
+      });
+      box.appendChild(pills);
+    }
+    var note = "Live component rendering needs a bundler (v2). For now Studio shows the API, token usage, drift, and an auto-spec.";
+    var ex = el("div",{class:"panel-box"});
+    var usage = "<"+c.name+(state.variant? " "+esc(state.variant.replace("=", "=\""))+"\"" : "")+" />";
+    ex.innerHTML = "<div class='muted' style='font-size:12px;margin-bottom:10px'>"+note+"</div><pre class='code'>"+esc(usage)+"</pre>";
+    box.appendChild(ex);
+  }
+  function renderProps(box, c){
+    if(!c.props.length){ box.appendChild(el("div",{class:"empty"},"No typed props found.")); return; }
+    var t = el("table",{class:"props"});
+    t.innerHTML="<thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Notes</th></tr></thead>";
+    var tb=el("tbody");
+    c.props.forEach(function(p){
+      tb.appendChild(el("tr",null,"<td><code>"+esc(p.name)+"</code></td><td><code>"+esc(p.type)+"</code></td><td>"+(p.required?"<span class='req'>required</span>":"<span class='muted'>optional</span>")+"</td><td class='muted'>"+(p.description?esc(p.description):"")+"</td>"));
+    });
+    t.appendChild(tb);
+    var wrap = el("div",{class:"panel-box"}); wrap.appendChild(t); box.appendChild(wrap);
+  }
+  function renderTokens(box, c){
+    var wrap = el("div",{class:"panel-box"});
+    wrap.appendChild(el("h2",{class:"sec"},"Using correctly ("+c.tokenRefs.length+")"));
+    if(c.tokenRefs.length){ var ch=el("div",{class:"chips"}); c.tokenRefs.forEach(function(t){ ch.appendChild(el("span",{class:"chip-tok"},esc(t))); }); wrap.appendChild(ch); }
+    else wrap.appendChild(el("div",{class:"empty"},"No token references detected."));
+    wrap.appendChild(el("h2",{class:"sec"},"Hardcoded / drift ("+c.drift.length+")"));
+    if(c.drift.length){ var cd=el("div",{class:"chips"}); c.drift.forEach(function(d){ cd.appendChild(el("span",{class:"chip-drift"},esc(d.value)+(d.suggestion?" → "+esc(d.suggestion):""))); }); wrap.appendChild(cd); }
+    else wrap.appendChild(el("div",{class:"empty good muted"},"✓ no drift in this component"));
+    box.appendChild(wrap);
+  }
+  function renderCompDrift(box, c){
+    if(!c.drift.length){ box.appendChild(el("div",{class:"empty"},"✓ No hardcoded values in this component.")); return; }
+    var t=el("table",{class:"drift-table"});
+    t.innerHTML="<thead><tr><th>Value</th><th>Line</th><th>Fix</th></tr></thead>";
+    var tb=el("tbody");
+    c.drift.forEach(function(d){
+      var chip=d.kind==="color"?"<span class='dot' style='background:"+esc(d.value)+"'></span>":"";
+      tb.appendChild(el("tr",null,"<td>"+chip+"<code>"+esc(d.value)+"</code></td><td class='muted'>"+esc(c.file)+":"+d.line+"</td><td>"+(d.suggestion?"<span class='suggest'>"+esc(d.suggestion)+"</span>":"<span class='muted'>add a token</span>")+"</td>"));
+    });
+    t.appendChild(tb); var w=el("div",{class:"panel-box"}); w.appendChild(t); box.appendChild(w);
+  }
+  function renderSpec(box, c){
+    var w=el("div",{class:"panel-box"});
+    var rows="";
+    function kv(k,v){ return "<div class='kv'><div class='k'>"+esc(k)+"</div><div>"+v+"</div></div>"; }
+    rows+=kv("Component","<code>"+esc(c.name)+"</code>");
+    rows+=kv("Source","<code>"+esc(c.file)+"</code>");
+    rows+=kv("Props", c.props.length? c.props.map(function(p){return "<code>"+esc(p.name)+"</code>";}).join(" ") : "<span class='muted'>none</span>");
+    c.variants.forEach(function(v){ rows+=kv("Variant: "+v.prop, v.values.map(function(x){return "<code>"+esc(x)+"</code>";}).join(" ")); });
+    rows+=kv("Tokens used", c.tokenRefs.length? c.tokenRefs.map(function(t){return "<span class='suggest'>"+esc(t)+"</span>";}).join(" ") : "<span class='muted'>none detected</span>");
+    rows+=kv("Drift", c.drift.length? "<span class='badge bad'>"+c.drift.length+"</span>" : "<span class='badge good'>clean</span>");
+    w.innerHTML=rows; box.appendChild(w);
+  }
+
+  function render(){
+    buildSidebar();
+    var main = document.querySelector(".main"); main.innerHTML="";
+    var v = state.view;
+    if (v==="tokens:colors") viewColors(main);
+    else if (v==="tokens:typography") viewTypography(main);
+    else if (v==="tokens:spacing") viewSpacing(main);
+    else if (v==="drift") viewDrift(main);
+    else if (v.indexOf("component:")===0) viewComponent(main, v.slice("component:".length));
+    else viewColors(main);
+  }
+
+  // Live reload via SSE (watch mode only — endpoint may not exist).
+  try {
+    var es = new EventSource("/events");
+    es.onmessage = function(){ location.reload(); };
+    es.onerror = function(){ es.close(); };
+  } catch(e){}
+
+  render();
+})();
+`;
+
+// ../studio/dist/renderer.js
+function renderStudio(model) {
+  const json = JSON.stringify(model).replace(/</g, "\\u003c");
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(model.project)} — DesignAgent Studio</title>
+<style>${STUDIO_STYLES}</style>
+</head>
+<body>
+<aside class="sidebar"></aside>
+<main class="main"></main>
+<script>window.MODEL=${json};</script>
+<script>${STUDIO_CLIENT}</script>
+</body>
+</html>
+`;
+}
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+// ../studio/dist/server.js
+import { createServer } from "node:http";
+import { watch as watch2 } from "node:fs";
+var DEFAULT_PORT = 4321;
+function startStudioServer(cwd, options = {}) {
+  const port = options.port ?? DEFAULT_PORT;
+  const clients = new Set;
+  const server = createServer((req, res) => {
+    if (req.url === "/events") {
+      res.writeHead(200, {
+        "content-type": "text/event-stream",
+        "cache-control": "no-cache",
+        connection: "keep-alive"
+      });
+      res.write(`: connected
+
+`);
+      clients.add(res);
+      req.on("close", () => clients.delete(res));
+      return;
+    }
+    const html = renderStudio(buildStudioModel(cwd));
+    res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+    res.end(html);
+  });
+  if (options.watch) {
+    let timer = null;
+    try {
+      watch2(cwd, { recursive: true }, (_e, filename) => {
+        if (!filename)
+          return;
+        const f = filename.toString();
+        if (f.includes(".designagent") || f.includes("node_modules") || f.includes("designagent-studio"))
+          return;
+        if (timer)
+          clearTimeout(timer);
+        timer = setTimeout(() => {
+          for (const c of clients)
+            c.write(`data: reload
+
+`);
+        }, 150);
+      });
+    } catch {}
+  }
+  return new Promise((resolve3) => {
+    server.listen(port, () => {
+      resolve3({
+        server,
+        port,
+        url: `http://localhost:${port}`,
+        close: () => {
+          for (const c of clients)
+            c.end();
+          server.close();
+        }
+      });
+    });
+  });
+}
+// src/commands/studio.ts
+function openInBrowser2(target) {
+  const os = platform2();
+  const cmd = os === "darwin" ? "open" : os === "win32" ? "start" : "xdg-open";
+  try {
+    const child = spawn2(cmd, [target], { stdio: "ignore", detached: true, shell: os === "win32" });
+    child.on("error", () => {});
+    child.unref();
+  } catch {}
+}
+async function studio(cwd, options = {}) {
+  if (options.exportStatic) {
+    const model2 = buildStudioModel(cwd);
+    const dir = join9(cwd, "designagent-studio");
+    mkdirSync4(dir, { recursive: true });
+    const out = join9(dir, "index.html");
+    writeFileSync3(out, renderStudio(model2), "utf8");
+    console.log(pc3.green("✓ ") + `Studio exported to ${pc3.bold(out)}
+` + pc3.dim(`  ${model2.components.length} components · ${model2.tokens.colors.length} color tokens · ${model2.drift.length} drift`));
+    return;
+  }
+  const { url, close } = await startStudioServer(cwd, {
+    port: options.port,
+    watch: options.watch
+  });
+  const model = buildStudioModel(cwd);
+  console.log(pc3.green("◆ ") + pc3.bold("DesignAgent Studio") + ` running at ${pc3.cyan(url)}
+` + pc3.dim(`  ${model.components.length} components · ${model.tokens.colors.length} color tokens · ${model.drift.length} drift`) + (options.watch ? pc3.dim(`
+  watching for changes — Ctrl-C to stop`) : pc3.dim(`
+  Ctrl-C to stop`)));
+  if (!options.noOpen)
+    openInBrowser2(url);
+  const shutdown = () => {
+    close();
+    process.exit(0);
+  };
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
+}
+
+// src/index.ts
+var require2 = createRequire(import.meta.url);
+var { version } = require2("../package.json");
+var HELP = `
+${pc4.bold("designagent")} ${pc4.dim(`v${version}`)} — the design brain Claude Code needs.
+
+${pc4.bold("Usage")}
+  npx designagent <command>
+
+${pc4.bold("Commands")}
+  init        Set up DESIGN.md, CLAUDE.md, and DECISIONS.md in this project
+  docs        Scan the codebase and open the visual design-system docs
+              ${pc4.dim("--export static HTML · --watch live-reload · --no-open")}
+  studio      Launch DesignAgent Studio — the AI-native Storybook alternative
+              ${pc4.dim("--export static HTML · --watch live-reload · --no-open · --port")}
+  update      Refresh an existing setup ${pc4.dim("(coming soon)")}
+  help        Show this help
+  version     Print the version
+
+${pc4.dim("Docs: https://designagent.dev")}
+`;
+async function main() {
+  const command = process.argv[2] ?? "init";
+  switch (command) {
+    case "init":
+      await init();
+      break;
+    case "docs": {
+      const args = process.argv.slice(3);
+      docs(process.cwd(), {
+        exportStatic: args.includes("--export"),
+        noOpen: args.includes("--no-open"),
+        watch: args.includes("--watch")
+      });
+      break;
+    }
+    case "studio": {
+      const args = process.argv.slice(3);
+      const portArg = args.find((a) => a.startsWith("--port="));
+      await studio(process.cwd(), {
+        exportStatic: args.includes("--export"),
+        watch: args.includes("--watch"),
+        noOpen: args.includes("--no-open"),
+        port: portArg ? Number(portArg.split("=")[1]) : undefined
+      });
+      break;
+    }
+    case "update":
+      console.log(pc4.yellow("`designagent update` is coming in a future release.") + `
+` + pc4.dim("For now, re-run ") + pc4.bold("npx designagent init") + pc4.dim(" (it will ask before overwriting your files)."));
+      break;
+    case "version":
+    case "--version":
+    case "-v":
+      console.log(version);
+      break;
+    case "help":
+    case "--help":
+    case "-h":
+      console.log(HELP);
+      break;
+    default:
+      console.error(pc4.red(`Unknown command: ${command}`));
+      console.log(HELP);
+      process.exit(1);
+  }
+}
+main().catch((err) => {
+  console.error(pc4.red("designagent failed:"), err instanceof Error ? err.message : err);
+  process.exit(1);
+});