@fragments-sdk/cli 0.5.2 → 0.6.0

package/src/viewer/components/Layout.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { AppShell } from '@fragments/ui';
 
 interface LayoutProps {
   leftSidebar: ReactNode;
@@ -7,16 +8,13 @@ interface LayoutProps {
 
 export function Layout({ leftSidebar, 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="sidebar-inset">
+      <AppShell.Sidebar width="256px">
         {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,8 @@ 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 { SunIcon, MoonIcon, DashboardIcon } from './Icons.js';
+import { Sidebar, Input, Button, Badge, Text } from '@fragments/ui';
 
 // Fuzzy matching utility
 interface FuzzyMatch {
@@ -105,7 +105,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>
     );
@@ -132,7 +132,7 @@ export function LeftSidebar({ segments, activeSegment, onSelect, showHealth, onH
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const { theme, setTheme, resolvedTheme } = useTheme();
   const searchInputRef = useRef<HTMLInputElement>(null);
-  const itemRefs = useRef<Map<number, HTMLButtonElement>>(new Map());
+  const navRef = useRef<HTMLDivElement>(null);
 
   const debouncedSearch = useDebounce(search, 150);
 
@@ -197,8 +197,12 @@ export function LeftSidebar({ segments, activeSegment, onSelect, showHealth, onH
   }, [grouped]);
 
   useEffect(() => {
-    if (focusedIndex >= 0 && focusedIndex < flatItems.length) {
-      itemRefs.current.get(focusedIndex)?.focus();
+    if (focusedIndex >= 0 && focusedIndex < flatItems.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]);
 
@@ -252,140 +256,106 @@ export function LeftSidebar({ segments, activeSegment, onSelect, showHealth, onH
     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]'
+    <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>
+      </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 className="px-2 pb-3">
-          <button
+        <div style={{ padding: '0 8px 12px' }}>
+          <Button
+            variant="ghost"
+            size="sm"
             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'
-            )}
+            style={{
+              width: '100%',
+              justifyContent: 'flex-start',
+              ...(showHealth ? { backgroundColor: 'var(--bg-hover)', color: 'var(--text-primary)' } : {}),
+            }}
           >
-            <DashboardIcon className="w-4 h-4" />
-            <span>Dashboard</span>
-          </button>
+            <DashboardIcon />
+            <span style={{ marginLeft: '8px' }}>Dashboard</span>
+          </Button>
         </div>
       )}
 
       {/* 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}>
+        <Sidebar.Nav aria-label="Components">
+          {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)}
+                      active={activeSegment === item.path}
                       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'
-                      )}
                     >
                       <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>
+    </Sidebar>
   );
 }