@fragments-sdk/cli 0.7.2 → 0.7.3

package/dist/{viewer-K42REJU2.js → viewer-QTR7QJMM.js}

@@ -1,18 +1,22 @@
 import { createRequire as __banner_createRequire } from 'module'; const require = __banner_createRequire(import.meta.url);
 import {
-  discoverFragmentFiles,
-  discoverInstalledFragments,
   findPreviewConfigPath,
   findStorybookDir,
   generatePreviewModule,
   loadConfig
-} from "./chunk-3T6QL7IY.js";
+} from "./chunk-R6IZZSE7.js";
+import {
+  discoverFragmentFiles,
+  discoverInstalledFragments
+} from "./chunk-D34Q6A7S.js";
 import {
   generateContext
-} from "./chunk-OOGTG5FM.js";
+} from "./chunk-UXLGIGSX.js";
+import "./chunk-P33AKQJW.js";
 import {
   BRAND
-} from "./chunk-GHYYFAQN.js";
+} from "./chunk-EKLMXTWU.js";
+import "./chunk-Z7EY4VHE.js";
 
 // src/viewer/server.ts
 import {
@@ -123,6 +127,122 @@ async function render() {
   }
 }
 
+render();
+`;
+}
+function generateVariantRenderScript(fragmentPath, componentName, variantName) {
+  const variantNameLower = JSON.stringify(variantName.toLowerCase());
+  return `
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+async function render() {
+  const root = document.getElementById("render-root");
+
+  try {
+    const fragmentModule = await import("${fragmentPath}");
+    const fragment = fragmentModule.default;
+
+    if (!fragment || !fragment.variants || fragment.variants.length === 0) {
+      throw new Error("Fragment has no variants");
+    }
+
+    const variant = fragment.variants.find(
+      v => v.name.toLowerCase() === ${variantNameLower}
+    );
+
+    if (!variant) {
+      const available = fragment.variants.map(v => v.name).join(", ");
+      throw new Error("Variant '" + ${JSON.stringify(variantName)} + "' not found. Available: " + available);
+    }
+
+    const element = variant.render();
+
+    const reactRoot = createRoot(root);
+    reactRoot.render(element);
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        root.classList.add("ready");
+        window.__RENDER_READY__ = true;
+      });
+    });
+  } catch (error) {
+    console.error("Render error:", error);
+    root.innerHTML = \`
+      <div class="render-error">
+        <strong>Render Error</strong>
+        <pre>\${error.message}</pre>
+      </div>
+    \`;
+    root.classList.add("ready");
+    window.__RENDER_READY__ = true;
+    window.__RENDER_ERROR__ = error.message;
+  }
+}
+
+render();
+`;
+}
+function generateA11yRenderScript(fragmentPath, componentName, variantName) {
+  const variantLookup = variantName ? `
+    const variant = fragment.variants?.find(
+      v => v.name.toLowerCase() === ${JSON.stringify(variantName.toLowerCase())}
+    );
+    if (!variant) {
+      throw new Error("Variant '${variantName}' not found");
+    }
+    element = variant.render();` : `
+    element = React.createElement(fragment.component, {});`;
+  return `
+import React from "react";
+import { createRoot } from "react-dom/client";
+import axe from "axe-core";
+
+async function render() {
+  const root = document.getElementById("render-root");
+
+  try {
+    const fragmentModule = await import("${fragmentPath}");
+    const fragment = fragmentModule.default;
+
+    if (!fragment || !fragment.component) {
+      throw new Error("Fragment does not export a component");
+    }
+
+    let element;
+    ${variantLookup}
+
+    const reactRoot = createRoot(root);
+    reactRoot.render(element);
+
+    // Wait for React to flush rendering
+    await new Promise(resolve => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(resolve);
+      });
+    });
+
+    // Additional settle time for CSS/animations
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Run axe-core accessibility audit
+    const results = await axe.run('#render-root', {
+      runOnly: {
+        type: 'tag',
+        values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice'],
+      },
+    });
+
+    window.__AXE_RESULTS__ = results;
+    window.__RENDER_READY__ = true;
+  } catch (error) {
+    console.error("A11y audit error:", error);
+    window.__AXE_ERROR__ = error.message;
+    window.__RENDER_READY__ = true;
+  }
+}
+
 render();
 `;
 }
@@ -240,7 +360,7 @@ var sharedRenderPool = null;
 var browserPoolModule = null;
 async function getSharedRenderPool() {
   if (!browserPoolModule) {
-    browserPoolModule = await import("./service-PVGTYUKX.js");
+    browserPoolModule = await import("./service-CFFBHW4X.js");
   }
   if (!sharedRenderPool) {
     sharedRenderPool = new browserPoolModule.BrowserPool({
@@ -302,7 +422,7 @@ function fragmentsPlugin(options) {
         if (req.url === "/fragments/render" && req.method === "POST") {
           try {
             const body = await parseJsonBody(req);
-            const { component, props = {}, viewport } = body;
+            const { component, props = {}, viewport, variant } = body;
             if (!component) {
               res.writeHead(400, { "Content-Type": "application/json" });
               res.end(
@@ -337,7 +457,11 @@ function fragmentsPlugin(options) {
               );
               return;
             }
-            const renderScript = generateRenderScript(
+            const renderScript = variant ? generateVariantRenderScript(
+              fragmentFile.absolutePath,
+              fragmentInfo.name,
+              variant
+            ) : generateRenderScript(
               fragmentFile.absolutePath,
               fragmentInfo.name,
               props
@@ -469,7 +593,7 @@ function fragmentsPlugin(options) {
             const address = _server.httpServer?.address();
             const port = typeof address === "object" && address ? address.port : 6006;
             const renderViewport = viewport || { width: 800, height: 600 };
-            const { FigmaClient, bufferToBase64Url } = await import("./service-PVGTYUKX.js");
+            const { FigmaClient, bufferToBase64Url } = await import("./service-CFFBHW4X.js");
             const figmaClient = new FigmaClient({
               accessToken: figmaToken
             });
@@ -560,7 +684,7 @@ function fragmentsPlugin(options) {
               );
               return;
             }
-            const { FigmaClient } = await import("./service-PVGTYUKX.js");
+            const { FigmaClient } = await import("./service-CFFBHW4X.js");
             const figmaClient = new FigmaClient({ accessToken: figmaToken });
             const { fileKey, nodeId } = figmaClient.parseUrl(figmaUrl);
             const figmaDesignProps = await figmaClient.getNodeProperties(
@@ -601,7 +725,7 @@ function fragmentsPlugin(options) {
               }));
               return;
             }
-            const { getSharedTokenRegistry } = await import("./service-PVGTYUKX.js");
+            const { getSharedTokenRegistry } = await import("./service-CFFBHW4X.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -661,7 +785,7 @@ function fragmentsPlugin(options) {
               }));
               return;
             }
-            const { getSharedTokenRegistry } = await import("./service-PVGTYUKX.js");
+            const { getSharedTokenRegistry } = await import("./service-CFFBHW4X.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -723,7 +847,7 @@ function fragmentsPlugin(options) {
               res.end(JSON.stringify({ error: "Could not resolve fragment file path" }));
               return;
             }
-            const { getSharedTokenRegistry } = await import("./service-PVGTYUKX.js");
+            const { getSharedTokenRegistry } = await import("./service-CFFBHW4X.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -849,7 +973,7 @@ function fragmentsPlugin(options) {
             }
             const { writeFile, mkdir } = await import("fs/promises");
             const { join: join2 } = await import("path");
-            const { BRAND: BRAND2 } = await import("./core-UQXZTBFZ.js");
+            const { BRAND: BRAND2 } = await import("./core-3NMNCLFW.js");
             const fragmentsDir = join2(projectRoot, BRAND2.dataDir, BRAND2.componentsDir);
             await mkdir(fragmentsDir, { recursive: true });
             const fragmentPath = join2(
@@ -884,12 +1008,30 @@ function fragmentsPlugin(options) {
               return;
             }
             if (!config.tokens || !config.tokens.include || config.tokens.include.length === 0) {
-              res.writeHead(400, { "Content-Type": "application/json" });
-              res.end(JSON.stringify({
-                error: "No token configuration found",
-                suggestion: "Add 'tokens' config to fragments.config.ts to enable fix generation"
-              }));
-              return;
+              try {
+                const { discoverTokenFiles } = await import("./discovery-AKGA6CJD.js");
+                const discovered = await discoverTokenFiles(projectRoot);
+                if (discovered.length > 0) {
+                  config.tokens = {
+                    ...config.tokens,
+                    include: discovered.map((f) => f.relativePath)
+                  };
+                } else {
+                  res.writeHead(400, { "Content-Type": "application/json" });
+                  res.end(JSON.stringify({
+                    error: "No token files found",
+                    suggestion: "Add 'tokens' config to fragments.config.ts or add token files matching default patterns (_variables.scss, tokens.scss, etc.)"
+                  }));
+                  return;
+                }
+              } catch {
+                res.writeHead(400, { "Content-Type": "application/json" });
+                res.end(JSON.stringify({
+                  error: "No token configuration found and auto-discovery failed",
+                  suggestion: "Add 'tokens' config to fragments.config.ts to enable fix generation"
+                }));
+                return;
+              }
             }
             const loadedFragments = await loadFragmentsForRender(fragmentFiles, projectRoot);
             const fragmentInfo = findFragmentByName(component, loadedFragments);
@@ -904,7 +1046,7 @@ function fragmentsPlugin(options) {
             const {
               getSharedTokenRegistry,
               generateTokenPatches
-            } = await import("./service-PVGTYUKX.js");
+            } = await import("./service-CFFBHW4X.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -913,10 +1055,56 @@ function fragmentsPlugin(options) {
               (f) => f.relativePath === fragmentInfo.path
             );
             const sourceFile = fragmentFile?.relativePath || `${component}.tsx`;
+            let styleDiffs = [];
+            if (fragmentFile) {
+              try {
+                const renderScript = generateRenderScript(
+                  fragmentFile.absolutePath,
+                  fragmentInfo.name,
+                  {}
+                );
+                const requestId = Date.now().toString(36) + Math.random().toString(36).slice(2);
+                pendingRenders.set(requestId, {
+                  script: renderScript,
+                  viewport: { width: 800, height: 600 }
+                });
+                const address = _server.httpServer?.address();
+                const port = typeof address === "object" && address ? address.port : 6006;
+                const { computedStyles } = await captureRenderWithStyles(
+                  `http://localhost:${port}/fragments/__render__/${requestId}`,
+                  { width: 800, height: 600 },
+                  true
+                );
+                pendingRenders.delete(requestId);
+                if (computedStyles) {
+                  const tokenValues = /* @__PURE__ */ new Map();
+                  const allTokens = registry.getAllTokens();
+                  for (const t of allTokens) {
+                    if (t.resolvedValue) {
+                      tokenValues.set(t.resolvedValue, t.name);
+                    }
+                  }
+                  for (const [prop, value] of Object.entries(computedStyles)) {
+                    if (!value || value === "transparent" || value === "rgba(0, 0, 0, 0)") continue;
+                    const matchesToken = tokenValues.has(value);
+                    if (!matchesToken) {
+                      styleDiffs.push({
+                        property: prop,
+                        figma: value,
+                        // Using rendered as "expected" since we have no Figma
+                        rendered: value,
+                        match: false
+                      });
+                    }
+                  }
+                }
+              } catch (renderErr) {
+                console.warn("[Fragments] Could not render for style extraction:", renderErr);
+              }
+            }
             const result = generateTokenPatches(
               component,
-              [],
-              // Would be populated by actual style diffs
+              styleDiffs,
               registry,
               { sourceFile }
             );
@@ -936,6 +1124,148 @@ function fragmentsPlugin(options) {
           }
           return;
         }
+        if (req.url === "/fragments/a11y" && req.method === "POST") {
+          try {
+            const body = await parseJsonBody(req);
+            const { component, variant: variantName, standard = "AA" } = body;
+            if (!component) {
+              res.writeHead(400, { "Content-Type": "application/json" });
+              res.end(
+                JSON.stringify({ error: "Missing required field: component" })
+              );
+              return;
+            }
+            const loadedFragments = await loadFragmentsForRender(
+              fragmentFiles,
+              projectRoot
+            );
+            const fragmentInfo = findFragmentByName(component, loadedFragments);
+            if (!fragmentInfo) {
+              const available = getAvailableComponents(loadedFragments);
+              res.writeHead(400, { "Content-Type": "application/json" });
+              res.end(
+                JSON.stringify({
+                  error: `Component '${component}' not found. Available: ${available.join(", ")}`
+                })
+              );
+              return;
+            }
+            const fragmentFile = fragmentFiles.find(
+              (f) => f.relativePath === fragmentInfo.path
+            );
+            if (!fragmentFile) {
+              res.writeHead(500, { "Content-Type": "application/json" });
+              res.end(
+                JSON.stringify({ error: "Could not resolve fragment file path" })
+              );
+              return;
+            }
+            const variantNames = [];
+            if (variantName) {
+              variantNames.push(variantName);
+            } else {
+              const fullData = await loadFullFragmentData(projectRoot);
+              const fragmentData = fullData ? Object.values(fullData.fragments).find(
+                (f) => f.meta.name.toLowerCase() === component.toLowerCase()
+              ) : null;
+              if (fragmentData && fragmentData.variants?.length > 0) {
+                for (const v of fragmentData.variants) {
+                  variantNames.push(v.name);
+                }
+              } else {
+                variantNames.push("Default");
+              }
+            }
+            const address = _server.httpServer?.address();
+            const port = typeof address === "object" && address ? address.port : 6006;
+            const results = [];
+            for (const vName of variantNames) {
+              const a11yScript = generateA11yRenderScript(
+                fragmentFile.absolutePath,
+                fragmentInfo.name,
+                vName === "Default" && !variantName ? void 0 : vName
+              );
+              const requestId = Date.now().toString(36) + Math.random().toString(36).slice(2);
+              pendingRenders.set(requestId, {
+                script: a11yScript,
+                viewport: { width: 800, height: 600 }
+              });
+              try {
+                const auditResult = await captureA11yAudit(
+                  `http://localhost:${port}/fragments/__render__/${requestId}`,
+                  { width: 800, height: 600 }
+                );
+                let critical = 0;
+                let serious = 0;
+                let moderate = 0;
+                let minor = 0;
+                for (const violation of auditResult.violations ?? []) {
+                  switch (violation.impact) {
+                    case "critical":
+                      critical++;
+                      break;
+                    case "serious":
+                      serious++;
+                      break;
+                    case "moderate":
+                      moderate++;
+                      break;
+                    case "minor":
+                      minor++;
+                      break;
+                  }
+                }
+                results.push({
+                  variant: vName,
+                  violations: auditResult.violations?.length ?? 0,
+                  passes: auditResult.passes?.length ?? 0,
+                  incomplete: auditResult.incomplete?.length ?? 0,
+                  summary: {
+                    total: critical + serious + moderate + minor,
+                    critical,
+                    serious,
+                    moderate,
+                    minor
+                  },
+                  violationDetails: (auditResult.violations ?? []).map((v) => ({
+                    id: v.id,
+                    impact: v.impact,
+                    description: v.description,
+                    helpUrl: v.helpUrl,
+                    nodes: v.nodes.length
+                  }))
+                });
+              } catch (err) {
+                results.push({
+                  variant: vName,
+                  violations: 0,
+                  passes: 0,
+                  incomplete: 0,
+                  summary: {
+                    total: 0,
+                    critical: 0,
+                    serious: 0,
+                    moderate: 0,
+                    minor: 0
+                  }
+                });
+              } finally {
+                pendingRenders.delete(requestId);
+              }
+            }
+            res.setHeader("Content-Type", "application/json");
+            res.end(JSON.stringify({ results }));
+          } catch (error) {
+            console.error("[Fragments] Error running a11y audit:", error);
+            res.writeHead(500, { "Content-Type": "application/json" });
+            res.end(
+              JSON.stringify({
+                error: error instanceof Error ? error.message : "A11y audit failed"
+              })
+            );
+          }
+          return;
+        }
         if (req.url?.startsWith("/fragments/preview")) {
           if (req.url === "/fragments/preview") {
             res.writeHead(302, { Location: "/fragments/preview/" });
@@ -1356,6 +1686,41 @@ async function loadFragmentsForRender(fragmentFiles, configDir) {
     };
   });
 }
+async function loadFullFragmentData(configDir) {
+  const { join: join2 } = await import("path");
+  const fragmentsJsonPath = join2(configDir, BRAND.outFile);
+  try {
+    const content = await readFile(fragmentsJsonPath, "utf-8");
+    return JSON.parse(content);
+  } catch {
+    return null;
+  }
+}
+async function captureA11yAudit(url, viewport) {
+  const { pool } = await getSharedRenderPool();
+  const ctx = await pool.acquire();
+  const page = await ctx.newPage();
+  try {
+    await page.setViewportSize(viewport);
+    await page.goto(url, { waitUntil: "networkidle" });
+    await page.waitForFunction(
+      () => window.__RENDER_READY__ === true,
+      { timeout: 15e3 }
+    );
+    const error = await page.evaluate(() => window.__AXE_ERROR__);
+    if (error) {
+      throw new Error(`A11y audit error: ${error}`);
+    }
+    const results = await page.evaluate(() => window.__AXE_RESULTS__);
+    if (!results) {
+      throw new Error("Axe results not available \u2014 axe-core may not be installed");
+    }
+    return results;
+  } finally {
+    await page.close();
+    pool.release(ctx);
+  }
+}
 async function serveRenderHTML(res, server, renderScript) {
   const viewerRoot2 = viewerAssetsRoot;
   try {
@@ -1566,7 +1931,7 @@ async function loadFullFragmentForCompare(_server, _fragmentFiles, componentName
   }
 }
 async function compareImages(image1Base64, image2Base64, threshold) {
-  const { DiffEngine, base64UrlToBuffer, bufferToBase64Url } = await import("./service-PVGTYUKX.js");
+  const { DiffEngine, base64UrlToBuffer, bufferToBase64Url } = await import("./service-CFFBHW4X.js");
   const { PNG } = await import("pngjs");
   const buffer1 = base64UrlToBuffer(image1Base64);
   const buffer2 = base64UrlToBuffer(image2Base64);
@@ -1819,4 +2184,4 @@ export {
   createDevServer,
   fragmentsPlugin
 };
-//# sourceMappingURL=viewer-K42REJU2.js.map
+//# sourceMappingURL=viewer-QTR7QJMM.js.map