npm - @agent-scope/cli - Versions diffs - 1.12.0 → 1.14.0 - Mend

@agent-scope/cli 1.12.0 → 1.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.cjs CHANGED Viewed

@@ -228,9 +228,9 @@ function createRL() {
   });
 }
 async function ask(rl, question) {
-  return new Promise((resolve11) => {
+  return new Promise((resolve14) => {
     rl.question(question, (answer) => {
-      resolve11(answer.trim());
+      resolve14(answer.trim());
     });
   });
 }
@@ -379,7 +379,7 @@ function createInitCommand() {
 }
 async function buildComponentHarness(filePath, componentName, props, viewportWidth, projectCss) {
   const bundledScript = await bundleComponentToIIFE(filePath, componentName, props);
-  return wrapInHtml(bundledScript, viewportWidth);
+  return wrapInHtml(bundledScript, viewportWidth, projectCss);
 }
 async function bundleComponentToIIFE(filePath, componentName, props) {
   const propsJson = JSON.stringify(props).replace(/<\/script>/gi, "<\\/script>");
@@ -466,7 +466,9 @@ ${msg}`);
   return outputFile.text;
 }
 function wrapInHtml(bundledScript, viewportWidth, projectCss) {
-  const projectStyleBlock = "";
+  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>
@@ -2830,8 +2832,8 @@ Available: ${available}`
 `
         );
         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 = path.resolve(process.cwd(), opts.sprite);
           fs.writeFileSync(spritePath, sheet.png);
@@ -2840,8 +2842,8 @@ Available: ${available}`
         }
         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 = path.resolve(process.cwd(), DEFAULT_OUTPUT_DIR);
           fs.mkdirSync(dir, { recursive: true });
@@ -2858,8 +2860,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);
           }
@@ -3166,12 +3168,12 @@ async function runBaseline(options = {}) {
   fs.mkdirSync(rendersDir, { recursive: true });
   let manifest$1;
   if (manifestPath !== void 0) {
-    const { readFileSync: readFileSync8 } = await import('fs');
+    const { readFileSync: readFileSync10 } = await import('fs');
     const absPath = path.resolve(rootDir, manifestPath);
     if (!fs.existsSync(absPath)) {
       throw new Error(`Manifest not found at ${absPath}.`);
     }
-    manifest$1 = JSON.parse(readFileSync8(absPath, "utf-8"));
+    manifest$1 = JSON.parse(readFileSync10(absPath, "utf-8"));
     process.stderr.write(`Loaded manifest from ${manifestPath}
 `);
   } else {
@@ -3332,6 +3334,479 @@ function registerBaselineSubCommand(reportCmd) {
     }
   );
 }
+var DEFAULT_BASELINE_DIR2 = ".reactscope/baseline";
+function loadBaselineCompliance(baselineDir) {
+  const compliancePath = path.resolve(baselineDir, "compliance.json");
+  if (!fs.existsSync(compliancePath)) return null;
+  const raw = JSON.parse(fs.readFileSync(compliancePath, "utf-8"));
+  return raw;
+}
+function loadBaselineRenderJson(baselineDir, componentName) {
+  const jsonPath = path.resolve(baselineDir, "renders", `${componentName}.json`);
+  if (!fs.existsSync(jsonPath)) return null;
+  return JSON.parse(fs.readFileSync(jsonPath, "utf-8"));
+}
+var _pool5 = null;
+async function getPool5(viewportWidth, viewportHeight) {
+  if (_pool5 === null) {
+    _pool5 = new render.BrowserPool({
+      size: { browsers: 1, pagesPerBrowser: 4 },
+      viewportWidth,
+      viewportHeight
+    });
+    await _pool5.init();
+  }
+  return _pool5;
+}
+async function shutdownPool5() {
+  if (_pool5 !== null) {
+    await _pool5.close();
+    _pool5 = null;
+  }
+}
+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;
+  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 extractComputedStyles2(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 classifyComponent(entry, regressionThreshold) {
+  if (entry.renderFailed) return "unchanged";
+  if (entry.baselineCompliance === null && entry.currentCompliance !== null) {
+    return "added";
+  }
+  if (entry.baselineCompliance !== null && entry.currentCompliance === null) {
+    return "removed";
+  }
+  const delta = entry.complianceDelta;
+  if (delta !== null) {
+    if (delta <= -regressionThreshold) return "compliance_regressed";
+    if (delta >= regressionThreshold) return "compliance_improved";
+  }
+  if (entry.baselineDimensions !== null && entry.currentDimensions !== null) {
+    const dw = Math.abs(entry.currentDimensions.width - entry.baselineDimensions.width);
+    const dh = Math.abs(entry.currentDimensions.height - entry.baselineDimensions.height);
+    if (dw > 10 || dh > 10) return "size_changed";
+  }
+  return "unchanged";
+}
+async function runDiff(options = {}) {
+  const {
+    baselineDir: baselineDirRaw = DEFAULT_BASELINE_DIR2,
+    componentsGlob,
+    manifestPath,
+    viewportWidth = 375,
+    viewportHeight = 812,
+    regressionThreshold = 0.01
+  } = options;
+  const startTime = performance.now();
+  const rootDir = process.cwd();
+  const baselineDir = path.resolve(rootDir, baselineDirRaw);
+  if (!fs.existsSync(baselineDir)) {
+    throw new Error(
+      `Baseline directory not found at "${baselineDir}". Run \`scope report baseline\` first to create a baseline snapshot.`
+    );
+  }
+  const baselineManifestPath = path.resolve(baselineDir, "manifest.json");
+  if (!fs.existsSync(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(fs.readFileSync(baselineManifestPath, "utf-8"));
+  const baselineCompliance = loadBaselineCompliance(baselineDir);
+  const baselineComponentNames = new Set(Object.keys(baselineManifest.components));
+  process.stderr.write(
+    `Comparing against baseline at ${baselineDir} (${baselineComponentNames.size} components)
+`
+  );
+  let currentManifest;
+  if (manifestPath !== void 0) {
+    const absPath = path.resolve(rootDir, manifestPath);
+    if (!fs.existsSync(absPath)) {
+      throw new Error(`Manifest not found at "${absPath}".`);
+    }
+    currentManifest = JSON.parse(fs.readFileSync(absPath, "utf-8"));
+    process.stderr.write(`Loaded manifest from ${manifestPath}
+`);
+  } else {
+    process.stderr.write("Scanning for React components\u2026\n");
+    currentManifest = await manifest.generateManifest({ rootDir });
+    const count = Object.keys(currentManifest.components).length;
+    process.stderr.write(`Found ${count} components.
+`);
+  }
+  let componentNames = Object.keys(currentManifest.components);
+  if (componentsGlob !== void 0) {
+    componentNames = componentNames.filter((name) => matchGlob(componentsGlob, name));
+    process.stderr.write(
+      `Filtered to ${componentNames.length} components matching "${componentsGlob}".
+`
+    );
+  }
+  const removedNames = [...baselineComponentNames].filter(
+    (name) => !currentManifest.components[name] && (componentsGlob === void 0 || matchGlob(componentsGlob, name))
+  );
+  const total = componentNames.length;
+  process.stderr.write(`Rendering ${total} components for diff\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 = currentManifest.components[name];
+    if (descriptor === void 0) return;
+    const filePath = path.resolve(rootDir, descriptor.filePath);
+    const outcome = await render.safeRender(
+      () => renderComponent2(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,
+      renderTimeMs: result.renderTimeMs
+    });
+    computedStylesMap.set(name, extractComputedStyles2(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 shutdownPool5();
+  if (isTTY() && total > 0) {
+    process.stderr.write("\n");
+  }
+  const resolver = new tokens.TokenResolver([]);
+  const engine = new tokens.ComplianceEngine(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 currentMeta = currentRenderMeta.get(name) ?? null;
+    const failed = renderFailures.has(name);
+    const baselineComplianceScore = baselineComp?.aggregateCompliance ?? null;
+    const currentComplianceScore = currentComp?.compliance ?? null;
+    const delta = baselineComplianceScore !== null && currentComplianceScore !== null ? currentComplianceScore - baselineComplianceScore : null;
+    const partial = {
+      name,
+      baselineCompliance: baselineComplianceScore,
+      currentCompliance: currentComplianceScore,
+      complianceDelta: delta,
+      baselineDimensions: baselineMeta !== null ? { width: baselineMeta.width, height: baselineMeta.height } : null,
+      currentDimensions: currentMeta !== null ? { width: currentMeta.width, height: currentMeta.height } : null,
+      renderTimeMs: currentMeta?.renderTimeMs ?? null,
+      renderFailed: failed
+    };
+    entries.push({ ...partial, status: classifyComponent(partial, regressionThreshold) });
+  }
+  for (const name of removedNames) {
+    const baselineComp = baselineCompliance?.components[name] ?? null;
+    const baselineMeta = loadBaselineRenderJson(baselineDir, name);
+    entries.push({
+      name,
+      status: "removed",
+      baselineCompliance: baselineComp?.aggregateCompliance ?? null,
+      currentCompliance: null,
+      complianceDelta: null,
+      baselineDimensions: baselineMeta !== null ? { width: baselineMeta.width, height: baselineMeta.height } : null,
+      currentDimensions: null,
+      renderTimeMs: null,
+      renderFailed: false
+    });
+  }
+  const summary = {
+    total: entries.length,
+    added: entries.filter((e) => e.status === "added").length,
+    removed: entries.filter((e) => e.status === "removed").length,
+    unchanged: entries.filter((e) => e.status === "unchanged").length,
+    complianceRegressed: entries.filter((e) => e.status === "compliance_regressed").length,
+    complianceImproved: entries.filter((e) => e.status === "compliance_improved").length,
+    sizeChanged: entries.filter((e) => e.status === "size_changed").length,
+    renderFailed: entries.filter((e) => e.renderFailed).length
+  };
+  const hasRegressions = summary.complianceRegressed > 0 || summary.removed > 0 || summary.renderFailed > 0;
+  const wallClockMs = performance.now() - startTime;
+  return {
+    diffedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    baselineDir,
+    summary,
+    components: entries,
+    baselineAggregateCompliance: baselineCompliance?.aggregateCompliance ?? 0,
+    currentAggregateCompliance: currentBatchReport.aggregateCompliance,
+    hasRegressions,
+    wallClockMs
+  };
+}
+var STATUS_ICON = {
+  added: "+",
+  removed: "-",
+  unchanged: " ",
+  compliance_regressed: "\u2193",
+  compliance_improved: "\u2191",
+  size_changed: "~"
+};
+var STATUS_LABEL = {
+  added: "added",
+  removed: "removed",
+  unchanged: "ok",
+  compliance_regressed: "regressed",
+  compliance_improved: "improved",
+  size_changed: "size changed"
+};
+function formatDiffReport(result) {
+  const lines = [];
+  const title = "Scope Report Diff";
+  const rule2 = "\u2501".repeat(Math.max(title.length, 40));
+  lines.push(title, rule2);
+  const complianceDelta = result.currentAggregateCompliance - result.baselineAggregateCompliance;
+  const complianceSign = complianceDelta >= 0 ? "+" : "";
+  lines.push(
+    `Baseline compliance:  ${(result.baselineAggregateCompliance * 100).toFixed(1)}%`,
+    `Current compliance:   ${(result.currentAggregateCompliance * 100).toFixed(1)}%`,
+    `Delta:                ${complianceSign}${(complianceDelta * 100).toFixed(1)}%`,
+    ""
+  );
+  const s = result.summary;
+  lines.push(
+    `Components: ${s.total} total  ` + [
+      s.added > 0 ? `${s.added} added` : "",
+      s.removed > 0 ? `${s.removed} removed` : "",
+      s.complianceRegressed > 0 ? `${s.complianceRegressed} regressed` : "",
+      s.complianceImproved > 0 ? `${s.complianceImproved} improved` : "",
+      s.sizeChanged > 0 ? `${s.sizeChanged} size changed` : "",
+      s.renderFailed > 0 ? `${s.renderFailed} failed` : ""
+    ].filter(Boolean).join("  "),
+    ""
+  );
+  const notable = result.components.filter((e) => e.status !== "unchanged");
+  if (notable.length === 0) {
+    lines.push("  No changes detected.");
+  } else {
+    const nameWidth = Math.max(9, ...notable.map((e) => e.name.length));
+    const header = `${"COMPONENT".padEnd(nameWidth)}  ${"STATUS".padEnd(13)}  ${"COMPLIANCE \u0394".padEnd(13)}  DIMENSIONS`;
+    const divider = "-".repeat(header.length);
+    lines.push(header, divider);
+    for (const entry of notable) {
+      const icon = STATUS_ICON[entry.status];
+      const label = STATUS_LABEL[entry.status].padEnd(13);
+      const name = entry.name.padEnd(nameWidth);
+      let complianceStr = "\u2014".padEnd(13);
+      if (entry.complianceDelta !== null) {
+        const sign = entry.complianceDelta >= 0 ? "+" : "";
+        complianceStr = `${sign}${(entry.complianceDelta * 100).toFixed(1)}%`.padEnd(13);
+      }
+      let dimStr = "\u2014";
+      if (entry.baselineDimensions !== null && entry.currentDimensions !== null) {
+        const b = entry.baselineDimensions;
+        const c = entry.currentDimensions;
+        if (b.width !== c.width || b.height !== c.height) {
+          dimStr = `${b.width}\xD7${b.height} \u2192 ${c.width}\xD7${c.height}`;
+        } else {
+          dimStr = `${c.width}\xD7${c.height}`;
+        }
+      } else if (entry.currentDimensions !== null) {
+        dimStr = `${entry.currentDimensions.width}\xD7${entry.currentDimensions.height}`;
+      } else if (entry.baselineDimensions !== null) {
+        dimStr = `${entry.baselineDimensions.width}\xD7${entry.baselineDimensions.height} (removed)`;
+      }
+      if (entry.renderFailed) {
+        dimStr = "render failed";
+      }
+      lines.push(`${icon} ${name}  ${label}  ${complianceStr}  ${dimStr}`);
+    }
+  }
+  lines.push(
+    "",
+    rule2,
+    result.hasRegressions ? `Diff complete: ${result.summary.complianceRegressed + result.summary.renderFailed} regression(s) detected in ${(result.wallClockMs / 1e3).toFixed(1)}s` : `Diff complete: no regressions in ${(result.wallClockMs / 1e3).toFixed(1)}s`
+  );
+  return lines.join("\n");
+}
+function registerDiffSubCommand(reportCmd) {
+  reportCmd.command("diff").description("Compare the current component library against a saved baseline snapshot").option("-b, --baseline <dir>", "Baseline directory to compare against", DEFAULT_BASELINE_DIR2).option("--components <glob>", "Glob pattern to diff a subset of components").option("--manifest <path>", "Path to an existing manifest.json to use instead of regenerating").option("--viewport <WxH>", "Viewport size, e.g. 1280x720", "375x812").option("--json", "Output diff as JSON instead of human-readable text", false).option("-o, --output <path>", "Write the diff JSON to a file").option(
+    "--regression-threshold <n>",
+    "Minimum compliance drop (0\u20131) to classify as a regression",
+    "0.01"
+  ).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 regressionThreshold = Number.parseFloat(opts.regressionThreshold);
+        const result = await runDiff({
+          baselineDir: opts.baseline,
+          componentsGlob: opts.components,
+          manifestPath: opts.manifest,
+          viewportWidth,
+          viewportHeight,
+          regressionThreshold
+        });
+        if (opts.output !== void 0) {
+          fs.writeFileSync(opts.output, JSON.stringify(result, null, 2), "utf-8");
+          process.stderr.write(`Diff written to ${opts.output}
+`);
+        }
+        if (opts.json) {
+          process.stdout.write(`${JSON.stringify(result, null, 2)}
+`);
+        } else {
+          process.stdout.write(`${formatDiffReport(result)}
+`);
+        }
+        process.exit(result.hasRegressions ? 1 : 0);
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(2);
+      }
+    }
+  );
+}
 // src/tree-formatter.ts
 var BRANCH2 = "\u251C\u2500\u2500 ";
@@ -3610,10 +4085,178 @@ function buildStructuredReport(report) {
     route: report.route?.pattern ?? null
   };
 }
+var DEFAULT_STYLES_PATH = ".reactscope/compliance-styles.json";
+function loadStylesFile(stylesPath) {
+  const absPath = path.resolve(process.cwd(), stylesPath);
+  if (!fs.existsSync(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 = fs.readFileSync(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: tokens$1 } = loadTokens(tokenFilePath);
+      const resolver = new tokens.TokenResolver(tokens$1);
+      const engine = new tokens.ComplianceEngine(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);
+    }
+  });
+}
 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 path.resolve(process.cwd(), fileFlag);
   }
@@ -3647,7 +4290,7 @@ Supported formats: ${SUPPORTED_FORMATS.join(", ")}
       }
       const format = opts.format;
       try {
-        const filePath = resolveTokenFilePath(opts.file);
+        const filePath = resolveTokenFilePath2(opts.file);
         if (!fs.existsSync(filePath)) {
           throw new Error(
             `Token file not found at ${filePath}.
@@ -3711,6 +4354,311 @@ Available themes: ${themeNames.join(", ")}`
     }
   );
 }
+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: tokens$1 } = loadTokens(tokenFilePath);
+        const resolver = new tokens.TokenResolver(tokens$1);
+        const engine = new tokens.ComplianceEngine(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 tokens.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);
+      }
+    }
+  );
+}
+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 render.BrowserPool({
+    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: tokens$1 } = loadTokens(tokenFilePath);
+        const resolver = new tokens.TokenResolver(tokens$1);
+        const engine = new tokens.ComplianceEngine(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 tokens.ImpactAnalyzer(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 render.SpriteSheetGenerator({
+          cellPadding: 8,
+          borderWidth: 1,
+          labelHeight: 32,
+          labelWidth: 120
+        });
+        const spriteResult = await generator.generate(matrixResult);
+        const tokenLabel = tokenPath.replace(/\./g, "-");
+        const outputPath = opts.output ?? path.resolve(process.cwd(), DEFAULT_OUTPUT_DIR2, `preview-${tokenLabel}.png`);
+        const outputDir = path.resolve(outputPath, "..");
+        fs.mkdirSync(outputDir, { recursive: true });
+        fs.writeFileSync(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";
@@ -3732,7 +4680,7 @@ function buildTable2(headers, rows) {
   );
   return [headerRow, divider, ...dataRows].join("\n");
 }
-function resolveTokenFilePath2(fileFlag) {
+function resolveTokenFilePath(fileFlag) {
   if (fileFlag !== void 0) {
     return path.resolve(process.cwd(), fileFlag);
   }
@@ -3795,7 +4743,7 @@ 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: tokens$1 } = loadTokens(filePath);
       const resolver = new tokens.TokenResolver(tokens$1);
       const resolvedValue = resolver.resolve(tokenPath);
@@ -3821,7 +4769,7 @@ 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: tokens$1 } = loadTokens(filePath);
         const resolver = new tokens.TokenResolver(tokens$1);
         const filtered = resolver.list(opts.type, category);
@@ -3851,7 +4799,7 @@ 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: tokens$1 } = loadTokens(filePath);
         const resolver = new tokens.TokenResolver(tokens$1);
         const useJson = opts.format === "json" || opts.format !== "table" && !isTTY2();
@@ -3933,7 +4881,7 @@ 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: tokens$1, rawFile } = loadTokens(absFilePath);
       const resolver = new tokens.TokenResolver(tokens$1);
@@ -3970,7 +4918,7 @@ 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);
+      const filePath = resolveTokenFilePath(opts.file);
       if (!fs.existsSync(filePath)) {
         throw new Error(
           `Token file not found at ${filePath}.
@@ -4054,6 +5002,9 @@ function createTokensCommand() {
   registerResolve(tokensCmd);
   registerValidate(tokensCmd);
   tokensCmd.addCommand(createTokensExportCommand());
+  registerCompliance(tokensCmd);
+  registerImpact(tokensCmd);
+  registerPreview(tokensCmd);
   return tokensCmd;
 }
@@ -4149,6 +5100,7 @@ function createProgram(options = {}) {
   const existingReportCmd = program.commands.find((c) => c.name() === "report");
   if (existingReportCmd !== void 0) {
     registerBaselineSubCommand(existingReportCmd);
+    registerDiffSubCommand(existingReportCmd);
   }
   return program;
 }
@@ -4161,7 +5113,7 @@ exports.createTokensCommand = createTokensCommand;
 exports.createTokensExportCommand = createTokensExportCommand;
 exports.isTTY = isTTY;
 exports.matchGlob = matchGlob;
-exports.resolveTokenFilePath = resolveTokenFilePath;
+exports.resolveTokenFilePath = resolveTokenFilePath2;
 exports.runInit = runInit;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map