designagent-cli 0.1.0 → 0.2.0

package/dist/index.js

@@ -2,7 +2,7 @@
 
 // src/index.ts
 import { createRequire } from "node:module";
-import pc4 from "picocolors";
+import pc3 from "picocolors";
 
 // src/commands/init.ts
 import { basename as basename5 } from "node:path";
@@ -438,15 +438,43 @@ function fontSizeToPx(value) {
 // ../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 isComponentName(name) {
+  return /^[A-Z][A-Za-z0-9]*$/.test(name) && /[a-z]/.test(name);
+}
+var INLINE_EXPORT_RE = /export\s+(?:default\s+)?(?:async\s+)?(?:function|const|class)\s+([A-Z]\w*)/g;
+var EXPORT_BLOCK_RE = /export\s*\{([^}]*)\}(?!\s*from\b)/g;
+var DEFAULT_IDENT_RE = /export\s+default\s+([A-Z]\w*)\s*;?/g;
+function componentNames(text, file) {
+  const names = new Set;
+  let m;
+  INLINE_EXPORT_RE.lastIndex = 0;
+  while ((m = INLINE_EXPORT_RE.exec(text)) !== null) {
+    if (isComponentName(m[1]))
+      names.add(m[1]);
+  }
+  EXPORT_BLOCK_RE.lastIndex = 0;
+  while ((m = EXPORT_BLOCK_RE.exec(text)) !== null) {
+    for (const part of m[1].split(",")) {
+      const seg = part.trim();
+      if (!seg || seg.startsWith("type "))
+        continue;
+      const asMatch = seg.match(/\bas\s+(\w+)/);
+      const exported = asMatch ? asMatch[1] : seg;
+      if (isComponentName(exported))
+        names.add(exported);
+    }
+  }
+  DEFAULT_IDENT_RE.lastIndex = 0;
+  while ((m = DEFAULT_IDENT_RE.exec(text)) !== null) {
+    if (isComponentName(m[1]))
+      names.add(m[1]);
+  }
+  if (names.size === 0) {
+    const base = basename(file).replace(/\.(tsx|jsx)$/, "");
+    if (isComponentName(base))
+      names.add(base);
+  }
+  return [...names];
 }
 function lineOfIndex2(text, index) {
   let line = 1;
@@ -485,9 +513,9 @@ function readJsxTsx(root) {
       continue;
     }
     const rel = relative3(root, file);
-    const name = componentName(text, file);
-    if (name)
+    for (const name of componentNames(text, file)) {
       components.push({ name, file: rel });
+    }
     let t;
     TEXT_SIZE_RE.lastIndex = 0;
     while ((t = TEXT_SIZE_RE.exec(text)) !== null) {
@@ -581,9 +609,16 @@ var DESIGN_SYSTEMS = [
   { dep: "@chakra-ui/react", name: "chakra" },
   { dep: "antd", name: "antd" }
 ];
+var FRAMEWORKS = [
+  { dep: "react-native", name: "react-native" },
+  { dep: "vue", name: "vue" },
+  { dep: "svelte", name: "svelte" },
+  { dep: "react", name: "react" }
+];
 function detectStack(root) {
   let designSystem = null;
   let tailwind = false;
+  const frameworks = [];
   const pkgPath = join3(root, "package.json");
   if (existsSync2(pkgPath)) {
     try {
@@ -600,6 +635,13 @@ function detectStack(root) {
       if (designSystem === "tailwind" && (("class-variance-authority" in deps) || ("cmdk" in deps))) {
         designSystem = "shadcn";
       }
+      const hasRN = "react-native" in deps;
+      for (const { dep, name } of FRAMEWORKS) {
+        if (name === "react" && hasRN)
+          continue;
+        if (dep in deps)
+          frameworks.push(name);
+      }
     } catch {}
   }
   let canvas = null;
@@ -614,7 +656,7 @@ function detectStack(root) {
         canvas = "pencil";
     } catch {}
   }
-  return { tailwind, designSystem, canvas };
+  return { tailwind, designSystem, canvas, frameworks };
 }
 
 // ../scanner/dist/readers/theme.js
@@ -956,8 +998,143 @@ function readTokensJson(root) {
   return { found, colors, dimensions, typography };
 }
 
+// ../scanner/dist/readers/design-md.js
+import { existsSync as existsSync3, readFileSync as readFileSync11, readdirSync as readdirSync2 } from "node:fs";
+import { join as join4 } from "node:path";
+var EMPTY = { found: false, colors: [], dimensions: [], typography: [] };
+function unquote(v) {
+  const t = v.trim();
+  if (t.startsWith('"') && t.endsWith('"') || t.startsWith("'") && t.endsWith("'")) {
+    return t.slice(1, -1);
+  }
+  return t;
+}
+function indentOf(line) {
+  let n = 0;
+  while (n < line.length && line[n] === " ")
+    n++;
+  return n;
+}
+function findDesignMd(root) {
+  for (const name of ["DESIGN.md", "design.md", "Design.md"]) {
+    const p = join4(root, name);
+    if (existsSync3(p))
+      return p;
+  }
+  try {
+    const hit = readdirSync2(root).find((f) => f.toLowerCase() === "design.md");
+    if (hit)
+      return join4(root, hit);
+  } catch {}
+  return null;
+}
+function readDesignMd(root) {
+  const file = findDesignMd(root);
+  if (!file)
+    return EMPTY;
+  let text;
+  try {
+    text = readFileSync11(file, "utf8");
+  } catch {
+    return EMPTY;
+  }
+  const fm = text.match(/^---\n([\s\S]*?)\n---/);
+  if (!fm)
+    return EMPTY;
+  const lines = fm[1].split(`
+`);
+  const rel = "DESIGN.md";
+  const colors = [];
+  const dimensions = [];
+  const typography = [];
+  let section = "";
+  let typeName = null;
+  let typeAcc = {};
+  const flushType = () => {
+    if (typeName && (typeAcc.fontSize || typeAcc.fontFamily || typeAcc.fontWeight)) {
+      typography.push({ name: typeName, ...typeAcc, origin: "design-md", source: { file: rel, line: 0 } });
+    }
+    typeName = null;
+    typeAcc = {};
+  };
+  lines.forEach((raw, i) => {
+    if (!raw.trim() || raw.trim().startsWith("#"))
+      return;
+    const indent = indentOf(raw);
+    const line = raw.trim();
+    const colon = line.indexOf(":");
+    if (colon === -1)
+      return;
+    const key = line.slice(0, colon).trim();
+    const value = line.slice(colon + 1).trim();
+    if (indent === 0) {
+      flushType();
+      if (["colors", "typography", "spacing", "rounded", "components"].includes(key)) {
+        section = key;
+      } else {
+        section = "other";
+      }
+      return;
+    }
+    if (section === "colors" && indent >= 2 && value) {
+      const hex = normalizeHex(unquote(value));
+      if (hex)
+        colors.push({ hex, name: key, origin: "design-md", source: { file: rel, line: i } });
+      return;
+    }
+    if ((section === "spacing" || section === "rounded") && indent >= 2 && value) {
+      const dim = toPx3(unquote(value));
+      if (dim && dim.px >= 0) {
+        dimensions.push({
+          px: dim.px,
+          raw: dim.raw,
+          name: key,
+          origin: "design-md",
+          category: section === "rounded" ? "radius" : "spacing",
+          source: { file: rel, line: i }
+        });
+      }
+      return;
+    }
+    if (section === "typography") {
+      if (indent === 2 && !value) {
+        flushType();
+        typeName = key;
+        return;
+      }
+      if (indent >= 4 && typeName && value) {
+        const v = unquote(value);
+        if (key === "fontFamily")
+          typeAcc.fontFamily = v;
+        else if (key === "fontSize")
+          typeAcc.fontSize = v;
+        else if (key === "fontWeight")
+          typeAcc.fontWeight = Number(v) || undefined;
+        else if (key === "lineHeight")
+          typeAcc.lineHeight = /^[\d.]+$/.test(v) ? Number(v) : v;
+      }
+      return;
+    }
+  });
+  flushType();
+  const found = colors.length > 0 || dimensions.length > 0 || typography.length > 0;
+  return { found, colors, dimensions, typography };
+}
+
 // ../scanner/dist/analyzers/colors.js
 var DUPLICATE_THRESHOLD = 5;
+var SAME_PIXEL_THRESHOLD = 1.5;
+function topName(names) {
+  let best = "";
+  let n = 0;
+  for (const [k, v] of names) {
+    if (v > n) {
+      best = k;
+      n = v;
+    }
+  }
+  return best;
+}
 function analyzeColors(raw) {
   const exact = new Map;
   for (const c of raw) {
@@ -971,7 +1148,17 @@ function analyzeColors(raw) {
   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);
+    const inName = topName(names);
+    const hit = buckets.find((b) => {
+      const d = deltaE(b.lab, lab);
+      if (d >= DUPLICATE_THRESHOLD)
+        return false;
+      const bName = topName(b.names);
+      const namedDifferently = inName && bName && inName !== bName;
+      if (namedDifferently && d >= SAME_PIXEL_THRESHOLD)
+        return false;
+      return true;
+    });
     if (hit) {
       hit.count += count;
       hit.members.set(hex, count);
@@ -1022,7 +1209,7 @@ function nameCluster(b, index) {
 }
 
 // ../scanner/dist/analyzers/spacing.js
-var DEFINITION_ORIGINS = new Set(["tailwind", "css-var", "scss", "tokens", "theme"]);
+var DEFINITION_ORIGINS = new Set(["tailwind", "css-var", "scss", "tokens", "theme", "design-md"]);
 function isDefinition(d) {
   return DEFINITION_ORIGINS.has(d.origin);
 }
@@ -1116,7 +1303,7 @@ function analyzeDrift(colors, dimensions, clusters, grid) {
 }
 
 // ../scanner/dist/analyzers/typography.js
-var DEFINITION_ORIGINS2 = new Set(["tailwind", "css-var", "scss", "tokens", "theme"]);
+var DEFINITION_ORIGINS2 = new Set(["tailwind", "css-var", "scss", "tokens", "theme", "design-md"]);
 function isDefinition2(t) {
   return t.origin !== undefined && DEFINITION_ORIGINS2.has(t.origin);
 }
@@ -1379,8 +1566,10 @@ function scan(root, options = {}) {
   const tokens = readTokensJson(root);
   const jsx = readJsxTsx(root);
   const stories = readStorybook(root);
+  const designMd = readDesignMd(root);
   const detected = detectStack(root);
   const colors = [
+    ...designMd.colors,
     ...tailwind.colors,
     ...css.colors,
     ...scss.colors,
@@ -1391,6 +1580,7 @@ function scan(root, options = {}) {
     ...jsx.colors
   ];
   const dimensions = [
+    ...designMd.dimensions,
     ...tailwind.dimensions,
     ...css.dimensions,
     ...scss.dimensions,
@@ -1399,6 +1589,7 @@ function scan(root, options = {}) {
     ...jsx.dimensions
   ];
   const rawTypography = [
+    ...designMd.typography,
     ...tailwind.typography,
     ...css.typography,
     ...scss.typography,
@@ -1439,13 +1630,13 @@ function scan(root, options = {}) {
 // src/scaffold.ts
 import {
   copyFileSync,
-  existsSync as existsSync5,
+  existsSync as existsSync6,
   mkdirSync as mkdirSync2,
-  readFileSync as readFileSync12,
+  readFileSync as readFileSync13,
   renameSync,
   writeFileSync
 } from "node:fs";
-import { join as join6 } from "node:path";
+import { join as join7 } from "node:path";
 
 // src/types.ts
 var FRAMEWORK_LABELS = {
@@ -1470,21 +1661,21 @@ var CANVAS_LABELS = {
 };
 
 // src/templates.ts
-import { readFileSync as readFileSync11, existsSync as existsSync3 } from "node:fs";
-import { dirname, join as join4, resolve } from "node:path";
+import { readFileSync as readFileSync12, existsSync as existsSync4 } from "node:fs";
+import { dirname, join as join5, 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")];
+  const candidates = [join5(here, "templates"), resolve(here, "..", "templates")];
   for (const dir of candidates) {
-    if (existsSync3(dir))
+    if (existsSync4(dir))
       return dir;
   }
   return candidates[0];
 }
 var TEMPLATES_DIR = resolveTemplatesDir();
 function readTemplate(relativePath) {
-  return readFileSync11(join4(TEMPLATES_DIR, relativePath), "utf8");
+  return readFileSync12(join5(TEMPLATES_DIR, relativePath), "utf8");
 }
 function fill(template, vars) {
   return template.replace(/\{\{(\w+)\}\}/g, (match, key) => (key in vars) ? vars[key] : match);
@@ -1636,20 +1827,20 @@ function lintDesignMd(filePath) {
 }
 
 // src/skills.ts
-import { cpSync, existsSync as existsSync4, mkdirSync, readdirSync as readdirSync2 } from "node:fs";
+import { cpSync, existsSync as existsSync5, mkdirSync, readdirSync as readdirSync3 } from "node:fs";
 import { homedir } from "node:os";
-import { dirname as dirname2, join as join5, resolve as resolve2 } from "node:path";
+import { dirname as dirname2, join as join6, 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"),
+    join6(here2, "skills"),
     resolve2(here2, "..", "..", "skills")
   ];
-  return candidates.find((dir) => existsSync4(dir)) ?? null;
+  return candidates.find((dir) => existsSync5(dir)) ?? null;
 }
 function skillsInstallDir() {
-  return join5(homedir(), ".designagent", "skills");
+  return join6(homedir(), ".designagent", "skills");
 }
 function installSkills() {
   const src = resolveSkillsDir();
@@ -1658,10 +1849,10 @@ function installSkills() {
   const dest = skillsInstallDir();
   mkdirSync(dest, { recursive: true });
   const installed = [];
-  for (const entry of readdirSync2(src, { withFileTypes: true })) {
+  for (const entry of readdirSync3(src, { withFileTypes: true })) {
     if (!entry.isDirectory())
       continue;
-    cpSync(join5(src, entry.name), join5(dest, entry.name), { recursive: true });
+    cpSync(join6(src, entry.name), join6(dest, entry.name), { recursive: true });
     installed.push(entry.name);
   }
   return installed.sort();
@@ -1678,22 +1869,22 @@ function scaffold(config, cwd, optsOrToday) {
   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 designMdPath = join7(cwd, "DESIGN.md");
+  const claudeMdPath = join7(cwd, "CLAUDE.md");
+  const decisionsMdPath = join7(cwd, "DECISIONS.md");
+  const mcpPath = join7(cwd, ".mcp.json");
   const backedUp = [];
   let claudeAugmented = false;
   if (mode === "fresh") {
-    const backupDir = join6(cwd, ".designagent", "backup", today);
+    const backupDir = join7(cwd, ".designagent", "backup", today);
     for (const [path, name] of [
       [designMdPath, "DESIGN.md"],
       [claudeMdPath, "CLAUDE.md"],
       [decisionsMdPath, "DECISIONS.md"]
     ]) {
-      if (existsSync5(path)) {
+      if (existsSync6(path)) {
         mkdirSync2(backupDir, { recursive: true });
-        copyFileSync(path, join6(backupDir, name));
+        copyFileSync(path, join7(backupDir, name));
         backedUp.push(name);
       }
     }
@@ -1701,14 +1892,14 @@ function scaffold(config, cwd, optsOrToday) {
     writeFileSync(claudeMdPath, claudeMd, "utf8");
     writeFileSync(decisionsMdPath, decisionsMd, "utf8");
   } else {
-    if (!existsSync5(designMdPath))
+    if (!existsSync6(designMdPath))
       writeFileSync(designMdPath, designMd, "utf8");
-    if (!existsSync5(decisionsMdPath))
+    if (!existsSync6(decisionsMdPath))
       writeFileSync(decisionsMdPath, decisionsMd, "utf8");
-    if (!existsSync5(claudeMdPath)) {
+    if (!existsSync6(claudeMdPath)) {
       writeFileSync(claudeMdPath, claudeMd, "utf8");
     } else {
-      const current = readFileSync12(claudeMdPath, "utf8");
+      const current = readFileSync13(claudeMdPath, "utf8");
       if (!current.includes(AUGMENT_MARKER)) {
         const block = `
 
@@ -1723,15 +1914,15 @@ ${claudeMd}
   }
   let mcpWritten = false;
   if (mcpConfig) {
-    const shouldWrite = mode === "fresh" || !existsSync5(mcpPath);
+    const shouldWrite = mode === "fresh" || !existsSync6(mcpPath);
     if (shouldWrite) {
       writeFileSync(mcpPath, mcpConfig, "utf8");
       mcpWritten = true;
     }
   }
-  const configDir = join6(cwd, ".designagent");
+  const configDir = join7(cwd, ".designagent");
   mkdirSync2(configDir, { recursive: true });
-  writeFileSync(join6(configDir, "config.json"), JSON.stringify(config, null, 2) + `
+  writeFileSync(join7(configDir, "config.json"), JSON.stringify(config, null, 2) + `
 `, "utf8");
   const lint = lintDesignMd(designMdPath);
   const installedSkills = installSkills();
@@ -1745,20 +1936,21 @@ ${claudeMd}
   };
 }
 function migrateLowercaseDesignMd(cwd) {
-  const lower = join6(cwd, "design.md");
-  if (!existsSync5(lower))
+  const lower = join7(cwd, "design.md");
+  if (!existsSync6(lower))
     return null;
-  const bak = join6(cwd, ".design.md.bak");
+  const bak = join7(cwd, ".design.md.bak");
   renameSync(lower, bak);
   return bak;
 }
 
 // src/detect.ts
-import { readdirSync as readdirSync3 } from "node:fs";
+import { existsSync as existsSync7, readdirSync as readdirSync4 } from "node:fs";
+import { join as join8 } from "node:path";
 function detectExisting(cwd) {
   let entries = [];
   try {
-    entries = readdirSync3(cwd, { withFileTypes: true }).filter((e) => e.isFile()).map((e) => e.name);
+    entries = readdirSync4(cwd, { withFileTypes: true }).filter((e) => e.isFile()).map((e) => e.name);
   } catch {}
   const names = new Set(entries);
   const claudeMd = names.has("CLAUDE.md");
@@ -1776,6 +1968,17 @@ function detectExisting(cwd) {
     migratable: designMdLower
   };
 }
+var SOURCE_DIRS = ["src", "app", "components", "lib", "pages", "styles"];
+var SOURCE_EXTS = [".tsx", ".jsx", ".ts", ".vue", ".svelte", ".swift", ".kt", ".css", ".scss"];
+function looksLikeExistingCodebase(cwd) {
+  if (SOURCE_DIRS.some((d) => existsSync7(join8(cwd, d))))
+    return true;
+  try {
+    return readdirSync4(cwd).some((f) => SOURCE_EXTS.some((e) => f.endsWith(e)));
+  } catch {
+    return false;
+  }
+}
 
 // src/commands/init.ts
 function bail() {
@@ -1801,6 +2004,32 @@ function mapDetectedCanvas(detected) {
     return detected;
   return "none";
 }
+var FRAMEWORK_VALUES = [
+  "react",
+  "vue",
+  "svelte",
+  "react-native",
+  "swiftui",
+  "compose"
+];
+function mapDetectedFrameworks(detected) {
+  const valid = detected.filter((f) => FRAMEWORK_VALUES.includes(f));
+  return valid.length > 0 ? valid : ["react"];
+}
+var FRAMEWORK_LABELS2 = {
+  react: "React",
+  vue: "Vue",
+  svelte: "Svelte",
+  "react-native": "React Native",
+  swiftui: "SwiftUI",
+  compose: "Jetpack Compose",
+  none: "none"
+};
+var DESIGN_SYSTEM_LABELS2 = {
+  tailwind: "Tailwind",
+  shadcn: "shadcn/ui",
+  custom: "Custom"
+};
 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}`;
@@ -1821,7 +2050,7 @@ function scanSummary(report) {
 }
 async function init() {
   console.log("");
-  intro(pc.bold(pc.cyan("Design Agent")) + pc.dim(" — reading your codebase"));
+  intro(pc.bold(pc.cyan("Design Agent")) + pc.dim(" — design intelligence for Claude Code"));
   const cwd = process.cwd();
   const existing = detectExisting(cwd);
   let mode = "fresh";
@@ -1868,67 +2097,132 @@ async function init() {
       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)",
+  let projectType = "existing";
+  if (!existing.hasAny) {
+    const choice = await select({
+      message: "Is this a new project or an existing codebase?",
       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" }
+        {
+          value: "existing",
+          label: "Existing codebase",
+          hint: "scan it and reverse-engineer your design system"
+        },
+        {
+          value: "new",
+          label: "New / greenfield",
+          hint: "skip the scan, start from a clean DESIGN.md"
+        }
       ],
-      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
-  };
+      initialValue: looksLikeExistingCodebase(cwd) ? "existing" : "new"
+    });
+    if (isCancel(choice))
+      bail();
+    projectType = choice;
+  }
+  let report = null;
+  if (projectType === "existing") {
+    const scanSpin = spinner();
+    scanSpin.start("Scanning your codebase");
+    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 detectedFrameworks = mapDetectedFrameworks(report?.detected.frameworks ?? []);
+  const detectedDesignSystem = mapDetectedDesignSystem(report?.detected.designSystem ?? null);
+  const detectedCanvas = mapDetectedCanvas(report?.detected.canvas ?? null);
+  const canFastPath = report !== null && report.detected.frameworks.length > 0 && report.detected.designSystem !== null;
+  let config = null;
+  if (canFastPath) {
+    const stackSummary = [
+      detectedFrameworks.map((f) => FRAMEWORK_LABELS2[f]).join(", "),
+      DESIGN_SYSTEM_LABELS2[detectedDesignSystem],
+      detectedCanvas === "none" ? null : `${detectedCanvas} canvas`
+    ].filter(Boolean).join(" · ");
+    const useDetected = await confirm({
+      message: `Use the detected setup? ${pc.dim(stackSummary)}`,
+      initialValue: true
+    });
+    if (isCancel(useDetected))
+      bail();
+    if (useDetected) {
+      let figmaUrl = null;
+      if (detectedCanvas === "figma") {
+        const url = await text({
+          message: "Paste your Figma file URL",
+          placeholder: "https://figma.com/design/…",
+          validate: validateFigmaUrl
+        });
+        if (isCancel(url))
+          bail();
+        figmaUrl = url;
+      }
+      config = {
+        projectName: basename5(cwd),
+        canvas: detectedCanvas,
+        figmaUrl,
+        designSystem: detectedDesignSystem,
+        frameworks: detectedFrameworks
+      };
+    }
+  }
+  if (!config) {
+    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: detectedCanvas
+      }),
+      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: detectedDesignSystem
+      }),
+      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: detectedFrameworks,
+        required: true
+      }),
+      projectName: () => text({
+        message: "Project name?",
+        placeholder: basename5(cwd),
+        defaultValue: basename5(cwd)
+      })
+    }, { onCancel: bail });
+    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;
+  const scanHasTokens = report !== null && report.colors.clusters.length > 0;
   let designMdOverride;
-  if (willWriteDesignMd && scanHasTokens) {
+  if (willWriteDesignMd && report && 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
@@ -1964,7 +2258,7 @@ async function init() {
   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."));
+  outro(projectType === "new" ? pc.bold("Scaffolded.") + pc.dim(" Add your tokens to DESIGN.md, then `npx designagent-cli docs` to see them.") : 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");
@@ -1977,7 +2271,7 @@ function frameworkSummary(frameworks) {
 
 // src/commands/docs.ts
 import { mkdirSync as mkdirSync3, watch, writeFileSync as writeFileSync2 } from "node:fs";
-import { join as join7 } from "node:path";
+import { join as join9 } from "node:path";
 import { spawn } from "node:child_process";
 import { platform } from "node:os";
 import pc2 from "picocolors";
@@ -2326,13 +2620,13 @@ function openInBrowser(path) {
 function docs(cwd, options = {}) {
   let outPath;
   if (options.exportStatic) {
-    const dir = join7(cwd, "designagent-docs");
+    const dir = join9(cwd, "designagent-docs");
     mkdirSync3(dir, { recursive: true });
-    outPath = join7(dir, "index.html");
+    outPath = join9(dir, "index.html");
   } else {
-    const dir = join7(cwd, ".designagent");
+    const dir = join9(cwd, ".designagent");
     mkdirSync3(dir, { recursive: true });
-    outPath = join7(dir, "docs.html");
+    outPath = join9(dir, "docs.html");
   }
   const reloadSeconds = options.watch ? 2 : undefined;
   const stats = buildDocs(cwd, outPath, reloadSeconds);
@@ -2369,692 +2663,24 @@ function docs(cwd, options = {}) {
   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.
+${pc3.bold("designagent")} ${pc3.dim(`v${version}`)} — the design brain Claude Code needs.
 
-${pc4.bold("Usage")}
+${pc3.bold("Usage")}
   npx designagent <command>
 
-${pc4.bold("Commands")}
+${pc3.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)")}
+              ${pc3.dim("--export static HTML · --watch live-reload · --no-open")}
+  update      Refresh an existing setup ${pc3.dim("(coming soon)")}
   help        Show this help
   version     Print the version
 
-${pc4.dim("Docs: https://designagent.dev")}
+${pc3.dim("Docs: https://designagent.dev")}
 `;
 async function main() {
   const command = process.argv[2] ?? "init";
@@ -3071,20 +2697,9 @@ async function main() {
       });
       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)."));
+      console.log(pc3.yellow("`designagent update` is coming in a future release.") + `
+` + pc3.dim("For now, re-run ") + pc3.bold("npx designagent init") + pc3.dim(" (it will ask before overwriting your files)."));
       break;
     case "version":
     case "--version":
@@ -3097,12 +2712,12 @@ async function main() {
       console.log(HELP);
       break;
     default:
-      console.error(pc4.red(`Unknown command: ${command}`));
+      console.error(pc3.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);
+  console.error(pc3.red("designagent failed:"), err instanceof Error ? err.message : err);
   process.exit(1);
 });