@fragments-sdk/cli 0.7.0 → 0.7.2

package/src/viewer/components/App.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useState, useMemo, useEffect, useCallback, useRef, type RefObject } from "react";
-import { BRAND, type SegmentDefinition } from "../../core/index.js";
+import { BRAND, type FragmentDefinition } from "../../core/index.js";
 
 // Layout & Navigation
 import { Layout } from "./Layout.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();
 
@@ -84,18 +84,18 @@ export function App({ segments }: AppProps) {
   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;
   });
@@ -103,18 +103,18 @@ export function App({ segments }: AppProps) {
   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
@@ -123,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(() => {
@@ -141,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(() => {
@@ -167,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 () => {
@@ -199,27 +199,27 @@ export function App({ segments }: AppProps) {
     searchInputRef.current?.select();
   }, []);
 
-  // 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))
+  // 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),
@@ -269,7 +269,7 @@ export function App({ segments }: AppProps) {
   }, []);
 
   if (isIsolated) {
-    return <IsolatedRender segments={segments} />;
+    return <IsolatedRender fragments={fragments} />;
   }
 
   return (
@@ -278,19 +278,19 @@ 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={
-          activeSegment && !uiState.showHealthDashboard ? (
+          activeFragment && !uiState.showHealthDashboard ? (
             <TopToolbar
-              segment={activeSegment}
+              fragment={activeFragment}
               variant={activeVariant}
               viewSettings={viewSettings}
               uiState={uiState}
@@ -313,14 +313,14 @@ export function App({ segments }: AppProps) {
         }
         leftSidebar={
           <LeftSidebar
-            segments={segments}
-            activeSegment={uiState.showHealthDashboard ? null : activeSegmentPath}
+            fragments={fragments}
+            activeFragment={uiState.showHealthDashboard ? null : activeFragmentPath}
             searchQuery={searchQuery}
-            onSelect={handleSelectSegment}
+            onSelect={handleSelectFragment}
             showHealth={uiState.showHealthDashboard}
             onHealthClick={() => {
               uiActions.setHealthDashboard(true);
-              setActiveSegmentPath(null);
+              setActiveFragmentPath(null);
             }}
           />
         }
@@ -329,25 +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 }}>
               {/* 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}
@@ -368,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}
@@ -388,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>
@@ -399,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}
@@ -414,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>
@@ -438,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'];
@@ -498,7 +498,7 @@ function ViewerHeader({ showHealth, searchQuery, onSearchChange, searchInputRef
 }
 
 function TopToolbar({
-  segment,
+  fragment,
   variant,
   viewSettings,
   uiState,
@@ -515,8 +515,8 @@ function TopToolbar({
       <Header.Trigger />
       <Header.Brand>
         <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>
+          <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} />
@@ -570,7 +570,7 @@ function TopToolbar({
                   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);
@@ -582,7 +582,7 @@ function TopToolbar({
                 <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}
@@ -651,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;

package/src/viewer/components/CommandPalette.tsx

@@ -11,7 +11,7 @@
 
 import { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { Dialog, Stack, Text, Badge, Separator, Input } from '@fragments/ui';
-import type { SegmentDefinition } from "../../core/index.js";
+import type { FragmentDefinition } from "../../core/index.js";
 import { SearchIcon, ChevronRightIcon } from "./Icons.js";
 
 interface CommandPaletteProps {
@@ -19,8 +19,8 @@ interface CommandPaletteProps {
   isOpen: boolean;
   /** Callback to close the palette */
   onClose: () => void;
-  /** All available segments */
-  segments: Array<{ path: string; segment: SegmentDefinition }>;
+  /** All available fragments */
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
   /** Callback when a component is selected */
   onSelectComponent: (path: string) => void;
   /** Callback when a variant is selected */
@@ -40,7 +40,7 @@ interface SearchResult {
 export function CommandPalette({
   isOpen,
   onClose,
-  segments,
+  fragments,
   onSelectComponent,
   onSelectVariant,
 }: CommandPaletteProps) {
@@ -53,9 +53,9 @@ export function CommandPalette({
   const results = useMemo(() => {
     const allResults: SearchResult[] = [];
 
-    for (const { path, segment } of segments) {
-      const componentName = segment.meta.name;
-      const category = segment.meta.category;
+    for (const { path, fragment } of fragments) {
+      const componentName = fragment.meta.name;
+      const category = fragment.meta.category;
 
       // Add component result
       allResults.push({
@@ -67,9 +67,9 @@ export function CommandPalette({
       });
 
       // Add variant results
-      if (segment.variants) {
-        for (let i = 0; i < segment.variants.length; i++) {
-          const variant = segment.variants[i];
+      if (fragment.variants) {
+        for (let i = 0; i < fragment.variants.length; i++) {
+          const variant = fragment.variants[i];
           allResults.push({
             type: "variant",
             path,
@@ -106,7 +106,7 @@ export function CommandPalette({
       .slice(0, 20);
 
     return scored;
-  }, [segments, query]);
+  }, [fragments, query]);
 
   // Reset selection when results change
   useEffect(() => {