@fragments-sdk/cli 0.6.0 → 0.7.0

package/src/viewer/components/PreviewToolbar.tsx

@@ -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: '\u25FB' },
-  { value: 'black', label: 'Black', icon: '\u25FC' },
-  { value: 'checkerboard', label: 'Checkerboard', icon: '\u25A6' },
-  { value: 'transparent', label: 'Transparent', icon: '\u25C7' },
+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;
@@ -102,10 +151,8 @@ export function PreviewToolbar({
         <Menu.Trigger asChild>
           <Button variant="ghost" size="sm" title="Background color">
             <Stack direction="row" gap="xs" align="center">
-              <span style={{ fontSize: '14px' }}>
-                {BACKGROUND_OPTIONS_UI.find(o => o.value === background)?.icon}
-              </span>
-              <span style={{ textTransform: 'capitalize' }}>{background}</span>
+              <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>
@@ -120,7 +167,7 @@ export function PreviewToolbar({
             {BACKGROUND_OPTIONS_UI.map((option) => (
               <Menu.RadioItem key={option.value} value={option.value}>
                 <Stack direction="row" gap="sm" align="center">
-                  <span style={{ fontSize: '14px' }}>{option.icon}</span>
+                  <BackgroundSwatch background={option.value} />
                   {option.label}
                 </Stack>
               </Menu.RadioItem>

package/src/viewer/components/ViewportSelector.tsx

@@ -1,7 +1,14 @@
-import { useState } from 'react';
 import { Button, Menu, Stack, Input, Text, Box } from '@fragments/ui';
 import { VIEWPORT_PRESETS, type ViewportPreset } from '../constants/ui.js';
-import { ViewportIcon, ChevronDownIcon } from './Icons.js';
+import {
+  ViewportIcon,
+  ChevronDownIcon,
+  ResponsiveIcon,
+  DesktopIcon,
+  TabletIcon,
+  MobileIcon,
+  SettingsIcon,
+} from './Icons.js';
 
 // Re-export for consumers
 export type { ViewportPreset };
@@ -16,9 +23,24 @@ const VIEWPORT_PRESETS_UI = Object.entries(VIEWPORT_PRESETS).map(([value, config
   value: value as ViewportPreset,
   label: config.label,
   width: config.width,
-  icon: config.icon,
 }));
 
+function PresetIcon({ preset }: { preset: ViewportPreset }) {
+  const commonStyle = { width: '16px', height: '16px' };
+
+  switch (preset) {
+    case 'desktop':
+      return <DesktopIcon style={commonStyle} />;
+    case 'tablet':
+      return <TabletIcon style={commonStyle} />;
+    case 'mobile':
+      return <MobileIcon style={commonStyle} />;
+    case 'responsive':
+    default:
+      return <ResponsiveIcon style={commonStyle} />;
+  }
+}
+
 interface ViewportSelectorProps {
   viewport: ViewportPreset;
   customSize: ViewportSize;
@@ -32,9 +54,8 @@ export function ViewportSelector({
   onViewportChange,
   onCustomSizeChange,
 }: ViewportSelectorProps) {
-  const [showCustom, setShowCustom] = useState(false);
-
   const currentPreset = VIEWPORT_PRESETS_UI.find(p => p.value === viewport);
+  const isCustomViewport = viewport === 'custom';
   const displayLabel = viewport === 'custom'
     ? `${customSize.width || '?'}\u00D7${customSize.height || 'auto'}`
     : currentPreset?.label || 'Responsive';
@@ -55,57 +76,47 @@ export function ViewportSelector({
         </Button>
       </Menu.Trigger>
       <Menu.Content side="bottom" align="end">
-        {VIEWPORT_PRESETS_UI.map((preset) => (
-          <Menu.Item
-            key={preset.value}
-            onSelect={() => {
-              onViewportChange(preset.value);
-              setShowCustom(false);
-            }}
-          >
-            <Stack direction="row" gap="sm" align="center" justify="between" style={{ width: '100%' }}>
-              <Stack direction="row" gap="sm" align="center">
-                <span>{preset.icon}</span>
-                <span style={{
-                  fontWeight: preset.value === viewport ? 600 : 400,
-                  color: preset.value === viewport ? 'var(--color-accent)' : undefined,
-                }}>
-                  {preset.label}
-                </span>
+        <Menu.RadioGroup
+          value={isCustomViewport ? 'custom' : viewport}
+          onValueChange={(value: string) => {
+            if (value === 'custom') {
+              onViewportChange('custom');
+              return;
+            }
+            onViewportChange(value as ViewportPreset);
+          }}
+        >
+          {VIEWPORT_PRESETS_UI.map((preset) => (
+            <Menu.RadioItem key={preset.value} value={preset.value}>
+              <Stack direction="row" gap="sm" align="center" justify="between" style={{ width: '100%' }}>
+                <Stack direction="row" gap="sm" align="center">
+                  <PresetIcon preset={preset.value} />
+                  <span>{preset.label}</span>
+                </Stack>
+                {preset.width && (
+                  <Text size="2xs" color="tertiary">
+                    {preset.width}px
+                  </Text>
+                )}
               </Stack>
-              {preset.width && (
-                <Text size="2xs" color="tertiary">
-                  {preset.width}px
-                </Text>
-              )}
-            </Stack>
-          </Menu.Item>
-        ))}
+            </Menu.RadioItem>
+          ))}
+        </Menu.RadioGroup>
 
         <Menu.Separator />
 
-        <Menu.Item onSelect={() => setShowCustom(!showCustom)}>
+        <Menu.Item onSelect={() => onViewportChange('custom')}>
           <Stack direction="row" gap="sm" align="center" style={{
             width: '100%',
-            fontWeight: viewport === 'custom' ? 600 : 400,
-            color: viewport === 'custom' ? 'var(--color-accent)' : undefined,
+            fontWeight: isCustomViewport ? 600 : 400,
+            color: isCustomViewport ? 'var(--color-accent)' : undefined,
           }}>
-            <span>{'\u2699'}</span>
+            <SettingsIcon style={{ width: '16px', height: '16px' }} />
             Custom size
-            <span style={{
-              display: 'inline-flex',
-              width: '12px',
-              height: '12px',
-              marginLeft: 'auto',
-              transition: 'transform 150ms ease',
-              transform: showCustom ? 'rotate(180deg)' : 'none',
-            }}>
-              <ChevronDownIcon />
-            </span>
           </Stack>
         </Menu.Item>
 
-        {showCustom && (
+        {isCustomViewport && (
           <div
             onClick={(e) => e.stopPropagation()}
             onKeyDown={(e) => e.stopPropagation()}

package/src/viewer/constants/ui.ts

@@ -118,10 +118,10 @@ export type ZoomLevel = (typeof ZOOM_LEVELS)[number];
  * Viewport presets.
  */
 export const VIEWPORT_PRESETS = {
-  responsive: { label: 'Responsive', width: null, icon: '↔' },
-  desktop: { label: 'Desktop', width: 1280, icon: '🖥' },
-  tablet: { label: 'Tablet', width: 768, icon: '📱' },
-  mobile: { label: 'Mobile', width: 375, icon: '📱' },
+  responsive: { label: 'Responsive', width: null, icon: 'responsive' },
+  desktop: { label: 'Desktop', width: 1280, icon: 'desktop' },
+  tablet: { label: 'Tablet', width: 768, icon: 'tablet' },
+  mobile: { label: 'Mobile', width: 375, icon: 'mobile' },
 } as const;
 
 export type ViewportPreset = keyof typeof VIEWPORT_PRESETS | 'custom';

package/src/viewer/preview-frame.html

@@ -4,12 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Fragment Preview</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
     <style>
       /* Reset and base styles for isolated preview */
       *, *::before, *::after {
@@ -19,27 +13,42 @@
       html, body {
         margin: 0;
         padding: 0;
-        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-family: var(--fui-font-sans, 'Geist Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         width: 100%;
         height: 100%;
-        overflow: auto;
+        overflow: hidden;
       }
 
       body {
-        background: transparent;
+        background: var(--fui-bg-primary, #ffffff);
         min-height: 100%;
       }
 
       #preview-root {
         width: 100%;
-        min-height: 100%;
+        min-height: 100vh;
         display: flex;
-        align-items: center;
-        justify-content: center;
+        align-items: flex-start;
+        justify-content: flex-start;
         padding: 24px;
         box-sizing: border-box;
+        overflow: auto;
+      }
+
+      body[data-preview-mode='centered'] #preview-root {
+        align-items: center;
+        justify-content: center;
+      }
+
+      body[data-preview-mode='full-bleed'] #preview-root {
+        padding: 0;
+        min-height: 100vh;
+      }
+
+      body[data-preview-mode='full-bleed'] #preview-root > * {
+        width: 100%;
       }
 
       /* Hide scrollbars but allow scrolling */
@@ -110,7 +119,7 @@
       }
     </style>
   </head>
-  <body>
+  <body data-preview-mode="centered">
     <main>
       <h1 class="sr-only">Component Preview</h1>
       <div id="preview-root">

package/src/viewer/styles/globals.css

@@ -1,90 +1,50 @@
 /* ============================================
  * Fragments Viewer Theme System
  * ============================================
- * The viewer shell (sidebar, toolbar, panels) uses these variables.
- * These are INDEPENDENT from the UI library's --fui-* variables.
- *
- * The UI library components are rendered in the preview area which
- * has its own scoped --fui-* variables (see below).
+ * The viewer shell (sidebar, toolbar, panels) mirrors @fragments/ui
+ * tokens so previews and shell feel like the live docs experience.
  * ============================================ */
 
-/* Light mode (default) */
 :root {
-  --bg-primary: #ffffff;
-  --bg-secondary: #f2f2f2;
-  --bg-tertiary: #f5f5f5;
-  --bg-elevated: #ffffff;
-  --bg-hover: rgba(0, 0, 0, 0.04);
-  --bg-active: rgba(0, 0, 0, 0.08);
-
-  --text-primary: #171717;
-  --text-secondary: #525252;
-  --text-tertiary: #a3a3a3;
-  --text-muted: #d4d4d4;
-
-  --border: rgba(0, 0, 0, 0.08);
-  --border-subtle: rgba(0, 0, 0, 0.04);
-  --border-strong: rgba(0, 0, 0, 0.12);
-
-  --color-accent: #10a37f;
-  --color-accent-hover: #0d8a6a;
-  --color-accent-subtle: rgba(16, 163, 127, 0.1);
-
-  --color-success: #10a37f;
-  --color-success-bg: rgba(16, 163, 127, 0.1);
-  --color-warning: #f59e0b;
-  --color-warning-bg: rgba(245, 158, 11, 0.1);
-  --color-danger: #ef4444;
-  --color-danger-bg: rgba(239, 68, 68, 0.1);
-  --color-info: #3b82f6;
-  --color-info-bg: rgba(59, 130, 246, 0.1);
-
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
-
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-
-  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Dark mode - applied when .dark class is on html */
-.dark {
-  --bg-primary: #0d0d0d;
-  --bg-secondary: #171717;
-  --bg-tertiary: #1f1f1f;
-  --bg-elevated: #1a1a1a;
-  --bg-hover: rgba(255, 255, 255, 0.04);
-  --bg-active: rgba(255, 255, 255, 0.08);
-
-  --text-primary: #ececec;
-  --text-secondary: #9a9a9a;
-  --text-tertiary: #666666;
-  --text-muted: #404040;
-
-  --border: rgba(255, 255, 255, 0.08);
-  --border-subtle: rgba(255, 255, 255, 0.04);
-  --border-strong: rgba(255, 255, 255, 0.12);
-
-  --color-accent: #10a37f;
-  --color-accent-hover: #1eb894;
-  --color-accent-subtle: rgba(16, 163, 127, 0.15);
-
-  --color-success: #10a37f;
-  --color-success-bg: rgba(16, 163, 127, 0.15);
-  --color-warning: #f59e0b;
-  --color-warning-bg: rgba(245, 158, 11, 0.15);
-  --color-danger: #ef4444;
-  --color-danger-bg: rgba(239, 68, 68, 0.15);
-  --color-info: #60a5fa;
-  --color-info-bg: rgba(96, 165, 250, 0.15);
-
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+  --bg-primary: var(--fui-bg-primary, #ffffff);
+  --bg-secondary: var(--fui-bg-secondary, #f7f7f8);
+  --bg-tertiary: var(--fui-bg-tertiary, #f2f2f2);
+  --bg-elevated: var(--fui-bg-elevated, #ffffff);
+  --bg-hover: var(--fui-bg-hover, rgba(0, 0, 0, 0.06));
+  --bg-active: var(--fui-bg-active, rgba(0, 0, 0, 0.1));
+
+  --text-primary: var(--fui-text-primary, #171717);
+  --text-secondary: var(--fui-text-secondary, #525252);
+  --text-tertiary: var(--fui-text-tertiary, #8a8a8a);
+  --text-muted: var(--fui-text-tertiary, #8a8a8a);
+
+  --border: var(--fui-border, rgba(0, 0, 0, 0.1));
+  --border-subtle: var(--fui-border, rgba(0, 0, 0, 0.1));
+  --border-strong: var(--fui-border-strong, rgba(0, 0, 0, 0.16));
+
+  --color-accent: var(--fui-color-accent, #10a37f);
+  --color-accent-hover: var(--fui-color-accent-hover, #0d8a6a);
+  --color-accent-subtle: var(--fui-color-success-bg, rgba(16, 163, 127, 0.1));
+
+  --color-success: var(--fui-color-success, #10a37f);
+  --color-success-bg: var(--fui-color-success-bg, rgba(16, 163, 127, 0.1));
+  --color-warning: var(--fui-color-warning, #f59e0b);
+  --color-warning-bg: var(--fui-color-warning-bg, rgba(245, 158, 11, 0.1));
+  --color-danger: var(--fui-color-danger, #ef4444);
+  --color-danger-bg: var(--fui-color-danger-bg, rgba(239, 68, 68, 0.1));
+  --color-info: var(--fui-color-info, #3b82f6);
+  --color-info-bg: var(--fui-color-info-bg, rgba(59, 130, 246, 0.1));
+
+  --shadow-sm: var(--fui-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  --shadow-md: var(--fui-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.08));
+  --shadow-lg: var(--fui-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.12));
+
+  --radius-sm: var(--fui-radius-sm, 6px);
+  --radius-md: var(--fui-radius-md, 8px);
+  --radius-lg: var(--fui-radius-lg, 12px);
+
+  --transition-fast: var(--fui-transition-fast, 150ms ease);
+  --transition-normal: var(--fui-transition-normal, 200ms ease);
 }
 
 /* ============================================
@@ -105,6 +65,7 @@ html {
 }
 
 body {
+  font-family: var(--fui-font-sans, 'Geist Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   background-color: var(--bg-primary);
   color: var(--text-primary);
   -webkit-font-smoothing: antialiased;