@fragments-sdk/cli 0.7.17 → 0.8.1

package/src/core/performance-presets.ts

@@ -0,0 +1,142 @@
+/**
+ * Performance budget presets and classification utilities.
+ *
+ * ESLint model: global defaults, zero-config, auto-measurement.
+ * Users configure 0-3 numbers. Per-component overrides are the `eslint-disable` equivalent.
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface PerformanceBudgets {
+  /** Maximum gzipped bundle size in bytes */
+  bundleSize: number;
+}
+
+export interface PerformanceConfig {
+  preset: string;
+  budgets: PerformanceBudgets;
+}
+
+export type ComplexityTier = 'lightweight' | 'moderate' | 'heavy';
+
+export interface PerformanceData {
+  /** Gzipped bundle size in bytes */
+  bundleSize: number;
+  /** Raw (minified, not gzipped) bundle size in bytes */
+  rawSize: number;
+  /** Complexity classification */
+  complexity: ComplexityTier;
+  /** Percentage of budget used (0-100+) */
+  budgetPercent: number;
+  /** Whether the component exceeds its budget */
+  overBudget: boolean;
+  /** ISO timestamp when measured */
+  measuredAt: string;
+}
+
+export interface PerformanceSummary {
+  /** Preset name used */
+  preset: string;
+  /** Budget applied in bytes */
+  budget: number;
+  /** Total components measured */
+  total: number;
+  /** Number of components over budget */
+  overBudget: number;
+  /** Distribution by tier */
+  tiers: Record<ComplexityTier, number>;
+}
+
+// ---------------------------------------------------------------------------
+// Presets
+// ---------------------------------------------------------------------------
+
+const PRESETS: Record<string, PerformanceBudgets> = {
+  strict: { bundleSize: 8 * 1024 },     // 8KB gzipped
+  standard: { bundleSize: 15 * 1024 },   // 15KB gzipped
+  relaxed: { bundleSize: 30 * 1024 },    // 30KB gzipped
+};
+
+export const PRESET_NAMES = Object.keys(PRESETS) as readonly string[];
+
+// ---------------------------------------------------------------------------
+// Resolution
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve a performance config from user input.
+ * Accepts a preset name string or a custom config object.
+ */
+export function resolvePerformanceConfig(
+  input: string | { preset?: string; budgets?: Partial<PerformanceBudgets> } | undefined
+): PerformanceConfig {
+  if (!input) {
+    return { preset: 'standard', budgets: PRESETS.standard };
+  }
+
+  if (typeof input === 'string') {
+    const budgets = PRESETS[input];
+    if (!budgets) {
+      throw new Error(
+        `Unknown performance preset "${input}". Available: ${PRESET_NAMES.join(', ')}`
+      );
+    }
+    return { preset: input, budgets };
+  }
+
+  const presetName = input.preset ?? 'standard';
+  const baseBudgets = PRESETS[presetName];
+  if (!baseBudgets) {
+    throw new Error(
+      `Unknown performance preset "${presetName}". Available: ${PRESET_NAMES.join(', ')}`
+    );
+  }
+
+  return {
+    preset: presetName,
+    budgets: {
+      bundleSize: input.budgets?.bundleSize ?? baseBudgets.bundleSize,
+    },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Classification
+// ---------------------------------------------------------------------------
+
+/**
+ * Classify a component's complexity based on gzipped bundle size.
+ *
+ * - lightweight: < 5KB — simple, leaf components
+ * - moderate: < 15KB — typical composed components
+ * - heavy: >= 15KB — complex widgets with dependencies
+ */
+export function classifyComplexity(gzipBytes: number): ComplexityTier {
+  if (gzipBytes < 5 * 1024) return 'lightweight';
+  if (gzipBytes < 15 * 1024) return 'moderate';
+  return 'heavy';
+}
+
+// ---------------------------------------------------------------------------
+// Formatting helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Format bytes to a human-readable string (e.g. "2.1KB", "15.3KB").
+ */
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes}B`;
+  const kb = bytes / 1024;
+  return kb < 10 ? `${kb.toFixed(1)}KB` : `${Math.round(kb)}KB`;
+}
+
+/**
+ * Create a visual budget bar for terminal output.
+ */
+export function budgetBar(percent: number, width = 20): string {
+  const filled = Math.min(Math.round((percent / 100) * width), width);
+  const bar = '█'.repeat(filled) + '░'.repeat(width - filled);
+  return percent > 100 ? `\x1b[31m${bar}\x1b[0m` : `\x1b[32m${bar}\x1b[0m`;
+}

package/src/core/schema.ts

@@ -133,6 +133,7 @@ export const fragmentContractSchema = z.object({
   a11yRules: z.array(z.string()).optional(),
   bans: z.array(fragmentBanSchema).optional(),
   scenarioTags: z.array(z.string()).optional(),
+  performanceBudget: z.number().positive().optional(),
 });
 
 /**
@@ -203,6 +204,15 @@ export const fragmentsConfigSchema = z.object({
     requireFullSnippet: z.boolean().optional(),
     allowedExternalModules: z.array(z.string().min(1)).optional(),
   }).optional(),
+  performance: z.union([
+    z.enum(['strict', 'standard', 'relaxed']),
+    z.object({
+      preset: z.enum(['strict', 'standard', 'relaxed']).optional(),
+      budgets: z.object({
+        bundleSize: z.number().positive().optional(),
+      }).optional(),
+    }),
+  ]).optional(),
 });
 
 /**

package/src/core/types.ts

@@ -303,6 +303,9 @@ export interface FragmentContract {
 
   /** Scenario tags for use-case matching (e.g., "form.submit", "navigation.primary") */
   scenarioTags?: string[];
+
+  /** Per-component performance budget override in bytes (gzipped). Overrides global budget. */
+  performanceBudget?: number;
 }
 
 /**
@@ -493,6 +496,9 @@ export interface FragmentsConfig {
 
   /** Snippet/render policy validation */
   snippets?: SnippetPolicyConfig;
+
+  /** Performance budgets: preset name or custom config */
+  performance?: string | { preset?: string; budgets?: { bundleSize?: number } };
 }
 
 /**

package/src/mcp/server.ts

@@ -1536,6 +1536,83 @@ export function createMcpServer(config: McpServerConfig): Server {
           }
         }
 
+        // ================================================================
+        // PERF — query performance data
+        // ================================================================
+        case TOOL_NAMES.perf: {
+          const data = await loadFragments();
+          const componentName = (args?.component as string) ?? undefined;
+          const sort = (args?.sort as string) ?? 'size';
+          const filter = (args?.filter as string) ?? undefined;
+
+          // Collect components with performance data
+          let entries = Object.entries(data.fragments)
+            .filter(([, f]) => f.performance)
+            .map(([name, f]) => ({
+              name,
+              ...f.performance!,
+            }));
+
+          if (entries.length === 0) {
+            return {
+              content: [{
+                type: 'text' as const,
+                text: JSON.stringify({
+                  total: 0,
+                  components: [],
+                  hint: `No performance data found. Run \`${BRAND.cliCommand} perf\` first to measure bundle sizes.`,
+                }, null, 2),
+              }],
+            };
+          }
+
+          // Filter by specific component
+          if (componentName) {
+            entries = entries.filter(
+              (e) => e.name.toLowerCase() === componentName.toLowerCase()
+            );
+            if (entries.length === 0) {
+              throw new Error(
+                `No performance data for "${componentName}". Run \`${BRAND.cliCommand} perf --component ${componentName}\` first.`
+              );
+            }
+          }
+
+          // Filter by tier or over-budget
+          if (filter) {
+            if (filter === 'over-budget') {
+              entries = entries.filter((e) => e.overBudget);
+            } else {
+              entries = entries.filter((e) => e.complexity === filter);
+            }
+          }
+
+          // Sort
+          switch (sort) {
+            case 'name':
+              entries.sort((a, b) => a.name.localeCompare(b.name));
+              break;
+            case 'budget':
+              entries.sort((a, b) => b.budgetPercent - a.budgetPercent);
+              break;
+            case 'size':
+            default:
+              entries.sort((a, b) => b.bundleSize - a.bundleSize);
+              break;
+          }
+
+          return {
+            content: [{
+              type: 'text' as const,
+              text: JSON.stringify({
+                total: entries.length,
+                summary: data.performanceSummary ?? undefined,
+                components: entries,
+              }, null, 2),
+            }],
+          };
+        }
+
         default:
           throw new Error(`Unknown tool: ${name}`);
       }

package/src/viewer/components/BottomPanel.tsx

@@ -14,6 +14,7 @@ import { InteractionsPanel } from './InteractionsPanel.js';
 import { ActionsPanel } from './ActionsPanel.js';
 import { ComponentGraph } from './ComponentGraph.js';
 import { ContractPanel } from './ContractPanel.js';
+import { PerformancePanel } from './PerformancePanel.js';
 import type { ActivePanel } from '../hooks/useAppState.js';
 import type { ActionLog } from '../hooks/useActions.js';
 
@@ -113,6 +114,7 @@ export const BottomPanel = memo(function BottomPanel({
             </Tabs.Tab>
             <Tabs.Tab value="graph">Graph</Tabs.Tab>
             <Tabs.Tab value="contract">Contract</Tabs.Tab>
+            <Tabs.Tab value="performance">Performance</Tabs.Tab>
           </Tabs.List>
         </Tabs>
       }
@@ -179,6 +181,12 @@ export const BottomPanel = memo(function BottomPanel({
           componentName={fragment.meta.name}
         />
       )}
+
+      {activePanel === 'performance' && (
+        <PerformancePanel
+          componentName={fragment.meta.name}
+        />
+      )}
     </ResizablePanel>
   );
 });

package/src/viewer/components/PerformancePanel.tsx

@@ -0,0 +1,301 @@
+/**
+ * Performance Panel — bundle size visualization in the viewer.
+ *
+ * Fetches performance data from /fragments/perf-data (served by the
+ * Vite dev server from fragments.json) and displays:
+ * - Gzipped and raw bundle size
+ * - Complexity tier badge
+ * - Budget bar with percentage
+ * - Over-budget alert when applicable
+ * - Empty state when no data (prompts `fragments perf`)
+ */
+
+import { useState, useEffect } from 'react';
+import { Card, Badge, Text, Stack, EmptyState, Alert, Collapsible } from '@fragments-sdk/ui';
+import { BRAND } from '../../core/index.js';
+
+interface ImportEntry {
+  path: string;
+  bytes: number;
+  percent: number;
+}
+
+interface PerformanceData {
+  bundleSize: number;
+  rawSize: number;
+  complexity: 'lightweight' | 'moderate' | 'heavy';
+  budgetPercent: number;
+  overBudget: boolean;
+  measuredAt: string;
+  imports?: ImportEntry[];
+}
+
+interface PerfDataResponse {
+  summary: {
+    preset: string;
+    budget: number;
+    total: number;
+    overBudget: number;
+    tiers: Record<string, number>;
+  } | null;
+  components: Record<string, PerformanceData>;
+}
+
+interface PerformancePanelProps {
+  componentName: string;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  const kb = bytes / 1024;
+  return kb < 10 ? `${kb.toFixed(1)} KB` : `${Math.round(kb)} KB`;
+}
+
+function tierVariant(tier: string): 'success' | 'warning' | 'danger' {
+  switch (tier) {
+    case 'lightweight': return 'success';
+    case 'moderate': return 'warning';
+    case 'heavy': return 'danger';
+    default: return 'warning';
+  }
+}
+
+function BudgetBar({ percent }: { percent: number }) {
+  const capped = Math.min(percent, 100);
+  const isOver = percent > 100;
+  const color = isOver ? 'var(--fui-color-danger, #e53e3e)'
+    : percent > 80 ? 'var(--fui-color-warning, #dd6b20)'
+    : 'var(--fui-color-success, #38a169)';
+
+  return (
+    <div style={{ width: '100%' }}>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        marginBottom: '4px',
+      }}>
+        <Text size="sm" color="secondary">Budget usage</Text>
+        <Text size="sm" weight="semibold" style={{ color }}>
+          {percent}%
+        </Text>
+      </div>
+      <div style={{
+        width: '100%',
+        height: '8px',
+        borderRadius: '4px',
+        backgroundColor: 'var(--fui-color-surface-2, #e2e8f0)',
+        overflow: 'hidden',
+      }}>
+        <div style={{
+          width: `${capped}%`,
+          height: '100%',
+          borderRadius: '4px',
+          backgroundColor: color,
+          transition: 'width 0.3s ease',
+        }} />
+      </div>
+    </div>
+  );
+}
+
+/** Labels are already clean from the backend (e.g., "react-markdown", "Markdown (self)") */
+
+function ImportBreakdown({ imports, rawSize }: { imports: ImportEntry[]; rawSize: number }) {
+  return (
+    <Collapsible>
+      <Collapsible.Trigger style={{ cursor: 'pointer' }}>
+        <Text size="sm" weight="semibold">
+          Import breakdown ({imports.length} file{imports.length !== 1 ? 's' : ''})
+        </Text>
+      </Collapsible.Trigger>
+      <Collapsible.Content>
+        <div style={{ marginTop: '8px' }}>
+          {imports.map((imp) => {
+            const barWidth = Math.max(1, Math.round(imp.percent / 2));
+            return (
+              <div
+                key={imp.path}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '1fr 70px 45px minmax(20px, 100px)',
+                  alignItems: 'center',
+                  gap: '8px',
+                  padding: '4px 0',
+                  borderBottom: '1px solid var(--fui-color-border, #2d3748)',
+                }}
+              >
+                <Text
+                  size="xs"
+                  color="secondary"
+                  style={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    fontFamily: 'var(--fui-font-mono, monospace)',
+                  }}
+                  title={imp.path}
+                >
+                  {imp.path}
+                </Text>
+                <Text size="xs" weight="semibold" style={{ textAlign: 'right' }}>
+                  {formatBytes(imp.bytes)}
+                </Text>
+                <Text size="xs" color="tertiary" style={{ textAlign: 'right' }}>
+                  {imp.percent}%
+                </Text>
+                <div style={{
+                  height: '6px',
+                  borderRadius: '3px',
+                  backgroundColor: 'var(--fui-color-surface-2, #2d3748)',
+                  overflow: 'hidden',
+                }}>
+                  <div style={{
+                    width: `${Math.min(barWidth * 2, 100)}%`,
+                    height: '100%',
+                    borderRadius: '3px',
+                    backgroundColor: imp.percent > 50
+                      ? 'var(--fui-color-danger, #e53e3e)'
+                      : imp.percent > 20
+                      ? 'var(--fui-color-warning, #dd6b20)'
+                      : 'var(--fui-color-accent, #4299e1)',
+                  }} />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </Collapsible.Content>
+    </Collapsible>
+  );
+}
+
+export function PerformancePanel({ componentName }: PerformancePanelProps) {
+  const [perfData, setPerfData] = useState<PerformanceData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [noData, setNoData] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function fetchPerfData() {
+      setLoading(true);
+      try {
+        const res = await fetch('/fragments/perf-data');
+        if (!res.ok) {
+          setNoData(true);
+          return;
+        }
+        const data: PerfDataResponse = await res.json();
+        if (!cancelled) {
+          const componentPerf = data.components[componentName];
+          if (componentPerf) {
+            setPerfData(componentPerf);
+            setNoData(false);
+          } else {
+            setPerfData(null);
+            setNoData(true);
+          }
+        }
+      } catch {
+        if (!cancelled) {
+          setNoData(true);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    fetchPerfData();
+    return () => { cancelled = true; };
+  }, [componentName]);
+
+  if (loading) {
+    return (
+      <div style={{ padding: '16px' }}>
+        <Text size="sm" color="secondary">Loading performance data...</Text>
+      </div>
+    );
+  }
+
+  if (noData || !perfData) {
+    return (
+      <div style={{ padding: '16px' }}>
+        <EmptyState>
+          <EmptyState.Title>No performance data</EmptyState.Title>
+          <EmptyState.Description>
+            Run <code>{BRAND.cliCommand} perf</code> to measure bundle sizes, then reload.
+          </EmptyState.Description>
+        </EmptyState>
+      </div>
+    );
+  }
+
+  const { bundleSize, rawSize, complexity, budgetPercent, overBudget, measuredAt } = perfData;
+  const measuredDate = new Date(measuredAt).toLocaleString();
+
+  return (
+    <div style={{ padding: '16px' }}>
+      <Stack gap="md">
+        {overBudget && (
+          <Alert variant="danger">
+            <strong>{componentName}</strong> exceeds its performance budget ({budgetPercent}% of allowed size).
+            Consider code splitting, lazy loading heavy dependencies, or tree-shaking unused exports.
+          </Alert>
+        )}
+
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px' }}>
+          <Card>
+            <Card.Body>
+              <Stack gap="xs">
+                <Text size="sm" color="secondary">Gzipped</Text>
+                <Text size="xl" weight="bold">{formatBytes(bundleSize)}</Text>
+              </Stack>
+            </Card.Body>
+          </Card>
+
+          <Card>
+            <Card.Body>
+              <Stack gap="xs">
+                <Text size="sm" color="secondary">Raw (minified)</Text>
+                <Text size="xl" weight="bold">{formatBytes(rawSize)}</Text>
+              </Stack>
+            </Card.Body>
+          </Card>
+
+          <Card>
+            <Card.Body>
+              <Stack gap="xs">
+                <Text size="sm" color="secondary">Complexity</Text>
+                <div>
+                  <Badge variant={tierVariant(complexity)} size="lg">
+                    {complexity}
+                  </Badge>
+                </div>
+              </Stack>
+            </Card.Body>
+          </Card>
+        </div>
+
+        <Card>
+          <Card.Body>
+            <BudgetBar percent={budgetPercent} />
+          </Card.Body>
+        </Card>
+
+        {perfData.imports && perfData.imports.length > 0 && (
+          <Card>
+            <Card.Body>
+              <ImportBreakdown imports={perfData.imports} rawSize={rawSize} />
+            </Card.Body>
+          </Card>
+        )}
+
+        <Text size="xs" color="tertiary">
+          Measured {measuredDate}. CSS excluded (JS-only measurement).
+        </Text>
+      </Stack>
+    </div>
+  );
+}

package/src/viewer/hooks/useAppState.ts

@@ -5,7 +5,7 @@
 
 import { useReducer, useCallback, useMemo } from 'react';
 
-export type ActivePanel = 'code' | 'styles' | 'accessibility' | 'interactions' | 'actions' | 'graph' | 'contract';
+export type ActivePanel = 'code' | 'styles' | 'accessibility' | 'interactions' | 'actions' | 'graph' | 'contract' | 'performance';
 
 interface AppUIState {
   activePanel: ActivePanel;

package/src/viewer/vite-plugin.ts

@@ -1412,6 +1412,42 @@ export function fragmentsPlugin(options: FragmentsPluginOptions): Plugin[] {
           return;
         }
 
+        // Handle /fragments/perf-data — serve performance data from fragments.json
+        if (req.url === "/fragments/perf-data" && req.method === "GET") {
+          try {
+            const { readFile: readFileAsync } = await import("node:fs/promises");
+            const { resolve: resolvePath, join: joinPath } = await import("node:path");
+            const outFilePath = resolvePath(
+              projectRoot,
+              config.outFile ?? BRAND.outFile
+            );
+            const raw = await readFileAsync(outFilePath, "utf-8");
+            const parsed = JSON.parse(raw);
+
+            // Extract per-component performance + summary
+            const components: Record<string, unknown> = {};
+            for (const [name, frag] of Object.entries(
+              parsed.fragments as Record<string, any>
+            )) {
+              if (frag.performance) {
+                components[name] = frag.performance;
+              }
+            }
+
+            res.setHeader("Content-Type", "application/json");
+            res.end(
+              JSON.stringify({
+                summary: parsed.performanceSummary ?? null,
+                components,
+              })
+            );
+          } catch {
+            res.setHeader("Content-Type", "application/json");
+            res.end(JSON.stringify({ summary: null, components: {} }));
+          }
+          return;
+        }
+
         // Handle /fragments/preview/ - isolated iframe for component previews
         if (req.url?.startsWith("/fragments/preview")) {
           // Redirect to trailing slash

package/dist/chunk-7CRC46HV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/core/schema.ts"],"sourcesContent":["import { z } from 'zod';\n\n/**\n * Zod schemas for runtime validation of fragment 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 fragmentMetaSchema = 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  dependencies: z.array(z.object({\n    name: z.string().min(1),\n    version: z.string().min(1),\n    reason: z.string().optional(),\n  })).optional(),\n  figma: z.string().url().optional(),\n  figmaProps: z.record(figmaPropMappingSchema).optional(),\n});\n\nexport const fragmentUsageSchema = 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  'complementary',\n  'used-by',\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 fragmentVariantSchema = 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 fragmentBanSchema = 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 fragmentContractSchema = z.object({\n  propsSummary: z.array(z.string()).optional(),\n  a11yRules: z.array(z.string()).optional(),\n  bans: z.array(fragmentBanSchema).optional(),\n  scenarioTags: z.array(z.string()).optional(),\n});\n\n/**\n * Schema for provenance tracking of generated fragments\n */\nexport const fragmentGeneratedSchema = 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', 'wrapper']).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 fragmentDefinitionSchema = z.object({\n  component: z.any(), // Allow any component type (function, class, forwardRef, etc.)\n  meta: fragmentMetaSchema,\n  usage: fragmentUsageSchema,\n  props: z.record(propDefinitionSchema),\n  relations: z.array(componentRelationSchema).optional(),\n  variants: z.array(fragmentVariantSchema), // Allow empty variants array\n  contract: fragmentContractSchema.optional(),\n  ai: aiMetadataSchema.optional(),\n  _generated: fragmentGeneratedSchema.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 fragmentsConfigSchema = 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  snippets: z.object({\n    mode: z.enum(['warn', 'error']).optional(),\n    scope: z.enum(['snippet', 'snippet+render']).optional(),\n    requireFullSnippet: z.boolean().optional(),\n    allowedExternalModules: z.array(z.string().min(1)).optional(),\n  }).optional(),\n});\n\n/**\n * @deprecated Use blockDefinitionSchema instead\n */\nexport const recipeDefinitionSchema = blockDefinitionSchema;\n"],"mappings":"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","names":[]}