@fragments-sdk/cli 0.10.1 → 0.12.1

package/dist/bin.js

@@ -1,28 +1,42 @@
 #!/usr/bin/env node
 import { createRequire as __banner_createRequire } from 'module'; const require = __banner_createRequire(import.meta.url);
+import {
+  createAIClient,
+  detectProvider,
+  getApiKey
+} from "./chunk-SXTKFDCR.js";
+import {
+  setup
+} from "./chunk-T5OMVL7E.js";
 import {
   buildFragments,
   buildFragmentsDir,
   measureBundleSizes,
+  resolveComponentSourcePath,
   runAnalyzeCommand,
   runDiffCommand,
   runScreenshotCommand,
   toPerformanceData,
   validateAll,
   validateCoverage,
+  validateDrift,
   validateSchema,
   validateSnippets
-} from "./chunk-5G3VZH43.js";
+} from "./chunk-GVDSFQ4E.js";
+import {
+  createComponentExtractor
+} from "./chunk-JJ2VRTBU.js";
 import {
   scan
-} from "./chunk-ZM4ZQZWZ.js";
+} from "./chunk-TPWGL2XS.js";
 import {
   loadConfig,
-  loadFragmentFile
-} from "./chunk-HRFUSSZI.js";
+  loadFragmentFile,
+  parseFragmentFile
+} from "./chunk-AM4MRTMN.js";
 import {
   discoverFragmentFiles
-} from "./chunk-WXSR2II7.js";
+} from "./chunk-OQKMEFOS.js";
 import {
   FigmaClient,
   StorageManager,
@@ -38,7 +52,7 @@ import {
   renderAllComponentVariants,
   scanCodebase,
   shutdownSharedPool
-} from "./chunk-D5PYOXEI.js";
+} from "./chunk-LVWFOLUZ.js";
 import "./chunk-D2CDBRNU.js";
 import {
   BRAND,
@@ -46,7 +60,7 @@ import {
   formatBytes,
   generateContext,
   resolvePerformanceConfig
-} from "./chunk-OQO55NKV.js";
+} from "./chunk-WFS63PCW.js";
 import "./chunk-Z7EY4VHE.js";
 
 // src/bin.ts
@@ -54,7 +68,7 @@ import { Command } from "commander";
 import pc24 from "picocolors";
 import { readFileSync } from "fs";
 import { fileURLToPath } from "url";
-import { dirname as dirname5, join as join12 } from "path";
+import { dirname as dirname4, join as join11 } from "path";
 
 // src/commands/validate.ts
 import pc from "picocolors";
@@ -78,6 +92,11 @@ ${BRAND.name} Validator
       componentStart: options.componentStart,
       componentLimit
     });
+  } else if (options.drift) {
+    console.log(pc.dim("Running drift detection...\n"));
+    const driftResult = await validateDrift(config, configDir, { tsconfig: options.tsconfig });
+    result = driftResult;
+    printDriftReport(driftResult);
   } else {
     console.log(pc.dim("Running all validations...\n"));
     result = await validateAll(config, configDir, {
@@ -118,6 +137,30 @@ ${BRAND.name} Validator
   }
   return result;
 }
+function printDriftReport(result) {
+  if (result.reports.length === 0) {
+    console.log(pc.green("No drift detected \u2014 fragments are in sync with source.\n"));
+    return;
+  }
+  console.log(pc.bold(`Drift detected in ${result.reports.length} component(s):
+`));
+  for (const report of result.reports) {
+    console.log(`  ${pc.bold(report.component)} ${pc.dim(`(${report.file})`)}`);
+    for (const drift of report.drifts) {
+      const icon = drift.kind === "removed" ? pc.red("\u2212") : drift.kind === "added" ? pc.green("+") : pc.yellow("~");
+      const label = drift.kind.replace("_", " ");
+      console.log(`    ${icon} ${drift.prop}: ${label}`);
+      if (drift.kind !== "added" && drift.kind !== "removed") {
+        console.log(pc.dim(`      fragment: ${drift.fragment}`));
+        console.log(pc.dim(`      source:   ${drift.source}`));
+      }
+    }
+    if (report.compositionDrift) {
+      console.log(`    ${pc.yellow("~")} composition: ${report.compositionDrift}`);
+    }
+    console.log();
+  }
+}
 
 // src/commands/build.ts
 import pc2 from "picocolors";
@@ -1858,7 +1901,7 @@ ${BRAND.name} Dev Server
       }
     }
   }
-  const { createDevServer } = await import("./viewer-DNMNC5VS.js");
+  const { createDevServer } = await import("./viewer-7ZEAFBVN.js");
   console.log(pc7.dim("\nStarting dev server..."));
   const parsedPort = typeof port === "string" ? parseInt(port, 10) : port;
   try {
@@ -4453,8 +4496,8 @@ async function enhance(options = {}) {
     yes = false,
     dryRun = false,
     format = "interactive",
-    provider = detectProvider(options),
-    apiKey = getApiKey(provider, options.apiKey),
+    provider = detectProvider2(options),
+    apiKey = getApiKey2(provider, options.apiKey),
     model = options.model || DEFAULT_MODELS[provider],
     root = process.cwd(),
     contextOnly = false,
@@ -4817,33 +4860,12 @@ For each component, provide your response in JSON format:
     context: fullContext
   };
 }
-function detectProvider(options) {
+function detectProvider2(options) {
   if (options.contextOnly) return "none";
-  if (options.provider) return options.provider;
-  if (options.apiKey) {
-    if (options.apiKey.startsWith("sk-ant-")) return "anthropic";
-    if (options.apiKey.startsWith("sk-")) return "openai";
-  }
-  if (process.env.ANTHROPIC_API_KEY) return "anthropic";
-  if (process.env.OPENAI_API_KEY) return "openai";
-  return "none";
+  return detectProvider({ provider: options.provider, apiKey: options.apiKey });
 }
-function getApiKey(provider, explicitKey) {
-  if (explicitKey) return explicitKey;
-  if (provider === "anthropic") return process.env.ANTHROPIC_API_KEY;
-  if (provider === "openai") return process.env.OPENAI_API_KEY;
-  return void 0;
-}
-async function createAIClient(provider, apiKey) {
-  if (provider === "anthropic") {
-    const Anthropic = (await import("@anthropic-ai/sdk")).default;
-    return new Anthropic({ apiKey });
-  }
-  if (provider === "openai") {
-    const OpenAI = (await import("openai")).default;
-    return new OpenAI({ apiKey });
-  }
-  throw new Error(`Unknown provider: ${provider}`);
+function getApiKey2(provider, explicitKey) {
+  return getApiKey(provider, explicitKey);
 }
 async function generateEnhancement(client, provider, model, context2) {
   const systemPrompt = generateSystemPrompt();
@@ -5785,365 +5807,228 @@ ${BRAND.name} Doctor
   return result;
 }
 
-// src/commands/setup.ts
-import { readFile as readFile9, writeFile as writeFile9, access as access4, mkdir as mkdir7 } from "fs/promises";
-import { join as join11, resolve as resolve9, dirname as dirname4 } from "path";
+// src/commands/sync.ts
 import pc23 from "picocolors";
-async function fileExists(path) {
-  try {
-    await access4(path);
-    return true;
-  } catch {
-    return false;
-  }
-}
-async function detectFramework(root) {
-  if (await fileExists(join11(root, "app/layout.tsx")) || await fileExists(join11(root, "src/app/layout.tsx"))) {
-    return "nextjs-app";
-  }
-  if (await fileExists(join11(root, "pages/_app.tsx")) || await fileExists(join11(root, "pages/_app.ts"))) {
-    return "nextjs-pages";
-  }
-  if (await fileExists(join11(root, "next.config.ts")) || await fileExists(join11(root, "next.config.js")) || await fileExists(join11(root, "next.config.mjs"))) {
-    return "nextjs-app";
-  }
-  if (await fileExists(join11(root, "vite.config.ts")) || await fileExists(join11(root, "vite.config.js"))) {
-    return "vite";
-  }
-  return "unknown";
-}
-async function findEntryFile(root, framework) {
-  const candidates = [];
-  switch (framework) {
-    case "nextjs-app":
-      candidates.push(
-        "src/app/layout.tsx",
-        "app/layout.tsx",
-        "src/app/layout.ts",
-        "app/layout.ts"
-      );
-      break;
-    case "nextjs-pages":
-      candidates.push("pages/_app.tsx", "pages/_app.ts");
-      break;
-    case "vite":
-      candidates.push(
-        "src/main.tsx",
-        "src/main.ts",
-        "src/index.tsx",
-        "src/index.ts"
-      );
-      break;
-    default:
-      candidates.push(
-        "src/main.tsx",
-        "src/main.ts",
-        "src/index.tsx",
-        "src/index.ts",
-        "src/App.tsx",
-        "src/App.ts"
-      );
-  }
-  for (const candidate of candidates) {
-    if (await fileExists(join11(root, candidate))) {
-      return candidate;
-    }
+import { readFile as readFile9, writeFile as writeFile9 } from "fs/promises";
+async function sync(options = {}) {
+  const { config, configDir } = await loadConfig(options.config);
+  console.log(pc23.cyan(`
+${BRAND.name} Sync
+`));
+  if (options.dryRun) {
+    console.log(pc23.dim("Dry run \u2014 no files will be modified.\n"));
   }
-  return null;
-}
-async function findNextConfig(root) {
-  const candidates = ["next.config.ts", "next.config.mjs", "next.config.js"];
-  for (const candidate of candidates) {
-    if (await fileExists(join11(root, candidate))) {
-      return candidate;
+  const result = await runSync(config, configDir, options);
+  if (result.updated.length > 0) {
+    const verb = options.dryRun ? "Would update" : "Updated";
+    console.log(pc23.bold(`${verb} ${result.updated.length} fragment(s):
+`));
+    for (const comp of result.updated) {
+      console.log(`  ${pc23.green("\u2713")} ${pc23.bold(comp.name)} ${pc23.dim(`(${comp.file})`)}`);
+      for (const change of comp.changes) {
+        console.log(`    ${pc23.dim("\u2022")} ${change}`);
+      }
     }
+    console.log();
   }
-  return null;
-}
-async function addStylesImport(root, entryFile) {
-  const fullPath = join11(root, entryFile);
-  const content = await readFile9(fullPath, "utf-8");
-  if (content.includes("@fragments-sdk/ui/styles")) {
-    return { modified: false, message: `Styles already imported in ${entryFile}` };
-  }
-  const stylesImport = "import '@fragments-sdk/ui/styles';";
-  let newContent;
-  if (content.startsWith("'use client'") || content.startsWith('"use client"')) {
-    const directiveEnd = content.indexOf("\n") + 1;
-    newContent = content.slice(0, directiveEnd) + stylesImport + "\n" + content.slice(directiveEnd);
-  } else {
-    newContent = stylesImport + "\n" + content;
+  if (result.skipped.length > 0) {
+    console.log(pc23.dim(`Skipped ${result.skipped.length}: ${result.skipped.map((s) => s.name).join(", ")}
+`));
   }
-  await writeFile9(fullPath, newContent, "utf-8");
-  return { modified: true, message: `Added styles import to ${entryFile}` };
-}
-async function addThemeProvider(root, entryFile, framework) {
-  const fullPath = join11(root, entryFile);
-  const content = await readFile9(fullPath, "utf-8");
-  if (content.includes("ThemeProvider")) {
-    return { modified: false, message: `ThemeProvider already present in ${entryFile}` };
-  }
-  if (framework === "nextjs-app") {
-    const providerImport = "import { ThemeProvider, TooltipProvider, ToastProvider } from '@fragments-sdk/ui';";
-    let newContent = content;
-    const importLines = content.split("\n");
-    let lastImportIdx = -1;
-    for (let i = 0; i < importLines.length; i++) {
-      if (importLines[i].startsWith("import ") || importLines[i].startsWith("import '") || importLines[i].startsWith('import "')) {
-        lastImportIdx = i;
-      }
-    }
-    if (lastImportIdx >= 0) {
-      importLines.splice(lastImportIdx + 1, 0, providerImport);
-      newContent = importLines.join("\n");
-    } else {
-      newContent = providerImport + "\n" + content;
-    }
-    if (!content.includes("suppressHydrationWarning")) {
-      await writeFile9(fullPath, newContent, "utf-8");
-      return {
-        modified: true,
-        message: `Added provider imports to ${entryFile}. Wrap your {children} with:
-    <ThemeProvider defaultMode="system"><TooltipProvider><ToastProvider>{children}</ToastProvider></TooltipProvider></ThemeProvider>
-    Add suppressHydrationWarning to your <html> tag`
-      };
+  if (result.errors.length > 0) {
+    console.log(pc23.red(pc23.bold("Errors:")));
+    for (const err of result.errors) {
+      console.log(`  ${pc23.red("\u2717")} ${pc23.bold(err.file)}: ${err.message}`);
     }
-    await writeFile9(fullPath, newContent, "utf-8");
-    return { modified: true, message: `Added provider imports to ${entryFile}. Wrap {children} with ThemeProvider.` };
-  }
-  return { modified: false, message: "Manual ThemeProvider setup needed \u2014 see https://usefragments.com/getting-started#provider-setup" };
-}
-async function addTranspilePackages(root) {
-  const configFile = await findNextConfig(root);
-  if (!configFile) {
-    return { modified: false, message: "No next.config found" };
+    console.log();
   }
-  const fullPath = join11(root, configFile);
-  const content = await readFile9(fullPath, "utf-8");
-  if (content.includes("transpilePackages") && content.includes("@fragments-sdk/ui")) {
-    return { modified: false, message: `transpilePackages already configured in ${configFile}` };
+  if (result.updated.length === 0 && result.errors.length === 0) {
+    console.log(pc23.green("All fragments are in sync \u2014 nothing to update.\n"));
   }
-  if (content.includes("transpilePackages")) {
-    return {
-      modified: false,
-      message: `transpilePackages found in ${configFile} but missing '@fragments-sdk/ui'. Please add it manually.`
-    };
+  return result;
+}
+async function runSync(config, configDir, options) {
+  const fragmentFiles = await discoverFragmentFiles(config, configDir);
+  const updated = [];
+  const skipped = [];
+  const errors = [];
+  if (fragmentFiles.length === 0) {
+    return { success: true, updated, skipped, errors };
   }
-  const patterns = [
-    // const nextConfig = { ... }
-    { search: /const\s+\w+\s*=\s*\{/, replacement: (match) => `${match}
-  transpilePackages: ['@fragments-sdk/ui'],` },
-    // module.exports = { ... }
-    { search: /module\.exports\s*=\s*\{/, replacement: (match) => `${match}
-  transpilePackages: ['@fragments-sdk/ui'],` },
-    // export default { ... }
-    { search: /export\s+default\s*\{/, replacement: (match) => `${match}
-  transpilePackages: ['@fragments-sdk/ui'],` }
-  ];
-  for (const pattern of patterns) {
-    if (pattern.search.test(content)) {
-      const newContent = content.replace(pattern.search, pattern.replacement);
-      await writeFile9(fullPath, newContent, "utf-8");
-      return { modified: true, message: `Added transpilePackages to ${configFile}` };
+  const extractor = createComponentExtractor(options.tsconfig);
+  try {
+    for (const file of fragmentFiles) {
+      try {
+        const fragment = await loadFragmentFile(file.absolutePath);
+        if (!fragment?.meta?.name) continue;
+        if (options.component && fragment.meta.name !== options.component) continue;
+        const fileContent = await readFile9(file.absolutePath, "utf-8");
+        const parsed = parseFragmentFile(fileContent, file.absolutePath);
+        if (!parsed.componentImport) {
+          skipped.push({ name: fragment.meta.name, reason: "No component import found" });
+          continue;
+        }
+        const sourcePath = resolveComponentSourcePath(file.absolutePath, parsed.componentImport);
+        if (!sourcePath) {
+          skipped.push({ name: fragment.meta.name, reason: "Cannot resolve component source" });
+          continue;
+        }
+        const meta = extractor.extract(sourcePath, fragment.meta.name);
+        if (!meta) {
+          skipped.push({ name: fragment.meta.name, reason: "Extraction returned null" });
+          continue;
+        }
+        const patch = computePatch(fileContent, fragment, meta);
+        if (patch.changes.length === 0) {
+          skipped.push({ name: fragment.meta.name, reason: "Already in sync" });
+          continue;
+        }
+        if (!options.dryRun) {
+          await writeFile9(file.absolutePath, patch.updatedContent, "utf-8");
+        }
+        updated.push({
+          name: fragment.meta.name,
+          file: file.relativePath,
+          changes: patch.changes
+        });
+      } catch (err) {
+        errors.push({
+          file: file.relativePath,
+          message: err instanceof Error ? err.message : String(err)
+        });
+      }
     }
+  } finally {
+    extractor.dispose();
   }
   return {
-    modified: false,
-    message: `Could not auto-modify ${configFile}. Add transpilePackages: ['@fragments-sdk/ui'] manually.`
+    success: errors.length === 0,
+    updated,
+    skipped,
+    errors
   };
 }
-async function createScssSeeds(root, brand) {
-  const scssLocations = [
-    "src/app/globals.scss",
-    "app/globals.scss",
-    "src/styles/globals.scss",
-    "src/globals.scss",
-    "styles/globals.scss"
-  ];
-  for (const loc of scssLocations) {
-    const fullPath2 = join11(root, loc);
-    if (await fileExists(fullPath2)) {
-      const content = await readFile9(fullPath2, "utf-8");
-      if (content.includes("@fragments-sdk/ui/styles")) {
-        return { modified: false, message: `SCSS seeds already configured in ${loc}` };
-      }
-      const seedContent = generateScssSeedImport(brand);
-      const newContent = seedContent + "\n" + content;
-      await writeFile9(fullPath2, newContent, "utf-8");
-      return { modified: true, message: `Added SCSS seed import to ${loc}` };
-    }
-  }
-  const targetDir = await fileExists(join11(root, "src/app")) ? "src/app" : await fileExists(join11(root, "src")) ? "src/styles" : "styles";
-  const targetPath = join11(targetDir, "globals.scss");
-  const fullPath = join11(root, targetPath);
-  await mkdir7(dirname4(fullPath), { recursive: true });
-  await writeFile9(fullPath, generateScssSeedImport(brand), "utf-8");
-  return { modified: true, message: `Created ${targetPath} with SCSS seed configuration` };
-}
-async function setupMcpConfig(root) {
-  const mcpConfigPaths = [
-    ".cursor/mcp.json",
-    ".vscode/mcp.json"
-  ];
-  for (const configPath of mcpConfigPaths) {
-    const fullPath = join11(root, configPath);
-    if (await fileExists(fullPath)) {
-      try {
-        const content = await readFile9(fullPath, "utf-8");
-        const config = JSON.parse(content);
-        const servers = config.mcpServers || {};
-        const hasFragments = Object.values(servers).some((server) => {
-          const s = server;
-          return s.args?.some((arg) => arg.includes("@fragments-sdk/mcp"));
-        });
-        if (hasFragments) {
-          return { modified: false, message: `MCP server already configured in ${configPath}` };
+function computePatch(fileContent, fragment, meta) {
+  const changes = [];
+  let content = fileContent;
+  const localSourceProps = Object.fromEntries(
+    Object.entries(meta.props).filter(([_, p]) => p.source === "local")
+  );
+  const addedProps = [];
+  for (const name of Object.keys(localSourceProps)) {
+    if (!(name in fragment.props)) {
+      addedProps.push(name);
+    }
+  }
+  const removedProps = [];
+  for (const name of Object.keys(fragment.props)) {
+    if (!(name in localSourceProps)) {
+      removedProps.push(name);
+    }
+  }
+  if (addedProps.length > 0) {
+    const propsBlockEnd = findPropsBlockEnd(content);
+    if (propsBlockEnd !== -1) {
+      const newEntries = addedProps.map((name) => {
+        const prop = localSourceProps[name];
+        return formatPropEntry(name, prop);
+      }).join("\n");
+      content = content.slice(0, propsBlockEnd) + newEntries + "\n  " + content.slice(propsBlockEnd);
+      changes.push(`Added props: ${addedProps.join(", ")}`);
+    }
+  }
+  if (removedProps.length > 0) {
+    for (const name of removedProps) {
+      const propRegex = new RegExp(`([ \\t]*)${escapeRegex(name)}:\\s*\\{`, "g");
+      const match = propRegex.exec(content);
+      if (match) {
+        const indent = match[1];
+        const startIdx = match.index;
+        const endIdx = findMatchingBrace2(content, match.index + match[0].length - 1);
+        if (endIdx !== -1) {
+          let lineEnd = endIdx + 1;
+          if (content[lineEnd] === ",") lineEnd++;
+          if (content[lineEnd] === "\n") lineEnd++;
+          const removedBlock = content.slice(startIdx, lineEnd);
+          const commented = removedBlock.split("\n").map((line) => line ? `${indent}// [drift:removed] ${line.trimStart()}` : "").join("\n");
+          content = content.slice(0, startIdx) + commented + content.slice(lineEnd);
         }
-        servers.fragments = {
-          command: "npx",
-          args: ["@fragments-sdk/mcp"]
-        };
-        config.mcpServers = servers;
-        await writeFile9(fullPath, JSON.stringify(config, null, 2) + "\n", "utf-8");
-        return { modified: true, message: `Added Fragments MCP server to ${configPath}` };
-      } catch {
-        return { modified: false, message: `Could not parse ${configPath}` };
       }
     }
+    changes.push(`Removed props: ${removedProps.join(", ")}`);
   }
-  const cursorDir = join11(root, ".cursor");
-  const cursorMcpPath = join11(cursorDir, "mcp.json");
-  await mkdir7(cursorDir, { recursive: true });
-  const mcpConfig = {
-    mcpServers: {
-      fragments: {
-        command: "npx",
-        args: ["@fragments-sdk/mcp"]
-      }
-    }
-  };
-  await writeFile9(cursorMcpPath, JSON.stringify(mcpConfig, null, 2) + "\n", "utf-8");
-  return { modified: true, message: "Created .cursor/mcp.json with Fragments MCP server" };
+  if (meta.composition && !fragment.ai?.compositionPattern) {
+    changes.push(`Composition: "${meta.composition.pattern}" pattern detected`);
+  }
+  return { updatedContent: content, changes };
 }
-function generateScssSeedImport(brand) {
-  const brandColor = brand || "#0066ff";
-  return `@use '@fragments-sdk/ui/styles' with (
-  $fui-brand: ${brandColor},
-  $fui-neutral: "stone",
-  $fui-density: "default",
-  $fui-radius-style: "rounded"
-);
-`;
+function findPropsBlockEnd(content) {
+  const propsStart = content.search(/\bprops:\s*\{/);
+  if (propsStart === -1) return -1;
+  const braceStart = content.indexOf("{", propsStart);
+  return findMatchingBrace2(content, braceStart);
 }
-async function setup(options = {}) {
-  const root = resolve9(options.root ?? process.cwd());
-  const actions = [];
-  const errors = [];
-  console.log(pc23.cyan(`
-${BRAND.name} Setup
-`));
-  const framework = await detectFramework(root);
-  const frameworkLabel = framework === "nextjs-app" ? "Next.js (App Router)" : framework === "nextjs-pages" ? "Next.js (Pages Router)" : framework === "vite" ? "Vite" : "Unknown";
-  console.log(`  ${pc23.dim("Framework:")} ${frameworkLabel}`);
-  const entryFile = await findEntryFile(root, framework);
-  if (entryFile) {
-    console.log(`  ${pc23.dim("Entry:")} ${entryFile}`);
-  } else {
-    console.log(`  ${pc23.yellow("!")} Could not detect entry file`);
-  }
-  console.log();
-  if (entryFile) {
-    try {
-      const result = await addStylesImport(root, entryFile);
-      const icon = result.modified ? pc23.green("+") : pc23.dim("\xB7");
-      console.log(`  ${icon} ${result.message}`);
-      if (result.modified) actions.push(result.message);
-    } catch (error) {
-      const msg = `Failed to add styles import: ${error instanceof Error ? error.message : error}`;
-      console.log(`  ${pc23.red("\u2717")} ${msg}`);
-      errors.push(msg);
+function findMatchingBrace2(content, start) {
+  let depth = 0;
+  let inString = null;
+  let escaped = false;
+  for (let i = start; i < content.length; i++) {
+    const ch = content[i];
+    if (escaped) {
+      escaped = false;
+      continue;
     }
-  }
-  if (entryFile) {
-    try {
-      const result = await addThemeProvider(root, entryFile, framework);
-      const icon = result.modified ? pc23.green("+") : pc23.dim("\xB7");
-      console.log(`  ${icon} ${result.message}`);
-      if (result.modified) actions.push(result.message);
-    } catch (error) {
-      const msg = `Failed to add ThemeProvider: ${error instanceof Error ? error.message : error}`;
-      console.log(`  ${pc23.red("\u2717")} ${msg}`);
-      errors.push(msg);
+    if (ch === "\\") {
+      escaped = true;
+      continue;
     }
-  }
-  if (framework === "nextjs-app" || framework === "nextjs-pages") {
-    try {
-      const result = await addTranspilePackages(root);
-      const icon = result.modified ? pc23.green("+") : pc23.dim("\xB7");
-      console.log(`  ${icon} ${result.message}`);
-      if (result.modified) actions.push(result.message);
-    } catch (error) {
-      const msg = `Failed to update next.config: ${error instanceof Error ? error.message : error}`;
-      console.log(`  ${pc23.red("\u2717")} ${msg}`);
-      errors.push(msg);
+    if (inString) {
+      if (ch === inString) inString = null;
+      continue;
     }
-  }
-  if (options.scss || options.brand) {
-    try {
-      const result = await createScssSeeds(root, options.brand);
-      const icon = result.modified ? pc23.green("+") : pc23.dim("\xB7");
-      console.log(`  ${icon} ${result.message}`);
-      if (result.modified) actions.push(result.message);
-    } catch (error) {
-      const msg = `Failed to create SCSS seeds: ${error instanceof Error ? error.message : error}`;
-      console.log(`  ${pc23.red("\u2717")} ${msg}`);
-      errors.push(msg);
+    if (ch === "'" || ch === '"' || ch === "`") {
+      inString = ch;
+      continue;
     }
-  }
-  if (options.mcp) {
-    try {
-      const result = await setupMcpConfig(root);
-      const icon = result.modified ? pc23.green("+") : pc23.dim("\xB7");
-      console.log(`  ${icon} ${result.message}`);
-      if (result.modified) actions.push(result.message);
-    } catch (error) {
-      const msg = `Failed to configure MCP: ${error instanceof Error ? error.message : error}`;
-      console.log(`  ${pc23.red("\u2717")} ${msg}`);
-      errors.push(msg);
+    if (ch === "{") depth++;
+    else if (ch === "}") {
+      depth--;
+      if (depth === 0) return i;
     }
   }
-  console.log();
-  if (errors.length > 0) {
-    console.log(pc23.red(`  ${errors.length} error(s) occurred during setup`));
-  } else if (actions.length > 0) {
-    console.log(pc23.green(`  \u2713 Setup complete \u2014 ${actions.length} file(s) modified`));
+  return -1;
+}
+function formatPropEntry(name, prop) {
+  const lines = [];
+  lines.push(`    ${name}: {`);
+  lines.push(`      type: '${prop.typeKind}',`);
+  if (prop.description) {
+    lines.push(`      description: ${JSON.stringify(prop.description)},`);
   } else {
-    console.log(pc23.green("  \u2713 Already configured \u2014 no changes needed"));
+    lines.push(`      description: '', // TODO: add description`);
   }
-  console.log();
-  console.log(pc23.dim("  Next steps:"));
-  if (!options.scss && !options.brand) {
-    console.log(pc23.dim("    \u2022 Run with --scss to add build-time theme seeds"));
+  if (prop.required) {
+    lines.push(`      required: true,`);
   }
-  if (!options.mcp) {
-    console.log(pc23.dim("    \u2022 Run with --mcp to configure AI tooling (MCP server)"));
+  if (prop.values && prop.values.length > 0) {
+    lines.push(`      values: [${prop.values.map((v) => `'${v}'`).join(", ")}],`);
   }
-  console.log(pc23.dim("    \u2022 Run `fragments doctor` to verify your setup"));
-  console.log(pc23.dim("    \u2022 Visit https://usefragments.com/getting-started"));
-  console.log();
-  return {
-    success: errors.length === 0,
-    actions,
-    errors
-  };
+  if (prop.default !== void 0) {
+    lines.push(`      default: '${prop.default}',`);
+  }
+  lines.push(`    },`);
+  return lines.join("\n");
+}
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
 // src/bin.ts
-var __dirname = dirname5(fileURLToPath(import.meta.url));
-var pkg = JSON.parse(readFileSync(join12(__dirname, "../package.json"), "utf-8"));
+var __dirname = dirname4(fileURLToPath(import.meta.url));
+var pkg = JSON.parse(readFileSync(join11(__dirname, "../package.json"), "utf-8"));
 var program = new Command();
 program.name(BRAND.cliCommand).description(`${BRAND.name} - Design system documentation and compliance tool`).version(pkg.version);
-program.command("validate").description("Validate fragment files").option("-c, --config <path>", "Path to config file").option("--schema", "Validate fragment schema only").option("--coverage", "Validate coverage only").option("--snippets", "Validate snippet/render policy only").option("--snippet-mode <mode>", "Override snippet policy mode (warn|error)").option("--component-start <name>", "Start component name for alphabetical snippet batch validation").option("--component-limit <n>", "Component count for alphabetical snippet batch validation", (value) => Number.parseInt(value, 10)).action(async (options) => {
+program.command("validate").description("Validate fragment files").option("-c, --config <path>", "Path to config file").option("--schema", "Validate fragment schema only").option("--coverage", "Validate coverage only").option("--snippets", "Validate snippet/render policy only").option("--drift", "Detect metadata drift between source and fragments").option("--tsconfig <path>", "Path to tsconfig.json (for drift detection)").option("--snippet-mode <mode>", "Override snippet policy mode (warn|error)").option("--component-start <name>", "Start component name for alphabetical snippet batch validation").option("--component-limit <n>", "Component count for alphabetical snippet batch validation", (value) => Number.parseInt(value, 10)).action(async (options) => {
   try {
     const result = await validate(options);
     if (!result.valid) {
@@ -6154,6 +6039,22 @@ program.command("validate").description("Validate fragment files").option("-c, -
     process.exit(1);
   }
 });
+program.command("sync").description("Auto-update fragment files from component source").option("-c, --config <path>", "Path to config file").option("--tsconfig <path>", "Path to tsconfig.json").option("--dry-run", "Preview changes without writing").option("--component <name>", "Sync specific component only").action(async (options) => {
+  try {
+    const result = await sync({
+      config: options.config,
+      tsconfig: options.tsconfig,
+      dryRun: options.dryRun,
+      component: options.component
+    });
+    if (!result.success) {
+      process.exit(1);
+    }
+  } catch (error) {
+    console.error(pc24.red("Error:"), error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+});
 program.command("build").description(`Build compiled ${BRAND.outFile} and ${BRAND.dataDir}/ directory`).option("-c, --config <path>", "Path to config file").option("-o, --output <path>", "Output file path").option("--registry", `Also generate ${BRAND.dataDir}/${BRAND.registryFile} and ${BRAND.contextFile}`).option("--registry-only", `Only generate ${BRAND.dataDir}/ directory (skip ${BRAND.outFile})`).option("--from-source", "Build from source code (zero-config, no fragment files needed)").option("--skip-usage", "Skip usage analysis when building from source").option("--skip-storybook", "Skip Storybook parsing when building from source").option("-v, --verbose", "Verbose output").action(async (options) => {
   try {
     const result = await build({
@@ -6508,7 +6409,7 @@ Make sure the dev server is running: ${BRAND.cliCommand} dev`));
 });
 program.command("view").description(`Generate a static HTML viewer for ${BRAND.outFile}`).option("-i, --input <path>", `Path to ${BRAND.outFile}`, BRAND.outFile).option("-o, --output <path>", "Output HTML file path", BRAND.viewerHtmlFile).option("--open", "Open in browser after generation").action(async (options) => {
   try {
-    const { generateViewerFromJson } = await import("./static-viewer-NUBFPKWH.js");
+    const { generateViewerFromJson } = await import("./static-viewer-5GXH2MGE.js");
     const fs2 = await import("fs/promises");
     const path = await import("path");
     const inputPath = path.resolve(process.cwd(), options.input);
@@ -6571,14 +6472,20 @@ program.command("setup").description("Configure @fragments-sdk/ui in a consumer
     process.exit(1);
   }
 });
-program.command("init").description("Initialize fragments in a project (interactive by default)").option("--force", "Overwrite existing config").option("-y, --yes", "Non-interactive mode - auto-detect and use defaults").option("--scan <path>", "Scan a TypeScript component directory and generate fragment files").action(async (options) => {
+program.command("init").description("Initialize fragments in a project (zero-config by default)").option("--force", "Overwrite existing config").option("-y, --yes", "Non-interactive mode (now the default)").option("--configure", "Interactive mode for theme seeds, snapshots, etc.").option("--scan <path>", "Scan a TypeScript component directory and generate fragment files").option("--enrich", "Use AI to fill knowledge fields during --scan (requires API key)").option("--dry-run", "Show what --enrich would generate without calling API").option("--provider <provider>", "AI provider for enrichment: anthropic or openai").option("--api-key <key>", "API key for AI enrichment").option("--model <model>", "Override AI model for enrichment").action(async (options) => {
   try {
-    const { init } = await import("./init-NDQXUWDU.js");
+    const { init } = await import("./init-ZSX3NRCZ.js");
     const result = await init({
       projectRoot: process.cwd(),
       force: options.force,
       yes: options.scan ? true : options.yes,
-      scan: options.scan
+      scan: options.scan,
+      configure: options.configure,
+      enrich: options.enrich,
+      dryRun: options.dryRun,
+      provider: options.provider,
+      apiKey: options.apiKey,
+      model: options.model
     });
     if (!result.success) {
       console.error(pc24.red("\nInit failed with errors:"));
@@ -6592,9 +6499,27 @@ program.command("init").description("Initialize fragments in a project (interact
     process.exit(1);
   }
 });
+program.command("snapshot").description("Run visual snapshot tests per component variant").option("-p, --port <port>", "Port of running dev server (skips starting one)").option("--update", "Update existing snapshots instead of comparing").option("--component <name>", "Filter to a specific component").option("--spec <path>", "Path to snapshot spec file").option("--ci", "CI mode - exit 1 on mismatch").action(async (options) => {
+  try {
+    const { snapshot } = await import("./snapshot-XOISO2IS.js");
+    const result = await snapshot({
+      port: options.port,
+      update: options.update,
+      component: options.component,
+      spec: options.spec,
+      ci: options.ci
+    });
+    if (!result.success) {
+      process.exit(1);
+    }
+  } catch (error) {
+    console.error(pc24.red("Error:"), error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+});
 program.command("tokens").description("Discover and list design tokens from CSS/SCSS files").option("-c, --config <path>", "Path to config file").option("--json", "Output as JSON").option("--categories", "Group tokens by category").option("--theme <theme>", "Filter by theme name").option("--category <category>", "Filter by category (color, spacing, typography, etc.)").option("--verbose", "Show all tokens (no truncation)").action(async (options) => {
   try {
-    const { tokens } = await import("./tokens-CE46OTMD.js");
+    const { tokens } = await import("./tokens-T6SIVUT5.js");
     const result = await tokens({
       config: options.config,
       json: options.json,
@@ -6613,7 +6538,7 @@ program.command("tokens").description("Discover and list design tokens from CSS/
 });
 program.command("generate").description("Generate fragment files from component source code").argument("[component]", "Specific component name to generate (optional)").option("--force", "Overwrite existing fragment files").option("--pattern <glob>", "Pattern for component files", "src/components/**/*.tsx").action(async (component, options) => {
   try {
-    const { generate } = await import("./generate-FBHSXR3D.js");
+    const { generate } = await import("./generate-RJFS2JWA.js");
     const result = await generate({
       projectRoot: process.cwd(),
       component,
@@ -6658,7 +6583,7 @@ program.command("perf").description("Profile component bundle sizes and performa
 program.command("test").description("Run interaction tests for fragments with play functions").option("-c, --config <path>", "Path to config file").option("--component <name>", "Filter by component name").option("--tags <tags>", "Filter by tags (comma-separated)").option("--grep <pattern>", "Filter by variant name pattern").option("--exclude <pattern>", "Exclude tests matching pattern").option("--parallel <count>", "Number of parallel browser contexts", parseInt, 4).option("--timeout <ms>", "Timeout per test in milliseconds", parseInt, 3e4).option("--retries <count>", "Number of retries for failed tests", parseInt, 0).option("--bail", "Stop on first failure").option("--browser <name>", "Browser to use (chromium, firefox, webkit)", "chromium").option("--headed", "Run in headed mode (show browser)").option("--a11y", "Run accessibility checks with axe-core").option("--visual", "Capture screenshots for visual regression").option("--update-snapshots", "Update visual snapshots").option("--watch", "Watch mode - re-run on file changes").option("--reporters <names>", "Reporters to use (console, junit, json)", "console").option("-o, --output <dir>", "Output directory for results", "./test-results").option("--server-url <url>", "URL of running dev server (skips starting server)").option("-p, --port <port>", "Port for dev server", parseInt, 6006).option("--ci", "CI mode - non-interactive, exit with code 1 on failure").option("--list", "List available tests without running them").action(async (options) => {
   try {
     const { config, configDir } = await loadConfig(options.config);
-    const { runTestCommand, listTests } = await import("./test-Z5LVO724.js");
+    const { runTestCommand, listTests } = await import("./test-SI4NSHQX.js");
     if (options.list) {
       await listTests(config, configDir, {
         component: options.component,