@fragments-sdk/cli 0.7.0 → 0.7.2

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

@@ -1,18 +1,18 @@
 import { createRequire as __banner_createRequire } from 'module'; const require = __banner_createRequire(import.meta.url);
 import {
+  discoverFragmentFiles,
   discoverInstalledFragments,
-  discoverSegmentFiles,
   findPreviewConfigPath,
   findStorybookDir,
   generatePreviewModule,
   loadConfig
-} from "./chunk-CVXKXVOY.js";
+} from "./chunk-3T6QL7IY.js";
 import {
   generateContext
-} from "./chunk-TJ34N7C7.js";
+} from "./chunk-OOGTG5FM.js";
 import {
   BRAND
-} from "./chunk-6JBGU74P.js";
+} from "./chunk-GHYYFAQN.js";
 
 // src/viewer/server.ts
 import {
@@ -56,20 +56,20 @@ function serializePropsToJsx(props) {
     return `${key}={${serializeValue(value)}}`;
   }).join(" ");
 }
-function findSegmentByName(componentName, segments) {
-  const match = segments.find(
-    (s) => s.segment.meta.name.toLowerCase() === componentName.toLowerCase()
+function findFragmentByName(componentName, fragments) {
+  const match = fragments.find(
+    (s) => s.fragment.meta.name.toLowerCase() === componentName.toLowerCase()
   );
   if (!match) return null;
   return {
-    name: match.segment.meta.name,
+    name: match.fragment.meta.name,
     path: match.path
   };
 }
-function getAvailableComponents(segments) {
-  return segments.map((s) => s.segment.meta.name).sort();
+function getAvailableComponents(fragments) {
+  return fragments.map((s) => s.fragment.meta.name).sort();
 }
-function generateRenderScript(segmentPath, componentName, props = {}) {
+function generateRenderScript(fragmentPath, componentName, props = {}) {
   const propsJsx = serializePropsToJsx(props);
   const propsString = propsJsx ? ` ${propsJsx}` : "";
   const hasChildren = "children" in props && props.children !== void 0;
@@ -82,20 +82,20 @@ function generateRenderScript(segmentPath, componentName, props = {}) {
 import React from "react";
 import { createRoot } from "react-dom/client";
 
-// Import the segment to get the component
+// Import the fragment 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;
+    // Dynamic import of the fragment file
+    const fragmentModule = await import("${fragmentPath}");
+    const fragment = fragmentModule.default;
 
-    if (!segment || !segment.component) {
-      throw new Error("Segment does not export a component");
+    if (!fragment || !fragment.component) {
+      throw new Error("Fragment does not export a component");
     }
 
-    const Component = segment.component;
+    const Component = fragment.component;
 
     // Create React root and render
     const reactRoot = createRoot(root);
@@ -240,7 +240,7 @@ var sharedRenderPool = null;
 var browserPoolModule = null;
 async function getSharedRenderPool() {
   if (!browserPoolModule) {
-    browserPoolModule = await import("./service-T2L7VLTE.js");
+    browserPoolModule = await import("./service-PVGTYUKX.js");
   }
   if (!sharedRenderPool) {
     sharedRenderPool = new browserPoolModule.BrowserPool({
@@ -254,10 +254,10 @@ async function getSharedRenderPool() {
   }
   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}`;
+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`;
@@ -266,9 +266,9 @@ function segmentsPlugin(options) {
   let resolvedConfig = null;
   const storybookDir = findStorybookDir(projectRoot);
   const previewConfigPath = storybookDir ? findPreviewConfigPath(storybookDir) : null;
-  const segmentFileSet = new Set(segmentFiles.map((f) => f.absolutePath));
+  const fragmentFileSet = new Set(fragmentFiles.map((f) => f.absolutePath));
   const mainPlugin = {
-    name: "segments",
+    name: "fragments",
     // Add process.env shim and esbuild config for Storybook compatibility
     config() {
       return {
@@ -310,13 +310,13 @@ function segmentsPlugin(options) {
               );
               return;
             }
-            const loadedSegments = await loadSegmentsForRender(
-              segmentFiles,
+            const loadedFragments = await loadFragmentsForRender(
+              fragmentFiles,
               projectRoot
             );
-            const segmentInfo = findSegmentByName(component, loadedSegments);
-            if (!segmentInfo) {
-              const available = getAvailableComponents(loadedSegments);
+            const fragmentInfo = findFragmentByName(component, loadedFragments);
+            if (!fragmentInfo) {
+              const available = getAvailableComponents(loadedFragments);
               res.writeHead(400, { "Content-Type": "application/json" });
               res.end(
                 JSON.stringify({
@@ -327,19 +327,19 @@ function segmentsPlugin(options) {
               );
               return;
             }
-            const segmentFile = segmentFiles.find(
-              (f) => f.relativePath === segmentInfo.path
+            const fragmentFile = fragmentFiles.find(
+              (f) => f.relativePath === fragmentInfo.path
             );
-            if (!segmentFile) {
+            if (!fragmentFile) {
               res.writeHead(500, { "Content-Type": "application/json" });
               res.end(
-                JSON.stringify({ error: "Could not resolve segment file path" })
+                JSON.stringify({ error: "Could not resolve fragment file path" })
               );
               return;
             }
             const renderScript = generateRenderScript(
-              segmentFile.absolutePath,
-              segmentInfo.name,
+              fragmentFile.absolutePath,
+              fragmentInfo.name,
               props
             );
             const requestId = Date.now().toString(36) + Math.random().toString(36).slice(2);
@@ -406,18 +406,18 @@ function segmentsPlugin(options) {
               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] 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 loadedSegments = await loadSegmentsForRender(
-              segmentFiles,
+            const loadedFragments = await loadFragmentsForRender(
+              fragmentFiles,
               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);
+            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({
@@ -428,20 +428,20 @@ function segmentsPlugin(options) {
               );
               return;
             }
-            const fullSegmentData = await loadFullSegmentForCompare(
+            const fullFragmentData = await loadFullFragmentForCompare(
               _server,
-              segmentFiles,
+              fragmentFiles,
               component,
               variant,
               projectRoot
             );
-            const effectiveFigmaUrl = figmaUrl || fullSegmentData?.figmaUrl;
+            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 segment definition or provide figmaUrl in request"
+                  suggestion: "Add 'figma' field to fragment definition or provide figmaUrl in request"
                 })
               );
               return;
@@ -456,27 +456,27 @@ function segmentsPlugin(options) {
               );
               return;
             }
-            const segmentFile = segmentFiles.find(
-              (f) => f.relativePath === segmentInfo.path
+            const fragmentFile = fragmentFiles.find(
+              (f) => f.relativePath === fragmentInfo.path
             );
-            if (!segmentFile) {
+            if (!fragmentFile) {
               res.writeHead(500, { "Content-Type": "application/json" });
               res.end(
-                JSON.stringify({ error: "Could not resolve segment file path" })
+                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-T2L7VLTE.js");
+            const { FigmaClient, bufferToBase64Url } = await import("./service-PVGTYUKX.js");
             const figmaClient = new FigmaClient({
               accessToken: figmaToken
             });
             const { fileKey, nodeId } = figmaClient.parseUrl(effectiveFigmaUrl);
             const renderScript = generateRenderScript(
-              segmentFile.absolutePath,
-              segmentInfo.name,
+              fragmentFile.absolutePath,
+              fragmentInfo.name,
               props
             );
             const requestId = Date.now().toString(36) + Math.random().toString(36).slice(2);
@@ -560,7 +560,7 @@ function segmentsPlugin(options) {
               );
               return;
             }
-            const { FigmaClient } = await import("./service-T2L7VLTE.js");
+            const { FigmaClient } = await import("./service-PVGTYUKX.js");
             const figmaClient = new FigmaClient({ accessToken: figmaToken });
             const { fileKey, nodeId } = figmaClient.parseUrl(figmaUrl);
             const figmaDesignProps = await figmaClient.getNodeProperties(
@@ -601,7 +601,7 @@ function segmentsPlugin(options) {
               }));
               return;
             }
-            const { getSharedTokenRegistry } = await import("./service-T2L7VLTE.js");
+            const { getSharedTokenRegistry } = await import("./service-PVGTYUKX.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -661,7 +661,7 @@ function segmentsPlugin(options) {
               }));
               return;
             }
-            const { getSharedTokenRegistry } = await import("./service-T2L7VLTE.js");
+            const { getSharedTokenRegistry } = await import("./service-PVGTYUKX.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -705,25 +705,25 @@ function segmentsPlugin(options) {
               }));
               return;
             }
-            const loadedSegments = await loadSegmentsForRender(segmentFiles, projectRoot);
-            const segmentInfo = findSegmentByName(component, loadedSegments);
-            if (!segmentInfo) {
-              const available = getAvailableComponents(loadedSegments);
+            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 segmentFile = segmentFiles.find(
-              (f) => f.relativePath === segmentInfo.path
+            const fragmentFile = fragmentFiles.find(
+              (f) => f.relativePath === fragmentInfo.path
             );
-            if (!segmentFile) {
+            if (!fragmentFile) {
               res.writeHead(500, { "Content-Type": "application/json" });
-              res.end(JSON.stringify({ error: "Could not resolve segment file path" }));
+              res.end(JSON.stringify({ error: "Could not resolve fragment file path" }));
               return;
             }
-            const { getSharedTokenRegistry } = await import("./service-T2L7VLTE.js");
+            const { getSharedTokenRegistry } = await import("./service-PVGTYUKX.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -732,8 +732,8 @@ function segmentsPlugin(options) {
             const port = typeof address === "object" && address ? address.port : 6006;
             const renderViewport = { width: 800, height: 600 };
             const renderScript = generateRenderScript(
-              segmentFile.absolutePath,
-              segmentInfo.name,
+              fragmentFile.absolutePath,
+              fragmentInfo.name,
               {}
             );
             const requestId = Date.now().toString(36) + Math.random().toString(36).slice(2);
@@ -802,14 +802,14 @@ function segmentsPlugin(options) {
             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(
+            const compiledFragments = await loadFragmentsForContext(
               _server,
-              segmentFiles,
+              fragmentFiles,
               config,
               projectRoot
             );
             const { content, tokenEstimate } = generateContext(
-              compiledSegments,
+              compiledFragments,
               {
                 format,
                 compact,
@@ -849,7 +849,7 @@ function segmentsPlugin(options) {
             }
             const { writeFile, mkdir } = await import("fs/promises");
             const { join: join2 } = await import("path");
-            const { BRAND: BRAND2 } = await import("./core-W2HYIQW6.js");
+            const { BRAND: BRAND2 } = await import("./core-UQXZTBFZ.js");
             const fragmentsDir = join2(projectRoot, BRAND2.dataDir, BRAND2.componentsDir);
             await mkdir(fragmentsDir, { recursive: true });
             const fragmentPath = join2(
@@ -891,10 +891,10 @@ function segmentsPlugin(options) {
               }));
               return;
             }
-            const loadedSegments = await loadSegmentsForRender(segmentFiles, projectRoot);
-            const segmentInfo = findSegmentByName(component, loadedSegments);
-            if (!segmentInfo) {
-              const available = getAvailableComponents(loadedSegments);
+            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(", ")}`
@@ -904,15 +904,15 @@ function segmentsPlugin(options) {
             const {
               getSharedTokenRegistry,
               generateTokenPatches
-            } = await import("./service-T2L7VLTE.js");
+            } = await import("./service-PVGTYUKX.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
             }
-            const segmentFile = segmentFiles.find(
-              (f) => f.relativePath === segmentInfo.path
+            const fragmentFile = fragmentFiles.find(
+              (f) => f.relativePath === fragmentInfo.path
             );
-            const sourceFile = segmentFile?.relativePath || `${component}.tsx`;
+            const sourceFile = fragmentFile?.relativePath || `${component}.tsx`;
             const result = generateTokenPatches(
               component,
               [],
@@ -945,7 +945,7 @@ function segmentsPlugin(options) {
           await servePreviewFrameHTML(res, _server);
           return;
         }
-        if (req.url === "/segments" || req.url === "/fragments/") {
+        if (req.url === "/fragments" || req.url === "/fragments/") {
           if (!req.url.endsWith("/")) {
             res.writeHead(302, { Location: "/fragments/" });
             res.end();
@@ -968,8 +968,8 @@ function segmentsPlugin(options) {
     },
     // Resolve virtual modules
     resolveId(id) {
-      if (id === VIRTUAL_SEGMENTS) {
-        return VIRTUAL_SEGMENTS_RESOLVED;
+      if (id === VIRTUAL_FRAGMENTS) {
+        return VIRTUAL_FRAGMENTS_RESOLVED;
       }
       if (id === VIRTUAL_VIEWER_ENTRY) {
         return VIRTUAL_VIEWER_ENTRY_RESOLVED;
@@ -981,8 +981,8 @@ function segmentsPlugin(options) {
     },
     // Load virtual modules
     load(id) {
-      if (id === VIRTUAL_SEGMENTS_RESOLVED) {
-        return generateSegmentsModule(segmentFiles, config, previewConfigPath);
+      if (id === VIRTUAL_FRAGMENTS_RESOLVED) {
+        return generateFragmentsModule(fragmentFiles, config, previewConfigPath);
       }
       if (id === VIRTUAL_VIEWER_ENTRY_RESOLVED) {
         return generateViewerEntry();
@@ -992,16 +992,16 @@ function segmentsPlugin(options) {
       }
       return null;
     },
-    // Handle HMR for segment files
+    // Handle HMR for fragment files
     handleHotUpdate({ file, server: server2 }) {
-      if (segmentFileSet.has(file)) {
-        const mod = server2.moduleGraph.getModuleById(VIRTUAL_SEGMENTS_RESOLVED);
+      if (fragmentFileSet.has(file)) {
+        const mod = server2.moduleGraph.getModuleById(VIRTUAL_FRAGMENTS_RESOLVED);
         if (mod) {
           server2.moduleGraph.invalidateModule(mod);
         }
         server2.ws.send({
           type: "custom",
-          event: "segments:update",
+          event: "fragments:update",
           data: { file }
         });
         return [];
@@ -1009,7 +1009,7 @@ function segmentsPlugin(options) {
     }
   };
   const jsxTransformPlugin = {
-    name: "segments-jsx-transform",
+    name: "fragments-jsx-transform",
     enforce: "pre",
     async load(id) {
       if (!id.endsWith(".js")) return null;
@@ -1053,7 +1053,7 @@ function segmentsPlugin(options) {
       },
       include: "**/*.svg"
     }),
-    // Main segments plugin
+    // Main fragments plugin
     mainPlugin
   ];
 }
@@ -1061,26 +1061,26 @@ function isStoryFile(filePath) {
   return /\.stories\.(tsx?|jsx?)$/.test(filePath);
 }
 function getBaseComponentPath(filePath) {
-  return filePath.replace(/\.(segment|stories)\.(tsx?|jsx?)$/, "");
+  return filePath.replace(/\.(fragment|stories)\.(tsx?|jsx?)$/, "");
 }
-function generateSegmentsModule(segmentFiles, config, previewConfigPath) {
+function generateFragmentsModule(fragmentFiles, config, previewConfigPath) {
   const filesByBasePath = /* @__PURE__ */ new Map();
-  for (const file of segmentFiles) {
+  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.segmentFile = file;
+      existing.fragmentFile = file;
     }
     filesByBasePath.set(basePath, existing);
   }
   const loaders = Array.from(filesByBasePath.values()).map((files) => {
-    const primaryFile = files.storyFile || files.segmentFile;
+    const primaryFile = files.storyFile || files.fragmentFile;
     if (!primaryFile) return null;
     const isStory = !!files.storyFile;
-    const metadataPath = files.storyFile && files.segmentFile ? files.segmentFile.absolutePath : null;
+    const metadataPath = files.storyFile && files.fragmentFile ? files.fragmentFile.absolutePath : null;
     return `  {
     path: "${primaryFile.relativePath}",
     isStory: ${isStory},
@@ -1088,9 +1088,9 @@ function generateSegmentsModule(segmentFiles, config, previewConfigPath) {
     metadataLoader: ${metadataPath ? `() => import("${metadataPath}")` : "null"}
   }`;
   }).filter(Boolean).join(",\n");
-  const previewImport = previewConfigPath ? `import * as previewConfig from "virtual:segments-preview";` : "";
+  const previewImport = previewConfigPath ? `import * as previewConfig from "virtual:fragments-preview";` : "";
   const previewSetup = previewConfigPath ? `
-// Set global preview config before loading segments
+// Set global preview config before loading fragments
 setPreviewConfig({
   decorators: previewConfig.decorators,
   parameters: previewConfig.parameters,
@@ -1101,88 +1101,88 @@ setPreviewConfig({
 });
 ` : "";
   return `
-import { storyModuleToSegment, setPreviewConfig } from "@fragments/core";
+import { storyModuleToFragment, setPreviewConfig } from "@fragments/core";
 ${previewImport}
 ${previewSetup}
-// Lazy segment loaders (supports both .segment.tsx and .stories.tsx)
-const segmentLoaders = [
+// Lazy fragment loaders (supports both .fragment.tsx and .stories.tsx)
+const fragmentLoaders = [
 ${loaders}
 ];
 
-// Cache for loaded segments
-const loadedSegments = new Map();
+// Cache for loaded fragments
+const loadedFragments = new Map();
 
 /**
- * Merge metadata from a segment file into a story-based segment.
+ * Merge metadata from a fragment file into a story-based fragment.
  * This preserves Figma URLs and other AI-agent focused data.
  */
-function mergeMetadata(segment, metadataModule) {
-  if (!metadataModule?.default) return segment;
+function mergeMetadata(fragment, metadataModule) {
+  if (!metadataModule?.default) return fragment;
 
   const metadata = metadataModule.default;
 
   // Merge meta-level Figma URL
-  if (metadata.meta?.figma && !segment.meta.figma) {
-    segment.meta.figma = metadata.meta.figma;
+  if (metadata.meta?.figma && !fragment.meta.figma) {
+    fragment.meta.figma = metadata.meta.figma;
   }
 
   // Merge description if not present
-  if (metadata.meta?.description && !segment.meta.description) {
-    segment.meta.description = metadata.meta.description;
+  if (metadata.meta?.description && !fragment.meta.description) {
+    fragment.meta.description = metadata.meta.description;
   }
 
   // Merge variant-level Figma URLs
-  if (metadata.variants && segment.variants) {
+  if (metadata.variants && fragment.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;
+      const fragmentVariant = fragment.variants.find(v => v.name === metaVariant.name);
+      if (fragmentVariant && metaVariant.figma && !fragmentVariant.figma) {
+        fragmentVariant.figma = metaVariant.figma;
       }
     }
   }
 
-  return segment;
+  return fragment;
 }
 
-// Load all segments (for initial render)
-// Gracefully handles individual failures - one bad story won't break all segments
-export async function loadAllSegments() {
+// Load all fragments (for initial render)
+// Gracefully handles individual failures - one bad story won't break all fragments
+export async function loadAllFragments() {
   const results = await Promise.all(
-    segmentLoaders.map(async (loader) => {
+    fragmentLoaders.map(async (loader) => {
       try {
-        if (loadedSegments.has(loader.path)) {
-          const cached = loadedSegments.get(loader.path);
-          return cached ? { path: loader.path, segment: cached } : null;
+        if (loadedFragments.has(loader.path)) {
+          const cached = loadedFragments.get(loader.path);
+          return cached ? { path: loader.path, fragment: cached } : null;
         }
 
         const module = await loader.loader();
 
-        // Convert story modules to segments at runtime
-        let segment;
+        // Convert story modules to fragments at runtime
+        let fragment;
         if (loader.isStory) {
-          segment = storyModuleToSegment(module, loader.path);
-          // storyModuleToSegment returns null for stories without a component
-          if (!segment) {
-            loadedSegments.set(loader.path, null);
+          fragment = storyModuleToFragment(module, loader.path);
+          // storyModuleToFragment returns null for stories without a component
+          if (!fragment) {
+            loadedFragments.set(loader.path, null);
             return null;
           }
         } else {
-          segment = module.default;
+          fragment = module.default;
         }
 
-        // Merge metadata from corresponding segment file if available
+        // Merge metadata from corresponding fragment file if available
         if (loader.metadataLoader) {
           try {
             const metadataModule = await loader.metadataLoader();
-            segment = mergeMetadata(segment, metadataModule);
+            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);
           }
         }
 
-        loadedSegments.set(loader.path, segment);
-        return { path: loader.path, segment };
+        loadedFragments.set(loader.path, fragment);
+        return { path: loader.path, fragment };
       } catch (error) {
         console.warn("[Fragments] Failed to load " + loader.path + ":", error.message);
         return null;
@@ -1193,84 +1193,84 @@ export async function loadAllSegments() {
   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);
+// Load a single fragment by path
+export async function loadFragment(path) {
+  const loader = fragmentLoaders.find(l => l.path === path);
   if (!loader) return null;
 
-  if (loadedSegments.has(path)) {
-    return loadedSegments.get(path);
+  if (loadedFragments.has(path)) {
+    return loadedFragments.get(path);
   }
 
   const module = await loader.loader();
 
-  // Convert story modules to segments at runtime
-  let segment;
+  // Convert story modules to fragments at runtime
+  let fragment;
   if (loader.isStory) {
-    segment = storyModuleToSegment(module, path);
+    fragment = storyModuleToFragment(module, path);
   } else {
-    segment = module.default;
+    fragment = module.default;
   }
 
-  // Merge metadata from corresponding segment file if available
-  if (loader.metadataLoader && segment) {
+  // Merge metadata from corresponding fragment file if available
+  if (loader.metadataLoader && fragment) {
     try {
       const metadataModule = await loader.metadataLoader();
-      segment = mergeMetadata(segment, metadataModule);
+      fragment = mergeMetadata(fragment, metadataModule);
     } catch (metaError) {
       console.warn("[Fragments] Could not load metadata for " + path + ":", metaError.message);
     }
   }
 
-  loadedSegments.set(path, segment);
-  return segment;
+  loadedFragments.set(path, fragment);
+  return fragment;
 }
 
-// For backwards compatibility, load all segments synchronously on import
+// For backwards compatibility, load all fragments 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; });
+let fragments = [];
+const fragmentsPromise = loadAllFragments().then(s => { fragments = s; return s; });
 
-export { segments, segmentsPromise };
+export { fragments, fragmentsPromise };
 export const config = ${JSON.stringify(config)};
 
 // HMR support
 if (import.meta.hot) {
   import.meta.hot.accept();
 
-  import.meta.hot.on("segments:update", (data) => {
+  import.meta.hot.on("fragments: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?$/, '');
+    // 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)) {
-        loadedSegments.delete(path);
+        loadedFragments.delete(path);
       }
     }
     // Trigger re-render in viewer
-    window.dispatchEvent(new CustomEvent("segments:update"));
+    window.dispatchEvent(new CustomEvent("fragments:update"));
   });
 }
 `;
 }
 function generateViewerEntry() {
   return `
-import { segments, config } from "virtual:segments";
+import { fragments, config } from "virtual:fragments";
 
 // Re-export for viewer
-export { segments, config };
+export { fragments, config };
 
 // Initialize viewer
-console.log("[Fragments] Loaded", segments.length, "segment(s)");
+console.log("[Fragments] Loaded", fragments.length, "fragment(s)");
 `;
 }
-async function loadSegmentsForContext(_server, _segmentFiles, _config, configDir) {
+async function loadFragmentsForContext(_server, _fragmentFiles, _config, configDir) {
   const { join: join2 } = await import("path");
-  const segmentsJsonPath = join2(configDir || process.cwd(), BRAND.outFile);
+  const fragmentsJsonPath = join2(configDir || process.cwd(), BRAND.outFile);
   try {
-    const content = await readFile(segmentsJsonPath, "utf-8");
+    const content = await readFile(fragmentsJsonPath, "utf-8");
     const data = JSON.parse(content);
-    return Object.values(data.segments || {});
+    return Object.values(data.fragments || {});
   } catch (error) {
     console.warn(
       `[${BRAND.name}] Failed to load ${BRAND.outFile} for context:`,
@@ -1292,7 +1292,7 @@ async function serveViewerHTML(res, server) {
   } catch (error) {
     console.error("[Fragments] Error serving viewer:", error);
     res.writeHead(500, { "Content-Type": "text/plain" });
-    res.end("Error loading Segments viewer");
+    res.end("Error loading Fragments viewer");
   }
 }
 async function servePreviewFrameHTML(res, server) {
@@ -1326,33 +1326,33 @@ async function parseJsonBody(req) {
     req.on("error", reject);
   });
 }
-async function loadSegmentsForRender(segmentFiles, configDir) {
+async function loadFragmentsForRender(fragmentFiles, configDir) {
   const { join: join2 } = await import("path");
-  const segmentsJsonPath = join2(configDir, BRAND.outFile);
+  const fragmentsJsonPath = join2(configDir, BRAND.outFile);
   try {
-    const content = await readFile(segmentsJsonPath, "utf-8");
+    const content = await readFile(fragmentsJsonPath, "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 } }
+    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 segmentFiles.map((f) => {
+  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(/\/([^/]+)\.segment\./);
+      const match = f.relativePath.match(/\/([^/]+)\.fragment\./);
       name = match ? match[1] : f.relativePath;
     }
     return {
       path: f.relativePath,
-      segment: { meta: { name } }
+      fragment: { meta: { name } }
     };
   });
 }
@@ -1538,24 +1538,24 @@ async function captureRenderWithStyles(url, viewport, extractStyles) {
     pool.release(ctx);
   }
 }
-async function loadFullSegmentForCompare(_server, _segmentFiles, componentName, variantName, configDir) {
+async function loadFullFragmentForCompare(_server, _fragmentFiles, componentName, variantName, configDir) {
   const { join: join2 } = await import("path");
-  const segmentsJsonPath = join2(configDir || process.cwd(), BRAND.outFile);
+  const fragmentsJsonPath = join2(configDir || process.cwd(), BRAND.outFile);
   try {
-    const content = await readFile(segmentsJsonPath, "utf-8");
+    const content = await readFile(fragmentsJsonPath, "utf-8");
     const data = JSON.parse(content);
-    const segment = data.segments[componentName];
-    if (!segment) {
+    const fragment = data.fragments[componentName];
+    if (!fragment) {
       return null;
     }
-    if (variantName && segment.variants) {
-      const variant = segment.variants.find((v) => v.name === variantName);
+    if (variantName && fragment.variants) {
+      const variant = fragment.variants.find((v) => v.name === variantName);
       if (variant?.figma) {
         return { figmaUrl: variant.figma };
       }
     }
-    if (segment.meta.figma) {
-      return { figmaUrl: segment.meta.figma };
+    if (fragment.meta.figma) {
+      return { figmaUrl: fragment.meta.figma };
     }
     return null;
   } catch {
@@ -1566,7 +1566,7 @@ async function loadFullSegmentForCompare(_server, _segmentFiles, componentName,
   }
 }
 async function compareImages(image1Base64, image2Base64, threshold) {
-  const { DiffEngine, base64UrlToBuffer, bufferToBase64Url } = await import("./service-T2L7VLTE.js");
+  const { DiffEngine, base64UrlToBuffer, bufferToBase64Url } = await import("./service-PVGTYUKX.js");
   const { PNG } = await import("pngjs");
   const buffer1 = base64UrlToBuffer(image1Base64);
   const buffer2 = base64UrlToBuffer(image2Base64);
@@ -1677,10 +1677,10 @@ async function createDevServer(options = {}) {
   } = options;
   console.log("\n\u{1F527} Loading configuration...");
   const { config, configDir } = await loadConfig(configPath);
-  const segmentFiles = await discoverSegmentFiles(config, configDir);
+  const fragmentFiles = await discoverFragmentFiles(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)`);
+  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) {
@@ -1711,7 +1711,7 @@ async function createDevServer(options = {}) {
       return resolve2(projectRoot, "node_modules", pkgName);
     })
   )];
-  const segmentsConfig = {
+  const fragmentsConfig = {
     configFile: false,
     // Don't load config again
     root: projectRoot,
@@ -1728,9 +1728,9 @@ async function createDevServer(options = {}) {
     plugins: [
       // React support (if not already in project config)
       ...hasReactPlugin(projectViteConfig) ? [] : [react()],
-      // Segments plugins (array including SVGR)
-      ...segmentsPlugin({
-        segmentFiles: allSegmentFiles,
+      // Fragments plugins (array including SVGR)
+      ...fragmentsPlugin({
+        fragmentFiles: allFragmentFiles,
         config,
         projectRoot
       })
@@ -1761,7 +1761,7 @@ async function createDevServer(options = {}) {
       }
     }
   };
-  const mergedConfig = mergeConfig(projectViteConfig, segmentsConfig);
+  const mergedConfig = mergeConfig(projectViteConfig, fragmentsConfig);
   console.log("\u{1F680} Starting dev server...\n");
   const server = await createServer(mergedConfig);
   await server.listen();
@@ -1817,6 +1817,6 @@ function hasReactPlugin(config) {
 }
 export {
   createDevServer,
-  segmentsPlugin
+  fragmentsPlugin
 };
-//# sourceMappingURL=viewer-SUFOISZM.js.map
+//# sourceMappingURL=viewer-K42REJU2.js.map