@fragments-sdk/cli 0.6.0 → 0.7.1

package/src/viewer/components/App.tsx

@@ -3,8 +3,8 @@
  * Refactored for better performance and maintainability.
  */
 
-import { useState, useMemo, useEffect, useCallback, useRef } from "react";
-import type { SegmentDefinition } from "../../core/index.js";
+import { useState, useMemo, useEffect, useCallback, useRef, type RefObject } from "react";
+import { BRAND, type FragmentDefinition } from "../../core/index.js";
 
 // Layout & Navigation
 import { Layout } from "./Layout.js";
@@ -28,10 +28,10 @@ import { useAllFigmaUrls } from "./FigmaEmbed.js";
 import { ActionCapture } from "./ActionCapture.js";
 
 // Fragments UI
-import { Stack, Text, Separator, Tooltip, Button, EmptyState, Box, Alert } from "@fragments/ui";
+import { Header, Stack, Text, Separator, Tooltip, Button, EmptyState, Box, Alert, ScrollArea, Input } from "@fragments/ui";
 
 // Icons
-import { EmptyIcon, ExternalLinkIcon, CameraIcon, FigmaIcon, CompareIcon, CheckIcon, LinkIcon, GridIcon, DevicesIcon } from "./Icons.js";
+import { EmptyIcon, ExternalLinkIcon, FigmaIcon, CompareIcon, CheckIcon, LinkIcon, GridIcon, DevicesIcon } from "./Icons.js";
 
 // Hooks
 import { useAppState } from "../hooks/useAppState.js";
@@ -39,7 +39,7 @@ import { useViewSettings } from "../hooks/useViewSettings.js";
 import { useFigmaIntegration } from "../hooks/useFigmaIntegration.js";
 import { useKeyboardShortcuts } from "../hooks/useKeyboardShortcuts.js";
 import { useActions } from "../hooks/useActions.js";
-import { useUrlState, findSegmentByName, findVariantIndex } from "../hooks/useUrlState.js";
+import { useUrlState, findFragmentByName, findVariantIndex } from "../hooks/useUrlState.js";
 import { usePanelDock } from "./ResizablePanel.js";
 import { useTheme } from "./ThemeProvider.js";
 
@@ -47,10 +47,10 @@ import { useTheme } from "./ThemeProvider.js";
 import { ScreenshotButton } from "./ScreenshotButton.js";
 
 interface AppProps {
-  segments: Array<{ path: string; segment: SegmentDefinition }>;
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
 }
 
-export function App({ segments }: AppProps) {
+export function App({ fragments }: AppProps) {
   // URL state management
   const { state: urlState, setComponent: setUrlComponent, setVariant: setUrlVariant, setViewSettings: setUrlViewSettings, copyUrl } = useUrlState();
 
@@ -81,38 +81,40 @@ export function App({ segments }: AppProps) {
   const { resolvedTheme } = useTheme();
 
   // Toast notifications (via Fragments UI ToastProvider)
-  const { toast, info, success } = useToast();
+  const { info, success } = useToast();
 
   // Navigation state
-  const [activeSegmentPath, setActiveSegmentPath] = useState<string | null>(() => {
+  const [activeFragmentPath, setActiveFragmentPath] = useState<string | null>(() => {
     if (urlState.component) {
-      const found = findSegmentByName(segments, urlState.component);
-      return found?.path ?? segments[0]?.path ?? null;
+      const found = findFragmentByName(fragments, urlState.component);
+      return found?.path ?? fragments[0]?.path ?? null;
     }
-    return segments[0]?.path ?? null;
+    return fragments[0]?.path ?? null;
   });
 
   const [activeVariantIndex, setActiveVariantIndex] = useState<number>(() => {
-    const segment = segments.find(s => s.path === activeSegmentPath);
-    if (urlState.variant && segment?.segment.variants) {
-      return findVariantIndex(segment.segment.variants, urlState.variant);
+    const fragment = fragments.find(s => s.path === activeFragmentPath);
+    if (urlState.variant && fragment?.fragment.variants) {
+      return findVariantIndex(fragment.fragment.variants, urlState.variant);
     }
     return 0;
   });
+  const [searchQuery, setSearchQuery] = useState('');
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   // Derived values
-  const activeSegment = useMemo(
-    () => segments.find((s) => s.path === activeSegmentPath),
-    [segments, activeSegmentPath]
+  const activeFragment = useMemo(
+    () => fragments.find((s) => s.path === activeFragmentPath),
+    [fragments, activeFragmentPath]
   );
-  const activeVariant = activeSegment?.segment.variants?.[activeVariantIndex];
-  const figmaUrl = activeVariant?.figma || activeSegment?.segment.meta.figma;
+  const activeVariant = activeFragment?.fragment.variants?.[activeVariantIndex];
+  const figmaUrl = activeVariant?.figma || activeFragment?.fragment.meta.figma;
 
   // Figma integration
   const figmaIntegration = useFigmaIntegration({
     figmaUrl,
     showComparison: uiState.showComparison,
-    dependencies: [activeSegmentPath, activeVariantIndex],
+    dependencies: [activeFragmentPath, activeVariantIndex],
   });
 
   // Actions logging
@@ -121,12 +123,12 @@ export function App({ segments }: AppProps) {
   useActionsRef.current = { logAction };
 
   // Figma URLs for preloading
-  const allFigmaUrls = useAllFigmaUrls(activeSegment?.segment);
+  const allFigmaUrls = useAllFigmaUrls(activeFragment?.fragment);
 
   // Reset action logs on variant change
   useEffect(() => {
     clearActionLogs();
-  }, [activeSegmentPath, activeVariantIndex, clearActionLogs]);
+  }, [activeFragmentPath, activeVariantIndex, clearActionLogs]);
 
   // Extract rendered styles after component renders
   useEffect(() => {
@@ -139,14 +141,14 @@ export function App({ segments }: AppProps) {
   // Sync URL state on browser navigation
   useEffect(() => {
     if (urlState.component) {
-      const found = findSegmentByName(segments, urlState.component);
-      if (found && found.path !== activeSegmentPath) {
-        setActiveSegmentPath(found.path);
-        const variantIndex = findVariantIndex(found.segment.variants, urlState.variant);
+      const found = findFragmentByName(fragments, urlState.component);
+      if (found && found.path !== activeFragmentPath) {
+        setActiveFragmentPath(found.path);
+        const variantIndex = findVariantIndex(found.fragment.variants, urlState.variant);
         setActiveVariantIndex(variantIndex);
       }
     }
-  }, [urlState.component, urlState.variant, segments, activeSegmentPath]);
+  }, [urlState.component, urlState.variant, fragments, activeFragmentPath]);
 
   // HMR toast notifications
   useEffect(() => {
@@ -165,22 +167,22 @@ export function App({ segments }: AppProps) {
   }, [info]);
 
   // Navigation handlers
-  const handleSelectSegment = useCallback((path: string) => {
-    const segment = segments.find((s) => s.path === path);
-    const componentName = segment?.segment.meta.name || path;
-    const firstVariant = segment?.segment.variants?.[0]?.name;
+  const handleSelectFragment = useCallback((path: string) => {
+    const fragment = fragments.find((s) => s.path === path);
+    const componentName = fragment?.fragment.meta.name || path;
+    const firstVariant = fragment?.fragment.variants?.[0]?.name;
 
-    setActiveSegmentPath(path);
+    setActiveFragmentPath(path);
     setActiveVariantIndex(0);
     uiActions.setHealthDashboard(false);
     setUrlComponent(componentName, firstVariant);
-  }, [segments, setUrlComponent, uiActions]);
+  }, [fragments, setUrlComponent, uiActions]);
 
   const handleSelectVariant = useCallback((index: number) => {
-    const variantName = activeSegment?.segment.variants?.[index]?.name;
+    const variantName = activeFragment?.fragment.variants?.[index]?.name;
     setActiveVariantIndex(index);
     setUrlVariant(variantName || null);
-  }, [activeSegment, setUrlVariant]);
+  }, [activeFragment, setUrlVariant]);
 
   // Copy link handler
   const handleCopyLink = useCallback(async () => {
@@ -192,27 +194,32 @@ export function App({ segments }: AppProps) {
     }
   }, [copyUrl, success, uiActions]);
 
-  // Sorted segment paths for keyboard navigation
-  const sortedSegmentPaths = useMemo(() => {
-    return [...segments]
-      .filter(s => s.segment?.meta?.name)
-      .sort((a, b) => a.segment.meta.name.localeCompare(b.segment.meta.name))
+  const focusSearchInput = useCallback(() => {
+    searchInputRef.current?.focus();
+    searchInputRef.current?.select();
+  }, []);
+
+  // Sorted fragment paths for keyboard navigation
+  const sortedFragmentPaths = useMemo(() => {
+    return [...fragments]
+      .filter(s => s.fragment?.meta?.name)
+      .sort((a, b) => a.fragment.meta.name.localeCompare(b.fragment.meta.name))
       .map(s => s.path);
-  }, [segments]);
+  }, [fragments]);
 
-  const currentSegmentIndex = sortedSegmentPaths.indexOf(activeSegmentPath || '');
-  const variantCount = activeSegment?.segment.variants?.length || 0;
+  const currentFragmentIndex = sortedFragmentPaths.indexOf(activeFragmentPath || '');
+  const variantCount = activeFragment?.fragment.variants?.length || 0;
 
   // Keyboard shortcuts
   useKeyboardShortcuts(
     {
       nextComponent: () => {
-        const nextIndex = currentSegmentIndex < sortedSegmentPaths.length - 1 ? currentSegmentIndex + 1 : 0;
-        handleSelectSegment(sortedSegmentPaths[nextIndex]);
+        const nextIndex = currentFragmentIndex < sortedFragmentPaths.length - 1 ? currentFragmentIndex + 1 : 0;
+        handleSelectFragment(sortedFragmentPaths[nextIndex]);
       },
       prevComponent: () => {
-        const prevIndex = currentSegmentIndex > 0 ? currentSegmentIndex - 1 : sortedSegmentPaths.length - 1;
-        handleSelectSegment(sortedSegmentPaths[prevIndex]);
+        const prevIndex = currentFragmentIndex > 0 ? currentFragmentIndex - 1 : sortedFragmentPaths.length - 1;
+        handleSelectFragment(sortedFragmentPaths[prevIndex]);
       },
       nextVariant: () => handleSelectVariant(activeVariantIndex < variantCount - 1 ? activeVariantIndex + 1 : 0),
       prevVariant: () => handleSelectVariant(activeVariantIndex > 0 ? activeVariantIndex - 1 : variantCount - 1),
@@ -221,8 +228,18 @@ export function App({ segments }: AppProps) {
       togglePanel: uiActions.togglePanel,
       copyLink: handleCopyLink,
       showHelp: uiActions.toggleShortcutsHelp,
-      openSearch: () => uiActions.setCommandPalette(true),
-      escape: uiActions.closeAllModals,
+      openSearch: focusSearchInput,
+      escape: () => {
+        if (document.activeElement === searchInputRef.current) {
+          if (searchQuery) {
+            setSearchQuery('');
+          } else {
+            searchInputRef.current.blur();
+          }
+          return;
+        }
+        uiActions.closeAllModals();
+      },
     },
     { enabled: !uiState.showShortcutsHelp, variantCount }
   );
@@ -252,7 +269,7 @@ export function App({ segments }: AppProps) {
   }, []);
 
   if (isIsolated) {
-    return <IsolatedRender segments={segments} />;
+    return <IsolatedRender fragments={fragments} />;
   }
 
   return (
@@ -261,24 +278,49 @@ export function App({ segments }: AppProps) {
       <CommandPalette
         isOpen={uiState.showCommandPalette}
         onClose={() => uiActions.setCommandPalette(false)}
-        segments={segments}
-        onSelectComponent={handleSelectSegment}
+        fragments={fragments}
+        onSelectComponent={handleSelectFragment}
         onSelectVariant={(path, variantIndex) => {
-          handleSelectSegment(path);
+          handleSelectFragment(path);
           setTimeout(() => handleSelectVariant(variantIndex), 0);
         }}
       />
 
       <Layout
+        header={
+          activeFragment && !uiState.showHealthDashboard ? (
+            <TopToolbar
+              fragment={activeFragment}
+              variant={activeVariant}
+              viewSettings={viewSettings}
+              uiState={uiState}
+              uiActions={uiActions}
+              figmaUrl={figmaUrl}
+              linkCopied={uiState.linkCopied}
+              onCopyLink={handleCopyLink}
+              searchQuery={searchQuery}
+              onSearchChange={setSearchQuery}
+              searchInputRef={searchInputRef}
+            />
+          ) : (
+            <ViewerHeader
+              showHealth={uiState.showHealthDashboard}
+              searchQuery={searchQuery}
+              onSearchChange={setSearchQuery}
+              searchInputRef={searchInputRef}
+            />
+          )
+        }
         leftSidebar={
           <LeftSidebar
-            segments={segments}
-            activeSegment={uiState.showHealthDashboard ? null : activeSegmentPath}
-            onSelect={handleSelectSegment}
+            fragments={fragments}
+            activeFragment={uiState.showHealthDashboard ? null : activeFragmentPath}
+            searchQuery={searchQuery}
+            onSelect={handleSelectFragment}
             showHealth={uiState.showHealthDashboard}
             onHealthClick={() => {
               uiActions.setHealthDashboard(true);
-              setActiveSegmentPath(null);
+              setActiveFragmentPath(null);
             }}
           />
         }
@@ -287,37 +329,25 @@ export function App({ segments }: AppProps) {
           <div style={{ height: '100%', overflow: 'auto', backgroundColor: 'var(--bg-primary)' }}>
             <Box padding="lg" style={{ maxWidth: '896px', margin: '0 auto' }}>
               <HealthDashboard
-                segments={segments}
+                fragments={fragments}
                 onNavigate={(componentName) => {
-                  const target = segments.find(s => s.segment.meta.name === componentName);
+                  const target = fragments.find(s => s.fragment.meta.name === componentName);
                   if (target) {
                     uiActions.setHealthDashboard(false);
-                    handleSelectSegment(target.path);
+                    handleSelectFragment(target.path);
                   }
                 }}
               />
             </Box>
           </div>
-        ) : activeSegment ? (
+        ) : activeFragment ? (
           <div style={{ display: 'flex', height: '100%', flexDirection: panelDock === "bottom" ? 'column' : 'row' }}>
             {/* Main Content Area */}
             <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, minHeight: 0 }}>
-              {/* Top Toolbar */}
-              <TopToolbar
-                segment={activeSegment}
-                variant={activeVariant}
-                viewSettings={viewSettings}
-                uiState={uiState}
-                uiActions={uiActions}
-                figmaUrl={figmaUrl}
-                linkCopied={uiState.linkCopied}
-                onCopyLink={handleCopyLink}
-              />
-
               {/* Variant Tabs */}
-              {activeSegment.segment.variants && activeSegment.segment.variants.length > 0 && (
+              {activeFragment.fragment.variants && activeFragment.fragment.variants.length > 0 && (
                 <VariantTabsBar
-                  variants={activeSegment.segment.variants}
+                  variants={activeFragment.fragment.variants}
                   activeIndex={activeVariantIndex}
                   onSelect={handleSelectVariant}
                   showMatrixView={uiState.showMatrixView}
@@ -338,10 +368,10 @@ export function App({ segments }: AppProps) {
               >
                 {activeVariant ? (
                   <PreviewArea
-                    componentName={activeSegment.segment.meta.name}
-                    segmentPath={activeSegment.path}
+                    componentName={activeFragment.fragment.meta.name}
+                    fragmentPath={activeFragment.path}
                     variant={activeVariant}
-                    variants={activeSegment.segment.variants}
+                    variants={activeFragment.fragment.variants}
                     zoom={viewSettings.zoom}
                     background={viewSettings.background}
                     viewport={viewSettings.viewport}
@@ -358,10 +388,10 @@ export function App({ segments }: AppProps) {
                     }}
                     onRetry={uiActions.incrementPreviewKey}
                     renderContent={renderVariantWithProps}
-                    previewKey={`${activeSegmentPath}-${activeVariantIndex}-${uiState.previewKey}`}
+                    previewKey={`${activeFragmentPath}-${activeVariantIndex}-${uiState.previewKey}`}
                   />
                 ) : (
-                  <NoVariantsMessage segment={activeSegment?.segment} />
+                  <NoVariantsMessage fragment={activeFragment?.fragment} />
                 )}
               </div>
             </div>
@@ -369,9 +399,9 @@ export function App({ segments }: AppProps) {
             {/* Bottom Panel */}
             {activeVariant && (
               <BottomPanel
-                segment={activeSegment.segment}
+                fragment={activeFragment.fragment}
                 variant={activeVariant}
-                segments={segments}
+                fragments={fragments}
                 activePanel={uiState.activePanel}
                 onPanelChange={uiActions.setActivePanel}
                 figmaUrl={figmaUrl}
@@ -384,11 +414,11 @@ export function App({ segments }: AppProps) {
                 actionLogs={actionLogs}
                 onClearActionLogs={clearActionLogs}
                 onNavigateToComponent={(name) => {
-                  const target = segments.find(s => s.segment.meta.name === name);
-                  if (target) handleSelectSegment(target.path);
+                  const target = fragments.find(s => s.fragment.meta.name === name);
+                  if (target) handleSelectFragment(target.path);
                 }}
                 previewKey={uiState.previewKey}
-                segmentKey={`${activeSegmentPath}-${activeVariantIndex}`}
+                fragmentKey={`${activeFragmentPath}-${activeVariantIndex}`}
               />
             )}
           </div>
@@ -408,7 +438,7 @@ export function App({ segments }: AppProps) {
 
 // Top Toolbar Component
 interface TopToolbarProps {
-  segment: { path: string; segment: SegmentDefinition };
+  fragment: { path: string; fragment: FragmentDefinition };
   variant: any;
   viewSettings: ReturnType<typeof useViewSettings>;
   uiState: ReturnType<typeof useAppState>['state'];
@@ -416,16 +446,82 @@ interface TopToolbarProps {
   figmaUrl?: string;
   linkCopied: boolean;
   onCopyLink: () => void;
+  searchQuery: string;
+  onSearchChange: (value: string) => void;
+  searchInputRef: RefObject<HTMLInputElement>;
+}
+
+interface ViewerHeaderProps {
+  showHealth: boolean;
+  searchQuery: string;
+  onSearchChange: (value: string) => void;
+  searchInputRef: RefObject<HTMLInputElement>;
+}
+
+interface HeaderSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  inputRef: RefObject<HTMLInputElement>;
 }
 
-function TopToolbar({ segment, variant, viewSettings, uiState, uiActions, figmaUrl, linkCopied, onCopyLink }: TopToolbarProps) {
+function HeaderSearch({ value, onChange, inputRef }: HeaderSearchProps) {
   return (
-    <Stack direction="row" align="center" justify="between" style={{ padding: '8px 16px', borderBottom: '1px solid var(--border)', backgroundColor: 'var(--bg-secondary)', flexShrink: 0 }}>
-      <Stack direction="row" align="center" gap="sm">
-        <Text weight="medium" size="sm">{segment.segment.meta.name}</Text>
-        <Text size="xs" color="tertiary">{segment.segment.meta.category}</Text>
-      </Stack>
-      <Stack direction="row" align="center" gap="sm">
+    <Header.Search expandable>
+      <Input
+        ref={inputRef}
+        value={value}
+        onChange={onChange}
+        placeholder="Search components"
+        aria-label="Search components"
+        size="sm"
+        shortcut="⌘K"
+        style={{ width: '220px' }}
+      />
+    </Header.Search>
+  );
+}
+
+function ViewerHeader({ showHealth, searchQuery, onSearchChange, searchInputRef }: ViewerHeaderProps) {
+  return (
+    <Header aria-label="Fragments viewer header">
+      <Header.Trigger />
+      <Header.Brand>
+        <Stack direction="row" gap="sm" align="center">
+          <Text weight="medium" size="sm">{BRAND.name}</Text>
+          <Text size="xs" color="tertiary">{showHealth ? 'health dashboard' : 'preview'}</Text>
+        </Stack>
+      </Header.Brand>
+      <HeaderSearch value={searchQuery} onChange={onSearchChange} inputRef={searchInputRef} />
+      <Header.Spacer />
+    </Header>
+  );
+}
+
+function TopToolbar({
+  fragment,
+  variant,
+  viewSettings,
+  uiState,
+  uiActions,
+  figmaUrl,
+  linkCopied,
+  onCopyLink,
+  searchQuery,
+  onSearchChange,
+  searchInputRef,
+}: TopToolbarProps) {
+  return (
+    <Header aria-label="Component preview toolbar">
+      <Header.Trigger />
+      <Header.Brand>
+        <Stack direction="row" align="center" gap="sm">
+          <Text weight="medium" size="sm">{fragment.fragment.meta.name}</Text>
+          <Text size="xs" color="tertiary">{fragment.fragment.meta.category}</Text>
+        </Stack>
+      </Header.Brand>
+      <HeaderSearch value={searchQuery} onChange={onSearchChange} inputRef={searchInputRef} />
+      <Header.Spacer />
+      <Header.Actions>
         <PreviewToolbar
           zoom={viewSettings.zoom}
           background={viewSettings.background}
@@ -474,7 +570,7 @@ function TopToolbar({ segment, variant, viewSettings, uiState, uiActions, figmaU
                   const url = new URL(window.location.href);
                   url.hash = '';
                   url.searchParams.set('isolated', 'true');
-                  url.searchParams.set('component', segment.segment.meta.name);
+                  url.searchParams.set('component', fragment.fragment.meta.name);
                   url.searchParams.set('variant', variant.name);
                   if (viewSettings.zoom !== 100) url.searchParams.set('zoom', String(viewSettings.zoom));
                   if (viewSettings.background !== 'transparent') url.searchParams.set('bg', viewSettings.background);
@@ -486,7 +582,7 @@ function TopToolbar({ segment, variant, viewSettings, uiState, uiActions, figmaU
                 <ExternalLinkIcon style={{ width: '16px', height: '16px' }} />
               </Button>
             </Tooltip>
-            <ScreenshotButton componentName={segment.segment.meta.name} variantName={variant.name} />
+            <ScreenshotButton componentName={fragment.fragment.meta.name} variantName={variant.name} />
             <Tooltip content="Copy link to share">
               <Button
                 onClick={onCopyLink}
@@ -499,8 +595,8 @@ function TopToolbar({ segment, variant, viewSettings, uiState, uiActions, figmaU
             </Tooltip>
           </>
         )}
-      </Stack>
-    </Stack>
+      </Header.Actions>
+    </Header>
   );
 }
 
@@ -519,11 +615,13 @@ function VariantTabsBar({ variants, activeIndex, onSelect, showMatrixView, showM
   return (
     <Stack direction="row" align="center" justify="between" style={{ padding: '8px 16px', borderBottom: '1px solid var(--border)', backgroundColor: 'var(--bg-primary)', flexShrink: 0 }}>
       {!showMatrixView ? (
-        <VariantTabs variants={variants} activeIndex={activeIndex} onSelect={onSelect} />
+        <ScrollArea orientation="horizontal" showFades style={{ flex: 1, minWidth: 0 }}>
+          <VariantTabs variants={variants} activeIndex={activeIndex} onSelect={onSelect} />
+        </ScrollArea>
       ) : (
         <Text size="sm" color="secondary">Showing all {variants.length} variants</Text>
       )}
-      <Stack direction="row" align="center" gap="sm" style={{ marginLeft: '16px' }}>
+      <Stack direction="row" align="center" gap="sm" style={{ marginLeft: '16px', flexShrink: 0 }}>
         {variants.length > 1 && (
           <Button
             onClick={onToggleMatrix}
@@ -553,11 +651,11 @@ function VariantTabsBar({ variants, activeIndex, onSelect, showMatrixView, showM
 
 // No variants message
 interface NoVariantsMessageProps {
-  segment?: SegmentDefinition;
+  fragment?: FragmentDefinition;
 }
 
-function NoVariantsMessage({ segment }: NoVariantsMessageProps) {
-  const skippedVariants = (segment?._generated as any)?.skippedVariants;
+function NoVariantsMessage({ fragment }: NoVariantsMessageProps) {
+  const skippedVariants = (fragment?._generated as any)?.skippedVariants;
 
   if (!skippedVariants || skippedVariants.length === 0) {
     return (

package/src/viewer/components/BottomPanel.tsx

@@ -4,7 +4,7 @@
  */
 
 import { memo, useCallback } from 'react';
-import type { SegmentDefinition, SegmentVariant } from '../../core/index.js';
+import type { FragmentDefinition, FragmentVariant } from '../../core/index.js';
 import { Tabs, Badge } from '@fragments/ui';
 import { ResizablePanel } from './ResizablePanel.js';
 import { CodePanel } from './CodePanel.js';
@@ -19,9 +19,9 @@ import type { ActionLog } from '../hooks/useActions.js';
 
 interface BottomPanelProps {
   // Component data
-  segment: SegmentDefinition;
-  variant: SegmentVariant;
-  segments: Array<{ path: string; segment: SegmentDefinition }>;
+  fragment: FragmentDefinition;
+  variant: FragmentVariant;
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
 
   // Panel state
   activePanel: ActivePanel;
@@ -45,13 +45,13 @@ interface BottomPanelProps {
 
   // Keys
   previewKey: number;
-  segmentKey: string;
+  fragmentKey: string;
 }
 
 export const BottomPanel = memo(function BottomPanel({
-  segment,
+  fragment,
   variant,
-  segments,
+  fragments,
   activePanel,
   onPanelChange,
   figmaUrl,
@@ -65,7 +65,7 @@ export const BottomPanel = memo(function BottomPanel({
   onClearActionLogs,
   onNavigateToComponent,
   previewKey,
-  segmentKey,
+  fragmentKey,
 }: BottomPanelProps) {
   const handleStylesClick = useCallback(() => {
     onPanelChange('styles');
@@ -121,8 +121,8 @@ export const BottomPanel = memo(function BottomPanel({
         <div style={{ padding: '16px' }}>
           <CodePanel
             variant={variant}
-            componentName={segment.meta.name}
-            propDefs={segment.props}
+            componentName={fragment.meta.name}
+            propDefs={fragment.props}
             compact
           />
         </div>
@@ -142,17 +142,17 @@ export const BottomPanel = memo(function BottomPanel({
 
       {activePanel === 'accessibility' && (
         <AccessibilityPanel
-          cacheKey={segmentKey}
+          cacheKey={fragmentKey}
           previewKey={previewKey}
           autoScan={true}
-          componentName={segment.meta.name}
+          componentName={fragment.meta.name}
           variantName={variant.name}
         />
       )}
 
       {activePanel === 'interactions' && (
         <InteractionsPanel
-          key={segmentKey}
+          key={fragmentKey}
           variant={variant}
           previewKey={previewKey}
         />
@@ -167,16 +167,16 @@ export const BottomPanel = memo(function BottomPanel({
 
       {activePanel === 'graph' && (
         <ComponentGraph
-          segment={segment}
-          allSegments={segments}
+          fragment={fragment}
+          allFragments={fragments}
           onNavigate={onNavigateToComponent}
         />
       )}
 
       {activePanel === 'contract' && (
         <ContractPanel
-          contract={segment.contract}
-          componentName={segment.meta.name}
+          contract={fragment.contract}
+          componentName={fragment.meta.name}
         />
       )}
     </ResizablePanel>

package/src/viewer/components/CodePanel.tsx

@@ -1,16 +1,16 @@
 import { useMemo, isValidElement, type ReactNode } from 'react';
-import type { SegmentVariant, PropDefinition } from '../../core/index.js';
+import type { FragmentVariant, PropDefinition } from '../../core/index.js';
 import { CodeBlock } from '@fragments/ui';
 
 interface CodePanelProps {
-  variant: SegmentVariant;
+  variant: FragmentVariant;
   componentName: string;
   compact?: boolean;
   propDefs?: Record<string, PropDefinition>;
 }
 
 // Extract props from rendered element by calling render() and introspecting
-function extractPropsFromRender(variant: SegmentVariant, componentName: string): Record<string, unknown> | null {
+function extractPropsFromRender(variant: FragmentVariant, componentName: string): Record<string, unknown> | null {
   try {
     const rendered = variant.render();
     if (!isValidElement(rendered)) return null;