From fc22a6999a09096d7d81b6f370c4452e56be12ec Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Thu, 2 Jul 2026 12:59:21 +0200
Subject: [PATCH 01/49] fix: badge 19 example (#812)

---
 apps/ui/public/r/p-badge-19.json                  |  5 ++++-
 apps/ui/public/r/registry.json                    |  3 +++
 apps/ui/registry.json                             |  3 +++
 apps/ui/registry/__index__.tsx                    |  2 +-
 apps/ui/registry/default/particles/p-badge-19.tsx | 10 +++-------
 apps/ui/registry/registry-particles.ts            |  3 +++
 6 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/apps/ui/public/r/p-badge-19.json b/apps/ui/public/r/p-badge-19.json
index 8903bb25d..35b928538 100644
--- a/apps/ui/public/r/p-badge-19.json
+++ b/apps/ui/public/r/p-badge-19.json
@@ -12,10 +12,13 @@
   "files": [
     {
       "path": "registry/default/particles/p-badge-19.tsx",
-      "content": "\"use client\";\n\nimport { CheckIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <Badge className=\"relative outline-none has-focus-visible:border-ring has-data-[state=unchecked]:bg-muted has-data-[state=unchecked]:text-muted-foreground has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\">\n      <Checkbox\n        className=\"peer sr-only after:absolute after:inset-0\"\n        defaultChecked\n        id={id}\n      />\n      <CheckIcon\n        aria-hidden=\"true\"\n        className=\"hidden peer-data-[state=checked]:block\"\n      />\n      <label\n        className=\"cursor-pointer select-none after:absolute after:inset-0\"\n        htmlFor={id}\n      >\n        Selectable\n      </label>\n    </Badge>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { CheckIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <Badge className=\"relative outline-none has-focus-visible:border-ring has-data-unchecked:bg-muted has-data-unchecked:text-muted-foreground has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\">\n      <Checkbox className=\"peer hidden\" defaultChecked id={id} />\n      <CheckIcon\n        aria-hidden=\"true\"\n        className=\"hidden peer-data-checked:block\"\n      />\n      <label\n        className=\"cursor-pointer select-none after:absolute after:inset-0\"\n        htmlFor={id}\n      >\n        Selectable\n      </label>\n    </Badge>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
+  "meta": {
+    "className": "**:data-[slot=preview]:flex"
+  },
   "categories": [
     "badge",
     "checkbox"
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index bc39b64af..217515665 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -2143,6 +2143,9 @@
           "type": "registry:block"
         }
       ],
+      "meta": {
+        "className": "**:data-[slot=preview]:flex"
+      },
       "name": "p-badge-19",
       "registryDependencies": [
         "@coss/badge",
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index bc39b64af..217515665 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -2143,6 +2143,9 @@
           "type": "registry:block"
         }
       ],
+      "meta": {
+        "className": "**:data-[slot=preview]:flex"
+      },
       "name": "p-badge-19",
       "registryDependencies": [
         "@coss/badge",
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index 416cd059d..1907fce55 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -2075,7 +2075,7 @@ export const Index: Record<string, any> = {
       return { default: mod.default || mod[exportName] }
     }),
     categories: ["badge","checkbox"],
-    meta: undefined,
+    meta: {"className":"**:data-[slot=preview]:flex"},
   },
   "p-badge-20": {
     name: "p-badge-20",
diff --git a/apps/ui/registry/default/particles/p-badge-19.tsx b/apps/ui/registry/default/particles/p-badge-19.tsx
index 6ba64860f..39d2a1d76 100644
--- a/apps/ui/registry/default/particles/p-badge-19.tsx
+++ b/apps/ui/registry/default/particles/p-badge-19.tsx
@@ -8,15 +8,11 @@ import { Checkbox } from "@/registry/default/ui/checkbox";
 export default function Particle() {
   const id = useId();
   return (
-    <Badge className="relative outline-none has-focus-visible:border-ring has-data-[state=unchecked]:bg-muted has-data-[state=unchecked]:text-muted-foreground has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50">
-      <Checkbox
-        className="peer sr-only after:absolute after:inset-0"
-        defaultChecked
-        id={id}
-      />
+    <Badge className="relative outline-none has-focus-visible:border-ring has-data-unchecked:bg-muted has-data-unchecked:text-muted-foreground has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50">
+      <Checkbox className="peer hidden" defaultChecked id={id} />
       <CheckIcon
         aria-hidden="true"
-        className="hidden peer-data-[state=checked]:block"
+        className="hidden peer-data-checked:block"
       />
       <label
         className="cursor-pointer select-none after:absolute after:inset-0"
diff --git a/apps/ui/registry/registry-particles.ts b/apps/ui/registry/registry-particles.ts
index 52bf8085f..5f6afd02e 100644
--- a/apps/ui/registry/registry-particles.ts
+++ b/apps/ui/registry/registry-particles.ts
@@ -619,6 +619,9 @@ export const particles: ParticleItem[] = [
     dependencies: ["lucide-react"],
     description: "Selectable badge with checkbox",
     files: [{ path: "particles/p-badge-19.tsx", type: "registry:block" }],
+    meta: {
+      className: "**:data-[slot=preview]:flex",
+    },
     name: "p-badge-19",
     registryDependencies: ["@coss/badge", "@coss/checkbox"],
     type: "registry:block",

From 996b077952a733e7866e4a2c19a4df002cb58608 Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Mon, 6 Jul 2026 10:27:08 +0200
Subject: [PATCH 02/49] fix: remove dead data slot attributes (#813)

---
 apps/ui/public/r/autocomplete.json           |  2 +-
 apps/ui/public/r/combobox.json               |  2 +-
 apps/ui/public/r/command.json                |  2 +-
 apps/ui/registry/default/ui/autocomplete.tsx | 21 ++++----------------
 apps/ui/registry/default/ui/combobox.tsx     | 16 ++++-----------
 apps/ui/registry/default/ui/command.tsx      |  6 +-----
 packages/ui/src/components/autocomplete.tsx  | 21 ++++----------------
 packages/ui/src/components/combobox.tsx      | 16 ++++-----------
 packages/ui/src/components/command.tsx       |  6 +-----
 9 files changed, 21 insertions(+), 71 deletions(-)

diff --git a/apps/ui/public/r/autocomplete.json b/apps/ui/public/r/autocomplete.json
index f1a384671..bdfadac5f 100644
--- a/apps/ui/public/r/autocomplete.json
+++ b/apps/ui/public/r/autocomplete.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/autocomplete.tsx",
-      "content": "\"use client\";\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const Autocomplete: typeof AutocompletePrimitive.Root =\n  AutocompletePrimitive.Root;\n\nexport function AutocompleteInput({\n  className,\n  showTrigger = false,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<AutocompletePrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: AutocompletePrimitive.Trigger.Props;\n  clearProps?: AutocompletePrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <AutocompletePrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"autocomplete-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"autocomplete-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <AutocompletePrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=autocomplete-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5\"\n            : \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"autocomplete-input\"\n        render={<Input nativeInput size={sizeValue} />}\n        {...props}\n      />\n      {showTrigger && (\n        <AutocompleteTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <AutocompletePrimitive.Icon data-slot=\"autocomplete-icon\">\n            <ChevronsUpDownIcon />\n          </AutocompletePrimitive.Icon>\n        </AutocompleteTrigger>\n      )}\n      {showClear && (\n        <AutocompleteClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </AutocompleteClear>\n      )}\n    </AutocompletePrimitive.InputGroup>\n  );\n}\n\nexport function AutocompletePopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor,\n  portalProps,\n  ...props\n}: AutocompletePrimitive.Popup.Props & {\n  align?: AutocompletePrimitive.Positioner.Props[\"align\"];\n  sideOffset?: AutocompletePrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: AutocompletePrimitive.Positioner.Props[\"alignOffset\"];\n  side?: AutocompletePrimitive.Positioner.Props[\"side\"];\n  anchor?: AutocompletePrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: AutocompletePrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Portal {...portalProps}>\n      <AutocompletePrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"autocomplete-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <AutocompletePrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"autocomplete-popup\"\n            {...props}\n          >\n            {children}\n          </AutocompletePrimitive.Popup>\n        </span>\n      </AutocompletePrimitive.Positioner>\n    </AutocompletePrimitive.Portal>\n  );\n}\n\nexport function AutocompleteItem({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Item.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Item\n      className={cn(\n        \"flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-item\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Item>\n  );\n}\n\nexport function AutocompleteSeparator({\n  className,\n  ...props\n}: AutocompletePrimitive.Separator.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"autocomplete-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroup({\n  className,\n  ...props\n}: AutocompletePrimitive.Group.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"autocomplete-group\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroupLabel({\n  className,\n  ...props\n}: AutocompletePrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"autocomplete-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteEmpty({\n  className,\n  ...props\n}: AutocompletePrimitive.Empty.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteRow({\n  className,\n  ...props\n}: AutocompletePrimitive.Row.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Row\n      className={className}\n      data-slot=\"autocomplete-row\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteValue({\n  ...props\n}: AutocompletePrimitive.Value.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Value data-slot=\"autocomplete-value\" {...props} />\n  );\n}\n\nexport function AutocompleteList({\n  className,\n  ...props\n}: AutocompletePrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea scrollbarGutter scrollFade>\n      <AutocompletePrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"autocomplete-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function AutocompleteClear({\n  className,\n  ...props\n}: AutocompletePrimitive.Clear.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Clear\n      className={cn(\n        \"absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-[color,background-color,box-shadow,opacity] pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-clear\"\n      {...props}\n    >\n      <XIcon />\n    </AutocompletePrimitive.Clear>\n  );\n}\n\nexport function AutocompleteStatus({\n  className,\n  ...props\n}: AutocompletePrimitive.Status.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-status\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteCollection({\n  ...props\n}: AutocompletePrimitive.Collection.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Collection\n      data-slot=\"autocomplete-collection\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteTrigger({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Trigger\n      className={className}\n      data-slot=\"autocomplete-trigger\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Trigger>\n  );\n}\n\nexport const useAutocompleteFilter: typeof AutocompletePrimitive.useFilter =\n  AutocompletePrimitive.useFilter;\n\nexport { AutocompletePrimitive };\n",
+      "content": "\"use client\";\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const Autocomplete: typeof AutocompletePrimitive.Root =\n  AutocompletePrimitive.Root;\n\nexport function AutocompleteInput({\n  className,\n  showTrigger = false,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<AutocompletePrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: AutocompletePrimitive.Trigger.Props;\n  clearProps?: AutocompletePrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <AutocompletePrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"autocomplete-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"autocomplete-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <AutocompletePrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=autocomplete-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5\"\n            : \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"autocomplete-input\"\n        render={<Input nativeInput size={sizeValue} />}\n        {...props}\n      />\n      {showTrigger && (\n        <AutocompleteTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <AutocompletePrimitive.Icon data-slot=\"autocomplete-icon\">\n            <ChevronsUpDownIcon />\n          </AutocompletePrimitive.Icon>\n        </AutocompleteTrigger>\n      )}\n      {showClear && (\n        <AutocompleteClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </AutocompleteClear>\n      )}\n    </AutocompletePrimitive.InputGroup>\n  );\n}\n\nexport function AutocompletePopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor,\n  portalProps,\n  ...props\n}: AutocompletePrimitive.Popup.Props & {\n  align?: AutocompletePrimitive.Positioner.Props[\"align\"];\n  sideOffset?: AutocompletePrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: AutocompletePrimitive.Positioner.Props[\"alignOffset\"];\n  side?: AutocompletePrimitive.Positioner.Props[\"side\"];\n  anchor?: AutocompletePrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: AutocompletePrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Portal {...portalProps}>\n      <AutocompletePrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"autocomplete-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <AutocompletePrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"autocomplete-popup\"\n            {...props}\n          >\n            {children}\n          </AutocompletePrimitive.Popup>\n        </span>\n      </AutocompletePrimitive.Positioner>\n    </AutocompletePrimitive.Portal>\n  );\n}\n\nexport function AutocompleteItem({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Item.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Item\n      className={cn(\n        \"flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-item\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Item>\n  );\n}\n\nexport function AutocompleteSeparator({\n  className,\n  ...props\n}: AutocompletePrimitive.Separator.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"autocomplete-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroup({\n  className,\n  ...props\n}: AutocompletePrimitive.Group.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"autocomplete-group\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroupLabel({\n  className,\n  ...props\n}: AutocompletePrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"autocomplete-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteEmpty({\n  className,\n  ...props\n}: AutocompletePrimitive.Empty.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteRow({\n  className,\n  ...props\n}: AutocompletePrimitive.Row.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Row\n      className={className}\n      data-slot=\"autocomplete-row\"\n      {...props}\n    />\n  );\n}\n\nexport const AutocompleteValue: typeof AutocompletePrimitive.Value =\n  AutocompletePrimitive.Value;\n\nexport function AutocompleteList({\n  className,\n  ...props\n}: AutocompletePrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea scrollbarGutter scrollFade>\n      <AutocompletePrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"autocomplete-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function AutocompleteClear({\n  className,\n  ...props\n}: AutocompletePrimitive.Clear.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Clear\n      className={cn(\n        \"absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-[color,background-color,box-shadow,opacity] pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-clear\"\n      {...props}\n    >\n      <XIcon />\n    </AutocompletePrimitive.Clear>\n  );\n}\n\nexport function AutocompleteStatus({\n  className,\n  ...props\n}: AutocompletePrimitive.Status.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-status\"\n      {...props}\n    />\n  );\n}\n\nexport const AutocompleteCollection: typeof AutocompletePrimitive.Collection =\n  AutocompletePrimitive.Collection;\n\nexport function AutocompleteTrigger({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Trigger\n      className={className}\n      data-slot=\"autocomplete-trigger\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Trigger>\n  );\n}\n\nexport const useAutocompleteFilter: typeof AutocompletePrimitive.useFilter =\n  AutocompletePrimitive.useFilter;\n\nexport { AutocompletePrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/combobox.json b/apps/ui/public/r/combobox.json
index aa90ef9a4..868d7d2d5 100644
--- a/apps/ui/public/r/combobox.json
+++ b/apps/ui/public/r/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/combobox.tsx",
-      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const ComboboxContext: React.Context<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}> = React.createContext<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}>({\n  chipsRef: null,\n  multiple: false,\n});\n\nexport function Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>,\n): React.ReactElement {\n  const chipsRef = React.useRef<Element | null>(null);\n  return (\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxContext.Provider>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  size,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\",\n        sizeValue === \"sm\" ? \"ps-1.5\" : \"ps-2\",\n        className,\n      )}\n      data-size={typeof sizeValue === \"string\" ? sizeValue : undefined}\n      data-slot=\"combobox-chips-input\"\n      size={typeof sizeValue === \"number\" ? sizeValue : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxInput({\n  className,\n  showTrigger = true,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\n  clearProps?: ComboboxPrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"combobox-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <ComboboxPrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\"\n            : \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"combobox-input\"\n        render={\n          <Input\n            className=\"has-disabled:opacity-100\"\n            nativeInput\n            size={sizeValue}\n          />\n        }\n        {...props}\n      />\n      {showTrigger && (\n        <ComboboxTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <ComboboxPrimitive.Icon data-slot=\"combobox-icon\">\n            <ChevronsUpDownIcon />\n          </ComboboxPrimitive.Icon>\n        </ComboboxTrigger>\n      )}\n      {showClear && (\n        <ComboboxClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </ComboboxClear>\n      )}\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={className}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport function ComboboxPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor: anchorProp,\n  portalProps,\n  ...props\n}: ComboboxPrimitive.Popup.Props & {\n  align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: ComboboxPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n  const anchor = anchorProp ?? chipsRef;\n\n  return (\n    <ComboboxPrimitive.Portal {...portalProps}>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <ComboboxPrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"combobox-popup\"\n            {...props}\n          >\n            {children}\n          </ComboboxPrimitive.Popup>\n        </span>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ComboboxPrimitive.ItemIndicator>\n      <div className=\"col-start-2\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxEmpty({\n  className,\n  ...props\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxRow({\n  className,\n  ...props\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Row\n      className={className}\n      data-slot=\"combobox-row\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxValue({\n  ...props\n}: ComboboxPrimitive.Value.Props): React.ReactElement {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComboboxPrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea scrollbarGutter scrollFade>\n      <ComboboxPrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"combobox-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function ComboboxClear({\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Clear\n      className={className}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxCollection(\n  props: ComboboxPrimitive.Collection.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  );\n}\n\nexport function ComboboxChips({\n  className,\n  children,\n  startAddon,\n  ...props\n}: ComboboxPrimitive.Chips.Props & {\n  startAddon?: React.ReactNode;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"combobox-chips\"\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\n      {...props}\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      {children}\n    </ComboboxPrimitive.Chips>\n  );\n}\n\nexport function ComboboxChip({\n  children,\n  removeProps,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\n}): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Chip\n      className=\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove {...removeProps} />\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nexport function ComboboxChipRemove(\n  props: ComboboxPrimitive.ChipRemove.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      aria-label=\"Remove\"\n      className=\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      <XIcon />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\n  ComboboxPrimitive.useFilter;\n\nexport { ComboboxPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const ComboboxContext: React.Context<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}> = React.createContext<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}>({\n  chipsRef: null,\n  multiple: false,\n});\n\nexport function Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>,\n): React.ReactElement {\n  const chipsRef = React.useRef<Element | null>(null);\n  return (\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxContext.Provider>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  size,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\",\n        sizeValue === \"sm\" ? \"ps-1.5\" : \"ps-2\",\n        className,\n      )}\n      data-size={typeof sizeValue === \"string\" ? sizeValue : undefined}\n      data-slot=\"combobox-chips-input\"\n      size={typeof sizeValue === \"number\" ? sizeValue : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxInput({\n  className,\n  showTrigger = true,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\n  clearProps?: ComboboxPrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"combobox-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <ComboboxPrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\"\n            : \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"combobox-input\"\n        render={\n          <Input\n            className=\"has-disabled:opacity-100\"\n            nativeInput\n            size={sizeValue}\n          />\n        }\n        {...props}\n      />\n      {showTrigger && (\n        <ComboboxTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <ComboboxPrimitive.Icon data-slot=\"combobox-icon\">\n            <ChevronsUpDownIcon />\n          </ComboboxPrimitive.Icon>\n        </ComboboxTrigger>\n      )}\n      {showClear && (\n        <ComboboxClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </ComboboxClear>\n      )}\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={className}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport function ComboboxPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor: anchorProp,\n  portalProps,\n  ...props\n}: ComboboxPrimitive.Popup.Props & {\n  align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: ComboboxPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n  const anchor = anchorProp ?? chipsRef;\n\n  return (\n    <ComboboxPrimitive.Portal {...portalProps}>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <ComboboxPrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"combobox-popup\"\n            {...props}\n          >\n            {children}\n          </ComboboxPrimitive.Popup>\n        </span>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ComboboxPrimitive.ItemIndicator>\n      <div className=\"col-start-2\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxEmpty({\n  className,\n  ...props\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxRow({\n  className,\n  ...props\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Row\n      className={className}\n      data-slot=\"combobox-row\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxValue: typeof ComboboxPrimitive.Value =\n  ComboboxPrimitive.Value;\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComboboxPrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea scrollbarGutter scrollFade>\n      <ComboboxPrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"combobox-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function ComboboxClear({\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Clear\n      className={className}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxCollection: typeof ComboboxPrimitive.Collection =\n  ComboboxPrimitive.Collection;\n\nexport function ComboboxChips({\n  className,\n  children,\n  startAddon,\n  ...props\n}: ComboboxPrimitive.Chips.Props & {\n  startAddon?: React.ReactNode;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"combobox-chips\"\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\n      {...props}\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      {children}\n    </ComboboxPrimitive.Chips>\n  );\n}\n\nexport function ComboboxChip({\n  children,\n  removeProps,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\n}): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Chip\n      className=\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove {...removeProps} />\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nexport function ComboboxChipRemove(\n  props: ComboboxPrimitive.ChipRemove.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      aria-label=\"Remove\"\n      className=\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      <XIcon />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\n  ComboboxPrimitive.useFilter;\n\nexport { ComboboxPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/command.json b/apps/ui/public/r/command.json
index 6a16b07e9..8c2bf691d 100644
--- a/apps/ui/public/r/command.json
+++ b/apps/ui/public/r/command.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/ui/command.tsx",
-      "content": "\"use client\";\n\nimport { Dialog as CommandDialogPrimitive } from \"@base-ui/react/dialog\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Autocomplete,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\";\n\nexport const CommandDialog: typeof CommandDialogPrimitive.Root =\n  CommandDialogPrimitive.Root;\n\nexport const CommandDialogPortal: typeof CommandDialogPrimitive.Portal =\n  CommandDialogPrimitive.Portal;\n\nexport const CommandCreateHandle: typeof CommandDialogPrimitive.createHandle =\n  CommandDialogPrimitive.createHandle;\n\nexport function CommandDialogTrigger(\n  props: CommandDialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Trigger\n      data-slot=\"command-dialog-trigger\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogBackdrop({\n  className,\n  ...props\n}: CommandDialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"command-dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogViewport({\n  className,\n  ...props\n}: CommandDialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]\",\n        className,\n      )}\n      data-slot=\"command-dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogPopup({\n  className,\n  children,\n  portalProps,\n  ...props\n}: CommandDialogPrimitive.Popup.Props & {\n  portalProps?: CommandDialogPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <CommandDialogPortal {...portalProps}>\n      <CommandDialogBackdrop />\n      <CommandDialogViewport>\n        <CommandDialogPrimitive.Popup\n          className={cn(\n            \"relative row-start-2 flex max-h-105 min-h-0 w-full min-w-0 max-w-xl -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n          data-slot=\"command-dialog-popup\"\n          {...props}\n        >\n          {children}\n        </CommandDialogPrimitive.Popup>\n      </CommandDialogViewport>\n    </CommandDialogPortal>\n  );\n}\n\nexport function Command({\n  autoHighlight = \"always\",\n  keepHighlight = true,\n  ...props\n}: React.ComponentProps<typeof Autocomplete>): React.ReactElement {\n  return (\n    <Autocomplete\n      autoHighlight={autoHighlight}\n      inline\n      keepHighlight={keepHighlight}\n      open\n      {...props}\n    />\n  );\n}\n\nexport function CommandInput({\n  className,\n  placeholder = undefined,\n  ...props\n}: React.ComponentProps<typeof AutocompleteInput>): React.ReactElement {\n  return (\n    <div className=\"px-2.5 py-1.5\">\n      <AutocompleteInput\n        autoFocus\n        className={cn(\n          \"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0\",\n          className,\n        )}\n        placeholder={placeholder}\n        size=\"lg\"\n        startAddon={<SearchIcon />}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteList>): React.ReactElement {\n  return (\n    <AutocompleteList\n      className={cn(\"not-empty:scroll-py-2 not-empty:p-2\", className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteEmpty>): React.ReactElement {\n  return (\n    <AutocompleteEmpty\n      className={cn(\"not-empty:py-6\", className)}\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandPanel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative -mx-px not-has-[+[data-slot=command-footer]]:-mb-px min-h-0 rounded-t-xl not-has-[+[data-slot=command-footer]]:rounded-b-2xl border border-b-0 bg-popover bg-clip-padding shadow-xs/5 [clip-path:inset(0_1px)] not-has-[+[data-slot=command-footer]]:[clip-path:inset(0_1px_1px_1px_round_0_0_calc(var(--radius-2xl)-1px)_calc(var(--radius-2xl)-1px))] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroup>): React.ReactElement {\n  return (\n    <AutocompleteGroup\n      className={className}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroupLabel>): React.ReactElement {\n  return (\n    <AutocompleteGroupLabel\n      className={className}\n      data-slot=\"command-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandCollection({\n  ...props\n}: React.ComponentProps<typeof AutocompleteCollection>): React.ReactElement {\n  return <AutocompleteCollection data-slot=\"command-collection\" {...props} />;\n}\n\nexport function CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteItem>): React.ReactElement {\n  return (\n    <AutocompleteItem\n      className={cn(\"py-1.5\", className)}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteSeparator>): React.ReactElement {\n  return (\n    <AutocompleteSeparator\n      className={cn(\"my-2\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\n        \"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] border-t px-5 py-3 text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"command-footer\"\n      {...props}\n    />\n  );\n}\n\nexport { CommandDialogPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Dialog as CommandDialogPrimitive } from \"@base-ui/react/dialog\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Autocomplete,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\";\n\nexport const CommandDialog: typeof CommandDialogPrimitive.Root =\n  CommandDialogPrimitive.Root;\n\nexport const CommandDialogPortal: typeof CommandDialogPrimitive.Portal =\n  CommandDialogPrimitive.Portal;\n\nexport const CommandCreateHandle: typeof CommandDialogPrimitive.createHandle =\n  CommandDialogPrimitive.createHandle;\n\nexport function CommandDialogTrigger(\n  props: CommandDialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Trigger\n      data-slot=\"command-dialog-trigger\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogBackdrop({\n  className,\n  ...props\n}: CommandDialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"command-dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogViewport({\n  className,\n  ...props\n}: CommandDialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]\",\n        className,\n      )}\n      data-slot=\"command-dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogPopup({\n  className,\n  children,\n  portalProps,\n  ...props\n}: CommandDialogPrimitive.Popup.Props & {\n  portalProps?: CommandDialogPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <CommandDialogPortal {...portalProps}>\n      <CommandDialogBackdrop />\n      <CommandDialogViewport>\n        <CommandDialogPrimitive.Popup\n          className={cn(\n            \"relative row-start-2 flex max-h-105 min-h-0 w-full min-w-0 max-w-xl -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n          data-slot=\"command-dialog-popup\"\n          {...props}\n        >\n          {children}\n        </CommandDialogPrimitive.Popup>\n      </CommandDialogViewport>\n    </CommandDialogPortal>\n  );\n}\n\nexport function Command({\n  autoHighlight = \"always\",\n  keepHighlight = true,\n  ...props\n}: React.ComponentProps<typeof Autocomplete>): React.ReactElement {\n  return (\n    <Autocomplete\n      autoHighlight={autoHighlight}\n      inline\n      keepHighlight={keepHighlight}\n      open\n      {...props}\n    />\n  );\n}\n\nexport function CommandInput({\n  className,\n  placeholder = undefined,\n  ...props\n}: React.ComponentProps<typeof AutocompleteInput>): React.ReactElement {\n  return (\n    <div className=\"px-2.5 py-1.5\">\n      <AutocompleteInput\n        autoFocus\n        className={cn(\n          \"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0\",\n          className,\n        )}\n        placeholder={placeholder}\n        size=\"lg\"\n        startAddon={<SearchIcon />}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteList>): React.ReactElement {\n  return (\n    <AutocompleteList\n      className={cn(\"not-empty:scroll-py-2 not-empty:p-2\", className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteEmpty>): React.ReactElement {\n  return (\n    <AutocompleteEmpty\n      className={cn(\"not-empty:py-6\", className)}\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandPanel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative -mx-px not-has-[+[data-slot=command-footer]]:-mb-px min-h-0 rounded-t-xl not-has-[+[data-slot=command-footer]]:rounded-b-2xl border border-b-0 bg-popover bg-clip-padding shadow-xs/5 [clip-path:inset(0_1px)] not-has-[+[data-slot=command-footer]]:[clip-path:inset(0_1px_1px_1px_round_0_0_calc(var(--radius-2xl)-1px)_calc(var(--radius-2xl)-1px))] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroup>): React.ReactElement {\n  return (\n    <AutocompleteGroup\n      className={className}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroupLabel>): React.ReactElement {\n  return (\n    <AutocompleteGroupLabel\n      className={className}\n      data-slot=\"command-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport const CommandCollection = AutocompleteCollection;\n\nexport function CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteItem>): React.ReactElement {\n  return (\n    <AutocompleteItem\n      className={cn(\"py-1.5\", className)}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteSeparator>): React.ReactElement {\n  return (\n    <AutocompleteSeparator\n      className={cn(\"my-2\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\n        \"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] border-t px-5 py-3 text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"command-footer\"\n      {...props}\n    />\n  );\n}\n\nexport { CommandDialogPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/registry/default/ui/autocomplete.tsx b/apps/ui/registry/default/ui/autocomplete.tsx
index 8635fead4..161ca6a55 100644
--- a/apps/ui/registry/default/ui/autocomplete.tsx
+++ b/apps/ui/registry/default/ui/autocomplete.tsx
@@ -223,13 +223,8 @@ export function AutocompleteRow({
   );
 }
 
-export function AutocompleteValue({
-  ...props
-}: AutocompletePrimitive.Value.Props): React.ReactElement {
-  return (
-    <AutocompletePrimitive.Value data-slot="autocomplete-value" {...props} />
-  );
-}
+export const AutocompleteValue: typeof AutocompletePrimitive.Value =
+  AutocompletePrimitive.Value;
 
 export function AutocompleteList({
   className,
@@ -283,16 +278,8 @@ export function AutocompleteStatus({
   );
 }
 
-export function AutocompleteCollection({
-  ...props
-}: AutocompletePrimitive.Collection.Props): React.ReactElement {
-  return (
-    <AutocompletePrimitive.Collection
-      data-slot="autocomplete-collection"
-      {...props}
-    />
-  );
-}
+export const AutocompleteCollection: typeof AutocompletePrimitive.Collection =
+  AutocompletePrimitive.Collection;
 
 export function AutocompleteTrigger({
   className,
diff --git a/apps/ui/registry/default/ui/combobox.tsx b/apps/ui/registry/default/ui/combobox.tsx
index 174e38853..72f12f665 100644
--- a/apps/ui/registry/default/ui/combobox.tsx
+++ b/apps/ui/registry/default/ui/combobox.tsx
@@ -308,11 +308,8 @@ export function ComboboxRow({
   );
 }
 
-export function ComboboxValue({
-  ...props
-}: ComboboxPrimitive.Value.Props): React.ReactElement {
-  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
-}
+export const ComboboxValue: typeof ComboboxPrimitive.Value =
+  ComboboxPrimitive.Value;
 
 export function ComboboxList({
   className,
@@ -361,13 +358,8 @@ export function ComboboxStatus({
   );
 }
 
-export function ComboboxCollection(
-  props: ComboboxPrimitive.Collection.Props,
-): React.ReactElement {
-  return (
-    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
-  );
-}
+export const ComboboxCollection: typeof ComboboxPrimitive.Collection =
+  ComboboxPrimitive.Collection;
 
 export function ComboboxChips({
   className,
diff --git a/apps/ui/registry/default/ui/command.tsx b/apps/ui/registry/default/ui/command.tsx
index b111999e6..f68092efa 100644
--- a/apps/ui/registry/default/ui/command.tsx
+++ b/apps/ui/registry/default/ui/command.tsx
@@ -200,11 +200,7 @@ export function CommandGroupLabel({
   );
 }
 
-export function CommandCollection({
-  ...props
-}: React.ComponentProps<typeof AutocompleteCollection>): React.ReactElement {
-  return <AutocompleteCollection data-slot="command-collection" {...props} />;
-}
+export const CommandCollection = AutocompleteCollection;
 
 export function CommandItem({
   className,
diff --git a/packages/ui/src/components/autocomplete.tsx b/packages/ui/src/components/autocomplete.tsx
index be8303d26..8c49b3e12 100644
--- a/packages/ui/src/components/autocomplete.tsx
+++ b/packages/ui/src/components/autocomplete.tsx
@@ -223,13 +223,8 @@ export function AutocompleteRow({
   );
 }
 
-export function AutocompleteValue({
-  ...props
-}: AutocompletePrimitive.Value.Props): React.ReactElement {
-  return (
-    <AutocompletePrimitive.Value data-slot="autocomplete-value" {...props} />
-  );
-}
+export const AutocompleteValue: typeof AutocompletePrimitive.Value =
+  AutocompletePrimitive.Value;
 
 export function AutocompleteList({
   className,
@@ -283,16 +278,8 @@ export function AutocompleteStatus({
   );
 }
 
-export function AutocompleteCollection({
-  ...props
-}: AutocompletePrimitive.Collection.Props): React.ReactElement {
-  return (
-    <AutocompletePrimitive.Collection
-      data-slot="autocomplete-collection"
-      {...props}
-    />
-  );
-}
+export const AutocompleteCollection: typeof AutocompletePrimitive.Collection =
+  AutocompletePrimitive.Collection;
 
 export function AutocompleteTrigger({
   className,
diff --git a/packages/ui/src/components/combobox.tsx b/packages/ui/src/components/combobox.tsx
index b9d198d56..c63e98ae7 100644
--- a/packages/ui/src/components/combobox.tsx
+++ b/packages/ui/src/components/combobox.tsx
@@ -308,11 +308,8 @@ export function ComboboxRow({
   );
 }
 
-export function ComboboxValue({
-  ...props
-}: ComboboxPrimitive.Value.Props): React.ReactElement {
-  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
-}
+export const ComboboxValue: typeof ComboboxPrimitive.Value =
+  ComboboxPrimitive.Value;
 
 export function ComboboxList({
   className,
@@ -361,13 +358,8 @@ export function ComboboxStatus({
   );
 }
 
-export function ComboboxCollection(
-  props: ComboboxPrimitive.Collection.Props,
-): React.ReactElement {
-  return (
-    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
-  );
-}
+export const ComboboxCollection: typeof ComboboxPrimitive.Collection =
+  ComboboxPrimitive.Collection;
 
 export function ComboboxChips({
   className,
diff --git a/packages/ui/src/components/command.tsx b/packages/ui/src/components/command.tsx
index 7d43f5c06..564c90d72 100644
--- a/packages/ui/src/components/command.tsx
+++ b/packages/ui/src/components/command.tsx
@@ -200,11 +200,7 @@ export function CommandGroupLabel({
   );
 }
 
-export function CommandCollection({
-  ...props
-}: React.ComponentProps<typeof AutocompleteCollection>): React.ReactElement {
-  return <AutocompleteCollection data-slot="command-collection" {...props} />;
-}
+export const CommandCollection = AutocompleteCollection;
 
 export function CommandItem({
   className,

From 598034332b85fc1d024ea45443865e46b606ce25 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 6 Jul 2026 17:26:05 +0000
Subject: [PATCH 03/49] Revert "improve transition"

This reverts commit 527060a9559df46f7c814abd3554089b35914b70.
---
 apps/ui/registry/default/atoms/booker-1.tsx    |  2 +-
 .../ui/registry/default/ui/size-transition.tsx | 18 +++++-------------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index 9a7fc16db..7baae65f2 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -147,7 +147,7 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
         <SizeTransition
           transitionKey={booker.step}
           render={
-            <div className="h-(--size-height,auto) w-full @3xl:w-(--size-width,auto) transition-[width,height] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-transitioning:overflow-clip **:data-current:transition-opacity **:data-current:data-starting-style:opacity-0 **:data-previous:transition-opacity **:data-previous:data-ending-style:opacity-0" />
+            <div className="h-(--size-height,auto) w-full @3xl:w-(--size-width,auto) transition-[width,height] data-transitioning:overflow-clip **:data-current:transition-opacity **:data-current:data-starting-style:opacity-0 **:data-previous:transition-opacity **:data-previous:data-ending-style:opacity-0" />
           }
         >
           {booker.step === "select" ? (
diff --git a/apps/ui/registry/default/ui/size-transition.tsx b/apps/ui/registry/default/ui/size-transition.tsx
index 0432e194c..524e99537 100644
--- a/apps/ui/registry/default/ui/size-transition.tsx
+++ b/apps/ui/registry/default/ui/size-transition.tsx
@@ -128,9 +128,8 @@ export function SizeTransition({
     React.useState<HTMLElement | null>(null);
   const [previousSize, setPreviousSize] = React.useState<Size | null>(null);
   const [startingStyle, setStartingStyle] = React.useState(false);
-  const [sizeTransitioning, setSizeTransitioning] = React.useState(false);
 
-  const hasPreviousLayer = previousContent !== null;
+  const isTransitioning = previousContent !== null;
 
   useIsoLayoutEffect(() => {
     const element = rootRef.current;
@@ -153,8 +152,6 @@ export function SizeTransition({
     const outgoingContent = snapshotRef.current;
     const previousSizeValue = committedSizeRef.current;
 
-    setSizeTransitioning(true);
-
     if (outgoingContent) {
       setPreviousContent(outgoingContent);
       setStartingStyle(true);
@@ -194,7 +191,6 @@ export function SizeTransition({
         () => {
           releaseSize(element);
           currentRef.current?.style.removeProperty("width");
-          setSizeTransitioning(false);
         },
         sizeAbort.signal,
       );
@@ -241,15 +237,11 @@ export function SizeTransition({
   });
 
   const contextValue = React.useMemo<SizeTransitionContextValue>(
-    () => ({
-      currentRef,
-      startingStyle,
-      transitioning: hasPreviousLayer || sizeTransitioning,
-    }),
-    [hasPreviousLayer, sizeTransitioning, startingStyle],
+    () => ({ currentRef, startingStyle, transitioning: isTransitioning }),
+    [isTransitioning, startingStyle],
   );
 
-  const content = hasPreviousLayer ? (
+  const content = isTransitioning ? (
     <React.Fragment>
       {children}
       {/* After `children` so inserting this layer never remounts the panel. */}
@@ -283,7 +275,7 @@ export function SizeTransition({
     props: mergeProps<"div">(defaultProps, props, { children: content }),
     render,
     ref: rootRef,
-    state: { transitioning: sizeTransitioning },
+    state: { transitioning: isTransitioning },
     stateAttributesMapping: {
       transitioning: (value) => (value ? { "data-transitioning": "" } : null),
     },

From 48feaf4aad5920e0c49731621da8f2dcf5081a27 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 6 Jul 2026 17:26:05 +0000
Subject: [PATCH 04/49] Revert "size transition component"

This reverts commit f22fbde7ea00e3080534a0ff3bb41fd96b83b16f.
---
 apps/ui/public/r/booker-1.json                |  10 +-
 apps/ui/public/r/registry.json                |  16 -
 apps/ui/public/r/size-transition.json         |  15 -
 apps/ui/public/r/ui.json                      |   1 -
 apps/ui/registry.json                         |  16 -
 apps/ui/registry/__index__.tsx                |  20 +-
 apps/ui/registry/default/atoms/booker-1.tsx   |  27 +-
 .../registry/default/ui/size-transition.tsx   | 318 ------------------
 apps/ui/registry/registry-atoms.ts            |   1 -
 apps/ui/registry/registry-ui.ts               |  12 -
 10 files changed, 11 insertions(+), 425 deletions(-)
 delete mode 100644 apps/ui/public/r/size-transition.json
 delete mode 100644 apps/ui/registry/default/ui/size-transition.tsx

diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index bb29c4871..0b6431ef9 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -14,12 +14,10 @@
     "@coss/card",
     "@coss/combobox",
     "@coss/empty",
-    "@coss/input",
     "@coss/label",
     "@coss/popover",
     "@coss/scroll-area",
     "@coss/select",
-    "@coss/size-transition",
     "@coss/skeleton",
     "@coss/switch",
     "@coss/tooltip"
@@ -27,13 +25,13 @@
   "files": [
     {
       "path": "registry/default/atoms/booker-1.tsx",
-      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { SizeTransition } from \"@/registry/default/ui/size-transition\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row [--booker-side:--spacing(56)] @5xl:[--booker-side:--spacing(70)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) border-b @3xl:border-b-0 @3xl:border-e\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <SizeTransition\n          transitionKey={booker.step}\n          render={\n            <div className=\"h-(--size-height,auto) w-full @3xl:w-(--size-width,auto) @3xl:self-start transition-[width,height] data-transitioning:overflow-clip **:data-current:transition-opacity **:data-current:data-starting-style:opacity-0 **:data-previous:transition-opacity **:data-previous:data-ending-style:opacity-0\" />\n          }\n        >\n          {booker.step === \"select\" ? (\n            <div className=\"flex w-full flex-col @3xl:flex-row\">\n              {/* Calendar */}\n              <div className=\"flex w-full @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                <BookerCalendar {...booker.calendarProps} />\n              </div>\n              {/* Time picker */}\n              <TimePicker\n                labels={{\n                  hour12Short: t.hour12Short,\n                  hour24Short: t.hour24Short,\n                  noAvailableTimes: t.noAvailableTimes,\n                  noSlotsAvailable: t.noSlotsAvailable,\n                  noSlotsThisDay: t.noSlotsThisDay,\n                  noSlotsThisMonth: t.noSlotsThisMonth,\n                  use24Hour: t.use24Hour,\n                  viewFirstAvailability: t.viewFirstAvailability,\n                }}\n                {...booker.timePickerProps}\n              />\n            </div>\n          ) : (\n            <div className=\"w-full @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n              <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                <ArrowLeftIcon aria-hidden=\"true\" />\n                Back\n              </Button>\n              <Input className=\"w-full\" placeholder=\"Your name\" />\n            </div>\n          )}\n        </SizeTransition>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
+      "content": "\"use client\";\n\nimport { Clock3Icon } from \"lucide-react\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container mx-auto flex w-full max-w-5xl flex-1 flex-col items-center justify-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"w-full @3xl:flex-row @3xl:divide-x divide-y @3xl:divide-y-0\">\n        {/* Meta */}\n        <div className=\"@3xl:w-56 @5xl:w-70\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        {/* Calendar */}\n        <div className=\"flex flex-1 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n          <BookerCalendar {...booker.calendarProps} />\n        </div>\n        {/* Time picker */}\n        <TimePicker\n          labels={{\n            hour12Short: t.hour12Short,\n            hour24Short: t.hour24Short,\n            noAvailableTimes: t.noAvailableTimes,\n            noSlotsAvailable: t.noSlotsAvailable,\n            noSlotsThisDay: t.noSlotsThisDay,\n            noSlotsThisMonth: t.noSlotsThisMonth,\n            use24Hour: t.use24Hour,\n            viewFirstAvailability: t.viewFirstAvailability,\n          }}\n          {...booker.timePickerProps}\n        />\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
       "type": "registry:block",
       "target": "components/atoms/booker-1.tsx"
     },
     {
       "path": "registry/default/atoms/booker/booker-calendar.tsx",
-      "content": "\"use client\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipCreateHandle,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\n// A single shared tooltip reused across every day cell (via the handle/payload\n// pattern). Reusing one instance lets it gracefully move/scale between days\n// instead of mounting a separate tooltip per cell.\nconst monthTooltipHandle = TooltipCreateHandle<string>();\n\n// Falls back to English (US) when no `locale` prop is provided.\nconst DEFAULT_LOCALE = \"en-US\";\n\ntype CalendarLabels = {\n  /** ARIA label for the previous-month navigation button. */\n  previousMonth: string;\n  /** ARIA label for the next-month navigation button. */\n  nextMonth: string;\n  /** ARIA label for the navigation toolbar. */\n  nav: string;\n  /** Prefix for today's day button label, e.g. \"Today, Monday, …\". */\n  today: string;\n  /** Suffix for the selected day button label, e.g. \"…, selected\". */\n  selected: string;\n};\n\n// English defaults. Localize by passing translated strings via the `labels`\n// prop (wire it up to your app's own i18n layer); date/weekday/month names are\n// still localized automatically from `locale` via `Intl`.\nconst DEFAULT_LABELS: CalendarLabels = {\n  previousMonth: \"Go to the Previous Month\",\n  nextMonth: \"Go to the Next Month\",\n  nav: \"Navigation bar\",\n  today: \"Today\",\n  selected: \"selected\",\n};\n\n// Resolves the text direction for the locale (e.g. \"rtl\" for Arabic/Hebrew).\nfunction getTextDirection(locale: string): \"ltr\" | \"rtl\" {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      textInfo?: { direction?: string };\n      getTextInfo?: () => { direction?: string };\n    };\n    const info =\n      typeof localeObj.getTextInfo === \"function\"\n        ? localeObj.getTextInfo()\n        : localeObj.textInfo;\n    if (info?.direction === \"rtl\") {\n      return \"rtl\";\n    }\n  } catch {\n    // Fall through to the ltr default below.\n  }\n  return \"ltr\";\n}\n\n// Locale-aware formatting/ordering, derived from a BCP-47 locale string.\ntype Localization = {\n  weekStartsOn: number;\n  monthYearLabel: (date: Date) => string;\n  fullDateLabel: (date: Date) => string;\n  monthShortLabel: (date: Date) => string;\n  monthLongLabel: (date: Date) => string;\n  weekdayLong: (date: Date) => string;\n  weekdayShort: (date: Date) => string;\n  dayNumber: (date: Date) => string;\n  captionFormatter: Intl.DateTimeFormat;\n};\n\n// 1 = Monday … 7 = Sunday (ISO) → JS getDay() index (0 = Sunday … 6 = Saturday).\nfunction getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction buildLocalization(\n  locale: string,\n  weekStartsOnOverride?: number,\n): Localization {\n  const longDateFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n    year: \"numeric\",\n    month: \"long\",\n    day: \"numeric\",\n  });\n  const monthYearFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n    year: \"numeric\",\n  });\n  const monthShortFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  });\n  const monthLongFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n  });\n  const weekdayLongFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n  });\n  const weekdayShortFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  });\n  const dayFormatter = new Intl.DateTimeFormat(locale, { day: \"numeric\" });\n\n  return {\n    weekStartsOn: weekStartsOnOverride ?? getWeekStartsOn(locale),\n    monthYearLabel: (date) => monthYearFormatter.format(date),\n    fullDateLabel: (date) => longDateFormatter.format(date),\n    monthShortLabel: (date) => monthShortFormatter.format(date),\n    monthLongLabel: (date) => monthLongFormatter.format(date),\n    weekdayLong: (date) => weekdayLongFormatter.format(date),\n    weekdayShort: (date) => weekdayShortFormatter.format(date),\n    dayNumber: (date) => dayFormatter.format(date),\n    captionFormatter: monthYearFormatter,\n  };\n}\n\nfunction pad2(value: number): string {\n  return value < 10 ? `0${value}` : String(value);\n}\n\nfunction isoDate(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;\n}\n\nfunction isoMonth(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}`;\n}\n\nfunction startOfDay(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n}\n\nfunction startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction addDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction addMonths(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth() + amount, date.getDate());\n}\n\nfunction startOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = startOfDay(date);\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return addDays(day, -diff);\n}\n\nfunction endOfWeek(date: Date, weekStartsOn = 0): Date {\n  return addDays(startOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nfunction isSameMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nfunction differenceInCalendarMonths(a: Date, b: Date): number {\n  return (\n    (a.getFullYear() - b.getFullYear()) * 12 + (a.getMonth() - b.getMonth())\n  );\n}\n\ntype CalendarDay = {\n  date: Date;\n  outside: boolean;\n  isoDate: string;\n  dateMonthId: string;\n};\n\ntype DayModifiers = {\n  focused: boolean;\n  disabled: boolean;\n  hidden: boolean;\n  outside: boolean;\n  today: boolean;\n  selected: boolean;\n};\n\n// Builds the month grid as full weeks covering the month.\n//\n// `shiftRows` slides the window forward by that many weeks, dropping the\n// month's earliest week(s). When `fillToSix` is set the grid is then padded to\n// a full 6 rows with days from the next month. Together they keep today's week\n// plus the next two visible without exceeding 6 rows; with both at their\n// defaults the month spans only the weeks it naturally needs.\nfunction buildCalendarDays(\n  month: Date,\n  weekStartsOn: number,\n  shiftRows: number,\n  fillToSix: boolean,\n): CalendarDay[] {\n  const monthStart = startOfMonth(month);\n  const offset = shiftRows * 7;\n  const gridStart = addDays(startOfWeek(monthStart, weekStartsOn), offset);\n  const gridEnd = addDays(endOfWeek(endOfMonth(month), weekStartsOn), offset);\n\n  const dates: Date[] = [];\n  for (let cursor = gridStart; cursor <= gridEnd; cursor = addDays(cursor, 1)) {\n    dates.push(cursor);\n  }\n\n  if (fillToSix) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(addDays(lastDate, 1));\n    }\n  }\n\n  return dates.map((date) => ({\n    date,\n    outside: !isSameMonth(date, month),\n    isoDate: isoDate(date),\n    dateMonthId: isoMonth(date),\n  }));\n}\n\nfunction chunkWeeks(days: CalendarDay[]): CalendarDay[][] {\n  const weeks: CalendarDay[][] = [];\n  for (let i = 0; i < days.length; i += 7) {\n    weeks.push(days.slice(i, i + 7));\n  }\n  return weeks;\n}\n\nfunction isFocusableDay(modifiers: DayModifiers): boolean {\n  return !modifiers.disabled && !modifiers.hidden && !modifiers.outside;\n}\n\n// A single day cell's button. Focuses itself when it becomes the roving-tabindex\n// target so keyboard navigation moves the actual DOM focus.\nfunction DayButton({\n  focused,\n  nextMonthLabel,\n  tooltip,\n  children,\n  ...buttonProps\n}: ComponentProps<\"button\"> & {\n  focused: boolean;\n  nextMonthLabel?: string;\n  tooltip?: string;\n}): ReactElement {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (focused) ref.current?.focus();\n  }, [focused]);\n\n  const button = (\n    <button ref={ref} {...buttonProps}>\n      {children}\n      {nextMonthLabel ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute @5xl:end-1.5 end-1 @3xl:top-1.5 top-1 font-medium in-data-selected:text-primary-foreground/72 text-[10px] text-muted-foreground leading-none\"\n        >\n          {nextMonthLabel}\n        </span>\n      ) : null}\n    </button>\n  );\n\n  if (!tooltip) return button;\n\n  return (\n    <TooltipTrigger\n      handle={monthTooltipHandle}\n      payload={tooltip}\n      render={button}\n    />\n  );\n}\n\n// Month + year heading; the year is muted via formatToParts so it stays\n// locale-correct (some locales render \"2026 June\").\nfunction MonthCaption({\n  date,\n  formatter,\n  className,\n}: {\n  date: Date;\n  formatter: Intl.DateTimeFormat;\n  className?: string;\n}): ReactElement {\n  return (\n    <div\n      className={cn(\n        \"@5xl:ps-1 font-heading @3xl:@max-5xl:text-base text-lg\",\n        className,\n      )}\n    >\n      {formatter.formatToParts(date).map((part) =>\n        part.type === \"year\" ? (\n          <span key={`year-${part.value}`} className=\"text-muted-foreground/72\">\n            {part.value}\n          </span>\n        ) : (\n          part.value\n        ),\n      )}\n    </div>\n  );\n}\n\ntype MoveBy = \"day\" | \"week\" | \"month\" | \"year\" | \"startOfWeek\" | \"endOfWeek\";\ntype MoveDir = \"before\" | \"after\";\n\nexport type BookerCalendarProps = {\n  className?: string;\n  /**\n   * For the current month, once today reaches the 4th row, keep its week plus\n   * the next two visible within the 6-row grid: extend into next-month days,\n   * and slide the window down (dropping early weeks) only when today sits too\n   * low for those two weeks to fit. Off renders a plain month grid. On by\n   * default.\n   */\n  shiftWeeks?: boolean;\n  availabilityLoading?: boolean;\n  initialLoading?: boolean;\n  month?: Date;\n  defaultMonth?: Date;\n  startMonth?: Date;\n  endMonth?: Date;\n  selected?: Date;\n  onSelect?: (date: Date | undefined, triggerDate: Date) => void;\n  onMonthChange?: (month: Date) => void;\n  disabled?: (date: Date) => boolean;\n  /** BCP-47 locale tag used to localize day/month/weekday names and ARIA labels. */\n  locale?: string;\n  /** Override the locale's first day of the week (0 = Sunday … 6 = Saturday). */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /** Text direction; defaults to the locale's direction (\"rtl\" for ar/he/…). */\n  dir?: \"ltr\" | \"rtl\";\n  /** Translatable strings for the navigation buttons and day button states. */\n  labels?: Partial<CalendarLabels>;\n  /** Reference \"today\" for highlighting and week shifting; defaults to now. */\n  today?: Date;\n};\n\nexport function BookerCalendar({\n  className,\n  shiftWeeks = true,\n  availabilityLoading = false,\n  initialLoading = false,\n  month,\n  defaultMonth,\n  startMonth,\n  endMonth,\n  selected,\n  onSelect,\n  onMonthChange,\n  disabled,\n  locale = DEFAULT_LOCALE,\n  weekStartsOn,\n  dir,\n  labels,\n  today: todayProp,\n}: BookerCalendarProps): ReactElement {\n  const dayCellsLoading = initialLoading || availabilityLoading;\n  const localization = useMemo(\n    () => buildLocalization(locale, weekStartsOn),\n    [locale, weekStartsOn],\n  );\n  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };\n  const resolvedDir = dir ?? getTextDirection(locale);\n  const weekStart = localization.weekStartsOn;\n\n  const today = todayProp ?? new Date();\n\n  // The month is controlled by the parent (via `month`/`onMonthChange`), but we\n  // keep an internal fallback so the calendar works uncontrolled too.\n  const [internalMonth, setInternalMonth] = useState(() =>\n    startOfMonth(month ?? defaultMonth ?? today),\n  );\n  const monthTime = month ? startOfMonth(month).getTime() : undefined;\n  useEffect(() => {\n    if (monthTime !== undefined) {\n      setInternalMonth(new Date(monthTime));\n    }\n  }, [monthTime]);\n\n  const firstMonth = month ? startOfMonth(month) : internalMonth;\n\n  const [focusedDate, setFocusedDate] = useState<Date | undefined>(undefined);\n  const [lastFocusedDate, setLastFocusedDate] = useState<Date | undefined>(\n    undefined,\n  );\n\n  const navStart = startMonth ? startOfMonth(startMonth) : undefined;\n  const navEnd = endMonth ? startOfMonth(endMonth) : undefined;\n\n  const previousMonth =\n    navStart && differenceInCalendarMonths(firstMonth, navStart) <= 0\n      ? undefined\n      : addMonths(firstMonth, -1);\n  const nextMonth =\n    navEnd && differenceInCalendarMonths(navEnd, firstMonth) <= 0\n      ? undefined\n      : addMonths(firstMonth, 1);\n\n  const goToMonth = useCallback(\n    (date: Date) => {\n      let newMonth = startOfMonth(date);\n      if (navStart && newMonth < navStart) {\n        newMonth = navStart;\n      }\n      if (navEnd && newMonth > navEnd) {\n        newMonth = navEnd;\n      }\n      setInternalMonth(newMonth);\n      onMonthChange?.(newMonth);\n    },\n    [navEnd, navStart, onMonthChange],\n  );\n\n  // For the live current month, once today reaches the 4th row, guarantee its\n  // week plus the next two are visible. todayRow is today's 0-based row in the\n  // natural (unshifted) grid.\n  const naturalGridStart = startOfWeek(startOfMonth(firstMonth), weekStart);\n  const todayRow = Math.floor(\n    Math.round(\n      (startOfDay(today).getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand = shiftWeeks && isSameMonth(firstMonth, today) && todayRow >= 3;\n  // Extend downward first; only drop early weeks (shift) when today sits so low\n  // that the two trailing weeks wouldn't fit within the 6-row cap.\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const days = buildCalendarDays(firstMonth, weekStart, shiftRows, expand);\n  const weeks = chunkWeeks(days);\n\n  // Reserve any missing rows up to 6 (the most any month needs) with empty\n  // placeholders, so the grid keeps a constant height across navigation. This\n  // is 0 when expanding, since those months already fill all 6 rows with days.\n  const placeholderRows = Math.max(0, 6 - weeks.length);\n\n  const isSelected = (date: Date): boolean =>\n    selected ? isSameDay(selected, date) : false;\n\n  const getModifiers = (day: CalendarDay): DayModifiers => {\n    const { date, outside } = day;\n    const isBeforeNavStart = Boolean(navStart && date < navStart);\n    const isAfterNavEnd = Boolean(navEnd && date > endOfMonth(navEnd));\n    const isDisabled = disabled ? disabled(date) : false;\n    // Leading previous-month days are never shown (past days aren't relevant).\n    // Next-month days only belong in the grid while expanding; otherwise the\n    // empty placeholder rows reserve their space instead of spilling over.\n    const isPrevMonthDay = date < startOfMonth(firstMonth);\n    const isNextMonthDay = date > endOfMonth(firstMonth);\n    const isHidden =\n      isBeforeNavStart ||\n      isAfterNavEnd ||\n      isPrevMonthDay ||\n      (!expand && isNextMonthDay);\n    const isToday = isSameDay(date, today);\n    const isFocused =\n      !isHidden &&\n      !outside &&\n      focusedDate !== undefined &&\n      isSameDay(date, focusedDate);\n\n    return {\n      focused: isFocused,\n      disabled: isDisabled,\n      hidden: isHidden,\n      outside,\n      today: isToday,\n      selected: isSelected(date),\n    };\n  };\n\n  // Roving tabindex target. Priority: focused > last focused > selected > today\n  // > first focusable day.\n  const focusTarget = ((): CalendarDay | undefined => {\n    let target: CalendarDay | undefined;\n    let priority = -1;\n    for (const day of days) {\n      const modifiers = getModifiers(day);\n      if (!isFocusableDay(modifiers)) continue;\n      if (modifiers.focused && priority < 3) {\n        target = day;\n        priority = 3;\n      } else if (\n        lastFocusedDate &&\n        isSameDay(day.date, lastFocusedDate) &&\n        priority < 2\n      ) {\n        target = day;\n        priority = 2;\n      } else if (isSelected(day.date) && priority < 1) {\n        target = day;\n        priority = 1;\n      } else if (modifiers.today && priority < 0) {\n        target = day;\n        priority = 0;\n      }\n    }\n    if (!target) {\n      target = days.find((day) => isFocusableDay(getModifiers(day)));\n    }\n    return target;\n  })();\n\n  // While expanding, mark the 1st of the next month (the first visible day past\n  // the current month's end) with the month label.\n  const monthEnd = endOfMonth(firstMonth);\n  const nextMonthLabelIso = expand\n    ? days.find((day) => {\n        const modifiers = getModifiers(day);\n        return day.date > monthEnd && !modifiers.hidden;\n      })?.isoDate\n    : undefined;\n\n  const getFocusableDate = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n  ): Date => {\n    const delta = moveDir === \"after\" ? 1 : -1;\n    let result: Date;\n    switch (moveBy) {\n      case \"day\":\n        result = addDays(refDate, delta);\n        break;\n      case \"week\":\n        result = addDays(refDate, delta * 7);\n        break;\n      case \"month\":\n        result = addMonths(refDate, delta);\n        break;\n      case \"year\":\n        result = addMonths(refDate, delta * 12);\n        break;\n      case \"startOfWeek\":\n        result = startOfWeek(refDate, weekStart);\n        break;\n      case \"endOfWeek\":\n        result = endOfWeek(refDate, weekStart);\n        break;\n    }\n    if (moveDir === \"before\" && navStart && result < navStart) {\n      result = navStart;\n    }\n    if (moveDir === \"after\" && navEnd && result > endOfMonth(navEnd)) {\n      result = endOfMonth(navEnd);\n    }\n    return result;\n  };\n\n  const getNextFocus = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n    attempt = 0,\n  ): Date | undefined => {\n    if (attempt > 365) return undefined;\n    const next = getFocusableDate(moveBy, moveDir, refDate);\n    const isDisabled = disabled ? disabled(next) : false;\n    if (!isDisabled) return next;\n    return getNextFocus(moveBy, moveDir, next, attempt + 1);\n  };\n\n  const moveFocus = (moveBy: MoveBy, moveDir: MoveDir) => {\n    if (!focusedDate) return;\n    const next = getNextFocus(moveBy, moveDir, focusedDate);\n    if (!next) return;\n    if (!isSameMonth(next, firstMonth)) {\n      goToMonth(next);\n    }\n    setFocusedDate(next);\n  };\n\n  const handleDayClick =\n    (day: CalendarDay, modifiers: DayModifiers) => (event: MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setFocusedDate(day.date);\n      if (modifiers.disabled) return;\n      const newDate =\n        selected && isSameDay(day.date, selected) ? undefined : day.date;\n      onSelect?.(newDate, day.date);\n    };\n\n  const handleDayFocus = (day: CalendarDay) => () => {\n    setFocusedDate(day.date);\n  };\n\n  const handleDayBlur = () => {\n    setLastFocusedDate(focusedDate);\n    setFocusedDate(undefined);\n  };\n\n  const handleDayKeyDown = (event: KeyboardEvent) => {\n    const keyMap: Record<string, [MoveBy, MoveDir]> = {\n      ArrowLeft: [event.shiftKey ? \"month\" : \"day\", \"before\"],\n      ArrowRight: [event.shiftKey ? \"month\" : \"day\", \"after\"],\n      ArrowDown: [event.shiftKey ? \"year\" : \"week\", \"after\"],\n      ArrowUp: [event.shiftKey ? \"year\" : \"week\", \"before\"],\n      PageUp: [event.shiftKey ? \"year\" : \"month\", \"before\"],\n      PageDown: [event.shiftKey ? \"year\" : \"month\", \"after\"],\n      Home: [\"startOfWeek\", \"before\"],\n      End: [\"endOfWeek\", \"after\"],\n    };\n    const move = keyMap[event.key];\n    if (move) {\n      event.preventDefault();\n      event.stopPropagation();\n      const [moveBy, moveDir] = move;\n      moveFocus(moveBy, moveDir);\n    }\n  };\n\n  const weekdayHeaderStart = startOfWeek(today, weekStart);\n  const weekdays = Array.from({ length: 7 }, (_, index) => {\n    const date = addDays(weekdayHeaderStart, index);\n    return {\n      long: localization.weekdayLong(date),\n      short: localization.weekdayShort(date),\n    };\n  });\n\n  return (\n    <div\n      className={cn(\"w-full\", className)}\n      data-slot=\"booker-calendar\"\n      lang={locale}\n      dir={resolvedDir === \"rtl\" ? \"rtl\" : undefined}\n    >\n      <div className=\"flex w-full flex-col gap-2\">\n        <div aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n          {localization.monthYearLabel(firstMonth)}\n        </div>\n        <div className=\"flex h-10 items-center justify-between sm:h-9\">\n          {initialLoading ? (\n            <Skeleton className=\"h-6 w-28\" />\n          ) : (\n            <>\n              <MonthCaption\n                date={firstMonth}\n                formatter={localization.captionFormatter}\n              />\n              <nav\n                className=\"flex items-center gap-1\"\n                aria-label={resolvedLabels.nav}\n              >\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!previousMonth}\n                  aria-label={resolvedLabels.previousMonth}\n                  onClick={() => {\n                    if (previousMonth) goToMonth(previousMonth);\n                  }}\n                >\n                  <ChevronLeftIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!nextMonth}\n                  aria-label={resolvedLabels.nextMonth}\n                  onClick={() => {\n                    if (nextMonth) goToMonth(nextMonth);\n                  }}\n                >\n                  <ChevronRightIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </nav>\n            </>\n          )}\n        </div>\n        <TooltipProvider delay={0}>\n          <table\n            aria-multiselectable={false}\n            aria-label={localization.monthYearLabel(firstMonth)}\n            className=\"w-full\"\n          >\n            <thead aria-hidden=\"true\">\n              <tr className=\"flex w-full @5xl:gap-1 gap-1 py-2\">\n                {weekdays.map((weekday) => (\n                  <th\n                    key={weekday.long}\n                    aria-label={weekday.long}\n                    className=\"flex-1 font-medium text-muted-foreground/72 text-xs\"\n                    scope=\"col\"\n                  >\n                    {initialLoading ? (\n                      <Skeleton className=\"mx-auto my-0.5 h-3 w-6\" />\n                    ) : (\n                      weekday.short\n                    )}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {weeks.map((week) => (\n                <tr\n                  key={week[0]?.isoDate ?? week.at(-1)?.isoDate ?? \"week\"}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {week.map((day) => {\n                    const modifiers = getModifiers(day);\n\n                    // The day button's own styling is driven by the `data-*`\n                    // attributes below; these cell classes only cover the\n                    // layout and the outside/hidden/today states.\n                    const cellClassName = cn(\n                      \"@max-3xl:max-h-9 flex-1 p-0\",\n                      modifiers.hidden && \"invisible\",\n                      modifiers.outside && \"text-muted-foreground/50\",\n                      modifiers.today &&\n                        !dayCellsLoading &&\n                        \"*:before:pointer-events-none *:before:absolute *:before:start-1/2 *:before:bottom-1/7 *:before:z-1 *:before:size-1 *:before:-translate-x-1/2 *:before:rounded-full *:before:bg-primary *:before:transition-colors [&[data-selected]>*]:before:bg-primary-foreground\",\n                    );\n\n                    // Label (e.g. \"Aug\") sits on the 1st of the next month.\n                    const nextMonthLabel =\n                      day.isoDate === nextMonthLabelIso\n                        ? localization.monthShortLabel(day.date)\n                        : undefined;\n\n                    // Next-month days only show in the shifted current-month\n                    // view; a month-name tooltip keeps them from being mistaken\n                    // for the current month.\n                    const monthTooltip =\n                      day.outside && !modifiers.disabled && !modifiers.hidden\n                        ? localization.monthLongLabel(day.date)\n                        : undefined;\n\n                    return (\n                      <td\n                        key={day.isoDate}\n                        className={cellClassName}\n                        aria-selected={modifiers.selected || undefined}\n                        data-day={day.isoDate}\n                        data-month={day.outside ? day.dateMonthId : undefined}\n                        data-selected={modifiers.selected || undefined}\n                        data-disabled={modifiers.disabled || undefined}\n                        data-hidden={modifiers.hidden || undefined}\n                        data-outside={day.outside || undefined}\n                        data-focused={modifiers.focused || undefined}\n                        data-today={modifiers.today || undefined}\n                      >\n                        {modifiers.hidden ? null : dayCellsLoading ? (\n                          <button\n                            type=\"button\"\n                            disabled\n                            tabIndex={-1}\n                            aria-hidden=\"true\"\n                            className=\"pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 @max-3xl:max-h-9 w-full items-center justify-center rounded-lg\"\n                          >\n                            <Skeleton className=\"size-full rounded-lg\" />\n                          </button>\n                        ) : (\n                          <DayButton\n                            className=\"in-data-disabled:pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full items-center justify-center rounded-lg bg-muted in-data-disabled:bg-transparent in-data-selected:bg-primary font-medium in-data-disabled:font-normal in-data-selected:text-primary-foreground text-foreground tabular-nums in-data-disabled:opacity-50 outline-none transition-shadow duration-150 ease-out after:absolute @5xl:after:-inset-0.75 after:-inset-0.5 not-in-data-disabled:not-in-data-selected:hover:ring-2 not-in-data-disabled:not-in-data-selected:hover:ring-primary/72 focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-primary/72 sm:text-sm\"\n                            type=\"button\"\n                            focused={modifiers.focused}\n                            nextMonthLabel={nextMonthLabel}\n                            tooltip={monthTooltip}\n                            disabled={\n                              (!modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            aria-disabled={\n                              (modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            tabIndex={day === focusTarget ? 0 : -1}\n                            aria-label={(() => {\n                              let label = localization.fullDateLabel(day.date);\n                              if (modifiers.today) {\n                                label = `${resolvedLabels.today}, ${label}`;\n                              }\n                              if (modifiers.selected) {\n                                label = `${label}, ${resolvedLabels.selected}`;\n                              }\n                              return label;\n                            })()}\n                            onClick={handleDayClick(day, modifiers)}\n                            onBlur={handleDayBlur}\n                            onFocus={handleDayFocus(day)}\n                            onKeyDown={handleDayKeyDown}\n                          >\n                            {localization.dayNumber(day.date)}\n                          </DayButton>\n                        )}\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))}\n              {Array.from(\n                { length: placeholderRows },\n                (_, rowIndex) => `placeholder-row-${rowIndex}`,\n              ).map((rowKey) => (\n                <tr\n                  key={rowKey}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {weekdays.map((weekday) => (\n                    <td\n                      key={`${rowKey}-${weekday.long}`}\n                      className=\"@max-3xl:max-h-9 flex-1 p-0\"\n                    >\n                      <div className=\"@max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full\" />\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n          <Tooltip handle={monthTooltipHandle} disableHoverablePopup>\n            {({ payload }) => (\n              <TooltipPopup\n                className=\"**:data-current:opacity-100! **:data-previous:opacity-0! **:data-current:transition-none! **:data-previous:transition-none!\"\n                portalProps={{\n                  className: \"**:data-[slot=tooltip-positioner]:ease-out\",\n                }}\n              >\n                {payload}\n              </TooltipPopup>\n            )}\n          </Tooltip>\n        </TooltipProvider>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipCreateHandle,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\n// A single shared tooltip reused across every day cell (via the handle/payload\n// pattern). Reusing one instance lets it gracefully move/scale between days\n// instead of mounting a separate tooltip per cell.\nconst monthTooltipHandle = TooltipCreateHandle<string>();\n\n// Falls back to English (US) when no `locale` prop is provided.\nconst DEFAULT_LOCALE = \"en-US\";\n\ntype CalendarLabels = {\n  /** ARIA label for the previous-month navigation button. */\n  previousMonth: string;\n  /** ARIA label for the next-month navigation button. */\n  nextMonth: string;\n  /** ARIA label for the navigation toolbar. */\n  nav: string;\n  /** Prefix for today's day button label, e.g. \"Today, Monday, …\". */\n  today: string;\n  /** Suffix for the selected day button label, e.g. \"…, selected\". */\n  selected: string;\n};\n\n// English defaults. Localize by passing translated strings via the `labels`\n// prop (wire it up to your app's own i18n layer); date/weekday/month names are\n// still localized automatically from `locale` via `Intl`.\nconst DEFAULT_LABELS: CalendarLabels = {\n  previousMonth: \"Go to the Previous Month\",\n  nextMonth: \"Go to the Next Month\",\n  nav: \"Navigation bar\",\n  today: \"Today\",\n  selected: \"selected\",\n};\n\n// Resolves the text direction for the locale (e.g. \"rtl\" for Arabic/Hebrew).\nfunction getTextDirection(locale: string): \"ltr\" | \"rtl\" {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      textInfo?: { direction?: string };\n      getTextInfo?: () => { direction?: string };\n    };\n    const info =\n      typeof localeObj.getTextInfo === \"function\"\n        ? localeObj.getTextInfo()\n        : localeObj.textInfo;\n    if (info?.direction === \"rtl\") {\n      return \"rtl\";\n    }\n  } catch {\n    // Fall through to the ltr default below.\n  }\n  return \"ltr\";\n}\n\n// Locale-aware formatting/ordering, derived from a BCP-47 locale string.\ntype Localization = {\n  weekStartsOn: number;\n  monthYearLabel: (date: Date) => string;\n  fullDateLabel: (date: Date) => string;\n  monthShortLabel: (date: Date) => string;\n  monthLongLabel: (date: Date) => string;\n  weekdayLong: (date: Date) => string;\n  weekdayShort: (date: Date) => string;\n  dayNumber: (date: Date) => string;\n  captionFormatter: Intl.DateTimeFormat;\n};\n\n// 1 = Monday … 7 = Sunday (ISO) → JS getDay() index (0 = Sunday … 6 = Saturday).\nfunction getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction buildLocalization(\n  locale: string,\n  weekStartsOnOverride?: number,\n): Localization {\n  const longDateFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n    year: \"numeric\",\n    month: \"long\",\n    day: \"numeric\",\n  });\n  const monthYearFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n    year: \"numeric\",\n  });\n  const monthShortFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  });\n  const monthLongFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n  });\n  const weekdayLongFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n  });\n  const weekdayShortFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  });\n  const dayFormatter = new Intl.DateTimeFormat(locale, { day: \"numeric\" });\n\n  return {\n    weekStartsOn: weekStartsOnOverride ?? getWeekStartsOn(locale),\n    monthYearLabel: (date) => monthYearFormatter.format(date),\n    fullDateLabel: (date) => longDateFormatter.format(date),\n    monthShortLabel: (date) => monthShortFormatter.format(date),\n    monthLongLabel: (date) => monthLongFormatter.format(date),\n    weekdayLong: (date) => weekdayLongFormatter.format(date),\n    weekdayShort: (date) => weekdayShortFormatter.format(date),\n    dayNumber: (date) => dayFormatter.format(date),\n    captionFormatter: monthYearFormatter,\n  };\n}\n\nfunction pad2(value: number): string {\n  return value < 10 ? `0${value}` : String(value);\n}\n\nfunction isoDate(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;\n}\n\nfunction isoMonth(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}`;\n}\n\nfunction startOfDay(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n}\n\nfunction startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction addDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction addMonths(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth() + amount, date.getDate());\n}\n\nfunction startOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = startOfDay(date);\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return addDays(day, -diff);\n}\n\nfunction endOfWeek(date: Date, weekStartsOn = 0): Date {\n  return addDays(startOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nfunction isSameMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nfunction differenceInCalendarMonths(a: Date, b: Date): number {\n  return (\n    (a.getFullYear() - b.getFullYear()) * 12 + (a.getMonth() - b.getMonth())\n  );\n}\n\ntype CalendarDay = {\n  date: Date;\n  outside: boolean;\n  isoDate: string;\n  dateMonthId: string;\n};\n\ntype DayModifiers = {\n  focused: boolean;\n  disabled: boolean;\n  hidden: boolean;\n  outside: boolean;\n  today: boolean;\n  selected: boolean;\n};\n\n// Builds the month grid as full weeks covering the month.\n//\n// `shiftRows` slides the window forward by that many weeks, dropping the\n// month's earliest week(s). When `fillToSix` is set the grid is then padded to\n// a full 6 rows with days from the next month. Together they keep today's week\n// plus the next two visible without exceeding 6 rows; with both at their\n// defaults the month spans only the weeks it naturally needs.\nfunction buildCalendarDays(\n  month: Date,\n  weekStartsOn: number,\n  shiftRows: number,\n  fillToSix: boolean,\n): CalendarDay[] {\n  const monthStart = startOfMonth(month);\n  const offset = shiftRows * 7;\n  const gridStart = addDays(startOfWeek(monthStart, weekStartsOn), offset);\n  const gridEnd = addDays(endOfWeek(endOfMonth(month), weekStartsOn), offset);\n\n  const dates: Date[] = [];\n  for (let cursor = gridStart; cursor <= gridEnd; cursor = addDays(cursor, 1)) {\n    dates.push(cursor);\n  }\n\n  if (fillToSix) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(addDays(lastDate, 1));\n    }\n  }\n\n  return dates.map((date) => ({\n    date,\n    outside: !isSameMonth(date, month),\n    isoDate: isoDate(date),\n    dateMonthId: isoMonth(date),\n  }));\n}\n\nfunction chunkWeeks(days: CalendarDay[]): CalendarDay[][] {\n  const weeks: CalendarDay[][] = [];\n  for (let i = 0; i < days.length; i += 7) {\n    weeks.push(days.slice(i, i + 7));\n  }\n  return weeks;\n}\n\nfunction isFocusableDay(modifiers: DayModifiers): boolean {\n  return !modifiers.disabled && !modifiers.hidden && !modifiers.outside;\n}\n\n// A single day cell's button. Focuses itself when it becomes the roving-tabindex\n// target so keyboard navigation moves the actual DOM focus.\nfunction DayButton({\n  focused,\n  nextMonthLabel,\n  tooltip,\n  children,\n  ...buttonProps\n}: ComponentProps<\"button\"> & {\n  focused: boolean;\n  nextMonthLabel?: string;\n  tooltip?: string;\n}): ReactElement {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (focused) ref.current?.focus();\n  }, [focused]);\n\n  const button = (\n    <button ref={ref} {...buttonProps}>\n      {children}\n      {nextMonthLabel ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute @5xl:end-1.5 end-1 @3xl:top-1.5 top-1 font-medium in-data-selected:text-primary-foreground/72 text-[10px] text-muted-foreground leading-none\"\n        >\n          {nextMonthLabel}\n        </span>\n      ) : null}\n    </button>\n  );\n\n  if (!tooltip) return button;\n\n  return (\n    <TooltipTrigger\n      handle={monthTooltipHandle}\n      payload={tooltip}\n      render={button}\n    />\n  );\n}\n\n// Month + year heading; the year is muted via formatToParts so it stays\n// locale-correct (some locales render \"2026 June\").\nfunction MonthCaption({\n  date,\n  formatter,\n  className,\n}: {\n  date: Date;\n  formatter: Intl.DateTimeFormat;\n  className?: string;\n}): ReactElement {\n  return (\n    <div className={className}>\n      <span className=\"font-heading @3xl:@max-5xl:text-base text-lg\">\n        {formatter.formatToParts(date).map((part) =>\n          part.type === \"year\" ? (\n            <span\n              key={`year-${part.value}`}\n              className=\"text-muted-foreground/72\"\n            >\n              {part.value}\n            </span>\n          ) : (\n            part.value\n          ),\n        )}\n      </span>\n    </div>\n  );\n}\n\ntype MoveBy = \"day\" | \"week\" | \"month\" | \"year\" | \"startOfWeek\" | \"endOfWeek\";\ntype MoveDir = \"before\" | \"after\";\n\nexport type BookerCalendarProps = {\n  className?: string;\n  /**\n   * For the current month, once today reaches the 4th row, keep its week plus\n   * the next two visible within the 6-row grid: extend into next-month days,\n   * and slide the window down (dropping early weeks) only when today sits too\n   * low for those two weeks to fit. Off renders a plain month grid. On by\n   * default.\n   */\n  shiftWeeks?: boolean;\n  availabilityLoading?: boolean;\n  initialLoading?: boolean;\n  month?: Date;\n  defaultMonth?: Date;\n  startMonth?: Date;\n  endMonth?: Date;\n  selected?: Date;\n  onSelect?: (date: Date | undefined, triggerDate: Date) => void;\n  onMonthChange?: (month: Date) => void;\n  disabled?: (date: Date) => boolean;\n  /** BCP-47 locale tag used to localize day/month/weekday names and ARIA labels. */\n  locale?: string;\n  /** Override the locale's first day of the week (0 = Sunday … 6 = Saturday). */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /** Text direction; defaults to the locale's direction (\"rtl\" for ar/he/…). */\n  dir?: \"ltr\" | \"rtl\";\n  /** Translatable strings for the navigation buttons and day button states. */\n  labels?: Partial<CalendarLabels>;\n  /** Reference \"today\" for highlighting and week shifting; defaults to now. */\n  today?: Date;\n};\n\nexport function BookerCalendar({\n  className,\n  shiftWeeks = true,\n  availabilityLoading = false,\n  initialLoading = false,\n  month,\n  defaultMonth,\n  startMonth,\n  endMonth,\n  selected,\n  onSelect,\n  onMonthChange,\n  disabled,\n  locale = DEFAULT_LOCALE,\n  weekStartsOn,\n  dir,\n  labels,\n  today: todayProp,\n}: BookerCalendarProps): ReactElement {\n  const dayCellsLoading = initialLoading || availabilityLoading;\n  const localization = useMemo(\n    () => buildLocalization(locale, weekStartsOn),\n    [locale, weekStartsOn],\n  );\n  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };\n  const resolvedDir = dir ?? getTextDirection(locale);\n  const weekStart = localization.weekStartsOn;\n\n  const today = todayProp ?? new Date();\n\n  // The month is controlled by the parent (via `month`/`onMonthChange`), but we\n  // keep an internal fallback so the calendar works uncontrolled too.\n  const [internalMonth, setInternalMonth] = useState(() =>\n    startOfMonth(month ?? defaultMonth ?? today),\n  );\n  const monthTime = month ? startOfMonth(month).getTime() : undefined;\n  useEffect(() => {\n    if (monthTime !== undefined) {\n      setInternalMonth(new Date(monthTime));\n    }\n  }, [monthTime]);\n\n  const firstMonth = month ? startOfMonth(month) : internalMonth;\n\n  const [focusedDate, setFocusedDate] = useState<Date | undefined>(undefined);\n  const [lastFocusedDate, setLastFocusedDate] = useState<Date | undefined>(\n    undefined,\n  );\n\n  const navStart = startMonth ? startOfMonth(startMonth) : undefined;\n  const navEnd = endMonth ? startOfMonth(endMonth) : undefined;\n\n  const previousMonth =\n    navStart && differenceInCalendarMonths(firstMonth, navStart) <= 0\n      ? undefined\n      : addMonths(firstMonth, -1);\n  const nextMonth =\n    navEnd && differenceInCalendarMonths(navEnd, firstMonth) <= 0\n      ? undefined\n      : addMonths(firstMonth, 1);\n\n  const goToMonth = useCallback(\n    (date: Date) => {\n      let newMonth = startOfMonth(date);\n      if (navStart && newMonth < navStart) {\n        newMonth = navStart;\n      }\n      if (navEnd && newMonth > navEnd) {\n        newMonth = navEnd;\n      }\n      setInternalMonth(newMonth);\n      onMonthChange?.(newMonth);\n    },\n    [navEnd, navStart, onMonthChange],\n  );\n\n  // For the live current month, once today reaches the 4th row, guarantee its\n  // week plus the next two are visible. todayRow is today's 0-based row in the\n  // natural (unshifted) grid.\n  const naturalGridStart = startOfWeek(startOfMonth(firstMonth), weekStart);\n  const todayRow = Math.floor(\n    Math.round(\n      (startOfDay(today).getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand = shiftWeeks && isSameMonth(firstMonth, today) && todayRow >= 3;\n  // Extend downward first; only drop early weeks (shift) when today sits so low\n  // that the two trailing weeks wouldn't fit within the 6-row cap.\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const days = buildCalendarDays(firstMonth, weekStart, shiftRows, expand);\n  const weeks = chunkWeeks(days);\n\n  // Reserve any missing rows up to 6 (the most any month needs) with empty\n  // placeholders, so the grid keeps a constant height across navigation. This\n  // is 0 when expanding, since those months already fill all 6 rows with days.\n  const placeholderRows = Math.max(0, 6 - weeks.length);\n\n  const isSelected = (date: Date): boolean =>\n    selected ? isSameDay(selected, date) : false;\n\n  const getModifiers = (day: CalendarDay): DayModifiers => {\n    const { date, outside } = day;\n    const isBeforeNavStart = Boolean(navStart && date < navStart);\n    const isAfterNavEnd = Boolean(navEnd && date > endOfMonth(navEnd));\n    const isDisabled = disabled ? disabled(date) : false;\n    // Leading previous-month days are never shown (past days aren't relevant).\n    // Next-month days only belong in the grid while expanding; otherwise the\n    // empty placeholder rows reserve their space instead of spilling over.\n    const isPrevMonthDay = date < startOfMonth(firstMonth);\n    const isNextMonthDay = date > endOfMonth(firstMonth);\n    const isHidden =\n      isBeforeNavStart ||\n      isAfterNavEnd ||\n      isPrevMonthDay ||\n      (!expand && isNextMonthDay);\n    const isToday = isSameDay(date, today);\n    const isFocused =\n      !isHidden &&\n      !outside &&\n      focusedDate !== undefined &&\n      isSameDay(date, focusedDate);\n\n    return {\n      focused: isFocused,\n      disabled: isDisabled,\n      hidden: isHidden,\n      outside,\n      today: isToday,\n      selected: isSelected(date),\n    };\n  };\n\n  // Roving tabindex target. Priority: focused > last focused > selected > today\n  // > first focusable day.\n  const focusTarget = ((): CalendarDay | undefined => {\n    let target: CalendarDay | undefined;\n    let priority = -1;\n    for (const day of days) {\n      const modifiers = getModifiers(day);\n      if (!isFocusableDay(modifiers)) continue;\n      if (modifiers.focused && priority < 3) {\n        target = day;\n        priority = 3;\n      } else if (\n        lastFocusedDate &&\n        isSameDay(day.date, lastFocusedDate) &&\n        priority < 2\n      ) {\n        target = day;\n        priority = 2;\n      } else if (isSelected(day.date) && priority < 1) {\n        target = day;\n        priority = 1;\n      } else if (modifiers.today && priority < 0) {\n        target = day;\n        priority = 0;\n      }\n    }\n    if (!target) {\n      target = days.find((day) => isFocusableDay(getModifiers(day)));\n    }\n    return target;\n  })();\n\n  // While expanding, mark the 1st of the next month (the first visible day past\n  // the current month's end) with the month label.\n  const monthEnd = endOfMonth(firstMonth);\n  const nextMonthLabelIso = expand\n    ? days.find((day) => {\n        const modifiers = getModifiers(day);\n        return day.date > monthEnd && !modifiers.hidden;\n      })?.isoDate\n    : undefined;\n\n  const getFocusableDate = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n  ): Date => {\n    const delta = moveDir === \"after\" ? 1 : -1;\n    let result: Date;\n    switch (moveBy) {\n      case \"day\":\n        result = addDays(refDate, delta);\n        break;\n      case \"week\":\n        result = addDays(refDate, delta * 7);\n        break;\n      case \"month\":\n        result = addMonths(refDate, delta);\n        break;\n      case \"year\":\n        result = addMonths(refDate, delta * 12);\n        break;\n      case \"startOfWeek\":\n        result = startOfWeek(refDate, weekStart);\n        break;\n      case \"endOfWeek\":\n        result = endOfWeek(refDate, weekStart);\n        break;\n    }\n    if (moveDir === \"before\" && navStart && result < navStart) {\n      result = navStart;\n    }\n    if (moveDir === \"after\" && navEnd && result > endOfMonth(navEnd)) {\n      result = endOfMonth(navEnd);\n    }\n    return result;\n  };\n\n  const getNextFocus = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n    attempt = 0,\n  ): Date | undefined => {\n    if (attempt > 365) return undefined;\n    const next = getFocusableDate(moveBy, moveDir, refDate);\n    const isDisabled = disabled ? disabled(next) : false;\n    if (!isDisabled) return next;\n    return getNextFocus(moveBy, moveDir, next, attempt + 1);\n  };\n\n  const moveFocus = (moveBy: MoveBy, moveDir: MoveDir) => {\n    if (!focusedDate) return;\n    const next = getNextFocus(moveBy, moveDir, focusedDate);\n    if (!next) return;\n    if (!isSameMonth(next, firstMonth)) {\n      goToMonth(next);\n    }\n    setFocusedDate(next);\n  };\n\n  const handleDayClick =\n    (day: CalendarDay, modifiers: DayModifiers) => (event: MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setFocusedDate(day.date);\n      if (modifiers.disabled) return;\n      const newDate =\n        selected && isSameDay(day.date, selected) ? undefined : day.date;\n      onSelect?.(newDate, day.date);\n    };\n\n  const handleDayFocus = (day: CalendarDay) => () => {\n    setFocusedDate(day.date);\n  };\n\n  const handleDayBlur = () => {\n    setLastFocusedDate(focusedDate);\n    setFocusedDate(undefined);\n  };\n\n  const handleDayKeyDown = (event: KeyboardEvent) => {\n    const keyMap: Record<string, [MoveBy, MoveDir]> = {\n      ArrowLeft: [event.shiftKey ? \"month\" : \"day\", \"before\"],\n      ArrowRight: [event.shiftKey ? \"month\" : \"day\", \"after\"],\n      ArrowDown: [event.shiftKey ? \"year\" : \"week\", \"after\"],\n      ArrowUp: [event.shiftKey ? \"year\" : \"week\", \"before\"],\n      PageUp: [event.shiftKey ? \"year\" : \"month\", \"before\"],\n      PageDown: [event.shiftKey ? \"year\" : \"month\", \"after\"],\n      Home: [\"startOfWeek\", \"before\"],\n      End: [\"endOfWeek\", \"after\"],\n    };\n    const move = keyMap[event.key];\n    if (move) {\n      event.preventDefault();\n      event.stopPropagation();\n      const [moveBy, moveDir] = move;\n      moveFocus(moveBy, moveDir);\n    }\n  };\n\n  const weekdayHeaderStart = startOfWeek(today, weekStart);\n  const weekdays = Array.from({ length: 7 }, (_, index) => {\n    const date = addDays(weekdayHeaderStart, index);\n    return {\n      long: localization.weekdayLong(date),\n      short: localization.weekdayShort(date),\n    };\n  });\n\n  return (\n    <div\n      className={cn(\"w-full\", className)}\n      data-slot=\"booker-calendar\"\n      lang={locale}\n      dir={resolvedDir === \"rtl\" ? \"rtl\" : undefined}\n    >\n      <div className=\"flex w-full flex-col gap-2\">\n        <div aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n          {localization.monthYearLabel(firstMonth)}\n        </div>\n        <div className=\"flex h-10 items-center justify-between sm:h-9\">\n          {initialLoading ? (\n            <Skeleton className=\"h-6 w-28\" />\n          ) : (\n            <>\n              <MonthCaption\n                date={firstMonth}\n                formatter={localization.captionFormatter}\n              />\n              <nav\n                className=\"flex items-center gap-1\"\n                aria-label={resolvedLabels.nav}\n              >\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!previousMonth}\n                  aria-label={resolvedLabels.previousMonth}\n                  onClick={() => {\n                    if (previousMonth) goToMonth(previousMonth);\n                  }}\n                >\n                  <ChevronLeftIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!nextMonth}\n                  aria-label={resolvedLabels.nextMonth}\n                  onClick={() => {\n                    if (nextMonth) goToMonth(nextMonth);\n                  }}\n                >\n                  <ChevronRightIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </nav>\n            </>\n          )}\n        </div>\n        <TooltipProvider delay={0}>\n          <table\n            aria-multiselectable={false}\n            aria-label={localization.monthYearLabel(firstMonth)}\n            className=\"w-full\"\n          >\n            <thead aria-hidden=\"true\">\n              <tr className=\"flex w-full @5xl:gap-1 gap-1 py-2\">\n                {weekdays.map((weekday) => (\n                  <th\n                    key={weekday.long}\n                    aria-label={weekday.long}\n                    className=\"flex-1 font-medium text-muted-foreground/72 text-xs\"\n                    scope=\"col\"\n                  >\n                    {initialLoading ? (\n                      <Skeleton className=\"mx-auto my-0.5 h-3 w-6\" />\n                    ) : (\n                      weekday.short\n                    )}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {weeks.map((week) => (\n                <tr\n                  key={week[0]?.isoDate ?? week.at(-1)?.isoDate ?? \"week\"}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {week.map((day) => {\n                    const modifiers = getModifiers(day);\n\n                    // The day button's own styling is driven by the `data-*`\n                    // attributes below; these cell classes only cover the\n                    // layout and the outside/hidden/today states.\n                    const cellClassName = cn(\n                      \"@max-3xl:max-h-9 flex-1 p-0\",\n                      modifiers.hidden && \"invisible\",\n                      modifiers.outside && \"text-muted-foreground/50\",\n                      modifiers.today &&\n                        !dayCellsLoading &&\n                        \"*:before:pointer-events-none *:before:absolute *:before:start-1/2 *:before:bottom-1/7 *:before:z-1 *:before:size-1 *:before:-translate-x-1/2 *:before:rounded-full *:before:bg-primary *:before:transition-colors [&[data-selected]>*]:before:bg-primary-foreground\",\n                    );\n\n                    // Label (e.g. \"Aug\") sits on the 1st of the next month.\n                    const nextMonthLabel =\n                      day.isoDate === nextMonthLabelIso\n                        ? localization.monthShortLabel(day.date)\n                        : undefined;\n\n                    // Next-month days only show in the shifted current-month\n                    // view; a month-name tooltip keeps them from being mistaken\n                    // for the current month.\n                    const monthTooltip =\n                      day.outside && !modifiers.disabled && !modifiers.hidden\n                        ? localization.monthLongLabel(day.date)\n                        : undefined;\n\n                    return (\n                      <td\n                        key={day.isoDate}\n                        className={cellClassName}\n                        aria-selected={modifiers.selected || undefined}\n                        data-day={day.isoDate}\n                        data-month={day.outside ? day.dateMonthId : undefined}\n                        data-selected={modifiers.selected || undefined}\n                        data-disabled={modifiers.disabled || undefined}\n                        data-hidden={modifiers.hidden || undefined}\n                        data-outside={day.outside || undefined}\n                        data-focused={modifiers.focused || undefined}\n                        data-today={modifiers.today || undefined}\n                      >\n                        {modifiers.hidden ? null : dayCellsLoading ? (\n                          <button\n                            type=\"button\"\n                            disabled\n                            tabIndex={-1}\n                            aria-hidden=\"true\"\n                            className=\"pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 @max-3xl:max-h-9 w-full items-center justify-center rounded-lg\"\n                          >\n                            <Skeleton className=\"size-full rounded-lg\" />\n                          </button>\n                        ) : (\n                          <DayButton\n                            className=\"in-data-disabled:pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full items-center justify-center rounded-lg bg-muted in-data-disabled:bg-transparent in-data-selected:bg-primary font-medium in-data-disabled:font-normal in-data-selected:text-primary-foreground text-foreground tabular-nums in-data-disabled:opacity-50 outline-none transition-shadow duration-150 ease-out after:absolute @5xl:after:-inset-0.75 after:-inset-0.5 not-in-data-disabled:not-in-data-selected:hover:ring-2 not-in-data-disabled:not-in-data-selected:hover:ring-primary/72 focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-primary/72 sm:text-sm\"\n                            type=\"button\"\n                            focused={modifiers.focused}\n                            nextMonthLabel={nextMonthLabel}\n                            tooltip={monthTooltip}\n                            disabled={\n                              (!modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            aria-disabled={\n                              (modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            tabIndex={day === focusTarget ? 0 : -1}\n                            aria-label={(() => {\n                              let label = localization.fullDateLabel(day.date);\n                              if (modifiers.today) {\n                                label = `${resolvedLabels.today}, ${label}`;\n                              }\n                              if (modifiers.selected) {\n                                label = `${label}, ${resolvedLabels.selected}`;\n                              }\n                              return label;\n                            })()}\n                            onClick={handleDayClick(day, modifiers)}\n                            onBlur={handleDayBlur}\n                            onFocus={handleDayFocus(day)}\n                            onKeyDown={handleDayKeyDown}\n                          >\n                            {localization.dayNumber(day.date)}\n                          </DayButton>\n                        )}\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))}\n              {Array.from(\n                { length: placeholderRows },\n                (_, rowIndex) => `placeholder-row-${rowIndex}`,\n              ).map((rowKey) => (\n                <tr\n                  key={rowKey}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {weekdays.map((weekday) => (\n                    <td\n                      key={`${rowKey}-${weekday.long}`}\n                      className=\"@max-3xl:max-h-9 flex-1 p-0\"\n                    >\n                      <div className=\"@max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full\" />\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n          <Tooltip handle={monthTooltipHandle} disableHoverablePopup>\n            {({ payload }) => (\n              <TooltipPopup\n                className=\"**:data-current:opacity-100! **:data-previous:opacity-0! **:data-current:transition-none! **:data-previous:transition-none!\"\n                portalProps={{\n                  className: \"**:data-[slot=tooltip-positioner]:ease-out\",\n                }}\n              >\n                {payload}\n              </TooltipPopup>\n            )}\n          </Tooltip>\n        </TooltipProvider>\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/booker-calendar.tsx"
     },
@@ -87,7 +85,7 @@
     },
     {
       "path": "registry/default/atoms/booker/time-picker.tsx",
-      "content": "\"use client\";\n\nimport { CalendarX2Icon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/default/ui/empty\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { Switch } from \"@/registry/default/ui/switch\";\nimport {\n  displayTimeLabel,\n  formatSelectedDay,\n  formatSelectedMonth,\n  formatSelectedWeekday,\n  isSingleDigit12HourLabel,\n} from \"@/lib/booker/utils\";\n\ntype TimePickerLabels = {\n  noAvailableTimes: string;\n  noSlotsAvailable: string;\n  noSlotsThisDay: string;\n  noSlotsThisMonth: string;\n  viewFirstAvailability: string;\n  use24Hour: string;\n  hour12Short: string;\n  hour24Short: string;\n};\n\ntype TimePickerProps = {\n  availabilityLoading: boolean;\n  currentMonth: Date;\n  daySlots: string[];\n  goToDate: (date: Date) => void;\n  is24Hour: boolean;\n  initialLoading: boolean;\n  labels: TimePickerLabels;\n  locale: string;\n  nextAvailableDate: Date | null;\n  onIs24HourChange: (value: boolean) => void;\n  onSelectTime: (time: string) => void;\n  selectedDate: Date | undefined;\n  hasAvailabilityInView: boolean;\n};\n\nexport function TimePicker({\n  availabilityLoading,\n  currentMonth,\n  daySlots,\n  goToDate,\n  is24Hour,\n  initialLoading,\n  labels,\n  locale,\n  nextAvailableDate,\n  onIs24HourChange,\n  onSelectTime,\n  selectedDate,\n  hasAvailabilityInView,\n}: TimePickerProps) {\n  const slotsLoading = initialLoading || availabilityLoading;\n\n  return (\n    <div className=\"relative @3xl:w-(--booker-side) border-t @3xl:border-t-0 @3xl:border-s\">\n      <div className=\"@3xl:absolute inset-0 flex flex-col gap-2\">\n        {(slotsLoading || selectedDate != null) && (\n          <div className=\"@3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:pt-2 pt-3\">\n            <div className=\"flex h-10 items-center justify-between rounded-se-2xl bg-card sm:h-9\">\n              {slotsLoading ? (\n                <Skeleton className=\"h-6 w-16\" />\n              ) : (\n                <div className=\"flex items-center gap-1.5 font-heading @3xl:@max-5xl:text-base text-lg\">\n                  <span>\n                    {formatSelectedWeekday(selectedDate ?? new Date(), locale)}\n                  </span>\n                  <span className=\"text-muted-foreground/72\">\n                    {selectedDate &&\n                    selectedDate.getMonth() !== currentMonth.getMonth()\n                      ? `${formatSelectedMonth(selectedDate, locale)} `\n                      : null}\n                    {formatSelectedDay(selectedDate ?? new Date(), locale)}\n                  </span>\n                </div>\n              )}\n              {!initialLoading ? (\n                <Label className=\"relative\">\n                  <span\n                    className=\"pointer-events-none absolute inset-0 z-1 flex items-center text-center font-medium text-xs [&:has(+[data-slot=switch][data-checked])>*:first-child]:text-muted-foreground/72 [&:has(+[data-slot=switch][data-unchecked])>*:last-child]:text-muted-foreground/72\"\n                    aria-hidden=\"true\"\n                  >\n                    <span className=\"flex-1 transition-colors\">\n                      {labels.hour12Short}\n                    </span>\n                    <span className=\"flex-1 transition-colors\">\n                      {labels.hour24Short}\n                    </span>\n                  </span>\n                  <Switch\n                    className=\"h-9 w-[calc(var(--thumb-size)*2)] rounded-lg bg-muted! p-0.5 [--thumb-size:--spacing(10)] *:data-[slot=switch-thumb]:data-checked:translate-x-[calc(var(--thumb-size)-2px)] *:data-[slot=switch-thumb]:aspect-auto *:data-[slot=switch-thumb]:w-[calc(var(--thumb-size)-2px)] *:data-[slot=switch-thumb]:rounded-md sm:h-8 dark:*:data-[slot=switch-thumb]:bg-input sm:[--thumb-size:--spacing(9)] *:[[span]]:text-muted-foreground/70\"\n                    aria-label={labels.use24Hour}\n                    checked={is24Hour}\n                    onCheckedChange={onIs24HourChange}\n                  />\n                </Label>\n              ) : null}\n            </div>\n          </div>\n        )}\n        <div className=\"min-h-0 flex-1\">\n          {!slotsLoading && daySlots.length === 0 ? (\n            <div className=\"flex h-full items-center justify-center\">\n              <Empty className=\"gap-4 md:pt-2 md:pb-6\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\" className=\"mb-1\">\n                    <CalendarX2Icon />\n                  </EmptyMedia>\n                  <EmptyTitle className=\"@3xl:@max-5xl:text-base text-lg\">\n                    {labels.noAvailableTimes}\n                  </EmptyTitle>\n                  <EmptyDescription className=\"[[data-slot=empty-title]+&]:mt-0\">\n                    {hasAvailabilityInView\n                      ? labels.noSlotsThisDay\n                      : nextAvailableDate\n                        ? labels.noSlotsThisMonth\n                        : labels.noSlotsAvailable}\n                  </EmptyDescription>\n                </EmptyHeader>\n                {nextAvailableDate ? (\n                  <EmptyContent>\n                    <Button onClick={() => goToDate(nextAvailableDate)}>\n                      {labels.viewFirstAvailability}\n                    </Button>\n                  </EmptyContent>\n                ) : null}\n              </Empty>\n            </div>\n          ) : (\n            <ScrollArea className=\"h-full\" scrollFade>\n              <div className=\"flex @max-3xl:max-h-80 flex-col gap-3 @3xl:@max-5xl:px-2 px-4 pt-1 @3xl:@max-5xl:pb-2 pb-4\">\n                {slotsLoading ? (\n                  <div className=\"grid w-full grid-cols-1 @5xl:gap-1.5 gap-1\">\n                    {Array.from(\n                      { length: 20 },\n                      (_, index) => `time-skeleton-${index}`,\n                    ).map((skeletonKey) => (\n                      <Skeleton\n                        key={skeletonKey}\n                        className=\"h-9 w-full rounded-lg sm:h-8\"\n                      />\n                    ))}\n                  </div>\n                ) : (\n                  <div className=\"grid w-full grid-cols-1 @5xl:gap-1.5 gap-1\">\n                    {daySlots.map((time) => (\n                      <button\n                        key={time}\n                        type=\"button\"\n                        onClick={() => onSelectTime(time)}\n                        className=\"relative flex h-9 cursor-pointer items-center justify-center rounded-lg bg-muted font-medium text-foreground tabular-nums outline-none transition-shadow after:absolute @5xl:after:-inset-1 after:-inset-0.75 hover:ring-2 hover:ring-primary/72 focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-primary/72 sm:h-8 sm:text-sm\"\n                      >\n                        <span>\n                          {!is24Hour && isSingleDigit12HourLabel(time) ? (\n                            <span aria-hidden=\"true\" className=\"invisible\">\n                              0\n                            </span>\n                          ) : null}\n                          {displayTimeLabel(time, !is24Hour)}\n                        </span>\n                      </button>\n                    ))}\n                  </div>\n                )}\n              </div>\n            </ScrollArea>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { CalendarX2Icon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/default/ui/empty\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { Switch } from \"@/registry/default/ui/switch\";\nimport {\n  displayTimeLabel,\n  formatSelectedDay,\n  formatSelectedMonth,\n  formatSelectedWeekday,\n  isSingleDigit12HourLabel,\n} from \"@/lib/booker/utils\";\n\ntype TimePickerLabels = {\n  noAvailableTimes: string;\n  noSlotsAvailable: string;\n  noSlotsThisDay: string;\n  noSlotsThisMonth: string;\n  viewFirstAvailability: string;\n  use24Hour: string;\n  hour12Short: string;\n  hour24Short: string;\n};\n\ntype TimePickerProps = {\n  availabilityLoading: boolean;\n  currentMonth: Date;\n  daySlots: string[];\n  goToDate: (date: Date) => void;\n  is24Hour: boolean;\n  initialLoading: boolean;\n  labels: TimePickerLabels;\n  locale: string;\n  nextAvailableDate: Date | null;\n  onIs24HourChange: (value: boolean) => void;\n  onSelectTime: (time: string) => void;\n  selectedDate: Date | undefined;\n  hasAvailabilityInView: boolean;\n};\n\nexport function TimePicker({\n  availabilityLoading,\n  currentMonth,\n  daySlots,\n  goToDate,\n  is24Hour,\n  initialLoading,\n  labels,\n  locale,\n  nextAvailableDate,\n  onIs24HourChange,\n  onSelectTime,\n  selectedDate,\n  hasAvailabilityInView,\n}: TimePickerProps) {\n  const slotsLoading = initialLoading || availabilityLoading;\n\n  return (\n    <div className=\"relative @3xl:w-56 @5xl:w-70\">\n      <div className=\"@3xl:absolute inset-0 flex flex-col gap-2\">\n        {(slotsLoading || selectedDate != null) && (\n          <div className=\"@3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:pt-2 pt-3\">\n            <div className=\"flex h-10 items-center justify-between rounded-se-2xl bg-card sm:h-9\">\n              {slotsLoading ? (\n                <Skeleton className=\"h-6 w-16\" />\n              ) : (\n                <div className=\"flex items-center gap-1.5 font-heading @3xl:@max-5xl:text-base text-lg\">\n                  <span>\n                    {formatSelectedWeekday(selectedDate ?? new Date(), locale)}\n                  </span>\n                  <span className=\"text-muted-foreground/72\">\n                    {selectedDate &&\n                    selectedDate.getMonth() !== currentMonth.getMonth()\n                      ? `${formatSelectedMonth(selectedDate, locale)} `\n                      : null}\n                    {formatSelectedDay(selectedDate ?? new Date(), locale)}\n                  </span>\n                </div>\n              )}\n              {!initialLoading ? (\n                <Label className=\"relative\">\n                  <span\n                    className=\"pointer-events-none absolute inset-0 z-1 flex items-center text-center font-medium text-xs [&:has(+[data-slot=switch][data-checked])>*:first-child]:text-muted-foreground/72 [&:has(+[data-slot=switch][data-unchecked])>*:last-child]:text-muted-foreground/72\"\n                    aria-hidden=\"true\"\n                  >\n                    <span className=\"flex-1 transition-colors\">\n                      {labels.hour12Short}\n                    </span>\n                    <span className=\"flex-1 transition-colors\">\n                      {labels.hour24Short}\n                    </span>\n                  </span>\n                  <Switch\n                    className=\"h-9 w-[calc(var(--thumb-size)*2)] rounded-lg bg-muted! p-0.5 [--thumb-size:--spacing(10)] *:data-[slot=switch-thumb]:data-checked:translate-x-[calc(var(--thumb-size)-2px)] *:data-[slot=switch-thumb]:aspect-auto *:data-[slot=switch-thumb]:w-[calc(var(--thumb-size)-2px)] *:data-[slot=switch-thumb]:rounded-md sm:h-8 dark:*:data-[slot=switch-thumb]:bg-input sm:[--thumb-size:--spacing(9)] *:[[span]]:text-muted-foreground/70\"\n                    aria-label={labels.use24Hour}\n                    checked={is24Hour}\n                    onCheckedChange={onIs24HourChange}\n                  />\n                </Label>\n              ) : null}\n            </div>\n          </div>\n        )}\n        <div className=\"min-h-0 flex-1\">\n          {!slotsLoading && daySlots.length === 0 ? (\n            <div className=\"flex h-full items-center justify-center\">\n              <Empty className=\"gap-4 md:pt-2 md:pb-6\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\" className=\"mb-1\">\n                    <CalendarX2Icon />\n                  </EmptyMedia>\n                  <EmptyTitle className=\"@3xl:@max-5xl:text-base text-lg\">\n                    {labels.noAvailableTimes}\n                  </EmptyTitle>\n                  <EmptyDescription className=\"[[data-slot=empty-title]+&]:mt-0\">\n                    {hasAvailabilityInView\n                      ? labels.noSlotsThisDay\n                      : nextAvailableDate\n                        ? labels.noSlotsThisMonth\n                        : labels.noSlotsAvailable}\n                  </EmptyDescription>\n                </EmptyHeader>\n                {nextAvailableDate ? (\n                  <EmptyContent>\n                    <Button onClick={() => goToDate(nextAvailableDate)}>\n                      {labels.viewFirstAvailability}\n                    </Button>\n                  </EmptyContent>\n                ) : null}\n              </Empty>\n            </div>\n          ) : (\n            <ScrollArea className=\"h-full\" scrollFade>\n              <div className=\"flex @max-3xl:max-h-80 flex-col gap-3 @3xl:@max-5xl:px-2 px-4 pt-1 @3xl:@max-5xl:pb-2 pb-4\">\n                {slotsLoading ? (\n                  <div className=\"grid w-full grid-cols-1 @5xl:gap-1.5 gap-1\">\n                    {Array.from(\n                      { length: 20 },\n                      (_, index) => `time-skeleton-${index}`,\n                    ).map((skeletonKey) => (\n                      <Skeleton\n                        key={skeletonKey}\n                        className=\"h-9 w-full rounded-lg sm:h-8\"\n                      />\n                    ))}\n                  </div>\n                ) : (\n                  <div className=\"grid w-full grid-cols-1 @5xl:gap-1.5 gap-1\">\n                    {daySlots.map((time) => (\n                      <button\n                        key={time}\n                        type=\"button\"\n                        onClick={() => onSelectTime(time)}\n                        className=\"relative flex h-9 cursor-pointer items-center justify-center rounded-lg bg-muted font-medium text-foreground tabular-nums outline-none transition-shadow after:absolute @5xl:after:-inset-1 after:-inset-0.75 hover:ring-2 hover:ring-primary/72 focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-primary/72 sm:h-8 sm:text-sm\"\n                      >\n                        <span>\n                          {!is24Hour && isSingleDigit12HourLabel(time) ? (\n                            <span aria-hidden=\"true\" className=\"invisible\">\n                              0\n                            </span>\n                          ) : null}\n                          {displayTimeLabel(time, !is24Hour)}\n                        </span>\n                      </button>\n                    ))}\n                  </div>\n                )}\n              </div>\n            </ScrollArea>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/time-picker.tsx"
     },
@@ -99,7 +97,7 @@
     },
     {
       "path": "registry/default/atoms/lib/booker/use-booker.ts",
-      "content": "\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type FetchRawBookerResult,\n  fetchRawBookerDataAction,\n} from \"@/lib/booker/actions\";\nimport {\n  type BookerTarget,\n  getDynamicContext,\n  getOrgSlugFromTarget,\n} from \"@/lib/booker/target\";\nimport {\n  type BookerMeta,\n  type CalendarViewOptions,\n  extractBookingWindowEnd,\n  extractBookingWindowStart,\n  extractEventTypeInfo,\n  extractHost,\n  extractHostAvatars,\n  extractHostDisplayName,\n  extractMinimumBookingNotice,\n  extractSlotsByDate,\n  filterBookableSlots,\n  findNextAvailableDate,\n  getMinimumNavigableMonth,\n  getTodayInTimeZone,\n  getWeekStartsOn,\n  hasAvailabilityInVisibleGrid,\n  isCalendarMonthBefore,\n  pickDefaultSelectedDate,\n  prefers24Hour,\n  toCalendarDateKey,\n} from \"@/lib/booker/utils\";\n\nconst WINDOW_MONTHS = 3;\n\nexport type BookerErrorKind =\n  | \"not-found\"\n  | \"unpublished\"\n  | \"network\"\n  | \"unknown\";\n\nexport type BookerError = {\n  kind: BookerErrorKind;\n  message: string;\n};\n\nclass BookerDataError extends Error {\n  code: string;\n  constructor(message: string, code: string) {\n    super(message);\n    this.code = code;\n  }\n}\n\ntype ResolvedEventType = Extract<\n  FetchRawBookerResult,\n  { ok: true }\n>[\"resolved\"];\n\nexport type BookerInitialData = {\n  durationMinutes?: number;\n  monthIso: string;\n  monthsToFetch?: number;\n  result: FetchRawBookerResult;\n  timeZone: string;\n};\n\ntype DerivedBookerData = {\n  hasMultiDurationOptions: boolean;\n  meta: BookerMeta | null;\n  minimumBookingNotice: number;\n  selectedDurationMinutes: number | null;\n};\n\ntype HydratedBookerData = DerivedBookerData & {\n  coveredMonthKeys: Set<string>;\n  error: BookerError | null;\n  resolved: ResolvedEventType;\n  slotsByDate: Record<string, string[]>;\n  slotsCacheKey: string;\n};\n\nfunction classifyError(caught: unknown): BookerError {\n  const code = caught instanceof BookerDataError ? caught.code : \"\";\n  const message =\n    caught instanceof Error ? caught.message : \"Could not load booker data.\";\n\n  if (code === \"UNPUBLISHED\") {\n    return { kind: \"unpublished\", message };\n  }\n  if (code === \"NOT_FOUND\") {\n    return { kind: \"not-found\", message };\n  }\n  if (\n    code.startsWith(\"HTTP_4\") ||\n    code.startsWith(\"HTTP_5\") ||\n    message.includes(\"fetch\") ||\n    message.includes(\"network\") ||\n    message.includes(\"ETIMEDOUT\") ||\n    message.includes(\"ECONNREFUSED\") ||\n    /Cal\\.com API [45]\\d\\d/.test(message)\n  ) {\n    return { kind: \"network\", message };\n  }\n  return { kind: \"unknown\", message };\n}\n\nfunction getTargetIdentity(target: BookerTarget): string {\n  if (target.type === \"user\") {\n    return `user:${target.username}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"team\") {\n    return `team:${target.teamId}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"dynamic\") {\n    return `dynamic:${target.usernames.join(\",\")}:${target.orgSlug ?? \"\"}:${target.orgId ?? \"\"}`;\n  }\n  return `link:${target.bookingUrl}`;\n}\n\nfunction getMonthCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n  month: Date,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}|${month.getFullYear()}-${month.getMonth()}`;\n}\n\nfunction getSlotsCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}`;\n}\n\nfunction deriveBookerData(\n  result: Extract<FetchRawBookerResult, { ok: true }>,\n  target: BookerTarget,\n): DerivedBookerData {\n  if (!result.raw.me) {\n    return {\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      selectedDurationMinutes: null,\n    };\n  }\n\n  const host = extractHost(result.raw.me);\n  const isDynamic = Boolean(getDynamicContext(target));\n  const hostAvatars = extractHostAvatars(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic, orgSlug: getOrgSlugFromTarget(target) },\n  );\n  const hostName = extractHostDisplayName(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic },\n  );\n  const eventType = extractEventTypeInfo(result.raw.selectedEventType);\n  const minimumBookingNotice = extractMinimumBookingNotice(\n    result.raw.selectedEventType,\n  );\n  const hasMultiDurationOptions =\n    (eventType.eventTypeDurationOptions?.length ?? 0) > 1;\n  const selectedDurationMinutes =\n    eventType.eventTypeDurationOptions?.[0] ??\n    eventType.eventTypeDurationMinutes ??\n    null;\n\n  return {\n    hasMultiDurationOptions,\n    meta: {\n      bookingWindowEnd: extractBookingWindowEnd(result.raw.selectedEventType),\n      bookingWindowStart: extractBookingWindowStart(\n        result.raw.selectedEventType,\n      ),\n      eventTypeDescription: eventType.eventTypeDescription,\n      eventTypeDurationMinutes: eventType.eventTypeDurationMinutes,\n      eventTypeDurationOptions: eventType.eventTypeDurationOptions,\n      eventTypeImageUrl: result.raw.bannerUrl || eventType.eventTypeImageUrl,\n      eventTypeLocations: eventType.eventTypeLocations,\n      eventTypeTitle: eventType.eventTypeTitle,\n      hostAvatarUrl: host.hostAvatarUrl,\n      hostAvatars,\n      hostName:\n        host.hostName === \"Unknown user\" && target.type === \"user\"\n          ? target.username\n          : result.raw.publicDisplayName || hostName,\n    },\n    minimumBookingNotice,\n    selectedDurationMinutes,\n  };\n}\n\nfunction hydrateBookerData({\n  initialData,\n  selectedTimeZone,\n  target,\n}: {\n  initialData?: BookerInitialData;\n  selectedTimeZone: string;\n  target: BookerTarget;\n}): HydratedBookerData | null {\n  if (!initialData) {\n    return null;\n  }\n\n  if (initialData.timeZone !== selectedTimeZone) {\n    return null;\n  }\n\n  if (!initialData.result.ok) {\n    const error = classifyError(\n      new BookerDataError(\n        initialData.result.error,\n        initialData.result.errorCode ?? \"UNKNOWN\",\n      ),\n    );\n\n    if (error.kind !== \"not-found\" && error.kind !== \"unpublished\") {\n      return null;\n    }\n\n    return {\n      coveredMonthKeys: new Set(),\n      error,\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      resolved: { eventTypeId: null, eventTypeSlug: null },\n      selectedDurationMinutes: null,\n      slotsByDate: {},\n      slotsCacheKey: \"\",\n    };\n  }\n\n  const derived = deriveBookerData(initialData.result, target);\n  const durationMinutes =\n    derived.selectedDurationMinutes ?? initialData.durationMinutes ?? 30;\n  const identity = getTargetIdentity(target);\n  const anchor = new Date(initialData.monthIso);\n  const safeAnchor = Number.isNaN(anchor.getTime()) ? new Date() : anchor;\n  const monthsToFetch = Math.max(\n    1,\n    Math.floor(initialData.monthsToFetch ?? WINDOW_MONTHS),\n  );\n  const coveredMonthKeys = new Set<string>();\n\n  for (let offset = 0; offset < monthsToFetch; offset += 1) {\n    coveredMonthKeys.add(\n      getMonthCacheKey(\n        identity,\n        selectedTimeZone,\n        durationMinutes,\n        new Date(safeAnchor.getFullYear(), safeAnchor.getMonth() + offset, 1),\n      ),\n    );\n  }\n\n  const slotsByDate = filterBookableSlots(\n    extractSlotsByDate(initialData.result.raw.slots, selectedTimeZone),\n    selectedTimeZone,\n    derived.minimumBookingNotice,\n    new Date(),\n  );\n\n  return {\n    ...derived,\n    coveredMonthKeys,\n    error: null,\n    resolved: initialData.result.resolved,\n    selectedDurationMinutes: durationMinutes,\n    slotsByDate,\n    slotsCacheKey: getSlotsCacheKey(\n      identity,\n      selectedTimeZone,\n      durationMinutes,\n    ),\n  };\n}\n\ntype UseBookerParams = {\n  initialData?: BookerInitialData;\n  target: BookerTarget;\n  timezone?: string;\n};\n\ntype BookerLoadingState = {\n  availability: boolean;\n  busy: boolean;\n  initial: boolean;\n};\n\ntype BookerTimezoneState = {\n  onValueChange: (timeZone: string) => void;\n  value: string;\n};\n\ntype BookerDurationState = {\n  onValueChange: (minutes: number) => void;\n  value: number;\n};\n\ntype BookerCalendarState = {\n  availabilityLoading: boolean;\n  disabled: (date: Date) => boolean;\n  endMonth?: Date;\n  initialLoading: boolean;\n  locale: string;\n  month: Date;\n  onMonthChange: (month: Date) => void;\n  onSelect: (nextDate: Date | undefined) => void;\n  selected: Date | undefined;\n  startMonth: Date;\n  today: Date;\n};\n\ntype BookerTimePickerState = {\n  availabilityLoading: boolean;\n  currentMonth: Date;\n  daySlots: string[];\n  goToDate: (date: Date) => void;\n  hasAvailabilityInView: boolean;\n  initialLoading: boolean;\n  is24Hour: boolean;\n  locale: string;\n  nextAvailableDate: Date | null;\n  onIs24HourChange: (value: boolean) => void;\n  onSelectTime: (time: string) => void;\n  selectedDate: Date | undefined;\n};\n\nexport type BookerStep = \"select\" | \"confirm\";\n\nexport type UseBookerResult = {\n  calendarProps: BookerCalendarState;\n  durationProps: BookerDurationState;\n  error: BookerError | null;\n  loadingState: BookerLoadingState;\n  meta: BookerMeta | null;\n  onBack: () => void;\n  retry: () => void;\n  selectedTime: string | null;\n  step: BookerStep;\n  timePickerProps: BookerTimePickerState;\n  timezoneProps: BookerTimezoneState;\n};\n\n// All booker data + interaction logic: fetching/windowing cal.com availability,\n// derived selection state, and the handlers the UI wires to the calendar.\nexport function useBooker({\n  initialData,\n  target,\n  timezone,\n}: UseBookerParams): UseBookerResult {\n  const [timeZone] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().timeZone || \"UTC\",\n  );\n  const [locale] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().locale || \"en-US\",\n  );\n  const initialSelectedTimeZone = initialData?.timeZone ?? timezone ?? timeZone;\n  const hydratedData = useMemo(\n    () =>\n      hydrateBookerData({\n        initialData,\n        selectedTimeZone: initialSelectedTimeZone,\n        target,\n      }),\n    [initialData, initialSelectedTimeZone, target],\n  );\n  const initialCurrentMonth = useMemo(() => {\n    const initialMonth = initialData?.monthIso\n      ? new Date(initialData.monthIso)\n      : new Date();\n    return Number.isNaN(initialMonth.getTime()) ? new Date() : initialMonth;\n  }, [initialData?.monthIso]);\n  const initialSelectedDate = useMemo(() => {\n    if (!hydratedData || hydratedData.error) {\n      return undefined;\n    }\n\n    return (\n      pickDefaultSelectedDate(\n        initialCurrentMonth,\n        hydratedData.slotsByDate,\n        initialSelectedTimeZone,\n        getTodayInTimeZone(initialSelectedTimeZone),\n        {\n          endMonth: hydratedData.meta?.bookingWindowEnd ?? undefined,\n          shiftWeeks: true,\n          startMonth: getMinimumNavigableMonth(\n            initialSelectedTimeZone,\n            hydratedData.meta?.bookingWindowStart,\n          ),\n          weekStartsOn: getWeekStartsOn(locale),\n        },\n      ) ?? undefined\n    );\n  }, [hydratedData, initialCurrentMonth, initialSelectedTimeZone, locale]);\n  const [meta, setMeta] = useState<BookerMeta | null>(\n    hydratedData?.meta ?? null,\n  );\n  const [slotsByDate, setSlotsByDate] = useState<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const [error, setError] = useState<BookerError | null>(\n    hydratedData?.error ?? null,\n  );\n  const [isPending, setIsPending] = useState(false);\n  const [currentMonth, setCurrentMonth] = useState(initialCurrentMonth);\n  const [selectedTimeZone, setSelectedTimeZone] = useState(\n    initialSelectedTimeZone,\n  );\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(\n    initialSelectedDate,\n  );\n  const [_selectedTime, setSelectedTime] = useState<string | null>(null);\n  const [step, setStep] = useState<BookerStep>(\"select\");\n  const [selectedDurationMinutes, setSelectedDurationMinutes] = useState(\n    hydratedData?.selectedDurationMinutes ?? 30,\n  );\n  const [is24Hour, setIs24Hour] = useState(() => prefers24Hour(locale));\n  const coveredMonthsRef = useRef<Set<string>>(\n    hydratedData?.coveredMonthKeys ?? new Set(),\n  );\n  const resolvedRef = useRef<ResolvedEventType>(\n    hydratedData?.resolved ?? { eventTypeId: null, eventTypeSlug: null },\n  );\n  const lastIdentityRef = useRef<string | null>(null);\n  const lastTimeZoneRef = useRef<string | null>(null);\n  const lastDurationRef = useRef<number | null>(null);\n  const autoSelectedMonthRef = useRef<string | null>(\n    initialSelectedDate\n      ? `${initialCurrentMonth.getFullYear()}-${initialCurrentMonth.getMonth()}`\n      : null,\n  );\n  const slotsByDateRef = useRef<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const slotsCacheRef = useRef<Map<string, Record<string, string[]>>>(\n    new Map(\n      hydratedData?.slotsCacheKey\n        ? [[hydratedData.slotsCacheKey, hydratedData.slotsByDate]]\n        : [],\n    ),\n  );\n  const minimumBookingNoticeRef = useRef(\n    hydratedData?.minimumBookingNotice ?? 0,\n  );\n  const hasMultiDurationOptionsRef = useRef(\n    hydratedData?.hasMultiDurationOptions ?? false,\n  );\n  const selectedDateRef = useRef(selectedDate);\n  selectedDateRef.current = selectedDate;\n  const inFlightMonthsRef = useRef<Map<string, Promise<void>>>(new Map());\n  const availabilityRequestVersionRef = useRef(0);\n  const skipInitialWarmRef = useRef(\n    Boolean(hydratedData && !hydratedData.error),\n  );\n\n  const targetIdentity = useCallback((): string => {\n    return getTargetIdentity(target);\n  }, [target]);\n\n  const buildKey = useCallback(\n    (month: Date) =>\n      getMonthCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n        month,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const slotsCacheKey = useCallback(\n    () =>\n      getSlotsCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const restoreSlotsFromCache = useCallback(() => {\n    const cached = slotsCacheRef.current.get(slotsCacheKey()) ?? {};\n    slotsByDateRef.current = cached;\n    setSlotsByDate(cached);\n  }, [slotsCacheKey]);\n\n  useLayoutEffect(() => {\n    restoreSlotsFromCache();\n  }, [restoreSlotsFromCache]);\n\n  // Fetch a window of several months in a single request, anchored at `anchor`.\n  const fetchWindow = useCallback(\n    async (anchor: Date): Promise<void> => {\n      const anchorKey = buildKey(anchor);\n\n      if (coveredMonthsRef.current.has(anchorKey)) {\n        return;\n      }\n\n      const existingRequest = inFlightMonthsRef.current.get(anchorKey);\n      if (existingRequest) {\n        await existingRequest;\n        return;\n      }\n\n      const requestVersion = availabilityRequestVersionRef.current;\n      const windowMonthKeys = Array.from(\n        { length: WINDOW_MONTHS },\n        (_, offset) =>\n          buildKey(\n            new Date(anchor.getFullYear(), anchor.getMonth() + offset, 1),\n          ),\n      );\n      const request = (async () => {\n        const durationMinutes =\n          getDynamicContext(target) || hasMultiDurationOptionsRef.current\n            ? selectedDurationMinutes\n            : undefined;\n\n        const result = await fetchRawBookerDataAction({\n          durationMinutes,\n          fetchMeta: resolvedRef.current.eventTypeId == null,\n          monthIso: anchor.toISOString(),\n          monthsToFetch: WINDOW_MONTHS,\n          target,\n          timeZone: selectedTimeZone,\n          eventTypeId: resolvedRef.current.eventTypeId ?? undefined,\n        });\n\n        if (!result.ok) {\n          throw new BookerDataError(\n            result.error,\n            result.errorCode ?? \"UNKNOWN\",\n          );\n        }\n\n        if (availabilityRequestVersionRef.current !== requestVersion) {\n          return;\n        }\n\n        resolvedRef.current = result.resolved;\n\n        for (let offset = 0; offset < WINDOW_MONTHS; offset += 1) {\n          const month = new Date(\n            anchor.getFullYear(),\n            anchor.getMonth() + offset,\n            1,\n          );\n          coveredMonthsRef.current.add(buildKey(month));\n        }\n\n        // The host/event metadata only comes back on the full (non slots-only)\n        // fetch, so set it once when present.\n        if (result.raw.me) {\n          const derived = deriveBookerData(result, target);\n          minimumBookingNoticeRef.current = derived.minimumBookingNotice;\n          hasMultiDurationOptionsRef.current = derived.hasMultiDurationOptions;\n          setMeta((prev) => prev ?? derived.meta);\n\n          const defaultDuration = derived.selectedDurationMinutes ?? 30;\n          if (derived.meta?.eventTypeDurationOptions?.length) {\n            if (\n              !derived.meta.eventTypeDurationOptions.includes(\n                selectedDurationMinutes,\n              )\n            ) {\n              setSelectedDurationMinutes(defaultDuration);\n            }\n          } else if (\n            derived.meta?.eventTypeDurationMinutes != null &&\n            selectedDurationMinutes !== derived.meta.eventTypeDurationMinutes\n          ) {\n            setSelectedDurationMinutes(derived.meta.eventTypeDurationMinutes);\n          }\n        }\n\n        const windowSlots = filterBookableSlots(\n          extractSlotsByDate(result.raw.slots, selectedTimeZone),\n          selectedTimeZone,\n          minimumBookingNoticeRef.current,\n          new Date(),\n        );\n        const cacheKey = getSlotsCacheKey(\n          targetIdentity(),\n          selectedTimeZone,\n          selectedDurationMinutes,\n        );\n        const mergedSlots = {\n          ...(slotsCacheRef.current.get(cacheKey) ?? {}),\n          ...windowSlots,\n        };\n        slotsCacheRef.current.set(cacheKey, mergedSlots);\n        slotsByDateRef.current = mergedSlots;\n        setSlotsByDate(mergedSlots);\n      })();\n\n      for (const monthKey of windowMonthKeys) {\n        inFlightMonthsRef.current.set(monthKey, request);\n      }\n\n      try {\n        await request;\n      } finally {\n        for (const monthKey of windowMonthKeys) {\n          if (inFlightMonthsRef.current.get(monthKey) === request) {\n            inFlightMonthsRef.current.delete(monthKey);\n          }\n        }\n      }\n    },\n    [\n      buildKey,\n      selectedDurationMinutes,\n      selectedTimeZone,\n      target,\n      targetIdentity,\n    ],\n  );\n\n  const todayStart = useMemo(\n    () => getTodayInTimeZone(selectedTimeZone),\n    [selectedTimeZone],\n  );\n  const startMonth = useMemo(\n    () => getMinimumNavigableMonth(selectedTimeZone, meta?.bookingWindowStart),\n    [meta?.bookingWindowStart, selectedTimeZone],\n  );\n  const calendarViewOptions = useMemo((): CalendarViewOptions => {\n    return {\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      shiftWeeks: true,\n      startMonth,\n      weekStartsOn: getWeekStartsOn(locale),\n    };\n  }, [locale, meta?.bookingWindowEnd, startMonth]);\n\n  const hasAvailabilityInView = useMemo(\n    () =>\n      hasAvailabilityInVisibleGrid(\n        currentMonth,\n        slotsByDate,\n        todayStart,\n        calendarViewOptions,\n      ),\n    [calendarViewOptions, currentMonth, slotsByDate, todayStart],\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const load = async () => {\n      const identity = targetIdentity();\n      let deferLoadForMonthSync = false;\n\n      // A different user/event means a different event type and metadata, so\n      // reset everything and force a full fetch.\n      if (\n        lastIdentityRef.current !== null &&\n        lastIdentityRef.current !== identity\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        resolvedRef.current = { eventTypeId: null, eventTypeSlug: null };\n        hasMultiDurationOptionsRef.current = false;\n        slotsCacheRef.current = new Map();\n        slotsByDateRef.current = {};\n        autoSelectedMonthRef.current = null;\n        setMeta(null);\n        setSelectedDurationMinutes(30);\n        setSlotsByDate({});\n      } else if (\n        lastDurationRef.current !== null &&\n        lastDurationRef.current !== selectedDurationMinutes\n      ) {\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n      } else if (\n        lastTimeZoneRef.current !== null &&\n        lastTimeZoneRef.current !== selectedTimeZone\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n\n        const minMonth = getMinimumNavigableMonth(\n          selectedTimeZone,\n          meta?.bookingWindowStart,\n        );\n        if (isCalendarMonthBefore(currentMonth, minMonth)) {\n          setCurrentMonth(minMonth);\n          deferLoadForMonthSync = true;\n        } else {\n          const todayInTz = getTodayInTimeZone(selectedTimeZone);\n          if (\n            selectedDateRef.current &&\n            toCalendarDateKey(selectedDateRef.current) <\n              toCalendarDateKey(todayInTz)\n          ) {\n            setSelectedDate(undefined);\n          }\n        }\n      }\n      lastIdentityRef.current = identity;\n      lastTimeZoneRef.current = selectedTimeZone;\n      lastDurationRef.current = selectedDurationMinutes;\n\n      if (deferLoadForMonthSync) {\n        return;\n      }\n\n      if (!coveredMonthsRef.current.has(buildKey(currentMonth))) {\n        setIsPending(true);\n        try {\n          await fetchWindow(currentMonth);\n          if (cancelled) {\n            return;\n          }\n          setError(null);\n        } catch (caught) {\n          if (cancelled) {\n            return;\n          }\n          setError(classifyError(caught));\n          return;\n        } finally {\n          if (!cancelled) {\n            setIsPending(false);\n          }\n        }\n      } else {\n        setError(null);\n        setIsPending(false);\n      }\n\n      // Auto-select the first available day the first time this month's\n      // availability is known (on load and on month navigation).\n      const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n      if (!cancelled && autoSelectedMonthRef.current !== monthKey) {\n        const firstAvailable = pickDefaultSelectedDate(\n          currentMonth,\n          slotsByDateRef.current,\n          selectedTimeZone,\n          getTodayInTimeZone(selectedTimeZone),\n          calendarViewOptions,\n        );\n        if (firstAvailable) {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(firstAvailable);\n          setSelectedTime(null);\n        } else {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(undefined);\n          setSelectedTime(null);\n        }\n      }\n\n      // Warm the next uncovered window boundary, not just the adjacent month.\n      // This keeps navigation instant when the user reaches the end of the\n      // currently-covered 3-month range.\n      const nextWindow = new Date(\n        currentMonth.getFullYear(),\n        currentMonth.getMonth() + WINDOW_MONTHS,\n        1,\n      );\n      if (skipInitialWarmRef.current) {\n        skipInitialWarmRef.current = false;\n        return;\n      }\n      if (!coveredMonthsRef.current.has(buildKey(nextWindow))) {\n        void fetchWindow(nextWindow).catch(() => {});\n      }\n    };\n\n    void load();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    buildKey,\n    currentMonth,\n    fetchWindow,\n    selectedDurationMinutes,\n    selectedTimeZone,\n    meta?.bookingWindowStart,\n    calendarViewOptions,\n    restoreSlotsFromCache,\n    targetIdentity,\n  ]);\n\n  const [retryCounter, setRetryCounter] = useState(0);\n\n  const retry = useCallback(() => {\n    coveredMonthsRef.current = new Set();\n    inFlightMonthsRef.current.clear();\n    availabilityRequestVersionRef.current += 1;\n    slotsCacheRef.current = new Map();\n    slotsByDateRef.current = {};\n    autoSelectedMonthRef.current = null;\n    setSlotsByDate({});\n    setError(null);\n    setRetryCounter((c) => c + 1);\n  }, []);\n\n  // Re-trigger the main load effect when the user retries.\n  useEffect(() => {\n    // The first render (retryCounter === 0) is handled by the main effect.\n    if (retryCounter === 0) return;\n    setIsPending(true);\n    let cancelled = false;\n\n    (async () => {\n      try {\n        await fetchWindow(currentMonth);\n        if (cancelled) return;\n        setError(null);\n\n        const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n        if (autoSelectedMonthRef.current !== monthKey) {\n          const firstAvailable = pickDefaultSelectedDate(\n            currentMonth,\n            slotsByDateRef.current,\n            selectedTimeZone,\n            getTodayInTimeZone(selectedTimeZone),\n            calendarViewOptions,\n          );\n          if (firstAvailable) {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(firstAvailable);\n            setSelectedTime(null);\n          } else {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(undefined);\n            setSelectedTime(null);\n          }\n        }\n      } catch (caught) {\n        if (cancelled) return;\n        setError(classifyError(caught));\n      } finally {\n        if (!cancelled) setIsPending(false);\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    retryCounter,\n    fetchWindow,\n    currentMonth,\n    selectedTimeZone,\n    calendarViewOptions,\n  ]);\n\n  useEffect(() => {\n    if (!timezone) {\n      return;\n    }\n    setSelectedTimeZone(timezone);\n  }, [timezone]);\n\n  const selectedDateKey = toCalendarDateKey(selectedDate ?? todayStart);\n  const daySlots =\n    selectedDate != null ? (slotsByDate[selectedDateKey] ?? []) : [];\n  const nextAvailableDate = findNextAvailableDate(\n    slotsByDate,\n    selectedTimeZone,\n    todayStart,\n  );\n\n  const handleMonthChange = (month: Date) => {\n    const monthKey = `${month.getFullYear()}-${month.getMonth()}`;\n    const monthCovered = coveredMonthsRef.current.has(buildKey(month));\n    setCurrentMonth(month);\n    // Flip to pending in the same render as the month change when the target\n    // month still needs fetching, so the skeleton shows immediately instead of\n    // the empty state flashing for a frame before the async effect runs.\n    if (!monthCovered) {\n      setIsPending(true);\n    }\n    // For an already-loaded month, select the first available day in the same\n    // update as the month change so the selection doesn't flicker.\n    const firstAvailable = pickDefaultSelectedDate(\n      month,\n      slotsByDateRef.current,\n      selectedTimeZone,\n      getTodayInTimeZone(selectedTimeZone),\n      calendarViewOptions,\n    );\n    if (firstAvailable) {\n      autoSelectedMonthRef.current = monthKey;\n      setSelectedDate(firstAvailable);\n      setSelectedTime(null);\n    } else {\n      if (monthCovered) {\n        autoSelectedMonthRef.current = monthKey;\n      }\n      setSelectedDate(undefined);\n      setSelectedTime(null);\n    }\n  };\n\n  const handleSelectDate = (nextDate: Date | undefined) => {\n    if (!nextDate) {\n      return;\n    }\n    setSelectedDate(nextDate);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${nextDate.getFullYear()}-${nextDate.getMonth()}`;\n    const isDifferentMonth =\n      nextDate.getMonth() !== currentMonth.getMonth() ||\n      nextDate.getFullYear() !== currentMonth.getFullYear();\n    if (isDifferentMonth) {\n      setCurrentMonth(nextDate);\n    }\n  };\n\n  const isDayDisabled = (date: Date) => {\n    const dayKey = toCalendarDateKey(date);\n    if (dayKey < toCalendarDateKey(todayStart)) {\n      return true;\n    }\n\n    return (slotsByDate[dayKey] ?? []).length === 0;\n  };\n\n  const goToDate = (date: Date) => {\n    setCurrentMonth(date);\n    setSelectedDate(date);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${date.getFullYear()}-${date.getMonth()}`;\n  };\n\n  const handleSelectTime = (time: string) => {\n    setSelectedTime(time);\n    setStep(\"confirm\");\n  };\n\n  const handleBack = () => {\n    setStep(\"select\");\n  };\n\n  const initialLoading = !meta;\n  const currentMonthCovered = coveredMonthsRef.current.has(\n    buildKey(currentMonth),\n  );\n  const availabilityLoading = isPending || !currentMonthCovered;\n\n  return {\n    calendarProps: {\n      availabilityLoading,\n      disabled: isDayDisabled,\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      initialLoading,\n      locale,\n      month: currentMonth,\n      onMonthChange: handleMonthChange,\n      onSelect: handleSelectDate,\n      selected: selectedDate,\n      startMonth,\n      today: todayStart,\n    },\n    durationProps: {\n      onValueChange: setSelectedDurationMinutes,\n      value: selectedDurationMinutes,\n    },\n    error,\n    loadingState: {\n      availability: availabilityLoading,\n      busy: initialLoading || availabilityLoading,\n      initial: initialLoading,\n    },\n    meta,\n    onBack: handleBack,\n    retry,\n    selectedTime: _selectedTime,\n    step,\n    timePickerProps: {\n      availabilityLoading,\n      currentMonth,\n      daySlots,\n      goToDate,\n      hasAvailabilityInView,\n      initialLoading,\n      is24Hour,\n      locale,\n      nextAvailableDate,\n      onIs24HourChange: setIs24Hour,\n      onSelectTime: handleSelectTime,\n      selectedDate,\n    },\n    timezoneProps: {\n      onValueChange: setSelectedTimeZone,\n      value: selectedTimeZone,\n    },\n  };\n}\n",
+      "content": "\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type FetchRawBookerResult,\n  fetchRawBookerDataAction,\n} from \"@/lib/booker/actions\";\nimport {\n  type BookerTarget,\n  getDynamicContext,\n  getOrgSlugFromTarget,\n} from \"@/lib/booker/target\";\nimport {\n  type BookerMeta,\n  type CalendarViewOptions,\n  extractBookingWindowEnd,\n  extractBookingWindowStart,\n  extractEventTypeInfo,\n  extractHost,\n  extractHostAvatars,\n  extractHostDisplayName,\n  extractMinimumBookingNotice,\n  extractSlotsByDate,\n  filterBookableSlots,\n  findNextAvailableDate,\n  getMinimumNavigableMonth,\n  getTodayInTimeZone,\n  getWeekStartsOn,\n  hasAvailabilityInVisibleGrid,\n  isCalendarMonthBefore,\n  pickDefaultSelectedDate,\n  prefers24Hour,\n  toCalendarDateKey,\n} from \"@/lib/booker/utils\";\n\nconst WINDOW_MONTHS = 3;\n\nexport type BookerErrorKind =\n  | \"not-found\"\n  | \"unpublished\"\n  | \"network\"\n  | \"unknown\";\n\nexport type BookerError = {\n  kind: BookerErrorKind;\n  message: string;\n};\n\nclass BookerDataError extends Error {\n  code: string;\n  constructor(message: string, code: string) {\n    super(message);\n    this.code = code;\n  }\n}\n\ntype ResolvedEventType = Extract<\n  FetchRawBookerResult,\n  { ok: true }\n>[\"resolved\"];\n\nexport type BookerInitialData = {\n  durationMinutes?: number;\n  monthIso: string;\n  monthsToFetch?: number;\n  result: FetchRawBookerResult;\n  timeZone: string;\n};\n\ntype DerivedBookerData = {\n  hasMultiDurationOptions: boolean;\n  meta: BookerMeta | null;\n  minimumBookingNotice: number;\n  selectedDurationMinutes: number | null;\n};\n\ntype HydratedBookerData = DerivedBookerData & {\n  coveredMonthKeys: Set<string>;\n  error: BookerError | null;\n  resolved: ResolvedEventType;\n  slotsByDate: Record<string, string[]>;\n  slotsCacheKey: string;\n};\n\nfunction classifyError(caught: unknown): BookerError {\n  const code = caught instanceof BookerDataError ? caught.code : \"\";\n  const message =\n    caught instanceof Error ? caught.message : \"Could not load booker data.\";\n\n  if (code === \"UNPUBLISHED\") {\n    return { kind: \"unpublished\", message };\n  }\n  if (code === \"NOT_FOUND\") {\n    return { kind: \"not-found\", message };\n  }\n  if (\n    code.startsWith(\"HTTP_4\") ||\n    code.startsWith(\"HTTP_5\") ||\n    message.includes(\"fetch\") ||\n    message.includes(\"network\") ||\n    message.includes(\"ETIMEDOUT\") ||\n    message.includes(\"ECONNREFUSED\") ||\n    /Cal\\.com API [45]\\d\\d/.test(message)\n  ) {\n    return { kind: \"network\", message };\n  }\n  return { kind: \"unknown\", message };\n}\n\nfunction getTargetIdentity(target: BookerTarget): string {\n  if (target.type === \"user\") {\n    return `user:${target.username}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"team\") {\n    return `team:${target.teamId}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"dynamic\") {\n    return `dynamic:${target.usernames.join(\",\")}:${target.orgSlug ?? \"\"}:${target.orgId ?? \"\"}`;\n  }\n  return `link:${target.bookingUrl}`;\n}\n\nfunction getMonthCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n  month: Date,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}|${month.getFullYear()}-${month.getMonth()}`;\n}\n\nfunction getSlotsCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}`;\n}\n\nfunction deriveBookerData(\n  result: Extract<FetchRawBookerResult, { ok: true }>,\n  target: BookerTarget,\n): DerivedBookerData {\n  if (!result.raw.me) {\n    return {\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      selectedDurationMinutes: null,\n    };\n  }\n\n  const host = extractHost(result.raw.me);\n  const isDynamic = Boolean(getDynamicContext(target));\n  const hostAvatars = extractHostAvatars(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic, orgSlug: getOrgSlugFromTarget(target) },\n  );\n  const hostName = extractHostDisplayName(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic },\n  );\n  const eventType = extractEventTypeInfo(result.raw.selectedEventType);\n  const minimumBookingNotice = extractMinimumBookingNotice(\n    result.raw.selectedEventType,\n  );\n  const hasMultiDurationOptions =\n    (eventType.eventTypeDurationOptions?.length ?? 0) > 1;\n  const selectedDurationMinutes =\n    eventType.eventTypeDurationOptions?.[0] ??\n    eventType.eventTypeDurationMinutes ??\n    null;\n\n  return {\n    hasMultiDurationOptions,\n    meta: {\n      bookingWindowEnd: extractBookingWindowEnd(result.raw.selectedEventType),\n      bookingWindowStart: extractBookingWindowStart(\n        result.raw.selectedEventType,\n      ),\n      eventTypeDescription: eventType.eventTypeDescription,\n      eventTypeDurationMinutes: eventType.eventTypeDurationMinutes,\n      eventTypeDurationOptions: eventType.eventTypeDurationOptions,\n      eventTypeImageUrl: result.raw.bannerUrl || eventType.eventTypeImageUrl,\n      eventTypeLocations: eventType.eventTypeLocations,\n      eventTypeTitle: eventType.eventTypeTitle,\n      hostAvatarUrl: host.hostAvatarUrl,\n      hostAvatars,\n      hostName:\n        host.hostName === \"Unknown user\" && target.type === \"user\"\n          ? target.username\n          : result.raw.publicDisplayName || hostName,\n    },\n    minimumBookingNotice,\n    selectedDurationMinutes,\n  };\n}\n\nfunction hydrateBookerData({\n  initialData,\n  selectedTimeZone,\n  target,\n}: {\n  initialData?: BookerInitialData;\n  selectedTimeZone: string;\n  target: BookerTarget;\n}): HydratedBookerData | null {\n  if (!initialData) {\n    return null;\n  }\n\n  if (initialData.timeZone !== selectedTimeZone) {\n    return null;\n  }\n\n  if (!initialData.result.ok) {\n    const error = classifyError(\n      new BookerDataError(\n        initialData.result.error,\n        initialData.result.errorCode ?? \"UNKNOWN\",\n      ),\n    );\n\n    if (error.kind !== \"not-found\" && error.kind !== \"unpublished\") {\n      return null;\n    }\n\n    return {\n      coveredMonthKeys: new Set(),\n      error,\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      resolved: { eventTypeId: null, eventTypeSlug: null },\n      selectedDurationMinutes: null,\n      slotsByDate: {},\n      slotsCacheKey: \"\",\n    };\n  }\n\n  const derived = deriveBookerData(initialData.result, target);\n  const durationMinutes =\n    derived.selectedDurationMinutes ?? initialData.durationMinutes ?? 30;\n  const identity = getTargetIdentity(target);\n  const anchor = new Date(initialData.monthIso);\n  const safeAnchor = Number.isNaN(anchor.getTime()) ? new Date() : anchor;\n  const monthsToFetch = Math.max(\n    1,\n    Math.floor(initialData.monthsToFetch ?? WINDOW_MONTHS),\n  );\n  const coveredMonthKeys = new Set<string>();\n\n  for (let offset = 0; offset < monthsToFetch; offset += 1) {\n    coveredMonthKeys.add(\n      getMonthCacheKey(\n        identity,\n        selectedTimeZone,\n        durationMinutes,\n        new Date(safeAnchor.getFullYear(), safeAnchor.getMonth() + offset, 1),\n      ),\n    );\n  }\n\n  const slotsByDate = filterBookableSlots(\n    extractSlotsByDate(initialData.result.raw.slots, selectedTimeZone),\n    selectedTimeZone,\n    derived.minimumBookingNotice,\n    new Date(),\n  );\n\n  return {\n    ...derived,\n    coveredMonthKeys,\n    error: null,\n    resolved: initialData.result.resolved,\n    selectedDurationMinutes: durationMinutes,\n    slotsByDate,\n    slotsCacheKey: getSlotsCacheKey(\n      identity,\n      selectedTimeZone,\n      durationMinutes,\n    ),\n  };\n}\n\ntype UseBookerParams = {\n  initialData?: BookerInitialData;\n  target: BookerTarget;\n  timezone?: string;\n};\n\ntype BookerLoadingState = {\n  availability: boolean;\n  busy: boolean;\n  initial: boolean;\n};\n\ntype BookerTimezoneState = {\n  onValueChange: (timeZone: string) => void;\n  value: string;\n};\n\ntype BookerDurationState = {\n  onValueChange: (minutes: number) => void;\n  value: number;\n};\n\ntype BookerCalendarState = {\n  availabilityLoading: boolean;\n  disabled: (date: Date) => boolean;\n  endMonth?: Date;\n  initialLoading: boolean;\n  locale: string;\n  month: Date;\n  onMonthChange: (month: Date) => void;\n  onSelect: (nextDate: Date | undefined) => void;\n  selected: Date | undefined;\n  startMonth: Date;\n  today: Date;\n};\n\ntype BookerTimePickerState = {\n  availabilityLoading: boolean;\n  currentMonth: Date;\n  daySlots: string[];\n  goToDate: (date: Date) => void;\n  hasAvailabilityInView: boolean;\n  initialLoading: boolean;\n  is24Hour: boolean;\n  locale: string;\n  nextAvailableDate: Date | null;\n  onIs24HourChange: (value: boolean) => void;\n  onSelectTime: (time: string) => void;\n  selectedDate: Date | undefined;\n};\n\nexport type UseBookerResult = {\n  calendarProps: BookerCalendarState;\n  durationProps: BookerDurationState;\n  error: BookerError | null;\n  loadingState: BookerLoadingState;\n  meta: BookerMeta | null;\n  retry: () => void;\n  timePickerProps: BookerTimePickerState;\n  timezoneProps: BookerTimezoneState;\n};\n\n// All booker data + interaction logic: fetching/windowing cal.com availability,\n// derived selection state, and the handlers the UI wires to the calendar.\nexport function useBooker({\n  initialData,\n  target,\n  timezone,\n}: UseBookerParams): UseBookerResult {\n  const [timeZone] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().timeZone || \"UTC\",\n  );\n  const [locale] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().locale || \"en-US\",\n  );\n  const initialSelectedTimeZone = initialData?.timeZone ?? timezone ?? timeZone;\n  const hydratedData = useMemo(\n    () =>\n      hydrateBookerData({\n        initialData,\n        selectedTimeZone: initialSelectedTimeZone,\n        target,\n      }),\n    [initialData, initialSelectedTimeZone, target],\n  );\n  const initialCurrentMonth = useMemo(() => {\n    const initialMonth = initialData?.monthIso\n      ? new Date(initialData.monthIso)\n      : new Date();\n    return Number.isNaN(initialMonth.getTime()) ? new Date() : initialMonth;\n  }, [initialData?.monthIso]);\n  const initialSelectedDate = useMemo(() => {\n    if (!hydratedData || hydratedData.error) {\n      return undefined;\n    }\n\n    return (\n      pickDefaultSelectedDate(\n        initialCurrentMonth,\n        hydratedData.slotsByDate,\n        initialSelectedTimeZone,\n        getTodayInTimeZone(initialSelectedTimeZone),\n        {\n          endMonth: hydratedData.meta?.bookingWindowEnd ?? undefined,\n          shiftWeeks: true,\n          startMonth: getMinimumNavigableMonth(\n            initialSelectedTimeZone,\n            hydratedData.meta?.bookingWindowStart,\n          ),\n          weekStartsOn: getWeekStartsOn(locale),\n        },\n      ) ?? undefined\n    );\n  }, [hydratedData, initialCurrentMonth, initialSelectedTimeZone, locale]);\n  const [meta, setMeta] = useState<BookerMeta | null>(\n    hydratedData?.meta ?? null,\n  );\n  const [slotsByDate, setSlotsByDate] = useState<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const [error, setError] = useState<BookerError | null>(\n    hydratedData?.error ?? null,\n  );\n  const [isPending, setIsPending] = useState(false);\n  const [currentMonth, setCurrentMonth] = useState(initialCurrentMonth);\n  const [selectedTimeZone, setSelectedTimeZone] = useState(\n    initialSelectedTimeZone,\n  );\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(\n    initialSelectedDate,\n  );\n  const [_selectedTime, setSelectedTime] = useState<string | null>(null);\n  const [selectedDurationMinutes, setSelectedDurationMinutes] = useState(\n    hydratedData?.selectedDurationMinutes ?? 30,\n  );\n  const [is24Hour, setIs24Hour] = useState(() => prefers24Hour(locale));\n  const coveredMonthsRef = useRef<Set<string>>(\n    hydratedData?.coveredMonthKeys ?? new Set(),\n  );\n  const resolvedRef = useRef<ResolvedEventType>(\n    hydratedData?.resolved ?? { eventTypeId: null, eventTypeSlug: null },\n  );\n  const lastIdentityRef = useRef<string | null>(null);\n  const lastTimeZoneRef = useRef<string | null>(null);\n  const lastDurationRef = useRef<number | null>(null);\n  const autoSelectedMonthRef = useRef<string | null>(\n    initialSelectedDate\n      ? `${initialCurrentMonth.getFullYear()}-${initialCurrentMonth.getMonth()}`\n      : null,\n  );\n  const slotsByDateRef = useRef<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const slotsCacheRef = useRef<Map<string, Record<string, string[]>>>(\n    new Map(\n      hydratedData?.slotsCacheKey\n        ? [[hydratedData.slotsCacheKey, hydratedData.slotsByDate]]\n        : [],\n    ),\n  );\n  const minimumBookingNoticeRef = useRef(\n    hydratedData?.minimumBookingNotice ?? 0,\n  );\n  const hasMultiDurationOptionsRef = useRef(\n    hydratedData?.hasMultiDurationOptions ?? false,\n  );\n  const selectedDateRef = useRef(selectedDate);\n  selectedDateRef.current = selectedDate;\n  const inFlightMonthsRef = useRef<Map<string, Promise<void>>>(new Map());\n  const availabilityRequestVersionRef = useRef(0);\n  const skipInitialWarmRef = useRef(\n    Boolean(hydratedData && !hydratedData.error),\n  );\n\n  const targetIdentity = useCallback((): string => {\n    return getTargetIdentity(target);\n  }, [target]);\n\n  const buildKey = useCallback(\n    (month: Date) =>\n      getMonthCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n        month,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const slotsCacheKey = useCallback(\n    () =>\n      getSlotsCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const restoreSlotsFromCache = useCallback(() => {\n    const cached = slotsCacheRef.current.get(slotsCacheKey()) ?? {};\n    slotsByDateRef.current = cached;\n    setSlotsByDate(cached);\n  }, [slotsCacheKey]);\n\n  useLayoutEffect(() => {\n    restoreSlotsFromCache();\n  }, [restoreSlotsFromCache]);\n\n  // Fetch a window of several months in a single request, anchored at `anchor`.\n  const fetchWindow = useCallback(\n    async (anchor: Date): Promise<void> => {\n      const anchorKey = buildKey(anchor);\n\n      if (coveredMonthsRef.current.has(anchorKey)) {\n        return;\n      }\n\n      const existingRequest = inFlightMonthsRef.current.get(anchorKey);\n      if (existingRequest) {\n        await existingRequest;\n        return;\n      }\n\n      const requestVersion = availabilityRequestVersionRef.current;\n      const windowMonthKeys = Array.from(\n        { length: WINDOW_MONTHS },\n        (_, offset) =>\n          buildKey(\n            new Date(anchor.getFullYear(), anchor.getMonth() + offset, 1),\n          ),\n      );\n      const request = (async () => {\n        const durationMinutes =\n          getDynamicContext(target) || hasMultiDurationOptionsRef.current\n            ? selectedDurationMinutes\n            : undefined;\n\n        const result = await fetchRawBookerDataAction({\n          durationMinutes,\n          fetchMeta: resolvedRef.current.eventTypeId == null,\n          monthIso: anchor.toISOString(),\n          monthsToFetch: WINDOW_MONTHS,\n          target,\n          timeZone: selectedTimeZone,\n          eventTypeId: resolvedRef.current.eventTypeId ?? undefined,\n        });\n\n        if (!result.ok) {\n          throw new BookerDataError(\n            result.error,\n            result.errorCode ?? \"UNKNOWN\",\n          );\n        }\n\n        if (availabilityRequestVersionRef.current !== requestVersion) {\n          return;\n        }\n\n        resolvedRef.current = result.resolved;\n\n        for (let offset = 0; offset < WINDOW_MONTHS; offset += 1) {\n          const month = new Date(\n            anchor.getFullYear(),\n            anchor.getMonth() + offset,\n            1,\n          );\n          coveredMonthsRef.current.add(buildKey(month));\n        }\n\n        // The host/event metadata only comes back on the full (non slots-only)\n        // fetch, so set it once when present.\n        if (result.raw.me) {\n          const derived = deriveBookerData(result, target);\n          minimumBookingNoticeRef.current = derived.minimumBookingNotice;\n          hasMultiDurationOptionsRef.current = derived.hasMultiDurationOptions;\n          setMeta((prev) => prev ?? derived.meta);\n\n          const defaultDuration = derived.selectedDurationMinutes ?? 30;\n          if (derived.meta?.eventTypeDurationOptions?.length) {\n            if (\n              !derived.meta.eventTypeDurationOptions.includes(\n                selectedDurationMinutes,\n              )\n            ) {\n              setSelectedDurationMinutes(defaultDuration);\n            }\n          } else if (\n            derived.meta?.eventTypeDurationMinutes != null &&\n            selectedDurationMinutes !== derived.meta.eventTypeDurationMinutes\n          ) {\n            setSelectedDurationMinutes(derived.meta.eventTypeDurationMinutes);\n          }\n        }\n\n        const windowSlots = filterBookableSlots(\n          extractSlotsByDate(result.raw.slots, selectedTimeZone),\n          selectedTimeZone,\n          minimumBookingNoticeRef.current,\n          new Date(),\n        );\n        const cacheKey = getSlotsCacheKey(\n          targetIdentity(),\n          selectedTimeZone,\n          selectedDurationMinutes,\n        );\n        const mergedSlots = {\n          ...(slotsCacheRef.current.get(cacheKey) ?? {}),\n          ...windowSlots,\n        };\n        slotsCacheRef.current.set(cacheKey, mergedSlots);\n        slotsByDateRef.current = mergedSlots;\n        setSlotsByDate(mergedSlots);\n      })();\n\n      for (const monthKey of windowMonthKeys) {\n        inFlightMonthsRef.current.set(monthKey, request);\n      }\n\n      try {\n        await request;\n      } finally {\n        for (const monthKey of windowMonthKeys) {\n          if (inFlightMonthsRef.current.get(monthKey) === request) {\n            inFlightMonthsRef.current.delete(monthKey);\n          }\n        }\n      }\n    },\n    [\n      buildKey,\n      selectedDurationMinutes,\n      selectedTimeZone,\n      target,\n      targetIdentity,\n    ],\n  );\n\n  const todayStart = useMemo(\n    () => getTodayInTimeZone(selectedTimeZone),\n    [selectedTimeZone],\n  );\n  const startMonth = useMemo(\n    () => getMinimumNavigableMonth(selectedTimeZone, meta?.bookingWindowStart),\n    [meta?.bookingWindowStart, selectedTimeZone],\n  );\n  const calendarViewOptions = useMemo((): CalendarViewOptions => {\n    return {\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      shiftWeeks: true,\n      startMonth,\n      weekStartsOn: getWeekStartsOn(locale),\n    };\n  }, [locale, meta?.bookingWindowEnd, startMonth]);\n\n  const hasAvailabilityInView = useMemo(\n    () =>\n      hasAvailabilityInVisibleGrid(\n        currentMonth,\n        slotsByDate,\n        todayStart,\n        calendarViewOptions,\n      ),\n    [calendarViewOptions, currentMonth, slotsByDate, todayStart],\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const load = async () => {\n      const identity = targetIdentity();\n      let deferLoadForMonthSync = false;\n\n      // A different user/event means a different event type and metadata, so\n      // reset everything and force a full fetch.\n      if (\n        lastIdentityRef.current !== null &&\n        lastIdentityRef.current !== identity\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        resolvedRef.current = { eventTypeId: null, eventTypeSlug: null };\n        hasMultiDurationOptionsRef.current = false;\n        slotsCacheRef.current = new Map();\n        slotsByDateRef.current = {};\n        autoSelectedMonthRef.current = null;\n        setMeta(null);\n        setSelectedDurationMinutes(30);\n        setSlotsByDate({});\n      } else if (\n        lastDurationRef.current !== null &&\n        lastDurationRef.current !== selectedDurationMinutes\n      ) {\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n      } else if (\n        lastTimeZoneRef.current !== null &&\n        lastTimeZoneRef.current !== selectedTimeZone\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n\n        const minMonth = getMinimumNavigableMonth(\n          selectedTimeZone,\n          meta?.bookingWindowStart,\n        );\n        if (isCalendarMonthBefore(currentMonth, minMonth)) {\n          setCurrentMonth(minMonth);\n          deferLoadForMonthSync = true;\n        } else {\n          const todayInTz = getTodayInTimeZone(selectedTimeZone);\n          if (\n            selectedDateRef.current &&\n            toCalendarDateKey(selectedDateRef.current) <\n              toCalendarDateKey(todayInTz)\n          ) {\n            setSelectedDate(undefined);\n          }\n        }\n      }\n      lastIdentityRef.current = identity;\n      lastTimeZoneRef.current = selectedTimeZone;\n      lastDurationRef.current = selectedDurationMinutes;\n\n      if (deferLoadForMonthSync) {\n        return;\n      }\n\n      if (!coveredMonthsRef.current.has(buildKey(currentMonth))) {\n        setIsPending(true);\n        try {\n          await fetchWindow(currentMonth);\n          if (cancelled) {\n            return;\n          }\n          setError(null);\n        } catch (caught) {\n          if (cancelled) {\n            return;\n          }\n          setError(classifyError(caught));\n          return;\n        } finally {\n          if (!cancelled) {\n            setIsPending(false);\n          }\n        }\n      } else {\n        setError(null);\n        setIsPending(false);\n      }\n\n      // Auto-select the first available day the first time this month's\n      // availability is known (on load and on month navigation).\n      const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n      if (!cancelled && autoSelectedMonthRef.current !== monthKey) {\n        const firstAvailable = pickDefaultSelectedDate(\n          currentMonth,\n          slotsByDateRef.current,\n          selectedTimeZone,\n          getTodayInTimeZone(selectedTimeZone),\n          calendarViewOptions,\n        );\n        if (firstAvailable) {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(firstAvailable);\n          setSelectedTime(null);\n        } else {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(undefined);\n          setSelectedTime(null);\n        }\n      }\n\n      // Warm the next uncovered window boundary, not just the adjacent month.\n      // This keeps navigation instant when the user reaches the end of the\n      // currently-covered 3-month range.\n      const nextWindow = new Date(\n        currentMonth.getFullYear(),\n        currentMonth.getMonth() + WINDOW_MONTHS,\n        1,\n      );\n      if (skipInitialWarmRef.current) {\n        skipInitialWarmRef.current = false;\n        return;\n      }\n      if (!coveredMonthsRef.current.has(buildKey(nextWindow))) {\n        void fetchWindow(nextWindow).catch(() => {});\n      }\n    };\n\n    void load();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    buildKey,\n    currentMonth,\n    fetchWindow,\n    selectedDurationMinutes,\n    selectedTimeZone,\n    meta?.bookingWindowStart,\n    calendarViewOptions,\n    restoreSlotsFromCache,\n    targetIdentity,\n  ]);\n\n  const [retryCounter, setRetryCounter] = useState(0);\n\n  const retry = useCallback(() => {\n    coveredMonthsRef.current = new Set();\n    inFlightMonthsRef.current.clear();\n    availabilityRequestVersionRef.current += 1;\n    slotsCacheRef.current = new Map();\n    slotsByDateRef.current = {};\n    autoSelectedMonthRef.current = null;\n    setSlotsByDate({});\n    setError(null);\n    setRetryCounter((c) => c + 1);\n  }, []);\n\n  // Re-trigger the main load effect when the user retries.\n  useEffect(() => {\n    // The first render (retryCounter === 0) is handled by the main effect.\n    if (retryCounter === 0) return;\n    setIsPending(true);\n    let cancelled = false;\n\n    (async () => {\n      try {\n        await fetchWindow(currentMonth);\n        if (cancelled) return;\n        setError(null);\n\n        const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n        if (autoSelectedMonthRef.current !== monthKey) {\n          const firstAvailable = pickDefaultSelectedDate(\n            currentMonth,\n            slotsByDateRef.current,\n            selectedTimeZone,\n            getTodayInTimeZone(selectedTimeZone),\n            calendarViewOptions,\n          );\n          if (firstAvailable) {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(firstAvailable);\n            setSelectedTime(null);\n          } else {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(undefined);\n            setSelectedTime(null);\n          }\n        }\n      } catch (caught) {\n        if (cancelled) return;\n        setError(classifyError(caught));\n      } finally {\n        if (!cancelled) setIsPending(false);\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    retryCounter,\n    fetchWindow,\n    currentMonth,\n    selectedTimeZone,\n    calendarViewOptions,\n  ]);\n\n  useEffect(() => {\n    if (!timezone) {\n      return;\n    }\n    setSelectedTimeZone(timezone);\n  }, [timezone]);\n\n  const selectedDateKey = toCalendarDateKey(selectedDate ?? todayStart);\n  const daySlots =\n    selectedDate != null ? (slotsByDate[selectedDateKey] ?? []) : [];\n  const nextAvailableDate = findNextAvailableDate(\n    slotsByDate,\n    selectedTimeZone,\n    todayStart,\n  );\n\n  const handleMonthChange = (month: Date) => {\n    const monthKey = `${month.getFullYear()}-${month.getMonth()}`;\n    const monthCovered = coveredMonthsRef.current.has(buildKey(month));\n    setCurrentMonth(month);\n    // Flip to pending in the same render as the month change when the target\n    // month still needs fetching, so the skeleton shows immediately instead of\n    // the empty state flashing for a frame before the async effect runs.\n    if (!monthCovered) {\n      setIsPending(true);\n    }\n    // For an already-loaded month, select the first available day in the same\n    // update as the month change so the selection doesn't flicker.\n    const firstAvailable = pickDefaultSelectedDate(\n      month,\n      slotsByDateRef.current,\n      selectedTimeZone,\n      getTodayInTimeZone(selectedTimeZone),\n      calendarViewOptions,\n    );\n    if (firstAvailable) {\n      autoSelectedMonthRef.current = monthKey;\n      setSelectedDate(firstAvailable);\n      setSelectedTime(null);\n    } else {\n      if (monthCovered) {\n        autoSelectedMonthRef.current = monthKey;\n      }\n      setSelectedDate(undefined);\n      setSelectedTime(null);\n    }\n  };\n\n  const handleSelectDate = (nextDate: Date | undefined) => {\n    if (!nextDate) {\n      return;\n    }\n    setSelectedDate(nextDate);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${nextDate.getFullYear()}-${nextDate.getMonth()}`;\n    const isDifferentMonth =\n      nextDate.getMonth() !== currentMonth.getMonth() ||\n      nextDate.getFullYear() !== currentMonth.getFullYear();\n    if (isDifferentMonth) {\n      setCurrentMonth(nextDate);\n    }\n  };\n\n  const isDayDisabled = (date: Date) => {\n    const dayKey = toCalendarDateKey(date);\n    if (dayKey < toCalendarDateKey(todayStart)) {\n      return true;\n    }\n\n    return (slotsByDate[dayKey] ?? []).length === 0;\n  };\n\n  const goToDate = (date: Date) => {\n    setCurrentMonth(date);\n    setSelectedDate(date);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${date.getFullYear()}-${date.getMonth()}`;\n  };\n\n  const initialLoading = !meta;\n  const currentMonthCovered = coveredMonthsRef.current.has(\n    buildKey(currentMonth),\n  );\n  const availabilityLoading = isPending || !currentMonthCovered;\n\n  return {\n    calendarProps: {\n      availabilityLoading,\n      disabled: isDayDisabled,\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      initialLoading,\n      locale,\n      month: currentMonth,\n      onMonthChange: handleMonthChange,\n      onSelect: handleSelectDate,\n      selected: selectedDate,\n      startMonth,\n      today: todayStart,\n    },\n    durationProps: {\n      onValueChange: setSelectedDurationMinutes,\n      value: selectedDurationMinutes,\n    },\n    error,\n    loadingState: {\n      availability: availabilityLoading,\n      busy: initialLoading || availabilityLoading,\n      initial: initialLoading,\n    },\n    meta,\n    retry,\n    timePickerProps: {\n      availabilityLoading,\n      currentMonth,\n      daySlots,\n      goToDate,\n      hasAvailabilityInView,\n      initialLoading,\n      is24Hour,\n      locale,\n      nextAvailableDate,\n      onIs24HourChange: setIs24Hour,\n      onSelectTime: setSelectedTime,\n      selectedDate,\n    },\n    timezoneProps: {\n      onValueChange: setSelectedTimeZone,\n      value: selectedTimeZone,\n    },\n  };\n}\n",
       "type": "registry:lib",
       "target": "lib/booker/use-booker.ts"
     },
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index 6be348fd5..6d11f0b7c 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -46,7 +46,6 @@
         "@coss/separator",
         "@coss/sheet",
         "@coss/sidebar",
-        "@coss/size-transition",
         "@coss/skeleton",
         "@coss/slider",
         "@coss/spinner",
@@ -729,19 +728,6 @@
       ],
       "type": "registry:ui"
     },
-    {
-      "dependencies": [
-        "@base-ui/react"
-      ],
-      "files": [
-        {
-          "path": "registry/default/ui/size-transition.tsx",
-          "type": "registry:ui"
-        }
-      ],
-      "name": "size-transition",
-      "type": "registry:ui"
-    },
     {
       "css": {
         "@keyframes skeleton": {
@@ -11430,12 +11416,10 @@
         "@coss/card",
         "@coss/combobox",
         "@coss/empty",
-        "@coss/input",
         "@coss/label",
         "@coss/popover",
         "@coss/scroll-area",
         "@coss/select",
-        "@coss/size-transition",
         "@coss/skeleton",
         "@coss/switch",
         "@coss/tooltip"
diff --git a/apps/ui/public/r/size-transition.json b/apps/ui/public/r/size-transition.json
deleted file mode 100644
index 5775ae04a..000000000
--- a/apps/ui/public/r/size-transition.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "size-transition",
-  "dependencies": [
-    "@base-ui/react"
-  ],
-  "files": [
-    {
-      "path": "registry/default/ui/size-transition.tsx",
-      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\n\nconst useIsoLayoutEffect =\n  typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n\ntype Size = { width: number; height: number };\n\nexport type SizeTransitionAxis = \"both\" | \"width\" | \"height\";\n\nexport type SizeTransitionProps = useRender.ComponentProps<\"div\"> & {\n  /**\n   * The value whose change triggers a transition. When it changes, the\n   * outgoing content is cross-faded into the incoming `children` while the\n   * element animates between the two content sizes.\n   */\n  transitionKey: React.Key;\n  /**\n   * Which dimensions to animate. Non-animated dimensions stay `auto`.\n   * @default \"both\"\n   */\n  axis?: SizeTransitionAxis;\n};\n\nfunction measureSize(element: HTMLElement): Size {\n  return { width: element.offsetWidth, height: element.offsetHeight };\n}\n\nfunction freezeSize(\n  element: HTMLElement,\n  size: Size,\n  axis: SizeTransitionAxis,\n) {\n  if (axis !== \"height\") {\n    element.style.setProperty(\"--size-width\", `${size.width}px`);\n  }\n  if (axis !== \"width\") {\n    element.style.setProperty(\"--size-height\", `${size.height}px`);\n  }\n}\n\nfunction releaseSize(element: HTMLElement) {\n  element.style.removeProperty(\"--size-width\");\n  element.style.removeProperty(\"--size-height\");\n}\n\n/**\n * Runs `callback` once every animation currently running on `element` has\n * finished. Falls back to running synchronously when the Web Animations API is\n * unavailable (e.g. jsdom) or nothing is animating.\n */\nfunction runAfterAnimations(\n  element: HTMLElement | null,\n  callback: () => void,\n  signal: AbortSignal,\n): number {\n  if (!element || typeof element.getAnimations !== \"function\") {\n    callback();\n    return -1;\n  }\n  // Wait a frame so freshly-triggered transitions have registered.\n  return requestAnimationFrame(() => {\n    if (signal.aborted) {\n      return;\n    }\n    const animations = element.getAnimations();\n    if (animations.length === 0) {\n      callback();\n      return;\n    }\n    Promise.all(animations.map((animation) => animation.finished))\n      .then(() => {\n        if (!signal.aborted) {\n          callback();\n        }\n      })\n      .catch(() => {\n        if (!signal.aborted) {\n          callback();\n        }\n      });\n  });\n}\n\n/**\n * Animates its element between the sizes of successive `children` and\n * cross-fades the outgoing content into the incoming one whenever\n * `transitionKey` changes.\n *\n * Size is exposed as `--size-width` / `--size-height` (pixels during a\n * transition, `auto` at rest), so the consumer opts in via classes such as\n * `w-(--size-width,auto) h-(--size-height,auto) transition-[width,height]`.\n * Content layers carry Base UI's transition data attributes\n * (`data-current`, `data-previous`, `data-starting-style`, `data-ending-style`)\n * and the element carries `data-transitioning` while a transition is running.\n */\nexport function SizeTransition({\n  axis = \"both\",\n  transitionKey,\n  children,\n  render,\n  ...props\n}: SizeTransitionProps): React.ReactElement {\n  const rootRef = React.useRef<HTMLElement | null>(null);\n  const currentRef = React.useRef<HTMLDivElement | null>(null);\n  const previousRef = React.useRef<HTMLDivElement | null>(null);\n  // A DOM clone of the current content, refreshed after every render so the\n  // outgoing subtree is available the moment `transitionKey` changes.\n  const snapshotRef = React.useRef<HTMLDivElement | null>(null);\n  const committedSizeRef = React.useRef<Size | null>(null);\n  const previousKeyRef = React.useRef<React.Key>(transitionKey);\n  const isFirstRenderRef = React.useRef(true);\n\n  const [previousContent, setPreviousContent] =\n    React.useState<HTMLDivElement | null>(null);\n  const [previousSize, setPreviousSize] = React.useState<Size | null>(null);\n  const [startingStyle, setStartingStyle] = React.useState(false);\n\n  const isTransitioning = previousContent !== null;\n\n  // Drive the size animation and cross-fade when the key changes.\n  useIsoLayoutEffect(() => {\n    const element = rootRef.current;\n    if (!element) {\n      return;\n    }\n\n    if (isFirstRenderRef.current) {\n      isFirstRenderRef.current = false;\n      previousKeyRef.current = transitionKey;\n      committedSizeRef.current = measureSize(element);\n      return;\n    }\n\n    if (previousKeyRef.current === transitionKey) {\n      return;\n    }\n    previousKeyRef.current = transitionKey;\n\n    const outgoingContent = snapshotRef.current;\n    const previousSizeValue = committedSizeRef.current;\n\n    if (outgoingContent) {\n      setPreviousContent(outgoingContent);\n      setStartingStyle(true);\n    }\n\n    // Measure the incoming content at its natural size, then keep transitions\n    // suppressed on the entering layer so its `data-starting-style` snaps into\n    // place (e.g. opacity 0) instead of animating away from the resting value.\n    releaseSize(element);\n    currentRef.current?.style.removeProperty(\"width\");\n    currentRef.current?.style.setProperty(\"transition\", \"none\");\n    const newSize = measureSize(element);\n    committedSizeRef.current = newSize;\n\n    // Pin the entering layer to its final width so it lays out at full size\n    // from the first frame and is merely clipped while the element grows,\n    // instead of reflowing (e.g. buttons shrinking) as the width animates.\n    if (axis !== \"height\") {\n      currentRef.current?.style.setProperty(\"width\", `${newSize.width}px`);\n    }\n\n    if (previousSizeValue) {\n      freezeSize(element, previousSizeValue, axis);\n      setPreviousSize(previousSizeValue);\n    }\n\n    const sizeAbort = new AbortController();\n    const fadeAbort = new AbortController();\n    let sizeFinishFrame = -1;\n    let fadeFinishFrame = -1;\n\n    const frame = requestAnimationFrame(() => {\n      // The frozen size and `data-starting-style` were committed on the\n      // previous (synchronous) render but not yet computed by the browser.\n      // Force a style/layout flush so the starting values are registered,\n      // otherwise the browser coalesces them with the changes below and the\n      // transitions never run.\n      void element.offsetHeight;\n\n      freezeSize(element, newSize, axis);\n      // Re-enable the entering layer's transition now that its starting style\n      // has been registered, so removing `data-starting-style` animates.\n      currentRef.current?.style.removeProperty(\"transition\");\n      ReactDOM.flushSync(() => setStartingStyle(false));\n\n      sizeFinishFrame = runAfterAnimations(\n        element,\n        () => {\n          releaseSize(element);\n          currentRef.current?.style.removeProperty(\"width\");\n        },\n        sizeAbort.signal,\n      );\n      fadeFinishFrame = runAfterAnimations(\n        currentRef.current,\n        () => {\n          setPreviousContent(null);\n          setPreviousSize(null);\n          snapshotRef.current = null;\n        },\n        fadeAbort.signal,\n      );\n    });\n\n    return () => {\n      sizeAbort.abort();\n      fadeAbort.abort();\n      cancelAnimationFrame(frame);\n      cancelAnimationFrame(sizeFinishFrame);\n      cancelAnimationFrame(fadeFinishFrame);\n    };\n  }, [axis, transitionKey]);\n\n  // Populate the previous layer with the cloned outgoing subtree.\n  useIsoLayoutEffect(() => {\n    const container = previousRef.current;\n    if (!container || !previousContent) {\n      return;\n    }\n    container.replaceChildren(...Array.from(previousContent.childNodes));\n  }, [previousContent]);\n\n  // Snapshot the current content after every render so it can become the\n  // outgoing layer on the next key change. Declared last so the transition\n  // effect above reads the prior render's snapshot before it is refreshed.\n  useIsoLayoutEffect(() => {\n    const source = currentRef.current;\n    if (!source) {\n      return;\n    }\n    const wrapper = source.ownerDocument.createElement(\"div\");\n    for (const child of Array.from(source.childNodes)) {\n      wrapper.appendChild(child.cloneNode(true));\n    }\n    snapshotRef.current = wrapper;\n  });\n\n  const currentLayer = (\n    <div\n      data-current=\"\"\n      data-starting-style={isTransitioning && startingStyle ? \"\" : undefined}\n      key={transitionKey}\n      ref={currentRef}\n    >\n      {children}\n    </div>\n  );\n\n  const content = isTransitioning ? (\n    <React.Fragment>\n      <div\n        data-ending-style={startingStyle ? undefined : \"\"}\n        data-previous=\"\"\n        inert\n        key=\"previous\"\n        ref={previousRef}\n        style={{\n          position: \"absolute\",\n          ...(previousSize\n            ? { height: previousSize.height, width: previousSize.width }\n            : null),\n        }}\n      />\n      {currentLayer}\n    </React.Fragment>\n  ) : (\n    currentLayer\n  );\n\n  const defaultProps = {\n    className: \"relative\",\n    \"data-slot\": \"size-transition\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props, { children: content }),\n    render,\n    ref: rootRef,\n    state: { transitioning: isTransitioning },\n    stateAttributesMapping: {\n      transitioning: (value) => (value ? { \"data-transitioning\": \"\" } : null),\n    },\n  });\n}\n",
-      "type": "registry:ui"
-    }
-  ],
-  "type": "registry:ui"
-}
\ No newline at end of file
diff --git a/apps/ui/public/r/ui.json b/apps/ui/public/r/ui.json
index 8d590c513..81c6d2f84 100644
--- a/apps/ui/public/r/ui.json
+++ b/apps/ui/public/r/ui.json
@@ -44,7 +44,6 @@
     "@coss/separator",
     "@coss/sheet",
     "@coss/sidebar",
-    "@coss/size-transition",
     "@coss/skeleton",
     "@coss/slider",
     "@coss/spinner",
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index 6be348fd5..6d11f0b7c 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -46,7 +46,6 @@
         "@coss/separator",
         "@coss/sheet",
         "@coss/sidebar",
-        "@coss/size-transition",
         "@coss/skeleton",
         "@coss/slider",
         "@coss/spinner",
@@ -729,19 +728,6 @@
       ],
       "type": "registry:ui"
     },
-    {
-      "dependencies": [
-        "@base-ui/react"
-      ],
-      "files": [
-        {
-          "path": "registry/default/ui/size-transition.tsx",
-          "type": "registry:ui"
-        }
-      ],
-      "name": "size-transition",
-      "type": "registry:ui"
-    },
     {
       "css": {
         "@keyframes skeleton": {
@@ -11430,12 +11416,10 @@
         "@coss/card",
         "@coss/combobox",
         "@coss/empty",
-        "@coss/input",
         "@coss/label",
         "@coss/popover",
         "@coss/scroll-area",
         "@coss/select",
-        "@coss/size-transition",
         "@coss/skeleton",
         "@coss/switch",
         "@coss/tooltip"
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index fe5698140..1a53230aa 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -763,24 +763,6 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
-  "size-transition": {
-    name: "size-transition",
-    description: "",
-    type: "registry:ui",
-    registryDependencies: undefined,
-    files: [{
-      path: "registry/default/ui/size-transition.tsx",
-      type: "registry:ui",
-      target: ""
-    }],
-    component: React.lazy(async () => {
-      const mod = await import("@/registry/default/ui/size-transition.tsx")
-      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
-      return { default: mod.default || mod[exportName] }
-    }),
-    categories: undefined,
-    meta: undefined,
-  },
   "skeleton": {
     name: "skeleton",
     description: "",
@@ -9857,7 +9839,7 @@ export const Index: Record<string, any> = {
     name: "booker-1",
     description: "A full scheduling flow powered by Cal.com API v2.",
     type: "registry:block",
-    registryDependencies: ["@coss/avatar","@coss/button","@coss/cal-api","@coss/card","@coss/combobox","@coss/empty","@coss/input","@coss/label","@coss/popover","@coss/scroll-area","@coss/select","@coss/size-transition","@coss/skeleton","@coss/switch","@coss/tooltip"],
+    registryDependencies: ["@coss/avatar","@coss/button","@coss/cal-api","@coss/card","@coss/combobox","@coss/empty","@coss/label","@coss/popover","@coss/scroll-area","@coss/select","@coss/skeleton","@coss/switch","@coss/tooltip"],
     files: [{
       path: "registry/default/atoms/booker-1.tsx",
       type: "registry:block",
diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index 7baae65f2..aac1b2813 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -4,10 +4,6 @@ import { ArrowLeftIcon, Clock3Icon } from "lucide-react";
 import { Button } from "@/registry/default/ui/button";
 import { Card } from "@/registry/default/ui/card";
 import { Input } from "@/registry/default/ui/input";
-import {
-  SizeTransition,
-  SizeTransitionPanel,
-} from "@/registry/default/ui/size-transition";
 import { Skeleton } from "@/registry/default/ui/skeleton";
 import { BookerAvatars } from "./booker/booker-avatars";
 import { BookerCalendar } from "./booker/booker-calendar";
@@ -144,16 +140,9 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
             )}
           </div>
         </div>
-        <SizeTransition
-          transitionKey={booker.step}
-          render={
-            <div className="h-(--size-height,auto) w-full @3xl:w-(--size-width,auto) transition-[width,height] data-transitioning:overflow-clip **:data-current:transition-opacity **:data-current:data-starting-style:opacity-0 **:data-previous:transition-opacity **:data-previous:data-ending-style:opacity-0" />
-          }
-        >
+        <div className="flex w-full flex-col @3xl:flex-1 @3xl:flex-row">
           {booker.step === "select" ? (
-            <SizeTransitionPanel
-              render={<div className="flex w-full flex-col @3xl:flex-row" />}
-            >
+            <>
               {/* Calendar */}
               <div className="flex w-full @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4">
                 <BookerCalendar {...booker.calendarProps} />
@@ -172,21 +161,17 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
                 }}
                 {...booker.timePickerProps}
               />
-            </SizeTransitionPanel>
+            </>
           ) : (
-            <SizeTransitionPanel
-              render={
-                <div className="w-full @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4" />
-              }
-            >
+            <div className="@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4">
               <Button variant="ghost" size="sm" onClick={booker.onBack}>
                 <ArrowLeftIcon aria-hidden="true" />
                 Back
               </Button>
               <Input className="w-full" placeholder="Your name" />
-            </SizeTransitionPanel>
+            </div>
           )}
-        </SizeTransition>
+        </div>
       </Card>
       <a
         href="https://cal.com"
diff --git a/apps/ui/registry/default/ui/size-transition.tsx b/apps/ui/registry/default/ui/size-transition.tsx
deleted file mode 100644
index 524e99537..000000000
--- a/apps/ui/registry/default/ui/size-transition.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-"use client";
-
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-
-const useIsoLayoutEffect =
-  typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
-
-type Size = { width: number; height: number };
-
-export type SizeTransitionAxis = "both" | "width" | "height";
-
-type SizeTransitionContextValue = {
-  currentRef: React.RefObject<HTMLElement | null>;
-  transitioning: boolean;
-  startingStyle: boolean;
-};
-
-const SizeTransitionContext: React.Context<SizeTransitionContextValue | null> =
-  React.createContext<SizeTransitionContextValue | null>(null);
-
-function useSizeTransitionContext(): SizeTransitionContextValue {
-  const context = React.useContext(SizeTransitionContext);
-  if (!context) {
-    throw new Error(
-      "`SizeTransitionPanel` must be used within a `SizeTransition`.",
-    );
-  }
-  return context;
-}
-
-function measureSize(element: HTMLElement): Size {
-  return { width: element.offsetWidth, height: element.offsetHeight };
-}
-
-function freezeSize(
-  element: HTMLElement,
-  size: Size,
-  axis: SizeTransitionAxis,
-) {
-  if (axis !== "height") {
-    element.style.setProperty("--size-width", `${size.width}px`);
-  }
-  if (axis !== "width") {
-    element.style.setProperty("--size-height", `${size.height}px`);
-  }
-}
-
-function releaseSize(element: HTMLElement) {
-  element.style.removeProperty("--size-width");
-  element.style.removeProperty("--size-height");
-}
-
-/**
- * Runs `callback` once every animation currently running on `element` has
- * finished. Falls back to running synchronously when the Web Animations API is
- * unavailable (e.g. jsdom) or nothing is animating.
- */
-function runAfterAnimations(
-  element: HTMLElement | null,
-  callback: () => void,
-  signal: AbortSignal,
-): number {
-  if (!element || typeof element.getAnimations !== "function") {
-    callback();
-    return -1;
-  }
-  return requestAnimationFrame(() => {
-    if (signal.aborted) {
-      return;
-    }
-    const animations = element.getAnimations();
-    if (animations.length === 0) {
-      callback();
-      return;
-    }
-    Promise.all(animations.map((animation) => animation.finished))
-      .then(() => {
-        if (!signal.aborted) {
-          callback();
-        }
-      })
-      .catch(() => {
-        if (!signal.aborted) {
-          callback();
-        }
-      });
-  });
-}
-
-export type SizeTransitionProps = useRender.ComponentProps<"div"> & {
-  /** Value whose change triggers a size animation and content cross-fade. */
-  transitionKey: React.Key;
-  /**
-   * Which dimensions to animate. Non-animated dimensions stay `auto`.
-   * @default "both"
-   */
-  axis?: SizeTransitionAxis;
-};
-
-/**
- * Animates between the sizes of successive `SizeTransitionPanel` children and
- * cross-fades outgoing content into incoming content when `transitionKey`
- * changes.
- *
- * Size is exposed as `--size-width` / `--size-height` (pixels during a
- * transition, `auto` at rest). Opt in via classes such as
- * `w-(--size-width,auto) h-(--size-height,auto) transition-[width,height]`.
- */
-export function SizeTransition({
-  axis = "both",
-  transitionKey,
-  children,
-  render,
-  ...props
-}: SizeTransitionProps): React.ReactElement {
-  const rootRef = React.useRef<HTMLElement | null>(null);
-  const currentRef = React.useRef<HTMLElement | null>(null);
-  const previousRef = React.useRef<HTMLDivElement | null>(null);
-  const snapshotRef = React.useRef<HTMLElement | null>(null);
-  const committedSizeRef = React.useRef<Size | null>(null);
-  const previousKeyRef = React.useRef<React.Key>(transitionKey);
-  const isFirstRenderRef = React.useRef(true);
-
-  const [previousContent, setPreviousContent] =
-    React.useState<HTMLElement | null>(null);
-  const [previousSize, setPreviousSize] = React.useState<Size | null>(null);
-  const [startingStyle, setStartingStyle] = React.useState(false);
-
-  const isTransitioning = previousContent !== null;
-
-  useIsoLayoutEffect(() => {
-    const element = rootRef.current;
-    if (!element) {
-      return;
-    }
-
-    if (isFirstRenderRef.current) {
-      isFirstRenderRef.current = false;
-      previousKeyRef.current = transitionKey;
-      committedSizeRef.current = measureSize(element);
-      return;
-    }
-
-    if (previousKeyRef.current === transitionKey) {
-      return;
-    }
-    previousKeyRef.current = transitionKey;
-
-    const outgoingContent = snapshotRef.current;
-    const previousSizeValue = committedSizeRef.current;
-
-    if (outgoingContent) {
-      setPreviousContent(outgoingContent);
-      setStartingStyle(true);
-    }
-
-    releaseSize(element);
-    currentRef.current?.style.removeProperty("width");
-    currentRef.current?.style.setProperty("transition", "none");
-    const newSize = measureSize(element);
-    committedSizeRef.current = newSize;
-
-    // Pin the entering panel to its final width so content is clipped, not reflowed.
-    if (axis !== "height") {
-      currentRef.current?.style.setProperty("width", `${newSize.width}px`);
-    }
-
-    if (previousSizeValue) {
-      freezeSize(element, previousSizeValue, axis);
-      setPreviousSize(previousSizeValue);
-    }
-
-    const sizeAbort = new AbortController();
-    const fadeAbort = new AbortController();
-    let sizeFinishFrame = -1;
-    let fadeFinishFrame = -1;
-
-    const frame = requestAnimationFrame(() => {
-      // Force a reflow so starting styles register before ending styles apply.
-      void element.offsetHeight;
-
-      freezeSize(element, newSize, axis);
-      currentRef.current?.style.removeProperty("transition");
-      ReactDOM.flushSync(() => setStartingStyle(false));
-
-      sizeFinishFrame = runAfterAnimations(
-        element,
-        () => {
-          releaseSize(element);
-          currentRef.current?.style.removeProperty("width");
-        },
-        sizeAbort.signal,
-      );
-      fadeFinishFrame = runAfterAnimations(
-        currentRef.current,
-        () => {
-          setPreviousContent(null);
-          setPreviousSize(null);
-          snapshotRef.current = null;
-        },
-        fadeAbort.signal,
-      );
-    });
-
-    return () => {
-      sizeAbort.abort();
-      fadeAbort.abort();
-      cancelAnimationFrame(frame);
-      cancelAnimationFrame(sizeFinishFrame);
-      cancelAnimationFrame(fadeFinishFrame);
-    };
-  }, [axis, transitionKey]);
-
-  useIsoLayoutEffect(() => {
-    const container = previousRef.current;
-    if (!container || !previousContent) {
-      return;
-    }
-    container.replaceChildren(previousContent);
-  }, [previousContent]);
-
-  // Declared last so the transition effect reads the prior render's snapshot.
-  useIsoLayoutEffect(() => {
-    const source = currentRef.current;
-    if (!source) {
-      return;
-    }
-    const clone = source.cloneNode(true) as HTMLElement;
-    clone.removeAttribute("data-current");
-    clone.removeAttribute("data-starting-style");
-    clone.style.removeProperty("width");
-    clone.style.removeProperty("transition");
-    snapshotRef.current = clone;
-  });
-
-  const contextValue = React.useMemo<SizeTransitionContextValue>(
-    () => ({ currentRef, startingStyle, transitioning: isTransitioning }),
-    [isTransitioning, startingStyle],
-  );
-
-  const content = isTransitioning ? (
-    <React.Fragment>
-      {children}
-      {/* After `children` so inserting this layer never remounts the panel. */}
-      <div
-        data-ending-style={startingStyle ? undefined : ""}
-        data-previous=""
-        inert
-        key="previous"
-        ref={previousRef}
-        style={{
-          left: 0,
-          position: "absolute",
-          top: 0,
-          ...(previousSize
-            ? { height: previousSize.height, width: previousSize.width }
-            : null),
-        }}
-      />
-    </React.Fragment>
-  ) : (
-    children
-  );
-
-  const defaultProps = {
-    className: "relative",
-    "data-slot": "size-transition",
-  };
-
-  const element = useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props, { children: content }),
-    render,
-    ref: rootRef,
-    state: { transitioning: isTransitioning },
-    stateAttributesMapping: {
-      transitioning: (value) => (value ? { "data-transitioning": "" } : null),
-    },
-  });
-
-  return (
-    <SizeTransitionContext.Provider value={contextValue}>
-      {element}
-    </SizeTransitionContext.Provider>
-  );
-}
-
-export type SizeTransitionPanelProps = useRender.ComponentProps<"div">;
-
-/**
- * Active content layer of a `SizeTransition`. Uses the `render` element as
- * `data-current` so no extra wrapper is added.
- */
-export function SizeTransitionPanel({
-  render,
-  ...props
-}: SizeTransitionPanelProps): React.ReactElement {
-  const { currentRef, startingStyle, transitioning } =
-    useSizeTransitionContext();
-
-  return useRender({
-    defaultTagName: "div",
-    props,
-    render,
-    ref: currentRef,
-    state: { current: true, startingStyle: transitioning && startingStyle },
-    stateAttributesMapping: {
-      current: () => ({
-        "data-current": "",
-        "data-slot": "size-transition-panel",
-      }),
-      startingStyle: (value) => (value ? { "data-starting-style": "" } : null),
-    },
-  });
-}
diff --git a/apps/ui/registry/registry-atoms.ts b/apps/ui/registry/registry-atoms.ts
index 3e21df0d5..1ecf936cc 100644
--- a/apps/ui/registry/registry-atoms.ts
+++ b/apps/ui/registry/registry-atoms.ts
@@ -107,7 +107,6 @@ export const atoms: AtomItem[] = [
       "@coss/popover",
       "@coss/scroll-area",
       "@coss/select",
-      "@coss/size-transition",
       "@coss/skeleton",
       "@coss/switch",
       "@coss/tooltip",
diff --git a/apps/ui/registry/registry-ui.ts b/apps/ui/registry/registry-ui.ts
index c8fc02df1..0837520dd 100644
--- a/apps/ui/registry/registry-ui.ts
+++ b/apps/ui/registry/registry-ui.ts
@@ -46,7 +46,6 @@ export const ui: Registry["items"] = [
       "@coss/separator",
       "@coss/sheet",
       "@coss/sidebar",
-      "@coss/size-transition",
       "@coss/skeleton",
       "@coss/slider",
       "@coss/spinner",
@@ -628,17 +627,6 @@ export const ui: Registry["items"] = [
     ],
     type: "registry:ui",
   },
-  {
-    dependencies: ["@base-ui/react"],
-    files: [
-      {
-        path: "ui/size-transition.tsx",
-        type: "registry:ui",
-      },
-    ],
-    name: "size-transition",
-    type: "registry:ui",
-  },
   {
     css: {
       "@keyframes skeleton": {

From 67b9fa321744ff5158c160ffee46330cb735bdcd Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 6 Jul 2026 17:32:00 +0000
Subject: [PATCH 05/49] feat(booker): animate step 1->2 with motion instead of
 custom SizeTransition

Co-Authored-By: pasquale <pasqualevitiello@gmail.com>
---
 apps/ui/package.json                        |  1 +
 apps/ui/public/r/booker-1.json              | 12 +--
 apps/ui/public/r/registry.json              |  4 +-
 apps/ui/registry.json                       |  4 +-
 apps/ui/registry/__index__.tsx              |  2 +-
 apps/ui/registry/default/atoms/booker-1.tsx | 97 ++++++++++++++-------
 apps/ui/registry/registry-atoms.ts          |  2 +-
 bun.lock                                    | 10 +++
 8 files changed, 91 insertions(+), 41 deletions(-)

diff --git a/apps/ui/package.json b/apps/ui/package.json
index fc45274ff..a4e362af9 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -15,6 +15,7 @@
     "jotai": "^2.15.1",
     "lucide-react": "^0.555.0",
     "marked": "^18.0.5",
+    "motion": "12.42.0",
     "next": "16.2.5",
     "react": "^19.2.6",
     "react-day-picker": "^9.13.0",
diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index 0b6431ef9..173b792b4 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -5,7 +5,8 @@
   "dependencies": [
     "isomorphic-dompurify",
     "marked",
-    "lucide-react"
+    "lucide-react",
+    "motion"
   ],
   "registryDependencies": [
     "@coss/avatar",
@@ -14,6 +15,7 @@
     "@coss/card",
     "@coss/combobox",
     "@coss/empty",
+    "@coss/input",
     "@coss/label",
     "@coss/popover",
     "@coss/scroll-area",
@@ -25,13 +27,13 @@
   "files": [
     {
       "path": "registry/default/atoms/booker-1.tsx",
-      "content": "\"use client\";\n\nimport { Clock3Icon } from \"lucide-react\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container mx-auto flex w-full max-w-5xl flex-1 flex-col items-center justify-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"w-full @3xl:flex-row @3xl:divide-x divide-y @3xl:divide-y-0\">\n        {/* Meta */}\n        <div className=\"@3xl:w-56 @5xl:w-70\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        {/* Calendar */}\n        <div className=\"flex flex-1 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n          <BookerCalendar {...booker.calendarProps} />\n        </div>\n        {/* Time picker */}\n        <TimePicker\n          labels={{\n            hour12Short: t.hour12Short,\n            hour24Short: t.hour24Short,\n            noAvailableTimes: t.noAvailableTimes,\n            noSlotsAvailable: t.noSlotsAvailable,\n            noSlotsThisDay: t.noSlotsThisDay,\n            noSlotsThisMonth: t.noSlotsThisMonth,\n            use24Hour: t.use24Hour,\n            viewFirstAvailability: t.viewFirstAvailability,\n          }}\n          {...booker.timePickerProps}\n        />\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
+      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row [--booker-side:--spacing(56)] @5xl:[--booker-side:--spacing(70)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) border-b @3xl:border-b-0 @3xl:border-e\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{ duration: 0.45, ease: [0.32, 0.72, 0, 1] }}\n          >\n            <m.div\n              layout\n              className=\"relative flex w-full flex-col overflow-clip @3xl:w-auto @3xl:flex-row\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    layout=\"position\"\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full flex-col @3xl:flex-row\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex w-full @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    layout=\"position\"\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"w-full @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input className=\"w-full\" placeholder=\"Your name\" />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </m.div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
       "type": "registry:block",
       "target": "components/atoms/booker-1.tsx"
     },
     {
       "path": "registry/default/atoms/booker/booker-calendar.tsx",
-      "content": "\"use client\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipCreateHandle,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\n// A single shared tooltip reused across every day cell (via the handle/payload\n// pattern). Reusing one instance lets it gracefully move/scale between days\n// instead of mounting a separate tooltip per cell.\nconst monthTooltipHandle = TooltipCreateHandle<string>();\n\n// Falls back to English (US) when no `locale` prop is provided.\nconst DEFAULT_LOCALE = \"en-US\";\n\ntype CalendarLabels = {\n  /** ARIA label for the previous-month navigation button. */\n  previousMonth: string;\n  /** ARIA label for the next-month navigation button. */\n  nextMonth: string;\n  /** ARIA label for the navigation toolbar. */\n  nav: string;\n  /** Prefix for today's day button label, e.g. \"Today, Monday, …\". */\n  today: string;\n  /** Suffix for the selected day button label, e.g. \"…, selected\". */\n  selected: string;\n};\n\n// English defaults. Localize by passing translated strings via the `labels`\n// prop (wire it up to your app's own i18n layer); date/weekday/month names are\n// still localized automatically from `locale` via `Intl`.\nconst DEFAULT_LABELS: CalendarLabels = {\n  previousMonth: \"Go to the Previous Month\",\n  nextMonth: \"Go to the Next Month\",\n  nav: \"Navigation bar\",\n  today: \"Today\",\n  selected: \"selected\",\n};\n\n// Resolves the text direction for the locale (e.g. \"rtl\" for Arabic/Hebrew).\nfunction getTextDirection(locale: string): \"ltr\" | \"rtl\" {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      textInfo?: { direction?: string };\n      getTextInfo?: () => { direction?: string };\n    };\n    const info =\n      typeof localeObj.getTextInfo === \"function\"\n        ? localeObj.getTextInfo()\n        : localeObj.textInfo;\n    if (info?.direction === \"rtl\") {\n      return \"rtl\";\n    }\n  } catch {\n    // Fall through to the ltr default below.\n  }\n  return \"ltr\";\n}\n\n// Locale-aware formatting/ordering, derived from a BCP-47 locale string.\ntype Localization = {\n  weekStartsOn: number;\n  monthYearLabel: (date: Date) => string;\n  fullDateLabel: (date: Date) => string;\n  monthShortLabel: (date: Date) => string;\n  monthLongLabel: (date: Date) => string;\n  weekdayLong: (date: Date) => string;\n  weekdayShort: (date: Date) => string;\n  dayNumber: (date: Date) => string;\n  captionFormatter: Intl.DateTimeFormat;\n};\n\n// 1 = Monday … 7 = Sunday (ISO) → JS getDay() index (0 = Sunday … 6 = Saturday).\nfunction getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction buildLocalization(\n  locale: string,\n  weekStartsOnOverride?: number,\n): Localization {\n  const longDateFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n    year: \"numeric\",\n    month: \"long\",\n    day: \"numeric\",\n  });\n  const monthYearFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n    year: \"numeric\",\n  });\n  const monthShortFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  });\n  const monthLongFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n  });\n  const weekdayLongFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n  });\n  const weekdayShortFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  });\n  const dayFormatter = new Intl.DateTimeFormat(locale, { day: \"numeric\" });\n\n  return {\n    weekStartsOn: weekStartsOnOverride ?? getWeekStartsOn(locale),\n    monthYearLabel: (date) => monthYearFormatter.format(date),\n    fullDateLabel: (date) => longDateFormatter.format(date),\n    monthShortLabel: (date) => monthShortFormatter.format(date),\n    monthLongLabel: (date) => monthLongFormatter.format(date),\n    weekdayLong: (date) => weekdayLongFormatter.format(date),\n    weekdayShort: (date) => weekdayShortFormatter.format(date),\n    dayNumber: (date) => dayFormatter.format(date),\n    captionFormatter: monthYearFormatter,\n  };\n}\n\nfunction pad2(value: number): string {\n  return value < 10 ? `0${value}` : String(value);\n}\n\nfunction isoDate(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;\n}\n\nfunction isoMonth(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}`;\n}\n\nfunction startOfDay(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n}\n\nfunction startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction addDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction addMonths(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth() + amount, date.getDate());\n}\n\nfunction startOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = startOfDay(date);\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return addDays(day, -diff);\n}\n\nfunction endOfWeek(date: Date, weekStartsOn = 0): Date {\n  return addDays(startOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nfunction isSameMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nfunction differenceInCalendarMonths(a: Date, b: Date): number {\n  return (\n    (a.getFullYear() - b.getFullYear()) * 12 + (a.getMonth() - b.getMonth())\n  );\n}\n\ntype CalendarDay = {\n  date: Date;\n  outside: boolean;\n  isoDate: string;\n  dateMonthId: string;\n};\n\ntype DayModifiers = {\n  focused: boolean;\n  disabled: boolean;\n  hidden: boolean;\n  outside: boolean;\n  today: boolean;\n  selected: boolean;\n};\n\n// Builds the month grid as full weeks covering the month.\n//\n// `shiftRows` slides the window forward by that many weeks, dropping the\n// month's earliest week(s). When `fillToSix` is set the grid is then padded to\n// a full 6 rows with days from the next month. Together they keep today's week\n// plus the next two visible without exceeding 6 rows; with both at their\n// defaults the month spans only the weeks it naturally needs.\nfunction buildCalendarDays(\n  month: Date,\n  weekStartsOn: number,\n  shiftRows: number,\n  fillToSix: boolean,\n): CalendarDay[] {\n  const monthStart = startOfMonth(month);\n  const offset = shiftRows * 7;\n  const gridStart = addDays(startOfWeek(monthStart, weekStartsOn), offset);\n  const gridEnd = addDays(endOfWeek(endOfMonth(month), weekStartsOn), offset);\n\n  const dates: Date[] = [];\n  for (let cursor = gridStart; cursor <= gridEnd; cursor = addDays(cursor, 1)) {\n    dates.push(cursor);\n  }\n\n  if (fillToSix) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(addDays(lastDate, 1));\n    }\n  }\n\n  return dates.map((date) => ({\n    date,\n    outside: !isSameMonth(date, month),\n    isoDate: isoDate(date),\n    dateMonthId: isoMonth(date),\n  }));\n}\n\nfunction chunkWeeks(days: CalendarDay[]): CalendarDay[][] {\n  const weeks: CalendarDay[][] = [];\n  for (let i = 0; i < days.length; i += 7) {\n    weeks.push(days.slice(i, i + 7));\n  }\n  return weeks;\n}\n\nfunction isFocusableDay(modifiers: DayModifiers): boolean {\n  return !modifiers.disabled && !modifiers.hidden && !modifiers.outside;\n}\n\n// A single day cell's button. Focuses itself when it becomes the roving-tabindex\n// target so keyboard navigation moves the actual DOM focus.\nfunction DayButton({\n  focused,\n  nextMonthLabel,\n  tooltip,\n  children,\n  ...buttonProps\n}: ComponentProps<\"button\"> & {\n  focused: boolean;\n  nextMonthLabel?: string;\n  tooltip?: string;\n}): ReactElement {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (focused) ref.current?.focus();\n  }, [focused]);\n\n  const button = (\n    <button ref={ref} {...buttonProps}>\n      {children}\n      {nextMonthLabel ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute @5xl:end-1.5 end-1 @3xl:top-1.5 top-1 font-medium in-data-selected:text-primary-foreground/72 text-[10px] text-muted-foreground leading-none\"\n        >\n          {nextMonthLabel}\n        </span>\n      ) : null}\n    </button>\n  );\n\n  if (!tooltip) return button;\n\n  return (\n    <TooltipTrigger\n      handle={monthTooltipHandle}\n      payload={tooltip}\n      render={button}\n    />\n  );\n}\n\n// Month + year heading; the year is muted via formatToParts so it stays\n// locale-correct (some locales render \"2026 June\").\nfunction MonthCaption({\n  date,\n  formatter,\n  className,\n}: {\n  date: Date;\n  formatter: Intl.DateTimeFormat;\n  className?: string;\n}): ReactElement {\n  return (\n    <div className={className}>\n      <span className=\"font-heading @3xl:@max-5xl:text-base text-lg\">\n        {formatter.formatToParts(date).map((part) =>\n          part.type === \"year\" ? (\n            <span\n              key={`year-${part.value}`}\n              className=\"text-muted-foreground/72\"\n            >\n              {part.value}\n            </span>\n          ) : (\n            part.value\n          ),\n        )}\n      </span>\n    </div>\n  );\n}\n\ntype MoveBy = \"day\" | \"week\" | \"month\" | \"year\" | \"startOfWeek\" | \"endOfWeek\";\ntype MoveDir = \"before\" | \"after\";\n\nexport type BookerCalendarProps = {\n  className?: string;\n  /**\n   * For the current month, once today reaches the 4th row, keep its week plus\n   * the next two visible within the 6-row grid: extend into next-month days,\n   * and slide the window down (dropping early weeks) only when today sits too\n   * low for those two weeks to fit. Off renders a plain month grid. On by\n   * default.\n   */\n  shiftWeeks?: boolean;\n  availabilityLoading?: boolean;\n  initialLoading?: boolean;\n  month?: Date;\n  defaultMonth?: Date;\n  startMonth?: Date;\n  endMonth?: Date;\n  selected?: Date;\n  onSelect?: (date: Date | undefined, triggerDate: Date) => void;\n  onMonthChange?: (month: Date) => void;\n  disabled?: (date: Date) => boolean;\n  /** BCP-47 locale tag used to localize day/month/weekday names and ARIA labels. */\n  locale?: string;\n  /** Override the locale's first day of the week (0 = Sunday … 6 = Saturday). */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /** Text direction; defaults to the locale's direction (\"rtl\" for ar/he/…). */\n  dir?: \"ltr\" | \"rtl\";\n  /** Translatable strings for the navigation buttons and day button states. */\n  labels?: Partial<CalendarLabels>;\n  /** Reference \"today\" for highlighting and week shifting; defaults to now. */\n  today?: Date;\n};\n\nexport function BookerCalendar({\n  className,\n  shiftWeeks = true,\n  availabilityLoading = false,\n  initialLoading = false,\n  month,\n  defaultMonth,\n  startMonth,\n  endMonth,\n  selected,\n  onSelect,\n  onMonthChange,\n  disabled,\n  locale = DEFAULT_LOCALE,\n  weekStartsOn,\n  dir,\n  labels,\n  today: todayProp,\n}: BookerCalendarProps): ReactElement {\n  const dayCellsLoading = initialLoading || availabilityLoading;\n  const localization = useMemo(\n    () => buildLocalization(locale, weekStartsOn),\n    [locale, weekStartsOn],\n  );\n  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };\n  const resolvedDir = dir ?? getTextDirection(locale);\n  const weekStart = localization.weekStartsOn;\n\n  const today = todayProp ?? new Date();\n\n  // The month is controlled by the parent (via `month`/`onMonthChange`), but we\n  // keep an internal fallback so the calendar works uncontrolled too.\n  const [internalMonth, setInternalMonth] = useState(() =>\n    startOfMonth(month ?? defaultMonth ?? today),\n  );\n  const monthTime = month ? startOfMonth(month).getTime() : undefined;\n  useEffect(() => {\n    if (monthTime !== undefined) {\n      setInternalMonth(new Date(monthTime));\n    }\n  }, [monthTime]);\n\n  const firstMonth = month ? startOfMonth(month) : internalMonth;\n\n  const [focusedDate, setFocusedDate] = useState<Date | undefined>(undefined);\n  const [lastFocusedDate, setLastFocusedDate] = useState<Date | undefined>(\n    undefined,\n  );\n\n  const navStart = startMonth ? startOfMonth(startMonth) : undefined;\n  const navEnd = endMonth ? startOfMonth(endMonth) : undefined;\n\n  const previousMonth =\n    navStart && differenceInCalendarMonths(firstMonth, navStart) <= 0\n      ? undefined\n      : addMonths(firstMonth, -1);\n  const nextMonth =\n    navEnd && differenceInCalendarMonths(navEnd, firstMonth) <= 0\n      ? undefined\n      : addMonths(firstMonth, 1);\n\n  const goToMonth = useCallback(\n    (date: Date) => {\n      let newMonth = startOfMonth(date);\n      if (navStart && newMonth < navStart) {\n        newMonth = navStart;\n      }\n      if (navEnd && newMonth > navEnd) {\n        newMonth = navEnd;\n      }\n      setInternalMonth(newMonth);\n      onMonthChange?.(newMonth);\n    },\n    [navEnd, navStart, onMonthChange],\n  );\n\n  // For the live current month, once today reaches the 4th row, guarantee its\n  // week plus the next two are visible. todayRow is today's 0-based row in the\n  // natural (unshifted) grid.\n  const naturalGridStart = startOfWeek(startOfMonth(firstMonth), weekStart);\n  const todayRow = Math.floor(\n    Math.round(\n      (startOfDay(today).getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand = shiftWeeks && isSameMonth(firstMonth, today) && todayRow >= 3;\n  // Extend downward first; only drop early weeks (shift) when today sits so low\n  // that the two trailing weeks wouldn't fit within the 6-row cap.\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const days = buildCalendarDays(firstMonth, weekStart, shiftRows, expand);\n  const weeks = chunkWeeks(days);\n\n  // Reserve any missing rows up to 6 (the most any month needs) with empty\n  // placeholders, so the grid keeps a constant height across navigation. This\n  // is 0 when expanding, since those months already fill all 6 rows with days.\n  const placeholderRows = Math.max(0, 6 - weeks.length);\n\n  const isSelected = (date: Date): boolean =>\n    selected ? isSameDay(selected, date) : false;\n\n  const getModifiers = (day: CalendarDay): DayModifiers => {\n    const { date, outside } = day;\n    const isBeforeNavStart = Boolean(navStart && date < navStart);\n    const isAfterNavEnd = Boolean(navEnd && date > endOfMonth(navEnd));\n    const isDisabled = disabled ? disabled(date) : false;\n    // Leading previous-month days are never shown (past days aren't relevant).\n    // Next-month days only belong in the grid while expanding; otherwise the\n    // empty placeholder rows reserve their space instead of spilling over.\n    const isPrevMonthDay = date < startOfMonth(firstMonth);\n    const isNextMonthDay = date > endOfMonth(firstMonth);\n    const isHidden =\n      isBeforeNavStart ||\n      isAfterNavEnd ||\n      isPrevMonthDay ||\n      (!expand && isNextMonthDay);\n    const isToday = isSameDay(date, today);\n    const isFocused =\n      !isHidden &&\n      !outside &&\n      focusedDate !== undefined &&\n      isSameDay(date, focusedDate);\n\n    return {\n      focused: isFocused,\n      disabled: isDisabled,\n      hidden: isHidden,\n      outside,\n      today: isToday,\n      selected: isSelected(date),\n    };\n  };\n\n  // Roving tabindex target. Priority: focused > last focused > selected > today\n  // > first focusable day.\n  const focusTarget = ((): CalendarDay | undefined => {\n    let target: CalendarDay | undefined;\n    let priority = -1;\n    for (const day of days) {\n      const modifiers = getModifiers(day);\n      if (!isFocusableDay(modifiers)) continue;\n      if (modifiers.focused && priority < 3) {\n        target = day;\n        priority = 3;\n      } else if (\n        lastFocusedDate &&\n        isSameDay(day.date, lastFocusedDate) &&\n        priority < 2\n      ) {\n        target = day;\n        priority = 2;\n      } else if (isSelected(day.date) && priority < 1) {\n        target = day;\n        priority = 1;\n      } else if (modifiers.today && priority < 0) {\n        target = day;\n        priority = 0;\n      }\n    }\n    if (!target) {\n      target = days.find((day) => isFocusableDay(getModifiers(day)));\n    }\n    return target;\n  })();\n\n  // While expanding, mark the 1st of the next month (the first visible day past\n  // the current month's end) with the month label.\n  const monthEnd = endOfMonth(firstMonth);\n  const nextMonthLabelIso = expand\n    ? days.find((day) => {\n        const modifiers = getModifiers(day);\n        return day.date > monthEnd && !modifiers.hidden;\n      })?.isoDate\n    : undefined;\n\n  const getFocusableDate = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n  ): Date => {\n    const delta = moveDir === \"after\" ? 1 : -1;\n    let result: Date;\n    switch (moveBy) {\n      case \"day\":\n        result = addDays(refDate, delta);\n        break;\n      case \"week\":\n        result = addDays(refDate, delta * 7);\n        break;\n      case \"month\":\n        result = addMonths(refDate, delta);\n        break;\n      case \"year\":\n        result = addMonths(refDate, delta * 12);\n        break;\n      case \"startOfWeek\":\n        result = startOfWeek(refDate, weekStart);\n        break;\n      case \"endOfWeek\":\n        result = endOfWeek(refDate, weekStart);\n        break;\n    }\n    if (moveDir === \"before\" && navStart && result < navStart) {\n      result = navStart;\n    }\n    if (moveDir === \"after\" && navEnd && result > endOfMonth(navEnd)) {\n      result = endOfMonth(navEnd);\n    }\n    return result;\n  };\n\n  const getNextFocus = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n    attempt = 0,\n  ): Date | undefined => {\n    if (attempt > 365) return undefined;\n    const next = getFocusableDate(moveBy, moveDir, refDate);\n    const isDisabled = disabled ? disabled(next) : false;\n    if (!isDisabled) return next;\n    return getNextFocus(moveBy, moveDir, next, attempt + 1);\n  };\n\n  const moveFocus = (moveBy: MoveBy, moveDir: MoveDir) => {\n    if (!focusedDate) return;\n    const next = getNextFocus(moveBy, moveDir, focusedDate);\n    if (!next) return;\n    if (!isSameMonth(next, firstMonth)) {\n      goToMonth(next);\n    }\n    setFocusedDate(next);\n  };\n\n  const handleDayClick =\n    (day: CalendarDay, modifiers: DayModifiers) => (event: MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setFocusedDate(day.date);\n      if (modifiers.disabled) return;\n      const newDate =\n        selected && isSameDay(day.date, selected) ? undefined : day.date;\n      onSelect?.(newDate, day.date);\n    };\n\n  const handleDayFocus = (day: CalendarDay) => () => {\n    setFocusedDate(day.date);\n  };\n\n  const handleDayBlur = () => {\n    setLastFocusedDate(focusedDate);\n    setFocusedDate(undefined);\n  };\n\n  const handleDayKeyDown = (event: KeyboardEvent) => {\n    const keyMap: Record<string, [MoveBy, MoveDir]> = {\n      ArrowLeft: [event.shiftKey ? \"month\" : \"day\", \"before\"],\n      ArrowRight: [event.shiftKey ? \"month\" : \"day\", \"after\"],\n      ArrowDown: [event.shiftKey ? \"year\" : \"week\", \"after\"],\n      ArrowUp: [event.shiftKey ? \"year\" : \"week\", \"before\"],\n      PageUp: [event.shiftKey ? \"year\" : \"month\", \"before\"],\n      PageDown: [event.shiftKey ? \"year\" : \"month\", \"after\"],\n      Home: [\"startOfWeek\", \"before\"],\n      End: [\"endOfWeek\", \"after\"],\n    };\n    const move = keyMap[event.key];\n    if (move) {\n      event.preventDefault();\n      event.stopPropagation();\n      const [moveBy, moveDir] = move;\n      moveFocus(moveBy, moveDir);\n    }\n  };\n\n  const weekdayHeaderStart = startOfWeek(today, weekStart);\n  const weekdays = Array.from({ length: 7 }, (_, index) => {\n    const date = addDays(weekdayHeaderStart, index);\n    return {\n      long: localization.weekdayLong(date),\n      short: localization.weekdayShort(date),\n    };\n  });\n\n  return (\n    <div\n      className={cn(\"w-full\", className)}\n      data-slot=\"booker-calendar\"\n      lang={locale}\n      dir={resolvedDir === \"rtl\" ? \"rtl\" : undefined}\n    >\n      <div className=\"flex w-full flex-col gap-2\">\n        <div aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n          {localization.monthYearLabel(firstMonth)}\n        </div>\n        <div className=\"flex h-10 items-center justify-between sm:h-9\">\n          {initialLoading ? (\n            <Skeleton className=\"h-6 w-28\" />\n          ) : (\n            <>\n              <MonthCaption\n                date={firstMonth}\n                formatter={localization.captionFormatter}\n              />\n              <nav\n                className=\"flex items-center gap-1\"\n                aria-label={resolvedLabels.nav}\n              >\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!previousMonth}\n                  aria-label={resolvedLabels.previousMonth}\n                  onClick={() => {\n                    if (previousMonth) goToMonth(previousMonth);\n                  }}\n                >\n                  <ChevronLeftIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!nextMonth}\n                  aria-label={resolvedLabels.nextMonth}\n                  onClick={() => {\n                    if (nextMonth) goToMonth(nextMonth);\n                  }}\n                >\n                  <ChevronRightIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </nav>\n            </>\n          )}\n        </div>\n        <TooltipProvider delay={0}>\n          <table\n            aria-multiselectable={false}\n            aria-label={localization.monthYearLabel(firstMonth)}\n            className=\"w-full\"\n          >\n            <thead aria-hidden=\"true\">\n              <tr className=\"flex w-full @5xl:gap-1 gap-1 py-2\">\n                {weekdays.map((weekday) => (\n                  <th\n                    key={weekday.long}\n                    aria-label={weekday.long}\n                    className=\"flex-1 font-medium text-muted-foreground/72 text-xs\"\n                    scope=\"col\"\n                  >\n                    {initialLoading ? (\n                      <Skeleton className=\"mx-auto my-0.5 h-3 w-6\" />\n                    ) : (\n                      weekday.short\n                    )}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {weeks.map((week) => (\n                <tr\n                  key={week[0]?.isoDate ?? week.at(-1)?.isoDate ?? \"week\"}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {week.map((day) => {\n                    const modifiers = getModifiers(day);\n\n                    // The day button's own styling is driven by the `data-*`\n                    // attributes below; these cell classes only cover the\n                    // layout and the outside/hidden/today states.\n                    const cellClassName = cn(\n                      \"@max-3xl:max-h-9 flex-1 p-0\",\n                      modifiers.hidden && \"invisible\",\n                      modifiers.outside && \"text-muted-foreground/50\",\n                      modifiers.today &&\n                        !dayCellsLoading &&\n                        \"*:before:pointer-events-none *:before:absolute *:before:start-1/2 *:before:bottom-1/7 *:before:z-1 *:before:size-1 *:before:-translate-x-1/2 *:before:rounded-full *:before:bg-primary *:before:transition-colors [&[data-selected]>*]:before:bg-primary-foreground\",\n                    );\n\n                    // Label (e.g. \"Aug\") sits on the 1st of the next month.\n                    const nextMonthLabel =\n                      day.isoDate === nextMonthLabelIso\n                        ? localization.monthShortLabel(day.date)\n                        : undefined;\n\n                    // Next-month days only show in the shifted current-month\n                    // view; a month-name tooltip keeps them from being mistaken\n                    // for the current month.\n                    const monthTooltip =\n                      day.outside && !modifiers.disabled && !modifiers.hidden\n                        ? localization.monthLongLabel(day.date)\n                        : undefined;\n\n                    return (\n                      <td\n                        key={day.isoDate}\n                        className={cellClassName}\n                        aria-selected={modifiers.selected || undefined}\n                        data-day={day.isoDate}\n                        data-month={day.outside ? day.dateMonthId : undefined}\n                        data-selected={modifiers.selected || undefined}\n                        data-disabled={modifiers.disabled || undefined}\n                        data-hidden={modifiers.hidden || undefined}\n                        data-outside={day.outside || undefined}\n                        data-focused={modifiers.focused || undefined}\n                        data-today={modifiers.today || undefined}\n                      >\n                        {modifiers.hidden ? null : dayCellsLoading ? (\n                          <button\n                            type=\"button\"\n                            disabled\n                            tabIndex={-1}\n                            aria-hidden=\"true\"\n                            className=\"pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 @max-3xl:max-h-9 w-full items-center justify-center rounded-lg\"\n                          >\n                            <Skeleton className=\"size-full rounded-lg\" />\n                          </button>\n                        ) : (\n                          <DayButton\n                            className=\"in-data-disabled:pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full items-center justify-center rounded-lg bg-muted in-data-disabled:bg-transparent in-data-selected:bg-primary font-medium in-data-disabled:font-normal in-data-selected:text-primary-foreground text-foreground tabular-nums in-data-disabled:opacity-50 outline-none transition-shadow duration-150 ease-out after:absolute @5xl:after:-inset-0.75 after:-inset-0.5 not-in-data-disabled:not-in-data-selected:hover:ring-2 not-in-data-disabled:not-in-data-selected:hover:ring-primary/72 focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-primary/72 sm:text-sm\"\n                            type=\"button\"\n                            focused={modifiers.focused}\n                            nextMonthLabel={nextMonthLabel}\n                            tooltip={monthTooltip}\n                            disabled={\n                              (!modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            aria-disabled={\n                              (modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            tabIndex={day === focusTarget ? 0 : -1}\n                            aria-label={(() => {\n                              let label = localization.fullDateLabel(day.date);\n                              if (modifiers.today) {\n                                label = `${resolvedLabels.today}, ${label}`;\n                              }\n                              if (modifiers.selected) {\n                                label = `${label}, ${resolvedLabels.selected}`;\n                              }\n                              return label;\n                            })()}\n                            onClick={handleDayClick(day, modifiers)}\n                            onBlur={handleDayBlur}\n                            onFocus={handleDayFocus(day)}\n                            onKeyDown={handleDayKeyDown}\n                          >\n                            {localization.dayNumber(day.date)}\n                          </DayButton>\n                        )}\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))}\n              {Array.from(\n                { length: placeholderRows },\n                (_, rowIndex) => `placeholder-row-${rowIndex}`,\n              ).map((rowKey) => (\n                <tr\n                  key={rowKey}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {weekdays.map((weekday) => (\n                    <td\n                      key={`${rowKey}-${weekday.long}`}\n                      className=\"@max-3xl:max-h-9 flex-1 p-0\"\n                    >\n                      <div className=\"@max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full\" />\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n          <Tooltip handle={monthTooltipHandle} disableHoverablePopup>\n            {({ payload }) => (\n              <TooltipPopup\n                className=\"**:data-current:opacity-100! **:data-previous:opacity-0! **:data-current:transition-none! **:data-previous:transition-none!\"\n                portalProps={{\n                  className: \"**:data-[slot=tooltip-positioner]:ease-out\",\n                }}\n              >\n                {payload}\n              </TooltipPopup>\n            )}\n          </Tooltip>\n        </TooltipProvider>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipCreateHandle,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\n// A single shared tooltip reused across every day cell (via the handle/payload\n// pattern). Reusing one instance lets it gracefully move/scale between days\n// instead of mounting a separate tooltip per cell.\nconst monthTooltipHandle = TooltipCreateHandle<string>();\n\n// Falls back to English (US) when no `locale` prop is provided.\nconst DEFAULT_LOCALE = \"en-US\";\n\ntype CalendarLabels = {\n  /** ARIA label for the previous-month navigation button. */\n  previousMonth: string;\n  /** ARIA label for the next-month navigation button. */\n  nextMonth: string;\n  /** ARIA label for the navigation toolbar. */\n  nav: string;\n  /** Prefix for today's day button label, e.g. \"Today, Monday, …\". */\n  today: string;\n  /** Suffix for the selected day button label, e.g. \"…, selected\". */\n  selected: string;\n};\n\n// English defaults. Localize by passing translated strings via the `labels`\n// prop (wire it up to your app's own i18n layer); date/weekday/month names are\n// still localized automatically from `locale` via `Intl`.\nconst DEFAULT_LABELS: CalendarLabels = {\n  previousMonth: \"Go to the Previous Month\",\n  nextMonth: \"Go to the Next Month\",\n  nav: \"Navigation bar\",\n  today: \"Today\",\n  selected: \"selected\",\n};\n\n// Resolves the text direction for the locale (e.g. \"rtl\" for Arabic/Hebrew).\nfunction getTextDirection(locale: string): \"ltr\" | \"rtl\" {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      textInfo?: { direction?: string };\n      getTextInfo?: () => { direction?: string };\n    };\n    const info =\n      typeof localeObj.getTextInfo === \"function\"\n        ? localeObj.getTextInfo()\n        : localeObj.textInfo;\n    if (info?.direction === \"rtl\") {\n      return \"rtl\";\n    }\n  } catch {\n    // Fall through to the ltr default below.\n  }\n  return \"ltr\";\n}\n\n// Locale-aware formatting/ordering, derived from a BCP-47 locale string.\ntype Localization = {\n  weekStartsOn: number;\n  monthYearLabel: (date: Date) => string;\n  fullDateLabel: (date: Date) => string;\n  monthShortLabel: (date: Date) => string;\n  monthLongLabel: (date: Date) => string;\n  weekdayLong: (date: Date) => string;\n  weekdayShort: (date: Date) => string;\n  dayNumber: (date: Date) => string;\n  captionFormatter: Intl.DateTimeFormat;\n};\n\n// 1 = Monday … 7 = Sunday (ISO) → JS getDay() index (0 = Sunday … 6 = Saturday).\nfunction getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction buildLocalization(\n  locale: string,\n  weekStartsOnOverride?: number,\n): Localization {\n  const longDateFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n    year: \"numeric\",\n    month: \"long\",\n    day: \"numeric\",\n  });\n  const monthYearFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n    year: \"numeric\",\n  });\n  const monthShortFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  });\n  const monthLongFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n  });\n  const weekdayLongFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n  });\n  const weekdayShortFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  });\n  const dayFormatter = new Intl.DateTimeFormat(locale, { day: \"numeric\" });\n\n  return {\n    weekStartsOn: weekStartsOnOverride ?? getWeekStartsOn(locale),\n    monthYearLabel: (date) => monthYearFormatter.format(date),\n    fullDateLabel: (date) => longDateFormatter.format(date),\n    monthShortLabel: (date) => monthShortFormatter.format(date),\n    monthLongLabel: (date) => monthLongFormatter.format(date),\n    weekdayLong: (date) => weekdayLongFormatter.format(date),\n    weekdayShort: (date) => weekdayShortFormatter.format(date),\n    dayNumber: (date) => dayFormatter.format(date),\n    captionFormatter: monthYearFormatter,\n  };\n}\n\nfunction pad2(value: number): string {\n  return value < 10 ? `0${value}` : String(value);\n}\n\nfunction isoDate(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;\n}\n\nfunction isoMonth(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}`;\n}\n\nfunction startOfDay(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n}\n\nfunction startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction addDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction addMonths(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth() + amount, date.getDate());\n}\n\nfunction startOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = startOfDay(date);\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return addDays(day, -diff);\n}\n\nfunction endOfWeek(date: Date, weekStartsOn = 0): Date {\n  return addDays(startOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nfunction isSameMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nfunction differenceInCalendarMonths(a: Date, b: Date): number {\n  return (\n    (a.getFullYear() - b.getFullYear()) * 12 + (a.getMonth() - b.getMonth())\n  );\n}\n\ntype CalendarDay = {\n  date: Date;\n  outside: boolean;\n  isoDate: string;\n  dateMonthId: string;\n};\n\ntype DayModifiers = {\n  focused: boolean;\n  disabled: boolean;\n  hidden: boolean;\n  outside: boolean;\n  today: boolean;\n  selected: boolean;\n};\n\n// Builds the month grid as full weeks covering the month.\n//\n// `shiftRows` slides the window forward by that many weeks, dropping the\n// month's earliest week(s). When `fillToSix` is set the grid is then padded to\n// a full 6 rows with days from the next month. Together they keep today's week\n// plus the next two visible without exceeding 6 rows; with both at their\n// defaults the month spans only the weeks it naturally needs.\nfunction buildCalendarDays(\n  month: Date,\n  weekStartsOn: number,\n  shiftRows: number,\n  fillToSix: boolean,\n): CalendarDay[] {\n  const monthStart = startOfMonth(month);\n  const offset = shiftRows * 7;\n  const gridStart = addDays(startOfWeek(monthStart, weekStartsOn), offset);\n  const gridEnd = addDays(endOfWeek(endOfMonth(month), weekStartsOn), offset);\n\n  const dates: Date[] = [];\n  for (let cursor = gridStart; cursor <= gridEnd; cursor = addDays(cursor, 1)) {\n    dates.push(cursor);\n  }\n\n  if (fillToSix) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(addDays(lastDate, 1));\n    }\n  }\n\n  return dates.map((date) => ({\n    date,\n    outside: !isSameMonth(date, month),\n    isoDate: isoDate(date),\n    dateMonthId: isoMonth(date),\n  }));\n}\n\nfunction chunkWeeks(days: CalendarDay[]): CalendarDay[][] {\n  const weeks: CalendarDay[][] = [];\n  for (let i = 0; i < days.length; i += 7) {\n    weeks.push(days.slice(i, i + 7));\n  }\n  return weeks;\n}\n\nfunction isFocusableDay(modifiers: DayModifiers): boolean {\n  return !modifiers.disabled && !modifiers.hidden && !modifiers.outside;\n}\n\n// A single day cell's button. Focuses itself when it becomes the roving-tabindex\n// target so keyboard navigation moves the actual DOM focus.\nfunction DayButton({\n  focused,\n  nextMonthLabel,\n  tooltip,\n  children,\n  ...buttonProps\n}: ComponentProps<\"button\"> & {\n  focused: boolean;\n  nextMonthLabel?: string;\n  tooltip?: string;\n}): ReactElement {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (focused) ref.current?.focus();\n  }, [focused]);\n\n  const button = (\n    <button ref={ref} {...buttonProps}>\n      {children}\n      {nextMonthLabel ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute @5xl:end-1.5 end-1 @3xl:top-1.5 top-1 font-medium in-data-selected:text-primary-foreground/72 text-[10px] text-muted-foreground leading-none\"\n        >\n          {nextMonthLabel}\n        </span>\n      ) : null}\n    </button>\n  );\n\n  if (!tooltip) return button;\n\n  return (\n    <TooltipTrigger\n      handle={monthTooltipHandle}\n      payload={tooltip}\n      render={button}\n    />\n  );\n}\n\n// Month + year heading; the year is muted via formatToParts so it stays\n// locale-correct (some locales render \"2026 June\").\nfunction MonthCaption({\n  date,\n  formatter,\n  className,\n}: {\n  date: Date;\n  formatter: Intl.DateTimeFormat;\n  className?: string;\n}): ReactElement {\n  return (\n    <div\n      className={cn(\n        \"@5xl:ps-1 font-heading @3xl:@max-5xl:text-base text-lg\",\n        className,\n      )}\n    >\n      {formatter.formatToParts(date).map((part) =>\n        part.type === \"year\" ? (\n          <span key={`year-${part.value}`} className=\"text-muted-foreground/72\">\n            {part.value}\n          </span>\n        ) : (\n          part.value\n        ),\n      )}\n    </div>\n  );\n}\n\ntype MoveBy = \"day\" | \"week\" | \"month\" | \"year\" | \"startOfWeek\" | \"endOfWeek\";\ntype MoveDir = \"before\" | \"after\";\n\nexport type BookerCalendarProps = {\n  className?: string;\n  /**\n   * For the current month, once today reaches the 4th row, keep its week plus\n   * the next two visible within the 6-row grid: extend into next-month days,\n   * and slide the window down (dropping early weeks) only when today sits too\n   * low for those two weeks to fit. Off renders a plain month grid. On by\n   * default.\n   */\n  shiftWeeks?: boolean;\n  availabilityLoading?: boolean;\n  initialLoading?: boolean;\n  month?: Date;\n  defaultMonth?: Date;\n  startMonth?: Date;\n  endMonth?: Date;\n  selected?: Date;\n  onSelect?: (date: Date | undefined, triggerDate: Date) => void;\n  onMonthChange?: (month: Date) => void;\n  disabled?: (date: Date) => boolean;\n  /** BCP-47 locale tag used to localize day/month/weekday names and ARIA labels. */\n  locale?: string;\n  /** Override the locale's first day of the week (0 = Sunday … 6 = Saturday). */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /** Text direction; defaults to the locale's direction (\"rtl\" for ar/he/…). */\n  dir?: \"ltr\" | \"rtl\";\n  /** Translatable strings for the navigation buttons and day button states. */\n  labels?: Partial<CalendarLabels>;\n  /** Reference \"today\" for highlighting and week shifting; defaults to now. */\n  today?: Date;\n};\n\nexport function BookerCalendar({\n  className,\n  shiftWeeks = true,\n  availabilityLoading = false,\n  initialLoading = false,\n  month,\n  defaultMonth,\n  startMonth,\n  endMonth,\n  selected,\n  onSelect,\n  onMonthChange,\n  disabled,\n  locale = DEFAULT_LOCALE,\n  weekStartsOn,\n  dir,\n  labels,\n  today: todayProp,\n}: BookerCalendarProps): ReactElement {\n  const dayCellsLoading = initialLoading || availabilityLoading;\n  const localization = useMemo(\n    () => buildLocalization(locale, weekStartsOn),\n    [locale, weekStartsOn],\n  );\n  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };\n  const resolvedDir = dir ?? getTextDirection(locale);\n  const weekStart = localization.weekStartsOn;\n\n  const today = todayProp ?? new Date();\n\n  // The month is controlled by the parent (via `month`/`onMonthChange`), but we\n  // keep an internal fallback so the calendar works uncontrolled too.\n  const [internalMonth, setInternalMonth] = useState(() =>\n    startOfMonth(month ?? defaultMonth ?? today),\n  );\n  const monthTime = month ? startOfMonth(month).getTime() : undefined;\n  useEffect(() => {\n    if (monthTime !== undefined) {\n      setInternalMonth(new Date(monthTime));\n    }\n  }, [monthTime]);\n\n  const firstMonth = month ? startOfMonth(month) : internalMonth;\n\n  const [focusedDate, setFocusedDate] = useState<Date | undefined>(undefined);\n  const [lastFocusedDate, setLastFocusedDate] = useState<Date | undefined>(\n    undefined,\n  );\n\n  const navStart = startMonth ? startOfMonth(startMonth) : undefined;\n  const navEnd = endMonth ? startOfMonth(endMonth) : undefined;\n\n  const previousMonth =\n    navStart && differenceInCalendarMonths(firstMonth, navStart) <= 0\n      ? undefined\n      : addMonths(firstMonth, -1);\n  const nextMonth =\n    navEnd && differenceInCalendarMonths(navEnd, firstMonth) <= 0\n      ? undefined\n      : addMonths(firstMonth, 1);\n\n  const goToMonth = useCallback(\n    (date: Date) => {\n      let newMonth = startOfMonth(date);\n      if (navStart && newMonth < navStart) {\n        newMonth = navStart;\n      }\n      if (navEnd && newMonth > navEnd) {\n        newMonth = navEnd;\n      }\n      setInternalMonth(newMonth);\n      onMonthChange?.(newMonth);\n    },\n    [navEnd, navStart, onMonthChange],\n  );\n\n  // For the live current month, once today reaches the 4th row, guarantee its\n  // week plus the next two are visible. todayRow is today's 0-based row in the\n  // natural (unshifted) grid.\n  const naturalGridStart = startOfWeek(startOfMonth(firstMonth), weekStart);\n  const todayRow = Math.floor(\n    Math.round(\n      (startOfDay(today).getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand = shiftWeeks && isSameMonth(firstMonth, today) && todayRow >= 3;\n  // Extend downward first; only drop early weeks (shift) when today sits so low\n  // that the two trailing weeks wouldn't fit within the 6-row cap.\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const days = buildCalendarDays(firstMonth, weekStart, shiftRows, expand);\n  const weeks = chunkWeeks(days);\n\n  // Reserve any missing rows up to 6 (the most any month needs) with empty\n  // placeholders, so the grid keeps a constant height across navigation. This\n  // is 0 when expanding, since those months already fill all 6 rows with days.\n  const placeholderRows = Math.max(0, 6 - weeks.length);\n\n  const isSelected = (date: Date): boolean =>\n    selected ? isSameDay(selected, date) : false;\n\n  const getModifiers = (day: CalendarDay): DayModifiers => {\n    const { date, outside } = day;\n    const isBeforeNavStart = Boolean(navStart && date < navStart);\n    const isAfterNavEnd = Boolean(navEnd && date > endOfMonth(navEnd));\n    const isDisabled = disabled ? disabled(date) : false;\n    // Leading previous-month days are never shown (past days aren't relevant).\n    // Next-month days only belong in the grid while expanding; otherwise the\n    // empty placeholder rows reserve their space instead of spilling over.\n    const isPrevMonthDay = date < startOfMonth(firstMonth);\n    const isNextMonthDay = date > endOfMonth(firstMonth);\n    const isHidden =\n      isBeforeNavStart ||\n      isAfterNavEnd ||\n      isPrevMonthDay ||\n      (!expand && isNextMonthDay);\n    const isToday = isSameDay(date, today);\n    const isFocused =\n      !isHidden &&\n      !outside &&\n      focusedDate !== undefined &&\n      isSameDay(date, focusedDate);\n\n    return {\n      focused: isFocused,\n      disabled: isDisabled,\n      hidden: isHidden,\n      outside,\n      today: isToday,\n      selected: isSelected(date),\n    };\n  };\n\n  // Roving tabindex target. Priority: focused > last focused > selected > today\n  // > first focusable day.\n  const focusTarget = ((): CalendarDay | undefined => {\n    let target: CalendarDay | undefined;\n    let priority = -1;\n    for (const day of days) {\n      const modifiers = getModifiers(day);\n      if (!isFocusableDay(modifiers)) continue;\n      if (modifiers.focused && priority < 3) {\n        target = day;\n        priority = 3;\n      } else if (\n        lastFocusedDate &&\n        isSameDay(day.date, lastFocusedDate) &&\n        priority < 2\n      ) {\n        target = day;\n        priority = 2;\n      } else if (isSelected(day.date) && priority < 1) {\n        target = day;\n        priority = 1;\n      } else if (modifiers.today && priority < 0) {\n        target = day;\n        priority = 0;\n      }\n    }\n    if (!target) {\n      target = days.find((day) => isFocusableDay(getModifiers(day)));\n    }\n    return target;\n  })();\n\n  // While expanding, mark the 1st of the next month (the first visible day past\n  // the current month's end) with the month label.\n  const monthEnd = endOfMonth(firstMonth);\n  const nextMonthLabelIso = expand\n    ? days.find((day) => {\n        const modifiers = getModifiers(day);\n        return day.date > monthEnd && !modifiers.hidden;\n      })?.isoDate\n    : undefined;\n\n  const getFocusableDate = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n  ): Date => {\n    const delta = moveDir === \"after\" ? 1 : -1;\n    let result: Date;\n    switch (moveBy) {\n      case \"day\":\n        result = addDays(refDate, delta);\n        break;\n      case \"week\":\n        result = addDays(refDate, delta * 7);\n        break;\n      case \"month\":\n        result = addMonths(refDate, delta);\n        break;\n      case \"year\":\n        result = addMonths(refDate, delta * 12);\n        break;\n      case \"startOfWeek\":\n        result = startOfWeek(refDate, weekStart);\n        break;\n      case \"endOfWeek\":\n        result = endOfWeek(refDate, weekStart);\n        break;\n    }\n    if (moveDir === \"before\" && navStart && result < navStart) {\n      result = navStart;\n    }\n    if (moveDir === \"after\" && navEnd && result > endOfMonth(navEnd)) {\n      result = endOfMonth(navEnd);\n    }\n    return result;\n  };\n\n  const getNextFocus = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n    attempt = 0,\n  ): Date | undefined => {\n    if (attempt > 365) return undefined;\n    const next = getFocusableDate(moveBy, moveDir, refDate);\n    const isDisabled = disabled ? disabled(next) : false;\n    if (!isDisabled) return next;\n    return getNextFocus(moveBy, moveDir, next, attempt + 1);\n  };\n\n  const moveFocus = (moveBy: MoveBy, moveDir: MoveDir) => {\n    if (!focusedDate) return;\n    const next = getNextFocus(moveBy, moveDir, focusedDate);\n    if (!next) return;\n    if (!isSameMonth(next, firstMonth)) {\n      goToMonth(next);\n    }\n    setFocusedDate(next);\n  };\n\n  const handleDayClick =\n    (day: CalendarDay, modifiers: DayModifiers) => (event: MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setFocusedDate(day.date);\n      if (modifiers.disabled) return;\n      const newDate =\n        selected && isSameDay(day.date, selected) ? undefined : day.date;\n      onSelect?.(newDate, day.date);\n    };\n\n  const handleDayFocus = (day: CalendarDay) => () => {\n    setFocusedDate(day.date);\n  };\n\n  const handleDayBlur = () => {\n    setLastFocusedDate(focusedDate);\n    setFocusedDate(undefined);\n  };\n\n  const handleDayKeyDown = (event: KeyboardEvent) => {\n    const keyMap: Record<string, [MoveBy, MoveDir]> = {\n      ArrowLeft: [event.shiftKey ? \"month\" : \"day\", \"before\"],\n      ArrowRight: [event.shiftKey ? \"month\" : \"day\", \"after\"],\n      ArrowDown: [event.shiftKey ? \"year\" : \"week\", \"after\"],\n      ArrowUp: [event.shiftKey ? \"year\" : \"week\", \"before\"],\n      PageUp: [event.shiftKey ? \"year\" : \"month\", \"before\"],\n      PageDown: [event.shiftKey ? \"year\" : \"month\", \"after\"],\n      Home: [\"startOfWeek\", \"before\"],\n      End: [\"endOfWeek\", \"after\"],\n    };\n    const move = keyMap[event.key];\n    if (move) {\n      event.preventDefault();\n      event.stopPropagation();\n      const [moveBy, moveDir] = move;\n      moveFocus(moveBy, moveDir);\n    }\n  };\n\n  const weekdayHeaderStart = startOfWeek(today, weekStart);\n  const weekdays = Array.from({ length: 7 }, (_, index) => {\n    const date = addDays(weekdayHeaderStart, index);\n    return {\n      long: localization.weekdayLong(date),\n      short: localization.weekdayShort(date),\n    };\n  });\n\n  return (\n    <div\n      className={cn(\"w-full\", className)}\n      data-slot=\"booker-calendar\"\n      lang={locale}\n      dir={resolvedDir === \"rtl\" ? \"rtl\" : undefined}\n    >\n      <div className=\"flex w-full flex-col gap-2\">\n        <div aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n          {localization.monthYearLabel(firstMonth)}\n        </div>\n        <div className=\"flex h-10 items-center justify-between sm:h-9\">\n          {initialLoading ? (\n            <Skeleton className=\"h-6 w-28\" />\n          ) : (\n            <>\n              <MonthCaption\n                date={firstMonth}\n                formatter={localization.captionFormatter}\n              />\n              <nav\n                className=\"flex items-center gap-1\"\n                aria-label={resolvedLabels.nav}\n              >\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!previousMonth}\n                  aria-label={resolvedLabels.previousMonth}\n                  onClick={() => {\n                    if (previousMonth) goToMonth(previousMonth);\n                  }}\n                >\n                  <ChevronLeftIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!nextMonth}\n                  aria-label={resolvedLabels.nextMonth}\n                  onClick={() => {\n                    if (nextMonth) goToMonth(nextMonth);\n                  }}\n                >\n                  <ChevronRightIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </nav>\n            </>\n          )}\n        </div>\n        <TooltipProvider delay={0}>\n          <table\n            aria-multiselectable={false}\n            aria-label={localization.monthYearLabel(firstMonth)}\n            className=\"w-full\"\n          >\n            <thead aria-hidden=\"true\">\n              <tr className=\"flex w-full @5xl:gap-1 gap-1 py-2\">\n                {weekdays.map((weekday) => (\n                  <th\n                    key={weekday.long}\n                    aria-label={weekday.long}\n                    className=\"flex-1 font-medium text-muted-foreground/72 text-xs\"\n                    scope=\"col\"\n                  >\n                    {initialLoading ? (\n                      <Skeleton className=\"mx-auto my-0.5 h-3 w-6\" />\n                    ) : (\n                      weekday.short\n                    )}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {weeks.map((week) => (\n                <tr\n                  key={week[0]?.isoDate ?? week.at(-1)?.isoDate ?? \"week\"}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {week.map((day) => {\n                    const modifiers = getModifiers(day);\n\n                    // The day button's own styling is driven by the `data-*`\n                    // attributes below; these cell classes only cover the\n                    // layout and the outside/hidden/today states.\n                    const cellClassName = cn(\n                      \"@max-3xl:max-h-9 flex-1 p-0\",\n                      modifiers.hidden && \"invisible\",\n                      modifiers.outside && \"text-muted-foreground/50\",\n                      modifiers.today &&\n                        !dayCellsLoading &&\n                        \"*:before:pointer-events-none *:before:absolute *:before:start-1/2 *:before:bottom-1/7 *:before:z-1 *:before:size-1 *:before:-translate-x-1/2 *:before:rounded-full *:before:bg-primary *:before:transition-colors [&[data-selected]>*]:before:bg-primary-foreground\",\n                    );\n\n                    // Label (e.g. \"Aug\") sits on the 1st of the next month.\n                    const nextMonthLabel =\n                      day.isoDate === nextMonthLabelIso\n                        ? localization.monthShortLabel(day.date)\n                        : undefined;\n\n                    // Next-month days only show in the shifted current-month\n                    // view; a month-name tooltip keeps them from being mistaken\n                    // for the current month.\n                    const monthTooltip =\n                      day.outside && !modifiers.disabled && !modifiers.hidden\n                        ? localization.monthLongLabel(day.date)\n                        : undefined;\n\n                    return (\n                      <td\n                        key={day.isoDate}\n                        className={cellClassName}\n                        aria-selected={modifiers.selected || undefined}\n                        data-day={day.isoDate}\n                        data-month={day.outside ? day.dateMonthId : undefined}\n                        data-selected={modifiers.selected || undefined}\n                        data-disabled={modifiers.disabled || undefined}\n                        data-hidden={modifiers.hidden || undefined}\n                        data-outside={day.outside || undefined}\n                        data-focused={modifiers.focused || undefined}\n                        data-today={modifiers.today || undefined}\n                      >\n                        {modifiers.hidden ? null : dayCellsLoading ? (\n                          <button\n                            type=\"button\"\n                            disabled\n                            tabIndex={-1}\n                            aria-hidden=\"true\"\n                            className=\"pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 @max-3xl:max-h-9 w-full items-center justify-center rounded-lg\"\n                          >\n                            <Skeleton className=\"size-full rounded-lg\" />\n                          </button>\n                        ) : (\n                          <DayButton\n                            className=\"in-data-disabled:pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full items-center justify-center rounded-lg bg-muted in-data-disabled:bg-transparent in-data-selected:bg-primary font-medium in-data-disabled:font-normal in-data-selected:text-primary-foreground text-foreground tabular-nums in-data-disabled:opacity-50 outline-none transition-shadow duration-150 ease-out after:absolute @5xl:after:-inset-0.75 after:-inset-0.5 not-in-data-disabled:not-in-data-selected:hover:ring-2 not-in-data-disabled:not-in-data-selected:hover:ring-primary/72 focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-primary/72 sm:text-sm\"\n                            type=\"button\"\n                            focused={modifiers.focused}\n                            nextMonthLabel={nextMonthLabel}\n                            tooltip={monthTooltip}\n                            disabled={\n                              (!modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            aria-disabled={\n                              (modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            tabIndex={day === focusTarget ? 0 : -1}\n                            aria-label={(() => {\n                              let label = localization.fullDateLabel(day.date);\n                              if (modifiers.today) {\n                                label = `${resolvedLabels.today}, ${label}`;\n                              }\n                              if (modifiers.selected) {\n                                label = `${label}, ${resolvedLabels.selected}`;\n                              }\n                              return label;\n                            })()}\n                            onClick={handleDayClick(day, modifiers)}\n                            onBlur={handleDayBlur}\n                            onFocus={handleDayFocus(day)}\n                            onKeyDown={handleDayKeyDown}\n                          >\n                            {localization.dayNumber(day.date)}\n                          </DayButton>\n                        )}\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))}\n              {Array.from(\n                { length: placeholderRows },\n                (_, rowIndex) => `placeholder-row-${rowIndex}`,\n              ).map((rowKey) => (\n                <tr\n                  key={rowKey}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {weekdays.map((weekday) => (\n                    <td\n                      key={`${rowKey}-${weekday.long}`}\n                      className=\"@max-3xl:max-h-9 flex-1 p-0\"\n                    >\n                      <div className=\"@max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full\" />\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n          <Tooltip handle={monthTooltipHandle} disableHoverablePopup>\n            {({ payload }) => (\n              <TooltipPopup\n                className=\"**:data-current:opacity-100! **:data-previous:opacity-0! **:data-current:transition-none! **:data-previous:transition-none!\"\n                portalProps={{\n                  className: \"**:data-[slot=tooltip-positioner]:ease-out\",\n                }}\n              >\n                {payload}\n              </TooltipPopup>\n            )}\n          </Tooltip>\n        </TooltipProvider>\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/booker-calendar.tsx"
     },
@@ -85,7 +87,7 @@
     },
     {
       "path": "registry/default/atoms/booker/time-picker.tsx",
-      "content": "\"use client\";\n\nimport { CalendarX2Icon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/default/ui/empty\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { Switch } from \"@/registry/default/ui/switch\";\nimport {\n  displayTimeLabel,\n  formatSelectedDay,\n  formatSelectedMonth,\n  formatSelectedWeekday,\n  isSingleDigit12HourLabel,\n} from \"@/lib/booker/utils\";\n\ntype TimePickerLabels = {\n  noAvailableTimes: string;\n  noSlotsAvailable: string;\n  noSlotsThisDay: string;\n  noSlotsThisMonth: string;\n  viewFirstAvailability: string;\n  use24Hour: string;\n  hour12Short: string;\n  hour24Short: string;\n};\n\ntype TimePickerProps = {\n  availabilityLoading: boolean;\n  currentMonth: Date;\n  daySlots: string[];\n  goToDate: (date: Date) => void;\n  is24Hour: boolean;\n  initialLoading: boolean;\n  labels: TimePickerLabels;\n  locale: string;\n  nextAvailableDate: Date | null;\n  onIs24HourChange: (value: boolean) => void;\n  onSelectTime: (time: string) => void;\n  selectedDate: Date | undefined;\n  hasAvailabilityInView: boolean;\n};\n\nexport function TimePicker({\n  availabilityLoading,\n  currentMonth,\n  daySlots,\n  goToDate,\n  is24Hour,\n  initialLoading,\n  labels,\n  locale,\n  nextAvailableDate,\n  onIs24HourChange,\n  onSelectTime,\n  selectedDate,\n  hasAvailabilityInView,\n}: TimePickerProps) {\n  const slotsLoading = initialLoading || availabilityLoading;\n\n  return (\n    <div className=\"relative @3xl:w-56 @5xl:w-70\">\n      <div className=\"@3xl:absolute inset-0 flex flex-col gap-2\">\n        {(slotsLoading || selectedDate != null) && (\n          <div className=\"@3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:pt-2 pt-3\">\n            <div className=\"flex h-10 items-center justify-between rounded-se-2xl bg-card sm:h-9\">\n              {slotsLoading ? (\n                <Skeleton className=\"h-6 w-16\" />\n              ) : (\n                <div className=\"flex items-center gap-1.5 font-heading @3xl:@max-5xl:text-base text-lg\">\n                  <span>\n                    {formatSelectedWeekday(selectedDate ?? new Date(), locale)}\n                  </span>\n                  <span className=\"text-muted-foreground/72\">\n                    {selectedDate &&\n                    selectedDate.getMonth() !== currentMonth.getMonth()\n                      ? `${formatSelectedMonth(selectedDate, locale)} `\n                      : null}\n                    {formatSelectedDay(selectedDate ?? new Date(), locale)}\n                  </span>\n                </div>\n              )}\n              {!initialLoading ? (\n                <Label className=\"relative\">\n                  <span\n                    className=\"pointer-events-none absolute inset-0 z-1 flex items-center text-center font-medium text-xs [&:has(+[data-slot=switch][data-checked])>*:first-child]:text-muted-foreground/72 [&:has(+[data-slot=switch][data-unchecked])>*:last-child]:text-muted-foreground/72\"\n                    aria-hidden=\"true\"\n                  >\n                    <span className=\"flex-1 transition-colors\">\n                      {labels.hour12Short}\n                    </span>\n                    <span className=\"flex-1 transition-colors\">\n                      {labels.hour24Short}\n                    </span>\n                  </span>\n                  <Switch\n                    className=\"h-9 w-[calc(var(--thumb-size)*2)] rounded-lg bg-muted! p-0.5 [--thumb-size:--spacing(10)] *:data-[slot=switch-thumb]:data-checked:translate-x-[calc(var(--thumb-size)-2px)] *:data-[slot=switch-thumb]:aspect-auto *:data-[slot=switch-thumb]:w-[calc(var(--thumb-size)-2px)] *:data-[slot=switch-thumb]:rounded-md sm:h-8 dark:*:data-[slot=switch-thumb]:bg-input sm:[--thumb-size:--spacing(9)] *:[[span]]:text-muted-foreground/70\"\n                    aria-label={labels.use24Hour}\n                    checked={is24Hour}\n                    onCheckedChange={onIs24HourChange}\n                  />\n                </Label>\n              ) : null}\n            </div>\n          </div>\n        )}\n        <div className=\"min-h-0 flex-1\">\n          {!slotsLoading && daySlots.length === 0 ? (\n            <div className=\"flex h-full items-center justify-center\">\n              <Empty className=\"gap-4 md:pt-2 md:pb-6\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\" className=\"mb-1\">\n                    <CalendarX2Icon />\n                  </EmptyMedia>\n                  <EmptyTitle className=\"@3xl:@max-5xl:text-base text-lg\">\n                    {labels.noAvailableTimes}\n                  </EmptyTitle>\n                  <EmptyDescription className=\"[[data-slot=empty-title]+&]:mt-0\">\n                    {hasAvailabilityInView\n                      ? labels.noSlotsThisDay\n                      : nextAvailableDate\n                        ? labels.noSlotsThisMonth\n                        : labels.noSlotsAvailable}\n                  </EmptyDescription>\n                </EmptyHeader>\n                {nextAvailableDate ? (\n                  <EmptyContent>\n                    <Button onClick={() => goToDate(nextAvailableDate)}>\n                      {labels.viewFirstAvailability}\n                    </Button>\n                  </EmptyContent>\n                ) : null}\n              </Empty>\n            </div>\n          ) : (\n            <ScrollArea className=\"h-full\" scrollFade>\n              <div className=\"flex @max-3xl:max-h-80 flex-col gap-3 @3xl:@max-5xl:px-2 px-4 pt-1 @3xl:@max-5xl:pb-2 pb-4\">\n                {slotsLoading ? (\n                  <div className=\"grid w-full grid-cols-1 @5xl:gap-1.5 gap-1\">\n                    {Array.from(\n                      { length: 20 },\n                      (_, index) => `time-skeleton-${index}`,\n                    ).map((skeletonKey) => (\n                      <Skeleton\n                        key={skeletonKey}\n                        className=\"h-9 w-full rounded-lg sm:h-8\"\n                      />\n                    ))}\n                  </div>\n                ) : (\n                  <div className=\"grid w-full grid-cols-1 @5xl:gap-1.5 gap-1\">\n                    {daySlots.map((time) => (\n                      <button\n                        key={time}\n                        type=\"button\"\n                        onClick={() => onSelectTime(time)}\n                        className=\"relative flex h-9 cursor-pointer items-center justify-center rounded-lg bg-muted font-medium text-foreground tabular-nums outline-none transition-shadow after:absolute @5xl:after:-inset-1 after:-inset-0.75 hover:ring-2 hover:ring-primary/72 focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-primary/72 sm:h-8 sm:text-sm\"\n                      >\n                        <span>\n                          {!is24Hour && isSingleDigit12HourLabel(time) ? (\n                            <span aria-hidden=\"true\" className=\"invisible\">\n                              0\n                            </span>\n                          ) : null}\n                          {displayTimeLabel(time, !is24Hour)}\n                        </span>\n                      </button>\n                    ))}\n                  </div>\n                )}\n              </div>\n            </ScrollArea>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { CalendarX2Icon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/default/ui/empty\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { Switch } from \"@/registry/default/ui/switch\";\nimport {\n  displayTimeLabel,\n  formatSelectedDay,\n  formatSelectedMonth,\n  formatSelectedWeekday,\n  isSingleDigit12HourLabel,\n} from \"@/lib/booker/utils\";\n\ntype TimePickerLabels = {\n  noAvailableTimes: string;\n  noSlotsAvailable: string;\n  noSlotsThisDay: string;\n  noSlotsThisMonth: string;\n  viewFirstAvailability: string;\n  use24Hour: string;\n  hour12Short: string;\n  hour24Short: string;\n};\n\ntype TimePickerProps = {\n  availabilityLoading: boolean;\n  currentMonth: Date;\n  daySlots: string[];\n  goToDate: (date: Date) => void;\n  is24Hour: boolean;\n  initialLoading: boolean;\n  labels: TimePickerLabels;\n  locale: string;\n  nextAvailableDate: Date | null;\n  onIs24HourChange: (value: boolean) => void;\n  onSelectTime: (time: string) => void;\n  selectedDate: Date | undefined;\n  hasAvailabilityInView: boolean;\n};\n\nexport function TimePicker({\n  availabilityLoading,\n  currentMonth,\n  daySlots,\n  goToDate,\n  is24Hour,\n  initialLoading,\n  labels,\n  locale,\n  nextAvailableDate,\n  onIs24HourChange,\n  onSelectTime,\n  selectedDate,\n  hasAvailabilityInView,\n}: TimePickerProps) {\n  const slotsLoading = initialLoading || availabilityLoading;\n\n  return (\n    <div className=\"relative @3xl:w-(--booker-side) border-t @3xl:border-t-0 @3xl:border-s\">\n      <div className=\"@3xl:absolute inset-0 flex flex-col gap-2\">\n        {(slotsLoading || selectedDate != null) && (\n          <div className=\"@3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:pt-2 pt-3\">\n            <div className=\"flex h-10 items-center justify-between rounded-se-2xl bg-card sm:h-9\">\n              {slotsLoading ? (\n                <Skeleton className=\"h-6 w-16\" />\n              ) : (\n                <div className=\"flex items-center gap-1.5 font-heading @3xl:@max-5xl:text-base text-lg\">\n                  <span>\n                    {formatSelectedWeekday(selectedDate ?? new Date(), locale)}\n                  </span>\n                  <span className=\"text-muted-foreground/72\">\n                    {selectedDate &&\n                    selectedDate.getMonth() !== currentMonth.getMonth()\n                      ? `${formatSelectedMonth(selectedDate, locale)} `\n                      : null}\n                    {formatSelectedDay(selectedDate ?? new Date(), locale)}\n                  </span>\n                </div>\n              )}\n              {!initialLoading ? (\n                <Label className=\"relative\">\n                  <span\n                    className=\"pointer-events-none absolute inset-0 z-1 flex items-center text-center font-medium text-xs [&:has(+[data-slot=switch][data-checked])>*:first-child]:text-muted-foreground/72 [&:has(+[data-slot=switch][data-unchecked])>*:last-child]:text-muted-foreground/72\"\n                    aria-hidden=\"true\"\n                  >\n                    <span className=\"flex-1 transition-colors\">\n                      {labels.hour12Short}\n                    </span>\n                    <span className=\"flex-1 transition-colors\">\n                      {labels.hour24Short}\n                    </span>\n                  </span>\n                  <Switch\n                    className=\"h-9 w-[calc(var(--thumb-size)*2)] rounded-lg bg-muted! p-0.5 [--thumb-size:--spacing(10)] *:data-[slot=switch-thumb]:data-checked:translate-x-[calc(var(--thumb-size)-2px)] *:data-[slot=switch-thumb]:aspect-auto *:data-[slot=switch-thumb]:w-[calc(var(--thumb-size)-2px)] *:data-[slot=switch-thumb]:rounded-md sm:h-8 dark:*:data-[slot=switch-thumb]:bg-input sm:[--thumb-size:--spacing(9)] *:[[span]]:text-muted-foreground/70\"\n                    aria-label={labels.use24Hour}\n                    checked={is24Hour}\n                    onCheckedChange={onIs24HourChange}\n                  />\n                </Label>\n              ) : null}\n            </div>\n          </div>\n        )}\n        <div className=\"min-h-0 flex-1\">\n          {!slotsLoading && daySlots.length === 0 ? (\n            <div className=\"flex h-full items-center justify-center\">\n              <Empty className=\"gap-4 md:pt-2 md:pb-6\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\" className=\"mb-1\">\n                    <CalendarX2Icon />\n                  </EmptyMedia>\n                  <EmptyTitle className=\"@3xl:@max-5xl:text-base text-lg\">\n                    {labels.noAvailableTimes}\n                  </EmptyTitle>\n                  <EmptyDescription className=\"[[data-slot=empty-title]+&]:mt-0\">\n                    {hasAvailabilityInView\n                      ? labels.noSlotsThisDay\n                      : nextAvailableDate\n                        ? labels.noSlotsThisMonth\n                        : labels.noSlotsAvailable}\n                  </EmptyDescription>\n                </EmptyHeader>\n                {nextAvailableDate ? (\n                  <EmptyContent>\n                    <Button onClick={() => goToDate(nextAvailableDate)}>\n                      {labels.viewFirstAvailability}\n                    </Button>\n                  </EmptyContent>\n                ) : null}\n              </Empty>\n            </div>\n          ) : (\n            <ScrollArea className=\"h-full\" scrollFade>\n              <div className=\"flex @max-3xl:max-h-80 flex-col gap-3 @3xl:@max-5xl:px-2 px-4 pt-1 @3xl:@max-5xl:pb-2 pb-4\">\n                {slotsLoading ? (\n                  <div className=\"grid w-full grid-cols-1 @5xl:gap-1.5 gap-1\">\n                    {Array.from(\n                      { length: 20 },\n                      (_, index) => `time-skeleton-${index}`,\n                    ).map((skeletonKey) => (\n                      <Skeleton\n                        key={skeletonKey}\n                        className=\"h-9 w-full rounded-lg sm:h-8\"\n                      />\n                    ))}\n                  </div>\n                ) : (\n                  <div className=\"grid w-full grid-cols-1 @5xl:gap-1.5 gap-1\">\n                    {daySlots.map((time) => (\n                      <button\n                        key={time}\n                        type=\"button\"\n                        onClick={() => onSelectTime(time)}\n                        className=\"relative flex h-9 cursor-pointer items-center justify-center rounded-lg bg-muted font-medium text-foreground tabular-nums outline-none transition-shadow after:absolute @5xl:after:-inset-1 after:-inset-0.75 hover:ring-2 hover:ring-primary/72 focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-primary/72 sm:h-8 sm:text-sm\"\n                      >\n                        <span>\n                          {!is24Hour && isSingleDigit12HourLabel(time) ? (\n                            <span aria-hidden=\"true\" className=\"invisible\">\n                              0\n                            </span>\n                          ) : null}\n                          {displayTimeLabel(time, !is24Hour)}\n                        </span>\n                      </button>\n                    ))}\n                  </div>\n                )}\n              </div>\n            </ScrollArea>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/time-picker.tsx"
     },
@@ -97,7 +99,7 @@
     },
     {
       "path": "registry/default/atoms/lib/booker/use-booker.ts",
-      "content": "\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type FetchRawBookerResult,\n  fetchRawBookerDataAction,\n} from \"@/lib/booker/actions\";\nimport {\n  type BookerTarget,\n  getDynamicContext,\n  getOrgSlugFromTarget,\n} from \"@/lib/booker/target\";\nimport {\n  type BookerMeta,\n  type CalendarViewOptions,\n  extractBookingWindowEnd,\n  extractBookingWindowStart,\n  extractEventTypeInfo,\n  extractHost,\n  extractHostAvatars,\n  extractHostDisplayName,\n  extractMinimumBookingNotice,\n  extractSlotsByDate,\n  filterBookableSlots,\n  findNextAvailableDate,\n  getMinimumNavigableMonth,\n  getTodayInTimeZone,\n  getWeekStartsOn,\n  hasAvailabilityInVisibleGrid,\n  isCalendarMonthBefore,\n  pickDefaultSelectedDate,\n  prefers24Hour,\n  toCalendarDateKey,\n} from \"@/lib/booker/utils\";\n\nconst WINDOW_MONTHS = 3;\n\nexport type BookerErrorKind =\n  | \"not-found\"\n  | \"unpublished\"\n  | \"network\"\n  | \"unknown\";\n\nexport type BookerError = {\n  kind: BookerErrorKind;\n  message: string;\n};\n\nclass BookerDataError extends Error {\n  code: string;\n  constructor(message: string, code: string) {\n    super(message);\n    this.code = code;\n  }\n}\n\ntype ResolvedEventType = Extract<\n  FetchRawBookerResult,\n  { ok: true }\n>[\"resolved\"];\n\nexport type BookerInitialData = {\n  durationMinutes?: number;\n  monthIso: string;\n  monthsToFetch?: number;\n  result: FetchRawBookerResult;\n  timeZone: string;\n};\n\ntype DerivedBookerData = {\n  hasMultiDurationOptions: boolean;\n  meta: BookerMeta | null;\n  minimumBookingNotice: number;\n  selectedDurationMinutes: number | null;\n};\n\ntype HydratedBookerData = DerivedBookerData & {\n  coveredMonthKeys: Set<string>;\n  error: BookerError | null;\n  resolved: ResolvedEventType;\n  slotsByDate: Record<string, string[]>;\n  slotsCacheKey: string;\n};\n\nfunction classifyError(caught: unknown): BookerError {\n  const code = caught instanceof BookerDataError ? caught.code : \"\";\n  const message =\n    caught instanceof Error ? caught.message : \"Could not load booker data.\";\n\n  if (code === \"UNPUBLISHED\") {\n    return { kind: \"unpublished\", message };\n  }\n  if (code === \"NOT_FOUND\") {\n    return { kind: \"not-found\", message };\n  }\n  if (\n    code.startsWith(\"HTTP_4\") ||\n    code.startsWith(\"HTTP_5\") ||\n    message.includes(\"fetch\") ||\n    message.includes(\"network\") ||\n    message.includes(\"ETIMEDOUT\") ||\n    message.includes(\"ECONNREFUSED\") ||\n    /Cal\\.com API [45]\\d\\d/.test(message)\n  ) {\n    return { kind: \"network\", message };\n  }\n  return { kind: \"unknown\", message };\n}\n\nfunction getTargetIdentity(target: BookerTarget): string {\n  if (target.type === \"user\") {\n    return `user:${target.username}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"team\") {\n    return `team:${target.teamId}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"dynamic\") {\n    return `dynamic:${target.usernames.join(\",\")}:${target.orgSlug ?? \"\"}:${target.orgId ?? \"\"}`;\n  }\n  return `link:${target.bookingUrl}`;\n}\n\nfunction getMonthCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n  month: Date,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}|${month.getFullYear()}-${month.getMonth()}`;\n}\n\nfunction getSlotsCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}`;\n}\n\nfunction deriveBookerData(\n  result: Extract<FetchRawBookerResult, { ok: true }>,\n  target: BookerTarget,\n): DerivedBookerData {\n  if (!result.raw.me) {\n    return {\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      selectedDurationMinutes: null,\n    };\n  }\n\n  const host = extractHost(result.raw.me);\n  const isDynamic = Boolean(getDynamicContext(target));\n  const hostAvatars = extractHostAvatars(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic, orgSlug: getOrgSlugFromTarget(target) },\n  );\n  const hostName = extractHostDisplayName(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic },\n  );\n  const eventType = extractEventTypeInfo(result.raw.selectedEventType);\n  const minimumBookingNotice = extractMinimumBookingNotice(\n    result.raw.selectedEventType,\n  );\n  const hasMultiDurationOptions =\n    (eventType.eventTypeDurationOptions?.length ?? 0) > 1;\n  const selectedDurationMinutes =\n    eventType.eventTypeDurationOptions?.[0] ??\n    eventType.eventTypeDurationMinutes ??\n    null;\n\n  return {\n    hasMultiDurationOptions,\n    meta: {\n      bookingWindowEnd: extractBookingWindowEnd(result.raw.selectedEventType),\n      bookingWindowStart: extractBookingWindowStart(\n        result.raw.selectedEventType,\n      ),\n      eventTypeDescription: eventType.eventTypeDescription,\n      eventTypeDurationMinutes: eventType.eventTypeDurationMinutes,\n      eventTypeDurationOptions: eventType.eventTypeDurationOptions,\n      eventTypeImageUrl: result.raw.bannerUrl || eventType.eventTypeImageUrl,\n      eventTypeLocations: eventType.eventTypeLocations,\n      eventTypeTitle: eventType.eventTypeTitle,\n      hostAvatarUrl: host.hostAvatarUrl,\n      hostAvatars,\n      hostName:\n        host.hostName === \"Unknown user\" && target.type === \"user\"\n          ? target.username\n          : result.raw.publicDisplayName || hostName,\n    },\n    minimumBookingNotice,\n    selectedDurationMinutes,\n  };\n}\n\nfunction hydrateBookerData({\n  initialData,\n  selectedTimeZone,\n  target,\n}: {\n  initialData?: BookerInitialData;\n  selectedTimeZone: string;\n  target: BookerTarget;\n}): HydratedBookerData | null {\n  if (!initialData) {\n    return null;\n  }\n\n  if (initialData.timeZone !== selectedTimeZone) {\n    return null;\n  }\n\n  if (!initialData.result.ok) {\n    const error = classifyError(\n      new BookerDataError(\n        initialData.result.error,\n        initialData.result.errorCode ?? \"UNKNOWN\",\n      ),\n    );\n\n    if (error.kind !== \"not-found\" && error.kind !== \"unpublished\") {\n      return null;\n    }\n\n    return {\n      coveredMonthKeys: new Set(),\n      error,\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      resolved: { eventTypeId: null, eventTypeSlug: null },\n      selectedDurationMinutes: null,\n      slotsByDate: {},\n      slotsCacheKey: \"\",\n    };\n  }\n\n  const derived = deriveBookerData(initialData.result, target);\n  const durationMinutes =\n    derived.selectedDurationMinutes ?? initialData.durationMinutes ?? 30;\n  const identity = getTargetIdentity(target);\n  const anchor = new Date(initialData.monthIso);\n  const safeAnchor = Number.isNaN(anchor.getTime()) ? new Date() : anchor;\n  const monthsToFetch = Math.max(\n    1,\n    Math.floor(initialData.monthsToFetch ?? WINDOW_MONTHS),\n  );\n  const coveredMonthKeys = new Set<string>();\n\n  for (let offset = 0; offset < monthsToFetch; offset += 1) {\n    coveredMonthKeys.add(\n      getMonthCacheKey(\n        identity,\n        selectedTimeZone,\n        durationMinutes,\n        new Date(safeAnchor.getFullYear(), safeAnchor.getMonth() + offset, 1),\n      ),\n    );\n  }\n\n  const slotsByDate = filterBookableSlots(\n    extractSlotsByDate(initialData.result.raw.slots, selectedTimeZone),\n    selectedTimeZone,\n    derived.minimumBookingNotice,\n    new Date(),\n  );\n\n  return {\n    ...derived,\n    coveredMonthKeys,\n    error: null,\n    resolved: initialData.result.resolved,\n    selectedDurationMinutes: durationMinutes,\n    slotsByDate,\n    slotsCacheKey: getSlotsCacheKey(\n      identity,\n      selectedTimeZone,\n      durationMinutes,\n    ),\n  };\n}\n\ntype UseBookerParams = {\n  initialData?: BookerInitialData;\n  target: BookerTarget;\n  timezone?: string;\n};\n\ntype BookerLoadingState = {\n  availability: boolean;\n  busy: boolean;\n  initial: boolean;\n};\n\ntype BookerTimezoneState = {\n  onValueChange: (timeZone: string) => void;\n  value: string;\n};\n\ntype BookerDurationState = {\n  onValueChange: (minutes: number) => void;\n  value: number;\n};\n\ntype BookerCalendarState = {\n  availabilityLoading: boolean;\n  disabled: (date: Date) => boolean;\n  endMonth?: Date;\n  initialLoading: boolean;\n  locale: string;\n  month: Date;\n  onMonthChange: (month: Date) => void;\n  onSelect: (nextDate: Date | undefined) => void;\n  selected: Date | undefined;\n  startMonth: Date;\n  today: Date;\n};\n\ntype BookerTimePickerState = {\n  availabilityLoading: boolean;\n  currentMonth: Date;\n  daySlots: string[];\n  goToDate: (date: Date) => void;\n  hasAvailabilityInView: boolean;\n  initialLoading: boolean;\n  is24Hour: boolean;\n  locale: string;\n  nextAvailableDate: Date | null;\n  onIs24HourChange: (value: boolean) => void;\n  onSelectTime: (time: string) => void;\n  selectedDate: Date | undefined;\n};\n\nexport type UseBookerResult = {\n  calendarProps: BookerCalendarState;\n  durationProps: BookerDurationState;\n  error: BookerError | null;\n  loadingState: BookerLoadingState;\n  meta: BookerMeta | null;\n  retry: () => void;\n  timePickerProps: BookerTimePickerState;\n  timezoneProps: BookerTimezoneState;\n};\n\n// All booker data + interaction logic: fetching/windowing cal.com availability,\n// derived selection state, and the handlers the UI wires to the calendar.\nexport function useBooker({\n  initialData,\n  target,\n  timezone,\n}: UseBookerParams): UseBookerResult {\n  const [timeZone] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().timeZone || \"UTC\",\n  );\n  const [locale] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().locale || \"en-US\",\n  );\n  const initialSelectedTimeZone = initialData?.timeZone ?? timezone ?? timeZone;\n  const hydratedData = useMemo(\n    () =>\n      hydrateBookerData({\n        initialData,\n        selectedTimeZone: initialSelectedTimeZone,\n        target,\n      }),\n    [initialData, initialSelectedTimeZone, target],\n  );\n  const initialCurrentMonth = useMemo(() => {\n    const initialMonth = initialData?.monthIso\n      ? new Date(initialData.monthIso)\n      : new Date();\n    return Number.isNaN(initialMonth.getTime()) ? new Date() : initialMonth;\n  }, [initialData?.monthIso]);\n  const initialSelectedDate = useMemo(() => {\n    if (!hydratedData || hydratedData.error) {\n      return undefined;\n    }\n\n    return (\n      pickDefaultSelectedDate(\n        initialCurrentMonth,\n        hydratedData.slotsByDate,\n        initialSelectedTimeZone,\n        getTodayInTimeZone(initialSelectedTimeZone),\n        {\n          endMonth: hydratedData.meta?.bookingWindowEnd ?? undefined,\n          shiftWeeks: true,\n          startMonth: getMinimumNavigableMonth(\n            initialSelectedTimeZone,\n            hydratedData.meta?.bookingWindowStart,\n          ),\n          weekStartsOn: getWeekStartsOn(locale),\n        },\n      ) ?? undefined\n    );\n  }, [hydratedData, initialCurrentMonth, initialSelectedTimeZone, locale]);\n  const [meta, setMeta] = useState<BookerMeta | null>(\n    hydratedData?.meta ?? null,\n  );\n  const [slotsByDate, setSlotsByDate] = useState<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const [error, setError] = useState<BookerError | null>(\n    hydratedData?.error ?? null,\n  );\n  const [isPending, setIsPending] = useState(false);\n  const [currentMonth, setCurrentMonth] = useState(initialCurrentMonth);\n  const [selectedTimeZone, setSelectedTimeZone] = useState(\n    initialSelectedTimeZone,\n  );\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(\n    initialSelectedDate,\n  );\n  const [_selectedTime, setSelectedTime] = useState<string | null>(null);\n  const [selectedDurationMinutes, setSelectedDurationMinutes] = useState(\n    hydratedData?.selectedDurationMinutes ?? 30,\n  );\n  const [is24Hour, setIs24Hour] = useState(() => prefers24Hour(locale));\n  const coveredMonthsRef = useRef<Set<string>>(\n    hydratedData?.coveredMonthKeys ?? new Set(),\n  );\n  const resolvedRef = useRef<ResolvedEventType>(\n    hydratedData?.resolved ?? { eventTypeId: null, eventTypeSlug: null },\n  );\n  const lastIdentityRef = useRef<string | null>(null);\n  const lastTimeZoneRef = useRef<string | null>(null);\n  const lastDurationRef = useRef<number | null>(null);\n  const autoSelectedMonthRef = useRef<string | null>(\n    initialSelectedDate\n      ? `${initialCurrentMonth.getFullYear()}-${initialCurrentMonth.getMonth()}`\n      : null,\n  );\n  const slotsByDateRef = useRef<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const slotsCacheRef = useRef<Map<string, Record<string, string[]>>>(\n    new Map(\n      hydratedData?.slotsCacheKey\n        ? [[hydratedData.slotsCacheKey, hydratedData.slotsByDate]]\n        : [],\n    ),\n  );\n  const minimumBookingNoticeRef = useRef(\n    hydratedData?.minimumBookingNotice ?? 0,\n  );\n  const hasMultiDurationOptionsRef = useRef(\n    hydratedData?.hasMultiDurationOptions ?? false,\n  );\n  const selectedDateRef = useRef(selectedDate);\n  selectedDateRef.current = selectedDate;\n  const inFlightMonthsRef = useRef<Map<string, Promise<void>>>(new Map());\n  const availabilityRequestVersionRef = useRef(0);\n  const skipInitialWarmRef = useRef(\n    Boolean(hydratedData && !hydratedData.error),\n  );\n\n  const targetIdentity = useCallback((): string => {\n    return getTargetIdentity(target);\n  }, [target]);\n\n  const buildKey = useCallback(\n    (month: Date) =>\n      getMonthCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n        month,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const slotsCacheKey = useCallback(\n    () =>\n      getSlotsCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const restoreSlotsFromCache = useCallback(() => {\n    const cached = slotsCacheRef.current.get(slotsCacheKey()) ?? {};\n    slotsByDateRef.current = cached;\n    setSlotsByDate(cached);\n  }, [slotsCacheKey]);\n\n  useLayoutEffect(() => {\n    restoreSlotsFromCache();\n  }, [restoreSlotsFromCache]);\n\n  // Fetch a window of several months in a single request, anchored at `anchor`.\n  const fetchWindow = useCallback(\n    async (anchor: Date): Promise<void> => {\n      const anchorKey = buildKey(anchor);\n\n      if (coveredMonthsRef.current.has(anchorKey)) {\n        return;\n      }\n\n      const existingRequest = inFlightMonthsRef.current.get(anchorKey);\n      if (existingRequest) {\n        await existingRequest;\n        return;\n      }\n\n      const requestVersion = availabilityRequestVersionRef.current;\n      const windowMonthKeys = Array.from(\n        { length: WINDOW_MONTHS },\n        (_, offset) =>\n          buildKey(\n            new Date(anchor.getFullYear(), anchor.getMonth() + offset, 1),\n          ),\n      );\n      const request = (async () => {\n        const durationMinutes =\n          getDynamicContext(target) || hasMultiDurationOptionsRef.current\n            ? selectedDurationMinutes\n            : undefined;\n\n        const result = await fetchRawBookerDataAction({\n          durationMinutes,\n          fetchMeta: resolvedRef.current.eventTypeId == null,\n          monthIso: anchor.toISOString(),\n          monthsToFetch: WINDOW_MONTHS,\n          target,\n          timeZone: selectedTimeZone,\n          eventTypeId: resolvedRef.current.eventTypeId ?? undefined,\n        });\n\n        if (!result.ok) {\n          throw new BookerDataError(\n            result.error,\n            result.errorCode ?? \"UNKNOWN\",\n          );\n        }\n\n        if (availabilityRequestVersionRef.current !== requestVersion) {\n          return;\n        }\n\n        resolvedRef.current = result.resolved;\n\n        for (let offset = 0; offset < WINDOW_MONTHS; offset += 1) {\n          const month = new Date(\n            anchor.getFullYear(),\n            anchor.getMonth() + offset,\n            1,\n          );\n          coveredMonthsRef.current.add(buildKey(month));\n        }\n\n        // The host/event metadata only comes back on the full (non slots-only)\n        // fetch, so set it once when present.\n        if (result.raw.me) {\n          const derived = deriveBookerData(result, target);\n          minimumBookingNoticeRef.current = derived.minimumBookingNotice;\n          hasMultiDurationOptionsRef.current = derived.hasMultiDurationOptions;\n          setMeta((prev) => prev ?? derived.meta);\n\n          const defaultDuration = derived.selectedDurationMinutes ?? 30;\n          if (derived.meta?.eventTypeDurationOptions?.length) {\n            if (\n              !derived.meta.eventTypeDurationOptions.includes(\n                selectedDurationMinutes,\n              )\n            ) {\n              setSelectedDurationMinutes(defaultDuration);\n            }\n          } else if (\n            derived.meta?.eventTypeDurationMinutes != null &&\n            selectedDurationMinutes !== derived.meta.eventTypeDurationMinutes\n          ) {\n            setSelectedDurationMinutes(derived.meta.eventTypeDurationMinutes);\n          }\n        }\n\n        const windowSlots = filterBookableSlots(\n          extractSlotsByDate(result.raw.slots, selectedTimeZone),\n          selectedTimeZone,\n          minimumBookingNoticeRef.current,\n          new Date(),\n        );\n        const cacheKey = getSlotsCacheKey(\n          targetIdentity(),\n          selectedTimeZone,\n          selectedDurationMinutes,\n        );\n        const mergedSlots = {\n          ...(slotsCacheRef.current.get(cacheKey) ?? {}),\n          ...windowSlots,\n        };\n        slotsCacheRef.current.set(cacheKey, mergedSlots);\n        slotsByDateRef.current = mergedSlots;\n        setSlotsByDate(mergedSlots);\n      })();\n\n      for (const monthKey of windowMonthKeys) {\n        inFlightMonthsRef.current.set(monthKey, request);\n      }\n\n      try {\n        await request;\n      } finally {\n        for (const monthKey of windowMonthKeys) {\n          if (inFlightMonthsRef.current.get(monthKey) === request) {\n            inFlightMonthsRef.current.delete(monthKey);\n          }\n        }\n      }\n    },\n    [\n      buildKey,\n      selectedDurationMinutes,\n      selectedTimeZone,\n      target,\n      targetIdentity,\n    ],\n  );\n\n  const todayStart = useMemo(\n    () => getTodayInTimeZone(selectedTimeZone),\n    [selectedTimeZone],\n  );\n  const startMonth = useMemo(\n    () => getMinimumNavigableMonth(selectedTimeZone, meta?.bookingWindowStart),\n    [meta?.bookingWindowStart, selectedTimeZone],\n  );\n  const calendarViewOptions = useMemo((): CalendarViewOptions => {\n    return {\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      shiftWeeks: true,\n      startMonth,\n      weekStartsOn: getWeekStartsOn(locale),\n    };\n  }, [locale, meta?.bookingWindowEnd, startMonth]);\n\n  const hasAvailabilityInView = useMemo(\n    () =>\n      hasAvailabilityInVisibleGrid(\n        currentMonth,\n        slotsByDate,\n        todayStart,\n        calendarViewOptions,\n      ),\n    [calendarViewOptions, currentMonth, slotsByDate, todayStart],\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const load = async () => {\n      const identity = targetIdentity();\n      let deferLoadForMonthSync = false;\n\n      // A different user/event means a different event type and metadata, so\n      // reset everything and force a full fetch.\n      if (\n        lastIdentityRef.current !== null &&\n        lastIdentityRef.current !== identity\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        resolvedRef.current = { eventTypeId: null, eventTypeSlug: null };\n        hasMultiDurationOptionsRef.current = false;\n        slotsCacheRef.current = new Map();\n        slotsByDateRef.current = {};\n        autoSelectedMonthRef.current = null;\n        setMeta(null);\n        setSelectedDurationMinutes(30);\n        setSlotsByDate({});\n      } else if (\n        lastDurationRef.current !== null &&\n        lastDurationRef.current !== selectedDurationMinutes\n      ) {\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n      } else if (\n        lastTimeZoneRef.current !== null &&\n        lastTimeZoneRef.current !== selectedTimeZone\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n\n        const minMonth = getMinimumNavigableMonth(\n          selectedTimeZone,\n          meta?.bookingWindowStart,\n        );\n        if (isCalendarMonthBefore(currentMonth, minMonth)) {\n          setCurrentMonth(minMonth);\n          deferLoadForMonthSync = true;\n        } else {\n          const todayInTz = getTodayInTimeZone(selectedTimeZone);\n          if (\n            selectedDateRef.current &&\n            toCalendarDateKey(selectedDateRef.current) <\n              toCalendarDateKey(todayInTz)\n          ) {\n            setSelectedDate(undefined);\n          }\n        }\n      }\n      lastIdentityRef.current = identity;\n      lastTimeZoneRef.current = selectedTimeZone;\n      lastDurationRef.current = selectedDurationMinutes;\n\n      if (deferLoadForMonthSync) {\n        return;\n      }\n\n      if (!coveredMonthsRef.current.has(buildKey(currentMonth))) {\n        setIsPending(true);\n        try {\n          await fetchWindow(currentMonth);\n          if (cancelled) {\n            return;\n          }\n          setError(null);\n        } catch (caught) {\n          if (cancelled) {\n            return;\n          }\n          setError(classifyError(caught));\n          return;\n        } finally {\n          if (!cancelled) {\n            setIsPending(false);\n          }\n        }\n      } else {\n        setError(null);\n        setIsPending(false);\n      }\n\n      // Auto-select the first available day the first time this month's\n      // availability is known (on load and on month navigation).\n      const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n      if (!cancelled && autoSelectedMonthRef.current !== monthKey) {\n        const firstAvailable = pickDefaultSelectedDate(\n          currentMonth,\n          slotsByDateRef.current,\n          selectedTimeZone,\n          getTodayInTimeZone(selectedTimeZone),\n          calendarViewOptions,\n        );\n        if (firstAvailable) {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(firstAvailable);\n          setSelectedTime(null);\n        } else {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(undefined);\n          setSelectedTime(null);\n        }\n      }\n\n      // Warm the next uncovered window boundary, not just the adjacent month.\n      // This keeps navigation instant when the user reaches the end of the\n      // currently-covered 3-month range.\n      const nextWindow = new Date(\n        currentMonth.getFullYear(),\n        currentMonth.getMonth() + WINDOW_MONTHS,\n        1,\n      );\n      if (skipInitialWarmRef.current) {\n        skipInitialWarmRef.current = false;\n        return;\n      }\n      if (!coveredMonthsRef.current.has(buildKey(nextWindow))) {\n        void fetchWindow(nextWindow).catch(() => {});\n      }\n    };\n\n    void load();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    buildKey,\n    currentMonth,\n    fetchWindow,\n    selectedDurationMinutes,\n    selectedTimeZone,\n    meta?.bookingWindowStart,\n    calendarViewOptions,\n    restoreSlotsFromCache,\n    targetIdentity,\n  ]);\n\n  const [retryCounter, setRetryCounter] = useState(0);\n\n  const retry = useCallback(() => {\n    coveredMonthsRef.current = new Set();\n    inFlightMonthsRef.current.clear();\n    availabilityRequestVersionRef.current += 1;\n    slotsCacheRef.current = new Map();\n    slotsByDateRef.current = {};\n    autoSelectedMonthRef.current = null;\n    setSlotsByDate({});\n    setError(null);\n    setRetryCounter((c) => c + 1);\n  }, []);\n\n  // Re-trigger the main load effect when the user retries.\n  useEffect(() => {\n    // The first render (retryCounter === 0) is handled by the main effect.\n    if (retryCounter === 0) return;\n    setIsPending(true);\n    let cancelled = false;\n\n    (async () => {\n      try {\n        await fetchWindow(currentMonth);\n        if (cancelled) return;\n        setError(null);\n\n        const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n        if (autoSelectedMonthRef.current !== monthKey) {\n          const firstAvailable = pickDefaultSelectedDate(\n            currentMonth,\n            slotsByDateRef.current,\n            selectedTimeZone,\n            getTodayInTimeZone(selectedTimeZone),\n            calendarViewOptions,\n          );\n          if (firstAvailable) {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(firstAvailable);\n            setSelectedTime(null);\n          } else {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(undefined);\n            setSelectedTime(null);\n          }\n        }\n      } catch (caught) {\n        if (cancelled) return;\n        setError(classifyError(caught));\n      } finally {\n        if (!cancelled) setIsPending(false);\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    retryCounter,\n    fetchWindow,\n    currentMonth,\n    selectedTimeZone,\n    calendarViewOptions,\n  ]);\n\n  useEffect(() => {\n    if (!timezone) {\n      return;\n    }\n    setSelectedTimeZone(timezone);\n  }, [timezone]);\n\n  const selectedDateKey = toCalendarDateKey(selectedDate ?? todayStart);\n  const daySlots =\n    selectedDate != null ? (slotsByDate[selectedDateKey] ?? []) : [];\n  const nextAvailableDate = findNextAvailableDate(\n    slotsByDate,\n    selectedTimeZone,\n    todayStart,\n  );\n\n  const handleMonthChange = (month: Date) => {\n    const monthKey = `${month.getFullYear()}-${month.getMonth()}`;\n    const monthCovered = coveredMonthsRef.current.has(buildKey(month));\n    setCurrentMonth(month);\n    // Flip to pending in the same render as the month change when the target\n    // month still needs fetching, so the skeleton shows immediately instead of\n    // the empty state flashing for a frame before the async effect runs.\n    if (!monthCovered) {\n      setIsPending(true);\n    }\n    // For an already-loaded month, select the first available day in the same\n    // update as the month change so the selection doesn't flicker.\n    const firstAvailable = pickDefaultSelectedDate(\n      month,\n      slotsByDateRef.current,\n      selectedTimeZone,\n      getTodayInTimeZone(selectedTimeZone),\n      calendarViewOptions,\n    );\n    if (firstAvailable) {\n      autoSelectedMonthRef.current = monthKey;\n      setSelectedDate(firstAvailable);\n      setSelectedTime(null);\n    } else {\n      if (monthCovered) {\n        autoSelectedMonthRef.current = monthKey;\n      }\n      setSelectedDate(undefined);\n      setSelectedTime(null);\n    }\n  };\n\n  const handleSelectDate = (nextDate: Date | undefined) => {\n    if (!nextDate) {\n      return;\n    }\n    setSelectedDate(nextDate);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${nextDate.getFullYear()}-${nextDate.getMonth()}`;\n    const isDifferentMonth =\n      nextDate.getMonth() !== currentMonth.getMonth() ||\n      nextDate.getFullYear() !== currentMonth.getFullYear();\n    if (isDifferentMonth) {\n      setCurrentMonth(nextDate);\n    }\n  };\n\n  const isDayDisabled = (date: Date) => {\n    const dayKey = toCalendarDateKey(date);\n    if (dayKey < toCalendarDateKey(todayStart)) {\n      return true;\n    }\n\n    return (slotsByDate[dayKey] ?? []).length === 0;\n  };\n\n  const goToDate = (date: Date) => {\n    setCurrentMonth(date);\n    setSelectedDate(date);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${date.getFullYear()}-${date.getMonth()}`;\n  };\n\n  const initialLoading = !meta;\n  const currentMonthCovered = coveredMonthsRef.current.has(\n    buildKey(currentMonth),\n  );\n  const availabilityLoading = isPending || !currentMonthCovered;\n\n  return {\n    calendarProps: {\n      availabilityLoading,\n      disabled: isDayDisabled,\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      initialLoading,\n      locale,\n      month: currentMonth,\n      onMonthChange: handleMonthChange,\n      onSelect: handleSelectDate,\n      selected: selectedDate,\n      startMonth,\n      today: todayStart,\n    },\n    durationProps: {\n      onValueChange: setSelectedDurationMinutes,\n      value: selectedDurationMinutes,\n    },\n    error,\n    loadingState: {\n      availability: availabilityLoading,\n      busy: initialLoading || availabilityLoading,\n      initial: initialLoading,\n    },\n    meta,\n    retry,\n    timePickerProps: {\n      availabilityLoading,\n      currentMonth,\n      daySlots,\n      goToDate,\n      hasAvailabilityInView,\n      initialLoading,\n      is24Hour,\n      locale,\n      nextAvailableDate,\n      onIs24HourChange: setIs24Hour,\n      onSelectTime: setSelectedTime,\n      selectedDate,\n    },\n    timezoneProps: {\n      onValueChange: setSelectedTimeZone,\n      value: selectedTimeZone,\n    },\n  };\n}\n",
+      "content": "\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type FetchRawBookerResult,\n  fetchRawBookerDataAction,\n} from \"@/lib/booker/actions\";\nimport {\n  type BookerTarget,\n  getDynamicContext,\n  getOrgSlugFromTarget,\n} from \"@/lib/booker/target\";\nimport {\n  type BookerMeta,\n  type CalendarViewOptions,\n  extractBookingWindowEnd,\n  extractBookingWindowStart,\n  extractEventTypeInfo,\n  extractHost,\n  extractHostAvatars,\n  extractHostDisplayName,\n  extractMinimumBookingNotice,\n  extractSlotsByDate,\n  filterBookableSlots,\n  findNextAvailableDate,\n  getMinimumNavigableMonth,\n  getTodayInTimeZone,\n  getWeekStartsOn,\n  hasAvailabilityInVisibleGrid,\n  isCalendarMonthBefore,\n  pickDefaultSelectedDate,\n  prefers24Hour,\n  toCalendarDateKey,\n} from \"@/lib/booker/utils\";\n\nconst WINDOW_MONTHS = 3;\n\nexport type BookerErrorKind =\n  | \"not-found\"\n  | \"unpublished\"\n  | \"network\"\n  | \"unknown\";\n\nexport type BookerError = {\n  kind: BookerErrorKind;\n  message: string;\n};\n\nclass BookerDataError extends Error {\n  code: string;\n  constructor(message: string, code: string) {\n    super(message);\n    this.code = code;\n  }\n}\n\ntype ResolvedEventType = Extract<\n  FetchRawBookerResult,\n  { ok: true }\n>[\"resolved\"];\n\nexport type BookerInitialData = {\n  durationMinutes?: number;\n  monthIso: string;\n  monthsToFetch?: number;\n  result: FetchRawBookerResult;\n  timeZone: string;\n};\n\ntype DerivedBookerData = {\n  hasMultiDurationOptions: boolean;\n  meta: BookerMeta | null;\n  minimumBookingNotice: number;\n  selectedDurationMinutes: number | null;\n};\n\ntype HydratedBookerData = DerivedBookerData & {\n  coveredMonthKeys: Set<string>;\n  error: BookerError | null;\n  resolved: ResolvedEventType;\n  slotsByDate: Record<string, string[]>;\n  slotsCacheKey: string;\n};\n\nfunction classifyError(caught: unknown): BookerError {\n  const code = caught instanceof BookerDataError ? caught.code : \"\";\n  const message =\n    caught instanceof Error ? caught.message : \"Could not load booker data.\";\n\n  if (code === \"UNPUBLISHED\") {\n    return { kind: \"unpublished\", message };\n  }\n  if (code === \"NOT_FOUND\") {\n    return { kind: \"not-found\", message };\n  }\n  if (\n    code.startsWith(\"HTTP_4\") ||\n    code.startsWith(\"HTTP_5\") ||\n    message.includes(\"fetch\") ||\n    message.includes(\"network\") ||\n    message.includes(\"ETIMEDOUT\") ||\n    message.includes(\"ECONNREFUSED\") ||\n    /Cal\\.com API [45]\\d\\d/.test(message)\n  ) {\n    return { kind: \"network\", message };\n  }\n  return { kind: \"unknown\", message };\n}\n\nfunction getTargetIdentity(target: BookerTarget): string {\n  if (target.type === \"user\") {\n    return `user:${target.username}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"team\") {\n    return `team:${target.teamId}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"dynamic\") {\n    return `dynamic:${target.usernames.join(\",\")}:${target.orgSlug ?? \"\"}:${target.orgId ?? \"\"}`;\n  }\n  return `link:${target.bookingUrl}`;\n}\n\nfunction getMonthCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n  month: Date,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}|${month.getFullYear()}-${month.getMonth()}`;\n}\n\nfunction getSlotsCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}`;\n}\n\nfunction deriveBookerData(\n  result: Extract<FetchRawBookerResult, { ok: true }>,\n  target: BookerTarget,\n): DerivedBookerData {\n  if (!result.raw.me) {\n    return {\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      selectedDurationMinutes: null,\n    };\n  }\n\n  const host = extractHost(result.raw.me);\n  const isDynamic = Boolean(getDynamicContext(target));\n  const hostAvatars = extractHostAvatars(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic, orgSlug: getOrgSlugFromTarget(target) },\n  );\n  const hostName = extractHostDisplayName(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic },\n  );\n  const eventType = extractEventTypeInfo(result.raw.selectedEventType);\n  const minimumBookingNotice = extractMinimumBookingNotice(\n    result.raw.selectedEventType,\n  );\n  const hasMultiDurationOptions =\n    (eventType.eventTypeDurationOptions?.length ?? 0) > 1;\n  const selectedDurationMinutes =\n    eventType.eventTypeDurationOptions?.[0] ??\n    eventType.eventTypeDurationMinutes ??\n    null;\n\n  return {\n    hasMultiDurationOptions,\n    meta: {\n      bookingWindowEnd: extractBookingWindowEnd(result.raw.selectedEventType),\n      bookingWindowStart: extractBookingWindowStart(\n        result.raw.selectedEventType,\n      ),\n      eventTypeDescription: eventType.eventTypeDescription,\n      eventTypeDurationMinutes: eventType.eventTypeDurationMinutes,\n      eventTypeDurationOptions: eventType.eventTypeDurationOptions,\n      eventTypeImageUrl: result.raw.bannerUrl || eventType.eventTypeImageUrl,\n      eventTypeLocations: eventType.eventTypeLocations,\n      eventTypeTitle: eventType.eventTypeTitle,\n      hostAvatarUrl: host.hostAvatarUrl,\n      hostAvatars,\n      hostName:\n        host.hostName === \"Unknown user\" && target.type === \"user\"\n          ? target.username\n          : result.raw.publicDisplayName || hostName,\n    },\n    minimumBookingNotice,\n    selectedDurationMinutes,\n  };\n}\n\nfunction hydrateBookerData({\n  initialData,\n  selectedTimeZone,\n  target,\n}: {\n  initialData?: BookerInitialData;\n  selectedTimeZone: string;\n  target: BookerTarget;\n}): HydratedBookerData | null {\n  if (!initialData) {\n    return null;\n  }\n\n  if (initialData.timeZone !== selectedTimeZone) {\n    return null;\n  }\n\n  if (!initialData.result.ok) {\n    const error = classifyError(\n      new BookerDataError(\n        initialData.result.error,\n        initialData.result.errorCode ?? \"UNKNOWN\",\n      ),\n    );\n\n    if (error.kind !== \"not-found\" && error.kind !== \"unpublished\") {\n      return null;\n    }\n\n    return {\n      coveredMonthKeys: new Set(),\n      error,\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      resolved: { eventTypeId: null, eventTypeSlug: null },\n      selectedDurationMinutes: null,\n      slotsByDate: {},\n      slotsCacheKey: \"\",\n    };\n  }\n\n  const derived = deriveBookerData(initialData.result, target);\n  const durationMinutes =\n    derived.selectedDurationMinutes ?? initialData.durationMinutes ?? 30;\n  const identity = getTargetIdentity(target);\n  const anchor = new Date(initialData.monthIso);\n  const safeAnchor = Number.isNaN(anchor.getTime()) ? new Date() : anchor;\n  const monthsToFetch = Math.max(\n    1,\n    Math.floor(initialData.monthsToFetch ?? WINDOW_MONTHS),\n  );\n  const coveredMonthKeys = new Set<string>();\n\n  for (let offset = 0; offset < monthsToFetch; offset += 1) {\n    coveredMonthKeys.add(\n      getMonthCacheKey(\n        identity,\n        selectedTimeZone,\n        durationMinutes,\n        new Date(safeAnchor.getFullYear(), safeAnchor.getMonth() + offset, 1),\n      ),\n    );\n  }\n\n  const slotsByDate = filterBookableSlots(\n    extractSlotsByDate(initialData.result.raw.slots, selectedTimeZone),\n    selectedTimeZone,\n    derived.minimumBookingNotice,\n    new Date(),\n  );\n\n  return {\n    ...derived,\n    coveredMonthKeys,\n    error: null,\n    resolved: initialData.result.resolved,\n    selectedDurationMinutes: durationMinutes,\n    slotsByDate,\n    slotsCacheKey: getSlotsCacheKey(\n      identity,\n      selectedTimeZone,\n      durationMinutes,\n    ),\n  };\n}\n\ntype UseBookerParams = {\n  initialData?: BookerInitialData;\n  target: BookerTarget;\n  timezone?: string;\n};\n\ntype BookerLoadingState = {\n  availability: boolean;\n  busy: boolean;\n  initial: boolean;\n};\n\ntype BookerTimezoneState = {\n  onValueChange: (timeZone: string) => void;\n  value: string;\n};\n\ntype BookerDurationState = {\n  onValueChange: (minutes: number) => void;\n  value: number;\n};\n\ntype BookerCalendarState = {\n  availabilityLoading: boolean;\n  disabled: (date: Date) => boolean;\n  endMonth?: Date;\n  initialLoading: boolean;\n  locale: string;\n  month: Date;\n  onMonthChange: (month: Date) => void;\n  onSelect: (nextDate: Date | undefined) => void;\n  selected: Date | undefined;\n  startMonth: Date;\n  today: Date;\n};\n\ntype BookerTimePickerState = {\n  availabilityLoading: boolean;\n  currentMonth: Date;\n  daySlots: string[];\n  goToDate: (date: Date) => void;\n  hasAvailabilityInView: boolean;\n  initialLoading: boolean;\n  is24Hour: boolean;\n  locale: string;\n  nextAvailableDate: Date | null;\n  onIs24HourChange: (value: boolean) => void;\n  onSelectTime: (time: string) => void;\n  selectedDate: Date | undefined;\n};\n\nexport type BookerStep = \"select\" | \"confirm\";\n\nexport type UseBookerResult = {\n  calendarProps: BookerCalendarState;\n  durationProps: BookerDurationState;\n  error: BookerError | null;\n  loadingState: BookerLoadingState;\n  meta: BookerMeta | null;\n  onBack: () => void;\n  retry: () => void;\n  selectedTime: string | null;\n  step: BookerStep;\n  timePickerProps: BookerTimePickerState;\n  timezoneProps: BookerTimezoneState;\n};\n\n// All booker data + interaction logic: fetching/windowing cal.com availability,\n// derived selection state, and the handlers the UI wires to the calendar.\nexport function useBooker({\n  initialData,\n  target,\n  timezone,\n}: UseBookerParams): UseBookerResult {\n  const [timeZone] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().timeZone || \"UTC\",\n  );\n  const [locale] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().locale || \"en-US\",\n  );\n  const initialSelectedTimeZone = initialData?.timeZone ?? timezone ?? timeZone;\n  const hydratedData = useMemo(\n    () =>\n      hydrateBookerData({\n        initialData,\n        selectedTimeZone: initialSelectedTimeZone,\n        target,\n      }),\n    [initialData, initialSelectedTimeZone, target],\n  );\n  const initialCurrentMonth = useMemo(() => {\n    const initialMonth = initialData?.monthIso\n      ? new Date(initialData.monthIso)\n      : new Date();\n    return Number.isNaN(initialMonth.getTime()) ? new Date() : initialMonth;\n  }, [initialData?.monthIso]);\n  const initialSelectedDate = useMemo(() => {\n    if (!hydratedData || hydratedData.error) {\n      return undefined;\n    }\n\n    return (\n      pickDefaultSelectedDate(\n        initialCurrentMonth,\n        hydratedData.slotsByDate,\n        initialSelectedTimeZone,\n        getTodayInTimeZone(initialSelectedTimeZone),\n        {\n          endMonth: hydratedData.meta?.bookingWindowEnd ?? undefined,\n          shiftWeeks: true,\n          startMonth: getMinimumNavigableMonth(\n            initialSelectedTimeZone,\n            hydratedData.meta?.bookingWindowStart,\n          ),\n          weekStartsOn: getWeekStartsOn(locale),\n        },\n      ) ?? undefined\n    );\n  }, [hydratedData, initialCurrentMonth, initialSelectedTimeZone, locale]);\n  const [meta, setMeta] = useState<BookerMeta | null>(\n    hydratedData?.meta ?? null,\n  );\n  const [slotsByDate, setSlotsByDate] = useState<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const [error, setError] = useState<BookerError | null>(\n    hydratedData?.error ?? null,\n  );\n  const [isPending, setIsPending] = useState(false);\n  const [currentMonth, setCurrentMonth] = useState(initialCurrentMonth);\n  const [selectedTimeZone, setSelectedTimeZone] = useState(\n    initialSelectedTimeZone,\n  );\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(\n    initialSelectedDate,\n  );\n  const [_selectedTime, setSelectedTime] = useState<string | null>(null);\n  const [step, setStep] = useState<BookerStep>(\"select\");\n  const [selectedDurationMinutes, setSelectedDurationMinutes] = useState(\n    hydratedData?.selectedDurationMinutes ?? 30,\n  );\n  const [is24Hour, setIs24Hour] = useState(() => prefers24Hour(locale));\n  const coveredMonthsRef = useRef<Set<string>>(\n    hydratedData?.coveredMonthKeys ?? new Set(),\n  );\n  const resolvedRef = useRef<ResolvedEventType>(\n    hydratedData?.resolved ?? { eventTypeId: null, eventTypeSlug: null },\n  );\n  const lastIdentityRef = useRef<string | null>(null);\n  const lastTimeZoneRef = useRef<string | null>(null);\n  const lastDurationRef = useRef<number | null>(null);\n  const autoSelectedMonthRef = useRef<string | null>(\n    initialSelectedDate\n      ? `${initialCurrentMonth.getFullYear()}-${initialCurrentMonth.getMonth()}`\n      : null,\n  );\n  const slotsByDateRef = useRef<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const slotsCacheRef = useRef<Map<string, Record<string, string[]>>>(\n    new Map(\n      hydratedData?.slotsCacheKey\n        ? [[hydratedData.slotsCacheKey, hydratedData.slotsByDate]]\n        : [],\n    ),\n  );\n  const minimumBookingNoticeRef = useRef(\n    hydratedData?.minimumBookingNotice ?? 0,\n  );\n  const hasMultiDurationOptionsRef = useRef(\n    hydratedData?.hasMultiDurationOptions ?? false,\n  );\n  const selectedDateRef = useRef(selectedDate);\n  selectedDateRef.current = selectedDate;\n  const inFlightMonthsRef = useRef<Map<string, Promise<void>>>(new Map());\n  const availabilityRequestVersionRef = useRef(0);\n  const skipInitialWarmRef = useRef(\n    Boolean(hydratedData && !hydratedData.error),\n  );\n\n  const targetIdentity = useCallback((): string => {\n    return getTargetIdentity(target);\n  }, [target]);\n\n  const buildKey = useCallback(\n    (month: Date) =>\n      getMonthCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n        month,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const slotsCacheKey = useCallback(\n    () =>\n      getSlotsCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const restoreSlotsFromCache = useCallback(() => {\n    const cached = slotsCacheRef.current.get(slotsCacheKey()) ?? {};\n    slotsByDateRef.current = cached;\n    setSlotsByDate(cached);\n  }, [slotsCacheKey]);\n\n  useLayoutEffect(() => {\n    restoreSlotsFromCache();\n  }, [restoreSlotsFromCache]);\n\n  // Fetch a window of several months in a single request, anchored at `anchor`.\n  const fetchWindow = useCallback(\n    async (anchor: Date): Promise<void> => {\n      const anchorKey = buildKey(anchor);\n\n      if (coveredMonthsRef.current.has(anchorKey)) {\n        return;\n      }\n\n      const existingRequest = inFlightMonthsRef.current.get(anchorKey);\n      if (existingRequest) {\n        await existingRequest;\n        return;\n      }\n\n      const requestVersion = availabilityRequestVersionRef.current;\n      const windowMonthKeys = Array.from(\n        { length: WINDOW_MONTHS },\n        (_, offset) =>\n          buildKey(\n            new Date(anchor.getFullYear(), anchor.getMonth() + offset, 1),\n          ),\n      );\n      const request = (async () => {\n        const durationMinutes =\n          getDynamicContext(target) || hasMultiDurationOptionsRef.current\n            ? selectedDurationMinutes\n            : undefined;\n\n        const result = await fetchRawBookerDataAction({\n          durationMinutes,\n          fetchMeta: resolvedRef.current.eventTypeId == null,\n          monthIso: anchor.toISOString(),\n          monthsToFetch: WINDOW_MONTHS,\n          target,\n          timeZone: selectedTimeZone,\n          eventTypeId: resolvedRef.current.eventTypeId ?? undefined,\n        });\n\n        if (!result.ok) {\n          throw new BookerDataError(\n            result.error,\n            result.errorCode ?? \"UNKNOWN\",\n          );\n        }\n\n        if (availabilityRequestVersionRef.current !== requestVersion) {\n          return;\n        }\n\n        resolvedRef.current = result.resolved;\n\n        for (let offset = 0; offset < WINDOW_MONTHS; offset += 1) {\n          const month = new Date(\n            anchor.getFullYear(),\n            anchor.getMonth() + offset,\n            1,\n          );\n          coveredMonthsRef.current.add(buildKey(month));\n        }\n\n        // The host/event metadata only comes back on the full (non slots-only)\n        // fetch, so set it once when present.\n        if (result.raw.me) {\n          const derived = deriveBookerData(result, target);\n          minimumBookingNoticeRef.current = derived.minimumBookingNotice;\n          hasMultiDurationOptionsRef.current = derived.hasMultiDurationOptions;\n          setMeta((prev) => prev ?? derived.meta);\n\n          const defaultDuration = derived.selectedDurationMinutes ?? 30;\n          if (derived.meta?.eventTypeDurationOptions?.length) {\n            if (\n              !derived.meta.eventTypeDurationOptions.includes(\n                selectedDurationMinutes,\n              )\n            ) {\n              setSelectedDurationMinutes(defaultDuration);\n            }\n          } else if (\n            derived.meta?.eventTypeDurationMinutes != null &&\n            selectedDurationMinutes !== derived.meta.eventTypeDurationMinutes\n          ) {\n            setSelectedDurationMinutes(derived.meta.eventTypeDurationMinutes);\n          }\n        }\n\n        const windowSlots = filterBookableSlots(\n          extractSlotsByDate(result.raw.slots, selectedTimeZone),\n          selectedTimeZone,\n          minimumBookingNoticeRef.current,\n          new Date(),\n        );\n        const cacheKey = getSlotsCacheKey(\n          targetIdentity(),\n          selectedTimeZone,\n          selectedDurationMinutes,\n        );\n        const mergedSlots = {\n          ...(slotsCacheRef.current.get(cacheKey) ?? {}),\n          ...windowSlots,\n        };\n        slotsCacheRef.current.set(cacheKey, mergedSlots);\n        slotsByDateRef.current = mergedSlots;\n        setSlotsByDate(mergedSlots);\n      })();\n\n      for (const monthKey of windowMonthKeys) {\n        inFlightMonthsRef.current.set(monthKey, request);\n      }\n\n      try {\n        await request;\n      } finally {\n        for (const monthKey of windowMonthKeys) {\n          if (inFlightMonthsRef.current.get(monthKey) === request) {\n            inFlightMonthsRef.current.delete(monthKey);\n          }\n        }\n      }\n    },\n    [\n      buildKey,\n      selectedDurationMinutes,\n      selectedTimeZone,\n      target,\n      targetIdentity,\n    ],\n  );\n\n  const todayStart = useMemo(\n    () => getTodayInTimeZone(selectedTimeZone),\n    [selectedTimeZone],\n  );\n  const startMonth = useMemo(\n    () => getMinimumNavigableMonth(selectedTimeZone, meta?.bookingWindowStart),\n    [meta?.bookingWindowStart, selectedTimeZone],\n  );\n  const calendarViewOptions = useMemo((): CalendarViewOptions => {\n    return {\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      shiftWeeks: true,\n      startMonth,\n      weekStartsOn: getWeekStartsOn(locale),\n    };\n  }, [locale, meta?.bookingWindowEnd, startMonth]);\n\n  const hasAvailabilityInView = useMemo(\n    () =>\n      hasAvailabilityInVisibleGrid(\n        currentMonth,\n        slotsByDate,\n        todayStart,\n        calendarViewOptions,\n      ),\n    [calendarViewOptions, currentMonth, slotsByDate, todayStart],\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const load = async () => {\n      const identity = targetIdentity();\n      let deferLoadForMonthSync = false;\n\n      // A different user/event means a different event type and metadata, so\n      // reset everything and force a full fetch.\n      if (\n        lastIdentityRef.current !== null &&\n        lastIdentityRef.current !== identity\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        resolvedRef.current = { eventTypeId: null, eventTypeSlug: null };\n        hasMultiDurationOptionsRef.current = false;\n        slotsCacheRef.current = new Map();\n        slotsByDateRef.current = {};\n        autoSelectedMonthRef.current = null;\n        setMeta(null);\n        setSelectedDurationMinutes(30);\n        setSlotsByDate({});\n      } else if (\n        lastDurationRef.current !== null &&\n        lastDurationRef.current !== selectedDurationMinutes\n      ) {\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n      } else if (\n        lastTimeZoneRef.current !== null &&\n        lastTimeZoneRef.current !== selectedTimeZone\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n\n        const minMonth = getMinimumNavigableMonth(\n          selectedTimeZone,\n          meta?.bookingWindowStart,\n        );\n        if (isCalendarMonthBefore(currentMonth, minMonth)) {\n          setCurrentMonth(minMonth);\n          deferLoadForMonthSync = true;\n        } else {\n          const todayInTz = getTodayInTimeZone(selectedTimeZone);\n          if (\n            selectedDateRef.current &&\n            toCalendarDateKey(selectedDateRef.current) <\n              toCalendarDateKey(todayInTz)\n          ) {\n            setSelectedDate(undefined);\n          }\n        }\n      }\n      lastIdentityRef.current = identity;\n      lastTimeZoneRef.current = selectedTimeZone;\n      lastDurationRef.current = selectedDurationMinutes;\n\n      if (deferLoadForMonthSync) {\n        return;\n      }\n\n      if (!coveredMonthsRef.current.has(buildKey(currentMonth))) {\n        setIsPending(true);\n        try {\n          await fetchWindow(currentMonth);\n          if (cancelled) {\n            return;\n          }\n          setError(null);\n        } catch (caught) {\n          if (cancelled) {\n            return;\n          }\n          setError(classifyError(caught));\n          return;\n        } finally {\n          if (!cancelled) {\n            setIsPending(false);\n          }\n        }\n      } else {\n        setError(null);\n        setIsPending(false);\n      }\n\n      // Auto-select the first available day the first time this month's\n      // availability is known (on load and on month navigation).\n      const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n      if (!cancelled && autoSelectedMonthRef.current !== monthKey) {\n        const firstAvailable = pickDefaultSelectedDate(\n          currentMonth,\n          slotsByDateRef.current,\n          selectedTimeZone,\n          getTodayInTimeZone(selectedTimeZone),\n          calendarViewOptions,\n        );\n        if (firstAvailable) {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(firstAvailable);\n          setSelectedTime(null);\n        } else {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(undefined);\n          setSelectedTime(null);\n        }\n      }\n\n      // Warm the next uncovered window boundary, not just the adjacent month.\n      // This keeps navigation instant when the user reaches the end of the\n      // currently-covered 3-month range.\n      const nextWindow = new Date(\n        currentMonth.getFullYear(),\n        currentMonth.getMonth() + WINDOW_MONTHS,\n        1,\n      );\n      if (skipInitialWarmRef.current) {\n        skipInitialWarmRef.current = false;\n        return;\n      }\n      if (!coveredMonthsRef.current.has(buildKey(nextWindow))) {\n        void fetchWindow(nextWindow).catch(() => {});\n      }\n    };\n\n    void load();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    buildKey,\n    currentMonth,\n    fetchWindow,\n    selectedDurationMinutes,\n    selectedTimeZone,\n    meta?.bookingWindowStart,\n    calendarViewOptions,\n    restoreSlotsFromCache,\n    targetIdentity,\n  ]);\n\n  const [retryCounter, setRetryCounter] = useState(0);\n\n  const retry = useCallback(() => {\n    coveredMonthsRef.current = new Set();\n    inFlightMonthsRef.current.clear();\n    availabilityRequestVersionRef.current += 1;\n    slotsCacheRef.current = new Map();\n    slotsByDateRef.current = {};\n    autoSelectedMonthRef.current = null;\n    setSlotsByDate({});\n    setError(null);\n    setRetryCounter((c) => c + 1);\n  }, []);\n\n  // Re-trigger the main load effect when the user retries.\n  useEffect(() => {\n    // The first render (retryCounter === 0) is handled by the main effect.\n    if (retryCounter === 0) return;\n    setIsPending(true);\n    let cancelled = false;\n\n    (async () => {\n      try {\n        await fetchWindow(currentMonth);\n        if (cancelled) return;\n        setError(null);\n\n        const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n        if (autoSelectedMonthRef.current !== monthKey) {\n          const firstAvailable = pickDefaultSelectedDate(\n            currentMonth,\n            slotsByDateRef.current,\n            selectedTimeZone,\n            getTodayInTimeZone(selectedTimeZone),\n            calendarViewOptions,\n          );\n          if (firstAvailable) {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(firstAvailable);\n            setSelectedTime(null);\n          } else {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(undefined);\n            setSelectedTime(null);\n          }\n        }\n      } catch (caught) {\n        if (cancelled) return;\n        setError(classifyError(caught));\n      } finally {\n        if (!cancelled) setIsPending(false);\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    retryCounter,\n    fetchWindow,\n    currentMonth,\n    selectedTimeZone,\n    calendarViewOptions,\n  ]);\n\n  useEffect(() => {\n    if (!timezone) {\n      return;\n    }\n    setSelectedTimeZone(timezone);\n  }, [timezone]);\n\n  const selectedDateKey = toCalendarDateKey(selectedDate ?? todayStart);\n  const daySlots =\n    selectedDate != null ? (slotsByDate[selectedDateKey] ?? []) : [];\n  const nextAvailableDate = findNextAvailableDate(\n    slotsByDate,\n    selectedTimeZone,\n    todayStart,\n  );\n\n  const handleMonthChange = (month: Date) => {\n    const monthKey = `${month.getFullYear()}-${month.getMonth()}`;\n    const monthCovered = coveredMonthsRef.current.has(buildKey(month));\n    setCurrentMonth(month);\n    // Flip to pending in the same render as the month change when the target\n    // month still needs fetching, so the skeleton shows immediately instead of\n    // the empty state flashing for a frame before the async effect runs.\n    if (!monthCovered) {\n      setIsPending(true);\n    }\n    // For an already-loaded month, select the first available day in the same\n    // update as the month change so the selection doesn't flicker.\n    const firstAvailable = pickDefaultSelectedDate(\n      month,\n      slotsByDateRef.current,\n      selectedTimeZone,\n      getTodayInTimeZone(selectedTimeZone),\n      calendarViewOptions,\n    );\n    if (firstAvailable) {\n      autoSelectedMonthRef.current = monthKey;\n      setSelectedDate(firstAvailable);\n      setSelectedTime(null);\n    } else {\n      if (monthCovered) {\n        autoSelectedMonthRef.current = monthKey;\n      }\n      setSelectedDate(undefined);\n      setSelectedTime(null);\n    }\n  };\n\n  const handleSelectDate = (nextDate: Date | undefined) => {\n    if (!nextDate) {\n      return;\n    }\n    setSelectedDate(nextDate);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${nextDate.getFullYear()}-${nextDate.getMonth()}`;\n    const isDifferentMonth =\n      nextDate.getMonth() !== currentMonth.getMonth() ||\n      nextDate.getFullYear() !== currentMonth.getFullYear();\n    if (isDifferentMonth) {\n      setCurrentMonth(nextDate);\n    }\n  };\n\n  const isDayDisabled = (date: Date) => {\n    const dayKey = toCalendarDateKey(date);\n    if (dayKey < toCalendarDateKey(todayStart)) {\n      return true;\n    }\n\n    return (slotsByDate[dayKey] ?? []).length === 0;\n  };\n\n  const goToDate = (date: Date) => {\n    setCurrentMonth(date);\n    setSelectedDate(date);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${date.getFullYear()}-${date.getMonth()}`;\n  };\n\n  const handleSelectTime = (time: string) => {\n    setSelectedTime(time);\n    setStep(\"confirm\");\n  };\n\n  const handleBack = () => {\n    setStep(\"select\");\n  };\n\n  const initialLoading = !meta;\n  const currentMonthCovered = coveredMonthsRef.current.has(\n    buildKey(currentMonth),\n  );\n  const availabilityLoading = isPending || !currentMonthCovered;\n\n  return {\n    calendarProps: {\n      availabilityLoading,\n      disabled: isDayDisabled,\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      initialLoading,\n      locale,\n      month: currentMonth,\n      onMonthChange: handleMonthChange,\n      onSelect: handleSelectDate,\n      selected: selectedDate,\n      startMonth,\n      today: todayStart,\n    },\n    durationProps: {\n      onValueChange: setSelectedDurationMinutes,\n      value: selectedDurationMinutes,\n    },\n    error,\n    loadingState: {\n      availability: availabilityLoading,\n      busy: initialLoading || availabilityLoading,\n      initial: initialLoading,\n    },\n    meta,\n    onBack: handleBack,\n    retry,\n    selectedTime: _selectedTime,\n    step,\n    timePickerProps: {\n      availabilityLoading,\n      currentMonth,\n      daySlots,\n      goToDate,\n      hasAvailabilityInView,\n      initialLoading,\n      is24Hour,\n      locale,\n      nextAvailableDate,\n      onIs24HourChange: setIs24Hour,\n      onSelectTime: handleSelectTime,\n      selectedDate,\n    },\n    timezoneProps: {\n      onValueChange: setSelectedTimeZone,\n      value: selectedTimeZone,\n    },\n  };\n}\n",
       "type": "registry:lib",
       "target": "lib/booker/use-booker.ts"
     },
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index 6d11f0b7c..c05006e6f 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -11329,7 +11329,8 @@
       "dependencies": [
         "isomorphic-dompurify",
         "marked",
-        "lucide-react"
+        "lucide-react",
+        "motion"
       ],
       "description": "A full scheduling flow powered by Cal.com API v2.",
       "files": [
@@ -11416,6 +11417,7 @@
         "@coss/card",
         "@coss/combobox",
         "@coss/empty",
+        "@coss/input",
         "@coss/label",
         "@coss/popover",
         "@coss/scroll-area",
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index 6d11f0b7c..c05006e6f 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -11329,7 +11329,8 @@
       "dependencies": [
         "isomorphic-dompurify",
         "marked",
-        "lucide-react"
+        "lucide-react",
+        "motion"
       ],
       "description": "A full scheduling flow powered by Cal.com API v2.",
       "files": [
@@ -11416,6 +11417,7 @@
         "@coss/card",
         "@coss/combobox",
         "@coss/empty",
+        "@coss/input",
         "@coss/label",
         "@coss/popover",
         "@coss/scroll-area",
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index 1a53230aa..0f5aa9f7a 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -9839,7 +9839,7 @@ export const Index: Record<string, any> = {
     name: "booker-1",
     description: "A full scheduling flow powered by Cal.com API v2.",
     type: "registry:block",
-    registryDependencies: ["@coss/avatar","@coss/button","@coss/cal-api","@coss/card","@coss/combobox","@coss/empty","@coss/label","@coss/popover","@coss/scroll-area","@coss/select","@coss/skeleton","@coss/switch","@coss/tooltip"],
+    registryDependencies: ["@coss/avatar","@coss/button","@coss/cal-api","@coss/card","@coss/combobox","@coss/empty","@coss/input","@coss/label","@coss/popover","@coss/scroll-area","@coss/select","@coss/skeleton","@coss/switch","@coss/tooltip"],
     files: [{
       path: "registry/default/atoms/booker-1.tsx",
       type: "registry:block",
diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index aac1b2813..3b92069da 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -1,6 +1,13 @@
 "use client";
 
 import { ArrowLeftIcon, Clock3Icon } from "lucide-react";
+import {
+  AnimatePresence,
+  domMax,
+  LazyMotion,
+  MotionConfig,
+  m,
+} from "motion/react";
 import { Button } from "@/registry/default/ui/button";
 import { Card } from "@/registry/default/ui/card";
 import { Input } from "@/registry/default/ui/input";
@@ -140,38 +147,64 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
             )}
           </div>
         </div>
-        <div className="flex w-full flex-col @3xl:flex-1 @3xl:flex-row">
-          {booker.step === "select" ? (
-            <>
-              {/* Calendar */}
-              <div className="flex w-full @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4">
-                <BookerCalendar {...booker.calendarProps} />
-              </div>
-              {/* Time picker */}
-              <TimePicker
-                labels={{
-                  hour12Short: t.hour12Short,
-                  hour24Short: t.hour24Short,
-                  noAvailableTimes: t.noAvailableTimes,
-                  noSlotsAvailable: t.noSlotsAvailable,
-                  noSlotsThisDay: t.noSlotsThisDay,
-                  noSlotsThisMonth: t.noSlotsThisMonth,
-                  use24Hour: t.use24Hour,
-                  viewFirstAvailability: t.viewFirstAvailability,
-                }}
-                {...booker.timePickerProps}
-              />
-            </>
-          ) : (
-            <div className="@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4">
-              <Button variant="ghost" size="sm" onClick={booker.onBack}>
-                <ArrowLeftIcon aria-hidden="true" />
-                Back
-              </Button>
-              <Input className="w-full" placeholder="Your name" />
-            </div>
-          )}
-        </div>
+        <LazyMotion features={domMax}>
+          <MotionConfig
+            reducedMotion="user"
+            transition={{ duration: 0.45, ease: [0.32, 0.72, 0, 1] }}
+          >
+            <m.div
+              layout
+              className="relative flex w-full flex-col overflow-clip @3xl:w-auto @3xl:flex-row"
+            >
+              <AnimatePresence initial={false} mode="popLayout">
+                {booker.step === "select" ? (
+                  <m.div
+                    key="select"
+                    layout="position"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="flex w-full flex-col @3xl:flex-row"
+                  >
+                    {/* Calendar */}
+                    <div className="flex w-full @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4">
+                      <BookerCalendar {...booker.calendarProps} />
+                    </div>
+                    {/* Time picker */}
+                    <TimePicker
+                      labels={{
+                        hour12Short: t.hour12Short,
+                        hour24Short: t.hour24Short,
+                        noAvailableTimes: t.noAvailableTimes,
+                        noSlotsAvailable: t.noSlotsAvailable,
+                        noSlotsThisDay: t.noSlotsThisDay,
+                        noSlotsThisMonth: t.noSlotsThisMonth,
+                        use24Hour: t.use24Hour,
+                        viewFirstAvailability: t.viewFirstAvailability,
+                      }}
+                      {...booker.timePickerProps}
+                    />
+                  </m.div>
+                ) : (
+                  <m.div
+                    key="confirm"
+                    layout="position"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="w-full @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4"
+                  >
+                    <Button variant="ghost" size="sm" onClick={booker.onBack}>
+                      <ArrowLeftIcon aria-hidden="true" />
+                      Back
+                    </Button>
+                    <Input className="w-full" placeholder="Your name" />
+                  </m.div>
+                )}
+              </AnimatePresence>
+            </m.div>
+          </MotionConfig>
+        </LazyMotion>
       </Card>
       <a
         href="https://cal.com"
diff --git a/apps/ui/registry/registry-atoms.ts b/apps/ui/registry/registry-atoms.ts
index 1ecf936cc..5689acf61 100644
--- a/apps/ui/registry/registry-atoms.ts
+++ b/apps/ui/registry/registry-atoms.ts
@@ -16,7 +16,7 @@ type AtomItem = Omit<Registry["items"][number], "meta"> & {
 
 export const atoms: AtomItem[] = [
   {
-    dependencies: ["isomorphic-dompurify", "marked", "lucide-react"],
+    dependencies: ["isomorphic-dompurify", "marked", "lucide-react", "motion"],
     description: "A full scheduling flow powered by Cal.com API v2.",
     files: [
       {
diff --git a/bun.lock b/bun.lock
index 86b831bc1..592586054 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "cosscom",
@@ -121,6 +122,7 @@
         "jotai": "^2.15.1",
         "lucide-react": "^0.555.0",
         "marked": "^18.0.5",
+        "motion": "12.42.0",
         "next": "16.2.5",
         "react": "^19.2.6",
         "react-day-picker": "^9.13.0",
@@ -1363,6 +1365,8 @@
 
     "forwarded": ["forwarded@0.2.0", "", {}, "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="],
 
+    "framer-motion": ["framer-motion@12.42.2", "", { "dependencies": { "motion-dom": "^12.42.2", "motion-utils": "^12.39.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-5XY9luDiu0oHfHBjpDthFMh0ES+122w6p/papSJBweMkO8Sn+PW2QaEgRblQBpWFnuvZS5qvarpt/hO2pjGmnw=="],
+
     "fresh": ["fresh@2.0.0", "", {}, "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A=="],
 
     "fs-extra": ["fs-extra@10.1.0", "", { "dependencies": { "graceful-fs": "4.2.11", "jsonfile": "6.1.0", "universalify": "2.0.1" } }, "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ=="],
@@ -1777,6 +1781,12 @@
 
     "mkdirp": ["mkdirp@0.5.6", "", { "dependencies": { "minimist": "1.2.8" }, "bin": { "mkdirp": "bin/cmd.js" } }, "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw=="],
 
+    "motion": ["motion@12.42.0", "", { "dependencies": { "framer-motion": "^12.42.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-Qhwvu9sVl5/URSq5CNzwMCpSKK8Uhnrwb6VO977kZyj/wOCS7mWebJUnBoHx5cZU1Zv8a9BD5CSICWKAlrLJgA=="],
+
+    "motion-dom": ["motion-dom@12.42.2", "", { "dependencies": { "motion-utils": "^12.39.0" } }, "sha512-5gIMWLp/PycBtJRJWRgjxke5n8dlvkSn2DrYW+tr3XcqAZY1xZh6BJyooJXCM8wdfM7wfMjkBJNLge1CKPUIRA=="],
+
+    "motion-utils": ["motion-utils@12.39.0", "", {}, "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ=="],
+
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "msw": ["msw@2.11.2", "", { "dependencies": { "@bundled-es-modules/cookie": "2.0.1", "@bundled-es-modules/statuses": "1.0.1", "@inquirer/confirm": "5.1.18", "@mswjs/interceptors": "0.39.6", "@open-draft/deferred-promise": "2.2.0", "@open-draft/until": "2.1.0", "@types/cookie": "0.6.0", "@types/statuses": "2.0.6", "graphql": "16.11.0", "headers-polyfill": "4.0.3", "is-node-process": "1.2.0", "outvariant": "1.4.3", "path-to-regexp": "6.3.0", "picocolors": "1.1.1", "rettime": "0.7.0", "strict-event-emitter": "0.5.1", "tough-cookie": "6.0.0", "type-fest": "4.41.0", "yargs": "17.7.2" }, "optionalDependencies": { "typescript": "5.9.2" }, "bin": { "msw": "cli/index.js" } }, "sha512-MI54hLCsrMwiflkcqlgYYNJJddY5/+S0SnONvhv1owOplvqohKSQyGejpNdUGyCwgs4IH7PqaNbPw/sKOEze9Q=="],

From d0e16cb0a3d46df1fd19800e744c72755cb47243 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 6 Jul 2026 17:50:06 +0000
Subject: [PATCH 06/49] fix(booker): remove layout=position from steps to stop
 horizontal slide

Co-Authored-By: pasquale <pasqualevitiello@gmail.com>
---
 apps/ui/public/r/booker-1.json              |  2 +-
 apps/ui/registry/default/atoms/booker-1.tsx | 14 ++++++--------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index 173b792b4..ef0735f6f 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -27,7 +27,7 @@
   "files": [
     {
       "path": "registry/default/atoms/booker-1.tsx",
-      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row [--booker-side:--spacing(56)] @5xl:[--booker-side:--spacing(70)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) border-b @3xl:border-b-0 @3xl:border-e\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{ duration: 0.45, ease: [0.32, 0.72, 0, 1] }}\n          >\n            <m.div\n              layout\n              className=\"relative flex w-full flex-col overflow-clip @3xl:w-auto @3xl:flex-row\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    layout=\"position\"\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full flex-col @3xl:flex-row\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex w-full @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    layout=\"position\"\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"w-full @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input className=\"w-full\" placeholder=\"Your name\" />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </m.div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
+      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{ duration: 0.45, ease: [0.32, 0.72, 0, 1] }}\n          >\n            <m.div\n              layout\n              className=\"relative flex @3xl:w-auto w-full @3xl:flex-row flex-col overflow-clip\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full @3xl:flex-row flex-col\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input className=\"w-full\" placeholder=\"Your name\" />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </m.div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
       "type": "registry:block",
       "target": "components/atoms/booker-1.tsx"
     },
diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index 3b92069da..159e01552 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -64,9 +64,9 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
       className="@container flex flex-col items-center gap-4"
       aria-busy={booker.loadingState.busy}
     >
-      <Card className="@max-3xl:w-full @3xl:flex-row [--booker-side:--spacing(56)] @5xl:[--booker-side:--spacing(70)]">
+      <Card className="@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]">
         {/* Meta */}
-        <div className="@3xl:w-(--booker-side) border-b @3xl:border-b-0 @3xl:border-e">
+        <div className="@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0">
           <HeaderBanner
             alt={headerImageAlt}
             src={displayMeta?.eventTypeImageUrl}
@@ -154,20 +154,19 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
           >
             <m.div
               layout
-              className="relative flex w-full flex-col overflow-clip @3xl:w-auto @3xl:flex-row"
+              className="relative flex @3xl:w-auto w-full @3xl:flex-row flex-col overflow-clip"
             >
               <AnimatePresence initial={false} mode="popLayout">
                 {booker.step === "select" ? (
                   <m.div
                     key="select"
-                    layout="position"
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
-                    className="flex w-full flex-col @3xl:flex-row"
+                    className="flex w-full @3xl:flex-row flex-col"
                   >
                     {/* Calendar */}
-                    <div className="flex w-full @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4">
+                    <div className="flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4">
                       <BookerCalendar {...booker.calendarProps} />
                     </div>
                     {/* Time picker */}
@@ -188,11 +187,10 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
                 ) : (
                   <m.div
                     key="confirm"
-                    layout="position"
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
-                    className="w-full @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4"
+                    className="@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4"
                   >
                     <Button variant="ghost" size="sm" onClick={booker.onBack}>
                       <ArrowLeftIcon aria-hidden="true" />

From a7a23c91ebb24d14593d1aaa3ee12753e880ed96 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 6 Jul 2026 18:15:41 +0000
Subject: [PATCH 07/49] feat(booker): drive real width/height with motion
 animate + AnimatePresence crossfade

Co-Authored-By: pasquale <pasqualevitiello@gmail.com>
---
 apps/ui/public/r/booker-1.json              |  2 +-
 apps/ui/registry/default/atoms/booker-1.tsx | 93 +++++++++++++++++++--
 2 files changed, 89 insertions(+), 6 deletions(-)

diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index c006f955c..845956899 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -27,7 +27,7 @@
   "files": [
     {
       "path": "registry/default/atoms/booker-1.tsx",
-      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{ duration: 0.45, ease: [0.32, 0.72, 0, 1] }}\n          >\n            <m.div\n              layout\n              className=\"relative flex @3xl:w-auto w-full @3xl:flex-row flex-col overflow-clip\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full @3xl:flex-row flex-col\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input className=\"w-full\" placeholder=\"Your name\" />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </m.div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
+      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  animate,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { useEffect, useLayoutEffect, useRef } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\n\nconst TRANSITION_DURATION = 0.45;\nconst TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  const stepContainerRef = useRef<HTMLDivElement>(null);\n  const selectStepRef = useRef<HTMLDivElement>(null);\n  const confirmStepRef = useRef<HTMLDivElement>(null);\n  const previousStepRef = useRef(booker.step);\n  const isFirstRenderRef = useRef(true);\n  const transitionTokenRef = useRef(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = stepContainerRef.current;\n    if (!container) {\n      return;\n    }\n    if (isFirstRenderRef.current) {\n      isFirstRenderRef.current = false;\n      previousStepRef.current = booker.step;\n      return;\n    }\n    if (previousStepRef.current === booker.step) {\n      return;\n    }\n    previousStepRef.current = booker.step;\n\n    const enteringStep =\n      booker.step === \"select\" ? selectStepRef.current : confirmStepRef.current;\n\n    // FLIP: capture the current box, release to the entering step's natural\n    // size to measure the target, then animate the real width/height between\n    // them so the card resizes without transforms or reflowing its content.\n    const start = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n    if (enteringStep) {\n      enteringStep.style.width = `${end.width}px`;\n    }\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    const prefersReducedMotion =\n      typeof window !== \"undefined\" &&\n      window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    const token = ++transitionTokenRef.current;\n    const controls = animate(\n      container,\n      { height: end.height, width: end.width },\n      {\n        duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,\n        ease: TRANSITION_EASE,\n      },\n    );\n    controls\n      .then(() => {\n        if (token !== transitionTokenRef.current) {\n          return;\n        }\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n      })\n      .catch(() => {});\n  }, [booker.step]);\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{\n              duration: TRANSITION_DURATION,\n              ease: TRANSITION_EASE,\n            }}\n          >\n            <div\n              ref={stepContainerRef}\n              className=\"relative w-full @3xl:flex-1 overflow-clip\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    ref={selectStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full @3xl:flex-row flex-col\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    ref={confirmStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input className=\"w-full\" placeholder=\"Your name\" />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
       "type": "registry:block",
       "target": "components/atoms/booker-1.tsx"
     },
diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index 159e01552..5053c23b1 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -3,11 +3,13 @@
 import { ArrowLeftIcon, Clock3Icon } from "lucide-react";
 import {
   AnimatePresence,
+  animate,
   domMax,
   LazyMotion,
   MotionConfig,
   m,
 } from "motion/react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 import { Button } from "@/registry/default/ui/button";
 import { Card } from "@/registry/default/ui/card";
 import { Input } from "@/registry/default/ui/input";
@@ -25,6 +27,12 @@ import { TimezonePicker } from "./booker/timezone-picker";
 import type { BookerTarget } from "@/lib/booker/target";
 import { type BookerInitialData, useBooker } from "@/lib/booker/use-booker";
 
+const TRANSITION_DURATION = 0.45;
+const TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;
+
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
 type BookerProps = {
   target: BookerTarget;
   timezone?: string;
@@ -38,6 +46,76 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
   const t = getBookerLabels(labels);
   const booker = useBooker({ initialData, target, timezone });
 
+  const stepContainerRef = useRef<HTMLDivElement>(null);
+  const selectStepRef = useRef<HTMLDivElement>(null);
+  const confirmStepRef = useRef<HTMLDivElement>(null);
+  const previousStepRef = useRef(booker.step);
+  const isFirstRenderRef = useRef(true);
+  const transitionTokenRef = useRef(0);
+
+  useIsomorphicLayoutEffect(() => {
+    const container = stepContainerRef.current;
+    if (!container) {
+      return;
+    }
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      previousStepRef.current = booker.step;
+      return;
+    }
+    if (previousStepRef.current === booker.step) {
+      return;
+    }
+    previousStepRef.current = booker.step;
+
+    const enteringStep =
+      booker.step === "select" ? selectStepRef.current : confirmStepRef.current;
+
+    // FLIP: capture the current box, release to the entering step's natural
+    // size to measure the target, then animate the real width/height between
+    // them so the card resizes without transforms or reflowing its content.
+    const start = {
+      height: container.offsetHeight,
+      width: container.offsetWidth,
+    };
+    container.style.width = "auto";
+    container.style.height = "auto";
+    enteringStep?.style.removeProperty("width");
+    void container.offsetHeight;
+    const end = {
+      height: container.offsetHeight,
+      width: container.offsetWidth,
+    };
+    if (enteringStep) {
+      enteringStep.style.width = `${end.width}px`;
+    }
+    container.style.width = `${start.width}px`;
+    container.style.height = `${start.height}px`;
+
+    const prefersReducedMotion =
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const token = ++transitionTokenRef.current;
+    const controls = animate(
+      container,
+      { height: end.height, width: end.width },
+      {
+        duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,
+        ease: TRANSITION_EASE,
+      },
+    );
+    controls
+      .then(() => {
+        if (token !== transitionTokenRef.current) {
+          return;
+        }
+        container.style.width = "";
+        container.style.height = "";
+        enteringStep?.style.removeProperty("width");
+      })
+      .catch(() => {});
+  }, [booker.step]);
+
   if (booker.error) {
     return (
       <BookerErrorState
@@ -150,16 +228,20 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
         <LazyMotion features={domMax}>
           <MotionConfig
             reducedMotion="user"
-            transition={{ duration: 0.45, ease: [0.32, 0.72, 0, 1] }}
+            transition={{
+              duration: TRANSITION_DURATION,
+              ease: TRANSITION_EASE,
+            }}
           >
-            <m.div
-              layout
-              className="relative flex @3xl:w-auto w-full @3xl:flex-row flex-col overflow-clip"
+            <div
+              ref={stepContainerRef}
+              className="relative w-full @3xl:flex-1 overflow-clip"
             >
               <AnimatePresence initial={false} mode="popLayout">
                 {booker.step === "select" ? (
                   <m.div
                     key="select"
+                    ref={selectStepRef}
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
@@ -187,6 +269,7 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
                 ) : (
                   <m.div
                     key="confirm"
+                    ref={confirmStepRef}
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
@@ -200,7 +283,7 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
                   </m.div>
                 )}
               </AnimatePresence>
-            </m.div>
+            </div>
           </MotionConfig>
         </LazyMotion>
       </Card>

From cfcae4d30d733cd534a68e4d65e3ca9c2b41595d Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 6 Jul 2026 18:29:35 +0000
Subject: [PATCH 08/49] refactor(booker): extract step resize into hook,
 autofocus confirm input

Co-Authored-By: pasquale <pasqualevitiello@gmail.com>
---
 apps/ui/public/r/booker-1.json              |  2 +-
 apps/ui/registry/default/atoms/booker-1.tsx | 93 +++++++++++++--------
 2 files changed, 57 insertions(+), 38 deletions(-)

diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index 845956899..90c06fee4 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -27,7 +27,7 @@
   "files": [
     {
       "path": "registry/default/atoms/booker-1.tsx",
-      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  animate,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { useEffect, useLayoutEffect, useRef } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\n\nconst TRANSITION_DURATION = 0.45;\nconst TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  const stepContainerRef = useRef<HTMLDivElement>(null);\n  const selectStepRef = useRef<HTMLDivElement>(null);\n  const confirmStepRef = useRef<HTMLDivElement>(null);\n  const previousStepRef = useRef(booker.step);\n  const isFirstRenderRef = useRef(true);\n  const transitionTokenRef = useRef(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = stepContainerRef.current;\n    if (!container) {\n      return;\n    }\n    if (isFirstRenderRef.current) {\n      isFirstRenderRef.current = false;\n      previousStepRef.current = booker.step;\n      return;\n    }\n    if (previousStepRef.current === booker.step) {\n      return;\n    }\n    previousStepRef.current = booker.step;\n\n    const enteringStep =\n      booker.step === \"select\" ? selectStepRef.current : confirmStepRef.current;\n\n    // FLIP: capture the current box, release to the entering step's natural\n    // size to measure the target, then animate the real width/height between\n    // them so the card resizes without transforms or reflowing its content.\n    const start = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n    if (enteringStep) {\n      enteringStep.style.width = `${end.width}px`;\n    }\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    const prefersReducedMotion =\n      typeof window !== \"undefined\" &&\n      window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    const token = ++transitionTokenRef.current;\n    const controls = animate(\n      container,\n      { height: end.height, width: end.width },\n      {\n        duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,\n        ease: TRANSITION_EASE,\n      },\n    );\n    controls\n      .then(() => {\n        if (token !== transitionTokenRef.current) {\n          return;\n        }\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n      })\n      .catch(() => {});\n  }, [booker.step]);\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{\n              duration: TRANSITION_DURATION,\n              ease: TRANSITION_EASE,\n            }}\n          >\n            <div\n              ref={stepContainerRef}\n              className=\"relative w-full @3xl:flex-1 overflow-clip\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    ref={selectStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full @3xl:flex-row flex-col\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    ref={confirmStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input className=\"w-full\" placeholder=\"Your name\" />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
+      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  animate,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { type RefObject, useEffect, useLayoutEffect, useRef } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport {\n  type BookerInitialData,\n  type BookerStep,\n  useBooker,\n} from \"@/lib/booker/use-booker\";\n\nconst TRANSITION_DURATION = 0.45;\nconst TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n// FLIP: on step change, measure the container's current box, release it to the\n// entering step's natural size to read the target, then animate the real\n// width/height between the two. Animating actual dimensions (not `transform`)\n// resizes the card without scaling or reflowing its content mid-transition.\nfunction useStepResizeTransition(\n  step: BookerStep,\n  containerRef: RefObject<HTMLDivElement | null>,\n  selectStepRef: RefObject<HTMLDivElement | null>,\n  confirmStepRef: RefObject<HTMLDivElement | null>,\n) {\n  const isFirstRenderRef = useRef(true);\n  const transitionTokenRef = useRef(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n    if (isFirstRenderRef.current) {\n      isFirstRenderRef.current = false;\n      return;\n    }\n\n    const enteringStep =\n      step === \"select\" ? selectStepRef.current : confirmStepRef.current;\n\n    const start = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n\n    // Pin the entering step so it can't reflow while the container is clipped.\n    if (enteringStep) {\n      enteringStep.style.width = `${end.width}px`;\n    }\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    const token = ++transitionTokenRef.current;\n    animate(\n      container,\n      { height: end.height, width: end.width },\n      {\n        duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,\n        ease: TRANSITION_EASE,\n      },\n    )\n      .then(() => {\n        if (token !== transitionTokenRef.current) {\n          return;\n        }\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n      })\n      .catch(() => {});\n  }, [step]);\n}\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  const stepContainerRef = useRef<HTMLDivElement>(null);\n  const selectStepRef = useRef<HTMLDivElement>(null);\n  const confirmStepRef = useRef<HTMLDivElement>(null);\n  useStepResizeTransition(\n    booker.step,\n    stepContainerRef,\n    selectStepRef,\n    confirmStepRef,\n  );\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{\n              duration: TRANSITION_DURATION,\n              ease: TRANSITION_EASE,\n            }}\n          >\n            <div\n              ref={stepContainerRef}\n              className=\"relative w-full @3xl:flex-1 overflow-clip\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    ref={selectStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full @3xl:flex-row flex-col\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    ref={confirmStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input\n                      autoFocus\n                      className=\"w-full\"\n                      placeholder=\"Your name\"\n                      type=\"text\"\n                    />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
       "type": "registry:block",
       "target": "components/atoms/booker-1.tsx"
     },
diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index 5053c23b1..d0941a104 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -9,7 +9,7 @@ import {
   MotionConfig,
   m,
 } from "motion/react";
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { type RefObject, useEffect, useLayoutEffect, useRef } from "react";
 import { Button } from "@/registry/default/ui/button";
 import { Card } from "@/registry/default/ui/card";
 import { Input } from "@/registry/default/ui/input";
@@ -25,7 +25,11 @@ import { Location } from "./booker/location";
 import { TimePicker } from "./booker/time-picker";
 import { TimezonePicker } from "./booker/timezone-picker";
 import type { BookerTarget } from "@/lib/booker/target";
-import { type BookerInitialData, useBooker } from "@/lib/booker/use-booker";
+import {
+  type BookerInitialData,
+  type BookerStep,
+  useBooker,
+} from "@/lib/booker/use-booker";
 
 const TRANSITION_DURATION = 0.45;
 const TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;
@@ -33,47 +37,32 @@ const TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;
 const useIsomorphicLayoutEffect =
   typeof window === "undefined" ? useEffect : useLayoutEffect;
 
-type BookerProps = {
-  target: BookerTarget;
-  timezone?: string;
-  initialData?: BookerInitialData;
-  defaultFormValues?: Record<string, unknown>;
-  onCreateBookingSuccess?: (data: unknown) => void;
-  labels?: Partial<BookerLabels>;
-};
-
-export function Booker({ initialData, target, timezone, labels }: BookerProps) {
-  const t = getBookerLabels(labels);
-  const booker = useBooker({ initialData, target, timezone });
-
-  const stepContainerRef = useRef<HTMLDivElement>(null);
-  const selectStepRef = useRef<HTMLDivElement>(null);
-  const confirmStepRef = useRef<HTMLDivElement>(null);
-  const previousStepRef = useRef(booker.step);
+// FLIP: on step change, measure the container's current box, release it to the
+// entering step's natural size to read the target, then animate the real
+// width/height between the two. Animating actual dimensions (not `transform`)
+// resizes the card without scaling or reflowing its content mid-transition.
+function useStepResizeTransition(
+  step: BookerStep,
+  containerRef: RefObject<HTMLDivElement | null>,
+  selectStepRef: RefObject<HTMLDivElement | null>,
+  confirmStepRef: RefObject<HTMLDivElement | null>,
+) {
   const isFirstRenderRef = useRef(true);
   const transitionTokenRef = useRef(0);
 
   useIsomorphicLayoutEffect(() => {
-    const container = stepContainerRef.current;
+    const container = containerRef.current;
     if (!container) {
       return;
     }
     if (isFirstRenderRef.current) {
       isFirstRenderRef.current = false;
-      previousStepRef.current = booker.step;
-      return;
-    }
-    if (previousStepRef.current === booker.step) {
       return;
     }
-    previousStepRef.current = booker.step;
 
     const enteringStep =
-      booker.step === "select" ? selectStepRef.current : confirmStepRef.current;
+      step === "select" ? selectStepRef.current : confirmStepRef.current;
 
-    // FLIP: capture the current box, release to the entering step's natural
-    // size to measure the target, then animate the real width/height between
-    // them so the card resizes without transforms or reflowing its content.
     const start = {
       height: container.offsetHeight,
       width: container.offsetWidth,
@@ -86,25 +75,26 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
       height: container.offsetHeight,
       width: container.offsetWidth,
     };
+
+    // Pin the entering step so it can't reflow while the container is clipped.
     if (enteringStep) {
       enteringStep.style.width = `${end.width}px`;
     }
     container.style.width = `${start.width}px`;
     container.style.height = `${start.height}px`;
 
-    const prefersReducedMotion =
-      typeof window !== "undefined" &&
-      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)",
+    ).matches;
     const token = ++transitionTokenRef.current;
-    const controls = animate(
+    animate(
       container,
       { height: end.height, width: end.width },
       {
         duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,
         ease: TRANSITION_EASE,
       },
-    );
-    controls
+    )
       .then(() => {
         if (token !== transitionTokenRef.current) {
           return;
@@ -114,7 +104,31 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
         enteringStep?.style.removeProperty("width");
       })
       .catch(() => {});
-  }, [booker.step]);
+  }, [step]);
+}
+
+type BookerProps = {
+  target: BookerTarget;
+  timezone?: string;
+  initialData?: BookerInitialData;
+  defaultFormValues?: Record<string, unknown>;
+  onCreateBookingSuccess?: (data: unknown) => void;
+  labels?: Partial<BookerLabels>;
+};
+
+export function Booker({ initialData, target, timezone, labels }: BookerProps) {
+  const t = getBookerLabels(labels);
+  const booker = useBooker({ initialData, target, timezone });
+
+  const stepContainerRef = useRef<HTMLDivElement>(null);
+  const selectStepRef = useRef<HTMLDivElement>(null);
+  const confirmStepRef = useRef<HTMLDivElement>(null);
+  useStepResizeTransition(
+    booker.step,
+    stepContainerRef,
+    selectStepRef,
+    confirmStepRef,
+  );
 
   if (booker.error) {
     return (
@@ -279,7 +293,12 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
                       <ArrowLeftIcon aria-hidden="true" />
                       Back
                     </Button>
-                    <Input className="w-full" placeholder="Your name" />
+                    <Input
+                      autoFocus
+                      className="w-full"
+                      placeholder="Your name"
+                      type="text"
+                    />
                   </m.div>
                 )}
               </AnimatePresence>

From 4efce4f1b4183dcf63ef49f9f161606607c22e93 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Mon, 6 Jul 2026 20:30:52 +0200
Subject: [PATCH 09/49] mc

---
 apps/ui/registry/default/atoms/booker-1.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index d0941a104..9506bd18b 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -153,7 +153,7 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
 
   return (
     <div
-      className="@container flex flex-col items-center gap-4"
+      className="@container w-full flex flex-col items-center gap-4"
       aria-busy={booker.loadingState.busy}
     >
       <Card className="@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]">

From 49f680d18ebe2e20169f5d75fbeb71adcf0fe9b2 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Mon, 6 Jul 2026 20:31:05 +0200
Subject: [PATCH 10/49] build reg

---
 apps/ui/public/r/booker-1.json              | 2 +-
 apps/ui/registry/default/atoms/booker-1.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index 90c06fee4..7233f26cf 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -27,7 +27,7 @@
   "files": [
     {
       "path": "registry/default/atoms/booker-1.tsx",
-      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  animate,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { type RefObject, useEffect, useLayoutEffect, useRef } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport {\n  type BookerInitialData,\n  type BookerStep,\n  useBooker,\n} from \"@/lib/booker/use-booker\";\n\nconst TRANSITION_DURATION = 0.45;\nconst TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n// FLIP: on step change, measure the container's current box, release it to the\n// entering step's natural size to read the target, then animate the real\n// width/height between the two. Animating actual dimensions (not `transform`)\n// resizes the card without scaling or reflowing its content mid-transition.\nfunction useStepResizeTransition(\n  step: BookerStep,\n  containerRef: RefObject<HTMLDivElement | null>,\n  selectStepRef: RefObject<HTMLDivElement | null>,\n  confirmStepRef: RefObject<HTMLDivElement | null>,\n) {\n  const isFirstRenderRef = useRef(true);\n  const transitionTokenRef = useRef(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n    if (isFirstRenderRef.current) {\n      isFirstRenderRef.current = false;\n      return;\n    }\n\n    const enteringStep =\n      step === \"select\" ? selectStepRef.current : confirmStepRef.current;\n\n    const start = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n\n    // Pin the entering step so it can't reflow while the container is clipped.\n    if (enteringStep) {\n      enteringStep.style.width = `${end.width}px`;\n    }\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    const token = ++transitionTokenRef.current;\n    animate(\n      container,\n      { height: end.height, width: end.width },\n      {\n        duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,\n        ease: TRANSITION_EASE,\n      },\n    )\n      .then(() => {\n        if (token !== transitionTokenRef.current) {\n          return;\n        }\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n      })\n      .catch(() => {});\n  }, [step]);\n}\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  const stepContainerRef = useRef<HTMLDivElement>(null);\n  const selectStepRef = useRef<HTMLDivElement>(null);\n  const confirmStepRef = useRef<HTMLDivElement>(null);\n  useStepResizeTransition(\n    booker.step,\n    stepContainerRef,\n    selectStepRef,\n    confirmStepRef,\n  );\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{\n              duration: TRANSITION_DURATION,\n              ease: TRANSITION_EASE,\n            }}\n          >\n            <div\n              ref={stepContainerRef}\n              className=\"relative w-full @3xl:flex-1 overflow-clip\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    ref={selectStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full @3xl:flex-row flex-col\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    ref={confirmStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input\n                      autoFocus\n                      className=\"w-full\"\n                      placeholder=\"Your name\"\n                      type=\"text\"\n                    />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
+      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  animate,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { type RefObject, useEffect, useLayoutEffect, useRef } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport {\n  type BookerInitialData,\n  type BookerStep,\n  useBooker,\n} from \"@/lib/booker/use-booker\";\n\nconst TRANSITION_DURATION = 0.45;\nconst TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n// FLIP: on step change, measure the container's current box, release it to the\n// entering step's natural size to read the target, then animate the real\n// width/height between the two. Animating actual dimensions (not `transform`)\n// resizes the card without scaling or reflowing its content mid-transition.\nfunction useStepResizeTransition(\n  step: BookerStep,\n  containerRef: RefObject<HTMLDivElement | null>,\n  selectStepRef: RefObject<HTMLDivElement | null>,\n  confirmStepRef: RefObject<HTMLDivElement | null>,\n) {\n  const isFirstRenderRef = useRef(true);\n  const transitionTokenRef = useRef(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n    if (isFirstRenderRef.current) {\n      isFirstRenderRef.current = false;\n      return;\n    }\n\n    const enteringStep =\n      step === \"select\" ? selectStepRef.current : confirmStepRef.current;\n\n    const start = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n\n    // Pin the entering step so it can't reflow while the container is clipped.\n    if (enteringStep) {\n      enteringStep.style.width = `${end.width}px`;\n    }\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    const token = ++transitionTokenRef.current;\n    animate(\n      container,\n      { height: end.height, width: end.width },\n      {\n        duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,\n        ease: TRANSITION_EASE,\n      },\n    )\n      .then(() => {\n        if (token !== transitionTokenRef.current) {\n          return;\n        }\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n      })\n      .catch(() => {});\n  }, [step]);\n}\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  const stepContainerRef = useRef<HTMLDivElement>(null);\n  const selectStepRef = useRef<HTMLDivElement>(null);\n  const confirmStepRef = useRef<HTMLDivElement>(null);\n  useStepResizeTransition(\n    booker.step,\n    stepContainerRef,\n    selectStepRef,\n    confirmStepRef,\n  );\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{\n              duration: TRANSITION_DURATION,\n              ease: TRANSITION_EASE,\n            }}\n          >\n            <div\n              ref={stepContainerRef}\n              className=\"relative w-full @3xl:flex-1 overflow-clip\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    ref={selectStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full @3xl:flex-row flex-col\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    ref={confirmStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input\n                      autoFocus\n                      className=\"w-full\"\n                      placeholder=\"Your name\"\n                      type=\"text\"\n                    />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
       "type": "registry:block",
       "target": "components/atoms/booker-1.tsx"
     },
diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index 9506bd18b..fcf451ed4 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -153,7 +153,7 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
 
   return (
     <div
-      className="@container w-full flex flex-col items-center gap-4"
+      className="@container flex w-full flex-col items-center gap-4"
       aria-busy={booker.loadingState.busy}
     >
       <Card className="@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]">

From 9ea99bfff876aad43a097da62c6cc4a15f5eefb8 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 6 Jul 2026 18:39:31 +0000
Subject: [PATCH 11/49] fix(booker): trigger step resize on step-value change,
 not first-render flag

Co-Authored-By: pasquale <pasqualevitiello@gmail.com>
---
 apps/ui/public/r/booker-1.json              | 2 +-
 apps/ui/registry/default/atoms/booker-1.tsx | 9 +++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index 7233f26cf..c65bfade0 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -27,7 +27,7 @@
   "files": [
     {
       "path": "registry/default/atoms/booker-1.tsx",
-      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  animate,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { type RefObject, useEffect, useLayoutEffect, useRef } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport {\n  type BookerInitialData,\n  type BookerStep,\n  useBooker,\n} from \"@/lib/booker/use-booker\";\n\nconst TRANSITION_DURATION = 0.45;\nconst TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n// FLIP: on step change, measure the container's current box, release it to the\n// entering step's natural size to read the target, then animate the real\n// width/height between the two. Animating actual dimensions (not `transform`)\n// resizes the card without scaling or reflowing its content mid-transition.\nfunction useStepResizeTransition(\n  step: BookerStep,\n  containerRef: RefObject<HTMLDivElement | null>,\n  selectStepRef: RefObject<HTMLDivElement | null>,\n  confirmStepRef: RefObject<HTMLDivElement | null>,\n) {\n  const isFirstRenderRef = useRef(true);\n  const transitionTokenRef = useRef(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n    if (isFirstRenderRef.current) {\n      isFirstRenderRef.current = false;\n      return;\n    }\n\n    const enteringStep =\n      step === \"select\" ? selectStepRef.current : confirmStepRef.current;\n\n    const start = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n\n    // Pin the entering step so it can't reflow while the container is clipped.\n    if (enteringStep) {\n      enteringStep.style.width = `${end.width}px`;\n    }\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    const token = ++transitionTokenRef.current;\n    animate(\n      container,\n      { height: end.height, width: end.width },\n      {\n        duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,\n        ease: TRANSITION_EASE,\n      },\n    )\n      .then(() => {\n        if (token !== transitionTokenRef.current) {\n          return;\n        }\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n      })\n      .catch(() => {});\n  }, [step]);\n}\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  const stepContainerRef = useRef<HTMLDivElement>(null);\n  const selectStepRef = useRef<HTMLDivElement>(null);\n  const confirmStepRef = useRef<HTMLDivElement>(null);\n  useStepResizeTransition(\n    booker.step,\n    stepContainerRef,\n    selectStepRef,\n    confirmStepRef,\n  );\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{\n              duration: TRANSITION_DURATION,\n              ease: TRANSITION_EASE,\n            }}\n          >\n            <div\n              ref={stepContainerRef}\n              className=\"relative w-full @3xl:flex-1 overflow-clip\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    ref={selectStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full @3xl:flex-row flex-col\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    ref={confirmStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input\n                      autoFocus\n                      className=\"w-full\"\n                      placeholder=\"Your name\"\n                      type=\"text\"\n                    />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
+      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  animate,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { type RefObject, useEffect, useLayoutEffect, useRef } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport {\n  type BookerInitialData,\n  type BookerStep,\n  useBooker,\n} from \"@/lib/booker/use-booker\";\n\nconst TRANSITION_DURATION = 0.45;\nconst TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n// FLIP: on step change, measure the container's current box, release it to the\n// entering step's natural size to read the target, then animate the real\n// width/height between the two. Animating actual dimensions (not `transform`)\n// resizes the card without scaling or reflowing its content mid-transition.\nfunction useStepResizeTransition(\n  step: BookerStep,\n  containerRef: RefObject<HTMLDivElement | null>,\n  selectStepRef: RefObject<HTMLDivElement | null>,\n  confirmStepRef: RefObject<HTMLDivElement | null>,\n) {\n  const previousStepRef = useRef(step);\n  const transitionTokenRef = useRef(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container || previousStepRef.current === step) {\n      return;\n    }\n    previousStepRef.current = step;\n\n    const enteringStep =\n      step === \"select\" ? selectStepRef.current : confirmStepRef.current;\n\n    const start = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n\n    // Pin the entering step so it can't reflow while the container is clipped.\n    if (enteringStep) {\n      enteringStep.style.width = `${end.width}px`;\n    }\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    const token = ++transitionTokenRef.current;\n    animate(\n      container,\n      { height: end.height, width: end.width },\n      {\n        duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,\n        ease: TRANSITION_EASE,\n      },\n    )\n      .then(() => {\n        if (token !== transitionTokenRef.current) {\n          return;\n        }\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n      })\n      .catch(() => {});\n  }, [step]);\n}\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  const stepContainerRef = useRef<HTMLDivElement>(null);\n  const selectStepRef = useRef<HTMLDivElement>(null);\n  const confirmStepRef = useRef<HTMLDivElement>(null);\n  useStepResizeTransition(\n    booker.step,\n    stepContainerRef,\n    selectStepRef,\n    confirmStepRef,\n  );\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{\n              duration: TRANSITION_DURATION,\n              ease: TRANSITION_EASE,\n            }}\n          >\n            <div\n              ref={stepContainerRef}\n              className=\"relative w-full @3xl:flex-1 overflow-clip\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    ref={selectStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full @3xl:flex-row flex-col\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    ref={confirmStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input\n                      autoFocus\n                      className=\"w-full\"\n                      placeholder=\"Your name\"\n                      type=\"text\"\n                    />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
       "type": "registry:block",
       "target": "components/atoms/booker-1.tsx"
     },
diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index fcf451ed4..690c1a07d 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -47,18 +47,15 @@ function useStepResizeTransition(
   selectStepRef: RefObject<HTMLDivElement | null>,
   confirmStepRef: RefObject<HTMLDivElement | null>,
 ) {
-  const isFirstRenderRef = useRef(true);
+  const previousStepRef = useRef(step);
   const transitionTokenRef = useRef(0);
 
   useIsomorphicLayoutEffect(() => {
     const container = containerRef.current;
-    if (!container) {
-      return;
-    }
-    if (isFirstRenderRef.current) {
-      isFirstRenderRef.current = false;
+    if (!container || previousStepRef.current === step) {
       return;
     }
+    previousStepRef.current = step;
 
     const enteringStep =
       step === "select" ? selectStepRef.current : confirmStepRef.current;

From 08a28d7cac413ecb1ab473c7fe8d2d9fbc18a22c Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 6 Jul 2026 19:21:39 +0000
Subject: [PATCH 12/49] chore(booker): TEMP diagnostic logging for step resize

Co-Authored-By: pasquale <pasqualevitiello@gmail.com>
---
 apps/ui/public/r/booker-1.json              |  2 +-
 apps/ui/registry/default/atoms/booker-1.tsx | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index c65bfade0..fd7c6724a 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -27,7 +27,7 @@
   "files": [
     {
       "path": "registry/default/atoms/booker-1.tsx",
-      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  animate,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { type RefObject, useEffect, useLayoutEffect, useRef } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport {\n  type BookerInitialData,\n  type BookerStep,\n  useBooker,\n} from \"@/lib/booker/use-booker\";\n\nconst TRANSITION_DURATION = 0.45;\nconst TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n// FLIP: on step change, measure the container's current box, release it to the\n// entering step's natural size to read the target, then animate the real\n// width/height between the two. Animating actual dimensions (not `transform`)\n// resizes the card without scaling or reflowing its content mid-transition.\nfunction useStepResizeTransition(\n  step: BookerStep,\n  containerRef: RefObject<HTMLDivElement | null>,\n  selectStepRef: RefObject<HTMLDivElement | null>,\n  confirmStepRef: RefObject<HTMLDivElement | null>,\n) {\n  const previousStepRef = useRef(step);\n  const transitionTokenRef = useRef(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container || previousStepRef.current === step) {\n      return;\n    }\n    previousStepRef.current = step;\n\n    const enteringStep =\n      step === \"select\" ? selectStepRef.current : confirmStepRef.current;\n\n    const start = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n\n    // Pin the entering step so it can't reflow while the container is clipped.\n    if (enteringStep) {\n      enteringStep.style.width = `${end.width}px`;\n    }\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    const token = ++transitionTokenRef.current;\n    animate(\n      container,\n      { height: end.height, width: end.width },\n      {\n        duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,\n        ease: TRANSITION_EASE,\n      },\n    )\n      .then(() => {\n        if (token !== transitionTokenRef.current) {\n          return;\n        }\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n      })\n      .catch(() => {});\n  }, [step]);\n}\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  const stepContainerRef = useRef<HTMLDivElement>(null);\n  const selectStepRef = useRef<HTMLDivElement>(null);\n  const confirmStepRef = useRef<HTMLDivElement>(null);\n  useStepResizeTransition(\n    booker.step,\n    stepContainerRef,\n    selectStepRef,\n    confirmStepRef,\n  );\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{\n              duration: TRANSITION_DURATION,\n              ease: TRANSITION_EASE,\n            }}\n          >\n            <div\n              ref={stepContainerRef}\n              className=\"relative w-full @3xl:flex-1 overflow-clip\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    ref={selectStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full @3xl:flex-row flex-col\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    ref={confirmStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input\n                      autoFocus\n                      className=\"w-full\"\n                      placeholder=\"Your name\"\n                      type=\"text\"\n                    />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
+      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  animate,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { type RefObject, useEffect, useLayoutEffect, useRef } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport {\n  type BookerInitialData,\n  type BookerStep,\n  useBooker,\n} from \"@/lib/booker/use-booker\";\n\nconst TRANSITION_DURATION = 0.45;\nconst TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n// FLIP: on step change, measure the container's current box, release it to the\n// entering step's natural size to read the target, then animate the real\n// width/height between the two. Animating actual dimensions (not `transform`)\n// resizes the card without scaling or reflowing its content mid-transition.\nfunction useStepResizeTransition(\n  step: BookerStep,\n  containerRef: RefObject<HTMLDivElement | null>,\n  selectStepRef: RefObject<HTMLDivElement | null>,\n  confirmStepRef: RefObject<HTMLDivElement | null>,\n) {\n  const previousStepRef = useRef(step);\n  const transitionTokenRef = useRef(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    // eslint-disable-next-line no-console\n    console.log(\"[BOOKER_RESIZE_DIAG rev=marker-A]\", {\n      prev: previousStepRef.current,\n      step,\n      hasContainer: !!container,\n    });\n    if (!container || previousStepRef.current === step) {\n      return;\n    }\n    previousStepRef.current = step;\n\n    const enteringStep =\n      step === \"select\" ? selectStepRef.current : confirmStepRef.current;\n\n    const start = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n    // eslint-disable-next-line no-console\n    console.log(\"[BOOKER_RESIZE_DIAG rev=marker-A] measured\", {\n      startW: start.width,\n      startH: start.height,\n      endW: end.width,\n      endH: end.height,\n      hasEntering: !!enteringStep,\n    });\n\n    // Pin the entering step so it can't reflow while the container is clipped.\n    if (enteringStep) {\n      enteringStep.style.width = `${end.width}px`;\n    }\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    const token = ++transitionTokenRef.current;\n    animate(\n      container,\n      { height: end.height, width: end.width },\n      {\n        duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,\n        ease: TRANSITION_EASE,\n      },\n    )\n      .then(() => {\n        if (token !== transitionTokenRef.current) {\n          return;\n        }\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n      })\n      .catch(() => {});\n  }, [step]);\n}\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  const stepContainerRef = useRef<HTMLDivElement>(null);\n  const selectStepRef = useRef<HTMLDivElement>(null);\n  const confirmStepRef = useRef<HTMLDivElement>(null);\n  useStepResizeTransition(\n    booker.step,\n    stepContainerRef,\n    selectStepRef,\n    confirmStepRef,\n  );\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{\n              duration: TRANSITION_DURATION,\n              ease: TRANSITION_EASE,\n            }}\n          >\n            <div\n              ref={stepContainerRef}\n              className=\"relative w-full @3xl:flex-1 overflow-clip\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    ref={selectStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full @3xl:flex-row flex-col\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    ref={confirmStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input\n                      autoFocus\n                      className=\"w-full\"\n                      placeholder=\"Your name\"\n                      type=\"text\"\n                    />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
       "type": "registry:block",
       "target": "components/atoms/booker-1.tsx"
     },
diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index 690c1a07d..d13a1cd72 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -52,6 +52,12 @@ function useStepResizeTransition(
 
   useIsomorphicLayoutEffect(() => {
     const container = containerRef.current;
+    // eslint-disable-next-line no-console
+    console.log("[BOOKER_RESIZE_DIAG rev=marker-A]", {
+      prev: previousStepRef.current,
+      step,
+      hasContainer: !!container,
+    });
     if (!container || previousStepRef.current === step) {
       return;
     }
@@ -72,6 +78,14 @@ function useStepResizeTransition(
       height: container.offsetHeight,
       width: container.offsetWidth,
     };
+    // eslint-disable-next-line no-console
+    console.log("[BOOKER_RESIZE_DIAG rev=marker-A] measured", {
+      startW: start.width,
+      startH: start.height,
+      endW: end.width,
+      endH: end.height,
+      hasEntering: !!enteringStep,
+    });
 
     // Pin the entering step so it can't reflow while the container is clipped.
     if (enteringStep) {

From 9b6b00a4c34deb258715f27a37cd574cc6f5bd3b Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 6 Jul 2026 19:28:09 +0000
Subject: [PATCH 13/49] fix(booker): FLIP from resting size so step resize
 animates every time

Co-Authored-By: pasquale <pasqualevitiello@gmail.com>
---
 apps/ui/public/r/booker-1.json              |  2 +-
 apps/ui/registry/default/atoms/booker-1.tsx | 61 ++++++++++++---------
 2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index fd7c6724a..c70864987 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -27,7 +27,7 @@
   "files": [
     {
       "path": "registry/default/atoms/booker-1.tsx",
-      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  animate,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { type RefObject, useEffect, useLayoutEffect, useRef } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport {\n  type BookerInitialData,\n  type BookerStep,\n  useBooker,\n} from \"@/lib/booker/use-booker\";\n\nconst TRANSITION_DURATION = 0.45;\nconst TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n// FLIP: on step change, measure the container's current box, release it to the\n// entering step's natural size to read the target, then animate the real\n// width/height between the two. Animating actual dimensions (not `transform`)\n// resizes the card without scaling or reflowing its content mid-transition.\nfunction useStepResizeTransition(\n  step: BookerStep,\n  containerRef: RefObject<HTMLDivElement | null>,\n  selectStepRef: RefObject<HTMLDivElement | null>,\n  confirmStepRef: RefObject<HTMLDivElement | null>,\n) {\n  const previousStepRef = useRef(step);\n  const transitionTokenRef = useRef(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    // eslint-disable-next-line no-console\n    console.log(\"[BOOKER_RESIZE_DIAG rev=marker-A]\", {\n      prev: previousStepRef.current,\n      step,\n      hasContainer: !!container,\n    });\n    if (!container || previousStepRef.current === step) {\n      return;\n    }\n    previousStepRef.current = step;\n\n    const enteringStep =\n      step === \"select\" ? selectStepRef.current : confirmStepRef.current;\n\n    const start = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = {\n      height: container.offsetHeight,\n      width: container.offsetWidth,\n    };\n    // eslint-disable-next-line no-console\n    console.log(\"[BOOKER_RESIZE_DIAG rev=marker-A] measured\", {\n      startW: start.width,\n      startH: start.height,\n      endW: end.width,\n      endH: end.height,\n      hasEntering: !!enteringStep,\n    });\n\n    // Pin the entering step so it can't reflow while the container is clipped.\n    if (enteringStep) {\n      enteringStep.style.width = `${end.width}px`;\n    }\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    const token = ++transitionTokenRef.current;\n    animate(\n      container,\n      { height: end.height, width: end.width },\n      {\n        duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,\n        ease: TRANSITION_EASE,\n      },\n    )\n      .then(() => {\n        if (token !== transitionTokenRef.current) {\n          return;\n        }\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n      })\n      .catch(() => {});\n  }, [step]);\n}\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  const stepContainerRef = useRef<HTMLDivElement>(null);\n  const selectStepRef = useRef<HTMLDivElement>(null);\n  const confirmStepRef = useRef<HTMLDivElement>(null);\n  useStepResizeTransition(\n    booker.step,\n    stepContainerRef,\n    selectStepRef,\n    confirmStepRef,\n  );\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{\n              duration: TRANSITION_DURATION,\n              ease: TRANSITION_EASE,\n            }}\n          >\n            <div\n              ref={stepContainerRef}\n              className=\"relative w-full @3xl:flex-1 overflow-clip\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    ref={selectStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full @3xl:flex-row flex-col\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    ref={confirmStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input\n                      autoFocus\n                      className=\"w-full\"\n                      placeholder=\"Your name\"\n                      type=\"text\"\n                    />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
+      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  animate,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { type RefObject, useEffect, useLayoutEffect, useRef } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport {\n  type BookerInitialData,\n  type BookerStep,\n  useBooker,\n} from \"@/lib/booker/use-booker\";\n\nconst TRANSITION_DURATION = 0.45;\nconst TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\ntype Size = { width: number; height: number };\n\nconst measure = (element: HTMLElement): Size => ({\n  height: element.offsetHeight,\n  width: element.offsetWidth,\n});\n\n// FLIP: on step change, animate the container's real width/height from its\n// previous box to the entering step's natural box. Animating actual dimensions\n// (not `transform`) resizes the card without scaling or reflowing its content.\n//\n// `popLayout` pulls the outgoing step out of flow before this layout effect\n// runs, so by now the container already reports the *new* size — too late to\n// read the old one from the DOM. A `ResizeObserver` therefore tracks the\n// container's resting size continuously (skipping frames driven by our own\n// animation) so the pre-change size is always available as the FLIP origin.\nfunction useStepResizeTransition(\n  step: BookerStep,\n  containerRef: RefObject<HTMLDivElement | null>,\n  selectStepRef: RefObject<HTMLDivElement | null>,\n  confirmStepRef: RefObject<HTMLDivElement | null>,\n) {\n  const previousStepRef = useRef(step);\n  const restingSizeRef = useRef<Size | null>(null);\n  const isAnimatingRef = useRef(false);\n  const transitionTokenRef = useRef(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n    const observer = new ResizeObserver(() => {\n      if (!isAnimatingRef.current) {\n        restingSizeRef.current = measure(container);\n      }\n    });\n    observer.observe(container);\n    return () => observer.disconnect();\n  }, [containerRef]);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container || previousStepRef.current === step) {\n      return;\n    }\n    previousStepRef.current = step;\n\n    const enteringStep =\n      step === \"select\" ? selectStepRef.current : confirmStepRef.current;\n\n    const start = restingSizeRef.current ?? measure(container);\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = measure(container);\n\n    // Pin the entering step so it can't reflow while the container is clipped.\n    if (enteringStep) {\n      enteringStep.style.width = `${end.width}px`;\n    }\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    const token = ++transitionTokenRef.current;\n    isAnimatingRef.current = true;\n    animate(\n      container,\n      { height: end.height, width: end.width },\n      {\n        duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,\n        ease: TRANSITION_EASE,\n      },\n    )\n      .then(() => {\n        if (token !== transitionTokenRef.current) {\n          return;\n        }\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n        restingSizeRef.current = measure(container);\n        isAnimatingRef.current = false;\n      })\n      .catch(() => {});\n  }, [step]);\n}\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  const stepContainerRef = useRef<HTMLDivElement>(null);\n  const selectStepRef = useRef<HTMLDivElement>(null);\n  const confirmStepRef = useRef<HTMLDivElement>(null);\n  useStepResizeTransition(\n    booker.step,\n    stepContainerRef,\n    selectStepRef,\n    confirmStepRef,\n  );\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{\n              duration: TRANSITION_DURATION,\n              ease: TRANSITION_EASE,\n            }}\n          >\n            <div\n              ref={stepContainerRef}\n              className=\"relative w-full @3xl:flex-1 overflow-clip\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    ref={selectStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full @3xl:flex-row flex-col\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    ref={confirmStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input\n                      autoFocus\n                      className=\"w-full\"\n                      placeholder=\"Your name\"\n                      type=\"text\"\n                    />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
       "type": "registry:block",
       "target": "components/atoms/booker-1.tsx"
     },
diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index d13a1cd72..1a12e129f 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -37,10 +37,22 @@ const TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;
 const useIsomorphicLayoutEffect =
   typeof window === "undefined" ? useEffect : useLayoutEffect;
 
-// FLIP: on step change, measure the container's current box, release it to the
-// entering step's natural size to read the target, then animate the real
-// width/height between the two. Animating actual dimensions (not `transform`)
-// resizes the card without scaling or reflowing its content mid-transition.
+type Size = { width: number; height: number };
+
+const measure = (element: HTMLElement): Size => ({
+  height: element.offsetHeight,
+  width: element.offsetWidth,
+});
+
+// FLIP: on step change, animate the container's real width/height from its
+// previous box to the entering step's natural box. Animating actual dimensions
+// (not `transform`) resizes the card without scaling or reflowing its content.
+//
+// `popLayout` pulls the outgoing step out of flow before this layout effect
+// runs, so by now the container already reports the *new* size — too late to
+// read the old one from the DOM. A `ResizeObserver` therefore tracks the
+// container's resting size continuously (skipping frames driven by our own
+// animation) so the pre-change size is always available as the FLIP origin.
 function useStepResizeTransition(
   step: BookerStep,
   containerRef: RefObject<HTMLDivElement | null>,
@@ -48,16 +60,26 @@ function useStepResizeTransition(
   confirmStepRef: RefObject<HTMLDivElement | null>,
 ) {
   const previousStepRef = useRef(step);
+  const restingSizeRef = useRef<Size | null>(null);
+  const isAnimatingRef = useRef(false);
   const transitionTokenRef = useRef(0);
 
   useIsomorphicLayoutEffect(() => {
     const container = containerRef.current;
-    // eslint-disable-next-line no-console
-    console.log("[BOOKER_RESIZE_DIAG rev=marker-A]", {
-      prev: previousStepRef.current,
-      step,
-      hasContainer: !!container,
+    if (!container) {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      if (!isAnimatingRef.current) {
+        restingSizeRef.current = measure(container);
+      }
     });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [containerRef]);
+
+  useIsomorphicLayoutEffect(() => {
+    const container = containerRef.current;
     if (!container || previousStepRef.current === step) {
       return;
     }
@@ -66,26 +88,12 @@ function useStepResizeTransition(
     const enteringStep =
       step === "select" ? selectStepRef.current : confirmStepRef.current;
 
-    const start = {
-      height: container.offsetHeight,
-      width: container.offsetWidth,
-    };
+    const start = restingSizeRef.current ?? measure(container);
     container.style.width = "auto";
     container.style.height = "auto";
     enteringStep?.style.removeProperty("width");
     void container.offsetHeight;
-    const end = {
-      height: container.offsetHeight,
-      width: container.offsetWidth,
-    };
-    // eslint-disable-next-line no-console
-    console.log("[BOOKER_RESIZE_DIAG rev=marker-A] measured", {
-      startW: start.width,
-      startH: start.height,
-      endW: end.width,
-      endH: end.height,
-      hasEntering: !!enteringStep,
-    });
+    const end = measure(container);
 
     // Pin the entering step so it can't reflow while the container is clipped.
     if (enteringStep) {
@@ -98,6 +106,7 @@ function useStepResizeTransition(
       "(prefers-reduced-motion: reduce)",
     ).matches;
     const token = ++transitionTokenRef.current;
+    isAnimatingRef.current = true;
     animate(
       container,
       { height: end.height, width: end.width },
@@ -113,6 +122,8 @@ function useStepResizeTransition(
         container.style.width = "";
         container.style.height = "";
         enteringStep?.style.removeProperty("width");
+        restingSizeRef.current = measure(container);
+        isAnimatingRef.current = false;
       })
       .catch(() => {});
   }, [step]);

From f2ae67f0bdafe7846e06e5c9c7af8dda2533771d Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Mon, 6 Jul 2026 21:54:00 +0200
Subject: [PATCH 14/49] simplify motion

---
 apps/ui/registry/default/atoms/booker-1.tsx | 235 +++++++++-----------
 1 file changed, 107 insertions(+), 128 deletions(-)

diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index 1a12e129f..c58bdc22d 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -2,14 +2,13 @@
 
 import { ArrowLeftIcon, Clock3Icon } from "lucide-react";
 import {
-  AnimatePresence,
   animate,
-  domMax,
+  domAnimation,
   LazyMotion,
   MotionConfig,
-  m,
+  useReducedMotion,
 } from "motion/react";
-import { type RefObject, useEffect, useLayoutEffect, useRef } from "react";
+import { type ReactNode, useEffect, useLayoutEffect, useRef } from "react";
 import { Button } from "@/registry/default/ui/button";
 import { Card } from "@/registry/default/ui/card";
 import { Input } from "@/registry/default/ui/input";
@@ -31,8 +30,9 @@ import {
   useBooker,
 } from "@/lib/booker/use-booker";
 
-const TRANSITION_DURATION = 0.45;
-const TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;
+const EASE = [0.32, 0.72, 0, 1] as const;
+const SIZE_TRANSITION = { duration: 0.45, ease: EASE } as const;
+const ENTER_TRANSITION = { delay: 0.1, duration: 0.45, ease: EASE } as const;
 
 const useIsomorphicLayoutEffect =
   typeof window === "undefined" ? useEffect : useLayoutEffect;
@@ -40,35 +40,23 @@ const useIsomorphicLayoutEffect =
 type Size = { width: number; height: number };
 
 const measure = (element: HTMLElement): Size => ({
-  height: element.offsetHeight,
   width: element.offsetWidth,
+  height: element.offsetHeight,
 });
 
-// FLIP: on step change, animate the container's real width/height from its
-// previous box to the entering step's natural box. Animating actual dimensions
-// (not `transform`) resizes the card without scaling or reflowing its content.
-//
-// `popLayout` pulls the outgoing step out of flow before this layout effect
-// runs, so by now the container already reports the *new* size — too late to
-// read the old one from the DOM. A `ResizeObserver` therefore tracks the
-// container's resting size continuously (skipping frames driven by our own
-// animation) so the pre-change size is always available as the FLIP origin.
-function useStepResizeTransition(
-  step: BookerStep,
-  containerRef: RefObject<HTMLDivElement | null>,
-  selectStepRef: RefObject<HTMLDivElement | null>,
-  confirmStepRef: RefObject<HTMLDivElement | null>,
-) {
+// FLIP resize + opacity enter on step change. A ResizeObserver tracks the
+// container's resting size because the new step is already laid out when we run.
+function useStepTransition(step: BookerStep) {
+  const containerRef = useRef<HTMLDivElement>(null);
   const previousStepRef = useRef(step);
   const restingSizeRef = useRef<Size | null>(null);
   const isAnimatingRef = useRef(false);
-  const transitionTokenRef = useRef(0);
+  const reducedMotion = useReducedMotion();
 
   useIsomorphicLayoutEffect(() => {
     const container = containerRef.current;
-    if (!container) {
-      return;
-    }
+    if (!container) return;
+
     const observer = new ResizeObserver(() => {
       if (!isAnimatingRef.current) {
         restingSizeRef.current = measure(container);
@@ -76,17 +64,18 @@ function useStepResizeTransition(
     });
     observer.observe(container);
     return () => observer.disconnect();
-  }, [containerRef]);
+  }, []);
 
   useIsomorphicLayoutEffect(() => {
     const container = containerRef.current;
-    if (!container || previousStepRef.current === step) {
-      return;
-    }
+    if (!container || previousStepRef.current === step) return;
     previousStepRef.current = step;
 
-    const enteringStep =
-      step === "select" ? selectStepRef.current : confirmStepRef.current;
+    const enteringStep = container.firstElementChild as HTMLElement | null;
+
+    if (enteringStep && !reducedMotion) {
+      enteringStep.style.opacity = "0";
+    }
 
     const start = restingSizeRef.current ?? measure(container);
     container.style.width = "auto";
@@ -95,38 +84,59 @@ function useStepResizeTransition(
     void container.offsetHeight;
     const end = measure(container);
 
-    // Pin the entering step so it can't reflow while the container is clipped.
-    if (enteringStep) {
-      enteringStep.style.width = `${end.width}px`;
-    }
+    if (enteringStep) enteringStep.style.width = `${end.width}px`;
     container.style.width = `${start.width}px`;
     container.style.height = `${start.height}px`;
 
-    const prefersReducedMotion = window.matchMedia(
-      "(prefers-reduced-motion: reduce)",
-    ).matches;
-    const token = ++transitionTokenRef.current;
     isAnimatingRef.current = true;
-    animate(
+    const sizeAnimation = animate(
       container,
-      { height: end.height, width: end.width },
-      {
-        duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,
-        ease: TRANSITION_EASE,
-      },
-    )
-      .then(() => {
-        if (token !== transitionTokenRef.current) {
-          return;
-        }
+      { width: end.width, height: end.height },
+      reducedMotion ? { duration: 0 } : SIZE_TRANSITION,
+    );
+    const enterAnimation =
+      enteringStep && !reducedMotion
+        ? animate(enteringStep, { opacity: [0, 1] }, ENTER_TRANSITION)
+        : null;
+
+    void Promise.all([sizeAnimation, enterAnimation ?? Promise.resolve()]).then(
+      () => {
         container.style.width = "";
         container.style.height = "";
         enteringStep?.style.removeProperty("width");
+        enteringStep?.style.removeProperty("opacity");
         restingSizeRef.current = measure(container);
         isAnimatingRef.current = false;
-      })
-      .catch(() => {});
-  }, [step]);
+      },
+    );
+
+    return () => {
+      sizeAnimation.stop();
+      enterAnimation?.stop();
+      isAnimatingRef.current = false;
+    };
+  }, [step, reducedMotion]);
+
+  return containerRef;
+}
+
+function BookerSteps({
+  step,
+  children,
+}: {
+  step: BookerStep;
+  children: ReactNode;
+}) {
+  const containerRef = useStepTransition(step);
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative w-full @3xl:flex-1 overflow-clip"
+    >
+      {children}
+    </div>
+  );
 }
 
 type BookerProps = {
@@ -142,16 +152,6 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
   const t = getBookerLabels(labels);
   const booker = useBooker({ initialData, target, timezone });
 
-  const stepContainerRef = useRef<HTMLDivElement>(null);
-  const selectStepRef = useRef<HTMLDivElement>(null);
-  const confirmStepRef = useRef<HTMLDivElement>(null);
-  useStepResizeTransition(
-    booker.step,
-    stepContainerRef,
-    selectStepRef,
-    confirmStepRef,
-  );
-
   if (booker.error) {
     return (
       <BookerErrorState
@@ -261,70 +261,49 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
             )}
           </div>
         </div>
-        <LazyMotion features={domMax}>
-          <MotionConfig
-            reducedMotion="user"
-            transition={{
-              duration: TRANSITION_DURATION,
-              ease: TRANSITION_EASE,
-            }}
-          >
-            <div
-              ref={stepContainerRef}
-              className="relative w-full @3xl:flex-1 overflow-clip"
-            >
-              <AnimatePresence initial={false} mode="popLayout">
-                {booker.step === "select" ? (
-                  <m.div
-                    key="select"
-                    ref={selectStepRef}
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    className="flex w-full @3xl:flex-row flex-col"
-                  >
-                    {/* Calendar */}
-                    <div className="flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4">
-                      <BookerCalendar {...booker.calendarProps} />
-                    </div>
-                    {/* Time picker */}
-                    <TimePicker
-                      labels={{
-                        hour12Short: t.hour12Short,
-                        hour24Short: t.hour24Short,
-                        noAvailableTimes: t.noAvailableTimes,
-                        noSlotsAvailable: t.noSlotsAvailable,
-                        noSlotsThisDay: t.noSlotsThisDay,
-                        noSlotsThisMonth: t.noSlotsThisMonth,
-                        use24Hour: t.use24Hour,
-                        viewFirstAvailability: t.viewFirstAvailability,
-                      }}
-                      {...booker.timePickerProps}
-                    />
-                  </m.div>
-                ) : (
-                  <m.div
-                    key="confirm"
-                    ref={confirmStepRef}
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    className="@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4"
-                  >
-                    <Button variant="ghost" size="sm" onClick={booker.onBack}>
-                      <ArrowLeftIcon aria-hidden="true" />
-                      Back
-                    </Button>
-                    <Input
-                      autoFocus
-                      className="w-full"
-                      placeholder="Your name"
-                      type="text"
-                    />
-                  </m.div>
-                )}
-              </AnimatePresence>
-            </div>
+        <LazyMotion features={domAnimation}>
+          <MotionConfig reducedMotion="user" transition={SIZE_TRANSITION}>
+            <BookerSteps step={booker.step}>
+              {booker.step === "select" ? (
+                <div
+                  key="select"
+                  className="flex w-full @3xl:flex-row flex-col"
+                >
+                  <div className="flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4">
+                    <BookerCalendar {...booker.calendarProps} />
+                  </div>
+                  <TimePicker
+                    labels={{
+                      hour12Short: t.hour12Short,
+                      hour24Short: t.hour24Short,
+                      noAvailableTimes: t.noAvailableTimes,
+                      noSlotsAvailable: t.noSlotsAvailable,
+                      noSlotsThisDay: t.noSlotsThisDay,
+                      noSlotsThisMonth: t.noSlotsThisMonth,
+                      use24Hour: t.use24Hour,
+                      viewFirstAvailability: t.viewFirstAvailability,
+                    }}
+                    {...booker.timePickerProps}
+                  />
+                </div>
+              ) : (
+                <div
+                  key="confirm"
+                  className="@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4"
+                >
+                  <Button variant="ghost" size="sm" onClick={booker.onBack}>
+                    <ArrowLeftIcon aria-hidden="true" />
+                    Back
+                  </Button>
+                  <Input
+                    autoFocus
+                    className="w-full"
+                    placeholder="Your name"
+                    type="text"
+                  />
+                </div>
+              )}
+            </BookerSteps>
           </MotionConfig>
         </LazyMotion>
       </Card>

From 275237f48cdcc7635e436db7d894ed1cece22abf Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Mon, 6 Jul 2026 21:55:12 +0200
Subject: [PATCH 15/49] remove comments

---
 apps/ui/registry/default/atoms/booker-1.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index c58bdc22d..ffb93cd26 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -44,8 +44,6 @@ const measure = (element: HTMLElement): Size => ({
   height: element.offsetHeight,
 });
 
-// FLIP resize + opacity enter on step change. A ResizeObserver tracks the
-// container's resting size because the new step is already laid out when we run.
 function useStepTransition(step: BookerStep) {
   const containerRef = useRef<HTMLDivElement>(null);
   const previousStepRef = useRef(step);

From bc310f789b020b82edbfab0c24c58e0f77df45e6 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Mon, 6 Jul 2026 21:57:24 +0200
Subject: [PATCH 16/49] more optimisations

---
 apps/ui/registry/default/atoms/booker-1.tsx   | 219 ++++--------------
 .../default/atoms/booker/booker-steps.tsx     | 122 ++++++++++
 apps/ui/registry/registry-atoms.ts            |   5 +
 3 files changed, 174 insertions(+), 172 deletions(-)
 create mode 100644 apps/ui/registry/default/atoms/booker/booker-steps.tsx

diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index ffb93cd26..ae6da83ab 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -1,14 +1,7 @@
 "use client";
 
 import { ArrowLeftIcon, Clock3Icon } from "lucide-react";
-import {
-  animate,
-  domAnimation,
-  LazyMotion,
-  MotionConfig,
-  useReducedMotion,
-} from "motion/react";
-import { type ReactNode, useEffect, useLayoutEffect, useRef } from "react";
+import { cn } from "@/registry/default/lib/utils";
 import { Button } from "@/registry/default/ui/button";
 import { Card } from "@/registry/default/ui/card";
 import { Input } from "@/registry/default/ui/input";
@@ -17,6 +10,7 @@ import { BookerAvatars } from "./booker/booker-avatars";
 import { BookerCalendar } from "./booker/booker-calendar";
 import { BookerErrorState } from "./booker/booker-error-state";
 import { type BookerLabels, getBookerLabels } from "./booker/booker-labels";
+import { BookerSteps } from "./booker/booker-steps";
 import { DurationPicker } from "./booker/duration-picker";
 import { EventDescription } from "./booker/event-description";
 import { HeaderBanner } from "./booker/header-banner";
@@ -24,118 +18,7 @@ import { Location } from "./booker/location";
 import { TimePicker } from "./booker/time-picker";
 import { TimezonePicker } from "./booker/timezone-picker";
 import type { BookerTarget } from "@/lib/booker/target";
-import {
-  type BookerInitialData,
-  type BookerStep,
-  useBooker,
-} from "@/lib/booker/use-booker";
-
-const EASE = [0.32, 0.72, 0, 1] as const;
-const SIZE_TRANSITION = { duration: 0.45, ease: EASE } as const;
-const ENTER_TRANSITION = { delay: 0.1, duration: 0.45, ease: EASE } as const;
-
-const useIsomorphicLayoutEffect =
-  typeof window === "undefined" ? useEffect : useLayoutEffect;
-
-type Size = { width: number; height: number };
-
-const measure = (element: HTMLElement): Size => ({
-  width: element.offsetWidth,
-  height: element.offsetHeight,
-});
-
-function useStepTransition(step: BookerStep) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const previousStepRef = useRef(step);
-  const restingSizeRef = useRef<Size | null>(null);
-  const isAnimatingRef = useRef(false);
-  const reducedMotion = useReducedMotion();
-
-  useIsomorphicLayoutEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const observer = new ResizeObserver(() => {
-      if (!isAnimatingRef.current) {
-        restingSizeRef.current = measure(container);
-      }
-    });
-    observer.observe(container);
-    return () => observer.disconnect();
-  }, []);
-
-  useIsomorphicLayoutEffect(() => {
-    const container = containerRef.current;
-    if (!container || previousStepRef.current === step) return;
-    previousStepRef.current = step;
-
-    const enteringStep = container.firstElementChild as HTMLElement | null;
-
-    if (enteringStep && !reducedMotion) {
-      enteringStep.style.opacity = "0";
-    }
-
-    const start = restingSizeRef.current ?? measure(container);
-    container.style.width = "auto";
-    container.style.height = "auto";
-    enteringStep?.style.removeProperty("width");
-    void container.offsetHeight;
-    const end = measure(container);
-
-    if (enteringStep) enteringStep.style.width = `${end.width}px`;
-    container.style.width = `${start.width}px`;
-    container.style.height = `${start.height}px`;
-
-    isAnimatingRef.current = true;
-    const sizeAnimation = animate(
-      container,
-      { width: end.width, height: end.height },
-      reducedMotion ? { duration: 0 } : SIZE_TRANSITION,
-    );
-    const enterAnimation =
-      enteringStep && !reducedMotion
-        ? animate(enteringStep, { opacity: [0, 1] }, ENTER_TRANSITION)
-        : null;
-
-    void Promise.all([sizeAnimation, enterAnimation ?? Promise.resolve()]).then(
-      () => {
-        container.style.width = "";
-        container.style.height = "";
-        enteringStep?.style.removeProperty("width");
-        enteringStep?.style.removeProperty("opacity");
-        restingSizeRef.current = measure(container);
-        isAnimatingRef.current = false;
-      },
-    );
-
-    return () => {
-      sizeAnimation.stop();
-      enterAnimation?.stop();
-      isAnimatingRef.current = false;
-    };
-  }, [step, reducedMotion]);
-
-  return containerRef;
-}
-
-function BookerSteps({
-  step,
-  children,
-}: {
-  step: BookerStep;
-  children: ReactNode;
-}) {
-  const containerRef = useStepTransition(step);
-
-  return (
-    <div
-      ref={containerRef}
-      className="relative w-full @3xl:flex-1 overflow-clip"
-    >
-      {children}
-    </div>
-  );
-}
+import { type BookerInitialData, useBooker } from "@/lib/booker/use-booker";
 
 type BookerProps = {
   target: BookerTarget;
@@ -164,12 +47,6 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
   const headerImageAlt = displayMeta
     ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)
     : "Booker header";
-  const metaContentClassName = [
-    displayMeta?.eventTypeImageUrl ? "relative -mt-11 @5xl:-mt-13" : "",
-    "flex flex-col gap-6 @5xl:p-6 p-4",
-  ]
-    .filter(Boolean)
-    .join(" ");
 
   return (
     <div
@@ -183,7 +60,12 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
             alt={headerImageAlt}
             src={displayMeta?.eventTypeImageUrl}
           />
-          <div className={metaContentClassName}>
+          <div
+            className={cn(
+              "flex flex-col gap-6 @5xl:p-6 p-4",
+              displayMeta?.eventTypeImageUrl && "relative -mt-11 @5xl:-mt-13",
+            )}
+          >
             <div className="flex flex-col gap-4">
               <div className="flex flex-col gap-2">
                 <BookerAvatars
@@ -259,51 +141,44 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
             )}
           </div>
         </div>
-        <LazyMotion features={domAnimation}>
-          <MotionConfig reducedMotion="user" transition={SIZE_TRANSITION}>
-            <BookerSteps step={booker.step}>
-              {booker.step === "select" ? (
-                <div
-                  key="select"
-                  className="flex w-full @3xl:flex-row flex-col"
-                >
-                  <div className="flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4">
-                    <BookerCalendar {...booker.calendarProps} />
-                  </div>
-                  <TimePicker
-                    labels={{
-                      hour12Short: t.hour12Short,
-                      hour24Short: t.hour24Short,
-                      noAvailableTimes: t.noAvailableTimes,
-                      noSlotsAvailable: t.noSlotsAvailable,
-                      noSlotsThisDay: t.noSlotsThisDay,
-                      noSlotsThisMonth: t.noSlotsThisMonth,
-                      use24Hour: t.use24Hour,
-                      viewFirstAvailability: t.viewFirstAvailability,
-                    }}
-                    {...booker.timePickerProps}
-                  />
-                </div>
-              ) : (
-                <div
-                  key="confirm"
-                  className="@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4"
-                >
-                  <Button variant="ghost" size="sm" onClick={booker.onBack}>
-                    <ArrowLeftIcon aria-hidden="true" />
-                    Back
-                  </Button>
-                  <Input
-                    autoFocus
-                    className="w-full"
-                    placeholder="Your name"
-                    type="text"
-                  />
-                </div>
-              )}
-            </BookerSteps>
-          </MotionConfig>
-        </LazyMotion>
+        <BookerSteps step={booker.step}>
+          {booker.step === "select" ? (
+            <div key="select" className="flex w-full @3xl:flex-row flex-col">
+              <div className="flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4">
+                <BookerCalendar {...booker.calendarProps} />
+              </div>
+              <TimePicker
+                labels={{
+                  hour12Short: t.hour12Short,
+                  hour24Short: t.hour24Short,
+                  noAvailableTimes: t.noAvailableTimes,
+                  noSlotsAvailable: t.noSlotsAvailable,
+                  noSlotsThisDay: t.noSlotsThisDay,
+                  noSlotsThisMonth: t.noSlotsThisMonth,
+                  use24Hour: t.use24Hour,
+                  viewFirstAvailability: t.viewFirstAvailability,
+                }}
+                {...booker.timePickerProps}
+              />
+            </div>
+          ) : (
+            <div
+              key="confirm"
+              className="@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4"
+            >
+              <Button variant="ghost" size="sm" onClick={booker.onBack}>
+                <ArrowLeftIcon aria-hidden="true" />
+                Back
+              </Button>
+              <Input
+                autoFocus
+                className="w-full"
+                placeholder="Your name"
+                type="text"
+              />
+            </div>
+          )}
+        </BookerSteps>
       </Card>
       <a
         href="https://cal.com"
diff --git a/apps/ui/registry/default/atoms/booker/booker-steps.tsx b/apps/ui/registry/default/atoms/booker/booker-steps.tsx
new file mode 100644
index 000000000..cd2018d0f
--- /dev/null
+++ b/apps/ui/registry/default/atoms/booker/booker-steps.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import {
+  animate,
+  domAnimation,
+  LazyMotion,
+  MotionConfig,
+  useReducedMotion,
+} from "motion/react";
+import { type ReactNode, useEffect, useLayoutEffect, useRef } from "react";
+import type { BookerStep } from "@/lib/booker/use-booker";
+
+const EASE = [0.32, 0.72, 0, 1] as const;
+const SIZE_TRANSITION = { duration: 0.45, ease: EASE } as const;
+const ENTER_TRANSITION = { delay: 0.1, duration: 0.45, ease: EASE } as const;
+
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+type Size = { width: number; height: number };
+
+const measure = (element: HTMLElement): Size => ({
+  width: element.offsetWidth,
+  height: element.offsetHeight,
+});
+
+function useStepTransition(step: BookerStep) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const previousStepRef = useRef(step);
+  const restingSizeRef = useRef<Size | null>(null);
+  const isAnimatingRef = useRef(false);
+  const reducedMotion = useReducedMotion();
+
+  useIsomorphicLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new ResizeObserver(() => {
+      if (!isAnimatingRef.current) {
+        restingSizeRef.current = measure(container);
+      }
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
+  useIsomorphicLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container || previousStepRef.current === step) return;
+    previousStepRef.current = step;
+
+    const enteringStep = container.firstElementChild as HTMLElement | null;
+
+    if (enteringStep && !reducedMotion) {
+      enteringStep.style.opacity = "0";
+    }
+
+    const start = restingSizeRef.current ?? measure(container);
+    container.style.width = "auto";
+    container.style.height = "auto";
+    enteringStep?.style.removeProperty("width");
+    void container.offsetHeight;
+    const end = measure(container);
+
+    if (enteringStep) enteringStep.style.width = `${end.width}px`;
+    container.style.width = `${start.width}px`;
+    container.style.height = `${start.height}px`;
+
+    isAnimatingRef.current = true;
+    const sizeAnimation = animate(
+      container,
+      { width: end.width, height: end.height },
+      reducedMotion ? { duration: 0 } : SIZE_TRANSITION,
+    );
+    const enterAnimation =
+      enteringStep && !reducedMotion
+        ? animate(enteringStep, { opacity: [0, 1] }, ENTER_TRANSITION)
+        : null;
+
+    void Promise.all([sizeAnimation, enterAnimation ?? Promise.resolve()]).then(
+      () => {
+        container.style.width = "";
+        container.style.height = "";
+        enteringStep?.style.removeProperty("width");
+        enteringStep?.style.removeProperty("opacity");
+        restingSizeRef.current = measure(container);
+        isAnimatingRef.current = false;
+      },
+    );
+
+    return () => {
+      sizeAnimation.stop();
+      enterAnimation?.stop();
+      isAnimatingRef.current = false;
+    };
+  }, [step, reducedMotion]);
+
+  return containerRef;
+}
+
+export function BookerSteps({
+  step,
+  children,
+}: {
+  step: BookerStep;
+  children: ReactNode;
+}) {
+  const containerRef = useStepTransition(step);
+
+  return (
+    <LazyMotion features={domAnimation}>
+      <MotionConfig reducedMotion="user" transition={SIZE_TRANSITION}>
+        <div
+          ref={containerRef}
+          className="relative w-full @3xl:flex-1 overflow-clip"
+        >
+          {children}
+        </div>
+      </MotionConfig>
+    </LazyMotion>
+  );
+}
diff --git a/apps/ui/registry/registry-atoms.ts b/apps/ui/registry/registry-atoms.ts
index 5689acf61..cebcdefb1 100644
--- a/apps/ui/registry/registry-atoms.ts
+++ b/apps/ui/registry/registry-atoms.ts
@@ -24,6 +24,11 @@ export const atoms: AtomItem[] = [
         target: "components/atoms/booker-1.tsx",
         type: "registry:block",
       },
+      {
+        path: "atoms/booker/booker-steps.tsx",
+        target: "components/atoms/booker/booker-steps.tsx",
+        type: "registry:component",
+      },
       {
         path: "atoms/booker/booker-calendar.tsx",
         target: "components/atoms/booker/booker-calendar.tsx",

From 7fed84a8b6de346d0cb3e5474c530c5245da0492 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Mon, 6 Jul 2026 21:58:06 +0200
Subject: [PATCH 17/49] mc

---
 apps/ui/registry/default/atoms/booker/booker-steps.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/registry/default/atoms/booker/booker-steps.tsx b/apps/ui/registry/default/atoms/booker/booker-steps.tsx
index cd2018d0f..28ce3be1b 100644
--- a/apps/ui/registry/default/atoms/booker/booker-steps.tsx
+++ b/apps/ui/registry/default/atoms/booker/booker-steps.tsx
@@ -12,7 +12,7 @@ import type { BookerStep } from "@/lib/booker/use-booker";
 
 const EASE = [0.32, 0.72, 0, 1] as const;
 const SIZE_TRANSITION = { duration: 0.45, ease: EASE } as const;
-const ENTER_TRANSITION = { delay: 0.1, duration: 0.45, ease: EASE } as const;
+const ENTER_TRANSITION = { delay: 0.05, duration: 0.55, ease: EASE } as const;
 
 const useIsomorphicLayoutEffect =
   typeof window === "undefined" ? useEffect : useLayoutEffect;

From 96723c3b385542627896ba1a6902e52ae8e48f62 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Mon, 6 Jul 2026 21:58:20 +0200
Subject: [PATCH 18/49] build reg

---
 apps/ui/public/r/booker-1.json | 8 +++++++-
 apps/ui/public/r/registry.json | 5 +++++
 apps/ui/registry.json          | 5 +++++
 apps/ui/registry/__index__.tsx | 4 ++++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index c70864987..0ac484286 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -27,10 +27,16 @@
   "files": [
     {
       "path": "registry/default/atoms/booker-1.tsx",
-      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport {\n  AnimatePresence,\n  animate,\n  domMax,\n  LazyMotion,\n  MotionConfig,\n  m,\n} from \"motion/react\";\nimport { type RefObject, useEffect, useLayoutEffect, useRef } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport {\n  type BookerInitialData,\n  type BookerStep,\n  useBooker,\n} from \"@/lib/booker/use-booker\";\n\nconst TRANSITION_DURATION = 0.45;\nconst TRANSITION_EASE = [0.32, 0.72, 0, 1] as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\ntype Size = { width: number; height: number };\n\nconst measure = (element: HTMLElement): Size => ({\n  height: element.offsetHeight,\n  width: element.offsetWidth,\n});\n\n// FLIP: on step change, animate the container's real width/height from its\n// previous box to the entering step's natural box. Animating actual dimensions\n// (not `transform`) resizes the card without scaling or reflowing its content.\n//\n// `popLayout` pulls the outgoing step out of flow before this layout effect\n// runs, so by now the container already reports the *new* size — too late to\n// read the old one from the DOM. A `ResizeObserver` therefore tracks the\n// container's resting size continuously (skipping frames driven by our own\n// animation) so the pre-change size is always available as the FLIP origin.\nfunction useStepResizeTransition(\n  step: BookerStep,\n  containerRef: RefObject<HTMLDivElement | null>,\n  selectStepRef: RefObject<HTMLDivElement | null>,\n  confirmStepRef: RefObject<HTMLDivElement | null>,\n) {\n  const previousStepRef = useRef(step);\n  const restingSizeRef = useRef<Size | null>(null);\n  const isAnimatingRef = useRef(false);\n  const transitionTokenRef = useRef(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n    const observer = new ResizeObserver(() => {\n      if (!isAnimatingRef.current) {\n        restingSizeRef.current = measure(container);\n      }\n    });\n    observer.observe(container);\n    return () => observer.disconnect();\n  }, [containerRef]);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container || previousStepRef.current === step) {\n      return;\n    }\n    previousStepRef.current = step;\n\n    const enteringStep =\n      step === \"select\" ? selectStepRef.current : confirmStepRef.current;\n\n    const start = restingSizeRef.current ?? measure(container);\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = measure(container);\n\n    // Pin the entering step so it can't reflow while the container is clipped.\n    if (enteringStep) {\n      enteringStep.style.width = `${end.width}px`;\n    }\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    const token = ++transitionTokenRef.current;\n    isAnimatingRef.current = true;\n    animate(\n      container,\n      { height: end.height, width: end.width },\n      {\n        duration: prefersReducedMotion ? 0 : TRANSITION_DURATION,\n        ease: TRANSITION_EASE,\n      },\n    )\n      .then(() => {\n        if (token !== transitionTokenRef.current) {\n          return;\n        }\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n        restingSizeRef.current = measure(container);\n        isAnimatingRef.current = false;\n      })\n      .catch(() => {});\n  }, [step]);\n}\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  const stepContainerRef = useRef<HTMLDivElement>(null);\n  const selectStepRef = useRef<HTMLDivElement>(null);\n  const confirmStepRef = useRef<HTMLDivElement>(null);\n  useStepResizeTransition(\n    booker.step,\n    stepContainerRef,\n    selectStepRef,\n    confirmStepRef,\n  );\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n  const metaContentClassName = [\n    displayMeta?.eventTypeImageUrl ? \"relative -mt-11 @5xl:-mt-13\" : \"\",\n    \"flex flex-col gap-6 @5xl:p-6 p-4\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div className={metaContentClassName}>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <LazyMotion features={domMax}>\n          <MotionConfig\n            reducedMotion=\"user\"\n            transition={{\n              duration: TRANSITION_DURATION,\n              ease: TRANSITION_EASE,\n            }}\n          >\n            <div\n              ref={stepContainerRef}\n              className=\"relative w-full @3xl:flex-1 overflow-clip\"\n            >\n              <AnimatePresence initial={false} mode=\"popLayout\">\n                {booker.step === \"select\" ? (\n                  <m.div\n                    key=\"select\"\n                    ref={selectStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex w-full @3xl:flex-row flex-col\"\n                  >\n                    {/* Calendar */}\n                    <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                      <BookerCalendar {...booker.calendarProps} />\n                    </div>\n                    {/* Time picker */}\n                    <TimePicker\n                      labels={{\n                        hour12Short: t.hour12Short,\n                        hour24Short: t.hour24Short,\n                        noAvailableTimes: t.noAvailableTimes,\n                        noSlotsAvailable: t.noSlotsAvailable,\n                        noSlotsThisDay: t.noSlotsThisDay,\n                        noSlotsThisMonth: t.noSlotsThisMonth,\n                        use24Hour: t.use24Hour,\n                        viewFirstAvailability: t.viewFirstAvailability,\n                      }}\n                      {...booker.timePickerProps}\n                    />\n                  </m.div>\n                ) : (\n                  <m.div\n                    key=\"confirm\"\n                    ref={confirmStepRef}\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n                  >\n                    <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                      <ArrowLeftIcon aria-hidden=\"true\" />\n                      Back\n                    </Button>\n                    <Input\n                      autoFocus\n                      className=\"w-full\"\n                      placeholder=\"Your name\"\n                      type=\"text\"\n                    />\n                  </m.div>\n                )}\n              </AnimatePresence>\n            </div>\n          </MotionConfig>\n        </LazyMotion>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
+      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { BookerSteps } from \"./booker/booker-steps\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div\n            className={cn(\n              \"flex flex-col gap-6 @5xl:p-6 p-4\",\n              displayMeta?.eventTypeImageUrl && \"relative -mt-11 @5xl:-mt-13\",\n            )}\n          >\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <BookerSteps step={booker.step}>\n          {booker.step === \"select\" ? (\n            <div key=\"select\" className=\"flex w-full @3xl:flex-row flex-col\">\n              <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                <BookerCalendar {...booker.calendarProps} />\n              </div>\n              <TimePicker\n                labels={{\n                  hour12Short: t.hour12Short,\n                  hour24Short: t.hour24Short,\n                  noAvailableTimes: t.noAvailableTimes,\n                  noSlotsAvailable: t.noSlotsAvailable,\n                  noSlotsThisDay: t.noSlotsThisDay,\n                  noSlotsThisMonth: t.noSlotsThisMonth,\n                  use24Hour: t.use24Hour,\n                  viewFirstAvailability: t.viewFirstAvailability,\n                }}\n                {...booker.timePickerProps}\n              />\n            </div>\n          ) : (\n            <div\n              key=\"confirm\"\n              className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n            >\n              <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                <ArrowLeftIcon aria-hidden=\"true\" />\n                Back\n              </Button>\n              <Input\n                autoFocus\n                className=\"w-full\"\n                placeholder=\"Your name\"\n                type=\"text\"\n              />\n            </div>\n          )}\n        </BookerSteps>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
       "type": "registry:block",
       "target": "components/atoms/booker-1.tsx"
     },
+    {
+      "path": "registry/default/atoms/booker/booker-steps.tsx",
+      "content": "\"use client\";\n\nimport {\n  animate,\n  domAnimation,\n  LazyMotion,\n  MotionConfig,\n  useReducedMotion,\n} from \"motion/react\";\nimport { type ReactNode, useEffect, useLayoutEffect, useRef } from \"react\";\nimport type { BookerStep } from \"@/lib/booker/use-booker\";\n\nconst EASE = [0.32, 0.72, 0, 1] as const;\nconst SIZE_TRANSITION = { duration: 0.45, ease: EASE } as const;\nconst ENTER_TRANSITION = { delay: 0.05, duration: 0.55, ease: EASE } as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\ntype Size = { width: number; height: number };\n\nconst measure = (element: HTMLElement): Size => ({\n  width: element.offsetWidth,\n  height: element.offsetHeight,\n});\n\nfunction useStepTransition(step: BookerStep) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const previousStepRef = useRef(step);\n  const restingSizeRef = useRef<Size | null>(null);\n  const isAnimatingRef = useRef(false);\n  const reducedMotion = useReducedMotion();\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const observer = new ResizeObserver(() => {\n      if (!isAnimatingRef.current) {\n        restingSizeRef.current = measure(container);\n      }\n    });\n    observer.observe(container);\n    return () => observer.disconnect();\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container || previousStepRef.current === step) return;\n    previousStepRef.current = step;\n\n    const enteringStep = container.firstElementChild as HTMLElement | null;\n\n    if (enteringStep && !reducedMotion) {\n      enteringStep.style.opacity = \"0\";\n    }\n\n    const start = restingSizeRef.current ?? measure(container);\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = measure(container);\n\n    if (enteringStep) enteringStep.style.width = `${end.width}px`;\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    isAnimatingRef.current = true;\n    const sizeAnimation = animate(\n      container,\n      { width: end.width, height: end.height },\n      reducedMotion ? { duration: 0 } : SIZE_TRANSITION,\n    );\n    const enterAnimation =\n      enteringStep && !reducedMotion\n        ? animate(enteringStep, { opacity: [0, 1] }, ENTER_TRANSITION)\n        : null;\n\n    void Promise.all([sizeAnimation, enterAnimation ?? Promise.resolve()]).then(\n      () => {\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n        enteringStep?.style.removeProperty(\"opacity\");\n        restingSizeRef.current = measure(container);\n        isAnimatingRef.current = false;\n      },\n    );\n\n    return () => {\n      sizeAnimation.stop();\n      enterAnimation?.stop();\n      isAnimatingRef.current = false;\n    };\n  }, [step, reducedMotion]);\n\n  return containerRef;\n}\n\nexport function BookerSteps({\n  step,\n  children,\n}: {\n  step: BookerStep;\n  children: ReactNode;\n}) {\n  const containerRef = useStepTransition(step);\n\n  return (\n    <LazyMotion features={domAnimation}>\n      <MotionConfig reducedMotion=\"user\" transition={SIZE_TRANSITION}>\n        <div\n          ref={containerRef}\n          className=\"relative w-full @3xl:flex-1 overflow-clip\"\n        >\n          {children}\n        </div>\n      </MotionConfig>\n    </LazyMotion>\n  );\n}\n",
+      "type": "registry:component",
+      "target": "components/atoms/booker/booker-steps.tsx"
+    },
     {
       "path": "registry/default/atoms/booker/booker-calendar.tsx",
       "content": "\"use client\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipCreateHandle,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\n// A single shared tooltip reused across every day cell (via the handle/payload\n// pattern). Reusing one instance lets it gracefully move/scale between days\n// instead of mounting a separate tooltip per cell.\nconst monthTooltipHandle = TooltipCreateHandle<string>();\n\n// Falls back to English (US) when no `locale` prop is provided.\nconst DEFAULT_LOCALE = \"en-US\";\n\ntype CalendarLabels = {\n  /** ARIA label for the previous-month navigation button. */\n  previousMonth: string;\n  /** ARIA label for the next-month navigation button. */\n  nextMonth: string;\n  /** ARIA label for the navigation toolbar. */\n  nav: string;\n  /** Prefix for today's day button label, e.g. \"Today, Monday, …\". */\n  today: string;\n  /** Suffix for the selected day button label, e.g. \"…, selected\". */\n  selected: string;\n};\n\n// English defaults. Localize by passing translated strings via the `labels`\n// prop (wire it up to your app's own i18n layer); date/weekday/month names are\n// still localized automatically from `locale` via `Intl`.\nconst DEFAULT_LABELS: CalendarLabels = {\n  previousMonth: \"Go to the Previous Month\",\n  nextMonth: \"Go to the Next Month\",\n  nav: \"Navigation bar\",\n  today: \"Today\",\n  selected: \"selected\",\n};\n\n// Resolves the text direction for the locale (e.g. \"rtl\" for Arabic/Hebrew).\nfunction getTextDirection(locale: string): \"ltr\" | \"rtl\" {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      textInfo?: { direction?: string };\n      getTextInfo?: () => { direction?: string };\n    };\n    const info =\n      typeof localeObj.getTextInfo === \"function\"\n        ? localeObj.getTextInfo()\n        : localeObj.textInfo;\n    if (info?.direction === \"rtl\") {\n      return \"rtl\";\n    }\n  } catch {\n    // Fall through to the ltr default below.\n  }\n  return \"ltr\";\n}\n\n// Locale-aware formatting/ordering, derived from a BCP-47 locale string.\ntype Localization = {\n  weekStartsOn: number;\n  monthYearLabel: (date: Date) => string;\n  fullDateLabel: (date: Date) => string;\n  monthShortLabel: (date: Date) => string;\n  monthLongLabel: (date: Date) => string;\n  weekdayLong: (date: Date) => string;\n  weekdayShort: (date: Date) => string;\n  dayNumber: (date: Date) => string;\n  captionFormatter: Intl.DateTimeFormat;\n};\n\n// 1 = Monday … 7 = Sunday (ISO) → JS getDay() index (0 = Sunday … 6 = Saturday).\nfunction getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction buildLocalization(\n  locale: string,\n  weekStartsOnOverride?: number,\n): Localization {\n  const longDateFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n    year: \"numeric\",\n    month: \"long\",\n    day: \"numeric\",\n  });\n  const monthYearFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n    year: \"numeric\",\n  });\n  const monthShortFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  });\n  const monthLongFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n  });\n  const weekdayLongFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n  });\n  const weekdayShortFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  });\n  const dayFormatter = new Intl.DateTimeFormat(locale, { day: \"numeric\" });\n\n  return {\n    weekStartsOn: weekStartsOnOverride ?? getWeekStartsOn(locale),\n    monthYearLabel: (date) => monthYearFormatter.format(date),\n    fullDateLabel: (date) => longDateFormatter.format(date),\n    monthShortLabel: (date) => monthShortFormatter.format(date),\n    monthLongLabel: (date) => monthLongFormatter.format(date),\n    weekdayLong: (date) => weekdayLongFormatter.format(date),\n    weekdayShort: (date) => weekdayShortFormatter.format(date),\n    dayNumber: (date) => dayFormatter.format(date),\n    captionFormatter: monthYearFormatter,\n  };\n}\n\nfunction pad2(value: number): string {\n  return value < 10 ? `0${value}` : String(value);\n}\n\nfunction isoDate(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;\n}\n\nfunction isoMonth(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}`;\n}\n\nfunction startOfDay(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n}\n\nfunction startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction addDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction addMonths(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth() + amount, date.getDate());\n}\n\nfunction startOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = startOfDay(date);\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return addDays(day, -diff);\n}\n\nfunction endOfWeek(date: Date, weekStartsOn = 0): Date {\n  return addDays(startOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nfunction isSameMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nfunction differenceInCalendarMonths(a: Date, b: Date): number {\n  return (\n    (a.getFullYear() - b.getFullYear()) * 12 + (a.getMonth() - b.getMonth())\n  );\n}\n\ntype CalendarDay = {\n  date: Date;\n  outside: boolean;\n  isoDate: string;\n  dateMonthId: string;\n};\n\ntype DayModifiers = {\n  focused: boolean;\n  disabled: boolean;\n  hidden: boolean;\n  outside: boolean;\n  today: boolean;\n  selected: boolean;\n};\n\n// Builds the month grid as full weeks covering the month.\n//\n// `shiftRows` slides the window forward by that many weeks, dropping the\n// month's earliest week(s). When `fillToSix` is set the grid is then padded to\n// a full 6 rows with days from the next month. Together they keep today's week\n// plus the next two visible without exceeding 6 rows; with both at their\n// defaults the month spans only the weeks it naturally needs.\nfunction buildCalendarDays(\n  month: Date,\n  weekStartsOn: number,\n  shiftRows: number,\n  fillToSix: boolean,\n): CalendarDay[] {\n  const monthStart = startOfMonth(month);\n  const offset = shiftRows * 7;\n  const gridStart = addDays(startOfWeek(monthStart, weekStartsOn), offset);\n  const gridEnd = addDays(endOfWeek(endOfMonth(month), weekStartsOn), offset);\n\n  const dates: Date[] = [];\n  for (let cursor = gridStart; cursor <= gridEnd; cursor = addDays(cursor, 1)) {\n    dates.push(cursor);\n  }\n\n  if (fillToSix) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(addDays(lastDate, 1));\n    }\n  }\n\n  return dates.map((date) => ({\n    date,\n    outside: !isSameMonth(date, month),\n    isoDate: isoDate(date),\n    dateMonthId: isoMonth(date),\n  }));\n}\n\nfunction chunkWeeks(days: CalendarDay[]): CalendarDay[][] {\n  const weeks: CalendarDay[][] = [];\n  for (let i = 0; i < days.length; i += 7) {\n    weeks.push(days.slice(i, i + 7));\n  }\n  return weeks;\n}\n\nfunction isFocusableDay(modifiers: DayModifiers): boolean {\n  return !modifiers.disabled && !modifiers.hidden && !modifiers.outside;\n}\n\n// A single day cell's button. Focuses itself when it becomes the roving-tabindex\n// target so keyboard navigation moves the actual DOM focus.\nfunction DayButton({\n  focused,\n  nextMonthLabel,\n  tooltip,\n  children,\n  ...buttonProps\n}: ComponentProps<\"button\"> & {\n  focused: boolean;\n  nextMonthLabel?: string;\n  tooltip?: string;\n}): ReactElement {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (focused) ref.current?.focus();\n  }, [focused]);\n\n  const button = (\n    <button ref={ref} {...buttonProps}>\n      {children}\n      {nextMonthLabel ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute @5xl:end-1.5 end-1 @3xl:top-1.5 top-1 font-medium in-data-selected:text-primary-foreground/72 text-[10px] text-muted-foreground leading-none\"\n        >\n          {nextMonthLabel}\n        </span>\n      ) : null}\n    </button>\n  );\n\n  if (!tooltip) return button;\n\n  return (\n    <TooltipTrigger\n      handle={monthTooltipHandle}\n      payload={tooltip}\n      render={button}\n    />\n  );\n}\n\n// Month + year heading; the year is muted via formatToParts so it stays\n// locale-correct (some locales render \"2026 June\").\nfunction MonthCaption({\n  date,\n  formatter,\n  className,\n}: {\n  date: Date;\n  formatter: Intl.DateTimeFormat;\n  className?: string;\n}): ReactElement {\n  return (\n    <div\n      className={cn(\n        \"@5xl:ps-1 font-heading @3xl:@max-5xl:text-base text-lg\",\n        className,\n      )}\n    >\n      {formatter.formatToParts(date).map((part) =>\n        part.type === \"year\" ? (\n          <span key={`year-${part.value}`} className=\"text-muted-foreground/72\">\n            {part.value}\n          </span>\n        ) : (\n          part.value\n        ),\n      )}\n    </div>\n  );\n}\n\ntype MoveBy = \"day\" | \"week\" | \"month\" | \"year\" | \"startOfWeek\" | \"endOfWeek\";\ntype MoveDir = \"before\" | \"after\";\n\nexport type BookerCalendarProps = {\n  className?: string;\n  /**\n   * For the current month, once today reaches the 4th row, keep its week plus\n   * the next two visible within the 6-row grid: extend into next-month days,\n   * and slide the window down (dropping early weeks) only when today sits too\n   * low for those two weeks to fit. Off renders a plain month grid. On by\n   * default.\n   */\n  shiftWeeks?: boolean;\n  availabilityLoading?: boolean;\n  initialLoading?: boolean;\n  month?: Date;\n  defaultMonth?: Date;\n  startMonth?: Date;\n  endMonth?: Date;\n  selected?: Date;\n  onSelect?: (date: Date | undefined, triggerDate: Date) => void;\n  onMonthChange?: (month: Date) => void;\n  disabled?: (date: Date) => boolean;\n  /** BCP-47 locale tag used to localize day/month/weekday names and ARIA labels. */\n  locale?: string;\n  /** Override the locale's first day of the week (0 = Sunday … 6 = Saturday). */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /** Text direction; defaults to the locale's direction (\"rtl\" for ar/he/…). */\n  dir?: \"ltr\" | \"rtl\";\n  /** Translatable strings for the navigation buttons and day button states. */\n  labels?: Partial<CalendarLabels>;\n  /** Reference \"today\" for highlighting and week shifting; defaults to now. */\n  today?: Date;\n};\n\nexport function BookerCalendar({\n  className,\n  shiftWeeks = true,\n  availabilityLoading = false,\n  initialLoading = false,\n  month,\n  defaultMonth,\n  startMonth,\n  endMonth,\n  selected,\n  onSelect,\n  onMonthChange,\n  disabled,\n  locale = DEFAULT_LOCALE,\n  weekStartsOn,\n  dir,\n  labels,\n  today: todayProp,\n}: BookerCalendarProps): ReactElement {\n  const dayCellsLoading = initialLoading || availabilityLoading;\n  const localization = useMemo(\n    () => buildLocalization(locale, weekStartsOn),\n    [locale, weekStartsOn],\n  );\n  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };\n  const resolvedDir = dir ?? getTextDirection(locale);\n  const weekStart = localization.weekStartsOn;\n\n  const today = todayProp ?? new Date();\n\n  // The month is controlled by the parent (via `month`/`onMonthChange`), but we\n  // keep an internal fallback so the calendar works uncontrolled too.\n  const [internalMonth, setInternalMonth] = useState(() =>\n    startOfMonth(month ?? defaultMonth ?? today),\n  );\n  const monthTime = month ? startOfMonth(month).getTime() : undefined;\n  useEffect(() => {\n    if (monthTime !== undefined) {\n      setInternalMonth(new Date(monthTime));\n    }\n  }, [monthTime]);\n\n  const firstMonth = month ? startOfMonth(month) : internalMonth;\n\n  const [focusedDate, setFocusedDate] = useState<Date | undefined>(undefined);\n  const [lastFocusedDate, setLastFocusedDate] = useState<Date | undefined>(\n    undefined,\n  );\n\n  const navStart = startMonth ? startOfMonth(startMonth) : undefined;\n  const navEnd = endMonth ? startOfMonth(endMonth) : undefined;\n\n  const previousMonth =\n    navStart && differenceInCalendarMonths(firstMonth, navStart) <= 0\n      ? undefined\n      : addMonths(firstMonth, -1);\n  const nextMonth =\n    navEnd && differenceInCalendarMonths(navEnd, firstMonth) <= 0\n      ? undefined\n      : addMonths(firstMonth, 1);\n\n  const goToMonth = useCallback(\n    (date: Date) => {\n      let newMonth = startOfMonth(date);\n      if (navStart && newMonth < navStart) {\n        newMonth = navStart;\n      }\n      if (navEnd && newMonth > navEnd) {\n        newMonth = navEnd;\n      }\n      setInternalMonth(newMonth);\n      onMonthChange?.(newMonth);\n    },\n    [navEnd, navStart, onMonthChange],\n  );\n\n  // For the live current month, once today reaches the 4th row, guarantee its\n  // week plus the next two are visible. todayRow is today's 0-based row in the\n  // natural (unshifted) grid.\n  const naturalGridStart = startOfWeek(startOfMonth(firstMonth), weekStart);\n  const todayRow = Math.floor(\n    Math.round(\n      (startOfDay(today).getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand = shiftWeeks && isSameMonth(firstMonth, today) && todayRow >= 3;\n  // Extend downward first; only drop early weeks (shift) when today sits so low\n  // that the two trailing weeks wouldn't fit within the 6-row cap.\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const days = buildCalendarDays(firstMonth, weekStart, shiftRows, expand);\n  const weeks = chunkWeeks(days);\n\n  // Reserve any missing rows up to 6 (the most any month needs) with empty\n  // placeholders, so the grid keeps a constant height across navigation. This\n  // is 0 when expanding, since those months already fill all 6 rows with days.\n  const placeholderRows = Math.max(0, 6 - weeks.length);\n\n  const isSelected = (date: Date): boolean =>\n    selected ? isSameDay(selected, date) : false;\n\n  const getModifiers = (day: CalendarDay): DayModifiers => {\n    const { date, outside } = day;\n    const isBeforeNavStart = Boolean(navStart && date < navStart);\n    const isAfterNavEnd = Boolean(navEnd && date > endOfMonth(navEnd));\n    const isDisabled = disabled ? disabled(date) : false;\n    // Leading previous-month days are never shown (past days aren't relevant).\n    // Next-month days only belong in the grid while expanding; otherwise the\n    // empty placeholder rows reserve their space instead of spilling over.\n    const isPrevMonthDay = date < startOfMonth(firstMonth);\n    const isNextMonthDay = date > endOfMonth(firstMonth);\n    const isHidden =\n      isBeforeNavStart ||\n      isAfterNavEnd ||\n      isPrevMonthDay ||\n      (!expand && isNextMonthDay);\n    const isToday = isSameDay(date, today);\n    const isFocused =\n      !isHidden &&\n      !outside &&\n      focusedDate !== undefined &&\n      isSameDay(date, focusedDate);\n\n    return {\n      focused: isFocused,\n      disabled: isDisabled,\n      hidden: isHidden,\n      outside,\n      today: isToday,\n      selected: isSelected(date),\n    };\n  };\n\n  // Roving tabindex target. Priority: focused > last focused > selected > today\n  // > first focusable day.\n  const focusTarget = ((): CalendarDay | undefined => {\n    let target: CalendarDay | undefined;\n    let priority = -1;\n    for (const day of days) {\n      const modifiers = getModifiers(day);\n      if (!isFocusableDay(modifiers)) continue;\n      if (modifiers.focused && priority < 3) {\n        target = day;\n        priority = 3;\n      } else if (\n        lastFocusedDate &&\n        isSameDay(day.date, lastFocusedDate) &&\n        priority < 2\n      ) {\n        target = day;\n        priority = 2;\n      } else if (isSelected(day.date) && priority < 1) {\n        target = day;\n        priority = 1;\n      } else if (modifiers.today && priority < 0) {\n        target = day;\n        priority = 0;\n      }\n    }\n    if (!target) {\n      target = days.find((day) => isFocusableDay(getModifiers(day)));\n    }\n    return target;\n  })();\n\n  // While expanding, mark the 1st of the next month (the first visible day past\n  // the current month's end) with the month label.\n  const monthEnd = endOfMonth(firstMonth);\n  const nextMonthLabelIso = expand\n    ? days.find((day) => {\n        const modifiers = getModifiers(day);\n        return day.date > monthEnd && !modifiers.hidden;\n      })?.isoDate\n    : undefined;\n\n  const getFocusableDate = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n  ): Date => {\n    const delta = moveDir === \"after\" ? 1 : -1;\n    let result: Date;\n    switch (moveBy) {\n      case \"day\":\n        result = addDays(refDate, delta);\n        break;\n      case \"week\":\n        result = addDays(refDate, delta * 7);\n        break;\n      case \"month\":\n        result = addMonths(refDate, delta);\n        break;\n      case \"year\":\n        result = addMonths(refDate, delta * 12);\n        break;\n      case \"startOfWeek\":\n        result = startOfWeek(refDate, weekStart);\n        break;\n      case \"endOfWeek\":\n        result = endOfWeek(refDate, weekStart);\n        break;\n    }\n    if (moveDir === \"before\" && navStart && result < navStart) {\n      result = navStart;\n    }\n    if (moveDir === \"after\" && navEnd && result > endOfMonth(navEnd)) {\n      result = endOfMonth(navEnd);\n    }\n    return result;\n  };\n\n  const getNextFocus = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n    attempt = 0,\n  ): Date | undefined => {\n    if (attempt > 365) return undefined;\n    const next = getFocusableDate(moveBy, moveDir, refDate);\n    const isDisabled = disabled ? disabled(next) : false;\n    if (!isDisabled) return next;\n    return getNextFocus(moveBy, moveDir, next, attempt + 1);\n  };\n\n  const moveFocus = (moveBy: MoveBy, moveDir: MoveDir) => {\n    if (!focusedDate) return;\n    const next = getNextFocus(moveBy, moveDir, focusedDate);\n    if (!next) return;\n    if (!isSameMonth(next, firstMonth)) {\n      goToMonth(next);\n    }\n    setFocusedDate(next);\n  };\n\n  const handleDayClick =\n    (day: CalendarDay, modifiers: DayModifiers) => (event: MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setFocusedDate(day.date);\n      if (modifiers.disabled) return;\n      const newDate =\n        selected && isSameDay(day.date, selected) ? undefined : day.date;\n      onSelect?.(newDate, day.date);\n    };\n\n  const handleDayFocus = (day: CalendarDay) => () => {\n    setFocusedDate(day.date);\n  };\n\n  const handleDayBlur = () => {\n    setLastFocusedDate(focusedDate);\n    setFocusedDate(undefined);\n  };\n\n  const handleDayKeyDown = (event: KeyboardEvent) => {\n    const keyMap: Record<string, [MoveBy, MoveDir]> = {\n      ArrowLeft: [event.shiftKey ? \"month\" : \"day\", \"before\"],\n      ArrowRight: [event.shiftKey ? \"month\" : \"day\", \"after\"],\n      ArrowDown: [event.shiftKey ? \"year\" : \"week\", \"after\"],\n      ArrowUp: [event.shiftKey ? \"year\" : \"week\", \"before\"],\n      PageUp: [event.shiftKey ? \"year\" : \"month\", \"before\"],\n      PageDown: [event.shiftKey ? \"year\" : \"month\", \"after\"],\n      Home: [\"startOfWeek\", \"before\"],\n      End: [\"endOfWeek\", \"after\"],\n    };\n    const move = keyMap[event.key];\n    if (move) {\n      event.preventDefault();\n      event.stopPropagation();\n      const [moveBy, moveDir] = move;\n      moveFocus(moveBy, moveDir);\n    }\n  };\n\n  const weekdayHeaderStart = startOfWeek(today, weekStart);\n  const weekdays = Array.from({ length: 7 }, (_, index) => {\n    const date = addDays(weekdayHeaderStart, index);\n    return {\n      long: localization.weekdayLong(date),\n      short: localization.weekdayShort(date),\n    };\n  });\n\n  return (\n    <div\n      className={cn(\"w-full\", className)}\n      data-slot=\"booker-calendar\"\n      lang={locale}\n      dir={resolvedDir === \"rtl\" ? \"rtl\" : undefined}\n    >\n      <div className=\"flex w-full flex-col gap-2\">\n        <div aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n          {localization.monthYearLabel(firstMonth)}\n        </div>\n        <div className=\"flex h-10 items-center justify-between sm:h-9\">\n          {initialLoading ? (\n            <Skeleton className=\"h-6 w-28\" />\n          ) : (\n            <>\n              <MonthCaption\n                date={firstMonth}\n                formatter={localization.captionFormatter}\n              />\n              <nav\n                className=\"flex items-center gap-1\"\n                aria-label={resolvedLabels.nav}\n              >\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!previousMonth}\n                  aria-label={resolvedLabels.previousMonth}\n                  onClick={() => {\n                    if (previousMonth) goToMonth(previousMonth);\n                  }}\n                >\n                  <ChevronLeftIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!nextMonth}\n                  aria-label={resolvedLabels.nextMonth}\n                  onClick={() => {\n                    if (nextMonth) goToMonth(nextMonth);\n                  }}\n                >\n                  <ChevronRightIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </nav>\n            </>\n          )}\n        </div>\n        <TooltipProvider delay={0}>\n          <table\n            aria-multiselectable={false}\n            aria-label={localization.monthYearLabel(firstMonth)}\n            className=\"w-full\"\n          >\n            <thead aria-hidden=\"true\">\n              <tr className=\"flex w-full @5xl:gap-1 gap-1 py-2\">\n                {weekdays.map((weekday) => (\n                  <th\n                    key={weekday.long}\n                    aria-label={weekday.long}\n                    className=\"flex-1 font-medium text-muted-foreground/72 text-xs\"\n                    scope=\"col\"\n                  >\n                    {initialLoading ? (\n                      <Skeleton className=\"mx-auto my-0.5 h-3 w-6\" />\n                    ) : (\n                      weekday.short\n                    )}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {weeks.map((week) => (\n                <tr\n                  key={week[0]?.isoDate ?? week.at(-1)?.isoDate ?? \"week\"}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {week.map((day) => {\n                    const modifiers = getModifiers(day);\n\n                    // The day button's own styling is driven by the `data-*`\n                    // attributes below; these cell classes only cover the\n                    // layout and the outside/hidden/today states.\n                    const cellClassName = cn(\n                      \"@max-3xl:max-h-9 flex-1 p-0\",\n                      modifiers.hidden && \"invisible\",\n                      modifiers.outside && \"text-muted-foreground/50\",\n                      modifiers.today &&\n                        !dayCellsLoading &&\n                        \"*:before:pointer-events-none *:before:absolute *:before:start-1/2 *:before:bottom-1/7 *:before:z-1 *:before:size-1 *:before:-translate-x-1/2 *:before:rounded-full *:before:bg-primary *:before:transition-colors [&[data-selected]>*]:before:bg-primary-foreground\",\n                    );\n\n                    // Label (e.g. \"Aug\") sits on the 1st of the next month.\n                    const nextMonthLabel =\n                      day.isoDate === nextMonthLabelIso\n                        ? localization.monthShortLabel(day.date)\n                        : undefined;\n\n                    // Next-month days only show in the shifted current-month\n                    // view; a month-name tooltip keeps them from being mistaken\n                    // for the current month.\n                    const monthTooltip =\n                      day.outside && !modifiers.disabled && !modifiers.hidden\n                        ? localization.monthLongLabel(day.date)\n                        : undefined;\n\n                    return (\n                      <td\n                        key={day.isoDate}\n                        className={cellClassName}\n                        aria-selected={modifiers.selected || undefined}\n                        data-day={day.isoDate}\n                        data-month={day.outside ? day.dateMonthId : undefined}\n                        data-selected={modifiers.selected || undefined}\n                        data-disabled={modifiers.disabled || undefined}\n                        data-hidden={modifiers.hidden || undefined}\n                        data-outside={day.outside || undefined}\n                        data-focused={modifiers.focused || undefined}\n                        data-today={modifiers.today || undefined}\n                      >\n                        {modifiers.hidden ? null : dayCellsLoading ? (\n                          <button\n                            type=\"button\"\n                            disabled\n                            tabIndex={-1}\n                            aria-hidden=\"true\"\n                            className=\"pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 @max-3xl:max-h-9 w-full items-center justify-center rounded-lg\"\n                          >\n                            <Skeleton className=\"size-full rounded-lg\" />\n                          </button>\n                        ) : (\n                          <DayButton\n                            className=\"in-data-disabled:pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full items-center justify-center rounded-lg bg-muted in-data-disabled:bg-transparent in-data-selected:bg-primary font-medium in-data-disabled:font-normal in-data-selected:text-primary-foreground text-foreground tabular-nums in-data-disabled:opacity-50 outline-none transition-shadow duration-150 ease-out after:absolute @5xl:after:-inset-0.75 after:-inset-0.5 not-in-data-disabled:not-in-data-selected:hover:ring-2 not-in-data-disabled:not-in-data-selected:hover:ring-primary/72 focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-primary/72 sm:text-sm\"\n                            type=\"button\"\n                            focused={modifiers.focused}\n                            nextMonthLabel={nextMonthLabel}\n                            tooltip={monthTooltip}\n                            disabled={\n                              (!modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            aria-disabled={\n                              (modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            tabIndex={day === focusTarget ? 0 : -1}\n                            aria-label={(() => {\n                              let label = localization.fullDateLabel(day.date);\n                              if (modifiers.today) {\n                                label = `${resolvedLabels.today}, ${label}`;\n                              }\n                              if (modifiers.selected) {\n                                label = `${label}, ${resolvedLabels.selected}`;\n                              }\n                              return label;\n                            })()}\n                            onClick={handleDayClick(day, modifiers)}\n                            onBlur={handleDayBlur}\n                            onFocus={handleDayFocus(day)}\n                            onKeyDown={handleDayKeyDown}\n                          >\n                            {localization.dayNumber(day.date)}\n                          </DayButton>\n                        )}\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))}\n              {Array.from(\n                { length: placeholderRows },\n                (_, rowIndex) => `placeholder-row-${rowIndex}`,\n              ).map((rowKey) => (\n                <tr\n                  key={rowKey}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {weekdays.map((weekday) => (\n                    <td\n                      key={`${rowKey}-${weekday.long}`}\n                      className=\"@max-3xl:max-h-9 flex-1 p-0\"\n                    >\n                      <div className=\"@max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full\" />\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n          <Tooltip handle={monthTooltipHandle} disableHoverablePopup>\n            {({ payload }) => (\n              <TooltipPopup\n                className=\"**:data-current:opacity-100! **:data-previous:opacity-0! **:data-current:transition-none! **:data-previous:transition-none!\"\n                portalProps={{\n                  className: \"**:data-[slot=tooltip-positioner]:ease-out\",\n                }}\n              >\n                {payload}\n              </TooltipPopup>\n            )}\n          </Tooltip>\n        </TooltipProvider>\n      </div>\n    </div>\n  );\n}\n",
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index c05006e6f..d9c209f8d 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -11339,6 +11339,11 @@
           "target": "components/atoms/booker-1.tsx",
           "type": "registry:block"
         },
+        {
+          "path": "registry/default/atoms/booker/booker-steps.tsx",
+          "target": "components/atoms/booker/booker-steps.tsx",
+          "type": "registry:component"
+        },
         {
           "path": "registry/default/atoms/booker/booker-calendar.tsx",
           "target": "components/atoms/booker/booker-calendar.tsx",
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index c05006e6f..d9c209f8d 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -11339,6 +11339,11 @@
           "target": "components/atoms/booker-1.tsx",
           "type": "registry:block"
         },
+        {
+          "path": "registry/default/atoms/booker/booker-steps.tsx",
+          "target": "components/atoms/booker/booker-steps.tsx",
+          "type": "registry:component"
+        },
         {
           "path": "registry/default/atoms/booker/booker-calendar.tsx",
           "target": "components/atoms/booker/booker-calendar.tsx",
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index 0f5aa9f7a..ab01e9b37 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -9844,6 +9844,10 @@ export const Index: Record<string, any> = {
       path: "registry/default/atoms/booker-1.tsx",
       type: "registry:block",
       target: "components/atoms/booker-1.tsx"
+    },{
+      path: "registry/default/atoms/booker/booker-steps.tsx",
+      type: "registry:component",
+      target: "components/atoms/booker/booker-steps.tsx"
     },{
       path: "registry/default/atoms/booker/booker-calendar.tsx",
       type: "registry:component",

From c43e62383820fcc78c2f3dbcbba0ea79d3c5fc43 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Mon, 6 Jul 2026 22:04:01 +0200
Subject: [PATCH 19/49] complete form

---
 apps/ui/registry/default/atoms/booker-1.tsx   |  37 +++---
 .../atoms/booker/booker-confirm-form.tsx      | 105 ++++++++++++++++++
 .../default/atoms/booker/booker-labels.ts     |  21 ++++
 apps/ui/registry/registry-atoms.ts            |   8 ++
 4 files changed, 157 insertions(+), 14 deletions(-)
 create mode 100644 apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx

diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index ae6da83ab..8f6bdf8fd 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -1,13 +1,12 @@
 "use client";
 
-import { ArrowLeftIcon, Clock3Icon } from "lucide-react";
+import { Clock3Icon } from "lucide-react";
 import { cn } from "@/registry/default/lib/utils";
-import { Button } from "@/registry/default/ui/button";
 import { Card } from "@/registry/default/ui/card";
-import { Input } from "@/registry/default/ui/input";
 import { Skeleton } from "@/registry/default/ui/skeleton";
 import { BookerAvatars } from "./booker/booker-avatars";
 import { BookerCalendar } from "./booker/booker-calendar";
+import { BookerConfirmForm } from "./booker/booker-confirm-form";
 import { BookerErrorState } from "./booker/booker-error-state";
 import { type BookerLabels, getBookerLabels } from "./booker/booker-labels";
 import { BookerSteps } from "./booker/booker-steps";
@@ -29,7 +28,13 @@ type BookerProps = {
   labels?: Partial<BookerLabels>;
 };
 
-export function Booker({ initialData, target, timezone, labels }: BookerProps) {
+export function Booker({
+  initialData,
+  target,
+  timezone,
+  labels,
+  defaultFormValues,
+}: BookerProps) {
   const t = getBookerLabels(labels);
   const booker = useBooker({ initialData, target, timezone });
 
@@ -164,17 +169,21 @@ export function Booker({ initialData, target, timezone, labels }: BookerProps) {
           ) : (
             <div
               key="confirm"
-              className="@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4"
+              className="@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @5xl:p-6 p-4"
             >
-              <Button variant="ghost" size="sm" onClick={booker.onBack}>
-                <ArrowLeftIcon aria-hidden="true" />
-                Back
-              </Button>
-              <Input
-                autoFocus
-                className="w-full"
-                placeholder="Your name"
-                type="text"
+              <BookerConfirmForm
+                defaultEmail={
+                  typeof defaultFormValues?.email === "string"
+                    ? defaultFormValues.email
+                    : undefined
+                }
+                defaultName={
+                  typeof defaultFormValues?.name === "string"
+                    ? defaultFormValues.name
+                    : undefined
+                }
+                labels={t}
+                onBack={booker.onBack}
               />
             </div>
           )}
diff --git a/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx b/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
new file mode 100644
index 000000000..e164cc648
--- /dev/null
+++ b/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { UserPlusIcon } from "lucide-react";
+import { Button } from "@/registry/default/ui/button";
+import { Field, FieldLabel } from "@/registry/default/ui/field";
+import { Form } from "@/registry/default/ui/form";
+import { Input } from "@/registry/default/ui/input";
+import { Textarea } from "@/registry/default/ui/textarea";
+import type { BookerLabels } from "./booker-labels";
+
+type BookerConfirmFormProps = {
+  defaultEmail?: string;
+  defaultName?: string;
+  labels: BookerLabels;
+  onBack: () => void;
+};
+
+function RequiredMark() {
+  return <span className="text-destructive-foreground">*</span>;
+}
+
+export function BookerConfirmForm({
+  defaultEmail,
+  defaultName,
+  labels,
+  onBack,
+}: BookerConfirmFormProps) {
+  return (
+    <Form
+      className="flex flex-col gap-5"
+      onSubmit={(event) => {
+        event.preventDefault();
+      }}
+    >
+      <Field>
+        <FieldLabel>
+          {labels.confirmYourName} <RequiredMark />
+        </FieldLabel>
+        <Input
+          autoFocus
+          defaultValue={defaultName}
+          name="name"
+          required
+          type="text"
+        />
+      </Field>
+
+      <Field>
+        <FieldLabel>
+          {labels.confirmEmail} <RequiredMark />
+        </FieldLabel>
+        <Input
+          autoComplete="email"
+          defaultValue={defaultEmail}
+          name="email"
+          required
+          type="email"
+        />
+      </Field>
+
+      <Field>
+        <FieldLabel>{labels.confirmNotes}</FieldLabel>
+        <Textarea
+          name="notes"
+          placeholder={labels.confirmNotesPlaceholder}
+          rows={3}
+        />
+      </Field>
+
+      <Button className="-ms-2 self-start" type="button" variant="ghost">
+        <UserPlusIcon aria-hidden="true" />
+        {labels.confirmAddGuests}
+      </Button>
+
+      <p className="text-muted-foreground text-sm">
+        {labels.confirmTermsPrefix}{" "}
+        <a
+          className="text-foreground underline-offset-4 hover:underline"
+          href="https://cal.com/terms"
+          rel="noreferrer"
+          target="_blank"
+        >
+          {labels.confirmTerms}
+        </a>{" "}
+        and{" "}
+        <a
+          className="text-foreground underline-offset-4 hover:underline"
+          href="https://cal.com/privacy"
+          rel="noreferrer"
+          target="_blank"
+        >
+          {labels.confirmPrivacyPolicy}
+        </a>
+        .
+      </p>
+
+      <div className="flex justify-end gap-2 pt-1">
+        <Button onClick={onBack} type="button" variant="ghost">
+          {labels.confirmBack}
+        </Button>
+        <Button type="submit">{labels.confirmSubmit}</Button>
+      </div>
+    </Form>
+  );
+}
diff --git a/apps/ui/registry/default/atoms/booker/booker-labels.ts b/apps/ui/registry/default/atoms/booker/booker-labels.ts
index c6e5be912..3bd224aac 100644
--- a/apps/ui/registry/default/atoms/booker/booker-labels.ts
+++ b/apps/ui/registry/default/atoms/booker/booker-labels.ts
@@ -17,6 +17,16 @@ export type BookerLabels = {
   headerImageAlt: (hostName: string, eventTitle: string) => string;
   locationOptions: (count: number) => string;
   locationSelectOnNextStep: string;
+  confirmYourName: string;
+  confirmEmail: string;
+  confirmNotes: string;
+  confirmNotesPlaceholder: string;
+  confirmAddGuests: string;
+  confirmBack: string;
+  confirmSubmit: string;
+  confirmTermsPrefix: string;
+  confirmTerms: string;
+  confirmPrivacyPolicy: string;
 };
 
 const DEFAULT_BOOKER_LABELS: BookerLabels = {
@@ -40,6 +50,17 @@ const DEFAULT_BOOKER_LABELS: BookerLabels = {
     `Banner for ${eventTitle} with ${hostName}`,
   locationOptions: (count) => `${count} location options`,
   locationSelectOnNextStep: "Select on the next step",
+  confirmYourName: "Your name",
+  confirmEmail: "Email address",
+  confirmNotes: "Additional notes",
+  confirmNotesPlaceholder:
+    "Please share anything that will help prepare for our meeting.",
+  confirmAddGuests: "Add guests",
+  confirmBack: "Back",
+  confirmSubmit: "Confirm",
+  confirmTermsPrefix: "By proceeding, you agree to Cal.com's",
+  confirmTerms: "Terms",
+  confirmPrivacyPolicy: "Privacy Policy",
 };
 
 export function getBookerLabels(labels?: Partial<BookerLabels>): BookerLabels {
diff --git a/apps/ui/registry/registry-atoms.ts b/apps/ui/registry/registry-atoms.ts
index cebcdefb1..cc9d1ae7c 100644
--- a/apps/ui/registry/registry-atoms.ts
+++ b/apps/ui/registry/registry-atoms.ts
@@ -24,6 +24,11 @@ export const atoms: AtomItem[] = [
         target: "components/atoms/booker-1.tsx",
         type: "registry:block",
       },
+      {
+        path: "atoms/booker/booker-confirm-form.tsx",
+        target: "components/atoms/booker/booker-confirm-form.tsx",
+        type: "registry:component",
+      },
       {
         path: "atoms/booker/booker-steps.tsx",
         target: "components/atoms/booker/booker-steps.tsx",
@@ -107,6 +112,8 @@ export const atoms: AtomItem[] = [
       "@coss/card",
       "@coss/combobox",
       "@coss/empty",
+      "@coss/field",
+      "@coss/form",
       "@coss/input",
       "@coss/label",
       "@coss/popover",
@@ -114,6 +121,7 @@ export const atoms: AtomItem[] = [
       "@coss/select",
       "@coss/skeleton",
       "@coss/switch",
+      "@coss/textarea",
       "@coss/tooltip",
     ],
     meta: {

From 2208a246803f3d675a155254a0285ff60ea68eaf Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Wed, 8 Jul 2026 08:11:32 +0200
Subject: [PATCH 20/49] form improvements

---
 apps/ui/public/r/booker-1.json                |  21 ++-
 apps/ui/public/r/registry.json                |   8 +
 apps/ui/registry.json                         |   8 +
 apps/ui/registry/__index__.tsx                |   6 +-
 apps/ui/registry/default/atoms/booker-1.tsx   |  13 +-
 .../default/atoms/booker/booker-calendar.tsx  |   9 +-
 .../atoms/booker/booker-confirm-form.tsx      | 176 +++++++++++-------
 .../default/atoms/booker/booker-steps.tsx     |   4 +-
 .../default/atoms/booker/timezone-picker.tsx  |  18 +-
 .../default/atoms/lib/booker/utils.ts         |  95 ++++++++++
 10 files changed, 274 insertions(+), 84 deletions(-)

diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index 0ac484286..7c3712e88 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -15,6 +15,8 @@
     "@coss/card",
     "@coss/combobox",
     "@coss/empty",
+    "@coss/field",
+    "@coss/form",
     "@coss/input",
     "@coss/label",
     "@coss/popover",
@@ -22,24 +24,31 @@
     "@coss/select",
     "@coss/skeleton",
     "@coss/switch",
+    "@coss/textarea",
     "@coss/tooltip"
   ],
   "files": [
     {
       "path": "registry/default/atoms/booker-1.tsx",
-      "content": "\"use client\";\n\nimport { ArrowLeftIcon, Clock3Icon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { BookerSteps } from \"./booker/booker-steps\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({ initialData, target, timezone, labels }: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div\n            className={cn(\n              \"flex flex-col gap-6 @5xl:p-6 p-4\",\n              displayMeta?.eventTypeImageUrl && \"relative -mt-11 @5xl:-mt-13\",\n            )}\n          >\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                <TimezonePicker {...booker.timezoneProps} />\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <BookerSteps step={booker.step}>\n          {booker.step === \"select\" ? (\n            <div key=\"select\" className=\"flex w-full @3xl:flex-row flex-col\">\n              <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                <BookerCalendar {...booker.calendarProps} />\n              </div>\n              <TimePicker\n                labels={{\n                  hour12Short: t.hour12Short,\n                  hour24Short: t.hour24Short,\n                  noAvailableTimes: t.noAvailableTimes,\n                  noSlotsAvailable: t.noSlotsAvailable,\n                  noSlotsThisDay: t.noSlotsThisDay,\n                  noSlotsThisMonth: t.noSlotsThisMonth,\n                  use24Hour: t.use24Hour,\n                  viewFirstAvailability: t.viewFirstAvailability,\n                }}\n                {...booker.timePickerProps}\n              />\n            </div>\n          ) : (\n            <div\n              key=\"confirm\"\n              className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\"\n            >\n              <Button variant=\"ghost\" size=\"sm\" onClick={booker.onBack}>\n                <ArrowLeftIcon aria-hidden=\"true\" />\n                Back\n              </Button>\n              <Input\n                autoFocus\n                className=\"w-full\"\n                placeholder=\"Your name\"\n                type=\"text\"\n              />\n            </div>\n          )}\n        </BookerSteps>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
+      "content": "\"use client\";\n\nimport { Clock3Icon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerConfirmForm } from \"./booker/booker-confirm-form\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { BookerSteps } from \"./booker/booker-steps\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezoneDisplay, TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({\n  initialData,\n  target,\n  timezone,\n  labels,\n  defaultFormValues,\n}: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div\n            className={cn(\n              \"flex flex-col gap-6 @5xl:p-6 p-4\",\n              displayMeta?.eventTypeImageUrl && \"relative -mt-11 @5xl:-mt-13\",\n            )}\n          >\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                {booker.step === \"select\" ? (\n                  <TimezonePicker {...booker.timezoneProps} />\n                ) : (\n                  <TimezoneDisplay value={booker.timezoneProps.value} />\n                )}\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <BookerSteps step={booker.step}>\n          {booker.step === \"select\" ? (\n            <div key=\"select\" className=\"flex w-full @3xl:flex-row flex-col\">\n              <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                <BookerCalendar {...booker.calendarProps} />\n              </div>\n              <TimePicker\n                labels={{\n                  hour12Short: t.hour12Short,\n                  hour24Short: t.hour24Short,\n                  noAvailableTimes: t.noAvailableTimes,\n                  noSlotsAvailable: t.noSlotsAvailable,\n                  noSlotsThisDay: t.noSlotsThisDay,\n                  noSlotsThisMonth: t.noSlotsThisMonth,\n                  use24Hour: t.use24Hour,\n                  viewFirstAvailability: t.viewFirstAvailability,\n                }}\n                {...booker.timePickerProps}\n              />\n            </div>\n          ) : (\n            <div\n              key=\"confirm\"\n              className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @5xl:p-6 p-4\"\n            >\n              <BookerConfirmForm\n                defaultEmail={\n                  typeof defaultFormValues?.email === \"string\"\n                    ? defaultFormValues.email\n                    : undefined\n                }\n                defaultName={\n                  typeof defaultFormValues?.name === \"string\"\n                    ? defaultFormValues.name\n                    : undefined\n                }\n                durationMinutes={booker.durationProps.value}\n                is24Hour={booker.timePickerProps.is24Hour}\n                labels={t}\n                locale={booker.calendarProps.locale}\n                onBack={booker.onBack}\n                selectedDate={booker.timePickerProps.selectedDate}\n                selectedTime={booker.selectedTime}\n              />\n            </div>\n          )}\n        </BookerSteps>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
       "type": "registry:block",
       "target": "components/atoms/booker-1.tsx"
     },
+    {
+      "path": "registry/default/atoms/booker/booker-confirm-form.tsx",
+      "content": "\"use client\";\n\nimport { UserPlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\nimport type { BookerLabels } from \"./booker-labels\";\nimport {\n  formatConfirmDateDetail,\n  formatConfirmTimeRange,\n  formatSelectedWeekday,\n} from \"@/lib/booker/utils\";\n\ntype BookerConfirmFormProps = {\n  defaultEmail?: string;\n  defaultName?: string;\n  durationMinutes: number;\n  is24Hour: boolean;\n  labels: BookerLabels;\n  locale: string;\n  onBack: () => void;\n  selectedDate?: Date;\n  selectedTime: string | null;\n};\n\nfunction RequiredMark() {\n  return <span className=\"text-destructive-foreground\">*</span>;\n}\n\nexport function BookerConfirmForm({\n  defaultEmail,\n  defaultName,\n  durationMinutes,\n  is24Hour,\n  labels,\n  locale,\n  onBack,\n  selectedDate,\n  selectedTime,\n}: BookerConfirmFormProps) {\n  const showSummary = selectedDate != null && selectedTime != null;\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      {showSummary ? (\n        <div className=\"flex flex-wrap items-baseline gap-x-1.5 font-heading\">\n          <span>\n            {formatSelectedWeekday(selectedDate, locale)}{\" \"}\n            {formatConfirmDateDetail(selectedDate, locale)}\n          </span>\n          <span className=\"text-muted-foreground/72\">\n            {formatConfirmTimeRange(\n              selectedTime,\n              durationMinutes,\n              !is24Hour,\n              locale,\n            )}\n          </span>\n        </div>\n      ) : null}\n\n      <Form\n        className=\"flex flex-col gap-4\"\n        onSubmit={(event) => {\n          event.preventDefault();\n        }}\n      >\n        <Field>\n          <FieldLabel>\n            {labels.confirmYourName} <RequiredMark />\n          </FieldLabel>\n          <Input\n            autoFocus\n            defaultValue={defaultName}\n            name=\"name\"\n            required\n            type=\"text\"\n          />\n        </Field>\n\n        <Field>\n          <FieldLabel>\n            {labels.confirmEmail} <RequiredMark />\n          </FieldLabel>\n          <Input\n            autoComplete=\"email\"\n            defaultValue={defaultEmail}\n            name=\"email\"\n            required\n            type=\"email\"\n          />\n        </Field>\n\n        <Field>\n          <FieldLabel>{labels.confirmNotes}</FieldLabel>\n          <Textarea\n            name=\"notes\"\n            placeholder={labels.confirmNotesPlaceholder}\n            rows={3}\n          />\n        </Field>\n\n        <Button className=\"self-start\" type=\"button\" variant=\"ghost\">\n          <UserPlusIcon aria-hidden=\"true\" />\n          {labels.confirmAddGuests}\n        </Button>\n\n        <p className=\"text-muted-foreground text-sm\">\n          {labels.confirmTermsPrefix}{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/terms\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmTerms}\n          </a>{\" \"}\n          and{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/privacy\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmPrivacyPolicy}\n          </a>\n          .\n        </p>\n\n        <div className=\"flex justify-end gap-2 pt-1\">\n          <Button onClick={onBack} type=\"button\" variant=\"ghost\">\n            {labels.confirmBack}\n          </Button>\n          <Button type=\"submit\">{labels.confirmSubmit}</Button>\n        </div>\n      </Form>\n    </div>\n  );\n}\n",
+      "type": "registry:component",
+      "target": "components/atoms/booker/booker-confirm-form.tsx"
+    },
     {
       "path": "registry/default/atoms/booker/booker-steps.tsx",
-      "content": "\"use client\";\n\nimport {\n  animate,\n  domAnimation,\n  LazyMotion,\n  MotionConfig,\n  useReducedMotion,\n} from \"motion/react\";\nimport { type ReactNode, useEffect, useLayoutEffect, useRef } from \"react\";\nimport type { BookerStep } from \"@/lib/booker/use-booker\";\n\nconst EASE = [0.32, 0.72, 0, 1] as const;\nconst SIZE_TRANSITION = { duration: 0.45, ease: EASE } as const;\nconst ENTER_TRANSITION = { delay: 0.05, duration: 0.55, ease: EASE } as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\ntype Size = { width: number; height: number };\n\nconst measure = (element: HTMLElement): Size => ({\n  width: element.offsetWidth,\n  height: element.offsetHeight,\n});\n\nfunction useStepTransition(step: BookerStep) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const previousStepRef = useRef(step);\n  const restingSizeRef = useRef<Size | null>(null);\n  const isAnimatingRef = useRef(false);\n  const reducedMotion = useReducedMotion();\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const observer = new ResizeObserver(() => {\n      if (!isAnimatingRef.current) {\n        restingSizeRef.current = measure(container);\n      }\n    });\n    observer.observe(container);\n    return () => observer.disconnect();\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container || previousStepRef.current === step) return;\n    previousStepRef.current = step;\n\n    const enteringStep = container.firstElementChild as HTMLElement | null;\n\n    if (enteringStep && !reducedMotion) {\n      enteringStep.style.opacity = \"0\";\n    }\n\n    const start = restingSizeRef.current ?? measure(container);\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = measure(container);\n\n    if (enteringStep) enteringStep.style.width = `${end.width}px`;\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    isAnimatingRef.current = true;\n    const sizeAnimation = animate(\n      container,\n      { width: end.width, height: end.height },\n      reducedMotion ? { duration: 0 } : SIZE_TRANSITION,\n    );\n    const enterAnimation =\n      enteringStep && !reducedMotion\n        ? animate(enteringStep, { opacity: [0, 1] }, ENTER_TRANSITION)\n        : null;\n\n    void Promise.all([sizeAnimation, enterAnimation ?? Promise.resolve()]).then(\n      () => {\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n        enteringStep?.style.removeProperty(\"opacity\");\n        restingSizeRef.current = measure(container);\n        isAnimatingRef.current = false;\n      },\n    );\n\n    return () => {\n      sizeAnimation.stop();\n      enterAnimation?.stop();\n      isAnimatingRef.current = false;\n    };\n  }, [step, reducedMotion]);\n\n  return containerRef;\n}\n\nexport function BookerSteps({\n  step,\n  children,\n}: {\n  step: BookerStep;\n  children: ReactNode;\n}) {\n  const containerRef = useStepTransition(step);\n\n  return (\n    <LazyMotion features={domAnimation}>\n      <MotionConfig reducedMotion=\"user\" transition={SIZE_TRANSITION}>\n        <div\n          ref={containerRef}\n          className=\"relative w-full @3xl:flex-1 overflow-clip\"\n        >\n          {children}\n        </div>\n      </MotionConfig>\n    </LazyMotion>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  animate,\n  domAnimation,\n  LazyMotion,\n  MotionConfig,\n  useReducedMotion,\n} from \"motion/react\";\nimport { type ReactNode, useEffect, useLayoutEffect, useRef } from \"react\";\nimport type { BookerStep } from \"@/lib/booker/use-booker\";\n\nconst EASE = [0.32, 0.72, 0, 1] as const;\nconst SIZE_TRANSITION = { duration: 0.3, ease: EASE } as const;\nconst ENTER_TRANSITION = { delay: 0.05, duration: 0.4, ease: EASE } as const;\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\ntype Size = { width: number; height: number };\n\nconst measure = (element: HTMLElement): Size => ({\n  width: element.offsetWidth,\n  height: element.offsetHeight,\n});\n\nfunction useStepTransition(step: BookerStep) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const previousStepRef = useRef(step);\n  const restingSizeRef = useRef<Size | null>(null);\n  const isAnimatingRef = useRef(false);\n  const reducedMotion = useReducedMotion();\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const observer = new ResizeObserver(() => {\n      if (!isAnimatingRef.current) {\n        restingSizeRef.current = measure(container);\n      }\n    });\n    observer.observe(container);\n    return () => observer.disconnect();\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container || previousStepRef.current === step) return;\n    previousStepRef.current = step;\n\n    const enteringStep = container.firstElementChild as HTMLElement | null;\n\n    if (enteringStep && !reducedMotion) {\n      enteringStep.style.opacity = \"0\";\n    }\n\n    const start = restingSizeRef.current ?? measure(container);\n    container.style.width = \"auto\";\n    container.style.height = \"auto\";\n    enteringStep?.style.removeProperty(\"width\");\n    void container.offsetHeight;\n    const end = measure(container);\n\n    if (enteringStep) enteringStep.style.width = `${end.width}px`;\n    container.style.width = `${start.width}px`;\n    container.style.height = `${start.height}px`;\n\n    isAnimatingRef.current = true;\n    const sizeAnimation = animate(\n      container,\n      { width: end.width, height: end.height },\n      reducedMotion ? { duration: 0 } : SIZE_TRANSITION,\n    );\n    const enterAnimation =\n      enteringStep && !reducedMotion\n        ? animate(enteringStep, { opacity: [0, 1] }, ENTER_TRANSITION)\n        : null;\n\n    void Promise.all([sizeAnimation, enterAnimation ?? Promise.resolve()]).then(\n      () => {\n        container.style.width = \"\";\n        container.style.height = \"\";\n        enteringStep?.style.removeProperty(\"width\");\n        enteringStep?.style.removeProperty(\"opacity\");\n        restingSizeRef.current = measure(container);\n        isAnimatingRef.current = false;\n      },\n    );\n\n    return () => {\n      sizeAnimation.stop();\n      enterAnimation?.stop();\n      isAnimatingRef.current = false;\n    };\n  }, [step, reducedMotion]);\n\n  return containerRef;\n}\n\nexport function BookerSteps({\n  step,\n  children,\n}: {\n  step: BookerStep;\n  children: ReactNode;\n}) {\n  const containerRef = useStepTransition(step);\n\n  return (\n    <LazyMotion features={domAnimation}>\n      <MotionConfig reducedMotion=\"user\" transition={SIZE_TRANSITION}>\n        <div\n          ref={containerRef}\n          className=\"relative w-full @3xl:flex-1 overflow-clip\"\n        >\n          {children}\n        </div>\n      </MotionConfig>\n    </LazyMotion>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/booker-steps.tsx"
     },
     {
       "path": "registry/default/atoms/booker/booker-calendar.tsx",
-      "content": "\"use client\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipCreateHandle,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\n// A single shared tooltip reused across every day cell (via the handle/payload\n// pattern). Reusing one instance lets it gracefully move/scale between days\n// instead of mounting a separate tooltip per cell.\nconst monthTooltipHandle = TooltipCreateHandle<string>();\n\n// Falls back to English (US) when no `locale` prop is provided.\nconst DEFAULT_LOCALE = \"en-US\";\n\ntype CalendarLabels = {\n  /** ARIA label for the previous-month navigation button. */\n  previousMonth: string;\n  /** ARIA label for the next-month navigation button. */\n  nextMonth: string;\n  /** ARIA label for the navigation toolbar. */\n  nav: string;\n  /** Prefix for today's day button label, e.g. \"Today, Monday, …\". */\n  today: string;\n  /** Suffix for the selected day button label, e.g. \"…, selected\". */\n  selected: string;\n};\n\n// English defaults. Localize by passing translated strings via the `labels`\n// prop (wire it up to your app's own i18n layer); date/weekday/month names are\n// still localized automatically from `locale` via `Intl`.\nconst DEFAULT_LABELS: CalendarLabels = {\n  previousMonth: \"Go to the Previous Month\",\n  nextMonth: \"Go to the Next Month\",\n  nav: \"Navigation bar\",\n  today: \"Today\",\n  selected: \"selected\",\n};\n\n// Resolves the text direction for the locale (e.g. \"rtl\" for Arabic/Hebrew).\nfunction getTextDirection(locale: string): \"ltr\" | \"rtl\" {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      textInfo?: { direction?: string };\n      getTextInfo?: () => { direction?: string };\n    };\n    const info =\n      typeof localeObj.getTextInfo === \"function\"\n        ? localeObj.getTextInfo()\n        : localeObj.textInfo;\n    if (info?.direction === \"rtl\") {\n      return \"rtl\";\n    }\n  } catch {\n    // Fall through to the ltr default below.\n  }\n  return \"ltr\";\n}\n\n// Locale-aware formatting/ordering, derived from a BCP-47 locale string.\ntype Localization = {\n  weekStartsOn: number;\n  monthYearLabel: (date: Date) => string;\n  fullDateLabel: (date: Date) => string;\n  monthShortLabel: (date: Date) => string;\n  monthLongLabel: (date: Date) => string;\n  weekdayLong: (date: Date) => string;\n  weekdayShort: (date: Date) => string;\n  dayNumber: (date: Date) => string;\n  captionFormatter: Intl.DateTimeFormat;\n};\n\n// 1 = Monday … 7 = Sunday (ISO) → JS getDay() index (0 = Sunday … 6 = Saturday).\nfunction getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction buildLocalization(\n  locale: string,\n  weekStartsOnOverride?: number,\n): Localization {\n  const longDateFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n    year: \"numeric\",\n    month: \"long\",\n    day: \"numeric\",\n  });\n  const monthYearFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n    year: \"numeric\",\n  });\n  const monthShortFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  });\n  const monthLongFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n  });\n  const weekdayLongFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n  });\n  const weekdayShortFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  });\n  const dayFormatter = new Intl.DateTimeFormat(locale, { day: \"numeric\" });\n\n  return {\n    weekStartsOn: weekStartsOnOverride ?? getWeekStartsOn(locale),\n    monthYearLabel: (date) => monthYearFormatter.format(date),\n    fullDateLabel: (date) => longDateFormatter.format(date),\n    monthShortLabel: (date) => monthShortFormatter.format(date),\n    monthLongLabel: (date) => monthLongFormatter.format(date),\n    weekdayLong: (date) => weekdayLongFormatter.format(date),\n    weekdayShort: (date) => weekdayShortFormatter.format(date),\n    dayNumber: (date) => dayFormatter.format(date),\n    captionFormatter: monthYearFormatter,\n  };\n}\n\nfunction pad2(value: number): string {\n  return value < 10 ? `0${value}` : String(value);\n}\n\nfunction isoDate(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;\n}\n\nfunction isoMonth(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}`;\n}\n\nfunction startOfDay(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n}\n\nfunction startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction addDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction addMonths(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth() + amount, date.getDate());\n}\n\nfunction startOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = startOfDay(date);\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return addDays(day, -diff);\n}\n\nfunction endOfWeek(date: Date, weekStartsOn = 0): Date {\n  return addDays(startOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nfunction isSameMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nfunction differenceInCalendarMonths(a: Date, b: Date): number {\n  return (\n    (a.getFullYear() - b.getFullYear()) * 12 + (a.getMonth() - b.getMonth())\n  );\n}\n\ntype CalendarDay = {\n  date: Date;\n  outside: boolean;\n  isoDate: string;\n  dateMonthId: string;\n};\n\ntype DayModifiers = {\n  focused: boolean;\n  disabled: boolean;\n  hidden: boolean;\n  outside: boolean;\n  today: boolean;\n  selected: boolean;\n};\n\n// Builds the month grid as full weeks covering the month.\n//\n// `shiftRows` slides the window forward by that many weeks, dropping the\n// month's earliest week(s). When `fillToSix` is set the grid is then padded to\n// a full 6 rows with days from the next month. Together they keep today's week\n// plus the next two visible without exceeding 6 rows; with both at their\n// defaults the month spans only the weeks it naturally needs.\nfunction buildCalendarDays(\n  month: Date,\n  weekStartsOn: number,\n  shiftRows: number,\n  fillToSix: boolean,\n): CalendarDay[] {\n  const monthStart = startOfMonth(month);\n  const offset = shiftRows * 7;\n  const gridStart = addDays(startOfWeek(monthStart, weekStartsOn), offset);\n  const gridEnd = addDays(endOfWeek(endOfMonth(month), weekStartsOn), offset);\n\n  const dates: Date[] = [];\n  for (let cursor = gridStart; cursor <= gridEnd; cursor = addDays(cursor, 1)) {\n    dates.push(cursor);\n  }\n\n  if (fillToSix) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(addDays(lastDate, 1));\n    }\n  }\n\n  return dates.map((date) => ({\n    date,\n    outside: !isSameMonth(date, month),\n    isoDate: isoDate(date),\n    dateMonthId: isoMonth(date),\n  }));\n}\n\nfunction chunkWeeks(days: CalendarDay[]): CalendarDay[][] {\n  const weeks: CalendarDay[][] = [];\n  for (let i = 0; i < days.length; i += 7) {\n    weeks.push(days.slice(i, i + 7));\n  }\n  return weeks;\n}\n\nfunction isFocusableDay(modifiers: DayModifiers): boolean {\n  return !modifiers.disabled && !modifiers.hidden && !modifiers.outside;\n}\n\n// A single day cell's button. Focuses itself when it becomes the roving-tabindex\n// target so keyboard navigation moves the actual DOM focus.\nfunction DayButton({\n  focused,\n  nextMonthLabel,\n  tooltip,\n  children,\n  ...buttonProps\n}: ComponentProps<\"button\"> & {\n  focused: boolean;\n  nextMonthLabel?: string;\n  tooltip?: string;\n}): ReactElement {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (focused) ref.current?.focus();\n  }, [focused]);\n\n  const button = (\n    <button ref={ref} {...buttonProps}>\n      {children}\n      {nextMonthLabel ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute @5xl:end-1.5 end-1 @3xl:top-1.5 top-1 font-medium in-data-selected:text-primary-foreground/72 text-[10px] text-muted-foreground leading-none\"\n        >\n          {nextMonthLabel}\n        </span>\n      ) : null}\n    </button>\n  );\n\n  if (!tooltip) return button;\n\n  return (\n    <TooltipTrigger\n      handle={monthTooltipHandle}\n      payload={tooltip}\n      render={button}\n    />\n  );\n}\n\n// Month + year heading; the year is muted via formatToParts so it stays\n// locale-correct (some locales render \"2026 June\").\nfunction MonthCaption({\n  date,\n  formatter,\n  className,\n}: {\n  date: Date;\n  formatter: Intl.DateTimeFormat;\n  className?: string;\n}): ReactElement {\n  return (\n    <div\n      className={cn(\n        \"@5xl:ps-1 font-heading @3xl:@max-5xl:text-base text-lg\",\n        className,\n      )}\n    >\n      {formatter.formatToParts(date).map((part) =>\n        part.type === \"year\" ? (\n          <span key={`year-${part.value}`} className=\"text-muted-foreground/72\">\n            {part.value}\n          </span>\n        ) : (\n          part.value\n        ),\n      )}\n    </div>\n  );\n}\n\ntype MoveBy = \"day\" | \"week\" | \"month\" | \"year\" | \"startOfWeek\" | \"endOfWeek\";\ntype MoveDir = \"before\" | \"after\";\n\nexport type BookerCalendarProps = {\n  className?: string;\n  /**\n   * For the current month, once today reaches the 4th row, keep its week plus\n   * the next two visible within the 6-row grid: extend into next-month days,\n   * and slide the window down (dropping early weeks) only when today sits too\n   * low for those two weeks to fit. Off renders a plain month grid. On by\n   * default.\n   */\n  shiftWeeks?: boolean;\n  availabilityLoading?: boolean;\n  initialLoading?: boolean;\n  month?: Date;\n  defaultMonth?: Date;\n  startMonth?: Date;\n  endMonth?: Date;\n  selected?: Date;\n  onSelect?: (date: Date | undefined, triggerDate: Date) => void;\n  onMonthChange?: (month: Date) => void;\n  disabled?: (date: Date) => boolean;\n  /** BCP-47 locale tag used to localize day/month/weekday names and ARIA labels. */\n  locale?: string;\n  /** Override the locale's first day of the week (0 = Sunday … 6 = Saturday). */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /** Text direction; defaults to the locale's direction (\"rtl\" for ar/he/…). */\n  dir?: \"ltr\" | \"rtl\";\n  /** Translatable strings for the navigation buttons and day button states. */\n  labels?: Partial<CalendarLabels>;\n  /** Reference \"today\" for highlighting and week shifting; defaults to now. */\n  today?: Date;\n};\n\nexport function BookerCalendar({\n  className,\n  shiftWeeks = true,\n  availabilityLoading = false,\n  initialLoading = false,\n  month,\n  defaultMonth,\n  startMonth,\n  endMonth,\n  selected,\n  onSelect,\n  onMonthChange,\n  disabled,\n  locale = DEFAULT_LOCALE,\n  weekStartsOn,\n  dir,\n  labels,\n  today: todayProp,\n}: BookerCalendarProps): ReactElement {\n  const dayCellsLoading = initialLoading || availabilityLoading;\n  const localization = useMemo(\n    () => buildLocalization(locale, weekStartsOn),\n    [locale, weekStartsOn],\n  );\n  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };\n  const resolvedDir = dir ?? getTextDirection(locale);\n  const weekStart = localization.weekStartsOn;\n\n  const today = todayProp ?? new Date();\n\n  // The month is controlled by the parent (via `month`/`onMonthChange`), but we\n  // keep an internal fallback so the calendar works uncontrolled too.\n  const [internalMonth, setInternalMonth] = useState(() =>\n    startOfMonth(month ?? defaultMonth ?? today),\n  );\n  const monthTime = month ? startOfMonth(month).getTime() : undefined;\n  useEffect(() => {\n    if (monthTime !== undefined) {\n      setInternalMonth(new Date(monthTime));\n    }\n  }, [monthTime]);\n\n  const firstMonth = month ? startOfMonth(month) : internalMonth;\n\n  const [focusedDate, setFocusedDate] = useState<Date | undefined>(undefined);\n  const [lastFocusedDate, setLastFocusedDate] = useState<Date | undefined>(\n    undefined,\n  );\n\n  const navStart = startMonth ? startOfMonth(startMonth) : undefined;\n  const navEnd = endMonth ? startOfMonth(endMonth) : undefined;\n\n  const previousMonth =\n    navStart && differenceInCalendarMonths(firstMonth, navStart) <= 0\n      ? undefined\n      : addMonths(firstMonth, -1);\n  const nextMonth =\n    navEnd && differenceInCalendarMonths(navEnd, firstMonth) <= 0\n      ? undefined\n      : addMonths(firstMonth, 1);\n\n  const goToMonth = useCallback(\n    (date: Date) => {\n      let newMonth = startOfMonth(date);\n      if (navStart && newMonth < navStart) {\n        newMonth = navStart;\n      }\n      if (navEnd && newMonth > navEnd) {\n        newMonth = navEnd;\n      }\n      setInternalMonth(newMonth);\n      onMonthChange?.(newMonth);\n    },\n    [navEnd, navStart, onMonthChange],\n  );\n\n  // For the live current month, once today reaches the 4th row, guarantee its\n  // week plus the next two are visible. todayRow is today's 0-based row in the\n  // natural (unshifted) grid.\n  const naturalGridStart = startOfWeek(startOfMonth(firstMonth), weekStart);\n  const todayRow = Math.floor(\n    Math.round(\n      (startOfDay(today).getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand = shiftWeeks && isSameMonth(firstMonth, today) && todayRow >= 3;\n  // Extend downward first; only drop early weeks (shift) when today sits so low\n  // that the two trailing weeks wouldn't fit within the 6-row cap.\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const days = buildCalendarDays(firstMonth, weekStart, shiftRows, expand);\n  const weeks = chunkWeeks(days);\n\n  // Reserve any missing rows up to 6 (the most any month needs) with empty\n  // placeholders, so the grid keeps a constant height across navigation. This\n  // is 0 when expanding, since those months already fill all 6 rows with days.\n  const placeholderRows = Math.max(0, 6 - weeks.length);\n\n  const isSelected = (date: Date): boolean =>\n    selected ? isSameDay(selected, date) : false;\n\n  const getModifiers = (day: CalendarDay): DayModifiers => {\n    const { date, outside } = day;\n    const isBeforeNavStart = Boolean(navStart && date < navStart);\n    const isAfterNavEnd = Boolean(navEnd && date > endOfMonth(navEnd));\n    const isDisabled = disabled ? disabled(date) : false;\n    // Leading previous-month days are never shown (past days aren't relevant).\n    // Next-month days only belong in the grid while expanding; otherwise the\n    // empty placeholder rows reserve their space instead of spilling over.\n    const isPrevMonthDay = date < startOfMonth(firstMonth);\n    const isNextMonthDay = date > endOfMonth(firstMonth);\n    const isHidden =\n      isBeforeNavStart ||\n      isAfterNavEnd ||\n      isPrevMonthDay ||\n      (!expand && isNextMonthDay);\n    const isToday = isSameDay(date, today);\n    const isFocused =\n      !isHidden &&\n      !outside &&\n      focusedDate !== undefined &&\n      isSameDay(date, focusedDate);\n\n    return {\n      focused: isFocused,\n      disabled: isDisabled,\n      hidden: isHidden,\n      outside,\n      today: isToday,\n      selected: isSelected(date),\n    };\n  };\n\n  // Roving tabindex target. Priority: focused > last focused > selected > today\n  // > first focusable day.\n  const focusTarget = ((): CalendarDay | undefined => {\n    let target: CalendarDay | undefined;\n    let priority = -1;\n    for (const day of days) {\n      const modifiers = getModifiers(day);\n      if (!isFocusableDay(modifiers)) continue;\n      if (modifiers.focused && priority < 3) {\n        target = day;\n        priority = 3;\n      } else if (\n        lastFocusedDate &&\n        isSameDay(day.date, lastFocusedDate) &&\n        priority < 2\n      ) {\n        target = day;\n        priority = 2;\n      } else if (isSelected(day.date) && priority < 1) {\n        target = day;\n        priority = 1;\n      } else if (modifiers.today && priority < 0) {\n        target = day;\n        priority = 0;\n      }\n    }\n    if (!target) {\n      target = days.find((day) => isFocusableDay(getModifiers(day)));\n    }\n    return target;\n  })();\n\n  // While expanding, mark the 1st of the next month (the first visible day past\n  // the current month's end) with the month label.\n  const monthEnd = endOfMonth(firstMonth);\n  const nextMonthLabelIso = expand\n    ? days.find((day) => {\n        const modifiers = getModifiers(day);\n        return day.date > monthEnd && !modifiers.hidden;\n      })?.isoDate\n    : undefined;\n\n  const getFocusableDate = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n  ): Date => {\n    const delta = moveDir === \"after\" ? 1 : -1;\n    let result: Date;\n    switch (moveBy) {\n      case \"day\":\n        result = addDays(refDate, delta);\n        break;\n      case \"week\":\n        result = addDays(refDate, delta * 7);\n        break;\n      case \"month\":\n        result = addMonths(refDate, delta);\n        break;\n      case \"year\":\n        result = addMonths(refDate, delta * 12);\n        break;\n      case \"startOfWeek\":\n        result = startOfWeek(refDate, weekStart);\n        break;\n      case \"endOfWeek\":\n        result = endOfWeek(refDate, weekStart);\n        break;\n    }\n    if (moveDir === \"before\" && navStart && result < navStart) {\n      result = navStart;\n    }\n    if (moveDir === \"after\" && navEnd && result > endOfMonth(navEnd)) {\n      result = endOfMonth(navEnd);\n    }\n    return result;\n  };\n\n  const getNextFocus = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n    attempt = 0,\n  ): Date | undefined => {\n    if (attempt > 365) return undefined;\n    const next = getFocusableDate(moveBy, moveDir, refDate);\n    const isDisabled = disabled ? disabled(next) : false;\n    if (!isDisabled) return next;\n    return getNextFocus(moveBy, moveDir, next, attempt + 1);\n  };\n\n  const moveFocus = (moveBy: MoveBy, moveDir: MoveDir) => {\n    if (!focusedDate) return;\n    const next = getNextFocus(moveBy, moveDir, focusedDate);\n    if (!next) return;\n    if (!isSameMonth(next, firstMonth)) {\n      goToMonth(next);\n    }\n    setFocusedDate(next);\n  };\n\n  const handleDayClick =\n    (day: CalendarDay, modifiers: DayModifiers) => (event: MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setFocusedDate(day.date);\n      if (modifiers.disabled) return;\n      const newDate =\n        selected && isSameDay(day.date, selected) ? undefined : day.date;\n      onSelect?.(newDate, day.date);\n    };\n\n  const handleDayFocus = (day: CalendarDay) => () => {\n    setFocusedDate(day.date);\n  };\n\n  const handleDayBlur = () => {\n    setLastFocusedDate(focusedDate);\n    setFocusedDate(undefined);\n  };\n\n  const handleDayKeyDown = (event: KeyboardEvent) => {\n    const keyMap: Record<string, [MoveBy, MoveDir]> = {\n      ArrowLeft: [event.shiftKey ? \"month\" : \"day\", \"before\"],\n      ArrowRight: [event.shiftKey ? \"month\" : \"day\", \"after\"],\n      ArrowDown: [event.shiftKey ? \"year\" : \"week\", \"after\"],\n      ArrowUp: [event.shiftKey ? \"year\" : \"week\", \"before\"],\n      PageUp: [event.shiftKey ? \"year\" : \"month\", \"before\"],\n      PageDown: [event.shiftKey ? \"year\" : \"month\", \"after\"],\n      Home: [\"startOfWeek\", \"before\"],\n      End: [\"endOfWeek\", \"after\"],\n    };\n    const move = keyMap[event.key];\n    if (move) {\n      event.preventDefault();\n      event.stopPropagation();\n      const [moveBy, moveDir] = move;\n      moveFocus(moveBy, moveDir);\n    }\n  };\n\n  const weekdayHeaderStart = startOfWeek(today, weekStart);\n  const weekdays = Array.from({ length: 7 }, (_, index) => {\n    const date = addDays(weekdayHeaderStart, index);\n    return {\n      long: localization.weekdayLong(date),\n      short: localization.weekdayShort(date),\n    };\n  });\n\n  return (\n    <div\n      className={cn(\"w-full\", className)}\n      data-slot=\"booker-calendar\"\n      lang={locale}\n      dir={resolvedDir === \"rtl\" ? \"rtl\" : undefined}\n    >\n      <div className=\"flex w-full flex-col gap-2\">\n        <div aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n          {localization.monthYearLabel(firstMonth)}\n        </div>\n        <div className=\"flex h-10 items-center justify-between sm:h-9\">\n          {initialLoading ? (\n            <Skeleton className=\"h-6 w-28\" />\n          ) : (\n            <>\n              <MonthCaption\n                date={firstMonth}\n                formatter={localization.captionFormatter}\n              />\n              <nav\n                className=\"flex items-center gap-1\"\n                aria-label={resolvedLabels.nav}\n              >\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!previousMonth}\n                  aria-label={resolvedLabels.previousMonth}\n                  onClick={() => {\n                    if (previousMonth) goToMonth(previousMonth);\n                  }}\n                >\n                  <ChevronLeftIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!nextMonth}\n                  aria-label={resolvedLabels.nextMonth}\n                  onClick={() => {\n                    if (nextMonth) goToMonth(nextMonth);\n                  }}\n                >\n                  <ChevronRightIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </nav>\n            </>\n          )}\n        </div>\n        <TooltipProvider delay={0}>\n          <table\n            aria-multiselectable={false}\n            aria-label={localization.monthYearLabel(firstMonth)}\n            className=\"w-full\"\n          >\n            <thead aria-hidden=\"true\">\n              <tr className=\"flex w-full @5xl:gap-1 gap-1 py-2\">\n                {weekdays.map((weekday) => (\n                  <th\n                    key={weekday.long}\n                    aria-label={weekday.long}\n                    className=\"flex-1 font-medium text-muted-foreground/72 text-xs\"\n                    scope=\"col\"\n                  >\n                    {initialLoading ? (\n                      <Skeleton className=\"mx-auto my-0.5 h-3 w-6\" />\n                    ) : (\n                      weekday.short\n                    )}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {weeks.map((week) => (\n                <tr\n                  key={week[0]?.isoDate ?? week.at(-1)?.isoDate ?? \"week\"}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {week.map((day) => {\n                    const modifiers = getModifiers(day);\n\n                    // The day button's own styling is driven by the `data-*`\n                    // attributes below; these cell classes only cover the\n                    // layout and the outside/hidden/today states.\n                    const cellClassName = cn(\n                      \"@max-3xl:max-h-9 flex-1 p-0\",\n                      modifiers.hidden && \"invisible\",\n                      modifiers.outside && \"text-muted-foreground/50\",\n                      modifiers.today &&\n                        !dayCellsLoading &&\n                        \"*:before:pointer-events-none *:before:absolute *:before:start-1/2 *:before:bottom-1/7 *:before:z-1 *:before:size-1 *:before:-translate-x-1/2 *:before:rounded-full *:before:bg-primary *:before:transition-colors [&[data-selected]>*]:before:bg-primary-foreground\",\n                    );\n\n                    // Label (e.g. \"Aug\") sits on the 1st of the next month.\n                    const nextMonthLabel =\n                      day.isoDate === nextMonthLabelIso\n                        ? localization.monthShortLabel(day.date)\n                        : undefined;\n\n                    // Next-month days only show in the shifted current-month\n                    // view; a month-name tooltip keeps them from being mistaken\n                    // for the current month.\n                    const monthTooltip =\n                      day.outside && !modifiers.disabled && !modifiers.hidden\n                        ? localization.monthLongLabel(day.date)\n                        : undefined;\n\n                    return (\n                      <td\n                        key={day.isoDate}\n                        className={cellClassName}\n                        aria-selected={modifiers.selected || undefined}\n                        data-day={day.isoDate}\n                        data-month={day.outside ? day.dateMonthId : undefined}\n                        data-selected={modifiers.selected || undefined}\n                        data-disabled={modifiers.disabled || undefined}\n                        data-hidden={modifiers.hidden || undefined}\n                        data-outside={day.outside || undefined}\n                        data-focused={modifiers.focused || undefined}\n                        data-today={modifiers.today || undefined}\n                      >\n                        {modifiers.hidden ? null : dayCellsLoading ? (\n                          <button\n                            type=\"button\"\n                            disabled\n                            tabIndex={-1}\n                            aria-hidden=\"true\"\n                            className=\"pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 @max-3xl:max-h-9 w-full items-center justify-center rounded-lg\"\n                          >\n                            <Skeleton className=\"size-full rounded-lg\" />\n                          </button>\n                        ) : (\n                          <DayButton\n                            className=\"in-data-disabled:pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full items-center justify-center rounded-lg bg-muted in-data-disabled:bg-transparent in-data-selected:bg-primary font-medium in-data-disabled:font-normal in-data-selected:text-primary-foreground text-foreground tabular-nums in-data-disabled:opacity-50 outline-none transition-shadow duration-150 ease-out after:absolute @5xl:after:-inset-0.75 after:-inset-0.5 not-in-data-disabled:not-in-data-selected:hover:ring-2 not-in-data-disabled:not-in-data-selected:hover:ring-primary/72 focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-primary/72 sm:text-sm\"\n                            type=\"button\"\n                            focused={modifiers.focused}\n                            nextMonthLabel={nextMonthLabel}\n                            tooltip={monthTooltip}\n                            disabled={\n                              (!modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            aria-disabled={\n                              (modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            tabIndex={day === focusTarget ? 0 : -1}\n                            aria-label={(() => {\n                              let label = localization.fullDateLabel(day.date);\n                              if (modifiers.today) {\n                                label = `${resolvedLabels.today}, ${label}`;\n                              }\n                              if (modifiers.selected) {\n                                label = `${label}, ${resolvedLabels.selected}`;\n                              }\n                              return label;\n                            })()}\n                            onClick={handleDayClick(day, modifiers)}\n                            onBlur={handleDayBlur}\n                            onFocus={handleDayFocus(day)}\n                            onKeyDown={handleDayKeyDown}\n                          >\n                            {localization.dayNumber(day.date)}\n                          </DayButton>\n                        )}\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))}\n              {Array.from(\n                { length: placeholderRows },\n                (_, rowIndex) => `placeholder-row-${rowIndex}`,\n              ).map((rowKey) => (\n                <tr\n                  key={rowKey}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {weekdays.map((weekday) => (\n                    <td\n                      key={`${rowKey}-${weekday.long}`}\n                      className=\"@max-3xl:max-h-9 flex-1 p-0\"\n                    >\n                      <div className=\"@max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full\" />\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n          <Tooltip handle={monthTooltipHandle} disableHoverablePopup>\n            {({ payload }) => (\n              <TooltipPopup\n                className=\"**:data-current:opacity-100! **:data-previous:opacity-0! **:data-current:transition-none! **:data-previous:transition-none!\"\n                portalProps={{\n                  className: \"**:data-[slot=tooltip-positioner]:ease-out\",\n                }}\n              >\n                {payload}\n              </TooltipPopup>\n            )}\n          </Tooltip>\n        </TooltipProvider>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipCreateHandle,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\n// A single shared tooltip reused across every day cell (via the handle/payload\n// pattern). Reusing one instance lets it gracefully move/scale between days\n// instead of mounting a separate tooltip per cell.\nconst monthTooltipHandle = TooltipCreateHandle<string>();\n\n// Falls back to English (US) when no `locale` prop is provided.\nconst DEFAULT_LOCALE = \"en-US\";\n\ntype CalendarLabels = {\n  /** ARIA label for the previous-month navigation button. */\n  previousMonth: string;\n  /** ARIA label for the next-month navigation button. */\n  nextMonth: string;\n  /** ARIA label for the navigation toolbar. */\n  nav: string;\n  /** Prefix for today's day button label, e.g. \"Today, Monday, …\". */\n  today: string;\n  /** Suffix for the selected day button label, e.g. \"…, selected\". */\n  selected: string;\n};\n\n// English defaults. Localize by passing translated strings via the `labels`\n// prop (wire it up to your app's own i18n layer); date/weekday/month names are\n// still localized automatically from `locale` via `Intl`.\nconst DEFAULT_LABELS: CalendarLabels = {\n  previousMonth: \"Go to the Previous Month\",\n  nextMonth: \"Go to the Next Month\",\n  nav: \"Navigation bar\",\n  today: \"Today\",\n  selected: \"selected\",\n};\n\n// Resolves the text direction for the locale (e.g. \"rtl\" for Arabic/Hebrew).\nfunction getTextDirection(locale: string): \"ltr\" | \"rtl\" {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      textInfo?: { direction?: string };\n      getTextInfo?: () => { direction?: string };\n    };\n    const info =\n      typeof localeObj.getTextInfo === \"function\"\n        ? localeObj.getTextInfo()\n        : localeObj.textInfo;\n    if (info?.direction === \"rtl\") {\n      return \"rtl\";\n    }\n  } catch {\n    // Fall through to the ltr default below.\n  }\n  return \"ltr\";\n}\n\n// Locale-aware formatting/ordering, derived from a BCP-47 locale string.\ntype Localization = {\n  weekStartsOn: number;\n  monthYearLabel: (date: Date) => string;\n  fullDateLabel: (date: Date) => string;\n  monthShortLabel: (date: Date) => string;\n  monthLongLabel: (date: Date) => string;\n  weekdayLong: (date: Date) => string;\n  weekdayShort: (date: Date) => string;\n  dayNumber: (date: Date) => string;\n  captionFormatter: Intl.DateTimeFormat;\n};\n\n// 1 = Monday … 7 = Sunday (ISO) → JS getDay() index (0 = Sunday … 6 = Saturday).\nfunction getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction buildLocalization(\n  locale: string,\n  weekStartsOnOverride?: number,\n): Localization {\n  const longDateFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n    year: \"numeric\",\n    month: \"long\",\n    day: \"numeric\",\n  });\n  const monthYearFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n    year: \"numeric\",\n  });\n  const monthShortFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  });\n  const monthLongFormatter = new Intl.DateTimeFormat(locale, {\n    month: \"long\",\n  });\n  const weekdayLongFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"long\",\n  });\n  const weekdayShortFormatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  });\n  const dayFormatter = new Intl.DateTimeFormat(locale, { day: \"numeric\" });\n\n  return {\n    weekStartsOn: weekStartsOnOverride ?? getWeekStartsOn(locale),\n    monthYearLabel: (date) => monthYearFormatter.format(date),\n    fullDateLabel: (date) => longDateFormatter.format(date),\n    monthShortLabel: (date) => monthShortFormatter.format(date),\n    monthLongLabel: (date) => monthLongFormatter.format(date),\n    weekdayLong: (date) => weekdayLongFormatter.format(date),\n    weekdayShort: (date) => weekdayShortFormatter.format(date),\n    dayNumber: (date) => dayFormatter.format(date),\n    captionFormatter: monthYearFormatter,\n  };\n}\n\nfunction pad2(value: number): string {\n  return value < 10 ? `0${value}` : String(value);\n}\n\nfunction isoDate(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;\n}\n\nfunction isoMonth(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}`;\n}\n\nfunction startOfDay(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n}\n\nfunction startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction addDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction addMonths(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth() + amount, date.getDate());\n}\n\nfunction startOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = startOfDay(date);\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return addDays(day, -diff);\n}\n\nfunction endOfWeek(date: Date, weekStartsOn = 0): Date {\n  return addDays(startOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nfunction isSameMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nfunction differenceInCalendarMonths(a: Date, b: Date): number {\n  return (\n    (a.getFullYear() - b.getFullYear()) * 12 + (a.getMonth() - b.getMonth())\n  );\n}\n\ntype CalendarDay = {\n  date: Date;\n  outside: boolean;\n  isoDate: string;\n  dateMonthId: string;\n};\n\ntype DayModifiers = {\n  focused: boolean;\n  disabled: boolean;\n  hidden: boolean;\n  outside: boolean;\n  today: boolean;\n  selected: boolean;\n};\n\n// Builds the month grid as full weeks covering the month.\n//\n// `shiftRows` slides the window forward by that many weeks, dropping the\n// month's earliest week(s). When `fillToSix` is set the grid is then padded to\n// a full 6 rows with days from the next month. Together they keep today's week\n// plus the next two visible without exceeding 6 rows; with both at their\n// defaults the month spans only the weeks it naturally needs.\nfunction buildCalendarDays(\n  month: Date,\n  weekStartsOn: number,\n  shiftRows: number,\n  fillToSix: boolean,\n): CalendarDay[] {\n  const monthStart = startOfMonth(month);\n  const offset = shiftRows * 7;\n  const gridStart = addDays(startOfWeek(monthStart, weekStartsOn), offset);\n  const gridEnd = addDays(endOfWeek(endOfMonth(month), weekStartsOn), offset);\n\n  const dates: Date[] = [];\n  for (let cursor = gridStart; cursor <= gridEnd; cursor = addDays(cursor, 1)) {\n    dates.push(cursor);\n  }\n\n  if (fillToSix) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(addDays(lastDate, 1));\n    }\n  }\n\n  return dates.map((date) => ({\n    date,\n    outside: !isSameMonth(date, month),\n    isoDate: isoDate(date),\n    dateMonthId: isoMonth(date),\n  }));\n}\n\nfunction chunkWeeks(days: CalendarDay[]): CalendarDay[][] {\n  const weeks: CalendarDay[][] = [];\n  for (let i = 0; i < days.length; i += 7) {\n    weeks.push(days.slice(i, i + 7));\n  }\n  return weeks;\n}\n\nfunction isFocusableDay(modifiers: DayModifiers): boolean {\n  return !modifiers.disabled && !modifiers.hidden && !modifiers.outside;\n}\n\n// A single day cell's button. Focuses itself when it becomes the roving-tabindex\n// target so keyboard navigation moves the actual DOM focus.\nfunction DayButton({\n  focused,\n  nextMonthLabel,\n  tooltip,\n  children,\n  ...buttonProps\n}: ComponentProps<\"button\"> & {\n  focused: boolean;\n  nextMonthLabel?: string;\n  tooltip?: string;\n}): ReactElement {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (focused) ref.current?.focus();\n  }, [focused]);\n\n  const button = (\n    <button ref={ref} {...buttonProps}>\n      {children}\n      {nextMonthLabel ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute @5xl:end-1.5 end-1 @3xl:top-1.5 top-1 font-medium in-data-selected:text-primary-foreground/72 text-[10px] text-muted-foreground leading-none\"\n        >\n          {nextMonthLabel}\n        </span>\n      ) : null}\n    </button>\n  );\n\n  if (!tooltip) return button;\n\n  return (\n    <TooltipTrigger\n      handle={monthTooltipHandle}\n      payload={tooltip}\n      render={button}\n    />\n  );\n}\n\n// Month + year heading; the year is muted via formatToParts so it stays\n// locale-correct (some locales render \"2026 June\").\nexport function MonthCaption({\n  date,\n  formatter,\n  className,\n  muteYear = true,\n}: {\n  date: Date;\n  formatter: Intl.DateTimeFormat;\n  className?: string;\n  muteYear?: boolean;\n}): ReactElement {\n  return (\n    <div\n      className={cn(\n        \"@5xl:ps-1 font-heading @3xl:@max-5xl:text-base text-lg\",\n        className,\n      )}\n    >\n      {formatter.formatToParts(date).map((part) =>\n        part.type === \"year\" ? (\n          <span\n            key={`year-${part.value}`}\n            className={muteYear ? \"text-muted-foreground/72\" : undefined}\n          >\n            {part.value}\n          </span>\n        ) : (\n          part.value\n        ),\n      )}\n    </div>\n  );\n}\n\ntype MoveBy = \"day\" | \"week\" | \"month\" | \"year\" | \"startOfWeek\" | \"endOfWeek\";\ntype MoveDir = \"before\" | \"after\";\n\nexport type BookerCalendarProps = {\n  className?: string;\n  /**\n   * For the current month, once today reaches the 4th row, keep its week plus\n   * the next two visible within the 6-row grid: extend into next-month days,\n   * and slide the window down (dropping early weeks) only when today sits too\n   * low for those two weeks to fit. Off renders a plain month grid. On by\n   * default.\n   */\n  shiftWeeks?: boolean;\n  availabilityLoading?: boolean;\n  initialLoading?: boolean;\n  month?: Date;\n  defaultMonth?: Date;\n  startMonth?: Date;\n  endMonth?: Date;\n  selected?: Date;\n  onSelect?: (date: Date | undefined, triggerDate: Date) => void;\n  onMonthChange?: (month: Date) => void;\n  disabled?: (date: Date) => boolean;\n  /** BCP-47 locale tag used to localize day/month/weekday names and ARIA labels. */\n  locale?: string;\n  /** Override the locale's first day of the week (0 = Sunday … 6 = Saturday). */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /** Text direction; defaults to the locale's direction (\"rtl\" for ar/he/…). */\n  dir?: \"ltr\" | \"rtl\";\n  /** Translatable strings for the navigation buttons and day button states. */\n  labels?: Partial<CalendarLabels>;\n  /** Reference \"today\" for highlighting and week shifting; defaults to now. */\n  today?: Date;\n};\n\nexport function BookerCalendar({\n  className,\n  shiftWeeks = true,\n  availabilityLoading = false,\n  initialLoading = false,\n  month,\n  defaultMonth,\n  startMonth,\n  endMonth,\n  selected,\n  onSelect,\n  onMonthChange,\n  disabled,\n  locale = DEFAULT_LOCALE,\n  weekStartsOn,\n  dir,\n  labels,\n  today: todayProp,\n}: BookerCalendarProps): ReactElement {\n  const dayCellsLoading = initialLoading || availabilityLoading;\n  const localization = useMemo(\n    () => buildLocalization(locale, weekStartsOn),\n    [locale, weekStartsOn],\n  );\n  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };\n  const resolvedDir = dir ?? getTextDirection(locale);\n  const weekStart = localization.weekStartsOn;\n\n  const today = todayProp ?? new Date();\n\n  // The month is controlled by the parent (via `month`/`onMonthChange`), but we\n  // keep an internal fallback so the calendar works uncontrolled too.\n  const [internalMonth, setInternalMonth] = useState(() =>\n    startOfMonth(month ?? defaultMonth ?? today),\n  );\n  const monthTime = month ? startOfMonth(month).getTime() : undefined;\n  useEffect(() => {\n    if (monthTime !== undefined) {\n      setInternalMonth(new Date(monthTime));\n    }\n  }, [monthTime]);\n\n  const firstMonth = month ? startOfMonth(month) : internalMonth;\n\n  const [focusedDate, setFocusedDate] = useState<Date | undefined>(undefined);\n  const [lastFocusedDate, setLastFocusedDate] = useState<Date | undefined>(\n    undefined,\n  );\n\n  const navStart = startMonth ? startOfMonth(startMonth) : undefined;\n  const navEnd = endMonth ? startOfMonth(endMonth) : undefined;\n\n  const previousMonth =\n    navStart && differenceInCalendarMonths(firstMonth, navStart) <= 0\n      ? undefined\n      : addMonths(firstMonth, -1);\n  const nextMonth =\n    navEnd && differenceInCalendarMonths(navEnd, firstMonth) <= 0\n      ? undefined\n      : addMonths(firstMonth, 1);\n\n  const goToMonth = useCallback(\n    (date: Date) => {\n      let newMonth = startOfMonth(date);\n      if (navStart && newMonth < navStart) {\n        newMonth = navStart;\n      }\n      if (navEnd && newMonth > navEnd) {\n        newMonth = navEnd;\n      }\n      setInternalMonth(newMonth);\n      onMonthChange?.(newMonth);\n    },\n    [navEnd, navStart, onMonthChange],\n  );\n\n  // For the live current month, once today reaches the 4th row, guarantee its\n  // week plus the next two are visible. todayRow is today's 0-based row in the\n  // natural (unshifted) grid.\n  const naturalGridStart = startOfWeek(startOfMonth(firstMonth), weekStart);\n  const todayRow = Math.floor(\n    Math.round(\n      (startOfDay(today).getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand = shiftWeeks && isSameMonth(firstMonth, today) && todayRow >= 3;\n  // Extend downward first; only drop early weeks (shift) when today sits so low\n  // that the two trailing weeks wouldn't fit within the 6-row cap.\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const days = buildCalendarDays(firstMonth, weekStart, shiftRows, expand);\n  const weeks = chunkWeeks(days);\n\n  // Reserve any missing rows up to 6 (the most any month needs) with empty\n  // placeholders, so the grid keeps a constant height across navigation. This\n  // is 0 when expanding, since those months already fill all 6 rows with days.\n  const placeholderRows = Math.max(0, 6 - weeks.length);\n\n  const isSelected = (date: Date): boolean =>\n    selected ? isSameDay(selected, date) : false;\n\n  const getModifiers = (day: CalendarDay): DayModifiers => {\n    const { date, outside } = day;\n    const isBeforeNavStart = Boolean(navStart && date < navStart);\n    const isAfterNavEnd = Boolean(navEnd && date > endOfMonth(navEnd));\n    const isDisabled = disabled ? disabled(date) : false;\n    // Leading previous-month days are never shown (past days aren't relevant).\n    // Next-month days only belong in the grid while expanding; otherwise the\n    // empty placeholder rows reserve their space instead of spilling over.\n    const isPrevMonthDay = date < startOfMonth(firstMonth);\n    const isNextMonthDay = date > endOfMonth(firstMonth);\n    const isHidden =\n      isBeforeNavStart ||\n      isAfterNavEnd ||\n      isPrevMonthDay ||\n      (!expand && isNextMonthDay);\n    const isToday = isSameDay(date, today);\n    const isFocused =\n      !isHidden &&\n      !outside &&\n      focusedDate !== undefined &&\n      isSameDay(date, focusedDate);\n\n    return {\n      focused: isFocused,\n      disabled: isDisabled,\n      hidden: isHidden,\n      outside,\n      today: isToday,\n      selected: isSelected(date),\n    };\n  };\n\n  // Roving tabindex target. Priority: focused > last focused > selected > today\n  // > first focusable day.\n  const focusTarget = ((): CalendarDay | undefined => {\n    let target: CalendarDay | undefined;\n    let priority = -1;\n    for (const day of days) {\n      const modifiers = getModifiers(day);\n      if (!isFocusableDay(modifiers)) continue;\n      if (modifiers.focused && priority < 3) {\n        target = day;\n        priority = 3;\n      } else if (\n        lastFocusedDate &&\n        isSameDay(day.date, lastFocusedDate) &&\n        priority < 2\n      ) {\n        target = day;\n        priority = 2;\n      } else if (isSelected(day.date) && priority < 1) {\n        target = day;\n        priority = 1;\n      } else if (modifiers.today && priority < 0) {\n        target = day;\n        priority = 0;\n      }\n    }\n    if (!target) {\n      target = days.find((day) => isFocusableDay(getModifiers(day)));\n    }\n    return target;\n  })();\n\n  // While expanding, mark the 1st of the next month (the first visible day past\n  // the current month's end) with the month label.\n  const monthEnd = endOfMonth(firstMonth);\n  const nextMonthLabelIso = expand\n    ? days.find((day) => {\n        const modifiers = getModifiers(day);\n        return day.date > monthEnd && !modifiers.hidden;\n      })?.isoDate\n    : undefined;\n\n  const getFocusableDate = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n  ): Date => {\n    const delta = moveDir === \"after\" ? 1 : -1;\n    let result: Date;\n    switch (moveBy) {\n      case \"day\":\n        result = addDays(refDate, delta);\n        break;\n      case \"week\":\n        result = addDays(refDate, delta * 7);\n        break;\n      case \"month\":\n        result = addMonths(refDate, delta);\n        break;\n      case \"year\":\n        result = addMonths(refDate, delta * 12);\n        break;\n      case \"startOfWeek\":\n        result = startOfWeek(refDate, weekStart);\n        break;\n      case \"endOfWeek\":\n        result = endOfWeek(refDate, weekStart);\n        break;\n    }\n    if (moveDir === \"before\" && navStart && result < navStart) {\n      result = navStart;\n    }\n    if (moveDir === \"after\" && navEnd && result > endOfMonth(navEnd)) {\n      result = endOfMonth(navEnd);\n    }\n    return result;\n  };\n\n  const getNextFocus = (\n    moveBy: MoveBy,\n    moveDir: MoveDir,\n    refDate: Date,\n    attempt = 0,\n  ): Date | undefined => {\n    if (attempt > 365) return undefined;\n    const next = getFocusableDate(moveBy, moveDir, refDate);\n    const isDisabled = disabled ? disabled(next) : false;\n    if (!isDisabled) return next;\n    return getNextFocus(moveBy, moveDir, next, attempt + 1);\n  };\n\n  const moveFocus = (moveBy: MoveBy, moveDir: MoveDir) => {\n    if (!focusedDate) return;\n    const next = getNextFocus(moveBy, moveDir, focusedDate);\n    if (!next) return;\n    if (!isSameMonth(next, firstMonth)) {\n      goToMonth(next);\n    }\n    setFocusedDate(next);\n  };\n\n  const handleDayClick =\n    (day: CalendarDay, modifiers: DayModifiers) => (event: MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setFocusedDate(day.date);\n      if (modifiers.disabled) return;\n      const newDate =\n        selected && isSameDay(day.date, selected) ? undefined : day.date;\n      onSelect?.(newDate, day.date);\n    };\n\n  const handleDayFocus = (day: CalendarDay) => () => {\n    setFocusedDate(day.date);\n  };\n\n  const handleDayBlur = () => {\n    setLastFocusedDate(focusedDate);\n    setFocusedDate(undefined);\n  };\n\n  const handleDayKeyDown = (event: KeyboardEvent) => {\n    const keyMap: Record<string, [MoveBy, MoveDir]> = {\n      ArrowLeft: [event.shiftKey ? \"month\" : \"day\", \"before\"],\n      ArrowRight: [event.shiftKey ? \"month\" : \"day\", \"after\"],\n      ArrowDown: [event.shiftKey ? \"year\" : \"week\", \"after\"],\n      ArrowUp: [event.shiftKey ? \"year\" : \"week\", \"before\"],\n      PageUp: [event.shiftKey ? \"year\" : \"month\", \"before\"],\n      PageDown: [event.shiftKey ? \"year\" : \"month\", \"after\"],\n      Home: [\"startOfWeek\", \"before\"],\n      End: [\"endOfWeek\", \"after\"],\n    };\n    const move = keyMap[event.key];\n    if (move) {\n      event.preventDefault();\n      event.stopPropagation();\n      const [moveBy, moveDir] = move;\n      moveFocus(moveBy, moveDir);\n    }\n  };\n\n  const weekdayHeaderStart = startOfWeek(today, weekStart);\n  const weekdays = Array.from({ length: 7 }, (_, index) => {\n    const date = addDays(weekdayHeaderStart, index);\n    return {\n      long: localization.weekdayLong(date),\n      short: localization.weekdayShort(date),\n    };\n  });\n\n  return (\n    <div\n      className={cn(\"w-full\", className)}\n      data-slot=\"booker-calendar\"\n      lang={locale}\n      dir={resolvedDir === \"rtl\" ? \"rtl\" : undefined}\n    >\n      <div className=\"flex w-full flex-col gap-2\">\n        <div aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n          {localization.monthYearLabel(firstMonth)}\n        </div>\n        <div className=\"flex h-10 items-center justify-between sm:h-9\">\n          {initialLoading ? (\n            <Skeleton className=\"h-6 w-28\" />\n          ) : (\n            <>\n              <MonthCaption\n                date={firstMonth}\n                formatter={localization.captionFormatter}\n              />\n              <nav\n                className=\"flex items-center gap-1\"\n                aria-label={resolvedLabels.nav}\n              >\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!previousMonth}\n                  aria-label={resolvedLabels.previousMonth}\n                  onClick={() => {\n                    if (previousMonth) goToMonth(previousMonth);\n                  }}\n                >\n                  <ChevronLeftIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-lg\"\n                  disabled={!nextMonth}\n                  aria-label={resolvedLabels.nextMonth}\n                  onClick={() => {\n                    if (nextMonth) goToMonth(nextMonth);\n                  }}\n                >\n                  <ChevronRightIcon\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </nav>\n            </>\n          )}\n        </div>\n        <TooltipProvider delay={0}>\n          <table\n            aria-multiselectable={false}\n            aria-label={localization.monthYearLabel(firstMonth)}\n            className=\"w-full\"\n          >\n            <thead aria-hidden=\"true\">\n              <tr className=\"flex w-full @5xl:gap-1 gap-1 py-2\">\n                {weekdays.map((weekday) => (\n                  <th\n                    key={weekday.long}\n                    aria-label={weekday.long}\n                    className=\"flex-1 font-medium text-muted-foreground/72 text-xs\"\n                    scope=\"col\"\n                  >\n                    {initialLoading ? (\n                      <Skeleton className=\"mx-auto my-0.5 h-3 w-6\" />\n                    ) : (\n                      weekday.short\n                    )}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {weeks.map((week) => (\n                <tr\n                  key={week[0]?.isoDate ?? week.at(-1)?.isoDate ?? \"week\"}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {week.map((day) => {\n                    const modifiers = getModifiers(day);\n\n                    // The day button's own styling is driven by the `data-*`\n                    // attributes below; these cell classes only cover the\n                    // layout and the outside/hidden/today states.\n                    const cellClassName = cn(\n                      \"@max-3xl:max-h-9 flex-1 p-0\",\n                      modifiers.hidden && \"invisible\",\n                      modifiers.outside && \"text-muted-foreground/50\",\n                      modifiers.today &&\n                        !dayCellsLoading &&\n                        \"*:before:pointer-events-none *:before:absolute *:before:start-1/2 *:before:bottom-1/7 *:before:z-1 *:before:size-1 *:before:-translate-x-1/2 *:before:rounded-full *:before:bg-primary *:before:transition-colors [&[data-selected]>*]:before:bg-primary-foreground\",\n                    );\n\n                    // Label (e.g. \"Aug\") sits on the 1st of the next month.\n                    const nextMonthLabel =\n                      day.isoDate === nextMonthLabelIso\n                        ? localization.monthShortLabel(day.date)\n                        : undefined;\n\n                    // Next-month days only show in the shifted current-month\n                    // view; a month-name tooltip keeps them from being mistaken\n                    // for the current month.\n                    const monthTooltip =\n                      day.outside && !modifiers.disabled && !modifiers.hidden\n                        ? localization.monthLongLabel(day.date)\n                        : undefined;\n\n                    return (\n                      <td\n                        key={day.isoDate}\n                        className={cellClassName}\n                        aria-selected={modifiers.selected || undefined}\n                        data-day={day.isoDate}\n                        data-month={day.outside ? day.dateMonthId : undefined}\n                        data-selected={modifiers.selected || undefined}\n                        data-disabled={modifiers.disabled || undefined}\n                        data-hidden={modifiers.hidden || undefined}\n                        data-outside={day.outside || undefined}\n                        data-focused={modifiers.focused || undefined}\n                        data-today={modifiers.today || undefined}\n                      >\n                        {modifiers.hidden ? null : dayCellsLoading ? (\n                          <button\n                            type=\"button\"\n                            disabled\n                            tabIndex={-1}\n                            aria-hidden=\"true\"\n                            className=\"pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 @max-3xl:max-h-9 w-full items-center justify-center rounded-lg\"\n                          >\n                            <Skeleton className=\"size-full rounded-lg\" />\n                          </button>\n                        ) : (\n                          <DayButton\n                            className=\"in-data-disabled:pointer-events-none relative flex @max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full items-center justify-center rounded-lg bg-muted in-data-disabled:bg-transparent in-data-selected:bg-primary font-medium in-data-disabled:font-normal in-data-selected:text-primary-foreground text-foreground tabular-nums in-data-disabled:opacity-50 outline-none transition-shadow duration-150 ease-out after:absolute @5xl:after:-inset-0.75 after:-inset-0.5 not-in-data-disabled:not-in-data-selected:hover:ring-2 not-in-data-disabled:not-in-data-selected:hover:ring-primary/72 focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-primary/72 sm:text-sm\"\n                            type=\"button\"\n                            focused={modifiers.focused}\n                            nextMonthLabel={nextMonthLabel}\n                            tooltip={monthTooltip}\n                            disabled={\n                              (!modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            aria-disabled={\n                              (modifiers.focused && modifiers.disabled) ||\n                              undefined\n                            }\n                            tabIndex={day === focusTarget ? 0 : -1}\n                            aria-label={(() => {\n                              let label = localization.fullDateLabel(day.date);\n                              if (modifiers.today) {\n                                label = `${resolvedLabels.today}, ${label}`;\n                              }\n                              if (modifiers.selected) {\n                                label = `${label}, ${resolvedLabels.selected}`;\n                              }\n                              return label;\n                            })()}\n                            onClick={handleDayClick(day, modifiers)}\n                            onBlur={handleDayBlur}\n                            onFocus={handleDayFocus(day)}\n                            onKeyDown={handleDayKeyDown}\n                          >\n                            {localization.dayNumber(day.date)}\n                          </DayButton>\n                        )}\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))}\n              {Array.from(\n                { length: placeholderRows },\n                (_, rowIndex) => `placeholder-row-${rowIndex}`,\n              ).map((rowKey) => (\n                <tr\n                  key={rowKey}\n                  className=\"@5xl:mt-1.5 mt-1 flex w-full @5xl:gap-1.5 gap-1\"\n                >\n                  {weekdays.map((weekday) => (\n                    <td\n                      key={`${rowKey}-${weekday.long}`}\n                      className=\"@max-3xl:max-h-9 flex-1 p-0\"\n                    >\n                      <div className=\"@max-3xl:aspect-auto aspect-square @max-3xl:h-9 w-full\" />\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n          <Tooltip handle={monthTooltipHandle} disableHoverablePopup>\n            {({ payload }) => (\n              <TooltipPopup\n                className=\"**:data-current:opacity-100! **:data-previous:opacity-0! **:data-current:transition-none! **:data-previous:transition-none!\"\n                portalProps={{\n                  className: \"**:data-[slot=tooltip-positioner]:ease-out\",\n                }}\n              >\n                {payload}\n              </TooltipPopup>\n            )}\n          </Tooltip>\n        </TooltipProvider>\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/booker-calendar.tsx"
     },
@@ -63,7 +72,7 @@
     },
     {
       "path": "registry/default/atoms/booker/booker-labels.ts",
-      "content": "export type BookerLabels = {\n  errorNotFound: string;\n  errorUnpublished: string;\n  errorNetwork: string;\n  errorGeneric: string;\n  retry: string;\n  durationUnknown: string;\n  durationMinutes: (minutes: number) => string;\n  noAvailableTimes: string;\n  noSlotsAvailable: string;\n  noSlotsThisDay: string;\n  noSlotsThisMonth: string;\n  viewFirstAvailability: string;\n  use24Hour: string;\n  hour12Short: string;\n  hour24Short: string;\n  headerImageAlt: (hostName: string, eventTitle: string) => string;\n  locationOptions: (count: number) => string;\n  locationSelectOnNextStep: string;\n};\n\nconst DEFAULT_BOOKER_LABELS: BookerLabels = {\n  errorNotFound: \"This event type could not be found.\",\n  errorUnpublished:\n    \"This event type is not currently published and is not accepting bookings.\",\n  errorNetwork: \"Unable to connect. Please check your internet connection.\",\n  errorGeneric: \"Something went wrong loading the booker.\",\n  retry: \"Try again\",\n  durationUnknown: \"Unknown\",\n  durationMinutes: (minutes) => `${minutes} min`,\n  noAvailableTimes: \"No available times\",\n  noSlotsAvailable: \"There are no open slots.\",\n  noSlotsThisDay: \"There are no open slots on this day.\",\n  noSlotsThisMonth: \"There are no open slots this month.\",\n  viewFirstAvailability: \"View first availability\",\n  use24Hour: \"Use 24-hour time\",\n  hour12Short: \"12h\",\n  hour24Short: \"24h\",\n  headerImageAlt: (hostName, eventTitle) =>\n    `Banner for ${eventTitle} with ${hostName}`,\n  locationOptions: (count) => `${count} location options`,\n  locationSelectOnNextStep: \"Select on the next step\",\n};\n\nexport function getBookerLabels(labels?: Partial<BookerLabels>): BookerLabels {\n  return { ...DEFAULT_BOOKER_LABELS, ...labels };\n}\n",
+      "content": "export type BookerLabels = {\n  errorNotFound: string;\n  errorUnpublished: string;\n  errorNetwork: string;\n  errorGeneric: string;\n  retry: string;\n  durationUnknown: string;\n  durationMinutes: (minutes: number) => string;\n  noAvailableTimes: string;\n  noSlotsAvailable: string;\n  noSlotsThisDay: string;\n  noSlotsThisMonth: string;\n  viewFirstAvailability: string;\n  use24Hour: string;\n  hour12Short: string;\n  hour24Short: string;\n  headerImageAlt: (hostName: string, eventTitle: string) => string;\n  locationOptions: (count: number) => string;\n  locationSelectOnNextStep: string;\n  confirmYourName: string;\n  confirmEmail: string;\n  confirmNotes: string;\n  confirmNotesPlaceholder: string;\n  confirmAddGuests: string;\n  confirmBack: string;\n  confirmSubmit: string;\n  confirmTermsPrefix: string;\n  confirmTerms: string;\n  confirmPrivacyPolicy: string;\n};\n\nconst DEFAULT_BOOKER_LABELS: BookerLabels = {\n  errorNotFound: \"This event type could not be found.\",\n  errorUnpublished:\n    \"This event type is not currently published and is not accepting bookings.\",\n  errorNetwork: \"Unable to connect. Please check your internet connection.\",\n  errorGeneric: \"Something went wrong loading the booker.\",\n  retry: \"Try again\",\n  durationUnknown: \"Unknown\",\n  durationMinutes: (minutes) => `${minutes} min`,\n  noAvailableTimes: \"No available times\",\n  noSlotsAvailable: \"There are no open slots.\",\n  noSlotsThisDay: \"There are no open slots on this day.\",\n  noSlotsThisMonth: \"There are no open slots this month.\",\n  viewFirstAvailability: \"View first availability\",\n  use24Hour: \"Use 24-hour time\",\n  hour12Short: \"12h\",\n  hour24Short: \"24h\",\n  headerImageAlt: (hostName, eventTitle) =>\n    `Banner for ${eventTitle} with ${hostName}`,\n  locationOptions: (count) => `${count} location options`,\n  locationSelectOnNextStep: \"Select on the next step\",\n  confirmYourName: \"Your name\",\n  confirmEmail: \"Email address\",\n  confirmNotes: \"Additional notes\",\n  confirmNotesPlaceholder:\n    \"Please share anything that will help prepare for our meeting.\",\n  confirmAddGuests: \"Add guests\",\n  confirmBack: \"Back\",\n  confirmSubmit: \"Confirm\",\n  confirmTermsPrefix: \"By proceeding, you agree to Cal.com's\",\n  confirmTerms: \"Terms\",\n  confirmPrivacyPolicy: \"Privacy Policy\",\n};\n\nexport function getBookerLabels(labels?: Partial<BookerLabels>): BookerLabels {\n  return { ...DEFAULT_BOOKER_LABELS, ...labels };\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/booker-labels.ts"
     },
@@ -87,7 +96,7 @@
     },
     {
       "path": "registry/default/atoms/booker/timezone-picker.tsx",
-      "content": "\"use client\";\n\nimport { ChevronsUpDownIcon, GlobeIcon, SearchIcon } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\n\ntype TimezoneOption = {\n  label: string;\n  numericOffset: number;\n  offset: string;\n  value: string;\n};\n\ntype TimezonePickerProps = {\n  value: string;\n  onValueChange: (value: string) => void;\n};\n\nexport function TimezonePicker({ value, onValueChange }: TimezonePickerProps) {\n  const timezoneOptions = useMemo<TimezoneOption[]>(() => {\n    const rawTimezones =\n      typeof Intl.supportedValuesOf === \"function\"\n        ? Intl.supportedValuesOf(\"timeZone\")\n        : [\n            \"UTC\",\n            \"Europe/Rome\",\n            \"Europe/London\",\n            \"America/New_York\",\n            \"America/Los_Angeles\",\n            \"Asia/Tokyo\",\n          ];\n\n    return rawTimezones\n      .map((timezone) => {\n        const formatter = new Intl.DateTimeFormat(\"en\", {\n          timeZone: timezone,\n          timeZoneName: \"shortOffset\",\n        });\n        const parts = formatter.formatToParts(new Date());\n        const offset =\n          parts.find((part) => part.type === \"timeZoneName\")?.value || \"\";\n        const modifiedOffset = offset === \"GMT\" ? \"GMT+0\" : offset;\n\n        const offsetMatch = offset.match(/GMT([+-]?)(\\d+)(?::(\\d+))?/);\n        const sign = offsetMatch?.[1] === \"-\" ? -1 : 1;\n        const hours = Number.parseInt(offsetMatch?.[2] || \"0\", 10);\n        const minutes = Number.parseInt(offsetMatch?.[3] || \"0\", 10);\n        const totalMinutes = sign * (hours * 60 + minutes);\n\n        return {\n          label: timezone.replace(/_/g, \" \"),\n          numericOffset: totalMinutes,\n          offset: modifiedOffset,\n          value: timezone,\n        };\n      })\n      .sort((a, b) => a.numericOffset - b.numericOffset);\n  }, []);\n\n  const selectedTimezoneItem =\n    timezoneOptions.find((item) => item.value === value) ?? null;\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <GlobeIcon\n        className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n        aria-hidden=\"true\"\n      />\n      <Combobox\n        autoHighlight\n        itemToStringValue={(item) => item?.label ?? \"\"}\n        items={timezoneOptions}\n        onValueChange={(next) => onValueChange(next?.value ?? value)}\n        value={selectedTimezoneItem}\n      >\n        <ComboboxTrigger\n          render={\n            <Button\n              className=\"min-w-0 shrink justify-between font-normal\"\n              size=\"sm\"\n              variant=\"outline\"\n            />\n          }\n        >\n          <span className=\"truncate\">\n            <ComboboxValue placeholder=\"Select timezone\" />\n          </span>\n          <ChevronsUpDownIcon className=\"-me-1!\" />\n        </ComboboxTrigger>\n        <ComboboxPopup aria-label=\"Select timezone\" className=\"w-72\">\n          <div className=\"border-b p-2\">\n            <ComboboxInput\n              size=\"sm\"\n              className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n              placeholder=\"e.g. Europe/London\"\n              showTrigger={false}\n              startAddon={<SearchIcon />}\n            />\n          </div>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item.value}\n                value={item}\n                className=\"pe-2 *:[div]:flex *:[div]:min-w-0 *:[div]:items-center *:[div]:justify-between *:[div]:gap-2\"\n              >\n                <span className=\"truncate\">{item.label}</span>\n                <span className=\"whitespace-nowrap font-medium text-muted-foreground text-xs sm:text-[10px]\">\n                  {item.offset}\n                </span>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { ChevronsUpDownIcon, GlobeIcon, SearchIcon } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\n\ntype TimezoneOption = {\n  label: string;\n  numericOffset: number;\n  offset: string;\n  value: string;\n};\n\ntype TimezonePickerProps = {\n  value: string;\n  onValueChange: (value: string) => void;\n};\n\nfunction formatTimezoneLabel(timezone: string): string {\n  return timezone.replace(/_/g, \" \");\n}\n\nexport function TimezoneDisplay({ value }: { value: string }) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <GlobeIcon\n        className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n        aria-hidden=\"true\"\n      />\n      <span>{formatTimezoneLabel(value)}</span>\n    </div>\n  );\n}\n\nexport function TimezonePicker({ value, onValueChange }: TimezonePickerProps) {\n  const timezoneOptions = useMemo<TimezoneOption[]>(() => {\n    const rawTimezones =\n      typeof Intl.supportedValuesOf === \"function\"\n        ? Intl.supportedValuesOf(\"timeZone\")\n        : [\n            \"UTC\",\n            \"Europe/Rome\",\n            \"Europe/London\",\n            \"America/New_York\",\n            \"America/Los_Angeles\",\n            \"Asia/Tokyo\",\n          ];\n\n    return rawTimezones\n      .map((timezone) => {\n        const formatter = new Intl.DateTimeFormat(\"en\", {\n          timeZone: timezone,\n          timeZoneName: \"shortOffset\",\n        });\n        const parts = formatter.formatToParts(new Date());\n        const offset =\n          parts.find((part) => part.type === \"timeZoneName\")?.value || \"\";\n        const modifiedOffset = offset === \"GMT\" ? \"GMT+0\" : offset;\n\n        const offsetMatch = offset.match(/GMT([+-]?)(\\d+)(?::(\\d+))?/);\n        const sign = offsetMatch?.[1] === \"-\" ? -1 : 1;\n        const hours = Number.parseInt(offsetMatch?.[2] || \"0\", 10);\n        const minutes = Number.parseInt(offsetMatch?.[3] || \"0\", 10);\n        const totalMinutes = sign * (hours * 60 + minutes);\n\n        return {\n          label: formatTimezoneLabel(timezone),\n          numericOffset: totalMinutes,\n          offset: modifiedOffset,\n          value: timezone,\n        };\n      })\n      .sort((a, b) => a.numericOffset - b.numericOffset);\n  }, []);\n\n  const selectedTimezoneItem =\n    timezoneOptions.find((item) => item.value === value) ?? null;\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <GlobeIcon\n        className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n        aria-hidden=\"true\"\n      />\n      <Combobox\n        autoHighlight\n        itemToStringValue={(item) => item?.label ?? \"\"}\n        items={timezoneOptions}\n        onValueChange={(next) => onValueChange(next?.value ?? value)}\n        value={selectedTimezoneItem}\n      >\n        <ComboboxTrigger\n          render={\n            <Button\n              className=\"min-w-0 shrink justify-between font-normal\"\n              size=\"sm\"\n              variant=\"outline\"\n            />\n          }\n        >\n          <span className=\"truncate\">\n            <ComboboxValue placeholder=\"Select timezone\" />\n          </span>\n          <ChevronsUpDownIcon className=\"-me-1!\" />\n        </ComboboxTrigger>\n        <ComboboxPopup aria-label=\"Select timezone\" className=\"w-72\">\n          <div className=\"border-b p-2\">\n            <ComboboxInput\n              size=\"sm\"\n              className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n              placeholder=\"e.g. Europe/London\"\n              showTrigger={false}\n              startAddon={<SearchIcon />}\n            />\n          </div>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item.value}\n                value={item}\n                className=\"pe-2 *:[div]:flex *:[div]:min-w-0 *:[div]:items-center *:[div]:justify-between *:[div]:gap-2\"\n              >\n                <span className=\"truncate\">{item.label}</span>\n                <span className=\"whitespace-nowrap font-medium text-muted-foreground text-xs sm:text-[10px]\">\n                  {item.offset}\n                </span>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/timezone-picker.tsx"
     },
@@ -117,7 +126,7 @@
     },
     {
       "path": "registry/default/atoms/lib/booker/utils.ts",
-      "content": "export type EventTypeLocationOption = {\n  label: string;\n  provider: string;\n};\n\nexport type BookerAvatar = {\n  name: string;\n  avatarUrl: string;\n  profileUrl: string;\n};\n\nexport type BookerMeta = {\n  hostName: string;\n  hostAvatarUrl: string;\n  hostAvatars: BookerAvatar[];\n  eventTypeTitle: string;\n  eventTypeDescription: string;\n  eventTypeDurationMinutes: number | null;\n  eventTypeDurationOptions: number[] | null;\n  eventTypeLocations: EventTypeLocationOption[];\n  eventTypeImageUrl: string;\n  bookingWindowStart: Date | null;\n  bookingWindowEnd: Date | null;\n};\n\nexport type EventTypeInfo = {\n  eventTypeTitle: string;\n  eventTypeDescription: string;\n  eventTypeDurationMinutes: number | null;\n  eventTypeDurationOptions: number[] | null;\n  eventTypeLocations: EventTypeLocationOption[];\n  eventTypeImageUrl: string;\n};\n\nexport function prettifyLocation(value: string): string {\n  const normalized = value.trim().toLowerCase();\n\n  const known: Record<string, string> = {\n    \"cal-video\": \"Cal Video\",\n    \"daily-video\": \"Daily Video\",\n    \"google-meet\": \"Google Meet\",\n    \"huddle01-video\": \"Huddle01\",\n    \"microsoft-teams\": \"Microsoft Teams\",\n    conferencing: \"Organizer's Default App\",\n    jitsi: \"Jitsi Meet\",\n    inperson: \"In person\",\n    organizersdefaultapp: \"Organizer's Default App\",\n    phone: \"Phone call\",\n    whereby: \"Whereby\",\n    zoom: \"Zoom\",\n  };\n\n  const knownLocation = known[normalized];\n  if (knownLocation) {\n    return knownLocation;\n  }\n\n  return titleizeLocation(value);\n}\n\nfunction titleizeLocation(value: string): string {\n  return value\n    .replace(/[_:-]+/g, \" \")\n    .split(\" \")\n    .filter(Boolean)\n    .map((part) =>\n      /^\\d+$/.test(part) ? part : part.charAt(0).toUpperCase() + part.slice(1),\n    )\n    .join(\" \");\n}\n\nfunction normalizeAvatarUrl(value: unknown): string {\n  if (typeof value !== \"string\") {\n    return \"\";\n  }\n\n  const trimmed = value.trim();\n  if (!trimmed) {\n    return \"\";\n  }\n\n  if (trimmed.startsWith(\"http://\") || trimmed.startsWith(\"https://\")) {\n    return trimmed;\n  }\n\n  if (trimmed.startsWith(\"//\")) {\n    return `https:${trimmed}`;\n  }\n\n  if (trimmed.startsWith(\"/\")) {\n    return `https://app.cal.com${trimmed}`;\n  }\n\n  return trimmed;\n}\n\nexport function extractHost(payload: unknown): {\n  hostName: string;\n  hostAvatarUrl: string;\n} {\n  if (!payload || typeof payload !== \"object\") {\n    return { hostName: \"Unknown user\", hostAvatarUrl: \"\" };\n  }\n\n  const root = payload as Record<string, unknown>;\n  const data = (root.data as Record<string, unknown> | undefined) ?? root;\n  const profile =\n    data.profile && typeof data.profile === \"object\"\n      ? (data.profile as Record<string, unknown>)\n      : undefined;\n\n  const rawAvatar =\n    data.avatarUrl ??\n    data.avatar_url ??\n    data.avatar ??\n    profile?.avatarUrl ??\n    profile?.avatar_url ??\n    profile?.avatar;\n\n  return {\n    hostName: String(\n      data.name ?? data.username ?? data.email ?? \"Unknown user\",\n    ),\n    hostAvatarUrl: normalizeAvatarUrl(rawAvatar),\n  };\n}\n\nfunction toRecord(value: unknown): Record<string, unknown> | null {\n  return value && typeof value === \"object\"\n    ? (value as Record<string, unknown>)\n    : null;\n}\n\nfunction getAvatarName(record: Record<string, unknown>): string {\n  return String(\n    record.name ?? record.username ?? record.email ?? \"Unknown user\",\n  );\n}\n\nfunction getAvatarUrl(record: Record<string, unknown>): string {\n  const profile = toRecord(record.profile);\n  return normalizeAvatarUrl(\n    record.avatarUrl ??\n      record.avatar_url ??\n      record.avatar ??\n      record.image ??\n      record.logoUrl ??\n      profile?.avatarUrl ??\n      profile?.avatar_url ??\n      profile?.avatar ??\n      profile?.image,\n  );\n}\n\nfunction buildProfileUrl(\n  username: string,\n  orgSlug?: string,\n  baseUrl?: string,\n): string {\n  const normalizedUsername = username.trim();\n  if (!normalizedUsername) {\n    return \"\";\n  }\n\n  const base =\n    baseUrl && /^https?:\\/\\//i.test(baseUrl)\n      ? baseUrl.replace(/\\/$/, \"\")\n      : orgSlug\n        ? `https://${orgSlug}.cal.com`\n        : \"https://cal.com\";\n\n  return `${base}/${encodeURIComponent(normalizedUsername)}`;\n}\n\nfunction getUserAvatar(\n  record: Record<string, unknown>,\n  orgSlug?: string,\n): BookerAvatar {\n  const name = getAvatarName(record);\n  const username = getStringValue(record.username);\n  const bookerUrl = getStringValue(record.bookerUrl);\n\n  return {\n    avatarUrl: getAvatarUrl(record),\n    name,\n    profileUrl: username\n      ? buildProfileUrl(username, orgSlug, bookerUrl ?? undefined)\n      : \"\",\n  };\n}\n\nfunction getTeamAvatar(\n  record: Record<string, unknown>,\n  orgSlug?: string,\n): BookerAvatar | null {\n  const team = toRecord(record.team) ?? toRecord(record.entity);\n  const profile = toRecord(record.profile);\n  const source = team ?? profile;\n  if (!source) {\n    return null;\n  }\n\n  const avatarUrl = getAvatarUrl(source);\n  const name = String(source.name ?? source.slug ?? \"\");\n  const slug = getStringValue(source.slug);\n  if (!avatarUrl && !name) {\n    return null;\n  }\n\n  return {\n    avatarUrl,\n    name: name || \"Team\",\n    profileUrl: slug ? buildProfileUrl(slug, orgSlug) : \"\",\n  };\n}\n\nfunction getBooleanValue(value: unknown): boolean {\n  return value === true || value === \"true\";\n}\n\nfunction uniqueAvatars(avatars: BookerAvatar[]): BookerAvatar[] {\n  const seen = new Set<string>();\n  return avatars.filter((avatar) => {\n    const key = `${avatar.name}:${avatar.avatarUrl}`;\n    if (seen.has(key)) {\n      return false;\n    }\n    seen.add(key);\n    return true;\n  });\n}\n\nexport function extractHostAvatars(\n  eventTypePayload: unknown,\n  hostPayload: unknown,\n  options: { dynamic?: boolean; orgSlug?: string } = {},\n): BookerAvatar[] {\n  const eventType = toRecord(eventTypePayload);\n  const host = extractHost(hostPayload);\n\n  if (!eventType) {\n    return host.hostName === \"Unknown user\" && !host.hostAvatarUrl\n      ? []\n      : [\n          {\n            avatarUrl: host.hostAvatarUrl,\n            name: host.hostName,\n            profileUrl: \"\",\n          },\n        ];\n  }\n\n  const schedulingType = String(eventType.schedulingType ?? \"\").toUpperCase();\n  const metadata = toRecord(eventType.metadata);\n  const roundRobinHideOrgAndTeam =\n    getBooleanValue(eventType.roundRobinHideOrgAndTeam) ||\n    getBooleanValue(metadata?.roundRobinHideOrgAndTeam);\n  const hideOrgTeamAvatar =\n    getBooleanValue(eventType.hideOrgTeamAvatar) ||\n    getBooleanValue(metadata?.hideOrgTeamAvatar);\n  const userRecords = [\n    ...(Array.isArray(eventType.users) ? eventType.users : []),\n    ...(Array.isArray(eventType.hosts) ? eventType.hosts : []),\n  ]\n    .map(toRecord)\n    .filter((record): record is Record<string, unknown> => record != null);\n  const userAvatars = userRecords.map((record) =>\n    getUserAvatar(record, options.orgSlug),\n  );\n  const teamAvatar = getTeamAvatar(eventType, options.orgSlug);\n\n  if (options.dynamic) {\n    return uniqueAvatars(\n      userAvatars.length > 0\n        ? userAvatars\n        : [\n            {\n              avatarUrl: host.hostAvatarUrl,\n              name: host.hostName,\n              profileUrl: \"\",\n            },\n          ],\n    );\n  }\n\n  if (schedulingType === \"ROUND_ROBIN\") {\n    if (roundRobinHideOrgAndTeam || hideOrgTeamAvatar) {\n      return [];\n    }\n\n    return teamAvatar ? [teamAvatar] : [];\n  }\n\n  if (schedulingType === \"COLLECTIVE\") {\n    const avatars = teamAvatar ? [teamAvatar, ...userAvatars] : userAvatars;\n    return uniqueAvatars(avatars);\n  }\n\n  const firstUserAvatar = userAvatars[0];\n  return uniqueAvatars(\n    firstUserAvatar\n      ? [firstUserAvatar]\n      : [\n          {\n            avatarUrl: host.hostAvatarUrl,\n            name: host.hostName,\n            profileUrl: \"\",\n          },\n        ],\n  );\n}\n\nexport function extractHostDisplayName(\n  eventTypePayload: unknown,\n  hostPayload: unknown,\n  options: { dynamic?: boolean } = {},\n): string {\n  const host = extractHost(hostPayload);\n  const eventType = toRecord(eventTypePayload);\n  if (!eventType) {\n    return host.hostName;\n  }\n\n  const schedulingType = String(eventType.schedulingType ?? \"\").toUpperCase();\n  const profile = toRecord(eventType.profile);\n  const team = toRecord(eventType.team) ?? toRecord(eventType.entity);\n  const profileName =\n    getStringValue(profile?.name) ?? getStringValue(team?.name);\n  const userNames = [\n    ...(Array.isArray(eventType.users) ? eventType.users : []),\n    ...(Array.isArray(eventType.hosts) ? eventType.hosts : []),\n  ]\n    .map(toRecord)\n    .filter((record): record is Record<string, unknown> => record != null)\n    .map(getAvatarName)\n    .filter((name) => name !== \"Unknown user\");\n\n  if (options.dynamic) {\n    return (\n      profileName ??\n      (userNames.length > 0 ? userNames.join(\", \") : host.hostName)\n    );\n  }\n\n  if (schedulingType === \"ROUND_ROBIN\") {\n    return profileName ?? host.hostName;\n  }\n\n  if (schedulingType === \"COLLECTIVE\") {\n    const firstName = userNames[0];\n    if (profileName && firstName && profileName !== firstName) {\n      return profileName;\n    }\n\n    return userNames.length > 0 ? userNames.join(\", \") : host.hostName;\n  }\n\n  return host.hostName;\n}\n\nfunction parseLocationOption(value: unknown): EventTypeLocationOption | null {\n  if (typeof value === \"string\") {\n    const trimmed = value.trim();\n    if (!trimmed) {\n      return null;\n    }\n\n    return { label: prettifyLocation(trimmed), provider: \"\" };\n  }\n\n  if (!value || typeof value !== \"object\") {\n    return null;\n  }\n\n  const loc = value as Record<string, unknown>;\n  const integrationProvider = getIntegrationProvider(loc);\n  const provider = integrationProvider || getStringValue(loc.type) || \"\";\n  const rawText =\n    getDisplayLocationText(loc.label, integrationProvider) ??\n    getDisplayLocationText(loc.name, integrationProvider) ??\n    (integrationProvider || null) ??\n    getStringValue(loc.address) ??\n    getStringValue(loc.location) ??\n    getStringValue(loc.value) ??\n    getStringValue(loc.type);\n\n  if (!rawText) {\n    return null;\n  }\n\n  return {\n    label: prettifyLocation(rawText),\n    provider,\n  };\n}\n\nfunction extractLocations(\n  record: Record<string, unknown>,\n): EventTypeLocationOption[] {\n  const locationsRaw = record.locations;\n  if (Array.isArray(locationsRaw) && locationsRaw.length > 0) {\n    const parsed = locationsRaw\n      .map(parseLocationOption)\n      .filter((item): item is EventTypeLocationOption => item != null);\n    if (parsed.length > 0) {\n      return parsed;\n    }\n  }\n\n  if (typeof record.location === \"string\" && record.location.trim()) {\n    return [{ label: prettifyLocation(record.location), provider: \"\" }];\n  }\n\n  return [{ label: \"Unknown\", provider: \"\" }];\n}\n\nexport function extractEventTypeInfo(payload: unknown): EventTypeInfo {\n  if (!payload || typeof payload !== \"object\") {\n    return {\n      eventTypeTitle: \"No event type found\",\n      eventTypeDescription: \"\",\n      eventTypeDurationMinutes: null,\n      eventTypeDurationOptions: null,\n      eventTypeLocations: [{ label: \"Unknown\", provider: \"\" }],\n      eventTypeImageUrl: \"\",\n    };\n  }\n\n  const record = payload as Record<string, unknown>;\n  const durationValue =\n    record.lengthInMinutes ??\n    record.duration ??\n    record.length ??\n    record.minutes;\n  const duration =\n    typeof durationValue === \"number\"\n      ? durationValue\n      : typeof durationValue === \"string\" &&\n          Number.isFinite(Number(durationValue))\n        ? Number(durationValue)\n        : null;\n\n  const durationOptions = extractDurationOptions(record);\n  const eventTypeLocations = extractLocations(record);\n\n  return {\n    eventTypeTitle: String(\n      record.title ?? record.name ?? record.slug ?? \"No event type found\",\n    ),\n    eventTypeDescription: String(record.description ?? \"\"),\n    eventTypeDurationMinutes: duration,\n    eventTypeDurationOptions:\n      durationOptions.length > 1 ? durationOptions : null,\n    eventTypeLocations,\n    eventTypeImageUrl: normalizeAvatarUrl(\n      record.imageUrl ??\n        record.image_url ??\n        record.image ??\n        record.bannerUrl ??\n        record.coverImage ??\n        record.coverImageUrl,\n    ),\n  };\n}\n\nfunction getStringValue(value: unknown): string | null {\n  return typeof value === \"string\" && value.trim() ? value : null;\n}\n\nfunction getDisplayLocationText(\n  value: unknown,\n  integrationProvider: string,\n): string | null {\n  const text = getStringValue(value);\n  if (!text) {\n    return null;\n  }\n\n  const normalized = text.trim().toLowerCase();\n  if (\n    integrationProvider &&\n    [\"integration\", \"integrations\"].includes(normalized)\n  ) {\n    return null;\n  }\n\n  return text;\n}\n\nfunction getIntegrationProvider(record: Record<string, unknown>): string {\n  const rawType = getStringValue(record.type);\n  const type = rawType?.trim().toLowerCase();\n  const candidates = [\n    record.value,\n    record.integration,\n    record.provider,\n    record.app,\n    record.appSlug,\n    record.credentialType,\n  ];\n  for (const candidate of candidates) {\n    const value = getStringValue(candidate);\n    if (!value) {\n      continue;\n    }\n    const normalized = value.trim().toLowerCase();\n    if (\n      [\"integration\", \"integrations\"].includes(type ?? \"\") &&\n      ![\"integration\", \"integrations\"].includes(normalized) &&\n      /^[a-z0-9][a-z0-9:_-]*$/i.test(value)\n    ) {\n      return value;\n    }\n  }\n  return \"\";\n}\n\nfunction toFiniteNumber(value: unknown): number | null {\n  if (typeof value === \"number\" && Number.isFinite(value)) {\n    return value;\n  }\n  if (\n    typeof value === \"string\" &&\n    value.trim() !== \"\" &&\n    Number.isFinite(Number(value))\n  ) {\n    return Number(value);\n  }\n  return null;\n}\n\nfunction normalizeDurationList(values: unknown[]): number[] {\n  const minutes = values\n    .map(toFiniteNumber)\n    .filter((value): value is number => value != null && value > 0);\n\n  return [...new Set(minutes)].sort((a, b) => a - b);\n}\n\nexport function extractDurationOptions(payload: unknown): number[] {\n  if (!payload || typeof payload !== \"object\") {\n    return [];\n  }\n\n  const record = payload as Record<string, unknown>;\n  const fromOptions = record.lengthInMinutesOptions;\n  if (Array.isArray(fromOptions)) {\n    const normalized = normalizeDurationList(fromOptions);\n    if (normalized.length > 0) {\n      return normalized;\n    }\n  }\n\n  const metadata = record.metadata;\n  if (metadata && typeof metadata === \"object\") {\n    const multipleDuration = (metadata as Record<string, unknown>)\n      .multipleDuration;\n    if (Array.isArray(multipleDuration)) {\n      return normalizeDurationList(multipleDuration);\n    }\n  }\n\n  return [];\n}\n\nfunction addCalendarDays(date: Date, days: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);\n}\n\nfunction addBusinessDays(date: Date, days: number): Date {\n  const result = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  let remaining = Math.max(0, days);\n  while (remaining > 0) {\n    result.setDate(result.getDate() + 1);\n    const dayOfWeek = result.getDay();\n    if (dayOfWeek !== 0 && dayOfWeek !== 6) {\n      remaining -= 1;\n    }\n  }\n  return result;\n}\n\nfunction parseDate(value: unknown): Date | null {\n  if (typeof value !== \"string\" && typeof value !== \"number\") {\n    return null;\n  }\n  const date = new Date(value);\n  return Number.isNaN(date.getTime()) ? null : date;\n}\n\n// Resolve the event type's booking window start date. For RANGE period types,\n// this is the `periodStartDate`; otherwise bookings start from today.\nexport function extractBookingWindowStart(payload: unknown): Date | null {\n  if (!payload || typeof payload !== \"object\") {\n    return null;\n  }\n\n  const eventType = payload as Record<string, unknown>;\n  const periodType =\n    typeof eventType.periodType === \"string\"\n      ? eventType.periodType.toUpperCase()\n      : \"\";\n\n  if (periodType === \"RANGE\") {\n    const start = parseDate(eventType.periodStartDate);\n    if (start) {\n      const today = new Date();\n      today.setHours(0, 0, 0, 0);\n      // Never return a start date in the past.\n      return start > today ? start : null;\n    }\n  }\n\n  return null;\n}\n\nexport function extractBookingWindowEnd(payload: unknown): Date | null {\n  if (!payload || typeof payload !== \"object\") {\n    return null;\n  }\n\n  const eventType = payload as Record<string, unknown>;\n  const periodType =\n    typeof eventType.periodType === \"string\"\n      ? eventType.periodType.toUpperCase()\n      : \"\";\n\n  if (periodType === \"RANGE\") {\n    return parseDate(eventType.periodEndDate);\n  }\n\n  if (periodType === \"ROLLING\" || periodType === \"ROLLING_WINDOW\") {\n    const days = toFiniteNumber(eventType.periodDays);\n    if (days != null) {\n      const today = new Date();\n      today.setHours(0, 0, 0, 0);\n      return eventType.periodCountCalendarDays\n        ? addCalendarDays(today, days)\n        : addBusinessDays(today, days);\n    }\n  }\n\n  return null;\n}\n\nexport function getInitials(name: string): string {\n  const parts = name\n    .split(\" \")\n    .map((part) => part.trim())\n    .filter(Boolean)\n    .slice(0, 2);\n\n  if (parts.length === 0) {\n    return \"NA\";\n  }\n\n  return parts.map((part) => part[0]?.toUpperCase() ?? \"\").join(\"\");\n}\n\nexport function formatSelectedWeekday(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  }).format(date);\n}\n\nexport function formatSelectedDay(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"2-digit\",\n  }).format(date);\n}\n\nexport function formatSelectedMonth(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  }).format(date);\n}\n\nexport function toDateKey(date: Date, timeZone: string): string {\n  return new Intl.DateTimeFormat(\"en-CA\", {\n    day: \"2-digit\",\n    month: \"2-digit\",\n    timeZone,\n    year: \"numeric\",\n  }).format(date);\n}\n\n// Calendar grid dates are plain Y-M-D values (local Date components), not\n// instants. Use this when looking up slots keyed by the API/booking timezone.\nexport function toCalendarDateKey(date: Date): string {\n  const year = date.getFullYear();\n  const month = String(date.getMonth() + 1).padStart(2, \"0\");\n  const day = String(date.getDate()).padStart(2, \"0\");\n  return `${year}-${month}-${day}`;\n}\n\nexport function getTodayInTimeZone(\n  timeZone: string,\n  now: Date = new Date(),\n): Date {\n  const [yearRaw, monthRaw, dayRaw] = toDateKey(now, timeZone).split(\"-\");\n  const year = Number(yearRaw);\n  const month = Number(monthRaw);\n  const day = Number(dayRaw);\n  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {\n    const fallback = new Date(now);\n    fallback.setHours(0, 0, 0, 0);\n    return fallback;\n  }\n  return new Date(year, month - 1, day);\n}\n\nexport function getMinimumNavigableMonth(\n  timeZone: string,\n  bookingWindowStart?: Date | null,\n  now: Date = new Date(),\n): Date {\n  const todayInTz = getTodayInTimeZone(timeZone, now);\n  const startBase =\n    bookingWindowStart && bookingWindowStart > todayInTz\n      ? bookingWindowStart\n      : todayInTz;\n  return new Date(startBase.getFullYear(), startBase.getMonth(), 1);\n}\n\nexport function isCalendarMonthBefore(left: Date, right: Date): boolean {\n  const leftMonth = new Date(left.getFullYear(), left.getMonth(), 1);\n  const rightMonth = new Date(right.getFullYear(), right.getMonth(), 1);\n  return leftMonth.getTime() < rightMonth.getTime();\n}\n\nfunction toTimeLabel(date: Date, timeZone: string): string {\n  return new Intl.DateTimeFormat(\"en-GB\", {\n    hour: \"2-digit\",\n    hour12: false,\n    minute: \"2-digit\",\n    timeZone,\n  }).format(date);\n}\n\n// Whether a locale conventionally shows time in 24-hour form, used to seed the\n// 12h/24h toggle (e.g. en-US → 12h, most of Europe → 24h). Falls back to 24h.\nexport function prefers24Hour(locale: string): boolean {\n  try {\n    const resolved = new Intl.DateTimeFormat(locale, {\n      hour: \"numeric\",\n    }).resolvedOptions();\n    if (typeof resolved.hour12 === \"boolean\") {\n      return !resolved.hour12;\n    }\n    return resolved.hourCycle === \"h23\" || resolved.hourCycle === \"h24\";\n  } catch {\n    return true;\n  }\n}\n\n// Slots are stored as 24h \"HH:mm\" strings (stable ids); reformat for display.\nexport function displayTimeLabel(label: string, hour12: boolean): string {\n  if (!hour12) {\n    return label;\n  }\n  const [hoursRaw, minutesRaw] = label.split(\":\");\n  const hours = Number(hoursRaw);\n  const minutes = Number(minutesRaw);\n  if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n    return label;\n  }\n  const date = new Date();\n  date.setHours(hours, minutes, 0, 0);\n  const parts = new Intl.DateTimeFormat(undefined, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(date);\n  return parts\n    .filter((part) => part.type !== \"literal\" || part.value.trim() !== \"\")\n    .map((part) =>\n      part.type === \"dayPeriod\" ? part.value.toLowerCase() : part.value,\n    )\n    .join(\"\");\n}\n\nexport function isSingleDigit12HourLabel(label: string): boolean {\n  const hours = Number(label.split(\":\")[0]);\n  if (Number.isNaN(hours)) {\n    return false;\n  }\n\n  const normalizedHours = hours % 12 || 12;\n  return normalizedHours < 10;\n}\n\nfunction parseSlotDate(value: unknown): Date | null {\n  if (typeof value === \"string\") {\n    if (/^\\d{2}:\\d{2}$/.test(value)) {\n      return null;\n    }\n    const parsed = new Date(value);\n    return Number.isNaN(parsed.getTime()) ? null : parsed;\n  }\n\n  if (!value || typeof value !== \"object\") {\n    return null;\n  }\n\n  const record = value as Record<string, unknown>;\n  const candidate =\n    record.start ??\n    record.startTime ??\n    record.time ??\n    record.dateTime ??\n    record.date;\n\n  return parseSlotDate(candidate);\n}\n\nexport function extractSlotsByDate(\n  payload: unknown,\n  timeZone: string,\n): Record<string, string[]> {\n  const byDate = new Map<string, Set<string>>();\n  const addSlot = (dateKey: string, time: string) => {\n    if (!byDate.has(dateKey)) {\n      byDate.set(dateKey, new Set<string>());\n    }\n    byDate.get(dateKey)?.add(time);\n  };\n\n  if (!payload || typeof payload !== \"object\") {\n    return {};\n  }\n\n  const visitNode = (node: unknown) => {\n    if (!node || typeof node !== \"object\") {\n      return;\n    }\n\n    if (Array.isArray(node)) {\n      for (const item of node) {\n        visitNode(item);\n      }\n      return;\n    }\n\n    const record = node as Record<string, unknown>;\n\n    for (const [key, value] of Object.entries(record)) {\n      if (/^\\d{4}-\\d{2}-\\d{2}$/.test(key) && Array.isArray(value)) {\n        for (const slot of value) {\n          if (typeof slot === \"string\" && /^\\d{2}:\\d{2}$/.test(slot)) {\n            addSlot(key, slot);\n            continue;\n          }\n\n          const parsed = parseSlotDate(slot);\n          if (!parsed) {\n            continue;\n          }\n\n          addSlot(toDateKey(parsed, timeZone), toTimeLabel(parsed, timeZone));\n        }\n      } else {\n        visitNode(value);\n      }\n    }\n  };\n\n  visitNode(payload);\n\n  const result: Record<string, string[]> = {};\n  for (const [key, times] of byDate.entries()) {\n    result[key] = Array.from(times).sort((a, b) => a.localeCompare(b));\n  }\n\n  return result;\n}\n\n// Event's minimum booking notice in minutes (cal.com `minimumBookingNotice`).\nexport function extractMinimumBookingNotice(payload: unknown): number {\n  if (!payload || typeof payload !== \"object\") {\n    return 0;\n  }\n  const minutes = toFiniteNumber(\n    (payload as Record<string, unknown>).minimumBookingNotice,\n  );\n  return minutes != null && minutes > 0 ? minutes : 0;\n}\n\n// Drop slots that are no longer bookable: anything earlier than now plus the\n// minimum booking notice, evaluated in the booking timezone. Future days are\n// kept untouched; only the boundary day is partially filtered. Guards against\n// showing already-passed times for today (and as the session ages).\nexport function filterBookableSlots(\n  slotsByDate: Record<string, string[]>,\n  timeZone: string,\n  noticeMinutes: number,\n  now: Date,\n): Record<string, string[]> {\n  const cutoff = new Date(now.getTime() + noticeMinutes * 60_000);\n  const cutoffDateKey = toDateKey(cutoff, timeZone);\n  const [cutoffHoursRaw, cutoffMinutesRaw] = toTimeLabel(\n    cutoff,\n    timeZone,\n  ).split(\":\");\n  const cutoffHours = Number(cutoffHoursRaw);\n  const cutoffMinutes = Number(cutoffMinutesRaw);\n  if (Number.isNaN(cutoffHours) || Number.isNaN(cutoffMinutes)) {\n    return slotsByDate;\n  }\n  const cutoffOfDay = cutoffHours * 60 + cutoffMinutes;\n\n  const result: Record<string, string[]> = {};\n  for (const [dateKey, times] of Object.entries(slotsByDate)) {\n    if (dateKey < cutoffDateKey) {\n      continue;\n    }\n    if (dateKey > cutoffDateKey) {\n      result[dateKey] = times;\n      continue;\n    }\n    const kept = times.filter((time) => {\n      const [hoursRaw, minutesRaw] = time.split(\":\");\n      const hours = Number(hoursRaw);\n      const minutes = Number(minutesRaw);\n      if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n        return false;\n      }\n      return hours * 60 + minutes >= cutoffOfDay;\n    });\n    if (kept.length > 0) {\n      result[dateKey] = kept;\n    }\n  }\n  return result;\n}\n\nexport function findFirstAvailableDate(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n): Date | null {\n  const year = month.getFullYear();\n  const monthIndex = month.getMonth();\n  const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();\n  const todayKey = toCalendarDateKey(todayStart);\n\n  for (let day = 1; day <= daysInMonth; day += 1) {\n    const date = new Date(year, monthIndex, day);\n    const key = toCalendarDateKey(date);\n    if (key < todayKey) {\n      continue;\n    }\n\n    if ((slotsByDate[key] ?? []).length > 0) {\n      return date;\n    }\n  }\n\n  return null;\n}\n\n// --- Calendar grid (mirrors booker-calendar.tsx) ---\n\nexport function getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction calendarStartOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction calendarEndOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction calendarAddDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction calendarStartOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return calendarAddDays(day, -diff);\n}\n\nfunction calendarEndOfWeek(date: Date, weekStartsOn = 0): Date {\n  return calendarAddDays(calendarStartOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameCalendarMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nexport type CalendarViewOptions = {\n  weekStartsOn?: number;\n  shiftWeeks?: boolean;\n  startMonth?: Date;\n  endMonth?: Date;\n};\n\nexport function getVisibleCalendarDates(\n  month: Date,\n  today: Date,\n  options: CalendarViewOptions = {},\n): Date[] {\n  const weekStartsOn = options.weekStartsOn ?? 0;\n  const shiftWeeks = options.shiftWeeks ?? true;\n  const firstMonth = calendarStartOfMonth(month);\n\n  const naturalGridStart = calendarStartOfWeek(firstMonth, weekStartsOn);\n  const todayStart = new Date(\n    today.getFullYear(),\n    today.getMonth(),\n    today.getDate(),\n  );\n  const todayRow = Math.floor(\n    Math.round(\n      (todayStart.getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand =\n    shiftWeeks && isSameCalendarMonth(firstMonth, today) && todayRow >= 3;\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const monthStart = calendarStartOfMonth(firstMonth);\n  const offset = shiftRows * 7;\n  const gridStart = calendarAddDays(\n    calendarStartOfWeek(monthStart, weekStartsOn),\n    offset,\n  );\n  const gridEnd = calendarAddDays(\n    calendarEndOfWeek(calendarEndOfMonth(firstMonth), weekStartsOn),\n    offset,\n  );\n\n  const dates: Date[] = [];\n  for (\n    let cursor = gridStart;\n    cursor.getTime() <= gridEnd.getTime();\n    cursor = calendarAddDays(cursor, 1)\n  ) {\n    dates.push(cursor);\n  }\n\n  if (expand) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(calendarAddDays(lastDate, 1));\n    }\n  }\n\n  const navStart = options.startMonth\n    ? calendarStartOfMonth(options.startMonth)\n    : undefined;\n  const navEnd = options.endMonth\n    ? calendarStartOfMonth(options.endMonth)\n    : undefined;\n  const monthEnd = calendarEndOfMonth(firstMonth);\n\n  return dates.filter((date) => {\n    if (navStart && date < navStart) {\n      return false;\n    }\n    if (navEnd && date > calendarEndOfMonth(navEnd)) {\n      return false;\n    }\n    if (date < monthStart) {\n      return false;\n    }\n    if (!expand && date > monthEnd) {\n      return false;\n    }\n    return true;\n  });\n}\n\nexport function findFirstAvailableInVisibleGrid(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  todayStart: Date,\n  options: CalendarViewOptions = {},\n): Date | null {\n  const todayKey = toCalendarDateKey(todayStart);\n  for (const date of getVisibleCalendarDates(month, todayStart, options)) {\n    const key = toCalendarDateKey(date);\n    if (key < todayKey) {\n      continue;\n    }\n    if ((slotsByDate[key] ?? []).length > 0) {\n      return date;\n    }\n  }\n  return null;\n}\n\nexport function hasAvailabilityInVisibleGrid(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  todayStart: Date,\n  options: CalendarViewOptions = {},\n): boolean {\n  return (\n    findFirstAvailableInVisibleGrid(month, slotsByDate, todayStart, options) !=\n    null\n  );\n}\n\nexport function pickDefaultSelectedDate(\n  currentMonth: Date,\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n  viewOptions?: CalendarViewOptions,\n): Date | null {\n  if (viewOptions) {\n    return findFirstAvailableInVisibleGrid(\n      currentMonth,\n      slotsByDate,\n      todayStart,\n      viewOptions,\n    );\n  }\n\n  return findFirstAvailableDate(\n    currentMonth,\n    slotsByDate,\n    _timeZone,\n    todayStart,\n  );\n}\n\n// Earliest loaded date (today or later) that still has open slots, used to\n// offer a \"jump to next availability\" affordance from an empty month/day.\nexport function findNextAvailableDate(\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n): Date | null {\n  const todayKey = toCalendarDateKey(todayStart);\n  let bestKey: string | null = null;\n  for (const [key, times] of Object.entries(slotsByDate)) {\n    if (times.length === 0 || key < todayKey) {\n      continue;\n    }\n    if (bestKey === null || key < bestKey) {\n      bestKey = key;\n    }\n  }\n\n  if (!bestKey) {\n    return null;\n  }\n\n  const [yearRaw, monthRaw, dayRaw] = bestKey.split(\"-\");\n  const year = Number(yearRaw);\n  const month = Number(monthRaw);\n  const day = Number(dayRaw);\n  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {\n    return null;\n  }\n  return new Date(year, month - 1, day);\n}\n",
+      "content": "export type EventTypeLocationOption = {\n  label: string;\n  provider: string;\n};\n\nexport type BookerAvatar = {\n  name: string;\n  avatarUrl: string;\n  profileUrl: string;\n};\n\nexport type BookerMeta = {\n  hostName: string;\n  hostAvatarUrl: string;\n  hostAvatars: BookerAvatar[];\n  eventTypeTitle: string;\n  eventTypeDescription: string;\n  eventTypeDurationMinutes: number | null;\n  eventTypeDurationOptions: number[] | null;\n  eventTypeLocations: EventTypeLocationOption[];\n  eventTypeImageUrl: string;\n  bookingWindowStart: Date | null;\n  bookingWindowEnd: Date | null;\n};\n\nexport type EventTypeInfo = {\n  eventTypeTitle: string;\n  eventTypeDescription: string;\n  eventTypeDurationMinutes: number | null;\n  eventTypeDurationOptions: number[] | null;\n  eventTypeLocations: EventTypeLocationOption[];\n  eventTypeImageUrl: string;\n};\n\nexport function prettifyLocation(value: string): string {\n  const normalized = value.trim().toLowerCase();\n\n  const known: Record<string, string> = {\n    \"cal-video\": \"Cal Video\",\n    \"daily-video\": \"Daily Video\",\n    \"google-meet\": \"Google Meet\",\n    \"huddle01-video\": \"Huddle01\",\n    \"microsoft-teams\": \"Microsoft Teams\",\n    conferencing: \"Organizer's Default App\",\n    jitsi: \"Jitsi Meet\",\n    inperson: \"In person\",\n    organizersdefaultapp: \"Organizer's Default App\",\n    phone: \"Phone call\",\n    whereby: \"Whereby\",\n    zoom: \"Zoom\",\n  };\n\n  const knownLocation = known[normalized];\n  if (knownLocation) {\n    return knownLocation;\n  }\n\n  return titleizeLocation(value);\n}\n\nfunction titleizeLocation(value: string): string {\n  return value\n    .replace(/[_:-]+/g, \" \")\n    .split(\" \")\n    .filter(Boolean)\n    .map((part) =>\n      /^\\d+$/.test(part) ? part : part.charAt(0).toUpperCase() + part.slice(1),\n    )\n    .join(\" \");\n}\n\nfunction normalizeAvatarUrl(value: unknown): string {\n  if (typeof value !== \"string\") {\n    return \"\";\n  }\n\n  const trimmed = value.trim();\n  if (!trimmed) {\n    return \"\";\n  }\n\n  if (trimmed.startsWith(\"http://\") || trimmed.startsWith(\"https://\")) {\n    return trimmed;\n  }\n\n  if (trimmed.startsWith(\"//\")) {\n    return `https:${trimmed}`;\n  }\n\n  if (trimmed.startsWith(\"/\")) {\n    return `https://app.cal.com${trimmed}`;\n  }\n\n  return trimmed;\n}\n\nexport function extractHost(payload: unknown): {\n  hostName: string;\n  hostAvatarUrl: string;\n} {\n  if (!payload || typeof payload !== \"object\") {\n    return { hostName: \"Unknown user\", hostAvatarUrl: \"\" };\n  }\n\n  const root = payload as Record<string, unknown>;\n  const data = (root.data as Record<string, unknown> | undefined) ?? root;\n  const profile =\n    data.profile && typeof data.profile === \"object\"\n      ? (data.profile as Record<string, unknown>)\n      : undefined;\n\n  const rawAvatar =\n    data.avatarUrl ??\n    data.avatar_url ??\n    data.avatar ??\n    profile?.avatarUrl ??\n    profile?.avatar_url ??\n    profile?.avatar;\n\n  return {\n    hostName: String(\n      data.name ?? data.username ?? data.email ?? \"Unknown user\",\n    ),\n    hostAvatarUrl: normalizeAvatarUrl(rawAvatar),\n  };\n}\n\nfunction toRecord(value: unknown): Record<string, unknown> | null {\n  return value && typeof value === \"object\"\n    ? (value as Record<string, unknown>)\n    : null;\n}\n\nfunction getAvatarName(record: Record<string, unknown>): string {\n  return String(\n    record.name ?? record.username ?? record.email ?? \"Unknown user\",\n  );\n}\n\nfunction getAvatarUrl(record: Record<string, unknown>): string {\n  const profile = toRecord(record.profile);\n  return normalizeAvatarUrl(\n    record.avatarUrl ??\n      record.avatar_url ??\n      record.avatar ??\n      record.image ??\n      record.logoUrl ??\n      profile?.avatarUrl ??\n      profile?.avatar_url ??\n      profile?.avatar ??\n      profile?.image,\n  );\n}\n\nfunction buildProfileUrl(\n  username: string,\n  orgSlug?: string,\n  baseUrl?: string,\n): string {\n  const normalizedUsername = username.trim();\n  if (!normalizedUsername) {\n    return \"\";\n  }\n\n  const base =\n    baseUrl && /^https?:\\/\\//i.test(baseUrl)\n      ? baseUrl.replace(/\\/$/, \"\")\n      : orgSlug\n        ? `https://${orgSlug}.cal.com`\n        : \"https://cal.com\";\n\n  return `${base}/${encodeURIComponent(normalizedUsername)}`;\n}\n\nfunction getUserAvatar(\n  record: Record<string, unknown>,\n  orgSlug?: string,\n): BookerAvatar {\n  const name = getAvatarName(record);\n  const username = getStringValue(record.username);\n  const bookerUrl = getStringValue(record.bookerUrl);\n\n  return {\n    avatarUrl: getAvatarUrl(record),\n    name,\n    profileUrl: username\n      ? buildProfileUrl(username, orgSlug, bookerUrl ?? undefined)\n      : \"\",\n  };\n}\n\nfunction getTeamAvatar(\n  record: Record<string, unknown>,\n  orgSlug?: string,\n): BookerAvatar | null {\n  const team = toRecord(record.team) ?? toRecord(record.entity);\n  const profile = toRecord(record.profile);\n  const source = team ?? profile;\n  if (!source) {\n    return null;\n  }\n\n  const avatarUrl = getAvatarUrl(source);\n  const name = String(source.name ?? source.slug ?? \"\");\n  const slug = getStringValue(source.slug);\n  if (!avatarUrl && !name) {\n    return null;\n  }\n\n  return {\n    avatarUrl,\n    name: name || \"Team\",\n    profileUrl: slug ? buildProfileUrl(slug, orgSlug) : \"\",\n  };\n}\n\nfunction getBooleanValue(value: unknown): boolean {\n  return value === true || value === \"true\";\n}\n\nfunction uniqueAvatars(avatars: BookerAvatar[]): BookerAvatar[] {\n  const seen = new Set<string>();\n  return avatars.filter((avatar) => {\n    const key = `${avatar.name}:${avatar.avatarUrl}`;\n    if (seen.has(key)) {\n      return false;\n    }\n    seen.add(key);\n    return true;\n  });\n}\n\nexport function extractHostAvatars(\n  eventTypePayload: unknown,\n  hostPayload: unknown,\n  options: { dynamic?: boolean; orgSlug?: string } = {},\n): BookerAvatar[] {\n  const eventType = toRecord(eventTypePayload);\n  const host = extractHost(hostPayload);\n\n  if (!eventType) {\n    return host.hostName === \"Unknown user\" && !host.hostAvatarUrl\n      ? []\n      : [\n          {\n            avatarUrl: host.hostAvatarUrl,\n            name: host.hostName,\n            profileUrl: \"\",\n          },\n        ];\n  }\n\n  const schedulingType = String(eventType.schedulingType ?? \"\").toUpperCase();\n  const metadata = toRecord(eventType.metadata);\n  const roundRobinHideOrgAndTeam =\n    getBooleanValue(eventType.roundRobinHideOrgAndTeam) ||\n    getBooleanValue(metadata?.roundRobinHideOrgAndTeam);\n  const hideOrgTeamAvatar =\n    getBooleanValue(eventType.hideOrgTeamAvatar) ||\n    getBooleanValue(metadata?.hideOrgTeamAvatar);\n  const userRecords = [\n    ...(Array.isArray(eventType.users) ? eventType.users : []),\n    ...(Array.isArray(eventType.hosts) ? eventType.hosts : []),\n  ]\n    .map(toRecord)\n    .filter((record): record is Record<string, unknown> => record != null);\n  const userAvatars = userRecords.map((record) =>\n    getUserAvatar(record, options.orgSlug),\n  );\n  const teamAvatar = getTeamAvatar(eventType, options.orgSlug);\n\n  if (options.dynamic) {\n    return uniqueAvatars(\n      userAvatars.length > 0\n        ? userAvatars\n        : [\n            {\n              avatarUrl: host.hostAvatarUrl,\n              name: host.hostName,\n              profileUrl: \"\",\n            },\n          ],\n    );\n  }\n\n  if (schedulingType === \"ROUND_ROBIN\") {\n    if (roundRobinHideOrgAndTeam || hideOrgTeamAvatar) {\n      return [];\n    }\n\n    return teamAvatar ? [teamAvatar] : [];\n  }\n\n  if (schedulingType === \"COLLECTIVE\") {\n    const avatars = teamAvatar ? [teamAvatar, ...userAvatars] : userAvatars;\n    return uniqueAvatars(avatars);\n  }\n\n  const firstUserAvatar = userAvatars[0];\n  return uniqueAvatars(\n    firstUserAvatar\n      ? [firstUserAvatar]\n      : [\n          {\n            avatarUrl: host.hostAvatarUrl,\n            name: host.hostName,\n            profileUrl: \"\",\n          },\n        ],\n  );\n}\n\nexport function extractHostDisplayName(\n  eventTypePayload: unknown,\n  hostPayload: unknown,\n  options: { dynamic?: boolean } = {},\n): string {\n  const host = extractHost(hostPayload);\n  const eventType = toRecord(eventTypePayload);\n  if (!eventType) {\n    return host.hostName;\n  }\n\n  const schedulingType = String(eventType.schedulingType ?? \"\").toUpperCase();\n  const profile = toRecord(eventType.profile);\n  const team = toRecord(eventType.team) ?? toRecord(eventType.entity);\n  const profileName =\n    getStringValue(profile?.name) ?? getStringValue(team?.name);\n  const userNames = [\n    ...(Array.isArray(eventType.users) ? eventType.users : []),\n    ...(Array.isArray(eventType.hosts) ? eventType.hosts : []),\n  ]\n    .map(toRecord)\n    .filter((record): record is Record<string, unknown> => record != null)\n    .map(getAvatarName)\n    .filter((name) => name !== \"Unknown user\");\n\n  if (options.dynamic) {\n    return (\n      profileName ??\n      (userNames.length > 0 ? userNames.join(\", \") : host.hostName)\n    );\n  }\n\n  if (schedulingType === \"ROUND_ROBIN\") {\n    return profileName ?? host.hostName;\n  }\n\n  if (schedulingType === \"COLLECTIVE\") {\n    const firstName = userNames[0];\n    if (profileName && firstName && profileName !== firstName) {\n      return profileName;\n    }\n\n    return userNames.length > 0 ? userNames.join(\", \") : host.hostName;\n  }\n\n  return host.hostName;\n}\n\nfunction parseLocationOption(value: unknown): EventTypeLocationOption | null {\n  if (typeof value === \"string\") {\n    const trimmed = value.trim();\n    if (!trimmed) {\n      return null;\n    }\n\n    return { label: prettifyLocation(trimmed), provider: \"\" };\n  }\n\n  if (!value || typeof value !== \"object\") {\n    return null;\n  }\n\n  const loc = value as Record<string, unknown>;\n  const integrationProvider = getIntegrationProvider(loc);\n  const provider = integrationProvider || getStringValue(loc.type) || \"\";\n  const rawText =\n    getDisplayLocationText(loc.label, integrationProvider) ??\n    getDisplayLocationText(loc.name, integrationProvider) ??\n    (integrationProvider || null) ??\n    getStringValue(loc.address) ??\n    getStringValue(loc.location) ??\n    getStringValue(loc.value) ??\n    getStringValue(loc.type);\n\n  if (!rawText) {\n    return null;\n  }\n\n  return {\n    label: prettifyLocation(rawText),\n    provider,\n  };\n}\n\nfunction extractLocations(\n  record: Record<string, unknown>,\n): EventTypeLocationOption[] {\n  const locationsRaw = record.locations;\n  if (Array.isArray(locationsRaw) && locationsRaw.length > 0) {\n    const parsed = locationsRaw\n      .map(parseLocationOption)\n      .filter((item): item is EventTypeLocationOption => item != null);\n    if (parsed.length > 0) {\n      return parsed;\n    }\n  }\n\n  if (typeof record.location === \"string\" && record.location.trim()) {\n    return [{ label: prettifyLocation(record.location), provider: \"\" }];\n  }\n\n  return [{ label: \"Unknown\", provider: \"\" }];\n}\n\nexport function extractEventTypeInfo(payload: unknown): EventTypeInfo {\n  if (!payload || typeof payload !== \"object\") {\n    return {\n      eventTypeTitle: \"No event type found\",\n      eventTypeDescription: \"\",\n      eventTypeDurationMinutes: null,\n      eventTypeDurationOptions: null,\n      eventTypeLocations: [{ label: \"Unknown\", provider: \"\" }],\n      eventTypeImageUrl: \"\",\n    };\n  }\n\n  const record = payload as Record<string, unknown>;\n  const durationValue =\n    record.lengthInMinutes ??\n    record.duration ??\n    record.length ??\n    record.minutes;\n  const duration =\n    typeof durationValue === \"number\"\n      ? durationValue\n      : typeof durationValue === \"string\" &&\n          Number.isFinite(Number(durationValue))\n        ? Number(durationValue)\n        : null;\n\n  const durationOptions = extractDurationOptions(record);\n  const eventTypeLocations = extractLocations(record);\n\n  return {\n    eventTypeTitle: String(\n      record.title ?? record.name ?? record.slug ?? \"No event type found\",\n    ),\n    eventTypeDescription: String(record.description ?? \"\"),\n    eventTypeDurationMinutes: duration,\n    eventTypeDurationOptions:\n      durationOptions.length > 1 ? durationOptions : null,\n    eventTypeLocations,\n    eventTypeImageUrl: normalizeAvatarUrl(\n      record.imageUrl ??\n        record.image_url ??\n        record.image ??\n        record.bannerUrl ??\n        record.coverImage ??\n        record.coverImageUrl,\n    ),\n  };\n}\n\nfunction getStringValue(value: unknown): string | null {\n  return typeof value === \"string\" && value.trim() ? value : null;\n}\n\nfunction getDisplayLocationText(\n  value: unknown,\n  integrationProvider: string,\n): string | null {\n  const text = getStringValue(value);\n  if (!text) {\n    return null;\n  }\n\n  const normalized = text.trim().toLowerCase();\n  if (\n    integrationProvider &&\n    [\"integration\", \"integrations\"].includes(normalized)\n  ) {\n    return null;\n  }\n\n  return text;\n}\n\nfunction getIntegrationProvider(record: Record<string, unknown>): string {\n  const rawType = getStringValue(record.type);\n  const type = rawType?.trim().toLowerCase();\n  const candidates = [\n    record.value,\n    record.integration,\n    record.provider,\n    record.app,\n    record.appSlug,\n    record.credentialType,\n  ];\n  for (const candidate of candidates) {\n    const value = getStringValue(candidate);\n    if (!value) {\n      continue;\n    }\n    const normalized = value.trim().toLowerCase();\n    if (\n      [\"integration\", \"integrations\"].includes(type ?? \"\") &&\n      ![\"integration\", \"integrations\"].includes(normalized) &&\n      /^[a-z0-9][a-z0-9:_-]*$/i.test(value)\n    ) {\n      return value;\n    }\n  }\n  return \"\";\n}\n\nfunction toFiniteNumber(value: unknown): number | null {\n  if (typeof value === \"number\" && Number.isFinite(value)) {\n    return value;\n  }\n  if (\n    typeof value === \"string\" &&\n    value.trim() !== \"\" &&\n    Number.isFinite(Number(value))\n  ) {\n    return Number(value);\n  }\n  return null;\n}\n\nfunction normalizeDurationList(values: unknown[]): number[] {\n  const minutes = values\n    .map(toFiniteNumber)\n    .filter((value): value is number => value != null && value > 0);\n\n  return [...new Set(minutes)].sort((a, b) => a - b);\n}\n\nexport function extractDurationOptions(payload: unknown): number[] {\n  if (!payload || typeof payload !== \"object\") {\n    return [];\n  }\n\n  const record = payload as Record<string, unknown>;\n  const fromOptions = record.lengthInMinutesOptions;\n  if (Array.isArray(fromOptions)) {\n    const normalized = normalizeDurationList(fromOptions);\n    if (normalized.length > 0) {\n      return normalized;\n    }\n  }\n\n  const metadata = record.metadata;\n  if (metadata && typeof metadata === \"object\") {\n    const multipleDuration = (metadata as Record<string, unknown>)\n      .multipleDuration;\n    if (Array.isArray(multipleDuration)) {\n      return normalizeDurationList(multipleDuration);\n    }\n  }\n\n  return [];\n}\n\nfunction addCalendarDays(date: Date, days: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);\n}\n\nfunction addBusinessDays(date: Date, days: number): Date {\n  const result = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  let remaining = Math.max(0, days);\n  while (remaining > 0) {\n    result.setDate(result.getDate() + 1);\n    const dayOfWeek = result.getDay();\n    if (dayOfWeek !== 0 && dayOfWeek !== 6) {\n      remaining -= 1;\n    }\n  }\n  return result;\n}\n\nfunction parseDate(value: unknown): Date | null {\n  if (typeof value !== \"string\" && typeof value !== \"number\") {\n    return null;\n  }\n  const date = new Date(value);\n  return Number.isNaN(date.getTime()) ? null : date;\n}\n\n// Resolve the event type's booking window start date. For RANGE period types,\n// this is the `periodStartDate`; otherwise bookings start from today.\nexport function extractBookingWindowStart(payload: unknown): Date | null {\n  if (!payload || typeof payload !== \"object\") {\n    return null;\n  }\n\n  const eventType = payload as Record<string, unknown>;\n  const periodType =\n    typeof eventType.periodType === \"string\"\n      ? eventType.periodType.toUpperCase()\n      : \"\";\n\n  if (periodType === \"RANGE\") {\n    const start = parseDate(eventType.periodStartDate);\n    if (start) {\n      const today = new Date();\n      today.setHours(0, 0, 0, 0);\n      // Never return a start date in the past.\n      return start > today ? start : null;\n    }\n  }\n\n  return null;\n}\n\nexport function extractBookingWindowEnd(payload: unknown): Date | null {\n  if (!payload || typeof payload !== \"object\") {\n    return null;\n  }\n\n  const eventType = payload as Record<string, unknown>;\n  const periodType =\n    typeof eventType.periodType === \"string\"\n      ? eventType.periodType.toUpperCase()\n      : \"\";\n\n  if (periodType === \"RANGE\") {\n    return parseDate(eventType.periodEndDate);\n  }\n\n  if (periodType === \"ROLLING\" || periodType === \"ROLLING_WINDOW\") {\n    const days = toFiniteNumber(eventType.periodDays);\n    if (days != null) {\n      const today = new Date();\n      today.setHours(0, 0, 0, 0);\n      return eventType.periodCountCalendarDays\n        ? addCalendarDays(today, days)\n        : addBusinessDays(today, days);\n    }\n  }\n\n  return null;\n}\n\nexport function getInitials(name: string): string {\n  const parts = name\n    .split(\" \")\n    .map((part) => part.trim())\n    .filter(Boolean)\n    .slice(0, 2);\n\n  if (parts.length === 0) {\n    return \"NA\";\n  }\n\n  return parts.map((part) => part[0]?.toUpperCase() ?? \"\").join(\"\");\n}\n\nexport function formatSelectedWeekday(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  }).format(date);\n}\n\nexport function formatSelectedDay(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"2-digit\",\n  }).format(date);\n}\n\nexport function formatSelectedMonth(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  }).format(date);\n}\n\nexport function formatConfirmDateDetail(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"numeric\",\n    month: \"long\",\n    year: \"numeric\",\n  }).format(date);\n}\n\nfunction parseTimeLabel(\n  label: string,\n): { hours: number; minutes: number } | null {\n  const [hoursRaw, minutesRaw] = label.split(\":\");\n  const hours = Number(hoursRaw);\n  const minutes = Number(minutesRaw);\n  if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n    return null;\n  }\n  return { hours, minutes };\n}\n\nfunction formatConfirmTimePart(\n  date: Date,\n  locale: string,\n  hour12: boolean,\n  includePeriod: boolean,\n): string {\n  if (!hour12) {\n    return new Intl.DateTimeFormat(\"en-GB\", {\n      hour: \"2-digit\",\n      hour12: false,\n      minute: \"2-digit\",\n    }).format(date);\n  }\n\n  const parts = new Intl.DateTimeFormat(locale, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(date);\n\n  return parts\n    .filter(\n      (part) =>\n        part.type === \"hour\" ||\n        part.type === \"minute\" ||\n        (includePeriod && part.type === \"dayPeriod\") ||\n        (part.type === \"literal\" && part.value.trim() !== \"\"),\n    )\n    .map((part) =>\n      part.type === \"dayPeriod\" ? part.value.toLowerCase() : part.value,\n    )\n    .join(\"\")\n    .trim();\n}\n\nexport function formatConfirmTimeRange(\n  startTime: string,\n  durationMinutes: number,\n  hour12: boolean,\n  locale: string,\n): string {\n  const parsed = parseTimeLabel(startTime);\n  if (!parsed) {\n    return startTime;\n  }\n\n  const startDate = new Date();\n  startDate.setHours(parsed.hours, parsed.minutes, 0, 0);\n  const endDate = new Date(startDate.getTime() + durationMinutes * 60_000);\n\n  if (!hour12) {\n    return `${formatConfirmTimePart(startDate, locale, false, false)} – ${formatConfirmTimePart(endDate, locale, false, false)}`;\n  }\n\n  const startParts = new Intl.DateTimeFormat(locale, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(startDate);\n  const endParts = new Intl.DateTimeFormat(locale, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(endDate);\n  const startPeriod = startParts\n    .find((part) => part.type === \"dayPeriod\")\n    ?.value.toLowerCase();\n  const endPeriod = endParts\n    .find((part) => part.type === \"dayPeriod\")\n    ?.value.toLowerCase();\n  const samePeriod = startPeriod === endPeriod;\n\n  return `${formatConfirmTimePart(startDate, locale, true, !samePeriod)} – ${formatConfirmTimePart(endDate, locale, true, true)}`;\n}\n\nexport function toDateKey(date: Date, timeZone: string): string {\n  return new Intl.DateTimeFormat(\"en-CA\", {\n    day: \"2-digit\",\n    month: \"2-digit\",\n    timeZone,\n    year: \"numeric\",\n  }).format(date);\n}\n\n// Calendar grid dates are plain Y-M-D values (local Date components), not\n// instants. Use this when looking up slots keyed by the API/booking timezone.\nexport function toCalendarDateKey(date: Date): string {\n  const year = date.getFullYear();\n  const month = String(date.getMonth() + 1).padStart(2, \"0\");\n  const day = String(date.getDate()).padStart(2, \"0\");\n  return `${year}-${month}-${day}`;\n}\n\nexport function getTodayInTimeZone(\n  timeZone: string,\n  now: Date = new Date(),\n): Date {\n  const [yearRaw, monthRaw, dayRaw] = toDateKey(now, timeZone).split(\"-\");\n  const year = Number(yearRaw);\n  const month = Number(monthRaw);\n  const day = Number(dayRaw);\n  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {\n    const fallback = new Date(now);\n    fallback.setHours(0, 0, 0, 0);\n    return fallback;\n  }\n  return new Date(year, month - 1, day);\n}\n\nexport function getMinimumNavigableMonth(\n  timeZone: string,\n  bookingWindowStart?: Date | null,\n  now: Date = new Date(),\n): Date {\n  const todayInTz = getTodayInTimeZone(timeZone, now);\n  const startBase =\n    bookingWindowStart && bookingWindowStart > todayInTz\n      ? bookingWindowStart\n      : todayInTz;\n  return new Date(startBase.getFullYear(), startBase.getMonth(), 1);\n}\n\nexport function isCalendarMonthBefore(left: Date, right: Date): boolean {\n  const leftMonth = new Date(left.getFullYear(), left.getMonth(), 1);\n  const rightMonth = new Date(right.getFullYear(), right.getMonth(), 1);\n  return leftMonth.getTime() < rightMonth.getTime();\n}\n\nfunction toTimeLabel(date: Date, timeZone: string): string {\n  return new Intl.DateTimeFormat(\"en-GB\", {\n    hour: \"2-digit\",\n    hour12: false,\n    minute: \"2-digit\",\n    timeZone,\n  }).format(date);\n}\n\n// Whether a locale conventionally shows time in 24-hour form, used to seed the\n// 12h/24h toggle (e.g. en-US → 12h, most of Europe → 24h). Falls back to 24h.\nexport function prefers24Hour(locale: string): boolean {\n  try {\n    const resolved = new Intl.DateTimeFormat(locale, {\n      hour: \"numeric\",\n    }).resolvedOptions();\n    if (typeof resolved.hour12 === \"boolean\") {\n      return !resolved.hour12;\n    }\n    return resolved.hourCycle === \"h23\" || resolved.hourCycle === \"h24\";\n  } catch {\n    return true;\n  }\n}\n\n// Slots are stored as 24h \"HH:mm\" strings (stable ids); reformat for display.\nexport function displayTimeLabel(label: string, hour12: boolean): string {\n  if (!hour12) {\n    return label;\n  }\n  const [hoursRaw, minutesRaw] = label.split(\":\");\n  const hours = Number(hoursRaw);\n  const minutes = Number(minutesRaw);\n  if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n    return label;\n  }\n  const date = new Date();\n  date.setHours(hours, minutes, 0, 0);\n  const parts = new Intl.DateTimeFormat(undefined, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(date);\n  return parts\n    .filter((part) => part.type !== \"literal\" || part.value.trim() !== \"\")\n    .map((part) =>\n      part.type === \"dayPeriod\" ? part.value.toLowerCase() : part.value,\n    )\n    .join(\"\");\n}\n\nexport function isSingleDigit12HourLabel(label: string): boolean {\n  const hours = Number(label.split(\":\")[0]);\n  if (Number.isNaN(hours)) {\n    return false;\n  }\n\n  const normalizedHours = hours % 12 || 12;\n  return normalizedHours < 10;\n}\n\nfunction parseSlotDate(value: unknown): Date | null {\n  if (typeof value === \"string\") {\n    if (/^\\d{2}:\\d{2}$/.test(value)) {\n      return null;\n    }\n    const parsed = new Date(value);\n    return Number.isNaN(parsed.getTime()) ? null : parsed;\n  }\n\n  if (!value || typeof value !== \"object\") {\n    return null;\n  }\n\n  const record = value as Record<string, unknown>;\n  const candidate =\n    record.start ??\n    record.startTime ??\n    record.time ??\n    record.dateTime ??\n    record.date;\n\n  return parseSlotDate(candidate);\n}\n\nexport function extractSlotsByDate(\n  payload: unknown,\n  timeZone: string,\n): Record<string, string[]> {\n  const byDate = new Map<string, Set<string>>();\n  const addSlot = (dateKey: string, time: string) => {\n    if (!byDate.has(dateKey)) {\n      byDate.set(dateKey, new Set<string>());\n    }\n    byDate.get(dateKey)?.add(time);\n  };\n\n  if (!payload || typeof payload !== \"object\") {\n    return {};\n  }\n\n  const visitNode = (node: unknown) => {\n    if (!node || typeof node !== \"object\") {\n      return;\n    }\n\n    if (Array.isArray(node)) {\n      for (const item of node) {\n        visitNode(item);\n      }\n      return;\n    }\n\n    const record = node as Record<string, unknown>;\n\n    for (const [key, value] of Object.entries(record)) {\n      if (/^\\d{4}-\\d{2}-\\d{2}$/.test(key) && Array.isArray(value)) {\n        for (const slot of value) {\n          if (typeof slot === \"string\" && /^\\d{2}:\\d{2}$/.test(slot)) {\n            addSlot(key, slot);\n            continue;\n          }\n\n          const parsed = parseSlotDate(slot);\n          if (!parsed) {\n            continue;\n          }\n\n          addSlot(toDateKey(parsed, timeZone), toTimeLabel(parsed, timeZone));\n        }\n      } else {\n        visitNode(value);\n      }\n    }\n  };\n\n  visitNode(payload);\n\n  const result: Record<string, string[]> = {};\n  for (const [key, times] of byDate.entries()) {\n    result[key] = Array.from(times).sort((a, b) => a.localeCompare(b));\n  }\n\n  return result;\n}\n\n// Event's minimum booking notice in minutes (cal.com `minimumBookingNotice`).\nexport function extractMinimumBookingNotice(payload: unknown): number {\n  if (!payload || typeof payload !== \"object\") {\n    return 0;\n  }\n  const minutes = toFiniteNumber(\n    (payload as Record<string, unknown>).minimumBookingNotice,\n  );\n  return minutes != null && minutes > 0 ? minutes : 0;\n}\n\n// Drop slots that are no longer bookable: anything earlier than now plus the\n// minimum booking notice, evaluated in the booking timezone. Future days are\n// kept untouched; only the boundary day is partially filtered. Guards against\n// showing already-passed times for today (and as the session ages).\nexport function filterBookableSlots(\n  slotsByDate: Record<string, string[]>,\n  timeZone: string,\n  noticeMinutes: number,\n  now: Date,\n): Record<string, string[]> {\n  const cutoff = new Date(now.getTime() + noticeMinutes * 60_000);\n  const cutoffDateKey = toDateKey(cutoff, timeZone);\n  const [cutoffHoursRaw, cutoffMinutesRaw] = toTimeLabel(\n    cutoff,\n    timeZone,\n  ).split(\":\");\n  const cutoffHours = Number(cutoffHoursRaw);\n  const cutoffMinutes = Number(cutoffMinutesRaw);\n  if (Number.isNaN(cutoffHours) || Number.isNaN(cutoffMinutes)) {\n    return slotsByDate;\n  }\n  const cutoffOfDay = cutoffHours * 60 + cutoffMinutes;\n\n  const result: Record<string, string[]> = {};\n  for (const [dateKey, times] of Object.entries(slotsByDate)) {\n    if (dateKey < cutoffDateKey) {\n      continue;\n    }\n    if (dateKey > cutoffDateKey) {\n      result[dateKey] = times;\n      continue;\n    }\n    const kept = times.filter((time) => {\n      const [hoursRaw, minutesRaw] = time.split(\":\");\n      const hours = Number(hoursRaw);\n      const minutes = Number(minutesRaw);\n      if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n        return false;\n      }\n      return hours * 60 + minutes >= cutoffOfDay;\n    });\n    if (kept.length > 0) {\n      result[dateKey] = kept;\n    }\n  }\n  return result;\n}\n\nexport function findFirstAvailableDate(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n): Date | null {\n  const year = month.getFullYear();\n  const monthIndex = month.getMonth();\n  const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();\n  const todayKey = toCalendarDateKey(todayStart);\n\n  for (let day = 1; day <= daysInMonth; day += 1) {\n    const date = new Date(year, monthIndex, day);\n    const key = toCalendarDateKey(date);\n    if (key < todayKey) {\n      continue;\n    }\n\n    if ((slotsByDate[key] ?? []).length > 0) {\n      return date;\n    }\n  }\n\n  return null;\n}\n\n// --- Calendar grid (mirrors booker-calendar.tsx) ---\n\nexport function getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction calendarStartOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction calendarEndOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction calendarAddDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction calendarStartOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return calendarAddDays(day, -diff);\n}\n\nfunction calendarEndOfWeek(date: Date, weekStartsOn = 0): Date {\n  return calendarAddDays(calendarStartOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameCalendarMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nexport type CalendarViewOptions = {\n  weekStartsOn?: number;\n  shiftWeeks?: boolean;\n  startMonth?: Date;\n  endMonth?: Date;\n};\n\nexport function getVisibleCalendarDates(\n  month: Date,\n  today: Date,\n  options: CalendarViewOptions = {},\n): Date[] {\n  const weekStartsOn = options.weekStartsOn ?? 0;\n  const shiftWeeks = options.shiftWeeks ?? true;\n  const firstMonth = calendarStartOfMonth(month);\n\n  const naturalGridStart = calendarStartOfWeek(firstMonth, weekStartsOn);\n  const todayStart = new Date(\n    today.getFullYear(),\n    today.getMonth(),\n    today.getDate(),\n  );\n  const todayRow = Math.floor(\n    Math.round(\n      (todayStart.getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand =\n    shiftWeeks && isSameCalendarMonth(firstMonth, today) && todayRow >= 3;\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const monthStart = calendarStartOfMonth(firstMonth);\n  const offset = shiftRows * 7;\n  const gridStart = calendarAddDays(\n    calendarStartOfWeek(monthStart, weekStartsOn),\n    offset,\n  );\n  const gridEnd = calendarAddDays(\n    calendarEndOfWeek(calendarEndOfMonth(firstMonth), weekStartsOn),\n    offset,\n  );\n\n  const dates: Date[] = [];\n  for (\n    let cursor = gridStart;\n    cursor.getTime() <= gridEnd.getTime();\n    cursor = calendarAddDays(cursor, 1)\n  ) {\n    dates.push(cursor);\n  }\n\n  if (expand) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(calendarAddDays(lastDate, 1));\n    }\n  }\n\n  const navStart = options.startMonth\n    ? calendarStartOfMonth(options.startMonth)\n    : undefined;\n  const navEnd = options.endMonth\n    ? calendarStartOfMonth(options.endMonth)\n    : undefined;\n  const monthEnd = calendarEndOfMonth(firstMonth);\n\n  return dates.filter((date) => {\n    if (navStart && date < navStart) {\n      return false;\n    }\n    if (navEnd && date > calendarEndOfMonth(navEnd)) {\n      return false;\n    }\n    if (date < monthStart) {\n      return false;\n    }\n    if (!expand && date > monthEnd) {\n      return false;\n    }\n    return true;\n  });\n}\n\nexport function findFirstAvailableInVisibleGrid(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  todayStart: Date,\n  options: CalendarViewOptions = {},\n): Date | null {\n  const todayKey = toCalendarDateKey(todayStart);\n  for (const date of getVisibleCalendarDates(month, todayStart, options)) {\n    const key = toCalendarDateKey(date);\n    if (key < todayKey) {\n      continue;\n    }\n    if ((slotsByDate[key] ?? []).length > 0) {\n      return date;\n    }\n  }\n  return null;\n}\n\nexport function hasAvailabilityInVisibleGrid(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  todayStart: Date,\n  options: CalendarViewOptions = {},\n): boolean {\n  return (\n    findFirstAvailableInVisibleGrid(month, slotsByDate, todayStart, options) !=\n    null\n  );\n}\n\nexport function pickDefaultSelectedDate(\n  currentMonth: Date,\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n  viewOptions?: CalendarViewOptions,\n): Date | null {\n  if (viewOptions) {\n    return findFirstAvailableInVisibleGrid(\n      currentMonth,\n      slotsByDate,\n      todayStart,\n      viewOptions,\n    );\n  }\n\n  return findFirstAvailableDate(\n    currentMonth,\n    slotsByDate,\n    _timeZone,\n    todayStart,\n  );\n}\n\n// Earliest loaded date (today or later) that still has open slots, used to\n// offer a \"jump to next availability\" affordance from an empty month/day.\nexport function findNextAvailableDate(\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n): Date | null {\n  const todayKey = toCalendarDateKey(todayStart);\n  let bestKey: string | null = null;\n  for (const [key, times] of Object.entries(slotsByDate)) {\n    if (times.length === 0 || key < todayKey) {\n      continue;\n    }\n    if (bestKey === null || key < bestKey) {\n      bestKey = key;\n    }\n  }\n\n  if (!bestKey) {\n    return null;\n  }\n\n  const [yearRaw, monthRaw, dayRaw] = bestKey.split(\"-\");\n  const year = Number(yearRaw);\n  const month = Number(monthRaw);\n  const day = Number(dayRaw);\n  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {\n    return null;\n  }\n  return new Date(year, month - 1, day);\n}\n",
       "type": "registry:lib",
       "target": "lib/booker/utils.ts"
     }
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index d9c209f8d..408620875 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -11339,6 +11339,11 @@
           "target": "components/atoms/booker-1.tsx",
           "type": "registry:block"
         },
+        {
+          "path": "registry/default/atoms/booker/booker-confirm-form.tsx",
+          "target": "components/atoms/booker/booker-confirm-form.tsx",
+          "type": "registry:component"
+        },
         {
           "path": "registry/default/atoms/booker/booker-steps.tsx",
           "target": "components/atoms/booker/booker-steps.tsx",
@@ -11422,6 +11427,8 @@
         "@coss/card",
         "@coss/combobox",
         "@coss/empty",
+        "@coss/field",
+        "@coss/form",
         "@coss/input",
         "@coss/label",
         "@coss/popover",
@@ -11429,6 +11436,7 @@
         "@coss/select",
         "@coss/skeleton",
         "@coss/switch",
+        "@coss/textarea",
         "@coss/tooltip"
       ],
       "meta": {
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index d9c209f8d..408620875 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -11339,6 +11339,11 @@
           "target": "components/atoms/booker-1.tsx",
           "type": "registry:block"
         },
+        {
+          "path": "registry/default/atoms/booker/booker-confirm-form.tsx",
+          "target": "components/atoms/booker/booker-confirm-form.tsx",
+          "type": "registry:component"
+        },
         {
           "path": "registry/default/atoms/booker/booker-steps.tsx",
           "target": "components/atoms/booker/booker-steps.tsx",
@@ -11422,6 +11427,8 @@
         "@coss/card",
         "@coss/combobox",
         "@coss/empty",
+        "@coss/field",
+        "@coss/form",
         "@coss/input",
         "@coss/label",
         "@coss/popover",
@@ -11429,6 +11436,7 @@
         "@coss/select",
         "@coss/skeleton",
         "@coss/switch",
+        "@coss/textarea",
         "@coss/tooltip"
       ],
       "meta": {
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index ab01e9b37..208eb23ae 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -9839,11 +9839,15 @@ export const Index: Record<string, any> = {
     name: "booker-1",
     description: "A full scheduling flow powered by Cal.com API v2.",
     type: "registry:block",
-    registryDependencies: ["@coss/avatar","@coss/button","@coss/cal-api","@coss/card","@coss/combobox","@coss/empty","@coss/input","@coss/label","@coss/popover","@coss/scroll-area","@coss/select","@coss/skeleton","@coss/switch","@coss/tooltip"],
+    registryDependencies: ["@coss/avatar","@coss/button","@coss/cal-api","@coss/card","@coss/combobox","@coss/empty","@coss/field","@coss/form","@coss/input","@coss/label","@coss/popover","@coss/scroll-area","@coss/select","@coss/skeleton","@coss/switch","@coss/textarea","@coss/tooltip"],
     files: [{
       path: "registry/default/atoms/booker-1.tsx",
       type: "registry:block",
       target: "components/atoms/booker-1.tsx"
+    },{
+      path: "registry/default/atoms/booker/booker-confirm-form.tsx",
+      type: "registry:component",
+      target: "components/atoms/booker/booker-confirm-form.tsx"
     },{
       path: "registry/default/atoms/booker/booker-steps.tsx",
       type: "registry:component",
diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index 8f6bdf8fd..9366c4004 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -15,7 +15,7 @@ import { EventDescription } from "./booker/event-description";
 import { HeaderBanner } from "./booker/header-banner";
 import { Location } from "./booker/location";
 import { TimePicker } from "./booker/time-picker";
-import { TimezonePicker } from "./booker/timezone-picker";
+import { TimezoneDisplay, TimezonePicker } from "./booker/timezone-picker";
 import type { BookerTarget } from "@/lib/booker/target";
 import { type BookerInitialData, useBooker } from "@/lib/booker/use-booker";
 
@@ -135,7 +135,11 @@ export function Booker({
                   }}
                   locations={displayMeta.eventTypeLocations}
                 />
-                <TimezonePicker {...booker.timezoneProps} />
+                {booker.step === "select" ? (
+                  <TimezonePicker {...booker.timezoneProps} />
+                ) : (
+                  <TimezoneDisplay value={booker.timezoneProps.value} />
+                )}
               </div>
             ) : (
               <div className="flex flex-col gap-1">
@@ -182,8 +186,13 @@ export function Booker({
                     ? defaultFormValues.name
                     : undefined
                 }
+                durationMinutes={booker.durationProps.value}
+                is24Hour={booker.timePickerProps.is24Hour}
                 labels={t}
+                locale={booker.calendarProps.locale}
                 onBack={booker.onBack}
+                selectedDate={booker.timePickerProps.selectedDate}
+                selectedTime={booker.selectedTime}
               />
             </div>
           )}
diff --git a/apps/ui/registry/default/atoms/booker/booker-calendar.tsx b/apps/ui/registry/default/atoms/booker/booker-calendar.tsx
index 5b416b8c3..4f13f16b1 100644
--- a/apps/ui/registry/default/atoms/booker/booker-calendar.tsx
+++ b/apps/ui/registry/default/atoms/booker/booker-calendar.tsx
@@ -325,14 +325,16 @@ function DayButton({
 
 // Month + year heading; the year is muted via formatToParts so it stays
 // locale-correct (some locales render "2026 June").
-function MonthCaption({
+export function MonthCaption({
   date,
   formatter,
   className,
+  muteYear = true,
 }: {
   date: Date;
   formatter: Intl.DateTimeFormat;
   className?: string;
+  muteYear?: boolean;
 }): ReactElement {
   return (
     <div
@@ -343,7 +345,10 @@ function MonthCaption({
     >
       {formatter.formatToParts(date).map((part) =>
         part.type === "year" ? (
-          <span key={`year-${part.value}`} className="text-muted-foreground/72">
+          <span
+            key={`year-${part.value}`}
+            className={muteYear ? "text-muted-foreground/72" : undefined}
+          >
             {part.value}
           </span>
         ) : (
diff --git a/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx b/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
index e164cc648..0df23cc7c 100644
--- a/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
+++ b/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
@@ -7,12 +7,22 @@ import { Form } from "@/registry/default/ui/form";
 import { Input } from "@/registry/default/ui/input";
 import { Textarea } from "@/registry/default/ui/textarea";
 import type { BookerLabels } from "./booker-labels";
+import {
+  formatConfirmDateDetail,
+  formatConfirmTimeRange,
+  formatSelectedWeekday,
+} from "@/lib/booker/utils";
 
 type BookerConfirmFormProps = {
   defaultEmail?: string;
   defaultName?: string;
+  durationMinutes: number;
+  is24Hour: boolean;
   labels: BookerLabels;
+  locale: string;
   onBack: () => void;
+  selectedDate?: Date;
+  selectedTime: string | null;
 };
 
 function RequiredMark() {
@@ -22,84 +32,110 @@ function RequiredMark() {
 export function BookerConfirmForm({
   defaultEmail,
   defaultName,
+  durationMinutes,
+  is24Hour,
   labels,
+  locale,
   onBack,
+  selectedDate,
+  selectedTime,
 }: BookerConfirmFormProps) {
-  return (
-    <Form
-      className="flex flex-col gap-5"
-      onSubmit={(event) => {
-        event.preventDefault();
-      }}
-    >
-      <Field>
-        <FieldLabel>
-          {labels.confirmYourName} <RequiredMark />
-        </FieldLabel>
-        <Input
-          autoFocus
-          defaultValue={defaultName}
-          name="name"
-          required
-          type="text"
-        />
-      </Field>
+  const showSummary = selectedDate != null && selectedTime != null;
 
-      <Field>
-        <FieldLabel>
-          {labels.confirmEmail} <RequiredMark />
-        </FieldLabel>
-        <Input
-          autoComplete="email"
-          defaultValue={defaultEmail}
-          name="email"
-          required
-          type="email"
-        />
-      </Field>
+  return (
+    <div className="flex flex-col gap-4">
+      {showSummary ? (
+        <div className="flex flex-wrap items-baseline gap-x-1.5 font-heading">
+          <span>
+            {formatSelectedWeekday(selectedDate, locale)}{" "}
+            {formatConfirmDateDetail(selectedDate, locale)}
+          </span>
+          <span className="text-muted-foreground/72">
+            {formatConfirmTimeRange(
+              selectedTime,
+              durationMinutes,
+              !is24Hour,
+              locale,
+            )}
+          </span>
+        </div>
+      ) : null}
 
-      <Field>
-        <FieldLabel>{labels.confirmNotes}</FieldLabel>
-        <Textarea
-          name="notes"
-          placeholder={labels.confirmNotesPlaceholder}
-          rows={3}
-        />
-      </Field>
+      <Form
+        className="flex flex-col gap-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+        }}
+      >
+        <Field>
+          <FieldLabel>
+            {labels.confirmYourName} <RequiredMark />
+          </FieldLabel>
+          <Input
+            autoFocus
+            defaultValue={defaultName}
+            name="name"
+            required
+            type="text"
+          />
+        </Field>
 
-      <Button className="-ms-2 self-start" type="button" variant="ghost">
-        <UserPlusIcon aria-hidden="true" />
-        {labels.confirmAddGuests}
-      </Button>
+        <Field>
+          <FieldLabel>
+            {labels.confirmEmail} <RequiredMark />
+          </FieldLabel>
+          <Input
+            autoComplete="email"
+            defaultValue={defaultEmail}
+            name="email"
+            required
+            type="email"
+          />
+        </Field>
 
-      <p className="text-muted-foreground text-sm">
-        {labels.confirmTermsPrefix}{" "}
-        <a
-          className="text-foreground underline-offset-4 hover:underline"
-          href="https://cal.com/terms"
-          rel="noreferrer"
-          target="_blank"
-        >
-          {labels.confirmTerms}
-        </a>{" "}
-        and{" "}
-        <a
-          className="text-foreground underline-offset-4 hover:underline"
-          href="https://cal.com/privacy"
-          rel="noreferrer"
-          target="_blank"
-        >
-          {labels.confirmPrivacyPolicy}
-        </a>
-        .
-      </p>
+        <Field>
+          <FieldLabel>{labels.confirmNotes}</FieldLabel>
+          <Textarea
+            name="notes"
+            placeholder={labels.confirmNotesPlaceholder}
+            rows={3}
+          />
+        </Field>
 
-      <div className="flex justify-end gap-2 pt-1">
-        <Button onClick={onBack} type="button" variant="ghost">
-          {labels.confirmBack}
+        <Button className="self-start" type="button" variant="ghost">
+          <UserPlusIcon aria-hidden="true" />
+          {labels.confirmAddGuests}
         </Button>
-        <Button type="submit">{labels.confirmSubmit}</Button>
-      </div>
-    </Form>
+
+        <p className="text-muted-foreground text-sm">
+          {labels.confirmTermsPrefix}{" "}
+          <a
+            className="text-foreground underline-offset-4 hover:underline"
+            href="https://cal.com/terms"
+            rel="noreferrer"
+            target="_blank"
+          >
+            {labels.confirmTerms}
+          </a>{" "}
+          and{" "}
+          <a
+            className="text-foreground underline-offset-4 hover:underline"
+            href="https://cal.com/privacy"
+            rel="noreferrer"
+            target="_blank"
+          >
+            {labels.confirmPrivacyPolicy}
+          </a>
+          .
+        </p>
+
+        <div className="flex justify-end gap-2 pt-1">
+          <Button onClick={onBack} type="button" variant="ghost">
+            {labels.confirmBack}
+          </Button>
+          <Button type="submit">{labels.confirmSubmit}</Button>
+        </div>
+      </Form>
+    </div>
   );
 }
diff --git a/apps/ui/registry/default/atoms/booker/booker-steps.tsx b/apps/ui/registry/default/atoms/booker/booker-steps.tsx
index 28ce3be1b..d7d0e98b7 100644
--- a/apps/ui/registry/default/atoms/booker/booker-steps.tsx
+++ b/apps/ui/registry/default/atoms/booker/booker-steps.tsx
@@ -11,8 +11,8 @@ import { type ReactNode, useEffect, useLayoutEffect, useRef } from "react";
 import type { BookerStep } from "@/lib/booker/use-booker";
 
 const EASE = [0.32, 0.72, 0, 1] as const;
-const SIZE_TRANSITION = { duration: 0.45, ease: EASE } as const;
-const ENTER_TRANSITION = { delay: 0.05, duration: 0.55, ease: EASE } as const;
+const SIZE_TRANSITION = { duration: 0.3, ease: EASE } as const;
+const ENTER_TRANSITION = { delay: 0.05, duration: 0.4, ease: EASE } as const;
 
 const useIsomorphicLayoutEffect =
   typeof window === "undefined" ? useEffect : useLayoutEffect;
diff --git a/apps/ui/registry/default/atoms/booker/timezone-picker.tsx b/apps/ui/registry/default/atoms/booker/timezone-picker.tsx
index c4d02c87b..abdaede9a 100644
--- a/apps/ui/registry/default/atoms/booker/timezone-picker.tsx
+++ b/apps/ui/registry/default/atoms/booker/timezone-picker.tsx
@@ -26,6 +26,22 @@ type TimezonePickerProps = {
   onValueChange: (value: string) => void;
 };
 
+function formatTimezoneLabel(timezone: string): string {
+  return timezone.replace(/_/g, " ");
+}
+
+export function TimezoneDisplay({ value }: { value: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <GlobeIcon
+        className="size-4.5 shrink-0 opacity-80 sm:size-4"
+        aria-hidden="true"
+      />
+      <span>{formatTimezoneLabel(value)}</span>
+    </div>
+  );
+}
+
 export function TimezonePicker({ value, onValueChange }: TimezonePickerProps) {
   const timezoneOptions = useMemo<TimezoneOption[]>(() => {
     const rawTimezones =
@@ -58,7 +74,7 @@ export function TimezonePicker({ value, onValueChange }: TimezonePickerProps) {
         const totalMinutes = sign * (hours * 60 + minutes);
 
         return {
-          label: timezone.replace(/_/g, " "),
+          label: formatTimezoneLabel(timezone),
           numericOffset: totalMinutes,
           offset: modifiedOffset,
           value: timezone,
diff --git a/apps/ui/registry/default/atoms/lib/booker/utils.ts b/apps/ui/registry/default/atoms/lib/booker/utils.ts
index 518b6a47a..b7ebe4d6d 100644
--- a/apps/ui/registry/default/atoms/lib/booker/utils.ts
+++ b/apps/ui/registry/default/atoms/lib/booker/utils.ts
@@ -675,6 +675,101 @@ export function formatSelectedMonth(date: Date, locale: string): string {
   }).format(date);
 }
 
+export function formatConfirmDateDetail(date: Date, locale: string): string {
+  return new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  }).format(date);
+}
+
+function parseTimeLabel(
+  label: string,
+): { hours: number; minutes: number } | null {
+  const [hoursRaw, minutesRaw] = label.split(":");
+  const hours = Number(hoursRaw);
+  const minutes = Number(minutesRaw);
+  if (Number.isNaN(hours) || Number.isNaN(minutes)) {
+    return null;
+  }
+  return { hours, minutes };
+}
+
+function formatConfirmTimePart(
+  date: Date,
+  locale: string,
+  hour12: boolean,
+  includePeriod: boolean,
+): string {
+  if (!hour12) {
+    return new Intl.DateTimeFormat("en-GB", {
+      hour: "2-digit",
+      hour12: false,
+      minute: "2-digit",
+    }).format(date);
+  }
+
+  const parts = new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    hour12: true,
+    minute: "2-digit",
+  }).formatToParts(date);
+
+  return parts
+    .filter(
+      (part) =>
+        part.type === "hour" ||
+        part.type === "minute" ||
+        (includePeriod && part.type === "dayPeriod") ||
+        (part.type === "literal" && part.value.trim() !== ""),
+    )
+    .map((part) =>
+      part.type === "dayPeriod" ? part.value.toLowerCase() : part.value,
+    )
+    .join("")
+    .trim();
+}
+
+export function formatConfirmTimeRange(
+  startTime: string,
+  durationMinutes: number,
+  hour12: boolean,
+  locale: string,
+): string {
+  const parsed = parseTimeLabel(startTime);
+  if (!parsed) {
+    return startTime;
+  }
+
+  const startDate = new Date();
+  startDate.setHours(parsed.hours, parsed.minutes, 0, 0);
+  const endDate = new Date(startDate.getTime() + durationMinutes * 60_000);
+
+  if (!hour12) {
+    return `${formatConfirmTimePart(startDate, locale, false, false)} – ${formatConfirmTimePart(endDate, locale, false, false)}`;
+  }
+
+  const startParts = new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    hour12: true,
+    minute: "2-digit",
+  }).formatToParts(startDate);
+  const endParts = new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    hour12: true,
+    minute: "2-digit",
+  }).formatToParts(endDate);
+  const startPeriod = startParts
+    .find((part) => part.type === "dayPeriod")
+    ?.value.toLowerCase();
+  const endPeriod = endParts
+    .find((part) => part.type === "dayPeriod")
+    ?.value.toLowerCase();
+  const samePeriod = startPeriod === endPeriod;
+
+  return `${formatConfirmTimePart(startDate, locale, true, !samePeriod)} – ${formatConfirmTimePart(endDate, locale, true, true)}`;
+}
+
 export function toDateKey(date: Date, timeZone: string): string {
   return new Intl.DateTimeFormat("en-CA", {
     day: "2-digit",

From ffbb5c043d20dced472c6d3d5b0713fbb0eef16d Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Wed, 8 Jul 2026 11:12:42 +0200
Subject: [PATCH 21/49] mc

---
 apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx b/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
index 0df23cc7c..f5ff81596 100644
--- a/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
+++ b/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
@@ -45,7 +45,7 @@ export function BookerConfirmForm({
   return (
     <div className="flex flex-col gap-4">
       {showSummary ? (
-        <div className="flex flex-wrap items-baseline gap-x-1.5 font-heading">
+        <div className="flex flex-wrap items-baseline gap-x-1.5 font-heading @3xl:@max-5xl:text-base text-lg">
           <span>
             {formatSelectedWeekday(selectedDate, locale)}{" "}
             {formatConfirmDateDetail(selectedDate, locale)}

From 959b73cc51c5a0cfd996b7c74256e88c4e0da1ce Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Wed, 8 Jul 2026 11:13:04 +0200
Subject: [PATCH 22/49] build reg

---
 apps/ui/public/r/booker-1.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index 7c3712e88..ed46ed016 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -36,7 +36,7 @@
     },
     {
       "path": "registry/default/atoms/booker/booker-confirm-form.tsx",
-      "content": "\"use client\";\n\nimport { UserPlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\nimport type { BookerLabels } from \"./booker-labels\";\nimport {\n  formatConfirmDateDetail,\n  formatConfirmTimeRange,\n  formatSelectedWeekday,\n} from \"@/lib/booker/utils\";\n\ntype BookerConfirmFormProps = {\n  defaultEmail?: string;\n  defaultName?: string;\n  durationMinutes: number;\n  is24Hour: boolean;\n  labels: BookerLabels;\n  locale: string;\n  onBack: () => void;\n  selectedDate?: Date;\n  selectedTime: string | null;\n};\n\nfunction RequiredMark() {\n  return <span className=\"text-destructive-foreground\">*</span>;\n}\n\nexport function BookerConfirmForm({\n  defaultEmail,\n  defaultName,\n  durationMinutes,\n  is24Hour,\n  labels,\n  locale,\n  onBack,\n  selectedDate,\n  selectedTime,\n}: BookerConfirmFormProps) {\n  const showSummary = selectedDate != null && selectedTime != null;\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      {showSummary ? (\n        <div className=\"flex flex-wrap items-baseline gap-x-1.5 font-heading\">\n          <span>\n            {formatSelectedWeekday(selectedDate, locale)}{\" \"}\n            {formatConfirmDateDetail(selectedDate, locale)}\n          </span>\n          <span className=\"text-muted-foreground/72\">\n            {formatConfirmTimeRange(\n              selectedTime,\n              durationMinutes,\n              !is24Hour,\n              locale,\n            )}\n          </span>\n        </div>\n      ) : null}\n\n      <Form\n        className=\"flex flex-col gap-4\"\n        onSubmit={(event) => {\n          event.preventDefault();\n        }}\n      >\n        <Field>\n          <FieldLabel>\n            {labels.confirmYourName} <RequiredMark />\n          </FieldLabel>\n          <Input\n            autoFocus\n            defaultValue={defaultName}\n            name=\"name\"\n            required\n            type=\"text\"\n          />\n        </Field>\n\n        <Field>\n          <FieldLabel>\n            {labels.confirmEmail} <RequiredMark />\n          </FieldLabel>\n          <Input\n            autoComplete=\"email\"\n            defaultValue={defaultEmail}\n            name=\"email\"\n            required\n            type=\"email\"\n          />\n        </Field>\n\n        <Field>\n          <FieldLabel>{labels.confirmNotes}</FieldLabel>\n          <Textarea\n            name=\"notes\"\n            placeholder={labels.confirmNotesPlaceholder}\n            rows={3}\n          />\n        </Field>\n\n        <Button className=\"self-start\" type=\"button\" variant=\"ghost\">\n          <UserPlusIcon aria-hidden=\"true\" />\n          {labels.confirmAddGuests}\n        </Button>\n\n        <p className=\"text-muted-foreground text-sm\">\n          {labels.confirmTermsPrefix}{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/terms\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmTerms}\n          </a>{\" \"}\n          and{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/privacy\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmPrivacyPolicy}\n          </a>\n          .\n        </p>\n\n        <div className=\"flex justify-end gap-2 pt-1\">\n          <Button onClick={onBack} type=\"button\" variant=\"ghost\">\n            {labels.confirmBack}\n          </Button>\n          <Button type=\"submit\">{labels.confirmSubmit}</Button>\n        </div>\n      </Form>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { UserPlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\nimport type { BookerLabels } from \"./booker-labels\";\nimport {\n  formatConfirmDateDetail,\n  formatConfirmTimeRange,\n  formatSelectedWeekday,\n} from \"@/lib/booker/utils\";\n\ntype BookerConfirmFormProps = {\n  defaultEmail?: string;\n  defaultName?: string;\n  durationMinutes: number;\n  is24Hour: boolean;\n  labels: BookerLabels;\n  locale: string;\n  onBack: () => void;\n  selectedDate?: Date;\n  selectedTime: string | null;\n};\n\nfunction RequiredMark() {\n  return <span className=\"text-destructive-foreground\">*</span>;\n}\n\nexport function BookerConfirmForm({\n  defaultEmail,\n  defaultName,\n  durationMinutes,\n  is24Hour,\n  labels,\n  locale,\n  onBack,\n  selectedDate,\n  selectedTime,\n}: BookerConfirmFormProps) {\n  const showSummary = selectedDate != null && selectedTime != null;\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      {showSummary ? (\n        <div className=\"flex flex-wrap items-baseline gap-x-1.5 font-heading @3xl:@max-5xl:text-base text-lg\">\n          <span>\n            {formatSelectedWeekday(selectedDate, locale)}{\" \"}\n            {formatConfirmDateDetail(selectedDate, locale)}\n          </span>\n          <span className=\"text-muted-foreground/72\">\n            {formatConfirmTimeRange(\n              selectedTime,\n              durationMinutes,\n              !is24Hour,\n              locale,\n            )}\n          </span>\n        </div>\n      ) : null}\n\n      <Form\n        className=\"flex flex-col gap-4\"\n        onSubmit={(event) => {\n          event.preventDefault();\n        }}\n      >\n        <Field>\n          <FieldLabel>\n            {labels.confirmYourName} <RequiredMark />\n          </FieldLabel>\n          <Input\n            autoFocus\n            defaultValue={defaultName}\n            name=\"name\"\n            required\n            type=\"text\"\n          />\n        </Field>\n\n        <Field>\n          <FieldLabel>\n            {labels.confirmEmail} <RequiredMark />\n          </FieldLabel>\n          <Input\n            autoComplete=\"email\"\n            defaultValue={defaultEmail}\n            name=\"email\"\n            required\n            type=\"email\"\n          />\n        </Field>\n\n        <Field>\n          <FieldLabel>{labels.confirmNotes}</FieldLabel>\n          <Textarea\n            name=\"notes\"\n            placeholder={labels.confirmNotesPlaceholder}\n            rows={3}\n          />\n        </Field>\n\n        <Button className=\"self-start\" type=\"button\" variant=\"ghost\">\n          <UserPlusIcon aria-hidden=\"true\" />\n          {labels.confirmAddGuests}\n        </Button>\n\n        <p className=\"text-muted-foreground text-sm\">\n          {labels.confirmTermsPrefix}{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/terms\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmTerms}\n          </a>{\" \"}\n          and{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/privacy\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmPrivacyPolicy}\n          </a>\n          .\n        </p>\n\n        <div className=\"flex justify-end gap-2 pt-1\">\n          <Button onClick={onBack} type=\"button\" variant=\"ghost\">\n            {labels.confirmBack}\n          </Button>\n          <Button type=\"submit\">{labels.confirmSubmit}</Button>\n        </div>\n      </Form>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/booker-confirm-form.tsx"
     },

From 62bdb4f5ed4c6c65e89a207eaf90772d9f51074a Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Wed, 8 Jul 2026 11:44:38 +0200
Subject: [PATCH 23/49] move the data info

---
 apps/ui/registry/default/atoms/booker-1.tsx   | 40 ++++++++++++++++---
 .../atoms/booker/booker-confirm-form.tsx      | 36 +----------------
 2 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index 9366c4004..11a152769 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Clock3Icon } from "lucide-react";
+import { CalendarIcon, Clock3Icon } from "lucide-react";
 import { cn } from "@/registry/default/lib/utils";
 import { Card } from "@/registry/default/ui/card";
 import { Skeleton } from "@/registry/default/ui/skeleton";
@@ -18,6 +18,11 @@ import { TimePicker } from "./booker/time-picker";
 import { TimezoneDisplay, TimezonePicker } from "./booker/timezone-picker";
 import type { BookerTarget } from "@/lib/booker/target";
 import { type BookerInitialData, useBooker } from "@/lib/booker/use-booker";
+import {
+  formatConfirmDateDetail,
+  formatConfirmTimeRange,
+  formatSelectedWeekday,
+} from "@/lib/booker/utils";
 
 type BookerProps = {
   target: BookerTarget;
@@ -49,6 +54,10 @@ export function Booker({
   }
 
   const displayMeta = booker.meta;
+  const selectedDate = booker.timePickerProps.selectedDate;
+  const selectedTime = booker.selectedTime;
+  const showSelectedSlot =
+    booker.step === "confirm" && selectedDate != null && selectedTime != null;
   const headerImageAlt = displayMeta
     ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)
     : "Booker header";
@@ -107,6 +116,30 @@ export function Booker({
 
             {displayMeta ? (
               <div className="flex flex-col gap-3 sm:text-sm">
+                {showSelectedSlot ? (
+                  <div className="flex items-center gap-2">
+                    <CalendarIcon
+                      className="size-4.5 shrink-0 opacity-80 sm:size-4"
+                      aria-hidden="true"
+                    />
+                    <span>
+                      {formatSelectedWeekday(
+                        selectedDate,
+                        booker.calendarProps.locale,
+                      )}{" "}
+                      {formatConfirmDateDetail(
+                        selectedDate,
+                        booker.calendarProps.locale,
+                      )}{" "}
+                      {formatConfirmTimeRange(
+                        selectedTime,
+                        booker.durationProps.value,
+                        !booker.timePickerProps.is24Hour,
+                        booker.calendarProps.locale,
+                      )}
+                    </span>
+                  </div>
+                ) : null}
                 {displayMeta.eventTypeDurationOptions ? (
                   <DurationPicker
                     formatLabel={t.durationMinutes}
@@ -186,13 +219,8 @@ export function Booker({
                     ? defaultFormValues.name
                     : undefined
                 }
-                durationMinutes={booker.durationProps.value}
-                is24Hour={booker.timePickerProps.is24Hour}
                 labels={t}
-                locale={booker.calendarProps.locale}
                 onBack={booker.onBack}
-                selectedDate={booker.timePickerProps.selectedDate}
-                selectedTime={booker.selectedTime}
               />
             </div>
           )}
diff --git a/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx b/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
index f5ff81596..e798687c0 100644
--- a/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
+++ b/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
@@ -7,22 +7,12 @@ import { Form } from "@/registry/default/ui/form";
 import { Input } from "@/registry/default/ui/input";
 import { Textarea } from "@/registry/default/ui/textarea";
 import type { BookerLabels } from "./booker-labels";
-import {
-  formatConfirmDateDetail,
-  formatConfirmTimeRange,
-  formatSelectedWeekday,
-} from "@/lib/booker/utils";
 
 type BookerConfirmFormProps = {
   defaultEmail?: string;
   defaultName?: string;
-  durationMinutes: number;
-  is24Hour: boolean;
   labels: BookerLabels;
-  locale: string;
   onBack: () => void;
-  selectedDate?: Date;
-  selectedTime: string | null;
 };
 
 function RequiredMark() {
@@ -32,35 +22,11 @@ function RequiredMark() {
 export function BookerConfirmForm({
   defaultEmail,
   defaultName,
-  durationMinutes,
-  is24Hour,
   labels,
-  locale,
   onBack,
-  selectedDate,
-  selectedTime,
 }: BookerConfirmFormProps) {
-  const showSummary = selectedDate != null && selectedTime != null;
-
   return (
     <div className="flex flex-col gap-4">
-      {showSummary ? (
-        <div className="flex flex-wrap items-baseline gap-x-1.5 font-heading @3xl:@max-5xl:text-base text-lg">
-          <span>
-            {formatSelectedWeekday(selectedDate, locale)}{" "}
-            {formatConfirmDateDetail(selectedDate, locale)}
-          </span>
-          <span className="text-muted-foreground/72">
-            {formatConfirmTimeRange(
-              selectedTime,
-              durationMinutes,
-              !is24Hour,
-              locale,
-            )}
-          </span>
-        </div>
-      ) : null}
-
       <Form
         className="flex flex-col gap-4"
         onSubmit={(event) => {
@@ -107,7 +73,7 @@ export function BookerConfirmForm({
           {labels.confirmAddGuests}
         </Button>
 
-        <p className="text-muted-foreground text-sm">
+        <p className="text-muted-foreground text-xs">
           {labels.confirmTermsPrefix}{" "}
           <a
             className="text-foreground underline-offset-4 hover:underline"

From 7aca8baea7e6e92334e40501270ca441d856707b Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Wed, 8 Jul 2026 11:47:11 +0200
Subject: [PATCH 24/49] implement form validation

---
 .../atoms/booker/booker-confirm-form.tsx      | 29 +++++++------------
 .../default/atoms/booker/booker-labels.ts     |  4 +++
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx b/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
index e798687c0..e39158b50 100644
--- a/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
+++ b/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
@@ -2,7 +2,7 @@
 
 import { UserPlusIcon } from "lucide-react";
 import { Button } from "@/registry/default/ui/button";
-import { Field, FieldLabel } from "@/registry/default/ui/field";
+import { Field, FieldError, FieldLabel } from "@/registry/default/ui/field";
 import { Form } from "@/registry/default/ui/form";
 import { Input } from "@/registry/default/ui/input";
 import { Textarea } from "@/registry/default/ui/textarea";
@@ -29,43 +29,34 @@ export function BookerConfirmForm({
     <div className="flex flex-col gap-4">
       <Form
         className="flex flex-col gap-4"
-        onSubmit={(event) => {
-          event.preventDefault();
+        onFormSubmit={() => {
+          // Booking submission to be wired.
         }}
       >
-        <Field>
+        <Field name="name">
           <FieldLabel>
             {labels.confirmYourName} <RequiredMark />
           </FieldLabel>
-          <Input
-            autoFocus
-            defaultValue={defaultName}
-            name="name"
-            required
-            type="text"
-          />
+          <Input autoFocus defaultValue={defaultName} required type="text" />
+          <FieldError>{labels.confirmNameError}</FieldError>
         </Field>
 
-        <Field>
+        <Field name="email">
           <FieldLabel>
             {labels.confirmEmail} <RequiredMark />
           </FieldLabel>
           <Input
             autoComplete="email"
             defaultValue={defaultEmail}
-            name="email"
             required
             type="email"
           />
+          <FieldError>{labels.confirmEmailError}</FieldError>
         </Field>
 
-        <Field>
+        <Field name="notes">
           <FieldLabel>{labels.confirmNotes}</FieldLabel>
-          <Textarea
-            name="notes"
-            placeholder={labels.confirmNotesPlaceholder}
-            rows={3}
-          />
+          <Textarea placeholder={labels.confirmNotesPlaceholder} rows={3} />
         </Field>
 
         <Button className="self-start" type="button" variant="ghost">
diff --git a/apps/ui/registry/default/atoms/booker/booker-labels.ts b/apps/ui/registry/default/atoms/booker/booker-labels.ts
index 3bd224aac..51223f6f9 100644
--- a/apps/ui/registry/default/atoms/booker/booker-labels.ts
+++ b/apps/ui/registry/default/atoms/booker/booker-labels.ts
@@ -19,6 +19,8 @@ export type BookerLabels = {
   locationSelectOnNextStep: string;
   confirmYourName: string;
   confirmEmail: string;
+  confirmNameError: string;
+  confirmEmailError: string;
   confirmNotes: string;
   confirmNotesPlaceholder: string;
   confirmAddGuests: string;
@@ -52,6 +54,8 @@ const DEFAULT_BOOKER_LABELS: BookerLabels = {
   locationSelectOnNextStep: "Select on the next step",
   confirmYourName: "Your name",
   confirmEmail: "Email address",
+  confirmNameError: "Please enter your name.",
+  confirmEmailError: "Please enter a valid email address.",
   confirmNotes: "Additional notes",
   confirmNotesPlaceholder:
     "Please share anything that will help prepare for our meeting.",

From 6b24e9d7a0ae1c6fd18dbeb4c8bdddfd57343185 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Wed, 8 Jul 2026 12:37:54 +0200
Subject: [PATCH 25/49] icons alignment

---
 apps/ui/public/r/booker-1.json                         | 10 +++++-----
 apps/ui/registry/default/atoms/booker-1.tsx            |  6 +++---
 apps/ui/registry/default/atoms/booker/location.tsx     |  2 +-
 .../registry/default/atoms/booker/timezone-picker.tsx  |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index ed46ed016..02954ea2d 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -30,13 +30,13 @@
   "files": [
     {
       "path": "registry/default/atoms/booker-1.tsx",
-      "content": "\"use client\";\n\nimport { Clock3Icon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerConfirmForm } from \"./booker/booker-confirm-form\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { BookerSteps } from \"./booker/booker-steps\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezoneDisplay, TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({\n  initialData,\n  target,\n  timezone,\n  labels,\n  defaultFormValues,\n}: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div\n            className={cn(\n              \"flex flex-col gap-6 @5xl:p-6 p-4\",\n              displayMeta?.eventTypeImageUrl && \"relative -mt-11 @5xl:-mt-13\",\n            )}\n          >\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                {booker.step === \"select\" ? (\n                  <TimezonePicker {...booker.timezoneProps} />\n                ) : (\n                  <TimezoneDisplay value={booker.timezoneProps.value} />\n                )}\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <BookerSteps step={booker.step}>\n          {booker.step === \"select\" ? (\n            <div key=\"select\" className=\"flex w-full @3xl:flex-row flex-col\">\n              <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                <BookerCalendar {...booker.calendarProps} />\n              </div>\n              <TimePicker\n                labels={{\n                  hour12Short: t.hour12Short,\n                  hour24Short: t.hour24Short,\n                  noAvailableTimes: t.noAvailableTimes,\n                  noSlotsAvailable: t.noSlotsAvailable,\n                  noSlotsThisDay: t.noSlotsThisDay,\n                  noSlotsThisMonth: t.noSlotsThisMonth,\n                  use24Hour: t.use24Hour,\n                  viewFirstAvailability: t.viewFirstAvailability,\n                }}\n                {...booker.timePickerProps}\n              />\n            </div>\n          ) : (\n            <div\n              key=\"confirm\"\n              className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @5xl:p-6 p-4\"\n            >\n              <BookerConfirmForm\n                defaultEmail={\n                  typeof defaultFormValues?.email === \"string\"\n                    ? defaultFormValues.email\n                    : undefined\n                }\n                defaultName={\n                  typeof defaultFormValues?.name === \"string\"\n                    ? defaultFormValues.name\n                    : undefined\n                }\n                durationMinutes={booker.durationProps.value}\n                is24Hour={booker.timePickerProps.is24Hour}\n                labels={t}\n                locale={booker.calendarProps.locale}\n                onBack={booker.onBack}\n                selectedDate={booker.timePickerProps.selectedDate}\n                selectedTime={booker.selectedTime}\n              />\n            </div>\n          )}\n        </BookerSteps>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
+      "content": "\"use client\";\n\nimport { CalendarIcon, Clock3Icon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerConfirmForm } from \"./booker/booker-confirm-form\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { BookerSteps } from \"./booker/booker-steps\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezoneDisplay, TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\nimport {\n  formatConfirmDateDetail,\n  formatConfirmTimeRange,\n  formatSelectedWeekday,\n} from \"@/lib/booker/utils\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({\n  initialData,\n  target,\n  timezone,\n  labels,\n  defaultFormValues,\n}: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const selectedDate = booker.timePickerProps.selectedDate;\n  const selectedTime = booker.selectedTime;\n  const showSelectedSlot =\n    booker.step === \"confirm\" && selectedDate != null && selectedTime != null;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div\n            className={cn(\n              \"flex flex-col gap-6 @5xl:p-6 p-4\",\n              displayMeta?.eventTypeImageUrl && \"relative -mt-11 @5xl:-mt-13\",\n            )}\n          >\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {showSelectedSlot ? (\n                  <div className=\"flex gap-2\">\n                    <CalendarIcon\n                      className=\"h-lh w-4.5 shrink-0 opacity-80 sm:w-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {formatSelectedWeekday(\n                        selectedDate,\n                        booker.calendarProps.locale,\n                      )}{\" \"}\n                      {formatConfirmDateDetail(\n                        selectedDate,\n                        booker.calendarProps.locale,\n                      )}{\" \"}\n                      {formatConfirmTimeRange(\n                        selectedTime,\n                        booker.durationProps.value,\n                        !booker.timePickerProps.is24Hour,\n                        booker.calendarProps.locale,\n                      )}\n                    </span>\n                  </div>\n                ) : null}\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"h-lh w-4.5 shrink-0 opacity-80 sm:w-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                {booker.step === \"select\" ? (\n                  <TimezonePicker {...booker.timezoneProps} />\n                ) : (\n                  <TimezoneDisplay value={booker.timezoneProps.value} />\n                )}\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <BookerSteps step={booker.step}>\n          {booker.step === \"select\" ? (\n            <div key=\"select\" className=\"flex w-full @3xl:flex-row flex-col\">\n              <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                <BookerCalendar {...booker.calendarProps} />\n              </div>\n              <TimePicker\n                labels={{\n                  hour12Short: t.hour12Short,\n                  hour24Short: t.hour24Short,\n                  noAvailableTimes: t.noAvailableTimes,\n                  noSlotsAvailable: t.noSlotsAvailable,\n                  noSlotsThisDay: t.noSlotsThisDay,\n                  noSlotsThisMonth: t.noSlotsThisMonth,\n                  use24Hour: t.use24Hour,\n                  viewFirstAvailability: t.viewFirstAvailability,\n                }}\n                {...booker.timePickerProps}\n              />\n            </div>\n          ) : (\n            <div\n              key=\"confirm\"\n              className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @5xl:p-6 p-4\"\n            >\n              <BookerConfirmForm\n                defaultEmail={\n                  typeof defaultFormValues?.email === \"string\"\n                    ? defaultFormValues.email\n                    : undefined\n                }\n                defaultName={\n                  typeof defaultFormValues?.name === \"string\"\n                    ? defaultFormValues.name\n                    : undefined\n                }\n                labels={t}\n                onBack={booker.onBack}\n              />\n            </div>\n          )}\n        </BookerSteps>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
       "type": "registry:block",
       "target": "components/atoms/booker-1.tsx"
     },
     {
       "path": "registry/default/atoms/booker/booker-confirm-form.tsx",
-      "content": "\"use client\";\n\nimport { UserPlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\nimport type { BookerLabels } from \"./booker-labels\";\nimport {\n  formatConfirmDateDetail,\n  formatConfirmTimeRange,\n  formatSelectedWeekday,\n} from \"@/lib/booker/utils\";\n\ntype BookerConfirmFormProps = {\n  defaultEmail?: string;\n  defaultName?: string;\n  durationMinutes: number;\n  is24Hour: boolean;\n  labels: BookerLabels;\n  locale: string;\n  onBack: () => void;\n  selectedDate?: Date;\n  selectedTime: string | null;\n};\n\nfunction RequiredMark() {\n  return <span className=\"text-destructive-foreground\">*</span>;\n}\n\nexport function BookerConfirmForm({\n  defaultEmail,\n  defaultName,\n  durationMinutes,\n  is24Hour,\n  labels,\n  locale,\n  onBack,\n  selectedDate,\n  selectedTime,\n}: BookerConfirmFormProps) {\n  const showSummary = selectedDate != null && selectedTime != null;\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      {showSummary ? (\n        <div className=\"flex flex-wrap items-baseline gap-x-1.5 font-heading @3xl:@max-5xl:text-base text-lg\">\n          <span>\n            {formatSelectedWeekday(selectedDate, locale)}{\" \"}\n            {formatConfirmDateDetail(selectedDate, locale)}\n          </span>\n          <span className=\"text-muted-foreground/72\">\n            {formatConfirmTimeRange(\n              selectedTime,\n              durationMinutes,\n              !is24Hour,\n              locale,\n            )}\n          </span>\n        </div>\n      ) : null}\n\n      <Form\n        className=\"flex flex-col gap-4\"\n        onSubmit={(event) => {\n          event.preventDefault();\n        }}\n      >\n        <Field>\n          <FieldLabel>\n            {labels.confirmYourName} <RequiredMark />\n          </FieldLabel>\n          <Input\n            autoFocus\n            defaultValue={defaultName}\n            name=\"name\"\n            required\n            type=\"text\"\n          />\n        </Field>\n\n        <Field>\n          <FieldLabel>\n            {labels.confirmEmail} <RequiredMark />\n          </FieldLabel>\n          <Input\n            autoComplete=\"email\"\n            defaultValue={defaultEmail}\n            name=\"email\"\n            required\n            type=\"email\"\n          />\n        </Field>\n\n        <Field>\n          <FieldLabel>{labels.confirmNotes}</FieldLabel>\n          <Textarea\n            name=\"notes\"\n            placeholder={labels.confirmNotesPlaceholder}\n            rows={3}\n          />\n        </Field>\n\n        <Button className=\"self-start\" type=\"button\" variant=\"ghost\">\n          <UserPlusIcon aria-hidden=\"true\" />\n          {labels.confirmAddGuests}\n        </Button>\n\n        <p className=\"text-muted-foreground text-sm\">\n          {labels.confirmTermsPrefix}{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/terms\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmTerms}\n          </a>{\" \"}\n          and{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/privacy\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmPrivacyPolicy}\n          </a>\n          .\n        </p>\n\n        <div className=\"flex justify-end gap-2 pt-1\">\n          <Button onClick={onBack} type=\"button\" variant=\"ghost\">\n            {labels.confirmBack}\n          </Button>\n          <Button type=\"submit\">{labels.confirmSubmit}</Button>\n        </div>\n      </Form>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { UserPlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\nimport type { BookerLabels } from \"./booker-labels\";\n\ntype BookerConfirmFormProps = {\n  defaultEmail?: string;\n  defaultName?: string;\n  labels: BookerLabels;\n  onBack: () => void;\n};\n\nfunction RequiredMark() {\n  return <span className=\"text-destructive-foreground\">*</span>;\n}\n\nexport function BookerConfirmForm({\n  defaultEmail,\n  defaultName,\n  labels,\n  onBack,\n}: BookerConfirmFormProps) {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Form\n        className=\"flex flex-col gap-4\"\n        onFormSubmit={() => {\n          // Booking submission to be wired.\n        }}\n      >\n        <Field name=\"name\">\n          <FieldLabel>\n            {labels.confirmYourName} <RequiredMark />\n          </FieldLabel>\n          <Input autoFocus defaultValue={defaultName} required type=\"text\" />\n          <FieldError>{labels.confirmNameError}</FieldError>\n        </Field>\n\n        <Field name=\"email\">\n          <FieldLabel>\n            {labels.confirmEmail} <RequiredMark />\n          </FieldLabel>\n          <Input\n            autoComplete=\"email\"\n            defaultValue={defaultEmail}\n            required\n            type=\"email\"\n          />\n          <FieldError>{labels.confirmEmailError}</FieldError>\n        </Field>\n\n        <Field name=\"notes\">\n          <FieldLabel>{labels.confirmNotes}</FieldLabel>\n          <Textarea placeholder={labels.confirmNotesPlaceholder} rows={3} />\n        </Field>\n\n        <Button className=\"self-start\" type=\"button\" variant=\"ghost\">\n          <UserPlusIcon aria-hidden=\"true\" />\n          {labels.confirmAddGuests}\n        </Button>\n\n        <p className=\"text-muted-foreground text-xs\">\n          {labels.confirmTermsPrefix}{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/terms\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmTerms}\n          </a>{\" \"}\n          and{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/privacy\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmPrivacyPolicy}\n          </a>\n          .\n        </p>\n\n        <div className=\"flex justify-end gap-2 pt-1\">\n          <Button onClick={onBack} type=\"button\" variant=\"ghost\">\n            {labels.confirmBack}\n          </Button>\n          <Button type=\"submit\">{labels.confirmSubmit}</Button>\n        </div>\n      </Form>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/booker-confirm-form.tsx"
     },
@@ -72,13 +72,13 @@
     },
     {
       "path": "registry/default/atoms/booker/booker-labels.ts",
-      "content": "export type BookerLabels = {\n  errorNotFound: string;\n  errorUnpublished: string;\n  errorNetwork: string;\n  errorGeneric: string;\n  retry: string;\n  durationUnknown: string;\n  durationMinutes: (minutes: number) => string;\n  noAvailableTimes: string;\n  noSlotsAvailable: string;\n  noSlotsThisDay: string;\n  noSlotsThisMonth: string;\n  viewFirstAvailability: string;\n  use24Hour: string;\n  hour12Short: string;\n  hour24Short: string;\n  headerImageAlt: (hostName: string, eventTitle: string) => string;\n  locationOptions: (count: number) => string;\n  locationSelectOnNextStep: string;\n  confirmYourName: string;\n  confirmEmail: string;\n  confirmNotes: string;\n  confirmNotesPlaceholder: string;\n  confirmAddGuests: string;\n  confirmBack: string;\n  confirmSubmit: string;\n  confirmTermsPrefix: string;\n  confirmTerms: string;\n  confirmPrivacyPolicy: string;\n};\n\nconst DEFAULT_BOOKER_LABELS: BookerLabels = {\n  errorNotFound: \"This event type could not be found.\",\n  errorUnpublished:\n    \"This event type is not currently published and is not accepting bookings.\",\n  errorNetwork: \"Unable to connect. Please check your internet connection.\",\n  errorGeneric: \"Something went wrong loading the booker.\",\n  retry: \"Try again\",\n  durationUnknown: \"Unknown\",\n  durationMinutes: (minutes) => `${minutes} min`,\n  noAvailableTimes: \"No available times\",\n  noSlotsAvailable: \"There are no open slots.\",\n  noSlotsThisDay: \"There are no open slots on this day.\",\n  noSlotsThisMonth: \"There are no open slots this month.\",\n  viewFirstAvailability: \"View first availability\",\n  use24Hour: \"Use 24-hour time\",\n  hour12Short: \"12h\",\n  hour24Short: \"24h\",\n  headerImageAlt: (hostName, eventTitle) =>\n    `Banner for ${eventTitle} with ${hostName}`,\n  locationOptions: (count) => `${count} location options`,\n  locationSelectOnNextStep: \"Select on the next step\",\n  confirmYourName: \"Your name\",\n  confirmEmail: \"Email address\",\n  confirmNotes: \"Additional notes\",\n  confirmNotesPlaceholder:\n    \"Please share anything that will help prepare for our meeting.\",\n  confirmAddGuests: \"Add guests\",\n  confirmBack: \"Back\",\n  confirmSubmit: \"Confirm\",\n  confirmTermsPrefix: \"By proceeding, you agree to Cal.com's\",\n  confirmTerms: \"Terms\",\n  confirmPrivacyPolicy: \"Privacy Policy\",\n};\n\nexport function getBookerLabels(labels?: Partial<BookerLabels>): BookerLabels {\n  return { ...DEFAULT_BOOKER_LABELS, ...labels };\n}\n",
+      "content": "export type BookerLabels = {\n  errorNotFound: string;\n  errorUnpublished: string;\n  errorNetwork: string;\n  errorGeneric: string;\n  retry: string;\n  durationUnknown: string;\n  durationMinutes: (minutes: number) => string;\n  noAvailableTimes: string;\n  noSlotsAvailable: string;\n  noSlotsThisDay: string;\n  noSlotsThisMonth: string;\n  viewFirstAvailability: string;\n  use24Hour: string;\n  hour12Short: string;\n  hour24Short: string;\n  headerImageAlt: (hostName: string, eventTitle: string) => string;\n  locationOptions: (count: number) => string;\n  locationSelectOnNextStep: string;\n  confirmYourName: string;\n  confirmEmail: string;\n  confirmNameError: string;\n  confirmEmailError: string;\n  confirmNotes: string;\n  confirmNotesPlaceholder: string;\n  confirmAddGuests: string;\n  confirmBack: string;\n  confirmSubmit: string;\n  confirmTermsPrefix: string;\n  confirmTerms: string;\n  confirmPrivacyPolicy: string;\n};\n\nconst DEFAULT_BOOKER_LABELS: BookerLabels = {\n  errorNotFound: \"This event type could not be found.\",\n  errorUnpublished:\n    \"This event type is not currently published and is not accepting bookings.\",\n  errorNetwork: \"Unable to connect. Please check your internet connection.\",\n  errorGeneric: \"Something went wrong loading the booker.\",\n  retry: \"Try again\",\n  durationUnknown: \"Unknown\",\n  durationMinutes: (minutes) => `${minutes} min`,\n  noAvailableTimes: \"No available times\",\n  noSlotsAvailable: \"There are no open slots.\",\n  noSlotsThisDay: \"There are no open slots on this day.\",\n  noSlotsThisMonth: \"There are no open slots this month.\",\n  viewFirstAvailability: \"View first availability\",\n  use24Hour: \"Use 24-hour time\",\n  hour12Short: \"12h\",\n  hour24Short: \"24h\",\n  headerImageAlt: (hostName, eventTitle) =>\n    `Banner for ${eventTitle} with ${hostName}`,\n  locationOptions: (count) => `${count} location options`,\n  locationSelectOnNextStep: \"Select on the next step\",\n  confirmYourName: \"Your name\",\n  confirmEmail: \"Email address\",\n  confirmNameError: \"Please enter your name.\",\n  confirmEmailError: \"Please enter a valid email address.\",\n  confirmNotes: \"Additional notes\",\n  confirmNotesPlaceholder:\n    \"Please share anything that will help prepare for our meeting.\",\n  confirmAddGuests: \"Add guests\",\n  confirmBack: \"Back\",\n  confirmSubmit: \"Confirm\",\n  confirmTermsPrefix: \"By proceeding, you agree to Cal.com's\",\n  confirmTerms: \"Terms\",\n  confirmPrivacyPolicy: \"Privacy Policy\",\n};\n\nexport function getBookerLabels(labels?: Partial<BookerLabels>): BookerLabels {\n  return { ...DEFAULT_BOOKER_LABELS, ...labels };\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/booker-labels.ts"
     },
     {
       "path": "registry/default/atoms/booker/location.tsx",
-      "content": "\"use client\";\n\nimport { ExternalLinkIcon, MapPinIcon } from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\nimport {\n  Popover,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport type { EventTypeLocationOption } from \"@/lib/booker/utils\";\n\ntype LocationLabels = {\n  locationOptions: (count: number) => string;\n  selectOnNextStep: string;\n};\n\ntype LocationProps = {\n  locations: EventTypeLocationOption[];\n  labels: LocationLabels;\n};\n\nconst PROVIDER_ICON_MAP: Record<string, string> = {\n  \"cal-video\": \"https://app.cal.com/app-store/dailyvideo/icon.svg\",\n  \"daily-video\": \"https://app.cal.com/app-store/dailyvideo/icon.svg\",\n  \"google-meet\": \"https://i.cal.com/app-store/googlevideo/logo.webp\",\n  \"huddle01-video\": \"/app-store/huddle01video/icon.svg\",\n  \"microsoft-teams\": \"/app-store/office365video/icon.svg\",\n  conferencing: \"external-link\",\n  jitsi: \"/app-store/jitsivideo/icon.svg\",\n  organizersdefaultapp: \"external-link\",\n  whereby: \"/app-store/whereby/icon-dark.svg\",\n  zoom: \"/app-store/zoomvideo/icon.svg\",\n};\n\nfunction normalizeIconUrl(value: string): string {\n  if (value.startsWith(\"http://\") || value.startsWith(\"https://\")) {\n    return value;\n  }\n\n  if (value.startsWith(\"/\")) {\n    return `https://app.cal.com${value}`;\n  }\n\n  return value;\n}\n\nfunction resolveProviderIcons(provider?: string): string[] {\n  if (!provider) {\n    return [];\n  }\n\n  const normalized = provider.trim().toLowerCase();\n  if (!normalized) {\n    return [];\n  }\n\n  const appStoreSlugs = new Set<string>([\n    normalized,\n    normalized.replaceAll(\"-\", \"\"),\n  ]);\n  if (normalized.endsWith(\"-video\")) {\n    appStoreSlugs.add(normalized.replace(/-video$/, \"video\"));\n  }\n\n  return Array.from(\n    new Set([\n      PROVIDER_ICON_MAP[normalized],\n      ...Array.from(\n        appStoreSlugs,\n        (slug) => `https://app.cal.com/app-store/${slug}/icon.svg`,\n      ),\n    ]),\n  )\n    .filter((url): url is string => Boolean(url))\n    .map(normalizeIconUrl);\n}\n\nfunction LocationIcon({ provider }: { provider?: string }) {\n  const iconUrls = useMemo(() => resolveProviderIcons(provider), [provider]);\n  const [failedIconUrls, setFailedIconUrls] = useState<Set<string>>(\n    () => new Set(),\n  );\n  const iconUrl =\n    iconUrls.find((candidate) => !failedIconUrls.has(candidate)) ?? \"\";\n\n  if (iconUrl) {\n    if (iconUrl === \"external-link\") {\n      return (\n        <ExternalLinkIcon\n          className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n          aria-hidden=\"true\"\n        />\n      );\n    }\n\n    return (\n      <img\n        alt=\"\"\n        aria-hidden=\"true\"\n        className=\"size-4.5 shrink-0 sm:size-4\"\n        onError={() => setFailedIconUrls((prev) => new Set(prev).add(iconUrl))}\n        src={iconUrl}\n      />\n    );\n  }\n\n  return (\n    <MapPinIcon\n      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n      aria-hidden=\"true\"\n    />\n  );\n}\n\nfunction LocationRow({ label, provider }: EventTypeLocationOption) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <LocationIcon provider={provider} />\n      <span>{label}</span>\n    </div>\n  );\n}\n\nexport function Location({ locations, labels }: LocationProps) {\n  if (locations.length <= 1) {\n    const location = locations[0];\n    return location ? <LocationRow {...location} /> : null;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        aria-label={labels.locationOptions(locations.length)}\n        className=\"flex w-fit items-center gap-2 decoration-current/32 decoration-dotted underline-offset-2 hover:text-foreground hover:underline\"\n        openOnHover\n        delay={0}\n      >\n        <MapPinIcon className=\"size-4.5 shrink-0 opacity-80 sm:size-4\" />\n        <span>{labels.locationOptions(locations.length)}</span>\n      </PopoverTrigger>\n      <PopoverPopup align=\"start\" side=\"top\" className=\"*:p-3\">\n        <PopoverDescription className=\"mb-2 font-medium text-muted-foreground text-xs\">\n          {labels.selectOnNextStep}\n        </PopoverDescription>\n        <ul className=\"flex flex-col gap-2\">\n          {locations.map((location, index) => (\n            <li\n              className=\"flex items-center gap-2 font-medium text-xs\"\n              key={`${location.label}-${location.provider}-${index}`}\n            >\n              <LocationIcon provider={location.provider} />\n              <span>{location.label}</span>\n            </li>\n          ))}\n        </ul>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { ExternalLinkIcon, MapPinIcon } from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\nimport {\n  Popover,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport type { EventTypeLocationOption } from \"@/lib/booker/utils\";\n\ntype LocationLabels = {\n  locationOptions: (count: number) => string;\n  selectOnNextStep: string;\n};\n\ntype LocationProps = {\n  locations: EventTypeLocationOption[];\n  labels: LocationLabels;\n};\n\nconst PROVIDER_ICON_MAP: Record<string, string> = {\n  \"cal-video\": \"https://app.cal.com/app-store/dailyvideo/icon.svg\",\n  \"daily-video\": \"https://app.cal.com/app-store/dailyvideo/icon.svg\",\n  \"google-meet\": \"https://i.cal.com/app-store/googlevideo/logo.webp\",\n  \"huddle01-video\": \"/app-store/huddle01video/icon.svg\",\n  \"microsoft-teams\": \"/app-store/office365video/icon.svg\",\n  conferencing: \"external-link\",\n  jitsi: \"/app-store/jitsivideo/icon.svg\",\n  organizersdefaultapp: \"external-link\",\n  whereby: \"/app-store/whereby/icon-dark.svg\",\n  zoom: \"/app-store/zoomvideo/icon.svg\",\n};\n\nfunction normalizeIconUrl(value: string): string {\n  if (value.startsWith(\"http://\") || value.startsWith(\"https://\")) {\n    return value;\n  }\n\n  if (value.startsWith(\"/\")) {\n    return `https://app.cal.com${value}`;\n  }\n\n  return value;\n}\n\nfunction resolveProviderIcons(provider?: string): string[] {\n  if (!provider) {\n    return [];\n  }\n\n  const normalized = provider.trim().toLowerCase();\n  if (!normalized) {\n    return [];\n  }\n\n  const appStoreSlugs = new Set<string>([\n    normalized,\n    normalized.replaceAll(\"-\", \"\"),\n  ]);\n  if (normalized.endsWith(\"-video\")) {\n    appStoreSlugs.add(normalized.replace(/-video$/, \"video\"));\n  }\n\n  return Array.from(\n    new Set([\n      PROVIDER_ICON_MAP[normalized],\n      ...Array.from(\n        appStoreSlugs,\n        (slug) => `https://app.cal.com/app-store/${slug}/icon.svg`,\n      ),\n    ]),\n  )\n    .filter((url): url is string => Boolean(url))\n    .map(normalizeIconUrl);\n}\n\nfunction LocationIcon({ provider }: { provider?: string }) {\n  const iconUrls = useMemo(() => resolveProviderIcons(provider), [provider]);\n  const [failedIconUrls, setFailedIconUrls] = useState<Set<string>>(\n    () => new Set(),\n  );\n  const iconUrl =\n    iconUrls.find((candidate) => !failedIconUrls.has(candidate)) ?? \"\";\n\n  if (iconUrl) {\n    if (iconUrl === \"external-link\") {\n      return (\n        <ExternalLinkIcon\n          className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n          aria-hidden=\"true\"\n        />\n      );\n    }\n\n    return (\n      <img\n        alt=\"\"\n        aria-hidden=\"true\"\n        className=\"size-4.5 shrink-0 sm:size-4\"\n        onError={() => setFailedIconUrls((prev) => new Set(prev).add(iconUrl))}\n        src={iconUrl}\n      />\n    );\n  }\n\n  return (\n    <MapPinIcon\n      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n      aria-hidden=\"true\"\n    />\n  );\n}\n\nfunction LocationRow({ label, provider }: EventTypeLocationOption) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <LocationIcon provider={provider} />\n      <span>{label}</span>\n    </div>\n  );\n}\n\nexport function Location({ locations, labels }: LocationProps) {\n  if (locations.length <= 1) {\n    const location = locations[0];\n    return location ? <LocationRow {...location} /> : null;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        aria-label={labels.locationOptions(locations.length)}\n        className=\"flex w-fit items-center gap-2 decoration-current/32 decoration-dotted underline-offset-2 hover:text-foreground hover:underline\"\n        openOnHover\n        delay={0}\n      >\n        <MapPinIcon className=\"h-lh w-4.5 shrink-0 opacity-80 sm:w-4\" />\n        <span>{labels.locationOptions(locations.length)}</span>\n      </PopoverTrigger>\n      <PopoverPopup align=\"start\" side=\"top\" className=\"*:p-3\">\n        <PopoverDescription className=\"mb-2 font-medium text-muted-foreground text-xs\">\n          {labels.selectOnNextStep}\n        </PopoverDescription>\n        <ul className=\"flex flex-col gap-2\">\n          {locations.map((location, index) => (\n            <li\n              className=\"flex items-center gap-2 font-medium text-xs\"\n              key={`${location.label}-${location.provider}-${index}`}\n            >\n              <LocationIcon provider={location.provider} />\n              <span>{location.label}</span>\n            </li>\n          ))}\n        </ul>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/location.tsx"
     },
@@ -96,7 +96,7 @@
     },
     {
       "path": "registry/default/atoms/booker/timezone-picker.tsx",
-      "content": "\"use client\";\n\nimport { ChevronsUpDownIcon, GlobeIcon, SearchIcon } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\n\ntype TimezoneOption = {\n  label: string;\n  numericOffset: number;\n  offset: string;\n  value: string;\n};\n\ntype TimezonePickerProps = {\n  value: string;\n  onValueChange: (value: string) => void;\n};\n\nfunction formatTimezoneLabel(timezone: string): string {\n  return timezone.replace(/_/g, \" \");\n}\n\nexport function TimezoneDisplay({ value }: { value: string }) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <GlobeIcon\n        className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n        aria-hidden=\"true\"\n      />\n      <span>{formatTimezoneLabel(value)}</span>\n    </div>\n  );\n}\n\nexport function TimezonePicker({ value, onValueChange }: TimezonePickerProps) {\n  const timezoneOptions = useMemo<TimezoneOption[]>(() => {\n    const rawTimezones =\n      typeof Intl.supportedValuesOf === \"function\"\n        ? Intl.supportedValuesOf(\"timeZone\")\n        : [\n            \"UTC\",\n            \"Europe/Rome\",\n            \"Europe/London\",\n            \"America/New_York\",\n            \"America/Los_Angeles\",\n            \"Asia/Tokyo\",\n          ];\n\n    return rawTimezones\n      .map((timezone) => {\n        const formatter = new Intl.DateTimeFormat(\"en\", {\n          timeZone: timezone,\n          timeZoneName: \"shortOffset\",\n        });\n        const parts = formatter.formatToParts(new Date());\n        const offset =\n          parts.find((part) => part.type === \"timeZoneName\")?.value || \"\";\n        const modifiedOffset = offset === \"GMT\" ? \"GMT+0\" : offset;\n\n        const offsetMatch = offset.match(/GMT([+-]?)(\\d+)(?::(\\d+))?/);\n        const sign = offsetMatch?.[1] === \"-\" ? -1 : 1;\n        const hours = Number.parseInt(offsetMatch?.[2] || \"0\", 10);\n        const minutes = Number.parseInt(offsetMatch?.[3] || \"0\", 10);\n        const totalMinutes = sign * (hours * 60 + minutes);\n\n        return {\n          label: formatTimezoneLabel(timezone),\n          numericOffset: totalMinutes,\n          offset: modifiedOffset,\n          value: timezone,\n        };\n      })\n      .sort((a, b) => a.numericOffset - b.numericOffset);\n  }, []);\n\n  const selectedTimezoneItem =\n    timezoneOptions.find((item) => item.value === value) ?? null;\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <GlobeIcon\n        className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n        aria-hidden=\"true\"\n      />\n      <Combobox\n        autoHighlight\n        itemToStringValue={(item) => item?.label ?? \"\"}\n        items={timezoneOptions}\n        onValueChange={(next) => onValueChange(next?.value ?? value)}\n        value={selectedTimezoneItem}\n      >\n        <ComboboxTrigger\n          render={\n            <Button\n              className=\"min-w-0 shrink justify-between font-normal\"\n              size=\"sm\"\n              variant=\"outline\"\n            />\n          }\n        >\n          <span className=\"truncate\">\n            <ComboboxValue placeholder=\"Select timezone\" />\n          </span>\n          <ChevronsUpDownIcon className=\"-me-1!\" />\n        </ComboboxTrigger>\n        <ComboboxPopup aria-label=\"Select timezone\" className=\"w-72\">\n          <div className=\"border-b p-2\">\n            <ComboboxInput\n              size=\"sm\"\n              className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n              placeholder=\"e.g. Europe/London\"\n              showTrigger={false}\n              startAddon={<SearchIcon />}\n            />\n          </div>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item.value}\n                value={item}\n                className=\"pe-2 *:[div]:flex *:[div]:min-w-0 *:[div]:items-center *:[div]:justify-between *:[div]:gap-2\"\n              >\n                <span className=\"truncate\">{item.label}</span>\n                <span className=\"whitespace-nowrap font-medium text-muted-foreground text-xs sm:text-[10px]\">\n                  {item.offset}\n                </span>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { ChevronsUpDownIcon, GlobeIcon, SearchIcon } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\n\ntype TimezoneOption = {\n  label: string;\n  numericOffset: number;\n  offset: string;\n  value: string;\n};\n\ntype TimezonePickerProps = {\n  value: string;\n  onValueChange: (value: string) => void;\n};\n\nfunction formatTimezoneLabel(timezone: string): string {\n  return timezone.replace(/_/g, \" \");\n}\n\nexport function TimezoneDisplay({ value }: { value: string }) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <GlobeIcon\n        className=\"h-lh w-4.5 shrink-0 opacity-80 sm:w-4\"\n        aria-hidden=\"true\"\n      />\n      <span>{formatTimezoneLabel(value)}</span>\n    </div>\n  );\n}\n\nexport function TimezonePicker({ value, onValueChange }: TimezonePickerProps) {\n  const timezoneOptions = useMemo<TimezoneOption[]>(() => {\n    const rawTimezones =\n      typeof Intl.supportedValuesOf === \"function\"\n        ? Intl.supportedValuesOf(\"timeZone\")\n        : [\n            \"UTC\",\n            \"Europe/Rome\",\n            \"Europe/London\",\n            \"America/New_York\",\n            \"America/Los_Angeles\",\n            \"Asia/Tokyo\",\n          ];\n\n    return rawTimezones\n      .map((timezone) => {\n        const formatter = new Intl.DateTimeFormat(\"en\", {\n          timeZone: timezone,\n          timeZoneName: \"shortOffset\",\n        });\n        const parts = formatter.formatToParts(new Date());\n        const offset =\n          parts.find((part) => part.type === \"timeZoneName\")?.value || \"\";\n        const modifiedOffset = offset === \"GMT\" ? \"GMT+0\" : offset;\n\n        const offsetMatch = offset.match(/GMT([+-]?)(\\d+)(?::(\\d+))?/);\n        const sign = offsetMatch?.[1] === \"-\" ? -1 : 1;\n        const hours = Number.parseInt(offsetMatch?.[2] || \"0\", 10);\n        const minutes = Number.parseInt(offsetMatch?.[3] || \"0\", 10);\n        const totalMinutes = sign * (hours * 60 + minutes);\n\n        return {\n          label: formatTimezoneLabel(timezone),\n          numericOffset: totalMinutes,\n          offset: modifiedOffset,\n          value: timezone,\n        };\n      })\n      .sort((a, b) => a.numericOffset - b.numericOffset);\n  }, []);\n\n  const selectedTimezoneItem =\n    timezoneOptions.find((item) => item.value === value) ?? null;\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <GlobeIcon\n        className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n        aria-hidden=\"true\"\n      />\n      <Combobox\n        autoHighlight\n        itemToStringValue={(item) => item?.label ?? \"\"}\n        items={timezoneOptions}\n        onValueChange={(next) => onValueChange(next?.value ?? value)}\n        value={selectedTimezoneItem}\n      >\n        <ComboboxTrigger\n          render={\n            <Button\n              className=\"min-w-0 shrink justify-between font-normal\"\n              size=\"sm\"\n              variant=\"outline\"\n            />\n          }\n        >\n          <span className=\"truncate\">\n            <ComboboxValue placeholder=\"Select timezone\" />\n          </span>\n          <ChevronsUpDownIcon className=\"-me-1!\" />\n        </ComboboxTrigger>\n        <ComboboxPopup aria-label=\"Select timezone\" className=\"w-72\">\n          <div className=\"border-b p-2\">\n            <ComboboxInput\n              size=\"sm\"\n              className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n              placeholder=\"e.g. Europe/London\"\n              showTrigger={false}\n              startAddon={<SearchIcon />}\n            />\n          </div>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item.value}\n                value={item}\n                className=\"pe-2 *:[div]:flex *:[div]:min-w-0 *:[div]:items-center *:[div]:justify-between *:[div]:gap-2\"\n              >\n                <span className=\"truncate\">{item.label}</span>\n                <span className=\"whitespace-nowrap font-medium text-muted-foreground text-xs sm:text-[10px]\">\n                  {item.offset}\n                </span>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/timezone-picker.tsx"
     },
diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index 11a152769..eba7f593e 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -117,9 +117,9 @@ export function Booker({
             {displayMeta ? (
               <div className="flex flex-col gap-3 sm:text-sm">
                 {showSelectedSlot ? (
-                  <div className="flex items-center gap-2">
+                  <div className="flex gap-2">
                     <CalendarIcon
-                      className="size-4.5 shrink-0 opacity-80 sm:size-4"
+                      className="h-lh w-4.5 shrink-0 opacity-80 sm:w-4"
                       aria-hidden="true"
                     />
                     <span>
@@ -149,7 +149,7 @@ export function Booker({
                 ) : (
                   <div className="flex items-center gap-2">
                     <Clock3Icon
-                      className="size-4.5 shrink-0 opacity-80 sm:size-4"
+                      className="h-lh w-4.5 shrink-0 opacity-80 sm:w-4"
                       aria-hidden="true"
                     />
                     <span>
diff --git a/apps/ui/registry/default/atoms/booker/location.tsx b/apps/ui/registry/default/atoms/booker/location.tsx
index 101769dab..9d055b104 100644
--- a/apps/ui/registry/default/atoms/booker/location.tsx
+++ b/apps/ui/registry/default/atoms/booker/location.tsx
@@ -136,7 +136,7 @@ export function Location({ locations, labels }: LocationProps) {
         openOnHover
         delay={0}
       >
-        <MapPinIcon className="size-4.5 shrink-0 opacity-80 sm:size-4" />
+        <MapPinIcon className="h-lh w-4.5 shrink-0 opacity-80 sm:w-4" />
         <span>{labels.locationOptions(locations.length)}</span>
       </PopoverTrigger>
       <PopoverPopup align="start" side="top" className="*:p-3">
diff --git a/apps/ui/registry/default/atoms/booker/timezone-picker.tsx b/apps/ui/registry/default/atoms/booker/timezone-picker.tsx
index abdaede9a..10db94302 100644
--- a/apps/ui/registry/default/atoms/booker/timezone-picker.tsx
+++ b/apps/ui/registry/default/atoms/booker/timezone-picker.tsx
@@ -34,7 +34,7 @@ export function TimezoneDisplay({ value }: { value: string }) {
   return (
     <div className="flex items-center gap-2">
       <GlobeIcon
-        className="size-4.5 shrink-0 opacity-80 sm:size-4"
+        className="h-lh w-4.5 shrink-0 opacity-80 sm:w-4"
         aria-hidden="true"
       />
       <span>{formatTimezoneLabel(value)}</span>

From d0ac5e64848a3ed7a49719629e7107d793d93010 Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Thu, 9 Jul 2026 12:06:39 +0200
Subject: [PATCH 26/49] feat: add new weekly availability editor components
 (#815)

---
 apps/ui/public/r/p-switch-7.json              |  30 +-
 apps/ui/public/r/p-switch-8.json              |  38 ++
 apps/ui/public/r/p-switch-9.json              |  38 ++
 apps/ui/public/r/registry.json                | 107 +++++
 apps/ui/registry.json                         | 107 +++++
 apps/ui/registry/__index__.tsx                |  54 +++
 .../registry/default/particles/p-switch-7.tsx | 382 ++++++++++++++++
 .../registry/default/particles/p-switch-8.tsx | 397 +++++++++++++++++
 .../registry/default/particles/p-switch-9.tsx | 406 ++++++++++++++++++
 apps/ui/registry/registry-particles.ts        |  72 ++++
 10 files changed, 1625 insertions(+), 6 deletions(-)
 create mode 100644 apps/ui/public/r/p-switch-8.json
 create mode 100644 apps/ui/public/r/p-switch-9.json
 create mode 100644 apps/ui/registry/default/particles/p-switch-7.tsx
 create mode 100644 apps/ui/registry/default/particles/p-switch-8.tsx
 create mode 100644 apps/ui/registry/default/particles/p-switch-9.tsx

diff --git a/apps/ui/public/r/p-switch-7.json b/apps/ui/public/r/p-switch-7.json
index 6fcbbe63e..7825b05d7 100644
--- a/apps/ui/public/r/p-switch-7.json
+++ b/apps/ui/public/r/p-switch-7.json
@@ -1,19 +1,37 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "p-switch-7",
-  "type": "registry:block",
-  "description": "Custom size switch",
+  "description": "Weekly availability editor with time range combobox pickers",
+  "dependencies": [
+    "lucide-react"
+  ],
   "registryDependencies": [
-    "@coss/switch"
+    "@coss/button",
+    "@coss/checkbox",
+    "@coss/checkbox-group",
+    "@coss/combobox",
+    "@coss/label",
+    "@coss/popover",
+    "@coss/select",
+    "@coss/switch",
+    "@coss/tooltip"
   ],
   "files": [
     {
       "path": "registry/default/particles/p-switch-7.tsx",
-      "content": "import { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Particle() {\n  return (\n    <Switch className=\"[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3)]\" />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { CopyIcon, PlusIcon, SearchIcon, XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport { SelectButton } from \"@/registry/default/ui/select\";\nimport { Switch } from \"@/registry/default/ui/switch\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst days = [\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\",\n  \"Sunday\",\n] as const;\n\ntype Day = (typeof days)[number];\n\ntype TimeRange = {\n  id: number;\n  start: string;\n  end: string;\n};\n\nconst timeOptions = Array.from({ length: 96 }, (_, i) => {\n  const hours = Math.floor(i / 4);\n  const minutes = (i % 4) * 15;\n  const period = hours < 12 ? \"AM\" : \"PM\";\n  const displayHours = hours % 12 === 0 ? 12 : hours % 12;\n  return `${displayHours}:${minutes.toString().padStart(2, \"0\")} ${period}`;\n});\n\nconst timeIndex = (time: string) => timeOptions.indexOf(time);\n\nlet rangeId = 0;\nconst createRange = (start: string, end: string): TimeRange => ({\n  end,\n  id: ++rangeId,\n  start,\n});\n\nconst defaultAvailability: Record<Day, TimeRange[]> = {\n  Friday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Monday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Saturday: [],\n  Sunday: [],\n  Thursday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Tuesday: [\n    createRange(\"9:00 AM\", \"1:00 PM\"),\n    createRange(\"3:00 PM\", \"5:00 PM\"),\n  ],\n  Wednesday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n};\n\nfunction TimeCombobox({\n  ariaLabel,\n  items,\n  onChange,\n  value,\n}: {\n  ariaLabel: string;\n  items: string[];\n  onChange: (time: string) => void;\n  value: string;\n}) {\n  return (\n    <Combobox\n      autoHighlight\n      items={items}\n      onValueChange={(time) => {\n        if (typeof time === \"string\") {\n          onChange(time);\n        }\n      }}\n      value={value}\n    >\n      <ComboboxTrigger\n        aria-label={ariaLabel}\n        render={<SelectButton className=\"w-27 tabular-nums\" size=\"sm\" />}\n      >\n        <ComboboxValue />\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label={ariaLabel} className=\"min-w-44\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"Search time\"\n            showTrigger={false}\n            size=\"sm\"\n            startAddon={<SearchIcon />}\n          />\n        </div>\n        <ComboboxEmpty>No times found.</ComboboxEmpty>\n        <ComboboxList>\n          {(time: string) => (\n            <ComboboxItem key={time} value={time}>\n              <span className=\"tabular-nums\">{time}</span>\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nfunction CopyTimesPopover({\n  day,\n  disabled,\n  onCopy,\n}: {\n  day: Day;\n  disabled: boolean;\n  onCopy: (targets: Day[]) => void;\n}) {\n  const [open, setOpen] = useState(false);\n  const [selectedDays, setSelectedDays] = useState<string[]>([]);\n\n  return (\n    <Popover\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (nextOpen) {\n          setSelectedDays([]);\n        }\n      }}\n      open={open}\n    >\n      <Tooltip disableHoverablePopup>\n        <PopoverTrigger\n          render={\n            <TooltipTrigger\n              render={\n                <Button\n                  aria-label={`Copy ${day} times to other days`}\n                  disabled={disabled}\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                />\n              }\n            />\n          }\n        >\n          <CopyIcon aria-hidden=\"true\" />\n        </PopoverTrigger>\n        <TooltipPopup>Copy to other days</TooltipPopup>\n      </Tooltip>\n      <PopoverPopup align=\"end\" className=\"w-44\">\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"font-medium text-foreground text-sm\">\n            Copy times to\n          </div>\n          <CheckboxGroup\n            aria-label={`Copy ${day} times to`}\n            onValueChange={setSelectedDays}\n            value={selectedDays}\n          >\n            {days\n              .filter((target) => target !== day)\n              .map((target) => (\n                <Label key={target}>\n                  <Checkbox value={target} />\n                  {target}\n                </Label>\n              ))}\n          </CheckboxGroup>\n          <Button\n            disabled={selectedDays.length === 0}\n            onClick={() => {\n              onCopy(selectedDays as Day[]);\n              setOpen(false);\n            }}\n            size=\"sm\"\n          >\n            Apply\n          </Button>\n        </div>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n\nexport default function Particle() {\n  const [availability, setAvailability] =\n    useState<Record<Day, TimeRange[]>>(defaultAvailability);\n\n  const setDayRanges = (day: Day, ranges: TimeRange[]) => {\n    setAvailability((prev) => ({ ...prev, [day]: ranges }));\n  };\n\n  const toggleDay = (day: Day, enabled: boolean) => {\n    setDayRanges(day, enabled ? [createRange(\"9:00 AM\", \"5:00 PM\")] : []);\n  };\n\n  const addRange = (day: Day) => {\n    const ranges = availability[day];\n    const lastRange = ranges[ranges.length - 1];\n    if (!lastRange) {\n      setDayRanges(day, [createRange(\"9:00 AM\", \"5:00 PM\")]);\n      return;\n    }\n    const startIndex = Math.min(\n      timeIndex(lastRange.end) + 4,\n      timeOptions.length - 2,\n    );\n    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);\n    setDayRanges(day, [\n      ...ranges,\n      createRange(timeOptions[startIndex] ?? \"\", timeOptions[endIndex] ?? \"\"),\n    ]);\n  };\n\n  const removeRange = (day: Day, id: number) => {\n    setDayRanges(\n      day,\n      availability[day].filter((range) => range.id !== id),\n    );\n  };\n\n  const updateStart = (day: Day, id: number, start: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) => {\n        if (range.id !== id) return range;\n        const end =\n          timeIndex(start) >= timeIndex(range.end)\n            ? (timeOptions[\n                Math.min(timeIndex(start) + 4, timeOptions.length - 1)\n              ] ?? range.end)\n            : range.end;\n        return { ...range, end, start };\n      }),\n    );\n  };\n\n  const updateEnd = (day: Day, id: number, end: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) =>\n        range.id === id ? { ...range, end } : range,\n      ),\n    );\n  };\n\n  const copyTo = (source: Day, targets: Day[]) => {\n    setAvailability((prev) => {\n      const next = { ...prev };\n      for (const target of targets) {\n        next[target] = prev[source].map((range) =>\n          createRange(range.start, range.end),\n        );\n      }\n      return next;\n    });\n  };\n\n  return (\n    <TooltipProvider delay={0}>\n      <div className=\"divide-y\">\n        {days.map((day) => {\n          const ranges = availability[day];\n          const lastRange = ranges[ranges.length - 1];\n          const addDisabled = lastRange\n            ? timeIndex(lastRange.end) >= timeOptions.length - 2\n            : false;\n\n          return (\n            <div\n              className=\"flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start\"\n              key={day}\n            >\n              <Label className=\"flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7\">\n                <Switch\n                  checked={ranges.length > 0}\n                  onCheckedChange={(checked) => toggleDay(day, checked)}\n                />\n                {day}\n              </Label>\n              <div className=\"flex w-full min-w-0 items-start gap-4 md:flex-1\">\n                <div className=\"flex min-w-0 flex-col gap-2\">\n                  {ranges.length === 0 ? (\n                    <p className=\"flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm\">\n                      Unavailable\n                    </p>\n                  ) : (\n                    ranges.map((range) => (\n                      <div className=\"flex items-center gap-2\" key={range.id}>\n                        <TimeCombobox\n                          ariaLabel={`${day} start time`}\n                          items={timeOptions}\n                          onChange={(start) =>\n                            updateStart(day, range.id, start)\n                          }\n                          value={range.start}\n                        />\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"text-muted-foreground\"\n                        >\n                          –\n                        </span>\n                        <TimeCombobox\n                          ariaLabel={`${day} end time`}\n                          items={timeOptions.slice(timeIndex(range.start) + 1)}\n                          onChange={(end) => updateEnd(day, range.id, end)}\n                          value={range.end}\n                        />\n                        <Tooltip disableHoverablePopup>\n                          <TooltipTrigger\n                            render={\n                              <Button\n                                aria-label={`Delete ${range.start} to ${range.end} on ${day}`}\n                                onClick={() => removeRange(day, range.id)}\n                                size=\"icon-sm\"\n                                variant=\"ghost\"\n                              />\n                            }\n                          >\n                            <XIcon aria-hidden=\"true\" />\n                          </TooltipTrigger>\n                          <TooltipPopup>Delete range</TooltipPopup>\n                        </Tooltip>\n                      </div>\n                    ))\n                  )}\n                </div>\n                <div className=\"ml-auto flex shrink-0 gap-1\">\n                  <Tooltip disableHoverablePopup>\n                    <TooltipTrigger\n                      render={\n                        <Button\n                          aria-label={`Add time range to ${day}`}\n                          disabled={addDisabled}\n                          onClick={() => addRange(day)}\n                          size=\"icon-sm\"\n                          variant=\"ghost\"\n                        />\n                      }\n                    >\n                      <PlusIcon aria-hidden=\"true\" />\n                    </TooltipTrigger>\n                    <TooltipPopup>Add range</TooltipPopup>\n                  </Tooltip>\n                  <CopyTimesPopover\n                    day={day}\n                    disabled={ranges.length === 0}\n                    onCopy={(targets) => copyTo(day, targets)}\n                  />\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </TooltipProvider>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+    "colSpan": 2
+  },
   "categories": [
-    "switch"
-  ]
+    "switch",
+    "combobox",
+    "popover",
+    "time"
+  ],
+  "type": "registry:block"
 }
\ No newline at end of file
diff --git a/apps/ui/public/r/p-switch-8.json b/apps/ui/public/r/p-switch-8.json
new file mode 100644
index 000000000..9464691bd
--- /dev/null
+++ b/apps/ui/public/r/p-switch-8.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-switch-8",
+  "description": "Weekly availability editor with grouped time range controls",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/button",
+    "@coss/checkbox",
+    "@coss/checkbox-group",
+    "@coss/combobox",
+    "@coss/group",
+    "@coss/label",
+    "@coss/popover",
+    "@coss/switch",
+    "@coss/tooltip"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-switch-8.tsx",
+      "content": "\"use client\";\n\nimport {\n  ArrowRightIcon,\n  CopyIcon,\n  PlusIcon,\n  SearchIcon,\n  XIcon,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\nimport { Group, GroupSeparator, GroupText } from \"@/registry/default/ui/group\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport { Switch } from \"@/registry/default/ui/switch\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst days = [\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\",\n  \"Sunday\",\n] as const;\n\ntype Day = (typeof days)[number];\n\ntype TimeRange = {\n  id: number;\n  start: string;\n  end: string;\n};\n\nconst timeOptions = Array.from({ length: 96 }, (_, i) => {\n  const hours = Math.floor(i / 4);\n  const minutes = (i % 4) * 15;\n  const period = hours < 12 ? \"AM\" : \"PM\";\n  const displayHours = hours % 12 === 0 ? 12 : hours % 12;\n  return `${displayHours}:${minutes.toString().padStart(2, \"0\")} ${period}`;\n});\n\nconst timeIndex = (time: string) => timeOptions.indexOf(time);\n\nlet rangeId = 0;\nconst createRange = (start: string, end: string): TimeRange => ({\n  end,\n  id: ++rangeId,\n  start,\n});\n\nconst defaultAvailability: Record<Day, TimeRange[]> = {\n  Friday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Monday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Saturday: [],\n  Sunday: [],\n  Thursday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Tuesday: [\n    createRange(\"9:00 AM\", \"1:00 PM\"),\n    createRange(\"3:00 PM\", \"5:00 PM\"),\n  ],\n  Wednesday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n};\n\nfunction TimeCombobox({\n  ariaLabel,\n  items,\n  onChange,\n  value,\n}: {\n  ariaLabel: string;\n  items: string[];\n  onChange: (time: string) => void;\n  value: string;\n}) {\n  return (\n    <Combobox\n      autoHighlight\n      items={items}\n      onValueChange={(time) => {\n        if (typeof time === \"string\") {\n          onChange(time);\n        }\n      }}\n      value={value}\n    >\n      <ComboboxTrigger\n        aria-label={ariaLabel}\n        render={\n          <Button\n            className=\"w-24 font-normal tabular-nums\"\n            size=\"sm\"\n            variant=\"outline\"\n          />\n        }\n      >\n        <ComboboxValue />\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label={ariaLabel} className=\"min-w-44\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"Search time\"\n            showTrigger={false}\n            size=\"sm\"\n            startAddon={<SearchIcon />}\n          />\n        </div>\n        <ComboboxEmpty>No times found.</ComboboxEmpty>\n        <ComboboxList>\n          {(time: string) => (\n            <ComboboxItem key={time} value={time}>\n              <span className=\"tabular-nums\">{time}</span>\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nfunction CopyTimesPopover({\n  day,\n  disabled,\n  onCopy,\n}: {\n  day: Day;\n  disabled: boolean;\n  onCopy: (targets: Day[]) => void;\n}) {\n  const [open, setOpen] = useState(false);\n  const [selectedDays, setSelectedDays] = useState<string[]>([]);\n\n  return (\n    <Popover\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (nextOpen) {\n          setSelectedDays([]);\n        }\n      }}\n      open={open}\n    >\n      <Tooltip disableHoverablePopup>\n        <PopoverTrigger\n          render={\n            <TooltipTrigger\n              render={\n                <Button\n                  aria-label={`Copy ${day} times to other days`}\n                  disabled={disabled}\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                />\n              }\n            />\n          }\n        >\n          <CopyIcon aria-hidden=\"true\" />\n        </PopoverTrigger>\n        <TooltipPopup>Copy to other days</TooltipPopup>\n      </Tooltip>\n      <PopoverPopup align=\"end\" className=\"w-44\">\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"font-medium text-foreground text-sm\">\n            Copy times to\n          </div>\n          <CheckboxGroup\n            aria-label={`Copy ${day} times to`}\n            onValueChange={setSelectedDays}\n            value={selectedDays}\n          >\n            {days\n              .filter((target) => target !== day)\n              .map((target) => (\n                <Label key={target}>\n                  <Checkbox value={target} />\n                  {target}\n                </Label>\n              ))}\n          </CheckboxGroup>\n          <Button\n            disabled={selectedDays.length === 0}\n            onClick={() => {\n              onCopy(selectedDays as Day[]);\n              setOpen(false);\n            }}\n            size=\"sm\"\n          >\n            Apply\n          </Button>\n        </div>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n\nexport default function Particle() {\n  const [availability, setAvailability] =\n    useState<Record<Day, TimeRange[]>>(defaultAvailability);\n\n  const setDayRanges = (day: Day, ranges: TimeRange[]) => {\n    setAvailability((prev) => ({ ...prev, [day]: ranges }));\n  };\n\n  const toggleDay = (day: Day, enabled: boolean) => {\n    setDayRanges(day, enabled ? [createRange(\"9:00 AM\", \"5:00 PM\")] : []);\n  };\n\n  const addRange = (day: Day) => {\n    const ranges = availability[day];\n    const lastRange = ranges[ranges.length - 1];\n    if (!lastRange) {\n      setDayRanges(day, [createRange(\"9:00 AM\", \"5:00 PM\")]);\n      return;\n    }\n    const startIndex = Math.min(\n      timeIndex(lastRange.end) + 4,\n      timeOptions.length - 2,\n    );\n    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);\n    setDayRanges(day, [\n      ...ranges,\n      createRange(timeOptions[startIndex] ?? \"\", timeOptions[endIndex] ?? \"\"),\n    ]);\n  };\n\n  const removeRange = (day: Day, id: number) => {\n    setDayRanges(\n      day,\n      availability[day].filter((range) => range.id !== id),\n    );\n  };\n\n  const updateStart = (day: Day, id: number, start: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) => {\n        if (range.id !== id) return range;\n        const end =\n          timeIndex(start) >= timeIndex(range.end)\n            ? (timeOptions[\n                Math.min(timeIndex(start) + 4, timeOptions.length - 1)\n              ] ?? range.end)\n            : range.end;\n        return { ...range, end, start };\n      }),\n    );\n  };\n\n  const updateEnd = (day: Day, id: number, end: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) =>\n        range.id === id ? { ...range, end } : range,\n      ),\n    );\n  };\n\n  const copyTo = (source: Day, targets: Day[]) => {\n    setAvailability((prev) => {\n      const next = { ...prev };\n      for (const target of targets) {\n        next[target] = prev[source].map((range) =>\n          createRange(range.start, range.end),\n        );\n      }\n      return next;\n    });\n  };\n\n  return (\n    <TooltipProvider delay={0}>\n      <div className=\"divide-y\">\n        {days.map((day) => {\n          const ranges = availability[day];\n          const lastRange = ranges[ranges.length - 1];\n          const addDisabled = lastRange\n            ? timeIndex(lastRange.end) >= timeOptions.length - 2\n            : false;\n\n          return (\n            <div\n              className=\"flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start\"\n              key={day}\n            >\n              <Label className=\"flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7\">\n                <Switch\n                  checked={ranges.length > 0}\n                  onCheckedChange={(checked) => toggleDay(day, checked)}\n                />\n                {day}\n              </Label>\n              <div className=\"flex w-full min-w-0 items-start gap-4 md:flex-1\">\n                <div className=\"flex min-w-0 flex-col gap-2\">\n                  {ranges.length === 0 ? (\n                    <p className=\"flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm\">\n                      Unavailable\n                    </p>\n                  ) : (\n                    ranges.map((range) => (\n                      <div className=\"flex items-center gap-2\" key={range.id}>\n                        <Group aria-label={`${day} time range`}>\n                          <TimeCombobox\n                            ariaLabel={`${day} start time`}\n                            items={timeOptions}\n                            onChange={(start) =>\n                              updateStart(day, range.id, start)\n                            }\n                            value={range.start}\n                          />\n                          <GroupSeparator />\n                          <GroupText aria-hidden=\"true\" className=\"px-2\">\n                            <ArrowRightIcon className=\"size-3.5\" />\n                          </GroupText>\n                          <GroupSeparator />\n                          <TimeCombobox\n                            ariaLabel={`${day} end time`}\n                            items={timeOptions.slice(\n                              timeIndex(range.start) + 1,\n                            )}\n                            onChange={(end) => updateEnd(day, range.id, end)}\n                            value={range.end}\n                          />\n                        </Group>\n                        <Tooltip disableHoverablePopup>\n                          <TooltipTrigger\n                            render={\n                              <Button\n                                aria-label={`Delete ${range.start} to ${range.end} on ${day}`}\n                                onClick={() => removeRange(day, range.id)}\n                                size=\"icon-sm\"\n                                variant=\"ghost\"\n                              />\n                            }\n                          >\n                            <XIcon aria-hidden=\"true\" />\n                          </TooltipTrigger>\n                          <TooltipPopup>Delete range</TooltipPopup>\n                        </Tooltip>\n                      </div>\n                    ))\n                  )}\n                </div>\n                <div className=\"ml-auto flex shrink-0 gap-1\">\n                  <Tooltip disableHoverablePopup>\n                    <TooltipTrigger\n                      render={\n                        <Button\n                          aria-label={`Add time range to ${day}`}\n                          disabled={addDisabled}\n                          onClick={() => addRange(day)}\n                          size=\"icon-sm\"\n                          variant=\"ghost\"\n                        />\n                      }\n                    >\n                      <PlusIcon aria-hidden=\"true\" />\n                    </TooltipTrigger>\n                    <TooltipPopup>Add range</TooltipPopup>\n                  </Tooltip>\n                  <CopyTimesPopover\n                    day={day}\n                    disabled={ranges.length === 0}\n                    onCopy={(targets) => copyTo(day, targets)}\n                  />\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </TooltipProvider>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+    "colSpan": 2
+  },
+  "categories": [
+    "switch",
+    "combobox",
+    "group",
+    "popover",
+    "time"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-switch-9.json b/apps/ui/public/r/p-switch-9.json
new file mode 100644
index 000000000..bdd7a3f51
--- /dev/null
+++ b/apps/ui/public/r/p-switch-9.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-switch-9",
+  "description": "Weekly availability editor with From/To labeled time groups",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/button",
+    "@coss/checkbox",
+    "@coss/checkbox-group",
+    "@coss/combobox",
+    "@coss/group",
+    "@coss/label",
+    "@coss/popover",
+    "@coss/switch",
+    "@coss/tooltip"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-switch-9.tsx",
+      "content": "\"use client\";\n\nimport { CopyIcon, PlusIcon, SearchIcon, XIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\nimport { Group, GroupSeparator, GroupText } from \"@/registry/default/ui/group\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport { Switch } from \"@/registry/default/ui/switch\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst days = [\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\",\n  \"Sunday\",\n] as const;\n\ntype Day = (typeof days)[number];\n\ntype TimeRange = {\n  id: number;\n  start: string;\n  end: string;\n};\n\nconst timeOptions = Array.from({ length: 96 }, (_, i) => {\n  const hours = Math.floor(i / 4);\n  const minutes = (i % 4) * 15;\n  const period = hours < 12 ? \"AM\" : \"PM\";\n  const displayHours = hours % 12 === 0 ? 12 : hours % 12;\n  return `${displayHours}:${minutes.toString().padStart(2, \"0\")} ${period}`;\n});\n\nconst timeIndex = (time: string) => timeOptions.indexOf(time);\n\nlet rangeId = 0;\nconst createRange = (start: string, end: string): TimeRange => ({\n  end,\n  id: ++rangeId,\n  start,\n});\n\nconst defaultAvailability: Record<Day, TimeRange[]> = {\n  Friday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Monday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Saturday: [],\n  Sunday: [],\n  Thursday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n  Tuesday: [\n    createRange(\"9:00 AM\", \"1:00 PM\"),\n    createRange(\"3:00 PM\", \"5:00 PM\"),\n  ],\n  Wednesday: [createRange(\"9:00 AM\", \"5:00 PM\")],\n};\n\nfunction TimeCombobox({\n  ariaLabel,\n  id,\n  items,\n  onChange,\n  value,\n}: {\n  ariaLabel: string;\n  id: string;\n  items: string[];\n  onChange: (time: string) => void;\n  value: string;\n}) {\n  return (\n    <Combobox\n      autoHighlight\n      items={items}\n      onValueChange={(time) => {\n        if (typeof time === \"string\") {\n          onChange(time);\n        }\n      }}\n      value={value}\n    >\n      <ComboboxTrigger\n        aria-label={ariaLabel}\n        render={\n          <Button\n            className=\"w-24 font-normal tabular-nums\"\n            id={id}\n            size=\"sm\"\n            variant=\"outline\"\n          />\n        }\n      >\n        <ComboboxValue />\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label={ariaLabel} className=\"min-w-44\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"Search time\"\n            showTrigger={false}\n            size=\"sm\"\n            startAddon={<SearchIcon />}\n          />\n        </div>\n        <ComboboxEmpty>No times found.</ComboboxEmpty>\n        <ComboboxList>\n          {(time: string) => (\n            <ComboboxItem key={time} value={time}>\n              <span className=\"tabular-nums\">{time}</span>\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nfunction CopyTimesPopover({\n  day,\n  disabled,\n  onCopy,\n}: {\n  day: Day;\n  disabled: boolean;\n  onCopy: (targets: Day[]) => void;\n}) {\n  const [open, setOpen] = useState(false);\n  const [selectedDays, setSelectedDays] = useState<string[]>([]);\n\n  return (\n    <Popover\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (nextOpen) {\n          setSelectedDays([]);\n        }\n      }}\n      open={open}\n    >\n      <Tooltip disableHoverablePopup>\n        <PopoverTrigger\n          render={\n            <TooltipTrigger\n              render={\n                <Button\n                  aria-label={`Copy ${day} times to other days`}\n                  disabled={disabled}\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                />\n              }\n            />\n          }\n        >\n          <CopyIcon aria-hidden=\"true\" />\n        </PopoverTrigger>\n        <TooltipPopup>Copy to other days</TooltipPopup>\n      </Tooltip>\n      <PopoverPopup align=\"end\" className=\"w-44\">\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"font-medium text-foreground text-sm\">\n            Copy times to\n          </div>\n          <CheckboxGroup\n            aria-label={`Copy ${day} times to`}\n            onValueChange={setSelectedDays}\n            value={selectedDays}\n          >\n            {days\n              .filter((target) => target !== day)\n              .map((target) => (\n                <Label key={target}>\n                  <Checkbox value={target} />\n                  {target}\n                </Label>\n              ))}\n          </CheckboxGroup>\n          <Button\n            disabled={selectedDays.length === 0}\n            onClick={() => {\n              onCopy(selectedDays as Day[]);\n              setOpen(false);\n            }}\n            size=\"sm\"\n          >\n            Apply\n          </Button>\n        </div>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n\nexport default function Particle() {\n  const id = useId();\n  const [availability, setAvailability] =\n    useState<Record<Day, TimeRange[]>>(defaultAvailability);\n\n  const setDayRanges = (day: Day, ranges: TimeRange[]) => {\n    setAvailability((prev) => ({ ...prev, [day]: ranges }));\n  };\n\n  const toggleDay = (day: Day, enabled: boolean) => {\n    setDayRanges(day, enabled ? [createRange(\"9:00 AM\", \"5:00 PM\")] : []);\n  };\n\n  const addRange = (day: Day) => {\n    const ranges = availability[day];\n    const lastRange = ranges[ranges.length - 1];\n    if (!lastRange) {\n      setDayRanges(day, [createRange(\"9:00 AM\", \"5:00 PM\")]);\n      return;\n    }\n    const startIndex = Math.min(\n      timeIndex(lastRange.end) + 4,\n      timeOptions.length - 2,\n    );\n    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);\n    setDayRanges(day, [\n      ...ranges,\n      createRange(timeOptions[startIndex] ?? \"\", timeOptions[endIndex] ?? \"\"),\n    ]);\n  };\n\n  const removeRange = (day: Day, id: number) => {\n    setDayRanges(\n      day,\n      availability[day].filter((range) => range.id !== id),\n    );\n  };\n\n  const updateStart = (day: Day, id: number, start: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) => {\n        if (range.id !== id) return range;\n        const end =\n          timeIndex(start) >= timeIndex(range.end)\n            ? (timeOptions[\n                Math.min(timeIndex(start) + 4, timeOptions.length - 1)\n              ] ?? range.end)\n            : range.end;\n        return { ...range, end, start };\n      }),\n    );\n  };\n\n  const updateEnd = (day: Day, id: number, end: string) => {\n    setDayRanges(\n      day,\n      availability[day].map((range) =>\n        range.id === id ? { ...range, end } : range,\n      ),\n    );\n  };\n\n  const copyTo = (source: Day, targets: Day[]) => {\n    setAvailability((prev) => {\n      const next = { ...prev };\n      for (const target of targets) {\n        next[target] = prev[source].map((range) =>\n          createRange(range.start, range.end),\n        );\n      }\n      return next;\n    });\n  };\n\n  return (\n    <TooltipProvider delay={0}>\n      <div className=\"divide-y\">\n        {days.map((day) => {\n          const ranges = availability[day];\n          const lastRange = ranges[ranges.length - 1];\n          const addDisabled = lastRange\n            ? timeIndex(lastRange.end) >= timeOptions.length - 2\n            : false;\n\n          return (\n            <div\n              className=\"flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start\"\n              key={day}\n            >\n              <Label className=\"flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7\">\n                <Switch\n                  checked={ranges.length > 0}\n                  onCheckedChange={(checked) => toggleDay(day, checked)}\n                />\n                {day}\n              </Label>\n              <div className=\"flex w-full min-w-0 items-start gap-4 md:flex-1\">\n                <div className=\"flex min-w-0 flex-col gap-2\">\n                  {ranges.length === 0 ? (\n                    <p className=\"flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm\">\n                      Unavailable\n                    </p>\n                  ) : (\n                    ranges.map((range) => {\n                      const startId = `${id}-start-${range.id}`;\n                      const endId = `${id}-end-${range.id}`;\n\n                      return (\n                        <div className=\"flex items-center gap-2\" key={range.id}>\n                          <Group aria-label={`${day} time range`}>\n                            <GroupText render={<Label htmlFor={startId} />}>\n                              From\n                            </GroupText>\n                            <GroupSeparator />\n                            <TimeCombobox\n                              ariaLabel={`${day} start time`}\n                              id={startId}\n                              items={timeOptions}\n                              onChange={(start) =>\n                                updateStart(day, range.id, start)\n                              }\n                              value={range.start}\n                            />\n                            <GroupSeparator />\n                            <GroupText render={<Label htmlFor={endId} />}>\n                              To\n                            </GroupText>\n                            <GroupSeparator />\n                            <TimeCombobox\n                              ariaLabel={`${day} end time`}\n                              id={endId}\n                              items={timeOptions.slice(\n                                timeIndex(range.start) + 1,\n                              )}\n                              onChange={(end) => updateEnd(day, range.id, end)}\n                              value={range.end}\n                            />\n                          </Group>\n                          <Tooltip disableHoverablePopup>\n                            <TooltipTrigger\n                              render={\n                                <Button\n                                  aria-label={`Delete ${range.start} to ${range.end} on ${day}`}\n                                  onClick={() => removeRange(day, range.id)}\n                                  size=\"icon-sm\"\n                                  variant=\"ghost\"\n                                />\n                              }\n                            >\n                              <XIcon aria-hidden=\"true\" />\n                            </TooltipTrigger>\n                            <TooltipPopup>Delete range</TooltipPopup>\n                          </Tooltip>\n                        </div>\n                      );\n                    })\n                  )}\n                </div>\n                <div className=\"ml-auto flex shrink-0 gap-1\">\n                  <Tooltip disableHoverablePopup>\n                    <TooltipTrigger\n                      render={\n                        <Button\n                          aria-label={`Add time range to ${day}`}\n                          disabled={addDisabled}\n                          onClick={() => addRange(day)}\n                          size=\"icon-sm\"\n                          variant=\"ghost\"\n                        />\n                      }\n                    >\n                      <PlusIcon aria-hidden=\"true\" />\n                    </TooltipTrigger>\n                    <TooltipPopup>Add range</TooltipPopup>\n                  </Tooltip>\n                  <CopyTimesPopover\n                    day={day}\n                    disabled={ranges.length === 0}\n                    onCopy={(targets) => copyTo(day, targets)}\n                  />\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </TooltipProvider>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+    "colSpan": 2
+  },
+  "categories": [
+    "switch",
+    "combobox",
+    "group",
+    "popover",
+    "time"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index 217515665..77b71b589 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -9868,6 +9868,113 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with time range combobox pickers",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-7.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-7",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/select",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "group",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with grouped time range controls",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-8.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-8",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "group",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with From/To labeled time groups",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-9.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-9",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "table"
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index 217515665..77b71b589 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -9868,6 +9868,113 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with time range combobox pickers",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-7.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-7",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/select",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "group",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with grouped time range controls",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-8.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-8",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "switch",
+        "combobox",
+        "group",
+        "popover",
+        "time"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Weekly availability editor with From/To labeled time groups",
+      "files": [
+        {
+          "path": "registry/default/particles/p-switch-9.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+        "colSpan": 2
+      },
+      "name": "p-switch-9",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/combobox",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover",
+        "@coss/switch",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "table"
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index 1907fce55..da6834fcf 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -8557,6 +8557,60 @@ export const Index: Record<string, any> = {
     categories: ["switch"],
     meta: undefined,
   },
+  "p-switch-7": {
+    name: "p-switch-7",
+    description: "Weekly availability editor with time range combobox pickers",
+    type: "registry:block",
+    registryDependencies: ["@coss/button","@coss/checkbox","@coss/checkbox-group","@coss/combobox","@coss/label","@coss/popover","@coss/select","@coss/switch","@coss/tooltip"],
+    files: [{
+      path: "registry/default/particles/p-switch-7.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-switch-7.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["switch","combobox","popover","time"],
+    meta: {"className":"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl","colSpan":2},
+  },
+  "p-switch-8": {
+    name: "p-switch-8",
+    description: "Weekly availability editor with grouped time range controls",
+    type: "registry:block",
+    registryDependencies: ["@coss/button","@coss/checkbox","@coss/checkbox-group","@coss/combobox","@coss/group","@coss/label","@coss/popover","@coss/switch","@coss/tooltip"],
+    files: [{
+      path: "registry/default/particles/p-switch-8.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-switch-8.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["switch","combobox","group","popover","time"],
+    meta: {"className":"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl","colSpan":2},
+  },
+  "p-switch-9": {
+    name: "p-switch-9",
+    description: "Weekly availability editor with From/To labeled time groups",
+    type: "registry:block",
+    registryDependencies: ["@coss/button","@coss/checkbox","@coss/checkbox-group","@coss/combobox","@coss/group","@coss/label","@coss/popover","@coss/switch","@coss/tooltip"],
+    files: [{
+      path: "registry/default/particles/p-switch-9.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-switch-9.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["switch","combobox","group","popover","time"],
+    meta: {"className":"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl","colSpan":2},
+  },
   "p-table-1": {
     name: "p-table-1",
     description: "Basic table",
diff --git a/apps/ui/registry/default/particles/p-switch-7.tsx b/apps/ui/registry/default/particles/p-switch-7.tsx
new file mode 100644
index 000000000..9e13362ea
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-switch-7.tsx
@@ -0,0 +1,382 @@
+"use client";
+
+import { CopyIcon, PlusIcon, SearchIcon, XIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/registry/default/ui/button";
+import { Checkbox } from "@/registry/default/ui/checkbox";
+import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/registry/default/ui/combobox";
+import { Label } from "@/registry/default/ui/label";
+import {
+  Popover,
+  PopoverPopup,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover";
+import { SelectButton } from "@/registry/default/ui/select";
+import { Switch } from "@/registry/default/ui/switch";
+import {
+  Tooltip,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/default/ui/tooltip";
+
+const days = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+] as const;
+
+type Day = (typeof days)[number];
+
+type TimeRange = {
+  id: number;
+  start: string;
+  end: string;
+};
+
+const timeOptions = Array.from({ length: 96 }, (_, i) => {
+  const hours = Math.floor(i / 4);
+  const minutes = (i % 4) * 15;
+  const period = hours < 12 ? "AM" : "PM";
+  const displayHours = hours % 12 === 0 ? 12 : hours % 12;
+  return `${displayHours}:${minutes.toString().padStart(2, "0")} ${period}`;
+});
+
+const timeIndex = (time: string) => timeOptions.indexOf(time);
+
+let rangeId = 0;
+const createRange = (start: string, end: string): TimeRange => ({
+  end,
+  id: ++rangeId,
+  start,
+});
+
+const defaultAvailability: Record<Day, TimeRange[]> = {
+  Friday: [createRange("9:00 AM", "5:00 PM")],
+  Monday: [createRange("9:00 AM", "5:00 PM")],
+  Saturday: [],
+  Sunday: [],
+  Thursday: [createRange("9:00 AM", "5:00 PM")],
+  Tuesday: [
+    createRange("9:00 AM", "1:00 PM"),
+    createRange("3:00 PM", "5:00 PM"),
+  ],
+  Wednesday: [createRange("9:00 AM", "5:00 PM")],
+};
+
+function TimeCombobox({
+  ariaLabel,
+  items,
+  onChange,
+  value,
+}: {
+  ariaLabel: string;
+  items: string[];
+  onChange: (time: string) => void;
+  value: string;
+}) {
+  return (
+    <Combobox
+      autoHighlight
+      items={items}
+      onValueChange={(time) => {
+        if (typeof time === "string") {
+          onChange(time);
+        }
+      }}
+      value={value}
+    >
+      <ComboboxTrigger
+        aria-label={ariaLabel}
+        render={<SelectButton className="w-27 tabular-nums" size="sm" />}
+      >
+        <ComboboxValue />
+      </ComboboxTrigger>
+      <ComboboxPopup aria-label={ariaLabel} className="min-w-44">
+        <div className="border-b p-2">
+          <ComboboxInput
+            className="rounded-md before:rounded-[calc(var(--radius-md)-1px)]"
+            placeholder="Search time"
+            showTrigger={false}
+            size="sm"
+            startAddon={<SearchIcon />}
+          />
+        </div>
+        <ComboboxEmpty>No times found.</ComboboxEmpty>
+        <ComboboxList>
+          {(time: string) => (
+            <ComboboxItem key={time} value={time}>
+              <span className="tabular-nums">{time}</span>
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </Combobox>
+  );
+}
+
+function CopyTimesPopover({
+  day,
+  disabled,
+  onCopy,
+}: {
+  day: Day;
+  disabled: boolean;
+  onCopy: (targets: Day[]) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [selectedDays, setSelectedDays] = useState<string[]>([]);
+
+  return (
+    <Popover
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (nextOpen) {
+          setSelectedDays([]);
+        }
+      }}
+      open={open}
+    >
+      <Tooltip disableHoverablePopup>
+        <PopoverTrigger
+          render={
+            <TooltipTrigger
+              render={
+                <Button
+                  aria-label={`Copy ${day} times to other days`}
+                  disabled={disabled}
+                  size="icon-sm"
+                  variant="ghost"
+                />
+              }
+            />
+          }
+        >
+          <CopyIcon aria-hidden="true" />
+        </PopoverTrigger>
+        <TooltipPopup>Copy to other days</TooltipPopup>
+      </Tooltip>
+      <PopoverPopup align="end" className="w-44">
+        <div className="flex flex-col gap-3">
+          <div className="font-medium text-foreground text-sm">
+            Copy times to
+          </div>
+          <CheckboxGroup
+            aria-label={`Copy ${day} times to`}
+            onValueChange={setSelectedDays}
+            value={selectedDays}
+          >
+            {days
+              .filter((target) => target !== day)
+              .map((target) => (
+                <Label key={target}>
+                  <Checkbox value={target} />
+                  {target}
+                </Label>
+              ))}
+          </CheckboxGroup>
+          <Button
+            disabled={selectedDays.length === 0}
+            onClick={() => {
+              onCopy(selectedDays as Day[]);
+              setOpen(false);
+            }}
+            size="sm"
+          >
+            Apply
+          </Button>
+        </div>
+      </PopoverPopup>
+    </Popover>
+  );
+}
+
+export default function Particle() {
+  const [availability, setAvailability] =
+    useState<Record<Day, TimeRange[]>>(defaultAvailability);
+
+  const setDayRanges = (day: Day, ranges: TimeRange[]) => {
+    setAvailability((prev) => ({ ...prev, [day]: ranges }));
+  };
+
+  const toggleDay = (day: Day, enabled: boolean) => {
+    setDayRanges(day, enabled ? [createRange("9:00 AM", "5:00 PM")] : []);
+  };
+
+  const addRange = (day: Day) => {
+    const ranges = availability[day];
+    const lastRange = ranges[ranges.length - 1];
+    if (!lastRange) {
+      setDayRanges(day, [createRange("9:00 AM", "5:00 PM")]);
+      return;
+    }
+    const startIndex = Math.min(
+      timeIndex(lastRange.end) + 4,
+      timeOptions.length - 2,
+    );
+    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);
+    setDayRanges(day, [
+      ...ranges,
+      createRange(timeOptions[startIndex] ?? "", timeOptions[endIndex] ?? ""),
+    ]);
+  };
+
+  const removeRange = (day: Day, id: number) => {
+    setDayRanges(
+      day,
+      availability[day].filter((range) => range.id !== id),
+    );
+  };
+
+  const updateStart = (day: Day, id: number, start: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) => {
+        if (range.id !== id) return range;
+        const end =
+          timeIndex(start) >= timeIndex(range.end)
+            ? (timeOptions[
+                Math.min(timeIndex(start) + 4, timeOptions.length - 1)
+              ] ?? range.end)
+            : range.end;
+        return { ...range, end, start };
+      }),
+    );
+  };
+
+  const updateEnd = (day: Day, id: number, end: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) =>
+        range.id === id ? { ...range, end } : range,
+      ),
+    );
+  };
+
+  const copyTo = (source: Day, targets: Day[]) => {
+    setAvailability((prev) => {
+      const next = { ...prev };
+      for (const target of targets) {
+        next[target] = prev[source].map((range) =>
+          createRange(range.start, range.end),
+        );
+      }
+      return next;
+    });
+  };
+
+  return (
+    <TooltipProvider delay={0}>
+      <div className="divide-y">
+        {days.map((day) => {
+          const ranges = availability[day];
+          const lastRange = ranges[ranges.length - 1];
+          const addDisabled = lastRange
+            ? timeIndex(lastRange.end) >= timeOptions.length - 2
+            : false;
+
+          return (
+            <div
+              className="flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start"
+              key={day}
+            >
+              <Label className="flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7">
+                <Switch
+                  checked={ranges.length > 0}
+                  onCheckedChange={(checked) => toggleDay(day, checked)}
+                />
+                {day}
+              </Label>
+              <div className="flex w-full min-w-0 items-start gap-4 md:flex-1">
+                <div className="flex min-w-0 flex-col gap-2">
+                  {ranges.length === 0 ? (
+                    <p className="flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm">
+                      Unavailable
+                    </p>
+                  ) : (
+                    ranges.map((range) => (
+                      <div className="flex items-center gap-2" key={range.id}>
+                        <TimeCombobox
+                          ariaLabel={`${day} start time`}
+                          items={timeOptions}
+                          onChange={(start) =>
+                            updateStart(day, range.id, start)
+                          }
+                          value={range.start}
+                        />
+                        <span
+                          aria-hidden="true"
+                          className="text-muted-foreground"
+                        >
+                          –
+                        </span>
+                        <TimeCombobox
+                          ariaLabel={`${day} end time`}
+                          items={timeOptions.slice(timeIndex(range.start) + 1)}
+                          onChange={(end) => updateEnd(day, range.id, end)}
+                          value={range.end}
+                        />
+                        <Tooltip disableHoverablePopup>
+                          <TooltipTrigger
+                            render={
+                              <Button
+                                aria-label={`Delete ${range.start} to ${range.end} on ${day}`}
+                                onClick={() => removeRange(day, range.id)}
+                                size="icon-sm"
+                                variant="ghost"
+                              />
+                            }
+                          >
+                            <XIcon aria-hidden="true" />
+                          </TooltipTrigger>
+                          <TooltipPopup>Delete range</TooltipPopup>
+                        </Tooltip>
+                      </div>
+                    ))
+                  )}
+                </div>
+                <div className="ml-auto flex shrink-0 gap-1">
+                  <Tooltip disableHoverablePopup>
+                    <TooltipTrigger
+                      render={
+                        <Button
+                          aria-label={`Add time range to ${day}`}
+                          disabled={addDisabled}
+                          onClick={() => addRange(day)}
+                          size="icon-sm"
+                          variant="ghost"
+                        />
+                      }
+                    >
+                      <PlusIcon aria-hidden="true" />
+                    </TooltipTrigger>
+                    <TooltipPopup>Add range</TooltipPopup>
+                  </Tooltip>
+                  <CopyTimesPopover
+                    day={day}
+                    disabled={ranges.length === 0}
+                    onCopy={(targets) => copyTo(day, targets)}
+                  />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </TooltipProvider>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-switch-8.tsx b/apps/ui/registry/default/particles/p-switch-8.tsx
new file mode 100644
index 000000000..90f64aa62
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-switch-8.tsx
@@ -0,0 +1,397 @@
+"use client";
+
+import {
+  ArrowRightIcon,
+  CopyIcon,
+  PlusIcon,
+  SearchIcon,
+  XIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/registry/default/ui/button";
+import { Checkbox } from "@/registry/default/ui/checkbox";
+import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/registry/default/ui/combobox";
+import { Group, GroupSeparator, GroupText } from "@/registry/default/ui/group";
+import { Label } from "@/registry/default/ui/label";
+import {
+  Popover,
+  PopoverPopup,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover";
+import { Switch } from "@/registry/default/ui/switch";
+import {
+  Tooltip,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/default/ui/tooltip";
+
+const days = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+] as const;
+
+type Day = (typeof days)[number];
+
+type TimeRange = {
+  id: number;
+  start: string;
+  end: string;
+};
+
+const timeOptions = Array.from({ length: 96 }, (_, i) => {
+  const hours = Math.floor(i / 4);
+  const minutes = (i % 4) * 15;
+  const period = hours < 12 ? "AM" : "PM";
+  const displayHours = hours % 12 === 0 ? 12 : hours % 12;
+  return `${displayHours}:${minutes.toString().padStart(2, "0")} ${period}`;
+});
+
+const timeIndex = (time: string) => timeOptions.indexOf(time);
+
+let rangeId = 0;
+const createRange = (start: string, end: string): TimeRange => ({
+  end,
+  id: ++rangeId,
+  start,
+});
+
+const defaultAvailability: Record<Day, TimeRange[]> = {
+  Friday: [createRange("9:00 AM", "5:00 PM")],
+  Monday: [createRange("9:00 AM", "5:00 PM")],
+  Saturday: [],
+  Sunday: [],
+  Thursday: [createRange("9:00 AM", "5:00 PM")],
+  Tuesday: [
+    createRange("9:00 AM", "1:00 PM"),
+    createRange("3:00 PM", "5:00 PM"),
+  ],
+  Wednesday: [createRange("9:00 AM", "5:00 PM")],
+};
+
+function TimeCombobox({
+  ariaLabel,
+  items,
+  onChange,
+  value,
+}: {
+  ariaLabel: string;
+  items: string[];
+  onChange: (time: string) => void;
+  value: string;
+}) {
+  return (
+    <Combobox
+      autoHighlight
+      items={items}
+      onValueChange={(time) => {
+        if (typeof time === "string") {
+          onChange(time);
+        }
+      }}
+      value={value}
+    >
+      <ComboboxTrigger
+        aria-label={ariaLabel}
+        render={
+          <Button
+            className="w-24 font-normal tabular-nums"
+            size="sm"
+            variant="outline"
+          />
+        }
+      >
+        <ComboboxValue />
+      </ComboboxTrigger>
+      <ComboboxPopup aria-label={ariaLabel} className="min-w-44">
+        <div className="border-b p-2">
+          <ComboboxInput
+            className="rounded-md before:rounded-[calc(var(--radius-md)-1px)]"
+            placeholder="Search time"
+            showTrigger={false}
+            size="sm"
+            startAddon={<SearchIcon />}
+          />
+        </div>
+        <ComboboxEmpty>No times found.</ComboboxEmpty>
+        <ComboboxList>
+          {(time: string) => (
+            <ComboboxItem key={time} value={time}>
+              <span className="tabular-nums">{time}</span>
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </Combobox>
+  );
+}
+
+function CopyTimesPopover({
+  day,
+  disabled,
+  onCopy,
+}: {
+  day: Day;
+  disabled: boolean;
+  onCopy: (targets: Day[]) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [selectedDays, setSelectedDays] = useState<string[]>([]);
+
+  return (
+    <Popover
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (nextOpen) {
+          setSelectedDays([]);
+        }
+      }}
+      open={open}
+    >
+      <Tooltip disableHoverablePopup>
+        <PopoverTrigger
+          render={
+            <TooltipTrigger
+              render={
+                <Button
+                  aria-label={`Copy ${day} times to other days`}
+                  disabled={disabled}
+                  size="icon-sm"
+                  variant="ghost"
+                />
+              }
+            />
+          }
+        >
+          <CopyIcon aria-hidden="true" />
+        </PopoverTrigger>
+        <TooltipPopup>Copy to other days</TooltipPopup>
+      </Tooltip>
+      <PopoverPopup align="end" className="w-44">
+        <div className="flex flex-col gap-3">
+          <div className="font-medium text-foreground text-sm">
+            Copy times to
+          </div>
+          <CheckboxGroup
+            aria-label={`Copy ${day} times to`}
+            onValueChange={setSelectedDays}
+            value={selectedDays}
+          >
+            {days
+              .filter((target) => target !== day)
+              .map((target) => (
+                <Label key={target}>
+                  <Checkbox value={target} />
+                  {target}
+                </Label>
+              ))}
+          </CheckboxGroup>
+          <Button
+            disabled={selectedDays.length === 0}
+            onClick={() => {
+              onCopy(selectedDays as Day[]);
+              setOpen(false);
+            }}
+            size="sm"
+          >
+            Apply
+          </Button>
+        </div>
+      </PopoverPopup>
+    </Popover>
+  );
+}
+
+export default function Particle() {
+  const [availability, setAvailability] =
+    useState<Record<Day, TimeRange[]>>(defaultAvailability);
+
+  const setDayRanges = (day: Day, ranges: TimeRange[]) => {
+    setAvailability((prev) => ({ ...prev, [day]: ranges }));
+  };
+
+  const toggleDay = (day: Day, enabled: boolean) => {
+    setDayRanges(day, enabled ? [createRange("9:00 AM", "5:00 PM")] : []);
+  };
+
+  const addRange = (day: Day) => {
+    const ranges = availability[day];
+    const lastRange = ranges[ranges.length - 1];
+    if (!lastRange) {
+      setDayRanges(day, [createRange("9:00 AM", "5:00 PM")]);
+      return;
+    }
+    const startIndex = Math.min(
+      timeIndex(lastRange.end) + 4,
+      timeOptions.length - 2,
+    );
+    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);
+    setDayRanges(day, [
+      ...ranges,
+      createRange(timeOptions[startIndex] ?? "", timeOptions[endIndex] ?? ""),
+    ]);
+  };
+
+  const removeRange = (day: Day, id: number) => {
+    setDayRanges(
+      day,
+      availability[day].filter((range) => range.id !== id),
+    );
+  };
+
+  const updateStart = (day: Day, id: number, start: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) => {
+        if (range.id !== id) return range;
+        const end =
+          timeIndex(start) >= timeIndex(range.end)
+            ? (timeOptions[
+                Math.min(timeIndex(start) + 4, timeOptions.length - 1)
+              ] ?? range.end)
+            : range.end;
+        return { ...range, end, start };
+      }),
+    );
+  };
+
+  const updateEnd = (day: Day, id: number, end: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) =>
+        range.id === id ? { ...range, end } : range,
+      ),
+    );
+  };
+
+  const copyTo = (source: Day, targets: Day[]) => {
+    setAvailability((prev) => {
+      const next = { ...prev };
+      for (const target of targets) {
+        next[target] = prev[source].map((range) =>
+          createRange(range.start, range.end),
+        );
+      }
+      return next;
+    });
+  };
+
+  return (
+    <TooltipProvider delay={0}>
+      <div className="divide-y">
+        {days.map((day) => {
+          const ranges = availability[day];
+          const lastRange = ranges[ranges.length - 1];
+          const addDisabled = lastRange
+            ? timeIndex(lastRange.end) >= timeOptions.length - 2
+            : false;
+
+          return (
+            <div
+              className="flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start"
+              key={day}
+            >
+              <Label className="flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7">
+                <Switch
+                  checked={ranges.length > 0}
+                  onCheckedChange={(checked) => toggleDay(day, checked)}
+                />
+                {day}
+              </Label>
+              <div className="flex w-full min-w-0 items-start gap-4 md:flex-1">
+                <div className="flex min-w-0 flex-col gap-2">
+                  {ranges.length === 0 ? (
+                    <p className="flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm">
+                      Unavailable
+                    </p>
+                  ) : (
+                    ranges.map((range) => (
+                      <div className="flex items-center gap-2" key={range.id}>
+                        <Group aria-label={`${day} time range`}>
+                          <TimeCombobox
+                            ariaLabel={`${day} start time`}
+                            items={timeOptions}
+                            onChange={(start) =>
+                              updateStart(day, range.id, start)
+                            }
+                            value={range.start}
+                          />
+                          <GroupSeparator />
+                          <GroupText aria-hidden="true" className="px-2">
+                            <ArrowRightIcon className="size-3.5" />
+                          </GroupText>
+                          <GroupSeparator />
+                          <TimeCombobox
+                            ariaLabel={`${day} end time`}
+                            items={timeOptions.slice(
+                              timeIndex(range.start) + 1,
+                            )}
+                            onChange={(end) => updateEnd(day, range.id, end)}
+                            value={range.end}
+                          />
+                        </Group>
+                        <Tooltip disableHoverablePopup>
+                          <TooltipTrigger
+                            render={
+                              <Button
+                                aria-label={`Delete ${range.start} to ${range.end} on ${day}`}
+                                onClick={() => removeRange(day, range.id)}
+                                size="icon-sm"
+                                variant="ghost"
+                              />
+                            }
+                          >
+                            <XIcon aria-hidden="true" />
+                          </TooltipTrigger>
+                          <TooltipPopup>Delete range</TooltipPopup>
+                        </Tooltip>
+                      </div>
+                    ))
+                  )}
+                </div>
+                <div className="ml-auto flex shrink-0 gap-1">
+                  <Tooltip disableHoverablePopup>
+                    <TooltipTrigger
+                      render={
+                        <Button
+                          aria-label={`Add time range to ${day}`}
+                          disabled={addDisabled}
+                          onClick={() => addRange(day)}
+                          size="icon-sm"
+                          variant="ghost"
+                        />
+                      }
+                    >
+                      <PlusIcon aria-hidden="true" />
+                    </TooltipTrigger>
+                    <TooltipPopup>Add range</TooltipPopup>
+                  </Tooltip>
+                  <CopyTimesPopover
+                    day={day}
+                    disabled={ranges.length === 0}
+                    onCopy={(targets) => copyTo(day, targets)}
+                  />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </TooltipProvider>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-switch-9.tsx b/apps/ui/registry/default/particles/p-switch-9.tsx
new file mode 100644
index 000000000..08c8ba745
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-switch-9.tsx
@@ -0,0 +1,406 @@
+"use client";
+
+import { CopyIcon, PlusIcon, SearchIcon, XIcon } from "lucide-react";
+import { useId, useState } from "react";
+import { Button } from "@/registry/default/ui/button";
+import { Checkbox } from "@/registry/default/ui/checkbox";
+import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/registry/default/ui/combobox";
+import { Group, GroupSeparator, GroupText } from "@/registry/default/ui/group";
+import { Label } from "@/registry/default/ui/label";
+import {
+  Popover,
+  PopoverPopup,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover";
+import { Switch } from "@/registry/default/ui/switch";
+import {
+  Tooltip,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/default/ui/tooltip";
+
+const days = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+] as const;
+
+type Day = (typeof days)[number];
+
+type TimeRange = {
+  id: number;
+  start: string;
+  end: string;
+};
+
+const timeOptions = Array.from({ length: 96 }, (_, i) => {
+  const hours = Math.floor(i / 4);
+  const minutes = (i % 4) * 15;
+  const period = hours < 12 ? "AM" : "PM";
+  const displayHours = hours % 12 === 0 ? 12 : hours % 12;
+  return `${displayHours}:${minutes.toString().padStart(2, "0")} ${period}`;
+});
+
+const timeIndex = (time: string) => timeOptions.indexOf(time);
+
+let rangeId = 0;
+const createRange = (start: string, end: string): TimeRange => ({
+  end,
+  id: ++rangeId,
+  start,
+});
+
+const defaultAvailability: Record<Day, TimeRange[]> = {
+  Friday: [createRange("9:00 AM", "5:00 PM")],
+  Monday: [createRange("9:00 AM", "5:00 PM")],
+  Saturday: [],
+  Sunday: [],
+  Thursday: [createRange("9:00 AM", "5:00 PM")],
+  Tuesday: [
+    createRange("9:00 AM", "1:00 PM"),
+    createRange("3:00 PM", "5:00 PM"),
+  ],
+  Wednesday: [createRange("9:00 AM", "5:00 PM")],
+};
+
+function TimeCombobox({
+  ariaLabel,
+  id,
+  items,
+  onChange,
+  value,
+}: {
+  ariaLabel: string;
+  id: string;
+  items: string[];
+  onChange: (time: string) => void;
+  value: string;
+}) {
+  return (
+    <Combobox
+      autoHighlight
+      items={items}
+      onValueChange={(time) => {
+        if (typeof time === "string") {
+          onChange(time);
+        }
+      }}
+      value={value}
+    >
+      <ComboboxTrigger
+        aria-label={ariaLabel}
+        render={
+          <Button
+            className="w-24 font-normal tabular-nums"
+            id={id}
+            size="sm"
+            variant="outline"
+          />
+        }
+      >
+        <ComboboxValue />
+      </ComboboxTrigger>
+      <ComboboxPopup aria-label={ariaLabel} className="min-w-44">
+        <div className="border-b p-2">
+          <ComboboxInput
+            className="rounded-md before:rounded-[calc(var(--radius-md)-1px)]"
+            placeholder="Search time"
+            showTrigger={false}
+            size="sm"
+            startAddon={<SearchIcon />}
+          />
+        </div>
+        <ComboboxEmpty>No times found.</ComboboxEmpty>
+        <ComboboxList>
+          {(time: string) => (
+            <ComboboxItem key={time} value={time}>
+              <span className="tabular-nums">{time}</span>
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </Combobox>
+  );
+}
+
+function CopyTimesPopover({
+  day,
+  disabled,
+  onCopy,
+}: {
+  day: Day;
+  disabled: boolean;
+  onCopy: (targets: Day[]) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [selectedDays, setSelectedDays] = useState<string[]>([]);
+
+  return (
+    <Popover
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (nextOpen) {
+          setSelectedDays([]);
+        }
+      }}
+      open={open}
+    >
+      <Tooltip disableHoverablePopup>
+        <PopoverTrigger
+          render={
+            <TooltipTrigger
+              render={
+                <Button
+                  aria-label={`Copy ${day} times to other days`}
+                  disabled={disabled}
+                  size="icon-sm"
+                  variant="ghost"
+                />
+              }
+            />
+          }
+        >
+          <CopyIcon aria-hidden="true" />
+        </PopoverTrigger>
+        <TooltipPopup>Copy to other days</TooltipPopup>
+      </Tooltip>
+      <PopoverPopup align="end" className="w-44">
+        <div className="flex flex-col gap-3">
+          <div className="font-medium text-foreground text-sm">
+            Copy times to
+          </div>
+          <CheckboxGroup
+            aria-label={`Copy ${day} times to`}
+            onValueChange={setSelectedDays}
+            value={selectedDays}
+          >
+            {days
+              .filter((target) => target !== day)
+              .map((target) => (
+                <Label key={target}>
+                  <Checkbox value={target} />
+                  {target}
+                </Label>
+              ))}
+          </CheckboxGroup>
+          <Button
+            disabled={selectedDays.length === 0}
+            onClick={() => {
+              onCopy(selectedDays as Day[]);
+              setOpen(false);
+            }}
+            size="sm"
+          >
+            Apply
+          </Button>
+        </div>
+      </PopoverPopup>
+    </Popover>
+  );
+}
+
+export default function Particle() {
+  const id = useId();
+  const [availability, setAvailability] =
+    useState<Record<Day, TimeRange[]>>(defaultAvailability);
+
+  const setDayRanges = (day: Day, ranges: TimeRange[]) => {
+    setAvailability((prev) => ({ ...prev, [day]: ranges }));
+  };
+
+  const toggleDay = (day: Day, enabled: boolean) => {
+    setDayRanges(day, enabled ? [createRange("9:00 AM", "5:00 PM")] : []);
+  };
+
+  const addRange = (day: Day) => {
+    const ranges = availability[day];
+    const lastRange = ranges[ranges.length - 1];
+    if (!lastRange) {
+      setDayRanges(day, [createRange("9:00 AM", "5:00 PM")]);
+      return;
+    }
+    const startIndex = Math.min(
+      timeIndex(lastRange.end) + 4,
+      timeOptions.length - 2,
+    );
+    const endIndex = Math.min(startIndex + 4, timeOptions.length - 1);
+    setDayRanges(day, [
+      ...ranges,
+      createRange(timeOptions[startIndex] ?? "", timeOptions[endIndex] ?? ""),
+    ]);
+  };
+
+  const removeRange = (day: Day, id: number) => {
+    setDayRanges(
+      day,
+      availability[day].filter((range) => range.id !== id),
+    );
+  };
+
+  const updateStart = (day: Day, id: number, start: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) => {
+        if (range.id !== id) return range;
+        const end =
+          timeIndex(start) >= timeIndex(range.end)
+            ? (timeOptions[
+                Math.min(timeIndex(start) + 4, timeOptions.length - 1)
+              ] ?? range.end)
+            : range.end;
+        return { ...range, end, start };
+      }),
+    );
+  };
+
+  const updateEnd = (day: Day, id: number, end: string) => {
+    setDayRanges(
+      day,
+      availability[day].map((range) =>
+        range.id === id ? { ...range, end } : range,
+      ),
+    );
+  };
+
+  const copyTo = (source: Day, targets: Day[]) => {
+    setAvailability((prev) => {
+      const next = { ...prev };
+      for (const target of targets) {
+        next[target] = prev[source].map((range) =>
+          createRange(range.start, range.end),
+        );
+      }
+      return next;
+    });
+  };
+
+  return (
+    <TooltipProvider delay={0}>
+      <div className="divide-y">
+        {days.map((day) => {
+          const ranges = availability[day];
+          const lastRange = ranges[ranges.length - 1];
+          const addDisabled = lastRange
+            ? timeIndex(lastRange.end) >= timeOptions.length - 2
+            : false;
+
+          return (
+            <div
+              className="flex flex-col gap-4 py-3 first:pt-0 last:pb-0 md:flex-row md:flex-wrap md:items-start"
+              key={day}
+            >
+              <Label className="flex h-8 w-30 shrink-0 items-center gap-2.5 sm:h-7">
+                <Switch
+                  checked={ranges.length > 0}
+                  onCheckedChange={(checked) => toggleDay(day, checked)}
+                />
+                {day}
+              </Label>
+              <div className="flex w-full min-w-0 items-start gap-4 md:flex-1">
+                <div className="flex min-w-0 flex-col gap-2">
+                  {ranges.length === 0 ? (
+                    <p className="flex h-8 items-center text-muted-foreground sm:h-7 sm:text-sm">
+                      Unavailable
+                    </p>
+                  ) : (
+                    ranges.map((range) => {
+                      const startId = `${id}-start-${range.id}`;
+                      const endId = `${id}-end-${range.id}`;
+
+                      return (
+                        <div className="flex items-center gap-2" key={range.id}>
+                          <Group aria-label={`${day} time range`}>
+                            <GroupText render={<Label htmlFor={startId} />}>
+                              From
+                            </GroupText>
+                            <GroupSeparator />
+                            <TimeCombobox
+                              ariaLabel={`${day} start time`}
+                              id={startId}
+                              items={timeOptions}
+                              onChange={(start) =>
+                                updateStart(day, range.id, start)
+                              }
+                              value={range.start}
+                            />
+                            <GroupSeparator />
+                            <GroupText render={<Label htmlFor={endId} />}>
+                              To
+                            </GroupText>
+                            <GroupSeparator />
+                            <TimeCombobox
+                              ariaLabel={`${day} end time`}
+                              id={endId}
+                              items={timeOptions.slice(
+                                timeIndex(range.start) + 1,
+                              )}
+                              onChange={(end) => updateEnd(day, range.id, end)}
+                              value={range.end}
+                            />
+                          </Group>
+                          <Tooltip disableHoverablePopup>
+                            <TooltipTrigger
+                              render={
+                                <Button
+                                  aria-label={`Delete ${range.start} to ${range.end} on ${day}`}
+                                  onClick={() => removeRange(day, range.id)}
+                                  size="icon-sm"
+                                  variant="ghost"
+                                />
+                              }
+                            >
+                              <XIcon aria-hidden="true" />
+                            </TooltipTrigger>
+                            <TooltipPopup>Delete range</TooltipPopup>
+                          </Tooltip>
+                        </div>
+                      );
+                    })
+                  )}
+                </div>
+                <div className="ml-auto flex shrink-0 gap-1">
+                  <Tooltip disableHoverablePopup>
+                    <TooltipTrigger
+                      render={
+                        <Button
+                          aria-label={`Add time range to ${day}`}
+                          disabled={addDisabled}
+                          onClick={() => addRange(day)}
+                          size="icon-sm"
+                          variant="ghost"
+                        />
+                      }
+                    >
+                      <PlusIcon aria-hidden="true" />
+                    </TooltipTrigger>
+                    <TooltipPopup>Add range</TooltipPopup>
+                  </Tooltip>
+                  <CopyTimesPopover
+                    day={day}
+                    disabled={ranges.length === 0}
+                    onCopy={(targets) => copyTo(day, targets)}
+                  />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </TooltipProvider>
+  );
+}
diff --git a/apps/ui/registry/registry-particles.ts b/apps/ui/registry/registry-particles.ts
index 5f6afd02e..ae3a44deb 100644
--- a/apps/ui/registry/registry-particles.ts
+++ b/apps/ui/registry/registry-particles.ts
@@ -4802,6 +4802,78 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/switch"],
     type: "registry:block",
   },
+  {
+    categories: categories("switch", "combobox", "popover", "time"),
+    dependencies: ["lucide-react"],
+    description: "Weekly availability editor with time range combobox pickers",
+    files: [{ path: "particles/p-switch-7.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+      colSpan: 2,
+    },
+    name: "p-switch-7",
+    registryDependencies: [
+      "@coss/button",
+      "@coss/checkbox",
+      "@coss/checkbox-group",
+      "@coss/combobox",
+      "@coss/label",
+      "@coss/popover",
+      "@coss/select",
+      "@coss/switch",
+      "@coss/tooltip",
+    ],
+    type: "registry:block",
+  },
+  {
+    categories: categories("switch", "combobox", "group", "popover", "time"),
+    dependencies: ["lucide-react"],
+    description: "Weekly availability editor with grouped time range controls",
+    files: [{ path: "particles/p-switch-8.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+      colSpan: 2,
+    },
+    name: "p-switch-8",
+    registryDependencies: [
+      "@coss/button",
+      "@coss/checkbox",
+      "@coss/checkbox-group",
+      "@coss/combobox",
+      "@coss/group",
+      "@coss/label",
+      "@coss/popover",
+      "@coss/switch",
+      "@coss/tooltip",
+    ],
+    type: "registry:block",
+  },
+  {
+    categories: categories("switch", "combobox", "group", "popover", "time"),
+    dependencies: ["lucide-react"],
+    description: "Weekly availability editor with From/To labeled time groups",
+    files: [{ path: "particles/p-switch-9.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl",
+      colSpan: 2,
+    },
+    name: "p-switch-9",
+    registryDependencies: [
+      "@coss/button",
+      "@coss/checkbox",
+      "@coss/checkbox-group",
+      "@coss/combobox",
+      "@coss/group",
+      "@coss/label",
+      "@coss/popover",
+      "@coss/switch",
+      "@coss/tooltip",
+    ],
+    type: "registry:block",
+  },
   {
     categories: categories("table"),
     description: "Basic table",

From 1664a7f0b3be9f25f5ff0ac846667633b4ccd6b4 Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Fri, 10 Jul 2026 16:30:59 +0200
Subject: [PATCH 27/49] feat: add gmaps autocomplete particle (#816)

---
 apps/ui/public/r/p-autocomplete-16.json       |  29 ++
 apps/ui/public/r/registry.json                |  27 ++
 apps/ui/registry.json                         |  27 ++
 apps/ui/registry/__index__.tsx                |  18 ++
 .../default/particles/p-autocomplete-16.tsx   | 250 ++++++++++++++++++
 apps/ui/registry/registry-particles.ts        |  15 ++
 6 files changed, 366 insertions(+)
 create mode 100644 apps/ui/public/r/p-autocomplete-16.json
 create mode 100644 apps/ui/registry/default/particles/p-autocomplete-16.tsx

diff --git a/apps/ui/public/r/p-autocomplete-16.json b/apps/ui/public/r/p-autocomplete-16.json
new file mode 100644
index 000000000..6f76617af
--- /dev/null
+++ b/apps/ui/public/r/p-autocomplete-16.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-autocomplete-16",
+  "description": "Address autocomplete with Google Maps Places API",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/autocomplete",
+    "@coss/spinner"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-autocomplete-16.tsx",
+      "content": "\"use client\";\n\nimport { MapPinIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport {\n  Autocomplete,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n  AutocompleteStatus,\n} from \"@/registry/default/ui/autocomplete\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\n\n// Set NEXT_PUBLIC_GOOGLE_MAPS_API_KEY with the Places API (New) enabled to fetch\n// live suggestions. Without a key, the demo falls back to sample addresses.\nconst GOOGLE_MAPS_API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? \"\";\n\ntype AddressSuggestion = {\n  placeId: string;\n  text: string;\n  mainText: string;\n  secondaryText: string;\n};\n\nconst sampleAddresses: AddressSuggestion[] = [\n  {\n    mainText: \"1600 Amphitheatre Parkway\",\n    secondaryText: \"Mountain View, CA 94043, USA\",\n  },\n  {\n    mainText: \"1600 Pennsylvania Avenue NW\",\n    secondaryText: \"Washington, DC 20500, USA\",\n  },\n  { mainText: \"350 Fifth Avenue\", secondaryText: \"New York, NY 10118, USA\" },\n  {\n    mainText: \"221B Baker Street\",\n    secondaryText: \"London NW1 6XE, United Kingdom\",\n  },\n  {\n    mainText: \"Champ de Mars, 5 Avenue Anatole France\",\n    secondaryText: \"75007 Paris, France\",\n  },\n  {\n    mainText: \"Piazza del Colosseo, 1\",\n    secondaryText: \"00184 Roma RM, Italy\",\n  },\n  { mainText: \"Platz der Republik 1\", secondaryText: \"11011 Berlin, Germany\" },\n  {\n    mainText: \"1 Macquarie Street\",\n    secondaryText: \"Sydney NSW 2000, Australia\",\n  },\n].map((address, index) => ({\n  ...address,\n  placeId: `sample-${index + 1}`,\n  text: `${address.mainText}, ${address.secondaryText}`,\n}));\n\n// A short-lived session token groups Autocomplete + Place Details requests\n// for billing.\nfunction newSessionToken() {\n  if (typeof crypto !== \"undefined\" && \"randomUUID\" in crypto) {\n    return crypto.randomUUID();\n  }\n  return Math.random().toString(36).slice(2);\n}\n\ntype PlacesAutocompleteResponse = {\n  suggestions?: {\n    placePrediction?: {\n      placeId?: string;\n      text?: { text?: string };\n      structuredFormat?: {\n        mainText?: { text?: string };\n        secondaryText?: { text?: string };\n      };\n    };\n  }[];\n};\n\nasync function fetchAddressSuggestions(\n  query: string,\n  sessionToken: string,\n  signal: AbortSignal,\n): Promise<AddressSuggestion[]> {\n  const response = await fetch(\n    \"https://places.googleapis.com/v1/places:autocomplete\",\n    {\n      body: JSON.stringify({ input: query, sessionToken }),\n      headers: {\n        \"Content-Type\": \"application/json\",\n        \"X-Goog-Api-Key\": GOOGLE_MAPS_API_KEY,\n      },\n      method: \"POST\",\n      signal,\n    },\n  );\n  if (!response.ok) {\n    throw new Error(\"Places API request failed\");\n  }\n  const data = (await response.json()) as PlacesAutocompleteResponse;\n  const suggestions: AddressSuggestion[] = [];\n  for (const suggestion of data.suggestions ?? []) {\n    const prediction = suggestion.placePrediction;\n    if (!prediction?.placeId) continue;\n    const text = prediction.text?.text ?? \"\";\n    suggestions.push({\n      mainText: prediction.structuredFormat?.mainText?.text ?? text,\n      placeId: prediction.placeId,\n      secondaryText: prediction.structuredFormat?.secondaryText?.text ?? \"\",\n      text,\n    });\n  }\n  return suggestions;\n}\n\nasync function searchSampleAddresses(\n  query: string,\n): Promise<AddressSuggestion[]> {\n  await new Promise((resolve) =>\n    setTimeout(resolve, Math.random() * 500 + 100),\n  );\n  const lowerQuery = query.toLowerCase();\n  return sampleAddresses.filter((address) =>\n    address.text.toLowerCase().includes(lowerQuery),\n  );\n}\n\nexport default function Particle() {\n  const [searchValue, setSearchValue] = useState(\"\");\n  const [isLoading, setIsLoading] = useState(false);\n  const [suggestions, setSuggestions] = useState<AddressSuggestion[]>([]);\n  const [error, setError] = useState<string | null>(null);\n  const sessionTokenRef = useRef<string | null>(null);\n\n  useEffect(() => {\n    const query = searchValue.trim();\n    if (!query) {\n      setSuggestions([]);\n      setIsLoading(false);\n      setError(null);\n      return;\n    }\n\n    setIsLoading(true);\n    setError(null);\n    let ignore = false;\n    const controller = new AbortController();\n\n    const timeoutId = setTimeout(async () => {\n      try {\n        sessionTokenRef.current ??= newSessionToken();\n        const results = GOOGLE_MAPS_API_KEY\n          ? await fetchAddressSuggestions(\n              query,\n              sessionTokenRef.current,\n              controller.signal,\n            )\n          : await searchSampleAddresses(query);\n        if (!ignore) setSuggestions(results);\n      } catch {\n        if (!ignore && !controller.signal.aborted) {\n          setError(\"Could not load address suggestions. Please try again.\");\n          setSuggestions([]);\n        }\n      } finally {\n        if (!ignore) setIsLoading(false);\n      }\n    }, 300);\n\n    return () => {\n      ignore = true;\n      controller.abort();\n      clearTimeout(timeoutId);\n    };\n  }, [searchValue]);\n\n  let status: ReactNode = `${suggestions.length} suggestion${suggestions.length === 1 ? \"\" : \"s\"} found`;\n  if (isLoading) {\n    status = (\n      <span className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n        Searching addresses...\n        <Spinner className=\"size-4.5 sm:size-4\" />\n      </span>\n    );\n  } else if (error) {\n    status = (\n      <span className=\"font-normal text-destructive text-sm\">{error}</span>\n    );\n  } else if (suggestions.length === 0 && searchValue) {\n    status = (\n      <span className=\"font-normal text-muted-foreground text-sm\">\n        No addresses found for \"{searchValue}\"\n      </span>\n    );\n  }\n\n  const shouldRenderPopup = searchValue.trim() !== \"\";\n\n  return (\n    <Autocomplete\n      autoHighlight\n      filter={null}\n      items={suggestions}\n      itemToStringValue={(item: unknown) => (item as AddressSuggestion).text}\n      onValueChange={(value, eventDetails) => {\n        setSearchValue(value);\n        if (eventDetails.reason === \"item-press\") {\n          // Selecting a suggestion ends the billing session. In a real app,\n          // fetch the place details with the same token before resetting it.\n          sessionTokenRef.current = null;\n        }\n      }}\n      value={searchValue}\n    >\n      <AutocompleteInput\n        aria-label=\"Address\"\n        autoComplete=\"off\"\n        className=\"min-w-0 *:[input]:truncate\"\n        placeholder=\"Enter an address\"\n        startAddon={<MapPinIcon />}\n      />\n      {shouldRenderPopup && (\n        <AutocompletePopup\n          aria-busy={isLoading || undefined}\n          className=\"max-w-(--anchor-width) *:min-w-0\"\n        >\n          <AutocompleteStatus className=\"text-muted-foreground\">\n            {status}\n          </AutocompleteStatus>\n          <AutocompleteList>\n            {(suggestion: AddressSuggestion) => (\n              <AutocompleteItem key={suggestion.placeId} value={suggestion}>\n                <span className=\"flex w-full min-w-0 flex-col\">\n                  <span className=\"truncate font-medium\">\n                    {suggestion.mainText}\n                  </span>\n                  <span className=\"truncate text-muted-foreground text-xs\">\n                    {suggestion.secondaryText}\n                  </span>\n                </span>\n              </AutocompleteItem>\n            )}\n          </AutocompleteList>\n        </AutocompletePopup>\n      )}\n    </Autocomplete>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
+  },
+  "categories": [
+    "autocomplete",
+    "input",
+    "async",
+    "search"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index 77b71b589..4fed69295 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -1571,6 +1571,33 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "autocomplete",
+        "input",
+        "async",
+        "search"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Address autocomplete with Google Maps Places API",
+      "files": [
+        {
+          "path": "registry/default/particles/p-autocomplete-16.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
+      },
+      "name": "p-autocomplete-16",
+      "registryDependencies": [
+        "@coss/autocomplete",
+        "@coss/spinner"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "avatar"
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index 77b71b589..4fed69295 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -1571,6 +1571,33 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "autocomplete",
+        "input",
+        "async",
+        "search"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Address autocomplete with Google Maps Places API",
+      "files": [
+        {
+          "path": "registry/default/particles/p-autocomplete-16.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
+      },
+      "name": "p-autocomplete-16",
+      "registryDependencies": [
+        "@coss/autocomplete",
+        "@coss/spinner"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "avatar"
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index da6834fcf..aa3aeda9a 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -1483,6 +1483,24 @@ export const Index: Record<string, any> = {
     categories: ["autocomplete","input"],
     meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"},
   },
+  "p-autocomplete-16": {
+    name: "p-autocomplete-16",
+    description: "Address autocomplete with Google Maps Places API",
+    type: "registry:block",
+    registryDependencies: ["@coss/autocomplete","@coss/spinner"],
+    files: [{
+      path: "registry/default/particles/p-autocomplete-16.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-autocomplete-16.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["autocomplete","input","async","search"],
+    meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"},
+  },
   "p-avatar-1": {
     name: "p-avatar-1",
     description: "Avatar with image and fallback",
diff --git a/apps/ui/registry/default/particles/p-autocomplete-16.tsx b/apps/ui/registry/default/particles/p-autocomplete-16.tsx
new file mode 100644
index 000000000..479632ec4
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-autocomplete-16.tsx
@@ -0,0 +1,250 @@
+"use client";
+
+import { MapPinIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import {
+  Autocomplete,
+  AutocompleteInput,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompletePopup,
+  AutocompleteStatus,
+} from "@/registry/default/ui/autocomplete";
+import { Spinner } from "@/registry/default/ui/spinner";
+
+// Set NEXT_PUBLIC_GOOGLE_MAPS_API_KEY with the Places API (New) enabled to fetch
+// live suggestions. Without a key, the demo falls back to sample addresses.
+const GOOGLE_MAPS_API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? "";
+
+type AddressSuggestion = {
+  placeId: string;
+  text: string;
+  mainText: string;
+  secondaryText: string;
+};
+
+const sampleAddresses: AddressSuggestion[] = [
+  {
+    mainText: "1600 Amphitheatre Parkway",
+    secondaryText: "Mountain View, CA 94043, USA",
+  },
+  {
+    mainText: "1600 Pennsylvania Avenue NW",
+    secondaryText: "Washington, DC 20500, USA",
+  },
+  { mainText: "350 Fifth Avenue", secondaryText: "New York, NY 10118, USA" },
+  {
+    mainText: "221B Baker Street",
+    secondaryText: "London NW1 6XE, United Kingdom",
+  },
+  {
+    mainText: "Champ de Mars, 5 Avenue Anatole France",
+    secondaryText: "75007 Paris, France",
+  },
+  {
+    mainText: "Piazza del Colosseo, 1",
+    secondaryText: "00184 Roma RM, Italy",
+  },
+  { mainText: "Platz der Republik 1", secondaryText: "11011 Berlin, Germany" },
+  {
+    mainText: "1 Macquarie Street",
+    secondaryText: "Sydney NSW 2000, Australia",
+  },
+].map((address, index) => ({
+  ...address,
+  placeId: `sample-${index + 1}`,
+  text: `${address.mainText}, ${address.secondaryText}`,
+}));
+
+// A short-lived session token groups Autocomplete + Place Details requests
+// for billing.
+function newSessionToken() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return Math.random().toString(36).slice(2);
+}
+
+type PlacesAutocompleteResponse = {
+  suggestions?: {
+    placePrediction?: {
+      placeId?: string;
+      text?: { text?: string };
+      structuredFormat?: {
+        mainText?: { text?: string };
+        secondaryText?: { text?: string };
+      };
+    };
+  }[];
+};
+
+async function fetchAddressSuggestions(
+  query: string,
+  sessionToken: string,
+  signal: AbortSignal,
+): Promise<AddressSuggestion[]> {
+  const response = await fetch(
+    "https://places.googleapis.com/v1/places:autocomplete",
+    {
+      body: JSON.stringify({ input: query, sessionToken }),
+      headers: {
+        "Content-Type": "application/json",
+        "X-Goog-Api-Key": GOOGLE_MAPS_API_KEY,
+      },
+      method: "POST",
+      signal,
+    },
+  );
+  if (!response.ok) {
+    throw new Error("Places API request failed");
+  }
+  const data = (await response.json()) as PlacesAutocompleteResponse;
+  const suggestions: AddressSuggestion[] = [];
+  for (const suggestion of data.suggestions ?? []) {
+    const prediction = suggestion.placePrediction;
+    if (!prediction?.placeId) continue;
+    const text = prediction.text?.text ?? "";
+    suggestions.push({
+      mainText: prediction.structuredFormat?.mainText?.text ?? text,
+      placeId: prediction.placeId,
+      secondaryText: prediction.structuredFormat?.secondaryText?.text ?? "",
+      text,
+    });
+  }
+  return suggestions;
+}
+
+async function searchSampleAddresses(
+  query: string,
+): Promise<AddressSuggestion[]> {
+  await new Promise((resolve) =>
+    setTimeout(resolve, Math.random() * 500 + 100),
+  );
+  const lowerQuery = query.toLowerCase();
+  return sampleAddresses.filter((address) =>
+    address.text.toLowerCase().includes(lowerQuery),
+  );
+}
+
+export default function Particle() {
+  const [searchValue, setSearchValue] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [suggestions, setSuggestions] = useState<AddressSuggestion[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const sessionTokenRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const query = searchValue.trim();
+    if (!query) {
+      setSuggestions([]);
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    let ignore = false;
+    const controller = new AbortController();
+
+    const timeoutId = setTimeout(async () => {
+      try {
+        sessionTokenRef.current ??= newSessionToken();
+        const results = GOOGLE_MAPS_API_KEY
+          ? await fetchAddressSuggestions(
+              query,
+              sessionTokenRef.current,
+              controller.signal,
+            )
+          : await searchSampleAddresses(query);
+        if (!ignore) setSuggestions(results);
+      } catch {
+        if (!ignore && !controller.signal.aborted) {
+          setError("Could not load address suggestions. Please try again.");
+          setSuggestions([]);
+        }
+      } finally {
+        if (!ignore) setIsLoading(false);
+      }
+    }, 300);
+
+    return () => {
+      ignore = true;
+      controller.abort();
+      clearTimeout(timeoutId);
+    };
+  }, [searchValue]);
+
+  let status: ReactNode = `${suggestions.length} suggestion${suggestions.length === 1 ? "" : "s"} found`;
+  if (isLoading) {
+    status = (
+      <span className="flex items-center justify-between gap-2 text-muted-foreground">
+        Searching addresses...
+        <Spinner className="size-4.5 sm:size-4" />
+      </span>
+    );
+  } else if (error) {
+    status = (
+      <span className="font-normal text-destructive text-sm">{error}</span>
+    );
+  } else if (suggestions.length === 0 && searchValue) {
+    status = (
+      <span className="font-normal text-muted-foreground text-sm">
+        No addresses found for "{searchValue}"
+      </span>
+    );
+  }
+
+  const shouldRenderPopup = searchValue.trim() !== "";
+
+  return (
+    <Autocomplete
+      autoHighlight
+      filter={null}
+      items={suggestions}
+      itemToStringValue={(item: unknown) => (item as AddressSuggestion).text}
+      onValueChange={(value, eventDetails) => {
+        setSearchValue(value);
+        if (eventDetails.reason === "item-press") {
+          // Selecting a suggestion ends the billing session. In a real app,
+          // fetch the place details with the same token before resetting it.
+          sessionTokenRef.current = null;
+        }
+      }}
+      value={searchValue}
+    >
+      <AutocompleteInput
+        aria-label="Address"
+        autoComplete="off"
+        className="min-w-0 *:[input]:truncate"
+        placeholder="Enter an address"
+        startAddon={<MapPinIcon />}
+      />
+      {shouldRenderPopup && (
+        <AutocompletePopup
+          aria-busy={isLoading || undefined}
+          className="max-w-(--anchor-width) *:min-w-0"
+        >
+          <AutocompleteStatus className="text-muted-foreground">
+            {status}
+          </AutocompleteStatus>
+          <AutocompleteList>
+            {(suggestion: AddressSuggestion) => (
+              <AutocompleteItem key={suggestion.placeId} value={suggestion}>
+                <span className="flex w-full min-w-0 flex-col">
+                  <span className="truncate font-medium">
+                    {suggestion.mainText}
+                  </span>
+                  <span className="truncate text-muted-foreground text-xs">
+                    {suggestion.secondaryText}
+                  </span>
+                </span>
+              </AutocompleteItem>
+            )}
+          </AutocompleteList>
+        </AutocompletePopup>
+      )}
+    </Autocomplete>
+  );
+}
diff --git a/apps/ui/registry/registry-particles.ts b/apps/ui/registry/registry-particles.ts
index ae3a44deb..48a6c8db3 100644
--- a/apps/ui/registry/registry-particles.ts
+++ b/apps/ui/registry/registry-particles.ts
@@ -356,6 +356,21 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/autocomplete"],
     type: "registry:block",
   },
+  {
+    categories: categories("autocomplete", "input", "async", "search"),
+    dependencies: ["lucide-react"],
+    description: "Address autocomplete with Google Maps Places API",
+    files: [
+      { path: "particles/p-autocomplete-16.tsx", type: "registry:block" },
+    ],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64",
+    },
+    name: "p-autocomplete-16",
+    registryDependencies: ["@coss/autocomplete", "@coss/spinner"],
+    type: "registry:block",
+  },
   {
     categories: categories("avatar"),
     description: "Avatar with image and fallback",

From 96faac85e81aabad9e0a30b4d7f1561460ac79c1 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Mon, 13 Jul 2026 13:15:33 +0200
Subject: [PATCH 28/49] submit form implementation

---
 apps/ui/public/r/booker-1.json                |  17 +-
 apps/ui/public/r/cal-api.json                 |  10 +-
 apps/ui/public/r/registry.json                |   6 +
 apps/ui/registry.json                         |   6 +
 apps/ui/registry/__index__.tsx                |   6 +-
 apps/ui/registry/default/atoms/booker-1.tsx   |   6 +-
 .../atoms/booker/booker-confirm-form.tsx      | 212 +++++++++++++-
 .../default/atoms/booker/booker-labels.ts     |  14 +
 .../default/atoms/booker/location.tsx         |  86 +++++-
 .../default/atoms/lib/booker/actions.ts       | 264 +++++++++++++++++-
 .../atoms/lib/booker/booking-location.ts      |  32 +++
 .../default/atoms/lib/booker/target.ts        |  51 +++-
 .../default/atoms/lib/booker/use-booker.ts    |  60 +++-
 .../default/atoms/lib/booker/utils.ts         |  50 ++++
 .../registry/default/lib/cal-api/bookings.ts  |  13 +
 .../default/lib/cal-api/event-types.ts        |  18 +-
 apps/ui/registry/default/lib/cal-api/types.ts |  15 +-
 apps/ui/registry/registry-atoms.ts            |   1 +
 apps/ui/registry/registry-cal.ts              |   5 +
 19 files changed, 825 insertions(+), 47 deletions(-)
 create mode 100644 apps/ui/registry/default/atoms/lib/booker/booking-location.ts
 create mode 100644 apps/ui/registry/default/lib/cal-api/bookings.ts

diff --git a/apps/ui/public/r/booker-1.json b/apps/ui/public/r/booker-1.json
index 02954ea2d..d6e086d4d 100644
--- a/apps/ui/public/r/booker-1.json
+++ b/apps/ui/public/r/booker-1.json
@@ -17,6 +17,7 @@
     "@coss/empty",
     "@coss/field",
     "@coss/form",
+    "@coss/group",
     "@coss/input",
     "@coss/label",
     "@coss/popover",
@@ -30,13 +31,13 @@
   "files": [
     {
       "path": "registry/default/atoms/booker-1.tsx",
-      "content": "\"use client\";\n\nimport { CalendarIcon, Clock3Icon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerConfirmForm } from \"./booker/booker-confirm-form\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { BookerSteps } from \"./booker/booker-steps\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezoneDisplay, TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\nimport {\n  formatConfirmDateDetail,\n  formatConfirmTimeRange,\n  formatSelectedWeekday,\n} from \"@/lib/booker/utils\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({\n  initialData,\n  target,\n  timezone,\n  labels,\n  defaultFormValues,\n}: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const selectedDate = booker.timePickerProps.selectedDate;\n  const selectedTime = booker.selectedTime;\n  const showSelectedSlot =\n    booker.step === \"confirm\" && selectedDate != null && selectedTime != null;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div\n            className={cn(\n              \"flex flex-col gap-6 @5xl:p-6 p-4\",\n              displayMeta?.eventTypeImageUrl && \"relative -mt-11 @5xl:-mt-13\",\n            )}\n          >\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {showSelectedSlot ? (\n                  <div className=\"flex gap-2\">\n                    <CalendarIcon\n                      className=\"h-lh w-4.5 shrink-0 opacity-80 sm:w-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {formatSelectedWeekday(\n                        selectedDate,\n                        booker.calendarProps.locale,\n                      )}{\" \"}\n                      {formatConfirmDateDetail(\n                        selectedDate,\n                        booker.calendarProps.locale,\n                      )}{\" \"}\n                      {formatConfirmTimeRange(\n                        selectedTime,\n                        booker.durationProps.value,\n                        !booker.timePickerProps.is24Hour,\n                        booker.calendarProps.locale,\n                      )}\n                    </span>\n                  </div>\n                ) : null}\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"h-lh w-4.5 shrink-0 opacity-80 sm:w-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                {booker.step === \"select\" ? (\n                  <TimezonePicker {...booker.timezoneProps} />\n                ) : (\n                  <TimezoneDisplay value={booker.timezoneProps.value} />\n                )}\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <BookerSteps step={booker.step}>\n          {booker.step === \"select\" ? (\n            <div key=\"select\" className=\"flex w-full @3xl:flex-row flex-col\">\n              <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                <BookerCalendar {...booker.calendarProps} />\n              </div>\n              <TimePicker\n                labels={{\n                  hour12Short: t.hour12Short,\n                  hour24Short: t.hour24Short,\n                  noAvailableTimes: t.noAvailableTimes,\n                  noSlotsAvailable: t.noSlotsAvailable,\n                  noSlotsThisDay: t.noSlotsThisDay,\n                  noSlotsThisMonth: t.noSlotsThisMonth,\n                  use24Hour: t.use24Hour,\n                  viewFirstAvailability: t.viewFirstAvailability,\n                }}\n                {...booker.timePickerProps}\n              />\n            </div>\n          ) : (\n            <div\n              key=\"confirm\"\n              className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @5xl:p-6 p-4\"\n            >\n              <BookerConfirmForm\n                defaultEmail={\n                  typeof defaultFormValues?.email === \"string\"\n                    ? defaultFormValues.email\n                    : undefined\n                }\n                defaultName={\n                  typeof defaultFormValues?.name === \"string\"\n                    ? defaultFormValues.name\n                    : undefined\n                }\n                labels={t}\n                onBack={booker.onBack}\n              />\n            </div>\n          )}\n        </BookerSteps>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
+      "content": "\"use client\";\n\nimport { CalendarIcon, Clock3Icon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Card } from \"@/registry/default/ui/card\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { BookerAvatars } from \"./booker/booker-avatars\";\nimport { BookerCalendar } from \"./booker/booker-calendar\";\nimport { BookerConfirmForm } from \"./booker/booker-confirm-form\";\nimport { BookerErrorState } from \"./booker/booker-error-state\";\nimport { type BookerLabels, getBookerLabels } from \"./booker/booker-labels\";\nimport { BookerSteps } from \"./booker/booker-steps\";\nimport { DurationPicker } from \"./booker/duration-picker\";\nimport { EventDescription } from \"./booker/event-description\";\nimport { HeaderBanner } from \"./booker/header-banner\";\nimport { Location } from \"./booker/location\";\nimport { TimePicker } from \"./booker/time-picker\";\nimport { TimezoneDisplay, TimezonePicker } from \"./booker/timezone-picker\";\nimport type { BookerTarget } from \"@/lib/booker/target\";\nimport { type BookerInitialData, useBooker } from \"@/lib/booker/use-booker\";\nimport {\n  formatConfirmDateDetail,\n  formatConfirmTimeRange,\n  formatSelectedWeekday,\n} from \"@/lib/booker/utils\";\n\ntype BookerProps = {\n  target: BookerTarget;\n  timezone?: string;\n  initialData?: BookerInitialData;\n  defaultFormValues?: Record<string, unknown>;\n  onCreateBookingSuccess?: (data: unknown) => void;\n  labels?: Partial<BookerLabels>;\n};\n\nexport function Booker({\n  initialData,\n  target,\n  timezone,\n  labels,\n  defaultFormValues,\n  onCreateBookingSuccess,\n}: BookerProps) {\n  const t = getBookerLabels(labels);\n  const booker = useBooker({ initialData, target, timezone });\n\n  if (booker.error) {\n    return (\n      <BookerErrorState\n        error={booker.error}\n        labels={t}\n        onRetry={booker.retry}\n      />\n    );\n  }\n\n  const displayMeta = booker.meta;\n  const selectedDate = booker.timePickerProps.selectedDate;\n  const selectedTime = booker.confirmFormProps.selectedTime;\n  const showSelectedSlot =\n    booker.step === \"confirm\" && selectedDate != null && selectedTime != null;\n  const headerImageAlt = displayMeta\n    ? t.headerImageAlt(displayMeta.hostName, displayMeta.eventTypeTitle)\n    : \"Booker header\";\n\n  return (\n    <div\n      className=\"@container flex w-full flex-col items-center gap-4\"\n      aria-busy={booker.loadingState.busy}\n    >\n      <Card className=\"@max-3xl:w-full @3xl:flex-row @5xl:[--booker-side:--spacing(70)] [--booker-side:--spacing(56)]\">\n        {/* Meta */}\n        <div className=\"@3xl:w-(--booker-side) @3xl:border-e border-b @3xl:border-b-0\">\n          <HeaderBanner\n            alt={headerImageAlt}\n            src={displayMeta?.eventTypeImageUrl}\n          />\n          <div\n            className={cn(\n              \"flex flex-col gap-6 @5xl:p-6 p-4\",\n              displayMeta?.eventTypeImageUrl && \"relative -mt-11 @5xl:-mt-13\",\n            )}\n          >\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <BookerAvatars\n                  avatars={displayMeta?.hostAvatars}\n                  fallbackName={displayMeta?.hostName}\n                />\n                {displayMeta ? (\n                  <p className=\"font-medium text-muted-foreground sm:text-sm\">\n                    {displayMeta.hostName}\n                  </p>\n                ) : (\n                  <Skeleton className=\"my-0.5 h-5 w-24 sm:h-4\" />\n                )}\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                {displayMeta ? (\n                  <>\n                    <h1 className=\"font-heading @3xl:@max-5xl:text-lg text-xl\">\n                      {displayMeta.eventTypeTitle}\n                    </h1>\n                    <EventDescription\n                      description={displayMeta.eventTypeDescription}\n                    />\n                  </>\n                ) : (\n                  <>\n                    <Skeleton className=\"my-0.5 h-6 w-36\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                    <Skeleton className=\"my-0.5 h-4 w-full\" />\n                  </>\n                )}\n              </div>\n            </div>\n\n            {displayMeta ? (\n              <div className=\"flex flex-col gap-3 sm:text-sm\">\n                {showSelectedSlot ? (\n                  <div className=\"flex gap-2\">\n                    <CalendarIcon\n                      className=\"h-lh w-4.5 shrink-0 opacity-80 sm:w-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {formatSelectedWeekday(\n                        selectedDate,\n                        booker.calendarProps.locale,\n                      )}{\" \"}\n                      {formatConfirmDateDetail(\n                        selectedDate,\n                        booker.calendarProps.locale,\n                      )}{\" \"}\n                      {formatConfirmTimeRange(\n                        selectedTime,\n                        booker.durationProps.value,\n                        !booker.timePickerProps.is24Hour,\n                        booker.calendarProps.locale,\n                      )}\n                    </span>\n                  </div>\n                ) : null}\n                {displayMeta.eventTypeDurationOptions ? (\n                  <DurationPicker\n                    formatLabel={t.durationMinutes}\n                    options={displayMeta.eventTypeDurationOptions}\n                    {...booker.durationProps}\n                  />\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Clock3Icon\n                      className=\"h-lh w-4.5 shrink-0 opacity-80 sm:w-4\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>\n                      {displayMeta.eventTypeDurationMinutes\n                        ? t.durationMinutes(\n                            displayMeta.eventTypeDurationMinutes,\n                          )\n                        : t.durationUnknown}\n                    </span>\n                  </div>\n                )}\n                <Location\n                  labels={{\n                    locationOptions: t.locationOptions,\n                    selectOnNextStep: t.locationSelectOnNextStep,\n                  }}\n                  locations={displayMeta.eventTypeLocations}\n                />\n                {booker.step === \"select\" ? (\n                  <TimezonePicker {...booker.timezoneProps} />\n                ) : (\n                  <TimezoneDisplay value={booker.timezoneProps.value} />\n                )}\n              </div>\n            ) : (\n              <div className=\"flex flex-col gap-1\">\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n                <Skeleton className=\"my-0.5 h-4 w-36\" />\n              </div>\n            )}\n          </div>\n        </div>\n        <BookerSteps step={booker.step}>\n          {booker.step === \"select\" ? (\n            <div key=\"select\" className=\"flex w-full @3xl:flex-row flex-col\">\n              <div className=\"flex @3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 flex-col items-center @3xl:@max-5xl:px-2 px-4 @3xl:@max-5xl:py-2 pt-3 pb-4\">\n                <BookerCalendar {...booker.calendarProps} />\n              </div>\n              <TimePicker\n                labels={{\n                  hour12Short: t.hour12Short,\n                  hour24Short: t.hour24Short,\n                  noAvailableTimes: t.noAvailableTimes,\n                  noSlotsAvailable: t.noSlotsAvailable,\n                  noSlotsThisDay: t.noSlotsThisDay,\n                  noSlotsThisMonth: t.noSlotsThisMonth,\n                  use24Hour: t.use24Hour,\n                  viewFirstAvailability: t.viewFirstAvailability,\n                }}\n                {...booker.timePickerProps}\n              />\n            </div>\n          ) : (\n            <div\n              key=\"confirm\"\n              className=\"@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @5xl:p-6 p-4\"\n            >\n              <BookerConfirmForm\n                {...booker.confirmFormProps}\n                defaultEmail={\n                  typeof defaultFormValues?.email === \"string\"\n                    ? defaultFormValues.email\n                    : undefined\n                }\n                defaultName={\n                  typeof defaultFormValues?.name === \"string\"\n                    ? defaultFormValues.name\n                    : undefined\n                }\n                labels={t}\n                onSuccess={onCreateBookingSuccess}\n              />\n            </div>\n          )}\n        </BookerSteps>\n      </Card>\n      <a\n        href=\"https://cal.com\"\n        className=\"font-heading text-xl\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        Cal.com\n      </a>\n    </div>\n  );\n}\n\nexport default Booker;\n",
       "type": "registry:block",
       "target": "components/atoms/booker-1.tsx"
     },
     {
       "path": "registry/default/atoms/booker/booker-confirm-form.tsx",
-      "content": "\"use client\";\n\nimport { UserPlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\nimport type { BookerLabels } from \"./booker-labels\";\n\ntype BookerConfirmFormProps = {\n  defaultEmail?: string;\n  defaultName?: string;\n  labels: BookerLabels;\n  onBack: () => void;\n};\n\nfunction RequiredMark() {\n  return <span className=\"text-destructive-foreground\">*</span>;\n}\n\nexport function BookerConfirmForm({\n  defaultEmail,\n  defaultName,\n  labels,\n  onBack,\n}: BookerConfirmFormProps) {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Form\n        className=\"flex flex-col gap-4\"\n        onFormSubmit={() => {\n          // Booking submission to be wired.\n        }}\n      >\n        <Field name=\"name\">\n          <FieldLabel>\n            {labels.confirmYourName} <RequiredMark />\n          </FieldLabel>\n          <Input autoFocus defaultValue={defaultName} required type=\"text\" />\n          <FieldError>{labels.confirmNameError}</FieldError>\n        </Field>\n\n        <Field name=\"email\">\n          <FieldLabel>\n            {labels.confirmEmail} <RequiredMark />\n          </FieldLabel>\n          <Input\n            autoComplete=\"email\"\n            defaultValue={defaultEmail}\n            required\n            type=\"email\"\n          />\n          <FieldError>{labels.confirmEmailError}</FieldError>\n        </Field>\n\n        <Field name=\"notes\">\n          <FieldLabel>{labels.confirmNotes}</FieldLabel>\n          <Textarea placeholder={labels.confirmNotesPlaceholder} rows={3} />\n        </Field>\n\n        <Button className=\"self-start\" type=\"button\" variant=\"ghost\">\n          <UserPlusIcon aria-hidden=\"true\" />\n          {labels.confirmAddGuests}\n        </Button>\n\n        <p className=\"text-muted-foreground text-xs\">\n          {labels.confirmTermsPrefix}{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/terms\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmTerms}\n          </a>{\" \"}\n          and{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/privacy\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmPrivacyPolicy}\n          </a>\n          .\n        </p>\n\n        <div className=\"flex justify-end gap-2 pt-1\">\n          <Button onClick={onBack} type=\"button\" variant=\"ghost\">\n            {labels.confirmBack}\n          </Button>\n          <Button type=\"submit\">{labels.confirmSubmit}</Button>\n        </div>\n      </Form>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { UserPlusIcon, XIcon } from \"lucide-react\";\nimport type { FormEvent } from \"react\";\nimport { useRef, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Group } from \"@/registry/default/ui/group\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\nimport type { BookerLabels } from \"./booker-labels\";\nimport { getLocationOptionValue, LocationPicker } from \"./location\";\nimport { createBookingAction } from \"@/lib/booker/actions\";\nimport type { BookerConfirmFormContext } from \"@/lib/booker/use-booker\";\nimport { toCalendarDateKey } from \"@/lib/booker/utils\";\nimport type { Booking } from \"@/lib/cal-api/types\";\n\nexport type BookerConfirmFormProps = BookerConfirmFormContext & {\n  defaultEmail?: string;\n  defaultName?: string;\n  labels: BookerLabels;\n  onSuccess?: (booking: Booking) => void;\n};\n\nfunction RequiredMark() {\n  return <span className=\"text-destructive-foreground\">*</span>;\n}\n\nfunction getDefaultLocationProvider(\n  locations: BookerConfirmFormContext[\"locations\"],\n): string {\n  const location = locations?.[0];\n  if (!location) {\n    return \"\";\n  }\n\n  return location.provider || getLocationOptionValue(location, 0);\n}\n\nexport function BookerConfirmForm({\n  defaultEmail,\n  defaultName,\n  disableGuests = false,\n  durationMinutes,\n  includeLengthInMinutes,\n  labels,\n  locale,\n  locations = [],\n  onBack,\n  onSuccess,\n  selectedDate,\n  selectedTime,\n  target,\n  timeZone,\n}: BookerConfirmFormProps) {\n  const nextGuestIdRef = useRef(0);\n  const [guestIds, setGuestIds] = useState<number[]>([]);\n  const [locationProvider, setLocationProvider] = useState(() =>\n    getDefaultLocationProvider(locations),\n  );\n  const [submitting, setSubmitting] = useState(false);\n  const [submitError, setSubmitError] = useState<string | null>(null);\n  const [successBooking, setSuccessBooking] = useState<Booking | null>(null);\n\n  const resolvedLocationProvider =\n    locations.length > 1\n      ? locationProvider || getDefaultLocationProvider(locations)\n      : getDefaultLocationProvider(locations);\n\n  const handleAddGuest = () => {\n    const id = nextGuestIdRef.current;\n    nextGuestIdRef.current += 1;\n    setGuestIds((current) => [...current, id]);\n  };\n\n  const handleRemoveGuest = (id: number) => {\n    setGuestIds((current) => current.filter((guestId) => guestId !== id));\n  };\n\n  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setSubmitError(null);\n\n    if (!selectedDate || !selectedTime) {\n      setSubmitError(labels.confirmError);\n      return;\n    }\n\n    const formData = new FormData(event.currentTarget);\n    const name = String(formData.get(\"name\") ?? \"\").trim();\n    const email = String(formData.get(\"email\") ?? \"\").trim();\n    const notes = String(formData.get(\"notes\") ?? \"\").trim();\n    const guests = formData\n      .getAll(\"guests\")\n      .map((value) => String(value).trim())\n      .filter(Boolean);\n\n    if (!name || !email) {\n      return;\n    }\n\n    setSubmitting(true);\n\n    try {\n      const result = await createBookingAction({\n        email,\n        guests: guests.length > 0 ? guests : undefined,\n        ...(includeLengthInMinutes && durationMinutes\n          ? { lengthInMinutes: durationMinutes }\n          : {}),\n        locale,\n        locationProvider: resolvedLocationProvider || undefined,\n        name,\n        notes: notes || undefined,\n        selectedDateKey: toCalendarDateKey(selectedDate),\n        selectedTime,\n        target,\n        timeZone,\n      });\n\n      if (!result.ok) {\n        setSubmitError(result.error || labels.confirmError);\n        return;\n      }\n\n      setSuccessBooking(result.booking);\n      onSuccess?.(result.booking);\n    } catch {\n      setSubmitError(labels.confirmError);\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  if (successBooking) {\n    return (\n      <div className=\"flex flex-col gap-4\">\n        <p className=\"font-medium text-base sm:text-sm\">\n          {labels.confirmSuccess}\n        </p>\n        {successBooking.meetingUrl ? (\n          <p className=\"text-muted-foreground text-sm\">\n            <a\n              className=\"text-foreground underline-offset-4 hover:underline\"\n              href={successBooking.meetingUrl}\n              rel=\"noreferrer\"\n              target=\"_blank\"\n            >\n              {successBooking.meetingUrl}\n            </a>\n          </p>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Form className=\"flex flex-col gap-4\" onSubmit={handleSubmit}>\n        <Field name=\"name\">\n          <FieldLabel>\n            {labels.confirmYourName} <RequiredMark />\n          </FieldLabel>\n          <Input autoFocus defaultValue={defaultName} required type=\"text\" />\n          <FieldError>{labels.confirmNameError}</FieldError>\n        </Field>\n\n        <Field name=\"email\">\n          <FieldLabel>\n            {labels.confirmEmail} <RequiredMark />\n          </FieldLabel>\n          <Input\n            autoComplete=\"email\"\n            defaultValue={defaultEmail}\n            required\n            type=\"email\"\n          />\n          <FieldError>{labels.confirmEmailError}</FieldError>\n        </Field>\n\n        <LocationPicker\n          label={labels.confirmLocation}\n          locations={locations}\n          onValueChange={setLocationProvider}\n        />\n\n        <Field name=\"notes\">\n          <FieldLabel>{labels.confirmNotes}</FieldLabel>\n          <Textarea placeholder={labels.confirmNotesPlaceholder} rows={3} />\n        </Field>\n\n        {guestIds.length > 0 ? (\n          <div className=\"flex flex-col gap-2\">\n            {guestIds.map((guestId) => (\n              <Group\n                key={guestId}\n                aria-label={labels.confirmGuestEmail}\n                className=\"w-full gap-2\"\n              >\n                <Input\n                  aria-label={labels.confirmGuestEmail}\n                  className=\"flex-1\"\n                  name=\"guests\"\n                  placeholder={labels.confirmGuestEmailPlaceholder}\n                  type=\"email\"\n                />\n                <div>\n                  <Button\n                    aria-label={labels.confirmRemoveGuest}\n                    onClick={() => handleRemoveGuest(guestId)}\n                    size=\"icon\"\n                    type=\"button\"\n                    variant=\"outline\"\n                  >\n                    <XIcon aria-hidden=\"true\" />\n                  </Button>\n                </div>\n              </Group>\n            ))}\n          </div>\n        ) : null}\n\n        {!disableGuests ? (\n          <Button\n            className=\"h-auto! self-start px-0.5\"\n            onClick={handleAddGuest}\n            type=\"button\"\n            variant=\"link\"\n          >\n            <UserPlusIcon aria-hidden=\"true\" />\n            {labels.confirmAddGuests}\n          </Button>\n        ) : null}\n\n        {submitError ? (\n          <p className=\"text-destructive-foreground text-xs\" role=\"alert\">\n            {submitError}\n          </p>\n        ) : null}\n\n        <p className=\"text-muted-foreground text-xs\">\n          {labels.confirmTermsPrefix}{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/terms\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmTerms}\n          </a>{\" \"}\n          and{\" \"}\n          <a\n            className=\"text-foreground underline-offset-4 hover:underline\"\n            href=\"https://cal.com/privacy\"\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            {labels.confirmPrivacyPolicy}\n          </a>\n          .\n        </p>\n\n        <div className=\"flex justify-end gap-2 pt-1\">\n          <Button\n            disabled={submitting}\n            onClick={onBack}\n            type=\"button\"\n            variant=\"ghost\"\n          >\n            {labels.confirmBack}\n          </Button>\n          <Button loading={submitting} type=\"submit\">\n            {submitting ? labels.confirmSubmitting : labels.confirmSubmit}\n          </Button>\n        </div>\n      </Form>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/booker-confirm-form.tsx"
     },
@@ -72,13 +73,13 @@
     },
     {
       "path": "registry/default/atoms/booker/booker-labels.ts",
-      "content": "export type BookerLabels = {\n  errorNotFound: string;\n  errorUnpublished: string;\n  errorNetwork: string;\n  errorGeneric: string;\n  retry: string;\n  durationUnknown: string;\n  durationMinutes: (minutes: number) => string;\n  noAvailableTimes: string;\n  noSlotsAvailable: string;\n  noSlotsThisDay: string;\n  noSlotsThisMonth: string;\n  viewFirstAvailability: string;\n  use24Hour: string;\n  hour12Short: string;\n  hour24Short: string;\n  headerImageAlt: (hostName: string, eventTitle: string) => string;\n  locationOptions: (count: number) => string;\n  locationSelectOnNextStep: string;\n  confirmYourName: string;\n  confirmEmail: string;\n  confirmNameError: string;\n  confirmEmailError: string;\n  confirmNotes: string;\n  confirmNotesPlaceholder: string;\n  confirmAddGuests: string;\n  confirmBack: string;\n  confirmSubmit: string;\n  confirmTermsPrefix: string;\n  confirmTerms: string;\n  confirmPrivacyPolicy: string;\n};\n\nconst DEFAULT_BOOKER_LABELS: BookerLabels = {\n  errorNotFound: \"This event type could not be found.\",\n  errorUnpublished:\n    \"This event type is not currently published and is not accepting bookings.\",\n  errorNetwork: \"Unable to connect. Please check your internet connection.\",\n  errorGeneric: \"Something went wrong loading the booker.\",\n  retry: \"Try again\",\n  durationUnknown: \"Unknown\",\n  durationMinutes: (minutes) => `${minutes} min`,\n  noAvailableTimes: \"No available times\",\n  noSlotsAvailable: \"There are no open slots.\",\n  noSlotsThisDay: \"There are no open slots on this day.\",\n  noSlotsThisMonth: \"There are no open slots this month.\",\n  viewFirstAvailability: \"View first availability\",\n  use24Hour: \"Use 24-hour time\",\n  hour12Short: \"12h\",\n  hour24Short: \"24h\",\n  headerImageAlt: (hostName, eventTitle) =>\n    `Banner for ${eventTitle} with ${hostName}`,\n  locationOptions: (count) => `${count} location options`,\n  locationSelectOnNextStep: \"Select on the next step\",\n  confirmYourName: \"Your name\",\n  confirmEmail: \"Email address\",\n  confirmNameError: \"Please enter your name.\",\n  confirmEmailError: \"Please enter a valid email address.\",\n  confirmNotes: \"Additional notes\",\n  confirmNotesPlaceholder:\n    \"Please share anything that will help prepare for our meeting.\",\n  confirmAddGuests: \"Add guests\",\n  confirmBack: \"Back\",\n  confirmSubmit: \"Confirm\",\n  confirmTermsPrefix: \"By proceeding, you agree to Cal.com's\",\n  confirmTerms: \"Terms\",\n  confirmPrivacyPolicy: \"Privacy Policy\",\n};\n\nexport function getBookerLabels(labels?: Partial<BookerLabels>): BookerLabels {\n  return { ...DEFAULT_BOOKER_LABELS, ...labels };\n}\n",
+      "content": "export type BookerLabels = {\n  errorNotFound: string;\n  errorUnpublished: string;\n  errorNetwork: string;\n  errorGeneric: string;\n  retry: string;\n  durationUnknown: string;\n  durationMinutes: (minutes: number) => string;\n  noAvailableTimes: string;\n  noSlotsAvailable: string;\n  noSlotsThisDay: string;\n  noSlotsThisMonth: string;\n  viewFirstAvailability: string;\n  use24Hour: string;\n  hour12Short: string;\n  hour24Short: string;\n  headerImageAlt: (hostName: string, eventTitle: string) => string;\n  locationOptions: (count: number) => string;\n  locationSelectOnNextStep: string;\n  confirmYourName: string;\n  confirmEmail: string;\n  confirmNameError: string;\n  confirmEmailError: string;\n  confirmNotes: string;\n  confirmNotesPlaceholder: string;\n  confirmLocation: string;\n  confirmGuestEmail: string;\n  confirmGuestEmailPlaceholder: string;\n  confirmRemoveGuest: string;\n  confirmAddGuests: string;\n  confirmBack: string;\n  confirmSubmit: string;\n  confirmSubmitting: string;\n  confirmError: string;\n  confirmSuccess: string;\n  confirmTermsPrefix: string;\n  confirmTerms: string;\n  confirmPrivacyPolicy: string;\n};\n\nconst DEFAULT_BOOKER_LABELS: BookerLabels = {\n  errorNotFound: \"This event type could not be found.\",\n  errorUnpublished:\n    \"This event type is not currently published and is not accepting bookings.\",\n  errorNetwork: \"Unable to connect. Please check your internet connection.\",\n  errorGeneric: \"Something went wrong loading the booker.\",\n  retry: \"Try again\",\n  durationUnknown: \"Unknown\",\n  durationMinutes: (minutes) => `${minutes} min`,\n  noAvailableTimes: \"No available times\",\n  noSlotsAvailable: \"There are no open slots.\",\n  noSlotsThisDay: \"There are no open slots on this day.\",\n  noSlotsThisMonth: \"There are no open slots this month.\",\n  viewFirstAvailability: \"View first availability\",\n  use24Hour: \"Use 24-hour time\",\n  hour12Short: \"12h\",\n  hour24Short: \"24h\",\n  headerImageAlt: (hostName, eventTitle) =>\n    `Banner for ${eventTitle} with ${hostName}`,\n  locationOptions: (count) => `${count} location options`,\n  locationSelectOnNextStep: \"Select on the next step\",\n  confirmYourName: \"Your name\",\n  confirmEmail: \"Email address\",\n  confirmNameError: \"Please enter your name.\",\n  confirmEmailError: \"Please enter a valid email address.\",\n  confirmNotes: \"Additional notes\",\n  confirmNotesPlaceholder:\n    \"Please share anything that will help prepare for our meeting.\",\n  confirmLocation: \"Location\",\n  confirmGuestEmail: \"Guest email\",\n  confirmGuestEmailPlaceholder: \"guest@example.com\",\n  confirmRemoveGuest: \"Remove guest\",\n  confirmAddGuests: \"Add guests\",\n  confirmBack: \"Back\",\n  confirmSubmit: \"Confirm\",\n  confirmSubmitting: \"Confirming…\",\n  confirmError: \"Could not create booking. Please try again.\",\n  confirmSuccess: \"Booking confirmed\",\n  confirmTermsPrefix: \"By proceeding, you agree to Cal.com's\",\n  confirmTerms: \"Terms\",\n  confirmPrivacyPolicy: \"Privacy Policy\",\n};\n\nexport function getBookerLabels(labels?: Partial<BookerLabels>): BookerLabels {\n  return { ...DEFAULT_BOOKER_LABELS, ...labels };\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/booker-labels.ts"
     },
     {
       "path": "registry/default/atoms/booker/location.tsx",
-      "content": "\"use client\";\n\nimport { ExternalLinkIcon, MapPinIcon } from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\nimport {\n  Popover,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport type { EventTypeLocationOption } from \"@/lib/booker/utils\";\n\ntype LocationLabels = {\n  locationOptions: (count: number) => string;\n  selectOnNextStep: string;\n};\n\ntype LocationProps = {\n  locations: EventTypeLocationOption[];\n  labels: LocationLabels;\n};\n\nconst PROVIDER_ICON_MAP: Record<string, string> = {\n  \"cal-video\": \"https://app.cal.com/app-store/dailyvideo/icon.svg\",\n  \"daily-video\": \"https://app.cal.com/app-store/dailyvideo/icon.svg\",\n  \"google-meet\": \"https://i.cal.com/app-store/googlevideo/logo.webp\",\n  \"huddle01-video\": \"/app-store/huddle01video/icon.svg\",\n  \"microsoft-teams\": \"/app-store/office365video/icon.svg\",\n  conferencing: \"external-link\",\n  jitsi: \"/app-store/jitsivideo/icon.svg\",\n  organizersdefaultapp: \"external-link\",\n  whereby: \"/app-store/whereby/icon-dark.svg\",\n  zoom: \"/app-store/zoomvideo/icon.svg\",\n};\n\nfunction normalizeIconUrl(value: string): string {\n  if (value.startsWith(\"http://\") || value.startsWith(\"https://\")) {\n    return value;\n  }\n\n  if (value.startsWith(\"/\")) {\n    return `https://app.cal.com${value}`;\n  }\n\n  return value;\n}\n\nfunction resolveProviderIcons(provider?: string): string[] {\n  if (!provider) {\n    return [];\n  }\n\n  const normalized = provider.trim().toLowerCase();\n  if (!normalized) {\n    return [];\n  }\n\n  const appStoreSlugs = new Set<string>([\n    normalized,\n    normalized.replaceAll(\"-\", \"\"),\n  ]);\n  if (normalized.endsWith(\"-video\")) {\n    appStoreSlugs.add(normalized.replace(/-video$/, \"video\"));\n  }\n\n  return Array.from(\n    new Set([\n      PROVIDER_ICON_MAP[normalized],\n      ...Array.from(\n        appStoreSlugs,\n        (slug) => `https://app.cal.com/app-store/${slug}/icon.svg`,\n      ),\n    ]),\n  )\n    .filter((url): url is string => Boolean(url))\n    .map(normalizeIconUrl);\n}\n\nfunction LocationIcon({ provider }: { provider?: string }) {\n  const iconUrls = useMemo(() => resolveProviderIcons(provider), [provider]);\n  const [failedIconUrls, setFailedIconUrls] = useState<Set<string>>(\n    () => new Set(),\n  );\n  const iconUrl =\n    iconUrls.find((candidate) => !failedIconUrls.has(candidate)) ?? \"\";\n\n  if (iconUrl) {\n    if (iconUrl === \"external-link\") {\n      return (\n        <ExternalLinkIcon\n          className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n          aria-hidden=\"true\"\n        />\n      );\n    }\n\n    return (\n      <img\n        alt=\"\"\n        aria-hidden=\"true\"\n        className=\"size-4.5 shrink-0 sm:size-4\"\n        onError={() => setFailedIconUrls((prev) => new Set(prev).add(iconUrl))}\n        src={iconUrl}\n      />\n    );\n  }\n\n  return (\n    <MapPinIcon\n      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n      aria-hidden=\"true\"\n    />\n  );\n}\n\nfunction LocationRow({ label, provider }: EventTypeLocationOption) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <LocationIcon provider={provider} />\n      <span>{label}</span>\n    </div>\n  );\n}\n\nexport function Location({ locations, labels }: LocationProps) {\n  if (locations.length <= 1) {\n    const location = locations[0];\n    return location ? <LocationRow {...location} /> : null;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        aria-label={labels.locationOptions(locations.length)}\n        className=\"flex w-fit items-center gap-2 decoration-current/32 decoration-dotted underline-offset-2 hover:text-foreground hover:underline\"\n        openOnHover\n        delay={0}\n      >\n        <MapPinIcon className=\"h-lh w-4.5 shrink-0 opacity-80 sm:w-4\" />\n        <span>{labels.locationOptions(locations.length)}</span>\n      </PopoverTrigger>\n      <PopoverPopup align=\"start\" side=\"top\" className=\"*:p-3\">\n        <PopoverDescription className=\"mb-2 font-medium text-muted-foreground text-xs\">\n          {labels.selectOnNextStep}\n        </PopoverDescription>\n        <ul className=\"flex flex-col gap-2\">\n          {locations.map((location, index) => (\n            <li\n              className=\"flex items-center gap-2 font-medium text-xs\"\n              key={`${location.label}-${location.provider}-${index}`}\n            >\n              <LocationIcon provider={location.provider} />\n              <span>{location.label}</span>\n            </li>\n          ))}\n        </ul>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { ExternalLinkIcon, MapPinIcon } from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport {\n  Popover,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport type { EventTypeLocationOption } from \"@/lib/booker/utils\";\n\ntype LocationLabels = {\n  locationOptions: (count: number) => string;\n  selectOnNextStep: string;\n};\n\ntype LocationProps = {\n  locations: EventTypeLocationOption[];\n  labels: LocationLabels;\n};\n\nconst PROVIDER_ICON_MAP: Record<string, string> = {\n  \"cal-video\": \"https://app.cal.com/app-store/dailyvideo/icon.svg\",\n  \"daily-video\": \"https://app.cal.com/app-store/dailyvideo/icon.svg\",\n  \"google-meet\": \"https://i.cal.com/app-store/googlevideo/logo.webp\",\n  \"huddle01-video\": \"/app-store/huddle01video/icon.svg\",\n  \"microsoft-teams\": \"/app-store/office365video/icon.svg\",\n  conferencing: \"external-link\",\n  jitsi: \"/app-store/jitsivideo/icon.svg\",\n  organizersdefaultapp: \"external-link\",\n  whereby: \"/app-store/whereby/icon-dark.svg\",\n  zoom: \"/app-store/zoomvideo/icon.svg\",\n};\n\nfunction normalizeIconUrl(value: string): string {\n  if (value.startsWith(\"http://\") || value.startsWith(\"https://\")) {\n    return value;\n  }\n\n  if (value.startsWith(\"/\")) {\n    return `https://app.cal.com${value}`;\n  }\n\n  return value;\n}\n\nfunction resolveProviderIcons(provider?: string): string[] {\n  if (!provider) {\n    return [];\n  }\n\n  const normalized = provider.trim().toLowerCase();\n  if (!normalized) {\n    return [];\n  }\n\n  const appStoreSlugs = new Set<string>([\n    normalized,\n    normalized.replaceAll(\"-\", \"\"),\n  ]);\n  if (normalized.endsWith(\"-video\")) {\n    appStoreSlugs.add(normalized.replace(/-video$/, \"video\"));\n  }\n\n  return Array.from(\n    new Set([\n      PROVIDER_ICON_MAP[normalized],\n      ...Array.from(\n        appStoreSlugs,\n        (slug) => `https://app.cal.com/app-store/${slug}/icon.svg`,\n      ),\n    ]),\n  )\n    .filter((url): url is string => Boolean(url))\n    .map(normalizeIconUrl);\n}\n\nexport function LocationIcon({ provider }: { provider?: string }) {\n  const iconUrls = useMemo(() => resolveProviderIcons(provider), [provider]);\n  const [failedIconUrls, setFailedIconUrls] = useState<Set<string>>(\n    () => new Set(),\n  );\n  const iconUrl =\n    iconUrls.find((candidate) => !failedIconUrls.has(candidate)) ?? \"\";\n\n  if (iconUrl) {\n    if (iconUrl === \"external-link\") {\n      return (\n        <ExternalLinkIcon\n          className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n          aria-hidden=\"true\"\n        />\n      );\n    }\n\n    return (\n      <img\n        alt=\"\"\n        aria-hidden=\"true\"\n        className=\"size-4.5 shrink-0 sm:size-4\"\n        onError={() => setFailedIconUrls((prev) => new Set(prev).add(iconUrl))}\n        src={iconUrl}\n      />\n    );\n  }\n\n  return (\n    <MapPinIcon\n      className=\"size-4.5 shrink-0 opacity-80 sm:size-4\"\n      aria-hidden=\"true\"\n    />\n  );\n}\n\nexport function LocationRow({ label, provider }: EventTypeLocationOption) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <LocationIcon provider={provider} />\n      <span>{label}</span>\n    </div>\n  );\n}\n\nexport function getLocationOptionValue(\n  location: EventTypeLocationOption,\n  index: number,\n): string {\n  return location.provider || `${location.label}-${index}`;\n}\n\ntype LocationSelectItem = EventTypeLocationOption & {\n  value: string;\n};\n\ntype LocationPickerProps = {\n  locations: EventTypeLocationOption[];\n  label: string;\n  onValueChange?: (provider: string) => void;\n};\n\nfunction LocationSelectOption({ label, provider }: LocationSelectItem) {\n  return (\n    <span className=\"flex items-center gap-2\">\n      <LocationIcon provider={provider} />\n      <span className=\"truncate\">{label}</span>\n    </span>\n  );\n}\n\nexport function LocationPicker({\n  locations,\n  label,\n  onValueChange,\n}: LocationPickerProps) {\n  const items = useMemo(\n    (): LocationSelectItem[] =>\n      locations.map((location, index) => ({\n        ...location,\n        value: getLocationOptionValue(location, index),\n      })),\n    [locations],\n  );\n\n  if (items.length <= 1) {\n    return null;\n  }\n\n  return (\n    <Field name=\"location\">\n      <FieldLabel>{label}</FieldLabel>\n      <Select\n        aria-label={label}\n        defaultValue={items[0]}\n        itemToStringValue={(item) => item.value}\n        onValueChange={(item) => {\n          if (item) {\n            onValueChange?.(item.provider || item.value);\n          }\n        }}\n      >\n        <SelectTrigger>\n          <SelectValue>\n            {(item) => <LocationSelectOption {...item} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectPopup>\n          {items.map((item) => (\n            <SelectItem key={item.value} value={item}>\n              <LocationSelectOption {...item} />\n            </SelectItem>\n          ))}\n        </SelectPopup>\n      </Select>\n    </Field>\n  );\n}\n\nexport function Location({ locations, labels }: LocationProps) {\n  if (locations.length <= 1) {\n    const location = locations[0];\n    return location ? <LocationRow {...location} /> : null;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        aria-label={labels.locationOptions(locations.length)}\n        className=\"flex w-fit items-center gap-2 decoration-current/32 decoration-dotted underline-offset-2 hover:text-foreground hover:underline\"\n        openOnHover\n        delay={0}\n      >\n        <MapPinIcon className=\"h-lh w-4.5 shrink-0 opacity-80 sm:w-4\" />\n        <span>{labels.locationOptions(locations.length)}</span>\n      </PopoverTrigger>\n      <PopoverPopup align=\"start\" side=\"top\" className=\"*:p-3\">\n        <PopoverDescription className=\"mb-2 font-medium text-muted-foreground text-xs\">\n          {labels.selectOnNextStep}\n        </PopoverDescription>\n        <ul className=\"flex flex-col gap-2\">\n          {locations.map((location, index) => (\n            <li\n              className=\"flex items-center gap-2 font-medium text-xs\"\n              key={`${location.label}-${location.provider}-${index}`}\n            >\n              <LocationIcon provider={location.provider} />\n              <span>{location.label}</span>\n            </li>\n          ))}\n        </ul>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/atoms/booker/location.tsx"
     },
@@ -108,25 +109,25 @@
     },
     {
       "path": "registry/default/atoms/lib/booker/actions.ts",
-      "content": "\"use server\";\n\nimport {\n  type BookerTarget,\n  getDynamicContext,\n  getOrgSlugFromTarget,\n  getPublicEventBannerParamsFromTarget,\n  getUserSlotParamsFromTarget,\n  parseBookingUrlTarget,\n} from \"@/lib/booker/target\";\nimport { CalApiError } from \"@/lib/cal-api/client\";\nimport {\n  getDynamicEventType,\n  getEventType,\n  getEventTypeById,\n  getTeamEventType,\n  getTeamSlugEventType,\n} from \"@/lib/cal-api/event-types\";\nimport { getPublicEventInfo } from \"@/lib/cal-api/public-event\";\nimport { getAvailableSlots } from \"@/lib/cal-api/slots\";\nimport type { EventType } from \"@/lib/cal-api/types\";\n\nexport type FetchRawBookerInput = {\n  monthIso: string;\n  timeZone: string;\n  target: BookerTarget;\n  monthsToFetch?: number;\n  eventTypeId?: number;\n  fetchMeta?: boolean;\n  durationMinutes?: number;\n};\n\ntype ResolvedEventType = {\n  eventTypeId: number | null;\n  eventTypeSlug: string | null;\n  dynamic?: {\n    orgId?: number;\n    orgSlug?: string;\n    usernames: string[];\n  };\n};\n\nexport type FetchRawBookerResult =\n  | {\n      ok: true;\n      raw: {\n        me: unknown;\n        eventTypes: unknown;\n        selectedEventType: unknown | null;\n        bannerUrl: string;\n        publicDisplayName: string;\n        slots: unknown;\n      };\n      resolved: ResolvedEventType;\n    }\n  | {\n      ok: false;\n      error: string;\n      errorCode?: string;\n    };\n\nfunction buildMePayload(target: BookerTarget, eventType: EventType): unknown {\n  const owner = eventType.users?.[0] ?? eventType.hosts?.[0];\n  const dynamicContext = getDynamicContext(target);\n  const fallbackName =\n    target.type === \"user\"\n      ? target.username\n      : dynamicContext\n        ? dynamicContext.usernames.join(\" + \")\n        : (owner?.username ?? \"Unknown user\");\n\n  return {\n    data: {\n      avatarUrl: owner?.avatarUrl,\n      name: owner?.name ?? fallbackName,\n      username: owner?.username ?? fallbackName,\n    },\n  };\n}\n\nfunction buildSlotRange(monthIso: string, monthsToFetch: number) {\n  const monthDate = new Date(monthIso);\n  const safeMonthDate = Number.isNaN(monthDate.getTime())\n    ? new Date()\n    : monthDate;\n  const monthStart = new Date(\n    Date.UTC(safeMonthDate.getFullYear(), safeMonthDate.getMonth(), 1),\n  );\n  const rangeEnd = new Date(\n    Date.UTC(\n      safeMonthDate.getFullYear(),\n      safeMonthDate.getMonth() + monthsToFetch,\n      0,\n    ),\n  );\n  const now = new Date();\n  const todayUtc = new Date(\n    Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()),\n  );\n  const rangeStart = monthStart < todayUtc ? todayUtc : monthStart;\n\n  return {\n    end: rangeEnd.toISOString().slice(0, 10),\n    start: rangeStart.toISOString().slice(0, 10),\n  };\n}\n\nasync function fetchSlotsForEventType(\n  input: FetchRawBookerInput,\n  resolved: ResolvedEventType,\n): Promise<unknown> {\n  const monthsToFetch = Math.max(1, Math.floor(input.monthsToFetch ?? 1));\n  const { end, start } = buildSlotRange(input.monthIso, monthsToFetch);\n  const duration = input.durationMinutes;\n  const organizationSlug = getOrgSlugFromTarget(input.target);\n  const userSlotParams = getUserSlotParamsFromTarget(input.target);\n\n  if (resolved.dynamic) {\n    return getAvailableSlots({\n      duration,\n      end,\n      organizationSlug: resolved.dynamic.orgSlug,\n      start,\n      timeZone: input.timeZone,\n      usernames: resolved.dynamic.usernames,\n    });\n  }\n\n  // Org-hosted user events (e.g. i.cal.com/pasquale/15min) need organizationSlug\n  // on the slots request; username + slug alone resolve a different availability.\n  if (organizationSlug && userSlotParams) {\n    return getAvailableSlots({\n      duration,\n      end,\n      eventTypeSlug: userSlotParams.eventTypeSlug,\n      organizationSlug,\n      start,\n      timeZone: input.timeZone,\n      username: userSlotParams.username,\n    });\n  }\n\n  if (resolved.eventTypeId != null) {\n    return getAvailableSlots({\n      duration,\n      end,\n      eventTypeId: resolved.eventTypeId,\n      organizationSlug,\n      start,\n      timeZone: input.timeZone,\n    });\n  }\n\n  const eventTypeSlug = resolved.eventTypeSlug;\n  if (!eventTypeSlug) {\n    throw new CalApiError(\n      \"Missing event type slug for slot lookup.\",\n      \"MISSING_SLUG\",\n      400,\n    );\n  }\n\n  return getAvailableSlots({\n    duration,\n    end,\n    eventTypeSlug,\n    organizationSlug,\n    start,\n    timeZone: input.timeZone,\n    username: userSlotParams?.username,\n  });\n}\n\nasync function fetchPublicEventInfo(\n  target: BookerTarget,\n): Promise<{ bannerUrl: string; displayName: string }> {\n  const params = getPublicEventBannerParamsFromTarget(target);\n  if (!params) {\n    return { bannerUrl: \"\", displayName: \"\" };\n  }\n\n  return getPublicEventInfo(params);\n}\n\nfunction getHeaderBannerUrl(\n  target: BookerTarget,\n  publicInfo: { bannerUrl: string },\n): string {\n  // Cal's public booker does not show the org/team banner for dynamic bookings.\n  if (getDynamicContext(target)) {\n    return \"\";\n  }\n\n  return publicInfo.bannerUrl;\n}\n\nasync function resolveEventType(\n  target: BookerTarget,\n): Promise<EventType | null> {\n  if (target.type === \"dynamic\") {\n    return getDynamicEventType({\n      orgId: target.orgId,\n      orgSlug: target.orgSlug,\n      usernames: target.usernames,\n    });\n  }\n\n  if (target.type === \"user\") {\n    return getEventType({\n      eventSlug: target.eventSlug,\n      orgId: target.orgId,\n      username: target.username,\n    });\n  }\n\n  if (target.type === \"team\") {\n    return getTeamEventType({\n      eventSlug: target.eventSlug,\n      orgId: target.orgId,\n      teamId: target.teamId,\n    });\n  }\n\n  const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n  if (parsed.type === \"dynamic\") {\n    return getDynamicEventType({\n      orgId: parsed.orgId,\n      orgSlug: parsed.orgSlug,\n      usernames: parsed.usernames,\n    });\n  }\n\n  if (parsed.type === \"user\") {\n    return getEventType({\n      eventSlug: parsed.eventSlug,\n      orgId: parsed.orgId,\n      orgSlug: parsed.orgSlug,\n      username: parsed.username,\n    });\n  }\n\n  return getTeamSlugEventType({\n    eventSlug: parsed.eventSlug,\n    orgId: parsed.orgId,\n    orgSlug: parsed.orgSlug,\n    teamSlug: parsed.teamSlug,\n  });\n}\n\nfunction buildResolvedEventType(\n  target: BookerTarget,\n  selectedEventType: EventType,\n): ResolvedEventType {\n  const dynamic = getDynamicContext(target);\n  if (dynamic) {\n    return { dynamic, eventTypeId: null, eventTypeSlug: null };\n  }\n\n  return {\n    eventTypeId: selectedEventType.id > 0 ? selectedEventType.id : null,\n    eventTypeSlug: selectedEventType.slug,\n  };\n}\n\nexport async function fetchRawBookerDataAction(\n  input: FetchRawBookerInput,\n): Promise<FetchRawBookerResult> {\n  try {\n    if (input.eventTypeId != null) {\n      const resolved: ResolvedEventType = {\n        eventTypeId: input.eventTypeId,\n        eventTypeSlug: null,\n      };\n      const slots = await fetchSlotsForEventType(input, resolved);\n\n      if (!input.fetchMeta) {\n        return {\n          ok: true,\n          raw: {\n            bannerUrl: \"\",\n            eventTypes: null,\n            me: null,\n            publicDisplayName: \"\",\n            selectedEventType: null,\n            slots,\n          },\n          resolved,\n        };\n      }\n\n      const [selectedEventType, publicInfo] = await Promise.all([\n        getEventTypeById(input.eventTypeId),\n        fetchPublicEventInfo(input.target),\n      ]);\n\n      return {\n        ok: true,\n        raw: {\n          bannerUrl: getHeaderBannerUrl(input.target, publicInfo),\n          eventTypes: [selectedEventType],\n          me: buildMePayload(input.target, selectedEventType),\n          publicDisplayName: publicInfo.displayName,\n          selectedEventType,\n          slots,\n        },\n        resolved,\n      };\n    }\n\n    const selectedEventType = await resolveEventType(input.target);\n\n    if (!selectedEventType) {\n      return {\n        error: \"No event type found for the provided target.\",\n        errorCode: \"NOT_FOUND\",\n        ok: false,\n      };\n    }\n\n    if (selectedEventType.hidden) {\n      return {\n        error:\n          \"This event type is currently unpublished and not accepting bookings.\",\n        errorCode: \"UNPUBLISHED\",\n        ok: false,\n      };\n    }\n\n    const resolved = buildResolvedEventType(input.target, selectedEventType);\n    const [slots, publicInfo] = await Promise.all([\n      fetchSlotsForEventType(input, resolved),\n      fetchPublicEventInfo(input.target),\n    ]);\n\n    return {\n      ok: true,\n      raw: {\n        bannerUrl: getHeaderBannerUrl(input.target, publicInfo),\n        eventTypes: [selectedEventType],\n        me: buildMePayload(input.target, selectedEventType),\n        publicDisplayName: publicInfo.displayName,\n        selectedEventType,\n        slots,\n      },\n      resolved,\n    };\n  } catch (error) {\n    if (error instanceof CalApiError) {\n      return {\n        error: error.message,\n        errorCode: error.code,\n        ok: false,\n      };\n    }\n    return {\n      error:\n        error instanceof Error ? error.message : \"Could not load booker data.\",\n      ok: false,\n    };\n  }\n}\n",
+      "content": "\"use server\";\n\nimport { toBookingLocation } from \"@/lib/booker/booking-location\";\nimport {\n  type BookerTarget,\n  getCreateBookingParamsFromTarget,\n  getDynamicContext,\n  getOrgSlugFromTarget,\n  getPublicEventBannerParamsFromTarget,\n  getUserSlotParamsFromTarget,\n  parseBookingUrlTarget,\n} from \"@/lib/booker/target\";\nimport { buildBookingStartIso } from \"@/lib/booker/utils\";\nimport { createBooking } from \"@/lib/cal-api/bookings\";\nimport { CalApiError } from \"@/lib/cal-api/client\";\nimport {\n  getDynamicEventType,\n  getEventType,\n  getEventTypeById,\n  getTeamEventType,\n  getTeamSlugEventType,\n} from \"@/lib/cal-api/event-types\";\nimport { getPublicEventInfo } from \"@/lib/cal-api/public-event\";\nimport { getAvailableSlots } from \"@/lib/cal-api/slots\";\nimport type { Booking, EventType } from \"@/lib/cal-api/types\";\n\nexport type FetchRawBookerInput = {\n  monthIso: string;\n  timeZone: string;\n  target: BookerTarget;\n  monthsToFetch?: number;\n  eventTypeId?: number;\n  fetchMeta?: boolean;\n  durationMinutes?: number;\n};\n\ntype ResolvedEventType = {\n  eventTypeId: number | null;\n  eventTypeSlug: string | null;\n  dynamic?: {\n    orgId?: number;\n    orgSlug?: string;\n    usernames: string[];\n  };\n};\n\nexport type FetchRawBookerResult =\n  | {\n      ok: true;\n      raw: {\n        me: unknown;\n        eventTypes: unknown;\n        selectedEventType: unknown | null;\n        bannerUrl: string;\n        publicDisplayName: string;\n        slots: unknown;\n      };\n      resolved: ResolvedEventType;\n    }\n  | {\n      ok: false;\n      error: string;\n      errorCode?: string;\n    };\n\nfunction buildMePayload(target: BookerTarget, eventType: EventType): unknown {\n  const owner = eventType.users?.[0] ?? eventType.hosts?.[0];\n  const dynamicContext = getDynamicContext(target);\n  const fallbackName =\n    target.type === \"user\"\n      ? target.username\n      : dynamicContext\n        ? dynamicContext.usernames.join(\" + \")\n        : (owner?.username ?? \"Unknown user\");\n\n  return {\n    data: {\n      avatarUrl: owner?.avatarUrl,\n      name: owner?.name ?? fallbackName,\n      username: owner?.username ?? fallbackName,\n    },\n  };\n}\n\nfunction buildSlotRange(monthIso: string, monthsToFetch: number) {\n  const monthDate = new Date(monthIso);\n  const safeMonthDate = Number.isNaN(monthDate.getTime())\n    ? new Date()\n    : monthDate;\n  const monthStart = new Date(\n    Date.UTC(safeMonthDate.getFullYear(), safeMonthDate.getMonth(), 1),\n  );\n  const rangeEnd = new Date(\n    Date.UTC(\n      safeMonthDate.getFullYear(),\n      safeMonthDate.getMonth() + monthsToFetch,\n      0,\n    ),\n  );\n  const now = new Date();\n  const todayUtc = new Date(\n    Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()),\n  );\n  const rangeStart = monthStart < todayUtc ? todayUtc : monthStart;\n\n  return {\n    end: rangeEnd.toISOString().slice(0, 10),\n    start: rangeStart.toISOString().slice(0, 10),\n  };\n}\n\nasync function fetchSlotsForEventType(\n  input: FetchRawBookerInput,\n  resolved: ResolvedEventType,\n): Promise<unknown> {\n  const monthsToFetch = Math.max(1, Math.floor(input.monthsToFetch ?? 1));\n  const { end, start } = buildSlotRange(input.monthIso, monthsToFetch);\n  const duration = input.durationMinutes;\n  const organizationSlug = getOrgSlugFromTarget(input.target);\n  const userSlotParams = getUserSlotParamsFromTarget(input.target);\n\n  if (resolved.dynamic) {\n    return getAvailableSlots({\n      duration,\n      end,\n      organizationSlug: resolved.dynamic.orgSlug,\n      start,\n      timeZone: input.timeZone,\n      usernames: resolved.dynamic.usernames,\n    });\n  }\n\n  // Org-hosted user events (e.g. i.cal.com/pasquale/15min) need organizationSlug\n  // on the slots request; username + slug alone resolve a different availability.\n  if (organizationSlug && userSlotParams) {\n    return getAvailableSlots({\n      duration,\n      end,\n      eventTypeSlug: userSlotParams.eventTypeSlug,\n      organizationSlug,\n      start,\n      timeZone: input.timeZone,\n      username: userSlotParams.username,\n    });\n  }\n\n  if (resolved.eventTypeId != null) {\n    return getAvailableSlots({\n      duration,\n      end,\n      eventTypeId: resolved.eventTypeId,\n      organizationSlug,\n      start,\n      timeZone: input.timeZone,\n    });\n  }\n\n  const eventTypeSlug = resolved.eventTypeSlug;\n  if (!eventTypeSlug) {\n    throw new CalApiError(\n      \"Missing event type slug for slot lookup.\",\n      \"MISSING_SLUG\",\n      400,\n    );\n  }\n\n  return getAvailableSlots({\n    duration,\n    end,\n    eventTypeSlug,\n    organizationSlug,\n    start,\n    timeZone: input.timeZone,\n    username: userSlotParams?.username,\n  });\n}\n\nasync function fetchPublicEventInfo(\n  target: BookerTarget,\n): Promise<{ bannerUrl: string; displayName: string }> {\n  const params = getPublicEventBannerParamsFromTarget(target);\n  if (!params) {\n    return { bannerUrl: \"\", displayName: \"\" };\n  }\n\n  return getPublicEventInfo(params);\n}\n\nfunction getHeaderBannerUrl(\n  target: BookerTarget,\n  publicInfo: { bannerUrl: string },\n): string {\n  // Cal's public booker does not show the org/team banner for dynamic bookings.\n  if (getDynamicContext(target)) {\n    return \"\";\n  }\n\n  return publicInfo.bannerUrl;\n}\n\nasync function resolveEventType(\n  target: BookerTarget,\n): Promise<EventType | null> {\n  if (target.type === \"dynamic\") {\n    return getDynamicEventType({\n      orgId: target.orgId,\n      orgSlug: target.orgSlug,\n      usernames: target.usernames,\n    });\n  }\n\n  if (target.type === \"user\") {\n    return getEventType({\n      eventSlug: target.eventSlug,\n      orgId: target.orgId,\n      username: target.username,\n    });\n  }\n\n  if (target.type === \"team\") {\n    return getTeamEventType({\n      eventSlug: target.eventSlug,\n      orgId: target.orgId,\n      teamId: target.teamId,\n    });\n  }\n\n  const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n  if (parsed.type === \"dynamic\") {\n    return getDynamicEventType({\n      orgId: parsed.orgId,\n      orgSlug: parsed.orgSlug,\n      usernames: parsed.usernames,\n    });\n  }\n\n  if (parsed.type === \"user\") {\n    return getEventType({\n      eventSlug: parsed.eventSlug,\n      orgId: parsed.orgId,\n      orgSlug: parsed.orgSlug,\n      username: parsed.username,\n    });\n  }\n\n  return getTeamSlugEventType({\n    eventSlug: parsed.eventSlug,\n    orgId: parsed.orgId,\n    orgSlug: parsed.orgSlug,\n    teamSlug: parsed.teamSlug,\n  });\n}\n\nfunction buildResolvedEventType(\n  target: BookerTarget,\n  selectedEventType: EventType,\n): ResolvedEventType {\n  const dynamic = getDynamicContext(target);\n  if (dynamic) {\n    return { dynamic, eventTypeId: null, eventTypeSlug: null };\n  }\n\n  return {\n    eventTypeId: selectedEventType.id > 0 ? selectedEventType.id : null,\n    eventTypeSlug: selectedEventType.slug,\n  };\n}\n\nexport async function fetchRawBookerDataAction(\n  input: FetchRawBookerInput,\n): Promise<FetchRawBookerResult> {\n  try {\n    if (input.eventTypeId != null) {\n      const resolved: ResolvedEventType = {\n        eventTypeId: input.eventTypeId,\n        eventTypeSlug: null,\n      };\n      const slots = await fetchSlotsForEventType(input, resolved);\n\n      if (!input.fetchMeta) {\n        return {\n          ok: true,\n          raw: {\n            bannerUrl: \"\",\n            eventTypes: null,\n            me: null,\n            publicDisplayName: \"\",\n            selectedEventType: null,\n            slots,\n          },\n          resolved,\n        };\n      }\n\n      const [selectedEventType, publicInfo] = await Promise.all([\n        getEventTypeById(input.eventTypeId),\n        fetchPublicEventInfo(input.target),\n      ]);\n\n      return {\n        ok: true,\n        raw: {\n          bannerUrl: getHeaderBannerUrl(input.target, publicInfo),\n          eventTypes: [selectedEventType],\n          me: buildMePayload(input.target, selectedEventType),\n          publicDisplayName: publicInfo.displayName,\n          selectedEventType,\n          slots,\n        },\n        resolved,\n      };\n    }\n\n    const selectedEventType = await resolveEventType(input.target);\n\n    if (!selectedEventType) {\n      return {\n        error: \"No event type found for the provided target.\",\n        errorCode: \"NOT_FOUND\",\n        ok: false,\n      };\n    }\n\n    if (selectedEventType.hidden) {\n      return {\n        error:\n          \"This event type is currently unpublished and not accepting bookings.\",\n        errorCode: \"UNPUBLISHED\",\n        ok: false,\n      };\n    }\n\n    const resolved = buildResolvedEventType(input.target, selectedEventType);\n    const [slots, publicInfo] = await Promise.all([\n      fetchSlotsForEventType(input, resolved),\n      fetchPublicEventInfo(input.target),\n    ]);\n\n    return {\n      ok: true,\n      raw: {\n        bannerUrl: getHeaderBannerUrl(input.target, publicInfo),\n        eventTypes: [selectedEventType],\n        me: buildMePayload(input.target, selectedEventType),\n        publicDisplayName: publicInfo.displayName,\n        selectedEventType,\n        slots,\n      },\n      resolved,\n    };\n  } catch (error) {\n    if (error instanceof CalApiError) {\n      return {\n        error: error.message,\n        errorCode: error.code,\n        ok: false,\n      };\n    }\n    return {\n      error:\n        error instanceof Error ? error.message : \"Could not load booker data.\",\n      ok: false,\n    };\n  }\n}\n\nexport type CreateBookingActionInput = {\n  email: string;\n  guests?: string[];\n  lengthInMinutes?: number;\n  locale?: string;\n  locationProvider?: string;\n  name: string;\n  notes?: string;\n  selectedDateKey: string;\n  selectedTime: string;\n  target: BookerTarget;\n  timeZone: string;\n};\n\nexport type CreateBookingActionResult =\n  | { ok: true; booking: Booking }\n  | { ok: false; error: string; errorCode?: string };\n\nconst EMAIL_PATTERN = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\nfunction validateCreateBookingInput(\n  input: CreateBookingActionInput,\n): CreateBookingActionResult | null {\n  const name = input.name.trim();\n  if (!name) {\n    return {\n      error: \"Name is required.\",\n      errorCode: \"INVALID_NAME\",\n      ok: false,\n    };\n  }\n\n  const email = input.email.trim();\n  if (!email || !EMAIL_PATTERN.test(email)) {\n    return {\n      error: \"A valid email address is required.\",\n      errorCode: \"INVALID_EMAIL\",\n      ok: false,\n    };\n  }\n\n  if (!/^\\d{4}-\\d{2}-\\d{2}$/.test(input.selectedDateKey)) {\n    return {\n      error: \"Invalid booking date.\",\n      errorCode: \"INVALID_DATE\",\n      ok: false,\n    };\n  }\n\n  if (!/^\\d{2}:\\d{2}$/.test(input.selectedTime)) {\n    return {\n      error: \"Invalid booking time.\",\n      errorCode: \"INVALID_TIME\",\n      ok: false,\n    };\n  }\n\n  if (!input.timeZone.trim()) {\n    return {\n      error: \"Timezone is required.\",\n      errorCode: \"INVALID_TIMEZONE\",\n      ok: false,\n    };\n  }\n\n  if (input.guests?.some((guest) => !EMAIL_PATTERN.test(guest.trim()))) {\n    return {\n      error: \"All guest emails must be valid.\",\n      errorCode: \"INVALID_GUEST_EMAIL\",\n      ok: false,\n    };\n  }\n\n  return null;\n}\n\nfunction getEventTypeDurationOptions(eventType: EventType): number[] | null {\n  const options = (\n    eventType as EventType & { lengthInMinutesOptions?: number[] }\n  ).lengthInMinutesOptions;\n  if (!Array.isArray(options)) {\n    return null;\n  }\n\n  const parsed = options.filter(\n    (value): value is number => typeof value === \"number\" && value > 0,\n  );\n  return parsed.length > 1 ? parsed : null;\n}\n\nfunction resolveBookingLengthInMinutes(\n  eventType: EventType,\n  lengthInMinutes: number | undefined,\n): CreateBookingActionResult | { lengthInMinutes?: number } {\n  const durationOptions = getEventTypeDurationOptions(eventType);\n  if (!durationOptions) {\n    return {};\n  }\n\n  if (lengthInMinutes == null) {\n    return {\n      error: \"Duration is required for this event type.\",\n      errorCode: \"INVALID_DURATION\",\n      ok: false,\n    };\n  }\n\n  if (!durationOptions.includes(lengthInMinutes)) {\n    return {\n      error: \"The selected duration is not allowed for this event type.\",\n      errorCode: \"INVALID_DURATION\",\n      ok: false,\n    };\n  }\n\n  return { lengthInMinutes };\n}\n\nasync function resolveBookableEventType(\n  target: BookerTarget,\n): Promise<CreateBookingActionResult | { eventType: EventType }> {\n  const eventType = await resolveEventType(target);\n\n  if (!eventType) {\n    return {\n      error: \"No event type found for the provided target.\",\n      errorCode: \"NOT_FOUND\",\n      ok: false,\n    };\n  }\n\n  if (eventType.hidden) {\n    return {\n      error:\n        \"This event type is not currently published and is not accepting bookings.\",\n      errorCode: \"UNPUBLISHED\",\n      ok: false,\n    };\n  }\n\n  return { eventType };\n}\n\nexport async function createBookingAction(\n  input: CreateBookingActionInput,\n): Promise<CreateBookingActionResult> {\n  try {\n    const validationError = validateCreateBookingInput(input);\n    if (validationError) {\n      return validationError;\n    }\n\n    const resolvedEvent = await resolveBookableEventType(input.target);\n    if (!(\"eventType\" in resolvedEvent)) {\n      return resolvedEvent;\n    }\n\n    const { eventType } = resolvedEvent;\n\n    if (eventType.disableGuests && input.guests?.length) {\n      return {\n        error: \"Guests are not allowed for this event type.\",\n        errorCode: \"GUESTS_DISABLED\",\n        ok: false,\n      };\n    }\n\n    const lengthResult = resolveBookingLengthInMinutes(\n      eventType,\n      input.lengthInMinutes,\n    );\n    if (\"ok\" in lengthResult) {\n      return lengthResult;\n    }\n\n    const start = buildBookingStartIso(\n      input.selectedDateKey,\n      input.selectedTime,\n      input.timeZone,\n    );\n    const bookingFieldsResponses: Record<string, unknown> = {};\n\n    if (input.notes?.trim()) {\n      bookingFieldsResponses.notes = input.notes.trim();\n    }\n\n    if (input.locationProvider?.trim()) {\n      bookingFieldsResponses.location = input.locationProvider.trim();\n    }\n\n    const targetParams = getCreateBookingParamsFromTarget(input.target, {\n      eventTypeSlug: eventType.slug,\n    });\n\n    const body: Parameters<typeof createBooking>[0] = {\n      attendee: {\n        email: input.email.trim(),\n        name: input.name.trim(),\n        timeZone: input.timeZone,\n        ...(input.locale ? { language: input.locale.split(\"-\")[0] } : {}),\n      },\n      start,\n      ...(input.guests?.length ? { guests: input.guests } : {}),\n      ...(Object.keys(bookingFieldsResponses).length\n        ? { bookingFieldsResponses }\n        : {}),\n      ...(\"lengthInMinutes\" in lengthResult && lengthResult.lengthInMinutes\n        ? { lengthInMinutes: lengthResult.lengthInMinutes }\n        : {}),\n    };\n\n    if (eventType.id > 0) {\n      body.eventTypeId = eventType.id;\n    } else if (\n      eventType.slug &&\n      (targetParams.username || targetParams.teamSlug)\n    ) {\n      body.eventTypeSlug = eventType.slug;\n      if (targetParams.username) {\n        body.username = targetParams.username;\n      }\n      if (targetParams.teamSlug) {\n        body.teamSlug = targetParams.teamSlug;\n      }\n      if (targetParams.organizationSlug) {\n        body.organizationSlug = targetParams.organizationSlug;\n      }\n    } else {\n      return {\n        error: \"Missing event type for booking.\",\n        errorCode: \"MISSING_EVENT_TYPE\",\n        ok: false,\n      };\n    }\n\n    if (input.locationProvider?.trim()) {\n      body.location = toBookingLocation(input.locationProvider.trim());\n    }\n\n    const booking = await createBooking(body);\n    return { ok: true, booking };\n  } catch (error) {\n    if (error instanceof CalApiError) {\n      return {\n        error: error.message,\n        errorCode: error.code,\n        ok: false,\n      };\n    }\n\n    return {\n      error:\n        error instanceof Error ? error.message : \"Could not create booking.\",\n      ok: false,\n    };\n  }\n}\n",
       "type": "registry:lib",
       "target": "lib/booker/actions.ts"
     },
     {
       "path": "registry/default/atoms/lib/booker/use-booker.ts",
-      "content": "\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type FetchRawBookerResult,\n  fetchRawBookerDataAction,\n} from \"@/lib/booker/actions\";\nimport {\n  type BookerTarget,\n  getDynamicContext,\n  getOrgSlugFromTarget,\n} from \"@/lib/booker/target\";\nimport {\n  type BookerMeta,\n  type CalendarViewOptions,\n  extractBookingWindowEnd,\n  extractBookingWindowStart,\n  extractEventTypeInfo,\n  extractHost,\n  extractHostAvatars,\n  extractHostDisplayName,\n  extractMinimumBookingNotice,\n  extractSlotsByDate,\n  filterBookableSlots,\n  findNextAvailableDate,\n  getMinimumNavigableMonth,\n  getTodayInTimeZone,\n  getWeekStartsOn,\n  hasAvailabilityInVisibleGrid,\n  isCalendarMonthBefore,\n  pickDefaultSelectedDate,\n  prefers24Hour,\n  toCalendarDateKey,\n} from \"@/lib/booker/utils\";\n\nconst WINDOW_MONTHS = 3;\n\nexport type BookerErrorKind =\n  | \"not-found\"\n  | \"unpublished\"\n  | \"network\"\n  | \"unknown\";\n\nexport type BookerError = {\n  kind: BookerErrorKind;\n  message: string;\n};\n\nclass BookerDataError extends Error {\n  code: string;\n  constructor(message: string, code: string) {\n    super(message);\n    this.code = code;\n  }\n}\n\ntype ResolvedEventType = Extract<\n  FetchRawBookerResult,\n  { ok: true }\n>[\"resolved\"];\n\nexport type BookerInitialData = {\n  durationMinutes?: number;\n  monthIso: string;\n  monthsToFetch?: number;\n  result: FetchRawBookerResult;\n  timeZone: string;\n};\n\ntype DerivedBookerData = {\n  hasMultiDurationOptions: boolean;\n  meta: BookerMeta | null;\n  minimumBookingNotice: number;\n  selectedDurationMinutes: number | null;\n};\n\ntype HydratedBookerData = DerivedBookerData & {\n  coveredMonthKeys: Set<string>;\n  error: BookerError | null;\n  resolved: ResolvedEventType;\n  slotsByDate: Record<string, string[]>;\n  slotsCacheKey: string;\n};\n\nfunction classifyError(caught: unknown): BookerError {\n  const code = caught instanceof BookerDataError ? caught.code : \"\";\n  const message =\n    caught instanceof Error ? caught.message : \"Could not load booker data.\";\n\n  if (code === \"UNPUBLISHED\") {\n    return { kind: \"unpublished\", message };\n  }\n  if (code === \"NOT_FOUND\") {\n    return { kind: \"not-found\", message };\n  }\n  if (\n    code.startsWith(\"HTTP_4\") ||\n    code.startsWith(\"HTTP_5\") ||\n    message.includes(\"fetch\") ||\n    message.includes(\"network\") ||\n    message.includes(\"ETIMEDOUT\") ||\n    message.includes(\"ECONNREFUSED\") ||\n    /Cal\\.com API [45]\\d\\d/.test(message)\n  ) {\n    return { kind: \"network\", message };\n  }\n  return { kind: \"unknown\", message };\n}\n\nfunction getTargetIdentity(target: BookerTarget): string {\n  if (target.type === \"user\") {\n    return `user:${target.username}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"team\") {\n    return `team:${target.teamId}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"dynamic\") {\n    return `dynamic:${target.usernames.join(\",\")}:${target.orgSlug ?? \"\"}:${target.orgId ?? \"\"}`;\n  }\n  return `link:${target.bookingUrl}`;\n}\n\nfunction getMonthCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n  month: Date,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}|${month.getFullYear()}-${month.getMonth()}`;\n}\n\nfunction getSlotsCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}`;\n}\n\nfunction deriveBookerData(\n  result: Extract<FetchRawBookerResult, { ok: true }>,\n  target: BookerTarget,\n): DerivedBookerData {\n  if (!result.raw.me) {\n    return {\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      selectedDurationMinutes: null,\n    };\n  }\n\n  const host = extractHost(result.raw.me);\n  const isDynamic = Boolean(getDynamicContext(target));\n  const hostAvatars = extractHostAvatars(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic, orgSlug: getOrgSlugFromTarget(target) },\n  );\n  const hostName = extractHostDisplayName(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic },\n  );\n  const eventType = extractEventTypeInfo(result.raw.selectedEventType);\n  const minimumBookingNotice = extractMinimumBookingNotice(\n    result.raw.selectedEventType,\n  );\n  const hasMultiDurationOptions =\n    (eventType.eventTypeDurationOptions?.length ?? 0) > 1;\n  const selectedDurationMinutes =\n    eventType.eventTypeDurationOptions?.[0] ??\n    eventType.eventTypeDurationMinutes ??\n    null;\n\n  return {\n    hasMultiDurationOptions,\n    meta: {\n      bookingWindowEnd: extractBookingWindowEnd(result.raw.selectedEventType),\n      bookingWindowStart: extractBookingWindowStart(\n        result.raw.selectedEventType,\n      ),\n      eventTypeDescription: eventType.eventTypeDescription,\n      eventTypeDurationMinutes: eventType.eventTypeDurationMinutes,\n      eventTypeDurationOptions: eventType.eventTypeDurationOptions,\n      eventTypeImageUrl: result.raw.bannerUrl || eventType.eventTypeImageUrl,\n      eventTypeLocations: eventType.eventTypeLocations,\n      eventTypeTitle: eventType.eventTypeTitle,\n      hostAvatarUrl: host.hostAvatarUrl,\n      hostAvatars,\n      hostName:\n        host.hostName === \"Unknown user\" && target.type === \"user\"\n          ? target.username\n          : result.raw.publicDisplayName || hostName,\n    },\n    minimumBookingNotice,\n    selectedDurationMinutes,\n  };\n}\n\nfunction hydrateBookerData({\n  initialData,\n  selectedTimeZone,\n  target,\n}: {\n  initialData?: BookerInitialData;\n  selectedTimeZone: string;\n  target: BookerTarget;\n}): HydratedBookerData | null {\n  if (!initialData) {\n    return null;\n  }\n\n  if (initialData.timeZone !== selectedTimeZone) {\n    return null;\n  }\n\n  if (!initialData.result.ok) {\n    const error = classifyError(\n      new BookerDataError(\n        initialData.result.error,\n        initialData.result.errorCode ?? \"UNKNOWN\",\n      ),\n    );\n\n    if (error.kind !== \"not-found\" && error.kind !== \"unpublished\") {\n      return null;\n    }\n\n    return {\n      coveredMonthKeys: new Set(),\n      error,\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      resolved: { eventTypeId: null, eventTypeSlug: null },\n      selectedDurationMinutes: null,\n      slotsByDate: {},\n      slotsCacheKey: \"\",\n    };\n  }\n\n  const derived = deriveBookerData(initialData.result, target);\n  const durationMinutes =\n    derived.selectedDurationMinutes ?? initialData.durationMinutes ?? 30;\n  const identity = getTargetIdentity(target);\n  const anchor = new Date(initialData.monthIso);\n  const safeAnchor = Number.isNaN(anchor.getTime()) ? new Date() : anchor;\n  const monthsToFetch = Math.max(\n    1,\n    Math.floor(initialData.monthsToFetch ?? WINDOW_MONTHS),\n  );\n  const coveredMonthKeys = new Set<string>();\n\n  for (let offset = 0; offset < monthsToFetch; offset += 1) {\n    coveredMonthKeys.add(\n      getMonthCacheKey(\n        identity,\n        selectedTimeZone,\n        durationMinutes,\n        new Date(safeAnchor.getFullYear(), safeAnchor.getMonth() + offset, 1),\n      ),\n    );\n  }\n\n  const slotsByDate = filterBookableSlots(\n    extractSlotsByDate(initialData.result.raw.slots, selectedTimeZone),\n    selectedTimeZone,\n    derived.minimumBookingNotice,\n    new Date(),\n  );\n\n  return {\n    ...derived,\n    coveredMonthKeys,\n    error: null,\n    resolved: initialData.result.resolved,\n    selectedDurationMinutes: durationMinutes,\n    slotsByDate,\n    slotsCacheKey: getSlotsCacheKey(\n      identity,\n      selectedTimeZone,\n      durationMinutes,\n    ),\n  };\n}\n\ntype UseBookerParams = {\n  initialData?: BookerInitialData;\n  target: BookerTarget;\n  timezone?: string;\n};\n\ntype BookerLoadingState = {\n  availability: boolean;\n  busy: boolean;\n  initial: boolean;\n};\n\ntype BookerTimezoneState = {\n  onValueChange: (timeZone: string) => void;\n  value: string;\n};\n\ntype BookerDurationState = {\n  onValueChange: (minutes: number) => void;\n  value: number;\n};\n\ntype BookerCalendarState = {\n  availabilityLoading: boolean;\n  disabled: (date: Date) => boolean;\n  endMonth?: Date;\n  initialLoading: boolean;\n  locale: string;\n  month: Date;\n  onMonthChange: (month: Date) => void;\n  onSelect: (nextDate: Date | undefined) => void;\n  selected: Date | undefined;\n  startMonth: Date;\n  today: Date;\n};\n\ntype BookerTimePickerState = {\n  availabilityLoading: boolean;\n  currentMonth: Date;\n  daySlots: string[];\n  goToDate: (date: Date) => void;\n  hasAvailabilityInView: boolean;\n  initialLoading: boolean;\n  is24Hour: boolean;\n  locale: string;\n  nextAvailableDate: Date | null;\n  onIs24HourChange: (value: boolean) => void;\n  onSelectTime: (time: string) => void;\n  selectedDate: Date | undefined;\n};\n\nexport type BookerStep = \"select\" | \"confirm\";\n\nexport type UseBookerResult = {\n  calendarProps: BookerCalendarState;\n  durationProps: BookerDurationState;\n  error: BookerError | null;\n  loadingState: BookerLoadingState;\n  meta: BookerMeta | null;\n  onBack: () => void;\n  retry: () => void;\n  selectedTime: string | null;\n  step: BookerStep;\n  timePickerProps: BookerTimePickerState;\n  timezoneProps: BookerTimezoneState;\n};\n\n// All booker data + interaction logic: fetching/windowing cal.com availability,\n// derived selection state, and the handlers the UI wires to the calendar.\nexport function useBooker({\n  initialData,\n  target,\n  timezone,\n}: UseBookerParams): UseBookerResult {\n  const [timeZone] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().timeZone || \"UTC\",\n  );\n  const [locale] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().locale || \"en-US\",\n  );\n  const initialSelectedTimeZone = initialData?.timeZone ?? timezone ?? timeZone;\n  const hydratedData = useMemo(\n    () =>\n      hydrateBookerData({\n        initialData,\n        selectedTimeZone: initialSelectedTimeZone,\n        target,\n      }),\n    [initialData, initialSelectedTimeZone, target],\n  );\n  const initialCurrentMonth = useMemo(() => {\n    const initialMonth = initialData?.monthIso\n      ? new Date(initialData.monthIso)\n      : new Date();\n    return Number.isNaN(initialMonth.getTime()) ? new Date() : initialMonth;\n  }, [initialData?.monthIso]);\n  const initialSelectedDate = useMemo(() => {\n    if (!hydratedData || hydratedData.error) {\n      return undefined;\n    }\n\n    return (\n      pickDefaultSelectedDate(\n        initialCurrentMonth,\n        hydratedData.slotsByDate,\n        initialSelectedTimeZone,\n        getTodayInTimeZone(initialSelectedTimeZone),\n        {\n          endMonth: hydratedData.meta?.bookingWindowEnd ?? undefined,\n          shiftWeeks: true,\n          startMonth: getMinimumNavigableMonth(\n            initialSelectedTimeZone,\n            hydratedData.meta?.bookingWindowStart,\n          ),\n          weekStartsOn: getWeekStartsOn(locale),\n        },\n      ) ?? undefined\n    );\n  }, [hydratedData, initialCurrentMonth, initialSelectedTimeZone, locale]);\n  const [meta, setMeta] = useState<BookerMeta | null>(\n    hydratedData?.meta ?? null,\n  );\n  const [slotsByDate, setSlotsByDate] = useState<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const [error, setError] = useState<BookerError | null>(\n    hydratedData?.error ?? null,\n  );\n  const [isPending, setIsPending] = useState(false);\n  const [currentMonth, setCurrentMonth] = useState(initialCurrentMonth);\n  const [selectedTimeZone, setSelectedTimeZone] = useState(\n    initialSelectedTimeZone,\n  );\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(\n    initialSelectedDate,\n  );\n  const [_selectedTime, setSelectedTime] = useState<string | null>(null);\n  const [step, setStep] = useState<BookerStep>(\"select\");\n  const [selectedDurationMinutes, setSelectedDurationMinutes] = useState(\n    hydratedData?.selectedDurationMinutes ?? 30,\n  );\n  const [is24Hour, setIs24Hour] = useState(() => prefers24Hour(locale));\n  const coveredMonthsRef = useRef<Set<string>>(\n    hydratedData?.coveredMonthKeys ?? new Set(),\n  );\n  const resolvedRef = useRef<ResolvedEventType>(\n    hydratedData?.resolved ?? { eventTypeId: null, eventTypeSlug: null },\n  );\n  const lastIdentityRef = useRef<string | null>(null);\n  const lastTimeZoneRef = useRef<string | null>(null);\n  const lastDurationRef = useRef<number | null>(null);\n  const autoSelectedMonthRef = useRef<string | null>(\n    initialSelectedDate\n      ? `${initialCurrentMonth.getFullYear()}-${initialCurrentMonth.getMonth()}`\n      : null,\n  );\n  const slotsByDateRef = useRef<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const slotsCacheRef = useRef<Map<string, Record<string, string[]>>>(\n    new Map(\n      hydratedData?.slotsCacheKey\n        ? [[hydratedData.slotsCacheKey, hydratedData.slotsByDate]]\n        : [],\n    ),\n  );\n  const minimumBookingNoticeRef = useRef(\n    hydratedData?.minimumBookingNotice ?? 0,\n  );\n  const hasMultiDurationOptionsRef = useRef(\n    hydratedData?.hasMultiDurationOptions ?? false,\n  );\n  const selectedDateRef = useRef(selectedDate);\n  selectedDateRef.current = selectedDate;\n  const inFlightMonthsRef = useRef<Map<string, Promise<void>>>(new Map());\n  const availabilityRequestVersionRef = useRef(0);\n  const skipInitialWarmRef = useRef(\n    Boolean(hydratedData && !hydratedData.error),\n  );\n\n  const targetIdentity = useCallback((): string => {\n    return getTargetIdentity(target);\n  }, [target]);\n\n  const buildKey = useCallback(\n    (month: Date) =>\n      getMonthCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n        month,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const slotsCacheKey = useCallback(\n    () =>\n      getSlotsCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const restoreSlotsFromCache = useCallback(() => {\n    const cached = slotsCacheRef.current.get(slotsCacheKey()) ?? {};\n    slotsByDateRef.current = cached;\n    setSlotsByDate(cached);\n  }, [slotsCacheKey]);\n\n  useLayoutEffect(() => {\n    restoreSlotsFromCache();\n  }, [restoreSlotsFromCache]);\n\n  // Fetch a window of several months in a single request, anchored at `anchor`.\n  const fetchWindow = useCallback(\n    async (anchor: Date): Promise<void> => {\n      const anchorKey = buildKey(anchor);\n\n      if (coveredMonthsRef.current.has(anchorKey)) {\n        return;\n      }\n\n      const existingRequest = inFlightMonthsRef.current.get(anchorKey);\n      if (existingRequest) {\n        await existingRequest;\n        return;\n      }\n\n      const requestVersion = availabilityRequestVersionRef.current;\n      const windowMonthKeys = Array.from(\n        { length: WINDOW_MONTHS },\n        (_, offset) =>\n          buildKey(\n            new Date(anchor.getFullYear(), anchor.getMonth() + offset, 1),\n          ),\n      );\n      const request = (async () => {\n        const durationMinutes =\n          getDynamicContext(target) || hasMultiDurationOptionsRef.current\n            ? selectedDurationMinutes\n            : undefined;\n\n        const result = await fetchRawBookerDataAction({\n          durationMinutes,\n          fetchMeta: resolvedRef.current.eventTypeId == null,\n          monthIso: anchor.toISOString(),\n          monthsToFetch: WINDOW_MONTHS,\n          target,\n          timeZone: selectedTimeZone,\n          eventTypeId: resolvedRef.current.eventTypeId ?? undefined,\n        });\n\n        if (!result.ok) {\n          throw new BookerDataError(\n            result.error,\n            result.errorCode ?? \"UNKNOWN\",\n          );\n        }\n\n        if (availabilityRequestVersionRef.current !== requestVersion) {\n          return;\n        }\n\n        resolvedRef.current = result.resolved;\n\n        for (let offset = 0; offset < WINDOW_MONTHS; offset += 1) {\n          const month = new Date(\n            anchor.getFullYear(),\n            anchor.getMonth() + offset,\n            1,\n          );\n          coveredMonthsRef.current.add(buildKey(month));\n        }\n\n        // The host/event metadata only comes back on the full (non slots-only)\n        // fetch, so set it once when present.\n        if (result.raw.me) {\n          const derived = deriveBookerData(result, target);\n          minimumBookingNoticeRef.current = derived.minimumBookingNotice;\n          hasMultiDurationOptionsRef.current = derived.hasMultiDurationOptions;\n          setMeta((prev) => prev ?? derived.meta);\n\n          const defaultDuration = derived.selectedDurationMinutes ?? 30;\n          if (derived.meta?.eventTypeDurationOptions?.length) {\n            if (\n              !derived.meta.eventTypeDurationOptions.includes(\n                selectedDurationMinutes,\n              )\n            ) {\n              setSelectedDurationMinutes(defaultDuration);\n            }\n          } else if (\n            derived.meta?.eventTypeDurationMinutes != null &&\n            selectedDurationMinutes !== derived.meta.eventTypeDurationMinutes\n          ) {\n            setSelectedDurationMinutes(derived.meta.eventTypeDurationMinutes);\n          }\n        }\n\n        const windowSlots = filterBookableSlots(\n          extractSlotsByDate(result.raw.slots, selectedTimeZone),\n          selectedTimeZone,\n          minimumBookingNoticeRef.current,\n          new Date(),\n        );\n        const cacheKey = getSlotsCacheKey(\n          targetIdentity(),\n          selectedTimeZone,\n          selectedDurationMinutes,\n        );\n        const mergedSlots = {\n          ...(slotsCacheRef.current.get(cacheKey) ?? {}),\n          ...windowSlots,\n        };\n        slotsCacheRef.current.set(cacheKey, mergedSlots);\n        slotsByDateRef.current = mergedSlots;\n        setSlotsByDate(mergedSlots);\n      })();\n\n      for (const monthKey of windowMonthKeys) {\n        inFlightMonthsRef.current.set(monthKey, request);\n      }\n\n      try {\n        await request;\n      } finally {\n        for (const monthKey of windowMonthKeys) {\n          if (inFlightMonthsRef.current.get(monthKey) === request) {\n            inFlightMonthsRef.current.delete(monthKey);\n          }\n        }\n      }\n    },\n    [\n      buildKey,\n      selectedDurationMinutes,\n      selectedTimeZone,\n      target,\n      targetIdentity,\n    ],\n  );\n\n  const todayStart = useMemo(\n    () => getTodayInTimeZone(selectedTimeZone),\n    [selectedTimeZone],\n  );\n  const startMonth = useMemo(\n    () => getMinimumNavigableMonth(selectedTimeZone, meta?.bookingWindowStart),\n    [meta?.bookingWindowStart, selectedTimeZone],\n  );\n  const calendarViewOptions = useMemo((): CalendarViewOptions => {\n    return {\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      shiftWeeks: true,\n      startMonth,\n      weekStartsOn: getWeekStartsOn(locale),\n    };\n  }, [locale, meta?.bookingWindowEnd, startMonth]);\n\n  const hasAvailabilityInView = useMemo(\n    () =>\n      hasAvailabilityInVisibleGrid(\n        currentMonth,\n        slotsByDate,\n        todayStart,\n        calendarViewOptions,\n      ),\n    [calendarViewOptions, currentMonth, slotsByDate, todayStart],\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const load = async () => {\n      const identity = targetIdentity();\n      let deferLoadForMonthSync = false;\n\n      // A different user/event means a different event type and metadata, so\n      // reset everything and force a full fetch.\n      if (\n        lastIdentityRef.current !== null &&\n        lastIdentityRef.current !== identity\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        resolvedRef.current = { eventTypeId: null, eventTypeSlug: null };\n        hasMultiDurationOptionsRef.current = false;\n        slotsCacheRef.current = new Map();\n        slotsByDateRef.current = {};\n        autoSelectedMonthRef.current = null;\n        setMeta(null);\n        setSelectedDurationMinutes(30);\n        setSlotsByDate({});\n      } else if (\n        lastDurationRef.current !== null &&\n        lastDurationRef.current !== selectedDurationMinutes\n      ) {\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n      } else if (\n        lastTimeZoneRef.current !== null &&\n        lastTimeZoneRef.current !== selectedTimeZone\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n\n        const minMonth = getMinimumNavigableMonth(\n          selectedTimeZone,\n          meta?.bookingWindowStart,\n        );\n        if (isCalendarMonthBefore(currentMonth, minMonth)) {\n          setCurrentMonth(minMonth);\n          deferLoadForMonthSync = true;\n        } else {\n          const todayInTz = getTodayInTimeZone(selectedTimeZone);\n          if (\n            selectedDateRef.current &&\n            toCalendarDateKey(selectedDateRef.current) <\n              toCalendarDateKey(todayInTz)\n          ) {\n            setSelectedDate(undefined);\n          }\n        }\n      }\n      lastIdentityRef.current = identity;\n      lastTimeZoneRef.current = selectedTimeZone;\n      lastDurationRef.current = selectedDurationMinutes;\n\n      if (deferLoadForMonthSync) {\n        return;\n      }\n\n      if (!coveredMonthsRef.current.has(buildKey(currentMonth))) {\n        setIsPending(true);\n        try {\n          await fetchWindow(currentMonth);\n          if (cancelled) {\n            return;\n          }\n          setError(null);\n        } catch (caught) {\n          if (cancelled) {\n            return;\n          }\n          setError(classifyError(caught));\n          return;\n        } finally {\n          if (!cancelled) {\n            setIsPending(false);\n          }\n        }\n      } else {\n        setError(null);\n        setIsPending(false);\n      }\n\n      // Auto-select the first available day the first time this month's\n      // availability is known (on load and on month navigation).\n      const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n      if (!cancelled && autoSelectedMonthRef.current !== monthKey) {\n        const firstAvailable = pickDefaultSelectedDate(\n          currentMonth,\n          slotsByDateRef.current,\n          selectedTimeZone,\n          getTodayInTimeZone(selectedTimeZone),\n          calendarViewOptions,\n        );\n        if (firstAvailable) {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(firstAvailable);\n          setSelectedTime(null);\n        } else {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(undefined);\n          setSelectedTime(null);\n        }\n      }\n\n      // Warm the next uncovered window boundary, not just the adjacent month.\n      // This keeps navigation instant when the user reaches the end of the\n      // currently-covered 3-month range.\n      const nextWindow = new Date(\n        currentMonth.getFullYear(),\n        currentMonth.getMonth() + WINDOW_MONTHS,\n        1,\n      );\n      if (skipInitialWarmRef.current) {\n        skipInitialWarmRef.current = false;\n        return;\n      }\n      if (!coveredMonthsRef.current.has(buildKey(nextWindow))) {\n        void fetchWindow(nextWindow).catch(() => {});\n      }\n    };\n\n    void load();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    buildKey,\n    currentMonth,\n    fetchWindow,\n    selectedDurationMinutes,\n    selectedTimeZone,\n    meta?.bookingWindowStart,\n    calendarViewOptions,\n    restoreSlotsFromCache,\n    targetIdentity,\n  ]);\n\n  const [retryCounter, setRetryCounter] = useState(0);\n\n  const retry = useCallback(() => {\n    coveredMonthsRef.current = new Set();\n    inFlightMonthsRef.current.clear();\n    availabilityRequestVersionRef.current += 1;\n    slotsCacheRef.current = new Map();\n    slotsByDateRef.current = {};\n    autoSelectedMonthRef.current = null;\n    setSlotsByDate({});\n    setError(null);\n    setRetryCounter((c) => c + 1);\n  }, []);\n\n  // Re-trigger the main load effect when the user retries.\n  useEffect(() => {\n    // The first render (retryCounter === 0) is handled by the main effect.\n    if (retryCounter === 0) return;\n    setIsPending(true);\n    let cancelled = false;\n\n    (async () => {\n      try {\n        await fetchWindow(currentMonth);\n        if (cancelled) return;\n        setError(null);\n\n        const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n        if (autoSelectedMonthRef.current !== monthKey) {\n          const firstAvailable = pickDefaultSelectedDate(\n            currentMonth,\n            slotsByDateRef.current,\n            selectedTimeZone,\n            getTodayInTimeZone(selectedTimeZone),\n            calendarViewOptions,\n          );\n          if (firstAvailable) {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(firstAvailable);\n            setSelectedTime(null);\n          } else {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(undefined);\n            setSelectedTime(null);\n          }\n        }\n      } catch (caught) {\n        if (cancelled) return;\n        setError(classifyError(caught));\n      } finally {\n        if (!cancelled) setIsPending(false);\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    retryCounter,\n    fetchWindow,\n    currentMonth,\n    selectedTimeZone,\n    calendarViewOptions,\n  ]);\n\n  useEffect(() => {\n    if (!timezone) {\n      return;\n    }\n    setSelectedTimeZone(timezone);\n  }, [timezone]);\n\n  const selectedDateKey = toCalendarDateKey(selectedDate ?? todayStart);\n  const daySlots =\n    selectedDate != null ? (slotsByDate[selectedDateKey] ?? []) : [];\n  const nextAvailableDate = findNextAvailableDate(\n    slotsByDate,\n    selectedTimeZone,\n    todayStart,\n  );\n\n  const handleMonthChange = (month: Date) => {\n    const monthKey = `${month.getFullYear()}-${month.getMonth()}`;\n    const monthCovered = coveredMonthsRef.current.has(buildKey(month));\n    setCurrentMonth(month);\n    // Flip to pending in the same render as the month change when the target\n    // month still needs fetching, so the skeleton shows immediately instead of\n    // the empty state flashing for a frame before the async effect runs.\n    if (!monthCovered) {\n      setIsPending(true);\n    }\n    // For an already-loaded month, select the first available day in the same\n    // update as the month change so the selection doesn't flicker.\n    const firstAvailable = pickDefaultSelectedDate(\n      month,\n      slotsByDateRef.current,\n      selectedTimeZone,\n      getTodayInTimeZone(selectedTimeZone),\n      calendarViewOptions,\n    );\n    if (firstAvailable) {\n      autoSelectedMonthRef.current = monthKey;\n      setSelectedDate(firstAvailable);\n      setSelectedTime(null);\n    } else {\n      if (monthCovered) {\n        autoSelectedMonthRef.current = monthKey;\n      }\n      setSelectedDate(undefined);\n      setSelectedTime(null);\n    }\n  };\n\n  const handleSelectDate = (nextDate: Date | undefined) => {\n    if (!nextDate) {\n      return;\n    }\n    setSelectedDate(nextDate);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${nextDate.getFullYear()}-${nextDate.getMonth()}`;\n    const isDifferentMonth =\n      nextDate.getMonth() !== currentMonth.getMonth() ||\n      nextDate.getFullYear() !== currentMonth.getFullYear();\n    if (isDifferentMonth) {\n      setCurrentMonth(nextDate);\n    }\n  };\n\n  const isDayDisabled = (date: Date) => {\n    const dayKey = toCalendarDateKey(date);\n    if (dayKey < toCalendarDateKey(todayStart)) {\n      return true;\n    }\n\n    return (slotsByDate[dayKey] ?? []).length === 0;\n  };\n\n  const goToDate = (date: Date) => {\n    setCurrentMonth(date);\n    setSelectedDate(date);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${date.getFullYear()}-${date.getMonth()}`;\n  };\n\n  const handleSelectTime = (time: string) => {\n    setSelectedTime(time);\n    setStep(\"confirm\");\n  };\n\n  const handleBack = () => {\n    setStep(\"select\");\n  };\n\n  const initialLoading = !meta;\n  const currentMonthCovered = coveredMonthsRef.current.has(\n    buildKey(currentMonth),\n  );\n  const availabilityLoading = isPending || !currentMonthCovered;\n\n  return {\n    calendarProps: {\n      availabilityLoading,\n      disabled: isDayDisabled,\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      initialLoading,\n      locale,\n      month: currentMonth,\n      onMonthChange: handleMonthChange,\n      onSelect: handleSelectDate,\n      selected: selectedDate,\n      startMonth,\n      today: todayStart,\n    },\n    durationProps: {\n      onValueChange: setSelectedDurationMinutes,\n      value: selectedDurationMinutes,\n    },\n    error,\n    loadingState: {\n      availability: availabilityLoading,\n      busy: initialLoading || availabilityLoading,\n      initial: initialLoading,\n    },\n    meta,\n    onBack: handleBack,\n    retry,\n    selectedTime: _selectedTime,\n    step,\n    timePickerProps: {\n      availabilityLoading,\n      currentMonth,\n      daySlots,\n      goToDate,\n      hasAvailabilityInView,\n      initialLoading,\n      is24Hour,\n      locale,\n      nextAvailableDate,\n      onIs24HourChange: setIs24Hour,\n      onSelectTime: handleSelectTime,\n      selectedDate,\n    },\n    timezoneProps: {\n      onValueChange: setSelectedTimeZone,\n      value: selectedTimeZone,\n    },\n  };\n}\n",
+      "content": "\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type FetchRawBookerResult,\n  fetchRawBookerDataAction,\n} from \"@/lib/booker/actions\";\nimport {\n  type BookerTarget,\n  getDynamicContext,\n  getOrgSlugFromTarget,\n} from \"@/lib/booker/target\";\nimport {\n  type BookerMeta,\n  type CalendarViewOptions,\n  extractBookingWindowEnd,\n  extractBookingWindowStart,\n  extractEventTypeInfo,\n  extractHost,\n  extractHostAvatars,\n  extractHostDisplayName,\n  extractMinimumBookingNotice,\n  extractSlotsByDate,\n  filterBookableSlots,\n  findNextAvailableDate,\n  getMinimumNavigableMonth,\n  getTodayInTimeZone,\n  getWeekStartsOn,\n  hasAvailabilityInVisibleGrid,\n  isCalendarMonthBefore,\n  pickDefaultSelectedDate,\n  prefers24Hour,\n  toCalendarDateKey,\n} from \"@/lib/booker/utils\";\n\nconst WINDOW_MONTHS = 3;\n\nexport type BookerErrorKind =\n  | \"not-found\"\n  | \"unpublished\"\n  | \"network\"\n  | \"unknown\";\n\nexport type BookerError = {\n  kind: BookerErrorKind;\n  message: string;\n};\n\nclass BookerDataError extends Error {\n  code: string;\n  constructor(message: string, code: string) {\n    super(message);\n    this.code = code;\n  }\n}\n\ntype ResolvedEventType = Extract<\n  FetchRawBookerResult,\n  { ok: true }\n>[\"resolved\"];\n\nexport type BookerInitialData = {\n  durationMinutes?: number;\n  monthIso: string;\n  monthsToFetch?: number;\n  result: FetchRawBookerResult;\n  timeZone: string;\n};\n\ntype DerivedBookerData = {\n  hasMultiDurationOptions: boolean;\n  meta: BookerMeta | null;\n  minimumBookingNotice: number;\n  selectedDurationMinutes: number | null;\n};\n\ntype HydratedBookerData = DerivedBookerData & {\n  coveredMonthKeys: Set<string>;\n  error: BookerError | null;\n  resolved: ResolvedEventType;\n  slotsByDate: Record<string, string[]>;\n  slotsCacheKey: string;\n};\n\nfunction classifyError(caught: unknown): BookerError {\n  const code = caught instanceof BookerDataError ? caught.code : \"\";\n  const message =\n    caught instanceof Error ? caught.message : \"Could not load booker data.\";\n\n  if (code === \"UNPUBLISHED\") {\n    return { kind: \"unpublished\", message };\n  }\n  if (code === \"NOT_FOUND\") {\n    return { kind: \"not-found\", message };\n  }\n  if (\n    code.startsWith(\"HTTP_4\") ||\n    code.startsWith(\"HTTP_5\") ||\n    message.includes(\"fetch\") ||\n    message.includes(\"network\") ||\n    message.includes(\"ETIMEDOUT\") ||\n    message.includes(\"ECONNREFUSED\") ||\n    /Cal\\.com API [45]\\d\\d/.test(message)\n  ) {\n    return { kind: \"network\", message };\n  }\n  return { kind: \"unknown\", message };\n}\n\nfunction getTargetIdentity(target: BookerTarget): string {\n  if (target.type === \"user\") {\n    return `user:${target.username}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"team\") {\n    return `team:${target.teamId}:${target.eventSlug}:${target.orgId ?? \"\"}`;\n  }\n  if (target.type === \"dynamic\") {\n    return `dynamic:${target.usernames.join(\",\")}:${target.orgSlug ?? \"\"}:${target.orgId ?? \"\"}`;\n  }\n  return `link:${target.bookingUrl}`;\n}\n\nfunction getMonthCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n  month: Date,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}|${month.getFullYear()}-${month.getMonth()}`;\n}\n\nfunction getSlotsCacheKey(\n  identity: string,\n  timeZone: string,\n  durationMinutes: number,\n): string {\n  return `${identity}|${timeZone}|${durationMinutes}`;\n}\n\nfunction deriveBookerData(\n  result: Extract<FetchRawBookerResult, { ok: true }>,\n  target: BookerTarget,\n): DerivedBookerData {\n  if (!result.raw.me) {\n    return {\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      selectedDurationMinutes: null,\n    };\n  }\n\n  const host = extractHost(result.raw.me);\n  const isDynamic = Boolean(getDynamicContext(target));\n  const hostAvatars = extractHostAvatars(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic, orgSlug: getOrgSlugFromTarget(target) },\n  );\n  const hostName = extractHostDisplayName(\n    result.raw.selectedEventType,\n    result.raw.me,\n    { dynamic: isDynamic },\n  );\n  const eventType = extractEventTypeInfo(result.raw.selectedEventType);\n  const minimumBookingNotice = extractMinimumBookingNotice(\n    result.raw.selectedEventType,\n  );\n  const hasMultiDurationOptions =\n    (eventType.eventTypeDurationOptions?.length ?? 0) > 1;\n  const selectedDurationMinutes =\n    eventType.eventTypeDurationOptions?.[0] ??\n    eventType.eventTypeDurationMinutes ??\n    null;\n\n  return {\n    hasMultiDurationOptions,\n    meta: {\n      bookingWindowEnd: extractBookingWindowEnd(result.raw.selectedEventType),\n      bookingWindowStart: extractBookingWindowStart(\n        result.raw.selectedEventType,\n      ),\n      eventTypeDescription: eventType.eventTypeDescription,\n      eventTypeDurationMinutes: eventType.eventTypeDurationMinutes,\n      eventTypeDurationOptions: eventType.eventTypeDurationOptions,\n      eventTypeImageUrl: result.raw.bannerUrl || eventType.eventTypeImageUrl,\n      eventTypeLocations: eventType.eventTypeLocations,\n      eventTypeTitle: eventType.eventTypeTitle,\n      disableGuests: eventType.disableGuests ?? false,\n      hostAvatarUrl: host.hostAvatarUrl,\n      hostAvatars,\n      hostName:\n        host.hostName === \"Unknown user\" && target.type === \"user\"\n          ? target.username\n          : result.raw.publicDisplayName || hostName,\n    },\n    minimumBookingNotice,\n    selectedDurationMinutes,\n  };\n}\n\nfunction hydrateBookerData({\n  initialData,\n  selectedTimeZone,\n  target,\n}: {\n  initialData?: BookerInitialData;\n  selectedTimeZone: string;\n  target: BookerTarget;\n}): HydratedBookerData | null {\n  if (!initialData) {\n    return null;\n  }\n\n  if (initialData.timeZone !== selectedTimeZone) {\n    return null;\n  }\n\n  if (!initialData.result.ok) {\n    const error = classifyError(\n      new BookerDataError(\n        initialData.result.error,\n        initialData.result.errorCode ?? \"UNKNOWN\",\n      ),\n    );\n\n    if (error.kind !== \"not-found\" && error.kind !== \"unpublished\") {\n      return null;\n    }\n\n    return {\n      coveredMonthKeys: new Set(),\n      error,\n      hasMultiDurationOptions: false,\n      meta: null,\n      minimumBookingNotice: 0,\n      resolved: { eventTypeId: null, eventTypeSlug: null },\n      selectedDurationMinutes: null,\n      slotsByDate: {},\n      slotsCacheKey: \"\",\n    };\n  }\n\n  const derived = deriveBookerData(initialData.result, target);\n  const durationMinutes =\n    derived.selectedDurationMinutes ?? initialData.durationMinutes ?? 30;\n  const identity = getTargetIdentity(target);\n  const anchor = new Date(initialData.monthIso);\n  const safeAnchor = Number.isNaN(anchor.getTime()) ? new Date() : anchor;\n  const monthsToFetch = Math.max(\n    1,\n    Math.floor(initialData.monthsToFetch ?? WINDOW_MONTHS),\n  );\n  const coveredMonthKeys = new Set<string>();\n\n  for (let offset = 0; offset < monthsToFetch; offset += 1) {\n    coveredMonthKeys.add(\n      getMonthCacheKey(\n        identity,\n        selectedTimeZone,\n        durationMinutes,\n        new Date(safeAnchor.getFullYear(), safeAnchor.getMonth() + offset, 1),\n      ),\n    );\n  }\n\n  const slotsByDate = filterBookableSlots(\n    extractSlotsByDate(initialData.result.raw.slots, selectedTimeZone),\n    selectedTimeZone,\n    derived.minimumBookingNotice,\n    new Date(),\n  );\n\n  return {\n    ...derived,\n    coveredMonthKeys,\n    error: null,\n    resolved: initialData.result.resolved,\n    selectedDurationMinutes: durationMinutes,\n    slotsByDate,\n    slotsCacheKey: getSlotsCacheKey(\n      identity,\n      selectedTimeZone,\n      durationMinutes,\n    ),\n  };\n}\n\ntype UseBookerParams = {\n  initialData?: BookerInitialData;\n  target: BookerTarget;\n  timezone?: string;\n};\n\ntype BookerLoadingState = {\n  availability: boolean;\n  busy: boolean;\n  initial: boolean;\n};\n\ntype BookerTimezoneState = {\n  onValueChange: (timeZone: string) => void;\n  value: string;\n};\n\ntype BookerDurationState = {\n  onValueChange: (minutes: number) => void;\n  value: number;\n};\n\ntype BookerCalendarState = {\n  availabilityLoading: boolean;\n  disabled: (date: Date) => boolean;\n  endMonth?: Date;\n  initialLoading: boolean;\n  locale: string;\n  month: Date;\n  onMonthChange: (month: Date) => void;\n  onSelect: (nextDate: Date | undefined) => void;\n  selected: Date | undefined;\n  startMonth: Date;\n  today: Date;\n};\n\ntype BookerTimePickerState = {\n  availabilityLoading: boolean;\n  currentMonth: Date;\n  daySlots: string[];\n  goToDate: (date: Date) => void;\n  hasAvailabilityInView: boolean;\n  initialLoading: boolean;\n  is24Hour: boolean;\n  locale: string;\n  nextAvailableDate: Date | null;\n  onIs24HourChange: (value: boolean) => void;\n  onSelectTime: (time: string) => void;\n  selectedDate: Date | undefined;\n};\n\nexport type BookerStep = \"select\" | \"confirm\";\n\nexport type BookerConfirmFormContext = {\n  disableGuests?: boolean;\n  durationMinutes: number;\n  includeLengthInMinutes: boolean;\n  locale: string;\n  locations?: BookerMeta[\"eventTypeLocations\"];\n  onBack: () => void;\n  selectedDate?: Date;\n  selectedTime: string | null;\n  target: BookerTarget;\n  timeZone: string;\n};\n\nexport type UseBookerResult = {\n  calendarProps: BookerCalendarState;\n  confirmFormProps: BookerConfirmFormContext;\n  durationProps: BookerDurationState;\n  error: BookerError | null;\n  loadingState: BookerLoadingState;\n  meta: BookerMeta | null;\n  retry: () => void;\n  step: BookerStep;\n  timePickerProps: BookerTimePickerState;\n  timezoneProps: BookerTimezoneState;\n};\n\n// All booker data + interaction logic: fetching/windowing cal.com availability,\n// derived selection state, and the handlers the UI wires to the calendar.\nexport function useBooker({\n  initialData,\n  target,\n  timezone,\n}: UseBookerParams): UseBookerResult {\n  const [timeZone] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().timeZone || \"UTC\",\n  );\n  const [locale] = useState(\n    () => Intl.DateTimeFormat().resolvedOptions().locale || \"en-US\",\n  );\n  const initialSelectedTimeZone = initialData?.timeZone ?? timezone ?? timeZone;\n  const hydratedData = useMemo(\n    () =>\n      hydrateBookerData({\n        initialData,\n        selectedTimeZone: initialSelectedTimeZone,\n        target,\n      }),\n    [initialData, initialSelectedTimeZone, target],\n  );\n  const initialCurrentMonth = useMemo(() => {\n    const initialMonth = initialData?.monthIso\n      ? new Date(initialData.monthIso)\n      : new Date();\n    return Number.isNaN(initialMonth.getTime()) ? new Date() : initialMonth;\n  }, [initialData?.monthIso]);\n  const initialSelectedDate = useMemo(() => {\n    if (!hydratedData || hydratedData.error) {\n      return undefined;\n    }\n\n    return (\n      pickDefaultSelectedDate(\n        initialCurrentMonth,\n        hydratedData.slotsByDate,\n        initialSelectedTimeZone,\n        getTodayInTimeZone(initialSelectedTimeZone),\n        {\n          endMonth: hydratedData.meta?.bookingWindowEnd ?? undefined,\n          shiftWeeks: true,\n          startMonth: getMinimumNavigableMonth(\n            initialSelectedTimeZone,\n            hydratedData.meta?.bookingWindowStart,\n          ),\n          weekStartsOn: getWeekStartsOn(locale),\n        },\n      ) ?? undefined\n    );\n  }, [hydratedData, initialCurrentMonth, initialSelectedTimeZone, locale]);\n  const [meta, setMeta] = useState<BookerMeta | null>(\n    hydratedData?.meta ?? null,\n  );\n  const [slotsByDate, setSlotsByDate] = useState<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const [error, setError] = useState<BookerError | null>(\n    hydratedData?.error ?? null,\n  );\n  const [isPending, setIsPending] = useState(false);\n  const [currentMonth, setCurrentMonth] = useState(initialCurrentMonth);\n  const [selectedTimeZone, setSelectedTimeZone] = useState(\n    initialSelectedTimeZone,\n  );\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(\n    initialSelectedDate,\n  );\n  const [_selectedTime, setSelectedTime] = useState<string | null>(null);\n  const [step, setStep] = useState<BookerStep>(\"select\");\n  const [selectedDurationMinutes, setSelectedDurationMinutes] = useState(\n    hydratedData?.selectedDurationMinutes ?? 30,\n  );\n  const [is24Hour, setIs24Hour] = useState(() => prefers24Hour(locale));\n  const coveredMonthsRef = useRef<Set<string>>(\n    hydratedData?.coveredMonthKeys ?? new Set(),\n  );\n  const resolvedRef = useRef<ResolvedEventType>(\n    hydratedData?.resolved ?? { eventTypeId: null, eventTypeSlug: null },\n  );\n  const [_eventTypeId, setEventTypeId] = useState<number | null>(\n    hydratedData?.resolved.eventTypeId ?? null,\n  );\n  const [_eventTypeSlug, setEventTypeSlug] = useState<string | null>(\n    hydratedData?.resolved.eventTypeSlug ?? null,\n  );\n  const lastIdentityRef = useRef<string | null>(null);\n  const lastTimeZoneRef = useRef<string | null>(null);\n  const lastDurationRef = useRef<number | null>(null);\n  const autoSelectedMonthRef = useRef<string | null>(\n    initialSelectedDate\n      ? `${initialCurrentMonth.getFullYear()}-${initialCurrentMonth.getMonth()}`\n      : null,\n  );\n  const slotsByDateRef = useRef<Record<string, string[]>>(\n    hydratedData?.slotsByDate ?? {},\n  );\n  const slotsCacheRef = useRef<Map<string, Record<string, string[]>>>(\n    new Map(\n      hydratedData?.slotsCacheKey\n        ? [[hydratedData.slotsCacheKey, hydratedData.slotsByDate]]\n        : [],\n    ),\n  );\n  const minimumBookingNoticeRef = useRef(\n    hydratedData?.minimumBookingNotice ?? 0,\n  );\n  const hasMultiDurationOptionsRef = useRef(\n    hydratedData?.hasMultiDurationOptions ?? false,\n  );\n  const selectedDateRef = useRef(selectedDate);\n  selectedDateRef.current = selectedDate;\n  const inFlightMonthsRef = useRef<Map<string, Promise<void>>>(new Map());\n  const availabilityRequestVersionRef = useRef(0);\n  const skipInitialWarmRef = useRef(\n    Boolean(hydratedData && !hydratedData.error),\n  );\n\n  const targetIdentity = useCallback((): string => {\n    return getTargetIdentity(target);\n  }, [target]);\n\n  const buildKey = useCallback(\n    (month: Date) =>\n      getMonthCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n        month,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const slotsCacheKey = useCallback(\n    () =>\n      getSlotsCacheKey(\n        targetIdentity(),\n        selectedTimeZone,\n        selectedDurationMinutes,\n      ),\n    [selectedDurationMinutes, selectedTimeZone, targetIdentity],\n  );\n\n  const restoreSlotsFromCache = useCallback(() => {\n    const cached = slotsCacheRef.current.get(slotsCacheKey()) ?? {};\n    slotsByDateRef.current = cached;\n    setSlotsByDate(cached);\n  }, [slotsCacheKey]);\n\n  useLayoutEffect(() => {\n    restoreSlotsFromCache();\n  }, [restoreSlotsFromCache]);\n\n  // Fetch a window of several months in a single request, anchored at `anchor`.\n  const fetchWindow = useCallback(\n    async (anchor: Date): Promise<void> => {\n      const anchorKey = buildKey(anchor);\n\n      if (coveredMonthsRef.current.has(anchorKey)) {\n        return;\n      }\n\n      const existingRequest = inFlightMonthsRef.current.get(anchorKey);\n      if (existingRequest) {\n        await existingRequest;\n        return;\n      }\n\n      const requestVersion = availabilityRequestVersionRef.current;\n      const windowMonthKeys = Array.from(\n        { length: WINDOW_MONTHS },\n        (_, offset) =>\n          buildKey(\n            new Date(anchor.getFullYear(), anchor.getMonth() + offset, 1),\n          ),\n      );\n      const request = (async () => {\n        const durationMinutes =\n          getDynamicContext(target) || hasMultiDurationOptionsRef.current\n            ? selectedDurationMinutes\n            : undefined;\n\n        const result = await fetchRawBookerDataAction({\n          durationMinutes,\n          fetchMeta: resolvedRef.current.eventTypeId == null,\n          monthIso: anchor.toISOString(),\n          monthsToFetch: WINDOW_MONTHS,\n          target,\n          timeZone: selectedTimeZone,\n          eventTypeId: resolvedRef.current.eventTypeId ?? undefined,\n        });\n\n        if (!result.ok) {\n          throw new BookerDataError(\n            result.error,\n            result.errorCode ?? \"UNKNOWN\",\n          );\n        }\n\n        if (availabilityRequestVersionRef.current !== requestVersion) {\n          return;\n        }\n\n        resolvedRef.current = result.resolved;\n        setEventTypeId(result.resolved.eventTypeId);\n        setEventTypeSlug(result.resolved.eventTypeSlug);\n\n        for (let offset = 0; offset < WINDOW_MONTHS; offset += 1) {\n          const month = new Date(\n            anchor.getFullYear(),\n            anchor.getMonth() + offset,\n            1,\n          );\n          coveredMonthsRef.current.add(buildKey(month));\n        }\n\n        // The host/event metadata only comes back on the full (non slots-only)\n        // fetch, so set it once when present.\n        if (result.raw.me) {\n          const derived = deriveBookerData(result, target);\n          minimumBookingNoticeRef.current = derived.minimumBookingNotice;\n          hasMultiDurationOptionsRef.current = derived.hasMultiDurationOptions;\n          setMeta((prev) => prev ?? derived.meta);\n\n          const defaultDuration = derived.selectedDurationMinutes ?? 30;\n          if (derived.meta?.eventTypeDurationOptions?.length) {\n            if (\n              !derived.meta.eventTypeDurationOptions.includes(\n                selectedDurationMinutes,\n              )\n            ) {\n              setSelectedDurationMinutes(defaultDuration);\n            }\n          } else if (\n            derived.meta?.eventTypeDurationMinutes != null &&\n            selectedDurationMinutes !== derived.meta.eventTypeDurationMinutes\n          ) {\n            setSelectedDurationMinutes(derived.meta.eventTypeDurationMinutes);\n          }\n        }\n\n        const windowSlots = filterBookableSlots(\n          extractSlotsByDate(result.raw.slots, selectedTimeZone),\n          selectedTimeZone,\n          minimumBookingNoticeRef.current,\n          new Date(),\n        );\n        const cacheKey = getSlotsCacheKey(\n          targetIdentity(),\n          selectedTimeZone,\n          selectedDurationMinutes,\n        );\n        const mergedSlots = {\n          ...(slotsCacheRef.current.get(cacheKey) ?? {}),\n          ...windowSlots,\n        };\n        slotsCacheRef.current.set(cacheKey, mergedSlots);\n        slotsByDateRef.current = mergedSlots;\n        setSlotsByDate(mergedSlots);\n      })();\n\n      for (const monthKey of windowMonthKeys) {\n        inFlightMonthsRef.current.set(monthKey, request);\n      }\n\n      try {\n        await request;\n      } finally {\n        for (const monthKey of windowMonthKeys) {\n          if (inFlightMonthsRef.current.get(monthKey) === request) {\n            inFlightMonthsRef.current.delete(monthKey);\n          }\n        }\n      }\n    },\n    [\n      buildKey,\n      selectedDurationMinutes,\n      selectedTimeZone,\n      target,\n      targetIdentity,\n    ],\n  );\n\n  const todayStart = useMemo(\n    () => getTodayInTimeZone(selectedTimeZone),\n    [selectedTimeZone],\n  );\n  const startMonth = useMemo(\n    () => getMinimumNavigableMonth(selectedTimeZone, meta?.bookingWindowStart),\n    [meta?.bookingWindowStart, selectedTimeZone],\n  );\n  const calendarViewOptions = useMemo((): CalendarViewOptions => {\n    return {\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      shiftWeeks: true,\n      startMonth,\n      weekStartsOn: getWeekStartsOn(locale),\n    };\n  }, [locale, meta?.bookingWindowEnd, startMonth]);\n\n  const hasAvailabilityInView = useMemo(\n    () =>\n      hasAvailabilityInVisibleGrid(\n        currentMonth,\n        slotsByDate,\n        todayStart,\n        calendarViewOptions,\n      ),\n    [calendarViewOptions, currentMonth, slotsByDate, todayStart],\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const load = async () => {\n      const identity = targetIdentity();\n      let deferLoadForMonthSync = false;\n\n      // A different user/event means a different event type and metadata, so\n      // reset everything and force a full fetch.\n      if (\n        lastIdentityRef.current !== null &&\n        lastIdentityRef.current !== identity\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        resolvedRef.current = { eventTypeId: null, eventTypeSlug: null };\n        setEventTypeId(null);\n        setEventTypeSlug(null);\n        hasMultiDurationOptionsRef.current = false;\n        slotsCacheRef.current = new Map();\n        slotsByDateRef.current = {};\n        autoSelectedMonthRef.current = null;\n        setMeta(null);\n        setSelectedDurationMinutes(30);\n        setSlotsByDate({});\n      } else if (\n        lastDurationRef.current !== null &&\n        lastDurationRef.current !== selectedDurationMinutes\n      ) {\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n      } else if (\n        lastTimeZoneRef.current !== null &&\n        lastTimeZoneRef.current !== selectedTimeZone\n      ) {\n        coveredMonthsRef.current = new Set();\n        inFlightMonthsRef.current.clear();\n        availabilityRequestVersionRef.current += 1;\n        restoreSlotsFromCache();\n        autoSelectedMonthRef.current = null;\n        setSelectedTime(null);\n\n        const minMonth = getMinimumNavigableMonth(\n          selectedTimeZone,\n          meta?.bookingWindowStart,\n        );\n        if (isCalendarMonthBefore(currentMonth, minMonth)) {\n          setCurrentMonth(minMonth);\n          deferLoadForMonthSync = true;\n        } else {\n          const todayInTz = getTodayInTimeZone(selectedTimeZone);\n          if (\n            selectedDateRef.current &&\n            toCalendarDateKey(selectedDateRef.current) <\n              toCalendarDateKey(todayInTz)\n          ) {\n            setSelectedDate(undefined);\n          }\n        }\n      }\n      lastIdentityRef.current = identity;\n      lastTimeZoneRef.current = selectedTimeZone;\n      lastDurationRef.current = selectedDurationMinutes;\n\n      if (deferLoadForMonthSync) {\n        return;\n      }\n\n      if (!coveredMonthsRef.current.has(buildKey(currentMonth))) {\n        setIsPending(true);\n        try {\n          await fetchWindow(currentMonth);\n          if (cancelled) {\n            return;\n          }\n          setError(null);\n        } catch (caught) {\n          if (cancelled) {\n            return;\n          }\n          setError(classifyError(caught));\n          return;\n        } finally {\n          if (!cancelled) {\n            setIsPending(false);\n          }\n        }\n      } else {\n        setError(null);\n        setIsPending(false);\n      }\n\n      // Auto-select the first available day the first time this month's\n      // availability is known (on load and on month navigation).\n      const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n      if (!cancelled && autoSelectedMonthRef.current !== monthKey) {\n        const firstAvailable = pickDefaultSelectedDate(\n          currentMonth,\n          slotsByDateRef.current,\n          selectedTimeZone,\n          getTodayInTimeZone(selectedTimeZone),\n          calendarViewOptions,\n        );\n        if (firstAvailable) {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(firstAvailable);\n          setSelectedTime(null);\n        } else {\n          autoSelectedMonthRef.current = monthKey;\n          setSelectedDate(undefined);\n          setSelectedTime(null);\n        }\n      }\n\n      // Warm the next uncovered window boundary, not just the adjacent month.\n      // This keeps navigation instant when the user reaches the end of the\n      // currently-covered 3-month range.\n      const nextWindow = new Date(\n        currentMonth.getFullYear(),\n        currentMonth.getMonth() + WINDOW_MONTHS,\n        1,\n      );\n      if (skipInitialWarmRef.current) {\n        skipInitialWarmRef.current = false;\n        return;\n      }\n      if (!coveredMonthsRef.current.has(buildKey(nextWindow))) {\n        void fetchWindow(nextWindow).catch(() => {});\n      }\n    };\n\n    void load();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    buildKey,\n    currentMonth,\n    fetchWindow,\n    selectedDurationMinutes,\n    selectedTimeZone,\n    meta?.bookingWindowStart,\n    calendarViewOptions,\n    restoreSlotsFromCache,\n    targetIdentity,\n  ]);\n\n  const [retryCounter, setRetryCounter] = useState(0);\n\n  const retry = useCallback(() => {\n    coveredMonthsRef.current = new Set();\n    inFlightMonthsRef.current.clear();\n    availabilityRequestVersionRef.current += 1;\n    slotsCacheRef.current = new Map();\n    slotsByDateRef.current = {};\n    autoSelectedMonthRef.current = null;\n    setSlotsByDate({});\n    setError(null);\n    setRetryCounter((c) => c + 1);\n  }, []);\n\n  // Re-trigger the main load effect when the user retries.\n  useEffect(() => {\n    // The first render (retryCounter === 0) is handled by the main effect.\n    if (retryCounter === 0) return;\n    setIsPending(true);\n    let cancelled = false;\n\n    (async () => {\n      try {\n        await fetchWindow(currentMonth);\n        if (cancelled) return;\n        setError(null);\n\n        const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;\n        if (autoSelectedMonthRef.current !== monthKey) {\n          const firstAvailable = pickDefaultSelectedDate(\n            currentMonth,\n            slotsByDateRef.current,\n            selectedTimeZone,\n            getTodayInTimeZone(selectedTimeZone),\n            calendarViewOptions,\n          );\n          if (firstAvailable) {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(firstAvailable);\n            setSelectedTime(null);\n          } else {\n            autoSelectedMonthRef.current = monthKey;\n            setSelectedDate(undefined);\n            setSelectedTime(null);\n          }\n        }\n      } catch (caught) {\n        if (cancelled) return;\n        setError(classifyError(caught));\n      } finally {\n        if (!cancelled) setIsPending(false);\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    retryCounter,\n    fetchWindow,\n    currentMonth,\n    selectedTimeZone,\n    calendarViewOptions,\n  ]);\n\n  useEffect(() => {\n    if (!timezone) {\n      return;\n    }\n    setSelectedTimeZone(timezone);\n  }, [timezone]);\n\n  const selectedDateKey = toCalendarDateKey(selectedDate ?? todayStart);\n  const daySlots =\n    selectedDate != null ? (slotsByDate[selectedDateKey] ?? []) : [];\n  const nextAvailableDate = findNextAvailableDate(\n    slotsByDate,\n    selectedTimeZone,\n    todayStart,\n  );\n\n  const handleMonthChange = (month: Date) => {\n    const monthKey = `${month.getFullYear()}-${month.getMonth()}`;\n    const monthCovered = coveredMonthsRef.current.has(buildKey(month));\n    setCurrentMonth(month);\n    // Flip to pending in the same render as the month change when the target\n    // month still needs fetching, so the skeleton shows immediately instead of\n    // the empty state flashing for a frame before the async effect runs.\n    if (!monthCovered) {\n      setIsPending(true);\n    }\n    // For an already-loaded month, select the first available day in the same\n    // update as the month change so the selection doesn't flicker.\n    const firstAvailable = pickDefaultSelectedDate(\n      month,\n      slotsByDateRef.current,\n      selectedTimeZone,\n      getTodayInTimeZone(selectedTimeZone),\n      calendarViewOptions,\n    );\n    if (firstAvailable) {\n      autoSelectedMonthRef.current = monthKey;\n      setSelectedDate(firstAvailable);\n      setSelectedTime(null);\n    } else {\n      if (monthCovered) {\n        autoSelectedMonthRef.current = monthKey;\n      }\n      setSelectedDate(undefined);\n      setSelectedTime(null);\n    }\n  };\n\n  const handleSelectDate = (nextDate: Date | undefined) => {\n    if (!nextDate) {\n      return;\n    }\n    setSelectedDate(nextDate);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${nextDate.getFullYear()}-${nextDate.getMonth()}`;\n    const isDifferentMonth =\n      nextDate.getMonth() !== currentMonth.getMonth() ||\n      nextDate.getFullYear() !== currentMonth.getFullYear();\n    if (isDifferentMonth) {\n      setCurrentMonth(nextDate);\n    }\n  };\n\n  const isDayDisabled = (date: Date) => {\n    const dayKey = toCalendarDateKey(date);\n    if (dayKey < toCalendarDateKey(todayStart)) {\n      return true;\n    }\n\n    return (slotsByDate[dayKey] ?? []).length === 0;\n  };\n\n  const goToDate = (date: Date) => {\n    setCurrentMonth(date);\n    setSelectedDate(date);\n    setSelectedTime(null);\n    autoSelectedMonthRef.current = `${date.getFullYear()}-${date.getMonth()}`;\n  };\n\n  const handleSelectTime = (time: string) => {\n    setSelectedTime(time);\n    setStep(\"confirm\");\n  };\n\n  const handleBack = useCallback(() => {\n    setStep(\"select\");\n  }, []);\n\n  const initialLoading = !meta;\n  const currentMonthCovered = coveredMonthsRef.current.has(\n    buildKey(currentMonth),\n  );\n  const availabilityLoading = isPending || !currentMonthCovered;\n\n  const confirmFormProps = useMemo((): BookerConfirmFormContext => {\n    return {\n      disableGuests: meta?.disableGuests,\n      durationMinutes: selectedDurationMinutes,\n      includeLengthInMinutes: (meta?.eventTypeDurationOptions?.length ?? 0) > 1,\n      locale,\n      locations: meta?.eventTypeLocations,\n      onBack: handleBack,\n      selectedDate,\n      selectedTime: _selectedTime,\n      target,\n      timeZone: selectedTimeZone,\n    };\n  }, [\n    _selectedTime,\n    locale,\n    meta?.disableGuests,\n    meta?.eventTypeDurationOptions,\n    meta?.eventTypeLocations,\n    selectedDate,\n    selectedDurationMinutes,\n    selectedTimeZone,\n    target,\n    handleBack,\n  ]);\n\n  return {\n    calendarProps: {\n      availabilityLoading,\n      disabled: isDayDisabled,\n      endMonth: meta?.bookingWindowEnd ?? undefined,\n      initialLoading,\n      locale,\n      month: currentMonth,\n      onMonthChange: handleMonthChange,\n      onSelect: handleSelectDate,\n      selected: selectedDate,\n      startMonth,\n      today: todayStart,\n    },\n    confirmFormProps,\n    durationProps: {\n      onValueChange: setSelectedDurationMinutes,\n      value: selectedDurationMinutes,\n    },\n    error,\n    loadingState: {\n      availability: availabilityLoading,\n      busy: initialLoading || availabilityLoading,\n      initial: initialLoading,\n    },\n    meta,\n    retry,\n    step,\n    timePickerProps: {\n      availabilityLoading,\n      currentMonth,\n      daySlots,\n      goToDate,\n      hasAvailabilityInView,\n      initialLoading,\n      is24Hour,\n      locale,\n      nextAvailableDate,\n      onIs24HourChange: setIs24Hour,\n      onSelectTime: handleSelectTime,\n      selectedDate,\n    },\n    timezoneProps: {\n      onValueChange: setSelectedTimeZone,\n      value: selectedTimeZone,\n    },\n  };\n}\n",
       "type": "registry:lib",
       "target": "lib/booker/use-booker.ts"
     },
     {
       "path": "registry/default/atoms/lib/booker/target.ts",
-      "content": "export type DynamicTargetContext = {\n  usernames: string[];\n  orgId?: number;\n  orgSlug?: string;\n};\n\nexport type BookerTarget =\n  | {\n      type: \"user\";\n      username: string;\n      eventSlug: string;\n      orgId?: number;\n    }\n  | {\n      type: \"team\";\n      teamId: number;\n      eventSlug: string;\n      orgId?: number;\n    }\n  | {\n      type: \"dynamic\";\n      usernames: string[];\n      orgId?: number;\n      orgSlug?: string;\n    }\n  | {\n      type: \"link\";\n      bookingUrl: string;\n      orgId?: number;\n    };\n\nexport type LegacyBookerTargetInput = {\n  username?: string | string[];\n  eventSlug?: string;\n  isTeamEvent?: boolean;\n  teamId?: number;\n  bookingUrl?: string;\n  orgId?: number;\n};\n\nexport type ParsedLinkTarget =\n  | {\n      type: \"user\";\n      username: string;\n      eventSlug: string;\n      orgId?: number;\n      orgSlug?: string;\n    }\n  | {\n      type: \"dynamic\";\n      usernames: string[];\n      orgId?: number;\n      orgSlug?: string;\n    }\n  | {\n      type: \"teamSlug\";\n      teamSlug: string;\n      eventSlug: string;\n      orgId?: number;\n      orgSlug?: string;\n    };\n\nconst DYNAMIC_EVENT_SLUG = \"dynamic\";\n\nfunction parsePositiveInt(value: string | null): number | undefined {\n  if (!value) {\n    return undefined;\n  }\n\n  const parsed = Number(value);\n  return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined;\n}\n\nfunction toUrl(value: string): URL {\n  const trimmed = value.trim();\n  if (!trimmed) {\n    throw new Error(\"Pass a non-empty bookingUrl.\");\n  }\n\n  if (/^https?:\\/\\//i.test(trimmed)) {\n    return new URL(trimmed);\n  }\n\n  return new URL(`https://${trimmed}`);\n}\n\nfunction parseOrgSlugFromHostname(hostname: string): string | undefined {\n  const match = hostname.match(/^([a-z0-9-]+)\\.cal\\.com$/i);\n  const subdomain = match?.[1]?.toLowerCase();\n\n  if (!subdomain) {\n    return undefined;\n  }\n\n  if ([\"api\", \"app\", \"cal\", \"www\"].includes(subdomain)) {\n    return undefined;\n  }\n\n  return subdomain;\n}\n\nfunction parseDynamicUsernames(\n  pathUsername: string,\n  userParam: string | null,\n): string[] {\n  const source = userParam ?? decodeURIComponent(pathUsername);\n  return source\n    .split(/[+,\\s]+/)\n    .map((part) => part.trim())\n    .filter(Boolean);\n}\n\nexport function getOrgSlugFromTarget(target: BookerTarget): string | undefined {\n  if (target.type === \"dynamic\") {\n    return target.orgSlug;\n  }\n\n  if (target.type === \"link\") {\n    return parseBookingUrlTarget(target.bookingUrl, target.orgId).orgSlug;\n  }\n\n  return undefined;\n}\n\nexport function getUserSlotParamsFromTarget(\n  target: BookerTarget,\n): { username: string; eventTypeSlug: string } | null {\n  if (target.type === \"user\") {\n    return { eventTypeSlug: target.eventSlug, username: target.username };\n  }\n\n  if (target.type === \"link\") {\n    const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n    if (parsed.type === \"user\") {\n      return { eventTypeSlug: parsed.eventSlug, username: parsed.username };\n    }\n  }\n\n  return null;\n}\n\nexport function getPublicEventBannerParamsFromTarget(target: BookerTarget): {\n  username: string;\n  eventSlug: string;\n  orgSlug: string;\n  isTeamEvent?: boolean;\n} | null {\n  if (target.type !== \"link\") {\n    return null;\n  }\n\n  const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n  if (!parsed.orgSlug) {\n    return null;\n  }\n\n  if (parsed.type === \"user\") {\n    return {\n      eventSlug: parsed.eventSlug,\n      orgSlug: parsed.orgSlug,\n      username: parsed.username,\n    };\n  }\n\n  if (parsed.type === \"teamSlug\") {\n    return {\n      eventSlug: parsed.eventSlug,\n      isTeamEvent: true,\n      orgSlug: parsed.orgSlug,\n      username: parsed.teamSlug,\n    };\n  }\n\n  if (parsed.type === \"dynamic\") {\n    return {\n      eventSlug: \"dynamic\",\n      orgSlug: parsed.orgSlug,\n      username: parsed.usernames.join(\"+\"),\n    };\n  }\n\n  return null;\n}\n\nexport function getDynamicContext(\n  target: BookerTarget,\n): DynamicTargetContext | null {\n  if (target.type === \"dynamic\") {\n    return {\n      orgId: target.orgId,\n      orgSlug: target.orgSlug,\n      usernames: target.usernames,\n    };\n  }\n\n  if (target.type === \"link\") {\n    const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n    if (parsed.type === \"dynamic\") {\n      return {\n        orgId: parsed.orgId,\n        orgSlug: parsed.orgSlug,\n        usernames: parsed.usernames,\n      };\n    }\n  }\n\n  return null;\n}\n\nexport function parseBookingUrlTarget(\n  bookingUrl: string,\n  fallbackOrgId?: number,\n): ParsedLinkTarget {\n  const url = toUrl(bookingUrl);\n  const parts = url.pathname.split(\"/\").filter(Boolean);\n  const orgId =\n    parsePositiveInt(url.searchParams.get(\"orgId\")) ?? fallbackOrgId;\n  const orgSlug = parseOrgSlugFromHostname(url.hostname);\n\n  if (parts.length < 2) {\n    throw new Error(\n      \"bookingUrl must include at least username/team and eventSlug.\",\n    );\n  }\n\n  if (parts[0] === \"team\" && parts.length >= 3) {\n    return {\n      eventSlug: decodeURIComponent(parts[2] ?? \"\"),\n      orgId,\n      orgSlug,\n      teamSlug: decodeURIComponent(parts[1] ?? \"\"),\n      type: \"teamSlug\",\n    };\n  }\n\n  const eventSlug = decodeURIComponent(parts[1] ?? \"\");\n  const pathUsername = decodeURIComponent(parts[0] ?? \"\");\n\n  if (eventSlug === DYNAMIC_EVENT_SLUG) {\n    const usernames = parseDynamicUsernames(\n      pathUsername,\n      url.searchParams.get(\"user\"),\n    );\n    if (usernames.length >= 2) {\n      return { orgId, orgSlug, type: \"dynamic\", usernames };\n    }\n  }\n\n  return {\n    eventSlug,\n    orgId,\n    orgSlug,\n    type: \"user\",\n    username: pathUsername,\n  };\n}\n\nexport function normalizeLegacyTarget(\n  props: LegacyBookerTargetInput,\n): BookerTarget {\n  if (props.bookingUrl) {\n    return { bookingUrl: props.bookingUrl, orgId: props.orgId, type: \"link\" };\n  }\n\n  if (props.isTeamEvent) {\n    if (!props.teamId || !props.eventSlug) {\n      throw new Error(\n        \"For team events, pass teamId and eventSlug in target or legacy props.\",\n      );\n    }\n\n    return {\n      eventSlug: props.eventSlug,\n      orgId: props.orgId,\n      teamId: props.teamId,\n      type: \"team\",\n    };\n  }\n\n  const username = Array.isArray(props.username)\n    ? props.username.join(\"+\")\n    : props.username;\n  if (!username || !props.eventSlug) {\n    throw new Error(\"Pass target or username + eventSlug.\");\n  }\n\n  return {\n    eventSlug: props.eventSlug,\n    orgId: props.orgId,\n    type: \"user\",\n    username,\n  };\n}\n",
+      "content": "export type DynamicTargetContext = {\n  usernames: string[];\n  orgId?: number;\n  orgSlug?: string;\n};\n\nexport type BookerTarget =\n  | {\n      type: \"user\";\n      username: string;\n      eventSlug: string;\n      orgId?: number;\n    }\n  | {\n      type: \"team\";\n      teamId: number;\n      eventSlug: string;\n      orgId?: number;\n    }\n  | {\n      type: \"dynamic\";\n      usernames: string[];\n      orgId?: number;\n      orgSlug?: string;\n    }\n  | {\n      type: \"link\";\n      bookingUrl: string;\n      orgId?: number;\n    };\n\nexport type LegacyBookerTargetInput = {\n  username?: string | string[];\n  eventSlug?: string;\n  isTeamEvent?: boolean;\n  teamId?: number;\n  bookingUrl?: string;\n  orgId?: number;\n};\n\nexport type ParsedLinkTarget =\n  | {\n      type: \"user\";\n      username: string;\n      eventSlug: string;\n      orgId?: number;\n      orgSlug?: string;\n    }\n  | {\n      type: \"dynamic\";\n      usernames: string[];\n      orgId?: number;\n      orgSlug?: string;\n    }\n  | {\n      type: \"teamSlug\";\n      teamSlug: string;\n      eventSlug: string;\n      orgId?: number;\n      orgSlug?: string;\n    };\n\nconst DYNAMIC_EVENT_SLUG = \"dynamic\";\n\nfunction parsePositiveInt(value: string | null): number | undefined {\n  if (!value) {\n    return undefined;\n  }\n\n  const parsed = Number(value);\n  return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined;\n}\n\nfunction toUrl(value: string): URL {\n  const trimmed = value.trim();\n  if (!trimmed) {\n    throw new Error(\"Pass a non-empty bookingUrl.\");\n  }\n\n  if (/^https?:\\/\\//i.test(trimmed)) {\n    return new URL(trimmed);\n  }\n\n  return new URL(`https://${trimmed}`);\n}\n\nfunction parseOrgSlugFromHostname(hostname: string): string | undefined {\n  const match = hostname.match(/^([a-z0-9-]+)\\.cal\\.com$/i);\n  const subdomain = match?.[1]?.toLowerCase();\n\n  if (!subdomain) {\n    return undefined;\n  }\n\n  if ([\"api\", \"app\", \"cal\", \"www\"].includes(subdomain)) {\n    return undefined;\n  }\n\n  return subdomain;\n}\n\nfunction parseDynamicUsernames(\n  pathUsername: string,\n  userParam: string | null,\n): string[] {\n  const source = userParam ?? decodeURIComponent(pathUsername);\n  return source\n    .split(/[+,\\s]+/)\n    .map((part) => part.trim())\n    .filter(Boolean);\n}\n\nexport function getOrgSlugFromTarget(target: BookerTarget): string | undefined {\n  if (target.type === \"dynamic\") {\n    return target.orgSlug;\n  }\n\n  if (target.type === \"link\") {\n    return parseBookingUrlTarget(target.bookingUrl, target.orgId).orgSlug;\n  }\n\n  return undefined;\n}\n\nexport function getUserSlotParamsFromTarget(\n  target: BookerTarget,\n): { username: string; eventTypeSlug: string } | null {\n  const params = getCreateBookingParamsFromTarget(target);\n  if (!params.username || !params.eventTypeSlug) {\n    return null;\n  }\n\n  return { eventTypeSlug: params.eventTypeSlug, username: params.username };\n}\n\nexport type CreateBookingTargetParams = {\n  eventTypeSlug?: string;\n  organizationSlug?: string;\n  teamSlug?: string;\n  username?: string;\n};\n\nexport function getCreateBookingParamsFromTarget(\n  target: BookerTarget,\n  resolved?: { eventTypeSlug?: string | null },\n): CreateBookingTargetParams {\n  if (target.type === \"user\") {\n    return {\n      eventTypeSlug: target.eventSlug,\n      organizationSlug: getOrgSlugFromTarget(target),\n      username: target.username,\n    };\n  }\n\n  if (target.type === \"team\") {\n    return {\n      eventTypeSlug: target.eventSlug,\n      organizationSlug: getOrgSlugFromTarget(target),\n    };\n  }\n\n  if (target.type === \"link\") {\n    const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n    if (parsed.type === \"user\") {\n      return {\n        eventTypeSlug: parsed.eventSlug,\n        organizationSlug: parsed.orgSlug,\n        username: parsed.username,\n      };\n    }\n\n    if (parsed.type === \"teamSlug\") {\n      return {\n        eventTypeSlug: parsed.eventSlug,\n        organizationSlug: parsed.orgSlug,\n        teamSlug: parsed.teamSlug,\n      };\n    }\n  }\n\n  return {\n    eventTypeSlug: resolved?.eventTypeSlug ?? undefined,\n    organizationSlug: getOrgSlugFromTarget(target),\n  };\n}\n\nexport function getPublicEventBannerParamsFromTarget(target: BookerTarget): {\n  username: string;\n  eventSlug: string;\n  orgSlug: string;\n  isTeamEvent?: boolean;\n} | null {\n  if (target.type !== \"link\") {\n    return null;\n  }\n\n  const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n  if (!parsed.orgSlug) {\n    return null;\n  }\n\n  if (parsed.type === \"user\") {\n    return {\n      eventSlug: parsed.eventSlug,\n      orgSlug: parsed.orgSlug,\n      username: parsed.username,\n    };\n  }\n\n  if (parsed.type === \"teamSlug\") {\n    return {\n      eventSlug: parsed.eventSlug,\n      isTeamEvent: true,\n      orgSlug: parsed.orgSlug,\n      username: parsed.teamSlug,\n    };\n  }\n\n  if (parsed.type === \"dynamic\") {\n    return {\n      eventSlug: \"dynamic\",\n      orgSlug: parsed.orgSlug,\n      username: parsed.usernames.join(\"+\"),\n    };\n  }\n\n  return null;\n}\n\nexport function getDynamicContext(\n  target: BookerTarget,\n): DynamicTargetContext | null {\n  if (target.type === \"dynamic\") {\n    return {\n      orgId: target.orgId,\n      orgSlug: target.orgSlug,\n      usernames: target.usernames,\n    };\n  }\n\n  if (target.type === \"link\") {\n    const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);\n    if (parsed.type === \"dynamic\") {\n      return {\n        orgId: parsed.orgId,\n        orgSlug: parsed.orgSlug,\n        usernames: parsed.usernames,\n      };\n    }\n  }\n\n  return null;\n}\n\nexport function parseBookingUrlTarget(\n  bookingUrl: string,\n  fallbackOrgId?: number,\n): ParsedLinkTarget {\n  const url = toUrl(bookingUrl);\n  const parts = url.pathname.split(\"/\").filter(Boolean);\n  const orgId =\n    parsePositiveInt(url.searchParams.get(\"orgId\")) ?? fallbackOrgId;\n  const orgSlug = parseOrgSlugFromHostname(url.hostname);\n\n  if (parts.length < 2) {\n    throw new Error(\n      \"bookingUrl must include at least username/team and eventSlug.\",\n    );\n  }\n\n  if (parts[0] === \"team\" && parts.length >= 3) {\n    return {\n      eventSlug: decodeURIComponent(parts[2] ?? \"\"),\n      orgId,\n      orgSlug,\n      teamSlug: decodeURIComponent(parts[1] ?? \"\"),\n      type: \"teamSlug\",\n    };\n  }\n\n  const eventSlug = decodeURIComponent(parts[1] ?? \"\");\n  const pathUsername = decodeURIComponent(parts[0] ?? \"\");\n\n  if (eventSlug === DYNAMIC_EVENT_SLUG) {\n    const usernames = parseDynamicUsernames(\n      pathUsername,\n      url.searchParams.get(\"user\"),\n    );\n    if (usernames.length >= 2) {\n      return { orgId, orgSlug, type: \"dynamic\", usernames };\n    }\n  }\n\n  return {\n    eventSlug,\n    orgId,\n    orgSlug,\n    type: \"user\",\n    username: pathUsername,\n  };\n}\n\nexport function normalizeLegacyTarget(\n  props: LegacyBookerTargetInput,\n): BookerTarget {\n  if (props.bookingUrl) {\n    return { bookingUrl: props.bookingUrl, orgId: props.orgId, type: \"link\" };\n  }\n\n  if (props.isTeamEvent) {\n    if (!props.teamId || !props.eventSlug) {\n      throw new Error(\n        \"For team events, pass teamId and eventSlug in target or legacy props.\",\n      );\n    }\n\n    return {\n      eventSlug: props.eventSlug,\n      orgId: props.orgId,\n      teamId: props.teamId,\n      type: \"team\",\n    };\n  }\n\n  const username = Array.isArray(props.username)\n    ? props.username.join(\"+\")\n    : props.username;\n  if (!username || !props.eventSlug) {\n    throw new Error(\"Pass target or username + eventSlug.\");\n  }\n\n  return {\n    eventSlug: props.eventSlug,\n    orgId: props.orgId,\n    type: \"user\",\n    username,\n  };\n}\n",
       "type": "registry:lib",
       "target": "lib/booker/target.ts"
     },
     {
       "path": "registry/default/atoms/lib/booker/utils.ts",
-      "content": "export type EventTypeLocationOption = {\n  label: string;\n  provider: string;\n};\n\nexport type BookerAvatar = {\n  name: string;\n  avatarUrl: string;\n  profileUrl: string;\n};\n\nexport type BookerMeta = {\n  hostName: string;\n  hostAvatarUrl: string;\n  hostAvatars: BookerAvatar[];\n  eventTypeTitle: string;\n  eventTypeDescription: string;\n  eventTypeDurationMinutes: number | null;\n  eventTypeDurationOptions: number[] | null;\n  eventTypeLocations: EventTypeLocationOption[];\n  eventTypeImageUrl: string;\n  bookingWindowStart: Date | null;\n  bookingWindowEnd: Date | null;\n};\n\nexport type EventTypeInfo = {\n  eventTypeTitle: string;\n  eventTypeDescription: string;\n  eventTypeDurationMinutes: number | null;\n  eventTypeDurationOptions: number[] | null;\n  eventTypeLocations: EventTypeLocationOption[];\n  eventTypeImageUrl: string;\n};\n\nexport function prettifyLocation(value: string): string {\n  const normalized = value.trim().toLowerCase();\n\n  const known: Record<string, string> = {\n    \"cal-video\": \"Cal Video\",\n    \"daily-video\": \"Daily Video\",\n    \"google-meet\": \"Google Meet\",\n    \"huddle01-video\": \"Huddle01\",\n    \"microsoft-teams\": \"Microsoft Teams\",\n    conferencing: \"Organizer's Default App\",\n    jitsi: \"Jitsi Meet\",\n    inperson: \"In person\",\n    organizersdefaultapp: \"Organizer's Default App\",\n    phone: \"Phone call\",\n    whereby: \"Whereby\",\n    zoom: \"Zoom\",\n  };\n\n  const knownLocation = known[normalized];\n  if (knownLocation) {\n    return knownLocation;\n  }\n\n  return titleizeLocation(value);\n}\n\nfunction titleizeLocation(value: string): string {\n  return value\n    .replace(/[_:-]+/g, \" \")\n    .split(\" \")\n    .filter(Boolean)\n    .map((part) =>\n      /^\\d+$/.test(part) ? part : part.charAt(0).toUpperCase() + part.slice(1),\n    )\n    .join(\" \");\n}\n\nfunction normalizeAvatarUrl(value: unknown): string {\n  if (typeof value !== \"string\") {\n    return \"\";\n  }\n\n  const trimmed = value.trim();\n  if (!trimmed) {\n    return \"\";\n  }\n\n  if (trimmed.startsWith(\"http://\") || trimmed.startsWith(\"https://\")) {\n    return trimmed;\n  }\n\n  if (trimmed.startsWith(\"//\")) {\n    return `https:${trimmed}`;\n  }\n\n  if (trimmed.startsWith(\"/\")) {\n    return `https://app.cal.com${trimmed}`;\n  }\n\n  return trimmed;\n}\n\nexport function extractHost(payload: unknown): {\n  hostName: string;\n  hostAvatarUrl: string;\n} {\n  if (!payload || typeof payload !== \"object\") {\n    return { hostName: \"Unknown user\", hostAvatarUrl: \"\" };\n  }\n\n  const root = payload as Record<string, unknown>;\n  const data = (root.data as Record<string, unknown> | undefined) ?? root;\n  const profile =\n    data.profile && typeof data.profile === \"object\"\n      ? (data.profile as Record<string, unknown>)\n      : undefined;\n\n  const rawAvatar =\n    data.avatarUrl ??\n    data.avatar_url ??\n    data.avatar ??\n    profile?.avatarUrl ??\n    profile?.avatar_url ??\n    profile?.avatar;\n\n  return {\n    hostName: String(\n      data.name ?? data.username ?? data.email ?? \"Unknown user\",\n    ),\n    hostAvatarUrl: normalizeAvatarUrl(rawAvatar),\n  };\n}\n\nfunction toRecord(value: unknown): Record<string, unknown> | null {\n  return value && typeof value === \"object\"\n    ? (value as Record<string, unknown>)\n    : null;\n}\n\nfunction getAvatarName(record: Record<string, unknown>): string {\n  return String(\n    record.name ?? record.username ?? record.email ?? \"Unknown user\",\n  );\n}\n\nfunction getAvatarUrl(record: Record<string, unknown>): string {\n  const profile = toRecord(record.profile);\n  return normalizeAvatarUrl(\n    record.avatarUrl ??\n      record.avatar_url ??\n      record.avatar ??\n      record.image ??\n      record.logoUrl ??\n      profile?.avatarUrl ??\n      profile?.avatar_url ??\n      profile?.avatar ??\n      profile?.image,\n  );\n}\n\nfunction buildProfileUrl(\n  username: string,\n  orgSlug?: string,\n  baseUrl?: string,\n): string {\n  const normalizedUsername = username.trim();\n  if (!normalizedUsername) {\n    return \"\";\n  }\n\n  const base =\n    baseUrl && /^https?:\\/\\//i.test(baseUrl)\n      ? baseUrl.replace(/\\/$/, \"\")\n      : orgSlug\n        ? `https://${orgSlug}.cal.com`\n        : \"https://cal.com\";\n\n  return `${base}/${encodeURIComponent(normalizedUsername)}`;\n}\n\nfunction getUserAvatar(\n  record: Record<string, unknown>,\n  orgSlug?: string,\n): BookerAvatar {\n  const name = getAvatarName(record);\n  const username = getStringValue(record.username);\n  const bookerUrl = getStringValue(record.bookerUrl);\n\n  return {\n    avatarUrl: getAvatarUrl(record),\n    name,\n    profileUrl: username\n      ? buildProfileUrl(username, orgSlug, bookerUrl ?? undefined)\n      : \"\",\n  };\n}\n\nfunction getTeamAvatar(\n  record: Record<string, unknown>,\n  orgSlug?: string,\n): BookerAvatar | null {\n  const team = toRecord(record.team) ?? toRecord(record.entity);\n  const profile = toRecord(record.profile);\n  const source = team ?? profile;\n  if (!source) {\n    return null;\n  }\n\n  const avatarUrl = getAvatarUrl(source);\n  const name = String(source.name ?? source.slug ?? \"\");\n  const slug = getStringValue(source.slug);\n  if (!avatarUrl && !name) {\n    return null;\n  }\n\n  return {\n    avatarUrl,\n    name: name || \"Team\",\n    profileUrl: slug ? buildProfileUrl(slug, orgSlug) : \"\",\n  };\n}\n\nfunction getBooleanValue(value: unknown): boolean {\n  return value === true || value === \"true\";\n}\n\nfunction uniqueAvatars(avatars: BookerAvatar[]): BookerAvatar[] {\n  const seen = new Set<string>();\n  return avatars.filter((avatar) => {\n    const key = `${avatar.name}:${avatar.avatarUrl}`;\n    if (seen.has(key)) {\n      return false;\n    }\n    seen.add(key);\n    return true;\n  });\n}\n\nexport function extractHostAvatars(\n  eventTypePayload: unknown,\n  hostPayload: unknown,\n  options: { dynamic?: boolean; orgSlug?: string } = {},\n): BookerAvatar[] {\n  const eventType = toRecord(eventTypePayload);\n  const host = extractHost(hostPayload);\n\n  if (!eventType) {\n    return host.hostName === \"Unknown user\" && !host.hostAvatarUrl\n      ? []\n      : [\n          {\n            avatarUrl: host.hostAvatarUrl,\n            name: host.hostName,\n            profileUrl: \"\",\n          },\n        ];\n  }\n\n  const schedulingType = String(eventType.schedulingType ?? \"\").toUpperCase();\n  const metadata = toRecord(eventType.metadata);\n  const roundRobinHideOrgAndTeam =\n    getBooleanValue(eventType.roundRobinHideOrgAndTeam) ||\n    getBooleanValue(metadata?.roundRobinHideOrgAndTeam);\n  const hideOrgTeamAvatar =\n    getBooleanValue(eventType.hideOrgTeamAvatar) ||\n    getBooleanValue(metadata?.hideOrgTeamAvatar);\n  const userRecords = [\n    ...(Array.isArray(eventType.users) ? eventType.users : []),\n    ...(Array.isArray(eventType.hosts) ? eventType.hosts : []),\n  ]\n    .map(toRecord)\n    .filter((record): record is Record<string, unknown> => record != null);\n  const userAvatars = userRecords.map((record) =>\n    getUserAvatar(record, options.orgSlug),\n  );\n  const teamAvatar = getTeamAvatar(eventType, options.orgSlug);\n\n  if (options.dynamic) {\n    return uniqueAvatars(\n      userAvatars.length > 0\n        ? userAvatars\n        : [\n            {\n              avatarUrl: host.hostAvatarUrl,\n              name: host.hostName,\n              profileUrl: \"\",\n            },\n          ],\n    );\n  }\n\n  if (schedulingType === \"ROUND_ROBIN\") {\n    if (roundRobinHideOrgAndTeam || hideOrgTeamAvatar) {\n      return [];\n    }\n\n    return teamAvatar ? [teamAvatar] : [];\n  }\n\n  if (schedulingType === \"COLLECTIVE\") {\n    const avatars = teamAvatar ? [teamAvatar, ...userAvatars] : userAvatars;\n    return uniqueAvatars(avatars);\n  }\n\n  const firstUserAvatar = userAvatars[0];\n  return uniqueAvatars(\n    firstUserAvatar\n      ? [firstUserAvatar]\n      : [\n          {\n            avatarUrl: host.hostAvatarUrl,\n            name: host.hostName,\n            profileUrl: \"\",\n          },\n        ],\n  );\n}\n\nexport function extractHostDisplayName(\n  eventTypePayload: unknown,\n  hostPayload: unknown,\n  options: { dynamic?: boolean } = {},\n): string {\n  const host = extractHost(hostPayload);\n  const eventType = toRecord(eventTypePayload);\n  if (!eventType) {\n    return host.hostName;\n  }\n\n  const schedulingType = String(eventType.schedulingType ?? \"\").toUpperCase();\n  const profile = toRecord(eventType.profile);\n  const team = toRecord(eventType.team) ?? toRecord(eventType.entity);\n  const profileName =\n    getStringValue(profile?.name) ?? getStringValue(team?.name);\n  const userNames = [\n    ...(Array.isArray(eventType.users) ? eventType.users : []),\n    ...(Array.isArray(eventType.hosts) ? eventType.hosts : []),\n  ]\n    .map(toRecord)\n    .filter((record): record is Record<string, unknown> => record != null)\n    .map(getAvatarName)\n    .filter((name) => name !== \"Unknown user\");\n\n  if (options.dynamic) {\n    return (\n      profileName ??\n      (userNames.length > 0 ? userNames.join(\", \") : host.hostName)\n    );\n  }\n\n  if (schedulingType === \"ROUND_ROBIN\") {\n    return profileName ?? host.hostName;\n  }\n\n  if (schedulingType === \"COLLECTIVE\") {\n    const firstName = userNames[0];\n    if (profileName && firstName && profileName !== firstName) {\n      return profileName;\n    }\n\n    return userNames.length > 0 ? userNames.join(\", \") : host.hostName;\n  }\n\n  return host.hostName;\n}\n\nfunction parseLocationOption(value: unknown): EventTypeLocationOption | null {\n  if (typeof value === \"string\") {\n    const trimmed = value.trim();\n    if (!trimmed) {\n      return null;\n    }\n\n    return { label: prettifyLocation(trimmed), provider: \"\" };\n  }\n\n  if (!value || typeof value !== \"object\") {\n    return null;\n  }\n\n  const loc = value as Record<string, unknown>;\n  const integrationProvider = getIntegrationProvider(loc);\n  const provider = integrationProvider || getStringValue(loc.type) || \"\";\n  const rawText =\n    getDisplayLocationText(loc.label, integrationProvider) ??\n    getDisplayLocationText(loc.name, integrationProvider) ??\n    (integrationProvider || null) ??\n    getStringValue(loc.address) ??\n    getStringValue(loc.location) ??\n    getStringValue(loc.value) ??\n    getStringValue(loc.type);\n\n  if (!rawText) {\n    return null;\n  }\n\n  return {\n    label: prettifyLocation(rawText),\n    provider,\n  };\n}\n\nfunction extractLocations(\n  record: Record<string, unknown>,\n): EventTypeLocationOption[] {\n  const locationsRaw = record.locations;\n  if (Array.isArray(locationsRaw) && locationsRaw.length > 0) {\n    const parsed = locationsRaw\n      .map(parseLocationOption)\n      .filter((item): item is EventTypeLocationOption => item != null);\n    if (parsed.length > 0) {\n      return parsed;\n    }\n  }\n\n  if (typeof record.location === \"string\" && record.location.trim()) {\n    return [{ label: prettifyLocation(record.location), provider: \"\" }];\n  }\n\n  return [{ label: \"Unknown\", provider: \"\" }];\n}\n\nexport function extractEventTypeInfo(payload: unknown): EventTypeInfo {\n  if (!payload || typeof payload !== \"object\") {\n    return {\n      eventTypeTitle: \"No event type found\",\n      eventTypeDescription: \"\",\n      eventTypeDurationMinutes: null,\n      eventTypeDurationOptions: null,\n      eventTypeLocations: [{ label: \"Unknown\", provider: \"\" }],\n      eventTypeImageUrl: \"\",\n    };\n  }\n\n  const record = payload as Record<string, unknown>;\n  const durationValue =\n    record.lengthInMinutes ??\n    record.duration ??\n    record.length ??\n    record.minutes;\n  const duration =\n    typeof durationValue === \"number\"\n      ? durationValue\n      : typeof durationValue === \"string\" &&\n          Number.isFinite(Number(durationValue))\n        ? Number(durationValue)\n        : null;\n\n  const durationOptions = extractDurationOptions(record);\n  const eventTypeLocations = extractLocations(record);\n\n  return {\n    eventTypeTitle: String(\n      record.title ?? record.name ?? record.slug ?? \"No event type found\",\n    ),\n    eventTypeDescription: String(record.description ?? \"\"),\n    eventTypeDurationMinutes: duration,\n    eventTypeDurationOptions:\n      durationOptions.length > 1 ? durationOptions : null,\n    eventTypeLocations,\n    eventTypeImageUrl: normalizeAvatarUrl(\n      record.imageUrl ??\n        record.image_url ??\n        record.image ??\n        record.bannerUrl ??\n        record.coverImage ??\n        record.coverImageUrl,\n    ),\n  };\n}\n\nfunction getStringValue(value: unknown): string | null {\n  return typeof value === \"string\" && value.trim() ? value : null;\n}\n\nfunction getDisplayLocationText(\n  value: unknown,\n  integrationProvider: string,\n): string | null {\n  const text = getStringValue(value);\n  if (!text) {\n    return null;\n  }\n\n  const normalized = text.trim().toLowerCase();\n  if (\n    integrationProvider &&\n    [\"integration\", \"integrations\"].includes(normalized)\n  ) {\n    return null;\n  }\n\n  return text;\n}\n\nfunction getIntegrationProvider(record: Record<string, unknown>): string {\n  const rawType = getStringValue(record.type);\n  const type = rawType?.trim().toLowerCase();\n  const candidates = [\n    record.value,\n    record.integration,\n    record.provider,\n    record.app,\n    record.appSlug,\n    record.credentialType,\n  ];\n  for (const candidate of candidates) {\n    const value = getStringValue(candidate);\n    if (!value) {\n      continue;\n    }\n    const normalized = value.trim().toLowerCase();\n    if (\n      [\"integration\", \"integrations\"].includes(type ?? \"\") &&\n      ![\"integration\", \"integrations\"].includes(normalized) &&\n      /^[a-z0-9][a-z0-9:_-]*$/i.test(value)\n    ) {\n      return value;\n    }\n  }\n  return \"\";\n}\n\nfunction toFiniteNumber(value: unknown): number | null {\n  if (typeof value === \"number\" && Number.isFinite(value)) {\n    return value;\n  }\n  if (\n    typeof value === \"string\" &&\n    value.trim() !== \"\" &&\n    Number.isFinite(Number(value))\n  ) {\n    return Number(value);\n  }\n  return null;\n}\n\nfunction normalizeDurationList(values: unknown[]): number[] {\n  const minutes = values\n    .map(toFiniteNumber)\n    .filter((value): value is number => value != null && value > 0);\n\n  return [...new Set(minutes)].sort((a, b) => a - b);\n}\n\nexport function extractDurationOptions(payload: unknown): number[] {\n  if (!payload || typeof payload !== \"object\") {\n    return [];\n  }\n\n  const record = payload as Record<string, unknown>;\n  const fromOptions = record.lengthInMinutesOptions;\n  if (Array.isArray(fromOptions)) {\n    const normalized = normalizeDurationList(fromOptions);\n    if (normalized.length > 0) {\n      return normalized;\n    }\n  }\n\n  const metadata = record.metadata;\n  if (metadata && typeof metadata === \"object\") {\n    const multipleDuration = (metadata as Record<string, unknown>)\n      .multipleDuration;\n    if (Array.isArray(multipleDuration)) {\n      return normalizeDurationList(multipleDuration);\n    }\n  }\n\n  return [];\n}\n\nfunction addCalendarDays(date: Date, days: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);\n}\n\nfunction addBusinessDays(date: Date, days: number): Date {\n  const result = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  let remaining = Math.max(0, days);\n  while (remaining > 0) {\n    result.setDate(result.getDate() + 1);\n    const dayOfWeek = result.getDay();\n    if (dayOfWeek !== 0 && dayOfWeek !== 6) {\n      remaining -= 1;\n    }\n  }\n  return result;\n}\n\nfunction parseDate(value: unknown): Date | null {\n  if (typeof value !== \"string\" && typeof value !== \"number\") {\n    return null;\n  }\n  const date = new Date(value);\n  return Number.isNaN(date.getTime()) ? null : date;\n}\n\n// Resolve the event type's booking window start date. For RANGE period types,\n// this is the `periodStartDate`; otherwise bookings start from today.\nexport function extractBookingWindowStart(payload: unknown): Date | null {\n  if (!payload || typeof payload !== \"object\") {\n    return null;\n  }\n\n  const eventType = payload as Record<string, unknown>;\n  const periodType =\n    typeof eventType.periodType === \"string\"\n      ? eventType.periodType.toUpperCase()\n      : \"\";\n\n  if (periodType === \"RANGE\") {\n    const start = parseDate(eventType.periodStartDate);\n    if (start) {\n      const today = new Date();\n      today.setHours(0, 0, 0, 0);\n      // Never return a start date in the past.\n      return start > today ? start : null;\n    }\n  }\n\n  return null;\n}\n\nexport function extractBookingWindowEnd(payload: unknown): Date | null {\n  if (!payload || typeof payload !== \"object\") {\n    return null;\n  }\n\n  const eventType = payload as Record<string, unknown>;\n  const periodType =\n    typeof eventType.periodType === \"string\"\n      ? eventType.periodType.toUpperCase()\n      : \"\";\n\n  if (periodType === \"RANGE\") {\n    return parseDate(eventType.periodEndDate);\n  }\n\n  if (periodType === \"ROLLING\" || periodType === \"ROLLING_WINDOW\") {\n    const days = toFiniteNumber(eventType.periodDays);\n    if (days != null) {\n      const today = new Date();\n      today.setHours(0, 0, 0, 0);\n      return eventType.periodCountCalendarDays\n        ? addCalendarDays(today, days)\n        : addBusinessDays(today, days);\n    }\n  }\n\n  return null;\n}\n\nexport function getInitials(name: string): string {\n  const parts = name\n    .split(\" \")\n    .map((part) => part.trim())\n    .filter(Boolean)\n    .slice(0, 2);\n\n  if (parts.length === 0) {\n    return \"NA\";\n  }\n\n  return parts.map((part) => part[0]?.toUpperCase() ?? \"\").join(\"\");\n}\n\nexport function formatSelectedWeekday(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  }).format(date);\n}\n\nexport function formatSelectedDay(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"2-digit\",\n  }).format(date);\n}\n\nexport function formatSelectedMonth(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  }).format(date);\n}\n\nexport function formatConfirmDateDetail(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"numeric\",\n    month: \"long\",\n    year: \"numeric\",\n  }).format(date);\n}\n\nfunction parseTimeLabel(\n  label: string,\n): { hours: number; minutes: number } | null {\n  const [hoursRaw, minutesRaw] = label.split(\":\");\n  const hours = Number(hoursRaw);\n  const minutes = Number(minutesRaw);\n  if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n    return null;\n  }\n  return { hours, minutes };\n}\n\nfunction formatConfirmTimePart(\n  date: Date,\n  locale: string,\n  hour12: boolean,\n  includePeriod: boolean,\n): string {\n  if (!hour12) {\n    return new Intl.DateTimeFormat(\"en-GB\", {\n      hour: \"2-digit\",\n      hour12: false,\n      minute: \"2-digit\",\n    }).format(date);\n  }\n\n  const parts = new Intl.DateTimeFormat(locale, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(date);\n\n  return parts\n    .filter(\n      (part) =>\n        part.type === \"hour\" ||\n        part.type === \"minute\" ||\n        (includePeriod && part.type === \"dayPeriod\") ||\n        (part.type === \"literal\" && part.value.trim() !== \"\"),\n    )\n    .map((part) =>\n      part.type === \"dayPeriod\" ? part.value.toLowerCase() : part.value,\n    )\n    .join(\"\")\n    .trim();\n}\n\nexport function formatConfirmTimeRange(\n  startTime: string,\n  durationMinutes: number,\n  hour12: boolean,\n  locale: string,\n): string {\n  const parsed = parseTimeLabel(startTime);\n  if (!parsed) {\n    return startTime;\n  }\n\n  const startDate = new Date();\n  startDate.setHours(parsed.hours, parsed.minutes, 0, 0);\n  const endDate = new Date(startDate.getTime() + durationMinutes * 60_000);\n\n  if (!hour12) {\n    return `${formatConfirmTimePart(startDate, locale, false, false)} – ${formatConfirmTimePart(endDate, locale, false, false)}`;\n  }\n\n  const startParts = new Intl.DateTimeFormat(locale, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(startDate);\n  const endParts = new Intl.DateTimeFormat(locale, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(endDate);\n  const startPeriod = startParts\n    .find((part) => part.type === \"dayPeriod\")\n    ?.value.toLowerCase();\n  const endPeriod = endParts\n    .find((part) => part.type === \"dayPeriod\")\n    ?.value.toLowerCase();\n  const samePeriod = startPeriod === endPeriod;\n\n  return `${formatConfirmTimePart(startDate, locale, true, !samePeriod)} – ${formatConfirmTimePart(endDate, locale, true, true)}`;\n}\n\nexport function toDateKey(date: Date, timeZone: string): string {\n  return new Intl.DateTimeFormat(\"en-CA\", {\n    day: \"2-digit\",\n    month: \"2-digit\",\n    timeZone,\n    year: \"numeric\",\n  }).format(date);\n}\n\n// Calendar grid dates are plain Y-M-D values (local Date components), not\n// instants. Use this when looking up slots keyed by the API/booking timezone.\nexport function toCalendarDateKey(date: Date): string {\n  const year = date.getFullYear();\n  const month = String(date.getMonth() + 1).padStart(2, \"0\");\n  const day = String(date.getDate()).padStart(2, \"0\");\n  return `${year}-${month}-${day}`;\n}\n\nexport function getTodayInTimeZone(\n  timeZone: string,\n  now: Date = new Date(),\n): Date {\n  const [yearRaw, monthRaw, dayRaw] = toDateKey(now, timeZone).split(\"-\");\n  const year = Number(yearRaw);\n  const month = Number(monthRaw);\n  const day = Number(dayRaw);\n  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {\n    const fallback = new Date(now);\n    fallback.setHours(0, 0, 0, 0);\n    return fallback;\n  }\n  return new Date(year, month - 1, day);\n}\n\nexport function getMinimumNavigableMonth(\n  timeZone: string,\n  bookingWindowStart?: Date | null,\n  now: Date = new Date(),\n): Date {\n  const todayInTz = getTodayInTimeZone(timeZone, now);\n  const startBase =\n    bookingWindowStart && bookingWindowStart > todayInTz\n      ? bookingWindowStart\n      : todayInTz;\n  return new Date(startBase.getFullYear(), startBase.getMonth(), 1);\n}\n\nexport function isCalendarMonthBefore(left: Date, right: Date): boolean {\n  const leftMonth = new Date(left.getFullYear(), left.getMonth(), 1);\n  const rightMonth = new Date(right.getFullYear(), right.getMonth(), 1);\n  return leftMonth.getTime() < rightMonth.getTime();\n}\n\nfunction toTimeLabel(date: Date, timeZone: string): string {\n  return new Intl.DateTimeFormat(\"en-GB\", {\n    hour: \"2-digit\",\n    hour12: false,\n    minute: \"2-digit\",\n    timeZone,\n  }).format(date);\n}\n\n// Whether a locale conventionally shows time in 24-hour form, used to seed the\n// 12h/24h toggle (e.g. en-US → 12h, most of Europe → 24h). Falls back to 24h.\nexport function prefers24Hour(locale: string): boolean {\n  try {\n    const resolved = new Intl.DateTimeFormat(locale, {\n      hour: \"numeric\",\n    }).resolvedOptions();\n    if (typeof resolved.hour12 === \"boolean\") {\n      return !resolved.hour12;\n    }\n    return resolved.hourCycle === \"h23\" || resolved.hourCycle === \"h24\";\n  } catch {\n    return true;\n  }\n}\n\n// Slots are stored as 24h \"HH:mm\" strings (stable ids); reformat for display.\nexport function displayTimeLabel(label: string, hour12: boolean): string {\n  if (!hour12) {\n    return label;\n  }\n  const [hoursRaw, minutesRaw] = label.split(\":\");\n  const hours = Number(hoursRaw);\n  const minutes = Number(minutesRaw);\n  if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n    return label;\n  }\n  const date = new Date();\n  date.setHours(hours, minutes, 0, 0);\n  const parts = new Intl.DateTimeFormat(undefined, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(date);\n  return parts\n    .filter((part) => part.type !== \"literal\" || part.value.trim() !== \"\")\n    .map((part) =>\n      part.type === \"dayPeriod\" ? part.value.toLowerCase() : part.value,\n    )\n    .join(\"\");\n}\n\nexport function isSingleDigit12HourLabel(label: string): boolean {\n  const hours = Number(label.split(\":\")[0]);\n  if (Number.isNaN(hours)) {\n    return false;\n  }\n\n  const normalizedHours = hours % 12 || 12;\n  return normalizedHours < 10;\n}\n\nfunction parseSlotDate(value: unknown): Date | null {\n  if (typeof value === \"string\") {\n    if (/^\\d{2}:\\d{2}$/.test(value)) {\n      return null;\n    }\n    const parsed = new Date(value);\n    return Number.isNaN(parsed.getTime()) ? null : parsed;\n  }\n\n  if (!value || typeof value !== \"object\") {\n    return null;\n  }\n\n  const record = value as Record<string, unknown>;\n  const candidate =\n    record.start ??\n    record.startTime ??\n    record.time ??\n    record.dateTime ??\n    record.date;\n\n  return parseSlotDate(candidate);\n}\n\nexport function extractSlotsByDate(\n  payload: unknown,\n  timeZone: string,\n): Record<string, string[]> {\n  const byDate = new Map<string, Set<string>>();\n  const addSlot = (dateKey: string, time: string) => {\n    if (!byDate.has(dateKey)) {\n      byDate.set(dateKey, new Set<string>());\n    }\n    byDate.get(dateKey)?.add(time);\n  };\n\n  if (!payload || typeof payload !== \"object\") {\n    return {};\n  }\n\n  const visitNode = (node: unknown) => {\n    if (!node || typeof node !== \"object\") {\n      return;\n    }\n\n    if (Array.isArray(node)) {\n      for (const item of node) {\n        visitNode(item);\n      }\n      return;\n    }\n\n    const record = node as Record<string, unknown>;\n\n    for (const [key, value] of Object.entries(record)) {\n      if (/^\\d{4}-\\d{2}-\\d{2}$/.test(key) && Array.isArray(value)) {\n        for (const slot of value) {\n          if (typeof slot === \"string\" && /^\\d{2}:\\d{2}$/.test(slot)) {\n            addSlot(key, slot);\n            continue;\n          }\n\n          const parsed = parseSlotDate(slot);\n          if (!parsed) {\n            continue;\n          }\n\n          addSlot(toDateKey(parsed, timeZone), toTimeLabel(parsed, timeZone));\n        }\n      } else {\n        visitNode(value);\n      }\n    }\n  };\n\n  visitNode(payload);\n\n  const result: Record<string, string[]> = {};\n  for (const [key, times] of byDate.entries()) {\n    result[key] = Array.from(times).sort((a, b) => a.localeCompare(b));\n  }\n\n  return result;\n}\n\n// Event's minimum booking notice in minutes (cal.com `minimumBookingNotice`).\nexport function extractMinimumBookingNotice(payload: unknown): number {\n  if (!payload || typeof payload !== \"object\") {\n    return 0;\n  }\n  const minutes = toFiniteNumber(\n    (payload as Record<string, unknown>).minimumBookingNotice,\n  );\n  return minutes != null && minutes > 0 ? minutes : 0;\n}\n\n// Drop slots that are no longer bookable: anything earlier than now plus the\n// minimum booking notice, evaluated in the booking timezone. Future days are\n// kept untouched; only the boundary day is partially filtered. Guards against\n// showing already-passed times for today (and as the session ages).\nexport function filterBookableSlots(\n  slotsByDate: Record<string, string[]>,\n  timeZone: string,\n  noticeMinutes: number,\n  now: Date,\n): Record<string, string[]> {\n  const cutoff = new Date(now.getTime() + noticeMinutes * 60_000);\n  const cutoffDateKey = toDateKey(cutoff, timeZone);\n  const [cutoffHoursRaw, cutoffMinutesRaw] = toTimeLabel(\n    cutoff,\n    timeZone,\n  ).split(\":\");\n  const cutoffHours = Number(cutoffHoursRaw);\n  const cutoffMinutes = Number(cutoffMinutesRaw);\n  if (Number.isNaN(cutoffHours) || Number.isNaN(cutoffMinutes)) {\n    return slotsByDate;\n  }\n  const cutoffOfDay = cutoffHours * 60 + cutoffMinutes;\n\n  const result: Record<string, string[]> = {};\n  for (const [dateKey, times] of Object.entries(slotsByDate)) {\n    if (dateKey < cutoffDateKey) {\n      continue;\n    }\n    if (dateKey > cutoffDateKey) {\n      result[dateKey] = times;\n      continue;\n    }\n    const kept = times.filter((time) => {\n      const [hoursRaw, minutesRaw] = time.split(\":\");\n      const hours = Number(hoursRaw);\n      const minutes = Number(minutesRaw);\n      if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n        return false;\n      }\n      return hours * 60 + minutes >= cutoffOfDay;\n    });\n    if (kept.length > 0) {\n      result[dateKey] = kept;\n    }\n  }\n  return result;\n}\n\nexport function findFirstAvailableDate(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n): Date | null {\n  const year = month.getFullYear();\n  const monthIndex = month.getMonth();\n  const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();\n  const todayKey = toCalendarDateKey(todayStart);\n\n  for (let day = 1; day <= daysInMonth; day += 1) {\n    const date = new Date(year, monthIndex, day);\n    const key = toCalendarDateKey(date);\n    if (key < todayKey) {\n      continue;\n    }\n\n    if ((slotsByDate[key] ?? []).length > 0) {\n      return date;\n    }\n  }\n\n  return null;\n}\n\n// --- Calendar grid (mirrors booker-calendar.tsx) ---\n\nexport function getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction calendarStartOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction calendarEndOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction calendarAddDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction calendarStartOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return calendarAddDays(day, -diff);\n}\n\nfunction calendarEndOfWeek(date: Date, weekStartsOn = 0): Date {\n  return calendarAddDays(calendarStartOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameCalendarMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nexport type CalendarViewOptions = {\n  weekStartsOn?: number;\n  shiftWeeks?: boolean;\n  startMonth?: Date;\n  endMonth?: Date;\n};\n\nexport function getVisibleCalendarDates(\n  month: Date,\n  today: Date,\n  options: CalendarViewOptions = {},\n): Date[] {\n  const weekStartsOn = options.weekStartsOn ?? 0;\n  const shiftWeeks = options.shiftWeeks ?? true;\n  const firstMonth = calendarStartOfMonth(month);\n\n  const naturalGridStart = calendarStartOfWeek(firstMonth, weekStartsOn);\n  const todayStart = new Date(\n    today.getFullYear(),\n    today.getMonth(),\n    today.getDate(),\n  );\n  const todayRow = Math.floor(\n    Math.round(\n      (todayStart.getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand =\n    shiftWeeks && isSameCalendarMonth(firstMonth, today) && todayRow >= 3;\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const monthStart = calendarStartOfMonth(firstMonth);\n  const offset = shiftRows * 7;\n  const gridStart = calendarAddDays(\n    calendarStartOfWeek(monthStart, weekStartsOn),\n    offset,\n  );\n  const gridEnd = calendarAddDays(\n    calendarEndOfWeek(calendarEndOfMonth(firstMonth), weekStartsOn),\n    offset,\n  );\n\n  const dates: Date[] = [];\n  for (\n    let cursor = gridStart;\n    cursor.getTime() <= gridEnd.getTime();\n    cursor = calendarAddDays(cursor, 1)\n  ) {\n    dates.push(cursor);\n  }\n\n  if (expand) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(calendarAddDays(lastDate, 1));\n    }\n  }\n\n  const navStart = options.startMonth\n    ? calendarStartOfMonth(options.startMonth)\n    : undefined;\n  const navEnd = options.endMonth\n    ? calendarStartOfMonth(options.endMonth)\n    : undefined;\n  const monthEnd = calendarEndOfMonth(firstMonth);\n\n  return dates.filter((date) => {\n    if (navStart && date < navStart) {\n      return false;\n    }\n    if (navEnd && date > calendarEndOfMonth(navEnd)) {\n      return false;\n    }\n    if (date < monthStart) {\n      return false;\n    }\n    if (!expand && date > monthEnd) {\n      return false;\n    }\n    return true;\n  });\n}\n\nexport function findFirstAvailableInVisibleGrid(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  todayStart: Date,\n  options: CalendarViewOptions = {},\n): Date | null {\n  const todayKey = toCalendarDateKey(todayStart);\n  for (const date of getVisibleCalendarDates(month, todayStart, options)) {\n    const key = toCalendarDateKey(date);\n    if (key < todayKey) {\n      continue;\n    }\n    if ((slotsByDate[key] ?? []).length > 0) {\n      return date;\n    }\n  }\n  return null;\n}\n\nexport function hasAvailabilityInVisibleGrid(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  todayStart: Date,\n  options: CalendarViewOptions = {},\n): boolean {\n  return (\n    findFirstAvailableInVisibleGrid(month, slotsByDate, todayStart, options) !=\n    null\n  );\n}\n\nexport function pickDefaultSelectedDate(\n  currentMonth: Date,\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n  viewOptions?: CalendarViewOptions,\n): Date | null {\n  if (viewOptions) {\n    return findFirstAvailableInVisibleGrid(\n      currentMonth,\n      slotsByDate,\n      todayStart,\n      viewOptions,\n    );\n  }\n\n  return findFirstAvailableDate(\n    currentMonth,\n    slotsByDate,\n    _timeZone,\n    todayStart,\n  );\n}\n\n// Earliest loaded date (today or later) that still has open slots, used to\n// offer a \"jump to next availability\" affordance from an empty month/day.\nexport function findNextAvailableDate(\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n): Date | null {\n  const todayKey = toCalendarDateKey(todayStart);\n  let bestKey: string | null = null;\n  for (const [key, times] of Object.entries(slotsByDate)) {\n    if (times.length === 0 || key < todayKey) {\n      continue;\n    }\n    if (bestKey === null || key < bestKey) {\n      bestKey = key;\n    }\n  }\n\n  if (!bestKey) {\n    return null;\n  }\n\n  const [yearRaw, monthRaw, dayRaw] = bestKey.split(\"-\");\n  const year = Number(yearRaw);\n  const month = Number(monthRaw);\n  const day = Number(dayRaw);\n  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {\n    return null;\n  }\n  return new Date(year, month - 1, day);\n}\n",
+      "content": "export type EventTypeLocationOption = {\n  label: string;\n  provider: string;\n};\n\nexport type BookerAvatar = {\n  name: string;\n  avatarUrl: string;\n  profileUrl: string;\n};\n\nexport type BookerMeta = {\n  hostName: string;\n  hostAvatarUrl: string;\n  hostAvatars: BookerAvatar[];\n  eventTypeTitle: string;\n  eventTypeDescription: string;\n  eventTypeDurationMinutes: number | null;\n  eventTypeDurationOptions: number[] | null;\n  eventTypeLocations: EventTypeLocationOption[];\n  eventTypeImageUrl: string;\n  disableGuests: boolean;\n  bookingWindowStart: Date | null;\n  bookingWindowEnd: Date | null;\n};\n\nexport type EventTypeInfo = {\n  eventTypeTitle: string;\n  eventTypeDescription: string;\n  eventTypeDurationMinutes: number | null;\n  eventTypeDurationOptions: number[] | null;\n  eventTypeLocations: EventTypeLocationOption[];\n  eventTypeImageUrl: string;\n  disableGuests?: boolean;\n};\n\nexport function prettifyLocation(value: string): string {\n  const normalized = value.trim().toLowerCase();\n\n  const known: Record<string, string> = {\n    \"cal-video\": \"Cal Video\",\n    \"daily-video\": \"Daily Video\",\n    \"google-meet\": \"Google Meet\",\n    \"huddle01-video\": \"Huddle01\",\n    \"microsoft-teams\": \"Microsoft Teams\",\n    conferencing: \"Organizer's Default App\",\n    jitsi: \"Jitsi Meet\",\n    inperson: \"In person\",\n    organizersdefaultapp: \"Organizer's Default App\",\n    phone: \"Phone call\",\n    whereby: \"Whereby\",\n    zoom: \"Zoom\",\n  };\n\n  const knownLocation = known[normalized];\n  if (knownLocation) {\n    return knownLocation;\n  }\n\n  return titleizeLocation(value);\n}\n\nfunction titleizeLocation(value: string): string {\n  return value\n    .replace(/[_:-]+/g, \" \")\n    .split(\" \")\n    .filter(Boolean)\n    .map((part) =>\n      /^\\d+$/.test(part) ? part : part.charAt(0).toUpperCase() + part.slice(1),\n    )\n    .join(\" \");\n}\n\nfunction normalizeAvatarUrl(value: unknown): string {\n  if (typeof value !== \"string\") {\n    return \"\";\n  }\n\n  const trimmed = value.trim();\n  if (!trimmed) {\n    return \"\";\n  }\n\n  if (trimmed.startsWith(\"http://\") || trimmed.startsWith(\"https://\")) {\n    return trimmed;\n  }\n\n  if (trimmed.startsWith(\"//\")) {\n    return `https:${trimmed}`;\n  }\n\n  if (trimmed.startsWith(\"/\")) {\n    return `https://app.cal.com${trimmed}`;\n  }\n\n  return trimmed;\n}\n\nexport function extractHost(payload: unknown): {\n  hostName: string;\n  hostAvatarUrl: string;\n} {\n  if (!payload || typeof payload !== \"object\") {\n    return { hostName: \"Unknown user\", hostAvatarUrl: \"\" };\n  }\n\n  const root = payload as Record<string, unknown>;\n  const data = (root.data as Record<string, unknown> | undefined) ?? root;\n  const profile =\n    data.profile && typeof data.profile === \"object\"\n      ? (data.profile as Record<string, unknown>)\n      : undefined;\n\n  const rawAvatar =\n    data.avatarUrl ??\n    data.avatar_url ??\n    data.avatar ??\n    profile?.avatarUrl ??\n    profile?.avatar_url ??\n    profile?.avatar;\n\n  return {\n    hostName: String(\n      data.name ?? data.username ?? data.email ?? \"Unknown user\",\n    ),\n    hostAvatarUrl: normalizeAvatarUrl(rawAvatar),\n  };\n}\n\nfunction toRecord(value: unknown): Record<string, unknown> | null {\n  return value && typeof value === \"object\"\n    ? (value as Record<string, unknown>)\n    : null;\n}\n\nfunction getAvatarName(record: Record<string, unknown>): string {\n  return String(\n    record.name ?? record.username ?? record.email ?? \"Unknown user\",\n  );\n}\n\nfunction getAvatarUrl(record: Record<string, unknown>): string {\n  const profile = toRecord(record.profile);\n  return normalizeAvatarUrl(\n    record.avatarUrl ??\n      record.avatar_url ??\n      record.avatar ??\n      record.image ??\n      record.logoUrl ??\n      profile?.avatarUrl ??\n      profile?.avatar_url ??\n      profile?.avatar ??\n      profile?.image,\n  );\n}\n\nfunction buildProfileUrl(\n  username: string,\n  orgSlug?: string,\n  baseUrl?: string,\n): string {\n  const normalizedUsername = username.trim();\n  if (!normalizedUsername) {\n    return \"\";\n  }\n\n  const base =\n    baseUrl && /^https?:\\/\\//i.test(baseUrl)\n      ? baseUrl.replace(/\\/$/, \"\")\n      : orgSlug\n        ? `https://${orgSlug}.cal.com`\n        : \"https://cal.com\";\n\n  return `${base}/${encodeURIComponent(normalizedUsername)}`;\n}\n\nfunction getUserAvatar(\n  record: Record<string, unknown>,\n  orgSlug?: string,\n): BookerAvatar {\n  const name = getAvatarName(record);\n  const username = getStringValue(record.username);\n  const bookerUrl = getStringValue(record.bookerUrl);\n\n  return {\n    avatarUrl: getAvatarUrl(record),\n    name,\n    profileUrl: username\n      ? buildProfileUrl(username, orgSlug, bookerUrl ?? undefined)\n      : \"\",\n  };\n}\n\nfunction getTeamAvatar(\n  record: Record<string, unknown>,\n  orgSlug?: string,\n): BookerAvatar | null {\n  const team = toRecord(record.team) ?? toRecord(record.entity);\n  const profile = toRecord(record.profile);\n  const source = team ?? profile;\n  if (!source) {\n    return null;\n  }\n\n  const avatarUrl = getAvatarUrl(source);\n  const name = String(source.name ?? source.slug ?? \"\");\n  const slug = getStringValue(source.slug);\n  if (!avatarUrl && !name) {\n    return null;\n  }\n\n  return {\n    avatarUrl,\n    name: name || \"Team\",\n    profileUrl: slug ? buildProfileUrl(slug, orgSlug) : \"\",\n  };\n}\n\nfunction getBooleanValue(value: unknown): boolean {\n  return value === true || value === \"true\";\n}\n\nfunction uniqueAvatars(avatars: BookerAvatar[]): BookerAvatar[] {\n  const seen = new Set<string>();\n  return avatars.filter((avatar) => {\n    const key = `${avatar.name}:${avatar.avatarUrl}`;\n    if (seen.has(key)) {\n      return false;\n    }\n    seen.add(key);\n    return true;\n  });\n}\n\nexport function extractHostAvatars(\n  eventTypePayload: unknown,\n  hostPayload: unknown,\n  options: { dynamic?: boolean; orgSlug?: string } = {},\n): BookerAvatar[] {\n  const eventType = toRecord(eventTypePayload);\n  const host = extractHost(hostPayload);\n\n  if (!eventType) {\n    return host.hostName === \"Unknown user\" && !host.hostAvatarUrl\n      ? []\n      : [\n          {\n            avatarUrl: host.hostAvatarUrl,\n            name: host.hostName,\n            profileUrl: \"\",\n          },\n        ];\n  }\n\n  const schedulingType = String(eventType.schedulingType ?? \"\").toUpperCase();\n  const metadata = toRecord(eventType.metadata);\n  const roundRobinHideOrgAndTeam =\n    getBooleanValue(eventType.roundRobinHideOrgAndTeam) ||\n    getBooleanValue(metadata?.roundRobinHideOrgAndTeam);\n  const hideOrgTeamAvatar =\n    getBooleanValue(eventType.hideOrgTeamAvatar) ||\n    getBooleanValue(metadata?.hideOrgTeamAvatar);\n  const userRecords = [\n    ...(Array.isArray(eventType.users) ? eventType.users : []),\n    ...(Array.isArray(eventType.hosts) ? eventType.hosts : []),\n  ]\n    .map(toRecord)\n    .filter((record): record is Record<string, unknown> => record != null);\n  const userAvatars = userRecords.map((record) =>\n    getUserAvatar(record, options.orgSlug),\n  );\n  const teamAvatar = getTeamAvatar(eventType, options.orgSlug);\n\n  if (options.dynamic) {\n    return uniqueAvatars(\n      userAvatars.length > 0\n        ? userAvatars\n        : [\n            {\n              avatarUrl: host.hostAvatarUrl,\n              name: host.hostName,\n              profileUrl: \"\",\n            },\n          ],\n    );\n  }\n\n  if (schedulingType === \"ROUND_ROBIN\") {\n    if (roundRobinHideOrgAndTeam || hideOrgTeamAvatar) {\n      return [];\n    }\n\n    return teamAvatar ? [teamAvatar] : [];\n  }\n\n  if (schedulingType === \"COLLECTIVE\") {\n    const avatars = teamAvatar ? [teamAvatar, ...userAvatars] : userAvatars;\n    return uniqueAvatars(avatars);\n  }\n\n  const firstUserAvatar = userAvatars[0];\n  return uniqueAvatars(\n    firstUserAvatar\n      ? [firstUserAvatar]\n      : [\n          {\n            avatarUrl: host.hostAvatarUrl,\n            name: host.hostName,\n            profileUrl: \"\",\n          },\n        ],\n  );\n}\n\nexport function extractHostDisplayName(\n  eventTypePayload: unknown,\n  hostPayload: unknown,\n  options: { dynamic?: boolean } = {},\n): string {\n  const host = extractHost(hostPayload);\n  const eventType = toRecord(eventTypePayload);\n  if (!eventType) {\n    return host.hostName;\n  }\n\n  const schedulingType = String(eventType.schedulingType ?? \"\").toUpperCase();\n  const profile = toRecord(eventType.profile);\n  const team = toRecord(eventType.team) ?? toRecord(eventType.entity);\n  const profileName =\n    getStringValue(profile?.name) ?? getStringValue(team?.name);\n  const userNames = [\n    ...(Array.isArray(eventType.users) ? eventType.users : []),\n    ...(Array.isArray(eventType.hosts) ? eventType.hosts : []),\n  ]\n    .map(toRecord)\n    .filter((record): record is Record<string, unknown> => record != null)\n    .map(getAvatarName)\n    .filter((name) => name !== \"Unknown user\");\n\n  if (options.dynamic) {\n    return (\n      profileName ??\n      (userNames.length > 0 ? userNames.join(\", \") : host.hostName)\n    );\n  }\n\n  if (schedulingType === \"ROUND_ROBIN\") {\n    return profileName ?? host.hostName;\n  }\n\n  if (schedulingType === \"COLLECTIVE\") {\n    const firstName = userNames[0];\n    if (profileName && firstName && profileName !== firstName) {\n      return profileName;\n    }\n\n    return userNames.length > 0 ? userNames.join(\", \") : host.hostName;\n  }\n\n  return host.hostName;\n}\n\nfunction parseLocationOption(value: unknown): EventTypeLocationOption | null {\n  if (typeof value === \"string\") {\n    const trimmed = value.trim();\n    if (!trimmed) {\n      return null;\n    }\n\n    return { label: prettifyLocation(trimmed), provider: \"\" };\n  }\n\n  if (!value || typeof value !== \"object\") {\n    return null;\n  }\n\n  const loc = value as Record<string, unknown>;\n  const integrationProvider = getIntegrationProvider(loc);\n  const provider = integrationProvider || getStringValue(loc.type) || \"\";\n  const rawText =\n    getDisplayLocationText(loc.label, integrationProvider) ??\n    getDisplayLocationText(loc.name, integrationProvider) ??\n    (integrationProvider || null) ??\n    getStringValue(loc.address) ??\n    getStringValue(loc.location) ??\n    getStringValue(loc.value) ??\n    getStringValue(loc.type);\n\n  if (!rawText) {\n    return null;\n  }\n\n  return {\n    label: prettifyLocation(rawText),\n    provider,\n  };\n}\n\nfunction extractLocations(\n  record: Record<string, unknown>,\n): EventTypeLocationOption[] {\n  const locationsRaw = record.locations;\n  if (Array.isArray(locationsRaw) && locationsRaw.length > 0) {\n    const parsed = locationsRaw\n      .map(parseLocationOption)\n      .filter((item): item is EventTypeLocationOption => item != null);\n    if (parsed.length > 0) {\n      return parsed;\n    }\n  }\n\n  if (typeof record.location === \"string\" && record.location.trim()) {\n    return [{ label: prettifyLocation(record.location), provider: \"\" }];\n  }\n\n  return [{ label: \"Unknown\", provider: \"\" }];\n}\n\nexport function extractEventTypeInfo(payload: unknown): EventTypeInfo {\n  if (!payload || typeof payload !== \"object\") {\n    return {\n      eventTypeTitle: \"No event type found\",\n      eventTypeDescription: \"\",\n      eventTypeDurationMinutes: null,\n      eventTypeDurationOptions: null,\n      eventTypeLocations: [{ label: \"Unknown\", provider: \"\" }],\n      eventTypeImageUrl: \"\",\n      disableGuests: false,\n    };\n  }\n\n  const record = payload as Record<string, unknown>;\n  const durationValue =\n    record.lengthInMinutes ??\n    record.duration ??\n    record.length ??\n    record.minutes;\n  const duration =\n    typeof durationValue === \"number\"\n      ? durationValue\n      : typeof durationValue === \"string\" &&\n          Number.isFinite(Number(durationValue))\n        ? Number(durationValue)\n        : null;\n\n  const durationOptions = extractDurationOptions(record);\n  const eventTypeLocations = extractLocations(record);\n\n  return {\n    eventTypeTitle: String(\n      record.title ?? record.name ?? record.slug ?? \"No event type found\",\n    ),\n    eventTypeDescription: String(record.description ?? \"\"),\n    eventTypeDurationMinutes: duration,\n    eventTypeDurationOptions:\n      durationOptions.length > 1 ? durationOptions : null,\n    eventTypeLocations,\n    eventTypeImageUrl: normalizeAvatarUrl(\n      record.imageUrl ??\n        record.image_url ??\n        record.image ??\n        record.bannerUrl ??\n        record.coverImage ??\n        record.coverImageUrl,\n    ),\n    disableGuests: record.disableGuests === true,\n  };\n}\n\nfunction getStringValue(value: unknown): string | null {\n  return typeof value === \"string\" && value.trim() ? value : null;\n}\n\nfunction getDisplayLocationText(\n  value: unknown,\n  integrationProvider: string,\n): string | null {\n  const text = getStringValue(value);\n  if (!text) {\n    return null;\n  }\n\n  const normalized = text.trim().toLowerCase();\n  if (\n    integrationProvider &&\n    [\"integration\", \"integrations\"].includes(normalized)\n  ) {\n    return null;\n  }\n\n  return text;\n}\n\nfunction getIntegrationProvider(record: Record<string, unknown>): string {\n  const rawType = getStringValue(record.type);\n  const type = rawType?.trim().toLowerCase();\n  const candidates = [\n    record.value,\n    record.integration,\n    record.provider,\n    record.app,\n    record.appSlug,\n    record.credentialType,\n  ];\n  for (const candidate of candidates) {\n    const value = getStringValue(candidate);\n    if (!value) {\n      continue;\n    }\n    const normalized = value.trim().toLowerCase();\n    if (\n      [\"integration\", \"integrations\"].includes(type ?? \"\") &&\n      ![\"integration\", \"integrations\"].includes(normalized) &&\n      /^[a-z0-9][a-z0-9:_-]*$/i.test(value)\n    ) {\n      return value;\n    }\n  }\n  return \"\";\n}\n\nfunction toFiniteNumber(value: unknown): number | null {\n  if (typeof value === \"number\" && Number.isFinite(value)) {\n    return value;\n  }\n  if (\n    typeof value === \"string\" &&\n    value.trim() !== \"\" &&\n    Number.isFinite(Number(value))\n  ) {\n    return Number(value);\n  }\n  return null;\n}\n\nfunction normalizeDurationList(values: unknown[]): number[] {\n  const minutes = values\n    .map(toFiniteNumber)\n    .filter((value): value is number => value != null && value > 0);\n\n  return [...new Set(minutes)].sort((a, b) => a - b);\n}\n\nexport function extractDurationOptions(payload: unknown): number[] {\n  if (!payload || typeof payload !== \"object\") {\n    return [];\n  }\n\n  const record = payload as Record<string, unknown>;\n  const fromOptions = record.lengthInMinutesOptions;\n  if (Array.isArray(fromOptions)) {\n    const normalized = normalizeDurationList(fromOptions);\n    if (normalized.length > 0) {\n      return normalized;\n    }\n  }\n\n  const metadata = record.metadata;\n  if (metadata && typeof metadata === \"object\") {\n    const multipleDuration = (metadata as Record<string, unknown>)\n      .multipleDuration;\n    if (Array.isArray(multipleDuration)) {\n      return normalizeDurationList(multipleDuration);\n    }\n  }\n\n  return [];\n}\n\nfunction addCalendarDays(date: Date, days: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);\n}\n\nfunction addBusinessDays(date: Date, days: number): Date {\n  const result = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  let remaining = Math.max(0, days);\n  while (remaining > 0) {\n    result.setDate(result.getDate() + 1);\n    const dayOfWeek = result.getDay();\n    if (dayOfWeek !== 0 && dayOfWeek !== 6) {\n      remaining -= 1;\n    }\n  }\n  return result;\n}\n\nfunction parseDate(value: unknown): Date | null {\n  if (typeof value !== \"string\" && typeof value !== \"number\") {\n    return null;\n  }\n  const date = new Date(value);\n  return Number.isNaN(date.getTime()) ? null : date;\n}\n\n// Resolve the event type's booking window start date. For RANGE period types,\n// this is the `periodStartDate`; otherwise bookings start from today.\nexport function extractBookingWindowStart(payload: unknown): Date | null {\n  if (!payload || typeof payload !== \"object\") {\n    return null;\n  }\n\n  const eventType = payload as Record<string, unknown>;\n  const periodType =\n    typeof eventType.periodType === \"string\"\n      ? eventType.periodType.toUpperCase()\n      : \"\";\n\n  if (periodType === \"RANGE\") {\n    const start = parseDate(eventType.periodStartDate);\n    if (start) {\n      const today = new Date();\n      today.setHours(0, 0, 0, 0);\n      // Never return a start date in the past.\n      return start > today ? start : null;\n    }\n  }\n\n  return null;\n}\n\nexport function extractBookingWindowEnd(payload: unknown): Date | null {\n  if (!payload || typeof payload !== \"object\") {\n    return null;\n  }\n\n  const eventType = payload as Record<string, unknown>;\n  const periodType =\n    typeof eventType.periodType === \"string\"\n      ? eventType.periodType.toUpperCase()\n      : \"\";\n\n  if (periodType === \"RANGE\") {\n    return parseDate(eventType.periodEndDate);\n  }\n\n  if (periodType === \"ROLLING\" || periodType === \"ROLLING_WINDOW\") {\n    const days = toFiniteNumber(eventType.periodDays);\n    if (days != null) {\n      const today = new Date();\n      today.setHours(0, 0, 0, 0);\n      return eventType.periodCountCalendarDays\n        ? addCalendarDays(today, days)\n        : addBusinessDays(today, days);\n    }\n  }\n\n  return null;\n}\n\nexport function getInitials(name: string): string {\n  const parts = name\n    .split(\" \")\n    .map((part) => part.trim())\n    .filter(Boolean)\n    .slice(0, 2);\n\n  if (parts.length === 0) {\n    return \"NA\";\n  }\n\n  return parts.map((part) => part[0]?.toUpperCase() ?? \"\").join(\"\");\n}\n\nexport function formatSelectedWeekday(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    weekday: \"short\",\n  }).format(date);\n}\n\nexport function formatSelectedDay(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"2-digit\",\n  }).format(date);\n}\n\nexport function formatSelectedMonth(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    month: \"short\",\n  }).format(date);\n}\n\nexport function formatConfirmDateDetail(date: Date, locale: string): string {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"numeric\",\n    month: \"long\",\n    year: \"numeric\",\n  }).format(date);\n}\n\nfunction parseTimeLabel(\n  label: string,\n): { hours: number; minutes: number } | null {\n  const [hoursRaw, minutesRaw] = label.split(\":\");\n  const hours = Number(hoursRaw);\n  const minutes = Number(minutesRaw);\n  if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n    return null;\n  }\n  return { hours, minutes };\n}\n\nfunction formatConfirmTimePart(\n  date: Date,\n  locale: string,\n  hour12: boolean,\n  includePeriod: boolean,\n): string {\n  if (!hour12) {\n    return new Intl.DateTimeFormat(\"en-GB\", {\n      hour: \"2-digit\",\n      hour12: false,\n      minute: \"2-digit\",\n    }).format(date);\n  }\n\n  const parts = new Intl.DateTimeFormat(locale, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(date);\n\n  return parts\n    .filter(\n      (part) =>\n        part.type === \"hour\" ||\n        part.type === \"minute\" ||\n        (includePeriod && part.type === \"dayPeriod\") ||\n        (part.type === \"literal\" && part.value.trim() !== \"\"),\n    )\n    .map((part) =>\n      part.type === \"dayPeriod\" ? part.value.toLowerCase() : part.value,\n    )\n    .join(\"\")\n    .trim();\n}\n\nexport function formatConfirmTimeRange(\n  startTime: string,\n  durationMinutes: number,\n  hour12: boolean,\n  locale: string,\n): string {\n  const parsed = parseTimeLabel(startTime);\n  if (!parsed) {\n    return startTime;\n  }\n\n  const startDate = new Date();\n  startDate.setHours(parsed.hours, parsed.minutes, 0, 0);\n  const endDate = new Date(startDate.getTime() + durationMinutes * 60_000);\n\n  if (!hour12) {\n    return `${formatConfirmTimePart(startDate, locale, false, false)} – ${formatConfirmTimePart(endDate, locale, false, false)}`;\n  }\n\n  const startParts = new Intl.DateTimeFormat(locale, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(startDate);\n  const endParts = new Intl.DateTimeFormat(locale, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(endDate);\n  const startPeriod = startParts\n    .find((part) => part.type === \"dayPeriod\")\n    ?.value.toLowerCase();\n  const endPeriod = endParts\n    .find((part) => part.type === \"dayPeriod\")\n    ?.value.toLowerCase();\n  const samePeriod = startPeriod === endPeriod;\n\n  return `${formatConfirmTimePart(startDate, locale, true, !samePeriod)} – ${formatConfirmTimePart(endDate, locale, true, true)}`;\n}\n\nexport function toDateKey(date: Date, timeZone: string): string {\n  return new Intl.DateTimeFormat(\"en-CA\", {\n    day: \"2-digit\",\n    month: \"2-digit\",\n    timeZone,\n    year: \"numeric\",\n  }).format(date);\n}\n\n// Calendar grid dates are plain Y-M-D values (local Date components), not\n// instants. Use this when looking up slots keyed by the API/booking timezone.\nexport function toCalendarDateKey(date: Date): string {\n  const year = date.getFullYear();\n  const month = String(date.getMonth() + 1).padStart(2, \"0\");\n  const day = String(date.getDate()).padStart(2, \"0\");\n  return `${year}-${month}-${day}`;\n}\n\nexport function buildBookingStartIso(\n  dateKey: string,\n  selectedTime: string,\n  timeZone: string,\n): string {\n  const parsed = parseTimeLabel(selectedTime);\n  if (!parsed) {\n    throw new Error(\"Invalid time slot.\");\n  }\n\n  const dateParts = dateKey.split(\"-\");\n  const year = Number(dateParts[0]);\n  const month = Number(dateParts[1]);\n  const day = Number(dateParts[2]);\n  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {\n    throw new Error(\"Invalid booking date.\");\n  }\n\n  const { hours, minutes } = parsed;\n  const utcGuess = Date.UTC(year, month - 1, day, hours, minutes, 0);\n  const formatter = new Intl.DateTimeFormat(\"en-US\", {\n    day: \"2-digit\",\n    hour: \"2-digit\",\n    hour12: false,\n    minute: \"2-digit\",\n    month: \"2-digit\",\n    second: \"2-digit\",\n    timeZone,\n    year: \"numeric\",\n  });\n  const parts = formatter.formatToParts(new Date(utcGuess));\n  const get = (type: Intl.DateTimeFormatPartTypes) =>\n    Number(parts.find((part) => part.type === type)?.value);\n  const asUtc = Date.UTC(\n    get(\"year\"),\n    get(\"month\") - 1,\n    get(\"day\"),\n    get(\"hour\") % 24,\n    get(\"minute\"),\n    get(\"second\"),\n  );\n  const offset = asUtc - utcGuess;\n\n  return new Date(utcGuess - offset).toISOString();\n}\n\nexport function getTodayInTimeZone(\n  timeZone: string,\n  now: Date = new Date(),\n): Date {\n  const [yearRaw, monthRaw, dayRaw] = toDateKey(now, timeZone).split(\"-\");\n  const year = Number(yearRaw);\n  const month = Number(monthRaw);\n  const day = Number(dayRaw);\n  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {\n    const fallback = new Date(now);\n    fallback.setHours(0, 0, 0, 0);\n    return fallback;\n  }\n  return new Date(year, month - 1, day);\n}\n\nexport function getMinimumNavigableMonth(\n  timeZone: string,\n  bookingWindowStart?: Date | null,\n  now: Date = new Date(),\n): Date {\n  const todayInTz = getTodayInTimeZone(timeZone, now);\n  const startBase =\n    bookingWindowStart && bookingWindowStart > todayInTz\n      ? bookingWindowStart\n      : todayInTz;\n  return new Date(startBase.getFullYear(), startBase.getMonth(), 1);\n}\n\nexport function isCalendarMonthBefore(left: Date, right: Date): boolean {\n  const leftMonth = new Date(left.getFullYear(), left.getMonth(), 1);\n  const rightMonth = new Date(right.getFullYear(), right.getMonth(), 1);\n  return leftMonth.getTime() < rightMonth.getTime();\n}\n\nfunction toTimeLabel(date: Date, timeZone: string): string {\n  return new Intl.DateTimeFormat(\"en-GB\", {\n    hour: \"2-digit\",\n    hour12: false,\n    minute: \"2-digit\",\n    timeZone,\n  }).format(date);\n}\n\n// Whether a locale conventionally shows time in 24-hour form, used to seed the\n// 12h/24h toggle (e.g. en-US → 12h, most of Europe → 24h). Falls back to 24h.\nexport function prefers24Hour(locale: string): boolean {\n  try {\n    const resolved = new Intl.DateTimeFormat(locale, {\n      hour: \"numeric\",\n    }).resolvedOptions();\n    if (typeof resolved.hour12 === \"boolean\") {\n      return !resolved.hour12;\n    }\n    return resolved.hourCycle === \"h23\" || resolved.hourCycle === \"h24\";\n  } catch {\n    return true;\n  }\n}\n\n// Slots are stored as 24h \"HH:mm\" strings (stable ids); reformat for display.\nexport function displayTimeLabel(label: string, hour12: boolean): string {\n  if (!hour12) {\n    return label;\n  }\n  const [hoursRaw, minutesRaw] = label.split(\":\");\n  const hours = Number(hoursRaw);\n  const minutes = Number(minutesRaw);\n  if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n    return label;\n  }\n  const date = new Date();\n  date.setHours(hours, minutes, 0, 0);\n  const parts = new Intl.DateTimeFormat(undefined, {\n    hour: \"numeric\",\n    hour12: true,\n    minute: \"2-digit\",\n  }).formatToParts(date);\n  return parts\n    .filter((part) => part.type !== \"literal\" || part.value.trim() !== \"\")\n    .map((part) =>\n      part.type === \"dayPeriod\" ? part.value.toLowerCase() : part.value,\n    )\n    .join(\"\");\n}\n\nexport function isSingleDigit12HourLabel(label: string): boolean {\n  const hours = Number(label.split(\":\")[0]);\n  if (Number.isNaN(hours)) {\n    return false;\n  }\n\n  const normalizedHours = hours % 12 || 12;\n  return normalizedHours < 10;\n}\n\nfunction parseSlotDate(value: unknown): Date | null {\n  if (typeof value === \"string\") {\n    if (/^\\d{2}:\\d{2}$/.test(value)) {\n      return null;\n    }\n    const parsed = new Date(value);\n    return Number.isNaN(parsed.getTime()) ? null : parsed;\n  }\n\n  if (!value || typeof value !== \"object\") {\n    return null;\n  }\n\n  const record = value as Record<string, unknown>;\n  const candidate =\n    record.start ??\n    record.startTime ??\n    record.time ??\n    record.dateTime ??\n    record.date;\n\n  return parseSlotDate(candidate);\n}\n\nexport function extractSlotsByDate(\n  payload: unknown,\n  timeZone: string,\n): Record<string, string[]> {\n  const byDate = new Map<string, Set<string>>();\n  const addSlot = (dateKey: string, time: string) => {\n    if (!byDate.has(dateKey)) {\n      byDate.set(dateKey, new Set<string>());\n    }\n    byDate.get(dateKey)?.add(time);\n  };\n\n  if (!payload || typeof payload !== \"object\") {\n    return {};\n  }\n\n  const visitNode = (node: unknown) => {\n    if (!node || typeof node !== \"object\") {\n      return;\n    }\n\n    if (Array.isArray(node)) {\n      for (const item of node) {\n        visitNode(item);\n      }\n      return;\n    }\n\n    const record = node as Record<string, unknown>;\n\n    for (const [key, value] of Object.entries(record)) {\n      if (/^\\d{4}-\\d{2}-\\d{2}$/.test(key) && Array.isArray(value)) {\n        for (const slot of value) {\n          if (typeof slot === \"string\" && /^\\d{2}:\\d{2}$/.test(slot)) {\n            addSlot(key, slot);\n            continue;\n          }\n\n          const parsed = parseSlotDate(slot);\n          if (!parsed) {\n            continue;\n          }\n\n          addSlot(toDateKey(parsed, timeZone), toTimeLabel(parsed, timeZone));\n        }\n      } else {\n        visitNode(value);\n      }\n    }\n  };\n\n  visitNode(payload);\n\n  const result: Record<string, string[]> = {};\n  for (const [key, times] of byDate.entries()) {\n    result[key] = Array.from(times).sort((a, b) => a.localeCompare(b));\n  }\n\n  return result;\n}\n\n// Event's minimum booking notice in minutes (cal.com `minimumBookingNotice`).\nexport function extractMinimumBookingNotice(payload: unknown): number {\n  if (!payload || typeof payload !== \"object\") {\n    return 0;\n  }\n  const minutes = toFiniteNumber(\n    (payload as Record<string, unknown>).minimumBookingNotice,\n  );\n  return minutes != null && minutes > 0 ? minutes : 0;\n}\n\n// Drop slots that are no longer bookable: anything earlier than now plus the\n// minimum booking notice, evaluated in the booking timezone. Future days are\n// kept untouched; only the boundary day is partially filtered. Guards against\n// showing already-passed times for today (and as the session ages).\nexport function filterBookableSlots(\n  slotsByDate: Record<string, string[]>,\n  timeZone: string,\n  noticeMinutes: number,\n  now: Date,\n): Record<string, string[]> {\n  const cutoff = new Date(now.getTime() + noticeMinutes * 60_000);\n  const cutoffDateKey = toDateKey(cutoff, timeZone);\n  const [cutoffHoursRaw, cutoffMinutesRaw] = toTimeLabel(\n    cutoff,\n    timeZone,\n  ).split(\":\");\n  const cutoffHours = Number(cutoffHoursRaw);\n  const cutoffMinutes = Number(cutoffMinutesRaw);\n  if (Number.isNaN(cutoffHours) || Number.isNaN(cutoffMinutes)) {\n    return slotsByDate;\n  }\n  const cutoffOfDay = cutoffHours * 60 + cutoffMinutes;\n\n  const result: Record<string, string[]> = {};\n  for (const [dateKey, times] of Object.entries(slotsByDate)) {\n    if (dateKey < cutoffDateKey) {\n      continue;\n    }\n    if (dateKey > cutoffDateKey) {\n      result[dateKey] = times;\n      continue;\n    }\n    const kept = times.filter((time) => {\n      const [hoursRaw, minutesRaw] = time.split(\":\");\n      const hours = Number(hoursRaw);\n      const minutes = Number(minutesRaw);\n      if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n        return false;\n      }\n      return hours * 60 + minutes >= cutoffOfDay;\n    });\n    if (kept.length > 0) {\n      result[dateKey] = kept;\n    }\n  }\n  return result;\n}\n\nexport function findFirstAvailableDate(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n): Date | null {\n  const year = month.getFullYear();\n  const monthIndex = month.getMonth();\n  const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();\n  const todayKey = toCalendarDateKey(todayStart);\n\n  for (let day = 1; day <= daysInMonth; day += 1) {\n    const date = new Date(year, monthIndex, day);\n    const key = toCalendarDateKey(date);\n    if (key < todayKey) {\n      continue;\n    }\n\n    if ((slotsByDate[key] ?? []).length > 0) {\n      return date;\n    }\n  }\n\n  return null;\n}\n\n// --- Calendar grid (mirrors booker-calendar.tsx) ---\n\nexport function getWeekStartsOn(locale: string): number {\n  try {\n    const localeObj = new Intl.Locale(locale) as Intl.Locale & {\n      weekInfo?: { firstDay?: number };\n      getWeekInfo?: () => { firstDay?: number };\n    };\n    const info =\n      typeof localeObj.getWeekInfo === \"function\"\n        ? localeObj.getWeekInfo()\n        : localeObj.weekInfo;\n    const firstDay = info?.firstDay;\n    if (typeof firstDay === \"number\") {\n      return firstDay % 7;\n    }\n  } catch {\n    // Fall through to the Sunday default below.\n  }\n  return 0;\n}\n\nfunction calendarStartOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nfunction calendarEndOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nfunction calendarAddDays(date: Date, amount: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n}\n\nfunction calendarStartOfWeek(date: Date, weekStartsOn = 0): Date {\n  const day = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  const diff = (day.getDay() - weekStartsOn + 7) % 7;\n  return calendarAddDays(day, -diff);\n}\n\nfunction calendarEndOfWeek(date: Date, weekStartsOn = 0): Date {\n  return calendarAddDays(calendarStartOfWeek(date, weekStartsOn), 6);\n}\n\nfunction isSameCalendarMonth(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();\n}\n\nexport type CalendarViewOptions = {\n  weekStartsOn?: number;\n  shiftWeeks?: boolean;\n  startMonth?: Date;\n  endMonth?: Date;\n};\n\nexport function getVisibleCalendarDates(\n  month: Date,\n  today: Date,\n  options: CalendarViewOptions = {},\n): Date[] {\n  const weekStartsOn = options.weekStartsOn ?? 0;\n  const shiftWeeks = options.shiftWeeks ?? true;\n  const firstMonth = calendarStartOfMonth(month);\n\n  const naturalGridStart = calendarStartOfWeek(firstMonth, weekStartsOn);\n  const todayStart = new Date(\n    today.getFullYear(),\n    today.getMonth(),\n    today.getDate(),\n  );\n  const todayRow = Math.floor(\n    Math.round(\n      (todayStart.getTime() - naturalGridStart.getTime()) / 86_400_000,\n    ) / 7,\n  );\n  const expand =\n    shiftWeeks && isSameCalendarMonth(firstMonth, today) && todayRow >= 3;\n  const shiftRows = expand ? Math.max(0, todayRow - 3) : 0;\n\n  const monthStart = calendarStartOfMonth(firstMonth);\n  const offset = shiftRows * 7;\n  const gridStart = calendarAddDays(\n    calendarStartOfWeek(monthStart, weekStartsOn),\n    offset,\n  );\n  const gridEnd = calendarAddDays(\n    calendarEndOfWeek(calendarEndOfMonth(firstMonth), weekStartsOn),\n    offset,\n  );\n\n  const dates: Date[] = [];\n  for (\n    let cursor = gridStart;\n    cursor.getTime() <= gridEnd.getTime();\n    cursor = calendarAddDays(cursor, 1)\n  ) {\n    dates.push(cursor);\n  }\n\n  if (expand) {\n    while (dates.length < 42) {\n      const lastDate = dates.at(-1);\n      if (!lastDate) {\n        break;\n      }\n      dates.push(calendarAddDays(lastDate, 1));\n    }\n  }\n\n  const navStart = options.startMonth\n    ? calendarStartOfMonth(options.startMonth)\n    : undefined;\n  const navEnd = options.endMonth\n    ? calendarStartOfMonth(options.endMonth)\n    : undefined;\n  const monthEnd = calendarEndOfMonth(firstMonth);\n\n  return dates.filter((date) => {\n    if (navStart && date < navStart) {\n      return false;\n    }\n    if (navEnd && date > calendarEndOfMonth(navEnd)) {\n      return false;\n    }\n    if (date < monthStart) {\n      return false;\n    }\n    if (!expand && date > monthEnd) {\n      return false;\n    }\n    return true;\n  });\n}\n\nexport function findFirstAvailableInVisibleGrid(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  todayStart: Date,\n  options: CalendarViewOptions = {},\n): Date | null {\n  const todayKey = toCalendarDateKey(todayStart);\n  for (const date of getVisibleCalendarDates(month, todayStart, options)) {\n    const key = toCalendarDateKey(date);\n    if (key < todayKey) {\n      continue;\n    }\n    if ((slotsByDate[key] ?? []).length > 0) {\n      return date;\n    }\n  }\n  return null;\n}\n\nexport function hasAvailabilityInVisibleGrid(\n  month: Date,\n  slotsByDate: Record<string, string[]>,\n  todayStart: Date,\n  options: CalendarViewOptions = {},\n): boolean {\n  return (\n    findFirstAvailableInVisibleGrid(month, slotsByDate, todayStart, options) !=\n    null\n  );\n}\n\nexport function pickDefaultSelectedDate(\n  currentMonth: Date,\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n  viewOptions?: CalendarViewOptions,\n): Date | null {\n  if (viewOptions) {\n    return findFirstAvailableInVisibleGrid(\n      currentMonth,\n      slotsByDate,\n      todayStart,\n      viewOptions,\n    );\n  }\n\n  return findFirstAvailableDate(\n    currentMonth,\n    slotsByDate,\n    _timeZone,\n    todayStart,\n  );\n}\n\n// Earliest loaded date (today or later) that still has open slots, used to\n// offer a \"jump to next availability\" affordance from an empty month/day.\nexport function findNextAvailableDate(\n  slotsByDate: Record<string, string[]>,\n  _timeZone: string,\n  todayStart: Date,\n): Date | null {\n  const todayKey = toCalendarDateKey(todayStart);\n  let bestKey: string | null = null;\n  for (const [key, times] of Object.entries(slotsByDate)) {\n    if (times.length === 0 || key < todayKey) {\n      continue;\n    }\n    if (bestKey === null || key < bestKey) {\n      bestKey = key;\n    }\n  }\n\n  if (!bestKey) {\n    return null;\n  }\n\n  const [yearRaw, monthRaw, dayRaw] = bestKey.split(\"-\");\n  const year = Number(yearRaw);\n  const month = Number(monthRaw);\n  const day = Number(dayRaw);\n  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {\n    return null;\n  }\n  return new Date(year, month - 1, day);\n}\n",
       "type": "registry:lib",
       "target": "lib/booker/utils.ts"
     }
diff --git a/apps/ui/public/r/cal-api.json b/apps/ui/public/r/cal-api.json
index fdf784ae6..f48f9428c 100644
--- a/apps/ui/public/r/cal-api.json
+++ b/apps/ui/public/r/cal-api.json
@@ -20,7 +20,7 @@
     },
     {
       "path": "registry/default/lib/cal-api/event-types.ts",
-      "content": "import \"server-only\";\n\nimport { calApi } from \"./client\";\nimport type { EventType } from \"./types\";\n\nconst EVENT_TYPES_API_VERSION = \"2024-06-14\";\n\nexport async function listEventTypes(params: {\n  username?: string;\n  usernames?: string[];\n  teamId?: number;\n  teamSlug?: string;\n  orgId?: number;\n  orgSlug?: string;\n  isTeamEvent?: boolean;\n  eventSlug?: string;\n}): Promise<EventType[]> {\n  const cacheKey =\n    params.teamId?.toString() ??\n    params.teamSlug ??\n    params.usernames?.join(\",\") ??\n    params.username ??\n    \"all\";\n\n  return calApi<EventType[]>(\"/event-types\", {\n    apiVersion: EVENT_TYPES_API_VERSION,\n    next: { revalidate: 60, tags: [\"event-types\", cacheKey] },\n    query: {\n      eventSlug: params.eventSlug,\n      isTeamEvent: params.isTeamEvent,\n      orgId: params.orgId,\n      orgSlug: params.orgSlug,\n      teamId: params.teamId,\n      teamSlug: params.teamSlug,\n      username: params.username,\n      usernames: params.usernames?.join(\",\"),\n    },\n  });\n}\n\nexport async function getEventType(params: {\n  username: string;\n  eventSlug: string;\n  orgId?: number;\n  orgSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes(params);\n  return matches[0] ?? null;\n}\n\nexport async function getTeamEventType(params: {\n  teamId: number;\n  eventSlug: string;\n  orgId?: number;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug,\n    isTeamEvent: true,\n    orgId: params.orgId,\n    teamId: params.teamId,\n  });\n  return matches[0] ?? null;\n}\n\nexport async function getTeamSlugEventType(params: {\n  teamSlug: string;\n  eventSlug: string;\n  orgId?: number;\n  orgSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug,\n    isTeamEvent: true,\n    orgId: params.orgId,\n    orgSlug: params.orgSlug,\n    teamSlug: params.teamSlug,\n  });\n  return matches[0] ?? null;\n}\n\nexport async function getDynamicEventType(params: {\n  usernames: string[];\n  orgId?: number;\n  orgSlug?: string;\n  eventSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug ?? \"dynamic\",\n    orgId: params.orgId,\n    orgSlug: params.orgSlug,\n    usernames: params.usernames,\n  });\n  return matches[0] ?? null;\n}\n\nexport async function getEventTypeById(\n  eventTypeId: number,\n): Promise<EventType> {\n  return calApi<EventType>(`/event-types/${eventTypeId}`, {\n    apiVersion: EVENT_TYPES_API_VERSION,\n    next: { revalidate: 60, tags: [`event-type-${eventTypeId}`] },\n  });\n}\n",
+      "content": "import \"server-only\";\n\nimport { calApi } from \"./client\";\nimport type { EventType } from \"./types\";\n\nconst EVENT_TYPES_API_VERSION = \"2024-06-14\";\n\nfunction findEventTypeBySlug(\n  matches: EventType[],\n  eventSlug: string,\n): EventType | null {\n  return matches.find((event) => event.slug === eventSlug) ?? null;\n}\n\nexport async function listEventTypes(params: {\n  username?: string;\n  usernames?: string[];\n  teamId?: number;\n  teamSlug?: string;\n  orgId?: number;\n  orgSlug?: string;\n  isTeamEvent?: boolean;\n  eventSlug?: string;\n}): Promise<EventType[]> {\n  const cacheKey =\n    params.teamId?.toString() ??\n    params.teamSlug ??\n    params.usernames?.join(\",\") ??\n    params.username ??\n    \"all\";\n\n  return calApi<EventType[]>(\"/event-types\", {\n    apiVersion: EVENT_TYPES_API_VERSION,\n    next: { revalidate: 60, tags: [\"event-types\", cacheKey] },\n    query: {\n      eventSlug: params.eventSlug,\n      isTeamEvent: params.isTeamEvent,\n      orgId: params.orgId,\n      orgSlug: params.orgSlug,\n      teamId: params.teamId,\n      teamSlug: params.teamSlug,\n      username: params.username,\n      usernames: params.usernames?.join(\",\"),\n    },\n  });\n}\n\nexport async function getEventType(params: {\n  username: string;\n  eventSlug: string;\n  orgId?: number;\n  orgSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes(params);\n  return findEventTypeBySlug(matches, params.eventSlug);\n}\n\nexport async function getTeamEventType(params: {\n  teamId: number;\n  eventSlug: string;\n  orgId?: number;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug,\n    isTeamEvent: true,\n    orgId: params.orgId,\n    teamId: params.teamId,\n  });\n  return findEventTypeBySlug(matches, params.eventSlug);\n}\n\nexport async function getTeamSlugEventType(params: {\n  teamSlug: string;\n  eventSlug: string;\n  orgId?: number;\n  orgSlug?: string;\n}): Promise<EventType | null> {\n  const matches = await listEventTypes({\n    eventSlug: params.eventSlug,\n    isTeamEvent: true,\n    orgId: params.orgId,\n    orgSlug: params.orgSlug,\n    teamSlug: params.teamSlug,\n  });\n  return findEventTypeBySlug(matches, params.eventSlug);\n}\n\nexport async function getDynamicEventType(params: {\n  usernames: string[];\n  orgId?: number;\n  orgSlug?: string;\n  eventSlug?: string;\n}): Promise<EventType | null> {\n  const eventSlug = params.eventSlug ?? \"dynamic\";\n  const matches = await listEventTypes({\n    eventSlug,\n    orgId: params.orgId,\n    orgSlug: params.orgSlug,\n    usernames: params.usernames,\n  });\n  return findEventTypeBySlug(matches, eventSlug);\n}\n\nexport async function getEventTypeById(\n  eventTypeId: number,\n): Promise<EventType> {\n  return calApi<EventType>(`/event-types/${eventTypeId}`, {\n    apiVersion: EVENT_TYPES_API_VERSION,\n    next: { revalidate: 60, tags: [`event-type-${eventTypeId}`] },\n  });\n}\n",
       "type": "registry:lib",
       "target": "lib/cal-api/event-types.ts"
     },
@@ -38,9 +38,15 @@
     },
     {
       "path": "registry/default/lib/cal-api/types.ts",
-      "content": "export type ApiSuccess<T> = {\n  status: \"success\";\n  data: T;\n};\n\nexport type ApiError = {\n  status: \"error\";\n  timestamp?: string;\n  path?: string;\n  error: {\n    code: string;\n    message: string;\n    details?: unknown;\n  };\n};\n\nexport type ApiResponse<T> = ApiSuccess<T> | ApiError;\n\nexport type EventTypeLocation = {\n  type: string;\n  address?: string;\n  link?: string;\n  hostPhoneNumber?: string;\n  displayLocationPublicly?: boolean;\n};\n\nexport type EventTypeOwner = {\n  id: number;\n  username: string;\n  name?: string | null;\n  avatarUrl?: string | null;\n  weekStart?: string;\n  timeZone?: string;\n};\n\nexport type EventTypeTeam = {\n  id: number;\n  slug: string;\n  name: string;\n  bannerUrl?: string | null;\n  logoUrl?: string | null;\n};\n\nexport type EventType = {\n  id: number;\n  slug: string;\n  title: string;\n  description?: string | null;\n  lengthInMinutes: number;\n  locations: EventTypeLocation[];\n  bookingFields?: BookingField[];\n  disableGuests?: boolean;\n  hidden?: boolean;\n  requiresConfirmation?: boolean;\n  isInstantEvent?: boolean;\n  ownerId?: number;\n  teamId?: number;\n  team?: EventTypeTeam;\n  users?: EventTypeOwner[];\n  hosts?: EventTypeOwner[];\n  metadata?: Record<string, unknown>;\n};\n\nexport type BookingFieldType =\n  | \"name\"\n  | \"email\"\n  | \"phone\"\n  | \"text\"\n  | \"textarea\"\n  | \"number\"\n  | \"select\"\n  | \"multiselect\"\n  | \"checkbox\"\n  | \"radio\"\n  | \"boolean\"\n  | \"url\"\n  | \"address\";\n\nexport type BookingField = {\n  slug: string;\n  type: BookingFieldType;\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disableOnPrefill?: boolean;\n  hidden?: boolean;\n  options?: Array<{ label: string; value: string }>;\n};\n\nexport type Slot = {\n  start: string;\n  attendees?: number;\n  bookingUid?: string;\n};\n\nexport type AvailableSlots = Record<string, Slot[]>;\n\nexport type BookingAttendee = {\n  name: string;\n  email: string;\n  timeZone: string;\n  language?: string;\n  phoneNumber?: string;\n};\n\nexport type Booking = {\n  uid: string;\n  id: number;\n  title: string;\n  status: \"accepted\" | \"pending\" | \"cancelled\" | \"rejected\" | \"awaiting_host\";\n  start: string;\n  end: string;\n  duration: number;\n  eventTypeId: number;\n  eventType?: { id: number; slug: string; title?: string };\n  attendees: BookingAttendee[];\n  hosts: Array<{ id: number; name: string; email: string; username?: string }>;\n  meetingUrl?: string | null;\n  location?: string;\n  absentHost?: boolean;\n  createdAt?: string;\n  updatedAt?: string;\n  metadata?: Record<string, unknown>;\n  rescheduledFromUid?: string;\n};\n\nexport type CreateBookingInput = {\n  start: string;\n  eventTypeId: number;\n  attendee: BookingAttendee;\n  guests?: string[];\n  bookingFieldsResponses?: Record<string, unknown>;\n  location?: string;\n  metadata?: Record<string, unknown>;\n  lengthInMinutes?: number;\n};\n",
+      "content": "export type ApiSuccess<T> = {\n  status: \"success\";\n  data: T;\n};\n\nexport type ApiError = {\n  status: \"error\";\n  timestamp?: string;\n  path?: string;\n  error: {\n    code: string;\n    message: string;\n    details?: unknown;\n  };\n};\n\nexport type ApiResponse<T> = ApiSuccess<T> | ApiError;\n\nexport type EventTypeLocation = {\n  type: string;\n  address?: string;\n  link?: string;\n  hostPhoneNumber?: string;\n  displayLocationPublicly?: boolean;\n};\n\nexport type EventTypeOwner = {\n  id: number;\n  username: string;\n  name?: string | null;\n  avatarUrl?: string | null;\n  weekStart?: string;\n  timeZone?: string;\n};\n\nexport type EventTypeTeam = {\n  id: number;\n  slug: string;\n  name: string;\n  bannerUrl?: string | null;\n  logoUrl?: string | null;\n};\n\nexport type EventType = {\n  id: number;\n  slug: string;\n  title: string;\n  description?: string | null;\n  lengthInMinutes: number;\n  locations: EventTypeLocation[];\n  bookingFields?: BookingField[];\n  disableGuests?: boolean;\n  hidden?: boolean;\n  requiresConfirmation?: boolean;\n  isInstantEvent?: boolean;\n  ownerId?: number;\n  teamId?: number;\n  team?: EventTypeTeam;\n  users?: EventTypeOwner[];\n  hosts?: EventTypeOwner[];\n  metadata?: Record<string, unknown>;\n};\n\nexport type BookingFieldType =\n  | \"name\"\n  | \"email\"\n  | \"phone\"\n  | \"text\"\n  | \"textarea\"\n  | \"number\"\n  | \"select\"\n  | \"multiselect\"\n  | \"checkbox\"\n  | \"radio\"\n  | \"boolean\"\n  | \"url\"\n  | \"address\";\n\nexport type BookingField = {\n  slug: string;\n  type: BookingFieldType;\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disableOnPrefill?: boolean;\n  hidden?: boolean;\n  options?: Array<{ label: string; value: string }>;\n};\n\nexport type Slot = {\n  start: string;\n  attendees?: number;\n  bookingUid?: string;\n};\n\nexport type AvailableSlots = Record<string, Slot[]>;\n\nexport type BookingAttendee = {\n  name: string;\n  email: string;\n  timeZone: string;\n  language?: string;\n  phoneNumber?: string;\n};\n\nexport type Booking = {\n  uid: string;\n  id: number;\n  title: string;\n  status: \"accepted\" | \"pending\" | \"cancelled\" | \"rejected\" | \"awaiting_host\";\n  start: string;\n  end: string;\n  duration: number;\n  eventTypeId: number;\n  eventType?: { id: number; slug: string; title?: string };\n  attendees: BookingAttendee[];\n  hosts: Array<{ id: number; name: string; email: string; username?: string }>;\n  meetingUrl?: string | null;\n  location?: string;\n  absentHost?: boolean;\n  createdAt?: string;\n  updatedAt?: string;\n  metadata?: Record<string, unknown>;\n  rescheduledFromUid?: string;\n};\n\nexport type BookingLocationInput =\n  | { type: \"integration\"; integration: string }\n  | { type: \"address\" }\n  | { type: \"link\" }\n  | { type: \"phone\" }\n  | { type: \"organizersDefaultApp\" };\n\nexport type CreateBookingInput = {\n  start: string;\n  eventTypeId?: number;\n  eventTypeSlug?: string;\n  username?: string;\n  teamSlug?: string;\n  organizationSlug?: string;\n  attendee: BookingAttendee;\n  guests?: string[];\n  bookingFieldsResponses?: Record<string, unknown>;\n  location?: BookingLocationInput | string;\n  metadata?: Record<string, unknown>;\n  lengthInMinutes?: number;\n};\n",
       "type": "registry:lib",
       "target": "lib/cal-api/types.ts"
+    },
+    {
+      "path": "registry/default/lib/cal-api/bookings.ts",
+      "content": "import \"server-only\";\n\nimport { calApi } from \"./client\";\nimport type { Booking, CreateBookingInput } from \"./types\";\n\nexport async function createBooking(\n  input: CreateBookingInput,\n): Promise<Booking> {\n  return calApi<Booking>(\"/bookings\", {\n    body: input,\n    method: \"POST\",\n  });\n}\n",
+      "type": "registry:lib",
+      "target": "lib/cal-api/bookings.ts"
     }
   ],
   "type": "registry:lib"
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index 408620875..f70413665 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -11429,6 +11429,7 @@
         "@coss/empty",
         "@coss/field",
         "@coss/form",
+        "@coss/group",
         "@coss/input",
         "@coss/label",
         "@coss/popover",
@@ -11738,6 +11739,11 @@
           "path": "registry/default/lib/cal-api/types.ts",
           "target": "lib/cal-api/types.ts",
           "type": "registry:lib"
+        },
+        {
+          "path": "registry/default/lib/cal-api/bookings.ts",
+          "target": "lib/cal-api/bookings.ts",
+          "type": "registry:lib"
         }
       ],
       "name": "cal-api",
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index 408620875..f70413665 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -11429,6 +11429,7 @@
         "@coss/empty",
         "@coss/field",
         "@coss/form",
+        "@coss/group",
         "@coss/input",
         "@coss/label",
         "@coss/popover",
@@ -11738,6 +11739,11 @@
           "path": "registry/default/lib/cal-api/types.ts",
           "target": "lib/cal-api/types.ts",
           "type": "registry:lib"
+        },
+        {
+          "path": "registry/default/lib/cal-api/bookings.ts",
+          "target": "lib/cal-api/bookings.ts",
+          "type": "registry:lib"
         }
       ],
       "name": "cal-api",
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index 208eb23ae..c70a210b1 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -9839,7 +9839,7 @@ export const Index: Record<string, any> = {
     name: "booker-1",
     description: "A full scheduling flow powered by Cal.com API v2.",
     type: "registry:block",
-    registryDependencies: ["@coss/avatar","@coss/button","@coss/cal-api","@coss/card","@coss/combobox","@coss/empty","@coss/field","@coss/form","@coss/input","@coss/label","@coss/popover","@coss/scroll-area","@coss/select","@coss/skeleton","@coss/switch","@coss/textarea","@coss/tooltip"],
+    registryDependencies: ["@coss/avatar","@coss/button","@coss/cal-api","@coss/card","@coss/combobox","@coss/empty","@coss/field","@coss/form","@coss/group","@coss/input","@coss/label","@coss/popover","@coss/scroll-area","@coss/select","@coss/skeleton","@coss/switch","@coss/textarea","@coss/tooltip"],
     files: [{
       path: "registry/default/atoms/booker-1.tsx",
       type: "registry:block",
@@ -9974,6 +9974,10 @@ export const Index: Record<string, any> = {
       path: "registry/default/lib/cal-api/types.ts",
       type: "registry:lib",
       target: "lib/cal-api/types.ts"
+    },{
+      path: "registry/default/lib/cal-api/bookings.ts",
+      type: "registry:lib",
+      target: "lib/cal-api/bookings.ts"
     }],
     component: React.lazy(async () => {
       const mod = await import("@/registry/default/lib/cal-api/client.ts")
diff --git a/apps/ui/registry/default/atoms/booker-1.tsx b/apps/ui/registry/default/atoms/booker-1.tsx
index eba7f593e..fe56c9f23 100644
--- a/apps/ui/registry/default/atoms/booker-1.tsx
+++ b/apps/ui/registry/default/atoms/booker-1.tsx
@@ -39,6 +39,7 @@ export function Booker({
   timezone,
   labels,
   defaultFormValues,
+  onCreateBookingSuccess,
 }: BookerProps) {
   const t = getBookerLabels(labels);
   const booker = useBooker({ initialData, target, timezone });
@@ -55,7 +56,7 @@ export function Booker({
 
   const displayMeta = booker.meta;
   const selectedDate = booker.timePickerProps.selectedDate;
-  const selectedTime = booker.selectedTime;
+  const selectedTime = booker.confirmFormProps.selectedTime;
   const showSelectedSlot =
     booker.step === "confirm" && selectedDate != null && selectedTime != null;
   const headerImageAlt = displayMeta
@@ -209,6 +210,7 @@ export function Booker({
               className="@3xl:w-[min(28.75rem,100cqw-2*var(--booker-side))] w-full @3xl:shrink-0 @5xl:p-6 p-4"
             >
               <BookerConfirmForm
+                {...booker.confirmFormProps}
                 defaultEmail={
                   typeof defaultFormValues?.email === "string"
                     ? defaultFormValues.email
@@ -220,7 +222,7 @@ export function Booker({
                     : undefined
                 }
                 labels={t}
-                onBack={booker.onBack}
+                onSuccess={onCreateBookingSuccess}
               />
             </div>
           )}
diff --git a/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx b/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
index e39158b50..bf17d90d6 100644
--- a/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
+++ b/apps/ui/registry/default/atoms/booker/booker-confirm-form.tsx
@@ -1,38 +1,163 @@
 "use client";
 
-import { UserPlusIcon } from "lucide-react";
+import { UserPlusIcon, XIcon } from "lucide-react";
+import type { FormEvent } from "react";
+import { useRef, useState } from "react";
 import { Button } from "@/registry/default/ui/button";
 import { Field, FieldError, FieldLabel } from "@/registry/default/ui/field";
 import { Form } from "@/registry/default/ui/form";
+import { Group } from "@/registry/default/ui/group";
 import { Input } from "@/registry/default/ui/input";
 import { Textarea } from "@/registry/default/ui/textarea";
 import type { BookerLabels } from "./booker-labels";
+import { getLocationOptionValue, LocationPicker } from "./location";
+import { createBookingAction } from "@/lib/booker/actions";
+import type { BookerConfirmFormContext } from "@/lib/booker/use-booker";
+import { toCalendarDateKey } from "@/lib/booker/utils";
+import type { Booking } from "@/lib/cal-api/types";
 
-type BookerConfirmFormProps = {
+export type BookerConfirmFormProps = BookerConfirmFormContext & {
   defaultEmail?: string;
   defaultName?: string;
   labels: BookerLabels;
-  onBack: () => void;
+  onSuccess?: (booking: Booking) => void;
 };
 
 function RequiredMark() {
   return <span className="text-destructive-foreground">*</span>;
 }
 
+function getDefaultLocationProvider(
+  locations: BookerConfirmFormContext["locations"],
+): string {
+  const location = locations?.[0];
+  if (!location) {
+    return "";
+  }
+
+  return location.provider || getLocationOptionValue(location, 0);
+}
+
 export function BookerConfirmForm({
   defaultEmail,
   defaultName,
+  disableGuests = false,
+  durationMinutes,
+  includeLengthInMinutes,
   labels,
+  locale,
+  locations = [],
   onBack,
+  onSuccess,
+  selectedDate,
+  selectedTime,
+  target,
+  timeZone,
 }: BookerConfirmFormProps) {
+  const nextGuestIdRef = useRef(0);
+  const [guestIds, setGuestIds] = useState<number[]>([]);
+  const [locationProvider, setLocationProvider] = useState(() =>
+    getDefaultLocationProvider(locations),
+  );
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [successBooking, setSuccessBooking] = useState<Booking | null>(null);
+
+  const resolvedLocationProvider =
+    locations.length > 1
+      ? locationProvider || getDefaultLocationProvider(locations)
+      : getDefaultLocationProvider(locations);
+
+  const handleAddGuest = () => {
+    const id = nextGuestIdRef.current;
+    nextGuestIdRef.current += 1;
+    setGuestIds((current) => [...current, id]);
+  };
+
+  const handleRemoveGuest = (id: number) => {
+    setGuestIds((current) => current.filter((guestId) => guestId !== id));
+  };
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSubmitError(null);
+
+    if (!selectedDate || !selectedTime) {
+      setSubmitError(labels.confirmError);
+      return;
+    }
+
+    const formData = new FormData(event.currentTarget);
+    const name = String(formData.get("name") ?? "").trim();
+    const email = String(formData.get("email") ?? "").trim();
+    const notes = String(formData.get("notes") ?? "").trim();
+    const guests = formData
+      .getAll("guests")
+      .map((value) => String(value).trim())
+      .filter(Boolean);
+
+    if (!name || !email) {
+      return;
+    }
+
+    setSubmitting(true);
+
+    try {
+      const result = await createBookingAction({
+        email,
+        guests: guests.length > 0 ? guests : undefined,
+        ...(includeLengthInMinutes && durationMinutes
+          ? { lengthInMinutes: durationMinutes }
+          : {}),
+        locale,
+        locationProvider: resolvedLocationProvider || undefined,
+        name,
+        notes: notes || undefined,
+        selectedDateKey: toCalendarDateKey(selectedDate),
+        selectedTime,
+        target,
+        timeZone,
+      });
+
+      if (!result.ok) {
+        setSubmitError(result.error || labels.confirmError);
+        return;
+      }
+
+      setSuccessBooking(result.booking);
+      onSuccess?.(result.booking);
+    } catch {
+      setSubmitError(labels.confirmError);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (successBooking) {
+    return (
+      <div className="flex flex-col gap-4">
+        <p className="font-medium text-base sm:text-sm">
+          {labels.confirmSuccess}
+        </p>
+        {successBooking.meetingUrl ? (
+          <p className="text-muted-foreground text-sm">
+            <a
+              className="text-foreground underline-offset-4 hover:underline"
+              href={successBooking.meetingUrl}
+              rel="noreferrer"
+              target="_blank"
+            >
+              {successBooking.meetingUrl}
+            </a>
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col gap-4">
-      <Form
-        className="flex flex-col gap-4"
-        onFormSubmit={() => {
-          // Booking submission to be wired.
-        }}
-      >
+      <Form className="flex flex-col gap-4" onSubmit={handleSubmit}>
         <Field name="name">
           <FieldLabel>
             {labels.confirmYourName} <RequiredMark />
@@ -54,15 +179,65 @@ export function BookerConfirmForm({
           <FieldError>{labels.confirmEmailError}</FieldError>
         </Field>
 
+        <LocationPicker
+          label={labels.confirmLocation}
+          locations={locations}
+          onValueChange={setLocationProvider}
+        />
+
         <Field name="notes">
           <FieldLabel>{labels.confirmNotes}</FieldLabel>
           <Textarea placeholder={labels.confirmNotesPlaceholder} rows={3} />
         </Field>
 
-        <Button className="self-start" type="button" variant="ghost">
-          <UserPlusIcon aria-hidden="true" />
-          {labels.confirmAddGuests}
-        </Button>
+        {guestIds.length > 0 ? (
+          <div className="flex flex-col gap-2">
+            {guestIds.map((guestId) => (
+              <Group
+                key={guestId}
+                aria-label={labels.confirmGuestEmail}
+                className="w-full gap-2"
+              >
+                <Input
+                  aria-label={labels.confirmGuestEmail}
+                  className="flex-1"
+                  name="guests"
+                  placeholder={labels.confirmGuestEmailPlaceholder}
+                  type="email"
+                />
+                <div>
+                  <Button
+                    aria-label={labels.confirmRemoveGuest}
+                    onClick={() => handleRemoveGuest(guestId)}
+                    size="icon"
+                    type="button"
+                    variant="outline"
+                  >
+                    <XIcon aria-hidden="true" />
+                  </Button>
+                </div>
+              </Group>
+            ))}
+          </div>
+        ) : null}
+
+        {!disableGuests ? (
+          <Button
+            className="h-auto! self-start px-0.5"
+            onClick={handleAddGuest}
+            type="button"
+            variant="link"
+          >
+            <UserPlusIcon aria-hidden="true" />
+            {labels.confirmAddGuests}
+          </Button>
+        ) : null}
+
+        {submitError ? (
+          <p className="text-destructive-foreground text-xs" role="alert">
+            {submitError}
+          </p>
+        ) : null}
 
         <p className="text-muted-foreground text-xs">
           {labels.confirmTermsPrefix}{" "}
@@ -87,10 +262,17 @@ export function BookerConfirmForm({
         </p>
 
         <div className="flex justify-end gap-2 pt-1">
-          <Button onClick={onBack} type="button" variant="ghost">
+          <Button
+            disabled={submitting}
+            onClick={onBack}
+            type="button"
+            variant="ghost"
+          >
             {labels.confirmBack}
           </Button>
-          <Button type="submit">{labels.confirmSubmit}</Button>
+          <Button loading={submitting} type="submit">
+            {submitting ? labels.confirmSubmitting : labels.confirmSubmit}
+          </Button>
         </div>
       </Form>
     </div>
diff --git a/apps/ui/registry/default/atoms/booker/booker-labels.ts b/apps/ui/registry/default/atoms/booker/booker-labels.ts
index 51223f6f9..c15a24536 100644
--- a/apps/ui/registry/default/atoms/booker/booker-labels.ts
+++ b/apps/ui/registry/default/atoms/booker/booker-labels.ts
@@ -23,9 +23,16 @@ export type BookerLabels = {
   confirmEmailError: string;
   confirmNotes: string;
   confirmNotesPlaceholder: string;
+  confirmLocation: string;
+  confirmGuestEmail: string;
+  confirmGuestEmailPlaceholder: string;
+  confirmRemoveGuest: string;
   confirmAddGuests: string;
   confirmBack: string;
   confirmSubmit: string;
+  confirmSubmitting: string;
+  confirmError: string;
+  confirmSuccess: string;
   confirmTermsPrefix: string;
   confirmTerms: string;
   confirmPrivacyPolicy: string;
@@ -59,9 +66,16 @@ const DEFAULT_BOOKER_LABELS: BookerLabels = {
   confirmNotes: "Additional notes",
   confirmNotesPlaceholder:
     "Please share anything that will help prepare for our meeting.",
+  confirmLocation: "Location",
+  confirmGuestEmail: "Guest email",
+  confirmGuestEmailPlaceholder: "guest@example.com",
+  confirmRemoveGuest: "Remove guest",
   confirmAddGuests: "Add guests",
   confirmBack: "Back",
   confirmSubmit: "Confirm",
+  confirmSubmitting: "Confirming…",
+  confirmError: "Could not create booking. Please try again.",
+  confirmSuccess: "Booking confirmed",
   confirmTermsPrefix: "By proceeding, you agree to Cal.com's",
   confirmTerms: "Terms",
   confirmPrivacyPolicy: "Privacy Policy",
diff --git a/apps/ui/registry/default/atoms/booker/location.tsx b/apps/ui/registry/default/atoms/booker/location.tsx
index 9d055b104..1db692825 100644
--- a/apps/ui/registry/default/atoms/booker/location.tsx
+++ b/apps/ui/registry/default/atoms/booker/location.tsx
@@ -2,12 +2,20 @@
 
 import { ExternalLinkIcon, MapPinIcon } from "lucide-react";
 import { useMemo, useState } from "react";
+import { Field, FieldLabel } from "@/registry/default/ui/field";
 import {
   Popover,
   PopoverDescription,
   PopoverPopup,
   PopoverTrigger,
 } from "@/registry/default/ui/popover";
+import {
+  Select,
+  SelectItem,
+  SelectPopup,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select";
 import type { EventTypeLocationOption } from "@/lib/booker/utils";
 
 type LocationLabels = {
@@ -76,7 +84,7 @@ function resolveProviderIcons(provider?: string): string[] {
     .map(normalizeIconUrl);
 }
 
-function LocationIcon({ provider }: { provider?: string }) {
+export function LocationIcon({ provider }: { provider?: string }) {
   const iconUrls = useMemo(() => resolveProviderIcons(provider), [provider]);
   const [failedIconUrls, setFailedIconUrls] = useState<Set<string>>(
     () => new Set(),
@@ -113,7 +121,7 @@ function LocationIcon({ provider }: { provider?: string }) {
   );
 }
 
-function LocationRow({ label, provider }: EventTypeLocationOption) {
+export function LocationRow({ label, provider }: EventTypeLocationOption) {
   return (
     <div className="flex items-center gap-2">
       <LocationIcon provider={provider} />
@@ -122,6 +130,80 @@ function LocationRow({ label, provider }: EventTypeLocationOption) {
   );
 }
 
+export function getLocationOptionValue(
+  location: EventTypeLocationOption,
+  index: number,
+): string {
+  return location.provider || `${location.label}-${index}`;
+}
+
+type LocationSelectItem = EventTypeLocationOption & {
+  value: string;
+};
+
+type LocationPickerProps = {
+  locations: EventTypeLocationOption[];
+  label: string;
+  onValueChange?: (provider: string) => void;
+};
+
+function LocationSelectOption({ label, provider }: LocationSelectItem) {
+  return (
+    <span className="flex items-center gap-2">
+      <LocationIcon provider={provider} />
+      <span className="truncate">{label}</span>
+    </span>
+  );
+}
+
+export function LocationPicker({
+  locations,
+  label,
+  onValueChange,
+}: LocationPickerProps) {
+  const items = useMemo(
+    (): LocationSelectItem[] =>
+      locations.map((location, index) => ({
+        ...location,
+        value: getLocationOptionValue(location, index),
+      })),
+    [locations],
+  );
+
+  if (items.length <= 1) {
+    return null;
+  }
+
+  return (
+    <Field name="location">
+      <FieldLabel>{label}</FieldLabel>
+      <Select
+        aria-label={label}
+        defaultValue={items[0]}
+        itemToStringValue={(item) => item.value}
+        onValueChange={(item) => {
+          if (item) {
+            onValueChange?.(item.provider || item.value);
+          }
+        }}
+      >
+        <SelectTrigger>
+          <SelectValue>
+            {(item) => <LocationSelectOption {...item} />}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectPopup>
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item}>
+              <LocationSelectOption {...item} />
+            </SelectItem>
+          ))}
+        </SelectPopup>
+      </Select>
+    </Field>
+  );
+}
+
 export function Location({ locations, labels }: LocationProps) {
   if (locations.length <= 1) {
     const location = locations[0];
diff --git a/apps/ui/registry/default/atoms/lib/booker/actions.ts b/apps/ui/registry/default/atoms/lib/booker/actions.ts
index 53d7adb42..4db1a2ca9 100644
--- a/apps/ui/registry/default/atoms/lib/booker/actions.ts
+++ b/apps/ui/registry/default/atoms/lib/booker/actions.ts
@@ -1,13 +1,17 @@
 "use server";
 
+import { toBookingLocation } from "@/lib/booker/booking-location";
 import {
   type BookerTarget,
+  getCreateBookingParamsFromTarget,
   getDynamicContext,
   getOrgSlugFromTarget,
   getPublicEventBannerParamsFromTarget,
   getUserSlotParamsFromTarget,
   parseBookingUrlTarget,
 } from "@/lib/booker/target";
+import { buildBookingStartIso } from "@/lib/booker/utils";
+import { createBooking } from "@/lib/cal-api/bookings";
 import { CalApiError } from "@/lib/cal-api/client";
 import {
   getDynamicEventType,
@@ -18,7 +22,7 @@ import {
 } from "@/lib/cal-api/event-types";
 import { getPublicEventInfo } from "@/lib/cal-api/public-event";
 import { getAvailableSlots } from "@/lib/cal-api/slots";
-import type { EventType } from "@/lib/cal-api/types";
+import type { Booking, EventType } from "@/lib/cal-api/types";
 
 export type FetchRawBookerInput = {
   monthIso: string;
@@ -359,3 +363,261 @@ export async function fetchRawBookerDataAction(
     };
   }
 }
+
+export type CreateBookingActionInput = {
+  email: string;
+  guests?: string[];
+  lengthInMinutes?: number;
+  locale?: string;
+  locationProvider?: string;
+  name: string;
+  notes?: string;
+  selectedDateKey: string;
+  selectedTime: string;
+  target: BookerTarget;
+  timeZone: string;
+};
+
+export type CreateBookingActionResult =
+  | { ok: true; booking: Booking }
+  | { ok: false; error: string; errorCode?: string };
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function validateCreateBookingInput(
+  input: CreateBookingActionInput,
+): CreateBookingActionResult | null {
+  const name = input.name.trim();
+  if (!name) {
+    return {
+      error: "Name is required.",
+      errorCode: "INVALID_NAME",
+      ok: false,
+    };
+  }
+
+  const email = input.email.trim();
+  if (!email || !EMAIL_PATTERN.test(email)) {
+    return {
+      error: "A valid email address is required.",
+      errorCode: "INVALID_EMAIL",
+      ok: false,
+    };
+  }
+
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(input.selectedDateKey)) {
+    return {
+      error: "Invalid booking date.",
+      errorCode: "INVALID_DATE",
+      ok: false,
+    };
+  }
+
+  if (!/^\d{2}:\d{2}$/.test(input.selectedTime)) {
+    return {
+      error: "Invalid booking time.",
+      errorCode: "INVALID_TIME",
+      ok: false,
+    };
+  }
+
+  if (!input.timeZone.trim()) {
+    return {
+      error: "Timezone is required.",
+      errorCode: "INVALID_TIMEZONE",
+      ok: false,
+    };
+  }
+
+  if (input.guests?.some((guest) => !EMAIL_PATTERN.test(guest.trim()))) {
+    return {
+      error: "All guest emails must be valid.",
+      errorCode: "INVALID_GUEST_EMAIL",
+      ok: false,
+    };
+  }
+
+  return null;
+}
+
+function getEventTypeDurationOptions(eventType: EventType): number[] | null {
+  const options = (
+    eventType as EventType & { lengthInMinutesOptions?: number[] }
+  ).lengthInMinutesOptions;
+  if (!Array.isArray(options)) {
+    return null;
+  }
+
+  const parsed = options.filter(
+    (value): value is number => typeof value === "number" && value > 0,
+  );
+  return parsed.length > 1 ? parsed : null;
+}
+
+function resolveBookingLengthInMinutes(
+  eventType: EventType,
+  lengthInMinutes: number | undefined,
+): CreateBookingActionResult | { lengthInMinutes?: number } {
+  const durationOptions = getEventTypeDurationOptions(eventType);
+  if (!durationOptions) {
+    return {};
+  }
+
+  if (lengthInMinutes == null) {
+    return {
+      error: "Duration is required for this event type.",
+      errorCode: "INVALID_DURATION",
+      ok: false,
+    };
+  }
+
+  if (!durationOptions.includes(lengthInMinutes)) {
+    return {
+      error: "The selected duration is not allowed for this event type.",
+      errorCode: "INVALID_DURATION",
+      ok: false,
+    };
+  }
+
+  return { lengthInMinutes };
+}
+
+async function resolveBookableEventType(
+  target: BookerTarget,
+): Promise<CreateBookingActionResult | { eventType: EventType }> {
+  const eventType = await resolveEventType(target);
+
+  if (!eventType) {
+    return {
+      error: "No event type found for the provided target.",
+      errorCode: "NOT_FOUND",
+      ok: false,
+    };
+  }
+
+  if (eventType.hidden) {
+    return {
+      error:
+        "This event type is not currently published and is not accepting bookings.",
+      errorCode: "UNPUBLISHED",
+      ok: false,
+    };
+  }
+
+  return { eventType };
+}
+
+export async function createBookingAction(
+  input: CreateBookingActionInput,
+): Promise<CreateBookingActionResult> {
+  try {
+    const validationError = validateCreateBookingInput(input);
+    if (validationError) {
+      return validationError;
+    }
+
+    const resolvedEvent = await resolveBookableEventType(input.target);
+    if (!("eventType" in resolvedEvent)) {
+      return resolvedEvent;
+    }
+
+    const { eventType } = resolvedEvent;
+
+    if (eventType.disableGuests && input.guests?.length) {
+      return {
+        error: "Guests are not allowed for this event type.",
+        errorCode: "GUESTS_DISABLED",
+        ok: false,
+      };
+    }
+
+    const lengthResult = resolveBookingLengthInMinutes(
+      eventType,
+      input.lengthInMinutes,
+    );
+    if ("ok" in lengthResult) {
+      return lengthResult;
+    }
+
+    const start = buildBookingStartIso(
+      input.selectedDateKey,
+      input.selectedTime,
+      input.timeZone,
+    );
+    const bookingFieldsResponses: Record<string, unknown> = {};
+
+    if (input.notes?.trim()) {
+      bookingFieldsResponses.notes = input.notes.trim();
+    }
+
+    if (input.locationProvider?.trim()) {
+      bookingFieldsResponses.location = input.locationProvider.trim();
+    }
+
+    const targetParams = getCreateBookingParamsFromTarget(input.target, {
+      eventTypeSlug: eventType.slug,
+    });
+
+    const body: Parameters<typeof createBooking>[0] = {
+      attendee: {
+        email: input.email.trim(),
+        name: input.name.trim(),
+        timeZone: input.timeZone,
+        ...(input.locale ? { language: input.locale.split("-")[0] } : {}),
+      },
+      start,
+      ...(input.guests?.length ? { guests: input.guests } : {}),
+      ...(Object.keys(bookingFieldsResponses).length
+        ? { bookingFieldsResponses }
+        : {}),
+      ...("lengthInMinutes" in lengthResult && lengthResult.lengthInMinutes
+        ? { lengthInMinutes: lengthResult.lengthInMinutes }
+        : {}),
+    };
+
+    if (eventType.id > 0) {
+      body.eventTypeId = eventType.id;
+    } else if (
+      eventType.slug &&
+      (targetParams.username || targetParams.teamSlug)
+    ) {
+      body.eventTypeSlug = eventType.slug;
+      if (targetParams.username) {
+        body.username = targetParams.username;
+      }
+      if (targetParams.teamSlug) {
+        body.teamSlug = targetParams.teamSlug;
+      }
+      if (targetParams.organizationSlug) {
+        body.organizationSlug = targetParams.organizationSlug;
+      }
+    } else {
+      return {
+        error: "Missing event type for booking.",
+        errorCode: "MISSING_EVENT_TYPE",
+        ok: false,
+      };
+    }
+
+    if (input.locationProvider?.trim()) {
+      body.location = toBookingLocation(input.locationProvider.trim());
+    }
+
+    const booking = await createBooking(body);
+    return { ok: true, booking };
+  } catch (error) {
+    if (error instanceof CalApiError) {
+      return {
+        error: error.message,
+        errorCode: error.code,
+        ok: false,
+      };
+    }
+
+    return {
+      error:
+        error instanceof Error ? error.message : "Could not create booking.",
+      ok: false,
+    };
+  }
+}
diff --git a/apps/ui/registry/default/atoms/lib/booker/booking-location.ts b/apps/ui/registry/default/atoms/lib/booker/booking-location.ts
new file mode 100644
index 000000000..971e0dc01
--- /dev/null
+++ b/apps/ui/registry/default/atoms/lib/booker/booking-location.ts
@@ -0,0 +1,32 @@
+import type { BookingLocationInput } from "@/lib/cal-api/types";
+
+const BOOKING_INTEGRATION_MAP: Record<string, string> = {
+  "daily-video": "daily-video",
+  "google-meet": "google-meet",
+  "huddle01-video": "huddle",
+  "microsoft-teams": "office365-video",
+  whereby: "whereby-video",
+};
+
+export function toBookingLocation(provider: string): BookingLocationInput {
+  const normalized = provider.trim().toLowerCase();
+
+  if (normalized === "inperson" || normalized === "in_person") {
+    return { type: "address" };
+  }
+
+  if (normalized === "phone") {
+    return { type: "phone" };
+  }
+
+  if (normalized === "conferencing" || normalized === "organizersdefaultapp") {
+    return { type: "organizersDefaultApp" };
+  }
+
+  if (normalized === "link") {
+    return { type: "link" };
+  }
+
+  const integration = BOOKING_INTEGRATION_MAP[normalized] ?? normalized;
+  return { type: "integration", integration };
+}
diff --git a/apps/ui/registry/default/atoms/lib/booker/target.ts b/apps/ui/registry/default/atoms/lib/booker/target.ts
index a607848ea..838335a2b 100644
--- a/apps/ui/registry/default/atoms/lib/booker/target.ts
+++ b/apps/ui/registry/default/atoms/lib/booker/target.ts
@@ -125,18 +125,63 @@ export function getOrgSlugFromTarget(target: BookerTarget): string | undefined {
 export function getUserSlotParamsFromTarget(
   target: BookerTarget,
 ): { username: string; eventTypeSlug: string } | null {
+  const params = getCreateBookingParamsFromTarget(target);
+  if (!params.username || !params.eventTypeSlug) {
+    return null;
+  }
+
+  return { eventTypeSlug: params.eventTypeSlug, username: params.username };
+}
+
+export type CreateBookingTargetParams = {
+  eventTypeSlug?: string;
+  organizationSlug?: string;
+  teamSlug?: string;
+  username?: string;
+};
+
+export function getCreateBookingParamsFromTarget(
+  target: BookerTarget,
+  resolved?: { eventTypeSlug?: string | null },
+): CreateBookingTargetParams {
   if (target.type === "user") {
-    return { eventTypeSlug: target.eventSlug, username: target.username };
+    return {
+      eventTypeSlug: target.eventSlug,
+      organizationSlug: getOrgSlugFromTarget(target),
+      username: target.username,
+    };
+  }
+
+  if (target.type === "team") {
+    return {
+      eventTypeSlug: target.eventSlug,
+      organizationSlug: getOrgSlugFromTarget(target),
+    };
   }
 
   if (target.type === "link") {
     const parsed = parseBookingUrlTarget(target.bookingUrl, target.orgId);
     if (parsed.type === "user") {
-      return { eventTypeSlug: parsed.eventSlug, username: parsed.username };
+      return {
+        eventTypeSlug: parsed.eventSlug,
+        organizationSlug: parsed.orgSlug,
+        username: parsed.username,
+      };
+    }
+
+    if (parsed.type === "teamSlug") {
+      return {
+        eventTypeSlug: parsed.eventSlug,
+        organizationSlug: parsed.orgSlug,
+        teamSlug: parsed.teamSlug,
+      };
     }
   }
 
-  return null;
+  return {
+    eventTypeSlug: resolved?.eventTypeSlug ?? undefined,
+    organizationSlug: getOrgSlugFromTarget(target),
+  };
 }
 
 export function getPublicEventBannerParamsFromTarget(target: BookerTarget): {
diff --git a/apps/ui/registry/default/atoms/lib/booker/use-booker.ts b/apps/ui/registry/default/atoms/lib/booker/use-booker.ts
index 7207f8601..b7786d322 100644
--- a/apps/ui/registry/default/atoms/lib/booker/use-booker.ts
+++ b/apps/ui/registry/default/atoms/lib/booker/use-booker.ts
@@ -193,6 +193,7 @@ function deriveBookerData(
       eventTypeImageUrl: result.raw.bannerUrl || eventType.eventTypeImageUrl,
       eventTypeLocations: eventType.eventTypeLocations,
       eventTypeTitle: eventType.eventTypeTitle,
+      disableGuests: eventType.disableGuests ?? false,
       hostAvatarUrl: host.hostAvatarUrl,
       hostAvatars,
       hostName:
@@ -345,15 +346,27 @@ type BookerTimePickerState = {
 
 export type BookerStep = "select" | "confirm";
 
+export type BookerConfirmFormContext = {
+  disableGuests?: boolean;
+  durationMinutes: number;
+  includeLengthInMinutes: boolean;
+  locale: string;
+  locations?: BookerMeta["eventTypeLocations"];
+  onBack: () => void;
+  selectedDate?: Date;
+  selectedTime: string | null;
+  target: BookerTarget;
+  timeZone: string;
+};
+
 export type UseBookerResult = {
   calendarProps: BookerCalendarState;
+  confirmFormProps: BookerConfirmFormContext;
   durationProps: BookerDurationState;
   error: BookerError | null;
   loadingState: BookerLoadingState;
   meta: BookerMeta | null;
-  onBack: () => void;
   retry: () => void;
-  selectedTime: string | null;
   step: BookerStep;
   timePickerProps: BookerTimePickerState;
   timezoneProps: BookerTimezoneState;
@@ -440,6 +453,12 @@ export function useBooker({
   const resolvedRef = useRef<ResolvedEventType>(
     hydratedData?.resolved ?? { eventTypeId: null, eventTypeSlug: null },
   );
+  const [_eventTypeId, setEventTypeId] = useState<number | null>(
+    hydratedData?.resolved.eventTypeId ?? null,
+  );
+  const [_eventTypeSlug, setEventTypeSlug] = useState<string | null>(
+    hydratedData?.resolved.eventTypeSlug ?? null,
+  );
   const lastIdentityRef = useRef<string | null>(null);
   const lastTimeZoneRef = useRef<string | null>(null);
   const lastDurationRef = useRef<number | null>(null);
@@ -558,6 +577,8 @@ export function useBooker({
         }
 
         resolvedRef.current = result.resolved;
+        setEventTypeId(result.resolved.eventTypeId);
+        setEventTypeSlug(result.resolved.eventTypeSlug);
 
         for (let offset = 0; offset < WINDOW_MONTHS; offset += 1) {
           const month = new Date(
@@ -681,6 +702,8 @@ export function useBooker({
         inFlightMonthsRef.current.clear();
         availabilityRequestVersionRef.current += 1;
         resolvedRef.current = { eventTypeId: null, eventTypeSlug: null };
+        setEventTypeId(null);
+        setEventTypeSlug(null);
         hasMultiDurationOptionsRef.current = false;
         slotsCacheRef.current = new Map();
         slotsByDateRef.current = {};
@@ -963,9 +986,9 @@ export function useBooker({
     setStep("confirm");
   };
 
-  const handleBack = () => {
+  const handleBack = useCallback(() => {
     setStep("select");
-  };
+  }, []);
 
   const initialLoading = !meta;
   const currentMonthCovered = coveredMonthsRef.current.has(
@@ -973,6 +996,32 @@ export function useBooker({
   );
   const availabilityLoading = isPending || !currentMonthCovered;
 
+  const confirmFormProps = useMemo((): BookerConfirmFormContext => {
+    return {
+      disableGuests: meta?.disableGuests,
+      durationMinutes: selectedDurationMinutes,
+      includeLengthInMinutes: (meta?.eventTypeDurationOptions?.length ?? 0) > 1,
+      locale,
+      locations: meta?.eventTypeLocations,
+      onBack: handleBack,
+      selectedDate,
+      selectedTime: _selectedTime,
+      target,
+      timeZone: selectedTimeZone,
+    };
+  }, [
+    _selectedTime,
+    locale,
+    meta?.disableGuests,
+    meta?.eventTypeDurationOptions,
+    meta?.eventTypeLocations,
+    selectedDate,
+    selectedDurationMinutes,
+    selectedTimeZone,
+    target,
+    handleBack,
+  ]);
+
   return {
     calendarProps: {
       availabilityLoading,
@@ -987,6 +1036,7 @@ export function useBooker({
       startMonth,
       today: todayStart,
     },
+    confirmFormProps,
     durationProps: {
       onValueChange: setSelectedDurationMinutes,
       value: selectedDurationMinutes,
@@ -998,9 +1048,7 @@ export function useBooker({
       initial: initialLoading,
     },
     meta,
-    onBack: handleBack,
     retry,
-    selectedTime: _selectedTime,
     step,
     timePickerProps: {
       availabilityLoading,
diff --git a/apps/ui/registry/default/atoms/lib/booker/utils.ts b/apps/ui/registry/default/atoms/lib/booker/utils.ts
index b7ebe4d6d..eb2664411 100644
--- a/apps/ui/registry/default/atoms/lib/booker/utils.ts
+++ b/apps/ui/registry/default/atoms/lib/booker/utils.ts
@@ -19,6 +19,7 @@ export type BookerMeta = {
   eventTypeDurationOptions: number[] | null;
   eventTypeLocations: EventTypeLocationOption[];
   eventTypeImageUrl: string;
+  disableGuests: boolean;
   bookingWindowStart: Date | null;
   bookingWindowEnd: Date | null;
 };
@@ -30,6 +31,7 @@ export type EventTypeInfo = {
   eventTypeDurationOptions: number[] | null;
   eventTypeLocations: EventTypeLocationOption[];
   eventTypeImageUrl: string;
+  disableGuests?: boolean;
 };
 
 export function prettifyLocation(value: string): string {
@@ -423,6 +425,7 @@ export function extractEventTypeInfo(payload: unknown): EventTypeInfo {
       eventTypeDurationOptions: null,
       eventTypeLocations: [{ label: "Unknown", provider: "" }],
       eventTypeImageUrl: "",
+      disableGuests: false,
     };
   }
 
@@ -460,6 +463,7 @@ export function extractEventTypeInfo(payload: unknown): EventTypeInfo {
         record.coverImage ??
         record.coverImageUrl,
     ),
+    disableGuests: record.disableGuests === true,
   };
 }
 
@@ -788,6 +792,52 @@ export function toCalendarDateKey(date: Date): string {
   return `${year}-${month}-${day}`;
 }
 
+export function buildBookingStartIso(
+  dateKey: string,
+  selectedTime: string,
+  timeZone: string,
+): string {
+  const parsed = parseTimeLabel(selectedTime);
+  if (!parsed) {
+    throw new Error("Invalid time slot.");
+  }
+
+  const dateParts = dateKey.split("-");
+  const year = Number(dateParts[0]);
+  const month = Number(dateParts[1]);
+  const day = Number(dateParts[2]);
+  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {
+    throw new Error("Invalid booking date.");
+  }
+
+  const { hours, minutes } = parsed;
+  const utcGuess = Date.UTC(year, month - 1, day, hours, minutes, 0);
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    day: "2-digit",
+    hour: "2-digit",
+    hour12: false,
+    minute: "2-digit",
+    month: "2-digit",
+    second: "2-digit",
+    timeZone,
+    year: "numeric",
+  });
+  const parts = formatter.formatToParts(new Date(utcGuess));
+  const get = (type: Intl.DateTimeFormatPartTypes) =>
+    Number(parts.find((part) => part.type === type)?.value);
+  const asUtc = Date.UTC(
+    get("year"),
+    get("month") - 1,
+    get("day"),
+    get("hour") % 24,
+    get("minute"),
+    get("second"),
+  );
+  const offset = asUtc - utcGuess;
+
+  return new Date(utcGuess - offset).toISOString();
+}
+
 export function getTodayInTimeZone(
   timeZone: string,
   now: Date = new Date(),
diff --git a/apps/ui/registry/default/lib/cal-api/bookings.ts b/apps/ui/registry/default/lib/cal-api/bookings.ts
new file mode 100644
index 000000000..2c29fec01
--- /dev/null
+++ b/apps/ui/registry/default/lib/cal-api/bookings.ts
@@ -0,0 +1,13 @@
+import "server-only";
+
+import { calApi } from "./client";
+import type { Booking, CreateBookingInput } from "./types";
+
+export async function createBooking(
+  input: CreateBookingInput,
+): Promise<Booking> {
+  return calApi<Booking>("/bookings", {
+    body: input,
+    method: "POST",
+  });
+}
diff --git a/apps/ui/registry/default/lib/cal-api/event-types.ts b/apps/ui/registry/default/lib/cal-api/event-types.ts
index e67354646..1f06e5308 100644
--- a/apps/ui/registry/default/lib/cal-api/event-types.ts
+++ b/apps/ui/registry/default/lib/cal-api/event-types.ts
@@ -5,6 +5,13 @@ import type { EventType } from "./types";
 
 const EVENT_TYPES_API_VERSION = "2024-06-14";
 
+function findEventTypeBySlug(
+  matches: EventType[],
+  eventSlug: string,
+): EventType | null {
+  return matches.find((event) => event.slug === eventSlug) ?? null;
+}
+
 export async function listEventTypes(params: {
   username?: string;
   usernames?: string[];
@@ -45,7 +52,7 @@ export async function getEventType(params: {
   orgSlug?: string;
 }): Promise<EventType | null> {
   const matches = await listEventTypes(params);
-  return matches[0] ?? null;
+  return findEventTypeBySlug(matches, params.eventSlug);
 }
 
 export async function getTeamEventType(params: {
@@ -59,7 +66,7 @@ export async function getTeamEventType(params: {
     orgId: params.orgId,
     teamId: params.teamId,
   });
-  return matches[0] ?? null;
+  return findEventTypeBySlug(matches, params.eventSlug);
 }
 
 export async function getTeamSlugEventType(params: {
@@ -75,7 +82,7 @@ export async function getTeamSlugEventType(params: {
     orgSlug: params.orgSlug,
     teamSlug: params.teamSlug,
   });
-  return matches[0] ?? null;
+  return findEventTypeBySlug(matches, params.eventSlug);
 }
 
 export async function getDynamicEventType(params: {
@@ -84,13 +91,14 @@ export async function getDynamicEventType(params: {
   orgSlug?: string;
   eventSlug?: string;
 }): Promise<EventType | null> {
+  const eventSlug = params.eventSlug ?? "dynamic";
   const matches = await listEventTypes({
-    eventSlug: params.eventSlug ?? "dynamic",
+    eventSlug,
     orgId: params.orgId,
     orgSlug: params.orgSlug,
     usernames: params.usernames,
   });
-  return matches[0] ?? null;
+  return findEventTypeBySlug(matches, eventSlug);
 }
 
 export async function getEventTypeById(
diff --git a/apps/ui/registry/default/lib/cal-api/types.ts b/apps/ui/registry/default/lib/cal-api/types.ts
index c33f502e0..65970d9bb 100644
--- a/apps/ui/registry/default/lib/cal-api/types.ts
+++ b/apps/ui/registry/default/lib/cal-api/types.ts
@@ -124,13 +124,24 @@ export type Booking = {
   rescheduledFromUid?: string;
 };
 
+export type BookingLocationInput =
+  | { type: "integration"; integration: string }
+  | { type: "address" }
+  | { type: "link" }
+  | { type: "phone" }
+  | { type: "organizersDefaultApp" };
+
 export type CreateBookingInput = {
   start: string;
-  eventTypeId: number;
+  eventTypeId?: number;
+  eventTypeSlug?: string;
+  username?: string;
+  teamSlug?: string;
+  organizationSlug?: string;
   attendee: BookingAttendee;
   guests?: string[];
   bookingFieldsResponses?: Record<string, unknown>;
-  location?: string;
+  location?: BookingLocationInput | string;
   metadata?: Record<string, unknown>;
   lengthInMinutes?: number;
 };
diff --git a/apps/ui/registry/registry-atoms.ts b/apps/ui/registry/registry-atoms.ts
index cc9d1ae7c..e829246f4 100644
--- a/apps/ui/registry/registry-atoms.ts
+++ b/apps/ui/registry/registry-atoms.ts
@@ -114,6 +114,7 @@ export const atoms: AtomItem[] = [
       "@coss/empty",
       "@coss/field",
       "@coss/form",
+      "@coss/group",
       "@coss/input",
       "@coss/label",
       "@coss/popover",
diff --git a/apps/ui/registry/registry-cal.ts b/apps/ui/registry/registry-cal.ts
index 3a3f3a211..004f2f3a6 100644
--- a/apps/ui/registry/registry-cal.ts
+++ b/apps/ui/registry/registry-cal.ts
@@ -31,6 +31,11 @@ const calApiFiles: Registry["items"][number]["files"] = [
     target: "lib/cal-api/types.ts",
     type: "registry:lib",
   },
+  {
+    path: "lib/cal-api/bookings.ts",
+    target: "lib/cal-api/bookings.ts",
+    type: "registry:lib",
+  },
 ];
 
 export const cal: Registry["items"] = [

From bd3777acfb44921d4a90b43693a9e26b970b2ecb Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Mon, 13 Jul 2026 17:02:28 +0200
Subject: [PATCH 29/49] feat: update fonts (#810)

* initial commit

* fix coss logo

* update card + build reg

* mc

* mc

* format

* mc
---
 apps/examples/calcom/app/layout.tsx           |   4 +-
 .../calcom/components/app/app-header.tsx      |   2 +-
 apps/examples/calcom/components/logo.tsx      |   2 +-
 apps/ui/app/docs/[[...slug]]/page.tsx         |   2 +-
 apps/ui/app/layout.tsx                        |   4 +-
 apps/ui/app/page.tsx                          |   2 +-
 apps/ui/components/site-footer.tsx            |   5 ++-
 apps/ui/content/docs/(root)/get-started.mdx   |  21 +++++++++-
 apps/ui/content/docs/(root)/styling.mdx       |  36 ++++++++++++++----
 apps/ui/public/r/card.json                    |   2 +-
 apps/ui/public/r/registry.json                |   2 +-
 apps/ui/public/r/style.json                   |   2 +-
 apps/ui/registry.json                         |   2 +-
 apps/ui/registry/default/ui/card.tsx          |   2 +-
 apps/ui/registry/registry-styles.ts           |   2 +-
 .../skills/coss/references/rules/styling.md   |   5 ++-
 apps/www/app/layout.tsx                       |   4 +-
 packages/ui/src/components/card.tsx           |   2 +-
 packages/ui/src/fonts/CalSans-Regular.woff2   | Bin 37412 -> 0 bytes
 .../ui/src/fonts/CalSansUI[wght,GEOM].woff2   | Bin 62716 -> 0 bytes
 packages/ui/src/fonts/CalSansVF.woff2         | Bin 0 -> 185744 bytes
 packages/ui/src/fonts/README.md               |  27 +++++++++++--
 packages/ui/src/fonts/index.ts                |  10 ++---
 packages/ui/src/shared/page-header.tsx        |   2 +-
 packages/ui/src/shared/products-dropdown.tsx  |   2 +-
 packages/ui/src/shared/site-footer.tsx        |   5 ++-
 packages/ui/src/shared/site-header.tsx        |   2 +-
 packages/ui/src/styles/globals.css            |   2 +-
 28 files changed, 105 insertions(+), 46 deletions(-)
 delete mode 100644 packages/ui/src/fonts/CalSans-Regular.woff2
 delete mode 100644 packages/ui/src/fonts/CalSansUI[wght,GEOM].woff2
 create mode 100644 packages/ui/src/fonts/CalSansVF.woff2

diff --git a/apps/examples/calcom/app/layout.tsx b/apps/examples/calcom/app/layout.tsx
index 76fb84b90..89694dd6e 100644
--- a/apps/examples/calcom/app/layout.tsx
+++ b/apps/examples/calcom/app/layout.tsx
@@ -4,7 +4,7 @@ import {
   AnchoredToastProvider,
   ToastProvider,
 } from "@coss/ui/components/toast";
-import { fontHeading, fontMono, fontSans } from "@coss/ui/fonts";
+import { fontMono, fontSans } from "@coss/ui/fonts";
 import { ThemeProvider } from "@coss/ui/shared/theme-provider";
 import type { Metadata } from "next";
 import { AppCommand } from "@/components/app/app-command";
@@ -24,7 +24,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${fontHeading.variable} ${fontSans.variable} ${fontMono.variable} relative bg-sidebar font-sans text-foreground antialiased`}
+        className={`${fontSans.variable} ${fontMono.variable} relative bg-sidebar font-sans text-foreground antialiased`}
       >
         <ThemeProvider>
           <ToastProvider position="bottom-center">
diff --git a/apps/examples/calcom/components/app/app-header.tsx b/apps/examples/calcom/components/app/app-header.tsx
index f22ef61d3..39e9fe8ef 100644
--- a/apps/examples/calcom/components/app/app-header.tsx
+++ b/apps/examples/calcom/components/app/app-header.tsx
@@ -21,7 +21,7 @@ export function AppHeaderContent({
 }: React.ComponentProps<"div"> & { title: string }): React.ReactElement {
   return (
     <div className={cn("flex flex-col gap-1", className)} {...props}>
-      <h1 className="font-heading font-semibold text-lg leading-none">
+      <h1 className="font-bold font-heading text-lg leading-none [font-variation-settings:'GEOM'_50,'opsz'_32]">
         {title}
       </h1>
       {children}
diff --git a/apps/examples/calcom/components/logo.tsx b/apps/examples/calcom/components/logo.tsx
index 48ae13170..e677b801e 100644
--- a/apps/examples/calcom/components/logo.tsx
+++ b/apps/examples/calcom/components/logo.tsx
@@ -6,7 +6,7 @@ type LogoProps = Omit<React.ComponentPropsWithoutRef<typeof Link>, "href">;
 export function Logo(props: LogoProps): React.ReactElement {
   return (
     <Link href="/" {...props}>
-      <h1 className="font-heading font-semibold text-foreground text-xl leading-none md:text-base lg:text-lg">
+      <h1 className="font-bold font-heading text-foreground text-xl leading-none [font-variation-settings:'GEOM'_50,'opsz'_32] md:text-base lg:text-lg">
         Cal<span className="md:max-lg:sr-only">.com</span>
       </h1>
     </Link>
diff --git a/apps/ui/app/docs/[[...slug]]/page.tsx b/apps/ui/app/docs/[[...slug]]/page.tsx
index 559a9b8e0..e8323a753 100644
--- a/apps/ui/app/docs/[[...slug]]/page.tsx
+++ b/apps/ui/app/docs/[[...slug]]/page.tsx
@@ -66,7 +66,7 @@ export default async function Page(props: {
                 <div className="flex min-w-0 flex-col gap-8">
                   <div className="flex flex-col gap-2">
                     <div className="flex flex-col gap-2">
-                      <h1 className="scroll-m-20 font-heading font-semibold text-3xl xl:text-4xl">
+                      <h1 className="scroll-m-20 font-bold font-heading text-3xl xl:text-4xl">
                         {doc.title}
                       </h1>
                       {doc.description && (
diff --git a/apps/ui/app/layout.tsx b/apps/ui/app/layout.tsx
index 157696a22..995c7c428 100644
--- a/apps/ui/app/layout.tsx
+++ b/apps/ui/app/layout.tsx
@@ -1,6 +1,6 @@
 import "./globals.css";
 
-import { fontHeading, fontMono, fontSans } from "@coss/ui/fonts";
+import { fontMono, fontSans } from "@coss/ui/fonts";
 import { ThemeProvider } from "@coss/ui/shared/theme-provider";
 import type { Metadata } from "next";
 import {
@@ -25,7 +25,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} relative bg-sidebar font-sans text-foreground antialiased`}
+        className={`${fontSans.variable} ${fontMono.variable} relative bg-sidebar font-sans text-foreground antialiased`}
       >
         <ThemeProvider>
           <ToastProvider>
diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index 0ceb7705f..4e706d5ba 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -96,7 +96,7 @@ function CategoryCard({
     <CardFrame className="w-full after:pointer-events-none after:absolute after:-inset-[5px] after:-z-1 after:rounded-[calc(var(--radius-xl)+4px)] after:border after:border-border/64">
       <CardFrameHeader className="static grid grid-rows-[auto_1fr]">
         <CardFrameTitle
-          className="font-heading text-base"
+          className="font-bold font-heading text-base [font-variation-settings:'GEOM'_50,'opsz'_32]"
           render={
             <h2>
               <Link className="before:absolute before:inset-0" href={href}>
diff --git a/apps/ui/components/site-footer.tsx b/apps/ui/components/site-footer.tsx
index c2004cef2..a338f87b8 100644
--- a/apps/ui/components/site-footer.tsx
+++ b/apps/ui/components/site-footer.tsx
@@ -4,7 +4,10 @@ export function SiteFooter() {
   return (
     <footer className="flex flex-col gap-0.5">
       <p>
-        <Link className="font-heading font-semibold text-lg" href="/">
+        <Link
+          className="font-bold font-heading text-lg [font-variation-settings:'GEOM'_50,'opsz'_32]"
+          href="/"
+        >
           coss.com <span className="text-muted-foreground/72">ui</span>
         </Link>
       </p>
diff --git a/apps/ui/content/docs/(root)/get-started.mdx b/apps/ui/content/docs/(root)/get-started.mdx
index a50e2afd5..71993c502 100644
--- a/apps/ui/content/docs/(root)/get-started.mdx
+++ b/apps/ui/content/docs/(root)/get-started.mdx
@@ -78,10 +78,12 @@ coss components use three CSS custom properties for typography:
 
 - `--font-sans` — Body text, buttons, labels, and most UI elements
 - `--font-mono` — Code blocks, `<kbd>`, monospace text
-- `--font-heading` — Dialog and AlertDialog titles (defaults to Inter, same as `--font-sans`)
+- `--font-heading` — Dialog and AlertDialog titles (`--font-heading: var(--font-sans)` in theme)
 
 When you use `@coss/style`, `@coss/fonts` is installed automatically — Inter for `--font-sans` and `--font-heading`, Geist Mono for `--font-mono` — all wired in your `layout.tsx`.
 
+coss.com uses **Cal Sans 2.0** variable from `@coss/ui/fonts` for both body and headings. By default the theme aliases `--font-heading` to `--font-sans`, so one `--font-sans` variable is enough. You can wire a separate `--font-heading` when titles should use a different family — see [Styling — Font Variables](/ui/docs/styling#font-variables).
+
 ### Custom fonts
 
 To use different fonts, ensure the `variable` option in your `next/font` configuration matches the expected CSS variables:
@@ -91,10 +93,25 @@ import { Inter } from "next/font/google";
 import { JetBrains_Mono } from "next/font/google";
 
 const inter = Inter({ variable: "--font-sans", subsets: ["latin"] });
-const interHeading = Inter({ variable: "--font-heading", subsets: ["latin"] });
 const jetbrainsMono = JetBrains_Mono({ variable: "--font-mono", subsets: ["latin"] });
 ```
 
+When sans and heading share one family, only `--font-sans` needs to be set — the theme aliases `--font-heading` to it.
+
+For a separate heading font, add `--font-heading` in your layout and update the theme token:
+
+```tsx
+const interDisplay = Inter({ variable: "--font-heading", subsets: ["latin"], weight: "700" });
+
+<body className={`${inter.variable} ${interDisplay.variable} ${jetbrainsMono.variable} font-sans`}>
+```
+
+```css
+@theme inline {
+  --font-heading: var(--font-heading);
+}
+```
+
 **Note:** Next.js starters default to variable names like `--font-geist-sans`, which don't match coss's expected `--font-sans`. If fonts appear broken after setup, check that the variable names match.
 
 ## Primitive exports
diff --git a/apps/ui/content/docs/(root)/styling.mdx b/apps/ui/content/docs/(root)/styling.mdx
index ff8d786e3..482c4dac6 100644
--- a/apps/ui/content/docs/(root)/styling.mdx
+++ b/apps/ui/content/docs/(root)/styling.mdx
@@ -18,7 +18,7 @@ See [Get Started](/ui/docs/get-started) for installing with the CLI. If you pref
 ```css title="app/globals.css"
 @theme inline {
   --font-sans: var(--font-sans);
-  --font-heading: var(--font-heading);
+  --font-heading: var(--font-sans);
   --font-mono: var(--font-mono);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -165,19 +165,23 @@ See [Get Started](/ui/docs/get-started) for installing with the CLI. If you pref
 
 ## Font Variables
 
-Components like Dialog, AlertDialog, Sheet, and Empty use the `font-heading` class for titles. The coss style preset defines `--font-sans`, `--font-heading`, and `--font-mono` with system font fallbacks. To use custom fonts, define these variables in your layout using `next/font`:
+Components like Dialog, AlertDialog, Sheet, and Empty use the `font-heading` class for titles. The coss style preset defines `--font-sans`, `--font-heading`, and `--font-mono` with system font fallbacks.
 
-```tsx title="app/layout.tsx"
-import { Geist, Geist_Mono } from "next/font/google";
+When you install `@coss/style` via the CLI, Inter is used for `--font-sans` and `--font-heading`, with Geist Mono for `--font-mono`. coss.com uses **Cal Sans 2.0** variable from `@coss/ui/fonts` for both body and headings.
+
+By default, `--font-heading` is aliased to `--font-sans` in the theme. Pair `font-heading` with a weight utility such as `font-bold` or `font-semibold` where needed.
 
-const fontSans = Geist({ variable: "--font-sans", subsets: ["latin"] });
-const fontHeading = Geist({ variable: "--font-heading", subsets: ["latin"], weight: "600" });
-const fontMono = Geist_Mono({ variable: "--font-mono", subsets: ["latin"] });
+### Custom fonts
+
+To use your own fonts, define the variables in your layout with `next/font`:
+
+```tsx title="app/layout.tsx"
+import { fontMono, fontSans } from "@coss/ui/fonts";
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} font-sans`}>
+      <body className={`${fontSans.variable} ${fontMono.variable} font-sans`}>
         {children}
       </body>
     </html>
@@ -185,6 +189,22 @@ export default function RootLayout({ children }) {
 }
 ```
 
+When sans and heading share one family, only `--font-sans` needs to be set — the theme aliases `--font-heading` to it.
+
+For a separate heading font, wire `--font-heading` in your layout and point the theme token at it:
+
+```tsx title="app/layout.tsx"
+import { fontHeading, fontMono, fontSans } from "@coss/ui/fonts";
+
+<body className={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} font-sans`}>
+```
+
+```css title="app/globals.css"
+@theme inline {
+  --font-heading: var(--font-heading);
+}
+```
+
 Apply the variables to `html` or `body` so they cascade. The `font-sans` class sets the default body font.
 
 ## Base UI Setup
diff --git a/apps/ui/public/r/card.json b/apps/ui/public/r/card.json
index 12521aa0a..25155e8bb 100644
--- a/apps/ui/public/r/card.json
+++ b/apps/ui/public/r/card.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/ui/card.tsx",
-      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Card({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n      className,\n    ),\n    \"data-slot\": \"card\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrame({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=table-container]:overflow-hidden *:data-[slot=card]:-m-px *:data-[slot=table-container]:-m-px *:data-[slot=table-container]:w-[calc(100%+2px)] *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]\",\n      className,\n    ),\n    \"data-slot\": \"card-frame\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex grid auto-rows-min grid-rows-[auto_auto] flex-col items-start gap-x-4 px-6 py-4 has-data-[slot=card-frame-action]:grid-cols-[1fr_auto]\",\n      className,\n    ),\n    \"data-slot\": \"card-frame-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"self-center font-semibold text-sm\", className),\n    \"data-slot\": \"card-frame-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"self-center text-muted-foreground text-sm\", className),\n    \"data-slot\": \"card-frame-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"col-start-2 nth-3:row-span-2 nth-3:row-start-1 inline-flex self-center justify-self-end\",\n      className,\n    ),\n    \"data-slot\": \"card-frame-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"px-6 py-4\", className),\n    \"data-slot\": \"card-frame-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n      className,\n    ),\n    \"data-slot\": \"card-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"font-semibold text-lg leading-none\", className),\n    \"data-slot\": \"card-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"text-muted-foreground text-sm\", className),\n    \"data-slot\": \"card-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end\",\n      className,\n    ),\n    \"data-slot\": \"card-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardPanel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0\",\n      className,\n    ),\n    \"data-slot\": \"card-panel\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4\",\n      className,\n    ),\n    \"data-slot\": \"card-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport { CardPanel as CardContent };\n",
+      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Card({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n      className,\n    ),\n    \"data-slot\": \"card\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrame({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=table-container]:overflow-hidden *:data-[slot=card]:-m-px *:data-[slot=table-container]:-m-px *:data-[slot=table-container]:w-[calc(100%+2px)] *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]\",\n      className,\n    ),\n    \"data-slot\": \"card-frame\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex grid auto-rows-min grid-rows-[auto_auto] flex-col items-start gap-x-4 px-6 py-4 has-data-[slot=card-frame-action]:grid-cols-[1fr_auto]\",\n      className,\n    ),\n    \"data-slot\": \"card-frame-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"self-center font-semibold text-sm\", className),\n    \"data-slot\": \"card-frame-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"self-center text-muted-foreground text-sm\", className),\n    \"data-slot\": \"card-frame-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"col-start-2 nth-3:row-span-2 nth-3:row-start-1 inline-flex self-center justify-self-end\",\n      className,\n    ),\n    \"data-slot\": \"card-frame-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"px-6 py-4\", className),\n    \"data-slot\": \"card-frame-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n      className,\n    ),\n    \"data-slot\": \"card-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"font-heading font-semibold text-lg leading-none\", className),\n    \"data-slot\": \"card-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"text-muted-foreground text-sm\", className),\n    \"data-slot\": \"card-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end\",\n      className,\n    ),\n    \"data-slot\": \"card-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardPanel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0\",\n      className,\n    ),\n    \"data-slot\": \"card-panel\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4\",\n      className,\n    ),\n    \"data-slot\": \"card-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport { CardPanel as CardContent };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index 4fed69295..42ce8656c 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -11565,7 +11565,7 @@
           "sidebar-ring": "var(--color-neutral-400)"
         },
         "theme": {
-          "font-heading": "var(--font-heading, ui-sans-serif, system-ui, sans-serif)",
+          "font-heading": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
           "font-mono": "var(--font-mono, ui-monospace, monospace)",
           "font-sans": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)"
         }
diff --git a/apps/ui/public/r/style.json b/apps/ui/public/r/style.json
index 98945441c..4e62799f3 100644
--- a/apps/ui/public/r/style.json
+++ b/apps/ui/public/r/style.json
@@ -18,7 +18,7 @@
   ],
   "cssVars": {
     "theme": {
-      "font-heading": "var(--font-heading, ui-sans-serif, system-ui, sans-serif)",
+      "font-heading": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
       "font-mono": "var(--font-mono, ui-monospace, monospace)",
       "font-sans": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)"
     },
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index 4fed69295..42ce8656c 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -11565,7 +11565,7 @@
           "sidebar-ring": "var(--color-neutral-400)"
         },
         "theme": {
-          "font-heading": "var(--font-heading, ui-sans-serif, system-ui, sans-serif)",
+          "font-heading": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
           "font-mono": "var(--font-mono, ui-monospace, monospace)",
           "font-sans": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)"
         }
diff --git a/apps/ui/registry/default/ui/card.tsx b/apps/ui/registry/default/ui/card.tsx
index ab7f285aa..e2e490993 100644
--- a/apps/ui/registry/default/ui/card.tsx
+++ b/apps/ui/registry/default/ui/card.tsx
@@ -162,7 +162,7 @@ export function CardTitle({
   ...props
 }: useRender.ComponentProps<"div">): React.ReactElement {
   const defaultProps = {
-    className: cn("font-semibold text-lg leading-none", className),
+    className: cn("font-heading font-semibold text-lg leading-none", className),
     "data-slot": "card-title",
   };
 
diff --git a/apps/ui/registry/registry-styles.ts b/apps/ui/registry/registry-styles.ts
index 093db0566..efd004307 100644
--- a/apps/ui/registry/registry-styles.ts
+++ b/apps/ui/registry/registry-styles.ts
@@ -120,7 +120,7 @@ export const styles: Registry["items"] = [
       },
       theme: {
         "font-heading":
-          "var(--font-heading, ui-sans-serif, system-ui, sans-serif)",
+          "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
         "font-mono": "var(--font-mono, ui-monospace, monospace)",
         "font-sans": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
       },
diff --git a/apps/ui/skills/coss/references/rules/styling.md b/apps/ui/skills/coss/references/rules/styling.md
index e65d8f4c1..a1345d4df 100644
--- a/apps/ui/skills/coss/references/rules/styling.md
+++ b/apps/ui/skills/coss/references/rules/styling.md
@@ -40,7 +40,7 @@ coss components use three CSS custom properties for typography:
 |---|---|---|
 | `--font-sans` | Body text, buttons, labels, most UI | `ui-sans-serif, system-ui, sans-serif` |
 | `--font-mono` | `<code>`, `<kbd>`, `<pre>`, code blocks | `ui-monospace, monospace` |
-| `--font-heading` | Dialog/AlertDialog titles, headings | Defaults to Inter (same as `--font-sans`) |
+| `--font-heading` | Dialog/AlertDialog titles, headings | `var(--font-sans)` (override with `--font-heading`) |
 
 **CLI setup (recommended):** `npx shadcn@latest init @coss/style` automatically installs `@coss/fonts` — Inter for `--font-sans` and `--font-heading`, Geist Mono for `--font-mono` — via `registry:font` items and configures them in `layout.tsx`.
 
@@ -48,10 +48,11 @@ coss components use three CSS custom properties for typography:
 
 ```tsx
 const inter = Inter({ variable: "--font-sans", subsets: ["latin"] });
-const interHeading = Inter({ variable: "--font-heading", subsets: ["latin"] });
 const geistMono = Geist_Mono({ variable: "--font-mono", subsets: ["latin"] });
 ```
 
+When sans and heading share one family, only `--font-sans` needs to be set — the theme aliases `--font-heading` to it (`--font-heading: var(--font-sans)`). For a separate heading font, wire `--font-heading` in your layout and set `--font-heading: var(--font-heading)` in `@theme inline`.
+
 **Common pitfall:** Next.js starters default to `--font-geist-sans` and `--font-geist-mono`, which do not match coss's `--font-sans` / `--font-mono`. Fonts will silently fall back to system UI. Always rename the variables or remap them.
 
 ## Do / Don't
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index fe22c36b7..50448f8ce 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -1,6 +1,6 @@
 import "./globals.css";
 
-import { fontHeading, fontMono, fontSans } from "@coss/ui/fonts";
+import { fontMono, fontSans } from "@coss/ui/fonts";
 import { SiteCta } from "@coss/ui/shared/site-cta";
 import { SiteFooter } from "@coss/ui/shared/site-footer";
 import { SiteHeader } from "@coss/ui/shared/site-header";
@@ -21,7 +21,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} relative bg-sidebar font-sans text-foreground antialiased`}
+        className={`${fontSans.variable} ${fontMono.variable} relative bg-sidebar font-sans text-foreground antialiased`}
       >
         <ThemeProvider>
           <div className="relative isolate flex min-h-svh flex-col overflow-clip [--header-height:4rem]">
diff --git a/packages/ui/src/components/card.tsx b/packages/ui/src/components/card.tsx
index 7d029f452..f539f83ba 100644
--- a/packages/ui/src/components/card.tsx
+++ b/packages/ui/src/components/card.tsx
@@ -162,7 +162,7 @@ export function CardTitle({
   ...props
 }: useRender.ComponentProps<"div">): React.ReactElement {
   const defaultProps = {
-    className: cn("font-semibold text-lg leading-none", className),
+    className: cn("font-heading font-semibold text-lg leading-none", className),
     "data-slot": "card-title",
   };
 
diff --git a/packages/ui/src/fonts/CalSans-Regular.woff2 b/packages/ui/src/fonts/CalSans-Regular.woff2
deleted file mode 100644
index 6c83a2df3bdb000e5f6e86f8db4583102f9df455..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 37412
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
Mdtua=PXPb`0BRBLO8@`>

diff --git a/packages/ui/src/fonts/CalSansUI[wght,GEOM].woff2 b/packages/ui/src/fonts/CalSansUI[wght,GEOM].woff2
deleted file mode 100644
index 630fb2c91f1d10e452055ca5fbe8d31212e00961..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 62716
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

diff --git a/packages/ui/src/fonts/CalSansVF.woff2 b/packages/ui/src/fonts/CalSansVF.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..71007270d58818f1ce63095a527f9f634fdc4a17
GIT binary patch
literal 185744
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%0A0QkVm`1$`eMoWL2
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

literal 0
HcmV?d00001

diff --git a/packages/ui/src/fonts/README.md b/packages/ui/src/fonts/README.md
index 6e03ca1bc..7f73ce129 100644
--- a/packages/ui/src/fonts/README.md
+++ b/packages/ui/src/fonts/README.md
@@ -7,12 +7,12 @@ This directory contains shared font files and configurations used across all app
 Import fonts directly from the shared UI package:
 
 ```tsx
-import { fontSans, fontHeading } from "@coss/ui/fonts";
+import { fontMono, fontSans } from "@coss/ui/fonts";
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={`${fontSans.variable} ${fontHeading.variable}`}>
+      <body className={`${fontSans.variable} ${fontMono.variable} font-sans`}>
         {children}
       </body>
     </html>
@@ -20,10 +20,29 @@ export default function RootLayout({ children }) {
 }
 ```
 
+`--font-heading` is aliased to `--font-sans` in the theme (`--font-heading: var(--font-sans)`). Apply the `font-heading` class on titles and headings, with `font-bold` or `font-semibold` as needed.
+
 ## Available Fonts
 
-- `fontSans` - Cal Sans UI variable font (supports multiple weights and modes)
-- `fontHeading` - Cal Sans Regular font
+- `fontSans` — Cal Sans 2.0 variable font (`CalSansVF.woff2`)
+- `fontHeading` — Alias of `fontSans`; use when wiring a separate `--font-heading` variable
+- `fontMono` — Paper Mono for code and monospace UI
+
+## Separate heading font
+
+To use a different family for headings, set `--font-heading` in your layout and point the theme token at it:
+
+```tsx
+import { fontHeading, fontMono, fontSans } from "@coss/ui/fonts";
+
+<body className={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} font-sans`}>
+```
+
+```css
+@theme inline {
+  --font-heading: var(--font-heading);
+}
+```
 
 ## Adding New Fonts
 
diff --git a/packages/ui/src/fonts/index.ts b/packages/ui/src/fonts/index.ts
index ce0cc17c5..281919c17 100644
--- a/packages/ui/src/fonts/index.ts
+++ b/packages/ui/src/fonts/index.ts
@@ -8,14 +8,10 @@ export const fontMono = localFont({
 
 export const fontSans = localFont({
   display: "swap",
-  src: "./CalSansUI[wght,GEOM].woff2",
+  src: "./CalSansVF.woff2",
   variable: "--font-sans",
   weight: "300 700",
 });
 
-export const fontHeading = localFont({
-  display: "swap",
-  src: "./CalSans-Regular.woff2",
-  variable: "--font-heading",
-  weight: "400 600",
-});
+/** Same variable font as `fontSans`; optional when wiring a separate `--font-heading`. */
+export const fontHeading = fontSans;
diff --git a/packages/ui/src/shared/page-header.tsx b/packages/ui/src/shared/page-header.tsx
index 295ffcd57..35cd3dbd1 100644
--- a/packages/ui/src/shared/page-header.tsx
+++ b/packages/ui/src/shared/page-header.tsx
@@ -20,7 +20,7 @@ function PageHeaderHeading({
 }: React.ComponentProps<"h1">) {
   return (
     <h1
-      className={cn("font-heading text-4xl lg:text-5xl", className)}
+      className={cn("font-bold font-heading text-4xl lg:text-5xl", className)}
       {...props}
     />
   );
diff --git a/packages/ui/src/shared/products-dropdown.tsx b/packages/ui/src/shared/products-dropdown.tsx
index de936ba34..306f9ee71 100644
--- a/packages/ui/src/shared/products-dropdown.tsx
+++ b/packages/ui/src/shared/products-dropdown.tsx
@@ -67,7 +67,7 @@ export function ProductsDropdown({ items }: ProductsDropdownProps) {
               // biome-ignore lint/a11y/useAnchorContent: This is intentional
               render={isExternal ? <a href={href} /> : <Link href={href} />}
             >
-              <span className="font-heading in-data-highlighted:text-foreground text-muted-foreground">
+              <span className="font-bold font-heading in-data-highlighted:text-foreground text-muted-foreground">
                 {item.label}
               </span>
               {item.upcoming && (
diff --git a/packages/ui/src/shared/site-footer.tsx b/packages/ui/src/shared/site-footer.tsx
index f40835d2f..7ab177aa3 100644
--- a/packages/ui/src/shared/site-footer.tsx
+++ b/packages/ui/src/shared/site-footer.tsx
@@ -10,7 +10,10 @@ export function SiteFooter() {
       <div className="container flex w-full items-center justify-center gap-2 px-4 sm:px-6">
         <p>
           © {new Date().getFullYear()}{" "}
-          <Link className="font-heading text-foreground text-lg" href="/">
+          <Link
+            className="font-bold font-heading text-foreground [font-variation-settings:'GEOM'_50,'opsz'_32]"
+            href="/"
+          >
             coss.com
           </Link>{" "}
           – open source, open heart, open mind.
diff --git a/packages/ui/src/shared/site-header.tsx b/packages/ui/src/shared/site-header.tsx
index 37b55a49d..f53594e08 100644
--- a/packages/ui/src/shared/site-header.tsx
+++ b/packages/ui/src/shared/site-header.tsx
@@ -21,7 +21,7 @@ export function SiteHeader({
     <header className="sticky top-0 z-40 w-full bg-sidebar/80 backdrop-blur-sm before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border/64">
       <div className="container relative flex h-(--header-height) w-full items-center justify-between gap-2 px-4 sm:px-6">
         {mobileNav}
-        <div className="-mt-0.5 flex shrink-0 items-center gap-1.5 font-heading text-2xl sm:text-[1.625em]">
+        <div className="flex shrink-0 items-center gap-1.5 font-bold font-heading text-[1.375em] [font-variation-settings:'GEOM'_50,'opsz'_32] sm:text-2xl">
           {isExternal ? (
             <a aria-label="Home" href={gatewayHome}>
               coss.com
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 1dd31e4d2..c81abdc4b 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -12,7 +12,7 @@
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-sans: var(--font-sans);
-  --font-heading: var(--font-heading);
+  --font-heading: var(--font-sans);
   --font-mono: var(--font-mono);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);

From bcd22227c159da89e067b86fe1837c14952e5836 Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Wed, 15 Jul 2026 17:45:24 +0200
Subject: [PATCH 30/49] feat: add new confirm particle (#819)

---
 apps/ui/public/r/p-popover-4.json             | 32 ++++++
 apps/ui/public/r/registry.json                | 30 ++++++
 apps/ui/registry.json                         | 30 ++++++
 apps/ui/registry/__index__.tsx                | 18 ++++
 .../default/particles/p-popover-4.tsx         | 97 +++++++++++++++++++
 apps/ui/registry/registry-particles.ts        | 23 +++++
 6 files changed, 230 insertions(+)
 create mode 100644 apps/ui/public/r/p-popover-4.json
 create mode 100644 apps/ui/registry/default/particles/p-popover-4.tsx

diff --git a/apps/ui/public/r/p-popover-4.json b/apps/ui/public/r/p-popover-4.json
new file mode 100644
index 000000000..c31aaf1d2
--- /dev/null
+++ b/apps/ui/public/r/p-popover-4.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-popover-4",
+  "description": "Split button with popover to confirm multiple occurrences",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/badge",
+    "@coss/button",
+    "@coss/checkbox",
+    "@coss/checkbox-group",
+    "@coss/group",
+    "@coss/label",
+    "@coss/popover"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-popover-4.tsx",
+      "content": "\"use client\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverClose,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst occurrences = [\n  { date: \"Wed, Jul 15\", id: \"occurrence-1\", time: \"9:00 – 9:30am\" },\n  { date: \"Wed, Jul 15\", id: \"occurrence-2\", time: \"10:00 – 10:30am\" },\n  { date: \"Wed, Jul 15\", id: \"occurrence-3\", time: \"11:00 – 11:30am\" },\n];\n\nexport default function Particle() {\n  const [selected, setSelected] = useState(\n    occurrences.map((occurrence) => occurrence.id),\n  );\n\n  return (\n    <div className=\"flex gap-2\">\n      <Button size=\"xs\" variant=\"outline\">\n        Reject\n      </Button>\n      <Group aria-label=\"Confirm booking\">\n        <Button size=\"xs\">Confirm all</Button>\n        <GroupSeparator className=\"bg-primary/72\" />\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                aria-label=\"Choose occurrences to confirm\"\n                size=\"icon-xs\"\n              />\n            }\n          >\n            <ChevronDownIcon aria-hidden=\"true\" />\n          </PopoverTrigger>\n          <PopoverPopup align=\"end\" className=\"w-84\">\n            <div className=\"mb-3\">\n              <PopoverTitle className=\"text-sm\">\n                Confirm occurrences\n              </PopoverTitle>\n              <PopoverDescription className=\"text-xs\">\n                {occurrences.length} pending for this booking\n              </PopoverDescription>\n            </div>\n            <CheckboxGroup\n              aria-label=\"Occurrences to confirm\"\n              className=\"gap-0 self-stretch\"\n              onValueChange={setSelected}\n              value={selected}\n            >\n              {occurrences.map((occurrence) => (\n                <Label className=\"flex w-full gap-2 py-1.5\" key={occurrence.id}>\n                  <Checkbox value={occurrence.id} />\n                  <span className=\"tabular-nums\">{occurrence.time}</span>\n                  <span className=\"ms-auto font-normal text-muted-foreground\">\n                    {occurrence.date}\n                  </span>\n                </Label>\n              ))}\n            </CheckboxGroup>\n            <div className=\"mt-3 flex justify-end gap-2\">\n              <PopoverClose\n                disabled={selected.length === 0}\n                render={<Button size=\"xs\" variant=\"ghost\" />}\n              >\n                Reject selected\n              </PopoverClose>\n              <PopoverClose\n                disabled={selected.length === 0}\n                render={<Button size=\"xs\" />}\n              >\n                Confirm selected\n                <Badge className=\"-me-1 text-primary-foreground/60\">\n                  {selected.length}\n                </Badge>\n              </PopoverClose>\n            </div>\n          </PopoverPopup>\n        </Popover>\n      </Group>\n    </div>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "button",
+    "checkbox",
+    "checkbox group",
+    "group",
+    "popover"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index 42ce8656c..64259fb21 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -8396,6 +8396,36 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "button",
+        "checkbox",
+        "checkbox group",
+        "group",
+        "popover"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Split button with popover to confirm multiple occurrences",
+      "files": [
+        {
+          "path": "registry/default/particles/p-popover-4.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-popover-4",
+      "registryDependencies": [
+        "@coss/badge",
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "preview card"
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index 42ce8656c..64259fb21 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -8396,6 +8396,36 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "button",
+        "checkbox",
+        "checkbox group",
+        "group",
+        "popover"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Split button with popover to confirm multiple occurrences",
+      "files": [
+        {
+          "path": "registry/default/particles/p-popover-4.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-popover-4",
+      "registryDependencies": [
+        "@coss/badge",
+        "@coss/button",
+        "@coss/checkbox",
+        "@coss/checkbox-group",
+        "@coss/group",
+        "@coss/label",
+        "@coss/popover"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "preview card"
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index aa3aeda9a..fd88df906 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -7243,6 +7243,24 @@ export const Index: Record<string, any> = {
     categories: ["avatar","button","popover"],
     meta: undefined,
   },
+  "p-popover-4": {
+    name: "p-popover-4",
+    description: "Split button with popover to confirm multiple occurrences",
+    type: "registry:block",
+    registryDependencies: ["@coss/badge","@coss/button","@coss/checkbox","@coss/checkbox-group","@coss/group","@coss/label","@coss/popover"],
+    files: [{
+      path: "registry/default/particles/p-popover-4.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-popover-4.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["button","checkbox","checkbox group","group","popover"],
+    meta: undefined,
+  },
   "p-preview-card-1": {
     name: "p-preview-card-1",
     description: "Preview card with popup",
diff --git a/apps/ui/registry/default/particles/p-popover-4.tsx b/apps/ui/registry/default/particles/p-popover-4.tsx
new file mode 100644
index 000000000..66a9edf01
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-popover-4.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+import { Badge } from "@/registry/default/ui/badge";
+import { Button } from "@/registry/default/ui/button";
+import { Checkbox } from "@/registry/default/ui/checkbox";
+import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
+import { Group, GroupSeparator } from "@/registry/default/ui/group";
+import { Label } from "@/registry/default/ui/label";
+import {
+  Popover,
+  PopoverClose,
+  PopoverDescription,
+  PopoverPopup,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover";
+
+const occurrences = [
+  { date: "Wed, Jul 15", id: "occurrence-1", time: "9:00 – 9:30am" },
+  { date: "Wed, Jul 15", id: "occurrence-2", time: "10:00 – 10:30am" },
+  { date: "Wed, Jul 15", id: "occurrence-3", time: "11:00 – 11:30am" },
+];
+
+export default function Particle() {
+  const [selected, setSelected] = useState(
+    occurrences.map((occurrence) => occurrence.id),
+  );
+
+  return (
+    <div className="flex gap-2">
+      <Button size="xs" variant="outline">
+        Reject
+      </Button>
+      <Group aria-label="Confirm booking">
+        <Button size="xs">Confirm all</Button>
+        <GroupSeparator className="bg-primary/72" />
+        <Popover>
+          <PopoverTrigger
+            render={
+              <Button
+                aria-label="Choose occurrences to confirm"
+                size="icon-xs"
+              />
+            }
+          >
+            <ChevronDownIcon aria-hidden="true" />
+          </PopoverTrigger>
+          <PopoverPopup align="end" className="w-84">
+            <div className="mb-3">
+              <PopoverTitle className="text-sm">
+                Confirm occurrences
+              </PopoverTitle>
+              <PopoverDescription className="text-xs">
+                {occurrences.length} pending for this booking
+              </PopoverDescription>
+            </div>
+            <CheckboxGroup
+              aria-label="Occurrences to confirm"
+              className="gap-0 self-stretch"
+              onValueChange={setSelected}
+              value={selected}
+            >
+              {occurrences.map((occurrence) => (
+                <Label className="flex w-full gap-2 py-1.5" key={occurrence.id}>
+                  <Checkbox value={occurrence.id} />
+                  <span className="tabular-nums">{occurrence.time}</span>
+                  <span className="ms-auto font-normal text-muted-foreground">
+                    {occurrence.date}
+                  </span>
+                </Label>
+              ))}
+            </CheckboxGroup>
+            <div className="mt-3 flex justify-end gap-2">
+              <PopoverClose
+                disabled={selected.length === 0}
+                render={<Button size="xs" variant="ghost" />}
+              >
+                Reject selected
+              </PopoverClose>
+              <PopoverClose
+                disabled={selected.length === 0}
+                render={<Button size="xs" />}
+              >
+                Confirm selected
+                <Badge className="-me-1 text-primary-foreground/60">
+                  {selected.length}
+                </Badge>
+              </PopoverClose>
+            </div>
+          </PopoverPopup>
+        </Popover>
+      </Group>
+    </div>
+  );
+}
diff --git a/apps/ui/registry/registry-particles.ts b/apps/ui/registry/registry-particles.ts
index 48a6c8db3..a852d0e14 100644
--- a/apps/ui/registry/registry-particles.ts
+++ b/apps/ui/registry/registry-particles.ts
@@ -3967,6 +3967,29 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/avatar", "@coss/button", "@coss/popover"],
     type: "registry:block",
   },
+  {
+    categories: categories(
+      "button",
+      "checkbox",
+      "checkbox group",
+      "group",
+      "popover",
+    ),
+    dependencies: ["lucide-react"],
+    description: "Split button with popover to confirm multiple occurrences",
+    files: [{ path: "particles/p-popover-4.tsx", type: "registry:block" }],
+    name: "p-popover-4",
+    registryDependencies: [
+      "@coss/badge",
+      "@coss/button",
+      "@coss/checkbox",
+      "@coss/checkbox-group",
+      "@coss/group",
+      "@coss/label",
+      "@coss/popover",
+    ],
+    type: "registry:block",
+  },
   {
     categories: categories("preview card"),
     dependencies: ["lucide-react"],

From b4591e7f73941b8da93724426bd6d6cca46c81e9 Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Wed, 15 Jul 2026 18:29:26 +0200
Subject: [PATCH 31/49] feat: add 2 new particles - team member selector (#820)

* initial attempt

* mc

* autohighlight

* feat: add team members selectors

* mc
---
 apps/ui/public/r/p-combobox-19.json           |  29 ++++
 apps/ui/public/r/p-combobox-20.json           |  29 ++++
 apps/ui/public/r/registry.json                |  57 +++++++
 apps/ui/public/r/table.json                   |   3 +
 apps/ui/registry.json                         |  57 +++++++
 apps/ui/registry/__index__.tsx                |  36 ++++
 .../default/particles/p-combobox-19.tsx       | 161 ++++++++++++++++++
 .../default/particles/p-combobox-20.tsx       | 161 ++++++++++++++++++
 apps/ui/registry/registry-particles.ts        |  36 ++++
 apps/ui/registry/registry-ui.ts               |   1 +
 10 files changed, 570 insertions(+)
 create mode 100644 apps/ui/public/r/p-combobox-19.json
 create mode 100644 apps/ui/public/r/p-combobox-20.json
 create mode 100644 apps/ui/registry/default/particles/p-combobox-19.tsx
 create mode 100644 apps/ui/registry/default/particles/p-combobox-20.tsx

diff --git a/apps/ui/public/r/p-combobox-19.json b/apps/ui/public/r/p-combobox-19.json
new file mode 100644
index 000000000..21a141aa1
--- /dev/null
+++ b/apps/ui/public/r/p-combobox-19.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-combobox-19",
+  "description": "Combobox multiple with stacked chips",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/avatar",
+    "@coss/badge",
+    "@coss/button",
+    "@coss/combobox"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-combobox-19.tsx",
+      "content": "\"use client\";\n\nimport { SearchIcon, XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ntype TeamMember = {\n  avatar: string;\n  initials: string;\n  label: string;\n  priority: \"Lowest\" | \"Low\" | \"Medium\" | \"High\" | \"Highest\";\n  value: string;\n  weight: number;\n};\n\nconst teamMembers: TeamMember[] = [\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80\",\n    initials: \"JH\",\n    label: \"Jenny Hamilton\",\n    priority: \"Highest\",\n    value: \"jenny\",\n    weight: 200,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80\",\n    initials: \"PS\",\n    label: \"Paul Smith\",\n    priority: \"Medium\",\n    value: \"paul\",\n    weight: 100,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80\",\n    initials: \"LW\",\n    label: \"Luna Wyen\",\n    priority: \"High\",\n    value: \"luna\",\n    weight: 150,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=72&h=72&dpr=2&q=80\",\n    initials: \"AC\",\n    label: \"Alex Chen\",\n    priority: \"Low\",\n    value: \"alex\",\n    weight: 100,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=72&h=72&dpr=2&q=80\",\n    initials: \"SJ\",\n    label: \"Sarah Johnson\",\n    priority: \"Medium\",\n    value: \"sarah\",\n    weight: 50,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=72&h=72&dpr=2&q=80\",\n    initials: \"ED\",\n    label: \"Emma Davis\",\n    priority: \"Lowest\",\n    value: \"emma\",\n    weight: 100,\n  },\n];\n\nexport default function Particle() {\n  const [open, setOpen] = useState(false);\n  const [selected, setSelected] = useState<TeamMember[]>(\n    teamMembers.slice(0, 2),\n  );\n\n  return (\n    <div className=\"flex w-full flex-col gap-2\">\n      <Combobox\n        autoHighlight\n        items={teamMembers}\n        multiple\n        onOpenChange={setOpen}\n        onValueChange={(value) => {\n          setSelected(value);\n          setOpen(false);\n        }}\n        open={open}\n        value={selected}\n      >\n        <ComboboxInput\n          aria-label=\"Add team members\"\n          placeholder=\"Add team members…\"\n          startAddon={<SearchIcon />}\n        />\n        <ComboboxPopup>\n          <ComboboxEmpty>No team members found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item: TeamMember) => (\n              <ComboboxItem key={item.value} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n      {selected.length > 0 && (\n        <ul className=\"flex flex-col gap-2\">\n          {selected.map((member) => (\n            <li\n              className=\"flex items-center gap-2 rounded-lg border border-input p-1 ps-2 text-base sm:text-sm\"\n              key={member.value}\n            >\n              <Avatar className=\"size-5\">\n                <AvatarImage alt={member.label} src={member.avatar} />\n                <AvatarFallback className=\"text-[.625rem]\">\n                  {member.initials}\n                </AvatarFallback>\n              </Avatar>\n              <span className=\"truncate font-medium\">{member.label}</span>\n              <Badge className=\"ms-auto\" variant=\"outline\">\n                {member.priority}\n              </Badge>\n              <span className=\"text-muted-foreground tabular-nums\">\n                {member.weight}%\n              </span>\n              <Button\n                aria-label={`Remove ${member.label}`}\n                onClick={() =>\n                  setSelected((current) =>\n                    current.filter((item) => item.value !== member.value),\n                  )\n                }\n                size=\"icon-xs\"\n                variant=\"ghost\"\n              >\n                <XIcon />\n              </Button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"
+  },
+  "categories": [
+    "combobox",
+    "input"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-combobox-20.json b/apps/ui/public/r/p-combobox-20.json
new file mode 100644
index 000000000..0d1a22d6c
--- /dev/null
+++ b/apps/ui/public/r/p-combobox-20.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-combobox-20",
+  "description": "Combobox multiple with stacked divided chips",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/avatar",
+    "@coss/badge",
+    "@coss/button",
+    "@coss/combobox"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-combobox-20.tsx",
+      "content": "\"use client\";\n\nimport { SearchIcon, XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ntype TeamMember = {\n  avatar: string;\n  initials: string;\n  label: string;\n  priority: \"Lowest\" | \"Low\" | \"Medium\" | \"High\" | \"Highest\";\n  value: string;\n  weight: number;\n};\n\nconst teamMembers: TeamMember[] = [\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80\",\n    initials: \"JH\",\n    label: \"Jenny Hamilton\",\n    priority: \"Highest\",\n    value: \"jenny\",\n    weight: 200,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80\",\n    initials: \"PS\",\n    label: \"Paul Smith\",\n    priority: \"Medium\",\n    value: \"paul\",\n    weight: 100,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80\",\n    initials: \"LW\",\n    label: \"Luna Wyen\",\n    priority: \"High\",\n    value: \"luna\",\n    weight: 150,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=72&h=72&dpr=2&q=80\",\n    initials: \"AC\",\n    label: \"Alex Chen\",\n    priority: \"Low\",\n    value: \"alex\",\n    weight: 100,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=72&h=72&dpr=2&q=80\",\n    initials: \"SJ\",\n    label: \"Sarah Johnson\",\n    priority: \"Medium\",\n    value: \"sarah\",\n    weight: 50,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=72&h=72&dpr=2&q=80\",\n    initials: \"ED\",\n    label: \"Emma Davis\",\n    priority: \"Lowest\",\n    value: \"emma\",\n    weight: 100,\n  },\n];\n\nexport default function Particle() {\n  const [open, setOpen] = useState(false);\n  const [selected, setSelected] = useState<TeamMember[]>(\n    teamMembers.slice(0, 2),\n  );\n\n  return (\n    <div className=\"flex w-full flex-col gap-2\">\n      <Combobox\n        autoHighlight\n        items={teamMembers}\n        multiple\n        onOpenChange={setOpen}\n        onValueChange={(value) => {\n          setSelected(value);\n          setOpen(false);\n        }}\n        open={open}\n        value={selected}\n      >\n        <ComboboxInput\n          aria-label=\"Add team members\"\n          placeholder=\"Add team members…\"\n          startAddon={<SearchIcon />}\n        />\n        <ComboboxPopup>\n          <ComboboxEmpty>No team members found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item: TeamMember) => (\n              <ComboboxItem key={item.value} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n      {selected.length > 0 && (\n        <ul className=\"divide-y rounded-lg border\">\n          {selected.map((member) => (\n            <li\n              className=\"flex items-center gap-2 p-1 ps-2 text-base sm:text-sm\"\n              key={member.value}\n            >\n              <Avatar className=\"size-5\">\n                <AvatarImage alt={member.label} src={member.avatar} />\n                <AvatarFallback className=\"text-[.625rem]\">\n                  {member.initials}\n                </AvatarFallback>\n              </Avatar>\n              <span className=\"truncate font-medium\">{member.label}</span>\n              <Badge className=\"ms-auto\" size=\"sm\" variant=\"outline\">\n                {member.priority}\n              </Badge>\n              <span className=\"text-muted-foreground text-xs tabular-nums\">\n                {member.weight}%\n              </span>\n              <Button\n                aria-label={`Remove ${member.label}`}\n                onClick={() =>\n                  setSelected((current) =>\n                    current.filter((item) => item.value !== member.value),\n                  )\n                }\n                size=\"icon-xs\"\n                variant=\"ghost\"\n              >\n                <XIcon />\n              </Button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"
+  },
+  "categories": [
+    "combobox",
+    "input"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index 64259fb21..70eaee341 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -787,6 +787,9 @@
       "type": "registry:ui"
     },
     {
+      "dependencies": [
+        "@base-ui/react"
+      ],
       "files": [
         {
           "path": "registry/default/ui/table.tsx",
@@ -4797,6 +4800,60 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "combobox",
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Combobox multiple with stacked chips",
+      "files": [
+        {
+          "path": "registry/default/particles/p-combobox-19.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"
+      },
+      "name": "p-combobox-19",
+      "registryDependencies": [
+        "@coss/avatar",
+        "@coss/badge",
+        "@coss/button",
+        "@coss/combobox"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "combobox",
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Combobox multiple with stacked divided chips",
+      "files": [
+        {
+          "path": "registry/default/particles/p-combobox-20.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"
+      },
+      "name": "p-combobox-20",
+      "registryDependencies": [
+        "@coss/avatar",
+        "@coss/badge",
+        "@coss/button",
+        "@coss/combobox"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "command",
diff --git a/apps/ui/public/r/table.json b/apps/ui/public/r/table.json
index 3f66065a3..59ca9c4d6 100644
--- a/apps/ui/public/r/table.json
+++ b/apps/ui/public/r/table.json
@@ -1,6 +1,9 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "table",
+  "dependencies": [
+    "@base-ui/react"
+  ],
   "files": [
     {
       "path": "registry/default/ui/table.tsx",
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index 64259fb21..70eaee341 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -787,6 +787,9 @@
       "type": "registry:ui"
     },
     {
+      "dependencies": [
+        "@base-ui/react"
+      ],
       "files": [
         {
           "path": "registry/default/ui/table.tsx",
@@ -4797,6 +4800,60 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "combobox",
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Combobox multiple with stacked chips",
+      "files": [
+        {
+          "path": "registry/default/particles/p-combobox-19.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"
+      },
+      "name": "p-combobox-19",
+      "registryDependencies": [
+        "@coss/avatar",
+        "@coss/badge",
+        "@coss/button",
+        "@coss/combobox"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "combobox",
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Combobox multiple with stacked divided chips",
+      "files": [
+        {
+          "path": "registry/default/particles/p-combobox-20.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"
+      },
+      "name": "p-combobox-20",
+      "registryDependencies": [
+        "@coss/avatar",
+        "@coss/badge",
+        "@coss/button",
+        "@coss/combobox"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "command",
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index fd88df906..0c69ff6bc 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -4273,6 +4273,42 @@ export const Index: Record<string, any> = {
     categories: ["combobox","select"],
     meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"},
   },
+  "p-combobox-19": {
+    name: "p-combobox-19",
+    description: "Combobox multiple with stacked chips",
+    type: "registry:block",
+    registryDependencies: ["@coss/avatar","@coss/badge","@coss/button","@coss/combobox"],
+    files: [{
+      path: "registry/default/particles/p-combobox-19.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-combobox-19.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["combobox","input"],
+    meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"},
+  },
+  "p-combobox-20": {
+    name: "p-combobox-20",
+    description: "Combobox multiple with stacked divided chips",
+    type: "registry:block",
+    registryDependencies: ["@coss/avatar","@coss/badge","@coss/button","@coss/combobox"],
+    files: [{
+      path: "registry/default/particles/p-combobox-20.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-combobox-20.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["combobox","input"],
+    meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"},
+  },
   "p-command-1": {
     name: "p-command-1",
     description: "Command palette with dialog",
diff --git a/apps/ui/registry/default/particles/p-combobox-19.tsx b/apps/ui/registry/default/particles/p-combobox-19.tsx
new file mode 100644
index 000000000..ed6241cbb
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-combobox-19.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { SearchIcon, XIcon } from "lucide-react";
+import { useState } from "react";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar";
+import { Badge } from "@/registry/default/ui/badge";
+import { Button } from "@/registry/default/ui/button";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+} from "@/registry/default/ui/combobox";
+
+type TeamMember = {
+  avatar: string;
+  initials: string;
+  label: string;
+  priority: "Lowest" | "Low" | "Medium" | "High" | "Highest";
+  value: string;
+  weight: number;
+};
+
+const teamMembers: TeamMember[] = [
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80",
+    initials: "JH",
+    label: "Jenny Hamilton",
+    priority: "Highest",
+    value: "jenny",
+    weight: 200,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80",
+    initials: "PS",
+    label: "Paul Smith",
+    priority: "Medium",
+    value: "paul",
+    weight: 100,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80",
+    initials: "LW",
+    label: "Luna Wyen",
+    priority: "High",
+    value: "luna",
+    weight: 150,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=72&h=72&dpr=2&q=80",
+    initials: "AC",
+    label: "Alex Chen",
+    priority: "Low",
+    value: "alex",
+    weight: 100,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=72&h=72&dpr=2&q=80",
+    initials: "SJ",
+    label: "Sarah Johnson",
+    priority: "Medium",
+    value: "sarah",
+    weight: 50,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=72&h=72&dpr=2&q=80",
+    initials: "ED",
+    label: "Emma Davis",
+    priority: "Lowest",
+    value: "emma",
+    weight: 100,
+  },
+];
+
+export default function Particle() {
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<TeamMember[]>(
+    teamMembers.slice(0, 2),
+  );
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <Combobox
+        autoHighlight
+        items={teamMembers}
+        multiple
+        onOpenChange={setOpen}
+        onValueChange={(value) => {
+          setSelected(value);
+          setOpen(false);
+        }}
+        open={open}
+        value={selected}
+      >
+        <ComboboxInput
+          aria-label="Add team members"
+          placeholder="Add team members…"
+          startAddon={<SearchIcon />}
+        />
+        <ComboboxPopup>
+          <ComboboxEmpty>No team members found.</ComboboxEmpty>
+          <ComboboxList>
+            {(item: TeamMember) => (
+              <ComboboxItem key={item.value} value={item}>
+                {item.label}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxPopup>
+      </Combobox>
+      {selected.length > 0 && (
+        <ul className="flex flex-col gap-2">
+          {selected.map((member) => (
+            <li
+              className="flex items-center gap-2 rounded-lg border border-input p-1 ps-2 text-base sm:text-sm"
+              key={member.value}
+            >
+              <Avatar className="size-5">
+                <AvatarImage alt={member.label} src={member.avatar} />
+                <AvatarFallback className="text-[.625rem]">
+                  {member.initials}
+                </AvatarFallback>
+              </Avatar>
+              <span className="truncate font-medium">{member.label}</span>
+              <Badge className="ms-auto" variant="outline">
+                {member.priority}
+              </Badge>
+              <span className="text-muted-foreground tabular-nums">
+                {member.weight}%
+              </span>
+              <Button
+                aria-label={`Remove ${member.label}`}
+                onClick={() =>
+                  setSelected((current) =>
+                    current.filter((item) => item.value !== member.value),
+                  )
+                }
+                size="icon-xs"
+                variant="ghost"
+              >
+                <XIcon />
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-combobox-20.tsx b/apps/ui/registry/default/particles/p-combobox-20.tsx
new file mode 100644
index 000000000..04670f1f8
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-combobox-20.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { SearchIcon, XIcon } from "lucide-react";
+import { useState } from "react";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar";
+import { Badge } from "@/registry/default/ui/badge";
+import { Button } from "@/registry/default/ui/button";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+} from "@/registry/default/ui/combobox";
+
+type TeamMember = {
+  avatar: string;
+  initials: string;
+  label: string;
+  priority: "Lowest" | "Low" | "Medium" | "High" | "Highest";
+  value: string;
+  weight: number;
+};
+
+const teamMembers: TeamMember[] = [
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80",
+    initials: "JH",
+    label: "Jenny Hamilton",
+    priority: "Highest",
+    value: "jenny",
+    weight: 200,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80",
+    initials: "PS",
+    label: "Paul Smith",
+    priority: "Medium",
+    value: "paul",
+    weight: 100,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80",
+    initials: "LW",
+    label: "Luna Wyen",
+    priority: "High",
+    value: "luna",
+    weight: 150,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=72&h=72&dpr=2&q=80",
+    initials: "AC",
+    label: "Alex Chen",
+    priority: "Low",
+    value: "alex",
+    weight: 100,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=72&h=72&dpr=2&q=80",
+    initials: "SJ",
+    label: "Sarah Johnson",
+    priority: "Medium",
+    value: "sarah",
+    weight: 50,
+  },
+  {
+    avatar:
+      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=72&h=72&dpr=2&q=80",
+    initials: "ED",
+    label: "Emma Davis",
+    priority: "Lowest",
+    value: "emma",
+    weight: 100,
+  },
+];
+
+export default function Particle() {
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<TeamMember[]>(
+    teamMembers.slice(0, 2),
+  );
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <Combobox
+        autoHighlight
+        items={teamMembers}
+        multiple
+        onOpenChange={setOpen}
+        onValueChange={(value) => {
+          setSelected(value);
+          setOpen(false);
+        }}
+        open={open}
+        value={selected}
+      >
+        <ComboboxInput
+          aria-label="Add team members"
+          placeholder="Add team members…"
+          startAddon={<SearchIcon />}
+        />
+        <ComboboxPopup>
+          <ComboboxEmpty>No team members found.</ComboboxEmpty>
+          <ComboboxList>
+            {(item: TeamMember) => (
+              <ComboboxItem key={item.value} value={item}>
+                {item.label}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxPopup>
+      </Combobox>
+      {selected.length > 0 && (
+        <ul className="divide-y rounded-lg border">
+          {selected.map((member) => (
+            <li
+              className="flex items-center gap-2 p-1 ps-2 text-base sm:text-sm"
+              key={member.value}
+            >
+              <Avatar className="size-5">
+                <AvatarImage alt={member.label} src={member.avatar} />
+                <AvatarFallback className="text-[.625rem]">
+                  {member.initials}
+                </AvatarFallback>
+              </Avatar>
+              <span className="truncate font-medium">{member.label}</span>
+              <Badge className="ms-auto" size="sm" variant="outline">
+                {member.priority}
+              </Badge>
+              <span className="text-muted-foreground text-xs tabular-nums">
+                {member.weight}%
+              </span>
+              <Button
+                aria-label={`Remove ${member.label}`}
+                onClick={() =>
+                  setSelected((current) =>
+                    current.filter((item) => item.value !== member.value),
+                  )
+                }
+                size="icon-xs"
+                variant="ghost"
+              >
+                <XIcon />
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/apps/ui/registry/registry-particles.ts b/apps/ui/registry/registry-particles.ts
index a852d0e14..d04ef7ca9 100644
--- a/apps/ui/registry/registry-particles.ts
+++ b/apps/ui/registry/registry-particles.ts
@@ -2023,6 +2023,42 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/combobox", "@coss/select"],
     type: "registry:block",
   },
+  {
+    categories: categories("combobox", "input"),
+    dependencies: ["lucide-react"],
+    description: "Combobox multiple with stacked chips",
+    files: [{ path: "particles/p-combobox-19.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80",
+    },
+    name: "p-combobox-19",
+    registryDependencies: [
+      "@coss/avatar",
+      "@coss/badge",
+      "@coss/button",
+      "@coss/combobox",
+    ],
+    type: "registry:block",
+  },
+  {
+    categories: categories("combobox", "input"),
+    dependencies: ["lucide-react"],
+    description: "Combobox multiple with stacked divided chips",
+    files: [{ path: "particles/p-combobox-20.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80",
+    },
+    name: "p-combobox-20",
+    registryDependencies: [
+      "@coss/avatar",
+      "@coss/badge",
+      "@coss/button",
+      "@coss/combobox",
+    ],
+    type: "registry:block",
+  },
   {
     categories: categories("command", "dialog"),
     dependencies: ["lucide-react"],
diff --git a/apps/ui/registry/registry-ui.ts b/apps/ui/registry/registry-ui.ts
index 0837520dd..6c3d1bd63 100644
--- a/apps/ui/registry/registry-ui.ts
+++ b/apps/ui/registry/registry-ui.ts
@@ -682,6 +682,7 @@ export const ui: Registry["items"] = [
     type: "registry:ui",
   },
   {
+    dependencies: ["@base-ui/react"],
     files: [
       {
         path: "ui/table.tsx",

From aa2636c4102c433789643ebbadbf862116d8ffd5 Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Tue, 21 Jul 2026 23:41:49 +0200
Subject: [PATCH 32/49] feat: add calendar particle with 24-hour autocomplete
 time input (#822)

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/ui/public/r/p-calendar-25.json           |  28 ++
 apps/ui/public/r/registry.json                |  26 ++
 apps/ui/registry.json                         |  26 ++
 apps/ui/registry/__index__.tsx                |  18 ++
 .../default/particles/p-calendar-25.tsx       | 247 ++++++++++++++++++
 apps/ui/registry/registry-particles.ts        |  13 +
 6 files changed, 358 insertions(+)
 create mode 100644 apps/ui/public/r/p-calendar-25.json
 create mode 100644 apps/ui/registry/default/particles/p-calendar-25.tsx

diff --git a/apps/ui/public/r/p-calendar-25.json b/apps/ui/public/r/p-calendar-25.json
new file mode 100644
index 000000000..7b8184f22
--- /dev/null
+++ b/apps/ui/public/r/p-calendar-25.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-calendar-25",
+  "description": "Calendar with 24-hour autocomplete time input",
+  "dependencies": [
+    "date-fns",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/calendar",
+    "@coss/autocomplete",
+    "@coss/field"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-calendar-25.tsx",
+      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { ClockIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport {\n  Autocomplete,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\n\nconst times = Array.from({ length: 96 }, (_, i) => {\n  const hours = String(Math.floor(i / 4)).padStart(2, \"0\");\n  const minutes = String((i % 4) * 15).padStart(2, \"0\");\n  return `${hours}:${minutes}`;\n});\n\nfunction parseTime(value: string): string | null {\n  const trimmed = value.trim();\n  if (!trimmed) {\n    return null;\n  }\n\n  const colonMatch = /^(\\d{1,2}):(\\d{1,2})$/.exec(trimmed);\n  if (colonMatch) {\n    const hours = Number(colonMatch[1]);\n    const minutes = Number(colonMatch[2]);\n    if (hours > 23 || minutes > 59) {\n      return null;\n    }\n    return `${String(hours).padStart(2, \"0\")}:${String(minutes).padStart(2, \"0\")}`;\n  }\n\n  const digits = trimmed.replace(/\\D/g, \"\");\n  if (digits.length === 0 || digits.length > 4) {\n    return null;\n  }\n\n  let hours: number;\n  let minutes: number;\n\n  if (digits.length <= 2) {\n    hours = Number(digits);\n    minutes = 0;\n  } else if (digits.length === 3) {\n    // HMM → H:MM (215 → 02:15)\n    hours = Number(digits[0]);\n    minutes = Number(digits.slice(1));\n  } else {\n    // HHMM → HH:MM (2150 → 21:50)\n    hours = Number(digits.slice(0, 2));\n    minutes = Number(digits.slice(2));\n  }\n\n  if (hours > 23 || minutes > 59) {\n    return null;\n  }\n\n  return `${String(hours).padStart(2, \"0\")}:${String(minutes).padStart(2, \"0\")}`;\n}\n\n/**\n * Live input formatting from a digit buffer:\n * - ≤2 digits: as-is\n * - 3 digits: H:MM (unpadded hour so a 4th digit can still become HHMM)\n * - 4 digits: HH:mm\n */\nfunction formatTimeInput(value: string) {\n  const digits = value.replace(/\\D/g, \"\").slice(0, 4);\n\n  if (digits.length <= 2) {\n    return digits;\n  }\n\n  if (digits.length === 3) {\n    const minutes = Number(digits.slice(1));\n    if (minutes <= 59) {\n      return `${digits[0]}:${digits.slice(1)}`;\n    }\n    return digits;\n  }\n\n  return parseTime(digits) ?? digits;\n}\n\nfunction filterTime(item: string, query: string) {\n  const trimmed = query.trim().toLowerCase();\n  if (!trimmed) {\n    return true;\n  }\n\n  if (item.toLowerCase().startsWith(trimmed)) {\n    return true;\n  }\n\n  const itemDigits = item.replace(/\\D/g, \"\");\n  const queryDigits = trimmed.replace(/\\D/g, \"\");\n  if (!queryDigits) {\n    return false;\n  }\n\n  const itemHour = Number(itemDigits.slice(0, 2));\n  const itemMinutes = itemDigits.slice(2);\n  // Padded \"0615\" and unpadded \"615\" so \"61\" matches 06:15 while typing toward 615\n  const itemDigitsUnpadded = `${itemHour}${itemMinutes}`;\n\n  if (\n    itemDigits.startsWith(queryDigits) ||\n    itemDigitsUnpadded.startsWith(queryDigits)\n  ) {\n    return true;\n  }\n\n  if (queryDigits.length >= 3) {\n    const normalized = parseTime(queryDigits);\n    return normalized === item;\n  }\n\n  const queryHour = Number(queryDigits);\n\n  if (trimmed.includes(\":\")) {\n    const minuteQuery = trimmed.split(\":\")[1]?.replace(/\\D/g, \"\") ?? \"\";\n    return (\n      itemHour === queryHour &&\n      (!minuteQuery || itemMinutes.startsWith(minuteQuery))\n    );\n  }\n\n  if (queryDigits.length === 1) {\n    return itemHour === queryHour || String(itemHour).startsWith(queryDigits);\n  }\n\n  return queryHour <= 23 && itemHour === queryHour;\n}\n\nfunction applyTime(date: Date, time: string) {\n  const parsed = parseTime(time);\n  if (!parsed) {\n    return date;\n  }\n  const hours = Number(parsed.slice(0, 2));\n  const minutes = Number(parsed.slice(3, 5));\n  const next = new Date(date);\n  next.setHours(hours, minutes, 0, 0);\n  return next;\n}\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(() => {\n    const initial = new Date();\n    initial.setHours(12, 0, 0, 0);\n    return initial;\n  });\n  const [month, setMonth] = useState<Date>(() => new Date());\n  const [time, setTime] = useState(\"12:00\");\n  const [isEditing, setIsEditing] = useState(false);\n\n  const handleDaySelect = (selectedDate: Date | undefined) => {\n    if (!selectedDate) {\n      setDate(undefined);\n      return;\n    }\n    const next = applyTime(selectedDate, time);\n    setDate(next);\n    setMonth(next);\n  };\n\n  const handleTimeChange = (value: string) => {\n    setIsEditing(true);\n    const next = formatTimeInput(value);\n    setTime(next);\n\n    // List picks and completed HH:mm only — avoid committing mid-typing (\"2:1\" → 02:01)\n    if (date && /^\\d{2}:\\d{2}$/.test(next)) {\n      setDate(applyTime(date, next));\n    }\n  };\n\n  const handleTimeBlur = () => {\n    const normalized = parseTime(time);\n    if (normalized) {\n      setTime(normalized);\n      if (date) {\n        setDate(applyTime(date, normalized));\n      }\n    } else if (date) {\n      setTime(format(date, \"HH:mm\"));\n    }\n    setIsEditing(false);\n  };\n\n  const filterQuery = isEditing ? time : \"\";\n  const matchingTimes = times.filter((item) => filterTime(item, filterQuery));\n\n  return (\n    <div className=\"flex w-fit flex-col gap-2\">\n      <Calendar\n        mode=\"single\"\n        month={month}\n        onMonthChange={setMonth}\n        onSelect={handleDaySelect}\n        selected={date}\n      />\n      <Field className=\"w-0 min-w-full flex-row items-center gap-3\">\n        <FieldLabel className=\"whitespace-nowrap text-xs\">\n          Enter time\n        </FieldLabel>\n        <Autocomplete\n          autoHighlight\n          filter={(item, query) => filterTime(item, isEditing ? query : \"\")}\n          items={times}\n          onValueChange={handleTimeChange}\n          openOnInputClick\n          value={time}\n        >\n          <AutocompleteInput\n            aria-label=\"Enter time\"\n            inputMode=\"numeric\"\n            maxLength={5}\n            onBlur={handleTimeBlur}\n            onFocus={(event) => {\n              setIsEditing(false);\n              event.currentTarget.select();\n            }}\n            placeholder=\"HH:mm\"\n            startAddon={<ClockIcon aria-hidden=\"true\" />}\n          />\n          <AutocompletePopup\n            className={matchingTimes.length === 0 ? \"hidden\" : undefined}\n          >\n            <AutocompleteList>\n              {(item: string) => (\n                <AutocompleteItem key={item} value={item}>\n                  {item}\n                </AutocompleteItem>\n              )}\n            </AutocompleteList>\n          </AutocompletePopup>\n        </Autocomplete>\n      </Field>\n    </div>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "calendar",
+    "autocomplete",
+    "field",
+    "time"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index 70eaee341..c49a5a276 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -3596,6 +3596,32 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "calendar",
+        "autocomplete",
+        "field",
+        "time"
+      ],
+      "dependencies": [
+        "date-fns",
+        "lucide-react"
+      ],
+      "description": "Calendar with 24-hour autocomplete time input",
+      "files": [
+        {
+          "path": "registry/default/particles/p-calendar-25.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-calendar-25",
+      "registryDependencies": [
+        "@coss/calendar",
+        "@coss/autocomplete",
+        "@coss/field"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "date picker",
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index 70eaee341..c49a5a276 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -3596,6 +3596,32 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "calendar",
+        "autocomplete",
+        "field",
+        "time"
+      ],
+      "dependencies": [
+        "date-fns",
+        "lucide-react"
+      ],
+      "description": "Calendar with 24-hour autocomplete time input",
+      "files": [
+        {
+          "path": "registry/default/particles/p-calendar-25.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-calendar-25",
+      "registryDependencies": [
+        "@coss/calendar",
+        "@coss/autocomplete",
+        "@coss/field"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "date picker",
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index 0c69ff6bc..9c4d68d6c 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -3391,6 +3391,24 @@ export const Index: Record<string, any> = {
     categories: ["calendar"],
     meta: {"colSpan":2},
   },
+  "p-calendar-25": {
+    name: "p-calendar-25",
+    description: "Calendar with 24-hour autocomplete time input",
+    type: "registry:block",
+    registryDependencies: ["@coss/calendar","@coss/autocomplete","@coss/field"],
+    files: [{
+      path: "registry/default/particles/p-calendar-25.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-calendar-25.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","autocomplete","field","time"],
+    meta: undefined,
+  },
   "p-date-picker-1": {
     name: "p-date-picker-1",
     description: "Basic date picker",
diff --git a/apps/ui/registry/default/particles/p-calendar-25.tsx b/apps/ui/registry/default/particles/p-calendar-25.tsx
new file mode 100644
index 000000000..c19f76ee6
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-calendar-25.tsx
@@ -0,0 +1,247 @@
+"use client";
+
+import { format } from "date-fns";
+import { ClockIcon } from "lucide-react";
+import { useState } from "react";
+import {
+  Autocomplete,
+  AutocompleteInput,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompletePopup,
+} from "@/registry/default/ui/autocomplete";
+import { Calendar } from "@/registry/default/ui/calendar";
+import { Field, FieldLabel } from "@/registry/default/ui/field";
+
+const times = Array.from({ length: 96 }, (_, i) => {
+  const hours = String(Math.floor(i / 4)).padStart(2, "0");
+  const minutes = String((i % 4) * 15).padStart(2, "0");
+  return `${hours}:${minutes}`;
+});
+
+function parseTime(value: string): string | null {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  const colonMatch = /^(\d{1,2}):(\d{1,2})$/.exec(trimmed);
+  if (colonMatch) {
+    const hours = Number(colonMatch[1]);
+    const minutes = Number(colonMatch[2]);
+    if (hours > 23 || minutes > 59) {
+      return null;
+    }
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+  }
+
+  const digits = trimmed.replace(/\D/g, "");
+  if (digits.length === 0 || digits.length > 4) {
+    return null;
+  }
+
+  let hours: number;
+  let minutes: number;
+
+  if (digits.length <= 2) {
+    hours = Number(digits);
+    minutes = 0;
+  } else if (digits.length === 3) {
+    // HMM → H:MM (215 → 02:15)
+    hours = Number(digits[0]);
+    minutes = Number(digits.slice(1));
+  } else {
+    // HHMM → HH:MM (2150 → 21:50)
+    hours = Number(digits.slice(0, 2));
+    minutes = Number(digits.slice(2));
+  }
+
+  if (hours > 23 || minutes > 59) {
+    return null;
+  }
+
+  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
+
+/**
+ * Live input formatting from a digit buffer:
+ * - ≤2 digits: as-is
+ * - 3 digits: H:MM (unpadded hour so a 4th digit can still become HHMM)
+ * - 4 digits: HH:mm
+ */
+function formatTimeInput(value: string) {
+  const digits = value.replace(/\D/g, "").slice(0, 4);
+
+  if (digits.length <= 2) {
+    return digits;
+  }
+
+  if (digits.length === 3) {
+    const minutes = Number(digits.slice(1));
+    if (minutes <= 59) {
+      return `${digits[0]}:${digits.slice(1)}`;
+    }
+    return digits;
+  }
+
+  return parseTime(digits) ?? digits;
+}
+
+function filterTime(item: string, query: string) {
+  const trimmed = query.trim().toLowerCase();
+  if (!trimmed) {
+    return true;
+  }
+
+  if (item.toLowerCase().startsWith(trimmed)) {
+    return true;
+  }
+
+  const itemDigits = item.replace(/\D/g, "");
+  const queryDigits = trimmed.replace(/\D/g, "");
+  if (!queryDigits) {
+    return false;
+  }
+
+  const itemHour = Number(itemDigits.slice(0, 2));
+  const itemMinutes = itemDigits.slice(2);
+  // Padded "0615" and unpadded "615" so "61" matches 06:15 while typing toward 615
+  const itemDigitsUnpadded = `${itemHour}${itemMinutes}`;
+
+  if (
+    itemDigits.startsWith(queryDigits) ||
+    itemDigitsUnpadded.startsWith(queryDigits)
+  ) {
+    return true;
+  }
+
+  if (queryDigits.length >= 3) {
+    const normalized = parseTime(queryDigits);
+    return normalized === item;
+  }
+
+  const queryHour = Number(queryDigits);
+
+  if (trimmed.includes(":")) {
+    const minuteQuery = trimmed.split(":")[1]?.replace(/\D/g, "") ?? "";
+    return (
+      itemHour === queryHour &&
+      (!minuteQuery || itemMinutes.startsWith(minuteQuery))
+    );
+  }
+
+  if (queryDigits.length === 1) {
+    return itemHour === queryHour || String(itemHour).startsWith(queryDigits);
+  }
+
+  return queryHour <= 23 && itemHour === queryHour;
+}
+
+function applyTime(date: Date, time: string) {
+  const parsed = parseTime(time);
+  if (!parsed) {
+    return date;
+  }
+  const hours = Number(parsed.slice(0, 2));
+  const minutes = Number(parsed.slice(3, 5));
+  const next = new Date(date);
+  next.setHours(hours, minutes, 0, 0);
+  return next;
+}
+
+export default function Particle() {
+  const [date, setDate] = useState<Date | undefined>(() => {
+    const initial = new Date();
+    initial.setHours(12, 0, 0, 0);
+    return initial;
+  });
+  const [month, setMonth] = useState<Date>(() => new Date());
+  const [time, setTime] = useState("12:00");
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleDaySelect = (selectedDate: Date | undefined) => {
+    if (!selectedDate) {
+      setDate(undefined);
+      return;
+    }
+    const next = applyTime(selectedDate, time);
+    setDate(next);
+    setMonth(next);
+  };
+
+  const handleTimeChange = (value: string) => {
+    setIsEditing(true);
+    const next = formatTimeInput(value);
+    setTime(next);
+
+    // List picks and completed HH:mm only — avoid committing mid-typing ("2:1" → 02:01)
+    if (date && /^\d{2}:\d{2}$/.test(next)) {
+      setDate(applyTime(date, next));
+    }
+  };
+
+  const handleTimeBlur = () => {
+    const normalized = parseTime(time);
+    if (normalized) {
+      setTime(normalized);
+      if (date) {
+        setDate(applyTime(date, normalized));
+      }
+    } else if (date) {
+      setTime(format(date, "HH:mm"));
+    }
+    setIsEditing(false);
+  };
+
+  const filterQuery = isEditing ? time : "";
+  const matchingTimes = times.filter((item) => filterTime(item, filterQuery));
+
+  return (
+    <div className="flex w-fit flex-col gap-2">
+      <Calendar
+        mode="single"
+        month={month}
+        onMonthChange={setMonth}
+        onSelect={handleDaySelect}
+        selected={date}
+      />
+      <Field className="w-0 min-w-full flex-row items-center gap-3">
+        <FieldLabel className="whitespace-nowrap text-xs">
+          Enter time
+        </FieldLabel>
+        <Autocomplete
+          autoHighlight
+          filter={(item, query) => filterTime(item, isEditing ? query : "")}
+          items={times}
+          onValueChange={handleTimeChange}
+          openOnInputClick
+          value={time}
+        >
+          <AutocompleteInput
+            aria-label="Enter time"
+            inputMode="numeric"
+            maxLength={5}
+            onBlur={handleTimeBlur}
+            onFocus={(event) => {
+              setIsEditing(false);
+              event.currentTarget.select();
+            }}
+            placeholder="HH:mm"
+            startAddon={<ClockIcon aria-hidden="true" />}
+          />
+          <AutocompletePopup
+            className={matchingTimes.length === 0 ? "hidden" : undefined}
+          >
+            <AutocompleteList>
+              {(item: string) => (
+                <AutocompleteItem key={item} value={item}>
+                  {item}
+                </AutocompleteItem>
+              )}
+            </AutocompleteList>
+          </AutocompletePopup>
+        </Autocomplete>
+      </Field>
+    </div>
+  );
+}
diff --git a/apps/ui/registry/registry-particles.ts b/apps/ui/registry/registry-particles.ts
index d04ef7ca9..00d65451c 100644
--- a/apps/ui/registry/registry-particles.ts
+++ b/apps/ui/registry/registry-particles.ts
@@ -1303,6 +1303,19 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/calendar"],
     type: "registry:block",
   },
+  {
+    categories: categories("calendar", "autocomplete", "field", "time"),
+    dependencies: ["date-fns", "lucide-react"],
+    description: "Calendar with 24-hour autocomplete time input",
+    files: [{ path: "particles/p-calendar-25.tsx", type: "registry:block" }],
+    name: "p-calendar-25",
+    registryDependencies: [
+      "@coss/calendar",
+      "@coss/autocomplete",
+      "@coss/field",
+    ],
+    type: "registry:block",
+  },
   {
     categories: categories("date picker", "calendar", "popover", "button"),
     dependencies: ["date-fns", "lucide-react"],

From 6422daaca032dbebe3145e96c93b64735af0ffea Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Sun, 26 Jul 2026 19:11:17 +0200
Subject: [PATCH 33/49] feat: upgrade React DayPicker to v10 (#825)

* feat: upgrade React DayPicker to v10

Migrate coss packages, examples, registry output, and documentation to the preferred scoped package while keeping the origin app on v9.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix: emove redundant transition

* docs: generalize DayPicker version reference

Co-authored-by: Cursor <cursoragent@cursor.com>

* update docs

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../settings/billing/billing-page-content.tsx |  2 +-
 .../components/app/filter-chip-date-range.tsx |  2 +-
 apps/examples/calcom/package.json             |  1 +
 apps/ui/content/docs/(root)/changelog.mdx     | 21 +++++++++++++++++++
 apps/ui/content/docs/components/calendar.mdx  | 10 ++++++---
 .../content/docs/components/date-picker.mdx   |  2 +-
 apps/ui/package.json                          |  2 +-
 apps/ui/public/r/calendar.json                |  4 ++--
 apps/ui/public/r/p-calendar-10.json           |  2 +-
 apps/ui/public/r/p-calendar-12.json           |  2 +-
 apps/ui/public/r/p-calendar-13.json           |  2 +-
 apps/ui/public/r/p-calendar-14.json           |  2 +-
 apps/ui/public/r/p-calendar-21.json           |  2 +-
 apps/ui/public/r/p-calendar-22.json           |  2 +-
 apps/ui/public/r/p-calendar-23.json           |  2 +-
 apps/ui/public/r/p-calendar-24.json           |  2 +-
 apps/ui/public/r/p-calendar-3.json            |  2 +-
 apps/ui/public/r/p-calendar-5.json            |  2 +-
 apps/ui/public/r/p-calendar-6.json            |  2 +-
 apps/ui/public/r/p-date-picker-2.json         |  2 +-
 apps/ui/public/r/p-date-picker-3.json         |  2 +-
 apps/ui/public/r/p-date-picker-9.json         |  2 +-
 apps/ui/public/r/registry.json                |  2 +-
 apps/ui/registry.json                         |  2 +-
 .../default/particles/p-calendar-10.tsx       |  2 +-
 .../default/particles/p-calendar-12.tsx       |  2 +-
 .../default/particles/p-calendar-13.tsx       |  2 +-
 .../default/particles/p-calendar-14.tsx       |  2 +-
 .../default/particles/p-calendar-21.tsx       |  2 +-
 .../default/particles/p-calendar-22.tsx       |  2 +-
 .../default/particles/p-calendar-23.tsx       |  2 +-
 .../default/particles/p-calendar-24.tsx       |  2 +-
 .../default/particles/p-calendar-3.tsx        |  2 +-
 .../default/particles/p-calendar-5.tsx        |  2 +-
 .../default/particles/p-calendar-6.tsx        |  2 +-
 .../default/particles/p-date-picker-2.tsx     |  2 +-
 .../default/particles/p-date-picker-3.tsx     |  2 +-
 .../default/particles/p-date-picker-9.tsx     |  2 +-
 apps/ui/registry/default/ui/calendar.tsx      |  6 +++---
 apps/ui/registry/registry-ui.ts               |  2 +-
 .../coss/references/primitives/calendar.md    |  2 +-
 bun.lock                                      | 15 ++++++++-----
 package.json                                  |  7 ++-----
 packages/ui/package.json                      |  1 +
 packages/ui/src/components/calendar.tsx       |  6 +++---
 45 files changed, 86 insertions(+), 57 deletions(-)

diff --git a/apps/examples/calcom/app/(settings)/settings/billing/billing-page-content.tsx b/apps/examples/calcom/app/(settings)/settings/billing/billing-page-content.tsx
index b6bc0f754..502570b44 100644
--- a/apps/examples/calcom/app/(settings)/settings/billing/billing-page-content.tsx
+++ b/apps/examples/calcom/app/(settings)/settings/billing/billing-page-content.tsx
@@ -45,10 +45,10 @@ import {
   PopoverTrigger,
 } from "@coss/ui/components/popover";
 import { SelectButton } from "@coss/ui/components/select";
+import type { DateRange } from "@daypicker/react";
 import { ExternalLinkIcon, FileTextIcon, SearchIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
-import type { DateRange } from "react-day-picker";
 import {
   AppHeader,
   AppHeaderContent,
diff --git a/apps/examples/calcom/components/app/filter-chip-date-range.tsx b/apps/examples/calcom/components/app/filter-chip-date-range.tsx
index 5a446717b..2ef4b93ef 100644
--- a/apps/examples/calcom/components/app/filter-chip-date-range.tsx
+++ b/apps/examples/calcom/components/app/filter-chip-date-range.tsx
@@ -7,10 +7,10 @@ import {
   PopoverPopup,
   PopoverTrigger,
 } from "@coss/ui/components/popover";
+import type { DateRange } from "@daypicker/react";
 import { ChevronsUpDownIcon } from "lucide-react";
 import type * as React from "react";
 import { useEffect, useRef, useState } from "react";
-import type { DateRange } from "react-day-picker";
 import { FilterChipShell } from "./filter-chip-shell";
 import type { ActiveFilter, FilterField } from "./filter-chip-types";
 
diff --git a/apps/examples/calcom/package.json b/apps/examples/calcom/package.json
index ea50eaf21..e776f33fa 100644
--- a/apps/examples/calcom/package.json
+++ b/apps/examples/calcom/package.json
@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@coss/ui": "workspace:*",
+    "@daypicker/react": "^10.0.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
diff --git a/apps/ui/content/docs/(root)/changelog.mdx b/apps/ui/content/docs/(root)/changelog.mdx
index 791298e02..f4cf8fd68 100644
--- a/apps/ui/content/docs/(root)/changelog.mdx
+++ b/apps/ui/content/docs/(root)/changelog.mdx
@@ -3,6 +3,27 @@ title: Changelog
 description: Breaking changes, migration guides, and notable updates.
 ---
 
+## July 26, 2026
+
+### React DayPicker 10
+
+coss ui now targets **`@daypicker/react@10`**. The legacy **`react-day-picker`** package name remains available for compatibility, but DayPicker recommends the scoped package for v10 and newer.
+
+If you import DayPicker APIs directly, update the dependency and imports:
+
+```diff
+- import { DayPicker, type DateRange } from "react-day-picker"
++ import { DayPicker, type DateRange } from "@daypicker/react"
+```
+
+DayPicker v10 removes APIs deprecated in v9, including legacy navigation props, aliases, component slots, and `classNames` / `styles` keys. Applications with custom calendar wrappers should follow the [DayPicker v10 migration guide](https://daypicker.dev/upgrading).
+
+**Agent migration prompt:**
+
+```text
+Upgrade React DayPicker to v10. Replace the react-day-picker dependency with @daypicker/react and update all imports, including style and locale imports. Audit custom Calendar and DatePicker wrappers for APIs removed in v10: replace deprecated navigation and focus props, aliases, component slots, and classNames/styles keys according to https://daypicker.dev/upgrading. If the app uses a non-Gregorian calendar, install the corresponding @daypicker/* add-on and update its imports. Run the typecheck and test affected date-picker screens after migrating.
+```
+
 ## June 22, 2026
 
 ### Base UI 1.6.0
diff --git a/apps/ui/content/docs/components/calendar.mdx b/apps/ui/content/docs/components/calendar.mdx
index fc4b3c9ea..8eeb7f53d 100644
--- a/apps/ui/content/docs/components/calendar.mdx
+++ b/apps/ui/content/docs/components/calendar.mdx
@@ -31,7 +31,7 @@ npx shadcn@latest add @coss/calendar
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install react-day-picker
+npm install @daypicker/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
@@ -58,7 +58,7 @@ import { Calendar } from "@/components/ui/calendar"
 
 ## API Reference
 
-This component wraps [react-day-picker](https://daypicker.dev/) with custom styling.
+This component wraps [@daypicker/react](https://daypicker.dev/) with custom styling.
 
 ### Calendar
 
@@ -77,7 +77,7 @@ A calendar component for date selection.
 | `classNames`      | `object`                                            | -          | Custom class names for calendar parts            |
 | `components`      | `object`                                            | -          | Custom components to override defaults           |
 
-For the full list of props, see the [react-day-picker documentation](https://daypicker.dev/).
+For the full list of props, see the [@daypicker/react documentation](https://daypicker.dev/).
 
 ### Customizing Cell Size
 
@@ -126,3 +126,7 @@ Calendar with a custom Select component for month and year navigation:
 Calendar with a searchable Combobox for month and year navigation:
 
 <ComponentPreview name="p-calendar-6" />
+
+## Changelog
+
+- [July 26, 2026](/ui/docs/changelog#react-daypicker-10) — Upgraded to **React DayPicker 10** and migrated from **`react-day-picker`** to **`@daypicker/react`**. Applications with custom calendar wrappers should follow the linked migration guide.
diff --git a/apps/ui/content/docs/components/date-picker.mdx b/apps/ui/content/docs/components/date-picker.mdx
index 178e12d24..71975f6db 100644
--- a/apps/ui/content/docs/components/date-picker.mdx
+++ b/apps/ui/content/docs/components/date-picker.mdx
@@ -34,7 +34,7 @@ npx shadcn@latest add @coss/calendar @coss/popover @coss/button
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install react-day-picker date-fns lucide-react @base-ui/react
+npm install @daypicker/react date-fns lucide-react @base-ui/react
 ```
 
 <Step>Copy the Calendar, Popover, and Button components to your project.</Step>
diff --git a/apps/ui/package.json b/apps/ui/package.json
index a36405055..9f5723b5a 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -2,6 +2,7 @@
   "dependencies": {
     "@base-ui/react": "1.6.0",
     "@coss/ui": "workspace:*",
+    "@daypicker/react": "10.0.1",
     "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/react": "^1.1.1",
     "@remixicon/react": "^4.7.0",
@@ -15,7 +16,6 @@
     "lucide-react": "^0.555.0",
     "next": "16.2.5",
     "react": "^19.2.6",
-    "react-day-picker": "^9.13.0",
     "react-dom": "^19.2.6",
     "shadcn": "^4.1.0",
     "tailwind-merge": "^3.4.0",
diff --git a/apps/ui/public/r/calendar.json b/apps/ui/public/r/calendar.json
index 5937f03c7..c0d67f396 100644
--- a/apps/ui/public/r/calendar.json
+++ b/apps/ui/public/r/calendar.json
@@ -2,14 +2,14 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "calendar",
   "dependencies": [
-    "react-day-picker",
+    "@daypicker/react",
     "lucide-react"
   ],
   "registryDependencies": [],
   "files": [
     {
       "path": "registry/default/ui/calendar.tsx",
-      "content": "\"use client\";\n\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsUpDownIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst buttonClassNames =\n  \"relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\";\n\nexport function Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  components: userComponents,\n  mode = \"single\",\n  ...props\n}: React.ComponentProps<typeof DayPicker>): React.ReactElement {\n  const defaultClassNames = {\n    button_next: buttonClassNames,\n    button_previous: buttonClassNames,\n    caption_label:\n      \"text-base sm:text-sm font-medium flex items-center gap-2 h-full\",\n    day: \"size-(--cell-size) text-sm py-px\",\n    day_button: cn(\n      buttonClassNames,\n      \"in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n    ),\n    dropdown: \"absolute bg-popover inset-0 opacity-0\",\n    dropdown_root:\n      \"relative has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px] border border-input shadow-xs/5 rounded-lg px-[calc(--spacing(3)-1px)] h-9 sm:h-8 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-me-1\",\n    dropdowns:\n      \"w-full flex items-center text-base sm:text-sm justify-center h-(--cell-size) gap-1.5 *:[span]:font-medium\",\n    hidden: \"invisible\",\n    month: \"w-full\",\n    month_caption:\n      \"relative mx-(--cell-size) px-1 mb-1 flex h-(--cell-size) items-center justify-center z-2\",\n    months: \"relative flex flex-col sm:flex-row gap-2\",\n    nav: \"absolute top-0 flex w-full justify-between z-1\",\n    outside:\n      \"text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground\",\n    range_end: \"range-end\",\n    range_middle: \"range-middle\",\n    range_start: \"range-start\",\n    today:\n      \"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors\",\n    week_number:\n      \"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72\",\n    weekday:\n      \"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72\",\n  };\n  const mergedClassNames: typeof defaultClassNames = Object.keys(\n    defaultClassNames,\n  ).reduce(\n    (acc, key) => {\n      const userClass = classNames?.[key as keyof typeof classNames];\n      const baseClass =\n        defaultClassNames[key as keyof typeof defaultClassNames];\n\n      acc[key as keyof typeof defaultClassNames] = userClass\n        ? cn(baseClass, userClass)\n        : baseClass;\n\n      return acc;\n    },\n    { ...defaultClassNames } as typeof defaultClassNames,\n  );\n\n  const defaultComponents = {\n    Chevron: ({\n      className,\n      orientation,\n      ...props\n    }: {\n      className?: string;\n      orientation?: \"left\" | \"right\" | \"up\" | \"down\";\n    }): React.ReactElement => {\n      if (orientation === \"left\") {\n        return (\n          <ChevronLeftIcon\n            className={cn(className, \"rtl:rotate-180\")}\n            {...props}\n            aria-hidden=\"true\"\n          />\n        );\n      }\n\n      if (orientation === \"right\") {\n        return (\n          <ChevronRightIcon\n            className={cn(className, \"rtl:rotate-180\")}\n            {...props}\n            aria-hidden=\"true\"\n          />\n        );\n      }\n\n      return (\n        <ChevronsUpDownIcon\n          className={className}\n          {...props}\n          aria-hidden=\"true\"\n        />\n      );\n    },\n  };\n\n  const mergedComponents = {\n    ...defaultComponents,\n    ...userComponents,\n  };\n\n  const dayPickerProps = {\n    className: cn(\n      \"w-fit [--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]\",\n      className,\n    ),\n    classNames: mergedClassNames,\n    components: mergedComponents,\n    \"data-slot\": \"calendar\",\n    formatters: {\n      formatMonthDropdown: (date: Date) =>\n        date.toLocaleString(\"default\", { month: \"short\" }),\n    } as React.ComponentProps<typeof DayPicker>[\"formatters\"],\n    mode,\n    showOutsideDays,\n    ...props,\n  };\n\n  return (\n    <DayPicker\n      {...(dayPickerProps as React.ComponentProps<typeof DayPicker>)}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { DayPicker } from \"@daypicker/react\";\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsUpDownIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst buttonClassNames =\n  \"relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\";\n\nexport function Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  components: userComponents,\n  mode = \"single\",\n  ...props\n}: React.ComponentProps<typeof DayPicker>): React.ReactElement {\n  const defaultClassNames = {\n    button_next: buttonClassNames,\n    button_previous: buttonClassNames,\n    caption_label:\n      \"text-base sm:text-sm font-medium flex items-center gap-2 h-full\",\n    day: \"size-(--cell-size) text-sm py-px\",\n    day_button: cn(\n      buttonClassNames,\n      \"in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n    ),\n    dropdown: \"absolute bg-popover inset-0 opacity-0\",\n    dropdown_root:\n      \"relative has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px] border border-input shadow-xs/5 rounded-lg px-[calc(--spacing(3)-1px)] h-9 sm:h-8 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-me-1\",\n    dropdowns:\n      \"w-full flex items-center text-base sm:text-sm justify-center h-(--cell-size) gap-1.5 *:[span]:font-medium\",\n    hidden: \"invisible\",\n    month: \"w-full\",\n    month_caption:\n      \"relative mx-(--cell-size) px-1 mb-1 flex h-(--cell-size) items-center justify-center z-2\",\n    months: \"relative flex flex-col sm:flex-row gap-2\",\n    nav: \"absolute top-0 flex w-full justify-between z-1\",\n    outside:\n      \"text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground\",\n    range_end: \"range-end\",\n    range_middle: \"range-middle\",\n    range_start: \"range-start\",\n    today:\n      \"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30\",\n    week_number:\n      \"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72\",\n    weekday:\n      \"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72\",\n  };\n  const mergedClassNames: typeof defaultClassNames = Object.keys(\n    defaultClassNames,\n  ).reduce(\n    (acc, key) => {\n      const userClass = classNames?.[key as keyof typeof classNames];\n      const baseClass =\n        defaultClassNames[key as keyof typeof defaultClassNames];\n\n      acc[key as keyof typeof defaultClassNames] = userClass\n        ? cn(baseClass, userClass)\n        : baseClass;\n\n      return acc;\n    },\n    { ...defaultClassNames } as typeof defaultClassNames,\n  );\n\n  const defaultComponents = {\n    Chevron: ({\n      className,\n      orientation,\n      ...props\n    }: {\n      className?: string;\n      orientation?: \"left\" | \"right\" | \"up\" | \"down\";\n    }): React.ReactElement => {\n      if (orientation === \"left\") {\n        return (\n          <ChevronLeftIcon\n            className={cn(className, \"rtl:rotate-180\")}\n            {...props}\n            aria-hidden=\"true\"\n          />\n        );\n      }\n\n      if (orientation === \"right\") {\n        return (\n          <ChevronRightIcon\n            className={cn(className, \"rtl:rotate-180\")}\n            {...props}\n            aria-hidden=\"true\"\n          />\n        );\n      }\n\n      return (\n        <ChevronsUpDownIcon\n          className={className}\n          {...props}\n          aria-hidden=\"true\"\n        />\n      );\n    },\n  };\n\n  const mergedComponents = {\n    ...defaultComponents,\n    ...userComponents,\n  };\n\n  const dayPickerProps = {\n    className: cn(\n      \"w-fit [--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]\",\n      className,\n    ),\n    classNames: mergedClassNames,\n    components: mergedComponents,\n    \"data-slot\": \"calendar\",\n    formatters: {\n      formatMonthDropdown: (date: Date) =>\n        date.toLocaleString(\"default\", { month: \"short\" }),\n    } as React.ComponentProps<typeof DayPicker>[\"formatters\"],\n    mode,\n    showOutsideDays,\n    ...props,\n  };\n\n  return (\n    <DayPicker\n      {...(dayPickerProps as React.ComponentProps<typeof DayPicker>)}\n    />\n  );\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-10.json b/apps/ui/public/r/p-calendar-10.json
index 8d501be56..427307ab9 100644
--- a/apps/ui/public/r/p-calendar-10.json
+++ b/apps/ui/public/r/p-calendar-10.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-10.tsx",
-      "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 3),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        day: \"relative before:absolute before:inset-y-px before:inset-x-0 [&.range-start:not(.range-end):before]:bg-linear-to-end before:from-transparent before:from-50% before:to-accent before:to-50% [&.range-end:not(.range-start):before]:bg-linear-to-start\",\n        day_button:\n          \"rounded-full group-[.range-start:not(.range-end)]:rounded-e-full group-[.range-end:not(.range-start)]:rounded-s-full\",\n      }}\n      mode=\"range\"\n      onSelect={setDate}\n      selected={date}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 3),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        day: \"relative before:absolute before:inset-y-px before:inset-x-0 [&.range-start:not(.range-end):before]:bg-linear-to-end before:from-transparent before:from-50% before:to-accent before:to-50% [&.range-end:not(.range-start):before]:bg-linear-to-start\",\n        day_button:\n          \"rounded-full group-[.range-start:not(.range-end)]:rounded-e-full group-[.range-end:not(.range-start)]:rounded-s-full\",\n      }}\n      mode=\"range\"\n      onSelect={setDate}\n      selected={date}\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-12.json b/apps/ui/public/r/p-calendar-12.json
index 25416216e..19f86dc01 100644
--- a/apps/ui/public/r/p-calendar-12.json
+++ b/apps/ui/public/r/p-calendar-12.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-12.tsx",
-      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { WeekNumberProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  return (\n    <Calendar\n      components={{\n        WeekNumber: ({ week, ...props }: WeekNumberProps) => {\n          return (\n            <th {...props}>\n              <span className=\"inline-flex size-(--cell-size) items-center justify-center\">\n                {week.weekNumber}\n              </span>\n            </th>\n          );\n        },\n      }}\n      fixedWeeks\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      showWeekNumber\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { WeekNumberProps } from \"@daypicker/react\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  return (\n    <Calendar\n      components={{\n        WeekNumber: ({ week, ...props }: WeekNumberProps) => {\n          return (\n            <th {...props}>\n              <span className=\"inline-flex size-(--cell-size) items-center justify-center\">\n                {week.weekNumber}\n              </span>\n            </th>\n          );\n        },\n      }}\n      fixedWeeks\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      showWeekNumber\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-13.json b/apps/ui/public/r/p-calendar-13.json
index 922c71240..17ae976a5 100644
--- a/apps/ui/public/r/p-calendar-13.json
+++ b/apps/ui/public/r/p-calendar-13.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-13.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction YearDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown-years\"\n      classNames={{\n        dropdowns: \"*:flex-1 *:[span]:text-center\",\n      }}\n      components={{ Dropdown: YearDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DropdownProps } from \"@daypicker/react\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction YearDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown-years\"\n      classNames={{\n        dropdowns: \"*:flex-1 *:[span]:text-center\",\n      }}\n      components={{ Dropdown: YearDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-14.json b/apps/ui/public/r/p-calendar-14.json
index 6bd969c41..15c94c626 100644
--- a/apps/ui/public/r/p-calendar-14.json
+++ b/apps/ui/public/r/p-calendar-14.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-14.tsx",
-      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { DropdownNavProps, DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  const handleCalendarChange = (\n    _value: string | number,\n    _e: React.ChangeEventHandler<HTMLSelectElement>,\n  ) => {\n    const _event = {\n      target: {\n        value: String(_value),\n      },\n    } as React.ChangeEvent<HTMLSelectElement>;\n    _e(_event);\n  };\n\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      classNames={{\n        month_caption: \"mx-0\",\n      }}\n      components={{\n        Dropdown: (props: DropdownProps) => {\n          const items =\n            props.options?.map((option) => ({\n              label: option.label,\n              value: String(option.value),\n            })) ?? [];\n\n          return (\n            <Select\n              items={items}\n              onValueChange={(value) => {\n                if (props.onChange && value !== null) {\n                  handleCalendarChange(value, props.onChange);\n                }\n              }}\n              value={String(props.value)}\n            >\n              <SelectTrigger className=\"min-w-none\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectPopup>\n            </Select>\n          );\n        },\n        DropdownNav: (props: DropdownNavProps) => {\n          return (\n            <div className=\"flex w-full items-center gap-2\">\n              {props.children}\n            </div>\n          );\n        },\n      }}\n      defaultMonth={new Date()}\n      hideNavigation\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1980, 6)}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DropdownNavProps, DropdownProps } from \"@daypicker/react\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  const handleCalendarChange = (\n    _value: string | number,\n    _e: React.ChangeEventHandler<HTMLSelectElement>,\n  ) => {\n    const _event = {\n      target: {\n        value: String(_value),\n      },\n    } as React.ChangeEvent<HTMLSelectElement>;\n    _e(_event);\n  };\n\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      classNames={{\n        month_caption: \"mx-0\",\n      }}\n      components={{\n        Dropdown: (props: DropdownProps) => {\n          const items =\n            props.options?.map((option) => ({\n              label: option.label,\n              value: String(option.value),\n            })) ?? [];\n\n          return (\n            <Select\n              items={items}\n              onValueChange={(value) => {\n                if (props.onChange && value !== null) {\n                  handleCalendarChange(value, props.onChange);\n                }\n              }}\n              value={String(props.value)}\n            >\n              <SelectTrigger className=\"min-w-none\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectPopup>\n            </Select>\n          );\n        },\n        DropdownNav: (props: DropdownNavProps) => {\n          return (\n            <div className=\"flex w-full items-center gap-2\">\n              {props.children}\n            </div>\n          );\n        },\n      }}\n      defaultMonth={new Date()}\n      hideNavigation\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1980, 6)}\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-21.json b/apps/ui/public/r/p-calendar-21.json
index 53843db4f..b4edd3563 100644
--- a/apps/ui/public/r/p-calendar-21.json
+++ b/apps/ui/public/r/p-calendar-21.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-21.tsx",
-      "content": "\"use client\";\n\nimport {\n  endOfMonth,\n  endOfYear,\n  startOfMonth,\n  startOfYear,\n  subDays,\n  subMonths,\n  subYears,\n} from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const yesterday = {\n    from: subDays(today, 1),\n    to: subDays(today, 1),\n  };\n  const last7Days = {\n    from: subDays(today, 6),\n    to: today,\n  };\n  const last30Days = {\n    from: subDays(today, 29),\n    to: today,\n  };\n  const monthToDate = {\n    from: startOfMonth(today),\n    to: today,\n  };\n  const lastMonth = {\n    from: startOfMonth(subMonths(today, 1)),\n    to: endOfMonth(subMonths(today, 1)),\n  };\n  const yearToDate = {\n    from: startOfYear(today),\n    to: today,\n  };\n  const lastYear = {\n    from: startOfYear(subYears(today, 1)),\n    to: endOfYear(subYears(today, 1)),\n  };\n  const [month, setMonth] = useState(today);\n  const [date, setDate] = useState<DateRange | undefined>(last7Days);\n\n  return (\n    <div className=\"flex max-sm:flex-col\">\n      <div className=\"relative py-1 ps-1 max-sm:order-1 max-sm:border-t\">\n        <div className=\"flex h-full flex-col sm:border-e sm:pe-3\">\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate({\n                from: today,\n                to: today,\n              });\n              setMonth(today);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Today\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(yesterday);\n              setMonth(yesterday.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Yesterday\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(last7Days);\n              setMonth(last7Days.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last 7 days\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(last30Days);\n              setMonth(last30Days.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last 30 days\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(monthToDate);\n              setMonth(monthToDate.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Month to date\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(lastMonth);\n              setMonth(lastMonth.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last month\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(yearToDate);\n              setMonth(yearToDate.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Year to date\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(lastYear);\n              setMonth(lastYear.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last year\n          </Button>\n        </div>\n      </div>\n      <Calendar\n        className=\"max-sm:pb-3 sm:ps-5\"\n        disabled={[{ after: today }]}\n        mode=\"range\"\n        month={month}\n        onMonthChange={setMonth}\n        onSelect={(newDate) => {\n          if (newDate) {\n            setDate(newDate);\n          }\n        }}\n        selected={date}\n      />\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport {\n  endOfMonth,\n  endOfYear,\n  startOfMonth,\n  startOfYear,\n  subDays,\n  subMonths,\n  subYears,\n} from \"date-fns\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const yesterday = {\n    from: subDays(today, 1),\n    to: subDays(today, 1),\n  };\n  const last7Days = {\n    from: subDays(today, 6),\n    to: today,\n  };\n  const last30Days = {\n    from: subDays(today, 29),\n    to: today,\n  };\n  const monthToDate = {\n    from: startOfMonth(today),\n    to: today,\n  };\n  const lastMonth = {\n    from: startOfMonth(subMonths(today, 1)),\n    to: endOfMonth(subMonths(today, 1)),\n  };\n  const yearToDate = {\n    from: startOfYear(today),\n    to: today,\n  };\n  const lastYear = {\n    from: startOfYear(subYears(today, 1)),\n    to: endOfYear(subYears(today, 1)),\n  };\n  const [month, setMonth] = useState(today);\n  const [date, setDate] = useState<DateRange | undefined>(last7Days);\n\n  return (\n    <div className=\"flex max-sm:flex-col\">\n      <div className=\"relative py-1 ps-1 max-sm:order-1 max-sm:border-t\">\n        <div className=\"flex h-full flex-col sm:border-e sm:pe-3\">\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate({\n                from: today,\n                to: today,\n              });\n              setMonth(today);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Today\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(yesterday);\n              setMonth(yesterday.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Yesterday\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(last7Days);\n              setMonth(last7Days.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last 7 days\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(last30Days);\n              setMonth(last30Days.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last 30 days\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(monthToDate);\n              setMonth(monthToDate.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Month to date\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(lastMonth);\n              setMonth(lastMonth.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last month\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(yearToDate);\n              setMonth(yearToDate.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Year to date\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(lastYear);\n              setMonth(lastYear.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last year\n          </Button>\n        </div>\n      </div>\n      <Calendar\n        className=\"max-sm:pb-3 sm:ps-5\"\n        disabled={[{ after: today }]}\n        mode=\"range\"\n        month={month}\n        onMonthChange={setMonth}\n        onSelect={(newDate) => {\n          if (newDate) {\n            setDate(newDate);\n          }\n        }}\n        selected={date}\n      />\n    </div>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-22.json b/apps/ui/public/r/p-calendar-22.json
index 4d0cc7473..29b5166b1 100644
--- a/apps/ui/public/r/p-calendar-22.json
+++ b/apps/ui/public/r/p-calendar-22.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-22.tsx",
-      "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 25),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-sm:before:inset-x-2 max-sm:before:h-px max-sm:before:-top-2 sm:before:inset-y-2 sm:before:w-px before:bg-border sm:before:-left-4\",\n        months: \"gap-8\",\n      }}\n      mode=\"range\"\n      numberOfMonths={2}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 25),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-sm:before:inset-x-2 max-sm:before:h-px max-sm:before:-top-2 sm:before:inset-y-2 sm:before:w-px before:bg-border sm:before:-left-4\",\n        months: \"gap-8\",\n      }}\n      mode=\"range\"\n      numberOfMonths={2}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-23.json b/apps/ui/public/r/p-calendar-23.json
index f4be09139..518fe6250 100644
--- a/apps/ui/public/r/p-calendar-23.json
+++ b/apps/ui/public/r/p-calendar-23.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-23.tsx",
-      "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 48),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n        months: \"sm:flex-col md:flex-row gap-8\",\n      }}\n      mode=\"range\"\n      numberOfMonths={3}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 48),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n        months: \"sm:flex-col md:flex-row gap-8\",\n      }}\n      mode=\"range\"\n      numberOfMonths={3}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-24.json b/apps/ui/public/r/p-calendar-24.json
index 99c4b2944..e3e11d5b5 100644
--- a/apps/ui/public/r/p-calendar-24.json
+++ b/apps/ui/public/r/p-calendar-24.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-24.tsx",
-      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport type { DayButtonProps } from \"react-day-picker\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nconst GOOD_PRICE_THRESHOLD = 100;\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<Date | undefined>(today);\n\n  const [mockPriceData, setMockPriceData] = useState<Record<string, number>>(\n    {},\n  );\n  useEffect(() => {\n    const generateMockPriceData = () => {\n      const data: Record<string, number> = {};\n      const todayDate = new Date();\n\n      for (let i = 0; i < 180; i++) {\n        const date = new Date(todayDate);\n        date.setDate(todayDate.getDate() + i);\n        const dateKey = format(date, \"yyyy-MM-dd\");\n        const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;\n        data[dateKey] = randomPrice;\n      }\n      return data;\n    };\n    setMockPriceData(generateMockPriceData());\n  }, []);\n\n  const isDateDisabled = (date: Date) => {\n    return !mockPriceData[format(date, \"yyyy-MM-dd\")];\n  };\n\n  return (\n    <Calendar\n      classNames={{\n        day_button: \"size-12\",\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n        months: \"sm:flex-col md:flex-row gap-8\",\n        today: \"*:after:hidden\",\n        weekday: \"w-12\",\n      }}\n      components={{\n        DayButton: (props: DayButtonProps) => (\n          <DayButton {...props} prices={mockPriceData} />\n        ),\n      }}\n      disabled={isDateDisabled}\n      mode=\"single\"\n      numberOfMonths={2}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\n  const { day, prices, modifiers: _modifiers, ...buttonProps } = props;\n  const price = prices[format(day.date, \"yyyy-MM-dd\")];\n  const isGoodPrice = price !== undefined && price < GOOD_PRICE_THRESHOLD;\n\n  return (\n    <button {...buttonProps}>\n      <span className=\"flex flex-col\">\n        {props.children}\n        {price && (\n          <span\n            className={cn(\n              \"font-normal text-xs\",\n              isGoodPrice\n                ? \"text-emerald-500\"\n                : \"in-data-selected:text-primary-foreground/70 text-muted-foreground\",\n            )}\n          >\n            ${price}\n          </span>\n        )}\n      </span>\n    </button>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DayButtonProps } from \"@daypicker/react\";\nimport { format } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nconst GOOD_PRICE_THRESHOLD = 100;\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<Date | undefined>(today);\n\n  const [mockPriceData, setMockPriceData] = useState<Record<string, number>>(\n    {},\n  );\n  useEffect(() => {\n    const generateMockPriceData = () => {\n      const data: Record<string, number> = {};\n      const todayDate = new Date();\n\n      for (let i = 0; i < 180; i++) {\n        const date = new Date(todayDate);\n        date.setDate(todayDate.getDate() + i);\n        const dateKey = format(date, \"yyyy-MM-dd\");\n        const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;\n        data[dateKey] = randomPrice;\n      }\n      return data;\n    };\n    setMockPriceData(generateMockPriceData());\n  }, []);\n\n  const isDateDisabled = (date: Date) => {\n    return !mockPriceData[format(date, \"yyyy-MM-dd\")];\n  };\n\n  return (\n    <Calendar\n      classNames={{\n        day_button: \"size-12\",\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n        months: \"sm:flex-col md:flex-row gap-8\",\n        today: \"*:after:hidden\",\n        weekday: \"w-12\",\n      }}\n      components={{\n        DayButton: (props: DayButtonProps) => (\n          <DayButton {...props} prices={mockPriceData} />\n        ),\n      }}\n      disabled={isDateDisabled}\n      mode=\"single\"\n      numberOfMonths={2}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\n  const { day, prices, modifiers: _modifiers, ...buttonProps } = props;\n  const price = prices[format(day.date, \"yyyy-MM-dd\")];\n  const isGoodPrice = price !== undefined && price < GOOD_PRICE_THRESHOLD;\n\n  return (\n    <button {...buttonProps}>\n      <span className=\"flex flex-col\">\n        {props.children}\n        {price && (\n          <span\n            className={cn(\n              \"font-normal text-xs\",\n              isGoodPrice\n                ? \"text-emerald-500\"\n                : \"in-data-selected:text-primary-foreground/70 text-muted-foreground\",\n            )}\n          >\n            ${price}\n          </span>\n        )}\n      </span>\n    </button>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-3.json b/apps/ui/public/r/p-calendar-3.json
index 02e383e1d..436917ab0 100644
--- a/apps/ui/public/r/p-calendar-3.json
+++ b/apps/ui/public/r/p-calendar-3.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-3.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(),\n    to: new Date(new Date().setDate(new Date().getDate() + 7)),\n  });\n\n  return <Calendar mode=\"range\" onSelect={setRange} selected={range} />;\n}\n",
+      "content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(),\n    to: new Date(new Date().setDate(new Date().getDate() + 7)),\n  });\n\n  return <Calendar mode=\"range\" onSelect={setRange} selected={range} />;\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-5.json b/apps/ui/public/r/p-calendar-5.json
index a4d90371b..f8c74f531 100644
--- a/apps/ui/public/r/p-calendar-5.json
+++ b/apps/ui/public/r/p-calendar-5.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-5.tsx",
-      "content": "\"use client\";\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const handleValueChange = (newValue: string | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  const items =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  return (\n    <Select\n      aria-label={ariaLabel}\n      items={items}\n      onValueChange={handleValueChange}\n      value={value?.toString()}\n    >\n      <SelectTrigger className=\"min-w-none\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map((item) => (\n          <SelectItem\n            disabled={item.disabled}\n            key={item.value}\n            value={item.value}\n          >\n            {item.label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      components={{ Dropdown: CalendarDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n",
+      "content": "\"use client\";\nimport type { DropdownProps } from \"@daypicker/react\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const handleValueChange = (newValue: string | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  const items =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  return (\n    <Select\n      aria-label={ariaLabel}\n      items={items}\n      onValueChange={handleValueChange}\n      value={value?.toString()}\n    >\n      <SelectTrigger className=\"min-w-none\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map((item) => (\n          <SelectItem\n            disabled={item.disabled}\n            key={item.value}\n            value={item.value}\n          >\n            {item.label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      components={{ Dropdown: CalendarDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-6.json b/apps/ui/public/r/p-calendar-6.json
index 5b4a745a6..abad21a9a 100644
--- a/apps/ui/public/r/p-calendar-6.json
+++ b/apps/ui/public/r/p-calendar-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-6.tsx",
-      "content": "\"use client\";\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      components={{ Dropdown: CalendarDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n",
+      "content": "\"use client\";\nimport type { DropdownProps } from \"@daypicker/react\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      components={{ Dropdown: CalendarDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-date-picker-2.json b/apps/ui/public/r/p-date-picker-2.json
index 7ce068a57..fc2d5a8e8 100644
--- a/apps/ui/public/r/p-date-picker-2.json
+++ b/apps/ui/public/r/p-date-picker-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-date-picker-2.tsx",
-      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<DateRange | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon aria-hidden=\"true\" />\n        {date?.from ? (\n          date.to ? (\n            <>\n              {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n            </>\n          ) : (\n            format(date.from, \"LLL dd, y\")\n          )\n        ) : (\n          <span>Pick a date range</span>\n        )}\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar\n          defaultMonth={date?.from}\n          mode=\"range\"\n          onSelect={setDate}\n          selected={date}\n        />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<DateRange | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon aria-hidden=\"true\" />\n        {date?.from ? (\n          date.to ? (\n            <>\n              {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n            </>\n          ) : (\n            format(date.from, \"LLL dd, y\")\n          )\n        ) : (\n          <span>Pick a date range</span>\n        )}\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar\n          defaultMonth={date?.from}\n          mode=\"range\"\n          onSelect={setDate}\n          selected={date}\n        />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-date-picker-3.json b/apps/ui/public/r/p-date-picker-3.json
index 984c014b1..c395832a2 100644
--- a/apps/ui/public/r/p-date-picker-3.json
+++ b/apps/ui/public/r/p-date-picker-3.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-date-picker-3.tsx",
-      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>();\n  const id = React.useId();\n  return (\n    <Field>\n      <FieldLabel htmlFor={id}>Start date</FieldLabel>\n      <Popover>\n        <PopoverTrigger\n          id={id}\n          render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n        >\n          <CalendarIcon aria-hidden=\"true\" />\n          {date ? format(date, \"PPP\") : \"Pick a date\"}\n        </PopoverTrigger>\n        <PopoverPopup>\n          <Calendar\n            captionLayout=\"dropdown\"\n            components={{ Dropdown: CalendarDropdown }}\n            defaultMonth={date}\n            endMonth={new Date()}\n            mode=\"single\"\n            onSelect={setDate}\n            selected={date}\n            startMonth={new Date(1900, 0)}\n          />\n        </PopoverPopup>\n      </Popover>\n    </Field>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DropdownProps } from \"@daypicker/react\";\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>();\n  const id = React.useId();\n  return (\n    <Field>\n      <FieldLabel htmlFor={id}>Start date</FieldLabel>\n      <Popover>\n        <PopoverTrigger\n          id={id}\n          render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n        >\n          <CalendarIcon aria-hidden=\"true\" />\n          {date ? format(date, \"PPP\") : \"Pick a date\"}\n        </PopoverTrigger>\n        <PopoverPopup>\n          <Calendar\n            captionLayout=\"dropdown\"\n            components={{ Dropdown: CalendarDropdown }}\n            defaultMonth={date}\n            endMonth={new Date()}\n            mode=\"single\"\n            onSelect={setDate}\n            selected={date}\n            startMonth={new Date(1900, 0)}\n          />\n        </PopoverPopup>\n      </Popover>\n    </Field>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-date-picker-9.json b/apps/ui/public/r/p-date-picker-9.json
index a4e06b04a..edfc3a96a 100644
--- a/apps/ui/public/r/p-date-picker-9.json
+++ b/apps/ui/public/r/p-date-picker-9.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-date-picker-9.tsx",
-      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<DateRange | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon aria-hidden=\"true\" />\n        {date?.from ? (\n          date.to ? (\n            <>\n              {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n            </>\n          ) : (\n            format(date.from, \"LLL dd, y\")\n          )\n        ) : (\n          <span>Pick a date range</span>\n        )}\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar\n          defaultMonth={date?.from}\n          mode=\"range\"\n          numberOfMonths={2}\n          onSelect={setDate}\n          selected={date}\n        />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<DateRange | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon aria-hidden=\"true\" />\n        {date?.from ? (\n          date.to ? (\n            <>\n              {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n            </>\n          ) : (\n            format(date.from, \"LLL dd, y\")\n          )\n        ) : (\n          <span>Pick a date range</span>\n        )}\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar\n          defaultMonth={date?.from}\n          mode=\"range\"\n          numberOfMonths={2}\n          onSelect={setDate}\n          selected={date}\n        />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index c49a5a276..a9ccab9d9 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -219,7 +219,7 @@
     },
     {
       "dependencies": [
-        "react-day-picker",
+        "@daypicker/react",
         "lucide-react"
       ],
       "files": [
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index c49a5a276..a9ccab9d9 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -219,7 +219,7 @@
     },
     {
       "dependencies": [
-        "react-day-picker",
+        "@daypicker/react",
         "lucide-react"
       ],
       "files": [
diff --git a/apps/ui/registry/default/particles/p-calendar-10.tsx b/apps/ui/registry/default/particles/p-calendar-10.tsx
index 3759f1887..0d34879e6 100644
--- a/apps/ui/registry/default/particles/p-calendar-10.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-10.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import type { DateRange } from "@daypicker/react";
 import { addDays } from "date-fns";
 import { useState } from "react";
-import type { DateRange } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 
 export default function Particle() {
diff --git a/apps/ui/registry/default/particles/p-calendar-12.tsx b/apps/ui/registry/default/particles/p-calendar-12.tsx
index cbf4dcbf8..c8933b9a3 100644
--- a/apps/ui/registry/default/particles/p-calendar-12.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-12.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import type { WeekNumberProps } from "@daypicker/react";
 import { useState } from "react";
-import type { WeekNumberProps } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 
 export default function Particle() {
diff --git a/apps/ui/registry/default/particles/p-calendar-13.tsx b/apps/ui/registry/default/particles/p-calendar-13.tsx
index c7fdb9d66..22acf5a34 100644
--- a/apps/ui/registry/default/particles/p-calendar-13.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-13.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import type { DropdownProps } from "@daypicker/react";
 import * as React from "react";
-import type { DropdownProps } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 import {
   Combobox,
diff --git a/apps/ui/registry/default/particles/p-calendar-14.tsx b/apps/ui/registry/default/particles/p-calendar-14.tsx
index 6952b8288..e5519854c 100644
--- a/apps/ui/registry/default/particles/p-calendar-14.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-14.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import type { DropdownNavProps, DropdownProps } from "@daypicker/react";
 import { useState } from "react";
-import type { DropdownNavProps, DropdownProps } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 import {
   Select,
diff --git a/apps/ui/registry/default/particles/p-calendar-21.tsx b/apps/ui/registry/default/particles/p-calendar-21.tsx
index e721adb63..cfc803210 100644
--- a/apps/ui/registry/default/particles/p-calendar-21.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-21.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import type { DateRange } from "@daypicker/react";
 import {
   endOfMonth,
   endOfYear,
@@ -10,7 +11,6 @@ import {
   subYears,
 } from "date-fns";
 import { useState } from "react";
-import type { DateRange } from "react-day-picker";
 import { Button } from "@/registry/default/ui/button";
 import { Calendar } from "@/registry/default/ui/calendar";
 
diff --git a/apps/ui/registry/default/particles/p-calendar-22.tsx b/apps/ui/registry/default/particles/p-calendar-22.tsx
index 5126e3e69..b097fec34 100644
--- a/apps/ui/registry/default/particles/p-calendar-22.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-22.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import type { DateRange } from "@daypicker/react";
 import { addDays } from "date-fns";
 import { useState } from "react";
-import type { DateRange } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 
 export default function Particle() {
diff --git a/apps/ui/registry/default/particles/p-calendar-23.tsx b/apps/ui/registry/default/particles/p-calendar-23.tsx
index aaed5d606..ea2c35db2 100644
--- a/apps/ui/registry/default/particles/p-calendar-23.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-23.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import type { DateRange } from "@daypicker/react";
 import { addDays } from "date-fns";
 import { useState } from "react";
-import type { DateRange } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 
 export default function Particle() {
diff --git a/apps/ui/registry/default/particles/p-calendar-24.tsx b/apps/ui/registry/default/particles/p-calendar-24.tsx
index cd0dd5b5c..a568347c9 100644
--- a/apps/ui/registry/default/particles/p-calendar-24.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-24.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import type { DayButtonProps } from "@daypicker/react";
 import { format } from "date-fns";
 import { useEffect, useState } from "react";
-import type { DayButtonProps } from "react-day-picker";
 import { cn } from "@/registry/default/lib/utils";
 import { Calendar } from "@/registry/default/ui/calendar";
 
diff --git a/apps/ui/registry/default/particles/p-calendar-3.tsx b/apps/ui/registry/default/particles/p-calendar-3.tsx
index d7a048f2c..3e01dbd8a 100644
--- a/apps/ui/registry/default/particles/p-calendar-3.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-3.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import type { DateRange } from "@daypicker/react";
 import * as React from "react";
-import type { DateRange } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 
 export default function Particle() {
diff --git a/apps/ui/registry/default/particles/p-calendar-5.tsx b/apps/ui/registry/default/particles/p-calendar-5.tsx
index ab9a50118..f74602800 100644
--- a/apps/ui/registry/default/particles/p-calendar-5.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-5.tsx
@@ -1,6 +1,6 @@
 "use client";
+import type { DropdownProps } from "@daypicker/react";
 import * as React from "react";
-import type { DropdownProps } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 import {
   Select,
diff --git a/apps/ui/registry/default/particles/p-calendar-6.tsx b/apps/ui/registry/default/particles/p-calendar-6.tsx
index cb484d34c..c9baf8352 100644
--- a/apps/ui/registry/default/particles/p-calendar-6.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-6.tsx
@@ -1,6 +1,6 @@
 "use client";
+import type { DropdownProps } from "@daypicker/react";
 import * as React from "react";
-import type { DropdownProps } from "react-day-picker";
 import { Calendar } from "@/registry/default/ui/calendar";
 import {
   Combobox,
diff --git a/apps/ui/registry/default/particles/p-date-picker-2.tsx b/apps/ui/registry/default/particles/p-date-picker-2.tsx
index 59c94344e..fe432351f 100644
--- a/apps/ui/registry/default/particles/p-date-picker-2.tsx
+++ b/apps/ui/registry/default/particles/p-date-picker-2.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import type { DateRange } from "@daypicker/react";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { useState } from "react";
-import type { DateRange } from "react-day-picker";
 import { Button } from "@/registry/default/ui/button";
 import { Calendar } from "@/registry/default/ui/calendar";
 import {
diff --git a/apps/ui/registry/default/particles/p-date-picker-3.tsx b/apps/ui/registry/default/particles/p-date-picker-3.tsx
index 9acca1be2..ce381b43e 100644
--- a/apps/ui/registry/default/particles/p-date-picker-3.tsx
+++ b/apps/ui/registry/default/particles/p-date-picker-3.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import type { DropdownProps } from "@daypicker/react";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import * as React from "react";
-import type { DropdownProps } from "react-day-picker";
 import { Button } from "@/registry/default/ui/button";
 import { Calendar } from "@/registry/default/ui/calendar";
 import {
diff --git a/apps/ui/registry/default/particles/p-date-picker-9.tsx b/apps/ui/registry/default/particles/p-date-picker-9.tsx
index 5b6d86206..e1872ef1f 100644
--- a/apps/ui/registry/default/particles/p-date-picker-9.tsx
+++ b/apps/ui/registry/default/particles/p-date-picker-9.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import type { DateRange } from "@daypicker/react";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { useState } from "react";
-import type { DateRange } from "react-day-picker";
 import { Button } from "@/registry/default/ui/button";
 import { Calendar } from "@/registry/default/ui/calendar";
 import {
diff --git a/apps/ui/registry/default/ui/calendar.tsx b/apps/ui/registry/default/ui/calendar.tsx
index aca7b0b81..6eea1a602 100644
--- a/apps/ui/registry/default/ui/calendar.tsx
+++ b/apps/ui/registry/default/ui/calendar.tsx
@@ -1,12 +1,12 @@
 "use client";
 
+import { DayPicker } from "@daypicker/react";
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
   ChevronsUpDownIcon,
 } from "lucide-react";
 import type * as React from "react";
-import { DayPicker } from "react-day-picker";
 import { cn } from "@/registry/default/lib/utils";
 
 const buttonClassNames =
@@ -28,7 +28,7 @@ export function Calendar({
     day: "size-(--cell-size) text-sm py-px",
     day_button: cn(
       buttonClassNames,
-      "in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
+      "in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
     ),
     dropdown: "absolute bg-popover inset-0 opacity-0",
     dropdown_root:
@@ -47,7 +47,7 @@ export function Calendar({
     range_middle: "range-middle",
     range_start: "range-start",
     today:
-      "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors",
+      "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30",
     week_number:
       "size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72",
     weekday:
diff --git a/apps/ui/registry/registry-ui.ts b/apps/ui/registry/registry-ui.ts
index 6c3d1bd63..d144a68e9 100644
--- a/apps/ui/registry/registry-ui.ts
+++ b/apps/ui/registry/registry-ui.ts
@@ -199,7 +199,7 @@ export const ui: Registry["items"] = [
     type: "registry:ui",
   },
   {
-    dependencies: ["react-day-picker", "lucide-react"],
+    dependencies: ["@daypicker/react", "lucide-react"],
     files: [
       {
         path: "ui/calendar.tsx",
diff --git a/apps/ui/skills/coss/references/primitives/calendar.md b/apps/ui/skills/coss/references/primitives/calendar.md
index 8b86f08a2..f5b4628f5 100644
--- a/apps/ui/skills/coss/references/primitives/calendar.md
+++ b/apps/ui/skills/coss/references/primitives/calendar.md
@@ -14,7 +14,7 @@ npx shadcn@latest add @coss/calendar
 Manual deps from docs:
 
 ```bash
-npm install react-day-picker
+npm install @daypicker/react
 ```
 
 ## Canonical imports
diff --git a/bun.lock b/bun.lock
index b89cf767d..4812e6546 100644
--- a/bun.lock
+++ b/bun.lock
@@ -3,9 +3,6 @@
   "workspaces": {
     "": {
       "name": "cosscom",
-      "dependencies": {
-        "react-day-picker": "^9.13.0",
-      },
       "devDependencies": {
         "@biomejs/biome": "2.3.10",
         "husky": "^9.1.7",
@@ -19,6 +16,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@coss/ui": "workspace:*",
+        "@daypicker/react": "^10.0.1",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
@@ -108,6 +106,7 @@
       "dependencies": {
         "@base-ui/react": "1.6.0",
         "@coss/ui": "workspace:*",
+        "@daypicker/react": "10.0.1",
         "@hugeicons/core-free-icons": "^2.0.0",
         "@hugeicons/react": "^1.1.1",
         "@remixicon/react": "^4.7.0",
@@ -121,7 +120,6 @@
         "lucide-react": "^0.555.0",
         "next": "16.2.5",
         "react": "^19.2.6",
-        "react-day-picker": "^9.13.0",
         "react-dom": "^19.2.6",
         "shadcn": "^4.1.0",
         "tailwind-merge": "^3.4.0",
@@ -175,6 +173,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@base-ui/react": "1.6.0",
+        "@daypicker/react": "^10.0.1",
         "@hugeicons/core-free-icons": "^2.0.0",
         "@hugeicons/react": "^1.1.1",
         "@shikijs/transformers": "^3.15.0",
@@ -303,6 +302,8 @@
 
     "@date-fns/tz": ["@date-fns/tz@1.4.1", "", {}, "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA=="],
 
+    "@daypicker/react": ["@daypicker/react@10.0.1", "", { "dependencies": { "react-day-picker": "10.0.1" }, "peerDependencies": { "@types/react": ">=16.8.0", "react": ">=16.8.0" }, "optionalPeers": ["@types/react"] }, "sha512-lH4YQz4iMBWP8hsI1bD9Eg0T7t503IkSUR/WDGGkV5mKZvwVv+ukCkJz7yN+uVFBv7vHTK+ww7a5EvlkeFwPYQ=="],
+
     "@dnd-kit/accessibility": ["@dnd-kit/accessibility@3.1.1", "", { "dependencies": { "tslib": "2.8.1" }, "peerDependencies": { "react": "19.2.0" } }, "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw=="],
 
     "@dnd-kit/core": ["@dnd-kit/core@6.3.1", "", { "dependencies": { "@dnd-kit/accessibility": "3.1.1", "@dnd-kit/utilities": "3.2.2", "tslib": "2.8.1" }, "peerDependencies": { "react": "19.2.0", "react-dom": "19.2.0" } }, "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ=="],
@@ -903,6 +904,8 @@
 
     "@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
 
+    "@tabby_ai/hijri-converter": ["@tabby_ai/hijri-converter@1.0.5", "", {}, "sha512-r5bClKrcIusDoo049dSL8CawnHR6mRdDwhlQuIgZRNty68q0x8k3Lf1BtPAMxRf/GgnHBnIO4ujd3+GQdLWzxQ=="],
+
     "@tailwindcss/node": ["@tailwindcss/node@4.1.17", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.1.17" } }, "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg=="],
 
     "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.17", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.17", "@tailwindcss/oxide-darwin-arm64": "4.1.17", "@tailwindcss/oxide-darwin-x64": "4.1.17", "@tailwindcss/oxide-freebsd-x64": "4.1.17", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.17", "@tailwindcss/oxide-linux-arm64-musl": "4.1.17", "@tailwindcss/oxide-linux-x64-gnu": "4.1.17", "@tailwindcss/oxide-linux-x64-musl": "4.1.17", "@tailwindcss/oxide-wasm32-wasi": "4.1.17", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.17", "@tailwindcss/oxide-win32-x64-msvc": "4.1.17" } }, "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA=="],
@@ -1887,7 +1890,7 @@
 
     "react-aria-components": ["react-aria-components@1.13.0", "", { "dependencies": { "@internationalized/date": "^3.10.0", "@internationalized/string": "^3.2.7", "@react-aria/autocomplete": "3.0.0-rc.3", "@react-aria/collections": "^3.0.0", "@react-aria/dnd": "^3.11.3", "@react-aria/focus": "^3.21.2", "@react-aria/interactions": "^3.25.6", "@react-aria/live-announcer": "^3.4.4", "@react-aria/overlays": "^3.30.0", "@react-aria/ssr": "^3.9.10", "@react-aria/textfield": "^3.18.2", "@react-aria/toolbar": "3.0.0-beta.21", "@react-aria/utils": "^3.31.0", "@react-aria/virtualizer": "^4.1.10", "@react-stately/autocomplete": "3.0.0-beta.3", "@react-stately/layout": "^4.5.1", "@react-stately/selection": "^3.20.6", "@react-stately/table": "^3.15.1", "@react-stately/utils": "^3.10.8", "@react-stately/virtualizer": "^4.4.4", "@react-types/form": "^3.7.16", "@react-types/grid": "^3.3.6", "@react-types/shared": "^3.32.1", "@react-types/table": "^3.13.4", "@swc/helpers": "^0.5.0", "client-only": "^0.0.1", "react-aria": "^3.44.0", "react-stately": "^3.42.0", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-t1mm3AVy/MjUJBZ7zrb+sFC5iya8Vvw3go3mGKtTm269bXGZho7BLA4IgT+0nOS3j+ku6ChVi8NEoQVFoYzJJA=="],
 
-    "react-day-picker": ["react-day-picker@9.13.0", "", { "dependencies": { "@date-fns/tz": "^1.4.1", "date-fns": "^4.1.0", "date-fns-jalali": "^4.1.0-0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-euzj5Hlq+lOHqI53NiuNhCP8HWgsPf/bBAVijR50hNaY1XwjKjShAnIe8jm8RD2W9IJUvihDIZ+KrmqfFzNhFQ=="],
+    "react-day-picker": ["react-day-picker@9.14.0", "", { "dependencies": { "@date-fns/tz": "^1.4.1", "@tabby_ai/hijri-converter": "1.0.5", "date-fns": "^4.1.0", "date-fns-jalali": "4.1.0-0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-tBaoDWjPwe0M5pGrum4H0SR6Lyk+BO9oHnp9JbKpGKW2mlraNPgP9BMfsg5pWpwrssARmeqk7YBl2oXutZTaHA=="],
 
     "react-dom": ["react-dom@19.2.6", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.6" } }, "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g=="],
 
@@ -2275,6 +2278,8 @@
 
     "@cspotcode/source-map-support/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.9", "", { "dependencies": { "@jridgewell/resolve-uri": "3.1.2", "@jridgewell/sourcemap-codec": "1.5.4" } }, "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ=="],
 
+    "@daypicker/react/react-day-picker": ["react-day-picker@10.0.1", "", { "dependencies": { "@date-fns/tz": "^1.4.1", "date-fns": "^4.1.0" }, "peerDependencies": { "@types/react": ">=16.8.0", "react": ">=16.8.0" }, "optionalPeers": ["@types/react"] }, "sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w=="],
+
     "@dnd-kit/accessibility/react": ["react@19.2.0", "", {}, "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ=="],
 
     "@dnd-kit/core/react": ["react@19.2.0", "", {}, "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ=="],
diff --git a/package.json b/package.json
index b882cbd7a..eb9902dca 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,6 @@
 {
-  "dependencies": {
-    "react-day-picker": "^9.13.0"
-  },
+  "name": "cosscom",
+  "version": "0.0.1",
   "devDependencies": {
     "@biomejs/biome": "2.3.10",
     "husky": "^9.1.7",
@@ -13,7 +12,6 @@
     "bun": ">=1.3.1"
   },
   "license": "AGPL-3.0-or-later",
-  "name": "cosscom",
   "packageManager": "bun@1.3.1",
   "private": true,
   "scripts": {
@@ -27,7 +25,6 @@
     "test": "bun test --pass-with-no-tests",
     "typecheck": "turbo run typecheck"
   },
-  "version": "0.0.1",
   "workspaces": [
     "apps/*",
     "apps/examples/*",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b85027393..51c6d3951 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@base-ui/react": "1.6.0",
+    "@daypicker/react": "^10.0.1",
     "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/react": "^1.1.1",
     "@shikijs/transformers": "^3.15.0",
diff --git a/packages/ui/src/components/calendar.tsx b/packages/ui/src/components/calendar.tsx
index 9bcc5325f..01e3415a3 100644
--- a/packages/ui/src/components/calendar.tsx
+++ b/packages/ui/src/components/calendar.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import { cn } from "@coss/ui/lib/utils";
+import { DayPicker } from "@daypicker/react";
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
   ChevronsUpDownIcon,
 } from "lucide-react";
 import type * as React from "react";
-import { DayPicker } from "react-day-picker";
 
 const buttonClassNames =
   "relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";
@@ -28,7 +28,7 @@ export function Calendar({
     day: "size-(--cell-size) text-sm py-px",
     day_button: cn(
       buttonClassNames,
-      "in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
+      "in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
     ),
     dropdown: "absolute bg-popover inset-0 opacity-0",
     dropdown_root:
@@ -47,7 +47,7 @@ export function Calendar({
     range_middle: "range-middle",
     range_start: "range-start",
     today:
-      "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors",
+      "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30",
     week_number:
       "size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72",
     weekday:

From b1cc3a25c2022d24213132430ef1a694d2a6b8db Mon Sep 17 00:00:00 2001
From: Vasilii Boldurean <vasilii@boldurean.com>
Date: Sun, 26 Jul 2026 18:52:16 +0100
Subject: [PATCH 34/49] fix(ui): give drawer --inset a unit so popup slides
 (#807)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`--spacing(0)` compiles to unitless `0`; popup transforms add it
inside calc() (`translateY(calc(100% + … + var(--inset)))`). Adding
a number to a length is invalid calc → transform dropped → popup
never starts off-screen, so it fades instead of sliding. All
positions affected. `0px` keeps the calc a valid length.

Closes #803

Co-authored-by: Vasilii Boldurean <vasilii.boldurean@computacenter.com>
---
 apps/ui/public/r/drawer.json           | 2 +-
 apps/ui/registry/default/ui/drawer.tsx | 2 +-
 packages/ui/src/components/drawer.tsx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/ui/public/r/drawer.json b/apps/ui/public/r/drawer.json
index 92fab4719..3e0a4429f 100644
--- a/apps/ui/public/r/drawer.json
+++ b/apps/ui/public/r/drawer.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/drawer.tsx",
-      "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst DrawerContext: React.Context<{ position: DrawerPosition }> =\n  createContext<{ position: DrawerPosition }>({\n    position: \"bottom\",\n  });\n\nconst directionMap: Record<\n  DrawerPosition,\n  DrawerPrimitive.Root.Props[\"swipeDirection\"]\n> = {\n  bottom: \"down\",\n  left: \"left\",\n  right: \"right\",\n  top: \"up\",\n};\n\nexport const DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\n  DrawerPrimitive.createHandle;\n\nexport function Drawer({\n  swipeDirection,\n  position = \"bottom\",\n  ...props\n}: DrawerPrimitive.Root.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  return (\n    <DrawerContext.Provider value={{ position }}>\n      <DrawerPrimitive.Root\n        swipeDirection={swipeDirection ?? directionMap[position]}\n        {...props}\n      />\n    </DrawerContext.Provider>\n  );\n}\n\nexport const DrawerPortal: typeof DrawerPrimitive.Portal =\n  DrawerPrimitive.Portal;\n\nexport function DrawerTrigger(\n  props: DrawerPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nexport function DrawerClose(\n  props: DrawerPrimitive.Close.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nexport function DrawerSwipeArea({\n  className,\n  position: positionProp,\n  ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPrimitive.SwipeArea\n      className={cn(\n        \"fixed z-50 touch-none\",\n        position === \"bottom\" && \"inset-x-0 bottom-0 h-8\",\n        position === \"top\" && \"inset-x-0 top-0 h-8\",\n        position === \"left\" && \"inset-y-0 left-0 w-8\",\n        position === \"right\" && \"inset-y-0 right-0 w-8\",\n        className,\n      )}\n      data-slot=\"drawer-swipe-area\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerBackdrop({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute\",\n        className,\n      )}\n      data-slot=\"drawer-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerViewport({\n  className,\n  position,\n  variant = \"default\",\n  ...props\n}: DrawerPrimitive.Viewport.Props & {\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <DrawerPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:--spacing(0)]\",\n        \"touch-none\",\n        position === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        position === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        position === \"left\" && \"flex justify-start\",\n        position === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"px-(--inset) sm:[--inset:--spacing(4)]\",\n        variant === \"inset\" && position !== \"bottom\" && \"pt-(--inset)\",\n        variant === \"inset\" && position !== \"top\" && \"pb-(--inset)\",\n        className,\n      )}\n      data-slot=\"drawer-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPopup({\n  className,\n  children,\n  showCloseButton = false,\n  position: positionProp,\n  variant = \"default\",\n  showBar = false,\n  portalProps,\n  ...props\n}: DrawerPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n  showBar?: boolean;\n  portalProps?: DrawerPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPortal {...portalProps}>\n      <DrawerBackdrop />\n      <DrawerViewport position={position} variant={variant}>\n        <DrawerPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[transform,box-shadow,height,background-color] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--peek:calc(--spacing(6)-1px)] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:bg-popover data-swiping:select-none data-nested-drawer-open:overflow-hidden data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(2%*(var(--nested-drawers)-var(--stack-progress))))] data-ending-style:shadow-transparent data-starting-style:shadow-transparent data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*(var(--nested-drawers)-var(--stack-progress))))] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            \"touch-none\",\n            position === \"bottom\" &&\n              \"transform-[translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] row-start-2 -mb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] border-t pb-[max(0px,calc(env(safe-area-inset-bottom,0px)+var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding] after:inset-x-0 after:top-full after:h-(--bleed) has-data-[slot=drawer-bar]:pt-2 data-ending-style:mb-0 data-starting-style:mb-0 data-ending-style:pb-0 data-starting-style:pb-0\",\n            position === \"top\" &&\n              \"data-starting-style:transform-[translateY(calc(-100%-var(--inset)))] data-ending-style:transform-[translateY(calc(-100%-var(--inset)))] transform-[translateY(var(--drawer-swipe-movement-y))] border-b after:inset-x-0 after:bottom-full after:h-(--bleed) has-data-[slot=drawer-bar]:pb-2\",\n            position === \"left\" &&\n              \"data-starting-style:transform-[translateX(calc(-100%-var(--inset)))] data-ending-style:transform-[translateX(calc(-100%-var(--inset)))] transform-[translateX(var(--drawer-swipe-movement-x))] w-[calc(100%-(--spacing(12)))] max-w-md border-e after:inset-y-0 after:end-full after:w-(--bleed) has-data-[slot=drawer-bar]:pe-2\",\n            position === \"right\" &&\n              \"transform-[translateX(var(--drawer-swipe-movement-x))] data-ending-style:transform-[translateX(calc(100%+var(--inset)))] data-starting-style:transform-[translateX(calc(100%+var(--inset)))] col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s after:inset-y-0 after:start-full after:w-(--bleed) has-data-[slot=drawer-bar]:ps-2\",\n            variant !== \"straight\" &&\n              cn(\n                position === \"bottom\" && \"rounded-t-2xl\",\n                position === \"top\" &&\n                  \"rounded-b-2xl **:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"rounded-e-2xl **:data-[slot=drawer-footer]:rounded-ee-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"rounded-s-2xl **:data-[slot=drawer-footer]:rounded-es-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"default\" &&\n              cn(\n                position === \"bottom\" &&\n                  \"before:rounded-t-[calc(var(--radius-2xl)-1px)]\",\n                position === \"top\" &&\n                  \"before:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"before:rounded-e-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"before:rounded-s-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:after:bg-transparent sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            variant === \"straight\" && \"[--stack-step:0]\",\n            (position === \"bottom\" || position === \"top\") &&\n              \"h-(--drawer-height,auto) [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))] data-nested-drawer-open:h-(--height)\",\n            position === \"bottom\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_calc(100%-var(--inset))]\",\n            position === \"top\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_var(--inset)]\",\n            position === \"left\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))] origin-right\",\n            position === \"right\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))] origin-left\",\n            className,\n          )}\n          data-slot=\"drawer-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n            >\n              <XIcon />\n            </DrawerPrimitive.Close>\n          )}\n          {showBar && <DrawerBar />}\n        </DrawerPrimitive.Popup>\n      </DrawerViewport>\n    </DrawerPortal>\n  );\n}\n\nexport function DrawerHeader({\n  className,\n  allowSelection = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerFooter({\n  className,\n  variant = \"default\",\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end\",\n      !allowSelection && \"cursor-default\",\n      variant === \"default\" &&\n        \"border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]\",\n      className,\n    ),\n    \"data-slot\": \"drawer-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerTitle({\n  className,\n  ...props\n}: DrawerPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"drawer-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"drawer-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPanel({\n  className,\n  scrollFade = true,\n  scrollable = true,\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n  scrollable?: boolean;\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-panel\",\n  };\n\n  const content = useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n\n  if (scrollable) {\n    return (\n      <ScrollArea className=\"touch-auto\" scrollFade={scrollFade}>\n        {content}\n      </ScrollArea>\n    );\n  }\n\n  return content;\n}\n\nexport function DrawerBar({\n  className,\n  position: positionProp,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n  const horizontal = position === \"left\" || position === \"right\";\n  const defaultProps = {\n    \"aria-hidden\": true as const,\n    className: cn(\n      \"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input\",\n      horizontal\n        ? \"inset-y-0 before:h-12 before:w-1\"\n        : \"inset-x-0 before:h-1 before:w-12\",\n      position === \"top\" && \"bottom-0\",\n      position === \"bottom\" && \"top-0\",\n      position === \"left\" && \"right-0\",\n      position === \"right\" && \"left-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-bar\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport const DrawerContent: typeof DrawerPrimitive.Content =\n  DrawerPrimitive.Content;\n\nexport function DrawerMenu({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"nav\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"-m-2 flex flex-col\", className),\n    \"data-slot\": \"drawer-menu\",\n  };\n\n  return useRender({\n    defaultTagName: \"nav\",\n    props: mergeProps<\"nav\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuItem({\n  className,\n  variant = \"default\",\n  render,\n  disabled,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-item\",\n    \"data-variant\": variant,\n    disabled,\n    type: \"button\" as const,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuSeparator({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"mx-2 my-1 h-px bg-border\", className),\n    \"data-slot\": \"drawer-menu-separator\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroup({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"flex flex-col\", className),\n    \"data-slot\": \"drawer-menu-group\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuTrigger({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <DrawerTrigger\n      className={cn(\n        \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground sm:min-h-8 sm:text-sm [&_svg:not(:last-child)]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"drawer-menu-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto -me-0.5 opacity-80\" />\n    </DrawerTrigger>\n  );\n}\n\nexport function DrawerMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  variant = \"default\",\n  disabled,\n  render,\n  ...props\n}: CheckboxPrimitive.Root.Props & {\n  variant?: \"default\" | \"switch\";\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      checked={checked}\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        variant === \"switch\"\n          ? \"grid-cols-[1fr_auto] gap-4 pe-1.5\"\n          : \"grid-cols-[1rem_1fr] pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-checkbox-item\"\n      defaultChecked={defaultChecked}\n      disabled={disabled}\n      onCheckedChange={onCheckedChange}\n      render={render}\n      {...props}\n    >\n      {variant === \"switch\" ? (\n        <>\n          <span className=\"col-start-1\">{children}</span>\n          <CheckboxPrimitive.Indicator\n            className=\"inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\"\n            keepMounted\n          >\n            <span className=\"pointer-events-none block aspect-square h-full in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=drawer-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=drawer-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\" />\n          </CheckboxPrimitive.Indicator>\n        </>\n      ) : (\n        <>\n          <CheckboxPrimitive.Indicator className=\"col-start-1\">\n            <svg\n              fill=\"none\"\n              height=\"24\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n            </svg>\n          </CheckboxPrimitive.Indicator>\n          <span className=\"col-start-2\">{children}</span>\n        </>\n      )}\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport function DrawerMenuRadioGroup({\n  className,\n  ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n  return (\n    <RadioGroupPrimitive\n      className={cn(\"flex flex-col\", className)}\n      data-slot=\"drawer-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerMenuRadioItem({\n  className,\n  children,\n  value,\n  disabled,\n  render,\n  ...props\n}: RadioPrimitive.Root.Props & {\n  value: string;\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        \"grid-cols-[1rem_1fr] items-center pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-radio-item\"\n      disabled={disabled}\n      render={render}\n      value={value}\n      {...props}\n    >\n      <RadioPrimitive.Indicator className=\"col-start-1\">\n        <svg\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </RadioPrimitive.Indicator>\n      <span className=\"col-start-2\">{children}</span>\n    </RadioPrimitive.Root>\n  );\n}\n\nexport { DrawerPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst DrawerContext: React.Context<{ position: DrawerPosition }> =\n  createContext<{ position: DrawerPosition }>({\n    position: \"bottom\",\n  });\n\nconst directionMap: Record<\n  DrawerPosition,\n  DrawerPrimitive.Root.Props[\"swipeDirection\"]\n> = {\n  bottom: \"down\",\n  left: \"left\",\n  right: \"right\",\n  top: \"up\",\n};\n\nexport const DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\n  DrawerPrimitive.createHandle;\n\nexport function Drawer({\n  swipeDirection,\n  position = \"bottom\",\n  ...props\n}: DrawerPrimitive.Root.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  return (\n    <DrawerContext.Provider value={{ position }}>\n      <DrawerPrimitive.Root\n        swipeDirection={swipeDirection ?? directionMap[position]}\n        {...props}\n      />\n    </DrawerContext.Provider>\n  );\n}\n\nexport const DrawerPortal: typeof DrawerPrimitive.Portal =\n  DrawerPrimitive.Portal;\n\nexport function DrawerTrigger(\n  props: DrawerPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nexport function DrawerClose(\n  props: DrawerPrimitive.Close.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nexport function DrawerSwipeArea({\n  className,\n  position: positionProp,\n  ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPrimitive.SwipeArea\n      className={cn(\n        \"fixed z-50 touch-none\",\n        position === \"bottom\" && \"inset-x-0 bottom-0 h-8\",\n        position === \"top\" && \"inset-x-0 top-0 h-8\",\n        position === \"left\" && \"inset-y-0 left-0 w-8\",\n        position === \"right\" && \"inset-y-0 right-0 w-8\",\n        className,\n      )}\n      data-slot=\"drawer-swipe-area\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerBackdrop({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute\",\n        className,\n      )}\n      data-slot=\"drawer-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerViewport({\n  className,\n  position,\n  variant = \"default\",\n  ...props\n}: DrawerPrimitive.Viewport.Props & {\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <DrawerPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:0px]\",\n        \"touch-none\",\n        position === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        position === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        position === \"left\" && \"flex justify-start\",\n        position === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"px-(--inset) sm:[--inset:--spacing(4)]\",\n        variant === \"inset\" && position !== \"bottom\" && \"pt-(--inset)\",\n        variant === \"inset\" && position !== \"top\" && \"pb-(--inset)\",\n        className,\n      )}\n      data-slot=\"drawer-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPopup({\n  className,\n  children,\n  showCloseButton = false,\n  position: positionProp,\n  variant = \"default\",\n  showBar = false,\n  portalProps,\n  ...props\n}: DrawerPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n  showBar?: boolean;\n  portalProps?: DrawerPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPortal {...portalProps}>\n      <DrawerBackdrop />\n      <DrawerViewport position={position} variant={variant}>\n        <DrawerPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[transform,box-shadow,height,background-color] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--peek:calc(--spacing(6)-1px)] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:bg-popover data-swiping:select-none data-nested-drawer-open:overflow-hidden data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(2%*(var(--nested-drawers)-var(--stack-progress))))] data-ending-style:shadow-transparent data-starting-style:shadow-transparent data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*(var(--nested-drawers)-var(--stack-progress))))] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            \"touch-none\",\n            position === \"bottom\" &&\n              \"transform-[translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] row-start-2 -mb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] border-t pb-[max(0px,calc(env(safe-area-inset-bottom,0px)+var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding] after:inset-x-0 after:top-full after:h-(--bleed) has-data-[slot=drawer-bar]:pt-2 data-ending-style:mb-0 data-starting-style:mb-0 data-ending-style:pb-0 data-starting-style:pb-0\",\n            position === \"top\" &&\n              \"data-starting-style:transform-[translateY(calc(-100%-var(--inset)))] data-ending-style:transform-[translateY(calc(-100%-var(--inset)))] transform-[translateY(var(--drawer-swipe-movement-y))] border-b after:inset-x-0 after:bottom-full after:h-(--bleed) has-data-[slot=drawer-bar]:pb-2\",\n            position === \"left\" &&\n              \"data-starting-style:transform-[translateX(calc(-100%-var(--inset)))] data-ending-style:transform-[translateX(calc(-100%-var(--inset)))] transform-[translateX(var(--drawer-swipe-movement-x))] w-[calc(100%-(--spacing(12)))] max-w-md border-e after:inset-y-0 after:end-full after:w-(--bleed) has-data-[slot=drawer-bar]:pe-2\",\n            position === \"right\" &&\n              \"transform-[translateX(var(--drawer-swipe-movement-x))] data-ending-style:transform-[translateX(calc(100%+var(--inset)))] data-starting-style:transform-[translateX(calc(100%+var(--inset)))] col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s after:inset-y-0 after:start-full after:w-(--bleed) has-data-[slot=drawer-bar]:ps-2\",\n            variant !== \"straight\" &&\n              cn(\n                position === \"bottom\" && \"rounded-t-2xl\",\n                position === \"top\" &&\n                  \"rounded-b-2xl **:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"rounded-e-2xl **:data-[slot=drawer-footer]:rounded-ee-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"rounded-s-2xl **:data-[slot=drawer-footer]:rounded-es-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"default\" &&\n              cn(\n                position === \"bottom\" &&\n                  \"before:rounded-t-[calc(var(--radius-2xl)-1px)]\",\n                position === \"top\" &&\n                  \"before:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"before:rounded-e-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"before:rounded-s-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:after:bg-transparent sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            variant === \"straight\" && \"[--stack-step:0]\",\n            (position === \"bottom\" || position === \"top\") &&\n              \"h-(--drawer-height,auto) [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))] data-nested-drawer-open:h-(--height)\",\n            position === \"bottom\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_calc(100%-var(--inset))]\",\n            position === \"top\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_var(--inset)]\",\n            position === \"left\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))] origin-right\",\n            position === \"right\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))] origin-left\",\n            className,\n          )}\n          data-slot=\"drawer-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n            >\n              <XIcon />\n            </DrawerPrimitive.Close>\n          )}\n          {showBar && <DrawerBar />}\n        </DrawerPrimitive.Popup>\n      </DrawerViewport>\n    </DrawerPortal>\n  );\n}\n\nexport function DrawerHeader({\n  className,\n  allowSelection = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerFooter({\n  className,\n  variant = \"default\",\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end\",\n      !allowSelection && \"cursor-default\",\n      variant === \"default\" &&\n        \"border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]\",\n      className,\n    ),\n    \"data-slot\": \"drawer-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerTitle({\n  className,\n  ...props\n}: DrawerPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"drawer-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"drawer-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPanel({\n  className,\n  scrollFade = true,\n  scrollable = true,\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n  scrollable?: boolean;\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-panel\",\n  };\n\n  const content = useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n\n  if (scrollable) {\n    return (\n      <ScrollArea className=\"touch-auto\" scrollFade={scrollFade}>\n        {content}\n      </ScrollArea>\n    );\n  }\n\n  return content;\n}\n\nexport function DrawerBar({\n  className,\n  position: positionProp,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n  const horizontal = position === \"left\" || position === \"right\";\n  const defaultProps = {\n    \"aria-hidden\": true as const,\n    className: cn(\n      \"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input\",\n      horizontal\n        ? \"inset-y-0 before:h-12 before:w-1\"\n        : \"inset-x-0 before:h-1 before:w-12\",\n      position === \"top\" && \"bottom-0\",\n      position === \"bottom\" && \"top-0\",\n      position === \"left\" && \"right-0\",\n      position === \"right\" && \"left-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-bar\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport const DrawerContent: typeof DrawerPrimitive.Content =\n  DrawerPrimitive.Content;\n\nexport function DrawerMenu({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"nav\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"-m-2 flex flex-col\", className),\n    \"data-slot\": \"drawer-menu\",\n  };\n\n  return useRender({\n    defaultTagName: \"nav\",\n    props: mergeProps<\"nav\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuItem({\n  className,\n  variant = \"default\",\n  render,\n  disabled,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-item\",\n    \"data-variant\": variant,\n    disabled,\n    type: \"button\" as const,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuSeparator({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"mx-2 my-1 h-px bg-border\", className),\n    \"data-slot\": \"drawer-menu-separator\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroup({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"flex flex-col\", className),\n    \"data-slot\": \"drawer-menu-group\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuTrigger({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <DrawerTrigger\n      className={cn(\n        \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground sm:min-h-8 sm:text-sm [&_svg:not(:last-child)]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"drawer-menu-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto -me-0.5 opacity-80\" />\n    </DrawerTrigger>\n  );\n}\n\nexport function DrawerMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  variant = \"default\",\n  disabled,\n  render,\n  ...props\n}: CheckboxPrimitive.Root.Props & {\n  variant?: \"default\" | \"switch\";\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      checked={checked}\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        variant === \"switch\"\n          ? \"grid-cols-[1fr_auto] gap-4 pe-1.5\"\n          : \"grid-cols-[1rem_1fr] pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-checkbox-item\"\n      defaultChecked={defaultChecked}\n      disabled={disabled}\n      onCheckedChange={onCheckedChange}\n      render={render}\n      {...props}\n    >\n      {variant === \"switch\" ? (\n        <>\n          <span className=\"col-start-1\">{children}</span>\n          <CheckboxPrimitive.Indicator\n            className=\"inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\"\n            keepMounted\n          >\n            <span className=\"pointer-events-none block aspect-square h-full in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=drawer-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=drawer-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\" />\n          </CheckboxPrimitive.Indicator>\n        </>\n      ) : (\n        <>\n          <CheckboxPrimitive.Indicator className=\"col-start-1\">\n            <svg\n              fill=\"none\"\n              height=\"24\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n            </svg>\n          </CheckboxPrimitive.Indicator>\n          <span className=\"col-start-2\">{children}</span>\n        </>\n      )}\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport function DrawerMenuRadioGroup({\n  className,\n  ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n  return (\n    <RadioGroupPrimitive\n      className={cn(\"flex flex-col\", className)}\n      data-slot=\"drawer-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerMenuRadioItem({\n  className,\n  children,\n  value,\n  disabled,\n  render,\n  ...props\n}: RadioPrimitive.Root.Props & {\n  value: string;\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        \"grid-cols-[1rem_1fr] items-center pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-radio-item\"\n      disabled={disabled}\n      render={render}\n      value={value}\n      {...props}\n    >\n      <RadioPrimitive.Indicator className=\"col-start-1\">\n        <svg\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </RadioPrimitive.Indicator>\n      <span className=\"col-start-2\">{children}</span>\n    </RadioPrimitive.Root>\n  );\n}\n\nexport { DrawerPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/registry/default/ui/drawer.tsx b/apps/ui/registry/default/ui/drawer.tsx
index fd70f2fe4..1fcfeb1e7 100644
--- a/apps/ui/registry/default/ui/drawer.tsx
+++ b/apps/ui/registry/default/ui/drawer.tsx
@@ -119,7 +119,7 @@ export function DrawerViewport({
   return (
     <DrawerPrimitive.Viewport
       className={cn(
-        "fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:--spacing(0)]",
+        "fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:0px]",
         "touch-none",
         position === "bottom" && "grid grid-rows-[1fr_auto] pt-12",
         position === "top" && "grid grid-rows-[auto_1fr] pb-12",
diff --git a/packages/ui/src/components/drawer.tsx b/packages/ui/src/components/drawer.tsx
index 19d9f8c3a..d9e7cdd80 100644
--- a/packages/ui/src/components/drawer.tsx
+++ b/packages/ui/src/components/drawer.tsx
@@ -119,7 +119,7 @@ export function DrawerViewport({
   return (
     <DrawerPrimitive.Viewport
       className={cn(
-        "fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:--spacing(0)]",
+        "fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:0px]",
         "touch-none",
         position === "bottom" && "grid grid-rows-[1fr_auto] pt-12",
         position === "top" && "grid grid-rows-[auto_1fr] pb-12",

From 85249e9b92eba68af2d3ec50f57a9a6f209fd977 Mon Sep 17 00:00:00 2001
From: RODRIGO PEREIRA <rodrigopereira.development@gmail.com>
Date: Sun, 26 Jul 2026 15:00:34 -0300
Subject: [PATCH 35/49] fix(toast): correct exit animation direction for
 top-positioned toasts (#821)

---
 apps/ui/public/r/toast.json           | 2 +-
 apps/ui/registry/default/ui/toast.tsx | 3 ++-
 packages/ui/src/components/toast.tsx  | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/ui/public/r/toast.json b/apps/ui/public/r/toast.json
index 52b79f1ed..6dfad1d1e 100644
--- a/apps/ui/public/r/toast.json
+++ b/apps/ui/public/r/toast.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/ui/toast.tsx",
-      "content": "\"use client\";\n\nimport { Toast } from \"@base-ui/react/toast\";\nimport {\n  CircleAlertIcon,\n  CircleCheckIcon,\n  InfoIcon,\n  LoaderCircleIcon,\n  TriangleAlertIcon,\n} from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { buttonVariants } from \"@/registry/default/ui/button\";\n\nconst TOAST_ICONS = {\n  error: CircleAlertIcon,\n  info: InfoIcon,\n  loading: LoaderCircleIcon,\n  success: CircleCheckIcon,\n  warning: TriangleAlertIcon,\n} as const;\n\ntype SwipeDirection = \"up\" | \"down\" | \"left\" | \"right\";\n\ntype ToastData = {\n  rootProps?: Omit<\n    React.ComponentProps<typeof Toast.Root>,\n    \"children\" | \"className\" | \"swipeDirection\" | \"toast\"\n  >;\n  tooltipStyle?: boolean;\n};\n\nfunction getSwipeDirection(position: ToastPosition): SwipeDirection[] {\n  const verticalDirection: SwipeDirection = position.startsWith(\"top\")\n    ? \"up\"\n    : \"down\";\n\n  if (position.includes(\"center\")) {\n    return [verticalDirection];\n  }\n\n  if (position.includes(\"left\")) {\n    return [\"left\", verticalDirection];\n  }\n\n  return [\"right\", verticalDirection];\n}\n\nfunction upsertReplayClassName(toast: {\n  type?: string;\n  updateKey?: number;\n}): string | undefined {\n  const k = toast.updateKey ?? 0;\n  if (k <= 0) return undefined;\n  const isEven = k % 2 === 0;\n  if (toast.type === \"error\") {\n    return isEven ? \"animate-toast-error-even\" : \"animate-toast-error-odd\";\n  }\n  return isEven ? \"animate-toast-success-even\" : \"animate-toast-success-odd\";\n}\n\nfunction Toasts({\n  position,\n  portalProps,\n}: {\n  position: ToastPosition;\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n  const swipeDirection = getSwipeDirection(position);\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal\" {...portalProps}>\n      <Toast.Viewport\n        className={cn(\n          \"fixed z-60 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]\",\n          // Vertical positioning\n          \"data-[position*=top]:top-(--toast-inset)\",\n          \"data-[position*=bottom]:bottom-(--toast-inset)\",\n          // Horizontal positioning\n          \"data-[position*=left]:left-(--toast-inset)\",\n          \"data-[position*=right]:right-(--toast-inset)\",\n          \"data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2\",\n        )}\n        data-position={position}\n        data-slot=\"toast-viewport\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n          const toastData = toast.data as ToastData | undefined;\n\n          return (\n            <Toast.Root\n              key={toast.id}\n              className={cn(\n                \"absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(1%*max(0,var(--toast-index,0))))] not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s,background-color_.5s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-expanded:bg-popover dark:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*max(0,var(--toast-index,0))))] dark:data-expanded:bg-popover dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                // Base positioning using data-position\n                \"data-[position*=right]:right-0 data-[position*=right]:left-auto\",\n                \"data-[position*=left]:right-auto data-[position*=left]:left-0\",\n                \"data-[position*=center]:right-0 data-[position*=center]:left-0\",\n                \"data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-[50%_calc(50%-50%*min(var(--toast-index,0),1))]\",\n                \"data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-[50%_calc(50%+50%*min(var(--toast-index,0),1))]\",\n                // Gap fill for hover\n                \"after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full\",\n                \"data-[position*=top]:after:top-full\",\n                \"data-[position*=bottom]:after:bottom-full\",\n                // Define some variables\n                \"[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]\",\n                // Define offset-y variable\n                \"data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]\",\n                \"data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]\",\n                // Default state transform\n                \"data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                \"data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                // Limited state\n                \"data-limited:opacity-0\",\n                // Expanded state\n                \"data-expanded:h-(--toast-height)\",\n                \"data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]\",\n                // Starting and ending animations\n                \"data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]\",\n                \"data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:opacity-0\",\n                // Ending animations (direction-aware)\n                \"data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n                // Ending animations (expanded)\n                \"data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n                upsertReplayClassName(toast),\n              )}\n              {...toastData?.rootProps}\n              data-position={position}\n              swipeDirection={swipeDirection}\n              toast={toast}\n            >\n              <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100\">\n                <div className=\"flex gap-2\">\n                  {Icon && (\n                    <div\n                      className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                      data-slot=\"toast-icon\"\n                    >\n                      <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                    </div>\n                  )}\n\n                  <div className=\"flex flex-col gap-0.5\">\n                    <Toast.Title\n                      className=\"font-medium\"\n                      data-slot=\"toast-title\"\n                    />\n                    <Toast.Description\n                      className=\"text-muted-foreground\"\n                      data-slot=\"toast-description\"\n                    />\n                  </div>\n                </div>\n                {toast.actionProps && (\n                  <Toast.Action\n                    className={buttonVariants({ size: \"xs\" })}\n                    data-slot=\"toast-action\"\n                  >\n                    {toast.actionProps.children}\n                  </Toast.Action>\n                )}\n              </Toast.Content>\n            </Toast.Root>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nfunction AnchoredToasts({\n  portalProps,\n}: {\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal-anchored\" {...portalProps}>\n      <Toast.Viewport\n        className=\"outline-none\"\n        data-slot=\"toast-viewport-anchored\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n          const toastData = toast.data as ToastData | undefined;\n          const tooltipStyle = toastData?.tooltipStyle ?? false;\n          const positionerProps = toast.positionerProps;\n\n          if (!positionerProps?.anchor) {\n            return null;\n          }\n\n          return (\n            <Toast.Positioner\n              key={toast.id}\n              className=\"z-50 max-w-[min(--spacing(64),var(--available-width))]\"\n              data-slot=\"toast-positioner\"\n              sideOffset={positionerProps.sideOffset ?? 4}\n              toast={toast}\n            >\n              <Toast.Root\n                className={cn(\n                  \"relative text-balance border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                  tooltipStyle\n                    ? \"rounded-md shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]\"\n                    : \"rounded-lg shadow-lg/5 before:rounded-[calc(var(--radius-lg)-1px)]\",\n                  upsertReplayClassName(toast),\n                )}\n                {...toastData?.rootProps}\n                data-slot=\"toast-popup\"\n                toast={toast}\n              >\n                {tooltipStyle ? (\n                  <Toast.Content className=\"pointer-events-auto px-2 py-1\">\n                    <Toast.Title data-slot=\"toast-title\" />\n                  </Toast.Content>\n                ) : (\n                  <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm\">\n                    <div className=\"flex gap-2\">\n                      {Icon && (\n                        <div\n                          className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                          data-slot=\"toast-icon\"\n                        >\n                          <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                        </div>\n                      )}\n\n                      <div className=\"flex flex-col gap-0.5\">\n                        <Toast.Title\n                          className=\"font-medium\"\n                          data-slot=\"toast-title\"\n                        />\n                        <Toast.Description\n                          className=\"text-muted-foreground\"\n                          data-slot=\"toast-description\"\n                        />\n                      </div>\n                    </div>\n                    {toast.actionProps && (\n                      <Toast.Action\n                        className={buttonVariants({ size: \"xs\" })}\n                        data-slot=\"toast-action\"\n                      >\n                        {toast.actionProps.children}\n                      </Toast.Action>\n                    )}\n                  </Toast.Content>\n                )}\n              </Toast.Root>\n            </Toast.Positioner>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nexport const toastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\n\nexport const anchoredToastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\n\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport interface ToastProviderProps extends Toast.Provider.Props {\n  position?: ToastPosition;\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}\n\nexport function ToastProvider({\n  children,\n  position = \"bottom-right\",\n  portalProps,\n  ...props\n}: ToastProviderProps): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={toastManager} {...props}>\n      {children}\n      <Toasts portalProps={portalProps} position={position} />\n    </Toast.Provider>\n  );\n}\n\nexport interface AnchoredToastProviderProps extends Toast.Provider.Props {\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}\n\nexport function AnchoredToastProvider({\n  children,\n  portalProps,\n  ...props\n}: AnchoredToastProviderProps): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={anchoredToastManager} {...props}>\n      {children}\n      <AnchoredToasts portalProps={portalProps} />\n    </Toast.Provider>\n  );\n}\n\nexport { Toast as ToastPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Toast } from \"@base-ui/react/toast\";\nimport {\n  CircleAlertIcon,\n  CircleCheckIcon,\n  InfoIcon,\n  LoaderCircleIcon,\n  TriangleAlertIcon,\n} from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { buttonVariants } from \"@/registry/default/ui/button\";\n\nconst TOAST_ICONS = {\n  error: CircleAlertIcon,\n  info: InfoIcon,\n  loading: LoaderCircleIcon,\n  success: CircleCheckIcon,\n  warning: TriangleAlertIcon,\n} as const;\n\ntype SwipeDirection = \"up\" | \"down\" | \"left\" | \"right\";\n\ntype ToastData = {\n  rootProps?: Omit<\n    React.ComponentProps<typeof Toast.Root>,\n    \"children\" | \"className\" | \"swipeDirection\" | \"toast\"\n  >;\n  tooltipStyle?: boolean;\n};\n\nfunction getSwipeDirection(position: ToastPosition): SwipeDirection[] {\n  const verticalDirection: SwipeDirection = position.startsWith(\"top\")\n    ? \"up\"\n    : \"down\";\n\n  if (position.includes(\"center\")) {\n    return [verticalDirection];\n  }\n\n  if (position.includes(\"left\")) {\n    return [\"left\", verticalDirection];\n  }\n\n  return [\"right\", verticalDirection];\n}\n\nfunction upsertReplayClassName(toast: {\n  type?: string;\n  updateKey?: number;\n}): string | undefined {\n  const k = toast.updateKey ?? 0;\n  if (k <= 0) return undefined;\n  const isEven = k % 2 === 0;\n  if (toast.type === \"error\") {\n    return isEven ? \"animate-toast-error-even\" : \"animate-toast-error-odd\";\n  }\n  return isEven ? \"animate-toast-success-even\" : \"animate-toast-success-odd\";\n}\n\nfunction Toasts({\n  position,\n  portalProps,\n}: {\n  position: ToastPosition;\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n  const swipeDirection = getSwipeDirection(position);\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal\" {...portalProps}>\n      <Toast.Viewport\n        className={cn(\n          \"fixed z-60 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]\",\n          // Vertical positioning\n          \"data-[position*=top]:top-(--toast-inset)\",\n          \"data-[position*=bottom]:bottom-(--toast-inset)\",\n          // Horizontal positioning\n          \"data-[position*=left]:left-(--toast-inset)\",\n          \"data-[position*=right]:right-(--toast-inset)\",\n          \"data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2\",\n        )}\n        data-position={position}\n        data-slot=\"toast-viewport\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n          const toastData = toast.data as ToastData | undefined;\n\n          return (\n            <Toast.Root\n              key={toast.id}\n              className={cn(\n                \"absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(1%*max(0,var(--toast-index,0))))] not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s,background-color_.5s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-expanded:bg-popover dark:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*max(0,var(--toast-index,0))))] dark:data-expanded:bg-popover dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                // Base positioning using data-position\n                \"data-[position*=right]:right-0 data-[position*=right]:left-auto\",\n                \"data-[position*=left]:right-auto data-[position*=left]:left-0\",\n                \"data-[position*=center]:right-0 data-[position*=center]:left-0\",\n                \"data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-[50%_calc(50%-50%*min(var(--toast-index,0),1))]\",\n                \"data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-[50%_calc(50%+50%*min(var(--toast-index,0),1))]\",\n                // Gap fill for hover\n                \"after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full\",\n                \"data-[position*=top]:after:top-full\",\n                \"data-[position*=bottom]:after:bottom-full\",\n                // Define some variables\n                \"[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]\",\n                // Define offset-y variable\n                \"data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]\",\n                \"data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]\",\n                // Default state transform\n                \"data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                \"data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                // Limited state\n                \"data-limited:opacity-0\",\n                // Expanded state\n                \"data-expanded:h-(--toast-height)\",\n                \"data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]\",\n                // Starting and ending animations\n                \"data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]\",\n                \"data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:opacity-0\",\n                // Ending animations (direction-aware)\n                \"data-[position*=top]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(-100%-var(--toast-inset)))]\",\n                \"data-[position*=bottom]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n                // Ending animations (expanded)\n                \"data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n                upsertReplayClassName(toast),\n              )}\n              {...toastData?.rootProps}\n              data-position={position}\n              swipeDirection={swipeDirection}\n              toast={toast}\n            >\n              <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100\">\n                <div className=\"flex gap-2\">\n                  {Icon && (\n                    <div\n                      className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                      data-slot=\"toast-icon\"\n                    >\n                      <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                    </div>\n                  )}\n\n                  <div className=\"flex flex-col gap-0.5\">\n                    <Toast.Title\n                      className=\"font-medium\"\n                      data-slot=\"toast-title\"\n                    />\n                    <Toast.Description\n                      className=\"text-muted-foreground\"\n                      data-slot=\"toast-description\"\n                    />\n                  </div>\n                </div>\n                {toast.actionProps && (\n                  <Toast.Action\n                    className={buttonVariants({ size: \"xs\" })}\n                    data-slot=\"toast-action\"\n                  >\n                    {toast.actionProps.children}\n                  </Toast.Action>\n                )}\n              </Toast.Content>\n            </Toast.Root>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nfunction AnchoredToasts({\n  portalProps,\n}: {\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal-anchored\" {...portalProps}>\n      <Toast.Viewport\n        className=\"outline-none\"\n        data-slot=\"toast-viewport-anchored\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n          const toastData = toast.data as ToastData | undefined;\n          const tooltipStyle = toastData?.tooltipStyle ?? false;\n          const positionerProps = toast.positionerProps;\n\n          if (!positionerProps?.anchor) {\n            return null;\n          }\n\n          return (\n            <Toast.Positioner\n              key={toast.id}\n              className=\"z-50 max-w-[min(--spacing(64),var(--available-width))]\"\n              data-slot=\"toast-positioner\"\n              sideOffset={positionerProps.sideOffset ?? 4}\n              toast={toast}\n            >\n              <Toast.Root\n                className={cn(\n                  \"relative text-balance border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                  tooltipStyle\n                    ? \"rounded-md shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]\"\n                    : \"rounded-lg shadow-lg/5 before:rounded-[calc(var(--radius-lg)-1px)]\",\n                  upsertReplayClassName(toast),\n                )}\n                {...toastData?.rootProps}\n                data-slot=\"toast-popup\"\n                toast={toast}\n              >\n                {tooltipStyle ? (\n                  <Toast.Content className=\"pointer-events-auto px-2 py-1\">\n                    <Toast.Title data-slot=\"toast-title\" />\n                  </Toast.Content>\n                ) : (\n                  <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm\">\n                    <div className=\"flex gap-2\">\n                      {Icon && (\n                        <div\n                          className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                          data-slot=\"toast-icon\"\n                        >\n                          <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                        </div>\n                      )}\n\n                      <div className=\"flex flex-col gap-0.5\">\n                        <Toast.Title\n                          className=\"font-medium\"\n                          data-slot=\"toast-title\"\n                        />\n                        <Toast.Description\n                          className=\"text-muted-foreground\"\n                          data-slot=\"toast-description\"\n                        />\n                      </div>\n                    </div>\n                    {toast.actionProps && (\n                      <Toast.Action\n                        className={buttonVariants({ size: \"xs\" })}\n                        data-slot=\"toast-action\"\n                      >\n                        {toast.actionProps.children}\n                      </Toast.Action>\n                    )}\n                  </Toast.Content>\n                )}\n              </Toast.Root>\n            </Toast.Positioner>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nexport const toastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\n\nexport const anchoredToastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\n\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport interface ToastProviderProps extends Toast.Provider.Props {\n  position?: ToastPosition;\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}\n\nexport function ToastProvider({\n  children,\n  position = \"bottom-right\",\n  portalProps,\n  ...props\n}: ToastProviderProps): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={toastManager} {...props}>\n      {children}\n      <Toasts portalProps={portalProps} position={position} />\n    </Toast.Provider>\n  );\n}\n\nexport interface AnchoredToastProviderProps extends Toast.Provider.Props {\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}\n\nexport function AnchoredToastProvider({\n  children,\n  portalProps,\n  ...props\n}: AnchoredToastProviderProps): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={anchoredToastManager} {...props}>\n      {children}\n      <AnchoredToasts portalProps={portalProps} />\n    </Toast.Provider>\n  );\n}\n\nexport { Toast as ToastPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/registry/default/ui/toast.tsx b/apps/ui/registry/default/ui/toast.tsx
index 4acb3e350..33c206ed5 100644
--- a/apps/ui/registry/default/ui/toast.tsx
+++ b/apps/ui/registry/default/ui/toast.tsx
@@ -124,7 +124,8 @@ function Toasts({
                 "data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]",
                 "data-ending-style:opacity-0",
                 // Ending animations (direction-aware)
-                "data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]",
+                "data-[position*=top]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(-100%-var(--toast-inset)))]",
+                "data-[position*=bottom]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]",
                 "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
                 "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
                 "data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]",
diff --git a/packages/ui/src/components/toast.tsx b/packages/ui/src/components/toast.tsx
index 413a10c39..255354752 100644
--- a/packages/ui/src/components/toast.tsx
+++ b/packages/ui/src/components/toast.tsx
@@ -124,7 +124,8 @@ function Toasts({
                 "data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]",
                 "data-ending-style:opacity-0",
                 // Ending animations (direction-aware)
-                "data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]",
+                "data-[position*=top]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(-100%-var(--toast-inset)))]",
+                "data-[position*=bottom]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]",
                 "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
                 "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
                 "data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]",

From caaf517f4ac770cf014fc5022dde8eb64be66c8b Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Wed, 29 Jul 2026 19:52:38 +0200
Subject: [PATCH 36/49] fix(input-group): prevent addon text from being cut off
 (#827)

* fix(input-group): prevent addon text from being cut off

Remove leading-none so line-clamp/truncate no longer clips InputGroupText.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(input-group): use truncate instead of line-clamp on addon text

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/ui/public/r/input-group.json           | 2 +-
 apps/ui/registry/default/ui/input-group.tsx | 4 ++--
 packages/ui/src/components/input-group.tsx  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/ui/public/r/input-group.json b/apps/ui/public/r/input-group.json
index 6b0ab371c..321663787 100644
--- a/apps/ui/public/r/input-group.json
+++ b/apps/ui/public/r/input-group.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/ui/input-group.tsx",
-      "content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input, type InputProps } from \"@/registry/default/ui/input\";\nimport { Textarea, type TextareaProps } from \"@/registry/default/ui/textarea\";\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text select-none items-center justify-center gap-2 leading-none [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80\",\n  {\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n    variants: {\n      align: {\n        \"block-end\":\n          \"order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"inline-end\":\n          \"order-last pe-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]\",\n        \"inline-start\":\n          \"order-first ps-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]\",\n      },\n    },\n  },\n);\n\nexport function InputGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]\",\n        className,\n      )}\n      data-slot=\"input-group\"\n      role=\"group\"\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>): React.ReactElement {\n  return (\n    <div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      data-slot=\"input-group-addon\"\n      onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {\n        const target = e.target as HTMLElement;\n        const isInteractive = target.closest(\n          \"button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']\",\n        );\n        if (isInteractive) return;\n        e.preventDefault();\n        const parent = e.currentTarget.parentElement;\n        const input = parent?.querySelector<\n          HTMLInputElement | HTMLTextAreaElement\n        >(\"input, textarea\");\n        if (input && !parent?.querySelector(\"input:focus, textarea:focus\")) {\n          input.focus();\n        }\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupText({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      className={cn(\n        \"line-clamp-1 flex items-center gap-2 whitespace-nowrap text-muted-foreground leading-none in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupInput({\n  className,\n  ...props\n}: InputProps): React.ReactElement {\n  return <Input className={className} unstyled {...props} />;\n}\n\nexport function InputGroupTextarea({\n  className,\n  ...props\n}: TextareaProps): React.ReactElement {\n  return <Textarea className={className} unstyled {...props} />;\n}\n",
+      "content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input, type InputProps } from \"@/registry/default/ui/input\";\nimport { Textarea, type TextareaProps } from \"@/registry/default/ui/textarea\";\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text select-none items-center justify-center gap-2 [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80\",\n  {\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n    variants: {\n      align: {\n        \"block-end\":\n          \"order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"inline-end\":\n          \"order-last pe-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]\",\n        \"inline-start\":\n          \"order-first ps-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]\",\n      },\n    },\n  },\n);\n\nexport function InputGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]\",\n        className,\n      )}\n      data-slot=\"input-group\"\n      role=\"group\"\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>): React.ReactElement {\n  return (\n    <div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      data-slot=\"input-group-addon\"\n      onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {\n        const target = e.target as HTMLElement;\n        const isInteractive = target.closest(\n          \"button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']\",\n        );\n        if (isInteractive) return;\n        e.preventDefault();\n        const parent = e.currentTarget.parentElement;\n        const input = parent?.querySelector<\n          HTMLInputElement | HTMLTextAreaElement\n        >(\"input, textarea\");\n        if (input && !parent?.querySelector(\"input:focus, textarea:focus\")) {\n          input.focus();\n        }\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupText({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 truncate text-muted-foreground in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupInput({\n  className,\n  ...props\n}: InputProps): React.ReactElement {\n  return <Input className={className} unstyled {...props} />;\n}\n\nexport function InputGroupTextarea({\n  className,\n  ...props\n}: TextareaProps): React.ReactElement {\n  return <Textarea className={className} unstyled {...props} />;\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/registry/default/ui/input-group.tsx b/apps/ui/registry/default/ui/input-group.tsx
index ef5c0baa7..a6b2c9da2 100644
--- a/apps/ui/registry/default/ui/input-group.tsx
+++ b/apps/ui/registry/default/ui/input-group.tsx
@@ -7,7 +7,7 @@ import { Input, type InputProps } from "@/registry/default/ui/input";
 import { Textarea, type TextareaProps } from "@/registry/default/ui/textarea";
 
 const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text select-none items-center justify-center gap-2 leading-none [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80",
+  "flex h-auto cursor-text select-none items-center justify-center gap-2 [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80",
   {
     defaultVariants: {
       align: "inline-start",
@@ -82,7 +82,7 @@ export function InputGroupText({
   return (
     <span
       className={cn(
-        "line-clamp-1 flex items-center gap-2 whitespace-nowrap text-muted-foreground leading-none in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5",
+        "flex items-center gap-2 truncate text-muted-foreground in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5",
         className,
       )}
       {...props}
diff --git a/packages/ui/src/components/input-group.tsx b/packages/ui/src/components/input-group.tsx
index 0b322b2f3..e989bddb6 100644
--- a/packages/ui/src/components/input-group.tsx
+++ b/packages/ui/src/components/input-group.tsx
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 
 const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text select-none items-center justify-center gap-2 leading-none [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80",
+  "flex h-auto cursor-text select-none items-center justify-center gap-2 [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80",
   {
     defaultVariants: {
       align: "inline-start",
@@ -82,7 +82,7 @@ export function InputGroupText({
   return (
     <span
       className={cn(
-        "line-clamp-1 flex items-center gap-2 whitespace-nowrap text-muted-foreground leading-none in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5",
+        "flex items-center gap-2 truncate text-muted-foreground in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5",
         className,
       )}
       {...props}

From 8d1942467029030ed97b90d2e89591901448072e Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Fri, 31 Jul 2026 11:35:57 +0200
Subject: [PATCH 37/49] feat(scroll-area): make overscroll contain opt-in
 (#829)

* feat(scroll-area): make overscroll contain opt-in

Stop applying overscroll-contain by default and expose overscrollContain
so nested surfaces can opt in without forcing it on every ScrollArea.

Co-authored-by: Cursor <cursoragent@cursor.com>

* reg build

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../apps/analytics/analytics-apps-content.tsx |  1 +
 .../webhooks/new/new-webhook-form-fields.tsx  |  1 +
 .../calcom/components/app/app-command.tsx     |  2 +-
 .../calcom/components/app/bookings-nav.tsx    |  2 +-
 .../examples/calcom/components/ui/sidebar.tsx |  2 +-
 apps/ui/app/docs/[[...slug]]/page.tsx         |  1 +
 apps/ui/content/docs/(root)/changelog.mdx     | 23 +++++++++++++++++++
 .../content/docs/components/scroll-area.mdx   | 14 +++++++++++
 apps/ui/public/r/autocomplete.json            |  2 +-
 apps/ui/public/r/combobox.json                |  2 +-
 apps/ui/public/r/dialog.json                  |  2 +-
 apps/ui/public/r/drawer.json                  |  2 +-
 apps/ui/public/r/p-calendar-19.json           |  2 +-
 apps/ui/public/r/p-command-2.json             |  2 +-
 apps/ui/public/r/scroll-area.json             |  2 +-
 apps/ui/public/r/sheet.json                   |  2 +-
 apps/ui/public/r/sidebar.json                 |  2 +-
 .../default/particles/p-calendar-19.tsx       |  7 +++++-
 .../default/particles/p-command-2.tsx         |  2 +-
 apps/ui/registry/default/ui/autocomplete.tsx  |  2 +-
 apps/ui/registry/default/ui/combobox.tsx      |  2 +-
 apps/ui/registry/default/ui/dialog.tsx        |  2 +-
 apps/ui/registry/default/ui/drawer.tsx        |  6 ++++-
 apps/ui/registry/default/ui/scroll-area.tsx   |  6 ++++-
 apps/ui/registry/default/ui/sheet.tsx         |  2 +-
 apps/ui/registry/default/ui/sidebar.tsx       |  2 +-
 .../coss/references/primitives/scroll-area.md | 11 +++++++++
 packages/ui/src/components/autocomplete.tsx   |  2 +-
 packages/ui/src/components/combobox.tsx       |  2 +-
 packages/ui/src/components/dialog.tsx         |  2 +-
 packages/ui/src/components/drawer.tsx         |  6 ++++-
 packages/ui/src/components/scroll-area.tsx    |  6 ++++-
 packages/ui/src/components/sheet.tsx          |  2 +-
 packages/ui/src/components/sidebar.tsx        |  2 +-
 34 files changed, 100 insertions(+), 28 deletions(-)

diff --git a/apps/examples/calcom/app/(settings)/settings/admin/apps/analytics/analytics-apps-content.tsx b/apps/examples/calcom/app/(settings)/settings/admin/apps/analytics/analytics-apps-content.tsx
index f6159df57..66d80257a 100644
--- a/apps/examples/calcom/app/(settings)/settings/admin/apps/analytics/analytics-apps-content.tsx
+++ b/apps/examples/calcom/app/(settings)/settings/admin/apps/analytics/analytics-apps-content.tsx
@@ -475,6 +475,7 @@ export function AnalyticsAppsContent() {
         {isSmallScreen ? (
           <ScrollArea
             className="-mx-4 w-[calc(100%+--spacing(4)*2)]"
+            overscrollContain
             scrollbarGutter
           >
             <div className="flex w-max gap-0.5 px-4">
diff --git a/apps/examples/calcom/app/(settings)/settings/developer/webhooks/new/new-webhook-form-fields.tsx b/apps/examples/calcom/app/(settings)/settings/developer/webhooks/new/new-webhook-form-fields.tsx
index 50b413029..a5ec1abee 100644
--- a/apps/examples/calcom/app/(settings)/settings/developer/webhooks/new/new-webhook-form-fields.tsx
+++ b/apps/examples/calcom/app/(settings)/settings/developer/webhooks/new/new-webhook-form-fields.tsx
@@ -220,6 +220,7 @@ export function NewWebhookFormFields() {
               <CollapsiblePanel>
                 <ScrollArea
                   className="mt-4 h-64 rounded-lg border border-input"
+                  overscrollContain
                   scrollbarGutter
                   scrollFade
                 >
diff --git a/apps/examples/calcom/components/app/app-command.tsx b/apps/examples/calcom/components/app/app-command.tsx
index 742151a7e..dc229304d 100644
--- a/apps/examples/calcom/components/app/app-command.tsx
+++ b/apps/examples/calcom/components/app/app-command.tsx
@@ -631,7 +631,7 @@ export function AppCommand(): React.ReactElement {
               </Button>
             </div>
             <CommandPanel>
-              <ScrollArea scrollbarGutter scrollFade>
+              <ScrollArea overscrollContain scrollbarGutter scrollFade>
                 <div className="p-5">
                   {!aiState.isGenerating &&
                     !aiState.response &&
diff --git a/apps/examples/calcom/components/app/bookings-nav.tsx b/apps/examples/calcom/components/app/bookings-nav.tsx
index ba8590f3f..392fed626 100644
--- a/apps/examples/calcom/components/app/bookings-nav.tsx
+++ b/apps/examples/calcom/components/app/bookings-nav.tsx
@@ -14,7 +14,7 @@ const bookingTabs: Tab[] = [
 function BookingsNav(): React.ReactElement {
   return (
     <div className="max-sm:-mx-4 max-sm:-my-0.5">
-      <ScrollArea scrollbarGutter scrollFade>
+      <ScrollArea overscrollContain scrollbarGutter scrollFade>
         <div className="w-fit max-sm:px-4 max-sm:py-0.5">
           <TabbedNav
             ariaLabel="Filter bookings"
diff --git a/apps/examples/calcom/components/ui/sidebar.tsx b/apps/examples/calcom/components/ui/sidebar.tsx
index 6a0a41e93..fdacca037 100644
--- a/apps/examples/calcom/components/ui/sidebar.tsx
+++ b/apps/examples/calcom/components/ui/sidebar.tsx
@@ -167,7 +167,7 @@ export function SidebarContent({
   ...props
 }: React.ComponentProps<"div">): React.ReactElement {
   return (
-    <ScrollArea className="min-h-0 flex-1" fill scrollFade>
+    <ScrollArea className="min-h-0 flex-1" fill overscrollContain scrollFade>
       <div
         className={cn("flex h-full flex-col gap-2 px-2", className)}
         data-sidebar="content"
diff --git a/apps/ui/app/docs/[[...slug]]/page.tsx b/apps/ui/app/docs/[[...slug]]/page.tsx
index e8323a753..6946d956e 100644
--- a/apps/ui/app/docs/[[...slug]]/page.tsx
+++ b/apps/ui/app/docs/[[...slug]]/page.tsx
@@ -113,6 +113,7 @@ export default async function Page(props: {
       <div className="sticky top-(--header-height) z-30 ms-auto hidden h-[calc(100svh-var(--header-height))] w-72 flex-col overflow-hidden overscroll-none xl:flex">
         <ScrollArea
           className="**:data-[slot=scroll-area-scrollbar]:hidden"
+          overscrollContain
           scrollFade
         >
           <div className="flex min-h-0 flex-col gap-2 py-2">
diff --git a/apps/ui/content/docs/(root)/changelog.mdx b/apps/ui/content/docs/(root)/changelog.mdx
index f4cf8fd68..61597e582 100644
--- a/apps/ui/content/docs/(root)/changelog.mdx
+++ b/apps/ui/content/docs/(root)/changelog.mdx
@@ -3,6 +3,29 @@ title: Changelog
 description: Breaking changes, migration guides, and notable updates.
 ---
 
+## July 31, 2026
+
+### Scroll Area — overscroll contain
+
+**`ScrollArea`** no longer applies **`overscroll-behavior: contain`** by default. Use the new optional **`overscrollContain`** prop (default **`false`**) to opt in.
+
+Nested surfaces that should not chain scroll to the page already pass it: **`DialogPanel`**, **`SheetPanel`**, **`DrawerPanel`**, **`ComboboxList`**, **`AutocompleteList`**, and **`SidebarContent`**.
+
+**Migration:**
+
+No change required for those composed parts after upgrading. For custom nested scroll areas (command menus, calendar time lists, vendored **`sidebar.tsx`**, etc.), opt in explicitly:
+
+```diff
+- <ScrollArea scrollbarGutter scrollFade>
++ <ScrollArea overscrollContain scrollbarGutter scrollFade>
+```
+
+**Agent migration prompt:**
+
+```text
+After upgrading @coss/scroll-area, ScrollArea no longer applies overscroll-contain by default. Add overscrollContain only on nested scroll surfaces where wheel/touch should not chain to a parent scroller (dialogs, sheets, drawers, popups, sidebars, command panels). DialogPanel, SheetPanel, DrawerPanel, ComboboxList, AutocompleteList, and SidebarContent already pass overscrollContain—update local copies of those components if you vendor them.
+```
+
 ## July 26, 2026
 
 ### React DayPicker 10
diff --git a/apps/ui/content/docs/components/scroll-area.mdx b/apps/ui/content/docs/components/scroll-area.mdx
index 6fa6472ae..54aba4ee6 100644
--- a/apps/ui/content/docs/components/scroll-area.mdx
+++ b/apps/ui/content/docs/components/scroll-area.mdx
@@ -79,6 +79,7 @@ Root component. Styled wrapper for `ScrollArea.Root` from Base UI with custom sc
 | `scrollbarGutter`       | `boolean` | `false` | Reserves space for the scrollbar to prevent layout shifts |
 | `fill`                  | `boolean` | `false` | Applies `size-full` to the scroll area content wrapper so flex layouts (e.g. `mt-auto` footers) can fill the viewport height |
 | `clampContentMinWidth`  | `boolean` | `true`  | Sets `minWidth: 0` on the content wrapper to avoid spurious horizontal scrollbars in vertical layouts |
+| `overscrollContain`     | `boolean` | `false` | Prevents scroll chaining into parent scrollers when the viewport overflows |
 
 ### ScrollAreaViewport
 
@@ -133,6 +134,18 @@ Use `fill` when the scroll area wraps a flex column that should stretch to the f
 
 Leave `fill` at the default (`false`) for content-sized areas such as lists, comboboxes, and dialogs where overflow should track child height.
 
+### Overscroll contain
+
+Use **`overscrollContain`** to stop wheel/touch scrolling from chaining into a parent scroller once the viewport hits its edge. Dialog, sheet, drawer, combobox, autocomplete, and sidebar already opt in; pass it yourself for custom nested scroll surfaces.
+
+```tsx
+<ScrollArea className="h-64" overscrollContain>
+  <div className="p-4">{/* Long content */}</div>
+</ScrollArea>
+```
+
+Leave it at the default (`false`) for standalone scroll areas where natural scroll chaining is preferred.
+
 ### Content min-width
 
 Base UI sets `min-width: fit-content` on the content wrapper, which often causes unwanted horizontal scroll in vertical lists and panels (dialogs, comboboxes, sidebars). **`clampContentMinWidth`** defaults to **`true`** and applies `minWidth: 0` to prevent that.
@@ -141,4 +154,5 @@ Horizontal scroll still works when children define their own width (e.g. `w-max`
 
 ## Changelog
 
+- [July 31, 2026](/ui/docs/changelog#scroll-area--overscroll-contain) — **`ScrollArea`** no longer applies overscroll contain by default; pass optional **`overscrollContain`** for nested surfaces. Dialog, sheet, drawer, combobox, autocomplete, and sidebar already opt in.
 - [May 29, 2026](/ui/docs/changelog#scroll-area) — **`ScrollArea`** adds optional **`fill`** (default **`false`**); pass **`fill`** for flex layouts that need the content wrapper to stretch (e.g. sidebar footers with **`mt-auto`**).
diff --git a/apps/ui/public/r/autocomplete.json b/apps/ui/public/r/autocomplete.json
index bdfadac5f..5daec578f 100644
--- a/apps/ui/public/r/autocomplete.json
+++ b/apps/ui/public/r/autocomplete.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/autocomplete.tsx",
-      "content": "\"use client\";\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const Autocomplete: typeof AutocompletePrimitive.Root =\n  AutocompletePrimitive.Root;\n\nexport function AutocompleteInput({\n  className,\n  showTrigger = false,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<AutocompletePrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: AutocompletePrimitive.Trigger.Props;\n  clearProps?: AutocompletePrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <AutocompletePrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"autocomplete-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"autocomplete-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <AutocompletePrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=autocomplete-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5\"\n            : \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"autocomplete-input\"\n        render={<Input nativeInput size={sizeValue} />}\n        {...props}\n      />\n      {showTrigger && (\n        <AutocompleteTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <AutocompletePrimitive.Icon data-slot=\"autocomplete-icon\">\n            <ChevronsUpDownIcon />\n          </AutocompletePrimitive.Icon>\n        </AutocompleteTrigger>\n      )}\n      {showClear && (\n        <AutocompleteClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </AutocompleteClear>\n      )}\n    </AutocompletePrimitive.InputGroup>\n  );\n}\n\nexport function AutocompletePopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor,\n  portalProps,\n  ...props\n}: AutocompletePrimitive.Popup.Props & {\n  align?: AutocompletePrimitive.Positioner.Props[\"align\"];\n  sideOffset?: AutocompletePrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: AutocompletePrimitive.Positioner.Props[\"alignOffset\"];\n  side?: AutocompletePrimitive.Positioner.Props[\"side\"];\n  anchor?: AutocompletePrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: AutocompletePrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Portal {...portalProps}>\n      <AutocompletePrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"autocomplete-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <AutocompletePrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"autocomplete-popup\"\n            {...props}\n          >\n            {children}\n          </AutocompletePrimitive.Popup>\n        </span>\n      </AutocompletePrimitive.Positioner>\n    </AutocompletePrimitive.Portal>\n  );\n}\n\nexport function AutocompleteItem({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Item.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Item\n      className={cn(\n        \"flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-item\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Item>\n  );\n}\n\nexport function AutocompleteSeparator({\n  className,\n  ...props\n}: AutocompletePrimitive.Separator.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"autocomplete-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroup({\n  className,\n  ...props\n}: AutocompletePrimitive.Group.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"autocomplete-group\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroupLabel({\n  className,\n  ...props\n}: AutocompletePrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"autocomplete-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteEmpty({\n  className,\n  ...props\n}: AutocompletePrimitive.Empty.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteRow({\n  className,\n  ...props\n}: AutocompletePrimitive.Row.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Row\n      className={className}\n      data-slot=\"autocomplete-row\"\n      {...props}\n    />\n  );\n}\n\nexport const AutocompleteValue: typeof AutocompletePrimitive.Value =\n  AutocompletePrimitive.Value;\n\nexport function AutocompleteList({\n  className,\n  ...props\n}: AutocompletePrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea scrollbarGutter scrollFade>\n      <AutocompletePrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"autocomplete-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function AutocompleteClear({\n  className,\n  ...props\n}: AutocompletePrimitive.Clear.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Clear\n      className={cn(\n        \"absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-[color,background-color,box-shadow,opacity] pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-clear\"\n      {...props}\n    >\n      <XIcon />\n    </AutocompletePrimitive.Clear>\n  );\n}\n\nexport function AutocompleteStatus({\n  className,\n  ...props\n}: AutocompletePrimitive.Status.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-status\"\n      {...props}\n    />\n  );\n}\n\nexport const AutocompleteCollection: typeof AutocompletePrimitive.Collection =\n  AutocompletePrimitive.Collection;\n\nexport function AutocompleteTrigger({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Trigger\n      className={className}\n      data-slot=\"autocomplete-trigger\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Trigger>\n  );\n}\n\nexport const useAutocompleteFilter: typeof AutocompletePrimitive.useFilter =\n  AutocompletePrimitive.useFilter;\n\nexport { AutocompletePrimitive };\n",
+      "content": "\"use client\";\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const Autocomplete: typeof AutocompletePrimitive.Root =\n  AutocompletePrimitive.Root;\n\nexport function AutocompleteInput({\n  className,\n  showTrigger = false,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<AutocompletePrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: AutocompletePrimitive.Trigger.Props;\n  clearProps?: AutocompletePrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <AutocompletePrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"autocomplete-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"autocomplete-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <AutocompletePrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=autocomplete-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5\"\n            : \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"autocomplete-input\"\n        render={<Input nativeInput size={sizeValue} />}\n        {...props}\n      />\n      {showTrigger && (\n        <AutocompleteTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <AutocompletePrimitive.Icon data-slot=\"autocomplete-icon\">\n            <ChevronsUpDownIcon />\n          </AutocompletePrimitive.Icon>\n        </AutocompleteTrigger>\n      )}\n      {showClear && (\n        <AutocompleteClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </AutocompleteClear>\n      )}\n    </AutocompletePrimitive.InputGroup>\n  );\n}\n\nexport function AutocompletePopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor,\n  portalProps,\n  ...props\n}: AutocompletePrimitive.Popup.Props & {\n  align?: AutocompletePrimitive.Positioner.Props[\"align\"];\n  sideOffset?: AutocompletePrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: AutocompletePrimitive.Positioner.Props[\"alignOffset\"];\n  side?: AutocompletePrimitive.Positioner.Props[\"side\"];\n  anchor?: AutocompletePrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: AutocompletePrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Portal {...portalProps}>\n      <AutocompletePrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"autocomplete-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <AutocompletePrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"autocomplete-popup\"\n            {...props}\n          >\n            {children}\n          </AutocompletePrimitive.Popup>\n        </span>\n      </AutocompletePrimitive.Positioner>\n    </AutocompletePrimitive.Portal>\n  );\n}\n\nexport function AutocompleteItem({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Item.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Item\n      className={cn(\n        \"flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-item\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Item>\n  );\n}\n\nexport function AutocompleteSeparator({\n  className,\n  ...props\n}: AutocompletePrimitive.Separator.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"autocomplete-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroup({\n  className,\n  ...props\n}: AutocompletePrimitive.Group.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"autocomplete-group\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroupLabel({\n  className,\n  ...props\n}: AutocompletePrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"autocomplete-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteEmpty({\n  className,\n  ...props\n}: AutocompletePrimitive.Empty.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteRow({\n  className,\n  ...props\n}: AutocompletePrimitive.Row.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Row\n      className={className}\n      data-slot=\"autocomplete-row\"\n      {...props}\n    />\n  );\n}\n\nexport const AutocompleteValue: typeof AutocompletePrimitive.Value =\n  AutocompletePrimitive.Value;\n\nexport function AutocompleteList({\n  className,\n  ...props\n}: AutocompletePrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea overscrollContain scrollbarGutter scrollFade>\n      <AutocompletePrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"autocomplete-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function AutocompleteClear({\n  className,\n  ...props\n}: AutocompletePrimitive.Clear.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Clear\n      className={cn(\n        \"absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-[color,background-color,box-shadow,opacity] pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-clear\"\n      {...props}\n    >\n      <XIcon />\n    </AutocompletePrimitive.Clear>\n  );\n}\n\nexport function AutocompleteStatus({\n  className,\n  ...props\n}: AutocompletePrimitive.Status.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-status\"\n      {...props}\n    />\n  );\n}\n\nexport const AutocompleteCollection: typeof AutocompletePrimitive.Collection =\n  AutocompletePrimitive.Collection;\n\nexport function AutocompleteTrigger({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Trigger\n      className={className}\n      data-slot=\"autocomplete-trigger\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Trigger>\n  );\n}\n\nexport const useAutocompleteFilter: typeof AutocompletePrimitive.useFilter =\n  AutocompletePrimitive.useFilter;\n\nexport { AutocompletePrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/combobox.json b/apps/ui/public/r/combobox.json
index 868d7d2d5..601f60aeb 100644
--- a/apps/ui/public/r/combobox.json
+++ b/apps/ui/public/r/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/combobox.tsx",
-      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const ComboboxContext: React.Context<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}> = React.createContext<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}>({\n  chipsRef: null,\n  multiple: false,\n});\n\nexport function Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>,\n): React.ReactElement {\n  const chipsRef = React.useRef<Element | null>(null);\n  return (\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxContext.Provider>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  size,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\",\n        sizeValue === \"sm\" ? \"ps-1.5\" : \"ps-2\",\n        className,\n      )}\n      data-size={typeof sizeValue === \"string\" ? sizeValue : undefined}\n      data-slot=\"combobox-chips-input\"\n      size={typeof sizeValue === \"number\" ? sizeValue : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxInput({\n  className,\n  showTrigger = true,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\n  clearProps?: ComboboxPrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"combobox-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <ComboboxPrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\"\n            : \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"combobox-input\"\n        render={\n          <Input\n            className=\"has-disabled:opacity-100\"\n            nativeInput\n            size={sizeValue}\n          />\n        }\n        {...props}\n      />\n      {showTrigger && (\n        <ComboboxTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <ComboboxPrimitive.Icon data-slot=\"combobox-icon\">\n            <ChevronsUpDownIcon />\n          </ComboboxPrimitive.Icon>\n        </ComboboxTrigger>\n      )}\n      {showClear && (\n        <ComboboxClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </ComboboxClear>\n      )}\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={className}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport function ComboboxPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor: anchorProp,\n  portalProps,\n  ...props\n}: ComboboxPrimitive.Popup.Props & {\n  align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: ComboboxPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n  const anchor = anchorProp ?? chipsRef;\n\n  return (\n    <ComboboxPrimitive.Portal {...portalProps}>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <ComboboxPrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"combobox-popup\"\n            {...props}\n          >\n            {children}\n          </ComboboxPrimitive.Popup>\n        </span>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ComboboxPrimitive.ItemIndicator>\n      <div className=\"col-start-2\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxEmpty({\n  className,\n  ...props\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxRow({\n  className,\n  ...props\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Row\n      className={className}\n      data-slot=\"combobox-row\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxValue: typeof ComboboxPrimitive.Value =\n  ComboboxPrimitive.Value;\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComboboxPrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea scrollbarGutter scrollFade>\n      <ComboboxPrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"combobox-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function ComboboxClear({\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Clear\n      className={className}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxCollection: typeof ComboboxPrimitive.Collection =\n  ComboboxPrimitive.Collection;\n\nexport function ComboboxChips({\n  className,\n  children,\n  startAddon,\n  ...props\n}: ComboboxPrimitive.Chips.Props & {\n  startAddon?: React.ReactNode;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"combobox-chips\"\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\n      {...props}\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      {children}\n    </ComboboxPrimitive.Chips>\n  );\n}\n\nexport function ComboboxChip({\n  children,\n  removeProps,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\n}): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Chip\n      className=\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove {...removeProps} />\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nexport function ComboboxChipRemove(\n  props: ComboboxPrimitive.ChipRemove.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      aria-label=\"Remove\"\n      className=\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      <XIcon />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\n  ComboboxPrimitive.useFilter;\n\nexport { ComboboxPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const ComboboxContext: React.Context<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}> = React.createContext<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}>({\n  chipsRef: null,\n  multiple: false,\n});\n\nexport function Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>,\n): React.ReactElement {\n  const chipsRef = React.useRef<Element | null>(null);\n  return (\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxContext.Provider>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  size,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\",\n        sizeValue === \"sm\" ? \"ps-1.5\" : \"ps-2\",\n        className,\n      )}\n      data-size={typeof sizeValue === \"string\" ? sizeValue : undefined}\n      data-slot=\"combobox-chips-input\"\n      size={typeof sizeValue === \"number\" ? sizeValue : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxInput({\n  className,\n  showTrigger = true,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\n  clearProps?: ComboboxPrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"combobox-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <ComboboxPrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\"\n            : \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"combobox-input\"\n        render={\n          <Input\n            className=\"has-disabled:opacity-100\"\n            nativeInput\n            size={sizeValue}\n          />\n        }\n        {...props}\n      />\n      {showTrigger && (\n        <ComboboxTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <ComboboxPrimitive.Icon data-slot=\"combobox-icon\">\n            <ChevronsUpDownIcon />\n          </ComboboxPrimitive.Icon>\n        </ComboboxTrigger>\n      )}\n      {showClear && (\n        <ComboboxClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </ComboboxClear>\n      )}\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={className}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport function ComboboxPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor: anchorProp,\n  portalProps,\n  ...props\n}: ComboboxPrimitive.Popup.Props & {\n  align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: ComboboxPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n  const anchor = anchorProp ?? chipsRef;\n\n  return (\n    <ComboboxPrimitive.Portal {...portalProps}>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <ComboboxPrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"combobox-popup\"\n            {...props}\n          >\n            {children}\n          </ComboboxPrimitive.Popup>\n        </span>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ComboboxPrimitive.ItemIndicator>\n      <div className=\"col-start-2\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxEmpty({\n  className,\n  ...props\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxRow({\n  className,\n  ...props\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Row\n      className={className}\n      data-slot=\"combobox-row\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxValue: typeof ComboboxPrimitive.Value =\n  ComboboxPrimitive.Value;\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComboboxPrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea overscrollContain scrollbarGutter scrollFade>\n      <ComboboxPrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"combobox-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function ComboboxClear({\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Clear\n      className={className}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxCollection: typeof ComboboxPrimitive.Collection =\n  ComboboxPrimitive.Collection;\n\nexport function ComboboxChips({\n  className,\n  children,\n  startAddon,\n  ...props\n}: ComboboxPrimitive.Chips.Props & {\n  startAddon?: React.ReactNode;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"combobox-chips\"\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\n      {...props}\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      {children}\n    </ComboboxPrimitive.Chips>\n  );\n}\n\nexport function ComboboxChip({\n  children,\n  removeProps,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\n}): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Chip\n      className=\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove {...removeProps} />\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nexport function ComboboxChipRemove(\n  props: ComboboxPrimitive.ChipRemove.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      aria-label=\"Remove\"\n      className=\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      <XIcon />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\n  ComboboxPrimitive.useFilter;\n\nexport { ComboboxPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/dialog.json b/apps/ui/public/r/dialog.json
index b718782df..36e9934f5 100644
--- a/apps/ui/public/r/dialog.json
+++ b/apps/ui/public/r/dialog.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/dialog.tsx",
-      "content": "\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const DialogCreateHandle: typeof DialogPrimitive.createHandle =\n  DialogPrimitive.createHandle;\n\nexport const Dialog: typeof DialogPrimitive.Root = DialogPrimitive.Root;\n\nexport const DialogPortal: typeof DialogPrimitive.Portal =\n  DialogPrimitive.Portal;\n\nexport function DialogTrigger(\n  props: DialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nexport function DialogClose(\n  props: DialogPrimitive.Close.Props,\n): React.ReactElement {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nexport function DialogBackdrop({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogViewport({\n  className,\n  ...props\n}: DialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\",\n        className,\n      )}\n      data-slot=\"dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogPopup({\n  className,\n  children,\n  showCloseButton = true,\n  bottomStickOnMobile = true,\n  closeProps,\n  portalProps,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  bottomStickOnMobile?: boolean;\n  closeProps?: DialogPrimitive.Close.Props;\n  portalProps?: DialogPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <DialogPortal {...portalProps}>\n      <DialogBackdrop />\n      <DialogViewport\n        className={cn(\n          bottomStickOnMobile &&\n            \"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\",\n        )}\n      >\n        <DialogPrimitive.Popup\n          className={cn(\n            \"relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            bottomStickOnMobile &&\n              \"max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none\",\n            className,\n          )}\n          data-slot=\"dialog-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DialogPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n              {...closeProps}\n            >\n              <XIcon />\n            </DialogPrimitive.Close>\n          )}\n        </DialogPrimitive.Popup>\n      </DialogViewport>\n    </DialogPortal>\n  );\n}\n\nexport function DialogHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4\",\n      className,\n    ),\n    \"data-slot\": \"dialog-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DialogFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n      variant === \"default\" && \"border-t bg-muted/72 py-4\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6\",\n      className,\n    ),\n    \"data-slot\": \"dialog-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DialogTitle({\n  className,\n  ...props\n}: DialogPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogPanel({\n  className,\n  scrollFade = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1\",\n      className,\n    ),\n    \"data-slot\": \"dialog-panel\",\n  };\n\n  return (\n    <ScrollArea scrollFade={scrollFade}>\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  );\n}\n\nexport {\n  DialogPrimitive,\n  DialogBackdrop as DialogOverlay,\n  DialogPopup as DialogContent,\n};\n",
+      "content": "\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const DialogCreateHandle: typeof DialogPrimitive.createHandle =\n  DialogPrimitive.createHandle;\n\nexport const Dialog: typeof DialogPrimitive.Root = DialogPrimitive.Root;\n\nexport const DialogPortal: typeof DialogPrimitive.Portal =\n  DialogPrimitive.Portal;\n\nexport function DialogTrigger(\n  props: DialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nexport function DialogClose(\n  props: DialogPrimitive.Close.Props,\n): React.ReactElement {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nexport function DialogBackdrop({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogViewport({\n  className,\n  ...props\n}: DialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\",\n        className,\n      )}\n      data-slot=\"dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogPopup({\n  className,\n  children,\n  showCloseButton = true,\n  bottomStickOnMobile = true,\n  closeProps,\n  portalProps,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  bottomStickOnMobile?: boolean;\n  closeProps?: DialogPrimitive.Close.Props;\n  portalProps?: DialogPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <DialogPortal {...portalProps}>\n      <DialogBackdrop />\n      <DialogViewport\n        className={cn(\n          bottomStickOnMobile &&\n            \"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\",\n        )}\n      >\n        <DialogPrimitive.Popup\n          className={cn(\n            \"relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            bottomStickOnMobile &&\n              \"max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none\",\n            className,\n          )}\n          data-slot=\"dialog-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DialogPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n              {...closeProps}\n            >\n              <XIcon />\n            </DialogPrimitive.Close>\n          )}\n        </DialogPrimitive.Popup>\n      </DialogViewport>\n    </DialogPortal>\n  );\n}\n\nexport function DialogHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4\",\n      className,\n    ),\n    \"data-slot\": \"dialog-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DialogFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n      variant === \"default\" && \"border-t bg-muted/72 py-4\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6\",\n      className,\n    ),\n    \"data-slot\": \"dialog-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DialogTitle({\n  className,\n  ...props\n}: DialogPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogPanel({\n  className,\n  scrollFade = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1\",\n      className,\n    ),\n    \"data-slot\": \"dialog-panel\",\n  };\n\n  return (\n    <ScrollArea overscrollContain scrollFade={scrollFade}>\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  );\n}\n\nexport {\n  DialogPrimitive,\n  DialogBackdrop as DialogOverlay,\n  DialogPopup as DialogContent,\n};\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/drawer.json b/apps/ui/public/r/drawer.json
index 3e0a4429f..1931b5951 100644
--- a/apps/ui/public/r/drawer.json
+++ b/apps/ui/public/r/drawer.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/drawer.tsx",
-      "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst DrawerContext: React.Context<{ position: DrawerPosition }> =\n  createContext<{ position: DrawerPosition }>({\n    position: \"bottom\",\n  });\n\nconst directionMap: Record<\n  DrawerPosition,\n  DrawerPrimitive.Root.Props[\"swipeDirection\"]\n> = {\n  bottom: \"down\",\n  left: \"left\",\n  right: \"right\",\n  top: \"up\",\n};\n\nexport const DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\n  DrawerPrimitive.createHandle;\n\nexport function Drawer({\n  swipeDirection,\n  position = \"bottom\",\n  ...props\n}: DrawerPrimitive.Root.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  return (\n    <DrawerContext.Provider value={{ position }}>\n      <DrawerPrimitive.Root\n        swipeDirection={swipeDirection ?? directionMap[position]}\n        {...props}\n      />\n    </DrawerContext.Provider>\n  );\n}\n\nexport const DrawerPortal: typeof DrawerPrimitive.Portal =\n  DrawerPrimitive.Portal;\n\nexport function DrawerTrigger(\n  props: DrawerPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nexport function DrawerClose(\n  props: DrawerPrimitive.Close.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nexport function DrawerSwipeArea({\n  className,\n  position: positionProp,\n  ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPrimitive.SwipeArea\n      className={cn(\n        \"fixed z-50 touch-none\",\n        position === \"bottom\" && \"inset-x-0 bottom-0 h-8\",\n        position === \"top\" && \"inset-x-0 top-0 h-8\",\n        position === \"left\" && \"inset-y-0 left-0 w-8\",\n        position === \"right\" && \"inset-y-0 right-0 w-8\",\n        className,\n      )}\n      data-slot=\"drawer-swipe-area\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerBackdrop({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute\",\n        className,\n      )}\n      data-slot=\"drawer-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerViewport({\n  className,\n  position,\n  variant = \"default\",\n  ...props\n}: DrawerPrimitive.Viewport.Props & {\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <DrawerPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:0px]\",\n        \"touch-none\",\n        position === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        position === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        position === \"left\" && \"flex justify-start\",\n        position === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"px-(--inset) sm:[--inset:--spacing(4)]\",\n        variant === \"inset\" && position !== \"bottom\" && \"pt-(--inset)\",\n        variant === \"inset\" && position !== \"top\" && \"pb-(--inset)\",\n        className,\n      )}\n      data-slot=\"drawer-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPopup({\n  className,\n  children,\n  showCloseButton = false,\n  position: positionProp,\n  variant = \"default\",\n  showBar = false,\n  portalProps,\n  ...props\n}: DrawerPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n  showBar?: boolean;\n  portalProps?: DrawerPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPortal {...portalProps}>\n      <DrawerBackdrop />\n      <DrawerViewport position={position} variant={variant}>\n        <DrawerPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[transform,box-shadow,height,background-color] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--peek:calc(--spacing(6)-1px)] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:bg-popover data-swiping:select-none data-nested-drawer-open:overflow-hidden data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(2%*(var(--nested-drawers)-var(--stack-progress))))] data-ending-style:shadow-transparent data-starting-style:shadow-transparent data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*(var(--nested-drawers)-var(--stack-progress))))] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            \"touch-none\",\n            position === \"bottom\" &&\n              \"transform-[translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] row-start-2 -mb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] border-t pb-[max(0px,calc(env(safe-area-inset-bottom,0px)+var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding] after:inset-x-0 after:top-full after:h-(--bleed) has-data-[slot=drawer-bar]:pt-2 data-ending-style:mb-0 data-starting-style:mb-0 data-ending-style:pb-0 data-starting-style:pb-0\",\n            position === \"top\" &&\n              \"data-starting-style:transform-[translateY(calc(-100%-var(--inset)))] data-ending-style:transform-[translateY(calc(-100%-var(--inset)))] transform-[translateY(var(--drawer-swipe-movement-y))] border-b after:inset-x-0 after:bottom-full after:h-(--bleed) has-data-[slot=drawer-bar]:pb-2\",\n            position === \"left\" &&\n              \"data-starting-style:transform-[translateX(calc(-100%-var(--inset)))] data-ending-style:transform-[translateX(calc(-100%-var(--inset)))] transform-[translateX(var(--drawer-swipe-movement-x))] w-[calc(100%-(--spacing(12)))] max-w-md border-e after:inset-y-0 after:end-full after:w-(--bleed) has-data-[slot=drawer-bar]:pe-2\",\n            position === \"right\" &&\n              \"transform-[translateX(var(--drawer-swipe-movement-x))] data-ending-style:transform-[translateX(calc(100%+var(--inset)))] data-starting-style:transform-[translateX(calc(100%+var(--inset)))] col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s after:inset-y-0 after:start-full after:w-(--bleed) has-data-[slot=drawer-bar]:ps-2\",\n            variant !== \"straight\" &&\n              cn(\n                position === \"bottom\" && \"rounded-t-2xl\",\n                position === \"top\" &&\n                  \"rounded-b-2xl **:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"rounded-e-2xl **:data-[slot=drawer-footer]:rounded-ee-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"rounded-s-2xl **:data-[slot=drawer-footer]:rounded-es-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"default\" &&\n              cn(\n                position === \"bottom\" &&\n                  \"before:rounded-t-[calc(var(--radius-2xl)-1px)]\",\n                position === \"top\" &&\n                  \"before:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"before:rounded-e-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"before:rounded-s-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:after:bg-transparent sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            variant === \"straight\" && \"[--stack-step:0]\",\n            (position === \"bottom\" || position === \"top\") &&\n              \"h-(--drawer-height,auto) [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))] data-nested-drawer-open:h-(--height)\",\n            position === \"bottom\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_calc(100%-var(--inset))]\",\n            position === \"top\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_var(--inset)]\",\n            position === \"left\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))] origin-right\",\n            position === \"right\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))] origin-left\",\n            className,\n          )}\n          data-slot=\"drawer-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n            >\n              <XIcon />\n            </DrawerPrimitive.Close>\n          )}\n          {showBar && <DrawerBar />}\n        </DrawerPrimitive.Popup>\n      </DrawerViewport>\n    </DrawerPortal>\n  );\n}\n\nexport function DrawerHeader({\n  className,\n  allowSelection = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerFooter({\n  className,\n  variant = \"default\",\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end\",\n      !allowSelection && \"cursor-default\",\n      variant === \"default\" &&\n        \"border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]\",\n      className,\n    ),\n    \"data-slot\": \"drawer-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerTitle({\n  className,\n  ...props\n}: DrawerPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"drawer-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"drawer-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPanel({\n  className,\n  scrollFade = true,\n  scrollable = true,\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n  scrollable?: boolean;\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-panel\",\n  };\n\n  const content = useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n\n  if (scrollable) {\n    return (\n      <ScrollArea className=\"touch-auto\" scrollFade={scrollFade}>\n        {content}\n      </ScrollArea>\n    );\n  }\n\n  return content;\n}\n\nexport function DrawerBar({\n  className,\n  position: positionProp,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n  const horizontal = position === \"left\" || position === \"right\";\n  const defaultProps = {\n    \"aria-hidden\": true as const,\n    className: cn(\n      \"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input\",\n      horizontal\n        ? \"inset-y-0 before:h-12 before:w-1\"\n        : \"inset-x-0 before:h-1 before:w-12\",\n      position === \"top\" && \"bottom-0\",\n      position === \"bottom\" && \"top-0\",\n      position === \"left\" && \"right-0\",\n      position === \"right\" && \"left-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-bar\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport const DrawerContent: typeof DrawerPrimitive.Content =\n  DrawerPrimitive.Content;\n\nexport function DrawerMenu({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"nav\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"-m-2 flex flex-col\", className),\n    \"data-slot\": \"drawer-menu\",\n  };\n\n  return useRender({\n    defaultTagName: \"nav\",\n    props: mergeProps<\"nav\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuItem({\n  className,\n  variant = \"default\",\n  render,\n  disabled,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-item\",\n    \"data-variant\": variant,\n    disabled,\n    type: \"button\" as const,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuSeparator({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"mx-2 my-1 h-px bg-border\", className),\n    \"data-slot\": \"drawer-menu-separator\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroup({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"flex flex-col\", className),\n    \"data-slot\": \"drawer-menu-group\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuTrigger({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <DrawerTrigger\n      className={cn(\n        \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground sm:min-h-8 sm:text-sm [&_svg:not(:last-child)]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"drawer-menu-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto -me-0.5 opacity-80\" />\n    </DrawerTrigger>\n  );\n}\n\nexport function DrawerMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  variant = \"default\",\n  disabled,\n  render,\n  ...props\n}: CheckboxPrimitive.Root.Props & {\n  variant?: \"default\" | \"switch\";\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      checked={checked}\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        variant === \"switch\"\n          ? \"grid-cols-[1fr_auto] gap-4 pe-1.5\"\n          : \"grid-cols-[1rem_1fr] pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-checkbox-item\"\n      defaultChecked={defaultChecked}\n      disabled={disabled}\n      onCheckedChange={onCheckedChange}\n      render={render}\n      {...props}\n    >\n      {variant === \"switch\" ? (\n        <>\n          <span className=\"col-start-1\">{children}</span>\n          <CheckboxPrimitive.Indicator\n            className=\"inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\"\n            keepMounted\n          >\n            <span className=\"pointer-events-none block aspect-square h-full in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=drawer-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=drawer-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\" />\n          </CheckboxPrimitive.Indicator>\n        </>\n      ) : (\n        <>\n          <CheckboxPrimitive.Indicator className=\"col-start-1\">\n            <svg\n              fill=\"none\"\n              height=\"24\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n            </svg>\n          </CheckboxPrimitive.Indicator>\n          <span className=\"col-start-2\">{children}</span>\n        </>\n      )}\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport function DrawerMenuRadioGroup({\n  className,\n  ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n  return (\n    <RadioGroupPrimitive\n      className={cn(\"flex flex-col\", className)}\n      data-slot=\"drawer-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerMenuRadioItem({\n  className,\n  children,\n  value,\n  disabled,\n  render,\n  ...props\n}: RadioPrimitive.Root.Props & {\n  value: string;\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        \"grid-cols-[1rem_1fr] items-center pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-radio-item\"\n      disabled={disabled}\n      render={render}\n      value={value}\n      {...props}\n    >\n      <RadioPrimitive.Indicator className=\"col-start-1\">\n        <svg\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </RadioPrimitive.Indicator>\n      <span className=\"col-start-2\">{children}</span>\n    </RadioPrimitive.Root>\n  );\n}\n\nexport { DrawerPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst DrawerContext: React.Context<{ position: DrawerPosition }> =\n  createContext<{ position: DrawerPosition }>({\n    position: \"bottom\",\n  });\n\nconst directionMap: Record<\n  DrawerPosition,\n  DrawerPrimitive.Root.Props[\"swipeDirection\"]\n> = {\n  bottom: \"down\",\n  left: \"left\",\n  right: \"right\",\n  top: \"up\",\n};\n\nexport const DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\n  DrawerPrimitive.createHandle;\n\nexport function Drawer({\n  swipeDirection,\n  position = \"bottom\",\n  ...props\n}: DrawerPrimitive.Root.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  return (\n    <DrawerContext.Provider value={{ position }}>\n      <DrawerPrimitive.Root\n        swipeDirection={swipeDirection ?? directionMap[position]}\n        {...props}\n      />\n    </DrawerContext.Provider>\n  );\n}\n\nexport const DrawerPortal: typeof DrawerPrimitive.Portal =\n  DrawerPrimitive.Portal;\n\nexport function DrawerTrigger(\n  props: DrawerPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nexport function DrawerClose(\n  props: DrawerPrimitive.Close.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nexport function DrawerSwipeArea({\n  className,\n  position: positionProp,\n  ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPrimitive.SwipeArea\n      className={cn(\n        \"fixed z-50 touch-none\",\n        position === \"bottom\" && \"inset-x-0 bottom-0 h-8\",\n        position === \"top\" && \"inset-x-0 top-0 h-8\",\n        position === \"left\" && \"inset-y-0 left-0 w-8\",\n        position === \"right\" && \"inset-y-0 right-0 w-8\",\n        className,\n      )}\n      data-slot=\"drawer-swipe-area\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerBackdrop({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute\",\n        className,\n      )}\n      data-slot=\"drawer-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerViewport({\n  className,\n  position,\n  variant = \"default\",\n  ...props\n}: DrawerPrimitive.Viewport.Props & {\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <DrawerPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:0px]\",\n        \"touch-none\",\n        position === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        position === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        position === \"left\" && \"flex justify-start\",\n        position === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"px-(--inset) sm:[--inset:--spacing(4)]\",\n        variant === \"inset\" && position !== \"bottom\" && \"pt-(--inset)\",\n        variant === \"inset\" && position !== \"top\" && \"pb-(--inset)\",\n        className,\n      )}\n      data-slot=\"drawer-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPopup({\n  className,\n  children,\n  showCloseButton = false,\n  position: positionProp,\n  variant = \"default\",\n  showBar = false,\n  portalProps,\n  ...props\n}: DrawerPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n  showBar?: boolean;\n  portalProps?: DrawerPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPortal {...portalProps}>\n      <DrawerBackdrop />\n      <DrawerViewport position={position} variant={variant}>\n        <DrawerPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[transform,box-shadow,height,background-color] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--peek:calc(--spacing(6)-1px)] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:bg-popover data-swiping:select-none data-nested-drawer-open:overflow-hidden data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(2%*(var(--nested-drawers)-var(--stack-progress))))] data-ending-style:shadow-transparent data-starting-style:shadow-transparent data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*(var(--nested-drawers)-var(--stack-progress))))] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            \"touch-none\",\n            position === \"bottom\" &&\n              \"transform-[translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] row-start-2 -mb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] border-t pb-[max(0px,calc(env(safe-area-inset-bottom,0px)+var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding] after:inset-x-0 after:top-full after:h-(--bleed) has-data-[slot=drawer-bar]:pt-2 data-ending-style:mb-0 data-starting-style:mb-0 data-ending-style:pb-0 data-starting-style:pb-0\",\n            position === \"top\" &&\n              \"data-starting-style:transform-[translateY(calc(-100%-var(--inset)))] data-ending-style:transform-[translateY(calc(-100%-var(--inset)))] transform-[translateY(var(--drawer-swipe-movement-y))] border-b after:inset-x-0 after:bottom-full after:h-(--bleed) has-data-[slot=drawer-bar]:pb-2\",\n            position === \"left\" &&\n              \"data-starting-style:transform-[translateX(calc(-100%-var(--inset)))] data-ending-style:transform-[translateX(calc(-100%-var(--inset)))] transform-[translateX(var(--drawer-swipe-movement-x))] w-[calc(100%-(--spacing(12)))] max-w-md border-e after:inset-y-0 after:end-full after:w-(--bleed) has-data-[slot=drawer-bar]:pe-2\",\n            position === \"right\" &&\n              \"transform-[translateX(var(--drawer-swipe-movement-x))] data-ending-style:transform-[translateX(calc(100%+var(--inset)))] data-starting-style:transform-[translateX(calc(100%+var(--inset)))] col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s after:inset-y-0 after:start-full after:w-(--bleed) has-data-[slot=drawer-bar]:ps-2\",\n            variant !== \"straight\" &&\n              cn(\n                position === \"bottom\" && \"rounded-t-2xl\",\n                position === \"top\" &&\n                  \"rounded-b-2xl **:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"rounded-e-2xl **:data-[slot=drawer-footer]:rounded-ee-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"rounded-s-2xl **:data-[slot=drawer-footer]:rounded-es-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"default\" &&\n              cn(\n                position === \"bottom\" &&\n                  \"before:rounded-t-[calc(var(--radius-2xl)-1px)]\",\n                position === \"top\" &&\n                  \"before:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"before:rounded-e-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"before:rounded-s-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:after:bg-transparent sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            variant === \"straight\" && \"[--stack-step:0]\",\n            (position === \"bottom\" || position === \"top\") &&\n              \"h-(--drawer-height,auto) [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))] data-nested-drawer-open:h-(--height)\",\n            position === \"bottom\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_calc(100%-var(--inset))]\",\n            position === \"top\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_var(--inset)]\",\n            position === \"left\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))] origin-right\",\n            position === \"right\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))] origin-left\",\n            className,\n          )}\n          data-slot=\"drawer-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n            >\n              <XIcon />\n            </DrawerPrimitive.Close>\n          )}\n          {showBar && <DrawerBar />}\n        </DrawerPrimitive.Popup>\n      </DrawerViewport>\n    </DrawerPortal>\n  );\n}\n\nexport function DrawerHeader({\n  className,\n  allowSelection = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerFooter({\n  className,\n  variant = \"default\",\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end\",\n      !allowSelection && \"cursor-default\",\n      variant === \"default\" &&\n        \"border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]\",\n      className,\n    ),\n    \"data-slot\": \"drawer-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerTitle({\n  className,\n  ...props\n}: DrawerPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"drawer-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"drawer-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPanel({\n  className,\n  scrollFade = true,\n  scrollable = true,\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n  scrollable?: boolean;\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-panel\",\n  };\n\n  const content = useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n\n  if (scrollable) {\n    return (\n      <ScrollArea\n        className=\"touch-auto\"\n        overscrollContain\n        scrollFade={scrollFade}\n      >\n        {content}\n      </ScrollArea>\n    );\n  }\n\n  return content;\n}\n\nexport function DrawerBar({\n  className,\n  position: positionProp,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n  const horizontal = position === \"left\" || position === \"right\";\n  const defaultProps = {\n    \"aria-hidden\": true as const,\n    className: cn(\n      \"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input\",\n      horizontal\n        ? \"inset-y-0 before:h-12 before:w-1\"\n        : \"inset-x-0 before:h-1 before:w-12\",\n      position === \"top\" && \"bottom-0\",\n      position === \"bottom\" && \"top-0\",\n      position === \"left\" && \"right-0\",\n      position === \"right\" && \"left-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-bar\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport const DrawerContent: typeof DrawerPrimitive.Content =\n  DrawerPrimitive.Content;\n\nexport function DrawerMenu({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"nav\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"-m-2 flex flex-col\", className),\n    \"data-slot\": \"drawer-menu\",\n  };\n\n  return useRender({\n    defaultTagName: \"nav\",\n    props: mergeProps<\"nav\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuItem({\n  className,\n  variant = \"default\",\n  render,\n  disabled,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-item\",\n    \"data-variant\": variant,\n    disabled,\n    type: \"button\" as const,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuSeparator({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"mx-2 my-1 h-px bg-border\", className),\n    \"data-slot\": \"drawer-menu-separator\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroup({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"flex flex-col\", className),\n    \"data-slot\": \"drawer-menu-group\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuTrigger({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <DrawerTrigger\n      className={cn(\n        \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground sm:min-h-8 sm:text-sm [&_svg:not(:last-child)]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"drawer-menu-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto -me-0.5 opacity-80\" />\n    </DrawerTrigger>\n  );\n}\n\nexport function DrawerMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  variant = \"default\",\n  disabled,\n  render,\n  ...props\n}: CheckboxPrimitive.Root.Props & {\n  variant?: \"default\" | \"switch\";\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      checked={checked}\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        variant === \"switch\"\n          ? \"grid-cols-[1fr_auto] gap-4 pe-1.5\"\n          : \"grid-cols-[1rem_1fr] pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-checkbox-item\"\n      defaultChecked={defaultChecked}\n      disabled={disabled}\n      onCheckedChange={onCheckedChange}\n      render={render}\n      {...props}\n    >\n      {variant === \"switch\" ? (\n        <>\n          <span className=\"col-start-1\">{children}</span>\n          <CheckboxPrimitive.Indicator\n            className=\"inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\"\n            keepMounted\n          >\n            <span className=\"pointer-events-none block aspect-square h-full in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=drawer-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=drawer-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\" />\n          </CheckboxPrimitive.Indicator>\n        </>\n      ) : (\n        <>\n          <CheckboxPrimitive.Indicator className=\"col-start-1\">\n            <svg\n              fill=\"none\"\n              height=\"24\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n            </svg>\n          </CheckboxPrimitive.Indicator>\n          <span className=\"col-start-2\">{children}</span>\n        </>\n      )}\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport function DrawerMenuRadioGroup({\n  className,\n  ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n  return (\n    <RadioGroupPrimitive\n      className={cn(\"flex flex-col\", className)}\n      data-slot=\"drawer-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerMenuRadioItem({\n  className,\n  children,\n  value,\n  disabled,\n  render,\n  ...props\n}: RadioPrimitive.Root.Props & {\n  value: string;\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        \"grid-cols-[1rem_1fr] items-center pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-radio-item\"\n      disabled={disabled}\n      render={render}\n      value={value}\n      {...props}\n    >\n      <RadioPrimitive.Indicator className=\"col-start-1\">\n        <svg\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </RadioPrimitive.Indicator>\n      <span className=\"col-start-2\">{children}</span>\n    </RadioPrimitive.Root>\n  );\n}\n\nexport { DrawerPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/p-calendar-19.json b/apps/ui/public/r/p-calendar-19.json
index f30e309c4..d5b5e6fc4 100644
--- a/apps/ui/public/r/p-calendar-19.json
+++ b/apps/ui/public/r/p-calendar-19.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-calendar-19.tsx",
-      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Toggle } from \"@/registry/default/ui/toggle\";\nimport { ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<Date>(today);\n  const [time, setTime] = useState<string | null>(null);\n\n  const timeSlots = [\n    { available: false, time: \"09:00\" },\n    { available: false, time: \"09:30\" },\n    { available: true, time: \"10:00\" },\n    { available: true, time: \"10:30\" },\n    { available: true, time: \"11:00\" },\n    { available: true, time: \"11:30\" },\n    { available: false, time: \"12:00\" },\n    { available: true, time: \"12:30\" },\n    { available: true, time: \"13:00\" },\n    { available: true, time: \"13:30\" },\n    { available: true, time: \"14:00\" },\n    { available: false, time: \"14:30\" },\n    { available: false, time: \"15:00\" },\n    { available: true, time: \"15:30\" },\n    { available: true, time: \"16:00\" },\n    { available: true, time: \"16:30\" },\n    { available: true, time: \"17:00\" },\n    { available: true, time: \"17:30\" },\n  ];\n\n  return (\n    <div className=\"flex max-sm:flex-col\">\n      <Calendar\n        className=\"max-sm:pb-3 sm:pe-5\"\n        disabled={[{ before: today }]}\n        mode=\"single\"\n        onSelect={(newDate) => {\n          if (newDate) {\n            setDate(newDate);\n            setTime(null);\n          }\n        }}\n        selected={date}\n      />\n      <div className=\"relative w-full max-sm:h-48 sm:w-40\">\n        <div className=\"absolute inset-0 max-sm:border-t\">\n          <ScrollArea className=\"h-full sm:border-s\" scrollbarGutter scrollFade>\n            <div className=\"flex flex-col gap-3 py-3 sm:pt-0 sm:pb-2\">\n              <div className=\"flex shrink-0 items-center font-medium text-sm sm:h-8 sm:px-5\">\n                {format(date, \"EEEE, d\")}\n              </div>\n              <ToggleGroup\n                className=\"grid w-full gap-1.5 max-sm:grid-cols-2 sm:px-5\"\n                onValueChange={(values) => setTime(values[0] || null)}\n                value={time ? [time] : []}\n              >\n                {timeSlots.map(({ time: timeSlot, available }) => (\n                  <Toggle\n                    disabled={!available}\n                    key={timeSlot}\n                    size=\"sm\"\n                    value={timeSlot}\n                    variant=\"outline\"\n                  >\n                    {timeSlot}\n                  </Toggle>\n                ))}\n              </ToggleGroup>\n            </div>\n          </ScrollArea>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Toggle } from \"@/registry/default/ui/toggle\";\nimport { ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<Date>(today);\n  const [time, setTime] = useState<string | null>(null);\n\n  const timeSlots = [\n    { available: false, time: \"09:00\" },\n    { available: false, time: \"09:30\" },\n    { available: true, time: \"10:00\" },\n    { available: true, time: \"10:30\" },\n    { available: true, time: \"11:00\" },\n    { available: true, time: \"11:30\" },\n    { available: false, time: \"12:00\" },\n    { available: true, time: \"12:30\" },\n    { available: true, time: \"13:00\" },\n    { available: true, time: \"13:30\" },\n    { available: true, time: \"14:00\" },\n    { available: false, time: \"14:30\" },\n    { available: false, time: \"15:00\" },\n    { available: true, time: \"15:30\" },\n    { available: true, time: \"16:00\" },\n    { available: true, time: \"16:30\" },\n    { available: true, time: \"17:00\" },\n    { available: true, time: \"17:30\" },\n  ];\n\n  return (\n    <div className=\"flex max-sm:flex-col\">\n      <Calendar\n        className=\"max-sm:pb-3 sm:pe-5\"\n        disabled={[{ before: today }]}\n        mode=\"single\"\n        onSelect={(newDate) => {\n          if (newDate) {\n            setDate(newDate);\n            setTime(null);\n          }\n        }}\n        selected={date}\n      />\n      <div className=\"relative w-full max-sm:h-48 sm:w-40\">\n        <div className=\"absolute inset-0 max-sm:border-t\">\n          <ScrollArea\n            className=\"h-full sm:border-s\"\n            overscrollContain\n            scrollbarGutter\n            scrollFade\n          >\n            <div className=\"flex flex-col gap-3 py-3 sm:pt-0 sm:pb-2\">\n              <div className=\"flex shrink-0 items-center font-medium text-sm sm:h-8 sm:px-5\">\n                {format(date, \"EEEE, d\")}\n              </div>\n              <ToggleGroup\n                className=\"grid w-full gap-1.5 max-sm:grid-cols-2 sm:px-5\"\n                onValueChange={(values) => setTime(values[0] || null)}\n                value={time ? [time] : []}\n              >\n                {timeSlots.map(({ time: timeSlot, available }) => (\n                  <Toggle\n                    disabled={!available}\n                    key={timeSlot}\n                    size=\"sm\"\n                    value={timeSlot}\n                    variant=\"outline\"\n                  >\n                    {timeSlot}\n                  </Toggle>\n                ))}\n              </ToggleGroup>\n            </div>\n          </ScrollArea>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-command-2.json b/apps/ui/public/r/p-command-2.json
index 109f5e718..050f59862 100644
--- a/apps/ui/public/r/p-command-2.json
+++ b/apps/ui/public/r/p-command-2.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-command-2.tsx",
-      "content": "\"use client\";\n\nimport {\n  ArrowDownIcon,\n  ArrowLeftIcon,\n  ArrowUpIcon,\n  CircleQuestionMarkIcon,\n  CornerDownLeftIcon,\n  SearchIcon,\n  SparklesIcon,\n} from \"lucide-react\";\nimport Link from \"next/link\";\nimport {\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useAutocompleteFilter } from \"@/registry/default/ui/autocomplete\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandCollection,\n  CommandCreateHandle,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandPanel,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\";\nimport { EmptyMedia } from \"@/registry/default/ui/empty\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Kbd, KbdGroup } from \"@/registry/default/ui/kbd\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\n\ninterface Item {\n  value: string;\n  label: string;\n  shortcut?: string;\n  keywords?: string[];\n}\n\ninterface Group {\n  value: string;\n  items: Item[];\n}\n\nconst commandGroups: Group[] = [\n  {\n    items: [\n      {\n        keywords: [\"dash\"],\n        label: \"Dashboard\",\n        shortcut: \"d\",\n        value: \"dashboard\",\n      },\n      {\n        keywords: [\"proj\"],\n        label: \"Projects\",\n        shortcut: \"p\",\n        value: \"projects\",\n      },\n      { keywords: [\"team\"], label: \"Team\", shortcut: \"t\", value: \"team\" },\n    ],\n    value: \"Pages\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"prof\"],\n        label: \"Profile\",\n        shortcut: \"p s\",\n        value: \"profile\",\n      },\n      {\n        keywords: [\"acc\"],\n        label: \"Account\",\n        shortcut: \"a s\",\n        value: \"account\",\n      },\n      {\n        keywords: [\"pref\"],\n        label: \"Preferences\",\n        shortcut: \"p r\",\n        value: \"preferences\",\n      },\n    ],\n    value: \"Settings\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"docs\"],\n        label: \"Documentation\",\n        shortcut: \"d o\",\n        value: \"docs\",\n      },\n      {\n        keywords: [\"sup\"],\n        label: \"Support\",\n        shortcut: \"s u\",\n        value: \"support\",\n      },\n      {\n        keywords: [\"feed\"],\n        label: \"Feedback\",\n        shortcut: \"f b\",\n        value: \"feedback\",\n      },\n    ],\n    value: \"Help\",\n  },\n];\n\nconst MOCK_AI_RESPONSE = `To create a new project, navigate to the Projects page and click the \"New Project\" button in the top right corner. You'll be prompted to enter a project name and description.\n\nOnce created, you can invite team members by clicking the \"Share\" button and entering their email addresses. Team members will receive an invitation link via email or you can add them manually by clicking the \"Add Team Member\" button in the project settings.\n\nYou can customize project settings at any time by clicking the settings icon in the project header. For more information, see the Project Settings documentation.`;\n\nconst MOCK_REFERENCE_LINKS = [\n  { title: \"Creating Projects\", url: \"/docs/projects/create\" },\n  { title: \"Team Collaboration\", url: \"/docs/team/collaborate\" },\n  { title: \"Project Settings\", url: \"/docs/projects/settings\" },\n];\n\nexport const commandHandle: ReturnType<typeof CommandCreateHandle> =\n  CommandCreateHandle();\n\ninterface AIState {\n  mode: boolean;\n  query: string;\n  submittedQuery: string;\n  response: string;\n  referenceLinks: Array<{ title: string; url: string }>;\n  isGenerating: boolean;\n  error: string | null;\n}\n\nconst initialAIState: AIState = {\n  error: null,\n  isGenerating: false,\n  mode: false,\n  query: \"\",\n  referenceLinks: [],\n  response: \"\",\n  submittedQuery: \"\",\n};\n\nfunction markdownToSafeHTML(markdown: string): string {\n  // Simple markdown to HTML converter for demo purposes\n  return markdown\n    .split(\"\\n\\n\")\n    .map((para) => `<p>${para}</p>`)\n    .join(\"\");\n}\n\nexport default function PCommand2() {\n  const [open, setOpen] = useState(false);\n  const [aiState, setAIState] = useState<AIState>(initialAIState);\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const aiInputRef = useRef<HTMLInputElement>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const abortControllerRef = useRef<AbortController | null>(null);\n  const commandResetKeyRef = useRef(0);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      abortControllerRef.current?.abort();\n    };\n  }, []);\n\n  const resetAIState = useCallback(() => {\n    abortControllerRef.current?.abort();\n    setAIState(initialAIState);\n  }, []);\n\n  const handleItemClick = useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  const handleBackToSearch = useCallback(() => {\n    resetAIState();\n    setSearchQuery(\"\");\n    commandResetKeyRef.current += 1;\n    searchInputRef.current?.focus();\n  }, [resetAIState]);\n\n  const handleGenerateAI = useCallback(\n    async (queryOverride?: string) => {\n      const query = queryOverride || aiState.query;\n      if (!query.trim()) return;\n\n      abortControllerRef.current?.abort();\n      const controller = new AbortController();\n      abortControllerRef.current = controller;\n\n      setAIState((prev) => ({\n        ...prev,\n        error: null,\n        isGenerating: true,\n        query: \"\",\n        referenceLinks: [],\n        response: \"\",\n        submittedQuery: query,\n      }));\n\n      try {\n        await new Promise<void>((resolve, reject) => {\n          const timeout = setTimeout(resolve, 1500);\n          controller.signal.addEventListener(\"abort\", () => {\n            clearTimeout(timeout);\n            reject(new Error(\"aborted\"));\n          });\n        });\n\n        if (controller.signal.aborted) return;\n\n        setAIState((prev) => ({\n          ...prev,\n          isGenerating: false,\n          referenceLinks: MOCK_REFERENCE_LINKS,\n          response: MOCK_AI_RESPONSE,\n        }));\n      } catch (error) {\n        if (error instanceof Error && error.message === \"aborted\") {\n          return;\n        }\n\n        if (controller.signal.aborted) return;\n\n        setAIState((prev) => ({\n          ...prev,\n          error: \"Failed to generate response. Please try again.\",\n          isGenerating: false,\n        }));\n      }\n    },\n    [aiState.query],\n  );\n\n  const handleAskAI = useCallback(() => {\n    const currentQuery = searchQuery;\n    setSearchQuery(\"\");\n\n    if (currentQuery.trim()) {\n      setAIState((prev) => ({ ...prev, mode: true }));\n      handleGenerateAI(currentQuery);\n    } else {\n      setAIState((prev) => ({ ...prev, mode: true, query: \"\" }));\n      aiInputRef.current?.focus();\n    }\n  }, [searchQuery, handleGenerateAI]);\n\n  const { contains } = useAutocompleteFilter({ sensitivity: \"base\" });\n\n  const filterItem = useCallback(\n    (itemValue: unknown, query: string): boolean => {\n      if (typeof itemValue !== \"object\" || itemValue === null) {\n        return false;\n      }\n\n      const item = itemValue as Item;\n\n      if (contains(item.label, query)) {\n        return true;\n      }\n\n      if (contains(item.value, query)) {\n        return true;\n      }\n\n      if (item.keywords?.some((keyword) => contains(keyword, query))) {\n        return true;\n      }\n\n      return false;\n    },\n    [contains],\n  );\n\n  useEffect(() => {\n    if (!open || !aiState.mode) return;\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        e.stopPropagation();\n        handleBackToSearch();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape, true);\n    return () => document.removeEventListener(\"keydown\", handleEscape, true);\n  }, [open, aiState.mode, handleBackToSearch]);\n\n  useEffect(() => {\n    if (aiState.mode && !aiState.isGenerating) {\n      aiInputRef.current?.focus();\n    }\n  }, [aiState.mode, aiState.isGenerating]);\n\n  const hasResults = useMemo(\n    () =>\n      !searchQuery.trim() ||\n      commandGroups.some((group) =>\n        group.items.some((item) => filterItem(item, searchQuery)),\n      ),\n    [searchQuery, filterItem],\n  );\n\n  const handleOpenChange = useCallback(\n    (newOpen: boolean) => {\n      setOpen(newOpen);\n      if (!newOpen) {\n        setSearchQuery(\"\");\n        resetAIState();\n      }\n    },\n    [resetAIState],\n  );\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)} variant=\"outline\">\n        Cmdk with AI\n      </Button>\n      <CommandDialog\n        handle={commandHandle}\n        onOpenChange={handleOpenChange}\n        open={open}\n      >\n        <CommandDialogPopup>\n          {!aiState.mode ? (\n            <Command\n              filter={filterItem}\n              items={commandGroups}\n              key={commandResetKeyRef.current}\n            >\n              <div className=\"relative flex items-center *:first:flex-1\">\n                <CommandInput\n                  onChange={(e) => setSearchQuery(e.target.value)}\n                  onKeyDown={(e) => {\n                    if (e.key === \"Tab\") {\n                      e.preventDefault();\n                      handleAskAI();\n                    }\n                    if (\n                      e.key === \"Enter\" &&\n                      !hasResults &&\n                      searchQuery.trim()\n                    ) {\n                      e.preventDefault();\n                      handleAskAI();\n                    }\n                  }}\n                  placeholder=\"Type a command or search...\"\n                  ref={searchInputRef}\n                  value={searchQuery}\n                />\n                <Button\n                  className=\"me-2.5 rounded-md not-hover:text-muted-foreground text-sm sm:text-xs\"\n                  onClick={handleAskAI}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  <SparklesIcon className=\"size-4 sm:size-3.5\" />\n                  Ask AI\n                  <Kbd className=\"ms-0.5 -me-1.5\">Tab</Kbd>\n                </Button>\n              </div>\n              <CommandPanel>\n                <CommandEmpty className=\"not-empty:py-12\">\n                  {searchQuery.trim() && (\n                    <div className=\"wrap-break-word flex flex-col flex-wrap items-center gap-2\">\n                      <EmptyMedia variant=\"icon\">\n                        <SearchIcon />\n                      </EmptyMedia>\n                      <p>No results found.</p>\n                      <p>\n                        Press <Kbd>Enter</Kbd> to ask AI about:\n                        <br />{\" \"}\n                        <strong className=\"font-medium text-foreground\">\n                          {searchQuery}\n                        </strong>\n                      </p>\n                    </div>\n                  )}\n                </CommandEmpty>\n                <CommandList>\n                  {(group: Group) => (\n                    <Fragment key={group.value}>\n                      <CommandGroup items={group.items}>\n                        <CommandGroupLabel>{group.value}</CommandGroupLabel>\n                        <CommandCollection>\n                          {(item: Item) => (\n                            <CommandItem\n                              key={item.value}\n                              onClick={handleItemClick}\n                              value={item}\n                            >\n                              <span className=\"flex-1\">{item.label}</span>\n                              {item.shortcut && (\n                                <CommandShortcut>\n                                  {item.shortcut}\n                                </CommandShortcut>\n                              )}\n                            </CommandItem>\n                          )}\n                        </CommandCollection>\n                      </CommandGroup>\n                      <CommandSeparator />\n                    </Fragment>\n                  )}\n                </CommandList>\n              </CommandPanel>\n              <CommandFooter>\n                {hasResults ? (\n                  <>\n                    <div className=\"flex items-center gap-4\">\n                      <div className=\"flex items-center gap-2\">\n                        <KbdGroup>\n                          <Kbd>\n                            <ArrowUpIcon />\n                          </Kbd>\n                          <Kbd>\n                            <ArrowDownIcon />\n                          </Kbd>\n                        </KbdGroup>\n                        <span>Navigate</span>\n                      </div>\n                      <div className=\"flex items-center gap-2\">\n                        <Kbd>\n                          <CornerDownLeftIcon />\n                        </Kbd>\n                        <span>Open</span>\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      <Kbd>Esc</Kbd>\n                      <span>Close</span>\n                    </div>\n                  </>\n                ) : (\n                  <div className=\"ms-auto flex items-center gap-2\">\n                    <Kbd>Esc</Kbd>\n                    <span>Close</span>\n                  </div>\n                )}\n              </CommandFooter>\n            </Command>\n          ) : (\n            <Command>\n              <div className=\"flex items-center *:first:flex-1\">\n                <div className=\"px-2.5 py-1.5\">\n                  <div className=\"relative w-full\">\n                    <div\n                      aria-hidden=\"true\"\n                      className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n                      data-slot=\"autocomplete-start-addon\"\n                    >\n                      <SparklesIcon />\n                    </div>\n                    <Input\n                      aria-label=\"AI query input\"\n                      className=\"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0 *:data-[slot=input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=input]:ps-[calc(--spacing(8)-1px)]\"\n                      disabled={aiState.isGenerating}\n                      onChange={(e) =>\n                        setAIState((prev) => ({\n                          ...prev,\n                          query: e.target.value,\n                        }))\n                      }\n                      onKeyDown={(e) => {\n                        if (e.key === \"Enter\" && !aiState.isGenerating) {\n                          handleGenerateAI();\n                        }\n                        if (e.key === \"Escape\") {\n                          e.preventDefault();\n                          handleBackToSearch();\n                        }\n                      }}\n                      placeholder=\"Ask AI anything…\"\n                      ref={aiInputRef}\n                      size=\"lg\"\n                      value={aiState.query}\n                    />\n                  </div>\n                </div>\n                <Button\n                  className=\"me-2.5 rounded-md not-hover:text-muted-foreground text-sm sm:text-xs\"\n                  onClick={handleBackToSearch}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  <ArrowLeftIcon className=\"size-4 sm:size-3.5\" />\n                  Back to search\n                  <Kbd className=\"ms-0.5 -me-1.5\">Esc</Kbd>\n                </Button>\n              </div>\n              <CommandPanel>\n                <ScrollArea scrollbarGutter scrollFade>\n                  <div className=\"p-5\">\n                    {!aiState.isGenerating &&\n                      !aiState.response &&\n                      !aiState.error && (\n                        <div className=\"flex items-center justify-center py-12\">\n                          <p className=\"text-muted-foreground text-sm\">\n                            Ask AI anything and press <Kbd>Enter</Kbd> to get\n                            started.\n                          </p>\n                        </div>\n                      )}\n\n                    {aiState.error && (\n                      <div\n                        aria-live=\"polite\"\n                        className=\"text-destructive text-sm\"\n                        role=\"alert\"\n                      >\n                        {aiState.error}\n                      </div>\n                    )}\n\n                    {aiState.isGenerating && (\n                      <div className=\"flex flex-col gap-4\">\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-1/2\" />\n                        </div>\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-3/4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-3/5\" />\n                        </div>\n                      </div>\n                    )}\n\n                    {aiState.response && !aiState.isGenerating && (\n                      <>\n                        <div\n                          aria-live=\"polite\"\n                          className=\"text-muted-foreground text-sm **:[a]:underline **:[a]:underline-offset-4 **:[code]:rounded-md **:[code]:bg-muted **:[code]:px-[0.3rem] **:[code]:py-[0.2rem] **:[code]:font-mono **:[p]:not-first:mt-3 **:[p]:leading-relaxed **:[strong,a]:font-medium **:[strong,a]:text-foreground\"\n                          dangerouslySetInnerHTML={{\n                            __html: markdownToSafeHTML(aiState.response),\n                          }}\n                        />\n                        {aiState.referenceLinks.length > 0 && (\n                          <div className=\"mt-4 flex flex-wrap gap-2\">\n                            {aiState.referenceLinks.map((link, index) => (\n                              <Button\n                                key={`${link.url}-${index}`}\n                                render={<Link href={link.url} />}\n                                size=\"sm\"\n                                variant=\"secondary\"\n                              >\n                                {link.title}\n                              </Button>\n                            ))}\n                          </div>\n                        )}\n                      </>\n                    )}\n                  </div>\n                </ScrollArea>\n              </CommandPanel>\n\n              <CommandFooter>\n                {aiState.isGenerating ? (\n                  <div aria-live=\"polite\" className=\"flex items-center gap-2\">\n                    <div className=\"flex h-5 items-center justify-center\">\n                      <Spinner className=\"size-3\" />\n                    </div>\n                    <span className=\"animate-pulse\">Generating response…</span>\n                  </div>\n                ) : aiState.response ? (\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"flex h-5 items-center justify-center\">\n                      <CircleQuestionMarkIcon className=\"size-3\" />\n                    </div>\n                    You asked: <span>&quot;{aiState.submittedQuery}&quot;</span>\n                  </div>\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Kbd>\n                      <CornerDownLeftIcon />\n                    </Kbd>\n                    <span>Ask AI</span>\n                  </div>\n                )}\n              </CommandFooter>\n            </Command>\n          )}\n        </CommandDialogPopup>\n      </CommandDialog>\n    </>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  ArrowDownIcon,\n  ArrowLeftIcon,\n  ArrowUpIcon,\n  CircleQuestionMarkIcon,\n  CornerDownLeftIcon,\n  SearchIcon,\n  SparklesIcon,\n} from \"lucide-react\";\nimport Link from \"next/link\";\nimport {\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useAutocompleteFilter } from \"@/registry/default/ui/autocomplete\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandCollection,\n  CommandCreateHandle,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandPanel,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\";\nimport { EmptyMedia } from \"@/registry/default/ui/empty\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Kbd, KbdGroup } from \"@/registry/default/ui/kbd\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\n\ninterface Item {\n  value: string;\n  label: string;\n  shortcut?: string;\n  keywords?: string[];\n}\n\ninterface Group {\n  value: string;\n  items: Item[];\n}\n\nconst commandGroups: Group[] = [\n  {\n    items: [\n      {\n        keywords: [\"dash\"],\n        label: \"Dashboard\",\n        shortcut: \"d\",\n        value: \"dashboard\",\n      },\n      {\n        keywords: [\"proj\"],\n        label: \"Projects\",\n        shortcut: \"p\",\n        value: \"projects\",\n      },\n      { keywords: [\"team\"], label: \"Team\", shortcut: \"t\", value: \"team\" },\n    ],\n    value: \"Pages\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"prof\"],\n        label: \"Profile\",\n        shortcut: \"p s\",\n        value: \"profile\",\n      },\n      {\n        keywords: [\"acc\"],\n        label: \"Account\",\n        shortcut: \"a s\",\n        value: \"account\",\n      },\n      {\n        keywords: [\"pref\"],\n        label: \"Preferences\",\n        shortcut: \"p r\",\n        value: \"preferences\",\n      },\n    ],\n    value: \"Settings\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"docs\"],\n        label: \"Documentation\",\n        shortcut: \"d o\",\n        value: \"docs\",\n      },\n      {\n        keywords: [\"sup\"],\n        label: \"Support\",\n        shortcut: \"s u\",\n        value: \"support\",\n      },\n      {\n        keywords: [\"feed\"],\n        label: \"Feedback\",\n        shortcut: \"f b\",\n        value: \"feedback\",\n      },\n    ],\n    value: \"Help\",\n  },\n];\n\nconst MOCK_AI_RESPONSE = `To create a new project, navigate to the Projects page and click the \"New Project\" button in the top right corner. You'll be prompted to enter a project name and description.\n\nOnce created, you can invite team members by clicking the \"Share\" button and entering their email addresses. Team members will receive an invitation link via email or you can add them manually by clicking the \"Add Team Member\" button in the project settings.\n\nYou can customize project settings at any time by clicking the settings icon in the project header. For more information, see the Project Settings documentation.`;\n\nconst MOCK_REFERENCE_LINKS = [\n  { title: \"Creating Projects\", url: \"/docs/projects/create\" },\n  { title: \"Team Collaboration\", url: \"/docs/team/collaborate\" },\n  { title: \"Project Settings\", url: \"/docs/projects/settings\" },\n];\n\nexport const commandHandle: ReturnType<typeof CommandCreateHandle> =\n  CommandCreateHandle();\n\ninterface AIState {\n  mode: boolean;\n  query: string;\n  submittedQuery: string;\n  response: string;\n  referenceLinks: Array<{ title: string; url: string }>;\n  isGenerating: boolean;\n  error: string | null;\n}\n\nconst initialAIState: AIState = {\n  error: null,\n  isGenerating: false,\n  mode: false,\n  query: \"\",\n  referenceLinks: [],\n  response: \"\",\n  submittedQuery: \"\",\n};\n\nfunction markdownToSafeHTML(markdown: string): string {\n  // Simple markdown to HTML converter for demo purposes\n  return markdown\n    .split(\"\\n\\n\")\n    .map((para) => `<p>${para}</p>`)\n    .join(\"\");\n}\n\nexport default function PCommand2() {\n  const [open, setOpen] = useState(false);\n  const [aiState, setAIState] = useState<AIState>(initialAIState);\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const aiInputRef = useRef<HTMLInputElement>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const abortControllerRef = useRef<AbortController | null>(null);\n  const commandResetKeyRef = useRef(0);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      abortControllerRef.current?.abort();\n    };\n  }, []);\n\n  const resetAIState = useCallback(() => {\n    abortControllerRef.current?.abort();\n    setAIState(initialAIState);\n  }, []);\n\n  const handleItemClick = useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  const handleBackToSearch = useCallback(() => {\n    resetAIState();\n    setSearchQuery(\"\");\n    commandResetKeyRef.current += 1;\n    searchInputRef.current?.focus();\n  }, [resetAIState]);\n\n  const handleGenerateAI = useCallback(\n    async (queryOverride?: string) => {\n      const query = queryOverride || aiState.query;\n      if (!query.trim()) return;\n\n      abortControllerRef.current?.abort();\n      const controller = new AbortController();\n      abortControllerRef.current = controller;\n\n      setAIState((prev) => ({\n        ...prev,\n        error: null,\n        isGenerating: true,\n        query: \"\",\n        referenceLinks: [],\n        response: \"\",\n        submittedQuery: query,\n      }));\n\n      try {\n        await new Promise<void>((resolve, reject) => {\n          const timeout = setTimeout(resolve, 1500);\n          controller.signal.addEventListener(\"abort\", () => {\n            clearTimeout(timeout);\n            reject(new Error(\"aborted\"));\n          });\n        });\n\n        if (controller.signal.aborted) return;\n\n        setAIState((prev) => ({\n          ...prev,\n          isGenerating: false,\n          referenceLinks: MOCK_REFERENCE_LINKS,\n          response: MOCK_AI_RESPONSE,\n        }));\n      } catch (error) {\n        if (error instanceof Error && error.message === \"aborted\") {\n          return;\n        }\n\n        if (controller.signal.aborted) return;\n\n        setAIState((prev) => ({\n          ...prev,\n          error: \"Failed to generate response. Please try again.\",\n          isGenerating: false,\n        }));\n      }\n    },\n    [aiState.query],\n  );\n\n  const handleAskAI = useCallback(() => {\n    const currentQuery = searchQuery;\n    setSearchQuery(\"\");\n\n    if (currentQuery.trim()) {\n      setAIState((prev) => ({ ...prev, mode: true }));\n      handleGenerateAI(currentQuery);\n    } else {\n      setAIState((prev) => ({ ...prev, mode: true, query: \"\" }));\n      aiInputRef.current?.focus();\n    }\n  }, [searchQuery, handleGenerateAI]);\n\n  const { contains } = useAutocompleteFilter({ sensitivity: \"base\" });\n\n  const filterItem = useCallback(\n    (itemValue: unknown, query: string): boolean => {\n      if (typeof itemValue !== \"object\" || itemValue === null) {\n        return false;\n      }\n\n      const item = itemValue as Item;\n\n      if (contains(item.label, query)) {\n        return true;\n      }\n\n      if (contains(item.value, query)) {\n        return true;\n      }\n\n      if (item.keywords?.some((keyword) => contains(keyword, query))) {\n        return true;\n      }\n\n      return false;\n    },\n    [contains],\n  );\n\n  useEffect(() => {\n    if (!open || !aiState.mode) return;\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        e.stopPropagation();\n        handleBackToSearch();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape, true);\n    return () => document.removeEventListener(\"keydown\", handleEscape, true);\n  }, [open, aiState.mode, handleBackToSearch]);\n\n  useEffect(() => {\n    if (aiState.mode && !aiState.isGenerating) {\n      aiInputRef.current?.focus();\n    }\n  }, [aiState.mode, aiState.isGenerating]);\n\n  const hasResults = useMemo(\n    () =>\n      !searchQuery.trim() ||\n      commandGroups.some((group) =>\n        group.items.some((item) => filterItem(item, searchQuery)),\n      ),\n    [searchQuery, filterItem],\n  );\n\n  const handleOpenChange = useCallback(\n    (newOpen: boolean) => {\n      setOpen(newOpen);\n      if (!newOpen) {\n        setSearchQuery(\"\");\n        resetAIState();\n      }\n    },\n    [resetAIState],\n  );\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)} variant=\"outline\">\n        Cmdk with AI\n      </Button>\n      <CommandDialog\n        handle={commandHandle}\n        onOpenChange={handleOpenChange}\n        open={open}\n      >\n        <CommandDialogPopup>\n          {!aiState.mode ? (\n            <Command\n              filter={filterItem}\n              items={commandGroups}\n              key={commandResetKeyRef.current}\n            >\n              <div className=\"relative flex items-center *:first:flex-1\">\n                <CommandInput\n                  onChange={(e) => setSearchQuery(e.target.value)}\n                  onKeyDown={(e) => {\n                    if (e.key === \"Tab\") {\n                      e.preventDefault();\n                      handleAskAI();\n                    }\n                    if (\n                      e.key === \"Enter\" &&\n                      !hasResults &&\n                      searchQuery.trim()\n                    ) {\n                      e.preventDefault();\n                      handleAskAI();\n                    }\n                  }}\n                  placeholder=\"Type a command or search...\"\n                  ref={searchInputRef}\n                  value={searchQuery}\n                />\n                <Button\n                  className=\"me-2.5 rounded-md not-hover:text-muted-foreground text-sm sm:text-xs\"\n                  onClick={handleAskAI}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  <SparklesIcon className=\"size-4 sm:size-3.5\" />\n                  Ask AI\n                  <Kbd className=\"ms-0.5 -me-1.5\">Tab</Kbd>\n                </Button>\n              </div>\n              <CommandPanel>\n                <CommandEmpty className=\"not-empty:py-12\">\n                  {searchQuery.trim() && (\n                    <div className=\"wrap-break-word flex flex-col flex-wrap items-center gap-2\">\n                      <EmptyMedia variant=\"icon\">\n                        <SearchIcon />\n                      </EmptyMedia>\n                      <p>No results found.</p>\n                      <p>\n                        Press <Kbd>Enter</Kbd> to ask AI about:\n                        <br />{\" \"}\n                        <strong className=\"font-medium text-foreground\">\n                          {searchQuery}\n                        </strong>\n                      </p>\n                    </div>\n                  )}\n                </CommandEmpty>\n                <CommandList>\n                  {(group: Group) => (\n                    <Fragment key={group.value}>\n                      <CommandGroup items={group.items}>\n                        <CommandGroupLabel>{group.value}</CommandGroupLabel>\n                        <CommandCollection>\n                          {(item: Item) => (\n                            <CommandItem\n                              key={item.value}\n                              onClick={handleItemClick}\n                              value={item}\n                            >\n                              <span className=\"flex-1\">{item.label}</span>\n                              {item.shortcut && (\n                                <CommandShortcut>\n                                  {item.shortcut}\n                                </CommandShortcut>\n                              )}\n                            </CommandItem>\n                          )}\n                        </CommandCollection>\n                      </CommandGroup>\n                      <CommandSeparator />\n                    </Fragment>\n                  )}\n                </CommandList>\n              </CommandPanel>\n              <CommandFooter>\n                {hasResults ? (\n                  <>\n                    <div className=\"flex items-center gap-4\">\n                      <div className=\"flex items-center gap-2\">\n                        <KbdGroup>\n                          <Kbd>\n                            <ArrowUpIcon />\n                          </Kbd>\n                          <Kbd>\n                            <ArrowDownIcon />\n                          </Kbd>\n                        </KbdGroup>\n                        <span>Navigate</span>\n                      </div>\n                      <div className=\"flex items-center gap-2\">\n                        <Kbd>\n                          <CornerDownLeftIcon />\n                        </Kbd>\n                        <span>Open</span>\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      <Kbd>Esc</Kbd>\n                      <span>Close</span>\n                    </div>\n                  </>\n                ) : (\n                  <div className=\"ms-auto flex items-center gap-2\">\n                    <Kbd>Esc</Kbd>\n                    <span>Close</span>\n                  </div>\n                )}\n              </CommandFooter>\n            </Command>\n          ) : (\n            <Command>\n              <div className=\"flex items-center *:first:flex-1\">\n                <div className=\"px-2.5 py-1.5\">\n                  <div className=\"relative w-full\">\n                    <div\n                      aria-hidden=\"true\"\n                      className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n                      data-slot=\"autocomplete-start-addon\"\n                    >\n                      <SparklesIcon />\n                    </div>\n                    <Input\n                      aria-label=\"AI query input\"\n                      className=\"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0 *:data-[slot=input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=input]:ps-[calc(--spacing(8)-1px)]\"\n                      disabled={aiState.isGenerating}\n                      onChange={(e) =>\n                        setAIState((prev) => ({\n                          ...prev,\n                          query: e.target.value,\n                        }))\n                      }\n                      onKeyDown={(e) => {\n                        if (e.key === \"Enter\" && !aiState.isGenerating) {\n                          handleGenerateAI();\n                        }\n                        if (e.key === \"Escape\") {\n                          e.preventDefault();\n                          handleBackToSearch();\n                        }\n                      }}\n                      placeholder=\"Ask AI anything…\"\n                      ref={aiInputRef}\n                      size=\"lg\"\n                      value={aiState.query}\n                    />\n                  </div>\n                </div>\n                <Button\n                  className=\"me-2.5 rounded-md not-hover:text-muted-foreground text-sm sm:text-xs\"\n                  onClick={handleBackToSearch}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  <ArrowLeftIcon className=\"size-4 sm:size-3.5\" />\n                  Back to search\n                  <Kbd className=\"ms-0.5 -me-1.5\">Esc</Kbd>\n                </Button>\n              </div>\n              <CommandPanel>\n                <ScrollArea overscrollContain scrollbarGutter scrollFade>\n                  <div className=\"p-5\">\n                    {!aiState.isGenerating &&\n                      !aiState.response &&\n                      !aiState.error && (\n                        <div className=\"flex items-center justify-center py-12\">\n                          <p className=\"text-muted-foreground text-sm\">\n                            Ask AI anything and press <Kbd>Enter</Kbd> to get\n                            started.\n                          </p>\n                        </div>\n                      )}\n\n                    {aiState.error && (\n                      <div\n                        aria-live=\"polite\"\n                        className=\"text-destructive text-sm\"\n                        role=\"alert\"\n                      >\n                        {aiState.error}\n                      </div>\n                    )}\n\n                    {aiState.isGenerating && (\n                      <div className=\"flex flex-col gap-4\">\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-1/2\" />\n                        </div>\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-3/4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-3/5\" />\n                        </div>\n                      </div>\n                    )}\n\n                    {aiState.response && !aiState.isGenerating && (\n                      <>\n                        <div\n                          aria-live=\"polite\"\n                          className=\"text-muted-foreground text-sm **:[a]:underline **:[a]:underline-offset-4 **:[code]:rounded-md **:[code]:bg-muted **:[code]:px-[0.3rem] **:[code]:py-[0.2rem] **:[code]:font-mono **:[p]:not-first:mt-3 **:[p]:leading-relaxed **:[strong,a]:font-medium **:[strong,a]:text-foreground\"\n                          dangerouslySetInnerHTML={{\n                            __html: markdownToSafeHTML(aiState.response),\n                          }}\n                        />\n                        {aiState.referenceLinks.length > 0 && (\n                          <div className=\"mt-4 flex flex-wrap gap-2\">\n                            {aiState.referenceLinks.map((link, index) => (\n                              <Button\n                                key={`${link.url}-${index}`}\n                                render={<Link href={link.url} />}\n                                size=\"sm\"\n                                variant=\"secondary\"\n                              >\n                                {link.title}\n                              </Button>\n                            ))}\n                          </div>\n                        )}\n                      </>\n                    )}\n                  </div>\n                </ScrollArea>\n              </CommandPanel>\n\n              <CommandFooter>\n                {aiState.isGenerating ? (\n                  <div aria-live=\"polite\" className=\"flex items-center gap-2\">\n                    <div className=\"flex h-5 items-center justify-center\">\n                      <Spinner className=\"size-3\" />\n                    </div>\n                    <span className=\"animate-pulse\">Generating response…</span>\n                  </div>\n                ) : aiState.response ? (\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"flex h-5 items-center justify-center\">\n                      <CircleQuestionMarkIcon className=\"size-3\" />\n                    </div>\n                    You asked: <span>&quot;{aiState.submittedQuery}&quot;</span>\n                  </div>\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Kbd>\n                      <CornerDownLeftIcon />\n                    </Kbd>\n                    <span>Ask AI</span>\n                  </div>\n                )}\n              </CommandFooter>\n            </Command>\n          )}\n        </CommandDialogPopup>\n      </CommandDialog>\n    </>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/scroll-area.json b/apps/ui/public/r/scroll-area.json
index 0eaa5b800..7c192dc34 100644
--- a/apps/ui/public/r/scroll-area.json
+++ b/apps/ui/public/r/scroll-area.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/ui/scroll-area.tsx",
-      "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function ScrollArea({\n  className,\n  children,\n  scrollFade = false,\n  scrollbarGutter = false,\n  fill = false,\n  clampContentMinWidth = true,\n  ...props\n}: ScrollAreaPrimitive.Root.Props & {\n  scrollFade?: boolean;\n  scrollbarGutter?: boolean;\n  fill?: boolean;\n  clampContentMinWidth?: boolean;\n}): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Root\n      className={cn(\"size-full min-h-0\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        className={cn(\n          \"h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain\",\n          scrollFade &&\n            \"mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]\",\n          scrollbarGutter &&\n            \"data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5\",\n        )}\n        data-slot=\"scroll-area-viewport\"\n      >\n        <ScrollAreaPrimitive.Content\n          className={cn(fill && \"size-full\")}\n          data-slot=\"scroll-area-content\"\n          style={clampContentMinWidth ? { minWidth: 0 } : undefined}\n        >\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar orientation=\"vertical\" />\n      <ScrollBar orientation=\"horizontal\" />\n      <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nexport function ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      className={cn(\n        \"m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100\",\n        className,\n      )}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        className=\"relative flex-1 rounded-full bg-foreground/20\"\n        data-slot=\"scroll-area-thumb\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollAreaPrimitive };\n",
+      "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function ScrollArea({\n  className,\n  children,\n  scrollFade = false,\n  scrollbarGutter = false,\n  fill = false,\n  clampContentMinWidth = true,\n  overscrollContain = false,\n  ...props\n}: ScrollAreaPrimitive.Root.Props & {\n  scrollFade?: boolean;\n  scrollbarGutter?: boolean;\n  fill?: boolean;\n  clampContentMinWidth?: boolean;\n  overscrollContain?: boolean;\n}): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Root\n      className={cn(\"size-full min-h-0\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        className={cn(\n          \"h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n          overscrollContain &&\n            \"data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain\",\n          scrollFade &&\n            \"mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]\",\n          scrollbarGutter &&\n            \"data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5\",\n        )}\n        data-slot=\"scroll-area-viewport\"\n      >\n        <ScrollAreaPrimitive.Content\n          className={cn(fill && \"size-full\")}\n          data-slot=\"scroll-area-content\"\n          style={clampContentMinWidth ? { minWidth: 0 } : undefined}\n        >\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar orientation=\"vertical\" />\n      <ScrollBar orientation=\"horizontal\" />\n      <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nexport function ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      className={cn(\n        \"m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100\",\n        className,\n      )}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        className=\"relative flex-1 rounded-full bg-foreground/20\"\n        data-slot=\"scroll-area-thumb\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollAreaPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/sheet.json b/apps/ui/public/r/sheet.json
index 5a974cbec..ee184c4e9 100644
--- a/apps/ui/public/r/sheet.json
+++ b/apps/ui/public/r/sheet.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/sheet.tsx",
-      "content": "\"use client\";\n\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const Sheet: typeof SheetPrimitive.Root = SheetPrimitive.Root;\n\nexport const SheetPortal: typeof SheetPrimitive.Portal = SheetPrimitive.Portal;\n\nexport function SheetTrigger(\n  props: SheetPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nexport function SheetClose(\n  props: SheetPrimitive.Close.Props,\n): React.ReactElement {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nexport function SheetBackdrop({\n  className,\n  ...props\n}: SheetPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"sheet-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetViewport({\n  className,\n  side,\n  variant = \"default\",\n  ...props\n}: SheetPrimitive.Viewport.Props & {\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"default\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <SheetPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid\",\n        side === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        side === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        side === \"left\" && \"flex justify-start\",\n        side === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"sm:p-4\",\n        className,\n      )}\n      data-slot=\"sheet-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetPopup({\n  className,\n  children,\n  showCloseButton = true,\n  side = \"right\",\n  variant = \"default\",\n  closeProps,\n  portalProps,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"default\" | \"inset\";\n  closeProps?: SheetPrimitive.Close.Props;\n  portalProps?: SheetPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <SheetPortal {...portalProps}>\n      <SheetBackdrop />\n      <SheetViewport side={side} variant={variant}>\n        <SheetPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 transition-[opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            side === \"bottom\" &&\n              \"row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8\",\n            side === \"top\" &&\n              \"border-b data-ending-style:-translate-y-8 data-starting-style:-translate-y-8\",\n            side === \"left\" &&\n              \"w-[calc(100%-(--spacing(12)))] max-w-md border-e data-ending-style:-translate-x-8 data-starting-style:-translate-x-8\",\n            side === \"right\" &&\n              \"col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s data-ending-style:translate-x-8 data-starting-style:translate-x-8\",\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            className,\n          )}\n          data-slot=\"sheet-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <SheetPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n              {...closeProps}\n            >\n              <XIcon />\n            </SheetPrimitive.Close>\n          )}\n        </SheetPrimitive.Popup>\n      </SheetViewport>\n    </SheetPortal>\n  );\n}\n\nexport function SheetHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pb-3 max-sm:pb-4\",\n      className,\n    ),\n    \"data-slot\": \"sheet-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SheetFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end\",\n      variant === \"default\" && \"border-t bg-muted/72 py-4\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pt-3 pt-4 pb-6\",\n      className,\n    ),\n    \"data-slot\": \"sheet-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SheetTitle({\n  className,\n  ...props\n}: SheetPrimitive.Title.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"sheet-title\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"sheet-description\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetPanel({\n  className,\n  scrollFade = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-header])]:pt-1 in-[[data-slot=sheet-popup]:has([data-slot=sheet-footer]:not(.border-t))]:pb-1\",\n      className,\n    ),\n    \"data-slot\": \"sheet-panel\",\n  };\n\n  return (\n    <ScrollArea scrollFade={scrollFade}>\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  );\n}\n\nexport {\n  SheetPrimitive,\n  SheetBackdrop as SheetOverlay,\n  SheetPopup as SheetContent,\n};\n",
+      "content": "\"use client\";\n\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const Sheet: typeof SheetPrimitive.Root = SheetPrimitive.Root;\n\nexport const SheetPortal: typeof SheetPrimitive.Portal = SheetPrimitive.Portal;\n\nexport function SheetTrigger(\n  props: SheetPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nexport function SheetClose(\n  props: SheetPrimitive.Close.Props,\n): React.ReactElement {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nexport function SheetBackdrop({\n  className,\n  ...props\n}: SheetPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"sheet-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetViewport({\n  className,\n  side,\n  variant = \"default\",\n  ...props\n}: SheetPrimitive.Viewport.Props & {\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"default\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <SheetPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid\",\n        side === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        side === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        side === \"left\" && \"flex justify-start\",\n        side === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"sm:p-4\",\n        className,\n      )}\n      data-slot=\"sheet-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetPopup({\n  className,\n  children,\n  showCloseButton = true,\n  side = \"right\",\n  variant = \"default\",\n  closeProps,\n  portalProps,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"default\" | \"inset\";\n  closeProps?: SheetPrimitive.Close.Props;\n  portalProps?: SheetPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <SheetPortal {...portalProps}>\n      <SheetBackdrop />\n      <SheetViewport side={side} variant={variant}>\n        <SheetPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 transition-[opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            side === \"bottom\" &&\n              \"row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8\",\n            side === \"top\" &&\n              \"border-b data-ending-style:-translate-y-8 data-starting-style:-translate-y-8\",\n            side === \"left\" &&\n              \"w-[calc(100%-(--spacing(12)))] max-w-md border-e data-ending-style:-translate-x-8 data-starting-style:-translate-x-8\",\n            side === \"right\" &&\n              \"col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s data-ending-style:translate-x-8 data-starting-style:translate-x-8\",\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            className,\n          )}\n          data-slot=\"sheet-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <SheetPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n              {...closeProps}\n            >\n              <XIcon />\n            </SheetPrimitive.Close>\n          )}\n        </SheetPrimitive.Popup>\n      </SheetViewport>\n    </SheetPortal>\n  );\n}\n\nexport function SheetHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pb-3 max-sm:pb-4\",\n      className,\n    ),\n    \"data-slot\": \"sheet-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SheetFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end\",\n      variant === \"default\" && \"border-t bg-muted/72 py-4\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pt-3 pt-4 pb-6\",\n      className,\n    ),\n    \"data-slot\": \"sheet-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SheetTitle({\n  className,\n  ...props\n}: SheetPrimitive.Title.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"sheet-title\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"sheet-description\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetPanel({\n  className,\n  scrollFade = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-header])]:pt-1 in-[[data-slot=sheet-popup]:has([data-slot=sheet-footer]:not(.border-t))]:pb-1\",\n      className,\n    ),\n    \"data-slot\": \"sheet-panel\",\n  };\n\n  return (\n    <ScrollArea overscrollContain scrollFade={scrollFade}>\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  );\n}\n\nexport {\n  SheetPrimitive,\n  SheetBackdrop as SheetOverlay,\n  SheetPopup as SheetContent,\n};\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/sidebar.json b/apps/ui/public/r/sidebar.json
index 4c6a22456..4ed5003c3 100644
--- a/apps/ui/public/r/sidebar.json
+++ b/apps/ui/public/r/sidebar.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/default/ui/sidebar.tsx",
-      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { PanelLeftIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { useMediaQuery } from \"@/registry/default/hooks/use-media-query\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Separator } from \"@/registry/default/ui/separator\";\nimport {\n  Sheet,\n  SheetDescription,\n  SheetHeader,\n  SheetPopup,\n  SheetTitle,\n} from \"@/registry/default/ui/sheet\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst SIDEBAR_COOKIE_NAME: string = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE: number = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH: string = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE: string = \"18rem\";\nconst SIDEBAR_WIDTH_ICON: string = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT: string = \"b\";\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-8 text-sm\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n        sm: \"h-7 text-xs\",\n      },\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n    },\n  },\n);\n\nexport type SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\";\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n};\n\nexport const SidebarContext: React.Context<SidebarContextProps | null> =\n  React.createContext<SidebarContextProps | null>(null);\n\nexport function useSidebar(): SidebarContextProps {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n  }\n\n  return context;\n}\n\nexport function SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}): React.ReactElement {\n  const isMobile = useMediaQuery(\"max-md\");\n  const [openMobile, setOpenMobile] = React.useState(false);\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = React.useCallback(\n    async (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      await cookieStore.set({\n        expires: Date.now() + SIDEBAR_COOKIE_MAX_AGE * 1000,\n        name: SIDEBAR_COOKIE_NAME,\n        path: \"/\",\n        value: String(openState),\n      });\n    },\n    [setOpenProp, open],\n  );\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n  }, [isMobile, setOpen]);\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent): void => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [toggleSidebar]);\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\";\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      isMobile,\n      open,\n      openMobile,\n      setOpen,\n      setOpenMobile,\n      state,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, toggleSidebar],\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className,\n        )}\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\nexport function Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\";\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}): React.ReactElement {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className,\n        )}\n        data-slot=\"sidebar\"\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet onOpenChange={setOpenMobile} open={openMobile} {...props}>\n        <SheetPopup\n          className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          data-mobile=\"true\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          side={side}\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetPopup>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-side={side}\n      data-slot=\"sidebar\"\n      data-state={state}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n        )}\n        data-slot=\"sidebar-gap\"\n      />\n      <div\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className,\n        )}\n        data-slot=\"sidebar-container\"\n        {...props}\n      >\n        <div\n          className=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm/5\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>): React.ReactElement {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      className={cn(\"size-7\", className)}\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      size=\"icon\"\n      variant=\"ghost\"\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\nexport function SidebarRail({\n  className,\n  ...props\n}: React.ComponentProps<\"button\">): React.ReactElement {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      aria-label=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className,\n      )}\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      onClick={toggleSidebar}\n      tabIndex={-1}\n      title=\"Toggle Sidebar\"\n      type=\"button\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarInset({\n  className,\n  ...props\n}: React.ComponentProps<\"main\">): React.ReactElement {\n  return (\n    <main\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background\",\n        \"md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm/5\",\n        className,\n      )}\n      data-slot=\"sidebar-inset\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>): React.ReactElement {\n  return (\n    <Input\n      className={cn(\"h-8 w-full bg-background shadow-none\", className)}\n      data-sidebar=\"input\"\n      data-slot=\"sidebar-input\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      data-sidebar=\"header\"\n      data-slot=\"sidebar-header\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      data-sidebar=\"footer\"\n      data-slot=\"sidebar-footer\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>): React.ReactElement {\n  return (\n    <Separator\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      data-sidebar=\"separator\"\n      data-slot=\"sidebar-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <ScrollArea className=\"min-h-0 flex-1\" fill scrollFade>\n      <div\n        className={cn(\n          \"flex h-full flex-col gap-2 group-data-[collapsible=icon]:overflow-hidden\",\n          className,\n        )}\n        data-sidebar=\"content\"\n        data-slot=\"sidebar-content\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function SidebarGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      data-sidebar=\"group\"\n      data-slot=\"sidebar-group\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex h-8 shrink-0 items-center rounded-lg px-2 font-medium text-sidebar-foreground text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n      \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n      className,\n    ),\n    \"data-sidebar\": \"group-label\",\n    \"data-slot\": \"sidebar-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      // Increases the hit area of the button on mobile.\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className,\n    ),\n    \"data-sidebar\": \"group-action\",\n    \"data-slot\": \"sidebar-group-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"w-full text-sm\", className)}\n      data-sidebar=\"group-content\"\n      data-slot=\"sidebar-group-content\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenu({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      data-sidebar=\"menu\"\n      data-slot=\"sidebar-menu\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"group/menu-item relative\", className)}\n      data-sidebar=\"menu-item\"\n      data-slot=\"sidebar-menu-item\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuButton({\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  isActive?: boolean;\n  tooltip?: string | React.ComponentProps<typeof TooltipPopup>;\n} & VariantProps<typeof sidebarMenuButtonVariants>): React.ReactElement {\n  const { isMobile, state } = useSidebar();\n\n  const defaultProps = {\n    className: cn(sidebarMenuButtonVariants({ size, variant }), className),\n    \"data-active\": isActive,\n    \"data-sidebar\": \"menu-button\",\n    \"data-size\": size,\n    \"data-slot\": \"sidebar-menu-button\",\n  };\n\n  const buttonProps = mergeProps<\"button\">(defaultProps, props);\n\n  const buttonElement = useRender({\n    defaultTagName: \"button\",\n    props: buttonProps,\n    render,\n  });\n\n  if (!tooltip) {\n    return buttonElement;\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={buttonElement as React.ReactElement<Record<string, unknown>>}\n      />\n      <TooltipPopup\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        side=\"right\"\n        {...tooltip}\n      />\n    </Tooltip>\n  );\n}\n\nexport function SidebarMenuAction({\n  className,\n  showOnHover = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  showOnHover?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      // Increases the hit area of the button on mobile.\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"peer-data-[size=sm]/menu-button:top-1\",\n      \"peer-data-[size=default]/menu-button:top-1.5\",\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      showOnHover &&\n        \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n      className,\n    ),\n    \"data-sidebar\": \"menu-action\",\n    \"data-slot\": \"sidebar-menu-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-lg px-1 font-medium text-sidebar-foreground text-xs tabular-nums\",\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      data-sidebar=\"menu-badge\"\n      data-slot=\"sidebar-menu-badge\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean;\n}): React.ReactElement {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`;\n  }, []);\n\n  return (\n    <div\n      className={cn(\"flex h-8 items-center gap-2 rounded-lg px-2\", className)}\n      data-sidebar=\"menu-skeleton\"\n      data-slot=\"sidebar-menu-skeleton\"\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-lg\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n}\n\nexport function SidebarMenuSub({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      data-sidebar=\"menu-sub\"\n      data-slot=\"sidebar-menu-sub\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"group/menu-sub-item relative\", className)}\n      data-sidebar=\"menu-sub-item\"\n      data-slot=\"sidebar-menu-sub-item\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubButton({\n  size = \"md\",\n  isActive = false,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\"> & {\n  size?: \"sm\" | \"md\";\n  isActive?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex h-8 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 sm:h-7 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n      \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n      size === \"sm\" && \"text-xs\",\n      size === \"md\" && \"text-sm\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className,\n    ),\n    \"data-active\": isActive,\n    \"data-sidebar\": \"menu-sub-button\",\n    \"data-size\": size,\n    \"data-slot\": \"sidebar-menu-sub-button\",\n  };\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(defaultProps, props),\n    render,\n  });\n}\n",
+      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { PanelLeftIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { useMediaQuery } from \"@/registry/default/hooks/use-media-query\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Separator } from \"@/registry/default/ui/separator\";\nimport {\n  Sheet,\n  SheetDescription,\n  SheetHeader,\n  SheetPopup,\n  SheetTitle,\n} from \"@/registry/default/ui/sheet\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst SIDEBAR_COOKIE_NAME: string = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE: number = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH: string = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE: string = \"18rem\";\nconst SIDEBAR_WIDTH_ICON: string = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT: string = \"b\";\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-8 text-sm\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n        sm: \"h-7 text-xs\",\n      },\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n    },\n  },\n);\n\nexport type SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\";\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n};\n\nexport const SidebarContext: React.Context<SidebarContextProps | null> =\n  React.createContext<SidebarContextProps | null>(null);\n\nexport function useSidebar(): SidebarContextProps {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n  }\n\n  return context;\n}\n\nexport function SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}): React.ReactElement {\n  const isMobile = useMediaQuery(\"max-md\");\n  const [openMobile, setOpenMobile] = React.useState(false);\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = React.useCallback(\n    async (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      await cookieStore.set({\n        expires: Date.now() + SIDEBAR_COOKIE_MAX_AGE * 1000,\n        name: SIDEBAR_COOKIE_NAME,\n        path: \"/\",\n        value: String(openState),\n      });\n    },\n    [setOpenProp, open],\n  );\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n  }, [isMobile, setOpen]);\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent): void => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [toggleSidebar]);\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\";\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      isMobile,\n      open,\n      openMobile,\n      setOpen,\n      setOpenMobile,\n      state,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, toggleSidebar],\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className,\n        )}\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\nexport function Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\";\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}): React.ReactElement {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className,\n        )}\n        data-slot=\"sidebar\"\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet onOpenChange={setOpenMobile} open={openMobile} {...props}>\n        <SheetPopup\n          className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          data-mobile=\"true\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          side={side}\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetPopup>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-side={side}\n      data-slot=\"sidebar\"\n      data-state={state}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n        )}\n        data-slot=\"sidebar-gap\"\n      />\n      <div\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className,\n        )}\n        data-slot=\"sidebar-container\"\n        {...props}\n      >\n        <div\n          className=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm/5\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>): React.ReactElement {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      className={cn(\"size-7\", className)}\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      size=\"icon\"\n      variant=\"ghost\"\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\nexport function SidebarRail({\n  className,\n  ...props\n}: React.ComponentProps<\"button\">): React.ReactElement {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      aria-label=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className,\n      )}\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      onClick={toggleSidebar}\n      tabIndex={-1}\n      title=\"Toggle Sidebar\"\n      type=\"button\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarInset({\n  className,\n  ...props\n}: React.ComponentProps<\"main\">): React.ReactElement {\n  return (\n    <main\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background\",\n        \"md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm/5\",\n        className,\n      )}\n      data-slot=\"sidebar-inset\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>): React.ReactElement {\n  return (\n    <Input\n      className={cn(\"h-8 w-full bg-background shadow-none\", className)}\n      data-sidebar=\"input\"\n      data-slot=\"sidebar-input\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      data-sidebar=\"header\"\n      data-slot=\"sidebar-header\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      data-sidebar=\"footer\"\n      data-slot=\"sidebar-footer\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>): React.ReactElement {\n  return (\n    <Separator\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      data-sidebar=\"separator\"\n      data-slot=\"sidebar-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <ScrollArea className=\"min-h-0 flex-1\" fill overscrollContain scrollFade>\n      <div\n        className={cn(\n          \"flex h-full flex-col gap-2 group-data-[collapsible=icon]:overflow-hidden\",\n          className,\n        )}\n        data-sidebar=\"content\"\n        data-slot=\"sidebar-content\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function SidebarGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      data-sidebar=\"group\"\n      data-slot=\"sidebar-group\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex h-8 shrink-0 items-center rounded-lg px-2 font-medium text-sidebar-foreground text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n      \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n      className,\n    ),\n    \"data-sidebar\": \"group-label\",\n    \"data-slot\": \"sidebar-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      // Increases the hit area of the button on mobile.\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className,\n    ),\n    \"data-sidebar\": \"group-action\",\n    \"data-slot\": \"sidebar-group-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"w-full text-sm\", className)}\n      data-sidebar=\"group-content\"\n      data-slot=\"sidebar-group-content\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenu({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      data-sidebar=\"menu\"\n      data-slot=\"sidebar-menu\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"group/menu-item relative\", className)}\n      data-sidebar=\"menu-item\"\n      data-slot=\"sidebar-menu-item\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuButton({\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  isActive?: boolean;\n  tooltip?: string | React.ComponentProps<typeof TooltipPopup>;\n} & VariantProps<typeof sidebarMenuButtonVariants>): React.ReactElement {\n  const { isMobile, state } = useSidebar();\n\n  const defaultProps = {\n    className: cn(sidebarMenuButtonVariants({ size, variant }), className),\n    \"data-active\": isActive,\n    \"data-sidebar\": \"menu-button\",\n    \"data-size\": size,\n    \"data-slot\": \"sidebar-menu-button\",\n  };\n\n  const buttonProps = mergeProps<\"button\">(defaultProps, props);\n\n  const buttonElement = useRender({\n    defaultTagName: \"button\",\n    props: buttonProps,\n    render,\n  });\n\n  if (!tooltip) {\n    return buttonElement;\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={buttonElement as React.ReactElement<Record<string, unknown>>}\n      />\n      <TooltipPopup\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        side=\"right\"\n        {...tooltip}\n      />\n    </Tooltip>\n  );\n}\n\nexport function SidebarMenuAction({\n  className,\n  showOnHover = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  showOnHover?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      // Increases the hit area of the button on mobile.\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"peer-data-[size=sm]/menu-button:top-1\",\n      \"peer-data-[size=default]/menu-button:top-1.5\",\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      showOnHover &&\n        \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n      className,\n    ),\n    \"data-sidebar\": \"menu-action\",\n    \"data-slot\": \"sidebar-menu-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-lg px-1 font-medium text-sidebar-foreground text-xs tabular-nums\",\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      data-sidebar=\"menu-badge\"\n      data-slot=\"sidebar-menu-badge\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean;\n}): React.ReactElement {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`;\n  }, []);\n\n  return (\n    <div\n      className={cn(\"flex h-8 items-center gap-2 rounded-lg px-2\", className)}\n      data-sidebar=\"menu-skeleton\"\n      data-slot=\"sidebar-menu-skeleton\"\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-lg\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n}\n\nexport function SidebarMenuSub({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      data-sidebar=\"menu-sub\"\n      data-slot=\"sidebar-menu-sub\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"group/menu-sub-item relative\", className)}\n      data-sidebar=\"menu-sub-item\"\n      data-slot=\"sidebar-menu-sub-item\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubButton({\n  size = \"md\",\n  isActive = false,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\"> & {\n  size?: \"sm\" | \"md\";\n  isActive?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex h-8 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 sm:h-7 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n      \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n      size === \"sm\" && \"text-xs\",\n      size === \"md\" && \"text-sm\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className,\n    ),\n    \"data-active\": isActive,\n    \"data-sidebar\": \"menu-sub-button\",\n    \"data-size\": size,\n    \"data-slot\": \"sidebar-menu-sub-button\",\n  };\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(defaultProps, props),\n    render,\n  });\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/registry/default/particles/p-calendar-19.tsx b/apps/ui/registry/default/particles/p-calendar-19.tsx
index d37034da4..7b19435a8 100644
--- a/apps/ui/registry/default/particles/p-calendar-19.tsx
+++ b/apps/ui/registry/default/particles/p-calendar-19.tsx
@@ -49,7 +49,12 @@ export default function Particle() {
       />
       <div className="relative w-full max-sm:h-48 sm:w-40">
         <div className="absolute inset-0 max-sm:border-t">
-          <ScrollArea className="h-full sm:border-s" scrollbarGutter scrollFade>
+          <ScrollArea
+            className="h-full sm:border-s"
+            overscrollContain
+            scrollbarGutter
+            scrollFade
+          >
             <div className="flex flex-col gap-3 py-3 sm:pt-0 sm:pb-2">
               <div className="flex shrink-0 items-center font-medium text-sm sm:h-8 sm:px-5">
                 {format(date, "EEEE, d")}
diff --git a/apps/ui/registry/default/particles/p-command-2.tsx b/apps/ui/registry/default/particles/p-command-2.tsx
index 834ce46b4..e7f05cfe5 100644
--- a/apps/ui/registry/default/particles/p-command-2.tsx
+++ b/apps/ui/registry/default/particles/p-command-2.tsx
@@ -511,7 +511,7 @@ export default function PCommand2() {
                 </Button>
               </div>
               <CommandPanel>
-                <ScrollArea scrollbarGutter scrollFade>
+                <ScrollArea overscrollContain scrollbarGutter scrollFade>
                   <div className="p-5">
                     {!aiState.isGenerating &&
                       !aiState.response &&
diff --git a/apps/ui/registry/default/ui/autocomplete.tsx b/apps/ui/registry/default/ui/autocomplete.tsx
index 161ca6a55..0f0c4f337 100644
--- a/apps/ui/registry/default/ui/autocomplete.tsx
+++ b/apps/ui/registry/default/ui/autocomplete.tsx
@@ -231,7 +231,7 @@ export function AutocompleteList({
   ...props
 }: AutocompletePrimitive.List.Props): React.ReactElement {
   return (
-    <ScrollArea scrollbarGutter scrollFade>
+    <ScrollArea overscrollContain scrollbarGutter scrollFade>
       <AutocompletePrimitive.List
         className={cn(
           "not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3",
diff --git a/apps/ui/registry/default/ui/combobox.tsx b/apps/ui/registry/default/ui/combobox.tsx
index 72f12f665..7e3f0085a 100644
--- a/apps/ui/registry/default/ui/combobox.tsx
+++ b/apps/ui/registry/default/ui/combobox.tsx
@@ -316,7 +316,7 @@ export function ComboboxList({
   ...props
 }: ComboboxPrimitive.List.Props): React.ReactElement {
   return (
-    <ScrollArea scrollbarGutter scrollFade>
+    <ScrollArea overscrollContain scrollbarGutter scrollFade>
       <ComboboxPrimitive.List
         className={cn(
           "not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3",
diff --git a/apps/ui/registry/default/ui/dialog.tsx b/apps/ui/registry/default/ui/dialog.tsx
index 4bf111f0b..d72827fd4 100644
--- a/apps/ui/registry/default/ui/dialog.tsx
+++ b/apps/ui/registry/default/ui/dialog.tsx
@@ -203,7 +203,7 @@ export function DialogPanel({
   };
 
   return (
-    <ScrollArea scrollFade={scrollFade}>
+    <ScrollArea overscrollContain scrollFade={scrollFade}>
       {useRender({
         defaultTagName: "div",
         props: mergeProps<"div">(defaultProps, props),
diff --git a/apps/ui/registry/default/ui/drawer.tsx b/apps/ui/registry/default/ui/drawer.tsx
index 1fcfeb1e7..02763f6aa 100644
--- a/apps/ui/registry/default/ui/drawer.tsx
+++ b/apps/ui/registry/default/ui/drawer.tsx
@@ -339,7 +339,11 @@ export function DrawerPanel({
 
   if (scrollable) {
     return (
-      <ScrollArea className="touch-auto" scrollFade={scrollFade}>
+      <ScrollArea
+        className="touch-auto"
+        overscrollContain
+        scrollFade={scrollFade}
+      >
         {content}
       </ScrollArea>
     );
diff --git a/apps/ui/registry/default/ui/scroll-area.tsx b/apps/ui/registry/default/ui/scroll-area.tsx
index 10fa99050..7a8783ed4 100644
--- a/apps/ui/registry/default/ui/scroll-area.tsx
+++ b/apps/ui/registry/default/ui/scroll-area.tsx
@@ -11,12 +11,14 @@ export function ScrollArea({
   scrollbarGutter = false,
   fill = false,
   clampContentMinWidth = true,
+  overscrollContain = false,
   ...props
 }: ScrollAreaPrimitive.Root.Props & {
   scrollFade?: boolean;
   scrollbarGutter?: boolean;
   fill?: boolean;
   clampContentMinWidth?: boolean;
+  overscrollContain?: boolean;
 }): React.ReactElement {
   return (
     <ScrollAreaPrimitive.Root
@@ -25,7 +27,9 @@ export function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         className={cn(
-          "h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain",
+          "h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          overscrollContain &&
+            "data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain",
           scrollFade &&
             "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]",
           scrollbarGutter &&
diff --git a/apps/ui/registry/default/ui/sheet.tsx b/apps/ui/registry/default/ui/sheet.tsx
index df84ad6fb..28d3122a4 100644
--- a/apps/ui/registry/default/ui/sheet.tsx
+++ b/apps/ui/registry/default/ui/sheet.tsx
@@ -214,7 +214,7 @@ export function SheetPanel({
   };
 
   return (
-    <ScrollArea scrollFade={scrollFade}>
+    <ScrollArea overscrollContain scrollFade={scrollFade}>
       {useRender({
         defaultTagName: "div",
         props: mergeProps<"div">(defaultProps, props),
diff --git a/apps/ui/registry/default/ui/sidebar.tsx b/apps/ui/registry/default/ui/sidebar.tsx
index 61b989b17..e6f284ee9 100644
--- a/apps/ui/registry/default/ui/sidebar.tsx
+++ b/apps/ui/registry/default/ui/sidebar.tsx
@@ -412,7 +412,7 @@ export function SidebarContent({
   ...props
 }: React.ComponentProps<"div">): React.ReactElement {
   return (
-    <ScrollArea className="min-h-0 flex-1" fill scrollFade>
+    <ScrollArea className="min-h-0 flex-1" fill overscrollContain scrollFade>
       <div
         className={cn(
           "flex h-full flex-col gap-2 group-data-[collapsible=icon]:overflow-hidden",
diff --git a/apps/ui/skills/coss/references/primitives/scroll-area.md b/apps/ui/skills/coss/references/primitives/scroll-area.md
index 524ce409e..3d9a9d55b 100644
--- a/apps/ui/skills/coss/references/primitives/scroll-area.md
+++ b/apps/ui/skills/coss/references/primitives/scroll-area.md
@@ -77,6 +77,16 @@ Fill viewport for flex layouts (e.g. sidebar footers with `mt-auto`):
 
 `fill` defaults to `false`. Use it only when the content wrapper must stretch to the viewport height—not for lists, comboboxes, or other content-sized scroll areas.
 
+Prevent scroll chaining into parent scrollers:
+
+```tsx
+<ScrollArea className="h-64" overscrollContain>
+  <div className="p-4">{/* Long content */}</div>
+</ScrollArea>
+```
+
+`overscrollContain` defaults to `false`. Opt in for nested surfaces (dialogs, sheets, drawers, popups, sidebars) where wheel/touch should not propagate past the scroll area.
+
 `ScrollArea` always renders both scrollbars internally -- horizontal scroll is driven by inner content width exceeding the container, not by a prop. Also supports `scrollbarGutter` for reserving scrollbar space.
 
 `clampContentMinWidth` defaults to `true` and sets `minWidth: 0` on the content wrapper to avoid spurious horizontal scroll in vertical layouts (Base UI uses `min-width: fit-content`). Wide children (`w-max`, table min-width) still scroll horizontally. Set `clampContentMinWidth={false}` only if horizontal scroll breaks and the child has no explicit width.
@@ -91,6 +101,7 @@ See `p-scroll-area-1` through `p-scroll-area-5` for vertical, horizontal, both a
 - Nesting multiple scroll areas that compete for wheel/touch events.
 - Using scroll area where native page scrolling is simpler and clearer.
 - Using `fill` on every scroll area—default is `false`; opt in only for flex layouts that need full viewport height (e.g. `mt-auto` footers). Pair with `flex-1 min-h-0` on the root and `h-full flex-col` on the inner wrapper.
+- Forgetting `overscrollContain` on nested scroll surfaces (dialogs, popups, sidebars) when scroll should not chain to the page—default is `false`.
 - Disabling `clampContentMinWidth` unless horizontal scroll actually regresses—default `true` fixes spurious horizontal bars in vertical-first layouts.
 
 ## Useful particle references
diff --git a/packages/ui/src/components/autocomplete.tsx b/packages/ui/src/components/autocomplete.tsx
index 8c49b3e12..ca7a95469 100644
--- a/packages/ui/src/components/autocomplete.tsx
+++ b/packages/ui/src/components/autocomplete.tsx
@@ -231,7 +231,7 @@ export function AutocompleteList({
   ...props
 }: AutocompletePrimitive.List.Props): React.ReactElement {
   return (
-    <ScrollArea scrollbarGutter scrollFade>
+    <ScrollArea overscrollContain scrollbarGutter scrollFade>
       <AutocompletePrimitive.List
         className={cn(
           "not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3",
diff --git a/packages/ui/src/components/combobox.tsx b/packages/ui/src/components/combobox.tsx
index c63e98ae7..915eb6cd0 100644
--- a/packages/ui/src/components/combobox.tsx
+++ b/packages/ui/src/components/combobox.tsx
@@ -316,7 +316,7 @@ export function ComboboxList({
   ...props
 }: ComboboxPrimitive.List.Props): React.ReactElement {
   return (
-    <ScrollArea scrollbarGutter scrollFade>
+    <ScrollArea overscrollContain scrollbarGutter scrollFade>
       <ComboboxPrimitive.List
         className={cn(
           "not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3",
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index 9b4ce6549..6790ce5fb 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -203,7 +203,7 @@ export function DialogPanel({
   };
 
   return (
-    <ScrollArea scrollFade={scrollFade}>
+    <ScrollArea overscrollContain scrollFade={scrollFade}>
       {useRender({
         defaultTagName: "div",
         props: mergeProps<"div">(defaultProps, props),
diff --git a/packages/ui/src/components/drawer.tsx b/packages/ui/src/components/drawer.tsx
index d9e7cdd80..7ad9c5101 100644
--- a/packages/ui/src/components/drawer.tsx
+++ b/packages/ui/src/components/drawer.tsx
@@ -339,7 +339,11 @@ export function DrawerPanel({
 
   if (scrollable) {
     return (
-      <ScrollArea className="touch-auto" scrollFade={scrollFade}>
+      <ScrollArea
+        className="touch-auto"
+        overscrollContain
+        scrollFade={scrollFade}
+      >
         {content}
       </ScrollArea>
     );
diff --git a/packages/ui/src/components/scroll-area.tsx b/packages/ui/src/components/scroll-area.tsx
index 5184ca097..4a70c88e2 100644
--- a/packages/ui/src/components/scroll-area.tsx
+++ b/packages/ui/src/components/scroll-area.tsx
@@ -11,12 +11,14 @@ export function ScrollArea({
   scrollbarGutter = false,
   fill = false,
   clampContentMinWidth = true,
+  overscrollContain = false,
   ...props
 }: ScrollAreaPrimitive.Root.Props & {
   scrollFade?: boolean;
   scrollbarGutter?: boolean;
   fill?: boolean;
   clampContentMinWidth?: boolean;
+  overscrollContain?: boolean;
 }): React.ReactElement {
   return (
     <ScrollAreaPrimitive.Root
@@ -25,7 +27,9 @@ export function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         className={cn(
-          "h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain",
+          "h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          overscrollContain &&
+            "data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain",
           scrollFade &&
             "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]",
           scrollbarGutter &&
diff --git a/packages/ui/src/components/sheet.tsx b/packages/ui/src/components/sheet.tsx
index 17eae1b54..d1122828a 100644
--- a/packages/ui/src/components/sheet.tsx
+++ b/packages/ui/src/components/sheet.tsx
@@ -214,7 +214,7 @@ export function SheetPanel({
   };
 
   return (
-    <ScrollArea scrollFade={scrollFade}>
+    <ScrollArea overscrollContain scrollFade={scrollFade}>
       {useRender({
         defaultTagName: "div",
         props: mergeProps<"div">(defaultProps, props),
diff --git a/packages/ui/src/components/sidebar.tsx b/packages/ui/src/components/sidebar.tsx
index 6a3d172f9..88e23680b 100644
--- a/packages/ui/src/components/sidebar.tsx
+++ b/packages/ui/src/components/sidebar.tsx
@@ -412,7 +412,7 @@ export function SidebarContent({
   ...props
 }: React.ComponentProps<"div">): React.ReactElement {
   return (
-    <ScrollArea className="min-h-0 flex-1" fill scrollFade>
+    <ScrollArea className="min-h-0 flex-1" fill overscrollContain scrollFade>
       <div
         className={cn(
           "flex h-full flex-col gap-2 group-data-[collapsible=icon]:overflow-hidden",

From e43fa4a8da4c490ebf3e1e1707b2a9af6fa2a217 Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Sat, 1 Aug 2026 12:56:48 +0200
Subject: [PATCH 38/49] fix(ui): improve form control autofill text colors in
 iframes (#830)

* fix(input): set autofill text color on the input element

Ensure autofilled text uses foreground color in embedded iframes where
browser autofill styles otherwise override the wrapper-level color.

Co-authored-by: Cursor <cursoragent@cursor.com>

* chore(registry): sync input.json after autofill fix

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(input): move text-foreground onto the input element

Keep autofill text color and foreground text on the input itself for
consistent styling in embedded iframes.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(ui): move text color onto form control elements

Apply text-foreground (and related styles) on textarea, number-field,
and combobox inputs for consistent autofill behavior in iframes.

Co-authored-by: Cursor <cursoragent@cursor.com>

* chore(registry): sync combobox and number-field JSON

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/ui/public/r/combobox.json               | 2 +-
 apps/ui/public/r/input.json                  | 2 +-
 apps/ui/public/r/number-field.json           | 2 +-
 apps/ui/public/r/textarea.json               | 2 +-
 apps/ui/registry/default/ui/combobox.tsx     | 4 ++--
 apps/ui/registry/default/ui/input.tsx        | 4 ++--
 apps/ui/registry/default/ui/number-field.tsx | 4 ++--
 apps/ui/registry/default/ui/textarea.tsx     | 4 ++--
 packages/ui/src/components/combobox.tsx      | 4 ++--
 packages/ui/src/components/input.tsx         | 4 ++--
 packages/ui/src/components/number-field.tsx  | 4 ++--
 packages/ui/src/components/textarea.tsx      | 4 ++--
 12 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/apps/ui/public/r/combobox.json b/apps/ui/public/r/combobox.json
index 601f60aeb..f4e84ea56 100644
--- a/apps/ui/public/r/combobox.json
+++ b/apps/ui/public/r/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/combobox.tsx",
-      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const ComboboxContext: React.Context<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}> = React.createContext<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}>({\n  chipsRef: null,\n  multiple: false,\n});\n\nexport function Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>,\n): React.ReactElement {\n  const chipsRef = React.useRef<Element | null>(null);\n  return (\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxContext.Provider>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  size,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\",\n        sizeValue === \"sm\" ? \"ps-1.5\" : \"ps-2\",\n        className,\n      )}\n      data-size={typeof sizeValue === \"string\" ? sizeValue : undefined}\n      data-slot=\"combobox-chips-input\"\n      size={typeof sizeValue === \"number\" ? sizeValue : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxInput({\n  className,\n  showTrigger = true,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\n  clearProps?: ComboboxPrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"combobox-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <ComboboxPrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\"\n            : \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"combobox-input\"\n        render={\n          <Input\n            className=\"has-disabled:opacity-100\"\n            nativeInput\n            size={sizeValue}\n          />\n        }\n        {...props}\n      />\n      {showTrigger && (\n        <ComboboxTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <ComboboxPrimitive.Icon data-slot=\"combobox-icon\">\n            <ChevronsUpDownIcon />\n          </ComboboxPrimitive.Icon>\n        </ComboboxTrigger>\n      )}\n      {showClear && (\n        <ComboboxClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </ComboboxClear>\n      )}\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={className}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport function ComboboxPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor: anchorProp,\n  portalProps,\n  ...props\n}: ComboboxPrimitive.Popup.Props & {\n  align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: ComboboxPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n  const anchor = anchorProp ?? chipsRef;\n\n  return (\n    <ComboboxPrimitive.Portal {...portalProps}>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <ComboboxPrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"combobox-popup\"\n            {...props}\n          >\n            {children}\n          </ComboboxPrimitive.Popup>\n        </span>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ComboboxPrimitive.ItemIndicator>\n      <div className=\"col-start-2\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxEmpty({\n  className,\n  ...props\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxRow({\n  className,\n  ...props\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Row\n      className={className}\n      data-slot=\"combobox-row\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxValue: typeof ComboboxPrimitive.Value =\n  ComboboxPrimitive.Value;\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComboboxPrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea overscrollContain scrollbarGutter scrollFade>\n      <ComboboxPrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"combobox-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function ComboboxClear({\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Clear\n      className={className}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxCollection: typeof ComboboxPrimitive.Collection =\n  ComboboxPrimitive.Collection;\n\nexport function ComboboxChips({\n  className,\n  children,\n  startAddon,\n  ...props\n}: ComboboxPrimitive.Chips.Props & {\n  startAddon?: React.ReactNode;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"combobox-chips\"\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\n      {...props}\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      {children}\n    </ComboboxPrimitive.Chips>\n  );\n}\n\nexport function ComboboxChip({\n  children,\n  removeProps,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\n}): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Chip\n      className=\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove {...removeProps} />\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nexport function ComboboxChipRemove(\n  props: ComboboxPrimitive.ChipRemove.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      aria-label=\"Remove\"\n      className=\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      <XIcon />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\n  ComboboxPrimitive.useFilter;\n\nexport { ComboboxPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const ComboboxContext: React.Context<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}> = React.createContext<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}>({\n  chipsRef: null,\n  multiple: false,\n});\n\nexport function Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>,\n): React.ReactElement {\n  const chipsRef = React.useRef<Element | null>(null);\n  return (\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxContext.Provider>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  size,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"min-w-12 flex-1 text-base text-foreground outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\",\n        sizeValue === \"sm\" ? \"ps-1.5\" : \"ps-2\",\n        className,\n      )}\n      data-size={typeof sizeValue === \"string\" ? sizeValue : undefined}\n      data-slot=\"combobox-chips-input\"\n      size={typeof sizeValue === \"number\" ? sizeValue : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxInput({\n  className,\n  showTrigger = true,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\n  clearProps?: ComboboxPrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"combobox-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <ComboboxPrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\"\n            : \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"combobox-input\"\n        render={\n          <Input\n            className=\"has-disabled:opacity-100\"\n            nativeInput\n            size={sizeValue}\n          />\n        }\n        {...props}\n      />\n      {showTrigger && (\n        <ComboboxTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <ComboboxPrimitive.Icon data-slot=\"combobox-icon\">\n            <ChevronsUpDownIcon />\n          </ComboboxPrimitive.Icon>\n        </ComboboxTrigger>\n      )}\n      {showClear && (\n        <ComboboxClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </ComboboxClear>\n      )}\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={className}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport function ComboboxPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor: anchorProp,\n  portalProps,\n  ...props\n}: ComboboxPrimitive.Popup.Props & {\n  align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: ComboboxPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n  const anchor = anchorProp ?? chipsRef;\n\n  return (\n    <ComboboxPrimitive.Portal {...portalProps}>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <ComboboxPrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"combobox-popup\"\n            {...props}\n          >\n            {children}\n          </ComboboxPrimitive.Popup>\n        </span>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ComboboxPrimitive.ItemIndicator>\n      <div className=\"col-start-2\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxEmpty({\n  className,\n  ...props\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxRow({\n  className,\n  ...props\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Row\n      className={className}\n      data-slot=\"combobox-row\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxValue: typeof ComboboxPrimitive.Value =\n  ComboboxPrimitive.Value;\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComboboxPrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea overscrollContain scrollbarGutter scrollFade>\n      <ComboboxPrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"combobox-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function ComboboxClear({\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Clear\n      className={className}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxCollection: typeof ComboboxPrimitive.Collection =\n  ComboboxPrimitive.Collection;\n\nexport function ComboboxChips({\n  className,\n  children,\n  startAddon,\n  ...props\n}: ComboboxPrimitive.Chips.Props & {\n  startAddon?: React.ReactNode;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"combobox-chips\"\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\n      {...props}\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      {children}\n    </ComboboxPrimitive.Chips>\n  );\n}\n\nexport function ComboboxChip({\n  children,\n  removeProps,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\n}): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Chip\n      className=\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove {...removeProps} />\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nexport function ComboboxChipRemove(\n  props: ComboboxPrimitive.ChipRemove.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      aria-label=\"Remove\"\n      className=\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      <XIcon />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\n  ComboboxPrimitive.useFilter;\n\nexport { ComboboxPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/input.json b/apps/ui/public/r/input.json
index bb1a1a58b..a185a0356 100644
--- a/apps/ui/public/r/input.json
+++ b/apps/ui/public/r/input.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/ui/input.tsx",
-      "content": "\"use client\";\n\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type InputProps = Omit<\n  InputPrimitive.Props & React.RefAttributes<HTMLInputElement>,\n  \"size\"\n> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  unstyled?: boolean;\n  nativeInput?: boolean;\n};\n\nexport function Input({\n  className,\n  size = \"default\",\n  unstyled = false,\n  nativeInput = false,\n  style,\n  ...props\n}: InputProps): React.ReactElement {\n  const inputClassName = cn(\n    \"h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5\",\n    size === \"sm\" &&\n      \"h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5\",\n    size === \"lg\" && \"h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5\",\n    props.type === \"search\" &&\n      \"[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none\",\n    props.type === \"file\" &&\n      \"text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm\",\n  );\n\n  return (\n    <span\n      className={\n        cn(\n          !unstyled &&\n            \"relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n          className,\n        ) || undefined\n      }\n      data-size={size}\n      data-slot=\"input-control\"\n    >\n      {nativeInput ? (\n        <input\n          className={inputClassName}\n          data-slot=\"input\"\n          size={typeof size === \"number\" ? size : undefined}\n          style={typeof style === \"function\" ? undefined : style}\n          {...props}\n        />\n      ) : (\n        <InputPrimitive\n          className={inputClassName}\n          data-slot=\"input\"\n          size={typeof size === \"number\" ? size : undefined}\n          style={style}\n          {...props}\n        />\n      )}\n    </span>\n  );\n}\n\nexport { InputPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type InputProps = Omit<\n  InputPrimitive.Props & React.RefAttributes<HTMLInputElement>,\n  \"size\"\n> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  unstyled?: boolean;\n  nativeInput?: boolean;\n};\n\nexport function Input({\n  className,\n  size = \"default\",\n  unstyled = false,\n  nativeInput = false,\n  style,\n  ...props\n}: InputProps): React.ReactElement {\n  const inputClassName = cn(\n    \"h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] text-foreground leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5 autofill:[-webkit-text-fill-color:var(--foreground)]\",\n    size === \"sm\" &&\n      \"h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5\",\n    size === \"lg\" && \"h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5\",\n    props.type === \"search\" &&\n      \"[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none\",\n    props.type === \"file\" &&\n      \"text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm\",\n  );\n\n  return (\n    <span\n      className={\n        cn(\n          !unstyled &&\n            \"relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n          className,\n        ) || undefined\n      }\n      data-size={size}\n      data-slot=\"input-control\"\n    >\n      {nativeInput ? (\n        <input\n          className={inputClassName}\n          data-slot=\"input\"\n          size={typeof size === \"number\" ? size : undefined}\n          style={typeof style === \"function\" ? undefined : style}\n          {...props}\n        />\n      ) : (\n        <InputPrimitive\n          className={inputClassName}\n          data-slot=\"input\"\n          size={typeof size === \"number\" ? size : undefined}\n          style={style}\n          {...props}\n        />\n      )}\n    </span>\n  );\n}\n\nexport { InputPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/number-field.json b/apps/ui/public/r/number-field.json
index d875a8bc5..522818b40 100644
--- a/apps/ui/public/r/number-field.json
+++ b/apps/ui/public/r/number-field.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/ui/number-field.tsx",
-      "content": "\"use client\";\n\nimport { NumberField as NumberFieldPrimitive } from \"@base-ui/react/number-field\";\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport const NumberFieldContext: React.Context<{\n  fieldId: string;\n} | null> = React.createContext<{\n  fieldId: string;\n} | null>(null);\n\nexport function NumberField({\n  id,\n  className,\n  size = \"default\",\n  ...props\n}: NumberFieldPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\" | \"lg\";\n}): React.ReactElement {\n  const generatedId = React.useId();\n  const fieldId = id ?? generatedId;\n\n  return (\n    <NumberFieldContext.Provider value={{ fieldId }}>\n      <NumberFieldPrimitive.Root\n        className={cn(\"flex w-full flex-col items-start gap-2\", className)}\n        data-size={size}\n        data-slot=\"number-field\"\n        id={fieldId}\n        {...props}\n      />\n    </NumberFieldContext.Provider>\n  );\n}\n\nexport function NumberFieldGroup({\n  className,\n  ...props\n}: NumberFieldPrimitive.Group.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Group\n      className={cn(\n        \"relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none\",\n        className,\n      )}\n      data-slot=\"number-field-group\"\n      {...props}\n    />\n  );\n}\n\nexport function NumberFieldDecrement({\n  className,\n  ...props\n}: NumberFieldPrimitive.Decrement.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Decrement\n      className={cn(\n        \"relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"number-field-decrement\"\n      {...props}\n    >\n      <MinusIcon />\n    </NumberFieldPrimitive.Decrement>\n  );\n}\n\nexport function NumberFieldIncrement({\n  className,\n  ...props\n}: NumberFieldPrimitive.Increment.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Increment\n      className={cn(\n        \"relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"number-field-increment\"\n      {...props}\n    >\n      <PlusIcon />\n    </NumberFieldPrimitive.Increment>\n  );\n}\n\nexport function NumberFieldInput({\n  className,\n  ...props\n}: NumberFieldPrimitive.Input.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Input\n      className={cn(\n        \"h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5\",\n        className,\n      )}\n      data-slot=\"number-field-input\"\n      {...props}\n    />\n  );\n}\n\nexport function NumberFieldScrubArea({\n  className,\n  label,\n  ...props\n}: NumberFieldPrimitive.ScrubArea.Props & {\n  label: string;\n}): React.ReactElement {\n  const context = React.useContext(NumberFieldContext);\n\n  if (!context) {\n    throw new Error(\n      \"NumberFieldScrubArea must be used within a NumberField component for accessibility.\",\n    );\n  }\n\n  return (\n    <NumberFieldPrimitive.ScrubArea\n      className={cn(\"flex cursor-ew-resize\", className)}\n      data-slot=\"number-field-scrub-area\"\n      {...props}\n    >\n      <Label className=\"cursor-ew-resize\" htmlFor={context.fieldId}>\n        {label}\n      </Label>\n      <NumberFieldPrimitive.ScrubAreaCursor className=\"drop-shadow-[0_1px_1px_#0008] filter\">\n        <CursorGrowIcon />\n      </NumberFieldPrimitive.ScrubAreaCursor>\n    </NumberFieldPrimitive.ScrubArea>\n  );\n}\n\nexport function CursorGrowIcon(\n  props: React.ComponentProps<\"svg\">,\n): React.ReactElement {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"black\"\n      height=\"14\"\n      stroke=\"white\"\n      viewBox=\"0 0 24 14\"\n      width=\"26\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\" />\n    </svg>\n  );\n}\n\nexport { NumberFieldPrimitive };\n",
+      "content": "\"use client\";\n\nimport { NumberField as NumberFieldPrimitive } from \"@base-ui/react/number-field\";\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport const NumberFieldContext: React.Context<{\n  fieldId: string;\n} | null> = React.createContext<{\n  fieldId: string;\n} | null>(null);\n\nexport function NumberField({\n  id,\n  className,\n  size = \"default\",\n  ...props\n}: NumberFieldPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\" | \"lg\";\n}): React.ReactElement {\n  const generatedId = React.useId();\n  const fieldId = id ?? generatedId;\n\n  return (\n    <NumberFieldContext.Provider value={{ fieldId }}>\n      <NumberFieldPrimitive.Root\n        className={cn(\"flex w-full flex-col items-start gap-2\", className)}\n        data-size={size}\n        data-slot=\"number-field\"\n        id={fieldId}\n        {...props}\n      />\n    </NumberFieldContext.Provider>\n  );\n}\n\nexport function NumberFieldGroup({\n  className,\n  ...props\n}: NumberFieldPrimitive.Group.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Group\n      className={cn(\n        \"relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none\",\n        className,\n      )}\n      data-slot=\"number-field-group\"\n      {...props}\n    />\n  );\n}\n\nexport function NumberFieldDecrement({\n  className,\n  ...props\n}: NumberFieldPrimitive.Decrement.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Decrement\n      className={cn(\n        \"relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"number-field-decrement\"\n      {...props}\n    >\n      <MinusIcon />\n    </NumberFieldPrimitive.Decrement>\n  );\n}\n\nexport function NumberFieldIncrement({\n  className,\n  ...props\n}: NumberFieldPrimitive.Increment.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Increment\n      className={cn(\n        \"relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"number-field-increment\"\n      {...props}\n    >\n      <PlusIcon />\n    </NumberFieldPrimitive.Increment>\n  );\n}\n\nexport function NumberFieldInput({\n  className,\n  ...props\n}: NumberFieldPrimitive.Input.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Input\n      className={cn(\n        \"h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center text-foreground tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5\",\n        className,\n      )}\n      data-slot=\"number-field-input\"\n      {...props}\n    />\n  );\n}\n\nexport function NumberFieldScrubArea({\n  className,\n  label,\n  ...props\n}: NumberFieldPrimitive.ScrubArea.Props & {\n  label: string;\n}): React.ReactElement {\n  const context = React.useContext(NumberFieldContext);\n\n  if (!context) {\n    throw new Error(\n      \"NumberFieldScrubArea must be used within a NumberField component for accessibility.\",\n    );\n  }\n\n  return (\n    <NumberFieldPrimitive.ScrubArea\n      className={cn(\"flex cursor-ew-resize\", className)}\n      data-slot=\"number-field-scrub-area\"\n      {...props}\n    >\n      <Label className=\"cursor-ew-resize\" htmlFor={context.fieldId}>\n        {label}\n      </Label>\n      <NumberFieldPrimitive.ScrubAreaCursor className=\"drop-shadow-[0_1px_1px_#0008] filter\">\n        <CursorGrowIcon />\n      </NumberFieldPrimitive.ScrubAreaCursor>\n    </NumberFieldPrimitive.ScrubArea>\n  );\n}\n\nexport function CursorGrowIcon(\n  props: React.ComponentProps<\"svg\">,\n): React.ReactElement {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"black\"\n      height=\"14\"\n      stroke=\"white\"\n      viewBox=\"0 0 24 14\"\n      width=\"26\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\" />\n    </svg>\n  );\n}\n\nexport { NumberFieldPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/textarea.json b/apps/ui/public/r/textarea.json
index 8188d2334..5202e6cbd 100644
--- a/apps/ui/public/r/textarea.json
+++ b/apps/ui/public/r/textarea.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/ui/textarea.tsx",
-      "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type TextareaProps = React.ComponentPropsWithoutRef<\"textarea\"> &\n  React.RefAttributes<HTMLTextAreaElement> & {\n    size?: \"sm\" | \"default\" | \"lg\" | number;\n    unstyled?: boolean;\n  };\n\nexport function Textarea({\n  className,\n  size = \"default\",\n  unstyled = false,\n  ref,\n  ...props\n}: TextareaProps): React.ReactElement {\n  return (\n    <span\n      className={\n        cn(\n          !unstyled &&\n            \"relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n          className,\n        ) || undefined\n      }\n      data-size={size}\n      data-slot=\"textarea-control\"\n    >\n      <FieldPrimitive.Control\n        ref={ref}\n        value={props.value}\n        defaultValue={props.defaultValue}\n        disabled={props.disabled}\n        id={props.id}\n        name={props.name}\n        render={(defaultProps: React.ComponentProps<\"textarea\">) => (\n          <textarea\n            className={cn(\n              \"field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5\",\n              size === \"sm\" &&\n                \"min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5\",\n              size === \"lg\" &&\n                \"min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5\",\n            )}\n            data-slot=\"textarea\"\n            {...mergeProps(defaultProps, props)}\n          />\n        )}\n      />\n    </span>\n  );\n}\n\nexport { FieldPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type TextareaProps = React.ComponentPropsWithoutRef<\"textarea\"> &\n  React.RefAttributes<HTMLTextAreaElement> & {\n    size?: \"sm\" | \"default\" | \"lg\" | number;\n    unstyled?: boolean;\n  };\n\nexport function Textarea({\n  className,\n  size = \"default\",\n  unstyled = false,\n  ref,\n  ...props\n}: TextareaProps): React.ReactElement {\n  return (\n    <span\n      className={\n        cn(\n          !unstyled &&\n            \"relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n          className,\n        ) || undefined\n      }\n      data-size={size}\n      data-slot=\"textarea-control\"\n    >\n      <FieldPrimitive.Control\n        ref={ref}\n        value={props.value}\n        defaultValue={props.defaultValue}\n        disabled={props.disabled}\n        id={props.id}\n        name={props.name}\n        render={(defaultProps: React.ComponentProps<\"textarea\">) => (\n          <textarea\n            className={cn(\n              \"field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] text-foreground outline-none placeholder:text-muted-foreground/72 max-sm:min-h-20.5\",\n              size === \"sm\" &&\n                \"min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5\",\n              size === \"lg\" &&\n                \"min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5\",\n            )}\n            data-slot=\"textarea\"\n            {...mergeProps(defaultProps, props)}\n          />\n        )}\n      />\n    </span>\n  );\n}\n\nexport { FieldPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/registry/default/ui/combobox.tsx b/apps/ui/registry/default/ui/combobox.tsx
index 7e3f0085a..141eb773d 100644
--- a/apps/ui/registry/default/ui/combobox.tsx
+++ b/apps/ui/registry/default/ui/combobox.tsx
@@ -42,7 +42,7 @@ export function ComboboxChipsInput({
   return (
     <ComboboxPrimitive.Input
       className={cn(
-        "min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5",
+        "min-w-12 flex-1 text-base text-foreground outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5",
         sizeValue === "sm" ? "ps-1.5" : "ps-2",
         className,
       )}
@@ -374,7 +374,7 @@ export function ComboboxChips({
   return (
     <ComboboxPrimitive.Chips
       className={cn(
-        "relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+        "relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
         className,
       )}
       data-slot="combobox-chips"
diff --git a/apps/ui/registry/default/ui/input.tsx b/apps/ui/registry/default/ui/input.tsx
index f686b1c15..b2113b9b7 100644
--- a/apps/ui/registry/default/ui/input.tsx
+++ b/apps/ui/registry/default/ui/input.tsx
@@ -22,7 +22,7 @@ export function Input({
   ...props
 }: InputProps): React.ReactElement {
   const inputClassName = cn(
-    "h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5",
+    "h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] text-foreground leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5 autofill:[-webkit-text-fill-color:var(--foreground)]",
     size === "sm" &&
       "h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5",
     size === "lg" && "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5",
@@ -37,7 +37,7 @@ export function Input({
       className={
         cn(
           !unstyled &&
-            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
           className,
         ) || undefined
       }
diff --git a/apps/ui/registry/default/ui/number-field.tsx b/apps/ui/registry/default/ui/number-field.tsx
index 957743620..b5d11272c 100644
--- a/apps/ui/registry/default/ui/number-field.tsx
+++ b/apps/ui/registry/default/ui/number-field.tsx
@@ -43,7 +43,7 @@ export function NumberFieldGroup({
   return (
     <NumberFieldPrimitive.Group
       className={cn(
-        "relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none",
+        "relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none",
         className,
       )}
       data-slot="number-field-group"
@@ -95,7 +95,7 @@ export function NumberFieldInput({
   return (
     <NumberFieldPrimitive.Input
       className={cn(
-        "h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5",
+        "h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center text-foreground tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5",
         className,
       )}
       data-slot="number-field-input"
diff --git a/apps/ui/registry/default/ui/textarea.tsx b/apps/ui/registry/default/ui/textarea.tsx
index 0d0a52221..36d8b62c8 100644
--- a/apps/ui/registry/default/ui/textarea.tsx
+++ b/apps/ui/registry/default/ui/textarea.tsx
@@ -23,7 +23,7 @@ export function Textarea({
       className={
         cn(
           !unstyled &&
-            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
           className,
         ) || undefined
       }
@@ -40,7 +40,7 @@ export function Textarea({
         render={(defaultProps: React.ComponentProps<"textarea">) => (
           <textarea
             className={cn(
-              "field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5",
+              "field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] text-foreground outline-none placeholder:text-muted-foreground/72 max-sm:min-h-20.5",
               size === "sm" &&
                 "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5",
               size === "lg" &&
diff --git a/packages/ui/src/components/combobox.tsx b/packages/ui/src/components/combobox.tsx
index 915eb6cd0..ea8bf5a52 100644
--- a/packages/ui/src/components/combobox.tsx
+++ b/packages/ui/src/components/combobox.tsx
@@ -42,7 +42,7 @@ export function ComboboxChipsInput({
   return (
     <ComboboxPrimitive.Input
       className={cn(
-        "min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5",
+        "min-w-12 flex-1 text-base text-foreground outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5",
         sizeValue === "sm" ? "ps-1.5" : "ps-2",
         className,
       )}
@@ -374,7 +374,7 @@ export function ComboboxChips({
   return (
     <ComboboxPrimitive.Chips
       className={cn(
-        "relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+        "relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
         className,
       )}
       data-slot="combobox-chips"
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
index 19d279441..f5c248c5e 100644
--- a/packages/ui/src/components/input.tsx
+++ b/packages/ui/src/components/input.tsx
@@ -22,7 +22,7 @@ export function Input({
   ...props
 }: InputProps): React.ReactElement {
   const inputClassName = cn(
-    "h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5",
+    "h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] text-foreground leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5 autofill:[-webkit-text-fill-color:var(--foreground)]",
     size === "sm" &&
       "h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5",
     size === "lg" && "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5",
@@ -37,7 +37,7 @@ export function Input({
       className={
         cn(
           !unstyled &&
-            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
           className,
         ) || undefined
       }
diff --git a/packages/ui/src/components/number-field.tsx b/packages/ui/src/components/number-field.tsx
index b03095116..80c993e83 100644
--- a/packages/ui/src/components/number-field.tsx
+++ b/packages/ui/src/components/number-field.tsx
@@ -43,7 +43,7 @@ export function NumberFieldGroup({
   return (
     <NumberFieldPrimitive.Group
       className={cn(
-        "relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none",
+        "relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none",
         className,
       )}
       data-slot="number-field-group"
@@ -95,7 +95,7 @@ export function NumberFieldInput({
   return (
     <NumberFieldPrimitive.Input
       className={cn(
-        "h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5",
+        "h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center text-foreground tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5",
         className,
       )}
       data-slot="number-field-input"
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
index 36c7e737a..862a4ff14 100644
--- a/packages/ui/src/components/textarea.tsx
+++ b/packages/ui/src/components/textarea.tsx
@@ -23,7 +23,7 @@ export function Textarea({
       className={
         cn(
           !unstyled &&
-            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
           className,
         ) || undefined
       }
@@ -40,7 +40,7 @@ export function Textarea({
         render={(defaultProps: React.ComponentProps<"textarea">) => (
           <textarea
             className={cn(
-              "field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5",
+              "field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] text-foreground outline-none placeholder:text-muted-foreground/72 max-sm:min-h-20.5",
               size === "sm" &&
                 "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5",
               size === "lg" &&

From ad7972304152735e38aa72be6b543f0c873a10fb Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Tue, 18 Aug 2026 17:02:29 +0200
Subject: [PATCH 39/49] docs(skills): refresh particle references (#836)

---
 apps/ui/skills/coss-particles/SKILL.md        | 32 +++++++++++++++----
 .../references/primitives/autocomplete.md     |  4 ++-
 .../coss/references/primitives/calendar.md    |  1 +
 .../coss/references/primitives/combobox.md    |  2 ++
 .../coss/references/primitives/popover.md     |  1 +
 .../coss/references/primitives/switch.md      |  3 +-
 6 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/apps/ui/skills/coss-particles/SKILL.md b/apps/ui/skills/coss-particles/SKILL.md
index 19f5c4a8c..7f2b073cc 100644
--- a/apps/ui/skills/coss-particles/SKILL.md
+++ b/apps/ui/skills/coss-particles/SKILL.md
@@ -37,25 +37,26 @@ Run the generator script from the coss repo root:
 node apps/ui/scripts/generate-particle-index.cjs
 ```
 
-Total: **484 particles** across **52 component types**
+Total: **500 particles** across **53 component types**
 
 ## Component types
 
 - [accordion](#accordion) (4)
 - [alert](#alert) (7)
 - [alert-dialog](#alert-dialog) (2)
-- [autocomplete](#autocomplete) (15)
+- [autocomplete](#autocomplete) (16)
 - [avatar](#avatar) (14)
 - [badge](#badge) (20)
 - [breadcrumb](#breadcrumb) (7)
 - [button](#button) (40)
-- [calendar](#calendar) (24)
+- [calendar](#calendar) (25)
 - [card](#card) (11)
 - [checkbox](#checkbox) (5)
 - [checkbox-group](#checkbox-group) (5)
 - [collapsible](#collapsible) (1)
-- [combobox](#combobox) (18)
+- [combobox](#combobox) (20)
 - [command](#command) (2)
+- [context-menu](#context-menu) (8)
 - [date-picker](#date-picker) (9)
 - [dialog](#dialog) (6)
 - [drawer](#drawer) (14)
@@ -73,7 +74,7 @@ Total: **484 particles** across **52 component types**
 - [number-field](#number-field) (11)
 - [otp-field](#otp-field) (9)
 - [pagination](#pagination) (3)
-- [popover](#popover) (3)
+- [popover](#popover) (4)
 - [preview-card](#preview-card) (1)
 - [progress](#progress) (3)
 - [radio-group](#radio-group) (6)
@@ -84,7 +85,7 @@ Total: **484 particles** across **52 component types**
 - [skeleton](#skeleton) (2)
 - [slider](#slider) (23)
 - [spinner](#spinner) (1)
-- [switch](#switch) (6)
+- [switch](#switch) (9)
 - [table](#table) (8)
 - [tabs](#tabs) (13)
 - [textarea](#textarea) (15)
@@ -135,6 +136,7 @@ Total: **484 particles** across **52 component types**
 - Autocomplete form | [JSON](https://coss.com/ui/r/p-autocomplete-13.json)
 - Autocomplete form | [JSON](https://coss.com/ui/r/p-autocomplete-14.json)
 - Pill-shaped autocomplete | [JSON](https://coss.com/ui/r/p-autocomplete-15.json)
+- Address autocomplete with Google Maps Places API | [JSON](https://coss.com/ui/r/p-autocomplete-16.json)
 
 ### avatar
 
@@ -255,6 +257,7 @@ Total: **484 particles** across **52 component types**
 - Two months calendar | [JSON](https://coss.com/ui/r/p-calendar-22.json)
 - Three months calendar | [JSON](https://coss.com/ui/r/p-calendar-23.json)
 - Pricing calendar with custom day buttons | [JSON](https://coss.com/ui/r/p-calendar-24.json)
+- Calendar with 24-hour autocomplete time input | [JSON](https://coss.com/ui/r/p-calendar-25.json)
 
 ### card
 
@@ -310,12 +313,25 @@ Total: **484 particles** across **52 component types**
 - Timezone combobox | [JSON](https://coss.com/ui/r/p-combobox-16.json)
 - Timezone combobox with search input | [JSON](https://coss.com/ui/r/p-combobox-17.json)
 - Combobox with select trigger | [JSON](https://coss.com/ui/r/p-combobox-18.json)
+- Combobox multiple with stacked chips | [JSON](https://coss.com/ui/r/p-combobox-19.json)
+- Combobox multiple with stacked divided chips | [JSON](https://coss.com/ui/r/p-combobox-20.json)
 
 ### command
 
 - Command palette with dialog | [JSON](https://coss.com/ui/r/p-command-1.json)
 - Command palette with AI assistant | [JSON](https://coss.com/ui/r/p-command-2.json)
 
+### context-menu
+
+- Basic context menu | [JSON](https://coss.com/ui/r/p-context-menu-1.json)
+- Context menu with link items | [JSON](https://coss.com/ui/r/p-context-menu-2.json)
+- Nested context menu | [JSON](https://coss.com/ui/r/p-context-menu-3.json)
+- Context menu with checkbox items | [JSON](https://coss.com/ui/r/p-context-menu-4.json)
+- Context menu with group labels | [JSON](https://coss.com/ui/r/p-context-menu-5.json)
+- Context menu with icons | [JSON](https://coss.com/ui/r/p-context-menu-6.json)
+- Context menu with radio group | [JSON](https://coss.com/ui/r/p-context-menu-7.json)
+- Context menu with switch checkbox items | [JSON](https://coss.com/ui/r/p-context-menu-8.json)
+
 ### date-picker
 
 - Basic date picker | [JSON](https://coss.com/ui/r/p-date-picker-1.json)
@@ -533,6 +549,7 @@ Total: **484 particles** across **52 component types**
 - Popover with a form | [JSON](https://coss.com/ui/r/p-popover-1.json)
 - Popover with close button | [JSON](https://coss.com/ui/r/p-popover-2.json)
 - Animated popovers | [JSON](https://coss.com/ui/r/p-popover-3.json)
+- Split button with popover to confirm multiple occurrences | [JSON](https://coss.com/ui/r/p-popover-4.json)
 
 ### preview-card
 
@@ -640,6 +657,9 @@ Total: **484 particles** across **52 component types**
 - Switch card | [JSON](https://coss.com/ui/r/p-switch-4.json)
 - Switch in form | [JSON](https://coss.com/ui/r/p-switch-5.json)
 - Custom size switch | [JSON](https://coss.com/ui/r/p-switch-6.json)
+- Weekly availability editor with time range combobox pickers | [JSON](https://coss.com/ui/r/p-switch-7.json)
+- Weekly availability editor with grouped time range controls | [JSON](https://coss.com/ui/r/p-switch-8.json)
+- Weekly availability editor with From/To labeled time groups | [JSON](https://coss.com/ui/r/p-switch-9.json)
 
 ### table
 
diff --git a/apps/ui/skills/coss/references/primitives/autocomplete.md b/apps/ui/skills/coss/references/primitives/autocomplete.md
index d1045119f..624e7e3ff 100644
--- a/apps/ui/skills/coss/references/primitives/autocomplete.md
+++ b/apps/ui/skills/coss/references/primitives/autocomplete.md
@@ -112,7 +112,7 @@ Form integration: place `Autocomplete` inside `Field name="..."` with `FieldLabe
 
 ### More examples
 
-See `p-autocomplete-1` through `p-autocomplete-15` for sizes, matching behavior, groups, limited results, async, form integration, and pill input patterns.
+See `p-autocomplete-1` through `p-autocomplete-16` for sizes, matching behavior, groups, limited results, async integrations, forms, and pill input patterns.
 
 ## Common pitfalls
 
@@ -121,6 +121,7 @@ See `p-autocomplete-1` through `p-autocomplete-15` for sizes, matching behavior,
 - Mixing combobox/select assumptions into autocomplete APIs without checking docs.
 - Missing explicit labels (`FieldLabel` or `aria-label`) on the input.
 - Not handling async race/error states (`loading`, `error`, stale response cancellation).
+- Exposing an unrestricted browser API key in an external address integration; apply provider restrictions and cancel stale requests.
 
 ## Useful particle references
 
@@ -132,3 +133,4 @@ See `p-autocomplete-1` through `p-autocomplete-15` for sizes, matching behavior,
 - async search with loading/error status: `p-autocomplete-12`
 - form integration: `p-autocomplete-13`
 - style variant (pill input): `p-autocomplete-15`
+- Google Maps Places address suggestions with debouncing, cancellation, status feedback, and session tokens: `p-autocomplete-16`
diff --git a/apps/ui/skills/coss/references/primitives/calendar.md b/apps/ui/skills/coss/references/primitives/calendar.md
index f5b4628f5..d2c04facd 100644
--- a/apps/ui/skills/coss/references/primitives/calendar.md
+++ b/apps/ui/skills/coss/references/primitives/calendar.md
@@ -66,3 +66,4 @@ See `p-calendar-1` through `p-calendar-6` for single, range, dropdown navigation
 - dropdown navigation: `p-calendar-4`
 - select dropdown for month/year: `p-calendar-5`
 - combobox dropdown for month/year: `p-calendar-6`
+- date plus a validated 24-hour autocomplete time input: `p-calendar-25`
diff --git a/apps/ui/skills/coss/references/primitives/combobox.md b/apps/ui/skills/coss/references/primitives/combobox.md
index aa965a61b..e72dcfd2c 100644
--- a/apps/ui/skills/coss/references/primitives/combobox.md
+++ b/apps/ui/skills/coss/references/primitives/combobox.md
@@ -111,4 +111,6 @@ See `p-combobox-1` through `p-combobox-9` for sizes, label, auto-highlight, clea
 - with clear button: `p-combobox-7`
 - with groups: `p-combobox-8`
 - with multiple selection: `p-combobox-9`
+- multiple team selection rendered as separate stacked rows: `p-combobox-19`
+- multiple team selection rendered as a divided stack: `p-combobox-20`
 - related search/selection references: `p-autocomplete-1`, `p-select-1`, `p-input-group-1`
diff --git a/apps/ui/skills/coss/references/primitives/popover.md b/apps/ui/skills/coss/references/primitives/popover.md
index 88eed648a..7b920da72 100644
--- a/apps/ui/skills/coss/references/primitives/popover.md
+++ b/apps/ui/skills/coss/references/primitives/popover.md
@@ -72,4 +72,5 @@ import {
 - baseline popover with form content: `p-popover-1`
 - close controls (icon + action button): `p-popover-2`
 - detached trigger handle pattern: `p-popover-3`
+- split-button confirmation flow with selectable occurrences: `p-popover-4`
 - tooltip-style popover usage example: `p-input-group-7`
diff --git a/apps/ui/skills/coss/references/primitives/switch.md b/apps/ui/skills/coss/references/primitives/switch.md
index 55db1b4fd..98efe15b5 100644
--- a/apps/ui/skills/coss/references/primitives/switch.md
+++ b/apps/ui/skills/coss/references/primitives/switch.md
@@ -74,6 +74,7 @@ Disabled switch:
 - customizing size: `p-switch-6`
 - card style: `p-switch-4`
 - form integration: `p-switch-5`
+- weekly availability editors with searchable time ranges: `p-switch-7`, `p-switch-8`, `p-switch-9`
 
 ## Common pitfalls
 
@@ -83,4 +84,4 @@ Disabled switch:
 
 ## Useful particle references
 
-See `p-switch-1` through `p-switch-6` for label, disabled, description, card, form, and size patterns.
+See `p-switch-1` through `p-switch-6` for label, disabled, description, card, form, and size patterns. See `p-switch-7` through `p-switch-9` for complete weekly availability editors using Switch, Combobox, Popover, and grouped controls.

From 6bae419ddf1f4b32bb63f996dcf3cd45527e7f57 Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Tue, 18 Aug 2026 17:45:02 +0200
Subject: [PATCH 40/49] feat(ui): add segmented control patterns (#835)

* feat(ui): add segmented control patterns

* docs(ui): add tabs migration guidance

* docs(ui): mark segmented control as new

* fix(ui): add segmented control particle tag

* fix(ui): clarify segmented particle semantics

* fix(ui): exclude tabs from segmented search

* style(ui): remove segmented state transition

* fix(ui): require segmented radio selection

* fix(ui): remove redundant radio requirement

* fix(ui): keep segmented toggle selected

* style(ui): preserve segmented text transition

* revert(ui): allow empty segmented toggles

* style(ui): remove segmented transitions

* style(ui): isolate segmented focus transition

* fix(ui): refine segmented control spacing

* docs(skills): add segmented control guidance

* refactor(ui): remove segmented toggle particles
---
 apps/ui/content/docs/(root)/changelog.mdx     |  32 ++++
 apps/ui/content/docs/components/meta.json     |   1 +
 .../content/docs/components/radio-group.mdx   |   2 +
 .../docs/components/segmented-control.mdx     | 114 ++++++++++++
 apps/ui/content/docs/components/tabs.mdx      |  35 +++-
 apps/ui/lib/docs.ts                           |   3 +-
 apps/ui/public/r/p-navigation-1.json          |  20 +++
 apps/ui/public/r/p-navigation-2.json          |  20 +++
 apps/ui/public/r/p-navigation-3.json          |  20 +++
 apps/ui/public/r/p-radio-group-7.json         |  21 +++
 apps/ui/public/r/p-radio-group-8.json         |  21 +++
 apps/ui/public/r/p-radio-group-9.json         |  21 +++
 apps/ui/public/r/p-tabs-1.json                |   2 +-
 apps/ui/public/r/p-tabs-14.json               |  19 ++
 apps/ui/public/r/p-tabs-15.json               |  19 ++
 apps/ui/public/r/registry.json                | 163 ++++++++++++++++-
 apps/ui/public/r/segmented-control.json       |  15 ++
 apps/ui/public/r/tabs.json                    |   5 +-
 apps/ui/registry.json                         | 163 ++++++++++++++++-
 apps/ui/registry/__index__.tsx                | 166 +++++++++++++++++-
 .../registry/default/lib/segmented-control.ts |  35 ++++
 .../default/particles/p-navigation-1.tsx      |  24 +++
 .../default/particles/p-navigation-2.tsx      |  27 +++
 .../default/particles/p-navigation-3.tsx      |  27 +++
 .../default/particles/p-radio-group-7.tsx     |  33 ++++
 .../default/particles/p-radio-group-8.tsx     |  32 ++++
 .../default/particles/p-radio-group-9.tsx     |  33 ++++
 .../registry/default/particles/p-tabs-14.tsx  |  28 +++
 .../registry/default/particles/p-tabs-15.tsx  |  28 +++
 apps/ui/registry/default/ui/tabs.tsx          |  39 +++-
 apps/ui/registry/registry-categories.ts       |   2 +
 apps/ui/registry/registry-lib.ts              |  11 ++
 apps/ui/registry/registry-particles.ts        |  66 ++++++-
 apps/ui/registry/registry-ui.ts               |   1 +
 apps/ui/skills/coss-particles/SKILL.md        |  20 ++-
 apps/ui/skills/coss/SKILL.md                  |   4 +-
 .../coss/references/component-registry.md     |   3 +
 .../coss/references/primitives/radio-group.md |   4 +-
 .../skills/coss/references/primitives/tabs.md |  20 ++-
 .../references/primitives/toggle-group.md     |   4 +-
 .../coss/references/segmented-control.md      |  60 +++++++
 packages/ui/src/components/tabs.tsx           |  39 +++-
 packages/ui/src/lib/segmented-control.ts      |  35 ++++
 43 files changed, 1398 insertions(+), 39 deletions(-)
 create mode 100644 apps/ui/content/docs/components/segmented-control.mdx
 create mode 100644 apps/ui/public/r/p-navigation-1.json
 create mode 100644 apps/ui/public/r/p-navigation-2.json
 create mode 100644 apps/ui/public/r/p-navigation-3.json
 create mode 100644 apps/ui/public/r/p-radio-group-7.json
 create mode 100644 apps/ui/public/r/p-radio-group-8.json
 create mode 100644 apps/ui/public/r/p-radio-group-9.json
 create mode 100644 apps/ui/public/r/p-tabs-14.json
 create mode 100644 apps/ui/public/r/p-tabs-15.json
 create mode 100644 apps/ui/public/r/segmented-control.json
 create mode 100644 apps/ui/registry/default/lib/segmented-control.ts
 create mode 100644 apps/ui/registry/default/particles/p-navigation-1.tsx
 create mode 100644 apps/ui/registry/default/particles/p-navigation-2.tsx
 create mode 100644 apps/ui/registry/default/particles/p-navigation-3.tsx
 create mode 100644 apps/ui/registry/default/particles/p-radio-group-7.tsx
 create mode 100644 apps/ui/registry/default/particles/p-radio-group-8.tsx
 create mode 100644 apps/ui/registry/default/particles/p-radio-group-9.tsx
 create mode 100644 apps/ui/registry/default/particles/p-tabs-14.tsx
 create mode 100644 apps/ui/registry/default/particles/p-tabs-15.tsx
 create mode 100644 apps/ui/skills/coss/references/segmented-control.md
 create mode 100644 packages/ui/src/lib/segmented-control.ts

diff --git a/apps/ui/content/docs/(root)/changelog.mdx b/apps/ui/content/docs/(root)/changelog.mdx
index 61597e582..bd2c89900 100644
--- a/apps/ui/content/docs/(root)/changelog.mdx
+++ b/apps/ui/content/docs/(root)/changelog.mdx
@@ -3,6 +3,38 @@ title: Changelog
 description: Breaking changes, migration guides, and notable updates.
 ---
 
+## August 17, 2026
+
+### Tabs sizing and segmented control styles
+
+**`TabsList`** now supports a **`size`** prop with **`"sm"`**, **`"default"`**, and **`"lg"`** values. The size propagates to its **`TabsTab`** children, and an individual tab can override the inherited size when necessary.
+
+The default Tabs appearance now uses the same optical item sizing as the [Segmented Control](/ui/docs/components/segmented-control) pattern. The default rendered height is slightly smaller than before so the inset active indicator remains visually balanced beside a Button of the corresponding size.
+
+Tabs now imports its size map from the **`@coss/segmented-control`** registry library. **`@coss/tabs`** declares this as a registry dependency, so the shadcn CLI installs it automatically with a fresh installation or CLI-managed update.
+
+**Migration:**
+
+Existing Tabs JSX requires no changes because **`"default"`** remains the default size. If you replace your local Tabs component through the CLI, review any local customizations before accepting the overwrite:
+
+```bash
+npx shadcn@latest add @coss/tabs
+```
+
+If you update **`tabs.tsx`** manually, install the shared library first and then merge the latest Tabs implementation. Copying only the new Tabs file without this dependency results in an unresolved import.
+
+```bash
+npx shadcn@latest add @coss/segmented-control
+```
+
+After updating, remove local height or horizontal-padding utilities from **`TabsList`** and **`TabsTab`** only where they unintentionally override the new **`size`** API. Keep intentional product-specific overrides.
+
+**Agent migration prompt:**
+
+```text
+Update the local coss Tabs component to the latest segmented-control sizing while preserving project-specific customizations. Install the shared registry dependency with `npx shadcn@latest add @coss/segmented-control`, then merge the latest @coss/tabs implementation. TabsList now accepts size="sm" | "default" | "lg" (default: "default") and propagates it to TabsTab; a TabsTab size prop overrides the inherited value. Replace the old hard-coded TabsTab height and horizontal-padding classes with segmentedControlItemSizeClassNames from the shared library. Existing Tabs JSX does not need a size prop. Audit local h-* and px-* overrides on TabsList/TabsTab and remove only those that unintentionally conflict with the new size API. Run formatting and typechecking, then visually verify default and underline Tabs in every size used by the app.
+```
+
 ## July 31, 2026
 
 ### Scroll Area — overscroll contain
diff --git a/apps/ui/content/docs/components/meta.json b/apps/ui/content/docs/components/meta.json
index 92f91f4f3..63fd3eae6 100644
--- a/apps/ui/content/docs/components/meta.json
+++ b/apps/ui/content/docs/components/meta.json
@@ -40,6 +40,7 @@
     "radio-group",
     "scroll-area",
     "select",
+    "segmented-control",
     "separator",
     "sheet",
     "skeleton",
diff --git a/apps/ui/content/docs/components/radio-group.mdx b/apps/ui/content/docs/components/radio-group.mdx
index 5765ed8d9..2954521d6 100644
--- a/apps/ui/content/docs/components/radio-group.mdx
+++ b/apps/ui/content/docs/components/radio-group.mdx
@@ -81,6 +81,8 @@ Individual radio button. Styled wrapper for `Radio.Root` from Base UI with built
 
 For accessible labelling and validation, prefer using the `Field` component to wrap radio buttons. See the related example: [Radio Group field](/ui/docs/components/field#radio-group-field).
 
+For tabs-style mutually exclusive choices, see the [Segmented Control](/ui/docs/components/segmented-control) pattern.
+
 ### Disabled
 
 <ComponentPreview name="p-radio-group-2" />
diff --git a/apps/ui/content/docs/components/segmented-control.mdx b/apps/ui/content/docs/components/segmented-control.mdx
new file mode 100644
index 000000000..9ccbf2113
--- /dev/null
+++ b/apps/ui/content/docs/components/segmented-control.mdx
@@ -0,0 +1,114 @@
+---
+title: Segmented Control
+description: A visual pattern for presenting related choices, navigation destinations, filters, or content views.
+---
+
+<ComponentPreview name="p-radio-group-8" />
+
+## About
+
+A segmented control is a visual pattern, not a standalone behavior. COSS uses the same presentation across several components while preserving the semantics, keyboard interactions, and state model of each underlying primitive.
+
+## Choose the right primitive
+
+| Intent | Use | Why |
+| ------ | --- | --- |
+| Choose one value in a form | [Radio Group](/ui/docs/components/radio-group) | Represents a mutually exclusive value and participates in form state. |
+| Navigate to another URL or route | Navigation links | Preserves link behavior, browser history, and `aria-current`. |
+| Apply an exclusive filter or mode | [Toggle Group](/ui/docs/components/toggle-group) | Represents the pressed state of an action that may be cleared. |
+| Switch between related panels | [Tabs](/ui/docs/components/tabs) | Connects each tab to an associated content panel. |
+
+Choose the primitive from the interaction first, then apply the segmented-control styling. Visual similarity alone is not a reason to use Tabs or Toggle Group.
+
+## Installation
+
+Segmented controls are provided as particles. Install the implementation and size that match your interaction:
+
+| Implementation | Small | Default | Large |
+| -------------- | ----- | ------- | ----- |
+| Radio Group | `@coss/p-radio-group-7` | `@coss/p-radio-group-8` | `@coss/p-radio-group-9` |
+| Navigation | `@coss/p-navigation-2` | `@coss/p-navigation-1` | `@coss/p-navigation-3` |
+
+For example, install the default Radio Group version with:
+
+```bash
+npx shadcn@latest add @coss/p-radio-group-8
+```
+
+The CLI installs the shared `segmented-control` styling library and the required primitive automatically.
+
+## Shared styling
+
+For a custom composition, install the styling library directly:
+
+```bash
+npx shadcn@latest add @coss/segmented-control
+```
+
+The library exports a root class and an item recipe:
+
+```tsx
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/lib/segmented-control"
+```
+
+```tsx
+const itemClassName = segmentedControlItemVariants({
+  size: "default",
+  state: "checked",
+})
+```
+
+| Option | Values | Description |
+| ------ | ------ | ----------- |
+| `size` | `"sm" \| "default" \| "lg"` | Controls item height and horizontal padding. |
+| `state` | `"checked" \| "current" \| "pressed"` | Selects the state attribute used by the underlying element. |
+
+Use `checked` with Radio Group, `current` with navigation links, and `pressed` with Toggle Group. Tabs retain their own animated indicator and do not use the shared state recipe.
+
+At the outside edges, the item padding and the surface's `p-0.5` inset combine to match the horizontal padding of the corresponding Button size. The outer segmented surface is slightly taller than that Button to optically balance its inset selected item when the controls appear next to each other.
+
+<ComponentSource
+  name="segmented-control"
+  title="lib/segmented-control.ts"
+/>
+
+## Radio options
+
+Use Radio Group when the selected segment represents a mutually exclusive value, especially in forms.
+
+### Small Radio Group
+
+<ComponentPreview name="p-radio-group-7" />
+
+### Default Radio Group
+
+<ComponentPreview name="p-radio-group-8" />
+
+### Large Radio Group
+
+<ComponentPreview name="p-radio-group-9" />
+
+## Navigation
+
+Use links when each segment points to a different destination. Apply `aria-current="page"` to the active link.
+
+### Small Navigation
+
+<ComponentPreview name="p-navigation-2" />
+
+### Default Navigation
+
+<ComponentPreview name="p-navigation-1" />
+
+### Large Navigation
+
+<ComponentPreview name="p-navigation-3" />
+
+## Related content
+
+Use Tabs when each segment controls an associated content panel. Tabs share the visual language of segmented controls but keep their animated indicator, orientation support, and panel semantics.
+
+<ComponentPreview name="p-tabs-1" />
diff --git a/apps/ui/content/docs/components/tabs.mdx b/apps/ui/content/docs/components/tabs.mdx
index 60e7699f3..c08dd1dca 100644
--- a/apps/ui/content/docs/components/tabs.mdx
+++ b/apps/ui/content/docs/components/tabs.mdx
@@ -22,13 +22,25 @@ links:
 npx shadcn@latest add @coss/tabs
 ```
 
+The CLI installs the shared `@coss/segmented-control` registry dependency automatically.
+
 </TabsPanel>
 
 <TabsPanel value="manual">
 
 <Steps>
 
-<Step>Copy and paste the following code into your project.</Step>
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @base-ui/react class-variance-authority
+```
+
+<Step>Copy the shared segmented control styling into your project.</Step>
+
+<ComponentSource name="segmented-control" title="lib/segmented-control.ts" />
+
+<Step>Copy and paste the Tabs component into your project.</Step>
 
 <ComponentSource name="tabs" title="components/ui/tabs.tsx" />
 
@@ -65,14 +77,15 @@ import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"
 
 Root component. Styled wrapper for `Tabs.Root` from Base UI.
 
-| Prop      | Type                         | Default     | Description                                      |
-| --------- | ---------------------------- | ----------- | ------------------------------------------------ |
-| `variant` | `"default" \| "underline"`   | `"default"` | Controls the tabs styling                        |
-
 ### TabsList
 
 Container for tab triggers. Styled wrapper for `Tabs.List` from Base UI.
 
+| Prop      | Type                       | Default     | Description                         |
+| --------- | -------------------------- | ----------- | ----------------------------------- |
+| `size`    | `"sm" \| "default" \| "lg"` | `"default"` | Controls the size of all tab items. |
+| `variant` | `"default" \| "underline"` | `"default"` | Controls the tabs styling.          |
+
 ### TabsTab
 
 Individual tab trigger. Styled wrapper for `Tabs.Tab` from Base UI.
@@ -87,6 +100,18 @@ Visual indicator for the active tab. Styled wrapper for `Tabs.Indicator` from Ba
 
 ## Examples
 
+For guidance on choosing between Tabs, Radio Group, Toggle Group, and navigation links, see the [Segmented Control](/ui/docs/components/segmented-control) pattern.
+
+Tabs use the same optical sizing as segmented controls. The default surface is slightly taller than a Button of the same size so its inset active indicator remains visually balanced alongside adjacent controls.
+
+### Small
+
+<ComponentPreview name="p-tabs-14" />
+
+### Large
+
+<ComponentPreview name="p-tabs-15" />
+
 ### Underline Variant
 
 <ComponentPreview name="p-tabs-2" />
diff --git a/apps/ui/lib/docs.ts b/apps/ui/lib/docs.ts
index d9f5d1169..baff695c5 100644
--- a/apps/ui/lib/docs.ts
+++ b/apps/ui/lib/docs.ts
@@ -1,5 +1,4 @@
 export const PAGES_NEW = [
   // "/docs/components/{component-name}",
-  "/docs/components/context-menu",
-  "/docs/components/otp-field",
+  "/docs/components/segmented-control",
 ];
diff --git a/apps/ui/public/r/p-navigation-1.json b/apps/ui/public/r/p-navigation-1.json
new file mode 100644
index 000000000..256c65ca6
--- /dev/null
+++ b/apps/ui/public/r/p-navigation-1.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-navigation-1",
+  "description": "Segmented navigation built with links",
+  "registryDependencies": [
+    "@coss/segmented-control"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-navigation-1.tsx",
+      "content": "import {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\n\nconst itemClassName = segmentedControlItemVariants({ state: \"current\" });\n\nexport default function Particle() {\n  return (\n    <nav aria-label=\"Project sections\">\n      <div className={segmentedControlRootClassName}>\n        <a aria-current=\"page\" className={itemClassName} href=\"#overview\">\n          Overview\n        </a>\n        <a className={itemClassName} href=\"#activity\">\n          Activity\n        </a>\n        <a className={itemClassName} href=\"#settings\">\n          Settings\n        </a>\n      </div>\n    </nav>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "navigation",
+    "segmented control"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-navigation-2.json b/apps/ui/public/r/p-navigation-2.json
new file mode 100644
index 000000000..155ad9c63
--- /dev/null
+++ b/apps/ui/public/r/p-navigation-2.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-navigation-2",
+  "description": "Small segmented navigation built with links",
+  "registryDependencies": [
+    "@coss/segmented-control"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-navigation-2.tsx",
+      "content": "import {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\n\nconst itemClassName = segmentedControlItemVariants({\n  size: \"sm\",\n  state: \"current\",\n});\n\nexport default function Particle() {\n  return (\n    <nav aria-label=\"Project sections\">\n      <div className={segmentedControlRootClassName}>\n        <a aria-current=\"page\" className={itemClassName} href=\"#overview\">\n          Overview\n        </a>\n        <a className={itemClassName} href=\"#activity\">\n          Activity\n        </a>\n        <a className={itemClassName} href=\"#settings\">\n          Settings\n        </a>\n      </div>\n    </nav>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "navigation",
+    "segmented control"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-navigation-3.json b/apps/ui/public/r/p-navigation-3.json
new file mode 100644
index 000000000..bc2a61eb7
--- /dev/null
+++ b/apps/ui/public/r/p-navigation-3.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-navigation-3",
+  "description": "Large segmented navigation built with links",
+  "registryDependencies": [
+    "@coss/segmented-control"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-navigation-3.tsx",
+      "content": "import {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\n\nconst itemClassName = segmentedControlItemVariants({\n  size: \"lg\",\n  state: \"current\",\n});\n\nexport default function Particle() {\n  return (\n    <nav aria-label=\"Project sections\">\n      <div className={segmentedControlRootClassName}>\n        <a aria-current=\"page\" className={itemClassName} href=\"#overview\">\n          Overview\n        </a>\n        <a className={itemClassName} href=\"#activity\">\n          Activity\n        </a>\n        <a className={itemClassName} href=\"#settings\">\n          Settings\n        </a>\n      </div>\n    </nav>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "navigation",
+    "segmented control"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-radio-group-7.json b/apps/ui/public/r/p-radio-group-7.json
new file mode 100644
index 000000000..be08b123d
--- /dev/null
+++ b/apps/ui/public/r/p-radio-group-7.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-radio-group-7",
+  "description": "Small segmented control built with a radio group",
+  "registryDependencies": [
+    "@coss/radio-group",
+    "@coss/segmented-control"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-radio-group-7.tsx",
+      "content": "\"use client\";\n\nimport {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\nimport {\n  RadioGroupPrimitive,\n  RadioPrimitive,\n} from \"@/registry/default/ui/radio-group\";\n\nconst itemClassName = segmentedControlItemVariants({\n  className: \"grow\",\n  size: \"sm\",\n  state: \"checked\",\n});\n\nexport default function Particle() {\n  return (\n    <RadioGroupPrimitive\n      aria-label=\"Billing period\"\n      className={segmentedControlRootClassName}\n      defaultValue=\"monthly\"\n    >\n      <RadioPrimitive.Root className={itemClassName} value=\"monthly\">\n        Monthly\n      </RadioPrimitive.Root>\n      <RadioPrimitive.Root className={itemClassName} value=\"yearly\">\n        Yearly\n      </RadioPrimitive.Root>\n    </RadioGroupPrimitive>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "radio group",
+    "segmented control"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-radio-group-8.json b/apps/ui/public/r/p-radio-group-8.json
new file mode 100644
index 000000000..5294b70e9
--- /dev/null
+++ b/apps/ui/public/r/p-radio-group-8.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-radio-group-8",
+  "description": "Segmented control built with a radio group",
+  "registryDependencies": [
+    "@coss/radio-group",
+    "@coss/segmented-control"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-radio-group-8.tsx",
+      "content": "\"use client\";\n\nimport {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\nimport {\n  RadioGroupPrimitive,\n  RadioPrimitive,\n} from \"@/registry/default/ui/radio-group\";\n\nconst itemClassName = segmentedControlItemVariants({\n  className: \"grow\",\n  state: \"checked\",\n});\n\nexport default function Particle() {\n  return (\n    <RadioGroupPrimitive\n      aria-label=\"Billing period\"\n      className={segmentedControlRootClassName}\n      defaultValue=\"monthly\"\n    >\n      <RadioPrimitive.Root className={itemClassName} value=\"monthly\">\n        Monthly\n      </RadioPrimitive.Root>\n      <RadioPrimitive.Root className={itemClassName} value=\"yearly\">\n        Yearly\n      </RadioPrimitive.Root>\n    </RadioGroupPrimitive>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "radio group",
+    "segmented control"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-radio-group-9.json b/apps/ui/public/r/p-radio-group-9.json
new file mode 100644
index 000000000..f81f3f5e5
--- /dev/null
+++ b/apps/ui/public/r/p-radio-group-9.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-radio-group-9",
+  "description": "Large segmented control built with a radio group",
+  "registryDependencies": [
+    "@coss/radio-group",
+    "@coss/segmented-control"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-radio-group-9.tsx",
+      "content": "\"use client\";\n\nimport {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\nimport {\n  RadioGroupPrimitive,\n  RadioPrimitive,\n} from \"@/registry/default/ui/radio-group\";\n\nconst itemClassName = segmentedControlItemVariants({\n  className: \"grow\",\n  size: \"lg\",\n  state: \"checked\",\n});\n\nexport default function Particle() {\n  return (\n    <RadioGroupPrimitive\n      aria-label=\"Billing period\"\n      className={segmentedControlRootClassName}\n      defaultValue=\"monthly\"\n    >\n      <RadioPrimitive.Root className={itemClassName} value=\"monthly\">\n        Monthly\n      </RadioPrimitive.Root>\n      <RadioPrimitive.Root className={itemClassName} value=\"yearly\">\n        Yearly\n      </RadioPrimitive.Root>\n    </RadioGroupPrimitive>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "radio group",
+    "segmented control"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-tabs-1.json b/apps/ui/public/r/p-tabs-1.json
index 7ecaecc3a..5f219095b 100644
--- a/apps/ui/public/r/p-tabs-1.json
+++ b/apps/ui/public/r/p-tabs-1.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "p-tabs-1",
-  "description": "Basic tabs",
+  "description": "Segmented control built with tabs",
   "registryDependencies": [
     "@coss/tabs"
   ],
diff --git a/apps/ui/public/r/p-tabs-14.json b/apps/ui/public/r/p-tabs-14.json
new file mode 100644
index 000000000..ba56c5454
--- /dev/null
+++ b/apps/ui/public/r/p-tabs-14.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-tabs-14",
+  "description": "Small segmented control built with tabs",
+  "registryDependencies": [
+    "@coss/tabs"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-tabs-14.tsx",
+      "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <TabsList size=\"sm\">\n        <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n        <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n        <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "tabs"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-tabs-15.json b/apps/ui/public/r/p-tabs-15.json
new file mode 100644
index 000000000..4e23b4a39
--- /dev/null
+++ b/apps/ui/public/r/p-tabs-15.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-tabs-15",
+  "description": "Large segmented control built with tabs",
+  "registryDependencies": [
+    "@coss/tabs"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-tabs-15.tsx",
+      "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <TabsList size=\"lg\">\n        <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n        <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n        <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "tabs"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index a9ccab9d9..c8034a72a 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -810,6 +810,9 @@
         }
       ],
       "name": "tabs",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
       "type": "registry:ui"
     },
     {
@@ -8347,6 +8350,60 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "navigation",
+        "segmented control"
+      ],
+      "description": "Segmented navigation built with links",
+      "files": [
+        {
+          "path": "registry/default/particles/p-navigation-1.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-navigation-1",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "navigation",
+        "segmented control"
+      ],
+      "description": "Small segmented navigation built with links",
+      "files": [
+        {
+          "path": "registry/default/particles/p-navigation-2.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-navigation-2",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "navigation",
+        "segmented control"
+      ],
+      "description": "Large segmented navigation built with links",
+      "files": [
+        {
+          "path": "registry/default/particles/p-navigation-3.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-navigation-3",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "pagination"
@@ -8710,6 +8767,63 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "radio group",
+        "segmented control"
+      ],
+      "description": "Small segmented control built with a radio group",
+      "files": [
+        {
+          "path": "registry/default/particles/p-radio-group-7.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-radio-group-7",
+      "registryDependencies": [
+        "@coss/radio-group",
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "radio group",
+        "segmented control"
+      ],
+      "description": "Segmented control built with a radio group",
+      "files": [
+        {
+          "path": "registry/default/particles/p-radio-group-8.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-radio-group-8",
+      "registryDependencies": [
+        "@coss/radio-group",
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "radio group",
+        "segmented control"
+      ],
+      "description": "Large segmented control built with a radio group",
+      "files": [
+        {
+          "path": "registry/default/particles/p-radio-group-9.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-radio-group-9",
+      "registryDependencies": [
+        "@coss/radio-group",
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "scroll area"
@@ -10341,7 +10455,7 @@
       "categories": [
         "tabs"
       ],
-      "description": "Basic tabs",
+      "description": "Segmented control built with tabs",
       "files": [
         {
           "path": "registry/default/particles/p-tabs-1.tsx",
@@ -10594,6 +10708,40 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "tabs"
+      ],
+      "description": "Small segmented control built with tabs",
+      "files": [
+        {
+          "path": "registry/default/particles/p-tabs-14.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-tabs-14",
+      "registryDependencies": [
+        "@coss/tabs"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "tabs"
+      ],
+      "description": "Large segmented control built with tabs",
+      "files": [
+        {
+          "path": "registry/default/particles/p-tabs-15.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-tabs-15",
+      "registryDependencies": [
+        "@coss/tabs"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "textarea"
@@ -11813,6 +11961,19 @@
         "dependency": "geist"
       }
     },
+    {
+      "dependencies": [
+        "class-variance-authority"
+      ],
+      "files": [
+        {
+          "path": "registry/default/lib/segmented-control.ts",
+          "type": "registry:lib"
+        }
+      ],
+      "name": "segmented-control",
+      "type": "registry:lib"
+    },
     {
       "dependencies": [
         "clsx",
diff --git a/apps/ui/public/r/segmented-control.json b/apps/ui/public/r/segmented-control.json
new file mode 100644
index 000000000..7e7e776ac
--- /dev/null
+++ b/apps/ui/public/r/segmented-control.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "segmented-control",
+  "dependencies": [
+    "class-variance-authority"
+  ],
+  "files": [
+    {
+      "path": "registry/default/lib/segmented-control.ts",
+      "content": "import { cva } from \"class-variance-authority\";\n\nexport type SegmentedControlSize = \"default\" | \"lg\" | \"sm\";\n\nexport const segmentedControlItemSizeClassNames: Record<\n  SegmentedControlSize,\n  string\n> = {\n  default: \"h-8.5 px-[calc(--spacing(2.5)-1px)] sm:h-7.5\",\n  lg: \"h-9.5 px-[calc(--spacing(3)-1px)] sm:h-8.5\",\n  sm: \"h-7.5 px-[calc(--spacing(2)-1px)] sm:h-6.5\",\n};\n\nexport const segmentedControlRootClassName =\n  \"relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5\";\n\nexport const segmentedControlItemVariants = cva(\n  \"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm\",\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: segmentedControlItemSizeClassNames,\n      state: {\n        checked:\n          \"data-checked:bg-background data-checked:text-foreground data-checked:shadow-sm/5 dark:data-checked:bg-input\",\n        current:\n          \"aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input\",\n        pressed:\n          \"data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm/5 dark:data-pressed:bg-input\",\n      },\n    },\n  },\n);\n",
+      "type": "registry:lib"
+    }
+  ],
+  "type": "registry:lib"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/tabs.json b/apps/ui/public/r/tabs.json
index 0760cba83..2628dffdf 100644
--- a/apps/ui/public/r/tabs.json
+++ b/apps/ui/public/r/tabs.json
@@ -4,10 +4,13 @@
   "dependencies": [
     "@base-ui/react"
   ],
+  "registryDependencies": [
+    "@coss/segmented-control"
+  ],
   "files": [
     {
       "path": "registry/default/ui/tabs.tsx",
-      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type TabsVariant = \"default\" | \"underline\";\n\nexport function Tabs({\n  className,\n  ...props\n}: TabsPrimitive.Root.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Root\n      className={cn(\n        \"flex flex-col gap-2 data-[orientation=vertical]:flex-row\",\n        className,\n      )}\n      data-slot=\"tabs\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsList({\n  variant = \"default\",\n  className,\n  children,\n  ...props\n}: TabsPrimitive.List.Props & {\n  variant?: TabsVariant;\n}): React.ReactElement {\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        \"relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground\",\n        \"data-[orientation=vertical]:flex-col\",\n        variant === \"default\"\n          ? \"rounded-lg bg-muted p-0.5 text-muted-foreground/72\"\n          : \"data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"tabs-list\"\n      {...props}\n    >\n      {children}\n      <TabsPrimitive.Indicator\n        className={cn(\n          \"absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out\",\n          variant === \"underline\"\n            ? \"z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px data-[orientation=horizontal]:translate-y-px\"\n            : \"-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input\",\n        )}\n        data-slot=\"tab-indicator\"\n      />\n    </TabsPrimitive.List>\n  );\n}\n\nexport function TabsTab({\n  className,\n  ...props\n}: TabsPrimitive.Tab.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Tab\n      className={cn(\n        \"relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"tabs-tab\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsPanel({\n  className,\n  ...props\n}: TabsPrimitive.Panel.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Panel\n      className={cn(\"flex-1 outline-none\", className)}\n      data-slot=\"tabs-content\"\n      {...props}\n    />\n  );\n}\n\nexport { TabsPrimitive, TabsTab as TabsTrigger, TabsPanel as TabsContent };\n",
+      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport * as React from \"react\";\nimport {\n  type SegmentedControlSize,\n  segmentedControlItemSizeClassNames,\n} from \"@/registry/default/lib/segmented-control\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\ntype TabsVariant = \"default\" | \"underline\";\ntype TabsSize = SegmentedControlSize;\n\nconst TabsListContext: React.Context<TabsSize> =\n  React.createContext<TabsSize>(\"default\");\n\nexport function Tabs({\n  className,\n  ...props\n}: TabsPrimitive.Root.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Root\n      className={cn(\n        \"flex flex-col gap-2 data-[orientation=vertical]:flex-row\",\n        className,\n      )}\n      data-slot=\"tabs\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsList({\n  variant = \"default\",\n  size = \"default\",\n  className,\n  children,\n  ...props\n}: TabsPrimitive.List.Props & {\n  size?: TabsSize;\n  variant?: TabsVariant;\n}): React.ReactElement {\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        \"relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground\",\n        \"data-[orientation=vertical]:flex-col\",\n        variant === \"default\"\n          ? \"rounded-lg bg-muted p-0.5 text-muted-foreground/72\"\n          : \"data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent\",\n        className,\n      )}\n      data-size={size}\n      data-slot=\"tabs-list\"\n      {...props}\n    >\n      <TabsListContext.Provider value={size}>\n        {children}\n      </TabsListContext.Provider>\n      <TabsPrimitive.Indicator\n        className={cn(\n          \"absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out\",\n          variant === \"underline\"\n            ? \"z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px data-[orientation=horizontal]:translate-y-px\"\n            : \"-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input\",\n        )}\n        data-slot=\"tab-indicator\"\n      />\n    </TabsPrimitive.List>\n  );\n}\n\nexport function TabsTab({\n  className,\n  size,\n  ...props\n}: TabsPrimitive.Tab.Props & {\n  size?: TabsSize;\n}): React.ReactElement {\n  const contextSize: TabsSize = React.useContext(TabsListContext);\n  const resolvedSize: TabsSize = size ?? contextSize;\n\n  return (\n    <TabsPrimitive.Tab\n      className={cn(\n        \"relative flex shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        segmentedControlItemSizeClassNames[resolvedSize],\n        className,\n      )}\n      data-size={resolvedSize}\n      data-slot=\"tabs-tab\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsPanel({\n  className,\n  ...props\n}: TabsPrimitive.Panel.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Panel\n      className={cn(\"flex-1 outline-none\", className)}\n      data-slot=\"tabs-content\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  TabsPrimitive,\n  TabsTab as TabsTrigger,\n  TabsPanel as TabsContent,\n  type TabsSize,\n  type TabsVariant,\n};\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index a9ccab9d9..c8034a72a 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -810,6 +810,9 @@
         }
       ],
       "name": "tabs",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
       "type": "registry:ui"
     },
     {
@@ -8347,6 +8350,60 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "navigation",
+        "segmented control"
+      ],
+      "description": "Segmented navigation built with links",
+      "files": [
+        {
+          "path": "registry/default/particles/p-navigation-1.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-navigation-1",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "navigation",
+        "segmented control"
+      ],
+      "description": "Small segmented navigation built with links",
+      "files": [
+        {
+          "path": "registry/default/particles/p-navigation-2.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-navigation-2",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "navigation",
+        "segmented control"
+      ],
+      "description": "Large segmented navigation built with links",
+      "files": [
+        {
+          "path": "registry/default/particles/p-navigation-3.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-navigation-3",
+      "registryDependencies": [
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "pagination"
@@ -8710,6 +8767,63 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "radio group",
+        "segmented control"
+      ],
+      "description": "Small segmented control built with a radio group",
+      "files": [
+        {
+          "path": "registry/default/particles/p-radio-group-7.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-radio-group-7",
+      "registryDependencies": [
+        "@coss/radio-group",
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "radio group",
+        "segmented control"
+      ],
+      "description": "Segmented control built with a radio group",
+      "files": [
+        {
+          "path": "registry/default/particles/p-radio-group-8.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-radio-group-8",
+      "registryDependencies": [
+        "@coss/radio-group",
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "radio group",
+        "segmented control"
+      ],
+      "description": "Large segmented control built with a radio group",
+      "files": [
+        {
+          "path": "registry/default/particles/p-radio-group-9.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-radio-group-9",
+      "registryDependencies": [
+        "@coss/radio-group",
+        "@coss/segmented-control"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "scroll area"
@@ -10341,7 +10455,7 @@
       "categories": [
         "tabs"
       ],
-      "description": "Basic tabs",
+      "description": "Segmented control built with tabs",
       "files": [
         {
           "path": "registry/default/particles/p-tabs-1.tsx",
@@ -10594,6 +10708,40 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "tabs"
+      ],
+      "description": "Small segmented control built with tabs",
+      "files": [
+        {
+          "path": "registry/default/particles/p-tabs-14.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-tabs-14",
+      "registryDependencies": [
+        "@coss/tabs"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "tabs"
+      ],
+      "description": "Large segmented control built with tabs",
+      "files": [
+        {
+          "path": "registry/default/particles/p-tabs-15.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-tabs-15",
+      "registryDependencies": [
+        "@coss/tabs"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "textarea"
@@ -11813,6 +11961,19 @@
         "dependency": "geist"
       }
     },
+    {
+      "dependencies": [
+        "class-variance-authority"
+      ],
+      "files": [
+        {
+          "path": "registry/default/lib/segmented-control.ts",
+          "type": "registry:lib"
+        }
+      ],
+      "name": "segmented-control",
+      "type": "registry:lib"
+    },
     {
       "dependencies": [
         "clsx",
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index 9c4d68d6c..7e3b89b7c 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -857,7 +857,7 @@ export const Index: Record<string, any> = {
     name: "tabs",
     description: "",
     type: "registry:ui",
-    registryDependencies: undefined,
+    registryDependencies: ["@coss/segmented-control"],
     files: [{
       path: "registry/default/ui/tabs.tsx",
       type: "registry:ui",
@@ -7189,6 +7189,60 @@ export const Index: Record<string, any> = {
     categories: ["number field","input"],
     meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"},
   },
+  "p-navigation-1": {
+    name: "p-navigation-1",
+    description: "Segmented navigation built with links",
+    type: "registry:block",
+    registryDependencies: ["@coss/segmented-control"],
+    files: [{
+      path: "registry/default/particles/p-navigation-1.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-navigation-1.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["navigation","segmented control"],
+    meta: undefined,
+  },
+  "p-navigation-2": {
+    name: "p-navigation-2",
+    description: "Small segmented navigation built with links",
+    type: "registry:block",
+    registryDependencies: ["@coss/segmented-control"],
+    files: [{
+      path: "registry/default/particles/p-navigation-2.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-navigation-2.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["navigation","segmented control"],
+    meta: undefined,
+  },
+  "p-navigation-3": {
+    name: "p-navigation-3",
+    description: "Large segmented navigation built with links",
+    type: "registry:block",
+    registryDependencies: ["@coss/segmented-control"],
+    files: [{
+      path: "registry/default/particles/p-navigation-3.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-navigation-3.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["navigation","segmented control"],
+    meta: undefined,
+  },
   "p-pagination-1": {
     name: "p-pagination-1",
     description: "Pagination example",
@@ -7495,6 +7549,60 @@ export const Index: Record<string, any> = {
     categories: ["radio group","form"],
     meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-[320px]"},
   },
+  "p-radio-group-7": {
+    name: "p-radio-group-7",
+    description: "Small segmented control built with a radio group",
+    type: "registry:block",
+    registryDependencies: ["@coss/radio-group","@coss/segmented-control"],
+    files: [{
+      path: "registry/default/particles/p-radio-group-7.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-radio-group-7.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["radio group","segmented control"],
+    meta: undefined,
+  },
+  "p-radio-group-8": {
+    name: "p-radio-group-8",
+    description: "Segmented control built with a radio group",
+    type: "registry:block",
+    registryDependencies: ["@coss/radio-group","@coss/segmented-control"],
+    files: [{
+      path: "registry/default/particles/p-radio-group-8.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-radio-group-8.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["radio group","segmented control"],
+    meta: undefined,
+  },
+  "p-radio-group-9": {
+    name: "p-radio-group-9",
+    description: "Large segmented control built with a radio group",
+    type: "registry:block",
+    registryDependencies: ["@coss/radio-group","@coss/segmented-control"],
+    files: [{
+      path: "registry/default/particles/p-radio-group-9.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-radio-group-9.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["radio group","segmented control"],
+    meta: undefined,
+  },
   "p-scroll-area-1": {
     name: "p-scroll-area-1",
     description: "Basic scroll area",
@@ -8847,7 +8955,7 @@ export const Index: Record<string, any> = {
   },
   "p-tabs-1": {
     name: "p-tabs-1",
-    description: "Basic tabs",
+    description: "Segmented control built with tabs",
     type: "registry:block",
     registryDependencies: ["@coss/tabs"],
     files: [{
@@ -9079,6 +9187,42 @@ export const Index: Record<string, any> = {
     categories: ["tabs","tooltip"],
     meta: undefined,
   },
+  "p-tabs-14": {
+    name: "p-tabs-14",
+    description: "Small segmented control built with tabs",
+    type: "registry:block",
+    registryDependencies: ["@coss/tabs"],
+    files: [{
+      path: "registry/default/particles/p-tabs-14.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-tabs-14.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["tabs"],
+    meta: undefined,
+  },
+  "p-tabs-15": {
+    name: "p-tabs-15",
+    description: "Large segmented control built with tabs",
+    type: "registry:block",
+    registryDependencies: ["@coss/tabs"],
+    files: [{
+      path: "registry/default/particles/p-tabs-15.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-tabs-15.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["tabs"],
+    meta: undefined,
+  },
   "p-textarea-1": {
     name: "p-textarea-1",
     description: "Basic textarea",
@@ -9989,6 +10133,24 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "segmented-control": {
+    name: "segmented-control",
+    description: "",
+    type: "registry:lib",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/default/lib/segmented-control.ts",
+      type: "registry:lib",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/lib/segmented-control.ts")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
   "utils": {
     name: "utils",
     description: "",
diff --git a/apps/ui/registry/default/lib/segmented-control.ts b/apps/ui/registry/default/lib/segmented-control.ts
new file mode 100644
index 000000000..bcef88500
--- /dev/null
+++ b/apps/ui/registry/default/lib/segmented-control.ts
@@ -0,0 +1,35 @@
+import { cva } from "class-variance-authority";
+
+export type SegmentedControlSize = "default" | "lg" | "sm";
+
+export const segmentedControlItemSizeClassNames: Record<
+  SegmentedControlSize,
+  string
+> = {
+  default: "h-8.5 px-[calc(--spacing(2.5)-1px)] sm:h-7.5",
+  lg: "h-9.5 px-[calc(--spacing(3)-1px)] sm:h-8.5",
+  sm: "h-7.5 px-[calc(--spacing(2)-1px)] sm:h-6.5",
+};
+
+export const segmentedControlRootClassName =
+  "relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5";
+
+export const segmentedControlItemVariants = cva(
+  "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm",
+  {
+    defaultVariants: {
+      size: "default",
+    },
+    variants: {
+      size: segmentedControlItemSizeClassNames,
+      state: {
+        checked:
+          "data-checked:bg-background data-checked:text-foreground data-checked:shadow-sm/5 dark:data-checked:bg-input",
+        current:
+          "aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input",
+        pressed:
+          "data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm/5 dark:data-pressed:bg-input",
+      },
+    },
+  },
+);
diff --git a/apps/ui/registry/default/particles/p-navigation-1.tsx b/apps/ui/registry/default/particles/p-navigation-1.tsx
new file mode 100644
index 000000000..c5c23baa8
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-navigation-1.tsx
@@ -0,0 +1,24 @@
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/registry/default/lib/segmented-control";
+
+const itemClassName = segmentedControlItemVariants({ state: "current" });
+
+export default function Particle() {
+  return (
+    <nav aria-label="Project sections">
+      <div className={segmentedControlRootClassName}>
+        <a aria-current="page" className={itemClassName} href="#overview">
+          Overview
+        </a>
+        <a className={itemClassName} href="#activity">
+          Activity
+        </a>
+        <a className={itemClassName} href="#settings">
+          Settings
+        </a>
+      </div>
+    </nav>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-navigation-2.tsx b/apps/ui/registry/default/particles/p-navigation-2.tsx
new file mode 100644
index 000000000..ccce03d86
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-navigation-2.tsx
@@ -0,0 +1,27 @@
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/registry/default/lib/segmented-control";
+
+const itemClassName = segmentedControlItemVariants({
+  size: "sm",
+  state: "current",
+});
+
+export default function Particle() {
+  return (
+    <nav aria-label="Project sections">
+      <div className={segmentedControlRootClassName}>
+        <a aria-current="page" className={itemClassName} href="#overview">
+          Overview
+        </a>
+        <a className={itemClassName} href="#activity">
+          Activity
+        </a>
+        <a className={itemClassName} href="#settings">
+          Settings
+        </a>
+      </div>
+    </nav>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-navigation-3.tsx b/apps/ui/registry/default/particles/p-navigation-3.tsx
new file mode 100644
index 000000000..53dd2ce37
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-navigation-3.tsx
@@ -0,0 +1,27 @@
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/registry/default/lib/segmented-control";
+
+const itemClassName = segmentedControlItemVariants({
+  size: "lg",
+  state: "current",
+});
+
+export default function Particle() {
+  return (
+    <nav aria-label="Project sections">
+      <div className={segmentedControlRootClassName}>
+        <a aria-current="page" className={itemClassName} href="#overview">
+          Overview
+        </a>
+        <a className={itemClassName} href="#activity">
+          Activity
+        </a>
+        <a className={itemClassName} href="#settings">
+          Settings
+        </a>
+      </div>
+    </nav>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-radio-group-7.tsx b/apps/ui/registry/default/particles/p-radio-group-7.tsx
new file mode 100644
index 000000000..1e31a259c
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-radio-group-7.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/registry/default/lib/segmented-control";
+import {
+  RadioGroupPrimitive,
+  RadioPrimitive,
+} from "@/registry/default/ui/radio-group";
+
+const itemClassName = segmentedControlItemVariants({
+  className: "grow",
+  size: "sm",
+  state: "checked",
+});
+
+export default function Particle() {
+  return (
+    <RadioGroupPrimitive
+      aria-label="Billing period"
+      className={segmentedControlRootClassName}
+      defaultValue="monthly"
+    >
+      <RadioPrimitive.Root className={itemClassName} value="monthly">
+        Monthly
+      </RadioPrimitive.Root>
+      <RadioPrimitive.Root className={itemClassName} value="yearly">
+        Yearly
+      </RadioPrimitive.Root>
+    </RadioGroupPrimitive>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-radio-group-8.tsx b/apps/ui/registry/default/particles/p-radio-group-8.tsx
new file mode 100644
index 000000000..40683b050
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-radio-group-8.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/registry/default/lib/segmented-control";
+import {
+  RadioGroupPrimitive,
+  RadioPrimitive,
+} from "@/registry/default/ui/radio-group";
+
+const itemClassName = segmentedControlItemVariants({
+  className: "grow",
+  state: "checked",
+});
+
+export default function Particle() {
+  return (
+    <RadioGroupPrimitive
+      aria-label="Billing period"
+      className={segmentedControlRootClassName}
+      defaultValue="monthly"
+    >
+      <RadioPrimitive.Root className={itemClassName} value="monthly">
+        Monthly
+      </RadioPrimitive.Root>
+      <RadioPrimitive.Root className={itemClassName} value="yearly">
+        Yearly
+      </RadioPrimitive.Root>
+    </RadioGroupPrimitive>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-radio-group-9.tsx b/apps/ui/registry/default/particles/p-radio-group-9.tsx
new file mode 100644
index 000000000..8c8ddab39
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-radio-group-9.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/registry/default/lib/segmented-control";
+import {
+  RadioGroupPrimitive,
+  RadioPrimitive,
+} from "@/registry/default/ui/radio-group";
+
+const itemClassName = segmentedControlItemVariants({
+  className: "grow",
+  size: "lg",
+  state: "checked",
+});
+
+export default function Particle() {
+  return (
+    <RadioGroupPrimitive
+      aria-label="Billing period"
+      className={segmentedControlRootClassName}
+      defaultValue="monthly"
+    >
+      <RadioPrimitive.Root className={itemClassName} value="monthly">
+        Monthly
+      </RadioPrimitive.Root>
+      <RadioPrimitive.Root className={itemClassName} value="yearly">
+        Yearly
+      </RadioPrimitive.Root>
+    </RadioGroupPrimitive>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-tabs-14.tsx b/apps/ui/registry/default/particles/p-tabs-14.tsx
new file mode 100644
index 000000000..16895371e
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-tabs-14.tsx
@@ -0,0 +1,28 @@
+import { Tabs, TabsList, TabsPanel, TabsTab } from "@/registry/default/ui/tabs";
+
+export default function Particle() {
+  return (
+    <Tabs defaultValue="tab-1">
+      <TabsList size="sm">
+        <TabsTab value="tab-1">Tab 1</TabsTab>
+        <TabsTab value="tab-2">Tab 2</TabsTab>
+        <TabsTab value="tab-3">Tab 3</TabsTab>
+      </TabsList>
+      <TabsPanel value="tab-1">
+        <p className="p-4 text-center text-muted-foreground text-xs">
+          Tab 1 content
+        </p>
+      </TabsPanel>
+      <TabsPanel value="tab-2">
+        <p className="p-4 text-center text-muted-foreground text-xs">
+          Tab 2 content
+        </p>
+      </TabsPanel>
+      <TabsPanel value="tab-3">
+        <p className="p-4 text-center text-muted-foreground text-xs">
+          Tab 3 content
+        </p>
+      </TabsPanel>
+    </Tabs>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-tabs-15.tsx b/apps/ui/registry/default/particles/p-tabs-15.tsx
new file mode 100644
index 000000000..092228198
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-tabs-15.tsx
@@ -0,0 +1,28 @@
+import { Tabs, TabsList, TabsPanel, TabsTab } from "@/registry/default/ui/tabs";
+
+export default function Particle() {
+  return (
+    <Tabs defaultValue="tab-1">
+      <TabsList size="lg">
+        <TabsTab value="tab-1">Tab 1</TabsTab>
+        <TabsTab value="tab-2">Tab 2</TabsTab>
+        <TabsTab value="tab-3">Tab 3</TabsTab>
+      </TabsList>
+      <TabsPanel value="tab-1">
+        <p className="p-4 text-center text-muted-foreground text-xs">
+          Tab 1 content
+        </p>
+      </TabsPanel>
+      <TabsPanel value="tab-2">
+        <p className="p-4 text-center text-muted-foreground text-xs">
+          Tab 2 content
+        </p>
+      </TabsPanel>
+      <TabsPanel value="tab-3">
+        <p className="p-4 text-center text-muted-foreground text-xs">
+          Tab 3 content
+        </p>
+      </TabsPanel>
+    </Tabs>
+  );
+}
diff --git a/apps/ui/registry/default/ui/tabs.tsx b/apps/ui/registry/default/ui/tabs.tsx
index 7a4b82ee7..17b83777e 100644
--- a/apps/ui/registry/default/ui/tabs.tsx
+++ b/apps/ui/registry/default/ui/tabs.tsx
@@ -1,10 +1,18 @@
 "use client";
 
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
-import type React from "react";
+import * as React from "react";
+import {
+  type SegmentedControlSize,
+  segmentedControlItemSizeClassNames,
+} from "@/registry/default/lib/segmented-control";
 import { cn } from "@/registry/default/lib/utils";
 
-export type TabsVariant = "default" | "underline";
+type TabsVariant = "default" | "underline";
+type TabsSize = SegmentedControlSize;
+
+const TabsListContext: React.Context<TabsSize> =
+  React.createContext<TabsSize>("default");
 
 export function Tabs({
   className,
@@ -24,10 +32,12 @@ export function Tabs({
 
 export function TabsList({
   variant = "default",
+  size = "default",
   className,
   children,
   ...props
 }: TabsPrimitive.List.Props & {
+  size?: TabsSize;
   variant?: TabsVariant;
 }): React.ReactElement {
   return (
@@ -40,10 +50,13 @@ export function TabsList({
           : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent",
         className,
       )}
+      data-size={size}
       data-slot="tabs-list"
       {...props}
     >
-      {children}
+      <TabsListContext.Provider value={size}>
+        {children}
+      </TabsListContext.Provider>
       <TabsPrimitive.Indicator
         className={cn(
           "absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out",
@@ -59,14 +72,22 @@ export function TabsList({
 
 export function TabsTab({
   className,
+  size,
   ...props
-}: TabsPrimitive.Tab.Props): React.ReactElement {
+}: TabsPrimitive.Tab.Props & {
+  size?: TabsSize;
+}): React.ReactElement {
+  const contextSize: TabsSize = React.useContext(TabsListContext);
+  const resolvedSize: TabsSize = size ?? contextSize;
+
   return (
     <TabsPrimitive.Tab
       className={cn(
-        "relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
+        "relative flex shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
+        segmentedControlItemSizeClassNames[resolvedSize],
         className,
       )}
+      data-size={resolvedSize}
       data-slot="tabs-tab"
       {...props}
     />
@@ -86,4 +107,10 @@ export function TabsPanel({
   );
 }
 
-export { TabsPrimitive, TabsTab as TabsTrigger, TabsPanel as TabsContent };
+export {
+  TabsPrimitive,
+  TabsTab as TabsTrigger,
+  TabsPanel as TabsContent,
+  type TabsSize,
+  type TabsVariant,
+};
diff --git a/apps/ui/registry/registry-categories.ts b/apps/ui/registry/registry-categories.ts
index 3891865fd..dd8e332f1 100644
--- a/apps/ui/registry/registry-categories.ts
+++ b/apps/ui/registry/registry-categories.ts
@@ -40,6 +40,7 @@ export const registryCategories = [
   "label",
   "menu",
   "meter",
+  "navigation",
   "number field",
   "otp field",
   "pagination",
@@ -49,6 +50,7 @@ export const registryCategories = [
   "radio group",
   "scroll area",
   "select",
+  "segmented control",
   "separator",
   "sheet",
   "skeleton",
diff --git a/apps/ui/registry/registry-lib.ts b/apps/ui/registry/registry-lib.ts
index 9d4db687b..7cedb75f6 100644
--- a/apps/ui/registry/registry-lib.ts
+++ b/apps/ui/registry/registry-lib.ts
@@ -1,6 +1,17 @@
 import type { Registry } from "shadcn/schema";
 
 export const lib: Registry["items"] = [
+  {
+    dependencies: ["class-variance-authority"],
+    files: [
+      {
+        path: "lib/segmented-control.ts",
+        type: "registry:lib",
+      },
+    ],
+    name: "segmented-control",
+    type: "registry:lib",
+  },
   {
     dependencies: ["clsx", "tailwind-merge"],
     files: [
diff --git a/apps/ui/registry/registry-particles.ts b/apps/ui/registry/registry-particles.ts
index 00d65451c..843eee8e8 100644
--- a/apps/ui/registry/registry-particles.ts
+++ b/apps/ui/registry/registry-particles.ts
@@ -3954,6 +3954,30 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/number-field"],
     type: "registry:block",
   },
+  {
+    categories: categories("navigation", "segmented control"),
+    description: "Segmented navigation built with links",
+    files: [{ path: "particles/p-navigation-1.tsx", type: "registry:block" }],
+    name: "p-navigation-1",
+    registryDependencies: ["@coss/segmented-control"],
+    type: "registry:block",
+  },
+  {
+    categories: categories("navigation", "segmented control"),
+    description: "Small segmented navigation built with links",
+    files: [{ path: "particles/p-navigation-2.tsx", type: "registry:block" }],
+    name: "p-navigation-2",
+    registryDependencies: ["@coss/segmented-control"],
+    type: "registry:block",
+  },
+  {
+    categories: categories("navigation", "segmented control"),
+    description: "Large segmented navigation built with links",
+    files: [{ path: "particles/p-navigation-3.tsx", type: "registry:block" }],
+    name: "p-navigation-3",
+    registryDependencies: ["@coss/segmented-control"],
+    type: "registry:block",
+  },
   {
     categories: categories("pagination"),
     description: "Pagination example",
@@ -4147,6 +4171,30 @@ export const particles: ParticleItem[] = [
     ],
     type: "registry:block",
   },
+  {
+    categories: categories("radio group", "segmented control"),
+    description: "Small segmented control built with a radio group",
+    files: [{ path: "particles/p-radio-group-7.tsx", type: "registry:block" }],
+    name: "p-radio-group-7",
+    registryDependencies: ["@coss/radio-group", "@coss/segmented-control"],
+    type: "registry:block",
+  },
+  {
+    categories: categories("radio group", "segmented control"),
+    description: "Segmented control built with a radio group",
+    files: [{ path: "particles/p-radio-group-8.tsx", type: "registry:block" }],
+    name: "p-radio-group-8",
+    registryDependencies: ["@coss/radio-group", "@coss/segmented-control"],
+    type: "registry:block",
+  },
+  {
+    categories: categories("radio group", "segmented control"),
+    description: "Large segmented control built with a radio group",
+    files: [{ path: "particles/p-radio-group-9.tsx", type: "registry:block" }],
+    name: "p-radio-group-9",
+    registryDependencies: ["@coss/radio-group", "@coss/segmented-control"],
+    type: "registry:block",
+  },
   {
     categories: categories("scroll area"),
     description: "Basic scroll area",
@@ -5110,7 +5158,7 @@ export const particles: ParticleItem[] = [
   },
   {
     categories: categories("tabs"),
-    description: "Basic tabs",
+    description: "Segmented control built with tabs",
     files: [{ path: "particles/p-tabs-1.tsx", type: "registry:block" }],
     name: "p-tabs-1",
     registryDependencies: ["@coss/tabs"],
@@ -5231,6 +5279,22 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/tabs", "@coss/tooltip"],
     type: "registry:block",
   },
+  {
+    categories: categories("tabs"),
+    description: "Small segmented control built with tabs",
+    files: [{ path: "particles/p-tabs-14.tsx", type: "registry:block" }],
+    name: "p-tabs-14",
+    registryDependencies: ["@coss/tabs"],
+    type: "registry:block",
+  },
+  {
+    categories: categories("tabs"),
+    description: "Large segmented control built with tabs",
+    files: [{ path: "particles/p-tabs-15.tsx", type: "registry:block" }],
+    name: "p-tabs-15",
+    registryDependencies: ["@coss/tabs"],
+    type: "registry:block",
+  },
   {
     categories: categories("textarea"),
     description: "Basic textarea",
diff --git a/apps/ui/registry/registry-ui.ts b/apps/ui/registry/registry-ui.ts
index d144a68e9..17c9e01ef 100644
--- a/apps/ui/registry/registry-ui.ts
+++ b/apps/ui/registry/registry-ui.ts
@@ -701,6 +701,7 @@ export const ui: Registry["items"] = [
       },
     ],
     name: "tabs",
+    registryDependencies: ["@coss/segmented-control"],
     type: "registry:ui",
   },
   {
diff --git a/apps/ui/skills/coss-particles/SKILL.md b/apps/ui/skills/coss-particles/SKILL.md
index 7f2b073cc..2978e5367 100644
--- a/apps/ui/skills/coss-particles/SKILL.md
+++ b/apps/ui/skills/coss-particles/SKILL.md
@@ -37,7 +37,7 @@ Run the generator script from the coss repo root:
 node apps/ui/scripts/generate-particle-index.cjs
 ```
 
-Total: **500 particles** across **53 component types**
+Total: **508 particles** across **54 component types**
 
 ## Component types
 
@@ -71,13 +71,14 @@ Total: **500 particles** across **53 component types**
 - [kbd](#kbd) (1)
 - [menu](#menu) (9)
 - [meter](#meter) (4)
+- [navigation](#navigation) (3)
 - [number-field](#number-field) (11)
 - [otp-field](#otp-field) (9)
 - [pagination](#pagination) (3)
 - [popover](#popover) (4)
 - [preview-card](#preview-card) (1)
 - [progress](#progress) (3)
-- [radio-group](#radio-group) (6)
+- [radio-group](#radio-group) (9)
 - [scroll-area](#scroll-area) (5)
 - [select](#select) (23)
 - [separator](#separator) (1)
@@ -87,7 +88,7 @@ Total: **500 particles** across **53 component types**
 - [spinner](#spinner) (1)
 - [switch](#switch) (9)
 - [table](#table) (8)
-- [tabs](#tabs) (13)
+- [tabs](#tabs) (15)
 - [textarea](#textarea) (15)
 - [toast](#toast) (13)
 - [toggle](#toggle) (8)
@@ -512,6 +513,12 @@ Total: **500 particles** across **53 component types**
 - Meter with formatted value | [JSON](https://coss.com/ui/r/p-meter-3.json)
 - Meter with range | [JSON](https://coss.com/ui/r/p-meter-4.json)
 
+### navigation
+
+- Segmented navigation built with links | [JSON](https://coss.com/ui/r/p-navigation-1.json)
+- Small segmented navigation built with links | [JSON](https://coss.com/ui/r/p-navigation-2.json)
+- Large segmented navigation built with links | [JSON](https://coss.com/ui/r/p-navigation-3.json)
+
 ### number-field
 
 - Basic number field | [JSON](https://coss.com/ui/r/p-number-field-1.json)
@@ -569,6 +576,9 @@ Total: **500 particles** across **53 component types**
 - Radio group card | [JSON](https://coss.com/ui/r/p-radio-group-4.json)
 - Radio group in form | [JSON](https://coss.com/ui/r/p-radio-group-5.json)
 - Theme selector with image cards | [JSON](https://coss.com/ui/r/p-radio-group-6.json)
+- Small segmented control built with a radio group | [JSON](https://coss.com/ui/r/p-radio-group-7.json)
+- Segmented control built with a radio group | [JSON](https://coss.com/ui/r/p-radio-group-8.json)
+- Large segmented control built with a radio group | [JSON](https://coss.com/ui/r/p-radio-group-9.json)
 
 ### scroll-area
 
@@ -674,7 +684,7 @@ Total: **500 particles** across **53 component types**
 
 ### tabs
 
-- Basic tabs | [JSON](https://coss.com/ui/r/p-tabs-1.json)
+- Segmented control built with tabs | [JSON](https://coss.com/ui/r/p-tabs-1.json)
 - Tabs with underline | [JSON](https://coss.com/ui/r/p-tabs-2.json)
 - Vertical tabs | [JSON](https://coss.com/ui/r/p-tabs-3.json)
 - Vertical tabs with underline | [JSON](https://coss.com/ui/r/p-tabs-4.json)
@@ -687,6 +697,8 @@ Total: **500 particles** across **53 component types**
 - Vertical tabs with underline and icon before name | [JSON](https://coss.com/ui/r/p-tabs-11.json)
 - Tabs with icon only and count badge | [JSON](https://coss.com/ui/r/p-tabs-12.json)
 - Tabs with icon only and grouped tooltips | [JSON](https://coss.com/ui/r/p-tabs-13.json)
+- Small segmented control built with tabs | [JSON](https://coss.com/ui/r/p-tabs-14.json)
+- Large segmented control built with tabs | [JSON](https://coss.com/ui/r/p-tabs-15.json)
 
 ### textarea
 
diff --git a/apps/ui/skills/coss/SKILL.md b/apps/ui/skills/coss/SKILL.md
index 8cbda0751..c17ca3053 100644
--- a/apps/ui/skills/coss/SKILL.md
+++ b/apps/ui/skills/coss/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: coss
-description: Helps implement coss UI components correctly. Use when building UIs with coss primitives (buttons, dialogs, selects, forms, menus, tabs, inputs, toasts, etc.), migrating from shadcn/Radix to coss/Base UI, composing trigger-based overlays, or troubleshooting coss component behavior. Covers imports, accessibility, Tailwind styling, and common pitfalls.
+description: Helps implement coss UI components correctly. Use when building UIs with coss primitives and patterns (buttons, dialogs, selects, forms, menus, tabs, segmented controls, inputs, toasts, etc.), migrating from shadcn/Radix to coss/Base UI, composing trigger-based overlays, or troubleshooting coss component behavior. Covers imports, accessibility, Tailwind styling, and common pitfalls.
 compatibility: Requires Tailwind CSS v4 and @base-ui/react. Designed for React projects using the coss component registry.
 license: MIT
 metadata:
@@ -60,6 +60,7 @@ Rule references (read on demand when the task touches these areas):
 - `./references/rules/forms.md` — Field composition, validation, input patterns
 - `./references/rules/composition.md` — Trigger/popup hierarchies, grouped controls
 - `./references/rules/migration.md` — shadcn/Radix to coss/Base UI migration patterns
+- `./references/segmented-control.md` — choose Radio Group, links, Toggle Group, or Tabs before applying segmented-control styling
 - `./references/portal-props.md` — optional `portalProps` on composed popups and toast providers (`keepMounted`, `container`, which surfaces support it)
 
 ## Component discovery
@@ -115,4 +116,3 @@ Before returning code:
 - composition structure is valid for selected primitive(s)
 - accessibility and explicit control types (`button`, `input`, etc.) are present
 - migration-sensitive flows are verified (type/lint, keyboard/a11y behavior, and SSR-sensitive primitives like Select/Command)
-
diff --git a/apps/ui/skills/coss/references/component-registry.md b/apps/ui/skills/coss/references/component-registry.md
index 1a3a2b291..9fd564bce 100644
--- a/apps/ui/skills/coss/references/component-registry.md
+++ b/apps/ui/skills/coss/references/component-registry.md
@@ -4,6 +4,9 @@ Use this file to quickly identify the right coss primitive for a UI task. Each e
 
 For optional **`portalProps`** on composed `*Popup` components and **toast** providers (Base UI portal forwarding), see `./references/portal-props.md`.
 
+## Cross-component patterns
+- **Segmented Control** — Shared visual treatment for radio choices, navigation links, exclusive toggles, or tabbed panels; choose semantics first. `./references/segmented-control.md`
+
 ## Overlays & Popups
 - **Dialog** — Centered modal requiring user focus. `./references/primitives/dialog.md`
 - **AlertDialog** — Destructive/critical confirmation modal. `./references/primitives/alert-dialog.md`
diff --git a/apps/ui/skills/coss/references/primitives/radio-group.md b/apps/ui/skills/coss/references/primitives/radio-group.md
index d7ff91391..001a06158 100644
--- a/apps/ui/skills/coss/references/primitives/radio-group.md
+++ b/apps/ui/skills/coss/references/primitives/radio-group.md
@@ -10,6 +10,7 @@
 - If multiple options can be selected -> use CheckboxGroup instead.
 - If options are many and need search/filtering -> use Select or Combobox instead.
 - If the choices are binary (on/off) -> use Switch or Checkbox instead.
+- If each option reveals a content panel rather than selecting a value -> use Tabs instead.
 
 ## Install
 
@@ -85,7 +86,7 @@ const [value, setValue] = useState("default")
 
 ### More examples
 
-See `p-radio-group-1` through `p-radio-group-5` for disabled, description, card-style, and form integration patterns.
+See `p-radio-group-1` through `p-radio-group-5` for disabled, description, card-style, and form integration patterns. For a segmented presentation, use `p-radio-group-7`, `p-radio-group-8`, or `p-radio-group-9`; read `../segmented-control.md` before choosing the underlying primitive.
 
 ## Common pitfalls
 
@@ -99,4 +100,5 @@ See `p-radio-group-1` through `p-radio-group-5` for disabled, description, card-
 - with description: `p-radio-group-3`
 - card style: `p-radio-group-4`
 - form integration: `p-radio-group-5`
+- segmented, small/default/large: `p-radio-group-7`, `p-radio-group-8`, `p-radio-group-9`
 - form composition references: `p-form-1`, `p-form-2`, `p-input-group-24`
diff --git a/apps/ui/skills/coss/references/primitives/tabs.md b/apps/ui/skills/coss/references/primitives/tabs.md
index 769e700e1..350a852c7 100644
--- a/apps/ui/skills/coss/references/primitives/tabs.md
+++ b/apps/ui/skills/coss/references/primitives/tabs.md
@@ -14,9 +14,11 @@ npx shadcn@latest add @coss/tabs
 Manual deps from docs:
 
 ```bash
-# No extra runtime dependency required for this primitive.
+npm install @base-ui/react class-variance-authority
 ```
 
+The CLI installs the shared `@coss/segmented-control` registry dependency automatically. For a manual installation, also copy `lib/segmented-control.ts` before copying the Tabs component.
+
 ## Canonical imports
 
 ```tsx
@@ -57,11 +59,20 @@ const [value, setValue] = useState("tab-1")
 </Tabs>
 ```
 
+Sizes are set on `TabsList` and inherited by its tabs. An individual `TabsTab` can override the inherited size.
+
+```tsx
+<TabsList size="sm">
+  <TabsTab value="tab-1">Tab 1</TabsTab>
+  <TabsTab size="lg" value="tab-2">Tab 2</TabsTab>
+</TabsList>
+```
+
 Underline variant:
 
 ```tsx
-<Tabs defaultValue="tab-1" variant="underline">
-  <TabsList>
+<Tabs defaultValue="tab-1">
+  <TabsList variant="underline">
     <TabsTab value="tab-1">Tab 1</TabsTab>
     <TabsTab value="tab-2">Tab 2</TabsTab>
   </TabsList>
@@ -79,8 +90,9 @@ Underline variant:
 
 - Mismatching `TabsTab value` and `TabsPanel value` pairs.
 - Using tabs for workflows that require route-level navigation instead.
+- Using tabs for a form value or reversible filter just because it looks like a segmented control. Read `../segmented-control.md` and choose semantics first.
 - Mounting expensive panel content without considering visibility/performance.
 
 ## Useful particle references
 
-See `p-tabs-1` through `p-tabs-4` for variants and orientations. Related: `p-toolbar-1`, `p-card-1`.
+See `p-tabs-1` through `p-tabs-4` for variants and orientations, plus `p-tabs-14` and `p-tabs-15` for small and large segmented Tabs. Related: `p-toolbar-1`, `p-card-1`.
diff --git a/apps/ui/skills/coss/references/primitives/toggle-group.md b/apps/ui/skills/coss/references/primitives/toggle-group.md
index 45d6ff556..66212ad55 100644
--- a/apps/ui/skills/coss/references/primitives/toggle-group.md
+++ b/apps/ui/skills/coss/references/primitives/toggle-group.md
@@ -53,7 +53,7 @@ Toggle group with icon buttons:
 </ToggleGroup>
 ```
 
-Multiple selection (default). For single selection use `type="single"`.
+Toggle Group is exclusive by default and may be cleared. Add `multiple` only when more than one item may be pressed.
 
 Controlled toggle group:
 
@@ -68,7 +68,7 @@ const [value, setValue] = useState(["bold"])
 
 ### More examples
 
-See `p-toggle-group-1` through `p-toggle-group-9` for sizes, outline, vertical, disabled, multiple, and tooltip patterns.
+See `p-toggle-group-1` through `p-toggle-group-9` for sizes, outline, vertical, disabled, multiple, and tooltip patterns. Read `../segmented-control.md` before applying segmented styling to a custom reversible mode.
 
 ## Common pitfalls
 
diff --git a/apps/ui/skills/coss/references/segmented-control.md b/apps/ui/skills/coss/references/segmented-control.md
new file mode 100644
index 000000000..47a3cee3a
--- /dev/null
+++ b/apps/ui/skills/coss/references/segmented-control.md
@@ -0,0 +1,60 @@
+# coss Segmented Control Pattern
+
+A segmented control is a shared visual treatment, not a standalone behavior. Choose the underlying primitive from the interaction before applying the styling.
+
+## Choose the behavior
+
+| Intent | Use | State model |
+| --- | --- | --- |
+| Choose one value, especially in a form | Radio Group | Exactly one mutually exclusive value |
+| Navigate to another URL or route | Links | Browser navigation with `aria-current="page"` on the current link |
+| Apply an exclusive filter or reversible mode | Toggle Group | At most one pressed item by default; the current item may be cleared |
+| Switch between associated content panels | Tabs | Each tab controls a matching panel |
+
+Do not use Tabs for navigation links, form values, or filters merely because the result should look segmented. Do not use Toggle Group when one value must always remain selected; use Radio Group instead.
+
+## Install a particle
+
+| Implementation | Small | Default | Large |
+| --- | --- | --- | --- |
+| Radio Group | `@coss/p-radio-group-7` | `@coss/p-radio-group-8` | `@coss/p-radio-group-9` |
+| Navigation links | `@coss/p-navigation-2` | `@coss/p-navigation-1` | `@coss/p-navigation-3` |
+
+The CLI installs the relevant primitive and the shared `@coss/segmented-control` styling library automatically.
+
+COSS does not publish a Toggle Group segmented particle. Use the shared styling directly only when a reversible mode genuinely allows no active option.
+
+## Custom composition
+
+Install the styling library directly when none of the particles matches:
+
+```bash
+npx shadcn@latest add @coss/segmented-control
+```
+
+```tsx
+import {
+  segmentedControlItemVariants,
+  segmentedControlRootClassName,
+} from "@/lib/segmented-control"
+```
+
+Apply `segmentedControlRootClassName` to the group surface. Generate one item class with the matching state selector:
+
+```tsx
+const itemClassName = segmentedControlItemVariants({
+  size: "default",
+  state: "checked",
+})
+```
+
+- `state: "checked"` for Radio Group
+- `state: "current"` for navigation links
+- `state: "pressed"` for Toggle Group
+- `size: "sm" | "default" | "lg"`
+
+Use the exported Radio Group primitives for a custom segmented radio presentation so the native radio indicator is not rendered. Keep a default or controlled value when the interface requires one option to remain selected.
+
+Tabs do not use the shared state recipe because they retain their animated indicator. They import the shared size map: set `size="sm" | "default" | "lg"` on `TabsList`, and use a `TabsTab` size only as an item-level override.
+
+Reuse the shared root and item recipes instead of copying their classes into a new segmented particle. This keeps Tabs and the radio, navigation, and toggle implementations optically aligned.
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index 136eb35a0..c3ebe2260 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -1,10 +1,18 @@
 "use client";
 
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import {
+  type SegmentedControlSize,
+  segmentedControlItemSizeClassNames,
+} from "@coss/ui/lib/segmented-control";
 import { cn } from "@coss/ui/lib/utils";
-import type React from "react";
+import * as React from "react";
 
-export type TabsVariant = "default" | "underline";
+type TabsVariant = "default" | "underline";
+type TabsSize = SegmentedControlSize;
+
+const TabsListContext: React.Context<TabsSize> =
+  React.createContext<TabsSize>("default");
 
 export function Tabs({
   className,
@@ -24,10 +32,12 @@ export function Tabs({
 
 export function TabsList({
   variant = "default",
+  size = "default",
   className,
   children,
   ...props
 }: TabsPrimitive.List.Props & {
+  size?: TabsSize;
   variant?: TabsVariant;
 }): React.ReactElement {
   return (
@@ -40,10 +50,13 @@ export function TabsList({
           : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent",
         className,
       )}
+      data-size={size}
       data-slot="tabs-list"
       {...props}
     >
-      {children}
+      <TabsListContext.Provider value={size}>
+        {children}
+      </TabsListContext.Provider>
       <TabsPrimitive.Indicator
         className={cn(
           "absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out",
@@ -59,14 +72,22 @@ export function TabsList({
 
 export function TabsTab({
   className,
+  size,
   ...props
-}: TabsPrimitive.Tab.Props): React.ReactElement {
+}: TabsPrimitive.Tab.Props & {
+  size?: TabsSize;
+}): React.ReactElement {
+  const contextSize: TabsSize = React.useContext(TabsListContext);
+  const resolvedSize: TabsSize = size ?? contextSize;
+
   return (
     <TabsPrimitive.Tab
       className={cn(
-        "relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
+        "relative flex shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
+        segmentedControlItemSizeClassNames[resolvedSize],
         className,
       )}
+      data-size={resolvedSize}
       data-slot="tabs-tab"
       {...props}
     />
@@ -86,4 +107,10 @@ export function TabsPanel({
   );
 }
 
-export { TabsPrimitive, TabsTab as TabsTrigger, TabsPanel as TabsContent };
+export {
+  TabsPrimitive,
+  TabsTab as TabsTrigger,
+  TabsPanel as TabsContent,
+  type TabsSize,
+  type TabsVariant,
+};
diff --git a/packages/ui/src/lib/segmented-control.ts b/packages/ui/src/lib/segmented-control.ts
new file mode 100644
index 000000000..bcef88500
--- /dev/null
+++ b/packages/ui/src/lib/segmented-control.ts
@@ -0,0 +1,35 @@
+import { cva } from "class-variance-authority";
+
+export type SegmentedControlSize = "default" | "lg" | "sm";
+
+export const segmentedControlItemSizeClassNames: Record<
+  SegmentedControlSize,
+  string
+> = {
+  default: "h-8.5 px-[calc(--spacing(2.5)-1px)] sm:h-7.5",
+  lg: "h-9.5 px-[calc(--spacing(3)-1px)] sm:h-8.5",
+  sm: "h-7.5 px-[calc(--spacing(2)-1px)] sm:h-6.5",
+};
+
+export const segmentedControlRootClassName =
+  "relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5";
+
+export const segmentedControlItemVariants = cva(
+  "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm",
+  {
+    defaultVariants: {
+      size: "default",
+    },
+    variants: {
+      size: segmentedControlItemSizeClassNames,
+      state: {
+        checked:
+          "data-checked:bg-background data-checked:text-foreground data-checked:shadow-sm/5 dark:data-checked:bg-input",
+        current:
+          "aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input",
+        pressed:
+          "data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm/5 dark:data-pressed:bg-input",
+      },
+    },
+  },
+);

From f27d66843e8b9ebfe9ec50a697d01a9c1e1a7020 Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Wed, 19 Aug 2026 09:35:26 +0200
Subject: [PATCH 41/49] feat(ui): share segmented item layout styles with Tabs
 (#837)

Extract icon gap, size, and opacity into segmentedControlItemLayoutClassName so radio, navigation, and Tabs stay optically aligned.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/ui/content/docs/(root)/changelog.mdx             | 8 ++++++++
 apps/ui/content/docs/components/segmented-control.mdx | 5 +++--
 apps/ui/public/r/segmented-control.json               | 2 +-
 apps/ui/public/r/tabs.json                            | 2 +-
 apps/ui/registry/default/lib/segmented-control.ts     | 8 +++++++-
 apps/ui/registry/default/ui/tabs.tsx                  | 4 +++-
 apps/ui/skills/coss/references/segmented-control.md   | 4 ++--
 packages/ui/src/components/tabs.tsx                   | 4 +++-
 packages/ui/src/lib/segmented-control.ts              | 8 +++++++-
 9 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/apps/ui/content/docs/(root)/changelog.mdx b/apps/ui/content/docs/(root)/changelog.mdx
index bd2c89900..72d6d82c8 100644
--- a/apps/ui/content/docs/(root)/changelog.mdx
+++ b/apps/ui/content/docs/(root)/changelog.mdx
@@ -3,6 +3,14 @@ title: Changelog
 description: Breaking changes, migration guides, and notable updates.
 ---
 
+## August 19, 2026
+
+### Shared segmented control item layout styles
+
+**`segmented-control`** now exports **`segmentedControlItemLayoutClassName`** for the shared icon gap, size, and opacity treatment. **`segmentedControlItemVariants`** includes this class, and **`TabsTab`** uses it instead of inlining the same utilities.
+
+Existing Tabs and segmented-control usage does not need JSX changes. If you maintain a local copy of the library or Tabs, merge the new export so icons stay optically aligned with Button.
+
 ## August 17, 2026
 
 ### Tabs sizing and segmented control styles
diff --git a/apps/ui/content/docs/components/segmented-control.mdx b/apps/ui/content/docs/components/segmented-control.mdx
index 9ccbf2113..0d3905d51 100644
--- a/apps/ui/content/docs/components/segmented-control.mdx
+++ b/apps/ui/content/docs/components/segmented-control.mdx
@@ -45,10 +45,11 @@ For a custom composition, install the styling library directly:
 npx shadcn@latest add @coss/segmented-control
 ```
 
-The library exports a root class and an item recipe:
+The library exports a root class, an item recipe, and a shared item layout class for icons:
 
 ```tsx
 import {
+  segmentedControlItemLayoutClassName,
   segmentedControlItemVariants,
   segmentedControlRootClassName,
 } from "@/lib/segmented-control"
@@ -66,7 +67,7 @@ const itemClassName = segmentedControlItemVariants({
 | `size` | `"sm" \| "default" \| "lg"` | Controls item height and horizontal padding. |
 | `state` | `"checked" \| "current" \| "pressed"` | Selects the state attribute used by the underlying element. |
 
-Use `checked` with Radio Group, `current` with navigation links, and `pressed` with Toggle Group. Tabs retain their own animated indicator and do not use the shared state recipe.
+Use `checked` with Radio Group, `current` with navigation links, and `pressed` with Toggle Group. Tabs retain their own animated indicator and do not use the shared state recipe. They reuse `segmentedControlItemLayoutClassName` so icons match the other segmented implementations.
 
 At the outside edges, the item padding and the surface's `p-0.5` inset combine to match the horizontal padding of the corresponding Button size. The outer segmented surface is slightly taller than that Button to optically balance its inset selected item when the controls appear next to each other.
 
diff --git a/apps/ui/public/r/segmented-control.json b/apps/ui/public/r/segmented-control.json
index 7e7e776ac..a1f38b4b5 100644
--- a/apps/ui/public/r/segmented-control.json
+++ b/apps/ui/public/r/segmented-control.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/lib/segmented-control.ts",
-      "content": "import { cva } from \"class-variance-authority\";\n\nexport type SegmentedControlSize = \"default\" | \"lg\" | \"sm\";\n\nexport const segmentedControlItemSizeClassNames: Record<\n  SegmentedControlSize,\n  string\n> = {\n  default: \"h-8.5 px-[calc(--spacing(2.5)-1px)] sm:h-7.5\",\n  lg: \"h-9.5 px-[calc(--spacing(3)-1px)] sm:h-8.5\",\n  sm: \"h-7.5 px-[calc(--spacing(2)-1px)] sm:h-6.5\",\n};\n\nexport const segmentedControlRootClassName =\n  \"relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5\";\n\nexport const segmentedControlItemVariants = cva(\n  \"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm\",\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: segmentedControlItemSizeClassNames,\n      state: {\n        checked:\n          \"data-checked:bg-background data-checked:text-foreground data-checked:shadow-sm/5 dark:data-checked:bg-input\",\n        current:\n          \"aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input\",\n        pressed:\n          \"data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm/5 dark:data-pressed:bg-input\",\n      },\n    },\n  },\n);\n",
+      "content": "import { cva } from \"class-variance-authority\";\n\nexport type SegmentedControlSize = \"default\" | \"lg\" | \"sm\";\n\nexport const segmentedControlItemSizeClassNames: Record<\n  SegmentedControlSize,\n  string\n> = {\n  default: \"h-8.5 px-[calc(--spacing(2.5)-1px)] sm:h-7.5\",\n  lg: \"h-9.5 px-[calc(--spacing(3)-1px)] sm:h-8.5\",\n  sm: \"h-7.5 px-[calc(--spacing(2)-1px)] sm:h-6.5\",\n};\n\nexport const segmentedControlRootClassName =\n  \"relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5\";\n\nexport const segmentedControlItemLayoutClassName =\n  \"gap-1.5 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\";\n\nexport const segmentedControlItemVariants = cva(\n  [\n    \"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm\",\n    segmentedControlItemLayoutClassName,\n  ],\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: segmentedControlItemSizeClassNames,\n      state: {\n        checked:\n          \"data-checked:bg-background data-checked:text-foreground data-checked:shadow-sm/5 dark:data-checked:bg-input\",\n        current:\n          \"aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input\",\n        pressed:\n          \"data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm/5 dark:data-pressed:bg-input\",\n      },\n    },\n  },\n);\n",
       "type": "registry:lib"
     }
   ],
diff --git a/apps/ui/public/r/tabs.json b/apps/ui/public/r/tabs.json
index 2628dffdf..68df32115 100644
--- a/apps/ui/public/r/tabs.json
+++ b/apps/ui/public/r/tabs.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/ui/tabs.tsx",
-      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport * as React from \"react\";\nimport {\n  type SegmentedControlSize,\n  segmentedControlItemSizeClassNames,\n} from \"@/registry/default/lib/segmented-control\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\ntype TabsVariant = \"default\" | \"underline\";\ntype TabsSize = SegmentedControlSize;\n\nconst TabsListContext: React.Context<TabsSize> =\n  React.createContext<TabsSize>(\"default\");\n\nexport function Tabs({\n  className,\n  ...props\n}: TabsPrimitive.Root.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Root\n      className={cn(\n        \"flex flex-col gap-2 data-[orientation=vertical]:flex-row\",\n        className,\n      )}\n      data-slot=\"tabs\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsList({\n  variant = \"default\",\n  size = \"default\",\n  className,\n  children,\n  ...props\n}: TabsPrimitive.List.Props & {\n  size?: TabsSize;\n  variant?: TabsVariant;\n}): React.ReactElement {\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        \"relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground\",\n        \"data-[orientation=vertical]:flex-col\",\n        variant === \"default\"\n          ? \"rounded-lg bg-muted p-0.5 text-muted-foreground/72\"\n          : \"data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent\",\n        className,\n      )}\n      data-size={size}\n      data-slot=\"tabs-list\"\n      {...props}\n    >\n      <TabsListContext.Provider value={size}>\n        {children}\n      </TabsListContext.Provider>\n      <TabsPrimitive.Indicator\n        className={cn(\n          \"absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out\",\n          variant === \"underline\"\n            ? \"z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px data-[orientation=horizontal]:translate-y-px\"\n            : \"-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input\",\n        )}\n        data-slot=\"tab-indicator\"\n      />\n    </TabsPrimitive.List>\n  );\n}\n\nexport function TabsTab({\n  className,\n  size,\n  ...props\n}: TabsPrimitive.Tab.Props & {\n  size?: TabsSize;\n}): React.ReactElement {\n  const contextSize: TabsSize = React.useContext(TabsListContext);\n  const resolvedSize: TabsSize = size ?? contextSize;\n\n  return (\n    <TabsPrimitive.Tab\n      className={cn(\n        \"relative flex shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        segmentedControlItemSizeClassNames[resolvedSize],\n        className,\n      )}\n      data-size={resolvedSize}\n      data-slot=\"tabs-tab\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsPanel({\n  className,\n  ...props\n}: TabsPrimitive.Panel.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Panel\n      className={cn(\"flex-1 outline-none\", className)}\n      data-slot=\"tabs-content\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  TabsPrimitive,\n  TabsTab as TabsTrigger,\n  TabsPanel as TabsContent,\n  type TabsSize,\n  type TabsVariant,\n};\n",
+      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport * as React from \"react\";\nimport {\n  type SegmentedControlSize,\n  segmentedControlItemLayoutClassName,\n  segmentedControlItemSizeClassNames,\n} from \"@/registry/default/lib/segmented-control\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\ntype TabsVariant = \"default\" | \"underline\";\ntype TabsSize = SegmentedControlSize;\n\nconst TabsListContext: React.Context<TabsSize> =\n  React.createContext<TabsSize>(\"default\");\n\nexport function Tabs({\n  className,\n  ...props\n}: TabsPrimitive.Root.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Root\n      className={cn(\n        \"flex flex-col gap-2 data-[orientation=vertical]:flex-row\",\n        className,\n      )}\n      data-slot=\"tabs\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsList({\n  variant = \"default\",\n  size = \"default\",\n  className,\n  children,\n  ...props\n}: TabsPrimitive.List.Props & {\n  size?: TabsSize;\n  variant?: TabsVariant;\n}): React.ReactElement {\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        \"relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground\",\n        \"data-[orientation=vertical]:flex-col\",\n        variant === \"default\"\n          ? \"rounded-lg bg-muted p-0.5 text-muted-foreground/72\"\n          : \"data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent\",\n        className,\n      )}\n      data-size={size}\n      data-slot=\"tabs-list\"\n      {...props}\n    >\n      <TabsListContext.Provider value={size}>\n        {children}\n      </TabsListContext.Provider>\n      <TabsPrimitive.Indicator\n        className={cn(\n          \"absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out\",\n          variant === \"underline\"\n            ? \"z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px data-[orientation=horizontal]:translate-y-px\"\n            : \"-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input\",\n        )}\n        data-slot=\"tab-indicator\"\n      />\n    </TabsPrimitive.List>\n  );\n}\n\nexport function TabsTab({\n  className,\n  size,\n  ...props\n}: TabsPrimitive.Tab.Props & {\n  size?: TabsSize;\n}): React.ReactElement {\n  const contextSize: TabsSize = React.useContext(TabsListContext);\n  const resolvedSize: TabsSize = size ?? contextSize;\n\n  return (\n    <TabsPrimitive.Tab\n      className={cn(\n        \"relative flex shrink-0 grow cursor-pointer items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:text-sm\",\n        segmentedControlItemLayoutClassName,\n        segmentedControlItemSizeClassNames[resolvedSize],\n        className,\n      )}\n      data-size={resolvedSize}\n      data-slot=\"tabs-tab\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsPanel({\n  className,\n  ...props\n}: TabsPrimitive.Panel.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Panel\n      className={cn(\"flex-1 outline-none\", className)}\n      data-slot=\"tabs-content\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  TabsPrimitive,\n  TabsTab as TabsTrigger,\n  TabsPanel as TabsContent,\n  type TabsSize,\n  type TabsVariant,\n};\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/registry/default/lib/segmented-control.ts b/apps/ui/registry/default/lib/segmented-control.ts
index bcef88500..e70789c82 100644
--- a/apps/ui/registry/default/lib/segmented-control.ts
+++ b/apps/ui/registry/default/lib/segmented-control.ts
@@ -14,8 +14,14 @@ export const segmentedControlItemSizeClassNames: Record<
 export const segmentedControlRootClassName =
   "relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5";
 
+export const segmentedControlItemLayoutClassName =
+  "gap-1.5 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0";
+
 export const segmentedControlItemVariants = cva(
-  "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm",
+  [
+    "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm",
+    segmentedControlItemLayoutClassName,
+  ],
   {
     defaultVariants: {
       size: "default",
diff --git a/apps/ui/registry/default/ui/tabs.tsx b/apps/ui/registry/default/ui/tabs.tsx
index 17b83777e..e53f93c27 100644
--- a/apps/ui/registry/default/ui/tabs.tsx
+++ b/apps/ui/registry/default/ui/tabs.tsx
@@ -4,6 +4,7 @@ import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import * as React from "react";
 import {
   type SegmentedControlSize,
+  segmentedControlItemLayoutClassName,
   segmentedControlItemSizeClassNames,
 } from "@/registry/default/lib/segmented-control";
 import { cn } from "@/registry/default/lib/utils";
@@ -83,7 +84,8 @@ export function TabsTab({
   return (
     <TabsPrimitive.Tab
       className={cn(
-        "relative flex shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
+        "relative flex shrink-0 grow cursor-pointer items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:text-sm",
+        segmentedControlItemLayoutClassName,
         segmentedControlItemSizeClassNames[resolvedSize],
         className,
       )}
diff --git a/apps/ui/skills/coss/references/segmented-control.md b/apps/ui/skills/coss/references/segmented-control.md
index 47a3cee3a..e2ce8fc57 100644
--- a/apps/ui/skills/coss/references/segmented-control.md
+++ b/apps/ui/skills/coss/references/segmented-control.md
@@ -55,6 +55,6 @@ const itemClassName = segmentedControlItemVariants({
 
 Use the exported Radio Group primitives for a custom segmented radio presentation so the native radio indicator is not rendered. Keep a default or controlled value when the interface requires one option to remain selected.
 
-Tabs do not use the shared state recipe because they retain their animated indicator. They import the shared size map: set `size="sm" | "default" | "lg"` on `TabsList`, and use a `TabsTab` size only as an item-level override.
+Tabs do not use the shared state recipe because they retain their animated indicator. They import the shared size map and `segmentedControlItemLayoutClassName`: set `size="sm" | "default" | "lg"` on `TabsList`, and use a `TabsTab` size only as an item-level override.
 
-Reuse the shared root and item recipes instead of copying their classes into a new segmented particle. This keeps Tabs and the radio, navigation, and toggle implementations optically aligned.
+Reuse the shared root, item, and layout recipes instead of copying their classes into a new segmented particle. This keeps Tabs and the radio, navigation, and toggle implementations optically aligned.
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index c3ebe2260..1e0baefdb 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -3,6 +3,7 @@
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import {
   type SegmentedControlSize,
+  segmentedControlItemLayoutClassName,
   segmentedControlItemSizeClassNames,
 } from "@coss/ui/lib/segmented-control";
 import { cn } from "@coss/ui/lib/utils";
@@ -83,7 +84,8 @@ export function TabsTab({
   return (
     <TabsPrimitive.Tab
       className={cn(
-        "relative flex shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
+        "relative flex shrink-0 grow cursor-pointer items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:text-sm",
+        segmentedControlItemLayoutClassName,
         segmentedControlItemSizeClassNames[resolvedSize],
         className,
       )}
diff --git a/packages/ui/src/lib/segmented-control.ts b/packages/ui/src/lib/segmented-control.ts
index bcef88500..e70789c82 100644
--- a/packages/ui/src/lib/segmented-control.ts
+++ b/packages/ui/src/lib/segmented-control.ts
@@ -14,8 +14,14 @@ export const segmentedControlItemSizeClassNames: Record<
 export const segmentedControlRootClassName =
   "relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5";
 
+export const segmentedControlItemLayoutClassName =
+  "gap-1.5 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0";
+
 export const segmentedControlItemVariants = cva(
-  "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm",
+  [
+    "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm",
+    segmentedControlItemLayoutClassName,
+  ],
   {
     defaultVariants: {
       size: "default",

From 19620ae8cae81e30775f2cde03829326cb4916b2 Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Wed, 19 Aug 2026 09:38:32 +0200
Subject: [PATCH 42/49] docs(changelog): combine segmented control entries
 under August 19 (#838)

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/ui/content/docs/(root)/changelog.mdx | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/apps/ui/content/docs/(root)/changelog.mdx b/apps/ui/content/docs/(root)/changelog.mdx
index 72d6d82c8..650b81ec5 100644
--- a/apps/ui/content/docs/(root)/changelog.mdx
+++ b/apps/ui/content/docs/(root)/changelog.mdx
@@ -5,21 +5,13 @@ description: Breaking changes, migration guides, and notable updates.
 
 ## August 19, 2026
 
-### Shared segmented control item layout styles
-
-**`segmented-control`** now exports **`segmentedControlItemLayoutClassName`** for the shared icon gap, size, and opacity treatment. **`segmentedControlItemVariants`** includes this class, and **`TabsTab`** uses it instead of inlining the same utilities.
-
-Existing Tabs and segmented-control usage does not need JSX changes. If you maintain a local copy of the library or Tabs, merge the new export so icons stay optically aligned with Button.
-
-## August 17, 2026
-
 ### Tabs sizing and segmented control styles
 
 **`TabsList`** now supports a **`size`** prop with **`"sm"`**, **`"default"`**, and **`"lg"`** values. The size propagates to its **`TabsTab`** children, and an individual tab can override the inherited size when necessary.
 
 The default Tabs appearance now uses the same optical item sizing as the [Segmented Control](/ui/docs/components/segmented-control) pattern. The default rendered height is slightly smaller than before so the inset active indicator remains visually balanced beside a Button of the corresponding size.
 
-Tabs now imports its size map from the **`@coss/segmented-control`** registry library. **`@coss/tabs`** declares this as a registry dependency, so the shadcn CLI installs it automatically with a fresh installation or CLI-managed update.
+Tabs now imports its size map and **`segmentedControlItemLayoutClassName`** from the **`@coss/segmented-control`** registry library. That class covers the shared icon gap, size, and opacity treatment. **`segmentedControlItemVariants`** includes it, and **`TabsTab`** uses it instead of inlining the same utilities. **`@coss/tabs`** declares this as a registry dependency, so the shadcn CLI installs it automatically with a fresh installation or CLI-managed update.
 
 **Migration:**
 
@@ -35,12 +27,12 @@ If you update **`tabs.tsx`** manually, install the shared library first and then
 npx shadcn@latest add @coss/segmented-control
 ```
 
-After updating, remove local height or horizontal-padding utilities from **`TabsList`** and **`TabsTab`** only where they unintentionally override the new **`size`** API. Keep intentional product-specific overrides.
+After updating, remove local height or horizontal-padding utilities from **`TabsList`** and **`TabsTab`** only where they unintentionally override the new **`size`** API. Keep intentional product-specific overrides. If you maintain a local copy of the library or Tabs, also merge **`segmentedControlItemLayoutClassName`** so icons stay optically aligned with Button.
 
 **Agent migration prompt:**
 
 ```text
-Update the local coss Tabs component to the latest segmented-control sizing while preserving project-specific customizations. Install the shared registry dependency with `npx shadcn@latest add @coss/segmented-control`, then merge the latest @coss/tabs implementation. TabsList now accepts size="sm" | "default" | "lg" (default: "default") and propagates it to TabsTab; a TabsTab size prop overrides the inherited value. Replace the old hard-coded TabsTab height and horizontal-padding classes with segmentedControlItemSizeClassNames from the shared library. Existing Tabs JSX does not need a size prop. Audit local h-* and px-* overrides on TabsList/TabsTab and remove only those that unintentionally conflict with the new size API. Run formatting and typechecking, then visually verify default and underline Tabs in every size used by the app.
+Update the local coss Tabs component to the latest segmented-control sizing and item layout while preserving project-specific customizations. Install the shared registry dependency with `npx shadcn@latest add @coss/segmented-control`, then merge the latest @coss/tabs implementation. TabsList now accepts size="sm" | "default" | "lg" (default: "default") and propagates it to TabsTab; a TabsTab size prop overrides the inherited value. Replace the old hard-coded TabsTab height and horizontal-padding classes with segmentedControlItemSizeClassNames from the shared library, and replace inlined icon gap/size/opacity utilities with segmentedControlItemLayoutClassName. Existing Tabs JSX does not need a size prop. Audit local h-* and px-* overrides on TabsList/TabsTab and remove only those that unintentionally conflict with the new size API. Run formatting and typechecking, then visually verify default and underline Tabs in every size used by the app.
 ```
 
 ## July 31, 2026

From 0630457e68c18fce1be262ed0e7891e6a59ee8da Mon Sep 17 00:00:00 2001
From: Minjun Kim <48622976+funcpp@users.noreply.github.com>
Date: Sat, 29 Aug 2026 18:02:29 +0900
Subject: [PATCH 43/49] fix(scroll-area): correct transition-shadows typo so
 the focus ring animates (#834)

Tailwind's utility is singular, so `transition-shadows` compiles to nothing: the viewport gets no transition-property or duration and its focus-visible ring snaps in and out. `transition-shadow` sets `transition-property: box-shadow`, which is what `ring-2` and `ring-offset-1` render.

The registry JSON and the packages/ui copy carry the same change.

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 apps/ui/public/r/scroll-area.json           | 2 +-
 apps/ui/registry/default/ui/scroll-area.tsx | 2 +-
 packages/ui/src/components/scroll-area.tsx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/ui/public/r/scroll-area.json b/apps/ui/public/r/scroll-area.json
index 7c192dc34..3dd149fed 100644
--- a/apps/ui/public/r/scroll-area.json
+++ b/apps/ui/public/r/scroll-area.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/ui/scroll-area.tsx",
-      "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function ScrollArea({\n  className,\n  children,\n  scrollFade = false,\n  scrollbarGutter = false,\n  fill = false,\n  clampContentMinWidth = true,\n  overscrollContain = false,\n  ...props\n}: ScrollAreaPrimitive.Root.Props & {\n  scrollFade?: boolean;\n  scrollbarGutter?: boolean;\n  fill?: boolean;\n  clampContentMinWidth?: boolean;\n  overscrollContain?: boolean;\n}): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Root\n      className={cn(\"size-full min-h-0\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        className={cn(\n          \"h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n          overscrollContain &&\n            \"data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain\",\n          scrollFade &&\n            \"mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]\",\n          scrollbarGutter &&\n            \"data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5\",\n        )}\n        data-slot=\"scroll-area-viewport\"\n      >\n        <ScrollAreaPrimitive.Content\n          className={cn(fill && \"size-full\")}\n          data-slot=\"scroll-area-content\"\n          style={clampContentMinWidth ? { minWidth: 0 } : undefined}\n        >\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar orientation=\"vertical\" />\n      <ScrollBar orientation=\"horizontal\" />\n      <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nexport function ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      className={cn(\n        \"m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100\",\n        className,\n      )}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        className=\"relative flex-1 rounded-full bg-foreground/20\"\n        data-slot=\"scroll-area-thumb\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollAreaPrimitive };\n",
+      "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function ScrollArea({\n  className,\n  children,\n  scrollFade = false,\n  scrollbarGutter = false,\n  fill = false,\n  clampContentMinWidth = true,\n  overscrollContain = false,\n  ...props\n}: ScrollAreaPrimitive.Root.Props & {\n  scrollFade?: boolean;\n  scrollbarGutter?: boolean;\n  fill?: boolean;\n  clampContentMinWidth?: boolean;\n  overscrollContain?: boolean;\n}): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Root\n      className={cn(\"size-full min-h-0\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        className={cn(\n          \"h-full rounded-[inherit] outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n          overscrollContain &&\n            \"data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain\",\n          scrollFade &&\n            \"mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]\",\n          scrollbarGutter &&\n            \"data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5\",\n        )}\n        data-slot=\"scroll-area-viewport\"\n      >\n        <ScrollAreaPrimitive.Content\n          className={cn(fill && \"size-full\")}\n          data-slot=\"scroll-area-content\"\n          style={clampContentMinWidth ? { minWidth: 0 } : undefined}\n        >\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar orientation=\"vertical\" />\n      <ScrollBar orientation=\"horizontal\" />\n      <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nexport function ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      className={cn(\n        \"m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100\",\n        className,\n      )}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        className=\"relative flex-1 rounded-full bg-foreground/20\"\n        data-slot=\"scroll-area-thumb\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollAreaPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/registry/default/ui/scroll-area.tsx b/apps/ui/registry/default/ui/scroll-area.tsx
index 7a8783ed4..276a7e5b7 100644
--- a/apps/ui/registry/default/ui/scroll-area.tsx
+++ b/apps/ui/registry/default/ui/scroll-area.tsx
@@ -27,7 +27,7 @@ export function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         className={cn(
-          "h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          "h-full rounded-[inherit] outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
           overscrollContain &&
             "data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain",
           scrollFade &&
diff --git a/packages/ui/src/components/scroll-area.tsx b/packages/ui/src/components/scroll-area.tsx
index 4a70c88e2..914d036b8 100644
--- a/packages/ui/src/components/scroll-area.tsx
+++ b/packages/ui/src/components/scroll-area.tsx
@@ -27,7 +27,7 @@ export function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         className={cn(
-          "h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          "h-full rounded-[inherit] outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
           overscrollContain &&
             "data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain",
           scrollFade &&

From 4ebe375c04cc574dc2eaade2380b3cf9a48fceaa Mon Sep 17 00:00:00 2001
From: songkeys <songv587@gmail.com>
Date: Sat, 29 Aug 2026 17:14:33 +0800
Subject: [PATCH 44/49] fix(input-group): ignore portaled descendant events
 (#833)

---
 apps/ui/public/r/input-group.json             |   2 +-
 apps/ui/registry/default/ui/input-group.tsx   |   4 +-
 packages/ui/src/components/input-group.tsx    |   4 +-
 .../ui/test/components/input-group.test.tsx   | 116 ++++++++++++++++++
 4 files changed, 123 insertions(+), 3 deletions(-)
 create mode 100644 packages/ui/test/components/input-group.test.tsx

diff --git a/apps/ui/public/r/input-group.json b/apps/ui/public/r/input-group.json
index 321663787..19052ae10 100644
--- a/apps/ui/public/r/input-group.json
+++ b/apps/ui/public/r/input-group.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/ui/input-group.tsx",
-      "content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input, type InputProps } from \"@/registry/default/ui/input\";\nimport { Textarea, type TextareaProps } from \"@/registry/default/ui/textarea\";\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text select-none items-center justify-center gap-2 [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80\",\n  {\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n    variants: {\n      align: {\n        \"block-end\":\n          \"order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"inline-end\":\n          \"order-last pe-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]\",\n        \"inline-start\":\n          \"order-first ps-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]\",\n      },\n    },\n  },\n);\n\nexport function InputGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]\",\n        className,\n      )}\n      data-slot=\"input-group\"\n      role=\"group\"\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>): React.ReactElement {\n  return (\n    <div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      data-slot=\"input-group-addon\"\n      onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {\n        const target = e.target as HTMLElement;\n        const isInteractive = target.closest(\n          \"button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']\",\n        );\n        if (isInteractive) return;\n        e.preventDefault();\n        const parent = e.currentTarget.parentElement;\n        const input = parent?.querySelector<\n          HTMLInputElement | HTMLTextAreaElement\n        >(\"input, textarea\");\n        if (input && !parent?.querySelector(\"input:focus, textarea:focus\")) {\n          input.focus();\n        }\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupText({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 truncate text-muted-foreground in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupInput({\n  className,\n  ...props\n}: InputProps): React.ReactElement {\n  return <Input className={className} unstyled {...props} />;\n}\n\nexport function InputGroupTextarea({\n  className,\n  ...props\n}: TextareaProps): React.ReactElement {\n  return <Textarea className={className} unstyled {...props} />;\n}\n",
+      "content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input, type InputProps } from \"@/registry/default/ui/input\";\nimport { Textarea, type TextareaProps } from \"@/registry/default/ui/textarea\";\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text select-none items-center justify-center gap-2 [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80\",\n  {\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n    variants: {\n      align: {\n        \"block-end\":\n          \"order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"inline-end\":\n          \"order-last pe-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]\",\n        \"inline-start\":\n          \"order-first ps-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]\",\n      },\n    },\n  },\n);\n\nexport function InputGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]\",\n        className,\n      )}\n      data-slot=\"input-group\"\n      role=\"group\"\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>): React.ReactElement {\n  return (\n    <div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      data-slot=\"input-group-addon\"\n      onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {\n        const target = e.target as Element;\n        if (!e.currentTarget.contains(target)) return;\n\n        const isInteractive = target.closest(\n          \"button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']\",\n        );\n        if (isInteractive) return;\n        e.preventDefault();\n        const parent = e.currentTarget.parentElement;\n        const input = parent?.querySelector<\n          HTMLInputElement | HTMLTextAreaElement\n        >(\"input, textarea\");\n        if (input && !parent?.querySelector(\"input:focus, textarea:focus\")) {\n          input.focus();\n        }\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupText({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 truncate text-muted-foreground in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupInput({\n  className,\n  ...props\n}: InputProps): React.ReactElement {\n  return <Input className={className} unstyled {...props} />;\n}\n\nexport function InputGroupTextarea({\n  className,\n  ...props\n}: TextareaProps): React.ReactElement {\n  return <Textarea className={className} unstyled {...props} />;\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/registry/default/ui/input-group.tsx b/apps/ui/registry/default/ui/input-group.tsx
index a6b2c9da2..581557266 100644
--- a/apps/ui/registry/default/ui/input-group.tsx
+++ b/apps/ui/registry/default/ui/input-group.tsx
@@ -56,7 +56,9 @@ export function InputGroupAddon({
       data-align={align}
       data-slot="input-group-addon"
       onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {
-        const target = e.target as HTMLElement;
+        const target = e.target as Element;
+        if (!e.currentTarget.contains(target)) return;
+
         const isInteractive = target.closest(
           "button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']",
         );
diff --git a/packages/ui/src/components/input-group.tsx b/packages/ui/src/components/input-group.tsx
index e989bddb6..e8f52d1c2 100644
--- a/packages/ui/src/components/input-group.tsx
+++ b/packages/ui/src/components/input-group.tsx
@@ -56,7 +56,9 @@ export function InputGroupAddon({
       data-align={align}
       data-slot="input-group-addon"
       onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {
-        const target = e.target as HTMLElement;
+        const target = e.target as Element;
+        if (!e.currentTarget.contains(target)) return;
+
         const isInteractive = target.closest(
           "button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']",
         );
diff --git a/packages/ui/test/components/input-group.test.tsx b/packages/ui/test/components/input-group.test.tsx
new file mode 100644
index 000000000..2b979593d
--- /dev/null
+++ b/packages/ui/test/components/input-group.test.tsx
@@ -0,0 +1,116 @@
+import { describe, expect, mock, test } from "bun:test";
+import type * as React from "react";
+
+function componentMock() {
+  return null;
+}
+
+mock.module("@coss/ui/components/input", () => ({
+  Input: componentMock,
+}));
+
+mock.module("@coss/ui/components/textarea", () => ({
+  Textarea: componentMock,
+}));
+
+mock.module("@coss/ui/lib/utils", () => ({
+  cn: (...inputs: unknown[]) => inputs.filter(Boolean).join(" "),
+}));
+
+const { InputGroupAddon } = await import("../../src/components/input-group");
+
+type MouseDownHandler = NonNullable<React.ComponentProps<"div">["onMouseDown"]>;
+
+function getMouseDownHandler(): MouseDownHandler {
+  const element = InputGroupAddon({});
+  const props = element.props as React.ComponentProps<"div">;
+
+  if (!props.onMouseDown) {
+    throw new Error("InputGroupAddon does not have an onMouseDown handler");
+  }
+
+  return props.onMouseDown;
+}
+
+function createMouseDownEvent({
+  contains,
+  interactive = false,
+}: {
+  contains: boolean;
+  interactive?: boolean;
+}) {
+  let focused = false;
+  let prevented = false;
+
+  const target = {
+    closest: () => (interactive ? {} : null),
+  } as unknown as Element;
+  const input = {
+    focus: () => {
+      focused = true;
+    },
+  };
+  const parentElement = {
+    querySelector: (selector: string) => {
+      if (selector === "input, textarea") return input;
+      if (selector === "input:focus, textarea:focus") return null;
+      return null;
+    },
+  };
+  const currentTarget = {
+    contains: () => contains,
+    parentElement,
+  } as unknown as HTMLDivElement;
+  const event = {
+    currentTarget,
+    preventDefault: () => {
+      prevented = true;
+    },
+    target,
+  } as unknown as React.MouseEvent<HTMLDivElement>;
+
+  return {
+    event,
+    wasFocused: () => focused,
+    wasPrevented: () => prevented,
+  };
+}
+
+describe("InputGroupAddon", () => {
+  test("focuses the input for non-interactive content inside the addon", () => {
+    const handler = getMouseDownHandler();
+    const { event, wasFocused, wasPrevented } = createMouseDownEvent({
+      contains: true,
+    });
+
+    handler(event);
+
+    expect(wasPrevented()).toBe(true);
+    expect(wasFocused()).toBe(true);
+  });
+
+  test("does not focus the input for interactive content inside the addon", () => {
+    const handler = getMouseDownHandler();
+    const { event, wasFocused, wasPrevented } = createMouseDownEvent({
+      contains: true,
+      interactive: true,
+    });
+
+    handler(event);
+
+    expect(wasPrevented()).toBe(false);
+    expect(wasFocused()).toBe(false);
+  });
+
+  test("ignores events from portaled descendants outside the addon", () => {
+    const handler = getMouseDownHandler();
+    const { event, wasFocused, wasPrevented } = createMouseDownEvent({
+      contains: false,
+    });
+
+    handler(event);
+
+    expect(wasPrevented()).toBe(false);
+    expect(wasFocused()).toBe(false);
+  });
+});

From 758e6535ae0143dce8c85f12e33eebf60b6b2ecb Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Mon, 31 Aug 2026 10:53:47 +0200
Subject: [PATCH 45/49] fix(ui): contain long item labels (#842)

---
 apps/ui/public/r/combobox.json           |  2 +-
 apps/ui/public/r/drawer.json             |  2 +-
 apps/ui/public/r/select.json             |  2 +-
 apps/ui/registry/default/ui/combobox.tsx |  4 ++--
 apps/ui/registry/default/ui/drawer.tsx   | 12 ++++++------
 apps/ui/registry/default/ui/select.tsx   |  4 ++--
 packages/ui/src/components/combobox.tsx  |  4 ++--
 packages/ui/src/components/drawer.tsx    | 12 ++++++------
 packages/ui/src/components/select.tsx    |  4 ++--
 9 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/apps/ui/public/r/combobox.json b/apps/ui/public/r/combobox.json
index f4e84ea56..bb26dd71e 100644
--- a/apps/ui/public/r/combobox.json
+++ b/apps/ui/public/r/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/combobox.tsx",
-      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const ComboboxContext: React.Context<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}> = React.createContext<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}>({\n  chipsRef: null,\n  multiple: false,\n});\n\nexport function Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>,\n): React.ReactElement {\n  const chipsRef = React.useRef<Element | null>(null);\n  return (\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxContext.Provider>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  size,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"min-w-12 flex-1 text-base text-foreground outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\",\n        sizeValue === \"sm\" ? \"ps-1.5\" : \"ps-2\",\n        className,\n      )}\n      data-size={typeof sizeValue === \"string\" ? sizeValue : undefined}\n      data-slot=\"combobox-chips-input\"\n      size={typeof sizeValue === \"number\" ? sizeValue : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxInput({\n  className,\n  showTrigger = true,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\n  clearProps?: ComboboxPrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"combobox-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <ComboboxPrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\"\n            : \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"combobox-input\"\n        render={\n          <Input\n            className=\"has-disabled:opacity-100\"\n            nativeInput\n            size={sizeValue}\n          />\n        }\n        {...props}\n      />\n      {showTrigger && (\n        <ComboboxTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <ComboboxPrimitive.Icon data-slot=\"combobox-icon\">\n            <ChevronsUpDownIcon />\n          </ComboboxPrimitive.Icon>\n        </ComboboxTrigger>\n      )}\n      {showClear && (\n        <ComboboxClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </ComboboxClear>\n      )}\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={className}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport function ComboboxPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor: anchorProp,\n  portalProps,\n  ...props\n}: ComboboxPrimitive.Popup.Props & {\n  align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: ComboboxPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n  const anchor = anchorProp ?? chipsRef;\n\n  return (\n    <ComboboxPrimitive.Portal {...portalProps}>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <ComboboxPrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"combobox-popup\"\n            {...props}\n          >\n            {children}\n          </ComboboxPrimitive.Popup>\n        </span>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ComboboxPrimitive.ItemIndicator>\n      <div className=\"col-start-2\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxEmpty({\n  className,\n  ...props\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxRow({\n  className,\n  ...props\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Row\n      className={className}\n      data-slot=\"combobox-row\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxValue: typeof ComboboxPrimitive.Value =\n  ComboboxPrimitive.Value;\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComboboxPrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea overscrollContain scrollbarGutter scrollFade>\n      <ComboboxPrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"combobox-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function ComboboxClear({\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Clear\n      className={className}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxCollection: typeof ComboboxPrimitive.Collection =\n  ComboboxPrimitive.Collection;\n\nexport function ComboboxChips({\n  className,\n  children,\n  startAddon,\n  ...props\n}: ComboboxPrimitive.Chips.Props & {\n  startAddon?: React.ReactNode;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"combobox-chips\"\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\n      {...props}\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      {children}\n    </ComboboxPrimitive.Chips>\n  );\n}\n\nexport function ComboboxChip({\n  children,\n  removeProps,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\n}): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Chip\n      className=\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove {...removeProps} />\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nexport function ComboboxChipRemove(\n  props: ComboboxPrimitive.ChipRemove.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      aria-label=\"Remove\"\n      className=\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      <XIcon />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\n  ComboboxPrimitive.useFilter;\n\nexport { ComboboxPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const ComboboxContext: React.Context<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}> = React.createContext<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}>({\n  chipsRef: null,\n  multiple: false,\n});\n\nexport function Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>,\n): React.ReactElement {\n  const chipsRef = React.useRef<Element | null>(null);\n  return (\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxContext.Provider>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  size,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"min-w-12 flex-1 text-base text-foreground outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\",\n        sizeValue === \"sm\" ? \"ps-1.5\" : \"ps-2\",\n        className,\n      )}\n      data-size={typeof sizeValue === \"string\" ? sizeValue : undefined}\n      data-slot=\"combobox-chips-input\"\n      size={typeof sizeValue === \"number\" ? sizeValue : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxInput({\n  className,\n  showTrigger = true,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\n  clearProps?: ComboboxPrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"combobox-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <ComboboxPrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\"\n            : \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"combobox-input\"\n        render={\n          <Input\n            className=\"has-disabled:opacity-100\"\n            nativeInput\n            size={sizeValue}\n          />\n        }\n        {...props}\n      />\n      {showTrigger && (\n        <ComboboxTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <ComboboxPrimitive.Icon data-slot=\"combobox-icon\">\n            <ChevronsUpDownIcon />\n          </ComboboxPrimitive.Icon>\n        </ComboboxTrigger>\n      )}\n      {showClear && (\n        <ComboboxClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </ComboboxClear>\n      )}\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={className}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport function ComboboxPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor: anchorProp,\n  portalProps,\n  ...props\n}: ComboboxPrimitive.Popup.Props & {\n  align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: ComboboxPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n  const anchor = anchorProp ?? chipsRef;\n\n  return (\n    <ComboboxPrimitive.Portal {...portalProps}>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <ComboboxPrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"combobox-popup\"\n            {...props}\n          >\n            {children}\n          </ComboboxPrimitive.Popup>\n        </span>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ComboboxPrimitive.ItemIndicator>\n      <div className=\"wrap-anywhere col-start-2 min-w-0\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxEmpty({\n  className,\n  ...props\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxRow({\n  className,\n  ...props\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Row\n      className={className}\n      data-slot=\"combobox-row\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxValue: typeof ComboboxPrimitive.Value =\n  ComboboxPrimitive.Value;\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComboboxPrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea overscrollContain scrollbarGutter scrollFade>\n      <ComboboxPrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"combobox-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function ComboboxClear({\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Clear\n      className={className}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxCollection: typeof ComboboxPrimitive.Collection =\n  ComboboxPrimitive.Collection;\n\nexport function ComboboxChips({\n  className,\n  children,\n  startAddon,\n  ...props\n}: ComboboxPrimitive.Chips.Props & {\n  startAddon?: React.ReactNode;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"combobox-chips\"\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\n      {...props}\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      {children}\n    </ComboboxPrimitive.Chips>\n  );\n}\n\nexport function ComboboxChip({\n  children,\n  removeProps,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\n}): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Chip\n      className=\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove {...removeProps} />\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nexport function ComboboxChipRemove(\n  props: ComboboxPrimitive.ChipRemove.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      aria-label=\"Remove\"\n      className=\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      <XIcon />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\n  ComboboxPrimitive.useFilter;\n\nexport { ComboboxPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/drawer.json b/apps/ui/public/r/drawer.json
index 1931b5951..ef6576039 100644
--- a/apps/ui/public/r/drawer.json
+++ b/apps/ui/public/r/drawer.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/drawer.tsx",
-      "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst DrawerContext: React.Context<{ position: DrawerPosition }> =\n  createContext<{ position: DrawerPosition }>({\n    position: \"bottom\",\n  });\n\nconst directionMap: Record<\n  DrawerPosition,\n  DrawerPrimitive.Root.Props[\"swipeDirection\"]\n> = {\n  bottom: \"down\",\n  left: \"left\",\n  right: \"right\",\n  top: \"up\",\n};\n\nexport const DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\n  DrawerPrimitive.createHandle;\n\nexport function Drawer({\n  swipeDirection,\n  position = \"bottom\",\n  ...props\n}: DrawerPrimitive.Root.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  return (\n    <DrawerContext.Provider value={{ position }}>\n      <DrawerPrimitive.Root\n        swipeDirection={swipeDirection ?? directionMap[position]}\n        {...props}\n      />\n    </DrawerContext.Provider>\n  );\n}\n\nexport const DrawerPortal: typeof DrawerPrimitive.Portal =\n  DrawerPrimitive.Portal;\n\nexport function DrawerTrigger(\n  props: DrawerPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nexport function DrawerClose(\n  props: DrawerPrimitive.Close.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nexport function DrawerSwipeArea({\n  className,\n  position: positionProp,\n  ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPrimitive.SwipeArea\n      className={cn(\n        \"fixed z-50 touch-none\",\n        position === \"bottom\" && \"inset-x-0 bottom-0 h-8\",\n        position === \"top\" && \"inset-x-0 top-0 h-8\",\n        position === \"left\" && \"inset-y-0 left-0 w-8\",\n        position === \"right\" && \"inset-y-0 right-0 w-8\",\n        className,\n      )}\n      data-slot=\"drawer-swipe-area\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerBackdrop({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute\",\n        className,\n      )}\n      data-slot=\"drawer-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerViewport({\n  className,\n  position,\n  variant = \"default\",\n  ...props\n}: DrawerPrimitive.Viewport.Props & {\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <DrawerPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:0px]\",\n        \"touch-none\",\n        position === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        position === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        position === \"left\" && \"flex justify-start\",\n        position === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"px-(--inset) sm:[--inset:--spacing(4)]\",\n        variant === \"inset\" && position !== \"bottom\" && \"pt-(--inset)\",\n        variant === \"inset\" && position !== \"top\" && \"pb-(--inset)\",\n        className,\n      )}\n      data-slot=\"drawer-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPopup({\n  className,\n  children,\n  showCloseButton = false,\n  position: positionProp,\n  variant = \"default\",\n  showBar = false,\n  portalProps,\n  ...props\n}: DrawerPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n  showBar?: boolean;\n  portalProps?: DrawerPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPortal {...portalProps}>\n      <DrawerBackdrop />\n      <DrawerViewport position={position} variant={variant}>\n        <DrawerPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[transform,box-shadow,height,background-color] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--peek:calc(--spacing(6)-1px)] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:bg-popover data-swiping:select-none data-nested-drawer-open:overflow-hidden data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(2%*(var(--nested-drawers)-var(--stack-progress))))] data-ending-style:shadow-transparent data-starting-style:shadow-transparent data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*(var(--nested-drawers)-var(--stack-progress))))] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            \"touch-none\",\n            position === \"bottom\" &&\n              \"transform-[translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] row-start-2 -mb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] border-t pb-[max(0px,calc(env(safe-area-inset-bottom,0px)+var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding] after:inset-x-0 after:top-full after:h-(--bleed) has-data-[slot=drawer-bar]:pt-2 data-ending-style:mb-0 data-starting-style:mb-0 data-ending-style:pb-0 data-starting-style:pb-0\",\n            position === \"top\" &&\n              \"data-starting-style:transform-[translateY(calc(-100%-var(--inset)))] data-ending-style:transform-[translateY(calc(-100%-var(--inset)))] transform-[translateY(var(--drawer-swipe-movement-y))] border-b after:inset-x-0 after:bottom-full after:h-(--bleed) has-data-[slot=drawer-bar]:pb-2\",\n            position === \"left\" &&\n              \"data-starting-style:transform-[translateX(calc(-100%-var(--inset)))] data-ending-style:transform-[translateX(calc(-100%-var(--inset)))] transform-[translateX(var(--drawer-swipe-movement-x))] w-[calc(100%-(--spacing(12)))] max-w-md border-e after:inset-y-0 after:end-full after:w-(--bleed) has-data-[slot=drawer-bar]:pe-2\",\n            position === \"right\" &&\n              \"transform-[translateX(var(--drawer-swipe-movement-x))] data-ending-style:transform-[translateX(calc(100%+var(--inset)))] data-starting-style:transform-[translateX(calc(100%+var(--inset)))] col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s after:inset-y-0 after:start-full after:w-(--bleed) has-data-[slot=drawer-bar]:ps-2\",\n            variant !== \"straight\" &&\n              cn(\n                position === \"bottom\" && \"rounded-t-2xl\",\n                position === \"top\" &&\n                  \"rounded-b-2xl **:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"rounded-e-2xl **:data-[slot=drawer-footer]:rounded-ee-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"rounded-s-2xl **:data-[slot=drawer-footer]:rounded-es-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"default\" &&\n              cn(\n                position === \"bottom\" &&\n                  \"before:rounded-t-[calc(var(--radius-2xl)-1px)]\",\n                position === \"top\" &&\n                  \"before:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"before:rounded-e-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"before:rounded-s-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:after:bg-transparent sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            variant === \"straight\" && \"[--stack-step:0]\",\n            (position === \"bottom\" || position === \"top\") &&\n              \"h-(--drawer-height,auto) [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))] data-nested-drawer-open:h-(--height)\",\n            position === \"bottom\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_calc(100%-var(--inset))]\",\n            position === \"top\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_var(--inset)]\",\n            position === \"left\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))] origin-right\",\n            position === \"right\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))] origin-left\",\n            className,\n          )}\n          data-slot=\"drawer-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n            >\n              <XIcon />\n            </DrawerPrimitive.Close>\n          )}\n          {showBar && <DrawerBar />}\n        </DrawerPrimitive.Popup>\n      </DrawerViewport>\n    </DrawerPortal>\n  );\n}\n\nexport function DrawerHeader({\n  className,\n  allowSelection = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerFooter({\n  className,\n  variant = \"default\",\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end\",\n      !allowSelection && \"cursor-default\",\n      variant === \"default\" &&\n        \"border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]\",\n      className,\n    ),\n    \"data-slot\": \"drawer-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerTitle({\n  className,\n  ...props\n}: DrawerPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"drawer-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"drawer-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPanel({\n  className,\n  scrollFade = true,\n  scrollable = true,\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n  scrollable?: boolean;\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-panel\",\n  };\n\n  const content = useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n\n  if (scrollable) {\n    return (\n      <ScrollArea\n        className=\"touch-auto\"\n        overscrollContain\n        scrollFade={scrollFade}\n      >\n        {content}\n      </ScrollArea>\n    );\n  }\n\n  return content;\n}\n\nexport function DrawerBar({\n  className,\n  position: positionProp,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n  const horizontal = position === \"left\" || position === \"right\";\n  const defaultProps = {\n    \"aria-hidden\": true as const,\n    className: cn(\n      \"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input\",\n      horizontal\n        ? \"inset-y-0 before:h-12 before:w-1\"\n        : \"inset-x-0 before:h-1 before:w-12\",\n      position === \"top\" && \"bottom-0\",\n      position === \"bottom\" && \"top-0\",\n      position === \"left\" && \"right-0\",\n      position === \"right\" && \"left-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-bar\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport const DrawerContent: typeof DrawerPrimitive.Content =\n  DrawerPrimitive.Content;\n\nexport function DrawerMenu({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"nav\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"-m-2 flex flex-col\", className),\n    \"data-slot\": \"drawer-menu\",\n  };\n\n  return useRender({\n    defaultTagName: \"nav\",\n    props: mergeProps<\"nav\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuItem({\n  className,\n  variant = \"default\",\n  render,\n  disabled,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-item\",\n    \"data-variant\": variant,\n    disabled,\n    type: \"button\" as const,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuSeparator({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"mx-2 my-1 h-px bg-border\", className),\n    \"data-slot\": \"drawer-menu-separator\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroup({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"flex flex-col\", className),\n    \"data-slot\": \"drawer-menu-group\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuTrigger({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <DrawerTrigger\n      className={cn(\n        \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground sm:min-h-8 sm:text-sm [&_svg:not(:last-child)]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"drawer-menu-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto -me-0.5 opacity-80\" />\n    </DrawerTrigger>\n  );\n}\n\nexport function DrawerMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  variant = \"default\",\n  disabled,\n  render,\n  ...props\n}: CheckboxPrimitive.Root.Props & {\n  variant?: \"default\" | \"switch\";\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      checked={checked}\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        variant === \"switch\"\n          ? \"grid-cols-[1fr_auto] gap-4 pe-1.5\"\n          : \"grid-cols-[1rem_1fr] pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-checkbox-item\"\n      defaultChecked={defaultChecked}\n      disabled={disabled}\n      onCheckedChange={onCheckedChange}\n      render={render}\n      {...props}\n    >\n      {variant === \"switch\" ? (\n        <>\n          <span className=\"col-start-1\">{children}</span>\n          <CheckboxPrimitive.Indicator\n            className=\"inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\"\n            keepMounted\n          >\n            <span className=\"pointer-events-none block aspect-square h-full in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=drawer-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=drawer-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\" />\n          </CheckboxPrimitive.Indicator>\n        </>\n      ) : (\n        <>\n          <CheckboxPrimitive.Indicator className=\"col-start-1\">\n            <svg\n              fill=\"none\"\n              height=\"24\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n            </svg>\n          </CheckboxPrimitive.Indicator>\n          <span className=\"col-start-2\">{children}</span>\n        </>\n      )}\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport function DrawerMenuRadioGroup({\n  className,\n  ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n  return (\n    <RadioGroupPrimitive\n      className={cn(\"flex flex-col\", className)}\n      data-slot=\"drawer-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerMenuRadioItem({\n  className,\n  children,\n  value,\n  disabled,\n  render,\n  ...props\n}: RadioPrimitive.Root.Props & {\n  value: string;\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        \"grid-cols-[1rem_1fr] items-center pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-radio-item\"\n      disabled={disabled}\n      render={render}\n      value={value}\n      {...props}\n    >\n      <RadioPrimitive.Indicator className=\"col-start-1\">\n        <svg\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </RadioPrimitive.Indicator>\n      <span className=\"col-start-2\">{children}</span>\n    </RadioPrimitive.Root>\n  );\n}\n\nexport { DrawerPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst DrawerContext: React.Context<{ position: DrawerPosition }> =\n  createContext<{ position: DrawerPosition }>({\n    position: \"bottom\",\n  });\n\nconst directionMap: Record<\n  DrawerPosition,\n  DrawerPrimitive.Root.Props[\"swipeDirection\"]\n> = {\n  bottom: \"down\",\n  left: \"left\",\n  right: \"right\",\n  top: \"up\",\n};\n\nexport const DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\n  DrawerPrimitive.createHandle;\n\nexport function Drawer({\n  swipeDirection,\n  position = \"bottom\",\n  ...props\n}: DrawerPrimitive.Root.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  return (\n    <DrawerContext.Provider value={{ position }}>\n      <DrawerPrimitive.Root\n        swipeDirection={swipeDirection ?? directionMap[position]}\n        {...props}\n      />\n    </DrawerContext.Provider>\n  );\n}\n\nexport const DrawerPortal: typeof DrawerPrimitive.Portal =\n  DrawerPrimitive.Portal;\n\nexport function DrawerTrigger(\n  props: DrawerPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nexport function DrawerClose(\n  props: DrawerPrimitive.Close.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nexport function DrawerSwipeArea({\n  className,\n  position: positionProp,\n  ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPrimitive.SwipeArea\n      className={cn(\n        \"fixed z-50 touch-none\",\n        position === \"bottom\" && \"inset-x-0 bottom-0 h-8\",\n        position === \"top\" && \"inset-x-0 top-0 h-8\",\n        position === \"left\" && \"inset-y-0 left-0 w-8\",\n        position === \"right\" && \"inset-y-0 right-0 w-8\",\n        className,\n      )}\n      data-slot=\"drawer-swipe-area\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerBackdrop({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute\",\n        className,\n      )}\n      data-slot=\"drawer-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerViewport({\n  className,\n  position,\n  variant = \"default\",\n  ...props\n}: DrawerPrimitive.Viewport.Props & {\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <DrawerPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:0px]\",\n        \"touch-none\",\n        position === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        position === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        position === \"left\" && \"flex justify-start\",\n        position === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"px-(--inset) sm:[--inset:--spacing(4)]\",\n        variant === \"inset\" && position !== \"bottom\" && \"pt-(--inset)\",\n        variant === \"inset\" && position !== \"top\" && \"pb-(--inset)\",\n        className,\n      )}\n      data-slot=\"drawer-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPopup({\n  className,\n  children,\n  showCloseButton = false,\n  position: positionProp,\n  variant = \"default\",\n  showBar = false,\n  portalProps,\n  ...props\n}: DrawerPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n  showBar?: boolean;\n  portalProps?: DrawerPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPortal {...portalProps}>\n      <DrawerBackdrop />\n      <DrawerViewport position={position} variant={variant}>\n        <DrawerPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[transform,box-shadow,height,background-color] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--peek:calc(--spacing(6)-1px)] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:bg-popover data-swiping:select-none data-nested-drawer-open:overflow-hidden data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(2%*(var(--nested-drawers)-var(--stack-progress))))] data-ending-style:shadow-transparent data-starting-style:shadow-transparent data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*(var(--nested-drawers)-var(--stack-progress))))] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            \"touch-none\",\n            position === \"bottom\" &&\n              \"transform-[translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] row-start-2 -mb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] border-t pb-[max(0px,calc(env(safe-area-inset-bottom,0px)+var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding] after:inset-x-0 after:top-full after:h-(--bleed) has-data-[slot=drawer-bar]:pt-2 data-ending-style:mb-0 data-starting-style:mb-0 data-ending-style:pb-0 data-starting-style:pb-0\",\n            position === \"top\" &&\n              \"data-starting-style:transform-[translateY(calc(-100%-var(--inset)))] data-ending-style:transform-[translateY(calc(-100%-var(--inset)))] transform-[translateY(var(--drawer-swipe-movement-y))] border-b after:inset-x-0 after:bottom-full after:h-(--bleed) has-data-[slot=drawer-bar]:pb-2\",\n            position === \"left\" &&\n              \"data-starting-style:transform-[translateX(calc(-100%-var(--inset)))] data-ending-style:transform-[translateX(calc(-100%-var(--inset)))] transform-[translateX(var(--drawer-swipe-movement-x))] w-[calc(100%-(--spacing(12)))] max-w-md border-e after:inset-y-0 after:end-full after:w-(--bleed) has-data-[slot=drawer-bar]:pe-2\",\n            position === \"right\" &&\n              \"transform-[translateX(var(--drawer-swipe-movement-x))] data-ending-style:transform-[translateX(calc(100%+var(--inset)))] data-starting-style:transform-[translateX(calc(100%+var(--inset)))] col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s after:inset-y-0 after:start-full after:w-(--bleed) has-data-[slot=drawer-bar]:ps-2\",\n            variant !== \"straight\" &&\n              cn(\n                position === \"bottom\" && \"rounded-t-2xl\",\n                position === \"top\" &&\n                  \"rounded-b-2xl **:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"rounded-e-2xl **:data-[slot=drawer-footer]:rounded-ee-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"rounded-s-2xl **:data-[slot=drawer-footer]:rounded-es-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"default\" &&\n              cn(\n                position === \"bottom\" &&\n                  \"before:rounded-t-[calc(var(--radius-2xl)-1px)]\",\n                position === \"top\" &&\n                  \"before:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"before:rounded-e-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"before:rounded-s-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:after:bg-transparent sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            variant === \"straight\" && \"[--stack-step:0]\",\n            (position === \"bottom\" || position === \"top\") &&\n              \"h-(--drawer-height,auto) [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))] data-nested-drawer-open:h-(--height)\",\n            position === \"bottom\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_calc(100%-var(--inset))]\",\n            position === \"top\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_var(--inset)]\",\n            position === \"left\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))] origin-right\",\n            position === \"right\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))] origin-left\",\n            className,\n          )}\n          data-slot=\"drawer-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n            >\n              <XIcon />\n            </DrawerPrimitive.Close>\n          )}\n          {showBar && <DrawerBar />}\n        </DrawerPrimitive.Popup>\n      </DrawerViewport>\n    </DrawerPortal>\n  );\n}\n\nexport function DrawerHeader({\n  className,\n  allowSelection = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerFooter({\n  className,\n  variant = \"default\",\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end\",\n      !allowSelection && \"cursor-default\",\n      variant === \"default\" &&\n        \"border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]\",\n      className,\n    ),\n    \"data-slot\": \"drawer-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerTitle({\n  className,\n  ...props\n}: DrawerPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"drawer-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"drawer-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPanel({\n  className,\n  scrollFade = true,\n  scrollable = true,\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n  scrollable?: boolean;\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-panel\",\n  };\n\n  const content = useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n\n  if (scrollable) {\n    return (\n      <ScrollArea\n        className=\"touch-auto\"\n        overscrollContain\n        scrollFade={scrollFade}\n      >\n        {content}\n      </ScrollArea>\n    );\n  }\n\n  return content;\n}\n\nexport function DrawerBar({\n  className,\n  position: positionProp,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n  const horizontal = position === \"left\" || position === \"right\";\n  const defaultProps = {\n    \"aria-hidden\": true as const,\n    className: cn(\n      \"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input\",\n      horizontal\n        ? \"inset-y-0 before:h-12 before:w-1\"\n        : \"inset-x-0 before:h-1 before:w-12\",\n      position === \"top\" && \"bottom-0\",\n      position === \"bottom\" && \"top-0\",\n      position === \"left\" && \"right-0\",\n      position === \"right\" && \"left-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-bar\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport const DrawerContent: typeof DrawerPrimitive.Content =\n  DrawerPrimitive.Content;\n\nexport function DrawerMenu({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"nav\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"-m-2 flex flex-col\", className),\n    \"data-slot\": \"drawer-menu\",\n  };\n\n  return useRender({\n    defaultTagName: \"nav\",\n    props: mergeProps<\"nav\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuItem({\n  className,\n  variant = \"default\",\n  render,\n  disabled,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-item\",\n    \"data-variant\": variant,\n    disabled,\n    type: \"button\" as const,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuSeparator({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"mx-2 my-1 h-px bg-border\", className),\n    \"data-slot\": \"drawer-menu-separator\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroup({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"flex flex-col\", className),\n    \"data-slot\": \"drawer-menu-group\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuTrigger({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <DrawerTrigger\n      className={cn(\n        \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground sm:min-h-8 sm:text-sm [&_svg:not(:last-child)]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"drawer-menu-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto -me-0.5 opacity-80\" />\n    </DrawerTrigger>\n  );\n}\n\nexport function DrawerMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  variant = \"default\",\n  disabled,\n  render,\n  ...props\n}: CheckboxPrimitive.Root.Props & {\n  variant?: \"default\" | \"switch\";\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      checked={checked}\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        variant === \"switch\"\n          ? \"grid-cols-[minmax(0,1fr)_auto] gap-4 pe-1.5\"\n          : \"grid-cols-[1rem_minmax(0,1fr)] pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-checkbox-item\"\n      defaultChecked={defaultChecked}\n      disabled={disabled}\n      onCheckedChange={onCheckedChange}\n      render={render}\n      {...props}\n    >\n      {variant === \"switch\" ? (\n        <>\n          <span className=\"wrap-anywhere col-start-1 min-w-0\">{children}</span>\n          <CheckboxPrimitive.Indicator\n            className=\"inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\"\n            keepMounted\n          >\n            <span className=\"pointer-events-none block aspect-square h-full in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=drawer-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=drawer-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\" />\n          </CheckboxPrimitive.Indicator>\n        </>\n      ) : (\n        <>\n          <CheckboxPrimitive.Indicator className=\"col-start-1\">\n            <svg\n              fill=\"none\"\n              height=\"24\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n            </svg>\n          </CheckboxPrimitive.Indicator>\n          <span className=\"wrap-anywhere col-start-2 min-w-0\">{children}</span>\n        </>\n      )}\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport function DrawerMenuRadioGroup({\n  className,\n  ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n  return (\n    <RadioGroupPrimitive\n      className={cn(\"flex flex-col\", className)}\n      data-slot=\"drawer-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerMenuRadioItem({\n  className,\n  children,\n  value,\n  disabled,\n  render,\n  ...props\n}: RadioPrimitive.Root.Props & {\n  value: string;\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        \"grid-cols-[1rem_minmax(0,1fr)] items-center pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-radio-item\"\n      disabled={disabled}\n      render={render}\n      value={value}\n      {...props}\n    >\n      <RadioPrimitive.Indicator className=\"col-start-1\">\n        <svg\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </RadioPrimitive.Indicator>\n      <span className=\"wrap-anywhere col-start-2 min-w-0\">{children}</span>\n    </RadioPrimitive.Root>\n  );\n}\n\nexport { DrawerPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/select.json b/apps/ui/public/r/select.json
index 89214f52a..fe65a9599 100644
--- a/apps/ui/public/r/select.json
+++ b/apps/ui/public/r/select.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/ui/select.tsx",
-      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  ChevronDownIcon,\n  ChevronsUpDownIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const Select: typeof SelectPrimitive.Root = SelectPrimitive.Root;\n\nexport const selectTriggerVariants = cva(\n  \"relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none\",\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"\",\n        lg: \"min-h-10 sm:min-h-9\",\n        sm: \"min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7\",\n      },\n    },\n  },\n);\n\nexport const selectTriggerIconClassName = \"-me-1 size-4.5 opacity-80 sm:size-4\";\n\nexport interface SelectButtonProps extends useRender.ComponentProps<\"button\"> {\n  size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n}\n\nexport function SelectButton({\n  className,\n  size,\n  render,\n  children,\n  ...props\n}: SelectButtonProps): React.ReactElement {\n  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"] =\n    render ? undefined : \"button\";\n\n  const defaultProps = {\n    children: (\n      <>\n        <span className=\"flex-1 truncate in-data-placeholder:text-muted-foreground/72\">\n          {children}\n        </span>\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n      </>\n    ),\n    className: cn(selectTriggerVariants({ size }), \"min-w-0\", className),\n    \"data-slot\": \"select-button\",\n    type: typeValue,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props &\n  VariantProps<typeof selectTriggerVariants>): React.ReactElement {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(selectTriggerVariants({ size }), className)}\n      data-slot=\"select-trigger\"\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\">\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nexport function SelectValue({\n  className,\n  ...props\n}: SelectPrimitive.Value.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Value\n      className={cn(\n        \"flex-1 truncate data-placeholder:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"select-value\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"start\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  anchor,\n  portalProps,\n  ...props\n}: SelectPrimitive.Popup.Props & {\n  portalProps?: SelectPrimitive.Portal.Props;\n  side?: SelectPrimitive.Positioner.Props[\"side\"];\n  sideOffset?: SelectPrimitive.Positioner.Props[\"sideOffset\"];\n  align?: SelectPrimitive.Positioner.Props[\"align\"];\n  alignOffset?: SelectPrimitive.Positioner.Props[\"alignOffset\"];\n  alignItemWithTrigger?: SelectPrimitive.Positioner.Props[\"alignItemWithTrigger\"];\n  anchor?: SelectPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <SelectPrimitive.Portal {...portalProps}>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"select-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          className=\"origin-(--transform-origin) text-foreground outline-none\"\n          data-slot=\"select-popup\"\n          {...props}\n        >\n          <SelectPrimitive.ScrollUpArrow\n            className=\"top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover\"\n            data-slot=\"select-scroll-up-arrow\"\n          >\n            <ChevronUpIcon className=\"relative size-4.5 sm:size-4\" />\n          </SelectPrimitive.ScrollUpArrow>\n          <div className=\"relative h-full min-w-(--anchor-width) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\">\n            <SelectPrimitive.List\n              className={cn(\n                \"max-h-(--available-height) overflow-y-auto p-1\",\n                className,\n              )}\n              data-slot=\"select-list\"\n            >\n              {children}\n            </SelectPrimitive.List>\n          </div>\n          <SelectPrimitive.ScrollDownArrow\n            className=\"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover\"\n            data-slot=\"select-scroll-down-arrow\"\n          >\n            <ChevronDownIcon className=\"relative size-4.5 sm:size-4\" />\n          </SelectPrimitive.ScrollDownArrow>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nexport function SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"select-item\"\n      {...props}\n    >\n      <SelectPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText className=\"col-start-2 min-w-0\">\n        {children}\n      </SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nexport function SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectGroup(\n  props: SelectPrimitive.Group.Props,\n): React.ReactElement {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nexport function SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.Label.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Label\n      className={cn(\n        \"not-in-data-[slot=field]:mb-2 inline-flex cursor-default items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4\",\n        className,\n      )}\n      data-slot=\"select-label\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectGroupLabel(\n  props: SelectPrimitive.GroupLabel.Props,\n): React.ReactElement {\n  return (\n    <SelectPrimitive.GroupLabel\n      className=\"px-2 py-1.5 font-medium text-muted-foreground text-xs\"\n      data-slot=\"select-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport { SelectPrimitive, SelectPopup as SelectContent };\n",
+      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  ChevronDownIcon,\n  ChevronsUpDownIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const Select: typeof SelectPrimitive.Root = SelectPrimitive.Root;\n\nexport const selectTriggerVariants = cva(\n  \"relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none\",\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"\",\n        lg: \"min-h-10 sm:min-h-9\",\n        sm: \"min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7\",\n      },\n    },\n  },\n);\n\nexport const selectTriggerIconClassName = \"-me-1 size-4.5 opacity-80 sm:size-4\";\n\nexport interface SelectButtonProps extends useRender.ComponentProps<\"button\"> {\n  size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n}\n\nexport function SelectButton({\n  className,\n  size,\n  render,\n  children,\n  ...props\n}: SelectButtonProps): React.ReactElement {\n  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"] =\n    render ? undefined : \"button\";\n\n  const defaultProps = {\n    children: (\n      <>\n        <span className=\"flex-1 truncate in-data-placeholder:text-muted-foreground/72\">\n          {children}\n        </span>\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n      </>\n    ),\n    className: cn(selectTriggerVariants({ size }), \"min-w-0\", className),\n    \"data-slot\": \"select-button\",\n    type: typeValue,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props &\n  VariantProps<typeof selectTriggerVariants>): React.ReactElement {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(selectTriggerVariants({ size }), className)}\n      data-slot=\"select-trigger\"\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\">\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nexport function SelectValue({\n  className,\n  ...props\n}: SelectPrimitive.Value.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Value\n      className={cn(\n        \"flex-1 truncate data-placeholder:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"select-value\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"start\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  anchor,\n  portalProps,\n  ...props\n}: SelectPrimitive.Popup.Props & {\n  portalProps?: SelectPrimitive.Portal.Props;\n  side?: SelectPrimitive.Positioner.Props[\"side\"];\n  sideOffset?: SelectPrimitive.Positioner.Props[\"sideOffset\"];\n  align?: SelectPrimitive.Positioner.Props[\"align\"];\n  alignOffset?: SelectPrimitive.Positioner.Props[\"alignOffset\"];\n  alignItemWithTrigger?: SelectPrimitive.Positioner.Props[\"alignItemWithTrigger\"];\n  anchor?: SelectPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <SelectPrimitive.Portal {...portalProps}>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"select-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          className=\"origin-(--transform-origin) text-foreground outline-none\"\n          data-slot=\"select-popup\"\n          {...props}\n        >\n          <SelectPrimitive.ScrollUpArrow\n            className=\"top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover\"\n            data-slot=\"select-scroll-up-arrow\"\n          >\n            <ChevronUpIcon className=\"relative size-4.5 sm:size-4\" />\n          </SelectPrimitive.ScrollUpArrow>\n          <div className=\"relative h-full min-w-(--anchor-width) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\">\n            <SelectPrimitive.List\n              className={cn(\n                \"max-h-(--available-height) overflow-y-auto p-1\",\n                className,\n              )}\n              data-slot=\"select-list\"\n            >\n              {children}\n            </SelectPrimitive.List>\n          </div>\n          <SelectPrimitive.ScrollDownArrow\n            className=\"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover\"\n            data-slot=\"select-scroll-down-arrow\"\n          >\n            <ChevronDownIcon className=\"relative size-4.5 sm:size-4\" />\n          </SelectPrimitive.ScrollDownArrow>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nexport function SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"select-item\"\n      {...props}\n    >\n      <SelectPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText className=\"wrap-anywhere col-start-2 min-w-0\">\n        {children}\n      </SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nexport function SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectGroup(\n  props: SelectPrimitive.Group.Props,\n): React.ReactElement {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nexport function SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.Label.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Label\n      className={cn(\n        \"not-in-data-[slot=field]:mb-2 inline-flex cursor-default items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4\",\n        className,\n      )}\n      data-slot=\"select-label\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectGroupLabel(\n  props: SelectPrimitive.GroupLabel.Props,\n): React.ReactElement {\n  return (\n    <SelectPrimitive.GroupLabel\n      className=\"px-2 py-1.5 font-medium text-muted-foreground text-xs\"\n      data-slot=\"select-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport { SelectPrimitive, SelectPopup as SelectContent };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/registry/default/ui/combobox.tsx b/apps/ui/registry/default/ui/combobox.tsx
index 141eb773d..1f920095f 100644
--- a/apps/ui/registry/default/ui/combobox.tsx
+++ b/apps/ui/registry/default/ui/combobox.tsx
@@ -210,7 +210,7 @@ export function ComboboxItem({
   return (
     <ComboboxPrimitive.Item
       className={cn(
-        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       data-slot="combobox-item"
@@ -232,7 +232,7 @@ export function ComboboxItem({
           <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
         </svg>
       </ComboboxPrimitive.ItemIndicator>
-      <div className="col-start-2">{children}</div>
+      <div className="wrap-anywhere col-start-2 min-w-0">{children}</div>
     </ComboboxPrimitive.Item>
   );
 }
diff --git a/apps/ui/registry/default/ui/drawer.tsx b/apps/ui/registry/default/ui/drawer.tsx
index 02763f6aa..45fda93c8 100644
--- a/apps/ui/registry/default/ui/drawer.tsx
+++ b/apps/ui/registry/default/ui/drawer.tsx
@@ -527,8 +527,8 @@ export function DrawerMenuCheckboxItem({
       className={cn(
         "grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
         variant === "switch"
-          ? "grid-cols-[1fr_auto] gap-4 pe-1.5"
-          : "grid-cols-[1rem_1fr] pe-4",
+          ? "grid-cols-[minmax(0,1fr)_auto] gap-4 pe-1.5"
+          : "grid-cols-[1rem_minmax(0,1fr)] pe-4",
         className,
       )}
       data-slot="drawer-menu-checkbox-item"
@@ -540,7 +540,7 @@ export function DrawerMenuCheckboxItem({
     >
       {variant === "switch" ? (
         <>
-          <span className="col-start-1">{children}</span>
+          <span className="wrap-anywhere col-start-1 min-w-0">{children}</span>
           <CheckboxPrimitive.Indicator
             className="inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]"
             keepMounted
@@ -565,7 +565,7 @@ export function DrawerMenuCheckboxItem({
               <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
             </svg>
           </CheckboxPrimitive.Indicator>
-          <span className="col-start-2">{children}</span>
+          <span className="wrap-anywhere col-start-2 min-w-0">{children}</span>
         </>
       )}
     </CheckboxPrimitive.Root>
@@ -600,7 +600,7 @@ export function DrawerMenuRadioItem({
     <RadioPrimitive.Root
       className={cn(
         "grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
-        "grid-cols-[1rem_1fr] items-center pe-4",
+        "grid-cols-[1rem_minmax(0,1fr)] items-center pe-4",
         className,
       )}
       data-slot="drawer-menu-radio-item"
@@ -624,7 +624,7 @@ export function DrawerMenuRadioItem({
           <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
         </svg>
       </RadioPrimitive.Indicator>
-      <span className="col-start-2">{children}</span>
+      <span className="wrap-anywhere col-start-2 min-w-0">{children}</span>
     </RadioPrimitive.Root>
   );
 }
diff --git a/apps/ui/registry/default/ui/select.tsx b/apps/ui/registry/default/ui/select.tsx
index d40415ce5..d7782d0c0 100644
--- a/apps/ui/registry/default/ui/select.tsx
+++ b/apps/ui/registry/default/ui/select.tsx
@@ -178,7 +178,7 @@ export function SelectItem({
   return (
     <SelectPrimitive.Item
       className={cn(
-        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       data-slot="select-item"
@@ -200,7 +200,7 @@ export function SelectItem({
           <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
         </svg>
       </SelectPrimitive.ItemIndicator>
-      <SelectPrimitive.ItemText className="col-start-2 min-w-0">
+      <SelectPrimitive.ItemText className="wrap-anywhere col-start-2 min-w-0">
         {children}
       </SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
diff --git a/packages/ui/src/components/combobox.tsx b/packages/ui/src/components/combobox.tsx
index ea8bf5a52..e374f6686 100644
--- a/packages/ui/src/components/combobox.tsx
+++ b/packages/ui/src/components/combobox.tsx
@@ -210,7 +210,7 @@ export function ComboboxItem({
   return (
     <ComboboxPrimitive.Item
       className={cn(
-        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       data-slot="combobox-item"
@@ -232,7 +232,7 @@ export function ComboboxItem({
           <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
         </svg>
       </ComboboxPrimitive.ItemIndicator>
-      <div className="col-start-2">{children}</div>
+      <div className="wrap-anywhere col-start-2 min-w-0">{children}</div>
     </ComboboxPrimitive.Item>
   );
 }
diff --git a/packages/ui/src/components/drawer.tsx b/packages/ui/src/components/drawer.tsx
index 7ad9c5101..ba453ae3e 100644
--- a/packages/ui/src/components/drawer.tsx
+++ b/packages/ui/src/components/drawer.tsx
@@ -527,8 +527,8 @@ export function DrawerMenuCheckboxItem({
       className={cn(
         "grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
         variant === "switch"
-          ? "grid-cols-[1fr_auto] gap-4 pe-1.5"
-          : "grid-cols-[1rem_1fr] pe-4",
+          ? "grid-cols-[minmax(0,1fr)_auto] gap-4 pe-1.5"
+          : "grid-cols-[1rem_minmax(0,1fr)] pe-4",
         className,
       )}
       data-slot="drawer-menu-checkbox-item"
@@ -540,7 +540,7 @@ export function DrawerMenuCheckboxItem({
     >
       {variant === "switch" ? (
         <>
-          <span className="col-start-1">{children}</span>
+          <span className="wrap-anywhere col-start-1 min-w-0">{children}</span>
           <CheckboxPrimitive.Indicator
             className="inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]"
             keepMounted
@@ -565,7 +565,7 @@ export function DrawerMenuCheckboxItem({
               <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
             </svg>
           </CheckboxPrimitive.Indicator>
-          <span className="col-start-2">{children}</span>
+          <span className="wrap-anywhere col-start-2 min-w-0">{children}</span>
         </>
       )}
     </CheckboxPrimitive.Root>
@@ -600,7 +600,7 @@ export function DrawerMenuRadioItem({
     <RadioPrimitive.Root
       className={cn(
         "grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
-        "grid-cols-[1rem_1fr] items-center pe-4",
+        "grid-cols-[1rem_minmax(0,1fr)] items-center pe-4",
         className,
       )}
       data-slot="drawer-menu-radio-item"
@@ -624,7 +624,7 @@ export function DrawerMenuRadioItem({
           <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
         </svg>
       </RadioPrimitive.Indicator>
-      <span className="col-start-2">{children}</span>
+      <span className="wrap-anywhere col-start-2 min-w-0">{children}</span>
     </RadioPrimitive.Root>
   );
 }
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 4cbe94588..5cb735436 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -178,7 +178,7 @@ export function SelectItem({
   return (
     <SelectPrimitive.Item
       className={cn(
-        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       data-slot="select-item"
@@ -200,7 +200,7 @@ export function SelectItem({
           <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
         </svg>
       </SelectPrimitive.ItemIndicator>
-      <SelectPrimitive.ItemText className="col-start-2 min-w-0">
+      <SelectPrimitive.ItemText className="wrap-anywhere col-start-2 min-w-0">
         {children}
       </SelectPrimitive.ItemText>
     </SelectPrimitive.Item>

From 705cb737c341d701ad981548e88d50da239694bd Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Sat, 5 Sep 2026 15:26:43 +0200
Subject: [PATCH 46/49] fix(toast): keep anchored toasts above later-opened
 popovers (#845)

* fix(toast): keep anchored toasts above later-opened popovers

The anchored toast portal stays mounted at z-50, so a popover opened afterward stacks on top of it.

Co-authored-by: Cursor <cursoragent@cursor.com>

* change z-index

* build reg

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/ui/public/r/toast.json           | 2 +-
 apps/ui/registry/default/ui/toast.tsx | 2 +-
 packages/ui/src/components/toast.tsx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/ui/public/r/toast.json b/apps/ui/public/r/toast.json
index 6dfad1d1e..9f0452bbe 100644
--- a/apps/ui/public/r/toast.json
+++ b/apps/ui/public/r/toast.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/ui/toast.tsx",
-      "content": "\"use client\";\n\nimport { Toast } from \"@base-ui/react/toast\";\nimport {\n  CircleAlertIcon,\n  CircleCheckIcon,\n  InfoIcon,\n  LoaderCircleIcon,\n  TriangleAlertIcon,\n} from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { buttonVariants } from \"@/registry/default/ui/button\";\n\nconst TOAST_ICONS = {\n  error: CircleAlertIcon,\n  info: InfoIcon,\n  loading: LoaderCircleIcon,\n  success: CircleCheckIcon,\n  warning: TriangleAlertIcon,\n} as const;\n\ntype SwipeDirection = \"up\" | \"down\" | \"left\" | \"right\";\n\ntype ToastData = {\n  rootProps?: Omit<\n    React.ComponentProps<typeof Toast.Root>,\n    \"children\" | \"className\" | \"swipeDirection\" | \"toast\"\n  >;\n  tooltipStyle?: boolean;\n};\n\nfunction getSwipeDirection(position: ToastPosition): SwipeDirection[] {\n  const verticalDirection: SwipeDirection = position.startsWith(\"top\")\n    ? \"up\"\n    : \"down\";\n\n  if (position.includes(\"center\")) {\n    return [verticalDirection];\n  }\n\n  if (position.includes(\"left\")) {\n    return [\"left\", verticalDirection];\n  }\n\n  return [\"right\", verticalDirection];\n}\n\nfunction upsertReplayClassName(toast: {\n  type?: string;\n  updateKey?: number;\n}): string | undefined {\n  const k = toast.updateKey ?? 0;\n  if (k <= 0) return undefined;\n  const isEven = k % 2 === 0;\n  if (toast.type === \"error\") {\n    return isEven ? \"animate-toast-error-even\" : \"animate-toast-error-odd\";\n  }\n  return isEven ? \"animate-toast-success-even\" : \"animate-toast-success-odd\";\n}\n\nfunction Toasts({\n  position,\n  portalProps,\n}: {\n  position: ToastPosition;\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n  const swipeDirection = getSwipeDirection(position);\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal\" {...portalProps}>\n      <Toast.Viewport\n        className={cn(\n          \"fixed z-60 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]\",\n          // Vertical positioning\n          \"data-[position*=top]:top-(--toast-inset)\",\n          \"data-[position*=bottom]:bottom-(--toast-inset)\",\n          // Horizontal positioning\n          \"data-[position*=left]:left-(--toast-inset)\",\n          \"data-[position*=right]:right-(--toast-inset)\",\n          \"data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2\",\n        )}\n        data-position={position}\n        data-slot=\"toast-viewport\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n          const toastData = toast.data as ToastData | undefined;\n\n          return (\n            <Toast.Root\n              key={toast.id}\n              className={cn(\n                \"absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(1%*max(0,var(--toast-index,0))))] not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s,background-color_.5s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-expanded:bg-popover dark:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*max(0,var(--toast-index,0))))] dark:data-expanded:bg-popover dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                // Base positioning using data-position\n                \"data-[position*=right]:right-0 data-[position*=right]:left-auto\",\n                \"data-[position*=left]:right-auto data-[position*=left]:left-0\",\n                \"data-[position*=center]:right-0 data-[position*=center]:left-0\",\n                \"data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-[50%_calc(50%-50%*min(var(--toast-index,0),1))]\",\n                \"data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-[50%_calc(50%+50%*min(var(--toast-index,0),1))]\",\n                // Gap fill for hover\n                \"after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full\",\n                \"data-[position*=top]:after:top-full\",\n                \"data-[position*=bottom]:after:bottom-full\",\n                // Define some variables\n                \"[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]\",\n                // Define offset-y variable\n                \"data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]\",\n                \"data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]\",\n                // Default state transform\n                \"data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                \"data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                // Limited state\n                \"data-limited:opacity-0\",\n                // Expanded state\n                \"data-expanded:h-(--toast-height)\",\n                \"data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]\",\n                // Starting and ending animations\n                \"data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]\",\n                \"data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:opacity-0\",\n                // Ending animations (direction-aware)\n                \"data-[position*=top]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(-100%-var(--toast-inset)))]\",\n                \"data-[position*=bottom]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n                // Ending animations (expanded)\n                \"data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n                upsertReplayClassName(toast),\n              )}\n              {...toastData?.rootProps}\n              data-position={position}\n              swipeDirection={swipeDirection}\n              toast={toast}\n            >\n              <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100\">\n                <div className=\"flex gap-2\">\n                  {Icon && (\n                    <div\n                      className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                      data-slot=\"toast-icon\"\n                    >\n                      <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                    </div>\n                  )}\n\n                  <div className=\"flex flex-col gap-0.5\">\n                    <Toast.Title\n                      className=\"font-medium\"\n                      data-slot=\"toast-title\"\n                    />\n                    <Toast.Description\n                      className=\"text-muted-foreground\"\n                      data-slot=\"toast-description\"\n                    />\n                  </div>\n                </div>\n                {toast.actionProps && (\n                  <Toast.Action\n                    className={buttonVariants({ size: \"xs\" })}\n                    data-slot=\"toast-action\"\n                  >\n                    {toast.actionProps.children}\n                  </Toast.Action>\n                )}\n              </Toast.Content>\n            </Toast.Root>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nfunction AnchoredToasts({\n  portalProps,\n}: {\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal-anchored\" {...portalProps}>\n      <Toast.Viewport\n        className=\"outline-none\"\n        data-slot=\"toast-viewport-anchored\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n          const toastData = toast.data as ToastData | undefined;\n          const tooltipStyle = toastData?.tooltipStyle ?? false;\n          const positionerProps = toast.positionerProps;\n\n          if (!positionerProps?.anchor) {\n            return null;\n          }\n\n          return (\n            <Toast.Positioner\n              key={toast.id}\n              className=\"z-50 max-w-[min(--spacing(64),var(--available-width))]\"\n              data-slot=\"toast-positioner\"\n              sideOffset={positionerProps.sideOffset ?? 4}\n              toast={toast}\n            >\n              <Toast.Root\n                className={cn(\n                  \"relative text-balance border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                  tooltipStyle\n                    ? \"rounded-md shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]\"\n                    : \"rounded-lg shadow-lg/5 before:rounded-[calc(var(--radius-lg)-1px)]\",\n                  upsertReplayClassName(toast),\n                )}\n                {...toastData?.rootProps}\n                data-slot=\"toast-popup\"\n                toast={toast}\n              >\n                {tooltipStyle ? (\n                  <Toast.Content className=\"pointer-events-auto px-2 py-1\">\n                    <Toast.Title data-slot=\"toast-title\" />\n                  </Toast.Content>\n                ) : (\n                  <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm\">\n                    <div className=\"flex gap-2\">\n                      {Icon && (\n                        <div\n                          className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                          data-slot=\"toast-icon\"\n                        >\n                          <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                        </div>\n                      )}\n\n                      <div className=\"flex flex-col gap-0.5\">\n                        <Toast.Title\n                          className=\"font-medium\"\n                          data-slot=\"toast-title\"\n                        />\n                        <Toast.Description\n                          className=\"text-muted-foreground\"\n                          data-slot=\"toast-description\"\n                        />\n                      </div>\n                    </div>\n                    {toast.actionProps && (\n                      <Toast.Action\n                        className={buttonVariants({ size: \"xs\" })}\n                        data-slot=\"toast-action\"\n                      >\n                        {toast.actionProps.children}\n                      </Toast.Action>\n                    )}\n                  </Toast.Content>\n                )}\n              </Toast.Root>\n            </Toast.Positioner>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nexport const toastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\n\nexport const anchoredToastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\n\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport interface ToastProviderProps extends Toast.Provider.Props {\n  position?: ToastPosition;\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}\n\nexport function ToastProvider({\n  children,\n  position = \"bottom-right\",\n  portalProps,\n  ...props\n}: ToastProviderProps): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={toastManager} {...props}>\n      {children}\n      <Toasts portalProps={portalProps} position={position} />\n    </Toast.Provider>\n  );\n}\n\nexport interface AnchoredToastProviderProps extends Toast.Provider.Props {\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}\n\nexport function AnchoredToastProvider({\n  children,\n  portalProps,\n  ...props\n}: AnchoredToastProviderProps): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={anchoredToastManager} {...props}>\n      {children}\n      <AnchoredToasts portalProps={portalProps} />\n    </Toast.Provider>\n  );\n}\n\nexport { Toast as ToastPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Toast } from \"@base-ui/react/toast\";\nimport {\n  CircleAlertIcon,\n  CircleCheckIcon,\n  InfoIcon,\n  LoaderCircleIcon,\n  TriangleAlertIcon,\n} from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { buttonVariants } from \"@/registry/default/ui/button\";\n\nconst TOAST_ICONS = {\n  error: CircleAlertIcon,\n  info: InfoIcon,\n  loading: LoaderCircleIcon,\n  success: CircleCheckIcon,\n  warning: TriangleAlertIcon,\n} as const;\n\ntype SwipeDirection = \"up\" | \"down\" | \"left\" | \"right\";\n\ntype ToastData = {\n  rootProps?: Omit<\n    React.ComponentProps<typeof Toast.Root>,\n    \"children\" | \"className\" | \"swipeDirection\" | \"toast\"\n  >;\n  tooltipStyle?: boolean;\n};\n\nfunction getSwipeDirection(position: ToastPosition): SwipeDirection[] {\n  const verticalDirection: SwipeDirection = position.startsWith(\"top\")\n    ? \"up\"\n    : \"down\";\n\n  if (position.includes(\"center\")) {\n    return [verticalDirection];\n  }\n\n  if (position.includes(\"left\")) {\n    return [\"left\", verticalDirection];\n  }\n\n  return [\"right\", verticalDirection];\n}\n\nfunction upsertReplayClassName(toast: {\n  type?: string;\n  updateKey?: number;\n}): string | undefined {\n  const k = toast.updateKey ?? 0;\n  if (k <= 0) return undefined;\n  const isEven = k % 2 === 0;\n  if (toast.type === \"error\") {\n    return isEven ? \"animate-toast-error-even\" : \"animate-toast-error-odd\";\n  }\n  return isEven ? \"animate-toast-success-even\" : \"animate-toast-success-odd\";\n}\n\nfunction Toasts({\n  position,\n  portalProps,\n}: {\n  position: ToastPosition;\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n  const swipeDirection = getSwipeDirection(position);\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal\" {...portalProps}>\n      <Toast.Viewport\n        className={cn(\n          \"fixed z-60 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]\",\n          // Vertical positioning\n          \"data-[position*=top]:top-(--toast-inset)\",\n          \"data-[position*=bottom]:bottom-(--toast-inset)\",\n          // Horizontal positioning\n          \"data-[position*=left]:left-(--toast-inset)\",\n          \"data-[position*=right]:right-(--toast-inset)\",\n          \"data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2\",\n        )}\n        data-position={position}\n        data-slot=\"toast-viewport\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n          const toastData = toast.data as ToastData | undefined;\n\n          return (\n            <Toast.Root\n              key={toast.id}\n              className={cn(\n                \"absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(1%*max(0,var(--toast-index,0))))] not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s,background-color_.5s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-expanded:bg-popover dark:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*max(0,var(--toast-index,0))))] dark:data-expanded:bg-popover dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                // Base positioning using data-position\n                \"data-[position*=right]:right-0 data-[position*=right]:left-auto\",\n                \"data-[position*=left]:right-auto data-[position*=left]:left-0\",\n                \"data-[position*=center]:right-0 data-[position*=center]:left-0\",\n                \"data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-[50%_calc(50%-50%*min(var(--toast-index,0),1))]\",\n                \"data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-[50%_calc(50%+50%*min(var(--toast-index,0),1))]\",\n                // Gap fill for hover\n                \"after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full\",\n                \"data-[position*=top]:after:top-full\",\n                \"data-[position*=bottom]:after:bottom-full\",\n                // Define some variables\n                \"[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]\",\n                // Define offset-y variable\n                \"data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]\",\n                \"data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]\",\n                // Default state transform\n                \"data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                \"data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                // Limited state\n                \"data-limited:opacity-0\",\n                // Expanded state\n                \"data-expanded:h-(--toast-height)\",\n                \"data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]\",\n                // Starting and ending animations\n                \"data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]\",\n                \"data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:opacity-0\",\n                // Ending animations (direction-aware)\n                \"data-[position*=top]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(-100%-var(--toast-inset)))]\",\n                \"data-[position*=bottom]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n                // Ending animations (expanded)\n                \"data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n                upsertReplayClassName(toast),\n              )}\n              {...toastData?.rootProps}\n              data-position={position}\n              swipeDirection={swipeDirection}\n              toast={toast}\n            >\n              <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100\">\n                <div className=\"flex gap-2\">\n                  {Icon && (\n                    <div\n                      className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                      data-slot=\"toast-icon\"\n                    >\n                      <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                    </div>\n                  )}\n\n                  <div className=\"flex flex-col gap-0.5\">\n                    <Toast.Title\n                      className=\"font-medium\"\n                      data-slot=\"toast-title\"\n                    />\n                    <Toast.Description\n                      className=\"text-muted-foreground\"\n                      data-slot=\"toast-description\"\n                    />\n                  </div>\n                </div>\n                {toast.actionProps && (\n                  <Toast.Action\n                    className={buttonVariants({ size: \"xs\" })}\n                    data-slot=\"toast-action\"\n                  >\n                    {toast.actionProps.children}\n                  </Toast.Action>\n                )}\n              </Toast.Content>\n            </Toast.Root>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nfunction AnchoredToasts({\n  portalProps,\n}: {\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal-anchored\" {...portalProps}>\n      <Toast.Viewport\n        className=\"outline-none\"\n        data-slot=\"toast-viewport-anchored\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n          const toastData = toast.data as ToastData | undefined;\n          const tooltipStyle = toastData?.tooltipStyle ?? false;\n          const positionerProps = toast.positionerProps;\n\n          if (!positionerProps?.anchor) {\n            return null;\n          }\n\n          return (\n            <Toast.Positioner\n              key={toast.id}\n              className=\"z-60 max-w-[min(--spacing(64),var(--available-width))]\"\n              data-slot=\"toast-positioner\"\n              sideOffset={positionerProps.sideOffset ?? 4}\n              toast={toast}\n            >\n              <Toast.Root\n                className={cn(\n                  \"relative text-balance border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                  tooltipStyle\n                    ? \"rounded-md shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]\"\n                    : \"rounded-lg shadow-lg/5 before:rounded-[calc(var(--radius-lg)-1px)]\",\n                  upsertReplayClassName(toast),\n                )}\n                {...toastData?.rootProps}\n                data-slot=\"toast-popup\"\n                toast={toast}\n              >\n                {tooltipStyle ? (\n                  <Toast.Content className=\"pointer-events-auto px-2 py-1\">\n                    <Toast.Title data-slot=\"toast-title\" />\n                  </Toast.Content>\n                ) : (\n                  <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm\">\n                    <div className=\"flex gap-2\">\n                      {Icon && (\n                        <div\n                          className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                          data-slot=\"toast-icon\"\n                        >\n                          <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                        </div>\n                      )}\n\n                      <div className=\"flex flex-col gap-0.5\">\n                        <Toast.Title\n                          className=\"font-medium\"\n                          data-slot=\"toast-title\"\n                        />\n                        <Toast.Description\n                          className=\"text-muted-foreground\"\n                          data-slot=\"toast-description\"\n                        />\n                      </div>\n                    </div>\n                    {toast.actionProps && (\n                      <Toast.Action\n                        className={buttonVariants({ size: \"xs\" })}\n                        data-slot=\"toast-action\"\n                      >\n                        {toast.actionProps.children}\n                      </Toast.Action>\n                    )}\n                  </Toast.Content>\n                )}\n              </Toast.Root>\n            </Toast.Positioner>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nexport const toastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\n\nexport const anchoredToastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\n\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport interface ToastProviderProps extends Toast.Provider.Props {\n  position?: ToastPosition;\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}\n\nexport function ToastProvider({\n  children,\n  position = \"bottom-right\",\n  portalProps,\n  ...props\n}: ToastProviderProps): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={toastManager} {...props}>\n      {children}\n      <Toasts portalProps={portalProps} position={position} />\n    </Toast.Provider>\n  );\n}\n\nexport interface AnchoredToastProviderProps extends Toast.Provider.Props {\n  portalProps?: React.ComponentProps<typeof Toast.Portal>;\n}\n\nexport function AnchoredToastProvider({\n  children,\n  portalProps,\n  ...props\n}: AnchoredToastProviderProps): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={anchoredToastManager} {...props}>\n      {children}\n      <AnchoredToasts portalProps={portalProps} />\n    </Toast.Provider>\n  );\n}\n\nexport { Toast as ToastPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/registry/default/ui/toast.tsx b/apps/ui/registry/default/ui/toast.tsx
index 33c206ed5..30ed9bf95 100644
--- a/apps/ui/registry/default/ui/toast.tsx
+++ b/apps/ui/registry/default/ui/toast.tsx
@@ -209,7 +209,7 @@ function AnchoredToasts({
           return (
             <Toast.Positioner
               key={toast.id}
-              className="z-50 max-w-[min(--spacing(64),var(--available-width))]"
+              className="z-60 max-w-[min(--spacing(64),var(--available-width))]"
               data-slot="toast-positioner"
               sideOffset={positionerProps.sideOffset ?? 4}
               toast={toast}
diff --git a/packages/ui/src/components/toast.tsx b/packages/ui/src/components/toast.tsx
index 255354752..a1dabb8ca 100644
--- a/packages/ui/src/components/toast.tsx
+++ b/packages/ui/src/components/toast.tsx
@@ -209,7 +209,7 @@ function AnchoredToasts({
           return (
             <Toast.Positioner
               key={toast.id}
-              className="z-50 max-w-[min(--spacing(64),var(--available-width))]"
+              className="z-60 max-w-[min(--spacing(64),var(--available-width))]"
               data-slot="toast-positioner"
               sideOffset={positionerProps.sideOffset ?? 4}
               toast={toast}

From 4b1240be2c9d6c5a4fd7e282413b53ca2b232603 Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Mon, 7 Sep 2026 08:18:51 +0200
Subject: [PATCH 47/49] chore(ui): update Base UI to 1.8.0 (#846)

---
 apps/ui/content/docs/components/avatar.mdx    | 16 ++++++++-
 apps/ui/content/docs/components/combobox.mdx  | 33 ++++++++++++++++++-
 apps/ui/package.json                          |  2 +-
 apps/ui/public/r/avatar.json                  |  2 +-
 apps/ui/public/r/combobox.json                |  2 +-
 apps/ui/registry/default/ui/avatar.tsx        |  9 +++--
 apps/ui/registry/default/ui/combobox.tsx      | 11 +++++--
 .../coss/references/primitives/avatar.md      |  2 ++
 .../coss/references/primitives/combobox.md    |  3 ++
 bun.lock                                      | 18 +++++-----
 packages/ui/package.json                      |  2 +-
 packages/ui/src/components/avatar.tsx         |  9 +++--
 packages/ui/src/components/combobox.tsx       | 11 +++++--
 13 files changed, 95 insertions(+), 25 deletions(-)

diff --git a/apps/ui/content/docs/components/avatar.mdx b/apps/ui/content/docs/components/avatar.mdx
index 6ab5a0613..4c584671e 100644
--- a/apps/ui/content/docs/components/avatar.mdx
+++ b/apps/ui/content/docs/components/avatar.mdx
@@ -60,6 +60,20 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 </Avatar>
 ```
 
+Use `keepMounted` when the image relies on native lazy loading or an optimized image component. The fallback remains visible while the image loads or if it fails:
+
+```tsx
+<Avatar>
+  <AvatarImage
+    src="/avatars/01.png"
+    alt="User avatar"
+    loading="lazy"
+    keepMounted
+  />
+  <AvatarFallback>JD</AvatarFallback>
+</Avatar>
+```
+
 ## API Reference
 
 ### Avatar
@@ -68,7 +82,7 @@ Root component. Styled wrapper for `Avatar.Root` from Base UI with default size
 
 ### AvatarImage
 
-Image element for the avatar. Styled wrapper for `Avatar.Image` from Base UI.
+Image element for the avatar. Styled wrapper for `Avatar.Image` from Base UI with support for `keepMounted` images.
 
 ### AvatarFallback
 
diff --git a/apps/ui/content/docs/components/combobox.mdx b/apps/ui/content/docs/components/combobox.mdx
index f8c9f1076..fc7d8c875 100644
--- a/apps/ui/content/docs/components/combobox.mdx
+++ b/apps/ui/content/docs/components/combobox.mdx
@@ -59,6 +59,7 @@ import {
   ComboboxItem,
   ComboboxList,
   ComboboxPopup,
+  createComboboxItems,
 } from "@/components/ui/combobox"
 ```
 
@@ -81,6 +82,33 @@ const items = [
 </Combobox>
 ```
 
+When your source items are objects but selection should use a stable primitive value, create a typed collection with `createComboboxItems`:
+
+```tsx
+const users = [
+  { id: "ada", name: "Ada Lovelace" },
+  { id: "grace", name: "Grace Hopper" },
+]
+
+const userItems = createComboboxItems(users, {
+  getLabel: (user) => user.name,
+  getValue: (user) => user.id,
+})
+
+<Combobox defaultValue="ada" items={userItems}>
+  <ComboboxInput placeholder="Select a user..." />
+  <ComboboxPopup>
+    <ComboboxList>
+      {(user) => (
+        <ComboboxItem key={user.id} value={user.id}>
+          {user.name}
+        </ComboboxItem>
+      )}
+    </ComboboxList>
+  </ComboboxPopup>
+</Combobox>
+```
+
 ### Multiple Selection
 
 ```tsx
@@ -145,6 +173,10 @@ The root combobox component. Manages the combobox state and provides context to
 | `open`     | `boolean`                               | Controls whether the popup is open                |
 | `...props` | `React.ComponentProps<typeof Combobox>` | All Base UI Combobox props are supported          |
 
+### createComboboxItems
+
+Creates a typed item collection that derives primitive selection values and labels from object items. Define static collections outside components and memoize dynamic collections.
+
 ### ComboboxInput
 
 The input field component for single selection mode with extended features for size variants and addon support.
@@ -328,4 +360,3 @@ Use `SelectButton` as a `render` prop on `ComboboxTrigger` to make the combobox
 ### Form Integration - Multiple
 
 <ComponentPreview name="p-combobox-12" />
-
diff --git a/apps/ui/package.json b/apps/ui/package.json
index 9f5723b5a..798076907 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@base-ui/react": "1.6.0",
+    "@base-ui/react": "1.8.0",
     "@coss/ui": "workspace:*",
     "@daypicker/react": "10.0.1",
     "@hugeicons/core-free-icons": "^2.0.0",
diff --git a/apps/ui/public/r/avatar.json b/apps/ui/public/r/avatar.json
index d54a36f0f..677171f31 100644
--- a/apps/ui/public/r/avatar.json
+++ b/apps/ui/public/r/avatar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/ui/avatar.tsx",
-      "content": "\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Avatar({\n  className,\n  ...props\n}: AvatarPrimitive.Root.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Root\n      className={cn(\n        \"inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs\",\n        className,\n      )}\n      data-slot=\"avatar\"\n      {...props}\n    />\n  );\n}\n\nexport function AvatarImage({\n  className,\n  ...props\n}: AvatarPrimitive.Image.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Image\n      className={cn(\"size-full object-cover\", className)}\n      data-slot=\"avatar-image\"\n      {...props}\n    />\n  );\n}\n\nexport function AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Fallback\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted\",\n        className,\n      )}\n      data-slot=\"avatar-fallback\"\n      {...props}\n    />\n  );\n}\n\nexport { AvatarPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Avatar({\n  className,\n  ...props\n}: AvatarPrimitive.Root.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Root\n      className={cn(\n        \"relative isolate inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs\",\n        className,\n      )}\n      data-slot=\"avatar\"\n      {...props}\n    />\n  );\n}\n\nexport function AvatarImage({\n  className,\n  ...props\n}: AvatarPrimitive.Image.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Image\n      className={cn(\n        \"absolute inset-0 z-10 size-full object-cover data-error:invisible data-loading:invisible\",\n        className,\n      )}\n      data-slot=\"avatar-image\"\n      {...props}\n    />\n  );\n}\n\nexport function AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Fallback\n      className={cn(\n        \"absolute inset-0 flex size-full items-center justify-center rounded-full bg-muted\",\n        className,\n      )}\n      data-slot=\"avatar-fallback\"\n      {...props}\n    />\n  );\n}\n\nexport { AvatarPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/combobox.json b/apps/ui/public/r/combobox.json
index bb26dd71e..24f5c04bb 100644
--- a/apps/ui/public/r/combobox.json
+++ b/apps/ui/public/r/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/combobox.tsx",
-      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const ComboboxContext: React.Context<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}> = React.createContext<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}>({\n  chipsRef: null,\n  multiple: false,\n});\n\nexport function Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>,\n): React.ReactElement {\n  const chipsRef = React.useRef<Element | null>(null);\n  return (\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxContext.Provider>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  size,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"min-w-12 flex-1 text-base text-foreground outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\",\n        sizeValue === \"sm\" ? \"ps-1.5\" : \"ps-2\",\n        className,\n      )}\n      data-size={typeof sizeValue === \"string\" ? sizeValue : undefined}\n      data-slot=\"combobox-chips-input\"\n      size={typeof sizeValue === \"number\" ? sizeValue : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxInput({\n  className,\n  showTrigger = true,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\n  clearProps?: ComboboxPrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"combobox-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <ComboboxPrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\"\n            : \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"combobox-input\"\n        render={\n          <Input\n            className=\"has-disabled:opacity-100\"\n            nativeInput\n            size={sizeValue}\n          />\n        }\n        {...props}\n      />\n      {showTrigger && (\n        <ComboboxTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <ComboboxPrimitive.Icon data-slot=\"combobox-icon\">\n            <ChevronsUpDownIcon />\n          </ComboboxPrimitive.Icon>\n        </ComboboxTrigger>\n      )}\n      {showClear && (\n        <ComboboxClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </ComboboxClear>\n      )}\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={className}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport function ComboboxPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor: anchorProp,\n  portalProps,\n  ...props\n}: ComboboxPrimitive.Popup.Props & {\n  align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: ComboboxPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n  const anchor = anchorProp ?? chipsRef;\n\n  return (\n    <ComboboxPrimitive.Portal {...portalProps}>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <ComboboxPrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"combobox-popup\"\n            {...props}\n          >\n            {children}\n          </ComboboxPrimitive.Popup>\n        </span>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ComboboxPrimitive.ItemIndicator>\n      <div className=\"wrap-anywhere col-start-2 min-w-0\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxEmpty({\n  className,\n  ...props\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxRow({\n  className,\n  ...props\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Row\n      className={className}\n      data-slot=\"combobox-row\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxValue: typeof ComboboxPrimitive.Value =\n  ComboboxPrimitive.Value;\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComboboxPrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea overscrollContain scrollbarGutter scrollFade>\n      <ComboboxPrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"combobox-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function ComboboxClear({\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Clear\n      className={className}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxCollection: typeof ComboboxPrimitive.Collection =\n  ComboboxPrimitive.Collection;\n\nexport function ComboboxChips({\n  className,\n  children,\n  startAddon,\n  ...props\n}: ComboboxPrimitive.Chips.Props & {\n  startAddon?: React.ReactNode;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"combobox-chips\"\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\n      {...props}\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      {children}\n    </ComboboxPrimitive.Chips>\n  );\n}\n\nexport function ComboboxChip({\n  children,\n  removeProps,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\n}): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Chip\n      className=\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove {...removeProps} />\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nexport function ComboboxChipRemove(\n  props: ComboboxPrimitive.ChipRemove.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      aria-label=\"Remove\"\n      className=\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      <XIcon />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\n  ComboboxPrimitive.useFilter;\n\nexport { ComboboxPrimitive };\n",
+      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const ComboboxContext: React.Context<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}> = React.createContext<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}>({\n  chipsRef: null,\n  multiple: false,\n});\n\nexport function Combobox<\n  Value,\n  Multiple extends boolean | undefined = false,\n  Item = Value,\n>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple, Item>,\n): React.ReactElement {\n  const chipsRef = React.useRef<Element | null>(null);\n  return (\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxContext.Provider>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  size,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"min-w-12 flex-1 text-base text-foreground outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\",\n        sizeValue === \"sm\" ? \"ps-1.5\" : \"ps-2\",\n        className,\n      )}\n      data-size={typeof sizeValue === \"string\" ? sizeValue : undefined}\n      data-slot=\"combobox-chips-input\"\n      size={typeof sizeValue === \"number\" ? sizeValue : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxInput({\n  className,\n  showTrigger = true,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\n  clearProps?: ComboboxPrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"combobox-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <ComboboxPrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\"\n            : \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"combobox-input\"\n        render={\n          <Input\n            className=\"has-disabled:opacity-100\"\n            nativeInput\n            size={sizeValue}\n          />\n        }\n        {...props}\n      />\n      {showTrigger && (\n        <ComboboxTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <ComboboxPrimitive.Icon data-slot=\"combobox-icon\">\n            <ChevronsUpDownIcon />\n          </ComboboxPrimitive.Icon>\n        </ComboboxTrigger>\n      )}\n      {showClear && (\n        <ComboboxClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </ComboboxClear>\n      )}\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={className}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport function ComboboxPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor: anchorProp,\n  portalProps,\n  ...props\n}: ComboboxPrimitive.Popup.Props & {\n  align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: ComboboxPrimitive.Portal.Props;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n  const anchor = anchorProp ?? chipsRef;\n\n  return (\n    <ComboboxPrimitive.Portal {...portalProps}>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <ComboboxPrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"combobox-popup\"\n            {...props}\n          >\n            {children}\n          </ComboboxPrimitive.Popup>\n        </span>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ComboboxPrimitive.ItemIndicator>\n      <div className=\"wrap-anywhere col-start-2 min-w-0\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxEmpty({\n  className,\n  ...props\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxRow({\n  className,\n  ...props\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Row\n      className={className}\n      data-slot=\"combobox-row\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxValue: typeof ComboboxPrimitive.Value =\n  ComboboxPrimitive.Value;\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComboboxPrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea overscrollContain scrollbarGutter scrollFade>\n      <ComboboxPrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"combobox-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function ComboboxClear({\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Clear\n      className={className}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nexport const ComboboxCollection: typeof ComboboxPrimitive.Collection =\n  ComboboxPrimitive.Collection;\n\nexport function ComboboxChips({\n  className,\n  children,\n  startAddon,\n  ...props\n}: ComboboxPrimitive.Chips.Props & {\n  startAddon?: React.ReactNode;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"combobox-chips\"\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\n      {...props}\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      {children}\n    </ComboboxPrimitive.Chips>\n  );\n}\n\nexport function ComboboxChip({\n  children,\n  removeProps,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\n}): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Chip\n      className=\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove {...removeProps} />\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nexport function ComboboxChipRemove(\n  props: ComboboxPrimitive.ChipRemove.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      aria-label=\"Remove\"\n      className=\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      <XIcon />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport const createComboboxItems: typeof ComboboxPrimitive.createItems =\n  ComboboxPrimitive.createItems;\n\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\n  ComboboxPrimitive.useFilter;\n\nexport { ComboboxPrimitive };\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/registry/default/ui/avatar.tsx b/apps/ui/registry/default/ui/avatar.tsx
index 6aaa0b80d..1e9c551e0 100644
--- a/apps/ui/registry/default/ui/avatar.tsx
+++ b/apps/ui/registry/default/ui/avatar.tsx
@@ -11,7 +11,7 @@ export function Avatar({
   return (
     <AvatarPrimitive.Root
       className={cn(
-        "inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs",
+        "relative isolate inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs",
         className,
       )}
       data-slot="avatar"
@@ -26,7 +26,10 @@ export function AvatarImage({
 }: AvatarPrimitive.Image.Props): React.ReactElement {
   return (
     <AvatarPrimitive.Image
-      className={cn("size-full object-cover", className)}
+      className={cn(
+        "absolute inset-0 z-10 size-full object-cover data-error:invisible data-loading:invisible",
+        className,
+      )}
       data-slot="avatar-image"
       {...props}
     />
@@ -40,7 +43,7 @@ export function AvatarFallback({
   return (
     <AvatarPrimitive.Fallback
       className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted",
+        "absolute inset-0 flex size-full items-center justify-center rounded-full bg-muted",
         className,
       )}
       data-slot="avatar-fallback"
diff --git a/apps/ui/registry/default/ui/combobox.tsx b/apps/ui/registry/default/ui/combobox.tsx
index 1f920095f..4ed0c9fc7 100644
--- a/apps/ui/registry/default/ui/combobox.tsx
+++ b/apps/ui/registry/default/ui/combobox.tsx
@@ -18,8 +18,12 @@ export const ComboboxContext: React.Context<{
   multiple: false,
 });
 
-export function Combobox<Value, Multiple extends boolean | undefined = false>(
-  props: ComboboxPrimitive.Root.Props<Value, Multiple>,
+export function Combobox<
+  Value,
+  Multiple extends boolean | undefined = false,
+  Item = Value,
+>(
+  props: ComboboxPrimitive.Root.Props<Value, Multiple, Item>,
 ): React.ReactElement {
   const chipsRef = React.useRef<Element | null>(null);
   return (
@@ -429,6 +433,9 @@ export function ComboboxChipRemove(
   );
 }
 
+export const createComboboxItems: typeof ComboboxPrimitive.createItems =
+  ComboboxPrimitive.createItems;
+
 export const useComboboxFilter: typeof ComboboxPrimitive.useFilter =
   ComboboxPrimitive.useFilter;
 
diff --git a/apps/ui/skills/coss/references/primitives/avatar.md b/apps/ui/skills/coss/references/primitives/avatar.md
index 96b24a676..5e98f1c6e 100644
--- a/apps/ui/skills/coss/references/primitives/avatar.md
+++ b/apps/ui/skills/coss/references/primitives/avatar.md
@@ -32,6 +32,8 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 </Avatar>
 ```
 
+Use `keepMounted` on `AvatarImage` when the image relies on native lazy loading or an optimized image component. The image and fallback are layered so the fallback remains visible while the image loads or if it fails.
+
 ## Patterns from coss particles
 
 ### Key patterns
diff --git a/apps/ui/skills/coss/references/primitives/combobox.md b/apps/ui/skills/coss/references/primitives/combobox.md
index e72dcfd2c..176617f31 100644
--- a/apps/ui/skills/coss/references/primitives/combobox.md
+++ b/apps/ui/skills/coss/references/primitives/combobox.md
@@ -39,6 +39,7 @@ import {
   ComboboxPopup,
   ComboboxSeparator,
   ComboboxValue,
+  createComboboxItems,
   useComboboxFilter,
 } from "@/components/ui/combobox"
 ```
@@ -66,6 +67,8 @@ const items = [
 
 For form-bound comboboxes, prefer `Field` composition (`Field` + `FieldLabel` + `FieldError`) instead of standalone controls.
 
+Use `createComboboxItems` when object items should derive stable primitive selection values and labels. Define static collections at module scope and memoize dynamic collections.
+
 ## Patterns from coss particles
 
 - **Portal forwarding**: optional `portalProps` on `ComboboxPopup` → Base UI `Combobox.Portal` (`keepMounted`, `container`, …). See [portal-props.md](../portal-props.md).
diff --git a/bun.lock b/bun.lock
index 4812e6546..0cd54374d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -104,7 +104,7 @@
       "name": "ui",
       "version": "0.1.0",
       "dependencies": {
-        "@base-ui/react": "1.6.0",
+        "@base-ui/react": "1.8.0",
         "@coss/ui": "workspace:*",
         "@daypicker/react": "10.0.1",
         "@hugeicons/core-free-icons": "^2.0.0",
@@ -172,7 +172,7 @@
       "name": "@coss/ui",
       "version": "0.0.0",
       "dependencies": {
-        "@base-ui/react": "1.6.0",
+        "@base-ui/react": "1.8.0",
         "@daypicker/react": "^10.0.1",
         "@hugeicons/core-free-icons": "^2.0.0",
         "@hugeicons/react": "^1.1.1",
@@ -258,7 +258,7 @@
 
     "@babel/preset-typescript": ["@babel/preset-typescript@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "7.27.1", "@babel/helper-validator-option": "7.27.1", "@babel/plugin-syntax-jsx": "7.27.1", "@babel/plugin-transform-modules-commonjs": "7.27.1", "@babel/plugin-transform-typescript": "7.28.0" }, "peerDependencies": { "@babel/core": "7.28.4" } }, "sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ=="],
 
-    "@babel/runtime": ["@babel/runtime@7.29.2", "", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
+    "@babel/runtime": ["@babel/runtime@7.29.7", "", {}, "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw=="],
 
     "@babel/runtime-corejs3": ["@babel/runtime-corejs3@7.28.2", "", { "dependencies": { "core-js-pure": "3.45.0" } }, "sha512-FVFaVs2/dZgD3Y9ZD+AKNKjyGKzwu0C54laAXWUXgLcVXcCX6YZ6GhK2cp7FogSN2OA0Fu+QT8dP3FUdo9ShSQ=="],
 
@@ -268,9 +268,9 @@
 
     "@babel/types": ["@babel/types@7.28.4", "", { "dependencies": { "@babel/helper-string-parser": "7.27.1", "@babel/helper-validator-identifier": "7.27.1" } }, "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q=="],
 
-    "@base-ui/react": ["@base-ui/react@1.6.0", "", { "dependencies": { "@babel/runtime": "^7.29.2", "@base-ui/utils": "0.3.1", "@floating-ui/react-dom": "^2.1.8", "@floating-ui/utils": "^0.2.11", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@date-fns/tz": "^1.2.0", "@types/react": "^17 || ^18 || ^19", "date-fns": "^4.0.0", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@date-fns/tz", "@types/react", "date-fns"] }, "sha512-/jzjTWJYXhRFO45Bev9lc3cHbmjzCMpUqbMZ2AgKy/z25mY9B6shGSNcXcjQar9n5doM0KYW1W8fcFv2jZBuMw=="],
+    "@base-ui/react": ["@base-ui/react@1.8.0", "", { "dependencies": { "@babel/runtime": "^7.29.7", "@base-ui/utils": "0.4.0", "@floating-ui/react-dom": "^2.1.9", "@floating-ui/utils": "^0.2.12", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@date-fns/tz": "^1.2.0", "@types/react": "^17 || ^18 || ^19", "date-fns": "^4.0.0", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@date-fns/tz", "@types/react", "date-fns"] }, "sha512-P0/1sxo6SBVZOklKMIedvTWqw2s2IQzi9x5bIVsXu980cuSOD4NeuRSs+/L7LZQfDkZP/uRZyGPyfFl/B1oH+Q=="],
 
-    "@base-ui/utils": ["@base-ui/utils@0.3.1", "", { "dependencies": { "@babel/runtime": "^7.29.2", "@floating-ui/utils": "^0.2.11", "reselect": "^5.2.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-gFFiltORVmW/N6IILTGxizP3PBpVpysqML1ALY5Vk0mH+7faVkCknOU31goYHN5Aoek2dkjxva1XOD2Ce9WuIg=="],
+    "@base-ui/utils": ["@base-ui/utils@0.4.0", "", { "dependencies": { "@babel/runtime": "^7.29.7", "@floating-ui/utils": "^0.2.12", "reselect": "^5.2.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-bO9fz25kKtPf+aZVyfQrC0PDmJdmVni31W2hCS5/Owb+inwdIL3XU26pCPRPlt4LSxZrBgLwubXQXQlKaFEZzw=="],
 
     "@biomejs/biome": ["@biomejs/biome@2.3.10", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.3.10", "@biomejs/cli-darwin-x64": "2.3.10", "@biomejs/cli-linux-arm64": "2.3.10", "@biomejs/cli-linux-arm64-musl": "2.3.10", "@biomejs/cli-linux-x64": "2.3.10", "@biomejs/cli-linux-x64-musl": "2.3.10", "@biomejs/cli-win32-arm64": "2.3.10", "@biomejs/cli-win32-x64": "2.3.10" }, "bin": { "biome": "bin/biome" } }, "sha512-/uWSUd1MHX2fjqNLHNL6zLYWBbrJeG412/8H7ESuK8ewoRoMPUgHDebqKrPTx/5n6f17Xzqc9hdg3MEqA5hXnQ=="],
 
@@ -380,13 +380,13 @@
 
     "@examples/calcom": ["@examples/calcom@workspace:apps/examples/calcom"],
 
-    "@floating-ui/core": ["@floating-ui/core@1.7.5", "", { "dependencies": { "@floating-ui/utils": "^0.2.11" } }, "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ=="],
+    "@floating-ui/core": ["@floating-ui/core@1.8.0", "", { "dependencies": { "@floating-ui/utils": "^0.2.12" } }, "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ=="],
 
-    "@floating-ui/dom": ["@floating-ui/dom@1.7.6", "", { "dependencies": { "@floating-ui/core": "^1.7.5", "@floating-ui/utils": "^0.2.11" } }, "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ=="],
+    "@floating-ui/dom": ["@floating-ui/dom@1.8.0", "", { "dependencies": { "@floating-ui/core": "^1.8.0", "@floating-ui/utils": "^0.2.12" } }, "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg=="],
 
-    "@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.8", "", { "dependencies": { "@floating-ui/dom": "^1.7.6" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A=="],
+    "@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.9", "", { "dependencies": { "@floating-ui/dom": "^1.8.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg=="],
 
-    "@floating-ui/utils": ["@floating-ui/utils@0.2.11", "", {}, "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="],
+    "@floating-ui/utils": ["@floating-ui/utils@0.2.12", "", {}, "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww=="],
 
     "@formatjs/ecma402-abstract": ["@formatjs/ecma402-abstract@2.3.4", "", { "dependencies": { "@formatjs/fast-memoize": "2.2.7", "@formatjs/intl-localematcher": "0.6.1", "decimal.js": "10.6.0", "tslib": "2.8.1" } }, "sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA=="],
 
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 51c6d3951..7dae7c22e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@base-ui/react": "1.6.0",
+    "@base-ui/react": "1.8.0",
     "@daypicker/react": "^10.0.1",
     "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/react": "^1.1.1",
diff --git a/packages/ui/src/components/avatar.tsx b/packages/ui/src/components/avatar.tsx
index 9a3cf1a92..6f658c559 100644
--- a/packages/ui/src/components/avatar.tsx
+++ b/packages/ui/src/components/avatar.tsx
@@ -11,7 +11,7 @@ export function Avatar({
   return (
     <AvatarPrimitive.Root
       className={cn(
-        "inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs",
+        "relative isolate inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs",
         className,
       )}
       data-slot="avatar"
@@ -26,7 +26,10 @@ export function AvatarImage({
 }: AvatarPrimitive.Image.Props): React.ReactElement {
   return (
     <AvatarPrimitive.Image
-      className={cn("size-full object-cover", className)}
+      className={cn(
+        "absolute inset-0 z-10 size-full object-cover data-error:invisible data-loading:invisible",
+        className,
+      )}
       data-slot="avatar-image"
       {...props}
     />
@@ -40,7 +43,7 @@ export function AvatarFallback({
   return (
     <AvatarPrimitive.Fallback
       className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted",
+        "absolute inset-0 flex size-full items-center justify-center rounded-full bg-muted",
         className,
       )}
       data-slot="avatar-fallback"
diff --git a/packages/ui/src/components/combobox.tsx b/packages/ui/src/components/combobox.tsx
index e374f6686..626c7ea83 100644
--- a/packages/ui/src/components/combobox.tsx
+++ b/packages/ui/src/components/combobox.tsx
@@ -18,8 +18,12 @@ export const ComboboxContext: React.Context<{
   multiple: false,
 });
 
-export function Combobox<Value, Multiple extends boolean | undefined = false>(
-  props: ComboboxPrimitive.Root.Props<Value, Multiple>,
+export function Combobox<
+  Value,
+  Multiple extends boolean | undefined = false,
+  Item = Value,
+>(
+  props: ComboboxPrimitive.Root.Props<Value, Multiple, Item>,
 ): React.ReactElement {
   const chipsRef = React.useRef<Element | null>(null);
   return (
@@ -429,6 +433,9 @@ export function ComboboxChipRemove(
   );
 }
 
+export const createComboboxItems: typeof ComboboxPrimitive.createItems =
+  ComboboxPrimitive.createItems;
+
 export const useComboboxFilter: typeof ComboboxPrimitive.useFilter =
   ComboboxPrimitive.useFilter;
 

From 3bab6543c83b2634a43f5269e29cf86340ce8101 Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Mon, 7 Sep 2026 08:19:11 +0200
Subject: [PATCH 48/49] chore(ui): define Tailwind CSS compatibility (#847)

---
 bun.lock                 | 1 +
 packages/ui/package.json | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/bun.lock b/bun.lock
index 0cd54374d..2281a0308 100644
--- a/bun.lock
+++ b/bun.lock
@@ -200,6 +200,7 @@
       "peerDependencies": {
         "next": "^16.2.5",
         "react": "^19.2.6",
+        "tailwindcss": ">=4.1.17 <5",
       },
     },
   },
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 7dae7c22e..7bb9f1ba4 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -39,7 +39,8 @@
   "name": "@coss/ui",
   "peerDependencies": {
     "next": "^16.2.5",
-    "react": "^19.2.6"
+    "react": "^19.2.6",
+    "tailwindcss": ">=4.1.17 <5"
   },
   "scripts": {
     "clean": "rm -rf node_modules",

From e937becd2d5ffb5c621eed6f8b1f223cbb6051e7 Mon Sep 17 00:00:00 2001
From: Pasquale Vitiello <pasqualevitiello@gmail.com>
Date: Tue, 8 Sep 2026 11:03:58 +0200
Subject: [PATCH 49/49] feat: migrate TanStack Table to v9 (#848)

* feat: migrate TanStack Table to v9

* perf: optimize TanStack Table state updates

* fix: restore team members table selection updates

Subscribe only re-renders when its child is a function, so static JSX left checkboxes stale until a sort. Match the members table: subscribe with a render function and toggle rows on click.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../members/members-page-client.tsx           | 463 ++++++++++--------
 .../[id]/members/team-members-page-client.tsx | 271 +++++-----
 apps/examples/calcom/package.json             |   2 +-
 apps/origin/package.json                      |   2 +-
 apps/origin/public/r/comp-477.json            |   2 +-
 apps/origin/public/r/comp-478.json            |   2 +-
 apps/origin/public/r/comp-479.json            |   2 +-
 apps/origin/public/r/comp-480.json            |   2 +-
 apps/origin/public/r/comp-481.json            |   2 +-
 apps/origin/public/r/comp-482.json            |   2 +-
 apps/origin/public/r/comp-483.json            |   2 +-
 apps/origin/public/r/comp-484.json            |   2 +-
 apps/origin/public/r/comp-485.json            |   2 +-
 .../registry/default/components/comp-477.tsx  |  26 +-
 .../registry/default/components/comp-478.tsx  | 112 +++--
 .../registry/default/components/comp-479.tsx  |  69 ++-
 .../registry/default/components/comp-480.tsx  | 103 ++--
 .../registry/default/components/comp-481.tsx  |  79 +--
 .../registry/default/components/comp-482.tsx  |  37 +-
 .../registry/default/components/comp-483.tsx  |  94 ++--
 .../registry/default/components/comp-484.tsx  |  91 ++--
 .../registry/default/components/comp-485.tsx  | 125 +++--
 apps/ui/package.json                          |   2 +-
 apps/ui/public/r/p-table-3.json               |   2 +-
 apps/ui/public/r/p-table-4.json               |   2 +-
 apps/ui/public/r/p-table-6.json               |   2 +-
 apps/ui/public/r/p-table-8.json               |   2 +-
 .../registry/default/particles/p-table-3.tsx  |  79 ++-
 .../registry/default/particles/p-table-4.tsx  |  91 ++--
 .../registry/default/particles/p-table-6.tsx  |  79 ++-
 .../registry/default/particles/p-table-8.tsx  |  91 ++--
 bun.lock                                      |  18 +-
 32 files changed, 1049 insertions(+), 811 deletions(-)

diff --git a/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx b/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx
index 21d01890d..97ab05926 100644
--- a/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx
+++ b/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx
@@ -41,12 +41,20 @@ import { cn } from "@coss/ui/lib/utils";
 import {
   type Column,
   type ColumnDef,
-  type ColumnSizingState,
+  columnFilteringFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ArrowUpRightIcon,
@@ -127,6 +135,21 @@ type Member = {
   avatarUrl?: string;
 };
 
+const features = tableFeatures({
+  columnFilteringFeature,
+  columnPinningFeature,
+  columnSizingFeature,
+  columnResizingFeature,
+  columnVisibilityFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
 const members: Member[] = [
   {
     avatarUrl:
@@ -352,25 +375,30 @@ function OptionalBadge({ value }: { value?: string }) {
 const FILLER_EXCLUDED_COLUMN_IDS = new Set(["select", "actions"]);
 
 const INITIAL_COLUMN_PINNING = {
-  left: ["select", "name"],
-  right: ["actions"],
+  end: ["actions"],
+  start: ["select", "name"],
 };
 
-function getPinningStyles(column: Column<Member>): CSSProperties {
+function getPinningStyles(
+  column: Column<typeof features, Member, unknown>,
+): CSSProperties {
   const isPinned = column.getIsPinned();
 
   return {
-    "--pinned-left-offset":
-      isPinned === "left" ? `${column.getStart("left")}px` : undefined,
-    left: undefined,
-    position: isPinned === "right" ? "sticky" : undefined,
-    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+    "--pinned-start-offset":
+      isPinned === "start" ? `${column.getStart("start")}px` : undefined,
+    insetInlineEnd:
+      isPinned === "end" ? `${column.getAfter("end")}px` : undefined,
+    insetInlineStart: undefined,
+    position: isPinned === "end" ? "sticky" : undefined,
     zIndex: isPinned ? 1 : 0,
   } as CSSProperties;
 }
 
-function getPinnedDataAttribute(column: Column<Member>): {
-  "data-pinned"?: "left" | "right";
+function getPinnedDataAttribute(
+  column: Column<typeof features, Member, unknown>,
+): {
+  "data-pinned"?: "end" | "start";
 } {
   const isPinned = column.getIsPinned();
   return isPinned ? { "data-pinned": isPinned } : {};
@@ -421,8 +449,8 @@ function getColumnDisplayWidth({
 
 function getColumns(
   columnVisibility: Record<ColumnKey, boolean>,
-): ColumnDef<Member>[] {
-  const cols: ColumnDef<Member>[] = [
+): ColumnDef<typeof features, Member>[] {
+  const cols: ColumnDef<typeof features, Member>[] = [
     {
       cell: ({ row }) => (
         <Label>
@@ -595,10 +623,8 @@ export function MembersPageClient() {
   const [columnVisibility, setColumnVisibility] = useState(
     DEFAULT_COLUMN_VISIBILITY,
   );
-  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
   const tableContainerRef = useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = useState(0);
-  const [rowSelection, setRowSelection] = useState({});
   const [sorting, setSorting] = useState<SortingState>([
     { desc: false, id: "name" },
   ]);
@@ -663,35 +689,25 @@ export function MembersPageClient() {
     return () => observer.disconnect();
   }, []);
 
-  const table = useReactTable({
-    columnResizeMode: "onChange",
-    columns,
-    data: filteredMembers,
-    enableRowSelection: true,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getRowId: (row) => row.id,
-    getSortedRowModel: getSortedRowModel(),
-    initialState: {
-      columnPinning: INITIAL_COLUMN_PINNING,
-    },
-    onColumnSizingChange: setColumnSizing,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    state: {
-      columnSizing,
-      rowSelection,
-      sorting,
+  const table = useTable(
+    {
+      columnResizeMode: "onChange",
+      columns,
+      data: filteredMembers,
+      enableRowSelection: true,
+      enableSortingRemoval: false,
+      features,
+      getRowId: (row) => row.id,
+      initialState: {
+        columnPinning: INITIAL_COLUMN_PINNING,
+      },
+      onSortingChange: setSorting,
+      state: {
+        sorting,
+      },
     },
-  });
-
-  const headers = table.getHeaderGroups()[0]?.headers ?? [];
-  const columnsTotalSize = table.getCenterTotalSize();
-  const tableWidth =
-    containerWidth > 0
-      ? Math.max(containerWidth + 2, columnsTotalSize)
-      : columnsTotalSize;
-  const fillerColumnId = getFillerColumnId(headers);
+    () => null,
+  );
 
   return (
     <>
@@ -809,175 +825,204 @@ export function MembersPageClient() {
           </Button>
         </div>
 
-        <CardFrame
-          className="w-full before:bg-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] **:data-[slot=table-container]:overflow-x-visible dark:before:bg-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))]"
-          ref={tableContainerRef}
+        <table.Subscribe
+          selector={(state) => ({
+            columnSizing: state.columnSizing,
+            rowSelection: state.rowSelection,
+            sorting: state.sorting,
+          })}
         >
-          <Table
-            render={
-              <ScrollArea className="**:data-[slot=scroll-area-scrollbar]:z-10 **:data-[slot=scroll-area-scrollbar]:translate-y-3" />
-            }
-            className="table-fixed [--border:color-mix(in_srgb,var(--color-black)_8%,color-mix(in_srgb,var(--color-black)_3%,var(--background)))] dark:[--border:color-mix(in_srgb,var(--color-white)_6%,color-mix(in_srgb,var(--color-white)_4.6%,var(--background)))]"
-            variant="card"
-          >
-            <TableHeader>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => (
-                    <TableHead
-                      aria-sort={
-                        header.column.getIsSorted() === "asc"
-                          ? "ascending"
-                          : header.column.getIsSorted() === "desc"
-                            ? "descending"
-                            : "none"
-                      }
-                      className="relative z-1 select-none bg-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:to-transparent data-[pinned=left]:before:start-full data-[pinned=right]:before:end-full in-data-overflow-x-end:data-[pinned=right]:before:bg-linear-to-l last:*:data-[slot=column-resize-handle]:opacity-0 data-[pinned=left]:max-md:before:hidden data-[pinned=left]:md:sticky data-[pinned=left]:md:left-(--pinned-left-offset) in-data-overflow-x-start:data-[pinned=left]:md:before:bg-linear-to-r dark:bg-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))] dark:before:from-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))]"
-                      colSpan={header.colSpan}
-                      key={header.id}
-                      {...getPinnedDataAttribute(header.column)}
-                      style={{
-                        ...getPinningStyles(header.column),
-                        width: getColumnDisplayWidth({
-                          columnId: header.column.id,
-                          columnsTotalSize,
-                          fillerColumnId,
-                          headers,
-                          size: header.getSize(),
-                          tableWidth,
-                        }),
-                      }}
-                    >
-                      {header.isPlaceholder ? null : header.column.getCanSort() ? (
-                        <div
-                          className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
-                          onClick={header.column.getToggleSortingHandler()}
-                          onKeyDown={(event) => {
-                            if (event.key === "Enter" || event.key === " ") {
-                              event.preventDefault();
-                              header.column.getToggleSortingHandler()?.(event);
+          {() => {
+            const headers = table.getHeaderGroups()[0]?.headers ?? [];
+            const columnsTotalSize = table.getCenterTotalSize();
+            const tableWidth =
+              containerWidth > 0
+                ? Math.max(containerWidth + 2, columnsTotalSize)
+                : columnsTotalSize;
+            const fillerColumnId = getFillerColumnId(headers);
+
+            return (
+              <CardFrame
+                className="w-full before:bg-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] **:data-[slot=table-container]:overflow-x-visible dark:before:bg-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))]"
+                ref={tableContainerRef}
+              >
+                <Table
+                  render={
+                    <ScrollArea className="**:data-[slot=scroll-area-scrollbar]:z-10 **:data-[slot=scroll-area-scrollbar]:translate-y-3" />
+                  }
+                  className="table-fixed [--border:color-mix(in_srgb,var(--color-black)_8%,color-mix(in_srgb,var(--color-black)_3%,var(--background)))] dark:[--border:color-mix(in_srgb,var(--color-white)_6%,color-mix(in_srgb,var(--color-white)_4.6%,var(--background)))]"
+                  variant="card"
+                >
+                  <TableHeader>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                      <TableRow key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => (
+                          <TableHead
+                            aria-sort={
+                              header.column.getIsSorted() === "asc"
+                                ? "ascending"
+                                : header.column.getIsSorted() === "desc"
+                                  ? "descending"
+                                  : "none"
                             }
-                          }}
-                          role="button"
-                          tabIndex={0}
-                        >
-                          <span className="truncate text-sm">
-                            {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
+                            className="relative z-1 select-none bg-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:to-transparent data-[pinned=start]:before:start-full data-[pinned=end]:before:end-full in-data-overflow-x-end:data-[pinned=end]:before:bg-linear-to-l last:*:data-[slot=column-resize-handle]:opacity-0 data-[pinned=start]:max-md:before:hidden data-[pinned=start]:md:sticky data-[pinned=start]:md:start-(--pinned-start-offset) in-data-overflow-x-start:data-[pinned=start]:md:before:bg-linear-to-r dark:bg-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))] dark:before:from-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))]"
+                            colSpan={header.colSpan}
+                            key={header.id}
+                            {...getPinnedDataAttribute(header.column)}
+                            style={{
+                              ...getPinningStyles(header.column),
+                              width: getColumnDisplayWidth({
+                                columnId: header.column.id,
+                                columnsTotalSize,
+                                fillerColumnId,
+                                headers,
+                                size: header.getSize(),
+                                tableWidth,
+                              }),
+                            }}
+                          >
+                            {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                              <div
+                                className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
+                                onClick={header.column.getToggleSortingHandler()}
+                                onKeyDown={(event) => {
+                                  if (
+                                    event.key === "Enter" ||
+                                    event.key === " "
+                                  ) {
+                                    event.preventDefault();
+                                    header.column.getToggleSortingHandler()?.(
+                                      event,
+                                    );
+                                  }
+                                }}
+                                role="button"
+                                tabIndex={0}
+                              >
+                                <span className="truncate text-sm">
+                                  {flexRender(
+                                    header.column.columnDef.header,
+                                    header.getContext(),
+                                  )}
+                                </span>
+                                {{
+                                  asc: (
+                                    <ChevronUpIcon
+                                      aria-hidden="true"
+                                      className="size-4 shrink-0 opacity-80"
+                                    />
+                                  ),
+                                  desc: (
+                                    <ChevronDownIcon
+                                      aria-hidden="true"
+                                      className="size-4 shrink-0 opacity-80"
+                                    />
+                                  ),
+                                }[header.column.getIsSorted() as string] ??
+                                  null}
+                              </div>
+                            ) : (
+                              <span className="truncate">
+                                {flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext(),
+                                )}
+                              </span>
                             )}
-                          </span>
-                          {{
-                            asc: (
-                              <ChevronUpIcon
-                                aria-hidden="true"
-                                className="size-4 shrink-0 opacity-80"
-                              />
-                            ),
-                            desc: (
-                              <ChevronDownIcon
+                            {header.column.getCanResize() ? (
+                              <div
                                 aria-hidden="true"
-                                className="size-4 shrink-0 opacity-80"
+                                className="user-select-none absolute -end-2 top-0 z-10 flex h-full w-4 touch-none items-center justify-center before:absolute before:inset-y-2 before:w-px before:-translate-x-px before:bg-input"
+                                data-slot="column-resize-handle"
+                                onDoubleClick={() => header.column.resetSize()}
+                                onMouseDown={header.getResizeHandler()}
+                                style={{ cursor: "col-resize" }}
+                                onTouchStart={header.getResizeHandler()}
                               />
-                            ),
-                          }[header.column.getIsSorted() as string] ?? null}
-                        </div>
-                      ) : (
-                        <span className="truncate">
-                          {flexRender(
-                            header.column.columnDef.header,
-                            header.getContext(),
-                          )}
-                        </span>
-                      )}
-                      {header.column.getCanResize() ? (
-                        <div
-                          aria-hidden="true"
-                          className="user-select-none absolute -end-2 top-0 z-10 flex h-full w-4 touch-none items-center justify-center before:absolute before:inset-y-2 before:w-px before:-translate-x-px before:bg-input"
-                          data-slot="column-resize-handle"
-                          onDoubleClick={() => header.column.resetSize()}
-                          onMouseDown={header.getResizeHandler()}
-                          style={{ cursor: "col-resize" }}
-                          onTouchStart={header.getResizeHandler()}
-                        />
-                      ) : null}
-                    </TableHead>
-                  ))}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody className="in-data-overflow-x-start:before:rounded-ss-none in-data-overflow-x-end:before:rounded-se-none in-data-overflow-x-start:in-data-[variant=card]:*:[tr]:first:*:[td]:first:rounded-ss-none in-data-overflow-x-end:in-data-[variant=card]:*:[tr]:last:*:[td]:last:rounded-ee-none in-data-overflow-x-end:in-data-[variant=card]:*:[tr]:first:*:[td]:last:rounded-se-none in-data-overflow-x-start:in-data-[variant=card]:*:[tr]:last:*:[td]:first:rounded-es-none">
-              {table.getRowModel().rows.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    data-state={row.getIsSelected() ? "selected" : undefined}
-                    key={row.id}
-                    onClick={(event) => {
-                      if (shouldIgnoreRowSelectionClick(event.target)) return;
-                      row.toggleSelected();
-                    }}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell
-                        className="before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-card in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_2%)] in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_4%)] before:to-transparent data-[pinned=left]:before:start-full data-[pinned=right]:before:end-full in-data-overflow-x-end:data-[pinned=right]:before:bg-linear-to-l data-[pinned=left]:max-md:before:hidden data-[pinned=left]:md:sticky data-[pinned=left]:md:left-(--pinned-left-offset) in-data-overflow-x-start:data-[pinned=left]:md:before:bg-linear-to-r dark:in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_2%)] dark:in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_4%)]"
-                        key={cell.id}
-                        {...getPinnedDataAttribute(cell.column)}
-                        style={{
-                          ...getPinningStyles(cell.column),
-                          width: getColumnDisplayWidth({
-                            columnId: cell.column.id,
-                            columnsTotalSize,
-                            fillerColumnId,
-                            headers,
-                            size: cell.column.getSize(),
-                            tableWidth,
-                          }),
-                        }}
-                      >
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </TableCell>
+                            ) : null}
+                          </TableHead>
+                        ))}
+                      </TableRow>
                     ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell
-                    className="h-24 text-center"
-                    colSpan={columns.length}
-                  >
-                    No members found.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-          <CardFrameFooter className="flex items-center justify-between gap-2 border-t">
-            <p className="text-muted-foreground text-sm">
-              {table.getFilteredSelectedRowModel().rows.length > 0 ? (
-                <>
-                  <strong className="font-medium text-foreground">
-                    {table.getFilteredSelectedRowModel().rows.length}
-                  </strong>{" "}
-                  of{" "}
-                  <strong className="font-medium text-foreground">
-                    {table.getFilteredRowModel().rows.length}
-                  </strong>{" "}
-                  selected
-                </>
-              ) : (
-                <>
-                  <strong className="font-medium text-foreground">
-                    {table.getFilteredRowModel().rows.length}
-                  </strong>{" "}
-                  members
-                </>
-              )}
-            </p>
-          </CardFrameFooter>
-        </CardFrame>
+                  </TableHeader>
+                  <TableBody className="in-data-overflow-x-start:before:rounded-ss-none in-data-overflow-x-end:before:rounded-se-none in-data-overflow-x-start:in-data-[variant=card]:*:[tr]:first:*:[td]:first:rounded-ss-none in-data-overflow-x-end:in-data-[variant=card]:*:[tr]:last:*:[td]:last:rounded-ee-none in-data-overflow-x-end:in-data-[variant=card]:*:[tr]:first:*:[td]:last:rounded-se-none in-data-overflow-x-start:in-data-[variant=card]:*:[tr]:last:*:[td]:first:rounded-es-none">
+                    {table.getRowModel().rows.length ? (
+                      table.getRowModel().rows.map((row) => (
+                        <TableRow
+                          data-state={
+                            row.getIsSelected() ? "selected" : undefined
+                          }
+                          key={row.id}
+                          onClick={(event) => {
+                            if (shouldIgnoreRowSelectionClick(event.target))
+                              return;
+                            row.toggleSelected();
+                          }}
+                        >
+                          {row.getVisibleCells().map((cell) => (
+                            <TableCell
+                              className="before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-card in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_2%)] in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_4%)] before:to-transparent data-[pinned=start]:before:start-full data-[pinned=end]:before:end-full in-data-overflow-x-end:data-[pinned=end]:before:bg-linear-to-l data-[pinned=start]:max-md:before:hidden data-[pinned=start]:md:sticky data-[pinned=start]:md:start-(--pinned-start-offset) in-data-overflow-x-start:data-[pinned=start]:md:before:bg-linear-to-r dark:in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_2%)] dark:in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_4%)]"
+                              key={cell.id}
+                              {...getPinnedDataAttribute(cell.column)}
+                              style={{
+                                ...getPinningStyles(cell.column),
+                                width: getColumnDisplayWidth({
+                                  columnId: cell.column.id,
+                                  columnsTotalSize,
+                                  fillerColumnId,
+                                  headers,
+                                  size: cell.column.getSize(),
+                                  tableWidth,
+                                }),
+                              }}
+                            >
+                              {flexRender(
+                                cell.column.columnDef.cell,
+                                cell.getContext(),
+                              )}
+                            </TableCell>
+                          ))}
+                        </TableRow>
+                      ))
+                    ) : (
+                      <TableRow>
+                        <TableCell
+                          className="h-24 text-center"
+                          colSpan={columns.length}
+                        >
+                          No members found.
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </TableBody>
+                </Table>
+                <CardFrameFooter className="flex items-center justify-between gap-2 border-t">
+                  <p className="text-muted-foreground text-sm">
+                    {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+                      <>
+                        <strong className="font-medium text-foreground">
+                          {table.getFilteredSelectedRowModel().rows.length}
+                        </strong>{" "}
+                        of{" "}
+                        <strong className="font-medium text-foreground">
+                          {table.getFilteredRowModel().rows.length}
+                        </strong>{" "}
+                        selected
+                      </>
+                    ) : (
+                      <>
+                        <strong className="font-medium text-foreground">
+                          {table.getFilteredRowModel().rows.length}
+                        </strong>{" "}
+                        members
+                      </>
+                    )}
+                  </p>
+                </CardFrameFooter>
+              </CardFrame>
+            );
+          }}
+        </table.Subscribe>
       </div>
     </>
   );
diff --git a/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx b/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
index ddeae8462..9bee2d2b5 100644
--- a/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
+++ b/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
@@ -48,11 +48,17 @@ import {
 } from "@coss/ui/components/table";
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ArrowUpRightIcon,
@@ -98,6 +104,18 @@ type TeamMember = {
   hasOptions?: boolean;
 };
 
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
 const members: TeamMember[] = [
   {
     avatarUrl:
@@ -147,6 +165,15 @@ const members: TeamMember[] = [
   },
 ];
 
+function shouldIgnoreRowSelectionClick(target: EventTarget | null): boolean {
+  return (
+    target instanceof Element &&
+    target.closest(
+      'a, button, input, select, textarea, [role="button"], [role="checkbox"], [data-slot="checkbox"], [data-slot="label"]',
+    ) !== null
+  );
+}
+
 function getInitials(name: string): string {
   const parts = name.trim().split(/\s+/);
   if (parts.length === 0) return "";
@@ -230,17 +257,16 @@ function getColumns({
 }: {
   showRoleColumn: boolean;
   showLastActiveColumn: boolean;
-}): ColumnDef<TeamMember>[] {
-  const cols: ColumnDef<TeamMember>[] = [
+}): ColumnDef<typeof features, TeamMember>[] {
+  const cols: ColumnDef<typeof features, TeamMember>[] = [
     {
       cell: ({ row }) => (
-        <Label className="before:absolute before:inset-0">
+        <Label>
           <Checkbox
             aria-label={`Select ${row.original.name}`}
             checked={row.getIsSelected()}
             onCheckedChange={(value) => row.toggleSelected(!!value)}
           />
-          <span className="sr-only">{`Select ${row.original.name}`}</span>
         </Label>
       ),
       enableSorting: false,
@@ -330,7 +356,6 @@ export function TeamMembersPageClient() {
   const [searchValue, setSearchValue] = useState("");
   const [showRoleColumn, setShowRoleColumn] = useState(true);
   const [showLastActiveColumn, setShowLastActiveColumn] = useState(true);
-  const [rowSelection, setRowSelection] = useState({});
   const [sorting, setSorting] = useState<SortingState>([
     { desc: false, id: "name" },
   ]);
@@ -389,21 +414,21 @@ export function TeamMembersPageClient() {
     });
   }, [showLastActiveColumn, showRoleColumn]);
 
-  const table = useReactTable({
-    columns,
-    data: filteredMembers,
-    enableRowSelection: true,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getRowId: (row) => row.id,
-    getSortedRowModel: getSortedRowModel(),
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    state: {
-      rowSelection,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data: filteredMembers,
+      enableRowSelection: true,
+      enableSortingRemoval: false,
+      features,
+      getRowId: (row) => row.id,
+      onSortingChange: setSorting,
+      state: {
+        sorting,
+      },
     },
-  });
+    () => null,
+  );
 
   return (
     <>
@@ -521,100 +546,124 @@ export function TeamMembersPageClient() {
           </Button>
         </div>
 
-        <CardFrame className="w-full">
-          <Table variant="card" className="table-fixed">
-            <TableHeader>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => {
-                    const columnSize = header.column.getSize();
-
-                    return (
-                      <TableHead
-                        className={
-                          header.column.id === "name" ? "sm:w-auto!" : undefined
-                        }
-                        key={header.id}
-                        style={
-                          columnSize ? { width: `${columnSize}px` } : undefined
+        <table.Subscribe
+          selector={(state) => ({
+            rowSelection: state.rowSelection,
+            sorting: state.sorting,
+          })}
+        >
+          {() => (
+            <CardFrame className="w-full">
+              <Table variant="card" className="table-fixed">
+                <TableHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => {
+                        const columnSize = header.column.getSize();
+
+                        return (
+                          <TableHead
+                            className={
+                              header.column.id === "name"
+                                ? "sm:w-auto!"
+                                : undefined
+                            }
+                            key={header.id}
+                            style={
+                              columnSize
+                                ? { width: `${columnSize}px` }
+                                : undefined
+                            }
+                          >
+                            {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                              <div
+                                className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
+                                onClick={header.column.getToggleSortingHandler()}
+                                onKeyDown={(event) => {
+                                  if (
+                                    event.key === "Enter" ||
+                                    event.key === " "
+                                  ) {
+                                    event.preventDefault();
+                                    header.column.getToggleSortingHandler()?.(
+                                      event,
+                                    );
+                                  }
+                                }}
+                                role="button"
+                                tabIndex={0}
+                              >
+                                {flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext(),
+                                )}
+                                {{
+                                  asc: (
+                                    <ChevronUpIcon
+                                      aria-hidden="true"
+                                      className="size-4 shrink-0 opacity-80"
+                                    />
+                                  ),
+                                  desc: (
+                                    <ChevronDownIcon
+                                      aria-hidden="true"
+                                      className="size-4 shrink-0 opacity-80"
+                                    />
+                                  ),
+                                }[header.column.getIsSorted() as string] ??
+                                  null}
+                              </div>
+                            ) : (
+                              flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )
+                            )}
+                          </TableHead>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {table.getRowModel().rows.length ? (
+                    table.getRowModel().rows.map((row) => (
+                      <TableRow
+                        data-state={
+                          row.getIsSelected() ? "selected" : undefined
                         }
+                        key={row.id}
+                        onClick={(event) => {
+                          if (shouldIgnoreRowSelectionClick(event.target))
+                            return;
+                          row.toggleSelected();
+                        }}
                       >
-                        {header.isPlaceholder ? null : header.column.getCanSort() ? (
-                          <div
-                            className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
-                            onClick={header.column.getToggleSortingHandler()}
-                            onKeyDown={(event) => {
-                              if (event.key === "Enter" || event.key === " ") {
-                                event.preventDefault();
-                                header.column.getToggleSortingHandler()?.(
-                                  event,
-                                );
-                              }
-                            }}
-                            role="button"
-                            tabIndex={0}
-                          >
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell key={cell.id}>
                             {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
                             )}
-                            {{
-                              asc: (
-                                <ChevronUpIcon
-                                  aria-hidden="true"
-                                  className="size-4 shrink-0 opacity-80"
-                                />
-                              ),
-                              desc: (
-                                <ChevronDownIcon
-                                  aria-hidden="true"
-                                  className="size-4 shrink-0 opacity-80"
-                                />
-                              ),
-                            }[header.column.getIsSorted() as string] ?? null}
-                          </div>
-                        ) : (
-                          flexRender(
-                            header.column.columnDef.header,
-                            header.getContext(),
-                          )
-                        )}
-                      </TableHead>
-                    );
-                  })}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    data-state={row.getIsSelected() ? "selected" : undefined}
-                    key={row.id}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell
+                        className="h-24 text-center"
+                        colSpan={columns.length}
+                      >
+                        No members found.
                       </TableCell>
-                    ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell
-                    className="h-24 text-center"
-                    colSpan={columns.length}
-                  >
-                    No members found.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </CardFrame>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </CardFrame>
+          )}
+        </table.Subscribe>
       </div>
     </>
   );
diff --git a/apps/examples/calcom/package.json b/apps/examples/calcom/package.json
index e776f33fa..1ffc54080 100644
--- a/apps/examples/calcom/package.json
+++ b/apps/examples/calcom/package.json
@@ -7,7 +7,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/react": "^1.1.1",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.2.4",
     "dompurify": "^3.3.1",
     "lucide-react": "^0.555.0",
     "marked": "^17.0.1",
diff --git a/apps/origin/package.json b/apps/origin/package.json
index a0a2f461b..22756e999 100644
--- a/apps/origin/package.json
+++ b/apps/origin/package.json
@@ -10,7 +10,7 @@
     "@origin-space/image-cropper": "^0.1.9",
     "@radix-ui/react-icons": "^1.3.2",
     "@remixicon/react": "^4.7.0",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.1.1",
diff --git a/apps/origin/public/r/comp-477.json b/apps/origin/public/r/comp-477.json
index 73fe24bb1..e150ef997 100644
--- a/apps/origin/public/r/comp-477.json
+++ b/apps/origin/public/r/comp-477.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-477.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { useEffect, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    getCoreRowModel: getCoreRowModel(),\n  });\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter className=\"bg-transparent\">\n          <TableRow className=\"hover:bg-transparent\">\n            <TableCell colSpan={5}>Total</TableCell>\n            <TableCell className=\"text-right\">\n              {new Intl.NumberFormat(\"en-US\", {\n                currency: \"USD\",\n                style: \"currency\",\n              }).format(data.reduce((total, item) => total + item.balance, 0))}\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Basic data table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      features,\n    },\n    (state) => ({ rowSelection: state.rowSelection }),\n  );\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter className=\"bg-transparent\">\n          <TableRow className=\"hover:bg-transparent\">\n            <TableCell colSpan={5}>Total</TableCell>\n            <TableCell className=\"text-right\">\n              {new Intl.NumberFormat(\"en-US\", {\n                currency: \"USD\",\n                style: \"currency\",\n              }).format(data.reduce((total, item) => total + item.balance, 0))}\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Basic data table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-478.json b/apps/origin/public/r/comp-478.json
index c20953dbf..93c0f9222 100644
--- a/apps/origin/public/r/comp-478.json
+++ b/apps/origin/public/r/comp-478.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-478.tsx",
-      "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  type ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedMinMaxValues,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getSortedRowModel,\n  type RowData,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  ExternalLinkIcon,\n  SearchIcon,\n} from \"lucide-react\";\nimport { useId, useMemo, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ndeclare module \"@tanstack/react-table\" {\n  //allows us to define custom properties for our columns\n  // Type parameters TData and TValue must match TanStack Table's declaration exactly\n  // biome-ignore lint: Type parameters required for module augmentation compatibility\n  interface ColumnMeta<TData extends RowData, TValue> {\n    filterVariant?: \"text\" | \"range\" | \"select\";\n  }\n}\n\ntype Item = {\n  id: string;\n  keyword: string;\n  intents: Array<\n    \"Informational\" | \"Navigational\" | \"Commercial\" | \"Transactional\"\n  >;\n  volume: number;\n  cpc: number;\n  traffic: number;\n  link: string;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"keyword\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"keyword\")}</div>\n    ),\n    header: \"Keyword\",\n  },\n  {\n    accessorKey: \"intents\",\n    cell: ({ row }) => {\n      const intents = row.getValue(\"intents\") as string[];\n      return (\n        <div className=\"flex gap-1\">\n          {intents.map((intent) => {\n            const styles = {\n              Commercial: \"bg-amber-400/20 text-amber-500\",\n              Informational: \"bg-indigo-400/20 text-indigo-500\",\n              Navigational: \"bg-emerald-400/20 text-emerald-500\",\n              Transactional: \"bg-rose-400/20 text-rose-500\",\n            }[intent];\n\n            return (\n              <div\n                className={cn(\n                  \"flex size-5 items-center justify-center rounded font-medium text-xs\",\n                  styles,\n                )}\n                key={intent}\n              >\n                {intent.charAt(0)}\n              </div>\n            );\n          })}\n        </div>\n      );\n    },\n    enableSorting: false,\n    filterFn: (row, id, filterValue) => {\n      const rowValue = row.getValue(id);\n      return Array.isArray(rowValue) && rowValue.includes(filterValue);\n    },\n    header: \"Intents\",\n    meta: {\n      filterVariant: \"select\",\n    },\n  },\n  {\n    accessorKey: \"volume\",\n    cell: ({ row }) => {\n      const volume = Number.parseInt(row.getValue(\"volume\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(volume);\n    },\n    header: \"Volume\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"cpc\",\n    cell: ({ row }) => <div>${row.getValue(\"cpc\")}</div>,\n    header: \"CPC\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"traffic\",\n    cell: ({ row }) => {\n      const traffic = Number.parseInt(row.getValue(\"traffic\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(traffic);\n    },\n    header: \"Traffic\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"link\",\n    cell: ({ row }) => (\n      <a className=\"inline-flex items-center gap-1 hover:underline\" href=\"#\">\n        {row.getValue(\"link\")} <ExternalLinkIcon aria-hidden=\"true\" size={12} />\n      </a>\n    ),\n    enableSorting: false,\n    header: \"Link\",\n  },\n];\n\nconst items: Item[] = [\n  {\n    cpc: 2.5,\n    id: \"1\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react components\",\n    link: \"https://coss.com/origin\",\n    traffic: 88,\n    volume: 2507,\n  },\n  {\n    cpc: 4.75,\n    id: \"2\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"buy react templates\",\n    link: \"https://coss.com/origin/input\",\n    traffic: 65,\n    volume: 1850,\n  },\n  {\n    cpc: 3.25,\n    id: \"3\",\n    intents: [\"Informational\", \"Commercial\"],\n    keyword: \"react ui library\",\n    link: \"https://coss.com/origin/badge\",\n    traffic: 112,\n    volume: 3200,\n  },\n  {\n    cpc: 1.95,\n    id: \"4\",\n    intents: [\"Transactional\"],\n    keyword: \"tailwind components download\",\n    link: \"https://coss.com/origin/alert\",\n    traffic: 45,\n    volume: 890,\n  },\n  {\n    cpc: 5.5,\n    id: \"5\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react dashboard template free\",\n    link: \"https://coss.com/origin/tabs\",\n    traffic: 156,\n    volume: 4100,\n  },\n  {\n    cpc: 1.25,\n    id: \"6\",\n    intents: [\"Informational\"],\n    keyword: \"how to use react components\",\n    link: \"https://coss.com/origin/table\",\n    traffic: 42,\n    volume: 1200,\n  },\n  {\n    cpc: 6.8,\n    id: \"7\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react ui kit premium\",\n    link: \"https://coss.com/origin/avatar\",\n    traffic: 28,\n    volume: 760,\n  },\n  {\n    cpc: 1.8,\n    id: \"8\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react component documentation\",\n    link: \"https://coss.com/origin\",\n    traffic: 35,\n    volume: 950,\n  },\n];\n\nexport default function Component() {\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"traffic\",\n    },\n  ]);\n\n  const table = useReactTable({\n    columns,\n    data: items,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getFacetedMinMaxValues: getFacetedMinMaxValues(), // generate min/max values for range filter\n    getFacetedRowModel: getFacetedRowModel(), // client-side faceting\n    getFacetedUniqueValues: getFacetedUniqueValues(), // generate unique values for select filter/autocomplete\n    getFilteredRowModel: getFilteredRowModel(), //client-side filtering\n    getSortedRowModel: getSortedRowModel(),\n    onColumnFiltersChange: setColumnFilters,\n    onSortingChange: setSorting,\n    state: {\n      columnFilters,\n      sorting,\n    },\n  });\n\n  const keywordColumn = table.getColumn(\"keyword\");\n  const intentsColumn = table.getColumn(\"intents\");\n  const volumeColumn = table.getColumn(\"volume\");\n  const cpcColumn = table.getColumn(\"cpc\");\n  const trafficColumn = table.getColumn(\"traffic\");\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap gap-3\">\n        {/* Search input */}\n        {keywordColumn && (\n          <div className=\"w-44\">\n            <Filter column={keywordColumn} />\n          </div>\n        )}\n        {/* Intents select */}\n        {intentsColumn && (\n          <div className=\"w-36\">\n            <Filter column={intentsColumn} />\n          </div>\n        )}\n        {/* Volume inputs */}\n        {volumeColumn && (\n          <div className=\"w-36\">\n            <Filter column={volumeColumn} />\n          </div>\n        )}\n        {/* CPC inputs */}\n        {cpcColumn && (\n          <div className=\"w-36\">\n            <Filter column={cpcColumn} />\n          </div>\n        )}\n        {/* Traffic inputs */}\n        {trafficColumn && (\n          <div className=\"w-36\">\n            <Filter column={trafficColumn} />\n          </div>\n        )}\n      </div>\n\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t\"\n                    key={header.id}\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? (\n                          <span aria-hidden=\"true\" className=\"size-4\" />\n                        )}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Data table with filters made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction Filter({ column }: { column: Column<Item, unknown> }) {\n  const id = useId();\n  const columnFilterValue = column.getFilterValue();\n  const { filterVariant } = column.columnDef.meta ?? {};\n  const columnHeader =\n    typeof column.columnDef.header === \"string\" ? column.columnDef.header : \"\";\n  const sortedUniqueValues = useMemo(() => {\n    if (filterVariant === \"range\") return [];\n\n    // Get all unique values from the column\n    const values = Array.from(column.getFacetedUniqueValues().keys());\n\n    // If the values are arrays, flatten them and get unique items\n    const flattenedValues = values.reduce((acc: string[], curr) => {\n      if (Array.isArray(curr)) {\n        acc.push(...curr);\n      } else {\n        acc.push(curr);\n      }\n      return acc;\n    }, []);\n\n    // Get unique values and sort them\n    return Array.from(new Set(flattenedValues)).sort();\n  }, [column, filterVariant]);\n\n  if (filterVariant === \"range\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label>{columnHeader}</Label>\n        <div className=\"flex\">\n          <Input\n            aria-label={`${columnHeader} min`}\n            className=\"flex-1 rounded-e-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-1`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                e.target.value ? Number(e.target.value) : undefined,\n                old?.[1],\n              ])\n            }\n            placeholder=\"Min\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n          />\n          <Input\n            aria-label={`${columnHeader} max`}\n            className=\"-ms-px flex-1 rounded-s-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-2`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                old?.[0],\n                e.target.value ? Number(e.target.value) : undefined,\n              ])\n            }\n            placeholder=\"Max\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  if (filterVariant === \"select\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={`${id}-select`}>{columnHeader}</Label>\n        <Select\n          onValueChange={(value) => {\n            column.setFilterValue(value === \"all\" ? undefined : value);\n          }}\n          value={columnFilterValue?.toString() ?? \"all\"}\n        >\n          <SelectTrigger id={`${id}-select`}>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">All</SelectItem>\n            {sortedUniqueValues.map((value) => (\n              <SelectItem key={String(value)} value={String(value)}>\n                {String(value)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`${id}-input`}>{columnHeader}</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-9\"\n          id={`${id}-input`}\n          onChange={(e) => column.setFilterValue(e.target.value)}\n          placeholder={`Search ${columnHeader.toLowerCase()}`}\n          type=\"text\"\n          value={(columnFilterValue ?? \"\") as string}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <SearchIcon size={16} />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  columnFacetingFeature,\n  columnFilteringFeature,\n  columnVisibilityFeature,\n  createFacetedMinMaxValues,\n  createFacetedRowModel,\n  createFacetedUniqueValues,\n  createFilteredRowModel,\n  createSortedRowModel,\n  filterFn_includesString,\n  filterFn_inNumberRange,\n  flexRender,\n  metaHelper,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  ExternalLinkIcon,\n  SearchIcon,\n} from \"lucide-react\";\nimport { useId, useMemo } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  keyword: string;\n  intents: Array<\n    \"Informational\" | \"Navigational\" | \"Commercial\" | \"Transactional\"\n  >;\n  volume: number;\n  cpc: number;\n  traffic: number;\n  link: string;\n};\n\nconst features = tableFeatures({\n  columnFilteringFeature,\n  columnFacetingFeature,\n  columnVisibilityFeature,\n  facetedMinMaxValues: createFacetedMinMaxValues(),\n  facetedRowModel: createFacetedRowModel(),\n  facetedUniqueValues: createFacetedUniqueValues(),\n  filteredRowModel: createFilteredRowModel(),\n  filterFns: {\n    includesString: filterFn_includesString,\n    inNumberRange: filterFn_inNumberRange,\n  },\n  columnMeta: metaHelper<{\n    filterVariant?: \"text\" | \"range\" | \"select\";\n  }>(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"keyword\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"keyword\")}</div>\n    ),\n    header: \"Keyword\",\n  },\n  {\n    accessorKey: \"intents\",\n    cell: ({ row }) => {\n      const intents = row.getValue(\"intents\") as string[];\n      return (\n        <div className=\"flex gap-1\">\n          {intents.map((intent) => {\n            const styles = {\n              Commercial: \"bg-amber-400/20 text-amber-500\",\n              Informational: \"bg-indigo-400/20 text-indigo-500\",\n              Navigational: \"bg-emerald-400/20 text-emerald-500\",\n              Transactional: \"bg-rose-400/20 text-rose-500\",\n            }[intent];\n\n            return (\n              <div\n                className={cn(\n                  \"flex size-5 items-center justify-center rounded font-medium text-xs\",\n                  styles,\n                )}\n                key={intent}\n              >\n                {intent.charAt(0)}\n              </div>\n            );\n          })}\n        </div>\n      );\n    },\n    enableSorting: false,\n    filterFn: (row, id, filterValue) => {\n      const rowValue = row.getValue(id);\n      return Array.isArray(rowValue) && rowValue.includes(filterValue);\n    },\n    header: \"Intents\",\n    meta: {\n      filterVariant: \"select\",\n    },\n  },\n  {\n    accessorKey: \"volume\",\n    cell: ({ row }) => {\n      const volume = Number.parseInt(row.getValue(\"volume\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(volume);\n    },\n    header: \"Volume\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"cpc\",\n    cell: ({ row }) => <div>${row.getValue(\"cpc\")}</div>,\n    header: \"CPC\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"traffic\",\n    cell: ({ row }) => {\n      const traffic = Number.parseInt(row.getValue(\"traffic\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(traffic);\n    },\n    header: \"Traffic\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"link\",\n    cell: ({ row }) => (\n      <a className=\"inline-flex items-center gap-1 hover:underline\" href=\"#\">\n        {row.getValue(\"link\")} <ExternalLinkIcon aria-hidden=\"true\" size={12} />\n      </a>\n    ),\n    enableSorting: false,\n    header: \"Link\",\n  },\n];\n\nconst items: Item[] = [\n  {\n    cpc: 2.5,\n    id: \"1\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react components\",\n    link: \"https://coss.com/origin\",\n    traffic: 88,\n    volume: 2507,\n  },\n  {\n    cpc: 4.75,\n    id: \"2\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"buy react templates\",\n    link: \"https://coss.com/origin/input\",\n    traffic: 65,\n    volume: 1850,\n  },\n  {\n    cpc: 3.25,\n    id: \"3\",\n    intents: [\"Informational\", \"Commercial\"],\n    keyword: \"react ui library\",\n    link: \"https://coss.com/origin/badge\",\n    traffic: 112,\n    volume: 3200,\n  },\n  {\n    cpc: 1.95,\n    id: \"4\",\n    intents: [\"Transactional\"],\n    keyword: \"tailwind components download\",\n    link: \"https://coss.com/origin/alert\",\n    traffic: 45,\n    volume: 890,\n  },\n  {\n    cpc: 5.5,\n    id: \"5\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react dashboard template free\",\n    link: \"https://coss.com/origin/tabs\",\n    traffic: 156,\n    volume: 4100,\n  },\n  {\n    cpc: 1.25,\n    id: \"6\",\n    intents: [\"Informational\"],\n    keyword: \"how to use react components\",\n    link: \"https://coss.com/origin/table\",\n    traffic: 42,\n    volume: 1200,\n  },\n  {\n    cpc: 6.8,\n    id: \"7\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react ui kit premium\",\n    link: \"https://coss.com/origin/avatar\",\n    traffic: 28,\n    volume: 760,\n  },\n  {\n    cpc: 1.8,\n    id: \"8\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react component documentation\",\n    link: \"https://coss.com/origin\",\n    traffic: 35,\n    volume: 950,\n  },\n];\n\nexport default function Component() {\n  const table = useTable(\n    {\n      columns,\n      data: items,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        sorting: [\n          {\n            desc: false,\n            id: \"traffic\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      columnFilters: state.columnFilters,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  const keywordColumn = table.getColumn(\"keyword\");\n  const intentsColumn = table.getColumn(\"intents\");\n  const volumeColumn = table.getColumn(\"volume\");\n  const cpcColumn = table.getColumn(\"cpc\");\n  const trafficColumn = table.getColumn(\"traffic\");\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap gap-3\">\n        {/* Search input */}\n        {keywordColumn && (\n          <div className=\"w-44\">\n            <Filter column={keywordColumn} />\n          </div>\n        )}\n        {/* Intents select */}\n        {intentsColumn && (\n          <div className=\"w-36\">\n            <Filter column={intentsColumn} />\n          </div>\n        )}\n        {/* Volume inputs */}\n        {volumeColumn && (\n          <div className=\"w-36\">\n            <Filter column={volumeColumn} />\n          </div>\n        )}\n        {/* CPC inputs */}\n        {cpcColumn && (\n          <div className=\"w-36\">\n            <Filter column={cpcColumn} />\n          </div>\n        )}\n        {/* Traffic inputs */}\n        {trafficColumn && (\n          <div className=\"w-36\">\n            <Filter column={trafficColumn} />\n          </div>\n        )}\n      </div>\n\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t\"\n                    key={header.id}\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? (\n                          <span aria-hidden=\"true\" className=\"size-4\" />\n                        )}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Data table with filters made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction Filter({\n  column,\n}: {\n  column: Column<typeof features, Item, unknown>;\n}) {\n  const id = useId();\n  const columnFilterValue = column.getFilterValue();\n  const { filterVariant } = column.columnDef.meta ?? {};\n  const columnHeader =\n    typeof column.columnDef.header === \"string\" ? column.columnDef.header : \"\";\n  const sortedUniqueValues = useMemo(() => {\n    if (filterVariant === \"range\") return [];\n\n    // Get all unique values from the column\n    const values = Array.from(column.getFacetedUniqueValues().keys());\n\n    // If the values are arrays, flatten them and get unique items\n    const flattenedValues = values.reduce((acc: string[], curr) => {\n      if (Array.isArray(curr)) {\n        acc.push(...curr);\n      } else {\n        acc.push(curr);\n      }\n      return acc;\n    }, []);\n\n    // Get unique values and sort them\n    return Array.from(new Set(flattenedValues)).sort();\n  }, [column, filterVariant]);\n\n  if (filterVariant === \"range\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label>{columnHeader}</Label>\n        <div className=\"flex\">\n          <Input\n            aria-label={`${columnHeader} min`}\n            className=\"flex-1 rounded-e-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-1`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                e.target.value ? Number(e.target.value) : undefined,\n                old?.[1],\n              ])\n            }\n            placeholder=\"Min\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n          />\n          <Input\n            aria-label={`${columnHeader} max`}\n            className=\"-ms-px flex-1 rounded-s-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-2`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                old?.[0],\n                e.target.value ? Number(e.target.value) : undefined,\n              ])\n            }\n            placeholder=\"Max\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  if (filterVariant === \"select\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={`${id}-select`}>{columnHeader}</Label>\n        <Select\n          onValueChange={(value) => {\n            column.setFilterValue(value === \"all\" ? undefined : value);\n          }}\n          value={columnFilterValue?.toString() ?? \"all\"}\n        >\n          <SelectTrigger id={`${id}-select`}>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">All</SelectItem>\n            {sortedUniqueValues.map((value) => (\n              <SelectItem key={String(value)} value={String(value)}>\n                {String(value)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`${id}-input`}>{columnHeader}</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-9\"\n          id={`${id}-input`}\n          onChange={(e) => column.setFilterValue(e.target.value)}\n          placeholder={`Search ${columnHeader.toLowerCase()}`}\n          type=\"text\"\n          value={(columnFilterValue ?? \"\") as string}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <SearchIcon size={16} />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-479.json b/apps/origin/public/r/comp-479.json
index 9aa20c08b..433acec77 100644
--- a/apps/origin/public/r/comp-479.json
+++ b/apps/origin/public/r/comp-479.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-479.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Excellent\" | \"Good\" | \"Average\" | \"Poor\";\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n  });\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed\"\n        style={{\n          width: table.getCenterTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t last:[&>.cursor-col-resize]:opacity-0\"\n                    key={header.id}\n                    {...{\n                      colSpan: header.colSpan,\n                      style: {\n                        width: header.getSize(),\n                      },\n                    }}\n                  >\n                    {header.isPlaceholder ? null : (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        <span className=\"truncate\">\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                        </span>\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    )}\n                    {header.column.getCanResize() && (\n                      <div\n                        {...{\n                          className:\n                            \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:translate-x-px\",\n                          onDoubleClick: () => header.column.resetSize(),\n                          onMouseDown: header.getResizeHandler(),\n                          onTouchStart: header.getResizeHandler(),\n                        }}\n                      />\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell className=\"truncate\" key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Resizable and sortable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnResizingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createSortedRowModel,\n  flexRender,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Excellent\" | \"Good\" | \"Average\" | \"Poor\";\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnResizingFeature,\n  columnVisibilityFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columnResizeMode: \"onChange\",\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        sorting: [\n          {\n            desc: false,\n            id: \"name\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      columnSizing: state.columnSizing,\n      sorting: state.sorting,\n    }),\n  );\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed\"\n        style={{\n          width: table.getCenterTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t last:[&>.cursor-col-resize]:opacity-0\"\n                    key={header.id}\n                    {...{\n                      colSpan: header.colSpan,\n                      style: {\n                        width: header.getSize(),\n                      },\n                    }}\n                  >\n                    {header.isPlaceholder ? null : (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        <span className=\"truncate\">\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                        </span>\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    )}\n                    {header.column.getCanResize() && (\n                      <div\n                        {...{\n                          className:\n                            \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:translate-x-px\",\n                          onDoubleClick: () => header.column.resetSize(),\n                          onMouseDown: header.getResizeHandler(),\n                          onTouchStart: header.getResizeHandler(),\n                        }}\n                      />\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow key={row.id}>\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell className=\"truncate\" key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Resizable and sortable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-480.json b/apps/origin/public/r/comp-480.json
index 3cc3a68fa..6ff42c2a8 100644
--- a/apps/origin/public/r/comp-480.json
+++ b/apps/origin/public/r/comp-480.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-480.tsx",
-      "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ArrowLeftToLineIcon,\n  ArrowRightToLineIcon,\n  EllipsisIcon,\n  PinOffIcon,\n} from \"lucide-react\";\nimport { type CSSProperties, useEffect, useState } from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Good\" | \"Very Good\" | \"Excellent\" | \"Outstanding\";\n};\n\n// Helper function to compute pinning styles for columns\nconst getPinningStyles = (column: Column<Item>): CSSProperties => {\n  const isPinned = column.getIsPinned();\n  return {\n    left: isPinned === \"left\" ? `${column.getStart(\"left\")}px` : undefined,\n    position: isPinned ? \"sticky\" : \"relative\",\n    right: isPinned === \"right\" ? `${column.getAfter(\"right\")}px` : undefined,\n    width: column.getSize(),\n    zIndex: isPinned ? 1 : 0,\n  };\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n  });\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-border [&_th]:border-b [&_tr:not(:last-child)_td]:border-b [&_tr]:border-none\"\n        style={{\n          width: table.getTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const { column } = header;\n                const isPinned = column.getIsPinned();\n                const isLastLeftPinned =\n                  isPinned === \"left\" && column.getIsLastColumn(\"left\");\n                const isFirstRightPinned =\n                  isPinned === \"right\" && column.getIsFirstColumn(\"right\");\n\n                return (\n                  <TableHead\n                    className=\"relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border\"\n                    colSpan={header.colSpan}\n                    data-last-col={\n                      isLastLeftPinned\n                        ? \"left\"\n                        : isFirstRightPinned\n                          ? \"right\"\n                          : undefined\n                    }\n                    data-pinned={isPinned || undefined}\n                    key={header.id}\n                    style={{ ...getPinningStyles(column) }}\n                  >\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"truncate\">\n                        {header.isPlaceholder\n                          ? null\n                          : flexRender(\n                              header.column.columnDef.header,\n                              header.getContext(),\n                            )}\n                      </span>\n                      {/* Pin/Unpin column controls with enhanced accessibility */}\n                      {!header.isPlaceholder &&\n                        header.column.getCanPin() &&\n                        (header.column.getIsPinned() ? (\n                          <Button\n                            aria-label={`Unpin ${header.column.columnDef.header as string} column`}\n                            className=\"-mr-1 size-7 shadow-none\"\n                            onClick={() => header.column.pin(false)}\n                            size=\"icon\"\n                            title={`Unpin ${header.column.columnDef.header as string} column`}\n                            variant=\"ghost\"\n                          >\n                            <PinOffIcon\n                              aria-hidden=\"true\"\n                              className=\"opacity-60\"\n                              size={16}\n                            />\n                          </Button>\n                        ) : (\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-label={`Pin options for ${header.column.columnDef.header as string} column`}\n                                className=\"-mr-1 size-7 shadow-none\"\n                                size=\"icon\"\n                                title={`Pin options for ${header.column.columnDef.header as string} column`}\n                                variant=\"ghost\"\n                              >\n                                <EllipsisIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"left\")}\n                              >\n                                <ArrowLeftToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to left\n                              </DropdownMenuItem>\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"right\")}\n                              >\n                                <ArrowRightToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to right\n                              </DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        ))}\n                      {header.column.getCanResize() && (\n                        <div\n                          {...{\n                            className:\n                              \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px\",\n                            onDoubleClick: () => header.column.resetSize(),\n                            onMouseDown: header.getResizeHandler(),\n                            onTouchStart: header.getResizeHandler(),\n                          }}\n                        />\n                      )}\n                    </div>\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => {\n                  const { column } = cell;\n                  const isPinned = column.getIsPinned();\n                  const isLastLeftPinned =\n                    isPinned === \"left\" && column.getIsLastColumn(\"left\");\n                  const isFirstRightPinned =\n                    isPinned === \"right\" && column.getIsFirstColumn(\"right\");\n\n                  return (\n                    <TableCell\n                      className=\"truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border\"\n                      data-last-col={\n                        isLastLeftPinned\n                          ? \"left\"\n                          : isFirstRightPinned\n                            ? \"right\"\n                            : undefined\n                      }\n                      data-pinned={isPinned || undefined}\n                      key={cell.id}\n                      style={{ ...getPinningStyles(column) }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Pinnable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  columnOrderingFeature,\n  columnPinningFeature,\n  columnResizingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  flexRender,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ArrowLeftToLineIcon,\n  ArrowRightToLineIcon,\n  EllipsisIcon,\n  PinOffIcon,\n} from \"lucide-react\";\nimport { type CSSProperties, useEffect, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Good\" | \"Very Good\" | \"Excellent\" | \"Outstanding\";\n};\n\nconst features = tableFeatures({\n  columnOrderingFeature,\n  columnPinningFeature,\n  columnSizingFeature,\n  columnResizingFeature,\n  columnVisibilityFeature,\n});\n\n// Helper function to compute pinning styles for columns\nconst getPinningStyles = (\n  column: Column<typeof features, Item, unknown>,\n): CSSProperties => {\n  const isPinned = column.getIsPinned();\n  return {\n    insetInlineEnd:\n      isPinned === \"end\" ? `${column.getAfter(\"end\")}px` : undefined,\n    insetInlineStart:\n      isPinned === \"start\" ? `${column.getStart(\"start\")}px` : undefined,\n    position: isPinned ? \"sticky\" : \"relative\",\n    width: column.getSize(),\n    zIndex: isPinned ? 1 : 0,\n  };\n};\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columnResizeMode: \"onChange\",\n      columns,\n      data,\n      features,\n    },\n    (state) => ({\n      columnPinning: state.columnPinning,\n      columnSizing: state.columnSizing,\n    }),\n  );\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-border [&_th]:border-b [&_tr:not(:last-child)_td]:border-b [&_tr]:border-none\"\n        style={{\n          width: table.getTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const { column } = header;\n                const isPinned = column.getIsPinned();\n                const isLastStartPinned =\n                  isPinned === \"start\" && column.getIsLastColumn(\"start\");\n                const isFirstEndPinned =\n                  isPinned === \"end\" && column.getIsFirstColumn(\"end\");\n\n                return (\n                  <TableHead\n                    className=\"relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=start]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border\"\n                    colSpan={header.colSpan}\n                    data-last-col={\n                      isLastStartPinned\n                        ? \"start\"\n                        : isFirstEndPinned\n                          ? \"end\"\n                          : undefined\n                    }\n                    data-pinned={isPinned || undefined}\n                    key={header.id}\n                    style={{ ...getPinningStyles(column) }}\n                  >\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"truncate\">\n                        {header.isPlaceholder\n                          ? null\n                          : flexRender(\n                              header.column.columnDef.header,\n                              header.getContext(),\n                            )}\n                      </span>\n                      {/* Pin/Unpin column controls with enhanced accessibility */}\n                      {!header.isPlaceholder &&\n                        header.column.getCanPin() &&\n                        (header.column.getIsPinned() ? (\n                          <Button\n                            aria-label={`Unpin ${header.column.columnDef.header as string} column`}\n                            className=\"-mr-1 size-7 shadow-none\"\n                            onClick={() => header.column.pin(false)}\n                            size=\"icon\"\n                            title={`Unpin ${header.column.columnDef.header as string} column`}\n                            variant=\"ghost\"\n                          >\n                            <PinOffIcon\n                              aria-hidden=\"true\"\n                              className=\"opacity-60\"\n                              size={16}\n                            />\n                          </Button>\n                        ) : (\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-label={`Pin options for ${header.column.columnDef.header as string} column`}\n                                className=\"-mr-1 size-7 shadow-none\"\n                                size=\"icon\"\n                                title={`Pin options for ${header.column.columnDef.header as string} column`}\n                                variant=\"ghost\"\n                              >\n                                <EllipsisIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"start\")}\n                              >\n                                <ArrowLeftToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to start\n                              </DropdownMenuItem>\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"end\")}\n                              >\n                                <ArrowRightToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to end\n                              </DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        ))}\n                      {header.column.getCanResize() && (\n                        <div\n                          {...{\n                            className:\n                              \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px\",\n                            onDoubleClick: () => header.column.resetSize(),\n                            onMouseDown: header.getResizeHandler(),\n                            onTouchStart: header.getResizeHandler(),\n                          }}\n                        />\n                      )}\n                    </div>\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow key={row.id}>\n                {row.getVisibleCells().map((cell) => {\n                  const { column } = cell;\n                  const isPinned = column.getIsPinned();\n                  const isLastStartPinned =\n                    isPinned === \"start\" && column.getIsLastColumn(\"start\");\n                  const isFirstEndPinned =\n                    isPinned === \"end\" && column.getIsFirstColumn(\"end\");\n\n                  return (\n                    <TableCell\n                      className=\"truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border\"\n                      data-last-col={\n                        isLastStartPinned\n                          ? \"start\"\n                          : isFirstEndPinned\n                            ? \"end\"\n                            : undefined\n                      }\n                      data-pinned={isPinned || undefined}\n                      key={cell.id}\n                      style={{ ...getPinningStyles(column) }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Pinnable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-481.json b/apps/origin/public/r/comp-481.json
index 0b3c33e18..885d04d0d 100644
--- a/apps/origin/public/r/comp-481.json
+++ b/apps/origin/public/r/comp-481.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-481.tsx",
-      "content": "\"use client\";\n\nimport {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToHorizontalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport {\n  type Cell,\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  type Header,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from \"lucide-react\";\nimport { type CSSProperties, useEffect, useId, useState } from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    id: \"name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    id: \"email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    id: \"location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    id: \"status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    id: \"balance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [columnOrder, setColumnOrder] = useState<string[]>(\n    columns.map((column) => column.id as string),\n  );\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onColumnOrderChange: setColumnOrder,\n    onSortingChange: setSorting,\n    state: {\n      columnOrder,\n      sorting,\n    },\n  });\n\n  // reorder columns after drag & drop\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event;\n    if (active && over && active.id !== over.id) {\n      setColumnOrder((columnOrder) => {\n        const oldIndex = columnOrder.indexOf(active.id as string);\n        const newIndex = columnOrder.indexOf(over.id as string);\n        return arrayMove(columnOrder, oldIndex, newIndex); //this is just a splice util\n      });\n    }\n  }\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {}),\n  );\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={useId()}\n      modifiers={[restrictToHorizontalAxis]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              <SortableContext\n                items={columnOrder}\n                strategy={horizontalListSortingStrategy}\n              >\n                {headerGroup.headers.map((header) => (\n                  <DraggableTableHeader header={header} key={header.id} />\n                ))}\n              </SortableContext>\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <SortableContext\n                    items={columnOrder}\n                    key={cell.id}\n                    strategy={horizontalListSortingStrategy}\n                  >\n                    <DragAlongCell cell={cell} key={cell.id} />\n                  </SortableContext>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Draggable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>{\" \"}\n        and{\" \"}\n        <a href=\"https://dndkit.com/\" rel=\"noopener noreferrer\" target=\"_blank\">\n          dnd kit\n        </a>\n      </p>\n    </DndContext>\n  );\n}\n\nconst DraggableTableHeader = ({\n  header,\n}: {\n  header: Header<Item, unknown>;\n}) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id: header.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    whiteSpace: \"nowrap\",\n    width: header.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableHead\n      aria-sort={\n        header.column.getIsSorted() === \"asc\"\n          ? \"ascending\"\n          : header.column.getIsSorted() === \"desc\"\n            ? \"descending\"\n            : \"none\"\n      }\n      className=\"relative h-10 border-t before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-border first:before:bg-transparent\"\n      ref={setNodeRef}\n      style={style}\n    >\n      <div className=\"flex items-center justify-start gap-0.5\">\n        <Button\n          className=\"-ml-2 size-7 shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n          {...attributes}\n          {...listeners}\n          aria-label=\"Drag to reorder\"\n        >\n          <GripVerticalIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60\"\n            size={16}\n          />\n        </Button>\n        <span className=\"grow truncate\">\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n        <Button\n          className=\"group -mr-1 size-7 shadow-none\"\n          onClick={header.column.getToggleSortingHandler()}\n          onKeyDown={(e) => {\n            // Enhanced keyboard handling for sorting\n            if (\n              header.column.getCanSort() &&\n              (e.key === \"Enter\" || e.key === \" \")\n            ) {\n              e.preventDefault();\n              header.column.getToggleSortingHandler()?.(e);\n            }\n          }}\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          {{\n            asc: (\n              <ChevronUpIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n            desc: (\n              <ChevronDownIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n          }[header.column.getIsSorted() as string] ?? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"shrink-0 opacity-0 group-hover:opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      </div>\n    </TableHead>\n  );\n};\n\nconst DragAlongCell = ({ cell }: { cell: Cell<Item, unknown> }) => {\n  const { isDragging, setNodeRef, transform, transition } = useSortable({\n    id: cell.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    width: cell.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableCell className=\"truncate\" ref={setNodeRef} style={style}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </TableCell>\n  );\n};\n",
+      "content": "\"use client\";\n\nimport {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToHorizontalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport {\n  type Cell,\n  type ColumnDef,\n  columnOrderingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createSortedRowModel,\n  flexRender,\n  type Header,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from \"lucide-react\";\nimport { type CSSProperties, useEffect, useId, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnOrderingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    id: \"name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    id: \"email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    id: \"location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    id: \"status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    id: \"balance\",\n  },\n];\n\nconst initialColumnOrder = columns.map((column) => column.id as string);\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        columnOrder: initialColumnOrder,\n      },\n    },\n    (state) => ({\n      columnOrder: state.columnOrder,\n      sorting: state.sorting,\n    }),\n  );\n\n  // reorder columns after drag & drop\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event;\n    if (active && over && active.id !== over.id) {\n      table.setColumnOrder((columnOrder) => {\n        const oldIndex = columnOrder.indexOf(active.id as string);\n        const newIndex = columnOrder.indexOf(over.id as string);\n        return arrayMove(columnOrder, oldIndex, newIndex); //this is just a splice util\n      });\n    }\n  }\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {}),\n  );\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={useId()}\n      modifiers={[restrictToHorizontalAxis]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              <SortableContext\n                items={table.state.columnOrder}\n                strategy={horizontalListSortingStrategy}\n              >\n                {headerGroup.headers.map((header) => (\n                  <DraggableTableHeader header={header} key={header.id} />\n                ))}\n              </SortableContext>\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow key={row.id}>\n                {row.getVisibleCells().map((cell) => (\n                  <SortableContext\n                    items={table.state.columnOrder}\n                    key={cell.id}\n                    strategy={horizontalListSortingStrategy}\n                  >\n                    <DragAlongCell cell={cell} key={cell.id} />\n                  </SortableContext>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Draggable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>{\" \"}\n        and{\" \"}\n        <a href=\"https://dndkit.com/\" rel=\"noopener noreferrer\" target=\"_blank\">\n          dnd kit\n        </a>\n      </p>\n    </DndContext>\n  );\n}\n\nconst DraggableTableHeader = ({\n  header,\n}: {\n  header: Header<typeof features, Item, unknown>;\n}) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id: header.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    whiteSpace: \"nowrap\",\n    width: header.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableHead\n      aria-sort={\n        header.column.getIsSorted() === \"asc\"\n          ? \"ascending\"\n          : header.column.getIsSorted() === \"desc\"\n            ? \"descending\"\n            : \"none\"\n      }\n      className=\"relative h-10 border-t before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-border first:before:bg-transparent\"\n      ref={setNodeRef}\n      style={style}\n    >\n      <div className=\"flex items-center justify-start gap-0.5\">\n        <Button\n          className=\"-ml-2 size-7 shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n          {...attributes}\n          {...listeners}\n          aria-label=\"Drag to reorder\"\n        >\n          <GripVerticalIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60\"\n            size={16}\n          />\n        </Button>\n        <span className=\"grow truncate\">\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n        <Button\n          className=\"group -mr-1 size-7 shadow-none\"\n          onClick={header.column.getToggleSortingHandler()}\n          onKeyDown={(e) => {\n            // Enhanced keyboard handling for sorting\n            if (\n              header.column.getCanSort() &&\n              (e.key === \"Enter\" || e.key === \" \")\n            ) {\n              e.preventDefault();\n              header.column.getToggleSortingHandler()?.(e);\n            }\n          }}\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          {{\n            asc: (\n              <ChevronUpIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n            desc: (\n              <ChevronDownIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n          }[header.column.getIsSorted() as string] ?? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"shrink-0 opacity-0 group-hover:opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      </div>\n    </TableHead>\n  );\n};\n\nconst DragAlongCell = ({\n  cell,\n}: {\n  cell: Cell<typeof features, Item, unknown>;\n}) => {\n  const { isDragging, setNodeRef, transform, transition } = useSortable({\n    id: cell.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    width: cell.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableCell className=\"truncate\" ref={setNodeRef} style={style}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </TableCell>\n  );\n};\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-482.json b/apps/origin/public/r/comp-482.json
index d3c576275..3e3b008ba 100644
--- a/apps/origin/public/r/comp-482.json
+++ b/apps/origin/public/r/comp-482.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-482.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, InfoIcon } from \"lucide-react\";\nimport { Fragment, useEffect, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  note?: string;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => {\n      return row.getCanExpand() ? (\n        <Button\n          {...{\n            \"aria-expanded\": row.getIsExpanded(),\n            \"aria-label\": row.getIsExpanded()\n              ? `Collapse details for ${row.original.name}`\n              : `Expand details for ${row.original.name}`,\n            className: \"size-7 shadow-none text-muted-foreground\",\n            onClick: row.getToggleExpandedHandler(),\n            size: \"icon\",\n            variant: \"ghost\",\n          }}\n        >\n          {row.getIsExpanded() ? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          ) : (\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      ) : undefined;\n    },\n    header: () => null,\n    id: \"expander\",\n  },\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getRowCanExpand: (row) => Boolean(row.original.note),\n  });\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <Fragment key={row.id}>\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      className=\"whitespace-nowrap [&:has([aria-expanded])]:w-px [&:has([aria-expanded])]:py-0 [&:has([aria-expanded])]:pr-0\"\n                      key={cell.id}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n                {row.getIsExpanded() && (\n                  <TableRow>\n                    <TableCell colSpan={row.getVisibleCells().length}>\n                      <div className=\"flex items-start py-2 text-primary/80\">\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"me-3 mt-0.5 flex w-7 shrink-0 justify-center\"\n                        >\n                          <InfoIcon className=\"opacity-60\" size={16} />\n                        </span>\n                        <p className=\"text-sm\">{row.original.note}</p>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                )}\n              </Fragment>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Expanding sub-row made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  createExpandedRowModel,\n  flexRender,\n  rowExpandingFeature,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, InfoIcon } from \"lucide-react\";\nimport { Fragment, useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  note?: string;\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowExpandingFeature,\n  expandedRowModel: createExpandedRowModel(),\n  rowSelectionFeature,\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => {\n      return row.getCanExpand() ? (\n        <Button\n          {...{\n            \"aria-expanded\": row.getIsExpanded(),\n            \"aria-label\": row.getIsExpanded()\n              ? `Collapse details for ${row.original.name}`\n              : `Expand details for ${row.original.name}`,\n            className: \"size-7 shadow-none text-muted-foreground\",\n            onClick: row.getToggleExpandedHandler(),\n            size: \"icon\",\n            variant: \"ghost\",\n          }}\n        >\n          {row.getIsExpanded() ? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          ) : (\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      ) : undefined;\n    },\n    header: () => null,\n    id: \"expander\",\n  },\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      features,\n      getRowCanExpand: (row) => Boolean(row.original.note),\n    },\n    (state) => ({\n      expanded: state.expanded,\n      rowSelection: state.rowSelection,\n    }),\n  );\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <Fragment key={row.id}>\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      className=\"whitespace-nowrap [&:has([aria-expanded])]:w-px [&:has([aria-expanded])]:py-0 [&:has([aria-expanded])]:pr-0\"\n                      key={cell.id}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n                {row.getIsExpanded() && (\n                  <TableRow>\n                    <TableCell colSpan={row.getVisibleCells().length}>\n                      <div className=\"flex items-start py-2 text-primary/80\">\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"me-3 mt-0.5 flex w-7 shrink-0 justify-center\"\n                        >\n                          <InfoIcon className=\"opacity-60\" size={16} />\n                        </span>\n                        <p className=\"text-sm\">{row.original.note}</p>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                )}\n              </Fragment>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Expanding sub-row made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-483.json b/apps/origin/public/r/comp-483.json
index 78825b091..665bf6018 100644
--- a/apps/origin/public/r/comp-483.json
+++ b/apps/origin/public/r/comp-483.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-483.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 5,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData([...data, ...data]);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.getState().pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.getState().pagination.pageIndex *\n                table.getState().pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.getState().pagination.pageIndex *\n                    table.getState().pagination.pageSize +\n                    table.getState().pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Paginated table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData([...data, ...data]);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize: 5,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"name\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.state.pagination.pageIndex *\n                table.state.pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.state.pagination.pageIndex *\n                    table.state.pagination.pageSize +\n                    table.state.pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Paginated table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-484.json b/apps/origin/public/r/comp-484.json
index b0c1a7ee5..ca6c16e54 100644
--- a/apps/origin/public/r/comp-484.json
+++ b/apps/origin/public/r/comp-484.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-484.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\n\nimport { usePagination } from \"@/registry/default/hooks/use-pagination\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all rows\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const pageSize = 5;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage: table.getState().pagination.pageIndex + 1,\n    paginationItemsToDisplay: 5,\n    totalPages: table.getPageCount(),\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-3 max-sm:flex-col\">\n        {/* Page number information */}\n        <p\n          aria-live=\"polite\"\n          className=\"flex-1 whitespace-nowrap text-muted-foreground text-sm\"\n        >\n          Page{\" \"}\n          <span className=\"text-foreground\">\n            {table.getState().pagination.pageIndex + 1}\n          </span>{\" \"}\n          of <span className=\"text-foreground\">{table.getPageCount()}</span>\n        </p>\n\n        {/* Pagination buttons */}\n        <div className=\"grow\">\n          <Pagination>\n            <PaginationContent>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n\n              {/* Left ellipsis (...) */}\n              {showLeftEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Page number buttons */}\n              {pages.map((page) => {\n                const isActive =\n                  page === table.getState().pagination.pageIndex + 1;\n                return (\n                  <PaginationItem key={page}>\n                    <Button\n                      aria-current={isActive ? \"page\" : undefined}\n                      onClick={() => table.setPageIndex(page - 1)}\n                      size=\"icon\"\n                      variant={`${isActive ? \"outline\" : \"ghost\"}`}\n                    >\n                      {page}\n                    </Button>\n                  </PaginationItem>\n                );\n              })}\n\n              {/* Right ellipsis (...) */}\n              {showRightEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n\n        {/* Results per page */}\n        <div className=\"flex flex-1 justify-end\">\n          <Select\n            aria-label=\"Results per page\"\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.getState().pagination.pageSize.toString()}\n          >\n            <SelectTrigger\n              className=\"w-fit whitespace-nowrap\"\n              id=\"results-per-page\"\n            >\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent>\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize} / page\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Numeric pagination made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { usePagination } from \"@/registry/default/hooks/use-pagination\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all rows\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const pageSize = 5;\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"name\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage: table.state.pagination.pageIndex + 1,\n    paginationItemsToDisplay: 5,\n    totalPages: table.getPageCount(),\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-3 max-sm:flex-col\">\n        {/* Page number information */}\n        <p\n          aria-live=\"polite\"\n          className=\"flex-1 whitespace-nowrap text-muted-foreground text-sm\"\n        >\n          Page{\" \"}\n          <span className=\"text-foreground\">\n            {table.state.pagination.pageIndex + 1}\n          </span>{\" \"}\n          of <span className=\"text-foreground\">{table.getPageCount()}</span>\n        </p>\n\n        {/* Pagination buttons */}\n        <div className=\"grow\">\n          <Pagination>\n            <PaginationContent>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n\n              {/* Left ellipsis (...) */}\n              {showLeftEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Page number buttons */}\n              {pages.map((page) => {\n                const isActive = page === table.state.pagination.pageIndex + 1;\n                return (\n                  <PaginationItem key={page}>\n                    <Button\n                      aria-current={isActive ? \"page\" : undefined}\n                      onClick={() => table.setPageIndex(page - 1)}\n                      size=\"icon\"\n                      variant={`${isActive ? \"outline\" : \"ghost\"}`}\n                    >\n                      {page}\n                    </Button>\n                  </PaginationItem>\n                );\n              })}\n\n              {/* Right ellipsis (...) */}\n              {showRightEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n\n        {/* Results per page */}\n        <div className=\"flex flex-1 justify-end\">\n          <Select\n            aria-label=\"Results per page\"\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger\n              className=\"w-fit whitespace-nowrap\"\n              id=\"results-per-page\"\n            >\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent>\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize} / page\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Numeric pagination made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/origin/public/r/comp-485.json b/apps/origin/public/r/comp-485.json
index 62bbc1eaa..4b44a6bcf 100644
--- a/apps/origin/public/r/comp-485.json
+++ b/apps/origin/public/r/comp-485.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-485.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  type ColumnFiltersState,\n  type FilterFn,\n  flexRender,\n  getCoreRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type Row,\n  type SortingState,\n  useReactTable,\n  type VisibilityState,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleAlertIcon,\n  CircleXIcon,\n  Columns3Icon,\n  EllipsisIcon,\n  FilterIcon,\n  ListFilterIcon,\n  PlusIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\n// Custom filter function for multi-column searching\nconst multiColumnFilterFn: FilterFn<Item> = (row, _columnId, filterValue) => {\n  const searchableRowContent =\n    `${row.original.name} ${row.original.email}`.toLowerCase();\n  const searchTerm = (filterValue ?? \"\").toLowerCase();\n  return searchableRowContent.includes(searchTerm);\n};\n\nconst statusFilterFn: FilterFn<Item> = (\n  row,\n  columnId,\n  filterValue: string[],\n) => {\n  if (!filterValue?.length) return true;\n  const status = row.getValue(columnId) as string;\n  return filterValue.includes(status);\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableHiding: false,\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    enableHiding: false,\n    filterFn: multiColumnFilterFn,\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 220,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    filterFn: statusFilterFn,\n    header: \"Status\",\n    size: 100,\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n  {\n    cell: ({ row }) => <RowActions row={row} />,\n    enableHiding: false,\n    header: () => <span className=\"sr-only\">Actions</span>,\n    id: \"actions\",\n    size: 60,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  });\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const handleDeleteRows = () => {\n    const selectedRows = table.getSelectedRowModel().rows;\n    const updatedData = data.filter(\n      (item) => !selectedRows.some((row) => row.original.id === item.id),\n    );\n    setData(updatedData);\n    table.resetRowSelection();\n  };\n\n  const table = useReactTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      columnFilters,\n      columnVisibility,\n      pagination,\n      sorting,\n    },\n  });\n\n  // Get unique status values\n  const uniqueStatusValues = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n\n    if (!statusColumn) return [];\n\n    const values = Array.from(statusColumn.getFacetedUniqueValues().keys());\n\n    return values.sort();\n  }, [table.getColumn]);\n\n  // Get counts for each status\n  const statusCounts = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n    if (!statusColumn) return new Map();\n    return statusColumn.getFacetedUniqueValues();\n  }, [table]);\n\n  const selectedStatuses = useMemo(() => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    return filterValue ?? [];\n  }, [table]);\n\n  const handleStatusChange = (checked: boolean, value: string) => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    const newFilterValue = filterValue ? [...filterValue] : [];\n\n    if (checked) {\n      newFilterValue.push(value);\n    } else {\n      const index = newFilterValue.indexOf(value);\n      if (index > -1) {\n        newFilterValue.splice(index, 1);\n      }\n    }\n\n    table\n      .getColumn(\"status\")\n      ?.setFilterValue(newFilterValue.length ? newFilterValue : undefined);\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div className=\"flex items-center gap-3\">\n          {/* Filter by name or email */}\n          <div className=\"relative\">\n            <Input\n              aria-label=\"Filter by name or email\"\n              className={cn(\n                \"peer min-w-60 ps-9\",\n                Boolean(table.getColumn(\"name\")?.getFilterValue()) && \"pe-9\",\n              )}\n              id={`${id}-input`}\n              onChange={(e) =>\n                table.getColumn(\"name\")?.setFilterValue(e.target.value)\n              }\n              placeholder=\"Filter by name or email...\"\n              ref={inputRef}\n              type=\"text\"\n              value={\n                (table.getColumn(\"name\")?.getFilterValue() ?? \"\") as string\n              }\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <ListFilterIcon aria-hidden=\"true\" size={16} />\n            </div>\n            {Boolean(table.getColumn(\"name\")?.getFilterValue()) && (\n              <button\n                aria-label=\"Clear filter\"\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n                onClick={() => {\n                  table.getColumn(\"name\")?.setFilterValue(\"\");\n                  if (inputRef.current) {\n                    inputRef.current.focus();\n                  }\n                }}\n                type=\"button\"\n              >\n                <CircleXIcon aria-hidden=\"true\" size={16} />\n              </button>\n            )}\n          </div>\n          {/* Filter by status */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\">\n                <FilterIcon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                Status\n                {selectedStatuses.length > 0 && (\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {selectedStatuses.length}\n                  </span>\n                )}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-auto min-w-36 p-3\">\n              <div className=\"space-y-3\">\n                <div className=\"font-medium text-muted-foreground text-xs\">\n                  Filters\n                </div>\n                <div className=\"space-y-3\">\n                  {uniqueStatusValues.map((value, i) => (\n                    <div className=\"flex items-center gap-2\" key={value}>\n                      <Checkbox\n                        checked={selectedStatuses.includes(value)}\n                        id={`${id}-${i}`}\n                        onCheckedChange={(checked: boolean) =>\n                          handleStatusChange(checked, value)\n                        }\n                      />\n                      <Label\n                        className=\"flex grow justify-between gap-2 font-normal\"\n                        htmlFor={`${id}-${i}`}\n                      >\n                        {value}{\" \"}\n                        <span className=\"ms-2 text-muted-foreground text-xs\">\n                          {statusCounts.get(value)}\n                        </span>\n                      </Label>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </PopoverContent>\n          </Popover>\n          {/* Toggle columns visibility */}\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\">\n                <Columns3Icon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                View\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n              {table\n                .getAllColumns()\n                .filter((column) => column.getCanHide())\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      checked={column.getIsVisible()}\n                      className=\"capitalize\"\n                      key={column.id}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                      onSelect={(event) => event.preventDefault()}\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  );\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          {/* Delete button */}\n          {table.getSelectedRowModel().rows.length > 0 && (\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button className=\"ml-auto\" variant=\"outline\">\n                  <TrashIcon\n                    aria-hidden=\"true\"\n                    className=\"-ms-1 opacity-60\"\n                    size={16}\n                  />\n                  Delete\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {table.getSelectedRowModel().rows.length}\n                  </span>\n                </Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <div className=\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\">\n                  <div\n                    aria-hidden=\"true\"\n                    className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n                  >\n                    <CircleAlertIcon className=\"opacity-80\" size={16} />\n                  </div>\n                  <AlertDialogHeader>\n                    <AlertDialogTitle>\n                      Are you absolutely sure?\n                    </AlertDialogTitle>\n                    <AlertDialogDescription>\n                      This action cannot be undone. This will permanently delete{\" \"}\n                      {table.getSelectedRowModel().rows.length} selected{\" \"}\n                      {table.getSelectedRowModel().rows.length === 1\n                        ? \"row\"\n                        : \"rows\"}\n                      .\n                    </AlertDialogDescription>\n                  </AlertDialogHeader>\n                </div>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction onClick={handleDeleteRows}>\n                    Delete\n                  </AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          )}\n          {/* Add user button */}\n          <Button className=\"ml-auto\" variant=\"outline\">\n            <PlusIcon\n              aria-hidden=\"true\"\n              className=\"-ms-1 opacity-60\"\n              size={16}\n            />\n            Add user\n          </Button>\n        </div>\n      </div>\n\n      {/* Table */}\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell className=\"last:py-0\" key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.getState().pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.getState().pagination.pageIndex *\n                table.getState().pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.getState().pagination.pageIndex *\n                    table.getState().pagination.pageSize +\n                    table.getState().pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Example of a more complex table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction RowActions({ row: _row }: { row: Row<Item> }) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <div className=\"flex justify-end\">\n          <Button\n            aria-label=\"Edit item\"\n            className=\"shadow-none\"\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <EllipsisIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Edit</span>\n            <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <span>Duplicate</span>\n            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Archive</span>\n            <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Move to project</DropdownMenuItem>\n                <DropdownMenuItem>Move to folder</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>Advanced options</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Share</DropdownMenuItem>\n          <DropdownMenuItem>Add to favorites</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"text-destructive focus:text-destructive\">\n          <span>Delete</span>\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnFacetingFeature,\n  columnFilteringFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createFacetedUniqueValues,\n  createFilteredRowModel,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  type FilterFn,\n  flexRender,\n  type Row,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleAlertIcon,\n  CircleXIcon,\n  Columns3Icon,\n  EllipsisIcon,\n  FilterIcon,\n  ListFilterIcon,\n  PlusIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnFilteringFeature,\n  columnFacetingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  facetedUniqueValues: createFacetedUniqueValues(),\n  filteredRowModel: createFilteredRowModel(),\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\n// Custom filter function for multi-column searching\nconst multiColumnFilterFn: FilterFn<typeof features, Item> = (\n  row,\n  _columnId,\n  filterValue,\n) => {\n  const searchableRowContent =\n    `${row.original.name} ${row.original.email}`.toLowerCase();\n  const searchTerm = (filterValue ?? \"\").toLowerCase();\n  return searchableRowContent.includes(searchTerm);\n};\n\nconst statusFilterFn: FilterFn<typeof features, Item> = (\n  row,\n  columnId,\n  filterValue: string[],\n) => {\n  if (!filterValue?.length) return true;\n  const status = row.getValue(columnId) as string;\n  return filterValue.includes(status);\n};\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableHiding: false,\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    enableHiding: false,\n    filterFn: multiColumnFilterFn,\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 220,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    filterFn: statusFilterFn,\n    header: \"Status\",\n    size: 100,\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n  {\n    cell: ({ row }) => <RowActions row={row} />,\n    enableHiding: false,\n    header: () => <span className=\"sr-only\">Actions</span>,\n    id: \"actions\",\n    size: 60,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const handleDeleteRows = () => {\n    const selectedRows = table.getSelectedRowModel().rows;\n    const updatedData = data.filter(\n      (item) => !selectedRows.some((row) => row.original.id === item.id),\n    );\n    setData(updatedData);\n    table.resetRowSelection();\n  };\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize: 10,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"name\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      columnFilters: state.columnFilters,\n      columnVisibility: state.columnVisibility,\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  // Get unique status values\n  const uniqueStatusValues = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n\n    if (!statusColumn) return [];\n\n    const values = Array.from(statusColumn.getFacetedUniqueValues().keys());\n\n    return values.sort();\n  }, [table.getColumn]);\n\n  // Get counts for each status\n  const statusCounts = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n    if (!statusColumn) return new Map();\n    return statusColumn.getFacetedUniqueValues();\n  }, [table]);\n\n  const selectedStatuses = useMemo(() => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    return filterValue ?? [];\n  }, [table]);\n\n  const handleStatusChange = (checked: boolean, value: string) => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    const newFilterValue = filterValue ? [...filterValue] : [];\n\n    if (checked) {\n      newFilterValue.push(value);\n    } else {\n      const index = newFilterValue.indexOf(value);\n      if (index > -1) {\n        newFilterValue.splice(index, 1);\n      }\n    }\n\n    table\n      .getColumn(\"status\")\n      ?.setFilterValue(newFilterValue.length ? newFilterValue : undefined);\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div className=\"flex items-center gap-3\">\n          {/* Filter by name or email */}\n          <div className=\"relative\">\n            <Input\n              aria-label=\"Filter by name or email\"\n              className={cn(\n                \"peer min-w-60 ps-9\",\n                Boolean(table.getColumn(\"name\")?.getFilterValue()) && \"pe-9\",\n              )}\n              id={`${id}-input`}\n              onChange={(e) =>\n                table.getColumn(\"name\")?.setFilterValue(e.target.value)\n              }\n              placeholder=\"Filter by name or email...\"\n              ref={inputRef}\n              type=\"text\"\n              value={\n                (table.getColumn(\"name\")?.getFilterValue() ?? \"\") as string\n              }\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <ListFilterIcon aria-hidden=\"true\" size={16} />\n            </div>\n            {Boolean(table.getColumn(\"name\")?.getFilterValue()) && (\n              <button\n                aria-label=\"Clear filter\"\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n                onClick={() => {\n                  table.getColumn(\"name\")?.setFilterValue(\"\");\n                  if (inputRef.current) {\n                    inputRef.current.focus();\n                  }\n                }}\n                type=\"button\"\n              >\n                <CircleXIcon aria-hidden=\"true\" size={16} />\n              </button>\n            )}\n          </div>\n          {/* Filter by status */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\">\n                <FilterIcon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                Status\n                {selectedStatuses.length > 0 && (\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {selectedStatuses.length}\n                  </span>\n                )}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-auto min-w-36 p-3\">\n              <div className=\"space-y-3\">\n                <div className=\"font-medium text-muted-foreground text-xs\">\n                  Filters\n                </div>\n                <div className=\"space-y-3\">\n                  {uniqueStatusValues.map((value, i) => (\n                    <div className=\"flex items-center gap-2\" key={value}>\n                      <Checkbox\n                        checked={selectedStatuses.includes(value)}\n                        id={`${id}-${i}`}\n                        onCheckedChange={(checked: boolean) =>\n                          handleStatusChange(checked, value)\n                        }\n                      />\n                      <Label\n                        className=\"flex grow justify-between gap-2 font-normal\"\n                        htmlFor={`${id}-${i}`}\n                      >\n                        {value}{\" \"}\n                        <span className=\"ms-2 text-muted-foreground text-xs\">\n                          {statusCounts.get(value)}\n                        </span>\n                      </Label>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </PopoverContent>\n          </Popover>\n          {/* Toggle columns visibility */}\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\">\n                <Columns3Icon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                View\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n              {table\n                .getAllColumns()\n                .filter((column) => column.getCanHide())\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      checked={column.getIsVisible()}\n                      className=\"capitalize\"\n                      key={column.id}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                      onSelect={(event) => event.preventDefault()}\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  );\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          {/* Delete button */}\n          {table.getSelectedRowModel().rows.length > 0 && (\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button className=\"ml-auto\" variant=\"outline\">\n                  <TrashIcon\n                    aria-hidden=\"true\"\n                    className=\"-ms-1 opacity-60\"\n                    size={16}\n                  />\n                  Delete\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {table.getSelectedRowModel().rows.length}\n                  </span>\n                </Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <div className=\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\">\n                  <div\n                    aria-hidden=\"true\"\n                    className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n                  >\n                    <CircleAlertIcon className=\"opacity-80\" size={16} />\n                  </div>\n                  <AlertDialogHeader>\n                    <AlertDialogTitle>\n                      Are you absolutely sure?\n                    </AlertDialogTitle>\n                    <AlertDialogDescription>\n                      This action cannot be undone. This will permanently delete{\" \"}\n                      {table.getSelectedRowModel().rows.length} selected{\" \"}\n                      {table.getSelectedRowModel().rows.length === 1\n                        ? \"row\"\n                        : \"rows\"}\n                      .\n                    </AlertDialogDescription>\n                  </AlertDialogHeader>\n                </div>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction onClick={handleDeleteRows}>\n                    Delete\n                  </AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          )}\n          {/* Add user button */}\n          <Button className=\"ml-auto\" variant=\"outline\">\n            <PlusIcon\n              aria-hidden=\"true\"\n              className=\"-ms-1 opacity-60\"\n              size={16}\n            />\n            Add user\n          </Button>\n        </div>\n      </div>\n\n      {/* Table */}\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell className=\"last:py-0\" key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.state.pagination.pageIndex *\n                table.state.pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.state.pagination.pageIndex *\n                    table.state.pagination.pageSize +\n                    table.state.pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Example of a more complex table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction RowActions({ row: _row }: { row: Row<typeof features, Item> }) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <div className=\"flex justify-end\">\n          <Button\n            aria-label=\"Edit item\"\n            className=\"shadow-none\"\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <EllipsisIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Edit</span>\n            <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <span>Duplicate</span>\n            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Archive</span>\n            <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Move to project</DropdownMenuItem>\n                <DropdownMenuItem>Move to folder</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>Advanced options</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Share</DropdownMenuItem>\n          <DropdownMenuItem>Add to favorites</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"text-destructive focus:text-destructive\">\n          <span>Delete</span>\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/registry/default/components/comp-477.tsx b/apps/origin/registry/default/components/comp-477.tsx
index 85ab73cd4..0ac0e9865 100644
--- a/apps/origin/registry/default/components/comp-477.tsx
+++ b/apps/origin/registry/default/components/comp-477.tsx
@@ -2,9 +2,11 @@
 
 import {
   type ColumnDef,
+  columnVisibilityFeature,
   flexRender,
-  getCoreRowModel,
-  useReactTable,
+  rowSelectionFeature,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { useEffect, useState } from "react";
 import { cn } from "@/registry/default/lib/utils";
@@ -30,7 +32,12 @@ type Item = {
   balance: number;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnVisibilityFeature,
+  rowSelectionFeature,
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -114,11 +121,14 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columns,
-    data,
-    getCoreRowModel: getCoreRowModel(),
-  });
+  const table = useTable(
+    {
+      columns,
+      data,
+      features,
+    },
+    (state) => ({ rowSelection: state.rowSelection }),
+  );
 
   return (
     <div>
diff --git a/apps/origin/registry/default/components/comp-478.tsx b/apps/origin/registry/default/components/comp-478.tsx
index 9a0522c58..cb43b7192 100644
--- a/apps/origin/registry/default/components/comp-478.tsx
+++ b/apps/origin/registry/default/components/comp-478.tsx
@@ -3,17 +3,24 @@
 import {
   type Column,
   type ColumnDef,
-  type ColumnFiltersState,
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  createFacetedMinMaxValues,
+  createFacetedRowModel,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  filterFn_inNumberRange,
   flexRender,
-  getCoreRowModel,
-  getFacetedMinMaxValues,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getSortedRowModel,
-  type RowData,
-  type SortingState,
-  useReactTable,
+  metaHelper,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ChevronDownIcon,
@@ -21,7 +28,7 @@ import {
   ExternalLinkIcon,
   SearchIcon,
 } from "lucide-react";
-import { useId, useMemo, useState } from "react";
+import { useId, useMemo } from "react";
 import { cn } from "@/registry/default/lib/utils";
 import { Checkbox } from "@/registry/default/ui/checkbox";
 import { Input } from "@/registry/default/ui/input";
@@ -42,15 +49,6 @@ import {
   TableRow,
 } from "@/registry/default/ui/table";
 
-declare module "@tanstack/react-table" {
-  //allows us to define custom properties for our columns
-  // Type parameters TData and TValue must match TanStack Table's declaration exactly
-  // biome-ignore lint: Type parameters required for module augmentation compatibility
-  interface ColumnMeta<TData extends RowData, TValue> {
-    filterVariant?: "text" | "range" | "select";
-  }
-}
-
 type Item = {
   id: string;
   keyword: string;
@@ -63,7 +61,31 @@ type Item = {
   link: string;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnFilteringFeature,
+  columnFacetingFeature,
+  columnVisibilityFeature,
+  facetedMinMaxValues: createFacetedMinMaxValues(),
+  facetedRowModel: createFacetedRowModel(),
+  facetedUniqueValues: createFacetedUniqueValues(),
+  filteredRowModel: createFilteredRowModel(),
+  filterFns: {
+    includesString: filterFn_includesString,
+    inNumberRange: filterFn_inNumberRange,
+  },
+  columnMeta: metaHelper<{
+    filterVariant?: "text" | "range" | "select";
+  }>(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -254,31 +276,27 @@ const items: Item[] = [
 ];
 
 export default function Component() {
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [sorting, setSorting] = useState<SortingState>([
+  const table = useTable(
     {
-      desc: false,
-      id: "traffic",
+      columns,
+      data: items,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        sorting: [
+          {
+            desc: false,
+            id: "traffic",
+          },
+        ],
+      },
     },
-  ]);
-
-  const table = useReactTable({
-    columns,
-    data: items,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getFacetedMinMaxValues: getFacetedMinMaxValues(), // generate min/max values for range filter
-    getFacetedRowModel: getFacetedRowModel(), // client-side faceting
-    getFacetedUniqueValues: getFacetedUniqueValues(), // generate unique values for select filter/autocomplete
-    getFilteredRowModel: getFilteredRowModel(), //client-side filtering
-    getSortedRowModel: getSortedRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    onSortingChange: setSorting,
-    state: {
-      columnFilters,
-      sorting,
-    },
-  });
+    (state) => ({
+      columnFilters: state.columnFilters,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   const keywordColumn = table.getColumn("keyword");
   const intentsColumn = table.getColumn("intents");
@@ -431,7 +449,11 @@ export default function Component() {
   );
 }
 
-function Filter({ column }: { column: Column<Item, unknown> }) {
+function Filter({
+  column,
+}: {
+  column: Column<typeof features, Item, unknown>;
+}) {
   const id = useId();
   const columnFilterValue = column.getFilterValue();
   const { filterVariant } = column.columnDef.meta ?? {};
diff --git a/apps/origin/registry/default/components/comp-479.tsx b/apps/origin/registry/default/components/comp-479.tsx
index 6473143a8..4e06625ca 100644
--- a/apps/origin/registry/default/components/comp-479.tsx
+++ b/apps/origin/registry/default/components/comp-479.tsx
@@ -2,11 +2,16 @@
 
 import {
   type ColumnDef,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  type SortingState,
-  useReactTable,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -35,7 +40,19 @@ type Item = {
   performance: "Excellent" | "Good" | "Average" | "Poor";
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnResizingFeature,
+  columnVisibilityFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     accessorKey: "name",
     cell: ({ row }) => (
@@ -99,12 +116,6 @@ const columns: ColumnDef<Item>[] = [
 
 export default function Component() {
   const [data, setData] = useState<Item[]>([]);
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      desc: false,
-      id: "name",
-    },
-  ]);
 
   useEffect(() => {
     async function fetchPosts() {
@@ -117,18 +128,27 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columnResizeMode: "onChange",
-    columns,
-    data,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onSortingChange: setSorting,
-    state: {
-      sorting,
+  const table = useTable(
+    {
+      columnResizeMode: "onChange",
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        sorting: [
+          {
+            desc: false,
+            id: "name",
+          },
+        ],
+      },
     },
-  });
+    (state) => ({
+      columnSizing: state.columnSizing,
+      sorting: state.sorting,
+    }),
+  );
 
   return (
     <div>
@@ -223,10 +243,7 @@ export default function Component() {
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow
-                data-state={row.getIsSelected() && "selected"}
-                key={row.id}
-              >
+              <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => (
                   <TableCell className="truncate" key={cell.id}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/apps/origin/registry/default/components/comp-480.tsx b/apps/origin/registry/default/components/comp-480.tsx
index a858a0311..9ec43d1ae 100644
--- a/apps/origin/registry/default/components/comp-480.tsx
+++ b/apps/origin/registry/default/components/comp-480.tsx
@@ -3,11 +3,14 @@
 import {
   type Column,
   type ColumnDef,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  type SortingState,
-  useReactTable,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ArrowLeftToLineIcon,
@@ -47,19 +50,31 @@ type Item = {
   performance: "Good" | "Very Good" | "Excellent" | "Outstanding";
 };
 
+const features = tableFeatures({
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnSizingFeature,
+  columnResizingFeature,
+  columnVisibilityFeature,
+});
+
 // Helper function to compute pinning styles for columns
-const getPinningStyles = (column: Column<Item>): CSSProperties => {
+const getPinningStyles = (
+  column: Column<typeof features, Item, unknown>,
+): CSSProperties => {
   const isPinned = column.getIsPinned();
   return {
-    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+    insetInlineEnd:
+      isPinned === "end" ? `${column.getAfter("end")}px` : undefined,
+    insetInlineStart:
+      isPinned === "start" ? `${column.getStart("start")}px` : undefined,
     position: isPinned ? "sticky" : "relative",
-    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
     width: column.getSize(),
     zIndex: isPinned ? 1 : 0,
   };
 };
 
-const columns: ColumnDef<Item>[] = [
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     accessorKey: "name",
     cell: ({ row }) => (
@@ -121,7 +136,6 @@ const columns: ColumnDef<Item>[] = [
 
 export default function Component() {
   const [data, setData] = useState<Item[]>([]);
-  const [sorting, setSorting] = useState<SortingState>([]);
 
   useEffect(() => {
     async function fetchPosts() {
@@ -134,18 +148,18 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columnResizeMode: "onChange",
-    columns,
-    data,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onSortingChange: setSorting,
-    state: {
-      sorting,
+  const table = useTable(
+    {
+      columnResizeMode: "onChange",
+      columns,
+      data,
+      features,
     },
-  });
+    (state) => ({
+      columnPinning: state.columnPinning,
+      columnSizing: state.columnSizing,
+    }),
+  );
 
   return (
     <div>
@@ -161,20 +175,20 @@ export default function Component() {
               {headerGroup.headers.map((header) => {
                 const { column } = header;
                 const isPinned = column.getIsPinned();
-                const isLastLeftPinned =
-                  isPinned === "left" && column.getIsLastColumn("left");
-                const isFirstRightPinned =
-                  isPinned === "right" && column.getIsFirstColumn("right");
+                const isLastStartPinned =
+                  isPinned === "start" && column.getIsLastColumn("start");
+                const isFirstEndPinned =
+                  isPinned === "end" && column.getIsFirstColumn("end");
 
                 return (
                   <TableHead
-                    className="relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border"
+                    className="relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=start]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border"
                     colSpan={header.colSpan}
                     data-last-col={
-                      isLastLeftPinned
-                        ? "left"
-                        : isFirstRightPinned
-                          ? "right"
+                      isLastStartPinned
+                        ? "start"
+                        : isFirstEndPinned
+                          ? "end"
                           : undefined
                     }
                     data-pinned={isPinned || undefined}
@@ -227,24 +241,24 @@ export default function Component() {
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
                               <DropdownMenuItem
-                                onClick={() => header.column.pin("left")}
+                                onClick={() => header.column.pin("start")}
                               >
                                 <ArrowLeftToLineIcon
                                   aria-hidden="true"
                                   className="opacity-60"
                                   size={16}
                                 />
-                                Stick to left
+                                Stick to start
                               </DropdownMenuItem>
                               <DropdownMenuItem
-                                onClick={() => header.column.pin("right")}
+                                onClick={() => header.column.pin("end")}
                               >
                                 <ArrowRightToLineIcon
                                   aria-hidden="true"
                                   className="opacity-60"
                                   size={16}
                                 />
-                                Stick to right
+                                Stick to end
                               </DropdownMenuItem>
                             </DropdownMenuContent>
                           </DropdownMenu>
@@ -270,26 +284,23 @@ export default function Component() {
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow
-                data-state={row.getIsSelected() && "selected"}
-                key={row.id}
-              >
+              <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => {
                   const { column } = cell;
                   const isPinned = column.getIsPinned();
-                  const isLastLeftPinned =
-                    isPinned === "left" && column.getIsLastColumn("left");
-                  const isFirstRightPinned =
-                    isPinned === "right" && column.getIsFirstColumn("right");
+                  const isLastStartPinned =
+                    isPinned === "start" && column.getIsLastColumn("start");
+                  const isFirstEndPinned =
+                    isPinned === "end" && column.getIsFirstColumn("end");
 
                   return (
                     <TableCell
-                      className="truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border"
+                      className="truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border"
                       data-last-col={
-                        isLastLeftPinned
-                          ? "left"
-                          : isFirstRightPinned
-                            ? "right"
+                        isLastStartPinned
+                          ? "start"
+                          : isFirstEndPinned
+                            ? "end"
                             : undefined
                       }
                       data-pinned={isPinned || undefined}
diff --git a/apps/origin/registry/default/components/comp-481.tsx b/apps/origin/registry/default/components/comp-481.tsx
index ec7dd64b1..f7511c8cd 100644
--- a/apps/origin/registry/default/components/comp-481.tsx
+++ b/apps/origin/registry/default/components/comp-481.tsx
@@ -21,12 +21,17 @@ import { CSS } from "@dnd-kit/utilities";
 import {
   type Cell,
   type ColumnDef,
+  columnOrderingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
   type Header,
-  type SortingState,
-  useReactTable,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from "lucide-react";
 import { type CSSProperties, useEffect, useId, useState } from "react";
@@ -50,7 +55,19 @@ type Item = {
   balance: number;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnOrderingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     accessorKey: "name",
     cell: ({ row }) => (
@@ -97,12 +114,10 @@ const columns: ColumnDef<Item>[] = [
   },
 ];
 
+const initialColumnOrder = columns.map((column) => column.id as string);
+
 export default function Component() {
   const [data, setData] = useState<Item[]>([]);
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnOrder, setColumnOrder] = useState<string[]>(
-    columns.map((column) => column.id as string),
-  );
 
   useEffect(() => {
     async function fetchPosts() {
@@ -115,26 +130,27 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columnResizeMode: "onChange",
-    columns,
-    data,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onColumnOrderChange: setColumnOrder,
-    onSortingChange: setSorting,
-    state: {
-      columnOrder,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        columnOrder: initialColumnOrder,
+      },
     },
-  });
+    (state) => ({
+      columnOrder: state.columnOrder,
+      sorting: state.sorting,
+    }),
+  );
 
   // reorder columns after drag & drop
   function handleDragEnd(event: DragEndEvent) {
     const { active, over } = event;
     if (active && over && active.id !== over.id) {
-      setColumnOrder((columnOrder) => {
+      table.setColumnOrder((columnOrder) => {
         const oldIndex = columnOrder.indexOf(active.id as string);
         const newIndex = columnOrder.indexOf(over.id as string);
         return arrayMove(columnOrder, oldIndex, newIndex); //this is just a splice util
@@ -161,7 +177,7 @@ export default function Component() {
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow className="bg-muted/50" key={headerGroup.id}>
               <SortableContext
-                items={columnOrder}
+                items={table.state.columnOrder}
                 strategy={horizontalListSortingStrategy}
               >
                 {headerGroup.headers.map((header) => (
@@ -174,13 +190,10 @@ export default function Component() {
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow
-                data-state={row.getIsSelected() && "selected"}
-                key={row.id}
-              >
+              <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => (
                   <SortableContext
-                    items={columnOrder}
+                    items={table.state.columnOrder}
                     key={cell.id}
                     strategy={horizontalListSortingStrategy}
                   >
@@ -220,7 +233,7 @@ export default function Component() {
 const DraggableTableHeader = ({
   header,
 }: {
-  header: Header<Item, unknown>;
+  header: Header<typeof features, Item, unknown>;
 }) => {
   const {
     attributes,
@@ -320,7 +333,11 @@ const DraggableTableHeader = ({
   );
 };
 
-const DragAlongCell = ({ cell }: { cell: Cell<Item, unknown> }) => {
+const DragAlongCell = ({
+  cell,
+}: {
+  cell: Cell<typeof features, Item, unknown>;
+}) => {
   const { isDragging, setNodeRef, transform, transition } = useSortable({
     id: cell.column.id,
   });
diff --git a/apps/origin/registry/default/components/comp-482.tsx b/apps/origin/registry/default/components/comp-482.tsx
index 4d0fe53e8..d12e7f000 100644
--- a/apps/origin/registry/default/components/comp-482.tsx
+++ b/apps/origin/registry/default/components/comp-482.tsx
@@ -2,10 +2,13 @@
 
 import {
   type ColumnDef,
+  columnVisibilityFeature,
+  createExpandedRowModel,
   flexRender,
-  getCoreRowModel,
-  getExpandedRowModel,
-  useReactTable,
+  rowExpandingFeature,
+  rowSelectionFeature,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon, InfoIcon } from "lucide-react";
 import { Fragment, useEffect, useState } from "react";
@@ -33,7 +36,14 @@ type Item = {
   note?: string;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnVisibilityFeature,
+  rowExpandingFeature,
+  expandedRowModel: createExpandedRowModel(),
+  rowSelectionFeature,
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => {
       return row.getCanExpand() ? (
@@ -151,13 +161,18 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columns,
-    data,
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-    getRowCanExpand: (row) => Boolean(row.original.note),
-  });
+  const table = useTable(
+    {
+      columns,
+      data,
+      features,
+      getRowCanExpand: (row) => Boolean(row.original.note),
+    },
+    (state) => ({
+      expanded: state.expanded,
+      rowSelection: state.rowSelection,
+    }),
+  );
 
   return (
     <div>
diff --git a/apps/origin/registry/default/components/comp-483.tsx b/apps/origin/registry/default/components/comp-483.tsx
index 088f1167f..20ce40b15 100644
--- a/apps/origin/registry/default/components/comp-483.tsx
+++ b/apps/origin/registry/default/components/comp-483.tsx
@@ -2,13 +2,18 @@
 
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type PaginationState,
-  type SortingState,
-  useReactTable,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ChevronDownIcon,
@@ -55,7 +60,21 @@ type Item = {
   balance: number;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -134,18 +153,6 @@ const columns: ColumnDef<Item>[] = [
 
 export default function Component() {
   const id = useId();
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 5,
-  });
-
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      desc: false,
-      id: "name",
-    },
-  ]);
-
   const [data, setData] = useState<Item[]>([]);
   useEffect(() => {
     async function fetchPosts() {
@@ -158,20 +165,31 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columns,
-    data,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      pagination,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize: 5,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "name",
+          },
+        ],
+      },
     },
-  });
+    (state) => ({
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   return (
     <div className="space-y-4">
@@ -281,7 +299,7 @@ export default function Component() {
             onValueChange={(value) => {
               table.setPageSize(Number(value));
             }}
-            value={table.getState().pagination.pageSize.toString()}
+            value={table.state.pagination.pageSize.toString()}
           >
             <SelectTrigger className="w-fit whitespace-nowrap" id={id}>
               <SelectValue placeholder="Select number of results" />
@@ -302,15 +320,15 @@ export default function Component() {
             className="whitespace-nowrap text-muted-foreground text-sm"
           >
             <span className="text-foreground">
-              {table.getState().pagination.pageIndex *
-                table.getState().pagination.pageSize +
+              {table.state.pagination.pageIndex *
+                table.state.pagination.pageSize +
                 1}
               -
               {Math.min(
                 Math.max(
-                  table.getState().pagination.pageIndex *
-                    table.getState().pagination.pageSize +
-                    table.getState().pagination.pageSize,
+                  table.state.pagination.pageIndex *
+                    table.state.pagination.pageSize +
+                    table.state.pagination.pageSize,
                   0,
                 ),
                 table.getRowCount(),
diff --git a/apps/origin/registry/default/components/comp-484.tsx b/apps/origin/registry/default/components/comp-484.tsx
index 5b3590636..657f4d764 100644
--- a/apps/origin/registry/default/components/comp-484.tsx
+++ b/apps/origin/registry/default/components/comp-484.tsx
@@ -2,13 +2,18 @@
 
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type PaginationState,
-  type SortingState,
-  useReactTable,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ChevronDownIcon,
@@ -54,7 +59,21 @@ type Item = {
   balance: number;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -134,18 +153,6 @@ const columns: ColumnDef<Item>[] = [
 export default function Component() {
   const pageSize = 5;
 
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: pageSize,
-  });
-
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      desc: false,
-      id: "name",
-    },
-  ]);
-
   const [data, setData] = useState<Item[]>([]);
   useEffect(() => {
     async function fetchPosts() {
@@ -158,23 +165,34 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columns,
-    data,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      pagination,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "name",
+          },
+        ],
+      },
     },
-  });
+    (state) => ({
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({
-    currentPage: table.getState().pagination.pageIndex + 1,
+    currentPage: table.state.pagination.pageIndex + 1,
     paginationItemsToDisplay: 5,
     totalPages: table.getPageCount(),
   });
@@ -285,7 +303,7 @@ export default function Component() {
         >
           Page{" "}
           <span className="text-foreground">
-            {table.getState().pagination.pageIndex + 1}
+            {table.state.pagination.pageIndex + 1}
           </span>{" "}
           of <span className="text-foreground">{table.getPageCount()}</span>
         </p>
@@ -317,8 +335,7 @@ export default function Component() {
 
               {/* Page number buttons */}
               {pages.map((page) => {
-                const isActive =
-                  page === table.getState().pagination.pageIndex + 1;
+                const isActive = page === table.state.pagination.pageIndex + 1;
                 return (
                   <PaginationItem key={page}>
                     <Button
@@ -364,7 +381,7 @@ export default function Component() {
             onValueChange={(value) => {
               table.setPageSize(Number(value));
             }}
-            value={table.getState().pagination.pageSize.toString()}
+            value={table.state.pagination.pageSize.toString()}
           >
             <SelectTrigger
               className="w-fit whitespace-nowrap"
diff --git a/apps/origin/registry/default/components/comp-485.tsx b/apps/origin/registry/default/components/comp-485.tsx
index fa339a46a..efeb879d6 100644
--- a/apps/origin/registry/default/components/comp-485.tsx
+++ b/apps/origin/registry/default/components/comp-485.tsx
@@ -2,19 +2,24 @@
 
 import {
   type ColumnDef,
-  type ColumnFiltersState,
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
   type FilterFn,
   flexRender,
-  getCoreRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type PaginationState,
   type Row,
-  type SortingState,
-  useReactTable,
-  type VisibilityState,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ChevronDownIcon,
@@ -101,15 +106,37 @@ type Item = {
   balance: number;
 };
 
+const features = tableFeatures({
+  columnFilteringFeature,
+  columnFacetingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  facetedUniqueValues: createFacetedUniqueValues(),
+  filteredRowModel: createFilteredRowModel(),
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
 // Custom filter function for multi-column searching
-const multiColumnFilterFn: FilterFn<Item> = (row, _columnId, filterValue) => {
+const multiColumnFilterFn: FilterFn<typeof features, Item> = (
+  row,
+  _columnId,
+  filterValue,
+) => {
   const searchableRowContent =
     `${row.original.name} ${row.original.email}`.toLowerCase();
   const searchTerm = (filterValue ?? "").toLowerCase();
   return searchableRowContent.includes(searchTerm);
 };
 
-const statusFilterFn: FilterFn<Item> = (
+const statusFilterFn: FilterFn<typeof features, Item> = (
   row,
   columnId,
   filterValue: string[],
@@ -119,7 +146,7 @@ const statusFilterFn: FilterFn<Item> = (
   return filterValue.includes(status);
 };
 
-const columns: ColumnDef<Item>[] = [
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -213,21 +240,8 @@ const columns: ColumnDef<Item>[] = [
 
 export default function Component() {
   const id = useId();
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      desc: false,
-      id: "name",
-    },
-  ]);
-
   const [data, setData] = useState<Item[]>([]);
   useEffect(() => {
     async function fetchPosts() {
@@ -249,26 +263,33 @@ export default function Component() {
     table.resetRowSelection();
   };
 
-  const table = useReactTable({
-    columns,
-    data,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      columnFilters,
-      columnVisibility,
-      pagination,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize: 10,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "name",
+          },
+        ],
+      },
     },
-  });
+    (state) => ({
+      columnFilters: state.columnFilters,
+      columnVisibility: state.columnVisibility,
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   // Get unique status values
   const uniqueStatusValues = useMemo(() => {
@@ -603,7 +624,7 @@ export default function Component() {
             onValueChange={(value) => {
               table.setPageSize(Number(value));
             }}
-            value={table.getState().pagination.pageSize.toString()}
+            value={table.state.pagination.pageSize.toString()}
           >
             <SelectTrigger className="w-fit whitespace-nowrap" id={id}>
               <SelectValue placeholder="Select number of results" />
@@ -624,15 +645,15 @@ export default function Component() {
             className="whitespace-nowrap text-muted-foreground text-sm"
           >
             <span className="text-foreground">
-              {table.getState().pagination.pageIndex *
-                table.getState().pagination.pageSize +
+              {table.state.pagination.pageIndex *
+                table.state.pagination.pageSize +
                 1}
               -
               {Math.min(
                 Math.max(
-                  table.getState().pagination.pageIndex *
-                    table.getState().pagination.pageSize +
-                    table.getState().pagination.pageSize,
+                  table.state.pagination.pageIndex *
+                    table.state.pagination.pageSize +
+                    table.state.pagination.pageSize,
                   0,
                 ),
                 table.getRowCount(),
@@ -720,7 +741,7 @@ export default function Component() {
   );
 }
 
-function RowActions({ row: _row }: { row: Row<Item> }) {
+function RowActions({ row: _row }: { row: Row<typeof features, Item> }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
diff --git a/apps/ui/package.json b/apps/ui/package.json
index 798076907..1c913ec22 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -6,7 +6,7 @@
     "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/react": "^1.1.1",
     "@remixicon/react": "^4.7.0",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
diff --git a/apps/ui/public/r/p-table-3.json b/apps/ui/public/r/p-table-3.json
index fe51cb4f9..d81e78c69 100644
--- a/apps/ui/public/r/p-table-3.json
+++ b/apps/ui/public/r/p-table-3.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-3.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame } from \"@/registry/default/ui/frame\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst getColumns = (): ColumnDef<Project>[] => [\n  {\n    cell: ({ row }) => {\n      const toggleHandler = row.getToggleSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select row\"\n          checked={row.getIsSelected()}\n          disabled={!row.getCanSelect()}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nexport default function Particle() {\n  const [tableData] = useState<Project[]>(data);\n  const [rowSelection, setRowSelection] = useState({});\n\n  const columns = useMemo(() => getColumns(), []);\n\n  const table = useReactTable({\n    columns,\n    data: tableData,\n    enableRowSelection: true,\n    getCoreRowModel: getCoreRowModel(),\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  const totalBudget = tableData.reduce(\n    (sum, project) => sum + project.budget,\n    0,\n  );\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Frame>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame } from \"@/registry/default/ui/frame\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst getColumns = (): ColumnDef<typeof features, Project>[] => [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        disabled={!row.getCanSelect()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nconst columns = getColumns();\n\nexport default function Particle() {\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableRowSelection: true,\n      features,\n    },\n    (state) => ({ rowSelection: state.rowSelection }),\n  );\n\n  const totalBudget = data.reduce((sum, project) => sum + project.budget, 0);\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Frame>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-table-4.json b/apps/ui/public/r/p-table-4.json
index 34dc508a6..4d793a6c3 100644
--- a/apps/ui/public/r/p-table-4.json
+++ b/apps/ui/public/r/p-table-4.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-4.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame, FrameFooter } from \"@/registry/default/ui/frame\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst columns: ColumnDef<Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"departureTime\",\n    },\n  ]);\n\n  const table = useReactTable({\n    columns,\n    data: flights,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <FrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.getState().pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.getState().pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.getState().pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.getState().pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.getState().pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </FrameFooter>\n    </Frame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame, FrameFooter } from \"@/registry/default/ui/frame\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const table = useTable(\n    {\n      columns,\n      data: flights,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"departureTime\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <FrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.state.pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.state.pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.state.pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.state.pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.state.pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </FrameFooter>\n    </Frame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-table-6.json b/apps/ui/public/r/p-table-6.json
index 71cbff9a3..189e1e0fb 100644
--- a/apps/ui/public/r/p-table-6.json
+++ b/apps/ui/public/r/p-table-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-6.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { CardFrame } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst getColumns = (): ColumnDef<Project>[] => [\n  {\n    cell: ({ row }) => {\n      const toggleHandler = row.getToggleSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select row\"\n          checked={row.getIsSelected()}\n          disabled={!row.getCanSelect()}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nexport default function Particle() {\n  const [tableData] = useState<Project[]>(data);\n  const [rowSelection, setRowSelection] = useState({});\n\n  const columns = useMemo(() => getColumns(), []);\n\n  const table = useReactTable({\n    columns,\n    data: tableData,\n    enableRowSelection: true,\n    getCoreRowModel: getCoreRowModel(),\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  const totalBudget = tableData.reduce(\n    (sum, project) => sum + project.budget,\n    0,\n  );\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </CardFrame>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { CardFrame } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst getColumns = (): ColumnDef<typeof features, Project>[] => [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        disabled={!row.getCanSelect()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nconst columns = getColumns();\n\nexport default function Particle() {\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableRowSelection: true,\n      features,\n    },\n    (state) => ({ rowSelection: state.rowSelection }),\n  );\n\n  const totalBudget = data.reduce((sum, project) => sum + project.budget, 0);\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </CardFrame>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-table-8.json b/apps/ui/public/r/p-table-8.json
index a0c2e9fc5..354bb1edd 100644
--- a/apps/ui/public/r/p-table-8.json
+++ b/apps/ui/public/r/p-table-8.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-8.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { CardFrame, CardFrameFooter } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst columns: ColumnDef<Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"departureTime\",\n    },\n  ]);\n\n  const table = useReactTable({\n    columns,\n    data: flights,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <CardFrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.getState().pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.getState().pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.getState().pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.getState().pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.getState().pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </CardFrameFooter>\n    </CardFrame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { CardFrame, CardFrameFooter } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const table = useTable(\n    {\n      columns,\n      data: flights,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"departureTime\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <CardFrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.state.pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.state.pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.state.pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.state.pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.state.pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </CardFrameFooter>\n    </CardFrame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/registry/default/particles/p-table-3.tsx b/apps/ui/registry/default/particles/p-table-3.tsx
index 07f1e0c00..9dc86f5a1 100644
--- a/apps/ui/registry/default/particles/p-table-3.tsx
+++ b/apps/ui/registry/default/particles/p-table-3.tsx
@@ -2,12 +2,12 @@
 
 import {
   type ColumnDef,
+  columnVisibilityFeature,
   flexRender,
-  getCoreRowModel,
-  useReactTable,
+  rowSelectionFeature,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
-import type React from "react";
-import { useMemo, useState } from "react";
 import { Badge } from "@/registry/default/ui/badge";
 import { Checkbox } from "@/registry/default/ui/checkbox";
 import { Frame } from "@/registry/default/ui/frame";
@@ -89,42 +89,30 @@ const getStatusColor = (status: Project["status"]) => {
   }
 };
 
-const getColumns = (): ColumnDef<Project>[] => [
+const features = tableFeatures({
+  columnVisibilityFeature,
+  rowSelectionFeature,
+});
+
+const getColumns = (): ColumnDef<typeof features, Project>[] => [
   {
-    cell: ({ row }) => {
-      const toggleHandler = row.getToggleSelectedHandler();
-      return (
-        <Checkbox
-          aria-label="Select row"
-          checked={row.getIsSelected()}
-          disabled={!row.getCanSelect()}
-          onCheckedChange={(value) => {
-            // Create a synthetic event for the handler
-            const syntheticEvent = {
-              target: { checked: !!value },
-            } as unknown as React.ChangeEvent<HTMLInputElement>;
-            toggleHandler(syntheticEvent);
-          }}
-        />
-      );
-    },
-    enableSorting: false,
+    cell: ({ row }) => (
+      <Checkbox
+        aria-label="Select row"
+        checked={row.getIsSelected()}
+        disabled={!row.getCanSelect()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+      />
+    ),
     header: ({ table }) => {
       const isAllSelected = table.getIsAllPageRowsSelected();
       const isSomeSelected = table.getIsSomePageRowsSelected();
-      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();
       return (
         <Checkbox
           aria-label="Select all"
           checked={isAllSelected}
           indeterminate={isSomeSelected && !isAllSelected}
-          onCheckedChange={(value) => {
-            // Create a synthetic event for the handler
-            const syntheticEvent = {
-              target: { checked: !!value },
-            } as unknown as React.ChangeEvent<HTMLInputElement>;
-            toggleHandler(syntheticEvent);
-          }}
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         />
       );
     },
@@ -173,27 +161,20 @@ const getColumns = (): ColumnDef<Project>[] => [
   },
 ];
 
-export default function Particle() {
-  const [tableData] = useState<Project[]>(data);
-  const [rowSelection, setRowSelection] = useState({});
-
-  const columns = useMemo(() => getColumns(), []);
+const columns = getColumns();
 
-  const table = useReactTable({
-    columns,
-    data: tableData,
-    enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
-    state: {
-      rowSelection,
+export default function Particle() {
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableRowSelection: true,
+      features,
     },
-  });
-
-  const totalBudget = tableData.reduce(
-    (sum, project) => sum + project.budget,
-    0,
+    (state) => ({ rowSelection: state.rowSelection }),
   );
+
+  const totalBudget = data.reduce((sum, project) => sum + project.budget, 0);
   const formattedTotal = new Intl.NumberFormat("en-US", {
     currency: "USD",
     maximumFractionDigits: 0,
diff --git a/apps/ui/registry/default/particles/p-table-4.tsx b/apps/ui/registry/default/particles/p-table-4.tsx
index 7f09c9dd8..74a486e62 100644
--- a/apps/ui/registry/default/particles/p-table-4.tsx
+++ b/apps/ui/registry/default/particles/p-table-4.tsx
@@ -2,16 +2,20 @@
 
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type PaginationState,
-  type SortingState,
-  useReactTable,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from "lucide-react";
-import { useState } from "react";
 import { cn } from "@/registry/default/lib/utils";
 import { Badge } from "@/registry/default/ui/badge";
 import { Button } from "@/registry/default/ui/button";
@@ -67,7 +71,21 @@ const getStatusColor = (status: Flight["status"]) => {
   }
 };
 
-const columns: ColumnDef<Flight>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Flight>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -186,32 +204,31 @@ const columns: ColumnDef<Flight>[] = [
 export default function Particle() {
   const pageSize = 10;
 
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: pageSize,
-  });
-
-  const [sorting, setSorting] = useState<SortingState>([
+  const table = useTable(
     {
-      desc: false,
-      id: "departureTime",
+      columns,
+      data: flights,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "departureTime",
+          },
+        ],
+      },
     },
-  ]);
-
-  const table = useReactTable({
-    columns,
-    data: flights,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      pagination,
-      sorting,
-    },
-  });
+    (state) => ({
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   return (
     <Frame className="w-full">
@@ -302,9 +319,9 @@ export default function Particle() {
             <p className="text-muted-foreground text-sm">Viewing</p>
             <Select
               items={Array.from({ length: table.getPageCount() }, (_, i) => {
-                const start = i * table.getState().pagination.pageSize + 1;
+                const start = i * table.state.pagination.pageSize + 1;
                 const end = Math.min(
-                  (i + 1) * table.getState().pagination.pageSize,
+                  (i + 1) * table.state.pagination.pageSize,
                   table.getRowCount(),
                 );
                 const pageNum = i + 1;
@@ -313,7 +330,7 @@ export default function Particle() {
               onValueChange={(value) => {
                 table.setPageIndex((value as number) - 1);
               }}
-              value={table.getState().pagination.pageIndex + 1}
+              value={table.state.pagination.pageIndex + 1}
             >
               <SelectTrigger
                 aria-label="Select result range"
@@ -324,9 +341,9 @@ export default function Particle() {
               </SelectTrigger>
               <SelectPopup>
                 {Array.from({ length: table.getPageCount() }, (_, i) => {
-                  const start = i * table.getState().pagination.pageSize + 1;
+                  const start = i * table.state.pagination.pageSize + 1;
                   const end = Math.min(
-                    (i + 1) * table.getState().pagination.pageSize,
+                    (i + 1) * table.state.pagination.pageSize,
                     table.getRowCount(),
                   );
                   const pageNum = i + 1;
diff --git a/apps/ui/registry/default/particles/p-table-6.tsx b/apps/ui/registry/default/particles/p-table-6.tsx
index de2fcdc61..366f7642a 100644
--- a/apps/ui/registry/default/particles/p-table-6.tsx
+++ b/apps/ui/registry/default/particles/p-table-6.tsx
@@ -2,12 +2,12 @@
 
 import {
   type ColumnDef,
+  columnVisibilityFeature,
   flexRender,
-  getCoreRowModel,
-  useReactTable,
+  rowSelectionFeature,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
-import type React from "react";
-import { useMemo, useState } from "react";
 import { Badge } from "@/registry/default/ui/badge";
 import { CardFrame } from "@/registry/default/ui/card";
 import { Checkbox } from "@/registry/default/ui/checkbox";
@@ -89,42 +89,30 @@ const getStatusColor = (status: Project["status"]) => {
   }
 };
 
-const getColumns = (): ColumnDef<Project>[] => [
+const features = tableFeatures({
+  columnVisibilityFeature,
+  rowSelectionFeature,
+});
+
+const getColumns = (): ColumnDef<typeof features, Project>[] => [
   {
-    cell: ({ row }) => {
-      const toggleHandler = row.getToggleSelectedHandler();
-      return (
-        <Checkbox
-          aria-label="Select row"
-          checked={row.getIsSelected()}
-          disabled={!row.getCanSelect()}
-          onCheckedChange={(value) => {
-            // Create a synthetic event for the handler
-            const syntheticEvent = {
-              target: { checked: !!value },
-            } as unknown as React.ChangeEvent<HTMLInputElement>;
-            toggleHandler(syntheticEvent);
-          }}
-        />
-      );
-    },
-    enableSorting: false,
+    cell: ({ row }) => (
+      <Checkbox
+        aria-label="Select row"
+        checked={row.getIsSelected()}
+        disabled={!row.getCanSelect()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+      />
+    ),
     header: ({ table }) => {
       const isAllSelected = table.getIsAllPageRowsSelected();
       const isSomeSelected = table.getIsSomePageRowsSelected();
-      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();
       return (
         <Checkbox
           aria-label="Select all"
           checked={isAllSelected}
           indeterminate={isSomeSelected && !isAllSelected}
-          onCheckedChange={(value) => {
-            // Create a synthetic event for the handler
-            const syntheticEvent = {
-              target: { checked: !!value },
-            } as unknown as React.ChangeEvent<HTMLInputElement>;
-            toggleHandler(syntheticEvent);
-          }}
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         />
       );
     },
@@ -173,27 +161,20 @@ const getColumns = (): ColumnDef<Project>[] => [
   },
 ];
 
-export default function Particle() {
-  const [tableData] = useState<Project[]>(data);
-  const [rowSelection, setRowSelection] = useState({});
-
-  const columns = useMemo(() => getColumns(), []);
+const columns = getColumns();
 
-  const table = useReactTable({
-    columns,
-    data: tableData,
-    enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
-    state: {
-      rowSelection,
+export default function Particle() {
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableRowSelection: true,
+      features,
     },
-  });
-
-  const totalBudget = tableData.reduce(
-    (sum, project) => sum + project.budget,
-    0,
+    (state) => ({ rowSelection: state.rowSelection }),
   );
+
+  const totalBudget = data.reduce((sum, project) => sum + project.budget, 0);
   const formattedTotal = new Intl.NumberFormat("en-US", {
     currency: "USD",
     maximumFractionDigits: 0,
diff --git a/apps/ui/registry/default/particles/p-table-8.tsx b/apps/ui/registry/default/particles/p-table-8.tsx
index d8e5d2990..3f48a78db 100644
--- a/apps/ui/registry/default/particles/p-table-8.tsx
+++ b/apps/ui/registry/default/particles/p-table-8.tsx
@@ -2,16 +2,20 @@
 
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type PaginationState,
-  type SortingState,
-  useReactTable,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from "lucide-react";
-import { useState } from "react";
 import { cn } from "@/registry/default/lib/utils";
 import { Badge } from "@/registry/default/ui/badge";
 import { Button } from "@/registry/default/ui/button";
@@ -67,7 +71,21 @@ const getStatusColor = (status: Flight["status"]) => {
   }
 };
 
-const columns: ColumnDef<Flight>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Flight>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -186,32 +204,31 @@ const columns: ColumnDef<Flight>[] = [
 export default function Particle() {
   const pageSize = 10;
 
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: pageSize,
-  });
-
-  const [sorting, setSorting] = useState<SortingState>([
+  const table = useTable(
     {
-      desc: false,
-      id: "departureTime",
+      columns,
+      data: flights,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "departureTime",
+          },
+        ],
+      },
     },
-  ]);
-
-  const table = useReactTable({
-    columns,
-    data: flights,
-    enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      pagination,
-      sorting,
-    },
-  });
+    (state) => ({
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   return (
     <CardFrame className="w-full">
@@ -302,9 +319,9 @@ export default function Particle() {
             <p className="text-muted-foreground text-sm">Viewing</p>
             <Select
               items={Array.from({ length: table.getPageCount() }, (_, i) => {
-                const start = i * table.getState().pagination.pageSize + 1;
+                const start = i * table.state.pagination.pageSize + 1;
                 const end = Math.min(
-                  (i + 1) * table.getState().pagination.pageSize,
+                  (i + 1) * table.state.pagination.pageSize,
                   table.getRowCount(),
                 );
                 const pageNum = i + 1;
@@ -313,7 +330,7 @@ export default function Particle() {
               onValueChange={(value) => {
                 table.setPageIndex((value as number) - 1);
               }}
-              value={table.getState().pagination.pageIndex + 1}
+              value={table.state.pagination.pageIndex + 1}
             >
               <SelectTrigger
                 aria-label="Select result range"
@@ -324,9 +341,9 @@ export default function Particle() {
               </SelectTrigger>
               <SelectPopup>
                 {Array.from({ length: table.getPageCount() }, (_, i) => {
-                  const start = i * table.getState().pagination.pageSize + 1;
+                  const start = i * table.state.pagination.pageSize + 1;
                   const end = Math.min(
-                    (i + 1) * table.getState().pagination.pageSize,
+                    (i + 1) * table.state.pagination.pageSize,
                     table.getRowCount(),
                   );
                   const pageNum = i + 1;
diff --git a/bun.lock b/bun.lock
index 2281a0308..e772a47e0 100644
--- a/bun.lock
+++ b/bun.lock
@@ -22,7 +22,7 @@
         "@dnd-kit/utilities": "^3.2.2",
         "@hugeicons/core-free-icons": "^2.0.0",
         "@hugeicons/react": "^1.1.1",
-        "@tanstack/react-table": "^8.21.3",
+        "@tanstack/react-table": "^9.2.4",
         "dompurify": "^3.3.1",
         "lucide-react": "^0.555.0",
         "marked": "^17.0.1",
@@ -55,7 +55,7 @@
         "@origin-space/image-cropper": "^0.1.9",
         "@radix-ui/react-icons": "^1.3.2",
         "@remixicon/react": "^4.7.0",
-        "@tanstack/react-table": "^8.21.3",
+        "@tanstack/react-table": "^9.2.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "1.1.1",
@@ -110,7 +110,7 @@
         "@hugeicons/core-free-icons": "^2.0.0",
         "@hugeicons/react": "^1.1.1",
         "@remixicon/react": "^4.7.0",
-        "@tanstack/react-table": "^8.21.3",
+        "@tanstack/react-table": "^9.2.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
@@ -937,9 +937,13 @@
 
     "@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.17", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.17", "@tailwindcss/oxide": "4.1.17", "postcss": "^8.4.41", "tailwindcss": "4.1.17" } }, "sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw=="],
 
-    "@tanstack/react-table": ["@tanstack/react-table@8.21.3", "", { "dependencies": { "@tanstack/table-core": "8.21.3" }, "peerDependencies": { "react": "19.2.0", "react-dom": "19.2.0" } }, "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww=="],
+    "@tanstack/react-store": ["@tanstack/react-store@0.11.1", "", { "dependencies": { "@tanstack/store": "0.11.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-HaIGKI3YLmjBYIvy5DFDY23oNaYZIsTZfngey07Uh5iLVJgM3bIGCnZeOFOqzjFld9JHWcaHJnasD/bKoGKwJQ=="],
 
-    "@tanstack/table-core": ["@tanstack/table-core@8.21.3", "", {}, "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg=="],
+    "@tanstack/react-table": ["@tanstack/react-table@9.2.4", "", { "dependencies": { "@tanstack/react-store": "^0.11.1", "@tanstack/table-core": "9.2.4" }, "peerDependencies": { "react": ">=18" } }, "sha512-Rzp1Q4e0/nIgEjmISYR5HeEgLTNtrG+C7NFZf/AbCxPO5hg+zC3yNGwcoECigUk8SFzzvhXbd2rFdtP2ZiGrfA=="],
+
+    "@tanstack/store": ["@tanstack/store@0.11.1", "", {}, "sha512-mzTOBhypOuDJAy/D8n2MfUZ1HFkXnmSETviRyhqEC8LUE7/IZQExOTxMANj3KjTofYTkFNpBY67qaVrT41YccA=="],
+
+    "@tanstack/table-core": ["@tanstack/table-core@9.2.4", "", { "dependencies": { "@tanstack/store": "^0.11.1" } }, "sha512-GwdDyGGr6UXAtubF14yAwcXvdaogqfsQgIk89Suebjxob/Rjq2xvfmXsjDF1rQmKmhHsJm9TOY7myxv3i6geJw=="],
 
     "@tootallnate/quickjs-emscripten": ["@tootallnate/quickjs-emscripten@0.23.0", "", {}, "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA=="],
 
@@ -2631,10 +2635,6 @@
 
     "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
-    "@tanstack/react-table/react": ["react@19.2.0", "", {}, "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ=="],
-
-    "@tanstack/react-table/react-dom": ["react-dom@19.2.0", "", { "dependencies": { "scheduler": "0.27.0" }, "peerDependencies": { "react": "19.2.0" } }, "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ=="],
-
     "@ts-morph/common/minimatch": ["minimatch@10.0.3", "", { "dependencies": { "@isaacs/brace-expansion": "5.0.0" } }, "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw=="],
 
     "@turbo/gen/commander": ["commander@10.0.1", "", {}, "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug=="],