@barefootjs/cli 0.2.0 → 0.3.0

package/dist/index.js

@@ -22,9 +22,9 @@ async function loadBuildConfig(configPath) {
   let importTarget = configPath;
   let cleanupPath = null;
   if (!isBun) {
-    const { build: build2 } = await import("esbuild");
+    const { build: build3 } = await import("esbuild");
     importTarget = resolve(dirname(configPath), `.barefoot.config.${process.pid}.mjs`);
-    await build2({
+    await build3({
       entryPoints: [configPath],
       outfile: importTarget,
       bundle: true,
@@ -36,8 +36,8 @@ async function loadBuildConfig(configPath) {
       // resolution still happens at runtime from the user's project.
       plugins: [{
         name: "externalize-non-barefoot",
-        setup(build3) {
-          build3.onResolve({ filter: /^[^./]/ }, (args2) => {
+        setup(build4) {
+          build4.onResolve({ filter: /^[^./]/ }, (args2) => {
             if (args2.path.startsWith("@barefootjs/")) return null;
             return { path: args2.path, external: true };
           });
@@ -7147,7 +7147,7 @@ function transformExpressionInner(expr, ctx2, node, isClientOnly) {
   }
   const ir = transformJsxExpression(expr, ctx2, isClientOnly);
   if (ir !== null) {
-    if (isClientOnly && ir.type === "conditional") {
+    if ((isClientOnly || shouldAutoDeferReactiveBrand(expr, ctx2)) && ir.type === "conditional") {
       ir.clientOnly = true;
       if (!ir.slotId) {
         ir.slotId = generateSlotId(ctx2);
@@ -8524,7 +8524,7 @@ function processAttributes(attributes, ctx2) {
           value = { ...value, templateExpr: rewritten };
         }
       }
-      if (hasLeadingClientDirective(attr.initializer.expression, ctx2.sourceFile)) {
+      if (hasLeadingClientDirective(attr.initializer.expression, ctx2.sourceFile) || shouldAutoDeferReactiveBrand(attr.initializer.expression, ctx2)) {
         clientOnly = true;
       }
     }
@@ -8927,6 +8927,13 @@ function isReactiveExpression(expr, ctx2, astNode) {
   }
   return false;
 }
+function shouldAutoDeferReactiveBrand(expr, ctx2) {
+  const checker = ctx2.analyzer.checker;
+  if (!checker) return false;
+  if (!containsReactiveExpression(expr, checker)) return false;
+  if (isSignalOrMemoReference(ctx2.getJS(expr), ctx2)) return false;
+  return true;
+}
 function isSignalOrMemoReference(expr, ctx2, visited) {
   for (const { pattern } of ctx2.patterns.signals) {
     if (pattern.test(expr)) return true;
@@ -9026,10 +9033,10 @@ function hasDynamicContent(children) {
 function inferExpressionType(_node, _ctx) {
   return null;
 }
-function replaceBranchLocalRefs(text, branchNames, resolve7) {
+function replaceBranchLocalRefs(text, branchNames, resolve10) {
   if (branchNames.length === 0) return text;
   const pattern = new RegExp(`(?<![\\w$])(${branchNames.join("|")})(?![\\w$])`, "g");
-  return replaceInExprContexts(text, pattern, (_match, name) => resolve7(name));
+  return replaceInExprContexts(text, pattern, (_match, name) => resolve10(name));
 }
 function buildIfStatementChain(analyzer, ctx2) {
   const conditionalReturns = analyzer.conditionalReturns;
@@ -17476,13 +17483,51 @@ function makeIdRefRegex(name) {
 }
 function buildLocalFunctionSetterMap(meta, setterToSignal) {
   const setterPatterns = [...setterToSignal.keys()].map((s) => ({ name: s, re: makeIdCallRegex(s) }));
-  const result = /* @__PURE__ */ new Map();
-  for (const fn of meta.localFunctions) {
+  const bodies = /* @__PURE__ */ new Map();
+  for (const fn of meta.localFunctions) bodies.set(fn.name, fn.body);
+  for (const c of meta.localConstants) {
+    if (c.containsArrow && c.value) bodies.set(c.name, c.value);
+  }
+  const fnNamePatterns = [...bodies.keys()].map((n) => ({ name: n, re: makeIdCallRegex(n) }));
+  const directSetters = /* @__PURE__ */ new Map();
+  const directCalls = /* @__PURE__ */ new Map();
+  for (const [name, body] of bodies) {
     const setters = [];
-    for (const { name, re } of setterPatterns) {
-      if (re.test(fn.body)) setters.push(name);
+    for (const { name: setter, re } of setterPatterns) {
+      if (re.test(body)) setters.push(setter);
+    }
+    directSetters.set(name, setters);
+    const calls = [];
+    for (const { name: callee, re } of fnNamePatterns) {
+      if (callee !== name && re.test(body)) calls.push(callee);
+    }
+    directCalls.set(name, calls);
+  }
+  const resolve10 = (name, stack) => {
+    const out = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const setter of directSetters.get(name) ?? []) {
+      if (!seen.has(setter)) {
+        out.push({ setter, chain: [] });
+        seen.add(setter);
+      }
+    }
+    for (const callee of directCalls.get(name) ?? []) {
+      if (stack.has(callee)) continue;
+      const sub2 = resolve10(callee, /* @__PURE__ */ new Set([...stack, callee]));
+      for (const r of sub2) {
+        if (!seen.has(r.setter)) {
+          out.push({ setter: r.setter, chain: [callee, ...r.chain] });
+          seen.add(r.setter);
+        }
+      }
     }
-    if (setters.length > 0) result.set(fn.name, setters);
+    return out;
+  };
+  const result = /* @__PURE__ */ new Map();
+  for (const name of bodies.keys()) {
+    const resolved = resolve10(name, /* @__PURE__ */ new Set([name]));
+    if (resolved.length > 0) result.set(name, resolved);
   }
   return result;
 }
@@ -17574,12 +17619,16 @@ function resolveSetters(handler, setterToSignal, fnSetters) {
       }
     }
   }
-  for (const [fnName, setters] of fnSetters) {
+  for (const [fnName, resolutions] of fnSetters) {
     if (trimmed === fnName || makeIdCallRegex(fnName).test(handler)) {
-      for (const setter of setters) {
-        if (!seen.has(setter)) {
-          refs.push({ setter, signal: setterToSignal.get(setter) ?? null, via: fnName });
-          seen.add(setter);
+      for (const r of resolutions) {
+        if (!seen.has(r.setter)) {
+          refs.push({
+            setter: r.setter,
+            signal: setterToSignal.get(r.setter) ?? null,
+            via: [fnName, ...r.chain]
+          });
+          seen.add(r.setter);
         }
       }
     }
@@ -17613,7 +17662,7 @@ function formatEventSummary(summary, graph) {
     lines.push("");
     lines.push(`  ${event.elementContext}`);
     const setterParts = event.setterCalls.map((s) => {
-      const chain = s.via ? `${s.via} -> ${s.setter}` : s.setter;
+      const chain = s.via && s.via.length > 0 ? `${s.via.join(" -> ")} -> ${s.setter}` : s.setter;
       return chain;
     });
     const setterStr = setterParts.length > 0 ? setterParts.join(", ") : event.handler;
@@ -17883,6 +17932,95 @@ function buildUpdateEntry(consumer, graph, visited) {
   }
   return { name: consumer, kind: "effect", label: consumer, children: [] };
 }
+function buildWhyUpdate(source, filePath, bindingLabel, componentName) {
+  const { graph, ir } = buildComponentAnalysis(source, filePath, componentName);
+  const matches = graph.domBindings.filter(
+    (d) => d.label === bindingLabel || d.slotId === bindingLabel
+  );
+  if (matches.length === 0) return null;
+  if (matches.length > 1) {
+    return {
+      binding: bindingLabel,
+      expression: null,
+      deps: [],
+      ambiguous: matches.map((d) => ({ label: d.label, slotId: d.slotId }))
+    };
+  }
+  const binding = matches[0];
+  const setterToSignal = /* @__PURE__ */ new Map();
+  for (const s of ir.metadata.signals) {
+    if (s.setter) setterToSignal.set(s.setter, s.getter);
+  }
+  const fnSetters = buildLocalFunctionSetterMap(ir.metadata, setterToSignal);
+  const events = collectEventBindings(ir.root, setterToSignal, fnSetters);
+  const deps = [];
+  const visited = /* @__PURE__ */ new Set();
+  function traceDep(name) {
+    if (visited.has(name)) return;
+    visited.add(name);
+    const signal = graph.signals.find((s) => s.name === name);
+    if (signal) {
+      const changedBy = [];
+      for (const ev of events) {
+        for (const sc of ev.setterCalls) {
+          if (sc.signal === name) {
+            changedBy.push({
+              handler: ev.eventName,
+              setter: sc.setter,
+              elementContext: ev.elementContext,
+              via: sc.via
+            });
+          }
+        }
+      }
+      deps.push({ name, kind: "signal", dependsOn: [], changedBy });
+      return;
+    }
+    const memo = graph.memos.find((m) => m.name === name);
+    if (memo) {
+      deps.push({ name, kind: "memo", dependsOn: memo.deps, changedBy: [] });
+      for (const dep of memo.deps) traceDep(dep);
+    }
+  }
+  for (const dep of binding.deps) traceDep(dep);
+  const stableId = binding.type === "attribute" ? binding.label : binding.slotId;
+  return {
+    binding: stableId,
+    expression: binding.expression ?? null,
+    deps,
+    ...binding.classification === "fallback" && { classification: binding.classification },
+    ...binding.wrapReason && { wrapReason: binding.wrapReason }
+  };
+}
+function formatWhyUpdate(result) {
+  const lines = [];
+  lines.push(`${result.binding} updates because:`);
+  if (result.expression) {
+    lines.push(`  ${result.expression}`);
+  }
+  if (result.classification === "fallback") {
+    lines.push("");
+    lines.push(`note: this is a fallback-wrapped binding (${result.wrapReason ?? "unknown"})`);
+    lines.push("  the compiler could not statically prove reactivity \u2014 deps are determined at runtime");
+  }
+  for (const dep of result.deps) {
+    lines.push("");
+    if (dep.kind === "memo") {
+      lines.push(`${dep.name} depends on:`);
+      for (const d of dep.dependsOn) lines.push(`  ${d}`);
+    } else {
+      lines.push(`${dep.name} changes from:`);
+      if (dep.changedBy.length === 0) {
+        lines.push("  (no event handlers found)");
+      }
+      for (const src of dep.changedBy) {
+        const chain = src.via && src.via.length > 0 ? `${src.elementContext} ${src.handler} -> ${src.via.join(" -> ")} -> ${src.setter}` : `${src.elementContext} ${src.handler} -> ${src.setter}`;
+        lines.push(`  ${chain}`);
+      }
+    }
+  }
+  return lines.join("\n");
+}
 function formatComponentGraph(graph) {
   const lines = [];
   lines.push(`${graph.componentName} (${graph.sourceFile})`);
@@ -18054,6 +18192,145 @@ function formatSignalTrace(traces) {
     }
   }).join("\n");
 }
+function describeFallback(binding) {
+  const isEventHandler = binding.type === "event" || binding.type === "attribute" && /^on[A-Z]/.test(binding.label.split(".").pop() ?? "");
+  const reason = describeFallbackReason(binding.wrapReason, binding.type, isEventHandler);
+  const runtimeDeps = binding.deps.length > 0 ? binding.deps.join(", ") : isEventHandler ? "likely none (event handler captures values, does not track reactively)" : "unknown \u2014 subscribes to whatever signals it reads at runtime";
+  const suggestion = isEventHandler ? "event handlers intentionally capture scope values; this fallback is typically safe to ignore" : binding.wrapReason === "fallback-function-calls" ? "inline the reactive source or wrap the result in createMemo so the compiler can prove the dependency" : binding.wrapReason === "fallback-getter-calls" ? "the call looks like a signal getter but is not a known signal; verify the function is pure or extract as createMemo" : "rewrite to use a known signal/memo reference so the compiler can statically prove reactivity";
+  return {
+    label: binding.label,
+    expression: binding.expression ?? "(expression not captured)",
+    reason,
+    runtimeDeps,
+    suggestion,
+    loc: binding.loc ? { file: binding.loc.file, line: binding.loc.start.line } : void 0,
+    isEventHandler
+  };
+}
+function describeFallbackReason(wrapReason, bindingType, isEventHandler) {
+  const context = bindingType === "attribute" ? "an attribute expression" : bindingType === "text" ? "a text interpolation" : bindingType === "conditional" ? "a conditional expression" : bindingType === "loop" ? "a loop array expression" : "an expression";
+  switch (wrapReason) {
+    case "fallback-function-calls":
+      return isEventHandler ? `function call in ${context} (event handler prop)` : `opaque function call in ${context} \u2014 the compiler cannot prove it is reactive or pure`;
+    case "fallback-getter-calls":
+      return `call pattern resembles a signal getter in ${context}, but is not a recognized signal`;
+    case "string-reactive":
+      return `string-level match found a signal/memo name in ${context}`;
+    case "props-access":
+      return `props.xxx reference in ${context} \u2014 reactive via prop forwarding`;
+    case "proven-reactive":
+      return `statically proven reactive in ${context}`;
+    default:
+      return `unknown fallback trigger in ${context}`;
+  }
+}
+function formatFallbackExplanations(componentName, fallbacks) {
+  const lines = [];
+  if (fallbacks.length === 0) {
+    lines.push(`${componentName} \u2014 no fallback-wrapped expressions.`);
+    return lines.join("\n");
+  }
+  lines.push(`${componentName} \u2014 ${fallbacks.length} fallback-wrapped expression(s)`);
+  for (const f of fallbacks) {
+    const ex = describeFallback(f);
+    lines.push("");
+    if (ex.loc) {
+      const locFile = ex.loc.file.split("/").pop() ?? ex.loc.file;
+      lines.push(`  ${locFile}:${ex.loc.line}`);
+    }
+    lines.push(`  ${ex.label} fallback:`);
+    lines.push(`    expression: ${ex.expression}`);
+    lines.push(`    reason: ${ex.reason}`);
+    lines.push(`    runtime deps: ${ex.runtimeDeps}`);
+    lines.push(`    suggestion: ${ex.suggestion}`);
+  }
+  return lines.join("\n");
+}
+function buildComponentSummary(source, filePath, componentName) {
+  const { graph, ir } = buildComponentAnalysis(source, filePath, componentName);
+  const meta = ir.metadata;
+  const clientNeeds = analyzeClientNeeds(ir);
+  const hasReactiveState = meta.signals.length > 0 || meta.memos.length > 0 || meta.effects.length > 0;
+  const needsClient = clientNeeds.needsInit && hasReactiveState;
+  let loopCount = 0;
+  countNodeType(ir.root, "loop", () => {
+    loopCount++;
+  });
+  let conditionalCount = 0;
+  countNodeType(ir.root, "conditional", () => {
+    conditionalCount++;
+  });
+  const eventHandlers = graph.domBindings.filter((d) => d.type === "event").length;
+  const textBindings = graph.domBindings.filter((d) => d.type === "text").length;
+  const attrBindings = graph.domBindings.filter((d) => d.type === "attribute").length;
+  const fallbacks = graph.domBindings.filter((d) => d.classification === "fallback").length;
+  let clientBundle = null;
+  if (needsClient) {
+    const base = filePath.replace(/\.[^.]+$/, "").split("/").pop() ?? meta.componentName;
+    clientBundle = `${base}.client.js`;
+  }
+  return {
+    componentName: graph.componentName,
+    sourceFile: graph.sourceFile,
+    hydrated: needsClient,
+    clientBundle,
+    signals: graph.signals.length,
+    memos: graph.memos.length,
+    effects: graph.effects.length,
+    loops: loopCount,
+    eventHandlers,
+    dynamicTextBindings: textBindings,
+    dynamicAttributes: attrBindings,
+    conditionals: conditionalCount,
+    fallbacks
+  };
+}
+function countNodeType(node, targetType, cb) {
+  if (node.type === targetType) cb();
+  switch (node.type) {
+    case "element":
+    case "fragment":
+    case "provider":
+      for (const child of node.children) countNodeType(child, targetType, cb);
+      break;
+    case "component":
+      for (const child of node.children) countNodeType(child, targetType, cb);
+      break;
+    case "conditional":
+      countNodeType(node.whenTrue, targetType, cb);
+      countNodeType(node.whenFalse, targetType, cb);
+      break;
+    case "loop":
+      for (const child of node.children) countNodeType(child, targetType, cb);
+      break;
+    case "if-statement":
+      countNodeType(node.consequent, targetType, cb);
+      if (node.alternate) countNodeType(node.alternate, targetType, cb);
+      break;
+    case "async":
+      countNodeType(node.fallback, targetType, cb);
+      for (const child of node.children) countNodeType(child, targetType, cb);
+      break;
+  }
+}
+function formatComponentSummary(summary) {
+  const lines = [];
+  lines.push(summary.componentName);
+  lines.push(`  hydrated: ${summary.hydrated ? "yes" : "no"}`);
+  if (summary.clientBundle) {
+    lines.push(`  client bundle: ${summary.clientBundle}`);
+  }
+  lines.push(`  signals: ${summary.signals}`);
+  lines.push(`  memos: ${summary.memos}`);
+  if (summary.effects > 0) lines.push(`  effects: ${summary.effects}`);
+  lines.push(`  loops: ${summary.loops}`);
+  lines.push(`  event handlers: ${summary.eventHandlers}`);
+  lines.push(`  dynamic text bindings: ${summary.dynamicTextBindings}`);
+  lines.push(`  dynamic attributes: ${summary.dynamicAttributes}`);
+  if (summary.conditionals > 0) lines.push(`  conditionals: ${summary.conditionals}`);
+  if (summary.fallbacks > 0) lines.push(`  fallbacks: ${summary.fallbacks}`);
+  return lines.join("\n");
+}
 function inferWrapReasonForAttrLike(hasStringReactive, hasPropsRef, flags) {
   if (hasPropsRef) return "props-access";
   if (hasStringReactive) return "string-reactive";
@@ -18284,6 +18561,7 @@ var init_debug = __esm({
     init_analyzer();
     init_jsx_to_ir();
     init_compiler();
+    init_ir_to_client_js();
     init_reactivity();
   }
 });
@@ -18304,18 +18582,22 @@ __export(src_exports, {
   applyCssLayerPrefix: () => applyCssLayerPrefix,
   buildComponentAnalysis: () => buildComponentAnalysis,
   buildComponentGraph: () => buildComponentGraph,
+  buildComponentSummary: () => buildComponentSummary,
   buildEventSummary: () => buildEventSummary,
   buildGraphFromIR: () => buildGraphFromIR,
+  buildLocalFunctionSetterMap: () => buildLocalFunctionSetterMap,
   buildLoopChainExpr: () => buildLoopChainExpr,
   buildLoopSummary: () => buildLoopSummary,
   buildMetadata: () => buildMetadata,
   buildSourceMapFromIR: () => buildSourceMapFromIR,
+  buildWhyUpdate: () => buildWhyUpdate,
   combineParentChildClientJs: () => combineParentChildClientJs,
   compileJSX: () => compileJSX,
   containsHigherOrder: () => containsHigherOrder,
   createError: () => createError,
   createProgramForCorpus: () => createProgramForCorpus,
   createProgramForFile: () => createProgramForFile,
+  describeFallback: () => describeFallback,
   disableCompilerInstrumentation: () => disableCompilerInstrumentation,
   emitAttrValue: () => emitAttrValue,
   emitIRNode: () => emitIRNode,
@@ -18326,12 +18608,15 @@ __export(src_exports, {
   extractSsrDefaults: () => extractSsrDefaults,
   findReachableNames: () => findReachableNames,
   formatComponentGraph: () => formatComponentGraph,
+  formatComponentSummary: () => formatComponentSummary,
   formatError: () => formatError,
   formatEventSummary: () => formatEventSummary,
+  formatFallbackExplanations: () => formatFallbackExplanations,
   formatLoopSummary: () => formatLoopSummary,
   formatParamWithType: () => formatParamWithType,
   formatSignalTrace: () => formatSignalTrace,
   formatUpdatePath: () => formatUpdatePath,
+  formatWhyUpdate: () => formatWhyUpdate,
   generateClientJs: () => generateClientJs,
   generateClientJsWithSourceMap: () => generateClientJsWithSourceMap,
   generateCodeFrame: () => generateCodeFrame,
@@ -18345,10 +18630,12 @@ __export(src_exports, {
   jsxToIR: () => jsxToIR,
   listComponentFunctions: () => listComponentFunctions,
   listExportedComponents: () => listComponentFunctions,
+  makeIdCallRegex: () => makeIdCallRegex,
   needsTypeBasedDetection: () => needsTypeBasedDetection,
   parseBlockBody: () => parseBlockBody,
   parseExpression: () => parseExpression,
   resetCompilerCounters: () => resetCompilerCounters,
+  resolveSetters: () => resolveSetters,
   rewriteImportsForTemplate: () => rewriteImportsForTemplate,
   stringifyParsedExpr: () => stringifyParsedExpr,
   traceUpdatePath: () => traceUpdatePath
@@ -20134,7 +20421,7 @@ async function writeBuildId(outDir, result) {
 }
 async function watch(config, options = {}) {
   const { debounceMs = 100, signal } = options;
-  const { watch: fsWatch } = await import("node:fs/promises");
+  const { watch: fsWatch2 } = await import("node:fs/promises");
   const initial = await build(config);
   let cachedProgram = initial.sharedProgram;
   console.log("");
@@ -20212,7 +20499,7 @@ async function watch(config, options = {}) {
   };
   const watchRoot = async (root, recursive) => {
     try {
-      const iter = fsWatch(root, { recursive, signal });
+      const iter = fsWatch2(root, { recursive, signal });
       for await (const event of iter) {
         if (!isRelevant(root, event.filename)) continue;
         schedule();
@@ -23588,7 +23875,7 @@ async function select(args2) {
   output.write(`\x1B[33m?\x1B[0m \x1B[1m${args2.message}\x1B[0m
 `);
   render(true);
-  return new Promise((resolve7, reject) => {
+  return new Promise((resolve10, reject) => {
     readline.emitKeypressEvents(input);
     input.setRawMode?.(true);
     input.resume();
@@ -23633,7 +23920,7 @@ async function select(args2) {
         output.write(`\x1B[${totalLines}A`);
         output.write(`\u2714 ${args2.message} \x1B[1;32m${shortLabel}\x1B[0m
 `);
-        resolve7(args2.options[cursor].value);
+        resolve10(args2.options[cursor].value);
         return;
       }
     };
@@ -24532,325 +24819,268 @@ var init_scaffold_layout = __esm({
   }
 });
 
-// src/commands/preview.ts
-var preview_exports = {};
-__export(preview_exports, {
-  run: () => run8
-});
-import { existsSync as existsSync12, readdirSync as readdirSync5 } from "fs";
-import path16 from "path";
-function listPreviewableComponents(ctx2) {
-  const { writeRoot, componentsBasePath } = resolveScaffoldLayout(ctx2);
-  const componentsDir = path16.join(writeRoot, componentsBasePath);
-  if (!existsSync12(componentsDir)) return [];
-  const names = [];
-  for (const name of readdirSync5(componentsDir)) {
-    const previewFile = path16.join(componentsDir, name, "index.preview.tsx");
-    if (existsSync12(previewFile)) names.push(name);
-  }
-  return names.sort();
-}
-async function run8(args2, ctx2) {
-  const component = args2[0];
-  if (!component) {
-    const available = listPreviewableComponents(ctx2);
-    if (ctx2.jsonFlag) {
-      console.log(JSON.stringify({ previewable: available }, null, 2));
-      return;
-    }
-    if (available.length === 0) {
-      console.error("No previewable components found.");
-      console.error("Generate one with: bf gen preview <component>");
-      process.exit(1);
+// src/lib/preview/compile.ts
+import { mkdir as mkdir2, readFile as readFile2, writeFile as writeFile2 } from "node:fs/promises";
+import { existsSync as existsSync12 } from "node:fs";
+import { execFileSync } from "node:child_process";
+import { resolve as resolve6, relative as relative3 } from "node:path";
+import { build as build2 } from "esbuild";
+async function compile(options) {
+  const { assets, previewsPath, previewNames, componentName, liveReload } = options;
+  const { rootDir, srcComponentsDir, tokensCss, globalsCss, runtimeStandalone, uno } = assets;
+  const DIST_DIR = resolve6(rootDir, ".preview-dist");
+  const MODULES_DIR = resolve6(DIST_DIR, "_modules");
+  await mkdir2(MODULES_DIR, { recursive: true });
+  console.log("Generating CSS...");
+  await writeFile2(resolve6(DIST_DIR, "globals.css"), tokensCss + "\n" + globalsCss);
+  console.log("Generated: .preview-dist/globals.css");
+  console.log("Generating UnoCSS...");
+  let unoConfigPath = uno.configPath;
+  if (uno.configIsBundled) {
+    unoConfigPath = resolve6(DIST_DIR, "uno.config.ts");
+    await writeFile2(unoConfigPath, await readFile2(uno.configPath, "utf-8"));
+  }
+  execFileSync(uno.bin, [
+    ...uno.globs,
+    "--config",
+    unoConfigPath,
+    "-o",
+    resolve6(DIST_DIR, "uno.css")
+  ], { cwd: uno.cwd, stdio: "inherit" });
+  console.log("Generated: .preview-dist/uno.css");
+  const previewSource = await readFile2(previewsPath, "utf-8");
+  const previewSiblings = [
+    ...previewSource.matchAll(/from\s*['"]\.\.\/([a-z][a-z0-9-]*)(?:\/[^'"]*)?['"]/g)
+  ].map((m) => m[1]);
+  const componentFiles = resolveDependenciesFromSource(
+    [componentName, ...previewSiblings],
+    srcComponentsDir
+  ).map((name) => resolve6(srcComponentsDir, name, "index.tsx")).filter(existsSync12);
+  console.log(`Compiling ${componentFiles.length + 1} files...`);
+  const allFiles = [...componentFiles, previewsPath];
+  const adapter = new PreviewCsrAdapter();
+  const previewKey = relative3(rootDir, previewsPath).replace(/\.tsx$/, "");
+  const clientJsByKey = /* @__PURE__ */ new Map();
+  let previewProducedClientJs = false;
+  for (const filePath of allFiles) {
+    const source = await readFile2(filePath, "utf-8");
+    const isPreview = filePath === previewsPath;
+    const result = compileJSX(source, filePath, { adapter });
+    const errors = result.errors.filter((e) => e.severity === "error");
+    const warnings = result.errors.filter((e) => e.severity === "warning");
+    for (const w of warnings) console.warn(formatError(w, source, { projectDir: rootDir }));
+    if (errors.length > 0) {
+      for (const e of errors) console.error(formatError(e, source, { projectDir: rootDir }));
+      if (isPreview) {
+        throw new Error(`Preview compilation failed for ${previewKey} (see errors above).`);
+      }
+      continue;
     }
-    console.log(`${available.length} previewable component(s):`);
-    for (const name of available) console.log(`  ${name}`);
-    console.log();
-    console.log("Open one with: bf preview <component>");
-    return;
-  }
-  let runPreview = null;
-  try {
-    const specifier = ["..", "..", "..", "preview", "src", "index"].join("/");
-    const mod = await import(specifier);
-    runPreview = mod.runPreview;
-  } catch {
+    const clientJs = result.files.find((f) => f.type === "clientJs")?.content;
+    if (!clientJs) continue;
+    const key = relative3(rootDir, filePath).replace(/\.tsx$/, "");
+    clientJsByKey.set(key, clientJs);
+    if (isPreview) previewProducedClientJs = true;
   }
-  if (!runPreview) {
-    console.error("bf preview is not available in the npm distribution yet.");
-    console.error("Tracking issue: https://github.com/piconic-ai/barefootjs/issues/885");
-    console.error("Workaround: run the barefootjs monorepo locally with bun.");
-    process.exit(1);
+  if (!previewProducedClientJs) {
+    throw new Error(
+      `Preview ${previewKey} produced no client JS. Each preview function must return a single root element (wrap multiple roots in <>...</>).`
+    );
   }
-  await runPreview(component);
+  const combined = combineParentChildClientJs(clientJsByKey);
+  const allModules = new Map([...clientJsByKey, ...combined]);
+  for (const [key, content] of allModules) {
+    const safeName = key.replace(/[/\\]/g, "__") + ".js";
+    await writeFile2(resolve6(MODULES_DIR, safeName), content);
+  }
+  const previewModuleFile = previewKey.replace(/[/\\]/g, "__") + ".js";
+  const entrySource = generateEntryScript(previewModuleFile, previewNames);
+  const entryPath = resolve6(DIST_DIR, "_entry.js");
+  await writeFile2(entryPath, entrySource);
+  console.log("Bundling for browser...");
+  await build2({
+    entryPoints: [entryPath],
+    outfile: resolve6(DIST_DIR, "_bundle.js"),
+    bundle: true,
+    format: "esm",
+    platform: "browser",
+    minify: false,
+    sourcemap: "inline",
+    absWorkingDir: rootDir,
+    alias: { "@barefootjs/client/runtime": runtimeStandalone },
+    define: { "process.env.NODE_ENV": '"development"' }
+  });
+  console.log("Generated: .preview-dist/_bundle.js");
+  await writeFile2(resolve6(DIST_DIR, "index.html"), generateHTML(componentName, liveReload));
+  console.log("Generated: .preview-dist/index.html");
+  return { distDir: DIST_DIR };
 }
-var init_preview = __esm({
-  "src/commands/preview.ts"() {
-    "use strict";
-    init_scaffold_layout();
-  }
-});
+function generateEntryScript(previewModuleFile, previewNames) {
+  const namesJson = JSON.stringify(previewNames);
+  return `import { render } from '@barefootjs/client/runtime'
+import './_modules/${previewModuleFile}'
+
+const previews = ${namesJson}
+const app = document.getElementById('preview-root')
+
+for (const name of previews) {
+  const section = document.createElement('div')
+  section.className = 'preview-section'
+  section.dataset.preview = name
+
+  const title = document.createElement('div')
+  title.className = 'preview-title'
+  title.textContent = name.replace(/([a-z])([A-Z])/g, '$1 $2')
+  section.appendChild(title)
+
+  const content = document.createElement('div')
+  section.appendChild(content)
+  app.appendChild(section)
 
-// src/commands/tokens-apply.ts
-var tokens_apply_exports = {};
-__export(tokens_apply_exports, {
-  applyCssOverrides: () => applyCssOverrides,
-  applyTokenOverrides: () => applyTokenOverrides,
-  parseStudioUrl: () => parseStudioUrl,
-  resolveTokensCss: () => resolveTokensCss,
-  run: () => run9
-});
-import { existsSync as existsSync13, readFileSync as readFileSync6, writeFileSync as writeFileSync4 } from "fs";
-import path17 from "path";
-async function run9(args2, ctx2) {
-  const url = args2[0];
-  if (!url) {
-    console.error("Error: tokens apply requires a Studio URL.");
-    console.error("Usage: bf tokens apply <url>");
-    process.exit(1);
-  }
-  const projectDir = ctx2.projectDir ?? process.cwd();
-  const tokensRelDir = ctx2.config?.paths.tokens ?? "tokens";
-  const studioConfig = parseStudioUrl(url);
-  if (!studioConfig) {
-    console.error("Error: could not decode Studio config from the URL (no `?c=` param or malformed payload).");
-    process.exit(1);
-  }
-  const cssPath = resolveTokensCss(projectDir, tokensRelDir);
-  if (!cssPath) {
-    console.error("Error: tokens.css not found. Checked:");
-    for (const p of candidateCssPaths(projectDir, tokensRelDir)) {
-      console.error(`  - ${path17.relative(projectDir, p)}`);
-    }
-    console.error("       Run `npm create barefootjs@latest` to scaffold a project first.");
-    process.exit(1);
-  }
-  applyCssOverrides(cssPath, studioConfig);
-  console.log(`  Patched ${path17.relative(projectDir, cssPath)}`);
-  const tokensJsonPath = path17.join(projectDir, tokensRelDir, "tokens.json");
-  if (existsSync13(tokensJsonPath)) {
-    applyTokenOverrides(tokensJsonPath, studioConfig);
-    console.log(`  Patched ${path17.relative(projectDir, tokensJsonPath)}`);
-  }
-}
-function parseStudioUrl(url) {
   try {
-    const parsed = new URL(url);
-    const encoded = parsed.searchParams.get("c");
-    if (!encoded) return void 0;
-    const json = atob(decodeURIComponent(encoded));
-    return JSON.parse(json);
-  } catch {
-    return void 0;
+    render(content, name, {})
+  } catch (err) {
+    content.textContent = 'Render error: ' + (err && err.message || err)
+    console.error('[preview]', name, err)
   }
 }
-function candidateCssPaths(projectDir, tokensRelDir) {
-  return [
-    path17.join(projectDir, tokensRelDir, "tokens.css"),
-    path17.join(projectDir, "public", "tokens.css"),
-    path17.join(projectDir, "static", "tokens.css")
-  ];
+`;
 }
-function resolveTokensCss(projectDir, tokensRelDir) {
-  for (const p of candidateCssPaths(projectDir, tokensRelDir)) {
-    if (existsSync13(p)) return p;
-  }
-  return void 0;
+function generateHTML(componentName, liveReload = false) {
+  const displayName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${displayName} \u2014 Preview</title>
+  <link rel="stylesheet" href="/globals.css" />
+  <link rel="stylesheet" href="/uno.css" />
+  <style>
+    body {
+      padding: 2rem;
+      font-family: system-ui, -apple-system, sans-serif;
+    }
+    .preview-section {
+      margin-bottom: 2rem;
+      padding: 1.5rem;
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+    }
+    .preview-title {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--muted-foreground);
+      margin-bottom: 1rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    h1 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin-bottom: 1.5rem;
+    }
+    #bf-theme-toggle {
+      position: fixed;
+      bottom: 1rem;
+      right: 1rem;
+      z-index: 9999;
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: var(--radius);
+      border: 1px solid var(--border);
+      background: var(--card);
+      color: var(--foreground);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      box-shadow: 0 1px 3px rgba(0,0,0,.1);
+    }
+    #bf-theme-toggle:hover { background: var(--accent); }
+    #bf-theme-toggle .sun { display: none; }
+    #bf-theme-toggle .moon { display: block; }
+    .dark #bf-theme-toggle .sun { display: block; }
+    .dark #bf-theme-toggle .moon { display: none; }
+  </style>
+</head>
+<body>
+  <h1>${displayName}</h1>
+  <div id="preview-root"></div>
+  <button id="bf-theme-toggle" type="button" aria-label="Toggle dark mode"
+    onclick="var r=document.documentElement;r.classList.add('theme-transition');r.classList.toggle('dark');setTimeout(function(){r.classList.remove('theme-transition')},300)">
+    <svg class="sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="4"></circle>
+      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path>
+    </svg>
+    <svg class="moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+    </svg>
+  </button>
+  <script type="module" src="/_bundle.js"></script>
+  ${liveReload ? LIVE_RELOAD_SCRIPT : ""}
+</body>
+</html>`;
 }
-function buildBlockOverrides(config) {
-  const root = {};
-  const dark = {};
-  if (config.spacing) root["--spacing"] = config.spacing;
-  if (config.radius) root["--radius"] = config.radius;
-  if (config.font) {
-    root["--font-sans"] = FONT_MAP[config.font] ?? config.font;
-  }
-  if (config.style) {
-    const preset = SHADOW_PRESETS[config.style];
-    if (preset) {
-      for (const [name, value] of Object.entries(preset)) {
-        root[`--${name}`] = value;
+var EMPTY_OUTPUT, PreviewCsrAdapter, LIVE_RELOAD_SCRIPT;
+var init_compile = __esm({
+  "src/lib/preview/compile.ts"() {
+    "use strict";
+    init_src2();
+    init_dependency_resolver();
+    EMPTY_OUTPUT = Object.freeze({
+      template: "",
+      sections: Object.freeze({ imports: "", types: "", component: "", defaultExport: "" }),
+      extension: ".tsx"
+    });
+    PreviewCsrAdapter = class extends BaseAdapter {
+      name = "csr";
+      extension = ".tsx";
+      acceptsTemplateCall = () => true;
+      generate() {
+        return EMPTY_OUTPUT;
+      }
+      renderNode() {
+        return "";
       }
-    }
-  }
-  if (config.tokens) {
-    for (const [name, values] of Object.entries(config.tokens)) {
-      if (values.light !== void 0) root[`--${name}`] = values.light;
-      if (values.dark !== void 0) dark[`--${name}`] = values.dark;
-    }
-  }
-  return { root, dark };
-}
-function applyCssOverrides(cssPath, config) {
-  const overrides = buildBlockOverrides(config);
-  let css = readFileSync6(cssPath, "utf-8");
-  css = patchBlock(css, /:root\s*\{/, overrides.root);
-  css = patchBlock(css, /\.dark\s*\{/, overrides.dark);
-  writeFileSync4(cssPath, css);
-}
-function patchBlock(css, openRe, overrides) {
-  if (Object.keys(overrides).length === 0) return css;
-  const openMatch = openRe.exec(css);
-  if (!openMatch) return css;
-  const blockStart = openMatch.index + openMatch[0].length;
-  let depth = 1;
-  let blockEnd = -1;
-  for (let i = blockStart; i < css.length; i++) {
-    const ch = css[i];
-    if (ch === "{") depth++;
-    else if (ch === "}") {
-      depth--;
-      if (depth === 0) {
-        blockEnd = i;
-        break;
-      }
-    }
-  }
-  if (blockEnd === -1) return css;
-  let block = css.slice(blockStart, blockEnd);
-  const toAppend = [];
-  for (const [name, value] of Object.entries(overrides)) {
-    const re = new RegExp(`(${escapeRegex2(name)}\\s*:\\s*)[^;]+(;)`);
-    if (re.test(block)) {
-      block = block.replace(re, `$1${value}$2`);
-    } else {
-      toAppend.push([name, value]);
-    }
-  }
-  if (toAppend.length > 0) {
-    const lines = toAppend.map(([n, v]) => `  ${n}: ${v};`).join("\n");
-    const trailing = block.match(/\s*$/)?.[0] ?? "";
-    block = block.slice(0, block.length - trailing.length) + `
-
-  /* \u2500\u2500 Studio overrides \u2500\u2500 */
-${lines}
-`;
-  }
-  return css.slice(0, blockStart) + block + css.slice(blockEnd);
-}
-function escapeRegex2(s) {
-  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-function applyTokenOverrides(tokensJsonPath, config) {
-  const raw = readFileSync6(tokensJsonPath, "utf-8");
-  const tokensData = JSON.parse(raw);
-  if (config.tokens) {
-    for (const [name, values] of Object.entries(config.tokens)) {
-      applyColorOverride(tokensData, name, values);
-    }
-  }
-  if (config.spacing) {
-    applySimpleOverride(tokensData, "--spacing", config.spacing);
-  }
-  if (config.radius) {
-    applySimpleOverride(tokensData, "--radius", config.radius);
-  }
-  if (config.font) {
-    const fontValue = FONT_MAP[config.font] || config.font;
-    applySimpleOverride(tokensData, "--font-sans", fontValue);
-  }
-  if (config.style) {
-    applyShadowPreset(tokensData, config.style);
-  }
-  writeFileSync4(tokensJsonPath, JSON.stringify(tokensData, null, 2) + "\n");
-}
-function applyColorOverride(tokensData, name, values) {
-  const varName = `--${name}`;
-  if (Array.isArray(tokensData.colors)) {
-    for (const token of tokensData.colors) {
-      if (token.name === varName || token.name === name) {
-        if (values.light) token.value = values.light;
-        if (values.dark) token.dark = values.dark;
-        return;
-      }
-    }
-  }
-  if (Array.isArray(tokensData.tokens)) {
-    for (const token of tokensData.tokens) {
-      if (token.name === varName || token.name === name) {
-        if (values.light) token.value = values.light;
-        if (values.dark) token.dark = values.dark;
-        return;
-      }
-    }
-  }
-}
-function applySimpleOverride(tokensData, name, value) {
-  const bareName = name.startsWith("--") ? name.slice(2) : name;
-  const sections = [
-    tokensData.colors,
-    tokensData.spacing,
-    tokensData.borderRadius,
-    tokensData.shadows,
-    tokensData.layout
-  ];
-  if (tokensData.typography) {
-    for (const arr of Object.values(tokensData.typography)) {
-      if (Array.isArray(arr)) sections.push(arr);
-    }
-  }
-  for (const arr of sections) {
-    if (!Array.isArray(arr)) continue;
-    for (const token of arr) {
-      if (token.name === bareName || token.name === name) {
-        token.value = value;
-        return;
-      }
-    }
-  }
-}
-function applyShadowPreset(tokensData, styleName) {
-  const shadows = SHADOW_PRESETS[styleName];
-  if (!shadows) return;
-  for (const [name, value] of Object.entries(shadows)) {
-    applySimpleOverride(tokensData, name, value);
-  }
-}
-var FONT_MAP, SHADOW_PRESETS;
-var init_tokens_apply = __esm({
-  "src/commands/tokens-apply.ts"() {
-    "use strict";
-    FONT_MAP = {
-      system: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
-      inter: '"Inter", sans-serif',
-      "noto-sans": '"Noto Sans", sans-serif',
-      "nunito-sans": '"Nunito Sans", sans-serif',
-      figtree: '"Figtree", sans-serif'
-    };
-    SHADOW_PRESETS = {
-      Sharp: {
-        "shadow-sm": "0 1px 2px 0 rgb(0 0 0 / 0.04)",
-        "shadow": "0 1px 2px 0 rgb(0 0 0 / 0.06)",
-        "shadow-md": "0 2px 4px -1px rgb(0 0 0 / 0.08)",
-        "shadow-lg": "0 4px 8px -2px rgb(0 0 0 / 0.1)"
-      },
-      Soft: {
-        "shadow-sm": "0 1px 3px 0 rgb(0 0 0 / 0.06)",
-        "shadow": "0 2px 6px 0 rgb(0 0 0 / 0.08), 0 1px 3px -1px rgb(0 0 0 / 0.06)",
-        "shadow-md": "0 6px 12px -2px rgb(0 0 0 / 0.08), 0 3px 6px -3px rgb(0 0 0 / 0.06)",
-        "shadow-lg": "0 12px 24px -4px rgb(0 0 0 / 0.08), 0 6px 10px -5px rgb(0 0 0 / 0.06)"
-      },
-      Compact: {
-        "shadow-sm": "none",
-        "shadow": "none",
-        "shadow-md": "none",
-        "shadow-lg": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
-      }
-    };
+      renderElement() {
+        return "";
+      }
+      renderExpression() {
+        return "";
+      }
+      renderConditional() {
+        return "";
+      }
+      renderLoop() {
+        return "";
+      }
+      renderComponent() {
+        return "";
+      }
+      renderScopeMarker() {
+        return "";
+      }
+      renderSlotMarker() {
+        return "";
+      }
+      renderCondMarker() {
+        return "";
+      }
+    };
+    LIVE_RELOAD_SCRIPT = `<script>
+(function(){var seen;function poll(){fetch('/__preview_reload').then(function(r){return r.text()}).then(function(v){if(seen!==undefined&&v!==seen){location.reload();return}seen=v}).catch(function(){}).then(function(){setTimeout(poll,1000)})}poll()})()
+</script>`;
   }
 });
 
-// src/commands/tokens.ts
-var tokens_exports = {};
-__export(tokens_exports, {
-  run: () => run10
-});
-import { readFile as readFile2 } from "node:fs/promises";
-import { existsSync as existsSync14 } from "node:fs";
-import { resolve as resolve6, dirname as dirname4 } from "node:path";
+// src/lib/tokens.ts
+import { readFile as readFile3 } from "node:fs/promises";
+import { existsSync as existsSync13 } from "node:fs";
+import { resolve as resolve7, dirname as dirname4 } from "node:path";
 import { fileURLToPath as fileURLToPath4 } from "node:url";
 async function loadTokens(jsonPath) {
-  const content = await readFile2(jsonPath, "utf-8");
+  const content = await readFile3(jsonPath, "utf-8");
   return JSON.parse(content);
 }
 function mergeTokenSets(...sets) {
@@ -24874,26 +25104,64 @@ function mergeTokenSets(...sets) {
 function mergeTokenArray(base, ext) {
   for (const token of ext) {
     const idx = base.findIndex((t) => t.name === token.name);
-    if (idx >= 0) {
-      base[idx] = token;
-    } else {
-      base.push(token);
-    }
-  }
+    if (idx >= 0) base[idx] = token;
+    else base.push(token);
+  }
+}
+function generateCSS(tokenSet) {
+  const rootLines = [];
+  const darkLines = [];
+  function addSection(label, tokens) {
+    if (tokens.length === 0) return;
+    rootLines.push(`  /* \u2500\u2500 ${label} ${"\u2500".repeat(Math.max(1, 50 - label.length))} */`);
+    for (const t of tokens) rootLines.push(`  --${t.name}: ${t.value};`);
+    rootLines.push("");
+  }
+  function addColorSection(tokens) {
+    if (tokens.length === 0) return;
+    rootLines.push(`  /* \u2500\u2500 Colors (OKLCH, neutral theme) ${"\u2500".repeat(15)} */`);
+    for (const t of tokens) rootLines.push(`  --${t.name}: ${t.value};`);
+    rootLines.push("");
+    for (const t of tokens.filter((t2) => t2.dark)) {
+      darkLines.push(`  --${t.name}: ${t.dark};`);
+    }
+  }
+  addSection("Typography", [...tokenSet.typography.fontFamily, ...tokenSet.typography.letterSpacing]);
+  addSection("Spacing scale", tokenSet.spacing);
+  addSection("Border radius", tokenSet.borderRadius);
+  addSection("Transitions", [...tokenSet.transitions.duration, ...tokenSet.transitions.easing]);
+  addSection("Layout", tokenSet.layout);
+  addColorSection(tokenSet.colors);
+  addSection("Shadows", tokenSet.shadows);
+  const header = `/**
+ * AUTO-GENERATED \u2014 Do not edit manually.
+ * Generated from tokens.json.
+ *
+ * BarefootJS Design Tokens
+ */`;
+  let css = `${header}
+
+:root {
+${rootLines.join("\n")}}
+`;
+  if (darkLines.length > 0) css += `
+.dark {
+${darkLines.join("\n")}
+}
+`;
+  return css;
 }
 function findBaseTokensJson(ctx2) {
-  const monorepoTokens = resolve6(ctx2.root, "site/shared/tokens/tokens.json");
-  if (existsSync14(monorepoTokens)) return monorepoTokens;
-  const bundledTokens = resolve6(dirname4(thisFile2), "tokens.json");
-  if (existsSync14(bundledTokens)) return bundledTokens;
+  const monorepoTokens = resolve7(ctx2.root, "site/shared/tokens/tokens.json");
+  if (existsSync13(monorepoTokens)) return monorepoTokens;
+  const bundledTokens = resolve7(dirname4(thisFile2), "tokens.json");
+  if (existsSync13(bundledTokens)) return bundledTokens;
   return null;
 }
 async function loadTokenSet(ctx2) {
   if (ctx2.projectDir && ctx2.config?.paths.tokens) {
-    const userTokens = resolve6(ctx2.projectDir, ctx2.config.paths.tokens, "tokens.json");
-    if (await fileExists(userTokens)) {
-      return loadTokens(userTokens);
-    }
+    const userTokens = resolve7(ctx2.projectDir, ctx2.config.paths.tokens, "tokens.json");
+    if (await fileExists(userTokens)) return loadTokens(userTokens);
   }
   const basePath = findBaseTokensJson(ctx2);
   if (!basePath) {
@@ -24902,1045 +25170,1679 @@ async function loadTokenSet(ctx2) {
     );
   }
   const base = await loadTokens(basePath);
-  const uiJsonPath = resolve6(ctx2.root, "site/ui/tokens.json");
+  const uiJsonPath = resolve7(ctx2.root, "site/ui/tokens.json");
   if (await fileExists(uiJsonPath)) {
-    const ext = await loadTokens(uiJsonPath);
-    return mergeTokenSets(base, ext);
+    return mergeTokenSets(base, await loadTokens(uiJsonPath));
   }
   return base;
 }
-function flattenTokens(tokenSet, category) {
-  const result = [];
-  function add(cat, tokens) {
-    if (category && category !== cat) return;
-    result.push(...tokens);
-  }
-  add("typography", [...tokenSet.typography.fontFamily, ...tokenSet.typography.letterSpacing]);
-  add("spacing", tokenSet.spacing);
-  add("borderRadius", tokenSet.borderRadius);
-  add("transitions", [...tokenSet.transitions.duration, ...tokenSet.transitions.easing]);
-  add("layout", tokenSet.layout);
-  add("colors", tokenSet.colors);
-  add("shadows", tokenSet.shadows);
-  return result;
-}
-function printTokens(tokens, jsonFlag2) {
-  if (jsonFlag2) {
-    console.log(JSON.stringify(tokens, null, 2));
-    return;
-  }
-  if (tokens.length === 0) {
-    console.log("No tokens found.");
-    return;
-  }
-  const nameWidth = Math.max(25, ...tokens.map((t) => t.name.length + 4));
-  const header = `${"NAME".padEnd(nameWidth)}VALUE`;
-  console.log(header);
-  console.log("-".repeat(header.length + 20));
-  for (const t of tokens) {
-    const name = `--${t.name}`;
-    const dark = t.dark;
-    const darkSuffix = dark ? `  (dark: ${dark})` : "";
-    console.log(`${name.padEnd(nameWidth)}${t.value}${darkSuffix}`);
-  }
-  console.log(`
-${tokens.length} token(s)`);
-}
-async function run10(args2, ctx2) {
-  let category;
-  const catIdx = args2.indexOf("--category");
-  if (catIdx >= 0 && args2[catIdx + 1]) {
-    const val = args2[catIdx + 1];
-    if (!CATEGORY_NAMES.includes(val)) {
-      console.error(`Unknown category: ${val}`);
-      console.error(`Available: ${CATEGORY_NAMES.join(", ")}`);
-      process.exit(1);
-    }
-    category = val;
-  }
-  const tokenSet = await loadTokenSet(ctx2);
-  const tokens = flattenTokens(tokenSet, category);
-  printTokens(tokens, ctx2.jsonFlag);
+async function loadTokensCss(ctx2) {
+  return generateCSS(await loadTokenSet(ctx2));
 }
-var thisFile2, CATEGORY_NAMES;
+var thisFile2;
 var init_tokens = __esm({
-  "src/commands/tokens.ts"() {
+  "src/lib/tokens.ts"() {
     "use strict";
     init_runtime();
     thisFile2 = fileURLToPath4(import.meta.url);
-    CATEGORY_NAMES = [
-      "typography",
-      "spacing",
-      "borderRadius",
-      "transitions",
-      "layout",
-      "colors",
-      "shadows"
-    ];
   }
 });
 
-// src/lib/scaffold.ts
-import { readFileSync as readFileSync7, existsSync as existsSync15 } from "fs";
-import path18 from "path";
-function loadMeta(metaDir, name) {
-  const filePath = path18.join(metaDir, `${name}.json`);
-  if (!existsSync15(filePath)) return null;
-  return JSON.parse(readFileSync7(filePath, "utf-8"));
-}
-function toPascalCase(kebab) {
-  return kebab.split("-").map((w) => w[0].toUpperCase() + w.slice(1)).join("");
+// src/lib/preview/errors.ts
+var PreviewError;
+var init_errors2 = __esm({
+  "src/lib/preview/errors.ts"() {
+    "use strict";
+    PreviewError = class extends Error {
+    };
+  }
+});
+
+// src/lib/preview/assets.ts
+import { existsSync as existsSync14 } from "node:fs";
+import { readFile as readFile4 } from "node:fs/promises";
+import { resolve as resolve8, dirname as dirname5 } from "node:path";
+import { fileURLToPath as fileURLToPath5 } from "node:url";
+function firstExisting(...candidates) {
+  return candidates.find((c) => !!c && existsSync14(c));
 }
-function toCamelCase(kebab) {
-  const pascal = toPascalCase(kebab);
-  return pascal[0].toLowerCase() + pascal.slice(1);
+function unoBinCandidates(dir) {
+  return ["unocss", "unocss.cmd", "unocss.CMD"].map((n) => resolve8(dir, "node_modules/.bin", n));
 }
-function scaffold(componentName, useComponents, metaDir, componentsBasePath = "ui/components/ui", options = {}) {
-  const metas = useComponents.map((name) => ({ name, meta: loadMeta(metaDir, name) }));
-  const found = metas.filter((m) => m.meta !== null);
-  const notFound = metas.filter((m) => m.meta === null).map((m) => m.name);
-  const needsClient = found.some((m) => m.meta.stateful);
-  const imports = buildImports(found);
-  const componentCode = generateComponentCode(componentName, imports, needsClient, notFound);
-  const testCode = generateTestCode(componentName, needsClient, options.testImportSource ?? "bun:test");
-  const basePath = `${componentsBasePath}/${componentName}`;
+async function resolvePreviewAssets(ctx2) {
+  const monorepo = ctx2.config === null;
+  const projectDir = ctx2.projectDir;
+  const rootDir = projectDir ?? ctx2.root;
+  const srcComponentsDir = monorepo ? resolve8(ctx2.root, "ui/components/ui") : resolve8(projectDir, ctx2.config.paths.components);
+  const tokensCss = await loadTokensCss(ctx2);
+  const globalsPath = firstExisting(
+    projectDir && resolve8(projectDir, "styles/globals.css"),
+    projectDir && resolve8(projectDir, "globals.css"),
+    projectDir && resolve8(projectDir, "app/globals.css"),
+    monorepo ? resolve8(ctx2.root, "site/ui/styles/globals.css") : void 0,
+    resolve8(assetDir, "preview-globals.css")
+  );
+  const globalsCss = globalsPath ? await readFile4(globalsPath, "utf-8") : "";
+  const bundledUnoConfig = resolve8(assetDir, "preview-uno.config.ts");
+  const configPath = firstExisting(
+    projectDir && resolve8(projectDir, "uno.config.ts"),
+    projectDir && resolve8(projectDir, "uno.config.js"),
+    monorepo ? resolve8(ctx2.root, "site/ui/uno.config.ts") : void 0,
+    bundledUnoConfig
+  );
+  if (!configPath) {
+    throw new PreviewError(
+      "No UnoCSS config found and the bundled default is missing \u2014 reinstall @barefootjs/cli."
+    );
+  }
+  const unoCwd = monorepo ? resolve8(ctx2.root, "site/ui") : rootDir;
+  const globs = monorepo ? ["../../ui/components/**/*.tsx", "./**/*.tsx", "./dist/**/*.tsx"] : [resolve8(srcComponentsDir, "**/*.tsx")];
+  const unoBin = firstExisting(
+    ...unoBinCandidates(rootDir),
+    ...monorepo ? unoBinCandidates(resolve8(ctx2.root, "site/ui")) : [],
+    ...monorepo ? unoBinCandidates(ctx2.root) : []
+  );
+  if (!unoBin) {
+    throw new PreviewError(
+      "UnoCSS CLI not found. Install it in your project to generate preview styles:\n  npm install -D unocss@^66 @unocss/cli@^66\n(v66 matches the bundled config's presetWind4; older majors won't generate the same utilities.)"
+    );
+  }
+  const runtimeStandalone = firstExisting(
+    monorepo ? resolve8(ctx2.root, "packages/client/dist/runtime/standalone.js") : void 0,
+    resolve8(rootDir, "node_modules/@barefootjs/client/dist/runtime/standalone.js"),
+    resolve8(rootDir, "node_modules/@barefootjs/client/dist/runtime/index.js")
+  );
+  if (!runtimeStandalone) {
+    throw new PreviewError(
+      "The @barefootjs/client runtime was not found. Install @barefootjs/client in your project (its dist must include runtime/standalone.js)."
+    );
+  }
   return {
-    componentCode,
-    testCode,
-    componentPath: `${basePath}/index.tsx`,
-    testPath: `${basePath}/index.test.tsx`
+    rootDir,
+    srcComponentsDir,
+    tokensCss,
+    globalsCss,
+    runtimeStandalone,
+    uno: { bin: unoBin, cwd: unoCwd, configPath, configIsBundled: configPath === bundledUnoConfig, globs }
   };
 }
-function buildImports(components) {
-  const imports = [];
-  for (const { name, meta } of components) {
-    const names = [toPascalCase(name)];
-    if (meta.subComponents) {
-      for (const sub2 of meta.subComponents) {
-        names.push(sub2.name);
-      }
+var assetDir;
+var init_assets = __esm({
+  "src/lib/preview/assets.ts"() {
+    "use strict";
+    init_tokens();
+    init_errors2();
+    assetDir = dirname5(fileURLToPath5(import.meta.url));
+  }
+});
+
+// src/lib/preview-generate.ts
+function toPascalCase(kebab) {
+  return kebab.split("-").map((w) => w[0].toUpperCase() + w.slice(1)).join("");
+}
+function toKebabCase(pascal) {
+  return pascal.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
+}
+function capitalize2(s) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+function inferVariantPropName(typeName, props) {
+  const match = props.find((p) => p.type === typeName);
+  return match ? match.name : null;
+}
+function findExternalTags(code, knownNames) {
+  const external = [];
+  for (const m of code.matchAll(/<([A-Z][a-zA-Z0-9]*)/g)) {
+    if (!knownNames.has(m[1]) && !external.includes(m[1])) {
+      external.push(m[1]);
     }
-    imports.push({ from: `../${name}`, names });
   }
-  return imports;
+  return external;
 }
-function generateComponentCode(componentName, imports, needsClient, notFound) {
-  const pascalName = toPascalCase(componentName);
-  const lines = [];
-  if (needsClient) {
-    lines.push(`"use client"`);
-    lines.push(``);
-    lines.push(`import { createSignal } from '@barefootjs/client'`);
+function resolveExternalTagImport(tag, parentModuleName, parentPascalName) {
+  if (tag.endsWith("Icon")) {
+    return { from: "../icon", name: tag };
   }
-  lines.push(`import type { Child } from '../../../types'`);
-  for (const imp of imports) {
-    lines.push(`import { ${imp.names.join(", ")} } from '${imp.from}'`);
+  if (tag.startsWith(parentPascalName)) {
+    return { from: `../${parentModuleName}`, name: tag };
   }
-  if (notFound.length > 0) {
-    lines.push(``);
-    lines.push(`// WARNING: These components were not found in ui/meta/:`);
-    for (const name of notFound) {
-      lines.push(`// - ${name}`);
-    }
+  return { from: `../${toKebabCase(tag)}`, name: tag };
+}
+function emitJsxReturn(lines, jsx, indent = "  ") {
+  const jsxLines = jsx.split("\n");
+  const tagLines = jsxLines.filter((l) => /^\s*<[A-Za-z]/.test(l));
+  if (tagLines.length === 0) {
+    lines.push(`${indent}return ${jsx}`);
+    return;
   }
-  lines.push(``);
-  lines.push(`interface ${pascalName}Props {`);
-  lines.push(`  /** Additional CSS classes. */`);
-  lines.push(`  className?: string`);
-  lines.push(`  /** Children to render. */`);
-  lines.push(`  children?: Child`);
-  lines.push(`}`);
-  lines.push(``);
-  if (needsClient) {
-    lines.push(`function ${pascalName}(props: ${pascalName}Props) {`);
-    lines.push(`  // TODO: Add signals`);
-    lines.push(`  // const [value, setValue] = createSignal(...)`);
-    lines.push(``);
-    lines.push(`  return (`);
-    lines.push(`    <div data-slot="${componentName}">`);
-    lines.push(`      {/* TODO: Compose components */}`);
-    lines.push(`    </div>`);
-    lines.push(`  )`);
-    lines.push(`}`);
+  const minIndent = Math.min(...tagLines.map((l) => l.match(/^(\s*)/)?.[1].length ?? 0));
+  const rootElements = tagLines.filter((l) => (l.match(/^(\s*)/)?.[1].length ?? 0) === minIndent);
+  const needsFragment = rootElements.length > 1 && !jsx.trim().startsWith("<>");
+  if (jsxLines.length === 1 && !needsFragment) {
+    const singleLineRoots = (jsx.match(/<(?![/])[A-Za-z]/g) ?? []).length;
+    if (singleLineRoots > 1) {
+      lines.push(`${indent}return (<>${jsx}</>)`);
+    } else {
+      lines.push(`${indent}return ${jsx}`);
+    }
   } else {
-    lines.push(`function ${pascalName}({`);
-    lines.push(`  className = '',`);
-    lines.push(`  children,`);
-    lines.push(`  ...props`);
-    lines.push(`}: ${pascalName}Props) {`);
-    lines.push(`  return (`);
-    lines.push(`    <div data-slot="${componentName}" className={className}>`);
-    lines.push(`      {/* TODO: Compose components */}`);
-    lines.push(`      {children}`);
-    lines.push(`    </div>`);
-    lines.push(`  )`);
-    lines.push(`}`);
+    lines.push(`${indent}return (`);
+    if (needsFragment) lines.push(`${indent}  <>`);
+    for (const l of jsxLines) {
+      lines.push(`${indent}  ${needsFragment ? "  " : ""}${l}`);
+    }
+    if (needsFragment) lines.push(`${indent}  </>`);
+    lines.push(`${indent})`);
   }
-  lines.push(``);
-  lines.push(`export { ${pascalName} }`);
-  lines.push(`export type { ${pascalName}Props }`);
-  lines.push(``);
-  return lines.join("\n");
 }
-function generateTestCode(componentName, needsClient, importSource) {
-  const pascalName = toPascalCase(componentName);
-  const varName = toCamelCase(componentName) + "Source";
+function splitExampleCode(code) {
+  const lines = code.split("\n");
+  const firstJsxLine = lines.findIndex((l) => l.trim().startsWith("<"));
+  if (firstJsxLine <= 0) {
+    return { statements: [], jsx: code };
+  }
+  return {
+    statements: lines.slice(0, firstJsxLine).filter((l) => l.trim() !== ""),
+    jsx: lines.slice(firstJsxLine).join("\n")
+  };
+}
+function isSimpleJsx(code) {
+  const trimmed = code.trim();
+  return trimmed.startsWith("<") && !trimmed.includes("createSignal");
+}
+function generatePreview(meta, componentsBasePath = "ui/components/ui") {
+  const pascalName = toPascalCase(meta.name);
+  const hasVariants = meta.variants != null && Object.keys(meta.variants).length > 0;
+  const hasSubComponents = meta.subComponents != null && meta.subComponents.length > 0;
+  let needsClient = meta.stateful || meta.tags.includes("stateful");
+  const exampleCode = hasSubComponents && meta.examples.length > 0 ? meta.examples[0].code : "";
+  if (exampleCode.includes("createSignal")) {
+    needsClient = true;
+  }
+  const needsCreateSignalImport = exampleCode.includes("createSignal");
   const lines = [];
-  lines.push(`import { describe, test, expect } from '${importSource}'`);
-  lines.push(`import { readFileSync } from 'fs'`);
-  lines.push(`import { resolve } from 'path'`);
-  lines.push(`import { renderToTest } from '@barefootjs/test'`);
-  lines.push(``);
-  lines.push(`const ${varName} = readFileSync(resolve(__dirname, 'index.tsx'), 'utf-8')`);
-  lines.push(``);
-  lines.push(`describe('${pascalName}', () => {`);
-  lines.push(`  const result = renderToTest(${varName}, '${componentName}.tsx')`);
-  lines.push(``);
-  lines.push(`  test('has no compiler errors', () => {`);
-  lines.push(`    expect(result.errors).toEqual([])`);
-  lines.push(`  })`);
-  lines.push(``);
-  lines.push(`  test('componentName is ${pascalName}', () => {`);
-  lines.push(`    expect(result.componentName).toBe('${pascalName}')`);
-  lines.push(`  })`);
-  lines.push(``);
+  const previewNames = [];
+  lines.push("// Auto-generated preview. Customize by editing this file.");
   if (needsClient) {
-    lines.push(`  test('isClient is true', () => {`);
-    lines.push(`    expect(result.isClient).toBe(true)`);
-    lines.push(`  })`);
+    lines.push('"use client"');
   }
-  lines.push(``);
-  lines.push(`  test('renders as <div>', () => {`);
-  lines.push(`    expect(result.root.tag).toBe('div')`);
-  lines.push(`  })`);
-  lines.push(``);
-  lines.push(`  test('has data-slot=${componentName}', () => {`);
-  lines.push(`    expect(result.root.props['data-slot']).toBe('${componentName}')`);
-  lines.push(`  })`);
-  lines.push(``);
-  lines.push(`  test('toStructure() shows expected tree', () => {`);
-  lines.push(`    const structure = result.toStructure()`);
-  lines.push(`    expect(structure.length).toBeGreaterThan(0)`);
-  lines.push(`  })`);
-  lines.push(`})`);
-  lines.push(``);
-  return lines.join("\n");
-}
-var init_scaffold = __esm({
-  "src/lib/scaffold.ts"() {
-    "use strict";
+  lines.push("");
+  if (needsCreateSignalImport) {
+    lines.push("import { createSignal } from '@barefootjs/client'");
   }
-});
-
-// src/commands/gen-component.ts
-var gen_component_exports = {};
-__export(gen_component_exports, {
-  run: () => run11
-});
-import { writeFileSync as writeFileSync5, mkdirSync as mkdirSync4, existsSync as existsSync16 } from "fs";
-import path19 from "path";
-function run11(args2, ctx2) {
-  if (args2.length < 1) {
-    console.error("Usage: bf gen component <component-name> [use-component1] [use-component2] ...");
-    console.error("Example: bf gen component settings-form input switch button");
-    process.exit(1);
+  const subNames = [];
+  if (hasSubComponents) {
+    for (const sub2 of meta.subComponents) {
+      subNames.push(sub2.name);
+    }
   }
-  const [componentName, ...useComponents] = args2;
-  const { writeRoot, componentsBasePath } = resolveScaffoldLayout(ctx2);
-  const pm = detectPackageManager(ctx2.projectDir ?? ctx2.root);
-  const runner = testRunnerFor(pm);
-  const result = scaffold(componentName, useComponents, ctx2.metaDir, componentsBasePath, {
-    testImportSource: runner.importSource
-  });
-  const componentAbsPath = path19.join(writeRoot, result.componentPath);
-  if (existsSync16(componentAbsPath)) {
-    console.error(`Error: ${result.componentPath} already exists. Delete it first or choose a different name.`);
-    process.exit(1);
+  const importsBySource = /* @__PURE__ */ new Map();
+  const moduleNames = [pascalName, ...subNames];
+  if (hasSubComponents && exampleCode) {
+    const allTags = [...exampleCode.matchAll(/<([A-Z][a-zA-Z0-9]*)/g)].map((m) => m[1]);
+    const usedFromModule = [...new Set(allTags.filter((t) => moduleNames.includes(t)))];
+    if (usedFromModule.length > 0) {
+      importsBySource.set(`../${meta.name}`, usedFromModule);
+    }
+    const knownNames = new Set(moduleNames);
+    for (const tag of findExternalTags(exampleCode, knownNames)) {
+      const resolved = resolveExternalTagImport(tag, meta.name, pascalName);
+      const list = importsBySource.get(resolved.from) ?? [];
+      if (!list.includes(resolved.name)) list.push(resolved.name);
+      importsBySource.set(resolved.from, list);
+    }
+  } else {
+    importsBySource.set(`../${meta.name}`, moduleNames);
   }
-  const testAbsPath = path19.join(writeRoot, result.testPath);
-  const testDir = path19.dirname(testAbsPath);
-  if (!existsSync16(testDir)) {
-    mkdirSync4(testDir, { recursive: true });
+  for (const [from, names] of importsBySource) {
+    lines.push(`import { ${names.join(", ")} } from '${from}'`);
   }
-  writeFileSync5(componentAbsPath, result.componentCode);
-  writeFileSync5(testAbsPath, result.testCode);
-  const testCmd = commandsFor(pm).test(result.testPath);
-  console.log(`Created:`);
-  console.log(`  ${result.componentPath}`);
-  console.log(`  ${result.testPath}`);
-  console.log(``);
-  console.log(`Next steps:`);
-  console.log(`  1. Implement the component in ${result.componentPath}`);
-  console.log(`  2. ${testCmd}`);
-  console.log(`  3. bf gen test ${componentName}  (regenerate richer test)`);
-}
-var init_gen_component = __esm({
-  "src/commands/gen-component.ts"() {
-    "use strict";
-    init_scaffold();
-    init_scaffold_layout();
-    init_pm();
+  lines.push("");
+  if (hasSubComponents) {
+    generateMultiComponent(lines, previewNames, meta, pascalName, subNames);
+  } else if (needsClient && hasVariants) {
+    generateStatefulWithVariants(lines, previewNames, meta, pascalName);
+  } else if (needsClient) {
+    generateStateful(lines, previewNames, meta, pascalName);
+  } else if (hasVariants) {
+    generateStatelessWithVariants(lines, previewNames, meta, pascalName);
+  } else {
+    generateStatelessSimple(lines, previewNames, meta, pascalName);
   }
-});
-
-// src/lib/parse-component.ts
-function parseComponent(source) {
+  lines.push("");
   return {
-    useClient: detectUseClient(source),
-    description: extractTopLevelDescription(source),
-    examples: extractExamples2(source),
-    props: extractMainProps2(source),
-    subComponents: extractSubComponents2(source),
-    variants: extractVariants2(source),
-    accessibility: extractAccessibility2(source),
-    dependencies: extractDependencies3(source),
-    exportedNames: extractExportedNames(source)
+    code: lines.join("\n"),
+    previewNames,
+    filePath: `${componentsBasePath}/${meta.name}/index.preview.tsx`
   };
 }
-function detectUseClient(source) {
-  const firstLine = source.split("\n")[0].trim();
-  return firstLine === '"use client"' || firstLine === "'use client'";
+function generateStatelessWithVariants(lines, previewNames, meta, pascalName) {
+  previewNames.push("Default");
+  lines.push("export function Default() {");
+  lines.push(`  return <${pascalName}>${meta.title}</${pascalName}>`);
+  lines.push("}");
+  lines.push("");
+  for (const [typeName, values] of Object.entries(meta.variants)) {
+    const propName = inferVariantPropName(typeName, meta.props);
+    if (!propName) continue;
+    const funcName = capitalize2(propName) + "s";
+    previewNames.push(funcName);
+    lines.push(`export function ${funcName}() {`);
+    lines.push("  return (");
+    lines.push('    <div className="flex flex-wrap items-center gap-4">');
+    for (const value of values) {
+      lines.push(`      <${pascalName} ${propName}="${value}">${capitalize2(value)}</${pascalName}>`);
+    }
+    lines.push("    </div>");
+    lines.push("  )");
+    lines.push("}");
+    lines.push("");
+  }
+}
+function generateStatelessSimple(lines, previewNames, meta, pascalName) {
+  previewNames.push("Default");
+  lines.push("export function Default() {");
+  const simpleExample = meta.examples.find((e) => isSimpleJsx(e.code));
+  if (simpleExample) {
+    emitJsxReturn(lines, simpleExample.code);
+  } else {
+    const hasChildren = meta.props.some((p) => p.name === "children");
+    if (hasChildren) {
+      lines.push(`  return <${pascalName}>${meta.title}</${pascalName}>`);
+    } else {
+      lines.push(`  return <${pascalName} />`);
+    }
+  }
+  lines.push("}");
+  lines.push("");
+}
+function generateStateful(lines, previewNames, meta, pascalName) {
+  previewNames.push("Default");
+  lines.push("export function Default() {");
+  lines.push("  return (");
+  lines.push('    <div className="flex gap-4">');
+  lines.push(`      <${pascalName} />`);
+  const defaultStateProp = meta.props.find(
+    (p) => p.name === "defaultChecked" || p.name === "defaultPressed" || p.name === "defaultValue" || p.name === "defaultOpen"
+  );
+  if (defaultStateProp) {
+    lines.push(`      <${pascalName} ${defaultStateProp.name} />`);
+  }
+  if (meta.props.some((p) => p.name === "disabled")) {
+    lines.push(`      <${pascalName} disabled />`);
+  }
+  lines.push("    </div>");
+  lines.push("  )");
+  lines.push("}");
+  lines.push("");
+}
+function generateStatefulWithVariants(lines, previewNames, meta, pascalName) {
+  generateStateful(lines, previewNames, meta, pascalName);
+  const hasChildren = meta.props.some((p) => p.name === "children");
+  for (const [typeName, values] of Object.entries(meta.variants)) {
+    const propName = inferVariantPropName(typeName, meta.props);
+    if (!propName) continue;
+    const funcName = capitalize2(propName) + "s";
+    previewNames.push(funcName);
+    lines.push(`export function ${funcName}() {`);
+    lines.push("  return (");
+    lines.push('    <div className="flex flex-wrap items-center gap-4">');
+    for (const value of values) {
+      if (hasChildren) {
+        lines.push(`      <${pascalName} ${propName}="${value}">${capitalize2(value)}</${pascalName}>`);
+      } else {
+        lines.push(`      <${pascalName} ${propName}="${value}" />`);
+      }
+    }
+    lines.push("    </div>");
+    lines.push("  )");
+    lines.push("}");
+    lines.push("");
+  }
+}
+function generateMultiComponent(lines, previewNames, meta, pascalName, _subNames) {
+  previewNames.push("Default");
+  if (meta.examples.length > 0) {
+    const example = meta.examples[0];
+    const { statements, jsx } = splitExampleCode(example.code);
+    lines.push("export function Default() {");
+    for (const stmt of statements) {
+      lines.push(`  ${stmt}`);
+    }
+    const definedNames = new Set(
+      statements.flatMap((s) => [...s.matchAll(/\b(?:const|let|var)\s+(?:\[([^\]]+)\]|(\w+))/g)]).flatMap((m) => m[1] ? m[1].split(",").map((v) => v.trim()) : [m[2]])
+    );
+    const handlerRefs = [...new Set([...jsx.matchAll(/\b(handle[A-Z]\w*)\b/g)].map((m) => m[1]))];
+    for (const h of handlerRefs) {
+      if (!definedNames.has(h)) {
+        lines.push(`  const ${h} = () => {}`);
+      }
+    }
+    if (statements.length > 0 || handlerRefs.length > 0) {
+      lines.push("");
+    }
+    emitJsxReturn(lines, jsx);
+    lines.push("}");
+  } else {
+    lines.push("export function Default() {");
+    lines.push("  return (");
+    lines.push(`    <${pascalName}>`);
+    for (const sub2 of meta.subComponents) {
+      const hasChildrenProp = sub2.props.some((p) => p.name === "children");
+      const label = sub2.name.replace(pascalName, "") || sub2.name;
+      if (hasChildrenProp) {
+        lines.push(`      <${sub2.name}>${label}</${sub2.name}>`);
+      } else {
+        lines.push(`      <${sub2.name} />`);
+      }
+    }
+    lines.push(`    </${pascalName}>`);
+    lines.push("  )");
+    lines.push("}");
+  }
+  lines.push("");
+}
+var init_preview_generate = __esm({
+  "src/lib/preview-generate.ts"() {
+    "use strict";
+  }
+});
+
+// src/lib/preview/run.ts
+import { resolve as resolve9, relative as relative4 } from "node:path";
+import { readFileSync as readFileSync6, writeFileSync as writeFileSync4, existsSync as existsSync15 } from "node:fs";
+async function runPreview(componentName, ctx2, opts = {}) {
+  const assets = await resolvePreviewAssets(ctx2);
+  const previewsPath = resolve9(assets.srcComponentsDir, componentName, "index.preview.tsx");
+  if (!existsSync15(previewsPath)) {
+    try {
+      const meta = loadComponent(ctx2.metaDir, componentName);
+      const result = generatePreview(meta);
+      writeFileSync4(previewsPath, result.code);
+      console.log(`Auto-generated preview: ${relative4(assets.rootDir, previewsPath)}`);
+    } catch {
+      throw new PreviewError(
+        `Preview file not found and auto-generation failed for "${componentName}".
+Run: bf gen preview ${componentName}`
+      );
+    }
+  }
+  const source = readFileSync6(previewsPath, "utf-8");
+  const previewNames = [
+    ...source.matchAll(/export\s+(?:async\s+)?function\s+(\w+)/g),
+    ...source.matchAll(/export\s+const\s+(\w+)\s*=/g)
+  ].map((m) => m[1]);
+  if (previewNames.length === 0) {
+    throw new PreviewError("No exported preview functions found in the preview file.");
+  }
+  console.log(`Found ${previewNames.length} previews: ${previewNames.join(", ")}`);
+  return compile({ assets, previewsPath, previewNames, componentName, liveReload: opts.liveReload });
+}
+var init_run = __esm({
+  "src/lib/preview/run.ts"() {
+    "use strict";
+    init_compile();
+    init_assets();
+    init_errors2();
+    init_meta_loader();
+    init_preview_generate();
+    init_errors2();
+  }
+});
+
+// src/lib/preview/serve.ts
+import { createServer } from "node:http";
+import { createReadStream, existsSync as existsSync16, statSync as statSync2 } from "node:fs";
+import { join, extname, normalize } from "node:path";
+function startPreviewServer(distDir, port) {
+  let reloadToken = String(Date.now());
+  const server = createServer((req, res) => {
+    const url = (req.url ?? "/").split("?")[0];
+    if (url === "/__preview_reload") {
+      res.setHeader("Content-Type", "text/plain; charset=utf-8");
+      res.setHeader("Cache-Control", "no-store");
+      res.end(reloadToken);
+      return;
+    }
+    const rel = decodeURIComponent(url === "/" ? "/index.html" : url);
+    const filePath = normalize(join(distDir, rel));
+    if (!filePath.startsWith(distDir) || !existsSync16(filePath) || statSync2(filePath).isDirectory()) {
+      res.statusCode = 404;
+      res.end("Not found");
+      return;
+    }
+    res.setHeader("Content-Type", MIME[extname(filePath)] ?? "application/octet-stream");
+    res.setHeader("Cache-Control", "no-store");
+    createReadStream(filePath).pipe(res);
+  });
+  server.listen(port);
+  return {
+    url: `http://localhost:${port}`,
+    bumpReload() {
+      reloadToken = String(Date.now());
+    },
+    close() {
+      server.close();
+    }
+  };
+}
+var MIME;
+var init_serve = __esm({
+  "src/lib/preview/serve.ts"() {
+    "use strict";
+    MIME = {
+      ".html": "text/html; charset=utf-8",
+      ".js": "text/javascript; charset=utf-8",
+      ".css": "text/css; charset=utf-8",
+      ".json": "application/json; charset=utf-8",
+      ".svg": "image/svg+xml",
+      ".map": "application/json; charset=utf-8"
+    };
+  }
+});
+
+// src/commands/preview.ts
+var preview_exports = {};
+__export(preview_exports, {
+  run: () => run8
+});
+import { existsSync as existsSync17, readdirSync as readdirSync5, watch as fsWatch } from "fs";
+import path16 from "path";
+function parseArgs(args2) {
+  const out = { serve: false, watch: false, help: false, port: DEFAULT_PORT };
+  for (let i = 0; i < args2.length; i++) {
+    const a = args2[i];
+    if (a === "-h" || a === "--help") out.help = true;
+    else if (a === "--serve") out.serve = true;
+    else if (a === "--watch") out.watch = true;
+    else if (a === "--port") out.port = parseInt(args2[++i] ?? "", 10);
+    else if (a.startsWith("--port=")) out.port = parseInt(a.slice("--port=".length), 10);
+    else if (!a.startsWith("-") && out.component === void 0) out.component = a;
+  }
+  if (out.watch) out.serve = true;
+  return out;
+}
+function listPreviewableComponents(ctx2) {
+  const { writeRoot, componentsBasePath } = resolveScaffoldLayout(ctx2);
+  const componentsDir = path16.join(writeRoot, componentsBasePath);
+  if (!existsSync17(componentsDir)) return [];
+  const names = [];
+  for (const name of readdirSync5(componentsDir)) {
+    const previewFile = path16.join(componentsDir, name, "index.preview.tsx");
+    if (existsSync17(previewFile)) names.push(name);
+  }
+  return names.sort();
+}
+async function run8(args2, ctx2) {
+  const opts = parseArgs(args2);
+  if (opts.help) {
+    console.log(HELP);
+    return;
+  }
+  if (!opts.component) {
+    const available = listPreviewableComponents(ctx2);
+    if (ctx2.jsonFlag) {
+      console.log(JSON.stringify({ previewable: available }, null, 2));
+      return;
+    }
+    if (available.length === 0) {
+      console.error("No previewable components found.");
+      console.error("Generate one with: bf gen preview <component>");
+      process.exit(1);
+    }
+    console.log(`${available.length} previewable component(s):`);
+    for (const name of available) console.log(`  ${name}`);
+    console.log();
+    console.log("Open one with: bf preview <component>");
+    return;
+  }
+  if (!Number.isInteger(opts.port) || opts.port < 1 || opts.port > 65535) {
+    console.error(`Invalid --port: must be an integer between 1 and 65535.`);
+    process.exit(1);
+  }
+  const component = opts.component;
+  const runOpts = { liveReload: opts.watch };
+  let result;
+  try {
+    result = await runPreview(component, ctx2, runOpts);
+  } catch (err) {
+    if (err instanceof PreviewError) {
+      console.error(`Error: ${err.message}`);
+      process.exit(1);
+    }
+    throw err;
+  }
+  const relDir = path16.relative(process.cwd(), result.distDir);
+  console.log(`
+\u2713 Preview built \u2192 ${relDir}/`);
+  if (!opts.serve) {
+    console.log(`
+  npx serve ${relDir}`);
+    return;
+  }
+  const server = startPreviewServer(result.distDir, opts.port);
+  console.log(`
+  Serving ${server.url}`);
+  if (!opts.watch) {
+    console.log("  Press Ctrl+C to stop.");
+    await new Promise((resolve10) => process.on("SIGINT", resolve10));
+    server.close();
+    return;
+  }
+  console.log("  Watching for changes \u2014 edit a component and save. Press Ctrl+C to stop.");
+  let rebuilding = false;
+  let pending = false;
+  let timer;
+  const rebuild = async () => {
+    if (rebuilding) {
+      pending = true;
+      return;
+    }
+    rebuilding = true;
+    console.log("\nChange detected \u2014 rebuilding...");
+    try {
+      await runPreview(component, ctx2, runOpts);
+      server.bumpReload();
+      console.log("\u2713 Rebuilt");
+    } catch (err) {
+      const msg = err instanceof PreviewError ? err.message : err.message;
+      console.error(`\u2717 Rebuild failed: ${msg}`);
+    } finally {
+      rebuilding = false;
+      if (pending) {
+        pending = false;
+        void rebuild();
+      }
+    }
+  };
+  const schedule = () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => void rebuild(), 150);
+  };
+  const { writeRoot, componentsBasePath } = resolveScaffoldLayout(ctx2);
+  const watchTargets = [
+    path16.join(writeRoot, componentsBasePath),
+    // Monorepo token/CSS sources
+    path16.join(ctx2.root, "site/ui/styles"),
+    path16.join(ctx2.root, "site/ui/tokens.json"),
+    path16.join(ctx2.root, "site/shared/tokens"),
+    // Project token/CSS sources
+    ctx2.projectDir && path16.join(ctx2.projectDir, "styles"),
+    ctx2.projectDir && path16.join(ctx2.projectDir, "globals.css"),
+    ctx2.projectDir && path16.join(ctx2.projectDir, "uno.config.ts"),
+    ctx2.projectDir && ctx2.config?.paths.tokens && path16.join(ctx2.projectDir, ctx2.config.paths.tokens)
+  ].filter((t) => !!t && existsSync17(t));
+  const watchers = watchTargets.map(
+    (target) => fsWatch(target, { recursive: true }, schedule)
+  );
+  await new Promise((resolve10) => process.on("SIGINT", resolve10));
+  for (const w of watchers) w.close();
+  server.close();
+}
+var DEFAULT_PORT, HELP;
+var init_preview = __esm({
+  "src/commands/preview.ts"() {
+    "use strict";
+    init_scaffold_layout();
+    init_run();
+    init_serve();
+    DEFAULT_PORT = 4321;
+    HELP = `Usage: bf preview [component] [options]
+
+  bf preview                 List previewable components
+  bf preview <component>     Build a static preview into .preview-dist/
+
+Options:
+  --serve            Serve the build on a local server and print its URL
+  --watch            Rebuild on source changes and live-reload (implies --serve)
+  --port <number>    Server port for --serve/--watch (default ${DEFAULT_PORT})
+  -h, --help         Show this help`;
+  }
+});
+
+// src/commands/tokens-apply.ts
+var tokens_apply_exports = {};
+__export(tokens_apply_exports, {
+  applyCssOverrides: () => applyCssOverrides,
+  applyTokenOverrides: () => applyTokenOverrides,
+  parseStudioUrl: () => parseStudioUrl,
+  resolveTokensCss: () => resolveTokensCss,
+  run: () => run9
+});
+import { existsSync as existsSync18, readFileSync as readFileSync7, writeFileSync as writeFileSync5 } from "fs";
+import path17 from "path";
+async function run9(args2, ctx2) {
+  const url = args2[0];
+  if (!url) {
+    console.error("Error: tokens apply requires a Studio URL.");
+    console.error("Usage: bf tokens apply <url>");
+    process.exit(1);
+  }
+  const projectDir = ctx2.projectDir ?? process.cwd();
+  const tokensRelDir = ctx2.config?.paths.tokens ?? "tokens";
+  const studioConfig = parseStudioUrl(url);
+  if (!studioConfig) {
+    console.error("Error: could not decode Studio config from the URL (no `?c=` param or malformed payload).");
+    process.exit(1);
+  }
+  const cssPath = resolveTokensCss(projectDir, tokensRelDir);
+  if (!cssPath) {
+    console.error("Error: tokens.css not found. Checked:");
+    for (const p of candidateCssPaths(projectDir, tokensRelDir)) {
+      console.error(`  - ${path17.relative(projectDir, p)}`);
+    }
+    console.error("       Run `npm create barefootjs@latest` to scaffold a project first.");
+    process.exit(1);
+  }
+  applyCssOverrides(cssPath, studioConfig);
+  console.log(`  Patched ${path17.relative(projectDir, cssPath)}`);
+  const tokensJsonPath = path17.join(projectDir, tokensRelDir, "tokens.json");
+  if (existsSync18(tokensJsonPath)) {
+    applyTokenOverrides(tokensJsonPath, studioConfig);
+    console.log(`  Patched ${path17.relative(projectDir, tokensJsonPath)}`);
+  }
+}
+function parseStudioUrl(url) {
+  try {
+    const parsed = new URL(url);
+    const encoded = parsed.searchParams.get("c");
+    if (!encoded) return void 0;
+    const json = atob(decodeURIComponent(encoded));
+    return JSON.parse(json);
+  } catch {
+    return void 0;
+  }
+}
+function candidateCssPaths(projectDir, tokensRelDir) {
+  return [
+    path17.join(projectDir, tokensRelDir, "tokens.css"),
+    path17.join(projectDir, "public", "tokens.css"),
+    path17.join(projectDir, "static", "tokens.css")
+  ];
 }
-function extractTopLevelDescription(source) {
-  const match = source.match(/^(?:"use client"\n+)?\/\*\*\n([\s\S]*?)\*\//m);
-  if (!match) return "";
-  const block = match[1];
-  const lines = block.split("\n");
-  const descLines = [];
-  for (const line of lines) {
-    const cleaned = line.replace(/^\s*\*\s?/, "").trim();
-    if (cleaned.startsWith("@")) break;
-    descLines.push(cleaned);
+function resolveTokensCss(projectDir, tokensRelDir) {
+  for (const p of candidateCssPaths(projectDir, tokensRelDir)) {
+    if (existsSync18(p)) return p;
   }
-  return descLines.join(" ").replace(/\s+/g, " ").trim();
+  return void 0;
 }
-function extractExamples2(source) {
-  const match = source.match(/^(?:"use client"\n+)?\/\*\*\n([\s\S]*?)\*\//m);
-  if (!match) return [];
-  const block = match[1];
-  const examples = [];
-  const exampleRegex = /@example\s+(.*?)(?:\n\s*\*\s*```tsx?\n([\s\S]*?)```)/g;
-  let m;
-  while ((m = exampleRegex.exec(block)) !== null) {
-    const title = m[1].trim();
-    const code = m[2].split("\n").map((l) => l.replace(/^\s*\*\s?/, "")).join("\n").trim();
-    examples.push({ title, code });
+function buildBlockOverrides(config) {
+  const root = {};
+  const dark = {};
+  if (config.spacing) root["--spacing"] = config.spacing;
+  if (config.radius) root["--radius"] = config.radius;
+  if (config.font) {
+    root["--font-sans"] = FONT_MAP[config.font] ?? config.font;
   }
-  return examples;
+  if (config.style) {
+    const preset = SHADOW_PRESETS[config.style];
+    if (preset) {
+      for (const [name, value] of Object.entries(preset)) {
+        root[`--${name}`] = value;
+      }
+    }
+  }
+  if (config.tokens) {
+    for (const [name, values] of Object.entries(config.tokens)) {
+      if (values.light !== void 0) root[`--${name}`] = values.light;
+      if (values.dark !== void 0) dark[`--${name}`] = values.dark;
+    }
+  }
+  return { root, dark };
 }
-function extractMainProps2(source) {
-  const match = source.match(/interface\s+(\w+Props)\s+(?:extends\s+[\w<>,\s]+\s+)?\{/);
-  if (!match) return [];
-  return extractPropsFromInterface(source, match.index);
+function applyCssOverrides(cssPath, config) {
+  const overrides = buildBlockOverrides(config);
+  let css = readFileSync7(cssPath, "utf-8");
+  css = patchBlock(css, /:root\s*\{/, overrides.root);
+  css = patchBlock(css, /\.dark\s*\{/, overrides.dark);
+  writeFileSync5(cssPath, css);
 }
-function extractPropsFromInterface(source, startIndex) {
-  const bodyStart = source.indexOf("{", startIndex);
-  if (bodyStart === -1) return [];
-  let depth = 0;
-  let bodyEnd = bodyStart;
-  for (let i = bodyStart; i < source.length; i++) {
-    if (source[i] === "{") depth++;
-    else if (source[i] === "}") {
+function patchBlock(css, openRe, overrides) {
+  if (Object.keys(overrides).length === 0) return css;
+  const openMatch = openRe.exec(css);
+  if (!openMatch) return css;
+  const blockStart = openMatch.index + openMatch[0].length;
+  let depth = 1;
+  let blockEnd = -1;
+  for (let i = blockStart; i < css.length; i++) {
+    const ch = css[i];
+    if (ch === "{") depth++;
+    else if (ch === "}") {
       depth--;
       if (depth === 0) {
-        bodyEnd = i;
+        blockEnd = i;
         break;
       }
     }
   }
-  const body = source.slice(bodyStart + 1, bodyEnd);
-  return parsePropsBody(body);
+  if (blockEnd === -1) return css;
+  let block = css.slice(blockStart, blockEnd);
+  const toAppend = [];
+  for (const [name, value] of Object.entries(overrides)) {
+    const re = new RegExp(`(${escapeRegex2(name)}\\s*:\\s*)[^;]+(;)`);
+    if (re.test(block)) {
+      block = block.replace(re, `$1${value}$2`);
+    } else {
+      toAppend.push([name, value]);
+    }
+  }
+  if (toAppend.length > 0) {
+    const lines = toAppend.map(([n, v]) => `  ${n}: ${v};`).join("\n");
+    const trailing = block.match(/\s*$/)?.[0] ?? "";
+    block = block.slice(0, block.length - trailing.length) + `
+
+  /* \u2500\u2500 Studio overrides \u2500\u2500 */
+${lines}
+`;
+  }
+  return css.slice(0, blockStart) + block + css.slice(blockEnd);
 }
-function parsePropsBody(body) {
-  const props = [];
-  const propRegex = /(?:\/\*\*\s*([\s\S]*?)\s*\*\/\s*)?([\w]+)(\??):\s*([^\n]+)/g;
-  let m;
-  while ((m = propRegex.exec(body)) !== null) {
-    const jsdoc = m[1] || "";
-    const name = m[2];
-    const optional = m[3] === "?";
-    const rawType = m[4].trim();
-    if (name.startsWith("__")) continue;
-    const type = rawType.replace(/;?\s*$/, "").trim();
-    const description = extractPropDescription(jsdoc);
-    const defaultMatch = jsdoc.match(/@default\s+(.+?)(?:\s*$|\s*\*)/m);
-    const defaultValue = defaultMatch ? defaultMatch[1].trim().replace(/^['"]|['"]$/g, "") : void 0;
-    props.push({
-      name,
-      type,
-      required: !optional && defaultValue === void 0,
-      default: defaultValue,
-      description
-    });
+function escapeRegex2(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function applyTokenOverrides(tokensJsonPath, config) {
+  const raw = readFileSync7(tokensJsonPath, "utf-8");
+  const tokensData = JSON.parse(raw);
+  if (config.tokens) {
+    for (const [name, values] of Object.entries(config.tokens)) {
+      applyColorOverride(tokensData, name, values);
+    }
   }
-  return props;
+  if (config.spacing) {
+    applySimpleOverride(tokensData, "--spacing", config.spacing);
+  }
+  if (config.radius) {
+    applySimpleOverride(tokensData, "--radius", config.radius);
+  }
+  if (config.font) {
+    const fontValue = FONT_MAP[config.font] || config.font;
+    applySimpleOverride(tokensData, "--font-sans", fontValue);
+  }
+  if (config.style) {
+    applyShadowPreset(tokensData, config.style);
+  }
+  writeFileSync5(tokensJsonPath, JSON.stringify(tokensData, null, 2) + "\n");
 }
-function extractPropDescription(jsdoc) {
-  if (!jsdoc) return "";
-  const lines = jsdoc.split("\n");
-  const descLines = [];
-  for (const line of lines) {
-    const cleaned = line.replace(/^\s*\*?\s*/, "").trim();
-    if (cleaned.startsWith("@")) break;
-    if (cleaned) descLines.push(cleaned);
+function applyColorOverride(tokensData, name, values) {
+  const varName = `--${name}`;
+  if (Array.isArray(tokensData.colors)) {
+    for (const token of tokensData.colors) {
+      if (token.name === varName || token.name === name) {
+        if (values.light) token.value = values.light;
+        if (values.dark) token.dark = values.dark;
+        return;
+      }
+    }
   }
-  return descLines.join(" ").trim();
+  if (Array.isArray(tokensData.tokens)) {
+    for (const token of tokensData.tokens) {
+      if (token.name === varName || token.name === name) {
+        if (values.light) token.value = values.light;
+        if (values.dark) token.dark = values.dark;
+        return;
+      }
+    }
+  }
+}
+function applySimpleOverride(tokensData, name, value) {
+  const bareName = name.startsWith("--") ? name.slice(2) : name;
+  const sections = [
+    tokensData.colors,
+    tokensData.spacing,
+    tokensData.borderRadius,
+    tokensData.shadows,
+    tokensData.layout
+  ];
+  if (tokensData.typography) {
+    for (const arr of Object.values(tokensData.typography)) {
+      if (Array.isArray(arr)) sections.push(arr);
+    }
+  }
+  for (const arr of sections) {
+    if (!Array.isArray(arr)) continue;
+    for (const token of arr) {
+      if (token.name === bareName || token.name === name) {
+        token.value = value;
+        return;
+      }
+    }
+  }
+}
+function applyShadowPreset(tokensData, styleName) {
+  const shadows = SHADOW_PRESETS[styleName];
+  if (!shadows) return;
+  for (const [name, value] of Object.entries(shadows)) {
+    applySimpleOverride(tokensData, name, value);
+  }
+}
+var FONT_MAP, SHADOW_PRESETS;
+var init_tokens_apply = __esm({
+  "src/commands/tokens-apply.ts"() {
+    "use strict";
+    FONT_MAP = {
+      system: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
+      inter: '"Inter", sans-serif',
+      "noto-sans": '"Noto Sans", sans-serif',
+      "nunito-sans": '"Nunito Sans", sans-serif',
+      figtree: '"Figtree", sans-serif'
+    };
+    SHADOW_PRESETS = {
+      Sharp: {
+        "shadow-sm": "0 1px 2px 0 rgb(0 0 0 / 0.04)",
+        "shadow": "0 1px 2px 0 rgb(0 0 0 / 0.06)",
+        "shadow-md": "0 2px 4px -1px rgb(0 0 0 / 0.08)",
+        "shadow-lg": "0 4px 8px -2px rgb(0 0 0 / 0.1)"
+      },
+      Soft: {
+        "shadow-sm": "0 1px 3px 0 rgb(0 0 0 / 0.06)",
+        "shadow": "0 2px 6px 0 rgb(0 0 0 / 0.08), 0 1px 3px -1px rgb(0 0 0 / 0.06)",
+        "shadow-md": "0 6px 12px -2px rgb(0 0 0 / 0.08), 0 3px 6px -3px rgb(0 0 0 / 0.06)",
+        "shadow-lg": "0 12px 24px -4px rgb(0 0 0 / 0.08), 0 6px 10px -5px rgb(0 0 0 / 0.06)"
+      },
+      Compact: {
+        "shadow-sm": "none",
+        "shadow": "none",
+        "shadow-md": "none",
+        "shadow-lg": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+      }
+    };
+  }
+});
+
+// src/commands/tokens.ts
+var tokens_exports = {};
+__export(tokens_exports, {
+  run: () => run10
+});
+function flattenTokens(tokenSet, category) {
+  const result = [];
+  function add(cat, tokens) {
+    if (category && category !== cat) return;
+    result.push(...tokens);
+  }
+  add("typography", [...tokenSet.typography.fontFamily, ...tokenSet.typography.letterSpacing]);
+  add("spacing", tokenSet.spacing);
+  add("borderRadius", tokenSet.borderRadius);
+  add("transitions", [...tokenSet.transitions.duration, ...tokenSet.transitions.easing]);
+  add("layout", tokenSet.layout);
+  add("colors", tokenSet.colors);
+  add("shadows", tokenSet.shadows);
+  return result;
 }
-function extractSubComponents2(source) {
-  const exportedNames = extractExportedNames(source);
-  if (exportedNames.length <= 1) return [];
-  const subs = [];
-  const interfaceRegex = /interface\s+(\w+Props)\s+(?:extends\s+[\w<>,\s]+\s+)?\{/g;
-  const interfaces = [];
-  let im;
-  while ((im = interfaceRegex.exec(source)) !== null) {
-    interfaces.push({ name: im[1], index: im.index });
+function printTokens(tokens, jsonFlag2) {
+  if (jsonFlag2) {
+    console.log(JSON.stringify(tokens, null, 2));
+    return;
   }
-  for (let i = 1; i < interfaces.length; i++) {
-    const iface = interfaces[i];
-    const componentName = iface.name.replace(/Props$/, "");
-    if (!exportedNames.includes(componentName)) continue;
-    const beforeInterface = source.slice(Math.max(0, iface.index - 300), iface.index);
-    const jsdocMatch = beforeInterface.match(/\/\*\*\s*([\s\S]*?)\s*\*\/\s*$/);
-    const description = jsdocMatch ? extractPropDescription(jsdocMatch[1]) : "";
-    const props = extractPropsFromInterface(source, iface.index);
-    subs.push({ name: componentName, description, props });
+  if (tokens.length === 0) {
+    console.log("No tokens found.");
+    return;
   }
-  return subs;
+  const nameWidth = Math.max(25, ...tokens.map((t) => t.name.length + 4));
+  const header = `${"NAME".padEnd(nameWidth)}VALUE`;
+  console.log(header);
+  console.log("-".repeat(header.length + 20));
+  for (const t of tokens) {
+    const name = `--${t.name}`;
+    const dark = t.dark;
+    const darkSuffix = dark ? `  (dark: ${dark})` : "";
+    console.log(`${name.padEnd(nameWidth)}${t.value}${darkSuffix}`);
+  }
+  console.log(`
+${tokens.length} token(s)`);
 }
-function extractVariants2(source) {
-  const variants = {};
-  const typeRegex = /type\s+(\w+(?:Variant|Size|Orientation|Side|Position))\s*=\s*([^\n]+)/g;
-  let m;
-  while ((m = typeRegex.exec(source)) !== null) {
-    const name = m[1];
-    const values = m[2].match(/'([^']+)'/g);
-    if (values) {
-      variants[name] = values.map((v) => v.replace(/'/g, ""));
+async function run10(args2, ctx2) {
+  let category;
+  const catIdx = args2.indexOf("--category");
+  if (catIdx >= 0 && args2[catIdx + 1]) {
+    const val = args2[catIdx + 1];
+    if (!CATEGORY_NAMES.includes(val)) {
+      console.error(`Unknown category: ${val}`);
+      console.error(`Available: ${CATEGORY_NAMES.join(", ")}`);
+      process.exit(1);
     }
+    category = val;
   }
-  return variants;
+  const tokenSet = await loadTokenSet(ctx2);
+  const tokens = flattenTokens(tokenSet, category);
+  printTokens(tokens, ctx2.jsonFlag);
 }
-function extractAccessibility2(source) {
-  const roleMatches = source.match(/role[={"]+([^"}\s]+)/g);
-  const roles = /* @__PURE__ */ new Set();
-  if (roleMatches) {
-    for (const rm of roleMatches) {
-      const val = rm.match(/role[={"]+([^"}\s]+)/);
-      if (val) roles.add(val[1]);
-    }
+var CATEGORY_NAMES;
+var init_tokens2 = __esm({
+  "src/commands/tokens.ts"() {
+    "use strict";
+    init_tokens();
+    CATEGORY_NAMES = [
+      "typography",
+      "spacing",
+      "borderRadius",
+      "transitions",
+      "layout",
+      "colors",
+      "shadows"
+    ];
   }
-  const ariaMatches = source.match(/aria-[\w]+/g);
-  const ariaAttrs = [...new Set(ariaMatches || [])];
-  const dataMatches = source.match(/data-(?:state|slot|orientation|value|disabled|side)[\w-]*/g);
-  const dataAttrs = [...new Set(dataMatches || [])];
+});
+
+// src/lib/scaffold.ts
+import { readFileSync as readFileSync8, existsSync as existsSync19 } from "fs";
+import path18 from "path";
+function loadMeta(metaDir, name) {
+  const filePath = path18.join(metaDir, `${name}.json`);
+  if (!existsSync19(filePath)) return null;
+  return JSON.parse(readFileSync8(filePath, "utf-8"));
+}
+function toPascalCase2(kebab) {
+  return kebab.split("-").map((w) => w[0].toUpperCase() + w.slice(1)).join("");
+}
+function toCamelCase(kebab) {
+  const pascal = toPascalCase2(kebab);
+  return pascal[0].toLowerCase() + pascal.slice(1);
+}
+function scaffold(componentName, useComponents, metaDir, componentsBasePath = "ui/components/ui", options = {}) {
+  const metas = useComponents.map((name) => ({ name, meta: loadMeta(metaDir, name) }));
+  const found = metas.filter((m) => m.meta !== null);
+  const notFound = metas.filter((m) => m.meta === null).map((m) => m.name);
+  const needsClient = found.some((m) => m.meta.stateful);
+  const imports = buildImports(found);
+  const componentCode = generateComponentCode(componentName, imports, needsClient, notFound);
+  const testCode = generateTestCode(componentName, needsClient, options.testImportSource ?? "bun:test");
+  const basePath = `${componentsBasePath}/${componentName}`;
   return {
-    role: roles.size > 0 ? [...roles].join(", ") : void 0,
-    ariaAttributes: ariaAttrs,
-    dataAttributes: dataAttrs
+    componentCode,
+    testCode,
+    componentPath: `${basePath}/index.tsx`,
+    testPath: `${basePath}/index.test.tsx`
   };
 }
-function extractDependencies3(source) {
-  const internal = [];
-  const external = [];
-  const importRegex = /import\s+(?:type\s+)?(?:\{[^}]*\}|[\w]+)\s+from\s+['"]([^'"]+)['"]/g;
-  let m;
-  while ((m = importRegex.exec(source)) !== null) {
-    const specifier = m[1];
-    if (m[0].includes("import type")) continue;
-    if (specifier.startsWith("./") || specifier.startsWith("../")) {
-      const parts = specifier.split("/");
-      const name = parts[parts.length - 1].replace(/\.tsx?$/, "");
-      if (name !== "types" && name !== "index") {
-        internal.push(name);
+function buildImports(components) {
+  const imports = [];
+  for (const { name, meta } of components) {
+    const names = [toPascalCase2(name)];
+    if (meta.subComponents) {
+      for (const sub2 of meta.subComponents) {
+        names.push(sub2.name);
       }
-    } else {
-      external.push(specifier);
     }
+    imports.push({ from: `../${name}`, names });
   }
-  return {
-    internal: [...new Set(internal)],
-    external: [...new Set(external)]
-  };
+  return imports;
 }
-function extractExportedNames(source) {
-  const names = [];
-  const seen = /* @__PURE__ */ new Set();
-  const add = (n) => {
-    if (!n) return;
-    const trimmed = n.trim();
-    if (!trimmed || seen.has(trimmed)) return;
-    if (trimmed.startsWith("type ")) return;
-    seen.add(trimmed);
-    names.push(trimmed);
-  };
-  const braceRegex = /export\s+\{([^}]+)\}/g;
-  let bm;
-  while ((bm = braceRegex.exec(source)) !== null) {
-    for (const part of bm[1].split(",")) {
-      const trimmed = part.trim();
-      if (!trimmed || trimmed.startsWith("type ")) continue;
-      const asMatch = trimmed.match(/\s+as\s+(\w+)$/);
-      add(asMatch ? asMatch[1] : trimmed);
-    }
+function generateComponentCode(componentName, imports, needsClient, notFound) {
+  const pascalName = toPascalCase2(componentName);
+  const lines = [];
+  if (needsClient) {
+    lines.push(`"use client"`);
+    lines.push(``);
+    lines.push(`import { createSignal } from '@barefootjs/client'`);
   }
-  const fnRegex = /export\s+(?:default\s+)?(?:async\s+)?function\s+(\w+)/g;
-  let fm;
-  while ((fm = fnRegex.exec(source)) !== null) add(fm[1]);
-  const varRegex = /export\s+(?:const|let|var)\s+(\w+)\s*[=:]/g;
-  let vm;
-  while ((vm = varRegex.exec(source)) !== null) add(vm[1]);
-  const defaultRegex = /export\s+default\s+(\w+)\s*;?\s*$/m;
-  const dm = defaultRegex.exec(source);
-  if (dm) add(dm[1]);
-  return names;
-}
-var init_parse_component = __esm({
-  "src/lib/parse-component.ts"() {
-    "use strict";
+  lines.push(`import type { Child } from '../../../types'`);
+  for (const imp of imports) {
+    lines.push(`import { ${imp.names.join(", ")} } from '${imp.from}'`);
+  }
+  if (notFound.length > 0) {
+    lines.push(``);
+    lines.push(`// WARNING: These components were not found in ui/meta/:`);
+    for (const name of notFound) {
+      lines.push(`// - ${name}`);
+    }
   }
-});
-
-// src/lib/test-template.ts
-import { readFileSync as readFileSync8 } from "fs";
-import path20 from "path";
-function generateTestTemplate(componentPath, options = {}) {
-  const importSource = options.importSource ?? "bun:test";
-  const source = readFileSync8(componentPath, "utf-8");
-  const parsed = parseComponent(source);
-  const fileName = path20.basename(componentPath);
-  const baseName = fileName.replace(/\.tsx$/, "");
-  const relativePath = fileName;
-  const varName = toCamelCase2(baseName) + "Source";
-  const exportedNames = parsed.exportedNames;
-  const mainComponent = exportedNames[0];
-  const hasSubComponents = exportedNames.length > 1;
-  const lines = [];
-  lines.push(`import { describe, test, expect } from '${importSource}'`);
-  lines.push(`import { readFileSync } from 'fs'`);
-  lines.push(`import { resolve } from 'path'`);
-  lines.push(`import { renderToTest } from '@barefootjs/test'`);
   lines.push(``);
-  lines.push(`const ${varName} = readFileSync(resolve(__dirname, '${relativePath}'), 'utf-8')`);
+  lines.push(`interface ${pascalName}Props {`);
+  lines.push(`  /** Additional CSS classes. */`);
+  lines.push(`  className?: string`);
+  lines.push(`  /** Children to render. */`);
+  lines.push(`  children?: Child`);
+  lines.push(`}`);
   lines.push(``);
-  if (mainComponent) {
-    lines.push(...generateDescribeBlock(source, parsed, mainComponent, varName, fileName, hasSubComponents));
-  }
-  if (hasSubComponents) {
-    for (let i = 1; i < exportedNames.length; i++) {
-      lines.push(``);
-      lines.push(...generateDescribeBlock(source, parsed, exportedNames[i], varName, fileName, true));
-    }
+  if (needsClient) {
+    lines.push(`function ${pascalName}(props: ${pascalName}Props) {`);
+    lines.push(`  // TODO: Add signals`);
+    lines.push(`  // const [value, setValue] = createSignal(...)`);
+    lines.push(``);
+    lines.push(`  return (`);
+    lines.push(`    <div data-slot="${componentName}">`);
+    lines.push(`      {/* TODO: Compose components */}`);
+    lines.push(`    </div>`);
+    lines.push(`  )`);
+    lines.push(`}`);
+  } else {
+    lines.push(`function ${pascalName}({`);
+    lines.push(`  className = '',`);
+    lines.push(`  children,`);
+    lines.push(`  ...props`);
+    lines.push(`}: ${pascalName}Props) {`);
+    lines.push(`  return (`);
+    lines.push(`    <div data-slot="${componentName}" className={className}>`);
+    lines.push(`      {/* TODO: Compose components */}`);
+    lines.push(`      {children}`);
+    lines.push(`    </div>`);
+    lines.push(`  )`);
+    lines.push(`}`);
   }
-  return lines.join("\n") + "\n";
+  lines.push(``);
+  lines.push(`export { ${pascalName} }`);
+  lines.push(`export type { ${pascalName}Props }`);
+  lines.push(``);
+  return lines.join("\n");
 }
-function generateDescribeBlock(source, parsed, componentName, varName, fileName, multiComponent) {
+function generateTestCode(componentName, needsClient, importSource) {
+  const pascalName = toPascalCase2(componentName);
+  const varName = toCamelCase(componentName) + "Source";
   const lines = [];
-  const renderArg = multiComponent ? `, '${componentName}'` : "";
-  const funcInfo = analyzeFunction(source, componentName);
-  lines.push(`describe('${componentName}', () => {`);
-  lines.push(`  const result = renderToTest(${varName}, '${fileName}'${renderArg})`);
+  lines.push(`import { describe, test, expect } from '${importSource}'`);
+  lines.push(`import { readFileSync } from 'fs'`);
+  lines.push(`import { resolve } from 'path'`);
+  lines.push(`import { renderToTest } from '@barefootjs/test'`);
+  lines.push(``);
+  lines.push(`const ${varName} = readFileSync(resolve(__dirname, 'index.tsx'), 'utf-8')`);
+  lines.push(``);
+  lines.push(`describe('${pascalName}', () => {`);
+  lines.push(`  const result = renderToTest(${varName}, '${componentName}.tsx')`);
   lines.push(``);
   lines.push(`  test('has no compiler errors', () => {`);
   lines.push(`    expect(result.errors).toEqual([])`);
   lines.push(`  })`);
   lines.push(``);
-  lines.push(`  test('componentName is ${componentName}', () => {`);
-  lines.push(`    expect(result.componentName).toBe('${componentName}')`);
+  lines.push(`  test('componentName is ${pascalName}', () => {`);
+  lines.push(`    expect(result.componentName).toBe('${pascalName}')`);
   lines.push(`  })`);
   lines.push(``);
-  if (funcInfo.signals.length > 0) {
-    lines.push(`  test('has expected signals', () => {`);
-    for (const sig of funcInfo.signals) {
-      lines.push(`    expect(result.signals).toContain('${sig}')`);
-    }
-    lines.push(`  })`);
-  } else {
-    lines.push(`  test('no signals (stateless)', () => {`);
-    lines.push(`    expect(result.signals).toEqual([])`);
+  if (needsClient) {
+    lines.push(`  test('isClient is true', () => {`);
+    lines.push(`    expect(result.isClient).toBe(true)`);
     lines.push(`  })`);
   }
   lines.push(``);
-  if (funcInfo.rootTag) {
-    const isComponentRoot = /^[A-Z]/.test(funcInfo.rootTag);
-    lines.push(`  test('renders as <${funcInfo.rootTag}>', () => {`);
-    if (funcInfo.hasConditionalReturn) {
-      lines.push(`    // Component has conditional return (e.g., asChild branch)`);
-      const finder = isComponentRoot ? `result.find({ componentName: '${funcInfo.rootTag}' })` : `result.find({ tag: '${funcInfo.rootTag}' })`;
-      lines.push(`    expect(${finder}).not.toBeNull()`);
-    } else if (isComponentRoot) {
-      lines.push(`    expect(result.root.componentName).toBe('${funcInfo.rootTag}')`);
-    } else {
-      lines.push(`    expect(result.root.tag).toBe('${funcInfo.rootTag}')`);
-    }
-    lines.push(`  })`);
-    lines.push(``);
-  }
-  if (funcInfo.dataSlot) {
-    lines.push(`  test('has data-slot=${funcInfo.dataSlot}', () => {`);
-    if (funcInfo.hasConditionalReturn) {
-      lines.push(`    const el = result.find({ tag: '${funcInfo.rootTag}' })!`);
-      lines.push(`    expect(el.props['data-slot']).toBe('${funcInfo.dataSlot}')`);
-    } else {
-      lines.push(`    expect(result.root.props['data-slot']).toBe('${funcInfo.dataSlot}')`);
-    }
-    lines.push(`  })`);
-    lines.push(``);
-  }
-  if (funcInfo.role) {
-    lines.push(`  test('has role=${funcInfo.role}', () => {`);
-    lines.push(`    const el = result.find({ role: '${funcInfo.role}' })`);
-    lines.push(`    expect(el).not.toBeNull()`);
-    lines.push(`  })`);
-    lines.push(``);
-  }
-  const ariaAttrs = funcInfo.ariaAttributes;
-  if (ariaAttrs.length > 0) {
-    lines.push(`  test('has ARIA attributes', () => {`);
-    const findTarget = funcInfo.role ? `result.find({ role: '${funcInfo.role}' })!` : funcInfo.rootTag ? `result.find({ tag: '${funcInfo.rootTag}' })!` : "result.root";
-    lines.push(`    const el = ${findTarget}`);
-    for (const attr of ariaAttrs) {
-      const shortName = attr.replace("aria-", "");
-      lines.push(`    expect(el.aria).toHaveProperty('${shortName}')`);
-    }
-    lines.push(`  })`);
-    lines.push(``);
-  }
-  if (funcInfo.hasDataState) {
-    lines.push(`  test('has data-state attribute', () => {`);
-    if (funcInfo.hasConditionalReturn) {
-      lines.push(`    const el = result.find({ tag: '${funcInfo.rootTag}' })!`);
-      lines.push(`    expect(el.dataState).not.toBeNull()`);
-    } else {
-      lines.push(`    expect(result.root.dataState).not.toBeNull()`);
-    }
-    lines.push(`  })`);
-    lines.push(``);
-  }
-  if (funcInfo.events.length > 0) {
-    lines.push(`  test('has event handlers', () => {`);
-    lines.push(`    const all = result.findAll({})`);
-    for (const event of funcInfo.events) {
-      const onProp = ON_PROP_BY_EVENT[event];
-      lines.push(`    expect(`);
-      lines.push(`      all.some(n => n.events.includes('${event}') || n.props['${onProp}'] != null),`);
-      lines.push(`    ).toBe(true)`);
-    }
-    lines.push(`  })`);
-    lines.push(``);
-  }
-  if (funcInfo.childComponents.length > 0) {
-    lines.push(`  test('contains child components', () => {`);
-    for (const child of funcInfo.childComponents) {
-      lines.push(`    expect(result.find({ componentName: '${child}' })).not.toBeNull()`);
-    }
-    lines.push(`  })`);
-    lines.push(``);
-  }
+  lines.push(`  test('renders as <div>', () => {`);
+  lines.push(`    expect(result.root.tag).toBe('div')`);
+  lines.push(`  })`);
+  lines.push(``);
+  lines.push(`  test('has data-slot=${componentName}', () => {`);
+  lines.push(`    expect(result.root.props['data-slot']).toBe('${componentName}')`);
+  lines.push(`  })`);
+  lines.push(``);
   lines.push(`  test('toStructure() shows expected tree', () => {`);
   lines.push(`    const structure = result.toStructure()`);
   lines.push(`    expect(structure.length).toBeGreaterThan(0)`);
-  if (funcInfo.rootTag) {
-    lines.push(`    expect(structure).toContain('${funcInfo.rootTag}')`);
-  }
-  if (funcInfo.role) {
-    lines.push(`    expect(structure).toContain('[role=${funcInfo.role}]')`);
-  }
   lines.push(`  })`);
   lines.push(`})`);
-  return lines;
-}
-function analyzeFunction(source, componentName) {
-  const funcRegex = new RegExp(`function\\s+${componentName}\\s*\\(`);
-  const funcMatch = funcRegex.exec(source);
-  let funcBody = source;
-  if (!funcMatch) {
-    const aliasMatch = source.match(new RegExp(`const\\s+${componentName}\\s*=\\s*(\\w+)`));
-    if (aliasMatch) {
-      return analyzeFunction(source, aliasMatch[1]);
-    }
-  }
-  if (funcMatch) {
-    const parenStart = source.indexOf("(", funcMatch.index);
-    let parenDepth = 0;
-    let parenEnd = parenStart;
-    for (let i = parenStart; i < source.length; i++) {
-      if (source[i] === "(") parenDepth++;
-      else if (source[i] === ")") {
-        parenDepth--;
-        if (parenDepth === 0) {
-          parenEnd = i;
-          break;
-        }
-      }
-    }
-    let depth = 0;
-    let bodyStart = -1;
-    for (let i = parenEnd + 1; i < source.length; i++) {
-      if (source[i] === "{") {
-        if (bodyStart === -1) bodyStart = i;
-        depth++;
-      } else if (source[i] === "}") {
-        depth--;
-        if (depth === 0) {
-          funcBody = source.slice(bodyStart, i + 1);
-          break;
-        }
-      }
-    }
-  }
-  const signals = [];
-  const signalRegex = /const\s+\[(\w+),\s*\w+\]\s*=\s*createSignal/g;
-  let sm;
-  while ((sm = signalRegex.exec(funcBody)) !== null) {
-    signals.push(sm[1]);
-  }
-  const returnMatches = [...funcBody.matchAll(/return\s*\(?\s*<(\w+)/g)];
-  const rootTag = returnMatches.length > 0 ? returnMatches[returnMatches.length - 1][1] : null;
-  const allSlots = [...funcBody.matchAll(/data-slot="([^"]+)"/g)].map((m) => m[1]);
-  const expectedSlot = componentName.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-  const dataSlot = allSlots.find((s) => s === expectedSlot) || allSlots[0] || null;
-  const roleMatch = funcBody.match(/role="([^"]+)"/);
-  const role = roleMatch ? roleMatch[1] : null;
-  const ariaMatches = funcBody.match(/aria-[\w]+(?==)/g);
-  const ariaAttributes = [...new Set(ariaMatches || [])].filter((a) => a !== "aria-invalid");
-  const hasDataState = /data-state=/.test(funcBody);
-  const hasConditionalReturn = /if\s*\(.*\)\s*\{?\s*return/.test(funcBody);
-  const events = [];
-  for (const [event, onProp] of Object.entries(ON_PROP_BY_EVENT)) {
-    if (new RegExp(`${onProp}=`).test(funcBody)) events.push(event);
-  }
-  const childCompRegex = /<([A-Z][A-Za-z]+)[\s/>]/g;
-  const childComponents = [];
-  let cm;
-  while ((cm = childCompRegex.exec(funcBody)) !== null) {
-    if (!childComponents.includes(cm[1])) {
-      childComponents.push(cm[1]);
-    }
-  }
-  return {
-    signals,
-    rootTag,
-    dataSlot,
-    role,
-    ariaAttributes,
-    hasDataState,
-    hasConditionalReturn,
-    events,
-    childComponents
-  };
-}
-function toCamelCase2(kebab) {
-  return kebab.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+  lines.push(``);
+  return lines.join("\n");
 }
-var ON_PROP_BY_EVENT;
-var init_test_template = __esm({
-  "src/lib/test-template.ts"() {
+var init_scaffold = __esm({
+  "src/lib/scaffold.ts"() {
     "use strict";
-    init_parse_component();
-    ON_PROP_BY_EVENT = {
-      click: "onClick",
-      input: "onInput",
-      change: "onChange",
-      keydown: "onKeyDown"
-    };
   }
 });
 
-// src/commands/gen-test.ts
-var gen_test_exports = {};
-__export(gen_test_exports, {
-  run: () => run12
+// src/commands/gen-component.ts
+var gen_component_exports = {};
+__export(gen_component_exports, {
+  run: () => run11
 });
-import { existsSync as existsSync17, writeFileSync as writeFileSync6 } from "fs";
-import path21 from "path";
-function run12(args2, ctx2) {
-  const positional = args2.filter((a) => !a.startsWith("-"));
-  const flagSet = new Set(args2.filter((a) => a.startsWith("-")));
-  const writeToStdout = flagSet.has("--stdout");
-  const force = flagSet.has("--force") || flagSet.has("-f");
-  const componentName = positional[0];
-  if (!componentName) {
-    console.error("Error: Component name required. Usage: bf gen test <component> [--stdout] [--force]");
+import { writeFileSync as writeFileSync6, mkdirSync as mkdirSync4, existsSync as existsSync20 } from "fs";
+import path19 from "path";
+function run11(args2, ctx2) {
+  if (args2.length < 1) {
+    console.error("Usage: bf gen component <component-name> [use-component1] [use-component2] ...");
+    console.error("Example: bf gen component settings-form input switch button");
     process.exit(1);
   }
-  const searched = [];
-  const resolved = resolveComponentSource(componentName, ctx2, searched);
-  if (!resolved) {
-    console.error(`Error: Cannot find component "${componentName}".`);
-    console.error("Looked in:");
-    for (const p of searched) console.error(`  - ${p}`);
+  const [componentName, ...useComponents] = args2;
+  const { writeRoot, componentsBasePath } = resolveScaffoldLayout(ctx2);
+  const pm = detectPackageManager(ctx2.projectDir ?? ctx2.root);
+  const runner = testRunnerFor(pm);
+  const result = scaffold(componentName, useComponents, ctx2.metaDir, componentsBasePath, {
+    testImportSource: runner.importSource
+  });
+  const componentAbsPath = path19.join(writeRoot, result.componentPath);
+  if (existsSync20(componentAbsPath)) {
+    console.error(`Error: ${result.componentPath} already exists. Delete it first or choose a different name.`);
     process.exit(1);
   }
-  const pm = detectPackageManager(ctx2.projectDir ?? ctx2.root);
-  const runner = testRunnerFor(pm);
-  const content = generateTestTemplate(resolved.filePath, { importSource: runner.importSource });
-  if (writeToStdout) {
-    console.log(content);
-    return;
-  }
-  const dir = path21.dirname(resolved.filePath);
-  const base = path21.basename(resolved.filePath, path21.extname(resolved.filePath));
-  const testPath = path21.join(dir, `${base}.test.tsx`);
-  if (existsSync17(testPath) && !force) {
-    const rel2 = path21.relative(ctx2.projectDir ?? ctx2.root, testPath);
-    console.error(`Error: ${rel2} already exists. Pass --force to overwrite, or --stdout to preview.`);
-    process.exit(1);
+  const testAbsPath = path19.join(writeRoot, result.testPath);
+  const testDir = path19.dirname(testAbsPath);
+  if (!existsSync20(testDir)) {
+    mkdirSync4(testDir, { recursive: true });
   }
-  writeFileSync6(testPath, content);
-  const rel = path21.relative(ctx2.projectDir ?? ctx2.root, testPath);
-  console.log(`Created: ${rel}`);
+  writeFileSync6(componentAbsPath, result.componentCode);
+  writeFileSync6(testAbsPath, result.testCode);
+  const testCmd = commandsFor(pm).test(result.testPath);
+  console.log(`Created:`);
+  console.log(`  ${result.componentPath}`);
+  console.log(`  ${result.testPath}`);
   console.log(``);
-  console.log(`Next: ${commandsFor(pm).test(rel)}`);
+  console.log(`Next steps:`);
+  console.log(`  1. Implement the component in ${result.componentPath}`);
+  console.log(`  2. ${testCmd}`);
+  console.log(`  3. bf gen test ${componentName}  (regenerate richer test)`);
 }
-var init_gen_test = __esm({
-  "src/commands/gen-test.ts"() {
+var init_gen_component = __esm({
+  "src/commands/gen-component.ts"() {
     "use strict";
-    init_resolve_source();
-    init_test_template();
+    init_scaffold();
+    init_scaffold_layout();
     init_pm();
   }
 });
 
-// src/lib/preview-generate.ts
-function toPascalCase2(kebab) {
-  return kebab.split("-").map((w) => w[0].toUpperCase() + w.slice(1)).join("");
+// src/lib/parse-component.ts
+function parseComponent(source) {
+  return {
+    useClient: detectUseClient(source),
+    description: extractTopLevelDescription(source),
+    examples: extractExamples2(source),
+    props: extractMainProps2(source),
+    subComponents: extractSubComponents2(source),
+    variants: extractVariants2(source),
+    accessibility: extractAccessibility2(source),
+    dependencies: extractDependencies3(source),
+    exportedNames: extractExportedNames(source)
+  };
 }
-function toKebabCase(pascal) {
-  return pascal.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
+function detectUseClient(source) {
+  const firstLine = source.split("\n")[0].trim();
+  return firstLine === '"use client"' || firstLine === "'use client'";
 }
-function capitalize2(s) {
-  return s.charAt(0).toUpperCase() + s.slice(1);
+function extractTopLevelDescription(source) {
+  const match = source.match(/^(?:"use client"\n+)?\/\*\*\n([\s\S]*?)\*\//m);
+  if (!match) return "";
+  const block = match[1];
+  const lines = block.split("\n");
+  const descLines = [];
+  for (const line of lines) {
+    const cleaned = line.replace(/^\s*\*\s?/, "").trim();
+    if (cleaned.startsWith("@")) break;
+    descLines.push(cleaned);
+  }
+  return descLines.join(" ").replace(/\s+/g, " ").trim();
 }
-function inferVariantPropName(typeName, props) {
-  const match = props.find((p) => p.type === typeName);
-  return match ? match.name : null;
+function extractExamples2(source) {
+  const match = source.match(/^(?:"use client"\n+)?\/\*\*\n([\s\S]*?)\*\//m);
+  if (!match) return [];
+  const block = match[1];
+  const examples = [];
+  const exampleRegex = /@example\s+(.*?)(?:\n\s*\*\s*```tsx?\n([\s\S]*?)```)/g;
+  let m;
+  while ((m = exampleRegex.exec(block)) !== null) {
+    const title = m[1].trim();
+    const code = m[2].split("\n").map((l) => l.replace(/^\s*\*\s?/, "")).join("\n").trim();
+    examples.push({ title, code });
+  }
+  return examples;
 }
-function findExternalTags(code, knownNames) {
-  const external = [];
-  for (const m of code.matchAll(/<([A-Z][a-zA-Z]*)/g)) {
-    if (!knownNames.has(m[1]) && !external.includes(m[1])) {
-      external.push(m[1]);
+function extractMainProps2(source) {
+  const match = source.match(/interface\s+(\w+Props)\s+(?:extends\s+[\w<>,\s]+\s+)?\{/);
+  if (!match) return [];
+  return extractPropsFromInterface(source, match.index);
+}
+function extractPropsFromInterface(source, startIndex) {
+  const bodyStart = source.indexOf("{", startIndex);
+  if (bodyStart === -1) return [];
+  let depth = 0;
+  let bodyEnd = bodyStart;
+  for (let i = bodyStart; i < source.length; i++) {
+    if (source[i] === "{") depth++;
+    else if (source[i] === "}") {
+      depth--;
+      if (depth === 0) {
+        bodyEnd = i;
+        break;
+      }
     }
   }
-  return external;
+  const body = source.slice(bodyStart + 1, bodyEnd);
+  return parsePropsBody(body);
 }
-function splitExampleCode(code) {
-  const lines = code.split("\n");
-  const firstJsxLine = lines.findIndex((l) => l.trim().startsWith("<"));
-  if (firstJsxLine <= 0) {
-    return { statements: [], jsx: code };
+function parsePropsBody(body) {
+  const props = [];
+  const propRegex = /(?:\/\*\*\s*([\s\S]*?)\s*\*\/\s*)?([\w]+)(\??):\s*([^\n]+)/g;
+  let m;
+  while ((m = propRegex.exec(body)) !== null) {
+    const jsdoc = m[1] || "";
+    const name = m[2];
+    const optional = m[3] === "?";
+    const rawType = m[4].trim();
+    if (name.startsWith("__")) continue;
+    const type = rawType.replace(/;?\s*$/, "").trim();
+    const description = extractPropDescription(jsdoc);
+    const defaultMatch = jsdoc.match(/@default\s+(.+?)(?:\s*$|\s*\*)/m);
+    const defaultValue = defaultMatch ? defaultMatch[1].trim().replace(/^['"]|['"]$/g, "") : void 0;
+    props.push({
+      name,
+      type,
+      required: !optional && defaultValue === void 0,
+      default: defaultValue,
+      description
+    });
+  }
+  return props;
+}
+function extractPropDescription(jsdoc) {
+  if (!jsdoc) return "";
+  const lines = jsdoc.split("\n");
+  const descLines = [];
+  for (const line of lines) {
+    const cleaned = line.replace(/^\s*\*?\s*/, "").trim();
+    if (cleaned.startsWith("@")) break;
+    if (cleaned) descLines.push(cleaned);
+  }
+  return descLines.join(" ").trim();
+}
+function extractSubComponents2(source) {
+  const exportedNames = extractExportedNames(source);
+  if (exportedNames.length <= 1) return [];
+  const subs = [];
+  const interfaceRegex = /interface\s+(\w+Props)\s+(?:extends\s+[\w<>,\s]+\s+)?\{/g;
+  const interfaces = [];
+  let im;
+  while ((im = interfaceRegex.exec(source)) !== null) {
+    interfaces.push({ name: im[1], index: im.index });
+  }
+  for (let i = 1; i < interfaces.length; i++) {
+    const iface = interfaces[i];
+    const componentName = iface.name.replace(/Props$/, "");
+    if (!exportedNames.includes(componentName)) continue;
+    const beforeInterface = source.slice(Math.max(0, iface.index - 300), iface.index);
+    const jsdocMatch = beforeInterface.match(/\/\*\*\s*([\s\S]*?)\s*\*\/\s*$/);
+    const description = jsdocMatch ? extractPropDescription(jsdocMatch[1]) : "";
+    const props = extractPropsFromInterface(source, iface.index);
+    subs.push({ name: componentName, description, props });
+  }
+  return subs;
+}
+function extractVariants2(source) {
+  const variants = {};
+  const typeRegex = /type\s+(\w+(?:Variant|Size|Orientation|Side|Position))\s*=\s*([^\n]+)/g;
+  let m;
+  while ((m = typeRegex.exec(source)) !== null) {
+    const name = m[1];
+    const values = m[2].match(/'([^']+)'/g);
+    if (values) {
+      variants[name] = values.map((v) => v.replace(/'/g, ""));
+    }
+  }
+  return variants;
+}
+function extractAccessibility2(source) {
+  const roleMatches = source.match(/role[={"]+([^"}\s]+)/g);
+  const roles = /* @__PURE__ */ new Set();
+  if (roleMatches) {
+    for (const rm of roleMatches) {
+      const val = rm.match(/role[={"]+([^"}\s]+)/);
+      if (val) roles.add(val[1]);
+    }
   }
+  const ariaMatches = source.match(/aria-[\w]+/g);
+  const ariaAttrs = [...new Set(ariaMatches || [])];
+  const dataMatches = source.match(/data-(?:state|slot|orientation|value|disabled|side)[\w-]*/g);
+  const dataAttrs = [...new Set(dataMatches || [])];
   return {
-    statements: lines.slice(0, firstJsxLine).filter((l) => l.trim() !== ""),
-    jsx: lines.slice(firstJsxLine).join("\n")
+    role: roles.size > 0 ? [...roles].join(", ") : void 0,
+    ariaAttributes: ariaAttrs,
+    dataAttributes: dataAttrs
   };
 }
-function isSimpleJsx(code) {
-  const trimmed = code.trim();
-  return trimmed.startsWith("<") && !trimmed.includes("createSignal");
+function extractDependencies3(source) {
+  const internal = [];
+  const external = [];
+  const importRegex = /import\s+(?:type\s+)?(?:\{[^}]*\}|[\w]+)\s+from\s+['"]([^'"]+)['"]/g;
+  let m;
+  while ((m = importRegex.exec(source)) !== null) {
+    const specifier = m[1];
+    if (m[0].includes("import type")) continue;
+    if (specifier.startsWith("./") || specifier.startsWith("../")) {
+      const parts = specifier.split("/");
+      const name = parts[parts.length - 1].replace(/\.tsx?$/, "");
+      if (name !== "types" && name !== "index") {
+        internal.push(name);
+      }
+    } else {
+      external.push(specifier);
+    }
+  }
+  return {
+    internal: [...new Set(internal)],
+    external: [...new Set(external)]
+  };
+}
+function extractExportedNames(source) {
+  const names = [];
+  const seen = /* @__PURE__ */ new Set();
+  const add = (n) => {
+    if (!n) return;
+    const trimmed = n.trim();
+    if (!trimmed || seen.has(trimmed)) return;
+    if (trimmed.startsWith("type ")) return;
+    seen.add(trimmed);
+    names.push(trimmed);
+  };
+  const braceRegex = /export\s+\{([^}]+)\}/g;
+  let bm;
+  while ((bm = braceRegex.exec(source)) !== null) {
+    for (const part of bm[1].split(",")) {
+      const trimmed = part.trim();
+      if (!trimmed || trimmed.startsWith("type ")) continue;
+      const asMatch = trimmed.match(/\s+as\s+(\w+)$/);
+      add(asMatch ? asMatch[1] : trimmed);
+    }
+  }
+  const fnRegex = /export\s+(?:default\s+)?(?:async\s+)?function\s+(\w+)/g;
+  let fm;
+  while ((fm = fnRegex.exec(source)) !== null) add(fm[1]);
+  const varRegex = /export\s+(?:const|let|var)\s+(\w+)\s*[=:]/g;
+  let vm;
+  while ((vm = varRegex.exec(source)) !== null) add(vm[1]);
+  const defaultRegex = /export\s+default\s+(\w+)\s*;?\s*$/m;
+  const dm = defaultRegex.exec(source);
+  if (dm) add(dm[1]);
+  return names;
 }
-function generatePreview(meta, componentsBasePath = "ui/components/ui") {
-  const pascalName = toPascalCase2(meta.name);
-  const hasVariants = meta.variants != null && Object.keys(meta.variants).length > 0;
-  const hasSubComponents = meta.subComponents != null && meta.subComponents.length > 0;
-  let needsClient = meta.stateful || meta.tags.includes("stateful");
-  const exampleCode = hasSubComponents && meta.examples.length > 0 ? meta.examples[0].code : "";
-  if (exampleCode.includes("createSignal")) {
-    needsClient = true;
+var init_parse_component = __esm({
+  "src/lib/parse-component.ts"() {
+    "use strict";
   }
-  const needsCreateSignalImport = exampleCode.includes("createSignal");
+});
+
+// src/lib/test-template.ts
+import { readFileSync as readFileSync9 } from "fs";
+import path20 from "path";
+function generateTestTemplate(componentPath, options = {}) {
+  const importSource = options.importSource ?? "bun:test";
+  const source = readFileSync9(componentPath, "utf-8");
+  const parsed = parseComponent(source);
+  const fileName = path20.basename(componentPath);
+  const baseName = fileName.replace(/\.tsx$/, "");
+  const relativePath = fileName;
+  const varName = toCamelCase2(baseName) + "Source";
+  const exportedNames = parsed.exportedNames;
+  const mainComponent = exportedNames[0];
+  const hasSubComponents = exportedNames.length > 1;
   const lines = [];
-  const previewNames = [];
-  lines.push("// Auto-generated preview. Customize by editing this file.");
-  if (needsClient) {
-    lines.push('"use client"');
-  }
-  lines.push("");
-  if (needsCreateSignalImport) {
-    lines.push("import { createSignal } from '@barefootjs/client'");
+  lines.push(`import { describe, test, expect } from '${importSource}'`);
+  lines.push(`import { readFileSync } from 'fs'`);
+  lines.push(`import { resolve } from 'path'`);
+  lines.push(`import { renderToTest } from '@barefootjs/test'`);
+  lines.push(``);
+  lines.push(`const ${varName} = readFileSync(resolve(__dirname, '${relativePath}'), 'utf-8')`);
+  lines.push(``);
+  if (mainComponent) {
+    lines.push(...generateDescribeBlock(source, parsed, mainComponent, varName, fileName, hasSubComponents));
   }
-  const componentImports = [pascalName];
-  const subNames = [];
   if (hasSubComponents) {
-    for (const sub2 of meta.subComponents) {
-      componentImports.push(sub2.name);
-      subNames.push(sub2.name);
+    for (let i = 1; i < exportedNames.length; i++) {
+      lines.push(``);
+      lines.push(...generateDescribeBlock(source, parsed, exportedNames[i], varName, fileName, true));
     }
   }
-  lines.push(`import { ${componentImports.join(", ")} } from '../${meta.name}'`);
-  if (hasSubComponents && exampleCode) {
-    const knownNames = /* @__PURE__ */ new Set([pascalName, ...subNames]);
-    for (const tag of findExternalTags(exampleCode, knownNames)) {
-      lines.push(`import { ${tag} } from '../${toKebabCase(tag)}'`);
+  return lines.join("\n") + "\n";
+}
+function generateDescribeBlock(source, parsed, componentName, varName, fileName, multiComponent) {
+  const lines = [];
+  const renderArg = multiComponent ? `, '${componentName}'` : "";
+  const funcInfo = analyzeFunction(source, componentName);
+  lines.push(`describe('${componentName}', () => {`);
+  lines.push(`  const result = renderToTest(${varName}, '${fileName}'${renderArg})`);
+  lines.push(``);
+  lines.push(`  test('has no compiler errors', () => {`);
+  lines.push(`    expect(result.errors).toEqual([])`);
+  lines.push(`  })`);
+  lines.push(``);
+  lines.push(`  test('componentName is ${componentName}', () => {`);
+  lines.push(`    expect(result.componentName).toBe('${componentName}')`);
+  lines.push(`  })`);
+  lines.push(``);
+  if (funcInfo.signals.length > 0) {
+    lines.push(`  test('has expected signals', () => {`);
+    for (const sig of funcInfo.signals) {
+      lines.push(`    expect(result.signals).toContain('${sig}')`);
     }
-  }
-  lines.push("");
-  if (hasSubComponents) {
-    generateMultiComponent(lines, previewNames, meta, pascalName, subNames);
-  } else if (needsClient && hasVariants) {
-    generateStatefulWithVariants(lines, previewNames, meta, pascalName);
-  } else if (needsClient) {
-    generateStateful(lines, previewNames, meta, pascalName);
-  } else if (hasVariants) {
-    generateStatelessWithVariants(lines, previewNames, meta, pascalName);
+    lines.push(`  })`);
   } else {
-    generateStatelessSimple(lines, previewNames, meta, pascalName);
+    lines.push(`  test('no signals (stateless)', () => {`);
+    lines.push(`    expect(result.signals).toEqual([])`);
+    lines.push(`  })`);
   }
-  lines.push("");
-  return {
-    code: lines.join("\n"),
-    previewNames,
-    filePath: `${componentsBasePath}/${meta.name}/index.preview.tsx`
-  };
-}
-function generateStatelessWithVariants(lines, previewNames, meta, pascalName) {
-  previewNames.push("Default");
-  lines.push("export function Default() {");
-  lines.push(`  return <${pascalName}>${meta.title}</${pascalName}>`);
-  lines.push("}");
-  lines.push("");
-  for (const [typeName, values] of Object.entries(meta.variants)) {
-    const propName = inferVariantPropName(typeName, meta.props);
-    if (!propName) continue;
-    const funcName = capitalize2(propName) + "s";
-    previewNames.push(funcName);
-    lines.push(`export function ${funcName}() {`);
-    lines.push("  return (");
-    lines.push('    <div className="flex flex-wrap items-center gap-4">');
-    for (const value of values) {
-      lines.push(`      <${pascalName} ${propName}="${value}">${capitalize2(value)}</${pascalName}>`);
+  lines.push(``);
+  if (funcInfo.rootTag) {
+    const isComponentRoot = /^[A-Z]/.test(funcInfo.rootTag);
+    lines.push(`  test('renders as <${funcInfo.rootTag}>', () => {`);
+    if (funcInfo.hasConditionalReturn) {
+      lines.push(`    // Component has conditional return (e.g., asChild branch)`);
+      const finder = isComponentRoot ? `result.find({ componentName: '${funcInfo.rootTag}' })` : `result.find({ tag: '${funcInfo.rootTag}' })`;
+      lines.push(`    expect(${finder}).not.toBeNull()`);
+    } else if (isComponentRoot) {
+      lines.push(`    expect(result.root.componentName).toBe('${funcInfo.rootTag}')`);
+    } else {
+      lines.push(`    expect(result.root.tag).toBe('${funcInfo.rootTag}')`);
     }
-    lines.push("    </div>");
-    lines.push("  )");
-    lines.push("}");
-    lines.push("");
+    lines.push(`  })`);
+    lines.push(``);
   }
-}
-function generateStatelessSimple(lines, previewNames, meta, pascalName) {
-  previewNames.push("Default");
-  lines.push("export function Default() {");
-  const simpleExample = meta.examples.find((e) => isSimpleJsx(e.code));
-  if (simpleExample) {
-    const jsxLines = simpleExample.code.split("\n");
-    if (jsxLines.length === 1) {
-      lines.push(`  return ${simpleExample.code}`);
+  if (funcInfo.dataSlot) {
+    lines.push(`  test('has data-slot=${funcInfo.dataSlot}', () => {`);
+    if (funcInfo.hasConditionalReturn) {
+      lines.push(`    const el = result.find({ tag: '${funcInfo.rootTag}' })!`);
+      lines.push(`    expect(el.props['data-slot']).toBe('${funcInfo.dataSlot}')`);
     } else {
-      lines.push("  return (");
-      for (const l of jsxLines) {
-        lines.push(`    ${l}`);
-      }
-      lines.push("  )");
+      lines.push(`    expect(result.root.props['data-slot']).toBe('${funcInfo.dataSlot}')`);
     }
-  } else {
-    const hasChildren = meta.props.some((p) => p.name === "children");
-    if (hasChildren) {
-      lines.push(`  return <${pascalName}>${meta.title}</${pascalName}>`);
+    lines.push(`  })`);
+    lines.push(``);
+  }
+  if (funcInfo.role) {
+    lines.push(`  test('has role=${funcInfo.role}', () => {`);
+    lines.push(`    const el = result.find({ role: '${funcInfo.role}' })`);
+    lines.push(`    expect(el).not.toBeNull()`);
+    lines.push(`  })`);
+    lines.push(``);
+  }
+  const ariaAttrs = funcInfo.ariaAttributes;
+  if (ariaAttrs.length > 0) {
+    lines.push(`  test('has ARIA attributes', () => {`);
+    const findTarget = funcInfo.role ? `result.find({ role: '${funcInfo.role}' })!` : funcInfo.rootTag ? `result.find({ tag: '${funcInfo.rootTag}' })!` : "result.root";
+    lines.push(`    const el = ${findTarget}`);
+    for (const attr of ariaAttrs) {
+      const shortName = attr.replace("aria-", "");
+      lines.push(`    expect(el.aria).toHaveProperty('${shortName}')`);
+    }
+    lines.push(`  })`);
+    lines.push(``);
+  }
+  if (funcInfo.hasDataState) {
+    lines.push(`  test('has data-state attribute', () => {`);
+    if (funcInfo.hasConditionalReturn) {
+      lines.push(`    const el = result.find({ tag: '${funcInfo.rootTag}' })!`);
+      lines.push(`    expect(el.dataState).not.toBeNull()`);
     } else {
-      lines.push(`  return <${pascalName} />`);
+      lines.push(`    expect(result.root.dataState).not.toBeNull()`);
     }
+    lines.push(`  })`);
+    lines.push(``);
   }
-  lines.push("}");
-  lines.push("");
-}
-function generateStateful(lines, previewNames, meta, pascalName) {
-  previewNames.push("Default");
-  lines.push("export function Default() {");
-  lines.push("  return (");
-  lines.push('    <div className="flex gap-4">');
-  lines.push(`      <${pascalName} />`);
-  const defaultStateProp = meta.props.find(
-    (p) => p.name === "defaultChecked" || p.name === "defaultPressed" || p.name === "defaultValue" || p.name === "defaultOpen"
-  );
-  if (defaultStateProp) {
-    lines.push(`      <${pascalName} ${defaultStateProp.name} />`);
+  if (funcInfo.events.length > 0) {
+    lines.push(`  test('has event handlers', () => {`);
+    lines.push(`    const all = result.findAll({})`);
+    for (const event of funcInfo.events) {
+      const onProp = ON_PROP_BY_EVENT[event];
+      lines.push(`    expect(`);
+      lines.push(`      all.some(n => n.events.includes('${event}') || n.props['${onProp}'] != null),`);
+      lines.push(`    ).toBe(true)`);
+    }
+    lines.push(`  })`);
+    lines.push(``);
   }
-  if (meta.props.some((p) => p.name === "disabled")) {
-    lines.push(`      <${pascalName} disabled />`);
+  if (funcInfo.childComponents.length > 0) {
+    lines.push(`  test('contains child components', () => {`);
+    for (const child of funcInfo.childComponents) {
+      lines.push(`    expect(result.find({ componentName: '${child}' })).not.toBeNull()`);
+    }
+    lines.push(`  })`);
+    lines.push(``);
   }
-  lines.push("    </div>");
-  lines.push("  )");
-  lines.push("}");
-  lines.push("");
+  lines.push(`  test('toStructure() shows expected tree', () => {`);
+  lines.push(`    const structure = result.toStructure()`);
+  lines.push(`    expect(structure.length).toBeGreaterThan(0)`);
+  if (funcInfo.rootTag) {
+    lines.push(`    expect(structure).toContain('${funcInfo.rootTag}')`);
+  }
+  if (funcInfo.role) {
+    lines.push(`    expect(structure).toContain('[role=${funcInfo.role}]')`);
+  }
+  lines.push(`  })`);
+  lines.push(`})`);
+  return lines;
 }
-function generateStatefulWithVariants(lines, previewNames, meta, pascalName) {
-  generateStateful(lines, previewNames, meta, pascalName);
-  const hasChildren = meta.props.some((p) => p.name === "children");
-  for (const [typeName, values] of Object.entries(meta.variants)) {
-    const propName = inferVariantPropName(typeName, meta.props);
-    if (!propName) continue;
-    const funcName = capitalize2(propName) + "s";
-    previewNames.push(funcName);
-    lines.push(`export function ${funcName}() {`);
-    lines.push("  return (");
-    lines.push('    <div className="flex flex-wrap items-center gap-4">');
-    for (const value of values) {
-      if (hasChildren) {
-        lines.push(`      <${pascalName} ${propName}="${value}">${capitalize2(value)}</${pascalName}>`);
-      } else {
-        lines.push(`      <${pascalName} ${propName}="${value}" />`);
-      }
+function analyzeFunction(source, componentName) {
+  const funcRegex = new RegExp(`function\\s+${componentName}\\s*\\(`);
+  const funcMatch = funcRegex.exec(source);
+  let funcBody = source;
+  if (!funcMatch) {
+    const aliasMatch = source.match(new RegExp(`const\\s+${componentName}\\s*=\\s*(\\w+)`));
+    if (aliasMatch) {
+      return analyzeFunction(source, aliasMatch[1]);
     }
-    lines.push("    </div>");
-    lines.push("  )");
-    lines.push("}");
-    lines.push("");
   }
-}
-function generateMultiComponent(lines, previewNames, meta, pascalName, _subNames) {
-  previewNames.push("Default");
-  if (meta.examples.length > 0) {
-    const example = meta.examples[0];
-    const { statements, jsx } = splitExampleCode(example.code);
-    lines.push("export function Default() {");
-    for (const stmt of statements) {
-      lines.push(`  ${stmt}`);
-    }
-    const definedNames = new Set(
-      statements.flatMap((s) => [...s.matchAll(/\b(?:const|let|var)\s+(?:\[([^\]]+)\]|(\w+))/g)]).flatMap((m) => m[1] ? m[1].split(",").map((v) => v.trim()) : [m[2]])
-    );
-    const handlerRefs = [...new Set([...jsx.matchAll(/\b(handle[A-Z]\w*)\b/g)].map((m) => m[1]))];
-    for (const h of handlerRefs) {
-      if (!definedNames.has(h)) {
-        lines.push(`  const ${h} = () => {}`);
+  if (funcMatch) {
+    const parenStart = source.indexOf("(", funcMatch.index);
+    let parenDepth = 0;
+    let parenEnd = parenStart;
+    for (let i = parenStart; i < source.length; i++) {
+      if (source[i] === "(") parenDepth++;
+      else if (source[i] === ")") {
+        parenDepth--;
+        if (parenDepth === 0) {
+          parenEnd = i;
+          break;
+        }
       }
     }
-    if (statements.length > 0 || handlerRefs.length > 0) {
-      lines.push("");
-    }
-    const jsxLines = jsx.split("\n");
-    if (jsxLines.length === 1) {
-      lines.push(`  return ${jsx}`);
-    } else {
-      lines.push("  return (");
-      for (const l of jsxLines) {
-        lines.push(`    ${l}`);
+    let depth = 0;
+    let bodyStart = -1;
+    for (let i = parenEnd + 1; i < source.length; i++) {
+      if (source[i] === "{") {
+        if (bodyStart === -1) bodyStart = i;
+        depth++;
+      } else if (source[i] === "}") {
+        depth--;
+        if (depth === 0) {
+          funcBody = source.slice(bodyStart, i + 1);
+          break;
+        }
       }
-      lines.push("  )");
     }
-    lines.push("}");
-  } else {
-    lines.push("export function Default() {");
-    lines.push("  return (");
-    lines.push(`    <${pascalName}>`);
-    for (const sub2 of meta.subComponents) {
-      const hasChildrenProp = sub2.props.some((p) => p.name === "children");
-      const label = sub2.name.replace(pascalName, "") || sub2.name;
-      if (hasChildrenProp) {
-        lines.push(`      <${sub2.name}>${label}</${sub2.name}>`);
-      } else {
-        lines.push(`      <${sub2.name} />`);
-      }
+  }
+  const signals = [];
+  const signalRegex = /const\s+\[(\w+),\s*\w+\]\s*=\s*createSignal/g;
+  let sm;
+  while ((sm = signalRegex.exec(funcBody)) !== null) {
+    signals.push(sm[1]);
+  }
+  const returnMatches = [...funcBody.matchAll(/return\s*\(?\s*<(\w+)/g)];
+  const rootTag = returnMatches.length > 0 ? returnMatches[returnMatches.length - 1][1] : null;
+  const allSlots = [...funcBody.matchAll(/data-slot="([^"]+)"/g)].map((m) => m[1]);
+  const expectedSlot = componentName.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+  const dataSlot = allSlots.find((s) => s === expectedSlot) || allSlots[0] || null;
+  const roleMatch = funcBody.match(/role="([^"]+)"/);
+  const role = roleMatch ? roleMatch[1] : null;
+  const ariaMatches = funcBody.match(/aria-[\w]+(?==)/g);
+  const ariaAttributes = [...new Set(ariaMatches || [])].filter((a) => a !== "aria-invalid");
+  const hasDataState = /data-state=/.test(funcBody);
+  const hasConditionalReturn = /if\s*\(.*\)\s*\{?\s*return/.test(funcBody);
+  const events = [];
+  for (const [event, onProp] of Object.entries(ON_PROP_BY_EVENT)) {
+    if (new RegExp(`${onProp}=`).test(funcBody)) events.push(event);
+  }
+  const childCompRegex = /<([A-Z][A-Za-z]+)[\s/>]/g;
+  const childComponents = [];
+  let cm;
+  while ((cm = childCompRegex.exec(funcBody)) !== null) {
+    if (!childComponents.includes(cm[1])) {
+      childComponents.push(cm[1]);
     }
-    lines.push(`    </${pascalName}>`);
-    lines.push("  )");
-    lines.push("}");
   }
-  lines.push("");
+  return {
+    signals,
+    rootTag,
+    dataSlot,
+    role,
+    ariaAttributes,
+    hasDataState,
+    hasConditionalReturn,
+    events,
+    childComponents
+  };
 }
-var init_preview_generate = __esm({
-  "src/lib/preview-generate.ts"() {
+function toCamelCase2(kebab) {
+  return kebab.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+var ON_PROP_BY_EVENT;
+var init_test_template = __esm({
+  "src/lib/test-template.ts"() {
+    "use strict";
+    init_parse_component();
+    ON_PROP_BY_EVENT = {
+      click: "onClick",
+      input: "onInput",
+      change: "onChange",
+      keydown: "onKeyDown"
+    };
+  }
+});
+
+// src/commands/gen-test.ts
+var gen_test_exports = {};
+__export(gen_test_exports, {
+  run: () => run12
+});
+import { existsSync as existsSync21, writeFileSync as writeFileSync7 } from "fs";
+import path21 from "path";
+function run12(args2, ctx2) {
+  const positional = args2.filter((a) => !a.startsWith("-"));
+  const flagSet = new Set(args2.filter((a) => a.startsWith("-")));
+  const writeToStdout = flagSet.has("--stdout");
+  const force = flagSet.has("--force") || flagSet.has("-f");
+  const componentName = positional[0];
+  if (!componentName) {
+    console.error("Error: Component name required. Usage: bf gen test <component> [--stdout] [--force]");
+    process.exit(1);
+  }
+  const searched = [];
+  const resolved = resolveComponentSource(componentName, ctx2, searched);
+  if (!resolved) {
+    console.error(`Error: Cannot find component "${componentName}".`);
+    console.error("Looked in:");
+    for (const p of searched) console.error(`  - ${p}`);
+    process.exit(1);
+  }
+  const pm = detectPackageManager(ctx2.projectDir ?? ctx2.root);
+  const runner = testRunnerFor(pm);
+  const content = generateTestTemplate(resolved.filePath, { importSource: runner.importSource });
+  if (writeToStdout) {
+    console.log(content);
+    return;
+  }
+  const dir = path21.dirname(resolved.filePath);
+  const base = path21.basename(resolved.filePath, path21.extname(resolved.filePath));
+  const testPath = path21.join(dir, `${base}.test.tsx`);
+  if (existsSync21(testPath) && !force) {
+    const rel2 = path21.relative(ctx2.projectDir ?? ctx2.root, testPath);
+    console.error(`Error: ${rel2} already exists. Pass --force to overwrite, or --stdout to preview.`);
+    process.exit(1);
+  }
+  writeFileSync7(testPath, content);
+  const rel = path21.relative(ctx2.projectDir ?? ctx2.root, testPath);
+  console.log(`Created: ${rel}`);
+  console.log(``);
+  console.log(`Next: ${commandsFor(pm).test(rel)}`);
+}
+var init_gen_test = __esm({
+  "src/commands/gen-test.ts"() {
     "use strict";
+    init_resolve_source();
+    init_test_template();
+    init_pm();
   }
 });
 
@@ -25949,7 +26851,7 @@ var gen_preview_exports = {};
 __export(gen_preview_exports, {
   run: () => run13
 });
-import { existsSync as existsSync18, writeFileSync as writeFileSync7, mkdirSync as mkdirSync5 } from "fs";
+import { existsSync as existsSync22, writeFileSync as writeFileSync8, mkdirSync as mkdirSync5 } from "fs";
 import path22 from "path";
 async function run13(args2, ctx2) {
   const force = args2.includes("--force");
@@ -25962,15 +26864,15 @@ async function run13(args2, ctx2) {
   const { writeRoot, componentsBasePath } = resolveScaffoldLayout(ctx2);
   const result = generatePreview(meta, componentsBasePath);
   const absPath = path22.join(writeRoot, result.filePath);
-  if (existsSync18(absPath) && !force) {
+  if (existsSync22(absPath) && !force) {
     console.error(`Error: ${result.filePath} already exists. Use --force to overwrite.`);
     process.exit(1);
   }
   const dir = path22.dirname(absPath);
-  if (!existsSync18(dir)) {
+  if (!existsSync22(dir)) {
     mkdirSync5(dir, { recursive: true });
   }
-  writeFileSync7(absPath, result.code);
+  writeFileSync8(absPath, result.code);
   console.log(`Generated ${result.filePath}`);
   console.log(`Previews: ${result.previewNames.join(", ")}`);
 }
@@ -25988,7 +26890,7 @@ var debug_graph_exports = {};
 __export(debug_graph_exports, {
   run: () => run14
 });
-import { readFileSync as readFileSync9 } from "fs";
+import { readFileSync as readFileSync10 } from "fs";
 async function run14(args2, ctx2) {
   const componentName = args2[0];
   if (!componentName) {
@@ -26005,7 +26907,7 @@ async function run14(args2, ctx2) {
     for (const p of searched) console.error(`  - ${p}`);
     process.exit(1);
   }
-  const source = readFileSync9(resolved.filePath, "utf-8");
+  const source = readFileSync10(resolved.filePath, "utf-8");
   const graph = buildComponentGraph2(source, resolved.filePath, resolved.componentName);
   if (ctx2.jsonFlag) {
     console.log(JSON.stringify(graphToJSON2(graph), null, 2));
@@ -26025,7 +26927,7 @@ var debug_trace_exports = {};
 __export(debug_trace_exports, {
   run: () => run15
 });
-import { readFileSync as readFileSync10 } from "fs";
+import { readFileSync as readFileSync11 } from "fs";
 async function run15(args2, ctx2) {
   const componentName = args2[0];
   const targetName = args2[1];
@@ -26043,7 +26945,7 @@ async function run15(args2, ctx2) {
     for (const p of searched) console.error(`  - ${p}`);
     process.exit(1);
   }
-  const source = readFileSync10(resolved.filePath, "utf-8");
+  const source = readFileSync11(resolved.filePath, "utf-8");
   const graph = buildComponentGraph2(source, resolved.filePath, resolved.componentName);
   const path23 = traceUpdatePath2(graph, targetName);
   if (!path23) {
@@ -26075,7 +26977,7 @@ var debug_fallbacks_exports = {};
 __export(debug_fallbacks_exports, {
   run: () => run16
 });
-import { readFileSync as readFileSync11 } from "fs";
+import { readFileSync as readFileSync12 } from "fs";
 async function run16(args2, ctx2) {
   const componentName = args2[0];
   if (!componentName) {
@@ -26083,7 +26985,7 @@ async function run16(args2, ctx2) {
     console.error("Usage: bf debug fallbacks <component> [--json]");
     process.exit(1);
   }
-  const { buildComponentGraph: buildComponentGraph2 } = await Promise.resolve().then(() => (init_src2(), src_exports));
+  const { buildComponentGraph: buildComponentGraph2, describeFallback: describeFallback2, formatFallbackExplanations: formatFallbackExplanations2 } = await Promise.resolve().then(() => (init_src2(), src_exports));
   const searched = [];
   const resolved = resolveComponentSource(componentName, ctx2, searched);
   if (!resolved) {
@@ -26092,45 +26994,35 @@ async function run16(args2, ctx2) {
     for (const p of searched) console.error(`  - ${p}`);
     process.exit(1);
   }
-  const source = readFileSync11(resolved.filePath, "utf-8");
+  const source = readFileSync12(resolved.filePath, "utf-8");
   const graph = buildComponentGraph2(source, resolved.filePath, resolved.componentName);
-  const fallbacks = graph.domBindings.filter((d) => d.classification === "fallback");
+  const isEventHandlerProp = (d) => d.type === "attribute" && /^on[A-Z]/.test(d.label.split(".").pop() ?? "");
+  const fallbacks = graph.domBindings.filter((d) => d.classification === "fallback" && !isEventHandlerProp(d));
   if (ctx2.jsonFlag) {
     console.log(JSON.stringify({
       componentName: graph.componentName,
       sourceFile: graph.sourceFile,
-      fallbacks: fallbacks.map((f) => ({
-        label: f.label,
-        slotId: f.slotId,
-        deps: f.deps,
-        type: f.type,
-        classification: f.classification,
-        ...f.expression !== void 0 && { expression: f.expression },
-        ...f.wrapReason !== void 0 && { wrapReason: f.wrapReason }
-      }))
+      fallbacks: fallbacks.map((f) => {
+        const ex = describeFallback2(f);
+        return {
+          label: f.label,
+          slotId: f.slotId,
+          deps: f.deps,
+          type: f.type,
+          classification: f.classification,
+          ...f.expression !== void 0 && { expression: f.expression },
+          ...f.wrapReason !== void 0 && { wrapReason: f.wrapReason },
+          reason: ex.reason,
+          runtimeDeps: ex.runtimeDeps,
+          suggestion: ex.suggestion,
+          isEventHandler: ex.isEventHandler,
+          ...ex.loc && { loc: ex.loc }
+        };
+      })
     }, null, 2));
     return;
   }
-  if (fallbacks.length === 0) {
-    console.log(`${graph.componentName} \u2014 no fallback-wrapped expressions.`);
-    return;
-  }
-  console.log(`${graph.componentName} \u2014 ${fallbacks.length} fallback-wrapped expression(s)`);
-  const cells = fallbacks.map((f) => {
-    const id = f.type === "attribute" ? f.label : f.slotId;
-    return { f, cell: `${f.type} "${id}"` };
-  });
-  const width = cells.reduce((w, c) => Math.max(w, c.cell.length), 0);
-  for (const { f, cell } of cells) {
-    const expr = f.expression ?? "(expression not captured)";
-    const reason = f.wrapReason ? `  [${f.wrapReason}]` : "";
-    console.log(`  ${cell.padEnd(width)}  ~ ${expr}${reason}`);
-  }
-  console.log();
-  console.log("Fallback wraps run one createEffect per expression. Each subscribes to");
-  console.log("whatever signals it happens to read at runtime (possibly none).");
-  console.log("Rewrite the expression as a createMemo to make the dependency static,");
-  console.log("or inline a known-reactive source so the emitter can prove it.");
+  console.log(formatFallbackExplanations2(graph.componentName, fallbacks));
 }
 var init_debug_fallbacks = __esm({
   "src/commands/debug-fallbacks.ts"() {
@@ -26144,7 +27036,7 @@ var debug_signals_exports = {};
 __export(debug_signals_exports, {
   run: () => run17
 });
-import { readFileSync as readFileSync12 } from "fs";
+import { readFileSync as readFileSync13 } from "fs";
 async function run17(args2, ctx2) {
   const componentName = args2[0];
   if (!componentName) {
@@ -26161,7 +27053,7 @@ async function run17(args2, ctx2) {
     for (const p of searched) console.error(`  - ${p}`);
     process.exit(1);
   }
-  const source = readFileSync12(resolved.filePath, "utf-8");
+  const source = readFileSync13(resolved.filePath, "utf-8");
   const graph = buildComponentGraph2(source, resolved.filePath, resolved.componentName);
   const trace = generateStaticTrace2(graph);
   if (ctx2.jsonFlag) {
@@ -26184,7 +27076,7 @@ var debug_events_exports = {};
 __export(debug_events_exports, {
   run: () => run18
 });
-import { readFileSync as readFileSync13 } from "fs";
+import { readFileSync as readFileSync14 } from "fs";
 async function run18(args2, ctx2) {
   const componentName = args2[0];
   if (!componentName) {
@@ -26201,7 +27093,7 @@ async function run18(args2, ctx2) {
     for (const p of searched) console.error(`  - ${p}`);
     process.exit(1);
   }
-  const source = readFileSync13(resolved.filePath, "utf-8");
+  const source = readFileSync14(resolved.filePath, "utf-8");
   const summary = buildEventSummary2(source, resolved.filePath, resolved.componentName);
   if (ctx2.jsonFlag) {
     console.log(JSON.stringify({ componentName: summary.componentName, sourceFile: summary.sourceFile, events: summary.events }, null, 2));
@@ -26221,7 +27113,7 @@ var debug_loops_exports = {};
 __export(debug_loops_exports, {
   run: () => run19
 });
-import { readFileSync as readFileSync14 } from "fs";
+import { readFileSync as readFileSync15 } from "fs";
 async function run19(args2, ctx2) {
   const componentName = args2[0];
   if (!componentName) {
@@ -26238,7 +27130,7 @@ async function run19(args2, ctx2) {
     for (const p of searched) console.error(`  - ${p}`);
     process.exit(1);
   }
-  const source = readFileSync14(resolved.filePath, "utf-8");
+  const source = readFileSync15(resolved.filePath, "utf-8");
   const summary = buildLoopSummary2(source, resolved.filePath, resolved.componentName);
   if (ctx2.jsonFlag) {
     console.log(JSON.stringify(summary, null, 2));
@@ -26253,6 +27145,101 @@ var init_debug_loops = __esm({
   }
 });
 
+// src/commands/debug-why-update.ts
+var debug_why_update_exports = {};
+__export(debug_why_update_exports, {
+  run: () => run20
+});
+import { readFileSync as readFileSync16 } from "fs";
+async function run20(args2, ctx2) {
+  const componentName = args2[0];
+  const bindingLabel = args2[1];
+  if (!componentName || !bindingLabel) {
+    console.error("Error: Component name and binding label required.");
+    console.error("Usage: bf debug why-update <component> <binding> [--json]");
+    console.error('  binding: attribute name (e.g. "style"), slot ID (e.g. "s0"),');
+    console.error('           or component prop (e.g. "Button.disabled")');
+    process.exit(1);
+  }
+  const { buildWhyUpdate: buildWhyUpdate2, formatWhyUpdate: formatWhyUpdate2, buildComponentGraph: buildComponentGraph2 } = await Promise.resolve().then(() => (init_src2(), src_exports));
+  const searched = [];
+  const resolved = resolveComponentSource(componentName, ctx2, searched);
+  if (!resolved) {
+    console.error(`Error: Cannot find component "${componentName}".`);
+    console.error("Looked in:");
+    for (const p of searched) console.error(`  - ${p}`);
+    process.exit(1);
+  }
+  const source = readFileSync16(resolved.filePath, "utf-8");
+  const result = buildWhyUpdate2(source, resolved.filePath, bindingLabel, resolved.componentName);
+  if (!result) {
+    const graph = buildComponentGraph2(source, resolved.filePath, resolved.componentName);
+    console.error(`Error: Binding "${bindingLabel}" not found in ${graph.componentName}.`);
+    const available = graph.domBindings.map(
+      (d) => d.type === "attribute" ? d.label : d.slotId
+    );
+    if (available.length > 0) {
+      console.error(`Available bindings: ${[...new Set(available)].join(", ")}`);
+    }
+    process.exit(1);
+  }
+  if (result.ambiguous) {
+    console.error(`Error: "${bindingLabel}" matches multiple bindings. Disambiguate with a slot ID:`);
+    for (const m of result.ambiguous) {
+      console.error(`  ${m.slotId} (${m.label})`);
+    }
+    process.exit(1);
+  }
+  if (ctx2.jsonFlag) {
+    console.log(JSON.stringify(result, null, 2));
+    return;
+  }
+  console.log(formatWhyUpdate2(result));
+}
+var init_debug_why_update = __esm({
+  "src/commands/debug-why-update.ts"() {
+    "use strict";
+    init_resolve_source();
+  }
+});
+
+// src/commands/debug-summary.ts
+var debug_summary_exports = {};
+__export(debug_summary_exports, {
+  run: () => run21
+});
+import { readFileSync as readFileSync17 } from "fs";
+async function run21(args2, ctx2) {
+  const componentName = args2[0];
+  if (!componentName) {
+    console.error("Error: Component name required.");
+    console.error("Usage: bf debug summary <component> [--json]");
+    process.exit(1);
+  }
+  const { buildComponentSummary: buildComponentSummary2, formatComponentSummary: formatComponentSummary2 } = await Promise.resolve().then(() => (init_src2(), src_exports));
+  const searched = [];
+  const resolved = resolveComponentSource(componentName, ctx2, searched);
+  if (!resolved) {
+    console.error(`Error: Cannot find component "${componentName}".`);
+    console.error("Looked in:");
+    for (const p of searched) console.error(`  - ${p}`);
+    process.exit(1);
+  }
+  const source = readFileSync17(resolved.filePath, "utf-8");
+  const summary = buildComponentSummary2(source, resolved.filePath, resolved.componentName);
+  if (ctx2.jsonFlag) {
+    console.log(JSON.stringify(summary, null, 2));
+    return;
+  }
+  console.log(formatComponentSummary2(summary));
+}
+var init_debug_summary = __esm({
+  "src/commands/debug-summary.ts"() {
+    "use strict";
+    init_resolve_source();
+  }
+});
+
 // src/context.ts
 import { existsSync as existsSync2 } from "fs";
 import path from "path";
@@ -26350,6 +27337,8 @@ Debug:
   debug trace <component> <signal>            Trace update propagation for a signal/memo
   debug events <component>                    Show event handlers and their update paths
   debug loops <component>                     Show loop bindings grouped by source collection
+  debug why-update <component> <binding>      Explain why a binding updates
+  debug summary <component>                   Show hydration and size summary
   debug fallbacks <component>                 Show wrap-by-default fallback bindings (#937)
   debug signals <component>                   Show signal initialization trace
 
@@ -26369,60 +27358,60 @@ Workflow:
 }
 switch (command) {
   case "build": {
-    const { run: run20 } = await Promise.resolve().then(() => (init_build2(), build_exports));
-    await run20(filteredArgs.slice(1), ctx);
+    const { run: run22 } = await Promise.resolve().then(() => (init_build2(), build_exports));
+    await run22(filteredArgs.slice(1), ctx);
     break;
   }
   case "init": {
-    const { run: run20 } = await Promise.resolve().then(() => (init_init(), init_exports));
-    await run20(filteredArgs.slice(1), ctx);
+    const { run: run22 } = await Promise.resolve().then(() => (init_init(), init_exports));
+    await run22(filteredArgs.slice(1), ctx);
     break;
   }
   case "add": {
-    const { run: run20 } = await Promise.resolve().then(() => (init_add(), add_exports));
-    await run20(filteredArgs.slice(1), ctx);
+    const { run: run22 } = await Promise.resolve().then(() => (init_add(), add_exports));
+    await run22(filteredArgs.slice(1), ctx);
     break;
   }
   case "search": {
-    const { run: run20 } = await Promise.resolve().then(() => (init_search(), search_exports));
-    await run20(filteredArgs.slice(1), ctx);
+    const { run: run22 } = await Promise.resolve().then(() => (init_search(), search_exports));
+    await run22(filteredArgs.slice(1), ctx);
     break;
   }
   case "docs": {
-    const { run: run20 } = await Promise.resolve().then(() => (init_docs(), docs_exports));
-    run20(filteredArgs.slice(1), ctx);
+    const { run: run22 } = await Promise.resolve().then(() => (init_docs(), docs_exports));
+    run22(filteredArgs.slice(1), ctx);
     break;
   }
   case "guide": {
-    const { run: run20 } = await Promise.resolve().then(() => (init_guide(), guide_exports));
-    run20(filteredArgs.slice(1), ctx);
+    const { run: run22 } = await Promise.resolve().then(() => (init_guide(), guide_exports));
+    run22(filteredArgs.slice(1), ctx);
     break;
   }
   case "preview": {
-    const { run: run20 } = await Promise.resolve().then(() => (init_preview(), preview_exports));
-    await run20(filteredArgs.slice(1), ctx);
+    const { run: run22 } = await Promise.resolve().then(() => (init_preview(), preview_exports));
+    await run22(filteredArgs.slice(1), ctx);
     break;
   }
   case "tokens": {
     if (sub === "apply") {
-      const { run: run20 } = await Promise.resolve().then(() => (init_tokens_apply(), tokens_apply_exports));
-      await run20(rest, ctx);
+      const { run: run22 } = await Promise.resolve().then(() => (init_tokens_apply(), tokens_apply_exports));
+      await run22(rest, ctx);
     } else {
-      const { run: run20 } = await Promise.resolve().then(() => (init_tokens(), tokens_exports));
-      await run20(filteredArgs.slice(1), ctx);
+      const { run: run22 } = await Promise.resolve().then(() => (init_tokens2(), tokens_exports));
+      await run22(filteredArgs.slice(1), ctx);
     }
     break;
   }
   case "gen": {
     if (sub === "component") {
-      const { run: run20 } = await Promise.resolve().then(() => (init_gen_component(), gen_component_exports));
-      run20(rest, ctx);
+      const { run: run22 } = await Promise.resolve().then(() => (init_gen_component(), gen_component_exports));
+      run22(rest, ctx);
     } else if (sub === "test") {
-      const { run: run20 } = await Promise.resolve().then(() => (init_gen_test(), gen_test_exports));
-      run20(rest, ctx);
+      const { run: run22 } = await Promise.resolve().then(() => (init_gen_test(), gen_test_exports));
+      run22(rest, ctx);
     } else if (sub === "preview") {
-      const { run: run20 } = await Promise.resolve().then(() => (init_gen_preview(), gen_preview_exports));
-      await run20(rest, ctx);
+      const { run: run22 } = await Promise.resolve().then(() => (init_gen_preview(), gen_preview_exports));
+      await run22(rest, ctx);
     } else {
       console.error("Usage: bf gen <component|test|preview> ...");
       process.exit(1);
@@ -26431,33 +27420,39 @@ switch (command) {
   }
   case "debug": {
     if (sub === "graph") {
-      const { run: run20 } = await Promise.resolve().then(() => (init_debug_graph(), debug_graph_exports));
-      await run20(rest, ctx);
+      const { run: run22 } = await Promise.resolve().then(() => (init_debug_graph(), debug_graph_exports));
+      await run22(rest, ctx);
     } else if (sub === "trace") {
-      const { run: run20 } = await Promise.resolve().then(() => (init_debug_trace(), debug_trace_exports));
-      await run20(rest, ctx);
+      const { run: run22 } = await Promise.resolve().then(() => (init_debug_trace(), debug_trace_exports));
+      await run22(rest, ctx);
     } else if (sub === "fallbacks") {
-      const { run: run20 } = await Promise.resolve().then(() => (init_debug_fallbacks(), debug_fallbacks_exports));
-      await run20(rest, ctx);
+      const { run: run22 } = await Promise.resolve().then(() => (init_debug_fallbacks(), debug_fallbacks_exports));
+      await run22(rest, ctx);
     } else if (sub === "signals") {
-      const { run: run20 } = await Promise.resolve().then(() => (init_debug_signals(), debug_signals_exports));
-      await run20(rest, ctx);
+      const { run: run22 } = await Promise.resolve().then(() => (init_debug_signals(), debug_signals_exports));
+      await run22(rest, ctx);
     } else if (sub === "events") {
-      const { run: run20 } = await Promise.resolve().then(() => (init_debug_events(), debug_events_exports));
-      await run20(rest, ctx);
+      const { run: run22 } = await Promise.resolve().then(() => (init_debug_events(), debug_events_exports));
+      await run22(rest, ctx);
     } else if (sub === "loops") {
-      const { run: run20 } = await Promise.resolve().then(() => (init_debug_loops(), debug_loops_exports));
-      await run20(rest, ctx);
+      const { run: run22 } = await Promise.resolve().then(() => (init_debug_loops(), debug_loops_exports));
+      await run22(rest, ctx);
+    } else if (sub === "why-update") {
+      const { run: run22 } = await Promise.resolve().then(() => (init_debug_why_update(), debug_why_update_exports));
+      await run22(rest, ctx);
+    } else if (sub === "summary") {
+      const { run: run22 } = await Promise.resolve().then(() => (init_debug_summary(), debug_summary_exports));
+      await run22(rest, ctx);
     } else {
-      console.error("Usage: bf debug <graph|trace|fallbacks|signals|events|loops> ...");
+      console.error("Usage: bf debug <graph|trace|fallbacks|signals|events|loops|why-update|summary> ...");
       process.exit(1);
     }
     break;
   }
   case "meta": {
     if (sub === "extract") {
-      const { run: run20 } = await Promise.resolve().then(() => (init_meta_extract(), meta_extract_exports));
-      await run20(rest, ctx);
+      const { run: run22 } = await Promise.resolve().then(() => (init_meta_extract(), meta_extract_exports));
+      await run22(rest, ctx);
     } else {
       console.error("Usage: bf meta extract");
       process.exit(1);