@agent-scope/cli 1.18.1 → 1.19.0

package/dist/cli.js

@@ -1,9 +1,9 @@
 #!/usr/bin/env bun
 
 // src/program.ts
-import { readFileSync as readFileSync12 } from "fs";
+import { readFileSync as readFileSync13 } from "fs";
 import { generateTest, loadTrace } from "@agent-scope/playwright";
-import { Command as Command10 } from "commander";
+import { Command as Command11 } from "commander";
 
 // src/browser.ts
 import { writeFileSync } from "fs";
@@ -569,10 +569,10 @@ async function getCompiledCssForClasses(cwd, classes) {
   return build3(deduped);
 }
 async function compileGlobalCssFile(cssFilePath, cwd) {
-  const { existsSync: existsSync15, readFileSync: readFileSync13 } = await import("fs");
+  const { existsSync: existsSync16, readFileSync: readFileSync14 } = await import("fs");
   const { createRequire: createRequire3 } = await import("module");
-  if (!existsSync15(cssFilePath)) return null;
-  const raw = readFileSync13(cssFilePath, "utf-8");
+  if (!existsSync16(cssFilePath)) return null;
+  const raw = readFileSync14(cssFilePath, "utf-8");
   const needsCompile = /@tailwind|@import\s+['"]tailwindcss/.test(raw);
   if (!needsCompile) {
     return raw;
@@ -1042,18 +1042,174 @@ function createCiCommand() {
   );
 }
 
+// src/doctor-commands.ts
+import { existsSync as existsSync3, readdirSync, readFileSync as readFileSync3, statSync } from "fs";
+import { join, resolve as resolve3 } from "path";
+import { Command as Command2 } from "commander";
+function collectSourceFiles(dir) {
+  if (!existsSync3(dir)) return [];
+  const results = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory() && entry.name !== "node_modules" && entry.name !== ".reactscope") {
+      results.push(...collectSourceFiles(full));
+    } else if (entry.isFile() && /\.(tsx?|jsx?)$/.test(entry.name)) {
+      results.push(full);
+    }
+  }
+  return results;
+}
+function checkConfig(cwd) {
+  const configPath = resolve3(cwd, "reactscope.config.json");
+  if (!existsSync3(configPath)) {
+    return {
+      name: "config",
+      status: "error",
+      message: "reactscope.config.json not found \u2014 run `scope init`"
+    };
+  }
+  try {
+    JSON.parse(readFileSync3(configPath, "utf-8"));
+    return { name: "config", status: "ok", message: "reactscope.config.json valid" };
+  } catch {
+    return { name: "config", status: "error", message: "reactscope.config.json is not valid JSON" };
+  }
+}
+function checkTokens(cwd) {
+  const configPath = resolve3(cwd, "reactscope.config.json");
+  let tokensPath = resolve3(cwd, "reactscope.tokens.json");
+  if (existsSync3(configPath)) {
+    try {
+      const cfg = JSON.parse(readFileSync3(configPath, "utf-8"));
+      if (cfg.tokens?.file) tokensPath = resolve3(cwd, cfg.tokens.file);
+    } catch {
+    }
+  }
+  if (!existsSync3(tokensPath)) {
+    return {
+      name: "tokens",
+      status: "warn",
+      message: `Token file not found at ${tokensPath} \u2014 run \`scope init\``
+    };
+  }
+  try {
+    const raw = JSON.parse(readFileSync3(tokensPath, "utf-8"));
+    if (!raw.version) {
+      return { name: "tokens", status: "warn", message: "Token file is missing a `version` field" };
+    }
+    return { name: "tokens", status: "ok", message: "Token file valid" };
+  } catch {
+    return { name: "tokens", status: "error", message: "Token file is not valid JSON" };
+  }
+}
+function checkGlobalCss(cwd) {
+  const configPath = resolve3(cwd, "reactscope.config.json");
+  let globalCss = [];
+  if (existsSync3(configPath)) {
+    try {
+      const cfg = JSON.parse(readFileSync3(configPath, "utf-8"));
+      globalCss = cfg.components?.wrappers?.globalCSS ?? [];
+    } catch {
+    }
+  }
+  if (globalCss.length === 0) {
+    return {
+      name: "globalCSS",
+      status: "warn",
+      message: "No globalCSS configured \u2014 Tailwind styles won't apply to renders. Add `components.wrappers.globalCSS` to reactscope.config.json"
+    };
+  }
+  const missing = globalCss.filter((f) => !existsSync3(resolve3(cwd, f)));
+  if (missing.length > 0) {
+    return {
+      name: "globalCSS",
+      status: "error",
+      message: `globalCSS file(s) not found: ${missing.join(", ")}`
+    };
+  }
+  return {
+    name: "globalCSS",
+    status: "ok",
+    message: `${globalCss.length} globalCSS file(s) present`
+  };
+}
+function checkManifest(cwd) {
+  const manifestPath = resolve3(cwd, ".reactscope", "manifest.json");
+  if (!existsSync3(manifestPath)) {
+    return {
+      name: "manifest",
+      status: "warn",
+      message: "Manifest not found \u2014 run `scope manifest generate`"
+    };
+  }
+  const manifestMtime = statSync(manifestPath).mtimeMs;
+  const sourceDir = resolve3(cwd, "src");
+  const sourceFiles = collectSourceFiles(sourceDir);
+  const stale = sourceFiles.filter((f) => statSync(f).mtimeMs > manifestMtime);
+  if (stale.length > 0) {
+    return {
+      name: "manifest",
+      status: "warn",
+      message: `Manifest may be stale \u2014 ${stale.length} source file(s) modified since last generate. Run \`scope manifest generate\``
+    };
+  }
+  return { name: "manifest", status: "ok", message: "Manifest present and up to date" };
+}
+var ICONS = { ok: "\u2713", warn: "!", error: "\u2717" };
+function formatCheck(check) {
+  return `  [${ICONS[check.status]}] ${check.name.padEnd(12)} ${check.message}`;
+}
+function createDoctorCommand() {
+  return new Command2("doctor").description("Check the health of your Scope setup (config, tokens, CSS, manifest)").option("--json", "Emit structured JSON output", false).action((opts) => {
+    const cwd = process.cwd();
+    const checks = [
+      checkConfig(cwd),
+      checkTokens(cwd),
+      checkGlobalCss(cwd),
+      checkManifest(cwd)
+    ];
+    const errors = checks.filter((c) => c.status === "error").length;
+    const warnings = checks.filter((c) => c.status === "warn").length;
+    if (opts.json) {
+      process.stdout.write(
+        `${JSON.stringify({ passed: checks.length - errors - warnings, warnings, errors, checks }, null, 2)}
+`
+      );
+      if (errors > 0) process.exit(1);
+      return;
+    }
+    process.stdout.write("\nScope Doctor\n");
+    process.stdout.write("\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n");
+    for (const check of checks) process.stdout.write(`${formatCheck(check)}
+`);
+    process.stdout.write("\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n");
+    if (errors > 0) {
+      process.stdout.write(`  ${errors} error(s), ${warnings} warning(s)
+
+`);
+      process.exit(1);
+    } else if (warnings > 0) {
+      process.stdout.write(`  ${warnings} warning(s) \u2014 everything works but could be better
+
+`);
+    } else {
+      process.stdout.write("  All checks passed!\n\n");
+    }
+  });
+}
+
 // src/init/index.ts
-import { appendFileSync, existsSync as existsSync4, mkdirSync, readFileSync as readFileSync4, writeFileSync as writeFileSync3 } from "fs";
-import { join as join2 } from "path";
+import { appendFileSync, existsSync as existsSync5, mkdirSync, readFileSync as readFileSync5, writeFileSync as writeFileSync3 } from "fs";
+import { join as join3 } from "path";
 import * as readline from "readline";
 
 // src/init/detect.ts
-import { existsSync as existsSync3, readdirSync, readFileSync as readFileSync3 } from "fs";
-import { join } from "path";
+import { existsSync as existsSync4, readdirSync as readdirSync2, readFileSync as readFileSync4 } from "fs";
+import { join as join2 } from "path";
 function hasConfigFile(dir, stem) {
-  if (!existsSync3(dir)) return false;
+  if (!existsSync4(dir)) return false;
   try {
-    const entries = readdirSync(dir);
+    const entries = readdirSync2(dir);
     return entries.some((f) => f === stem || f.startsWith(`${stem}.`));
   } catch {
     return false;
@@ -1061,7 +1217,7 @@ function hasConfigFile(dir, stem) {
 }
 function readSafe(path) {
   try {
-    return readFileSync3(path, "utf-8");
+    return readFileSync4(path, "utf-8");
   } catch {
     return null;
   }
@@ -1074,15 +1230,15 @@ function detectFramework(rootDir, packageDeps) {
   return "unknown";
 }
 function detectPackageManager(rootDir) {
-  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";
+  if (existsSync4(join2(rootDir, "bun.lock"))) return "bun";
+  if (existsSync4(join2(rootDir, "yarn.lock"))) return "yarn";
+  if (existsSync4(join2(rootDir, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync4(join2(rootDir, "package-lock.json"))) return "npm";
   return "npm";
 }
 function detectTypeScript(rootDir) {
-  const candidate = join(rootDir, "tsconfig.json");
-  if (existsSync3(candidate)) {
+  const candidate = join2(rootDir, "tsconfig.json");
+  if (existsSync4(candidate)) {
     return { typescript: true, tsconfigPath: candidate };
   }
   return { typescript: false, tsconfigPath: null };
@@ -1094,11 +1250,11 @@ function detectComponentPatterns(rootDir, typescript) {
   const ext = typescript ? "tsx" : "jsx";
   const altExt = typescript ? "jsx" : "jsx";
   for (const dir of COMPONENT_DIRS) {
-    const absDir = join(rootDir, dir);
-    if (!existsSync3(absDir)) continue;
+    const absDir = join2(rootDir, dir);
+    if (!existsSync4(absDir)) continue;
     let hasComponents = false;
     try {
-      const entries = readdirSync(absDir, { withFileTypes: true });
+      const entries = readdirSync2(absDir, { withFileTypes: true });
       hasComponents = entries.some(
         (e) => e.isFile() && COMPONENT_EXTS.some((x) => e.name.endsWith(x))
       );
@@ -1106,7 +1262,7 @@ function detectComponentPatterns(rootDir, typescript) {
         hasComponents = entries.some(
           (e) => e.isDirectory() && (() => {
             try {
-              return readdirSync(join(absDir, e.name)).some(
+              return readdirSync2(join2(absDir, e.name)).some(
                 (f) => COMPONENT_EXTS.some((x) => f.endsWith(x))
               );
             } catch {
@@ -1143,7 +1299,7 @@ var GLOBAL_CSS_CANDIDATES = [
   "styles/index.css"
 ];
 function detectGlobalCSSFiles(rootDir) {
-  return GLOBAL_CSS_CANDIDATES.filter((rel) => existsSync3(join(rootDir, rel)));
+  return GLOBAL_CSS_CANDIDATES.filter((rel) => existsSync4(join2(rootDir, rel)));
 }
 var TAILWIND_STEMS = ["tailwind.config"];
 var CSS_EXTS = [".css", ".scss", ".sass", ".less"];
@@ -1154,23 +1310,23 @@ function detectTokenSources(rootDir) {
   for (const stem of TAILWIND_STEMS) {
     if (hasConfigFile(rootDir, stem)) {
       try {
-        const entries = readdirSync(rootDir);
+        const entries = readdirSync2(rootDir);
         const match = entries.find((f) => f === stem || f.startsWith(`${stem}.`));
         if (match) {
-          sources.push({ kind: "tailwind-config", path: join(rootDir, match) });
+          sources.push({ kind: "tailwind-config", path: join2(rootDir, match) });
         }
       } catch {
       }
     }
   }
-  const srcDir = join(rootDir, "src");
-  const dirsToScan = existsSync3(srcDir) ? [srcDir] : [];
+  const srcDir = join2(rootDir, "src");
+  const dirsToScan = existsSync4(srcDir) ? [srcDir] : [];
   for (const scanDir of dirsToScan) {
     try {
-      const entries = readdirSync(scanDir, { withFileTypes: true });
+      const entries = readdirSync2(scanDir, { withFileTypes: true });
       for (const entry of entries) {
         if (entry.isFile() && CSS_EXTS.some((x) => entry.name.endsWith(x))) {
-          const filePath = join(scanDir, entry.name);
+          const filePath = join2(scanDir, entry.name);
           const content = readSafe(filePath);
           if (content !== null && CSS_CUSTOM_PROPS_RE.test(content)) {
             sources.push({ kind: "css-custom-properties", path: filePath });
@@ -1180,12 +1336,12 @@ function detectTokenSources(rootDir) {
     } catch {
     }
   }
-  if (existsSync3(srcDir)) {
+  if (existsSync4(srcDir)) {
     try {
-      const entries = readdirSync(srcDir);
+      const entries = readdirSync2(srcDir);
       for (const entry of entries) {
         if (THEME_SUFFIXES.some((s) => entry.endsWith(s))) {
-          sources.push({ kind: "theme-file", path: join(srcDir, entry) });
+          sources.push({ kind: "theme-file", path: join2(srcDir, entry) });
         }
       }
     } catch {
@@ -1194,7 +1350,7 @@ function detectTokenSources(rootDir) {
   return sources;
 }
 function detectProject(rootDir) {
-  const pkgPath = join(rootDir, "package.json");
+  const pkgPath = join2(rootDir, "package.json");
   let packageDeps = {};
   const pkgContent = readSafe(pkgPath);
   if (pkgContent !== null) {
@@ -1225,7 +1381,8 @@ function detectProject(rootDir) {
 }
 
 // src/init/index.ts
-import { Command as Command2 } from "commander";
+import { generateManifest as generateManifest2 } from "@agent-scope/manifest";
+import { Command as Command3 } from "commander";
 function buildDefaultConfig(detected, tokenFile, outputDir) {
   const include = detected.componentPatterns.length > 0 ? detected.componentPatterns : ["src/**/*.tsx"];
   return {
@@ -1263,9 +1420,9 @@ function createRL() {
   });
 }
 async function ask(rl, question) {
-  return new Promise((resolve18) => {
+  return new Promise((resolve19) => {
     rl.question(question, (answer) => {
-      resolve18(answer.trim());
+      resolve19(answer.trim());
     });
   });
 }
@@ -1274,9 +1431,9 @@ async function askWithDefault(rl, label, defaultValue) {
   return answer.length > 0 ? answer : defaultValue;
 }
 function ensureGitignoreEntry(rootDir, entry) {
-  const gitignorePath = join2(rootDir, ".gitignore");
-  if (existsSync4(gitignorePath)) {
-    const content = readFileSync4(gitignorePath, "utf-8");
+  const gitignorePath = join3(rootDir, ".gitignore");
+  if (existsSync5(gitignorePath)) {
+    const content = readFileSync5(gitignorePath, "utf-8");
     const normalised = entry.replace(/\/$/, "");
     const lines = content.split("\n").map((l) => l.trim());
     if (lines.includes(entry) || lines.includes(normalised)) {
@@ -1305,7 +1462,7 @@ function extractTailwindTokens(tokenSources) {
       return result;
     };
     var parseBlock = parseBlock2;
-    const raw = readFileSync4(tailwindSource.path, "utf-8");
+    const raw = readFileSync5(tailwindSource.path, "utf-8");
     const tokens = {};
     const colorsKeyIdx = raw.indexOf("colors:");
     if (colorsKeyIdx !== -1) {
@@ -1340,7 +1497,7 @@ function extractTailwindTokens(tokenSources) {
             }
           }
           if (Object.keys(colorTokens).length > 0) {
-            tokens["color"] = colorTokens;
+            tokens.color = colorTokens;
           }
         }
       }
@@ -1353,7 +1510,7 @@ function extractTailwindTokens(tokenSources) {
         for (const [key, val] of Object.entries(spacingValues)) {
           spacingTokens[key] = { value: val, type: "dimension" };
         }
-        tokens["spacing"] = spacingTokens;
+        tokens.spacing = spacingTokens;
       }
     }
     const fontFamilyMatch = raw.match(/fontFamily\s*:\s*\{([\s\S]*?)\n\s*\}/);
@@ -1366,7 +1523,7 @@ function extractTailwindTokens(tokenSources) {
         }
       }
       if (Object.keys(fontTokens).length > 0) {
-        tokens["font"] = fontTokens;
+        tokens.font = fontTokens;
       }
     }
     const borderRadiusMatch = raw.match(/borderRadius\s*:\s*\{([\s\S]*?)\n\s*\}/);
@@ -1377,7 +1534,7 @@ function extractTailwindTokens(tokenSources) {
         for (const [key, val] of Object.entries(radiusValues)) {
           radiusTokens[key] = { value: val, type: "dimension" };
         }
-        tokens["radius"] = radiusTokens;
+        tokens.radius = radiusTokens;
       }
     }
     return Object.keys(tokens).length > 0 ? tokens : null;
@@ -1386,14 +1543,14 @@ function extractTailwindTokens(tokenSources) {
   }
 }
 function scaffoldConfig(rootDir, config) {
-  const path = join2(rootDir, "reactscope.config.json");
+  const path = join3(rootDir, "reactscope.config.json");
   writeFileSync3(path, `${JSON.stringify(config, null, 2)}
 `);
   return path;
 }
 function scaffoldTokenFile(rootDir, tokenFile, extractedTokens) {
-  const path = join2(rootDir, tokenFile);
-  if (!existsSync4(path)) {
+  const path = join3(rootDir, tokenFile);
+  if (!existsSync5(path)) {
     const stub = {
       $schema: "https://raw.githubusercontent.com/FlatFilers/Scope/main/packages/tokens/schema.json",
       version: "1.0.0",
@@ -1409,19 +1566,19 @@ function scaffoldTokenFile(rootDir, tokenFile, extractedTokens) {
   return path;
 }
 function scaffoldOutputDir(rootDir, outputDir) {
-  const dirPath = join2(rootDir, outputDir);
+  const dirPath = join3(rootDir, outputDir);
   mkdirSync(dirPath, { recursive: true });
-  const keepPath = join2(dirPath, ".gitkeep");
-  if (!existsSync4(keepPath)) {
+  const keepPath = join3(dirPath, ".gitkeep");
+  if (!existsSync5(keepPath)) {
     writeFileSync3(keepPath, "");
   }
   return dirPath;
 }
 async function runInit(options) {
   const rootDir = options.cwd ?? process.cwd();
-  const configPath = join2(rootDir, "reactscope.config.json");
+  const configPath = join3(rootDir, "reactscope.config.json");
   const created = [];
-  if (existsSync4(configPath) && !options.force) {
+  if (existsSync5(configPath) && !options.force) {
     const msg = "reactscope.config.json already exists. Run with --force to overwrite.";
     process.stderr.write(`\u26A0\uFE0F  ${msg}
 `);
@@ -1496,7 +1653,28 @@ async function runInit(options) {
     process.stdout.write(`     ${p}
 `);
   }
-  process.stdout.write("\n   Next steps: run `scope manifest` to scan your components.\n\n");
+  process.stdout.write("\n   Scanning components...\n");
+  try {
+    const manifestConfig = {
+      include: config.components.include,
+      rootDir
+    };
+    const manifest = await generateManifest2(manifestConfig);
+    const manifestCount = Object.keys(manifest.components).length;
+    const manifestOutPath = join3(rootDir, config.output.dir, "manifest.json");
+    mkdirSync(join3(rootDir, config.output.dir), { recursive: true });
+    writeFileSync3(manifestOutPath, `${JSON.stringify(manifest, null, 2)}
+`);
+    process.stdout.write(
+      `   Found ${manifestCount} component(s) \u2014 manifest written to ${manifestOutPath}
+`
+    );
+  } catch {
+    process.stdout.write(
+      "   (manifest generate skipped \u2014 run `scope manifest generate` manually)\n"
+    );
+  }
+  process.stdout.write("\n");
   return {
     success: true,
     message: "Project initialised successfully.",
@@ -1505,7 +1683,7 @@ async function runInit(options) {
   };
 }
 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) => {
+  return new Command3("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) {
@@ -1520,24 +1698,24 @@ function createInitCommand() {
 }
 
 // src/instrument/renders.ts
-import { resolve as resolve7 } from "path";
+import { resolve as resolve8 } from "path";
 import { getBrowserEntryScript as getBrowserEntryScript5 } from "@agent-scope/playwright";
 import { BrowserPool as BrowserPool2 } from "@agent-scope/render";
-import { Command as Command5 } from "commander";
+import { Command as Command6 } 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";
+import { existsSync as existsSync6, mkdirSync as mkdirSync2, readFileSync as readFileSync6, writeFileSync as writeFileSync4 } from "fs";
+import { resolve as resolve4 } from "path";
+import { generateManifest as generateManifest3 } from "@agent-scope/manifest";
+import { Command as Command4 } from "commander";
 var MANIFEST_PATH = ".reactscope/manifest.json";
 function loadManifest(manifestPath = MANIFEST_PATH) {
-  const absPath = resolve3(process.cwd(), manifestPath);
-  if (!existsSync5(absPath)) {
+  const absPath = resolve4(process.cwd(), manifestPath);
+  if (!existsSync6(absPath)) {
     throw new Error(`Manifest not found at ${absPath}.
 Run \`scope manifest generate\` first.`);
   }
-  const raw = readFileSync5(absPath, "utf-8");
+  const raw = readFileSync6(absPath, "utf-8");
   return JSON.parse(raw);
 }
 function resolveFormat(formatFlag) {
@@ -1686,13 +1864,13 @@ function registerGenerate(manifestCmd) {
     "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 rootDir = resolve4(process.cwd(), opts.root ?? ".");
+      const outputPath = resolve4(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({
+      const manifest = await generateManifest3({
         rootDir,
         ...include !== void 0 && { include },
         ...exclude !== void 0 && { exclude }
@@ -1701,7 +1879,7 @@ function registerGenerate(manifestCmd) {
       process.stderr.write(`Found ${componentCount} components.
 `);
       const outputDir = outputPath.replace(/\/[^/]+$/, "");
-      if (!existsSync5(outputDir)) {
+      if (!existsSync6(outputDir)) {
         mkdirSync2(outputDir, { recursive: true });
       }
       writeFileSync4(outputPath, JSON.stringify(manifest, null, 2), "utf-8");
@@ -1717,7 +1895,7 @@ function registerGenerate(manifestCmd) {
   });
 }
 function createManifestCommand() {
-  const manifestCmd = new Command3("manifest").description(
+  const manifestCmd = new Command4("manifest").description(
     "Query and explore the component manifest"
   );
   registerList(manifestCmd);
@@ -1728,7 +1906,7 @@ function createManifestCommand() {
 }
 
 // src/instrument/hooks.ts
-import { resolve as resolve4 } from "path";
+import { resolve as resolve5 } from "path";
 import { getBrowserEntryScript as getBrowserEntryScript2 } from "@agent-scope/playwright";
 import { Command as Cmd } from "commander";
 import { chromium as chromium2 } from "playwright";
@@ -2060,7 +2238,7 @@ Available: ${available}`
           throw new Error(`Invalid props JSON: ${opts.props}`);
         }
         const rootDir = process.cwd();
-        const filePath = resolve4(rootDir, descriptor.filePath);
+        const filePath = resolve5(rootDir, descriptor.filePath);
         process.stderr.write(`Instrumenting hooks for ${componentName}\u2026
 `);
         const result = await runHooksProfiling(componentName, filePath, props);
@@ -2088,7 +2266,7 @@ Available: ${available}`
 }
 
 // src/instrument/profile.ts
-import { resolve as resolve5 } from "path";
+import { resolve as resolve6 } from "path";
 import { getBrowserEntryScript as getBrowserEntryScript3 } from "@agent-scope/playwright";
 import { Command as Cmd2 } from "commander";
 import { chromium as chromium3 } from "playwright";
@@ -2363,7 +2541,7 @@ Available: ${available}`
           throw new Error(`Invalid interaction JSON: ${opts.interaction}`);
         }
         const rootDir = process.cwd();
-        const filePath = resolve5(rootDir, descriptor.filePath);
+        const filePath = resolve6(rootDir, descriptor.filePath);
         process.stderr.write(`Profiling interaction for ${componentName}\u2026
 `);
         const result = await runInteractionProfile(componentName, filePath, props, interaction);
@@ -2391,9 +2569,9 @@ Available: ${available}`
 }
 
 // src/instrument/tree.ts
-import { resolve as resolve6 } from "path";
+import { resolve as resolve7 } from "path";
 import { getBrowserEntryScript as getBrowserEntryScript4 } from "@agent-scope/playwright";
-import { Command as Command4 } from "commander";
+import { Command as Command5 } from "commander";
 import { chromium as chromium4 } from "playwright";
 var MANIFEST_PATH4 = ".reactscope/manifest.json";
 var DEFAULT_VIEWPORT_WIDTH = 375;
@@ -2674,7 +2852,7 @@ async function runInstrumentTree(options) {
   }
 }
 function createInstrumentTreeCommand() {
-  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(
+  return new Command5("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
@@ -2698,7 +2876,7 @@ Available: ${available}`
         }
       }
       const rootDir = process.cwd();
-      const filePath = resolve6(rootDir, descriptor.filePath);
+      const filePath = resolve7(rootDir, descriptor.filePath);
       process.stderr.write(`Instrumenting ${componentName}\u2026
 `);
       const instrumentRoot = await runInstrumentTree({
@@ -3069,7 +3247,7 @@ Available: ${available}`
     );
   }
   const rootDir = process.cwd();
-  const filePath = resolve7(rootDir, descriptor.filePath);
+  const filePath = resolve8(rootDir, descriptor.filePath);
   const preScript = getBrowserEntryScript5() + "\n" + buildInstrumentationScript();
   const htmlHarness = await buildComponentHarness(
     filePath,
@@ -3159,7 +3337,7 @@ function formatRendersTable(result) {
   return lines.join("\n");
 }
 function createInstrumentRendersCommand() {
-  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(
+  return new Command6("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"}]'`,
     "[]"
@@ -3204,7 +3382,7 @@ function createInstrumentRendersCommand() {
   );
 }
 function createInstrumentCommand() {
-  const instrumentCmd = new Command5("instrument").description(
+  const instrumentCmd = new Command6("instrument").description(
     "Structured instrumentation commands for React component analysis"
   );
   instrumentCmd.addCommand(createInstrumentRendersCommand());
@@ -3215,8 +3393,8 @@ function createInstrumentCommand() {
 }
 
 // src/render-commands.ts
-import { existsSync as existsSync7, mkdirSync as mkdirSync4, readFileSync as readFileSync6, writeFileSync as writeFileSync5 } from "fs";
-import { resolve as resolve9 } from "path";
+import { existsSync as existsSync8, mkdirSync as mkdirSync4, readFileSync as readFileSync7, writeFileSync as writeFileSync5 } from "fs";
+import { resolve as resolve10 } from "path";
 import {
   ALL_CONTEXT_IDS,
   ALL_STRESS_IDS,
@@ -3227,13 +3405,13 @@ import {
   safeRender as safeRender2,
   stressAxis
 } from "@agent-scope/render";
-import { Command as Command6 } from "commander";
+import { Command as Command7 } from "commander";
 
 // src/scope-file.ts
-import { existsSync as existsSync6, mkdirSync as mkdirSync3, rmSync } from "fs";
+import { existsSync as existsSync7, mkdirSync as mkdirSync3, rmSync } from "fs";
 import { createRequire as createRequire2 } from "module";
 import { tmpdir } from "os";
-import { dirname as dirname2, join as join3, resolve as resolve8 } from "path";
+import { dirname as dirname2, join as join4, resolve as resolve9 } from "path";
 import * as esbuild2 from "esbuild";
 var SCOPE_EXTENSIONS = [".scope.tsx", ".scope.ts", ".scope.jsx", ".scope.js"];
 function findScopeFile(componentFilePath) {
@@ -3241,15 +3419,15 @@ function findScopeFile(componentFilePath) {
   const stem = componentFilePath.replace(/\.(tsx?|jsx?)$/, "");
   const baseName = stem.slice(dir.length + 1);
   for (const ext of SCOPE_EXTENSIONS) {
-    const candidate = join3(dir, `${baseName}${ext}`);
-    if (existsSync6(candidate)) return candidate;
+    const candidate = join4(dir, `${baseName}${ext}`);
+    if (existsSync7(candidate)) return candidate;
   }
   return null;
 }
 async function loadScopeFile(scopeFilePath) {
-  const tmpDir = join3(tmpdir(), `scope-file-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+  const tmpDir = join4(tmpdir(), `scope-file-${Date.now()}-${Math.random().toString(36).slice(2)}`);
   mkdirSync3(tmpDir, { recursive: true });
-  const outFile = join3(tmpDir, "scope-file.cjs");
+  const outFile = join4(tmpDir, "scope-file.cjs");
   try {
     const result = await esbuild2.build({
       entryPoints: [scopeFilePath],
@@ -3274,7 +3452,7 @@ async function loadScopeFile(scopeFilePath) {
 ${msg}`);
     }
     const req = createRequire2(import.meta.url);
-    delete req.cache[resolve8(outFile)];
+    delete req.cache[resolve9(outFile)];
     const mod = req(outFile);
     const scenarios = extractScenarios(mod, scopeFilePath);
     const hasWrapper = typeof mod.wrapper === "function" || typeof mod.default?.wrapper === "function";
@@ -3352,10 +3530,10 @@ ${msg}`);
 
 // src/render-commands.ts
 function loadGlobalCssFilesFromConfig(cwd) {
-  const configPath = resolve9(cwd, "reactscope.config.json");
-  if (!existsSync7(configPath)) return [];
+  const configPath = resolve10(cwd, "reactscope.config.json");
+  if (!existsSync8(configPath)) return [];
   try {
-    const raw = readFileSync6(configPath, "utf-8");
+    const raw = readFileSync7(configPath, "utf-8");
     const cfg = JSON.parse(raw);
     return cfg.components?.wrappers?.globalCSS ?? [];
   } catch {
@@ -3426,7 +3604,7 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight, g
             }
           });
           return [...set];
-        });
+        }) ?? [];
         const projectCss2 = await getCompiledCssForClasses(rootDir, classes);
         if (projectCss2 != null && projectCss2.length > 0) {
           await page.addStyleTag({ content: projectCss2 });
@@ -3439,49 +3617,147 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight, g
             `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 PAD = 8;
         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 safeW = Math.min(rawW, viewportWidth - clipX);
+        const safeH = Math.min(rawH, viewportHeight - clipY);
         const screenshot = await page.screenshot({
           clip: { x: clipX, y: clipY, width: safeW, height: safeH },
           type: "png"
         });
+        const STYLE_PROPS = [
+          "display",
+          "width",
+          "height",
+          "color",
+          "backgroundColor",
+          "fontSize",
+          "fontFamily",
+          "fontWeight",
+          "lineHeight",
+          "padding",
+          "paddingTop",
+          "paddingRight",
+          "paddingBottom",
+          "paddingLeft",
+          "margin",
+          "marginTop",
+          "marginRight",
+          "marginBottom",
+          "marginLeft",
+          "gap",
+          "borderRadius",
+          "borderWidth",
+          "borderColor",
+          "borderStyle",
+          "boxShadow",
+          "opacity",
+          "position",
+          "flexDirection",
+          "alignItems",
+          "justifyContent",
+          "overflow"
+        ];
+        const _domResult = await page.evaluate(
+          (args) => {
+            let count = 0;
+            const styles = {};
+            function captureStyles(el, id, propList) {
+              const computed = window.getComputedStyle(el);
+              const out = {};
+              for (const prop of propList) {
+                const val = computed[prop] ?? "";
+                if (val && val !== "none" && val !== "normal" && val !== "auto") out[prop] = val;
+              }
+              styles[id] = out;
+            }
+            function walk(node) {
+              if (node.nodeType === Node.TEXT_NODE) {
+                return {
+                  tag: "#text",
+                  attrs: {},
+                  text: node.textContent?.trim() ?? "",
+                  children: []
+                };
+              }
+              const el = node;
+              const id = count++;
+              captureStyles(el, id, args.props);
+              const attrs = {};
+              for (const attr of Array.from(el.attributes)) {
+                attrs[attr.name] = attr.value;
+              }
+              const children = Array.from(el.childNodes).filter(
+                (n) => n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && (n.textContent?.trim() ?? "").length > 0
+              ).map(walk);
+              return { tag: el.tagName.toLowerCase(), attrs, nodeId: id, children };
+            }
+            const root = document.querySelector(args.sel);
+            if (!root)
+              return {
+                tree: { tag: "div", attrs: {}, children: [] },
+                elementCount: 0,
+                nodeStyles: {}
+              };
+            return { tree: walk(root), elementCount: count, nodeStyles: styles };
+          },
+          { sel: "[data-reactscope-root] > *", props: STYLE_PROPS }
+        );
+        const domTree = _domResult?.tree ?? { tag: "div", attrs: {}, children: [] };
+        const elementCount = _domResult?.elementCount ?? 0;
+        const nodeStyles = _domResult?.nodeStyles ?? {};
         const computedStyles = {};
-        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);
+        if (nodeStyles[0]) computedStyles["[data-reactscope-root] > *"] = nodeStyles[0];
+        for (const [nodeId, styles] of Object.entries(nodeStyles)) {
+          computedStyles[`#node-${nodeId}`] = styles;
+        }
+        const dom = {
+          tree: domTree,
+          elementCount,
+          boundingBox: {
+            x: boundingBox.x,
+            y: boundingBox.y,
+            width: boundingBox.width,
+            height: boundingBox.height
           }
-          return out;
-        }, "[data-reactscope-root] > *");
-        computedStyles["[data-reactscope-root] > *"] = styles;
+        };
+        const a11yInfo = await page.evaluate((sel) => {
+          const wrapper = document.querySelector(sel);
+          const el = wrapper?.firstElementChild ?? wrapper;
+          if (!el) return { role: "generic", name: "" };
+          return {
+            role: el.getAttribute("role") ?? el.tagName.toLowerCase() ?? "generic",
+            name: el.getAttribute("aria-label") ?? el.getAttribute("aria-labelledby") ?? el.textContent?.trim().slice(0, 100) ?? ""
+          };
+        }, "[data-reactscope-root]") ?? {
+          role: "generic",
+          name: ""
+        };
+        const imgViolations = await page.evaluate((sel) => {
+          const container = document.querySelector(sel);
+          if (!container) return [];
+          const issues = [];
+          container.querySelectorAll("img").forEach((img) => {
+            if (!img.alt) issues.push("Image missing accessible name");
+          });
+          return issues;
+        }, "[data-reactscope-root]") ?? [];
+        const accessibility = {
+          role: a11yInfo.role,
+          name: a11yInfo.name,
+          violations: imgViolations
+        };
         return {
           screenshot,
           width: Math.round(safeW),
           height: Math.round(safeH),
           renderTimeMs,
-          computedStyles
+          computedStyles,
+          dom,
+          accessibility
         };
       } finally {
         pool.release(slot);
@@ -3557,11 +3833,16 @@ Available: ${available}`
         }
         const { width, height } = parseViewport(opts.viewport);
         const rootDir = process.cwd();
-        const filePath = resolve9(rootDir, descriptor.filePath);
+        const filePath = resolve10(rootDir, descriptor.filePath);
         const scopeData = await loadScopeFileForComponent(filePath);
         const wrapperScript = scopeData?.hasWrapper === true ? await buildWrapperScript(scopeData.filePath) : void 0;
         const scenarios = buildScenarioMap(opts, scopeData);
         const globalCssFiles = loadGlobalCssFilesFromConfig(rootDir);
+        if (globalCssFiles.length === 0) {
+          process.stderr.write(
+            "warning: No globalCSS files configured. Tailwind/CSS styles will not be applied to renders.\n  Add `components.wrappers.globalCSS` to reactscope.config.json\n"
+          );
+        }
         const renderer = buildRenderer(
           filePath,
           componentName,
@@ -3605,7 +3886,7 @@ Available: ${available}`
           const result = outcome.result;
           const outFileName = isNamed ? `${componentName}-${scenarioName}.png` : `${componentName}.png`;
           if (opts.output !== void 0 && !isNamed) {
-            const outPath = resolve9(process.cwd(), opts.output);
+            const outPath = resolve10(process.cwd(), opts.output);
             writeFileSync5(outPath, result.screenshot);
             process.stdout.write(
               `\u2713 ${label} \u2192 ${opts.output} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
@@ -3616,9 +3897,9 @@ Available: ${available}`
             process.stdout.write(`${JSON.stringify(json, null, 2)}
 `);
           } else {
-            const dir = resolve9(process.cwd(), DEFAULT_OUTPUT_DIR);
+            const dir = resolve10(process.cwd(), DEFAULT_OUTPUT_DIR);
             mkdirSync4(dir, { recursive: true });
-            const outPath = resolve9(dir, outFileName);
+            const outPath = resolve10(dir, outFileName);
             writeFileSync5(outPath, result.screenshot);
             const relPath = `${DEFAULT_OUTPUT_DIR}/${outFileName}`;
             process.stdout.write(
@@ -3660,7 +3941,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 = resolve9(rootDir, descriptor.filePath);
+        const filePath = resolve10(rootDir, descriptor.filePath);
         const matrixCssFiles = loadGlobalCssFilesFromConfig(rootDir);
         const renderer = buildRenderer(
           filePath,
@@ -3753,7 +4034,7 @@ Available: ${available}`
           const { SpriteSheetGenerator: SpriteSheetGenerator2 } = await import("@agent-scope/render");
           const gen = new SpriteSheetGenerator2();
           const sheet = await gen.generate(result);
-          const spritePath = resolve9(process.cwd(), opts.sprite);
+          const spritePath = resolve10(process.cwd(), opts.sprite);
           writeFileSync5(spritePath, sheet.png);
           process.stderr.write(`Sprite sheet saved to ${spritePath}
 `);
@@ -3763,9 +4044,9 @@ Available: ${available}`
           const { SpriteSheetGenerator: SpriteSheetGenerator2 } = await import("@agent-scope/render");
           const gen = new SpriteSheetGenerator2();
           const sheet = await gen.generate(result);
-          const dir = resolve9(process.cwd(), DEFAULT_OUTPUT_DIR);
+          const dir = resolve10(process.cwd(), DEFAULT_OUTPUT_DIR);
           mkdirSync4(dir, { recursive: true });
-          const outPath = resolve9(dir, `${componentName}-matrix.png`);
+          const outPath = resolve10(dir, `${componentName}-matrix.png`);
           writeFileSync5(outPath, sheet.png);
           const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}-matrix.png`;
           process.stdout.write(
@@ -3809,23 +4090,37 @@ function registerRenderAll(renderCmd) {
           return;
         }
         const concurrency = Math.max(1, parseInt(opts.concurrency, 10) || 4);
-        const outputDir = resolve9(process.cwd(), opts.outputDir);
+        const outputDir = resolve10(process.cwd(), opts.outputDir);
         mkdirSync4(outputDir, { recursive: true });
         const rootDir = process.cwd();
         process.stderr.write(`Rendering ${total} components (concurrency: ${concurrency})\u2026
 `);
         const results = [];
+        const complianceStylesMap = {};
         let completed = 0;
         const renderOne = async (name) => {
           const descriptor = manifest.components[name];
           if (descriptor === void 0) return;
-          const filePath = resolve9(rootDir, descriptor.filePath);
+          const filePath = resolve10(rootDir, descriptor.filePath);
           const allCssFiles = loadGlobalCssFilesFromConfig(process.cwd());
-          const renderer = buildRenderer(filePath, name, 375, 812, allCssFiles, process.cwd());
+          const scopeData = await loadScopeFileForComponent(filePath);
+          const scenarioEntries = scopeData !== null ? Object.entries(scopeData.scenarios) : [];
+          const defaultEntry = scenarioEntries.find(([k]) => k === "default") ?? scenarioEntries[0];
+          const renderProps = defaultEntry !== void 0 ? defaultEntry[1] : {};
+          const wrapperScript = scopeData?.hasWrapper === true ? await buildWrapperScript(scopeData.filePath) : void 0;
+          const renderer = buildRenderer(
+            filePath,
+            name,
+            375,
+            812,
+            allCssFiles,
+            process.cwd(),
+            wrapperScript
+          );
           const outcome = await safeRender2(
-            () => renderer.renderCell({}, descriptor.complexityClass),
+            () => renderer.renderCell(renderProps, descriptor.complexityClass),
             {
-              props: {},
+              props: renderProps,
               sourceLocation: {
                 file: descriptor.filePath,
                 line: descriptor.loc.start,
@@ -3843,7 +4138,7 @@ function registerRenderAll(renderCmd) {
               success: false,
               errorMessage: outcome.error.message
             });
-            const errPath = resolve9(outputDir, `${name}.error.json`);
+            const errPath = resolve10(outputDir, `${name}.error.json`);
             writeFileSync5(
               errPath,
               JSON.stringify(
@@ -3861,10 +4156,81 @@ function registerRenderAll(renderCmd) {
           }
           const result = outcome.result;
           results.push({ name, renderTimeMs: result.renderTimeMs, success: true });
-          const pngPath = resolve9(outputDir, `${name}.png`);
+          const pngPath = resolve10(outputDir, `${name}.png`);
           writeFileSync5(pngPath, result.screenshot);
-          const jsonPath = resolve9(outputDir, `${name}.json`);
+          const jsonPath = resolve10(outputDir, `${name}.json`);
           writeFileSync5(jsonPath, JSON.stringify(formatRenderJson(name, {}, result), null, 2));
+          const rawStyles = result.computedStyles["[data-reactscope-root] > *"] ?? {};
+          const compStyles = {
+            colors: {},
+            spacing: {},
+            typography: {},
+            borders: {},
+            shadows: {}
+          };
+          for (const [prop, val] of Object.entries(rawStyles)) {
+            if (!val || val === "none" || val === "") continue;
+            const lower = prop.toLowerCase();
+            if (lower.includes("color") || lower.includes("background")) {
+              compStyles.colors[prop] = val;
+            } else if (lower.includes("padding") || lower.includes("margin") || lower.includes("gap") || lower.includes("width") || lower.includes("height")) {
+              compStyles.spacing[prop] = val;
+            } else if (lower.includes("font") || lower.includes("lineheight") || lower.includes("letterspacing") || lower.includes("texttransform")) {
+              compStyles.typography[prop] = val;
+            } else if (lower.includes("border") || lower.includes("radius") || lower.includes("outline")) {
+              compStyles.borders[prop] = val;
+            } else if (lower.includes("shadow")) {
+              compStyles.shadows[prop] = val;
+            }
+          }
+          complianceStylesMap[name] = compStyles;
+          if (scopeData !== null && Object.keys(scopeData.scenarios).length >= 2) {
+            try {
+              const scenarioEntries2 = Object.entries(scopeData.scenarios);
+              const scenarioAxis = {
+                name: "scenario",
+                values: scenarioEntries2.map(([k]) => k)
+              };
+              const scenarioPropsMap = Object.fromEntries(scenarioEntries2);
+              const matrixRenderer = buildRenderer(
+                filePath,
+                name,
+                375,
+                812,
+                allCssFiles,
+                process.cwd(),
+                wrapperScript
+              );
+              const wrappedRenderer = {
+                _satori: matrixRenderer._satori,
+                async renderCell(props, cc) {
+                  const scenarioName = props.scenario;
+                  const realProps = scenarioName !== void 0 ? scenarioPropsMap[scenarioName] ?? props : props;
+                  return matrixRenderer.renderCell(realProps, cc ?? "simple");
+                }
+              };
+              const matrix = new RenderMatrix(wrappedRenderer, [scenarioAxis], {
+                concurrency: 2
+              });
+              const matrixResult = await matrix.render();
+              const matrixCells = matrixResult.cells.map((cell) => ({
+                axisValues: [scenarioEntries2[cell.axisIndices[0] ?? 0]?.[0] ?? ""],
+                screenshot: cell.result.screenshot.toString("base64"),
+                width: cell.result.width,
+                height: cell.result.height,
+                renderTimeMs: cell.result.renderTimeMs
+              }));
+              const existingJson = JSON.parse(readFileSync7(jsonPath, "utf-8"));
+              existingJson.cells = matrixCells;
+              existingJson.axisLabels = [scenarioAxis.values];
+              writeFileSync5(jsonPath, JSON.stringify(existingJson, null, 2));
+            } catch (matrixErr) {
+              process.stderr.write(
+                `  [warn] Matrix render for ${name} failed: ${matrixErr instanceof Error ? matrixErr.message : String(matrixErr)}
+`
+              );
+            }
+          }
           if (isTTY()) {
             process.stdout.write(
               `\u2713 ${name} \u2192 ${opts.outputDir}/${name}.png (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
@@ -3888,6 +4254,14 @@ function registerRenderAll(renderCmd) {
         }
         await Promise.all(workers);
         await shutdownPool3();
+        const compStylesPath = resolve10(
+          resolve10(process.cwd(), opts.outputDir),
+          "..",
+          "compliance-styles.json"
+        );
+        writeFileSync5(compStylesPath, JSON.stringify(complianceStylesMap, null, 2));
+        process.stderr.write(`[scope/render] \u2713 Wrote compliance-styles.json
+`);
         process.stderr.write("\n");
         const summary = formatSummaryText(results, outputDir);
         process.stderr.write(`${summary}
@@ -3926,7 +4300,7 @@ function resolveMatrixFormat(formatFlag, spriteAlreadyWritten) {
   return "json";
 }
 function createRenderCommand() {
-  const renderCmd = new Command6("render").description(
+  const renderCmd = new Command7("render").description(
     "Render components to PNG or JSON via esbuild + BrowserPool"
   );
   registerRenderSingle(renderCmd);
@@ -3936,9 +4310,9 @@ function createRenderCommand() {
 }
 
 // src/report/baseline.ts
-import { existsSync as existsSync8, mkdirSync as mkdirSync5, rmSync as rmSync2, writeFileSync as writeFileSync6 } from "fs";
-import { resolve as resolve10 } from "path";
-import { generateManifest as generateManifest3 } from "@agent-scope/manifest";
+import { existsSync as existsSync9, mkdirSync as mkdirSync5, rmSync as rmSync2, writeFileSync as writeFileSync6 } from "fs";
+import { resolve as resolve11 } from "path";
+import { generateManifest as generateManifest4 } from "@agent-scope/manifest";
 import { BrowserPool as BrowserPool4, safeRender as safeRender3 } from "@agent-scope/render";
 import { ComplianceEngine as ComplianceEngine2, TokenResolver as TokenResolver2 } from "@agent-scope/tokens";
 var DEFAULT_BASELINE_DIR = ".reactscope/baseline";
@@ -4086,30 +4460,30 @@ async function runBaseline(options = {}) {
   } = options;
   const startTime = performance.now();
   const rootDir = process.cwd();
-  const baselineDir = resolve10(rootDir, outputDir);
-  const rendersDir = resolve10(baselineDir, "renders");
-  if (existsSync8(baselineDir)) {
+  const baselineDir = resolve11(rootDir, outputDir);
+  const rendersDir = resolve11(baselineDir, "renders");
+  if (existsSync9(baselineDir)) {
     rmSync2(baselineDir, { recursive: true, force: true });
   }
   mkdirSync5(rendersDir, { recursive: true });
   let manifest;
   if (manifestPath !== void 0) {
-    const { readFileSync: readFileSync13 } = await import("fs");
-    const absPath = resolve10(rootDir, manifestPath);
-    if (!existsSync8(absPath)) {
+    const { readFileSync: readFileSync14 } = await import("fs");
+    const absPath = resolve11(rootDir, manifestPath);
+    if (!existsSync9(absPath)) {
       throw new Error(`Manifest not found at ${absPath}.`);
     }
-    manifest = JSON.parse(readFileSync13(absPath, "utf-8"));
+    manifest = JSON.parse(readFileSync14(absPath, "utf-8"));
     process.stderr.write(`Loaded manifest from ${manifestPath}
 `);
   } else {
     process.stderr.write("Scanning for React components\u2026\n");
-    manifest = await generateManifest3({ rootDir });
+    manifest = await generateManifest4({ rootDir });
     const count = Object.keys(manifest.components).length;
     process.stderr.write(`Found ${count} components.
 `);
   }
-  writeFileSync6(resolve10(baselineDir, "manifest.json"), JSON.stringify(manifest, null, 2), "utf-8");
+  writeFileSync6(resolve11(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));
@@ -4130,7 +4504,7 @@ async function runBaseline(options = {}) {
       auditedAt: (/* @__PURE__ */ new Date()).toISOString()
     };
     writeFileSync6(
-      resolve10(baselineDir, "compliance.json"),
+      resolve11(baselineDir, "compliance.json"),
       JSON.stringify(emptyReport, null, 2),
       "utf-8"
     );
@@ -4151,7 +4525,7 @@ async function runBaseline(options = {}) {
   const renderOne = async (name) => {
     const descriptor = manifest.components[name];
     if (descriptor === void 0) return;
-    const filePath = resolve10(rootDir, descriptor.filePath);
+    const filePath = resolve11(rootDir, descriptor.filePath);
     const outcome = await safeRender3(
       () => renderComponent2(filePath, name, {}, viewportWidth, viewportHeight),
       {
@@ -4170,7 +4544,7 @@ async function runBaseline(options = {}) {
     }
     if (outcome.crashed) {
       failureCount++;
-      const errPath = resolve10(rendersDir, `${name}.error.json`);
+      const errPath = resolve11(rendersDir, `${name}.error.json`);
       writeFileSync6(
         errPath,
         JSON.stringify(
@@ -4188,10 +4562,10 @@ async function runBaseline(options = {}) {
       return;
     }
     const result = outcome.result;
-    writeFileSync6(resolve10(rendersDir, `${name}.png`), result.screenshot);
+    writeFileSync6(resolve11(rendersDir, `${name}.png`), result.screenshot);
     const jsonOutput = formatRenderJson(name, {}, result);
     writeFileSync6(
-      resolve10(rendersDir, `${name}.json`),
+      resolve11(rendersDir, `${name}.json`),
       JSON.stringify(jsonOutput, null, 2),
       "utf-8"
     );
@@ -4219,7 +4593,7 @@ async function runBaseline(options = {}) {
   const engine = new ComplianceEngine2(resolver);
   const batchReport = engine.auditBatch(computedStylesMap);
   writeFileSync6(
-    resolve10(baselineDir, "compliance.json"),
+    resolve11(baselineDir, "compliance.json"),
     JSON.stringify(batchReport, null, 2),
     "utf-8"
   );
@@ -4262,22 +4636,22 @@ function registerBaselineSubCommand(reportCmd) {
 }
 
 // src/report/diff.ts
-import { existsSync as existsSync9, readFileSync as readFileSync7, writeFileSync as writeFileSync7 } from "fs";
-import { resolve as resolve11 } from "path";
-import { generateManifest as generateManifest4 } from "@agent-scope/manifest";
+import { existsSync as existsSync10, readFileSync as readFileSync8, writeFileSync as writeFileSync7 } from "fs";
+import { resolve as resolve12 } from "path";
+import { generateManifest as generateManifest5 } from "@agent-scope/manifest";
 import { BrowserPool as BrowserPool5, 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 = resolve11(baselineDir, "compliance.json");
-  if (!existsSync9(compliancePath)) return null;
-  const raw = JSON.parse(readFileSync7(compliancePath, "utf-8"));
+  const compliancePath = resolve12(baselineDir, "compliance.json");
+  if (!existsSync10(compliancePath)) return null;
+  const raw = JSON.parse(readFileSync8(compliancePath, "utf-8"));
   return raw;
 }
 function loadBaselineRenderJson2(baselineDir, componentName) {
-  const jsonPath = resolve11(baselineDir, "renders", `${componentName}.json`);
-  if (!existsSync9(jsonPath)) return null;
-  return JSON.parse(readFileSync7(jsonPath, "utf-8"));
+  const jsonPath = resolve12(baselineDir, "renders", `${componentName}.json`);
+  if (!existsSync10(jsonPath)) return null;
+  return JSON.parse(readFileSync8(jsonPath, "utf-8"));
 }
 var _pool5 = null;
 async function getPool5(viewportWidth, viewportHeight) {
@@ -4444,19 +4818,19 @@ async function runDiff(options = {}) {
   } = options;
   const startTime = performance.now();
   const rootDir = process.cwd();
-  const baselineDir = resolve11(rootDir, baselineDirRaw);
-  if (!existsSync9(baselineDir)) {
+  const baselineDir = resolve12(rootDir, baselineDirRaw);
+  if (!existsSync10(baselineDir)) {
     throw new Error(
       `Baseline directory not found at "${baselineDir}". Run \`scope report baseline\` first to create a baseline snapshot.`
     );
   }
-  const baselineManifestPath = resolve11(baselineDir, "manifest.json");
-  if (!existsSync9(baselineManifestPath)) {
+  const baselineManifestPath = resolve12(baselineDir, "manifest.json");
+  if (!existsSync10(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(readFileSync7(baselineManifestPath, "utf-8"));
+  const baselineManifest = JSON.parse(readFileSync8(baselineManifestPath, "utf-8"));
   const baselineCompliance = loadBaselineCompliance(baselineDir);
   const baselineComponentNames = new Set(Object.keys(baselineManifest.components));
   process.stderr.write(
@@ -4465,16 +4839,16 @@ async function runDiff(options = {}) {
   );
   let currentManifest;
   if (manifestPath !== void 0) {
-    const absPath = resolve11(rootDir, manifestPath);
-    if (!existsSync9(absPath)) {
+    const absPath = resolve12(rootDir, manifestPath);
+    if (!existsSync10(absPath)) {
       throw new Error(`Manifest not found at "${absPath}".`);
     }
-    currentManifest = JSON.parse(readFileSync7(absPath, "utf-8"));
+    currentManifest = JSON.parse(readFileSync8(absPath, "utf-8"));
     process.stderr.write(`Loaded manifest from ${manifestPath}
 `);
   } else {
     process.stderr.write("Scanning for React components\u2026\n");
-    currentManifest = await generateManifest4({ rootDir });
+    currentManifest = await generateManifest5({ rootDir });
     const count = Object.keys(currentManifest.components).length;
     process.stderr.write(`Found ${count} components.
 `);
@@ -4502,7 +4876,7 @@ async function runDiff(options = {}) {
   const renderOne = async (name) => {
     const descriptor = currentManifest.components[name];
     if (descriptor === void 0) return;
-    const filePath = resolve11(rootDir, descriptor.filePath);
+    const filePath = resolve12(rootDir, descriptor.filePath);
     const outcome = await safeRender4(
       () => renderComponent3(filePath, name, {}, viewportWidth, viewportHeight),
       {
@@ -4742,8 +5116,8 @@ function registerDiffSubCommand(reportCmd) {
 }
 
 // src/report/pr-comment.ts
-import { existsSync as existsSync10, readFileSync as readFileSync8, writeFileSync as writeFileSync8 } from "fs";
-import { resolve as resolve12 } from "path";
+import { existsSync as existsSync11, readFileSync as readFileSync9, writeFileSync as writeFileSync8 } from "fs";
+import { resolve as resolve13 } from "path";
 var STATUS_BADGE = {
   added: "\u2705 added",
   removed: "\u{1F5D1}\uFE0F removed",
@@ -4826,13 +5200,13 @@ function formatPrComment(diff) {
   return lines.join("\n");
 }
 function loadDiffResult(filePath) {
-  const abs = resolve12(filePath);
-  if (!existsSync10(abs)) {
+  const abs = resolve13(filePath);
+  if (!existsSync11(abs)) {
     throw new Error(`DiffResult file not found: ${abs}`);
   }
   let raw;
   try {
-    raw = readFileSync8(abs, "utf-8");
+    raw = readFileSync9(abs, "utf-8");
   } catch (err) {
     throw new Error(
       `Failed to read DiffResult file: ${err instanceof Error ? err.message : String(err)}`
@@ -4859,7 +5233,7 @@ function registerPrCommentSubCommand(reportCmd) {
       const diff = loadDiffResult(opts.input);
       const comment = formatPrComment(diff);
       if (opts.output !== void 0) {
-        writeFileSync8(resolve12(opts.output), comment, "utf-8");
+        writeFileSync8(resolve13(opts.output), comment, "utf-8");
         process.stderr.write(`PR comment written to ${opts.output}
 `);
       } else {
@@ -5154,11 +5528,11 @@ function buildStructuredReport(report) {
 }
 
 // src/site-commands.ts
-import { createReadStream, existsSync as existsSync11, statSync } from "fs";
+import { createReadStream, existsSync as existsSync12, statSync as statSync2 } from "fs";
 import { createServer } from "http";
-import { extname, join as join4, resolve as resolve13 } from "path";
+import { extname, join as join5, resolve as resolve14 } from "path";
 import { buildSite } from "@agent-scope/site";
-import { Command as Command7 } from "commander";
+import { Command as Command8 } from "commander";
 var MIME_TYPES = {
   ".html": "text/html; charset=utf-8",
   ".css": "text/css; charset=utf-8",
@@ -5174,16 +5548,16 @@ function registerBuild(siteCmd) {
   siteCmd.command("build").description("Build a static HTML gallery from .reactscope/ output").option("-i, --input <path>", "Path to .reactscope input directory", ".reactscope").option("-o, --output <path>", "Output directory for generated site", ".reactscope/site").option("--base-path <path>", "Base URL path prefix for subdirectory deployment", "/").option("--compliance <path>", "Path to compliance batch report JSON").option("--title <text>", "Site title", "Scope \u2014 Component Gallery").action(
     async (opts) => {
       try {
-        const inputDir = resolve13(process.cwd(), opts.input);
-        const outputDir = resolve13(process.cwd(), opts.output);
-        if (!existsSync11(inputDir)) {
+        const inputDir = resolve14(process.cwd(), opts.input);
+        const outputDir = resolve14(process.cwd(), opts.output);
+        if (!existsSync12(inputDir)) {
           throw new Error(
             `Input directory not found: ${inputDir}
 Run \`scope manifest generate\` and \`scope render\` first.`
           );
         }
-        const manifestPath = join4(inputDir, "manifest.json");
-        if (!existsSync11(manifestPath)) {
+        const manifestPath = join5(inputDir, "manifest.json");
+        if (!existsSync12(manifestPath)) {
           throw new Error(
             `Manifest not found at ${manifestPath}
 Run \`scope manifest generate\` first.`
@@ -5196,7 +5570,7 @@ Run \`scope manifest generate\` first.`
           outputDir,
           basePath: opts.basePath,
           ...opts.compliance !== void 0 && {
-            compliancePath: resolve13(process.cwd(), opts.compliance)
+            compliancePath: resolve14(process.cwd(), opts.compliance)
           },
           title: opts.title
         });
@@ -5219,8 +5593,8 @@ function registerServe(siteCmd) {
       if (Number.isNaN(port) || port < 1 || port > 65535) {
         throw new Error(`Invalid port: ${opts.port}`);
       }
-      const serveDir = resolve13(process.cwd(), opts.dir);
-      if (!existsSync11(serveDir)) {
+      const serveDir = resolve14(process.cwd(), opts.dir);
+      if (!existsSync12(serveDir)) {
         throw new Error(
           `Serve directory not found: ${serveDir}
 Run \`scope site build\` first.`
@@ -5229,13 +5603,13 @@ Run \`scope site build\` first.`
       const server = createServer((req, res) => {
         const rawUrl = req.url ?? "/";
         const urlPath = decodeURIComponent(rawUrl.split("?")[0] ?? "/");
-        const filePath = join4(serveDir, urlPath.endsWith("/") ? `${urlPath}index.html` : urlPath);
+        const filePath = join5(serveDir, urlPath.endsWith("/") ? `${urlPath}index.html` : urlPath);
         if (!filePath.startsWith(serveDir)) {
           res.writeHead(403, { "Content-Type": "text/plain" });
           res.end("Forbidden");
           return;
         }
-        if (existsSync11(filePath) && statSync(filePath).isFile()) {
+        if (existsSync12(filePath) && statSync2(filePath).isFile()) {
           const ext = extname(filePath).toLowerCase();
           const contentType = MIME_TYPES[ext] ?? "application/octet-stream";
           res.writeHead(200, { "Content-Type": contentType });
@@ -5243,7 +5617,7 @@ Run \`scope site build\` first.`
           return;
         }
         const htmlPath = `${filePath}.html`;
-        if (existsSync11(htmlPath) && statSync(htmlPath).isFile()) {
+        if (existsSync12(htmlPath) && statSync2(htmlPath).isFile()) {
           res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
           createReadStream(htmlPath).pipe(res);
           return;
@@ -5276,7 +5650,7 @@ Run \`scope site build\` first.`
   });
 }
 function createSiteCommand() {
-  const siteCmd = new Command7("site").description(
+  const siteCmd = new Command8("site").description(
     "Build and serve the static component gallery site"
   );
   registerBuild(siteCmd);
@@ -5285,8 +5659,8 @@ function createSiteCommand() {
 }
 
 // src/tokens/commands.ts
-import { existsSync as existsSync14, readFileSync as readFileSync11 } from "fs";
-import { resolve as resolve17 } from "path";
+import { existsSync as existsSync15, readFileSync as readFileSync12 } from "fs";
+import { resolve as resolve18 } from "path";
 import {
   parseTokenFileSync as parseTokenFileSync2,
   TokenParseError,
@@ -5294,26 +5668,26 @@ import {
   TokenValidationError,
   validateTokenFile
 } from "@agent-scope/tokens";
-import { Command as Command9 } from "commander";
+import { Command as Command10 } from "commander";
 
 // src/tokens/compliance.ts
-import { existsSync as existsSync12, readFileSync as readFileSync9 } from "fs";
-import { resolve as resolve14 } from "path";
+import { existsSync as existsSync13, readFileSync as readFileSync10 } from "fs";
+import { resolve as resolve15 } 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 = resolve14(process.cwd(), stylesPath);
-  if (!existsSync12(absPath)) {
+  const absPath = resolve15(process.cwd(), stylesPath);
+  if (!existsSync13(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 = readFileSync9(absPath, "utf-8");
+  const raw = readFileSync10(absPath, "utf-8");
   let parsed;
   try {
     parsed = JSON.parse(raw);
@@ -5473,38 +5847,38 @@ function registerCompliance(tokensCmd) {
 }
 
 // src/tokens/export.ts
-import { existsSync as existsSync13, readFileSync as readFileSync10, writeFileSync as writeFileSync9 } from "fs";
-import { resolve as resolve15 } from "path";
+import { existsSync as existsSync14, readFileSync as readFileSync11, writeFileSync as writeFileSync9 } from "fs";
+import { resolve as resolve16 } from "path";
 import {
   exportTokens,
   parseTokenFileSync,
   ThemeResolver,
   TokenResolver as TokenResolver5
 } from "@agent-scope/tokens";
-import { Command as Command8 } from "commander";
+import { Command as Command9 } 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 resolveTokenFilePath2(fileFlag) {
   if (fileFlag !== void 0) {
-    return resolve15(process.cwd(), fileFlag);
+    return resolve16(process.cwd(), fileFlag);
   }
-  const configPath = resolve15(process.cwd(), CONFIG_FILE);
-  if (existsSync13(configPath)) {
+  const configPath = resolve16(process.cwd(), CONFIG_FILE);
+  if (existsSync14(configPath)) {
     try {
-      const raw = readFileSync10(configPath, "utf-8");
+      const raw = readFileSync11(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 resolve15(process.cwd(), file);
+        return resolve16(process.cwd(), file);
       }
     } catch {
     }
   }
-  return resolve15(process.cwd(), DEFAULT_TOKEN_FILE);
+  return resolve16(process.cwd(), DEFAULT_TOKEN_FILE);
 }
 function createTokensExportCommand() {
-  return new Command8("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 Command9("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(
@@ -5530,13 +5904,13 @@ Supported formats: ${SUPPORTED_FORMATS.join(", ")}
       const format = opts.format;
       try {
         const filePath = resolveTokenFilePath2(opts.file);
-        if (!existsSync13(filePath)) {
+        if (!existsSync14(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 = readFileSync10(filePath, "utf-8");
+        const raw = readFileSync11(filePath, "utf-8");
         const { tokens, rawFile } = parseTokenFileSync(raw);
         let themesMap;
         if (opts.theme !== void 0) {
@@ -5575,7 +5949,7 @@ Available themes: ${themeNames.join(", ")}`
           themes: themesMap
         });
         if (opts.out !== void 0) {
-          const outPath = resolve15(process.cwd(), opts.out);
+          const outPath = resolve16(process.cwd(), opts.out);
           writeFileSync9(outPath, output, "utf-8");
           process.stderr.write(`Exported ${tokens.length} tokens to ${outPath}
 `);
@@ -5691,7 +6065,7 @@ ${formatImpactSummary(report)}
 
 // src/tokens/preview.ts
 import { mkdirSync as mkdirSync6, writeFileSync as writeFileSync10 } from "fs";
-import { resolve as resolve16 } from "path";
+import { resolve as resolve17 } from "path";
 import { BrowserPool as BrowserPool6, 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";
@@ -5872,8 +6246,8 @@ function registerPreview(tokensCmd) {
         });
         const spriteResult = await generator.generate(matrixResult);
         const tokenLabel = tokenPath.replace(/\./g, "-");
-        const outputPath = opts.output ?? resolve16(process.cwd(), DEFAULT_OUTPUT_DIR2, `preview-${tokenLabel}.png`);
-        const outputDir = resolve16(outputPath, "..");
+        const outputPath = opts.output ?? resolve17(process.cwd(), DEFAULT_OUTPUT_DIR2, `preview-${tokenLabel}.png`);
+        const outputDir = resolve17(outputPath, "..");
         mkdirSync6(outputDir, { recursive: true });
         writeFileSync10(outputPath, spriteResult.png);
         const useJson = opts.format === "json" || opts.format !== "text" && !isTTY();
@@ -5934,30 +6308,30 @@ function buildTable2(headers, rows) {
 }
 function resolveTokenFilePath(fileFlag) {
   if (fileFlag !== void 0) {
-    return resolve17(process.cwd(), fileFlag);
+    return resolve18(process.cwd(), fileFlag);
   }
-  const configPath = resolve17(process.cwd(), CONFIG_FILE2);
-  if (existsSync14(configPath)) {
+  const configPath = resolve18(process.cwd(), CONFIG_FILE2);
+  if (existsSync15(configPath)) {
     try {
-      const raw = readFileSync11(configPath, "utf-8");
+      const raw = readFileSync12(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 resolve17(process.cwd(), file);
+        return resolve18(process.cwd(), file);
       }
     } catch {
     }
   }
-  return resolve17(process.cwd(), DEFAULT_TOKEN_FILE2);
+  return resolve18(process.cwd(), DEFAULT_TOKEN_FILE2);
 }
 function loadTokens(absPath) {
-  if (!existsSync14(absPath)) {
+  if (!existsSync15(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 = readFileSync11(absPath, "utf-8");
+  const raw = readFileSync12(absPath, "utf-8");
   return parseTokenFileSync2(raw);
 }
 function getRawValue(node, segments) {
@@ -6171,13 +6545,13 @@ function registerValidate(tokensCmd) {
   ).option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action((opts) => {
     try {
       const filePath = resolveTokenFilePath(opts.file);
-      if (!existsSync14(filePath)) {
+      if (!existsSync15(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 = readFileSync11(filePath, "utf-8");
+      const raw = readFileSync12(filePath, "utf-8");
       const useJson = opts.format === "json" || opts.format !== "text" && !isTTY2();
       const errors = [];
       let parsed;
@@ -6245,7 +6619,7 @@ function outputValidationResult(filePath, errors, useJson) {
   }
 }
 function createTokensCommand() {
-  const tokensCmd = new Command9("tokens").description(
+  const tokensCmd = new Command10("tokens").description(
     "Query and validate design tokens from a reactscope.tokens.json file"
   );
   registerGet2(tokensCmd);
@@ -6262,7 +6636,7 @@ function createTokensCommand() {
 
 // src/program.ts
 function createProgram(options = {}) {
-  const program2 = new Command10("scope").version(options.version ?? "0.1.0").description("Scope \u2014 React instrumentation toolkit");
+  const program2 = new Command11("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 {
@@ -6335,7 +6709,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 = readFileSync12(tracePath, "utf-8");
+    const raw = readFileSync13(tracePath, "utf-8");
     const trace = loadTrace(raw);
     const source = generateTest(trace, {
       description: opts.description,
@@ -6350,6 +6724,7 @@ function createProgram(options = {}) {
   program2.addCommand(createInstrumentCommand());
   program2.addCommand(createInitCommand());
   program2.addCommand(createCiCommand());
+  program2.addCommand(createDoctorCommand());
   const existingReportCmd = program2.commands.find((c) => c.name() === "report");
   if (existingReportCmd !== void 0) {
     registerBaselineSubCommand(existingReportCmd);