@fragments-sdk/cli 0.9.0 → 0.9.1

package/src/viewer/components/App.tsx

@@ -3,8 +3,8 @@
  * Refactored for better performance and maintainability.
  */
 
-import { useState, useMemo, useEffect, useCallback, useRef, type CSSProperties, type ReactNode, type RefObject } from "react";
-import { BRAND, type FragmentDefinition, type FragmentVariant } from "../../core/index.js";
+import { useState, useMemo, useEffect, useCallback, useRef, type ReactNode } from "react";
+import type { FragmentDefinition, FragmentVariant } from "../../core/index.js";
 
 // Layout & Navigation
 import { Layout } from "./Layout.js";
@@ -13,8 +13,9 @@ import { CommandPalette } from "./CommandPalette.js";
 import { KeyboardShortcutsHelp } from "./KeyboardShortcutsHelp.js";
 import { useToast } from "./Toast.js";
 
-// Toolbar
-import { PreviewToolbar } from "./PreviewToolbar.js";
+// Toolbar & Header
+import { TopToolbar } from "./TopToolbar.js";
+import { ViewerHeader } from "./ViewerHeader.js";
 
 // Preview & Rendering
 import { PreviewArea } from "./PreviewArea.js";
@@ -25,21 +26,21 @@ import { HealthDashboard } from "./HealthDashboard.js";
 import { useAllFigmaUrls } from "./FigmaEmbed.js";
 import { ActionCapture } from "./ActionCapture.js";
 
+// Extracted sub-components
+import { PreviewAside } from "./PreviewAside.js";
+import { AllVariantsPreview } from "./AllVariantsPreview.js";
+import { ComponentDocView } from "./ComponentDocView.js";
+import { NoVariantsMessage } from "./NoVariantsMessage.js";
+import { EmptyVariantMessage } from "./EmptyVariantMessage.js";
+
 // Fragments UI
-import { Header, Stack, Text, Separator, Tooltip, Button, EmptyState, Box, Alert, Input, ThemeToggle, FragmentsLogo } from "@fragments-sdk/ui";
-import { DeviceMobile, GridFour, Rows } from "@phosphor-icons/react";
+import { Stack, Box, EmptyState } from "@fragments-sdk/ui";
 
 // Icons
-import { EmptyIcon, FigmaIcon, CompareIcon } from "./Icons.js";
-
+import { EmptyIcon } from "./Icons.js";
 
-function GitHubIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-    </svg>
-  );
-}
+// Utilities
+import { getVariantSectionId } from "./viewer-utils.js";
 
 // Hooks
 import { useAppState } from "../hooks/useAppState.js";
@@ -48,9 +49,7 @@ import { useFigmaIntegration } from "../hooks/useFigmaIntegration.js";
 import { useKeyboardShortcuts } from "../hooks/useKeyboardShortcuts.js";
 import { useActions } from "../hooks/useActions.js";
 import { useUrlState, findFragmentByName, findVariantIndex } from "../hooks/useUrlState.js";
-import { usePanelDock } from "./ResizablePanel.js";
 import { useTheme } from "./ThemeProvider.js";
-import { WebMCPStatusIndicator } from "./WebMCPStatusIndicator.js";
 import { ViewerStateSync } from "./ViewerStateSync.js";
 
 interface AppProps {
@@ -59,7 +58,13 @@ interface AppProps {
 
 export function App({ fragments }: AppProps) {
   // URL state management
-  const { state: urlState, setComponent: setUrlComponent, setVariant: setUrlVariant, setViewSettings: setUrlViewSettings, copyUrl } = useUrlState();
+  const {
+    state: urlState,
+    setComponent: setUrlComponent,
+    setVariant: setUrlVariant,
+    setViewSettings: setUrlViewSettings,
+    copyUrl,
+  } = useUrlState();
 
   // UI state (modals, panels, view modes)
   const { state: uiState, actions: uiActions } = useAppState();
@@ -72,16 +77,14 @@ export function App({ fragments }: AppProps) {
       customSize: { width: urlState.customWidth, height: urlState.customHeight },
     },
     onZoomChange: (zoom) => setUrlViewSettings({ zoom }),
-    onViewportChange: (vp, size) => setUrlViewSettings({
-      viewport: vp,
-      customWidth: size?.width,
-      customHeight: size?.height,
-    }),
+    onViewportChange: (vp, size) =>
+      setUrlViewSettings({
+        viewport: vp,
+        customWidth: size?.width,
+        customHeight: size?.height,
+      }),
   });
 
-  // Panel dock position
-  const panelDock = usePanelDock();
-
   // Get resolved theme from ThemeProvider for iframe preview
   const { resolvedTheme } = useTheme();
 
@@ -100,13 +103,13 @@ export function App({ fragments }: AppProps) {
   activeFragmentPathRef.current = activeFragmentPath;
 
   const [activeVariantIndex, setActiveVariantIndex] = useState<number>(() => {
-    const fragment = fragments.find(s => s.path === activeFragmentPath);
+    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 [searchQuery, setSearchQuery] = useState("");
   const searchInputRef = useRef<HTMLInputElement>(null);
 
   // Derived values
@@ -118,7 +121,6 @@ export function App({ fragments }: AppProps) {
   const variantCount = variants.length;
   const safeVariantIndex = variantCount > 0 ? Math.min(activeVariantIndex, variantCount - 1) : 0;
   const activeVariant = variants[safeVariantIndex];
-  const isAllVariantsMode = !urlState.variant;
   const figmaUrl = activeVariant?.figma || activeFragment?.fragment.meta.figma;
 
   // Figma integration
@@ -147,7 +149,12 @@ export function App({ fragments }: AppProps) {
       const timer = setTimeout(figmaIntegration.extractRenderedStyles, 100);
       return () => clearTimeout(timer);
     }
-  }, [uiState.showComparison, activeVariant, figmaIntegration.extractRenderedStyles, uiState.previewKey]);
+  }, [
+    uiState.showComparison,
+    activeVariant,
+    figmaIntegration.extractRenderedStyles,
+    uiState.previewKey,
+  ]);
 
   // Keep focused variant index in range when variant lists change.
   useEffect(() => {
@@ -185,25 +192,28 @@ export function App({ fragments }: AppProps) {
 
     const handleUpdate = (data: any) => {
       if (data?.updates?.length > 0) {
-        const paths = data.updates.map((u: any) => u.path.split('/').pop()).join(', ');
-        info('HMR Update', `Updated: ${paths}`);
+        const paths = data.updates.map((u: any) => u.path.split("/").pop()).join(", ");
+        info("HMR Update", `Updated: ${paths}`);
       }
     };
 
-    hot.on('vite:beforeUpdate', handleUpdate);
-    return () => hot.off?.('vite:beforeUpdate', handleUpdate);
+    hot.on("vite:beforeUpdate", handleUpdate);
+    return () => hot.off?.("vite:beforeUpdate", handleUpdate);
   }, [info]);
 
   // Navigation handlers
-  const handleSelectFragment = useCallback((path: string) => {
-    const fragment = fragments.find((s) => s.path === path);
-    const componentName = fragment?.fragment.meta.name || path;
+  const handleSelectFragment = useCallback(
+    (path: string) => {
+      const fragment = fragments.find((s) => s.path === path);
+      const componentName = fragment?.fragment.meta.name || path;
 
-    setActiveFragmentPath(path);
-    setActiveVariantIndex(0);
-    uiActions.setHealthDashboard(false);
-    setUrlComponent(componentName, null);
-  }, [fragments, setUrlComponent, uiActions]);
+      setActiveFragmentPath(path);
+      setActiveVariantIndex(0);
+      uiActions.setHealthDashboard(false);
+      setUrlComponent(componentName, null);
+    },
+    [fragments, setUrlComponent, uiActions]
+  );
 
   const scrollToVariantSection = useCallback(
     (index: number, behavior: ScrollBehavior = "smooth") => {
@@ -230,39 +240,31 @@ export function App({ fragments }: AppProps) {
     [variantCount, scrollToVariantSection]
   );
 
-  const handleSelectVariant = useCallback((index: number) => {
-    if (variantCount === 0) return;
-    const normalizedIndex = ((index % variantCount) + variantCount) % variantCount;
-    const variantName = variants[normalizedIndex]?.name;
-    setActiveVariantIndex(normalizedIndex);
-    setUrlVariant(variantName || null);
-  }, [variantCount, variants, setUrlVariant]);
-
-  const handleSelectAllVariants = useCallback(() => {
-    setUrlVariant(null);
-    requestAnimationFrame(() => {
-      const previewCanvas = document.getElementById("preview-canvas");
-      if (previewCanvas instanceof HTMLElement) {
-        previewCanvas.scrollTo({ top: 0, behavior: "smooth" });
-      }
-    });
-  }, [setUrlVariant]);
+  const handleSelectVariant = useCallback(
+    (index: number) => {
+      if (variantCount === 0) return;
+      const normalizedIndex = ((index % variantCount) + variantCount) % variantCount;
+      const variantName = variants[normalizedIndex]?.name;
+      setActiveVariantIndex(normalizedIndex);
+      setUrlVariant(variantName || null);
+    },
+    [variantCount, variants, setUrlVariant]
+  );
 
-  const handleSelectVariantLink = useCallback((index: number) => {
-    if (isAllVariantsMode) {
-      // In All mode, selecting a variant link exits All and opens that single variant.
-      handleSelectVariant(index);
-      return;
-    }
-    handleSelectVariant(index);
-  }, [handleSelectVariant, isAllVariantsMode]);
+  const handleSelectVariantLink = useCallback(
+    (index: number) => {
+      // Always scroll to the variant section in the docs-like view
+      focusVariantInAllMode(index, true);
+    },
+    [focusVariantInAllMode]
+  );
 
   // Copy link handler
   const handleCopyLink = useCallback(async () => {
     const copied = await copyUrl();
     if (copied) {
       uiActions.setLinkCopied(true);
-      success('Copied', 'Link copied to clipboard');
+      success("Copied", "Link copied to clipboard");
       setTimeout(() => uiActions.setLinkCopied(false), 2000);
     }
   }, [copyUrl, success, uiActions]);
@@ -270,49 +272,39 @@ export function App({ fragments }: AppProps) {
   // Sorted fragment paths for keyboard navigation
   const sortedFragmentPaths = useMemo(() => {
     return [...fragments]
-      .filter(s => s.fragment?.meta?.name)
+      .filter((s) => s.fragment?.meta?.name)
       .sort((a, b) => a.fragment.meta.name.localeCompare(b.fragment.meta.name))
-      .map(s => s.path);
+      .map((s) => s.path);
   }, [fragments]);
 
-  const currentFragmentIndex = sortedFragmentPaths.indexOf(activeFragmentPath || '');
+  const currentFragmentIndex = sortedFragmentPaths.indexOf(activeFragmentPath || "");
 
   // Keyboard shortcuts
   useKeyboardShortcuts(
     {
       nextComponent: () => {
-        const nextIndex = currentFragmentIndex < sortedFragmentPaths.length - 1 ? currentFragmentIndex + 1 : 0;
+        const nextIndex =
+          currentFragmentIndex < sortedFragmentPaths.length - 1 ? currentFragmentIndex + 1 : 0;
         handleSelectFragment(sortedFragmentPaths[nextIndex]);
       },
       prevComponent: () => {
-        const prevIndex = currentFragmentIndex > 0 ? currentFragmentIndex - 1 : sortedFragmentPaths.length - 1;
+        const prevIndex =
+          currentFragmentIndex > 0 ? currentFragmentIndex - 1 : sortedFragmentPaths.length - 1;
         handleSelectFragment(sortedFragmentPaths[prevIndex]);
       },
       nextVariant: () => {
         if (variantCount === 0) return;
         const nextIndex = activeVariantIndex < variantCount - 1 ? activeVariantIndex + 1 : 0;
-        if (isAllVariantsMode) {
-          focusVariantInAllMode(nextIndex, true);
-          return;
-        }
-        handleSelectVariant(nextIndex);
+        focusVariantInAllMode(nextIndex, true);
       },
       prevVariant: () => {
         if (variantCount === 0) return;
         const prevIndex = activeVariantIndex > 0 ? activeVariantIndex - 1 : variantCount - 1;
-        if (isAllVariantsMode) {
-          focusVariantInAllMode(prevIndex, true);
-          return;
-        }
-        handleSelectVariant(prevIndex);
+        focusVariantInAllMode(prevIndex, true);
       },
       goToVariant: (index) => {
         if (index >= variantCount) return;
-        if (isAllVariantsMode) {
-          focusVariantInAllMode(index, true);
-          return;
-        }
-        handleSelectVariant(index);
+        focusVariantInAllMode(index, true);
       },
       toggleTheme: viewSettings.toggleTheme,
       togglePanel: uiActions.togglePanel,
@@ -324,7 +316,7 @@ export function App({ fragments }: AppProps) {
       escape: () => {
         if (document.activeElement === searchInputRef.current) {
           if (searchQuery) {
-            setSearchQuery('');
+            setSearchQuery("");
           } else {
             searchInputRef.current.blur();
           }
@@ -344,9 +336,28 @@ export function App({ fragments }: AppProps) {
       <ActionCapture onAction={useActionsRef.current.logAction}>
         <FragmentRenderer variant={variant}>
           {(content, isLoading, error) => {
-            if (isLoading) return <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}><LoaderIndicator /></div>;
-            if (error) return <EmptyVariantMessage reason={`Error: ${error.message}`} variantName={variant.name} hint="Check the console for the full error stack trace." />;
-            if (content === null || content === undefined) return <EmptyVariantMessage reason="render() returned null or undefined" variantName={variant.name} hint="The variant's render function didn't return any JSX." />;
+            if (isLoading)
+              return (
+                <Stack align="center" justify="center" style={{ padding: "32px" }}>
+                  <LoaderIndicator />
+                </Stack>
+              );
+            if (error)
+              return (
+                <EmptyVariantMessage
+                  reason={`Error: ${error.message}`}
+                  variantName={variant.name}
+                  hint="Check the console for the full error stack trace."
+                />
+              );
+            if (content === null || content === undefined)
+              return (
+                <EmptyVariantMessage
+                  reason="render() returned null or undefined"
+                  variantName={variant.name}
+                  hint="The variant's render function didn't return any JSX."
+                />
+              );
             return content;
           }}
         </FragmentRenderer>
@@ -367,7 +378,10 @@ export function App({ fragments }: AppProps) {
   return (
     <>
       <ViewerStateSync fragments={fragments} activeVariantIndex={safeVariantIndex} />
-      <KeyboardShortcutsHelp isOpen={uiState.showShortcutsHelp} onClose={() => uiActions.setShortcutsHelp(false)} />
+      <KeyboardShortcutsHelp
+        isOpen={uiState.showShortcutsHelp}
+        onClose={() => uiActions.setShortcutsHelp(false)}
+      />
       <CommandPalette
         isOpen={uiState.showCommandPalette}
         onClose={() => uiActions.setCommandPalette(false)}
@@ -415,14 +429,12 @@ export function App({ fragments }: AppProps) {
           />
         }
         aside={
-          activeFragment && !uiState.showHealthDashboard ? (
+          uiState.showAside && activeFragment && !uiState.showHealthDashboard ? (
             <PreviewAside
               fragment={activeFragment.fragment}
               variants={variants}
               focusedVariantIndex={safeVariantIndex}
-              isAllVariantsMode={isAllVariantsMode}
               activePanel={uiState.activePanel}
-              onSelectAllVariants={handleSelectAllVariants}
               onSelectVariant={handleSelectVariantLink}
               onCopyLink={handleCopyLink}
               onShowShortcuts={uiActions.toggleShortcutsHelp}
@@ -431,12 +443,12 @@ export function App({ fragments }: AppProps) {
         }
       >
         {uiState.showHealthDashboard ? (
-          <div style={{ height: '100%', overflow: 'auto', backgroundColor: 'var(--bg-primary)' }}>
-            <Box padding="lg" style={{ maxWidth: '896px', margin: '0 auto' }}>
+          <Box height="100%" overflow="auto" background="primary">
+            <Box padding="lg" style={{ maxWidth: "896px", margin: "0 auto" }}>
               <HealthDashboard
                 fragments={fragments}
                 onNavigate={(componentName) => {
-                  const target = fragments.find(s => s.fragment.meta.name === componentName);
+                  const target = fragments.find((s) => s.fragment.meta.name === componentName);
                   if (target) {
                     uiActions.setHealthDashboard(false);
                     handleSelectFragment(target.path);
@@ -444,40 +456,39 @@ export function App({ fragments }: AppProps) {
                 }}
               />
             </Box>
-          </div>
+          </Box>
         ) : activeFragment ? (
-          <div id="preview-layout" style={{ display: 'flex', height: '100%', flexDirection: panelDock === "bottom" ? 'column' : 'row' }}>
+          <Stack id="preview-layout" style={{ height: "100%" }}>
             {/* Main Content Area */}
-            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, minHeight: 0 }}>
+            <Stack style={{ flex: 1, minWidth: 0, minHeight: 0 }}>
               {/* Preview Area */}
-              <div
-                id="preview-canvas"
-                style={{
-                  flex: 1,
-                  overflow: 'auto',
-                  position: 'relative',
-                }}
-              >
+              <Box id="preview-canvas" overflow="auto" style={{ flex: 1, position: "relative" }}>
                 {variantCount === 0 ? (
                   <NoVariantsMessage fragment={activeFragment?.fragment} />
-                ) : isAllVariantsMode && !uiState.showMatrixView && !uiState.showMultiViewport ? (
-                  <AllVariantsPreview
+                ) : uiState.showMatrixView ? (
+                  <PreviewArea
                     componentName={activeFragment.fragment.meta.name}
                     fragmentPath={activeFragment.path}
+                    variant={activeVariant}
                     variants={variants}
-                    focusedVariantIndex={safeVariantIndex}
                     zoom={viewSettings.zoom}
                     viewport={viewSettings.viewport}
                     customSize={viewSettings.customSize}
                     previewTheme={resolvedTheme}
+                    showMatrixView={true}
+                    showMultiViewport={false}
                     showComparison={uiState.showComparison}
+                    figmaUrl={figmaUrl}
                     allFigmaUrls={allFigmaUrls}
-                    fallbackFigmaUrl={activeFragment.fragment.meta.figma}
+                    onSelectVariant={(index) => {
+                      uiActions.setMatrixView(false);
+                      handleSelectVariant(index);
+                    }}
                     onRetry={uiActions.incrementPreviewKey}
-                    renderVariantContent={renderVariantWithProps}
-                    previewKeyBase={`${activeFragmentPath}-${uiState.previewKey}`}
+                    renderContent={() => renderVariantWithProps(activeVariant)}
+                    previewKey={`${activeFragmentPath}-${safeVariantIndex}-${uiState.previewKey}`}
                   />
-                ) : (
+                ) : uiState.showMultiViewport ? (
                   <PreviewArea
                     componentName={activeFragment.fragment.meta.name}
                     fragmentPath={activeFragment.path}
@@ -487,55 +498,79 @@ export function App({ fragments }: AppProps) {
                     viewport={viewSettings.viewport}
                     customSize={viewSettings.customSize}
                     previewTheme={resolvedTheme}
-                    showMatrixView={uiState.showMatrixView}
-                    showMultiViewport={uiState.showMultiViewport}
+                    showMatrixView={false}
+                    showMultiViewport={true}
                     showComparison={uiState.showComparison}
                     figmaUrl={figmaUrl}
                     allFigmaUrls={allFigmaUrls}
                     onSelectVariant={(index) => {
-                      uiActions.setMatrixView(false);
                       handleSelectVariant(index);
                     }}
                     onRetry={uiActions.incrementPreviewKey}
                     renderContent={() => renderVariantWithProps(activeVariant)}
                     previewKey={`${activeFragmentPath}-${safeVariantIndex}-${uiState.previewKey}`}
                   />
+                ) : (
+                  <Box
+                    style={{
+                      padding: "var(--fui-space-6) var(--fui-space-8)",
+                    }}
+                  >
+                    <ComponentDocView
+                      fragment={activeFragment}
+                      fragments={fragments}
+                      renderVariantContent={renderVariantWithProps}
+                      onNavigateToComponent={(name) => {
+                        const target = fragments.find((s) => s.fragment.meta.name === name);
+                        if (target) handleSelectFragment(target.path);
+                      }}
+                      zoom={viewSettings.zoom}
+                      viewport={viewSettings.viewport}
+                      customSize={viewSettings.customSize}
+                      previewTheme={resolvedTheme}
+                      showComparison={uiState.showComparison}
+                      allFigmaUrls={allFigmaUrls}
+                      onRetry={uiActions.incrementPreviewKey}
+                      previewKeyBase={`${activeFragmentPath}-${uiState.previewKey}`}
+                    />
+                  </Box>
                 )}
-              </div>
-            </div>
+              </Box>
+            </Stack>
 
-            {/* Bottom Panel */}
-            <div id="preview-tools">
-              {uiState.panelOpen && activeVariant && (
-                <BottomPanel
-                  fragment={activeFragment.fragment}
-                  variant={activeVariant}
-                  fragments={fragments}
-                  activePanel={uiState.activePanel}
-                  onPanelChange={uiActions.setActivePanel}
-                  figmaUrl={figmaUrl}
-                  figmaStyles={figmaIntegration.figmaStyles.status === 'success' ? figmaIntegration.figmaStyles.styles || null : null}
-                  renderedStyles={figmaIntegration.renderedStyles}
-                  figmaLoading={figmaIntegration.isLoading}
-                  figmaError={figmaIntegration.errorMessage}
-                  onFetchFigma={figmaIntegration.fetchFigmaStyles}
-                  onRefreshRendered={figmaIntegration.extractRenderedStyles}
-                  actionLogs={actionLogs}
-                  onClearActionLogs={clearActionLogs}
-                  onNavigateToComponent={(name) => {
-                    const target = fragments.find(s => s.fragment.meta.name === name);
-                    if (target) handleSelectFragment(target.path);
-                  }}
-                  previewKey={uiState.previewKey}
-                  fragmentKey={`${activeFragmentPath}-${safeVariantIndex}`}
-                />
-              )}
-            </div>
-          </div>
+            {activeVariant && (
+              <BottomPanel
+                fragment={activeFragment.fragment}
+                variant={activeVariant}
+                fragments={fragments}
+                open={uiState.panelOpen}
+                onOpenChange={uiActions.setPanelOpen}
+                activePanel={uiState.activePanel}
+                onPanelChange={uiActions.setActivePanel}
+                figmaUrl={figmaUrl}
+                figmaStyles={
+                  figmaIntegration.figmaStyles.status === "success"
+                    ? figmaIntegration.figmaStyles.styles || null
+                    : null
+                }
+                renderedStyles={figmaIntegration.renderedStyles}
+                figmaLoading={figmaIntegration.isLoading}
+                figmaError={figmaIntegration.errorMessage}
+                onFetchFigma={figmaIntegration.fetchFigmaStyles}
+                onRefreshRendered={figmaIntegration.extractRenderedStyles}
+                onNavigateToComponent={(name) => {
+                  const target = fragments.find((s) => s.fragment.meta.name === name);
+                  if (target) handleSelectFragment(target.path);
+                }}
+                previewKey={uiState.previewKey}
+                fragmentKey={`${activeFragmentPath}-${safeVariantIndex}`}
+              />
+            )}
+          </Stack>
         ) : (
-          <EmptyState style={{ height: '100%' }}>
+          <EmptyState style={{ height: "100%" }}>
             <EmptyState.Icon>
-              <EmptyIcon style={{ width: '48px', height: '48px' }} />
+              <EmptyIcon style={{ width: "48px", height: "48px" }} />
             </EmptyState.Icon>
             <EmptyState.Title>No component selected</EmptyState.Title>
             <EmptyState.Description>Select a component from the sidebar</EmptyState.Description>
@@ -545,591 +580,3 @@ export function App({ fragments }: AppProps) {
     </>
   );
 }
-
-// Top Toolbar Component
-interface TopToolbarProps {
-  fragment: { path: string; fragment: FragmentDefinition };
-  viewSettings: ReturnType<typeof useViewSettings>;
-  uiState: ReturnType<typeof useAppState>['state'];
-  uiActions: ReturnType<typeof useAppState>['actions'];
-  figmaUrl?: string;
-  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>;
-}
-
-interface PreviewAsideProps {
-  fragment: FragmentDefinition;
-  variants: FragmentVariant[];
-  focusedVariantIndex: number;
-  isAllVariantsMode: boolean;
-  activePanel: string;
-  onSelectAllVariants: () => void;
-  onSelectVariant: (index: number) => void;
-  onCopyLink: () => void;
-  onShowShortcuts: () => void;
-}
-
-function HeaderSearch({ value, onChange, inputRef }: HeaderSearchProps) {
-  return (
-    <Header.Search expandable>
-      <Input
-        ref={inputRef}
-        value={value}
-        onChange={onChange}
-        placeholder="Search components"
-        aria-label="Search components"
-        size="sm"
-        style={{ width: '240px' }}
-      />
-    </Header.Search>
-  );
-}
-
-function ViewerHeader({ showHealth, searchQuery, onSearchChange, searchInputRef }: ViewerHeaderProps) {
-  const { setTheme, resolvedTheme } = useTheme();
-  return (
-    <Header aria-label="Fragments viewer header">
-      <Header.Trigger />
-      <Header.Brand>
-        <Stack direction="row" gap="sm" align="center">
-          <FragmentsLogo size={20} />
-          <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.Actions>
-        <WebMCPStatusIndicator />
-        <ThemeToggle
-          size="sm"
-          value={resolvedTheme}
-          onValueChange={(value) => setTheme(value)}
-          aria-label={`Theme: ${resolvedTheme}`}
-        />
-        <a
-          href="https://github.com/ConanMcN/fragments"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '32px',
-            height: '32px',
-            borderRadius: 'var(--radius-md, 6px)',
-            color: 'var(--text-secondary)',
-            transition: 'background-color 150ms ease, color 150ms ease',
-          }}
-          aria-label="View on GitHub"
-        >
-          <GitHubIcon />
-        </a>
-      </Header.Actions>
-    </Header>
-  );
-}
-
-function PreviewAside({
-  fragment,
-  variants,
-  focusedVariantIndex,
-  isAllVariantsMode,
-  activePanel,
-  onSelectAllVariants,
-  onSelectVariant,
-  onCopyLink,
-  onShowShortcuts,
-}: PreviewAsideProps) {
-  const focusedVariant = variants[focusedVariantIndex] || null;
-
-  const baseLinkStyle: CSSProperties = {
-    color: 'var(--text-secondary)',
-    textDecoration: 'none',
-    fontSize: '13px',
-    borderRadius: '6px',
-    padding: '4px 8px',
-    display: 'block',
-  };
-
-  const getLinkStyle = (isActive = false): CSSProperties => (
-    isActive
-      ? { ...baseLinkStyle, color: 'var(--text-primary)', backgroundColor: 'var(--bg-hover)' }
-      : baseLinkStyle
-  );
-
-  return (
-    <Box padding="md" style={{ position: 'sticky', top: '80px' }}>
-      <Stack gap="md">
-        <Stack gap="xs">
-          <Text size="xs" color="tertiary" style={{ textTransform: 'uppercase', letterSpacing: '0.08em' }}>
-            On this page
-          </Text>
-          <a href="#preview-canvas" style={baseLinkStyle}>
-            Preview
-          </a>
-          <a href="#preview-tools" style={baseLinkStyle}>
-            Panels
-          </a>
-          {variants.length > 0 && (
-            <>
-              <Text size="xs" color="tertiary" style={{ textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: '8px' }}>
-                Variants
-              </Text>
-              <a
-                href="#preview-canvas"
-                style={getLinkStyle(isAllVariantsMode)}
-                onClick={(event) => {
-                  event.preventDefault();
-                  onSelectAllVariants();
-                }}
-              >
-                All
-              </a>
-              {variants.map((variant, index) => {
-                const active = index === focusedVariantIndex;
-                const anchorId = getVariantSectionId(fragment.meta.name, variant.name);
-
-                return (
-                  <a
-                    key={variant.name}
-                    href={`#${anchorId}`}
-                    style={getLinkStyle(active)}
-                    onClick={(event) => {
-                      event.preventDefault();
-                      onSelectVariant(index);
-                    }}
-                  >
-                    {variant.name}
-                  </a>
-                );
-              })}
-            </>
-          )}
-        </Stack>
-        <Separator />
-        <Stack gap="xs">
-          <Text size="sm" weight="medium">{fragment.meta.name}</Text>
-          <Text size="xs" color="secondary">
-            {isAllVariantsMode
-              ? `Variant: All${focusedVariant ? ` (focused: ${focusedVariant.name})` : ''}`
-              : focusedVariant ? `Variant: ${focusedVariant.name}` : 'Select a variant'}
-          </Text>
-          <Text size="xs" color="tertiary">
-            Active panel: {activePanel}
-          </Text>
-        </Stack>
-        <Separator />
-        <Stack gap="xs">
-          <Button variant="ghost" size="sm" onClick={onCopyLink}>
-            Copy Link
-          </Button>
-          <Button variant="ghost" size="sm" onClick={onShowShortcuts}>
-            Keyboard Shortcuts
-          </Button>
-        </Stack>
-      </Stack>
-    </Box>
-  );
-}
-
-function TopToolbar({
-  fragment,
-  viewSettings,
-  uiState,
-  uiActions,
-  figmaUrl,
-  searchQuery,
-  onSearchChange,
-  searchInputRef,
-}: TopToolbarProps) {
-  const { setTheme, resolvedTheme } = useTheme();
-  return (
-    <Header aria-label="Component preview toolbar">
-      <Header.Trigger />
-      <Header.Brand>
-        <Stack direction="row" align="center" gap="sm">
-          <FragmentsLogo size={20} />
-          <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}
-          onZoomChange={viewSettings.setZoom}
-        />
-        <Separator orientation="vertical" style={{ height: '16px' }} />
-        <Tooltip content={uiState.showMatrixView ? "Disable matrix view" : "Enable matrix view"}>
-          <Button
-            variant="ghost"
-            size="sm"
-            aria-pressed={uiState.showMatrixView}
-            aria-label="Toggle matrix view"
-            onClick={() => uiActions.setMatrixView(!uiState.showMatrixView)}
-            style={uiState.showMatrixView ? { color: 'var(--color-accent)', backgroundColor: 'var(--bg-hover)' } : {}}
-          >
-            <GridFour size={16} />
-          </Button>
-        </Tooltip>
-        <Tooltip content={uiState.showMultiViewport ? "Disable responsive view" : "Enable responsive view"}>
-          <Button
-            variant="ghost"
-            size="sm"
-            aria-pressed={uiState.showMultiViewport}
-            aria-label="Toggle responsive view"
-            onClick={() => uiActions.setMultiViewport(!uiState.showMultiViewport)}
-            style={uiState.showMultiViewport ? { color: 'var(--color-accent)', backgroundColor: 'var(--bg-hover)' } : {}}
-          >
-            <DeviceMobile size={16} />
-          </Button>
-        </Tooltip>
-        <Tooltip content={uiState.panelOpen ? "Hide addons panel" : "Show addons panel"}>
-          <Button
-            variant="ghost"
-            size="sm"
-            aria-pressed={uiState.panelOpen}
-            aria-label="Toggle addons panel"
-            onClick={uiActions.togglePanel}
-            style={uiState.panelOpen ? { color: 'var(--color-accent)', backgroundColor: 'var(--bg-hover)' } : {}}
-          >
-            <Rows size={16} />
-          </Button>
-        </Tooltip>
-        <Separator orientation="vertical" style={{ height: '16px' }} />
-        {figmaUrl && (
-          <>
-            <Tooltip content={uiState.showComparison ? "Hide Figma comparison" : "Compare with Figma design"}>
-              <Button
-                onClick={uiActions.toggleComparison}
-                variant="ghost"
-                size="sm"
-                style={uiState.showComparison ? { color: 'var(--color-accent)', backgroundColor: 'var(--bg-hover)' } : {}}
-              >
-                <CompareIcon style={{ width: '16px', height: '16px' }} />
-              </Button>
-            </Tooltip>
-            <Tooltip content="View in Figma">
-              <Button
-                onClick={() => window.open(figmaUrl, '_blank', 'noopener,noreferrer')}
-                variant="ghost"
-                size="sm"
-              >
-                <FigmaIcon style={{ width: '16px', height: '16px' }} />
-              </Button>
-            </Tooltip>
-            <Separator orientation="vertical" style={{ height: '16px' }} />
-          </>
-        )}
-        <WebMCPStatusIndicator />
-        <ThemeToggle
-          size="sm"
-          value={resolvedTheme}
-          onValueChange={(value) => setTheme(value)}
-          aria-label={`Theme: ${resolvedTheme}`}
-        />
-        <a
-          href="https://github.com/ConanMcN/fragments"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '32px',
-            height: '32px',
-            borderRadius: 'var(--radius-md, 6px)',
-            color: 'var(--text-secondary)',
-            transition: 'background-color 150ms ease, color 150ms ease',
-          }}
-          aria-label="View on GitHub"
-        >
-          <GitHubIcon />
-        </a>
-      </Header.Actions>
-    </Header>
-  );
-}
-
-function normalizeAnchorSegment(value: string): string {
-  const normalized = value
-    .toLowerCase()
-    .trim()
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "");
-  return normalized || "variant";
-}
-
-function getVariantSectionId(componentName: string, variantName: string): string {
-  return `preview-${normalizeAnchorSegment(componentName)}-${normalizeAnchorSegment(variantName)}`;
-}
-
-interface AllVariantsPreviewProps {
-  componentName: string;
-  fragmentPath: string;
-  variants: FragmentVariant[];
-  focusedVariantIndex: number;
-  zoom: ReturnType<typeof useViewSettings>["zoom"];
-  viewport: ReturnType<typeof useViewSettings>["viewport"];
-  customSize: ReturnType<typeof useViewSettings>["customSize"];
-  previewTheme: ReturnType<typeof useTheme>["resolvedTheme"];
-  showComparison: boolean;
-  allFigmaUrls: string[];
-  fallbackFigmaUrl?: string;
-  onRetry: () => void;
-  renderVariantContent: (variant: FragmentVariant) => ReactNode;
-  previewKeyBase: string;
-}
-
-function AllVariantsPreview({
-  componentName,
-  fragmentPath,
-  variants,
-  focusedVariantIndex,
-  zoom,
-  viewport,
-  customSize,
-  previewTheme,
-  showComparison,
-  allFigmaUrls,
-  fallbackFigmaUrl,
-  onRetry,
-  renderVariantContent,
-  previewKeyBase,
-}: AllVariantsPreviewProps) {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', padding: '20px' }}>
-      {variants.map((variant, index) => {
-        const isFocused = index === focusedVariantIndex;
-
-        return (
-          <section
-            id={getVariantSectionId(componentName, variant.name)}
-            key={variant.name}
-            style={{
-              border: '1px solid var(--border)',
-              borderColor: isFocused ? 'var(--color-accent)' : 'var(--border)',
-              borderRadius: '10px',
-              overflow: 'hidden',
-              backgroundColor: 'var(--bg-primary)',
-              boxShadow: isFocused ? '0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent)' : undefined,
-            }}
-          >
-            <Stack direction="row" align="baseline" gap="sm" style={{ padding: '12px 14px', borderBottom: '1px solid var(--border-subtle)', backgroundColor: 'var(--bg-secondary)' }}>
-              <Text size="sm" weight="medium">{variant.name}</Text>
-              <Text size="xs" color="secondary">{variant.description}</Text>
-            </Stack>
-            <PreviewArea
-              componentName={componentName}
-              fragmentPath={fragmentPath}
-              variant={variant}
-              variants={variants}
-              zoom={zoom}
-              viewport={viewport}
-              customSize={customSize}
-              previewTheme={previewTheme}
-              showMatrixView={false}
-              showMultiViewport={false}
-              showComparison={showComparison}
-              figmaUrl={variant.figma || fallbackFigmaUrl}
-              allFigmaUrls={allFigmaUrls}
-              onSelectVariant={() => {}}
-              onRetry={onRetry}
-              renderContent={() => renderVariantContent(variant)}
-              previewKey={`${previewKeyBase}-${index}`}
-            />
-          </section>
-        );
-      })}
-    </div>
-  );
-}
-
-// No variants message
-interface NoVariantsMessageProps {
-  fragment?: FragmentDefinition;
-}
-
-function NoVariantsMessage({ fragment }: NoVariantsMessageProps) {
-  // Check for load error (missing dependencies, schema errors, etc.)
-  const loadError = (fragment as any)?._loadError;
-  if (loadError) {
-    return <LoadErrorMessage error={loadError} componentName={fragment?.meta?.name} />;
-  }
-
-  const skippedVariants = (fragment?._generated as any)?.skippedVariants;
-
-  if (!skippedVariants || skippedVariants.length === 0) {
-    return (
-      <EmptyState style={{ height: '100%' }}>
-        <EmptyState.Description>No variants defined</EmptyState.Description>
-      </EmptyState>
-    );
-  }
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', padding: '24px' }}>
-      <Alert variant="info">
-        <Alert.Body>
-          <Alert.Title>
-            {skippedVariants.length} variant{skippedVariants.length === 1 ? '' : 's'} skipped
-          </Alert.Title>
-          <Alert.Content>
-            <Stack direction="column" gap="sm">
-              <Text size="xs" color="secondary">
-                These variants couldn't be rendered because they use syntax the parser doesn't support yet:
-              </Text>
-              <ul style={{ marginTop: '4px', marginLeft: '16px', listStyleType: 'disc' }}>
-                {skippedVariants.map((sv: any, i: number) => (
-                  <li key={i}>
-                    <Text size="xs" color="secondary">
-                      <Text as="span" size="xs" weight="semibold">{sv.name}:</Text>{' '}
-                      <Text as="span" size="xs" color="tertiary">{sv.reason}</Text>
-                    </Text>
-                  </li>
-                ))}
-              </ul>
-            </Stack>
-          </Alert.Content>
-        </Alert.Body>
-      </Alert>
-    </div>
-  );
-}
-
-// Load error message — shown when a fragment failed to import (missing deps, schema errors, etc.)
-function LoadErrorMessage({ error, componentName }: { error: { message: string; dependencies: string[] }; componentName?: string }) {
-  const deps = error.dependencies || [];
-  const errorMessage = error.message || 'Unknown error';
-
-  // Determine if the error is a missing module/dependency issue
-  const isModuleError = /Failed to resolve import|Cannot find module|Module not found|does not provide an export/.test(errorMessage);
-
-  // Only suggest packages if the error is actually about missing modules
-  let suggestedPackages: string[] = [];
-  if (isModuleError) {
-    if (deps.length > 0) {
-      suggestedPackages = [...deps];
-    } else {
-      const match = errorMessage.match(/Failed to resolve import ["']([^"']+)["']/);
-      if (match) {
-        suggestedPackages = [match[1]];
-      }
-    }
-  }
-
-  const hasMissingDeps = suggestedPackages.length > 0;
-  const installCmd = `pnpm add ${suggestedPackages.join(' ')}`;
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', padding: '24px' }}>
-      <Alert variant="warning">
-        <Alert.Body>
-          <Alert.Title>
-            {hasMissingDeps ? 'Missing Dependencies' : 'Failed to Load'}
-          </Alert.Title>
-          <Alert.Content>
-            <Stack direction="column" gap="sm">
-              {hasMissingDeps ? (
-                <>
-                  <Text size="xs" color="secondary">
-                    {componentName ? `${componentName} requires` : 'This component requires'} packages that are not installed in your project.
-                  </Text>
-                  <Text size="xs" weight="semibold" color="secondary">Install with:</Text>
-                  <code style={{
-                    display: 'block',
-                    padding: '8px 12px',
-                    borderRadius: '6px',
-                    backgroundColor: 'var(--bg-tertiary, #f3f4f6)',
-                    fontFamily: 'monospace',
-                    fontSize: '12px',
-                    color: 'var(--text-primary, #111827)',
-                    userSelect: 'all',
-                  }}>
-                    {installCmd}
-                  </code>
-                  <Text size="xs" color="tertiary">
-                    After installing, restart the dev server.
-                  </Text>
-                </>
-              ) : (
-                <>
-                  <Text size="xs" color="secondary">
-                    {componentName ? `${componentName} couldn't` : 'This component couldn\'t'} be loaded. This may be due to a schema validation error or missing imports.
-                  </Text>
-                  <Text size="xs" weight="semibold" color="secondary">Error:</Text>
-                  <pre style={{
-                    padding: '8px 12px',
-                    borderRadius: '6px',
-                    backgroundColor: 'var(--bg-tertiary, #f3f4f6)',
-                    fontFamily: 'monospace',
-                    fontSize: '11px',
-                    color: 'var(--text-secondary, #374151)',
-                    whiteSpace: 'pre-wrap',
-                    wordBreak: 'break-word',
-                    margin: 0,
-                    maxHeight: '200px',
-                    overflow: 'auto',
-                  }}>
-                    {errorMessage}
-                  </pre>
-                </>
-              )}
-            </Stack>
-          </Alert.Content>
-        </Alert.Body>
-      </Alert>
-    </div>
-  );
-}
-
-// Empty variant message
-interface EmptyVariantMessageProps {
-  reason: string;
-  variantName: string;
-  hint?: string;
-}
-
-function EmptyVariantMessage({ reason, variantName, hint }: EmptyVariantMessageProps) {
-  return (
-    <Alert variant="warning">
-      <Alert.Body>
-        <Alert.Title>Variant "{variantName}" rendered empty</Alert.Title>
-        <Alert.Content>
-          <Stack direction="column" gap="sm">
-            <Text size="xs" color="secondary">{reason}</Text>
-            {hint && (
-              <Text size="xs" color="tertiary">
-                <Text as="span" size="xs" weight="semibold">Tip:</Text> {hint}
-              </Text>
-            )}
-            <div>
-              <Text size="xs" color="tertiary" weight="semibold">Common causes:</Text>
-              <ul style={{ marginTop: '4px', marginLeft: '16px', listStyleType: 'disc' }}>
-                <li><Text size="xs" color="secondary">Component requires props that weren't provided</Text></li>
-                <li><Text size="xs" color="secondary">Component renders conditionally and conditions aren't met</Text></li>
-                <li><Text size="xs" color="secondary">Story args reference variables that don't exist in this context</Text></li>
-              </ul>
-            </div>
-          </Stack>
-        </Alert.Content>
-      </Alert.Body>
-    </Alert>
-  );
-}