lucent-ui 0.30.0 → 0.32.0

package/dist-server/src/manifest/patterns/onboarding-flow.pattern.js

@@ -0,0 +1,107 @@
+export const PATTERN = {
+    id: 'onboarding-flow',
+    name: 'Onboarding Flow',
+    description: 'Multi-step onboarding form with step indicator, progress bar, form fields, and back/next navigation. Steps: Profile → Preferences → Confirmation.',
+    category: 'form',
+    components: ['card', 'text', 'button', 'progress', 'form-field', 'input', 'select', 'checkbox', 'avatar', 'chip', 'stack', 'row', 'divider'],
+    structure: `
+Card (elevated, padding="lg")
+└── Stack gap="6"
+    ├── Stack gap="1"                         ← header
+    │   ├── Text (lg, semibold, display)      ← title
+    │   └── Text (sm, secondary)              ← step counter
+    ├── Progress (sm)                         ← progress bar
+    ├── StepIndicator                         ← custom step circles
+    │   ├── Row justify="between"
+    │   │   └── circle[] + connector lines
+    │   └── Row justify="between"
+    │       └── Text[] (xs, step labels)
+    ├── Divider
+    ├── Step content (conditional)
+    │   ├── Step 0: Stack of FormFields (name, email, role Select)
+    │   ├── Step 1: FormFields (team size, use case) + Checkbox
+    │   └── Step 2: Avatar + name + email + role Chip (confirmation)
+    └── Row justify="between"                 ← navigation
+        ├── Button (ghost, sm)                ← Back (disabled on step 0)
+        └── Button (primary, sm)              ← Continue / Complete
+  `.trim(),
+    code: `const [step, setStep] = useState(0);
+const STEPS = ['Profile', 'Preferences', 'Confirm'];
+
+<Card variant="elevated" padding="lg" style={{ width: 440 }}>
+  <Stack gap="6">
+    <Stack gap="1">
+      <Text size="lg" weight="semibold" family="display">Create your account</Text>
+      <Text size="sm" color="secondary">Step {step + 1} of {STEPS.length}</Text>
+    </Stack>
+    <Progress value={((step + 1) / STEPS.length) * 100} size="sm" />
+    <Divider />
+    {step === 0 && (
+      <Stack gap="4">
+        <FormField label="Full name" htmlFor="onb-name" required>
+          <Input id="onb-name" placeholder="Jane Doe" />
+        </FormField>
+        <FormField label="Email address" htmlFor="onb-email" required>
+          <Input id="onb-email" type="email" placeholder="jane@example.com" />
+        </FormField>
+        <FormField label="Role" htmlFor="onb-role">
+          <Select
+            id="onb-role"
+            defaultValue="engineer"
+            options={[
+              { value: 'engineer', label: 'Engineer' },
+              { value: 'designer', label: 'Designer' },
+              { value: 'product', label: 'Product Manager' },
+              { value: 'other', label: 'Other' },
+            ]}
+          />
+        </FormField>
+      </Stack>
+    )}
+    {step === 1 && (
+      <Stack gap="4">
+        <FormField label="Team size" htmlFor="onb-team">
+          <Select
+            id="onb-team"
+            defaultValue="small"
+            options={[
+              { value: 'solo', label: 'Just me' },
+              { value: 'small', label: '2–10 people' },
+              { value: 'medium', label: '11–50 people' },
+              { value: 'large', label: '50+ people' },
+            ]}
+          />
+        </FormField>
+        <Checkbox label="I agree to the terms of service" />
+      </Stack>
+    )}
+    {step === 2 && (
+      <Stack gap="4" align="center">
+        <Avatar alt="Jane Doe" size="xl" />
+        <Stack gap="1" align="center">
+          <Text size="lg" weight="semibold" family="display">Jane Doe</Text>
+          <Text size="sm" color="secondary">jane@example.com</Text>
+        </Stack>
+        <Chip variant="accent" size="sm">Engineer</Chip>
+        <Text size="sm" color="secondary" align="center">
+          Everything looks good. Click "Complete" to finish setup.
+        </Text>
+      </Stack>
+    )}
+    <Row justify="between">
+      <Button variant="ghost" size="sm" onClick={() => setStep(s => s - 1)} disabled={step === 0}>Back</Button>
+      <Button variant="primary" size="sm" onClick={() => setStep(s => Math.min(s + 1, 2))}>
+        {step === 2 ? 'Complete' : 'Continue'}
+      </Button>
+    </Row>
+  </Stack>
+</Card>`,
+    designNotes: 'The Progress bar gives an at-a-glance sense of completion. The step indicator uses ' +
+        'accent-colored circles for completed/current steps and neutral borders for future ' +
+        'steps, with connector lines between them. Each step is a conditional render block ' +
+        'so the form content swaps without layout shift (the Card maintains constant width). ' +
+        'The confirmation step centers content with Avatar + name for a personal touch. ' +
+        'Back button uses ghost variant and is disabled on step 0 to prevent confusion. ' +
+        'justify="between" on the navigation row pushes Back and Continue to opposite edges, ' +
+        'giving Back room to breathe so users don\'t accidentally go backwards.',
+};

package/dist-server/src/manifest/patterns/pricing-table.pattern.js

@@ -0,0 +1,108 @@
+export const PATTERN = {
+    id: 'pricing-table',
+    name: 'Pricing Table',
+    description: 'Side-by-side pricing tier cards with feature lists and CTA buttons. Middle tier highlighted with accent border and primary button.',
+    category: 'card',
+    components: ['card', 'text', 'button', 'chip', 'stack', 'row', 'divider'],
+    structure: `
+Row gap="4" wrap align="stretch"
+├── Card (outline, flex=1)                  ← free tier
+│   └── Stack gap="5" (full height)
+│       ├── Stack gap="2"                   ← tier header
+│       │   ├── Text (sm, secondary)        ← tier name
+│       │   ├── Row align="baseline"
+│       │   │   ├── Text (3xl, bold, display) ← price
+│       │   │   └── Text (sm, secondary)    ← period
+│       │   └── Text (xs, secondary)        ← tagline
+│       ├── Divider
+│       ├── Stack gap="3" (flex=1)          ← feature list
+│       │   └── Row[] gap="2" align="center"
+│       │       ├── ✓ icon (success color)
+│       │       └── Text (sm)
+│       └── Button (outline, full width)
+├── Card (elevated, accent border, flex=1)  ← pro tier (highlighted)
+│   └── (same structure + Chip "Popular")
+│       └── Button (primary, full width)
+└── Card (outline, flex=1)                  ← enterprise tier
+    └── (same structure)
+        └── Button (outline, full width)
+  `.trim(),
+    code: `<Row gap="4" wrap align="stretch">
+  <Card variant="outline" padding="lg" style={{ flex: 1, minWidth: 240, maxWidth: 320 }}>
+    <Stack gap="5" style={{ height: '100%' }}>
+      <Stack gap="2">
+        <Text size="sm" weight="medium" color="secondary">Free</Text>
+        <Row gap="1" align="baseline">
+          <Text size="3xl" weight="bold" family="display">$0</Text>
+          <Text size="sm" color="secondary">/ month</Text>
+        </Row>
+        <Text size="xs" color="secondary">For individuals getting started.</Text>
+      </Stack>
+      <Divider />
+      <Stack gap="3" style={{ flex: 1 }}>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">Up to 3 projects</Text></Row>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">1 GB storage</Text></Row>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">Community support</Text></Row>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">Basic analytics</Text></Row>
+      </Stack>
+      <Button variant="outline" style={{ width: '100%' }}>Get started</Button>
+    </Stack>
+  </Card>
+  <Card variant="elevated" padding="lg" style={{ flex: 1, minWidth: 240, maxWidth: 320, border: '2px solid var(--lucent-accent-default)' }}>
+    <Stack gap="5" style={{ height: '100%' }}>
+      <Stack gap="2">
+        <Row gap="2" align="center">
+          <Text size="sm" weight="medium" color="secondary">Pro</Text>
+          <Chip variant="accent" size="sm">Popular</Chip>
+        </Row>
+        <Row gap="1" align="baseline">
+          <Text size="3xl" weight="bold" family="display">$29</Text>
+          <Text size="sm" color="secondary">/ month</Text>
+        </Row>
+        <Text size="xs" color="secondary">For professionals and small teams.</Text>
+      </Stack>
+      <Divider />
+      <Stack gap="3" style={{ flex: 1 }}>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">Unlimited projects</Text></Row>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">50 GB storage</Text></Row>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">Priority support</Text></Row>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">Advanced analytics</Text></Row>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">Custom domains</Text></Row>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">Team collaboration</Text></Row>
+      </Stack>
+      <Button variant="primary" style={{ width: '100%' }}>Upgrade to Pro</Button>
+    </Stack>
+  </Card>
+  <Card variant="outline" padding="lg" style={{ flex: 1, minWidth: 240, maxWidth: 320 }}>
+    <Stack gap="5" style={{ height: '100%' }}>
+      <Stack gap="2">
+        <Text size="sm" weight="medium" color="secondary">Enterprise</Text>
+        <Row gap="1" align="baseline">
+          <Text size="3xl" weight="bold" family="display">$99</Text>
+          <Text size="sm" color="secondary">/ month</Text>
+        </Row>
+        <Text size="xs" color="secondary">For organizations at scale.</Text>
+      </Stack>
+      <Divider />
+      <Stack gap="3" style={{ flex: 1 }}>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">Everything in Pro</Text></Row>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">Unlimited storage</Text></Row>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">24/7 dedicated support</Text></Row>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">SSO & SAML</Text></Row>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">Audit logs</Text></Row>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">SLA guarantee</Text></Row>
+        <Row gap="2" align="center"><CheckIcon /><Text size="sm">Custom integrations</Text></Row>
+      </Stack>
+      <Button variant="outline" style={{ width: '100%' }}>Contact sales</Button>
+    </Stack>
+  </Card>
+</Row>`,
+    designNotes: 'Three tiers in a Row with flex: 1 and minWidth/maxWidth constraints ensure equal ' +
+        'sizing that wraps gracefully on narrow viewports. align="stretch" makes all cards ' +
+        'equal height. The Pro tier is visually distinguished with an accent border and ' +
+        'elevated variant so it draws the eye first. Each card uses Stack with height: 100% ' +
+        'and the feature list has flex: 1 to push the CTA button to the bottom regardless ' +
+        'of feature count. Price uses display font at 3xl for maximum impact; align="baseline" ' +
+        'on the Row anchors the period text to the price baseline. The "Popular" Chip reinforces ' +
+        'the recommended tier. CheckIcon uses success color for positive feature connotation.',
+};

package/dist-server/src/manifest/{recipes/profile-card.recipe.js → patterns/profile-card.pattern.js}

@@ -1,4 +1,4 @@
-export const RECIPE = {
+export const PATTERN = {
     id: 'profile-card',
     name: 'Profile Card',
     description: 'User profile card with avatar, name/role, bio, tag chips, stats row, and action buttons.',

package/dist-server/src/manifest/{recipes/search-filter-bar.recipe.js → patterns/search-filter-bar.pattern.js}

@@ -1,4 +1,4 @@
-export const RECIPE = {
+export const PATTERN = {
     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.',

package/dist-server/src/manifest/{recipes/settings-panel.recipe.js → patterns/settings-panel.pattern.js}

@@ -1,4 +1,4 @@
-export const RECIPE = {
+export const PATTERN = {
     id: 'settings-panel',
     name: 'Settings Panel',
     description: 'Settings card with section header, toggle rows with descriptions, select dropdown, and action buttons.',

package/dist-server/src/manifest/{recipes/stats-row.recipe.js → patterns/stats-row.pattern.js}

@@ -1,4 +1,4 @@
-export const RECIPE = {
+export const PATTERN = {
     id: 'stats-row',
     name: 'Stats Row',
     description: 'Row of individual stat cards with label, large display-font value, and trend chip with comparison.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucent-ui",
-  "version": "0.30.0",
+  "version": "0.32.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/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/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);
-        });
-    }
-});