@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/ViewportSelector.tsx

@@ -1,7 +1,14 @@
-import { useState, useEffect } from 'react';
-import clsx from 'clsx';
+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,128 +54,113 @@ export function ViewportSelector({
   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 isCustomViewport = viewport === 'custom';
   const displayLabel = viewport === 'custom'
-    ? `${customSize.width || '?'}×${customSize.height || 'auto'}`
+    ? `${customSize.width || '?'}\u00D7${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()}
+    <Menu>
+      <Menu.Trigger asChild>
+        <Button variant="ghost" size="sm" title="Viewport size">
+          <Stack direction="row" gap="xs" align="center">
+            <span style={{ display: 'inline-flex', width: '14px', height: '14px' }}>
+              <ViewportIcon />
+            </span>
+            <span>{displayLabel}</span>
+            <span style={{ display: 'inline-flex', width: '12px', height: '12px' }}>
+              <ChevronDownIcon />
+            </span>
+          </Stack>
+        </Button>
+      </Menu.Trigger>
+      <Menu.Content side="bottom" align="end">
+        <Menu.RadioGroup
+          value={isCustomViewport ? 'custom' : viewport}
+          onValueChange={(value: string) => {
+            if (value === 'custom') {
+              onViewportChange('custom');
+              return;
+            }
+            onViewportChange(value as ViewportPreset);
+          }}
         >
           {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>
+            <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>
+            </Menu.RadioItem>
           ))}
+        </Menu.RadioGroup>
 
-          <div className="border-t border-[--border-subtle] my-1" />
+        <Menu.Separator />
 
-          <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>
+        <Menu.Item onSelect={() => onViewportChange('custom')}>
+          <Stack direction="row" gap="sm" align="center" style={{
+            width: '100%',
+            fontWeight: isCustomViewport ? 600 : 400,
+            color: isCustomViewport ? 'var(--color-accent)' : undefined,
+          }}>
+            <SettingsIcon style={{ width: '16px', height: '16px' }} />
             Custom size
-            <ChevronDownIcon className={clsx('w-3 h-3 ml-auto transition-transform', showCustom && 'rotate-180')} />
-          </button>
+          </Stack>
+        </Menu.Item>
 
-          {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>
+        {isCustomViewport && (
+          <div
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            <Box padding="sm">
+              <Stack gap="sm">
+                <Stack direction="row" gap="sm" align="center">
+                  <Text size="2xs" color="tertiary" style={{ width: '20px' }}>W:</Text>
+                  <Input
+                    type="number"
+                    size="sm"
+                    value={customSize.width != null ? String(customSize.width) : ''}
+                    onChange={(value) => {
+                      const width = value ? parseInt(value, 10) : null;
+                      onCustomSizeChange({ ...customSize, width });
+                      onViewportChange('custom');
+                    }}
+                    placeholder="auto"
+                    style={{ width: '64px' }}
+                  />
+                  <Text size="2xs" color="tertiary">px</Text>
+                </Stack>
+                <Stack direction="row" gap="sm" align="center">
+                  <Text size="2xs" color="tertiary" style={{ width: '20px' }}>H:</Text>
+                  <Input
+                    type="number"
+                    size="sm"
+                    value={customSize.height != null ? String(customSize.height) : ''}
+                    onChange={(value) => {
+                      const height = value ? parseInt(value, 10) : null;
+                      onCustomSizeChange({ ...customSize, height });
+                      onViewportChange('custom');
+                    }}
+                    placeholder="auto"
+                    style={{ width: '64px' }}
+                  />
+                  <Text size="2xs" color="tertiary">px</Text>
+                </Stack>
+              </Stack>
+            </Box>
+          </div>
+        )}
+      </Menu.Content>
+    </Menu>
   );
 }
 

package/src/viewer/constants/ui.ts

@@ -58,37 +58,38 @@ export function getStatusConfig(status: string | undefined) {
 
 /**
  * Relationship type styling for related components.
+ * Uses inline-style-compatible color values (not Tailwind classes).
  */
 export const RELATIONSHIP_CONFIG = {
   alternative: {
     label: 'Alternative',
-    bg: 'bg-blue-500/10',
-    text: 'text-blue-500',
+    bgColor: 'rgba(59, 130, 246, 0.1)',
+    textColor: '#3b82f6',
   },
   parent: {
     label: 'Parent',
-    bg: 'bg-purple-500/10',
-    text: 'text-purple-500',
+    bgColor: 'rgba(147, 51, 234, 0.1)',
+    textColor: '#a855f7',
   },
   child: {
     label: 'Child',
-    bg: 'bg-emerald-500/10',
-    text: 'text-emerald-500',
+    bgColor: 'rgba(16, 185, 129, 0.1)',
+    textColor: '#10b981',
   },
   sibling: {
     label: 'Sibling',
-    bg: 'bg-amber-500/10',
-    text: 'text-amber-500',
+    bgColor: 'rgba(245, 158, 11, 0.1)',
+    textColor: '#f59e0b',
   },
   related: {
     label: 'Related',
-    bg: 'bg-[--bg-tertiary]',
-    text: 'text-secondary',
+    bgColor: 'var(--bg-tertiary)',
+    textColor: 'var(--text-secondary)',
   },
   composition: {
     label: 'Uses',
-    bg: 'bg-cyan-500/10',
-    text: 'text-cyan-500',
+    bgColor: 'rgba(6, 182, 212, 0.1)',
+    textColor: '#06b6d4',
   },
 } as const;
 
@@ -117,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';
@@ -167,18 +168,18 @@ export const STORAGE_KEYS = {
 export const HMR_STATUS = {
   connected: {
     label: 'Connected',
-    color: 'text-emerald-500',
-    bg: 'bg-emerald-500',
+    color: '#10b981',
+    bg: '#10b981',
   },
   reconnecting: {
     label: 'Reconnecting...',
-    color: 'text-amber-500',
-    bg: 'bg-amber-500',
+    color: '#f59e0b',
+    bg: '#f59e0b',
   },
   disconnected: {
     label: 'Disconnected',
-    color: 'text-red-500',
-    bg: 'bg-red-500',
+    color: '#ef4444',
+    bg: '#ef4444',
   },
 } as const;
 

package/src/viewer/entry.tsx

@@ -2,10 +2,13 @@ import { createRoot, type Root } from "react-dom/client";
 import { Component, type ReactNode, type ErrorInfo } from "react";
 import { App } from "./components/App.js";
 import { ThemeProvider } from "./components/ThemeProvider.js";
+import { ToastProvider } from "./components/Toast.js";
 import { AppSkeleton } from "./components/SkeletonLoader.js";
 // Viewer shell styles - independent from UI library
 // UI library styles are only loaded in the isolated preview area
 import "./styles/globals.css";
+// Fragments UI globals - adds --fui-* CSS variables for dogfooding UI components
+import "@fragments/ui";
 
 // App-level error boundary that catches any unhandled errors
 class AppErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean; error: Error | null; errorInfo: ErrorInfo | null }> {
@@ -244,9 +247,11 @@ if (rootElement) {
 
     appRoot?.render(
       <ThemeProvider>
-        <AppErrorBoundary>
-          <App segments={currentSegments} />
-        </AppErrorBoundary>
+        <ToastProvider position="bottom-right" duration={3000}>
+          <AppErrorBoundary>
+            <App segments={currentSegments} />
+          </AppErrorBoundary>
+        </ToastProvider>
       </ThemeProvider>
     );
   };

package/src/viewer/index.ts

@@ -6,9 +6,6 @@ export type { DevServerOptions } from "./server.js";
 export { segmentsPlugin } from "./vite-plugin.js";
 export type { SegmentsPluginOptions } from "./vite-plugin.js";
 
-// Components
-export { App } from "./components/App.js";
-export { Layout } from "./components/Layout.js";
-export { LeftSidebar } from "./components/LeftSidebar.js";
-export { RightSidebar } from "./components/RightSidebar.js";
-export { ThemeProvider, useTheme } from "./components/ThemeProvider.js";
+// Note: Viewer components (App, Layout, etc.) are NOT exported here.
+// They use @fragments/ui which is a Vite-only alias and can't be resolved by Node.js.
+// Vite serves these components directly from source during development.

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 */
@@ -73,6 +82,19 @@
         font-family: 'JetBrains Mono', ui-monospace, monospace;
       }
 
+      /* Visually hidden but accessible to screen readers */
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+      }
+
       /* Loading indicator */
       .preview-loading {
         display: flex;
@@ -97,13 +119,16 @@
       }
     </style>
   </head>
-  <body>
-    <div id="preview-root">
-      <div class="preview-loading">
-        <div class="spinner"></div>
-        <span>Loading preview...</span>
+  <body data-preview-mode="centered">
+    <main>
+      <h1 class="sr-only">Component Preview</h1>
+      <div id="preview-root">
+        <div class="preview-loading">
+          <div class="spinner"></div>
+          <span>Loading preview...</span>
+        </div>
       </div>
-    </div>
+    </main>
     <script type="module" src="/src/preview-frame-entry.tsx"></script>
   </body>
 </html>

package/src/viewer/server.ts

@@ -18,8 +18,6 @@ import {
   type InlineConfig,
 } from "vite";
 import react from "@vitejs/plugin-react";
-import tailwindcss from "tailwindcss";
-import autoprefixer from "autoprefixer";
 import { resolve, dirname, join } from "node:path";
 import { existsSync, realpathSync } from "node:fs";
 import { fileURLToPath } from "node:url";
@@ -30,8 +28,8 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 // At runtime, __dirname is dist/. Viewer assets live in src/viewer/.
 const cliPackageRoot = resolve(__dirname, "..");
 const viewerRoot = resolve(cliPackageRoot, "src/viewer");
-const viewerTailwindConfig = resolve(viewerRoot, "tailwind.config.js");
 const packagesRoot = resolve(cliPackageRoot, "..");
+const uiLibRoot = resolve(packagesRoot, "../libs/ui/src");
 
 export interface DevServerOptions {
   /** Port to run the server on */
@@ -124,8 +122,8 @@ export async function createDevServer(
       port,
       open: open ? "/fragments/" : false,
       fs: {
-        // Allow serving files from viewer package, project, and node_modules root
-        allow: [viewerRoot, projectRoot, configDir, dirname(nodeModulesPath), ...installedPkgRoots],
+        // Allow serving files from viewer package, project, UI library, and node_modules root
+        allow: [viewerRoot, uiLibRoot, projectRoot, configDir, dirname(nodeModulesPath), ...installedPkgRoots],
       },
     },
 
@@ -141,17 +139,8 @@ export async function createDevServer(
       }),
     ],
 
-    // CSS configuration for viewer's Tailwind
-    css: {
-      postcss: {
-        plugins: [
-          tailwindcss({
-            config: viewerTailwindConfig,
-          }),
-          autoprefixer(),
-        ],
-      },
-    },
+    // CSS configuration
+    css: {},
 
     optimizeDeps: {
       // Include common dependencies for faster startup
@@ -165,6 +154,8 @@ export async function createDevServer(
       alias: {
         // Allow importing from viewer package
         "@fragments/viewer": viewerRoot,
+        // Resolve @fragments/ui to the UI library source for dogfooding
+        "@fragments/ui": resolve(uiLibRoot, "index.ts"),
         // Resolve @fragments/core to the consolidated core source
         "@fragments/core": resolve(cliPackageRoot, "src/core/index.ts"),
         // Ensure ALL react imports resolve to project's node_modules