@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/App.tsx

@@ -3,9 +3,8 @@
  * Refactored for better performance and maintainability.
  */
 
-import { useState, useMemo, useEffect, useCallback, useRef } from "react";
-import type { SegmentDefinition } from "../../core/index.js";
-import clsx from "clsx";
+import { useState, useMemo, useEffect, useCallback, useRef, type RefObject } from "react";
+import { BRAND, type SegmentDefinition } from "../../core/index.js";
 
 // Layout & Navigation
 import { Layout } from "./Layout.js";
@@ -13,7 +12,7 @@ import { LeftSidebar } from "./LeftSidebar.js";
 import { VariantTabs } from "./VariantTabs.js";
 import { CommandPalette } from "./CommandPalette.js";
 import { KeyboardShortcutsHelp } from "./KeyboardShortcutsHelp.js";
-import { Toast, type ToastMessage } from "./Toast.js";
+import { useToast } from "./Toast.js";
 
 // Toolbar
 import { PreviewToolbar, getBackgroundStyle } from "./PreviewToolbar.js";
@@ -28,8 +27,11 @@ import { HealthDashboard } from "./HealthDashboard.js";
 import { useAllFigmaUrls } from "./FigmaEmbed.js";
 import { ActionCapture } from "./ActionCapture.js";
 
+// Fragments UI
+import { Header, Stack, Text, Separator, Tooltip, Button, EmptyState, Box, Alert, ScrollArea, Input } from "@fragments/ui";
+
 // Icons
-import { EmptyIcon, ExternalLinkIcon, CameraIcon, FigmaIcon, CompareIcon, CheckIcon, LinkIcon, GridIcon, DevicesIcon } from "./Icons.js";
+import { EmptyIcon, ExternalLinkIcon, FigmaIcon, CompareIcon, CheckIcon, LinkIcon, GridIcon, DevicesIcon } from "./Icons.js";
 
 // Hooks
 import { useAppState } from "../hooks/useAppState.js";
@@ -78,15 +80,8 @@ export function App({ segments }: AppProps) {
   // Get resolved theme from ThemeProvider for iframe preview
   const { resolvedTheme } = useTheme();
 
-  // Toast notifications
-  const [toasts, setToasts] = useState<ToastMessage[]>([]);
-  const addToast = useCallback((type: ToastMessage['type'], message: string, duration?: number) => {
-    const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
-    setToasts(prev => [...prev, { id, type, message, duration }]);
-  }, []);
-  const dismissToast = useCallback((id: string) => {
-    setToasts(prev => prev.filter(t => t.id !== id));
-  }, []);
+  // Toast notifications (via Fragments UI ToastProvider)
+  const { info, success } = useToast();
 
   // Navigation state
   const [activeSegmentPath, setActiveSegmentPath] = useState<string | null>(() => {
@@ -104,6 +99,8 @@ export function App({ segments }: AppProps) {
     }
     return 0;
   });
+  const [searchQuery, setSearchQuery] = useState('');
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   // Derived values
   const activeSegment = useMemo(
@@ -161,13 +158,13 @@ export function App({ segments }: AppProps) {
     const handleUpdate = (data: any) => {
       if (data?.updates?.length > 0) {
         const paths = data.updates.map((u: any) => u.path.split('/').pop()).join(', ');
-        addToast('info', `Updated: ${paths}`, 2000);
+        info('HMR Update', `Updated: ${paths}`);
       }
     };
 
     hot.on('vite:beforeUpdate', handleUpdate);
     return () => hot.off?.('vite:beforeUpdate', handleUpdate);
-  }, [addToast]);
+  }, [info]);
 
   // Navigation handlers
   const handleSelectSegment = useCallback((path: string) => {
@@ -189,13 +186,18 @@ export function App({ segments }: AppProps) {
 
   // Copy link handler
   const handleCopyLink = useCallback(async () => {
-    const success = await copyUrl();
-    if (success) {
+    const copied = await copyUrl();
+    if (copied) {
       uiActions.setLinkCopied(true);
-      addToast('success', 'Link copied to clipboard', 2000);
+      success('Copied', 'Link copied to clipboard');
       setTimeout(() => uiActions.setLinkCopied(false), 2000);
     }
-  }, [copyUrl, addToast, uiActions]);
+  }, [copyUrl, success, uiActions]);
+
+  const focusSearchInput = useCallback(() => {
+    searchInputRef.current?.focus();
+    searchInputRef.current?.select();
+  }, []);
 
   // Sorted segment paths for keyboard navigation
   const sortedSegmentPaths = useMemo(() => {
@@ -226,8 +228,18 @@ export function App({ segments }: AppProps) {
       togglePanel: uiActions.togglePanel,
       copyLink: handleCopyLink,
       showHelp: uiActions.toggleShortcutsHelp,
-      openSearch: () => uiActions.setCommandPalette(true),
-      escape: uiActions.closeAllModals,
+      openSearch: focusSearchInput,
+      escape: () => {
+        if (document.activeElement === searchInputRef.current) {
+          if (searchQuery) {
+            setSearchQuery('');
+          } else {
+            searchInputRef.current.blur();
+          }
+          return;
+        }
+        uiActions.closeAllModals();
+      },
     },
     { enabled: !uiState.showShortcutsHelp, variantCount }
   );
@@ -240,7 +252,7 @@ export function App({ segments }: AppProps) {
       <ActionCapture onAction={useActionsRef.current.logAction}>
         <StoryRenderer variant={activeVariant}>
           {(content, isLoading, error) => {
-            if (isLoading) return <div className="flex items-center justify-center p-8"><LoaderIndicator /></div>;
+            if (isLoading) return <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}><LoaderIndicator /></div>;
             if (error) return <EmptyVariantMessage reason={`Error: ${error.message}`} variantName={activeVariant.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={activeVariant.name} hint="The variant's render function didn't return any JSX." />;
             return content;
@@ -262,7 +274,6 @@ export function App({ segments }: AppProps) {
 
   return (
     <>
-      <Toast messages={toasts} onDismiss={dismissToast} />
       <KeyboardShortcutsHelp isOpen={uiState.showShortcutsHelp} onClose={() => uiActions.setShortcutsHelp(false)} />
       <CommandPalette
         isOpen={uiState.showCommandPalette}
@@ -276,10 +287,35 @@ export function App({ segments }: AppProps) {
       />
 
       <Layout
+        header={
+          activeSegment && !uiState.showHealthDashboard ? (
+            <TopToolbar
+              segment={activeSegment}
+              variant={activeVariant}
+              viewSettings={viewSettings}
+              uiState={uiState}
+              uiActions={uiActions}
+              figmaUrl={figmaUrl}
+              linkCopied={uiState.linkCopied}
+              onCopyLink={handleCopyLink}
+              searchQuery={searchQuery}
+              onSearchChange={setSearchQuery}
+              searchInputRef={searchInputRef}
+            />
+          ) : (
+            <ViewerHeader
+              showHealth={uiState.showHealthDashboard}
+              searchQuery={searchQuery}
+              onSearchChange={setSearchQuery}
+              searchInputRef={searchInputRef}
+            />
+          )
+        }
         leftSidebar={
           <LeftSidebar
             segments={segments}
             activeSegment={uiState.showHealthDashboard ? null : activeSegmentPath}
+            searchQuery={searchQuery}
             onSelect={handleSelectSegment}
             showHealth={uiState.showHealthDashboard}
             onHealthClick={() => {
@@ -290,8 +326,8 @@ export function App({ segments }: AppProps) {
         }
       >
         {uiState.showHealthDashboard ? (
-          <div className="h-full overflow-auto bg-[--bg-primary]">
-            <div className="max-w-4xl mx-auto py-8 px-6">
+          <div style={{ height: '100%', overflow: 'auto', backgroundColor: 'var(--bg-primary)' }}>
+            <Box padding="lg" style={{ maxWidth: '896px', margin: '0 auto' }}>
               <HealthDashboard
                 segments={segments}
                 onNavigate={(componentName) => {
@@ -302,24 +338,12 @@ export function App({ segments }: AppProps) {
                   }
                 }}
               />
-            </div>
+            </Box>
           </div>
         ) : activeSegment ? (
-          <div className={clsx("flex h-full", panelDock === "bottom" ? "flex-col" : "flex-row")}>
+          <div style={{ display: 'flex', height: '100%', flexDirection: panelDock === "bottom" ? 'column' : 'row' }}>
             {/* Main Content Area */}
-            <div className="flex-1 flex flex-col min-w-0 min-h-0">
-              {/* Top Toolbar */}
-              <TopToolbar
-                segment={activeSegment}
-                variant={activeVariant}
-                viewSettings={viewSettings}
-                uiState={uiState}
-                uiActions={uiActions}
-                figmaUrl={figmaUrl}
-                linkCopied={uiState.linkCopied}
-                onCopyLink={handleCopyLink}
-              />
-
+            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, minHeight: 0 }}>
               {/* Variant Tabs */}
               {activeSegment.segment.variants && activeSegment.segment.variants.length > 0 && (
                 <VariantTabsBar
@@ -335,8 +359,12 @@ export function App({ segments }: AppProps) {
 
               {/* Preview Area */}
               <div
-                className="flex-1 overflow-auto relative"
-                style={uiState.showMatrixView ? undefined : getBackgroundStyle(viewSettings.background)}
+                style={{
+                  flex: 1,
+                  overflow: 'auto',
+                  position: 'relative',
+                  ...(uiState.showMatrixView ? {} : getBackgroundStyle(viewSettings.background)),
+                }}
               >
                 {activeVariant ? (
                   <PreviewArea
@@ -395,11 +423,13 @@ export function App({ segments }: AppProps) {
             )}
           </div>
         ) : (
-          <div className="flex flex-col items-center justify-center h-full text-secondary">
-            <EmptyIcon className="w-12 h-12 mb-4 text-[--text-muted]" />
-            <p className="text-base font-medium text-primary">No component selected</p>
-            <p className="text-sm mt-1 text-tertiary">Select a component from the sidebar</p>
-          </div>
+          <EmptyState style={{ height: '100%' }}>
+            <EmptyState.Icon>
+              <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>
+          </EmptyState>
         )}
       </Layout>
     </>
@@ -416,92 +446,157 @@ interface TopToolbarProps {
   figmaUrl?: string;
   linkCopied: boolean;
   onCopyLink: () => void;
+  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>;
+}
+
+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"
+        shortcut="⌘K"
+        style={{ width: '220px' }}
+      />
+    </Header.Search>
+  );
+}
+
+function ViewerHeader({ showHealth, searchQuery, onSearchChange, searchInputRef }: ViewerHeaderProps) {
+  return (
+    <Header aria-label="Fragments viewer header">
+      <Header.Trigger />
+      <Header.Brand>
+        <Stack direction="row" gap="sm" align="center">
+          <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>
+  );
 }
 
-function TopToolbar({ segment, variant, viewSettings, uiState, uiActions, figmaUrl, linkCopied, onCopyLink }: TopToolbarProps) {
+function TopToolbar({
+  segment,
+  variant,
+  viewSettings,
+  uiState,
+  uiActions,
+  figmaUrl,
+  linkCopied,
+  onCopyLink,
+  searchQuery,
+  onSearchChange,
+  searchInputRef,
+}: TopToolbarProps) {
   return (
-    <div className="flex items-center justify-between px-4 py-2 border-b border-[--border] bg-[--bg-secondary] flex-shrink-0">
-      <div className="flex items-center gap-3">
-        <h1 className="text-sm font-medium text-primary">{segment.segment.meta.name}</h1>
-        <span className="text-xs text-tertiary">{segment.segment.meta.category}</span>
-      </div>
-      <div className="flex items-center gap-2">
+    <Header aria-label="Component preview toolbar">
+      <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>
+        </Stack>
+      </Header.Brand>
+      <HeaderSearch value={searchQuery} onChange={onSearchChange} inputRef={searchInputRef} />
+      <Header.Spacer />
+      <Header.Actions>
         <PreviewToolbar
           zoom={viewSettings.zoom}
           background={viewSettings.background}
           onZoomChange={viewSettings.setZoom}
           onBackgroundChange={viewSettings.setBackground}
         />
-        <div className="w-px h-4 bg-[--border]" />
+        <Separator orientation="vertical" style={{ height: '16px' }} />
         <ViewportSelector
           viewport={viewSettings.viewport}
           customSize={viewSettings.customSize}
           onViewportChange={viewSettings.setViewport}
           onCustomSizeChange={viewSettings.setCustomSize}
         />
-        <div className="w-px h-4 bg-[--border]" />
+        <Separator orientation="vertical" style={{ height: '16px' }} />
 
         {figmaUrl && (
           <>
-            <button
-              onClick={uiActions.toggleComparison}
-              className={clsx(
-                "p-1.5 rounded transition-colors",
-                uiState.showComparison
-                  ? "text-[--color-accent] bg-[--bg-hover]"
-                  : "text-tertiary hover:text-primary hover:bg-[--bg-hover]"
-              )}
-              title={uiState.showComparison ? "Hide Figma comparison" : "Compare with Figma design"}
-            >
-              <CompareIcon className="w-4 h-4" />
-            </button>
-            <button
-              onClick={() => window.open(figmaUrl, '_blank', 'noopener,noreferrer')}
-              className="p-1.5 text-tertiary hover:text-primary hover:bg-[--bg-hover] rounded transition-colors"
-              title="View in Figma"
-            >
-              <FigmaIcon className="w-4 h-4" />
-            </button>
-            <div className="w-px h-4 bg-[--border]" />
+            <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' }} />
           </>
         )}
 
         {variant && (
           <>
-            <button
-              onClick={() => {
-                const url = new URL(window.location.href);
-                // Clear the hash to avoid malformed URLs
-                url.hash = '';
-                url.searchParams.set('isolated', 'true');
-                url.searchParams.set('component', segment.segment.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);
-                window.open(url.toString(), '_blank', 'noopener,noreferrer');
-              }}
-              className="p-1.5 text-tertiary hover:text-primary hover:bg-[--bg-hover] rounded transition-colors"
-              title="Open in new window"
-            >
-              <ExternalLinkIcon className="w-4 h-4" />
-            </button>
+            <Tooltip content="Open in new window">
+              <Button
+                onClick={() => {
+                  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('variant', variant.name);
+                  if (viewSettings.zoom !== 100) url.searchParams.set('zoom', String(viewSettings.zoom));
+                  if (viewSettings.background !== 'transparent') url.searchParams.set('bg', viewSettings.background);
+                  window.open(url.toString(), '_blank', 'noopener,noreferrer');
+                }}
+                variant="ghost"
+                size="sm"
+              >
+                <ExternalLinkIcon style={{ width: '16px', height: '16px' }} />
+              </Button>
+            </Tooltip>
             <ScreenshotButton componentName={segment.segment.meta.name} variantName={variant.name} />
-            <button
-              onClick={onCopyLink}
-              className={clsx(
-                "p-1.5 rounded transition-colors",
-                linkCopied
-                  ? "text-green-600 bg-green-100 dark:bg-green-900/30"
-                  : "text-tertiary hover:text-primary hover:bg-[--bg-hover]"
-              )}
-              title="Copy link to share"
-            >
-              {linkCopied ? <CheckIcon className="w-4 h-4" /> : <LinkIcon className="w-4 h-4" />}
-            </button>
+            <Tooltip content="Copy link to share">
+              <Button
+                onClick={onCopyLink}
+                variant="ghost"
+                size="sm"
+                style={linkCopied ? { color: '#16a34a', backgroundColor: 'rgba(22, 163, 74, 0.1)' } : {}}
+              >
+                {linkCopied ? <CheckIcon style={{ width: '16px', height: '16px' }} /> : <LinkIcon style={{ width: '16px', height: '16px' }} />}
+              </Button>
+            </Tooltip>
           </>
         )}
-      </div>
-    </div>
+      </Header.Actions>
+    </Header>
   );
 }
 
@@ -518,43 +613,39 @@ interface VariantTabsBarProps {
 
 function VariantTabsBar({ variants, activeIndex, onSelect, showMatrixView, showMultiViewport, onToggleMatrix, onToggleMultiViewport }: VariantTabsBarProps) {
   return (
-    <div className="px-4 py-2 border-b border-[--border] bg-[--bg-primary] flex-shrink-0 flex items-center justify-between">
+    <Stack direction="row" align="center" justify="between" style={{ padding: '8px 16px', borderBottom: '1px solid var(--border)', backgroundColor: 'var(--bg-primary)', flexShrink: 0 }}>
       {!showMatrixView ? (
-        <VariantTabs variants={variants} activeIndex={activeIndex} onSelect={onSelect} />
+        <ScrollArea orientation="horizontal" showFades style={{ flex: 1, minWidth: 0 }}>
+          <VariantTabs variants={variants} activeIndex={activeIndex} onSelect={onSelect} />
+        </ScrollArea>
       ) : (
-        <div className="text-sm text-secondary">Showing all {variants.length} variants</div>
+        <Text size="sm" color="secondary">Showing all {variants.length} variants</Text>
       )}
-      <div className="flex items-center gap-2 ml-4">
+      <Stack direction="row" align="center" gap="sm" style={{ marginLeft: '16px', flexShrink: 0 }}>
         {variants.length > 1 && (
-          <button
+          <Button
             onClick={onToggleMatrix}
-            className={clsx(
-              "flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium transition-colors",
-              showMatrixView
-                ? "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300"
-                : "text-tertiary hover:text-secondary hover:bg-[--bg-hover]"
-            )}
+            variant="ghost"
+            size="sm"
             title={showMatrixView ? "Show single variant" : "Show all variants in grid"}
+            style={showMatrixView ? { backgroundColor: 'rgba(59, 130, 246, 0.1)', color: 'var(--color-accent)' } : {}}
           >
-            <GridIcon className="w-4 h-4" />
+            <GridIcon style={{ width: '16px', height: '16px' }} />
             {showMatrixView ? "Exit Matrix" : "Matrix"}
-          </button>
+          </Button>
         )}
-        <button
+        <Button
           onClick={onToggleMultiViewport}
-          className={clsx(
-            "flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium transition-colors",
-            showMultiViewport
-              ? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300"
-              : "text-tertiary hover:text-secondary hover:bg-[--bg-hover]"
-          )}
+          variant="ghost"
+          size="sm"
           title={showMultiViewport ? "Exit multi-viewport" : "Show at multiple screen sizes"}
+          style={showMultiViewport ? { backgroundColor: 'rgba(34, 197, 94, 0.1)', color: '#16a34a' } : {}}
         >
-          <DevicesIcon className="w-4 h-4" />
+          <DevicesIcon style={{ width: '16px', height: '16px' }} />
           {showMultiViewport ? "Exit Responsive" : "Responsive"}
-        </button>
-      </div>
-    </div>
+        </Button>
+      </Stack>
+    </Stack>
   );
 }
 
@@ -567,34 +658,39 @@ function NoVariantsMessage({ segment }: NoVariantsMessageProps) {
   const skippedVariants = (segment?._generated as any)?.skippedVariants;
 
   if (!skippedVariants || skippedVariants.length === 0) {
-    return <div className="flex items-center justify-center h-full text-secondary text-sm">No variants defined</div>;
+    return (
+      <EmptyState style={{ height: '100%' }}>
+        <EmptyState.Description>No variants defined</EmptyState.Description>
+      </EmptyState>
+    );
   }
 
   return (
-    <div className="flex items-center justify-center h-full p-6">
-      <div className="p-6 bg-sky-50 dark:bg-sky-950 border border-sky-300 dark:border-sky-700 rounded-lg max-w-lg">
-        <div className="flex items-start gap-3">
-          <div className="flex-shrink-0 w-8 h-8 rounded-full bg-sky-200 dark:bg-sky-800 flex items-center justify-center">
-            <span className="text-sky-700 dark:text-sky-200 text-lg">ℹ</span>
-          </div>
-          <div className="flex-1 min-w-0">
-            <h3 className="text-sm font-semibold text-sky-900 dark:text-sky-100">
-              {skippedVariants.length} variant{skippedVariants.length === 1 ? '' : 's'} skipped
-            </h3>
-            <p className="mt-1 text-xs text-sky-800 dark:text-sky-200">
-              These variants couldn't be rendered because they use syntax the parser doesn't support yet:
-            </p>
-            <ul className="mt-2 space-y-1">
-              {skippedVariants.map((sv: any, i: number) => (
-                <li key={i} className="text-xs text-sky-800 dark:text-sky-200">
-                  <span className="font-semibold">{sv.name}:</span>{' '}
-                  <span className="text-sky-700 dark:text-sky-300">{sv.reason}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-      </div>
+    <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>
   );
 }
@@ -608,31 +704,28 @@ interface EmptyVariantMessageProps {
 
 function EmptyVariantMessage({ reason, variantName, hint }: EmptyVariantMessageProps) {
   return (
-    <div className="p-6 bg-amber-50 dark:bg-amber-950 border border-amber-300 dark:border-amber-700 rounded-lg max-w-md">
-      <div className="flex items-start gap-3">
-        <div className="flex-shrink-0 w-8 h-8 rounded-full bg-amber-200 dark:bg-amber-800 flex items-center justify-center">
-          <span className="text-amber-700 dark:text-amber-200 text-lg">⚠</span>
-        </div>
-        <div className="flex-1 min-w-0">
-          <h3 className="text-sm font-semibold text-amber-900 dark:text-amber-100">
-            Variant "{variantName}" rendered empty
-          </h3>
-          <p className="mt-1 text-xs text-amber-800 dark:text-amber-200">{reason}</p>
-          {hint && (
-            <p className="mt-2 text-xs text-amber-700 dark:text-amber-300">
-              <strong>Tip:</strong> {hint}
-            </p>
-          )}
-          <div className="mt-3 text-xs text-amber-700 dark:text-amber-300">
-            <strong>Common causes:</strong>
-            <ul className="mt-1 ml-4 list-disc space-y-0.5">
-              <li>Component requires props that weren't provided</li>
-              <li>Component renders conditionally and conditions aren't met</li>
-              <li>Story args reference variables that don't exist in this context</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
+    <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>
   );
 }