@fragments-sdk/cli 0.6.0 → 0.7.1

package/src/viewer/components/LeftSidebar.tsx

@@ -1,9 +1,8 @@
 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 { SunIcon, MoonIcon, DashboardIcon } from './Icons.js';
-import { Sidebar, Input, Button, Badge, Text } from '@fragments/ui';
+import { Sidebar, useSidebar, Badge, Text, ThemeToggle } from '@fragments/ui';
 
 // Fuzzy matching utility
 interface FuzzyMatch {
@@ -46,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) {
@@ -120,34 +119,34 @@ 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, onSelect, showHealth, onHealthClick }: LeftSidebarProps) {
-  const [search, setSearch] = useState('');
+export function LeftSidebar({ fragments, activeFragment, searchQuery, onSelect, showHealth, onHealthClick }: LeftSidebarProps) {
   const [focusedIndex, setFocusedIndex] = useState(-1);
-  const { theme, setTheme, resolvedTheme } = useTheme();
-  const searchInputRef = useRef<HTMLInputElement>(null);
+  const { setTheme, resolvedTheme } = useTheme();
+  const { isMobile, setOpen } = useSidebar();
   const navRef = useRef<HTMLDivElement>(null);
 
-  const debouncedSearch = useDebounce(search, 150);
+  const debouncedSearch = useDebounce(searchQuery, 150);
 
   const searchResults = useMemo(() => {
     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[]>();
@@ -162,94 +161,96 @@ export function LeftSidebar({ segments, activeSegment, onSelect, showHealth, onH
   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]);
-
-  const toggleTheme = () => {
-    // Simple toggle between light and dark
-    setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
-  };
+  }, [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);
     }
     return items;
   }, [grouped]);
 
+  const keyboardItems = useMemo(() => {
+    const componentItems = flatItems.map((item) => ({ type: 'component' as const, path: item.path }));
+    if (!onHealthClick) return componentItems;
+    return [{ type: 'dashboard' as const }, ...componentItems];
+  }, [flatItems, onHealthClick]);
+
   useEffect(() => {
-    if (focusedIndex >= 0 && focusedIndex < flatItems.length && navRef.current) {
+    if (focusedIndex >= 0 && focusedIndex < keyboardItems.length && navRef.current) {
       // Query all nav item buttons rendered by Sidebar.Item inside the nav
       const buttons = navRef.current.querySelectorAll<HTMLButtonElement>('li > button[type="button"]');
       if (buttons[focusedIndex]) {
         buttons[focusedIndex].focus();
       }
     }
-  }, [focusedIndex, flatItems.length]);
+  }, [focusedIndex, keyboardItems.length]);
 
   useEffect(() => {
     setFocusedIndex(-1);
-  }, [search]);
+  }, [searchQuery]);
 
-  const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    const target = e.target as HTMLElement;
-    if ((target.tagName === 'INPUT' && target !== searchInputRef.current) ||
-        target.tagName === 'TEXTAREA' || target.isContentEditable) {
-      return;
+  const handleSelect = (path: string) => {
+    onSelect(path);
+    if (isMobile) {
+      setOpen(false);
     }
+  };
 
-    if ((e.key === '/' && !e.metaKey && !e.ctrlKey) ||
-        (e.key === 'k' && (e.metaKey || e.ctrlKey))) {
-      e.preventDefault();
-      searchInputRef.current?.focus();
-      searchInputRef.current?.select();
+  const handleHealthClick = () => {
+    onHealthClick?.();
+    if (isMobile) {
+      setOpen(false);
+    }
+  };
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    const target = e.target as HTMLElement;
+    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
       return;
     }
 
     if (e.key === 'Escape') {
-      if (document.activeElement === searchInputRef.current) {
-        setSearch('');
-        searchInputRef.current?.blur();
-        if (flatItems.length > 0) setFocusedIndex(0);
-      } else {
-        setSearch('');
-        setFocusedIndex(-1);
-      }
+      setFocusedIndex(-1);
       return;
     }
 
-    if (document.activeElement === searchInputRef.current) return;
-
     if (e.key === 'ArrowDown') {
       e.preventDefault();
-      setFocusedIndex(prev => (prev + 1) >= flatItems.length ? 0 : prev + 1);
+      setFocusedIndex(prev => (prev + 1) >= keyboardItems.length ? 0 : prev + 1);
     } else if (e.key === 'ArrowUp') {
       e.preventDefault();
-      setFocusedIndex(prev => (prev - 1) < 0 ? flatItems.length - 1 : prev - 1);
-    } else if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < flatItems.length) {
+      setFocusedIndex(prev => (prev - 1) < 0 ? keyboardItems.length - 1 : prev - 1);
+    } else if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < keyboardItems.length) {
       e.preventDefault();
-      onSelect(flatItems[focusedIndex].path);
+      const currentItem = keyboardItems[focusedIndex];
+      if (currentItem.type === 'dashboard') {
+        handleHealthClick();
+      } else {
+        handleSelect(currentItem.path);
+      }
     }
-  }, [flatItems, focusedIndex, onSelect]);
+  }, [keyboardItems, focusedIndex, handleHealthClick, handleSelect]);
 
   useEffect(() => {
     document.addEventListener('keydown', handleKeyDown);
@@ -261,65 +262,42 @@ export function LeftSidebar({ segments, activeSegment, onSelect, showHealth, onH
   );
 
   return (
-    <Sidebar collapsible="none" style={{ height: '100%', backgroundColor: 'var(--bg-secondary)' }}>
+    <>
       {/* Header */}
       <Sidebar.Header>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
           <Text size="sm" weight="medium">{BRAND.name}</Text>
-          <Button
-            variant="ghost"
-            size="sm"
-            icon
-            onClick={toggleTheme}
-            aria-label={`Theme: ${resolvedTheme}`}
-          >
-            {resolvedTheme === 'dark' ? (
-              <MoonIcon />
-            ) : (
-              <SunIcon />
-            )}
-          </Button>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+            <ThemeToggle
+              size="sm"
+              value={resolvedTheme}
+              onValueChange={(value) => setTheme(value)}
+              aria-label={`Theme: ${resolvedTheme}`}
+            />
+            <Sidebar.CollapseToggle />
+          </div>
         </div>
       </Sidebar.Header>
 
-      {/* Search */}
-      <div style={{ padding: '12px' }}>
-        <Input
-          ref={searchInputRef}
-          value={search}
-          onChange={(value: string) => setSearch(value)}
-          placeholder="Search"
-          size="sm"
-        />
-      </div>
-
-      {/* Dashboard Link */}
-      {onHealthClick && (
-        <div style={{ padding: '0 8px 12px' }}>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onHealthClick}
-            style={{
-              width: '100%',
-              justifyContent: 'flex-start',
-              ...(showHealth ? { backgroundColor: 'var(--bg-hover)', color: 'var(--text-primary)' } : {}),
-            }}
-          >
-            <DashboardIcon />
-            <span style={{ marginLeft: '8px' }}>Dashboard</span>
-          </Button>
-        </div>
-      )}
-
       {/* Component list */}
-      <div ref={navRef}>
+      <div ref={navRef} style={{ flex: 1, minHeight: 0, display: 'flex', overflow: 'hidden' }}>
         <Sidebar.Nav aria-label="Components">
+          {onHealthClick && (
+            <Sidebar.Section>
+              <Sidebar.Item
+                active={!!showHealth}
+                onClick={handleHealthClick}
+              >
+                Dashboard
+              </Sidebar.Item>
+            </Sidebar.Section>
+          )}
+
           {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 (
@@ -330,11 +308,11 @@ export function LeftSidebar({ segments, activeSegment, onSelect, showHealth, onH
                   return (
                     <Sidebar.Item
                       key={item.path}
-                      active={activeSegment === item.path}
-                      onClick={() => onSelect(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>
@@ -354,8 +332,8 @@ export function LeftSidebar({ segments, activeSegment, onSelect, showHealth, onH
 
       {/* Footer */}
       <Sidebar.Footer>
-        <Badge size="sm">{segments.length} components</Badge>
+        <Badge size="sm">{fragments.length} components</Badge>
       </Sidebar.Footer>
-    </Sidebar>
+    </>
   );
 }

package/src/viewer/components/MultiViewportPreview.tsx

@@ -42,8 +42,8 @@ const DEFAULT_VIEWPORTS: ViewportConfig[] = [
 interface MultiViewportPreviewProps {
   /** Component name for error boundary */
   componentName: string;
-  /** Segment path for iframe rendering */
-  segmentPath: string;
+  /** Fragment path for iframe rendering */
+  fragmentPath: string;
   /** Variant name for iframe rendering */
   variantName: string;
   /** Render function that returns the component (fallback) */
@@ -60,7 +60,7 @@ interface MultiViewportPreviewProps {
 
 export function MultiViewportPreview({
   componentName,
-  segmentPath,
+  fragmentPath,
   variantName,
   renderContent,
   previewTheme,
@@ -203,7 +203,7 @@ export function MultiViewportPreview({
               key={`${vp.name}-${vp.width}`}
               viewport={vp}
               componentName={componentName}
-              segmentPath={segmentPath}
+              fragmentPath={fragmentPath}
               variantName={variantName}
               renderContent={renderContent}
               previewTheme={previewTheme}
@@ -220,7 +220,7 @@ export function MultiViewportPreview({
 interface ViewportPanelProps {
   viewport: ViewportConfig;
   componentName: string;
-  segmentPath: string;
+  fragmentPath: string;
   variantName: string;
   renderContent: () => ReactNode;
   previewTheme: "light" | "dark";
@@ -231,7 +231,7 @@ interface ViewportPanelProps {
 function ViewportPanel({
   viewport,
   componentName,
-  segmentPath,
+  fragmentPath,
   variantName,
   renderContent,
   previewTheme,
@@ -247,7 +247,7 @@ function ViewportPanel({
         previewTheme={previewTheme}
         background={background}
         componentName={componentName}
-        segmentPath={segmentPath}
+        fragmentPath={fragmentPath}
         variantName={variantName}
         renderContent={renderContent}
         useIframeIsolation={useIframeIsolation}
@@ -264,7 +264,7 @@ function ViewportPanel({
       previewTheme={previewTheme}
       background={background}
       componentName={componentName}
-      segmentPath={segmentPath}
+      fragmentPath={fragmentPath}
       variantName={variantName}
       renderContent={renderContent}
       useIframeIsolation={useIframeIsolation}
@@ -280,7 +280,7 @@ interface DeviceMockupProps {
   previewTheme: "light" | "dark";
   background: BackgroundOption;
   componentName: string;
-  segmentPath: string;
+  fragmentPath: string;
   variantName: string;
   renderContent: () => ReactNode;
   useIframeIsolation: boolean;
@@ -294,7 +294,7 @@ function DeviceMockup({
   previewTheme,
   background,
   componentName,
-  segmentPath,
+  fragmentPath,
   variantName,
   renderContent,
   useIframeIsolation,
@@ -427,7 +427,7 @@ function DeviceMockup({
             >
               {useIframeIsolation ? (
                 <IsolatedPreviewFrame
-                  segmentPath={segmentPath}
+                  fragmentPath={fragmentPath}
                   variantName={variantName}
                   theme={previewTheme}
                   width="100%"
@@ -481,7 +481,7 @@ interface DesktopMockupProps {
   previewTheme: "light" | "dark";
   background: BackgroundOption;
   componentName: string;
-  segmentPath: string;
+  fragmentPath: string;
   variantName: string;
   renderContent: () => ReactNode;
   useIframeIsolation: boolean;
@@ -494,7 +494,7 @@ function DesktopMockup({
   previewTheme,
   background,
   componentName,
-  segmentPath,
+  fragmentPath,
   variantName,
   renderContent,
   useIframeIsolation,
@@ -574,7 +574,7 @@ function DesktopMockup({
           >
             {useIframeIsolation ? (
               <IsolatedPreviewFrame
-                segmentPath={segmentPath}
+                fragmentPath={fragmentPath}
                 variantName={variantName}
                 theme={previewTheme}
                 width="100%"

package/src/viewer/components/PreviewArea.tsx

@@ -7,7 +7,7 @@
  */
 
 import { memo, type ReactNode } from 'react';
-import type { SegmentVariant } from '../../core/index.js';
+import type { FragmentVariant } from '../../core/index.js';
 import { ErrorBoundary } from './ErrorBoundary.js';
 import { FigmaEmbed } from './FigmaEmbed.js';
 import { VariantMatrix } from './VariantMatrix.js';
@@ -20,9 +20,9 @@ import { getViewportWidth, type ViewportPreset, type ViewportSize } from './View
 interface PreviewAreaProps {
   // Component data
   componentName: string;
-  segmentPath: string;
-  variant: SegmentVariant | undefined;
-  variants: SegmentVariant[] | undefined;
+  fragmentPath: string;
+  variant: FragmentVariant | undefined;
+  variants: FragmentVariant[] | undefined;
 
   // View settings
   zoom: ZoomLevel;
@@ -185,7 +185,7 @@ const PreviewContent = memo(function PreviewContent({ zoom, previewTheme, backgr
 
 export function PreviewArea({
   componentName,
-  segmentPath,
+  fragmentPath,
   variant,
   variants,
   zoom,
@@ -210,7 +210,7 @@ export function PreviewArea({
       <VariantMatrix
         variants={variants}
         componentName={componentName}
-        segmentPath={segmentPath}
+        fragmentPath={fragmentPath}
         zoom={zoom}
         previewTheme={previewTheme}
         background={background}
@@ -227,7 +227,7 @@ export function PreviewArea({
     return (
       <MultiViewportPreview
         componentName={componentName}
-        segmentPath={segmentPath}
+        fragmentPath={fragmentPath}
         variantName={variant.name}
         renderContent={renderContent}
         previewTheme={previewTheme}
@@ -257,7 +257,7 @@ export function PreviewArea({
                 <DeviceMockup type={viewport as 'tablet' | 'mobile'} width={viewportWidth}>
                   {useIframeIsolation ? (
                     <IsolatedPreviewFrame
-                      segmentPath={segmentPath}
+                      fragmentPath={fragmentPath}
                       variantName={variant.name}
                       theme={previewTheme}
                       width={viewportWidth}
@@ -300,7 +300,7 @@ export function PreviewArea({
         <DeviceMockup type={viewport as 'tablet' | 'mobile'} width={viewportWidth}>
           {useIframeIsolation ? (
             <IsolatedPreviewFrame
-              segmentPath={segmentPath}
+              fragmentPath={fragmentPath}
               variantName={variant.name}
               theme={previewTheme}
               width={viewportWidth}
@@ -337,7 +337,7 @@ export function PreviewArea({
             >
               {useIframeIsolation ? (
                 <IsolatedPreviewFrame
-                  segmentPath={segmentPath}
+                  fragmentPath={fragmentPath}
                   variantName={variant.name}
                   theme={previewTheme}
                   width="100%"
@@ -420,7 +420,7 @@ export function PreviewArea({
           }}
         >
           <IsolatedPreviewFrame
-            segmentPath={segmentPath}
+            fragmentPath={fragmentPath}
             variantName={variant.name}
             theme={previewTheme}
             width="100%"