haze-ui 1.30.0 → 1.32.0

package/dist/registry.json

@@ -24,6 +24,27 @@
         }
       ]
     },
+    {
+      "name": "activity-rail",
+      "type": "registry:ui",
+      "title": "ActivityRail / ActivityRailItem",
+      "description": "VSCode-style vertical icon rail (`nav`): 44px items with icon/label/badge/active indicator, tooltip labels and `slot=\"end\"` bottom pinning.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "VSCode-style vertical icon rail (`nav`): 44px items with icon/label/badge/active indicator, tooltip labels and `slot=\"end\"` bottom pinning.\n\nExports: `ActivityRail`, `ActivityRailItem`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/activity-rail\n```\n\nThe wrapper lands at `components/ui/haze/activity-rail.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/activity-rail.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/activity-rail.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 { ActivityRail, ActivityRailItem } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/activity-rail.css';\nimport 'haze-ui/css/badge.css';\nimport 'haze-ui/css/tooltip.css';\n\nexport { ActivityRail, ActivityRailItem };\nexport type { ActivityRailProps, ActivityRailItemProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "affix",
       "type": "registry:ui",
@@ -282,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 — 121 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 — 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",
       "categories": [
         "theme",
         "setup"
@@ -292,6 +313,7 @@
       ],
       "registryDependencies": [
         "wmzy/haze-ui/accordion",
+        "wmzy/haze-ui/activity-rail",
         "wmzy/haze-ui/affix",
         "wmzy/haze-ui/alert",
         "wmzy/haze-ui/anchor",
@@ -339,6 +361,7 @@
         "wmzy/haze-ui/dropdown-menu",
         "wmzy/haze-ui/ellipsis",
         "wmzy/haze-ui/empty",
+        "wmzy/haze-ui/fieldset",
         "wmzy/haze-ui/file-input",
         "wmzy/haze-ui/file-preview",
         "wmzy/haze-ui/flex",
@@ -348,13 +371,16 @@
         "wmzy/haze-ui/hover-card",
         "wmzy/haze-ui/icon",
         "wmzy/haze-ui/image",
+        "wmzy/haze-ui/indicator",
         "wmzy/haze-ui/inline-completion",
         "wmzy/haze-ui/inline-edit",
         "wmzy/haze-ui/input",
         "wmzy/haze-ui/json-view",
         "wmzy/haze-ui/kbd",
         "wmzy/haze-ui/list",
+        "wmzy/haze-ui/loading-overlay",
         "wmzy/haze-ui/log-viewer",
+        "wmzy/haze-ui/mark",
         "wmzy/haze-ui/markdown-renderer",
         "wmzy/haze-ui/masonry",
         "wmzy/haze-ui/mentions",
@@ -381,13 +407,17 @@
         "wmzy/haze-ui/skeleton",
         "wmzy/haze-ui/slider",
         "wmzy/haze-ui/sources",
+        "wmzy/haze-ui/sparkline",
         "wmzy/haze-ui/spinner",
+        "wmzy/haze-ui/spoiler",
         "wmzy/haze-ui/stat",
+        "wmzy/haze-ui/status-bar",
         "wmzy/haze-ui/step-timeline",
         "wmzy/haze-ui/stepper",
         "wmzy/haze-ui/streaming-text",
         "wmzy/haze-ui/swipe-action",
         "wmzy/haze-ui/switch",
+        "wmzy/haze-ui/tab-bar",
         "wmzy/haze-ui/table",
         "wmzy/haze-ui/tabs",
         "wmzy/haze-ui/tag",
@@ -411,7 +441,9 @@
         "wmzy/haze-ui/typography",
         "wmzy/haze-ui/upload",
         "wmzy/haze-ui/virtual-list",
-        "wmzy/haze-ui/watermark"
+        "wmzy/haze-ui/visually-hidden",
+        "wmzy/haze-ui/watermark",
+        "wmzy/haze-ui/workbench"
       ],
       "files": [
         {
@@ -479,7 +511,7 @@
       "files": [
         {
           "path": "components/haze/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 { Button, ButtonLink, buttonVariants, buttonSizes } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/button.css';\n\nexport { Button, ButtonLink, buttonVariants, buttonSizes };\nexport type { ButtonProps, ButtonLinkProps } 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 { Button, ButtonLink, buttonVariants, buttonSizes } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/button.css';\nimport 'haze-ui/css/spinner.css';\n\nexport { Button, ButtonLink, buttonVariants, buttonSizes };\nexport type { ButtonProps, ButtonLinkProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -773,7 +805,7 @@
       "files": [
         {
           "path": "components/haze/combobox.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 { Combobox, ComboboxOption, ComboboxGroup } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/combobox.css';\nimport 'haze-ui/css/chip.css';\nimport 'haze-ui/css/spinner.css';\nimport 'haze-ui/css/virtual-list.css';\n\nexport { Combobox, ComboboxOption, ComboboxGroup };\nexport type { ComboboxProps, ComboboxOptionProps, ComboboxGroupProps, ComboboxOptionData, ComboboxVirtualizedConfig } 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 { Combobox, ComboboxOption, ComboboxGroup } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/combobox.css';\nimport 'haze-ui/css/chip.css';\nimport 'haze-ui/css/spinner.css';\nimport 'haze-ui/css/virtual-list.css';\n\nexport { Combobox, ComboboxOption, ComboboxGroup };\nexport type { ComboboxProps, ComboboxClassNames, ComboboxOptionProps, ComboboxGroupProps, ComboboxOptionData, ComboboxVirtualizedConfig } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -802,10 +834,10 @@
     {
       "name": "confirm-dialog",
       "type": "registry:ui",
-      "title": "ConfirmDialog",
+      "title": "ConfirmDialog / confirm",
       "description": "Ready-made confirm dialog with confirm/cancel actions and a danger variant.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Ready-made confirm dialog with confirm/cancel actions and a danger variant.\n\nExports: `ConfirmDialog`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/confirm-dialog\n```\n\nThe wrapper lands at `components/ui/haze/confirm-dialog.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/confirm-dialog.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": "Ready-made confirm dialog with confirm/cancel actions and a danger variant.\n\nExports: `ConfirmDialog`, `confirm`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/confirm-dialog\n```\n\nThe wrapper lands at `components/ui/haze/confirm-dialog.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/confirm-dialog.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"
       ],
@@ -815,7 +847,7 @@
       "files": [
         {
           "path": "components/haze/confirm-dialog.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 { ConfirmDialog } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/confirm-dialog.css';\n\nexport { ConfirmDialog };\nexport type { ConfirmDialogProps } 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 { ConfirmDialog, confirm } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/confirm-dialog.css';\n\nexport { ConfirmDialog, confirm };\nexport type { ConfirmDialogProps, ConfirmOptions } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -1088,7 +1120,7 @@
       "files": [
         {
           "path": "components/haze/drawer.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 { Drawer } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/drawer.css';\n\nexport { Drawer };\nexport type { DrawerProps, DrawerHandle } 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 { Drawer } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/drawer.css';\n\nexport { Drawer };\nexport type { DrawerProps, DrawerClassNames, DrawerHandle } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -1156,6 +1188,27 @@
         }
       ]
     },
+    {
+      "name": "fieldset",
+      "type": "registry:ui",
+      "title": "Fieldset",
+      "description": "Semantic form grouping: native `fieldset`+`legend` (group named by the legend), `disabled` disables every control inside.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Semantic form grouping: native `fieldset`+`legend` (group named by the legend), `disabled` disables every control inside.\n\nExports: `Fieldset`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/fieldset\n```\n\nThe wrapper lands at `components/ui/haze/fieldset.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/fieldset.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/fieldset.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 { Fieldset } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/fieldset.css';\n\nexport { Fieldset };\nexport type { FieldsetProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "file-input",
       "type": "registry:ui",
@@ -1345,6 +1398,27 @@
         }
       ]
     },
+    {
+      "name": "indicator",
+      "type": "registry:ui",
+      "title": "Indicator",
+      "description": "Corner badge attached to a host element (avatar, icon button): dot or count label, tone + corner position, zero-badge hides unless `showZero`.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Corner badge attached to a host element (avatar, icon button): dot or count label, tone + corner position, zero-badge hides unless `showZero`.\n\nExports: `Indicator`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/indicator\n```\n\nThe wrapper lands at `components/ui/haze/indicator.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/indicator.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/indicator.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 { Indicator } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/indicator.css';\n\nexport { Indicator };\nexport type { IndicatorProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "inline-completion",
       "type": "registry:ui",
@@ -1471,6 +1545,27 @@
         }
       ]
     },
+    {
+      "name": "loading-overlay",
+      "type": "registry:ui",
+      "title": "LoadingOverlay",
+      "description": "Container-level loading state: dims content and centers a spinner (or custom loader) above it, `aria-busy` mirrors the phase.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Container-level loading state: dims content and centers a spinner (or custom loader) above it, `aria-busy` mirrors the phase.\n\nExports: `LoadingOverlay`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/loading-overlay\n```\n\nThe wrapper lands at `components/ui/haze/loading-overlay.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/loading-overlay.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/loading-overlay.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 { LoadingOverlay } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/loading-overlay.css';\nimport 'haze-ui/css/spinner.css';\n\nexport { LoadingOverlay };\nexport type { LoadingOverlayProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "log-viewer",
       "type": "registry:ui",
@@ -1492,6 +1587,27 @@
         }
       ]
     },
+    {
+      "name": "mark",
+      "type": "registry:ui",
+      "title": "Mark",
+      "description": "Text-level highlight — semantic `<mark>` skinned with the status tokens (`warning`/`primary`/`success`/`danger`).",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Text-level highlight — semantic `<mark>` skinned with the status tokens (`warning`/`primary`/`success`/`danger`).\n\nExports: `Mark`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/mark\n```\n\nThe wrapper lands at `components/ui/haze/mark.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/mark.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/mark.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 { Mark } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/mark.css';\n\nexport { Mark };\nexport type { MarkProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "markdown-renderer",
       "type": "registry:ui",
@@ -1697,7 +1813,7 @@
       "files": [
         {
           "path": "components/haze/password-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 { PasswordInput, PasswordInputCore } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/password-input.css';\n\nexport { PasswordInput, PasswordInputCore };\nexport type { PasswordInputProps, PasswordInputCoreProps } 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 { PasswordInput, PasswordInputCore } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/password-input.css';\nimport 'haze-ui/css/input.css';\n\nexport { PasswordInput, PasswordInputCore };\nexport type { PasswordInputProps, PasswordInputCoreProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -1928,7 +2044,7 @@
       "files": [
         {
           "path": "components/haze/select.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 { Select, Option, SelectCore, OptionGroup } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/select.css';\nimport 'haze-ui/css/chip.css';\nimport 'haze-ui/css/spinner.css';\nimport 'haze-ui/css/virtual-list.css';\n\nexport { Select, Option, SelectCore, OptionGroup };\nexport type { SelectProps, OptionProps, SelectCoreProps, OptionGroupProps } 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 { Select, Option, SelectCore, OptionGroup } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/select.css';\nimport 'haze-ui/css/chip.css';\nimport 'haze-ui/css/spinner.css';\nimport 'haze-ui/css/virtual-list.css';\n\nexport { Select, Option, SelectCore, OptionGroup };\nexport type { SelectProps, SelectClassNames, OptionProps, SelectCoreProps, OptionGroupProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -2038,6 +2154,27 @@
         }
       ]
     },
+    {
+      "name": "sparkline",
+      "type": "registry:ui",
+      "title": "Sparkline / sparklineToneStrokes / sparklineToneFills",
+      "description": "Inline-SVG mini trend chart (line/area variants, tone colors); stateless, recharts-free and RSC-safe.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Inline-SVG mini trend chart (line/area variants, tone colors); stateless, recharts-free and RSC-safe.\n\nExports: `Sparkline`, `sparklineToneStrokes`, `sparklineToneFills`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/sparkline\n```\n\nThe wrapper lands at `components/ui/haze/sparkline.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/sparkline.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/sparkline.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 { Sparkline, sparklineToneStrokes, sparklineToneFills } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/sparkline.css';\n\nexport { Sparkline, sparklineToneStrokes, sparklineToneFills };\nexport type { SparklineProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "spinner",
       "type": "registry:ui",
@@ -2059,6 +2196,27 @@
         }
       ]
     },
+    {
+      "name": "spoiler",
+      "type": "registry:ui",
+      "title": "Spoiler",
+      "description": "Collapsed long-content gate (\"show more/less\"): height-capped preview with a fade edge and a toggle button; `expanded` is controllable.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Collapsed long-content gate (\"show more/less\"): height-capped preview with a fade edge and a toggle button; `expanded` is controllable.\n\nExports: `Spoiler`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/spoiler\n```\n\nThe wrapper lands at `components/ui/haze/spoiler.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/spoiler.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/spoiler.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 { Spoiler } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/spoiler.css';\n\nexport { Spoiler };\nexport type { SpoilerProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "stat",
       "type": "registry:ui",
@@ -2080,6 +2238,27 @@
         }
       ]
     },
+    {
+      "name": "status-bar",
+      "type": "registry:ui",
+      "title": "StatusBar / StatusItem",
+      "description": "VSCode-style status strip (`footer`): `left`/`right` groups, selectable `StatusItem`s, `priority` items survive the mobile breakpoint.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "VSCode-style status strip (`footer`): `left`/`right` groups, selectable `StatusItem`s, `priority` items survive the mobile breakpoint.\n\nExports: `StatusBar`, `StatusItem`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/status-bar\n```\n\nThe wrapper lands at `components/ui/haze/status-bar.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/status-bar.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/status-bar.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 { StatusBar, StatusItem } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/status-bar.css';\n\nexport { StatusBar, StatusItem };\nexport type { StatusBarProps, StatusItemProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "step-timeline",
       "type": "registry:ui",
@@ -2185,6 +2364,27 @@
         }
       ]
     },
+    {
+      "name": "tab-bar",
+      "type": "registry:ui",
+      "title": "TabBar / TabBarItem",
+      "description": "Mobile bottom navigation (the ActivityRail viewport peer): 56px safe-area strip, icon+label items, badge, `onSelect`/`onReselect` semantics.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Mobile bottom navigation (the ActivityRail viewport peer): 56px safe-area strip, icon+label items, badge, `onSelect`/`onReselect` semantics.\n\nExports: `TabBar`, `TabBarItem`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/tab-bar\n```\n\nThe wrapper lands at `components/ui/haze/tab-bar.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/tab-bar.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/tab-bar.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 { TabBar, TabBarItem } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tab-bar.css';\nimport 'haze-ui/css/badge.css';\n\nexport { TabBar, TabBarItem };\nexport type { TabBarProps, TabBarItemProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "table",
       "type": "registry:ui",
@@ -2209,10 +2409,10 @@
     {
       "name": "tabs",
       "type": "registry:ui",
-      "title": "Tabs / TabList / Tab / TabPanel",
+      "title": "Tabs / TabList / Tab / TabPanel / SortableTabList",
       "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`.\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`.\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"
       ],
@@ -2222,7 +2422,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 } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tabs.css';\n\nexport { Tabs, TabList, Tab, TabPanel };\nexport type { TabsProps, TabsClassNames, TabListProps, TabProps, TabPanelProps } 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 } 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",
           "type": "registry:ui"
         }
       ]
@@ -2264,7 +2464,7 @@
       "files": [
         {
           "path": "components/haze/tag-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 { TagGroup, TagGroupItem, SortableTagGroup } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tag-group.css';\n\nexport { TagGroup, TagGroupItem, SortableTagGroup };\nexport type { TagGroupProps, TagGroupItemProps, SortableTagGroupProps } 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 { TagGroup, TagGroupItem, SortableTagGroup } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tag-group.css';\n\nexport { TagGroup, TagGroupItem, SortableTagGroup };\nexport type { TagGroupProps, TagGroupClassNames, TagGroupItemProps, SortableTagGroupProps } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -2668,6 +2868,27 @@
         }
       ]
     },
+    {
+      "name": "visually-hidden",
+      "type": "registry:ui",
+      "title": "VisuallyHidden",
+      "description": "Screen-reader-only content primitive: clipped off every visual axis while staying in the a11y tree (the icon-only-button label soup).",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "Screen-reader-only content primitive: clipped off every visual axis while staying in the a11y tree (the icon-only-button label soup).\n\nExports: `VisuallyHidden`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/visually-hidden\n```\n\nThe wrapper lands at `components/ui/haze/visually-hidden.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/visually-hidden.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/visually-hidden.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 { VisuallyHidden } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/visually-hidden.css';\n\nexport { VisuallyHidden };\nexport type { VisuallyHiddenProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "watermark",
       "type": "registry:ui",
@@ -2688,6 +2909,27 @@
           "type": "registry:ui"
         }
       ]
+    },
+    {
+      "name": "workbench",
+      "type": "registry:ui",
+      "title": "Workbench",
+      "description": "IDE-style application frame (`100dvh`): activityBar/sidebar/auxiliaryBar/panel/statusBar/tabBar slots with px-resizable collapsible regions and a maximizable bottom panel; below 768px sides become overlays and the tabBar takes over.",
+      "author": "wmzy <https://github.com/wmzy>",
+      "docs": "IDE-style application frame (`100dvh`): activityBar/sidebar/auxiliaryBar/panel/statusBar/tabBar slots with px-resizable collapsible regions and a maximizable bottom panel; below 768px sides become overlays and the tabBar takes over.\n\nExports: `Workbench`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/workbench\n```\n\nThe wrapper lands at `components/ui/haze/workbench.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/workbench.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/workbench.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 { Workbench } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/workbench.css';\nimport 'haze-ui/css/resizable.css';\n\nexport { Workbench };\nexport type { WorkbenchProps } from 'haze-ui';\n",
+          "type": "registry:ui"
+        }
+      ]
     }
   ]
 }

package/dist/types/components/ActivityRail/ActivityRail.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+type ActivityRailProps = {
+    /** ActivityRailItem list; items with `slot="end"` sink to the rail
+     *  bottom (vertical) or trailing edge (horizontal). */
+    children: ReactNode;
+    /** Track orientation: a vertical side rail (default) or a
+     *  horizontal strip. Also resolved automatically by
+     *  container width — any host that wraps the rail in a
+     *  container wider than the 48px vertical track (Workbench
+     *  names it rail-track) gets the horizontal layout as pure
+     *  CSS, no prop needed. */
+    orientation?: 'vertical' | 'horizontal';
+} & Omit<ComponentPropsWithoutRef<'nav'>, 'children'>;
+export default function ActivityRail({ orientation, children, className, ...rest }: ActivityRailProps): import("react").JSX.Element;
+type ActivityRailItemProps = {
+    /** Icon content; rendered inside a fixed-size, aria-hidden slot. */
+    icon: ReactNode;
+    /** Accessible name and hover-tooltip content. */
+    label: string;
+    /** Notification count/dot rendered as a small Badge overlay. */
+    badge?: ReactNode;
+    /** Marks the item as the current view (aria-current="true"). */
+    active?: boolean;
+    /** Called when the item is activated (click or Enter/Space). */
+    onSelect?: () => void;
+    /** `end` sinks the item into the bottom-aligned group. */
+    slot?: 'start' | 'end';
+} & Omit<ComponentPropsWithoutRef<'button'>, 'type' | 'children' | 'slot'>;
+export declare function ActivityRailItem({ icon, label, badge, active, onSelect, slot, className, onClick, ...rest }: ActivityRailItemProps): import("react").JSX.Element;
+export type { ActivityRailProps, ActivityRailItemProps };

package/dist/types/components/ActivityRail/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ActivityRail } from './ActivityRail';
+export type { ActivityRailProps } from './ActivityRail';
+export { ActivityRailItem } from './ActivityRail';
+export type { ActivityRailItemProps } from './ActivityRail';