banhaten 0.4.0 → 0.5.0

package/registry/index.json

@@ -18,6 +18,22 @@
         "source": "hooks/use-direction.ts",
         "target": "{{hooks}}/use-direction.ts"
       },
+      {
+        "source": "hooks/use-controllable-state.ts",
+        "target": "{{hooks}}/use-controllable-state.ts"
+      },
+      {
+        "source": "hooks/use-listbox-navigation.ts",
+        "target": "{{hooks}}/use-listbox-navigation.ts"
+      },
+      {
+        "source": "hooks/use-motion-end.ts",
+        "target": "{{hooks}}/use-motion-end.ts"
+      },
+      {
+        "source": "hooks/use-reduced-motion.ts",
+        "target": "{{hooks}}/use-reduced-motion.ts"
+      },
       {
         "source": "guidance/USAGE.md",
         "target": ".banhaten/USAGE.md"
@@ -111,8 +127,8 @@
         "--bh-text-body-xs-medium-line-height",
         "--bh-text-body-xs-regular-font-size",
         "--bh-text-body-xs-regular-line-height",
-        "--shadow-accordion-item",
-        "--shadow-button-focus"
+        "--elevation-accordion-item",
+        "--elevation-button-focus"
       ]
     },
     "aspect-ratio": {
@@ -326,7 +342,7 @@
         "--bh-space-xl-12",
         "--bh-space-xxs-2",
         "--bh-text-body-sm-medium-font-size",
-        "--shadow-avatar-badge"
+        "--elevation-avatar-badge"
       ]
     },
     "badge": {
@@ -608,7 +624,7 @@
         "--bh-text-body-xs-medium-letter-spacing",
         "--bh-text-body-xs-medium-line-height",
         "--bh-z-raised",
-        "--shadow-button-focus"
+        "--elevation-button-focus"
       ]
     },
     "attribute": {
@@ -727,6 +743,11 @@
         }
       ],
       "props": {
+        "variant": {
+          "type": "\"default\" | \"secondary\" | \"soft\" | \"outline\" | \"ghost\" | \"ghost-primary\" | \"danger\" | \"soft-danger\" | \"white\" | \"success\" | \"warning\" | \"link\" | \"destructive\" | \"soft-destructive\"",
+          "default": "default",
+          "description": "Twelve canonical semantic treatments. The deprecated destructive and soft-destructive compatibility aliases remain accepted and map to danger and soft-danger, respectively."
+        },
         "density": {
           "type": "\"compact\" | \"default\" | \"comfortable\"",
           "default": "comfortable",
@@ -752,7 +773,10 @@
         "ghost-primary",
         "danger",
         "soft-danger",
-        "white"
+        "white",
+        "success",
+        "warning",
+        "link"
       ],
       "sizes": [
         "xs",
@@ -870,12 +894,12 @@
         "--bh-text-button-font-weight",
         "--bh-text-button-letter-spacing",
         "--bh-text-button-line-height",
-        "--shadow-button-danger-focus",
-        "--shadow-button-focus",
-        "--shadow-button-raised",
-        "--shadow-button-secondary",
-        "--shadow-button-secondary-focus",
-        "--shadow-button-soft"
+        "--elevation-button-danger-focus",
+        "--elevation-button-focus",
+        "--elevation-button-raised",
+        "--elevation-button-secondary",
+        "--elevation-button-secondary-focus",
+        "--elevation-button-soft"
       ]
     },
     "card": {
@@ -992,15 +1016,20 @@
         "--bh-text-heading-sm-semibold-font-weight",
         "--bh-text-heading-sm-semibold-letter-spacing",
         "--bh-text-heading-sm-semibold-line-height",
-        "--shadow-button-focus"
+        "--elevation-button-focus"
       ]
     },
     "chart": {
-      "description": "Recharts wrapper with Banhaten chart color tokens, responsive container, tooltip content, legend content, and config-driven color variables.",
+      "description": "Eight token-driven ECharts families and 18 ready-made chart blocks, with responsive SVG rendering, theme-aware typography, tooltips, legends, brushes, and compatible Recharts wrappers.",
       "dependencies": {
-        "recharts": "^3.9.2"
+        "recharts": "^3.9.2",
+        "echarts": "^6.1.0",
+        "lucide-react": "^1.17.0"
       },
       "parts": [
+        "DataChart",
+        "ChartBlock",
+        "EChart",
         "ChartContainer",
         "ChartTooltip",
         "ChartTooltipContent",
@@ -1017,12 +1046,40 @@
             "ChartTooltip",
             "ChartTooltipContent"
           ]
+        },
+        {
+          "source": "components/echart.tsx",
+          "values": [
+            "EChart"
+          ]
+        },
+        {
+          "source": "components/chart-options.ts",
+          "values": [
+            "createChartOption"
+          ]
+        },
+        {
+          "source": "components/data-chart.tsx",
+          "values": [
+            "DataChart"
+          ]
+        },
+        {
+          "source": "components/chart-block.tsx",
+          "values": [
+            "ChartBlock",
+            "chartBlocks"
+          ]
         }
       ],
       "tokens": [
         "--bh-bg-neutral-subtle",
         "--bh-bg-raised",
+        "--bh-border-default",
+        "--bh-border-focus",
         "--bh-border-subtle",
+        "--bh-border-width-default",
         "--bh-chart-categorical-aqua",
         "--bh-chart-categorical-brand",
         "--bh-chart-categorical-danger",
@@ -1031,44 +1088,209 @@
         "--bh-chart-categorical-purple",
         "--bh-chart-categorical-success",
         "--bh-chart-categorical-warning",
+        "--bh-chart-neutral-default",
+        "--bh-content-brand-default",
         "--bh-content-default",
         "--bh-content-muted",
         "--bh-content-subtle",
+        "--bh-duration-default",
+        "--bh-focus-ring-width",
+        "--bh-font-family",
+        "--bh-font-family-mono",
+        "--bh-icon-stroke-200",
+        "--bh-interactive-ghost-hover",
+        "--bh-opacity-15",
+        "--bh-opacity-30",
+        "--bh-opacity-90",
+        "--bh-opacity-muted",
+        "--bh-radius-3xl-16",
         "--bh-radius-full",
         "--bh-radius-lg-8",
+        "--bh-radius-md-6",
+        "--bh-radius-sm-4",
+        "--bh-radius-xl-10",
+        "--bh-radius-xs-2",
+        "--bh-space-11xl-96",
+        "--bh-space-12xl-128",
+        "--bh-space-15xl-224",
         "--bh-space-17xl-288",
         "--bh-space-19xl-384",
         "--bh-space-3xl-16",
+        "--bh-space-4xl-20",
+        "--bh-space-5xl-24",
+        "--bh-space-6xl-32",
+        "--bh-space-7xl-40",
+        "--bh-space-9xl-64",
+        "--bh-space-lg-10",
         "--bh-space-md-8",
         "--bh-space-sm-6",
         "--bh-space-xl-12",
         "--bh-space-xs-4",
+        "--bh-space-xxs-2",
+        "--bh-space-xxxs-1",
+        "--bh-text-body-2xs-regular-font-size",
+        "--bh-text-body-2xs-regular-line-height",
+        "--bh-text-body-3xs-regular-font-size",
+        "--bh-text-body-3xs-regular-line-height",
+        "--bh-text-body-sm-medium-font-size",
+        "--bh-text-body-sm-medium-line-height",
+        "--bh-text-body-sm-regular-font-size",
+        "--bh-text-body-sm-regular-font-weight",
+        "--bh-text-body-sm-regular-line-height",
         "--bh-text-body-xs-medium-font-size",
         "--bh-text-body-xs-medium-font-weight",
         "--bh-text-body-xs-regular-font-size",
         "--bh-text-body-xs-regular-font-weight",
         "--bh-text-body-xs-regular-letter-spacing",
         "--bh-text-body-xs-regular-line-height",
-        "--shadow-popover"
+        "--bh-text-heading-lg-semibold-font-size",
+        "--bh-text-heading-lg-semibold-font-weight",
+        "--bh-text-heading-lg-semibold-letter-spacing",
+        "--bh-text-heading-lg-semibold-line-height",
+        "--bh-text-heading-md-semibold-font-size",
+        "--bh-text-heading-md-semibold-font-weight",
+        "--bh-text-heading-md-semibold-letter-spacing",
+        "--bh-text-heading-md-semibold-line-height",
+        "--bh-text-heading-xs-semibold-font-size",
+        "--bh-text-heading-xs-semibold-font-weight",
+        "--bh-text-heading-xs-semibold-letter-spacing",
+        "--bh-text-heading-xs-semibold-line-height",
+        "--elevation-popover"
       ],
       "features": [
-        "responsive container",
-        "tooltip content",
-        "legend content",
-        "config colors"
+        "eight chart families",
+        "18 ready-made blocks",
+        "live theme and font tokens",
+        "responsive SVG",
+        "tooltips and legends",
+        "range brush",
+        "pattern fills",
+        "reduced motion",
+        "RTL",
+        "Recharts compatibility"
       ],
       "rtl": {
         "inheritsDirection": true,
-        "layout": "Chart labels and legends should use logical layout; chart geometry is controlled by Recharts."
+        "layout": "Labels and block layouts inherit direction. DataChart mirrors Cartesian category axes and value-axis placement. Flow diagrams preserve data-defined direction. Legacy ChartContainer geometry is controlled by Recharts."
       },
       "files": [
         {
           "source": "components/chart.tsx",
           "target": "{{ui}}/chart.tsx"
+        },
+        {
+          "source": "guidance/charts.LICENSE.txt",
+          "target": "{{ui}}/charts.LICENSE.txt"
+        },
+        {
+          "source": "components/chart-block-data.ts",
+          "target": "{{ui}}/chart-block-data.ts",
+          "internal": true
+        },
+        {
+          "source": "components/chart-block.css",
+          "target": "{{ui}}/chart-block.css"
+        },
+        {
+          "source": "components/chart-block.tsx",
+          "target": "{{ui}}/chart-block.tsx"
+        },
+        {
+          "source": "components/chart-interactions.ts",
+          "target": "{{ui}}/chart-interactions.ts",
+          "internal": true
+        },
+        {
+          "source": "components/chart-options.cartesian.ts",
+          "target": "{{ui}}/chart-options.cartesian.ts",
+          "internal": true
+        },
+        {
+          "source": "components/chart-options.paint.ts",
+          "target": "{{ui}}/chart-options.paint.ts",
+          "internal": true
+        },
+        {
+          "source": "components/chart-options.parts.ts",
+          "target": "{{ui}}/chart-options.parts.ts",
+          "internal": true
+        },
+        {
+          "source": "components/chart-options.radial.ts",
+          "target": "{{ui}}/chart-options.radial.ts",
+          "internal": true
+        },
+        {
+          "source": "components/chart-options.ts",
+          "target": "{{ui}}/chart-options.ts"
+        },
+        {
+          "source": "components/chart-options.types.ts",
+          "target": "{{ui}}/chart-options.types.ts",
+          "internal": true
+        },
+        {
+          "source": "components/data-chart.tsx",
+          "target": "{{ui}}/data-chart.tsx"
+        },
+        {
+          "source": "components/echart-theme.ts",
+          "target": "{{ui}}/echart-theme.ts",
+          "internal": true
+        },
+        {
+          "source": "components/echart.css",
+          "target": "{{ui}}/echart.css"
+        },
+        {
+          "source": "components/echart.tsx",
+          "target": "{{ui}}/echart.tsx"
         }
       ],
       "examples": [
-        "examples/chart-demo.tsx"
+        "examples/chart-demo.tsx",
+        "examples/chart-block-demo.tsx"
+      ],
+      "props": {
+        "spec": {
+          "type": "ChartSpec",
+          "default": null,
+          "description": "DataChart: family, data, series, variant, stacking, labels, brush, and interaction options. Series colors are Banhaten palette indices."
+        },
+        "label": {
+          "type": "string",
+          "default": null,
+          "description": "DataChart / EChart: required accessible chart name."
+        },
+        "description": {
+          "type": "string",
+          "default": null,
+          "description": "DataChart / EChart: optional accessible text summary."
+        },
+        "block": {
+          "type": "ChartBlockId",
+          "default": null,
+          "description": "ChartBlock: one of 18 documented blocks, with illustrative data and period controls where applicable."
+        },
+        "option": {
+          "type": "(theme: EChartTheme) => EChartsOption",
+          "default": null,
+          "description": "EChart: advanced option factory receives resolved inherited Banhaten tokens."
+        },
+        "onReady": {
+          "type": "(chart, theme) => void | (() => void)",
+          "default": null,
+          "description": "EChart: attach custom interactions and return their cleanup."
+        },
+        "config": {
+          "type": "ChartConfig",
+          "default": null,
+          "description": "Legacy ChartContainer: maps series names to CSS color variables."
+        }
+      },
+      "registryDependencies": [
+        "button",
+        "progress"
       ]
     },
     "carousel": {
@@ -1269,9 +1491,9 @@
         "--bh-text-button-letter-spacing",
         "--bh-text-button-line-height",
         "--bh-z-raised",
-        "--shadow-button-group",
-        "--shadow-button-group-focus",
-        "--shadow-component-default"
+        "--elevation-button-group",
+        "--elevation-button-group-focus",
+        "--elevation-component-default"
       ]
     },
     "segmented-control": {
@@ -1445,8 +1667,8 @@
         "--bh-toggle-icon-size-md",
         "--bh-toggle-icon-size-sm",
         "--bh-toggle-offset",
-        "--shadow-md",
-        "--shadow-social-button-focus-ring"
+        "--elevation-03",
+        "--elevation-social-button-focus-ring"
       ]
     },
     "menu": {
@@ -1519,6 +1741,13 @@
           ]
         }
       ],
+      "props": {
+        "onSelect": {
+          "type": "(event: Event) => void",
+          "default": null,
+          "description": "MenuItem selection handler. Uses Radix's native selection Event, not React's DOM text-selection event; call event.preventDefault() to keep toggle or multi-select menus open."
+        }
+      },
       "widths": [
         "menu",
         "default",
@@ -1644,7 +1873,7 @@
         "--bh-text-body-xs-regular-font-weight",
         "--bh-text-body-xs-regular-letter-spacing",
         "--bh-text-body-xs-regular-line-height",
-        "--shadow-menu"
+        "--elevation-menu"
       ]
     },
     "menubar": {
@@ -1742,8 +1971,8 @@
         "--bh-text-body-xs-medium-letter-spacing",
         "--bh-text-body-xs-medium-line-height",
         "--bh-z-popover",
-        "--shadow-component-default",
-        "--shadow-menu"
+        "--elevation-component-default",
+        "--elevation-menu"
       ]
     },
     "command": {
@@ -1834,7 +2063,7 @@
         "--bh-text-body-xs-medium-font-weight",
         "--bh-text-body-xs-medium-letter-spacing",
         "--bh-text-body-xs-medium-line-height",
-        "--shadow-menu"
+        "--elevation-menu"
       ]
     },
     "context-menu": {
@@ -1927,7 +2156,7 @@
         "--bh-text-body-xs-medium-letter-spacing",
         "--bh-text-body-xs-medium-line-height",
         "--bh-z-popover",
-        "--shadow-menu"
+        "--elevation-menu"
       ]
     },
     "tooltip": {
@@ -1963,6 +2192,13 @@
           ]
         }
       ],
+      "props": {
+        "dir": {
+          "type": "\"ltr\" | \"rtl\" | \"auto\"",
+          "default": "ltr",
+          "description": "TooltipShortcut only: keeps key glyphs in physical order inside RTL tooltips. Override only for localized non-shortcut text."
+        }
+      },
       "variants": [
         "dark",
         "default"
@@ -1986,7 +2222,8 @@
         "inheritsDirection": true,
         "spacing": "Uses inherited direction with flex layout so label/shortcut and text/close order mirror naturally.",
         "pointerPlacement": "Top and bottom left/right positions map to logical start/end in RTL. Center-left and center-right remain physical sides to match the Figma matrix.",
-        "textDirection": "Labels and support text use dir=\"auto\" for Arabic and English copy."
+        "textDirection": "Labels and support text use dir=\"auto\" for Arabic and English copy.",
+        "shortcutDirection": "TooltipShortcut defaults to dir=\"ltr\" so physical key order remains stable inside RTL content."
       },
       "files": [
         {
@@ -2035,6 +2272,7 @@
         "--bh-tooltip-close-fg",
         "--bh-tooltip-close-icon-size",
         "--bh-tooltip-close-size",
+        "--bh-tooltip-elevation",
         "--bh-tooltip-fg",
         "--bh-tooltip-lg-padding",
         "--bh-tooltip-lg-radius",
@@ -2048,7 +2286,6 @@
         "--bh-tooltip-pointer-inline-offset",
         "--bh-tooltip-pointer-offset",
         "--bh-tooltip-pointer-width",
-        "--bh-tooltip-shadow",
         "--bh-tooltip-shortcut-bg",
         "--bh-tooltip-shortcut-border",
         "--bh-tooltip-shortcut-height",
@@ -2058,8 +2295,8 @@
         "--bh-tooltip-sm-radius",
         "--bh-z-overlay",
         "--bh-z-raised",
-        "--shadow-button-focus",
-        "--shadow-lg"
+        "--elevation-04",
+        "--elevation-button-focus"
       ]
     },
     "popover": {
@@ -2188,8 +2425,8 @@
         "--bh-text-body-xs-regular-letter-spacing",
         "--bh-text-body-xs-regular-line-height",
         "--bh-z-popover",
-        "--shadow-button-focus",
-        "--shadow-popover"
+        "--elevation-button-focus",
+        "--elevation-popover"
       ]
     },
     "hover-card": {
@@ -2241,7 +2478,7 @@
         "--bh-space-3xl-16",
         "--bh-space-md-8",
         "--bh-z-popover",
-        "--shadow-popover"
+        "--elevation-popover"
       ]
     },
     "modal": {
@@ -2376,9 +2613,9 @@
         "--bh-text-heading-sm-semibold-letter-spacing",
         "--bh-text-heading-sm-semibold-line-height",
         "--bh-z-overlay",
-        "--shadow-2xl",
-        "--shadow-button-focus",
-        "--shadow-modal"
+        "--elevation-06",
+        "--elevation-button-focus",
+        "--elevation-modal"
       ]
     },
     "alert-dialog": {
@@ -2497,8 +2734,8 @@
         "--bh-text-heading-sm-semibold-letter-spacing",
         "--bh-text-heading-sm-semibold-line-height",
         "--bh-z-overlay",
-        "--shadow-2xl",
-        "--shadow-modal"
+        "--elevation-06",
+        "--elevation-modal"
       ]
     },
     "checkbox": {
@@ -2577,9 +2814,9 @@
         "--bh-checkbox-root-size",
         "--bh-content-default",
         "--bh-content-disabled",
-        "--bh-content-on-color",
         "--bh-content-subtle",
         "--bh-icon-stroke-300",
+        "--bh-interactive-checkbox-content",
         "--bh-interactive-checkbox-default",
         "--bh-interactive-checkbox-hover",
         "--bh-opacity-60",
@@ -2591,15 +2828,15 @@
         "--bh-text-body-sm-regular-font-weight",
         "--bh-text-body-sm-regular-letter-spacing",
         "--bh-text-body-sm-regular-line-height",
-        "--shadow-checkbox-card",
-        "--shadow-checkbox-card-focus",
-        "--shadow-checkbox-control",
-        "--shadow-checkbox-focus",
-        "--shadow-component-default"
+        "--elevation-checkbox-card",
+        "--elevation-checkbox-card-focus",
+        "--elevation-checkbox-control",
+        "--elevation-checkbox-focus",
+        "--elevation-component-default"
       ]
     },
     "collapsible": {
-      "description": "Radix Collapsible wrapper for disclosure sections with tokenized trigger, icon rotation, and content slots.",
+      "description": "Radix Collapsible wrapper for disclosure sections with tokenized trigger, icon rotation, content slots, and an unstyled animated panel.",
       "dependencies": {
         "@radix-ui/react-collapsible": "^1.1.15",
         "lucide-react": "^1.17.0"
@@ -2607,7 +2844,8 @@
       "parts": [
         "Collapsible",
         "CollapsibleTrigger",
-        "CollapsibleContent"
+        "CollapsibleContent",
+        "CollapsiblePanel"
       ],
       "supportedExports": [
         {
@@ -2615,6 +2853,7 @@
           "values": [
             "Collapsible",
             "CollapsibleContent",
+            "CollapsiblePanel",
             "CollapsibleTrigger"
           ]
         }
@@ -2623,7 +2862,9 @@
         "controlled state",
         "uncontrolled state",
         "keyboard trigger",
-        "RTL"
+        "RTL",
+        "animated panel",
+        "custom trigger with asChild"
       ],
       "rtl": {
         "inheritsDirection": true,
@@ -2642,6 +2883,8 @@
       "tokens": [
         "--bh-content-default",
         "--bh-content-subtle",
+        "--bh-duration-moderate",
+        "--bh-easing-emphasized",
         "--bh-icon-stroke-200",
         "--bh-interactive-ghost-hover",
         "--bh-radius-lg-8",
@@ -2657,7 +2900,7 @@
         "--bh-text-body-sm-regular-font-weight",
         "--bh-text-body-sm-regular-letter-spacing",
         "--bh-text-body-sm-regular-line-height",
-        "--shadow-button-focus"
+        "--elevation-button-focus"
       ]
     },
     "radio-group": {
@@ -2760,8 +3003,8 @@
         "--bh-text-body-xs-regular-letter-spacing",
         "--bh-text-body-xs-regular-line-height",
         "--bh-z-raised",
-        "--shadow-button-focus",
-        "--shadow-radio-control"
+        "--elevation-button-focus",
+        "--elevation-radio-control"
       ]
     },
     "radio-card": {
@@ -2864,11 +3107,11 @@
         "--bh-text-body-sm-regular-font-weight",
         "--bh-text-body-sm-regular-letter-spacing",
         "--bh-text-body-sm-regular-line-height",
-        "--shadow-component-default",
-        "--shadow-radio-card",
-        "--shadow-radio-card-current",
-        "--shadow-radio-card-disabled",
-        "--shadow-radio-control"
+        "--elevation-component-default",
+        "--elevation-radio-card",
+        "--elevation-radio-card-current",
+        "--elevation-radio-card-disabled",
+        "--elevation-radio-control"
       ]
     },
     "divider": {
@@ -3012,13 +3255,13 @@
         "--bh-pagination-root-gap",
         "--bh-pagination-simple-width",
         "--bh-space-md-8",
-        "--shadow-pagination-active",
-        "--shadow-pagination-control",
-        "--shadow-pagination-focus"
+        "--elevation-pagination-active",
+        "--elevation-pagination-control",
+        "--elevation-pagination-focus"
       ]
     },
     "toolbar": {
-      "description": "Figma Filter Toolbar primitive with eight filter/action styles, search fields, select triggers, icon actions, chips, selected-count badges, desktop/mobile wrapping, and RTL-safe composition.",
+      "description": "Figma Filter Toolbar layout primitive with native Tab-order group semantics, eight filter/action styles, search fields, select triggers, icon actions, chips, selected-count badges, desktop/mobile wrapping, and RTL-safe composition.",
       "dependencies": {
         "@radix-ui/react-slot": "^1.2.3",
         "class-variance-authority": "^0.7.1",
@@ -3074,8 +3317,16 @@
           "type": "readonly string[]",
           "default": null,
           "description": "Adds shared, platform-aware Kbd keycaps to ToolbarSearch without rebuilding a shortcut badge locally."
+        },
+        "role": {
+          "type": "React.AriaRole",
+          "default": "group",
+          "description": "Uses layout-group semantics and native Tab order by default. Applications that override this to toolbar own the complete roving-focus and arrow-key contract."
         }
       },
+      "features": [
+        "native Tab-order layout grouping"
+      ],
       "densities": [
         "compact",
         "default",
@@ -3111,7 +3362,8 @@
       ],
       "avoidWhen": [
         "Using ToolbarSelect as a complete select menu without application behavior",
-        "Applying unrelated custom heights or padding to individual toolbar children"
+        "Applying unrelated custom heights or padding to individual toolbar children",
+        "Using role=\"toolbar\" without application-owned roving focus and arrow-key behavior"
       ],
       "recipes": [
         "Collection filter bar",
@@ -3215,13 +3467,13 @@
         "--bh-text-button-font-weight",
         "--bh-text-button-letter-spacing",
         "--bh-text-button-line-height",
-        "--shadow-button-danger-focus",
-        "--shadow-button-focus",
-        "--shadow-button-raised",
-        "--shadow-button-soft",
-        "--shadow-input",
-        "--shadow-input-focus-ring",
-        "--shadow-select-trigger"
+        "--elevation-button-danger-focus",
+        "--elevation-button-focus",
+        "--elevation-button-raised",
+        "--elevation-button-soft",
+        "--elevation-input",
+        "--elevation-input-focus-ring",
+        "--elevation-select-trigger"
       ]
     },
     "social-button": {
@@ -3350,13 +3602,13 @@
         "--bh-text-button-font-weight",
         "--bh-text-button-letter-spacing",
         "--bh-text-button-line-height",
-        "--shadow-component-default",
-        "--shadow-social-button",
-        "--shadow-social-button-focus"
+        "--elevation-component-default",
+        "--elevation-social-button",
+        "--elevation-social-button-focus"
       ]
     },
     "input": {
-      "description": "Tokenized input field with semantic control density, labels, helper and error text, explicit icons, shared keyboard shortcuts, add-ons, tags, default and soft styles, and RTL states.",
+      "description": "Tokenized input field with native quantity stepping, action-button contracts, semantic control density, labels, helper and error text, icons, shortcuts, add-ons, tags, default and soft styles, and RTL states.",
       "dependencies": {
         "class-variance-authority": "^0.7.1",
         "lucide-react": "^1.17.0"
@@ -3390,6 +3642,26 @@
         }
       ],
       "props": {
+        "buttonProps": {
+          "type": "InputActionButtonProps",
+          "default": null,
+          "description": "Native button props for leading/trailing button and dropdown kinds, including onClick, keyboard handlers, ref, disabled, and ARIA attributes. Defaults to type=button; consumers supply the action or popup."
+        },
+        "decreaseButtonProps": {
+          "type": "InputStepperButtonProps",
+          "default": null,
+          "description": "Native props for the decrease button, excluding children and type. Supports localized aria-label, ref, and onClick; preventDefault cancels the step. Field disabled and readOnly always disable the stepper."
+        },
+        "increaseButtonProps": {
+          "type": "InputStepperButtonProps",
+          "default": null,
+          "description": "Native props for the increase button, excluding children and type. Supports localized aria-label, ref, and onClick; preventDefault cancels the step. Field disabled and readOnly always disable the stepper."
+        },
+        "onChange": {
+          "type": "React.ChangeEventHandler<HTMLInputElement>",
+          "default": null,
+          "description": "Receives native input changes from typing and quantity buttons. Quantity kinds use type=number, respect min/max/step, and support controlled value or uncontrolled defaultValue. step=any uses one-unit button increments."
+        },
         "density": {
           "type": "\"compact\" | \"default\" | \"comfortable\"",
           "default": "default",
@@ -3412,6 +3684,11 @@
           "description": "Deprecated compatibility alias for showInfo.",
           "deprecated": true
         },
+        "isRequired": {
+          "type": "boolean",
+          "default": false,
+          "description": "Shows the required marker and exposes aria-required on the input without enabling native browser validation. Use the native required prop when constraint validation is intended."
+        },
         "trailingIcon": {
           "type": "React.ReactNode | false",
           "default": null,
@@ -3510,7 +3787,8 @@
         }
       ],
       "examples": [
-        "examples/input-demo.tsx"
+        "examples/input-demo.tsx",
+        "examples/input-actions-demo.tsx"
       ],
       "tokens": [
         "--bh-border-danger-strong",
@@ -3573,14 +3851,14 @@
         "--bh-text-body-xs-regular-letter-spacing",
         "--bh-text-body-xs-regular-line-height",
         "--bh-z-raised",
-        "--shadow-component-default",
-        "--shadow-input",
-        "--shadow-input-disabled-overlay",
-        "--shadow-input-focus-overlay",
-        "--shadow-input-focus-ring",
-        "--shadow-input-focus-surface",
-        "--shadow-input-overlay",
-        "--shadow-input-surface"
+        "--elevation-component-default",
+        "--elevation-input",
+        "--elevation-input-disabled-overlay",
+        "--elevation-input-focus-overlay",
+        "--elevation-input-focus-ring",
+        "--elevation-input-focus-surface",
+        "--elevation-input-overlay",
+        "--elevation-input-surface"
       ]
     },
     "input-group": {
@@ -3665,9 +3943,9 @@
         "--bh-text-body-sm-medium-font-weight",
         "--bh-text-body-sm-medium-letter-spacing",
         "--bh-text-body-sm-medium-line-height",
-        "--shadow-component-default",
-        "--shadow-input",
-        "--shadow-input-focus-ring"
+        "--elevation-component-default",
+        "--elevation-input",
+        "--elevation-input-focus-ring"
       ]
     },
     "label": {
@@ -3751,6 +4029,11 @@
         }
       ],
       "props": {
+        "dir": {
+          "type": "\"ltr\" | \"rtl\" | \"auto\"",
+          "default": "ltr",
+          "description": "Keeps physical key and modifier order stable inside RTL interfaces. Override only for localized non-shortcut key names."
+        },
         "keys": {
           "type": "readonly string[]",
           "default": null,
@@ -3784,7 +4067,7 @@
       ],
       "rtl": {
         "inheritsDirection": false,
-        "semantics": "Kbd is direction-neutral and should be paired with surrounding text labels."
+        "semantics": "Kbd defaults to dir=\"ltr\" so physical key order stays stable, while surrounding shortcut descriptions keep their own text direction."
       },
       "files": [
         {
@@ -3820,7 +4103,7 @@
         "--bh-text-body-xs-medium-font-weight",
         "--bh-text-body-xs-medium-letter-spacing",
         "--bh-text-body-xs-medium-line-height",
-        "--shadow-button-soft"
+        "--elevation-button-soft"
       ]
     },
     "item": {
@@ -3923,7 +4206,7 @@
         "--bh-text-body-sm-regular-font-weight",
         "--bh-text-body-sm-regular-letter-spacing",
         "--bh-text-body-sm-regular-line-height",
-        "--shadow-button-focus"
+        "--elevation-button-focus"
       ]
     },
     "field": {
@@ -4160,6 +4443,16 @@
         }
       ],
       "props": {
+        "aria-label": {
+          "type": "string",
+          "default": null,
+          "description": "Provides a stable purpose-based accessible name for a label-less Select and is forwarded to its trigger."
+        },
+        "aria-labelledby": {
+          "type": "string",
+          "default": null,
+          "description": "Names a label-less Select trigger from external text without placing the relationship on the inert root."
+        },
         "density": {
           "type": "\"compact\" | \"default\" | \"comfortable\"",
           "default": "default",
@@ -4194,6 +4487,11 @@
           "type": "React.ReactNode | false",
           "default": "chevron-down",
           "description": "Uses the default expand chevron when omitted, accepts a replacement node, and hides the slot when false."
+        },
+        "triggerProps": {
+          "type": "React.ComponentProps<\"button\">",
+          "default": null,
+          "description": "Forwards advanced trigger attributes and is spread last, so matching attributes override the top-level trigger defaults."
         }
       },
       "defaults": {
@@ -4291,12 +4589,12 @@
         "--bh-content-default",
         "--bh-content-disabled",
         "--bh-content-muted",
-        "--bh-content-on-color",
         "--bh-content-subtle",
         "--bh-font-weight-semibold",
         "--bh-icon-size-default",
         "--bh-icon-stroke-200",
         "--bh-icon-stroke-220",
+        "--bh-interactive-checkbox-content",
         "--bh-interactive-checkbox-default",
         "--bh-opacity-60",
         "--bh-radius-full",
@@ -4374,12 +4672,12 @@
         "--bh-text-body-xs-regular-letter-spacing",
         "--bh-text-body-xs-regular-line-height",
         "--bh-z-popover",
-        "--shadow-component-default",
-        "--shadow-select-checkbox",
-        "--shadow-select-danger-focus-ring",
-        "--shadow-select-focus-ring",
-        "--shadow-select-menu",
-        "--shadow-select-trigger"
+        "--elevation-component-default",
+        "--elevation-select-checkbox",
+        "--elevation-select-danger-focus-ring",
+        "--elevation-select-focus-ring",
+        "--elevation-select-menu",
+        "--elevation-select-trigger"
       ]
     },
     "native-select": {
@@ -4473,10 +4771,10 @@
         "--bh-text-body-xs-regular-font-weight",
         "--bh-text-body-xs-regular-letter-spacing",
         "--bh-text-body-xs-regular-line-height",
-        "--shadow-component-default",
-        "--shadow-select-danger-focus-ring",
-        "--shadow-select-focus-ring",
-        "--shadow-select-trigger"
+        "--elevation-component-default",
+        "--elevation-select-danger-focus-ring",
+        "--elevation-select-focus-ring",
+        "--elevation-select-trigger"
       ]
     },
     "sheet": {
@@ -4587,12 +4885,12 @@
         "--bh-text-heading-sm-semibold-letter-spacing",
         "--bh-text-heading-sm-semibold-line-height",
         "--bh-z-overlay",
-        "--shadow-button-focus",
-        "--shadow-component-default"
+        "--elevation-button-focus",
+        "--elevation-component-default"
       ]
     },
     "sidebar": {
-      "description": "Figma-aligned application sidebar with 280px expanded and 48px collapsed shells, brand and workspace headers, search and actions, default/avatar/nested/tree menu variants, badges, group actions, user footers, controlled state, tooltips, logical placement, and RTL mirroring.",
+      "description": "Figma-aligned application sidebar with a tokenized 900px minimum height, staged motion between 280px expanded and 48px collapsed shells, brand and workspace headers, search and actions, default/avatar/nested/tree menu variants, badges, group actions, user footers with hover identity previews, controlled state, tooltips, logical placement, and RTL mirroring.",
       "dependencies": {
         "@radix-ui/react-slot": "^1.2.3",
         "lucide-react": "^1.17.0"
@@ -4668,6 +4966,11 @@
           "default": false,
           "description": "Sets the initial rail state when SidebarProvider owns collapse state internally."
         },
+        "showIdentityPreview": {
+          "type": "boolean",
+          "default": true,
+          "description": "Reveals the collapsed footer user's name and supporting text beside the rail on hover or keyboard focus."
+        },
         "side": {
           "type": "\"start\" | \"end\"",
           "default": "start",
@@ -4747,11 +5050,15 @@
         "uncontrolled collapse",
         "brand header with search and collapse actions",
         "workspace action and card headers",
+        "visible collapsed-header expand action",
         "default, avatar, Level 2, and Level 2 line menu rows",
         "supporting text, count badge, and trailing action slots",
         "group labels with disclosure and icon actions",
         "four-level tree navigation",
         "supporting-text and bordered user footers",
+        "collapsed footer identity preview on hover and keyboard focus",
+        "tokenized staged expand and collapse motion",
+        "reduced-motion fallback",
         "icon-only rail with tooltips",
         "logical side placement and RTL mirroring"
       ],
@@ -4760,6 +5067,7 @@
         "--bh-bg-default",
         "--bh-bg-default-hover",
         "--bh-bg-neutral-subtle",
+        "--bh-bg-raised",
         "--bh-border-focus",
         "--bh-border-subtle",
         "--bh-border-width-default",
@@ -4779,6 +5087,7 @@
         "--bh-radius-full",
         "--bh-radius-lg-8",
         "--bh-radius-md-6",
+        "--bh-radius-xl-10",
         "--bh-sidebar-active-guide-height",
         "--bh-sidebar-bg",
         "--bh-sidebar-bg-collapsed",
@@ -4797,16 +5106,24 @@
         "--bh-sidebar-item-height-collapsed",
         "--bh-sidebar-item-padding-x",
         "--bh-sidebar-level-2-indent-width",
+        "--bh-sidebar-min-height",
+        "--bh-sidebar-motion-delay-content",
+        "--bh-sidebar-motion-duration",
+        "--bh-sidebar-motion-duration-content",
+        "--bh-sidebar-motion-easing",
         "--bh-sidebar-padding",
         "--bh-sidebar-rail-width",
         "--bh-sidebar-tree-indent-step",
         "--bh-sidebar-tree-item-height",
+        "--bh-sidebar-user-preview-gap",
+        "--bh-sidebar-user-preview-height",
+        "--bh-sidebar-user-preview-width",
         "--bh-sidebar-width",
         "--bh-sidebar-width-collapsed",
         "--bh-sidebar-workspace-card-height",
         "--bh-sidebar-workspace-trigger-max-width",
         "--bh-sidebar-workspace-trigger-width",
-        "--bh-space-19xl-384",
+        "--bh-space-10xl-80",
         "--bh-space-3xl-16",
         "--bh-space-4xl-20",
         "--bh-space-5xl-24",
@@ -4844,7 +5161,9 @@
         "--bh-text-body-xs-regular-letter-spacing",
         "--bh-text-body-xs-regular-line-height",
         "--bh-text-body-xs-semibold-font-weight",
-        "--shadow-button-focus"
+        "--bh-z-overlay",
+        "--elevation-button-focus",
+        "--elevation-component-default"
       ],
       "rtl": {
         "inheritsDirection": true,
@@ -4939,7 +5258,7 @@
         "--bh-text-body-sm-regular-line-height",
         "--bh-z-popover",
         "--bh-z-raised",
-        "--shadow-popover"
+        "--elevation-popover"
       ]
     },
     "scroll-area": {
@@ -4986,7 +5305,7 @@
         "--bh-radius-full",
         "--bh-space-lg-10",
         "--bh-space-xxs-2",
-        "--shadow-component-focus-ring"
+        "--elevation-component-focus-ring"
       ]
     },
     "resizable": {
@@ -5039,8 +5358,8 @@
         "--bh-space-5xl-24",
         "--bh-space-6xl-32",
         "--bh-z-raised",
-        "--shadow-button-focus",
-        "--shadow-component-focus-ring"
+        "--elevation-button-focus",
+        "--elevation-component-focus-ring"
       ]
     },
     "autocomplete": {
@@ -5292,10 +5611,10 @@
         "--bh-date-title-chevron-size",
         "--bh-date-title-height",
         "--bh-date-trigger-border",
+        "--bh-date-trigger-elevation",
         "--bh-date-trigger-height",
         "--bh-date-trigger-icon-size",
         "--bh-date-trigger-icon-slot-size",
-        "--bh-date-trigger-shadow",
         "--bh-date-trigger-width",
         "--bh-icon-stroke-180",
         "--bh-interactive-ghost-hover",
@@ -5334,12 +5653,12 @@
         "--bh-text-body-md-regular-letter-spacing",
         "--bh-text-body-md-regular-line-height",
         "--bh-z-raised",
-        "--shadow-button-focus",
-        "--shadow-component-default",
-        "--shadow-date-month-year-list",
-        "--shadow-date-surface",
-        "--shadow-date-time-input",
-        "--shadow-input-focus-ring"
+        "--elevation-button-focus",
+        "--elevation-component-default",
+        "--elevation-date-month-year-list",
+        "--elevation-date-surface",
+        "--elevation-date-time-input",
+        "--elevation-input-focus-ring"
       ]
     },
     "slider": {
@@ -5501,9 +5820,9 @@
         "--bh-z-overlay",
         "--bh-z-popover",
         "--bh-z-raised",
-        "--shadow-slider-thumb",
-        "--shadow-slider-thumb-focus",
-        "--shadow-slider-tooltip"
+        "--elevation-slider-thumb",
+        "--elevation-slider-thumb-focus",
+        "--elevation-slider-tooltip"
       ]
     },
     "progress": {
@@ -5690,7 +6009,7 @@
         "--bh-z-overlay",
         "--bh-z-popover",
         "--bh-z-raised",
-        "--shadow-progress-slider-thumb-focus"
+        "--elevation-progress-slider-thumb-focus"
       ]
     },
     "textarea": {
@@ -5793,8 +6112,8 @@
         "--bh-textarea-tag-avatar-size",
         "--bh-textarea-tag-height",
         "--bh-textarea-width",
-        "--shadow-component-default",
-        "--shadow-textarea"
+        "--elevation-component-default",
+        "--elevation-textarea"
       ]
     },
     "skeleton": {
@@ -5925,7 +6244,7 @@
         "--bh-space-xl-12",
         "--bh-space-xs-4",
         "--bh-text-body-md-regular-line-height",
-        "--shadow-component-default"
+        "--elevation-component-default"
       ]
     },
     "spinner": {
@@ -6063,7 +6382,7 @@
         "--bh-text-body-xs-regular-line-height",
         "--bh-toast-accent",
         "--bh-toast-accent-bg",
-        "--shadow-component-default"
+        "--elevation-component-default"
       ]
     },
     "activity-feed": {
@@ -6157,8 +6476,8 @@
         "--bh-text-body-sm-regular-font-size",
         "--bh-text-body-sm-regular-line-height",
         "--bh-text-body-xs-regular-font-size",
-        "--shadow-button-raised",
-        "--shadow-component-default"
+        "--elevation-button-raised",
+        "--elevation-component-default"
       ]
     },
     "activity-heatmap": {
@@ -6228,7 +6547,7 @@
         "--bh-radius-sm-4",
         "--bh-space-3xl-16",
         "--bh-space-xs-4",
-        "--shadow-component-focus-ring"
+        "--elevation-component-focus-ring"
       ]
     },
     "alert": {
@@ -6427,7 +6746,7 @@
         "--bh-text-body-md-medium-font-weight",
         "--bh-text-body-md-medium-letter-spacing",
         "--bh-text-body-md-medium-line-height",
-        "--shadow-xl"
+        "--elevation-05"
       ]
     },
     "catalog-components": {
@@ -6543,7 +6862,7 @@
         "--bh-text-heading-xs-semibold-font-size",
         "--bh-text-heading-xs-semibold-font-weight",
         "--bh-text-heading-xs-semibold-line-height",
-        "--shadow-component-default"
+        "--elevation-component-default"
       ]
     },
     "breadcrumbs": {
@@ -6567,6 +6886,7 @@
       "rtl": {
         "inheritsDirection": true,
         "layout": "The ordered trail follows inherited inline direction, and chevron separators mirror through :dir(rtl).",
+        "textDirection": "Each label uses dir=\"auto\" so Arabic and Latin crumbs resolve independently and truncate at their content end without changing trail order.",
         "semantics": "The root is a named navigation landmark and the final or explicitly current item exposes aria-current=\"page\"."
       },
       "dependencies": {
@@ -6772,8 +7092,8 @@
         "--bh-text-body-xs-regular-font-size",
         "--bh-text-body-xs-regular-line-height",
         "--bh-underline-offset-default",
-        "--shadow-component-default",
-        "--shadow-sm"
+        "--elevation-02",
+        "--elevation-component-default"
       ]
     },
     "table": {
@@ -6795,9 +7115,15 @@
         "table",
         "data-table"
       ],
+      "features": [
+        "measured DataTable pagination captions",
+        "explicit DataTable pagination message catalogs",
+        "safe row-key cell fallback"
+      ],
       "rtl": {
         "inheritsDirection": true,
         "layout": "Headers, cells, search/filter tools, selection, pagination, and actions inherit direction and use logical alignment.",
+        "textDirection": "Each avatarText name and caption uses dir=\"auto\" to resolve its own content direction, so ellipsis preserves the identifying start without changing the mirrored avatar layout.",
         "semantics": "Sortable headers are owned Buttons, selection uses Checkbox, progress cells are named, and row actions expose accessible labels.",
         "narrowContainers": "The toolbar wraps and the table owns local horizontal scrolling instead of overlapping controls or overflowing the page."
       },
@@ -6953,7 +7279,7 @@
         "--bh-text-body-sm-regular-font-weight",
         "--bh-text-body-sm-regular-line-height",
         "--bh-text-body-xs-regular-font-size",
-        "--shadow-component-focus-ring"
+        "--elevation-component-focus-ring"
       ]
     },
     "empty-state": {
@@ -7104,11 +7430,11 @@
         "--bh-text-body-md-medium-font-weight",
         "--bh-text-body-md-medium-letter-spacing",
         "--bh-text-body-md-medium-line-height",
-        "--shadow-component-default"
+        "--elevation-component-default"
       ]
     },
     "page-header": {
-      "description": "Expanded page header composition with breadcrumbs, metadata, description copy, action groups, responsive layout, and optional local tabs.",
+      "description": "Expanded page header composition with breadcrumbs, metadata, description copy, action groups, responsive layout, and content-safe scrollable local tabs.",
       "status": "expanded",
       "states": [
         "default",
@@ -7123,10 +7449,17 @@
         "actions",
         "tabs"
       ],
+      "features": [
+        "Breadcrumb-owned icon-slot visibility",
+        "Button-owned default-density secondary action styling",
+        "content-safe horizontal tab overflow",
+        "full-width tab opt-out"
+      ],
       "rtl": {
         "inheritsDirection": true,
-        "layout": "Heading, metadata, owned Breadcrumbs, Button actions, and Tabs mirror through inherited direction and logical spacing.",
-        "semantics": "Every tab trigger owns a matching panel, and breadcrumb navigation receives a stable accessible label."
+        "layout": "Heading, metadata, owned Breadcrumbs, Button actions, and content-safe scrolling Tabs mirror through inherited direction and logical spacing.",
+        "textDirection": "Title and description use dir=\"auto\" so Arabic and Latin copy resolve independently and terminal punctuation stays at the content end.",
+        "semantics": "Every complete tab label remains available inside its trigger, every trigger owns a matching panel, and breadcrumb navigation receives a stable accessible label."
       },
       "dependencies": {
         "lucide-react": "^1.17.0"
@@ -7161,30 +7494,23 @@
         "examples/expanded/page-header-demo.tsx"
       ],
       "tokens": [
-        "--bh-bg-raised",
-        "--bh-border-default",
+        "--bh-button-label-padding-x",
         "--bh-content-brand-default",
         "--bh-content-default",
         "--bh-content-muted",
         "--bh-content-subtle",
-        "--bh-control-default",
         "--bh-focus-ring-width",
         "--bh-font-family",
         "--bh-icon-stroke-190",
-        "--bh-interactive-secondary-default",
-        "--bh-opacity-muted",
         "--bh-space-2xl-14",
         "--bh-space-3xl-16",
         "--bh-space-4xl-20",
         "--bh-space-5xl-24",
-        "--bh-space-6xl-32",
         "--bh-space-7xl-40",
         "--bh-space-lg-10",
         "--bh-space-md-8",
-        "--bh-space-xl-12",
         "--bh-space-xs-4",
         "--bh-space-xxs-2",
-        "--bh-space-xxxs-1",
         "--bh-text-body-2xs-regular-font-size",
         "--bh-text-body-2xs-regular-font-weight",
         "--bh-text-body-2xs-regular-line-height",
@@ -7197,8 +7523,7 @@
         "--bh-text-body-md-regular-line-height",
         "--bh-text-heading-md-semibold-font-size",
         "--bh-text-heading-md-semibold-font-weight",
-        "--bh-text-heading-md-semibold-line-height",
-        "--shadow-button-secondary"
+        "--bh-text-heading-md-semibold-line-height"
       ]
     },
     "slideout": {
@@ -7308,9 +7633,9 @@
         "--bh-text-heading-sm-medium-line-height",
         "--bh-text-heading-xs-medium-font-size",
         "--bh-text-heading-xs-medium-line-height",
-        "--shadow-button-raised",
-        "--shadow-button-soft",
-        "--shadow-component-default"
+        "--elevation-button-raised",
+        "--elevation-button-soft",
+        "--elevation-component-default"
       ]
     },
     "steps": {
@@ -7454,13 +7779,15 @@
         "controlled active index",
         "controlled value",
         "optional panels",
-        "full-width tabs"
+        "content-hug tabs",
+        "content-safe full-width tabs",
+        "horizontal overflow without label overlap"
       ],
       "rtl": {
         "inheritsDirection": true,
         "keyboard": "Radix receives dir so arrow-key navigation follows the document direction.",
         "textDirection": "Trigger labels use dir=\"auto\" by default for Arabic and English tab labels.",
-        "spacing": "Uses inherited direction and logical inline spacing so underline, segmented, and rounded treatments mirror naturally."
+        "spacing": "Uses inherited direction and logical inline spacing so underline, segmented, and rounded treatments mirror naturally, including horizontal overflow."
       },
       "files": [
         {
@@ -7503,7 +7830,7 @@
         "--bh-text-body-md-regular-font-weight",
         "--bh-text-body-md-regular-letter-spacing",
         "--bh-text-body-md-regular-line-height",
-        "--shadow-button-soft"
+        "--elevation-button-soft"
       ]
     },
     "timeline": {
@@ -7591,7 +7918,928 @@
         "--bh-timeline-grid-width",
         "--bh-timeline-narrow-width",
         "--bh-timeline-sidebar-width",
-        "--shadow-component-focus-ring"
+        "--elevation-component-focus-ring"
+      ]
+    },
+    "shimmer-text": {
+      "description": "Text with a soft brightness valley sweeping through it in reading direction, for labels of work in progress such as syncing, reading, or thinking.",
+      "dependencies": {},
+      "parts": [
+        "ShimmerText"
+      ],
+      "supportedExports": [
+        {
+          "source": "components/shimmer-text.tsx",
+          "values": [
+            "ShimmerText"
+          ]
+        }
+      ],
+      "props": {
+        "animated": {
+          "type": "boolean",
+          "default": "true",
+          "description": "Runs the brightness sweep; set false to keep the same colors without motion."
+        },
+        "tone": {
+          "type": "\"subtle\" | \"default\"",
+          "default": "subtle",
+          "description": "Secondary or primary text color pair for the sweep."
+        }
+      },
+      "tones": [
+        "subtle",
+        "default"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "motion": "The shine sweeps from the reading start to the reading end, so RTL text uses mirrored keyframes."
+      },
+      "files": [
+        {
+          "source": "components/shimmer-text.css",
+          "target": "{{ui}}/shimmer-text.css"
+        },
+        {
+          "source": "components/shimmer-text.tsx",
+          "target": "{{ui}}/shimmer-text.tsx"
+        }
+      ],
+      "examples": [
+        "examples/shimmer-text-demo.tsx"
+      ],
+      "tokens": [
+        "--bh-content-default",
+        "--bh-content-disabled",
+        "--bh-content-subtle",
+        "--bh-easing-standard",
+        "--bh-shimmer-text-duration"
+      ]
+    },
+    "thinking-state": {
+      "description": "Minimal shimmering status label that signals an agent is working before its first token arrives.",
+      "dependencies": {},
+      "registryDependencies": [
+        "shimmer-text"
+      ],
+      "parts": [
+        "ThinkingState"
+      ],
+      "supportedExports": [
+        {
+          "source": "components/thinking-state.tsx",
+          "values": [
+            "ThinkingState"
+          ]
+        }
+      ],
+      "props": {
+        "status": {
+          "type": "\"thinking\" | \"done\"",
+          "default": "thinking",
+          "description": "Thinking runs the brightness sweep; done leaves the label as static text."
+        },
+        "tone": {
+          "type": "\"subtle\" | \"default\"",
+          "default": "subtle",
+          "description": "Secondary or primary text color pair for the sweep."
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "default": "\"Thinking\"",
+          "description": "Localized label text."
+        }
+      },
+      "tones": [
+        "subtle",
+        "default"
+      ],
+      "states": [
+        "thinking",
+        "done"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "motion": "The shine sweeps from the reading start to the reading end, so RTL text uses mirrored keyframes."
+      },
+      "files": [
+        {
+          "source": "components/thinking-state.css",
+          "target": "{{ui}}/thinking-state.css"
+        },
+        {
+          "source": "components/thinking-state.tsx",
+          "target": "{{ui}}/thinking-state.tsx"
+        }
+      ],
+      "examples": [
+        "examples/thinking-state-demo.tsx"
+      ],
+      "tokens": [
+        "--bh-content-subtle",
+        "--bh-font-family",
+        "--bh-text-body-xs-medium-font-size",
+        "--bh-text-body-xs-medium-font-weight",
+        "--bh-text-body-xs-medium-letter-spacing",
+        "--bh-text-body-xs-medium-line-height"
+      ]
+    },
+    "thinking-reasoning": {
+      "description": "Animated, collapsible reasoning block: a shimmering label reveals sentences as they arrive, auto-scrolls behind soft fades, then folds into a Thought for Ns summary that unfolds on demand.",
+      "dependencies": {
+        "lucide-react": "^1.17.0"
+      },
+      "registryDependencies": [
+        "collapsible",
+        "shimmer-text"
+      ],
+      "parts": [
+        "ThinkingReasoning"
+      ],
+      "supportedExports": [
+        {
+          "source": "components/thinking-reasoning.tsx",
+          "values": [
+            "ThinkingReasoning"
+          ]
+        }
+      ],
+      "props": {
+        "steps": {
+          "type": "readonly string[]",
+          "default": null,
+          "description": "Reasoning sentences in arrival order; append to stream new ones."
+        },
+        "status": {
+          "type": "\"thinking\" | \"done\"",
+          "default": "thinking",
+          "description": "Thinking keeps the block open and auto-scrolling; done folds it into the summary."
+        },
+        "duration": {
+          "type": "number",
+          "default": "measured",
+          "description": "Seconds shown in the summary; measured from mount when omitted."
+        },
+        "open": {
+          "type": "boolean",
+          "default": "false",
+          "description": "Controls whether the finished reasoning is unfolded."
+        },
+        "reserveSpace": {
+          "type": "boolean",
+          "default": "false",
+          "description": "Keeps the block height stable while folding so content below does not jump."
+        },
+        "labels": {
+          "type": "Partial<ThinkingReasoningLabels>",
+          "default": "English",
+          "description": "Localized thinking, thought, and duration copy; the finished summary also names the toggle."
+        }
+      },
+      "states": [
+        "thinking",
+        "done",
+        "open",
+        "closed"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "layout": "Header, chevron, and sentences use logical alignment; the vertical auto-scroll and fades are direction-neutral."
+      },
+      "files": [
+        {
+          "source": "components/thinking-reasoning.css",
+          "target": "{{ui}}/thinking-reasoning.css"
+        },
+        {
+          "source": "components/thinking-reasoning.tsx",
+          "target": "{{ui}}/thinking-reasoning.tsx"
+        }
+      ],
+      "examples": [
+        "examples/thinking-reasoning-demo.tsx"
+      ],
+      "tokens": [
+        "--bh-content-muted",
+        "--bh-content-subtle",
+        "--bh-duration-fast",
+        "--bh-duration-moderate",
+        "--bh-duration-slow",
+        "--bh-duration-slower",
+        "--bh-easing-emphasized",
+        "--bh-easing-standard",
+        "--bh-font-family",
+        "--bh-icon-stroke-180",
+        "--bh-opacity-0",
+        "--bh-opacity-100",
+        "--bh-radius-sm-4",
+        "--bh-space-sm-6",
+        "--bh-space-xl-12",
+        "--bh-space-xs-4",
+        "--bh-text-body-xs-medium-font-size",
+        "--bh-text-body-xs-medium-font-weight",
+        "--bh-text-body-xs-medium-letter-spacing",
+        "--bh-text-body-xs-medium-line-height",
+        "--bh-text-body-xs-regular-font-size",
+        "--bh-text-body-xs-regular-font-weight",
+        "--bh-text-body-xs-regular-letter-spacing",
+        "--bh-text-body-xs-regular-line-height",
+        "--bh-thinking-reasoning-fade",
+        "--bh-thinking-reasoning-max-height",
+        "--bh-thinking-reasoning-width",
+        "--elevation-component-focus-ring"
+      ]
+    },
+    "streaming-text": {
+      "description": "Token-by-token text with a slim caret that stays solid while streaming and blinks once the response is complete, plus a useTypewriter hook that reveals a finished text locally.",
+      "dependencies": {},
+      "parts": [
+        "StreamingText"
+      ],
+      "supportedExports": [
+        {
+          "source": "components/streaming-text.tsx",
+          "values": [
+            "StreamingText",
+            "useTypewriter"
+          ]
+        }
+      ],
+      "props": {
+        "text": {
+          "type": "string",
+          "default": null,
+          "description": "The text that has arrived so far."
+        },
+        "streaming": {
+          "type": "boolean",
+          "default": "false",
+          "description": "True while more text is on its way; keeps the caret solid and sets aria-busy."
+        },
+        "caret": {
+          "type": "boolean",
+          "default": "true",
+          "description": "Shows the caret after the visible text."
+        },
+        "as": {
+          "type": "\"p\" | \"div\" | \"span\"",
+          "default": "p",
+          "description": "Rendered element; the ref is an HTMLElement for all three."
+        },
+        "speed": {
+          "type": "number",
+          "default": "220",
+          "description": "useTypewriter option: characters revealed per second."
+        }
+      },
+      "states": [
+        "streaming",
+        "complete"
+      ],
+      "features": [
+        "caller-driven streaming",
+        "local typewriter reveal",
+        "reduced motion",
+        "RTL"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "layout": "The caret follows the text through logical margins, so it trails Arabic text at its end edge."
+      },
+      "files": [
+        {
+          "source": "components/streaming-text.css",
+          "target": "{{ui}}/streaming-text.css"
+        },
+        {
+          "source": "components/streaming-text.tsx",
+          "target": "{{ui}}/streaming-text.tsx"
+        }
+      ],
+      "examples": [
+        "examples/streaming-text-demo.tsx"
+      ],
+      "tokens": [
+        "--bh-content-default",
+        "--bh-font-family",
+        "--bh-opacity-0",
+        "--bh-opacity-100",
+        "--bh-radius-full",
+        "--bh-space-xxs-2",
+        "--bh-streaming-text-caret-duration",
+        "--bh-streaming-text-caret-width",
+        "--bh-text-body-sm-regular-font-size",
+        "--bh-text-body-sm-regular-font-weight",
+        "--bh-text-body-sm-regular-letter-spacing",
+        "--bh-text-body-sm-regular-line-height"
+      ]
+    },
+    "inline-citations": {
+      "description": "Prose composed with superscript citation marks that link to numbered sources and reveal the reference name on hover, plus a compact source list with host and external-link affordance.",
+      "dependencies": {
+        "lucide-react": "^1.17.0"
+      },
+      "registryDependencies": [
+        "tooltip"
+      ],
+      "parts": [
+        "InlineCitations",
+        "CitationProse",
+        "CitationMark",
+        "CitationList",
+        "CitationItem"
+      ],
+      "supportedExports": [
+        {
+          "source": "components/inline-citations.tsx",
+          "values": [
+            "CitationItem",
+            "CitationList",
+            "CitationMark",
+            "CitationProse",
+            "InlineCitations"
+          ]
+        }
+      ],
+      "props": {
+        "children": {
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Cited prose: CitationProse paragraphs with CitationMark markers that find their source by number."
+        },
+        "sources": {
+          "type": "readonly CitationSource[]",
+          "default": null,
+          "description": "Cited sources with label, url, optional host, and optional marker number. Only http and https URLs become links."
+        },
+        "showSources": {
+          "type": "boolean",
+          "default": "true",
+          "description": "Renders the compact source list under the prose when there are sources."
+        },
+        "labels": {
+          "type": "Partial<InlineCitationsLabels>",
+          "default": "English",
+          "description": "Localized accessible names for markers and the source list."
+        }
+      },
+      "rtl": {
+        "inheritsDirection": true,
+        "layout": "Chips and list rows use logical margins and gaps; hosts stay LTR and the external arrow mirrors."
+      },
+      "files": [
+        {
+          "source": "components/inline-citations.css",
+          "target": "{{ui}}/inline-citations.css"
+        },
+        {
+          "source": "components/inline-citations.tsx",
+          "target": "{{ui}}/inline-citations.tsx"
+        }
+      ],
+      "examples": [
+        "examples/inline-citations-demo.tsx"
+      ],
+      "tokens": [
+        "--bh-border-subtle",
+        "--bh-border-width-default",
+        "--bh-citation-mark-size",
+        "--bh-content-default",
+        "--bh-content-subtle",
+        "--bh-duration-default",
+        "--bh-duration-fast",
+        "--bh-easing-standard",
+        "--bh-font-family",
+        "--bh-icon-stroke-180",
+        "--bh-interactive-soft-default",
+        "--bh-interactive-soft-hover",
+        "--bh-opacity-0",
+        "--bh-opacity-100",
+        "--bh-radius-sm-4",
+        "--bh-space-lg-10",
+        "--bh-space-sm-6",
+        "--bh-space-xl-12",
+        "--bh-space-xxs-2",
+        "--bh-space-xxxs-1",
+        "--bh-text-body-2xs-regular-font-size",
+        "--bh-text-body-2xs-regular-font-weight",
+        "--bh-text-body-2xs-regular-letter-spacing",
+        "--bh-text-body-2xs-regular-line-height",
+        "--bh-text-body-3xs-semibold-font-size",
+        "--bh-text-body-3xs-semibold-font-weight",
+        "--bh-text-body-3xs-semibold-letter-spacing",
+        "--bh-text-body-sm-regular-font-size",
+        "--bh-text-body-sm-regular-font-weight",
+        "--bh-text-body-sm-regular-letter-spacing",
+        "--bh-text-body-sm-regular-line-height",
+        "--elevation-component-focus-ring"
+      ]
+    },
+    "rolling-count": {
+      "description": "Tabular figures that roll each changed character into place like an odometer while assistive technology reads the plain value.",
+      "dependencies": {},
+      "parts": [
+        "RollingCount"
+      ],
+      "supportedExports": [
+        {
+          "source": "components/rolling-count.tsx",
+          "values": [
+            "RollingCount"
+          ]
+        }
+      ],
+      "props": {
+        "value": {
+          "type": "string",
+          "default": null,
+          "description": "Text to show; each changed character rolls up or down into place."
+        },
+        "aria-label": {
+          "type": "string",
+          "default": null,
+          "description": "What assistive technology reads instead of the value, for example 2 of 5 done."
+        },
+        "dir": {
+          "type": "\"ltr\" | \"rtl\"",
+          "default": "ltr",
+          "description": "Glyph order. Stays left-to-right by default so values like 2/5 keep their order inside RTL copy."
+        }
+      },
+      "rtl": {
+        "inheritsDirection": false,
+        "layout": "Digits keep left-to-right order inside RTL copy so separators such as 2/5 stay in reading order."
+      },
+      "files": [
+        {
+          "source": "components/rolling-count.css",
+          "target": "{{ui}}/rolling-count.css"
+        },
+        {
+          "source": "components/rolling-count.tsx",
+          "target": "{{ui}}/rolling-count.tsx"
+        }
+      ],
+      "examples": [
+        "examples/rolling-count-demo.tsx"
+      ],
+      "tokens": [
+        "--bh-duration-slow",
+        "--bh-easing-standard"
+      ]
+    },
+    "task-list": {
+      "description": "Collapsible agent progress tracker with pending, active, and done rows, a header icon that moves from list to pie to check, and rolling counters, plus parts that compose static and folded lists.",
+      "dependencies": {
+        "lucide-react": "^1.17.0"
+      },
+      "registryDependencies": [
+        "collapsible",
+        "rolling-count",
+        "shimmer-text"
+      ],
+      "parts": [
+        "TaskList",
+        "TaskListRoot",
+        "TaskListHeader",
+        "TaskListItems",
+        "TaskListPreview"
+      ],
+      "supportedExports": [
+        {
+          "source": "components/task-list.tsx",
+          "values": [
+            "TaskList",
+            "TaskListHeader",
+            "TaskListItems",
+            "TaskListPreview",
+            "TaskListRoot"
+          ]
+        }
+      ],
+      "props": {
+        "items": {
+          "type": "readonly TaskListItem[]",
+          "default": null,
+          "description": "Rows with id, label, and pending, active, or done status."
+        },
+        "surface": {
+          "type": "\"card\" | \"well\" | \"plain\"",
+          "default": "card",
+          "description": "Raised card, subtle well for embedding, or no surface."
+        },
+        "labels": {
+          "type": "Partial<TaskListLabels>",
+          "default": "English",
+          "description": "Localized counter copy, read after the title in the toggle's name."
+        },
+        "visibleCount": {
+          "type": "number",
+          "default": "3",
+          "description": "TaskListPreview: rows shown before the rest fold behind a more control."
+        }
+      },
+      "states": [
+        "pending",
+        "active",
+        "done"
+      ],
+      "variants": [
+        "card",
+        "well",
+        "plain"
+      ],
+      "features": [
+        "controlled state",
+        "uncontrolled state",
+        "composable parts",
+        "preview fold",
+        "reduced motion",
+        "RTL"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "layout": "Rows, counters, and the collapse chevron use logical placement; the active arrow icon mirrors."
+      },
+      "files": [
+        {
+          "source": "components/task-list.css",
+          "target": "{{ui}}/task-list.css"
+        },
+        {
+          "source": "components/task-list.tsx",
+          "target": "{{ui}}/task-list.tsx"
+        }
+      ],
+      "examples": [
+        "examples/task-list-demo.tsx"
+      ],
+      "tokens": [
+        "--bh-bg-raised",
+        "--bh-bg-subtle",
+        "--bh-content-default",
+        "--bh-content-subtle",
+        "--bh-content-success-default",
+        "--bh-duration-default",
+        "--bh-duration-fast",
+        "--bh-duration-moderate",
+        "--bh-duration-slow",
+        "--bh-easing-standard",
+        "--bh-font-family",
+        "--bh-icon-stroke-180",
+        "--bh-icon-stroke-200",
+        "--bh-opacity-0",
+        "--bh-opacity-100",
+        "--bh-radius-2xl-12",
+        "--bh-radius-full",
+        "--bh-radius-lg-8",
+        "--bh-radius-sm-4",
+        "--bh-space-4xl-20",
+        "--bh-space-lg-10",
+        "--bh-space-md-8",
+        "--bh-space-sm-6",
+        "--bh-space-xl-12",
+        "--bh-space-xs-4",
+        "--bh-space-xxs-2",
+        "--bh-space-xxxs-1",
+        "--bh-task-list-icon-size",
+        "--bh-task-list-stagger",
+        "--bh-text-body-xs-medium-font-weight",
+        "--bh-text-body-xs-regular-font-size",
+        "--bh-text-body-xs-regular-font-weight",
+        "--bh-text-body-xs-regular-letter-spacing",
+        "--bh-text-body-xs-regular-line-height",
+        "--elevation-02",
+        "--elevation-component-focus-ring"
+      ]
+    },
+    "agent-input": {
+      "description": "Composable AI prompt field with an auto-growing editor, slash-command skill palette, skill and attachment chips, an add menu for files, skills, and models, prompt enhancement with a sweeping ring, and a send action.",
+      "dependencies": {
+        "lucide-react": "^1.17.0"
+      },
+      "registryDependencies": [
+        "button",
+        "menu",
+        "shimmer-text",
+        "spinner",
+        "tag"
+      ],
+      "parts": [
+        "AgentInput"
+      ],
+      "supportedExports": [
+        {
+          "source": "components/agent-input.tsx",
+          "values": [
+            "AgentInput"
+          ]
+        }
+      ],
+      "props": {
+        "value": {
+          "type": "string",
+          "default": null,
+          "description": "Controlled prompt text; use defaultValue for uncontrolled usage."
+        },
+        "onSend": {
+          "type": "(payload: AgentInputPayload) => void",
+          "default": null,
+          "description": "Receives text, attachments, skills, and the selected model; picked attachments carry their File for upload."
+        },
+        "onEnhance": {
+          "type": "(prompt: string, signal: AbortSignal) => Promise<string>",
+          "default": null,
+          "description": "Enables the Enhance Prompt action; resolves to the rewritten prompt."
+        },
+        "models": {
+          "type": "readonly AgentInputModel[]",
+          "default": "[]",
+          "description": "Selectable models with name, description, meta, and icon."
+        },
+        "skills": {
+          "type": "readonly AgentInputSkill[]",
+          "default": "[]",
+          "description": "Skills available from the add menu and the slash palette."
+        },
+        "attachments": {
+          "type": "readonly AgentInputAttachment[]",
+          "default": null,
+          "description": "Controlled attachment chips; omit to let the field own picked files."
+        },
+        "onAttachmentsChange": {
+          "type": "(attachments: AgentInputAttachment[]) => void",
+          "default": null,
+          "description": "Called when chips are added or removed; picked files arrive with their File, so uploads can start right away."
+        },
+        "labels": {
+          "type": "Partial<AgentInputLabels>",
+          "default": "English",
+          "description": "Localized placeholder, menu, action, and remove copy."
+        }
+      },
+      "states": [
+        "idle",
+        "enhancing",
+        "enhanced"
+      ],
+      "rtl": {
+        "inheritsDirection": true,
+        "layout": "The editor, chips, palette, and action row use logical spacing; the add menu and slash palette open toward the logical start."
+      },
+      "files": [
+        {
+          "source": "components/agent-input.css",
+          "target": "{{ui}}/agent-input.css"
+        },
+        {
+          "source": "components/agent-input.tsx",
+          "target": "{{ui}}/agent-input.tsx"
+        },
+        {
+          "source": "components/agent-input-parts.tsx",
+          "target": "{{ui}}/agent-input-parts.tsx",
+          "internal": true
+        },
+        {
+          "source": "components/agent-input-state.ts",
+          "target": "{{ui}}/agent-input-state.ts",
+          "internal": true
+        }
+      ],
+      "examples": [
+        "examples/agent-input-demo.tsx"
+      ],
+      "tokens": [
+        "--bh-agent-input-field-max-height",
+        "--bh-agent-input-palette-width",
+        "--bh-agent-input-ring-duration",
+        "--bh-agent-input-ring-width",
+        "--bh-bg-raised",
+        "--bh-button-xs-height",
+        "--bh-content-accent-aqua-default",
+        "--bh-content-accent-blue-default",
+        "--bh-content-accent-fuchsia-default",
+        "--bh-content-accent-purple-default",
+        "--bh-content-default",
+        "--bh-content-disabled",
+        "--bh-content-muted",
+        "--bh-content-subtle",
+        "--bh-duration-default",
+        "--bh-duration-moderate",
+        "--bh-easing-emphasized",
+        "--bh-font-family",
+        "--bh-menu-bg",
+        "--bh-menu-item-hover-bg",
+        "--bh-menu-item-radius",
+        "--bh-menu-radius",
+        "--bh-opacity-0",
+        "--bh-opacity-100",
+        "--bh-radius-2xl-12",
+        "--bh-space-2xl-14",
+        "--bh-space-6xl-32",
+        "--bh-space-lg-10",
+        "--bh-space-md-8",
+        "--bh-space-sm-6",
+        "--bh-space-xl-12",
+        "--bh-space-xs-4",
+        "--bh-space-xxs-2",
+        "--bh-text-body-2xs-regular-font-size",
+        "--bh-text-body-2xs-regular-font-weight",
+        "--bh-text-body-2xs-regular-line-height",
+        "--bh-text-body-sm-regular-font-size",
+        "--bh-text-body-sm-regular-font-weight",
+        "--bh-text-body-sm-regular-letter-spacing",
+        "--bh-text-body-sm-regular-line-height",
+        "--bh-text-body-xs-regular-font-size",
+        "--bh-text-body-xs-regular-font-weight",
+        "--bh-text-body-xs-regular-letter-spacing",
+        "--bh-text-body-xs-regular-line-height",
+        "--bh-z-popover",
+        "--elevation-02",
+        "--elevation-menu"
+      ]
+    },
+    "approval-card": {
+      "description": "Human-in-the-loop decision cards that pause the agent: ApprovalQuestions for up to a few questions, ApprovalCommand to approve a shell command, and ApprovalPlan to green-light a short plan with an optional auto-approve countdown, all built on the ApprovalFrame shell for custom decisions.",
+      "dependencies": {
+        "lucide-react": "^1.17.0"
+      },
+      "registryDependencies": [
+        "button",
+        "kbd",
+        "rolling-count",
+        "task-list",
+        "tooltip"
+      ],
+      "parts": [
+        "ApprovalQuestions",
+        "ApprovalCommand",
+        "ApprovalPlan",
+        "ApprovalFrame"
+      ],
+      "supportedExports": [
+        {
+          "source": "components/approval-card.tsx",
+          "values": [
+            "ApprovalCommand",
+            "ApprovalFrame",
+            "ApprovalPlan",
+            "ApprovalQuestions"
+          ]
+        }
+      ],
+      "props": {
+        "questions": {
+          "type": "readonly ApprovalQuestion[]",
+          "default": null,
+          "description": "ApprovalQuestions: single-choice questions, each with a free-text Something else option."
+        },
+        "command": {
+          "type": "string",
+          "default": null,
+          "description": "ApprovalCommand: shell command shown in the mono block."
+        },
+        "cwd": {
+          "type": "string",
+          "default": null,
+          "description": "ApprovalCommand: working directory shown above the command."
+        },
+        "plan": {
+          "type": "readonly ApprovalPlanStep[]",
+          "default": null,
+          "description": "ApprovalPlan: steps with an id and a title, rendered as a pending to-do list. Step details belong in the full plan."
+        },
+        "planPreviewCount": {
+          "type": "number",
+          "default": "3",
+          "description": "ApprovalPlan: steps shown before the more fold."
+        },
+        "autoApproveSeconds": {
+          "type": "number",
+          "default": "0",
+          "description": "ApprovalPlan: opt-in countdown; at zero onApprove fires with source timeout. Either action cancels it. A new value restarts it."
+        },
+        "icon": {
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "ApprovalFrame: header glyph, sized and stroked by the tinted icon tile."
+        },
+        "tone": {
+          "type": "\"info\" | \"warning\" | \"success\"",
+          "default": null,
+          "description": "ApprovalFrame: tint of the icon tile. Questions use info, commands warning, and plans success."
+        },
+        "onApprove": {
+          "type": "callback",
+          "default": null,
+          "description": "Primary action. ApprovalQuestions passes { answers }, ApprovalPlan passes { source: user | timeout }, and ApprovalCommand passes nothing."
+        },
+        "onReject": {
+          "type": "() => void",
+          "default": null,
+          "description": "Skip action on ApprovalQuestions and ApprovalCommand."
+        },
+        "onViewPlan": {
+          "type": "() => void",
+          "default": null,
+          "description": "ApprovalPlan secondary action that opens the full plan; it also stops the countdown."
+        },
+        "labels": {
+          "type": "Partial<ApprovalQuestionsLabels> | Partial<ApprovalPlanLabels>",
+          "default": "English",
+          "description": "Localized navigation, countdown, and helper copy for the card that uses them."
+        }
+      },
+      "rtl": {
+        "inheritsDirection": true,
+        "layout": "Header, options, and actions use logical alignment; the command block and paths stay LTR while the submit arrow mirrors."
+      },
+      "files": [
+        {
+          "source": "components/approval-card.css",
+          "target": "{{ui}}/approval-card.css"
+        },
+        {
+          "source": "components/approval-card.tsx",
+          "target": "{{ui}}/approval-card.tsx"
+        },
+        {
+          "source": "components/approval-frame.tsx",
+          "target": "{{ui}}/approval-frame.tsx",
+          "internal": true
+        },
+        {
+          "source": "components/approval-questions.tsx",
+          "target": "{{ui}}/approval-questions.tsx",
+          "internal": true
+        }
+      ],
+      "examples": [
+        "examples/approval-card-demo.tsx"
+      ],
+      "tokens": [
+        "--bh-bg-info-subtle",
+        "--bh-bg-inverse",
+        "--bh-bg-raised",
+        "--bh-bg-subtle",
+        "--bh-bg-success-subtle",
+        "--bh-bg-warning-subtle",
+        "--bh-border-subtle",
+        "--bh-border-success-subtle",
+        "--bh-border-width-default",
+        "--bh-content-default",
+        "--bh-content-information-default",
+        "--bh-content-inverse",
+        "--bh-content-muted",
+        "--bh-content-subtle",
+        "--bh-content-success-default",
+        "--bh-content-warning-default",
+        "--bh-duration-default",
+        "--bh-duration-fast",
+        "--bh-duration-moderate",
+        "--bh-duration-slow",
+        "--bh-easing-emphasized",
+        "--bh-easing-standard",
+        "--bh-font-family",
+        "--bh-font-family-mono",
+        "--bh-icon-stroke-180",
+        "--bh-icon-stroke-200",
+        "--bh-icon-stroke-250",
+        "--bh-opacity-0",
+        "--bh-opacity-100",
+        "--bh-radius-2xl-12",
+        "--bh-radius-full",
+        "--bh-radius-lg-8",
+        "--bh-radius-md-6",
+        "--bh-space-2xl-14",
+        "--bh-space-3xl-16",
+        "--bh-space-5xl-24",
+        "--bh-space-6xl-32",
+        "--bh-space-lg-10",
+        "--bh-space-md-8",
+        "--bh-space-sm-6",
+        "--bh-space-xl-12",
+        "--bh-space-xs-4",
+        "--bh-space-xxs-2",
+        "--bh-space-xxxs-1",
+        "--bh-text-body-2xs-medium-font-size",
+        "--bh-text-body-2xs-medium-font-weight",
+        "--bh-text-body-2xs-regular-font-size",
+        "--bh-text-body-2xs-regular-line-height",
+        "--bh-text-body-3xs-regular-font-size",
+        "--bh-text-body-3xs-regular-line-height",
+        "--bh-text-body-md-medium-font-size",
+        "--bh-text-body-md-medium-font-weight",
+        "--bh-text-body-md-medium-letter-spacing",
+        "--bh-text-body-md-medium-line-height",
+        "--bh-text-body-xs-medium-font-weight",
+        "--bh-text-body-xs-regular-font-size",
+        "--bh-text-body-xs-regular-font-weight",
+        "--bh-text-body-xs-regular-letter-spacing",
+        "--bh-text-body-xs-regular-line-height",
+        "--elevation-02",
+        "--elevation-component-focus-ring"
       ]
     }
   }