@fragments-sdk/cli 0.5.2 → 0.6.0

package/src/viewer/components/App.tsx

@@ -5,7 +5,6 @@
 
 import { useState, useMemo, useEffect, useCallback, useRef } from "react";
 import type { SegmentDefinition } from "../../core/index.js";
-import clsx from "clsx";
 
 // 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,6 +27,9 @@ import { HealthDashboard } from "./HealthDashboard.js";
 import { useAllFigmaUrls } from "./FigmaEmbed.js";
 import { ActionCapture } from "./ActionCapture.js";
 
+// Fragments UI
+import { Stack, Text, Separator, Tooltip, Button, EmptyState, Box, Alert } from "@fragments/ui";
+
 // Icons
 import { EmptyIcon, ExternalLinkIcon, CameraIcon, FigmaIcon, CompareIcon, CheckIcon, LinkIcon, GridIcon, DevicesIcon } from "./Icons.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 { toast, info, success } = useToast();
 
   // Navigation state
   const [activeSegmentPath, setActiveSegmentPath] = useState<string | null>(() => {
@@ -161,13 +156,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 +184,13 @@ 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]);
 
   // Sorted segment paths for keyboard navigation
   const sortedSegmentPaths = useMemo(() => {
@@ -240,7 +235,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 +257,6 @@ export function App({ segments }: AppProps) {
 
   return (
     <>
-      <Toast messages={toasts} onDismiss={dismissToast} />
       <KeyboardShortcutsHelp isOpen={uiState.showShortcutsHelp} onClose={() => uiActions.setShortcutsHelp(false)} />
       <CommandPalette
         isOpen={uiState.showCommandPalette}
@@ -290,8 +284,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,12 +296,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">
+            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, minHeight: 0 }}>
               {/* Top Toolbar */}
               <TopToolbar
                 segment={activeSegment}
@@ -335,8 +329,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 +393,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>
     </>
@@ -420,88 +420,87 @@ interface TopToolbarProps {
 
 function TopToolbar({ segment, variant, viewSettings, uiState, uiActions, figmaUrl, linkCopied, onCopyLink }: 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">
+    <Stack direction="row" align="center" justify="between" style={{ padding: '8px 16px', borderBottom: '1px solid var(--border)', backgroundColor: 'var(--bg-secondary)', flexShrink: 0 }}>
+      <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>
+      <Stack direction="row" align="center" gap="sm">
         <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>
+      </Stack>
+    </Stack>
   );
 }
 
@@ -518,43 +517,37 @@ 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} />
       ) : (
-        <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' }}>
         {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 +560,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 +606,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>
   );
 }

package/src/viewer/components/BottomPanel.tsx

@@ -5,7 +5,7 @@
 
 import { memo, useCallback } from 'react';
 import type { SegmentDefinition, SegmentVariant } from '../../core/index.js';
-import clsx from 'clsx';
+import { Tabs, Badge } from '@fragments/ui';
 import { ResizablePanel } from './ResizablePanel.js';
 import { CodePanel } from './CodePanel.js';
 import { TokenStylePanel } from './TokenStylePanel.js';
@@ -48,35 +48,6 @@ interface BottomPanelProps {
   segmentKey: string;
 }
 
-// Tab button component
-interface TabButtonProps {
-  active: boolean;
-  onClick: () => void;
-  children: React.ReactNode;
-  badge?: number;
-}
-
-const TabButton = memo(function TabButton({ active, onClick, children, badge }: TabButtonProps) {
-  return (
-    <button
-      onClick={onClick}
-      className={clsx(
-        "px-3 py-1 text-xs font-medium rounded relative",
-        active
-          ? "text-primary bg-[--bg-hover]"
-          : "text-tertiary hover:text-secondary"
-      )}
-    >
-      {children}
-      {badge !== undefined && badge > 0 && (
-        <span className="absolute -top-1 -right-1 w-4 h-4 text-[10px] bg-blue-500 text-white rounded-full flex items-center justify-center">
-          {badge > 99 ? '99+' : badge}
-        </span>
-      )}
-    </button>
-  );
-});
-
 export const BottomPanel = memo(function BottomPanel({
   segment,
   variant,
@@ -102,63 +73,52 @@ export const BottomPanel = memo(function BottomPanel({
     setTimeout(onRefreshRendered, 100);
   }, [onPanelChange, onFetchFigma, onRefreshRendered]);
 
+  // Build tab change handler that also triggers side effects
+  const handleTabChange = useCallback((value: string | number) => {
+    const panel = String(value);
+    if (panel === 'styles') {
+      handleStylesClick();
+    } else {
+      onPanelChange(panel as ActivePanel);
+    }
+  }, [handleStylesClick, onPanelChange]);
+
   return (
     <ResizablePanel
       visible={true}
       header={
-        <div className="flex items-center gap-1">
-          <TabButton
-            active={activePanel === 'code'}
-            onClick={() => onPanelChange('code')}
-          >
-            Code
-          </TabButton>
-          {figmaUrl && (
-            <TabButton
-              active={activePanel === 'styles'}
-              onClick={handleStylesClick}
-            >
-              Styles
-            </TabButton>
-          )}
-          <TabButton
-            active={activePanel === 'accessibility'}
-            onClick={() => onPanelChange('accessibility')}
-          >
-            Accessibility
-          </TabButton>
-          {variant?.hasPlayFunction && (
-            <TabButton
-              active={activePanel === 'interactions'}
-              onClick={() => onPanelChange('interactions')}
-            >
-              Interactions
-            </TabButton>
-          )}
-          <TabButton
-            active={activePanel === 'actions'}
-            onClick={() => onPanelChange('actions')}
-            badge={actionLogs.length}
-          >
-            Actions
-          </TabButton>
-          <TabButton
-            active={activePanel === 'graph'}
-            onClick={() => onPanelChange('graph')}
-          >
-            Graph
-          </TabButton>
-          <TabButton
-            active={activePanel === 'contract'}
-            onClick={() => onPanelChange('contract')}
-          >
-            Contract
-          </TabButton>
-        </div>
+        <Tabs value={activePanel} onValueChange={handleTabChange}>
+          <Tabs.List variant="pills">
+            <Tabs.Tab value="code">Code</Tabs.Tab>
+            {figmaUrl && <Tabs.Tab value="styles">Styles</Tabs.Tab>}
+            <Tabs.Tab value="accessibility">Accessibility</Tabs.Tab>
+            {variant?.hasPlayFunction && <Tabs.Tab value="interactions">Interactions</Tabs.Tab>}
+            <Tabs.Tab value="actions">
+              <span style={{ position: 'relative' }}>
+                Actions
+                {actionLogs.length > 0 && (
+                  <Badge
+                    variant="info"
+                    size="sm"
+                    style={{
+                      position: 'absolute',
+                      top: '-8px',
+                      right: '-16px',
+                    }}
+                  >
+                    {actionLogs.length > 99 ? '99+' : actionLogs.length}
+                  </Badge>
+                )}
+              </span>
+            </Tabs.Tab>
+            <Tabs.Tab value="graph">Graph</Tabs.Tab>
+            <Tabs.Tab value="contract">Contract</Tabs.Tab>
+          </Tabs.List>
+        </Tabs>
       }
     >
       {activePanel === 'code' && (
-        <div className="p-4">
+        <div style={{ padding: '16px' }}>
           <CodePanel
             variant={variant}
             componentName={segment.meta.name}