@fragments-sdk/cli 0.14.3 → 0.15.0

package/dist/viewer-2TZS3NDL.js

@@ -1,2730 +0,0 @@
-import { createRequire as __banner_createRequire } from 'module'; const require = __banner_createRequire(import.meta.url);
-import {
-  findPreviewConfigPath,
-  findStorybookDir,
-  generatePreviewModule,
-  loadConfig,
-  parseFragmentFile
-} from "./chunk-55KERLWL.js";
-import {
-  discoverFragmentFiles,
-  discoverInstalledFragments
-} from "./chunk-ZKTFKHWN.js";
-import "./chunk-D2CDBRNU.js";
-import {
-  BRAND,
-  generateContext
-} from "./chunk-I34BC3CU.js";
-import "./chunk-Z7EY4VHE.js";
-
-// src/viewer/server.ts
-import {
-  createServer,
-  mergeConfig,
-  loadConfigFromFile
-} from "vite";
-import react from "@vitejs/plugin-react";
-import { resolve as resolve2, dirname as dirname2, join } from "path";
-import { existsSync as existsSync2, realpathSync } from "fs";
-import { readFile as readFile2 } from "fs/promises";
-import { fileURLToPath as fileURLToPath2 } from "url";
-
-// src/viewer/vite-plugin.ts
-import { resolve, dirname } from "path";
-import { fileURLToPath } from "url";
-import { existsSync } from "fs";
-import { readFile } from "fs/promises";
-import { transform } from "esbuild";
-import svgr from "vite-plugin-svgr";
-
-// src/viewer/render-utils.ts
-function serializeValue(value) {
-  if (value === null) return "null";
-  if (value === void 0) return "undefined";
-  if (typeof value === "string") return JSON.stringify(value);
-  if (typeof value === "number") return String(value);
-  if (typeof value === "boolean") return String(value);
-  if (Array.isArray(value)) {
-    return `[${value.map(serializeValue).join(", ")}]`;
-  }
-  if (typeof value === "object") {
-    const entries = Object.entries(value).map(([k, v]) => `${JSON.stringify(k)}: ${serializeValue(v)}`).join(", ");
-    return `{${entries}}`;
-  }
-  return "undefined";
-}
-function serializePropsToJsx(props) {
-  return Object.entries(props).filter(([_, v]) => v !== void 0).map(([key, value]) => {
-    if (typeof value === "string") {
-      return `${key}=${JSON.stringify(value)}`;
-    }
-    return `${key}={${serializeValue(value)}}`;
-  }).join(" ");
-}
-function findFragmentByName(componentName, fragments) {
-  const match = fragments.find(
-    (s) => s.fragment.meta.name.toLowerCase() === componentName.toLowerCase()
-  );
-  if (!match) return null;
-  return {
-    name: match.fragment.meta.name,
-    path: match.path
-  };
-}
-function getAvailableComponents(fragments) {
-  return fragments.map((s) => s.fragment.meta.name).sort();
-}
-function generateRenderScript(fragmentPath, componentName, props = {}) {
-  const propsJsx = serializePropsToJsx(props);
-  const propsString = propsJsx ? ` ${propsJsx}` : "";
-  const hasChildren = "children" in props && props.children !== void 0;
-  const childrenContent = hasChildren ? String(props.children) : "";
-  const propsWithoutChildren = { ...props };
-  delete propsWithoutChildren.children;
-  const propsJsxNoChildren = serializePropsToJsx(propsWithoutChildren);
-  const propsStringNoChildren = propsJsxNoChildren ? ` ${propsJsxNoChildren}` : "";
-  return `
-import React from "react";
-import { createRoot } from "react-dom/client";
-
-// Import the fragment to get the component
-async function render() {
-  const root = document.getElementById("render-root");
-
-  try {
-    // Dynamic import of the fragment file
-    const fragmentModule = await import("${fragmentPath}");
-    const fragment = fragmentModule.default;
-
-    if (!fragment || !fragment.component) {
-      throw new Error("Fragment does not export a component");
-    }
-
-    const Component = fragment.component;
-
-    // Create React root and render
-    const reactRoot = createRoot(root);
-    ${hasChildren ? `reactRoot.render(React.createElement(Component, ${JSON.stringify(propsWithoutChildren)}, ${JSON.stringify(childrenContent)}));` : `reactRoot.render(React.createElement(Component, ${JSON.stringify(props)}));`}
-
-    // Signal that rendering is complete
-    // Wait a frame for React to flush
-    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 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();
-`;
-}
-
-// src/viewer/style-utils.ts
-function compareStyles(figmaStyles, renderedStyles) {
-  const properties = [];
-  const cleanFigmaStyles = {};
-  const propsToCompare = [
-    "backgroundColor",
-    "borderColor",
-    "borderWidth",
-    "borderRadius",
-    "fontFamily",
-    "fontSize",
-    "fontWeight",
-    "lineHeight",
-    "letterSpacing",
-    "textAlign",
-    "boxShadow",
-    "padding",
-    "gap",
-    "opacity"
-  ];
-  for (const prop of propsToCompare) {
-    const figmaValue = figmaStyles[prop];
-    const renderedValue = renderedStyles[prop];
-    if (figmaValue !== void 0) {
-      cleanFigmaStyles[prop] = figmaValue;
-      const match = compareStyleValue(prop, figmaValue, renderedValue || "");
-      properties.push({
-        property: prop,
-        figma: figmaValue,
-        rendered: renderedValue || "(not set)",
-        match
-      });
-    }
-  }
-  const allMatch = properties.every((p) => p.match);
-  return {
-    match: allMatch,
-    properties,
-    figmaStyles: cleanFigmaStyles,
-    renderedStyles
-  };
-}
-function compareStyleValue(prop, figma, rendered) {
-  const normalizedFigma = normalizeStyleValue(prop, figma);
-  const normalizedRendered = normalizeStyleValue(prop, rendered);
-  if (normalizedFigma === normalizedRendered) {
-    return true;
-  }
-  if (prop === "backgroundColor" || prop === "borderColor") {
-    return compareColors(normalizedFigma, normalizedRendered, 5);
-  }
-  if (["borderWidth", "borderRadius", "fontSize", "padding", "gap"].includes(prop)) {
-    return compareNumericValues(normalizedFigma, normalizedRendered, 1);
-  }
-  return false;
-}
-function normalizeStyleValue(prop, value) {
-  let normalized = value.trim().replace(/\s+/g, " ");
-  if (prop === "boxShadow" && normalized === "none") {
-    normalized = "";
-  }
-  if (normalized.match(/rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/)) {
-    normalized = "transparent";
-  }
-  return normalized;
-}
-function compareColors(color1, color2, tolerance) {
-  const rgb1 = parseColor(color1);
-  const rgb2 = parseColor(color2);
-  if (!rgb1 || !rgb2) {
-    return color1 === color2;
-  }
-  return Math.abs(rgb1.r - rgb2.r) <= tolerance && Math.abs(rgb1.g - rgb2.g) <= tolerance && Math.abs(rgb1.b - rgb2.b) <= tolerance && Math.abs((rgb1.a ?? 1) - (rgb2.a ?? 1)) <= 0.05;
-}
-function parseColor(color) {
-  const hexMatch = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
-  if (hexMatch) {
-    return {
-      r: parseInt(hexMatch[1], 16),
-      g: parseInt(hexMatch[2], 16),
-      b: parseInt(hexMatch[3], 16)
-    };
-  }
-  const rgbaMatch = color.match(
-    /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/
-  );
-  if (rgbaMatch) {
-    return {
-      r: parseInt(rgbaMatch[1], 10),
-      g: parseInt(rgbaMatch[2], 10),
-      b: parseInt(rgbaMatch[3], 10),
-      a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
-    };
-  }
-  return null;
-}
-function compareNumericValues(value1, value2, tolerance) {
-  const num1 = parseFloat(value1);
-  const num2 = parseFloat(value2);
-  if (isNaN(num1) || isNaN(num2)) {
-    return value1 === value2;
-  }
-  return Math.abs(num1 - num2) <= tolerance;
-}
-
-// src/viewer/vite-plugin.ts
-var __dirname = dirname(fileURLToPath(import.meta.url));
-var monorepoViewerSrc = resolve(__dirname, "..", "..", "viewer", "src");
-var npmViewerSrc = (() => {
-  const cliNm = resolve(__dirname, "..", "node_modules", "@fragments-sdk", "viewer", "src");
-  if (existsSync(cliNm)) return cliNm;
-  let dir = resolve(__dirname, "..");
-  for (let i = 0; i < 5; i++) {
-    const candidate = resolve(dir, "node_modules", "@fragments-sdk", "viewer", "src");
-    if (existsSync(candidate)) return candidate;
-    dir = resolve(dir, "..");
-  }
-  return null;
-})();
-var viewerAssetsRoot = existsSync(monorepoViewerSrc) ? monorepoViewerSrc : npmViewerSrc ?? monorepoViewerSrc;
-var pendingRenders = /* @__PURE__ */ new Map();
-var sharedRenderPool = null;
-var browserPoolModule = null;
-async function getSharedRenderPool() {
-  if (!browserPoolModule) {
-    browserPoolModule = await import("./service-HKJ6B7P7.js");
-  }
-  if (!sharedRenderPool) {
-    sharedRenderPool = new browserPoolModule.BrowserPool({
-      viewport: { width: 800, height: 600 },
-      // Default viewport, will be overridden per page
-      poolSize: 2,
-      // Keep 2 contexts warm for parallel requests
-      idleTimeoutMs: 6e4
-      // Keep warm for 60 seconds
-    });
-  }
-  return { pool: sharedRenderPool, bufferToBase64Url: browserPoolModule.bufferToBase64Url };
-}
-function fragmentsPlugin(options) {
-  const { fragmentFiles, config, projectRoot } = options;
-  const VIRTUAL_FRAGMENTS = `virtual:${BRAND.nameLower}`;
-  const VIRTUAL_FRAGMENTS_RESOLVED = `\0virtual:${BRAND.nameLower}`;
-  const VIRTUAL_VIEWER_ENTRY = `virtual:${BRAND.nameLower}-viewer-entry`;
-  const VIRTUAL_VIEWER_ENTRY_RESOLVED = `\0virtual:${BRAND.nameLower}-viewer-entry`;
-  const VIRTUAL_PREVIEW = `virtual:${BRAND.nameLower}-preview`;
-  const VIRTUAL_PREVIEW_RESOLVED = `\0virtual:${BRAND.nameLower}-preview`;
-  let server = null;
-  let resolvedConfig = null;
-  const storybookDir = findStorybookDir(projectRoot);
-  const previewConfigPath = storybookDir ? findPreviewConfigPath(storybookDir) : null;
-  const fragmentFileSet = new Set(fragmentFiles.map((f) => f.absolutePath));
-  const mainPlugin = {
-    name: "fragments",
-    // Add process.env shim and esbuild config for Storybook compatibility
-    config() {
-      return {
-        build: {
-          rollupOptions: {
-            onwarn(warning, defaultHandler) {
-              if (warning.code === "MODULE_LEVEL_DIRECTIVE" || warning.message && warning.message.includes("has been externalized")) {
-                return;
-              }
-              defaultHandler(warning);
-            }
-          }
-        },
-        define: {
-          // Shim process.env for story files that use it (e.g., process.env.STORYBOOK_*)
-          "process.env": "{}"
-        },
-        esbuild: {
-          // Handle JSX in .js files (common in Storybook preview.js files)
-          loader: "tsx",
-          include: /\.(tsx?|jsx?)$/
-        },
-        optimizeDeps: {
-          // Force esbuild to handle .js files with JSX
-          esbuildOptions: {
-            loader: {
-              ".js": "jsx"
-            }
-          }
-        }
-      };
-    },
-    // Store resolved config
-    configResolved(config2) {
-      resolvedConfig = config2;
-    },
-    // Store server reference for HMR
-    configureServer(_server) {
-      server = _server;
-      _server.middlewares.use(async (req, res, next) => {
-        if (req.url === "/fragments/render" && req.method === "POST") {
-          try {
-            const body = await parseJsonBody(req);
-            const { component, props = {}, viewport, variant } = 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 renderScript = variant ? generateVariantRenderScript(
-              fragmentFile.absolutePath,
-              fragmentInfo.name,
-              variant
-            ) : generateRenderScript(
-              fragmentFile.absolutePath,
-              fragmentInfo.name,
-              props
-            );
-            const requestId = Date.now().toString(36) + Math.random().toString(36).slice(2);
-            pendingRenders.set(requestId, { script: renderScript, viewport });
-            const address = _server.httpServer?.address();
-            const port = typeof address === "object" && address ? address.port : 6006;
-            const screenshot = await captureRender(
-              `http://localhost:${port}/fragments/__render__/${requestId}`,
-              viewport || { width: 800, height: 600 }
-            );
-            pendingRenders.delete(requestId);
-            res.setHeader("Content-Type", "application/json");
-            res.end(JSON.stringify({ screenshot }));
-          } catch (error) {
-            console.error("[Fragments] Error rendering:", error);
-            res.writeHead(500, { "Content-Type": "application/json" });
-            res.end(
-              JSON.stringify({
-                error: error instanceof Error ? error.message : "Render failed"
-              })
-            );
-          }
-          return;
-        }
-        if (req.url?.startsWith("/fragments/__render__/")) {
-          const requestId = req.url.split("/fragments/__render__/")[1]?.split("?")[0];
-          const renderData = pendingRenders.get(requestId || "");
-          if (!renderData) {
-            res.writeHead(404, { "Content-Type": "text/plain" });
-            res.end("Render request not found or expired");
-            return;
-          }
-          await serveRenderHTML(res, _server, renderData.script);
-          return;
-        }
-        if (req.url === "/fragments/compare" && req.method === "POST") {
-          try {
-            const body = await parseJsonBody(req);
-            const {
-              component,
-              variant,
-              props = {},
-              figmaUrl,
-              viewport,
-              threshold = 1,
-              includeStyleDiff = false
-            } = body;
-            if (!component) {
-              res.writeHead(400, { "Content-Type": "application/json" });
-              res.end(
-                JSON.stringify({ error: "Missing required field: component" })
-              );
-              return;
-            }
-            const figmaToken = body.figmaToken || process.env.FIGMA_ACCESS_TOKEN || config.figmaToken;
-            if (!figmaToken && !figmaUrl) {
-              res.writeHead(400, { "Content-Type": "application/json" });
-              res.end(
-                JSON.stringify({
-                  error: `No Figma access token configured. Figma token: ${figmaToken}`,
-                  suggestion: "Set FIGMA_ACCESS_TOKEN env var, add figmaToken to fragments.config.ts, or provide in request"
-                })
-              );
-              return;
-            }
-            console.log("[Fragments] Compare request for:", component);
-            console.log("[Fragments] fragmentFiles count:", fragmentFiles.length);
-            console.log("[Fragments] First 3 fragment files:", fragmentFiles.slice(0, 3).map((f) => f.relativePath));
-            console.log("[Fragments] projectRoot:", projectRoot);
-            const loadedFragments = await loadFragmentsForRender(
-              fragmentFiles,
-              projectRoot
-            );
-            console.log("[Fragments] loadedFragments count:", loadedFragments.length);
-            console.log("[Fragments] First 3 loaded:", loadedFragments.slice(0, 3).map((s) => s.fragment.meta.name));
-            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 fullFragmentData = await loadFullFragmentForCompare(
-              _server,
-              fragmentFiles,
-              component,
-              variant,
-              projectRoot
-            );
-            const effectiveFigmaUrl = figmaUrl || fullFragmentData?.figmaUrl;
-            if (!effectiveFigmaUrl) {
-              res.writeHead(400, { "Content-Type": "application/json" });
-              res.end(
-                JSON.stringify({
-                  error: `No Figma URL for component '${component}'`,
-                  suggestion: "Add 'figma' field to fragment definition or provide figmaUrl in request"
-                })
-              );
-              return;
-            }
-            if (!figmaToken) {
-              res.writeHead(400, { "Content-Type": "application/json" });
-              res.end(
-                JSON.stringify({
-                  error: "Figma access token required for comparison",
-                  suggestion: "Set FIGMA_ACCESS_TOKEN env var or add figmaToken to fragments.config.ts"
-                })
-              );
-              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 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-HKJ6B7P7.js");
-            const figmaClient = new FigmaClient({
-              accessToken: figmaToken
-            });
-            const { fileKey, nodeId } = figmaClient.parseUrl(effectiveFigmaUrl);
-            const renderScript = generateRenderScript(
-              fragmentFile.absolutePath,
-              fragmentInfo.name,
-              props
-            );
-            const requestId = Date.now().toString(36) + Math.random().toString(36).slice(2);
-            pendingRenders.set(requestId, {
-              script: renderScript,
-              viewport: renderViewport
-            });
-            try {
-              const [captureResult, figmaImageResult, figmaDesignProps] = await Promise.all([
-                // Render and capture the component (with optional computed styles)
-                captureRenderWithStyles(
-                  `http://localhost:${port}/fragments/__render__/${requestId}`,
-                  renderViewport,
-                  includeStyleDiff
-                ),
-                // Fetch Figma image
-                figmaClient.getImageFromUrl(effectiveFigmaUrl),
-                // Fetch Figma design properties (only if includeStyleDiff is true)
-                includeStyleDiff ? figmaClient.getNodeProperties(fileKey, nodeId) : Promise.resolve(null)
-              ]);
-              const renderedImage = captureResult.screenshot;
-              const renderedStyles = captureResult.computedStyles;
-              const figmaImage = bufferToBase64Url(figmaImageResult.data);
-              const compareResult = await compareImages(
-                renderedImage,
-                figmaImage,
-                threshold
-              );
-              const response = {
-                match: compareResult.matches,
-                diffPercentage: compareResult.diffPercentage,
-                threshold,
-                rendered: renderedImage,
-                figma: figmaImage,
-                diff: compareResult.diffImage || renderedImage,
-                figmaUrl: effectiveFigmaUrl,
-                changedRegions: compareResult.changedRegions
-              };
-              if (includeStyleDiff && figmaDesignProps && renderedStyles) {
-                const figmaStyles = figmaClient.convertToCSS(figmaDesignProps);
-                const figmaStylesRecord = { ...figmaStyles };
-                const styleDiffResult = compareStyles(figmaStylesRecord, renderedStyles);
-                response.styleDiff = styleDiffResult;
-                if (!styleDiffResult.match) {
-                  response.match = false;
-                }
-              }
-              res.setHeader("Content-Type", "application/json");
-              res.end(JSON.stringify(response));
-            } finally {
-              pendingRenders.delete(requestId);
-            }
-          } catch (error) {
-            console.error("[Fragments] Error comparing:", error);
-            res.writeHead(500, { "Content-Type": "application/json" });
-            res.end(
-              JSON.stringify({
-                error: error instanceof Error ? error.message : "Compare failed"
-              })
-            );
-          }
-          return;
-        }
-        if (req.url === "/fragments/figma-styles" && req.method === "POST") {
-          try {
-            const body = await parseJsonBody(req);
-            const { figmaUrl } = body;
-            if (!figmaUrl) {
-              res.writeHead(400, { "Content-Type": "application/json" });
-              res.end(JSON.stringify({ error: "Missing figmaUrl" }));
-              return;
-            }
-            const figmaToken = process.env.FIGMA_ACCESS_TOKEN || config.figmaToken;
-            if (!figmaToken) {
-              res.writeHead(400, { "Content-Type": "application/json" });
-              res.end(
-                JSON.stringify({
-                  error: "No Figma access token configured",
-                  suggestion: "Set FIGMA_ACCESS_TOKEN env var or add figmaToken to fragments.config.ts"
-                })
-              );
-              return;
-            }
-            const { FigmaClient } = await import("./service-HKJ6B7P7.js");
-            const figmaClient = new FigmaClient({ accessToken: figmaToken });
-            const { fileKey, nodeId } = figmaClient.parseUrl(figmaUrl);
-            const figmaDesignProps = await figmaClient.getNodeProperties(
-              fileKey,
-              nodeId
-            );
-            const figmaStyles = figmaClient.convertToCSS(figmaDesignProps);
-            res.setHeader("Content-Type", "application/json");
-            res.end(JSON.stringify({ styles: figmaStyles }));
-          } catch (error) {
-            console.error("[Fragments] Error fetching Figma styles:", error);
-            res.writeHead(500, { "Content-Type": "application/json" });
-            res.end(
-              JSON.stringify({
-                error: error instanceof Error ? error.message : "Failed to fetch Figma styles"
-              })
-            );
-          }
-          return;
-        }
-        if (req.url?.startsWith("/fragments/tokens")) {
-          try {
-            const url = new URL(req.url, "http://localhost");
-            const format = url.searchParams.get("format") || "json";
-            const category = url.searchParams.get("category");
-            const theme = url.searchParams.get("theme");
-            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 with 'include' patterns for CSS/SCSS files",
-                example: {
-                  tokens: {
-                    include: ["src/styles/theme.scss", "src/styles/variables.css"],
-                    themeSelectors: { ":root": "default", "[data-theme='dark']": "dark" }
-                  }
-                }
-              }));
-              return;
-            }
-            const { getSharedTokenRegistry } = await import("./service-HKJ6B7P7.js");
-            const registry = getSharedTokenRegistry();
-            if (!registry.isInitialized()) {
-              await registry.initialize(config.tokens, projectRoot);
-            }
-            let tokens = registry.getAllTokens();
-            if (category) {
-              tokens = tokens.filter((t) => t.category === category);
-            }
-            if (theme) {
-              tokens = tokens.filter((t) => t.theme === theme || t.theme === "default");
-            }
-            const meta = registry.getMeta();
-            if (format === "summary") {
-              const summary = {
-                totalTokens: meta?.totalTokens || 0,
-                byCategory: {},
-                byTheme: {},
-                parseTimeMs: meta?.parseTimeMs || 0,
-                sourceFiles: meta?.sourceFiles || []
-              };
-              for (const token of registry.getAllTokens()) {
-                summary.byCategory[token.category] = (summary.byCategory[token.category] || 0) + 1;
-                summary.byTheme[token.theme] = (summary.byTheme[token.theme] || 0) + 1;
-              }
-              res.setHeader("Content-Type", "application/json");
-              res.end(JSON.stringify(summary, null, 2));
-            } else {
-              res.setHeader("Content-Type", "application/json");
-              res.end(JSON.stringify({
-                tokens,
-                meta
-              }, null, 2));
-            }
-          } catch (error) {
-            console.error("[Fragments] Error fetching tokens:", error);
-            res.writeHead(500, { "Content-Type": "application/json" });
-            res.end(JSON.stringify({
-              error: error instanceof Error ? error.message : "Failed to fetch tokens"
-            }));
-          }
-          return;
-        }
-        if (req.url === "/fragments/token-match" && req.method === "POST") {
-          try {
-            const body = await parseJsonBody(req);
-            const { value, propertyType, theme } = body;
-            if (!value) {
-              res.writeHead(400, { "Content-Type": "application/json" });
-              res.end(JSON.stringify({ error: "Missing required field: value" }));
-              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"
-              }));
-              return;
-            }
-            const { getSharedTokenRegistry } = await import("./service-HKJ6B7P7.js");
-            const registry = getSharedTokenRegistry();
-            if (!registry.isInitialized()) {
-              await registry.initialize(config.tokens, projectRoot);
-            }
-            const result = registry.matchValue({
-              value,
-              propertyType,
-              theme
-            });
-            res.setHeader("Content-Type", "application/json");
-            res.end(JSON.stringify(result));
-          } catch (error) {
-            console.error("[Fragments] Error matching token:", error);
-            res.writeHead(500, { "Content-Type": "application/json" });
-            res.end(JSON.stringify({
-              error: error instanceof Error ? error.message : "Failed to match token"
-            }));
-          }
-          return;
-        }
-        if (req.url === "/fragments/compliance" && req.method === "POST") {
-          try {
-            const body = await parseJsonBody(req);
-            const { component, variant, theme = "default" } = body;
-            if (!component) {
-              res.writeHead(400, { "Content-Type": "application/json" });
-              res.end(JSON.stringify({ error: "Missing required field: component" }));
-              return;
-            }
-            if (!config.tokens || !config.tokens.include || config.tokens.include.length === 0) {
-              res.setHeader("Content-Type", "application/json");
-              res.end(JSON.stringify({
-                component,
-                variant,
-                compliance: 100,
-                totalProperties: 0,
-                hardcoded: 0,
-                usingTokens: 0,
-                violations: [],
-                note: "No token configuration found - token compliance checking disabled"
-              }));
-              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 { getSharedTokenRegistry } = await import("./service-HKJ6B7P7.js");
-            const registry = getSharedTokenRegistry();
-            if (!registry.isInitialized()) {
-              await registry.initialize(config.tokens, projectRoot);
-            }
-            const address = _server.httpServer?.address();
-            const port = typeof address === "object" && address ? address.port : 6006;
-            const renderViewport = { width: 800, height: 600 };
-            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: renderViewport });
-            try {
-              const captureResult = await captureRenderWithStyles(
-                `http://localhost:${port}/fragments/__render__/${requestId}`,
-                renderViewport,
-                true
-                // extractStyles = true
-              );
-              const computedStyles = captureResult.computedStyles || {};
-              const styleDiffs = [];
-              for (const [property, value] of Object.entries(computedStyles)) {
-                if (!value) continue;
-                const matchResult = registry.matchValue({
-                  value,
-                  propertyType: property.toLowerCase().includes("color") ? "color" : property.toLowerCase().includes("font") ? "typography" : property.toLowerCase().includes("spacing") || property.toLowerCase().includes("padding") || property.toLowerCase().includes("margin") ? "spacing" : void 0,
-                  theme
-                });
-                const isUsingToken = matchResult.exactMatches.length > 0;
-                styleDiffs.push({
-                  property,
-                  figma: value,
-                  // Use the value as both figma and rendered for self-comparison
-                  rendered: value,
-                  match: isUsingToken
-                });
-              }
-              const usageSummary = registry.calculateUsageSummary(styleDiffs, theme);
-              const violations = usageSummary.hardcodedProperties.map((hp) => {
-                const suggestion = hp.suggestedFix ? `Use ${hp.suggestedFix.tokenName} (${hp.suggestedFix.tokenValue})` : void 0;
-                return {
-                  property: hp.property,
-                  issue: `Hardcoded value "${hp.rendered}" should use a design token`,
-                  severity: "warning",
-                  suggestion,
-                  expected: hp.figmaToken,
-                  actual: hp.rendered
-                };
-              });
-              res.setHeader("Content-Type", "application/json");
-              res.end(JSON.stringify({
-                component,
-                variant,
-                compliance: usageSummary.compliancePercent,
-                totalProperties: usageSummary.totalProperties,
-                hardcoded: usageSummary.hardcoded,
-                usingTokens: usageSummary.usingTokens,
-                violations
-              }));
-            } finally {
-              pendingRenders.delete(requestId);
-            }
-          } catch (error) {
-            console.error("[Fragments] Error checking compliance:", error);
-            res.writeHead(500, { "Content-Type": "application/json" });
-            res.end(JSON.stringify({
-              error: error instanceof Error ? error.message : "Compliance check failed"
-            }));
-          }
-          return;
-        }
-        if (req.url === "/fragments/compiled.json") {
-          try {
-            const { join: join2 } = await import("path");
-            const fragmentsJsonPath = join2(projectRoot, BRAND.outFile);
-            const content = await readFile(fragmentsJsonPath, "utf-8");
-            res.writeHead(200, { "Content-Type": "application/json" });
-            res.end(content);
-          } catch (error) {
-            console.warn(`[${BRAND.name}] Failed to serve compiled.json:`, error);
-            res.writeHead(404, { "Content-Type": "application/json" });
-            res.end(JSON.stringify({
-              error: `${BRAND.outFile} not found. Run '${BRAND.cliCommand} build' first.`
-            }));
-          }
-          return;
-        }
-        if (req.url?.startsWith("/fragments/context")) {
-          try {
-            const url = new URL(req.url, "http://localhost");
-            const format = url.searchParams.get("format") || "markdown";
-            const compact = url.searchParams.get("compact") === "true";
-            const compiledFragments = await loadFragmentsForContext(
-              _server,
-              fragmentFiles,
-              config,
-              projectRoot
-            );
-            const { content, tokenEstimate } = generateContext(
-              compiledFragments,
-              {
-                format,
-                compact,
-                include: {
-                  code: url.searchParams.get("code") === "true",
-                  relations: url.searchParams.get("relations") === "true"
-                }
-              }
-            );
-            res.setHeader("X-Token-Estimate", String(tokenEstimate));
-            res.setHeader(
-              "Content-Type",
-              format === "json" ? "application/json" : "text/markdown; charset=utf-8"
-            );
-            res.end(content);
-          } catch (error) {
-            console.error("[Fragments] Error generating context:", error);
-            res.writeHead(500, { "Content-Type": "text/plain" });
-            res.end(
-              "Error generating context: " + (error instanceof Error ? error.message : error)
-            );
-          }
-          return;
-        }
-        if (req.url === "/fragments/save" && req.method === "POST") {
-          try {
-            const body = await parseJsonBody(req);
-            const { componentName, fragment } = body;
-            if (!componentName || !fragment) {
-              res.writeHead(400, { "Content-Type": "application/json" });
-              res.end(
-                JSON.stringify({
-                  error: "Missing required fields: componentName, fragment"
-                })
-              );
-              return;
-            }
-            const { writeFile, mkdir } = await import("fs/promises");
-            const { join: join2 } = await import("path");
-            const { BRAND: BRAND2 } = await import("./core/index.js");
-            const fragmentsDir = join2(projectRoot, BRAND2.dataDir, BRAND2.componentsDir);
-            await mkdir(fragmentsDir, { recursive: true });
-            const fragmentPath = join2(
-              fragmentsDir,
-              `${componentName}${BRAND2.fileExtension}`
-            );
-            await writeFile(
-              fragmentPath,
-              JSON.stringify(fragment, null, 2),
-              "utf-8"
-            );
-            res.setHeader("Content-Type", "application/json");
-            res.end(JSON.stringify({ success: true, path: fragmentPath }));
-          } catch (error) {
-            console.error("[Fragments] Error saving fragment:", error);
-            res.writeHead(500, { "Content-Type": "application/json" });
-            res.end(
-              JSON.stringify({
-                error: error instanceof Error ? error.message : "Save failed"
-              })
-            );
-          }
-          return;
-        }
-        if (req.url === "/fragments/fix" && req.method === "POST") {
-          try {
-            const body = await parseJsonBody(req);
-            const { component, variant, fixType = "all" } = body;
-            if (!component) {
-              res.writeHead(400, { "Content-Type": "application/json" });
-              res.end(JSON.stringify({ error: "Missing required field: component" }));
-              return;
-            }
-            if (!config.tokens || !config.tokens.include || config.tokens.include.length === 0) {
-              try {
-                const { discoverTokenFiles } = await import("./discovery-VDANZAJ2.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);
-            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 {
-              getSharedTokenRegistry,
-              generateTokenPatches
-            } = await import("./service-HKJ6B7P7.js");
-            const registry = getSharedTokenRegistry();
-            if (!registry.isInitialized()) {
-              await registry.initialize(config.tokens, projectRoot);
-            }
-            const fragmentFile = fragmentFiles.find(
-              (f) => f.relativePath === fragmentInfo.path
-            );
-            const sourceFile = fragmentFile?.relativePath || `${component}.tsx`;
-            const 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,
-              styleDiffs,
-              registry,
-              { sourceFile }
-            );
-            res.setHeader("Content-Type", "application/json");
-            res.end(JSON.stringify({
-              patches: result.patches,
-              summary: result.summary,
-              fixableCount: result.fixableCount,
-              unfixableCount: result.unfixableCount
-            }));
-          } catch (error) {
-            console.error("[Fragments] Error generating fixes:", error);
-            res.writeHead(500, { "Content-Type": "application/json" });
-            res.end(JSON.stringify({
-              error: error instanceof Error ? error.message : "Fix generation failed"
-            }));
-          }
-          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 === "/fragments/perf-data" && req.method === "GET") {
-          try {
-            const { readFile: readFileAsync } = await import("fs/promises");
-            const { resolve: resolvePath, join: joinPath } = await import("path");
-            const outFilePath = resolvePath(
-              projectRoot,
-              config.outFile ?? BRAND.outFile
-            );
-            const raw = await readFileAsync(outFilePath, "utf-8");
-            const parsed = JSON.parse(raw);
-            const components = {};
-            for (const [name, frag] of Object.entries(
-              parsed.fragments
-            )) {
-              if (frag.performance) {
-                components[name] = frag.performance;
-              }
-            }
-            res.setHeader("Content-Type", "application/json");
-            res.end(
-              JSON.stringify({
-                summary: parsed.performanceSummary ?? null,
-                components
-              })
-            );
-          } catch {
-            res.setHeader("Content-Type", "application/json");
-            res.end(JSON.stringify({ summary: null, components: {} }));
-          }
-          return;
-        }
-        if (req.url?.startsWith("/fragments/preview")) {
-          if (req.url === "/fragments/preview") {
-            res.writeHead(302, { Location: "/fragments/preview/" });
-            res.end();
-            return;
-          }
-          await servePreviewFrameHTML(res, _server);
-          return;
-        }
-        if (req.url === "/fragments" || req.url === "/fragments/") {
-          if (!req.url.endsWith("/")) {
-            res.writeHead(302, { Location: "/fragments/" });
-            res.end();
-            return;
-          }
-          serveViewerHTML(res, _server);
-          return;
-        }
-        next();
-      });
-      _server.httpServer?.once("listening", () => {
-        const address = _server.httpServer?.address();
-        const port = typeof address === "object" && address ? address.port : 6006;
-        console.log(
-          `
-  \u{1F4E6} Fragments Viewer: http://localhost:${port}/fragments/
-`
-        );
-      });
-    },
-    // Resolve virtual modules
-    resolveId(id) {
-      if (id === VIRTUAL_FRAGMENTS) {
-        return VIRTUAL_FRAGMENTS_RESOLVED;
-      }
-      if (id === VIRTUAL_VIEWER_ENTRY) {
-        return VIRTUAL_VIEWER_ENTRY_RESOLVED;
-      }
-      if (id === VIRTUAL_PREVIEW) {
-        return VIRTUAL_PREVIEW_RESOLVED;
-      }
-      return null;
-    },
-    // Load virtual modules
-    load(id) {
-      if (id === VIRTUAL_FRAGMENTS_RESOLVED) {
-        return generateFragmentsModule(fragmentFiles, config, previewConfigPath, projectRoot);
-      }
-      if (id === VIRTUAL_VIEWER_ENTRY_RESOLVED) {
-        return generateViewerEntry();
-      }
-      if (id === VIRTUAL_PREVIEW_RESOLVED) {
-        return generatePreviewModule(previewConfigPath);
-      }
-      return null;
-    },
-    // Handle HMR for fragment files
-    handleHotUpdate({ file, server: server2 }) {
-      if (fragmentFileSet.has(file)) {
-        const mod = server2.moduleGraph.getModuleById(VIRTUAL_FRAGMENTS_RESOLVED);
-        if (mod) {
-          server2.moduleGraph.invalidateModule(mod);
-        }
-        server2.ws.send({
-          type: "custom",
-          event: "fragments:update",
-          data: { file }
-        });
-        return [];
-      }
-    }
-  };
-  const jsxTransformPlugin = {
-    name: "fragments-jsx-transform",
-    enforce: "pre",
-    async load(id) {
-      if (!id.endsWith(".js")) return null;
-      if (!id.includes(".storybook")) return null;
-      const fs = await import("fs/promises");
-      let code;
-      try {
-        code = await fs.readFile(id, "utf-8");
-      } catch {
-        return null;
-      }
-      const hasOpeningTag = code.includes("<");
-      const hasSelfClosingTag = code.includes("/>");
-      const hasClosingTag = code.includes("</");
-      if (!hasOpeningTag || !hasSelfClosingTag && !hasClosingTag) return null;
-      try {
-        const result = await transform(code, {
-          loader: "jsx",
-          jsx: "automatic",
-          sourcefile: id,
-          sourcemap: true
-        });
-        return {
-          code: result.code,
-          map: result.map
-        };
-      } catch (error) {
-        console.warn(`[Fragments] JSX transform failed for ${id}:`, error instanceof Error ? error.message : error);
-        return null;
-      }
-    }
-  };
-  return [
-    // JSX transform for .js files (must run first)
-    jsxTransformPlugin,
-    // SVGR plugin to handle `import { ReactComponent } from "*.svg"` pattern
-    svgr({
-      svgrOptions: {
-        exportType: "named"
-        // Export as { ReactComponent }
-      },
-      include: "**/*.svg"
-    }),
-    // Main fragments plugin
-    mainPlugin
-  ];
-}
-function isStoryFile(filePath) {
-  return /\.stories\.(tsx?|jsx?)$/.test(filePath);
-}
-function getBaseComponentPath(filePath) {
-  return filePath.replace(/\.(fragment|stories)\.(tsx?|jsx?)$/, "");
-}
-function extractComponentName(filePath) {
-  const match = filePath.match(/([^/\\]+)\.(fragment|stories)\.(tsx?|jsx?)$/);
-  return match ? match[1] : filePath.split("/").pop() || filePath;
-}
-async function readProjectPackageName(root) {
-  try {
-    const pkgJson = JSON.parse(await readFile(resolve(root, "package.json"), "utf-8"));
-    return pkgJson.name || null;
-  } catch {
-    return null;
-  }
-}
-async function extractDependenciesFromSource(absolutePath) {
-  try {
-    const source = await readFile(absolutePath, "utf-8");
-    const depsMatch = source.match(/dependencies:\s*\[([\s\S]*?)\]/);
-    if (!depsMatch) return [];
-    const names = [];
-    const nameRegex = /name:\s*['"]([^'"]+)['"]/g;
-    let match;
-    while ((match = nameRegex.exec(depsMatch[1])) !== null) {
-      names.push(match[1]);
-    }
-    return names;
-  } catch {
-    return [];
-  }
-}
-async function generateFragmentsModule(fragmentFiles, config, previewConfigPath, projectRoot) {
-  const authoredVariantCodeCache = /* @__PURE__ */ new Map();
-  async function loadAuthoredVariantCode(fragmentFilePath) {
-    if (authoredVariantCodeCache.has(fragmentFilePath)) {
-      return authoredVariantCodeCache.get(fragmentFilePath);
-    }
-    try {
-      const source = await readFile(fragmentFilePath, "utf-8");
-      const parsed = parseFragmentFile(source, fragmentFilePath);
-      const variantCodeByName = {};
-      for (const variant of parsed.variants) {
-        if (typeof variant.code !== "string") continue;
-        const normalized = variant.code.trim();
-        if (normalized.length === 0) continue;
-        variantCodeByName[variant.name] = normalized;
-      }
-      authoredVariantCodeCache.set(fragmentFilePath, variantCodeByName);
-      return variantCodeByName;
-    } catch {
-      authoredVariantCodeCache.set(fragmentFilePath, {});
-      return {};
-    }
-  }
-  const storyOnlyFiles = fragmentFiles.filter((f) => isStoryFile(f.relativePath));
-  const { detectSubComponentPaths: _detectSubs } = await import("./core/index.js");
-  const subComponentMap = _detectSubs(storyOnlyFiles);
-  const filesByBasePath = /* @__PURE__ */ new Map();
-  for (const file of fragmentFiles) {
-    const basePath = getBaseComponentPath(file.relativePath);
-    const isStory = isStoryFile(file.relativePath);
-    const existing = filesByBasePath.get(basePath) || {};
-    if (isStory) {
-      existing.storyFile = file;
-    } else {
-      existing.fragmentFile = file;
-    }
-    filesByBasePath.set(basePath, existing);
-  }
-  const loaderEntries = await Promise.all(
-    Array.from(filesByBasePath.values()).map(async (files) => {
-      const primaryFile = files.storyFile || files.fragmentFile;
-      if (!primaryFile) return null;
-      const isStory = !!files.storyFile;
-      const metadataPath = files.storyFile && files.fragmentFile ? files.fragmentFile.absolutePath : null;
-      const codeSourceFile = files.fragmentFile && files.fragmentFile.absolutePath ? files.fragmentFile.absolutePath : !isStory ? primaryFile.absolutePath : null;
-      const authoredVariantCode = codeSourceFile ? await loadAuthoredVariantCode(codeSourceFile) : {};
-      const componentName = extractComponentName(primaryFile.relativePath);
-      const fragmentSource = files.fragmentFile || primaryFile;
-      const dependencies = await extractDependenciesFromSource(fragmentSource.absolutePath);
-      const parentComponent = isStory ? subComponentMap.get(primaryFile.relativePath) : void 0;
-      return `  {
-    path: "${primaryFile.relativePath}",
-    isStory: ${isStory},
-    componentName: ${JSON.stringify(componentName)},
-    dependencies: ${JSON.stringify(dependencies)},
-    isSubComponent: ${!!parentComponent},
-    parentComponent: ${parentComponent ? JSON.stringify(parentComponent) : "null"},
-    loader: () => import("${primaryFile.absolutePath}"),
-    metadataLoader: ${metadataPath ? `() => import("${metadataPath}")` : "null"},
-    authoredVariantCode: ${JSON.stringify(authoredVariantCode)}
-  }`;
-    })
-  );
-  const loaders = loaderEntries.filter(Boolean).join(",\n");
-  const previewImport = previewConfigPath ? `import * as previewConfig from "virtual:fragments-preview";` : "";
-  const previewSetup = previewConfigPath ? `
-// Set global preview config before loading fragments
-setPreviewConfig({
-  decorators: previewConfig.decorators,
-  parameters: previewConfig.parameters,
-  globalTypes: previewConfig.globalTypes,
-  args: previewConfig.args,
-  argTypes: previewConfig.argTypes,
-  loaders: previewConfig.loaders,
-});
-` : "";
-  const storybookFilterConfig = JSON.stringify(config.storybook ?? {});
-  return `
-import { storyModuleToFragment, setPreviewConfig, checkStoryExclusion, isForceIncluded, isConfigExcluded } from "@fragments-sdk/cli/core";
-${previewImport}
-${previewSetup}
-// Storybook filter config (deep-merged with defaults at build time)
-const storybookFilterConfig = ${storybookFilterConfig};
-
-// Lazy fragment loaders (supports both .fragment.tsx and .stories.tsx)
-const fragmentLoaders = [
-${loaders}
-];
-
-// Cache for loaded fragments
-const loadedFragments = new Map();
-
-/**
- * Merge metadata from a fragment file into a story-based fragment.
- * This preserves Figma URLs and other AI-agent focused data.
- */
-function mergeMetadata(fragment, metadataModule) {
-  if (!metadataModule?.default) return fragment;
-
-  const metadata = metadataModule.default;
-
-  // Merge meta-level Figma URL
-  if (metadata.meta?.figma && !fragment.meta.figma) {
-    fragment.meta.figma = metadata.meta.figma;
-  }
-
-  // Merge description if not present
-  if (metadata.meta?.description && !fragment.meta.description) {
-    fragment.meta.description = metadata.meta.description;
-  }
-
-  // Merge variant-level Figma URLs
-  if (metadata.variants && fragment.variants) {
-    for (const metaVariant of metadata.variants) {
-      const fragmentVariant = fragment.variants.find(v => v.name === metaVariant.name);
-      if (!fragmentVariant) continue;
-
-      // Use authored code snippets from fragment metadata when story variants
-      // don't define their own code.
-      if (metaVariant.code && !fragmentVariant.code) {
-        fragmentVariant.code = metaVariant.code;
-      }
-
-      if (metaVariant.figma && !fragmentVariant.figma) {
-        fragmentVariant.figma = metaVariant.figma;
-      }
-    }
-  }
-
-  return fragment;
-}
-
-function mergeAuthoredVariantCode(fragment, authoredVariantCode) {
-  if (!fragment?.variants || !authoredVariantCode) return fragment;
-
-  for (const variant of fragment.variants) {
-    if (!variant || variant.code) continue;
-    const code = authoredVariantCode[variant.name];
-    if (typeof code === "string" && code.trim().length > 0) {
-      variant.code = code;
-    }
-  }
-
-  return fragment;
-}
-
-// Diagnostics: track exclusions for FRAGMENTS_DEBUG
-const exclusionLog = [];
-
-/**
- * Try to load a paired .fragment.tsx file as fallback when a story is excluded.
- * Returns the fragment if available, null otherwise.
- */
-async function tryFallbackFragment(loader) {
-  if (!loader.metadataLoader) return null;
-  try {
-    const mod = await loader.metadataLoader();
-    return mod?.default ? { path: loader.path, fragment: mod.default } : null;
-  } catch { return null; }
-}
-
-// Load all fragments (for initial render)
-// Gracefully handles individual failures - one bad story won't break all fragments
-// Applies smart filtering for Storybook stories (SVG icons, deprecated, test stories, sub-components)
-export async function loadAllFragments() {
-  const results = await Promise.all(
-    fragmentLoaders.map(async (loader) => {
-      try {
-        if (loadedFragments.has(loader.path)) {
-          const cached = loadedFragments.get(loader.path);
-          return cached ? { path: loader.path, fragment: cached } : null;
-        }
-
-        // --- Pre-load filtering (config-level and sub-component checks) ---
-        if (loader.isStory) {
-          // Force-include bypasses all filters
-          if (!isForceIncluded(loader.componentName, storybookFilterConfig)) {
-            // Config explicit exclude
-            if (isConfigExcluded(loader.componentName, storybookFilterConfig)) {
-              exclusionLog.push({ component: loader.componentName, reason: 'config-excluded', detail: 'Matches storybook.exclude pattern', path: loader.path });
-              const fallback = await tryFallbackFragment(loader);
-              if (fallback) return fallback;
-              loadedFragments.set(loader.path, null);
-              return null;
-            }
-
-            // Sub-component check (directory-based, computed at build time)
-            if (loader.isSubComponent && storybookFilterConfig.excludeSubComponents !== false) {
-              exclusionLog.push({ component: loader.componentName, reason: 'sub-component', detail: 'Sub-component of ' + loader.parentComponent, path: loader.path });
-              const fallback = await tryFallbackFragment(loader);
-              if (fallback) return fallback;
-              loadedFragments.set(loader.path, null);
-              return null;
-            }
-          }
-        }
-
-        const module = await loader.loader();
-
-        // Convert story modules to fragments at runtime
-        let fragment;
-        if (loader.isStory) {
-          fragment = storyModuleToFragment(module, loader.path);
-          // storyModuleToFragment returns null for stories without a component
-          if (!fragment) {
-            loadedFragments.set(loader.path, null);
-            return null;
-          }
-
-          // --- Post-load filtering (needs loaded module data) ---
-          if (!isForceIncluded(loader.componentName, storybookFilterConfig)) {
-            const meta = module.default || {};
-            const exclusion = checkStoryExclusion({
-              storybookTitle: meta.title,
-              componentName: fragment.meta?.name || loader.componentName,
-              componentDisplayName: meta.component?.displayName,
-              componentFunctionName: meta.component?.name,
-              tags: meta.tags,
-              variantCount: fragment.variants?.length || 0,
-              filePath: loader.path,
-              config: storybookFilterConfig,
-            });
-
-            if (exclusion.excluded) {
-              exclusionLog.push({ component: fragment.meta?.name || loader.componentName, reason: exclusion.reason, detail: exclusion.detail, path: loader.path });
-              const fallback = await tryFallbackFragment(loader);
-              if (fallback) return fallback;
-              loadedFragments.set(loader.path, null);
-              return null;
-            }
-          }
-        } else {
-          fragment = module.default;
-        }
-
-        // Merge metadata from corresponding fragment file if available
-        if (loader.metadataLoader) {
-          try {
-            const metadataModule = await loader.metadataLoader();
-            fragment = mergeMetadata(fragment, metadataModule);
-          } catch (metaError) {
-            // Metadata loading is optional - don't fail if it errors
-            console.warn("[Fragments] Could not load metadata for " + loader.path + ":", metaError.message);
-          }
-        }
-
-        fragment = mergeAuthoredVariantCode(fragment, loader.authoredVariantCode);
-
-        loadedFragments.set(loader.path, fragment);
-        return { path: loader.path, fragment };
-      } catch (error) {
-        console.warn("[Fragments] Failed to load " + loader.path + ":", error.message);
-        // Create an error stub so the component still appears in the sidebar
-        // with a helpful message about what went wrong
-        return {
-          path: loader.path,
-          fragment: {
-            meta: {
-              name: loader.componentName || loader.path,
-              description: 'Failed to load',
-              category: '',
-            },
-            variants: [],
-            _loadError: {
-              message: error.message,
-              dependencies: loader.dependencies || [],
-            },
-          },
-        };
-      }
-    })
-  );
-
-  // Log exclusions in debug mode
-  if (exclusionLog.length > 0) {
-    console.log("[Fragments] Filtered " + exclusionLog.length + " component(s)");
-    if (typeof process !== 'undefined' && process.env?.FRAGMENTS_DEBUG) {
-      console.table(exclusionLog);
-    }
-  }
-
-  // Filter out nulls (fragments that had no component)
-  return results.filter(r => r !== null);
-}
-
-// Load a single fragment by path
-export async function loadFragment(path) {
-  const loader = fragmentLoaders.find(l => l.path === path);
-  if (!loader) return null;
-
-  if (loadedFragments.has(path)) {
-    return loadedFragments.get(path);
-  }
-
-  const module = await loader.loader();
-
-  // Convert story modules to fragments at runtime
-  let fragment;
-  if (loader.isStory) {
-    fragment = storyModuleToFragment(module, path);
-  } else {
-    fragment = module.default;
-  }
-
-  // Merge metadata from corresponding fragment file if available
-  if (loader.metadataLoader && fragment) {
-    try {
-      const metadataModule = await loader.metadataLoader();
-      fragment = mergeMetadata(fragment, metadataModule);
-    } catch (metaError) {
-      console.warn("[Fragments] Could not load metadata for " + path + ":", metaError.message);
-    }
-  }
-
-  if (fragment) {
-    fragment = mergeAuthoredVariantCode(fragment, loader.authoredVariantCode);
-  }
-
-  if (fragment) {
-    loadedFragments.set(path, fragment);
-  }
-  return fragment;
-}
-
-// For backwards compatibility, load all fragments synchronously on import
-// This is still lazy per-file but awaited at module load
-let fragments = [];
-const fragmentsPromise = loadAllFragments().then(s => { fragments = s; return s; });
-
-export { fragments, fragmentsPromise, exclusionLog };
-export const config = ${JSON.stringify(config)};
-
-// Auto-detect consumer package name from package.json
-export const projectPackageName = ${JSON.stringify(await readProjectPackageName(projectRoot))};
-
-// HMR support
-if (import.meta.hot) {
-  import.meta.hot.accept();
-
-  import.meta.hot.on("fragments:update", (data) => {
-    console.log("[Fragments] File updated:", data.file);
-    // Clear cache for the updated file (handles both .fragment and .stories)
-    for (const [path, _] of loadedFragments) {
-      const basePath = path.replace(/\\.(fragment|stories)\\.tsx?$/, '');
-      if (data.file.includes(basePath)) {
-        loadedFragments.delete(path);
-      }
-    }
-    // Trigger re-render in viewer
-    window.dispatchEvent(new CustomEvent("fragments:update"));
-  });
-}
-`;
-}
-function generateViewerEntry() {
-  return `
-import { fragments, config } from "virtual:fragments";
-
-// Re-export for viewer
-export { fragments, config };
-
-// Initialize viewer
-console.log("[Fragments] Loaded", fragments.length, "fragment(s)");
-`;
-}
-async function loadFragmentsForContext(_server, _fragmentFiles, _config, configDir) {
-  const { join: join2 } = await import("path");
-  const fragmentsJsonPath = join2(configDir || process.cwd(), BRAND.outFile);
-  try {
-    const content = await readFile(fragmentsJsonPath, "utf-8");
-    const data = JSON.parse(content);
-    return Object.values(data.fragments || {});
-  } catch (error) {
-    console.warn(
-      `[${BRAND.name}] Failed to load ${BRAND.outFile} for context:`,
-      error
-    );
-    console.warn(`[${BRAND.name}] Run '${BRAND.cliCommand} build' to generate ${BRAND.outFile}`);
-    return [];
-  }
-}
-async function serveViewerHTML(res, server) {
-  const viewerSrc = viewerAssetsRoot;
-  const viewerPkgRoot = resolve(viewerSrc, "..");
-  const entryPath = resolve(viewerSrc, "entry.tsx");
-  try {
-    let html = await readFile(resolve(viewerPkgRoot, "index.html"), "utf-8");
-    html = html.replace("/src/entry.tsx", entryPath);
-    html = await server.transformIndexHtml("/fragments/", html);
-    res.writeHead(200, { "Content-Type": "text/html" });
-    res.end(html);
-  } catch (error) {
-    console.error("[Fragments] Error serving viewer:", error);
-    res.writeHead(500, { "Content-Type": "text/plain" });
-    res.end("Error loading Fragments viewer");
-  }
-}
-async function servePreviewFrameHTML(res, server) {
-  const viewerSrc = viewerAssetsRoot;
-  const entryPath = resolve(viewerSrc, "preview-frame-entry.tsx");
-  try {
-    let html = await readFile(resolve(viewerSrc, "preview-frame.html"), "utf-8");
-    html = html.replace("/src/preview-frame-entry.tsx", entryPath);
-    html = await server.transformIndexHtml("/fragments/preview/", html);
-    res.writeHead(200, { "Content-Type": "text/html" });
-    res.end(html);
-  } catch (error) {
-    console.error("[Fragments] Error serving preview frame:", error);
-    res.writeHead(500, { "Content-Type": "text/plain" });
-    res.end("Error loading preview frame");
-  }
-}
-async function parseJsonBody(req) {
-  return new Promise((resolve3, reject) => {
-    let body = "";
-    req.on("data", (chunk) => {
-      body += chunk.toString();
-    });
-    req.on("end", () => {
-      try {
-        resolve3(JSON.parse(body));
-      } catch (error) {
-        reject(new Error("Invalid JSON body"));
-      }
-    });
-    req.on("error", reject);
-  });
-}
-async function loadFragmentsForRender(fragmentFiles, configDir) {
-  const { join: join2 } = await import("path");
-  const fragmentsJsonPath = join2(configDir, BRAND.outFile);
-  try {
-    const content = await readFile(fragmentsJsonPath, "utf-8");
-    const data = JSON.parse(content);
-    const fragmentEntries = Object.values(data.fragments || {});
-    if (fragmentEntries.length > 0) {
-      return fragmentEntries.map((fragment) => ({
-        path: fragment.filePath,
-        fragment: { meta: { name: fragment.meta.name } }
-      }));
-    }
-  } catch {
-  }
-  return fragmentFiles.map((f) => {
-    let name;
-    if (isStoryFile(f.relativePath)) {
-      const match = f.relativePath.match(/\/([^/]+)\.stories\./);
-      name = match ? match[1] : f.relativePath;
-    } else {
-      const match = f.relativePath.match(/\/([^/]+)\.fragment\./);
-      name = match ? match[1] : f.relativePath;
-    }
-    return {
-      path: f.relativePath,
-      fragment: { meta: { name } }
-    };
-  });
-}
-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 viewerRoot = viewerAssetsRoot;
-  try {
-    let html = await readFile(
-      resolve(viewerRoot, "render-template.html"),
-      "utf-8"
-    );
-    html = html.replace(
-      "<!-- RENDER_SCRIPT_PLACEHOLDER -->",
-      `<script type="module">${renderScript}</script>`
-    );
-    const uniqueUrl = `/fragments/__render__/${Date.now()}`;
-    html = await server.transformIndexHtml(uniqueUrl, html);
-    res.writeHead(200, { "Content-Type": "text/html" });
-    res.end(html);
-  } catch (error) {
-    console.error("[Fragments] Error serving render page:", error);
-    res.writeHead(500, { "Content-Type": "text/plain" });
-    res.end("Error loading render page");
-  }
-}
-async function captureRender(url, viewport) {
-  const { pool, bufferToBase64Url } = 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: 1e4 }
-    );
-    const error = await page.evaluate(() => window.__RENDER_ERROR__);
-    if (error) {
-      throw new Error(`Render error: ${error}`);
-    }
-    const element = await page.$("#render-root");
-    if (!element) {
-      throw new Error("Render root element not found");
-    }
-    const screenshot = await element.screenshot({ type: "png" });
-    return bufferToBase64Url(screenshot);
-  } finally {
-    await page.close();
-    pool.release(ctx);
-  }
-}
-async function captureRenderWithStyles(url, viewport, extractStyles) {
-  const { pool, bufferToBase64Url } = 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: 1e4 }
-    );
-    const error = await page.evaluate(() => window.__RENDER_ERROR__);
-    if (error) {
-      throw new Error(`Render error: ${error}`);
-    }
-    const element = await page.$("#render-root");
-    if (!element) {
-      throw new Error("Render root element not found");
-    }
-    let computedStyles = null;
-    if (extractStyles) {
-      computedStyles = await page.evaluate(() => {
-        const root = document.getElementById("render-root");
-        if (!root) return null;
-        const isVisibleColor = (color) => {
-          if (!color) return false;
-          if (color === "transparent") return false;
-          if (color === "rgba(0, 0, 0, 0)") return false;
-          if (color.includes("rgba") && color.includes(", 0)")) return false;
-          return true;
-        };
-        const extractStylesFromElement = (el) => {
-          const styles = window.getComputedStyle(el);
-          const relevantProps = [
-            "backgroundColor",
-            "borderColor",
-            "borderWidth",
-            "borderRadius",
-            "fontFamily",
-            "fontSize",
-            "fontWeight",
-            "lineHeight",
-            "letterSpacing",
-            "textAlign",
-            "boxShadow",
-            "padding",
-            "paddingTop",
-            "paddingRight",
-            "paddingBottom",
-            "paddingLeft",
-            "gap",
-            "opacity",
-            "width",
-            "height"
-          ];
-          const result2 = {};
-          for (const prop of relevantProps) {
-            const value = styles.getPropertyValue(
-              prop.replace(/([A-Z])/g, "-$1").toLowerCase()
-            );
-            if (value) {
-              result2[prop] = value;
-            }
-          }
-          return result2;
-        };
-        const candidates = root.querySelectorAll("*");
-        let bestElement = null;
-        let bestScore = -1;
-        for (const el of candidates) {
-          const htmlEl = el;
-          const styles = window.getComputedStyle(htmlEl);
-          let score = 0;
-          const bg = styles.backgroundColor;
-          if (isVisibleColor(bg)) {
-            score += 10;
-          }
-          const border = styles.borderWidth;
-          if (border && border !== "0px") {
-            score += 3;
-          }
-          const boxShadow = styles.boxShadow;
-          if (boxShadow && boxShadow !== "none") {
-            score += 3;
-          }
-          const tagName = htmlEl.tagName.toLowerCase();
-          if (["button", "a", "input", "select", "textarea"].includes(tagName)) {
-            score += 5;
-          }
-          if (htmlEl.getAttribute("role") === "button") {
-            score += 5;
-          }
-          const rect = htmlEl.getBoundingClientRect();
-          if (rect.width < 10 || rect.height < 10) {
-            score -= 10;
-          }
-          if (rect.width > 500 || rect.height > 500) {
-            score -= 3;
-          }
-          if (score > bestScore) {
-            bestScore = score;
-            bestElement = htmlEl;
-          }
-        }
-        if (!bestElement) {
-          bestElement = root.firstElementChild;
-        }
-        if (!bestElement) return null;
-        const result = extractStylesFromElement(bestElement);
-        if (result.paddingTop && result.paddingRight && result.paddingBottom && result.paddingLeft) {
-          const t = result.paddingTop;
-          const r = result.paddingRight;
-          const b = result.paddingBottom;
-          const l = result.paddingLeft;
-          if (t === r && r === b && b === l) {
-            result.padding = t;
-          } else if (t === b && r === l) {
-            result.padding = `${t} ${r}`;
-          } else {
-            result.padding = `${t} ${r} ${b} ${l}`;
-          }
-        }
-        return result;
-      });
-    }
-    const screenshot = await element.screenshot({ type: "png" });
-    return {
-      screenshot: bufferToBase64Url(screenshot),
-      computedStyles
-    };
-  } finally {
-    await page.close();
-    pool.release(ctx);
-  }
-}
-async function loadFullFragmentForCompare(_server, _fragmentFiles, componentName, variantName, configDir) {
-  const { join: join2 } = await import("path");
-  const fragmentsJsonPath = join2(configDir || process.cwd(), BRAND.outFile);
-  try {
-    const content = await readFile(fragmentsJsonPath, "utf-8");
-    const data = JSON.parse(content);
-    const fragment = data.fragments[componentName];
-    if (!fragment) {
-      return null;
-    }
-    if (variantName && fragment.variants) {
-      const variant = fragment.variants.find((v) => v.name === variantName);
-      if (variant?.figma) {
-        return { figmaUrl: variant.figma };
-      }
-    }
-    if (fragment.meta.figma) {
-      return { figmaUrl: fragment.meta.figma };
-    }
-    return null;
-  } catch {
-    console.warn(
-      `[${BRAND.name}] ${BRAND.outFile} not found, run '${BRAND.cliCommand} build' first`
-    );
-    return null;
-  }
-}
-async function compareImages(image1Base64, image2Base64, threshold) {
-  const { DiffEngine, base64UrlToBuffer, bufferToBase64Url } = await import("./service-HKJ6B7P7.js");
-  const { PNG } = await import("pngjs");
-  const buffer1 = base64UrlToBuffer(image1Base64);
-  const buffer2 = base64UrlToBuffer(image2Base64);
-  const png1 = PNG.sync.read(buffer1);
-  const png2 = PNG.sync.read(buffer2);
-  let finalBuffer1 = buffer1;
-  let finalBuffer2 = buffer2;
-  if (png1.width !== png2.width || png1.height !== png2.height) {
-    const targetWidth = Math.max(png1.width, png2.width);
-    const targetHeight = Math.max(png1.height, png2.height);
-    if (png1.width !== targetWidth || png1.height !== targetHeight) {
-      finalBuffer1 = await resizePng(
-        buffer1,
-        png1.width,
-        png1.height,
-        targetWidth,
-        targetHeight
-      );
-    }
-    if (png2.width !== targetWidth || png2.height !== targetHeight) {
-      finalBuffer2 = await resizePng(
-        buffer2,
-        png2.width,
-        png2.height,
-        targetWidth,
-        targetHeight
-      );
-    }
-  }
-  const screenshot1 = {
-    data: finalBuffer1,
-    hash: "",
-    viewport: { width: png1.width, height: png1.height },
-    capturedAt: /* @__PURE__ */ new Date(),
-    metadata: {
-      component: "",
-      variant: "",
-      theme: "light",
-      renderTimeMs: 0,
-      captureTimeMs: 0
-    }
-  };
-  const screenshot2 = {
-    data: finalBuffer2,
-    hash: "",
-    viewport: { width: png2.width, height: png2.height },
-    capturedAt: /* @__PURE__ */ new Date(),
-    metadata: {
-      component: "",
-      variant: "",
-      theme: "light",
-      renderTimeMs: 0,
-      captureTimeMs: 0
-    }
-  };
-  const diffEngine = new DiffEngine(threshold);
-  const result = diffEngine.compare(screenshot1, screenshot2, { threshold });
-  return {
-    matches: result.matches,
-    diffPercentage: result.diffPercentage,
-    diffImage: result.diffImage ? bufferToBase64Url(result.diffImage) : void 0,
-    changedRegions: result.changedRegions
-  };
-}
-async function resizePng(buffer, srcWidth, srcHeight, targetWidth, targetHeight) {
-  const { PNG } = await import("pngjs");
-  const srcPng = PNG.sync.read(buffer);
-  const dstPng = new PNG({
-    width: targetWidth,
-    height: targetHeight,
-    fill: true
-  });
-  for (let y = 0; y < targetHeight; y++) {
-    for (let x = 0; x < targetWidth; x++) {
-      const idx = (y * targetWidth + x) * 4;
-      dstPng.data[idx] = 255;
-      dstPng.data[idx + 1] = 255;
-      dstPng.data[idx + 2] = 255;
-      dstPng.data[idx + 3] = 255;
-    }
-  }
-  for (let y = 0; y < srcHeight; y++) {
-    for (let x = 0; x < srcWidth; x++) {
-      const srcIdx = (y * srcWidth + x) * 4;
-      const dstIdx = (y * targetWidth + x) * 4;
-      dstPng.data[dstIdx] = srcPng.data[srcIdx];
-      dstPng.data[dstIdx + 1] = srcPng.data[srcIdx + 1];
-      dstPng.data[dstIdx + 2] = srcPng.data[srcIdx + 2];
-      dstPng.data[dstIdx + 3] = srcPng.data[srcIdx + 3];
-    }
-  }
-  return PNG.sync.write(dstPng);
-}
-
-// src/viewer/server.ts
-var __dirname2 = dirname2(fileURLToPath2(import.meta.url));
-var cliPackageRoot = resolve2(__dirname2, "..");
-var packagesRoot = resolve2(cliPackageRoot, "..");
-var localUiLibRoot = resolve2(packagesRoot, "../libs/ui/src");
-var localWebMCPRoot = resolve2(packagesRoot, "webmcp/src");
-var localContextRoot = resolve2(packagesRoot, "context/src");
-function resolveViewerRoot(nodeModulesDir) {
-  const monorepoPath = resolve2(packagesRoot, "viewer");
-  if (existsSync2(join(monorepoPath, "src/shared/index.ts"))) {
-    return monorepoPath;
-  }
-  const npmPath = join(nodeModulesDir, "@fragments-sdk/viewer");
-  if (existsSync2(npmPath)) {
-    return npmPath;
-  }
-  const cliNpmPath = join(cliPackageRoot, "node_modules/@fragments-sdk/viewer");
-  if (existsSync2(cliNpmPath)) {
-    return cliNpmPath;
-  }
-  return monorepoPath;
-}
-function resolveUiLib(nodeModulesDir) {
-  const localIndex = join(localUiLibRoot, "index.ts");
-  if (existsSync2(localIndex)) {
-    return localUiLibRoot;
-  }
-  const installedUi = join(nodeModulesDir, "@fragments-sdk/ui/src/index.ts");
-  if (existsSync2(installedUi)) {
-    return resolve2(dirname2(installedUi));
-  }
-  const installedUiDist = join(nodeModulesDir, "@fragments-sdk/ui");
-  if (existsSync2(installedUiDist)) {
-    return installedUiDist;
-  }
-  return localUiLibRoot;
-}
-function resolveWebMCPLib(nodeModulesDir) {
-  const localIndex = join(localWebMCPRoot, "index.ts");
-  if (existsSync2(localIndex)) {
-    return localWebMCPRoot;
-  }
-  const installedSrc = join(nodeModulesDir, "@fragments-sdk/webmcp/src/index.ts");
-  if (existsSync2(installedSrc)) {
-    return resolve2(dirname2(installedSrc));
-  }
-  const installedDist = join(nodeModulesDir, "@fragments-sdk/webmcp");
-  if (existsSync2(installedDist)) {
-    return installedDist;
-  }
-  return localWebMCPRoot;
-}
-function resolveContextLib(nodeModulesDir) {
-  const localIndex = join(localContextRoot, "index.ts");
-  if (existsSync2(localIndex)) {
-    return localContextRoot;
-  }
-  const installedSrc = join(nodeModulesDir, "@fragments-sdk/context/src/index.ts");
-  if (existsSync2(installedSrc)) {
-    return resolve2(dirname2(installedSrc));
-  }
-  const installedDist = join(nodeModulesDir, "@fragments-sdk/context");
-  if (existsSync2(installedDist)) {
-    return installedDist;
-  }
-  return localContextRoot;
-}
-function resolveViewerLib(nodeModulesDir) {
-  const viewerRoot = resolveViewerRoot(nodeModulesDir);
-  return resolve2(viewerRoot, "src");
-}
-function cjsInteropPlugin(nodeModulesPath) {
-  const virtualModules = {
-    // use-sync-external-store/shim is CJS-only, used by @base-ui/react.
-    // Since React 18+, useSyncExternalStore is built-in — redirect to React's native export.
-    "use-sync-external-store/shim": `export { useSyncExternalStore } from 'react';`,
-    // use-sync-external-store/shim/with-selector is CJS-only, used by @base-ui/utils.
-    // Provides useSyncExternalStoreWithSelector — a selector wrapper around useSyncExternalStore.
-    "use-sync-external-store/shim/with-selector": `
-import { useSyncExternalStore, useRef, useEffect, useMemo, useDebugValue } from 'react';
-export function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-  var instRef = useRef(null);
-  if (instRef.current === null) instRef.current = { hasValue: false, value: null };
-  var inst = instRef.current;
-  var _useMemo = useMemo(function () {
-    var hasMemo = false, memoizedSnapshot, memoizedSelection;
-    function memoizedSelector(nextSnapshot) {
-      if (!hasMemo) {
-        hasMemo = true;
-        memoizedSnapshot = nextSnapshot;
-        var nextSelection = selector(nextSnapshot);
-        if (isEqual !== undefined && inst.hasValue && isEqual(inst.value, nextSelection))
-          return memoizedSelection = inst.value;
-        return memoizedSelection = nextSelection;
-      }
-      if (Object.is(memoizedSnapshot, nextSnapshot)) return memoizedSelection;
-      var nextSelection = selector(nextSnapshot);
-      if (isEqual !== undefined && isEqual(memoizedSelection, nextSelection)) {
-        memoizedSnapshot = nextSnapshot;
-        return memoizedSelection;
-      }
-      memoizedSnapshot = nextSnapshot;
-      return memoizedSelection = nextSelection;
-    }
-    var maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
-    return [function () { return memoizedSelector(getSnapshot()); },
-            maybeGetServerSnapshot === null ? undefined : function () { return memoizedSelector(maybeGetServerSnapshot()); }];
-  }, [getSnapshot, getServerSnapshot, selector, isEqual]);
-  var value = useSyncExternalStore(subscribe, _useMemo[0], _useMemo[1]);
-  useEffect(function () { inst.hasValue = true; inst.value = value; }, [value]);
-  useDebugValue(value);
-  return value;
-}`
-  };
-  return {
-    name: "fragments-cjs-interop",
-    enforce: "pre",
-    resolveId(source) {
-      if (source in virtualModules) {
-        return `\0cjs-interop:${source}`;
-      }
-      return void 0;
-    },
-    load(id) {
-      if (!id.startsWith("\0cjs-interop:")) return void 0;
-      const pkg = id.slice("\0cjs-interop:".length);
-      return virtualModules[pkg];
-    }
-  };
-}
-function optionalPeerDepsPlugin(uiLibRoot) {
-  const optionalDeps = [
-    "@tanstack/react-table",
-    "shiki",
-    "recharts",
-    "react-day-picker",
-    "date-fns",
-    "react-colorful",
-    "react-markdown",
-    "remark-gfm",
-    "@tiptap/react",
-    "@tiptap/starter-kit",
-    "@tiptap/extension-link"
-  ];
-  let resolvedUiRoot;
-  try {
-    resolvedUiRoot = realpathSync(uiLibRoot);
-  } catch {
-    resolvedUiRoot = uiLibRoot;
-  }
-  const availableDeps = /* @__PURE__ */ new Set();
-  for (const dep of optionalDeps) {
-    const depPath = join(uiLibRoot, "..", "node_modules", ...dep.split("/"));
-    if (existsSync2(depPath)) availableDeps.add(dep);
-  }
-  return {
-    name: "fragments:optional-peer-deps",
-    enforce: "pre",
-    transform(code, id) {
-      let resolvedId;
-      try {
-        resolvedId = realpathSync(id);
-      } catch {
-        resolvedId = id;
-      }
-      if (!resolvedId.startsWith(resolvedUiRoot)) return;
-      if (!id.endsWith(".tsx") && !id.endsWith(".ts")) return;
-      if (!code.includes("require(")) return;
-      let transformed = code;
-      const imports = [];
-      let counter = 0;
-      for (const dep of availableDeps) {
-        const escapedDep = dep.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-        const regex = new RegExp(`require\\(['"]${escapedDep}['"]\\)`, "g");
-        if (regex.test(code)) {
-          const varName = `__fui_dep_${counter++}`;
-          imports.push(`import * as ${varName} from '${dep}';`);
-          regex.lastIndex = 0;
-          transformed = transformed.replace(regex, varName);
-        }
-      }
-      if (imports.length > 0) {
-        transformed = imports.join("\n") + "\n" + transformed;
-        return { code: transformed, map: null };
-      }
-    }
-  };
-}
-async function detectTsconfigPaths(projectRoot) {
-  const aliases = {};
-  const tsconfigPath = join(projectRoot, "tsconfig.json");
-  if (!existsSync2(tsconfigPath)) return aliases;
-  try {
-    const content = await readFile2(tsconfigPath, "utf-8");
-    const cleaned = content.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
-    const tsconfig = JSON.parse(cleaned);
-    const paths = tsconfig?.compilerOptions?.paths;
-    const baseUrl = tsconfig?.compilerOptions?.baseUrl || ".";
-    if (paths) {
-      for (const [alias, targets] of Object.entries(paths)) {
-        const target = targets[0];
-        if (target) {
-          const cleanAlias = alias.replace("/*", "");
-          const cleanTarget = target.replace("/*", "");
-          aliases[cleanAlias] = resolve2(projectRoot, baseUrl, cleanTarget);
-        }
-      }
-    }
-  } catch {
-  }
-  return aliases;
-}
-async function detectStorybookAliases(projectRoot) {
-  const aliases = {};
-  const assetsDir = resolve2(projectRoot, "assets");
-  const fontsDir = resolve2(projectRoot, "assets/fonts");
-  if (existsSync2(fontsDir)) {
-    aliases["/fonts"] = fontsDir;
-  }
-  if (existsSync2(assetsDir)) {
-    aliases["/assets"] = assetsDir;
-  }
-  return aliases;
-}
-async function createDevServer(options = {}) {
-  const startTime = performance.now();
-  const {
-    port = 6006,
-    configPath,
-    open = true,
-    projectRoot = process.cwd()
-  } = options;
-  console.log("\n\u{1F527} Loading configuration...");
-  const { config, configDir } = await loadConfig(configPath);
-  const fragmentFiles = await discoverFragmentFiles(config, configDir);
-  const installedFiles = await discoverInstalledFragments(projectRoot);
-  const allFragmentFiles = [...fragmentFiles, ...installedFiles];
-  console.log(`\u{1F4E6} Found ${fragmentFiles.length} local + ${installedFiles.length} installed fragment file(s)`);
-  let projectViteConfig = {};
-  const viteConfigPath = findViteConfig(projectRoot);
-  if (viteConfigPath) {
-    console.log(`\u{1F4C4} Using project Vite config: ${viteConfigPath}`);
-    try {
-      const loaded = await loadConfigFromFile(
-        { command: "serve", mode: "development" },
-        viteConfigPath,
-        projectRoot
-      );
-      if (loaded) {
-        projectViteConfig = loaded.config;
-      }
-    } catch (error) {
-      console.warn("\u26A0\uFE0F  Could not load project Vite config:", error);
-    }
-  } else {
-    console.log("\u2139\uFE0F  No project Vite config found, using defaults");
-  }
-  const nodeModulesPath = findNodeModules(projectRoot);
-  const uiLibRoot = resolveUiLib(nodeModulesPath);
-  const viewerRoot = resolveViewerRoot(nodeModulesPath);
-  const viewerLibRoot = resolveViewerLib(nodeModulesPath);
-  const webmcpLibRoot = resolveWebMCPLib(nodeModulesPath);
-  const contextLibRoot = resolveContextLib(nodeModulesPath);
-  const isWebMCPSource = existsSync2(join(webmcpLibRoot, "react/index.ts"));
-  const isContextSource = existsSync2(join(contextLibRoot, "types/index.ts"));
-  console.log(`\u{1F4C1} Using node_modules: ${nodeModulesPath}`);
-  const tsconfigAliases = await detectTsconfigPaths(projectRoot);
-  const storybookAliases = await detectStorybookAliases(projectRoot);
-  const storybookDir = resolve2(projectRoot, ".storybook");
-  const hasStorybookDir = existsSync2(storybookDir);
-  if (Object.keys(tsconfigAliases).length > 0) {
-    console.log(`\u{1F4CE} Detected ${Object.keys(tsconfigAliases).length} tsconfig path alias(es)`);
-  }
-  if (hasStorybookDir) {
-    console.log(`\u{1F4D8} Detected .storybook directory`);
-  }
-  const installedPkgRoots = [...new Set(
-    installedFiles.map((f) => {
-      const idx = f.absolutePath.indexOf("/node_modules/");
-      if (idx === -1) return dirname2(f.absolutePath);
-      const afterNm = f.absolutePath.slice(idx + "/node_modules/".length);
-      const pkgName = afterNm.startsWith("@") ? afterNm.split("/").slice(0, 2).join("/") : afterNm.split("/")[0];
-      return resolve2(projectRoot, "node_modules", pkgName);
-    })
-  )];
-  const fragmentsConfig = {
-    configFile: false,
-    // Don't load config again
-    root: projectRoot,
-    // Run from PROJECT root
-    publicDir: resolve2(viewerRoot, "public"),
-    // Serve static assets (favicon) from viewer
-    base: "/",
-    server: {
-      port,
-      open: open ? "/fragments/" : false,
-      fs: {
-        // Allow serving files from viewer package, project, shared libs, node_modules root, and .storybook
-        allow: [
-          viewerRoot,
-          uiLibRoot,
-          viewerLibRoot,
-          webmcpLibRoot,
-          contextLibRoot,
-          projectRoot,
-          configDir,
-          dirname2(nodeModulesPath),
-          ...hasStorybookDir ? [storybookDir] : [],
-          ...installedPkgRoots
-        ]
-      }
-    },
-    plugins: [
-      // React support (if not already in project config)
-      ...hasReactPlugin(projectViteConfig) ? [] : [react()],
-      // CJS interop for packages imported from within node_modules
-      cjsInteropPlugin(nodeModulesPath),
-      // Rewrite require() → ESM import for optional peer deps (e.g., @tanstack/react-table)
-      optionalPeerDepsPlugin(uiLibRoot),
-      // Fragments plugins (array including SVGR)
-      ...fragmentsPlugin({
-        fragmentFiles: allFragmentFiles,
-        config,
-        projectRoot
-      })
-    ],
-    // CSS configuration — preserve original hyphenated class names in CSS modules
-    // Vite 6 defaults to camelCaseOnly, but our components use styles['gap-sm'] etc.
-    css: {
-      modules: {
-        localsConvention: "camelCase"
-      },
-      preprocessorOptions: {
-        scss: {
-          api: "modern-compiler",
-          loadPaths: [
-            resolve2(projectRoot, "src"),
-            resolve2(projectRoot, "src/styles")
-          ]
-        }
-      }
-    },
-    optimizeDeps: {
-      // Include common dependencies for faster startup
-      include: ["react", "react-dom", "react/jsx-runtime", "react/jsx-dev-runtime"]
-    },
-    // Ensure we can resolve viewer's dependencies
-    resolve: {
-      // Dedupe ensures all imports of these packages resolve to the same copy
-      dedupe: ["react", "react-dom"],
-      alias: {
-        // Project-specific aliases (tsconfig paths, Storybook static dirs)
-        // Listed first — Fragments-specific aliases below take precedence
-        ...tsconfigAliases,
-        ...storybookAliases,
-        // Resolve @fragments-sdk/ui to local source or installed package
-        "@fragments-sdk/ui": uiLibRoot,
-        // Resolve @fragments-sdk/viewer subpaths to viewer package source
-        "@fragments-sdk/viewer/shared": join(viewerLibRoot, "shared/index.ts"),
-        "@fragments-sdk/viewer/app": join(viewerLibRoot, "app/index.ts"),
-        "@fragments-sdk/viewer/docs-data": join(viewerLibRoot, "shared/docs-data/index.ts"),
-        // Resolve @fragments-sdk/webmcp subpaths to monorepo source or installed package
-        "@fragments-sdk/webmcp/react": isWebMCPSource ? join(webmcpLibRoot, "react/index.ts") : join(webmcpLibRoot, "dist/react/index.js"),
-        "@fragments-sdk/webmcp/fragments": isWebMCPSource ? join(webmcpLibRoot, "fragments/index.ts") : join(webmcpLibRoot, "dist/fragments/index.js"),
-        "@fragments-sdk/webmcp": webmcpLibRoot,
-        // Resolve @fragments-sdk/context subpaths to monorepo source or installed package
-        "@fragments-sdk/context/types": isContextSource ? join(contextLibRoot, "types/index.ts") : join(contextLibRoot, "dist/types/index.js"),
-        "@fragments-sdk/context/mcp-tools": isContextSource ? join(contextLibRoot, "mcp-tools/index.ts") : join(contextLibRoot, "dist/mcp-tools/index.js"),
-        "@fragments-sdk/context": contextLibRoot,
-        // Resolve @fragments-sdk/cli/core to the CLI's own core source
-        "@fragments-sdk/cli/core": resolve2(cliPackageRoot, "src/core/index.ts"),
-        // Ensure ALL react imports resolve to project's node_modules
-        // This is critical for viewer files loaded from outside project root
-        "react": safeRealpath(join(nodeModulesPath, "react")),
-        "react-dom": safeRealpath(join(nodeModulesPath, "react-dom")),
-        "react/jsx-runtime": safeRealpath(join(nodeModulesPath, "react/jsx-runtime")),
-        "react/jsx-dev-runtime": safeRealpath(join(nodeModulesPath, "react/jsx-dev-runtime"))
-      }
-    }
-  };
-  const mergedConfig = mergeConfig(projectViteConfig, fragmentsConfig);
-  console.log("\u{1F680} Starting dev server...\n");
-  const server = await createServer(mergedConfig);
-  await server.listen();
-  const startupTime = ((performance.now() - startTime) / 1e3).toFixed(2);
-  console.log(`\u26A1 Server ready in ${startupTime}s`);
-  return server;
-}
-function safeRealpath(p) {
-  try {
-    return realpathSync(p);
-  } catch {
-    return p;
-  }
-}
-function findNodeModules(startDir) {
-  let current = startDir;
-  while (current !== dirname2(current)) {
-    const nodeModulesPath = join(current, "node_modules");
-    if (existsSync2(join(nodeModulesPath, "react"))) {
-      return nodeModulesPath;
-    }
-    current = dirname2(current);
-  }
-  return join(startDir, "node_modules");
-}
-function findViteConfig(projectRoot) {
-  const configFiles = [
-    "vite.config.ts",
-    "vite.config.js",
-    "vite.config.mts",
-    "vite.config.mjs"
-  ];
-  for (const file of configFiles) {
-    const path = join(projectRoot, file);
-    if (existsSync2(path)) {
-      return path;
-    }
-  }
-  return null;
-}
-function hasReactPlugin(config) {
-  if (!config.plugins) return false;
-  const plugins = Array.isArray(config.plugins) ? config.plugins : [config.plugins];
-  return plugins.some((plugin) => {
-    if (!plugin) return false;
-    if (Array.isArray(plugin)) {
-      return plugin.some(
-        (p) => p && typeof p === "object" && "name" in p && p.name?.includes("react")
-      );
-    }
-    return typeof plugin === "object" && "name" in plugin && plugin.name?.includes("react");
-  });
-}
-export {
-  createDevServer,
-  fragmentsPlugin
-};
-//# sourceMappingURL=viewer-2TZS3NDL.js.map