@flikk/ui 1.0.0-beta.27 → 1.0.0-beta.29

package/dist/registry.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
-  "libVersion": "1.0.0-beta.27",
-  "generatedAt": "2026-06-01T11:56:09.525Z",
-  "componentCount": 123,
+  "libVersion": "1.0.0-beta.29",
+  "generatedAt": "2026-06-16T12:41:33.964Z",
+  "componentCount": 122,
   "components": [
     {
       "name": "Accordion",
@@ -12,6 +12,7 @@
       "description": "Collapsible content sections using a compound component pattern. Supports single or multiple open items with separated or stacked visual variants.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "type": {
           "type": "\"single\" | \"multiple\"",
@@ -69,6 +70,7 @@
       "description": "Displays important messages with semantic color coding. Supports avatars, actions, and dismissible behavior.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "variant": {
           "type": "AlertVariant",
@@ -139,6 +141,7 @@
       "description": "A confirmation modal for interruptive actions that require user acknowledgment. Built on top of Modal with sensible defaults for destructive or critical actions.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "trigger": {
           "type": "React.ReactNode",
@@ -174,6 +177,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,
       "props": {
         "ratio": {
           "type": "number",
@@ -190,6 +194,7 @@
       "description": "Displays a user profile image with optional status indicators, fallback initials, and tooltip support.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "src": {
           "type": "string",
@@ -328,6 +333,7 @@
       "description": "Displays multiple overlapping avatars in a group with overflow handling and customizable spacing.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "avatars": {
           "type": "AvatarProps[]",
@@ -391,6 +397,7 @@
       "description": "Badge component for displaying status labels, counters, or tags with multiple variants, colors, and optional dot/icon/avatar decorations.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "variant": {
           "type": "BadgeVariant",
@@ -533,22 +540,17 @@
         "--color-warning-400",
         "--color-danger-400",
         "--color-neutral-100",
-        "--color-primary-100",
-        "--color-primary-800",
-        "--color-primary-500",
+        "--color-primary-50",
+        "--color-primary-700",
         "--color-primary-300",
-        "--color-secondary-100",
-        "--color-secondary-800",
-        "--color-secondary-500",
+        "--color-secondary-50",
+        "--color-secondary-700",
         "--color-success-100",
-        "--color-success-800",
-        "--color-success-500",
-        "--color-warning-100",
-        "--color-warning-800",
-        "--color-warning-500",
-        "--color-danger-100",
-        "--color-danger-800",
-        "--color-danger-500"
+        "--color-success-700",
+        "--color-warning-50",
+        "--color-warning-700",
+        "--color-danger-50",
+        "--color-danger-700"
       ],
       "codeExample": "import { Badge } from \"@flikk/ui\";\n\n<Badge variant=\"filled\" color=\"primary\">Admin</Badge>\n\n// With dot indicator\n<Badge color=\"success\" variant=\"soft\" withDot>Online</Badge>\n\n// With icon\n<Badge color=\"warning\" variant=\"outline\" iconStart={<BoltIcon />}>Priority</Badge>\n\n// Dismissible\n<Badge color=\"primary\" variant=\"soft\" dismissible onDismiss={() => {}}>React</Badge>"
     },
@@ -560,6 +562,7 @@
       "description": "Navigation breadcrumbs displaying the current location within a hierarchy with smart collapse behavior and customizable separators.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "items": {
           "type": "BreadcrumbItem[]",
@@ -611,6 +614,7 @@
       "description": "Versatile button component with multiple variants, colors, sizes, icon support, and ripple effects.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "color": {
           "type": "ButtonColor",
@@ -816,6 +820,7 @@
       "description": "Groups related buttons together with consistent styling, shared borders, and connected corners.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "orientation": {
           "type": "ButtonGroupOrientation",
@@ -856,6 +861,7 @@
       "description": "Date picker calendar with single and range selection modes, dropdown navigation, and date restriction support.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "mode": {
           "type": "CalendarMode",
@@ -962,7 +968,6 @@
         "lg"
       ],
       "cssVariables": [
-        "--color-surface",
         "--color-text-primary",
         "--radius-base",
         "--color-text-muted",
@@ -988,7 +993,25 @@
       "description": "Flexible card component with compound sub-components (Header, Title, Subtitle, Body, Footer) for composable layouts.",
       "status": "stable",
       "productionReady": true,
-      "props": {},
+      "generative": true,
+      "props": {
+        "title": {
+          "type": "ReactNode",
+          "description": "Header title (serializable slot-prop). Renders `Card.Header` + `Card.Title` internally. Mirrors `Section`. Omit and use the compound `Card.Header` parts for full control."
+        },
+        "subtitle": {
+          "type": "ReactNode",
+          "description": "Header subtitle (serializable slot-prop). Renders `Card.Subtitle`."
+        },
+        "actions": {
+          "type": "ReactNode",
+          "description": "Header-end controls — buttons, links, Segmented, a kebab menu, etc. Right-aligned next to the title. Holds `ReactNode`, so it is NOT part of the generative schema (app-code / hand-authored only), like `Section`'s. For a card whose primary control is a full Tabs bar, compose `Tabs` in the body instead of overloading this slot."
+        },
+        "footer": {
+          "type": "ReactNode",
+          "description": "Footer content (serializable slot-prop). Renders `Card.Footer`. Holds `ReactNode`, so it is excluded from the generative schema like `actions`."
+        }
+      },
       "subComponents": [
         "Card.Header",
         "Card.Title",
@@ -1006,10 +1029,10 @@
       ],
       "cssVariables": [
         "--card-radius",
+        "--color-surface",
         "--color-border",
-        "--color-background-secondary",
         "--color-text-primary",
-        "--color-text-muted"
+        "--color-text-secondary"
       ],
       "codeExample": "import { Card } from \"@flikk/ui\";\n\n<Card className=\"w-full max-w-[380px]\">\n  <Card.Header>\n    <Card.Title>Create project</Card.Title>\n    <Card.Subtitle>Deploy your new project in one-click.</Card.Subtitle>\n  </Card.Header>\n  <Card.Body>\n    <Input label=\"Name\" placeholder=\"Name of your project\" />\n    <Select label=\"Framework\" placeholder=\"Select framework\" options={[...]} />\n  </Card.Body>\n  <Card.Footer className=\"flex flex-row justify-between gap-2\">\n    <Button variant=\"outline\" color=\"neutral\" className=\"flex-1\">Cancel</Button>\n    <Button variant=\"filled\" className=\"flex-1\">Deploy</Button>\n  </Card.Footer>\n</Card>"
     },
@@ -1021,6 +1044,7 @@
       "description": "Interactive card stack with drag/swipe gestures and 3D tilt effects. Perfect for Tinder-style interfaces, onboarding flows, product showcases, and interactive carousels.",
       "status": "beta",
       "productionReady": false,
+      "generative": false,
       "statusWarning": "⚠️ BETA: This component is not production-ready. API may change without notice.",
       "props": {
         "draggable": {
@@ -1142,6 +1166,7 @@
       "description": "A flexible, accessible carousel component with support for horizontal/vertical orientations, loop mode, and customizable navigation controls. Built with compound components for maximum flexibility.",
       "status": "beta",
       "productionReady": false,
+      "generative": false,
       "statusWarning": "⚠️ BETA: This component is not production-ready. API may change without notice.",
       "props": {
         "orientation": {
@@ -1204,6 +1229,7 @@
       "description": "A command-K style command palette for quick navigation and actions. Supports keyboard navigation, search filtering, grouping, and keyboard shortcuts.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "isOpen": {
           "type": "boolean",
@@ -1294,6 +1320,7 @@
       "description": "A context menu triggered by right-click, supporting checkable items, submenus, labels, and keyboard shortcuts.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "onOpenChange": {
           "type": "(isOpen: boolean) => void"
@@ -1335,6 +1362,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,
       "props": {
         "size": {
           "type": "DotSeparatorSize",
@@ -1362,6 +1390,7 @@
       "description": "Drag and drop primitives built on Framer Motion. Provides Draggable and Droppable components with type-based accept filtering and animated transitions.",
       "status": "beta",
       "productionReady": false,
+      "generative": false,
       "statusWarning": "⚠️ BETA: This component is not production-ready. API may change without notice.",
       "props": {},
       "separateExports": [
@@ -1390,6 +1419,7 @@
       "description": "Slide-out panel that overlays content from the edge of the screen. Supports multiple positions, sizes, and compound component pattern with Content and Footer. Features an iOS-style scale background effect.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "isOpen": {
           "type": "boolean",
@@ -1478,6 +1508,7 @@
       "description": "A dropdown component for displaying action menus with keyboard navigation, sections, icons, descriptions, and selection modes.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "isOpen": {
           "type": "boolean"
@@ -1541,7 +1572,7 @@
         "--dropdown-radius",
         "--color-border",
         "--color-surface-overlay",
-        "--color-text-muted"
+        "--color-text-secondary"
       ],
       "codeExample": "import { Dropdown } from \"@flikk/ui\";\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>\n    <Dropdown.Item itemKey=\"edit\">Edit</Dropdown.Item>\n    <Dropdown.Item itemKey=\"delete\" isDanger>Delete</Dropdown.Item>\n  </Dropdown.Menu>\n</Dropdown>"
     },
@@ -1553,6 +1584,7 @@
       "description": "Empty state component for displaying when no data or content is available, with optional icon, description, and action buttons.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "title": {
           "type": "React.ReactNode",
@@ -1590,6 +1622,74 @@
       ],
       "codeExample": "import { Empty } from \"@flikk/ui\";\n\n<Empty\n  title=\"No items found\"\n  subtitle=\"Get started by creating your first item.\"\n  action={<Button>Create Item</Button>}\n/>"
     },
+    {
+      "name": "HeroCard",
+      "category": "core",
+      "pattern": "simple",
+      "importPath": "@flikk/ui/core",
+      "description": "HeroCard component",
+      "status": "stable",
+      "productionReady": true,
+      "generative": false,
+      "props": {
+        "image": {
+          "type": "string | null",
+          "description": "Backdrop image src. Defaults to the bundled `/bg/3.webp` (ship the `@flikk/ui/bg/ ` assets at `/bg/` or pass your own URL). Pass `null` for a gradient-only hero."
+        },
+        "imageBlur": {
+          "type": "number",
+          "default": "24",
+          "description": "Backdrop blur radius in px."
+        },
+        "imageScale": {
+          "type": "number",
+          "default": "1.25",
+          "description": "Backdrop scale factor — zooming the abstract blobs in/out reframes the texture."
+        },
+        "imageOpacity": {
+          "type": "number",
+          "default": "0.5",
+          "description": "Backdrop opacity, 0–1."
+        },
+        "imageBlend": {
+          "type": "HeroCardBlendMode",
+          "default": "multiply",
+          "description": "Blend mode compositing the image over the gradient."
+        },
+        "imagePosition": {
+          "type": "string",
+          "default": "center",
+          "description": "CSS `background-position` — e.g. `\"top right\"`, `\"30% 70%\"`."
+        },
+        "parallax": {
+          "type": "boolean",
+          "default": "false",
+          "description": "On pointer hover, drift the backdrop image opposite the cursor (damped) for a parallax-depth effect. Pairs with a `TiltCard` wrapper. Mouse-driven; respects `prefers-reduced-motion`; no-op without an `image`. Travel is bounded by the `imageScale` overscan so card edges never show."
+        },
+        "parallaxIntensity": {
+          "type": "number",
+          "default": "32",
+          "description": "Max backdrop travel in px (each direction) when `parallax` is on. Auto-clamped to the available `imageScale` overscan."
+        },
+        "contentClassName": {
+          "type": "string",
+          "description": "className for the content wrapper (the layer lifted above the backdrop)."
+        }
+      },
+      "themeKeys": [
+        "baseStyle",
+        "imageStyle",
+        "contentStyle"
+      ],
+      "cssVariables": [
+        "--card-radius",
+        "--color-primary-600",
+        "--color-primary-700",
+        "--color-primary-500",
+        "--color-primary"
+      ],
+      "codeExample": "import { HeroCard, Button } from \"@flikk/ui\";\n\n<HeroCard>\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>"
+    },
     {
       "name": "Icon",
       "category": "core",
@@ -1598,6 +1698,7 @@
       "description": "A unified icon component for payment brands, social platforms, and file types. The icon set is auto-detected from the",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "icon": {
           "type": "IconName",
@@ -1636,6 +1737,7 @@
       "description": "A striped placeholder surface for empty image / banner / cover slots. Composes",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "ratio": {
           "type": "number",
@@ -1679,6 +1781,7 @@
       "description": "Displays keyboard keys and shortcuts inline within text or instructions.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "keys": {
           "type": "KbdKey[]",
@@ -1699,7 +1802,7 @@
       ],
       "cssVariables": [
         "--radius-base",
-        "--color-background-secondary",
+        "--color-surface-raised",
         "--color-border",
         "--color-text-secondary",
         "--color-text-muted"
@@ -1714,6 +1817,7 @@
       "description": "A styled anchor component with built-in motion animations and size options.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "size": {
           "type": "LinkSize",
@@ -1739,6 +1843,7 @@
       "description": "A responsive masonry layout component for arranging items in a grid with optimal space utilization.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "columns": {
           "type": "number | Record<number, number>",
@@ -1798,6 +1903,7 @@
       "description": "Shared base component for menu items used by Dropdown and ContextMenu. Handles visual layout, keyboard activation, and focus tracking. Use inside Dropdown or ContextMenu rather than standalone.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "startContent": {
           "type": "ReactNode",
@@ -1866,6 +1972,7 @@
       "description": "Chat message component supporting props-based and compound APIs, with role/variant semantics, streaming indicators, and typing animations.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "role": {
           "type": "MessageRole",
@@ -2061,6 +2168,7 @@
       "description": "Modal dialog with compound component pattern, portal rendering, and multiple size options.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "isOpen": {
           "type": "boolean",
@@ -2073,15 +2181,6 @@
         "size": {
           "type": "ModalSize"
         },
-        "variant": {
-          "type": "ModalVariant",
-          "default": "default",
-          "description": "Visual variant of the modal container. - `default`: Solid background with subtle ring - `translucent`: Frosted glass effect with reduced opacity and backdrop blur",
-          "options": [
-            "default",
-            "translucent"
-          ]
-        },
         "closeOnOverlayClick": {
           "type": "boolean"
         },
@@ -2107,9 +2206,6 @@
       "themeKeys": [
         "overlay",
         "container",
-        "containerVariants",
-        "default",
-        "translucent",
         "header",
         "headerContent",
         "title",
@@ -2121,7 +2217,6 @@
         "--modal-radius",
         "--color-surface-raised",
         "--color-border",
-        "--color-background",
         "--color-text-primary",
         "--color-text-muted"
       ],
@@ -2135,6 +2230,7 @@
       "description": "iOS-style stacked modal with scale-down animation. Open a second modal and the first recedes with a smooth transition.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "isOpen": {
           "type": "boolean",
@@ -2171,6 +2267,7 @@
       "description": "Navigation item for sidebars and menus, supporting icons, badges, nesting levels, and collapsed sidebar mode with tooltips.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "startContent": {
           "type": "ReactNode",
@@ -2288,6 +2385,7 @@
       "description": "Displays network status to users, appearing when offline and optionally showing queued actions count.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "position": {
           "type": "OfflineIndicatorPosition",
@@ -2356,6 +2454,7 @@
       "description": "Page-level heading component with support for breadcrumbs, back navigation, title with icon, subtitle, and action buttons.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "separator": {
           "type": "boolean",
@@ -2381,6 +2480,7 @@
       ],
       "cssVariables": [
         "--color-text-primary",
+        "--color-text-secondary",
         "--color-text-muted",
         "--color-border"
       ],
@@ -2394,6 +2494,7 @@
       "description": "Pagination component with previous/next buttons, page numbers, and ellipsis for large page counts.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "currentPage": {
           "type": "number",
@@ -2465,6 +2566,7 @@
       "description": "A selectable chip component for filters, tags, and categories. Use for multi-select filter interfaces and tag selection.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "size": {
           "type": "PillSize",
@@ -2527,6 +2629,7 @@
       "description": "A flexible popover component with compound pattern support, click/hover triggers, multiple placements, and backdrop overlays.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {},
       "subComponents": [
         "Popover.Trigger",
@@ -2555,6 +2658,7 @@
       "description": "Progress component for displaying linear progress bars with determinate or indeterminate states, multiple sizes, and flexible label positioning. Use className to style the fill bar, wrapperClassName for the track.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "value": {
           "type": "number",
@@ -2628,6 +2732,7 @@
       "description": "Interactive star rating component for collecting or displaying ratings. Supports half-star increments, read-only mode, custom icons, keyboard navigation, and multiple color schemes.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "value": {
           "type": "number",
@@ -2730,6 +2835,7 @@
       "description": "A custom scrollable container with styled scrollbars. Supports vertical, horizontal, or both directions, scroll snapping, and optional smooth momentum-based scrolling.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "type": {
           "type": "ScrollAreaType",
@@ -2756,9 +2862,14 @@
           "default": "start",
           "description": "Snap alignment applied to direct children via [&> ]:snap- . Only takes effect when `snap` is set."
         },
-        "smooth": {
+        "dragToScroll": {
           "type": "boolean",
           "default": "false",
+          "description": "Enable mouse drag-to-scroll panning (grab the content and drag, like touch). Mouse-only — touch input already pans natively. A real drag needs ~4px of movement first, so plain clicks on content (cards, buttons) still work; the click that would follow a completed drag is suppressed. Drags never start from text fields, so selection inside inputs/textareas is unaffected."
+        },
+        "smooth": {
+          "type": "boolean",
+          "default": "true",
           "description": "Enable smooth momentum-based scrolling"
         },
         "smoothConfig": {
@@ -2797,6 +2908,7 @@
       "description": "A segmented control component that allows users to select one option from a set of segments. Uses compound component pattern with Segmented.Item.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "value": {
           "type": "string",
@@ -2843,14 +2955,13 @@
       ],
       "cssVariables": [
         "--segmented-radius",
-        "--color-surface",
         "--color-border",
         "--segmented-padding",
         "--segmented-min-h-sm",
         "--segmented-min-h-md",
         "--segmented-min-h-lg",
         "--segmented-inner-radius",
-        "--color-surface-raised",
+        "--color-surface",
         "--color-primary-500",
         "--segmented-px-sm",
         "--segmented-px-md",
@@ -2868,6 +2979,7 @@
       "description": "A simple separator component for separating content horizontally or vertically, with configurable margin sizes.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "vertical": {
           "type": "boolean",
@@ -2907,6 +3019,7 @@
       "description": "A compound sidebar navigation component with smooth collapse animations, collapsible rail, mobile full-screen overlay, self-managed submenus, accordion mode, user profile, and notification badges.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "side": {
           "type": "SidebarSide",
@@ -2995,6 +3108,7 @@
       "description": "A loading placeholder that mimics content shape with support for text, circular, and rectangle variants.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "variant": {
           "type": "SkeletonVariant",
@@ -3047,6 +3161,7 @@
       "description": "An animated number display with odometer-style digit transitions. Each digit slides independently for counters, statistics, and dynamic numeric displays.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "value": {
           "type": "number",
@@ -3088,6 +3203,7 @@
       "description": "A drag-and-drop sortable list component with vertical and horizontal layouts, optional drag handles, and keyboard navigation support.",
       "status": "beta",
       "productionReady": false,
+      "generative": false,
       "statusWarning": "⚠️ BETA: This component is not production-ready. API may change without notice.",
       "props": {
         "onReorder": {
@@ -3138,6 +3254,7 @@
       "description": "A loading spinner component with multiple sizes and color options for indicating processing states.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "size": {
           "type": "SpinnerSize",
@@ -3178,6 +3295,7 @@
       "description": "A tabs component that organizes content into separate views. Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Body.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "value": {
           "type": "string",
@@ -3245,6 +3363,7 @@
       "description": "Tag component for displaying removable labels or keywords. Commonly used in TagInput for multi-value selection.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "size": {
           "type": "TagSize",
@@ -3314,6 +3433,7 @@
       "description": "Toast notifications provide brief, non-intrusive feedback about user actions with automatic stacking and dismissal.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "toast": {
           "type": "ToastData",
@@ -3400,6 +3520,7 @@
       "description": "A tooltip component that displays contextual information on hover or focus. Supports multiple placements, custom delays, text wrapping, and rich content.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "content": {
           "type": "ReactNode",
@@ -3486,6 +3607,7 @@
       "description": "A tree component for displaying hierarchical data with expand/collapse, single selection, and checkbox multi-selection with hierarchical parent-child relationships.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "data": {
           "type": "TreeNode[]",
@@ -3547,9 +3669,10 @@
       "category": "data-display",
       "pattern": "compound",
       "importPath": "@flikk/ui/data-display",
-      "description": "A key-value pair list for displaying labeled metadata. Use it for profile details, order summaries, or settings panels.",
+      "description": "A key-value pair list for displaying labeled metadata — profile details, order summaries, or settings panels. Items take",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "variant": {
           "type": "DescriptionListVariant",
@@ -3558,6 +3681,18 @@
             "horizontal",
             "vertical"
           ]
+        },
+        "padding": {
+          "type": "DescriptionListPadding",
+          "description": "Edge padding behavior. `flush` (default) removes the item side padding so labels/values align flush with the container edges (e.g. inside a padded Card); `default` adds horizontal padding for standalone use.",
+          "options": [
+            "default",
+            "flush"
+          ]
+        },
+        "items": {
+          "type": "DescriptionListItemData[]",
+          "description": "Data-driven items. When provided, the list renders from this array and any `children` are ignored (dev-warns). Omit it to use the compound API. Fully serializable — ideal for generative UI."
         }
       },
       "subComponents": [
@@ -3566,15 +3701,18 @@
       "themeKeys": [
         "baseStyle",
         "itemStyle",
-        "termStyle",
-        "detailStyle"
+        "paddingStyles",
+        "default",
+        "flush",
+        "labelStyle",
+        "valueStyle"
       ],
       "cssVariables": [
         "--color-border",
         "--color-text-primary",
         "--color-text-secondary"
       ],
-      "codeExample": "import { DescriptionList } from \"@flikk/ui\";\n\n<DescriptionList>\n  <DescriptionList.Item term=\"Full name\" detail=\"John Doe\" />\n  <DescriptionList.Item term=\"Email address\" detail=\"john.doe@example.com\" />\n  <DescriptionList.Item term=\"Role\" detail=\"Senior Software Engineer\" />\n  <DescriptionList.Item term=\"Salary\" detail=\"$120,000\" />\n  <DescriptionList.Item\n    term=\"About\"\n    detail=\"Passionate engineer with 8 years of experience building scalable web applications.\"\n  />\n</DescriptionList>"
+      "codeExample": "import { DescriptionList } from \"@flikk/ui\";\n\n<DescriptionList padding=\"default\">\n  <DescriptionList.Item label=\"Full name\" value=\"John Doe\" />\n  <DescriptionList.Item label=\"Email address\" value=\"john.doe@example.com\" />\n  <DescriptionList.Item label=\"Role\" value=\"Senior Software Engineer\" />\n  <DescriptionList.Item label=\"Salary\" value=\"$120,000\" />\n  <DescriptionList.Item\n    label=\"About\"\n    value=\"Passionate engineer with 8 years of experience building scalable web applications.\"\n  />\n</DescriptionList>"
     },
     {
       "name": "Feed",
@@ -3584,7 +3722,17 @@
       "description": "A vertical timeline of activity events with composable indicator and content slots. Use it for audit logs, comment threads, or activity feeds.",
       "status": "stable",
       "productionReady": true,
-      "props": {},
+      "generative": true,
+      "props": {
+        "items": {
+          "type": "FeedItemData[]",
+          "description": "Data-driven items. When provided, the feed renders from this array and any `children` are ignored (dev-warns). Omit it to use the compound API. Fully serializable (resolve icon NAMES upstream) — ideal for generative UI."
+        },
+        "collapseAfter": {
+          "type": "number",
+          "description": "When set with `items`, items beyond this count are wrapped in a `Feed.Collapse` (shown behind a \"Show N more\" toggle). Ignored for the compound API."
+        }
+      },
       "subComponents": [
         "Feed.Item",
         "Feed.Collapse"
@@ -3608,7 +3756,7 @@
       ],
       "cssVariables": [
         "--color-border",
-        "--color-background-secondary",
+        "--color-surface",
         "--color-background",
         "--color-text-muted",
         "--color-primary",
@@ -3624,6 +3772,7 @@
       "description": "GanttChart component",
       "status": "beta",
       "productionReady": false,
+      "generative": false,
       "statusWarning": "⚠️ BETA: This component is not production-ready. API may change without notice.",
       "props": {
         "data": {
@@ -3799,6 +3948,7 @@
       "description": "Displays a key performance indicator with value, trend, progress bars, and optional description.",
       "status": "beta",
       "productionReady": false,
+      "generative": true,
       "statusWarning": "⚠️ BETA: This component is not production-ready. API may change without notice.",
       "props": {
         "value": {
@@ -3869,6 +4019,7 @@
       "description": "Displays key business metrics with optional icons, trend indicators, and embedded sparkline charts.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "value": {
           "type": "string | number",
@@ -3921,66 +4072,53 @@
         "baseStyle",
         "variants",
         "filled",
+        "ghost",
         "glass",
-        "variantColors",
+        "iconContainerVariants",
         "filled",
+        "ghost",
         "glass",
-        "iconContainerVariantColors",
-        "filled",
+        "iconColors",
         "neutral",
         "primary",
         "secondary",
         "success",
         "warning",
         "danger",
-        "glass",
+        "iconGlassShadows",
         "neutral",
         "primary",
         "secondary",
         "success",
         "warning",
         "danger",
-        "sizes",
+        "contentPaddingSizes",
+        "iconContainerSizes",
+        "labelIconAlignSizes",
+        "labelSizes",
         "sm",
-        "container",
-        "contentPadding",
-        "iconContainer",
-        "label",
-        "value",
-        "subtitle",
         "md",
-        "container",
-        "contentPadding",
-        "iconContainer",
-        "label",
-        "value",
-        "subtitle",
         "lg",
-        "container",
-        "contentPadding",
-        "iconContainer",
-        "label",
-        "value",
-        "subtitle",
+        "valueSizes",
+        "subtitleSizes",
         "labelStyle",
         "valueStyle",
         "subtitleStyle",
         "iconContainerStyle"
       ],
       "cssVariables": [
-        "--metric-radius",
         "--color-border",
-        "--color-background-secondary",
+        "--color-surface-raised",
         "--color-text-primary",
         "--color-primary",
-        "--color-secondary",
-        "--color-success",
-        "--color-warning",
-        "--color-danger",
         "--color-primary-400",
+        "--color-secondary",
         "--color-secondary-400",
+        "--color-success",
         "--color-success-400",
+        "--color-warning",
         "--color-warning-400",
+        "--color-danger",
         "--color-danger-400",
         "--color-text-secondary"
       ],
@@ -3994,6 +4132,7 @@
       "description": "A feature-rich table component with dual API support (data-driven and declarative compound), sorting, selection, expandable rows, pagination, and column management.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "data": {
           "type": "T[]",
@@ -4007,6 +4146,10 @@
           "type": "keyof T | ((row: T, index: number) => string | number)",
           "description": "Property name or function to extract stable row identifiers for React keys and selection. Provides consistent component identity during row reordering or updates."
         },
+        "onRowClick": {
+          "type": "(row: T) => void",
+          "description": "Row-level click handler (data-driven API). When provided, body rows get a pointer cursor, keyboard focus (Enter/Space activates), and call back with the row record. Selection/expansion controls stop propagation as before."
+        },
         "variant": {
           "type": "TableVariant",
           "description": "Visual variant for different table styles"
@@ -4165,7 +4308,6 @@
         "--color-neutral-700",
         "--color-neutral-50",
         "--color-neutral-800",
-        "--color-text-secondary",
         "--color-text-primary",
         "--color-surface-hover",
         "--color-primary",
@@ -4185,6 +4327,7 @@
       "description": "A vertical or horizontal timeline component for displaying sequential events with animated entry on scroll.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "layout": {
           "type": "TimelineLayout",
@@ -4194,6 +4337,10 @@
             "vertical",
             "horizontal"
           ]
+        },
+        "items": {
+          "type": "TimelineItemData[]",
+          "description": "Data-driven items. When provided, the timeline renders from this array and any `children` are ignored (dev-warns). Omit it to use the compound API."
         }
       },
       "subComponents": [
@@ -4206,26 +4353,33 @@
         "baseStyleHorizontal",
         "itemStyle",
         "itemStyleHorizontal",
-        "lineStyle",
-        "lineStyleHorizontal",
+        "connectorStyle",
+        "connectorStyleHorizontal",
+        "connectorCompletedStyle",
         "markerStyle",
         "markerStatuses",
         "completed",
         "active",
         "pending",
         "contentStyle",
-        "contentStyleHorizontal"
+        "contentStyleHorizontal",
+        "titleStyle",
+        "descriptionStyle",
+        "timestampStyle"
       ],
       "cssVariables": [
         "--color-border",
         "--color-success",
+        "--color-surface",
         "--color-success-contrast",
         "--color-primary",
-        "--color-primary-contrast",
-        "--color-primary-100",
-        "--color-background"
+        "--color-background",
+        "--color-text-muted",
+        "--color-text-primary",
+        "--color-text-secondary",
+        "--color-text-placeholder"
       ],
-      "codeExample": "import { Timeline } from \"@flikk/ui\";\n\n<Timeline>\n  <Timeline.Item status=\"completed\">\n    <Timeline.Marker />\n    <Timeline.Content>\n      <h4 className=\"text-sm font-medium\">Order Placed</h4>\n      <p className=\"text-sm text-gray-500\">March 15, 2025 at 9:30 AM</p>\n    </Timeline.Content>\n  </Timeline.Item>\n  <Timeline.Item status=\"active\">\n    <Timeline.Marker icon={<TruckIcon className=\"w-4 h-4\" />} />\n    <Timeline.Content>\n      <h4 className=\"text-sm font-medium\">In Transit</h4>\n    </Timeline.Content>\n  </Timeline.Item>\n  <Timeline.Item status=\"pending\">\n    <Timeline.Marker />\n    <Timeline.Content>\n      <h4 className=\"text-sm font-medium\">Delivered</h4>\n    </Timeline.Content>\n  </Timeline.Item>\n</Timeline>"
+      "codeExample": "import { Timeline } from \"@flikk/ui\";\n\n<Timeline>\n  <Timeline.Item status=\"completed\">\n    <Timeline.Marker />\n    <Timeline.Content>\n      <h4 className=\"text-sm font-medium\">Order Placed</h4>\n      <p className=\"text-sm text-[var(--color-text-secondary)]\">\n        March 15, 2025 at 9:30 AM\n      </p>\n    </Timeline.Content>\n  </Timeline.Item>\n  <Timeline.Item status=\"active\">\n    <Timeline.Marker icon={<TruckIcon className=\"w-4 h-4\" />} />\n    <Timeline.Content>\n      <h4 className=\"text-sm font-medium\">In Transit</h4>\n    </Timeline.Content>\n  </Timeline.Item>\n  <Timeline.Item status=\"pending\">\n    <Timeline.Marker />\n    <Timeline.Content>\n      <h4 className=\"text-sm font-medium\">Delivered</h4>\n    </Timeline.Content>\n  </Timeline.Item>\n</Timeline>"
     },
     {
       "name": "Checkbox",
@@ -4235,6 +4389,7 @@
       "description": "A checkbox component for selecting one or more options, with support for indeterminate state, descriptions, and two sizes. Supports standalone usage or Checkbox.Group for centralized state management.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "id": {
           "type": "string"
@@ -4305,6 +4460,7 @@
       "description": "A compound color picker component with canvas, sliders, format selector, eye dropper, preset swatches, and saved colors. Supports hex, RGB, and HSL output formats with solid, gradient, and image modes.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "value": {
           "type": "string",
@@ -4454,6 +4610,7 @@
       "description": "Combobox component",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "options": {
           "type": "ComboboxOption<T>[]",
@@ -4600,132 +4757,6 @@
       ],
       "codeExample": "import { Combobox } from \"@flikk/ui\";\n\n<Combobox\n  options={users}\n  value={value}\n  onChange={setValue}\n  label=\"Assign to\"\n  placeholder=\"Search team members...\"\n  helperText=\"Start typing to search\"\n/>"
     },
-    {
-      "name": "CronInput",
-      "category": "forms",
-      "pattern": "enhanced",
-      "importPath": "@flikk/ui/forms",
-      "description": "A visual cron expression builder that outputs standard cron syntax. Supports visual builder mode, raw cron string input, preset schedules, human-readable descriptions, and next run time previews.",
-      "status": "stable",
-      "productionReady": true,
-      "props": {
-        "value": {
-          "type": "string",
-          "description": "Controlled cron expression string, e.g. \"0 9  1\""
-        },
-        "defaultValue": {
-          "type": "string",
-          "description": "Default cron expression for uncontrolled usage"
-        },
-        "onChange": {
-          "type": "(cronExpression: string) => void",
-          "description": "Callback fired when the cron expression changes"
-        },
-        "showPresets": {
-          "type": "boolean",
-          "description": "Whether to show preset schedule buttons"
-        },
-        "showDescription": {
-          "type": "boolean",
-          "description": "Whether to show the human-readable description"
-        },
-        "showNextRuns": {
-          "type": "boolean",
-          "description": "Whether to show upcoming execution times"
-        },
-        "nextRunCount": {
-          "type": "number",
-          "description": "Number of next run times to display (default: 3)"
-        },
-        "size": {
-          "type": "CronInputSize",
-          "description": "Size variant",
-          "options": [
-            "sm",
-            "md",
-            "lg"
-          ]
-        },
-        "mode": {
-          "type": "CronInputMode",
-          "description": "Display mode: visual builder, raw string input, or both",
-          "options": [
-            "visual",
-            "raw",
-            "both"
-          ]
-        },
-        "state": {
-          "type": "CronInputState",
-          "default": "default",
-          "description": "Validation/interaction state",
-          "options": [
-            "default",
-            "disabled",
-            "invalid"
-          ]
-        },
-        "disabled": {
-          "type": "boolean",
-          "description": "Whether the input is disabled @deprecated Use `state=\"disabled\"` instead"
-        },
-        "label": {
-          "type": "string",
-          "description": "Label text for the component"
-        },
-        "helperText": {
-          "type": "React.ReactNode",
-          "description": "Helper text displayed below the component"
-        }
-      },
-      "themeKeys": [
-        "baseStyle",
-        "labelStyle",
-        "builderStyle",
-        "fieldGroupStyle",
-        "fieldLabelStyle",
-        "fieldSelectStyle",
-        "fieldSelectSizes",
-        "sm",
-        "md",
-        "lg",
-        "rawInputStyle",
-        "rawInputSizes",
-        "sm",
-        "md",
-        "lg",
-        "modeToggleStyle",
-        "modeToggleActiveStyle",
-        "presetButtonStyle",
-        "presetButtonActiveStyle",
-        "descriptionStyle",
-        "nextRunsStyle",
-        "nextRunItemStyle",
-        "sectionHeadingStyle",
-        "errorStyle"
-      ],
-      "cssVariables": [
-        "--color-text-primary",
-        "--color-text-secondary",
-        "--form-radius",
-        "--color-border",
-        "--color-surface",
-        "--color-primary-600",
-        "--color-primary",
-        "--color-background-disabled",
-        "--color-text-disabled",
-        "--color-primary-500",
-        "--color-text-placeholder",
-        "--color-surface-hover",
-        "--color-primary-50",
-        "--color-primary-400",
-        "--color-primary-100",
-        "--color-text-muted",
-        "--color-danger",
-        "--color-danger-400"
-      ],
-      "codeExample": "import { CronInput } from \"@flikk/ui\";\n\n<CronInput\n  label=\"Schedule\"\n  defaultValue=\"0 9 * * 1-5\"\n  showPresets\n  showDescription\n  showNextRuns\n  onChange={(cron) => console.log(cron)}\n/>"
-    },
     {
       "name": "DatePicker",
       "category": "forms",
@@ -4734,6 +4765,7 @@
       "description": "A date picker component with support for single dates, date ranges, custom formats, presets, and date restrictions.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "id": {
           "type": "string",
@@ -4929,6 +4961,7 @@
       "description": "A dedicated date range picker with preset sidebar, dual calendars, and Apply/Cancel footer.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "id": {
           "type": "string",
@@ -5123,6 +5156,7 @@
       "description": "A drag-and-drop file upload component with file type validation, size limits, image previews, and multiple file support.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "accept": {
           "type": "string | string[]",
@@ -5246,6 +5280,7 @@
       "description": "An internal label component used by all form elements. Use the label prop on form components (Input, Select, Textarea) rather than using FormLabel directly.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "htmlFor": {
           "type": "string",
@@ -5283,6 +5318,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,
       "props": {
         "size": {
           "type": "InputSize",
@@ -5460,6 +5496,7 @@
       "description": "A composite input component for collecting address information. Displays street address, state, country, and postal code fields as a unified control with connected borders.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "showCountrySelector": {
           "type": "boolean",
@@ -5542,6 +5579,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,
       "props": {
         "value": {
           "type": "number",
@@ -5618,6 +5656,7 @@
       "description": "A composite component for collecting credit card information. Displays card number, expiry date, and CVC fields as a unified control with automatic formatting and connected borders.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "state": {
           "type": "'default' | 'disabled' | 'invalid'",
@@ -5693,6 +5732,7 @@
       "description": "A masked date input with automatic slash insertion. Type numbers continuously (e.g.,",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "value": {
           "type": "string",
@@ -5729,6 +5769,7 @@
       "description": "A one-time password input component for authentication and verification flows. Supports customizable length, auto-focus, paste handling, and keyboard navigation between fields.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "length": {
           "type": "number",
@@ -5801,6 +5842,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,
       "props": {
         "value": {
           "type": "string[]",
@@ -5927,6 +5969,7 @@
       "description": "An @mention input that shows a suggestion dropdown when the user types a trigger character. Selected mentions render as inline Tag chips with avatars. Supports multiple triggers, keyboard navigation, async search, and custom renderers.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "triggers": {
           "type": "MentionTrigger[]",
@@ -6073,6 +6116,7 @@
       "description": "Radio component for selecting one option from a group of mutually exclusive choices. Supports standalone usage or Radio.Group for centralized state management.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "id": {
           "type": "string"
@@ -6143,6 +6187,7 @@
       "description": "A rich text editor with formatting toolbar supporting bold, italic, underline, alignment, font sizes, colors, and undo/redo.",
       "status": "beta",
       "productionReady": false,
+      "generative": false,
       "statusWarning": "⚠️ BETA: This component is not production-ready. API may change without notice.",
       "props": {
         "size": {
@@ -6265,6 +6310,7 @@
       "description": "A customizable select component with support for labels, helper text, searchable options, typeahead, creatable options, and portal-based dropdown positioning.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "id": {
           "type": "string",
@@ -6464,6 +6510,7 @@
       "description": "A flexible card for single or multi-select choices. Children can be any content — the card handles selection state, indicator rendering, and keyboard navigation. Use SelectableCard.Group for coordinated selection, or use standalone with checked/onChange props.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "value": {
           "type": "string",
@@ -6535,6 +6582,7 @@
       "description": "A canvas-based signature capture component. Supports mouse and touch input, customizable stroke color and width, and exports signatures as data URLs.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "id": {
           "type": "string",
@@ -6640,6 +6688,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,
       "props": {
         "state": {
           "type": "SliderState",
@@ -6762,11 +6811,12 @@
     {
       "name": "Switch",
       "category": "forms",
-      "pattern": "simple",
+      "pattern": "enhanced",
       "importPath": "@flikk/ui/forms",
       "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,
       "props": {
         "id": {
           "type": "string",
@@ -6828,6 +6878,10 @@
       "themeKeys": [
         "container",
         "track",
+        "trackStates",
+        "unchecked",
+        "checked",
+        "disabled",
         "thumb",
         "description",
         "trackSizes",
@@ -6840,11 +6894,12 @@
         "lg"
       ],
       "cssVariables": [
-        "--color-surface-sunken",
+        "--color-border",
+        "--color-primary-600",
+        "--color-neutral-200",
+        "--color-neutral-700",
         "--color-primary",
         "--color-background-disabled",
-        "--color-danger",
-        "--color-border",
         "--color-text-muted"
       ],
       "codeExample": "import { Switch } from \"@flikk/ui\";\n\n<Switch\n  id=\"notifications-switch\"\n  label=\"Enable notifications\"\n  description=\"Receive notifications when someone mentions you\"\n/>"
@@ -6857,6 +6912,7 @@
       "description": "A flexible multiline text input component with support for different sizes, states, and className overrides following the shadcn approach.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "size": {
           "type": "TextareaSize",
@@ -6932,6 +6988,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.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "value": {
           "type": "string",
@@ -7034,6 +7091,7 @@
         "--color-neutral-200",
         "--color-text-muted",
         "--color-background-secondary",
+        "--color-surface-overlay",
         "--color-border",
         "--form-radius",
         "--color-neutral-400",
@@ -7057,6 +7115,7 @@
       "description": "Concentric circular progress rings inspired by Apple Activity. Supports custom colors, animations, tooltips, and up to 5 rings.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "rings": {
           "type": "RingData[]",
@@ -7126,6 +7185,7 @@
       "description": "SVG-based area chart with smooth curves, gradient fills, and interactive tooltips. Supports multiple series, stacking, and null value handling.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "dotRadius": {
           "type": "number"
@@ -7190,6 +7250,7 @@
       "description": "SVG-based bar chart with animated bars, interactive tooltips, and multi-series support. Handles null values with optional placeholder bars.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "barRadius": {
           "type": "number"
@@ -7230,6 +7291,7 @@
       "description": "Combines bar and line series in a single chart, ideal for comparing volume metrics with trend lines.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "config": {
           "type": "ComboChartConfig",
@@ -7304,6 +7366,7 @@
       "description": "A circular progress chart for displaying percentage values with smooth animations. Supports solid and segmented variants.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "variant": {
           "type": "\"solid\" | \"segmented\"",
@@ -7382,6 +7445,7 @@
       "description": "A conversion funnel chart with trapezoid shapes showing progressive dropoff. Supports horizontal and vertical orientations with curved or linear edges.",
       "status": "beta",
       "productionReady": false,
+      "generative": false,
       "statusWarning": "⚠️ BETA: This component is not production-ready. API may change without notice.",
       "props": {
         "data": {
@@ -7480,6 +7544,7 @@
       "description": "A responsive heatmap for visualizing data intensity across two dimensions. Supports weekly, monthly, and hourly views with semantic color theming.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "data": {
           "type": "HeatmapDataPoint[]",
@@ -7554,6 +7619,7 @@
       "description": "A custom SVG line chart with smooth curve interpolation, multi-series support, and interactive tooltips.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "color": {
           "type": "SemanticColor"
@@ -7587,6 +7653,7 @@
       "description": "A radar (spider) chart for comparing multi-dimensional data across categories. Supports multiple overlapping series, configurable grid rings, and optional Framer Motion entrance animations.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "axes": {
           "type": "string[]",
@@ -7672,6 +7739,7 @@
       "description": "A scatter plot for visualizing correlation between two variables. Supports category coloring and optional bubble sizing.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "data": {
           "type": "ScatterPlotDataPoint[]",
@@ -7701,16 +7769,6 @@
           "type": "boolean",
           "description": "Enable tooltip on hover"
         },
-        "title": {
-          "type": "string",
-          "description": "Accessibility props"
-        },
-        "description": {
-          "type": "string"
-        },
-        "enableKeyboardNavigation": {
-          "type": "boolean"
-        },
         "svgClassName": {
           "type": "string",
           "description": "className overrides for chart elements (shadcn approach)"
@@ -7747,7 +7805,8 @@
         "--color-primary",
         "--color-success",
         "--color-warning",
-        "--color-danger"
+        "--color-danger",
+        "--color-${color}"
       ],
       "codeExample": "import { ScatterPlot } from \"@flikk/ui\";\n\n<ScatterPlot\n  data={productData}\n  xLabel=\"Price ($)\"\n  yLabel=\"Customer Satisfaction (%)\"\n  className=\"w-full max-w-[600px] h-[400px]\"\n/>"
     },
@@ -7759,6 +7818,7 @@
       "description": "A stacked bar chart where data series are layered on top of each other, showing both individual and total values. Supports percentage normalization with expand mode.",
       "status": "stable",
       "productionReady": true,
+      "generative": true,
       "props": {
         "barRadius": {
           "type": "number"
@@ -7795,6 +7855,7 @@
       "description": "Animated orb effect with dot-sphere, liquid, and aura visualization modes. Supports customizable colors, state-driven animation, and glow effects.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "size": {
           "type": "number",
@@ -7821,6 +7882,7 @@
       "description": "Page-level animation orchestration with staggered presets. Use Animated.Item for standalone animations or wrap items in Animated.Group for coordinated staggered entrance and exit.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {},
       "subComponents": [
         "Animated.Group",
@@ -7836,6 +7898,7 @@
       "description": "Animated multi-color gradient background effect with drifting, morphing blobs. Ideal for hero sections and decorative backgrounds. Renders as an absolutely-positioned layer that does not block interaction.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "colors": {
           "type": "string[]",
@@ -7880,6 +7943,7 @@
       "description": "A compound cursor system that replaces the default cursor with a custom animated element. Supports colors, sizes, shapes, glass variants, and a smooth-following companion element.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "size": {
           "type": "CustomCursorSize"
@@ -7958,6 +8022,7 @@
       "description": "An SVG-based dot grid background pattern for hero sections and content areas. Place it inside a container with",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "spacing": {
           "type": "number",
@@ -8005,6 +8070,7 @@
       "description": "A reusable glass morphism overlay that adapts to any background color. Drop it into a container with relative positioning to add a layered glass border and gradient effect.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "rounded": {
           "type": "string",
@@ -8049,6 +8115,7 @@
       "description": "A chromatic aberration glass effect using SVG displacement filters. Wraps content with a realistic refractive glass surface. Scroll the demos below to see the glass interact with the background.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "width": {
           "type": "number | string",
@@ -8162,6 +8229,7 @@
       "description": "An SVG-based grid background pattern for hero sections and landing pages. Place it inside a container with",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "size": {
           "type": "number",
@@ -8209,6 +8277,7 @@
       "description": "InteractiveCharacters component",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "state": {
           "type": "CharacterState",
@@ -8233,6 +8302,7 @@
       "description": "A wrapper component that adds a magnetic pull effect to its children. When the cursor hovers, the element subtly translates toward the cursor, creating an engaging interactive effect. Supports configurable strength, distance, spring physics, and an inner parallax multiplier. Respects reduced motion preferences.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "strength": {
           "type": "number",
@@ -8267,47 +8337,6 @@
       },
       "codeExample": "import { MagneticElement } from \"@flikk/ui/effects\";\n\n<MagneticElement strength={0.3} distance={100}>\n  <button className=\"bg-gray-900 text-white px-6 py-3 rounded-lg font-medium\">\n    Hover and pull me\n  </button>\n</MagneticElement>"
     },
-    {
-      "name": "MorphingText",
-      "category": "effects",
-      "pattern": "simple",
-      "importPath": "@flikk/ui/effects",
-      "description": "Smoothly morphs between different text strings using a blur/fade transition. Two overlapping text layers cross-fade with a Gaussian blur effect to create a seamless morphing appearance.",
-      "status": "stable",
-      "productionReady": true,
-      "props": {
-        "texts": {
-          "type": "string[]",
-          "required": true,
-          "description": "Array of text strings to morph between"
-        },
-        "interval": {
-          "type": "number",
-          "description": "Time between transitions in ms (default 3000)"
-        },
-        "transitionDuration": {
-          "type": "number",
-          "description": "Transition duration in ms (default 800)"
-        },
-        "loop": {
-          "type": "boolean",
-          "description": "Loop continuously (default true)"
-        },
-        "pauseOnHover": {
-          "type": "boolean",
-          "description": "Pause cycling on hover (default false)"
-        },
-        "currentIndex": {
-          "type": "number",
-          "description": "Controlled current index (overrides internal state)"
-        },
-        "onTextChange": {
-          "type": "(index: number, text: string) => void",
-          "description": "Callback when the active text changes"
-        }
-      },
-      "codeExample": "import { MorphingText } from \"@flikk/ui/effects\";\n\n<MorphingText\n  texts={[\"Innovative\", \"Powerful\", \"Scalable\", \"Beautiful\"]}\n  interval={3000}\n  transitionDuration={800}\n  className=\"text-4xl font-bold\"\n/>"
-    },
     {
       "name": "NoiseOverlay",
       "category": "effects",
@@ -8316,6 +8345,7 @@
       "description": "An SVG feTurbulence-based noise/grain texture overlay that adds a matte or film-like quality to surfaces. Renders as an absolute-positioned, non-interactive layer. The parent container should have",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "opacity": {
           "type": "number",
@@ -8359,6 +8389,7 @@
       "description": "A shared overlay component providing consistent backdrop, portal rendering, animations, scroll lock, and escape key behavior for modals, drawers, and command palettes.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "isOpen": {
           "type": "boolean",
@@ -8442,69 +8473,6 @@
       ],
       "codeExample": "import { Overlay } from \"@flikk/ui\";\n\nconst [isOpen, setIsOpen] = useState(false);\n\n<Button onClick={() => setIsOpen(true)}>Open Overlay</Button>\n\n<Overlay isOpen={isOpen} onClose={() => setIsOpen(false)} position=\"center\">\n  <div className=\"bg-white rounded-lg shadow-2xl p-8 max-w-md\">\n    <h2>Centered Overlay</h2>\n    <p>Click outside or press Escape to close.</p>\n    <Button onClick={() => setIsOpen(false)}>Close</Button>\n  </div>\n</Overlay>"
     },
-    {
-      "name": "PageTransition",
-      "category": "effects",
-      "pattern": "simple",
-      "importPath": "@flikk/ui/effects",
-      "description": "PageTransition component",
-      "status": "stable",
-      "productionReady": true,
-      "props": {
-        "logo": {
-          "type": "React.ReactNode"
-        },
-        "type": {
-          "type": "PageTransitionType"
-        },
-        "direction": {
-          "type": "PageTransitionDirection"
-        },
-        "duration": {
-          "type": "number"
-        },
-        "delay": {
-          "type": "number"
-        },
-        "color": {
-          "type": "string"
-        },
-        "parallax": {
-          "type": "boolean"
-        },
-        "onStart": {
-          "type": "() => void"
-        },
-        "onComplete": {
-          "type": "() => void"
-        }
-      },
-      "codeExample": "import { PageTransition } from \"@flikk/ui/effects\";\n\nconst Logo = () => (\n  <div className=\"size-14 rounded-2xl bg-white flex items-center justify-center shadow-xl\">\n    <div className=\"size-7 rounded-md bg-neutral-900\" />\n  </div>\n);\n\n<PageTransition logo={<Logo />}>\n  <main className=\"min-h-screen\">{/* page content */}</main>\n</PageTransition>"
-    },
-    {
-      "name": "ParallaxSection",
-      "category": "effects",
-      "pattern": "simple",
-      "importPath": "@flikk/ui/effects",
-      "description": "A scroll-driven parallax wrapper that translates its children at a configurable rate relative to normal scroll, creating depth and visual interest. Uses GPU-accelerated transforms for smooth animation.",
-      "status": "stable",
-      "productionReady": true,
-      "props": {
-        "speed": {
-          "type": "number",
-          "description": "Parallax speed multiplier. Negative = moves opposite direction. (default 0.5)"
-        },
-        "direction": {
-          "type": "'vertical' | 'horizontal'",
-          "description": "Direction of parallax (default 'vertical')"
-        },
-        "scrollRef": {
-          "type": "RefObject<HTMLElement>",
-          "description": "Use scroll container instead of window (ref to container)"
-        }
-      },
-      "codeExample": "import { ParallaxSection } from \"@flikk/ui/effects\";\n\n<div className=\"relative overflow-hidden bg-slate-900 py-32\">\n  <ParallaxSection speed={0.3} className=\"absolute inset-0\">\n    <div className=\"h-full w-full bg-gradient-to-br from-blue-600/30 to-purple-600/30\" />\n  </ParallaxSection>\n  <div className=\"relative z-10 text-center\">\n    <h2 className=\"text-3xl font-bold text-white\">Subtle Depth</h2>\n  </div>\n</div>\n\n{/* Negative speed reverses direction */}\n<div className=\"relative overflow-hidden bg-indigo-950 py-32\">\n  <ParallaxSection speed={-0.3} className=\"absolute inset-0\">\n    <div className=\"h-full w-full bg-gradient-to-r from-violet-500/20 to-fuchsia-500/20\" />\n  </ParallaxSection>\n</div>"
-    },
     {
       "name": "Particles",
       "category": "effects",
@@ -8513,6 +8481,7 @@
       "description": "A floating particle background effect powered by Three.js. Particles drift upward with slight horizontal variation and react to mouse proximity. Optional connection lines are drawn between nearby particles. Place inside a container with",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "count": {
           "type": "number",
@@ -8564,6 +8533,67 @@
       ],
       "codeExample": "import { Particles } from \"@flikk/ui\";\n\n<div className=\"relative overflow-hidden bg-gray-950 h-96\">\n  <Particles count={80} color=\"#6366f1\" connectionDistance={120} />\n  <div className=\"relative z-10 flex items-center justify-center h-full\">\n    <h2 className=\"text-3xl font-bold text-white\">\n      Interactive Particle Network\n    </h2>\n  </div>\n</div>"
     },
+    {
+      "name": "Preloader",
+      "category": "effects",
+      "pattern": "simple",
+      "importPath": "@flikk/ui/effects",
+      "description": "Preloader component",
+      "status": "stable",
+      "productionReady": true,
+      "generative": false,
+      "props": {
+        "logo": {
+          "type": "React.ReactNode",
+          "description": "Decorative mark centered on the curtain (hidden from assistive tech)."
+        },
+        "type": {
+          "type": "PreloaderType",
+          "description": "`slide` = one full curtain exits; `split` = two half panels part in opposite directions; `blinds` = staggered strips sweep the same way; `shutters` = strips alternate directions; `layers` = stacked curtains trail each other in lightening shades; `iris` = a circular mask closes on the curtain from the edges to the center."
+        },
+        "direction": {
+          "type": "PreloaderDirection",
+          "description": "Exit direction. For `split`, `up`/`down` split along the horizontal seam and `left`/`right` along the vertical seam (the two are equivalent per axis). For `blinds`/`shutters`, strips orient perpendicular to the exit axis. Ignored by `iris` (always closes to center)."
+        },
+        "duration": {
+          "type": "number",
+          "description": "Exit animation duration in seconds (not ms), per panel. For staggered types the total exit time is `duration + (panels - 1) stagger`."
+        },
+        "delay": {
+          "type": "number",
+          "description": "Minimum hold time in seconds (not ms). The curtain exits once BOTH the window `load` event has fired and this delay has elapsed."
+        },
+        "color": {
+          "type": "string",
+          "description": "Curtain fill as a CSS color value (e.g. `\"var(--color-primary-900)\"`, `\"#0a0a0a\"`). Applied as an inline `background-color`, so it wins over `className`. When omitted, the curtain uses `bg-[var(--color-primary)]` as a class, which `className` background utilities can override."
+        },
+        "parallax": {
+          "type": "boolean",
+          "description": "Slide only: the logo lags behind the curtain for a depth effect."
+        },
+        "contained": {
+          "type": "boolean",
+          "description": "Position the overlay `absolute` within the nearest positioned ancestor instead of `fixed` to the viewport. Use when embedding the transition in a container (demos, hero sections) rather than covering the whole page."
+        },
+        "panels": {
+          "type": "number",
+          "description": "Strip/slat/layer count for `blinds` (default 5), `shutters` (default 4), and `layers` (default 3). Clamped to 2–12. Ignored by other types."
+        },
+        "stagger": {
+          "type": "number",
+          "description": "Seconds between successive panels for `blinds`/`shutters` (default 0.08) and `layers` (default 0.14). Ignored by other types."
+        },
+        "onStart": {
+          "type": "() => void",
+          "description": "Fires when the exit animation starts (immediately if reduced motion is on)."
+        },
+        "onComplete": {
+          "type": "() => void",
+          "description": "Fires once the reveal finishes; the overlay unmounts from the DOM."
+        }
+      },
+      "codeExample": "import { Preloader } from \"@flikk/ui/effects\";\n\nconst Logo = () => (\n  <div className=\"size-14 rounded-2xl bg-white flex items-center justify-center shadow-xl\">\n    <div className=\"size-7 rounded-md bg-neutral-900\" />\n  </div>\n);\n\n<Preloader logo={<Logo />}>\n  <main className=\"min-h-screen\">{/* page content */}</main>\n</Preloader>"
+    },
     {
       "name": "ProgressiveBlur",
       "category": "effects",
@@ -8572,11 +8602,12 @@
       "description": "A progressive blur effect for edges of scrollable containers. Uses stacked backdrop-filter layers with mask-image bands for a smooth, performant blur gradient.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "position": {
           "type": "ProgressiveBlurPosition | ProgressiveBlurPosition[]",
           "default": "bottom",
-          "description": "Position(s) where the blur effect should be applied. Can be a single position or array of positions."
+          "description": "Position(s) where the blur effect should be applied. Can be a single position or array of positions. With an array, one element renders per position, so `ref` is not forwarded and `id`/event props apply to every instance."
         },
         "blurLevels": {
           "type": "number[]",
@@ -8598,7 +8629,7 @@
           "description": "Size of the blur region. Height for top/bottom positions, width for left/right positions."
         }
       },
-      "codeExample": "import { ProgressiveBlur } from \"@flikk/ui\";\n\n<div className=\"relative\">\n  <ScrollableContent />\n  <ProgressiveBlur position={[\"top\", \"bottom\"]} />\n</div>"
+      "codeExample": "import { ProgressiveBlur } from \"@flikk/ui\";\n\n<div className=\"relative max-w-96\">\n  <ScrollableContent />\n  <ProgressiveBlur position={[\"top\", \"bottom\"]} />\n</div>"
     },
     {
       "name": "ScrollReveal",
@@ -8608,6 +8639,7 @@
       "description": "Intersection-observer wrapper that triggers an entrance animation when its children scroll into the viewport. Supports six built-in presets, custom variants, stagger-children timing, and respects the prefers-reduced-motion media query.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "preset": {
           "type": "ScrollRevealPreset",
@@ -8642,68 +8674,100 @@
           "description": "Stagger children by this amount in seconds (default 0)"
         }
       },
-      "codeExample": "import { ScrollReveal } from \"@flikk/ui/effects\";\n\n<ScrollReveal preset=\"fadeUp\" duration={0.6} once>\n  <div className=\"rounded-lg border p-6\">\n    <h3 className=\"text-lg font-semibold\">Revealed on scroll</h3>\n    <p className=\"mt-2 text-gray-600\">This content fades in as it enters the viewport.</p>\n  </div>\n</ScrollReveal>\n\n{/* Staggered children */}\n<ScrollReveal preset=\"fadeUp\" stagger={0.1}>\n  <Card />\n  <Card />\n  <Card />\n</ScrollReveal>"
+      "codeExample": "import { ScrollReveal } from \"@flikk/ui/effects\";\n\n<ScrollReveal preset=\"fadeUp\" duration={0.6} once>\n  <div className=\"rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-6\">\n    <h3 className=\"text-lg font-semibold text-[var(--color-text-primary)]\">Revealed on scroll</h3>\n    <p className=\"mt-2 text-[var(--color-text-secondary)]\">This content fades in as it enters the viewport.</p>\n  </div>\n</ScrollReveal>"
     },
     {
-      "name": "Spotlight",
+      "name": "StripePattern",
       "category": "effects",
       "pattern": "simple",
       "importPath": "@flikk/ui/effects",
-      "description": "A mouse-following radial gradient that creates a subtle surface illumination effect. Tracks the cursor within the parent element and renders a smooth, spring-animated glow. The parent container must have",
+      "description": "An SVG-based diagonal stripe background pattern. Drop it into a container with",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
-        "size": {
+        "spacing": {
           "type": "number",
-          "default": "300",
-          "description": "Diameter of the spotlight glow in pixels."
+          "default": "12",
+          "description": "Distance between adjacent stripes in pixels (center to center)."
+        },
+        "strokeWidth": {
+          "type": "number",
+          "default": "6",
+          "description": "Thickness of each stripe in pixels."
+        },
+        "angle": {
+          "type": "number",
+          "default": "-45",
+          "description": "Stripe rotation in degrees. `-45` runs bottom-left to top-right."
         },
         "color": {
           "type": "string",
-          "default": "var(--color-primary)",
-          "description": "Color of the spotlight glow. Accepts any valid CSS color value or CSS variable reference."
+          "default": "color-mix(in srgb, var(--color-border) 50%, transparent)",
+          "description": "Stroke color of the stripes. Accepts any valid CSS color value or CSS variable."
         },
-        "intensity": {
+        "fade": {
+          "type": "boolean",
+          "default": "false",
+          "description": "Whether to apply a gradient mask that fades the pattern at the edges. Defaults to `false` so the pattern reads as a flat fill — useful for placeholder surfaces. Set to `true` for decorative backgrounds."
+        },
+        "fadeDirection": {
+          "type": "StripePatternFadeDirection",
+          "default": "radial",
+          "description": "Direction of the fade gradient. - \"radial\" fades from center outward - \"top\" | \"bottom\" | \"left\" | \"right\" fades toward that edge"
+        },
+        "fadeSize": {
           "type": "number",
-          "default": "0.15",
-          "description": "Peak opacity of the spotlight glow (0-1)."
+          "default": "50",
+          "description": "Size of the fade area as a percentage (0-100)."
         },
-        "springConfig": {
-          "type": "object",
-          "default": "{                             }",
-          "description": "Spring animation configuration for the mouse-following behavior."
+        "animated": {
+          "type": "boolean",
+          "default": "false",
+          "description": "Whether to apply a subtle pulse animation to the stripes. Respects prefers-reduced-motion automatically."
         }
       },
-      "codeExample": "import { Spotlight } from \"@flikk/ui/effects\";\n\n{/* Parent must have position: relative and overflow: hidden */}\n<div className=\"relative overflow-hidden bg-gray-900 rounded-xl p-10\">\n  <Spotlight size={300} color=\"var(--color-primary)\" intensity={0.15} />\n  <div className=\"relative z-10\">\n    <h3 className=\"text-white text-lg font-semibold\">Hover to illuminate</h3>\n  </div>\n</div>"
+      "codeExample": "import { StripePattern } from \"@flikk/ui\";\n\n<div className=\"relative overflow-hidden rounded-lg border border-dashed h-64\">\n  <StripePattern />\n</div>"
     },
     {
-      "name": "SpotlightBorder",
+      "name": "TiltCard",
       "category": "effects",
       "pattern": "simple",
       "importPath": "@flikk/ui/effects",
-      "description": "An interactive WebGL border effect that illuminates near the mouse cursor. Supports configurable colors, shapes, glow intensity, and a smooth 3D tilt effect.",
+      "description": "Wraps content in a damped 3D mouse tilt (pure CSS transform — no WebGL). The optional",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
+        "tiltIntensity": {
+          "type": "number",
+          "default": "6",
+          "description": "Max tilt in degrees as the mouse moves across the card. 0 disables the tilt."
+        },
+        "glow": {
+          "type": "boolean",
+          "default": "false",
+          "description": "Enable the WebGL spotlight border (illuminates near the cursor with a soft outer glow). Lazy-loads `three` — without it, TiltCard never touches WebGL. ⚠️ Each glowing instance owns a WebGL context; browsers cap ~8–16 live contexts, so avoid enabling it on large collections of cards."
+        },
         "variation": {
-          "type": "SpotlightBorderVariation",
+          "type": "TiltCardVariation",
           "default": "rounded-rect",
-          "description": "Shape variation for the border"
+          "description": "Shape variation for the glow border"
         },
         "rounded": {
           "type": "string",
-          "default": "undefined (inherits from className like rounded-lg)",
-          "description": "Border radius for the container (e.g., \"1rem\", \"var(--button-radius)\", \"9999px\") This controls both the container clip and the shader's corner roundness."
+          "default": "undefined (inherits from className like rounded-xl)",
+          "description": "Border radius for the container (e.g., \"1rem\", \"var(--card-radius)\"). Controls both the container clip and the shader's corner roundness."
         },
         "borderWidth": {
           "type": "number",
           "default": "2",
-          "description": "Border/stroke width in pixels"
+          "description": "Glow border stroke width in pixels"
         },
-        "color": {
+        "glowColor": {
           "type": "string",
           "default": "#ffffff",
-          "description": "Color of the border effect (hex color)"
+          "description": "Color of the glow border (any CSS color three.js can parse)"
         },
         "spotlightSize": {
           "type": "number",
@@ -8715,106 +8779,23 @@
           "default": "0.5",
           "description": "Edge softness of the spotlight (higher = softer falloff)"
         },
-        "shouldAnimate": {
-          "type": "boolean",
-          "default": "true",
-          "description": "Whether to animate the effect (respects prefers-reduced-motion)"
-        },
         "glowExtent": {
           "type": "number",
           "default": "20",
-          "description": "How far the glow can spread outside the container in pixels. This also solves clipping issues with child shadows."
+          "description": "How far the glow can spread outside the container in pixels. Also prevents clipping of child shadows."
         },
         "glowIntensity": {
           "type": "number",
           "default": "0.6",
           "description": "Overall intensity of the glow halo (0-1)"
         },
-        "tiltIntensity": {
-          "type": "number",
-          "default": "10",
-          "description": "Intensity of the 3D tilt effect based on mouse position (0 = disabled)"
-        }
-      },
-      "codeExample": "import { SpotlightBorder } from \"@flikk/ui\";\n\n<SpotlightBorder\n  variation=\"rounded-rect\"\n  color=\"red\"\n  borderWidth={2}\n  spotlightSize={0.4}\n  glowExtent={30}\n  glowIntensity={0.6}\n  className=\"w-80 h-48 rounded-xl\"\n>\n  <Card className=\"w-full h-full p-6 bg-gray-900\">\n    Your content here\n  </Card>\n</SpotlightBorder>"
-    },
-    {
-      "name": "StickyScroll",
-      "category": "effects",
-      "pattern": "simple",
-      "importPath": "@flikk/ui/effects",
-      "description": "Creates an Apple-style sticky scroll experience where one column stays pinned while the other scrolls. As each scrolling section enters the viewport, the sticky content transitions to match.",
-      "status": "beta",
-      "productionReady": false,
-      "statusWarning": "⚠️ BETA: This component is not production-ready. API may change without notice.",
-      "props": {
-        "sections": {
-          "type": "StickyScrollSection[]",
-          "required": true,
-          "description": "Array of sections defining the scroll experience"
-        },
-        "contentPosition": {
-          "type": "'left' | 'right'",
-          "description": "Which side the sticky content appears (default 'left')"
-        },
-        "showProgress": {
-          "type": "boolean",
-          "description": "Show progress dots (default true)"
-        }
-      },
-      "codeExample": "import { StickyScroll } from \"@flikk/ui/effects\";\nimport type { StickyScrollSection } from \"@flikk/ui/effects\";\n\nconst sections: StickyScrollSection[] = [\n  {\n    id: \"design\",\n    title: \"Design System\",\n    description: \"Build consistent interfaces with a shared visual language.\",\n    content: (\n      <div className=\"flex h-full w-full items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600\" />\n    ),\n  },\n  {\n    id: \"components\",\n    title: \"Component Library\",\n    description: \"60+ production-ready components built for real applications.\",\n    content: (\n      <div className=\"flex h-full w-full items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600\" />\n    ),\n  },\n];\n\n<StickyScroll sections={sections} />"
-    },
-    {
-      "name": "StripePattern",
-      "category": "effects",
-      "pattern": "simple",
-      "importPath": "@flikk/ui/effects",
-      "description": "An SVG-based diagonal stripe background pattern. Drop it into a container with",
-      "status": "stable",
-      "productionReady": true,
-      "props": {
-        "spacing": {
-          "type": "number",
-          "default": "12",
-          "description": "Distance between adjacent stripes in pixels (center to center)."
-        },
-        "strokeWidth": {
-          "type": "number",
-          "default": "6",
-          "description": "Thickness of each stripe in pixels."
-        },
-        "angle": {
-          "type": "number",
-          "default": "-45",
-          "description": "Stripe rotation in degrees. `-45` runs bottom-left to top-right."
-        },
-        "color": {
-          "type": "string",
-          "default": "color-mix(in srgb, var(--color-border) 50%, transparent)",
-          "description": "Stroke color of the stripes. Accepts any valid CSS color value or CSS variable."
-        },
-        "fade": {
-          "type": "boolean",
-          "default": "false",
-          "description": "Whether to apply a gradient mask that fades the pattern at the edges. Defaults to `false` so the pattern reads as a flat fill — useful for placeholder surfaces. Set to `true` for decorative backgrounds."
-        },
-        "fadeDirection": {
-          "type": "StripePatternFadeDirection",
-          "default": "radial",
-          "description": "Direction of the fade gradient. - \"radial\" fades from center outward - \"top\" | \"bottom\" | \"left\" | \"right\" fades toward that edge"
-        },
-        "fadeSize": {
-          "type": "number",
-          "default": "50",
-          "description": "Size of the fade area as a percentage (0-100)."
-        },
-        "animated": {
+        "shouldAnimate": {
           "type": "boolean",
-          "default": "false",
-          "description": "Whether to apply a subtle pulse animation to the stripes. Respects prefers-reduced-motion automatically."
+          "default": "true",
+          "description": "Whether to animate (respects prefers-reduced-motion)"
         }
       },
-      "codeExample": "import { StripePattern } from \"@flikk/ui\";\n\n<div className=\"relative overflow-hidden rounded-lg border border-dashed h-64\">\n  <StripePattern />\n</div>"
+      "codeExample": "import { TiltCard } from \"@flikk/ui/effects\";\nimport { Card } from \"@flikk/ui\";\n\n// Tilt only — pure CSS transform, no WebGL\n<TiltCard tiltIntensity={6}>\n  <Card className=\"p-6\">Your content</Card>\n</TiltCard>"
     },
     {
       "name": "AppShell",
@@ -8824,6 +8805,7 @@
       "description": "Bare-bones application shell. Compose Topbar / Sidebar / Main / RightPanel / Footer; Header lives inside Main. Viewport-locked scroll by default (only Main scrolls).",
       "status": "beta",
       "productionReady": false,
+      "generative": false,
       "statusWarning": "⚠️ BETA: This component is not production-ready. API may change without notice.",
       "props": {
         "scroll": {
@@ -8924,6 +8906,7 @@
       "description": "A structured settings-style form layout using a compound component pattern. Each section features an optional sidebar with title, subtitle, and action alongside a responsive content grid. Sections are automatically separated, and a sticky footer provides consistent form actions.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {},
       "subComponents": [
         "FormLayout.Section",
@@ -8947,6 +8930,79 @@
       ],
       "codeExample": "import { FormLayout } from \"@flikk/ui\";\nimport { Input, Select, Button } 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={<Button variant=\"link\" size=\"sm\">Add Address</Button>}\n  >\n    <Input label=\"First Name\" placeholder=\"John\" />\n    <Input label=\"Last Name\" placeholder=\"Doe\" />\n    <Input label=\"Email Address\" type=\"email\" placeholder=\"john@example.com\" />\n  </FormLayout.Section>\n\n  <FormLayout.Section title=\"Preferences\" subtitle=\"Set your preferences\">\n    <Select label=\"Timezone\" options={[...]} placeholder=\"Select timezone\" />\n  </FormLayout.Section>\n\n  <FormLayout.Footer>\n    <div>All fields are required unless marked optional.</div>\n    <div>\n      <Button variant=\"outline\" color=\"neutral\">Cancel</Button>\n      <Button>Save Changes</Button>\n    </div>\n  </FormLayout.Footer>\n</FormLayout>"
     },
+    {
+      "name": "Grid",
+      "category": "layout",
+      "pattern": "simple",
+      "importPath": "@flikk/ui",
+      "description": "Grid component",
+      "status": "stable",
+      "productionReady": true,
+      "generative": true,
+      "props": {
+        "cols": {
+          "type": "GridCols",
+          "default": "1",
+          "description": "Columns: a number (mobile-safe auto-ramp) or a per-breakpoint map.  A number is NOT a literal column count on every screen — it expands through a mobile-first responsive ramp, e.g. `cols={ }` renders 1 column on mobile, 2 from `sm`, and 3 from `lg`. Use a per-breakpoint map (`cols={{         }}` or `{                       }`) for explicit control."
+        },
+        "gap": {
+          "type": "GridGap",
+          "default": "4",
+          "description": "Gap between grid cells (Tailwind spacing scale → gap-N)."
+        },
+        "flow": {
+          "type": "GridFlow",
+          "description": "Grid auto-flow direction.",
+          "options": [
+            "row",
+            "col",
+            "dense"
+          ]
+        },
+        "align": {
+          "type": "GridAlign",
+          "description": "align-items within cells.",
+          "options": [
+            "start",
+            "center",
+            "end",
+            "stretch"
+          ]
+        },
+        "justify": {
+          "type": "GridJustify",
+          "description": "justify-content of tracks.",
+          "options": [
+            "start",
+            "center",
+            "end",
+            "between"
+          ]
+        }
+      },
+      "themeKeys": [
+        "baseStyle",
+        "colsRamp",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+        "10",
+        "11",
+        "12",
+        "cols",
+        "gaps",
+        "flow",
+        "align",
+        "justify"
+      ],
+      "codeExample": "import { Grid } from \"@flikk/ui/layout\";\n\n<Grid cols={3} gap={4}>\n  <div>Total Revenue</div>\n  <div>Active Users</div>\n  <div>Conversion Rate</div>\n</Grid>"
+    },
     {
       "name": "PageLayout",
       "category": "layout",
@@ -8955,6 +9011,7 @@
       "description": "A modern application-shell wrapper with sidebar and topbar variants. PageLayout owns structure and spacing only; navigation and page content stay consumer-provided.",
       "status": "beta",
       "productionReady": false,
+      "generative": false,
       "statusWarning": "⚠️ BETA: This component is not production-ready. API may change without notice.",
       "props": {
         "variant": {
@@ -9024,6 +9081,95 @@
       ],
       "codeExample": "import { PageLayout } from \"@flikk/ui\";\n\n<PageLayout>\n  <PageLayout.Sidebar>{/* Sidebar navigation */}</PageLayout.Sidebar>\n  <PageLayout.Header>{/* Header controls */}</PageLayout.Header>\n  <PageLayout.Content contentWidth=\"wide\">\n    {/* Page content */}\n  </PageLayout.Content>\n</PageLayout>"
     },
+    {
+      "name": "Section",
+      "category": "layout",
+      "pattern": "simple",
+      "importPath": "@flikk/ui",
+      "description": "Section component",
+      "status": "stable",
+      "productionReady": true,
+      "generative": true,
+      "props": {
+        "title": {
+          "type": "ReactNode",
+          "description": "Section heading."
+        },
+        "subtitle": {
+          "type": "ReactNode",
+          "description": "Secondary line under the title."
+        },
+        "actions": {
+          "type": "ReactNode",
+          "description": "Right-aligned actions in the header row."
+        },
+        "gap": {
+          "type": "GridGap",
+          "default": "4",
+          "description": "Spacing between the header and the body (Tailwind spacing scale → mt-N)."
+        }
+      },
+      "themeKeys": [
+        "baseStyle",
+        "header",
+        "title",
+        "subtitle",
+        "actions",
+        "bodyGaps"
+      ],
+      "cssVariables": [
+        "--color-text-primary",
+        "--color-text-secondary"
+      ],
+      "codeExample": "import { Section, Grid } from \"@flikk/ui/layout\";\n\n<Section title=\"Overview\" subtitle=\"This quarter at a glance\">\n  <Grid cols={3} gap={4}>\n    <div>Total Revenue</div>\n    <div>Active Users</div>\n    <div>Conversion Rate</div>\n  </Grid>\n</Section>"
+    },
+    {
+      "name": "Stack",
+      "category": "layout",
+      "pattern": "simple",
+      "importPath": "@flikk/ui",
+      "description": "Stack component",
+      "status": "stable",
+      "productionReady": true,
+      "generative": true,
+      "props": {
+        "direction": {
+          "type": "StackDirection",
+          "default": "col",
+          "description": "Flex direction.",
+          "options": [
+            "row",
+            "col"
+          ]
+        },
+        "gap": {
+          "type": "GridGap",
+          "default": "4",
+          "description": "Gap between items (Tailwind spacing scale → gap-N)."
+        },
+        "align": {
+          "type": "GridAlign",
+          "description": "align-items."
+        },
+        "justify": {
+          "type": "GridJustify",
+          "description": "justify-content."
+        },
+        "wrap": {
+          "type": "boolean",
+          "description": "Allow items to wrap."
+        }
+      },
+      "themeKeys": [
+        "baseStyle",
+        "direction",
+        "gaps",
+        "align",
+        "justify",
+        "wrap"
+      ],
+      "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": "CodeBlock",
       "category": "ai",
@@ -9032,6 +9178,7 @@
       "description": "Syntax-highlighted code display with copy-to-clipboard, line numbers, line highlighting, and diff view. Supports 20+ languages with light and dark themes.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "language": {
           "type": "string",
@@ -9129,6 +9276,7 @@
       "description": "Integrated AI prompt input with model selection, attachments, voice input, and keyboard shortcuts. Supports controlled and uncontrolled patterns.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "value": {
           "type": "string",
@@ -9386,6 +9534,7 @@
       "description": "Streams AI/LLM responses using Server-Sent Events (SSE). Supports OpenAI, Anthropic (Claude), and Google Gemini formats with built-in markdown rendering, smooth streaming animations, and error handling.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "url": {
           "type": "string",
@@ -9533,6 +9682,7 @@
       "description": "Real-time token counter with cost estimation for AI models. Supports GPT-4, Claude, and Gemini models.",
       "status": "stable",
       "productionReady": true,
+      "generative": false,
       "props": {
         "text": {
           "type": "string",
@@ -9658,23 +9808,12 @@
         "Icon",
         "Input",
         "Link",
-        "PageTransition",
+        "Preloader",
         "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>"
     },
-    {
-      "name": "ChangelogLayout",
-      "title": "Blocks/ChangelogLayout",
-      "description": "Full-page composition using AvatarGroup, Badge, Link.",
-      "componentsUsed": [
-        "AvatarGroup",
-        "Badge",
-        "Link"
-      ],
-      "source": "import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { AvatarGroup, Badge, Link } from \"../../components/core\";\nimport { ArrowRightIcon } from \"@heroicons/react/24/outline\";\n\nconst meta: Meta = {\n  title: \"Blocks/ChangelogLayout\",\n  parameters: { layout: \"fullscreen\" },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\n/* ─── Release Data ─────────────────────────────────── */\n\nconst releases = [\n  {\n    version: \"2.5.0\",\n    date: \"FEB 15, 2026\",\n    title: \"AI Components, Dark Mode & Performance\",\n    description:\n      \"A brand-new AI component suite with MessageHistory, PromptInput, and ThinkingIndicator. Full dark mode support across all 50+ components, plus a 40% bundle size reduction with improved tree-shaking.\",\n    authors: [\n      {\n        name: \"Sarah Chen\",\n        src: \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face\",\n      },\n      {\n        name: \"Alex Rivera\",\n        src: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face\",\n      },\n    ],\n    tags: [\n      { label: \"Feature\", color: \"success\" as const },\n      { label: \"Improvement\", color: \"primary\" as const },\n    ],\n    image: true,\n    latest: true,\n  },\n  {\n    version: \"2.4.0\",\n    date: \"JAN 28, 2026\",\n    title: \"Charts v2, GlassEffect & Masonry Layout\",\n    description:\n      \"Completely rewritten chart components with a simplified API. New GlassEffect component with automatic color adaptation and a responsive Masonry layout for grid-based content.\",\n    authors: [\n      {\n        name: \"Alex Rivera\",\n        src: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face\",\n      },\n    ],\n    tags: [\n      { label: \"Breaking Change\", color: \"danger\" as const },\n      { label: \"Feature\", color: \"success\" as const },\n    ],\n    latest: false,\n  },\n  {\n    version: \"2.3.0\",\n    date: \"JAN 10, 2026\",\n    title: \"Forms, Accessibility & DX Improvements\",\n    description:\n      \"New DatePicker, TimePicker, and ColorPicker form components. Completed a full WCAG 2.1 AA compliance audit across all interactive components and added FormLayout for consistent form structure.\",\n    authors: [\n      {\n        name: \"Priya Mehta\",\n        src: \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face\",\n      },\n      {\n        name: \"Sarah Chen\",\n        src: \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face\",\n      },\n      {\n        name: \"Morgan Kim\",\n        src: \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face\",\n      },\n    ],\n    tags: [\n      { label: \"Feature\", color: \"success\" as const },\n      { label: \"Bug Fix\", color: \"warning\" as const },\n      { label: \"Improvement\", color: \"primary\" as const },\n    ],\n    image: true,\n    latest: false,\n  },\n  {\n    version: \"2.2.0\",\n    date: \"DEC 18, 2025\",\n    title: \"Data Display, Drag & Drop, Stepper\",\n    description:\n      \"Introducing KPI, Metric, DescriptionList, and Feed components for rich data display. New DragDrop and Sortable primitives for kanban-style boards, plus a flexible Stepper with vertical and horizontal orientations.\",\n    authors: [\n      {\n        name: \"Morgan Kim\",\n        src: \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face\",\n      },\n      {\n        name: \"Priya Mehta\",\n        src: \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face\",\n      },\n    ],\n    tags: [\n      { label: \"Feature\", color: \"success\" as const },\n      { label: \"Improvement\", color: \"primary\" as const },\n    ],\n    latest: false,\n  },\n];\n\n/* ─── Main Component ───────────────────────────────── */\n\nconst ChangelogPage = () => (\n  <div className=\"min-h-screen bg-[var(--color-background)]\">\n    {/* Header */}\n    <div className=\"max-w-2xl mx-auto px-6 pt-16 pb-12\">\n      <p className=\"text-xs font-semibold tracking-widest uppercase text-[var(--color-text-muted)] mb-4\">\n        Changelog\n      </p>\n      <h1 className=\"text-3xl sm:text-4xl font-bold text-[var(--color-text-primary)] tracking-tight mb-3\">\n        What we've been shipping\n      </h1>\n      <p className=\"text-base text-[var(--color-text-secondary)] max-w-lg leading-relaxed\">\n        New updates and improvements to Flikkui. Follow along as we build the\n        component library you actually want to use.\n      </p>\n    </div>\n\n    {/* Timeline */}\n    <div className=\"max-w-2xl mx-auto px-6 pb-16\">\n      <div className=\"relative pl-10\">\n        {/* Vertical line */}\n        <div className=\"absolute left-[4.5px] top-2 bottom-0 w-px bg-[var(--color-border)]\" />\n\n        {releases.map((release, idx) => (\n          <div\n            key={release.version}\n            className={idx < releases.length - 1 ? \"pb-14\" : \"\"}\n          >\n            {/* Timeline dot */}\n            <div className=\"absolute left-0 mt-1.5 size-2.5 rounded-full bg-[var(--color-primary)] ring-4 ring-[var(--color-background)]\" />\n\n            {/* Date row */}\n            <div className=\"flex items-center gap-4 mb-2\">\n              <time className=\"text-xs font-medium uppercase text-[var(--color-text-muted)]\">\n                {release.date}\n              </time>\n              {release.latest && (\n                <Badge color=\"primary\" variant=\"soft\" size=\"sm\">\n                  Latest\n                </Badge>\n              )}\n              <Link className=\"ml-auto flex\" size=\"sm\">\n                Read more\n                <ArrowRightIcon className=\"size-3\" strokeWidth={2} />\n              </Link>\n            </div>\n\n            {release.image && (\n              <div className=\"h-72 bg-[var(--color-background-tertiary)] rounded-lg w-full my-4\" />\n            )}\n\n            {/* Title */}\n            <h2 className=\"text-lg font-bold text-[var(--color-text-primary)] mb-2\">\n              {release.title}\n            </h2>\n\n            {/* Tags */}\n            <div className=\"flex flex-wrap gap-1.5 mb-3\">\n              {release.tags.map((tag) => (\n                <Badge\n                  key={tag.label}\n                  color={tag.color}\n                  variant=\"filled\"\n                  size=\"sm\"\n                >\n                  {tag.label}\n                </Badge>\n              ))}\n            </div>\n\n            {/* Description */}\n            <p className=\"text-base text-[var(--color-text-secondary)] mb-6\">\n              {release.description}\n            </p>\n\n            {/* Authors */}\n            <div className=\"flex items-center gap-2\">\n              <AvatarGroup\n                avatars={release.authors}\n                size=\"xs\"\n                spacing=\"loose\"\n                max={4}\n              />\n              <span className=\"text-sm font-medium text-[var(--color-text-primary)]\">\n                {release.authors.map((a) => a.name).join(\", \")}\n              </span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  </div>\n);\n\nexport const Default: Story = {\n  render: () => <ChangelogPage />,\n  parameters: {\n    controls: { disable: true },\n  },\n};"
-    },
     {
       "name": "ErrorLayout",
       "title": "Blocks/ErrorLayout",
@@ -9684,6 +9823,21 @@
       ],
       "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};"
     },
+    {
+      "name": "GenerativeUI",
+      "title": "vs. last month",
+      "description": "Generative UI on the real engine: the (simulated) model emits a recursive UINode spec that selects and parameterizes already-compiled FlikkUI components. validate() repairs it against the generated schema and <GenerativeView> from @flikk/ui/generative renders it. Swap",
+      "componentsUsed": [
+        "AspectRatio",
+        "Avatar",
+        "Badge",
+        "Button",
+        "Card",
+        "PageHeading",
+        "Segmented"
+      ],
+      "source": "import { GenerativeView, validate, GENERATIVE_TOOL } from \"@flikk/ui/generative\";\n\n// 1. Give the model the generated tool contract (or load @flikk/ui/tools.json)\n//    const reply = await anthropic.messages.create({ tools: [GENERATIVE_TOOL], ... });\n\n// 2. The model emits a recursive UINode spec — pure JSON, no code:\nconst spec = {\n  component: \"Stack\",\n  props: { gap: 4 },\n  children: [\n    { component: \"Grid\", props: { cols: 3, gap: 4 }, children: [\n      { component: \"Metric\", props: { value: \"$182,000\", label: \"Total Revenue\",\n        trendValue: \"+12%\", trendDirection: \"up\", icon: \"CurrencyDollar\",\n        color: \"success\", variant: \"ghost\" } },\n    ]},\n    { component: \"Card\", props: { title: \"New Signups\" }, children: [\n      { component: \"AreaChart\", props: { data, config } },\n    ]},\n  ],\n};\n\n// 3. Validate/repair (drops handlers/unknown props, coerces enums) → render.\n//    Save the JSON to your DB; replay it later with no LLM.\nconst { spec: safeSpec, issues } = validate(spec);\n<GenerativeView spec={safeSpec} />"
+    },
     {
       "name": "InboxLayout",
       "title": "Blocks/InboxLayout",
@@ -9713,6 +9867,28 @@
       ],
       "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",
+        "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=\"secondary\" 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=\"secondary\"\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=\"secondary\" 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=\"secondary\" 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};"
+    },
     {
       "name": "MailComposerLayout",
       "title": "Blocks/MailComposerLayout",
@@ -9746,19 +9922,15 @@
       "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};"
     },
     {
-      "name": "WaitlistLayout",
-      "title": "Blocks/WaitlistLayout",
-      "description": "Full-page composition using AvatarGroup, Badge, Button, DotPattern, ….",
+      "name": "NodeCanvasEditorLayout",
+      "title": "Generated image",
+      "description": "Full-page composition using Button, Input, Spinner.",
       "componentsUsed": [
-        "AvatarGroup",
-        "Badge",
         "Button",
-        "DotPattern",
-        "Icon",
         "Input",
-        "SlidingNumber"
+        "Spinner"
       ],
-      "source": "import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport {\n  AvatarGroup,\n  Badge,\n  Button,\n  SlidingNumber,\n  Icon,\n} from \"../../components/core\";\nimport { Input } from \"../../components/forms\";\nimport { DotPattern } from \"../../components/effects\";\nimport {\n  SparklesIcon,\n  ArrowRightIcon,\n  BoltIcon,\n  ShieldCheckIcon,\n  CubeTransparentIcon,\n  CheckBadgeIcon,\n} from \"@heroicons/react/24/outline\";\n\nconst meta: Meta = {\n  title: \"Blocks/WaitlistLayout\",\n  parameters: { layout: \"fullscreen\" },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = {\n  render: () => (\n    <div className=\"relative min-h-screen bg-[var(--color-background)] flex flex-col overflow-hidden\">\n      {/* Background dot pattern */}\n      <DotPattern\n        spacing={24}\n        dotSize={1}\n        fade\n        fadeDirection=\"radial\"\n        fadeSize={60}\n        className=\"absolute inset-0 [&>*]:opacity-60\"\n      />\n\n      {/* Nav */}\n      <nav className=\"relative z-10 flex items-center justify-between px-6 sm:px-8 py-5 max-w-7xl w-full mx-auto\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className=\"size-8 rounded-lg bg-[var(--color-primary)] flex items-center justify-center shadow-sm\">\n            <span className=\"text-white font-bold text-sm\">F</span>\n          </div>\n          <span className=\"font-bold text-[var(--color-text-primary)] tracking-tight\">\n            Flikkui\n          </span>\n        </div>\n        <div className=\"hidden sm:flex items-center gap-8 text-sm\">\n          <a\n            href=\"#features\"\n            className=\"text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors\"\n          >\n            Features\n          </a>\n          <a\n            href=\"#pricing\"\n            className=\"text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors\"\n          >\n            Pricing\n          </a>\n          <a\n            href=\"#docs\"\n            className=\"text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors\"\n          >\n            Docs\n          </a>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"soft\" color=\"neutral\" size=\"sm\" iconOnly>\n            <Icon icon=\"github\" size=\"sm\" colorMode=\"mono\" />\n          </Button>\n          <Button variant=\"soft\" color=\"neutral\" size=\"sm\" iconOnly>\n            <Icon icon=\"x\" size=\"sm\" colorMode=\"mono\" />\n          </Button>\n        </div>\n      </nav>\n\n      {/* Hero */}\n      <main className=\"relative z-10 flex-1 flex items-center justify-center px-6 py-12 sm:py-16\">\n        <div className=\"max-w-3xl mx-auto text-center space-y-10\">\n          {/* Badge */}\n          <Badge color=\"primary\" variant=\"soft\" iconStart={<SparklesIcon />}>\n            Now in private beta\n          </Badge>\n\n          {/* Headline */}\n          <div className=\"space-y-5\">\n            <h1 className=\"text-5xl sm:text-6xl lg:text-7xl font-bold text-[var(--color-text-primary)] tracking-tight leading-[1.05]\">\n              The component library\n              <br />\n              <span className=\"bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-400)] bg-clip-text text-transparent\">\n                you've been waiting for\n              </span>\n            </h1>\n            <p className=\"text-lg sm:text-xl text-[var(--color-text-muted)] max-w-xl mx-auto leading-relaxed\">\n              50+ production-ready React components with built-in accessibility,\n              theming, and animations. Be first in line.\n            </p>\n          </div>\n\n          {/* Email capture */}\n          <div className=\"max-w-md mx-auto space-y-3\">\n            <div className=\"flex flex-col sm:flex-row items-stretch gap-2\">\n              <Input\n                placeholder=\"you@company.com\"\n                type=\"email\"\n                iconStart={<SparklesIcon />}\n                className=\"w-full\"\n              />\n              <Button\n                className=\"w-full sm:w-auto flex-shrink-0 sm:px-5\"\n                iconEnd={<ArrowRightIcon className=\"size-4\" />}\n              >\n                Join Waitlist\n              </Button>\n            </div>\n            <p className=\"text-xs text-[var(--color-text-muted)]\">\n              Free forever for personal projects. No credit card required.\n            </p>\n          </div>\n\n          {/* Social proof */}\n          <div className=\"flex flex-col items-center gap-3 pt-2\">\n            <AvatarGroup\n              max={5}\n              size=\"sm\"\n              avatars={[\n                {\n                  name: \"Sarah Chen\",\n                  src: \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face\",\n                },\n                {\n                  name: \"James Wright\",\n                  src: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face\",\n                },\n                {\n                  name: \"Emily Rodriguez\",\n                  src: \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face\",\n                },\n                {\n                  name: \"David Kim\",\n                  src: \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face\",\n                },\n                {\n                  name: \"Lisa Thompson\",\n                  src: \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face\",\n                },\n              ]}\n            />\n            <p className=\"text-sm text-[var(--color-text-muted)]\">\n              Joined by{\" \"}\n              <span className=\"font-semibold text-[var(--color-text-primary)]\">\n                <SlidingNumber value={2847} />\n              </span>{\" \"}\n              developers from{\" \"}\n              <span className=\"font-semibold text-[var(--color-text-primary)]\">\n                Vercel, Linear, Stripe\n              </span>{\" \"}\n              and more\n            </p>\n          </div>\n        </div>\n      </main>\n\n      {/* Feature highlights */}\n      <section\n        id=\"features\"\n        className=\"relative z-10 px-6 sm:px-8 pb-16 max-w-5xl mx-auto w-full\"\n      >\n        <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n          <div className=\"group relative p-6 rounded-2xl bg-[var(--color-surface)] border border-[var(--color-border)] hover:border-[var(--color-primary-200)] transition-all hover:shadow-lg hover:-translate-y-0.5\">\n            <div className=\"size-10 rounded-xl bg-[var(--color-primary-100)] text-[var(--color-primary)] flex items-center justify-center mb-4\">\n              <CubeTransparentIcon className=\"size-5\" />\n            </div>\n            <div className=\"text-3xl font-bold text-[var(--color-text-primary)] tracking-tight\">\n              50+\n            </div>\n            <div className=\"text-sm text-[var(--color-text-secondary)] mt-1\">\n              Composable components\n            </div>\n          </div>\n\n          <div className=\"group relative p-6 rounded-2xl bg-[var(--color-surface)] border border-[var(--color-border)] hover:border-[var(--color-success-200)] transition-all hover:shadow-lg hover:-translate-y-0.5\">\n            <div className=\"size-10 rounded-xl bg-[var(--color-success-100)] text-[var(--color-success)] flex items-center justify-center mb-4\">\n              <ShieldCheckIcon className=\"size-5\" />\n            </div>\n            <div className=\"text-3xl font-bold text-[var(--color-text-primary)] tracking-tight\">\n              WCAG 2.1\n            </div>\n            <div className=\"text-sm text-[var(--color-text-secondary)] mt-1\">\n              Accessibility built-in\n            </div>\n          </div>\n\n          <div className=\"group relative p-6 rounded-2xl bg-[var(--color-surface)] border border-[var(--color-border)] hover:border-[var(--color-warning-200)] transition-all hover:shadow-lg hover:-translate-y-0.5\">\n            <div className=\"size-10 rounded-xl bg-[var(--color-warning-100)] text-[var(--color-warning)] flex items-center justify-center mb-4\">\n              <BoltIcon className=\"size-5\" />\n            </div>\n            <div className=\"text-3xl font-bold text-[var(--color-text-primary)] tracking-tight\">\n              &lt;5kb\n            </div>\n            <div className=\"text-sm text-[var(--color-text-secondary)] mt-1\">\n              Tree-shakeable per import\n            </div>\n          </div>\n        </div>\n      </section>\n\n      {/* Footer */}\n      <footer className=\"relative z-10 border-t border-[var(--color-border)] bg-[var(--color-surface)]/50 backdrop-blur-sm\">\n        <div className=\"max-w-7xl mx-auto px-6 sm:px-8 py-6 flex flex-col sm:flex-row items-center justify-between gap-3\">\n          <p className=\"text-xs text-[var(--color-text-muted)] flex items-center gap-1.5\">\n            <CheckBadgeIcon className=\"size-3.5 text-[var(--color-success)]\" />\n            No spam. Unsubscribe anytime.\n          </p>\n          <p className=\"text-xs text-[var(--color-text-muted)]\">\n            © 2026 Flikkui. Built with care for developers.\n          </p>\n        </div>\n      </footer>\n    </div>\n  ),\n  parameters: {\n    controls: { disable: true },\n  },\n};"
+      "source": "import { useState } from \"react\";\nimport {\n  NodeCanvas, BaseNode, Handle, Background, NodeControls, MiniMap, CanvasToolbar,\n  applyNodeChanges, applyEdgeChanges,\n} from \"@flikk/ui/canvas\";\n\n// The engine is type-agnostic — your app owns the type→color/icon map.\nconst WIRE = { text: \"#cbd5e1\", image: \"#7dd3fc\", video: \"#c4b5fd\", audio: \"#f9a8d4\" };\nconst portType = (handleId) => handleId?.split(\"-\")[0];\n\nfunction ImageNode({ data, selected }) {\n  return (\n    <BaseNode selected={selected} className=\"w-90 p-0\">\n      {/* header strip, inset media, caption … */}\n      <Handle type=\"target\" id=\"text-in\" position=\"left\"\n              className=\"size-5 rounded-full bg-slate-200 text-slate-600\">T</Handle>\n      <Handle type=\"source\" id=\"image-out\" position=\"right\"\n              className=\"size-5 rounded-full bg-sky-200 text-sky-700\">\n        <PhotoIcon className=\"size-3\" />\n      </Handle>\n    </BaseNode>\n  );\n}\n\nfunction Editor() {\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n\n  function runFlow() {\n    // 🧠 YOUR LOGIC GOES HERE — walk nodes + edges in dependency order, call\n    // your image/video/speech models, write results back into node data.\n  }\n\n  return (\n    <NodeCanvas\n      nodeTypes={{ text: PromptNode, image: ImageNode /* … */ }}\n      nodes={nodes} edges={edges}\n      onNodesChange={(c) => setNodes((ns) => applyNodeChanges(c, ns))}\n      onEdgesChange={(c) => setEdges((es) => applyEdgeChanges(c, es))}\n      // Required in controlled mode — without it, drag-to-connect drops the new edge.\n      // Stamp edge.color from the source port's type for pastel typed wires.\n      onConnect={(conn) => setEdges((es) => [...es,\n        { id: \\"
     }
   ],
   "cssVariables": {
@@ -9989,7 +10161,19 @@
       "--ui-scrollbar-thumb-rest",
       "--ui-scrollbar-thumb-active",
       "--ui-scrollbar-track-rest",
-      "--ui-scrollbar-track-active"
+      "--ui-scrollbar-track-active",
+      "--elevation-real-sm",
+      "--elevation-real-md",
+      "--elevation-real-lg",
+      "--elevation-real-xl",
+      "--elevation-real-2xl",
+      "--elevation-real-3xl",
+      "--elevation-inner-real-sm",
+      "--elevation-inner-real-md",
+      "--elevation-inner-real-lg",
+      "--elevation-inner-real-xl",
+      "--elevation-inner-real-2xl",
+      "--elevation-inner-real-3xl"
     ]
   },
   "peerDependencies": {