@fragments-sdk/cli 0.6.0 → 0.7.1

package/dist/bin.js

@@ -1,18 +1,18 @@
 #!/usr/bin/env node
 import { createRequire as __banner_createRequire } from 'module'; const require = __banner_createRequire(import.meta.url);
 import {
+  buildFragments,
   buildFragmentsDir,
-  buildSegments,
   runAnalyzeCommand,
   runDiffCommand,
   runScreenshotCommand,
   validateAll,
   validateCoverage,
   validateSchema
-} from "./chunk-D35RGPAG.js";
+} from "./chunk-U6VTHBNI.js";
 import {
   scan
-} from "./chunk-F7ITZPDJ.js";
+} from "./chunk-32VIEOQY.js";
 import {
   FigmaClient,
   StorageManager,
@@ -28,22 +28,22 @@ import {
   renderAllComponentVariants,
   scanCodebase,
   shutdownSharedPool
-} from "./chunk-NWQ4CJOQ.js";
+} from "./chunk-GKX2HPZ6.js";
 import {
-  discoverSegmentFiles,
+  discoverFragmentFiles,
   loadConfig,
-  loadSegmentFile
-} from "./chunk-SSLQXHNX.js";
+  loadFragmentFile
+} from "./chunk-5ITIP3ES.js";
 import {
   generateContext
-} from "./chunk-Q7GOHVOK.js";
+} from "./chunk-GCZMFLDI.js";
 import {
   BRAND
-} from "./chunk-6JBGU74P.js";
+} from "./chunk-GHYYFAQN.js";
 
 // src/bin.ts
 import { Command } from "commander";
-import pc20 from "picocolors";
+import pc21 from "picocolors";
 import { readFileSync } from "fs";
 import { fileURLToPath } from "url";
 import { dirname as dirname4, join as join10 } from "path";
@@ -116,7 +116,7 @@ ${BRAND.name} Build (from source)
     });
     return {
       success: scanResult.success,
-      segmentCount: scanResult.componentCount,
+      fragmentCount: scanResult.componentCount,
       outputPath: scanResult.outputPath,
       errors: scanResult.errors.map((e) => ({ file: e.component, error: e.error }))
     };
@@ -129,14 +129,14 @@ ${BRAND.name} Build (from source)
 ${BRAND.name} Build
 `));
   const errors = [];
-  let segmentCount;
+  let fragmentCount;
   let outputPath;
   let componentCount;
   let registryPath;
   let contextPath;
   if (!options.registryOnly) {
     console.log(pc2.dim("Compiling fragments...\n"));
-    const result = await buildSegments(config, configDir);
+    const result = await buildFragments(config, configDir);
     if (result.errors.length > 0) {
       console.log(pc2.yellow("Build completed with errors:\n"));
       for (const error of result.errors) {
@@ -152,9 +152,9 @@ ${BRAND.name} Build
       }
       console.log();
     }
-    segmentCount = result.segmentCount;
+    fragmentCount = result.fragmentCount;
     outputPath = result.outputPath;
-    console.log(pc2.green(`\u2713 Built ${result.segmentCount} fragment(s)`));
+    console.log(pc2.green(`\u2713 Built ${result.fragmentCount} fragment(s)`));
     console.log(pc2.dim(`  Output: ${result.outputPath}
 `));
   }
@@ -186,7 +186,7 @@ ${BRAND.name} Build
   }
   return {
     success: errors.length === 0,
-    segmentCount,
+    fragmentCount,
     outputPath,
     componentCount,
     registryPath,
@@ -207,28 +207,28 @@ async function context(options = {}) {
     includeRelations = false,
     tokensOnly = false
   } = options;
-  let segments;
+  let fragments;
   if (options.input) {
     const inputPath = resolve(process.cwd(), options.input);
     const content2 = await readFile(inputPath, "utf-8");
     const data = JSON.parse(content2);
-    segments = Object.values(data.segments);
+    fragments = Object.values(data.fragments);
   } else {
     const { config, configDir } = await loadConfig(options.config);
-    const result = await buildSegments(config, configDir);
-    if (result.errors.length > 0 && result.segmentCount === 0) {
-      console.error(pc3.red("Error: No segments found. Run `segments build` first or fix errors."));
+    const result = await buildFragments(config, configDir);
+    if (result.errors.length > 0 && result.fragmentCount === 0) {
+      console.error(pc3.red("Error: No fragments found. Run `fragments build` first or fix errors."));
       return { success: false, tokenEstimate: 0 };
     }
     const content2 = await readFile(result.outputPath, "utf-8");
     const data = JSON.parse(content2);
-    segments = Object.values(data.segments);
+    fragments = Object.values(data.fragments);
   }
-  if (segments.length === 0) {
-    console.error(pc3.red("No segments found."));
+  if (fragments.length === 0) {
+    console.error(pc3.red("No fragments found."));
     return { success: false, tokenEstimate: 0 };
   }
-  const { content, tokenEstimate } = generateContext(segments, {
+  const { content, tokenEstimate } = generateContext(fragments, {
     format,
     compact,
     include: {
@@ -254,7 +254,7 @@ async function context(options = {}) {
 import pc4 from "picocolors";
 async function list(options = {}) {
   const { config, configDir } = await loadConfig(options.config);
-  const files = await discoverSegmentFiles(config, configDir);
+  const files = await discoverFragmentFiles(config, configDir);
   console.log(pc4.cyan(`
 ${BRAND.name} - Discovered Fragments
 `));
@@ -293,7 +293,7 @@ ${BRAND.name} Reset
     }
   } catch {
   }
-  const defaultOutFile = join(projectRoot, "segments.json");
+  const defaultOutFile = join(projectRoot, "fragments.json");
   try {
     const fileStat = await stat(defaultOutFile);
     if (fileStat.isFile()) {
@@ -301,10 +301,10 @@ ${BRAND.name} Reset
     }
   } catch {
   }
-  let segmentPatterns = [`**/*${BRAND.fileExtension}`];
+  let fragmentPatterns = [`**/*${BRAND.fileExtension}`];
   try {
     const { config } = await loadConfig();
-    if (config.outFile && config.outFile !== "segments.json") {
+    if (config.outFile && config.outFile !== "fragments.json") {
       const customOutFile = join(projectRoot, config.outFile);
       try {
         const fileStat = await stat(customOutFile);
@@ -315,12 +315,12 @@ ${BRAND.name} Reset
       }
     }
     if (config.include && config.include.length > 0) {
-      segmentPatterns = config.include;
+      fragmentPatterns = config.include;
     }
   } catch {
   }
   console.log(pc5.dim("Scanning for generated files...\n"));
-  for (const pattern of segmentPatterns) {
+  for (const pattern of fragmentPatterns) {
     const matches = await fg(pattern, {
       cwd: projectRoot,
       ignore: ["**/node_modules/**"],
@@ -351,22 +351,22 @@ ${BRAND.name} Reset
     const relativePath = relative(projectRoot, dir);
     console.log(`  \u{1F4C1} ${relativePath}/`);
   }
-  const segmentFiles = filesToDelete.filter((f) => f.endsWith(BRAND.fileExtension));
+  const fragmentFiles = filesToDelete.filter((f) => f.endsWith(BRAND.fileExtension));
   const mdxFilesFound = filesToDelete.filter((f) => f.endsWith(".mdx"));
   const otherFiles = filesToDelete.filter(
     (f) => !f.endsWith(BRAND.fileExtension) && !f.endsWith(".mdx")
   );
-  if (segmentFiles.length > 0) {
-    console.log(`  \u{1F4C4} ${segmentFiles.length} segment file(s) (*${BRAND.fileExtension})`);
-    if (segmentFiles.length <= 5) {
-      for (const f of segmentFiles) {
+  if (fragmentFiles.length > 0) {
+    console.log(`  \u{1F4C4} ${fragmentFiles.length} fragment file(s) (*${BRAND.fileExtension})`);
+    if (fragmentFiles.length <= 5) {
+      for (const f of fragmentFiles) {
         console.log(pc5.dim(`     ${relative(projectRoot, f)}`));
       }
     } else {
-      for (const f of segmentFiles.slice(0, 3)) {
+      for (const f of fragmentFiles.slice(0, 3)) {
         console.log(pc5.dim(`     ${relative(projectRoot, f)}`));
       }
-      console.log(pc5.dim(`     ... and ${segmentFiles.length - 3} more`));
+      console.log(pc5.dim(`     ... and ${fragmentFiles.length - 3} more`));
     }
   }
   if (mdxFilesFound.length > 0) {
@@ -565,8 +565,8 @@ function parseMeta(content, filePath, warnings) {
   const selectedTitle = componentPathTitle ?? titleMatches[0];
   if (selectedTitle) {
     result.title = selectedTitle;
-    const segments = result.title.split("/");
-    result.componentName = segments[segments.length - 1];
+    const fragments = result.title.split("/");
+    result.componentName = fragments[fragments.length - 1];
   }
   const componentMatch = content.match(/component:\s*(\w+)/);
   if (componentMatch) {
@@ -1127,9 +1127,9 @@ function storyNameToTitle(name) {
   return name.replace(/([A-Z])/g, " $1").trim().replace(/\s+/g, " ");
 }
 function extractCategory(title) {
-  const segments = title.split("/");
-  if (segments.length >= 2) {
-    const category = segments[segments.length - 2];
+  const fragments = title.split("/");
+  if (fragments.length >= 2) {
+    const category = fragments[fragments.length - 2];
     return category.toLowerCase();
   }
   return "components";
@@ -1139,14 +1139,14 @@ function extractCategory(title) {
 function sanitizeComponentName(name) {
   return name.split(/[\s-_]+/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("").replace(/[^a-zA-Z0-9]/g, "");
 }
-function convertToSegment(parsed) {
+function convertToFragment(parsed) {
   const warnings = [...parsed.warnings];
   const todos = [];
   const category = extractCategory(parsed.meta.title);
   const componentName = sanitizeComponentName(parsed.meta.componentName);
   if (!parsed.meta.componentImport) {
     warnings.push(`No importable component found - story may define component locally`);
-    const outputFile2 = parsed.filePath.replace(/\.stories\.(tsx?|jsx?|mdx)$/, ".segment.tsx");
+    const outputFile2 = parsed.filePath.replace(/\.stories\.(tsx?|jsx?|mdx)$/, ".fragment.tsx");
     return {
       sourceFile: parsed.filePath,
       outputFile: outputFile2,
@@ -1174,7 +1174,7 @@ function convertToSegment(parsed) {
     }
   }
   const skippedVariants = variants.filter((v) => v.needsManualReview && v.skipReason).map((v) => ({ name: v.name, reason: v.skipReason }));
-  const code = generateSegmentCode({
+  const code = generateFragmentCode({
     componentName,
     componentImport: parsed.meta.componentImport,
     description: parsed.meta.description,
@@ -1191,7 +1191,7 @@ function convertToSegment(parsed) {
       skippedVariants: skippedVariants.length > 0 ? skippedVariants : void 0
     }
   });
-  const outputFile = parsed.filePath.replace(/\.stories\.(tsx?|jsx?|mdx)$/, ".segment.tsx");
+  const outputFile = parsed.filePath.replace(/\.stories\.(tsx?|jsx?|mdx)$/, ".fragment.tsx");
   return {
     sourceFile: parsed.filePath,
     outputFile,
@@ -1408,7 +1408,7 @@ function formatValueForObject(value) {
   }
   return JSON.stringify(value);
 }
-function generateSegmentCode(options) {
+function generateFragmentCode(options) {
   const {
     componentName,
     componentImport,
@@ -1439,10 +1439,10 @@ ${generated.skippedVariants.map((sv) => `      { name: "${escapeString(sv.name)}
   },
 `;
   }
-  return `import { defineSegment } from "@fragments/core";
+  return `import { defineFragment } from "@fragments/core";
 import { ${componentName} } from "${componentImport}";
 
-export default defineSegment({
+export default defineFragment({
   component: ${componentName},
 
   meta: {
@@ -1627,21 +1627,21 @@ async function discoverStoryFiles(projectRoot, patterns) {
 }
 
 // src/setup.ts
-async function isSegmentsJsonStale(configDir, outFile) {
+async function isFragmentsJsonStale(configDir, outFile) {
   const fs2 = await import("fs/promises");
   const path = await import("path");
   const fg4 = await import("fast-glob");
-  const segmentsJsonPath = path.join(configDir, outFile);
+  const fragmentsJsonPath = path.join(configDir, outFile);
   try {
-    const segmentsJsonStat = await fs2.stat(segmentsJsonPath);
-    const segmentFiles = await fg4.default(`**/*${BRAND.fileExtension}`, {
+    const fragmentsJsonStat = await fs2.stat(fragmentsJsonPath);
+    const fragmentFiles = await fg4.default(`**/*${BRAND.fileExtension}`, {
       cwd: configDir,
       ignore: ["**/node_modules/**"],
       absolute: true
     });
-    for (const file of segmentFiles) {
+    for (const file of fragmentFiles) {
       const stat3 = await fs2.stat(file);
-      if (stat3.mtimeMs > segmentsJsonStat.mtimeMs) {
+      if (stat3.mtimeMs > fragmentsJsonStat.mtimeMs) {
         return { stale: true, missing: false };
       }
     }
@@ -1650,16 +1650,16 @@ async function isSegmentsJsonStale(configDir, outFile) {
     return { stale: false, missing: true };
   }
 }
-async function loadSegmentInfo(segmentFiles) {
+async function loadFragmentInfo(fragmentFiles) {
   const fs2 = await import("fs/promises");
-  const segments = [];
-  for (const file of segmentFiles) {
+  const fragments = [];
+  for (const file of fragmentFiles) {
     try {
       const content = await fs2.readFile(file.absolutePath, "utf-8");
       const nameMatch = content.match(/name:\s*['"]([^'"]+)['"]/);
       const hasFigma = /meta:\s*\{[^}]*figma:\s*['"]https?:/.test(content);
       if (nameMatch) {
-        segments.push({
+        fragments.push({
           name: nameMatch[1],
           filePath: file.absolutePath,
           hasFigma
@@ -1668,14 +1668,14 @@ async function loadSegmentInfo(segmentFiles) {
     } catch {
     }
   }
-  return segments;
+  return fragments;
 }
 async function runSetup(options = {}) {
   const fs2 = await import("fs/promises");
   const path = await import("path");
   const result = {
-    segmentFilesCreated: 0,
-    segmentsBuilt: 0,
+    fragmentFilesCreated: 0,
+    fragmentsBuilt: 0,
     figmaLinked: 0,
     errors: []
   };
@@ -1685,8 +1685,8 @@ async function runSetup(options = {}) {
   try {
     const { config, configDir } = await loadConfig(options.configPath);
     log(pc6.dim("Checking for fragment files..."));
-    let segmentFiles = await discoverSegmentFiles(config, configDir);
-    if (segmentFiles.length === 0 && !options.skipStorybook) {
+    let fragmentFiles = await discoverFragmentFiles(config, configDir);
+    if (fragmentFiles.length === 0 && !options.skipStorybook) {
       log(pc6.yellow("\n   No fragment files found"));
       const sbConfig = await detectStorybookConfig(configDir);
       if (sbConfig) {
@@ -1698,40 +1698,40 @@ async function runSetup(options = {}) {
           for (const storyFile of storyFiles) {
             try {
               const parsed = await parseStoryFile(storyFile);
-              const segmentResult = convertToSegment(parsed);
-              await fs2.mkdir(path.dirname(segmentResult.outputFile), { recursive: true });
-              await fs2.writeFile(segmentResult.outputFile, segmentResult.code);
+              const fragmentResult = convertToFragment(parsed);
+              await fs2.mkdir(path.dirname(fragmentResult.outputFile), { recursive: true });
+              await fs2.writeFile(fragmentResult.outputFile, fragmentResult.code);
               converted++;
             } catch {
             }
           }
-          result.segmentFilesCreated = converted;
+          result.fragmentFilesCreated = converted;
           log(pc6.green(`   Generated ${converted} fragment file(s)`));
-          segmentFiles = await discoverSegmentFiles(config, configDir);
+          fragmentFiles = await discoverFragmentFiles(config, configDir);
         }
       } else {
         log(pc6.dim("   No Storybook config found"));
         log(pc6.dim(`   Run ${pc6.cyan(`${BRAND.cliCommand} add <ComponentName>`)} to create your first fragment`));
       }
-    } else if (segmentFiles.length > 0) {
-      log(pc6.green(`   Found ${segmentFiles.length} fragment file(s)`));
+    } else if (fragmentFiles.length > 0) {
+      log(pc6.green(`   Found ${fragmentFiles.length} fragment file(s)`));
     }
-    if (segmentFiles.length > 0 && !options.skipBuild) {
+    if (fragmentFiles.length > 0 && !options.skipBuild) {
       const outFile = config.outFile || BRAND.outFile;
-      const { stale, missing } = await isSegmentsJsonStale(configDir, outFile);
+      const { stale, missing } = await isFragmentsJsonStale(configDir, outFile);
       if (missing || stale) {
         const reason = missing ? "Building" : "Rebuilding";
         log(pc6.dim(`
 ${reason} ${BRAND.outFile}...`));
         try {
-          const buildResult = await buildSegments(config, configDir);
-          result.segmentsBuilt = buildResult.segmentCount;
+          const buildResult = await buildFragments(config, configDir);
+          result.fragmentsBuilt = buildResult.fragmentCount;
           if (buildResult.errors.length > 0) {
             for (const err of buildResult.errors) {
               result.errors.push(`${err.file}: ${err.error}`);
             }
           }
-          log(pc6.green(`   Built ${buildResult.segmentCount} fragment(s)`));
+          log(pc6.green(`   Built ${buildResult.fragmentCount} fragment(s)`));
         } catch (error) {
           result.errors.push(`Build failed: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
@@ -1741,14 +1741,14 @@ ${reason} ${BRAND.outFile}...`));
       }
     }
     if (!options.skipFigma && config.figmaFile && process.env.FIGMA_ACCESS_TOKEN) {
-      const segments = await loadSegmentInfo(segmentFiles);
-      const linkedCount = segments.filter((s) => s.hasFigma).length;
-      if (linkedCount === 0 && segments.length > 0) {
+      const fragments = await loadFragmentInfo(fragmentFiles);
+      const linkedCount = fragments.filter((s) => s.hasFigma).length;
+      if (linkedCount === 0 && fragments.length > 0) {
         log(pc6.dim("\n   Figma configured but no fragments linked"));
         log(pc6.dim(`   Run ${pc6.cyan(`${BRAND.cliCommand} link figma --auto`)} to auto-link components`));
       } else if (linkedCount > 0) {
         log(pc6.dim(`
-   ${linkedCount}/${segments.length} fragment(s) linked to Figma`));
+   ${linkedCount}/${fragments.length} fragment(s) linked to Figma`));
       }
     } else if (!options.skipFigma && config.figmaFile && !process.env.FIGMA_ACCESS_TOKEN) {
       log(pc6.dim("\n   Figma file configured but FIGMA_ACCESS_TOKEN not set"));
@@ -1785,7 +1785,7 @@ ${BRAND.name} Dev Server
       }
     }
   }
-  const { createDevServer } = await import("./viewer-R3Q6WAMJ.js");
+  const { createDevServer } = await import("./viewer-GM7IQPPB.js");
   console.log(pc7.dim("\nStarting dev server..."));
   const parsedPort = typeof port === "string" ? parseInt(port, 10) : port;
   try {
@@ -1871,7 +1871,7 @@ ${BRAND.name} Design Verification
   let passed = 0;
   let failed = 0;
   for (const comp of componentsToCompare) {
-    const response = await fetch(`${baseUrl}/segments/compare`, {
+    const response = await fetch(`${baseUrl}/fragments/compare`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
@@ -1921,35 +1921,35 @@ ${pc8.green(`${passed} passed`)}, ${pc8.red(`${failed} failed`)}
 }
 async function compareAll(baseUrl, threshold, output) {
   console.log(pc8.dim("Comparing all components with Figma links...\n"));
-  const contextResp = await fetch(`${baseUrl}/segments/context?format=json`);
+  const contextResp = await fetch(`${baseUrl}/fragments/context?format=json`);
   if (!contextResp.ok) {
-    throw new Error("Failed to fetch segments. Make sure dev server is running.");
+    throw new Error("Failed to fetch fragments. Make sure dev server is running.");
   }
   const contextText = await contextResp.text();
-  let segments = [];
+  let fragments = [];
   try {
     const contextData = JSON.parse(contextText);
-    segments = contextData.components || [];
+    fragments = contextData.components || [];
   } catch {
-    segments = [];
+    fragments = [];
   }
-  if (segments.length === 0) {
+  if (fragments.length === 0) {
     console.log(pc8.yellow("No components found with Figma links."));
-    console.log(pc8.dim("Add figma field to your segment definitions:"));
+    console.log(pc8.dim("Add figma field to your fragment definitions:"));
     console.log(pc8.dim('  meta: { figma: "https://figma.com/file/..." }'));
     return { success: true, passed: 0, failed: 0, skipped: 0 };
   }
   let passed = 0;
   let failed = 0;
   let skipped = 0;
-  for (const seg of segments) {
+  for (const seg of fragments) {
     if (!seg.figma) {
       skipped++;
       console.log(`${pc8.dim("\u23ED\uFE0F")}  ${pc8.dim(seg.name)} ${pc8.dim("(no figma link)")}`);
       continue;
     }
     try {
-      const response = await fetch(`${baseUrl}/segments/compare`, {
+      const response = await fetch(`${baseUrl}/fragments/compare`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -1995,27 +1995,27 @@ ${pc8.green(`${passed} passed`)}, ${pc8.red(`${failed} failed`)}, ${pc8.dim(`${s
 }
 async function selectComponents(baseUrl) {
   console.log(pc8.dim("Fetching components with Figma links...\n"));
-  const contextResp = await fetch(`${baseUrl}/segments/context?format=json`);
+  const contextResp = await fetch(`${baseUrl}/fragments/context?format=json`);
   if (!contextResp.ok) {
-    throw new Error("Failed to fetch segments. Make sure dev server is running.");
+    throw new Error("Failed to fetch fragments. Make sure dev server is running.");
   }
   const contextText = await contextResp.text();
-  let segments = [];
+  let fragments = [];
   try {
     const contextData = JSON.parse(contextText);
-    segments = (contextData.components || []).filter((s) => s.figma);
+    fragments = (contextData.components || []).filter((s) => s.figma);
   } catch {
-    segments = [];
+    fragments = [];
   }
-  if (segments.length === 0) {
+  if (fragments.length === 0) {
     console.log(pc8.yellow("No components found with Figma links."));
-    console.log(pc8.dim("Add figma field to your segment definitions:"));
+    console.log(pc8.dim("Add figma field to your fragment definitions:"));
     console.log(pc8.dim('  meta: { figma: "https://figma.com/file/..." }'));
     return [];
   }
   const { checkbox } = await import("@inquirer/prompts");
   try {
-    const choices = segments.map((seg) => ({
+    const choices = fragments.map((seg) => ({
       name: seg.name,
       value: seg.name,
       checked: true
@@ -2066,7 +2066,7 @@ var DevServerClient = class {
     try {
       const controller = new AbortController();
       const timeoutId = setTimeout(() => controller.abort(), 5e3);
-      const response = await fetch(`${this.baseUrl}/segments/context?format=json`, {
+      const response = await fetch(`${this.baseUrl}/fragments/context?format=json`, {
         signal: controller.signal
       });
       clearTimeout(timeoutId);
@@ -2076,10 +2076,10 @@ var DevServerClient = class {
     }
   }
   /**
-   * Get all segments from the context endpoint
+   * Get all fragments from the context endpoint
    */
-  async getSegments() {
-    const response = await this.fetch("/segments/context?format=json");
+  async getFragments() {
+    const response = await this.fetch("/fragments/context?format=json");
     const data = await response.json();
     const components = data.components || {};
     return Object.entries(components).map(([name, info]) => ({
@@ -2094,7 +2094,7 @@ var DevServerClient = class {
    * Get compliance data for a component
    */
   async getCompliance(request) {
-    const response = await this.fetch("/segments/compliance", {
+    const response = await this.fetch("/fragments/compliance", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(request)
@@ -2198,12 +2198,12 @@ ${BRAND.name} Compliance Verification
       `http://localhost:${port}`
     );
   }
-  let segments = await client.getSegments();
+  let fragments = await client.getFragments();
   if (component) {
-    segments = segments.filter(
+    fragments = fragments.filter(
       (s) => s.name.toLowerCase() === component.toLowerCase()
     );
-    if (segments.length === 0) {
+    if (fragments.length === 0) {
       const error = { error: `Component "${component}" not found` };
       if (ci) {
         console.log(JSON.stringify(error));
@@ -2213,7 +2213,7 @@ ${BRAND.name} Compliance Verification
       process.exit(1);
     }
   }
-  for (const seg of segments) {
+  for (const seg of fragments) {
     try {
       const complianceResult = await client.getCompliance({
         component: seg.name
@@ -2316,8 +2316,8 @@ ${BRAND.name} Design System Audit
       `http://localhost:${port}`
     );
   }
-  const segments = await client.getSegments();
-  if (segments.length === 0) {
+  const fragments = await client.getFragments();
+  if (fragments.length === 0) {
     if (json) {
       console.log(JSON.stringify({ error: "No fragments found", components: [] }));
     } else {
@@ -2336,10 +2336,10 @@ ${BRAND.name} Design System Audit
     };
   }
   if (!json) {
-    console.log(pc11.dim(`Auditing ${segments.length} component(s)...
+    console.log(pc11.dim(`Auditing ${fragments.length} component(s)...
 `));
   }
-  for (const seg of segments) {
+  for (const seg of fragments) {
     try {
       const complianceResult = await client.getCompliance({
         component: seg.name
@@ -3057,8 +3057,8 @@ ${BRAND.name} Accessibility Report
       `http://localhost:${port}`
     );
   }
-  const segments = await client.getSegments();
-  if (segments.length === 0) {
+  const fragments = await client.getFragments();
+  if (fragments.length === 0) {
     if (isJsonOutput) {
       console.log(JSON.stringify({ error: "No fragments found", components: [] }));
     } else {
@@ -3077,9 +3077,9 @@ ${BRAND.name} Accessibility Report
       passed: true
     };
   }
-  const componentsToCheck = component ? segments.filter((s) => s.name.toLowerCase() === component.toLowerCase()) : segments;
+  const componentsToCheck = component ? fragments.filter((s) => s.name.toLowerCase() === component.toLowerCase()) : fragments;
   if (component && componentsToCheck.length === 0) {
-    const error = `Component '${component}' not found. Available: ${segments.map((s) => s.name).join(", ")}`;
+    const error = `Component '${component}' not found. Available: ${fragments.map((s) => s.name).join(", ")}`;
     if (isJsonOutput) {
       console.log(JSON.stringify({ error }));
     } else {
@@ -3230,9 +3230,9 @@ async function storygen(options = {}) {
   console.log(pc13.cyan(`
 ${BRAND.name} Story Generator
 `));
-  const segmentFiles = await discoverSegmentFiles(config, configDir);
-  if (segmentFiles.length === 0) {
-    console.log(pc13.yellow("No segment files found.\n"));
+  const fragmentFiles = await discoverFragmentFiles(config, configDir);
+  if (fragmentFiles.length === 0) {
+    console.log(pc13.yellow("No fragment files found.\n"));
     return { success: true, generated: 0, outputDir: output };
   }
   const outputDir = resolve3(configDir, output);
@@ -3240,10 +3240,10 @@ ${BRAND.name} Story Generator
   let generated = 0;
   const generateStory = async (file) => {
     try {
-      const segment = await loadSegmentFile(file.absolutePath);
-      if (!segment) return false;
-      const storyContent = generateCSF3Story(segment, file.relativePath);
-      const storyName = `${segment.meta.name}.stories.tsx`;
+      const fragment = await loadFragmentFile(file.absolutePath);
+      if (!fragment) return false;
+      const storyContent = generateCSF3Story(fragment, file.relativePath);
+      const storyName = `${fragment.meta.name}.stories.tsx`;
       const storyPath = join5(outputDir, storyName);
       await writeFile3(storyPath, storyContent);
       console.log(`${pc13.green("\u2713")} Generated ${storyName}`);
@@ -3255,7 +3255,7 @@ ${BRAND.name} Story Generator
   };
   console.log(pc13.dim(`Generating stories to ${relative3(process.cwd(), outputDir)}/
 `));
-  for (const file of segmentFiles) {
+  for (const file of fragmentFiles) {
     if (await generateStory(file)) {
       generated++;
     }
@@ -3264,15 +3264,15 @@ ${BRAND.name} Story Generator
   console.log(pc13.green(`\u2713 Generated ${generated} story file(s)
 `));
   if (watch) {
-    console.log(pc13.dim("Watching for segment changes... (Ctrl+C to stop)\n"));
+    console.log(pc13.dim("Watching for fragment changes... (Ctrl+C to stop)\n"));
     const chokidar = await import("chokidar");
-    const patterns = segmentFiles.map((f) => f.absolutePath);
+    const patterns = fragmentFiles.map((f) => f.absolutePath);
     const watcher = chokidar.watch(patterns, {
       ignoreInitial: true,
       awaitWriteFinish: { stabilityThreshold: 100 }
     });
     watcher.on("change", async (changedPath) => {
-      const file = segmentFiles.find((f) => f.absolutePath === changedPath);
+      const file = fragmentFiles.find((f) => f.absolutePath === changedPath);
       if (file) {
         console.log(pc13.dim(`
 Changed: ${relative3(process.cwd(), changedPath)}`));
@@ -3282,10 +3282,10 @@ Changed: ${relative3(process.cwd(), changedPath)}`));
     watcher.on("add", async (addedPath) => {
       console.log(pc13.dim(`
 Added: ${relative3(process.cwd(), addedPath)}`));
-      const newFiles = await discoverSegmentFiles(config, configDir);
+      const newFiles = await discoverFragmentFiles(config, configDir);
       const file = newFiles.find((f) => f.absolutePath === addedPath);
       if (file) {
-        segmentFiles.push(file);
+        fragmentFiles.push(file);
         await generateStory(file);
       }
     });
@@ -3294,8 +3294,8 @@ Added: ${relative3(process.cwd(), addedPath)}`));
   }
   return { success: true, generated, outputDir };
 }
-function generateCSF3Story(segment, relativePath) {
-  const { meta, variants, props, usage } = segment;
+function generateCSF3Story(fragment, relativePath) {
+  const { meta, variants, props, usage } = fragment;
   const componentName = meta.name;
   const argTypes = [];
   if (props) {
@@ -3335,11 +3335,11 @@ ${usage.whenNot?.map((w) => `- ${w}`).join("\n") || ""}` : "";
   return `/**
  * Auto-generated Storybook stories from ${relativePath}
  *
- * DO NOT EDIT - regenerate with: segments storygen
+ * DO NOT EDIT - regenerate with: fragments storygen
  */
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { ${componentName} } from '${relativePath.replace(/\.segment\.tsx$/, "/index.js")}';
+import { ${componentName} } from '${relativePath.replace(/\.fragment\.tsx$/, "/index.js")}';
 
 const meta: Meta<typeof ${componentName}> = {
   title: '${meta.category ? `${meta.category.charAt(0).toUpperCase() + meta.category.slice(1)}/` : ""}${componentName}',
@@ -3450,14 +3450,14 @@ async function updateBaseline(component, options, config, configDir, baseUrl) {
       throw new Error("Failed to fetch fragments. Make sure dev server is running.");
     }
     const contextData = JSON.parse(await contextResp.text());
-    const segments = contextData.components || [];
-    if (segments.length === 0) {
+    const fragments = contextData.components || [];
+    if (fragments.length === 0) {
       console.log(pc15.yellow("No components found.\n"));
       return { success: true, action: "update", count: 0 };
     }
     component = await select({
       message: "Select component to update:",
-      choices: segments.map((s) => ({
+      choices: fragments.map((s) => ({
         name: s.name,
         value: s.name
       }))
@@ -3607,7 +3607,7 @@ ${BRAND.name} Component Scaffold
   dir = dir || "src/components";
   const componentDir = resolve4(process.cwd(), dir, componentName);
   const componentFile = join7(componentDir, `${componentName}.tsx`);
-  const segmentFile = join7(componentDir, `${componentName}${BRAND.fileExtension}`);
+  const fragmentFile = join7(componentDir, `${componentName}${BRAND.fileExtension}`);
   const indexFile = join7(componentDir, "index.ts");
   try {
     await access2(componentDir);
@@ -3622,9 +3622,9 @@ ${BRAND.name} Component Scaffold
     await writeFile4(componentFile, componentCode);
     console.log(`${pc16.green("\u2713")} Created ${relative5(process.cwd(), componentFile)}`);
   }
-  const segmentCode = generateSegmentStub(componentName, category, template);
-  await writeFile4(segmentFile, segmentCode);
-  console.log(`${pc16.green("\u2713")} Created ${relative5(process.cwd(), segmentFile)}`);
+  const fragmentCode = generateFragmentStub(componentName, category, template);
+  await writeFile4(fragmentFile, fragmentCode);
+  console.log(`${pc16.green("\u2713")} Created ${relative5(process.cwd(), fragmentFile)}`);
   const indexCode = `export { ${componentName} } from './${componentName}.js';
 `;
   await writeFile4(indexFile, indexCode);
@@ -3644,7 +3644,7 @@ ${BRAND.name} Component Scaffold
   return {
     success: true,
     componentPath: generateComponent ? componentFile : void 0,
-    segmentPath: segmentFile,
+    fragmentPath: fragmentFile,
     indexPath: indexFile
   };
 }
@@ -3673,7 +3673,7 @@ export function ${name}({ children, className }: ${name}Props) {
 }
 `;
 }
-function generateSegmentStub(name, category, template) {
+function generateFragmentStub(name, category, template) {
   const usageHints = {
     action: {
       when: ["User needs to trigger an action", "Form submission is required"],
@@ -3701,10 +3701,10 @@ function generateSegmentStub(name, category, template) {
   };
   const scenarioTags = scenarioTagHints[template] || scenarioTagHints.display;
   return `import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { ${name} } from './index.js';
 
-export default defineSegment({
+export default defineFragment({
   component: ${name},
 
   meta: {
@@ -3837,40 +3837,40 @@ ${BRAND.name} Link Wizard
   } else {
     console.log();
   }
-  const segmentFiles = await discoverSegmentFiles(config, configDir);
-  if (segmentFiles.length === 0) {
-    console.log(pc17.yellow("No segment files found in codebase."));
+  const fragmentFiles = await discoverFragmentFiles(config, configDir);
+  if (fragmentFiles.length === 0) {
+    console.log(pc17.yellow("No fragment files found in codebase."));
     console.log(pc17.dim(`Looking for: ${config.include.join(", ")}`));
     process.exit(0);
   }
-  console.log(pc17.dim(`Found ${segmentFiles.length} segment file(s)
+  console.log(pc17.dim(`Found ${fragmentFiles.length} fragment file(s)
 `));
-  const segments = [];
-  for (const file of segmentFiles) {
+  const fragments = [];
+  for (const file of fragmentFiles) {
     try {
       const content = await readFile4(file.absolutePath, "utf-8");
       const nameMatch = content.match(/name:\s*['"]([^'"]+)['"]/);
       const hasFigma = /meta:\s*\{[^}]*figma:\s*['"]https?:/.test(content);
-      const segmentVariants = extractVariants(content, nameMatch?.[1]);
+      const fragmentVariants = extractVariants(content, nameMatch?.[1]);
       if (nameMatch) {
-        segments.push({
+        fragments.push({
           name: nameMatch[1],
           filePath: file.absolutePath,
           relativePath: file.relativePath,
           hasFigma,
-          variants: segmentVariants
+          variants: fragmentVariants
         });
       }
     } catch {
     }
   }
   const matches = [];
-  const unmatchedSegments = [];
-  for (const segment of segments) {
+  const unmatchedFragments = [];
+  for (const fragment of fragments) {
     let bestMatch = null;
     let bestScore = 0;
     for (const figmaComp of allFigmaComponents) {
-      const score = calculateMatchScore(segment.name, figmaComp.name);
+      const score = calculateMatchScore(fragment.name, figmaComp.name);
       if (score > bestScore) {
         bestMatch = figmaComp;
         bestScore = score;
@@ -3878,18 +3878,18 @@ ${BRAND.name} Link Wizard
       }
     }
     if (bestMatch && bestScore >= 65) {
-      const alreadyLinked = segment.hasFigma;
+      const alreadyLinked = fragment.hasFigma;
       if (alreadyLinked && !auto) {
-        console.log(pc17.dim(`\u23ED\uFE0F  ${segment.name} (already linked)`));
+        console.log(pc17.dim(`\u23ED\uFE0F  ${fragment.name} (already linked)`));
       }
-      matches.push({ segment, figmaComponent: bestMatch, score: bestScore, alreadyLinked });
+      matches.push({ fragment, figmaComponent: bestMatch, score: bestScore, alreadyLinked });
     } else {
-      unmatchedSegments.push(segment);
+      unmatchedFragments.push(fragment);
     }
   }
-  if (unmatchedSegments.length > 0) {
-    console.log(pc17.dim("Unmatched segments:"));
-    for (const seg of unmatchedSegments) {
+  if (unmatchedFragments.length > 0) {
+    console.log(pc17.dim("Unmatched fragments:"));
+    for (const seg of unmatchedFragments) {
       console.log(`  ${pc17.dim("\u2022")} ${seg.name}`);
     }
     console.log();
@@ -3898,7 +3898,7 @@ ${BRAND.name} Link Wizard
   const alreadyLinkedMatches = matches.filter((m) => m.alreadyLinked);
   if (matches.length === 0) {
     console.log(pc17.yellow("\nNo automatic matches found."));
-    console.log(pc17.dim("You can manually add figma URLs to your segment definitions."));
+    console.log(pc17.dim("You can manually add figma URLs to your fragment definitions."));
     process.exit(0);
   }
   if (dryRun) {
@@ -3907,7 +3907,7 @@ ${BRAND.name} Link Wizard
       for (const match of newMatches) {
         const scoreColor = match.score === 100 ? pc17.green : pc17.yellow;
         console.log(
-          `  ${pc17.green("\u2713")} ${pc17.bold(match.segment.name)} \u2192 ${match.figmaComponent.name} ${scoreColor(`(${Math.round(match.score)}%)`)}`
+          `  ${pc17.green("\u2713")} ${pc17.bold(match.fragment.name)} \u2192 ${match.figmaComponent.name} ${scoreColor(`(${Math.round(match.score)}%)`)}`
         );
       }
     }
@@ -3921,7 +3921,7 @@ ${BRAND.name} Link Wizard
       for (const match of newMatches) {
         const scoreColor = match.score === 100 ? pc17.green : pc17.yellow;
         console.log(
-          `  ${pc17.green("\u2713")} ${pc17.bold(match.segment.name)} \u2192 ${match.figmaComponent.name} ${scoreColor(`(${Math.round(match.score)}%)`)}`
+          `  ${pc17.green("\u2713")} ${pc17.bold(match.fragment.name)} \u2192 ${match.figmaComponent.name} ${scoreColor(`(${Math.round(match.score)}%)`)}`
         );
       }
     } else {
@@ -3931,7 +3931,7 @@ ${BRAND.name} Link Wizard
       const choices = newMatches.map((match) => {
         const scoreColor = match.score === 100 ? pc17.green : pc17.yellow;
         return {
-          name: `${pc17.bold(match.segment.name)} \u2192 ${match.figmaComponent.name} ${scoreColor(`(${Math.round(match.score)}%)`)}`,
+          name: `${pc17.bold(match.fragment.name)} \u2192 ${match.figmaComponent.name} ${scoreColor(`(${Math.round(match.score)}%)`)}`,
           value: match,
           checked: true
         };
@@ -3953,7 +3953,7 @@ ${BRAND.name} Link Wizard
   for (const match of selectedMatches) {
     if (match.alreadyLinked) continue;
     try {
-      let content = await readFile4(match.segment.filePath, "utf-8");
+      let content = await readFile4(match.fragment.filePath, "utf-8");
       const figmaUrlToInsert = figmaClient.buildNodeUrl(
         match.figmaComponent.file_key,
         match.figmaComponent.node_id,
@@ -3971,16 +3971,16 @@ ${BRAND.name} Link Wizard
     figma: '${figmaUrlToInsert}',`
         );
       }
-      await writeFile5(match.segment.filePath, content);
+      await writeFile5(match.fragment.filePath, content);
       updated++;
-      console.log(`  ${pc17.green("\u2713")} Updated ${match.segment.relativePath}`);
+      console.log(`  ${pc17.green("\u2713")} Updated ${match.fragment.relativePath}`);
     } catch (error) {
-      console.log(`  ${pc17.red("\u2717")} Failed to update ${match.segment.relativePath}: ${error instanceof Error ? error.message : "Unknown error"}`);
+      console.log(`  ${pc17.red("\u2717")} Failed to update ${match.fragment.relativePath}: ${error instanceof Error ? error.message : "Unknown error"}`);
     }
   }
   if (updated > 0) {
     console.log(pc17.green(`
-\u2713 Updated ${updated} segment file(s)
+\u2713 Updated ${updated} fragment file(s)
 `));
   }
   let variantUpdates = 0;
@@ -4035,37 +4035,37 @@ function extractVariants(content, componentName) {
   }
   return variants;
 }
-function calculateMatchScore(segmentName, figmaName) {
+function calculateMatchScore(fragmentName, figmaName) {
   const normalizeForMatch = (s) => s.toLowerCase().replace(/[^a-z0-9]/g, "");
-  const normalizedSegment = normalizeForMatch(segmentName);
+  const normalizedFragment = normalizeForMatch(fragmentName);
   const normalizedFigma = normalizeForMatch(figmaName);
-  if (normalizedSegment === normalizedFigma) {
+  if (normalizedFragment === normalizedFigma) {
     return 100;
   }
-  if (normalizedFigma.startsWith(normalizedSegment)) {
-    const coverage = normalizedSegment.length / normalizedFigma.length;
+  if (normalizedFigma.startsWith(normalizedFragment)) {
+    const coverage = normalizedFragment.length / normalizedFigma.length;
     return Math.max(85, coverage * 100);
   }
-  if (normalizedSegment.startsWith(normalizedFigma)) {
-    const coverage = normalizedFigma.length / normalizedSegment.length;
+  if (normalizedFragment.startsWith(normalizedFigma)) {
+    const coverage = normalizedFigma.length / normalizedFragment.length;
     return Math.max(80, coverage * 100);
   }
   const getWords = (s) => {
     return s.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[^a-zA-Z0-9]+/g, " ").toLowerCase().split(/\s+/).filter((w) => w.length > 0);
   };
-  const segmentWords = getWords(segmentName);
+  const fragmentWords = getWords(fragmentName);
   const figmaWords = getWords(figmaName);
-  const allSegmentWordsInFigma = segmentWords.every(
+  const allFragmentWordsInFigma = fragmentWords.every(
     (sw) => figmaWords.some((fw) => fw === sw || fw.startsWith(sw) || sw.startsWith(fw))
   );
-  if (allSegmentWordsInFigma && segmentWords.length > 0) {
-    const wordOverlap = segmentWords.length / Math.max(segmentWords.length, figmaWords.length);
+  if (allFragmentWordsInFigma && fragmentWords.length > 0) {
+    const wordOverlap = fragmentWords.length / Math.max(fragmentWords.length, figmaWords.length);
     return Math.max(75, wordOverlap * 95);
   }
-  if (normalizedFigma.includes(normalizedSegment)) {
+  if (normalizedFigma.includes(normalizedFragment)) {
     return 70;
   }
-  if (normalizedSegment.includes(normalizedFigma)) {
+  if (normalizedFragment.includes(normalizedFigma)) {
     return 65;
   }
   return 0;
@@ -4089,24 +4089,24 @@ async function linkVariants(matches, figmaData, figmaClient, fileKey) {
     if (!csWithVariants || csWithVariants.variants.length === 0) {
       continue;
     }
-    const segmentVariants = match.segment.variants.filter((v) => !v.hasFigma);
-    if (segmentVariants.length === 0) {
-      console.log(pc17.dim(`  \u23ED\uFE0F  ${match.segment.name}: all variants already linked`));
+    const fragmentVariants = match.fragment.variants.filter((v) => !v.hasFigma);
+    if (fragmentVariants.length === 0) {
+      console.log(pc17.dim(`  \u23ED\uFE0F  ${match.fragment.name}: all variants already linked`));
       continue;
     }
-    console.log(pc17.dim(`  ${match.segment.name}: ${csWithVariants.variants.length} Figma variants`));
-    for (const segmentVariant of segmentVariants) {
+    console.log(pc17.dim(`  ${match.fragment.name}: ${csWithVariants.variants.length} Figma variants`));
+    for (const fragmentVariant of fragmentVariants) {
       const variantMatches = [];
       for (const fv of csWithVariants.variants) {
-        const normalizedSegment = normalizeForMatch(segmentVariant.name);
+        const normalizedFragment = normalizeForMatch(fragmentVariant.name);
         for (const value of fv.values) {
           const normalizedValue = normalizeForMatch(value);
-          if (normalizedSegment === normalizedValue) {
+          if (normalizedFragment === normalizedValue) {
             variantMatches.push({ figmaVariant: fv, score: 100 });
             break;
-          } else if (normalizedValue.includes(normalizedSegment)) {
+          } else if (normalizedValue.includes(normalizedFragment)) {
             variantMatches.push({ figmaVariant: fv, score: 85 });
-          } else if (normalizedSegment.includes(normalizedValue)) {
+          } else if (normalizedFragment.includes(normalizedValue)) {
             variantMatches.push({ figmaVariant: fv, score: 75 });
           }
         }
@@ -4120,9 +4120,9 @@ async function linkVariants(matches, figmaData, figmaClient, fileKey) {
           figmaData.fileName
         );
         try {
-          let content = await readFile4(match.segment.filePath, "utf-8");
+          let content = await readFile4(match.fragment.filePath, "utf-8");
           const namePattern = new RegExp(
-            `(name:\\s*['"]${escapeRegExp(segmentVariant.name)}['"],?)`,
+            `(name:\\s*['"]${escapeRegExp(fragmentVariant.name)}['"],?)`,
             "g"
           );
           let replaced = false;
@@ -4132,14 +4132,14 @@ async function linkVariants(matches, figmaData, figmaClient, fileKey) {
             return `${matchedStr}
       figma: '${variantUrl}',`;
           });
-          await writeFile5(match.segment.filePath, content);
+          await writeFile5(match.fragment.filePath, content);
           variantUpdates++;
           console.log(
-            `    ${pc17.green("\u2713")} ${segmentVariant.name} \u2192 ${bestMatch.figmaVariant.name}`
+            `    ${pc17.green("\u2713")} ${fragmentVariant.name} \u2192 ${bestMatch.figmaVariant.name}`
           );
         } catch (error) {
           console.log(
-            `    ${pc17.red("\u2717")} ${segmentVariant.name}: ${error instanceof Error ? error.message : "Unknown error"}`
+            `    ${pc17.red("\u2717")} ${fragmentVariant.name}: ${error instanceof Error ? error.message : "Unknown error"}`
           );
         }
       } else if (variantMatches.length > 0) {
@@ -4152,7 +4152,7 @@ async function linkVariants(matches, figmaData, figmaClient, fileKey) {
         ];
         try {
           const selectedVariant = await select({
-            message: `  Match for "${segmentVariant.name}":`,
+            message: `  Match for "${fragmentVariant.name}":`,
             choices
           });
           if (selectedVariant) {
@@ -4161,9 +4161,9 @@ async function linkVariants(matches, figmaData, figmaClient, fileKey) {
               selectedVariant.node_id,
               figmaData.fileName
             );
-            let content = await readFile4(match.segment.filePath, "utf-8");
+            let content = await readFile4(match.fragment.filePath, "utf-8");
             const namePattern = new RegExp(
-              `(name:\\s*['"]${escapeRegExp(segmentVariant.name)}['"],?)`,
+              `(name:\\s*['"]${escapeRegExp(fragmentVariant.name)}['"],?)`,
               "g"
             );
             let replaced = false;
@@ -4173,19 +4173,19 @@ async function linkVariants(matches, figmaData, figmaClient, fileKey) {
               return `${matchedStr}
       figma: '${variantUrl}',`;
             });
-            await writeFile5(match.segment.filePath, content);
+            await writeFile5(match.fragment.filePath, content);
             variantUpdates++;
             console.log(
-              `    ${pc17.green("\u2713")} ${segmentVariant.name} \u2192 ${selectedVariant.name}`
+              `    ${pc17.green("\u2713")} ${fragmentVariant.name} \u2192 ${selectedVariant.name}`
             );
           } else {
-            console.log(`    ${pc17.dim("\u23ED\uFE0F")} ${segmentVariant.name} (skipped)`);
+            console.log(`    ${pc17.dim("\u23ED\uFE0F")} ${fragmentVariant.name} (skipped)`);
           }
         } catch {
-          console.log(`    ${pc17.dim("\u23ED\uFE0F")} ${segmentVariant.name} (cancelled)`);
+          console.log(`    ${pc17.dim("\u23ED\uFE0F")} ${fragmentVariant.name} (cancelled)`);
         }
       } else {
-        console.log(`    ${pc17.yellow("?")} ${segmentVariant.name}: no matching Figma variant`);
+        console.log(`    ${pc17.yellow("?")} ${fragmentVariant.name}: no matching Figma variant`);
       }
     }
   }
@@ -4246,7 +4246,7 @@ ${BRAND.name} Storybook Link
     process.stdout.write(`\r  ${pc18.dim(`[${i + 1}/${total}]`)} ${relativePath.slice(0, 60).padEnd(60)}`);
     try {
       const parsed = await parseStoryFile(storyFile);
-      const result = convertToSegment(parsed);
+      const result = convertToFragment(parsed);
       const outputFile = out ? join8(out, relativePath.replace(/\.stories\.(tsx?|jsx?)$/, BRAND.fileExtension)) : result.outputFile;
       previews.push({
         componentName: result.componentName,
@@ -4288,14 +4288,14 @@ ${parseErrors} file(s) could not be parsed (use --verbose for details)`));
   }
   if (dryRun) {
     console.log(pc18.dim(`
-${previews.length} segment file(s) would be created`));
+${previews.length} fragment file(s) would be created`));
     console.log(pc18.yellow("\n[Dry run - no files were written]"));
     return { success: true, generated: 0 };
   }
   let selectedPreviews = previews;
   if (yes) {
     console.log(pc18.dim(`
-${previews.length} segment file(s) will be created`));
+${previews.length} fragment file(s) will be created`));
   } else {
     const { checkbox } = await import("@inquirer/prompts");
     console.log(pc18.dim("\nUse \u2191/\u2193 to navigate, Space to toggle, Enter to confirm\n"));
@@ -4325,7 +4325,7 @@ ${previews.length} segment file(s) will be created`));
   }
   const genTotal = selectedPreviews.length;
   console.log(pc18.dim(`
-Generating ${genTotal} segment file(s)...
+Generating ${genTotal} fragment file(s)...
 `));
   let generated = 0;
   let genErrors = 0;
@@ -4334,7 +4334,7 @@ Generating ${genTotal} segment file(s)...
     const storyFile = join8(projectRoot, preview.sourceFile);
     try {
       const parsed = await parseStoryFile(storyFile);
-      const result = convertToSegment(parsed);
+      const result = convertToFragment(parsed);
       const outputFile = out ? join8(projectRoot, out, preview.sourceFile.replace(/\.stories\.(tsx?|jsx?)$/, BRAND.fileExtension)) : result.outputFile;
       await mkdir6(dirname3(outputFile), { recursive: true });
       await writeFile6(outputFile, result.code);
@@ -4346,7 +4346,7 @@ Generating ${genTotal} segment file(s)...
     }
   }
   console.log(pc18.green(`
-\u2713 Generated ${generated} segment file(s)
+\u2713 Generated ${generated} fragment file(s)
 `));
   console.log(pc18.dim("\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"));
   console.log(pc18.bold("\nNext steps:"));
@@ -4456,8 +4456,8 @@ ${BRAND.name} AI Enhancement
   if (isInteractive) {
     console.log(pc19.dim("Phase 3: Loading fragment files..."));
   }
-  const segmentFiles = await findSegmentFiles(rootDir);
-  if (segmentFiles.length === 0) {
+  const fragmentFiles = await findFragmentFiles(rootDir);
+  if (fragmentFiles.length === 0) {
     const msg = "No fragment files found";
     if (format === "json") {
       console.log(JSON.stringify({ success: false, error: msg }));
@@ -4467,27 +4467,27 @@ ${BRAND.name} AI Enhancement
     return { success: false, enhanced: [], totalTokens: 0, estimatedCost: 0 };
   }
   if (isInteractive) {
-    console.log(pc19.green(`  Found ${segmentFiles.length} fragment files`));
+    console.log(pc19.green(`  Found ${fragmentFiles.length} fragment files`));
   }
   let componentsToEnhance;
   if (component && component !== "all") {
     componentsToEnhance = [component];
   } else {
-    componentsToEnhance = segmentFiles.map((f) => extractComponentName(f));
+    componentsToEnhance = fragmentFiles.map((f) => extractComponentName(f));
   }
   if (isInteractive) {
     console.log(pc19.dim("Phase 4: Extracting props from TypeScript interfaces..."));
   }
   const propsExtractions = /* @__PURE__ */ new Map();
   for (const compName of componentsToEnhance) {
-    const segmentFile = segmentFiles.find((f) => extractComponentName(f) === compName);
-    if (!segmentFile) continue;
-    const segmentDir = segmentFile.replace(/\.segment\.(tsx?|jsx?)$/, "");
+    const fragmentFile = fragmentFiles.find((f) => extractComponentName(f) === compName);
+    if (!fragmentFile) continue;
+    const fragmentDir = fragmentFile.replace(/\.fragment\.(tsx?|jsx?)$/, "");
     const possiblePaths = [
-      `${segmentDir}.tsx`,
-      `${segmentDir}.ts`,
-      `${segmentDir}/index.tsx`,
-      `${segmentDir}/index.ts`,
+      `${fragmentDir}.tsx`,
+      `${fragmentDir}.ts`,
+      `${fragmentDir}/index.tsx`,
+      `${fragmentDir}/index.ts`,
       join9(rootDir, "src", "components", `${compName}.tsx`),
       join9(rootDir, "src", "components", compName, `${compName}.tsx`),
       join9(rootDir, "src", "components", compName, "index.tsx")
@@ -4555,9 +4555,9 @@ ${BRAND.name} AI Enhancement
   for (const compName of componentsToEnhance) {
     const analysis = usageAnalysis.components[compName];
     const stories = storyFiles.get(compName);
-    const segmentFile = segmentFiles.find((f) => extractComponentName(f) === compName);
+    const fragmentFile = fragmentFiles.find((f) => extractComponentName(f) === compName);
     const propsExtraction = propsExtractions.get(compName);
-    if (!segmentFile) continue;
+    if (!fragmentFile) continue;
     const context2 = generateComponentContext(
       compName,
       analysis,
@@ -4565,7 +4565,7 @@ ${BRAND.name} AI Enhancement
       stories,
       propsExtraction
     );
-    contexts.push({ name: compName, context: context2, segmentFile });
+    contexts.push({ name: compName, context: context2, fragmentFile });
   }
   if (isContextMode) {
     return handleContextOnlyMode(contexts, format, isInteractive);
@@ -4578,7 +4578,7 @@ Phase 6: Generating AI enhancements for ${componentsToEnhance.length} component(
   const enhanced = [];
   let totalTokens = 0;
   const aiClient = await createAIClient(provider, apiKey);
-  for (const { name: compName, context: context2, segmentFile } of contexts) {
+  for (const { name: compName, context: context2, fragmentFile } of contexts) {
     if (!context2.usageAnalysis || context2.usageAnalysis.totalUsages < 2) {
       enhanced.push({
         componentName: compName,
@@ -4629,22 +4629,22 @@ Phase 6: Generating AI enhancements for ${componentsToEnhance.length} component(
   const estimatedCost = calculateCost(provider, totalTokens);
   if (!dryRun) {
     if (isInteractive) {
-      console.log(pc19.dim("\nPhase 7: Updating segment files..."));
+      console.log(pc19.dim("\nPhase 7: Updating fragment files..."));
     }
     for (const result of enhanced) {
       if (result.skipped || result.added.when.length === 0 && result.added.whenNot.length === 0) {
         continue;
       }
-      const segmentFile = segmentFiles.find((f) => extractComponentName(f) === result.componentName);
-      if (!segmentFile) continue;
+      const fragmentFile = fragmentFiles.find((f) => extractComponentName(f) === result.componentName);
+      if (!fragmentFile) continue;
       try {
-        await updateSegmentFile(segmentFile, result.added);
+        await updateFragmentFile(fragmentFile, result.added);
         if (isInteractive) {
-          console.log(pc19.green(`  Updated: ${relative7(rootDir, segmentFile)}`));
+          console.log(pc19.green(`  Updated: ${relative7(rootDir, fragmentFile)}`));
         }
       } catch {
         if (isInteractive) {
-          console.log(pc19.red(`  Failed to update: ${relative7(rootDir, segmentFile)}`));
+          console.log(pc19.red(`  Failed to update: ${relative7(rootDir, fragmentFile)}`));
         }
       }
     }
@@ -4727,7 +4727,7 @@ For each component, provide your response in JSON format:
     console.log(pc19.dim("\u2500".repeat(60)));
     console.log();
     console.log(pc19.green("Tip: In Cursor, press Cmd+L to open chat and paste this prompt."));
-    console.log(pc19.dim("After getting suggestions, manually update your segment files."));
+    console.log(pc19.dim("After getting suggestions, manually update your fragment files."));
     console.log();
   }
   return {
@@ -4878,19 +4878,19 @@ function calculateCost(provider, tokens) {
   };
   return tokens / 1e6 * costsPer1M[provider];
 }
-async function findSegmentFiles(dir) {
+async function findFragmentFiles(dir) {
   const fg4 = await import("fast-glob");
-  return fg4.default(["**/*.segment.tsx", "**/*.segment.ts"], {
+  return fg4.default(["**/*.fragment.tsx", "**/*.fragment.ts"], {
     cwd: dir,
     absolute: true,
     ignore: ["**/node_modules/**", "**/dist/**"]
   });
 }
 function extractComponentName(filePath) {
-  const match = filePath.match(/([^/\\]+)\.segment\.(tsx?|jsx?)$/);
+  const match = filePath.match(/([^/\\]+)\.fragment\.(tsx?|jsx?)$/);
   return match ? match[1] : "";
 }
-async function updateSegmentFile(filePath, suggestions) {
+async function updateFragmentFile(filePath, suggestions) {
   const content = await readFile5(filePath, "utf-8");
   let updated = content;
   if (suggestions.when.length > 0) {
@@ -4944,6 +4944,242 @@ ${whenNotItems}
   }
 }
 
+// src/commands/graph.ts
+import pc20 from "picocolors";
+import { readFile as readFile6 } from "fs/promises";
+import { resolve as resolve6 } from "path";
+import {
+  ComponentGraphEngine,
+  deserializeGraph
+} from "@fragments-sdk/context/graph";
+async function graph(component, options) {
+  const { config, configDir } = await loadConfig(options.config);
+  const outputPath = resolve6(configDir, config.outFile ?? BRAND.outFile);
+  let data;
+  try {
+    const content = await readFile6(outputPath, "utf-8");
+    data = JSON.parse(content);
+  } catch {
+    console.error(
+      pc20.red(`Error: Could not load ${BRAND.outFile}. Run \`${BRAND.cliCommand} build\` first.`)
+    );
+    process.exit(1);
+  }
+  if (!data.graph) {
+    console.error(
+      pc20.red(`Error: No graph data in ${BRAND.outFile}. Rebuild with the latest CLI.`)
+    );
+    process.exit(1);
+  }
+  const graph2 = deserializeGraph(data.graph);
+  const blocks = data.blocks ? Object.fromEntries(
+    Object.entries(data.blocks).map(([k, v]) => [k, { components: v.components }])
+  ) : void 0;
+  const engine = new ComponentGraphEngine(graph2, blocks);
+  const mode = options.mode ?? (component ? "dependencies" : "health");
+  const format = options.format ?? "table";
+  const edgeTypes = options.edgeTypes ? options.edgeTypes.split(",") : void 0;
+  const needsComponent = ["dependencies", "dependents", "impact", "path", "composition", "alternatives"];
+  if (needsComponent.includes(mode) && !component) {
+    console.error(pc20.red(`Error: "${mode}" mode requires a component name.`));
+    process.exit(1);
+  }
+  if (component && !engine.hasNode(component)) {
+    console.error(pc20.red(`Error: Component "${component}" not found in graph.`));
+    process.exit(1);
+  }
+  switch (mode) {
+    case "health": {
+      const health = engine.getHealth();
+      if (format === "json") {
+        console.log(JSON.stringify(health, null, 2));
+        return;
+      }
+      console.log(pc20.bold("\nComponent Graph Health\n"));
+      console.log(`  ${pc20.cyan("Nodes:")}     ${health.nodeCount}`);
+      console.log(`  ${pc20.cyan("Edges:")}     ${health.edgeCount}`);
+      console.log(`  ${pc20.cyan("Avg degree:")} ${health.averageDegree}`);
+      console.log(`  ${pc20.cyan("Islands:")}   ${health.connectedComponents.length}`);
+      console.log(`  ${pc20.cyan("Coverage:")}  ${health.compositionCoverage}% in blocks`);
+      console.log(`  ${pc20.cyan("Orphans:")}   ${health.orphans.length > 0 ? health.orphans.join(", ") : pc20.green("none")}`);
+      if (health.hubs.length > 0) {
+        console.log(`
+  ${pc20.bold("Top hubs:")}`);
+        for (const hub of health.hubs.slice(0, 5)) {
+          console.log(`    ${pc20.yellow(hub.name)} \u2014 ${hub.degree} connections`);
+        }
+      }
+      console.log();
+      break;
+    }
+    case "dependencies": {
+      const deps = engine.dependencies(component, edgeTypes);
+      if (format === "json") {
+        console.log(JSON.stringify({ component, dependencies: deps }, null, 2));
+        return;
+      }
+      console.log(pc20.bold(`
+Dependencies of ${component}
+`));
+      if (deps.length === 0) {
+        console.log("  No outgoing dependencies.");
+      } else {
+        for (const dep of deps) {
+          console.log(`  ${pc20.yellow(dep.target)} ${pc20.dim(`(${dep.type})`)}${dep.note ? ` \u2014 ${dep.note}` : ""}`);
+        }
+      }
+      console.log();
+      break;
+    }
+    case "dependents": {
+      const deps = engine.dependents(component, edgeTypes);
+      if (format === "json") {
+        console.log(JSON.stringify({ component, dependents: deps }, null, 2));
+        return;
+      }
+      console.log(pc20.bold(`
+Dependents of ${component}
+`));
+      if (deps.length === 0) {
+        console.log("  No incoming dependents.");
+      } else {
+        for (const dep of deps) {
+          console.log(`  ${pc20.yellow(dep.source)} ${pc20.dim(`(${dep.type})`)}${dep.note ? ` \u2014 ${dep.note}` : ""}`);
+        }
+      }
+      console.log();
+      break;
+    }
+    case "impact": {
+      const result = engine.impact(component, options.depth ?? 3);
+      if (format === "json") {
+        console.log(JSON.stringify(result, null, 2));
+        return;
+      }
+      console.log(pc20.bold(`
+Impact analysis: ${component}
+`));
+      console.log(`  ${pc20.red(`${result.totalAffected}`)} affected components, ${pc20.red(`${result.affectedBlocks.length}`)} affected blocks
+`);
+      if (result.affected.length > 0) {
+        console.log(`  ${pc20.bold("Affected components:")}`);
+        for (const entry of result.affected) {
+          const indent = "  ".repeat(entry.depth + 1);
+          console.log(`${indent}${pc20.yellow(entry.component)} ${pc20.dim(`(depth ${entry.depth}, via ${entry.edgeType})`)}`);
+        }
+      }
+      if (result.affectedBlocks.length > 0) {
+        console.log(`
+  ${pc20.bold("Affected blocks:")} ${result.affectedBlocks.join(", ")}`);
+      }
+      console.log();
+      break;
+    }
+    case "path": {
+      if (!options.target) {
+        console.error(pc20.red("Error: --target is required for path mode."));
+        process.exit(1);
+      }
+      const result = engine.path(component, options.target);
+      if (format === "json") {
+        console.log(JSON.stringify(result, null, 2));
+        return;
+      }
+      console.log(pc20.bold(`
+Path: ${component} \u2192 ${options.target}
+`));
+      if (!result.found) {
+        console.log(`  ${pc20.red("No path found.")}`);
+      } else {
+        console.log(`  ${result.path.map((n) => pc20.yellow(n)).join(pc20.dim(" \u2192 "))}`);
+        if (result.edges.length > 0) {
+          console.log(`  ${pc20.dim(`(${result.edges.map((e) => e.type).join(" \u2192 ")})`)}`);
+        }
+      }
+      console.log();
+      break;
+    }
+    case "composition": {
+      const tree = engine.composition(component);
+      if (format === "json") {
+        console.log(JSON.stringify(tree, null, 2));
+        return;
+      }
+      console.log(pc20.bold(`
+Composition: ${component}
+`));
+      console.log(`  ${pc20.cyan("Pattern:")}    ${tree.compositionPattern ?? "unknown"}`);
+      if (tree.parent) {
+        console.log(`  ${pc20.cyan("Parent:")}     ${tree.parent}`);
+      }
+      if (tree.subComponents.length > 0) {
+        console.log(`  ${pc20.cyan("Sub-components:")}`);
+        for (const sub of tree.subComponents) {
+          const isRequired = tree.requiredChildren.includes(sub);
+          console.log(`    ${pc20.yellow(sub)}${isRequired ? pc20.red(" (required)") : ""}`);
+        }
+      }
+      if (tree.siblings.length > 0) {
+        console.log(`  ${pc20.cyan("Siblings:")}   ${tree.siblings.join(", ")}`);
+      }
+      if (tree.blocks.length > 0) {
+        console.log(`  ${pc20.cyan("In blocks:")}  ${tree.blocks.join(", ")}`);
+      }
+      console.log();
+      break;
+    }
+    case "alternatives": {
+      const alts = engine.alternatives(component);
+      if (format === "json") {
+        console.log(JSON.stringify({ component, alternatives: alts }, null, 2));
+        return;
+      }
+      console.log(pc20.bold(`
+Alternatives for ${component}
+`));
+      if (alts.length === 0) {
+        console.log("  No known alternatives.");
+      } else {
+        for (const alt of alts) {
+          console.log(`  ${pc20.yellow(alt.component)}${alt.note ? ` \u2014 ${alt.note}` : ""}`);
+        }
+      }
+      console.log();
+      break;
+    }
+    case "islands": {
+      const islands = engine.islands();
+      if (format === "json") {
+        console.log(JSON.stringify({ islands }, null, 2));
+        return;
+      }
+      console.log(pc20.bold(`
+Connected Islands (${islands.length})
+`));
+      for (let i = 0; i < islands.length; i++) {
+        console.log(`  ${pc20.cyan(`Island ${i + 1}`)} (${islands[i].length} components): ${islands[i].join(", ")}`);
+      }
+      console.log();
+      break;
+    }
+    default:
+      console.error(pc20.red(`Unknown mode: "${mode}". Valid: health, dependencies, dependents, impact, path, composition, alternatives, islands`));
+      process.exit(1);
+  }
+  if (format === "dot") {
+    const lines = ["digraph ComponentGraph {", "  rankdir=LR;", "  node [shape=box, style=rounded];"];
+    for (const node of graph2.nodes) {
+      lines.push(`  "${node.name}" [label="${node.name}\\n(${node.category})"];`);
+    }
+    for (const edge of graph2.edges) {
+      const style = edge.type === "alternative-to" ? "dashed" : "solid";
+      lines.push(`  "${edge.source}" -> "${edge.target}" [label="${edge.type}", style=${style}];`);
+    }
+    lines.push("}");
+    console.log(lines.join("\n"));
+  }
+}
+
 // src/bin.ts
 var __dirname = dirname4(fileURLToPath(import.meta.url));
 var pkg = JSON.parse(readFileSync(join10(__dirname, "../package.json"), "utf-8"));
@@ -4956,7 +5192,7 @@ program.command("validate").description("Validate fragment files").option("-c, -
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4976,7 +5212,7 @@ program.command("build").description(`Build compiled ${BRAND.outFile} and ${BRAN
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4995,7 +5231,7 @@ program.command("context").description("Generate AI-ready context for your desig
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -5022,7 +5258,7 @@ program.command("ai").description("Generate context optimized for AI assistants
       }
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -5030,7 +5266,7 @@ program.command("list").description("List all discovered fragment files").option
   try {
     await list(options);
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -5038,7 +5274,7 @@ program.command("reset").description("Reset to initial state (delete all generat
   try {
     await reset(options);
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -5052,7 +5288,7 @@ linkCommand.command("figma").argument("[figma-url]", "Figma file URL to link com
       variants: options.variants
     });
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -5067,7 +5303,7 @@ linkCommand.command("storybook").description("Bootstrap fragments from existing
       exclude: options.exclude
     });
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -5082,9 +5318,9 @@ program.command("dev").description("Start the development server with live compo
       skipBuild: options.skipBuild
     });
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     if (error instanceof Error && error.stack) {
-      console.error(pc20.dim(error.stack));
+      console.error(pc21.dim(error.stack));
     }
     process.exit(1);
   }
@@ -5105,7 +5341,7 @@ program.command("screenshot").description("Capture screenshots of component vari
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -5124,7 +5360,7 @@ program.command("diff").argument("[component]", "Component name to diff (optiona
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -5143,8 +5379,8 @@ program.command("compare").argument("[component]", "Component name to compare").
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
-    console.log(pc20.dim(`
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
+    console.log(pc21.dim(`
 Make sure the dev server is running: ${BRAND.cliCommand} dev`));
     process.exit(1);
   }
@@ -5163,7 +5399,7 @@ program.command("analyze").description("Analyze design system and generate repor
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -5182,7 +5418,7 @@ program.command("verify").argument("[component]", "Component name to verify (opt
     if (options.ci) {
       console.log(JSON.stringify({ error: error instanceof Error ? error.message : "Verification failed" }));
     } else {
-      console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+      console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     }
     process.exit(1);
   }
@@ -5199,7 +5435,7 @@ program.command("audit").description("Scan all fragments and show compliance met
     if (options.json) {
       console.log(JSON.stringify({ error: error instanceof Error ? error.message : "Audit failed" }));
     } else {
-      console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+      console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     }
     process.exit(1);
   }
@@ -5221,7 +5457,7 @@ program.command("a11y").description("Run accessibility checks on all component v
     if (options.json) {
       console.log(JSON.stringify({ error: error instanceof Error ? error.message : "A11y check failed" }));
     } else {
-      console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+      console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     }
     process.exit(1);
   }
@@ -5244,7 +5480,7 @@ program.command("enhance").description("AI-powered documentation generation from
     if (options.format === "json") {
       console.log(JSON.stringify({ success: false, error: error instanceof Error ? error.message : "Enhance failed" }));
     } else {
-      console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+      console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     }
     process.exit(1);
   }
@@ -5265,11 +5501,11 @@ program.command("scan").description(`Zero-config ${BRAND.outFile} generation fro
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
-program.command("storygen").description("Generate Storybook stories from fragment definitions").option("-c, --config <path>", "Path to config file").option("-o, --output <dir>", "Output directory", ".storybook/generated").option("--watch", "Watch for segment changes and regenerate").option("--format <format>", "Story format (csf3)", "csf3").action(async (options) => {
+program.command("storygen").description("Generate Storybook stories from fragment definitions").option("-c, --config <path>", "Path to config file").option("-o, --output <dir>", "Output directory", ".storybook/generated").option("--watch", "Watch for fragment changes and regenerate").option("--format <format>", "Story format (csf3)", "csf3").action(async (options) => {
   try {
     await storygen({
       config: options.config,
@@ -5278,7 +5514,7 @@ program.command("storygen").description("Generate Storybook stories from fragmen
       format: options.format
     });
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -5290,7 +5526,7 @@ program.command("metrics").argument("[component]", "Component name (optional, sh
       json: options.json
     });
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -5304,9 +5540,9 @@ program.command("baseline").description("Manage visual regression baselines").ar
       port: options.port
     });
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     if (action === "update") {
-      console.log(pc20.dim(`
+      console.log(pc21.dim(`
 Make sure the dev server is running: ${BRAND.cliCommand} dev`));
     }
     process.exit(1);
@@ -5314,27 +5550,27 @@ Make sure the dev server is running: ${BRAND.cliCommand} dev`));
 });
 program.command("view").description(`Generate a static HTML viewer for ${BRAND.outFile}`).option("-i, --input <path>", `Path to ${BRAND.outFile}`, BRAND.outFile).option("-o, --output <path>", "Output HTML file path", BRAND.viewerHtmlFile).option("--open", "Open in browser after generation").action(async (options) => {
   try {
-    const { generateViewerFromJson } = await import("./static-viewer-4LQZ5AGA.js");
+    const { generateViewerFromJson } = await import("./static-viewer-Q4F4QP5M.js");
     const fs2 = await import("fs/promises");
     const path = await import("path");
     const inputPath = path.resolve(process.cwd(), options.input);
     const outputPath = path.resolve(process.cwd(), options.output);
-    console.log(pc20.cyan(`
+    console.log(pc21.cyan(`
 ${BRAND.name} Viewer Generator
 `));
     try {
       await fs2.access(inputPath);
     } catch {
-      console.log(pc20.red(`Error: ${options.input} not found.`));
-      console.log(pc20.dim(`
-Run ${pc20.cyan(`${BRAND.cliCommand} build`)} first to generate ${BRAND.outFile}
+      console.log(pc21.red(`Error: ${options.input} not found.`));
+      console.log(pc21.dim(`
+Run ${pc21.cyan(`${BRAND.cliCommand} build`)} first to generate ${BRAND.outFile}
 `));
       process.exit(1);
     }
-    console.log(pc20.dim(`Reading: ${options.input}`));
+    console.log(pc21.dim(`Reading: ${options.input}`));
     const html = await generateViewerFromJson(inputPath);
     await fs2.writeFile(outputPath, html);
-    console.log(pc20.green(`
+    console.log(pc21.green(`
 \u2713 Generated: ${options.output}
 `));
     if (options.open) {
@@ -5343,7 +5579,7 @@ Run ${pc20.cyan(`${BRAND.cliCommand} build`)} first to generate ${BRAND.outFile}
       exec(`${openCmd} "${outputPath}"`);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -5356,33 +5592,33 @@ program.command("add").argument("[name]", 'Component name (e.g., "Button", "Text
       component: options.component
     });
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
 program.command("init").description("Initialize fragments in a project (interactive by default)").option("--force", "Overwrite existing config").option("-y, --yes", "Non-interactive mode - auto-detect and use defaults").action(async (options) => {
   try {
-    const { init } = await import("./init-WKGDPYI4.js");
+    const { init } = await import("./init-EIM5WNMP.js");
     const result = await init({
       projectRoot: process.cwd(),
       force: options.force,
       yes: options.yes
     });
     if (!result.success) {
-      console.error(pc20.red("\nInit failed with errors:"));
+      console.error(pc21.red("\nInit failed with errors:"));
       for (const error of result.errors) {
-        console.error(pc20.red(`  - ${error}`));
+        console.error(pc21.red(`  - ${error}`));
       }
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
 program.command("tokens").description("Discover and list design tokens from CSS/SCSS files").option("-c, --config <path>", "Path to config file").option("--json", "Output as JSON").option("--categories", "Group tokens by category").option("--theme <theme>", "Filter by theme name").option("--category <category>", "Filter by category (color, spacing, typography, etc.)").option("--verbose", "Show all tokens (no truncation)").action(async (options) => {
   try {
-    const { tokens } = await import("./tokens-JAJABYXP.js");
+    const { tokens } = await import("./tokens-P2B7ZAM3.js");
     const result = await tokens({
       config: options.config,
       json: options.json,
@@ -5395,13 +5631,13 @@ program.command("tokens").description("Discover and list design tokens from CSS/
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
 program.command("generate").description("Generate fragment files from component source code").argument("[component]", "Specific component name to generate (optional)").option("--force", "Overwrite existing fragment files").option("--pattern <glob>", "Pattern for component files", "src/components/**/*.tsx").action(async (component, options) => {
   try {
-    const { generate } = await import("./generate-7AF7WRVK.js");
+    const { generate } = await import("./generate-54GJAWUY.js");
     const result = await generate({
       projectRoot: process.cwd(),
       component,
@@ -5409,18 +5645,26 @@ program.command("generate").description("Generate fragment files from component
       componentPattern: options.pattern
     });
     if (!result.success) {
-      console.error(pc20.red("\nGenerate completed with errors"));
+      console.error(pc21.red("\nGenerate completed with errors"));
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+});
+program.command("graph").description("Query the component relationship graph").argument("[component]", "Component name (optional)").option("-c, --config <path>", "Path to config file").option("-m, --mode <mode>", "Query mode: health, dependencies, dependents, impact, path, composition, alternatives, islands").option("-t, --target <component>", "Target component for path mode").option("--edge-types <types>", "Comma-separated edge types to filter by").option("--depth <number>", "Max traversal depth for impact mode", parseInt).option("--format <format>", "Output format: table, json, dot", "table").action(async (component, options) => {
+  try {
+    await graph(component, options);
+  } catch (error) {
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
 program.command("test").description("Run interaction tests for fragments with play functions").option("-c, --config <path>", "Path to config file").option("--component <name>", "Filter by component name").option("--tags <tags>", "Filter by tags (comma-separated)").option("--grep <pattern>", "Filter by variant name pattern").option("--exclude <pattern>", "Exclude tests matching pattern").option("--parallel <count>", "Number of parallel browser contexts", parseInt, 4).option("--timeout <ms>", "Timeout per test in milliseconds", parseInt, 3e4).option("--retries <count>", "Number of retries for failed tests", parseInt, 0).option("--bail", "Stop on first failure").option("--browser <name>", "Browser to use (chromium, firefox, webkit)", "chromium").option("--headed", "Run in headed mode (show browser)").option("--a11y", "Run accessibility checks with axe-core").option("--visual", "Capture screenshots for visual regression").option("--update-snapshots", "Update visual snapshots").option("--watch", "Watch mode - re-run on file changes").option("--reporters <names>", "Reporters to use (console, junit, json)", "console").option("-o, --output <dir>", "Output directory for results", "./test-results").option("--server-url <url>", "URL of running dev server (skips starting server)").option("-p, --port <port>", "Port for dev server", parseInt, 6006).option("--ci", "CI mode - non-interactive, exit with code 1 on failure").option("--list", "List available tests without running them").action(async (options) => {
   try {
     const { config, configDir } = await loadConfig(options.config);
-    const { runTestCommand, listTests } = await import("./test-CJDNJTPZ.js");
+    const { runTestCommand, listTests } = await import("./test-6VN2DA3S.js");
     if (options.list) {
       await listTests(config, configDir, {
         component: options.component,
@@ -5453,7 +5697,7 @@ program.command("test").description("Run interaction tests for fragments with pl
     });
     process.exit(exitCode);
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });