@fragments-sdk/cli 0.7.10 → 0.7.11

package/src/viewer/components/PreviewMenu.tsx

@@ -1,247 +0,0 @@
-/**
- * PreviewMenu — Storybook-style hamburger menu for the viewer.
- * Provides navigation, view mode toggles, panel controls, and settings submenus.
- * Placed left of the header beside the logo.
- */
-
-import { useEffect, useCallback } from 'react';
-import { Button, Menu, Text, Stack } from '@fragments-sdk/ui';
-import { List, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, GridFour, DeviceMobile, Rows, Eye } from '@phosphor-icons/react';
-import {
-  ZOOM_LEVELS,
-  VIEWPORT_PRESETS,
-  type ZoomLevel,
-  type BackgroundOption,
-  type ViewportPreset,
-} from '../constants/ui.js';
-
-// Background options with display labels
-const BACKGROUND_OPTIONS_UI: { value: BackgroundOption; label: string }[] = [
-  { value: 'checkerboard', label: 'Checkerboard' },
-  { value: 'black', label: 'Dark' },
-  { value: 'white', label: 'Light' },
-  { value: 'transparent', label: 'Transparent' },
-];
-
-// Viewport presets for submenu display
-const VIEWPORT_OPTIONS = Object.entries(VIEWPORT_PRESETS).map(([value, config]) => ({
-  value: value as Exclude<ViewportPreset, 'custom'>,
-  label: config.label,
-}));
-
-/** Shortcut label helper — renders a right-aligned keyboard hint */
-function Shortcut({ keys }: { keys: string }) {
-  return (
-    <Text as="span" size="2xs" color="tertiary" style={{ marginLeft: 'auto', paddingLeft: '16px', fontFamily: 'inherit' }}>
-      {keys}
-    </Text>
-  );
-}
-
-interface PreviewMenuProps {
-  zoom: ZoomLevel;
-  background: BackgroundOption;
-  viewport: ViewportPreset;
-  showMatrixView: boolean;
-  showMultiViewport: boolean;
-  panelOpen: boolean;
-  onZoomChange: (zoom: ZoomLevel) => void;
-  onBackgroundChange: (bg: BackgroundOption) => void;
-  onViewportChange: (viewport: ViewportPreset) => void;
-  onToggleMatrix: () => void;
-  onToggleMultiViewport: () => void;
-  onTogglePanel: () => void;
-  onPrevComponent: () => void;
-  onNextComponent: () => void;
-  onPrevVariant: () => void;
-  onNextVariant: () => void;
-}
-
-export function PreviewMenu({
-  zoom,
-  background,
-  viewport,
-  showMatrixView,
-  showMultiViewport,
-  panelOpen,
-  onZoomChange,
-  onBackgroundChange,
-  onViewportChange,
-  onToggleMatrix,
-  onToggleMultiViewport,
-  onTogglePanel,
-  onPrevComponent,
-  onNextComponent,
-  onPrevVariant,
-  onNextVariant,
-}: PreviewMenuProps) {
-  // Keyboard shortcuts for zoom
-  const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    const target = e.target as HTMLElement;
-    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-      return;
-    }
-
-    if (e.key === '=' || e.key === '+') {
-      e.preventDefault();
-      const currentIndex = ZOOM_LEVELS.indexOf(zoom);
-      if (currentIndex < ZOOM_LEVELS.length - 1) {
-        onZoomChange(ZOOM_LEVELS[currentIndex + 1]);
-      }
-    } else if (e.key === '-') {
-      e.preventDefault();
-      const currentIndex = ZOOM_LEVELS.indexOf(zoom);
-      if (currentIndex > 0) {
-        onZoomChange(ZOOM_LEVELS[currentIndex - 1]);
-      }
-    } else if (e.key === '0') {
-      e.preventDefault();
-      onZoomChange(100);
-    }
-  }, [zoom, onZoomChange]);
-
-  useEffect(() => {
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [handleKeyDown]);
-
-  const iconSize = 16;
-  const iconWeight = 'regular' as const;
-
-  return (
-    <Menu modal={false}>
-      <Menu.Trigger asChild>
-        <Button variant="ghost" size="sm" aria-label="Options menu">
-          <Stack direction="row" gap="xs" align="center">
-            <List size={18} weight="bold" />
-            <Text size="sm" weight="medium">Options</Text>
-          </Stack>
-        </Button>
-      </Menu.Trigger>
-      <Menu.Content side="bottom" align="start" style={{ minWidth: '14rem' }}>
-        {/* View modes */}
-        <Menu.Item
-          checked={showMatrixView}
-          icon={<GridFour size={iconSize} weight={iconWeight} />}
-          onSelect={onToggleMatrix}
-        >
-          <Stack direction="row" align="center" style={{ flex: 1 }}>
-            Matrix view
-            <Shortcut keys="M" />
-          </Stack>
-        </Menu.Item>
-        <Menu.Item
-          checked={showMultiViewport}
-          icon={<DeviceMobile size={iconSize} weight={iconWeight} />}
-          onSelect={onToggleMultiViewport}
-        >
-          <Stack direction="row" align="center" style={{ flex: 1 }}>
-            Responsive view
-            <Shortcut keys="V" />
-          </Stack>
-        </Menu.Item>
-        <Menu.Item
-          checked={panelOpen}
-          icon={<Rows size={iconSize} weight={iconWeight} />}
-          onSelect={onTogglePanel}
-        >
-          <Stack direction="row" align="center" style={{ flex: 1 }}>
-            Show addons
-            <Shortcut keys="P" />
-          </Stack>
-        </Menu.Item>
-
-        <Menu.Separator />
-
-        {/* Navigation */}
-        <Menu.Group>
-          <Menu.GroupLabel>Navigate</Menu.GroupLabel>
-          <Menu.Item
-            icon={<ArrowUp size={iconSize} weight={iconWeight} />}
-            onSelect={onPrevComponent}
-          >
-            <Stack direction="row" align="center" style={{ flex: 1 }}>
-              Previous component
-              <Shortcut keys="⌘↑" />
-            </Stack>
-          </Menu.Item>
-          <Menu.Item
-            icon={<ArrowDown size={iconSize} weight={iconWeight} />}
-            onSelect={onNextComponent}
-          >
-            <Stack direction="row" align="center" style={{ flex: 1 }}>
-              Next component
-              <Shortcut keys="⌘↓" />
-            </Stack>
-          </Menu.Item>
-          <Menu.Item
-            icon={<ArrowLeft size={iconSize} weight={iconWeight} />}
-            onSelect={onPrevVariant}
-          >
-            <Stack direction="row" align="center" style={{ flex: 1 }}>
-              Previous variant
-              <Shortcut keys="⌘←" />
-            </Stack>
-          </Menu.Item>
-          <Menu.Item
-            icon={<ArrowRight size={iconSize} weight={iconWeight} />}
-            onSelect={onNextVariant}
-          >
-            <Stack direction="row" align="center" style={{ flex: 1 }}>
-              Next variant
-              <Shortcut keys="⌘→" />
-            </Stack>
-          </Menu.Item>
-        </Menu.Group>
-
-        <Menu.Separator />
-
-        {/* Settings submenus */}
-        <Menu.Submenu>
-          <Menu.SubmenuTrigger icon={<Eye size={iconSize} weight={iconWeight} />}>Viewport</Menu.SubmenuTrigger>
-          <Menu.Content side="right" align="start">
-            {VIEWPORT_OPTIONS.map((option) => (
-              <Menu.Item
-                key={option.value}
-                checked={viewport === option.value}
-                onSelect={() => onViewportChange(option.value)}
-              >
-                {option.label}
-              </Menu.Item>
-            ))}
-          </Menu.Content>
-        </Menu.Submenu>
-
-        <Menu.Submenu>
-          <Menu.SubmenuTrigger>Background</Menu.SubmenuTrigger>
-          <Menu.Content side="right" align="start">
-            {BACKGROUND_OPTIONS_UI.map((option) => (
-              <Menu.Item
-                key={option.value}
-                checked={background === option.value}
-                onSelect={() => onBackgroundChange(option.value)}
-              >
-                {option.label}
-              </Menu.Item>
-            ))}
-          </Menu.Content>
-        </Menu.Submenu>
-
-        <Menu.Submenu>
-          <Menu.SubmenuTrigger>Zoom ({zoom}%)</Menu.SubmenuTrigger>
-          <Menu.Content side="right" align="start">
-            {ZOOM_LEVELS.map((level) => (
-              <Menu.Item
-                key={level}
-                checked={zoom === level}
-                onSelect={() => onZoomChange(level)}
-              >
-                {level}%
-              </Menu.Item>
-            ))}
-          </Menu.Content>
-        </Menu.Submenu>
-      </Menu.Content>
-    </Menu>
-  );
-}