@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.31

package/dist/registry.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
-  "libVersion": "1.0.0-beta.30",
-  "generatedAt": "2026-07-04T16:57:54.773Z",
-  "componentCount": 142,
+  "libVersion": "1.0.0-beta.31",
+  "generatedAt": "2026-07-31T11:06:30.310Z",
+  "componentCount": 147,
   "components": [
     {
       "name": "Accordion",
@@ -60,7 +60,7 @@
       "cssVariables": [
         "--color-border",
         "--form-radius",
-        "--color-background-secondary",
+        "--color-surface",
         "--color-primary",
         "--color-text-primary"
       ],
@@ -160,7 +160,7 @@
           "description": "A render prop for the footer, which receives a `close` function. Use this to render action buttons."
         }
       },
-      "codeExample": "import { AlertDialog, Button } from \"@flikk/ui\";\nimport { ExclamationTriangleIcon } from \"@heroicons/react/24/solid\";\n\n<AlertDialog\n  trigger={<Button color=\"danger\">Delete Account</Button>}\n  icon={<ExclamationTriangleIcon className=\"w-6 h-6 text-[var(--color-danger)]\" />}\n  title=\"Are you absolutely sure?\"\n  subtitle=\"This action cannot be undone. This will permanently delete your account and remove your data from our servers.\"\n  footer={(close) => (\n    <>\n      <Button variant=\"outline\" color=\"neutral\" onClick={close}>\n        Cancel\n      </Button>\n      <Button color=\"danger\" onClick={close}>\n        Yes, delete account\n      </Button>\n    </>\n  )}\n/>"
+      "codeExample": "import { AlertDialog, Button } from \"@flikk/ui\";\n\n<AlertDialog\n  trigger={<Button color=\"danger\">Delete Account</Button>}\n  icon={<ExclamationTriangleIcon className=\"w-6 h-6 text-[var(--color-danger)]\" />}\n  title=\"Are you absolutely sure?\"\n  subtitle=\"This action cannot be undone. This will permanently delete your account and remove your data from our servers.\"\n  footer={(close) => (\n    <>\n      <Button variant=\"outline\" color=\"mono\" onClick={close}>\n        Cancel\n      </Button>\n      <Button color=\"danger\" onClick={close}>\n        Yes, delete account\n      </Button>\n    </>\n  )}\n/>"
     },
     {
       "name": "AspectRatio",
@@ -170,7 +170,7 @@
       "description": "Maintains a consistent width-to-height ratio for its children. Useful for images, videos, maps, and embedded content.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "ratio": {
           "type": "number",
@@ -200,14 +200,7 @@
         "size": {
           "type": "AvatarSize",
           "default": "md",
-          "description": "The size of the avatar",
-          "options": [
-            "xs",
-            "sm",
-            "md",
-            "lg",
-            "xl"
-          ]
+          "description": "The size of the avatar — a named rung (`\"md\"`) or an exact pixel size (`30`). Prefer this over a `className=\"size-[30px]\"` override: the shipped stylesheet only contains the classes used by this library's own source, so an arbitrary size utility resolves to nothing for consumers who don't run Tailwind themselves."
         },
         "status": {
           "type": "AvatarStatus",
@@ -291,7 +284,8 @@
       },
       "themeKeys": [
         "baseStyle",
-        "sizes",
+        "sizeStyle",
+        "glyphSizes",
         "xs",
         "sm",
         "md",
@@ -303,6 +297,19 @@
         "busy",
         "away",
         "none",
+        "statusPositionStyle",
+        "statusSizes",
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl",
+        "verifiedSizes",
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl",
         "titleStyle",
         "subtitleStyle",
         "textSizes",
@@ -324,15 +331,12 @@
         "--avatar-radius",
         "--color-border",
         "--color-primary",
-        "--avatar-size-xs",
-        "--avatar-size-sm",
-        "--avatar-size-md",
-        "--avatar-size-lg",
-        "--avatar-size-xl",
+        "--avatar-size",
         "--color-success",
-        "--color-text-muted",
+        "--color-mono-500",
         "--color-danger",
-        "--color-warning"
+        "--color-warning",
+        "--color-text-muted"
       ],
       "codeExample": "import { Avatar } from \"@flikk/ui\";\n\n<Avatar src=\"...\" name=\"Sarah Chen\" size=\"md\" />"
     },
@@ -341,7 +345,7 @@
       "category": "core",
       "pattern": "simple",
       "importPath": "@flikk/ui/core",
-      "description": "Displays multiple overlapping avatars in a group with overflow handling and customizable spacing.",
+      "description": "Displays multiple overlapping avatars in a group with overflow handling.",
       "status": "stable",
       "productionReady": true,
       "generative": true,
@@ -361,11 +365,6 @@
           "default": "md",
           "description": "Size for all avatars in the group"
         },
-        "spacing": {
-          "type": "AvatarGroupSpacing",
-          "default": "normal",
-          "description": "Amount of overlap between avatars (higher value = more overlap)"
-        },
         "direction": {
           "type": "AvatarGroupDirection",
           "default": "row",
@@ -388,17 +387,14 @@
       },
       "themeKeys": [
         "baseStyle",
-        "spacingStyles",
-        "tight",
-        "normal",
-        "loose",
+        "spacingStyle",
         "overflowAvatarStyle"
       ],
       "cssVariables": [
         "--color-surface",
         "--color-text-secondary"
       ],
-      "codeExample": "import { AvatarGroup } from \"@flikk/ui\";\n\n<AvatarGroup\n  avatars={[\n    { src: \"...\", name: \"Sarah Chen\" },\n    { src: \"...\", name: \"Michael Park\" },\n    { src: \"...\", name: \"Emma Wilson\" },\n    { src: \"...\", name: \"David Martinez\" },\n  ]}\n  size=\"md\"\n  spacing=\"normal\"\n/>"
+      "codeExample": "import { AvatarGroup } from \"@flikk/ui\";\n\n<AvatarGroup\n  avatars={[\n    { src: \"...\", name: \"Sarah Chen\" },\n    { src: \"...\", name: \"Michael Park\" },\n    { src: \"...\", name: \"Emma Wilson\" },\n    { src: \"...\", name: \"David Martinez\" },\n  ]}\n  size=\"md\"\n/>"
     },
     {
       "name": "Badge",
@@ -479,19 +475,19 @@
         "soft",
         "variantColors",
         "filled",
-        "neutral",
+        "mono",
         "primary",
         "success",
         "warning",
         "danger",
         "outline",
-        "neutral",
+        "mono",
         "primary",
         "success",
         "warning",
         "danger",
         "soft",
-        "neutral",
+        "mono",
         "primary",
         "success",
         "warning",
@@ -512,7 +508,7 @@
         "sm",
         "md",
         "dotColors",
-        "neutral",
+        "mono",
         "primary",
         "success",
         "warning",
@@ -522,8 +518,8 @@
         "hover"
       ],
       "cssVariables": [
-        "--color-neutral-900",
-        "--color-neutral-700",
+        "--color-mono-900",
+        "--color-mono-700",
         "--color-primary",
         "--color-primary-contrast",
         "--color-success-600",
@@ -542,7 +538,7 @@
         "--color-success-400",
         "--color-warning-400",
         "--color-danger-400",
-        "--color-neutral-100",
+        "--color-mono-100",
         "--color-primary-50",
         "--color-primary-700",
         "--color-primary-300",
@@ -551,7 +547,13 @@
         "--color-warning-50",
         "--color-warning-700",
         "--color-danger-50",
-        "--color-danger-700"
+        "--color-danger-700",
+        "--badge-px-sm",
+        "--badge-py-sm",
+        "--badge-px-md",
+        "--badge-py-md",
+        "--badge-pill-px-sm",
+        "--badge-pill-px-md"
       ],
       "codeExample": "import { Badge } from \"@flikk/ui\";\n\n<Badge variant=\"filled\" color=\"primary\">Admin</Badge>"
     },
@@ -621,7 +623,7 @@
           "type": "ButtonColor",
           "description": "The semantic color/intent of the button",
           "options": [
-            "neutral",
+            "mono",
             "primary",
             "danger"
           ]
@@ -662,6 +664,14 @@
           "type": "boolean",
           "description": "Whether the button should be full width"
         },
+        "iconStart": {
+          "type": "React.ReactNode",
+          "description": "Small decorative icon before the label, auto-sized to the button's `size`.  The SERIALIZABLE front door — composing the icon into `children` stays the idiomatic hand-written form (`<Button><SearchIcon className=\"size-4\" />Search</Button>`) and is unchanged. This slot exists because a generative UI spec is JSON: it can name an icon but cannot pass a React element, so `children` alone leaves an LLM unable to put an icon on a button at all. Same \"one contract, two front doors\" shape as Card's `title`/`subtitle` slot-props and the collection `items` APIs (CLAUDE.md §2).  Deliberately NO `contentStart`/`contentEnd` counterpart: those take arbitrary ReactNode, which is not serializable, so they would buy the generative path nothing — compose those into `children`."
+        },
+        "iconEnd": {
+          "type": "React.ReactNode",
+          "description": "Small decorative icon after the label, auto-sized to the button's `size`. See `iconStart`."
+        },
         "enableRipple": {
           "type": "boolean",
           "description": "Whether to enable ripple effect on click"
@@ -697,19 +707,19 @@
         "ghost",
         "variantColors",
         "filled",
-        "neutral",
+        "mono",
         "primary",
         "danger",
         "outline",
-        "neutral",
+        "mono",
         "primary",
         "danger",
         "soft",
-        "neutral",
+        "mono",
         "primary",
         "danger",
         "ghost",
-        "neutral",
+        "mono",
         "primary",
         "danger",
         "sizes",
@@ -722,6 +732,10 @@
         "lg",
         "default",
         "iconOnly",
+        "iconSizes",
+        "sm",
+        "md",
+        "lg",
         "states",
         "disabled",
         "loading",
@@ -729,10 +743,9 @@
       ],
       "cssVariables": [
         "--button-radius",
-        "--color-neutral-900",
-        "--color-border",
-        "--color-neutral-800",
-        "--color-neutral-200",
+        "--color-mono",
+        "--color-mono-contrast",
+        "--color-mono-800",
         "--color-primary",
         "--color-primary-contrast",
         "--color-primary-600",
@@ -741,7 +754,7 @@
         "--color-danger-600",
         "--color-text-primary",
         "--color-border-secondary",
-        "--color-neutral-100",
+        "--color-mono-100",
         "--color-text-secondary",
         "--color-background-secondary",
         "--color-primary-100",
@@ -750,6 +763,8 @@
         "--color-danger-300",
         "--color-danger-400",
         "--color-danger-900",
+        "--color-mono-200",
+        "--color-mono-900",
         "--color-primary-50",
         "--color-primary-300",
         "--color-primary-900",
@@ -758,16 +773,22 @@
         "--button-min-h-sm",
         "--button-px-sm",
         "--button-py-sm",
+        "--button-text-size-sm",
+        "--button-line-height-sm",
         "--button-icon-size-sm",
         "--button-icon-p-sm",
         "--button-min-h-md",
         "--button-px-md",
         "--button-py-md",
+        "--button-text-size-md",
+        "--button-line-height-md",
         "--button-icon-size-md",
         "--button-icon-p-md",
         "--button-min-h-lg",
         "--button-px-lg",
         "--button-py-lg",
+        "--button-text-size-lg",
+        "--button-line-height-lg",
         "--button-icon-size-lg",
         "--button-icon-p-lg"
       ],
@@ -781,7 +802,7 @@
       "description": "Groups related buttons together with consistent styling, shared borders, and connected corners.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "orientation": {
           "type": "ButtonGroupOrientation",
@@ -812,7 +833,7 @@
         "--color-border",
         "--color-text-primary"
       ],
-      "codeExample": "import { ButtonGroup, Button } from \"@flikk/ui\";\nimport { DocumentDuplicateIcon } from \"@heroicons/react/24/outline\";\n\n<ButtonGroup>\n  <Button variant=\"outline\" color=\"neutral\" showReflection={false}>\n    <DocumentDuplicateIcon className=\"size-4\" />\n    Copy\n  </Button>\n  <Button variant=\"outline\" color=\"neutral\" showReflection={false}>\n    Cut\n  </Button>\n  <Button variant=\"outline\" color=\"neutral\" showReflection={false}>\n    Paste\n  </Button>\n</ButtonGroup>"
+      "codeExample": "import { ButtonGroup, Button } from \"@flikk/ui\";\n\n<ButtonGroup>\n  <Button variant=\"outline\" color=\"mono\" showReflection={false}>\n    <DocumentDuplicateIcon className=\"size-4\" />\n    Copy\n  </Button>\n  <Button variant=\"outline\" color=\"mono\" showReflection={false}>\n    Cut\n  </Button>\n  <Button variant=\"outline\" color=\"mono\" showReflection={false}>\n    Paste\n  </Button>\n</ButtonGroup>"
     },
     {
       "name": "Calendar",
@@ -822,7 +843,7 @@
       "description": "Month-grid date picker with single and range selection, dropdown navigation, and date-restriction support. Powers the DatePicker.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "mode": {
           "type": "CalendarMode",
@@ -917,7 +938,6 @@
         "headerStyle",
         "titleStyle",
         "headerDropdownsStyle",
-        "navButtonStyle",
         "weekdaysStyle",
         "weekdayStyle",
         "daysGridStyle",
@@ -930,19 +950,16 @@
       ],
       "cssVariables": [
         "--color-text-primary",
-        "--radius-base",
         "--color-text-muted",
-        "--color-primary-50",
+        "--color-primary-300",
+        "--color-primary-500",
         "--color-primary",
-        "--color-neutral-500",
-        "--color-neutral-200",
-        "--color-neutral-800",
-        "--color-neutral-900",
-        "--color-primary-900",
+        "--color-primary-50",
         "--color-primary-contrast",
         "--color-primary-600",
         "--color-primary-400",
-        "--color-neutral-600"
+        "--color-mono-200",
+        "--color-mono-900"
       ],
       "codeExample": "import { Calendar } from \"@flikk/ui\";\n\n<Calendar showToday onChange={(date) => console.log(date)} />"
     },
@@ -999,10 +1016,13 @@
       "cssVariables": [
         "--card-radius",
         "--color-border",
+        "--card-px",
+        "--card-py",
+        "--card-title-size",
         "--color-text-primary",
         "--color-text-secondary"
       ],
-      "codeExample": "import { Card, Input, Select, Button } from \"@flikk/ui\";\n\n<Card\n  title=\"Create project\"\n  subtitle=\"Deploy your new project in one-click.\"\n  footer={\n    <>\n      <Button variant=\"outline\" color=\"neutral\" className=\"flex-1\">Cancel</Button>\n      <Button variant=\"filled\" className=\"flex-1\">Deploy</Button>\n    </>\n  }\n  className=\"w-full max-w-[380px]\"\n>\n  <div className=\"grid w-full items-center gap-4\">\n    <Input label=\"Name\" placeholder=\"Name of your project\" />\n    <Select\n      label=\"Framework\"\n      placeholder=\"Select framework\"\n      options={[\n        { id: \"next\", value: \"next\", label: \"Next.js\" },\n        { id: \"nuxt\", value: \"nuxt\", label: \"Nuxt.js\" },\n        { id: \"remix\", value: \"remix\", label: \"Remix\" },\n      ]}\n    />\n  </div>\n</Card>"
+      "codeExample": "import { Card, Input, Select, Button } from \"@flikk/ui\";\n\n<Card\n  title=\"Create project\"\n  subtitle=\"Deploy your new project in one-click.\"\n  footer={\n    <>\n      <Button variant=\"outline\" color=\"mono\" className=\"flex-1\">Cancel</Button>\n      <Button variant=\"filled\" className=\"flex-1\">Deploy</Button>\n    </>\n  }\n  className=\"w-full max-w-[380px]\"\n>\n  <div className=\"grid w-full items-center gap-4\">\n    <Input label=\"Name\" placeholder=\"Name of your project\" />\n    <Select\n      label=\"Framework\"\n      placeholder=\"Select framework\"\n      options={[\n        { id: \"next\", value: \"next\", label: \"Next.js\" },\n        { id: \"nuxt\", value: \"nuxt\", label: \"Nuxt.js\" },\n        { id: \"remix\", value: \"remix\", label: \"Remix\" },\n      ]}\n    />\n  </div>\n</Card>"
     },
     {
       "name": "CardStack",
@@ -1197,7 +1217,7 @@
       "description": "A command-K style command palette for quick navigation and actions. Supports keyboard navigation, search filtering, grouping, and keyboard shortcuts.",
       "status": "beta",
       "productionReady": false,
-      "generative": false,
+      "generative": true,
       "statusWarning": "⚠️ BETA: This component is not production-ready. API may change without notice.",
       "props": {
         "isOpen": {
@@ -1266,6 +1286,10 @@
         "lift": {
           "type": "boolean",
           "description": "`false` opts out of the relative lift — paints at the palette's base rung."
+        },
+        "onCommandSelect": {
+          "type": "(id: string) => void",
+          "description": "Fired with the selected command's id, in addition to that command's own onSelect."
         }
       },
       "themeKeys": [
@@ -1283,7 +1307,6 @@
         "--color-background",
         "--color-text-primary",
         "--color-text-placeholder",
-        "--color-neutral-500",
         "--color-text-muted"
       ],
       "codeExample": "import { CommandPalette } from \"@flikk/ui\";\n\nconst [isOpen, setIsOpen] = useState(false);\n\n<CommandPalette\n  isOpen={isOpen}\n  onClose={() => setIsOpen(false)}\n  commands={commands}\n  grouped\n/>"
@@ -1337,7 +1360,7 @@
       "description": "A small inline dot for separating text and metadata, like a middot between items. Decorative (aria-hidden) and flows with surrounding text.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "size": {
           "type": "DotSeparatorSize",
@@ -1477,10 +1500,13 @@
       "cssVariables": [
         "--color-border",
         "--drawer-radius",
+        "--drawer-px",
+        "--drawer-py",
         "--color-text-primary",
+        "--drawer-title-size",
         "--color-text-secondary"
       ],
-      "codeExample": "import { Drawer, Button, Input, Textarea } from \"@flikk/ui\";\nimport { UserIcon } from \"@heroicons/react/24/outline\";\nimport { useState } from \"react\";\n\nfunction EditProfileDrawer() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Edit Profile</Button>\n      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>\n        <Drawer.Header icon={<UserIcon className=\"size-5\" />}>\n          <Drawer.Title>Edit Profile</Drawer.Title>\n          <Drawer.Subtitle>Update your personal information</Drawer.Subtitle>\n        </Drawer.Header>\n        <Drawer.Body>\n          <div className=\"space-y-4\">\n            <Input label=\"Full Name\" defaultValue=\"John Doe\" />\n            <Input label=\"Email\" type=\"email\" defaultValue=\"john.doe@example.com\" />\n            <Textarea label=\"Bio\" rows={4} defaultValue=\"Product designer and frontend developer.\" />\n          </div>\n        </Drawer.Body>\n        <Drawer.Footer>\n          <Button variant=\"outline\" color=\"neutral\" onClick={() => setIsOpen(false)}>Cancel</Button>\n          <Button onClick={() => setIsOpen(false)}>Save Changes</Button>\n        </Drawer.Footer>\n      </Drawer>\n    </>\n  );\n}"
+      "codeExample": "import { Drawer, Button, Input, Textarea } from \"@flikk/ui\";\n\nimport { useState } from \"react\";\n\nfunction EditProfileDrawer() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Edit Profile</Button>\n      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>\n        <Drawer.Header icon={<UserIcon className=\"size-5\" />}>\n          <Drawer.Title>Edit Profile</Drawer.Title>\n          <Drawer.Subtitle>Update your personal information</Drawer.Subtitle>\n        </Drawer.Header>\n        <Drawer.Body>\n          <div className=\"space-y-4\">\n            <Input label=\"Full Name\" defaultValue=\"John Doe\" />\n            <Input label=\"Email\" type=\"email\" defaultValue=\"john.doe@example.com\" />\n            <Textarea label=\"Bio\" rows={4} defaultValue=\"Product designer and frontend developer.\" />\n          </div>\n        </Drawer.Body>\n        <Drawer.Footer>\n          <Button variant=\"outline\" color=\"mono\" onClick={() => setIsOpen(false)}>Cancel</Button>\n          <Button onClick={() => setIsOpen(false)}>Save Changes</Button>\n        </Drawer.Footer>\n      </Drawer>\n    </>\n  );\n}"
     },
     {
       "name": "Dropdown",
@@ -1555,7 +1581,7 @@
         "--color-border",
         "--color-text-secondary"
       ],
-      "codeExample": "import { Dropdown, Button } from \"@flikk/ui\";\nimport { ChevronDownIcon } from \"@heroicons/react/24/outline\";\n\n<Dropdown>\n  <Dropdown.Trigger>\n    <Button variant=\"outline\" color=\"neutral\">\n      Actions <ChevronDownIcon className=\"size-4\" />\n    </Button>\n  </Dropdown.Trigger>\n  <Dropdown.Menu aria-label=\"Document actions\">\n    <Dropdown.Item itemKey=\"edit\">Edit</Dropdown.Item>\n    <Dropdown.Item itemKey=\"duplicate\">Duplicate</Dropdown.Item>\n    <Dropdown.Item itemKey=\"archive\">Archive</Dropdown.Item>\n    <Dropdown.Item itemKey=\"delete\" isDanger>Delete</Dropdown.Item>\n  </Dropdown.Menu>\n</Dropdown>"
+      "codeExample": "import { Dropdown, Button } from \"@flikk/ui\";\n\n<Dropdown>\n  <Dropdown.Trigger>\n    <Button variant=\"outline\" color=\"mono\">\n      Actions <ChevronDownIcon className=\"size-4\" />\n    </Button>\n  </Dropdown.Trigger>\n  <Dropdown.Menu aria-label=\"Document actions\">\n    <Dropdown.Item itemKey=\"edit\">Edit</Dropdown.Item>\n    <Dropdown.Item itemKey=\"duplicate\">Duplicate</Dropdown.Item>\n    <Dropdown.Item itemKey=\"archive\">Archive</Dropdown.Item>\n    <Dropdown.Item itemKey=\"delete\" isDanger>Delete</Dropdown.Item>\n  </Dropdown.Menu>\n</Dropdown>"
     },
     {
       "name": "Empty",
@@ -1601,7 +1627,7 @@
         "--color-text-primary",
         "--color-text-muted"
       ],
-      "codeExample": "import { Empty, Button } from \"@flikk/ui\";\nimport { FolderPlusIcon } from \"@heroicons/react/24/outline\";\n\n<Empty\n  icon={<FolderPlusIcon className=\"w-full h-full\" />}\n  title=\"No projects yet\"\n  subtitle=\"Get started by creating your first project.\"\n  action={<Button>New project</Button>}\n/>"
+      "codeExample": "import { Empty, Button } from \"@flikk/ui\";\n\n<Empty\n  icon={<FolderPlusIcon className=\"w-full h-full\" />}\n  title=\"No projects yet\"\n  subtitle=\"Get started by creating your first project.\"\n  action={<Button>New project</Button>}\n/>"
     },
     {
       "name": "HeroCard",
@@ -1611,7 +1637,7 @@
       "description": "A gradient hero shell with an ambient blurred backdrop image — drop any content inside. The gradient follows the app theme by default; override it (and the backdrop) via",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "image": {
           "type": "string | null",
@@ -1670,7 +1696,7 @@
         "--color-primary-500",
         "--color-primary"
       ],
-      "codeExample": "import { HeroCard, Button } from \"@flikk/ui\";\n\n<HeroCard className=\"from-indigo-600 via-purple-700 to-fuchsia-800\">\n  <h2 className=\"text-3xl font-semibold\">Good morning, Maya</h2>\n  <p className=\"mt-2 max-w-md text-white/70\">\n    You have 3 reviews waiting and a design critique at 2:00 PM.\n  </p>\n  <Button color=\"neutral\" className=\"mt-6\">View agenda</Button>\n</HeroCard>"
+      "codeExample": "import { HeroCard, Button } from \"@flikk/ui\";\n\n<HeroCard className=\"from-indigo-600 via-purple-700 to-fuchsia-800\">\n  <h2 className=\"text-3xl font-semibold\">Good morning, Maya</h2>\n  <p className=\"mt-2 max-w-md text-white/70\">\n    You have 3 reviews waiting and a design critique at 2:00 PM.\n  </p>\n  <Button color=\"mono\" className=\"mt-6\">View agenda</Button>\n</HeroCard>"
     },
     {
       "name": "Icon",
@@ -1680,7 +1706,7 @@
       "description": "A unified brand icon component for payment networks, social platforms, and file types. The icon set is auto-detected from the",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "icon": {
           "type": "IconName",
@@ -1763,7 +1789,7 @@
       "description": "Displays keyboard keys and shortcuts inline within text or instructions.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "keys": {
           "type": "KbdKey[]",
@@ -1787,6 +1813,8 @@
         "--color-surface-raised",
         "--color-border",
         "--color-text-secondary",
+        "--kbd-px-sm",
+        "--kbd-px-md",
         "--color-text-muted"
       ],
       "codeExample": "import { Kbd } from \"@flikk/ui\";\n\n<Kbd keys={[\"command\", \"enter\"]} />"
@@ -1799,7 +1827,7 @@
       "description": "A text-styled link with an animated underline. Polymorphic by behavior: pass",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "size": {
           "type": "LinkSize",
@@ -1848,7 +1876,7 @@
       "description": "A responsive masonry layout that packs variable-height items into balanced columns for optimal space utilization.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "columns": {
           "type": "number | Record<number, number>",
@@ -1904,7 +1932,7 @@
       "description": "Shared base item used by Dropdown and ContextMenu. Handles visual layout, keyboard activation (Enter/Space), and focus tracking. Compose",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "startContent": {
           "type": "ReactNode",
@@ -1963,7 +1991,7 @@
         "--color-primary-400",
         "--color-text-secondary"
       ],
-      "codeExample": "import { MenuItem } from \"@flikk/ui\";\nimport { CogIcon, TrashIcon } from \"@heroicons/react/24/outline\";\n\n<MenuItem startContent={<CogIcon className=\"size-4\" />} shortcut=\"⌘,\">\n  Settings\n</MenuItem>\n\n<MenuItem startContent={<TrashIcon className=\"size-4\" />} isDanger>\n  Delete\n</MenuItem>"
+      "codeExample": "import { MenuItem } from \"@flikk/ui\";\n\n<MenuItem startContent={<CogIcon className=\"size-4\" />} shortcut=\"⌘,\">\n  Settings\n</MenuItem>\n\n<MenuItem startContent={<TrashIcon className=\"size-4\" />} isDanger>\n  Delete\n</MenuItem>"
     },
     {
       "name": "Message",
@@ -1973,7 +2001,7 @@
       "description": "Chat message bubble with a props-based and a compound API. Supports AI roles (user/assistant/system) and chat variants (sender/receiver/system), delivery status, streaming, attachments, reactions, replies, grouping, and a scrollable Message.List.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "role": {
           "type": "MessageRole",
@@ -2143,14 +2171,15 @@
         "senderNameStyle"
       ],
       "cssVariables": [
-        "--radius-base",
+        "--message-bubble-radius",
         "--color-text-placeholder",
-        "--color-neutral-500",
-        "--color-neutral-900",
-        "--color-neutral-100",
+        "--color-mono-900",
+        "--color-mono-100",
         "--color-text-secondary",
         "--color-background",
         "--color-text-muted",
+        "--radius-base",
+        "--surface-radius-cap-xs",
         "--color-primary",
         "--color-danger",
         "--color-border",
@@ -2225,10 +2254,13 @@
       "cssVariables": [
         "--modal-radius",
         "--color-border",
+        "--modal-px",
+        "--modal-py",
+        "--modal-title-size",
         "--color-text-primary",
         "--color-text-secondary"
       ],
-      "codeExample": "import { useState } from \"react\";\nimport { Modal, Button, Input, Select } from \"@flikk/ui\";\n\nfunction Example() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Account Settings</Button>\n      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size=\"md\">\n        <Modal.Header>\n          <Modal.Title>Account Settings</Modal.Title>\n          <Modal.Subtitle>Manage your account preferences and settings</Modal.Subtitle>\n        </Modal.Header>\n        <Modal.Body>\n          <div className=\"space-y-3\">\n            <Input label=\"Display Name\" placeholder=\"Enter your name...\" />\n            <Input label=\"Email Address\" type=\"email\" placeholder=\"email@example.com\" />\n            <Select\n              label=\"Language\"\n              placeholder=\"Select language...\"\n              options={[\n                { id: \"en\", value: \"en\", label: \"English\" },\n                { id: \"es\", value: \"es\", label: \"Spanish\" },\n                { id: \"fr\", value: \"fr\", label: \"French\" },\n              ]}\n            />\n          </div>\n        </Modal.Body>\n        <Modal.Footer>\n          <Button color=\"neutral\" variant=\"outline\" onClick={() => setIsOpen(false)}>Cancel</Button>\n          <Button onClick={() => setIsOpen(false)}>Save Changes</Button>\n        </Modal.Footer>\n      </Modal>\n    </>\n  );\n}"
+      "codeExample": "import { useState } from \"react\";\nimport { Modal, Button, Input, Select } from \"@flikk/ui\";\n\nfunction Example() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Account Settings</Button>\n      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size=\"md\">\n        <Modal.Header>\n          <Modal.Title>Account Settings</Modal.Title>\n          <Modal.Subtitle>Manage your account preferences and settings</Modal.Subtitle>\n        </Modal.Header>\n        <Modal.Body>\n          <div className=\"space-y-3\">\n            <Input label=\"Display Name\" placeholder=\"Enter your name...\" />\n            <Input label=\"Email Address\" type=\"email\" placeholder=\"email@example.com\" />\n            <Select\n              label=\"Language\"\n              placeholder=\"Select language...\"\n              options={[\n                { id: \"en\", value: \"en\", label: \"English\" },\n                { id: \"es\", value: \"es\", label: \"Spanish\" },\n                { id: \"fr\", value: \"fr\", label: \"French\" },\n              ]}\n            />\n          </div>\n        </Modal.Body>\n        <Modal.Footer>\n          <Button color=\"mono\" variant=\"outline\" onClick={() => setIsOpen(false)}>Cancel</Button>\n          <Button onClick={() => setIsOpen(false)}>Save Changes</Button>\n        </Modal.Footer>\n      </Modal>\n    </>\n  );\n}"
     },
     {
       "name": "ModalStack",
@@ -2266,7 +2298,7 @@
         "--color-text-secondary",
         "--color-text-primary"
       ],
-      "codeExample": "import { useState } from \"react\";\nimport { ModalStack, Modal, Button, Link, Input, Select } from \"@flikk/ui\";\n\nfunction Example() {\n  const [isMainOpen, setMainOpen] = useState(false);\n  const [isDetailOpen, setDetailOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setMainOpen(true)}>Open Settings</Button>\n      <ModalStack isOpen={isMainOpen} onClose={() => setMainOpen(false)}>\n        <ModalStack.Modal size=\"lg\">\n          <Modal.Header>\n            <Modal.Title>Settings</Modal.Title>\n            <Modal.Subtitle>Manage your account preferences</Modal.Subtitle>\n          </Modal.Header>\n          <Modal.Body>\n            <div className=\"space-y-4\">\n              <Input label=\"Display Name\" placeholder=\"John Doe\" />\n              <Input label=\"Email Address\" type=\"email\" placeholder=\"john@example.com\" />\n              <Link onClick={() => setDetailOpen(true)}>Edit Preferences</Link>\n            </div>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button color=\"neutral\" variant=\"outline\" onClick={() => setMainOpen(false)}>Cancel</Button>\n            <Button onClick={() => setMainOpen(false)}>Save Changes</Button>\n          </Modal.Footer>\n        </ModalStack.Modal>\n\n        <ModalStack.Modal\n          isOpen={isDetailOpen}\n          onClose={() => setDetailOpen(false)}\n          showBackButton\n          size=\"md\"\n        >\n          <Modal.Header>\n            <Modal.Title>Notification Preferences</Modal.Title>\n            <Modal.Subtitle>Choose how you want to be notified</Modal.Subtitle>\n          </Modal.Header>\n          <Modal.Body>Notification settings here</Modal.Body>\n          <Modal.Footer>\n            <Button color=\"neutral\" variant=\"outline\" onClick={() => setDetailOpen(false)}>Cancel</Button>\n            <Button onClick={() => setDetailOpen(false)}>Save Preferences</Button>\n          </Modal.Footer>\n        </ModalStack.Modal>\n      </ModalStack>\n    </>\n  );\n}"
+      "codeExample": "import { useState } from \"react\";\nimport { ModalStack, Modal, Button, Link, Input, Select } from \"@flikk/ui\";\n\nfunction Example() {\n  const [isMainOpen, setMainOpen] = useState(false);\n  const [isDetailOpen, setDetailOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setMainOpen(true)}>Open Settings</Button>\n      <ModalStack isOpen={isMainOpen} onClose={() => setMainOpen(false)}>\n        <ModalStack.Modal size=\"lg\">\n          <Modal.Header>\n            <Modal.Title>Settings</Modal.Title>\n            <Modal.Subtitle>Manage your account preferences</Modal.Subtitle>\n          </Modal.Header>\n          <Modal.Body>\n            <div className=\"space-y-4\">\n              <Input label=\"Display Name\" placeholder=\"John Doe\" />\n              <Input label=\"Email Address\" type=\"email\" placeholder=\"john@example.com\" />\n              <Link onClick={() => setDetailOpen(true)}>Edit Preferences</Link>\n            </div>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button color=\"mono\" variant=\"outline\" onClick={() => setMainOpen(false)}>Cancel</Button>\n            <Button onClick={() => setMainOpen(false)}>Save Changes</Button>\n          </Modal.Footer>\n        </ModalStack.Modal>\n\n        <ModalStack.Modal\n          isOpen={isDetailOpen}\n          onClose={() => setDetailOpen(false)}\n          showBackButton\n          size=\"md\"\n        >\n          <Modal.Header>\n            <Modal.Title>Notification Preferences</Modal.Title>\n            <Modal.Subtitle>Choose how you want to be notified</Modal.Subtitle>\n          </Modal.Header>\n          <Modal.Body>Notification settings here</Modal.Body>\n          <Modal.Footer>\n            <Button color=\"mono\" variant=\"outline\" onClick={() => setDetailOpen(false)}>Cancel</Button>\n            <Button onClick={() => setDetailOpen(false)}>Save Preferences</Button>\n          </Modal.Footer>\n        </ModalStack.Modal>\n      </ModalStack>\n    </>\n  );\n}"
     },
     {
       "name": "NavItem",
@@ -2384,12 +2416,12 @@
         "--color-background",
         "--color-primary-400"
       ],
-      "codeExample": "import { NavItem } from \"@flikk/ui\";\nimport { HomeIcon } from \"@heroicons/react/20/solid\";\n\n<NavItem startContent={<HomeIcon className=\"size-4\" />} active>\n  Dashboard\n</NavItem>"
+      "codeExample": "import { NavItem } from \"@flikk/ui\";\n\n<NavItem startContent={<HomeIcon className=\"size-4\" />} active>\n  Dashboard\n</NavItem>"
     },
     {
       "name": "OfflineIndicator",
       "category": "core",
-      "pattern": "simple",
+      "pattern": "enhanced",
       "importPath": "@flikk/ui/core",
       "description": "A page-level network status indicator. It mounts a fixed overlay that appears automatically when the browser goes offline (and briefly confirms reconnection). Visibility is driven by",
       "status": "stable",
@@ -2431,6 +2463,10 @@
         "onlineMessage": {
           "type": "string",
           "description": "Custom online message (shown briefly when reconnecting)"
+        },
+        "action": {
+          "type": "OfflineIndicatorAction | ReactNode",
+          "description": "Action shown next to the message while offline — pass `{                }` for a link-styled button (mirrors Toast's `action`), or any ReactNode."
         }
       },
       "themeKeys": [
@@ -2438,19 +2474,23 @@
         "positions",
         "top",
         "bottom",
+        "bannerPositions",
+        "top",
+        "bottom",
         "variants",
         "banner",
         "toast",
         "offline",
         "online",
+        "action",
         "icon",
         "message",
         "queueCount"
       ],
       "cssVariables": [
-        "--radius-base",
-        "--color-neutral-900",
-        "--color-neutral-100",
+        "--toast-radius",
+        "--color-mono",
+        "--color-mono-contrast",
         "--color-success",
         "--color-success-contrast"
       ],
@@ -2501,12 +2541,13 @@
         "separatorStyle"
       ],
       "cssVariables": [
+        "--page-heading-title-size",
         "--color-text-primary",
         "--color-text-secondary",
         "--color-text-muted",
         "--color-border"
       ],
-      "codeExample": "import { PageHeading, Button } from \"@flikk/ui\";\nimport { PlusIcon, ArrowDownTrayIcon } from \"@heroicons/react/24/outline\";\n\n<PageHeading>\n  <div className=\"flex flex-col items-start sm:flex-row sm:items-center gap-4\">\n    <div className=\"min-w-0 flex-1\">\n      <PageHeading.Title>Team Members</PageHeading.Title>\n      <PageHeading.Subtitle>\n        Manage your team and their account permissions\n      </PageHeading.Subtitle>\n    </div>\n    <PageHeading.Actions>\n      <Button variant=\"outline\" color=\"neutral\">\n        <ArrowDownTrayIcon className=\"size-4\" />\n        Download\n      </Button>\n      <Button>\n        <PlusIcon className=\"size-4\" />\n        Add Member\n      </Button>\n    </PageHeading.Actions>\n  </div>\n</PageHeading>"
+      "codeExample": "import { PageHeading, Button } from \"@flikk/ui\";\n\n<PageHeading>\n  <div className=\"flex flex-col items-start sm:flex-row sm:items-center gap-4\">\n    <div className=\"min-w-0 flex-1\">\n      <PageHeading.Title>Team Members</PageHeading.Title>\n      <PageHeading.Subtitle>\n        Manage your team and their account permissions\n      </PageHeading.Subtitle>\n    </div>\n    <PageHeading.Actions>\n      <Button variant=\"outline\" color=\"mono\">\n        <ArrowDownTrayIcon className=\"size-4\" />\n        Download\n      </Button>\n      <Button>\n        <PlusIcon className=\"size-4\" />\n        Add Member\n      </Button>\n    </PageHeading.Actions>\n  </div>\n</PageHeading>"
     },
     {
       "name": "Pagination",
@@ -2516,7 +2557,7 @@
       "description": "Pagination component with previous/next buttons, page numbers, and ellipsis for large page counts.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "currentPage": {
           "type": "number",
@@ -2568,15 +2609,14 @@
       "cssVariables": [
         "--form-radius",
         "--color-primary",
-        "--color-neutral-900",
+        "--color-mono-900",
         "--color-text-muted",
         "--color-text-secondary",
         "--color-text-primary",
         "--color-background-secondary",
         "--color-border",
         "--color-surface-hover",
-        "--color-neutral-800",
-        "--color-neutral-500"
+        "--color-mono-800"
       ],
       "codeExample": "import { useState } from \"react\";\nimport { Pagination } from \"@flikk/ui\";\n\nconst [currentPage, setCurrentPage] = useState(1);\n\n<Pagination\n  totalPages={10}\n  currentPage={currentPage}\n  onPageChange={setCurrentPage}\n  size=\"md\"\n  showPrevNext\n/>"
     },
@@ -2636,7 +2676,13 @@
         "--color-border",
         "--color-primary",
         "--color-surface-hover",
-        "--color-border-hover"
+        "--color-border-hover",
+        "--pill-px-sm",
+        "--pill-py-sm",
+        "--pill-px-md",
+        "--pill-py-md",
+        "--pill-px-lg",
+        "--pill-py-lg"
       ],
       "codeExample": "import { Pill } from \"@flikk/ui\";\n\n<Pill>Design</Pill>"
     },
@@ -2841,7 +2887,7 @@
         "--color-warning-400",
         "--color-success",
         "--color-danger",
-        "--color-neutral-300"
+        "--color-mono-300"
       ],
       "codeExample": "import { Rating } from \"@flikk/ui\";\n\n<Rating defaultValue={3} max={5} size=\"md\" color=\"warning\" />"
     },
@@ -2853,7 +2899,7 @@
       "description": "A scrollable container with styled, overlay-friendly scrollbars. Supports vertical, horizontal, or both directions, scroll snapping, drag-to-scroll, and optional smooth momentum-based scrolling with a programmatic ref API.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "type": {
           "type": "ScrollAreaType",
@@ -2973,6 +3019,7 @@
       ],
       "cssVariables": [
         "--segmented-radius",
+        "--color-surface-sunken",
         "--color-border",
         "--segmented-padding",
         "--segmented-min-h-sm",
@@ -2981,8 +3028,14 @@
         "--segmented-inner-radius",
         "--color-surface",
         "--color-primary-500",
+        "--segmented-text-size-sm",
+        "--segmented-line-height-sm",
         "--segmented-px-sm",
+        "--segmented-text-size-md",
+        "--segmented-line-height-md",
         "--segmented-px-md",
+        "--segmented-text-size-lg",
+        "--segmented-line-height-lg",
         "--segmented-px-lg",
         "--color-text-primary",
         "--color-text-secondary"
@@ -3116,7 +3169,7 @@
         "--color-border",
         "--color-background-secondary"
       ],
-      "codeExample": "import { Sidebar, NavItem, Dropdown } from \"@flikk/ui\";\nimport { HomeIcon, InboxIcon, UsersIcon, ChartBarIcon, FolderIcon, CogIcon, BellIcon, UserCircleIcon, CreditCardIcon, Cog6ToothIcon, ArrowRightStartOnRectangleIcon } from \"@heroicons/react/20/solid\";\n\n<Sidebar defaultCollapsed={false}>\n  <Sidebar.Header\n    logo={\n      <Sidebar.Logo\n        icon={\n          <div className=\"size-8 bg-[var(--color-primary)] rounded-lg flex items-center justify-center\">\n            <span className=\"text-[var(--color-primary-contrast)] font-bold text-sm\">F</span>\n          </div>\n        }\n        text=\"FlikkUI\"\n      />\n    }\n  />\n\n  <Sidebar.Content>\n    <Sidebar.Nav>\n      <Sidebar.NavGroup title=\"Main\">\n        <NavItem startContent={<HomeIcon />} active>Dashboard</NavItem>\n        <NavItem startContent={<InboxIcon />} notification={5}>Inbox</NavItem>\n        <NavItem\n          startContent={<UsersIcon />}\n          items={[\n            { children: \"All Users\", href: \"/users\" },\n            { children: \"Pending Invites\", notification: 3 },\n            { children: \"Roles & Permissions\" },\n          ]}\n        >\n          Users\n        </NavItem>\n        <NavItem startContent={<ChartBarIcon />}>Analytics</NavItem>\n        <NavItem startContent={<FolderIcon />} notification>Documents</NavItem>\n      </Sidebar.NavGroup>\n\n      <Sidebar.NavGroup title=\"Settings\">\n        <NavItem startContent={<CogIcon />}>Preferences</NavItem>\n        <NavItem startContent={<BellIcon />}>Notifications</NavItem>\n      </Sidebar.NavGroup>\n    </Sidebar.Nav>\n  </Sidebar.Content>\n\n  <Sidebar.Footer>\n    <Sidebar.UserProfile\n      name=\"Sarah Wilson\"\n      email=\"sarah@company.com\"\n      avatar=\"https://i.pravatar.cc/150?u=sarah-wilson\"\n      status=\"online\"\n      dropdownContent={\n        <>\n          <Dropdown.Item itemKey=\"profile\" startContent={<UserCircleIcon className=\"size-4\" />}>View profile</Dropdown.Item>\n          <Dropdown.Item itemKey=\"billing\" startContent={<CreditCardIcon className=\"size-4\" />}>Billing</Dropdown.Item>\n          <Dropdown.Item itemKey=\"settings\" startContent={<Cog6ToothIcon className=\"size-4\" />}>Settings</Dropdown.Item>\n          <Dropdown.Separator />\n          <Dropdown.Item itemKey=\"logout\" isDanger startContent={<ArrowRightStartOnRectangleIcon className=\"size-4\" />}>Log out</Dropdown.Item>\n        </>\n      }\n    />\n  </Sidebar.Footer>\n</Sidebar>"
+      "codeExample": "import { Sidebar, NavItem, Dropdown } from \"@flikk/ui\";\n\n<Sidebar defaultCollapsed={false}>\n  <Sidebar.Header\n    logo={\n      <Sidebar.Logo\n        icon={\n          <div className=\"size-8 bg-[var(--color-primary)] rounded-lg flex items-center justify-center\">\n            <span className=\"text-[var(--color-primary-contrast)] font-bold text-sm\">F</span>\n          </div>\n        }\n        text=\"FlikkUI\"\n      />\n    }\n  />\n\n  <Sidebar.Content>\n    <Sidebar.Nav>\n      <Sidebar.NavGroup title=\"Main\">\n        <NavItem startContent={<HomeIcon />} active>Dashboard</NavItem>\n        <NavItem startContent={<InboxIcon />} notification={5}>Inbox</NavItem>\n        <NavItem\n          startContent={<UsersIcon />}\n          items={[\n            { children: \"All Users\", href: \"/users\" },\n            { children: \"Pending Invites\", notification: 3 },\n            { children: \"Roles & Permissions\" },\n          ]}\n        >\n          Users\n        </NavItem>\n        <NavItem startContent={<ChartBarIcon />}>Analytics</NavItem>\n        <NavItem startContent={<FolderIcon />} notification>Documents</NavItem>\n      </Sidebar.NavGroup>\n\n      <Sidebar.NavGroup title=\"Settings\">\n        <NavItem startContent={<CogIcon />}>Preferences</NavItem>\n        <NavItem startContent={<BellIcon />}>Notifications</NavItem>\n      </Sidebar.NavGroup>\n    </Sidebar.Nav>\n  </Sidebar.Content>\n\n  <Sidebar.Footer>\n    <Sidebar.UserProfile\n      name=\"Sarah Wilson\"\n      email=\"sarah@company.com\"\n      avatar=\"https://i.pravatar.cc/150?u=sarah-wilson\"\n      status=\"online\"\n      dropdownContent={\n        <>\n          <Dropdown.Item itemKey=\"profile\" startContent={<UserCircleIcon className=\"size-4\" />}>View profile</Dropdown.Item>\n          <Dropdown.Item itemKey=\"billing\" startContent={<CreditCardIcon className=\"size-4\" />}>Billing</Dropdown.Item>\n          <Dropdown.Item itemKey=\"settings\" startContent={<Cog6ToothIcon className=\"size-4\" />}>Settings</Dropdown.Item>\n          <Dropdown.Separator />\n          <Dropdown.Item itemKey=\"logout\" isDanger startContent={<ArrowRightStartOnRectangleIcon className=\"size-4\" />}>Log out</Dropdown.Item>\n        </>\n      }\n    />\n  </Sidebar.Footer>\n</Sidebar>"
     },
     {
       "name": "Skeleton",
@@ -3126,7 +3179,7 @@
       "description": "A loading placeholder that mimics content shape, with text, circular, and rectangle variants and an optional pulse animation.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "variant": {
           "type": "SkeletonVariant",
@@ -3272,7 +3325,7 @@
       "description": "A loading spinner for indicating processing states, with multiple sizes and semantic color options.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "size": {
           "type": "SpinnerSize",
@@ -3437,6 +3490,11 @@
         "--color-surface-raised",
         "--color-border",
         "--color-text-primary",
+        "--tag-px-sm",
+        "--tag-py-sm",
+        "--tag-px-md",
+        "--tag-pl-md",
+        "--tag-py-md",
         "--color-surface-hover",
         "--color-text-muted",
         "--color-primary"
@@ -3619,6 +3677,23 @@
         "lift": {
           "type": "boolean",
           "description": "`false` opts out of the relative lift — paints at the tooltip's base rung."
+        },
+        "isOpen": {
+          "type": "boolean",
+          "description": "Controlled visibility — when provided, visibility is driven entirely by this prop instead of internal hover/focus state (delay is bypassed). Use for triggers whose \"show tooltip\" moment isn't a plain hover, e.g. a value bubble shown only while dragging a Slider thumb."
+        },
+        "defaultIsOpen": {
+          "type": "boolean",
+          "default": "false",
+          "description": "Initial visibility for uncontrolled usage."
+        },
+        "onOpenChange": {
+          "type": "(isOpen: boolean) => void",
+          "description": "Called when internal hover/focus logic changes visibility (uncontrolled mode). In controlled mode visibility is owned by `isOpen` and the internal triggers are bypassed entirely, so this never fires — update your own state instead."
+        },
+        "recalcTrigger": {
+          "type": "unknown",
+          "description": "Opt-in escape hatch for triggers that move on their own (e.g. a dragged slider thumb) without a scroll/resize/content-resize event to key off of. Position recalculates whenever this value changes."
         }
       },
       "themeKeys": [
@@ -3640,7 +3715,7 @@
       "description": "A data-driven tree for hierarchical data: expand/collapse, single selection, and checkbox multi-selection with parent-child (indeterminate) propagation. Arrow keys navigate; ArrowRight expands, ArrowLeft collapses or moves to the parent.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "data": {
           "type": "TreeNode[]",
@@ -3795,7 +3870,7 @@
         "--color-primary",
         "--color-primary-700"
       ],
-      "codeExample": "import { Feed, Avatar } from \"@flikk/ui\";\nimport { CheckCircleIcon, ChatBubbleLeftIcon } from \"@heroicons/react/20/solid\";\n\n<Feed\n  className=\"max-w-lg\"\n  items={[\n    {\n      icon: <CheckCircleIcon className=\"size-5 text-[var(--color-success)]\" />,\n      indicatorClassName: \"bg-[var(--color-success-50)]\",\n      timestamp: \"1h ago\",\n      content: <p>Sarah Wilson deployed v2.5.0 to production.</p>,\n    },\n    {\n      icon: <ChatBubbleLeftIcon className=\"size-5 text-[var(--color-primary)]\" />,\n      indicatorClassName: \"bg-[var(--color-primary-50)]\",\n      timestamp: \"2h ago\",\n      content: <p>Tom Cook commented on PR #247.</p>,\n    },\n    {\n      icon: <Avatar src=\"...\" name=\"Eduardo Benz\" className=\"size-8\" />,\n      timestamp: \"5h ago\",\n      content: <p>Eduardo Benz reviewed the pull request.</p>,\n    },\n  ]}\n/>"
+      "codeExample": "import { Feed, Avatar } from \"@flikk/ui\";\n\n<Feed\n  className=\"max-w-lg\"\n  items={[\n    {\n      icon: <CheckCircleIcon className=\"size-5 text-[var(--color-success)]\" />,\n      indicatorClassName: \"bg-[var(--color-success-50)]\",\n      timestamp: \"1h ago\",\n      content: <p>Sarah Wilson deployed v2.5.0 to production.</p>,\n    },\n    {\n      icon: <ChatBubbleLeftIcon className=\"size-5 text-[var(--color-primary)]\" />,\n      indicatorClassName: \"bg-[var(--color-primary-50)]\",\n      timestamp: \"2h ago\",\n      content: <p>Tom Cook commented on PR #247.</p>,\n    },\n    {\n      icon: <Avatar src=\"...\" name=\"Eduardo Benz\" className=\"size-8\" />,\n      timestamp: \"5h ago\",\n      content: <p>Eduardo Benz reviewed the pull request.</p>,\n    },\n  ]}\n/>"
     },
     {
       "name": "GanttChart",
@@ -3805,7 +3880,7 @@
       "description": "Data-driven project timeline / Gantt chart — tasks with start/end dates, progress, dependencies, milestones and grouped swimlanes; drag to move, resize and reschedule.",
       "status": "beta",
       "productionReady": false,
-      "generative": false,
+      "generative": true,
       "statusWarning": "⚠️ BETA: This component is not production-ready. API may change without notice.",
       "props": {
         "data": {
@@ -3963,6 +4038,7 @@
         "splitterStyle"
       ],
       "cssVariables": [
+        "--gantt-chart-radius",
         "--color-border",
         "--color-background",
         "--color-background-secondary",
@@ -4035,7 +4111,10 @@
         }
       },
       "cssVariables": [
+        "--kpi-value-size-sm",
         "--color-text-primary",
+        "--kpi-value-size-md",
+        "--kpi-value-size-lg",
         "--color-success",
         "--color-danger",
         "--color-text-muted",
@@ -4061,7 +4140,6 @@
         },
         "label": {
           "type": "React.ReactNode",
-          "required": true,
           "description": "Label describing the metric"
         },
         "subtitle": {
@@ -4110,12 +4188,15 @@
         "filled",
         "ghost",
         "iconColors",
-        "neutral",
+        "mono",
         "primary",
         "success",
         "warning",
         "danger",
         "contentPaddingSizes",
+        "sm",
+        "md",
+        "lg",
         "iconContainerSizes",
         "labelIconAlignSizes",
         "labelSizes",
@@ -4123,6 +4204,9 @@
         "md",
         "lg",
         "valueSizes",
+        "sm",
+        "md",
+        "lg",
         "subtitleSizes",
         "labelStyle",
         "valueStyle",
@@ -4130,6 +4214,7 @@
         "iconContainerStyle"
       ],
       "cssVariables": [
+        "--metric-radius",
         "--color-border",
         "--color-surface-raised",
         "--color-text-primary",
@@ -4141,6 +4226,12 @@
         "--color-warning-400",
         "--color-danger",
         "--color-danger-400",
+        "--metric-content-p-sm",
+        "--metric-content-p-md",
+        "--metric-content-p-lg",
+        "--metric-value-size-sm",
+        "--metric-value-size-md",
+        "--metric-value-size-lg",
         "--color-text-secondary"
       ],
       "codeExample": "import { Metric } from \"@flikk/ui\";\n\n<Metric\n  value=\"12,547\"\n  label=\"Active Users\"\n  subtitle=\"Total registered users\"\n  trendValue=\"12.5%\"\n  trendDirection=\"up\"\n/>"
@@ -4326,14 +4417,14 @@
       ],
       "cssVariables": [
         "--color-border",
-        "--color-neutral-700",
-        "--color-neutral-50",
-        "--color-neutral-800",
+        "--color-mono-700",
+        "--color-mono-50",
+        "--color-mono-800",
         "--color-text-primary",
         "--color-surface-hover",
         "--color-primary",
-        "--color-neutral-200",
-        "--color-neutral-900",
+        "--color-mono-200",
+        "--color-mono-900",
         "--radius-base",
         "--color-primary-500",
         "--color-surface"
@@ -4400,7 +4491,7 @@
         "--color-text-secondary",
         "--color-text-placeholder"
       ],
-      "codeExample": "import { Timeline } from \"@flikk/ui\";\nimport { ShoppingBagIcon, CreditCardIcon, TruckIcon, CheckCircleIcon } from \"@heroicons/react/24/outline\";\n\n<Timeline\n  items={[\n    {\n      status: \"completed\",\n      icon: <ShoppingBagIcon className=\"w-4 h-4\" />,\n      title: \"Order Placed\",\n      description: \"Your order #12847 has been confirmed.\",\n      timestamp: \"March 15, 2025 at 9:30 AM\",\n    },\n    {\n      status: \"completed\",\n      icon: <CreditCardIcon className=\"w-4 h-4\" />,\n      title: \"Payment Confirmed\",\n      description: \"Payment of $249.99 was charged to Visa ending in 4242.\",\n      timestamp: \"March 15, 2025 at 9:32 AM\",\n    },\n    {\n      status: \"active\",\n      icon: <TruckIcon className=\"w-4 h-4\" />,\n      title: \"In Transit\",\n      description: \"Your package is on its way via Express Shipping.\",\n      timestamp: \"Expected delivery: March 18, 2025\",\n    },\n    {\n      status: \"pending\",\n      icon: <CheckCircleIcon className=\"w-4 h-4\" />,\n      title: \"Delivered\",\n      description: \"Package will be delivered to your doorstep.\",\n    },\n  ]}\n/>"
+      "codeExample": "import { Timeline } from \"@flikk/ui\";\n\n<Timeline\n  items={[\n    {\n      status: \"completed\",\n      icon: <ShoppingBagIcon className=\"w-4 h-4\" />,\n      title: \"Order Placed\",\n      description: \"Your order #12847 has been confirmed.\",\n      timestamp: \"March 15, 2025 at 9:30 AM\",\n    },\n    {\n      status: \"completed\",\n      icon: <CreditCardIcon className=\"w-4 h-4\" />,\n      title: \"Payment Confirmed\",\n      description: \"Payment of $249.99 was charged to Visa ending in 4242.\",\n      timestamp: \"March 15, 2025 at 9:32 AM\",\n    },\n    {\n      status: \"active\",\n      icon: <TruckIcon className=\"w-4 h-4\" />,\n      title: \"In Transit\",\n      description: \"Your package is on its way via Express Shipping.\",\n      timestamp: \"Expected delivery: March 18, 2025\",\n    },\n    {\n      status: \"pending\",\n      icon: <CheckCircleIcon className=\"w-4 h-4\" />,\n      title: \"Delivered\",\n      description: \"Package will be delivered to your doorstep.\",\n    },\n  ]}\n/>"
     },
     {
       "name": "Checkbox",
@@ -4410,7 +4501,7 @@
       "description": "A checkbox for selecting one or more options, with support for an indeterminate state, descriptions, and three sizes. Use standalone (it tracks its own checked state) or compose with Checkbox.Group for centralized, multi-value state.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "id": {
           "type": "string"
@@ -4465,9 +4556,9 @@
         "--color-primary-600",
         "--color-primary-500",
         "--color-background-disabled",
-        "--color-neutral-800",
-        "--color-neutral-600",
-        "--color-neutral-700",
+        "--color-mono-800",
+        "--color-mono-600",
+        "--color-mono-700",
         "--color-text-secondary",
         "--color-danger"
       ],
@@ -4635,7 +4726,7 @@
       "description": "Accessible autocomplete combining a text input with a filtered listbox. Type to search options, click or press Enter to select, and optionally create new options on the fly. Manages its own selection state — pass",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "options": {
           "type": "ComboboxOption<T>[]",
@@ -4986,9 +5077,7 @@
         "--color-primary",
         "--color-surface",
         "--color-text-muted",
-        "--color-neutral-400",
         "--color-text-disabled",
-        "--color-neutral-600",
         "--color-danger",
         "--color-danger-400"
       ],
@@ -5192,10 +5281,8 @@
         "--color-primary-50",
         "--color-primary-950",
         "--color-primary-300",
-        "--color-neutral-400",
         "--color-text-muted",
         "--color-text-disabled",
-        "--color-neutral-600",
         "--color-danger",
         "--color-danger-400"
       ],
@@ -5371,7 +5458,7 @@
       "description": "A versatile input component with support for icons, addons, password toggle, number controls, and various states. Follows the four-slot system with iconStart, iconEnd, contentStart, and contentEnd.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "size": {
           "type": "InputSize",
@@ -5529,12 +5616,11 @@
         "--color-danger",
         "--color-danger-500",
         "--color-text-muted",
-        "--color-neutral-500",
         "--color-text-primary",
-        "--color-neutral-200",
-        "--color-background-secondary",
+        "--color-surface-sunken",
         "--color-surface-hover",
-        "--color-neutral-700",
+        "--checkbox-radius",
+        "--color-mono-700",
         "--color-danger-400",
         "--color-warning",
         "--color-warning-400",
@@ -5643,7 +5729,7 @@
       "description": "A numeric counter component with animated sliding number display. Features increment/decrement buttons, min/max constraints, keyboard navigation, and custom step sizes including decimals.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "value": {
           "type": "number",
@@ -5805,7 +5891,7 @@
       "description": "A masked date input with automatic slash insertion. Type numbers continuously (e.g.,",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "value": {
           "type": "string",
@@ -5842,13 +5928,18 @@
       "description": "A one-time password input for authentication and verification flows. Supports customizable length, auto-focus, paste handling, and keyboard navigation between fields. Manages its own value internally — pass",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "length": {
           "type": "number",
           "default": "6",
           "description": "Number of OTP input fields"
         },
+        "size": {
+          "type": "InputOTPSize",
+          "default": "lg",
+          "description": "Size of the OTP slots."
+        },
         "value": {
           "type": "string",
           "description": "Current OTP value (controlled)"
@@ -5865,6 +5956,11 @@
           "type": "(value: string) => void",
           "description": "Callback when OTP is complete (all fields filled)"
         },
+        "charset": {
+          "type": "InputOTPCharset",
+          "default": "alphanumeric",
+          "description": "Which characters the code accepts. Drives the sanitizer (typed and pasted characters outside the set are stripped), the native `pattern` attribute, and the mobile keyboard via `inputMode` (`'numeric'` → numeric keypad, `'alphanumeric'` → standard text keyboard)."
+        },
         "state": {
           "type": "InputOTPState",
           "default": "default",
@@ -5900,13 +5996,37 @@
       "themeKeys": [
         "wrapperStyle",
         "containerStyle",
-        "inputStyle",
-        "inputGroupStyle",
+        "inputGroupSizes",
+        "sm",
+        "md",
+        "lg",
+        "xl",
+        "charSizes",
+        "sm",
+        "md",
+        "lg",
+        "xl",
+        "slotActiveHoverGuard",
         "separatorStyle",
         "helperText"
       ],
       "cssVariables": [
-        "--color-text-primary",
+        "--otp-slot-size-sm",
+        "--otp-slot-size-md",
+        "--otp-slot-size-lg",
+        "--otp-slot-size-xl",
+        "--x",
+        "--otp-line-height-*",
+        "--otp-text-size-sm",
+        "--otp-line-height-sm",
+        "--otp-text-size-md",
+        "--otp-line-height-md",
+        "--otp-text-size-lg",
+        "--otp-line-height-lg",
+        "--otp-text-size-xl",
+        "--otp-line-height-xl",
+        "--color-primary-600",
+        "--color-primary-500",
         "--color-text-muted"
       ],
       "codeExample": "import { InputOTP } from \"@flikk/ui\";\n\n<InputOTP\n  length={6}\n  label=\"Enter verification code\"\n  helperText=\"Check your email for the 6-digit code\"\n/>"
@@ -5919,7 +6039,7 @@
       "description": "InputTag component for entering multiple tags or keywords. Supports Enter, comma, and paste for adding tags. Backspace removes the last tag when input is empty. Optionally supports dropdown suggestions.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "value": {
           "type": "string[]",
@@ -6265,8 +6385,8 @@
         "--color-primary-600",
         "--color-primary-500",
         "--color-background-disabled",
-        "--color-neutral-700",
-        "--color-neutral-600",
+        "--color-mono-700",
+        "--color-mono-600",
         "--color-primary-contrast",
         "--color-text-secondary",
         "--color-danger"
@@ -6415,7 +6535,7 @@
       "description": "Accessible select with labels, helper text, searchable options, typeahead, multi-select, and portal-based dropdown positioning. Manages its own selection state — pass",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "id": {
           "type": "string",
@@ -6518,7 +6638,8 @@
         },
         "searchPlaceholder": {
           "type": "string",
-          "description": "Placeholder text for the search input"
+          "default": "Search...",
+          "description": "Placeholder text for the search input shown when `searchable` is true."
         },
         "portal": {
           "type": "boolean",
@@ -6608,8 +6729,6 @@
       "cssVariables": [
         "--field-fill",
         "--color-text-primary",
-        "--color-border",
-        "--radius-base",
         "--color-primary",
         "--color-primary-400",
         "--color-text-muted"
@@ -6806,7 +6925,7 @@
       "description": "A customizable slider component with single and range support. Features include value display, tick marks, min/max labels, icons, and full keyboard navigation for accessibility.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "state": {
           "type": "SliderState",
@@ -6920,6 +7039,7 @@
         "--color-primary-700",
         "--color-background-disabled",
         "--color-danger",
+        "--color-surface",
         "--color-border",
         "--color-text-secondary",
         "--color-text-muted"
@@ -6934,7 +7054,7 @@
       "description": "A toggle switch component for binary on/off states. Supports controlled and uncontrolled modes, labels with descriptions, and customizable positioning.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "id": {
           "type": "string",
@@ -7014,8 +7134,8 @@
       "cssVariables": [
         "--color-border",
         "--color-primary-600",
-        "--color-neutral-200",
-        "--color-neutral-700",
+        "--color-mono-200",
+        "--color-mono-700",
         "--color-primary",
         "--color-background-disabled",
         "--color-text-muted"
@@ -7030,7 +7150,7 @@
       "description": "A flexible multiline text input with sizes, states, label, and helper text following the shadcn approach.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "size": {
           "type": "TextareaSize",
@@ -7110,7 +7230,7 @@
       "description": "A time picker with masked input trigger and iOS-style scroll wheel. Type directly or scroll the wheels — both stay in sync. Supports 12-hour and 24-hour formats, time validation, and step intervals. Manages its own value internally; pass",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "value": {
           "type": "string",
@@ -7218,21 +7338,18 @@
       ],
       "cssVariables": [
         "--color-text-primary",
-        "--color-neutral-200",
         "--color-text-muted",
         "--color-background-secondary",
         "--color-border",
         "--form-radius",
-        "--color-neutral-400",
         "--color-text-disabled",
-        "--color-neutral-600",
         "--color-danger",
         "--color-danger-400",
         "--color-text-placeholder",
-        "--color-neutral-500",
         "--color-surface-sunken",
         "--color-surface-hover",
-        "--color-neutral-700"
+        "--color-mono-700",
+        "--color-mono-600"
       ],
       "codeExample": "import { TimePicker } from \"@flikk/ui\";\n\n<TimePicker\n  label=\"Meeting Time\"\n  placeholder=\"HH:MM\"\n  helperText=\"Type a time or use the scroll wheels\"\n/>"
     },
@@ -7244,7 +7361,7 @@
       "description": "Concentric circular progress rings inspired by Apple Activity. Each ring is a value 0–100; supports custom colors, a center label, and up to 5 rings.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "rings": {
           "type": "RingData[]",
@@ -7364,10 +7481,11 @@
       ],
       "cssVariables": [
         "--color-text-placeholder",
-        "--color-primary",
-        "--color-warning",
-        "--color-success",
-        "--color-danger"
+        "--color-chart-1",
+        "--color-chart-2",
+        "--color-chart-3",
+        "--color-chart-4",
+        "--color-chart-5"
       ],
       "codeExample": "import { AreaChart, ChartContainer } from \"@flikk/ui/charts\";\n\n<ChartContainer\n  data={[\n    { name: \"Jan\", revenue: 32 },\n    { name: \"Feb\", revenue: 41 },\n    { name: \"Mar\", revenue: 38 },\n    { name: \"Apr\", revenue: 54 },\n    { name: \"May\", revenue: 49 },\n    { name: \"Jun\", revenue: 67 },\n  ]}\n  config={{ revenue: { label: \"Revenue ($k)\", color: \"var(--color-primary)\" } }}\n  className=\"w-full max-w-[600px] h-[300px]\"\n>\n  <AreaChart\n    data={[\n      { name: \"Jan\", revenue: 32 },\n      { name: \"Feb\", revenue: 41 },\n      { name: \"Mar\", revenue: 38 },\n      { name: \"Apr\", revenue: 54 },\n      { name: \"May\", revenue: 49 },\n      { name: \"Jun\", revenue: 67 },\n    ]}\n    config={{ revenue: { label: \"Revenue ($k)\", color: \"var(--color-primary)\" } }}\n    minValue={0}\n    maxValue={80}\n    curved\n    showDots\n  />\n</ChartContainer>"
     },
@@ -7479,7 +7597,7 @@
         "--color-text-secondary",
         "--color-text-primary",
         "--color-background",
-        "--color-neutral",
+        "--color-mono",
         "--color-text-muted",
         "--color-primary-400",
         "--color-primary-600",
@@ -7574,7 +7692,7 @@
       "description": "A conversion funnel chart with trapezoid stages showing progressive dropoff and stage-to-stage conversion. Supports horizontal/vertical orientations and curved or linear edges.",
       "status": "beta",
       "productionReady": false,
-      "generative": false,
+      "generative": true,
       "statusWarning": "⚠️ BETA: This component is not production-ready. API may change without notice.",
       "props": {
         "data": {
@@ -7673,7 +7791,7 @@
       "description": "A CSS-grid heatmap for visualizing intensity across two categorical dimensions (e.g. activity by day and time). Drive it with a",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "data": {
           "type": "HeatmapDataPoint[]",
@@ -7740,6 +7858,44 @@
       ],
       "codeExample": "import { Heatmap, ChartContainer } from \"@flikk/ui/charts\";\n\n<ChartContainer\n  data={[\n    { x: \"Mon\", y: \"Morning\", value: 18 },\n    { x: \"Tue\", y: \"Morning\", value: 24 },\n    { x: \"Wed\", y: \"Morning\", value: 21 },\n    { x: \"Thu\", y: \"Morning\", value: 30 },\n    { x: \"Fri\", y: \"Morning\", value: 27 },\n    { x: \"Mon\", y: \"Afternoon\", value: 32 },\n    { x: \"Tue\", y: \"Afternoon\", value: 41 },\n    { x: \"Wed\", y: \"Afternoon\", value: 38 },\n    { x: \"Thu\", y: \"Afternoon\", value: 47 },\n    { x: \"Fri\", y: \"Afternoon\", value: 44 },\n    { x: \"Mon\", y: \"Evening\", value: 14 },\n    { x: \"Tue\", y: \"Evening\", value: 19 },\n    { x: \"Wed\", y: \"Evening\", value: 16 },\n    { x: \"Thu\", y: \"Evening\", value: 22 },\n    { x: \"Fri\", y: \"Evening\", value: 20 },\n  ]}\n  config={{ value: { label: \"Tickets\" } }}\n  className=\"w-full max-w-[600px] h-[240px]\"\n>\n  <Heatmap\n    color=\"primary\"\n    colorScale={{ steps: 10, minOpacity: 0.1 }}\n    layout={{ gap: 4 }}\n    axis={{ showXAxis: true, showYAxis: true }}\n    legend={{ enabled: true, labels: { min: \"Quiet\", max: \"Busy\" } }}\n  />\n</ChartContainer>"
     },
+    {
+      "name": "HorizontalBarChart",
+      "category": "charts",
+      "pattern": "simple",
+      "importPath": "@flikk/ui/charts",
+      "description": "Bar chart with categories running down the left and values extending right. Use it when category names are long or numerous, or when the chart ranks items — a column chart cannot fit labels like \\",
+      "status": "stable",
+      "productionReady": true,
+      "generative": true,
+      "props": {
+        "categoryGap": {
+          "type": "number",
+          "description": "Gap between category rows."
+        },
+        "categoryWidth": {
+          "type": "number",
+          "default": "120",
+          "description": "Width reserved for the category labels running down the left. Category names are arbitrary (\"United Kingdom\"), so unlike a bottom axis there is no shared constant that can know how much room they need — hence a prop rather than `X_AXIS_MARGIN`."
+        },
+        "colors": {
+          "type": "string[]",
+          "description": "Custom color palette for bar series, applied in order and cycled if there are more series than colors. Any valid CSS color, including CSS variables. @example ['var(--color-primary)', 'var(--color-success)']"
+        },
+        "showAnimation": {
+          "type": "boolean",
+          "description": "Whether to play the staggered grow-from-left entrance on mount."
+        },
+        "showValidationWarnings": {
+          "type": "boolean",
+          "default": "true in development",
+          "description": "Log data-validation warnings to the console."
+        },
+        "valueFormatter": {
+          "type": "(value: number) => string",
+          "description": "Formats the value shown in the tooltip."
+        }
+      }
+    },
     {
       "name": "LineChart",
       "category": "charts",
@@ -7774,6 +7930,86 @@
       },
       "codeExample": "import { LineChart, ChartContainer } from \"@flikk/ui/charts\";\n\n<ChartContainer\n  data={[\n    { name: \"Mon\", visitors: 2400 },\n    { name: \"Tue\", visitors: 3100 },\n    { name: \"Wed\", visitors: 2900 },\n    { name: \"Thu\", visitors: 4200 },\n    { name: \"Fri\", visitors: 3800 },\n    { name: \"Sat\", visitors: 2200 },\n    { name: \"Sun\", visitors: 1900 },\n  ]}\n  config={{ visitors: { label: \"Visitors\", color: \"var(--color-primary)\" } }}\n  className=\"w-full max-w-[600px] h-[300px]\"\n>\n  <LineChart\n    data={[\n      { name: \"Mon\", visitors: 2400 },\n      { name: \"Tue\", visitors: 3100 },\n      { name: \"Wed\", visitors: 2900 },\n      { name: \"Thu\", visitors: 4200 },\n      { name: \"Fri\", visitors: 3800 },\n      { name: \"Sat\", visitors: 2200 },\n      { name: \"Sun\", visitors: 1900 },\n    ]}\n    config={{ visitors: { label: \"Visitors\", color: \"var(--color-primary)\" } }}\n    curved\n    showDots\n    strokeWidth={3}\n  />\n</ChartContainer>"
     },
+    {
+      "name": "LollipopChart",
+      "category": "charts",
+      "pattern": "simple",
+      "importPath": "@flikk/ui/charts",
+      "description": "Single-series magnitude-by-category chart: a dot + stem mark per category, circle-badge axis ticks, and a selectable column that pins a value badge with a spotlight highlight.",
+      "status": "stable",
+      "productionReady": true,
+      "generative": false,
+      "props": {
+        "config": {
+          "type": "ChartConfig",
+          "required": true
+        },
+        "axis": {
+          "type": "just floating\n  // dot+stem marks above the shared XAxis (same tick/label component every\n  // other Cartesian chart uses — this chart isn't restricted to day-of-week\n  // or any other specific category shape).\n  showGrid?: boolean",
+          "required": true
+        },
+        "showXAxis": {
+          "type": "boolean"
+        },
+        "showYAxis": {
+          "type": "boolean"
+        },
+        "minValue": {
+          "type": "number"
+        },
+        "maxValue": {
+          "type": "number"
+        },
+        "selectedIndex": {
+          "type": "number | null",
+          "description": "Controlled selected category index. `null`/`undefined` = no selection."
+        },
+        "defaultSelectedIndex": {
+          "type": "number | null",
+          "description": "Uncontrolled initial selection."
+        },
+        "onSelectedIndexChange": {
+          "type": "(index: number | null) => void",
+          "description": "Payload is the index, not the event (CLAUDE.md §9 naming convention)."
+        },
+        "valueFormatter": {
+          "type": "(value: number, item: ChartDataPoint) => string",
+          "description": "Formats the pinned badge's value text. Defaults to `String(value)`."
+        },
+        "dotRadius": {
+          "type": "number"
+        },
+        "stemWidth": {
+          "type": "number"
+        },
+        "color": {
+          "type": "string",
+          "description": "Series color for the dot + stem. Falls back to the single `config` key's `color`, then `var(--color-primary)`."
+        },
+        "showAnimation": {
+          "type": "boolean"
+        },
+        "enableKeyboardNavigation": {
+          "type": "boolean"
+        },
+        "showValidationWarnings": {
+          "type": "boolean"
+        },
+        "title": {
+          "type": "string"
+        },
+        "description": {
+          "type": "string"
+        },
+        "width": {
+          "type": "string | number"
+        },
+        "height": {
+          "type": "string | number"
+        }
+      },
+      "codeExample": "import { LollipopChart, ChartContainer } from \"@flikk/ui/charts\";\n\n<ChartContainer\n  data={[\n    { name: \"Sunday\", spend: 1200 },\n    { name: \"Monday\", spend: 1850 },\n    { name: \"Tuesday\", spend: 2567 },\n    { name: \"Wednesday\", spend: 1500 },\n    { name: \"Thursday\", spend: 2100 },\n    { name: \"Friday\", spend: 1700 },\n    { name: \"Saturday\", spend: 1300 },\n  ]}\n  config={{ spend: { label: \"Spend\", color: \"var(--color-primary)\" } }}\n  className=\"w-full max-w-2xl h-[280px]\"\n>\n  <LollipopChart\n    data={[/* same data */]}\n    config={{ spend: { label: \"Spend\" } }}\n    defaultSelectedIndex={2}\n    valueFormatter={(value) => \\"
+    },
     {
       "name": "RadarChart",
       "category": "charts",
@@ -7782,7 +8018,7 @@
       "description": "A radar (spider) chart for comparing multi-dimensional data across categories. Supports multiple overlapping series, configurable grid rings, and optional entrance animations.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "axes": {
           "type": "string[]",
@@ -7861,7 +8097,7 @@
       "description": "SVG-based scatter plot for visualizing correlation between two numeric variables across dual axes. Supports category coloring (multi-series) and an optional bubble-size dimension.",
       "status": "stable",
       "productionReady": true,
-      "generative": false,
+      "generative": true,
       "props": {
         "data": {
           "type": "ScatterPlotDataPoint[]",
@@ -7941,9 +8177,6 @@
         "barRadius": {
           "type": "number"
         },
-        "gap": {
-          "type": "number"
-        },
         "categoryGap": {
           "type": "number"
         },
@@ -8154,7 +8387,7 @@
         "default",
         "user",
         "cursorFollowColors",
-        "neutral",
+        "mono",
         "dark",
         "primary",
         "success",
@@ -8165,7 +8398,7 @@
         "md",
         "lg",
         "colors",
-        "neutral",
+        "mono",
         "dark",
         "primary",
         "success",
@@ -8256,7 +8489,7 @@
         "fadeDirection": {
           "type": "DotPatternFadeDirection",
           "default": "radial",
-          "description": "Direction of the fade gradient. - \"radial\" fades from center outward - \"top\" | \"bottom\" | \"left\" | \"right\" fades toward that edge"
+          "description": "Direction of the fade gradient. - \"radial\" fades the edges out (solid center, transparent edges) - \"center\" fades the center out (transparent center, solid edges — a vignette that keeps content-area behind it clear) - \"top\" | \"bottom\" | \"left\" | \"right\" fades toward that edge"
         },
         "fadeSize": {
           "type": "number",
@@ -8269,7 +8502,7 @@
           "description": "Whether to apply a subtle pulse animation to the dots. Respects prefers-reduced-motion automatically."
         }
       },
-      "codeExample": "import { DotPattern } from \"@flikk/ui/effects\";\n\n<div className=\"relative overflow-hidden rounded-lg bg-white h-80\">\n  <DotPattern spacing={20} dotSize={1} fadeDirection=\"radial\" />\n  <div className=\"relative z-10 flex items-center justify-center h-full\">\n    <h2 className=\"text-2xl font-bold text-gray-900\">Ship with confidence</h2>\n  </div>\n</div>"
+      "codeExample": "import { DotPattern } from \"@flikk/ui/effects\";\n\n<div className=\"relative overflow-hidden rounded-lg bg-[var(--color-surface)] h-80\">\n  <DotPattern spacing={20} dotSize={1} fadeDirection=\"radial\" />\n  <div className=\"relative z-10 flex items-center justify-center h-full\">\n    <h2 className=\"text-2xl font-bold text-[var(--color-text-primary)]\">Ship with confidence</h2>\n  </div>\n</div>"
     },
     {
       "name": "FlutedGlass",
@@ -10154,7 +10387,7 @@
         "--color-text-primary",
         "--color-border"
       ],
-      "codeExample": "import { AppShell, Sidebar, NavItem, Button, Breadcrumbs, Avatar, Card, Badge } from \"@flikk/ui\";\nimport { HomeIcon, InboxIcon, UsersIcon, ChartBarIcon, MagnifyingGlassIcon, BellIcon, PlusIcon } from \"@heroicons/react/24/outline\";\n\n<AppShell scroll=\"viewport\" contentWidth=\"wide\" contentPadding=\"lg\">\n  {/* topbarSpan=\"full\" (default) — runs edge-to-edge over the Sidebar */}\n  <AppShell.Topbar>\n    <div className=\"flex h-14 items-center justify-between gap-4 px-4\">\n      <span className=\"text-sm font-semibold\">Flikk Workspace</span>\n      <div className=\"flex items-center gap-2\">\n        <Button variant=\"ghost\" size=\"sm\" aria-label=\"Search\"><MagnifyingGlassIcon className=\"size-4\" /></Button>\n        <Button variant=\"ghost\" size=\"sm\" aria-label=\"Notifications\"><BellIcon className=\"size-4\" /></Button>\n        <Avatar src=\"...\" name=\"Maya Patel\" size=\"sm\" />\n      </div>\n    </div>\n  </AppShell.Topbar>\n\n  {/* width=\"auto\" lets core/Sidebar own its width; theme makes AppShell.Sidebar a transparent flex slot so core/Sidebar provides all visual chrome */}\n  <AppShell.Sidebar width=\"auto\" collapsedOnMobile={false} theme={{ sidebar: \"flex flex-col shrink-0\" }}>\n    <Sidebar>\n      <Sidebar.Content>\n        <Sidebar.Nav>\n          <Sidebar.NavGroup title=\"Main\">\n            <NavItem startContent={<HomeIcon />} active>Dashboard</NavItem>\n            <NavItem startContent={<InboxIcon />} notification={5}>Inbox</NavItem>\n            <NavItem startContent={<UsersIcon />}>Customers</NavItem>\n            <NavItem startContent={<ChartBarIcon />}>Analytics</NavItem>\n          </Sidebar.NavGroup>\n        </Sidebar.Nav>\n      </Sidebar.Content>\n      <Sidebar.Footer>\n        <Sidebar.Toggle />\n        <Sidebar.UserProfile name=\"Maya Patel\" email=\"maya@flikk.io\" status=\"online\" />\n      </Sidebar.Footer>\n    </Sidebar>\n  </AppShell.Sidebar>\n\n  <AppShell.Main>\n    {/* AppShell.Header sticks inside the Main scroll region */}\n    <AppShell.Header>\n      <div className=\"flex items-center justify-between gap-4 py-4\">\n        <div>\n          <Breadcrumbs items={[{ label: \"Home\", href: \"#\" }, { label: \"Dashboard\", href: \"#\" }]} variant=\"muted\" />\n          <h1 className=\"mt-1 text-xl font-semibold\">Operating snapshot</h1>\n        </div>\n        <Button size=\"sm\"><PlusIcon className=\"size-4\" />New report</Button>\n      </div>\n    </AppShell.Header>\n\n    <div className=\"grid gap-4 md:grid-cols-3\">\n      <Card><Card.Body className=\"p-5\"><p className=\"text-sm text-[var(--color-text-muted)]\">Revenue</p><span className=\"text-3xl font-semibold\">$48.2k</span></Card.Body></Card>\n      <Card><Card.Body className=\"p-5\"><p className=\"text-sm text-[var(--color-text-muted)]\">Active accounts</p><span className=\"text-3xl font-semibold\">2,847</span></Card.Body></Card>\n      <Card><Card.Body className=\"p-5\"><p className=\"text-sm text-[var(--color-text-muted)]\">Conversion</p><span className=\"text-3xl font-semibold\">8.4%</span></Card.Body></Card>\n    </div>\n  </AppShell.Main>\n</AppShell>"
+      "codeExample": "import { AppShell, Sidebar, NavItem, Button, Breadcrumbs, Avatar, Card, Badge } from \"@flikk/ui\";\n\n<AppShell scroll=\"viewport\" contentWidth=\"wide\" contentPadding=\"lg\">\n  {/* topbarSpan=\"full\" (default) — runs edge-to-edge over the Sidebar */}\n  <AppShell.Topbar>\n    <div className=\"flex h-14 items-center justify-between gap-4 px-4\">\n      <span className=\"text-sm font-semibold\">Flikk Workspace</span>\n      <div className=\"flex items-center gap-2\">\n        <Button variant=\"ghost\" size=\"sm\" aria-label=\"Search\"><MagnifyingGlassIcon className=\"size-4\" /></Button>\n        <Button variant=\"ghost\" size=\"sm\" aria-label=\"Notifications\"><BellIcon className=\"size-4\" /></Button>\n        <Avatar src=\"...\" name=\"Maya Patel\" size=\"sm\" />\n      </div>\n    </div>\n  </AppShell.Topbar>\n\n  {/* width=\"auto\" lets core/Sidebar own its width; theme makes AppShell.Sidebar a transparent flex slot so core/Sidebar provides all visual chrome */}\n  <AppShell.Sidebar width=\"auto\" collapsedOnMobile={false} theme={{ sidebar: \"flex flex-col shrink-0\" }}>\n    <Sidebar>\n      <Sidebar.Content>\n        <Sidebar.Nav>\n          <Sidebar.NavGroup title=\"Main\">\n            <NavItem startContent={<HomeIcon />} active>Dashboard</NavItem>\n            <NavItem startContent={<InboxIcon />} notification={5}>Inbox</NavItem>\n            <NavItem startContent={<UsersIcon />}>Customers</NavItem>\n            <NavItem startContent={<ChartBarIcon />}>Analytics</NavItem>\n          </Sidebar.NavGroup>\n        </Sidebar.Nav>\n      </Sidebar.Content>\n      <Sidebar.Footer>\n        <Sidebar.Toggle />\n        <Sidebar.UserProfile name=\"Maya Patel\" email=\"maya@flikk.io\" status=\"online\" />\n      </Sidebar.Footer>\n    </Sidebar>\n  </AppShell.Sidebar>\n\n  <AppShell.Main>\n    {/* AppShell.Header sticks inside the Main scroll region */}\n    <AppShell.Header>\n      <div className=\"flex items-center justify-between gap-4 py-4\">\n        <div>\n          <Breadcrumbs items={[{ label: \"Home\", href: \"#\" }, { label: \"Dashboard\", href: \"#\" }]} variant=\"muted\" />\n          <h1 className=\"mt-1 text-xl font-semibold\">Operating snapshot</h1>\n        </div>\n        <Button size=\"sm\"><PlusIcon className=\"size-4\" />New report</Button>\n      </div>\n    </AppShell.Header>\n\n    <div className=\"grid gap-4 md:grid-cols-3\">\n      <Card><Card.Body className=\"p-5\"><p className=\"text-sm text-[var(--color-text-muted)]\">Revenue</p><span className=\"text-3xl font-semibold\">$48.2k</span></Card.Body></Card>\n      <Card><Card.Body className=\"p-5\"><p className=\"text-sm text-[var(--color-text-muted)]\">Active accounts</p><span className=\"text-3xl font-semibold\">2,847</span></Card.Body></Card>\n      <Card><Card.Body className=\"p-5\"><p className=\"text-sm text-[var(--color-text-muted)]\">Conversion</p><span className=\"text-3xl font-semibold\">8.4%</span></Card.Body></Card>\n    </div>\n  </AppShell.Main>\n</AppShell>"
     },
     {
       "name": "FormLayout",
@@ -10186,7 +10419,7 @@
         "--color-text-muted",
         "--color-border"
       ],
-      "codeExample": "import { FormLayout, Input, Select, Button, Link } from \"@flikk/ui\";\n\n<FormLayout>\n  <FormLayout.Section\n    title=\"Personal Information\"\n    subtitle=\"Use a permanent address where you can receive mail.\"\n    action={<Link size=\"sm\">Add address</Link>}\n  >\n    <Input label=\"First name\" placeholder=\"John\" />\n    <Input label=\"Last name\" placeholder=\"Doe\" />\n    <div className=\"col-span-full\">\n      <Input label=\"Email address\" type=\"email\" placeholder=\"john@example.com\" />\n    </div>\n    <Input label=\"Phone number\" type=\"tel\" placeholder=\"+1 (555) 000-0000\" />\n    <Select\n      label=\"Country\"\n      placeholder=\"Select country\"\n      options={[\n        { id: \"us\", label: \"United States\", value: \"us\" },\n        { id: \"ca\", label: \"Canada\", value: \"ca\" },\n        { id: \"uk\", label: \"United Kingdom\", value: \"uk\" },\n      ]}\n    />\n  </FormLayout.Section>\n\n  <FormLayout.Footer>\n    <span>All fields are required unless marked optional.</span>\n    <div className=\"flex gap-3\">\n      <Button variant=\"outline\" color=\"neutral\">Cancel</Button>\n      <Button>Save changes</Button>\n    </div>\n  </FormLayout.Footer>\n</FormLayout>"
+      "codeExample": "import { FormLayout, Input, Select, Button, Link } from \"@flikk/ui\";\n\n<FormLayout>\n  <FormLayout.Section\n    title=\"Personal Information\"\n    subtitle=\"Use a permanent address where you can receive mail.\"\n    action={<Link size=\"sm\">Add address</Link>}\n  >\n    <Input label=\"First name\" placeholder=\"John\" />\n    <Input label=\"Last name\" placeholder=\"Doe\" />\n    <div className=\"col-span-full\">\n      <Input label=\"Email address\" type=\"email\" placeholder=\"john@example.com\" />\n    </div>\n    <Input label=\"Phone number\" type=\"tel\" placeholder=\"+1 (555) 000-0000\" />\n    <Select\n      label=\"Country\"\n      placeholder=\"Select country\"\n      options={[\n        { id: \"us\", label: \"United States\", value: \"us\" },\n        { id: \"ca\", label: \"Canada\", value: \"ca\" },\n        { id: \"uk\", label: \"United Kingdom\", value: \"uk\" },\n      ]}\n    />\n  </FormLayout.Section>\n\n  <FormLayout.Footer>\n    <span>All fields are required unless marked optional.</span>\n    <div className=\"flex gap-3\">\n      <Button variant=\"outline\" color=\"mono\">Cancel</Button>\n      <Button>Save changes</Button>\n    </div>\n  </FormLayout.Footer>\n</FormLayout>"
     },
     {
       "name": "Grid",
@@ -10303,6 +10536,7 @@
         "bodyGaps"
       ],
       "cssVariables": [
+        "--section-title-size",
         "--color-text-primary",
         "--color-text-secondary"
       ],
@@ -10360,6 +10594,144 @@
       ],
       "codeExample": "import { Stack } from \"@flikk/ui/layout\";\n\n<Stack direction=\"col\" gap={4}>\n  <div>Profile</div>\n  <div>Billing</div>\n  <div>Notifications</div>\n</Stack>"
     },
+    {
+      "name": "AgentStatus",
+      "category": "ai",
+      "pattern": "enhanced",
+      "importPath": "@flikk/ui/ai",
+      "description": "Compact live-region status for AI and agent activity. Active labels use a high-contrast, brand-tinted Shimmer sweep and become static when settled.",
+      "status": "stable",
+      "productionReady": true,
+      "generative": false,
+      "props": {
+        "mode": {
+          "type": "AgentStatusMode",
+          "default": "status",
+          "description": "Single status row (default) or a collapsible reasoning disclosure.",
+          "options": [
+            "status",
+            "reasoning"
+          ]
+        },
+        "status": {
+          "type": "AgentStatusState",
+          "description": "Current execution state. Active labels shimmer; settled labels are static."
+        },
+        "label": {
+          "type": "React.ReactNode",
+          "required": true,
+          "description": "Human-readable activity, for example \"Thinking\" or \"Searching sources\"."
+        },
+        "duration": {
+          "type": "number",
+          "description": "Elapsed or final duration in seconds. Takes precedence over `startedAt`, so pass it when the duration is authoritative (for example, returned by the server)."
+        },
+        "startedAt": {
+          "type": "number",
+          "description": "Epoch milliseconds the activity began. The duration then ticks on its own while `status` is `\"active\"` and freezes the moment it settles — no timer wiring in the consumer. Ignored when `duration` is supplied."
+        },
+        "icon": {
+          "type": "React.ReactNode",
+          "description": "Optional icon. When omitted, the animated semantic indicator is rendered."
+        },
+        "indicator": {
+          "type": "boolean",
+          "default": "true in `status` mode; active-only in `reasoning` mode",
+          "description": "Show the leading status indicator (or custom `icon`). Set `false` for an icon-less, text-only row — the label then sits flush left.  Defaults differ by mode: a `status` row always shows one, while a `reasoning` summary shows one only while active (the chevron carries the affordance once settled) — unless an `icon` is supplied, which opts back in. Pass explicitly to override either default."
+        },
+        "wrap": {
+          "type": "boolean",
+          "default": "false",
+          "description": "Let the label wrap onto multiple lines instead of truncating. Steps render with this on; the standalone/summary row truncates by default."
+        },
+        "activeSuffix": {
+          "type": "React.ReactNode",
+          "default": "…",
+          "description": "Text appended while active."
+        },
+        "shimmerDuration": {
+          "type": "number",
+          "default": "2",
+          "description": "Active shimmer cycle duration in seconds."
+        },
+        "shimmerSpread": {
+          "type": "number",
+          "default": "16",
+          "description": "Width of the active shimmer highlight band."
+        },
+        "shimmerColor": {
+          "type": "string",
+          "description": "Base color for the active shimmer text."
+        },
+        "shimmerHighlightColor": {
+          "type": "string",
+          "description": "Highlight color for the active shimmer sweep."
+        },
+        "live": {
+          "type": "\"off\" | \"polite\" | \"assertive\"",
+          "default": "polite",
+          "description": "Accessible announcement behavior. `\"polite\"` waits for a pause rather than interrupting, which is what a background activity warrants."
+        },
+        "steps": {
+          "type": "AgentStatusStepData[]",
+          "description": "Structured reasoning steps. Rendered as a list of AgentStatus rows. Ignored unless `mode=\"reasoning\"`."
+        },
+        "open": {
+          "type": "boolean",
+          "description": "Controlled expanded state (reasoning mode)."
+        },
+        "defaultOpen": {
+          "type": "boolean",
+          "default": "false",
+          "description": "Initial expanded state for uncontrolled reasoning usage."
+        },
+        "onOpenChange": {
+          "type": "(open: boolean) => void"
+        },
+        "divider": {
+          "type": "boolean",
+          "default": "true",
+          "description": "Render the full-width hairline under the reasoning trigger."
+        }
+      },
+      "themeKeys": [
+        "baseStyle",
+        "iconStyle",
+        "labelStyle",
+        "durationStyle",
+        "stateStyles",
+        "idle",
+        "active",
+        "complete",
+        "pending",
+        "error",
+        "indicatorStyles",
+        "idle",
+        "active",
+        "complete",
+        "pending",
+        "error",
+        "reasoningRootStyle",
+        "triggerStyle",
+        "triggerContentStyle",
+        "chevronStyle",
+        "dividerStyle",
+        "contentStyle",
+        "contentInnerStyle",
+        "stepsStyle",
+        "stepItemStyle",
+        "proseStyle"
+      ],
+      "cssVariables": [
+        "--color-text-muted",
+        "--color-text-secondary",
+        "--color-text-placeholder",
+        "--color-danger",
+        "--color-primary",
+        "--color-success",
+        "--color-border"
+      ]
+    },
     {
       "name": "CodeBlock",
       "category": "ai",
@@ -10441,8 +10813,8 @@
         "--color-text-muted",
         "--color-primary-50",
         "--color-primary",
-        "--color-neutral-400",
-        "--color-neutral-200",
+        "--color-mono-400",
+        "--color-mono-200",
         "--color-success-50",
         "--color-success",
         "--color-success-600",
@@ -10716,8 +11088,8 @@
         "--color-primary-900",
         "--color-danger",
         "--color-danger-50",
-        "--color-danger-500",
-        "--color-danger-950"
+        "--color-danger-950",
+        "--color-danger-500"
       ],
       "codeExample": "import { PromptInput } from \"@flikk/ui/ai\";\n\n<PromptInput placeholder=\"Ask me anything...\" />"
     },
@@ -10752,7 +11124,115 @@
         "--color-background-secondary",
         "--color-primary"
       ],
-      "codeExample": "import { PromptSuggestion } from \"@flikk/ui/ai\";\nimport { SparklesIcon } from \"@heroicons/react/16/solid\";\n\n<PromptSuggestion icon={<SparklesIcon className=\"size-4\" />}>\n  Write a professional email\n</PromptSuggestion>"
+      "codeExample": "import { PromptSuggestion } from \"@flikk/ui/ai\";\n\n<PromptSuggestion icon={<SparklesIcon className=\"size-4\" />}>\n  Write a professional email\n</PromptSuggestion>"
+    },
+    {
+      "name": "Reasoning",
+      "category": "ai",
+      "pattern": "compound",
+      "importPath": "@flikk/ui/ai",
+      "description": "Collapsed-by-default disclosure for concise, developer-provided reasoning summaries. Do not use it to expose private chain-of-thought.",
+      "status": "stable",
+      "productionReady": true,
+      "generative": false,
+      "props": {},
+      "subComponents": [
+        "Reasoning.Step"
+      ]
+    },
+    {
+      "name": "SourceCitation",
+      "category": "ai",
+      "pattern": "simple",
+      "importPath": "@flikk/ui/ai",
+      "description": "Inline citation chip that opens an accessible source preview popover. Group related citations with SourceCitationGroup.",
+      "status": "stable",
+      "productionReady": true,
+      "generative": false,
+      "props": {
+        "index": {
+          "type": "React.ReactNode",
+          "description": "Citation number or compact identifier displayed in the chip."
+        },
+        "title": {
+          "type": "React.ReactNode",
+          "required": true,
+          "description": "Source title displayed in the preview."
+        },
+        "domain": {
+          "type": "React.ReactNode",
+          "description": "Source domain displayed in both the chip and preview."
+        },
+        "excerpt": {
+          "type": "React.ReactNode",
+          "description": "Supporting source excerpt."
+        },
+        "href": {
+          "type": "string",
+          "description": "Destination URL."
+        },
+        "icon": {
+          "type": "React.ReactNode",
+          "description": "Optional source or favicon icon."
+        },
+        "preview": {
+          "type": "React.ReactNode",
+          "description": "Fully custom preview content."
+        },
+        "placement": {
+          "type": "PopoverPlacement",
+          "description": "Popover placement relative to the citation chip."
+        },
+        "open": {
+          "type": "boolean",
+          "description": "Controlled popover state."
+        },
+        "defaultOpen": {
+          "type": "boolean",
+          "description": "Initial popover state for uncontrolled usage."
+        },
+        "onOpenChange": {
+          "type": "(open: boolean) => void"
+        },
+        "openInNewTab": {
+          "type": "boolean",
+          "default": "true",
+          "description": "Open the source link in a new tab."
+        },
+        "linkLabel": {
+          "type": "React.ReactNode",
+          "default": "Open source",
+          "description": "Label for the link at the foot of the preview. Overridable so the string is not trapped in English."
+        }
+      },
+      "separateExports": [
+        "SourceCitationGroup"
+      ],
+      "themeKeys": [
+        "triggerStyle",
+        "indexStyle",
+        "faviconStyle",
+        "domainStyle",
+        "popoverStyle",
+        "previewHeaderStyle",
+        "previewIconStyle",
+        "previewTitleStyle",
+        "previewDomainStyle",
+        "excerptStyle",
+        "linkStyle",
+        "groupStyle"
+      ],
+      "cssVariables": [
+        "--color-border",
+        "--color-surface",
+        "--color-text-secondary",
+        "--color-border-hover",
+        "--color-surface-hover",
+        "--color-text-primary",
+        "--color-primary",
+        "--color-surface-sunken",
+        "--color-text-muted"
+      ]
     },
     {
       "name": "StreamingResponse",
@@ -10893,7 +11373,7 @@
         "loadingDotStyle"
       ],
       "cssVariables": [
-        "--radius-base",
+        "--alert-radius",
         "--color-danger-200",
         "--color-danger-50",
         "--color-danger",
@@ -10901,7 +11381,7 @@
         "--color-danger-700",
         "--color-text-placeholder"
       ],
-      "codeExample": "import { StreamingResponse } from \"@flikk/ui/ai\";\nimport { CpuChipIcon } from \"@heroicons/react/24/outline\";\n\n<StreamingResponse\n  url=\"/api/chat\"\n  method=\"POST\"\n  body={{ prompt: \"Hello!\" }}\n  format=\"openai\"\n  animated\n  showCursor\n  role=\"assistant\"\n  avatar={{ name: \"AI Assistant\", fallback: <CpuChipIcon /> }}\n  showTimestamp\n  showActions\n/>"
+      "codeExample": "import { StreamingResponse } from \"@flikk/ui/ai\";\n\n<StreamingResponse\n  url=\"/api/chat\"\n  method=\"POST\"\n  body={{ prompt: \"Hello!\" }}\n  format=\"openai\"\n  animated\n  showCursor\n  role=\"assistant\"\n  avatar={{ name: \"AI Assistant\", fallback: <CpuChipIcon /> }}\n  showTimestamp\n  showActions\n/>"
     },
     {
       "name": "TokenCounter",
@@ -11004,25 +11484,40 @@
         "Icon",
         "Separator"
       ],
-      "source": "import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport {\n  Avatar,\n  AvatarGroup,\n  Badge,\n  Button,\n  Icon,\n  Separator,\n} from \"../../components/core\";\nimport { Feed } from \"../../components/data-display\";\nimport {\n  CodeBracketIcon,\n  RocketLaunchIcon,\n  DocumentCheckIcon,\n  BugAntIcon,\n  TagIcon,\n  ArrowPathIcon,\n  FunnelIcon,\n  ChatBubbleLeftEllipsisIcon,\n  UserPlusIcon,\n} from \"@heroicons/react/24/solid\";\n\nconst meta: Meta = {\n  title: \"Blocks/ActivityTimelineLayout\",\n  parameters: { layout: \"fullscreen\" },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nconst avatars = {\n  sarah:\n    \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face\",\n  james:\n    \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face\",\n  emily:\n    \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face\",\n  david:\n    \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face\",\n  alex: \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face\",\n};\n\nconst ActivityPage = () => {\n  return (\n    <div className=\"py-8 sm:py-12 px-6\">\n      <div className=\"max-w-3xl mx-auto\">\n        {/* Header */}\n        <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8\">\n          <div>\n            <h1 className=\"text-2xl sm:text-3xl font-bold text-[var(--color-text-primary)]\">\n              Activity\n            </h1>\n            <p className=\"text-[var(--color-text-muted)] mt-1\">\n              Everything happening across your projects.\n            </p>\n          </div>\n          <Button variant=\"outline\" color=\"neutral\" size=\"sm\">\n            <FunnelIcon className=\"size-4\" /> Filter\n          </Button>\n        </div>\n\n        {/* Timeline feed */}\n        <div className=\"space-y-1\">\n          {/* Date section: Today */}\n          <div className=\"flex items-center gap-3 mb-4\">\n            <span className=\"text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider\">\n              Today\n            </span>\n            <Separator className=\"flex-1\" />\n          </div>\n\n          <Feed>\n            {/* Deploy */}\n            <Feed.Item\n              icon={\n                <RocketLaunchIcon className=\"size-5 text-[var(--color-success)]\" />\n              }\n              indicatorClassName=\"bg-[var(--color-success-50)]\"\n              timestamp=\"35m ago\"\n            >\n              <div className=\"text-sm\">\n                <div className=\"flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                  <Avatar src={avatars.sarah} name=\"Sarah Chen\" size=\"xs\" />\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    Sarah Chen\n                  </span>\n                  deployed\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    v2.5.0\n                  </span>\n                  to production\n                </div>\n                <div className=\"mt-2 bg-[var(--color-background)] p-2 rounded-md border border-[var(--color-border)] flex items-center justify-between\">\n                  <div className=\"flex items-center gap-2\">\n                    <Badge color=\"success\" variant=\"soft\" size=\"sm\">\n                      Production\n                    </Badge>\n                    <span className=\"text-xs text-[var(--color-text-muted)]\">\n                      3 services updated\n                    </span>\n                  </div>\n                  <Badge color=\"success\" variant=\"soft\" size=\"sm\">\n                    Healthy\n                  </Badge>\n                </div>\n              </div>\n            </Feed.Item>\n\n            {/* Commits */}\n            <Feed.Item\n              icon={\n                <CodeBracketIcon className=\"size-5 text-[var(--color-secondary)]\" />\n              }\n              indicatorClassName=\"bg-[var(--color-secondary-50)]\"\n              timestamp=\"1h ago\"\n            >\n              <div className=\"text-sm\">\n                <div className=\"flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                  <Avatar src={avatars.james} name=\"James Wilson\" size=\"xs\" />\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    James Wilson\n                  </span>\n                  pushed 4 commits to\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    feature/table-refactor\n                  </span>\n                </div>\n                <div className=\"mt-2 bg-[var(--color-background)] p-2 rounded-md border border-[var(--color-border)] space-y-1.5\">\n                  {[\n                    \"Refactor Table to support dual API pattern\",\n                    \"Add compound component sub-types\",\n                    \"Fix column alignment for right-aligned cells\",\n                  ].map((msg) => (\n                    <div key={msg} className=\"flex items-start gap-2 text-xs\">\n                      <CodeBracketIcon className=\"size-3.5 text-[var(--color-text-muted)] shrink-0 mt-0.5\" />\n                      <span className=\"text-[var(--color-text-secondary)]\">\n                        {msg}\n                      </span>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </Feed.Item>\n\n            {/* Code review */}\n            <Feed.Item\n              icon={\n                <DocumentCheckIcon className=\"size-5 text-[var(--color-success)]\" />\n              }\n              indicatorClassName=\"bg-[var(--color-success-50)]\"\n              timestamp=\"2h ago\"\n            >\n              <div className=\"text-sm\">\n                <div className=\"flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                  <Avatar src={avatars.emily} name=\"Emily Rodriguez\" size=\"xs\" />\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    Emily Rodriguez\n                  </span>\n                  approved\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    PR #247 — Add dark mode support\n                  </span>\n                </div>\n                <div className=\"mt-2 bg-[var(--color-background)] p-2 rounded-md border border-[var(--color-border)] flex items-center justify-between\">\n                  <div className=\"flex items-center gap-2\">\n                    <DocumentCheckIcon className=\"size-4 text-[var(--color-success)]\" />\n                    <span className=\"text-xs text-[var(--color-text-secondary)]\">\n                      +1,247 / -342 lines\n                    </span>\n                  </div>\n                  <AvatarGroup\n                    max={3}\n                    size=\"xs\"\n                    avatars={[\n                      { src: avatars.emily, name: \"Emily\" },\n                      { src: avatars.david, name: \"David\" },\n                    ]}\n                  />\n                </div>\n              </div>\n            </Feed.Item>\n\n            {/* Bug fix */}\n            <Feed.Item\n              icon={\n                <BugAntIcon className=\"size-5 text-[var(--color-danger)]\" />\n              }\n              indicatorClassName=\"bg-[var(--color-danger-50)]\"\n              timestamp=\"3h ago\"\n            >\n              <div className=\"text-sm\">\n                <div className=\"flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                  <Avatar src={avatars.david} name=\"David Kim\" size=\"xs\" />\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    David Kim\n                  </span>\n                  resolved issue\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    #312 — Modal focus trap not releasing\n                  </span>\n                </div>\n                <div className=\"flex items-center gap-2 mt-2\">\n                  <Badge color=\"danger\" variant=\"soft\" size=\"sm\">\n                    Bug\n                  </Badge>\n                  <Badge color=\"success\" variant=\"soft\" size=\"sm\">\n                    Closed\n                  </Badge>\n                </div>\n              </div>\n            </Feed.Item>\n\n            {/* Comment */}\n            <Feed.Item\n              icon={\n                <ChatBubbleLeftEllipsisIcon className=\"size-5 text-[var(--color-primary)]\" />\n              }\n              indicatorClassName=\"bg-[var(--color-primary-50)]\"\n              timestamp=\"4h ago\"\n            >\n              <div className=\"text-sm\">\n                <div className=\"flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                  <Avatar src={avatars.alex} name=\"Alex Rivera\" size=\"xs\" />\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    Alex Rivera\n                  </span>\n                  commented on\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    PR #245\n                  </span>\n                </div>\n                <div className=\"mt-2 bg-[var(--color-background)] p-2.5 rounded-md border border-[var(--color-border)]\">\n                  <p className=\"text-sm text-[var(--color-text-secondary)] italic\">\n                    \"The new chart API is much cleaner. Let's ship it after we\n                    add the missing tooltip tests.\"\n                  </p>\n                </div>\n              </div>\n            </Feed.Item>\n          </Feed>\n\n          {/* Date section: Yesterday */}\n          <div className=\"flex items-center gap-3 my-6\">\n            <span className=\"text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider\">\n              Yesterday\n            </span>\n            <Separator className=\"flex-1\" />\n          </div>\n\n          <Feed>\n            {/* Release */}\n            <Feed.Item\n              icon={<TagIcon className=\"size-5 text-[var(--color-primary)]\" />}\n              indicatorClassName=\"bg-[var(--color-primary-50)]\"\n              timestamp=\"1d ago\"\n            >\n              <div className=\"text-sm\">\n                <div className=\"flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                  <Avatar src={avatars.alex} name=\"Alex Rivera\" size=\"xs\" />\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    Alex Rivera\n                  </span>\n                  created release\n                  <Badge color=\"primary\" variant=\"soft\" size=\"sm\">\n                    v2.4.1\n                  </Badge>\n                  with 8 bug fixes and 3 improvements\n                </div>\n                <div className=\"mt-2 bg-[var(--color-background)] p-2 rounded-md border border-[var(--color-border)] flex items-center gap-3\">\n                  <Icon icon=\"pdf\" size=\"lg\" />\n                  <div>\n                    <p className=\"font-medium text-[var(--color-text-primary)] text-sm\">\n                      CHANGELOG-v2.4.1.pdf\n                    </p>\n                    <p className=\"text-xs text-[var(--color-text-muted)]\">\n                      148 KB\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </Feed.Item>\n\n            {/* Revert */}\n            <Feed.Item\n              icon={\n                <ArrowPathIcon className=\"size-5 text-[var(--color-warning)]\" />\n              }\n              indicatorClassName=\"bg-[var(--color-warning-50)]\"\n              timestamp=\"1d ago\"\n            >\n              <div className=\"text-sm flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                <Avatar src={avatars.james} name=\"James Wilson\" size=\"xs\" />\n                <span className=\"font-medium text-[var(--color-text-primary)]\">\n                  James Wilson\n                </span>\n                reverted commit\n                <span className=\"font-mono text-xs text-[var(--color-text-muted)]\">\n                  a3f8c21\n                </span>\n                due to CI failure\n              </div>\n            </Feed.Item>\n\n            {/* Assignment */}\n            <Feed.Item\n              icon={\n                <UserPlusIcon className=\"size-5 text-[var(--color-primary)]\" />\n              }\n              indicatorClassName=\"bg-[var(--color-primary-50)]\"\n              timestamp=\"1d ago\"\n            >\n              <div className=\"text-sm flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                <Avatar src={avatars.sarah} name=\"Sarah Chen\" size=\"xs\" />\n                <span className=\"font-medium text-[var(--color-text-primary)]\">\n                  Sarah Chen\n                </span>\n                assigned\n                <Avatar src={avatars.david} name=\"David Kim\" size=\"xs\" />\n                <span className=\"font-medium text-[var(--color-text-primary)]\">\n                  David Kim\n                </span>\n                to issue\n                <span className=\"font-medium text-[var(--color-text-primary)]\">\n                  #318\n                </span>\n              </div>\n            </Feed.Item>\n          </Feed>\n\n          {/* Load more */}\n          <div className=\"text-center pt-6\">\n            <Button variant=\"outline\" color=\"neutral\" size=\"sm\">\n              Load More Activity\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport const Default: Story = {\n  render: () => <ActivityPage />,\n  parameters: {\n    controls: { disable: true },\n  },\n};"
+      "source": "import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport {\n  Avatar,\n  AvatarGroup,\n  Badge,\n  Button,\n  Icon,\n  Separator,\n} from \"../../components/core\";\nimport { Feed } from \"../../components/data-display\";\nimport {\n  Code as CodeBracketIcon,\n  RocketLaunch as RocketLaunchIcon,\n  ListChecks as DocumentCheckIcon,\n  Bug as BugAntIcon,\n  Tag as TagIcon,\n  ArrowsClockwise as ArrowPathIcon,\n  Funnel as FunnelIcon,\n  ChatCircleDots as ChatBubbleLeftEllipsisIcon,\n  UserPlus as UserPlusIcon,\n} from \"@phosphor-icons/react\";\n\nconst meta: Meta = {\n  title: \"Blocks/ActivityTimelineLayout\",\n  parameters: { layout: \"fullscreen\" },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nconst avatars = {\n  sarah:\n    \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face\",\n  james:\n    \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face\",\n  emily:\n    \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face\",\n  david:\n    \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face\",\n  alex: \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face\",\n};\n\nconst ActivityPage = () => {\n  return (\n    <div className=\"py-8 sm:py-12 px-6\">\n      <div className=\"max-w-3xl mx-auto\">\n        {/* Header */}\n        <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8\">\n          <div>\n            <h1 className=\"text-2xl sm:text-3xl font-bold text-[var(--color-text-primary)]\">\n              Activity\n            </h1>\n            <p className=\"text-[var(--color-text-muted)] mt-1\">\n              Everything happening across your projects.\n            </p>\n          </div>\n          <Button variant=\"outline\" color=\"mono\" size=\"sm\">\n            <FunnelIcon className=\"size-4\" /> Filter\n          </Button>\n        </div>\n\n        {/* Timeline feed */}\n        <div className=\"space-y-1\">\n          {/* Date section: Today */}\n          <div className=\"flex items-center gap-3 mb-4\">\n            <span className=\"text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider\">\n              Today\n            </span>\n            <Separator className=\"flex-1\" />\n          </div>\n\n          <Feed>\n            {/* Deploy */}\n            <Feed.Item\n              icon={\n                <RocketLaunchIcon className=\"size-5 text-[var(--color-success)]\" />\n              }\n              indicatorClassName=\"bg-[var(--color-success-50)]\"\n              timestamp=\"35m ago\"\n            >\n              <div className=\"text-sm\">\n                <div className=\"flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                  <Avatar src={avatars.sarah} name=\"Sarah Chen\" size=\"xs\" />\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    Sarah Chen\n                  </span>\n                  deployed\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    v2.5.0\n                  </span>\n                  to production\n                </div>\n                <div className=\"mt-2 bg-[var(--color-background)] p-2 rounded-md border border-[var(--color-border)] flex items-center justify-between\">\n                  <div className=\"flex items-center gap-2\">\n                    <Badge color=\"success\" variant=\"soft\" size=\"sm\">\n                      Production\n                    </Badge>\n                    <span className=\"text-xs text-[var(--color-text-muted)]\">\n                      3 services updated\n                    </span>\n                  </div>\n                  <Badge color=\"success\" variant=\"soft\" size=\"sm\">\n                    Healthy\n                  </Badge>\n                </div>\n              </div>\n            </Feed.Item>\n\n            {/* Commits */}\n            <Feed.Item\n              icon={\n                <CodeBracketIcon className=\"size-5 text-[var(--color-secondary)]\" />\n              }\n              indicatorClassName=\"bg-[var(--color-secondary-50)]\"\n              timestamp=\"1h ago\"\n            >\n              <div className=\"text-sm\">\n                <div className=\"flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                  <Avatar src={avatars.james} name=\"James Wilson\" size=\"xs\" />\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    James Wilson\n                  </span>\n                  pushed 4 commits to\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    feature/table-refactor\n                  </span>\n                </div>\n                <div className=\"mt-2 bg-[var(--color-background)] p-2 rounded-md border border-[var(--color-border)] space-y-1.5\">\n                  {[\n                    \"Refactor Table to support dual API pattern\",\n                    \"Add compound component sub-types\",\n                    \"Fix column alignment for right-aligned cells\",\n                  ].map((msg) => (\n                    <div key={msg} className=\"flex items-start gap-2 text-xs\">\n                      <CodeBracketIcon className=\"size-3.5 text-[var(--color-text-muted)] shrink-0 mt-0.5\" />\n                      <span className=\"text-[var(--color-text-secondary)]\">\n                        {msg}\n                      </span>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </Feed.Item>\n\n            {/* Code review */}\n            <Feed.Item\n              icon={\n                <DocumentCheckIcon className=\"size-5 text-[var(--color-success)]\" />\n              }\n              indicatorClassName=\"bg-[var(--color-success-50)]\"\n              timestamp=\"2h ago\"\n            >\n              <div className=\"text-sm\">\n                <div className=\"flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                  <Avatar src={avatars.emily} name=\"Emily Rodriguez\" size=\"xs\" />\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    Emily Rodriguez\n                  </span>\n                  approved\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    PR #247 — Add dark mode support\n                  </span>\n                </div>\n                <div className=\"mt-2 bg-[var(--color-background)] p-2 rounded-md border border-[var(--color-border)] flex items-center justify-between\">\n                  <div className=\"flex items-center gap-2\">\n                    <DocumentCheckIcon className=\"size-4 text-[var(--color-success)]\" />\n                    <span className=\"text-xs text-[var(--color-text-secondary)]\">\n                      +1,247 / -342 lines\n                    </span>\n                  </div>\n                  <AvatarGroup\n                    max={3}\n                    size=\"xs\"\n                    avatars={[\n                      { src: avatars.emily, name: \"Emily\" },\n                      { src: avatars.david, name: \"David\" },\n                    ]}\n                  />\n                </div>\n              </div>\n            </Feed.Item>\n\n            {/* Bug fix */}\n            <Feed.Item\n              icon={\n                <BugAntIcon className=\"size-5 text-[var(--color-danger)]\" />\n              }\n              indicatorClassName=\"bg-[var(--color-danger-50)]\"\n              timestamp=\"3h ago\"\n            >\n              <div className=\"text-sm\">\n                <div className=\"flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                  <Avatar src={avatars.david} name=\"David Kim\" size=\"xs\" />\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    David Kim\n                  </span>\n                  resolved issue\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    #312 — Modal focus trap not releasing\n                  </span>\n                </div>\n                <div className=\"flex items-center gap-2 mt-2\">\n                  <Badge color=\"danger\" variant=\"soft\" size=\"sm\">\n                    Bug\n                  </Badge>\n                  <Badge color=\"success\" variant=\"soft\" size=\"sm\">\n                    Closed\n                  </Badge>\n                </div>\n              </div>\n            </Feed.Item>\n\n            {/* Comment */}\n            <Feed.Item\n              icon={\n                <ChatBubbleLeftEllipsisIcon className=\"size-5 text-[var(--color-primary)]\" />\n              }\n              indicatorClassName=\"bg-[var(--color-primary-50)]\"\n              timestamp=\"4h ago\"\n            >\n              <div className=\"text-sm\">\n                <div className=\"flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                  <Avatar src={avatars.alex} name=\"Alex Rivera\" size=\"xs\" />\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    Alex Rivera\n                  </span>\n                  commented on\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    PR #245\n                  </span>\n                </div>\n                <div className=\"mt-2 bg-[var(--color-background)] p-2.5 rounded-md border border-[var(--color-border)]\">\n                  <p className=\"text-sm text-[var(--color-text-secondary)] italic\">\n                    \"The new chart API is much cleaner. Let's ship it after we\n                    add the missing tooltip tests.\"\n                  </p>\n                </div>\n              </div>\n            </Feed.Item>\n          </Feed>\n\n          {/* Date section: Yesterday */}\n          <div className=\"flex items-center gap-3 my-6\">\n            <span className=\"text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider\">\n              Yesterday\n            </span>\n            <Separator className=\"flex-1\" />\n          </div>\n\n          <Feed>\n            {/* Release */}\n            <Feed.Item\n              icon={<TagIcon className=\"size-5 text-[var(--color-primary)]\" />}\n              indicatorClassName=\"bg-[var(--color-primary-50)]\"\n              timestamp=\"1d ago\"\n            >\n              <div className=\"text-sm\">\n                <div className=\"flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                  <Avatar src={avatars.alex} name=\"Alex Rivera\" size=\"xs\" />\n                  <span className=\"font-medium text-[var(--color-text-primary)]\">\n                    Alex Rivera\n                  </span>\n                  created release\n                  <Badge color=\"primary\" variant=\"soft\" size=\"sm\">\n                    v2.4.1\n                  </Badge>\n                  with 8 bug fixes and 3 improvements\n                </div>\n                <div className=\"mt-2 bg-[var(--color-background)] p-2 rounded-md border border-[var(--color-border)] flex items-center gap-3\">\n                  <Icon icon=\"pdf\" size=\"lg\" />\n                  <div>\n                    <p className=\"font-medium text-[var(--color-text-primary)] text-sm\">\n                      CHANGELOG-v2.4.1.pdf\n                    </p>\n                    <p className=\"text-xs text-[var(--color-text-muted)]\">\n                      148 KB\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </Feed.Item>\n\n            {/* Revert */}\n            <Feed.Item\n              icon={\n                <ArrowPathIcon className=\"size-5 text-[var(--color-warning)]\" />\n              }\n              indicatorClassName=\"bg-[var(--color-warning-50)]\"\n              timestamp=\"1d ago\"\n            >\n              <div className=\"text-sm flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                <Avatar src={avatars.james} name=\"James Wilson\" size=\"xs\" />\n                <span className=\"font-medium text-[var(--color-text-primary)]\">\n                  James Wilson\n                </span>\n                reverted commit\n                <span className=\"font-mono text-xs text-[var(--color-text-muted)]\">\n                  a3f8c21\n                </span>\n                due to CI failure\n              </div>\n            </Feed.Item>\n\n            {/* Assignment */}\n            <Feed.Item\n              icon={\n                <UserPlusIcon className=\"size-5 text-[var(--color-primary)]\" />\n              }\n              indicatorClassName=\"bg-[var(--color-primary-50)]\"\n              timestamp=\"1d ago\"\n            >\n              <div className=\"text-sm flex items-center flex-wrap gap-1.5 text-[var(--color-text-secondary)]\">\n                <Avatar src={avatars.sarah} name=\"Sarah Chen\" size=\"xs\" />\n                <span className=\"font-medium text-[var(--color-text-primary)]\">\n                  Sarah Chen\n                </span>\n                assigned\n                <Avatar src={avatars.david} name=\"David Kim\" size=\"xs\" />\n                <span className=\"font-medium text-[var(--color-text-primary)]\">\n                  David Kim\n                </span>\n                to issue\n                <span className=\"font-medium text-[var(--color-text-primary)]\">\n                  #318\n                </span>\n              </div>\n            </Feed.Item>\n          </Feed>\n\n          {/* Load more */}\n          <div className=\"text-center pt-6\">\n            <Button variant=\"outline\" color=\"mono\" size=\"sm\">\n              Load More Activity\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport const Default: Story = {\n  render: () => <ActivityPage />,\n  parameters: {\n    controls: { disable: true },\n  },\n};"
     },
     {
       "name": "AIAssistantLayout",
       "title": "Blocks/AIAssistantLayout",
-      "description": "Full-page composition using AIOrb, Badge, Button, CodeBlock, ….",
+      "description": "Full-page composition using AIOrb, Badge, Button, Card, ….",
       "componentsUsed": [
         "AIOrb",
         "Badge",
         "Button",
+        "Card",
         "CodeBlock",
         "DotPattern",
+        "Drawer",
         "GlassSurface",
         "Message",
         "ProgressiveBlur",
         "PromptInput",
+        "Reasoning",
+        "SourceCitation",
         "Table"
       ],
-      "source": "import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Badge, Button, Message } from \"../../components/core\";\nimport {\n  PromptInput,\n  CodeBlock,\n} from \"../../components/ai\";\nimport { ArchiveBoxIcon, ArrowUpRightIcon } from \"@heroicons/react/24/outline\";\nimport {\n  DotPattern,\n  GlassSurface,\n  ProgressiveBlur,\n} from \"../../components/effects\";\nimport { AIOrb } from \"../../components/effects/AIOrb\";\n\nconst meta: Meta = {\n  title: \"Blocks/AIAssistantLayout\",\n  parameters: { layout: \"fullscreen\" },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\n// --- Message content blocks ---\n\nconst assistantAvatar = { name: \"AI\", fallback: \"AI\" as React.ReactNode };\nconst userAvatar = {\n  src: \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face\",\n  name: \"Sarah Chen\",\n};\n\nconst message2Content = (\n  <div className=\"space-y-4\">\n    <p>\n      Great question! A dual API pattern lets users choose between\n      simplicity and flexibility. Here&apos;s the approach:\n    </p>\n    <p>\n      <strong>1. Simple prop-based API</strong> — Pass data and columns as\n      props:\n    </p>\n    <CodeBlock\n      language=\"tsx\"\n      code={`<Table data={users} columns={columns} rowKey=\"id\" />`}\n    />\n    <p>\n      <strong>2. Compound component API</strong> — Full composition control:\n    </p>\n    <CodeBlock\n      language=\"tsx\"\n      code={`<Table>\n  <Table.Header>\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Email</Table.HeaderCell>\n    </Table.Row>\n  </Table.Header>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Sarah Chen</Table.Cell>\n      <Table.Cell>sarah@company.com</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>`}\n    />\n    <p>\n      The key is to detect which API the user is using inside the root{\" \"}\n      <code>Table</code> component. If <code>data</code> and{\" \"}\n      <code>columns</code> props are provided, render automatically.\n      Otherwise, render <code>children</code>.\n    </p>\n  </div>\n);\n\nconst message4Content = (\n  <div className=\"space-y-4\">\n    <p>Here&apos;s the detection pattern:</p>\n    <CodeBlock\n      language=\"tsx\"\n      code={`const Table = ({ data, columns, children, ...props }) => {\n  const isSimpleAPI = data !== undefined && columns !== undefined;\n\n  if (isSimpleAPI) {\n    return (\n      <table {...props}>\n        <thead>\n          <tr>\n            {columns.map(col => (\n              <th key={col.id}>{col.header}</th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map(row => (\n            <tr key={row[rowKey]}>\n              {columns.map(col => (\n                <td key={col.id}>\n                  {col.cell ? col.cell(row) : row[col.accessor]}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    );\n  }\n\n  // Compound API — render children as-is\n  return <table {...props}>{children}</table>;\n};`}\n    />\n    <p>\n      This pattern is clean and backwards-compatible. The compound\n      sub-components (<code>Table.Header</code>, <code>Table.Body</code>,\n      etc.) are assigned as static properties on the <code>Table</code>{\" \"}\n      component.\n    </p>\n  </div>\n);\n\n// --- Models ---\n\nconst models = [\n  { key: \"claude-4\", label: \"Claude 4 Opus\", description: \"Most capable\" },\n  {\n    key: \"claude-4-sonnet\",\n    label: \"Claude 4 Sonnet\",\n    description: \"Fast & smart\",\n  },\n  { key: \"claude-4-haiku\", label: \"Claude 4 Haiku\", description: \"Fastest\" },\n];\n\nexport const Default: Story = {\n  render: () => (\n    <div className=\"h-[100dvh] relative overflow-hidden bg-white dark:bg-[var(--color-background)] flex flex-col\">\n      <DotPattern spacing={24} dotSize={1.5} fade fadeSize={100} />\n\n      {/* Header */}\n      <div className=\"relative z-10 flex items-center justify-between px-3 sm:px-6 py-3 sm:py-4 border-b border-[var(--color-border)]/60\">\n        <div className=\"flex items-center gap-2 sm:gap-3 min-w-0\">\n          <div className=\"size-2 shrink-0 rounded-full bg-[var(--color-primary)]\" />\n          <h1 className=\"font-semibold text-sm sm:text-base text-[var(--color-text-primary)] truncate\">\n            Refactor Table component\n          </h1>\n          <Badge color=\"neutral\" variant=\"soft\" size=\"xs\" className=\"hidden sm:inline-flex\">\n            4 messages\n          </Badge>\n        </div>\n        <Button variant=\"soft\" color=\"neutral\" size=\"sm\" iconOnly className=\"shrink-0\">\n          <ArchiveBoxIcon className=\"size-4\" />\n        </Button>\n      </div>\n\n      {/* Messages */}\n      <div className=\"relative z-10 flex-1 overflow-hidden\">\n        <Message.List\n          className=\"h-full\"\n          theme={{\n            innerStyle:\n              \"flex flex-col gap-8 sm:gap-12 p-3 sm:p-6 max-w-3xl mx-auto w-full\",\n          }}\n        >\n          <Message\n            key=\"1\"\n            role=\"user\"\n            content=\"How do I refactor the Table component to support both a simple prop-based API and a compound component API?\"\n            timestamp=\"10:24 AM\"\n            avatar={userAvatar}\n            onCopy={() => {}}\n          />\n          <Message\n            key=\"2\"\n            role=\"assistant\"\n            content={message2Content}\n            timestamp=\"10:25 AM\"\n            avatar={assistantAvatar}\n            onCopy={() => {}}\n            onRegenerate={() => {}}\n          />\n          <Message\n            key=\"3\"\n            role=\"user\"\n            content=\"Can you show me how to detect which API is being used in the component?\"\n            timestamp=\"10:26 AM\"\n            avatar={userAvatar}\n            onCopy={() => {}}\n          />\n          <Message\n            key=\"4\"\n            role=\"assistant\"\n            content={message4Content}\n            timestamp=\"10:27 AM\"\n            avatar={assistantAvatar}\n            onCopy={() => {}}\n            onRegenerate={() => {}}\n          />\n        </Message.List>\n        <ProgressiveBlur\n          position=\"bottom\"\n          size=\"80px\"\n          blurIntensity={6}\n          className=\"bottom-0\"\n          style={{ marginBottom: -1 }}\n        />\n      </div>\n\n      {/* Input zone */}\n      <div className=\"relative z-10 px-3 py-2 sm:p-4\">\n        <div className=\"max-w-3xl mx-auto\">\n          <PromptInput\n            placeholder=\"Ask a follow-up question...\"\n            models={models}\n            defaultSelectedModel=\"claude-4\"\n            showAttachmentButton\n            showVoiceButton={false}\n            showSettingsButton={false}\n            onSubmit={() => {}}\n            className=\"min-w-0\"\n          />\n        </div>\n      </div>\n    </div>\n  ),\n  parameters: {\n    controls: { disable: true },\n  },\n};\n\nconst suggestionCards = [\n  {\n    title: \"Marketing Insights\",\n    description:\n      \"Discover the best marketing strategies to showcase your properties.\",\n  },\n  {\n    title: \"Negotiation Tactics\",\n    description: \"Learn expert negotiation tips to close deals effectively.\",\n  },\n  {\n    title: \"Sales Strategies\",\n    description:\n      \"Get tailored advice on increasing property visibility and driving sales.\",\n  },\n];\n\nexport const Empty: Story = {\n  render: () => (\n    <div className=\"h-[100dvh] relative overflow-hidden bg-white dark:bg-[var(--color-background)] flex flex-col\">\n      <DotPattern\n        spacing={24}\n        dotSize={1.5}\n        fade\n        fadeSize={100}\n      />\n\n      {/* Centered hero content */}\n      <div className=\"relative z-10 flex-1 flex flex-col items-center justify-center px-4 sm:px-6\">\n        <div className=\"mb-4 sm:mb-6\">\n          <AIOrb\n            size={100}\n            backgroundColor=\"transparent\"\n            className=\"rounded-full sm:hidden\"\n          >\n            <AIOrb.DotSphere />\n          </AIOrb>\n          <AIOrb\n            size={140}\n            backgroundColor=\"transparent\"\n            className=\"rounded-full hidden sm:block\"\n          >\n            <AIOrb.DotSphere />\n          </AIOrb>\n        </div>\n\n        <h1 className=\"text-2xl sm:text-4xl lg:text-5xl font-bold text-[var(--color-text-primary)] tracking-tight text-center\">\n          How can we <span className=\"text-[var(--color-primary)]\">assist</span>{\" \"}\n          you today?\n        </h1>\n\n        <p className=\"text-[var(--color-text-muted)] mt-2 sm:mt-3 max-w-lg text-center text-sm sm:text-base px-2\">\n          Your AI-powered companion for real estate insights, strategies, and\n          expert guidance — available around the clock.\n        </p>\n\n        {/* Suggestion cards */}\n        <div className=\"relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 mt-6 sm:mt-10 w-full max-w-4xl\">\n          {suggestionCards.map((card) => (\n            <GlassSurface\n              key={card.title}\n              borderRadius={24}\n              borderWidth={1.5}\n              redOffset={0}\n              greenOffset={15}\n              blueOffset={35}\n              className=\"h-full\"\n            >\n              <button\n                type=\"button\"\n                className=\"group relative flex flex-col items-start text-left rounded-[24px] bg-white/10 dark:bg-[var(--color-background-secondary)]/60 backdrop-blur-md p-4 sm:p-5 transition-all duration-300 cursor-pointer w-full h-full hover:bg-[var(--color-background-secondary)]/10 hover:ring-2 hover:ring-[var(--color-border)]\"\n              >\n                <ArrowUpRightIcon className=\"size-4 sm:size-5 text-[var(--color-text-muted)] absolute top-3 right-3 sm:top-4 sm:right-4 transition-all duration-300 group-hover:text-[var(--color-text-primary)]\" />\n                <h3 className=\"font-medium text-[var(--color-text-primary)] text-base sm:text-lg pr-6\">\n                  {card.title}\n                </h3>\n                <p className=\"text-[var(--color-text-muted)] text-sm sm:text-base mt-1 sm:mt-2\">\n                  {card.description}\n                </p>\n              </button>\n            </GlassSurface>\n          ))}\n        </div>\n      </div>\n\n      {/* PromptInput at bottom */}\n      <div className=\"relative z-10 px-3 py-2 sm:p-4 lg:p-6\">\n        <div className=\"max-w-4xl mx-auto\">\n          <PromptInput\n            placeholder=\"Type your prompt here\"\n            showAttachmentButton\n            showVoiceButton\n            showModelSelector={false}\n            showSettingsButton={false}\n            onSubmit={() => {}}\n          />\n        </div>\n      </div>\n    </div>\n  ),\n  parameters: {\n    controls: { disable: true },\n  },\n};"
+      "source": "import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Badge, Button, Card, Drawer, Message } from \"../../components/core\";\nimport {\n  PromptInput,\n  CodeBlock,\n  Reasoning,\n  SourceCitation,\n  SourceCitationGroup,\n} from \"../../components/ai\";\nimport { Archive as ArchiveBoxIcon, ArrowUpRight as ArrowUpRightIcon, CodeBlock as CodeBracketSquareIcon } from \"@phosphor-icons/react\";\nimport {\n  DotPattern,\n  GlassSurface,\n  ProgressiveBlur,\n} from \"../../components/effects\";\nimport { AIOrb } from \"../../components/effects/AIOrb\";\n\nconst meta: Meta = {\n  title: \"Blocks/AIAssistantLayout\",\n  parameters: { layout: \"fullscreen\" },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\n// --- Message content blocks ---\n\nconst assistantAvatar = { name: \"AI\", fallback: \"AI\" as React.ReactNode };\nconst userAvatar = {\n  src: \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face\",\n  name: \"Sarah Chen\",\n};\n\nconst message2Content = (\n  <div className=\"space-y-4\">\n    <p>\n      Great question! A dual API pattern lets users choose between\n      simplicity and flexibility. Here&apos;s the approach:\n    </p>\n    <p>\n      <strong>1. Simple prop-based API</strong> — Pass data and columns as\n      props:\n    </p>\n    <CodeBlock\n      language=\"tsx\"\n      code={`<Table data={users} columns={columns} rowKey=\"id\" />`}\n    />\n    <p>\n      <strong>2. Compound component API</strong> — Full composition control:\n    </p>\n    <CodeBlock\n      language=\"tsx\"\n      code={`<Table>\n  <Table.Header>\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Email</Table.HeaderCell>\n    </Table.Row>\n  </Table.Header>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Sarah Chen</Table.Cell>\n      <Table.Cell>sarah@company.com</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>`}\n    />\n    <p>\n      The key is to detect which API the user is using inside the root{\" \"}\n      <code>Table</code> component. If <code>data</code> and{\" \"}\n      <code>columns</code> props are provided, render automatically.\n      Otherwise, render <code>children</code>.\n    </p>\n  </div>\n);\n\nconst artifactCode = `const Table = ({ data, columns, children, ...props }) => {\n  const isSimpleAPI = data !== undefined && columns !== undefined;\n\n  if (isSimpleAPI) {\n    return <GeneratedTable data={data} columns={columns} {...props} />;\n  }\n\n  return <table {...props}>{children}</table>;\n};`;\n\nconst createMessage4Content = (onOpenArtifact: () => void) => (\n  <div className=\"space-y-4\">\n    <Reasoning\n      label=\"Thought\"\n      status=\"complete\"\n      duration={4}\n      steps={[\n        { label: \"Reviewed the existing Table API\", status: \"complete\", duration: 1 },\n        { label: \"Compared prop-based and compound patterns\", status: \"complete\", duration: 2 },\n        { label: \"Prepared a backwards-compatible implementation\", status: \"complete\", duration: 1 },\n      ]}\n    />\n    <p>Here&apos;s the detection pattern:</p>\n    <CodeBlock\n      language=\"tsx\"\n      code={`const Table = ({ data, columns, children, ...props }) => {\n  const isSimpleAPI = data !== undefined && columns !== undefined;\n\n  if (isSimpleAPI) {\n    return (\n      <table {...props}>\n        <thead>\n          <tr>\n            {columns.map(col => (\n              <th key={col.id}>{col.header}</th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map(row => (\n            <tr key={row[rowKey]}>\n              {columns.map(col => (\n                <td key={col.id}>\n                  {col.cell ? col.cell(row) : row[col.accessor]}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    );\n  }\n\n  // Compound API — render children as-is\n  return <table {...props}>{children}</table>;\n};`}\n    />\n    <p>\n      This pattern is clean and backwards-compatible. The compound\n      sub-components (<code>Table.Header</code>, <code>Table.Body</code>,\n      etc.) are assigned as static properties on the <code>Table</code>{\" \"}\n      component.\n    </p>\n    <SourceCitationGroup>\n      <SourceCitation\n        index={1}\n        title=\"Thinking in React\"\n        domain=\"react.dev\"\n        excerpt=\"A practical guide to decomposing an interface into reusable component boundaries.\"\n        href=\"https://react.dev/learn/thinking-in-react\"\n      />\n      <SourceCitation\n        index={2}\n        title=\"WAI-ARIA Authoring Practices\"\n        domain=\"w3.org\"\n        excerpt=\"Accessible interaction patterns for reusable web components.\"\n        href=\"https://www.w3.org/WAI/ARIA/apg/\"\n      />\n    </SourceCitationGroup>\n    <Button\n      variant=\"soft\"\n      color=\"mono\"\n      size=\"sm\"\n      onClick={onOpenArtifact}\n    >\n      <CodeBracketSquareIcon className=\"size-4\" />\n      Open generated artifact\n    </Button>\n  </div>\n);\n\n// --- Models ---\n\nconst models = [\n  { key: \"claude-4\", label: \"Claude 4 Opus\", description: \"Most capable\" },\n  {\n    key: \"claude-4-sonnet\",\n    label: \"Claude 4 Sonnet\",\n    description: \"Fast & smart\",\n  },\n  { key: \"claude-4-haiku\", label: \"Claude 4 Haiku\", description: \"Fastest\" },\n];\n\nconst AIAssistantDefault = () => {\n  const [artifactOpen, setArtifactOpen] = useState(false);\n\n  return (\n    <>\n    <div\n      data-flik-drawer-wrapper\n      className=\"h-[100dvh] relative overflow-hidden bg-white dark:bg-[var(--color-background)] flex flex-col\"\n    >\n      <DotPattern spacing={24} dotSize={1.5} fade fadeSize={100} />\n\n      {/* Header */}\n      <div className=\"relative z-10 flex items-center justify-between px-3 sm:px-6 py-3 sm:py-4 border-b border-[var(--color-border)]/60\">\n        <div className=\"flex items-center gap-2 sm:gap-3 min-w-0\">\n          <div className=\"size-2 shrink-0 rounded-full bg-[var(--color-primary)]\" />\n          <h1 className=\"font-semibold text-sm sm:text-base text-[var(--color-text-primary)] truncate\">\n            Refactor Table component\n          </h1>\n          <Badge color=\"mono\" variant=\"soft\" size=\"xs\" className=\"hidden sm:inline-flex\">\n            4 messages\n          </Badge>\n        </div>\n        <Button variant=\"soft\" color=\"mono\" size=\"sm\" iconOnly className=\"shrink-0\">\n          <ArchiveBoxIcon className=\"size-4\" />\n        </Button>\n      </div>\n\n      {/* Messages */}\n      <div className=\"relative z-10 flex-1 overflow-hidden\">\n        <Message.List\n          className=\"h-full\"\n          theme={{\n            innerStyle:\n              \"flex flex-col gap-8 sm:gap-12 p-3 sm:p-6 max-w-3xl mx-auto w-full\",\n          }}\n        >\n          <Message\n            key=\"1\"\n            role=\"user\"\n            content=\"How do I refactor the Table component to support both a simple prop-based API and a compound component API?\"\n            timestamp=\"10:24 AM\"\n            avatar={userAvatar}\n            onCopy={() => {}}\n          />\n          <Message\n            key=\"2\"\n            role=\"assistant\"\n            content={message2Content}\n            timestamp=\"10:25 AM\"\n            avatar={assistantAvatar}\n            onCopy={() => {}}\n            onRegenerate={() => {}}\n          />\n          <Message\n            key=\"3\"\n            role=\"user\"\n            content=\"Can you show me how to detect which API is being used in the component?\"\n            timestamp=\"10:26 AM\"\n            avatar={userAvatar}\n            onCopy={() => {}}\n          />\n          <Message\n            key=\"4\"\n            role=\"assistant\"\n            content={createMessage4Content(() => setArtifactOpen(true))}\n            timestamp=\"10:27 AM\"\n            avatar={assistantAvatar}\n            onCopy={() => {}}\n            onRegenerate={() => {}}\n          />\n        </Message.List>\n        <ProgressiveBlur\n          position=\"bottom\"\n          size=\"80px\"\n          blurIntensity={6}\n          className=\"bottom-0\"\n          style={{ marginBottom: -1 }}\n        />\n      </div>\n\n      {/* Input zone */}\n      <div className=\"relative z-10 px-3 py-2 sm:p-4\">\n        <div className=\"max-w-3xl mx-auto\">\n          <PromptInput\n            placeholder=\"Ask a follow-up question...\"\n            models={models}\n            defaultSelectedModel=\"claude-4\"\n            showAttachmentButton\n            showVoiceButton={false}\n            showSettingsButton={false}\n            onSubmit={() => {}}\n            className=\"min-w-0\"\n          />\n        </div>\n      </div>\n    </div>\n    <Drawer\n      isOpen={artifactOpen}\n      onClose={() => setArtifactOpen(false)}\n      title=\"Generated artifact\"\n      subtitle=\"Review the complete implementation\"\n      position=\"right\"\n      size=\"lg\"\n    >\n      <Drawer.Body>\n        {/* An \"artifact\" surface is just a Card wrapping a CodeBlock. The Card\n            header names the file, so CodeBlock omits `filename` and its own\n            header carries only the language label and copy button. */}\n        <Card\n          title=\"Table.tsx\"\n          subtitle=\"Backwards-compatible dual API\"\n          actions={<Badge color=\"mono\" variant=\"soft\">v1</Badge>}\n        >\n          <CodeBlock language=\"tsx\">{artifactCode}</CodeBlock>\n        </Card>\n      </Drawer.Body>\n      <Drawer.Footer>\n        <Button\n          variant=\"ghost\"\n          color=\"mono\"\n          onClick={() => setArtifactOpen(false)}\n        >\n          Close\n        </Button>\n        <Button onClick={() => setArtifactOpen(false)}>Accept artifact</Button>\n      </Drawer.Footer>\n    </Drawer>\n    </>\n  );\n};\n\nexport const Default: Story = {\n  render: () => <AIAssistantDefault />,\n  parameters: {\n    controls: { disable: true },\n  },\n};\n\nconst suggestionCards = [\n  {\n    title: \"Marketing Insights\",\n    description:\n      \"Discover the best marketing strategies to showcase your properties.\",\n  },\n  {\n    title: \"Negotiation Tactics\",\n    description: \"Learn expert negotiation tips to close deals effectively.\",\n  },\n  {\n    title: \"Sales Strategies\",\n    description:\n      \"Get tailored advice on increasing property visibility and driving sales.\",\n  },\n];\n\nexport const Empty: Story = {\n  render: () => (\n    <div className=\"h-[100dvh] relative overflow-hidden bg-white dark:bg-[var(--color-background)] flex flex-col\">\n      <DotPattern\n        spacing={24}\n        dotSize={1.5}\n        fade\n        fadeSize={100}\n      />\n\n      {/* Centered hero content */}\n      <div className=\"relative z-10 flex-1 flex flex-col items-center justify-center px-4 sm:px-6\">\n        <div className=\"mb-4 sm:mb-6\">\n          <AIOrb\n            size={100}\n            backgroundColor=\"transparent\"\n            className=\"rounded-full sm:hidden\"\n          >\n            <AIOrb.DotSphere />\n          </AIOrb>\n          <AIOrb\n            size={140}\n            backgroundColor=\"transparent\"\n            className=\"rounded-full hidden sm:block\"\n          >\n            <AIOrb.DotSphere />\n          </AIOrb>\n        </div>\n\n        <h1 className=\"text-2xl sm:text-4xl lg:text-5xl font-bold text-[var(--color-text-primary)] tracking-tight text-center\">\n          How can we <span className=\"text-[var(--color-primary)]\">assist</span>{\" \"}\n          you today?\n        </h1>\n\n        <p className=\"text-[var(--color-text-muted)] mt-2 sm:mt-3 max-w-lg text-center text-sm sm:text-base px-2\">\n          Your AI-powered companion for real estate insights, strategies, and\n          expert guidance — available around the clock.\n        </p>\n\n        {/* Suggestion cards */}\n        <div className=\"relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 mt-6 sm:mt-10 w-full max-w-4xl\">\n          {suggestionCards.map((card) => (\n            <GlassSurface\n              key={card.title}\n              borderRadius={24}\n              borderWidth={1.5}\n              redOffset={0}\n              greenOffset={15}\n              blueOffset={35}\n              className=\"h-full\"\n            >\n              <button\n                type=\"button\"\n                className=\"group relative flex flex-col items-start text-left rounded-[24px] bg-white/10 dark:bg-[var(--color-background-secondary)]/60 backdrop-blur-md p-4 sm:p-5 transition-all duration-300 cursor-pointer w-full h-full hover:bg-[var(--color-background-secondary)]/10 hover:ring-2 hover:ring-[var(--color-border)]\"\n              >\n                <ArrowUpRightIcon className=\"size-4 sm:size-5 text-[var(--color-text-muted)] absolute top-3 right-3 sm:top-4 sm:right-4 transition-all duration-300 group-hover:text-[var(--color-text-primary)]\" />\n                <h3 className=\"font-medium text-[var(--color-text-primary)] text-base sm:text-lg pr-6\">\n                  {card.title}\n                </h3>\n                <p className=\"text-[var(--color-text-muted)] text-sm sm:text-base mt-1 sm:mt-2\">\n                  {card.description}\n                </p>\n              </button>\n            </GlassSurface>\n          ))}\n        </div>\n      </div>\n\n      {/* PromptInput at bottom */}\n      <div className=\"relative z-10 px-3 py-2 sm:p-4 lg:p-6\">\n        <div className=\"max-w-4xl mx-auto\">\n          <PromptInput\n            placeholder=\"Type your prompt here\"\n            showAttachmentButton\n            showVoiceButton\n            showModelSelector={false}\n            showSettingsButton={false}\n            onSubmit={() => {}}\n          />\n        </div>\n      </div>\n    </div>\n  ),\n  parameters: {\n    controls: { disable: true },\n  },\n};"
+    },
+    {
+      "name": "AnalyticsHeroLayout",
+      "title": "Blocks/AnalyticsHeroLayout",
+      "description": "Full-page composition using BarChart, Button, HeroCard.",
+      "componentsUsed": [
+        "BarChart",
+        "Button",
+        "HeroCard"
+      ],
+      "source": "import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Button, HeroCard } from \"../../components/core\";\nimport { BarChart } from \"../../components/charts\";\n\nconst meta: Meta = {\n  title: \"Blocks/AnalyticsHeroLayout\",\n  parameters: {\n    layout: \"fullscreen\",\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = {\n  render: () => (\n    <div className=\"p-10\">\n      <HeroCard\n        image=\"/bg/4.webp\"\n        imageOpacity={0.2}\n        imageBlend=\"hard-light\"\n        parallax\n        className=\"h-[460px] max-w-6xl from-teal-600 via-indigo-800 to-indigo-900 p-0\"\n        contentClassName=\"h-full\"\n      >\n        <div className=\"grid h-full grid-cols-2 gap-10\">\n          <div className=\"flex h-full flex-col justify-between p-14\">\n            <div>\n              <p className=\"text-3xl font-medium tracking-tight text-white/60\">\n                You have <span className=\"font-semibold text-white\">completed 5 topics</span> in Physics, with an{\" \"}\n                <span className=\"font-semibold text-white\">average score of 85%</span>. Best topic so far has been{\" \"}\n                <span className=\"font-semibold text-white\">Electricity</span>.\n              </p>\n              <p className=\"mt-6 text-white/70\">You're progressing well in Physics — above the class average of 80%.</p>\n            </div>\n            <Button color=\"mono\" variant=\"soft\" className=\"self-start\">\n              Learn more\n            </Button>\n          </div>\n          <div className=\"mr-4\">\n            <BarChart\n              height={\"100%\"}\n              data={[\n                { name: \"Kinematics\", score: 64 },\n                { name: \"Forces\", score: 72 },\n                { name: \"Energy\", score: 88 },\n                { name: \"Waves\", score: 93 },\n                { name: \"Electricity\", score: 84 },\n              ]}\n              config={{ score: { label: \"Physics Score\", color: \"sky-400\" } }}\n              variant=\"minimal\"\n              showGrid={false}\n              showYAxis={false}\n              showXAxis={false}\n              darkMode\n            />\n          </div>\n        </div>\n      </HeroCard>\n    </div>\n  ),\n};"
     },
     {
       "name": "AuthLayout",
@@ -11041,7 +11536,31 @@
         "Segmented",
         "Separator"
       ],
-      "source": "import { Avatar, AvatarGroup, Button, Link, Separator, Icon } from \"@flikk/ui\";\nimport { Checkbox, Input } from \"@flikk/ui\";\nimport { StarIcon } from \"@heroicons/react/24/solid\";\n\n<div className=\"w-full min-h-screen bg-[var(--color-surface)] grid grid-cols-1 lg:grid-cols-2\">\n  {/* Left — hero panel */}\n  <div className=\"hidden lg:flex bg-[var(--color-primary-700)] text-white h-full rounded-4xl p-8 xl:p-16 bg-image bg-image-4 bg-image-blur-lg bg-image-scale-125\">\n    <div className=\"relative z-10 flex flex-col h-full\">\n      <div className=\"font-semibold text-sm bg-white/10 backdrop-blur-sm p-1 px-3 rounded-full w-fit flex items-center gap-1.5 text-white/80\">\n        <StarIcon className=\"size-3.5 text-yellow-300\" />\n        Trusted by 10,000+ developers\n      </div>\n      <div className=\"w-3/4\">\n        <div className=\"font-normal text-5xl xl:text-8xl mt-6 tracking-tight leading-[0.9em]\">\n          Build beautiful interfaces in{\" \"}\n          <span className=\"italic text-[var(--color-warning-400)] font-cursive\">\n            half the time\n          </span>\n        </div>\n        <div className=\"text-xl mt-4 opacity-80 leading-relaxed\">\n          Production-ready React components with built-in accessibility,\n          theming, and animations. Ship faster without sacrificing quality.\n        </div>\n      </div>\n\n      <div className=\"mt-auto space-y-6\">\n        <div className=\"bg-white/10 backdrop-blur-sm rounded-2xl p-6 space-y-4\">\n          <p className=\"text-base leading-relaxed opacity-90\">\n            \"Flikkui cut our development time by 40%. The components are\n            polished, accessible, and just work out of the box.\"\n          </p>\n          <div className=\"flex items-center gap-3\">\n            <Avatar name=\"Sarah Chen\" size=\"sm\" src=\"...\" />\n            <div>\n              <div className=\"font-medium text-sm\">Sarah Chen</div>\n              <div className=\"text-xs opacity-70\">Engineering Lead, Vercel</div>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between text-sm\">\n          <div className=\"flex items-center gap-3\">\n            <AvatarGroup max={4} size=\"sm\" avatars={[\n              { name: \"James W\", src: \"...\" },\n              { name: \"Emily R\", src: \"...\" },\n              { name: \"David K\", src: \"...\" },\n            ]} />\n            <span>2,400+ stars on GitHub</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  {/* Right — sign-up form */}\n  <div className=\"flex items-center justify-center min-h-screen lg:min-h-0 lg:h-full px-6 sm:px-8 lg:px-0 py-10 lg:py-0\">\n    <div className=\"w-full max-w-sm space-y-6\">\n      <div>\n        <div className=\"text-2xl font-bold text-[var(--color-text-primary)]\">Get Started Now</div>\n        <div className=\"text-base text-[var(--color-text-muted)] mt-1\">\n          Start building for free. No credit card required.\n        </div>\n      </div>\n\n      <div className=\"space-y-3\">\n        <Input label=\"Full name\" placeholder=\"Sarah Chen\" />\n        <Input label=\"Work email\" placeholder=\"sarah@company.com\" type=\"email\" />\n        <Input label=\"Password\" placeholder=\"Min. 8 characters\" type=\"password\" />\n        <div className=\"flex items-center gap-2\">\n          <Checkbox id=\"terms\" name=\"terms\" value=\"\" size=\"sm\" />\n          <span className=\"text-[var(--color-text-muted)] text-xs mt-0.5\">\n            I agree to the <Link className=\"text-[var(--color-text-muted)] underline\">Terms of Service</Link>\n            {\" \"}and <Link className=\"text-[var(--color-text-muted)] underline\">Privacy Policy</Link>\n          </span>\n        </div>\n\n        <div className=\"mt-6 space-y-3\">\n          <Button className=\"w-full\">Get Started</Button>\n          <div className=\"text-center text-sm text-[var(--color-text-muted)]\">\n            Already have an account? <Link>Sign in</Link>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center gap-2\">\n          <Separator />\n          <div className=\"text-xs font-medium text-[var(--color-text-muted)]/60 min-w-fit\">OR</div>\n          <Separator />\n        </div>\n        <div className=\"flex items-center justify-center gap-2\">\n          <Button variant=\"outline\" color=\"neutral\" iconOnly>\n            <Icon icon=\"google\" size=\"sm\" />\n          </Button>\n          <Button variant=\"outline\" color=\"neutral\" iconOnly>\n            <Icon icon=\"github\" size=\"sm\" colorMode=\"mono\" />\n          </Button>\n          <Button variant=\"outline\" color=\"neutral\" iconOnly>\n            <Icon icon=\"apple\" size=\"sm\" colorMode=\"mono\" />\n          </Button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>"
+      "source": "import { Avatar, AvatarGroup, Button, Link, Separator, Icon } from \"@flikk/ui\";\nimport { Checkbox, Input } from \"@flikk/ui\";\n\n<div className=\"w-full min-h-screen bg-[var(--color-surface)] grid grid-cols-1 lg:grid-cols-2\">\n  {/* Left — hero panel */}\n  <div className=\"hidden lg:flex bg-[var(--color-primary-700)] text-white h-full rounded-4xl p-8 xl:p-16 bg-image bg-image-4 bg-image-blur-lg bg-image-scale-125\">\n    <div className=\"relative z-10 flex flex-col h-full\">\n      <div className=\"font-semibold text-sm bg-white/10 backdrop-blur-sm p-1 px-3 rounded-full w-fit flex items-center gap-1.5 text-white/80\">\n        <StarIcon className=\"size-3.5 text-yellow-300\" />\n        Trusted by 10,000+ developers\n      </div>\n      <div className=\"w-3/4\">\n        <div className=\"font-normal text-5xl xl:text-8xl mt-6 tracking-tight leading-[0.9em]\">\n          Build beautiful interfaces in{\" \"}\n          <span className=\"italic text-[var(--color-warning-400)]\" style={{ fontFamily: '\"Birthstone\", cursive' }}>\n            half the time\n          </span>\n        </div>\n        <div className=\"text-xl mt-4 opacity-80 leading-relaxed\">\n          Production-ready React components with built-in accessibility,\n          theming, and animations. Ship faster without sacrificing quality.\n        </div>\n      </div>\n\n      <div className=\"mt-auto space-y-6\">\n        <div className=\"bg-white/10 backdrop-blur-sm rounded-2xl p-6 space-y-4\">\n          <p className=\"text-base leading-relaxed opacity-90\">\n            \"Flikkui cut our development time by 40%. The components are\n            polished, accessible, and just work out of the box.\"\n          </p>\n          <div className=\"flex items-center gap-3\">\n            <Avatar name=\"Sarah Chen\" size=\"sm\" src=\"...\" />\n            <div>\n              <div className=\"font-medium text-sm\">Sarah Chen</div>\n              <div className=\"text-xs opacity-70\">Engineering Lead, Vercel</div>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between text-sm\">\n          <div className=\"flex items-center gap-3\">\n            <AvatarGroup max={4} size=\"sm\" avatars={[\n              { name: \"James W\", src: \"...\" },\n              { name: \"Emily R\", src: \"...\" },\n              { name: \"David K\", src: \"...\" },\n            ]} />\n            <span>2,400+ stars on GitHub</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  {/* Right — sign-up form */}\n  <div className=\"flex items-center justify-center min-h-screen lg:min-h-0 lg:h-full px-6 sm:px-8 lg:px-0 py-10 lg:py-0\">\n    <div className=\"w-full max-w-sm space-y-6\">\n      <div>\n        <div className=\"text-2xl font-bold text-[var(--color-text-primary)]\">Get Started Now</div>\n        <div className=\"text-base text-[var(--color-text-muted)] mt-1\">\n          Start building for free. No credit card required.\n        </div>\n      </div>\n\n      <div className=\"space-y-3\">\n        <Input label=\"Full name\" placeholder=\"Sarah Chen\" />\n        <Input label=\"Work email\" placeholder=\"sarah@company.com\" type=\"email\" />\n        <Input label=\"Password\" placeholder=\"Min. 8 characters\" type=\"password\" />\n        <div className=\"flex items-center gap-2\">\n          <Checkbox id=\"terms\" name=\"terms\" value=\"\" size=\"sm\" />\n          <span className=\"text-[var(--color-text-muted)] text-xs mt-0.5\">\n            I agree to the <Link className=\"text-[var(--color-text-muted)] underline\">Terms of Service</Link>\n            {\" \"}and <Link className=\"text-[var(--color-text-muted)] underline\">Privacy Policy</Link>\n          </span>\n        </div>\n\n        <div className=\"mt-6 space-y-3\">\n          <Button className=\"w-full\">Get Started</Button>\n          <div className=\"text-center text-sm text-[var(--color-text-muted)]\">\n            Already have an account? <Link>Sign in</Link>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center gap-2\">\n          <Separator />\n          <div className=\"text-xs font-medium text-[var(--color-text-muted)]/60 min-w-fit\">OR</div>\n          <Separator />\n        </div>\n        <div className=\"flex items-center justify-center gap-2\">\n          <Button variant=\"outline\" color=\"mono\" iconOnly>\n            <Icon icon=\"google\" size=\"sm\" />\n          </Button>\n          <Button variant=\"outline\" color=\"mono\" iconOnly>\n            <Icon icon=\"github\" size=\"sm\" colorMode=\"mono\" />\n          </Button>\n          <Button variant=\"outline\" color=\"mono\" iconOnly>\n            <Icon icon=\"apple\" size=\"sm\" colorMode=\"mono\" />\n          </Button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>"
+    },
+    {
+      "name": "Dashboard",
+      "title": "Riverside loft renovation",
+      "description": "Full-page composition using AppShell, Avatar, Badge, Button, ….",
+      "componentsUsed": [
+        "AppShell",
+        "Avatar",
+        "Badge",
+        "Button",
+        "Card",
+        "DotPattern",
+        "Dropdown",
+        "GradientMesh",
+        "Grid",
+        "HeroCard",
+        "Input",
+        "Link",
+        "LollipopChart",
+        "Metric",
+        "Progress",
+        "Segmented"
+      ],
+      "source": "import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport {\n  Avatar,\n  Badge,\n  Button,\n  Card,\n  Dropdown,\n  HeroCard,\n  Link,\n  Progress,\n  Segmented,\n} from \"../../components/core\";\nimport { AppShell, Grid } from \"../../components/layout\";\nimport { Input } from \"../../components/forms\";\nimport { DotPattern, GradientMesh } from \"../../components/effects\";\nimport { ChartContainer, LollipopChart, MultiSegmentDonutChart } from \"../../components/charts\";\nimport type { DonutSegment } from \"../../components/charts\";\nimport {\n  Bell as BellIcon,\n  CaretDown as ChevronDownIcon,\n  CaretRight as ChevronRightIcon,\n  CheckCircle as CheckCircleIcon,\n  HouseLine as HomeModernIcon,\n  MagnifyingGlass as MagnifyingGlassIcon,\n  MapPin as MapPinIcon,\n  Plus as PlusIcon,\n  Sparkle as SparklesIcon,\n} from \"@phosphor-icons/react\";\nimport { Metric } from \"../../components/data-display\";\n\n// --- Mock data -------------------------------------------------------------\n// Niche: Atelier, a freelance marketplace for independent architects and\n// interior designers.\n\nconst weeklyEarnings = [\n  { name: \"Sunday\", earnings: 3200 },\n  { name: \"Monday\", earnings: 4650 },\n  { name: \"Tuesday\", earnings: 5980 },\n  { name: \"Wednesday\", earnings: 4200 },\n  { name: \"Thursday\", earnings: 5100 },\n  { name: \"Friday\", earnings: 4700 },\n  { name: \"Saturday\", earnings: 2900 },\n];\n\nconst earningsConfig = {\n  earnings: { label: \"Earnings\", color: \"var(--color-primary)\" },\n};\n\n// Commitment-type mix across active briefs, weighted by $/hour rate:\n// Contract = Riverside Loft Renovation ($120/hr), Full-time = Downtown Office\n// Fit-Out ($95/hr), Part-time = Coastal House Landscape Design ($85/hr).\nconst commitmentData: DonutSegment[] = [\n  { value: 120, percentage: 40, label: \"Contract\", color: \"var(--color-primary)\" },\n  { value: 95, percentage: 31.7, label: \"Full-time\", color: \"var(--color-success)\" },\n  { value: 85, percentage: 28.3, label: \"Part-time\", color: \"var(--color-warning)\" },\n];\n\ninterface Connection {\n  id: string;\n  name: string;\n  role: string;\n  level: \"Senior\" | \"Middle\";\n  avatarSrc: string;\n}\n\nconst connections: Connection[] = [\n  {\n    id: \"elena-voss\",\n    name: \"Elena Voss\",\n    role: \"Structural Engineer\",\n    level: \"Senior\",\n    avatarSrc: \"https://i.pravatar.cc/150?u=elena-voss\",\n  },\n  {\n    id: \"marcus-webb\",\n    name: \"Marcus Webb\",\n    role: \"Lighting Designer\",\n    level: \"Middle\",\n    avatarSrc: \"https://i.pravatar.cc/150?u=marcus-webb\",\n  },\n  {\n    id: \"naomi-chen\",\n    name: \"Naomi Chen\",\n    role: \"Material Consultant\",\n    level: \"Senior\",\n    avatarSrc: \"https://i.pravatar.cc/150?u=naomi-chen\",\n  },\n];\n\nconst proposalStats = [\n  { label: \"Briefs sent\", value: 48 },\n  { label: \"Interviews\", value: 9 },\n  { label: \"Commissions\", value: 6 },\n];\n\nconst pipelineStages = [\n  { label: \"Sent\", value: 48, progress: 82, color: \"bg-[var(--color-primary)]\" },\n  { label: \"Interview\", value: 9, progress: 46, color: \"bg-[var(--color-success)]\" },\n  { label: \"Won\", value: 6, progress: 34, color: \"bg-[var(--color-warning)]\" },\n];\n\nconst priorityBriefs = [\n  { title: \"Riverside loft renovation\", budget: \"$18.5k\", status: \"Interview\" },\n  { title: \"Boutique hotel lobby\", budget: \"$24k\", status: \"Proposal due\" },\n];\n\nconst navItems = [\n  { label: \"Home\", active: true },\n  { label: \"Briefs\", active: false },\n  { label: \"Portfolio\", active: false },\n  { label: \"Clients\", active: false },\n  { label: \"Messages\", active: false },\n];\n\n// --- Story -------------------------------------------------------------\n\nconst meta: Meta = {\n  title: \"Blocks/Dashboard\",\n  parameters: { layout: \"fullscreen\" },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = {\n  render: () => {\n    const [range, setRange] = useState(\"week\");\n\n    return (\n      <AppShell scroll=\"page\" topbarSpan=\"full\" contentWidth=\"full\" contentPadding=\"lg\">\n        <AppShell.Topbar className=\"border-b-0\">\n          <div className=\"flex min-h-16 flex-wrap items-center justify-between gap-4 px-6 py-3\">\n            <div className=\"flex flex-wrap items-center gap-4 lg:gap-8\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex size-8 items-center justify-center rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)]\">\n                  <HomeModernIcon className=\"size-4\" />\n                </div>\n                <span className=\"text-lg font-semibold text-[var(--color-text-primary)]\">\n                  Atelier\n                </span>\n              </div>\n              <nav className=\"hidden items-center gap-1 md:flex\">\n                {navItems.map((item) => (\n                  <Button\n                    key={item.label}\n                    variant={item.active ? \"soft\" : \"ghost\"}\n                    color=\"mono\"\n                    size=\"sm\"\n                  >\n                    {item.label}\n                  </Button>\n                ))}\n              </nav>\n            </div>\n            <div className=\"flex min-w-0 flex-1 items-center justify-end gap-3 lg:flex-none\">\n              <Input\n                placeholder=\"Search briefs, clients, or projects...\"\n                iconEnd={<MagnifyingGlassIcon className=\"size-4\" />}\n                className=\"hidden w-full max-w-80 md:flex\"\n              />\n              <Button variant=\"ghost\" color=\"mono\" size=\"sm\" aria-label=\"Location\">\n                <MapPinIcon className=\"size-4\" />\n              </Button>\n              <Button variant=\"ghost\" color=\"mono\" size=\"sm\" aria-label=\"Notifications\">\n                <BellIcon className=\"size-4\" />\n              </Button>\n              <Avatar\n                src=\"https://i.pravatar.cc/150?u=maren-kessler\"\n                name=\"Maren Kessler\"\n                size=\"sm\"\n              />\n            </div>\n          </div>\n        </AppShell.Topbar>\n\n        <AppShell.Main>\n          <div className=\"flex flex-col gap-6 max-w-7xl mx-auto\">\n            <Grid cols={{ base: 1, lg: 3 }} gap={6}>\n              <Card\n                className=\"lg:col-span-2\"\n                title=\"Earnings Tracker\"\n                subtitle=\"Track your studio's weekly earnings and payment status across every active brief\"\n                actions={\n                  <Segmented value={range} onChange={setRange} size=\"sm\">\n                    <Segmented.Item value=\"week\">Week</Segmented.Item>\n                    <Segmented.Item value=\"month\">Month</Segmented.Item>\n                    <Segmented.Item value=\"year\">Year</Segmented.Item>\n                  </Segmented>\n                }\n              >\n                <div className=\"flex flex-col items-stretch justify-between gap-8 xl:flex-row xl:gap-12\">\n                  <ChartContainer\n                    data={weeklyEarnings}\n                    config={earningsConfig}\n                    className=\"h-[280px] w-full xl:h-[320px]\"\n                  >\n                    <LollipopChart\n                      data={weeklyEarnings}\n                      config={earningsConfig}\n                      defaultSelectedIndex={2}\n                      valueFormatter={(value: number) => `$${value.toLocaleString()}`}\n                    />\n                  </ChartContainer>\n\n                  <div className=\"flex w-full flex-col justify-between gap-4 pb-3 xl:max-w-64\">\n                    <Metric\n                      value=\"$12,547\"\n                      label=\"Collected this week\"\n                      subtitle=\"Payments cleared\"\n                      trendValue=\"12.5%\"\n                      trendDirection=\"up\"\n                      size=\"lg\"\n                      variant=\"ghost\"\n                    />\n                    <p className=\"text-sm text-[var(--color-text-muted)]\">\n                      Growth is being driven by independent interior designers\n                      joining the network, with studio signups up across\n                      every region this week.\n                    </p>\n                  </div>\n                </div>\n              </Card>\n\n              <Card\n                title=\"Commitment Mix\"\n                subtitle=\"Hourly rate by engagement type across active briefs\"\n              >\n                <div className=\"flex justify-center py-2\">\n                  <MultiSegmentDonutChart\n                    data={commitmentData}\n                    size={180}\n                    thickness={3}\n                    showLegend\n                    legendPosition=\"bottom\"\n                    centerContent={\n                      <div className=\"text-center\">\n                        <div className=\"text-2xl font-bold text-[var(--color-text-primary)]\">\n                          $300/hr\n                        </div>\n                        <div className=\"text-xs text-[var(--color-text-muted)]\">\n                          Combined rate\n                        </div>\n                      </div>\n                    }\n                  />\n                </div>\n              </Card>\n            </Grid>\n\n            <Grid cols={{ base: 1, lg: 3 }} gap={6}>\n              <Card className=\"flex h-full flex-col\">\n                <Card.Header className=\"flex-row items-start justify-between gap-4\">\n                  <div className=\"flex flex-col\">\n                    <Card.Title>Studio Network</Card.Title>\n                    <Card.Subtitle>Specialists available for active briefs</Card.Subtitle>\n                  </div>\n                  <div className=\"flex items-center gap-2 shrink-0\">\n                    <Link size=\"sm\" href=\"#\">\n                      See all\n                    </Link>\n                  </div>\n                </Card.Header>\n                <Card.Body className=\"flex flex-1 flex-col\">\n                  <div className=\"flex flex-col divide-y divide-[var(--color-border)]\">\n                    {connections.map((connection) => (\n                      <div key={connection.id} className=\"flex items-center gap-2 py-2.5 first:pt-0 last:pb-0\">\n                        <Avatar src={connection.avatarSrc} name={connection.name} size=\"lg\" />\n                        <div className=\"min-w-0 flex-1\">\n                          <div className=\"flex items-center gap-2\">\n                            <span className=\"truncate text-sm font-medium text-[var(--color-text-primary)]\">\n                              {connection.name}\n                            </span>\n                            <Badge\n                              color={connection.level === \"Senior\" ? \"primary\" : \"mono\"}\n                              variant=\"soft\"\n                              size=\"sm\"\n                            >\n                              {connection.level}\n                            </Badge>\n                          </div>\n                          <p className=\"truncate text-sm text-[var(--color-text-muted)]\">\n                            {connection.role}\n                          </p>\n                        </div>\n                        <Button\n                          variant=\"soft\"\n                          color=\"mono\"\n                          size=\"sm\"\n                          iconOnly\n                          aria-label={`Connect with ${connection.name}`}\n                        >\n                          <PlusIcon className=\"size-4\" />\n                        </Button>\n                      </div>\n                    ))}\n                  </div>\n                  <div className=\"mt-auto border-t border-[var(--color-border)] pt-10\">\n                    <div className=\"flex items-start gap-3\">\n                      <div className=\"flex size-9 shrink-0 items-center justify-center rounded-full bg-[var(--color-primary)]/10 text-[var(--color-primary)]\">\n                        <SparklesIcon className=\"size-5\" />\n                      </div>\n                      <div>\n                        <p className=\"text-sm font-medium text-[var(--color-text-primary)]\">\n                          6 matching collaborators\n                        </p>\n                        <p className=\"mt-1 text-sm leading-relaxed text-[var(--color-text-muted)]\">\n                          Best fits are based on project type, rate, and timezone overlap.\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </Card.Body>\n              </Card>\n\n              <HeroCard\n                image=\"/bg/2.webp\"\n                imageBlend=\"overlay\"\n                imageOpacity={0.5}\n                parallax\n                className=\"h-full bg-gradient-to-br from-[var(--color-primary-500)] via-teal-600 to-indigo-900 p-8 ring-0 border-0\"\n                contentClassName=\"flex h-full flex-col justify-between gap-6\"\n              >\n                <DotPattern spacing={20} dotSize={1} fadeDirection=\"radial\" className=\"inset-0 -m-8\" />\n                <GradientMesh\n                  colors={[\"var(--color-primary-400)\", \"var(--color-primary)\", \"var(--color-primary-800)\"]}\n                  distortion={0.8}\n                  swirl={0.3}\n                  speed={0.5}\n                  className=\"inset-0 -m-8 opacity-40\"\n                />\n\n                <div className=\"relative z-10\">\n                  <Badge className=\"border-0 bg-white/20 rounded-full text-white font-medium  mb-4\">\n                    Special Offer\n                  </Badge>\n                  <h3 className=\"text-4xl font-semibold tracking-tight text-white\">\n                    Unlock Studio Pro\n                  </h3>\n                  <p className=\"mt-2 text-sm text-white/90 leading-relaxed\">\n                    Get priority access to high-value briefs and grow your\n                    studio's client roster\n                  </p>\n                </div>\n                <Button\n                  className=\"relative z-10 mt-auto w-fit\"\n                  color=\"mono\"\n                  darkMode\n                >\n                  Upgrade now  <ChevronRightIcon className=\"size-4 stroke-[2]\" />\n                </Button>\n              </HeroCard>\n              <Card\n                title=\"Brief Pipeline\"\n                subtitle=\"Monitor active proposals from first contact to signed contract\"\n                actions={\n                  <Dropdown placement=\"bottom-end\">\n                    <Dropdown.Trigger>\n                      <Button variant=\"outline\" color=\"mono\" size=\"sm\">\n                        May 6, 2024\n                        <ChevronDownIcon className=\"size-3\" />\n                      </Button>\n                    </Dropdown.Trigger>\n                    <Dropdown.Menu aria-label=\"Select date range\">\n                      <Dropdown.Item itemKey=\"this-week\">This week</Dropdown.Item>\n                      <Dropdown.Item itemKey=\"last-week\">Last week</Dropdown.Item>\n                      <Dropdown.Item itemKey=\"this-month\">This month</Dropdown.Item>\n                    </Dropdown.Menu>\n                  </Dropdown>\n                }\n              >\n                <div className=\"flex flex-col gap-6\">\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    {proposalStats.map((stat) => (\n                      <div key={stat.label}>\n                        <p className=\"text-sm text-[var(--color-text-muted)]\">{stat.label}</p>\n                        <p className=\"mt-1 text-2xl font-semibold text-[var(--color-text-primary)]\">\n                          {stat.value}\n                        </p>\n                      </div>\n                    ))}\n                  </div>\n                  <div className=\"flex flex-col gap-4\">\n                    {pipelineStages.map((stage) => (\n                      <div key={stage.label} className=\"space-y-2\">\n                        <div className=\"flex items-center justify-between gap-3\">\n                          <span className=\"text-sm font-medium text-[var(--color-text-primary)]\">\n                            {stage.label}\n                          </span>\n                          <span className=\"text-sm text-[var(--color-text-muted)]\">\n                            {stage.value}\n                          </span>\n                        </div>\n                        <Progress\n                          value={stage.progress}\n                          size=\"sm\"\n                          className={stage.color}\n                          aria-label={`${stage.label} pipeline progress`}\n                        />\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </Card>\n            </Grid>\n          </div>\n        </AppShell.Main>\n      </AppShell>\n    );\n  },\n};"
     },
     {
       "name": "ErrorLayout",
@@ -11050,7 +11569,7 @@
       "componentsUsed": [
         "Button"
       ],
-      "source": "import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Button } from \"../../components/core\";\nimport {\n  HomeIcon,\n  ArrowPathIcon,\n  ArrowLeftIcon,\n  ExclamationTriangleIcon,\n} from \"@heroicons/react/24/outline\";\n\nconst meta: Meta = {\n  title: \"Blocks/ErrorLayout\",\n  parameters: {\n    layout: \"fullscreen\",\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const NotFound: Story = {\n  render: () => (\n    <div className=\"min-h-screen flex items-center justify-center bg-[var(--color-background)] px-6\">\n      <div className=\"text-center max-w-md\">\n        <div className=\"text-8xl font-bold text-[var(--color-primary)] mb-4\">\n          404\n        </div>\n        <h1 className=\"text-2xl font-semibold text-[var(--color-text-primary)] mb-2\">\n          Page not found\n        </h1>\n        <p className=\"text-[var(--color-text-muted)] mb-8\">\n          Sorry, we couldn't find the page you're looking for. The page may have\n          been moved or deleted.\n        </p>\n        <div className=\"flex items-center justify-center gap-3\">\n          <Button variant=\"outline\" color=\"neutral\">\n            <ArrowLeftIcon className=\"size-4\" /> Go Back\n          </Button>\n          <Button>\n            <HomeIcon className=\"size-4\" /> Go Home\n          </Button>\n        </div>\n      </div>\n    </div>\n  ),\n  parameters: {\n    controls: { disable: true },\n  },\n};\n\nexport const ServerError: Story = {\n  render: () => (\n    <div className=\"min-h-screen flex items-center justify-center bg-[var(--color-background)] px-6\">\n      <div className=\"text-center max-w-md\">\n        <div className=\"flex justify-center mb-6\">\n          <div className=\"p-4 rounded-full bg-[var(--color-danger-50)]\">\n            <ExclamationTriangleIcon className=\"size-12 text-[var(--color-danger)]\" />\n          </div>\n        </div>\n        <div className=\"text-8xl font-bold text-[var(--color-danger)] mb-4\">\n          500\n        </div>\n        <h1 className=\"text-2xl font-semibold text-[var(--color-text-primary)] mb-2\">\n          Internal Server Error\n        </h1>\n        <p className=\"text-[var(--color-text-muted)] mb-8\">\n          We're experiencing a temporary outage. Our team has been notified and\n          is working on a fix. Please try again in a few minutes.\n        </p>\n        <div className=\"flex items-center justify-center gap-3\">\n          <Button variant=\"outline\" color=\"neutral\">\n            <ArrowLeftIcon className=\"size-4\" /> Go Back\n          </Button>\n          <Button>\n            <ArrowPathIcon className=\"size-4\" /> Refresh Page\n          </Button>\n        </div>\n      </div>\n    </div>\n  ),\n  parameters: {\n    controls: { disable: true },\n  },\n};"
+      "source": "import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Button } from \"../../components/core\";\nimport { House as HomeIcon, ArrowsClockwise as ArrowPathIcon, ArrowLeft as ArrowLeftIcon, Warning as ExclamationTriangleIcon } from \"@phosphor-icons/react\";\n\nconst meta: Meta = {\n  title: \"Blocks/ErrorLayout\",\n  parameters: {\n    layout: \"fullscreen\",\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const NotFound: Story = {\n  render: () => (\n    <div className=\"min-h-screen flex items-center justify-center bg-[var(--color-background)] px-6\">\n      <div className=\"text-center max-w-md\">\n        <div className=\"text-8xl font-bold text-[var(--color-primary)] mb-4\">\n          404\n        </div>\n        <h1 className=\"text-2xl font-semibold text-[var(--color-text-primary)] mb-2\">\n          Page not found\n        </h1>\n        <p className=\"text-[var(--color-text-muted)] mb-8\">\n          Sorry, we couldn't find the page you're looking for. The page may have\n          been moved or deleted.\n        </p>\n        <div className=\"flex items-center justify-center gap-3\">\n          <Button variant=\"outline\" color=\"mono\">\n            <ArrowLeftIcon className=\"size-4\" /> Go Back\n          </Button>\n          <Button>\n            <HomeIcon className=\"size-4\" /> Go Home\n          </Button>\n        </div>\n      </div>\n    </div>\n  ),\n  parameters: {\n    controls: { disable: true },\n  },\n};\n\nexport const ServerError: Story = {\n  render: () => (\n    <div className=\"min-h-screen flex items-center justify-center bg-[var(--color-background)] px-6\">\n      <div className=\"text-center max-w-md\">\n        <div className=\"flex justify-center mb-6\">\n          <div className=\"p-4 rounded-full bg-[var(--color-danger-50)]\">\n            <ExclamationTriangleIcon className=\"size-12 text-[var(--color-danger)]\" />\n          </div>\n        </div>\n        <div className=\"text-8xl font-bold text-[var(--color-danger)] mb-4\">\n          500\n        </div>\n        <h1 className=\"text-2xl font-semibold text-[var(--color-text-primary)] mb-2\">\n          Internal Server Error\n        </h1>\n        <p className=\"text-[var(--color-text-muted)] mb-8\">\n          We're experiencing a temporary outage. Our team has been notified and\n          is working on a fix. Please try again in a few minutes.\n        </p>\n        <div className=\"flex items-center justify-center gap-3\">\n          <Button variant=\"outline\" color=\"mono\">\n            <ArrowLeftIcon className=\"size-4\" /> Go Back\n          </Button>\n          <Button>\n            <ArrowPathIcon className=\"size-4\" /> Refresh Page\n          </Button>\n        </div>\n      </div>\n    </div>\n  ),\n  parameters: {\n    controls: { disable: true },\n  },\n};"
     },
     {
       "name": "GenerativeUI",
@@ -11081,7 +11600,7 @@
         "Separator",
         "Tooltip"
       ],
-      "source": "import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport {\n  Avatar,\n  Badge,\n  Button,\n  ScrollArea,\n  Separator,\n  Tooltip,\n} from \"../../components/core\";\nimport { Input } from \"../../components/forms\";\nimport {\n  InboxIcon,\n  PaperAirplaneIcon,\n  ArchiveBoxIcon,\n  TrashIcon,\n  StarIcon,\n  MagnifyingGlassIcon,\n  ArrowUturnLeftIcon,\n  ArrowUturnRightIcon,\n  EllipsisHorizontalIcon,\n  PaperClipIcon,\n  TagIcon,\n} from \"@heroicons/react/24/outline\";\nimport { StarIcon as StarSolidIcon } from \"@heroicons/react/24/solid\";\n\nconst meta: Meta = {\n  title: \"Blocks/InboxLayout\",\n  parameters: { layout: \"fullscreen\" },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\n// --- Email data ---\n\nconst emails = [\n  {\n    id: \"1\",\n    from: \"Alex Rivera\",\n    avatar:\n      \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face\",\n    subject: \"Q4 Product Roadmap Review\",\n    preview:\n      \"Hey team, I've attached the updated Q4 roadmap with the prioritized features we discussed in yesterday's meeting...\",\n    time: \"10:24 AM\",\n    unread: true,\n    starred: true,\n    hasAttachment: true,\n    labels: [\"Product\"],\n  },\n  {\n    id: \"2\",\n    from: \"Sarah Chen\",\n    avatar:\n      \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face\",\n    subject: \"Component Library v2.5 Release Notes\",\n    preview:\n      \"The new release includes 12 new components, performance improvements across the board, and full dark mode support...\",\n    time: \"9:15 AM\",\n    unread: true,\n    starred: false,\n    hasAttachment: false,\n    labels: [\"Engineering\"],\n  },\n  {\n    id: \"3\",\n    from: \"James Wilson\",\n    avatar:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face\",\n    subject: \"Re: Design system feedback\",\n    preview:\n      \"I've reviewed the spacing tokens and have a few suggestions. The 4px base unit works well but I think we should...\",\n    time: \"Yesterday\",\n    unread: false,\n    starred: false,\n    hasAttachment: false,\n    labels: [\"Design\"],\n  },\n  {\n    id: \"4\",\n    from: \"Emily Rodriguez\",\n    avatar:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face\",\n    subject: \"Team standup notes — Feb 14\",\n    preview:\n      \"Here's a summary from today's standup: Sarah is working on the Table refactor, James is finishing the icon migration...\",\n    time: \"Yesterday\",\n    unread: false,\n    starred: true,\n    hasAttachment: false,\n    labels: [],\n  },\n  {\n    id: \"5\",\n    from: \"David Kim\",\n    avatar:\n      \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face\",\n    subject: \"CI pipeline update\",\n    preview:\n      \"I've updated the CI config to include visual regression testing. Build times are down 30% with the new caching strategy...\",\n    time: \"Feb 13\",\n    unread: false,\n    starred: false,\n    hasAttachment: true,\n    labels: [\"DevOps\"],\n  },\n  {\n    id: \"6\",\n    from: \"Lisa Thompson\",\n    avatar:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face\",\n    subject: \"Client presentation slides\",\n    preview:\n      \"Attached the final deck for Friday's presentation. I've incorporated all the feedback from the dry run...\",\n    time: \"Feb 12\",\n    unread: false,\n    starred: false,\n    hasAttachment: true,\n    labels: [\"Sales\"],\n  },\n];\n\nconst labelColors: Record<string, string> = {\n  Product: \"bg-[var(--color-primary-100)] text-[var(--color-primary-700)]\",\n  Engineering: \"bg-[var(--color-success-100)] text-[var(--color-success-700)]\",\n  Design: \"bg-[var(--color-warning-100)] text-[var(--color-warning-700)]\",\n  DevOps: \"bg-[var(--color-danger-100)] text-[var(--color-danger-700)]\",\n  Sales: \"bg-[var(--color-primary-100)] text-[var(--color-primary-700)]\",\n};\n\n// --- Active email content ---\n\nconst activeEmail = emails[0];\n\nexport const Default: Story = {\n  render: () => (\n    <div className=\"h-screen flex bg-[var(--color-background)]\">\n      {/* Left icon strip */}\n      <div className=\"hidden sm:flex w-14 flex-col items-center py-4 gap-2 border-r border-[var(--color-border)] bg-[var(--color-background-secondary)]\">\n        <div className=\"w-9 h-9 rounded-xl bg-[var(--color-primary)] flex items-center justify-center text-white font-bold text-sm mb-2\">\n          F\n        </div>\n        <Separator className=\"w-8\" />\n        <Tooltip content=\"Inbox\" placement=\"right\">\n          <button className=\"w-9 h-9 rounded-lg flex items-center justify-center bg-[var(--color-primary)]/10 text-[var(--color-primary)]\">\n            <InboxIcon className=\"size-5\" />\n          </button>\n        </Tooltip>\n        <Tooltip content=\"Sent\" placement=\"right\">\n          <button className=\"w-9 h-9 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] transition-colors\">\n            <PaperAirplaneIcon className=\"size-5\" />\n          </button>\n        </Tooltip>\n        <Tooltip content=\"Starred\" placement=\"right\">\n          <button className=\"w-9 h-9 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] transition-colors\">\n            <StarIcon className=\"size-5\" />\n          </button>\n        </Tooltip>\n        <Tooltip content=\"Archive\" placement=\"right\">\n          <button className=\"w-9 h-9 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] transition-colors\">\n            <ArchiveBoxIcon className=\"size-5\" />\n          </button>\n        </Tooltip>\n        <Tooltip content=\"Trash\" placement=\"right\">\n          <button className=\"w-9 h-9 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] transition-colors\">\n            <TrashIcon className=\"size-5\" />\n          </button>\n        </Tooltip>\n        <Tooltip content=\"Labels\" placement=\"right\">\n          <button className=\"w-9 h-9 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] transition-colors\">\n            <TagIcon className=\"size-5\" />\n          </button>\n        </Tooltip>\n      </div>\n\n      {/* Email list */}\n      <div className=\"w-full sm:w-80 lg:w-96 flex flex-col border-r border-[var(--color-border)]\">\n        <div className=\"p-4 space-y-3 border-b border-[var(--color-border)]\">\n          <div className=\"flex items-center justify-between\">\n            <h2 className=\"text-lg font-semibold text-[var(--color-text-primary)]\">\n              Inbox\n            </h2>\n            <Badge\n              color=\"primary\"\n              variant=\"filled\"\n              size=\"sm\"\n              className=\"rounded-full\"\n            >\n              2\n            </Badge>\n          </div>\n          <Input\n            placeholder=\"Search emails...\"\n            iconStart={<MagnifyingGlassIcon className=\"size-4\" />}\n            size=\"sm\"\n          />\n        </div>\n        <ScrollArea className=\"flex-1\">\n          <div className=\"divide-y divide-[var(--color-border)]\">\n            {emails.map((email) => (\n              <div\n                key={email.id}\n                className={`p-4 cursor-pointer transition-colors ${\n                  email.id === activeEmail.id\n                    ? \"bg-[var(--color-primary-50)]\"\n                    : \"hover:bg-[var(--color-background-secondary)]\"\n                }`}\n              >\n                <div className=\"flex items-start gap-3\">\n                  <Avatar src={email.avatar} name={email.from} size=\"sm\" />\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"flex items-center justify-between\">\n                      <span\n                        className={`text-sm truncate ${email.unread ? \"font-semibold text-[var(--color-text-primary)]\" : \"font-medium text-[var(--color-text-secondary)]\"}`}\n                      >\n                        {email.from}\n                      </span>\n                      <span className=\"text-xs text-[var(--color-text-muted)] flex-shrink-0 ml-2\">\n                        {email.time}\n                      </span>\n                    </div>\n                    <div\n                      className={`text-sm truncate mt-0.5 ${email.unread ? \"font-medium text-[var(--color-text-primary)]\" : \"text-[var(--color-text-secondary)]\"}`}\n                    >\n                      {email.subject}\n                    </div>\n                    <div className=\"text-xs text-[var(--color-text-muted)] truncate mt-0.5\">\n                      {email.preview}\n                    </div>\n                    <div className=\"flex items-center gap-2 mt-1.5\">\n                      {email.starred && (\n                        <StarSolidIcon className=\"size-3.5 text-[var(--color-warning)]\" />\n                      )}\n                      {email.hasAttachment && (\n                        <PaperClipIcon className=\"size-3.5 text-[var(--color-text-muted)]\" />\n                      )}\n                      {email.labels.map((label) => (\n                        <span\n                          key={label}\n                          className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium ${labelColors[label] || \"\"}`}\n                        >\n                          {label}\n                        </span>\n                      ))}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        </ScrollArea>\n      </div>\n\n      {/* Email detail */}\n      <div className=\"hidden sm:flex flex-1 flex-col min-w-0\">\n        {/* Toolbar */}\n        <div className=\"flex items-center justify-between px-6 py-3 border-b border-[var(--color-border)]\">\n          <div className=\"flex items-center gap-1\">\n            <Tooltip content=\"Reply\">\n              <Button variant=\"soft\" color=\"neutral\" size=\"sm\" iconOnly>\n                <ArrowUturnLeftIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n            <Tooltip content=\"Forward\">\n              <Button variant=\"soft\" color=\"neutral\" size=\"sm\" iconOnly>\n                <ArrowUturnRightIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n            <Tooltip content=\"Archive\">\n              <Button variant=\"soft\" color=\"neutral\" size=\"sm\" iconOnly>\n                <ArchiveBoxIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n            <Tooltip content=\"Delete\">\n              <Button variant=\"soft\" color=\"neutral\" size=\"sm\" iconOnly>\n                <TrashIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n          </div>\n          <Button variant=\"soft\" color=\"neutral\" size=\"sm\" iconOnly>\n            <EllipsisHorizontalIcon className=\"size-4\" />\n          </Button>\n        </div>\n\n        {/* Email content */}\n        <ScrollArea className=\"flex-1\">\n          <div className=\"max-w-3xl mx-auto px-6 lg:px-8 py-6 space-y-6\">\n            {/* Subject */}\n            <div>\n              <div className=\"flex items-start justify-between gap-4\">\n                <h1 className=\"text-xl font-semibold text-[var(--color-text-primary)]\">\n                  {activeEmail.subject}\n                </h1>\n                <button className=\"flex-shrink-0 mt-1\">\n                  <StarSolidIcon className=\"size-5 text-[var(--color-warning)]\" />\n                </button>\n              </div>\n              <div className=\"flex flex-wrap items-center gap-2 mt-2\">\n                {activeEmail.labels.map((label) => (\n                  <Badge key={label} color=\"primary\" variant=\"soft\" size=\"sm\">\n                    {label}\n                  </Badge>\n                ))}\n              </div>\n            </div>\n\n            {/* Sender */}\n            <div className=\"flex items-center gap-3\">\n              <Avatar\n                src={activeEmail.avatar}\n                name={activeEmail.from}\n                size=\"md\"\n              />\n              <div className=\"flex-1 min-w-0\">\n                <div className=\"flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2\">\n                  <span className=\"font-semibold text-sm text-[var(--color-text-primary)]\">\n                    {activeEmail.from}\n                  </span>\n                  <span className=\"text-xs text-[var(--color-text-muted)]\">\n                    alex@company.com\n                  </span>\n                </div>\n                <div className=\"text-xs text-[var(--color-text-muted)]\">\n                  To: you, sarah@company.com, james@company.com\n                </div>\n              </div>\n              <span className=\"text-xs text-[var(--color-text-muted)] flex-shrink-0\">\n                {activeEmail.time}\n              </span>\n            </div>\n\n            <Separator />\n\n            {/* Body */}\n            <div className=\"text-sm text-[var(--color-text-secondary)] leading-relaxed space-y-4\">\n              <p>Hey team,</p>\n              <p>\n                I've attached the updated Q4 roadmap with the prioritized\n                features we discussed in yesterday's meeting. Here are the key\n                highlights:\n              </p>\n              <ul className=\"list-disc pl-5 space-y-1\">\n                <li>\n                  <strong>Chart Components v2</strong> — Complete rewrite with\n                  simplified API, accessibility improvements, and CSS variable\n                  theming\n                </li>\n                <li>\n                  <strong>Dark Mode</strong> — Full dark mode support across all\n                  50+ components with automatic system preference detection\n                </li>\n                <li>\n                  <strong>Performance</strong> — Tree-shaking optimization\n                  targeting a 40% reduction in bundle size\n                </li>\n                <li>\n                  <strong>AI Components</strong> — New suite of components for\n                  building AI-powered chat interfaces\n                </li>\n              </ul>\n              <p>\n                I've also included a timeline and resource allocation breakdown\n                in the attached document. Let me know if you have any questions\n                or if we need to adjust priorities.\n              </p>\n              <p>\n                Best,\n                <br />\n                Alex\n              </p>\n            </div>\n\n            {/* Attachment */}\n            <div className=\"border border-[var(--color-border)] rounded-lg p-3 flex items-center gap-3\">\n              <div className=\"w-10 h-10 rounded-lg bg-[var(--color-primary-50)] flex items-center justify-center flex-shrink-0\">\n                <PaperClipIcon className=\"size-5 text-[var(--color-primary)]\" />\n              </div>\n              <div className=\"flex-1 min-w-0\">\n                <div className=\"text-sm font-medium text-[var(--color-text-primary)] truncate\">\n                  Q4-Roadmap-2026.pdf\n                </div>\n                <div className=\"text-xs text-[var(--color-text-muted)]\">\n                  2.4 MB\n                </div>\n              </div>\n              <Button variant=\"outline\" color=\"neutral\" size=\"sm\">\n                Download\n              </Button>\n            </div>\n\n            <Separator />\n\n            {/* Quick reply */}\n            <div>\n              <Input placeholder=\"Write a quick reply...\" size=\"md\" />\n              <div className=\"flex justify-end mt-3 gap-2\">\n                <Button variant=\"outline\" color=\"neutral\" size=\"sm\">\n                  Discard\n                </Button>\n                <Button size=\"sm\">\n                  <PaperAirplaneIcon className=\"size-4\" /> Send\n                </Button>\n              </div>\n            </div>\n          </div>\n        </ScrollArea>\n      </div>\n    </div>\n  ),\n  parameters: {\n    controls: { disable: true },\n  },\n};"
+      "source": "import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport {\n  Avatar,\n  Badge,\n  Button,\n  ScrollArea,\n  Separator,\n  Tooltip,\n} from \"../../components/core\";\nimport { Input } from \"../../components/forms\";\nimport {\n  Tray as InboxIcon,\n  PaperPlaneTilt as PaperAirplaneIcon,\n  Archive as ArchiveBoxIcon,\n  Trash as TrashIcon,\n  Star as StarIcon,\n  MagnifyingGlass as MagnifyingGlassIcon,\n  ArrowUUpLeft as ArrowUturnLeftIcon,\n  ArrowUUpRight as ArrowUturnRightIcon,\n  DotsThree as EllipsisHorizontalIcon,\n  Paperclip as PaperClipIcon,\n  Tag as TagIcon,\n  Star as StarSolidIcon,\n} from \"@phosphor-icons/react\";\n\nconst meta: Meta = {\n  title: \"Blocks/InboxLayout\",\n  parameters: { layout: \"fullscreen\" },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\n// --- Email data ---\n\nconst emails = [\n  {\n    id: \"1\",\n    from: \"Alex Rivera\",\n    avatar:\n      \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face\",\n    subject: \"Q4 Product Roadmap Review\",\n    preview:\n      \"Hey team, I've attached the updated Q4 roadmap with the prioritized features we discussed in yesterday's meeting...\",\n    time: \"10:24 AM\",\n    unread: true,\n    starred: true,\n    hasAttachment: true,\n    labels: [\"Product\"],\n  },\n  {\n    id: \"2\",\n    from: \"Sarah Chen\",\n    avatar:\n      \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face\",\n    subject: \"Component Library v2.5 Release Notes\",\n    preview:\n      \"The new release includes 12 new components, performance improvements across the board, and full dark mode support...\",\n    time: \"9:15 AM\",\n    unread: true,\n    starred: false,\n    hasAttachment: false,\n    labels: [\"Engineering\"],\n  },\n  {\n    id: \"3\",\n    from: \"James Wilson\",\n    avatar:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face\",\n    subject: \"Re: Design system feedback\",\n    preview:\n      \"I've reviewed the spacing tokens and have a few suggestions. The 4px base unit works well but I think we should...\",\n    time: \"Yesterday\",\n    unread: false,\n    starred: false,\n    hasAttachment: false,\n    labels: [\"Design\"],\n  },\n  {\n    id: \"4\",\n    from: \"Emily Rodriguez\",\n    avatar:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face\",\n    subject: \"Team standup notes — Feb 14\",\n    preview:\n      \"Here's a summary from today's standup: Sarah is working on the Table refactor, James is finishing the icon migration...\",\n    time: \"Yesterday\",\n    unread: false,\n    starred: true,\n    hasAttachment: false,\n    labels: [],\n  },\n  {\n    id: \"5\",\n    from: \"David Kim\",\n    avatar:\n      \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face\",\n    subject: \"CI pipeline update\",\n    preview:\n      \"I've updated the CI config to include visual regression testing. Build times are down 30% with the new caching strategy...\",\n    time: \"Feb 13\",\n    unread: false,\n    starred: false,\n    hasAttachment: true,\n    labels: [\"DevOps\"],\n  },\n  {\n    id: \"6\",\n    from: \"Lisa Thompson\",\n    avatar:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face\",\n    subject: \"Client presentation slides\",\n    preview:\n      \"Attached the final deck for Friday's presentation. I've incorporated all the feedback from the dry run...\",\n    time: \"Feb 12\",\n    unread: false,\n    starred: false,\n    hasAttachment: true,\n    labels: [\"Sales\"],\n  },\n];\n\nconst labelColors: Record<string, string> = {\n  Product: \"bg-[var(--color-primary-100)] text-[var(--color-primary-700)]\",\n  Engineering: \"bg-[var(--color-success-100)] text-[var(--color-success-700)]\",\n  Design: \"bg-[var(--color-warning-100)] text-[var(--color-warning-700)]\",\n  DevOps: \"bg-[var(--color-danger-100)] text-[var(--color-danger-700)]\",\n  Sales: \"bg-[var(--color-primary-100)] text-[var(--color-primary-700)]\",\n};\n\n// --- Active email content ---\n\nconst activeEmail = emails[0];\n\nexport const Default: Story = {\n  render: () => (\n    <div className=\"h-screen flex bg-[var(--color-background)]\">\n      {/* Left icon strip */}\n      <div className=\"hidden sm:flex w-14 flex-col items-center py-4 gap-2 border-r border-[var(--color-border)] bg-[var(--color-background-secondary)]\">\n        <div className=\"w-9 h-9 rounded-xl bg-[var(--color-primary)] flex items-center justify-center text-white font-bold text-sm mb-2\">\n          F\n        </div>\n        <Separator className=\"w-8\" />\n        <Tooltip content=\"Inbox\" placement=\"right\">\n          <button className=\"w-9 h-9 rounded-lg flex items-center justify-center bg-[var(--color-primary)]/10 text-[var(--color-primary)]\">\n            <InboxIcon className=\"size-5\" />\n          </button>\n        </Tooltip>\n        <Tooltip content=\"Sent\" placement=\"right\">\n          <button className=\"w-9 h-9 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] transition-colors\">\n            <PaperAirplaneIcon className=\"size-5\" />\n          </button>\n        </Tooltip>\n        <Tooltip content=\"Starred\" placement=\"right\">\n          <button className=\"w-9 h-9 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] transition-colors\">\n            <StarIcon className=\"size-5\" />\n          </button>\n        </Tooltip>\n        <Tooltip content=\"Archive\" placement=\"right\">\n          <button className=\"w-9 h-9 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] transition-colors\">\n            <ArchiveBoxIcon className=\"size-5\" />\n          </button>\n        </Tooltip>\n        <Tooltip content=\"Trash\" placement=\"right\">\n          <button className=\"w-9 h-9 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] transition-colors\">\n            <TrashIcon className=\"size-5\" />\n          </button>\n        </Tooltip>\n        <Tooltip content=\"Labels\" placement=\"right\">\n          <button className=\"w-9 h-9 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] transition-colors\">\n            <TagIcon className=\"size-5\" />\n          </button>\n        </Tooltip>\n      </div>\n\n      {/* Email list */}\n      <div className=\"w-full sm:w-80 lg:w-96 flex flex-col border-r border-[var(--color-border)]\">\n        <div className=\"p-4 space-y-3 border-b border-[var(--color-border)]\">\n          <div className=\"flex items-center justify-between\">\n            <h2 className=\"text-lg font-semibold text-[var(--color-text-primary)]\">\n              Inbox\n            </h2>\n            <Badge\n              color=\"primary\"\n              variant=\"filled\"\n              size=\"sm\"\n              className=\"rounded-full\"\n            >\n              2\n            </Badge>\n          </div>\n          <Input\n            placeholder=\"Search emails...\"\n            iconStart={<MagnifyingGlassIcon className=\"size-4\" />}\n            size=\"sm\"\n          />\n        </div>\n        <ScrollArea className=\"flex-1\">\n          <div className=\"divide-y divide-[var(--color-border)]\">\n            {emails.map((email) => (\n              <div\n                key={email.id}\n                className={`p-4 cursor-pointer transition-colors ${\n                  email.id === activeEmail.id\n                    ? \"bg-[var(--color-primary-50)]\"\n                    : \"hover:bg-[var(--color-background-secondary)]\"\n                }`}\n              >\n                <div className=\"flex items-start gap-3\">\n                  <Avatar src={email.avatar} name={email.from} size=\"sm\" />\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"flex items-center justify-between\">\n                      <span\n                        className={`text-sm truncate ${email.unread ? \"font-semibold text-[var(--color-text-primary)]\" : \"font-medium text-[var(--color-text-secondary)]\"}`}\n                      >\n                        {email.from}\n                      </span>\n                      <span className=\"text-xs text-[var(--color-text-muted)] flex-shrink-0 ml-2\">\n                        {email.time}\n                      </span>\n                    </div>\n                    <div\n                      className={`text-sm truncate mt-0.5 ${email.unread ? \"font-medium text-[var(--color-text-primary)]\" : \"text-[var(--color-text-secondary)]\"}`}\n                    >\n                      {email.subject}\n                    </div>\n                    <div className=\"text-xs text-[var(--color-text-muted)] truncate mt-0.5\">\n                      {email.preview}\n                    </div>\n                    <div className=\"flex items-center gap-2 mt-1.5\">\n                      {email.starred && (\n                        <StarSolidIcon className=\"size-3.5 text-[var(--color-warning)]\" />\n                      )}\n                      {email.hasAttachment && (\n                        <PaperClipIcon className=\"size-3.5 text-[var(--color-text-muted)]\" />\n                      )}\n                      {email.labels.map((label) => (\n                        <span\n                          key={label}\n                          className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium ${labelColors[label] || \"\"}`}\n                        >\n                          {label}\n                        </span>\n                      ))}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        </ScrollArea>\n      </div>\n\n      {/* Email detail */}\n      <div className=\"hidden sm:flex flex-1 flex-col min-w-0\">\n        {/* Toolbar */}\n        <div className=\"flex items-center justify-between px-6 py-3 border-b border-[var(--color-border)]\">\n          <div className=\"flex items-center gap-1\">\n            <Tooltip content=\"Reply\">\n              <Button variant=\"soft\" color=\"mono\" size=\"sm\" iconOnly>\n                <ArrowUturnLeftIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n            <Tooltip content=\"Forward\">\n              <Button variant=\"soft\" color=\"mono\" size=\"sm\" iconOnly>\n                <ArrowUturnRightIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n            <Tooltip content=\"Archive\">\n              <Button variant=\"soft\" color=\"mono\" size=\"sm\" iconOnly>\n                <ArchiveBoxIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n            <Tooltip content=\"Delete\">\n              <Button variant=\"soft\" color=\"mono\" size=\"sm\" iconOnly>\n                <TrashIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n          </div>\n          <Button variant=\"soft\" color=\"mono\" size=\"sm\" iconOnly>\n            <EllipsisHorizontalIcon className=\"size-4\" />\n          </Button>\n        </div>\n\n        {/* Email content */}\n        <ScrollArea className=\"flex-1\">\n          <div className=\"max-w-3xl mx-auto px-6 lg:px-8 py-6 space-y-6\">\n            {/* Subject */}\n            <div>\n              <div className=\"flex items-start justify-between gap-4\">\n                <h1 className=\"text-xl font-semibold text-[var(--color-text-primary)]\">\n                  {activeEmail.subject}\n                </h1>\n                <button className=\"flex-shrink-0 mt-1\">\n                  <StarSolidIcon className=\"size-5 text-[var(--color-warning)]\" />\n                </button>\n              </div>\n              <div className=\"flex flex-wrap items-center gap-2 mt-2\">\n                {activeEmail.labels.map((label) => (\n                  <Badge key={label} color=\"primary\" variant=\"soft\" size=\"sm\">\n                    {label}\n                  </Badge>\n                ))}\n              </div>\n            </div>\n\n            {/* Sender */}\n            <div className=\"flex items-center gap-3\">\n              <Avatar\n                src={activeEmail.avatar}\n                name={activeEmail.from}\n                size=\"md\"\n              />\n              <div className=\"flex-1 min-w-0\">\n                <div className=\"flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2\">\n                  <span className=\"font-semibold text-sm text-[var(--color-text-primary)]\">\n                    {activeEmail.from}\n                  </span>\n                  <span className=\"text-xs text-[var(--color-text-muted)]\">\n                    alex@company.com\n                  </span>\n                </div>\n                <div className=\"text-xs text-[var(--color-text-muted)]\">\n                  To: you, sarah@company.com, james@company.com\n                </div>\n              </div>\n              <span className=\"text-xs text-[var(--color-text-muted)] flex-shrink-0\">\n                {activeEmail.time}\n              </span>\n            </div>\n\n            <Separator />\n\n            {/* Body */}\n            <div className=\"text-sm text-[var(--color-text-secondary)] leading-relaxed space-y-4\">\n              <p>Hey team,</p>\n              <p>\n                I've attached the updated Q4 roadmap with the prioritized\n                features we discussed in yesterday's meeting. Here are the key\n                highlights:\n              </p>\n              <ul className=\"list-disc pl-5 space-y-1\">\n                <li>\n                  <strong>Chart Components v2</strong> — Complete rewrite with\n                  simplified API, accessibility improvements, and CSS variable\n                  theming\n                </li>\n                <li>\n                  <strong>Dark Mode</strong> — Full dark mode support across all\n                  50+ components with automatic system preference detection\n                </li>\n                <li>\n                  <strong>Performance</strong> — Tree-shaking optimization\n                  targeting a 40% reduction in bundle size\n                </li>\n                <li>\n                  <strong>AI Components</strong> — New suite of components for\n                  building AI-powered chat interfaces\n                </li>\n              </ul>\n              <p>\n                I've also included a timeline and resource allocation breakdown\n                in the attached document. Let me know if you have any questions\n                or if we need to adjust priorities.\n              </p>\n              <p>\n                Best,\n                <br />\n                Alex\n              </p>\n            </div>\n\n            {/* Attachment */}\n            <div className=\"border border-[var(--color-border)] rounded-lg p-3 flex items-center gap-3\">\n              <div className=\"w-10 h-10 rounded-lg bg-[var(--color-primary-50)] flex items-center justify-center flex-shrink-0\">\n                <PaperClipIcon className=\"size-5 text-[var(--color-primary)]\" />\n              </div>\n              <div className=\"flex-1 min-w-0\">\n                <div className=\"text-sm font-medium text-[var(--color-text-primary)] truncate\">\n                  Q4-Roadmap-2026.pdf\n                </div>\n                <div className=\"text-xs text-[var(--color-text-muted)]\">\n                  2.4 MB\n                </div>\n              </div>\n              <Button variant=\"outline\" color=\"mono\" size=\"sm\">\n                Download\n              </Button>\n            </div>\n\n            <Separator />\n\n            {/* Quick reply */}\n            <div>\n              <Input placeholder=\"Write a quick reply...\" size=\"md\" />\n              <div className=\"flex justify-end mt-3 gap-2\">\n                <Button variant=\"outline\" color=\"mono\" size=\"sm\">\n                  Discard\n                </Button>\n                <Button size=\"sm\">\n                  <PaperAirplaneIcon className=\"size-4\" /> Send\n                </Button>\n              </div>\n            </div>\n          </div>\n        </ScrollArea>\n      </div>\n    </div>\n  ),\n  parameters: {\n    controls: { disable: true },\n  },\n};"
     },
     {
       "name": "InvoiceLayout",
@@ -11095,30 +11614,7 @@
         "Separator",
         "Table"
       ],
-      "source": "import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport {\n  Badge,\n  Button,\n  ButtonGroup,\n  Card,\n  Separator,\n} from \"../../components/core\";\nimport { Table } from \"../../components/data-display\";\nimport {\n  ArrowDownTrayIcon,\n  PaperAirplaneIcon,\n  CheckIcon,\n} from \"@heroicons/react/24/outline\";\n\nconst meta: Meta = {\n  title: \"Blocks/InvoiceLayout\",\n  parameters: {\n    layout: \"fullscreen\",\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\ntype InvoiceItem = {\n  description: string;\n  detail: string;\n  quantity: string;\n  unitPrice: string;\n  amount: string;\n};\n\ntype Invoice = {\n  status: \"paid\" | \"overdue\";\n  title: string;\n  customer: string;\n  customerEmail: string;\n  customerAddress: string;\n  issued: string;\n  due: string;\n  paidOn?: string;\n  terms: string;\n  subtotal: string;\n  tax: string;\n  total: string;\n  noteTitle: string;\n  note: string;\n  items: InvoiceItem[];\n};\n\nconst paidInvoice: Invoice = {\n  status: \"paid\",\n  title: \"INV-2024-001\",\n  customer: \"Acme Corporation\",\n  customerEmail: \"billing@acme.com\",\n  customerAddress: \"456 Business Ave, New York, NY 10001\",\n  issued: \"Jan 15, 2025\",\n  due: \"Feb 15, 2025\",\n  paidOn: \"Feb 10, 2025\",\n  terms: \"Net 30\",\n  subtotal: \"$1,273.00\",\n  tax: \"$127.30\",\n  total: \"$1,400.30\",\n  noteTitle: \"Payment received\",\n  note: \"Bank transfer cleared on Feb 10, 2025. Receipt sent to billing@acme.com.\",\n  items: [\n    {\n      description: \"UI Component Library License\",\n      detail: \"Pro plan, annual billing\",\n      quantity: \"1\",\n      unitPrice: \"$299.00\",\n      amount: \"$299.00\",\n    },\n    {\n      description: \"Priority Support Package\",\n      detail: \"Annual SLA with email and chat coverage\",\n      quantity: \"1\",\n      unitPrice: \"$149.00\",\n      amount: \"$149.00\",\n    },\n    {\n      description: \"Custom Theme Development\",\n      detail: \"Brand token setup and interaction states\",\n      quantity: \"3\",\n      unitPrice: \"$75.00\",\n      amount: \"$225.00\",\n    },\n    {\n      description: \"Design Consultation\",\n      detail: \"Implementation review and component guidance\",\n      quantity: \"5\",\n      unitPrice: \"$120.00\",\n      amount: \"$600.00\",\n    },\n  ],\n};\n\nconst overdueInvoice: Invoice = {\n  status: \"overdue\",\n  title: \"INV-2025-019\",\n  customer: \"Globex Corporation\",\n  customerEmail: \"accounts@globex.com\",\n  customerAddress: \"789 Industry Blvd, Chicago, IL 60601\",\n  issued: \"Dec 1, 2025\",\n  due: \"Dec 31, 2025\",\n  terms: \"Net 30\",\n  subtotal: \"$4,950.00\",\n  tax: \"$495.00\",\n  total: \"$5,445.00\",\n  noteTitle: \"Payment overdue\",\n  note: \"A reminder was sent to accounts@globex.com. Keep the payment link active until the balance is settled.\",\n  items: [\n    {\n      description: \"Enterprise License\",\n      detail: \"Unlimited seats and advanced permissions\",\n      quantity: \"1\",\n      unitPrice: \"$2,400.00\",\n      amount: \"$2,400.00\",\n    },\n    {\n      description: \"Dedicated Onboarding\",\n      detail: \"Two live training sessions for admins\",\n      quantity: \"2\",\n      unitPrice: \"$800.00\",\n      amount: \"$1,600.00\",\n    },\n    {\n      description: \"Custom SSO Integration\",\n      detail: \"SAML configuration and launch support\",\n      quantity: \"1\",\n      unitPrice: \"$950.00\",\n      amount: \"$950.00\",\n    },\n  ],\n};\n\nconst InvoiceLayout = ({ invoice }: { invoice: Invoice }) => {\n  const isPaid = invoice.status === \"paid\";\n\n  return (\n    <div className=\"min-h-screen bg-[var(--color-background)] px-4 py-6 text-[var(--color-text-primary)] sm:px-6 lg:px-8\">\n      <div className=\"mx-auto max-w-5xl space-y-5\">\n        <div className=\"flex flex-col gap-4 rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)]/80 px-4 py-4 shadow-[0_16px_40px_rgba(50,50,93,0.08)] backdrop-blur sm:flex-row sm:items-center sm:justify-between sm:px-5\">\n          <div className=\"min-w-0\">\n            <div className=\"mb-2 flex items-center gap-2\">\n              {isPaid ? (\n                <Badge color=\"success\" variant=\"soft\" withDot pill>\n                  Paid\n                </Badge>\n              ) : (\n                <Badge color=\"danger\" variant=\"soft\" withDot pill>\n                  Past due\n                </Badge>\n              )}\n              <span className=\"text-xs font-medium uppercase tracking-wide text-[var(--color-text-muted)]\">\n                Flikkui Billing\n              </span>\n            </div>\n            <h1 className=\"truncate text-xl font-semibold text-[var(--color-text-primary)] sm:text-2xl\">\n              Invoice {invoice.title}\n            </h1>\n          </div>\n\n          <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center\">\n            <ButtonGroup>\n              <Button variant=\"outline\" color=\"neutral\" size=\"sm\">\n                <ArrowDownTrayIcon className=\"size-4\" />\n                Download\n              </Button>\n              <Button variant=\"outline\" color=\"neutral\" size=\"sm\">\n                <PaperAirplaneIcon className=\"size-4\" />\n                {isPaid ? \"Send receipt\" : \"Send reminder\"}\n              </Button>\n            </ButtonGroup>\n            {!isPaid && (\n              <Button variant=\"filled\" color=\"primary\" size=\"sm\">\n                <CheckIcon className=\"size-4\" />\n                Mark as paid\n              </Button>\n            )}\n          </div>\n        </div>\n\n        <Card className=\"overflow-hidden border-[var(--color-border)] bg-[var(--color-surface)] shadow-[0_24px_64px_rgba(50,50,93,0.12)]\">\n          <Card.Body className=\"p-0\">\n            <div className=\"grid gap-8 border-b border-[var(--color-border)] px-5 py-8 sm:px-8 lg:grid-cols-[1fr_300px] lg:px-10\">\n              <div className=\"space-y-10\">\n                <div>\n                  <div className=\"mb-8 flex items-center gap-3\">\n                    <div className=\"flex size-10 items-center justify-center rounded-xl bg-[var(--color-primary)] text-sm font-bold text-[var(--color-primary-contrast)] shadow-[0_8px_24px_rgba(99,91,255,0.28)]\">\n                      F\n                    </div>\n                    <div>\n                      <div className=\"text-base font-semibold text-[var(--color-text-primary)]\">\n                        Flikkui Inc.\n                      </div>\n                      <div className=\"text-sm text-[var(--color-text-secondary)]\">\n                        hello@flikkui.com\n                      </div>\n                    </div>\n                  </div>\n\n                  <p className=\"max-w-xl text-4xl font-semibold leading-tight text-[var(--color-text-primary)] sm:text-5xl\">\n                    {invoice.total}\n                  </p>\n                  <p className=\"mt-2 text-sm text-[var(--color-text-secondary)]\">\n                    Due {invoice.due} for {invoice.customer}\n                  </p>\n                </div>\n\n                <div className=\"grid gap-6 sm:grid-cols-2\">\n                  <div>\n                    <div className=\"text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]\">\n                      Bill to\n                    </div>\n                    <div className=\"mt-3 text-sm font-medium text-[var(--color-text-primary)]\">\n                      {invoice.customer}\n                    </div>\n                    <div className=\"mt-1 max-w-xs text-sm leading-6 text-[var(--color-text-secondary)]\">\n                      {invoice.customerAddress}\n                      <br />\n                      {invoice.customerEmail}\n                    </div>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4 text-sm\">\n                    <InvoiceFact label=\"Invoice\" value={invoice.title} />\n                    <InvoiceFact label=\"Terms\" value={invoice.terms} />\n                    <InvoiceFact label=\"Issued\" value={invoice.issued} />\n                    <InvoiceFact\n                      label={isPaid ? \"Paid\" : \"Due\"}\n                      value={\n                        isPaid ? invoice.paidOn || invoice.due : invoice.due\n                      }\n                      tone={isPaid ? \"success\" : \"danger\"}\n                    />\n                  </div>\n                </div>\n              </div>\n\n              <div className=\"self-start rounded-2xl border border-[var(--color-border)] p-5\">\n                <div className=\"flex items-start justify-between gap-4\">\n                  <div>\n                    <div className=\"text-sm font-semibold text-[var(--color-text-primary)]\">\n                      Amount {isPaid ? \"paid\" : \"due\"}\n                    </div>\n                    <div className=\"mt-1 text-sm text-[var(--color-text-secondary)]\">\n                      {isPaid\n                        ? \"Settled by bank transfer\"\n                        : \"Awaiting customer payment\"}\n                    </div>\n                  </div>\n                  {isPaid ? (\n                    <Badge color=\"success\" variant=\"soft\" size=\"sm\" pill>\n                      Complete\n                    </Badge>\n                  ) : (\n                    <Badge color=\"danger\" variant=\"soft\" size=\"sm\" pill>\n                      Action needed\n                    </Badge>\n                  )}\n                </div>\n\n                <Separator className=\"my-4\" />\n\n                <div className=\"space-y-2.5 text-sm\">\n                  <SummaryRow label=\"Subtotal\" value={invoice.subtotal} />\n                  <SummaryRow label=\"Tax\" value={invoice.tax} muted />\n                </div>\n\n                <div className=\"mt-4 flex items-baseline justify-between border-t border-[var(--color-border)] pt-4\">\n                  <span className=\"text-sm font-medium text-[var(--color-text-secondary)]\">\n                    Total\n                  </span>\n                  <span className=\"text-xl font-semibold text-[var(--color-text-primary)]\">\n                    {invoice.total}\n                  </span>\n                </div>\n              </div>\n            </div>\n\n            <div className=\"px-5 py-6 sm:px-8 lg:px-10\">\n              <Table\n                padding=\"flush\"\n                className=\"min-w-[680px] border-separate border-spacing-0\"\n              >\n                <Table.Header>\n                  <Table.Row className=\"hover:bg-transparent dark:hover:bg-transparent\">\n                    <Table.HeaderCell className=\"border-b border-[var(--color-border)] bg-[var(--color-surface)] pb-3 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]\">\n                      Description\n                    </Table.HeaderCell>\n                    <Table.HeaderCell\n                      align=\"center\"\n                      className=\"border-b border-[var(--color-border)] bg-[var(--color-surface)] pb-3 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]\"\n                    >\n                      Qty\n                    </Table.HeaderCell>\n                    <Table.HeaderCell\n                      align=\"right\"\n                      className=\"border-b border-[var(--color-border)] bg-[var(--color-surface)] pb-3 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]\"\n                    >\n                      Unit price\n                    </Table.HeaderCell>\n                    <Table.HeaderCell\n                      align=\"right\"\n                      className=\"border-b border-[var(--color-border)] bg-[var(--color-surface)] pb-3 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]\"\n                    >\n                      Amount\n                    </Table.HeaderCell>\n                  </Table.Row>\n                </Table.Header>\n                <Table.Body>\n                  {invoice.items.map((item, idx) => {\n                    const border =\n                      idx === invoice.items.length - 1 ? \"border-b-0\" : \"\";\n                    return (\n                      <Table.Row\n                        key={item.description}\n                        className=\"hover:bg-transparent dark:hover:bg-transparent\"\n                      >\n                        <Table.Cell className={`${border} py-5`}>\n                          <div className=\"font-medium text-[var(--color-text-primary)]\">\n                            {item.description}\n                          </div>\n                          <div className=\"mt-1 text-sm text-[var(--color-text-secondary)]\">\n                            {item.detail}\n                          </div>\n                        </Table.Cell>\n                        <Table.Cell\n                          align=\"center\"\n                          className={`${border} py-5 text-[var(--color-text-secondary)]`}\n                        >\n                          {item.quantity}\n                        </Table.Cell>\n                        <Table.Cell\n                          align=\"right\"\n                          className={`${border} py-5 text-[var(--color-text-secondary)]`}\n                        >\n                          {item.unitPrice}\n                        </Table.Cell>\n                        <Table.Cell\n                          align=\"right\"\n                          className={`${border} py-5 font-medium text-[var(--color-text-primary)]`}\n                        >\n                          {item.amount}\n                        </Table.Cell>\n                      </Table.Row>\n                    );\n                  })}\n                </Table.Body>\n              </Table>\n            </div>\n\n            <div className=\"border-t border-[var(--color-border)] bg-[var(--color-surface)] px-5 py-5 sm:px-8 lg:px-10\">\n              <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n                <div>\n                  <div className=\"text-sm font-semibold text-[var(--color-text-primary)]\">\n                    {invoice.noteTitle}\n                  </div>\n                  <div className=\"mt-1 max-w-2xl text-sm leading-6 text-[var(--color-text-secondary)]\">\n                    {invoice.note}\n                  </div>\n                </div>\n                <div className=\"text-sm font-medium text-[var(--color-primary)]\">\n                  flikkui.com/pay/{invoice.title.toLowerCase()}\n                </div>\n              </div>\n            </div>\n          </Card.Body>\n        </Card>\n      </div>\n    </div>\n  );\n};\n\nconst InvoiceFact = ({\n  label,\n  value,\n  tone,\n}: {\n  label: string;\n  value: string;\n  tone?: \"success\" | \"danger\";\n}) => {\n  const toneClass =\n    tone === \"success\"\n      ? \"text-[var(--color-success)]\"\n      : tone === \"danger\"\n        ? \"text-[var(--color-danger)]\"\n        : \"text-[var(--color-text-primary)]\";\n\n  return (\n    <div>\n      <div className=\"text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]\">\n        {label}\n      </div>\n      <div className={`mt-2 font-medium ${toneClass}`}>{value}</div>\n    </div>\n  );\n};\n\nconst SummaryRow = ({\n  label,\n  value,\n  muted = false,\n}: {\n  label: string;\n  value: string;\n  muted?: boolean;\n}) => (\n  <div\n    className={`flex items-center justify-between ${\n      muted ? \"text-[var(--color-text-secondary)]\" : \"text-[var(--color-text-primary)]\"\n    }`}\n  >\n    <span>{label}</span>\n    <span className=\"font-medium\">{value}</span>\n  </div>\n);\n\nexport const Default: Story = {\n  render: () => <InvoiceLayout invoice={paidInvoice} />,\n  parameters: {\n    controls: { disable: true },\n  },\n};\n\nexport const Overdue: Story = {\n  render: () => <InvoiceLayout invoice={overdueInvoice} />,\n  parameters: {\n    controls: { disable: true },\n  },\n};"
-    },
-    {
-      "name": "LMSDashboardLayout",
-      "title": "Blocks/LMSDashboardLayout",
-      "description": "Full-page composition using AppShell, Avatar, Badge, Button, ….",
-      "componentsUsed": [
-        "AppShell",
-        "Avatar",
-        "Badge",
-        "Button",
-        "Card",
-        "Grid",
-        "Metric",
-        "NavItem",
-        "Progress",
-        "PromptInput",
-        "PromptSuggestion",
-        "Section",
-        "Sidebar",
-        "Table",
-        "Timeline"
-      ],
-      "source": "import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport {\n  Avatar,\n  Badge,\n  Button,\n  Card,\n  NavItem,\n  Progress,\n  Sidebar,\n} from \"../../components/core\";\nimport { AppShell, Grid, Section } from \"../../components/layout\";\nimport { Metric, Table, Timeline } from \"../../components/data-display\";\nimport type { Column } from \"../../components/data-display\";\nimport { PromptInput, PromptSuggestion } from \"../../components/ai\";\nimport {\n  AcademicCapIcon,\n  ArrowRightIcon,\n  BookOpenIcon,\n  ChartBarIcon,\n  ChatBubbleLeftRightIcon,\n  CheckCircleIcon,\n  ClockIcon,\n  FireIcon,\n  HomeIcon,\n  PresentationChartLineIcon,\n  ShieldCheckIcon,\n  SparklesIcon,\n  Squares2X2Icon,\n  TrophyIcon,\n  UserGroupIcon,\n  VideoCameraIcon,\n} from \"@heroicons/react/24/outline\";\nimport { StarIcon as StarSolidIcon } from \"@heroicons/react/24/solid\";\n\nconst meta: Meta = {\n  title: \"Blocks/LMSDashboardLayout\",\n  parameters: { layout: \"fullscreen\" },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\n// --- To do: assigned learning, sorted by due date ---\n\ninterface Assignment {\n  id: string;\n  title: string;\n  detail: string;\n  type: \"Course\" | \"Path\" | \"Live\";\n  due: string;\n  urgency: \"overdue\" | \"soon\" | \"later\";\n  progress: number;\n  icon: React.ReactNode;\n  iconClassName: string;\n}\n\nconst assignments: Assignment[] = [\n  {\n    id: \"1\",\n    title: \"Security & Data Privacy Essentials\",\n    detail: \"Annual compliance · 6 lessons\",\n    type: \"Course\",\n    due: \"Overdue · Jun 10\",\n    urgency: \"overdue\",\n    progress: 45,\n    icon: <ShieldCheckIcon className=\"size-4\" />,\n    iconClassName: \"bg-[var(--color-danger-50)] text-[var(--color-danger-600)]\",\n  },\n  {\n    id: \"2\",\n    title: \"Giving Effective Feedback\",\n    detail: \"Manager Essentials path · Step 3 of 5\",\n    type: \"Path\",\n    due: \"Due tomorrow\",\n    urgency: \"soon\",\n    progress: 70,\n    icon: <ChatBubbleLeftRightIcon className=\"size-4\" />,\n    iconClassName:\n      \"bg-[var(--color-primary-50)] text-[var(--color-primary-600)]\",\n  },\n  {\n    id: \"3\",\n    title: \"Q3 Product Deep-Dive\",\n    detail: \"Live session · Hosted by Product team\",\n    type: \"Live\",\n    due: \"Jun 16 · 4:00 PM\",\n    urgency: \"later\",\n    progress: 0,\n    icon: <VideoCameraIcon className=\"size-4\" />,\n    iconClassName:\n      \"bg-[var(--color-success-50)] text-[var(--color-success-600)]\",\n  },\n  {\n    id: \"4\",\n    title: \"Figma for Cross-Functional Teams\",\n    detail: \"Design fundamentals · 9 lessons\",\n    type: \"Course\",\n    due: \"Due Jun 24\",\n    urgency: \"later\",\n    progress: 20,\n    icon: <Squares2X2Icon className=\"size-4\" />,\n    iconClassName:\n      \"bg-[var(--color-warning-50)] text-[var(--color-warning-600)]\",\n  },\n];\n\nconst dueBadgeColor: Record<Assignment[\"urgency\"], \"danger\" | \"warning\" | \"neutral\"> = {\n  overdue: \"danger\",\n  soon: \"warning\",\n  later: \"neutral\",\n};\n\nconst assignmentColumns: Column<Assignment>[] = [\n  {\n    id: \"title\",\n    header: \"Assignment\",\n    accessor: \"title\",\n    cell: (row) => (\n      <div className=\"flex items-center gap-3\">\n        <div\n          className={`flex size-9 shrink-0 items-center justify-center rounded-lg ${row.iconClassName}`}\n        >\n          {row.icon}\n        </div>\n        <div className=\"min-w-0\">\n          <div className=\"truncate font-medium text-[var(--color-text-primary)]\">\n            {row.title}\n          </div>\n          <div className=\"truncate text-xs text-[var(--color-text-muted)]\">\n            {row.detail}\n          </div>\n        </div>\n      </div>\n    ),\n  },\n  {\n    id: \"type\",\n    header: \"Type\",\n    accessor: \"type\",\n    cell: (row) => (\n      <Badge color=\"neutral\" variant=\"soft\" size=\"sm\">\n        {row.type}\n      </Badge>\n    ),\n  },\n  {\n    id: \"due\",\n    header: \"Due\",\n    accessor: \"due\",\n    cell: (row) => (\n      <Badge color={dueBadgeColor[row.urgency]} variant=\"soft\" size=\"sm\">\n        {row.due}\n      </Badge>\n    ),\n  },\n  {\n    id: \"progress\",\n    header: \"Progress\",\n    accessor: \"progress\",\n    width: 180,\n    cell: (row) =>\n      row.type === \"Live\" ? (\n        <span className=\"text-xs text-[var(--color-text-muted)]\">\n          Enrolled\n        </span>\n      ) : (\n        <Progress value={row.progress} size=\"sm\" showLabel />\n      ),\n  },\n  {\n    id: \"action\",\n    header: \"\",\n    accessor: \"id\",\n    align: \"right\",\n    cell: (row) => (\n      <Button variant=\"ghost\" color=\"neutral\" size=\"sm\">\n        {row.type === \"Live\" ? \"Join\" : \"Continue\"}\n        <ArrowRightIcon className=\"size-3.5\" />\n      </Button>\n    ),\n  },\n];\n\n// --- Continue learning ---\n\nconst inProgressCourses = [\n  {\n    title: \"Advanced Prompt Engineering\",\n    category: \"AI & Data\",\n    lessons: \"Lesson 12 of 18\",\n    progress: 68,\n    timeLeft: \"24 min left\",\n    gradient:\n      \"from-[var(--color-primary-400)] to-[var(--color-primary-700)]\",\n    icon: <SparklesIcon className=\"size-7\" />,\n  },\n  {\n    title: \"Storytelling with Data\",\n    category: \"Communication\",\n    lessons: \"Lesson 4 of 11\",\n    progress: 35,\n    timeLeft: \"1h 10m left\",\n    gradient:\n      \"from-[var(--color-warning-400)] to-[var(--color-warning-600)]\",\n    icon: <PresentationChartLineIcon className=\"size-7\" />,\n  },\n  {\n    title: \"Negotiation Fundamentals\",\n    category: \"Sales\",\n    lessons: \"Lesson 9 of 10\",\n    progress: 82,\n    timeLeft: \"15 min left\",\n    gradient:\n      \"from-[var(--color-success-400)] to-[var(--color-success-700)]\",\n    icon: <UserGroupIcon className=\"size-7\" />,\n  },\n];\n\n// --- Leaderboard ---\n\nconst leaderboard = [\n  {\n    rank: 1,\n    name: \"Jonas Lindqvist\",\n    team: \"Engineering\",\n    points: 2840,\n    avatar: \"https://i.pravatar.cc/150?u=jonas-lindqvist\",\n  },\n  {\n    rank: 2,\n    name: \"Priya Sharma\",\n    team: \"Product\",\n    points: 2615,\n    avatar: \"https://i.pravatar.cc/150?u=priya-sharma\",\n  },\n  {\n    rank: 3,\n    name: \"Tom Becker\",\n    team: \"Sales\",\n    points: 2390,\n    avatar: \"https://i.pravatar.cc/150?u=tom-becker\",\n  },\n  {\n    rank: 4,\n    name: \"Maya Patel\",\n    team: \"Design\",\n    points: 2210,\n    avatar: \"https://i.pravatar.cc/150?u=maya-patel\",\n    isYou: true,\n  },\n  {\n    rank: 5,\n    name: \"Sofia Reyes\",\n    team: \"Marketing\",\n    points: 2045,\n    avatar: \"https://i.pravatar.cc/150?u=sofia-reyes\",\n  },\n];\n\n// --- AI recommendations ---\n\nconst recommendations = [\n  {\n    title: \"Running Inclusive Meetings\",\n    category: \"Leadership\",\n    duration: \"35 min\",\n    rating: 4.8,\n    icon: <UserGroupIcon className=\"size-5\" />,\n    iconClassName:\n      \"bg-[var(--color-primary-50)] text-[var(--color-primary-600)]\",\n  },\n  {\n    title: \"SQL for Product Managers\",\n    category: \"AI & Data\",\n    duration: \"1h 20m\",\n    rating: 4.9,\n    icon: <ChartBarIcon className=\"size-5\" />,\n    iconClassName:\n      \"bg-[var(--color-success-50)] text-[var(--color-success-600)]\",\n  },\n  {\n    title: \"Writing Crisp Product Specs\",\n    category: \"Communication\",\n    duration: \"50 min\",\n    rating: 4.7,\n    icon: <BookOpenIcon className=\"size-5\" />,\n    iconClassName:\n      \"bg-[var(--color-warning-50)] text-[var(--color-warning-600)]\",\n  },\n  {\n    title: \"Coaching Through Change\",\n    category: \"Leadership\",\n    duration: \"45 min\",\n    rating: 4.6,\n    icon: <ChatBubbleLeftRightIcon className=\"size-5\" />,\n    iconClassName:\n      \"bg-[var(--color-danger-50)] text-[var(--color-danger-600)]\",\n  },\n];\n\nexport const Default: Story = {\n  render: () => (\n    <AppShell contentPadding=\"lg\" contentWidth=\"wide\">\n      <AppShell.Sidebar\n        width=\"auto\"\n        collapsedOnMobile={false}\n        theme={{ sidebar: \"flex flex-col shrink-0\" }}\n      >\n        <Sidebar variant=\"floating\">\n          <Sidebar.Header\n            logo={\n              <Sidebar.Logo\n                icon={\n                  <div className=\"flex size-8 items-center justify-center rounded-lg bg-[var(--color-primary)] text-white\">\n                    <AcademicCapIcon className=\"size-5\" />\n                  </div>\n                }\n                text=\"Flikk Learn\"\n              />\n            }\n          />\n          <Sidebar.Search placeholder=\"Search learning…\" />\n          <Sidebar.Content>\n            <Sidebar.Nav>\n              <Sidebar.NavGroup title=\"Learn\">\n                <NavItem startContent={<HomeIcon />} active>\n                  Home\n                </NavItem>\n                <NavItem startContent={<BookOpenIcon />} notification={3}>\n                  My Learning\n                </NavItem>\n                <NavItem startContent={<Squares2X2Icon />}>Library</NavItem>\n                <NavItem startContent={<VideoCameraIcon />}>\n                  Live Sessions\n                </NavItem>\n                <NavItem startContent={<TrophyIcon />}>Skills</NavItem>\n              </Sidebar.NavGroup>\n              <Sidebar.NavGroup title=\"Manage\">\n                <NavItem startContent={<ChartBarIcon />}>Insights</NavItem>\n              </Sidebar.NavGroup>\n            </Sidebar.Nav>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Toggle />\n            <Sidebar.UserProfile\n              name=\"Maya Patel\"\n              email=\"maya@flikk.io\"\n              avatar=\"https://i.pravatar.cc/150?u=maya-patel\"\n              status=\"online\"\n            />\n          </Sidebar.Footer>\n        </Sidebar>\n      </AppShell.Sidebar>\n\n      {/* Recessed floor (NodeCanvas-style) so the borderless white cards read\n          as panels above the canvas — the GenerativeUI-block look. */}\n      <AppShell.Main\n        theme={{ mainScroll: \"min-h-0 flex-1 bg-[var(--color-surface-sunken)]\" }}\n      >\n        <div className=\"mx-auto max-w-6xl space-y-10 pb-12\">\n          {/* Hero — greeting + AI ask bar (the Sana signature) */}\n          <div className=\"flex flex-col items-center pt-8 text-center\">\n            <h1 className=\"text-3xl font-semibold tracking-tight text-[var(--color-text-primary)]\">\n              Good morning, Maya\n            </h1>\n            <p className=\"mt-2 text-sm text-[var(--color-text-muted)]\">\n              You have 2 assignments due this week and a live session today at\n              4:00 PM.\n            </p>\n            <div className=\"mt-6 w-full max-w-2xl\">\n              <PromptInput\n                placeholder=\"Ask anything — find a course, company knowledge, or get help…\"\n                showAttachmentButton={false}\n                showVoiceButton={false}\n                showModelSelector={false}\n                showSettingsButton={false}\n                onSubmit={() => {}}\n              />\n            </div>\n            <div className=\"mt-4 flex flex-wrap items-center justify-center gap-2\">\n              <PromptSuggestion\n                icon={<SparklesIcon className=\"size-4\" />}\n                onSelect={() => {}}\n              >\n                What should I learn next?\n              </PromptSuggestion>\n              <PromptSuggestion\n                icon={<SparklesIcon className=\"size-4\" />}\n                onSelect={() => {}}\n              >\n                Summarize my overdue work\n              </PromptSuggestion>\n              <PromptSuggestion\n                icon={<SparklesIcon className=\"size-4\" />}\n                onSelect={() => {}}\n              >\n                Find courses on negotiation\n              </PromptSuggestion>\n            </div>\n          </div>\n\n          {/* Stats strip — bare ghost Metrics on the canvas (GenerativeUI\n              treatment). Metric renders its own Card shell internally, so it\n              must NOT be wrapped in another Card. */}\n          <Grid cols={4} gap={4}>\n            <Metric\n              label=\"Courses completed\"\n              value={12}\n              trendValue=\"+3 this month\"\n              trendDirection=\"up\"\n              icon={<CheckCircleIcon />}\n              color=\"success\"\n              size=\"sm\"\n              variant=\"ghost\"\n            />\n            <Metric\n              label=\"Learning streak\"\n              value=\"8 days\"\n              subtitle=\"Best: 21 days\"\n              icon={<FireIcon />}\n              color=\"warning\"\n              size=\"sm\"\n              variant=\"ghost\"\n            />\n            <Metric\n              label=\"Time this month\"\n              value=\"14.5h\"\n              trendValue=\"+2.1h\"\n              trendDirection=\"up\"\n              icon={<ClockIcon />}\n              color=\"primary\"\n              size=\"sm\"\n              variant=\"ghost\"\n            />\n            <Metric\n              label=\"Badges earned\"\n              value={6}\n              subtitle=\"2 skills in progress\"\n              icon={<TrophyIcon />}\n              color=\"neutral\"\n              size=\"sm\"\n              variant=\"ghost\"\n            />\n          </Grid>\n\n          {/* To do */}\n          <Section\n            title=\"To do\"\n            subtitle=\"Assigned learning, sorted by due date\"\n            actions={\n              <Button variant=\"ghost\" color=\"neutral\" size=\"sm\">\n                View all\n              </Button>\n            }\n          >\n            <Card>\n              <Table\n                data={assignments}\n                columns={assignmentColumns}\n                rowKey=\"id\"\n                padding=\"flush\"\n              />\n            </Card>\n          </Section>\n\n          {/* Continue learning */}\n          <Section\n            title=\"Continue learning\"\n            subtitle=\"Pick up where you left off\"\n          >\n            <Grid cols={3} gap={4}>\n              {inProgressCourses.map((course) => (\n                <Card key={course.title} className=\"overflow-hidden\">\n                  <div\n                    className={`flex h-28 items-center justify-center bg-gradient-to-br text-white ${course.gradient}`}\n                  >\n                    {course.icon}\n                  </div>\n                  <Card.Body>\n                    <Badge color=\"neutral\" variant=\"soft\" size=\"sm\">\n                      {course.category}\n                    </Badge>\n                    <h3 className=\"mt-2 font-medium text-[var(--color-text-primary)]\">\n                      {course.title}\n                    </h3>\n                    <p className=\"mt-0.5 text-xs text-[var(--color-text-muted)]\">\n                      {course.lessons}\n                    </p>\n                    <div className=\"mt-3\">\n                      <Progress value={course.progress} size=\"sm\" showLabel />\n                    </div>\n                    <div className=\"mt-4 flex items-center justify-between\">\n                      <span className=\"text-xs text-[var(--color-text-muted)]\">\n                        {course.timeLeft}\n                      </span>\n                      <Button size=\"sm\">\n                        Resume\n                        <ArrowRightIcon className=\"size-3.5\" />\n                      </Button>\n                    </div>\n                  </Card.Body>\n                </Card>\n              ))}\n            </Grid>\n          </Section>\n\n          {/* Sessions + leaderboard */}\n          <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-3\">\n            <Card\n              title=\"Upcoming live sessions\"\n              subtitle=\"Self-enroll while seats last\"\n              actions={\n                <Button variant=\"ghost\" color=\"neutral\" size=\"sm\">\n                  View calendar\n                </Button>\n              }\n              className=\"lg:col-span-2\"\n            >\n              <Timeline\n                items={[\n                  {\n                    status: \"active\",\n                    title: \"Q3 Product Deep-Dive\",\n                    description: (\n                      <span className=\"flex flex-wrap items-center gap-2\">\n                        Hosted by the Product team\n                        <Badge color=\"success\" variant=\"soft\" size=\"sm\">\n                          14 seats left\n                        </Badge>\n                      </span>\n                    ),\n                    timestamp: \"Today · 4:00 PM\",\n                    icon: <VideoCameraIcon className=\"size-3.5\" />,\n                  },\n                  {\n                    status: \"pending\",\n                    title: \"Manager AMA with the People team\",\n                    description: \"Open Q&A — bring your trickiest situations\",\n                    timestamp: \"Jun 16 · 11:00 AM\",\n                  },\n                  {\n                    status: \"pending\",\n                    title: \"Workshop: Storytelling with Data\",\n                    description: (\n                      <span className=\"flex flex-wrap items-center gap-2\">\n                        Hands-on, capped at 20 participants\n                        <Badge color=\"warning\" variant=\"soft\" size=\"sm\">\n                          3 seats left\n                        </Badge>\n                      </span>\n                    ),\n                    timestamp: \"Jun 19 · 2:00 PM\",\n                  },\n                ]}\n              />\n            </Card>\n\n            <Card title=\"Skills leaderboard\" subtitle=\"This quarter\">\n              <div className=\"space-y-1\">\n                {leaderboard.map((person) => (\n                  <div\n                    key={person.rank}\n                    className={`flex items-center gap-3 rounded-lg px-2 py-2 ${\n                      person.isYou ? \"bg-[var(--color-primary-50)]\" : \"\"\n                    }`}\n                  >\n                    <span className=\"w-5 text-center text-sm font-semibold text-[var(--color-text-muted)]\">\n                      {person.rank}\n                    </span>\n                    <Avatar src={person.avatar} name={person.name} size=\"sm\" />\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"truncate text-sm font-medium text-[var(--color-text-primary)]\">\n                        {person.name}\n                      </div>\n                      <div className=\"truncate text-xs text-[var(--color-text-muted)]\">\n                        {person.team}\n                        {person.isYou && (\n                          <span className=\"text-[var(--color-primary-600)]\">\n                            {\" \"}\n                            · You\n                          </span>\n                        )}\n                      </div>\n                    </div>\n                    <span className=\"text-sm font-semibold text-[var(--color-text-secondary)]\">\n                      {person.points.toLocaleString()}\n                    </span>\n                    {person.rank === 1 && (\n                      <TrophyIcon className=\"size-4 text-[var(--color-warning-500)]\" />\n                    )}\n                  </div>\n                ))}\n              </div>\n            </Card>\n          </div>\n\n          {/* AI recommendations */}\n          <Section\n            title=\"You might like\"\n            subtitle=\"Picked for you based on your role and recent learning\"\n          >\n            <Grid cols={4} gap={4}>\n              {recommendations.map((course) => (\n                <Card key={course.title} className=\"transition-shadow hover:shadow-md\">\n                  <Card.Body>\n                    <div\n                      className={`flex size-10 items-center justify-center rounded-lg ${course.iconClassName}`}\n                    >\n                      {course.icon}\n                    </div>\n                    <h3 className=\"mt-3 text-sm font-medium text-[var(--color-text-primary)]\">\n                      {course.title}\n                    </h3>\n                    <div className=\"mt-2 flex items-center gap-2 text-xs text-[var(--color-text-muted)]\">\n                      <span>{course.duration}</span>\n                      <span aria-hidden=\"true\">·</span>\n                      <span className=\"flex items-center gap-0.5\">\n                        <StarSolidIcon className=\"size-3.5 text-[var(--color-warning-500)]\" />\n                        {course.rating}\n                      </span>\n                    </div>\n                    <div className=\"mt-3\">\n                      <Badge color=\"neutral\" variant=\"soft\" size=\"sm\">\n                        {course.category}\n                      </Badge>\n                    </div>\n                  </Card.Body>\n                </Card>\n              ))}\n            </Grid>\n          </Section>\n        </div>\n      </AppShell.Main>\n    </AppShell>\n  ),\n  parameters: {\n    controls: { disable: true },\n  },\n};"
+      "source": "import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport {\n  Badge,\n  Button,\n  ButtonGroup,\n  Card,\n  Separator,\n} from \"../../components/core\";\nimport { Table } from \"../../components/data-display\";\nimport { DownloadSimple as ArrowDownTrayIcon, PaperPlaneTilt as PaperAirplaneIcon, Check as CheckIcon } from \"@phosphor-icons/react\";\n\nconst meta: Meta = {\n  title: \"Blocks/InvoiceLayout\",\n  parameters: {\n    layout: \"fullscreen\",\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\ntype InvoiceItem = {\n  description: string;\n  detail: string;\n  quantity: string;\n  unitPrice: string;\n  amount: string;\n};\n\ntype Invoice = {\n  status: \"paid\" | \"overdue\";\n  title: string;\n  customer: string;\n  customerEmail: string;\n  customerAddress: string;\n  issued: string;\n  due: string;\n  paidOn?: string;\n  terms: string;\n  subtotal: string;\n  tax: string;\n  total: string;\n  noteTitle: string;\n  note: string;\n  items: InvoiceItem[];\n};\n\nconst paidInvoice: Invoice = {\n  status: \"paid\",\n  title: \"INV-2024-001\",\n  customer: \"Acme Corporation\",\n  customerEmail: \"billing@acme.com\",\n  customerAddress: \"456 Business Ave, New York, NY 10001\",\n  issued: \"Jan 15, 2025\",\n  due: \"Feb 15, 2025\",\n  paidOn: \"Feb 10, 2025\",\n  terms: \"Net 30\",\n  subtotal: \"$1,273.00\",\n  tax: \"$127.30\",\n  total: \"$1,400.30\",\n  noteTitle: \"Payment received\",\n  note: \"Bank transfer cleared on Feb 10, 2025. Receipt sent to billing@acme.com.\",\n  items: [\n    {\n      description: \"UI Component Library License\",\n      detail: \"Pro plan, annual billing\",\n      quantity: \"1\",\n      unitPrice: \"$299.00\",\n      amount: \"$299.00\",\n    },\n    {\n      description: \"Priority Support Package\",\n      detail: \"Annual SLA with email and chat coverage\",\n      quantity: \"1\",\n      unitPrice: \"$149.00\",\n      amount: \"$149.00\",\n    },\n    {\n      description: \"Custom Theme Development\",\n      detail: \"Brand token setup and interaction states\",\n      quantity: \"3\",\n      unitPrice: \"$75.00\",\n      amount: \"$225.00\",\n    },\n    {\n      description: \"Design Consultation\",\n      detail: \"Implementation review and component guidance\",\n      quantity: \"5\",\n      unitPrice: \"$120.00\",\n      amount: \"$600.00\",\n    },\n  ],\n};\n\nconst overdueInvoice: Invoice = {\n  status: \"overdue\",\n  title: \"INV-2025-019\",\n  customer: \"Globex Corporation\",\n  customerEmail: \"accounts@globex.com\",\n  customerAddress: \"789 Industry Blvd, Chicago, IL 60601\",\n  issued: \"Dec 1, 2025\",\n  due: \"Dec 31, 2025\",\n  terms: \"Net 30\",\n  subtotal: \"$4,950.00\",\n  tax: \"$495.00\",\n  total: \"$5,445.00\",\n  noteTitle: \"Payment overdue\",\n  note: \"A reminder was sent to accounts@globex.com. Keep the payment link active until the balance is settled.\",\n  items: [\n    {\n      description: \"Enterprise License\",\n      detail: \"Unlimited seats and advanced permissions\",\n      quantity: \"1\",\n      unitPrice: \"$2,400.00\",\n      amount: \"$2,400.00\",\n    },\n    {\n      description: \"Dedicated Onboarding\",\n      detail: \"Two live training sessions for admins\",\n      quantity: \"2\",\n      unitPrice: \"$800.00\",\n      amount: \"$1,600.00\",\n    },\n    {\n      description: \"Custom SSO Integration\",\n      detail: \"SAML configuration and launch support\",\n      quantity: \"1\",\n      unitPrice: \"$950.00\",\n      amount: \"$950.00\",\n    },\n  ],\n};\n\nconst InvoiceLayout = ({ invoice }: { invoice: Invoice }) => {\n  const isPaid = invoice.status === \"paid\";\n\n  return (\n    <div className=\"min-h-screen bg-[var(--color-background)] px-4 py-6 text-[var(--color-text-primary)] sm:px-6 lg:px-8\">\n      <div className=\"mx-auto max-w-5xl space-y-5\">\n        <div className=\"flex flex-col gap-4 rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)]/80 px-4 py-4 shadow-[0_16px_40px_rgba(50,50,93,0.08)] backdrop-blur sm:flex-row sm:items-center sm:justify-between sm:px-5\">\n          <div className=\"min-w-0\">\n            <div className=\"mb-2 flex items-center gap-2\">\n              {isPaid ? (\n                <Badge color=\"success\" variant=\"soft\" withDot pill>\n                  Paid\n                </Badge>\n              ) : (\n                <Badge color=\"danger\" variant=\"soft\" withDot pill>\n                  Past due\n                </Badge>\n              )}\n              <span className=\"text-xs font-medium uppercase tracking-wide text-[var(--color-text-muted)]\">\n                Flikkui Billing\n              </span>\n            </div>\n            <h1 className=\"truncate text-xl font-semibold text-[var(--color-text-primary)] sm:text-2xl\">\n              Invoice {invoice.title}\n            </h1>\n          </div>\n\n          <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center\">\n            <ButtonGroup>\n              <Button variant=\"outline\" color=\"mono\" size=\"sm\">\n                <ArrowDownTrayIcon className=\"size-4\" />\n                Download\n              </Button>\n              <Button variant=\"outline\" color=\"mono\" size=\"sm\">\n                <PaperAirplaneIcon className=\"size-4\" />\n                {isPaid ? \"Send receipt\" : \"Send reminder\"}\n              </Button>\n            </ButtonGroup>\n            {!isPaid && (\n              <Button variant=\"filled\" color=\"primary\" size=\"sm\">\n                <CheckIcon className=\"size-4\" />\n                Mark as paid\n              </Button>\n            )}\n          </div>\n        </div>\n\n        <Card className=\"overflow-hidden border-[var(--color-border)] bg-[var(--color-surface)] shadow-[0_24px_64px_rgba(50,50,93,0.12)]\">\n          <Card.Body className=\"p-0\">\n            <div className=\"grid gap-8 border-b border-[var(--color-border)] px-5 py-8 sm:px-8 lg:grid-cols-[1fr_300px] lg:px-10\">\n              <div className=\"space-y-10\">\n                <div>\n                  <div className=\"mb-8 flex items-center gap-3\">\n                    <div className=\"flex size-10 items-center justify-center rounded-xl bg-[var(--color-primary)] text-sm font-bold text-[var(--color-primary-contrast)] shadow-[0_8px_24px_rgba(99,91,255,0.28)]\">\n                      F\n                    </div>\n                    <div>\n                      <div className=\"text-base font-semibold text-[var(--color-text-primary)]\">\n                        Flikkui Inc.\n                      </div>\n                      <div className=\"text-sm text-[var(--color-text-secondary)]\">\n                        hello@flikkui.com\n                      </div>\n                    </div>\n                  </div>\n\n                  <p className=\"max-w-xl text-4xl font-semibold leading-tight text-[var(--color-text-primary)] sm:text-5xl\">\n                    {invoice.total}\n                  </p>\n                  <p className=\"mt-2 text-sm text-[var(--color-text-secondary)]\">\n                    Due {invoice.due} for {invoice.customer}\n                  </p>\n                </div>\n\n                <div className=\"grid gap-6 sm:grid-cols-2\">\n                  <div>\n                    <div className=\"text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]\">\n                      Bill to\n                    </div>\n                    <div className=\"mt-3 text-sm font-medium text-[var(--color-text-primary)]\">\n                      {invoice.customer}\n                    </div>\n                    <div className=\"mt-1 max-w-xs text-sm leading-6 text-[var(--color-text-secondary)]\">\n                      {invoice.customerAddress}\n                      <br />\n                      {invoice.customerEmail}\n                    </div>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4 text-sm\">\n                    <InvoiceFact label=\"Invoice\" value={invoice.title} />\n                    <InvoiceFact label=\"Terms\" value={invoice.terms} />\n                    <InvoiceFact label=\"Issued\" value={invoice.issued} />\n                    <InvoiceFact\n                      label={isPaid ? \"Paid\" : \"Due\"}\n                      value={\n                        isPaid ? invoice.paidOn || invoice.due : invoice.due\n                      }\n                      tone={isPaid ? \"success\" : \"danger\"}\n                    />\n                  </div>\n                </div>\n              </div>\n\n              <div className=\"self-start rounded-2xl border border-[var(--color-border)] p-5\">\n                <div className=\"flex items-start justify-between gap-4\">\n                  <div>\n                    <div className=\"text-sm font-semibold text-[var(--color-text-primary)]\">\n                      Amount {isPaid ? \"paid\" : \"due\"}\n                    </div>\n                    <div className=\"mt-1 text-sm text-[var(--color-text-secondary)]\">\n                      {isPaid\n                        ? \"Settled by bank transfer\"\n                        : \"Awaiting customer payment\"}\n                    </div>\n                  </div>\n                  {isPaid ? (\n                    <Badge color=\"success\" variant=\"soft\" size=\"sm\" pill>\n                      Complete\n                    </Badge>\n                  ) : (\n                    <Badge color=\"danger\" variant=\"soft\" size=\"sm\" pill>\n                      Action needed\n                    </Badge>\n                  )}\n                </div>\n\n                <Separator className=\"my-4\" />\n\n                <div className=\"space-y-2.5 text-sm\">\n                  <SummaryRow label=\"Subtotal\" value={invoice.subtotal} />\n                  <SummaryRow label=\"Tax\" value={invoice.tax} muted />\n                </div>\n\n                <div className=\"mt-4 flex items-baseline justify-between border-t border-[var(--color-border)] pt-4\">\n                  <span className=\"text-sm font-medium text-[var(--color-text-secondary)]\">\n                    Total\n                  </span>\n                  <span className=\"text-xl font-semibold text-[var(--color-text-primary)]\">\n                    {invoice.total}\n                  </span>\n                </div>\n              </div>\n            </div>\n\n            <div className=\"px-5 py-6 sm:px-8 lg:px-10\">\n              <Table\n                padding=\"flush\"\n                className=\"min-w-[680px] border-separate border-spacing-0\"\n              >\n                <Table.Header>\n                  <Table.Row className=\"hover:bg-transparent dark:hover:bg-transparent\">\n                    <Table.HeaderCell className=\"border-b border-[var(--color-border)] bg-[var(--color-surface)] pb-3 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]\">\n                      Description\n                    </Table.HeaderCell>\n                    <Table.HeaderCell\n                      align=\"center\"\n                      className=\"border-b border-[var(--color-border)] bg-[var(--color-surface)] pb-3 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]\"\n                    >\n                      Qty\n                    </Table.HeaderCell>\n                    <Table.HeaderCell\n                      align=\"right\"\n                      className=\"border-b border-[var(--color-border)] bg-[var(--color-surface)] pb-3 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]\"\n                    >\n                      Unit price\n                    </Table.HeaderCell>\n                    <Table.HeaderCell\n                      align=\"right\"\n                      className=\"border-b border-[var(--color-border)] bg-[var(--color-surface)] pb-3 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]\"\n                    >\n                      Amount\n                    </Table.HeaderCell>\n                  </Table.Row>\n                </Table.Header>\n                <Table.Body>\n                  {invoice.items.map((item, idx) => {\n                    const border =\n                      idx === invoice.items.length - 1 ? \"border-b-0\" : \"\";\n                    return (\n                      <Table.Row\n                        key={item.description}\n                        className=\"hover:bg-transparent dark:hover:bg-transparent\"\n                      >\n                        <Table.Cell className={`${border} py-5`}>\n                          <div className=\"font-medium text-[var(--color-text-primary)]\">\n                            {item.description}\n                          </div>\n                          <div className=\"mt-1 text-sm text-[var(--color-text-secondary)]\">\n                            {item.detail}\n                          </div>\n                        </Table.Cell>\n                        <Table.Cell\n                          align=\"center\"\n                          className={`${border} py-5 text-[var(--color-text-secondary)]`}\n                        >\n                          {item.quantity}\n                        </Table.Cell>\n                        <Table.Cell\n                          align=\"right\"\n                          className={`${border} py-5 text-[var(--color-text-secondary)]`}\n                        >\n                          {item.unitPrice}\n                        </Table.Cell>\n                        <Table.Cell\n                          align=\"right\"\n                          className={`${border} py-5 font-medium text-[var(--color-text-primary)]`}\n                        >\n                          {item.amount}\n                        </Table.Cell>\n                      </Table.Row>\n                    );\n                  })}\n                </Table.Body>\n              </Table>\n            </div>\n\n            <div className=\"border-t border-[var(--color-border)] bg-[var(--color-surface)] px-5 py-5 sm:px-8 lg:px-10\">\n              <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n                <div>\n                  <div className=\"text-sm font-semibold text-[var(--color-text-primary)]\">\n                    {invoice.noteTitle}\n                  </div>\n                  <div className=\"mt-1 max-w-2xl text-sm leading-6 text-[var(--color-text-secondary)]\">\n                    {invoice.note}\n                  </div>\n                </div>\n                <div className=\"text-sm font-medium text-[var(--color-primary)]\">\n                  flikkui.com/pay/{invoice.title.toLowerCase()}\n                </div>\n              </div>\n            </div>\n          </Card.Body>\n        </Card>\n      </div>\n    </div>\n  );\n};\n\nconst InvoiceFact = ({\n  label,\n  value,\n  tone,\n}: {\n  label: string;\n  value: string;\n  tone?: \"success\" | \"danger\";\n}) => {\n  const toneClass =\n    tone === \"success\"\n      ? \"text-[var(--color-success)]\"\n      : tone === \"danger\"\n        ? \"text-[var(--color-danger)]\"\n        : \"text-[var(--color-text-primary)]\";\n\n  return (\n    <div>\n      <div className=\"text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)]\">\n        {label}\n      </div>\n      <div className={`mt-2 font-medium ${toneClass}`}>{value}</div>\n    </div>\n  );\n};\n\nconst SummaryRow = ({\n  label,\n  value,\n  muted = false,\n}: {\n  label: string;\n  value: string;\n  muted?: boolean;\n}) => (\n  <div\n    className={`flex items-center justify-between ${\n      muted ? \"text-[var(--color-text-secondary)]\" : \"text-[var(--color-text-primary)]\"\n    }`}\n  >\n    <span>{label}</span>\n    <span className=\"font-medium\">{value}</span>\n  </div>\n);\n\nexport const Default: Story = {\n  render: () => <InvoiceLayout invoice={paidInvoice} />,\n  parameters: {\n    controls: { disable: true },\n  },\n};\n\nexport const Overdue: Story = {\n  render: () => <InvoiceLayout invoice={overdueInvoice} />,\n  parameters: {\n    controls: { disable: true },\n  },\n};"
     },
     {
       "name": "MailComposerLayout",
@@ -11136,7 +11632,7 @@
         "Tag",
         "Tooltip"
       ],
-      "source": "import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport {\n  Avatar,\n  Button,\n  Card,\n  Dropdown,\n  Icon,\n  Kbd,\n  Separator,\n  Tag,\n  Tooltip,\n} from \"../../components/core\";\nimport type { FileTypeName } from \"../../components/core\";\nimport { RichTextEditor } from \"../../components/forms\";\nimport {\n  PaperAirplaneIcon,\n  PaperClipIcon,\n  PhotoIcon,\n  LinkIcon,\n  FaceSmileIcon,\n  TrashIcon,\n  ChevronDownIcon,\n  XMarkIcon,\n  ClockIcon,\n} from \"@heroicons/react/24/outline\";\n\nconst meta: Meta = {\n  title: \"Blocks/MailComposerLayout\",\n  parameters: { layout: \"fullscreen\" },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\ntype Recipient = { name: string; email: string; src?: string };\n\nconst sender = {\n  name: \"Sarah Chen\",\n  email: \"sarah@flikkui.com\",\n  src: \"https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=80&h=80&fit=crop&crop=face\",\n};\n\nconst altAccount = {\n  name: \"Sarah Chen\",\n  email: \"sarah@personal.com\",\n  src: \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face\",\n};\n\nconst initialRecipients: Recipient[] = [\n  {\n    name: \"James Wilson\",\n    email: \"james@acme.co\",\n    src: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face\",\n  },\n  {\n    name: \"Emily Rodriguez\",\n    email: \"emily@acme.co\",\n    src: \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face\",\n  },\n];\n\nconst initialAttachments: { name: string; size: string }[] = [\n  { name: \"Q4-Roadmap-2026.pdf\", size: \"2.4 MB\" },\n  { name: \"timeline-chart.png\", size: \"340 KB\" },\n];\n\nconst SUPPORTED_FILE_TYPES: FileTypeName[] = [\n  \"pdf\", \"doc\", \"docx\", \"txt\", \"xls\", \"xlsx\", \"csv\", \"ppt\",\n  \"mp3\", \"wav\", \"mp4\", \"mov\", \"jpg\", \"png\", \"svg\", \"gif\", \"zip\", \"rar\",\n];\n\nconst fileTypeFromName = (name: string): FileTypeName | null => {\n  const ext = name.split(\".\").pop()?.toLowerCase();\n  if (ext && (SUPPORTED_FILE_TYPES as string[]).includes(ext)) {\n    return ext as FileTypeName;\n  }\n  return null;\n};\n\nconst initialBody = `<p>Hi James and Emily,</p>\n<p>I've finalized the Q4 product roadmap based on our discussion last week. Here are the key priorities:</p>\n<ol>\n  <li>AI Components — New chat interface suite (MessageHistory, PromptInput, CodeBlock)</li>\n  <li>Dark Mode — Full theming support across all 50+ components</li>\n  <li>Performance — Target 40% bundle size reduction with tree-shaking</li>\n  <li>Charts v2 — Simplified API with CSS variable theming</li>\n</ol>\n<p>I've attached the detailed document with timelines and resource allocation. Please review and share any feedback by Friday.</p>\n<p>Let me know if we need to schedule a follow-up meeting.</p>\n<p>Best,<br/>Sarah</p>`;\n\nconst MailComposer: React.FC = () => {\n  const [recipients, setRecipients] = useState<Recipient[]>(initialRecipients);\n  const [recipientInput, setRecipientInput] = useState(\"\");\n  const [subject, setSubject] = useState(\n    \"Q4 Product Roadmap — Review & Feedback\",\n  );\n  const [body, setBody] = useState(initialBody);\n  const [attachments, setAttachments] = useState(initialAttachments);\n\n  const addRecipient = (raw: string) => {\n    const value = raw.trim().replace(/[,;]$/, \"\").trim();\n    if (!value) return;\n    if (recipients.some((r) => r.email === value || r.name === value)) return;\n    const name = value.includes(\"@\") ? value.split(\"@\")[0] : value;\n    setRecipients([\n      ...recipients,\n      { name, email: value.includes(\"@\") ? value : `${name}@example.com` },\n    ]);\n    setRecipientInput(\"\");\n  };\n\n  const removeRecipient = (email: string) => {\n    setRecipients(recipients.filter((r) => r.email !== email));\n  };\n\n  const handleRecipientKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\" || e.key === \",\" || e.key === \"Tab\") {\n      if (recipientInput.trim()) {\n        e.preventDefault();\n        addRecipient(recipientInput);\n      }\n    } else if (\n      e.key === \"Backspace\" &&\n      recipientInput === \"\" &&\n      recipients.length > 0\n    ) {\n      e.preventDefault();\n      setRecipients(recipients.slice(0, -1));\n    }\n  };\n\n  const totalSize =\n    attachments.length > 0\n      ? `${attachments.length} attachment${attachments.length === 1 ? \"\" : \"s\"}`\n      : \"\";\n\n  return (\n    <div className=\"min-h-screen bg-[var(--color-background)] flex items-center justify-center p-4 sm:p-8\">\n      <Card className=\"w-full max-w-2xl rounded-2xl shadow-xl shadow-black/[0.06] overflow-hidden\">\n        {/* Header — sender + status + window controls */}\n        <div className=\"flex items-center justify-between gap-4 px-5 sm:px-6 py-4 border-b border-[var(--color-border)]\">\n          <Dropdown placement=\"bottom-start\">\n            <Dropdown.Trigger>\n              <button\n                type=\"button\"\n                className=\"group flex items-center gap-3 -ml-1 px-1 py-1 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors\"\n              >\n                <Avatar src={sender.src} name={sender.name} size=\"sm\" />\n                <div className=\"flex flex-col items-start leading-tight\">\n                  <span className=\"text-[11px] tracking-wider uppercase text-[var(--color-text-muted)]\">\n                    From\n                  </span>\n                  <span className=\"flex items-center gap-1 text-sm font-medium text-[var(--color-text-primary)]\">\n                    {sender.email}\n                    <ChevronDownIcon className=\"size-3.5 text-[var(--color-text-muted)]\" />\n                  </span>\n                </div>\n              </button>\n            </Dropdown.Trigger>\n            <Dropdown.Menu\n              aria-label=\"Select sending account\"\n              className=\"min-w-[220px]\"\n            >\n              <Dropdown.Item\n                itemKey=\"work\"\n                startContent={\n                  <Avatar src={sender.src} name={sender.name} size=\"xs\" />\n                }\n              >\n                {sender.email}\n              </Dropdown.Item>\n              <Dropdown.Item\n                itemKey=\"personal\"\n                startContent={\n                  <Avatar\n                    src={altAccount.src}\n                    name={altAccount.name}\n                    size=\"xs\"\n                  />\n                }\n              >\n                {altAccount.email}\n              </Dropdown.Item>\n            </Dropdown.Menu>\n          </Dropdown>\n\n          <div className=\"flex items-center gap-3\">\n            <span className=\"hidden sm:inline-flex items-center gap-1.5 text-xs text-[var(--color-text-muted)]\">\n              <span className=\"size-1.5 rounded-full bg-[var(--color-success)]\" />\n              Saved · just now\n            </span>\n            <div className=\"flex items-center gap-1\">\n              <Tooltip content=\"Minimize\">\n                <Button variant=\"ghost\" color=\"neutral\" size=\"sm\" iconOnly>\n                  <ChevronDownIcon className=\"size-4\" />\n                </Button>\n              </Tooltip>\n              <Tooltip content=\"Discard\">\n                <Button variant=\"ghost\" color=\"neutral\" size=\"sm\" iconOnly>\n                  <XMarkIcon className=\"size-4\" />\n                </Button>\n              </Tooltip>\n            </div>\n          </div>\n        </div>\n\n        {/* Recipients */}\n        <div className=\"flex items-start gap-3 px-5 sm:px-6 py-2.5 border-b border-[var(--color-border)]\">\n          <span className=\"text-[11px] tracking-wider uppercase text-[var(--color-text-muted)] flex-shrink-0 pt-1.5\">\n            To\n          </span>\n          <div className=\"flex-1 flex items-center gap-1.5 flex-wrap min-h-[28px]\">\n            {recipients.map((person) => (\n              <Tag\n                key={person.email}\n                avatar={\n                  person.src\n                    ? { src: person.src, name: person.name }\n                    : { name: person.name }\n                }\n                onRemove={() => removeRecipient(person.email)}\n              >\n                {person.name}\n              </Tag>\n            ))}\n            <input\n              type=\"email\"\n              value={recipientInput}\n              onChange={(e) => setRecipientInput(e.target.value)}\n              onKeyDown={handleRecipientKey}\n              onBlur={() =>\n                recipientInput.trim() && addRecipient(recipientInput)\n              }\n              placeholder={\n                recipients.length === 0\n                  ? \"name@company.com\"\n                  : \"Add recipient…\"\n              }\n              aria-label=\"Add recipient\"\n              className=\"flex-1 min-w-[140px] py-1 bg-transparent outline-none text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)]\"\n            />\n          </div>\n          <Dropdown placement=\"bottom-end\">\n            <Dropdown.Trigger>\n              <Button variant=\"ghost\" color=\"neutral\" size=\"sm\">\n                Cc/Bcc\n                <ChevronDownIcon className=\"size-3.5\" />\n              </Button>\n            </Dropdown.Trigger>\n            <Dropdown.Menu\n              aria-label=\"Add recipient fields\"\n              className=\"min-w-[180px]\"\n            >\n              <Dropdown.Item itemKey=\"cc\">Add Cc</Dropdown.Item>\n              <Dropdown.Item itemKey=\"bcc\">Add Bcc</Dropdown.Item>\n              <Dropdown.Item itemKey=\"reply-to\">Set Reply-To</Dropdown.Item>\n            </Dropdown.Menu>\n          </Dropdown>\n        </div>\n\n        {/* Subject */}\n        <div className=\"flex items-center gap-3 px-5 sm:px-6 py-2.5 border-b border-[var(--color-border)]\">\n          <span className=\"text-[11px] tracking-wider uppercase text-[var(--color-text-muted)] flex-shrink-0\">\n            Subject\n          </span>\n          <input\n            type=\"text\"\n            value={subject}\n            onChange={(e) => setSubject(e.target.value)}\n            placeholder=\"What is this about?\"\n            aria-label=\"Subject\"\n            className=\"flex-1 bg-transparent outline-none text-sm font-medium text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)]\"\n          />\n        </div>\n\n        {/* Body — RichTextEditor with floating toolbar */}\n        <div className=\"px-5 sm:px-6 py-3\">\n          <RichTextEditor\n            value={body}\n            onChange={setBody}\n            placeholder=\"Write your message…\"\n            minHeight={280}\n            maxHeight={420}\n            toolbar={{\n              position: \"floating\",\n              tools: [\n                \"bold\",\n                \"italic\",\n                \"underline\",\n                \"separator\",\n                \"alignLeft\",\n                \"alignCenter\",\n                \"alignRight\",\n                \"separator\",\n                \"textColor\",\n              ],\n            }}\n            theme={{\n              wrapperStyle:\n                \"w-full text-[15px] leading-7 text-[var(--color-text-primary)]\",\n              containerStyle: \"border-0 shadow-none bg-transparent p-0\",\n              editorStyle: [\n                \"min-h-[280px] outline-none focus:outline-none px-0 py-0 overflow-y-auto\",\n                \"[&_p]:my-3 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0\",\n                \"[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:my-3 [&_ol]:space-y-1\",\n                \"[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:my-3 [&_ul]:space-y-1\",\n                \"[&_li]:leading-7\",\n                \"[&_strong]:font-semibold [&_em]:italic [&_u]:underline\",\n                \"[&_a]:text-[var(--color-primary)] [&_a]:underline\",\n                \"empty:before:content-[attr(data-placeholder)] empty:before:text-[var(--color-text-placeholder)] empty:before:pointer-events-none\",\n              ].join(\" \"),\n            }}\n          />\n        </div>\n\n        {/* Attachments — refined inline chips (no sunken panel) */}\n        {attachments.length > 0 && (\n          <div className=\"px-5 sm:px-6 pb-4\">\n            <div className=\"mb-2\">\n              <span className=\"text-[11px] tracking-wider uppercase text-[var(--color-text-muted)]\">\n                {totalSize}\n              </span>\n            </div>\n            <div className=\"flex flex-wrap gap-2\">\n              {attachments.map(({ name, size }) => {\n                const type = fileTypeFromName(name);\n                return (\n                  <div\n                    key={name}\n                    className=\"group inline-flex items-center gap-2.5 px-1.5 py-1.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-border-hover)] transition-all duration-300\"\n                  >\n                    <span className=\"flex items-center justify-center size-8 rounded-md\">\n                      {type ? (\n                        <Icon icon={type} size=\"md\" />\n                      ) : (\n                        <PaperClipIcon className=\"size-4 text-[var(--color-text-muted)]\" />\n                      )}\n                    </span>\n                    <span className=\"flex flex-col leading-tight\">\n                      <span className=\"text-xs font-medium text-[var(--color-text-primary)] max-w-[200px] truncate\">\n                        {name}\n                      </span>\n                      <span className=\"text-[11px] text-[var(--color-text-muted)]\">\n                        {size}\n                      </span>\n                    </span>\n                    <button\n                      type=\"button\"\n                      aria-label={`Remove ${name}`}\n                      onClick={() =>\n                        setAttachments(attachments.filter((a) => a.name !== name))\n                      }\n                      className=\"flex items-center justify-center size-6 rounded-md text-[var(--color-text-muted)] opacity-0 group-hover:opacity-100 hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] transition-all\"\n                    >\n                      <XMarkIcon className=\"size-4\" />\n                    </button>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        )}\n\n        {/* Footer toolbar */}\n        <div className=\"flex items-center justify-between gap-3 px-5 sm:px-6 py-3 border-t border-[var(--color-border)]\">\n          <div className=\"flex items-center gap-0.5\">\n            <Tooltip content=\"Attach file\">\n              <Button variant=\"ghost\" color=\"neutral\" size=\"sm\" iconOnly>\n                <PaperClipIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n            <Tooltip content=\"Insert image\">\n              <Button variant=\"ghost\" color=\"neutral\" size=\"sm\" iconOnly>\n                <PhotoIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n            <Separator vertical margin=\"sm\" className=\"h-5\" />\n            <Tooltip content=\"Insert link\">\n              <Button variant=\"ghost\" color=\"neutral\" size=\"sm\" iconOnly>\n                <LinkIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n            <Tooltip content=\"Insert emoji\">\n              <Button variant=\"ghost\" color=\"neutral\" size=\"sm\" iconOnly>\n                <FaceSmileIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <Tooltip content=\"Discard draft\">\n              <Button variant=\"ghost\" color=\"danger\" size=\"sm\" iconOnly>\n                <TrashIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n\n            {/* Schedule — its own button + dropdown (Superhuman pattern) */}\n            <Dropdown placement=\"top-end\">\n              <Dropdown.Trigger>\n                <Button\n                  variant=\"outline\"\n                  color=\"neutral\"\n                  size=\"md\"\n                  aria-label=\"Schedule send\"\n                >\n                  <ClockIcon className=\"size-4\" />\n                  <ChevronDownIcon className=\"size-3.5 text-[var(--color-text-muted)]\" />\n                </Button>\n              </Dropdown.Trigger>\n              <Dropdown.Menu\n                aria-label=\"Schedule send\"\n                className=\"min-w-[240px]\"\n              >\n                <Dropdown.Item\n                  itemKey=\"tonight\"\n                  endContent={\n                    <span className=\"text-xs text-[var(--color-text-muted)]\">\n                      9:00 PM\n                    </span>\n                  }\n                >\n                  Tonight\n                </Dropdown.Item>\n                <Dropdown.Item\n                  itemKey=\"tomorrow\"\n                  endContent={\n                    <span className=\"text-xs text-[var(--color-text-muted)]\">\n                      Tomorrow, 8:00 AM\n                    </span>\n                  }\n                >\n                  Tomorrow morning\n                </Dropdown.Item>\n                <Dropdown.Item\n                  itemKey=\"monday\"\n                  endContent={\n                    <span className=\"text-xs text-[var(--color-text-muted)]\">\n                      Mon, 9:00 AM\n                    </span>\n                  }\n                >\n                  Next week\n                </Dropdown.Item>\n                <Dropdown.Item\n                  itemKey=\"custom\"\n                  startContent={<ClockIcon className=\"size-4\" />}\n                >\n                  Pick date & time…\n                </Dropdown.Item>\n              </Dropdown.Menu>\n            </Dropdown>\n\n            {/* Send — single primary action */}\n            <Tooltip\n              content={\n                <span className=\"inline-flex items-center gap-1.5\">\n                  Send\n                  <Kbd keys={[\"command\", \"enter\"]} />\n                </span>\n              }\n            >\n              <Button size=\"md\">\n                <PaperAirplaneIcon className=\"size-4\" /> Send\n              </Button>\n            </Tooltip>\n          </div>\n        </div>\n      </Card>\n    </div>\n  );\n};\n\nexport const Default: Story = {\n  render: () => <MailComposer />,\n  parameters: {\n    controls: { disable: true },\n  },\n};"
+      "source": "import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport {\n  Avatar,\n  Button,\n  Card,\n  Dropdown,\n  Icon,\n  Kbd,\n  Separator,\n  Tag,\n  Tooltip,\n} from \"../../components/core\";\nimport type { FileTypeName } from \"../../components/core\";\nimport { RichTextEditor } from \"../../components/forms\";\nimport {\n  PaperPlaneTilt as PaperAirplaneIcon,\n  Paperclip as PaperClipIcon,\n  Image as PhotoIcon,\n  Link as LinkIcon,\n  Smiley as FaceSmileIcon,\n  Trash as TrashIcon,\n  CaretDown as ChevronDownIcon,\n  X as XMarkIcon,\n  Clock as ClockIcon,\n} from \"@phosphor-icons/react\";\n\nconst meta: Meta = {\n  title: \"Blocks/MailComposerLayout\",\n  parameters: { layout: \"fullscreen\" },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\ntype Recipient = { name: string; email: string; src?: string };\n\nconst sender = {\n  name: \"Sarah Chen\",\n  email: \"sarah@flikkui.com\",\n  src: \"https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=80&h=80&fit=crop&crop=face\",\n};\n\nconst altAccount = {\n  name: \"Sarah Chen\",\n  email: \"sarah@personal.com\",\n  src: \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face\",\n};\n\nconst initialRecipients: Recipient[] = [\n  {\n    name: \"James Wilson\",\n    email: \"james@acme.co\",\n    src: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face\",\n  },\n  {\n    name: \"Emily Rodriguez\",\n    email: \"emily@acme.co\",\n    src: \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face\",\n  },\n];\n\nconst initialAttachments: { name: string; size: string }[] = [\n  { name: \"Q4-Roadmap-2026.pdf\", size: \"2.4 MB\" },\n  { name: \"timeline-chart.png\", size: \"340 KB\" },\n];\n\nconst SUPPORTED_FILE_TYPES: FileTypeName[] = [\n  \"pdf\", \"doc\", \"docx\", \"txt\", \"xls\", \"xlsx\", \"csv\", \"ppt\",\n  \"mp3\", \"wav\", \"mp4\", \"mov\", \"jpg\", \"png\", \"svg\", \"gif\", \"zip\", \"rar\",\n];\n\nconst fileTypeFromName = (name: string): FileTypeName | null => {\n  const ext = name.split(\".\").pop()?.toLowerCase();\n  if (ext && (SUPPORTED_FILE_TYPES as string[]).includes(ext)) {\n    return ext as FileTypeName;\n  }\n  return null;\n};\n\nconst initialBody = `<p>Hi James and Emily,</p>\n<p>I've finalized the Q4 product roadmap based on our discussion last week. Here are the key priorities:</p>\n<ol>\n  <li>AI Components — New chat interface suite (MessageHistory, PromptInput, CodeBlock)</li>\n  <li>Dark Mode — Full theming support across all 50+ components</li>\n  <li>Performance — Target 40% bundle size reduction with tree-shaking</li>\n  <li>Charts v2 — Simplified API with CSS variable theming</li>\n</ol>\n<p>I've attached the detailed document with timelines and resource allocation. Please review and share any feedback by Friday.</p>\n<p>Let me know if we need to schedule a follow-up meeting.</p>\n<p>Best,<br/>Sarah</p>`;\n\nconst MailComposer: React.FC = () => {\n  const [recipients, setRecipients] = useState<Recipient[]>(initialRecipients);\n  const [recipientInput, setRecipientInput] = useState(\"\");\n  const [subject, setSubject] = useState(\n    \"Q4 Product Roadmap — Review & Feedback\",\n  );\n  const [body, setBody] = useState(initialBody);\n  const [attachments, setAttachments] = useState(initialAttachments);\n\n  const addRecipient = (raw: string) => {\n    const value = raw.trim().replace(/[,;]$/, \"\").trim();\n    if (!value) return;\n    if (recipients.some((r) => r.email === value || r.name === value)) return;\n    const name = value.includes(\"@\") ? value.split(\"@\")[0] : value;\n    setRecipients([\n      ...recipients,\n      { name, email: value.includes(\"@\") ? value : `${name}@example.com` },\n    ]);\n    setRecipientInput(\"\");\n  };\n\n  const removeRecipient = (email: string) => {\n    setRecipients(recipients.filter((r) => r.email !== email));\n  };\n\n  const handleRecipientKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\" || e.key === \",\" || e.key === \"Tab\") {\n      if (recipientInput.trim()) {\n        e.preventDefault();\n        addRecipient(recipientInput);\n      }\n    } else if (\n      e.key === \"Backspace\" &&\n      recipientInput === \"\" &&\n      recipients.length > 0\n    ) {\n      e.preventDefault();\n      setRecipients(recipients.slice(0, -1));\n    }\n  };\n\n  const totalSize =\n    attachments.length > 0\n      ? `${attachments.length} attachment${attachments.length === 1 ? \"\" : \"s\"}`\n      : \"\";\n\n  return (\n    <div className=\"min-h-screen bg-[var(--color-background)] flex items-center justify-center p-4 sm:p-8\">\n      <Card className=\"w-full max-w-2xl rounded-2xl shadow-xl shadow-black/[0.06] overflow-hidden\">\n        {/* Header — sender + status + window controls */}\n        <div className=\"flex items-center justify-between gap-4 px-5 sm:px-6 py-4 border-b border-[var(--color-border)]\">\n          <Dropdown placement=\"bottom-start\">\n            <Dropdown.Trigger>\n              <button\n                type=\"button\"\n                className=\"group flex items-center gap-3 -ml-1 px-1 py-1 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors\"\n              >\n                <Avatar src={sender.src} name={sender.name} size=\"sm\" />\n                <div className=\"flex flex-col items-start leading-tight\">\n                  <span className=\"text-[11px] tracking-wider uppercase text-[var(--color-text-muted)]\">\n                    From\n                  </span>\n                  <span className=\"flex items-center gap-1 text-sm font-medium text-[var(--color-text-primary)]\">\n                    {sender.email}\n                    <ChevronDownIcon className=\"size-3.5 text-[var(--color-text-muted)]\" />\n                  </span>\n                </div>\n              </button>\n            </Dropdown.Trigger>\n            <Dropdown.Menu\n              aria-label=\"Select sending account\"\n              className=\"min-w-[220px]\"\n            >\n              <Dropdown.Item\n                itemKey=\"work\"\n                startContent={\n                  <Avatar src={sender.src} name={sender.name} size=\"xs\" />\n                }\n              >\n                {sender.email}\n              </Dropdown.Item>\n              <Dropdown.Item\n                itemKey=\"personal\"\n                startContent={\n                  <Avatar\n                    src={altAccount.src}\n                    name={altAccount.name}\n                    size=\"xs\"\n                  />\n                }\n              >\n                {altAccount.email}\n              </Dropdown.Item>\n            </Dropdown.Menu>\n          </Dropdown>\n\n          <div className=\"flex items-center gap-3\">\n            <span className=\"hidden sm:inline-flex items-center gap-1.5 text-xs text-[var(--color-text-muted)]\">\n              <span className=\"size-1.5 rounded-full bg-[var(--color-success)]\" />\n              Saved · just now\n            </span>\n            <div className=\"flex items-center gap-1\">\n              <Tooltip content=\"Minimize\">\n                <Button variant=\"ghost\" color=\"mono\" size=\"sm\" iconOnly>\n                  <ChevronDownIcon className=\"size-4\" />\n                </Button>\n              </Tooltip>\n              <Tooltip content=\"Discard\">\n                <Button variant=\"ghost\" color=\"mono\" size=\"sm\" iconOnly>\n                  <XMarkIcon className=\"size-4\" />\n                </Button>\n              </Tooltip>\n            </div>\n          </div>\n        </div>\n\n        {/* Recipients */}\n        <div className=\"flex items-start gap-3 px-5 sm:px-6 py-2.5 border-b border-[var(--color-border)]\">\n          <span className=\"text-[11px] tracking-wider uppercase text-[var(--color-text-muted)] flex-shrink-0 pt-1.5\">\n            To\n          </span>\n          <div className=\"flex-1 flex items-center gap-1.5 flex-wrap min-h-[28px]\">\n            {recipients.map((person) => (\n              <Tag\n                key={person.email}\n                avatar={\n                  person.src\n                    ? { src: person.src, name: person.name }\n                    : { name: person.name }\n                }\n                onRemove={() => removeRecipient(person.email)}\n              >\n                {person.name}\n              </Tag>\n            ))}\n            <input\n              type=\"email\"\n              value={recipientInput}\n              onChange={(e) => setRecipientInput(e.target.value)}\n              onKeyDown={handleRecipientKey}\n              onBlur={() =>\n                recipientInput.trim() && addRecipient(recipientInput)\n              }\n              placeholder={\n                recipients.length === 0\n                  ? \"name@company.com\"\n                  : \"Add recipient…\"\n              }\n              aria-label=\"Add recipient\"\n              className=\"flex-1 min-w-[140px] py-1 bg-transparent outline-none text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)]\"\n            />\n          </div>\n          <Dropdown placement=\"bottom-end\">\n            <Dropdown.Trigger>\n              <Button variant=\"ghost\" color=\"mono\" size=\"sm\">\n                Cc/Bcc\n                <ChevronDownIcon className=\"size-3.5\" />\n              </Button>\n            </Dropdown.Trigger>\n            <Dropdown.Menu\n              aria-label=\"Add recipient fields\"\n              className=\"min-w-[180px]\"\n            >\n              <Dropdown.Item itemKey=\"cc\">Add Cc</Dropdown.Item>\n              <Dropdown.Item itemKey=\"bcc\">Add Bcc</Dropdown.Item>\n              <Dropdown.Item itemKey=\"reply-to\">Set Reply-To</Dropdown.Item>\n            </Dropdown.Menu>\n          </Dropdown>\n        </div>\n\n        {/* Subject */}\n        <div className=\"flex items-center gap-3 px-5 sm:px-6 py-2.5 border-b border-[var(--color-border)]\">\n          <span className=\"text-[11px] tracking-wider uppercase text-[var(--color-text-muted)] flex-shrink-0\">\n            Subject\n          </span>\n          <input\n            type=\"text\"\n            value={subject}\n            onChange={(e) => setSubject(e.target.value)}\n            placeholder=\"What is this about?\"\n            aria-label=\"Subject\"\n            className=\"flex-1 bg-transparent outline-none text-sm font-medium text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)]\"\n          />\n        </div>\n\n        {/* Body — RichTextEditor with floating toolbar */}\n        <div className=\"px-5 sm:px-6 py-3\">\n          <RichTextEditor\n            value={body}\n            onChange={setBody}\n            placeholder=\"Write your message…\"\n            minHeight={280}\n            maxHeight={420}\n            toolbar={{\n              position: \"floating\",\n              tools: [\n                \"bold\",\n                \"italic\",\n                \"underline\",\n                \"separator\",\n                \"alignLeft\",\n                \"alignCenter\",\n                \"alignRight\",\n                \"separator\",\n                \"textColor\",\n              ],\n            }}\n            theme={{\n              wrapperStyle:\n                \"w-full text-[15px] leading-7 text-[var(--color-text-primary)]\",\n              containerStyle: \"border-0 shadow-none bg-transparent p-0\",\n              editorStyle: [\n                \"min-h-[280px] outline-none focus:outline-none px-0 py-0 overflow-y-auto\",\n                \"[&_p]:my-3 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0\",\n                \"[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:my-3 [&_ol]:space-y-1\",\n                \"[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:my-3 [&_ul]:space-y-1\",\n                \"[&_li]:leading-7\",\n                \"[&_strong]:font-semibold [&_em]:italic [&_u]:underline\",\n                \"[&_a]:text-[var(--color-primary)] [&_a]:underline\",\n                \"empty:before:content-[attr(data-placeholder)] empty:before:text-[var(--color-text-placeholder)] empty:before:pointer-events-none\",\n              ].join(\" \"),\n            }}\n          />\n        </div>\n\n        {/* Attachments — refined inline chips (no sunken panel) */}\n        {attachments.length > 0 && (\n          <div className=\"px-5 sm:px-6 pb-4\">\n            <div className=\"mb-2\">\n              <span className=\"text-[11px] tracking-wider uppercase text-[var(--color-text-muted)]\">\n                {totalSize}\n              </span>\n            </div>\n            <div className=\"flex flex-wrap gap-2\">\n              {attachments.map(({ name, size }) => {\n                const type = fileTypeFromName(name);\n                return (\n                  <div\n                    key={name}\n                    className=\"group inline-flex items-center gap-2.5 px-1.5 py-1.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-border-hover)] transition-all duration-300\"\n                  >\n                    <span className=\"flex items-center justify-center size-8 rounded-md\">\n                      {type ? (\n                        <Icon icon={type} size=\"md\" />\n                      ) : (\n                        <PaperClipIcon className=\"size-4 text-[var(--color-text-muted)]\" />\n                      )}\n                    </span>\n                    <span className=\"flex flex-col leading-tight\">\n                      <span className=\"text-xs font-medium text-[var(--color-text-primary)] max-w-[200px] truncate\">\n                        {name}\n                      </span>\n                      <span className=\"text-[11px] text-[var(--color-text-muted)]\">\n                        {size}\n                      </span>\n                    </span>\n                    <button\n                      type=\"button\"\n                      aria-label={`Remove ${name}`}\n                      onClick={() =>\n                        setAttachments(attachments.filter((a) => a.name !== name))\n                      }\n                      className=\"flex items-center justify-center size-6 rounded-md text-[var(--color-text-muted)] opacity-0 group-hover:opacity-100 hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] transition-all\"\n                    >\n                      <XMarkIcon className=\"size-4\" />\n                    </button>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        )}\n\n        {/* Footer toolbar */}\n        <div className=\"flex items-center justify-between gap-3 px-5 sm:px-6 py-3 border-t border-[var(--color-border)]\">\n          <div className=\"flex items-center gap-0.5\">\n            <Tooltip content=\"Attach file\">\n              <Button variant=\"ghost\" color=\"mono\" size=\"sm\" iconOnly>\n                <PaperClipIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n            <Tooltip content=\"Insert image\">\n              <Button variant=\"ghost\" color=\"mono\" size=\"sm\" iconOnly>\n                <PhotoIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n            <Separator vertical margin=\"sm\" className=\"h-5\" />\n            <Tooltip content=\"Insert link\">\n              <Button variant=\"ghost\" color=\"mono\" size=\"sm\" iconOnly>\n                <LinkIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n            <Tooltip content=\"Insert emoji\">\n              <Button variant=\"ghost\" color=\"mono\" size=\"sm\" iconOnly>\n                <FaceSmileIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <Tooltip content=\"Discard draft\">\n              <Button variant=\"ghost\" color=\"danger\" size=\"sm\" iconOnly>\n                <TrashIcon className=\"size-4\" />\n              </Button>\n            </Tooltip>\n\n            {/* Schedule — its own button + dropdown (Superhuman pattern) */}\n            <Dropdown placement=\"top-end\">\n              <Dropdown.Trigger>\n                <Button\n                  variant=\"outline\"\n                  color=\"mono\"\n                  size=\"md\"\n                  aria-label=\"Schedule send\"\n                >\n                  <ClockIcon className=\"size-4\" />\n                  <ChevronDownIcon className=\"size-3.5 text-[var(--color-text-muted)]\" />\n                </Button>\n              </Dropdown.Trigger>\n              <Dropdown.Menu\n                aria-label=\"Schedule send\"\n                className=\"min-w-[240px]\"\n              >\n                <Dropdown.Item\n                  itemKey=\"tonight\"\n                  endContent={\n                    <span className=\"text-xs text-[var(--color-text-muted)]\">\n                      9:00 PM\n                    </span>\n                  }\n                >\n                  Tonight\n                </Dropdown.Item>\n                <Dropdown.Item\n                  itemKey=\"tomorrow\"\n                  endContent={\n                    <span className=\"text-xs text-[var(--color-text-muted)]\">\n                      Tomorrow, 8:00 AM\n                    </span>\n                  }\n                >\n                  Tomorrow morning\n                </Dropdown.Item>\n                <Dropdown.Item\n                  itemKey=\"monday\"\n                  endContent={\n                    <span className=\"text-xs text-[var(--color-text-muted)]\">\n                      Mon, 9:00 AM\n                    </span>\n                  }\n                >\n                  Next week\n                </Dropdown.Item>\n                <Dropdown.Item\n                  itemKey=\"custom\"\n                  startContent={<ClockIcon className=\"size-4\" />}\n                >\n                  Pick date & time…\n                </Dropdown.Item>\n              </Dropdown.Menu>\n            </Dropdown>\n\n            {/* Send — single primary action */}\n            <Tooltip\n              content={\n                <span className=\"inline-flex items-center gap-1.5\">\n                  Send\n                  <Kbd keys={[\"command\", \"enter\"]} />\n                </span>\n              }\n            >\n              <Button size=\"md\">\n                <PaperAirplaneIcon className=\"size-4\" /> Send\n              </Button>\n            </Tooltip>\n          </div>\n        </div>\n      </Card>\n    </div>\n  );\n};\n\nexport const Default: Story = {\n  render: () => <MailComposer />,\n  parameters: {\n    controls: { disable: true },\n  },\n};"
     },
     {
       "name": "MediaGalleryLayout",
@@ -11150,7 +11646,23 @@
         "Segmented",
         "Tooltip"
       ],
-      "source": "import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport {\n  Avatar,\n  Button,\n  Masonry,\n  Segmented,\n  Tooltip,\n} from \"../../components/core\";\nimport { Input } from \"../../components/forms\";\nimport { cn } from \"../../utils\";\nimport {\n  MagnifyingGlassIcon,\n  ArrowUpTrayIcon,\n  HeartIcon,\n  ArrowDownTrayIcon,\n  EyeIcon,\n} from \"@heroicons/react/24/outline\";\nimport { HeartIcon as HeartSolidIcon } from \"@heroicons/react/24/solid\";\n\nconst meta: Meta = {\n  title: \"Blocks/MediaGalleryLayout\",\n  parameters: { layout: \"fullscreen\" },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\n// --- Gallery items with varied heights ---\n\ntype GalleryItem = {\n  id: string;\n  src: string;\n  title: string;\n  author: string;\n  avatar: string;\n  likes: number;\n  views: string;\n  liked: boolean;\n  heightClassName: string;\n};\n\nconst galleryItems: GalleryItem[] = [\n  {\n    id: \"1\",\n    src: \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop\",\n    title: \"Mountain Sunrise\",\n    author: \"Sarah Chen\",\n    avatar:\n      \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face\",\n    likes: 342,\n    views: \"2.1k\",\n    liked: true,\n    heightClassName: \"h-48 sm:h-56\",\n  },\n  {\n    id: \"2\",\n    src: \"https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=600&h=800&fit=crop\",\n    title: \"Misty Forest\",\n    author: \"James Wilson\",\n    avatar:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face\",\n    likes: 218,\n    views: \"1.4k\",\n    liked: false,\n    heightClassName: \"h-64 sm:h-80\",\n  },\n  {\n    id: \"3\",\n    src: \"https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=600&h=400&fit=crop\",\n    title: \"Ocean Waves\",\n    author: \"Emily Rodriguez\",\n    avatar:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face\",\n    likes: 567,\n    views: \"3.8k\",\n    liked: true,\n    heightClassName: \"h-48 sm:h-52\",\n  },\n  {\n    id: \"4\",\n    src: \"https://images.unsplash.com/photo-1501854140801-50d01698950b?w=600&h=600&fit=crop\",\n    title: \"Autumn Valley\",\n    author: \"David Kim\",\n    avatar:\n      \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face\",\n    likes: 891,\n    views: \"5.2k\",\n    liked: false,\n    heightClassName: \"h-56 sm:h-64\",\n  },\n  {\n    id: \"5\",\n    src: \"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&h=400&fit=crop\",\n    title: \"Sunlit Meadow\",\n    author: \"Lisa Thompson\",\n    avatar:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face\",\n    likes: 156,\n    views: \"890\",\n    liked: false,\n    heightClassName: \"h-44 sm:h-48\",\n  },\n  {\n    id: \"6\",\n    src: \"https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=600&h=700&fit=crop\",\n    title: \"Northern Lights\",\n    author: \"Alex Rivera\",\n    avatar:\n      \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face\",\n    likes: 1203,\n    views: \"8.4k\",\n    liked: true,\n    heightClassName: \"h-60 sm:h-72\",\n  },\n  {\n    id: \"7\",\n    src: \"https://images.unsplash.com/photo-1473580044384-7ba9967e16a0?w=600&h=400&fit=crop\",\n    title: \"Desert Dunes\",\n    author: \"Sarah Chen\",\n    avatar:\n      \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face\",\n    likes: 445,\n    views: \"2.9k\",\n    liked: false,\n    heightClassName: \"h-48 sm:h-56\",\n  },\n  {\n    id: \"8\",\n    src: \"https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=600&h=500&fit=crop\",\n    title: \"Spring Bloom\",\n    author: \"James Wilson\",\n    avatar:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face\",\n    likes: 312,\n    views: \"1.7k\",\n    liked: true,\n    heightClassName: \"h-52 sm:h-60\",\n  },\n];\n\nconst galleryColumns = { 640: 1, 768: 2, 1024: 3, 1280: 4 };\nconst noop = () => undefined;\n\ntype GalleryActionButtonProps = {\n  label: string;\n  delayClassName?: string;\n  children: React.ReactNode;\n};\n\nconst GalleryActionButton = ({\n  label,\n  delayClassName,\n  children,\n}: GalleryActionButtonProps) => (\n  <Tooltip content={label}>\n    <button\n      type=\"button\"\n      aria-label={label}\n      className={cn(\n        \"flex size-8 translate-y-2 scale-95 items-center justify-center rounded-full bg-white/20 text-white opacity-0 backdrop-blur-sm transition-[opacity,transform,background-color] duration-300 ease-out hover:bg-white/30 focus:outline-none focus:ring-2 focus:ring-white/70 group-hover:translate-y-0 group-hover:scale-100 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:scale-100 group-focus-within:opacity-100\",\n        delayClassName,\n      )}\n    >\n      {children}\n    </button>\n  </Tooltip>\n);\n\nconst GalleryCard = ({ item }: { item: GalleryItem }) => (\n  <article className=\"group relative overflow-hidden rounded-lg bg-[var(--color-background-tertiary)]\">\n    <div className={cn(item.heightClassName, \"overflow-hidden\")}>\n      <img\n        src={item.src}\n        alt={item.title}\n        loading=\"lazy\"\n        decoding=\"async\"\n        className=\"h-full w-full object-cover transition-transform duration-300 group-hover:scale-105\"\n      />\n    </div>\n\n    <div className=\"absolute inset-0 bg-gradient-to-t from-black/65 via-black/10 to-transparent opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100\">\n      <div className=\"absolute right-3 top-3 flex gap-2\">\n        <GalleryActionButton\n          label={item.liked ? \"Unlike\" : \"Like\"}\n          delayClassName=\"delay-75\"\n        >\n          {item.liked ? (\n            <HeartSolidIcon className=\"size-4 text-red-400\" />\n          ) : (\n            <HeartIcon className=\"size-4\" />\n          )}\n        </GalleryActionButton>\n        <GalleryActionButton\n          label={`Download ${item.title}`}\n          delayClassName=\"delay-150\"\n        >\n          <ArrowDownTrayIcon className=\"size-4\" />\n        </GalleryActionButton>\n      </div>\n\n      <div className=\"absolute inset-x-0 bottom-0 p-4\">\n        <h3 className=\"translate-y-3 truncate text-sm font-medium text-white opacity-0 transition-[opacity,transform] delay-100 duration-300 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100\">\n          {item.title}\n        </h3>\n        <div className=\"mt-2 flex items-center justify-between gap-3\">\n          <div className=\"flex min-w-0 translate-y-3 items-center gap-2 opacity-0 transition-[opacity,transform] delay-150 duration-300 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100\">\n            <Avatar src={item.avatar} name={item.author} size=\"xs\" />\n            <span className=\"truncate text-xs text-white/80\">\n              {item.author}\n            </span>\n          </div>\n          <div className=\"flex shrink-0 translate-y-3 items-center gap-3 text-xs text-white/70 opacity-0 transition-[opacity,transform] delay-200 duration-300 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100\">\n            <span className=\"flex items-center gap-1\">\n              <HeartIcon className=\"size-3\" aria-hidden=\"true\" />\n              {item.likes}\n            </span>\n            <span className=\"flex items-center gap-1\">\n              <EyeIcon className=\"size-3\" aria-hidden=\"true\" />\n              {item.views}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </article>\n);\n\nexport const Default: Story = {\n  render: () => (\n    <div className=\"min-h-screen bg-[var(--color-background)]\">\n      {/* Header */}\n      <div className=\"sticky top-0 z-10 bg-[var(--color-background)]/80 backdrop-blur-md border-b border-[var(--color-border)]\">\n        <div className=\"max-w-7xl mx-auto px-4 sm:px-6 py-4\">\n          <div className=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n            <div className=\"shrink-0\">\n              <h1 className=\"text-2xl font-bold text-[var(--color-text-primary)]\">\n                Gallery\n              </h1>\n              <p className=\"text-sm text-[var(--color-text-muted)]\">\n                Explore the community collection\n              </p>\n            </div>\n            <div className=\"flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center md:flex-1 md:justify-end\">\n              <Input\n                placeholder=\"Search...\"\n                iconStart={<MagnifyingGlassIcon className=\"size-4\" />}\n                size=\"sm\"\n                className=\"w-full sm:w-56 lg:w-72 xl:w-96\"\n              />\n              <Segmented value=\"all\" onChange={noop} size=\"sm\">\n                <Segmented.Item value=\"all\">All</Segmented.Item>\n                <Segmented.Item value=\"photos\">Photos</Segmented.Item>\n                <Segmented.Item value=\"videos\">Videos</Segmented.Item>\n              </Segmented>\n              <Button size=\"sm\" className=\"w-full shrink-0 sm:w-auto\">\n                <ArrowUpTrayIcon className=\"size-4\" /> Upload\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Gallery grid */}\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 py-6\">\n        <Masonry columns={galleryColumns} gap={16}>\n          {galleryItems.map((item) => (\n            <GalleryCard key={item.id} item={item} />\n          ))}\n        </Masonry>\n      </div>\n    </div>\n  ),\n  parameters: {\n    controls: { disable: true },\n  },\n};"
+      "source": "import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport {\n  Avatar,\n  Button,\n  Masonry,\n  Segmented,\n  Tooltip,\n} from \"../../components/core\";\nimport { Input } from \"../../components/forms\";\nimport { cn } from \"../../utils\";\nimport {\n  MagnifyingGlass as MagnifyingGlassIcon,\n  UploadSimple as ArrowUpTrayIcon,\n  Heart as HeartIcon,\n  DownloadSimple as ArrowDownTrayIcon,\n  Eye as EyeIcon,\n  Heart as HeartSolidIcon,\n} from \"@phosphor-icons/react\";\n\nconst meta: Meta = {\n  title: \"Blocks/MediaGalleryLayout\",\n  parameters: { layout: \"fullscreen\" },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\n// --- Gallery items with varied heights ---\n\ntype GalleryItem = {\n  id: string;\n  src: string;\n  title: string;\n  author: string;\n  avatar: string;\n  likes: number;\n  views: string;\n  liked: boolean;\n  heightClassName: string;\n};\n\nconst galleryItems: GalleryItem[] = [\n  {\n    id: \"1\",\n    src: \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop\",\n    title: \"Mountain Sunrise\",\n    author: \"Sarah Chen\",\n    avatar:\n      \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face\",\n    likes: 342,\n    views: \"2.1k\",\n    liked: true,\n    heightClassName: \"h-48 sm:h-56\",\n  },\n  {\n    id: \"2\",\n    src: \"https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=600&h=800&fit=crop\",\n    title: \"Misty Forest\",\n    author: \"James Wilson\",\n    avatar:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face\",\n    likes: 218,\n    views: \"1.4k\",\n    liked: false,\n    heightClassName: \"h-64 sm:h-80\",\n  },\n  {\n    id: \"3\",\n    src: \"https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=600&h=400&fit=crop\",\n    title: \"Ocean Waves\",\n    author: \"Emily Rodriguez\",\n    avatar:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face\",\n    likes: 567,\n    views: \"3.8k\",\n    liked: true,\n    heightClassName: \"h-48 sm:h-52\",\n  },\n  {\n    id: \"4\",\n    src: \"https://images.unsplash.com/photo-1501854140801-50d01698950b?w=600&h=600&fit=crop\",\n    title: \"Autumn Valley\",\n    author: \"David Kim\",\n    avatar:\n      \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face\",\n    likes: 891,\n    views: \"5.2k\",\n    liked: false,\n    heightClassName: \"h-56 sm:h-64\",\n  },\n  {\n    id: \"5\",\n    src: \"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&h=400&fit=crop\",\n    title: \"Sunlit Meadow\",\n    author: \"Lisa Thompson\",\n    avatar:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face\",\n    likes: 156,\n    views: \"890\",\n    liked: false,\n    heightClassName: \"h-44 sm:h-48\",\n  },\n  {\n    id: \"6\",\n    src: \"https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=600&h=700&fit=crop\",\n    title: \"Northern Lights\",\n    author: \"Alex Rivera\",\n    avatar:\n      \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face\",\n    likes: 1203,\n    views: \"8.4k\",\n    liked: true,\n    heightClassName: \"h-60 sm:h-72\",\n  },\n  {\n    id: \"7\",\n    src: \"https://images.unsplash.com/photo-1473580044384-7ba9967e16a0?w=600&h=400&fit=crop\",\n    title: \"Desert Dunes\",\n    author: \"Sarah Chen\",\n    avatar:\n      \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face\",\n    likes: 445,\n    views: \"2.9k\",\n    liked: false,\n    heightClassName: \"h-48 sm:h-56\",\n  },\n  {\n    id: \"8\",\n    src: \"https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=600&h=500&fit=crop\",\n    title: \"Spring Bloom\",\n    author: \"James Wilson\",\n    avatar:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face\",\n    likes: 312,\n    views: \"1.7k\",\n    liked: true,\n    heightClassName: \"h-52 sm:h-60\",\n  },\n];\n\nconst galleryColumns = { 640: 1, 768: 2, 1024: 3, 1280: 4 };\nconst noop = () => undefined;\n\ntype GalleryActionButtonProps = {\n  label: string;\n  delayClassName?: string;\n  children: React.ReactNode;\n};\n\nconst GalleryActionButton = ({\n  label,\n  delayClassName,\n  children,\n}: GalleryActionButtonProps) => (\n  <Tooltip content={label}>\n    <button\n      type=\"button\"\n      aria-label={label}\n      className={cn(\n        \"flex size-8 translate-y-2 scale-95 items-center justify-center rounded-full bg-white/20 text-white opacity-0 backdrop-blur-sm transition-[opacity,transform,background-color] duration-300 ease-out hover:bg-white/30 focus:outline-none focus:ring-2 focus:ring-white/70 group-hover:translate-y-0 group-hover:scale-100 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:scale-100 group-focus-within:opacity-100\",\n        delayClassName,\n      )}\n    >\n      {children}\n    </button>\n  </Tooltip>\n);\n\nconst GalleryCard = ({ item }: { item: GalleryItem }) => (\n  <article className=\"group relative overflow-hidden rounded-lg bg-[var(--color-background-tertiary)]\">\n    <div className={cn(item.heightClassName, \"overflow-hidden\")}>\n      <img\n        src={item.src}\n        alt={item.title}\n        loading=\"lazy\"\n        decoding=\"async\"\n        className=\"h-full w-full object-cover transition-transform duration-300 group-hover:scale-105\"\n      />\n    </div>\n\n    <div className=\"absolute inset-0 bg-gradient-to-t from-black/65 via-black/10 to-transparent opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100\">\n      <div className=\"absolute right-3 top-3 flex gap-2\">\n        <GalleryActionButton\n          label={item.liked ? \"Unlike\" : \"Like\"}\n          delayClassName=\"delay-75\"\n        >\n          {item.liked ? (\n            <HeartSolidIcon className=\"size-4 text-red-400\" />\n          ) : (\n            <HeartIcon className=\"size-4\" />\n          )}\n        </GalleryActionButton>\n        <GalleryActionButton\n          label={`Download ${item.title}`}\n          delayClassName=\"delay-150\"\n        >\n          <ArrowDownTrayIcon className=\"size-4\" />\n        </GalleryActionButton>\n      </div>\n\n      <div className=\"absolute inset-x-0 bottom-0 p-4\">\n        <h3 className=\"translate-y-3 truncate text-sm font-medium text-white opacity-0 transition-[opacity,transform] delay-100 duration-300 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100\">\n          {item.title}\n        </h3>\n        <div className=\"mt-2 flex items-center justify-between gap-3\">\n          <div className=\"flex min-w-0 translate-y-3 items-center gap-2 opacity-0 transition-[opacity,transform] delay-150 duration-300 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100\">\n            <Avatar src={item.avatar} name={item.author} size=\"xs\" />\n            <span className=\"truncate text-xs text-white/80\">\n              {item.author}\n            </span>\n          </div>\n          <div className=\"flex shrink-0 translate-y-3 items-center gap-3 text-xs text-white/70 opacity-0 transition-[opacity,transform] delay-200 duration-300 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100\">\n            <span className=\"flex items-center gap-1\">\n              <HeartIcon className=\"size-3\" aria-hidden=\"true\" />\n              {item.likes}\n            </span>\n            <span className=\"flex items-center gap-1\">\n              <EyeIcon className=\"size-3\" aria-hidden=\"true\" />\n              {item.views}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </article>\n);\n\nexport const Default: Story = {\n  render: () => (\n    <div className=\"min-h-screen bg-[var(--color-background)]\">\n      {/* Header */}\n      <div className=\"sticky top-0 z-10 bg-[var(--color-background)]/80 backdrop-blur-md border-b border-[var(--color-border)]\">\n        <div className=\"max-w-7xl mx-auto px-4 sm:px-6 py-4\">\n          <div className=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n            <div className=\"shrink-0\">\n              <h1 className=\"text-2xl font-bold text-[var(--color-text-primary)]\">\n                Gallery\n              </h1>\n              <p className=\"text-sm text-[var(--color-text-muted)]\">\n                Explore the community collection\n              </p>\n            </div>\n            <div className=\"flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center md:flex-1 md:justify-end\">\n              <Input\n                placeholder=\"Search...\"\n                iconStart={<MagnifyingGlassIcon className=\"size-4\" />}\n                size=\"sm\"\n                className=\"w-full sm:w-56 lg:w-72 xl:w-96\"\n              />\n              <Segmented value=\"all\" onChange={noop} size=\"sm\">\n                <Segmented.Item value=\"all\">All</Segmented.Item>\n                <Segmented.Item value=\"photos\">Photos</Segmented.Item>\n                <Segmented.Item value=\"videos\">Videos</Segmented.Item>\n              </Segmented>\n              <Button size=\"sm\" className=\"w-full shrink-0 sm:w-auto\">\n                <ArrowUpTrayIcon className=\"size-4\" /> Upload\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Gallery grid */}\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 py-6\">\n        <Masonry columns={galleryColumns} gap={16}>\n          {galleryItems.map((item) => (\n            <GalleryCard key={item.id} item={item} />\n          ))}\n        </Masonry>\n      </div>\n    </div>\n  ),\n  parameters: {\n    controls: { disable: true },\n  },\n};"
+    },
+    {
+      "name": "MissionCardsLayout",
+      "title": "Blocks/MissionCardsLayout",
+      "description": "Full-page composition using AreaChart, AvatarGroup, Badge, Button, ….",
+      "componentsUsed": [
+        "AreaChart",
+        "AvatarGroup",
+        "Badge",
+        "Button",
+        "HeroCard",
+        "Progress",
+        "ScrollArea",
+        "TiltCard"
+      ],
+      "source": "import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Badge, Button, HeroCard, ScrollArea, AvatarGroup, Progress } from \"../../components/core\";\nimport { AreaChart } from \"../../components/charts\";\nimport { TiltCard } from \"../../components/effects\";\n\nconst meta: Meta = {\n  title: \"Blocks/MissionCardsLayout\",\n  parameters: {\n    layout: \"fullscreen\",\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nconst avatar = (img: number, name: string) => ({ src: `https://i.pravatar.cc/80?img=${img}`, name });\n\ntype Avatar = { src: string; name: string };\n\n// Each mission ends on a different \"stat\" footer so the deck reads as a dashboard,\n// not six identical team cards — progress, headline metric, ship date, open roles, team.\ntype MissionStat =\n  | { kind: \"progress\"; label: string; value: number }\n  | { kind: \"metric\"; value: string; label: string; delta?: string }\n  | { kind: \"trend\"; value: string; label: string; delta?: string; data: { name: string; v: number }[] }\n  | { kind: \"milestone\"; label: string; date: string; avatars: Avatar[] }\n  | { kind: \"roles\"; label: string; open: number; avatars: Avatar[] }\n  | { kind: \"team\"; members: string[]; avatars: Avatar[] };\n\ninterface Mission {\n  title: string;\n  blurb: string;\n  gradient: string;\n  image: string;\n  status: { label: string; className: string };\n  stat: MissionStat;\n}\n\nconst MISSIONS: Mission[] = [\n  {\n    title: \"Wiki\",\n    blurb: \"One source of truth for every team doc.\",\n    gradient: \"from-[#a87de8] via-[#b09ae4] to-[#a3cbe8]\",\n    image: \"/bg/2.webp\",\n    status: { label: \"On track\", className: \"bg-emerald-400/90 text-emerald-950\" },\n    stat: { kind: \"progress\", label: \"Pages migrated\", value: 72 },\n  },\n  {\n    title: \"Search\",\n    blurb: \"Instant answers across every workspace.\",\n    gradient: \"from-[#f44d62] via-[#ec3a2c] to-[#f8ab3d]\",\n    image: \"/bg/5.webp\",\n    status: { label: \"Hiring\", className: \"bg-white/90 text-neutral-900\" },\n    stat: {\n      kind: \"roles\",\n      label: \"Backend engineers\",\n      open: 2,\n      avatars: [avatar(47, \"Lena Fischer\"), avatar(11, \"Tom Okafor\"), avatar(26, \"Priya Nair\"), avatar(59, \"Hugo Lindqvist\")],\n    },\n  },\n  {\n    title: \"Workflows\",\n    blurb: \"No-code automations that run themselves.\",\n    gradient: \"from-[#a9c6de] via-[#8fb2d2] to-[#7aa3c8]\",\n    image: \"/bg/9.webp\",\n    status: { label: \"New\", className: \"bg-white/90 text-neutral-900\" },\n    stat: {\n      kind: \"trend\",\n      value: \"240\",\n      label: \"automations live\",\n      delta: \"+38 this week\",\n      data: [\n        { name: \"Wk 1\", v: 80 },\n        { name: \"Wk 2\", v: 96 },\n        { name: \"Wk 3\", v: 162 },\n        { name: \"Wk 4\", v: 134 },\n        { name: \"Wk 5\", v: 300 },\n        { name: \"Wk 6\", v: 158 },\n        { name: \"Wk 7\", v: 180 },\n        { name: \"Wk 8\", v: 260 },\n      ],\n    },\n  },\n  {\n    title: \"Assistant\",\n    blurb: \"Your always-on AI teammate.\",\n    gradient: \"from-[#8fd6bd] via-[#6fc3ad] to-[#5bb1a4]\",\n    image: \"/bg/14.webp\",\n    status: { label: \"Beta\", className: \"bg-amber-300/90 text-amber-950\" },\n    stat: {\n      kind: \"milestone\",\n      label: \"GA release\",\n      date: \"Apr 18\",\n      avatars: [avatar(53, \"Noah Becker\"), avatar(32, \"Yuki Tanaka\"), avatar(15, \"Sam Whitfield\")],\n    },\n  },\n  {\n    title: \"Insights\",\n    blurb: \"Live product analytics, zero setup.\",\n    gradient: \"from-[#f4a6b8] via-[#ef8aa4] to-[#e8718f]\",\n    image: \"/bg/17.webp\",\n    status: { label: \"On track\", className: \"bg-emerald-400/90 text-emerald-950\" },\n    stat: { kind: \"metric\", value: \"3.2M\", label: \"events tracked / day\", delta: \"+18% WoW\" },\n  },\n  {\n    title: \"Mobile\",\n    blurb: \"Flikk in your pocket — iOS & Android.\",\n    gradient: \"from-[#f7c277] via-[#f2a45c] to-[#ec8552]\",\n    image: \"/bg/21.webp\",\n    status: { label: \"Q3\", className: \"bg-white/90 text-neutral-900\" },\n    stat: {\n      kind: \"team\",\n      members: [\"Grace Liu\", \"Mateo Silva\", \"Ida Sørensen\"],\n      avatars: [avatar(28, \"Grace Liu\"), avatar(60, \"Mateo Silva\"), avatar(45, \"Ida Sørensen\")],\n    },\n  },\n];\n\nfunction MissionCard({ mission }: { mission: (typeof MISSIONS)[number] }) {\n  return (\n    <TiltCard className=\"shrink-0\">\n      <HeroCard\n        image={mission.image}\n        imageBlend=\"soft-light\"\n        imageOpacity={0.4}\n        parallax\n        className={`aspect-[3/4] w-[400px] p-10 ring-0 bg-gradient-to-br ${mission.gradient}`}\n        contentClassName=\"flex h-full flex-col\"\n      >\n        <div className=\"flex items-start justify-between\">\n          <Badge className=\"border-0 bg-white/20 rounded-full text-white text-sm py-1 px-2\">Mission</Badge>\n          <Badge className={`border-0 rounded-full text-sm py-1 px-2 ${mission.status.className}`}>{mission.status.label}</Badge>\n        </div>\n        <h3 className=\"mt-5 text-5xl font-semibold tracking-tight\">{mission.title}</h3>\n        <p className=\"mt-3 max-w-[18rem] text-sm leading-snug text-white/70\">{mission.blurb}</p>\n        <div className=\"mt-auto\">\n          <MissionStatFooter stat={mission.stat} />\n        </div>\n      </HeroCard>\n    </TiltCard>\n  );\n}\n\n// Renders the per-mission footer — one of five shapes so no two cards read alike.\nfunction MissionStatFooter({ stat }: { stat: MissionStat }) {\n  switch (stat.kind) {\n    case \"progress\":\n      return (\n        <div>\n          <div className=\"flex items-center justify-between text-sm font-semibold\">\n            <span>{stat.label}</span>\n            <span className=\"text-white/70\">{stat.value}%</span>\n          </div>\n          <Progress\n            value={stat.value}\n            size=\"sm\"\n            className=\"mt-2 bg-white\"\n            theme={{ trackStyle: \"rounded-full bg-white/20\" }}\n          />\n        </div>\n      );\n    case \"metric\":\n      return (\n        <div>\n          <div className=\"flex items-end gap-2\">\n            <span className=\"text-4xl font-semibold tracking-tight\">{stat.value}</span>\n            {stat.delta && <span className=\"mb-1.5 text-sm font-medium text-white/70\">{stat.delta}</span>}\n          </div>\n          <p className=\"mt-1 text-sm text-white/70\">{stat.label}</p>\n        </div>\n      );\n    case \"trend\":\n      return (\n        <div>\n          <div className=\"flex items-end gap-2\">\n            <span className=\"text-4xl font-semibold tracking-tight\">{stat.value}</span>\n            {stat.delta && <span className=\"mb-1.5 text-sm font-medium text-white/70\">{stat.delta}</span>}\n          </div>\n          <p className=\"mt-1 text-sm text-white/70\">{stat.label}</p>\n          {/* Edge-to-edge: negative margins cancel the card's p-10 so the area meets the card's side + bottom edges. */}\n          <div className=\"-mx-10 -mb-10 mt-5 h-32\">\n            <AreaChart\n              height=\"100%\"\n              data={stat.data}\n              config={{ v: { label: \"Automations\", color: \"sky-200\" } }}\n              showGrid={false}\n              showXAxis={false}\n              showYAxis={false}\n              strokeWidth={3}\n            />\n          </div>\n        </div>\n      );\n    case \"milestone\":\n      return (\n        <div className=\"flex items-end justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <div className=\"text-sm font-semibold text-white/70\">{stat.label}</div>\n            <p className=\"mt-1 text-2xl font-semibold tracking-tight\">{stat.date}</p>\n          </div>\n          <AvatarGroup size=\"sm\" max={3} avatars={stat.avatars} className=\"shrink-0\" />\n        </div>\n      );\n    case \"roles\":\n      return (\n        <div className=\"flex items-end justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <div className=\"text-sm font-semibold text-white/70\">{stat.label}</div>\n            <p className=\"mt-1 text-2xl font-semibold tracking-tight\">{stat.open} open</p>\n          </div>\n          <AvatarGroup size=\"sm\" max={3} avatars={stat.avatars} className=\"shrink-0\" />\n        </div>\n      );\n    case \"team\":\n      return (\n        <div className=\"flex items-end justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <div className=\"text-sm font-semibold\">Team</div>\n            <p className=\"mt-1 text-sm leading-snug text-white/70\">{stat.members.join(\", \")}</p>\n          </div>\n          <AvatarGroup size=\"sm\" max={3} avatars={stat.avatars} className=\"shrink-0\" />\n        </div>\n      );\n  }\n}\n\nexport const Default: Story = {\n  render: () => (\n    <div className=\"p-10\">\n      <p className=\"text-sm font-medium text-gray-500\">Your guide to Flikk</p>\n      <h2 className=\"mt-1 text-5xl font-bold tracking-tight text-gray-900\">SS26 Missions</h2>\n      <ScrollArea orientation=\"horizontal\" type=\"hover\" dragToScroll className=\"mt-8 w-full\">\n        <div className=\"flex gap-3 py-2\">\n          <MissionCard mission={MISSIONS[0]} />\n\n          {/* statement card — flat near-black, no backdrop */}\n          <TiltCard className=\"shrink-0\">\n            <HeroCard\n              image={'/bg/19.webp'}\n              imageOpacity={0.1}\n              imageBlend=\"hard-light\"\n              className=\"aspect-[3/4] w-[400px] bg-[#111113] p-10 ring-0\"\n              contentClassName=\"flex h-full flex-col\"\n            >\n              <Badge className=\"self-start border-0 bg-white/15 rounded-full text-white/80 text-sm py-1 px-2\">Mission</Badge>\n              <p className=\"mt-6 text-xl leading-snug\">\n                <span className=\"font-semibold\">The Workflows mission aims to{\" \"}</span>\n                <span className=\"text-white/50\">\n                  help teams ship automations that feel effortless — fewer clicks, happier admins.\n                </span>\n              </p>\n              <div className=\"mt-auto flex gap-2\">\n                <Button size=\"sm\" variant=\"ghost\" color=\"mono\" className=\"text-white hover:bg-white/10\">\n                  Front\n                </Button>\n                <Button size=\"sm\" color=\"mono\" className=\"bg-white/10 text-white hover:bg-white/25\">\n                  Back\n                </Button>\n              </div>\n            </HeroCard>\n          </TiltCard>\n\n          {MISSIONS.slice(1).map((m) => (\n            <MissionCard key={m.title} mission={m} />\n          ))}\n        </div>\n      </ScrollArea>\n    </div>\n  ),\n};"
     },
     {
       "name": "NodeCanvasEditorLayout",
@@ -11172,7 +11684,33 @@
       "--color-text-placeholder",
       "--color-text-muted",
       "--color-text-disabled",
-      "--color-text-inverse"
+      "--color-text-inverse",
+      "--text-xs",
+      "--text-sm",
+      "--text-base",
+      "--text-lg",
+      "--text-xl",
+      "--text-2xl",
+      "--text-3xl",
+      "--text-4xl",
+      "--text-5xl",
+      "--text-6xl",
+      "--text-7xl",
+      "--text-8xl",
+      "--text-9xl",
+      "--form-text-size-sm",
+      "--form-text-size-md",
+      "--form-text-size-lg",
+      "--otp-text-size-sm",
+      "--otp-text-size-md",
+      "--otp-text-size-lg",
+      "--otp-text-size-xl",
+      "--button-text-size-sm",
+      "--button-text-size-md",
+      "--button-text-size-lg",
+      "--segmented-text-size-sm",
+      "--segmented-text-size-md",
+      "--segmented-text-size-lg"
     ],
     "background": [
       "--color-background",
@@ -11187,10 +11725,6 @@
       "--color-border",
       "--color-border-secondary",
       "--color-border-hover",
-      "--glass-layer-border-width",
-      "--chat-bubble-border-sender",
-      "--chat-bubble-border-receiver",
-      "--popover-border-width",
       "--neu-raised-border",
       "--neu-inset-border"
     ],
@@ -11208,6 +11742,9 @@
       "--color-surface-overlay",
       "--color-surface-sunken",
       "--color-surface-hover",
+      "--surface-radius-cap-xs",
+      "--surface-radius-cap-sm",
+      "--surface-radius-cap-lg",
       "--shimmer-surface-highlight",
       "--elevation-surface-1",
       "--elevation-surface-2",
@@ -11283,35 +11820,53 @@
       "--color-warning-900",
       "--color-warning-950",
       "--color-warning",
-      "--color-warning-contrast",
-      "--shadow-color-primary",
-      "--shadow-color-success",
-      "--shadow-color-warning",
-      "--shadow-color-danger",
-      "--shadow-color-secondary"
+      "--color-warning-contrast"
     ],
     "other": [
       "--field-fill",
       "--color-chart-track",
-      "--color-neutral-50",
-      "--color-neutral-100",
-      "--color-neutral-200",
-      "--color-neutral-300",
-      "--color-neutral-400",
-      "--color-neutral-500",
-      "--color-neutral-600",
-      "--color-neutral-700",
-      "--color-neutral-800",
-      "--color-neutral-900",
-      "--color-neutral-950",
+      "--color-chart-1",
+      "--color-chart-1-contrast",
+      "--color-chart-2",
+      "--color-chart-2-contrast",
+      "--color-chart-3",
+      "--color-chart-3-contrast",
+      "--color-chart-4",
+      "--color-chart-4-contrast",
+      "--color-chart-5",
+      "--color-chart-5-contrast",
+      "--color-mono-50",
+      "--color-mono-100",
+      "--color-mono-200",
+      "--color-mono-300",
+      "--color-mono-400",
+      "--color-mono-500",
+      "--color-mono-600",
+      "--color-mono-700",
+      "--color-mono-800",
+      "--color-mono-900",
+      "--color-mono-950",
+      "--color-mono",
+      "--color-mono-contrast",
       "--font-family-base",
-      "--font-cursive",
+      "--font-scale",
       "--font-weight-light",
       "--font-weight-normal",
       "--font-weight-medium",
       "--font-weight-semibold",
       "--font-weight-bold",
       "--font-weight-extrabold",
+      "--card-title-size",
+      "--modal-title-size",
+      "--drawer-title-size",
+      "--page-heading-title-size",
+      "--section-title-size",
+      "--metric-value-size-sm",
+      "--metric-value-size-md",
+      "--metric-value-size-lg",
+      "--kpi-value-size-sm",
+      "--kpi-value-size-md",
+      "--kpi-value-size-lg",
       "--form-min-h-sm",
       "--form-min-h-md",
       "--form-min-h-lg",
@@ -11322,6 +11877,18 @@
       "--form-py-sm",
       "--form-py-md",
       "--form-py-lg",
+      "--form-line-height-sm",
+      "--form-line-height-md",
+      "--form-line-height-lg",
+      "--form-min-h-xl",
+      "--otp-slot-size-sm",
+      "--otp-slot-size-md",
+      "--otp-slot-size-lg",
+      "--otp-slot-size-xl",
+      "--otp-line-height-sm",
+      "--otp-line-height-md",
+      "--otp-line-height-lg",
+      "--otp-line-height-xl",
       "--radius-base",
       "--form-radius",
       "--checkbox-radius",
@@ -11333,15 +11900,12 @@
       "--toast-radius",
       "--drawer-radius",
       "--metric-radius",
+      "--message-bubble-radius",
+      "--gantt-chart-radius",
       "--card-radius",
       "--modal-radius",
       "--segmented-radius",
       "--avatar-radius",
-      "--form-focus-ring-width",
-      "--form-focus-ring-offset",
-      "--form-focus-ring-opacity",
-      "--form-outline-width",
-      "--form-outline-focused-width",
       "--button-radius",
       "--button-min-h-sm",
       "--button-min-h-md",
@@ -11352,6 +11916,9 @@
       "--button-py-md",
       "--button-px-lg",
       "--button-py-lg",
+      "--button-line-height-sm",
+      "--button-line-height-md",
+      "--button-line-height-lg",
       "--button-icon-p-sm",
       "--button-icon-p-md",
       "--button-icon-p-lg",
@@ -11359,6 +11926,25 @@
       "--button-icon-size-md",
       "--button-icon-size-lg",
       "--badge-radius",
+      "--badge-px-sm",
+      "--badge-px-md",
+      "--badge-py-sm",
+      "--badge-py-md",
+      "--badge-pill-px-sm",
+      "--badge-pill-px-md",
+      "--pill-px-sm",
+      "--pill-px-md",
+      "--pill-px-lg",
+      "--pill-py-sm",
+      "--pill-py-md",
+      "--pill-py-lg",
+      "--tag-px-sm",
+      "--tag-px-md",
+      "--tag-pl-md",
+      "--tag-py-sm",
+      "--tag-py-md",
+      "--kbd-px-sm",
+      "--kbd-px-md",
       "--segmented-min-h-sm",
       "--segmented-min-h-md",
       "--segmented-min-h-lg",
@@ -11368,12 +11954,20 @@
       "--segmented-py-sm",
       "--segmented-py-md",
       "--segmented-py-lg",
+      "--segmented-line-height-sm",
+      "--segmented-line-height-md",
+      "--segmented-line-height-lg",
+      "--card-px",
+      "--card-py",
+      "--modal-px",
+      "--modal-py",
+      "--drawer-px",
+      "--drawer-py",
+      "--metric-content-p-sm",
+      "--metric-content-p-md",
+      "--metric-content-p-lg",
       "--segmented-padding",
       "--segmented-inner-radius",
-      "--segmented-active-bg",
-      "--segmented-active-shadow",
-      "--glass-layer-padding",
-      "--glass-layer-inner-offset",
       "--glass-gradient-outer",
       "--glass-gradient-inner",
       "--avatar-size-xs",
@@ -11381,27 +11975,7 @@
       "--avatar-size-md",
       "--avatar-size-lg",
       "--avatar-size-xl",
-      "--carousel-container-width",
-      "--carousel-slide-width",
-      "--carousel-slide-height",
-      "--carousel-slide-gap",
-      "--carousel-controls-size",
-      "--carousel-controls-offset",
-      "--popover-shadow",
-      "--popover-backdrop-opacity",
-      "--popover-offset-sm",
-      "--popover-offset-md",
-      "--popover-offset-lg",
-      "--popover-max-width-sm",
-      "--popover-max-width-md",
-      "--popover-max-width-lg",
-      "--popover-padding-sm",
-      "--popover-padding-md",
-      "--popover-padding-lg",
       "--nav-item-radius",
-      "--nav-item-min-h",
-      "--nav-item-px",
-      "--nav-item-py",
       "--overlay-bg",
       "--overlay-blur",
       "--neu-raised-shadow",
@@ -11442,7 +12016,7 @@
   },
   "peerDependencies": {
     "required": {
-      "@heroicons/react": ">=2.0.0",
+      "@phosphor-icons/react": ">=2.1.0",
       "motion": ">=12.0.0",
       "react": ">=18.0.0",
       "react-dom": ">=18.0.0"