@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/PreviewToolbar.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, useCallback } from 'react';
-import clsx from 'clsx';
+import { useEffect, useCallback } from 'react';
+import { Button, Menu, Stack, Separator } from '@fragments/ui';
 import {
   ZOOM_LEVELS,
   type ZoomLevel,
@@ -12,13 +12,62 @@ export type { ZoomLevel, BackgroundOption };
 export { getBackgroundStyle } from '../constants/ui.js';
 
 // Background options with display metadata
-const BACKGROUND_OPTIONS_UI: { value: BackgroundOption; label: string; icon: string }[] = [
-  { value: 'white', label: 'White', icon: '◻' },
-  { value: 'black', label: 'Black', icon: '◼' },
-  { value: 'checkerboard', label: 'Checkerboard', icon: '▦' },
-  { value: 'transparent', label: 'Transparent', icon: '◇' },
+const BACKGROUND_OPTIONS_UI: { value: BackgroundOption; label: string }[] = [
+  { value: 'white', label: 'White' },
+  { value: 'black', label: 'Black' },
+  { value: 'checkerboard', label: 'Checkerboard' },
+  { value: 'transparent', label: 'Transparent' },
 ];
 
+function BackgroundSwatch({ background }: { background: BackgroundOption }) {
+  const baseStyle = {
+    width: '14px',
+    height: '14px',
+    borderRadius: '4px',
+    border: '1px solid var(--border)',
+    flexShrink: 0,
+  };
+
+  if (background === 'white') {
+    return <span aria-hidden="true" style={{ ...baseStyle, backgroundColor: '#ffffff' }} />;
+  }
+
+  if (background === 'black') {
+    return <span aria-hidden="true" style={{ ...baseStyle, backgroundColor: '#171717', borderColor: '#2a2a2a' }} />;
+  }
+
+  if (background === 'checkerboard') {
+    return (
+      <span
+        aria-hidden="true"
+        style={{
+          ...baseStyle,
+          backgroundColor: '#ffffff',
+          backgroundImage: `
+            linear-gradient(45deg, #d4d4d8 25%, transparent 25%),
+            linear-gradient(-45deg, #d4d4d8 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, #d4d4d8 75%),
+            linear-gradient(-45deg, transparent 75%, #d4d4d8 75%)
+          `,
+          backgroundSize: '8px 8px',
+          backgroundPosition: '0 0, 0 4px, 4px -4px, -4px 0',
+        }}
+      />
+    );
+  }
+
+  return (
+    <span
+      aria-hidden="true"
+      style={{
+        ...baseStyle,
+        backgroundColor: 'transparent',
+        backgroundImage: 'linear-gradient(135deg, transparent 42%, var(--text-tertiary) 43%, var(--text-tertiary) 57%, transparent 58%)',
+      }}
+    />
+  );
+}
+
 interface PreviewToolbarProps {
   zoom: ZoomLevel;
   background: BackgroundOption;
@@ -32,9 +81,6 @@ export function PreviewToolbar({
   onZoomChange,
   onBackgroundChange,
 }: PreviewToolbarProps) {
-  const [zoomOpen, setZoomOpen] = useState(false);
-  const [bgOpen, setBgOpen] = useState(false);
-
   // Keyboard shortcuts for zoom
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
     // Don't handle if in input/textarea
@@ -66,111 +112,69 @@ export function PreviewToolbar({
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, [handleKeyDown]);
 
-  // Close dropdowns when clicking outside
-  useEffect(() => {
-    const handleClick = () => {
-      setZoomOpen(false);
-      setBgOpen(false);
-    };
-    if (zoomOpen || bgOpen) {
-      document.addEventListener('click', handleClick);
-      return () => document.removeEventListener('click', handleClick);
-    }
-  }, [zoomOpen, bgOpen]);
-
   return (
-    <div className="flex items-center gap-2">
+    <Stack direction="row" gap="sm" align="center">
       {/* Zoom dropdown */}
-      <div className="relative">
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            setZoomOpen(!zoomOpen);
-            setBgOpen(false);
-          }}
-          className={clsx(
-            'flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded',
-            'text-secondary hover:text-primary',
-            'hover:bg-[--bg-hover] transition-colors',
-            'focus:outline-none focus-visible:ring-2 focus-visible:ring-[--color-accent]'
-          )}
-          title="Zoom level (+/-/0)"
-        >
-          <ZoomIcon className="w-3.5 h-3.5" />
-          <span>{zoom}%</span>
-          <ChevronDownIcon className="w-3 h-3" />
-        </button>
-        {zoomOpen && (
-          <div className="absolute top-full left-0 mt-1 py-1 min-w-[80px] bg-[--bg-elevated] border border-[--border] rounded-lg shadow-lg z-50">
+      <Menu>
+        <Menu.Trigger asChild>
+          <Button variant="ghost" size="sm" title="Zoom level (+/-/0)">
+            <Stack direction="row" gap="xs" align="center">
+              <span style={{ display: 'inline-flex', width: '14px', height: '14px' }}>
+                <ZoomIcon />
+              </span>
+              <span>{zoom}%</span>
+              <span style={{ display: 'inline-flex', width: '12px', height: '12px' }}>
+                <ChevronDownIcon />
+              </span>
+            </Stack>
+          </Button>
+        </Menu.Trigger>
+        <Menu.Content side="bottom" align="start">
+          <Menu.RadioGroup
+            value={String(zoom)}
+            onValueChange={(value: string) => onZoomChange(Number(value) as ZoomLevel)}
+          >
             {ZOOM_LEVELS.map((level) => (
-              <button
-                key={level}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onZoomChange(level);
-                  setZoomOpen(false);
-                }}
-                className={clsx(
-                  'w-full px-3 py-1.5 text-xs text-left',
-                  'hover:bg-[--bg-hover] transition-colors',
-                  level === zoom ? 'text-[--color-accent] font-medium' : 'text-secondary'
-                )}
-              >
+              <Menu.RadioItem key={level} value={String(level)}>
                 {level}%
-              </button>
+              </Menu.RadioItem>
             ))}
-          </div>
-        )}
-      </div>
+          </Menu.RadioGroup>
+        </Menu.Content>
+      </Menu>
 
       {/* Divider */}
-      <div className="w-px h-4 bg-[--border]" />
+      <Separator orientation="vertical" />
 
       {/* Background selector */}
-      <div className="relative">
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            setBgOpen(!bgOpen);
-            setZoomOpen(false);
-          }}
-          className={clsx(
-            'flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded',
-            'text-secondary hover:text-primary',
-            'hover:bg-[--bg-hover] transition-colors',
-            'focus:outline-none focus-visible:ring-2 focus-visible:ring-[--color-accent]'
-          )}
-          title="Background color"
-        >
-          <span className="text-sm">
-            {BACKGROUND_OPTIONS_UI.find(o => o.value === background)?.icon}
-          </span>
-          <span className="capitalize">{background}</span>
-          <ChevronDownIcon className="w-3 h-3" />
-        </button>
-        {bgOpen && (
-          <div className="absolute top-full left-0 mt-1 py-1 min-w-[120px] bg-[--bg-elevated] border border-[--border] rounded-lg shadow-lg z-50">
+      <Menu>
+        <Menu.Trigger asChild>
+          <Button variant="ghost" size="sm" title="Background color">
+            <Stack direction="row" gap="xs" align="center">
+              <BackgroundSwatch background={background} />
+              <span>{BACKGROUND_OPTIONS_UI.find(o => o.value === background)?.label}</span>
+              <span style={{ display: 'inline-flex', width: '12px', height: '12px' }}>
+                <ChevronDownIcon />
+              </span>
+            </Stack>
+          </Button>
+        </Menu.Trigger>
+        <Menu.Content side="bottom" align="start">
+          <Menu.RadioGroup
+            value={background}
+            onValueChange={(value: string) => onBackgroundChange(value as BackgroundOption)}
+          >
             {BACKGROUND_OPTIONS_UI.map((option) => (
-              <button
-                key={option.value}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onBackgroundChange(option.value);
-                  setBgOpen(false);
-                }}
-                className={clsx(
-                  'w-full px-3 py-1.5 text-xs text-left flex items-center gap-2',
-                  'hover:bg-[--bg-hover] transition-colors',
-                  option.value === background ? 'text-[--color-accent] font-medium' : 'text-secondary'
-                )}
-              >
-                <span className="text-sm">{option.icon}</span>
-                {option.label}
-              </button>
+              <Menu.RadioItem key={option.value} value={option.value}>
+                <Stack direction="row" gap="sm" align="center">
+                  <BackgroundSwatch background={option.value} />
+                  {option.label}
+                </Stack>
+              </Menu.RadioItem>
             ))}
-          </div>
-        )}
-      </div>
-    </div>
+          </Menu.RadioGroup>
+        </Menu.Content>
+      </Menu>
+    </Stack>
   );
 }