@fragments-sdk/cli 0.7.0 → 0.7.2

package/src/core/graph-extractor.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import type { CompiledSegment, CompiledBlock } from './types.js';
+import type { CompiledFragment, CompiledBlock } from './types.js';
 import {
   buildComponentGraph,
   extractJsxUsageEdges,
@@ -16,7 +16,7 @@ import { EDGE_TYPE_WEIGHTS } from '@fragments-sdk/context/graph';
 // Test helpers
 // ---------------------------------------------------------------------------
 
-function makeSegment(name: string, overrides: Partial<CompiledSegment> = {}): CompiledSegment {
+function makeFragment(name: string, overrides: Partial<CompiledFragment> = {}): CompiledFragment {
   return {
     filePath: `src/components/${name}/${name}.fragment.tsx`,
     meta: {
@@ -58,8 +58,8 @@ function makeBlock(name: string, components: string[], category = 'test'): Compi
 
 describe('extractJsxUsageEdges()', () => {
   it('detects JSX component usage in variant code', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Dialog: makeSegment('Dialog', {
+    const fragments: Record<string, CompiledFragment> = {
+      Dialog: makeFragment('Dialog', {
         variants: [
           {
             name: 'Default',
@@ -68,10 +68,10 @@ describe('extractJsxUsageEdges()', () => {
           },
         ],
       }),
-      Button: makeSegment('Button'),
+      Button: makeFragment('Button'),
     };
 
-    const edges = extractJsxUsageEdges(segments, new Set(['Dialog', 'Button']));
+    const edges = extractJsxUsageEdges(fragments, new Set(['Dialog', 'Button']));
     expect(edges.length).toBe(1);
     expect(edges[0].source).toBe('Dialog');
     expect(edges[0].target).toBe('Button');
@@ -79,8 +79,8 @@ describe('extractJsxUsageEdges()', () => {
   });
 
   it('handles compound component notation (Header.Nav)', () => {
-    const segments: Record<string, CompiledSegment> = {
-      AppShell: makeSegment('AppShell', {
+    const fragments: Record<string, CompiledFragment> = {
+      AppShell: makeFragment('AppShell', {
         variants: [
           {
             name: 'Default',
@@ -89,12 +89,12 @@ describe('extractJsxUsageEdges()', () => {
           },
         ],
       }),
-      Header: makeSegment('Header'),
-      Sidebar: makeSegment('Sidebar'),
+      Header: makeFragment('Header'),
+      Sidebar: makeFragment('Sidebar'),
     };
 
     const edges = extractJsxUsageEdges(
-      segments,
+      fragments,
       new Set(['AppShell', 'Header', 'Sidebar']),
     );
     expect(edges.length).toBe(2);
@@ -103,8 +103,8 @@ describe('extractJsxUsageEdges()', () => {
   });
 
   it('does not create self-referencing edges', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Button: makeSegment('Button', {
+    const fragments: Record<string, CompiledFragment> = {
+      Button: makeFragment('Button', {
         variants: [
           {
             name: 'Default',
@@ -115,49 +115,49 @@ describe('extractJsxUsageEdges()', () => {
       }),
     };
 
-    const edges = extractJsxUsageEdges(segments, new Set(['Button']));
+    const edges = extractJsxUsageEdges(fragments, new Set(['Button']));
     expect(edges.length).toBe(0);
   });
 
   it('deduplicates across variants', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Dialog: makeSegment('Dialog', {
+    const fragments: Record<string, CompiledFragment> = {
+      Dialog: makeFragment('Dialog', {
         variants: [
           { name: 'V1', description: 'V1', code: '<Dialog><Button>OK</Button></Dialog>' },
           { name: 'V2', description: 'V2', code: '<Dialog><Button>Cancel</Button></Dialog>' },
         ],
       }),
-      Button: makeSegment('Button'),
+      Button: makeFragment('Button'),
     };
 
-    const edges = extractJsxUsageEdges(segments, new Set(['Dialog', 'Button']));
+    const edges = extractJsxUsageEdges(fragments, new Set(['Dialog', 'Button']));
     // Should only create one edge even though Button appears in two variants
     expect(edges.length).toBe(1);
   });
 
   it('skips variants without code', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Dialog: makeSegment('Dialog', {
+    const fragments: Record<string, CompiledFragment> = {
+      Dialog: makeFragment('Dialog', {
         variants: [
           { name: 'NoCode', description: 'No code variant' },
         ],
       }),
     };
 
-    const edges = extractJsxUsageEdges(segments, new Set(['Dialog']));
+    const edges = extractJsxUsageEdges(fragments, new Set(['Dialog']));
     expect(edges.length).toBe(0);
   });
 
   it('ignores unknown component tags', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Dialog: makeSegment('Dialog', {
+    const fragments: Record<string, CompiledFragment> = {
+      Dialog: makeFragment('Dialog', {
         variants: [
           { name: 'Default', description: 'Default', code: '<Dialog><UnknownThing /></Dialog>' },
         ],
       }),
     };
 
-    const edges = extractJsxUsageEdges(segments, new Set(['Dialog']));
+    const edges = extractJsxUsageEdges(fragments, new Set(['Dialog']));
     expect(edges.length).toBe(0);
   });
 });
@@ -215,15 +215,15 @@ describe('extractBlockEdges()', () => {
 
 describe('extractRelationEdges()', () => {
   it('maps parent relation correctly', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Button: makeSegment('Button', {
+    const fragments: Record<string, CompiledFragment> = {
+      Button: makeFragment('Button', {
         relations: [
           { component: 'Header', relationship: 'parent', note: 'Used in Header actions' },
         ],
       }),
     };
 
-    const edges = extractRelationEdges(segments);
+    const edges = extractRelationEdges(fragments);
     expect(edges.length).toBe(1);
     // parent relation: Header is parent of Button → source=Header, target=Button
     expect(edges[0].source).toBe('Header');
@@ -232,15 +232,15 @@ describe('extractRelationEdges()', () => {
   });
 
   it('maps child relation correctly', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Header: makeSegment('Header', {
+    const fragments: Record<string, CompiledFragment> = {
+      Header: makeFragment('Header', {
         relations: [
           { component: 'Button', relationship: 'child', note: 'Renders action buttons' },
         ],
       }),
     };
 
-    const edges = extractRelationEdges(segments);
+    const edges = extractRelationEdges(fragments);
     expect(edges.length).toBe(1);
     expect(edges[0].source).toBe('Header');
     expect(edges[0].target).toBe('Button');
@@ -248,64 +248,64 @@ describe('extractRelationEdges()', () => {
   });
 
   it('maps alternative relation', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Dialog: makeSegment('Dialog', {
+    const fragments: Record<string, CompiledFragment> = {
+      Dialog: makeFragment('Dialog', {
         relations: [
           { component: 'Popover', relationship: 'alternative', note: 'For non-modal overlays' },
         ],
       }),
     };
 
-    const edges = extractRelationEdges(segments);
+    const edges = extractRelationEdges(fragments);
     expect(edges[0].type).toBe('alternative-to');
     expect(edges[0].note).toBe('For non-modal overlays');
   });
 
   it('maps sibling relation', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Header: makeSegment('Header', {
+    const fragments: Record<string, CompiledFragment> = {
+      Header: makeFragment('Header', {
         relations: [
           { component: 'Sidebar', relationship: 'sibling', note: 'Both in AppShell' },
         ],
       }),
     };
 
-    const edges = extractRelationEdges(segments);
+    const edges = extractRelationEdges(fragments);
     expect(edges[0].type).toBe('sibling-of');
   });
 
   it('maps composition relation', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Input: makeSegment('Input', {
+    const fragments: Record<string, CompiledFragment> = {
+      Input: makeFragment('Input', {
         relations: [
           { component: 'Button', relationship: 'composition', note: 'Often paired in forms' },
         ],
       }),
     };
 
-    const edges = extractRelationEdges(segments);
+    const edges = extractRelationEdges(fragments);
     expect(edges[0].type).toBe('composes');
   });
 
-  it('skips segments without relations', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Button: makeSegment('Button'),
+  it('skips fragments without relations', () => {
+    const fragments: Record<string, CompiledFragment> = {
+      Button: makeFragment('Button'),
     };
 
-    const edges = extractRelationEdges(segments);
+    const edges = extractRelationEdges(fragments);
     expect(edges.length).toBe(0);
   });
 
   it('skips unknown relationship types', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Button: makeSegment('Button', {
+    const fragments: Record<string, CompiledFragment> = {
+      Button: makeFragment('Button', {
         relations: [
           { component: 'Icon', relationship: 'unknown-type' as any, note: 'Custom relation' },
         ],
       }),
     };
 
-    const edges = extractRelationEdges(segments);
+    const edges = extractRelationEdges(fragments);
     expect(edges.length).toBe(0);
   });
 });
@@ -316,8 +316,8 @@ describe('extractRelationEdges()', () => {
 
 describe('inferRequiredChildren()', () => {
   it('identifies sub-components present in ALL variants', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Dialog: makeSegment('Dialog', {
+    const fragments: Record<string, CompiledFragment> = {
+      Dialog: makeFragment('Dialog', {
         variants: [
           { name: 'V1', description: 'V1', code: '<Dialog><Dialog.Content>...</Dialog.Content><Dialog.Footer>...</Dialog.Footer></Dialog>' },
           { name: 'V2', description: 'V2', code: '<Dialog><Dialog.Content>...</Dialog.Content></Dialog>' },
@@ -326,26 +326,26 @@ describe('inferRequiredChildren()', () => {
     };
 
     const autoDetected = new Map([['Dialog', { subComponents: ['Content', 'Footer'] }]]);
-    const result = inferRequiredChildren(segments, autoDetected);
+    const result = inferRequiredChildren(fragments, autoDetected);
 
     expect(result.get('Dialog')).toEqual(['Content']);
   });
 
   it('returns empty for components with no subs', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Button: makeSegment('Button', {
+    const fragments: Record<string, CompiledFragment> = {
+      Button: makeFragment('Button', {
         variants: [{ name: 'Default', description: 'Default', code: '<Button>Click</Button>' }],
       }),
     };
 
     const autoDetected = new Map<string, any>();
-    const result = inferRequiredChildren(segments, autoDetected);
+    const result = inferRequiredChildren(fragments, autoDetected);
     expect(result.size).toBe(0);
   });
 
   it('uses ai.subComponents when autoDetected is empty', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Dialog: makeSegment('Dialog', {
+    const fragments: Record<string, CompiledFragment> = {
+      Dialog: makeFragment('Dialog', {
         ai: { subComponents: ['Content', 'Footer'] },
         variants: [
           { name: 'V1', description: 'V1', code: '<Dialog><Dialog.Content>...</Dialog.Content><Dialog.Footer>...</Dialog.Footer></Dialog>' },
@@ -355,7 +355,7 @@ describe('inferRequiredChildren()', () => {
     };
 
     const autoDetected = new Map<string, any>();
-    const result = inferRequiredChildren(segments, autoDetected);
+    const result = inferRequiredChildren(fragments, autoDetected);
     expect(result.get('Dialog')).toEqual(['Content', 'Footer']);
   });
 });
@@ -366,8 +366,8 @@ describe('inferRequiredChildren()', () => {
 
 describe('generateCommonPatterns()', () => {
   it('generates skeleton patterns from variant code', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Dialog: makeSegment('Dialog', {
+    const fragments: Record<string, CompiledFragment> = {
+      Dialog: makeFragment('Dialog', {
         variants: [
           {
             name: 'Default',
@@ -379,7 +379,7 @@ describe('generateCommonPatterns()', () => {
     };
 
     const autoDetected = new Map([['Dialog', { subComponents: ['Content', 'Footer'] }]]);
-    const result = generateCommonPatterns(segments, autoDetected);
+    const result = generateCommonPatterns(fragments, autoDetected);
 
     expect(result.has('Dialog')).toBe(true);
     const patterns = result.get('Dialog')!;
@@ -389,12 +389,12 @@ describe('generateCommonPatterns()', () => {
   });
 
   it('returns empty for components without sub-components', () => {
-    const segments: Record<string, CompiledSegment> = {
-      Button: makeSegment('Button'),
+    const fragments: Record<string, CompiledFragment> = {
+      Button: makeFragment('Button'),
     };
 
     const autoDetected = new Map<string, any>();
-    const result = generateCommonPatterns(segments, autoDetected);
+    const result = generateCommonPatterns(fragments, autoDetected);
     expect(result.size).toBe(0);
   });
 });
@@ -445,10 +445,10 @@ describe('mergeAndDeduplicate()', () => {
 // ---------------------------------------------------------------------------
 
 describe('buildComponentGraph()', () => {
-  it('builds a graph from segments and blocks', async () => {
-    const segments: Record<string, CompiledSegment> = {
-      Button: makeSegment('Button'),
-      Dialog: makeSegment('Dialog', {
+  it('builds a graph from fragments and blocks', async () => {
+    const fragments: Record<string, CompiledFragment> = {
+      Button: makeFragment('Button'),
+      Dialog: makeFragment('Dialog', {
         variants: [
           { name: 'Default', description: 'Default', code: '<Dialog><Button>OK</Button></Dialog>' },
         ],
@@ -456,15 +456,15 @@ describe('buildComponentGraph()', () => {
           { component: 'Popover', relationship: 'alternative', note: 'Non-modal' },
         ],
       }),
-      Input: makeSegment('Input'),
-      Popover: makeSegment('Popover'),
+      Input: makeFragment('Input'),
+      Popover: makeFragment('Popover'),
     };
 
     const blocks: Record<string, CompiledBlock> = {
       LoginForm: makeBlock('LoginForm', ['Dialog', 'Input', 'Button']),
     };
 
-    const result = await buildComponentGraph(segments, blocks, '/tmp/fake', {
+    const result = await buildComponentGraph(fragments, blocks, '/tmp/fake', {
       skipSourceAnalysis: true,
     });
 
@@ -487,8 +487,8 @@ describe('buildComponentGraph()', () => {
   });
 
   it('auto-detects metadata and reports warnings', async () => {
-    const segments: Record<string, CompiledSegment> = {
-      Dialog: makeSegment('Dialog', {
+    const fragments: Record<string, CompiledFragment> = {
+      Dialog: makeFragment('Dialog', {
         ai: {
           compositionPattern: 'compound',
           subComponents: ['Content'],
@@ -500,7 +500,7 @@ describe('buildComponentGraph()', () => {
       }),
     };
 
-    const result = await buildComponentGraph(segments, {}, '/tmp/fake', {
+    const result = await buildComponentGraph(fragments, {}, '/tmp/fake', {
       skipSourceAnalysis: true,
     });
 
@@ -508,7 +508,7 @@ describe('buildComponentGraph()', () => {
     expect(result.graph.nodes.length).toBe(1);
   });
 
-  it('handles empty segments', async () => {
+  it('handles empty fragments', async () => {
     const result = await buildComponentGraph({}, {}, '/tmp/fake', {
       skipSourceAnalysis: true,
     });
@@ -519,17 +519,17 @@ describe('buildComponentGraph()', () => {
   });
 
   it('computes health metrics', async () => {
-    const segments: Record<string, CompiledSegment> = {
-      Button: makeSegment('Button'),
-      Input: makeSegment('Input'),
-      Orphan: makeSegment('Orphan'),
+    const fragments: Record<string, CompiledFragment> = {
+      Button: makeFragment('Button'),
+      Input: makeFragment('Input'),
+      Orphan: makeFragment('Orphan'),
     };
 
     const blocks: Record<string, CompiledBlock> = {
       Form: makeBlock('Form', ['Button', 'Input']),
     };
 
-    const result = await buildComponentGraph(segments, blocks, '/tmp/fake', {
+    const result = await buildComponentGraph(fragments, blocks, '/tmp/fake', {
       skipSourceAnalysis: true,
     });
 

package/src/core/graph-extractor.ts

@@ -24,7 +24,7 @@ import type {
   GraphHealth,
 } from '@fragments-sdk/context/graph';
 import { EDGE_TYPE_WEIGHTS, computeHealthFromData } from '@fragments-sdk/context/graph';
-import type { CompiledSegment, CompiledBlock } from './types.js';
+import type { CompiledFragment, CompiledBlock } from './types.js';
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -51,15 +51,15 @@ export interface AutoDetectedMetadata {
 }
 
 /**
- * Build the full ComponentGraph from segments, blocks, and source code.
+ * Build the full ComponentGraph from fragments, blocks, and source code.
  */
 export async function buildComponentGraph(
-  segments: Record<string, CompiledSegment>,
+  fragments: Record<string, CompiledFragment>,
   blocks: Record<string, CompiledBlock>,
   componentDir: string,
   options?: GraphBuildOptions,
 ): Promise<GraphBuildResult> {
-  const knownComponents = new Set(Object.keys(segments));
+  const knownComponents = new Set(Object.keys(fragments));
   const allEdges: GraphEdge[] = [];
   const autoDetected = new Map<string, AutoDetectedMetadata>();
   const warnings: string[] = [];
@@ -80,7 +80,7 @@ export async function buildComponentGraph(
   }
 
   // 2. Extract JSX usage from variant code
-  const jsxEdges = extractJsxUsageEdges(segments, knownComponents);
+  const jsxEdges = extractJsxUsageEdges(fragments, knownComponents);
   allEdges.push(...jsxEdges);
 
   // 3. Extract block co-occurrence edges
@@ -88,18 +88,18 @@ export async function buildComponentGraph(
   allEdges.push(...blockEdges);
 
   // 4. Extract relation edges from fragment metadata
-  const relationEdges = extractRelationEdges(segments);
+  const relationEdges = extractRelationEdges(fragments);
   allEdges.push(...relationEdges);
 
   // 5. Infer requiredChildren
-  const requiredChildrenMap = inferRequiredChildren(segments, autoDetected);
+  const requiredChildrenMap = inferRequiredChildren(fragments, autoDetected);
   for (const [name, children] of requiredChildrenMap) {
     const existing = autoDetected.get(name) ?? {};
     autoDetected.set(name, { ...existing, requiredChildren: children });
   }
 
   // 6. Generate common patterns
-  const patternsMap = generateCommonPatterns(segments, autoDetected);
+  const patternsMap = generateCommonPatterns(fragments, autoDetected);
   for (const [name, patterns] of patternsMap) {
     const existing = autoDetected.get(name) ?? {};
     autoDetected.set(name, { ...existing, commonPatterns: patterns });
@@ -109,14 +109,14 @@ export async function buildComponentGraph(
   const mergedEdges = mergeAndDeduplicate(allEdges);
 
   // 8. Build nodes
-  const nodes: ComponentNode[] = Object.entries(segments).map(([name, segment]) => {
+  const nodes: ComponentNode[] = Object.entries(fragments).map(([name, fragment]) => {
     const detected = autoDetected.get(name);
     return {
       name,
-      category: segment.meta.category,
-      status: segment.meta.status ?? 'stable',
-      compositionPattern: segment.ai?.compositionPattern ?? detected?.compositionPattern,
-      subComponents: segment.ai?.subComponents ?? detected?.subComponents,
+      category: fragment.meta.category,
+      status: fragment.meta.status ?? 'stable',
+      compositionPattern: fragment.ai?.compositionPattern ?? detected?.compositionPattern,
+      subComponents: fragment.ai?.subComponents ?? detected?.subComponents,
     };
   });
 
@@ -134,16 +134,16 @@ export async function buildComponentGraph(
   const health = computeHealthFromData(nodes, mergedEdges, blockIndex);
 
   // 11. Generate drift warnings
-  for (const [name, segment] of Object.entries(segments)) {
+  for (const [name, fragment] of Object.entries(fragments)) {
     const detected = autoDetected.get(name);
     if (!detected) continue;
 
     // Sub-components drift
-    if (segment.ai?.subComponents && detected.subComponents) {
-      const declared = new Set(segment.ai.subComponents);
+    if (fragment.ai?.subComponents && detected.subComponents) {
+      const declared = new Set(fragment.ai.subComponents);
       const found = new Set(detected.subComponents);
       const missing = detected.subComponents.filter(s => !declared.has(s));
-      const extra = segment.ai.subComponents.filter(s => !found.has(s));
+      const extra = fragment.ai.subComponents.filter(s => !found.has(s));
 
       if (missing.length > 0) {
         warnings.push(
@@ -339,16 +339,16 @@ export function extractSubComponents(
  * Scan variant code strings for JSX element names → renders edges.
  */
 export function extractJsxUsageEdges(
-  segments: Record<string, CompiledSegment>,
+  fragments: Record<string, CompiledFragment>,
   knownComponents: Set<string>,
 ): GraphEdge[] {
   const edges: GraphEdge[] = [];
   const jsxTagRegex = /<([A-Z][a-zA-Z]*(?:\.[A-Z][a-zA-Z]*)?)/g;
 
-  for (const [name, segment] of Object.entries(segments)) {
+  for (const [name, fragment] of Object.entries(fragments)) {
     const usedComponents = new Set<string>();
 
-    for (const variant of segment.variants) {
+    for (const variant of fragment.variants) {
       if (!variant.code) continue;
 
       let match: RegExpExecArray | null;
@@ -410,7 +410,7 @@ export function extractBlockEdges(
  * Map fragment ComponentRelation[] to typed graph edges.
  */
 export function extractRelationEdges(
-  segments: Record<string, CompiledSegment>,
+  fragments: Record<string, CompiledFragment>,
 ): GraphEdge[] {
   const edges: GraphEdge[] = [];
 
@@ -422,10 +422,10 @@ export function extractRelationEdges(
     sibling: 'sibling-of',
   };
 
-  for (const [name, segment] of Object.entries(segments)) {
-    if (!segment.relations) continue;
+  for (const [name, fragment] of Object.entries(fragments)) {
+    if (!fragment.relations) continue;
 
-    for (const rel of segment.relations) {
+    for (const rel of fragment.relations) {
       const edgeType = relationToEdgeType[rel.relationship];
       if (!edgeType) continue;
 
@@ -460,17 +460,17 @@ export function extractRelationEdges(
  * Infer requiredChildren: sub-components that appear in ALL variant code strings.
  */
 export function inferRequiredChildren(
-  segments: Record<string, CompiledSegment>,
+  fragments: Record<string, CompiledFragment>,
   autoDetected: Map<string, AutoDetectedMetadata>,
 ): Map<string, string[]> {
   const result = new Map<string, string[]>();
 
-  for (const [name, segment] of Object.entries(segments)) {
+  for (const [name, fragment] of Object.entries(fragments)) {
     const detected = autoDetected.get(name);
-    const subs = detected?.subComponents ?? segment.ai?.subComponents;
+    const subs = detected?.subComponents ?? fragment.ai?.subComponents;
     if (!subs || subs.length === 0) continue;
 
-    const variantsWithCode = segment.variants.filter(v => v.code);
+    const variantsWithCode = fragment.variants.filter(v => v.code);
     if (variantsWithCode.length === 0) continue;
 
     const required: string[] = [];
@@ -499,18 +499,18 @@ export function inferRequiredChildren(
  * Generate simplified JSX skeleton patterns from variant code.
  */
 export function generateCommonPatterns(
-  segments: Record<string, CompiledSegment>,
+  fragments: Record<string, CompiledFragment>,
   autoDetected: Map<string, AutoDetectedMetadata>,
 ): Map<string, string[]> {
   const result = new Map<string, string[]>();
 
-  for (const [name, segment] of Object.entries(segments)) {
+  for (const [name, fragment] of Object.entries(fragments)) {
     const detected = autoDetected.get(name);
-    const subs = detected?.subComponents ?? segment.ai?.subComponents;
+    const subs = detected?.subComponents ?? fragment.ai?.subComponents;
     if (!subs || subs.length === 0) continue;
 
     // Build a simplified pattern from the first variant that has code
-    const firstVariant = segment.variants.find(v => v.code);
+    const firstVariant = fragment.variants.find(v => v.code);
     if (!firstVariant?.code) continue;
 
     // Extract used sub-components from the code

package/src/core/importAnalyzer.ts

@@ -50,7 +50,7 @@ function extractComponentNameFromPath(filePath: string): string {
   return fileName
     .replace(/\.(tsx?|jsx?)$/, '')
     .replace(/\.stories$/, '')
-    .replace(/\.segment$/, '')
+    .replace(/\.fragment$/, '')
     .replace(/\.fragment$/, '');
 }