@agent-scope/cli 1.13.0 → 1.15.0

package/dist/cli.js

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 
 // src/program.ts
-import { readFileSync as readFileSync8 } from "fs";
+import { readFileSync as readFileSync10 } from "fs";
 import { generateTest, loadTrace } from "@agent-scope/playwright";
-import { Command as Command8 } from "commander";
+import { Command as Command9 } from "commander";
 
 // src/browser.ts
 import { writeFileSync } from "fs";
@@ -39,27 +39,946 @@ async function browserCapture(options) {
     if (raw !== null && typeof raw === "object" && "error" in raw && typeof raw.error === "string") {
       throw new Error(`Scope capture failed: ${raw.error}`);
     }
-    const report = { ...raw, route: null };
-    return { report };
-  } finally {
-    await browser.close();
+    const report = { ...raw, route: null };
+    return { report };
+  } finally {
+    await browser.close();
+  }
+}
+function writeReportToFile(report, outputPath, pretty) {
+  const json = pretty ? JSON.stringify(report, null, 2) : JSON.stringify(report);
+  writeFileSync(outputPath, json, "utf-8");
+}
+
+// src/ci/commands.ts
+import { existsSync as existsSync2, readFileSync as readFileSync2, writeFileSync as writeFileSync2 } from "fs";
+import { resolve as resolve2 } from "path";
+import { generateManifest } from "@agent-scope/manifest";
+import { BrowserPool, safeRender } from "@agent-scope/render";
+import { ComplianceEngine, TokenResolver } from "@agent-scope/tokens";
+import { Command } from "commander";
+
+// src/component-bundler.ts
+import { dirname } from "path";
+import * as esbuild from "esbuild";
+async function buildComponentHarness(filePath, componentName, props, viewportWidth, projectCss) {
+  const bundledScript = await bundleComponentToIIFE(filePath, componentName, props);
+  return wrapInHtml(bundledScript, viewportWidth, projectCss);
+}
+async function bundleComponentToIIFE(filePath, componentName, props) {
+  const propsJson = JSON.stringify(props).replace(/<\/script>/gi, "<\\/script>");
+  const wrapperCode = (
+    /* ts */
+    `
+import * as __scopeMod from ${JSON.stringify(filePath)};
+import { createRoot } from "react-dom/client";
+import { createElement } from "react";
+
+(function scopeRenderHarness() {
+  var Component =
+    __scopeMod["default"] ||
+    __scopeMod[${JSON.stringify(componentName)}] ||
+    (Object.values(__scopeMod).find(
+      function(v) { return typeof v === "function" && /^[A-Z]/.test(v.name || ""); }
+    ));
+
+  if (!Component) {
+    window.__SCOPE_RENDER_ERROR__ =
+      "No renderable component found. Checked: default, " +
+      ${JSON.stringify(componentName)} + ", and PascalCase named exports. " +
+      "Available exports: " + Object.keys(__scopeMod).join(", ");
+    window.__SCOPE_RENDER_COMPLETE__ = true;
+    return;
+  }
+
+  try {
+    var props = ${propsJson};
+    var rootEl = document.getElementById("scope-root");
+    if (!rootEl) {
+      window.__SCOPE_RENDER_ERROR__ = "#scope-root element not found";
+      window.__SCOPE_RENDER_COMPLETE__ = true;
+      return;
+    }
+    createRoot(rootEl).render(createElement(Component, props));
+    // Use requestAnimationFrame to let React flush the render
+    requestAnimationFrame(function() {
+      window.__SCOPE_RENDER_COMPLETE__ = true;
+    });
+  } catch (err) {
+    window.__SCOPE_RENDER_ERROR__ = err instanceof Error ? err.message : String(err);
+    window.__SCOPE_RENDER_COMPLETE__ = true;
+  }
+})();
+`
+  );
+  const result = await esbuild.build({
+    stdin: {
+      contents: wrapperCode,
+      // Resolve relative imports (within the component's dir)
+      resolveDir: dirname(filePath),
+      loader: "tsx",
+      sourcefile: "__scope_harness__.tsx"
+    },
+    bundle: true,
+    format: "iife",
+    write: false,
+    platform: "browser",
+    jsx: "automatic",
+    jsxImportSource: "react",
+    target: "es2020",
+    // Bundle everything — no externals
+    external: [],
+    define: {
+      "process.env.NODE_ENV": '"development"',
+      global: "globalThis"
+    },
+    logLevel: "silent",
+    // Suppress "React must be in scope" warnings from old JSX (we use automatic)
+    banner: {
+      js: "/* @agent-scope/cli component harness */"
+    }
+  });
+  if (result.errors.length > 0) {
+    const msg = result.errors.map((e) => `${e.text}${e.location ? ` (${e.location.file}:${e.location.line})` : ""}`).join("\n");
+    throw new Error(`esbuild failed to bundle component:
+${msg}`);
+  }
+  const outputFile = result.outputFiles?.[0];
+  if (outputFile === void 0 || outputFile.text.length === 0) {
+    throw new Error("esbuild produced no output");
+  }
+  return outputFile.text;
+}
+function wrapInHtml(bundledScript, viewportWidth, projectCss) {
+  const projectStyleBlock = projectCss != null && projectCss.length > 0 ? `<style id="scope-project-css">
+${projectCss.replace(/<\/style>/gi, "<\\/style>")}
+</style>` : "";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=${viewportWidth}, initial-scale=1.0" />
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
+    #scope-root { display: inline-block; min-width: 1px; min-height: 1px; }
+  </style>
+  ${projectStyleBlock}
+</head>
+<body>
+  <div id="scope-root" data-reactscope-root></div>
+  <script>${bundledScript}</script>
+</body>
+</html>`;
+}
+
+// src/manifest-formatter.ts
+function isTTY() {
+  return process.stdout.isTTY === true;
+}
+function pad(value, width) {
+  return value.length >= width ? value.slice(0, width) : value + " ".repeat(width - value.length);
+}
+function buildTable(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) => pad(h, colWidths[i] ?? 0)).join("  ");
+  const dataRows = rows.map(
+    (row2) => row2.map((cell, i) => pad(cell ?? "", colWidths[i] ?? 0)).join("  ")
+  );
+  return [headerRow, divider, ...dataRows].join("\n");
+}
+function formatListTable(rows) {
+  if (rows.length === 0) return "No components found.";
+  const headers = ["NAME", "FILE", "COMPLEXITY", "HOOKS", "CONTEXTS"];
+  const tableRows = rows.map((r) => [
+    r.name,
+    r.file,
+    r.complexityClass,
+    String(r.hookCount),
+    String(r.contextCount)
+  ]);
+  return buildTable(headers, tableRows);
+}
+function formatListJson(rows) {
+  return JSON.stringify(rows, null, 2);
+}
+function formatSideEffects(se) {
+  const parts = [];
+  if (se.fetches.length > 0) parts.push(`fetches: ${se.fetches.join(", ")}`);
+  if (se.timers) parts.push("timers");
+  if (se.subscriptions.length > 0) parts.push(`subscriptions: ${se.subscriptions.join(", ")}`);
+  if (se.globalListeners) parts.push("globalListeners");
+  return parts.length > 0 ? parts.join(" | ") : "none";
+}
+function formatGetTable(name, descriptor) {
+  const propNames = Object.keys(descriptor.props);
+  const lines = [
+    `Component: ${name}`,
+    `  File:           ${descriptor.filePath}`,
+    `  Export:         ${descriptor.exportType}`,
+    `  Display Name:   ${descriptor.displayName}`,
+    `  Complexity:     ${descriptor.complexityClass}`,
+    `  Memoized:       ${descriptor.memoized}`,
+    `  Forwarded Ref:  ${descriptor.forwardedRef}`,
+    `  HOC Wrappers:   ${descriptor.hocWrappers.join(", ") || "none"}`,
+    `  Hooks:          ${descriptor.detectedHooks.join(", ") || "none"}`,
+    `  Contexts:       ${descriptor.requiredContexts.join(", ") || "none"}`,
+    `  Composes:       ${descriptor.composes.join(", ") || "none"}`,
+    `  Composed By:    ${descriptor.composedBy.join(", ") || "none"}`,
+    `  Side Effects:   ${formatSideEffects(descriptor.sideEffects)}`,
+    "",
+    `  Props (${propNames.length}):`
+  ];
+  if (propNames.length === 0) {
+    lines.push("    (none)");
+  } else {
+    for (const propName of propNames) {
+      const p = descriptor.props[propName];
+      if (p === void 0) continue;
+      const req = p.required ? "required" : "optional";
+      const def = p.default !== void 0 ? ` [default: ${p.default}]` : "";
+      const vals = p.values !== void 0 ? ` (${p.values.join(" | ")})` : "";
+      lines.push(`    ${propName}: ${p.rawType}${vals} \u2014 ${req}${def}`);
+    }
+  }
+  return lines.join("\n");
+}
+function formatGetJson(name, descriptor) {
+  return JSON.stringify({ name, ...descriptor }, null, 2);
+}
+function formatQueryTable(rows, queryDesc) {
+  if (rows.length === 0) return `No components match: ${queryDesc}`;
+  const headers = ["NAME", "FILE", "COMPLEXITY", "HOOKS", "CONTEXTS"];
+  const tableRows = rows.map((r) => [r.name, r.file, r.complexityClass, r.hooks, r.contexts]);
+  return `Query: ${queryDesc}
+
+${buildTable(headers, tableRows)}`;
+}
+function formatQueryJson(rows) {
+  return JSON.stringify(rows, null, 2);
+}
+function matchGlob(pattern, value) {
+  const escaped = pattern.replace(/[.+^${}()|[\]\\]/g, "\\$&");
+  const regexStr = escaped.replace(/\*\*/g, "\xA7GLOBSTAR\xA7").replace(/\*/g, "[^/]*").replace(/§GLOBSTAR§/g, ".*");
+  const regex = new RegExp(`^${regexStr}$`, "i");
+  return regex.test(value);
+}
+
+// src/render-formatter.ts
+function parseViewport(spec) {
+  const lower = spec.toLowerCase();
+  const match = /^(\d+)[x×](\d+)$/.exec(lower);
+  if (!match) {
+    throw new Error(`Invalid viewport "${spec}". Expected format: WIDTHxHEIGHT (e.g. 1280x720)`);
+  }
+  const width = parseInt(match[1] ?? "0", 10);
+  const height = parseInt(match[2] ?? "0", 10);
+  if (width <= 0 || height <= 0) {
+    throw new Error(`Viewport dimensions must be positive integers, got: ${spec}`);
+  }
+  return { width, height };
+}
+function formatRenderJson(componentName, props, result) {
+  return {
+    component: componentName,
+    props,
+    width: result.width,
+    height: result.height,
+    renderTimeMs: result.renderTimeMs,
+    computedStyles: result.computedStyles,
+    screenshot: result.screenshot.toString("base64"),
+    dom: result.dom,
+    console: result.console,
+    accessibility: result.accessibility
+  };
+}
+function formatMatrixJson(result) {
+  return {
+    axes: result.axes.map((axis) => ({
+      name: axis.name,
+      values: axis.values.map((v) => String(v))
+    })),
+    stats: { ...result.stats },
+    cells: result.cells.map((cell) => ({
+      index: cell.index,
+      axisIndices: cell.axisIndices,
+      props: cell.props,
+      renderTimeMs: cell.result.renderTimeMs,
+      width: cell.result.width,
+      height: cell.result.height,
+      screenshot: cell.result.screenshot.toString("base64")
+    }))
+  };
+}
+function formatMatrixHtml(componentName, result) {
+  const cellsHtml = result.cells.map((cell) => {
+    const b64 = cell.result.screenshot.toString("base64");
+    const propLabel = escapeHtml(
+      Object.entries(cell.props).map(([k, v]) => `${k}: ${String(v)}`).join(", ")
+    );
+    return `    <div class="cell">
+      <img src="data:image/png;base64,${b64}" alt="${propLabel}" width="${cell.result.width}" height="${cell.result.height}" />
+      <div class="label">${propLabel}</div>
+      <div class="meta">${cell.result.renderTimeMs.toFixed(1)}ms</div>
+    </div>`;
+  }).join("\n");
+  const axesDesc = result.axes.map((a) => `${a.name}: ${a.values.map((v) => String(v)).join(", ")}`).join(" | ");
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${escapeHtml(componentName)} \u2014 Render Matrix</title>
+  <style>
+    body { font-family: system-ui, sans-serif; background: #f8fafc; margin: 0; padding: 24px; }
+    h1 { font-size: 1.25rem; color: #1e293b; margin-bottom: 8px; }
+    .axes { font-size: 0.8rem; color: #64748b; margin-bottom: 20px; }
+    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
+    .cell { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
+    .cell img { display: block; }
+    .label { padding: 6px 8px; font-size: 0.75rem; color: #374151; border-top: 1px solid #f1f5f9; }
+    .meta { padding: 2px 8px 6px; font-size: 0.7rem; color: #94a3b8; }
+    .stats { margin-top: 24px; font-size: 0.8rem; color: #64748b; }
+  </style>
+</head>
+<body>
+  <h1>${escapeHtml(componentName)} \u2014 Render Matrix</h1>
+  <div class="axes">Axes: ${escapeHtml(axesDesc)}</div>
+  <div class="grid">
+${cellsHtml}
+  </div>
+  <div class="stats">
+    ${result.stats.totalCells} cells \xB7
+    avg ${result.stats.avgRenderTimeMs.toFixed(1)}ms \xB7
+    min ${result.stats.minRenderTimeMs.toFixed(1)}ms \xB7
+    max ${result.stats.maxRenderTimeMs.toFixed(1)}ms \xB7
+    wall ${result.stats.wallClockTimeMs.toFixed(0)}ms
+  </div>
+</body>
+</html>
+`;
+}
+function formatMatrixCsv(componentName, result) {
+  const axisNames = result.axes.map((a) => a.name);
+  const headers = ["component", ...axisNames, "renderTimeMs", "width", "height"];
+  const rows = result.cells.map((cell) => {
+    const axisVals = result.axes.map((_, i) => {
+      const axisIdx = cell.axisIndices[i];
+      const axis = result.axes[i];
+      if (axisIdx === void 0 || axis === void 0) return "";
+      const val = axis.values[axisIdx];
+      return val !== void 0 ? csvEscape(String(val)) : "";
+    });
+    return [
+      csvEscape(componentName),
+      ...axisVals,
+      cell.result.renderTimeMs.toFixed(3),
+      String(cell.result.width),
+      String(cell.result.height)
+    ].join(",");
+  });
+  return `${[headers.join(","), ...rows].join("\n")}
+`;
+}
+function renderProgressBar(completed, total, currentName, pct, barWidth = 20) {
+  const filled = Math.round(pct / 100 * barWidth);
+  const empty = barWidth - filled;
+  const bar = "=".repeat(Math.max(0, filled - 1)) + (filled > 0 ? ">" : "") + " ".repeat(empty);
+  const nameSlice = currentName.slice(0, 25).padEnd(25);
+  return `Rendering ${completed}/${total} ${nameSlice} [${bar}] ${pct}%`;
+}
+function formatSummaryText(results, outputDir) {
+  const total = results.length;
+  const passed = results.filter((r) => r.success).length;
+  const failed = total - passed;
+  const successTimes = results.filter((r) => r.success).map((r) => r.renderTimeMs);
+  const avgMs = successTimes.length > 0 ? successTimes.reduce((a, b) => a + b, 0) / successTimes.length : 0;
+  const lines = [
+    "\u2500".repeat(60),
+    `Render Summary`,
+    "\u2500".repeat(60),
+    `  Total components : ${total}`,
+    `  Passed           : ${passed}`,
+    `  Failed           : ${failed}`,
+    `  Avg render time  : ${avgMs.toFixed(1)}ms`,
+    `  Output dir       : ${outputDir}`
+  ];
+  if (failed > 0) {
+    lines.push("", "  Failed components:");
+    for (const r of results) {
+      if (!r.success) {
+        lines.push(`    \u2717 ${r.name}: ${r.errorMessage ?? "unknown error"}`);
+      }
+    }
+  }
+  lines.push("\u2500".repeat(60));
+  return lines.join("\n");
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function csvEscape(value) {
+  if (value.includes(",") || value.includes('"') || value.includes("\n")) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+}
+
+// src/tailwind-css.ts
+import { existsSync, readFileSync } from "fs";
+import { createRequire } from "module";
+import { resolve } from "path";
+var CONFIG_FILENAMES = [
+  ".reactscope/config.json",
+  ".reactscope/config.js",
+  ".reactscope/config.mjs"
+];
+var STYLE_ENTRY_CANDIDATES = [
+  "src/index.css",
+  "src/globals.css",
+  "app/globals.css",
+  "app/index.css",
+  "styles/index.css",
+  "index.css"
+];
+var TAILWIND_IMPORT = /@import\s+["']tailwindcss["']\s*;?/;
+var compilerCache = null;
+function getCachedBuild(cwd) {
+  if (compilerCache !== null && resolve(compilerCache.cwd) === resolve(cwd)) {
+    return compilerCache.build;
+  }
+  return null;
+}
+function findStylesEntry(cwd) {
+  for (const name of CONFIG_FILENAMES) {
+    const p = resolve(cwd, name);
+    if (!existsSync(p)) continue;
+    try {
+      if (name.endsWith(".json")) {
+        const raw = readFileSync(p, "utf-8");
+        const data = JSON.parse(raw);
+        const scope = data.scope;
+        const entry = scope?.stylesEntry ?? data.stylesEntry;
+        if (typeof entry === "string") {
+          const full = resolve(cwd, entry);
+          if (existsSync(full)) return full;
+        }
+      }
+    } catch {
+    }
+  }
+  const pkgPath = resolve(cwd, "package.json");
+  if (existsSync(pkgPath)) {
+    try {
+      const raw = readFileSync(pkgPath, "utf-8");
+      const pkg = JSON.parse(raw);
+      const entry = pkg.scope?.stylesEntry;
+      if (typeof entry === "string") {
+        const full = resolve(cwd, entry);
+        if (existsSync(full)) return full;
+      }
+    } catch {
+    }
+  }
+  for (const candidate of STYLE_ENTRY_CANDIDATES) {
+    const full = resolve(cwd, candidate);
+    if (existsSync(full)) {
+      try {
+        const content = readFileSync(full, "utf-8");
+        if (TAILWIND_IMPORT.test(content)) return full;
+      } catch {
+      }
+    }
+  }
+  return null;
+}
+async function getTailwindCompiler(cwd) {
+  const cached = getCachedBuild(cwd);
+  if (cached !== null) return cached;
+  const entryPath = findStylesEntry(cwd);
+  if (entryPath === null) return null;
+  let compile;
+  try {
+    const require2 = createRequire(resolve(cwd, "package.json"));
+    const tailwind = require2("tailwindcss");
+    const fn = tailwind.compile;
+    if (typeof fn !== "function") return null;
+    compile = fn;
+  } catch {
+    return null;
+  }
+  const entryContent = readFileSync(entryPath, "utf-8");
+  const loadStylesheet = async (id, base) => {
+    if (id === "tailwindcss") {
+      const nodeModules = resolve(cwd, "node_modules");
+      const tailwindCssPath = resolve(nodeModules, "tailwindcss", "index.css");
+      if (!existsSync(tailwindCssPath)) {
+        throw new Error(
+          `Tailwind v4: tailwindcss package not found at ${tailwindCssPath}. Install with: npm install tailwindcss`
+        );
+      }
+      const content = readFileSync(tailwindCssPath, "utf-8");
+      return { path: "virtual:tailwindcss/index.css", base, content };
+    }
+    const full = resolve(base, id);
+    if (existsSync(full)) {
+      const content = readFileSync(full, "utf-8");
+      return { path: full, base: resolve(full, ".."), content };
+    }
+    throw new Error(`Tailwind v4: could not load stylesheet: ${id} (base: ${base})`);
+  };
+  const result = await compile(entryContent, {
+    base: cwd,
+    from: entryPath,
+    loadStylesheet
+  });
+  const build2 = result.build.bind(result);
+  compilerCache = { cwd, build: build2 };
+  return build2;
+}
+async function getCompiledCssForClasses(cwd, classes) {
+  const build2 = await getTailwindCompiler(cwd);
+  if (build2 === null) return null;
+  const deduped = [...new Set(classes)].filter(Boolean);
+  if (deduped.length === 0) return null;
+  return build2(deduped);
+}
+
+// src/ci/commands.ts
+var CI_EXIT = {
+  /** All checks passed */
+  OK: 0,
+  /** Compliance score below threshold */
+  COMPLIANCE_BELOW_THRESHOLD: 1,
+  /** Accessibility violations found */
+  A11Y_VIOLATIONS: 2,
+  /** Console errors detected during render */
+  CONSOLE_ERRORS: 3,
+  /** Visual regression detected against baseline */
+  VISUAL_REGRESSION: 4,
+  /** One or more components failed to render */
+  RENDER_FAILURES: 5
+};
+var ALL_CHECKS = ["compliance", "a11y", "console-errors", "visual-regression"];
+var _pool = null;
+async function getPool(viewportWidth, viewportHeight) {
+  if (_pool === null) {
+    _pool = new BrowserPool({
+      size: { browsers: 1, pagesPerBrowser: 4 },
+      viewportWidth,
+      viewportHeight
+    });
+    await _pool.init();
+  }
+  return _pool;
+}
+async function shutdownPool() {
+  if (_pool !== null) {
+    await _pool.close();
+    _pool = null;
+  }
+}
+async function renderComponent(filePath, componentName, props, viewportWidth, viewportHeight) {
+  const pool = await getPool(viewportWidth, viewportHeight);
+  const htmlHarness = await buildComponentHarness(filePath, componentName, props, viewportWidth);
+  const slot = await pool.acquire();
+  const { page } = slot;
+  try {
+    await page.setContent(htmlHarness, { waitUntil: "load" });
+    await page.waitForFunction(
+      () => {
+        const w = window;
+        return w.__SCOPE_RENDER_COMPLETE__ === true;
+      },
+      { timeout: 15e3 }
+    );
+    const renderError = await page.evaluate(() => {
+      return window.__SCOPE_RENDER_ERROR__ ?? null;
+    });
+    if (renderError !== null) {
+      throw new Error(`Component render error: ${renderError}`);
+    }
+    const rootDir = process.cwd();
+    const classes = await page.evaluate(() => {
+      const set = /* @__PURE__ */ new Set();
+      document.querySelectorAll("[class]").forEach((el) => {
+        for (const c of el.className.split(/\s+/)) {
+          if (c) set.add(c);
+        }
+      });
+      return [...set];
+    });
+    const projectCss = await getCompiledCssForClasses(rootDir, classes);
+    if (projectCss != null && projectCss.length > 0) {
+      await page.addStyleTag({ content: projectCss });
+    }
+    const startMs = performance.now();
+    const rootLocator = page.locator("[data-reactscope-root]");
+    const boundingBox = await rootLocator.boundingBox();
+    if (boundingBox === null || boundingBox.width === 0 || boundingBox.height === 0) {
+      throw new Error(
+        `Component "${componentName}" rendered with zero bounding box \u2014 it may be invisible or not mounted`
+      );
+    }
+    const PAD = 24;
+    const MIN_W = 320;
+    const MIN_H = 200;
+    const clipX = Math.max(0, boundingBox.x - PAD);
+    const clipY = Math.max(0, boundingBox.y - PAD);
+    const rawW = boundingBox.width + PAD * 2;
+    const rawH = boundingBox.height + PAD * 2;
+    const clipW = Math.max(rawW, MIN_W);
+    const clipH = Math.max(rawH, MIN_H);
+    const safeW = Math.min(clipW, viewportWidth - clipX);
+    const safeH = Math.min(clipH, viewportHeight - clipY);
+    const screenshot = await page.screenshot({
+      clip: { x: clipX, y: clipY, width: safeW, height: safeH },
+      type: "png"
+    });
+    const computedStylesRaw = {};
+    const styles = await page.evaluate((sel) => {
+      const el = document.querySelector(sel);
+      if (el === null) return {};
+      const computed = window.getComputedStyle(el);
+      const out = {};
+      for (const prop of [
+        "display",
+        "width",
+        "height",
+        "color",
+        "backgroundColor",
+        "fontSize",
+        "fontFamily",
+        "padding",
+        "margin"
+      ]) {
+        out[prop] = computed.getPropertyValue(prop);
+      }
+      return out;
+    }, "[data-reactscope-root] > *");
+    computedStylesRaw["[data-reactscope-root] > *"] = styles;
+    const renderTimeMs = performance.now() - startMs;
+    return {
+      screenshot,
+      width: Math.round(safeW),
+      height: Math.round(safeH),
+      renderTimeMs,
+      computedStyles: computedStylesRaw
+    };
+  } finally {
+    pool.release(slot);
+  }
+}
+function extractComputedStyles(computedStylesRaw) {
+  const flat = {};
+  for (const styles of Object.values(computedStylesRaw)) {
+    Object.assign(flat, styles);
+  }
+  const colors = {};
+  const spacing = {};
+  const typography = {};
+  const borders = {};
+  const shadows = {};
+  for (const [prop, value] of Object.entries(flat)) {
+    if (prop === "color" || prop === "backgroundColor") {
+      colors[prop] = value;
+    } else if (prop === "padding" || prop === "margin") {
+      spacing[prop] = value;
+    } else if (prop === "fontSize" || prop === "fontFamily" || prop === "fontWeight" || prop === "lineHeight") {
+      typography[prop] = value;
+    } else if (prop === "borderRadius" || prop === "borderWidth") {
+      borders[prop] = value;
+    } else if (prop === "boxShadow") {
+      shadows[prop] = value;
+    }
+  }
+  return { colors, spacing, typography, borders, shadows };
+}
+function loadBaselineRenderJson(baselineDir, componentName) {
+  const jsonPath = resolve2(baselineDir, "renders", `${componentName}.json`);
+  if (!existsSync2(jsonPath)) return null;
+  return JSON.parse(readFileSync2(jsonPath, "utf-8"));
+}
+async function runCi(options = {}) {
+  const {
+    baselineDir: baselineDirRaw,
+    checks = ALL_CHECKS,
+    complianceThreshold = 0.9,
+    viewportWidth = 375,
+    viewportHeight = 812
+  } = options;
+  const startTime = performance.now();
+  const rootDir = process.cwd();
+  const checksSet = new Set(checks);
+  const baselineDir = baselineDirRaw !== void 0 ? resolve2(rootDir, baselineDirRaw) : void 0;
+  process.stderr.write("Scanning for React components\u2026\n");
+  const manifest = await generateManifest({ rootDir });
+  const componentNames = Object.keys(manifest.components);
+  const total = componentNames.length;
+  process.stderr.write(`Found ${total} components.
+`);
+  process.stderr.write(`Rendering ${total} components\u2026
+`);
+  const computedStylesMap = /* @__PURE__ */ new Map();
+  const currentRenderMeta = /* @__PURE__ */ new Map();
+  const renderFailures = /* @__PURE__ */ new Set();
+  let completed = 0;
+  const CONCURRENCY = 4;
+  let nextIdx = 0;
+  const renderOne = async (name) => {
+    const descriptor = manifest.components[name];
+    if (descriptor === void 0) return;
+    const filePath = resolve2(rootDir, descriptor.filePath);
+    const outcome = await safeRender(
+      () => renderComponent(filePath, name, {}, viewportWidth, viewportHeight),
+      {
+        props: {},
+        sourceLocation: {
+          file: descriptor.filePath,
+          line: descriptor.loc.start,
+          column: 0
+        }
+      }
+    );
+    completed++;
+    const pct = Math.round(completed / total * 100);
+    if (isTTY()) {
+      process.stderr.write(`${renderProgressBar(completed, total, name, pct)}\r`);
+    }
+    if (outcome.crashed) {
+      renderFailures.add(name);
+      return;
+    }
+    const result = outcome.result;
+    currentRenderMeta.set(name, { width: result.width, height: result.height });
+    computedStylesMap.set(name, extractComputedStyles(result.computedStyles));
+  };
+  if (total > 0) {
+    const worker = async () => {
+      while (nextIdx < componentNames.length) {
+        const i = nextIdx++;
+        const name = componentNames[i];
+        if (name !== void 0) {
+          await renderOne(name);
+        }
+      }
+    };
+    const workers = [];
+    for (let w = 0; w < Math.min(CONCURRENCY, total); w++) {
+      workers.push(worker());
+    }
+    await Promise.all(workers);
+  }
+  await shutdownPool();
+  if (isTTY() && total > 0) {
+    process.stderr.write("\n");
+  }
+  const resolver = new TokenResolver([]);
+  const engine = new ComplianceEngine(resolver);
+  const batchReport = engine.auditBatch(computedStylesMap);
+  const complianceScore = batchReport.aggregateCompliance;
+  const checkResults = [];
+  const renderFailureCount = renderFailures.size;
+  const rendersPassed = renderFailureCount === 0;
+  if (checksSet.has("compliance")) {
+    const compliancePassed = complianceScore >= complianceThreshold;
+    checkResults.push({
+      check: "compliance",
+      passed: compliancePassed,
+      message: compliancePassed ? `Compliance ${(complianceScore * 100).toFixed(1)}% >= threshold ${(complianceThreshold * 100).toFixed(1)}%` : `Compliance ${(complianceScore * 100).toFixed(1)}% < threshold ${(complianceThreshold * 100).toFixed(1)}%`,
+      value: complianceScore,
+      threshold: complianceThreshold
+    });
+  }
+  if (checksSet.has("a11y")) {
+    checkResults.push({
+      check: "a11y",
+      passed: true,
+      message: "Accessibility audit not yet implemented \u2014 skipped"
+    });
+  }
+  if (checksSet.has("console-errors")) {
+    const consoleErrorsPassed = rendersPassed;
+    checkResults.push({
+      check: "console-errors",
+      passed: consoleErrorsPassed,
+      message: consoleErrorsPassed ? "No console errors detected" : `Console errors likely \u2014 ${renderFailureCount} component(s) failed to render`
+    });
+  }
+  let hasVisualRegression = false;
+  if (checksSet.has("visual-regression") && baselineDir !== void 0) {
+    if (!existsSync2(baselineDir)) {
+      process.stderr.write(
+        `Warning: baseline directory not found at "${baselineDir}" \u2014 skipping visual regression check.
+`
+      );
+      checkResults.push({
+        check: "visual-regression",
+        passed: true,
+        message: `Baseline not found at ${baselineDir} \u2014 skipped`
+      });
+    } else {
+      const regressions = [];
+      for (const name of componentNames) {
+        const baselineMeta = loadBaselineRenderJson(baselineDir, name);
+        const currentMeta = currentRenderMeta.get(name);
+        if (baselineMeta !== null && currentMeta !== void 0) {
+          const dw = Math.abs(currentMeta.width - baselineMeta.width);
+          const dh = Math.abs(currentMeta.height - baselineMeta.height);
+          if (dw > 10 || dh > 10) {
+            regressions.push(name);
+          }
+        }
+      }
+      hasVisualRegression = regressions.length > 0;
+      checkResults.push({
+        check: "visual-regression",
+        passed: !hasVisualRegression,
+        message: hasVisualRegression ? `Visual regression detected in ${regressions.length} component(s): ${regressions.slice(0, 5).join(", ")}${regressions.length > 5 ? "..." : ""}` : "No visual regressions detected"
+      });
+    }
+  }
+  let exitCode = CI_EXIT.OK;
+  const complianceResult = checkResults.find((r) => r.check === "compliance");
+  const a11yResult = checkResults.find((r) => r.check === "a11y");
+  const consoleResult = checkResults.find((r) => r.check === "console-errors");
+  const visualResult = checkResults.find((r) => r.check === "visual-regression");
+  if (complianceResult !== void 0 && !complianceResult.passed) {
+    exitCode = CI_EXIT.COMPLIANCE_BELOW_THRESHOLD;
+  } else if (a11yResult !== void 0 && !a11yResult.passed) {
+    exitCode = CI_EXIT.A11Y_VIOLATIONS;
+  } else if (consoleResult !== void 0 && !consoleResult.passed) {
+    exitCode = CI_EXIT.CONSOLE_ERRORS;
+  } else if (visualResult !== void 0 && !visualResult.passed) {
+    exitCode = CI_EXIT.VISUAL_REGRESSION;
+  } else if (!rendersPassed) {
+    exitCode = CI_EXIT.RENDER_FAILURES;
+  }
+  const passed = exitCode === CI_EXIT.OK;
+  const wallClockMs = performance.now() - startTime;
+  return {
+    ranAt: (/* @__PURE__ */ new Date()).toISOString(),
+    passed,
+    exitCode,
+    checks: checkResults,
+    components: {
+      total,
+      rendered: total - renderFailureCount,
+      failed: renderFailureCount
+    },
+    complianceScore,
+    complianceThreshold,
+    baselineCompared: baselineDir !== void 0 && existsSync2(baselineDir),
+    wallClockMs
+  };
+}
+function formatCiReport(result) {
+  const lines = [];
+  const title = "Scope CI Report";
+  const rule2 = "=".repeat(Math.max(title.length, 40));
+  lines.push(title, rule2);
+  const { total, rendered, failed } = result.components;
+  lines.push(
+    `Components: ${total} total  ${rendered} rendered${failed > 0 ? `  ${failed} failed` : ""}`
+  );
+  lines.push("");
+  for (const check of result.checks) {
+    const icon = check.passed ? "pass" : "FAIL";
+    lines.push(`  [${icon}] ${check.message}`);
+  }
+  if (result.components.failed > 0) {
+    lines.push(`  [FAIL] ${result.components.failed} component(s) failed to render`);
+  }
+  lines.push("");
+  lines.push(rule2);
+  if (result.passed) {
+    lines.push(
+      `CI passed in ${(result.wallClockMs / 1e3).toFixed(1)}s  (exit code ${result.exitCode})`
+    );
+  } else {
+    lines.push(
+      `CI failed in ${(result.wallClockMs / 1e3).toFixed(1)}s  (exit code ${result.exitCode})`
+    );
+  }
+  return lines.join("\n");
+}
+function parseChecks(raw) {
+  if (raw === void 0) return void 0;
+  const parts = raw.split(",").map((s) => s.trim()).filter(Boolean);
+  if (parts.length === 0) return void 0;
+  const valid = new Set(ALL_CHECKS);
+  const parsed = [];
+  for (const part of parts) {
+    if (!valid.has(part)) {
+      process.stderr.write(
+        `Warning: unknown check "${part}" \u2014 valid checks are: ${ALL_CHECKS.join(", ")}
+`
+      );
+      continue;
+    }
+    parsed.push(part);
   }
+  return parsed.length > 0 ? parsed : void 0;
 }
-function writeReportToFile(report, outputPath, pretty) {
-  const json = pretty ? JSON.stringify(report, null, 2) : JSON.stringify(report);
-  writeFileSync(outputPath, json, "utf-8");
+function createCiCommand() {
+  return new Command("ci").description(
+    "Run a non-interactive CI pipeline (manifest -> render -> compliance -> regression) with exit codes"
+  ).option(
+    "-b, --baseline <dir>",
+    "Baseline directory for visual regression comparison (omit to skip)"
+  ).option(
+    "--checks <list>",
+    `Comma-separated checks to run (default: all). Valid: ${ALL_CHECKS.join(", ")}`
+  ).option("--threshold <n>", "Compliance pass threshold (0-1, default: 0.90)", "0.90").option("--viewport <WxH>", "Viewport size, e.g. 1280x720", "375x812").option("--json", "Emit structured JSON to stdout in addition to the summary", false).option("-o, --output <path>", "Write the CI result JSON to a file").action(
+    async (opts) => {
+      try {
+        const [wStr, hStr] = opts.viewport.split("x");
+        const viewportWidth = Number.parseInt(wStr ?? "375", 10);
+        const viewportHeight = Number.parseInt(hStr ?? "812", 10);
+        const complianceThreshold = Number.parseFloat(opts.threshold);
+        const checks = parseChecks(opts.checks);
+        const result = await runCi({
+          baselineDir: opts.baseline,
+          checks,
+          complianceThreshold,
+          viewportWidth,
+          viewportHeight
+        });
+        if (opts.output !== void 0) {
+          const outPath = resolve2(process.cwd(), opts.output);
+          writeFileSync2(outPath, JSON.stringify(result, null, 2), "utf-8");
+          process.stderr.write(`CI result written to ${opts.output}
+`);
+        }
+        process.stdout.write(`${formatCiReport(result)}
+`);
+        if (opts.json) {
+          process.stdout.write(`${JSON.stringify(result, null, 2)}
+`);
+        }
+        process.exit(result.exitCode);
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(CI_EXIT.RENDER_FAILURES);
+      }
+    }
+  );
 }
 
 // src/init/index.ts
-import { appendFileSync, existsSync as existsSync2, mkdirSync, readFileSync as readFileSync2, writeFileSync as writeFileSync2 } from "fs";
+import { appendFileSync, existsSync as existsSync4, mkdirSync, readFileSync as readFileSync4, writeFileSync as writeFileSync3 } from "fs";
 import { join as join2 } from "path";
 import * as readline from "readline";
 
 // src/init/detect.ts
-import { existsSync, readdirSync, readFileSync } from "fs";
+import { existsSync as existsSync3, readdirSync, readFileSync as readFileSync3 } from "fs";
 import { join } from "path";
 function hasConfigFile(dir, stem) {
-  if (!existsSync(dir)) return false;
+  if (!existsSync3(dir)) return false;
   try {
     const entries = readdirSync(dir);
     return entries.some((f) => f === stem || f.startsWith(`${stem}.`));
@@ -69,7 +988,7 @@ function hasConfigFile(dir, stem) {
 }
 function readSafe(path) {
   try {
-    return readFileSync(path, "utf-8");
+    return readFileSync3(path, "utf-8");
   } catch {
     return null;
   }
@@ -82,15 +1001,15 @@ function detectFramework(rootDir, packageDeps) {
   return "unknown";
 }
 function detectPackageManager(rootDir) {
-  if (existsSync(join(rootDir, "bun.lock"))) return "bun";
-  if (existsSync(join(rootDir, "yarn.lock"))) return "yarn";
-  if (existsSync(join(rootDir, "pnpm-lock.yaml"))) return "pnpm";
-  if (existsSync(join(rootDir, "package-lock.json"))) return "npm";
+  if (existsSync3(join(rootDir, "bun.lock"))) return "bun";
+  if (existsSync3(join(rootDir, "yarn.lock"))) return "yarn";
+  if (existsSync3(join(rootDir, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync3(join(rootDir, "package-lock.json"))) return "npm";
   return "npm";
 }
 function detectTypeScript(rootDir) {
   const candidate = join(rootDir, "tsconfig.json");
-  if (existsSync(candidate)) {
+  if (existsSync3(candidate)) {
     return { typescript: true, tsconfigPath: candidate };
   }
   return { typescript: false, tsconfigPath: null };
@@ -103,7 +1022,7 @@ function detectComponentPatterns(rootDir, typescript) {
   const altExt = typescript ? "jsx" : "jsx";
   for (const dir of COMPONENT_DIRS) {
     const absDir = join(rootDir, dir);
-    if (!existsSync(absDir)) continue;
+    if (!existsSync3(absDir)) continue;
     let hasComponents = false;
     try {
       const entries = readdirSync(absDir, { withFileTypes: true });
@@ -158,7 +1077,7 @@ function detectTokenSources(rootDir) {
     }
   }
   const srcDir = join(rootDir, "src");
-  const dirsToScan = existsSync(srcDir) ? [srcDir] : [];
+  const dirsToScan = existsSync3(srcDir) ? [srcDir] : [];
   for (const scanDir of dirsToScan) {
     try {
       const entries = readdirSync(scanDir, { withFileTypes: true });
@@ -174,7 +1093,7 @@ function detectTokenSources(rootDir) {
     } catch {
     }
   }
-  if (existsSync(srcDir)) {
+  if (existsSync3(srcDir)) {
     try {
       const entries = readdirSync(srcDir);
       for (const entry of entries) {
@@ -217,7 +1136,7 @@ function detectProject(rootDir) {
 }
 
 // src/init/index.ts
-import { Command } from "commander";
+import { Command as Command2 } from "commander";
 function buildDefaultConfig(detected, tokenFile, outputDir) {
   const include = detected.componentPatterns.length > 0 ? detected.componentPatterns : ["src/**/*.tsx"];
   return {
@@ -255,9 +1174,9 @@ function createRL() {
   });
 }
 async function ask(rl, question) {
-  return new Promise((resolve12) => {
+  return new Promise((resolve15) => {
     rl.question(question, (answer) => {
-      resolve12(answer.trim());
+      resolve15(answer.trim());
     });
   });
 }
@@ -267,8 +1186,8 @@ async function askWithDefault(rl, label, defaultValue) {
 }
 function ensureGitignoreEntry(rootDir, entry) {
   const gitignorePath = join2(rootDir, ".gitignore");
-  if (existsSync2(gitignorePath)) {
-    const content = readFileSync2(gitignorePath, "utf-8");
+  if (existsSync4(gitignorePath)) {
+    const content = readFileSync4(gitignorePath, "utf-8");
     const normalised = entry.replace(/\/$/, "");
     const lines = content.split("\n").map((l) => l.trim());
     if (lines.includes(entry) || lines.includes(normalised)) {
@@ -278,24 +1197,24 @@ function ensureGitignoreEntry(rootDir, entry) {
     appendFileSync(gitignorePath, `${suffix}${entry}
 `);
   } else {
-    writeFileSync2(gitignorePath, `${entry}
+    writeFileSync3(gitignorePath, `${entry}
 `);
   }
 }
 function scaffoldConfig(rootDir, config) {
   const path = join2(rootDir, "reactscope.config.json");
-  writeFileSync2(path, `${JSON.stringify(config, null, 2)}
+  writeFileSync3(path, `${JSON.stringify(config, null, 2)}
 `);
   return path;
 }
 function scaffoldTokenFile(rootDir, tokenFile) {
   const path = join2(rootDir, tokenFile);
-  if (!existsSync2(path)) {
+  if (!existsSync4(path)) {
     const stub = {
       $schema: "https://raw.githubusercontent.com/FlatFilers/Scope/main/packages/tokens/schema.json",
       tokens: {}
     };
-    writeFileSync2(path, `${JSON.stringify(stub, null, 2)}
+    writeFileSync3(path, `${JSON.stringify(stub, null, 2)}
 `);
   }
   return path;
@@ -304,8 +1223,8 @@ function scaffoldOutputDir(rootDir, outputDir) {
   const dirPath = join2(rootDir, outputDir);
   mkdirSync(dirPath, { recursive: true });
   const keepPath = join2(dirPath, ".gitkeep");
-  if (!existsSync2(keepPath)) {
-    writeFileSync2(keepPath, "");
+  if (!existsSync4(keepPath)) {
+    writeFileSync3(keepPath, "");
   }
   return dirPath;
 }
@@ -313,7 +1232,7 @@ async function runInit(options) {
   const rootDir = options.cwd ?? process.cwd();
   const configPath = join2(rootDir, "reactscope.config.json");
   const created = [];
-  if (existsSync2(configPath) && !options.force) {
+  if (existsSync4(configPath) && !options.force) {
     const msg = "reactscope.config.json already exists. Run with --force to overwrite.";
     process.stderr.write(`\u26A0\uFE0F  ${msg}
 `);
@@ -383,257 +1302,46 @@ async function runInit(options) {
 `);
   }
   process.stdout.write("\n   Next steps: run `scope manifest` to scan your components.\n\n");
-  return {
-    success: true,
-    message: "Project initialised successfully.",
-    created,
-    skipped: false
-  };
-}
-function createInitCommand() {
-  return new Command("init").description("Initialise a Scope project \u2014 scaffold reactscope.config.json and friends").option("-y, --yes", "Accept all detected defaults without prompting", false).option("--force", "Overwrite existing reactscope.config.json if present", false).action(async (opts) => {
-    try {
-      const result = await runInit({ yes: opts.yes, force: opts.force });
-      if (!result.success && !result.skipped) {
-        process.exit(1);
-      }
-    } catch (err) {
-      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
-`);
-      process.exit(1);
-    }
-  });
-}
-
-// src/instrument/renders.ts
-import { resolve as resolve5 } from "path";
-import { BrowserPool as BrowserPool2 } from "@agent-scope/render";
-import { Command as Command4 } from "commander";
-
-// src/component-bundler.ts
-import { dirname } from "path";
-import * as esbuild from "esbuild";
-async function buildComponentHarness(filePath, componentName, props, viewportWidth, projectCss) {
-  const bundledScript = await bundleComponentToIIFE(filePath, componentName, props);
-  return wrapInHtml(bundledScript, viewportWidth, projectCss);
-}
-async function bundleComponentToIIFE(filePath, componentName, props) {
-  const propsJson = JSON.stringify(props).replace(/<\/script>/gi, "<\\/script>");
-  const wrapperCode = (
-    /* ts */
-    `
-import * as __scopeMod from ${JSON.stringify(filePath)};
-import { createRoot } from "react-dom/client";
-import { createElement } from "react";
-
-(function scopeRenderHarness() {
-  var Component =
-    __scopeMod["default"] ||
-    __scopeMod[${JSON.stringify(componentName)}] ||
-    (Object.values(__scopeMod).find(
-      function(v) { return typeof v === "function" && /^[A-Z]/.test(v.name || ""); }
-    ));
-
-  if (!Component) {
-    window.__SCOPE_RENDER_ERROR__ =
-      "No renderable component found. Checked: default, " +
-      ${JSON.stringify(componentName)} + ", and PascalCase named exports. " +
-      "Available exports: " + Object.keys(__scopeMod).join(", ");
-    window.__SCOPE_RENDER_COMPLETE__ = true;
-    return;
-  }
-
-  try {
-    var props = ${propsJson};
-    var rootEl = document.getElementById("scope-root");
-    if (!rootEl) {
-      window.__SCOPE_RENDER_ERROR__ = "#scope-root element not found";
-      window.__SCOPE_RENDER_COMPLETE__ = true;
-      return;
-    }
-    createRoot(rootEl).render(createElement(Component, props));
-    // Use requestAnimationFrame to let React flush the render
-    requestAnimationFrame(function() {
-      window.__SCOPE_RENDER_COMPLETE__ = true;
-    });
-  } catch (err) {
-    window.__SCOPE_RENDER_ERROR__ = err instanceof Error ? err.message : String(err);
-    window.__SCOPE_RENDER_COMPLETE__ = true;
-  }
-})();
-`
-  );
-  const result = await esbuild.build({
-    stdin: {
-      contents: wrapperCode,
-      // Resolve relative imports (within the component's dir)
-      resolveDir: dirname(filePath),
-      loader: "tsx",
-      sourcefile: "__scope_harness__.tsx"
-    },
-    bundle: true,
-    format: "iife",
-    write: false,
-    platform: "browser",
-    jsx: "automatic",
-    jsxImportSource: "react",
-    target: "es2020",
-    // Bundle everything — no externals
-    external: [],
-    define: {
-      "process.env.NODE_ENV": '"development"',
-      global: "globalThis"
-    },
-    logLevel: "silent",
-    // Suppress "React must be in scope" warnings from old JSX (we use automatic)
-    banner: {
-      js: "/* @agent-scope/cli component harness */"
-    }
-  });
-  if (result.errors.length > 0) {
-    const msg = result.errors.map((e) => `${e.text}${e.location ? ` (${e.location.file}:${e.location.line})` : ""}`).join("\n");
-    throw new Error(`esbuild failed to bundle component:
-${msg}`);
-  }
-  const outputFile = result.outputFiles?.[0];
-  if (outputFile === void 0 || outputFile.text.length === 0) {
-    throw new Error("esbuild produced no output");
-  }
-  return outputFile.text;
-}
-function wrapInHtml(bundledScript, viewportWidth, projectCss) {
-  const projectStyleBlock = projectCss != null && projectCss.length > 0 ? `<style id="scope-project-css">
-${projectCss.replace(/<\/style>/gi, "<\\/style>")}
-</style>` : "";
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=${viewportWidth}, initial-scale=1.0" />
-  <style>
-    *, *::before, *::after { box-sizing: border-box; }
-    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
-    #scope-root { display: inline-block; min-width: 1px; min-height: 1px; }
-  </style>
-  ${projectStyleBlock}
-</head>
-<body>
-  <div id="scope-root" data-reactscope-root></div>
-  <script>${bundledScript}</script>
-</body>
-</html>`;
-}
-
-// src/manifest-commands.ts
-import { existsSync as existsSync3, mkdirSync as mkdirSync2, readFileSync as readFileSync3, writeFileSync as writeFileSync3 } from "fs";
-import { resolve } from "path";
-import { generateManifest } from "@agent-scope/manifest";
-import { Command as Command2 } from "commander";
-
-// src/manifest-formatter.ts
-function isTTY() {
-  return process.stdout.isTTY === true;
-}
-function pad(value, width) {
-  return value.length >= width ? value.slice(0, width) : value + " ".repeat(width - value.length);
-}
-function buildTable(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) => pad(h, colWidths[i] ?? 0)).join("  ");
-  const dataRows = rows.map(
-    (row2) => row2.map((cell, i) => pad(cell ?? "", colWidths[i] ?? 0)).join("  ")
-  );
-  return [headerRow, divider, ...dataRows].join("\n");
-}
-function formatListTable(rows) {
-  if (rows.length === 0) return "No components found.";
-  const headers = ["NAME", "FILE", "COMPLEXITY", "HOOKS", "CONTEXTS"];
-  const tableRows = rows.map((r) => [
-    r.name,
-    r.file,
-    r.complexityClass,
-    String(r.hookCount),
-    String(r.contextCount)
-  ]);
-  return buildTable(headers, tableRows);
-}
-function formatListJson(rows) {
-  return JSON.stringify(rows, null, 2);
-}
-function formatSideEffects(se) {
-  const parts = [];
-  if (se.fetches.length > 0) parts.push(`fetches: ${se.fetches.join(", ")}`);
-  if (se.timers) parts.push("timers");
-  if (se.subscriptions.length > 0) parts.push(`subscriptions: ${se.subscriptions.join(", ")}`);
-  if (se.globalListeners) parts.push("globalListeners");
-  return parts.length > 0 ? parts.join(" | ") : "none";
-}
-function formatGetTable(name, descriptor) {
-  const propNames = Object.keys(descriptor.props);
-  const lines = [
-    `Component: ${name}`,
-    `  File:           ${descriptor.filePath}`,
-    `  Export:         ${descriptor.exportType}`,
-    `  Display Name:   ${descriptor.displayName}`,
-    `  Complexity:     ${descriptor.complexityClass}`,
-    `  Memoized:       ${descriptor.memoized}`,
-    `  Forwarded Ref:  ${descriptor.forwardedRef}`,
-    `  HOC Wrappers:   ${descriptor.hocWrappers.join(", ") || "none"}`,
-    `  Hooks:          ${descriptor.detectedHooks.join(", ") || "none"}`,
-    `  Contexts:       ${descriptor.requiredContexts.join(", ") || "none"}`,
-    `  Composes:       ${descriptor.composes.join(", ") || "none"}`,
-    `  Composed By:    ${descriptor.composedBy.join(", ") || "none"}`,
-    `  Side Effects:   ${formatSideEffects(descriptor.sideEffects)}`,
-    "",
-    `  Props (${propNames.length}):`
-  ];
-  if (propNames.length === 0) {
-    lines.push("    (none)");
-  } else {
-    for (const propName of propNames) {
-      const p = descriptor.props[propName];
-      if (p === void 0) continue;
-      const req = p.required ? "required" : "optional";
-      const def = p.default !== void 0 ? ` [default: ${p.default}]` : "";
-      const vals = p.values !== void 0 ? ` (${p.values.join(" | ")})` : "";
-      lines.push(`    ${propName}: ${p.rawType}${vals} \u2014 ${req}${def}`);
-    }
-  }
-  return lines.join("\n");
+  return {
+    success: true,
+    message: "Project initialised successfully.",
+    created,
+    skipped: false
+  };
 }
-function formatGetJson(name, descriptor) {
-  return JSON.stringify({ name, ...descriptor }, null, 2);
+function createInitCommand() {
+  return new Command2("init").description("Initialise a Scope project \u2014 scaffold reactscope.config.json and friends").option("-y, --yes", "Accept all detected defaults without prompting", false).option("--force", "Overwrite existing reactscope.config.json if present", false).action(async (opts) => {
+    try {
+      const result = await runInit({ yes: opts.yes, force: opts.force });
+      if (!result.success && !result.skipped) {
+        process.exit(1);
+      }
+    } catch (err) {
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
+    }
+  });
 }
-function formatQueryTable(rows, queryDesc) {
-  if (rows.length === 0) return `No components match: ${queryDesc}`;
-  const headers = ["NAME", "FILE", "COMPLEXITY", "HOOKS", "CONTEXTS"];
-  const tableRows = rows.map((r) => [r.name, r.file, r.complexityClass, r.hooks, r.contexts]);
-  return `Query: ${queryDesc}
 
-${buildTable(headers, tableRows)}`;
-}
-function formatQueryJson(rows) {
-  return JSON.stringify(rows, null, 2);
-}
-function matchGlob(pattern, value) {
-  const escaped = pattern.replace(/[.+^${}()|[\]\\]/g, "\\$&");
-  const regexStr = escaped.replace(/\*\*/g, "\xA7GLOBSTAR\xA7").replace(/\*/g, "[^/]*").replace(/§GLOBSTAR§/g, ".*");
-  const regex = new RegExp(`^${regexStr}$`, "i");
-  return regex.test(value);
-}
+// src/instrument/renders.ts
+import { resolve as resolve7 } from "path";
+import { BrowserPool as BrowserPool3 } from "@agent-scope/render";
+import { Command as Command5 } from "commander";
 
 // src/manifest-commands.ts
+import { existsSync as existsSync5, mkdirSync as mkdirSync2, readFileSync as readFileSync5, writeFileSync as writeFileSync4 } from "fs";
+import { resolve as resolve3 } from "path";
+import { generateManifest as generateManifest2 } from "@agent-scope/manifest";
+import { Command as Command3 } from "commander";
 var MANIFEST_PATH = ".reactscope/manifest.json";
 function loadManifest(manifestPath = MANIFEST_PATH) {
-  const absPath = resolve(process.cwd(), manifestPath);
-  if (!existsSync3(absPath)) {
+  const absPath = resolve3(process.cwd(), manifestPath);
+  if (!existsSync5(absPath)) {
     throw new Error(`Manifest not found at ${absPath}.
 Run \`scope manifest generate\` first.`);
   }
-  const raw = readFileSync3(absPath, "utf-8");
+  const raw = readFileSync5(absPath, "utf-8");
   return JSON.parse(raw);
 }
 function resolveFormat(formatFlag) {
@@ -721,244 +1429,84 @@ function registerQuery(manifestCmd) {
           entries = entries.filter(([, d]) => d.detectedHooks.includes(hook));
         }
         if (opts.complexity !== void 0) {
-          const cls = opts.complexity;
-          entries = entries.filter(([, d]) => d.complexityClass === cls);
-        }
-        if (opts.sideEffects) {
-          entries = entries.filter(([, d]) => {
-            const se = d.sideEffects;
-            return se.fetches.length > 0 || se.timers || se.subscriptions.length > 0 || se.globalListeners;
-          });
-        }
-        if (opts.hasFetch) {
-          entries = entries.filter(([, d]) => d.sideEffects.fetches.length > 0);
-        }
-        const rows = entries.map(([name, d]) => ({
-          name,
-          file: d.filePath,
-          complexityClass: d.complexityClass,
-          hooks: d.detectedHooks.join(", ") || "\u2014",
-          contexts: d.requiredContexts.join(", ") || "\u2014"
-        }));
-        const output = format === "json" ? formatQueryJson(rows) : formatQueryTable(rows, queryDesc);
-        process.stdout.write(`${output}
-`);
-      } catch (err) {
-        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
-`);
-        process.exit(1);
-      }
-    }
-  );
-}
-function registerGenerate(manifestCmd) {
-  manifestCmd.command("generate").description(
-    "Generate the component manifest from source and write to .reactscope/manifest.json"
-  ).option("--root <path>", "Project root directory (default: cwd)").option("--output <path>", "Output path for manifest.json", MANIFEST_PATH).option("--include <globs>", "Comma-separated glob patterns to include").option("--exclude <globs>", "Comma-separated glob patterns to exclude").action(async (opts) => {
-    try {
-      const rootDir = resolve(process.cwd(), opts.root ?? ".");
-      const outputPath = resolve(process.cwd(), opts.output);
-      const include = opts.include?.split(",").map((s) => s.trim());
-      const exclude = opts.exclude?.split(",").map((s) => s.trim());
-      process.stderr.write(`Scanning ${rootDir} for React components...
-`);
-      const manifest = await generateManifest({
-        rootDir,
-        ...include !== void 0 && { include },
-        ...exclude !== void 0 && { exclude }
-      });
-      const componentCount = Object.keys(manifest.components).length;
-      process.stderr.write(`Found ${componentCount} components.
-`);
-      const outputDir = outputPath.replace(/\/[^/]+$/, "");
-      if (!existsSync3(outputDir)) {
-        mkdirSync2(outputDir, { recursive: true });
-      }
-      writeFileSync3(outputPath, JSON.stringify(manifest, null, 2), "utf-8");
-      process.stderr.write(`Manifest written to ${outputPath}
-`);
-      process.stdout.write(`${outputPath}
-`);
-    } catch (err) {
-      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
-`);
-      process.exit(1);
-    }
-  });
-}
-function createManifestCommand() {
-  const manifestCmd = new Command2("manifest").description(
-    "Query and explore the component manifest"
-  );
-  registerList(manifestCmd);
-  registerGet(manifestCmd);
-  registerQuery(manifestCmd);
-  registerGenerate(manifestCmd);
-  return manifestCmd;
-}
-
-// src/render-formatter.ts
-function parseViewport(spec) {
-  const lower = spec.toLowerCase();
-  const match = /^(\d+)[x×](\d+)$/.exec(lower);
-  if (!match) {
-    throw new Error(`Invalid viewport "${spec}". Expected format: WIDTHxHEIGHT (e.g. 1280x720)`);
-  }
-  const width = parseInt(match[1] ?? "0", 10);
-  const height = parseInt(match[2] ?? "0", 10);
-  if (width <= 0 || height <= 0) {
-    throw new Error(`Viewport dimensions must be positive integers, got: ${spec}`);
-  }
-  return { width, height };
-}
-function formatRenderJson(componentName, props, result) {
-  return {
-    component: componentName,
-    props,
-    width: result.width,
-    height: result.height,
-    renderTimeMs: result.renderTimeMs,
-    computedStyles: result.computedStyles,
-    screenshot: result.screenshot.toString("base64"),
-    dom: result.dom,
-    console: result.console,
-    accessibility: result.accessibility
-  };
-}
-function formatMatrixJson(result) {
-  return {
-    axes: result.axes.map((axis) => ({
-      name: axis.name,
-      values: axis.values.map((v) => String(v))
-    })),
-    stats: { ...result.stats },
-    cells: result.cells.map((cell) => ({
-      index: cell.index,
-      axisIndices: cell.axisIndices,
-      props: cell.props,
-      renderTimeMs: cell.result.renderTimeMs,
-      width: cell.result.width,
-      height: cell.result.height,
-      screenshot: cell.result.screenshot.toString("base64")
-    }))
-  };
-}
-function formatMatrixHtml(componentName, result) {
-  const cellsHtml = result.cells.map((cell) => {
-    const b64 = cell.result.screenshot.toString("base64");
-    const propLabel = escapeHtml(
-      Object.entries(cell.props).map(([k, v]) => `${k}: ${String(v)}`).join(", ")
-    );
-    return `    <div class="cell">
-      <img src="data:image/png;base64,${b64}" alt="${propLabel}" width="${cell.result.width}" height="${cell.result.height}" />
-      <div class="label">${propLabel}</div>
-      <div class="meta">${cell.result.renderTimeMs.toFixed(1)}ms</div>
-    </div>`;
-  }).join("\n");
-  const axesDesc = result.axes.map((a) => `${a.name}: ${a.values.map((v) => String(v)).join(", ")}`).join(" | ");
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>${escapeHtml(componentName)} \u2014 Render Matrix</title>
-  <style>
-    body { font-family: system-ui, sans-serif; background: #f8fafc; margin: 0; padding: 24px; }
-    h1 { font-size: 1.25rem; color: #1e293b; margin-bottom: 8px; }
-    .axes { font-size: 0.8rem; color: #64748b; margin-bottom: 20px; }
-    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
-    .cell { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
-    .cell img { display: block; }
-    .label { padding: 6px 8px; font-size: 0.75rem; color: #374151; border-top: 1px solid #f1f5f9; }
-    .meta { padding: 2px 8px 6px; font-size: 0.7rem; color: #94a3b8; }
-    .stats { margin-top: 24px; font-size: 0.8rem; color: #64748b; }
-  </style>
-</head>
-<body>
-  <h1>${escapeHtml(componentName)} \u2014 Render Matrix</h1>
-  <div class="axes">Axes: ${escapeHtml(axesDesc)}</div>
-  <div class="grid">
-${cellsHtml}
-  </div>
-  <div class="stats">
-    ${result.stats.totalCells} cells \xB7
-    avg ${result.stats.avgRenderTimeMs.toFixed(1)}ms \xB7
-    min ${result.stats.minRenderTimeMs.toFixed(1)}ms \xB7
-    max ${result.stats.maxRenderTimeMs.toFixed(1)}ms \xB7
-    wall ${result.stats.wallClockTimeMs.toFixed(0)}ms
-  </div>
-</body>
-</html>
-`;
-}
-function formatMatrixCsv(componentName, result) {
-  const axisNames = result.axes.map((a) => a.name);
-  const headers = ["component", ...axisNames, "renderTimeMs", "width", "height"];
-  const rows = result.cells.map((cell) => {
-    const axisVals = result.axes.map((_, i) => {
-      const axisIdx = cell.axisIndices[i];
-      const axis = result.axes[i];
-      if (axisIdx === void 0 || axis === void 0) return "";
-      const val = axis.values[axisIdx];
-      return val !== void 0 ? csvEscape(String(val)) : "";
-    });
-    return [
-      csvEscape(componentName),
-      ...axisVals,
-      cell.result.renderTimeMs.toFixed(3),
-      String(cell.result.width),
-      String(cell.result.height)
-    ].join(",");
-  });
-  return `${[headers.join(","), ...rows].join("\n")}
-`;
-}
-function renderProgressBar(completed, total, currentName, pct, barWidth = 20) {
-  const filled = Math.round(pct / 100 * barWidth);
-  const empty = barWidth - filled;
-  const bar = "=".repeat(Math.max(0, filled - 1)) + (filled > 0 ? ">" : "") + " ".repeat(empty);
-  const nameSlice = currentName.slice(0, 25).padEnd(25);
-  return `Rendering ${completed}/${total} ${nameSlice} [${bar}] ${pct}%`;
-}
-function formatSummaryText(results, outputDir) {
-  const total = results.length;
-  const passed = results.filter((r) => r.success).length;
-  const failed = total - passed;
-  const successTimes = results.filter((r) => r.success).map((r) => r.renderTimeMs);
-  const avgMs = successTimes.length > 0 ? successTimes.reduce((a, b) => a + b, 0) / successTimes.length : 0;
-  const lines = [
-    "\u2500".repeat(60),
-    `Render Summary`,
-    "\u2500".repeat(60),
-    `  Total components : ${total}`,
-    `  Passed           : ${passed}`,
-    `  Failed           : ${failed}`,
-    `  Avg render time  : ${avgMs.toFixed(1)}ms`,
-    `  Output dir       : ${outputDir}`
-  ];
-  if (failed > 0) {
-    lines.push("", "  Failed components:");
-    for (const r of results) {
-      if (!r.success) {
-        lines.push(`    \u2717 ${r.name}: ${r.errorMessage ?? "unknown error"}`);
+          const cls = opts.complexity;
+          entries = entries.filter(([, d]) => d.complexityClass === cls);
+        }
+        if (opts.sideEffects) {
+          entries = entries.filter(([, d]) => {
+            const se = d.sideEffects;
+            return se.fetches.length > 0 || se.timers || se.subscriptions.length > 0 || se.globalListeners;
+          });
+        }
+        if (opts.hasFetch) {
+          entries = entries.filter(([, d]) => d.sideEffects.fetches.length > 0);
+        }
+        const rows = entries.map(([name, d]) => ({
+          name,
+          file: d.filePath,
+          complexityClass: d.complexityClass,
+          hooks: d.detectedHooks.join(", ") || "\u2014",
+          contexts: d.requiredContexts.join(", ") || "\u2014"
+        }));
+        const output = format === "json" ? formatQueryJson(rows) : formatQueryTable(rows, queryDesc);
+        process.stdout.write(`${output}
+`);
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
       }
     }
-  }
-  lines.push("\u2500".repeat(60));
-  return lines.join("\n");
+  );
 }
-function escapeHtml(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+function registerGenerate(manifestCmd) {
+  manifestCmd.command("generate").description(
+    "Generate the component manifest from source and write to .reactscope/manifest.json"
+  ).option("--root <path>", "Project root directory (default: cwd)").option("--output <path>", "Output path for manifest.json", MANIFEST_PATH).option("--include <globs>", "Comma-separated glob patterns to include").option("--exclude <globs>", "Comma-separated glob patterns to exclude").action(async (opts) => {
+    try {
+      const rootDir = resolve3(process.cwd(), opts.root ?? ".");
+      const outputPath = resolve3(process.cwd(), opts.output);
+      const include = opts.include?.split(",").map((s) => s.trim());
+      const exclude = opts.exclude?.split(",").map((s) => s.trim());
+      process.stderr.write(`Scanning ${rootDir} for React components...
+`);
+      const manifest = await generateManifest2({
+        rootDir,
+        ...include !== void 0 && { include },
+        ...exclude !== void 0 && { exclude }
+      });
+      const componentCount = Object.keys(manifest.components).length;
+      process.stderr.write(`Found ${componentCount} components.
+`);
+      const outputDir = outputPath.replace(/\/[^/]+$/, "");
+      if (!existsSync5(outputDir)) {
+        mkdirSync2(outputDir, { recursive: true });
+      }
+      writeFileSync4(outputPath, JSON.stringify(manifest, null, 2), "utf-8");
+      process.stderr.write(`Manifest written to ${outputPath}
+`);
+      process.stdout.write(`${outputPath}
+`);
+    } catch (err) {
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
+    }
+  });
 }
-function csvEscape(value) {
-  if (value.includes(",") || value.includes('"') || value.includes("\n")) {
-    return `"${value.replace(/"/g, '""')}"`;
-  }
-  return value;
+function createManifestCommand() {
+  const manifestCmd = new Command3("manifest").description(
+    "Query and explore the component manifest"
+  );
+  registerList(manifestCmd);
+  registerGet(manifestCmd);
+  registerQuery(manifestCmd);
+  registerGenerate(manifestCmd);
+  return manifestCmd;
 }
 
 // src/instrument/hooks.ts
-import { resolve as resolve2 } from "path";
+import { resolve as resolve4 } from "path";
 import { Command as Cmd } from "commander";
 import { chromium as chromium2 } from "playwright";
 var MANIFEST_PATH2 = ".reactscope/manifest.json";
@@ -1281,7 +1829,7 @@ Available: ${available}`
           throw new Error(`Invalid props JSON: ${opts.props}`);
         }
         const rootDir = process.cwd();
-        const filePath = resolve2(rootDir, descriptor.filePath);
+        const filePath = resolve4(rootDir, descriptor.filePath);
         process.stderr.write(`Instrumenting hooks for ${componentName}\u2026
 `);
         const result = await runHooksProfiling(componentName, filePath, props);
@@ -1309,7 +1857,7 @@ Available: ${available}`
 }
 
 // src/instrument/profile.ts
-import { resolve as resolve3 } from "path";
+import { resolve as resolve5 } from "path";
 import { Command as Cmd2 } from "commander";
 import { chromium as chromium3 } from "playwright";
 var MANIFEST_PATH3 = ".reactscope/manifest.json";
@@ -1575,7 +2123,7 @@ Available: ${available}`
           throw new Error(`Invalid interaction JSON: ${opts.interaction}`);
         }
         const rootDir = process.cwd();
-        const filePath = resolve3(rootDir, descriptor.filePath);
+        const filePath = resolve5(rootDir, descriptor.filePath);
         process.stderr.write(`Profiling interaction for ${componentName}\u2026
 `);
         const result = await runInteractionProfile(componentName, filePath, props, interaction);
@@ -1603,29 +2151,29 @@ Available: ${available}`
 }
 
 // src/instrument/tree.ts
-import { resolve as resolve4 } from "path";
+import { resolve as resolve6 } from "path";
 import { getBrowserEntryScript as getBrowserEntryScript2 } from "@agent-scope/playwright";
-import { BrowserPool } from "@agent-scope/render";
-import { Command as Command3 } from "commander";
+import { BrowserPool as BrowserPool2 } from "@agent-scope/render";
+import { Command as Command4 } from "commander";
 var MANIFEST_PATH4 = ".reactscope/manifest.json";
 var DEFAULT_VIEWPORT_WIDTH = 375;
 var DEFAULT_VIEWPORT_HEIGHT = 812;
-var _pool = null;
-async function getPool() {
-  if (_pool === null) {
-    _pool = new BrowserPool({
+var _pool2 = null;
+async function getPool2() {
+  if (_pool2 === null) {
+    _pool2 = new BrowserPool2({
       size: { browsers: 1, pagesPerBrowser: 1 },
       viewportWidth: DEFAULT_VIEWPORT_WIDTH,
       viewportHeight: DEFAULT_VIEWPORT_HEIGHT
     });
-    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 mapNodeType(node) {
@@ -1839,7 +2387,7 @@ function formatInstrumentTree(root, showProviderDepth = false) {
 }
 async function runInstrumentTree(options) {
   const { componentName, filePath } = options;
-  const pool = await getPool();
+  const pool = await getPool2();
   const slot = await pool.acquire();
   const { page } = slot;
   try {
@@ -1900,7 +2448,7 @@ async function runInstrumentTree(options) {
   }
 }
 function createInstrumentTreeCommand() {
-  return new Command3("tree").description("Render a component via BrowserPool and output a structured instrumentation tree").argument("<component>", "Component name to instrument (must exist in the manifest)").option("--sort-by <field>", "Sort nodes by field: renderCount | depth").option("--limit <n>", "Limit output to the first N nodes (depth-first)").option("--uses-context <name>", "Filter to components that use a specific context").option("--provider-depth", "Annotate each node with its context-provider nesting depth", false).option(
+  return new Command4("tree").description("Render a component via BrowserPool and output a structured instrumentation tree").argument("<component>", "Component name to instrument (must exist in the manifest)").option("--sort-by <field>", "Sort nodes by field: renderCount | depth").option("--limit <n>", "Limit output to the first N nodes (depth-first)").option("--uses-context <name>", "Filter to components that use a specific context").option("--provider-depth", "Annotate each node with its context-provider nesting depth", false).option(
     "--wasted-renders",
     "Filter to components with wasted renders (no prop/state/context changes, not memoized)",
     false
@@ -1924,7 +2472,7 @@ Available: ${available}`
         }
       }
       const rootDir = process.cwd();
-      const filePath = resolve4(rootDir, descriptor.filePath);
+      const filePath = resolve6(rootDir, descriptor.filePath);
       process.stderr.write(`Instrumenting ${componentName}\u2026
 `);
       const instrumentRoot = await runInstrumentTree({
@@ -1936,7 +2484,7 @@ Available: ${available}`
         providerDepth: opts.providerDepth,
         wastedRenders: opts.wastedRenders
       });
-      await shutdownPool();
+      await shutdownPool2();
       const fmt = resolveFormat2(opts.format);
       if (fmt === "json") {
         process.stdout.write(`${JSON.stringify(instrumentRoot, null, 2)}
@@ -1947,7 +2495,7 @@ Available: ${available}`
 `);
       }
     } catch (err) {
-      await shutdownPool();
+      await shutdownPool2();
       process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
       process.exit(1);
@@ -2267,22 +2815,22 @@ async function replayInteraction2(page, steps) {
     }
   }
 }
-var _pool2 = null;
-async function getPool2() {
-  if (_pool2 === null) {
-    _pool2 = new BrowserPool2({
+var _pool3 = null;
+async function getPool3() {
+  if (_pool3 === null) {
+    _pool3 = new BrowserPool3({
       size: { browsers: 1, pagesPerBrowser: 2 },
       viewportWidth: 1280,
       viewportHeight: 800
     });
-    await _pool2.init();
+    await _pool3.init();
   }
-  return _pool2;
+  return _pool3;
 }
-async function shutdownPool2() {
-  if (_pool2 !== null) {
-    await _pool2.close();
-    _pool2 = null;
+async function shutdownPool3() {
+  if (_pool3 !== null) {
+    await _pool3.close();
+    _pool3 = null;
   }
 }
 async function analyzeRenders(options) {
@@ -2297,9 +2845,9 @@ Available: ${available}`
     );
   }
   const rootDir = process.cwd();
-  const filePath = resolve5(rootDir, descriptor.filePath);
+  const filePath = resolve7(rootDir, descriptor.filePath);
   const htmlHarness = await buildComponentHarness(filePath, options.componentName, {}, 1280);
-  const pool = await getPool2();
+  const pool = await getPool3();
   const slot = await pool.acquire();
   const { page } = slot;
   const startMs = performance.now();
@@ -2380,7 +2928,7 @@ function formatRendersTable(result) {
   return lines.join("\n");
 }
 function createInstrumentRendersCommand() {
-  return new Command4("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(
+  return new Command5("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"}]'`,
     "[]"
@@ -2407,7 +2955,7 @@ function createInstrumentRendersCommand() {
           interaction,
           manifestPath: opts.manifest
         });
-        await shutdownPool2();
+        await shutdownPool3();
         if (opts.json || !isTTY()) {
           process.stdout.write(`${JSON.stringify(result, null, 2)}
 `);
@@ -2416,7 +2964,7 @@ function createInstrumentRendersCommand() {
 `);
         }
       } catch (err) {
-        await shutdownPool2();
+        await shutdownPool3();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -2425,7 +2973,7 @@ function createInstrumentRendersCommand() {
   );
 }
 function createInstrumentCommand() {
-  const instrumentCmd = new Command4("instrument").description(
+  const instrumentCmd = new Command5("instrument").description(
     "Structured instrumentation commands for React component analysis"
   );
   instrumentCmd.addCommand(createInstrumentRendersCommand());
@@ -2436,159 +2984,37 @@ function createInstrumentCommand() {
 }
 
 // src/render-commands.ts
-import { mkdirSync as mkdirSync3, writeFileSync as writeFileSync4 } from "fs";
-import { resolve as resolve7 } from "path";
+import { mkdirSync as mkdirSync3, writeFileSync as writeFileSync5 } from "fs";
+import { resolve as resolve8 } from "path";
 import {
   ALL_CONTEXT_IDS,
   ALL_STRESS_IDS,
-  BrowserPool as BrowserPool3,
+  BrowserPool as BrowserPool4,
   contextAxis,
   RenderMatrix,
   SatoriRenderer,
-  safeRender,
+  safeRender as safeRender2,
   stressAxis
 } from "@agent-scope/render";
-import { Command as Command5 } from "commander";
-
-// src/tailwind-css.ts
-import { existsSync as existsSync4, readFileSync as readFileSync4 } from "fs";
-import { createRequire } from "module";
-import { resolve as resolve6 } from "path";
-var CONFIG_FILENAMES = [
-  ".reactscope/config.json",
-  ".reactscope/config.js",
-  ".reactscope/config.mjs"
-];
-var STYLE_ENTRY_CANDIDATES = [
-  "src/index.css",
-  "src/globals.css",
-  "app/globals.css",
-  "app/index.css",
-  "styles/index.css",
-  "index.css"
-];
-var TAILWIND_IMPORT = /@import\s+["']tailwindcss["']\s*;?/;
-var compilerCache = null;
-function getCachedBuild(cwd) {
-  if (compilerCache !== null && resolve6(compilerCache.cwd) === resolve6(cwd)) {
-    return compilerCache.build;
-  }
-  return null;
-}
-function findStylesEntry(cwd) {
-  for (const name of CONFIG_FILENAMES) {
-    const p = resolve6(cwd, name);
-    if (!existsSync4(p)) continue;
-    try {
-      if (name.endsWith(".json")) {
-        const raw = readFileSync4(p, "utf-8");
-        const data = JSON.parse(raw);
-        const scope = data.scope;
-        const entry = scope?.stylesEntry ?? data.stylesEntry;
-        if (typeof entry === "string") {
-          const full = resolve6(cwd, entry);
-          if (existsSync4(full)) return full;
-        }
-      }
-    } catch {
-    }
-  }
-  const pkgPath = resolve6(cwd, "package.json");
-  if (existsSync4(pkgPath)) {
-    try {
-      const raw = readFileSync4(pkgPath, "utf-8");
-      const pkg = JSON.parse(raw);
-      const entry = pkg.scope?.stylesEntry;
-      if (typeof entry === "string") {
-        const full = resolve6(cwd, entry);
-        if (existsSync4(full)) return full;
-      }
-    } catch {
-    }
-  }
-  for (const candidate of STYLE_ENTRY_CANDIDATES) {
-    const full = resolve6(cwd, candidate);
-    if (existsSync4(full)) {
-      try {
-        const content = readFileSync4(full, "utf-8");
-        if (TAILWIND_IMPORT.test(content)) return full;
-      } catch {
-      }
-    }
-  }
-  return null;
-}
-async function getTailwindCompiler(cwd) {
-  const cached = getCachedBuild(cwd);
-  if (cached !== null) return cached;
-  const entryPath = findStylesEntry(cwd);
-  if (entryPath === null) return null;
-  let compile;
-  try {
-    const require2 = createRequire(resolve6(cwd, "package.json"));
-    const tailwind = require2("tailwindcss");
-    const fn = tailwind.compile;
-    if (typeof fn !== "function") return null;
-    compile = fn;
-  } catch {
-    return null;
-  }
-  const entryContent = readFileSync4(entryPath, "utf-8");
-  const loadStylesheet = async (id, base) => {
-    if (id === "tailwindcss") {
-      const nodeModules = resolve6(cwd, "node_modules");
-      const tailwindCssPath = resolve6(nodeModules, "tailwindcss", "index.css");
-      if (!existsSync4(tailwindCssPath)) {
-        throw new Error(
-          `Tailwind v4: tailwindcss package not found at ${tailwindCssPath}. Install with: npm install tailwindcss`
-        );
-      }
-      const content = readFileSync4(tailwindCssPath, "utf-8");
-      return { path: "virtual:tailwindcss/index.css", base, content };
-    }
-    const full = resolve6(base, id);
-    if (existsSync4(full)) {
-      const content = readFileSync4(full, "utf-8");
-      return { path: full, base: resolve6(full, ".."), content };
-    }
-    throw new Error(`Tailwind v4: could not load stylesheet: ${id} (base: ${base})`);
-  };
-  const result = await compile(entryContent, {
-    base: cwd,
-    from: entryPath,
-    loadStylesheet
-  });
-  const build2 = result.build.bind(result);
-  compilerCache = { cwd, build: build2 };
-  return build2;
-}
-async function getCompiledCssForClasses(cwd, classes) {
-  const build2 = await getTailwindCompiler(cwd);
-  if (build2 === null) return null;
-  const deduped = [...new Set(classes)].filter(Boolean);
-  if (deduped.length === 0) return null;
-  return build2(deduped);
-}
-
-// src/render-commands.ts
+import { Command as Command6 } from "commander";
 var MANIFEST_PATH6 = ".reactscope/manifest.json";
 var DEFAULT_OUTPUT_DIR = ".reactscope/renders";
-var _pool3 = null;
-async function getPool3(viewportWidth, viewportHeight) {
-  if (_pool3 === null) {
-    _pool3 = new BrowserPool3({
+var _pool4 = null;
+async function getPool4(viewportWidth, viewportHeight) {
+  if (_pool4 === null) {
+    _pool4 = new BrowserPool4({
       size: { browsers: 1, pagesPerBrowser: 4 },
       viewportWidth,
       viewportHeight
     });
-    await _pool3.init();
+    await _pool4.init();
   }
-  return _pool3;
+  return _pool4;
 }
-async function shutdownPool3() {
-  if (_pool3 !== null) {
-    await _pool3.close();
-    _pool3 = null;
+async function shutdownPool4() {
+  if (_pool4 !== null) {
+    await _pool4.close();
+    _pool4 = null;
   }
 }
 function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
@@ -2599,7 +3025,7 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
     _satori: satori,
     async renderCell(props, _complexityClass) {
       const startMs = performance.now();
-      const pool = await getPool3(viewportWidth, viewportHeight);
+      const pool = await getPool4(viewportWidth, viewportHeight);
       const htmlHarness = await buildComponentHarness(
         filePath,
         componentName,
@@ -2718,13 +3144,13 @@ Available: ${available}`
         }
         const { width, height } = parseViewport(opts.viewport);
         const rootDir = process.cwd();
-        const filePath = resolve7(rootDir, descriptor.filePath);
+        const filePath = resolve8(rootDir, descriptor.filePath);
         const renderer = buildRenderer(filePath, componentName, width, height);
         process.stderr.write(
           `Rendering ${componentName} [${descriptor.complexityClass}] at ${width}\xD7${height}\u2026
 `
         );
-        const outcome = await safeRender(
+        const outcome = await safeRender2(
           () => renderer.renderCell(props, descriptor.complexityClass),
           {
             props,
@@ -2735,7 +3161,7 @@ Available: ${available}`
             }
           }
         );
-        await shutdownPool3();
+        await shutdownPool4();
         if (outcome.crashed) {
           process.stderr.write(`\u2717 Render failed: ${outcome.error.message}
 `);
@@ -2748,8 +3174,8 @@ Available: ${available}`
         }
         const result = outcome.result;
         if (opts.output !== void 0) {
-          const outPath = resolve7(process.cwd(), opts.output);
-          writeFileSync4(outPath, result.screenshot);
+          const outPath = resolve8(process.cwd(), opts.output);
+          writeFileSync5(outPath, result.screenshot);
           process.stdout.write(
             `\u2713 ${componentName} \u2192 ${opts.output} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
 `
@@ -2762,20 +3188,20 @@ Available: ${available}`
           process.stdout.write(`${JSON.stringify(json, null, 2)}
 `);
         } else if (fmt === "file") {
-          const dir = resolve7(process.cwd(), DEFAULT_OUTPUT_DIR);
+          const dir = resolve8(process.cwd(), DEFAULT_OUTPUT_DIR);
           mkdirSync3(dir, { recursive: true });
-          const outPath = resolve7(dir, `${componentName}.png`);
-          writeFileSync4(outPath, result.screenshot);
+          const outPath = resolve8(dir, `${componentName}.png`);
+          writeFileSync5(outPath, result.screenshot);
           const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}.png`;
           process.stdout.write(
             `\u2713 ${componentName} \u2192 ${relPath} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
 `
           );
         } else {
-          const dir = resolve7(process.cwd(), DEFAULT_OUTPUT_DIR);
+          const dir = resolve8(process.cwd(), DEFAULT_OUTPUT_DIR);
           mkdirSync3(dir, { recursive: true });
-          const outPath = resolve7(dir, `${componentName}.png`);
-          writeFileSync4(outPath, result.screenshot);
+          const outPath = resolve8(dir, `${componentName}.png`);
+          writeFileSync5(outPath, result.screenshot);
           const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}.png`;
           process.stdout.write(
             `\u2713 ${componentName} \u2192 ${relPath} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
@@ -2783,7 +3209,7 @@ Available: ${available}`
           );
         }
       } catch (err) {
-        await shutdownPool3();
+        await shutdownPool4();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -2810,7 +3236,7 @@ Available: ${available}`
         const concurrency = Math.max(1, parseInt(opts.concurrency, 10) || 8);
         const { width, height } = { width: 375, height: 812 };
         const rootDir = process.cwd();
-        const filePath = resolve7(rootDir, descriptor.filePath);
+        const filePath = resolve8(rootDir, descriptor.filePath);
         const renderer = buildRenderer(filePath, componentName, width, height);
         const axes = [];
         if (opts.axes !== void 0) {
@@ -2868,29 +3294,29 @@ Available: ${available}`
           concurrency
         });
         const result = await matrix.render();
-        await shutdownPool3();
+        await shutdownPool4();
         process.stderr.write(
           `Done. ${result.stats.totalCells} cells, avg ${result.stats.avgRenderTimeMs.toFixed(1)}ms
 `
         );
         if (opts.sprite !== void 0) {
-          const { SpriteSheetGenerator } = await import("@agent-scope/render");
-          const gen = new SpriteSheetGenerator();
+          const { SpriteSheetGenerator: SpriteSheetGenerator2 } = await import("@agent-scope/render");
+          const gen = new SpriteSheetGenerator2();
           const sheet = await gen.generate(result);
-          const spritePath = resolve7(process.cwd(), opts.sprite);
-          writeFileSync4(spritePath, sheet.png);
+          const spritePath = resolve8(process.cwd(), opts.sprite);
+          writeFileSync5(spritePath, sheet.png);
           process.stderr.write(`Sprite sheet saved to ${spritePath}
 `);
         }
         const fmt = resolveMatrixFormat(opts.format, opts.sprite !== void 0);
         if (fmt === "file") {
-          const { SpriteSheetGenerator } = await import("@agent-scope/render");
-          const gen = new SpriteSheetGenerator();
+          const { SpriteSheetGenerator: SpriteSheetGenerator2 } = await import("@agent-scope/render");
+          const gen = new SpriteSheetGenerator2();
           const sheet = await gen.generate(result);
-          const dir = resolve7(process.cwd(), DEFAULT_OUTPUT_DIR);
+          const dir = resolve8(process.cwd(), DEFAULT_OUTPUT_DIR);
           mkdirSync3(dir, { recursive: true });
-          const outPath = resolve7(dir, `${componentName}-matrix.png`);
-          writeFileSync4(outPath, sheet.png);
+          const outPath = resolve8(dir, `${componentName}-matrix.png`);
+          writeFileSync5(outPath, sheet.png);
           const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}-matrix.png`;
           process.stdout.write(
             `\u2713 ${componentName} matrix (${result.stats.totalCells} cells) \u2192 ${relPath} (${result.stats.wallClockTimeMs.toFixed(0)}ms total)
@@ -2902,8 +3328,8 @@ Available: ${available}`
         } else if (fmt === "png") {
           if (opts.sprite !== void 0) {
           } else {
-            const { SpriteSheetGenerator } = await import("@agent-scope/render");
-            const gen = new SpriteSheetGenerator();
+            const { SpriteSheetGenerator: SpriteSheetGenerator2 } = await import("@agent-scope/render");
+            const gen = new SpriteSheetGenerator2();
             const sheet = await gen.generate(result);
             process.stdout.write(sheet.png);
           }
@@ -2913,7 +3339,7 @@ Available: ${available}`
           process.stdout.write(formatMatrixCsv(componentName, result));
         }
       } catch (err) {
-        await shutdownPool3();
+        await shutdownPool4();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -2933,7 +3359,7 @@ function registerRenderAll(renderCmd) {
           return;
         }
         const concurrency = Math.max(1, parseInt(opts.concurrency, 10) || 4);
-        const outputDir = resolve7(process.cwd(), opts.outputDir);
+        const outputDir = resolve8(process.cwd(), opts.outputDir);
         mkdirSync3(outputDir, { recursive: true });
         const rootDir = process.cwd();
         process.stderr.write(`Rendering ${total} components (concurrency: ${concurrency})\u2026
@@ -2943,9 +3369,9 @@ function registerRenderAll(renderCmd) {
         const renderOne = async (name) => {
           const descriptor = manifest.components[name];
           if (descriptor === void 0) return;
-          const filePath = resolve7(rootDir, descriptor.filePath);
+          const filePath = resolve8(rootDir, descriptor.filePath);
           const renderer = buildRenderer(filePath, name, 375, 812);
-          const outcome = await safeRender(
+          const outcome = await safeRender2(
             () => renderer.renderCell({}, descriptor.complexityClass),
             {
               props: {},
@@ -2966,8 +3392,8 @@ function registerRenderAll(renderCmd) {
               success: false,
               errorMessage: outcome.error.message
             });
-            const errPath = resolve7(outputDir, `${name}.error.json`);
-            writeFileSync4(
+            const errPath = resolve8(outputDir, `${name}.error.json`);
+            writeFileSync5(
               errPath,
               JSON.stringify(
                 {
@@ -2984,10 +3410,10 @@ function registerRenderAll(renderCmd) {
           }
           const result = outcome.result;
           results.push({ name, renderTimeMs: result.renderTimeMs, success: true });
-          const pngPath = resolve7(outputDir, `${name}.png`);
-          writeFileSync4(pngPath, result.screenshot);
-          const jsonPath = resolve7(outputDir, `${name}.json`);
-          writeFileSync4(jsonPath, JSON.stringify(formatRenderJson(name, {}, result), null, 2));
+          const pngPath = resolve8(outputDir, `${name}.png`);
+          writeFileSync5(pngPath, result.screenshot);
+          const jsonPath = resolve8(outputDir, `${name}.json`);
+          writeFileSync5(jsonPath, JSON.stringify(formatRenderJson(name, {}, result), null, 2));
           if (isTTY()) {
             process.stdout.write(
               `\u2713 ${name} \u2192 ${opts.outputDir}/${name}.png (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
@@ -3010,13 +3436,13 @@ function registerRenderAll(renderCmd) {
           workers.push(worker());
         }
         await Promise.all(workers);
-        await shutdownPool3();
+        await shutdownPool4();
         process.stderr.write("\n");
         const summary = formatSummaryText(results, outputDir);
         process.stderr.write(`${summary}
 `);
       } catch (err) {
-        await shutdownPool3();
+        await shutdownPool4();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -3049,7 +3475,7 @@ function resolveMatrixFormat(formatFlag, spriteAlreadyWritten) {
   return "json";
 }
 function createRenderCommand() {
-  const renderCmd = new Command5("render").description(
+  const renderCmd = new Command6("render").description(
     "Render components to PNG or JSON via esbuild + BrowserPool"
   );
   registerRenderSingle(renderCmd);
@@ -3059,32 +3485,32 @@ function createRenderCommand() {
 }
 
 // src/report/baseline.ts
-import { existsSync as existsSync5, mkdirSync as mkdirSync4, rmSync, writeFileSync as writeFileSync5 } from "fs";
-import { resolve as resolve8 } from "path";
-import { generateManifest as generateManifest2 } from "@agent-scope/manifest";
-import { BrowserPool as BrowserPool4, safeRender as safeRender2 } from "@agent-scope/render";
-import { ComplianceEngine, TokenResolver } from "@agent-scope/tokens";
+import { existsSync as existsSync6, mkdirSync as mkdirSync4, rmSync, writeFileSync as writeFileSync6 } from "fs";
+import { resolve as resolve9 } from "path";
+import { generateManifest as generateManifest3 } from "@agent-scope/manifest";
+import { BrowserPool as BrowserPool5, safeRender as safeRender3 } from "@agent-scope/render";
+import { ComplianceEngine as ComplianceEngine2, TokenResolver as TokenResolver2 } from "@agent-scope/tokens";
 var DEFAULT_BASELINE_DIR = ".reactscope/baseline";
-var _pool4 = null;
-async function getPool4(viewportWidth, viewportHeight) {
-  if (_pool4 === null) {
-    _pool4 = new BrowserPool4({
+var _pool5 = null;
+async function getPool5(viewportWidth, viewportHeight) {
+  if (_pool5 === null) {
+    _pool5 = new BrowserPool5({
       size: { browsers: 1, pagesPerBrowser: 4 },
       viewportWidth,
       viewportHeight
     });
-    await _pool4.init();
+    await _pool5.init();
   }
-  return _pool4;
+  return _pool5;
 }
-async function shutdownPool4() {
-  if (_pool4 !== null) {
-    await _pool4.close();
-    _pool4 = null;
+async function shutdownPool5() {
+  if (_pool5 !== null) {
+    await _pool5.close();
+    _pool5 = null;
   }
 }
-async function renderComponent(filePath, componentName, props, viewportWidth, viewportHeight) {
-  const pool = await getPool4(viewportWidth, viewportHeight);
+async function renderComponent2(filePath, componentName, props, viewportWidth, viewportHeight) {
+  const pool = await getPool5(viewportWidth, viewportHeight);
   const htmlHarness = await buildComponentHarness(filePath, componentName, props, viewportWidth);
   const slot = await pool.acquire();
   const { page } = slot;
@@ -3174,7 +3600,7 @@ async function renderComponent(filePath, componentName, props, viewportWidth, vi
     pool.release(slot);
   }
 }
-function extractComputedStyles(computedStylesRaw) {
+function extractComputedStyles2(computedStylesRaw) {
   const flat = {};
   for (const styles of Object.values(computedStylesRaw)) {
     Object.assign(flat, styles);
@@ -3209,30 +3635,30 @@ async function runBaseline(options = {}) {
   } = options;
   const startTime = performance.now();
   const rootDir = process.cwd();
-  const baselineDir = resolve8(rootDir, outputDir);
-  const rendersDir = resolve8(baselineDir, "renders");
-  if (existsSync5(baselineDir)) {
+  const baselineDir = resolve9(rootDir, outputDir);
+  const rendersDir = resolve9(baselineDir, "renders");
+  if (existsSync6(baselineDir)) {
     rmSync(baselineDir, { recursive: true, force: true });
   }
   mkdirSync4(rendersDir, { recursive: true });
   let manifest;
   if (manifestPath !== void 0) {
-    const { readFileSync: readFileSync9 } = await import("fs");
-    const absPath = resolve8(rootDir, manifestPath);
-    if (!existsSync5(absPath)) {
+    const { readFileSync: readFileSync11 } = await import("fs");
+    const absPath = resolve9(rootDir, manifestPath);
+    if (!existsSync6(absPath)) {
       throw new Error(`Manifest not found at ${absPath}.`);
     }
-    manifest = JSON.parse(readFileSync9(absPath, "utf-8"));
+    manifest = JSON.parse(readFileSync11(absPath, "utf-8"));
     process.stderr.write(`Loaded manifest from ${manifestPath}
 `);
   } else {
     process.stderr.write("Scanning for React components\u2026\n");
-    manifest = await generateManifest2({ rootDir });
+    manifest = await generateManifest3({ rootDir });
     const count = Object.keys(manifest.components).length;
     process.stderr.write(`Found ${count} components.
 `);
   }
-  writeFileSync5(resolve8(baselineDir, "manifest.json"), JSON.stringify(manifest, null, 2), "utf-8");
+  writeFileSync6(resolve9(baselineDir, "manifest.json"), JSON.stringify(manifest, null, 2), "utf-8");
   let componentNames = Object.keys(manifest.components);
   if (componentsGlob !== void 0) {
     componentNames = componentNames.filter((name) => matchGlob(componentsGlob, name));
@@ -3252,8 +3678,8 @@ async function runBaseline(options = {}) {
       aggregateCompliance: 1,
       auditedAt: (/* @__PURE__ */ new Date()).toISOString()
     };
-    writeFileSync5(
-      resolve8(baselineDir, "compliance.json"),
+    writeFileSync6(
+      resolve9(baselineDir, "compliance.json"),
       JSON.stringify(emptyReport, null, 2),
       "utf-8"
     );
@@ -3274,9 +3700,9 @@ async function runBaseline(options = {}) {
   const renderOne = async (name) => {
     const descriptor = manifest.components[name];
     if (descriptor === void 0) return;
-    const filePath = resolve8(rootDir, descriptor.filePath);
-    const outcome = await safeRender2(
-      () => renderComponent(filePath, name, {}, viewportWidth, viewportHeight),
+    const filePath = resolve9(rootDir, descriptor.filePath);
+    const outcome = await safeRender3(
+      () => renderComponent2(filePath, name, {}, viewportWidth, viewportHeight),
       {
         props: {},
         sourceLocation: {
@@ -3293,8 +3719,8 @@ async function runBaseline(options = {}) {
     }
     if (outcome.crashed) {
       failureCount++;
-      const errPath = resolve8(rendersDir, `${name}.error.json`);
-      writeFileSync5(
+      const errPath = resolve9(rendersDir, `${name}.error.json`);
+      writeFileSync6(
         errPath,
         JSON.stringify(
           {
@@ -3311,14 +3737,14 @@ async function runBaseline(options = {}) {
       return;
     }
     const result = outcome.result;
-    writeFileSync5(resolve8(rendersDir, `${name}.png`), result.screenshot);
+    writeFileSync6(resolve9(rendersDir, `${name}.png`), result.screenshot);
     const jsonOutput = formatRenderJson(name, {}, result);
-    writeFileSync5(
-      resolve8(rendersDir, `${name}.json`),
+    writeFileSync6(
+      resolve9(rendersDir, `${name}.json`),
       JSON.stringify(jsonOutput, null, 2),
       "utf-8"
     );
-    computedStylesMap.set(name, extractComputedStyles(result.computedStyles));
+    computedStylesMap.set(name, extractComputedStyles2(result.computedStyles));
   };
   const worker = async () => {
     while (nextIdx < componentNames.length) {
@@ -3334,15 +3760,15 @@ async function runBaseline(options = {}) {
     workers.push(worker());
   }
   await Promise.all(workers);
-  await shutdownPool4();
+  await shutdownPool5();
   if (isTTY()) {
     process.stderr.write("\n");
   }
-  const resolver = new TokenResolver([]);
-  const engine = new ComplianceEngine(resolver);
+  const resolver = new TokenResolver2([]);
+  const engine = new ComplianceEngine2(resolver);
   const batchReport = engine.auditBatch(computedStylesMap);
-  writeFileSync5(
-    resolve8(baselineDir, "compliance.json"),
+  writeFileSync6(
+    resolve9(baselineDir, "compliance.json"),
     JSON.stringify(batchReport, null, 2),
     "utf-8"
   );
@@ -3385,43 +3811,43 @@ function registerBaselineSubCommand(reportCmd) {
 }
 
 // src/report/diff.ts
-import { existsSync as existsSync6, readFileSync as readFileSync5, writeFileSync as writeFileSync6 } from "fs";
-import { resolve as resolve9 } from "path";
-import { generateManifest as generateManifest3 } from "@agent-scope/manifest";
-import { BrowserPool as BrowserPool5, safeRender as safeRender3 } from "@agent-scope/render";
-import { ComplianceEngine as ComplianceEngine2, TokenResolver as TokenResolver2 } from "@agent-scope/tokens";
+import { existsSync as existsSync7, readFileSync as readFileSync6, writeFileSync as writeFileSync7 } from "fs";
+import { resolve as resolve10 } from "path";
+import { generateManifest as generateManifest4 } from "@agent-scope/manifest";
+import { BrowserPool as BrowserPool6, safeRender as safeRender4 } from "@agent-scope/render";
+import { ComplianceEngine as ComplianceEngine3, TokenResolver as TokenResolver3 } from "@agent-scope/tokens";
 var DEFAULT_BASELINE_DIR2 = ".reactscope/baseline";
 function loadBaselineCompliance(baselineDir) {
-  const compliancePath = resolve9(baselineDir, "compliance.json");
-  if (!existsSync6(compliancePath)) return null;
-  const raw = JSON.parse(readFileSync5(compliancePath, "utf-8"));
+  const compliancePath = resolve10(baselineDir, "compliance.json");
+  if (!existsSync7(compliancePath)) return null;
+  const raw = JSON.parse(readFileSync6(compliancePath, "utf-8"));
   return raw;
 }
-function loadBaselineRenderJson(baselineDir, componentName) {
-  const jsonPath = resolve9(baselineDir, "renders", `${componentName}.json`);
-  if (!existsSync6(jsonPath)) return null;
-  return JSON.parse(readFileSync5(jsonPath, "utf-8"));
+function loadBaselineRenderJson2(baselineDir, componentName) {
+  const jsonPath = resolve10(baselineDir, "renders", `${componentName}.json`);
+  if (!existsSync7(jsonPath)) return null;
+  return JSON.parse(readFileSync6(jsonPath, "utf-8"));
 }
-var _pool5 = null;
-async function getPool5(viewportWidth, viewportHeight) {
-  if (_pool5 === null) {
-    _pool5 = new BrowserPool5({
+var _pool6 = null;
+async function getPool6(viewportWidth, viewportHeight) {
+  if (_pool6 === null) {
+    _pool6 = new BrowserPool6({
       size: { browsers: 1, pagesPerBrowser: 4 },
       viewportWidth,
       viewportHeight
     });
-    await _pool5.init();
+    await _pool6.init();
   }
-  return _pool5;
+  return _pool6;
 }
-async function shutdownPool5() {
-  if (_pool5 !== null) {
-    await _pool5.close();
-    _pool5 = null;
+async function shutdownPool6() {
+  if (_pool6 !== null) {
+    await _pool6.close();
+    _pool6 = null;
   }
 }
-async function renderComponent2(filePath, componentName, props, viewportWidth, viewportHeight) {
-  const pool = await getPool5(viewportWidth, viewportHeight);
+async function renderComponent3(filePath, componentName, props, viewportWidth, viewportHeight) {
+  const pool = await getPool6(viewportWidth, viewportHeight);
   const htmlHarness = await buildComponentHarness(filePath, componentName, props, viewportWidth);
   const slot = await pool.acquire();
   const { page } = slot;
@@ -3511,7 +3937,7 @@ async function renderComponent2(filePath, componentName, props, viewportWidth, v
     pool.release(slot);
   }
 }
-function extractComputedStyles2(computedStylesRaw) {
+function extractComputedStyles3(computedStylesRaw) {
   const flat = {};
   for (const styles of Object.values(computedStylesRaw)) {
     Object.assign(flat, styles);
@@ -3567,19 +3993,19 @@ async function runDiff(options = {}) {
   } = options;
   const startTime = performance.now();
   const rootDir = process.cwd();
-  const baselineDir = resolve9(rootDir, baselineDirRaw);
-  if (!existsSync6(baselineDir)) {
+  const baselineDir = resolve10(rootDir, baselineDirRaw);
+  if (!existsSync7(baselineDir)) {
     throw new Error(
       `Baseline directory not found at "${baselineDir}". Run \`scope report baseline\` first to create a baseline snapshot.`
     );
   }
-  const baselineManifestPath = resolve9(baselineDir, "manifest.json");
-  if (!existsSync6(baselineManifestPath)) {
+  const baselineManifestPath = resolve10(baselineDir, "manifest.json");
+  if (!existsSync7(baselineManifestPath)) {
     throw new Error(
       `Baseline manifest.json not found at "${baselineManifestPath}". The baseline directory may be incomplete \u2014 re-run \`scope report baseline\`.`
     );
   }
-  const baselineManifest = JSON.parse(readFileSync5(baselineManifestPath, "utf-8"));
+  const baselineManifest = JSON.parse(readFileSync6(baselineManifestPath, "utf-8"));
   const baselineCompliance = loadBaselineCompliance(baselineDir);
   const baselineComponentNames = new Set(Object.keys(baselineManifest.components));
   process.stderr.write(
@@ -3588,16 +4014,16 @@ async function runDiff(options = {}) {
   );
   let currentManifest;
   if (manifestPath !== void 0) {
-    const absPath = resolve9(rootDir, manifestPath);
-    if (!existsSync6(absPath)) {
+    const absPath = resolve10(rootDir, manifestPath);
+    if (!existsSync7(absPath)) {
       throw new Error(`Manifest not found at "${absPath}".`);
     }
-    currentManifest = JSON.parse(readFileSync5(absPath, "utf-8"));
+    currentManifest = JSON.parse(readFileSync6(absPath, "utf-8"));
     process.stderr.write(`Loaded manifest from ${manifestPath}
 `);
   } else {
     process.stderr.write("Scanning for React components\u2026\n");
-    currentManifest = await generateManifest3({ rootDir });
+    currentManifest = await generateManifest4({ rootDir });
     const count = Object.keys(currentManifest.components).length;
     process.stderr.write(`Found ${count} components.
 `);
@@ -3625,9 +4051,9 @@ async function runDiff(options = {}) {
   const renderOne = async (name) => {
     const descriptor = currentManifest.components[name];
     if (descriptor === void 0) return;
-    const filePath = resolve9(rootDir, descriptor.filePath);
-    const outcome = await safeRender3(
-      () => renderComponent2(filePath, name, {}, viewportWidth, viewportHeight),
+    const filePath = resolve10(rootDir, descriptor.filePath);
+    const outcome = await safeRender4(
+      () => renderComponent3(filePath, name, {}, viewportWidth, viewportHeight),
       {
         props: {},
         sourceLocation: {
@@ -3652,7 +4078,7 @@ async function runDiff(options = {}) {
       height: result.height,
       renderTimeMs: result.renderTimeMs
     });
-    computedStylesMap.set(name, extractComputedStyles2(result.computedStyles));
+    computedStylesMap.set(name, extractComputedStyles3(result.computedStyles));
   };
   if (total > 0) {
     const worker = async () => {
@@ -3670,18 +4096,18 @@ async function runDiff(options = {}) {
     }
     await Promise.all(workers);
   }
-  await shutdownPool5();
+  await shutdownPool6();
   if (isTTY() && total > 0) {
     process.stderr.write("\n");
   }
-  const resolver = new TokenResolver2([]);
-  const engine = new ComplianceEngine2(resolver);
+  const resolver = new TokenResolver3([]);
+  const engine = new ComplianceEngine3(resolver);
   const currentBatchReport = engine.auditBatch(computedStylesMap);
   const entries = [];
   for (const name of componentNames) {
     const baselineComp = baselineCompliance?.components[name] ?? null;
     const currentComp = currentBatchReport.components[name] ?? null;
-    const baselineMeta = loadBaselineRenderJson(baselineDir, name);
+    const baselineMeta = loadBaselineRenderJson2(baselineDir, name);
     const currentMeta = currentRenderMeta.get(name) ?? null;
     const failed = renderFailures.has(name);
     const baselineComplianceScore = baselineComp?.aggregateCompliance ?? null;
@@ -3701,7 +4127,7 @@ async function runDiff(options = {}) {
   }
   for (const name of removedNames) {
     const baselineComp = baselineCompliance?.components[name] ?? null;
-    const baselineMeta = loadBaselineRenderJson(baselineDir, name);
+    const baselineMeta = loadBaselineRenderJson2(baselineDir, name);
     entries.push({
       name,
       status: "removed",
@@ -3843,7 +4269,7 @@ function registerDiffSubCommand(reportCmd) {
           regressionThreshold
         });
         if (opts.output !== void 0) {
-          writeFileSync6(opts.output, JSON.stringify(result, null, 2), "utf-8");
+          writeFileSync7(opts.output, JSON.stringify(result, null, 2), "utf-8");
           process.stderr.write(`Diff written to ${opts.output}
 `);
         }
@@ -4144,50 +4570,226 @@ function buildStructuredReport(report) {
 }
 
 // src/tokens/commands.ts
-import { existsSync as existsSync8, readFileSync as readFileSync7 } from "fs";
-import { resolve as resolve11 } from "path";
+import { existsSync as existsSync10, readFileSync as readFileSync9 } from "fs";
+import { resolve as resolve14 } from "path";
 import {
   parseTokenFileSync as parseTokenFileSync2,
   TokenParseError,
-  TokenResolver as TokenResolver4,
+  TokenResolver as TokenResolver8,
   TokenValidationError,
   validateTokenFile
 } from "@agent-scope/tokens";
-import { Command as Command7 } from "commander";
+import { Command as Command8 } from "commander";
+
+// src/tokens/compliance.ts
+import { existsSync as existsSync8, readFileSync as readFileSync7 } from "fs";
+import { resolve as resolve11 } from "path";
+import {
+  ComplianceEngine as ComplianceEngine4,
+  TokenResolver as TokenResolver4
+} from "@agent-scope/tokens";
+var DEFAULT_STYLES_PATH = ".reactscope/compliance-styles.json";
+function loadStylesFile(stylesPath) {
+  const absPath = resolve11(process.cwd(), stylesPath);
+  if (!existsSync8(absPath)) {
+    throw new Error(
+      `Compliance styles file not found at ${absPath}.
+Run \`scope render all\` first to generate component styles, or use --styles to specify a path.
+Expected format: { "ComponentName": { colors: {}, spacing: {}, typography: {}, borders: {}, shadows: {} } }`
+    );
+  }
+  const raw = readFileSync7(absPath, "utf-8");
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch (err) {
+    throw new Error(`Failed to parse compliance styles file as JSON: ${String(err)}`);
+  }
+  if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+    throw new Error(
+      `Compliance styles file must be a JSON object mapping component names to ComputedStyles.`
+    );
+  }
+  return parsed;
+}
+function categoryForProperty(property) {
+  const lower = property.toLowerCase();
+  if (lower.includes("shadow")) return "shadow";
+  if (lower.includes("color") || lower === "background" || lower === "fill" || lower === "stroke")
+    return "color";
+  if (lower.includes("padding") || lower.includes("margin") || lower === "gap" || lower === "width" || lower === "height" || lower === "top" || lower === "right" || lower === "bottom" || lower === "left")
+    return "spacing";
+  if (lower.includes("border")) return "border";
+  if (lower.includes("font") || lower.includes("line") || lower.includes("letter") || lower === "texttransform" || lower === "textdecoration")
+    return "typography";
+  return "spacing";
+}
+function buildCategorySummary(batch) {
+  const cats = {
+    color: { total: 0, onSystem: 0, offSystem: 0, compliance: 1 },
+    spacing: { total: 0, onSystem: 0, offSystem: 0, compliance: 1 },
+    typography: { total: 0, onSystem: 0, offSystem: 0, compliance: 1 },
+    border: { total: 0, onSystem: 0, offSystem: 0, compliance: 1 },
+    shadow: { total: 0, onSystem: 0, offSystem: 0, compliance: 1 }
+  };
+  for (const report of Object.values(batch.components)) {
+    for (const [property, result] of Object.entries(report.properties)) {
+      const cat = categoryForProperty(property);
+      const summary = cats[cat];
+      if (summary === void 0) continue;
+      summary.total++;
+      if (result.status === "on_system") {
+        summary.onSystem++;
+      } else {
+        summary.offSystem++;
+      }
+    }
+  }
+  for (const summary of Object.values(cats)) {
+    summary.compliance = summary.total === 0 ? 1 : summary.onSystem / summary.total;
+  }
+  return cats;
+}
+function collectOffenders(batch, limit = 10) {
+  const offenders = [];
+  const componentEntries = Object.entries(batch.components).map(([name, report]) => ({
+    name,
+    report,
+    offSystemCount: report.offSystem
+  }));
+  componentEntries.sort((a, b) => b.offSystemCount - a.offSystemCount);
+  for (const { name, report, offSystemCount } of componentEntries) {
+    if (offSystemCount === 0) continue;
+    for (const [property, result] of Object.entries(report.properties)) {
+      if (result.status !== "OFF_SYSTEM") continue;
+      offenders.push({
+        component: name,
+        property,
+        value: result.value,
+        nearestToken: result.nearest?.token ?? "\u2014",
+        nearestValue: result.nearest?.value ?? "\u2014",
+        offSystemCount
+      });
+      if (offenders.length >= limit) break;
+    }
+    if (offenders.length >= limit) break;
+  }
+  return offenders;
+}
+function formatPct(n) {
+  return `${Math.round(n * 100)}%`;
+}
+function truncate(s, max) {
+  return s.length > max ? `${s.slice(0, max - 1)}\u2026` : s;
+}
+function formatComplianceReport(batch, threshold) {
+  const pct = Math.round(batch.aggregateCompliance * 100);
+  const lines = [];
+  const thresholdLabel = threshold !== void 0 ? pct >= threshold ? " \u2713 (pass)" : ` \u2717 (below threshold ${threshold}%)` : "";
+  lines.push(`Overall compliance score: ${pct}%${thresholdLabel}`);
+  lines.push("");
+  const cats = buildCategorySummary(batch);
+  const catEntries = Object.entries(cats).filter(([, s]) => s.total > 0);
+  if (catEntries.length > 0) {
+    lines.push("By category:");
+    const catWidth = Math.max(...catEntries.map(([k]) => k.length));
+    for (const [cat, summary] of catEntries) {
+      const label = cat.padEnd(catWidth);
+      lines.push(
+        `  ${label}  ${formatPct(summary.compliance).padStart(4)} (${summary.offSystem} off-system value${summary.offSystem !== 1 ? "s" : ""})`
+      );
+    }
+    lines.push("");
+  }
+  const offenders = collectOffenders(batch);
+  if (offenders.length > 0) {
+    lines.push("Top off-system offenders (sorted by count):");
+    const nameWidth = Math.max(9, ...offenders.map((o) => o.component.length));
+    const propWidth = Math.max(8, ...offenders.map((o) => o.property.length));
+    const valWidth = Math.max(5, ...offenders.map((o) => truncate(o.value, 40).length));
+    for (const offender of offenders) {
+      const name = offender.component.padEnd(nameWidth);
+      const prop = offender.property.padEnd(propWidth);
+      const val = truncate(offender.value, 40).padEnd(valWidth);
+      const nearest = `${offender.nearestToken} (${truncate(offender.nearestValue, 30)})`;
+      lines.push(`  ${name}  ${prop}: ${val}  \u2192 nearest: ${nearest}`);
+    }
+  } else {
+    lines.push("No off-system values detected. \u{1F389}");
+  }
+  return lines.join("\n");
+}
+function registerCompliance(tokensCmd) {
+  tokensCmd.command("compliance").description("Aggregate token compliance report across all components (Token Spec \xA73.3 format)").option("--file <path>", "Path to token file (overrides config)").option("--styles <path>", `Path to compliance styles JSON (default: ${DEFAULT_STYLES_PATH})`).option("--threshold <n>", "Exit code 1 if compliance score is below this percentage (0-100)").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action((opts) => {
+    try {
+      const tokenFilePath = resolveTokenFilePath(opts.file);
+      const { tokens } = loadTokens(tokenFilePath);
+      const resolver = new TokenResolver4(tokens);
+      const engine = new ComplianceEngine4(resolver);
+      const stylesPath = opts.styles ?? DEFAULT_STYLES_PATH;
+      const stylesFile = loadStylesFile(stylesPath);
+      const componentMap = /* @__PURE__ */ new Map();
+      for (const [name, styles] of Object.entries(stylesFile)) {
+        componentMap.set(name, styles);
+      }
+      if (componentMap.size === 0) {
+        process.stderr.write(`Warning: No components found in styles file at ${stylesPath}
+`);
+      }
+      const batch = engine.auditBatch(componentMap);
+      const useJson = opts.format === "json" || opts.format !== "text" && !isTTY();
+      const threshold = opts.threshold !== void 0 ? Number.parseInt(opts.threshold, 10) : void 0;
+      if (useJson) {
+        process.stdout.write(`${JSON.stringify(batch, null, 2)}
+`);
+      } else {
+        process.stdout.write(`${formatComplianceReport(batch, threshold)}
+`);
+      }
+      if (threshold !== void 0 && Math.round(batch.aggregateCompliance * 100) < threshold) {
+        process.exit(1);
+      }
+    } catch (err) {
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
+    }
+  });
+}
 
 // src/tokens/export.ts
-import { existsSync as existsSync7, readFileSync as readFileSync6, writeFileSync as writeFileSync7 } from "fs";
-import { resolve as resolve10 } from "path";
+import { existsSync as existsSync9, readFileSync as readFileSync8, writeFileSync as writeFileSync8 } from "fs";
+import { resolve as resolve12 } from "path";
 import {
   exportTokens,
   parseTokenFileSync,
   ThemeResolver,
-  TokenResolver as TokenResolver3
+  TokenResolver as TokenResolver5
 } from "@agent-scope/tokens";
-import { Command as Command6 } from "commander";
+import { Command as Command7 } from "commander";
 var DEFAULT_TOKEN_FILE = "reactscope.tokens.json";
 var CONFIG_FILE = "reactscope.config.json";
 var SUPPORTED_FORMATS = ["css", "ts", "scss", "tailwind", "flat-json", "figma"];
-function resolveTokenFilePath(fileFlag) {
+function resolveTokenFilePath2(fileFlag) {
   if (fileFlag !== void 0) {
-    return resolve10(process.cwd(), fileFlag);
+    return resolve12(process.cwd(), fileFlag);
   }
-  const configPath = resolve10(process.cwd(), CONFIG_FILE);
-  if (existsSync7(configPath)) {
+  const configPath = resolve12(process.cwd(), CONFIG_FILE);
+  if (existsSync9(configPath)) {
     try {
-      const raw = readFileSync6(configPath, "utf-8");
+      const raw = readFileSync8(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 resolve10(process.cwd(), file);
+        return resolve12(process.cwd(), file);
       }
     } catch {
     }
   }
-  return resolve10(process.cwd(), DEFAULT_TOKEN_FILE);
+  return resolve12(process.cwd(), DEFAULT_TOKEN_FILE);
 }
 function createTokensExportCommand() {
-  return new Command6("export").description("Export design tokens to a downstream format").requiredOption("--format <fmt>", `Output format: ${SUPPORTED_FORMATS.join(", ")}`).option("--file <path>", "Path to token file (overrides config)").option("--out <path>", "Write output to file instead of stdout").option("--prefix <prefix>", "CSS/SCSS: prefix for variable names (e.g. 'scope')").option("--selector <selector>", "CSS: custom root selector (default: ':root')").option(
+  return new Command7("export").description("Export design tokens to a downstream format").requiredOption("--format <fmt>", `Output format: ${SUPPORTED_FORMATS.join(", ")}`).option("--file <path>", "Path to token file (overrides config)").option("--out <path>", "Write output to file instead of stdout").option("--prefix <prefix>", "CSS/SCSS: prefix for variable names (e.g. 'scope')").option("--selector <selector>", "CSS: custom root selector (default: ':root')").option(
     "--theme <name>",
     "Include theme overrides for the named theme (applies to css, ts, scss, tailwind, figma)"
   ).action(
@@ -4202,14 +4804,14 @@ Supported formats: ${SUPPORTED_FORMATS.join(", ")}
       }
       const format = opts.format;
       try {
-        const filePath = resolveTokenFilePath(opts.file);
-        if (!existsSync7(filePath)) {
+        const filePath = resolveTokenFilePath2(opts.file);
+        if (!existsSync9(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 = readFileSync6(filePath, "utf-8");
+        const raw = readFileSync8(filePath, "utf-8");
         const { tokens, rawFile } = parseTokenFileSync(raw);
         let themesMap;
         if (opts.theme !== void 0) {
@@ -4220,7 +4822,7 @@ Create a reactscope.tokens.json file or use --file to specify a path.`
 Available themes: ${available}`
             );
           }
-          const baseResolver = new TokenResolver3(tokens);
+          const baseResolver = new TokenResolver5(tokens);
           const themeResolver = ThemeResolver.fromTokenFile(
             baseResolver,
             rawFile
@@ -4248,8 +4850,8 @@ Available themes: ${themeNames.join(", ")}`
           themes: themesMap
         });
         if (opts.out !== void 0) {
-          const outPath = resolve10(process.cwd(), opts.out);
-          writeFileSync7(outPath, output, "utf-8");
+          const outPath = resolve12(process.cwd(), opts.out);
+          writeFileSync8(outPath, output, "utf-8");
           process.stderr.write(`Exported ${tokens.length} tokens to ${outPath}
 `);
         } else {
@@ -4267,6 +4869,324 @@ Available themes: ${themeNames.join(", ")}`
   );
 }
 
+// src/tokens/impact.ts
+import {
+  ComplianceEngine as ComplianceEngine5,
+  ImpactAnalyzer,
+  TokenResolver as TokenResolver6
+} from "@agent-scope/tokens";
+var DEFAULT_STYLES_PATH2 = ".reactscope/compliance-styles.json";
+var SEVERITY_EMOJI = {
+  none: "\u25CB",
+  subtle: "\u25D4",
+  moderate: "\u25D1",
+  significant: "\u25CF"
+};
+function formatImpactReport(report) {
+  const lines = [];
+  const newValueSuffix = report.newValue !== report.oldValue ? `  \u2192  ${report.newValue}` : "";
+  lines.push(`Token: ${report.tokenPath}  (${report.oldValue})${newValueSuffix}`);
+  if (report.components.length === 0) {
+    lines.push("");
+    lines.push("No components reference this token.");
+    return lines.join("\n");
+  }
+  lines.push("");
+  const nameWidth = Math.max(9, ...report.components.map((c) => c.name.length));
+  const propWidth = Math.max(
+    8,
+    ...report.components.flatMap((c) => c.affectedProperties.map((p) => p.length))
+  );
+  for (const comp of report.components) {
+    for (const property of comp.affectedProperties) {
+      const name = comp.name.padEnd(nameWidth);
+      const prop = property.padEnd(propWidth);
+      const severityIcon2 = SEVERITY_EMOJI[comp.severity] ?? "?";
+      lines.push(`  ${name}  ${prop}  ${severityIcon2} ${comp.severity}`);
+    }
+  }
+  lines.push("");
+  const countLabel = `${report.affectedComponentCount} component${report.affectedComponentCount !== 1 ? "s" : ""}`;
+  const severityIcon = SEVERITY_EMOJI[report.overallSeverity] ?? "?";
+  lines.push(
+    `${countLabel} affected \u2014 overall severity: ${severityIcon} ${report.overallSeverity}`
+  );
+  if (report.colorDelta !== void 0) {
+    lines.push(`Color delta: \u0394E ${report.colorDelta.toFixed(2)}`);
+  }
+  return lines.join("\n");
+}
+function formatImpactSummary(report) {
+  if (report.components.length === 0) {
+    return `No components reference token "${report.tokenPath}".`;
+  }
+  const parts = report.components.map(
+    (c) => `${c.name} (${c.affectedProperties.length} element${c.affectedProperties.length !== 1 ? "s" : ""})`
+  );
+  return `\u2192 ${parts.join(", ")}`;
+}
+function registerImpact(tokensCmd) {
+  tokensCmd.command("impact <path>").description("List all components and elements that consume a given token (Token Spec \xA74.3)").option("--file <path>", "Path to token file (overrides config)").option("--styles <path>", `Path to compliance styles JSON (default: ${DEFAULT_STYLES_PATH2})`).option("--new-value <value>", "Proposed new value \u2014 report visual severity of the change").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action(
+    (tokenPath, opts) => {
+      try {
+        const tokenFilePath = resolveTokenFilePath(opts.file);
+        const { tokens } = loadTokens(tokenFilePath);
+        const resolver = new TokenResolver6(tokens);
+        const engine = new ComplianceEngine5(resolver);
+        const stylesPath = opts.styles ?? DEFAULT_STYLES_PATH2;
+        const stylesFile = loadStylesFile(stylesPath);
+        const componentMap = new Map(Object.entries(stylesFile));
+        const batchReport = engine.auditBatch(componentMap);
+        const complianceReports = new Map(Object.entries(batchReport.components));
+        const analyzer = new ImpactAnalyzer(resolver, complianceReports);
+        const currentValue = resolver.resolve(tokenPath);
+        const newValue = opts.newValue ?? currentValue;
+        const report = analyzer.impactOf(tokenPath, newValue);
+        const useJson = opts.format === "json" || opts.format !== "text" && !isTTY();
+        if (useJson) {
+          process.stdout.write(`${JSON.stringify(report, null, 2)}
+`);
+        } else {
+          process.stdout.write(`${formatImpactReport(report)}
+`);
+          if (isTTY()) {
+            process.stdout.write(`
+${formatImpactSummary(report)}
+`);
+          }
+        }
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+}
+
+// src/tokens/preview.ts
+import { mkdirSync as mkdirSync5, writeFileSync as writeFileSync9 } from "fs";
+import { resolve as resolve13 } from "path";
+import { BrowserPool as BrowserPool7, SpriteSheetGenerator } from "@agent-scope/render";
+import { ComplianceEngine as ComplianceEngine6, ImpactAnalyzer as ImpactAnalyzer2, TokenResolver as TokenResolver7 } from "@agent-scope/tokens";
+var DEFAULT_STYLES_PATH3 = ".reactscope/compliance-styles.json";
+var DEFAULT_MANIFEST_PATH = ".reactscope/manifest.json";
+var DEFAULT_OUTPUT_DIR2 = ".reactscope/previews";
+async function renderComponentWithCssOverride(filePath, componentName, cssOverride, vpWidth, vpHeight, timeoutMs) {
+  const htmlHarness = await buildComponentHarness(
+    filePath,
+    componentName,
+    {},
+    // no props
+    vpWidth,
+    cssOverride
+    // injected as <style>
+  );
+  const pool = new BrowserPool7({
+    size: { browsers: 1, pagesPerBrowser: 1 },
+    viewportWidth: vpWidth,
+    viewportHeight: vpHeight
+  });
+  await pool.init();
+  const slot = await pool.acquire();
+  const { page } = slot;
+  try {
+    await page.setContent(htmlHarness, { waitUntil: "load" });
+    await page.waitForFunction(
+      () => {
+        const w = window;
+        return w.__SCOPE_RENDER_COMPLETE__ === true;
+      },
+      { timeout: timeoutMs }
+    );
+    const rootLocator = page.locator("[data-reactscope-root]");
+    const bb = await rootLocator.boundingBox();
+    const PAD = 16;
+    const MIN_W = 320;
+    const MIN_H = 120;
+    const clipX = Math.max(0, (bb?.x ?? 0) - PAD);
+    const clipY = Math.max(0, (bb?.y ?? 0) - PAD);
+    const rawW = (bb?.width ?? MIN_W) + PAD * 2;
+    const rawH = (bb?.height ?? MIN_H) + PAD * 2;
+    const clipW = Math.min(Math.max(rawW, MIN_W), vpWidth - clipX);
+    const clipH = Math.min(Math.max(rawH, MIN_H), vpHeight - clipY);
+    const screenshot = await page.screenshot({
+      clip: { x: clipX, y: clipY, width: clipW, height: clipH },
+      type: "png"
+    });
+    return { screenshot, width: Math.round(clipW), height: Math.round(clipH) };
+  } finally {
+    pool.release(slot);
+    await pool.close().catch(() => void 0);
+  }
+}
+function registerPreview(tokensCmd) {
+  tokensCmd.command("preview <path>").description("Render before/after sprite sheet for components affected by a token change").requiredOption("--new-value <value>", "The proposed new resolved value for the token").option("--sprite", "Output a PNG sprite sheet (default when TTY)", false).option("-o, --output <path>", "Output PNG path (default: .reactscope/previews/<token>.png)").option("--file <path>", "Path to token file (overrides config)").option("--styles <path>", `Path to compliance styles JSON (default: ${DEFAULT_STYLES_PATH3})`).option("--manifest <path>", "Path to manifest.json", DEFAULT_MANIFEST_PATH).option("--format <fmt>", "Output format: json or text (default: auto-detect)").option("--timeout <ms>", "Browser timeout per render (ms)", "10000").option("--viewport-width <px>", "Viewport width in pixels", "1280").option("--viewport-height <px>", "Viewport height in pixels", "720").action(
+    async (tokenPath, opts) => {
+      try {
+        const tokenFilePath = resolveTokenFilePath(opts.file);
+        const { tokens } = loadTokens(tokenFilePath);
+        const resolver = new TokenResolver7(tokens);
+        const engine = new ComplianceEngine6(resolver);
+        const stylesPath = opts.styles ?? DEFAULT_STYLES_PATH3;
+        const stylesFile = loadStylesFile(stylesPath);
+        const componentMap = new Map(Object.entries(stylesFile));
+        const batchReport = engine.auditBatch(componentMap);
+        const complianceReports = new Map(Object.entries(batchReport.components));
+        const analyzer = new ImpactAnalyzer2(resolver, complianceReports);
+        const currentValue = resolver.resolve(tokenPath);
+        const impactReport = analyzer.impactOf(tokenPath, opts.newValue);
+        if (impactReport.components.length === 0) {
+          process.stdout.write(
+            `No components reference token "${tokenPath}". Nothing to preview.
+`
+          );
+          return;
+        }
+        const affectedNames = impactReport.components.map((c) => c.name);
+        process.stderr.write(
+          `Rendering ${affectedNames.length} component(s): ${affectedNames.join(", ")}
+`
+        );
+        const manifest = loadManifest(opts.manifest);
+        const vpWidth = Number.parseInt(opts.viewportWidth, 10);
+        const vpHeight = Number.parseInt(opts.viewportHeight, 10);
+        const timeout = Number.parseInt(opts.timeout, 10);
+        const tokenCssVar = `--token-${tokenPath.replace(/\./g, "-")}`;
+        const beforeCss = `:root { ${tokenCssVar}: ${currentValue}; }`;
+        const afterCss = `:root { ${tokenCssVar}: ${opts.newValue}; }`;
+        const renders = [];
+        for (const componentName of affectedNames) {
+          const descriptor = manifest.components[componentName];
+          if (descriptor === void 0) {
+            process.stderr.write(
+              `Warning: "${componentName}" not found in manifest \u2014 skipping
+`
+            );
+            continue;
+          }
+          process.stderr.write(`  Rendering ${componentName} (before)...
+`);
+          const before = await renderComponentWithCssOverride(
+            descriptor.filePath,
+            componentName,
+            beforeCss,
+            vpWidth,
+            vpHeight,
+            timeout
+          );
+          process.stderr.write(`  Rendering ${componentName} (after)...
+`);
+          const after = await renderComponentWithCssOverride(
+            descriptor.filePath,
+            componentName,
+            afterCss,
+            vpWidth,
+            vpHeight,
+            timeout
+          );
+          renders.push({ name: componentName, before, after });
+        }
+        if (renders.length === 0) {
+          process.stderr.write(
+            "Warning: No components could be rendered (all missing from manifest).\n"
+          );
+          return;
+        }
+        const cellW = Math.max(...renders.flatMap((r) => [r.before.width, r.after.width]));
+        const cellH = Math.max(...renders.flatMap((r) => [r.before.height, r.after.height]));
+        const cells = renders.flatMap((r, colIdx) => [
+          {
+            props: { version: "before", component: r.name },
+            result: {
+              screenshot: r.before.screenshot,
+              width: cellW,
+              height: cellH,
+              renderTimeMs: 0,
+              computedStyles: {}
+            },
+            index: colIdx * 2,
+            axisIndices: [0, colIdx]
+          },
+          {
+            props: { version: "after", component: r.name },
+            result: {
+              screenshot: r.after.screenshot,
+              width: cellW,
+              height: cellH,
+              renderTimeMs: 0,
+              computedStyles: {}
+            },
+            index: colIdx * 2 + 1,
+            axisIndices: [1, colIdx]
+          }
+        ]);
+        const matrixResult = {
+          cells,
+          axes: [
+            { name: "component", values: renders.map((r) => r.name) },
+            { name: "version", values: ["before", "after"] }
+          ],
+          axisLabels: [renders.map((r) => r.name), ["before", "after"]],
+          rows: 2,
+          cols: renders.length,
+          stats: {
+            totalCells: cells.length,
+            totalRenderTimeMs: 0,
+            avgRenderTimeMs: 0,
+            minRenderTimeMs: 0,
+            maxRenderTimeMs: 0,
+            wallClockTimeMs: 0
+          }
+        };
+        const generator = new SpriteSheetGenerator({
+          cellPadding: 8,
+          borderWidth: 1,
+          labelHeight: 32,
+          labelWidth: 120
+        });
+        const spriteResult = await generator.generate(matrixResult);
+        const tokenLabel = tokenPath.replace(/\./g, "-");
+        const outputPath = opts.output ?? resolve13(process.cwd(), DEFAULT_OUTPUT_DIR2, `preview-${tokenLabel}.png`);
+        const outputDir = resolve13(outputPath, "..");
+        mkdirSync5(outputDir, { recursive: true });
+        writeFileSync9(outputPath, spriteResult.png);
+        const useJson = opts.format === "json" || opts.format !== "text" && !isTTY();
+        if (useJson) {
+          process.stdout.write(
+            `${JSON.stringify(
+              {
+                tokenPath,
+                oldValue: currentValue,
+                newValue: opts.newValue,
+                outputPath,
+                width: spriteResult.width,
+                height: spriteResult.height,
+                components: renders.map((r) => r.name),
+                cells: spriteResult.coordinates.length
+              },
+              null,
+              2
+            )}
+`
+          );
+        } else {
+          process.stdout.write(
+            `Preview written to ${outputPath} (${spriteResult.width}\xD7${spriteResult.height}px)
+`
+          );
+          process.stdout.write(`Components: ${renders.map((r) => r.name).join(", ")}
+`);
+        }
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+}
+
 // src/tokens/commands.ts
 var DEFAULT_TOKEN_FILE2 = "reactscope.tokens.json";
 var CONFIG_FILE2 = "reactscope.config.json";
@@ -4287,32 +5207,32 @@ function buildTable2(headers, rows) {
   );
   return [headerRow, divider, ...dataRows].join("\n");
 }
-function resolveTokenFilePath2(fileFlag) {
+function resolveTokenFilePath(fileFlag) {
   if (fileFlag !== void 0) {
-    return resolve11(process.cwd(), fileFlag);
+    return resolve14(process.cwd(), fileFlag);
   }
-  const configPath = resolve11(process.cwd(), CONFIG_FILE2);
-  if (existsSync8(configPath)) {
+  const configPath = resolve14(process.cwd(), CONFIG_FILE2);
+  if (existsSync10(configPath)) {
     try {
-      const raw = readFileSync7(configPath, "utf-8");
+      const raw = readFileSync9(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 resolve11(process.cwd(), file);
+        return resolve14(process.cwd(), file);
       }
     } catch {
     }
   }
-  return resolve11(process.cwd(), DEFAULT_TOKEN_FILE2);
+  return resolve14(process.cwd(), DEFAULT_TOKEN_FILE2);
 }
 function loadTokens(absPath) {
-  if (!existsSync8(absPath)) {
+  if (!existsSync10(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 = readFileSync7(absPath, "utf-8");
+  const raw = readFileSync9(absPath, "utf-8");
   return parseTokenFileSync2(raw);
 }
 function getRawValue(node, segments) {
@@ -4350,9 +5270,9 @@ function buildResolutionChain(startPath, rawTokens) {
 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 = resolveTokenFilePath2(opts.file);
+      const filePath = resolveTokenFilePath(opts.file);
       const { tokens } = loadTokens(filePath);
-      const resolver = new TokenResolver4(tokens);
+      const resolver = new TokenResolver8(tokens);
       const resolvedValue = resolver.resolve(tokenPath);
       const useJson = opts.format === "json" || opts.format !== "text" && !isTTY2();
       if (useJson) {
@@ -4376,9 +5296,9 @@ 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 = resolveTokenFilePath2(opts.file);
+        const filePath = resolveTokenFilePath(opts.file);
         const { tokens } = loadTokens(filePath);
-        const resolver = new TokenResolver4(tokens);
+        const resolver = new TokenResolver8(tokens);
         const filtered = resolver.list(opts.type, category);
         const useJson = opts.format === "json" || opts.format !== "table" && !isTTY2();
         if (useJson) {
@@ -4406,9 +5326,9 @@ 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 = resolveTokenFilePath2(opts.file);
+        const filePath = resolveTokenFilePath(opts.file);
         const { tokens } = loadTokens(filePath);
-        const resolver = new TokenResolver4(tokens);
+        const resolver = new TokenResolver8(tokens);
         const useJson = opts.format === "json" || opts.format !== "table" && !isTTY2();
         const typesToSearch = opts.type ? [opts.type] : [
           "color",
@@ -4488,10 +5408,10 @@ Tip: use --fuzzy for nearest-match search.
 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 = resolveTokenFilePath2(opts.file);
+      const filePath = resolveTokenFilePath(opts.file);
       const absFilePath = filePath;
       const { tokens, rawFile } = loadTokens(absFilePath);
-      const resolver = new TokenResolver4(tokens);
+      const resolver = new TokenResolver8(tokens);
       resolver.resolve(tokenPath);
       const chain = buildResolutionChain(tokenPath, rawFile.tokens);
       const useJson = opts.format === "json" || opts.format !== "text" && !isTTY2();
@@ -4525,14 +5445,14 @@ function registerValidate(tokensCmd) {
     "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 = resolveTokenFilePath2(opts.file);
-      if (!existsSync8(filePath)) {
+      const filePath = resolveTokenFilePath(opts.file);
+      if (!existsSync10(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 = readFileSync7(filePath, "utf-8");
+      const raw = readFileSync9(filePath, "utf-8");
       const useJson = opts.format === "json" || opts.format !== "text" && !isTTY2();
       const errors = [];
       let parsed;
@@ -4600,7 +5520,7 @@ function outputValidationResult(filePath, errors, useJson) {
   }
 }
 function createTokensCommand() {
-  const tokensCmd = new Command7("tokens").description(
+  const tokensCmd = new Command8("tokens").description(
     "Query and validate design tokens from a reactscope.tokens.json file"
   );
   registerGet2(tokensCmd);
@@ -4609,12 +5529,15 @@ function createTokensCommand() {
   registerResolve(tokensCmd);
   registerValidate(tokensCmd);
   tokensCmd.addCommand(createTokensExportCommand());
+  registerCompliance(tokensCmd);
+  registerImpact(tokensCmd);
+  registerPreview(tokensCmd);
   return tokensCmd;
 }
 
 // src/program.ts
 function createProgram(options = {}) {
-  const program2 = new Command8("scope").version(options.version ?? "0.1.0").description("Scope \u2014 React instrumentation toolkit");
+  const program2 = new Command9("scope").version(options.version ?? "0.1.0").description("Scope \u2014 React instrumentation toolkit");
   program2.command("capture <url>").description("Capture a React component tree from a live URL and output as JSON").option("-o, --output <path>", "Write JSON to file instead of stdout").option("--pretty", "Pretty-print JSON output (default: minified)", false).option("--timeout <ms>", "Max wait time for React to mount (ms)", "10000").option("--wait <ms>", "Additional wait after page load before capture (ms)", "0").action(
     async (url, opts) => {
       try {
@@ -4687,7 +5610,7 @@ function createProgram(options = {}) {
     }
   );
   program2.command("generate").description("Generate a Playwright test from a Scope trace file").argument("<trace>", "Path to a serialized Scope trace (.json)").option("-o, --output <path>", "Output file path", "scope.spec.ts").option("-d, --description <text>", "Test description").action((tracePath, opts) => {
-    const raw = readFileSync8(tracePath, "utf-8");
+    const raw = readFileSync10(tracePath, "utf-8");
     const trace = loadTrace(raw);
     const source = generateTest(trace, {
       description: opts.description,
@@ -4701,6 +5624,7 @@ function createProgram(options = {}) {
   program2.addCommand(createTokensCommand());
   program2.addCommand(createInstrumentCommand());
   program2.addCommand(createInitCommand());
+  program2.addCommand(createCiCommand());
   const existingReportCmd = program2.commands.find((c) => c.name() === "report");
   if (existingReportCmd !== void 0) {
     registerBaselineSubCommand(existingReportCmd);