lucent-ui 0.37.0 → 0.39.0

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

@@ -1,20 +1,20 @@
 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.',
+    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. Supports multi-action headers with secondary outline buttons preceding the primary CTA.',
     category: 'action',
     components: ['text', 'button', 'row', 'stack', 'breadcrumb', 'divider', 'card'],
     structure: `
 Page header:
 Stack gap="4"
 ├── Breadcrumb                               ← navigation context
-├── Row justify="between" align="end"
+├── Row justify="between" align="end" wrap
 │   ├── Stack gap="1"
 │   │   ├── Text (h1, 3xl, bold, display)    ← page title
 │   │   └── Text (sm, secondary)             ← subtitle
-│   └── Row gap="2"                          ← actions
-│       ├── Button (outline, sm)
-│       └── Button (primary, sm)
+│   └── Row gap="2" wrap                     ← actions (wraps below title on narrow screens)
+│       ├── Button[] (outline, sm)           ← secondary actions (0–3, leftmost)
+│       └── Button (primary, sm)             ← primary CTA (rightmost, always single)
 └── Divider
 
 Card header:
@@ -44,6 +44,28 @@ Row justify="between" align="start"
   <Divider />
 </Stack>`,
     variants: [
+        {
+            title: 'Page header — detail view with secondary actions',
+            code: `<Stack gap="4">
+  <Breadcrumb items={[
+    { label: 'Home', href: '#' },
+    { label: 'Candidates', href: '#' },
+    { label: 'Sana Khan' },
+  ]} />
+  <Row justify="between" align="end" wrap gap="3">
+    <Stack gap="1">
+      <Text as="h1" size="3xl" weight="bold" family="display">Sana Khan</Text>
+      <Text size="sm" color="secondary">Senior Product Designer · Added 3 days ago</Text>
+    </Stack>
+    <Row gap="2" wrap>
+      <Button variant="outline" size="sm">Edit</Button>
+      <Button variant="outline" size="sm">Archive</Button>
+      <Button variant="primary" size="sm">Submit to opportunity</Button>
+    </Row>
+  </Row>
+  <Divider />
+</Stack>`,
+        },
         {
             title: 'Page header — danger zone',
             code: `<Stack gap="4">
@@ -87,5 +109,11 @@ Row justify="between" align="start"
         '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.',
+        'Both patterns use justify="between" to push title and actions to opposite edges. ' +
+        'Multi-action page headers (e.g. detail views with Edit / Archive / Submit) follow ' +
+        'the three-zone CTA rule: 0–3 secondary actions render as variant="outline" to the ' +
+        'left of a single primary button, keeping them visually subordinate. Beyond 3 ' +
+        'secondary actions, reach for SplitButton or an overflow menu instead of widening ' +
+        'the row. Both the outer title/action Row and the inner action Row set wrap so the ' +
+        'buttons flow below the title on narrow viewports instead of overflowing.',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucent-ui",
-  "version": "0.37.0",
+  "version": "0.39.0",
   "description": "An AI-first React component library with machine-readable manifests.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -22,6 +22,7 @@
   "bin": {
     "lucent-ui": "./dist-cli/cli/entry.js",
     "lucent-mcp": "./dist-server/server/index.js",
+    "lucent-mcp-http": "./dist-server/server/http.js",
     "lucent-manifest": "./dist-cli/cli/index.js"
   },
   "sideEffects": false,