lucent-ui 0.33.0 → 0.35.0

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

@@ -6,6 +6,10 @@ import { PATTERN as FormLayout } from '../src/manifest/patterns/form-layout.patt
 import { PATTERN as EmptyStateCard } from '../src/manifest/patterns/empty-state-card.pattern.js';
 import { PATTERN as CollapsibleCard } from '../src/manifest/patterns/collapsible-card.pattern.js';
 import { PATTERN as SearchFilterBar } from '../src/manifest/patterns/search-filter-bar.pattern.js';
+import { PATTERN as ProductItemCard } from '../src/manifest/patterns/product-item-card.pattern.js';
+import { PATTERN as NotificationCard } from '../src/manifest/patterns/notification-card.pattern.js';
+import { PATTERN as ConfirmationDialog } from '../src/manifest/patterns/confirmation-dialog.pattern.js';
+import { PATTERN as BulkActionBar } from '../src/manifest/patterns/bulk-action-bar.pattern.js';
 export const ALL_PATTERNS = [
     ProfileCard,
     SettingsPanel,
@@ -15,4 +19,8 @@ export const ALL_PATTERNS = [
     EmptyStateCard,
     CollapsibleCard,
     SearchFilterBar,
+    ProductItemCard,
+    NotificationCard,
+    ConfirmationDialog,
+    BulkActionBar,
 ];

package/dist-server/src/components/atoms/CodeBlock/CodeBlock.manifest.js

@@ -39,6 +39,20 @@ export const COMPONENT_MANIFEST = {
             description: '"code" renders a <pre><code> block with horizontal scroll. ' +
                 '"prompt" renders a single-line truncated span suited to AI prompts.',
         },
+        {
+            name: 'minimal',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Hides the header bar and shows only a corner copy button overlay.',
+        },
+        {
+            name: 'wrap',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'When true, wraps long lines instead of scrolling horizontally.',
+        },
         {
             name: 'helperText',
             type: 'string',

package/dist-server/src/manifest/patterns/bulk-action-bar.pattern.js

@@ -0,0 +1,71 @@
+export const PATTERN = {
+    id: 'bulk-action-bar',
+    name: 'Bulk Action Bar',
+    description: 'Sticky bar that appears when table rows are selected. Shows selection count, bulk action buttons, and a clear selection control.',
+    category: 'action',
+    components: ['checkbox', 'text', 'button', 'button-group', 'divider', 'row'],
+    structure: `
+Row gap="3" align="center" (surface background, padding=md)
+├── Checkbox (indeterminate when partial)
+├── Text (sm, semibold)              ← "3 selected"
+├── Divider (vertical)
+├── ButtonGroup
+│   ├── Button (outline, sm)         ← "Export"
+│   ├── Button (outline, sm)         ← "Archive"
+│   └── Button (danger-outline, sm)  ← "Delete"
+└── Row flex=1 justify="end"
+    └── Button (ghost, sm)           ← "Clear selection"
+  `.trim(),
+    code: `<Row gap="3" align="center" style={{ padding: 'var(--lucent-space-3) var(--lucent-space-4)', background: 'var(--lucent-surface)', borderRadius: 'var(--lucent-radius-lg)', border: '1px solid var(--lucent-border-default)' }}>
+  <Checkbox indeterminate checked onChange={() => {}} />
+  <Text size="sm" weight="semibold">3 selected</Text>
+  <Divider orientation="vertical" />
+  <ButtonGroup>
+    <Button variant="outline" size="sm">Export</Button>
+    <Button variant="outline" size="sm">Archive</Button>
+    <Button variant="danger-outline" size="sm">Delete</Button>
+  </ButtonGroup>
+  <Row style={{ flex: 1, justifyContent: 'flex-end' }}>
+    <Button variant="ghost" size="sm">Clear selection</Button>
+  </Row>
+</Row>`,
+    variants: [
+        {
+            title: 'Minimal (single action)',
+            code: `<Row gap="3" align="center" style={{ padding: 'var(--lucent-space-3) var(--lucent-space-4)', background: 'var(--lucent-surface)', borderRadius: 'var(--lucent-radius-lg)', border: '1px solid var(--lucent-border-default)' }}>
+  <Checkbox checked onChange={() => {}} />
+  <Text size="sm" weight="semibold">12 selected</Text>
+  <Row style={{ flex: 1, justifyContent: 'flex-end' }}>
+    <Button variant="danger" size="sm">Delete selected</Button>
+  </Row>
+</Row>`,
+        },
+        {
+            title: 'With count badge and secondary actions',
+            code: `<Row gap="3" align="center" style={{ padding: 'var(--lucent-space-3) var(--lucent-space-4)', background: 'var(--lucent-surface)', borderRadius: 'var(--lucent-radius-lg)', border: '1px solid var(--lucent-border-default)' }}>
+  <Checkbox indeterminate checked onChange={() => {}} />
+  <Row gap="2" align="center">
+    <Text size="sm" weight="semibold">5 of 24 selected</Text>
+    <Button variant="ghost" size="xs">Select all</Button>
+  </Row>
+  <Divider orientation="vertical" />
+  <Button variant="outline" size="sm">Assign label</Button>
+  <Button variant="outline" size="sm">Move to</Button>
+  <Button variant="danger-outline" size="sm">Delete</Button>
+  <Row style={{ flex: 1, justifyContent: 'flex-end' }}>
+    <Button variant="ghost" size="sm">Clear</Button>
+  </Row>
+</Row>`,
+        },
+    ],
+    designNotes: 'The bar uses a Row with center alignment so all elements sit on the same ' +
+        'horizontal baseline. The Checkbox reflects selection state — indeterminate ' +
+        'when some rows are selected, checked when all are. A vertical Divider ' +
+        'visually separates the selection count from the action buttons. ButtonGroup ' +
+        'clusters related actions with shared border radius. The danger-outline ' +
+        'variant on the Delete button signals destructive intent without the visual ' +
+        'weight of a filled danger button. The clear selection Button is pushed to ' +
+        'the far right via flex: 1 on its wrapper Row, keeping it accessible but ' +
+        'visually subordinate. The minimal variant drops the ButtonGroup and Divider ' +
+        'for a simpler single-action layout.',
+};

package/dist-server/src/manifest/patterns/confirmation-dialog.pattern.js

@@ -0,0 +1,95 @@
+export const PATTERN = {
+    id: 'confirmation-dialog',
+    name: 'Confirmation Dialog',
+    description: 'Centered modal-style card for destructive action confirmations with danger button pairing. For delete/remove/reset flows.',
+    category: 'action',
+    components: ['card', 'icon', 'text', 'button', 'input', 'stack', 'row'],
+    structure: `
+Card (elevated, padding="lg", maxWidth=400)
+└── Stack gap="8" align="center"
+    ├── Icon (lg, danger color)               ← warning icon
+    ├── Stack gap="1" align="center"
+    │   ├── Text (lg, semibold, center)       ← "Delete project?"
+    │   └── Text (sm, secondary, center)      ← consequence description
+    └── Row gap="3"
+        ├── Button (outline, full width)      ← "Cancel"
+        └── Button (danger, full width)       ← "Delete"
+  `.trim(),
+    code: `<Card variant="elevated" padding="lg" style={{ maxWidth: 400 }}>
+  <Stack gap="8" align="center">
+    <Icon size="xl" color="var(--lucent-danger-text)">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+        <line x1={12} y1={9} x2={12} y2={13} />
+        <line x1={12} y1={17} x2={12.01} y2={17} />
+      </svg>
+    </Icon>
+    <Stack gap="1" align="center">
+      <Text size="lg" weight="semibold">Delete project?</Text>
+      <Text size="sm" color="secondary" align="center">This will permanently delete "Acme Corp" and all of its data. This action cannot be undone.</Text>
+    </Stack>
+    <Row gap="3" style={{ width: '100%' }}>
+      <Button variant="outline" style={{ flex: 1 }}>Cancel</Button>
+      <Button variant="danger" style={{ flex: 1 }}>Delete</Button>
+    </Row>
+  </Stack>
+</Card>`,
+    variants: [
+        {
+            title: 'With typed confirmation',
+            code: `<Card variant="elevated" padding="lg" style={{ maxWidth: 400 }}>
+  <Stack gap="8" align="center">
+    <Icon size="xl" color="var(--lucent-danger-text)">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+        <line x1={12} y1={9} x2={12} y2={13} />
+        <line x1={12} y1={17} x2={12.01} y2={17} />
+      </svg>
+    </Icon>
+    <Stack gap="1" align="center">
+      <Text size="lg" weight="semibold">Delete your account?</Text>
+      <Text size="sm" color="secondary" align="center">All projects, data, and billing history will be permanently removed. Type DELETE to confirm.</Text>
+    </Stack>
+    <Input placeholder="Type DELETE to confirm" size="md" style={{ width: '100%' }} />
+    <Row gap="3" style={{ width: '100%' }}>
+      <Button variant="outline" style={{ flex: 1 }}>Cancel</Button>
+      <Button variant="danger" style={{ flex: 1 }} disabled>Delete account</Button>
+    </Row>
+  </Stack>
+</Card>`,
+        },
+        {
+            title: 'Non-destructive confirmation',
+            code: `<Card variant="elevated" padding="lg" style={{ maxWidth: 400 }}>
+  <Stack gap="8" align="center">
+    <Icon size="xl" color="var(--lucent-info-text)">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+        <circle cx={12} cy={12} r={10} />
+        <line x1={12} y1={16} x2={12} y2={12} />
+        <line x1={12} y1={8} x2={12.01} y2={8} />
+      </svg>
+    </Icon>
+    <Stack gap="1" align="center">
+      <Text size="lg" weight="semibold">Publish changes?</Text>
+      <Text size="sm" color="secondary" align="center">This will make your draft visible to all team members. You can unpublish later from settings.</Text>
+    </Stack>
+    <Row gap="3" style={{ width: '100%' }}>
+      <Button variant="outline" style={{ flex: 1 }}>Keep as draft</Button>
+      <Button variant="primary" style={{ flex: 1 }}>Publish</Button>
+    </Row>
+  </Stack>
+</Card>`,
+        },
+    ],
+    designNotes: 'The centered layout with align="center" creates a focused, modal-like feel ' +
+        'even though this is a Card, not a true modal. The warning Icon at the top ' +
+        'provides an immediate visual signal of severity. The text stack uses gap="1" ' +
+        'to tightly couple the title and consequence description. Buttons use flex: 1 ' +
+        'inside a full-width Row so they split evenly — Cancel (outline) on the left, ' +
+        'destructive action (danger) on the right, following the convention of placing ' +
+        'the primary action on the right. The typed confirmation variant adds an Input ' +
+        'between the text and buttons with the danger Button disabled until the user ' +
+        'types the confirmation text. The non-destructive variant swaps the danger ' +
+        'Button for primary and the warning Icon for info, reusing the same centered ' +
+        'layout for any "are you sure?" flow.',
+};

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

@@ -0,0 +1,108 @@
+export const PATTERN = {
+    id: 'announcement-card',
+    name: 'Announcement Card',
+    description: 'Rich announcement card with optional media slot, status icon, title, message, and action buttons. For in-page announcements, feature launches, promotions, or system notices.',
+    category: 'card',
+    components: ['card', 'icon', 'text', 'button', 'chip', 'stack', 'row'],
+    structure: `
+Card (elevated, padding="lg", media=<img>)
+└── Stack gap="4"
+    ├── Row gap="2" wrap                       ← optional badge row
+    │   └── Chip (accent/success, sm)          ← category / "New"
+    ├── Stack gap="1"
+    │   ├── Text (md, semibold)                ← title
+    │   └── Text (sm, secondary)               ← message body
+    └── Row gap="2"
+        ├── Button (primary, sm)               ← action
+        └── Button (ghost, sm)                 ← dismiss
+  `.trim(),
+    code: `<Card
+  variant="elevated"
+  padding="lg"
+  style={{ width: 380 }}
+  media={<img src="/announcements/feature-launch.jpg" alt="New dashboard" style={{ width: '100%', height: 160, objectFit: 'cover', display: 'block' }} />}
+>
+  <Stack gap="4">
+    <Row gap="2">
+      <Chip variant="accent" size="sm">New Feature</Chip>
+    </Row>
+    <Stack gap="1">
+      <Text size="md" weight="semibold">Redesigned Analytics Dashboard</Text>
+      <Text size="sm" color="secondary">Track key metrics at a glance with our new real-time dashboard. Includes custom date ranges, export to CSV, and team sharing.</Text>
+    </Stack>
+    <Row gap="2">
+      <Button variant="primary" size="sm">Try it now</Button>
+      <Button variant="ghost" size="sm">Learn more</Button>
+    </Row>
+  </Stack>
+</Card>`,
+    variants: [
+        {
+            title: 'System notice (no media, with status icon)',
+            code: `<Card variant="outline" padding="md" style={{ width: 400 }}>
+  <Row gap="3" align="start">
+    <Icon size="lg" color="var(--lucent-warning-text)">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+        <line x1={12} y1={9} x2={12} y2={13} />
+        <line x1={12} y1={17} x2={12.01} y2={17} />
+      </svg>
+    </Icon>
+    <Stack gap="2" style={{ flex: 1 }}>
+      <Text size="sm" weight="semibold">Storage almost full</Text>
+      <Text size="sm" color="secondary">You've used 92% of your storage. Upgrade your plan or delete unused files to free up space.</Text>
+      <Row gap="2">
+        <Button variant="primary" size="sm">Upgrade plan</Button>
+        <Button variant="ghost" size="sm">Manage storage</Button>
+      </Row>
+    </Stack>
+  </Row>
+</Card>`,
+        },
+        {
+            title: 'Promotional banner with media',
+            code: `<Card variant="filled" padding="md" hoverable style={{ width: 380 }}>
+  <Row gap="5" align="center">
+    <div style={{ width: 80, height: 80, borderRadius: 'var(--lucent-radius-lg)', overflow: 'hidden', flexShrink: 0 }}>
+      <img src="/promo/spring-sale.jpg" alt="Spring sale" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
+    </div>
+    <Stack gap="2" style={{ flex: 1 }}>
+      <Row gap="2" align="center">
+        <Text size="md" weight="semibold">Spring Sale</Text>
+        <Chip variant="success" size="sm">-30%</Chip>
+      </Row>
+      <Text size="sm" color="secondary">All Pro plans are 30% off through April. Upgrade now and lock in the price for a year.</Text>
+      <Button variant="primary" size="sm" style={{ alignSelf: 'flex-start' }}>Claim offer</Button>
+    </Stack>
+  </Row>
+</Card>`,
+        },
+        {
+            title: 'Success confirmation',
+            code: `<Card variant="outline" padding="md" style={{ width: 400, borderColor: 'var(--lucent-success-default)' }}>
+  <Row gap="3" align="start">
+    <Icon size="lg" color="var(--lucent-success-text)">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+        <polyline points="22 4 12 14.01 9 11.01" />
+      </svg>
+    </Icon>
+    <Stack gap="1" style={{ flex: 1 }}>
+      <Text size="sm" weight="semibold">Payment received</Text>
+      <Text size="sm" color="secondary">Your invoice #1042 for $2,400.00 has been paid successfully.</Text>
+    </Stack>
+    <Button variant="ghost" size="sm">Dismiss</Button>
+  </Row>
+</Card>`,
+        },
+    ],
+    designNotes: 'The default announcement card uses the Card media slot for a full-bleed hero ' +
+        'image that grabs attention, followed by an optional Chip badge for categorization, ' +
+        'then title + description + action buttons. This distinguishes it from the Alert ' +
+        'molecule which is a lightweight status banner — the Announcement Card is richer, ' +
+        'supports media, and drives the user toward an action. The system notice variant ' +
+        'drops the media for a compact icon-led layout similar to Alert but with action ' +
+        'buttons. The promotional variant uses an inline thumbnail (Row with rounded image) ' +
+        'for a side-by-side layout that works well for offers and upsells. The success ' +
+        'variant uses a tinted border to reinforce status at a glance.',
+};

package/dist-server/src/manifest/patterns/product-item-card.pattern.js

@@ -0,0 +1,110 @@
+export const PATTERN = {
+    id: 'product-item-card',
+    name: 'Product/Item Card',
+    description: 'Versatile content card with media slot, title, tags, metadata, and CTA. Reusable for products, articles, team members, or any entity list.',
+    category: 'card',
+    components: ['card', 'avatar', 'icon', 'text', 'chip', 'button', 'stack', 'row'],
+    structure: `
+Card (elevated, padding="lg", media=<img>)
+└── Stack gap="4"
+    ├── Stack gap="1"
+    │   ├── Text (md, semibold)        ← title
+    │   └── Text (sm, secondary)       ← subtitle
+    ├── Row gap="2" wrap
+    │   └── Chip[] (neutral, sm)       ← tags / categories
+    ├── Row gap="4" justify="between" align="baseline"
+    │   ├── Text (lg, bold, display)   ← price / key metric
+    │   └── Text (xs, secondary)       ← secondary info
+    └── Button (primary, full width)   ← CTA
+  `.trim(),
+    code: `<Card
+  variant="elevated"
+  padding="lg"
+  style={{ width: 320 }}
+  media={<img src="/products/headphones.jpg" alt="Wireless Headphones" style={{ width: '100%', height: 180, objectFit: 'cover', display: 'block' }} />}
+>
+  <Stack gap="4">
+    <Stack gap="1">
+      <Text size="md" weight="semibold">Wireless Headphones</Text>
+      <Text size="sm" color="secondary">Active noise cancelling, 40hr battery</Text>
+    </Stack>
+    <Row gap="2" wrap>
+      <Chip variant="neutral" size="sm">Audio</Chip>
+      <Chip variant="neutral" size="sm">Bluetooth</Chip>
+      <Chip variant="neutral" size="sm">ANC</Chip>
+    </Row>
+    <Row gap="4" justify="between" align="baseline">
+      <Text size="lg" weight="bold" family="display">$249.00</Text>
+      <Text size="xs" color="secondary">Free shipping</Text>
+    </Row>
+    <Button variant="primary" style={{ width: '100%' }}>Add to Cart</Button>
+  </Stack>
+</Card>`,
+    variants: [
+        {
+            title: 'Article card',
+            code: `<Card variant="outline" padding="lg" hoverable style={{ width: 340 }}>
+  <Stack gap="4">
+    <Row gap="3" align="start">
+      <Icon size={20} color="var(--lucent-text-secondary)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+          <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+          <polyline points="14 2 14 8 20 8" />
+          <line x1={16} y1={13} x2={8} y2={13} />
+          <line x1={16} y1={17} x2={8} y2={17} />
+        </svg>
+      </Icon>
+      <Stack gap="1" style={{ flex: 1 }}>
+        <Text size="md" weight="semibold">Design Tokens at Scale</Text>
+        <Text size="xs" color="secondary">Published Mar 15, 2026</Text>
+      </Stack>
+    </Row>
+    <Text size="sm" color="secondary">
+      How we unified spacing, color, and typography across 12 product surfaces using a single token system.
+    </Text>
+    <Row gap="2" wrap>
+      <Chip variant="neutral" size="sm">Design Systems</Chip>
+      <Chip variant="neutral" size="sm">Tokens</Chip>
+    </Row>
+    <Row gap="4" justify="between" align="center">
+      <Text size="xs" color="secondary">8 min read</Text>
+      <Button variant="ghost" size="sm">Read more</Button>
+    </Row>
+  </Stack>
+</Card>`,
+        },
+        {
+            title: 'Team member card',
+            code: `<Card variant="filled" padding="lg" style={{ width: 280 }}>
+  <Stack gap="4">
+    <Stack gap="3" align="center">
+      <Avatar src="/avatars/alex.jpg" alt="Alex Chen" size="lg" />
+      <Stack gap="0" align="center">
+        <Text size="md" weight="semibold">Alex Chen</Text>
+        <Text size="sm" color="secondary">Engineering Lead</Text>
+      </Stack>
+    </Stack>
+    <Row gap="2" wrap justify="center">
+      <Chip variant="neutral" size="sm">React</Chip>
+      <Chip variant="neutral" size="sm">Go</Chip>
+      <Chip variant="neutral" size="sm">Platform</Chip>
+    </Row>
+    <Row gap="3">
+      <Button variant="outline" style={{ flex: 1 }} size="sm">Profile</Button>
+      <Button variant="primary" style={{ flex: 1 }} size="sm">Message</Button>
+    </Row>
+  </Stack>
+</Card>`,
+        },
+    ],
+    designNotes: 'The default product card uses the Card media slot for a full-bleed hero image ' +
+        'at the top, keeping the content area clean with just title, tags, price, and CTA. ' +
+        'Tags use neutral Chips at sm size for low visual weight — they inform without ' +
+        'competing with the title. The price/metric row uses justify="between" with ' +
+        'align="baseline" to anchor the large display-font value and the secondary caption ' +
+        'to the same text baseline. A full-width primary Button as the sole CTA creates a ' +
+        'clear action target. The article variant swaps the media slot for an inline Icon + ' +
+        'text header and replaces the price row with read-time + ghost button, keeping the ' +
+        'same vertical rhythm. The team member variant centers the content for a profile-style ' +
+        'layout and uses a dual-button footer with flex: 1 for equal width.',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucent-ui",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "description": "An AI-first React component library with machine-readable manifests.",
   "type": "module",
   "main": "./dist/index.cjs",