lucent-ui 0.29.0 → 0.31.0

package/dist-server/src/components/molecules/Timeline/Timeline.manifest.js

@@ -4,19 +4,20 @@ export const COMPONENT_MANIFEST = {
     tier: 'molecule',
     domain: 'neutral',
     specVersion: '1.0',
-    description: 'A vertical ordered event list with status-colored dots, connector lines, optional dates, and custom icons.',
+    description: 'A vertical activity feed with filled status dots, inline timestamps, optional nested content blocks, and custom icons.',
     designIntent: 'Timeline renders as a semantic <ol> with each event as a <li>, preserving document order for assistive technologies. ' +
-        'The dot and connector are rendered in a fixed-width left column so content in the right column can wrap freely without misaligning the spine. ' +
-        'The connector line is omitted on the last item — there is nothing to connect to. ' +
+        'Dots are compact (20px) and filled with the status color, with white iconography for high contrast — this mirrors modern activity-feed patterns. ' +
+        'Title and date sit inline (date follows title) to keep the eye on a single reading line, rather than splitting attention across the row. ' +
+        'Each item supports an optional content slot for embedded blocks — comment cards, review notes, nested detail panels — placed below the title/description. ' +
+        'The connector line is thin (1.5px) and omitted on the last item. ' +
         'Status colors follow the same semantic token set as Alert and Badge so danger/success/warning/info carry consistent meaning across the design system. ' +
-        'Default status (no explicit icon) renders a plain dot; success/danger/warning get built-in iconography inside the dot. ' +
         'Custom icons slot in via the icon prop to handle domain-specific event types (e.g. a deploy icon, a payment icon).',
     props: [
         {
             name: 'items',
             type: 'array',
             required: true,
-            description: 'Array of TimelineItem objects. Each has id, title, optional description, optional date string, optional status, and optional icon.',
+            description: 'Array of TimelineItem objects. Each has id, title, optional description, optional content (ReactNode for embedded blocks), optional date string, optional status, and optional icon.',
         },
         {
             name: 'style',
@@ -38,18 +39,31 @@ export const COMPONENT_MANIFEST = {
 />`,
         },
         {
-            title: 'With custom icons',
+            title: 'Activity feed with nested content',
             code: `<Timeline
   items={[
-    { id: 'deploy', title: 'v1.2.0 deployed', status: 'success', icon: <RocketIcon />, date: '2h ago' },
-    { id: 'review', title: 'PR #47 merged', icon: <GitMergeIcon />, date: '3h ago' },
-    { id: 'alert', title: 'Error rate spike', status: 'warning', icon: <AlertIcon />, date: '4h ago' },
+    { id: '1', title: 'Submitted for review', date: 'Mar 22', status: 'success' },
+    {
+      id: '2',
+      title: 'Changes requested',
+      date: 'Mar 25',
+      status: 'warning',
+      content: (
+        <Card variant="outline" padding="sm" radius="md">
+          <Text size="sm" weight="semibold">Oliver Brown</Text>
+          <Text size="sm" color="secondary">Please update the error handling.</Text>
+        </Card>
+      ),
+    },
+    { id: '3', title: 'Resubmitted', date: 'Mar 28', status: 'info' },
+    { id: '4', title: 'Approved', date: 'Mar 29', status: 'success' },
   ]}
 />`,
         },
     ],
     compositionGraph: [
         { componentId: 'text', componentName: 'Text', role: 'Event title, description, and date label', required: true },
+        { componentId: 'card', componentName: 'Card', role: 'Container for nested content blocks in the content slot', required: false },
     ],
     accessibility: {
         role: 'list',

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

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

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

@@ -1,4 +1,4 @@
-export const RECIPE = {
+export const PATTERN = {
     id: 'collapsible-card',
     name: 'Collapsible Card',
     description: 'Card with an expandable/collapsible section using smooth height animation, available in all card variants.',

package/dist-server/src/manifest/patterns/dashboard-header.pattern.js

@@ -0,0 +1,98 @@
+export const PATTERN = {
+    id: 'dashboard-header',
+    name: 'Dashboard Header',
+    description: 'Full dashboard header combining breadcrumb navigation, page title with action buttons, and a row of KPI stat cards with trend indicators.',
+    category: 'dashboard',
+    components: ['text', 'button', 'chip', 'card', 'stack', 'row', 'breadcrumb', 'divider'],
+    structure: `
+Stack gap="5"
+├── Stack gap="4"                             ← action bar
+│   ├── 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"
+│   │       ├── Button (outline, sm, leftIcon) ← Export
+│   │       └── Button (primary, sm, leftIcon) ← New report
+│   └── Divider
+└── Row gap="3" wrap                          ← stats row
+    └── 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, borderless) ← trend
+                └── Text (xs, secondary)       ← comparison
+  `.trim(),
+    code: `<Stack gap="5" style={{ maxWidth: 860 }}>
+  <Stack gap="4">
+    <Breadcrumb items={[
+      { label: 'Home', href: '#' },
+      { label: 'Analytics', href: '#' },
+      { label: 'Overview' },
+    ]} />
+    <Row justify="between" align="end">
+      <Stack gap="1">
+        <Text as="h1" size="3xl" weight="bold" family="display">Analytics Overview</Text>
+        <Text size="sm" color="secondary">Last updated 5 minutes ago</Text>
+      </Stack>
+      <Row gap="2">
+        <Button variant="outline" size="sm" leftIcon={<DownloadIcon />}>Export</Button>
+        <Button variant="primary" size="sm" leftIcon={<PlusIcon />}>New report</Button>
+      </Row>
+    </Row>
+    <Divider />
+  </Stack>
+  <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 Visitors</Text>
+        <Text size="2xl" weight="bold" family="display">24.8k</Text>
+        <Row gap="2" align="center">
+          <Chip variant="success" size="sm" borderless>+18%</Chip>
+          <Text size="xs" color="secondary">20.9k last month</Text>
+        </Row>
+      </Stack>
+    </Card>
+    <Card variant="outline" padding="md" style={{ flex: 1, minWidth: 180 }}>
+      <Stack gap="3">
+        <Text size="xs" color="secondary" weight="medium">Conversion Rate</Text>
+        <Text size="2xl" weight="bold" family="display">3.24%</Text>
+        <Row gap="2" align="center">
+          <Chip variant="success" size="sm" borderless>+0.4%</Chip>
+          <Text size="xs" color="secondary">2.84% last month</Text>
+        </Row>
+      </Stack>
+    </Card>
+    <Card variant="outline" padding="md" style={{ flex: 1, minWidth: 180 }}>
+      <Stack gap="3">
+        <Text size="xs" color="secondary" weight="medium">Avg. Session</Text>
+        <Text size="2xl" weight="bold" family="display">4m 32s</Text>
+        <Row gap="2" align="center">
+          <Chip variant="danger" size="sm" borderless>-12%</Chip>
+          <Text size="xs" color="secondary">5m 08s last month</Text>
+        </Row>
+      </Stack>
+    </Card>
+    <Card variant="outline" padding="md" style={{ flex: 1, minWidth: 180 }}>
+      <Stack gap="3">
+        <Text size="xs" color="secondary" weight="medium">Revenue</Text>
+        <Text size="2xl" weight="bold" family="display">$48.2k</Text>
+        <Row gap="2" align="center">
+          <Chip variant="success" size="sm" borderless>+24%</Chip>
+          <Text size="xs" color="secondary">$38.9k last month</Text>
+        </Row>
+      </Stack>
+    </Card>
+  </Row>
+</Stack>`,
+    designNotes: 'This composition combines two common dashboard patterns: the ActionBar and StatsRow. ' +
+        'The breadcrumb provides navigation context above the title. align="end" on the ' +
+        'title row anchors the action buttons to the baseline of the subtitle. Button ' +
+        'leftIcon props add visual affordance to Export (download icon) and New report ' +
+        '(plus icon). The Divider separates the header chrome from the metric content below. ' +
+        'Stat cards use flex: 1 with minWidth: 180 for responsive equal sizing. Display font ' +
+        'on metric values creates instant visual hierarchy. Trend chips use success/danger ' +
+        'variants with borderless styling so they read as inline metadata, not interactive tags.',
+};

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

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

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

@@ -1,4 +1,4 @@
-export const RECIPE = {
+export const PATTERN = {
     id: 'form-layout',
     name: 'Form Layout',
     description: 'Stacked form with grouped sections, FormField labels, validation hints, and a submit/cancel footer.',

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

@@ -0,0 +1,12 @@
+export { PATTERN as ProfileCard } from './profile-card.pattern.js';
+export { PATTERN as SettingsPanel } from './settings-panel.pattern.js';
+export { PATTERN as StatsRow } from './stats-row.pattern.js';
+export { PATTERN as ActionBar } from './action-bar.pattern.js';
+export { PATTERN as FormLayout } from './form-layout.pattern.js';
+export { PATTERN as EmptyStateCard } from './empty-state-card.pattern.js';
+export { PATTERN as CollapsibleCard } from './collapsible-card.pattern.js';
+export { PATTERN as SearchFilterBar } from './search-filter-bar.pattern.js';
+export { PATTERN as PricingTable } from './pricing-table.pattern.js';
+export { PATTERN as NotificationFeed } from './notification-feed.pattern.js';
+export { PATTERN as OnboardingFlow } from './onboarding-flow.pattern.js';
+export { PATTERN as DashboardHeader } from './dashboard-header.pattern.js';

package/dist-server/src/manifest/patterns/notification-feed.pattern.js

@@ -0,0 +1,91 @@
+export const PATTERN = {
+    id: 'notification-feed',
+    name: 'Notification Feed',
+    description: 'Scrollable list of notification items with avatar, message, timestamp, type chip, and contextual action buttons. Unread items are visually distinct.',
+    category: 'card',
+    components: ['card', 'avatar', 'text', 'chip', 'button', 'stack', 'row'],
+    structure: `
+Card (elevated, padding via style)
+└── Stack gap="3"
+    ├── Row justify="between" align="center"  ← header
+    │   ├── Row gap="2" align="center"
+    │   │   ├── Text (lg, semibold)           ← title
+    │   │   └── Chip (accent, sm)             ← unread count
+    │   └── Button (ghost, xs)                ← mark all read
+    └── Stack gap="2"                         ← notification list
+        └── Card[] (filled for unread, ghost for read)
+            └── Row gap="3" align="start" justify="between"
+                ├── Row gap="3" align="start"
+                │   ├── Avatar (sm)
+                │   └── Stack gap="1"
+                │       ├── Text (sm)         ← message with bold name + target
+                │       └── Row gap="2"
+                │           ├── Chip (type-colored, sm, borderless)
+                │           └── Text (xs, secondary) ← timestamp
+                └── Row gap="1"               ← actions
+                    ├── Button? (primary/outline, xs) ← contextual
+                    └── Button (ghost, xs)     ← dismiss
+  `.trim(),
+    code: `<Card variant="elevated" padding="none" style={{ width: 520, padding: 'var(--lucent-space-4)' }}>
+  <Stack gap="3">
+    <Row justify="between" align="center" style={{ padding: '0 var(--lucent-space-2)' }}>
+      <Row gap="2" align="center">
+        <Text size="lg" weight="semibold">Notifications</Text>
+        <Chip variant="accent" size="sm">3 new</Chip>
+      </Row>
+      <Button variant="ghost" size="xs">Mark all read</Button>
+    </Row>
+    <Stack gap="2">
+      <Card variant="filled" padding="md" style={{ borderLeft: '3px solid var(--lucent-accent-default)' }}>
+        <Row gap="3" align="start" justify="between">
+          <Row gap="3" align="start" style={{ flex: 1, minWidth: 0 }}>
+            <Avatar alt="Alice Chen" size="sm" />
+            <Stack gap="1" style={{ flex: 1, minWidth: 0 }}>
+              <Text size="sm">
+                <Text as="span" size="sm" weight="semibold">Alice Chen</Text>
+                {' '}mentioned you in{' '}
+                <Text as="span" size="sm" weight="medium">Design system roadmap</Text>
+              </Text>
+              <Row gap="2" align="center">
+                <Chip variant="accent" size="sm" borderless>Mention</Chip>
+                <Text size="xs" color="secondary">2 min ago</Text>
+              </Row>
+            </Stack>
+          </Row>
+          <Button variant="ghost" size="xs">Dismiss</Button>
+        </Row>
+      </Card>
+      <Card variant="ghost" padding="md">
+        <Row gap="3" align="start" justify="between">
+          <Row gap="3" align="start" style={{ flex: 1, minWidth: 0 }}>
+            <Avatar alt="Carol Park" size="sm" />
+            <Stack gap="1" style={{ flex: 1, minWidth: 0 }}>
+              <Text size="sm">
+                <Text as="span" size="sm" weight="semibold">Carol Park</Text>
+                {' '}requested your review on{' '}
+                <Text as="span" size="sm" weight="medium">PR #139: Add Slider atom</Text>
+              </Text>
+              <Row gap="2" align="center">
+                <Chip variant="warning" size="sm" borderless>Review</Chip>
+                <Text size="xs" color="secondary">1 hour ago</Text>
+              </Row>
+            </Stack>
+          </Row>
+          <Row gap="1">
+            <Button variant="primary" size="xs">Review</Button>
+            <Button variant="ghost" size="xs">Dismiss</Button>
+          </Row>
+        </Row>
+      </Card>
+    </Stack>
+  </Stack>
+</Card>`,
+    designNotes: 'Unread notifications use Card variant="filled" with an accent left border to create ' +
+        'a visual distinction from read items (variant="ghost"). The accent border is a ' +
+        'familiar "unread indicator" pattern. Each notification item is a self-contained Row ' +
+        'with the avatar and message on the left (flex: 1, minWidth: 0 for text truncation) ' +
+        'and contextual actions on the right. Type chips (mention, comment, review, invite) ' +
+        'use semantic variant colors (accent, info, warning, success) with borderless styling ' +
+        'so they read as metadata, not interactive elements. Action buttons are contextual: ' +
+        'review requests get a primary "Review" button, invites get "Accept", others just "Dismiss".',
+};

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.',