lucent-ui 0.32.1 → 0.33.0

package/README.md

@@ -1,6 +1,6 @@
 # Lucent UI
 
-[![CI](https://github.com/rozinashopify/lucent-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/rozinashopify/lucent-ui/actions/workflows/ci.yml)
+[![CI](https://github.com/rozina-hudson/lucent-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/rozina-hudson/lucent-ui/actions/workflows/ci.yml)
 [![npm](https://img.shields.io/npm/v/lucent-ui)](https://www.npmjs.com/package/lucent-ui)
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue)](LICENSE)
 

package/dist-server/server/design-rules.js

@@ -0,0 +1,197 @@
+// ─── Design Rules ────────────────────────────────────────────────────────────
+// Structured layout guidance injected into the MCP system prompt so AI agents
+// produce aesthetically consistent Lucent UI layouts, not just valid props.
+export const DESIGN_RULES = [
+    {
+        id: 'spacing',
+        title: 'Spacing scale',
+        body: `
+Use Stack and Row components for all layout — never raw flexbox.
+Gap values map to the spacing token scale (default density, 14px base):
+
+| Gap | Token    | Rem     | ~px | Use for                                             |
+|-----|----------|---------|-----|-----------------------------------------------------|
+| 0   | space-0  | 0       | 0   | Stacked label + description (no visible gap)        |
+| 1   | space-1  | 0.25rem | 3.5 | Tight inline pairs: icon + label, badge + name      |
+| 2   | space-2  | 0.5rem  | 7   | Related items in a row: chip gap, button-group gap   |
+| 3   | space-3  | 0.75rem | 10  | Label-to-control gap, rows in a settings list        |
+| 4   | space-4  | 1rem    | 14  | Sections within a card, standard Stack gap (default) |
+| 5   | space-5  | 1.25rem | 17  | Between content blocks inside a page section         |
+| 6   | space-6  | 1.5rem  | 21  | Card-to-card gap, major section separation           |
+| 8   | space-8  | 2rem    | 28  | Page-level section separation                        |
+| 10+ | space-10+| 2.5rem+ | 35+ | Hero spacing, page margins (rare in components)      |
+
+Card padding sizes:
+- sm: py=space-2, px=space-3  — compact lists, dense data
+- md: py=space-4, px=space-5  — forms, standard content (default)
+- lg: py=space-6, px=space-8  — hero content, featured cards
+    `.trim(),
+    },
+    {
+        id: 'typography',
+        title: 'Typography hierarchy',
+        body: `
+Always use the Text component — never raw HTML tags with inline font styles.
+Three font families: base (DM Sans), mono (DM Mono), display (Georama).
+Use display family for large numeric values (stats, prices, counters).
+
+| Role         | Size | Weight   | Color     | Element | Family  |
+|--------------|------|----------|-----------|---------|---------|
+| Page title   | 2xl  | bold     | primary   | h1      | base    |
+| Section head | lg   | semibold | primary   | h2      | base    |
+| Card title   | md   | semibold | primary   | h3      | base    |
+| Body text    | sm   | regular  | primary   | p       | base    |
+| Label        | xs   | medium   | secondary | label   | base    |
+| Caption      | xs   | regular  | secondary | span    | base    |
+| Stat value   | 2xl  | bold     | primary   | span    | display |
+| Code/mono    | sm   | regular  | primary   | code    | mono    |
+
+Font size scale (14px base):
+- xs: 0.75rem (10.5px) — labels, captions, metadata
+- sm: 0.875rem (12.25px) — body text, descriptions
+- md: 1rem (14px) — card titles, emphasized text
+- lg: 1.125rem (15.75px) — section headings
+- xl: 1.25rem (17.5px) — page subtitles
+- 2xl: 1.5rem (21px) — page titles, stat values
+- 3xl: 1.875rem (26.25px) — hero headings (rare)
+    `.trim(),
+    },
+    {
+        id: 'buttons',
+        title: 'Button pairing rules',
+        body: `
+Button variants: primary, secondary (filled), outline (bordered), ghost, danger.
+
+Pairing guidelines:
+- Primary + Outline: balanced dual actions (Save / Cancel, Confirm / Back)
+- Primary + Ghost: dominant + dismiss (Submit / Reset, Continue / Skip)
+- Single Primary: sole call-to-action (Sign up, Follow, Add to cart)
+- Outline only: equal-weight options in a row (Edit, Share, Export)
+- Danger + Outline: destructive confirmation (Delete / Cancel)
+- Never place two primary buttons in the same Row
+
+Size pairing:
+- Buttons in the same Row should use the same size
+- Form action buttons: md (default)
+- Card inline actions: sm
+- Toolbar/compact actions: xs
+- Button heights (border-box): sm=34px, md=42px, lg=48px — these align with input total heights
+
+Icon usage:
+- leftIcon for semantic context (+ Add, ↓ Download)
+- rightIcon for directional flow (Next →)
+- chevron prop for dropdown triggers (built-in chevron-down SVG)
+    `.trim(),
+    },
+    {
+        id: 'layout',
+        title: 'Common layout patterns',
+        body: `
+Always use Stack (vertical) and Row (horizontal) — never raw div with flex styles.
+Stack default gap: 4. Row default gap: 3.
+
+Toggle / checkbox row:
+  Row gap="3" align="center"
+  ├── Toggle or Checkbox
+  └── Stack gap="0"
+      ├── Text size="sm" weight="medium"   ← label
+      └── Text size="xs" color="secondary" ← description
+
+Stats block:
+  Stack gap="0" align="center"
+  ├── Text size="2xl" weight="bold" family="display" ← value
+  └── Text size="xs" color="secondary"               ← label
+
+Form layout:
+  Stack gap="4"
+  └── FormField[]  ← each field includes its own label + error
+
+Action bar (form actions):
+  Row gap="2" justify="end"
+  ├── Button variant="outline"  ← secondary action
+  └── Button variant="primary"  ← primary action
+
+Card content:
+  Card padding="md"
+  └── Stack gap="4"
+      ├── Text size="md" weight="semibold" ← card title
+      ├── Stack gap="3"                    ← card body
+      └── Row gap="2" justify="end"        ← card actions
+
+Page section:
+  Stack gap="5"
+  ├── Row justify="between" align="center"
+  │   ├── Text size="2xl" weight="bold" ← page title
+  │   └── Button variant="outline"      ← page action
+  └── Stack gap="6"                     ← section content
+    `.trim(),
+    },
+    {
+        id: 'color',
+        title: 'Color usage',
+        body: `
+Lucent uses CSS custom properties for all colors. Never use raw hex values.
+
+Text colors (via Text color prop):
+- primary: default text, headings, values
+- secondary: labels, captions, metadata, descriptions
+- disabled: disabled state text (neutral gray, never accent-tinted)
+- inverse: text on dark backgrounds
+- onAccent: text on accent-colored backgrounds (auto-computed for contrast)
+- success / warning / danger / info: semantic status text
+
+Surface usage:
+- Card variant="elevated": raised cards with shadow
+- Card variant="outline": bordered cards, lower emphasis
+- Card variant="filled": subtle background fill, no border
+
+Accent color:
+- Applied automatically by LucentProvider to primary buttons, toggles, checkboxes, radio
+- textOnAccent is auto-computed via APCA contrast algorithm
+- Light mode default accent: near-black (#111827)
+- Dark mode default accent: near-white (#f9fafb)
+- 12 palette presets available: default, brand, indigo, violet, emerald, teal, rose, coral, amber, ocean, slate, sage
+
+Status colors (Chip/Badge/Alert variants):
+- success: positive trends, confirmations, online status
+- warning: attention needed, approaching limits
+- danger: errors, destructive actions, critical alerts
+- info: neutral information, tips, updates
+
+Disabled state:
+- Always use neutral gray — never accent-tinted surfaces
+- Applied via color-mix with neutral gray, not opacity
+    `.trim(),
+    },
+    {
+        id: 'density',
+        title: 'Density and responsive patterns',
+        body: `
+Three density presets scale all spacing tokens proportionally:
+- compact: tighter spacing (~80% of default) — data-dense dashboards, admin panels
+- default: standard spacing — general purpose
+- spacious: generous spacing (~125% of default) — marketing, onboarding, hero sections
+
+Responsive wrapping:
+- Use Row with wrap prop for responsive card grids
+- Set minWidth on flex children (e.g. style={{ flex: 1, minWidth: 180 }})
+- This creates equal-width cards that wrap gracefully without media queries
+
+Card grids:
+  Row gap="4" wrap
+  └── Card[] style={{ flex: 1, minWidth: 240 }}
+
+Compact list items:
+  Stack gap="2"
+  └── Row[] gap="3" align="center" (each row is an item)
+    `.trim(),
+    },
+];
+/** Full design rules as a single markdown string for system prompt injection. */
+export const DESIGN_RULES_TEXT = DESIGN_RULES.map((s) => `## ${s.title}\n\n${s.body}`).join('\n\n');
+/** Compact summary for the system prompt (keeps token budget reasonable). */
+export const DESIGN_RULES_SUMMARY = `# Lucent UI Design Rules
+
+These rules ensure AI-generated layouts are aesthetically consistent, not just technically valid.
+
+${DESIGN_RULES_TEXT}`;

package/dist-server/server/index.js

@@ -5,6 +5,7 @@ import { z } from 'zod';
 import { ALL_MANIFESTS } from './registry.js';
 import { ALL_PATTERNS } from './pattern-registry.js';
 import { PALETTES, SHAPES, DENSITIES, SHADOWS, COMBINED, generatePresetConfig } from './presets.js';
+import { DESIGN_RULES, DESIGN_RULES_SUMMARY } from './design-rules.js';
 // ─── Auth stub ───────────────────────────────────────────────────────────────
 // LUCENT_API_KEY is reserved for the future paid tier.
 // When set, the server acknowledges it but does not yet enforce it.
@@ -65,6 +66,8 @@ function scorePattern(r, query) {
 const server = new McpServer({
     name: 'lucent-mcp',
     version: '0.1.0',
+}, {
+    instructions: DESIGN_RULES_SUMMARY,
 });
 // Tool: list_components
 server.tool('list_components', 'Lists all available Lucent UI components with their name, tier (atom/molecule), and one-line description.', {}, async () => {
@@ -260,6 +263,51 @@ server.tool('get_preset_config', 'Returns the LucentProvider configuration code
         ],
     };
 });
+// Tool: get_design_rules
+server.tool('get_design_rules', 'Returns Lucent UI design rules for spacing, typography, button pairing, layout patterns, color usage, and density. These rules ensure AI-generated layouts are aesthetically consistent. Query a specific section or get all rules.', {
+    section: z
+        .string()
+        .optional()
+        .describe('Optional section id: "spacing", "typography", "buttons", "layout", "color", or "density". Omit to get all rules.'),
+}, async ({ section }) => {
+    if (section) {
+        const s = section.trim().toLowerCase();
+        const rule = DESIGN_RULES.find((r) => r.id === s);
+        if (!rule) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: JSON.stringify({
+                            error: `Section "${section}" not found.`,
+                            availableSections: DESIGN_RULES.map((r) => ({
+                                id: r.id,
+                                title: r.title,
+                            })),
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `## ${rule.title}\n\n${rule.body}`,
+                },
+            ],
+        };
+    }
+    return {
+        content: [
+            {
+                type: 'text',
+                text: DESIGN_RULES_SUMMARY,
+            },
+        ],
+    };
+});
 // ─── Start ────────────────────────────────────────────────────────────────────
 const transport = new StdioServerTransport();
 await server.connect(transport);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucent-ui",
-  "version": "0.32.1",
+  "version": "0.33.0",
   "description": "An AI-first React component library with machine-readable manifests.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -30,18 +30,6 @@
     "dist-server",
     "dist-cli"
   ],
-  "scripts": {
-    "dev": "vite --config vite.dev.config.ts",
-    "build": "vite build",
-    "build:server": "tsc -p server/tsconfig.json",
-    "build:cli": "tsc -p cli/tsconfig.json && cp cli/template.manifest.json dist-cli/cli/template.manifest.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnly": "tsc --noEmit && pnpm build && pnpm build:server && pnpm build:cli",
-    "changeset": "changeset",
-    "version-packages": "changeset version",
-    "release": "pnpm prepublishOnly && changeset publish"
-  },
   "keywords": [
     "react",
     "component-library",
@@ -56,7 +44,6 @@
   },
   "author": "Rozina Szogyenyi",
   "license": "MIT",
-  "packageManager": "pnpm@10.30.3",
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -78,5 +65,16 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.27.1",
     "zod": "^4.3.6"
+  },
+  "scripts": {
+    "dev": "vite --config vite.dev.config.ts",
+    "build": "vite build",
+    "build:server": "tsc -p server/tsconfig.json",
+    "build:cli": "tsc -p cli/tsconfig.json && cp cli/template.manifest.json dist-cli/cli/template.manifest.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "pnpm prepublishOnly && changeset publish"
   }
-}
+}

package/dist-server/server/recipe-registry.js

@@ -1,18 +0,0 @@
-import { RECIPE as ProfileCard } from '../src/manifest/recipes/profile-card.recipe.js';
-import { RECIPE as SettingsPanel } from '../src/manifest/recipes/settings-panel.recipe.js';
-import { RECIPE as StatsRow } from '../src/manifest/recipes/stats-row.recipe.js';
-import { RECIPE as ActionBar } from '../src/manifest/recipes/action-bar.recipe.js';
-import { RECIPE as FormLayout } from '../src/manifest/recipes/form-layout.recipe.js';
-import { RECIPE as EmptyStateCard } from '../src/manifest/recipes/empty-state-card.recipe.js';
-import { RECIPE as CollapsibleCard } from '../src/manifest/recipes/collapsible-card.recipe.js';
-import { RECIPE as SearchFilterBar } from '../src/manifest/recipes/search-filter-bar.recipe.js';
-export const ALL_RECIPES = [
-    ProfileCard,
-    SettingsPanel,
-    StatsRow,
-    ActionBar,
-    FormLayout,
-    EmptyStateCard,
-    CollapsibleCard,
-    SearchFilterBar,
-];

package/dist-server/src/manifest/recipes/action-bar.recipe.js

@@ -1,91 +0,0 @@
-export const RECIPE = {
-    id: 'action-bar',
-    name: 'Action Bar',
-    description: 'Page-level or card-level header pairing a title with action buttons. Page headers use breadcrumb, large display title, and a divider below; card headers are compact with small text.',
-    category: 'action',
-    components: ['text', 'button', 'row', 'stack', 'breadcrumb', 'divider', 'card'],
-    structure: `
-Page header:
-Stack gap="4"
-├── Breadcrumb                               ← navigation context
-├── Row justify="between" align="end"
-│   ├── Stack gap="1"
-│   │   ├── Text (h1, 3xl, bold, display)    ← page title
-│   │   └── Text (sm, secondary)             ← subtitle
-│   └── Row gap="2"                          ← actions
-│       ├── Button (outline, sm)
-│       └── Button (primary, sm)
-└── Divider
-
-Card header:
-Row justify="between" align="start"
-├── Stack gap="1"
-│   ├── Text (xs, secondary, uppercase, tight) ← category label
-│   └── Text (md, semibold, tight)            ← section title
-└── Row gap="1"                              ← compact actions (top-aligned)
-    └── Button[] (ghost, xs)
-  `.trim(),
-    code: `<Stack gap="4">
-  <Breadcrumb items={[
-    { label: 'Home', href: '#' },
-    { label: 'Projects', href: '#' },
-    { label: 'Acme Corp' },
-  ]} />
-  <Row justify="between" align="end">
-    <Stack gap="1">
-      <Text as="h1" size="3xl" weight="bold" family="display">Acme Corp</Text>
-      <Text size="sm" color="secondary">Last updated 5 minutes ago</Text>
-    </Stack>
-    <Row gap="2">
-      <Button variant="outline" size="sm">Export</Button>
-      <Button variant="primary" size="sm">New report</Button>
-    </Row>
-  </Row>
-  <Divider />
-</Stack>`,
-    variants: [
-        {
-            title: 'Page header — danger zone',
-            code: `<Stack gap="4">
-  <Breadcrumb items={[
-    { label: 'Home', href: '#' },
-    { label: 'Settings', href: '#' },
-    { label: 'Danger zone' },
-  ]} />
-  <Row justify="between" align="end">
-    <Stack gap="1">
-      <Text as="h1" size="3xl" weight="bold" family="display">Danger zone</Text>
-      <Text size="sm" color="secondary">These actions are irreversible.</Text>
-    </Stack>
-    <Button variant="danger" size="sm">Delete project</Button>
-  </Row>
-  <Divider />
-</Stack>`,
-        },
-        {
-            title: 'Card header (compact with label)',
-            code: `<Card variant="outline" padding="md" style={{ width: 400 }}>
-  <Stack gap="4">
-    <Row justify="between" align="start">
-      <Stack gap="1">
-        <Text size="xs" color="secondary" weight="medium" style={{ letterSpacing: 'var(--lucent-letter-spacing-tight)', textTransform: 'uppercase' }}>Activity</Text>
-        <Text size="md" weight="semibold" style={{ letterSpacing: 'var(--lucent-letter-spacing-base)' }}>Recent activity</Text>
-      </Stack>
-      <Row gap="1">
-        <Button variant="ghost" size="xs">Filter</Button>
-        <Button variant="ghost" size="xs">Export</Button>
-      </Row>
-    </Row>
-    <Text size="xs" color="secondary">No activity to show yet.</Text>
-  </Stack>
-</Card>`,
-        },
-    ],
-    designNotes: 'Page headers and card headers have very different scales. Page headers use 3xl ' +
-        'display font for the title, Breadcrumb for navigation context, and a Divider to ' +
-        'separate the header from page content below. align="end" on the Row anchors the ' +
-        'buttons to the baseline of the title block so they sit level with the subtitle. ' +
-        'Card headers are compact: sm semibold text with xs/ghost buttons that recede ' +
-        'visually. The primary action is always rightmost following natural reading order. ' +
-        'Both patterns use justify="between" to push title and actions to opposite edges.',
-};

package/dist-server/src/manifest/recipes/collapsible-card.recipe.js

@@ -1,100 +0,0 @@
-export const RECIPE = {
-    id: 'collapsible-card',
-    name: 'Collapsible Card',
-    description: 'Card with an expandable/collapsible section using smooth height animation, available in all card variants.',
-    category: 'card',
-    components: ['card', 'collapsible', 'text'],
-    structure: `
-Card (padding="none", hoverable)
-└── Collapsible
-    ├── trigger: Text (sm, semibold)         ← clickable header
-    └── children                             ← collapsible body
-        └── Text (sm, secondary)             ← content
-  `.trim(),
-    code: `<Card variant="outline" padding="none" hoverable style={{ width: 360 }}>
-  <Collapsible
-    trigger={<Text as="span" weight="semibold" size="sm">Details</Text>}
-    defaultOpen
-  >
-    <Text size="sm" color="secondary">
-      The Collapsible auto-detects its Card parent and bleeds the trigger
-      full-width. Content inherits the card's padding.
-    </Text>
-  </Collapsible>
-</Card>`,
-    variants: [
-        {
-            title: 'Ghost variant',
-            code: `<Card variant="ghost" padding="none" hoverable style={{ width: 360 }}>
-  <Collapsible trigger={<Text as="span" weight="semibold" size="sm">FAQ item</Text>}>
-    <Text size="sm" color="secondary">
-      Transparent container — content floats directly on the page surface.
-    </Text>
-  </Collapsible>
-</Card>`,
-        },
-        {
-            title: 'Elevated variant',
-            code: `<Card variant="elevated" padding="none" hoverable style={{ width: 360 }}>
-  <Collapsible trigger={<Text as="span" weight="semibold" size="sm">Advanced options</Text>}>
-    <Text size="sm" color="secondary">
-      Elevated cards cast a shadow — use for prominent collapsible sections.
-    </Text>
-  </Collapsible>
-</Card>`,
-        },
-        {
-            title: 'Combo (two-tone nested cards)',
-            code: `<Card variant="filled" padding="none" hoverable style={{ width: 360 }}>
-  <Collapsible
-    padded={false}
-    trigger={<Text as="span" weight="semibold" size="sm">Combo layout</Text>}
-  >
-    <Card
-      variant="elevated"
-      padding="sm"
-      style={{ margin: 'var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-2)' }}
-    >
-      <Text size="sm" color="secondary">
-        Two-tone layout — flat trigger surface, elevated body.
-      </Text>
-    </Card>
-  </Collapsible>
-</Card>`,
-        },
-        {
-            title: 'With localStorage persistence',
-            code: `function CollapsibleSection({ id, title, children }) {
-  const storageKey = \`collapsible-\${id}\`;
-  const [open, setOpen] = React.useState(() => {
-    const saved = localStorage.getItem(storageKey);
-    return saved !== null ? saved === 'true' : true;
-  });
-
-  const handleChange = (next) => {
-    setOpen(next);
-    localStorage.setItem(storageKey, String(next));
-  };
-
-  return (
-    <Card variant="outline" padding="none" hoverable>
-      <Collapsible
-        open={open}
-        onOpenChange={handleChange}
-        trigger={<Text as="span" weight="semibold" size="sm">{title}</Text>}
-      >
-        {children}
-      </Collapsible>
-    </Card>
-  );
-}`,
-        },
-    ],
-    designNotes: 'Card uses padding="none" because the Collapsible auto-detects its Card parent ' +
-        'via CardPaddingContext and bleeds the trigger full-width while applying card ' +
-        'padding to the body content. The hoverable prop gives hover lift feedback ' +
-        'without making the card itself interactive — the Collapsible trigger handles ' +
-        'clicks. For the combo variant, padded={false} on Collapsible removes its built-in ' +
-        'content padding so the nested elevated Card can control its own spacing with ' +
-        'custom margin. This creates a two-tone visual: flat trigger + elevated body.',
-};

package/dist-server/src/manifest/recipes/empty-state-card.recipe.js

@@ -1,72 +0,0 @@
-export const RECIPE = {
-    id: 'empty-state-card',
-    name: 'Empty State Card',
-    description: 'Centered empty state with illustration icon, heading, description, and call-to-action button inside a card.',
-    category: 'card',
-    components: ['card', 'empty-state', 'icon', 'button'],
-    structure: `
-Card (outline, padding="lg")
-└── EmptyState
-    ├── illustration: Icon (xl)              ← decorative SVG
-    ├── title: string                        ← heading
-    ├── description: string                  ← explanatory text
-    └── action: Button (secondary / primary) ← CTA
-  `.trim(),
-    code: `<Card variant="outline" padding="lg" style={{ width: 400 }}>
-  <EmptyState
-    illustration={
-      <Icon size="xl">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
-          <circle cx={11} cy={11} r={8} />
-          <path d="M21 21l-4.35-4.35" />
-        </svg>
-      </Icon>
-    }
-    title="No results found"
-    description="Try adjusting your search or filters to find what you're looking for."
-    action={<Button variant="secondary" size="sm">Clear filters</Button>}
-  />
-</Card>`,
-    variants: [
-        {
-            title: 'Getting started empty state',
-            code: `<Card variant="elevated" padding="lg" style={{ width: 400 }}>
-  <EmptyState
-    illustration={
-      <Icon size="xl">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
-          <path d="M12 5v14M5 12h14" />
-        </svg>
-      </Icon>
-    }
-    title="No projects yet"
-    description="Create your first project to get started."
-    action={<Button variant="primary" size="sm">Create project</Button>}
-  />
-</Card>`,
-        },
-        {
-            title: 'Error empty state with retry',
-            code: `<Card variant="outline" padding="lg" style={{ width: 400 }}>
-  <EmptyState
-    illustration={
-      <Icon size="xl">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
-          <circle cx={12} cy={12} r={10} />
-          <path d="M12 8v4M12 16h.01" />
-        </svg>
-      </Icon>
-    }
-    title="Something went wrong"
-    description="We couldn't load your data. Please try again."
-    action={<Button variant="outline" size="sm">Retry</Button>}
-  />
-</Card>`,
-        },
-    ],
-    designNotes: 'EmptyState handles internal centering and spacing — no need for manual Stack/Row ' +
-        'layout inside it. The illustration uses Icon at xl size for visual weight without ' +
-        'overwhelming the text. Card variant should match the context: outline for inline ' +
-        'empty states (e.g. a table with no rows), elevated for standalone pages. The ' +
-        'action button uses size="sm" to avoid competing with the heading for attention.',
-};

package/dist-server/src/manifest/recipes/form-layout.recipe.js

@@ -1,98 +0,0 @@
-export const RECIPE = {
-    id: 'form-layout',
-    name: 'Form Layout',
-    description: 'Stacked form with grouped sections, FormField labels, validation hints, and a submit/cancel footer.',
-    category: 'form',
-    components: ['card', 'text', 'input', 'select', 'textarea', 'checkbox', 'button', 'stack', 'row', 'divider', 'form-field'],
-    structure: `
-Card (elevated, padding="lg")
-└── Stack as="form" gap="6"
-    ├── Stack gap="1"                        ← section header
-    │   ├── Text (lg, semibold)              ← form title
-    │   └── Text (sm, secondary)             ← description
-    ├── Stack gap="4"                        ← field group 1
-    │   ├── Row gap="4"                      ← side-by-side fields
-    │   │   ├── FormField (label, required)
-    │   │   │   └── Input
-    │   │   └── FormField (label, required)
-    │   │       └── Input
-    │   ├── FormField (label)
-    │   │   └── Input
-    │   └── FormField (label)
-    │       └── Select
-    ├── Divider
-    ├── Stack gap="4"                        ← field group 2
-    │   ├── FormField (label)
-    │   │   └── Textarea
-    │   └── Checkbox (contained)
-    └── Row gap="2" justify="end"            ← actions
-        ├── Button (ghost)
-        └── Button (primary)
-  `.trim(),
-    code: `<Card variant="elevated" padding="lg" style={{ width: 480 }}>
-  <Stack as="form" gap="6">
-    <Stack gap="1">
-      <Text as="h2" size="lg" weight="semibold">Create project</Text>
-      <Text size="sm" color="secondary">
-        Fill in the details to set up your new project.
-      </Text>
-    </Stack>
-    <Stack gap="4">
-      <Row gap="4">
-        <FormField label="First name" htmlFor="fname" required style={{ flex: 1 }}>
-          <Input id="fname" placeholder="Jane" />
-        </FormField>
-        <FormField label="Last name" htmlFor="lname" required style={{ flex: 1 }}>
-          <Input id="lname" placeholder="Doe" />
-        </FormField>
-      </Row>
-      <FormField label="Email" htmlFor="email" helperText="We'll never share your email.">
-        <Input id="email" type="email" placeholder="jane@example.com" />
-      </FormField>
-      <FormField label="Role" htmlFor="role">
-        <Select
-          id="role"
-          placeholder="Select a role..."
-          options={[
-            { value: 'admin', label: 'Admin' },
-            { value: 'editor', label: 'Editor' },
-            { value: 'viewer', label: 'Viewer' },
-          ]}
-        />
-      </FormField>
-    </Stack>
-    <Divider />
-    <Stack gap="4">
-      <FormField label="Bio" htmlFor="bio">
-        <Textarea id="bio" placeholder="Tell us about yourself..." rows={3} />
-      </FormField>
-      <Checkbox label="I agree to the terms" contained />
-    </Stack>
-    <Row gap="2" justify="end">
-      <Button variant="ghost">Cancel</Button>
-      <Button variant="primary">Create</Button>
-    </Row>
-  </Stack>
-</Card>`,
-    variants: [
-        {
-            title: 'Inline form (no card)',
-            code: `<Stack as="form" gap="4" style={{ maxWidth: 400 }}>
-  <FormField label="Username" htmlFor="user" required helperText="Letters and numbers only, 3–20 chars.">
-    <Input id="user" placeholder="yourname" />
-  </FormField>
-  <FormField label="Password" htmlFor="pass" required>
-    <Input id="pass" type="password" />
-  </FormField>
-  <Button variant="primary">Sign in</Button>
-</Stack>`,
-        },
-    ],
-    designNotes: 'The form uses Stack as="form" to render a semantic <form> element while keeping ' +
-        'token-based vertical spacing. gap="6" between sections provides clear visual ' +
-        'grouping; gap="4" within a section keeps fields tightly related. Side-by-side ' +
-        'fields use Row with flex: 1 on each FormField so they share width equally. ' +
-        'The Divider separates logical sections (identity fields vs. profile fields). ' +
-        'Actions are right-aligned (justify="end") following the convention that the ' +
-        'primary action is the rightmost button.',
-};

package/dist-server/src/manifest/recipes/index.js

@@ -1,8 +0,0 @@
-export { RECIPE as ProfileCard } from './profile-card.recipe.js';
-export { RECIPE as SettingsPanel } from './settings-panel.recipe.js';
-export { RECIPE as StatsRow } from './stats-row.recipe.js';
-export { RECIPE as ActionBar } from './action-bar.recipe.js';
-export { RECIPE as FormLayout } from './form-layout.recipe.js';
-export { RECIPE as EmptyStateCard } from './empty-state-card.recipe.js';
-export { RECIPE as CollapsibleCard } from './collapsible-card.recipe.js';
-export { RECIPE as SearchFilterBar } from './search-filter-bar.recipe.js';

package/dist-server/src/manifest/recipes/profile-card.recipe.js

@@ -1,101 +0,0 @@
-export const RECIPE = {
-    id: 'profile-card',
-    name: 'Profile Card',
-    description: 'User profile card with avatar, name/role, bio, tag chips, stats row, and action buttons.',
-    category: 'card',
-    components: ['card', 'avatar', 'text', 'chip', 'button', 'stack', 'row', 'divider'],
-    structure: `
-Card (elevated, equal padding via style)
-└── Stack gap="5"
-    ├── Row gap="3" align="center"           ← avatar + name block
-    │   ├── Avatar (lg)
-    │   └── Stack gap="1"
-    │       ├── Row gap="2" align="center"
-    │       │   ├── Text (lg, semibold, display) ← full name
-    │       │   └── Chip (success, sm)       ← status badge
-    │       └── Text (sm, secondary)         ← role / subtitle
-    ├── Text (sm)                            ← bio paragraph
-    ├── Row gap="2" wrap                     ← skill/tag chips
-    │   └── Chip[] (neutral, borderless, clickable)
-    ├── Divider
-    ├── Row gap="6" justify="around"         ← stats
-    │   └── Stack[] gap="0" align="center"
-    │       ├── Text (2xl, bold, display)     ← stat value
-    │       └── Text (xs, secondary)         ← stat label
-    └── Row gap="3"                          ← actions
-        ├── Button (primary, full width)
-        └── Button (outline, full width)
-  `.trim(),
-    code: `<Card variant="elevated" padding="none" style={{ width: 340, padding: 'var(--lucent-space-6)' }}>
-  <Stack gap="5">
-    <Row gap="3" align="center">
-      <Avatar src="/avatars/jane.jpg" alt="Jane Doe" size="lg" />
-      <Stack gap="1">
-        <Row gap="2" align="center">
-          <Text size="lg" weight="semibold" family="display">Jane Doe</Text>
-          <Chip variant="success" size="sm" dot>Pro</Chip>
-        </Row>
-        <Text size="sm" color="secondary">Software Engineer</Text>
-      </Stack>
-    </Row>
-    <Text size="sm">
-      Building design systems and component libraries.
-      Passionate about accessible, token-driven UI.
-    </Text>
-    <Row gap="2" wrap>
-      <Chip variant="neutral" borderless onClick={() => {}}>React</Chip>
-      <Chip variant="neutral" borderless onClick={() => {}}>TypeScript</Chip>
-      <Chip variant="neutral" borderless onClick={() => {}}>Design Systems</Chip>
-    </Row>
-    <Divider />
-    <Row gap="6" justify="around">
-      <Stack gap="0" align="center">
-        <Text size="2xl" weight="bold" family="display">128</Text>
-        <Text size="xs" color="secondary">Posts</Text>
-      </Stack>
-      <Stack gap="0" align="center">
-        <Text size="2xl" weight="bold" family="display">4.2k</Text>
-        <Text size="xs" color="secondary">Followers</Text>
-      </Stack>
-      <Stack gap="0" align="center">
-        <Text size="2xl" weight="bold" family="display">312</Text>
-        <Text size="xs" color="secondary">Following</Text>
-      </Stack>
-    </Row>
-    <Row gap="3">
-      <Button variant="primary" style={{ flex: 1 }}>Follow</Button>
-      <Button variant="outline" style={{ flex: 1 }}>Message</Button>
-    </Row>
-  </Stack>
-</Card>`,
-    variants: [
-        {
-            title: 'Compact collapsible profile',
-            code: `<Card variant="filled" padding="none" hoverable style={{ width: 280 }}>
-  <Collapsible
-    trigger={
-      <Row gap="3" align="center">
-        <Avatar alt="Jane Doe" size="md" />
-        <Stack gap="1">
-          <Text as="span" size="sm" weight="semibold">Jane Doe</Text>
-          <Text as="span" size="xs" color="secondary">Software Engineer</Text>
-        </Stack>
-      </Row>
-    }
-    defaultOpen
-  >
-    <Row gap="2" justify="end">
-      <Button variant="outline" size="sm">Message</Button>
-      <Button variant="primary" size="sm">Follow</Button>
-    </Row>
-  </Collapsible>
-</Card>`,
-        },
-    ],
-    designNotes: 'Avatar and name are grouped in a Row with center alignment so the text block ' +
-        'vertically centers against the avatar regardless of line count. The name row ' +
-        'uses gap="2" for tight coupling between name and status chip. Stats use ' +
-        'justify="around" to distribute evenly without fixed widths. Action buttons ' +
-        'use flex: 1 to split the row equally. The Divider separates informational ' +
-        'content (above) from interactive content (below).',
-};

package/dist-server/src/manifest/recipes/search-filter-bar.recipe.js

@@ -1,122 +0,0 @@
-export const RECIPE = {
-    id: 'search-filter-bar',
-    name: 'Search / Filter Bar',
-    description: 'Compact toolbar of filter molecules — FilterSearch, FilterSelect, FilterMultiSelect, FilterDateRange — with sort control and view toggle. Designed to sit above a DataTable or list.',
-    category: 'dashboard',
-    components: ['filter-search', 'filter-select', 'filter-multi-select', 'filter-date-range', 'segmented-control', 'row', 'text', 'button'],
-    structure: `
-Row gap="2" align="center" wrap
-├── FilterSearch                            ← icon button, expands to Input
-├── FilterSelect (label="Availability")     ← single-select dropdown
-├── FilterMultiSelect (label="Status")      ← multi-select, stays open, count badge
-├── FilterMultiSelect (label="Tags")        ← multi-select with swatch chips
-├── FilterDateRange (label="Date range")    ← button trigger → calendar popover
-├── Text + Button (ghost, "Clear all")      ← conditional result count row
-├── flex spacer
-└── Row gap="2" align="center"
-    ├── FilterSelect (icon=sort, "Newest")  ← sort control
-    └── SegmentedControl (grid/list icons)  ← view toggle
-  `.trim(),
-    code: `const [search, setSearch] = useState('');
-const [statuses, setStatuses] = useState<string[]>([]);
-const [tags, setTags] = useState<string[]>([]);
-const [dateRange, setDateRange] = useState<DateRange | undefined>();
-
-const hasFilters = statuses.length > 0 || tags.length > 0 || dateRange !== undefined;
-const clearAll = () => { setStatuses([]); setTags([]); setDateRange(undefined); setSearch(''); };
-
-<Row gap="2" align="center" wrap>
-  <FilterSearch placeholder="Search…" value={search} onChange={setSearch} />
-
-  <FilterSelect label="Availability" options={[
-    { value: 'available', label: 'Available' },
-    { value: 'notice', label: 'On notice' },
-    { value: 'unavailable', label: 'Unavailable' },
-  ]} />
-
-  <FilterMultiSelect label="Status" options={[
-    { value: 'active', label: 'Active' },
-    { value: 'archived', label: 'Archived' },
-    { value: 'on-hold', label: 'On hold' },
-  ]} value={statuses} onChange={setStatuses} />
-
-  <FilterMultiSelect label="Tags" options={[
-    { value: 'react', label: 'React', swatch: '#3b82f6' },
-    { value: 'devops', label: 'DevOps', swatch: '#10b981' },
-    { value: 'data', label: 'Data Science', swatch: '#6366f1' },
-  ]} value={tags} onChange={setTags} />
-
-  <FilterDateRange label="Date range" value={dateRange} onChange={setDateRange} />
-
-  <div style={{ flex: 1 }} />
-
-  <Row gap="2" align="center">
-    <FilterSelect label="Newest first" icon={<SortIcon />} options={[
-      { value: 'newest', label: 'Newest first' },
-      { value: 'oldest', label: 'Oldest first' },
-      { value: 'name', label: 'Name A–Z' },
-    ]} />
-    <SegmentedControl size="sm" defaultValue="grid" options={[
-      { value: 'grid', label: <GridIcon /> },
-      { value: 'list', label: <ListIcon /> },
-    ]} />
-  </Row>
-</Row>
-
-{/* Result count between filter bar and DataTable */}
-{hasFilters && (
-  <Row gap="2" align="center">
-    <Text size="sm" color="secondary">
-      Showing {filteredRows.length} of {allRows.length} candidates
-    </Text>
-    <Button variant="ghost" size="xs" onClick={clearAll}>Clear all</Button>
-  </Row>
-)}`,
-    variants: [
-        {
-            title: 'Minimal — search + sort only',
-            code: `<Row gap="2" align="center">
-  <FilterSearch placeholder="Search…" />
-  <div style={{ flex: 1 }} />
-  <FilterSelect label="Newest first" icon={<SortIcon />} options={sortOptions} />
-</Row>`,
-        },
-        {
-            title: 'With DataTable',
-            code: `const [search, setSearch] = useState('');
-const [statuses, setStatuses] = useState<string[]>([]);
-
-const filtered = candidates.filter(c => {
-  if (search && !c.name.toLowerCase().includes(search.toLowerCase())) return false;
-  if (statuses.length > 0 && !statuses.includes(c.status.toLowerCase())) return false;
-  return true;
-});
-
-<Stack gap="3">
-  <Row gap="2" align="center" wrap>
-    <FilterSearch placeholder="Search…" value={search} onChange={setSearch} />
-    <FilterMultiSelect label="Status" options={statusOptions}
-      value={statuses} onChange={setStatuses} />
-  </Row>
-  {statuses.length > 0 && (
-    <Row gap="2" align="center">
-      <Text size="sm" color="secondary">
-        Showing {filtered.length} of {candidates.length}
-      </Text>
-      <Button variant="ghost" size="xs" onClick={() => setStatuses([])}>Clear all</Button>
-    </Row>
-  )}
-  <DataTable columns={columns} rows={filtered} pageSize={5} />
-</Stack>`,
-        },
-    ],
-    designNotes: 'Four dedicated filter molecules replace the previous boilerplate of manually wiring Menu open state, ' +
-        'keepOpen hacks, count badges, and clear footers. FilterSearch collapses to a square icon-only button ' +
-        'and expands on click. FilterSelect wraps Menu for single-select with a "Clear" footer. ' +
-        'FilterMultiSelect builds its own portal dropdown (not Menu) so items toggle without closing — ' +
-        'it renders Checkbox + optional Chip (with swatch) per option and an always-visible "Clear all" footer. ' +
-        'FilterDateRange wraps DateRangePicker with the trigger prop to render a secondary Button. ' +
-        'A flex spacer pushes sort and view controls to the right edge. ' +
-        'Between the filter bar and DataTable, a conditional result count row shows ' +
-        '"Showing X of Y" with a ghost "Clear all" button when filters are active.',
-};

package/dist-server/src/manifest/recipes/settings-panel.recipe.js

@@ -1,167 +0,0 @@
-export const RECIPE = {
-    id: 'settings-panel',
-    name: 'Settings Panel',
-    description: 'Settings card with section header, toggle rows with descriptions, select dropdown, and action buttons.',
-    category: 'settings',
-    components: ['card', 'text', 'badge', 'toggle', 'select', 'button', 'stack', 'row', 'divider', 'nav-menu', 'form-field', 'input', 'textarea'],
-    structure: `
-Card (elevated, padding="lg")
-└── Stack gap="5"
-    ├── Row gap="2" align="center"           ← section header
-    │   ├── Text (lg, semibold)              ← title
-    │   └── Badge (accent)                   ← version/plan badge
-    ├── Divider
-    ├── Stack gap="4"                        ← toggle settings
-    │   ├── Row justify="between"            ← setting row
-    │   │   ├── Stack gap="1"
-    │   │   │   ├── Text (sm, medium)        ← setting label
-    │   │   │   └── Text (xs, secondary)     ← description
-    │   │   └── Toggle
-    │   ├── Row justify="between"
-    │   │   ├── Stack gap="1"
-    │   │   │   ├── Text (sm, medium)
-    │   │   │   └── Text (xs, secondary)
-    │   │   └── Toggle
-    │   └── Row justify="between"
-    │       ├── Stack gap="1"
-    │       │   ├── Text (sm, medium)
-    │       │   └── Text (xs, secondary)
-    │       └── Select
-    ├── Divider
-    └── Row gap="2" justify="end"            ← actions
-        ├── Button (ghost, sm)
-        └── Button (primary, sm)
-  `.trim(),
-    code: `<Card variant="elevated" padding="lg" style={{ width: 400 }}>
-  <Stack gap="5">
-    <Row gap="2" align="center">
-      <Text size="lg" weight="semibold">Notifications</Text>
-      <Badge variant="accent">Pro</Badge>
-    </Row>
-    <Divider />
-    <Stack gap="4">
-      <Row justify="between">
-        <Stack gap="1">
-          <Text size="sm" weight="medium">Email alerts</Text>
-          <Text size="xs" color="secondary">
-            Get notified when someone mentions you.
-          </Text>
-        </Stack>
-        <Toggle defaultChecked />
-      </Row>
-      <Row justify="between">
-        <Stack gap="1">
-          <Text size="sm" weight="medium">Push notifications</Text>
-          <Text size="xs" color="secondary">
-            Receive push notifications on your device.
-          </Text>
-        </Stack>
-        <Toggle />
-      </Row>
-      <Row justify="between">
-        <Stack gap="1">
-          <Text size="sm" weight="medium">Digest frequency</Text>
-          <Text size="xs" color="secondary">
-            How often to send summary emails.
-          </Text>
-        </Stack>
-        <Select
-          defaultValue="weekly"
-          options={[
-            { value: 'daily', label: 'Daily' },
-            { value: 'weekly', label: 'Weekly' },
-            { value: 'monthly', label: 'Monthly' },
-          ]}
-          size="sm"
-          style={{ width: 120 }}
-        />
-      </Row>
-    </Stack>
-    <Divider />
-    <Row gap="2" justify="end">
-      <Button variant="ghost" size="sm">Reset</Button>
-      <Button variant="primary" size="sm">Save changes</Button>
-    </Row>
-  </Stack>
-</Card>`,
-    variants: [
-        {
-            title: 'Drill-down with NavMenu',
-            code: `const [tab, setTab] = useState('profile');
-
-<Card variant="elevated" padding="none" style={{ width: 560 }}>
-  <Row gap="0" align="stretch">
-    <div style={{ width: 160, borderRight: '1px solid var(--lucent-border-default)', padding: 'var(--lucent-space-3)', flexShrink: 0 }}>
-      <NavMenu orientation="vertical" size="sm">
-        <NavMenu.Item as="button" isActive={tab === 'profile'} onClick={() => setTab('profile')}>Profile</NavMenu.Item>
-        <NavMenu.Item as="button" isActive={tab === 'notifications'} onClick={() => setTab('notifications')}>Notifications</NavMenu.Item>
-        <NavMenu.Item as="button" isActive={tab === 'security'} onClick={() => setTab('security')}>Security</NavMenu.Item>
-      </NavMenu>
-    </div>
-    <div style={{ flex: 1, padding: 'var(--lucent-space-5)' }}>
-      {tab === 'profile' && (
-        <Stack gap="4">
-          <Text size="sm" weight="semibold">Profile</Text>
-          <FormField label="Display name" htmlFor="s-name">
-            <Input id="s-name" placeholder="Jane Doe" size="sm" />
-          </FormField>
-          <FormField label="Bio" htmlFor="s-bio">
-            <Textarea id="s-bio" placeholder="Tell us about yourself..." rows={2} />
-          </FormField>
-          <Row gap="2" justify="end">
-            <Button variant="primary" size="sm">Save</Button>
-          </Row>
-        </Stack>
-      )}
-      {tab === 'notifications' && (
-        <Stack gap="4">
-          <Text size="sm" weight="semibold">Notifications</Text>
-          <Row justify="between">
-            <Stack gap="1">
-              <Text size="sm" weight="medium">Email alerts</Text>
-              <Text size="xs" color="secondary">Get notified on mentions.</Text>
-            </Stack>
-            <Toggle defaultChecked />
-          </Row>
-          <Row justify="between">
-            <Stack gap="1">
-              <Text size="sm" weight="medium">Push notifications</Text>
-              <Text size="xs" color="secondary">Receive push on your device.</Text>
-            </Stack>
-            <Toggle />
-          </Row>
-        </Stack>
-      )}
-      {tab === 'security' && (
-        <Stack gap="4">
-          <Text size="sm" weight="semibold">Security</Text>
-          <Row justify="between">
-            <Stack gap="1">
-              <Text size="sm" weight="medium">Two-factor auth</Text>
-              <Text size="xs" color="secondary">Add an extra layer of security.</Text>
-            </Stack>
-            <Toggle />
-          </Row>
-          <FormField label="Current password" htmlFor="s-pass">
-            <Input id="s-pass" type="password" size="sm" />
-          </FormField>
-          <Row gap="2" justify="end">
-            <Button variant="primary" size="sm">Update password</Button>
-          </Row>
-        </Stack>
-      )}
-    </div>
-  </Row>
-</Card>`,
-        },
-    ],
-    designNotes: 'Each setting row uses Row with justify="between" to push the control to the far ' +
-        'right. The label + description pair is a Stack with gap="1" for tight coupling. ' +
-        'Dividers separate the header, settings body, and action footer into visual ' +
-        'sections. The Select is constrained to a fixed width (120px) to prevent the row ' +
-        'from shifting when option labels vary in length. Actions are right-aligned with ' +
-        'a ghost Reset so it visually recedes next to the primary Save. ' +
-        'The drill-down variant uses NavMenu as a left sidebar with a border-right separator. ' +
-        'Card uses padding="none" so the nav and content pane each control their own padding. ' +
-        'Row with align="stretch" ensures the nav border extends full height.',
-};

package/dist-server/src/manifest/recipes/stats-row.recipe.js

@@ -1,106 +0,0 @@
-export const RECIPE = {
-    id: 'stats-row',
-    name: 'Stats Row',
-    description: 'Row of individual stat cards with label, large display-font value, and trend chip with comparison.',
-    category: 'dashboard',
-    components: ['card', 'text', 'chip', 'avatar', 'stack', 'row'],
-    structure: `
-Row gap="3" wrap
-├── Card (outline, padding="md", flex=1)
-│   └── Stack gap="3"
-│       ├── Text (xs, secondary, medium)     ← metric label
-│       ├── Text (2xl, bold, display)        ← value
-│       └── Row gap="2" align="center"
-│           ├── Chip (success/danger, sm)    ← trend %
-│           └── Text (xs, secondary)         ← comparison
-├── Card ...
-└── Card ...
-  `.trim(),
-    code: `<Row gap="3" wrap>
-  <Card variant="outline" padding="md" style={{ flex: 1, minWidth: 180 }}>
-    <Stack gap="3">
-      <Text size="xs" color="secondary" weight="medium">Total Events</Text>
-      <Text size="2xl" weight="bold" family="display">32</Text>
-      <Row gap="2" align="center">
-        <Chip variant="success" size="sm" borderless>+20%</Chip>
-        <Text size="xs" color="secondary">25 last week</Text>
-      </Row>
-    </Stack>
-  </Card>
-  <Card variant="outline" padding="md" style={{ flex: 1, minWidth: 180 }}>
-    <Stack gap="3">
-      <Text size="xs" color="secondary" weight="medium">Total Hours</Text>
-      <Text size="2xl" weight="bold" family="display">38.2 hr</Text>
-      <Row gap="2" align="center">
-        <Chip variant="danger" size="sm" borderless>-8%</Chip>
-        <Text size="xs" color="secondary">42.0 hr last week</Text>
-      </Row>
-    </Stack>
-  </Card>
-  <Card variant="outline" padding="md" style={{ flex: 1, minWidth: 180 }}>
-    <Stack gap="3">
-      <Text size="xs" color="secondary" weight="medium">Focus Time</Text>
-      <Text size="2xl" weight="bold" family="display">16.8 hr</Text>
-      <Row gap="2" align="center">
-        <Chip variant="success" size="sm" borderless>+12%</Chip>
-        <Text size="xs" color="secondary">14.4 hr last week</Text>
-      </Row>
-    </Stack>
-  </Card>
-</Row>`,
-    variants: [
-        {
-            title: 'Revenue cards with avatar header',
-            code: `<Row gap="3" wrap>
-  <Card variant="filled" padding="md" style={{ flex: 1, minWidth: 180 }}>
-    <Stack gap="3">
-      <Row gap="2" align="center">
-        <Avatar alt="Airbnb" size="sm" />
-        <Stack gap="0">
-          <Text size="sm" weight="semibold">Airbnb</Text>
-          <Text size="xs" color="secondary">Travel and tourism</Text>
-        </Stack>
-      </Row>
-      <Row justify="between" align="end">
-        <Stack gap="1">
-          <Row gap="2" align="baseline">
-            <Text size="lg" weight="bold" family="display">$33.2k</Text>
-            <Chip variant="success" size="sm" borderless>+37%</Chip>
-          </Row>
-          <Text size="xs" color="secondary">Recurring Revenue</Text>
-        </Stack>
-      </Row>
-    </Stack>
-  </Card>
-  <Card variant="filled" padding="md" style={{ flex: 1, minWidth: 180 }}>
-    <Stack gap="3">
-      <Row gap="2" align="center">
-        <Avatar alt="MailChimp" size="sm" />
-        <Stack gap="0">
-          <Text size="sm" weight="semibold">MailChimp</Text>
-          <Text size="xs" color="secondary">Email Marketing</Text>
-        </Stack>
-      </Row>
-      <Row justify="between" align="end">
-        <Stack gap="1">
-          <Row gap="2" align="baseline">
-            <Text size="lg" weight="bold" family="display">$3.2k</Text>
-            <Chip variant="danger" size="sm" borderless>-23%</Chip>
-          </Row>
-          <Text size="xs" color="secondary">Recurring Revenue</Text>
-        </Stack>
-      </Row>
-    </Stack>
-  </Card>
-</Row>`,
-        },
-    ],
-    designNotes: 'Each stat lives in its own Card so it reads as a discrete metric. flex: 1 with ' +
-        'minWidth ensures equal sizing that wraps gracefully. gap="3" in the Stack creates ' +
-        'three clear visual tiers: label (top), value (middle), trend context (bottom). ' +
-        'Display font on the value creates instant hierarchy. The trend row pairs a ' +
-        'color-coded Chip (success/danger) with a secondary comparison value so the user ' +
-        'gets both relative change and absolute context. The revenue variant adds an ' +
-        'Avatar + name header for entity-scoped metrics — align="baseline" on the ' +
-        'value + chip row keeps the trend visually anchored to the number.',
-};

package/dist-server/src/manifest/validate.test.js

@@ -1,28 +0,0 @@
-import { describe, test, expect } from 'vitest';
-import { validateManifest } from './validate.js';
-// Auto-discover all component manifests
-const manifestModules = import.meta.glob('../components/**/*.manifest.ts', { eager: true });
-const manifests = Object.entries(manifestModules).map(([path, mod]) => {
-    const m = mod;
-    const manifest = m['COMPONENT_MANIFEST'];
-    return { path, manifest };
-});
-describe('Component manifests', () => {
-    test('at least one manifest was discovered', () => {
-        expect(manifests.length).toBeGreaterThan(0);
-    });
-    for (const { path, manifest } of manifests) {
-        const label = path.replace('../components/', '').replace('.manifest.ts', '');
-        test(`${label} — exports COMPONENT_MANIFEST`, () => {
-            expect(manifest).toBeDefined();
-        });
-        test(`${label} — passes schema validation`, () => {
-            const result = validateManifest(manifest);
-            if (!result.valid) {
-                const messages = result.errors.map(e => `  ${e.field}: ${e.message}`).join('\n');
-                throw new Error(`Invalid manifest:\n${messages}`);
-            }
-            expect(result.valid).toBe(true);
-        });
-    }
-});