@agent-scope/cli 1.18.1 → 1.19.0

package/dist/index.d.cts

@@ -116,6 +116,15 @@ declare function formatCiReport(result: CiResult): string;
  */
 declare function createCiCommand(): Command;
 
+/**
+ * doctor-commands.ts
+ *
+ * `scope doctor` — health check that validates the current project's Scope
+ * setup and reports issues with config, tokens, globalCSS, and manifest staleness.
+ */
+
+declare function createDoctorCommand(): Command;
+
 /**
  * @agent-scope/cli — `scope init` command implementation
  *
@@ -533,4 +542,4 @@ declare function resolveTokenFilePath(fileFlag?: string): string;
  */
 declare function createTokensExportCommand(): Command;
 
-export { CI_EXIT, type CausalityLink, type CiCheckName, type CiCheckResult, type CiExitCode, type CiOptions, type CiResult, type ComponentHookProfile, type HookHeuristicFlag, type HookProfile, type HooksProfilingResult, type InitOptions, type InitResult, type InteractionProfile, type InteractionStep$1 as InteractionStep, type InteractionTiming, type LayoutShiftData, type ListRow, type ProfileHeuristicFlag, type QueryRow, type ReactScopeConfig, type RenderEvent, type RenderTrigger, type RendersAnalysisResult, type ScopeCLIOptions, createCiCommand, createInitCommand, createInstrumentCommand, createManifestCommand, createProgram, createTokensCommand, createTokensExportCommand, formatCiReport, isTTY, matchGlob, resolveTokenFilePath, runCi, runInit };
+export { CI_EXIT, type CausalityLink, type CiCheckName, type CiCheckResult, type CiExitCode, type CiOptions, type CiResult, type ComponentHookProfile, type HookHeuristicFlag, type HookProfile, type HooksProfilingResult, type InitOptions, type InitResult, type InteractionProfile, type InteractionStep$1 as InteractionStep, type InteractionTiming, type LayoutShiftData, type ListRow, type ProfileHeuristicFlag, type QueryRow, type ReactScopeConfig, type RenderEvent, type RenderTrigger, type RendersAnalysisResult, type ScopeCLIOptions, createCiCommand, createDoctorCommand, createInitCommand, createInstrumentCommand, createManifestCommand, createProgram, createTokensCommand, createTokensExportCommand, formatCiReport, isTTY, matchGlob, resolveTokenFilePath, runCi, runInit };

package/dist/index.d.ts

@@ -116,6 +116,15 @@ declare function formatCiReport(result: CiResult): string;
  */
 declare function createCiCommand(): Command;
 
+/**
+ * doctor-commands.ts
+ *
+ * `scope doctor` — health check that validates the current project's Scope
+ * setup and reports issues with config, tokens, globalCSS, and manifest staleness.
+ */
+
+declare function createDoctorCommand(): Command;
+
 /**
  * @agent-scope/cli — `scope init` command implementation
  *
@@ -533,4 +542,4 @@ declare function resolveTokenFilePath(fileFlag?: string): string;
  */
 declare function createTokensExportCommand(): Command;
 
-export { CI_EXIT, type CausalityLink, type CiCheckName, type CiCheckResult, type CiExitCode, type CiOptions, type CiResult, type ComponentHookProfile, type HookHeuristicFlag, type HookProfile, type HooksProfilingResult, type InitOptions, type InitResult, type InteractionProfile, type InteractionStep$1 as InteractionStep, type InteractionTiming, type LayoutShiftData, type ListRow, type ProfileHeuristicFlag, type QueryRow, type ReactScopeConfig, type RenderEvent, type RenderTrigger, type RendersAnalysisResult, type ScopeCLIOptions, createCiCommand, createInitCommand, createInstrumentCommand, createManifestCommand, createProgram, createTokensCommand, createTokensExportCommand, formatCiReport, isTTY, matchGlob, resolveTokenFilePath, runCi, runInit };
+export { CI_EXIT, type CausalityLink, type CiCheckName, type CiCheckResult, type CiExitCode, type CiOptions, type CiResult, type ComponentHookProfile, type HookHeuristicFlag, type HookProfile, type HooksProfilingResult, type InitOptions, type InitResult, type InteractionProfile, type InteractionStep$1 as InteractionStep, type InteractionTiming, type LayoutShiftData, type ListRow, type ProfileHeuristicFlag, type QueryRow, type ReactScopeConfig, type RenderEvent, type RenderTrigger, type RendersAnalysisResult, type ScopeCLIOptions, createCiCommand, createDoctorCommand, createInitCommand, createInstrumentCommand, createManifestCommand, createProgram, createTokensCommand, createTokensExportCommand, formatCiReport, isTTY, matchGlob, resolveTokenFilePath, runCi, runInit };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { existsSync, writeFileSync, readFileSync, mkdirSync, appendFileSync, readdirSync, rmSync, statSync, createReadStream } from 'fs';
+import { existsSync, writeFileSync, mkdirSync, readFileSync, statSync, appendFileSync, readdirSync, rmSync, createReadStream } from 'fs';
 import { resolve, join, extname, dirname } from 'path';
 import { generateManifest } from '@agent-scope/manifest';
 import { SpriteSheetGenerator, safeRender, BrowserPool, ALL_CONTEXT_IDS, contextAxis, stressAxis, ALL_STRESS_IDS, RenderMatrix, SatoriRenderer } from '@agent-scope/render';
@@ -517,10 +517,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;
@@ -989,6 +989,157 @@ function createCiCommand() {
     }
   );
 }
+function collectSourceFiles(dir) {
+  if (!existsSync(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 = resolve(cwd, "reactscope.config.json");
+  if (!existsSync(configPath)) {
+    return {
+      name: "config",
+      status: "error",
+      message: "reactscope.config.json not found \u2014 run `scope init`"
+    };
+  }
+  try {
+    JSON.parse(readFileSync(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 = resolve(cwd, "reactscope.config.json");
+  let tokensPath = resolve(cwd, "reactscope.tokens.json");
+  if (existsSync(configPath)) {
+    try {
+      const cfg = JSON.parse(readFileSync(configPath, "utf-8"));
+      if (cfg.tokens?.file) tokensPath = resolve(cwd, cfg.tokens.file);
+    } catch {
+    }
+  }
+  if (!existsSync(tokensPath)) {
+    return {
+      name: "tokens",
+      status: "warn",
+      message: `Token file not found at ${tokensPath} \u2014 run \`scope init\``
+    };
+  }
+  try {
+    const raw = JSON.parse(readFileSync(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 = resolve(cwd, "reactscope.config.json");
+  let globalCss = [];
+  if (existsSync(configPath)) {
+    try {
+      const cfg = JSON.parse(readFileSync(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) => !existsSync(resolve(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 = resolve(cwd, ".reactscope", "manifest.json");
+  if (!existsSync(manifestPath)) {
+    return {
+      name: "manifest",
+      status: "warn",
+      message: "Manifest not found \u2014 run `scope manifest generate`"
+    };
+  }
+  const manifestMtime = statSync(manifestPath).mtimeMs;
+  const sourceDir = resolve(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 Command("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");
+    }
+  });
+}
 function hasConfigFile(dir, stem) {
   if (!existsSync(dir)) return false;
   try {
@@ -1199,9 +1350,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());
     });
   });
 }
@@ -1276,7 +1427,7 @@ function extractTailwindTokens(tokenSources) {
             }
           }
           if (Object.keys(colorTokens).length > 0) {
-            tokens["color"] = colorTokens;
+            tokens.color = colorTokens;
           }
         }
       }
@@ -1289,7 +1440,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*\}/);
@@ -1302,7 +1453,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*\}/);
@@ -1313,7 +1464,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;
@@ -1432,7 +1583,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 generateManifest(manifestConfig);
+    const manifestCount = Object.keys(manifest.components).length;
+    const manifestOutPath = join(rootDir, config.output.dir, "manifest.json");
+    mkdirSync(join(rootDir, config.output.dir), { recursive: true });
+    writeFileSync(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.",
@@ -3346,7 +3518,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 });
@@ -3359,49 +3531,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);
@@ -3482,6 +3752,11 @@ Available: ${available}`
         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,
@@ -3735,17 +4010,31 @@ function registerRenderAll(renderCmd) {
         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 = resolve(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 safeRender(
-            () => renderer.renderCell({}, descriptor.complexityClass),
+            () => renderer.renderCell(renderProps, descriptor.complexityClass),
             {
-              props: {},
+              props: renderProps,
               sourceLocation: {
                 file: descriptor.filePath,
                 line: descriptor.loc.start,
@@ -3785,6 +4074,77 @@ function registerRenderAll(renderCmd) {
           writeFileSync(pngPath, result.screenshot);
           const jsonPath = resolve(outputDir, `${name}.json`);
           writeFileSync(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(readFileSync(jsonPath, "utf-8"));
+              existingJson.cells = matrixCells;
+              existingJson.axisLabels = [scenarioAxis.values];
+              writeFileSync(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)
@@ -3808,6 +4168,14 @@ function registerRenderAll(renderCmd) {
         }
         await Promise.all(workers);
         await shutdownPool3();
+        const compStylesPath = resolve(
+          resolve(process.cwd(), opts.outputDir),
+          "..",
+          "compliance-styles.json"
+        );
+        writeFileSync(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}
@@ -4007,12 +4375,12 @@ async function runBaseline(options = {}) {
   mkdirSync(rendersDir, { recursive: true });
   let manifest;
   if (manifestPath !== void 0) {
-    const { readFileSync: readFileSync13 } = await import('fs');
+    const { readFileSync: readFileSync14 } = await import('fs');
     const absPath = resolve(rootDir, manifestPath);
     if (!existsSync(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 {
@@ -6200,6 +6568,7 @@ function createProgram(options = {}) {
   program.addCommand(createInstrumentCommand());
   program.addCommand(createInitCommand());
   program.addCommand(createCiCommand());
+  program.addCommand(createDoctorCommand());
   const existingReportCmd = program.commands.find((c) => c.name() === "report");
   if (existingReportCmd !== void 0) {
     registerBaselineSubCommand(existingReportCmd);
@@ -6210,6 +6579,6 @@ function createProgram(options = {}) {
   return program;
 }
 
-export { CI_EXIT, createCiCommand, createInitCommand, createInstrumentCommand, createManifestCommand, createProgram, createTokensCommand, createTokensExportCommand, formatCiReport, isTTY, matchGlob, resolveTokenFilePath2 as resolveTokenFilePath, runCi, runInit };
+export { CI_EXIT, createCiCommand, createDoctorCommand, createInitCommand, createInstrumentCommand, createManifestCommand, createProgram, createTokensCommand, createTokensExportCommand, formatCiReport, isTTY, matchGlob, resolveTokenFilePath2 as resolveTokenFilePath, runCi, runInit };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map