@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/Layout.tsx

@@ -1,22 +1,24 @@
 import type { ReactNode } from 'react';
+import { AppShell } from '@fragments/ui';
 
 interface LayoutProps {
   leftSidebar: ReactNode;
+  header: ReactNode;
   children: ReactNode;
 }
 
-export function Layout({ leftSidebar, children }: LayoutProps) {
+export function Layout({ leftSidebar, header, children }: LayoutProps) {
   return (
-    <div className="flex h-screen overflow-hidden bg-[--bg-primary]">
-      {/* Left Sidebar */}
-      <aside className="hidden md:flex md:w-56 lg:w-64 flex-col border-r border-[--border] bg-[--bg-secondary] flex-shrink-0">
+    <AppShell layout="inset">
+      <AppShell.Header>
+        {header}
+      </AppShell.Header>
+      <AppShell.Sidebar width="256px" collapsible="icon">
         {leftSidebar}
-      </aside>
-
-      {/* Main Content - Full width */}
-      <main className="flex-1 flex flex-col overflow-hidden min-w-0">
+      </AppShell.Sidebar>
+      <AppShell.Main padding="none">
         {children}
-      </main>
-    </div>
+      </AppShell.Main>
+    </AppShell>
   );
 }

package/src/viewer/components/LeftSidebar.tsx

@@ -2,8 +2,7 @@ import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
 import type { SegmentDefinition } from '../../core/index.js';
 import { BRAND } from '../../core/index.js';
 import { useTheme } from './ThemeProvider.js';
-import clsx from 'clsx';
-import { SearchIcon, SunIcon, MoonIcon, DashboardIcon } from './Icons.js';
+import { Sidebar, useSidebar, Badge, Text, ThemeToggle } from '@fragments/ui';
 
 // Fuzzy matching utility
 interface FuzzyMatch {
@@ -105,7 +104,7 @@ function HighlightedText({ text, indices }: { text: string; indices: number[] })
       result.push(text.slice(lastIndex, matchIndex));
     }
     result.push(
-      <span key={matchIndex} className="text-primary font-medium">
+      <span key={matchIndex} style={{ color: 'var(--text-primary)', fontWeight: 500 }}>
         {text[matchIndex]}
       </span>
     );
@@ -122,19 +121,19 @@ function HighlightedText({ text, indices }: { text: string; indices: number[] })
 interface LeftSidebarProps {
   segments: Array<{ path: string; segment: SegmentDefinition }>;
   activeSegment: 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({ segments, activeSegment, searchQuery, onSelect, showHealth, onHealthClick }: LeftSidebarProps) {
   const [focusedIndex, setFocusedIndex] = useState(-1);
-  const { theme, setTheme, resolvedTheme } = useTheme();
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const itemRefs = useRef<Map<number, HTMLButtonElement>>(new Map());
+  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;
@@ -175,11 +174,6 @@ export function LeftSidebar({ segments, activeSegment, onSelect, showHealth, onH
     return groups;
   }, [segments, searchResults]);
 
-  const toggleTheme = () => {
-    // Simple toggle between light and dark
-    setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
-  };
-
   const flatItems = useMemo(() => {
     const items: Array<{ path: string; segment: SegmentDefinition }> = [];
     const sortedEntries = Object.entries(grouped).sort(([a], [b]) =>
@@ -196,196 +190,150 @@ export function LeftSidebar({ segments, activeSegment, onSelect, showHealth, onH
     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) {
-      itemRefs.current.get(focusedIndex)?.focus();
+    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);
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, [handleKeyDown]);
 
-  const setItemRef = useCallback((index: number, el: HTMLButtonElement | null) => {
-    if (el) itemRefs.current.set(index, el);
-    else itemRefs.current.delete(index);
-  }, []);
-
-  let globalIndex = 0;
   const sortedEntries = Object.entries(grouped).sort(([a], [b]) =>
     a.toLowerCase().localeCompare(b.toLowerCase())
   );
 
   return (
-    <div className="flex flex-col h-full bg-[--bg-secondary]">
-      {/* Header - matches toolbar height (py-2 + border) */}
-      <div className="flex items-center justify-between px-4 py-2 border-b border-[--border]">
-        <span className="text-sm font-medium text-primary">{BRAND.name}</span>
-        <button
-          onClick={toggleTheme}
-          className={clsx(
-            'p-1.5 rounded-md',
-            'text-tertiary hover:text-secondary hover:bg-[--bg-hover]',
-            'focus:outline-none'
-          )}
-          title={`Theme: ${resolvedTheme}`}
-        >
-          {resolvedTheme === 'dark' ? (
-            <MoonIcon className="w-4 h-4" />
-          ) : (
-            <SunIcon className="w-4 h-4" />
-          )}
-        </button>
-      </div>
-
-      {/* Search */}
-      <div className="px-3 py-3">
-        <div className="relative">
-          <SearchIcon className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-tertiary pointer-events-none" />
-          <input
-            ref={searchInputRef}
-            type="text"
-            placeholder="Search"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            className={clsx(
-              'w-full pl-8 pr-3 py-1.5 text-sm rounded-md',
-              'bg-[--bg-primary] text-primary placeholder:text-tertiary',
-              'border border-[--border-subtle]',
-              'focus:outline-none focus:border-[--border-strong]'
-            )}
-          />
-        </div>
-      </div>
-
-      {/* Dashboard Link */}
-      {onHealthClick && (
-        <div className="px-2 pb-3">
-          <button
-            onClick={onHealthClick}
-            className={clsx(
-              'w-full flex items-center gap-2 px-2 py-2 rounded-md text-sm',
-              'focus:outline-none',
-              showHealth
-                ? 'bg-[--bg-hover] text-primary'
-                : 'text-secondary hover:bg-[--bg-hover] hover:text-primary'
-            )}
-          >
-            <DashboardIcon className="w-4 h-4" />
-            <span>Dashboard</span>
-          </button>
+    <>
+      {/* Header */}
+      <Sidebar.Header>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+          <Text size="sm" weight="medium">{BRAND.name}</Text>
+          <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>
 
       {/* Component list */}
-      <nav className="flex-1 overflow-y-auto px-2 pb-4">
-        {sortedEntries.map(([category, items]) => {
-          const sortedItems = [...items].sort((a, b) =>
-            a.segment.meta.name.toLowerCase().localeCompare(b.segment.meta.name.toLowerCase())
-          );
-
-          return (
-            <div key={category} className="mb-1">
-              {/* Category divider */}
-              <div className="px-2 py-1.5 text-xs font-medium text-tertiary mt-2 first:mt-0">
-                {category}
-              </div>
-
-              {/* Items */}
-              <div className="space-y-0.5">
+      <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)
+              .sort((a, b) =>
+                a.segment.meta.name.toLowerCase().localeCompare(b.segment.meta.name.toLowerCase())
+              );
+
+            return (
+              <Sidebar.Section key={category} label={category}>
                 {sortedItems.map((item) => {
-                  const isActive = activeSegment === item.path;
-                  const currentIndex = globalIndex++;
-                  const isFocused = focusedIndex === currentIndex;
                   const nameIndices = highlightMap.get(item.path) || [];
 
                   return (
-                    <button
+                    <Sidebar.Item
                       key={item.path}
-                      ref={(el) => setItemRef(currentIndex, el)}
-                      onClick={() => onSelect(item.path)}
-                      onFocus={() => setFocusedIndex(currentIndex)}
-                      className={clsx(
-                        'w-full text-left px-2 py-1.5 rounded-md text-sm',
-                        'focus:outline-none',
-                        isActive
-                          ? 'bg-[--bg-hover] text-primary'
-                          : isFocused
-                            ? 'bg-[--bg-hover] text-primary'
-                            : 'text-secondary hover:bg-[--bg-hover] hover:text-primary'
-                      )}
+                      active={activeSegment === item.path}
+                      onClick={() => handleSelect(item.path)}
                     >
                       <HighlightedText
                         text={item.segment.meta.name}
                         indices={nameIndices}
                       />
-                    </button>
+                    </Sidebar.Item>
                   );
                 })}
-              </div>
-            </div>
-          );
-        })}
+              </Sidebar.Section>
+            );
+          })}
 
-        {Object.keys(grouped).length === 0 && (
-          <div className="px-2 py-8 text-center text-tertiary text-sm">
-            No results
-          </div>
-        )}
-      </nav>
+          {Object.keys(grouped).length === 0 && (
+            <div style={{ padding: '8px 32px', textAlign: 'center' }}>
+              <Text size="sm" color="tertiary">No results</Text>
+            </div>
+          )}
+        </Sidebar.Nav>
+      </div>
 
       {/* Footer */}
-      <div className="px-4 py-3 border-t border-[--border-subtle]">
-        <div className="text-xs text-tertiary">
-          {segments.length} components
-        </div>
-      </div>
-    </div>
+      <Sidebar.Footer>
+        <Badge size="sm">{segments.length} components</Badge>
+      </Sidebar.Footer>
+    </>
   );
 }