haze-ui 1.29.0 → 1.31.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 — 126 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",
@@ -381,13 +403,16 @@
         "wmzy/haze-ui/skeleton",
         "wmzy/haze-ui/slider",
         "wmzy/haze-ui/sources",
+        "wmzy/haze-ui/sparkline",
         "wmzy/haze-ui/spinner",
         "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,12 +436,13 @@
         "wmzy/haze-ui/typography",
         "wmzy/haze-ui/upload",
         "wmzy/haze-ui/virtual-list",
-        "wmzy/haze-ui/watermark"
+        "wmzy/haze-ui/watermark",
+        "wmzy/haze-ui/workbench"
       ],
       "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, orangeTheme, roseTheme, spacing, tealTheme, typography, violetTheme } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\n\nexport { compact, cyanTheme, darkTheme, lightTheme, 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 { 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",
           "type": "registry:base"
         }
       ]
@@ -500,7 +526,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 } 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 } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -1096,10 +1122,10 @@
     {
       "name": "dropdown-menu",
       "type": "registry:ui",
-      "title": "DropdownMenu / DropdownMenuTrigger / DropdownMenuContent / DropdownMenuItem / DropdownMenuSeparator / DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContent",
+      "title": "DropdownMenu / DropdownMenuTrigger / DropdownMenuContent / DropdownMenuItem / DropdownMenuCheckboxItem / DropdownMenuRadioGroup / DropdownMenuRadioItem / DropdownMenuGroup / DropdownMenuSeparator / DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContent",
       "description": "Click-triggered floating menu with `DropdownMenuTrigger`/`Content`/`Item`/`Separator` parts.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Click-triggered floating menu with `DropdownMenuTrigger`/`Content`/`Item`/`Separator` parts.\n\nExports: `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuSeparator`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/dropdown-menu\n```\n\nThe wrapper lands at `components/ui/haze/dropdown-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/dropdown-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",
+      "docs": "Click-triggered floating menu with `DropdownMenuTrigger`/`Content`/`Item`/`Separator` parts.\n\nExports: `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuGroup`, `DropdownMenuSeparator`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/dropdown-menu\n```\n\nThe wrapper lands at `components/ui/haze/dropdown-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/dropdown-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": [
         "overlay"
       ],
@@ -1109,7 +1135,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, 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, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent };\nexport type { DropdownMenuProps, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, 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, DropdownMenuDataItem, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuGroupProps, DropdownMenuSeparatorProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, DropdownMenuHandle } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -1558,10 +1584,10 @@
     {
       "name": "menu",
       "type": "registry:ui",
-      "title": "Menu / MenuItem / MenuDivider / MenuSub / MenuSubTrigger / MenuSubContent",
+      "title": "Menu / MenuItem / MenuCheckboxItem / MenuRadioGroup / MenuRadioItem / MenuGroup / MenuDivider / MenuSub / MenuSubTrigger / MenuSubContent",
       "description": "Lightweight toggle menu with a trigger and statically positioned panel (`MenuItem`, `MenuDivider`).",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Lightweight toggle menu with a trigger and statically positioned panel (`MenuItem`, `MenuDivider`).\n\nExports: `Menu`, `MenuItem`, `MenuDivider`, `MenuSub`, `MenuSubTrigger`, `MenuSubContent`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/menu\n```\n\nThe wrapper lands at `components/ui/haze/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/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",
+      "docs": "Lightweight toggle menu with a trigger and statically positioned panel (`MenuItem`, `MenuDivider`).\n\nExports: `Menu`, `MenuItem`, `MenuCheckboxItem`, `MenuRadioGroup`, `MenuRadioItem`, `MenuGroup`, `MenuDivider`, `MenuSub`, `MenuSubTrigger`, `MenuSubContent`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/menu\n```\n\nThe wrapper lands at `components/ui/haze/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/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": [
         "overlay"
       ],
@@ -1571,7 +1597,7 @@
       "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, MenuDivider, MenuSub, MenuSubTrigger, MenuSubContent } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/menu.css';\n\nexport { Menu, MenuItem, MenuDivider, MenuSub, MenuSubTrigger, MenuSubContent };\nexport type { MenuProps, MenuItemProps, 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';\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",
           "type": "registry:ui"
         }
       ]
@@ -2038,6 +2064,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",
@@ -2080,6 +2127,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 +2253,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 +2298,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 +2311,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"
         }
       ]
@@ -2348,7 +2437,7 @@
       "files": [
         {
           "path": "components/haze/time-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 { TimePicker, TimePickerCore } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/time-picker.css';\n\nexport { TimePicker, TimePickerCore };\nexport type { TimePickerProps, TimePickerCoreProps } 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 { TimePicker, TimePickerCore } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/time-picker.css';\n\nexport { TimePicker, TimePickerCore };\nexport type { TimePickerProps, TimePickerCoreProps, TimeParts, TimePickerFormat } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -2390,7 +2479,7 @@
       "files": [
         {
           "path": "components/haze/toast.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 { Toast, ToastContainer, useToast, toast } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/toast.css';\n\nexport { Toast, ToastContainer, useToast, toast };\nexport type { ToastProps, ToastContainerProps, ToastOptions, ToastVariant, ToastClassNames } 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 { Toast, ToastContainer, useToast, toast } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/toast.css';\n\nexport { Toast, ToastContainer, useToast, toast };\nexport type { ToastProps, ToastContainerProps, ToastOptions, ToastVariant, ToastAction, ToastClassNames } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -2443,7 +2532,7 @@
       "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.",
       "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`.\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` 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",
       "categories": [
         "theme"
       ],
@@ -2453,7 +2542,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 } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\n\nexport { lightTheme, darkTheme, violetTheme, tealTheme, cyanTheme, orangeTheme, roseTheme, spacing, compact, typography };\nexport type { BrandTheme } 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, 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",
           "type": "registry:lib"
         }
       ]
@@ -2566,10 +2655,10 @@
     {
       "name": "tree",
       "type": "registry:ui",
-      "title": "Tree",
+      "title": "Tree / SortableTree",
       "description": "Hierarchical tree with expand, select, check state, async `loadData` and `searchValue` filtering.",
       "author": "wmzy <https://github.com/wmzy>",
-      "docs": "Hierarchical tree with expand, select, check state, async `loadData` and `searchValue` filtering.\n\nExports: `Tree`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/tree\n```\n\nThe wrapper lands at `components/ui/haze/tree.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/tree.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": "Hierarchical tree with expand, select, check state, async `loadData` and `searchValue` filtering.\n\nExports: `Tree`, `SortableTree`.\n\n## Install\n\n```bash\nnpx shadcn@latest add wmzy/haze-ui/tree\n```\n\nThe wrapper lands at `components/ui/haze/tree.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/tree.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"
       ],
@@ -2579,7 +2668,7 @@
       "files": [
         {
           "path": "components/haze/tree.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 { Tree } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tree.css';\nimport 'haze-ui/css/virtual-list.css';\n\nexport { Tree };\nexport type { TreeProps, TreeNodeData } 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 { Tree, SortableTree } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tree.css';\nimport 'haze-ui/css/virtual-list.css';\n\nexport { Tree, SortableTree };\nexport type { TreeProps, TreeNodeData, SortableTreeProps, SortableTreeMoveInfo } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -2642,7 +2731,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, 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/progress.css';\n\nexport { Upload, UploadCore };\nexport type { UploadProps, UploadCoreProps, UploadHandle, UploadStatus, UploadFile, UploadValueItem, UploadFileStatus, UploadRequest, UploadRequestOptions, UploadListItemActions, UploadListItemRender } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -2663,7 +2752,7 @@
       "files": [
         {
           "path": "components/haze/virtual-list.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 { VirtualList } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/virtual-list.css';\n\nexport { VirtualList };\nexport type { VirtualListProps, VirtualListHandle, VirtualListGroup, VirtualListAlign } 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 { VirtualList } from 'haze-ui';\n\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/virtual-list.css';\n\nexport { VirtualList };\nexport type { VirtualListProps, VirtualListHandle, VirtualListGroup, VirtualListAlign, VirtualListOrientation } from 'haze-ui';\n",
           "type": "registry:ui"
         }
       ]
@@ -2688,6 +2777,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/tokens/index.js

@@ -1,8 +1,8 @@
 import { darkTheme as e, lightTheme as t } from "./colors.js";
-import { spacing as n } from "./spacing.js";
-import { compact as r } from "./density.js";
-import { typography as i } from "./typography.js";
-import { deltaE as a, formatOklch as o, oklchToHex as s, parseHex as c, parseOklch as l, wcagContrast as u } from "./oklch.js";
-import { PRIMITIVES as d, SEMANTIC_COLOR_TOKENS as f } from "./palette.js";
-import { motion as p } from "./motion.js";
-export { d as PRIMITIVES, f as SEMANTIC_COLOR_TOKENS, r as compact, e as darkTheme, a as deltaE, o as formatOklch, t as lightTheme, p as motion, s as oklchToHex, c as parseHex, l as parseOklch, n as spacing, i as typography, u as wcagContrast };
+import { deltaE as n, formatOklch as r, oklchToHex as i, parseHex as a, parseOklch as o, wcagContrast as s } from "./oklch.js";
+import { PRIMITIVES as c, SEMANTIC_COLOR_TOKENS as l, createBrandTheme as u } from "./palette.js";
+import { spacing as d } from "./spacing.js";
+import { compact as f } from "./density.js";
+import { typography as p } from "./typography.js";
+import { motion as m, motionPresets as h } from "./motion.js";
+export { c as PRIMITIVES, l as SEMANTIC_COLOR_TOKENS, f as compact, u as createBrandTheme, e as darkTheme, n as deltaE, r as formatOklch, t as lightTheme, m as motion, h as motionPresets, i as oklchToHex, a as parseHex, o as parseOklch, d as spacing, p as typography, s as wcagContrast };

package/dist/tokens/motion.js

@@ -1,6 +1,13 @@
 
 /* empty css                 */
 //#region src/lib/tokens/motion.ts
-var e = "haze-motion__motion";
+var e = "haze-motion__motion", t = {
+	fade: "haze-motion__fade",
+	fadeScale: "haze-motion__fadeScale",
+	slideUp: "haze-motion__slideUp",
+	slideDown: "haze-motion__slideDown",
+	slideLeft: "haze-motion__slideLeft",
+	slideRight: "haze-motion__slideRight"
+};
 //#endregion
-export { e as motion };
+export { e as motion, t as motionPresets };