@agent-scope/cli 1.6.0 → 1.8.0

package/dist/index.cjs

@@ -9,6 +9,7 @@ var playwright$1 = require('playwright');
 var render = require('@agent-scope/render');
 var esbuild = require('esbuild');
 var module$1 = require('module');
+var tokens = require('@agent-scope/tokens');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -606,6 +607,471 @@ function csvEscape(value) {
   }
   return value;
 }
+
+// src/instrument/renders.ts
+var MANIFEST_PATH2 = ".reactscope/manifest.json";
+function determineTrigger(event) {
+  if (event.forceUpdate) return "force_update";
+  if (event.stateChanged) return "state_change";
+  if (event.propsChanged) return "props_change";
+  if (event.contextChanged) return "context_change";
+  if (event.hookDepsChanged) return "hook_dependency";
+  return "parent_rerender";
+}
+function isWastedRender(event) {
+  return !event.propsChanged && !event.stateChanged && !event.contextChanged && !event.memoized;
+}
+function buildCausalityChains(rawEvents) {
+  const result = [];
+  const componentLastRender = /* @__PURE__ */ new Map();
+  for (const raw of rawEvents) {
+    const trigger = determineTrigger(raw);
+    const wasted = isWastedRender(raw);
+    const chain = [];
+    let current = raw;
+    const visited = /* @__PURE__ */ new Set();
+    while (true) {
+      if (visited.has(current.component)) break;
+      visited.add(current.component);
+      const currentTrigger = determineTrigger(current);
+      chain.unshift({
+        component: current.component,
+        trigger: currentTrigger,
+        propsChanged: current.propsChanged,
+        stateChanged: current.stateChanged,
+        contextChanged: current.contextChanged
+      });
+      if (currentTrigger !== "parent_rerender" || current.parentComponent === null) {
+        break;
+      }
+      const parentEvent = componentLastRender.get(current.parentComponent);
+      if (parentEvent === void 0) break;
+      current = parentEvent;
+    }
+    const rootCause = chain[0];
+    const cascadeRenders = rawEvents.filter((e) => {
+      if (rootCause === void 0) return false;
+      return e.component !== rootCause.component && !e.stateChanged && !e.propsChanged;
+    });
+    result.push({
+      component: raw.component,
+      renderIndex: raw.renderIndex,
+      trigger,
+      propsChanged: raw.propsChanged,
+      stateChanged: raw.stateChanged,
+      contextChanged: raw.contextChanged,
+      memoized: raw.memoized,
+      wasted,
+      chain,
+      cascade: {
+        totalRendersTriggered: cascadeRenders.length,
+        uniqueComponents: new Set(cascadeRenders.map((e) => e.component)).size,
+        unchangedPropRenders: cascadeRenders.filter((e) => !e.propsChanged).length
+      }
+    });
+    componentLastRender.set(raw.component, raw);
+  }
+  return result;
+}
+function applyHeuristicFlags(renders) {
+  const flags = [];
+  const byComponent = /* @__PURE__ */ new Map();
+  for (const r of renders) {
+    if (!byComponent.has(r.component)) byComponent.set(r.component, []);
+    byComponent.get(r.component).push(r);
+  }
+  for (const [component, events] of byComponent) {
+    const wastedCount = events.filter((e) => e.wasted).length;
+    const totalCount = events.length;
+    if (wastedCount > 0) {
+      flags.push({
+        id: "WASTED_RENDER",
+        severity: "warning",
+        component,
+        detail: `${wastedCount}/${totalCount} renders were wasted \u2014 unchanged props/state/context, not memoized`,
+        data: { wastedCount, totalCount, wastedRatio: wastedCount / totalCount }
+      });
+    }
+    for (const event of events) {
+      if (event.cascade.totalRendersTriggered > 50) {
+        flags.push({
+          id: "RENDER_CASCADE",
+          severity: "warning",
+          component,
+          detail: `State change in ${component} triggered ${event.cascade.totalRendersTriggered} downstream re-renders`,
+          data: {
+            totalRendersTriggered: event.cascade.totalRendersTriggered,
+            uniqueComponents: event.cascade.uniqueComponents,
+            unchangedPropRenders: event.cascade.unchangedPropRenders
+          }
+        });
+        break;
+      }
+    }
+  }
+  return flags;
+}
+function buildInstrumentationScript() {
+  return (
+    /* js */
+    `
+(function installScopeRenderInstrumentation() {
+  window.__SCOPE_RENDER_EVENTS__ = [];
+  window.__SCOPE_RENDER_INDEX__ = 0;
+
+  var hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (!hook) return;
+
+  var originalOnCommit = hook.onCommitFiberRoot;
+  var renderedComponents = new Map(); // componentName -> { lastProps, lastState }
+
+  function extractName(fiber) {
+    if (!fiber) return 'Unknown';
+    var type = fiber.type;
+    if (!type) return 'Unknown';
+    if (typeof type === 'string') return type; // host element
+    if (typeof type === 'function') return type.displayName || type.name || 'Anonymous';
+    if (type.displayName) return type.displayName;
+    if (type.render && typeof type.render === 'function') {
+      return type.render.displayName || type.render.name || 'Anonymous';
+    }
+    return 'Anonymous';
+  }
+
+  function isMemoized(fiber) {
+    // MemoComponent = 14, SimpleMemoComponent = 15
+    return fiber.tag === 14 || fiber.tag === 15;
+  }
+
+  function isComponent(fiber) {
+    // FunctionComponent=0, ClassComponent=1, MemoComponent=14, SimpleMemoComponent=15
+    return fiber.tag === 0 || fiber.tag === 1 || fiber.tag === 14 || fiber.tag === 15;
+  }
+
+  function shallowEqual(a, b) {
+    if (a === b) return true;
+    if (!a || !b) return a === b;
+    var keysA = Object.keys(a);
+    var keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    for (var i = 0; i < keysA.length; i++) {
+      var k = keysA[i];
+      if (k === 'children') continue; // ignore children prop
+      if (a[k] !== b[k]) return false;
+    }
+    return true;
+  }
+
+  function getParentComponentName(fiber) {
+    var parent = fiber.return;
+    while (parent) {
+      if (isComponent(parent)) {
+        var name = extractName(parent);
+        if (name && name !== 'Unknown' && !/^[a-z]/.test(name)) return name;
+      }
+      parent = parent.return;
+    }
+    return null;
+  }
+
+  function walkCommit(fiber) {
+    if (!fiber) return;
+
+    if (isComponent(fiber)) {
+      var name = extractName(fiber);
+      if (name && name !== 'Unknown' && !/^[a-z]/.test(name)) {
+        var memoized = isMemoized(fiber);
+        var currentProps = fiber.memoizedProps || {};
+        var prev = renderedComponents.get(name);
+
+        var propsChanged = true;
+        var stateChanged = false;
+        var contextChanged = false;
+        var hookDepsChanged = false;
+        var forceUpdate = false;
+
+        if (prev) {
+          propsChanged = !shallowEqual(prev.lastProps, currentProps);
+        }
+
+        // State: check memoizedState chain
+        var memoizedState = fiber.memoizedState;
+        if (prev && prev.lastStateSerialized !== undefined) {
+          try {
+            var stateSig = JSON.stringify(memoizedState ? memoizedState.memoizedState : null);
+            stateChanged = stateSig !== prev.lastStateSerialized;
+          } catch (_) {
+            stateChanged = false;
+          }
+        }
+
+        // Context: use _debugHookTypes or check dependencies
+        var deps = fiber.dependencies;
+        if (deps && deps.firstContext) {
+          contextChanged = true; // conservative: context dep present = may have changed
+        }
+
+        var stateSig;
+        try {
+          stateSig = JSON.stringify(memoizedState ? memoizedState.memoizedState : null);
+        } catch (_) {
+          stateSig = null;
+        }
+
+        renderedComponents.set(name, {
+          lastProps: currentProps,
+          lastStateSerialized: stateSig,
+        });
+
+        var parentName = getParentComponentName(fiber);
+
+        window.__SCOPE_RENDER_EVENTS__.push({
+          component: name,
+          renderIndex: window.__SCOPE_RENDER_INDEX__++,
+          propsChanged: prev ? propsChanged : false,
+          stateChanged: stateChanged,
+          contextChanged: contextChanged,
+          memoized: memoized,
+          parentComponent: parentName,
+          hookDepsChanged: hookDepsChanged,
+          forceUpdate: forceUpdate,
+        });
+      }
+    }
+
+    walkCommit(fiber.child);
+    walkCommit(fiber.sibling);
+  }
+
+  hook.onCommitFiberRoot = function(rendererID, root, priorityLevel) {
+    if (typeof originalOnCommit === 'function') {
+      originalOnCommit.call(hook, rendererID, root, priorityLevel);
+    }
+    var wipRoot = root && root.current && root.current.alternate;
+    if (wipRoot) walkCommit(wipRoot);
+  };
+})();
+`
+  );
+}
+async function replayInteraction(page, steps) {
+  for (const step of steps) {
+    switch (step.action) {
+      case "click":
+        if (step.target !== void 0) {
+          await page.click(step.target, { timeout: 5e3 }).catch(() => {
+          });
+        }
+        break;
+      case "type":
+        if (step.target !== void 0 && step.text !== void 0) {
+          await page.fill(step.target, step.text, { timeout: 5e3 }).catch(async () => {
+            await page.type(step.target, step.text, { timeout: 5e3 }).catch(() => {
+            });
+          });
+        }
+        break;
+      case "hover":
+        if (step.target !== void 0) {
+          await page.hover(step.target, { timeout: 5e3 }).catch(() => {
+          });
+        }
+        break;
+      case "blur":
+        if (step.target !== void 0) {
+          await page.locator(step.target).blur({ timeout: 5e3 }).catch(() => {
+          });
+        }
+        break;
+      case "focus":
+        if (step.target !== void 0) {
+          await page.focus(step.target, { timeout: 5e3 }).catch(() => {
+          });
+        }
+        break;
+      case "scroll":
+        if (step.target !== void 0) {
+          await page.locator(step.target).scrollIntoViewIfNeeded({ timeout: 5e3 }).catch(() => {
+          });
+        }
+        break;
+      case "wait": {
+        const timeout = step.timeout ?? 1e3;
+        if (step.condition === "idle") {
+          await page.waitForLoadState("networkidle", { timeout }).catch(() => {
+          });
+        } else {
+          await page.waitForTimeout(timeout);
+        }
+        break;
+      }
+    }
+  }
+}
+var _pool = null;
+async function getPool() {
+  if (_pool === null) {
+    _pool = new render.BrowserPool({
+      size: { browsers: 1, pagesPerBrowser: 2 },
+      viewportWidth: 1280,
+      viewportHeight: 800
+    });
+    await _pool.init();
+  }
+  return _pool;
+}
+async function shutdownPool() {
+  if (_pool !== null) {
+    await _pool.close();
+    _pool = null;
+  }
+}
+async function analyzeRenders(options) {
+  const manifestPath = options.manifestPath ?? MANIFEST_PATH2;
+  const manifest = loadManifest(manifestPath);
+  const descriptor = manifest.components[options.componentName];
+  if (descriptor === void 0) {
+    const available = Object.keys(manifest.components).slice(0, 5).join(", ");
+    throw new Error(
+      `Component "${options.componentName}" not found in manifest.
+Available: ${available}`
+    );
+  }
+  const rootDir = process.cwd();
+  const filePath = path.resolve(rootDir, descriptor.filePath);
+  const htmlHarness = await buildComponentHarness(filePath, options.componentName, {}, 1280);
+  const pool = await getPool();
+  const slot = await pool.acquire();
+  const { page } = slot;
+  const startMs = performance.now();
+  try {
+    await page.addInitScript(buildInstrumentationScript());
+    await page.setContent(htmlHarness, { waitUntil: "load" });
+    await page.waitForFunction(
+      () => window.__SCOPE_RENDER_COMPLETE__ === true,
+      { timeout: 15e3 }
+    );
+    await page.waitForTimeout(100);
+    await page.evaluate(() => {
+      window.__SCOPE_RENDER_EVENTS__ = [];
+      window.__SCOPE_RENDER_INDEX__ = 0;
+    });
+    await replayInteraction(page, options.interaction);
+    await page.waitForTimeout(200);
+    const interactionDurationMs = performance.now() - startMs;
+    const rawEvents = await page.evaluate(() => {
+      return window.__SCOPE_RENDER_EVENTS__ ?? [];
+    });
+    const renders = buildCausalityChains(rawEvents);
+    const flags = applyHeuristicFlags(renders);
+    const uniqueComponents = new Set(renders.map((r) => r.component)).size;
+    const wastedRenders = renders.filter((r) => r.wasted).length;
+    return {
+      component: options.componentName,
+      interaction: options.interaction,
+      summary: {
+        totalRenders: renders.length,
+        uniqueComponents,
+        wastedRenders,
+        interactionDurationMs: Math.round(interactionDurationMs)
+      },
+      renders,
+      flags
+    };
+  } finally {
+    pool.release(slot);
+  }
+}
+function formatRendersTable(result) {
+  const lines = [];
+  lines.push(`
+\u{1F50D} Re-render Analysis: ${result.component}`);
+  lines.push(`${"\u2500".repeat(60)}`);
+  lines.push(`Total renders:    ${result.summary.totalRenders}`);
+  lines.push(`Unique components: ${result.summary.uniqueComponents}`);
+  lines.push(`Wasted renders:   ${result.summary.wastedRenders}`);
+  lines.push(`Duration:         ${result.summary.interactionDurationMs}ms`);
+  lines.push("");
+  if (result.renders.length === 0) {
+    lines.push("No re-renders captured during interaction.");
+  } else {
+    lines.push("Re-renders:");
+    lines.push(
+      `${"#".padEnd(4)} ${"Component".padEnd(30)} ${"Trigger".padEnd(18)} ${"Wasted".padEnd(7)} ${"Chain Depth"}`
+    );
+    lines.push("\u2500".repeat(80));
+    for (const r of result.renders) {
+      const wasted = r.wasted ? "\u26A0 yes" : "no";
+      const idx = String(r.renderIndex).padEnd(4);
+      const comp = r.component.slice(0, 29).padEnd(30);
+      const trig = r.trigger.padEnd(18);
+      const w = wasted.padEnd(7);
+      const depth = r.chain.length;
+      lines.push(`${idx} ${comp} ${trig} ${w} ${depth}`);
+    }
+  }
+  if (result.flags.length > 0) {
+    lines.push("");
+    lines.push("Flags:");
+    for (const flag of result.flags) {
+      const icon = flag.severity === "error" ? "\u2717" : flag.severity === "warning" ? "\u26A0" : "\u2139";
+      lines.push(`  ${icon} [${flag.id}] ${flag.component}: ${flag.detail}`);
+    }
+  }
+  return lines.join("\n");
+}
+function createInstrumentRendersCommand() {
+  return new commander.Command("renders").description("Trace re-render causality chains for a component during an interaction sequence").argument("<component>", "Component name to instrument (must be in manifest)").option(
+    "--interaction <json>",
+    `Interaction sequence JSON, e.g. '[{"action":"click","target":"button"}]'`,
+    "[]"
+  ).option("--json", "Output as JSON regardless of TTY", false).option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH2).action(
+    async (componentName, opts) => {
+      let interaction = [];
+      try {
+        interaction = JSON.parse(opts.interaction);
+        if (!Array.isArray(interaction)) {
+          throw new Error("Interaction must be a JSON array");
+        }
+      } catch {
+        process.stderr.write(`Error: Invalid --interaction JSON: ${opts.interaction}
+`);
+        process.exit(1);
+      }
+      try {
+        process.stderr.write(
+          `Instrumenting ${componentName} (${interaction.length} interaction steps)\u2026
+`
+        );
+        const result = await analyzeRenders({
+          componentName,
+          interaction,
+          manifestPath: opts.manifest
+        });
+        await shutdownPool();
+        if (opts.json || !isTTY()) {
+          process.stdout.write(`${JSON.stringify(result, null, 2)}
+`);
+        } else {
+          process.stdout.write(`${formatRendersTable(result)}
+`);
+        }
+      } catch (err) {
+        await shutdownPool();
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+}
+function createInstrumentCommand() {
+  const instrumentCmd = new commander.Command("instrument").description(
+    "Structured instrumentation commands for React component analysis"
+  );
+  instrumentCmd.addCommand(createInstrumentRendersCommand());
+  return instrumentCmd;
+}
 var CONFIG_FILENAMES = [
   ".reactscope/config.json",
   ".reactscope/config.js",
@@ -723,24 +1189,24 @@ async function getCompiledCssForClasses(cwd, classes) {
 }
 
 // src/render-commands.ts
-var MANIFEST_PATH2 = ".reactscope/manifest.json";
+var MANIFEST_PATH3 = ".reactscope/manifest.json";
 var DEFAULT_OUTPUT_DIR = ".reactscope/renders";
-var _pool = null;
-async function getPool(viewportWidth, viewportHeight) {
-  if (_pool === null) {
-    _pool = new render.BrowserPool({
+var _pool2 = null;
+async function getPool2(viewportWidth, viewportHeight) {
+  if (_pool2 === null) {
+    _pool2 = new render.BrowserPool({
       size: { browsers: 1, pagesPerBrowser: 4 },
       viewportWidth,
       viewportHeight
     });
-    await _pool.init();
+    await _pool2.init();
   }
-  return _pool;
+  return _pool2;
 }
-async function shutdownPool() {
-  if (_pool !== null) {
-    await _pool.close();
-    _pool = null;
+async function shutdownPool2() {
+  if (_pool2 !== null) {
+    await _pool2.close();
+    _pool2 = null;
   }
 }
 function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
@@ -751,7 +1217,7 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
     _satori: satori,
     async renderCell(props, _complexityClass) {
       const startMs = performance.now();
-      const pool = await getPool(viewportWidth, viewportHeight);
+      const pool = await getPool2(viewportWidth, viewportHeight);
       const htmlHarness = await buildComponentHarness(
         filePath,
         componentName,
@@ -848,7 +1314,7 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
   };
 }
 function registerRenderSingle(renderCmd) {
-  renderCmd.command("component <component>", { isDefault: true }).description("Render a single component to PNG or JSON").option("--props <json>", `Inline props JSON, e.g. '{"variant":"primary"}'`).option("--viewport <WxH>", "Viewport size e.g. 1280x720", "375x812").option("--theme <name>", "Theme name from the token system").option("-o, --output <path>", "Write PNG to file instead of stdout").option("--format <fmt>", "Output format: png or json (default: auto)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH2).action(
+  renderCmd.command("component <component>", { isDefault: true }).description("Render a single component to PNG or JSON").option("--props <json>", `Inline props JSON, e.g. '{"variant":"primary"}'`).option("--viewport <WxH>", "Viewport size e.g. 1280x720", "375x812").option("--theme <name>", "Theme name from the token system").option("-o, --output <path>", "Write PNG to file instead of stdout").option("--format <fmt>", "Output format: png or json (default: auto)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH3).action(
     async (componentName, opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -887,7 +1353,7 @@ Available: ${available}`
             }
           }
         );
-        await shutdownPool();
+        await shutdownPool2();
         if (outcome.crashed) {
           process.stderr.write(`\u2717 Render failed: ${outcome.error.message}
 `);
@@ -935,7 +1401,7 @@ Available: ${available}`
           );
         }
       } catch (err) {
-        await shutdownPool();
+        await shutdownPool2();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -947,7 +1413,7 @@ function registerRenderMatrix(renderCmd) {
   renderCmd.command("matrix <component>").description("Render a component across a matrix of prop axes").option("--axes <spec>", "Axis definitions e.g. 'variant:primary,secondary size:sm,md,lg'").option(
     "--contexts <ids>",
     "Composition context IDs, comma-separated (e.g. centered,rtl,sidebar)"
-  ).option("--stress <ids>", "Stress preset IDs, comma-separated (e.g. text.long,text.unicode)").option("--sprite <path>", "Write sprite sheet PNG to file").option("--format <fmt>", "Output format: json|png|html|csv (default: auto)").option("--concurrency <n>", "Max parallel renders", "8").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH2).action(
+  ).option("--stress <ids>", "Stress preset IDs, comma-separated (e.g. text.long,text.unicode)").option("--sprite <path>", "Write sprite sheet PNG to file").option("--format <fmt>", "Output format: json|png|html|csv (default: auto)").option("--concurrency <n>", "Max parallel renders", "8").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH3).action(
     async (componentName, opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -1020,7 +1486,7 @@ Available: ${available}`
           concurrency
         });
         const result = await matrix.render();
-        await shutdownPool();
+        await shutdownPool2();
         process.stderr.write(
           `Done. ${result.stats.totalCells} cells, avg ${result.stats.avgRenderTimeMs.toFixed(1)}ms
 `
@@ -1065,7 +1531,7 @@ Available: ${available}`
           process.stdout.write(formatMatrixCsv(componentName, result));
         }
       } catch (err) {
-        await shutdownPool();
+        await shutdownPool2();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -1074,7 +1540,7 @@ Available: ${available}`
   );
 }
 function registerRenderAll(renderCmd) {
-  renderCmd.command("all").description("Render all components from the manifest").option("--concurrency <n>", "Max parallel renders", "4").option("--output-dir <dir>", "Output directory for renders", DEFAULT_OUTPUT_DIR).option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH2).option("--format <fmt>", "Output format: json|png (default: png)", "png").action(
+  renderCmd.command("all").description("Render all components from the manifest").option("--concurrency <n>", "Max parallel renders", "4").option("--output-dir <dir>", "Output directory for renders", DEFAULT_OUTPUT_DIR).option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH3).option("--format <fmt>", "Output format: json|png (default: png)", "png").action(
     async (opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -1162,13 +1628,13 @@ function registerRenderAll(renderCmd) {
           workers.push(worker());
         }
         await Promise.all(workers);
-        await shutdownPool();
+        await shutdownPool2();
         process.stderr.write("\n");
         const summary = formatSummaryText(results, outputDir);
         process.stderr.write(`${summary}
 `);
       } catch (err) {
-        await shutdownPool();
+        await shutdownPool2();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -1487,6 +1953,348 @@ function buildStructuredReport(report) {
     route: report.route?.pattern ?? null
   };
 }
+var DEFAULT_TOKEN_FILE = "reactscope.tokens.json";
+var CONFIG_FILE = "reactscope.config.json";
+function isTTY2() {
+  return process.stdout.isTTY === true;
+}
+function pad3(value, width) {
+  return value.length >= width ? value.slice(0, width) : value + " ".repeat(width - value.length);
+}
+function buildTable2(headers, rows) {
+  const colWidths = headers.map(
+    (h, i) => Math.max(h.length, ...rows.map((r) => (r[i] ?? "").length))
+  );
+  const divider = colWidths.map((w) => "-".repeat(w)).join("  ");
+  const headerRow = headers.map((h, i) => pad3(h, colWidths[i] ?? 0)).join("  ");
+  const dataRows = rows.map(
+    (row2) => row2.map((cell, i) => pad3(cell ?? "", colWidths[i] ?? 0)).join("  ")
+  );
+  return [headerRow, divider, ...dataRows].join("\n");
+}
+function resolveTokenFilePath(fileFlag) {
+  if (fileFlag !== void 0) {
+    return path.resolve(process.cwd(), fileFlag);
+  }
+  const configPath = path.resolve(process.cwd(), CONFIG_FILE);
+  if (fs.existsSync(configPath)) {
+    try {
+      const raw = fs.readFileSync(configPath, "utf-8");
+      const config = JSON.parse(raw);
+      if (typeof config === "object" && config !== null && "tokens" in config && typeof config.tokens === "object" && config.tokens !== null && typeof config.tokens?.file === "string") {
+        const file = config.tokens.file;
+        return path.resolve(process.cwd(), file);
+      }
+    } catch {
+    }
+  }
+  return path.resolve(process.cwd(), DEFAULT_TOKEN_FILE);
+}
+function loadTokens(absPath) {
+  if (!fs.existsSync(absPath)) {
+    throw new Error(
+      `Token file not found at ${absPath}.
+Create a reactscope.tokens.json file or use --file to specify a path.`
+    );
+  }
+  const raw = fs.readFileSync(absPath, "utf-8");
+  return tokens.parseTokenFileSync(raw);
+}
+function getRawValue(node, segments) {
+  const [head, ...rest] = segments;
+  if (head === void 0) return null;
+  const child = node[head];
+  if (child === void 0 || child === null) return null;
+  if (rest.length === 0) {
+    if (typeof child === "object" && !Array.isArray(child) && "value" in child) {
+      const v = child.value;
+      return typeof v === "string" || typeof v === "number" ? v : null;
+    }
+    return null;
+  }
+  if (typeof child === "object" && !Array.isArray(child)) {
+    return getRawValue(child, rest);
+  }
+  return null;
+}
+function buildResolutionChain(startPath, rawTokens) {
+  const chain = [];
+  const seen = /* @__PURE__ */ new Set();
+  let current = startPath;
+  while (!seen.has(current)) {
+    seen.add(current);
+    const rawValue = getRawValue(rawTokens, current.split("."));
+    if (rawValue === null) break;
+    chain.push({ path: current, rawValue: String(rawValue) });
+    const refMatch = /^\{([^}]+)\}$/.exec(String(rawValue));
+    if (refMatch === null) break;
+    current = refMatch[1] ?? "";
+  }
+  return chain;
+}
+function registerGet2(tokensCmd) {
+  tokensCmd.command("get <path>").description("Resolve a token path to its computed value").option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action((tokenPath, opts) => {
+    try {
+      const filePath = resolveTokenFilePath(opts.file);
+      const { tokens: tokens$1 } = loadTokens(filePath);
+      const resolver = new tokens.TokenResolver(tokens$1);
+      const resolvedValue = resolver.resolve(tokenPath);
+      const useJson = opts.format === "json" || opts.format !== "text" && !isTTY2();
+      if (useJson) {
+        const token = tokens$1.find((t) => t.path === tokenPath);
+        process.stdout.write(
+          `${JSON.stringify({ path: tokenPath, value: token?.value, resolvedValue, type: token?.type }, null, 2)}
+`
+        );
+      } else {
+        process.stdout.write(`${resolvedValue}
+`);
+      }
+    } catch (err) {
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
+    }
+  });
+}
+function registerList2(tokensCmd) {
+  tokensCmd.command("list [category]").description("List tokens, optionally filtered by category or type").option("--type <type>", "Filter by token type (color, dimension, fontFamily, etc.)").option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or table (default: auto-detect)").action(
+    (category, opts) => {
+      try {
+        const filePath = resolveTokenFilePath(opts.file);
+        const { tokens: tokens$1 } = loadTokens(filePath);
+        const resolver = new tokens.TokenResolver(tokens$1);
+        const filtered = resolver.list(opts.type, category);
+        const useJson = opts.format === "json" || opts.format !== "table" && !isTTY2();
+        if (useJson) {
+          process.stdout.write(`${JSON.stringify(filtered, null, 2)}
+`);
+        } else {
+          if (filtered.length === 0) {
+            process.stdout.write("No tokens found.\n");
+            return;
+          }
+          const headers = ["PATH", "VALUE", "RESOLVED", "TYPE"];
+          const rows = filtered.map((t) => [t.path, String(t.value), t.resolvedValue, t.type]);
+          process.stdout.write(`${buildTable2(headers, rows)}
+`);
+        }
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+}
+function registerSearch(tokensCmd) {
+  tokensCmd.command("search <value>").description("Find which token(s) match a computed value (supports fuzzy color matching)").option("--type <type>", "Restrict search to a specific token type").option("--fuzzy", "Return nearest match even if no exact match exists", false).option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or table (default: auto-detect)").action(
+    (value, opts) => {
+      try {
+        const filePath = resolveTokenFilePath(opts.file);
+        const { tokens: tokens$1 } = loadTokens(filePath);
+        const resolver = new tokens.TokenResolver(tokens$1);
+        const useJson = opts.format === "json" || opts.format !== "table" && !isTTY2();
+        const typesToSearch = opts.type ? [opts.type] : [
+          "color",
+          "dimension",
+          "fontFamily",
+          "fontWeight",
+          "number",
+          "shadow",
+          "duration",
+          "cubicBezier"
+        ];
+        const exactMatches = [];
+        const nearestMatches = [];
+        for (const type of typesToSearch) {
+          const exact = resolver.match(value, type);
+          if (exact !== null) {
+            exactMatches.push({
+              path: exact.token.path,
+              resolvedValue: exact.token.resolvedValue,
+              type: exact.token.type,
+              exact: true,
+              distance: 0
+            });
+          }
+        }
+        if (exactMatches.length === 0 && opts.fuzzy) {
+          for (const type of typesToSearch) {
+            const typeTokens = tokens$1.filter((t) => t.type === type);
+            if (typeTokens.length === 0) continue;
+            try {
+              const near = resolver.nearest(value, type);
+              nearestMatches.push({
+                path: near.token.path,
+                resolvedValue: near.token.resolvedValue,
+                type: near.token.type,
+                exact: near.exact,
+                distance: near.distance
+              });
+            } catch {
+            }
+          }
+          nearestMatches.sort((a, b) => a.distance - b.distance);
+          nearestMatches.splice(3);
+        }
+        const results = exactMatches.length > 0 ? exactMatches : nearestMatches;
+        if (useJson) {
+          process.stdout.write(`${JSON.stringify(results, null, 2)}
+`);
+        } else {
+          if (results.length === 0) {
+            process.stdout.write(
+              `No tokens found matching "${value}".
+Tip: use --fuzzy for nearest-match search.
+`
+            );
+            return;
+          }
+          const headers = ["PATH", "RESOLVED VALUE", "TYPE", "MATCH", "DISTANCE"];
+          const rows = results.map((r) => [
+            r.path,
+            r.resolvedValue,
+            r.type,
+            r.exact ? "exact" : "nearest",
+            r.exact ? "\u2014" : r.distance.toFixed(2)
+          ]);
+          process.stdout.write(`${buildTable2(headers, rows)}
+`);
+        }
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+}
+function registerResolve(tokensCmd) {
+  tokensCmd.command("resolve <path>").description("Show the full resolution chain for a token").option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action((tokenPath, opts) => {
+    try {
+      const filePath = resolveTokenFilePath(opts.file);
+      const absFilePath = filePath;
+      const { tokens: tokens$1, rawFile } = loadTokens(absFilePath);
+      const resolver = new tokens.TokenResolver(tokens$1);
+      resolver.resolve(tokenPath);
+      const chain = buildResolutionChain(tokenPath, rawFile.tokens);
+      const useJson = opts.format === "json" || opts.format !== "text" && !isTTY2();
+      if (useJson) {
+        process.stdout.write(`${JSON.stringify({ path: tokenPath, chain }, null, 2)}
+`);
+      } else {
+        if (chain.length === 0) {
+          process.stdout.write(`Token "${tokenPath}" not found.
+`);
+          return;
+        }
+        const parts = chain.map((step, i) => {
+          if (i < chain.length - 1) {
+            return `${step.path} \u2192 ${step.rawValue}`;
+          }
+          return step.rawValue;
+        });
+        process.stdout.write(`${parts.join("\n  ")}
+`);
+      }
+    } catch (err) {
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
+    }
+  });
+}
+function registerValidate(tokensCmd) {
+  tokensCmd.command("validate").description(
+    "Validate the token file for errors (circular refs, missing refs, type mismatches)"
+  ).option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action((opts) => {
+    try {
+      const filePath = resolveTokenFilePath(opts.file);
+      if (!fs.existsSync(filePath)) {
+        throw new Error(
+          `Token file not found at ${filePath}.
+Create a reactscope.tokens.json file or use --file to specify a path.`
+        );
+      }
+      const raw = fs.readFileSync(filePath, "utf-8");
+      const useJson = opts.format === "json" || opts.format !== "text" && !isTTY2();
+      const errors = [];
+      let parsed;
+      try {
+        parsed = JSON.parse(raw);
+      } catch (err) {
+        errors.push({
+          code: "PARSE_ERROR",
+          message: `Failed to parse token file as JSON: ${String(err)}`
+        });
+        outputValidationResult(filePath, errors, useJson);
+        process.exit(1);
+      }
+      try {
+        tokens.validateTokenFile(parsed);
+      } catch (err) {
+        if (err instanceof tokens.TokenValidationError) {
+          for (const e of err.errors) {
+            errors.push({ code: e.code, path: e.path, message: e.message });
+          }
+          outputValidationResult(filePath, errors, useJson);
+          process.exit(1);
+        }
+        throw err;
+      }
+      try {
+        tokens.parseTokenFileSync(raw);
+      } catch (err) {
+        if (err instanceof tokens.TokenParseError) {
+          errors.push({ code: err.code, path: err.path, message: err.message });
+        } else {
+          errors.push({ code: "UNKNOWN", message: String(err) });
+        }
+        outputValidationResult(filePath, errors, useJson);
+        process.exit(1);
+      }
+      outputValidationResult(filePath, errors, useJson);
+    } catch (err) {
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
+    }
+  });
+}
+function outputValidationResult(filePath, errors, useJson) {
+  const valid = errors.length === 0;
+  if (useJson) {
+    process.stdout.write(`${JSON.stringify({ valid, file: filePath, errors }, null, 2)}
+`);
+  } else {
+    if (valid) {
+      process.stdout.write(`\u2713 Token file is valid: ${filePath}
+`);
+    } else {
+      process.stderr.write(`\u2717 Token file has ${errors.length} error(s): ${filePath}
+
+`);
+      for (const e of errors) {
+        const pathPrefix = e.path ? ` [${e.path}]` : "";
+        process.stderr.write(`  ${e.code}${pathPrefix}: ${e.message}
+`);
+      }
+      process.exit(1);
+    }
+  }
+}
+function createTokensCommand() {
+  const tokensCmd = new commander.Command("tokens").description(
+    "Query and validate design tokens from a reactscope.tokens.json file"
+  );
+  registerGet2(tokensCmd);
+  registerList2(tokensCmd);
+  registerSearch(tokensCmd);
+  registerResolve(tokensCmd);
+  registerValidate(tokensCmd);
+  return tokensCmd;
+}
 
 // src/program.ts
 function createProgram(options = {}) {
@@ -1574,11 +2382,14 @@ function createProgram(options = {}) {
   });
   program.addCommand(createManifestCommand());
   program.addCommand(createRenderCommand());
+  program.addCommand(createTokensCommand());
+  program.addCommand(createInstrumentCommand());
   return program;
 }
 
 exports.createManifestCommand = createManifestCommand;
 exports.createProgram = createProgram;
+exports.createTokensCommand = createTokensCommand;
 exports.isTTY = isTTY;
 exports.matchGlob = matchGlob;
 //# sourceMappingURL=index.cjs.map