@fragments-sdk/cli 0.5.2 → 0.7.0

package/dist/viewer-SUFOISZM.js

@@ -0,0 +1,1822 @@
+import { createRequire as __banner_createRequire } from 'module'; const require = __banner_createRequire(import.meta.url);
+import {
+  discoverInstalledFragments,
+  discoverSegmentFiles,
+  findPreviewConfigPath,
+  findStorybookDir,
+  generatePreviewModule,
+  loadConfig
+} from "./chunk-CVXKXVOY.js";
+import {
+  generateContext
+} from "./chunk-TJ34N7C7.js";
+import {
+  BRAND
+} from "./chunk-6JBGU74P.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, realpathSync } from "fs";
+import { fileURLToPath as fileURLToPath2 } from "url";
+
+// src/viewer/vite-plugin.ts
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+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 findSegmentByName(componentName, segments) {
+  const match = segments.find(
+    (s) => s.segment.meta.name.toLowerCase() === componentName.toLowerCase()
+  );
+  if (!match) return null;
+  return {
+    name: match.segment.meta.name,
+    path: match.path
+  };
+}
+function getAvailableComponents(segments) {
+  return segments.map((s) => s.segment.meta.name).sort();
+}
+function generateRenderScript(segmentPath, 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 segment to get the component
+async function render() {
+  const root = document.getElementById("render-root");
+
+  try {
+    // Dynamic import of the segment file
+    const segmentModule = await import("${segmentPath}");
+    const segment = segmentModule.default;
+
+    if (!segment || !segment.component) {
+      throw new Error("Segment does not export a component");
+    }
+
+    const Component = segment.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();
+`;
+}
+
+// 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 viewerAssetsRoot = resolve(__dirname, "..", "src/viewer");
+var pendingRenders = /* @__PURE__ */ new Map();
+var sharedRenderPool = null;
+var browserPoolModule = null;
+async function getSharedRenderPool() {
+  if (!browserPoolModule) {
+    browserPoolModule = await import("./service-T2L7VLTE.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 segmentsPlugin(options) {
+  const { segmentFiles, config, projectRoot } = options;
+  const VIRTUAL_SEGMENTS = `virtual:${BRAND.nameLower}`;
+  const VIRTUAL_SEGMENTS_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 segmentFileSet = new Set(segmentFiles.map((f) => f.absolutePath));
+  const mainPlugin = {
+    name: "segments",
+    // Add process.env shim and esbuild config for Storybook compatibility
+    config() {
+      return {
+        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 } = body;
+            if (!component) {
+              res.writeHead(400, { "Content-Type": "application/json" });
+              res.end(
+                JSON.stringify({ error: "Missing required field: component" })
+              );
+              return;
+            }
+            const loadedSegments = await loadSegmentsForRender(
+              segmentFiles,
+              projectRoot
+            );
+            const segmentInfo = findSegmentByName(component, loadedSegments);
+            if (!segmentInfo) {
+              const available = getAvailableComponents(loadedSegments);
+              res.writeHead(400, { "Content-Type": "application/json" });
+              res.end(
+                JSON.stringify({
+                  error: `Component '${component}' not found. Available: ${available.join(
+                    ", "
+                  )}`
+                })
+              );
+              return;
+            }
+            const segmentFile = segmentFiles.find(
+              (f) => f.relativePath === segmentInfo.path
+            );
+            if (!segmentFile) {
+              res.writeHead(500, { "Content-Type": "application/json" });
+              res.end(
+                JSON.stringify({ error: "Could not resolve segment file path" })
+              );
+              return;
+            }
+            const renderScript = generateRenderScript(
+              segmentFile.absolutePath,
+              segmentInfo.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] segmentFiles count:", segmentFiles.length);
+            console.log("[Fragments] First 3 segment files:", segmentFiles.slice(0, 3).map((f) => f.relativePath));
+            console.log("[Fragments] projectRoot:", projectRoot);
+            const loadedSegments = await loadSegmentsForRender(
+              segmentFiles,
+              projectRoot
+            );
+            console.log("[Fragments] loadedSegments count:", loadedSegments.length);
+            console.log("[Fragments] First 3 loaded:", loadedSegments.slice(0, 3).map((s) => s.segment.meta.name));
+            const segmentInfo = findSegmentByName(component, loadedSegments);
+            if (!segmentInfo) {
+              const available = getAvailableComponents(loadedSegments);
+              res.writeHead(400, { "Content-Type": "application/json" });
+              res.end(
+                JSON.stringify({
+                  error: `Component '${component}' not found. Available: ${available.join(
+                    ", "
+                  )}`
+                })
+              );
+              return;
+            }
+            const fullSegmentData = await loadFullSegmentForCompare(
+              _server,
+              segmentFiles,
+              component,
+              variant,
+              projectRoot
+            );
+            const effectiveFigmaUrl = figmaUrl || fullSegmentData?.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 segment 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 segmentFile = segmentFiles.find(
+              (f) => f.relativePath === segmentInfo.path
+            );
+            if (!segmentFile) {
+              res.writeHead(500, { "Content-Type": "application/json" });
+              res.end(
+                JSON.stringify({ error: "Could not resolve segment 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-T2L7VLTE.js");
+            const figmaClient = new FigmaClient({
+              accessToken: figmaToken
+            });
+            const { fileKey, nodeId } = figmaClient.parseUrl(effectiveFigmaUrl);
+            const renderScript = generateRenderScript(
+              segmentFile.absolutePath,
+              segmentInfo.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-T2L7VLTE.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-T2L7VLTE.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-T2L7VLTE.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 loadedSegments = await loadSegmentsForRender(segmentFiles, projectRoot);
+            const segmentInfo = findSegmentByName(component, loadedSegments);
+            if (!segmentInfo) {
+              const available = getAvailableComponents(loadedSegments);
+              res.writeHead(400, { "Content-Type": "application/json" });
+              res.end(JSON.stringify({
+                error: `Component '${component}' not found. Available: ${available.join(", ")}`
+              }));
+              return;
+            }
+            const segmentFile = segmentFiles.find(
+              (f) => f.relativePath === segmentInfo.path
+            );
+            if (!segmentFile) {
+              res.writeHead(500, { "Content-Type": "application/json" });
+              res.end(JSON.stringify({ error: "Could not resolve segment file path" }));
+              return;
+            }
+            const { getSharedTokenRegistry } = await import("./service-T2L7VLTE.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(
+              segmentFile.absolutePath,
+              segmentInfo.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?.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 compiledSegments = await loadSegmentsForContext(
+              _server,
+              segmentFiles,
+              config,
+              projectRoot
+            );
+            const { content, tokenEstimate } = generateContext(
+              compiledSegments,
+              {
+                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-W2HYIQW6.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) {
+              res.writeHead(400, { "Content-Type": "application/json" });
+              res.end(JSON.stringify({
+                error: "No token configuration found",
+                suggestion: "Add 'tokens' config to fragments.config.ts to enable fix generation"
+              }));
+              return;
+            }
+            const loadedSegments = await loadSegmentsForRender(segmentFiles, projectRoot);
+            const segmentInfo = findSegmentByName(component, loadedSegments);
+            if (!segmentInfo) {
+              const available = getAvailableComponents(loadedSegments);
+              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-T2L7VLTE.js");
+            const registry = getSharedTokenRegistry();
+            if (!registry.isInitialized()) {
+              await registry.initialize(config.tokens, projectRoot);
+            }
+            const segmentFile = segmentFiles.find(
+              (f) => f.relativePath === segmentInfo.path
+            );
+            const sourceFile = segmentFile?.relativePath || `${component}.tsx`;
+            const result = generateTokenPatches(
+              component,
+              [],
+              // Would be populated by actual style diffs
+              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?.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 === "/segments" || 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_SEGMENTS) {
+        return VIRTUAL_SEGMENTS_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_SEGMENTS_RESOLVED) {
+        return generateSegmentsModule(segmentFiles, config, previewConfigPath);
+      }
+      if (id === VIRTUAL_VIEWER_ENTRY_RESOLVED) {
+        return generateViewerEntry();
+      }
+      if (id === VIRTUAL_PREVIEW_RESOLVED) {
+        return generatePreviewModule(previewConfigPath);
+      }
+      return null;
+    },
+    // Handle HMR for segment files
+    handleHotUpdate({ file, server: server2 }) {
+      if (segmentFileSet.has(file)) {
+        const mod = server2.moduleGraph.getModuleById(VIRTUAL_SEGMENTS_RESOLVED);
+        if (mod) {
+          server2.moduleGraph.invalidateModule(mod);
+        }
+        server2.ws.send({
+          type: "custom",
+          event: "segments:update",
+          data: { file }
+        });
+        return [];
+      }
+    }
+  };
+  const jsxTransformPlugin = {
+    name: "segments-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 segments plugin
+    mainPlugin
+  ];
+}
+function isStoryFile(filePath) {
+  return /\.stories\.(tsx?|jsx?)$/.test(filePath);
+}
+function getBaseComponentPath(filePath) {
+  return filePath.replace(/\.(segment|stories)\.(tsx?|jsx?)$/, "");
+}
+function generateSegmentsModule(segmentFiles, config, previewConfigPath) {
+  const filesByBasePath = /* @__PURE__ */ new Map();
+  for (const file of segmentFiles) {
+    const basePath = getBaseComponentPath(file.relativePath);
+    const isStory = isStoryFile(file.relativePath);
+    const existing = filesByBasePath.get(basePath) || {};
+    if (isStory) {
+      existing.storyFile = file;
+    } else {
+      existing.segmentFile = file;
+    }
+    filesByBasePath.set(basePath, existing);
+  }
+  const loaders = Array.from(filesByBasePath.values()).map((files) => {
+    const primaryFile = files.storyFile || files.segmentFile;
+    if (!primaryFile) return null;
+    const isStory = !!files.storyFile;
+    const metadataPath = files.storyFile && files.segmentFile ? files.segmentFile.absolutePath : null;
+    return `  {
+    path: "${primaryFile.relativePath}",
+    isStory: ${isStory},
+    loader: () => import("${primaryFile.absolutePath}"),
+    metadataLoader: ${metadataPath ? `() => import("${metadataPath}")` : "null"}
+  }`;
+  }).filter(Boolean).join(",\n");
+  const previewImport = previewConfigPath ? `import * as previewConfig from "virtual:segments-preview";` : "";
+  const previewSetup = previewConfigPath ? `
+// Set global preview config before loading segments
+setPreviewConfig({
+  decorators: previewConfig.decorators,
+  parameters: previewConfig.parameters,
+  globalTypes: previewConfig.globalTypes,
+  args: previewConfig.args,
+  argTypes: previewConfig.argTypes,
+  loaders: previewConfig.loaders,
+});
+` : "";
+  return `
+import { storyModuleToSegment, setPreviewConfig } from "@fragments/core";
+${previewImport}
+${previewSetup}
+// Lazy segment loaders (supports both .segment.tsx and .stories.tsx)
+const segmentLoaders = [
+${loaders}
+];
+
+// Cache for loaded segments
+const loadedSegments = new Map();
+
+/**
+ * Merge metadata from a segment file into a story-based segment.
+ * This preserves Figma URLs and other AI-agent focused data.
+ */
+function mergeMetadata(segment, metadataModule) {
+  if (!metadataModule?.default) return segment;
+
+  const metadata = metadataModule.default;
+
+  // Merge meta-level Figma URL
+  if (metadata.meta?.figma && !segment.meta.figma) {
+    segment.meta.figma = metadata.meta.figma;
+  }
+
+  // Merge description if not present
+  if (metadata.meta?.description && !segment.meta.description) {
+    segment.meta.description = metadata.meta.description;
+  }
+
+  // Merge variant-level Figma URLs
+  if (metadata.variants && segment.variants) {
+    for (const metaVariant of metadata.variants) {
+      const segmentVariant = segment.variants.find(v => v.name === metaVariant.name);
+      if (segmentVariant && metaVariant.figma && !segmentVariant.figma) {
+        segmentVariant.figma = metaVariant.figma;
+      }
+    }
+  }
+
+  return segment;
+}
+
+// Load all segments (for initial render)
+// Gracefully handles individual failures - one bad story won't break all segments
+export async function loadAllSegments() {
+  const results = await Promise.all(
+    segmentLoaders.map(async (loader) => {
+      try {
+        if (loadedSegments.has(loader.path)) {
+          const cached = loadedSegments.get(loader.path);
+          return cached ? { path: loader.path, segment: cached } : null;
+        }
+
+        const module = await loader.loader();
+
+        // Convert story modules to segments at runtime
+        let segment;
+        if (loader.isStory) {
+          segment = storyModuleToSegment(module, loader.path);
+          // storyModuleToSegment returns null for stories without a component
+          if (!segment) {
+            loadedSegments.set(loader.path, null);
+            return null;
+          }
+        } else {
+          segment = module.default;
+        }
+
+        // Merge metadata from corresponding segment file if available
+        if (loader.metadataLoader) {
+          try {
+            const metadataModule = await loader.metadataLoader();
+            segment = mergeMetadata(segment, 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);
+          }
+        }
+
+        loadedSegments.set(loader.path, segment);
+        return { path: loader.path, segment };
+      } catch (error) {
+        console.warn("[Fragments] Failed to load " + loader.path + ":", error.message);
+        return null;
+      }
+    })
+  );
+  // Filter out failed loads
+  return results.filter(r => r !== null);
+}
+
+// Load a single segment by path
+export async function loadSegment(path) {
+  const loader = segmentLoaders.find(l => l.path === path);
+  if (!loader) return null;
+
+  if (loadedSegments.has(path)) {
+    return loadedSegments.get(path);
+  }
+
+  const module = await loader.loader();
+
+  // Convert story modules to segments at runtime
+  let segment;
+  if (loader.isStory) {
+    segment = storyModuleToSegment(module, path);
+  } else {
+    segment = module.default;
+  }
+
+  // Merge metadata from corresponding segment file if available
+  if (loader.metadataLoader && segment) {
+    try {
+      const metadataModule = await loader.metadataLoader();
+      segment = mergeMetadata(segment, metadataModule);
+    } catch (metaError) {
+      console.warn("[Fragments] Could not load metadata for " + path + ":", metaError.message);
+    }
+  }
+
+  loadedSegments.set(path, segment);
+  return segment;
+}
+
+// For backwards compatibility, load all segments synchronously on import
+// This is still lazy per-file but awaited at module load
+let segments = [];
+const segmentsPromise = loadAllSegments().then(s => { segments = s; return s; });
+
+export { segments, segmentsPromise };
+export const config = ${JSON.stringify(config)};
+
+// HMR support
+if (import.meta.hot) {
+  import.meta.hot.accept();
+
+  import.meta.hot.on("segments:update", (data) => {
+    console.log("[Fragments] File updated:", data.file);
+    // Clear cache for the updated file (handles both .segment and .stories)
+    for (const [path, _] of loadedSegments) {
+      const basePath = path.replace(/\\.(segment|stories)\\.tsx?$/, '');
+      if (data.file.includes(basePath)) {
+        loadedSegments.delete(path);
+      }
+    }
+    // Trigger re-render in viewer
+    window.dispatchEvent(new CustomEvent("segments:update"));
+  });
+}
+`;
+}
+function generateViewerEntry() {
+  return `
+import { segments, config } from "virtual:segments";
+
+// Re-export for viewer
+export { segments, config };
+
+// Initialize viewer
+console.log("[Fragments] Loaded", segments.length, "segment(s)");
+`;
+}
+async function loadSegmentsForContext(_server, _segmentFiles, _config, configDir) {
+  const { join: join2 } = await import("path");
+  const segmentsJsonPath = join2(configDir || process.cwd(), BRAND.outFile);
+  try {
+    const content = await readFile(segmentsJsonPath, "utf-8");
+    const data = JSON.parse(content);
+    return Object.values(data.segments || {});
+  } 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 viewerRoot2 = viewerAssetsRoot;
+  const entryPath = resolve(viewerRoot2, "entry.tsx");
+  try {
+    let html = await readFile(resolve(viewerRoot2, "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 Segments viewer");
+  }
+}
+async function servePreviewFrameHTML(res, server) {
+  const viewerRoot2 = viewerAssetsRoot;
+  const entryPath = resolve(viewerRoot2, "preview-frame-entry.tsx");
+  try {
+    let html = await readFile(resolve(viewerRoot2, "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 loadSegmentsForRender(segmentFiles, configDir) {
+  const { join: join2 } = await import("path");
+  const segmentsJsonPath = join2(configDir, BRAND.outFile);
+  try {
+    const content = await readFile(segmentsJsonPath, "utf-8");
+    const data = JSON.parse(content);
+    const segmentEntries = Object.values(data.segments || {});
+    if (segmentEntries.length > 0) {
+      return segmentEntries.map((segment) => ({
+        path: segment.filePath,
+        segment: { meta: { name: segment.meta.name } }
+      }));
+    }
+  } catch {
+  }
+  return segmentFiles.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(/\/([^/]+)\.segment\./);
+      name = match ? match[1] : f.relativePath;
+    }
+    return {
+      path: f.relativePath,
+      segment: { meta: { name } }
+    };
+  });
+}
+async function serveRenderHTML(res, server, renderScript) {
+  const viewerRoot2 = viewerAssetsRoot;
+  try {
+    let html = await readFile(
+      resolve(viewerRoot2, "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 loadFullSegmentForCompare(_server, _segmentFiles, componentName, variantName, configDir) {
+  const { join: join2 } = await import("path");
+  const segmentsJsonPath = join2(configDir || process.cwd(), BRAND.outFile);
+  try {
+    const content = await readFile(segmentsJsonPath, "utf-8");
+    const data = JSON.parse(content);
+    const segment = data.segments[componentName];
+    if (!segment) {
+      return null;
+    }
+    if (variantName && segment.variants) {
+      const variant = segment.variants.find((v) => v.name === variantName);
+      if (variant?.figma) {
+        return { figmaUrl: variant.figma };
+      }
+    }
+    if (segment.meta.figma) {
+      return { figmaUrl: segment.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-T2L7VLTE.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 viewerRoot = resolve2(cliPackageRoot, "src/viewer");
+var packagesRoot = resolve2(cliPackageRoot, "..");
+var uiLibRoot = resolve2(packagesRoot, "../libs/ui/src");
+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 segmentFiles = await discoverSegmentFiles(config, configDir);
+  const installedFiles = await discoverInstalledFragments(projectRoot);
+  const allSegmentFiles = [...segmentFiles, ...installedFiles];
+  console.log(`\u{1F4E6} Found ${segmentFiles.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);
+  console.log(`\u{1F4C1} Using node_modules: ${nodeModulesPath}`);
+  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 segmentsConfig = {
+    configFile: false,
+    // Don't load config again
+    root: projectRoot,
+    // Run from PROJECT root
+    base: "/",
+    server: {
+      port,
+      open: open ? "/fragments/" : false,
+      fs: {
+        // Allow serving files from viewer package, project, UI library, and node_modules root
+        allow: [viewerRoot, uiLibRoot, projectRoot, configDir, dirname2(nodeModulesPath), ...installedPkgRoots]
+      }
+    },
+    plugins: [
+      // React support (if not already in project config)
+      ...hasReactPlugin(projectViteConfig) ? [] : [react()],
+      // Segments plugins (array including SVGR)
+      ...segmentsPlugin({
+        segmentFiles: allSegmentFiles,
+        config,
+        projectRoot
+      })
+    ],
+    // CSS configuration
+    css: {},
+    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: {
+        // Allow importing from viewer package
+        "@fragments/viewer": viewerRoot,
+        // Resolve @fragments/ui to the UI library source for dogfooding
+        "@fragments/ui": resolve2(uiLibRoot, "index.ts"),
+        // Resolve @fragments/core to the consolidated core source
+        "@fragments/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, segmentsConfig);
+  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 (existsSync(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 (existsSync(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,
+  segmentsPlugin
+};
+//# sourceMappingURL=viewer-SUFOISZM.js.map