haze-ui 1.32.0 → 1.34.0

package/dist/registry.json

@@ -19,7 +19,7 @@
       "files": [
         {
           "path": "components/haze/accordion.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Accordion, AccordionItem } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/accordion.css';\n\nexport { Accordion, AccordionItem };\nexport type { AccordionProps, AccordionItemProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Accordion, AccordionItem } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/accordion.css';\n\nexport { Accordion, AccordionItem };\nexport type { AccordionProps, AccordionItemProps, AccordionClassNames } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -69,10 +69,10 @@
     {
       "name": "alert",
       "type": "registry:ui",
-      "title": "Alert",
+      "title": "Alert / alertVariants",
       "description": "Inline status message box.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Inline status message box.\n\nExports: `Alert`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/alert\n```\n\nThe wrapper lands at `components/ui/haze/alert.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/alert.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "Inline status message box.\n\nExports: `Alert`, `alertVariants`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/alert\n```\n\nThe wrapper lands at `components/ui/haze/alert.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/alert.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "feedback"
       ],
@@ -82,7 +82,7 @@
       "files": [
         {
           "path": "components/haze/alert.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Alert } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/alert.css';\n\nexport { Alert };\nexport type { AlertProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Alert, alertVariants } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/alert.css';\n\nexport { Alert, alertVariants };\nexport type { AlertProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -279,10 +279,10 @@
     {
       "name": "banner",
       "type": "registry:ui",
-      "title": "Banner",
+      "title": "Banner / bannerVariants",
       "description": "Dismissible top banner with info/success/warning/danger variants.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Dismissible top banner with info/success/warning/danger variants.\n\nExports: `Banner`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/banner\n```\n\nThe wrapper lands at `components/ui/haze/banner.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/banner.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "Dismissible top banner with info/success/warning/danger variants.\n\nExports: `Banner`, `bannerVariants`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/banner\n```\n\nThe wrapper lands at `components/ui/haze/banner.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/banner.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "feedback"
       ],
@@ -292,7 +292,7 @@
       "files": [
         {
           "path": "components/haze/banner.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Banner } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/banner.css';\n\nexport { Banner };\nexport type { BannerProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Banner, bannerVariants } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/banner.css';\n\nexport { Banner, bannerVariants };\nexport type { BannerProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -303,7 +303,7 @@
       "title": "Haze UI base (tokens + every component wrapper)",
       "description": "One-command setup of the whole haze-ui design system: theme tokens plus a thin wrapper for every styled component, pulled in through registryDependencies.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "One command installs the entire haze-ui design system: the theme tokens\n(this item ships the token-activation wrapper) plus a thin re-export\nwrapper for every styled component — 132 registry items pulled\nin through `registryDependencies`, resolved recursively by the CLI.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/base\n```\n\nEach component wrapper lands at `components/ui/haze/<component>.tsx` and\nre-exports its component from the `haze-ui` npm package (installed\nautomatically), importing its stylesheet — no other setup is needed.\n\n## Theming\n\nThis wrapper re-exports the 'lightTheme' (or 'darkTheme'), 'spacing' and\n'typography' classes from 'haze-ui' and imports 'haze-ui/css/tokens.css'.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "One command installs the entire haze-ui design system: the theme tokens\n(this item ships the token-activation wrapper) plus a thin re-export\nwrapper for every styled component — 153 registry items pulled\nin through `registryDependencies`, resolved recursively by the CLI.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/base\n```\n\nEach component wrapper lands at `components/ui/haze/<component>.tsx` and\nre-exports its component from the `haze-ui` npm package (installed\nautomatically), importing its stylesheet — no other setup is needed.\n\n## Theming\n\nThis wrapper re-exports the 'lightTheme' (or 'darkTheme'), 'spacing' and\n'typography' classes from 'haze-ui' and imports 'haze-ui/css/tokens.css'.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "theme",
         "setup"
@@ -329,6 +329,7 @@
         "wmzy/haze-ui/bottom-sheet",
         "wmzy/haze-ui/breadcrumb",
         "wmzy/haze-ui/button",
+        "wmzy/haze-ui/button-group",
         "wmzy/haze-ui/calendar",
         "wmzy/haze-ui/card",
         "wmzy/haze-ui/carousel",
@@ -348,8 +349,11 @@
         "wmzy/haze-ui/container",
         "wmzy/haze-ui/context-menu",
         "wmzy/haze-ui/conversation-list",
+        "wmzy/haze-ui/copy-button",
         "wmzy/haze-ui/count-up",
+        "wmzy/haze-ui/countdown",
         "wmzy/haze-ui/data-table",
+        "wmzy/haze-ui/date-field",
         "wmzy/haze-ui/date-range-picker",
         "wmzy/haze-ui/datepicker",
         "wmzy/haze-ui/descriptions",
@@ -361,6 +365,7 @@
         "wmzy/haze-ui/dropdown-menu",
         "wmzy/haze-ui/ellipsis",
         "wmzy/haze-ui/empty",
+        "wmzy/haze-ui/error-boundary",
         "wmzy/haze-ui/fieldset",
         "wmzy/haze-ui/file-input",
         "wmzy/haze-ui/file-preview",
@@ -368,13 +373,17 @@
         "wmzy/haze-ui/float-button",
         "wmzy/haze-ui/form",
         "wmzy/haze-ui/grid",
+        "wmzy/haze-ui/heatmap",
         "wmzy/haze-ui/hover-card",
         "wmzy/haze-ui/icon",
         "wmzy/haze-ui/image",
+        "wmzy/haze-ui/image-crop",
         "wmzy/haze-ui/indicator",
+        "wmzy/haze-ui/inline-citation",
         "wmzy/haze-ui/inline-completion",
         "wmzy/haze-ui/inline-edit",
         "wmzy/haze-ui/input",
+        "wmzy/haze-ui/input-group",
         "wmzy/haze-ui/json-view",
         "wmzy/haze-ui/kbd",
         "wmzy/haze-ui/list",
@@ -385,20 +394,29 @@
         "wmzy/haze-ui/masonry",
         "wmzy/haze-ui/mentions",
         "wmzy/haze-ui/menu",
+        "wmzy/haze-ui/meter",
         "wmzy/haze-ui/model-picker",
         "wmzy/haze-ui/navigation-bar",
+        "wmzy/haze-ui/navigation-menu",
         "wmzy/haze-ui/number-input",
         "wmzy/haze-ui/otp-input",
         "wmzy/haze-ui/pagination",
         "wmzy/haze-ui/password-input",
+        "wmzy/haze-ui/phone-input",
+        "wmzy/haze-ui/plan",
+        "wmzy/haze-ui/popconfirm",
         "wmzy/haze-ui/popover",
         "wmzy/haze-ui/progress",
         "wmzy/haze-ui/prompt-input",
+        "wmzy/haze-ui/pull-to-refresh",
         "wmzy/haze-ui/qr-code",
+        "wmzy/haze-ui/queue",
         "wmzy/haze-ui/radio",
         "wmzy/haze-ui/rating",
         "wmzy/haze-ui/resizable",
         "wmzy/haze-ui/result",
+        "wmzy/haze-ui/rich-text-editor",
+        "wmzy/haze-ui/schedule",
         "wmzy/haze-ui/scroll-area",
         "wmzy/haze-ui/segmented",
         "wmzy/haze-ui/select",
@@ -409,6 +427,7 @@
         "wmzy/haze-ui/sources",
         "wmzy/haze-ui/sparkline",
         "wmzy/haze-ui/spinner",
+        "wmzy/haze-ui/splitter",
         "wmzy/haze-ui/spoiler",
         "wmzy/haze-ui/stat",
         "wmzy/haze-ui/status-bar",
@@ -425,6 +444,7 @@
         "wmzy/haze-ui/tag-input",
         "wmzy/haze-ui/textarea",
         "wmzy/haze-ui/thinking-indicator",
+        "wmzy/haze-ui/time-grid",
         "wmzy/haze-ui/time-picker",
         "wmzy/haze-ui/timeline",
         "wmzy/haze-ui/toast",
@@ -435,6 +455,7 @@
         "wmzy/haze-ui/toolbar",
         "wmzy/haze-ui/tooltip",
         "wmzy/haze-ui/tour",
+        "wmzy/haze-ui/trace",
         "wmzy/haze-ui/transfer",
         "wmzy/haze-ui/tree",
         "wmzy/haze-ui/tree-select",
@@ -448,7 +469,7 @@
       "files": [
         {
           "path": "components/haze/base.tsx",
-          "content": "// haze-ui registry base — generated by scripts/generate-registry.mjs.\n//\n// Meta item: 'npx shadcn add wmzy/haze-ui/base' installs the entire\n// design system — this theme-activation wrapper plus, through\n// registryDependencies, a thin wrapper for every styled component under\n// components/ui/haze/. The implementation keeps coming from the haze-ui\n// npm package; edit the wrappers to customize.\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap).\n\nimport { compact, cyanTheme, darkTheme, lightTheme, motion, motionPresets, orangeTheme, roseTheme, spacing, tealTheme, typography, violetTheme } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\n\nexport { compact, cyanTheme, darkTheme, lightTheme, motion, motionPresets, orangeTheme, roseTheme, spacing, tealTheme, typography, violetTheme };\n",
+          "content": "// haze-ui registry base — generated by scripts/generate-registry.mjs.\n//\n// Meta item: 'npx shadcn add wmzy/haze-ui/base' installs the entire\n// design system — this theme-activation wrapper plus, through\n// registryDependencies, a thin wrapper for every styled component under\n// components/ui/haze/. The implementation keeps coming from the haze-ui\n// npm package; edit the wrappers to customize.\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap).\n\nimport { autoTheme, compact, cyanTheme, darkTheme, lightTheme, motion, motionPresets, orangeTheme, roseTheme, spacing, tealTheme, typography, violetTheme } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\n\nexport { autoTheme, compact, cyanTheme, darkTheme, lightTheme, motion, motionPresets, orangeTheme, roseTheme, spacing, tealTheme, typography, violetTheme };\n",
           "type": "registry:base"
         }
       ]
@@ -516,6 +537,27 @@
         }
       ]
     },
+    {
+      "name": "button-group",
+      "type": "registry:ui",
+      "title": "ButtonGroup / ButtonGroupSeparator / useButtonGroup",
+      "description": "Attached button bar: merged corners and seams, group-wide size/variant/disabled, separator sub-component.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Attached button bar: merged corners and seams, group-wide size/variant/disabled, separator sub-component.\n\nExports: `ButtonGroup`, `ButtonGroupSeparator`, `useButtonGroup`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/button-group\n```\n\nThe wrapper lands at `components/ui/haze/button-group.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/button-group.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "general"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/button-group.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { ButtonGroup, ButtonGroupSeparator, useButtonGroup } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/button-group.css';\n\nexport { ButtonGroup, ButtonGroupSeparator, useButtonGroup };\nexport type { ButtonGroupProps, ButtonGroupClassNames, ButtonGroupSeparatorProps, ButtonGroupValue } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "calendar",
       "type": "registry:ui",
@@ -532,7 +574,7 @@
       "files": [
         {
           "path": "components/haze/calendar.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Calendar } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/calendar.css';\n\nexport { Calendar };\nexport type { CalendarProps, CalendarPickerMode, CalendarCellRender } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Calendar } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/calendar.css';\n\nexport { Calendar };\nexport type { CalendarProps, CalendarPickerMode, CalendarCellRender, CalendarClassNames } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -540,10 +582,10 @@
     {
       "name": "card",
       "type": "registry:ui",
-      "title": "Card",
+      "title": "Card / cardVariants",
       "description": "Content card with `elevated`/`outlined`/`filled` variants.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Content card with `elevated`/`outlined`/`filled` variants.\n\nExports: `Card`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/card\n```\n\nThe wrapper lands at `components/ui/haze/card.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/card.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "Content card with `elevated`/`outlined`/`filled` variants.\n\nExports: `Card`, `cardVariants`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/card\n```\n\nThe wrapper lands at `components/ui/haze/card.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/card.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "data-display"
       ],
@@ -553,7 +595,7 @@
       "files": [
         {
           "path": "components/haze/card.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Card } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/card.css';\n\nexport { Card };\nexport type { CardProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Card, cardVariants } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/card.css';\n\nexport { Card, cardVariants };\nexport type { CardProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -574,7 +616,7 @@
       "files": [
         {
           "path": "components/haze/carousel.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Carousel, CarouselSlide } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/carousel.css';\n\nexport { Carousel, CarouselSlide };\nexport type { CarouselProps, CarouselSlideProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Carousel, CarouselSlide } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/carousel.css';\n\nexport { Carousel, CarouselSlide };\nexport type { CarouselProps, CarouselSlideProps, CarouselHandle } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -595,7 +637,7 @@
       "files": [
         {
           "path": "components/haze/cascader.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Cascader } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/cascader.css';\nimport 'haze-ui/css/spinner.css';\nimport 'haze-ui/css/virtual-list.css';\n\nexport { Cascader };\nexport type { CascaderProps, CascaderOption } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Cascader } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/cascader.css';\nimport 'haze-ui/css/spinner.css';\nimport 'haze-ui/css/virtual-list.css';\n\nexport { Cascader };\nexport type { CascaderProps, CascaderOption, CascaderClassNames } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -616,7 +658,7 @@
       "files": [
         {
           "path": "components/haze/chart.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Chart } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/chart.css';\n\nexport { Chart };\nexport type { ChartProps, ChartSeries, ChartType, ChartTooltipPayload, ChartTooltipEntry } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Chart } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/chart.css';\nimport 'haze-ui/css/empty.css';\nimport 'haze-ui/css/spinner.css';\n\nexport { Chart };\nexport type { ChartProps, ChartClassNames, ChartSeries, ChartType, ChartTooltipPayload, ChartTooltipEntry, ChartGaugeThreshold, ChartWaffleSeries } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -708,10 +750,10 @@
     {
       "name": "chip",
       "type": "registry:ui",
-      "title": "Chip",
+      "title": "Chip / chipVariants",
       "description": "Rounded status chip with optional icon and close button.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Rounded status chip with optional icon and close button.\n\nExports: `Chip`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/chip\n```\n\nThe wrapper lands at `components/ui/haze/chip.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/chip.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "Rounded status chip with optional icon and close button.\n\nExports: `Chip`, `chipVariants`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/chip\n```\n\nThe wrapper lands at `components/ui/haze/chip.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/chip.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "data-display"
       ],
@@ -721,7 +763,7 @@
       "files": [
         {
           "path": "components/haze/chip.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Chip } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/chip.css';\n\nexport { Chip };\nexport type { ChipProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Chip, chipVariants } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/chip.css';\n\nexport { Chip, chipVariants };\nexport type { ChipProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -784,7 +826,7 @@
       "files": [
         {
           "path": "components/haze/color-picker.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { ColorPicker, ColorPickerCore } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/color-picker.css';\n\nexport { ColorPicker, ColorPickerCore };\nexport type { ColorPickerProps, ColorPickerCoreProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { ColorPicker, ColorPickerCore } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/color-picker.css';\n\nexport { ColorPicker, ColorPickerCore };\nexport type { ColorPickerProps, ColorPickerCoreProps, ColorPickerPreset } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -826,7 +868,7 @@
       "files": [
         {
           "path": "components/haze/command.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Command, CommandInput, CommandList, CommandItem, CommandGroup, CommandDialog } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/command.css';\nimport 'haze-ui/css/dialog.css';\nimport 'haze-ui/css/kbd.css';\n\nexport { Command, CommandInput, CommandList, CommandItem, CommandGroup, CommandDialog };\nexport type { CommandProps, CommandInputProps, CommandListProps, CommandItemProps, CommandGroupProps, CommandDialogProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Command, CommandInput, CommandList, CommandItem, CommandGroup, CommandDialog } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/command.css';\nimport 'haze-ui/css/dialog.css';\nimport 'haze-ui/css/kbd.css';\nimport 'haze-ui/css/virtual-list.css';\n\nexport { Command, CommandInput, CommandList, CommandItem, CommandGroup, CommandDialog };\nexport type { CommandProps, CommandInputProps, CommandListProps, CommandItemProps, CommandGroupProps, CommandDialogProps, CommandListVirtualizedConfig } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -889,7 +931,7 @@
       "files": [
         {
           "path": "components/haze/context-menu.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/context-menu.css';\n\nexport { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator };\nexport type { ContextMenuProps, ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuSeparatorProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/context-menu.css';\n\nexport { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator };\nexport type { ContextMenuProps, ContextMenuClassNames, ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuSeparatorProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -915,6 +957,27 @@
         }
       ]
     },
+    {
+      "name": "copy-button",
+      "type": "registry:ui",
+      "title": "CopyButton / Snippet / copyButtonIconSizes",
+      "description": "Copy-to-clipboard button (Button skin, useClipboard plumbing, copied-state feedback with SR announcement) plus Snippet: the inline mono code chip with a docked copy button.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Copy-to-clipboard button (Button skin, useClipboard plumbing, copied-state feedback with SR announcement) plus Snippet: the inline mono code chip with a docked copy button.\n\nExports: `CopyButton`, `Snippet`, `copyButtonIconSizes`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/copy-button\n```\n\nThe wrapper lands at `components/ui/haze/copy-button.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/copy-button.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "general"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/copy-button.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { CopyButton, Snippet, copyButtonIconSizes } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/copy-button.css';\nimport 'haze-ui/css/button.css';\nimport 'haze-ui/css/spinner.css';\nimport 'haze-ui/css/visually-hidden.css';\n\nexport { CopyButton, Snippet, copyButtonIconSizes };\nexport type { CopyButtonProps, CopyButtonClassNames, SnippetProps, SnippetClassNames } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "count-up",
       "type": "registry:ui",
@@ -936,6 +999,122 @@
         }
       ]
     },
+    {
+      "name": "countdown",
+      "type": "registry:ui",
+      "title": "Countdown",
+      "description": "Deadline countdown: `value` timestamp or Date, setTimeout-chain ticks aligned to second boundaries (no interval drift), `onFinish` fires once, adaptive `1d hh:mm:ss` / `hh:mm:ss` default format with `format`/`render` escape hatches.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Deadline countdown: `value` timestamp or Date, setTimeout-chain ticks aligned to second boundaries (no interval drift), `onFinish` fires once, adaptive `1d hh:mm:ss` / `hh:mm:ss` default format with `format`/`render` escape hatches.\n\nExports: `Countdown`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/countdown\n```\n\nThe wrapper lands at `components/ui/haze/countdown.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/countdown.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "general"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/countdown.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Countdown } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/countdown.css';\n\nexport { Countdown };\nexport type { CountdownProps, CountdownParts } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "crud-block",
+      "type": "registry:block",
+      "title": "CRUD block (Tree master → DataTable detail + Dialog form + Toast)",
+      "description": "Master–detail CRUD over local state: a `Tree` picks the team, the `DataTable` lists its pipelines, a `Dialog` hosts the zod-validated create/edit `Form`, `ConfirmDialog` guards deletes and `useToast` reports every mutation.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Master–detail CRUD over local state: a `Tree` picks the team, the `DataTable` lists its pipelines, a `Dialog` hosts the zod-validated create/edit `Form`, `ConfirmDialog` guards deletes and `useToast` reports every mutation.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/crud-block\n```\n\nThe full-page source lands at `components/block/haze/crud-block.tsx` (via the `@block/` target placeholder from `components.json`) — vendored, so you own and edit it. Component imports are rewritten to the `haze-ui` npm package, which is installed automatically together with `zod` and `react-use-control`.\n\nThe file imports the stylesheet of every component it renders (`haze-ui/css/tokens.css` + 21 component css files), so no extra stylesheet setup is needed.\n\n## Theming\n\nThis wrapper re-exports the 'lightTheme' (or 'darkTheme'), 'spacing' and\n'typography' classes from 'haze-ui' and imports 'haze-ui/css/tokens.css'.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nLive preview and source: https://wmzy.github.io/haze-ui/#/blocks — https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "blocks",
+        "data-display",
+        "form"
+      ],
+      "dependencies": [
+        "haze-ui",
+        "zod",
+        "react-use-control"
+      ],
+      "registryDependencies": [
+        "wmzy/haze-ui/tree",
+        "wmzy/haze-ui/data-table",
+        "wmzy/haze-ui/dialog",
+        "wmzy/haze-ui/confirm-dialog",
+        "wmzy/haze-ui/toast",
+        "wmzy/haze-ui/form",
+        "wmzy/haze-ui/input",
+        "wmzy/haze-ui/select",
+        "wmzy/haze-ui/button",
+        "wmzy/haze-ui/badge",
+        "wmzy/haze-ui/segmented",
+        "wmzy/haze-ui/kbd",
+        "wmzy/haze-ui/checkbox",
+        "wmzy/haze-ui/dropdown-menu",
+        "wmzy/haze-ui/empty",
+        "wmzy/haze-ui/pagination",
+        "wmzy/haze-ui/skeleton",
+        "wmzy/haze-ui/spinner",
+        "wmzy/haze-ui/table",
+        "wmzy/haze-ui/virtual-list",
+        "wmzy/haze-ui/visually-hidden"
+      ],
+      "files": [
+        {
+          "path": "components/block/haze/crud-block.tsx",
+          "content": "// haze-ui registry block — generated by scripts/generate-registry.mjs\n// from src/views/Blocks/blocks/CrudBlock.tsx.\n//\n// Unlike the component items (thin re-export wrappers over the haze-ui npm\n// package), a block is VENDORED source: a full page you own and edit.\n// The component imports are rewritten from the docs site's '@/lib' alias\n// to the published 'haze-ui' package and every stylesheet of the page's\n// component closure is imported below, so the file is self-contained.\n// npm dependencies beyond haze-ui: zod, react-use-control.\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap).\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/badge.css';\nimport 'haze-ui/css/button.css';\nimport 'haze-ui/css/checkbox.css';\nimport 'haze-ui/css/confirm-dialog.css';\nimport 'haze-ui/css/data-table.css';\nimport 'haze-ui/css/dialog.css';\nimport 'haze-ui/css/dropdown-menu.css';\nimport 'haze-ui/css/empty.css';\nimport 'haze-ui/css/form.css';\nimport 'haze-ui/css/input.css';\nimport 'haze-ui/css/kbd.css';\nimport 'haze-ui/css/pagination.css';\nimport 'haze-ui/css/segmented.css';\nimport 'haze-ui/css/select.css';\nimport 'haze-ui/css/skeleton.css';\nimport 'haze-ui/css/spinner.css';\nimport 'haze-ui/css/table.css';\nimport 'haze-ui/css/toast.css';\nimport 'haze-ui/css/tree.css';\nimport 'haze-ui/css/virtual-list.css';\nimport 'haze-ui/css/visually-hidden.css';\n\nimport type { DataTableColumnDef, TreeNodeData } from 'haze-ui';\n\nimport { useCallback, useMemo, useRef, useState } from 'react';\nimport { useControl } from 'react-use-control';\nimport { z } from 'zod';\n\nimport {\n  Badge,\n  Button,\n  ConfirmDialog,\n  DataTable,\n  Dialog,\n  Form,\n  FormItem,\n  InputCore,\n  Kbd,\n  Option,\n  Segmented,\n  SelectCore,\n  ToastContainer,\n  Tree,\n  useForm,\n  standardSchemaFormValidator,\n  useToast,\n} from 'haze-ui';\n\n/*\n * CRUD block: the master–detail pattern over local state — a Tree picks\n * the team (group nodes filter to their subtree), the DataTable lists\n * that team's pipelines with the toolbar strip (New + density Segmented\n * + keyboard-nav copy) and the `size` density prop, Dialog hosts a\n * zod-validated Form for create/edit (remounted per open so\n * initialValues reload the record), ConfirmDialog guards deletes and\n * useToast reports every mutation. ToastContainer wraps the block so\n * toasts land in the demo viewport. Layout glue is inline styles over\n * --haze-* tokens only.\n */\n\ntype Schedule = '15m' | 'hourly' | 'daily';\ntype PipelineStatus = 'healthy' | 'degraded' | 'paused';\n\ntype Pipeline = {\n  id: string;\n  name: string;\n  team: string;\n  owner: string;\n  schedule: Schedule;\n  status: PipelineStatus;\n};\n\ntype PipelineFormValues = {\n  name: string;\n  owner: string;\n  schedule: Schedule | '';\n};\n\nconst TEAM_TREE: TreeNodeData[] = [\n  {\n    key: 'all',\n    title: 'All teams',\n    children: [\n      {\n        key: 'eng',\n        title: 'Engineering',\n        children: [\n          { key: 'eng-fe', title: 'Frontend' },\n          { key: 'eng-plat', title: 'Platform' },\n          { key: 'eng-data', title: 'Data' },\n        ],\n      },\n      {\n        key: 'growth',\n        title: 'Growth',\n        children: [\n          { key: 'growth-lifecycle', title: 'Lifecycle' },\n          { key: 'growth-ads', title: 'Ads' },\n        ],\n      },\n      {\n        key: 'ops',\n        title: 'Operations',\n        children: [\n          { key: 'ops-alerts', title: 'Alerting' },\n          { key: 'ops-freight', title: 'Freight' },\n        ],\n      },\n    ],\n  },\n];\n\n/** node key → leaf keys in its subtree ('eng' → its three teams). */\nfunction leafKeysOf(nodes: TreeNodeData[], into: string[]): string[] {\n  for (const node of nodes) {\n    if (node.children && node.children.length > 0) {\n      leafKeysOf(node.children, into);\n    } else {\n      into.push(node.key);\n    }\n  }\n  return into;\n}\n\nconst TEAM_SCOPE: Record<string, string[]> = {\n  all: leafKeysOf(TEAM_TREE, []),\n};\nfunction collectScopes(nodes: TreeNodeData[]): void {\n  for (const node of nodes) {\n    TEAM_SCOPE[node.key] =\n      node.children && node.children.length > 0\n        ? leafKeysOf(node.children, [])\n        : [node.key];\n    if (node.children) collectScopes(node.children);\n  }\n}\ncollectScopes(TEAM_TREE);\n\nconst INITIAL_PIPELINES: Pipeline[] = [\n  { id: 'p-01', name: 'Checkout event tap', team: 'eng-fe', owner: 'ada@nimbus.dev', schedule: '15m', status: 'healthy' },\n  { id: 'p-02', name: 'Funnel pageviews', team: 'eng-fe', owner: 'grace@nimbus.dev', schedule: 'hourly', status: 'healthy' },\n  { id: 'p-03', name: 'Gateway request log', team: 'eng-plat', owner: 'kwame@nimbus.dev', schedule: '15m', status: 'degraded' },\n  { id: 'p-04', name: 'Deploy markers', team: 'eng-plat', owner: 'rina@nimbus.dev', schedule: 'hourly', status: 'healthy' },\n  { id: 'p-05', name: 'Warehouse sync', team: 'eng-data', owner: 'tomas@nimbus.dev', schedule: 'daily', status: 'healthy' },\n  { id: 'p-06', name: 'Backfill queue', team: 'eng-data', owner: 'tomas@nimbus.dev', schedule: 'hourly', status: 'paused' },\n  { id: 'p-07', name: 'Trial activation', team: 'growth-lifecycle', owner: 'yuki@nimbus.dev', schedule: 'daily', status: 'healthy' },\n  { id: 'p-08', name: 'Attribution joins', team: 'growth-ads', owner: 'omar@nimbus.dev', schedule: 'hourly', status: 'degraded' },\n  { id: 'p-09', name: 'Anomaly detector', team: 'ops-alerts', owner: 'rina@nimbus.dev', schedule: '15m', status: 'healthy' },\n  { id: 'p-10', name: 'Shipment tracker', team: 'ops-freight', owner: 'leo@nimbus.dev', schedule: 'hourly', status: 'healthy' },\n];\n\nconst pipelineSchema = z.object({\n  name: z.string().min(2, 'Name must be at least 2 characters'),\n  owner: z.email('Enter a valid email address'),\n  schedule: z.enum(['15m', 'hourly', 'daily'], { message: 'Pick a schedule' }),\n});\n\nconst pipelineValidator =\n  standardSchemaFormValidator<PipelineFormValues>(pipelineSchema);\n\nfunction statusBadge(status: PipelineStatus) {\n  const color =\n    status === 'healthy' ? 'success' : status === 'degraded' ? 'warning' : 'default';\n  return <Badge color={color}>{status}</Badge>;\n}\n\nfunction scheduleBadge(schedule: Schedule) {\n  return <Badge color={schedule === '15m' ? 'info' : 'default'}>{schedule}</Badge>;\n}\n\n/**\n * One dialog form, fresh per open: the parent remounts it (key=session),\n * so `initialValues` alone loads the record being edited.\n */\nfunction PipelineForm({\n  pipeline,\n  onCancel,\n  onSubmit,\n}: {\n  pipeline: Pipeline | null;\n  onCancel: () => void;\n  onSubmit: (values: PipelineFormValues) => void;\n}) {\n  const form = useForm<PipelineFormValues>({\n    initialValues: pipeline\n      ? { name: pipeline.name, owner: pipeline.owner, schedule: pipeline.schedule }\n      : { name: '', owner: '', schedule: '' },\n    validate: pipelineValidator,\n    validateDeps: ['name', 'owner', 'schedule'],\n  });\n\n  return (\n    <Form form={form} onValidSubmit={onSubmit}>\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 'var(--haze-space-4)',\n        }}\n      >\n        <FormItem\n          form={form}\n          name='name'\n          label='Pipeline name'\n          rules={{ required: true }}\n          input={InputCore}\n          placeholder='Checkout event tap'\n        />\n        <FormItem\n          form={form}\n          name='owner'\n          label='Owner email'\n          rules={{ required: true }}\n          input={InputCore}\n          type='email'\n          placeholder='owner@nimbus.dev'\n        />\n        <FormItem\n          form={form}\n          name='schedule'\n          label='Schedule'\n          rules={{ required: true }}\n          input={SelectCore}\n        >\n          <Option value=''>Pick a schedule…</Option>\n          <Option value='15m'>Every 15 minutes</Option>\n          <Option value='hourly'>Hourly</Option>\n          <Option value='daily'>Daily</Option>\n        </FormItem>\n        <div\n          style={{\n            display: 'flex',\n            justifyContent: 'flex-end',\n            gap: 'var(--haze-space-2)',\n          }}\n        >\n          {/* Button's native `type` is pinned to 'button' — submit through\n              the owning form so the zod chain runs first. */}\n          <Button onClick={(e) => e.currentTarget.form?.requestSubmit()}>\n            Save pipeline\n          </Button>\n          <Button variant='ghost' onClick={onCancel}>\n            Cancel\n          </Button>\n        </div>\n      </div>\n    </Form>\n  );\n}\n\nfunction CrudScreen() {\n  const toast = useToast();\n\n  // Master selection, dialog/confirm open and density are user-facing —\n  // Controls all the way down.\n  const [selectedKeys, setSelectedKeys, selectedCtrl] = useControl<string[]>(\n    undefined,\n    ['all']\n  );\n  const [density, setDensity, densityCtrl] = useControl(undefined, 'md');\n  const [, setDialogOpen, dialogOpenCtrl] = useControl(undefined, false);\n  const [, setConfirmOpen, confirmOpenCtrl] = useControl(undefined, false);\n  // Uncontrolled-with-default: seeds the initial expansion, then the\n  // tree owns the toggling.\n  const [, , expandedCtrl] = useControl<string[]>(undefined, ['all']);\n\n  const [pipelines, setPipelines] = useState(INITIAL_PIPELINES);\n  const [editing, setEditing] = useState<Pipeline | null>(null);\n  const [session, setSession] = useState(0);\n  const [pendingDelete, setPendingDelete] = useState<Pipeline | null>(null);\n  const nextIdRef = useRef(INITIAL_PIPELINES.length + 1);\n\n  const scope = useMemo(\n    () => TEAM_SCOPE[selectedKeys[0] ?? 'all'] ?? [],\n    [selectedKeys]\n  );\n  const rows = useMemo(\n    () => pipelines.filter((pipeline) => scope.includes(pipeline.team)),\n    [pipelines, scope]\n  );\n\n  const openCreate = useCallback(() => {\n    setEditing(null);\n    setSession((s) => s + 1);\n    setDialogOpen(true);\n  }, [setDialogOpen]);\n\n  const openEdit = useCallback(\n    (pipeline: Pipeline) => {\n      setEditing(pipeline);\n      setSession((s) => s + 1);\n      setDialogOpen(true);\n    },\n    [setDialogOpen]\n  );\n\n  const closeDialog = useCallback(() => setDialogOpen(false), [setDialogOpen]);\n\n  const handleSubmit = (values: PipelineFormValues) => {\n    // onValidSubmit implies the zod schema passed — schedule is a Schedule.\n    if (editing) {\n      setPipelines((prev) =>\n        prev.map((pipeline) =>\n          pipeline.id === editing.id\n            ? { ...pipeline, ...values, schedule: values.schedule as Schedule }\n            : pipeline\n        )\n      );\n      toast(`Updated ${values.name}`, { variant: 'success' });\n    } else {\n      const id = `p-${String(nextIdRef.current).padStart(2, '0')}`;\n      nextIdRef.current += 1;\n      setPipelines((prev) => [\n        ...prev,\n        {\n          id,\n          team: scope[0] ?? 'eng-fe',\n          owner: values.owner,\n          name: values.name,\n          schedule: values.schedule as Schedule,\n          status: 'healthy',\n        },\n      ]);\n      toast(`Created ${values.name}`, { variant: 'success' });\n    }\n    closeDialog();\n  };\n\n  const askDelete = useCallback(\n    (pipeline: Pipeline) => {\n      setPendingDelete(pipeline);\n      setConfirmOpen(true);\n    },\n    [setConfirmOpen]\n  );\n\n  const closeConfirm = useCallback(() => {\n    setConfirmOpen(false);\n    setPendingDelete(null);\n  }, [setConfirmOpen]);\n\n  const confirmDelete = () => {\n    if (!pendingDelete) return;\n    setPipelines((prev) => prev.filter((p) => p.id !== pendingDelete.id));\n    toast(`Deleted ${pendingDelete.name}`, { variant: 'success' });\n    setPendingDelete(null);\n  };\n\n  const columns = useMemo<DataTableColumnDef<Pipeline>[]>(\n    () => [\n      {\n        accessorKey: 'name',\n        header: 'Pipeline',\n        cell: (info) => <strong>{info.getValue() as string}</strong>,\n      },\n      { accessorKey: 'owner', header: 'Owner' },\n      {\n        accessorKey: 'schedule',\n        header: 'Schedule',\n        cell: (info) => scheduleBadge(info.getValue() as Schedule),\n      },\n      {\n        accessorKey: 'status',\n        header: 'Status',\n        cell: (info) => statusBadge(info.getValue() as PipelineStatus),\n      },\n      {\n        id: 'actions',\n        header: '',\n        cell: ({ row }) => (\n          <div\n            style={{\n              display: 'flex',\n              justifyContent: 'flex-end',\n              gap: 'var(--haze-space-1)',\n            }}\n          >\n            <Button size='sm' variant='ghost' onClick={() => openEdit(row.original)}>\n              Edit\n            </Button>\n            <Button size='sm' variant='ghost' onClick={() => askDelete(row.original)}>\n              Delete\n            </Button>\n          </div>\n        ),\n        meta: { sortable: false },\n      },\n    ],\n    [openEdit, askDelete]\n  );\n\n  return (\n    <div\n      data-slot='crud-block'\n      style={{\n        display: 'flex',\n        height: '100%',\n        minHeight: '480px',\n        fontFamily: 'var(--haze-font-sans)',\n        color: 'var(--haze-color-text)',\n      }}\n    >\n      <aside\n        data-slot='crud-tree'\n        aria-label='Pipelines by team'\n        style={{\n          width: '232px',\n          flexShrink: 0,\n          display: 'flex',\n          flexDirection: 'column',\n          padding: 'var(--haze-space-3)',\n          borderInlineEnd: '1px solid var(--haze-color-border)',\n          background: 'var(--haze-color-bg-subtle)',\n        }}\n      >\n        <div\n          style={{\n            fontSize: 'var(--haze-text-xs)',\n            fontWeight: 'var(--haze-weight-semibold)',\n            letterSpacing: '0.04em',\n            textTransform: 'uppercase',\n            color: 'var(--haze-color-text-muted)',\n            margin: '0 0 var(--haze-space-2) var(--haze-space-2)',\n          }}\n        >\n          Teams\n        </div>\n        <Tree\n          treeData={TEAM_TREE}\n          selectedKeys={selectedCtrl}\n          expandedKeys={expandedCtrl}\n          onSelect={(keys) =>\n            setSelectedKeys(keys.length > 0 ? [keys[keys.length - 1]!] : [])\n          }\n          blockNode\n        />\n      </aside>\n\n      <main\n        data-slot='crud-detail'\n        style={{\n          flex: 1,\n          minWidth: 0,\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 'var(--haze-space-3)',\n          padding: 'var(--haze-space-4)',\n        }}\n      >\n        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--haze-space-3)' }}>\n          <h2\n            style={{\n              margin: 0,\n              fontSize: 'var(--haze-text-lg)',\n              fontWeight: 'var(--haze-weight-semibold)',\n            }}\n          >\n            Event pipelines\n          </h2>\n          <Badge color='info'>{rows.length}</Badge>\n          <span style={{ flex: 1 }} />\n          <span\n            style={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: 'var(--haze-space-1)',\n              fontSize: 'var(--haze-text-xs)',\n              color: 'var(--haze-color-text-muted)',\n            }}\n          >\n            Keyboard: <Kbd size='sm'>Tab</Kbd> reaches a cell,\n            <Kbd size='sm'>←</Kbd>\n            <Kbd size='sm'>↑</Kbd>\n            <Kbd size='sm'>↓</Kbd>\n            <Kbd size='sm'>→</Kbd> roam,\n            <Kbd size='sm'>Enter</Kbd> sorts a header\n          </span>\n        </div>\n\n        <DataTable\n          columns={columns}\n          data={rows}\n          getRowId={(row) => row.id}\n          sortable\n          size={density as 'sm' | 'md' | 'lg'}\n          toolbar={\n            <div\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: 'var(--haze-space-2)',\n                flexWrap: 'wrap',\n              }}\n            >\n              <Button size='sm' onClick={openCreate}>\n                New pipeline\n              </Button>\n              <Segmented\n                size='sm'\n                options={[\n                  { value: 'sm', label: 'S' },\n                  { value: 'md', label: 'M' },\n                  { value: 'lg', label: 'L' },\n                ]}\n                value={densityCtrl}\n                onChange={setDensity}\n                aria-label='Table density'\n              />\n            </div>\n          }\n        />\n      </main>\n\n      <Dialog\n        open={dialogOpenCtrl}\n        onClose={closeDialog}\n        title={editing ? 'Edit pipeline' : 'New pipeline'}\n      >\n        <PipelineForm\n          key={session}\n          pipeline={editing}\n          onCancel={closeDialog}\n          onSubmit={handleSubmit}\n        />\n      </Dialog>\n      <ConfirmDialog\n        open={confirmOpenCtrl}\n        title='Delete pipeline'\n        confirmText='Delete'\n        variant='danger'\n        onConfirm={confirmDelete}\n        onCancel={closeConfirm}\n        onClose={closeConfirm}\n      >\n        Delete {pendingDelete?.name}? Its collectors stop ingesting immediately —\n        there is no undo.\n      </ConfirmDialog>\n    </div>\n  );\n}\n\nexport default function CrudBlock() {\n  return (\n    <ToastContainer>\n      <CrudScreen />\n    </ToastContainer>\n  );\n}\n",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "dashboard-block",
+      "type": "registry:block",
+      "title": "Dashboard block (AppShell + Sidebar + Stat row + DataTable)",
+      "description": "SaaS admin starter: `AppShell` + `Sidebar` navigation, `Breadcrumb` trail, a `Stat` card row and a `DataTable` with toolbar strip (density `Segmented` + `dataTableToCsv` export), client-side pagination and column toggling.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "SaaS admin starter: `AppShell` + `Sidebar` navigation, `Breadcrumb` trail, a `Stat` card row and a `DataTable` with toolbar strip (density `Segmented` + `dataTableToCsv` export), client-side pagination and column toggling.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/dashboard-block\n```\n\nThe full-page source lands at `components/block/haze/dashboard-block.tsx` (via the `@block/` target placeholder from `components.json`) — vendored, so you own and edit it. Component imports are rewritten to the `haze-ui` npm package, which is installed automatically together with `react-use-control`.\n\nThe file imports the stylesheet of every component it renders (`haze-ui/css/tokens.css` + 21 component css files), so no extra stylesheet setup is needed.\n\n## Theming\n\nThis wrapper re-exports the 'lightTheme' (or 'darkTheme'), 'spacing' and\n'typography' classes from 'haze-ui' and imports 'haze-ui/css/tokens.css'.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nLive preview and source: https://wmzy.github.io/haze-ui/#/blocks — https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "blocks",
+        "dashboard",
+        "data-display"
+      ],
+      "dependencies": [
+        "haze-ui",
+        "react-use-control"
+      ],
+      "registryDependencies": [
+        "wmzy/haze-ui/app-shell",
+        "wmzy/haze-ui/sidebar",
+        "wmzy/haze-ui/tooltip",
+        "wmzy/haze-ui/stat",
+        "wmzy/haze-ui/data-table",
+        "wmzy/haze-ui/checkbox",
+        "wmzy/haze-ui/dropdown-menu",
+        "wmzy/haze-ui/empty",
+        "wmzy/haze-ui/input",
+        "wmzy/haze-ui/pagination",
+        "wmzy/haze-ui/skeleton",
+        "wmzy/haze-ui/table",
+        "wmzy/haze-ui/virtual-list",
+        "wmzy/haze-ui/breadcrumb",
+        "wmzy/haze-ui/button",
+        "wmzy/haze-ui/badge",
+        "wmzy/haze-ui/segmented",
+        "wmzy/haze-ui/select",
+        "wmzy/haze-ui/chip",
+        "wmzy/haze-ui/spinner",
+        "wmzy/haze-ui/visually-hidden"
+      ],
+      "files": [
+        {
+          "path": "components/block/haze/dashboard-block.tsx",
+          "content": "// haze-ui registry block — generated by scripts/generate-registry.mjs\n// from src/views/Blocks/blocks/DashboardBlock.tsx.\n//\n// Unlike the component items (thin re-export wrappers over the haze-ui npm\n// package), a block is VENDORED source: a full page you own and edit.\n// The component imports are rewritten from the docs site's '@/lib' alias\n// to the published 'haze-ui' package and every stylesheet of the page's\n// component closure is imported below, so the file is self-contained.\n// npm dependencies beyond haze-ui: react-use-control.\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap).\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/app-shell.css';\nimport 'haze-ui/css/badge.css';\nimport 'haze-ui/css/breadcrumb.css';\nimport 'haze-ui/css/button.css';\nimport 'haze-ui/css/checkbox.css';\nimport 'haze-ui/css/chip.css';\nimport 'haze-ui/css/data-table.css';\nimport 'haze-ui/css/dropdown-menu.css';\nimport 'haze-ui/css/empty.css';\nimport 'haze-ui/css/input.css';\nimport 'haze-ui/css/pagination.css';\nimport 'haze-ui/css/segmented.css';\nimport 'haze-ui/css/select.css';\nimport 'haze-ui/css/sidebar.css';\nimport 'haze-ui/css/skeleton.css';\nimport 'haze-ui/css/spinner.css';\nimport 'haze-ui/css/stat.css';\nimport 'haze-ui/css/table.css';\nimport 'haze-ui/css/tooltip.css';\nimport 'haze-ui/css/virtual-list.css';\nimport 'haze-ui/css/visually-hidden.css';\n\nimport type { DataTableColumnDef } from 'haze-ui';\n\nimport { useControl } from 'react-use-control';\n\nimport {\n  AppShell,\n  Badge,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  DataTable,\n  Option,\n  Segmented,\n  Select,\n  Sidebar,\n  SidebarGroup,\n  SidebarItem,\n  Stat,\n  StatGroup,\n} from 'haze-ui';\nimport { dataTableToCsv } from 'haze-ui';\n\n/*\n * Dashboard block: AppShell + Sidebar navigation, a Breadcrumb trail, a\n * Stat card row and a DataTable with the toolbar strip (density Segmented\n * + CSV export), client-side pagination and column toggling. Fictional\n * SaaS metrics — every visual value reads a --haze-* token so the block\n * re-themes with the site.\n */\n\ntype Plan = 'free' | 'pro' | 'enterprise';\ntype WorkspaceStatus = 'healthy' | 'trial' | 'at risk';\n\ntype WorkspaceRow = {\n  id: string;\n  name: string;\n  plan: Plan;\n  seats: number;\n  events: number;\n  mrr: number;\n  status: WorkspaceStatus;\n};\n\nconst WORKSPACES: WorkspaceRow[] = [\n  { id: 'w-101', name: 'Acme Robotics', plan: 'enterprise', seats: 42, events: 184_230, mrr: 1890, status: 'healthy' },\n  { id: 'w-102', name: 'Lumen Studio', plan: 'pro', seats: 12, events: 96_410, mrr: 480, status: 'healthy' },\n  { id: 'w-103', name: 'Ferrite Labs', plan: 'pro', seats: 9, events: 71_980, mrr: 360, status: 'at risk' },\n  { id: 'w-104', name: 'Harbor & Co', plan: 'free', seats: 3, events: 12_004, mrr: 0, status: 'trial' },\n  { id: 'w-105', name: 'Northwind Freight', plan: 'enterprise', seats: 65, events: 268_750, mrr: 2925, status: 'healthy' },\n  { id: 'w-106', name: 'Quanta Health', plan: 'pro', seats: 18, events: 122_866, mrr: 720, status: 'healthy' },\n  { id: 'w-107', name: 'Bright Meadow', plan: 'free', seats: 2, events: 8_312, mrr: 0, status: 'trial' },\n  { id: 'w-108', name: 'Kestrel Analytics', plan: 'pro', seats: 14, events: 101_540, mrr: 560, status: 'at risk' },\n  { id: 'w-109', name: 'Orbit Logistics', plan: 'enterprise', seats: 51, events: 210_390, mrr: 2295, status: 'healthy' },\n  { id: 'w-110', name: 'Pinewood Press', plan: 'free', seats: 5, events: 19_748, mrr: 0, status: 'trial' },\n  { id: 'w-111', name: 'Solstice Energy', plan: 'pro', seats: 21, events: 143_605, mrr: 840, status: 'healthy' },\n  { id: 'w-112', name: 'Umbra Games', plan: 'pro', seats: 11, events: 88_120, mrr: 440, status: 'at risk' },\n];\n\nconst planBadge = (plan: Plan) => {\n  const color = plan === 'enterprise' ? 'success' : plan === 'pro' ? 'info' : 'default';\n  return <Badge color={color}>{plan}</Badge>;\n};\n\nconst statusBadge = (status: WorkspaceStatus) => {\n  const color = status === 'healthy' ? 'success' : status === 'trial' ? 'default' : 'warning';\n  return <Badge color={color}>{status}</Badge>;\n};\n\nconst columns: DataTableColumnDef<WorkspaceRow>[] = [\n  { accessorKey: 'name', header: 'Workspace' },\n  { accessorKey: 'plan', header: 'Plan', cell: (info) => planBadge(info.getValue() as Plan) },\n  { accessorKey: 'seats', header: 'Seats' },\n  {\n    accessorKey: 'events',\n    header: 'Events / mo',\n    cell: (info) => (info.getValue() as number).toLocaleString('en-US'),\n  },\n  {\n    accessorKey: 'mrr',\n    header: 'MRR',\n    cell: (info) => `$${(info.getValue() as number).toLocaleString('en-US')}`,\n  },\n  { accessorKey: 'status', header: 'Status', cell: (info) => statusBadge(info.getValue() as WorkspaceStatus) },\n];\n\n/** Serialize the current rows through the table's own csv helper. */\nfunction exportCsv(): void {\n  const csv = dataTableToCsv(WORKSPACES, columns);\n  const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }));\n  const anchor = document.createElement('a');\n  anchor.href = url;\n  anchor.download = 'nimbus-workspaces.csv';\n  document.body.appendChild(anchor);\n  anchor.click();\n  anchor.remove();\n  URL.revokeObjectURL(url);\n}\n\nfunction DashboardSidebar() {\n  return (\n    <Sidebar>\n      <SidebarGroup title='Workspace'>\n        <SidebarItem active>Overview</SidebarItem>\n        <SidebarItem>Events</SidebarItem>\n        <SidebarItem>Funnels</SidebarItem>\n        <SidebarItem>Alerts</SidebarItem>\n      </SidebarGroup>\n      <SidebarGroup title='Account'>\n        <SidebarItem>Billing</SidebarItem>\n        <SidebarItem>Members</SidebarItem>\n        <SidebarItem>Settings</SidebarItem>\n      </SidebarGroup>\n    </Sidebar>\n  );\n}\n\nexport default function DashboardBlock() {\n  // Density switcher: one control feeds the Segmented and the DataTable\n  // `size` prop (the ControlOrValue idiom — Segmented speaks plain strings).\n  const [density, setDensity, densityCtrl] = useControl(undefined, 'md');\n\n  return (\n    <div\n      data-slot='dashboard-block'\n      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}\n    >\n      <AppShell\n        header={\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: 'var(--haze-space-3)',\n              padding: '0 var(--haze-space-3)',\n            }}\n          >\n            <strong style={{ color: 'var(--haze-color-primary)' }}>Nimbus Console</strong>\n            <span style={{ flex: 1 }} />\n            <Select size='sm' defaultValue='acme' aria-label='Workspace'>\n              <Option value='acme'>acme-robotics</Option>\n              <Option value='lumen'>lumen-studio</Option>\n              <Option value='ferrite'>ferrite-labs</Option>\n            </Select>\n            <Badge color='info'>ND</Badge>\n          </div>\n        }\n        sidebar={<DashboardSidebar />}\n      >\n        <div\n          data-slot='dashboard-content'\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 'var(--haze-space-4)',\n            padding: 'var(--haze-space-4)',\n          }}\n        >\n          <Breadcrumb>\n            <BreadcrumbItem href='#dashboard'>Nimbus</BreadcrumbItem>\n            <BreadcrumbItem href='#dashboard'>Analytics</BreadcrumbItem>\n            <BreadcrumbItem>Overview</BreadcrumbItem>\n          </Breadcrumb>\n\n          <StatGroup data-slot='dashboard-stats'>\n            <Stat title='MRR' value='$12,610' trend='up' trendValue='+12.4%' description='vs last month' />\n            <Stat title='Active workspaces' value='1,284' trend='up' trendValue='+38' description='rolling 30 days' />\n            <Stat title='Avg. session' value='7m 32s' trend='down' trendValue='-3.1%' description='all plans' />\n            <Stat title='Churn' value='2.1%' trend='neutral' description='target under 3%' />\n          </StatGroup>\n\n          <DataTable\n            columns={columns}\n            data={WORKSPACES}\n            getRowId={(row) => row.id}\n            size={density as 'sm' | 'md' | 'lg'}\n            pageSize={6}\n            columnToggle\n            toolbar={\n              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--haze-space-2)' }}>\n                <Segmented\n                  size='sm'\n                  options={[\n                    { value: 'sm', label: 'S' },\n                    { value: 'md', label: 'M' },\n                    { value: 'lg', label: 'L' },\n                  ]}\n                  value={densityCtrl}\n                  onChange={setDensity}\n                  aria-label='Table density'\n                />\n                <Button size='sm' variant='outline' onClick={exportCsv}>\n                  Export CSV\n                </Button>\n              </div>\n            }\n          />\n        </div>\n      </AppShell>\n    </div>\n  );\n}\n",
+          "type": "registry:block"
+        }
+      ]
+    },
     {
       "name": "data-table",
       "type": "registry:ui",
@@ -952,7 +1131,28 @@
       "files": [
         {
           "path": "components/haze/data-table.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { DataTable, dataTableSum, dataTableAvg, dataTableCount, dataTableToCsv } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/data-table.css';\nimport 'haze-ui/css/checkbox.css';\nimport 'haze-ui/css/dropdown-menu.css';\nimport 'haze-ui/css/empty.css';\nimport 'haze-ui/css/input.css';\nimport 'haze-ui/css/pagination.css';\nimport 'haze-ui/css/skeleton.css';\nimport 'haze-ui/css/table.css';\nimport 'haze-ui/css/virtual-list.css';\n\nexport { DataTable, dataTableSum, dataTableAvg, dataTableCount, dataTableToCsv };\nexport type { DataTableProps, DataTableColumnDef, DataTableColumnMeta, DataTableVirtualized, DataTableSummary, DataTableSummaryCell, DataTableCellEditorProps, DataTableCsvOptions } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { DataTable, dataTableSum, dataTableAvg, dataTableCount, dataTableToCsv } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/data-table.css';\nimport 'haze-ui/css/button.css';\nimport 'haze-ui/css/checkbox.css';\nimport 'haze-ui/css/dropdown-menu.css';\nimport 'haze-ui/css/empty.css';\nimport 'haze-ui/css/input.css';\nimport 'haze-ui/css/pagination.css';\nimport 'haze-ui/css/popover.css';\nimport 'haze-ui/css/skeleton.css';\nimport 'haze-ui/css/spinner.css';\nimport 'haze-ui/css/table.css';\nimport 'haze-ui/css/virtual-list.css';\nimport 'haze-ui/css/visually-hidden.css';\n\nexport { DataTable, dataTableSum, dataTableAvg, dataTableCount, dataTableToCsv };\nexport type { DataTableProps, DataTableClassNames, DataTableColumnDef, DataTableColumnMeta, DataTableVirtualized, DataTableSummary, DataTableSummaryCell, DataTableCellEditorProps, DataTableCsvOptions, DataTableFiltersState } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "date-field",
+      "type": "registry:ui",
+      "title": "DateField / DateFieldCore",
+      "description": "Segmented date input: year/month/day spinbuttons typed directly (`YYYY-MM-DD` value); `DateFieldCore` is the headless core.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Segmented date input: year/month/day spinbuttons typed directly (`YYYY-MM-DD` value); `DateFieldCore` is the headless core.\n\nExports: `DateField`, `DateFieldCore`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/date-field\n```\n\nThe wrapper lands at `components/ui/haze/date-field.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/date-field.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "form"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/date-field.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { DateField, DateFieldCore } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/date-field.css';\nimport 'haze-ui/css/calendar.css';\n\nexport { DateField, DateFieldCore };\nexport type { DateFieldProps, DateFieldCoreProps, DatePlaceholder, DateLabels } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -1141,7 +1341,7 @@
       "files": [
         {
           "path": "components/haze/dropdown-menu.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuGroup, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/dropdown-menu.css';\n\nexport { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuGroup, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent };\nexport type { DropdownMenuProps, DropdownMenuDataItem, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuGroupProps, DropdownMenuSeparatorProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, DropdownMenuHandle } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuGroup, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/dropdown-menu.css';\n\nexport { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuGroup, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent };\nexport type { DropdownMenuProps, DropdownMenuClassNames, DropdownMenuDataItem, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuGroupProps, DropdownMenuSeparatorProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, DropdownMenuHandle } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -1188,6 +1388,27 @@
         }
       ]
     },
+    {
+      "name": "error-boundary",
+      "type": "registry:ui",
+      "title": "ErrorBoundary",
+      "description": "Render-error boundary: class component catching subtree throws, rendering a fallback (`fallback` node or render prop) with a reset callback; `resetKeys` shallow-change resets.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Render-error boundary: class component catching subtree throws, rendering a fallback (`fallback` node or render prop) with a reset callback; `resetKeys` shallow-change resets.\n\nExports: `ErrorBoundary`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/error-boundary\n```\n\nThe wrapper lands at `components/ui/haze/error-boundary.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/error-boundary.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "feedback"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/error-boundary.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { ErrorBoundary } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/error-boundary.css';\n\nexport { ErrorBoundary };\nexport type { ErrorBoundaryProps, FallbackRenderArgs } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "fieldset",
       "type": "registry:ui",
@@ -1296,10 +1517,10 @@
     {
       "name": "form",
       "type": "registry:ui",
-      "title": "FormItem / FormList / FormProvider / useFormContext / useFieldArray / useFieldArrayItem / useWatch / trigger / setFocus / setServerErrors / setValue / getValue / getValues / reset / hasStandardProps / standardSchemaFormValidator / standardSchemaResolver / zodResolver",
+      "title": "Form / FormItem / FormList / FormProvider / useFormContext / useFieldArray / useFieldArrayItem / useWatch / useValue / useValues / useForm / createForm / trigger / setFocus / setServerErrors / setValue / getValue / getValues / reset / hasStandardProps / standardSchemaFormValidator / standardSchemaResolver / zodResolver",
       "description": "react-f0rm field wrapper adding label, error and aria wiring to controlled cores.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "react-f0rm field wrapper adding label, error and aria wiring to controlled cores.\n\nExports: `FormItem`, `FormList`, `FormProvider`, `useFormContext`, `useFieldArray`, `useFieldArrayItem`, `useWatch`, `trigger`, `setFocus`, `setServerErrors`, `setValue`, `getValue`, `getValues`, `reset`, `hasStandardProps`, `standardSchemaFormValidator`, `standardSchemaResolver`, `zodResolver`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/form\n```\n\nThe wrapper lands at `components/ui/haze/form.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/form.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "react-f0rm field wrapper adding label, error and aria wiring to controlled cores.\n\nExports: `Form`, `FormItem`, `FormList`, `FormProvider`, `useFormContext`, `useFieldArray`, `useFieldArrayItem`, `useWatch`, `useValue`, `useValues`, `useForm`, `createForm`, `trigger`, `setFocus`, `setServerErrors`, `setValue`, `getValue`, `getValues`, `reset`, `hasStandardProps`, `standardSchemaFormValidator`, `standardSchemaResolver`, `zodResolver`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/form\n```\n\nThe wrapper lands at `components/ui/haze/form.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/form.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "form"
       ],
@@ -1309,7 +1530,7 @@
       "files": [
         {
           "path": "components/haze/form.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { FormItem, FormList, FormProvider, useFormContext, useFieldArray, useFieldArrayItem, useWatch, trigger, setFocus, setServerErrors, setValue, getValue, getValues, reset, hasStandardProps, standardSchemaFormValidator, standardSchemaResolver, zodResolver } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/form.css';\n\nexport { FormItem, FormList, FormProvider, useFormContext, useFieldArray, useFieldArrayItem, useWatch, trigger, setFocus, setServerErrors, setValue, getValue, getValues, reset, hasStandardProps, standardSchemaFormValidator, standardSchemaResolver, zodResolver };\nexport type { FieldValidator, FormItemAsProps, FormItemBinding, FormItemOwnProps, FormItemProps, FormItemRawElement, FormItemRawElementBinding, FormInstance, FormListProps, FormListBinding, FormListField, PathValueOf, StandardSchemaV1 } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Form, FormItem, FormList, FormProvider, useFormContext, useFieldArray, useFieldArrayItem, useWatch, useValue, useValues, useForm, createForm, trigger, setFocus, setServerErrors, setValue, getValue, getValues, reset, hasStandardProps, standardSchemaFormValidator, standardSchemaResolver, zodResolver } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/form.css';\n\nexport { Form, FormItem, FormList, FormProvider, useFormContext, useFieldArray, useFieldArrayItem, useWatch, useValue, useValues, useForm, createForm, trigger, setFocus, setServerErrors, setValue, getValue, getValues, reset, hasStandardProps, standardSchemaFormValidator, standardSchemaResolver, zodResolver };\nexport type { FieldValidator, FormItemAsProps, FormItemBinding, FormItemOwnProps, FormItemProps, FormItemClassNames, FormItemRawElement, FormItemRawElementBinding, FormInstance, FormListProps, FormListBinding, FormListField, PathValueOf, StandardSchemaV1 } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -1335,6 +1556,27 @@
         }
       ]
     },
+    {
+      "name": "heatmap",
+      "type": "registry:ui",
+      "title": "Heatmap",
+      "description": "GitHub-style activity calendar: week × weekday grid of squares, intensity-binned by value (levels prop), theme-aware color-mix scale, label props for all i18n.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "GitHub-style activity calendar: week × weekday grid of squares, intensity-binned by value (levels prop), theme-aware color-mix scale, label props for all i18n.\n\nExports: `Heatmap`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/heatmap\n```\n\nThe wrapper lands at `components/ui/haze/heatmap.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/heatmap.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "data-display"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/heatmap.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Heatmap } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/heatmap.css';\n\nexport { Heatmap };\nexport type { HeatmapProps, HeatmapClassNames, HeatmapDatum } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "hover-card",
       "type": "registry:ui",
@@ -1380,10 +1622,10 @@
     {
       "name": "image",
       "type": "registry:ui",
-      "title": "Image",
-      "description": "Image with fallback and `aspectRatio`/`objectFit` control.",
+      "title": "Image / ImagePreviewGroup",
+      "description": "Image with fallback, `aspectRatio`/`objectFit` control and click-to-preview overlay; `ImagePreviewGroup` wraps child images in a shared gallery lightbox (arrows, counter, thumbnail strip).",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Image with fallback and `aspectRatio`/`objectFit` control.\n\nExports: `Image`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/image\n```\n\nThe wrapper lands at `components/ui/haze/image.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/image.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "Image with fallback, `aspectRatio`/`objectFit` control and click-to-preview overlay; `ImagePreviewGroup` wraps child images in a shared gallery lightbox (arrows, counter, thumbnail strip).\n\nExports: `Image`, `ImagePreviewGroup`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/image\n```\n\nThe wrapper lands at `components/ui/haze/image.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/image.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "data-display"
       ],
@@ -1393,7 +1635,28 @@
       "files": [
         {
           "path": "components/haze/image.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Image } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/image.css';\n\nexport { Image };\nexport type { ImageProps, ImagePreviewConfig } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Image, ImagePreviewGroup } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/image.css';\n\nexport { Image, ImagePreviewGroup };\nexport type { ImageProps, ImagePreviewConfig, ImagePreviewGroupProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "image-crop",
+      "type": "registry:ui",
+      "title": "ImageCrop",
+      "description": "Interactive image cropper pairing with Upload: controllable normalized CropRect value, aspect lock, circle avatar mask, pointer drag with corner handles, full keyboard operation (arrows move, Shift+arrows resize) and a getCroppedCanvas ref API.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Interactive image cropper pairing with Upload: controllable normalized CropRect value, aspect lock, circle avatar mask, pointer drag with corner handles, full keyboard operation (arrows move, Shift+arrows resize) and a getCroppedCanvas ref API.\n\nExports: `ImageCrop`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/image-crop\n```\n\nThe wrapper lands at `components/ui/haze/image-crop.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/image-crop.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "form"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/image-crop.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { ImageCrop } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/image-crop.css';\n\nexport { ImageCrop };\nexport type { ImageCropHandle, ImageCropProps, CropRect } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -1419,6 +1682,27 @@
         }
       ]
     },
+    {
+      "name": "inline-citation",
+      "type": "registry:ui",
+      "title": "InlineCitation",
+      "description": "Inline superscript citation marker that opens a floating source card with title, snippet and optional outbound link.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Inline superscript citation marker that opens a floating source card with title, snippet and optional outbound link.\n\nExports: `InlineCitation`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/inline-citation\n```\n\nThe wrapper lands at `components/ui/haze/inline-citation.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/inline-citation.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "agent"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/inline-citation.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { InlineCitation } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/inline-citation.css';\n\nexport { InlineCitation };\nexport type { InlineCitationProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "inline-completion",
       "type": "registry:ui",
@@ -1482,6 +1766,27 @@
         }
       ]
     },
+    {
+      "name": "input-group",
+      "type": "registry:ui",
+      "title": "InputGroup / InputGroupAddon / useInputGroup",
+      "description": "Field cluster: prefix/suffix addons (icon, text, button) merged with Input/Select into one attached control.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Field cluster: prefix/suffix addons (icon, text, button) merged with Input/Select into one attached control.\n\nExports: `InputGroup`, `InputGroupAddon`, `useInputGroup`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/input-group\n```\n\nThe wrapper lands at `components/ui/haze/input-group.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/input-group.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "form"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/input-group.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { InputGroup, InputGroupAddon, useInputGroup } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/input-group.css';\n\nexport { InputGroup, InputGroupAddon, useInputGroup };\nexport type { InputGroupProps, InputGroupClassNames, InputGroupAddonProps, InputGroupValue } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "json-view",
       "type": "registry:ui",
@@ -1587,6 +1892,40 @@
         }
       ]
     },
+    {
+      "name": "login-block",
+      "type": "registry:block",
+      "title": "Login block (brand panel + Card form loop, zod-validated)",
+      "description": "Full-page login: brand side panel plus a centered Card running the complete form loop — `useForm` + `Form` + `FormItem` over `InputCore`/`PasswordInputCore`/`CheckboxCore`, validated by one zod schema through `standardSchemaFormValidator`.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Full-page login: brand side panel plus a centered Card running the complete form loop — `useForm` + `Form` + `FormItem` over `InputCore`/`PasswordInputCore`/`CheckboxCore`, validated by one zod schema through `standardSchemaFormValidator`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/login-block\n```\n\nThe full-page source lands at `components/block/haze/login-block.tsx` (via the `@block/` target placeholder from `components.json`) — vendored, so you own and edit it. Component imports are rewritten to the `haze-ui` npm package, which is installed automatically together with `zod` and `react-use-control`.\n\nThe file imports the stylesheet of every component it renders (`haze-ui/css/tokens.css` + 7 component css files), so no extra stylesheet setup is needed.\n\n## Theming\n\nThis wrapper re-exports the 'lightTheme' (or 'darkTheme'), 'spacing' and\n'typography' classes from 'haze-ui' and imports 'haze-ui/css/tokens.css'.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nLive preview and source: https://wmzy.github.io/haze-ui/#/blocks — https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "blocks",
+        "authentication",
+        "form"
+      ],
+      "dependencies": [
+        "haze-ui",
+        "zod",
+        "react-use-control"
+      ],
+      "registryDependencies": [
+        "wmzy/haze-ui/card",
+        "wmzy/haze-ui/form",
+        "wmzy/haze-ui/input",
+        "wmzy/haze-ui/password-input",
+        "wmzy/haze-ui/checkbox",
+        "wmzy/haze-ui/button",
+        "wmzy/haze-ui/alert"
+      ],
+      "files": [
+        {
+          "path": "components/block/haze/login-block.tsx",
+          "content": "// haze-ui registry block — generated by scripts/generate-registry.mjs\n// from src/views/Blocks/blocks/LoginBlock.tsx.\n//\n// Unlike the component items (thin re-export wrappers over the haze-ui npm\n// package), a block is VENDORED source: a full page you own and edit.\n// The component imports are rewritten from the docs site's '@/lib' alias\n// to the published 'haze-ui' package and every stylesheet of the page's\n// component closure is imported below, so the file is self-contained.\n// npm dependencies beyond haze-ui: zod, react-use-control.\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap).\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/alert.css';\nimport 'haze-ui/css/button.css';\nimport 'haze-ui/css/card.css';\nimport 'haze-ui/css/checkbox.css';\nimport 'haze-ui/css/form.css';\nimport 'haze-ui/css/input.css';\nimport 'haze-ui/css/password-input.css';\n\nimport { z } from 'zod';\nimport { useControl } from 'react-use-control';\n\nimport {\n  Alert,\n  Button,\n  Card,\n  CheckboxCore,\n  Form,\n  FormItem,\n  InputCore,\n  PasswordInputCore,\n  useForm,\n  standardSchemaFormValidator,\n} from 'haze-ui';\n\n/*\n * Login block: a brand side panel plus a centered Card holding a complete\n * form loop — useForm + Form + FormItem over InputCore / PasswordInputCore\n * / CheckboxCore, validated by one zod schema through\n * standardSchemaFormValidator (errors land per FormItem, no per-field\n * validate needed). All layout glue is inline styles over --haze-* tokens\n * so the block re-themes for free.\n */\n\ntype LoginValues = {\n  email: string;\n  password: string;\n  remember: boolean;\n};\n\nconst loginSchema = z.object({\n  email: z.email('Enter a valid email address'),\n  password: z.string().min(8, 'Password must be at least 8 characters'),\n  remember: z.boolean(),\n});\n\nconst loginValidator = standardSchemaFormValidator<LoginValues>(loginSchema);\n\nfunction LoginForm() {\n  const form = useForm<LoginValues>({\n    initialValues: { email: '', password: '', remember: true },\n    validate: loginValidator,\n    validateDeps: ['email', 'password'],\n  });\n  // Signed-in confirmation banner — demo-local display state.\n  const [signedIn, setSignedIn] = useControl(undefined, false);\n\n  return (\n    <Form form={form} onValidSubmit={() => setSignedIn(true)}>\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 'var(--haze-space-4)',\n        }}\n      >\n        {signedIn && (\n          <Alert color='success'>Signed in — the schema passed for this workspace.</Alert>\n        )}\n        <FormItem\n          form={form}\n          name='email'\n          label='Work email'\n          rules={{ required: true }}\n          input={InputCore}\n          type='email'\n          placeholder='you@company.com'\n        />\n        <FormItem\n          form={form}\n          name='password'\n          label='Password'\n          rules={{ required: true }}\n          input={PasswordInputCore}\n          placeholder='At least 8 characters'\n        />\n        <FormItem\n          form={form}\n          name='remember'\n          label='Keep me signed in on this device'\n          input={CheckboxCore}\n          valueToProps={(checked) => ({ checked: !!checked })}\n        />\n        {/* Button's native `type` is pinned to 'button' — submit through the\n            owning form so react-f0rm's validation chain runs first. */}\n        <Button\n          style={{ width: '100%' }}\n          onClick={(e) => {\n            e.currentTarget.form?.requestSubmit();\n          }}\n        >\n          Sign in\n        </Button>\n      </div>\n    </Form>\n  );\n}\n\nexport default function LoginBlock() {\n  return (\n    <div\n      data-slot='login-block'\n      style={{\n        display: 'flex',\n        height: '100%',\n        minHeight: '420px',\n        fontFamily: 'var(--haze-font-sans)',\n        color: 'var(--haze-color-text)',\n      }}\n    >\n      {/* Brand panel — token-only surface so it flips with the theme. */}\n      <div\n        data-slot='login-brand'\n        style={{\n          flex: '1 1 55%',\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n          padding: 'var(--haze-space-8)',\n          background: 'var(--haze-color-bg-subtle)',\n          borderInlineEnd: '1px solid var(--haze-color-border)',\n        }}\n      >\n        <strong style={{ color: 'var(--haze-color-primary)', fontSize: 'var(--haze-text-xl)' }}>\n          Nimbus\n        </strong>\n        <div>\n          <h2\n            style={{\n              margin: '0 0 var(--haze-space-2)',\n              fontSize: 'var(--haze-text-2xl)',\n              lineHeight: 'var(--haze-leading-tight)',\n              color: 'var(--haze-color-text)',\n            }}\n          >\n            Analytics your whole team actually reads.\n          </h2>\n          <p\n            style={{\n              margin: 0,\n              fontSize: 'var(--haze-text-sm)',\n              color: 'var(--haze-color-text-secondary)',\n            }}\n          >\n            1,284 workspaces ship with Nimbus — from first event to board deck.\n          </p>\n        </div>\n        <span style={{ fontSize: 'var(--haze-text-xs)', color: 'var(--haze-color-text-muted)' }}>\n          SOC 2 Type II · GDPR · 99.98% uptime\n        </span>\n      </div>\n\n      {/* Form panel — the Card centers the fields in the remaining width. */}\n      <div\n        data-slot='login-panel'\n        style={{\n          flex: '1 1 45%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          padding: 'var(--haze-space-6)',\n          background: 'var(--haze-color-bg)',\n        }}\n      >\n        <div style={{ width: 'min(360px, 100%)' }}>\n          <Card variant='outlined'>\n            <h2 style={{ margin: '0 0 var(--haze-space-1)', fontSize: 'var(--haze-text-lg)' }}>\n              Welcome back\n            </h2>\n            <p\n              style={{\n                margin: '0 0 var(--haze-space-4)',\n                fontSize: 'var(--haze-text-sm)',\n                color: 'var(--haze-color-text-secondary)',\n              }}\n            >\n              Sign in to your Nimbus workspace.\n            </p>\n            <LoginForm />\n            <p\n              style={{\n                margin: 'var(--haze-space-3) 0 0',\n                fontSize: 'var(--haze-text-xs)',\n                color: 'var(--haze-color-text-muted)',\n              }}\n            >\n              New to Nimbus? <a href='#login'>Create a workspace</a>\n            </p>\n          </Card>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+          "type": "registry:block"
+        }
+      ]
+    },
     {
       "name": "mark",
       "type": "registry:ui",
@@ -1687,7 +2026,28 @@
       "files": [
         {
           "path": "components/haze/menu.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Menu, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuGroup, MenuDivider, MenuSub, MenuSubTrigger, MenuSubContent } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/menu.css';\n\nexport { Menu, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuGroup, MenuDivider, MenuSub, MenuSubTrigger, MenuSubContent };\nexport type { MenuProps, MenuDataItem, MenuItemProps, MenuCheckboxItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuGroupProps, MenuSubProps, MenuSubTriggerProps, MenuSubContentProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Menu, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuGroup, MenuDivider, MenuSub, MenuSubTrigger, MenuSubContent } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/menu.css';\nimport 'haze-ui/css/virtual-list.css';\n\nexport { Menu, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuGroup, MenuDivider, MenuSub, MenuSubTrigger, MenuSubContent };\nexport type { MenuProps, MenuClassNames, MenuDataItem, MenuItemProps, MenuCheckboxItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuGroupProps, MenuSubProps, MenuSubTriggerProps, MenuSubContentProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "meter",
+      "type": "registry:ui",
+      "title": "Meter / meterTrackSizes",
+      "description": "Read-only semantic gauge: value normalized over min/max, threshold bands recolor track and bar, visible label + aria-labelledby, showValue readout, three track sizes.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Read-only semantic gauge: value normalized over min/max, threshold bands recolor track and bar, visible label + aria-labelledby, showValue readout, three track sizes.\n\nExports: `Meter`, `meterTrackSizes`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/meter\n```\n\nThe wrapper lands at `components/ui/haze/meter.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/meter.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "data-display"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/meter.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Meter, meterTrackSizes } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/meter.css';\n\nexport { Meter, meterTrackSizes };\nexport type { MeterProps, MeterOwnProps, MeterClassNames, MeterThreshold, MeterTone } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -1734,13 +2094,34 @@
         }
       ]
     },
+    {
+      "name": "navigation-menu",
+      "type": "registry:ui",
+      "title": "NavigationMenu / NavigationMenuList / NavigationMenuItem / NavigationMenuTrigger / NavigationMenuContent",
+      "description": "Hover mega-menu navigation bar: triggers open large content panels (link columns, card grids — any ReactNode) after an intent dwell with a pointer grace period; controllable `activeValue`, Escape closes, arrows traverse triggers.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Hover mega-menu navigation bar: triggers open large content panels (link columns, card grids — any ReactNode) after an intent dwell with a pointer grace period; controllable `activeValue`, Escape closes, arrows traverse triggers.\n\nExports: `NavigationMenu`, `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuTrigger`, `NavigationMenuContent`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/navigation-menu\n```\n\nThe wrapper lands at `components/ui/haze/navigation-menu.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/navigation-menu.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "navigation"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/navigation-menu.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/navigation-menu.css';\n\nexport { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent };\nexport type { NavigationMenuProps, NavigationMenuClassNames, NavigationMenuListProps, NavigationMenuItemProps, NavigationMenuTriggerProps, NavigationMenuContentProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "number-input",
       "type": "registry:ui",
-      "title": "NumberInput / NumberInputCore",
+      "title": "NumberInput / NumberInputCore / inputSizes / btnSizes",
       "description": "Numeric input with `min`/`max`/`step`.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Numeric input with `min`/`max`/`step`.\n\nExports: `NumberInput`, `NumberInputCore`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/number-input\n```\n\nThe wrapper lands at `components/ui/haze/number-input.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/number-input.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "Numeric input with `min`/`max`/`step`.\n\nExports: `NumberInput`, `NumberInputCore`, `inputSizes`, `btnSizes`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/number-input\n```\n\nThe wrapper lands at `components/ui/haze/number-input.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/number-input.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "form"
       ],
@@ -1750,7 +2131,7 @@
       "files": [
         {
           "path": "components/haze/number-input.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { NumberInput, NumberInputCore } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/number-input.css';\n\nexport { NumberInput, NumberInputCore };\nexport type { NumberInputProps, NumberInputCoreProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { NumberInput, NumberInputCore, inputSizes, btnSizes } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/number-input.css';\n\nexport { NumberInput, NumberInputCore, inputSizes, btnSizes };\nexport type { NumberInputProps, NumberInputCoreProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -1818,6 +2199,69 @@
         }
       ]
     },
+    {
+      "name": "phone-input",
+      "type": "registry:ui",
+      "title": "PhoneInput / isValidPhone",
+      "description": "International phone input backed by libphonenumber-js: country select joined seamlessly to the number field, E.164-ish value, `isValidPhone()` pure helper.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "International phone input backed by libphonenumber-js: country select joined seamlessly to the number field, E.164-ish value, `isValidPhone()` pure helper.\n\nExports: `PhoneInput`, `isValidPhone`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/phone-input\n```\n\nThe wrapper lands at `components/ui/haze/phone-input.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/phone-input.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "form"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/phone-input.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { PhoneInput, isValidPhone } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/phone-input.css';\nimport 'haze-ui/css/chip.css';\nimport 'haze-ui/css/input.css';\nimport 'haze-ui/css/select.css';\nimport 'haze-ui/css/spinner.css';\nimport 'haze-ui/css/virtual-list.css';\nimport 'haze-ui/css/visually-hidden.css';\n\nexport { PhoneInput, isValidPhone };\nexport type { PhoneInputProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "plan",
+      "type": "registry:ui",
+      "title": "Plan / PlanItem",
+      "description": "Agent plan and progress display: `Plan` + `Plan.Item` step list whose statuses drive an auto progress bar and summary.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Agent plan and progress display: `Plan` + `Plan.Item` step list whose statuses drive an auto progress bar and summary.\n\nExports: `Plan`, `PlanItem`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/plan\n```\n\nThe wrapper lands at `components/ui/haze/plan.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/plan.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "agent"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/plan.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Plan, PlanItem } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/plan.css';\n\nexport { Plan, PlanItem };\nexport type { PlanProps, PlanItemProps, PlanStatus } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "popconfirm",
+      "type": "registry:ui",
+      "title": "Popconfirm",
+      "description": "Anchored confirmation bubble with confirm/cancel actions and async busy support.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Anchored confirmation bubble with confirm/cancel actions and async busy support.\n\nExports: `Popconfirm`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/popconfirm\n```\n\nThe wrapper lands at `components/ui/haze/popconfirm.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/popconfirm.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "overlay"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/popconfirm.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Popconfirm } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/popconfirm.css';\nimport 'haze-ui/css/button.css';\nimport 'haze-ui/css/spinner.css';\n\nexport { Popconfirm };\nexport type { PopconfirmProps, PopconfirmHandle, PopconfirmPlacement } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "popover",
       "type": "registry:ui",
@@ -1842,10 +2286,10 @@
     {
       "name": "progress",
       "type": "registry:ui",
-      "title": "Progress",
+      "title": "Progress / barSizes / circleSizes",
       "description": "Progress bar or circle driven by a percentage `value`.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Progress bar or circle driven by a percentage `value`.\n\nExports: `Progress`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/progress\n```\n\nThe wrapper lands at `components/ui/haze/progress.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/progress.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "Progress bar or circle driven by a percentage `value`.\n\nExports: `Progress`, `barSizes`, `circleSizes`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/progress\n```\n\nThe wrapper lands at `components/ui/haze/progress.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/progress.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "data-display"
       ],
@@ -1855,7 +2299,7 @@
       "files": [
         {
           "path": "components/haze/progress.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Progress } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/progress.css';\n\nexport { Progress };\nexport type { ProgressProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Progress, barSizes, circleSizes } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/progress.css';\n\nexport { Progress, barSizes, circleSizes };\nexport type { ProgressProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -1881,6 +2325,27 @@
         }
       ]
     },
+    {
+      "name": "pull-to-refresh",
+      "type": "registry:ui",
+      "title": "PullToRefresh",
+      "description": "Mobile pull-to-refresh gesture wrapper: pointer/touch state machine (idle → pulling → ready → refreshing) with damped pull, scroll-edge canRefresh gate and a promise-gated spinner head.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Mobile pull-to-refresh gesture wrapper: pointer/touch state machine (idle → pulling → ready → refreshing) with damped pull, scroll-edge canRefresh gate and a promise-gated spinner head.\n\nExports: `PullToRefresh`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/pull-to-refresh\n```\n\nThe wrapper lands at `components/ui/haze/pull-to-refresh.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/pull-to-refresh.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "utilities"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/pull-to-refresh.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { PullToRefresh } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/pull-to-refresh.css';\nimport 'haze-ui/css/spinner.css';\n\nexport { PullToRefresh };\nexport type { PullToRefreshProps, PullToRefreshPhase, PullToRefreshIndicatorInfo } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "qr-code",
       "type": "registry:ui",
@@ -1902,6 +2367,27 @@
         }
       ]
     },
+    {
+      "name": "queue",
+      "type": "registry:ui",
+      "title": "Queue / QueueItem",
+      "description": "Queue of pending agent actions or messages (`Queue` + `Queue.Item`) with queued/sending/failed status and optional per-item removal.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Queue of pending agent actions or messages (`Queue` + `Queue.Item`) with queued/sending/failed status and optional per-item removal.\n\nExports: `Queue`, `QueueItem`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/queue\n```\n\nThe wrapper lands at `components/ui/haze/queue.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/queue.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "agent"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/queue.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Queue, QueueItem } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/queue.css';\nimport 'haze-ui/css/spinner.css';\n\nexport { Queue, QueueItem };\nexport type { QueueProps, QueueItemProps, QueueStatus } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "radio",
       "type": "registry:ui",
@@ -1947,10 +2433,10 @@
     {
       "name": "resizable",
       "type": "registry:ui",
-      "title": "ResizableGroup / ResizablePanel / ResizableHandle / SplitterGroup / SplitterPanel / SplitterHandle",
-      "description": "Split-pane group with draggable dividers, horizontal or vertical; also exported as `SplitterGroup`/`SplitterPanel`/`SplitterHandle` (AntD-style naming).",
+      "title": "ResizableGroup / ResizablePanel / ResizableHandle",
+      "description": "Split-pane group with draggable dividers, horizontal or vertical; px sizing per panel with `onResizeCommit` for persistence.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Split-pane group with draggable dividers, horizontal or vertical; also exported as `SplitterGroup`/`SplitterPanel`/`SplitterHandle` (AntD-style naming).\n\nExports: `ResizableGroup`, `ResizablePanel`, `ResizableHandle`, `SplitterGroup`, `SplitterPanel`, `SplitterHandle`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/resizable\n```\n\nThe wrapper lands at `components/ui/haze/resizable.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/resizable.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "Split-pane group with draggable dividers, horizontal or vertical; px sizing per panel with `onResizeCommit` for persistence.\n\nExports: `ResizableGroup`, `ResizablePanel`, `ResizableHandle`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/resizable\n```\n\nThe wrapper lands at `components/ui/haze/resizable.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/resizable.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "layout"
       ],
@@ -1960,7 +2446,7 @@
       "files": [
         {
           "path": "components/haze/resizable.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { ResizableGroup, ResizablePanel, ResizableHandle, SplitterGroup, SplitterPanel, SplitterHandle } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/resizable.css';\n\nexport { ResizableGroup, ResizablePanel, ResizableHandle, SplitterGroup, SplitterPanel, SplitterHandle };\nexport type { ResizableGroupProps, ResizablePanelProps, ResizableHandleProps, SplitterGroupProps, SplitterPanelProps, SplitterHandleProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { ResizableGroup, ResizablePanel, ResizableHandle } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/resizable.css';\n\nexport { ResizableGroup, ResizablePanel, ResizableHandle };\nexport type { ResizableGroupProps, ResizablePanelProps, ResizableHandleProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -1986,13 +2472,55 @@
         }
       ]
     },
+    {
+      "name": "rich-text-editor",
+      "type": "registry:ui",
+      "title": "RichTextEditor",
+      "description": "Tiptap-powered rich text editor with a built-in formatting toolbar and controllable HTML `value`.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Tiptap-powered rich text editor with a built-in formatting toolbar and controllable HTML `value`.\n\nExports: `RichTextEditor`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/rich-text-editor\n```\n\nThe wrapper lands at `components/ui/haze/rich-text-editor.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/rich-text-editor.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "form"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/rich-text-editor.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { RichTextEditor } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/rich-text-editor.css';\nimport 'haze-ui/css/button.css';\nimport 'haze-ui/css/toolbar.css';\n\nexport { RichTextEditor };\nexport type { RichTextEditorProps, RichTextEditorHandle } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "schedule",
+      "type": "registry:ui",
+      "title": "Schedule",
+      "description": "Calendar surface with day/week/month views, drag-and-keyboard rescheduling and a month grid with overflow chips.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Calendar surface with day/week/month views, drag-and-keyboard rescheduling and a month grid with overflow chips.\n\nExports: `Schedule`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/schedule\n```\n\nThe wrapper lands at `components/ui/haze/schedule.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/schedule.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "data-display"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/schedule.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Schedule } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/schedule.css';\nimport 'haze-ui/css/button.css';\nimport 'haze-ui/css/segmented.css';\nimport 'haze-ui/css/spinner.css';\n\nexport { Schedule };\nexport type { ScheduleProps, ScheduleClassNames, ScheduleEvent, ScheduleView, ScheduleEventChange, ScheduleEventColor, ScheduleBusinessHours, ScheduleViewLabels } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "scroll-area",
       "type": "registry:ui",
-      "title": "ScrollArea",
-      "description": "Scrollable region with custom-styled thin scrollbars and `maxHeight`.",
+      "title": "ScrollArea / Scrollbar / ScrollThumb / ScrollViewport",
+      "description": "Scrollable region with overlay scrollbar thumbs: `maxHeight` sugar or compound `ScrollViewport`/`Scrollbar`/`ScrollThumb` parts; `type` = `hover`/`always`/`scroll` visibility, keyboard-focusable viewport, RTL-mirrored thumbs.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Scrollable region with custom-styled thin scrollbars and `maxHeight`.\n\nExports: `ScrollArea`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/scroll-area\n```\n\nThe wrapper lands at `components/ui/haze/scroll-area.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/scroll-area.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "Scrollable region with overlay scrollbar thumbs: `maxHeight` sugar or compound `ScrollViewport`/`Scrollbar`/`ScrollThumb` parts; `type` = `hover`/`always`/`scroll` visibility, keyboard-focusable viewport, RTL-mirrored thumbs.\n\nExports: `ScrollArea`, `Scrollbar`, `ScrollThumb`, `ScrollViewport`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/scroll-area\n```\n\nThe wrapper lands at `components/ui/haze/scroll-area.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/scroll-area.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "layout"
       ],
@@ -2002,7 +2530,7 @@
       "files": [
         {
           "path": "components/haze/scroll-area.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { ScrollArea } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/scroll-area.css';\n\nexport { ScrollArea };\nexport type { ScrollAreaProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { ScrollArea, Scrollbar, ScrollThumb, ScrollViewport } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/scroll-area.css';\n\nexport { ScrollArea, Scrollbar, ScrollThumb, ScrollViewport };\nexport type { ScrollAreaProps, ScrollbarMode, ScrollbarProps, ScrollThumbProps, ScrollViewportProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -2196,6 +2724,27 @@
         }
       ]
     },
+    {
+      "name": "splitter",
+      "type": "registry:ui",
+      "title": "Splitter / SplitterPane",
+      "description": "Multi-pane split layout with implicit draggable dividers (AntD Splitter semantics): `sizes` in percent of the pane area (`ControlOrValue` array), per-pane `min`/`max` clamps, opt-in `collapsible` panes with divider collapse/expand triggers, keyboard arrows and pointer drags.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Multi-pane split layout with implicit draggable dividers (AntD Splitter semantics): `sizes` in percent of the pane area (`ControlOrValue` array), per-pane `min`/`max` clamps, opt-in `collapsible` panes with divider collapse/expand triggers, keyboard arrows and pointer drags.\n\nExports: `Splitter`, `SplitterPane`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/splitter\n```\n\nThe wrapper lands at `components/ui/haze/splitter.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/splitter.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "layout"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/splitter.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Splitter, SplitterPane } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/splitter.css';\n\nexport { Splitter, SplitterPane };\nexport type { SplitterProps, SplitterPaneProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "spoiler",
       "type": "registry:ui",
@@ -2263,9 +2812,9 @@
       "name": "step-timeline",
       "type": "registry:ui",
       "title": "StepTimeline / StepTimelineItem",
-      "description": "Vertical timeline of agent execution steps with per-step status.",
+      "description": "Vertical timeline of agent execution steps — per-step status (incl. `running`), timing, collapsible detail panels and nested sub-steps.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Vertical timeline of agent execution steps with per-step status.\n\nExports: `StepTimeline`, `StepTimelineItem`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/step-timeline\n```\n\nThe wrapper lands at `components/ui/haze/step-timeline.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/step-timeline.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "Vertical timeline of agent execution steps — per-step status (incl. `running`), timing, collapsible detail panels and nested sub-steps.\n\nExports: `StepTimeline`, `StepTimelineItem`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/step-timeline\n```\n\nThe wrapper lands at `components/ui/haze/step-timeline.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/step-timeline.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "agent"
       ],
@@ -2346,10 +2895,10 @@
     {
       "name": "switch",
       "type": "registry:ui",
-      "title": "Switch / SwitchCore",
+      "title": "Switch / SwitchCore / trackSizes / thumbSizes",
       "description": "Toggle switch (`role=\"switch\"`) with controllable `checked`.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Toggle switch (`role=\"switch\"`) with controllable `checked`.\n\nExports: `Switch`, `SwitchCore`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/switch\n```\n\nThe wrapper lands at `components/ui/haze/switch.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/switch.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "Toggle switch (`role=\"switch\"`) with controllable `checked`.\n\nExports: `Switch`, `SwitchCore`, `trackSizes`, `thumbSizes`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/switch\n```\n\nThe wrapper lands at `components/ui/haze/switch.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/switch.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "form"
       ],
@@ -2359,7 +2908,7 @@
       "files": [
         {
           "path": "components/haze/switch.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Switch, SwitchCore } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/switch.css';\n\nexport { Switch, SwitchCore };\nexport type { SwitchProps, SwitchCoreProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Switch, SwitchCore, trackSizes, thumbSizes } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/switch.css';\n\nexport { Switch, SwitchCore, trackSizes, thumbSizes };\nexport type { SwitchProps, SwitchCoreProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -2401,7 +2950,7 @@
       "files": [
         {
           "path": "components/haze/table.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Table, TableHead, TableBody, TableRow, TableCell } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/table.css';\n\nexport { Table, TableHead, TableBody, TableRow, TableCell };\nexport type { TableProps, TableHeadProps, TableBodyProps, TableRowProps, TableCellProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Table, TableHead, TableBody, TableRow, TableCell } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/table.css';\n\nexport { Table, TableHead, TableBody, TableRow, TableCell };\nexport type { TableProps, TableClassNames, TableHeadProps, TableBodyProps, TableRowProps, TableCellProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -2409,10 +2958,10 @@
     {
       "name": "tabs",
       "type": "registry:ui",
-      "title": "Tabs / TabList / Tab / TabPanel / SortableTabList",
+      "title": "Tabs / TabList / Tab / TabPanel / SortableTabList / tabVariants / listVariants",
       "description": "Tab panel switcher with controllable active tab (`TabList`, `Tab`, `TabPanel`).",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Tab panel switcher with controllable active tab (`TabList`, `Tab`, `TabPanel`).\n\nExports: `Tabs`, `TabList`, `Tab`, `TabPanel`, `SortableTabList`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/tabs\n```\n\nThe wrapper lands at `components/ui/haze/tabs.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/tabs.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "Tab panel switcher with controllable active tab (`TabList`, `Tab`, `TabPanel`).\n\nExports: `Tabs`, `TabList`, `Tab`, `TabPanel`, `SortableTabList`, `tabVariants`, `listVariants`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/tabs\n```\n\nThe wrapper lands at `components/ui/haze/tabs.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/tabs.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "navigation"
       ],
@@ -2422,7 +2971,7 @@
       "files": [
         {
           "path": "components/haze/tabs.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Tabs, TabList, Tab, TabPanel, SortableTabList } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tabs.css';\nimport 'haze-ui/css/menu.css';\n\nexport { Tabs, TabList, Tab, TabPanel, SortableTabList };\nexport type { TabsProps, TabsClassNames, TabListProps, TabProps, TabPanelProps, TabStatus, SortableTabListProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Tabs, TabList, Tab, TabPanel, SortableTabList, tabVariants, listVariants } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tabs.css';\nimport 'haze-ui/css/menu.css';\nimport 'haze-ui/css/virtual-list.css';\n\nexport { Tabs, TabList, Tab, TabPanel, SortableTabList, tabVariants, listVariants };\nexport type { TabsProps, TabsClassNames, TabListProps, TabProps, TabPanelProps, TabStatus, SortableTabListProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -2430,10 +2979,10 @@
     {
       "name": "tag",
       "type": "registry:ui",
-      "title": "Tag",
+      "title": "Tag / tagVariants / tagSizes",
       "description": "Compact status label with variant color and optional close button.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Compact status label with variant color and optional close button.\n\nExports: `Tag`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/tag\n```\n\nThe wrapper lands at `components/ui/haze/tag.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/tag.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "Compact status label with variant color and optional close button.\n\nExports: `Tag`, `tagVariants`, `tagSizes`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/tag\n```\n\nThe wrapper lands at `components/ui/haze/tag.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/tag.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "general"
       ],
@@ -2443,7 +2992,7 @@
       "files": [
         {
           "path": "components/haze/tag.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Tag } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tag.css';\n\nexport { Tag };\nexport type { TagProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Tag, tagVariants, tagSizes } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tag.css';\n\nexport { Tag, tagVariants, tagSizes };\nexport type { TagProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -2532,6 +3081,27 @@
         }
       ]
     },
+    {
+      "name": "time-grid",
+      "type": "registry:ui",
+      "title": "TimeGrid",
+      "description": "Single-select 'HH:mm' slot grid from a from/to window and minute step; radiogroup semantics with roving-tabindex arrow selection, controllable value, disabled slots.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Single-select 'HH:mm' slot grid from a from/to window and minute step; radiogroup semantics with roving-tabindex arrow selection, controllable value, disabled slots.\n\nExports: `TimeGrid`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/time-grid\n```\n\nThe wrapper lands at `components/ui/haze/time-grid.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/time-grid.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "form"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/time-grid.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { TimeGrid } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/time-grid.css';\n\nexport { TimeGrid };\nexport type { TimeGridProps, TimeGridClassNames } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "time-picker",
       "type": "registry:ui",
@@ -2640,10 +3210,10 @@
     {
       "name": "tokens",
       "type": "registry:lib",
-      "title": "Theme tokens (lightTheme / darkTheme / spacing / typography)",
-      "description": "Theme classes for haze-ui: `lightTheme`/`darkTheme` plus `spacing` and `typography`, applied to a root element to activate the `--haze-*` design tokens.",
+      "title": "Theme tokens (lightTheme / darkTheme / autoTheme / spacing / typography)",
+      "description": "Theme classes for haze-ui: `lightTheme`/`darkTheme`/`autoTheme` (zero-JS system-following) plus `spacing` and `typography`, applied to a root element to activate the `--haze-*` design tokens.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Theme classes for haze-ui: `lightTheme`/`darkTheme` plus `spacing` and `typography`, applied to a root element to activate the `--haze-*` design tokens.\n\nExports: `lightTheme`, `darkTheme`, `violetTheme`, `tealTheme`, `cyanTheme`, `orangeTheme`, `roseTheme`, `spacing`, `compact`, `typography`, `motion`, `motionPresets`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/tokens\n```\n\nThe wrapper lands at `lib/haze/tokens.tsx` (via the `@lib/` target placeholder from `components.json`); the `haze-ui` npm package is installed automatically as a dependency.\n\n## Theming\n\nThis wrapper re-exports the 'lightTheme' (or 'darkTheme'), 'spacing' and\n'typography' classes from 'haze-ui' and imports 'haze-ui/css/tokens.css'.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "docs": "Theme classes for haze-ui: `lightTheme`/`darkTheme`/`autoTheme` (zero-JS system-following) plus `spacing` and `typography`, applied to a root element to activate the `--haze-*` design tokens.\n\nExports: `lightTheme`, `darkTheme`, `autoTheme`, `violetTheme`, `tealTheme`, `cyanTheme`, `orangeTheme`, `roseTheme`, `spacing`, `compact`, `typography`, `motion`, `motionPresets`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/tokens\n```\n\nThe wrapper lands at `lib/haze/tokens.tsx` (via the `@lib/` target placeholder from `components.json`); the `haze-ui` npm package is installed automatically as a dependency.\n\n## Theming\n\nThis wrapper re-exports the 'lightTheme' (or 'darkTheme'), 'spacing' and\n'typography' classes from 'haze-ui' and imports 'haze-ui/css/tokens.css'.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
       "categories": [
         "theme"
       ],
@@ -2653,7 +3223,7 @@
       "files": [
         {
           "path": "components/haze/tokens.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { lightTheme, darkTheme, violetTheme, tealTheme, cyanTheme, orangeTheme, roseTheme, spacing, compact, typography, motion, motionPresets } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\n\nexport { lightTheme, darkTheme, violetTheme, tealTheme, cyanTheme, orangeTheme, roseTheme, spacing, compact, typography, motion, motionPresets };\nexport type { BrandTheme, MotionPreset } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { lightTheme, darkTheme, autoTheme, violetTheme, tealTheme, cyanTheme, orangeTheme, roseTheme, spacing, compact, typography, motion, motionPresets } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\n\nexport { lightTheme, darkTheme, autoTheme, violetTheme, tealTheme, cyanTheme, orangeTheme, roseTheme, spacing, compact, typography, motion, motionPresets };\nexport type { BrandTheme, MotionPreset } from 'haze-ui';\n",
           "type": "registry:lib"
         }
       ]
@@ -2716,7 +3286,7 @@
       "files": [
         {
           "path": "components/haze/tooltip.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Tooltip } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tooltip.css';\n\nexport { Tooltip };\nexport type { TooltipProps } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Tooltip } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tooltip.css';\n\nexport { Tooltip };\nexport type { TooltipProps, TooltipClassNames } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -2742,6 +3312,27 @@
         }
       ]
     },
+    {
+      "name": "trace",
+      "type": "registry:ui",
+      "title": "Trace / TraceItem / TraceDetails",
+      "description": "Line-by-line agent reasoning trace: `Trace` + `TraceItem` steps with pending/running/done/error status, custom icons, collapsible `details` and sr-only status announcements.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Line-by-line agent reasoning trace: `Trace` + `TraceItem` steps with pending/running/done/error status, custom icons, collapsible `details` and sr-only status announcements.\n\nExports: `Trace`, `TraceItem`, `TraceDetails`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/trace\n```\n\nThe wrapper lands at `components/ui/haze/trace.tsx` (via the `@ui/` target placeholder from `components.json`) and re-exports the component(s) from the `haze-ui` npm package, which is installed automatically.\n\n## Theming\n\nhaze-ui ships JS and CSS separately — the installed wrapper already imports\n`haze-ui/css/tokens.css` and `haze-ui/css/trace.css`, so no extra stylesheet setup is needed.\n\nActivate the design tokens by applying the classes to a root element:\n\n```jsx\nimport { lightTheme, spacing, typography } from 'haze-ui';\n\n// on <body> or any root container — darkTheme is a drop-in swap\n<div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n```\n\nDetails: https://github.com/wmzy/haze-ui/tree/main/registry",
+      "categories": [
+        "agent"
+      ],
+      "dependencies": [
+        "haze-ui"
+      ],
+      "files": [
+        {
+          "path": "components/haze/trace.tsx",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Trace, TraceItem, TraceDetails } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/trace.css';\n\nexport { Trace, TraceItem, TraceDetails };\nexport type { TraceProps, TraceItemProps, TraceDetailsProps, TraceStatus } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "transfer",
       "type": "registry:ui",
@@ -2842,7 +3433,7 @@
       "files": [
         {
           "path": "components/haze/upload.tsx",
-          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Upload, UploadCore } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/upload.css';\nimport 'haze-ui/css/progress.css';\n\nexport { Upload, UploadCore };\nexport type { UploadProps, UploadCoreProps, UploadHandle, UploadStatus, UploadFile, UploadValueItem, UploadFileStatus, UploadRequest, UploadRequestOptions, UploadListItemActions, UploadListItemRender } from 'haze-ui';\n",
+          "content": "// haze-ui registry wrapper — generated by scripts/generate-registry.mjs.\n//\n// This is a thin wrapper around the published haze-ui npm package, not\n// vendored component source: it re-exports the component(s) from\n// 'haze-ui' and imports their stylesheet, so the package keeps updating\n// underneath. Edit this file to customize — wrap, restyle, compose; that\n// is what it is for. (haze-ui is compiled CSS-in-JS (linaria) styled\n// against --haze-* design tokens, so vendoring the source would neither\n// build nor style — forking this wrapper is the intended customization\n// path.)\n//\n// Theming (once per app): apply the token classes to a root element, e.g.\n//   import { lightTheme, spacing, typography } from 'haze-ui';\n//   <div className={`${lightTheme} ${spacing} ${typography}`}>…</div>\n// (darkTheme is a drop-in swap). haze-ui dist modules ship their own\n// 'use client' directive, so imports resolve cleanly from RSC; the\n// wrapper inherits client semantics either way.\n\nimport { Upload, UploadCore } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/upload.css';\nimport 'haze-ui/css/file-preview.css';\nimport 'haze-ui/css/progress.css';\n\nexport { Upload, UploadCore };\nexport type { UploadProps, UploadClassNames, UploadCoreProps, UploadHandle, UploadStatus, UploadFile, UploadValueItem, UploadFileStatus, UploadRequest, UploadRequestOptions, UploadListItemActions, UploadListItemRender } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]