@fragments-sdk/cli 0.5.2 → 0.6.0

package/src/viewer/components/ViewportSelector.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import clsx from 'clsx';
+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';
 
@@ -32,128 +32,124 @@ 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 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()}
-        >
-          {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">
+    <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">
+        {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>
-                {preset.label}
-              </span>
+                <span style={{
+                  fontWeight: preset.value === viewport ? 600 : 400,
+                  color: preset.value === viewport ? 'var(--color-accent)' : undefined,
+                }}>
+                  {preset.label}
+                </span>
+              </Stack>
               {preset.width && (
-                <span className="text-[10px] text-tertiary">{preset.width}px</span>
+                <Text size="2xs" color="tertiary">
+                  {preset.width}px
+                </Text>
               )}
-            </button>
-          ))}
+            </Stack>
+          </Menu.Item>
+        ))}
 
-          <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={() => setShowCustom(!showCustom)}>
+          <Stack direction="row" gap="sm" align="center" style={{
+            width: '100%',
+            fontWeight: viewport === 'custom' ? 600 : 400,
+            color: viewport === 'custom' ? 'var(--color-accent)' : undefined,
+          }}>
+            <span>{'\u2699'}</span>
             Custom size
-            <ChevronDownIcon className={clsx('w-3 h-3 ml-auto transition-transform', showCustom && 'rotate-180')} />
-          </button>
+            <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 && (
-            <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>
+        {showCustom && (
+          <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;
 
@@ -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

@@ -73,6 +73,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;
@@ -98,12 +111,15 @@
     </style>
   </head>
   <body>
-    <div id="preview-root">
-      <div class="preview-loading">
-        <div class="spinner"></div>
-        <span>Loading preview...</span>
+    <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

package/src/viewer/styles/globals.css

@@ -1,7 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 /* ============================================
  * Fragments Viewer Theme System
  * ============================================
@@ -330,6 +326,10 @@ td {
  * Animations
  * ============================================ */
 
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
 @keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }

package/src/viewer/utils/a11y-fixes.ts

@@ -10,6 +10,7 @@
 
 import type { ImpactValue } from 'axe-core';
 import type { StaticFixSuggestion, ElementFix, SerializedNode } from '../types/a11y.js';
+import { parseColor, suggestFix, rgbToHex } from '../../theme/contrast.js';
 
 /**
  * WCAG criteria references
@@ -217,24 +218,36 @@ function generateContrastFix(node: SerializedNode): ElementFix | null {
   const data = parseContrastData(node);
   if (!data?.fgColor || !data?.bgColor) return null;
 
-  const { fgColor, bgColor, contrastRatio, requiredRatio } = data;
+  const { fgColor, bgColor, contrastRatio: ratio, requiredRatio } = data;
 
   // Safely convert to number and format
-  const currentRatioNum = typeof contrastRatio === 'number' ? contrastRatio : parseFloat(String(contrastRatio || ''));
+  const currentRatioNum = typeof ratio === 'number' ? ratio : parseFloat(String(ratio || ''));
   const requiredRatioNum = typeof requiredRatio === 'number' ? requiredRatio : parseFloat(String(requiredRatio || ''));
 
   const currentRatio = !isNaN(currentRatioNum) ? currentRatioNum.toFixed(2) : 'unknown';
-  const required = !isNaN(requiredRatioNum) ? requiredRatioNum.toFixed(1) : '4.5';
-
-  // Suggest darkening text if it's light, or lightening if it's dark
-  const suggestion = `Adjust colors to meet ${required}:1 contrast ratio (currently ${currentRatio}:1)`;
-
-  return {
-    originalHtml: node.html,
-    fixedHtml: node.html, // Can't auto-generate fixed HTML without color calculation
-    explanation: `Text color ${fgColor} on background ${bgColor} has insufficient contrast. ${suggestion}`,
-    autoFixable: false,
-  };
+  const required = !isNaN(requiredRatioNum) ? requiredRatioNum : 4.5;
+
+  // Use real color math to suggest a corrected foreground color
+  try {
+    const fgRgb = parseColor(fgColor);
+    const bgRgb = parseColor(bgColor);
+    const correctedHex = suggestFix(fgRgb, bgRgb, required);
+
+    return {
+      originalHtml: node.html,
+      fixedHtml: node.html,
+      explanation: `Text color ${fgColor} on background ${bgColor} has insufficient contrast (${currentRatio}:1, need ${required}:1). Suggested foreground: ${correctedHex}`,
+      autoFixable: true,
+    };
+  } catch {
+    // Fall back to non-auto-fixable if color parsing fails
+    return {
+      originalHtml: node.html,
+      fixedHtml: node.html,
+      explanation: `Text color ${fgColor} on background ${bgColor} has insufficient contrast (${currentRatio}:1, need ${required}:1). Adjust the foreground color to meet the required ratio.`,
+      autoFixable: false,
+    };
+  }
 }
 
 /**
@@ -413,9 +426,11 @@ export function getImpactDescription(impact: ImpactValue | null): string {
 }
 
 /**
- * Get impact color class for styling
+ * Get impact styling for inline styles and Badge variant mapping
  */
 export function getImpactColorClass(impact: ImpactValue | null): {
+  variant: 'error' | 'warning' | 'info' | 'default';
+  color: string;
   bg: string;
   text: string;
   border: string;
@@ -424,32 +439,40 @@ export function getImpactColorClass(impact: ImpactValue | null): {
   switch (impact) {
     case 'critical':
       return {
-        bg: 'bg-red-100 dark:bg-red-950/50',
-        text: 'text-red-700 dark:text-red-300',
-        border: 'border-red-300 dark:border-red-700',
-        borderLeft: 'border-l-red-500',
+        variant: 'error',
+        color: 'var(--color-danger)',
+        bg: 'var(--color-danger-bg)',
+        text: 'var(--color-danger)',
+        border: 'var(--color-danger)',
+        borderLeft: 'var(--color-danger)',
       };
     case 'serious':
       return {
-        bg: 'bg-orange-100 dark:bg-orange-950/50',
-        text: 'text-orange-700 dark:text-orange-300',
-        border: 'border-orange-300 dark:border-orange-700',
-        borderLeft: 'border-l-orange-500',
+        variant: 'error',
+        color: 'var(--color-danger)',
+        bg: 'var(--color-danger-bg)',
+        text: 'var(--color-danger)',
+        border: 'var(--color-danger)',
+        borderLeft: 'var(--color-danger)',
       };
     case 'moderate':
       return {
-        bg: 'bg-amber-100 dark:bg-amber-950/50',
-        text: 'text-amber-700 dark:text-amber-300',
-        border: 'border-amber-300 dark:border-amber-700',
-        borderLeft: 'border-l-amber-500',
+        variant: 'warning',
+        color: 'var(--color-warning)',
+        bg: 'var(--color-warning-bg)',
+        text: 'var(--color-warning)',
+        border: 'var(--color-warning)',
+        borderLeft: 'var(--color-warning)',
       };
     case 'minor':
     default:
       return {
-        bg: 'bg-yellow-100 dark:bg-yellow-950/50',
-        text: 'text-yellow-700 dark:text-yellow-300',
-        border: 'border-yellow-300 dark:border-yellow-700',
-        borderLeft: 'border-l-yellow-500',
+        variant: 'info',
+        color: 'var(--color-info)',
+        bg: 'var(--color-info-bg)',
+        text: 'var(--color-info)',
+        border: 'var(--color-info)',
+        borderLeft: 'var(--color-info)',
       };
   }
 }

package/dist/chunk-ICAIQ57V.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/core/constants.ts","../src/core/schema.ts"],"sourcesContent":["/**\n * Brand constants for easy rebranding if domain availability requires it.\n * All naming throughout the codebase should reference these constants.\n */\nexport const BRAND = {\n  /** Display name (e.g., \"Fragments\") */\n  name: \"Fragments\",\n\n  /** Lowercase name for file paths and CLI (e.g., \"fragments\") */\n  nameLower: \"fragments\",\n\n  /** File extension for fragment definition files (e.g., \".fragment.tsx\") */\n  fileExtension: \".fragment.tsx\",\n\n  /** Legacy file extension for segments (still supported for migration) */\n  legacyFileExtension: \".segment.tsx\",\n\n  /** JSON file extension for compiled output */\n  jsonExtension: \".fragment.json\",\n\n  /** Default output file name (e.g., \"fragments.json\") */\n  outFile: \"fragments.json\",\n\n  /** Config file name (e.g., \"fragments.config.ts\") */\n  configFile: \"fragments.config.ts\",\n\n  /** Legacy config file name (still supported for migration) */\n  legacyConfigFile: \"segments.config.ts\",\n\n  /** CLI command name (e.g., \"fragments\") */\n  cliCommand: \"fragments\",\n\n  /** Package scope (e.g., \"@fragments\") */\n  packageScope: \"@fragments\",\n\n  /** Directory for storing fragments, registry, and cache */\n  dataDir: \".fragments\",\n\n  /** Components subdirectory within .fragments/ */\n  componentsDir: \"components\",\n\n  /** Registry file name */\n  registryFile: \"registry.json\",\n\n  /** Context file name (AI-ready markdown) */\n  contextFile: \"context.md\",\n\n  /** Screenshots subdirectory */\n  screenshotsDir: \"screenshots\",\n\n  /** Cache subdirectory (gitignored) */\n  cacheDir: \"cache\",\n\n  /** Diff output subdirectory (gitignored) */\n  diffDir: \"diff\",\n\n  /** Manifest filename */\n  manifestFile: \"manifest.json\",\n\n  /** Prefix for localStorage keys (e.g., \"fragments-\") */\n  storagePrefix: \"fragments-\",\n\n  /** Static viewer HTML file name */\n  viewerHtmlFile: \"fragments-viewer.html\",\n\n  /** MCP tool name prefix (e.g., \"fragments_\") */\n  mcpToolPrefix: \"fragments_\",\n\n  /** File extension for block definition files */\n  blockFileExtension: \".block.ts\",\n\n  /** @deprecated Use blockFileExtension instead */\n  recipeFileExtension: \".recipe.ts\",\n\n  /** Vite plugin namespace */\n  vitePluginNamespace: \"fragments-core-shim\",\n} as const;\n\nexport type Brand = typeof BRAND;\n\n/**\n * Default configuration values for the service.\n * These can be overridden in fragments.config.ts\n */\nexport const DEFAULTS = {\n  /** Default viewport dimensions */\n  viewport: {\n    width: 1280,\n    height: 800,\n  },\n\n  /** Default diff threshold (percentage) */\n  diffThreshold: 5,\n\n  /** Browser pool size */\n  poolSize: 3,\n\n  /** Idle timeout before browser shutdown (ms) - 5 minutes */\n  idleTimeoutMs: 5 * 60 * 1000,\n\n  /** Delay after render before capture (ms) */\n  captureDelayMs: 100,\n\n  /** Font loading timeout (ms) */\n  fontTimeoutMs: 3000,\n\n  /** Default theme */\n  theme: \"light\" as const,\n\n  /** Dev server port */\n  port: 6006,\n} as const;\n\nexport type Defaults = typeof DEFAULTS;\n","import { z } from 'zod';\n\n/**\n * Zod schemas for runtime validation of segment definitions\n */\n\n// Figma property mapping schemas\nconst figmaStringMappingSchema = z.object({\n  __type: z.literal('figma-string'),\n  figmaProperty: z.string().min(1),\n});\n\nconst figmaBooleanMappingSchema = z.object({\n  __type: z.literal('figma-boolean'),\n  figmaProperty: z.string().min(1),\n  valueMapping: z.object({ true: z.unknown(), false: z.unknown() }).optional(),\n});\n\nconst figmaEnumMappingSchema = z.object({\n  __type: z.literal('figma-enum'),\n  figmaProperty: z.string().min(1),\n  valueMapping: z.record(z.unknown()),\n});\n\nconst figmaInstanceMappingSchema = z.object({\n  __type: z.literal('figma-instance'),\n  figmaProperty: z.string().min(1),\n});\n\nconst figmaChildrenMappingSchema = z.object({\n  __type: z.literal('figma-children'),\n  layers: z.array(z.string().min(1)),\n});\n\nconst figmaTextContentMappingSchema = z.object({\n  __type: z.literal('figma-text-content'),\n  layer: z.string().min(1),\n});\n\nexport const figmaPropMappingSchema = z.discriminatedUnion('__type', [\n  figmaStringMappingSchema,\n  figmaBooleanMappingSchema,\n  figmaEnumMappingSchema,\n  figmaInstanceMappingSchema,\n  figmaChildrenMappingSchema,\n  figmaTextContentMappingSchema,\n]);\n\nexport const segmentMetaSchema = z.object({\n  name: z.string().min(1),\n  description: z.string().min(1),\n  category: z.string().min(1),\n  tags: z.array(z.string()).optional(),\n  status: z.enum(['stable', 'beta', 'deprecated', 'experimental']).optional(),\n  since: z.string().optional(),\n  figma: z.string().url().optional(),\n  figmaProps: z.record(figmaPropMappingSchema).optional(),\n});\n\nexport const segmentUsageSchema = z.object({\n  when: z.array(z.string()).min(1),\n  whenNot: z.array(z.string()).min(1),\n  guidelines: z.array(z.string()).optional(),\n  accessibility: z.array(z.string()).optional(),\n});\n\nexport const propTypeSchema: z.ZodType<string> = z.enum([\n  'string',\n  'number',\n  'boolean',\n  'enum',\n  'function',\n  'node',\n  'element',\n  'object',\n  'array',\n  'union',\n  'custom',\n]);\n\nexport const propDefinitionSchema = z.object({\n  type: propTypeSchema,\n  values: z.array(z.string()).readonly().optional(),\n  default: z.unknown().optional(),\n  description: z.string().optional(),\n  required: z.boolean().optional(),\n  constraints: z.array(z.string()).optional(),\n  typeDetails: z.record(z.unknown()).optional(),\n});\n\nexport const relationshipTypeSchema = z.enum([\n  'alternative',\n  'sibling',\n  'parent',\n  'child',\n  'composition',\n]);\n\nexport const componentRelationSchema = z.object({\n  component: z.string().min(1),\n  relationship: relationshipTypeSchema,\n  note: z.string().min(1),\n});\n\nexport const segmentVariantSchema = z.object({\n  name: z.string().min(1),\n  description: z.string().min(1),\n  render: z.function().returns(z.unknown()),\n  code: z.string().optional(),\n  figma: z.string().url().optional(),\n});\n\n/**\n * Schema for banned patterns in codebase\n */\nexport const segmentBanSchema = z.object({\n  pattern: z.string().min(1),\n  message: z.string().min(1),\n});\n\n/**\n * Schema for agent-optimized contract metadata\n */\nexport const segmentContractSchema = z.object({\n  propsSummary: z.array(z.string()).optional(),\n  a11yRules: z.array(z.string()).optional(),\n  bans: z.array(segmentBanSchema).optional(),\n  scenarioTags: z.array(z.string()).optional(),\n});\n\n/**\n * Schema for provenance tracking of generated segments\n */\nexport const segmentGeneratedSchema = z.object({\n  source: z.enum(['storybook', 'manual', 'ai']),\n  sourceFile: z.string().optional(),\n  confidence: z.number().min(0).max(1).optional(),\n  timestamp: z.string().datetime().optional(),\n});\n\n/**\n * Schema for AI-specific metadata for playground context generation\n */\nexport const aiMetadataSchema = z.object({\n  compositionPattern: z.enum(['compound', 'simple', 'controlled']).optional(),\n  subComponents: z.array(z.string()).optional(),\n  requiredChildren: z.array(z.string()).optional(),\n  commonPatterns: z.array(z.string()).optional(),\n});\n\n/**\n * Schema for block definitions\n */\nexport const blockDefinitionSchema = z.object({\n  name: z.string().min(1),\n  description: z.string().min(1),\n  category: z.string().min(1),\n  components: z.array(z.string().min(1)).min(1),\n  code: z.string().min(1),\n  tags: z.array(z.string()).optional(),\n});\n\nexport const segmentDefinitionSchema = z.object({\n  component: z.any(), // Allow any component type (function, class, forwardRef, etc.)\n  meta: segmentMetaSchema,\n  usage: segmentUsageSchema,\n  props: z.record(propDefinitionSchema),\n  relations: z.array(componentRelationSchema).optional(),\n  variants: z.array(segmentVariantSchema), // Allow empty variants array\n  contract: segmentContractSchema.optional(),\n  ai: aiMetadataSchema.optional(),\n  _generated: segmentGeneratedSchema.optional(),\n});\n\n/**\n * Config schema - validates required fields, passes through optional config objects.\n * Type definitions are in types.ts - schema just ensures basic structure.\n */\nexport const segmentsConfigSchema = z.object({\n  include: z.array(z.string()).min(1),\n  exclude: z.array(z.string()).optional(),\n  components: z.array(z.string()).optional(),\n  outFile: z.string().optional(),\n  framework: z.enum(['react', 'vue', 'svelte']).optional(),\n  figmaFile: z.string().url().optional(),\n  figmaToken: z.string().optional(),\n  screenshots: z.object({}).passthrough().optional(),\n  service: z.object({}).passthrough().optional(),\n  registry: z.object({}).passthrough().optional(),\n  tokens: z.object({\n    include: z.array(z.string()).min(1),\n  }).passthrough().optional(),\n});\n\n/**\n * @deprecated Use blockDefinitionSchema instead\n */\nexport const recipeDefinitionSchema = blockDefinitionSchema;\n"],"mappings":"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","names":[]}