@fragments-sdk/cli 0.7.0 → 0.7.1

package/src/viewer/components/ComponentGraph.tsx

@@ -9,16 +9,16 @@
  */
 
 import { useMemo, useState } from "react";
-import type { SegmentDefinition, ComponentRelation, RelationshipType } from "../../core/index.js";
+import type { FragmentDefinition, ComponentRelation, RelationshipType } from "../../core/index.js";
 import { ChevronRightIcon, EmptyIcon, WandIcon } from "./Icons.js";
 import { detectAllRelationships, mergeRelationships } from "../utils/detectRelationships.js";
 import { Stack, Text, Badge, Button, EmptyState, CodeBlock, Grid, Separator } from "@fragments/ui";
 
 interface ComponentGraphProps {
-  /** Current segment definition */
-  segment: SegmentDefinition | null;
-  /** All available segments for navigation */
-  allSegments: Array<{ path: string; segment: SegmentDefinition }>;
+  /** Current fragment definition */
+  fragment: FragmentDefinition | null;
+  /** All available fragments for navigation */
+  allFragments: Array<{ path: string; fragment: FragmentDefinition }>;
   /** Callback when a component is clicked */
   onNavigate?: (componentName: string) => void;
 }
@@ -68,24 +68,24 @@ const RELATIONSHIP_CONFIG: Record<RelationshipType, { label: string; color: stri
   },
 };
 
-export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGraphProps) {
+export function ComponentGraph({ fragment, allFragments, onNavigate }: ComponentGraphProps) {
   const [showAutoDetected, setShowAutoDetected] = useState(true);
 
   // Auto-detect relationships
   const detectedRelationships = useMemo(() => {
-    if (!segment) return [];
+    if (!fragment) return [];
     try {
-      return detectAllRelationships(segment, allSegments);
+      return detectAllRelationships(fragment, allFragments);
     } catch {
       return [];
     }
-  }, [segment, allSegments]);
+  }, [fragment, allFragments]);
 
   // Merge manual and detected relationships
   const allRelationships = useMemo(() => {
-    if (!segment) return [];
-    return mergeRelationships(segment.relations, showAutoDetected ? detectedRelationships : []);
-  }, [segment, detectedRelationships, showAutoDetected]);
+    if (!fragment) return [];
+    return mergeRelationships(fragment.relations, showAutoDetected ? detectedRelationships : []);
+  }, [fragment, detectedRelationships, showAutoDetected]);
 
   // Group relations by type
   const groupedRelations = useMemo(() => {
@@ -110,22 +110,22 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
 
   // Find reverse relations (components that reference this one)
   const reverseRelations = useMemo(() => {
-    if (!segment) return [];
+    if (!fragment) return [];
 
-    const componentName = segment.meta.name;
-    const reverse: Array<{ segment: SegmentDefinition; relation: ComponentRelation }> = [];
+    const componentName = fragment.meta.name;
+    const reverse: Array<{ fragment: FragmentDefinition; relation: ComponentRelation }> = [];
 
-    for (const { segment: otherSegment } of allSegments) {
-      if (otherSegment.meta.name === componentName) continue;
-      if (!otherSegment.relations) continue;
+    for (const { fragment: otherFragment } of allFragments) {
+      if (otherFragment.meta.name === componentName) continue;
+      if (!otherFragment.relations) continue;
 
-      for (const relation of otherSegment.relations) {
+      for (const relation of otherFragment.relations) {
         if (relation.component === componentName) {
           reverse.push({
-            segment: otherSegment,
+            fragment: otherFragment,
             relation: {
               ...relation,
-              component: otherSegment.meta.name,
+              component: otherFragment.meta.name,
               // Flip the relationship direction for display
               relationship: flipRelationship(relation.relationship),
             },
@@ -135,11 +135,11 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
     }
 
     return reverse;
-  }, [segment, allSegments]);
+  }, [fragment, allFragments]);
 
-  // Check if a component exists in our segments
+  // Check if a component exists in our fragments
   const componentExists = (name: string) => {
-    return allSegments.some(s => s.segment.meta.name === name);
+    return allFragments.some(s => s.fragment.meta.name === name);
   };
 
   const handleNavigate = (componentName: string) => {
@@ -148,8 +148,8 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
     }
   };
 
-  // No segment selected
-  if (!segment) {
+  // No fragment selected
+  if (!fragment) {
     return (
       <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
         <div style={{ padding: '16px', borderBottom: '1px solid var(--border)' }}>
@@ -184,7 +184,7 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
             </EmptyState.Icon>
             <EmptyState.Title>No relationships defined</EmptyState.Title>
             <EmptyState.Description>
-              This component doesn't have any defined relationships. Add a <code style={{ padding: '2px 4px', background: 'var(--bg-secondary)', borderRadius: '4px', fontSize: '12px' }}>relations</code> array to your segment definition to visualize component connections.
+              This component doesn't have any defined relationships. Add a <code style={{ padding: '2px 4px', background: 'var(--bg-secondary)', borderRadius: '4px', fontSize: '12px' }}>relations</code> array to your fragment definition to visualize component connections.
             </EmptyState.Description>
             <div style={{ marginTop: '16px', width: '100%' }}>
               <CodeBlock language="typescript">{`relations: [
@@ -220,7 +220,7 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
           )}
         </Stack>
         <Text size="xs" color="secondary" style={{ marginTop: '4px' }}>
-          Relationships for <Text as="span" weight="medium" size="xs">{segment.meta.name}</Text>
+          Relationships for <Text as="span" weight="medium" size="xs">{fragment.meta.name}</Text>
           {showAutoDetected && detectedCount > 0 && (
             <span style={{ marginLeft: '4px' }}>
               ({detectedCount} from variants)

package/src/viewer/components/ComponentHeader.tsx

@@ -1,9 +1,9 @@
-import type { SegmentMeta } from '../../core/index.js';
+import type { FragmentMeta } from '../../core/index.js';
 import { Badge, Alert, Text, Stack, Separator } from '@fragments/ui';
 import { WarningIcon, BeakerIcon } from './Icons.js';
 
 interface ComponentHeaderProps {
-  meta: SegmentMeta;
+  meta: FragmentMeta;
 }
 
 // Map status to Badge variant

package/src/viewer/components/ContractPanel.tsx

@@ -1,14 +1,14 @@
 /**
- * ContractPanel component - displays SegmentContract metadata for AI agents.
+ * ContractPanel component - displays FragmentContract metadata for AI agents.
  * Shows propsSummary, scenarioTags, bans, and a11yRules.
  */
 
 import { memo } from 'react';
-import type { SegmentContract } from '../../core/index.js';
+import type { FragmentContract } from '../../core/index.js';
 import { Stack, Text, Card, Chip, Alert, EmptyState, CodeBlock, Badge } from '@fragments/ui';
 
 interface ContractPanelProps {
-  contract?: SegmentContract;
+  contract?: FragmentContract;
   componentName: string;
 }
 
@@ -37,7 +37,7 @@ export const ContractPanel = memo(function ContractPanel({
         </EmptyState.Icon>
         <EmptyState.Title>No contract metadata</EmptyState.Title>
         <EmptyState.Description>
-          Add a <code style={{ background: 'var(--bg-hover)', padding: '2px 4px', borderRadius: '4px' }}>contract</code> field to the segment definition to enable AI agent features.
+          Add a <code style={{ background: 'var(--bg-hover)', padding: '2px 4px', borderRadius: '4px' }}>contract</code> field to the fragment definition to enable AI agent features.
         </EmptyState.Description>
         <EmptyState.Actions>
           <CodeBlock
@@ -186,7 +186,7 @@ function Section({ title, subtitle, children }: SectionProps) {
 }
 
 // Check if contract is empty or has no meaningful content
-function isContractEmpty(contract: SegmentContract): boolean {
+function isContractEmpty(contract: FragmentContract): boolean {
   return (
     (!contract.propsSummary || contract.propsSummary.length === 0) &&
     (!contract.scenarioTags || contract.scenarioTags.length === 0) &&
@@ -196,7 +196,7 @@ function isContractEmpty(contract: SegmentContract): boolean {
 }
 
 // Check if contract has some but not all fields
-function isPartialContract(contract: SegmentContract): boolean {
+function isPartialContract(contract: FragmentContract): boolean {
   const fieldCount = [
     contract.propsSummary?.length ?? 0,
     contract.scenarioTags?.length ?? 0,

package/src/viewer/components/FigmaEmbed.tsx

@@ -40,7 +40,7 @@ function parseFigmaUrl(figmaUrl: string): ParsedFigmaUrl | null {
  * Build a Figma embed URL.
  */
 function buildEmbedUrl(fileKey: string, nodeId?: string): string {
-  let embedUrl = `https://embed.figma.com/design/${fileKey}?embed-host=segments`;
+  let embedUrl = `https://embed.figma.com/design/${fileKey}?embed-host=fragments`;
 
   if (nodeId) {
     const embedNodeId = nodeId.replace(/:/g, "-");
@@ -205,25 +205,25 @@ export function FigmaEmbed({ figmaUrl, allFigmaUrls, zoom = 100, className, styl
 }
 
 /**
- * Hook to collect all Figma URLs from a segment's variants.
+ * Hook to collect all Figma URLs from a fragment's variants.
  * This enables the FigmaEmbed to preload all variant iframes.
  */
 export function useAllFigmaUrls(
-  segment: { meta: { figma?: string }; variants?: Array<{ figma?: string }> } | undefined
+  fragment: { meta: { figma?: string }; variants?: Array<{ figma?: string }> } | undefined
 ): string[] {
   return useMemo(() => {
-    if (!segment) return [];
+    if (!fragment) return [];
 
     const urls: string[] = [];
 
     // Add meta-level Figma URL
-    if (segment.meta.figma) {
-      urls.push(segment.meta.figma);
+    if (fragment.meta.figma) {
+      urls.push(fragment.meta.figma);
     }
 
     // Add variant-level Figma URLs
-    if (segment.variants) {
-      for (const variant of segment.variants) {
+    if (fragment.variants) {
+      for (const variant of fragment.variants) {
         if (variant.figma) {
           urls.push(variant.figma);
         }
@@ -232,5 +232,5 @@ export function useAllFigmaUrls(
 
     // Deduplicate
     return [...new Set(urls)];
-  }, [segment]);
+  }, [fragment]);
 }

package/src/viewer/components/HealthDashboard.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useMemo, useState, useCallback, useEffect } from 'react';
-import type { SegmentDefinition } from '../../core/index.js';
+import type { FragmentDefinition } from '../../core/index.js';
 import type { ImpactValue } from 'axe-core';
 import { Badge, Progress, Stack, Text, Card, EmptyState, Table } from '@fragments/ui';
 import {
@@ -17,7 +17,7 @@ import {
 import type { A11ySummary, CachedA11yResult } from '../types/a11y.js';
 
 interface HealthDashboardProps {
-  segments: Array<{ path: string; segment: SegmentDefinition }>;
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
   onNavigate?: (componentName: string) => void;
 }
 
@@ -50,9 +50,9 @@ interface ComponentRow {
 }
 
 function calculateCoverage(
-  segments: Array<{ path: string; segment: SegmentDefinition }>
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>
 ): { metrics: CoverageMetric[]; components: ComponentRow[]; categoryCount: number } {
-  const total = segments.length;
+  const total = fragments.length;
 
   if (total === 0) {
     return { metrics: [], components: [], categoryCount: 0 };
@@ -66,32 +66,32 @@ function calculateCoverage(
   let withUsage = 0;
   let figmaLinked = 0;
 
-  for (const { segment } of segments) {
-    const cat = segment.meta.category || 'uncategorized';
+  for (const { fragment } of fragments) {
+    const cat = fragment.meta.category || 'uncategorized';
     categories.add(cat);
 
-    if (segment.meta.description && segment.meta.description.trim().length > 10) {
+    if (fragment.meta.description && fragment.meta.description.trim().length > 10) {
       documented++;
     }
 
-    const variantCount = segment.variants?.length || 0;
+    const variantCount = fragment.variants?.length || 0;
     if (variantCount > 0) {
       withVariants++;
     }
 
-    if (segment.usage && (segment.usage.when.length > 0 || segment.usage.whenNot.length > 0)) {
+    if (fragment.usage && (fragment.usage.when.length > 0 || fragment.usage.whenNot.length > 0)) {
       withUsage++;
     }
 
-    if (segment.meta.figma || segment.variants?.some((v) => v.figma)) {
+    if (fragment.meta.figma || fragment.variants?.some((v) => v.figma)) {
       figmaLinked++;
     }
 
     components.push({
-      name: segment.meta.name,
+      name: fragment.meta.name,
       category: cat,
       variantCount,
-      status: segment.meta.status || 'stable',
+      status: fragment.meta.status || 'stable',
     });
   }
 
@@ -120,10 +120,10 @@ function impactToBadgeVariant(impact: ImpactValue | undefined): 'error' | 'warni
   }
 }
 
-export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps) {
+export function HealthDashboard({ fragments, onNavigate }: HealthDashboardProps) {
   const { metrics, components, categoryCount } = useMemo(
-    () => calculateCoverage(segments),
-    [segments]
+    () => calculateCoverage(fragments),
+    [fragments]
   );
 
   const [componentA11y, setComponentA11y] = useState<Record<string, ComponentA11yResult>>({});
@@ -212,7 +212,7 @@ export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps)
     };
   }, [componentA11y, a11ySummary]);
 
-  if (segments.length === 0) {
+  if (fragments.length === 0) {
     return (
       <EmptyState>
         <EmptyState.Description>No components loaded</EmptyState.Description>
@@ -234,7 +234,7 @@ export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps)
       <div>
         <Text as="h1" size="lg" weight="semibold">Fragments</Text>
         <Text size="sm" color="tertiary" style={{ marginTop: '2px' }}>
-          {segments.length} component{segments.length !== 1 ? 's' : ''} · {categoryCount} categor{categoryCount !== 1 ? 'ies' : 'y'}
+          {fragments.length} component{fragments.length !== 1 ? 's' : ''} · {categoryCount} categor{categoryCount !== 1 ? 'ies' : 'y'}
         </Text>
       </div>
 

package/src/viewer/components/InteractionsPanel.tsx

@@ -11,7 +11,7 @@
 
 import { useState, useCallback, useRef, useEffect } from "react";
 import { Button, Stack, Text, Badge, EmptyState, CodeBlock, Alert } from "@fragments/ui";
-import type { PlayFunction, PlayFunctionContext, SegmentVariant } from "../../core/index.js";
+import type { PlayFunction, PlayFunctionContext, FragmentVariant } from "../../core/index.js";
 import {
   PlayIcon,
   CheckIcon,
@@ -54,7 +54,7 @@ interface DebugState {
 
 interface InteractionsPanelProps {
   /** The current variant being displayed */
-  variant: SegmentVariant | null;
+  variant: FragmentVariant | null;
   /** Selector for the preview container element */
   previewSelector?: string;
   /** Key that changes when the preview updates */

package/src/viewer/components/IsolatedPreviewFrame.tsx

@@ -15,8 +15,8 @@ import { usePreviewBridge, type ParentMessage } from '../hooks/usePreviewBridge.
 const MAX_RETRIES = 3;
 
 export interface IsolatedPreviewFrameProps {
-  /** Segment path (file path) to render */
-  segmentPath: string;
+  /** Fragment path (file path) to render */
+  fragmentPath: string;
   /** Variant name to render */
   variantName: string;
   /** Props to pass to the variant render function */
@@ -50,7 +50,7 @@ export interface IsolatedPreviewFrameProps {
  * for complete CSS isolation from the viewer shell.
  */
 export const IsolatedPreviewFrame = memo(function IsolatedPreviewFrame({
-  segmentPath,
+  fragmentPath,
   variantName,
   props,
   theme,
@@ -109,12 +109,12 @@ export const IsolatedPreviewFrame = memo(function IsolatedPreviewFrame({
     if (!isReady) return;
 
     // Create a render key to detect changes
-    const renderKey = `${segmentPath}:${variantName}:${JSON.stringify(props)}:${previewKey || ''}`;
+    const renderKey = `${fragmentPath}:${variantName}:${JSON.stringify(props)}:${previewKey || ''}`;
     if (renderKey === lastRenderRef.current) return;
     lastRenderRef.current = renderKey;
 
-    render(segmentPath, variantName, props);
-  }, [isReady, segmentPath, variantName, props, previewKey, render]);
+    render(fragmentPath, variantName, props);
+  }, [isReady, fragmentPath, variantName, props, previewKey, render]);
 
   // Sync theme when it changes
   useEffect(() => {

package/src/viewer/components/IsolatedRender.tsx

@@ -1,10 +1,10 @@
 import { useMemo, useEffect, useState } from "react";
-import type { SegmentDefinition } from "../../core/index.js";
+import type { FragmentDefinition } from "../../core/index.js";
 import { VariantRenderer } from "./VariantRenderer.js";
 import { getBackgroundStyle, type BackgroundOption, type ZoomLevel } from "./PreviewToolbar.js";
 
 interface IsolatedRenderProps {
-  segments: Array<{ path: string; segment: SegmentDefinition }>;
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
 }
 
 /**
@@ -12,7 +12,7 @@ interface IsolatedRenderProps {
  * Renders a single variant with minimal UI for visual testing.
  * URL params: ?isolated=true&component=Name&variant=VariantName&zoom=100&bg=white&theme=light
  */
-export function IsolatedRender({ segments }: IsolatedRenderProps) {
+export function IsolatedRender({ fragments }: IsolatedRenderProps) {
   const [ready, setReady] = useState(false);
 
   // Parse query parameters
@@ -31,21 +31,21 @@ export function IsolatedRender({ segments }: IsolatedRenderProps) {
     };
   }, []);
 
-  // Find the matching segment and variant
+  // Find the matching fragment and variant
   const match = useMemo(() => {
     if (!params.component || !params.variant) {
       return null;
     }
 
-    const segment = segments.find(
-      (s) => s.segment.meta.name === params.component
+    const fragment = fragments.find(
+      (s) => s.fragment.meta.name === params.component
     );
 
-    if (!segment) {
+    if (!fragment) {
       return null;
     }
 
-    const variant = segment.segment.variants.find(
+    const variant = fragment.fragment.variants.find(
       (v) => v.name === params.variant
     );
 
@@ -53,8 +53,8 @@ export function IsolatedRender({ segments }: IsolatedRenderProps) {
       return null;
     }
 
-    return { segment: segment.segment, variant };
-  }, [segments, params]);
+    return { fragment: fragment.fragment, variant };
+  }, [fragments, params]);
 
   // Apply theme
   useEffect(() => {

package/src/viewer/components/LeftSidebar.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
-import type { SegmentDefinition } from '../../core/index.js';
+import type { FragmentDefinition } from '../../core/index.js';
 import { BRAND } from '../../core/index.js';
 import { useTheme } from './ThemeProvider.js';
 import { Sidebar, useSidebar, Badge, Text, ThemeToggle } from '@fragments/ui';
@@ -45,19 +45,19 @@ function fuzzyMatch(text: string, pattern: string): FuzzyMatch | null {
 }
 
 interface SearchResult {
-  item: { path: string; segment: SegmentDefinition };
+  item: { path: string; fragment: FragmentDefinition };
   score: number;
   nameIndices: number[];
 }
 
-function searchSegment(
-  item: { path: string; segment: SegmentDefinition },
+function searchFragment(
+  item: { path: string; fragment: FragmentDefinition },
   query: string
 ): SearchResult | null {
-  const { segment } = item;
-  // Skip invalid segments
-  if (!segment?.meta) return null;
-  const { name, category, tags } = segment.meta;
+  const { fragment } = item;
+  // Skip invalid fragments
+  if (!fragment?.meta) return null;
+  const { name, category, tags } = fragment.meta;
 
   const nameMatch = fuzzyMatch(name, query);
   if (nameMatch) {
@@ -119,15 +119,15 @@ function HighlightedText({ text, indices }: { text: string; indices: number[] })
 }
 
 interface LeftSidebarProps {
-  segments: Array<{ path: string; segment: SegmentDefinition }>;
-  activeSegment: string | null;
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
+  activeFragment: string | null;
   searchQuery: string;
   onSelect: (path: string) => void;
   showHealth?: boolean;
   onHealthClick?: () => void;
 }
 
-export function LeftSidebar({ segments, activeSegment, searchQuery, onSelect, showHealth, onHealthClick }: LeftSidebarProps) {
+export function LeftSidebar({ fragments, activeFragment, searchQuery, onSelect, showHealth, onHealthClick }: LeftSidebarProps) {
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const { setTheme, resolvedTheme } = useTheme();
   const { isMobile, setOpen } = useSidebar();
@@ -139,14 +139,14 @@ export function LeftSidebar({ segments, activeSegment, searchQuery, onSelect, sh
     if (!debouncedSearch) return null;
 
     const results: SearchResult[] = [];
-    for (const item of segments) {
-      const result = searchSegment(item, debouncedSearch);
+    for (const item of fragments) {
+      const result = searchFragment(item, debouncedSearch);
       if (result) results.push(result);
     }
 
     results.sort((a, b) => b.score - a.score);
     return results;
-  }, [segments, debouncedSearch]);
+  }, [fragments, debouncedSearch]);
 
   const highlightMap = useMemo(() => {
     const map = new Map<string, number[]>();
@@ -161,29 +161,29 @@ export function LeftSidebar({ segments, activeSegment, searchQuery, onSelect, sh
   const grouped = useMemo(() => {
     const source = searchResults
       ? searchResults.map(r => r.item)
-      : segments;
+      : fragments;
 
-    const groups: Record<string, typeof segments> = {};
+    const groups: Record<string, typeof fragments> = {};
     for (const item of source) {
-      // Skip invalid segments
-      if (!item.segment?.meta) continue;
-      const category = item.segment.meta.category || 'uncategorized';
+      // Skip invalid fragments
+      if (!item.fragment?.meta) continue;
+      const category = item.fragment.meta.category || 'uncategorized';
       if (!groups[category]) groups[category] = [];
       groups[category].push(item);
     }
     return groups;
-  }, [segments, searchResults]);
+  }, [fragments, searchResults]);
 
   const flatItems = useMemo(() => {
-    const items: Array<{ path: string; segment: SegmentDefinition }> = [];
+    const items: Array<{ path: string; fragment: FragmentDefinition }> = [];
     const sortedEntries = Object.entries(grouped).sort(([a], [b]) =>
       a.toLowerCase().localeCompare(b.toLowerCase())
     );
     for (const [, categoryItems] of sortedEntries) {
       const sorted = [...categoryItems]
-        .filter(item => item.segment?.meta?.name)
+        .filter(item => item.fragment?.meta?.name)
         .sort((a, b) =>
-          a.segment.meta.name.toLowerCase().localeCompare(b.segment.meta.name.toLowerCase())
+          a.fragment.meta.name.toLowerCase().localeCompare(b.fragment.meta.name.toLowerCase())
         );
       items.push(...sorted);
     }
@@ -295,9 +295,9 @@ export function LeftSidebar({ segments, activeSegment, searchQuery, onSelect, sh
 
           {sortedEntries.map(([category, items]) => {
             const sortedItems = [...items]
-              .filter(item => item.segment?.meta?.name)
+              .filter(item => item.fragment?.meta?.name)
               .sort((a, b) =>
-                a.segment.meta.name.toLowerCase().localeCompare(b.segment.meta.name.toLowerCase())
+                a.fragment.meta.name.toLowerCase().localeCompare(b.fragment.meta.name.toLowerCase())
               );
 
             return (
@@ -308,11 +308,11 @@ export function LeftSidebar({ segments, activeSegment, searchQuery, onSelect, sh
                   return (
                     <Sidebar.Item
                       key={item.path}
-                      active={activeSegment === item.path}
+                      active={activeFragment === item.path}
                       onClick={() => handleSelect(item.path)}
                     >
                       <HighlightedText
-                        text={item.segment.meta.name}
+                        text={item.fragment.meta.name}
                         indices={nameIndices}
                       />
                     </Sidebar.Item>
@@ -332,7 +332,7 @@ export function LeftSidebar({ segments, activeSegment, searchQuery, onSelect, sh
 
       {/* Footer */}
       <Sidebar.Footer>
-        <Badge size="sm">{segments.length} components</Badge>
+        <Badge size="sm">{fragments.length} components</Badge>
       </Sidebar.Footer>
     </>
   );