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 01/24] 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 02/24] 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 03/24] 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 04/24] 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 05/24] 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 06/24] 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 07/24] 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 08/24] 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 09/24] 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 10/24] 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 11/24] 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 12/24] 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 13/24] 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 14/24] 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 15/24] 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 16/24] 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 17/24] 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 18/24] 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 19/24] 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 20/24] 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 21/24] 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 22/24] 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 23/24] 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 96faac85e81aabad9e0a30b4d7f1561460ac79c1 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Mon, 13 Jul 2026 13:15:33 +0200
Subject: [PATCH 24/24] 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"] = [