npm - @agent-scope/cli - Versions diffs - 1.17.2 → 1.18.0 - Mend

@agent-scope/cli 1.17.2 → 1.18.0

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

Files changed (7) hide show

package/dist/cli.js CHANGED Viewed

@@ -61,9 +61,9 @@ import { Command } from "commander";
 // src/component-bundler.ts
 import { dirname } from "path";
 import * as esbuild from "esbuild";
-async function buildComponentHarness(filePath, componentName, props, viewportWidth, projectCss) {
+async function buildComponentHarness(filePath, componentName, props, viewportWidth, projectCss, wrapperScript) {
   const bundledScript = await bundleComponentToIIFE(filePath, componentName, props);
-  return wrapInHtml(bundledScript, viewportWidth, projectCss);
+  return wrapInHtml(bundledScript, viewportWidth, projectCss, wrapperScript);
 }
 async function bundleComponentToIIFE(filePath, componentName, props) {
   const propsJson = JSON.stringify(props).replace(/<\/script>/gi, "<\\/script>");
@@ -99,7 +99,12 @@ import { createElement } from "react";
       window.__SCOPE_RENDER_COMPLETE__ = true;
       return;
     }
-    createRoot(rootEl).render(createElement(Component, props));
+    // If a scope file wrapper was injected, use it to wrap the component
+    var Wrapper = (window).__SCOPE_WRAPPER__;
+    var element = Wrapper
+      ? createElement(Wrapper, null, createElement(Component, props))
+      : createElement(Component, props);
+    createRoot(rootEl).render(element);
     // Use requestAnimationFrame to let React flush the render
     requestAnimationFrame(function() {
       window.__SCOPE_RENDER_COMPLETE__ = true;
@@ -149,10 +154,11 @@ ${msg}`);
   }
   return outputFile.text;
 }
-function wrapInHtml(bundledScript, viewportWidth, projectCss) {
+function wrapInHtml(bundledScript, viewportWidth, projectCss, wrapperScript) {
   const projectStyleBlock = projectCss != null && projectCss.length > 0 ? `<style id="scope-project-css">
 ${projectCss.replace(/<\/style>/gi, "<\\/style>")}
 </style>` : "";
+  const wrapperScriptBlock = wrapperScript != null && wrapperScript.length > 0 ? `<script id="scope-wrapper-script">${wrapperScript}</script>` : "";
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -167,6 +173,7 @@ ${projectCss.replace(/<\/style>/gi, "<\\/style>")}
 </head>
 <body>
   <div id="scope-root" data-reactscope-root></div>
+  ${wrapperScriptBlock}
   <script>${bundledScript}</script>
 </body>
 </html>`;
@@ -535,16 +542,16 @@ async function getTailwindCompiler(cwd) {
     from: entryPath,
     loadStylesheet
   });
-  const build2 = result.build.bind(result);
-  compilerCache = { cwd, build: build2 };
-  return build2;
+  const build3 = result.build.bind(result);
+  compilerCache = { cwd, build: build3 };
+  return build3;
 }
 async function getCompiledCssForClasses(cwd, classes) {
-  const build2 = await getTailwindCompiler(cwd);
-  if (build2 === null) return null;
+  const build3 = await getTailwindCompiler(cwd);
+  if (build3 === null) return null;
   const deduped = [...new Set(classes)].filter(Boolean);
   if (deduped.length === 0) return null;
-  return build2(deduped);
+  return build3(deduped);
 }
 // src/ci/commands.ts
@@ -1174,9 +1181,9 @@ function createRL() {
   });
 }
 async function ask(rl, question) {
-  return new Promise((resolve17) => {
+  return new Promise((resolve18) => {
     rl.question(question, (answer) => {
-      resolve17(answer.trim());
+      resolve18(answer.trim());
     });
   });
 }
@@ -1326,6 +1333,7 @@ function createInitCommand() {
 // src/instrument/renders.ts
 import { resolve as resolve7 } from "path";
+import { getBrowserEntryScript as getBrowserEntryScript5 } from "@agent-scope/playwright";
 import { BrowserPool as BrowserPool2 } from "@agent-scope/render";
 import { Command as Command5 } from "commander";
@@ -1765,8 +1773,15 @@ async function runHooksProfiling(componentName, filePath, props) {
   try {
     const context = await browser.newContext();
     const page = await context.newPage();
-    await page.addInitScript({ content: getBrowserEntryScript2() });
-    const htmlHarness = await buildComponentHarness(filePath, componentName, props, 1280);
+    const scopeRuntime = getBrowserEntryScript2();
+    const htmlHarness = await buildComponentHarness(
+      filePath,
+      componentName,
+      props,
+      1280,
+      void 0,
+      scopeRuntime
+    );
     await page.setContent(htmlHarness, { waitUntil: "load" });
     await page.waitForFunction(
       () => {
@@ -1860,6 +1875,7 @@ Available: ${available}`
 // src/instrument/profile.ts
 import { resolve as resolve5 } from "path";
+import { getBrowserEntryScript as getBrowserEntryScript3 } from "@agent-scope/playwright";
 import { Command as Cmd2 } from "commander";
 import { chromium as chromium3 } from "playwright";
 var MANIFEST_PATH3 = ".reactscope/manifest.json";
@@ -2030,7 +2046,15 @@ async function runInteractionProfile(componentName, filePath, props, interaction
   try {
     const context = await browser.newContext();
     const page = await context.newPage();
-    const htmlHarness = await buildComponentHarness(filePath, componentName, props, 1280);
+    const scopeRuntime = getBrowserEntryScript3();
+    const htmlHarness = await buildComponentHarness(
+      filePath,
+      componentName,
+      props,
+      1280,
+      void 0,
+      scopeRuntime
+    );
     await page.setContent(htmlHarness, { waitUntil: "load" });
     await page.waitForFunction(
       () => {
@@ -2154,7 +2178,7 @@ Available: ${available}`
 // src/instrument/tree.ts
 import { resolve as resolve6 } from "path";
-import { getBrowserEntryScript as getBrowserEntryScript3 } from "@agent-scope/playwright";
+import { getBrowserEntryScript as getBrowserEntryScript4 } from "@agent-scope/playwright";
 import { Command as Command4 } from "commander";
 import { chromium as chromium4 } from "playwright";
 var MANIFEST_PATH4 = ".reactscope/manifest.json";
@@ -2377,12 +2401,14 @@ async function runInstrumentTree(options) {
       viewport: { width: DEFAULT_VIEWPORT_WIDTH, height: DEFAULT_VIEWPORT_HEIGHT }
     });
     const page = await context.newPage();
-    await page.addInitScript({ content: getBrowserEntryScript3() });
+    const scopeRuntime = getBrowserEntryScript4();
     const htmlHarness = await buildComponentHarness(
       filePath,
       componentName,
       {},
-      DEFAULT_VIEWPORT_WIDTH
+      DEFAULT_VIEWPORT_WIDTH,
+      void 0,
+      scopeRuntime
     );
     await page.setContent(htmlHarness, { waitUntil: "load" });
     await page.waitForFunction(
@@ -2830,13 +2856,20 @@ Available: ${available}`
   }
   const rootDir = process.cwd();
   const filePath = resolve7(rootDir, descriptor.filePath);
-  const htmlHarness = await buildComponentHarness(filePath, options.componentName, {}, 1280);
+  const preScript = getBrowserEntryScript5() + "\n" + buildInstrumentationScript();
+  const htmlHarness = await buildComponentHarness(
+    filePath,
+    options.componentName,
+    {},
+    1280,
+    void 0,
+    preScript
+  );
   const pool = await getPool2();
   const slot = await pool.acquire();
   const { page } = slot;
   const startMs = performance.now();
   try {
-    await page.addInitScript(buildInstrumentationScript());
     await page.setContent(htmlHarness, { waitUntil: "load" });
     await page.waitForFunction(
       () => window.__SCOPE_RENDER_COMPLETE__ === true,
@@ -2968,8 +3001,8 @@ function createInstrumentCommand() {
 }
 // src/render-commands.ts
-import { mkdirSync as mkdirSync3, writeFileSync as writeFileSync5 } from "fs";
-import { resolve as resolve8 } from "path";
+import { mkdirSync as mkdirSync4, writeFileSync as writeFileSync5 } from "fs";
+import { resolve as resolve9 } from "path";
 import {
   ALL_CONTEXT_IDS,
   ALL_STRESS_IDS,
@@ -2981,6 +3014,129 @@ import {
   stressAxis
 } from "@agent-scope/render";
 import { Command as Command6 } from "commander";
+// src/scope-file.ts
+import { existsSync as existsSync6, 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 * as esbuild2 from "esbuild";
+var SCOPE_EXTENSIONS = [".scope.tsx", ".scope.ts", ".scope.jsx", ".scope.js"];
+function findScopeFile(componentFilePath) {
+  const dir = dirname2(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;
+  }
+  return null;
+}
+async function loadScopeFile(scopeFilePath) {
+  const tmpDir = join3(tmpdir(), `scope-file-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+  mkdirSync3(tmpDir, { recursive: true });
+  const outFile = join3(tmpDir, "scope-file.cjs");
+  try {
+    const result = await esbuild2.build({
+      entryPoints: [scopeFilePath],
+      bundle: true,
+      format: "cjs",
+      platform: "node",
+      target: "node18",
+      outfile: outFile,
+      write: true,
+      jsx: "automatic",
+      jsxImportSource: "react",
+      // Externalize React — we don't need to execute JSX, just extract plain data
+      external: ["react", "react-dom", "react/jsx-runtime"],
+      define: {
+        "process.env.NODE_ENV": '"development"'
+      },
+      logLevel: "silent"
+    });
+    if (result.errors.length > 0) {
+      const msg = result.errors.map((e) => `${e.text}${e.location ? ` (${e.location.file}:${e.location.line})` : ""}`).join("\n");
+      throw new Error(`Failed to bundle scope file ${scopeFilePath}:
+${msg}`);
+    }
+    const req = createRequire2(import.meta.url);
+    delete req.cache[resolve8(outFile)];
+    const mod = req(outFile);
+    const scenarios = extractScenarios(mod, scopeFilePath);
+    const hasWrapper = typeof mod.wrapper === "function" || typeof mod.default?.wrapper === "function";
+    return { filePath: scopeFilePath, scenarios, hasWrapper };
+  } finally {
+    try {
+      rmSync(tmpDir, { recursive: true, force: true });
+    } catch {
+    }
+  }
+}
+async function loadScopeFileForComponent(componentFilePath) {
+  const scopeFilePath = findScopeFile(componentFilePath);
+  if (scopeFilePath === null) return null;
+  return loadScopeFile(scopeFilePath);
+}
+function extractScenarios(mod, filePath) {
+  const raw = mod.scenarios ?? mod.default?.scenarios;
+  if (raw === void 0) return {};
+  if (typeof raw !== "object" || raw === null || Array.isArray(raw)) {
+    console.warn(`[scope] ${filePath}: "scenarios" export is not a plain object \u2014 ignoring.`);
+    return {};
+  }
+  const result = {};
+  for (const [name, props] of Object.entries(raw)) {
+    if (typeof props !== "object" || props === null || Array.isArray(props)) {
+      console.warn(`[scope] ${filePath}: scenario "${name}" is not a plain object \u2014 skipping.`);
+      continue;
+    }
+    result[name] = props;
+  }
+  return result;
+}
+async function buildWrapperScript(scopeFilePath) {
+  const wrapperEntry = (
+    /* ts */
+    `
+import * as __scopeMod from ${JSON.stringify(scopeFilePath)};
+// Expose the wrapper on window so the harness can access it
+var wrapper =
+  __scopeMod.wrapper ??
+  (__scopeMod.default && __scopeMod.default.wrapper) ??
+  null;
+window.__SCOPE_WRAPPER__ = wrapper;
+`
+  );
+  const result = await esbuild2.build({
+    stdin: {
+      contents: wrapperEntry,
+      resolveDir: dirname2(scopeFilePath),
+      loader: "tsx",
+      sourcefile: "__scope_wrapper_entry__.tsx"
+    },
+    bundle: true,
+    format: "iife",
+    platform: "browser",
+    target: "es2020",
+    write: false,
+    jsx: "automatic",
+    jsxImportSource: "react",
+    external: [],
+    define: {
+      "process.env.NODE_ENV": '"development"',
+      global: "globalThis"
+    },
+    logLevel: "silent"
+  });
+  if (result.errors.length > 0) {
+    const msg = result.errors.map((e) => `${e.text}${e.location ? ` (${e.location.file}:${e.location.line})` : ""}`).join("\n");
+    throw new Error(`Failed to build wrapper script from ${scopeFilePath}:
+${msg}`);
+  }
+  return result.outputFiles?.[0]?.text ?? "";
+}
+// src/render-commands.ts
 var MANIFEST_PATH6 = ".reactscope/manifest.json";
 var DEFAULT_OUTPUT_DIR = ".reactscope/renders";
 var _pool3 = null;
@@ -3001,7 +3157,7 @@ async function shutdownPool3() {
     _pool3 = null;
   }
 }
-function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
+function buildRenderer(filePath, componentName, viewportWidth, viewportHeight, wrapperScript) {
   const satori = new SatoriRenderer({
     defaultViewport: { width: viewportWidth, height: viewportHeight }
   });
@@ -3014,7 +3170,10 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
         filePath,
         componentName,
         props,
-        viewportWidth
+        viewportWidth,
+        void 0,
+        // projectCss (handled separately)
+        wrapperScript
       );
       const slot = await pool.acquire();
       const { page } = slot;
@@ -3105,8 +3264,37 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
     }
   };
 }
+function buildScenarioMap(opts, scopeData) {
+  if (opts.scenario !== void 0) {
+    if (scopeData === null) {
+      throw new Error(`--scenario "${opts.scenario}" requires a .scope file next to the component`);
+    }
+    const props = scopeData.scenarios[opts.scenario];
+    if (props === void 0) {
+      const available = Object.keys(scopeData.scenarios).join(", ") || "(none)";
+      throw new Error(
+        `Scenario "${opts.scenario}" not found in scope file.
+Available: ${available}`
+      );
+    }
+    return { [opts.scenario]: props };
+  }
+  if (opts.props !== void 0) {
+    let parsed;
+    try {
+      parsed = JSON.parse(opts.props);
+    } catch {
+      throw new Error(`Invalid props JSON: ${opts.props}`);
+    }
+    return { __default__: parsed };
+  }
+  if (scopeData !== null && Object.keys(scopeData.scenarios).length > 0) {
+    return scopeData.scenarios;
+  }
+  return { __default__: {} };
+}
 function registerRenderSingle(renderCmd) {
-  renderCmd.command("component <component>", { isDefault: true }).description("Render a single component to PNG or JSON").option("--props <json>", `Inline props JSON, e.g. '{"variant":"primary"}'`).option("--viewport <WxH>", "Viewport size e.g. 1280x720", "375x812").option("--theme <name>", "Theme name from the token system").option("-o, --output <path>", "Write PNG to file instead of stdout").option("--format <fmt>", "Output format: png or json (default: auto)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH6).action(
+  renderCmd.command("component <component>", { isDefault: true }).description("Render a single component to PNG or JSON").option("--props <json>", `Inline props JSON, e.g. '{"variant":"primary"}'`).option("--scenario <name>", "Run a named scenario from the component's .scope file").option("--viewport <WxH>", "Viewport size e.g. 1280x720", "375x812").option("--theme <name>", "Theme name from the token system").option("-o, --output <path>", "Write PNG to file instead of stdout").option("--format <fmt>", "Output format: png or json (default: auto)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH6).action(
     async (componentName, opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -3118,80 +3306,71 @@ function registerRenderSingle(renderCmd) {
 Available: ${available}`
           );
         }
-        let props = {};
-        if (opts.props !== void 0) {
-          try {
-            props = JSON.parse(opts.props);
-          } catch {
-            throw new Error(`Invalid props JSON: ${opts.props}`);
-          }
-        }
         const { width, height } = parseViewport(opts.viewport);
         const rootDir = process.cwd();
-        const filePath = resolve8(rootDir, descriptor.filePath);
-        const renderer = buildRenderer(filePath, componentName, width, height);
+        const filePath = resolve9(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 renderer = buildRenderer(filePath, componentName, width, height, wrapperScript);
         process.stderr.write(
           `Rendering ${componentName} [${descriptor.complexityClass}] at ${width}\xD7${height}\u2026
 `
         );
-        const outcome = await safeRender2(
-          () => renderer.renderCell(props, descriptor.complexityClass),
-          {
-            props,
-            sourceLocation: {
-              file: descriptor.filePath,
-              line: descriptor.loc.start,
-              column: 0
+        const fmt2 = resolveSingleFormat(opts.format);
+        let anyFailed = false;
+        for (const [scenarioName, props] of Object.entries(scenarios)) {
+          const isNamed = scenarioName !== "__default__";
+          const label = isNamed ? `${componentName}:${scenarioName}` : componentName;
+          const outcome = await safeRender2(
+            () => renderer.renderCell(props, descriptor.complexityClass),
+            {
+              props,
+              sourceLocation: {
+                file: descriptor.filePath,
+                line: descriptor.loc.start,
+                column: 0
+              }
             }
-          }
-        );
-        await shutdownPool3();
-        if (outcome.crashed) {
-          process.stderr.write(`\u2717 Render failed: ${outcome.error.message}
+          );
+          if (outcome.crashed) {
+            process.stderr.write(`\u2717 ${label} render failed: ${outcome.error.message}
 `);
-          const hintList = outcome.error.heuristicFlags.join(", ");
-          if (hintList.length > 0) {
-            process.stderr.write(`  Hints: ${hintList}
+            const hintList = outcome.error.heuristicFlags.join(", ");
+            if (hintList.length > 0) {
+              process.stderr.write(`  Hints: ${hintList}
 `);
+            }
+            anyFailed = true;
+            continue;
           }
-          process.exit(1);
-        }
-        const result = outcome.result;
-        if (opts.output !== void 0) {
-          const outPath = resolve8(process.cwd(), opts.output);
-          writeFileSync5(outPath, result.screenshot);
-          process.stdout.write(
-            `\u2713 ${componentName} \u2192 ${opts.output} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
+          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);
+            writeFileSync5(outPath, result.screenshot);
+            process.stdout.write(
+              `\u2713 ${label} \u2192 ${opts.output} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
 `
-          );
-          return;
-        }
-        const fmt2 = resolveSingleFormat(opts.format);
-        if (fmt2 === "json") {
-          const json = formatRenderJson(componentName, props, result);
-          process.stdout.write(`${JSON.stringify(json, null, 2)}
+            );
+          } else if (fmt2 === "json") {
+            const json = formatRenderJson(label, props, result);
+            process.stdout.write(`${JSON.stringify(json, null, 2)}
 `);
-        } else if (fmt2 === "file") {
-          const dir = resolve8(process.cwd(), DEFAULT_OUTPUT_DIR);
-          mkdirSync3(dir, { recursive: true });
-          const outPath = resolve8(dir, `${componentName}.png`);
-          writeFileSync5(outPath, result.screenshot);
-          const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}.png`;
-          process.stdout.write(
-            `\u2713 ${componentName} \u2192 ${relPath} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
-`
-          );
-        } else {
-          const dir = resolve8(process.cwd(), DEFAULT_OUTPUT_DIR);
-          mkdirSync3(dir, { recursive: true });
-          const outPath = resolve8(dir, `${componentName}.png`);
-          writeFileSync5(outPath, result.screenshot);
-          const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}.png`;
-          process.stdout.write(
-            `\u2713 ${componentName} \u2192 ${relPath} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
+          } else {
+            const dir = resolve9(process.cwd(), DEFAULT_OUTPUT_DIR);
+            mkdirSync4(dir, { recursive: true });
+            const outPath = resolve9(dir, outFileName);
+            writeFileSync5(outPath, result.screenshot);
+            const relPath = `${DEFAULT_OUTPUT_DIR}/${outFileName}`;
+            process.stdout.write(
+              `\u2713 ${label} \u2192 ${relPath} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
 `
-          );
+            );
+          }
         }
+        await shutdownPool3();
+        if (anyFailed) process.exit(1);
       } catch (err) {
         await shutdownPool3();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
@@ -3220,7 +3399,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 = resolve8(rootDir, descriptor.filePath);
+        const filePath = resolve9(rootDir, descriptor.filePath);
         const renderer = buildRenderer(filePath, componentName, width, height);
         const axes = [];
         if (opts.axes !== void 0) {
@@ -3287,7 +3466,7 @@ Available: ${available}`
           const { SpriteSheetGenerator: SpriteSheetGenerator2 } = await import("@agent-scope/render");
           const gen = new SpriteSheetGenerator2();
           const sheet = await gen.generate(result);
-          const spritePath = resolve8(process.cwd(), opts.sprite);
+          const spritePath = resolve9(process.cwd(), opts.sprite);
           writeFileSync5(spritePath, sheet.png);
           process.stderr.write(`Sprite sheet saved to ${spritePath}
 `);
@@ -3297,9 +3476,9 @@ Available: ${available}`
           const { SpriteSheetGenerator: SpriteSheetGenerator2 } = await import("@agent-scope/render");
           const gen = new SpriteSheetGenerator2();
           const sheet = await gen.generate(result);
-          const dir = resolve8(process.cwd(), DEFAULT_OUTPUT_DIR);
-          mkdirSync3(dir, { recursive: true });
-          const outPath = resolve8(dir, `${componentName}-matrix.png`);
+          const dir = resolve9(process.cwd(), DEFAULT_OUTPUT_DIR);
+          mkdirSync4(dir, { recursive: true });
+          const outPath = resolve9(dir, `${componentName}-matrix.png`);
           writeFileSync5(outPath, sheet.png);
           const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}-matrix.png`;
           process.stdout.write(
@@ -3343,8 +3522,8 @@ function registerRenderAll(renderCmd) {
           return;
         }
         const concurrency = Math.max(1, parseInt(opts.concurrency, 10) || 4);
-        const outputDir = resolve8(process.cwd(), opts.outputDir);
-        mkdirSync3(outputDir, { recursive: true });
+        const outputDir = resolve9(process.cwd(), opts.outputDir);
+        mkdirSync4(outputDir, { recursive: true });
         const rootDir = process.cwd();
         process.stderr.write(`Rendering ${total} components (concurrency: ${concurrency})\u2026
 `);
@@ -3353,7 +3532,7 @@ function registerRenderAll(renderCmd) {
         const renderOne = async (name) => {
           const descriptor = manifest.components[name];
           if (descriptor === void 0) return;
-          const filePath = resolve8(rootDir, descriptor.filePath);
+          const filePath = resolve9(rootDir, descriptor.filePath);
           const renderer = buildRenderer(filePath, name, 375, 812);
           const outcome = await safeRender2(
             () => renderer.renderCell({}, descriptor.complexityClass),
@@ -3376,7 +3555,7 @@ function registerRenderAll(renderCmd) {
               success: false,
               errorMessage: outcome.error.message
             });
-            const errPath = resolve8(outputDir, `${name}.error.json`);
+            const errPath = resolve9(outputDir, `${name}.error.json`);
             writeFileSync5(
               errPath,
               JSON.stringify(
@@ -3394,9 +3573,9 @@ function registerRenderAll(renderCmd) {
           }
           const result = outcome.result;
           results.push({ name, renderTimeMs: result.renderTimeMs, success: true });
-          const pngPath = resolve8(outputDir, `${name}.png`);
+          const pngPath = resolve9(outputDir, `${name}.png`);
           writeFileSync5(pngPath, result.screenshot);
-          const jsonPath = resolve8(outputDir, `${name}.json`);
+          const jsonPath = resolve9(outputDir, `${name}.json`);
           writeFileSync5(jsonPath, JSON.stringify(formatRenderJson(name, {}, result), null, 2));
           if (isTTY()) {
             process.stdout.write(
@@ -3469,8 +3648,8 @@ function createRenderCommand() {
 }
 // src/report/baseline.ts
-import { existsSync as existsSync6, mkdirSync as mkdirSync4, rmSync, writeFileSync as writeFileSync6 } from "fs";
-import { resolve as resolve9 } from "path";
+import { existsSync as existsSync7, 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 { BrowserPool as BrowserPool4, safeRender as safeRender3 } from "@agent-scope/render";
 import { ComplianceEngine as ComplianceEngine2, TokenResolver as TokenResolver2 } from "@agent-scope/tokens";
@@ -3619,17 +3798,17 @@ async function runBaseline(options = {}) {
   } = options;
   const startTime = performance.now();
   const rootDir = process.cwd();
-  const baselineDir = resolve9(rootDir, outputDir);
-  const rendersDir = resolve9(baselineDir, "renders");
-  if (existsSync6(baselineDir)) {
-    rmSync(baselineDir, { recursive: true, force: true });
+  const baselineDir = resolve10(rootDir, outputDir);
+  const rendersDir = resolve10(baselineDir, "renders");
+  if (existsSync7(baselineDir)) {
+    rmSync2(baselineDir, { recursive: true, force: true });
   }
-  mkdirSync4(rendersDir, { recursive: true });
+  mkdirSync5(rendersDir, { recursive: true });
   let manifest;
   if (manifestPath !== void 0) {
     const { readFileSync: readFileSync12 } = await import("fs");
-    const absPath = resolve9(rootDir, manifestPath);
-    if (!existsSync6(absPath)) {
+    const absPath = resolve10(rootDir, manifestPath);
+    if (!existsSync7(absPath)) {
       throw new Error(`Manifest not found at ${absPath}.`);
     }
     manifest = JSON.parse(readFileSync12(absPath, "utf-8"));
@@ -3642,7 +3821,7 @@ async function runBaseline(options = {}) {
     process.stderr.write(`Found ${count} components.
 `);
   }
-  writeFileSync6(resolve9(baselineDir, "manifest.json"), JSON.stringify(manifest, null, 2), "utf-8");
+  writeFileSync6(resolve10(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));
@@ -3663,7 +3842,7 @@ async function runBaseline(options = {}) {
       auditedAt: (/* @__PURE__ */ new Date()).toISOString()
     };
     writeFileSync6(
-      resolve9(baselineDir, "compliance.json"),
+      resolve10(baselineDir, "compliance.json"),
       JSON.stringify(emptyReport, null, 2),
       "utf-8"
     );
@@ -3684,7 +3863,7 @@ async function runBaseline(options = {}) {
   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 outcome = await safeRender3(
       () => renderComponent2(filePath, name, {}, viewportWidth, viewportHeight),
       {
@@ -3703,7 +3882,7 @@ async function runBaseline(options = {}) {
     }
     if (outcome.crashed) {
       failureCount++;
-      const errPath = resolve9(rendersDir, `${name}.error.json`);
+      const errPath = resolve10(rendersDir, `${name}.error.json`);
       writeFileSync6(
         errPath,
         JSON.stringify(
@@ -3721,10 +3900,10 @@ async function runBaseline(options = {}) {
       return;
     }
     const result = outcome.result;
-    writeFileSync6(resolve9(rendersDir, `${name}.png`), result.screenshot);
+    writeFileSync6(resolve10(rendersDir, `${name}.png`), result.screenshot);
     const jsonOutput = formatRenderJson(name, {}, result);
     writeFileSync6(
-      resolve9(rendersDir, `${name}.json`),
+      resolve10(rendersDir, `${name}.json`),
       JSON.stringify(jsonOutput, null, 2),
       "utf-8"
     );
@@ -3752,7 +3931,7 @@ async function runBaseline(options = {}) {
   const engine = new ComplianceEngine2(resolver);
   const batchReport = engine.auditBatch(computedStylesMap);
   writeFileSync6(
-    resolve9(baselineDir, "compliance.json"),
+    resolve10(baselineDir, "compliance.json"),
     JSON.stringify(batchReport, null, 2),
     "utf-8"
   );
@@ -3795,21 +3974,21 @@ function registerBaselineSubCommand(reportCmd) {
 }
 // src/report/diff.ts
-import { existsSync as existsSync7, readFileSync as readFileSync6, writeFileSync as writeFileSync7 } from "fs";
-import { resolve as resolve10 } from "path";
+import { existsSync as existsSync8, readFileSync as readFileSync6, writeFileSync as writeFileSync7 } from "fs";
+import { resolve as resolve11 } from "path";
 import { generateManifest as generateManifest4 } 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 = resolve10(baselineDir, "compliance.json");
-  if (!existsSync7(compliancePath)) return null;
+  const compliancePath = resolve11(baselineDir, "compliance.json");
+  if (!existsSync8(compliancePath)) return null;
   const raw = JSON.parse(readFileSync6(compliancePath, "utf-8"));
   return raw;
 }
 function loadBaselineRenderJson2(baselineDir, componentName) {
-  const jsonPath = resolve10(baselineDir, "renders", `${componentName}.json`);
-  if (!existsSync7(jsonPath)) return null;
+  const jsonPath = resolve11(baselineDir, "renders", `${componentName}.json`);
+  if (!existsSync8(jsonPath)) return null;
   return JSON.parse(readFileSync6(jsonPath, "utf-8"));
 }
 var _pool5 = null;
@@ -3977,14 +4156,14 @@ async function runDiff(options = {}) {
   } = options;
   const startTime = performance.now();
   const rootDir = process.cwd();
-  const baselineDir = resolve10(rootDir, baselineDirRaw);
-  if (!existsSync7(baselineDir)) {
+  const baselineDir = resolve11(rootDir, baselineDirRaw);
+  if (!existsSync8(baselineDir)) {
     throw new Error(
       `Baseline directory not found at "${baselineDir}". Run \`scope report baseline\` first to create a baseline snapshot.`
     );
   }
-  const baselineManifestPath = resolve10(baselineDir, "manifest.json");
-  if (!existsSync7(baselineManifestPath)) {
+  const baselineManifestPath = resolve11(baselineDir, "manifest.json");
+  if (!existsSync8(baselineManifestPath)) {
     throw new Error(
       `Baseline manifest.json not found at "${baselineManifestPath}". The baseline directory may be incomplete \u2014 re-run \`scope report baseline\`.`
     );
@@ -3998,8 +4177,8 @@ async function runDiff(options = {}) {
   );
   let currentManifest;
   if (manifestPath !== void 0) {
-    const absPath = resolve10(rootDir, manifestPath);
-    if (!existsSync7(absPath)) {
+    const absPath = resolve11(rootDir, manifestPath);
+    if (!existsSync8(absPath)) {
       throw new Error(`Manifest not found at "${absPath}".`);
     }
     currentManifest = JSON.parse(readFileSync6(absPath, "utf-8"));
@@ -4035,7 +4214,7 @@ async function runDiff(options = {}) {
   const renderOne = async (name) => {
     const descriptor = currentManifest.components[name];
     if (descriptor === void 0) return;
-    const filePath = resolve10(rootDir, descriptor.filePath);
+    const filePath = resolve11(rootDir, descriptor.filePath);
     const outcome = await safeRender4(
       () => renderComponent3(filePath, name, {}, viewportWidth, viewportHeight),
       {
@@ -4275,8 +4454,8 @@ function registerDiffSubCommand(reportCmd) {
 }
 // src/report/pr-comment.ts
-import { existsSync as existsSync8, readFileSync as readFileSync7, writeFileSync as writeFileSync8 } from "fs";
-import { resolve as resolve11 } from "path";
+import { existsSync as existsSync9, readFileSync as readFileSync7, writeFileSync as writeFileSync8 } from "fs";
+import { resolve as resolve12 } from "path";
 var STATUS_BADGE = {
   added: "\u2705 added",
   removed: "\u{1F5D1}\uFE0F removed",
@@ -4359,8 +4538,8 @@ function formatPrComment(diff) {
   return lines.join("\n");
 }
 function loadDiffResult(filePath) {
-  const abs = resolve11(filePath);
-  if (!existsSync8(abs)) {
+  const abs = resolve12(filePath);
+  if (!existsSync9(abs)) {
     throw new Error(`DiffResult file not found: ${abs}`);
   }
   let raw;
@@ -4392,7 +4571,7 @@ function registerPrCommentSubCommand(reportCmd) {
       const diff = loadDiffResult(opts.input);
       const comment = formatPrComment(diff);
       if (opts.output !== void 0) {
-        writeFileSync8(resolve11(opts.output), comment, "utf-8");
+        writeFileSync8(resolve12(opts.output), comment, "utf-8");
         process.stderr.write(`PR comment written to ${opts.output}
 `);
       } else {
@@ -4687,9 +4866,9 @@ function buildStructuredReport(report) {
 }
 // src/site-commands.ts
-import { createReadStream, existsSync as existsSync9, statSync } from "fs";
+import { createReadStream, existsSync as existsSync10, statSync } from "fs";
 import { createServer } from "http";
-import { extname, join as join3, resolve as resolve12 } from "path";
+import { extname, join as join4, resolve as resolve13 } from "path";
 import { buildSite } from "@agent-scope/site";
 import { Command as Command7 } from "commander";
 var MIME_TYPES = {
@@ -4707,16 +4886,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 = resolve12(process.cwd(), opts.input);
-        const outputDir = resolve12(process.cwd(), opts.output);
-        if (!existsSync9(inputDir)) {
+        const inputDir = resolve13(process.cwd(), opts.input);
+        const outputDir = resolve13(process.cwd(), opts.output);
+        if (!existsSync10(inputDir)) {
           throw new Error(
             `Input directory not found: ${inputDir}
 Run \`scope manifest generate\` and \`scope render\` first.`
           );
         }
-        const manifestPath = join3(inputDir, "manifest.json");
-        if (!existsSync9(manifestPath)) {
+        const manifestPath = join4(inputDir, "manifest.json");
+        if (!existsSync10(manifestPath)) {
           throw new Error(
             `Manifest not found at ${manifestPath}
 Run \`scope manifest generate\` first.`
@@ -4729,7 +4908,7 @@ Run \`scope manifest generate\` first.`
           outputDir,
           basePath: opts.basePath,
           ...opts.compliance !== void 0 && {
-            compliancePath: resolve12(process.cwd(), opts.compliance)
+            compliancePath: resolve13(process.cwd(), opts.compliance)
           },
           title: opts.title
         });
@@ -4752,8 +4931,8 @@ function registerServe(siteCmd) {
       if (Number.isNaN(port) || port < 1 || port > 65535) {
         throw new Error(`Invalid port: ${opts.port}`);
       }
-      const serveDir = resolve12(process.cwd(), opts.dir);
-      if (!existsSync9(serveDir)) {
+      const serveDir = resolve13(process.cwd(), opts.dir);
+      if (!existsSync10(serveDir)) {
         throw new Error(
           `Serve directory not found: ${serveDir}
 Run \`scope site build\` first.`
@@ -4762,13 +4941,13 @@ Run \`scope site build\` first.`
       const server = createServer((req, res) => {
         const rawUrl = req.url ?? "/";
         const urlPath = decodeURIComponent(rawUrl.split("?")[0] ?? "/");
-        const filePath = join3(serveDir, urlPath.endsWith("/") ? `${urlPath}index.html` : urlPath);
+        const filePath = join4(serveDir, urlPath.endsWith("/") ? `${urlPath}index.html` : urlPath);
         if (!filePath.startsWith(serveDir)) {
           res.writeHead(403, { "Content-Type": "text/plain" });
           res.end("Forbidden");
           return;
         }
-        if (existsSync9(filePath) && statSync(filePath).isFile()) {
+        if (existsSync10(filePath) && statSync(filePath).isFile()) {
           const ext = extname(filePath).toLowerCase();
           const contentType = MIME_TYPES[ext] ?? "application/octet-stream";
           res.writeHead(200, { "Content-Type": contentType });
@@ -4776,7 +4955,7 @@ Run \`scope site build\` first.`
           return;
         }
         const htmlPath = `${filePath}.html`;
-        if (existsSync9(htmlPath) && statSync(htmlPath).isFile()) {
+        if (existsSync10(htmlPath) && statSync(htmlPath).isFile()) {
           res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
           createReadStream(htmlPath).pipe(res);
           return;
@@ -4818,8 +4997,8 @@ function createSiteCommand() {
 }
 // src/tokens/commands.ts
-import { existsSync as existsSync12, readFileSync as readFileSync10 } from "fs";
-import { resolve as resolve16 } from "path";
+import { existsSync as existsSync13, readFileSync as readFileSync10 } from "fs";
+import { resolve as resolve17 } from "path";
 import {
   parseTokenFileSync as parseTokenFileSync2,
   TokenParseError,
@@ -4830,16 +5009,16 @@ import {
 import { Command as Command9 } from "commander";
 // src/tokens/compliance.ts
-import { existsSync as existsSync10, readFileSync as readFileSync8 } from "fs";
-import { resolve as resolve13 } from "path";
+import { existsSync as existsSync11, readFileSync as readFileSync8 } from "fs";
+import { resolve as resolve14 } 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 = resolve13(process.cwd(), stylesPath);
-  if (!existsSync10(absPath)) {
+  const absPath = resolve14(process.cwd(), stylesPath);
+  if (!existsSync11(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.
@@ -5006,8 +5185,8 @@ function registerCompliance(tokensCmd) {
 }
 // src/tokens/export.ts
-import { existsSync as existsSync11, readFileSync as readFileSync9, writeFileSync as writeFileSync9 } from "fs";
-import { resolve as resolve14 } from "path";
+import { existsSync as existsSync12, readFileSync as readFileSync9, writeFileSync as writeFileSync9 } from "fs";
+import { resolve as resolve15 } from "path";
 import {
   exportTokens,
   parseTokenFileSync,
@@ -5020,21 +5199,21 @@ var CONFIG_FILE = "reactscope.config.json";
 var SUPPORTED_FORMATS = ["css", "ts", "scss", "tailwind", "flat-json", "figma"];
 function resolveTokenFilePath2(fileFlag) {
   if (fileFlag !== void 0) {
-    return resolve14(process.cwd(), fileFlag);
+    return resolve15(process.cwd(), fileFlag);
   }
-  const configPath = resolve14(process.cwd(), CONFIG_FILE);
-  if (existsSync11(configPath)) {
+  const configPath = resolve15(process.cwd(), CONFIG_FILE);
+  if (existsSync12(configPath)) {
     try {
       const raw = readFileSync9(configPath, "utf-8");
       const config = JSON.parse(raw);
       if (typeof config === "object" && config !== null && "tokens" in config && typeof config.tokens === "object" && config.tokens !== null && typeof config.tokens?.file === "string") {
         const file = config.tokens.file;
-        return resolve14(process.cwd(), file);
+        return resolve15(process.cwd(), file);
       }
     } catch {
     }
   }
-  return resolve14(process.cwd(), DEFAULT_TOKEN_FILE);
+  return resolve15(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(
@@ -5053,7 +5232,7 @@ Supported formats: ${SUPPORTED_FORMATS.join(", ")}
       const format = opts.format;
       try {
         const filePath = resolveTokenFilePath2(opts.file);
-        if (!existsSync11(filePath)) {
+        if (!existsSync12(filePath)) {
           throw new Error(
             `Token file not found at ${filePath}.
 Create a reactscope.tokens.json file or use --file to specify a path.`
@@ -5098,7 +5277,7 @@ Available themes: ${themeNames.join(", ")}`
           themes: themesMap
         });
         if (opts.out !== void 0) {
-          const outPath = resolve14(process.cwd(), opts.out);
+          const outPath = resolve15(process.cwd(), opts.out);
           writeFileSync9(outPath, output, "utf-8");
           process.stderr.write(`Exported ${tokens.length} tokens to ${outPath}
 `);
@@ -5213,8 +5392,8 @@ ${formatImpactSummary(report)}
 }
 // src/tokens/preview.ts
-import { mkdirSync as mkdirSync5, writeFileSync as writeFileSync10 } from "fs";
-import { resolve as resolve15 } from "path";
+import { mkdirSync as mkdirSync6, writeFileSync as writeFileSync10 } from "fs";
+import { resolve as resolve16 } 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";
@@ -5395,9 +5574,9 @@ function registerPreview(tokensCmd) {
         });
         const spriteResult = await generator.generate(matrixResult);
         const tokenLabel = tokenPath.replace(/\./g, "-");
-        const outputPath = opts.output ?? resolve15(process.cwd(), DEFAULT_OUTPUT_DIR2, `preview-${tokenLabel}.png`);
-        const outputDir = resolve15(outputPath, "..");
-        mkdirSync5(outputDir, { recursive: true });
+        const outputPath = opts.output ?? resolve16(process.cwd(), DEFAULT_OUTPUT_DIR2, `preview-${tokenLabel}.png`);
+        const outputDir = resolve16(outputPath, "..");
+        mkdirSync6(outputDir, { recursive: true });
         writeFileSync10(outputPath, spriteResult.png);
         const useJson = opts.format === "json" || opts.format !== "text" && !isTTY();
         if (useJson) {
@@ -5457,24 +5636,24 @@ function buildTable2(headers, rows) {
 }
 function resolveTokenFilePath(fileFlag) {
   if (fileFlag !== void 0) {
-    return resolve16(process.cwd(), fileFlag);
+    return resolve17(process.cwd(), fileFlag);
   }
-  const configPath = resolve16(process.cwd(), CONFIG_FILE2);
-  if (existsSync12(configPath)) {
+  const configPath = resolve17(process.cwd(), CONFIG_FILE2);
+  if (existsSync13(configPath)) {
     try {
       const raw = readFileSync10(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 resolve16(process.cwd(), file);
+        return resolve17(process.cwd(), file);
       }
     } catch {
     }
   }
-  return resolve16(process.cwd(), DEFAULT_TOKEN_FILE2);
+  return resolve17(process.cwd(), DEFAULT_TOKEN_FILE2);
 }
 function loadTokens(absPath) {
-  if (!existsSync12(absPath)) {
+  if (!existsSync13(absPath)) {
     throw new Error(
       `Token file not found at ${absPath}.
 Create a reactscope.tokens.json file or use --file to specify a path.`
@@ -5694,7 +5873,7 @@ 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 (!existsSync12(filePath)) {
+      if (!existsSync13(filePath)) {
         throw new Error(
           `Token file not found at ${filePath}.
 Create a reactscope.tokens.json file or use --file to specify a path.`