@fragments-sdk/cli 0.2.2

package/src/viewer/components/ViewportSelector.tsx

@@ -0,0 +1,165 @@
+import { useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { VIEWPORT_PRESETS, type ViewportPreset } from '../constants/ui.js';
+import { ViewportIcon, ChevronDownIcon } from './Icons.js';
+
+// Re-export for consumers
+export type { ViewportPreset };
+
+export interface ViewportSize {
+  width: number | null;
+  height: number | null;
+}
+
+// Viewport presets with display metadata
+const VIEWPORT_PRESETS_UI = Object.entries(VIEWPORT_PRESETS).map(([value, config]) => ({
+  value: value as ViewportPreset,
+  label: config.label,
+  width: config.width,
+  icon: config.icon,
+}));
+
+interface ViewportSelectorProps {
+  viewport: ViewportPreset;
+  customSize: ViewportSize;
+  onViewportChange: (viewport: ViewportPreset) => void;
+  onCustomSizeChange: (size: ViewportSize) => void;
+}
+
+export function ViewportSelector({
+  viewport,
+  customSize,
+  onViewportChange,
+  onCustomSizeChange,
+}: ViewportSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showCustom, setShowCustom] = useState(false);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClick = () => {
+      setIsOpen(false);
+    };
+    if (isOpen) {
+      document.addEventListener('click', handleClick);
+      return () => document.removeEventListener('click', handleClick);
+    }
+  }, [isOpen]);
+
+  const currentPreset = VIEWPORT_PRESETS_UI.find(p => p.value === viewport);
+  const displayLabel = viewport === 'custom'
+    ? `${customSize.width || '?'}×${customSize.height || 'auto'}`
+    : currentPreset?.label || 'Responsive';
+
+  return (
+    <div className="relative">
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsOpen(!isOpen);
+        }}
+        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="Viewport size"
+      >
+        <ViewportIcon className="w-3.5 h-3.5" />
+        <span>{displayLabel}</span>
+        <ChevronDownIcon className="w-3 h-3" />
+      </button>
+
+      {isOpen && (
+        <div
+          className="absolute top-full right-0 mt-1 py-1 min-w-[160px] bg-[--bg-elevated] border border-[--border] rounded-lg shadow-lg z-50"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {VIEWPORT_PRESETS_UI.map((preset) => (
+            <button
+              key={preset.value}
+              onClick={() => {
+                onViewportChange(preset.value);
+                setShowCustom(false);
+                setIsOpen(false);
+              }}
+              className={clsx(
+                'w-full px-3 py-1.5 text-xs text-left flex items-center justify-between',
+                'hover:bg-[--bg-hover] transition-colors',
+                preset.value === viewport ? 'text-[--color-accent] font-medium' : 'text-secondary'
+              )}
+            >
+              <span className="flex items-center gap-2">
+                <span>{preset.icon}</span>
+                {preset.label}
+              </span>
+              {preset.width && (
+                <span className="text-[10px] text-tertiary">{preset.width}px</span>
+              )}
+            </button>
+          ))}
+
+          <div className="border-t border-[--border-subtle] my-1" />
+
+          <button
+            onClick={() => {
+              setShowCustom(!showCustom);
+            }}
+            className={clsx(
+              'w-full px-3 py-1.5 text-xs text-left flex items-center gap-2',
+              'hover:bg-[--bg-hover] transition-colors',
+              viewport === 'custom' ? 'text-[--color-accent] font-medium' : 'text-secondary'
+            )}
+          >
+            <span>⚙</span>
+            Custom size
+            <ChevronDownIcon className={clsx('w-3 h-3 ml-auto transition-transform', showCustom && 'rotate-180')} />
+          </button>
+
+          {showCustom && (
+            <div className="px-3 py-2 space-y-2">
+              <div className="flex items-center gap-2">
+                <label className="text-[10px] text-tertiary w-8">W:</label>
+                <input
+                  type="number"
+                  value={customSize.width || ''}
+                  onChange={(e) => {
+                    const width = e.target.value ? parseInt(e.target.value, 10) : null;
+                    onCustomSizeChange({ ...customSize, width });
+                    onViewportChange('custom');
+                  }}
+                  placeholder="auto"
+                  className="w-16 px-2 py-1 text-[11px] font-mono bg-[--bg-primary] border border-[--border] rounded text-primary"
+                />
+                <span className="text-[10px] text-tertiary">px</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <label className="text-[10px] text-tertiary w-8">H:</label>
+                <input
+                  type="number"
+                  value={customSize.height || ''}
+                  onChange={(e) => {
+                    const height = e.target.value ? parseInt(e.target.value, 10) : null;
+                    onCustomSizeChange({ ...customSize, height });
+                    onViewportChange('custom');
+                  }}
+                  placeholder="auto"
+                  className="w-16 px-2 py-1 text-[11px] font-mono bg-[--bg-primary] border border-[--border] rounded text-primary"
+                />
+                <span className="text-[10px] text-tertiary">px</span>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Get viewport width from preset
+export function getViewportWidth(viewport: ViewportPreset, customSize: ViewportSize): number | null {
+  if (viewport === 'custom') return customSize.width;
+  if (viewport === 'responsive') return null;
+  return VIEWPORT_PRESETS[viewport]?.width ?? null;
+}