@flamingo-stack/openframe-frontend-core 0.0.561-1852.4997.2 → 0.0.561

package/dist/components/meeting-scheduler/index.js

@@ -1,18 +1,16 @@
 "use client";
 "use client";
-import {
-  Calendar
-} from "../../chunk-7J4DGFHZ.js";
 import {
   PersistentPaginationWrapper
-} from "../../chunk-CLQ6L4JG.js";
+} from "../../chunk-ZJ7RI62F.js";
 import {
   EmptyState
-} from "../../chunk-KKIAKLI6.js";
+} from "../../chunk-ONDI64M3.js";
 import {
   Autocomplete,
   AvatarStack,
   BackButton,
+  DatePickerCalendar,
   HoneypotField,
   MAX_MONTH_OFFSET,
   RadioGroup,
@@ -26,7 +24,7 @@ import {
   StatusBadge,
   Textarea,
   formatDurationCompact
-} from "../../chunk-3IBCKS3I.js";
+} from "../../chunk-GKGQ4DWE.js";
 import "../../chunk-7EUIW46X.js";
 import "../../chunk-LXC6P2EO.js";
 import "../../chunk-EL5YVPD5.js";
@@ -36,17 +34,16 @@ import {
 } from "../../chunk-ZNEVGXMU.js";
 import "../../chunk-ZJJERZUA.js";
 import "../../chunk-GJAHN7LH.js";
-import {
-  ClockIcon
-} from "../../chunk-JMZH4KMJ.js";
+import "../../chunk-JMZH4KMJ.js";
 import "../../chunk-W72U7OU7.js";
 import "../../chunk-UWY722RH.js";
 import {
   Checkbox,
+  FieldWrapper,
   Input,
   Label,
   Skeleton
-} from "../../chunk-RSZXB6J2.js";
+} from "../../chunk-RDKJCZHY.js";
 import "../../chunk-6U3IUD57.js";
 import {
   Button
@@ -64,10 +61,11 @@ import "../../chunk-GGWZFCYS.js";
 
 // src/components/meeting-scheduler/index.tsx
 init_cn();
-import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo5, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo5, useRef as useRef2, useState as useState3 } from "react";
 
 // src/hooks/use-meeting-booking.ts
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 var KNOWN_CODES = [
   "SLOT_TAKEN",
   "VALIDATION",
@@ -75,15 +73,15 @@ var KNOWN_CODES = [
   "TEMPORARILY_UNAVAILABLE",
   "MEETING_UNAVAILABLE"
 ];
+var AVAILABILITY_STALE_MS = 3e4;
+function meetingAvailabilityKey(apiBaseUrl, meetingId, monthOffset) {
+  return ["meeting-availability", apiBaseUrl, meetingId, monthOffset];
+}
 function useMeetingBooking(options) {
   const { meetingId, apiBaseUrl = "", initialAvailability } = options;
-  const seededFor = initialAvailability?.meetingId === meetingId ? initialAvailability : void 0;
-  const [availability, setAvailability] = useState(seededFor ?? null);
-  const [monthOffset, setMonthOffsetState] = useState(seededFor?.monthOffset ?? 0);
-  const [isLoadingAvailability, setIsLoadingAvailability] = useState(!seededFor);
-  const [availabilityError, setAvailabilityError] = useState(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const submittingRef = useRef(false);
+  const queryClient = useQueryClient();
+  const seededOffset = initialAvailability?.meetingId === meetingId ? initialAvailability.monthOffset : void 0;
+  const [monthOffset, setMonthOffsetState] = useState(seededOffset ?? 0);
   const setMonthOffset = useCallback((offset) => {
     setMonthOffsetState(Math.max(0, Math.min(MAX_MONTH_OFFSET, offset)));
   }, []);
@@ -93,48 +91,27 @@ function useMeetingBooking(options) {
     prevMeetingIdRef.current = meetingId;
     setMonthOffsetState(0);
   }, [meetingId]);
-  useEffect(() => {
-    const controller = new AbortController();
-    let active = true;
-    const load = async () => {
-      setAvailabilityError(null);
-      if (!availability || availability.meetingId !== meetingId || availability.monthOffset !== monthOffset) {
-        setIsLoadingAvailability(true);
-      }
-      try {
-        const params = new URLSearchParams({ meeting: meetingId, monthOffset: String(monthOffset) });
-        const res = await contentFetch(`${apiBaseUrl}/api/meetings/availability?${params}`, {
-          signal: controller.signal
-        });
-        if (!res.ok) throw new Error(`availability ${res.status}`);
-        const data = await res.json();
-        if (active) setAvailability(data);
-      } catch (err) {
-        if (!active || err instanceof DOMException && err.name === "AbortError") return;
-        setAvailabilityError(err instanceof Error ? err.message : "Failed to load availability");
-      } finally {
-        if (active) setIsLoadingAvailability(false);
-      }
-    };
-    void load();
-    return () => {
-      active = false;
-      controller.abort();
-    };
-  }, [meetingId, monthOffset, apiBaseUrl]);
-  const refetchAvailability = useCallback(async () => {
-    try {
+  const seed = initialAvailability?.meetingId === meetingId && initialAvailability.monthOffset === monthOffset ? initialAvailability : void 0;
+  const availabilityQuery = useQuery({
+    queryKey: meetingAvailabilityKey(apiBaseUrl, meetingId, monthOffset),
+    queryFn: async ({ signal }) => {
       const params = new URLSearchParams({ meeting: meetingId, monthOffset: String(monthOffset) });
-      const res = await contentFetch(`${apiBaseUrl}/api/meetings/availability?${params}`);
-      if (res.ok) setAvailability(await res.json());
-    } catch {
-    }
-  }, [meetingId, monthOffset, apiBaseUrl]);
-  const book = useCallback(
-    async (payload) => {
-      if (submittingRef.current) return { ok: false, code: "VALIDATION", message: "Already submitting" };
-      submittingRef.current = true;
-      setIsSubmitting(true);
+      const res = await contentFetch(`${apiBaseUrl}/api/meetings/availability?${params}`, { signal });
+      if (!res.ok) throw new Error(`availability ${res.status}`);
+      return await res.json();
+    },
+    staleTime: AVAILABILITY_STALE_MS,
+    initialData: seed,
+    // Stamped as infinitely old on purpose: the seed is first-paint
+    // scaffolding for a 60-second-volatile resource, not truth, so it paints
+    // immediately AND is refetched immediately.
+    initialDataUpdatedAt: seed ? 0 : void 0
+  });
+  const refetchAvailability = useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey: meetingAvailabilityKey(apiBaseUrl, meetingId, monthOffset) }).catch(() => void 0);
+  }, [queryClient, apiBaseUrl, meetingId, monthOffset]);
+  const bookMutation = useMutation({
+    mutationFn: async (payload) => {
       try {
         const res = await contentFetch(`${apiBaseUrl}/api/meetings/book`, {
           method: "POST",
@@ -148,22 +125,37 @@ function useMeetingBooking(options) {
         return { ok: false, code, message: typeof data.error === "string" ? data.error : void 0 };
       } catch {
         return { ok: false, code: "TEMPORARILY_UNAVAILABLE" };
+      }
+    },
+    // A booking is not a read — never retried, at any layer.
+    retry: false
+  });
+  const submittingRef = useRef(false);
+  const { mutateAsync } = bookMutation;
+  const book = useCallback(
+    async (payload) => {
+      if (submittingRef.current) return { ok: false, code: "VALIDATION", message: "Already submitting" };
+      submittingRef.current = true;
+      try {
+        return await mutateAsync(payload);
       } finally {
         submittingRef.current = false;
-        setIsSubmitting(false);
       }
     },
-    [apiBaseUrl]
+    [mutateAsync]
   );
   return {
-    availability,
-    isLoadingAvailability,
-    availabilityError,
+    availability: availabilityQuery.data ?? null,
+    /** No availability for this month yet — the times column has nothing to show. */
+    isLoadingAvailability: availabilityQuery.isPending,
+    /** ANY request in flight, including a silent revalidation of cached data. */
+    isFetchingAvailability: availabilityQuery.isFetching,
+    availabilityError: availabilityQuery.error ? availabilityQuery.error.message : null,
     monthOffset,
     setMonthOffset,
     refetchAvailability,
     book,
-    isSubmitting
+    isSubmitting: bookMutation.isPending
   };
 }
 
@@ -258,7 +250,14 @@ function makeBookingSchema(formFields, legalConsent) {
 // src/components/meeting-scheduler/context-panel.tsx
 import { useMemo } from "react";
 init_cn();
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PANEL_STACK = "flex flex-col gap-[var(--spacing-system-l)]";
+var IDENTITY_ROW = "flex items-center justify-between gap-[var(--spacing-system-m)] lg:flex-col lg:items-stretch lg:gap-[var(--spacing-system-l)]";
+var STRIP_BODY = "flex flex-col gap-[var(--spacing-system-l)] md:flex-row md:items-start lg:flex-col";
+var STRIP_MAIN = "flex min-w-0 flex-col gap-[var(--spacing-system-l)] md:flex-1";
+var STRIP_ASIDE = "flex flex-col gap-[var(--spacing-system-xxs)] md:w-[280px] md:shrink-0 lg:w-full";
+var BACK_BUTTON_CLASS = "py-0";
+var FIELD_LABEL_CLASS = "text-h4 text-ods-text-primary";
 function zoneLabel(tz) {
   try {
     const parts = new Intl.DateTimeFormat("en-US", {
@@ -271,25 +270,28 @@ function zoneLabel(tz) {
     return tz.replace(/_/g, " ");
   }
 }
-function ContextPanelSkeleton({ className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-[var(--spacing-system-mf)]", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-s)]", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-12 rounded-full shrink-0" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xs)]", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-h5 text-ods-text-secondary", children: "Duration" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--spacing-system-xs)]", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-20" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-20" })
+function ContextPanelSkeleton({
+  className,
+  onBack,
+  backLabel = "Back"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(PANEL_STACK, className), children: [
+    onBack && /* @__PURE__ */ jsx(BackButton, { label: backLabel, onClick: onBack, className: BACK_BUTTON_CLASS }),
+    /* @__PURE__ */ jsxs("div", { className: STRIP_BODY, children: [
+      /* @__PURE__ */ jsx("div", { className: STRIP_MAIN, children: /* @__PURE__ */ jsxs("div", { className: IDENTITY_ROW, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xs)] lg:flex-none", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 shrink-0 rounded-full" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20 shrink-0" })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: STRIP_ASIDE, children: [
+        /* @__PURE__ */ jsx("p", { className: FIELD_LABEL_CLASS, children: "Timezone" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" })
       ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xs)]", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-h5 text-ods-text-secondary", children: "Timezone" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" })
     ] })
   ] });
 }
@@ -302,7 +304,10 @@ function SchedulerContextPanel({
   onSelectDuration,
   timezone,
   onTimezoneChange,
+  onBack,
+  backLabel = "Back",
   locked = false,
+  showTimezone = true,
   className
 }) {
   const zoneOptions = useMemo(() => {
@@ -317,49 +322,67 @@ function SchedulerContextPanel({
     if (!zones.includes(timezone)) zones = [timezone, ...zones];
     return zones.map((tz) => ({ value: tz, label: zoneLabel(tz) }));
   }, [timezone]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-[var(--spacing-system-mf)]", className), children: [
-    hosts.length > 0 && hosts.length <= 3 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--spacing-system-s)]", children: hosts.map((host) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-s)]", children: [
-      /* @__PURE__ */ jsx(SquareAvatar, { variant: "round", size: "lg", src: host.avatarUrl ?? void 0, alt: host.name, fallback: host.name }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-h4 text-ods-text-primary truncate", children: host.name }),
-        host.title && /* @__PURE__ */ jsx("p", { className: "text-h6 text-ods-text-secondary truncate", children: host.title })
-      ] })
-    ] }, host.name)) }),
-    hosts.length > 3 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xs)]", children: [
-      /* @__PURE__ */ jsx(AvatarStack, { people: hosts, max: 4, size: "lg" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-h6 text-ods-text-secondary", children: [
-        hosts.length,
-        " hosts on this calendar"
-      ] })
-    ] }),
-    title && /* @__PURE__ */ jsx("p", { className: "text-h3 text-ods-text-primary", children: title }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-h6 text-ods-text-secondary", children: description }),
-    locked ? (
-      // Post-selection: selectors are GONE, not disabled — the step summary
-      // owns the chosen time/zone; the panel keeps a single static line.
-      selectedDurationMs != null && /* @__PURE__ */ jsxs("p", { className: "text-h6 text-ods-text-secondary", children: [
-        formatDurationCompact(selectedDurationMs / 1e3),
-        " call"
-      ] })
-    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      durationsMs.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xs)]", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-h5 text-ods-text-secondary", children: "Duration" }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-[var(--spacing-system-xs)]", children: durationsMs.map((ms) => /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: selectedDurationMs === ms ? void 0 : "outline",
-            size: "small-legacy",
-            onClick: () => onSelectDuration(ms),
-            children: formatDurationCompact(ms / 1e3)
-          },
-          ms
-        )) })
-      ] }) : selectedDurationMs != null && /* @__PURE__ */ jsxs("p", { className: "text-h6 text-ods-text-secondary", children: [
-        formatDurationCompact(selectedDurationMs / 1e3),
-        " call"
+  return /* @__PURE__ */ jsxs("div", { className: cn(PANEL_STACK, className), children: [
+    onBack && /* @__PURE__ */ jsx(BackButton, { label: backLabel, onClick: onBack, className: BACK_BUTTON_CLASS }),
+    /* @__PURE__ */ jsxs("div", { className: STRIP_BODY, children: [
+      /* @__PURE__ */ jsxs("div", { className: STRIP_MAIN, children: [
+        /* @__PURE__ */ jsxs("div", { className: IDENTITY_ROW, children: [
+          hosts.length > 0 && hosts.length <= 3 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--spacing-system-s)]", children: hosts.map((host) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
+            /* @__PURE__ */ jsx(
+              SquareAvatar,
+              {
+                variant: "round",
+                size: "sm",
+                src: host.avatarUrl ?? void 0,
+                alt: host.name,
+                fallback: host.name
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-h4 text-ods-text-primary truncate", children: host.name }),
+              host.title && /* @__PURE__ */ jsx("p", { className: "text-h6 text-ods-text-secondary truncate", children: host.title })
+            ] })
+          ] }, host.name)) }),
+          hosts.length > 3 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xs)]", children: [
+            /* @__PURE__ */ jsx(AvatarStack, { people: hosts, max: 4, size: "lg" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-h6 text-ods-text-secondary", children: [
+              hosts.length,
+              " hosts on this calendar"
+            ] })
+          ] }),
+          locked || durationsMs.length <= 1 ? (
+            // Post-selection, or a link that offers one length: a static line,
+            // which is what sits beside the host on the header-strip layouts.
+            selectedDurationMs != null && /* @__PURE__ */ jsxs("p", { className: "shrink-0 text-h6 text-ods-text-secondary", children: [
+              formatDurationCompact(selectedDurationMs / 1e3),
+              " call"
+            ] })
+          ) : null
+        ] }),
+        title && /* @__PURE__ */ jsx("p", { className: "text-h3 text-ods-text-primary", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-h6 text-ods-text-secondary", children: description }),
+        !locked && durationsMs.length > 1 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xxs)]", children: [
+          /* @__PURE__ */ jsx("p", { className: FIELD_LABEL_CLASS, children: "Duration" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-[var(--spacing-system-xs)]", children: durationsMs.map((ms) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: selectedDurationMs === ms ? void 0 : "outline",
+              size: "small-legacy",
+              onClick: () => onSelectDuration(ms),
+              children: formatDurationCompact(ms / 1e3)
+            },
+            ms
+          )) })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xs)]", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-h5 text-ods-text-secondary", children: "Timezone" }),
+      showTimezone && // Once a slot is chosen the picker is desktop-only, which is what all
+      // three mocks draw. On the narrow layouts this panel is a strip
+      // COMPETING with the form for the screen's height, and the step's own
+      // summary line states the zone one row below — so the fact survives,
+      // only the control steps aside. The 280px sidebar has the room, so
+      // there it stays.
+      /* @__PURE__ */ jsxs("div", { className: cn(STRIP_ASIDE, locked && "max-lg:hidden"), children: [
+        /* @__PURE__ */ jsx("p", { className: FIELD_LABEL_CLASS, children: "Timezone" }),
         timezone ? /* @__PURE__ */ jsx(
           Autocomplete,
           {
@@ -369,7 +392,6 @@ function SchedulerContextPanel({
             },
             options: zoneOptions,
             placeholder: "Search timezone\u2026",
-            startAdornment: /* @__PURE__ */ jsx(ClockIcon, { className: "size-4 shrink-0 text-ods-text-secondary" }),
             noOptionsText: "No matching timezone",
             showClearAll: false
           }
@@ -380,10 +402,10 @@ function SchedulerContextPanel({
 }
 
 // src/components/meeting-scheduler/slot-picker.tsx
-import { useMemo as useMemo2 } from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { ChevronRight } from "lucide-react";
 init_cn();
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function dayKeyInZone(ms, timeZone) {
   return new Intl.DateTimeFormat("en-CA", { timeZone, year: "numeric", month: "2-digit", day: "2-digit" }).format(
     new Date(ms)
@@ -400,38 +422,109 @@ function dateFromDayKey(key) {
 function timeLabelInZone(ms, timeZone) {
   return new Intl.DateTimeFormat(void 0, { timeZone, hour: "numeric", minute: "2-digit" }).format(new Date(ms));
 }
-var CALENDAR_MIN_H = "min-h-[20.5rem]";
-var WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var CALENDAR_W = "md:w-[19rem] md:shrink-0 lg:w-[16rem]";
+var COLUMN_HEADING_CLASS = "shrink-0 text-h4 text-ods-text-primary";
+var COLUMN_STACK = "flex min-h-0 flex-col gap-[var(--spacing-system-xxs)]";
+var SLOT_PICKER_HEADING = "Select Date & Time";
+var CHIP_GRID_CLASS = cn(
+  "grid grid-cols-[repeat(auto-fill,minmax(5.5rem,1fr))] content-start gap-[var(--spacing-system-xs)]",
+  "overflow-y-auto",
+  // PHONE: a stated window (~3 rows, the mock's 156px) that scrolls, rather
+  // than a list that runs the length of the day. Nothing else on the phone
+  // card has a height — the design lets each step be as tall as it needs —
+  // but a busy day is forty slots, and letting them all through turns a
+  // 700px card into a 1500px one and buries whatever the page puts below
+  // it. This is the one nested scroller worth having: a small, obviously
+  // bounded list with a visible edge, exactly as drawn.
+  "max-h-[9.75rem] md:max-h-none",
+  // No height of its own, and none borrowed from the calendar either: the card
+  // states one height, the panel and this row pass it down, and what is left
+  // after the column heading IS the scroll box. A long day scrolls inside it.
+  //
+  // `min-h-0` is the load-bearing half — a flex item's default
+  // `min-height:auto` refuses to shrink below its content, so without it the
+  // chips grow the column, then the row, then the card, and `overflow-y-auto`
+  // never gets a box smaller than its contents to scroll inside. That is the
+  // exact failure that kept this card at 404px when it was told to be 318.
+  "flex-1 min-h-0"
+);
+var CHIP_CLASS = "w-full px-[var(--spacing-system-xxs)]";
+var SLOT_ROW_CLASS = cn(
+  "flex min-w-0 flex-col md:flex-row",
+  // Default `stretch` at every width, deliberately. Stacked, that is what
+  // makes each section span the card — an `items-start` here (it was here, to
+  // stop a column growing taller than its month) collapses both sections to
+  // their intrinsic WIDTH instead, which on a phone left the calendar and the
+  // chips huddled against the left edge with half the card empty. The
+  // calendar no longer needs protecting: its height is fixed, not derived.
+  "md:min-h-0 md:flex-1 lg:gap-[var(--spacing-system-lf)]"
+);
+var COLUMN_BOX = "p-[var(--spacing-system-l)] lg:p-0";
+var COLUMN_DIVIDER = "border-b border-ods-border md:border-b-0 md:border-r lg:border-0";
 function monthLabelFor(offset) {
   const now = /* @__PURE__ */ new Date();
   const month = new Date(now.getFullYear(), now.getMonth() + offset, 1);
   return new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric" }).format(month);
 }
-function CalendarSkeleton({ monthOffset = 0 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col gap-[var(--spacing-system-s)]", CALENDAR_MIN_H), children: [
-    /* @__PURE__ */ jsxs2("div", { className: "relative h-8", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "absolute inset-x-0 top-0 flex h-8 items-center justify-between", children: [
-        /* @__PURE__ */ jsx2("span", { className: "flex h-8 w-8 items-center justify-center rounded-md border border-ods-border opacity-60", children: /* @__PURE__ */ jsx2(ChevronLeft, { className: "h-4 w-4 text-ods-text-muted" }) }),
-        /* @__PURE__ */ jsx2("span", { className: "flex h-8 w-8 items-center justify-center rounded-md border border-ods-border opacity-60", children: /* @__PURE__ */ jsx2(ChevronRight, { className: "h-4 w-4 text-ods-text-muted" }) })
-      ] }),
-      /* @__PURE__ */ jsx2("div", { className: "flex h-8 items-center justify-center", children: /* @__PURE__ */ jsx2("p", { className: "text-h6 text-ods-text-primary", children: monthLabelFor(monthOffset) }) })
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-y-1 py-1", children: [
-      /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-7", children: WEEKDAY_LABELS.map((d) => /* @__PURE__ */ jsx2("div", { className: "flex h-9 items-center justify-center text-h6 font-normal text-ods-text-secondary", children: d }, d)) }),
-      Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-7", children: Array.from({ length: 7 }, (_2, col) => /* @__PURE__ */ jsx2("div", { className: "flex h-9 items-center justify-center", children: /* @__PURE__ */ jsx2(Skeleton, { className: "h-9 w-9 rounded-md" }) }, col)) }, `w-${row}`))
-    ] })
-  ] });
+var DISABLE_EVERY_DAY = () => true;
+var NOOP = () => void 0;
+function DayCalendar({ monthOffset, onMonthOffsetChange, selectedDay, onSelectDay, slotsByDay }) {
+  const now = /* @__PURE__ */ new Date();
+  const startMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+  const endMonth = new Date(now.getFullYear(), now.getMonth() + MAX_MONTH_OFFSET + 1, 0);
+  const visibleMonth = new Date(now.getFullYear(), now.getMonth() + monthOffset, 1);
+  const dayHasNoSlots = useCallback2(
+    (day) => !slotsByDay?.has(calendarDayKey(day)),
+    [slotsByDay]
+  );
+  return /* @__PURE__ */ jsx2("div", { className: "flex min-h-0 flex-1 flex-col", "aria-busy": slotsByDay === null, children: /* @__PURE__ */ jsx2(
+    DatePickerCalendar,
+    {
+      mode: "single",
+      bare: true,
+      month: visibleMonth,
+      onMonthChange: (month) => {
+        const offset = (month.getFullYear() - now.getFullYear()) * 12 + (month.getMonth() - now.getMonth());
+        onMonthOffsetChange(Math.max(0, Math.min(MAX_MONTH_OFFSET, offset)));
+      },
+      fromDate: startMonth,
+      toDate: endMonth,
+      selected: selectedDay ? dateFromDayKey(selectedDay) : void 0,
+      onSelect: (value) => {
+        const day = value;
+        if (!day) return;
+        const key = calendarDayKey(day);
+        if (slotsByDay?.has(key)) onSelectDay(key);
+      },
+      disabledDays: slotsByDay === null ? DISABLE_EVERY_DAY : dayHasNoSlots
+    }
+  ) });
 }
 function SlotPickerSkeleton({ monthOffset = 0 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col md:flex-row gap-[var(--spacing-system-lf)]", children: [
-    /* @__PURE__ */ jsx2("div", { className: cn("shrink-0", CALENDAR_MIN_H), children: /* @__PURE__ */ jsx2(CalendarSkeleton, { monthOffset }) }),
-    /* @__PURE__ */ jsx2("div", { className: "flex-1 min-w-0 flex flex-col gap-[var(--spacing-system-s)]", children: /* @__PURE__ */ jsx2(TimeChipsSkeleton, {}) })
+  return /* @__PURE__ */ jsxs2("div", { className: SLOT_ROW_CLASS, children: [
+    /* @__PURE__ */ jsxs2("div", { className: cn(COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, "md:overflow-y-auto"), children: [
+      /* @__PURE__ */ jsx2("p", { className: COLUMN_HEADING_CLASS, children: SLOT_PICKER_HEADING }),
+      /* @__PURE__ */ jsx2(
+        DayCalendar,
+        {
+          monthOffset,
+          onMonthOffsetChange: NOOP,
+          selectedDay: null,
+          onSelectDay: NOOP,
+          slotsByDay: null
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: cn(COLUMN_STACK, COLUMN_BOX, "min-w-0 md:flex-1"), children: /* @__PURE__ */ jsx2(TimeChipsSkeleton, {}) })
   ] });
 }
 function TimeChipsSkeleton() {
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 md:h-5 w-40" }),
-    /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-[var(--spacing-system-xs)] content-start", children: Array.from({ length: 9 }, (_, i) => /* @__PURE__ */ jsx2(Skeleton, { className: "h-10 w-full" }, i)) })
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("div", { className: COLUMN_HEADING_CLASS, children: /* @__PURE__ */ jsx2(Skeleton, { className: "inline-block h-4 w-40 align-middle" }) }),
+    /* @__PURE__ */ jsx2("div", { className: CHIP_GRID_CLASS, children: Array.from({ length: 16 }, (_, i) => (
+      // h-11 md:h-12 — the loaded chip's own default-size height.
+      /* @__PURE__ */ jsx2(Skeleton, { className: cn(CHIP_CLASS, "h-11 md:h-12") }, i)
+    )) })
   ] });
 }
 function SlotPicker({
@@ -456,58 +549,70 @@ function SlotPicker({
     for (const list of map.values()) list.sort((a, b) => a - b);
     return map;
   }, [slots, timezone]);
-  const now = /* @__PURE__ */ new Date();
-  const startMonth = new Date(now.getFullYear(), now.getMonth(), 1);
-  const endMonth = new Date(now.getFullYear(), now.getMonth() + MAX_MONTH_OFFSET, 1);
-  const visibleMonth = new Date(now.getFullYear(), now.getMonth() + monthOffset, 1);
+  const visibleMonth = useMemo2(() => {
+    const now = /* @__PURE__ */ new Date();
+    return new Date(now.getFullYear(), now.getMonth() + monthOffset, 1);
+  }, [monthOffset]);
   const daySlots = selectedDay ? slotsByDay.get(selectedDay) ?? [] : [];
-  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col md:flex-row gap-[var(--spacing-system-lf)]", children: [
-    /* @__PURE__ */ jsx2("div", { className: cn("shrink-0", CALENDAR_MIN_H), children: isLoading ? /* @__PURE__ */ jsx2(CalendarSkeleton, { monthOffset }) : /* @__PURE__ */ jsx2(
-      Calendar,
-      {
-        month: visibleMonth,
-        startMonth,
-        endMonth,
-        onMonthChange: (month) => {
-          const offset = (month.getFullYear() - now.getFullYear()) * 12 + (month.getMonth() - now.getMonth());
-          onMonthOffsetChange(Math.max(0, Math.min(MAX_MONTH_OFFSET, offset)));
-        },
-        mode: "single",
-        required: true,
-        selected: selectedDay ? dateFromDayKey(selectedDay) : void 0,
-        onSelect: (day) => {
-          if (!day) return;
-          const key = calendarDayKey(day);
-          if (slotsByDay.has(key)) onSelectDay(key);
-        },
-        disabled: (day) => !slotsByDay.has(calendarDayKey(day)),
-        className: "p-0"
-      }
-    ) }),
-    /* @__PURE__ */ jsx2("div", { className: "flex-1 min-w-0 flex flex-col gap-[var(--spacing-system-s)]", children: isLoading ? /* @__PURE__ */ jsx2(TimeChipsSkeleton, {}) : selectedDay ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      /* @__PURE__ */ jsx2("p", { className: "text-h6 text-ods-text-primary", children: new Intl.DateTimeFormat(void 0, {
+  const monthPrefix = `${visibleMonth.getFullYear()}-${String(visibleMonth.getMonth() + 1).padStart(2, "0")}`;
+  const monthHasSlots = [...slotsByDay.keys()].some((key) => key.startsWith(monthPrefix));
+  return /* @__PURE__ */ jsxs2("div", { className: SLOT_ROW_CLASS, children: [
+    /* @__PURE__ */ jsxs2("div", { className: cn(COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, "md:overflow-y-auto"), children: [
+      /* @__PURE__ */ jsx2("p", { className: COLUMN_HEADING_CLASS, children: SLOT_PICKER_HEADING }),
+      /* @__PURE__ */ jsx2(
+        DayCalendar,
+        {
+          monthOffset,
+          onMonthOffsetChange,
+          selectedDay,
+          onSelectDay,
+          slotsByDay: isLoading ? null : slotsByDay
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: cn(COLUMN_STACK, COLUMN_BOX, "min-w-0 md:flex-1"), children: isLoading ? /* @__PURE__ */ jsx2(TimeChipsSkeleton, {}) : selectedDay ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2("p", { className: COLUMN_HEADING_CLASS, children: new Intl.DateTimeFormat(void 0, {
         weekday: "long",
         month: "long",
         day: "numeric"
       }).format(dateFromDayKey(selectedDay)) }),
-      /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-[var(--spacing-system-xs)] content-start max-h-80 overflow-y-auto", children: daySlots.map((ms) => {
+      /* @__PURE__ */ jsx2("div", { className: CHIP_GRID_CLASS, children: daySlots.map((ms) => {
         const isSelected = selectedSlot === ms;
         return /* @__PURE__ */ jsx2(
           Button,
           {
             variant: isSelected ? void 0 : "outline",
-            size: "small-legacy",
             onClick: () => onSelectSlot(ms),
+            className: CHIP_CLASS,
             children: timeLabelInZone(ms, timezone)
           },
           ms
         );
       }) })
-    ] }) : /* @__PURE__ */ jsx2("p", { className: "text-h6 text-ods-text-secondary", children: [...slotsByDay.keys()].some(
-      (k) => k.startsWith(
-        `${visibleMonth.getFullYear()}-${String(visibleMonth.getMonth() + 1).padStart(2, "0")}`
-      )
-    ) ? "Pick a day to see available times." : "No available times this month \u2014 try the next one." }) })
+    ] }) : monthHasSlots ? /* @__PURE__ */ jsx2("p", { className: "text-h6 text-ods-text-secondary", children: "Pick a day to see available times." }) : (
+      // A fully-booked month used to just SAY "try the next one" and leave
+      // the visitor to find the chevron in the other column. The way out
+      // of a dead end belongs in the dead end.
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-start gap-[var(--spacing-system-s)]", children: [
+        /* @__PURE__ */ jsxs2("p", { className: "text-h6 text-ods-text-secondary", children: [
+          "No available times in ",
+          monthLabelFor(monthOffset),
+          "."
+        ] }),
+        monthOffset < MAX_MONTH_OFFSET && /* @__PURE__ */ jsxs2(
+          Button,
+          {
+            variant: "outline",
+            onClick: () => onMonthOffsetChange(monthOffset + 1),
+            rightIcon: /* @__PURE__ */ jsx2(ChevronRight, { className: "size-5" }),
+            children: [
+              "Check ",
+              monthLabelFor(monthOffset + 1)
+            ]
+          }
+        )
+      ] })
+    ) })
   ] });
 }
 
@@ -515,7 +620,7 @@ function SlotPicker({
 import { useMemo as useMemo3 } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function BookingForm({
   availability,
   meetingId,
@@ -560,124 +665,115 @@ function BookingForm({
     const err = errors.formFields?.[name];
     return err?.message;
   };
-  const inputClass = "bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-12";
-  return /* @__PURE__ */ jsxs3("form", { onSubmit: submit, className: "flex flex-col space-y-4 md:space-y-6", noValidate: true, children: [
+  const inputClass = "bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-11 md:h-12";
+  const FORM_STACK = "flex flex-col gap-[var(--spacing-system-l)]";
+  return /* @__PURE__ */ jsxs3("form", { onSubmit: submit, className: FORM_STACK, noValidate: true, children: [
     /* @__PURE__ */ jsx3(HoneypotField, { ...honeypotInputProps }),
-    /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsxs3(Label, { htmlFor: "ms-first-name", children: [
-          "First name",
-          /* @__PURE__ */ jsx3("span", { className: "text-ods-accent", children: "*" })
-        ] }),
-        /* @__PURE__ */ jsx3(
-          Input,
-          {
-            id: "ms-first-name",
-            autoComplete: "given-name",
-            placeholder: "Jane",
-            "aria-invalid": !!errors.firstName,
-            className: inputClass,
-            ...register("firstName")
-          }
-        ),
-        errors.firstName && /* @__PURE__ */ jsx3("span", { className: "text-ods-error text-h6 mt-1", children: errors.firstName.message })
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsxs3(Label, { htmlFor: "ms-last-name", children: [
-          "Last name",
-          /* @__PURE__ */ jsx3("span", { className: "text-ods-accent", children: "*" })
-        ] }),
-        /* @__PURE__ */ jsx3(
-          Input,
-          {
-            id: "ms-last-name",
-            autoComplete: "family-name",
-            placeholder: "Doe",
-            "aria-invalid": !!errors.lastName,
-            className: inputClass,
-            ...register("lastName")
-          }
-        ),
-        errors.lastName && /* @__PURE__ */ jsx3("span", { className: "text-ods-error text-h6 mt-1", children: errors.lastName.message })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs3(Label, { htmlFor: "ms-email", children: [
-        "Email",
-        /* @__PURE__ */ jsx3("span", { className: "text-ods-accent", children: "*" })
-      ] }),
-      /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx3(FieldWrapper, { label: "Email", htmlFor: "ms-email", error: errors.email?.message, children: /* @__PURE__ */ jsx3(
+      Input,
+      {
+        id: "ms-email",
+        type: "email",
+        required: true,
+        autoComplete: "email",
+        placeholder: "jane@company.com",
+        "aria-invalid": !!errors.email,
+        className: inputClass,
+        ...register("email")
+      }
+    ) }),
+    /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-[var(--spacing-system-m)]", children: [
+      /* @__PURE__ */ jsx3(FieldWrapper, { label: "First Name", htmlFor: "ms-first-name", error: errors.firstName?.message, children: /* @__PURE__ */ jsx3(
         Input,
         {
-          id: "ms-email",
-          type: "email",
-          autoComplete: "email",
-          placeholder: "jane@company.com",
-          "aria-invalid": !!errors.email,
+          id: "ms-first-name",
+          required: true,
+          autoComplete: "given-name",
+          placeholder: "Jane",
+          "aria-invalid": !!errors.firstName,
           className: inputClass,
-          ...register("email")
+          ...register("firstName")
         }
-      ),
-      errors.email && /* @__PURE__ */ jsx3("span", { className: "text-ods-error text-h6 mt-1", children: errors.email.message })
-    ] }),
-    supportedFields.map((field) => /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs3(Label, { htmlFor: `ms-q-${field.name}`, children: [
-        field.label,
-        field.required && /* @__PURE__ */ jsx3("span", { className: "text-ods-accent", children: "*" })
-      ] }),
-      field.type === "textarea" && /* @__PURE__ */ jsx3(
-        Textarea,
-        {
-          id: `ms-q-${field.name}`,
-          className: "bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3",
-          ...register(`formFields.${field.name}`)
-        }
-      ),
-      field.type === "text" && /* @__PURE__ */ jsx3(
+      ) }),
+      /* @__PURE__ */ jsx3(FieldWrapper, { label: "Last Name", htmlFor: "ms-last-name", error: errors.lastName?.message, children: /* @__PURE__ */ jsx3(
         Input,
         {
-          id: `ms-q-${field.name}`,
-          className: "bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-12",
-          ...register(`formFields.${field.name}`)
-        }
-      ),
-      (field.type === "select" || field.type === "radio") && /* @__PURE__ */ jsx3(
-        Controller,
-        {
-          control,
-          name: `formFields.${field.name}`,
-          render: ({ field: rhf }) => field.type === "select" ? /* @__PURE__ */ jsxs3(Select, { value: rhf.value ?? "", onValueChange: rhf.onChange, children: [
-            /* @__PURE__ */ jsx3(SelectTrigger, { id: `ms-q-${field.name}`, children: /* @__PURE__ */ jsx3(SelectValue, { placeholder: "Select\u2026" }) }),
-            /* @__PURE__ */ jsx3(SelectContent, { children: (field.options ?? []).map((opt) => /* @__PURE__ */ jsx3(SelectItem, { value: opt, children: opt }, opt)) })
-          ] }) : /* @__PURE__ */ jsx3(RadioGroup, { value: rhf.value ?? "", onValueChange: rhf.onChange, children: (field.options ?? []).map((opt) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
-            /* @__PURE__ */ jsx3(RadioGroupItem, { id: `ms-q-${field.name}-${opt}`, value: opt }),
-            /* @__PURE__ */ jsx3(Label, { htmlFor: `ms-q-${field.name}-${opt}`, children: opt })
-          ] }, opt)) })
+          id: "ms-last-name",
+          required: true,
+          autoComplete: "family-name",
+          placeholder: "Doe",
+          "aria-invalid": !!errors.lastName,
+          className: inputClass,
+          ...register("lastName")
         }
-      ),
-      field.type === "checkbox" && /* @__PURE__ */ jsx3(
-        Controller,
-        {
-          control,
-          name: `formFields.${field.name}`,
-          render: ({ field: rhf }) => (
-            // The question's Label above already carries the text and
-            // binds to this id — a second inline label would double the
-            // visible text AND the accessible name.
-            /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: /* @__PURE__ */ jsx3(
-              Checkbox,
-              {
-                id: `ms-q-${field.name}`,
-                checked: Boolean(rhf.value),
-                onCheckedChange: (v) => rhf.onChange(v === true)
-              }
-            ) })
+      ) })
+    ] }),
+    supportedFields.map((field) => /* @__PURE__ */ jsxs3(
+      FieldWrapper,
+      {
+        label: field.label,
+        htmlFor: `ms-q-${field.name}`,
+        error: fieldError(field.name),
+        children: [
+          field.type === "textarea" && /* @__PURE__ */ jsx3(
+            Textarea,
+            {
+              id: `ms-q-${field.name}`,
+              className: "bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3",
+              ...register(`formFields.${field.name}`)
+            }
+          ),
+          field.type === "text" && /* @__PURE__ */ jsx3(
+            Input,
+            {
+              id: `ms-q-${field.name}`,
+              className: "bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-11 md:h-12",
+              ...register(`formFields.${field.name}`)
+            }
+          ),
+          (field.type === "select" || field.type === "radio") && /* @__PURE__ */ jsx3(
+            Controller,
+            {
+              control,
+              name: `formFields.${field.name}`,
+              render: ({ field: rhf }) => field.type === "select" ? /* @__PURE__ */ jsxs3(Select, { value: rhf.value ?? "", onValueChange: rhf.onChange, children: [
+                /* @__PURE__ */ jsx3(SelectTrigger, { id: `ms-q-${field.name}`, children: /* @__PURE__ */ jsx3(SelectValue, { placeholder: "Select\u2026" }) }),
+                /* @__PURE__ */ jsx3(SelectContent, { children: (field.options ?? []).map((opt) => /* @__PURE__ */ jsx3(SelectItem, { value: opt, children: opt }, opt)) })
+              ] }) : /* @__PURE__ */ jsx3(RadioGroup, { value: rhf.value ?? "", onValueChange: rhf.onChange, children: (field.options ?? []).map((opt) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
+                /* @__PURE__ */ jsx3(RadioGroupItem, { id: `ms-q-${field.name}-${opt}`, value: opt }),
+                /* @__PURE__ */ jsx3(Label, { htmlFor: `ms-q-${field.name}-${opt}`, children: opt })
+              ] }, opt)) })
+            }
+          ),
+          field.type === "checkbox" && /* @__PURE__ */ jsx3(
+            Controller,
+            {
+              control,
+              name: `formFields.${field.name}`,
+              render: ({ field: rhf }) => (
+                // The question's Label above already carries the text and
+                // binds to this id — a second inline label would double the
+                // visible text AND the accessible name.
+                /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: /* @__PURE__ */ jsx3(
+                  Checkbox,
+                  {
+                    id: `ms-q-${field.name}`,
+                    checked: Boolean(rhf.value),
+                    onCheckedChange: (v) => rhf.onChange(v === true)
+                  }
+                ) })
+              )
+            }
           )
-        }
-      ),
-      fieldError(field.name) && /* @__PURE__ */ jsx3("span", { className: "text-ods-error text-h6 mt-1", children: fieldError(field.name) })
-    ] }, field.name)),
-    legalConsent && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-[var(--spacing-system-xs)] border border-ods-border rounded-md p-[var(--spacing-system-md)]", children: [
+        ]
+      },
+      field.name
+    )),
+    legalConsent && // Same out-of-flow message as the fields above, so a missed consent
+    // box doesn't shove the submit button down the card. With no error the
+    // wrapper is `display:contents` and the panel below is the flex item,
+    // exactly as it was.
+    /* @__PURE__ */ jsx3(FieldWrapper, { error: errors.legalConsentResponses?.message, children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-[var(--spacing-system-xs)] border border-ods-border rounded-md p-[var(--spacing-system-m)]", children: [
       /* @__PURE__ */ jsx3("p", { className: "text-h6 text-ods-text-secondary", children: legalConsent.processingConsentText }),
       legalConsent.communicationConsentText && /* @__PURE__ */ jsx3("p", { className: "text-h6 text-ods-text-secondary", children: legalConsent.communicationConsentText }),
       /* @__PURE__ */ jsx3(
@@ -685,7 +781,7 @@ function BookingForm({
         {
           control,
           name: "legalConsentResponses",
-          render: ({ field: rhf }) => /* @__PURE__ */ jsx3(Fragment3, { children: legalConsent.communicationConsentCheckboxes.map((box) => {
+          render: ({ field: rhf }) => /* @__PURE__ */ jsx3(Fragment2, { children: legalConsent.communicationConsentCheckboxes.map((box) => {
             const responses = rhf.value ?? [];
             const current = responses.find((r) => r.communicationTypeId === box.communicationTypeId);
             return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
@@ -701,18 +797,14 @@ function BookingForm({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxs3(Label, { htmlFor: `ms-consent-${box.communicationTypeId}`, children: [
-                box.label,
-                box.required ? " *" : ""
-              ] })
+              /* @__PURE__ */ jsx3(Label, { htmlFor: `ms-consent-${box.communicationTypeId}`, children: box.label })
             ] }, box.communicationTypeId);
           }) })
         }
       ),
-      legalConsent.privacyPolicyText && /* @__PURE__ */ jsx3("p", { className: "text-h6 text-ods-text-secondary", children: legalConsent.privacyPolicyText }),
-      errors.legalConsentResponses && /* @__PURE__ */ jsx3("p", { className: "text-h6 text-ods-error", children: errors.legalConsentResponses.message })
-    ] }),
-    /* @__PURE__ */ jsx3("div", { className: "flex", children: /* @__PURE__ */ jsx3(Button, { type: "submit", loading: isSubmitting, disabled: isSubmitting, className: "w-full md:w-auto", children: "Confirm booking" }) })
+      legalConsent.privacyPolicyText && /* @__PURE__ */ jsx3("p", { className: "text-h6 text-ods-text-secondary", children: legalConsent.privacyPolicyText })
+    ] }) }),
+    /* @__PURE__ */ jsx3("div", { className: "flex", children: /* @__PURE__ */ jsx3(Button, { type: "submit", loading: isSubmitting, disabled: isSubmitting, children: "Confirm Booking" }) })
   ] });
 }
 
@@ -728,7 +820,7 @@ function Confirmation({ confirmation, timezone }) {
     minute: "2-digit",
     timeZoneName: "short"
   }).format(new Date(confirmation.startTimeMs));
-  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-1 flex-col items-center justify-center gap-[var(--spacing-system-md)] text-center", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-1 flex-col items-center justify-center gap-[var(--spacing-system-m)] text-center", children: [
     /* @__PURE__ */ jsx4("p", { className: "text-h1", role: "img", "aria-label": "Celebration", children: "\u{1F389}" }),
     /* @__PURE__ */ jsx4("h3", { className: "text-h3 text-ods-text-primary", children: "You're booked" }),
     /* @__PURE__ */ jsx4("p", { className: "text-h5 text-ods-text-primary", children: confirmation.title }),
@@ -743,13 +835,13 @@ function Confirmation({ confirmation, timezone }) {
 
 // src/components/meeting-scheduler/directory.tsx
 init_next_link();
-import { useEffect as useEffect2, useMemo as useMemo4, useState as useState2 } from "react";
+import { useEffect, useMemo as useMemo4, useState as useState2 } from "react";
 import { ChevronRight as ChevronRight2 } from "lucide-react";
 init_cn();
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function useNextAvailableLabel(ms) {
   const [label, setLabel] = useState2(null);
-  useEffect2(() => {
+  useEffect(() => {
     if (ms == null) return;
     try {
       setLabel(
@@ -829,7 +921,7 @@ function MeetingSchedulerDirectory({
   const [isLoading, setIsLoading] = useState2(initialData === null);
   const [error, setError] = useState2(null);
   const [page, setPage] = useState2(1);
-  useEffect2(() => {
+  useEffect(() => {
     if (initialData !== null) return;
     const controller = new AbortController();
     let active = true;
@@ -907,6 +999,21 @@ function MeetingSchedulerDirectory({
 
 // src/components/meeting-scheduler/index.tsx
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var CONTEXT_PANEL_CLASS = "p-[var(--spacing-system-l)] shrink-0 lg:w-[280px] border-b lg:border-b-0 lg:border-r border-ods-border lg:min-h-0 lg:overflow-y-auto";
+var ACTION_PANEL_CLASS = "flex-1 min-w-0 flex flex-col md:min-h-0 lg:p-[var(--spacing-system-l)]";
+var PANEL_STEP_CLASS = "p-[var(--spacing-system-l)] md:min-h-0 md:overflow-y-auto lg:p-0";
+var MEETING_SCHEDULER_H = "md:h-[34.375rem] lg:h-[23.75rem]";
+var CARD_CLASS = cn(
+  "rounded-md border border-ods-border bg-ods-card overflow-hidden",
+  "md:flex md:flex-col",
+  MEETING_SCHEDULER_H
+);
+var CARD_INNER_CLASS = "flex flex-col md:min-h-0 md:flex-1 lg:h-full lg:flex-row";
+var CARD_DEGRADED_CLASS = cn(
+  "rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-lf)] flex flex-col items-start gap-[var(--spacing-system-m)]",
+  "md:justify-center md:overflow-y-auto",
+  MEETING_SCHEDULER_H
+);
 function isNativelyBookable(availability) {
   if (!availability.formFields.every(isSupportedFormField)) return false;
   const consent = availability.legalConsent;
@@ -925,12 +1032,14 @@ function HubSpotMeetingScheduler({
   hosts,
   displayTimezone,
   fallbackUrl,
+  onBack,
   onBooked,
   className
 }) {
   const {
     availability,
     isLoadingAvailability,
+    isFetchingAvailability,
     availabilityError,
     monthOffset,
     setMonthOffset,
@@ -939,7 +1048,7 @@ function HubSpotMeetingScheduler({
     isSubmitting
   } = useMeetingBooking({ meetingId, apiBaseUrl, initialAvailability });
   const [timezone, setTimezone] = useState3(displayTimezone ?? null);
-  useEffect3(() => {
+  useEffect2(() => {
     if (displayTimezone) return;
     try {
       setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC");
@@ -954,7 +1063,7 @@ function HubSpotMeetingScheduler({
   const [confirmation, setConfirmation] = useState3(null);
   const [bookingError, setBookingError] = useState3(null);
   const { honeypotInputProps, getSignals, resetSignals } = useHumanitySignals();
-  useEffect3(() => {
+  useEffect2(() => {
     setStep("slot");
     setDurationMs(null);
     setSelectedDay(null);
@@ -965,14 +1074,14 @@ function HubSpotMeetingScheduler({
   }, [meetingId]);
   const durations = availability?.durationsMs ?? [];
   const shownHosts = hosts ?? availability?.hosts ?? [];
-  useEffect3(() => {
+  useEffect2(() => {
     if (durationMs == null && durations.length > 0) setDurationMs(durations[0]);
   }, [durationMs, durations]);
   const slots = useMemo5(() => {
     if (!availability || durationMs == null) return [];
     return availability.slotsByDurationMs[String(durationMs)] ?? [];
   }, [availability, durationMs]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (step !== "slot" || !timezone) return;
     const now = /* @__PURE__ */ new Date();
     const visible = new Date(now.getFullYear(), now.getMonth() + monthOffset, 1);
@@ -987,13 +1096,17 @@ function HubSpotMeetingScheduler({
     setSelectedDay(dayKeyInZone(inMonth[0], timezone));
   }, [step, timezone, slots, selectedDay, monthOffset]);
   const autoAdvanceCount = useRef2(0);
-  useEffect3(() => {
-    if (step === "slot" && availability && !isLoadingAvailability && durationMs != null && slots.length === 0 && availability.hasMore && autoAdvanceCount.current < 3) {
+  useEffect2(() => {
+    if (step === "slot" && availability && !isFetchingAvailability && durationMs != null && slots.length === 0 && availability.hasMore && autoAdvanceCount.current < 3) {
       autoAdvanceCount.current += 1;
       setMonthOffset(monthOffset + 1);
     }
-  }, [step, availability, isLoadingAvailability, durationMs, slots, monthOffset, setMonthOffset]);
-  const handleSubmit = useCallback2(
+  }, [step, availability, isFetchingAvailability, durationMs, slots, monthOffset, setMonthOffset]);
+  const backToSlot = useCallback3(() => {
+    setStep("slot");
+    setBookingError(null);
+  }, []);
+  const handleSubmit = useCallback3(
     async (payload) => {
       setBookingError(null);
       const result = await book(payload);
@@ -1016,22 +1129,16 @@ function HubSpotMeetingScheduler({
   );
   const escapeHatch = fallbackUrl ? /* @__PURE__ */ jsx6(Button, { variant: "outline", size: "small-legacy", href: fallbackUrl, openInNewTab: true, children: "Open in HubSpot" }) : null;
   if (isLoadingAvailability && !availability) {
-    return /* @__PURE__ */ jsx6("div", { className: cn("rounded-md border border-ods-border bg-ods-card overflow-hidden", className), children: /* @__PURE__ */ jsxs6("div", { className: "flex flex-col md:flex-row", children: [
-      /* @__PURE__ */ jsx6(ContextPanelSkeleton, { className: "p-[var(--spacing-system-lf)] md:w-80 md:shrink-0 border-b md:border-b-0 md:border-r border-ods-border" }),
-      /* @__PURE__ */ jsxs6("div", { className: "flex-1 min-w-0 p-[var(--spacing-system-lf)] md:min-h-[32rem] flex flex-col gap-[var(--spacing-system-md)]", children: [
-        /* @__PURE__ */ jsx6("p", { className: "text-h5 text-ods-text-secondary", children: "Select a date & time" }),
-        /* @__PURE__ */ jsx6(SlotPickerSkeleton, {})
-      ] })
+    return /* @__PURE__ */ jsx6("div", { className: cn(CARD_CLASS, className), children: /* @__PURE__ */ jsxs6("div", { className: CARD_INNER_CLASS, children: [
+      /* @__PURE__ */ jsx6(ContextPanelSkeleton, { onBack, className: CONTEXT_PANEL_CLASS }),
+      /* @__PURE__ */ jsx6("div", { className: ACTION_PANEL_CLASS, children: /* @__PURE__ */ jsx6(SlotPickerSkeleton, { monthOffset }) })
     ] }) });
   }
   if (availabilityError || !availability) {
     return /* @__PURE__ */ jsxs6(
       "div",
       {
-        className: cn(
-          "rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-lf)] flex flex-col items-start gap-[var(--spacing-system-md)]",
-          className
-        ),
+        className: cn(CARD_DEGRADED_CLASS, className),
         children: [
           /* @__PURE__ */ jsx6("p", { className: "text-h6 text-ods-text-secondary", children: "We couldn't load available call times. Please try again shortly." }),
           escapeHatch
@@ -1043,10 +1150,7 @@ function HubSpotMeetingScheduler({
     return /* @__PURE__ */ jsxs6(
       "div",
       {
-        className: cn(
-          "rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-lf)] flex flex-col items-start gap-[var(--spacing-system-md)]",
-          className
-        ),
+        className: cn(CARD_DEGRADED_CLASS, className),
         children: [
           /* @__PURE__ */ jsx6("p", { className: "text-h6 text-ods-text-secondary", children: "This meeting type is booked directly on HubSpot." }),
           escapeHatch
@@ -1054,7 +1158,7 @@ function HubSpotMeetingScheduler({
       }
     );
   }
-  return /* @__PURE__ */ jsx6("div", { className: cn("rounded-md border border-ods-border bg-ods-card overflow-hidden", className), children: /* @__PURE__ */ jsxs6("div", { className: "flex flex-col md:flex-row", children: [
+  return /* @__PURE__ */ jsx6("div", { className: cn(CARD_CLASS, className), children: /* @__PURE__ */ jsxs6("div", { className: CARD_INNER_CLASS, children: [
     /* @__PURE__ */ jsx6(
       SchedulerContextPanel,
       {
@@ -1071,92 +1175,92 @@ function HubSpotMeetingScheduler({
         },
         timezone,
         onTimezoneChange: setTimezone,
+        onBack: step === "details" ? backToSlot : onBack,
         locked: step !== "slot",
-        className: "p-[var(--spacing-system-lf)] md:w-80 md:shrink-0 border-b md:border-b-0 md:border-r border-ods-border"
+        showTimezone: step !== "confirmed",
+        className: CONTEXT_PANEL_CLASS
       }
     ),
-    /* @__PURE__ */ jsx6("div", { className: "flex-1 min-w-0 p-[var(--spacing-system-lf)] md:min-h-[32rem] flex flex-col", children: step === "confirmed" && confirmation && timezone ? /* @__PURE__ */ jsx6(Confirmation, { confirmation, timezone }) : step === "details" && durationMs != null && selectedSlot != null && timezone ? /* @__PURE__ */ jsxs6("div", { className: "flex flex-1 flex-col gap-[var(--spacing-system-md)]", children: [
+    /* @__PURE__ */ jsx6("div", { className: ACTION_PANEL_CLASS, children: step === "confirmed" && confirmation && timezone ? /* @__PURE__ */ jsx6("div", { className: cn("flex flex-1 flex-col", PANEL_STEP_CLASS), children: /* @__PURE__ */ jsx6(Confirmation, { confirmation, timezone }) }) : step === "details" && durationMs != null && selectedSlot != null && timezone ? /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-1 flex-col gap-[var(--spacing-system-m)]", PANEL_STEP_CLASS), children: [
+      /* @__PURE__ */ jsxs6("p", { className: "text-h4 text-ods-text-primary", children: [
+        new Intl.DateTimeFormat(void 0, {
+          timeZone: timezone,
+          weekday: "long",
+          month: "long",
+          day: "numeric",
+          hour: "numeric",
+          minute: "2-digit",
+          timeZoneName: "short"
+        }).format(new Date(selectedSlot)),
+        " ",
+        "\xB7 ",
+        formatDurationCompact(durationMs / 1e3)
+      ] }),
+      bookingError && bookingError !== "SLOT_TAKEN" && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-start gap-[var(--spacing-system-xs)]", children: [
+        /* @__PURE__ */ jsx6("p", { className: "text-h6 text-ods-error", children: bookingError === "TEMPORARILY_UNAVAILABLE" ? "Scheduling is briefly unavailable \u2014 please try again in a minute." : bookingError === "MEETING_UNAVAILABLE" ? "This meeting type has reached its booking limit for today \u2014 try another time or contact us." : bookingError === "LINK_GONE" ? "This meeting type is no longer available." : "Please double-check your details and try again." }),
+        escapeHatch
+      ] }),
       /* @__PURE__ */ jsx6(
-        BackButton,
+        BookingForm,
         {
-          label: "Back",
-          onClick: () => {
-            setStep("slot");
-            setBookingError(null);
-          }
+          availability,
+          meetingId,
+          startTimeMs: selectedSlot,
+          durationMs,
+          timezone,
+          isSubmitting,
+          onSubmit: handleSubmit,
+          honeypotInputProps,
+          getSignals
         }
-      ),
-      /* @__PURE__ */ jsxs6("div", { className: "flex flex-1 flex-col justify-center gap-[var(--spacing-system-md)]", children: [
-        /* @__PURE__ */ jsxs6("p", { className: "text-h4 text-ods-text-primary", children: [
-          new Intl.DateTimeFormat(void 0, {
-            timeZone: timezone,
-            weekday: "long",
-            month: "long",
-            day: "numeric",
-            hour: "numeric",
-            minute: "2-digit",
-            timeZoneName: "short"
-          }).format(new Date(selectedSlot)),
-          " ",
-          "\xB7 ",
-          formatDurationCompact(durationMs / 1e3)
-        ] }),
-        bookingError && bookingError !== "SLOT_TAKEN" && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-start gap-[var(--spacing-system-xs)]", children: [
-          /* @__PURE__ */ jsx6("p", { className: "text-h6 text-ods-error", children: bookingError === "TEMPORARILY_UNAVAILABLE" ? "Scheduling is briefly unavailable \u2014 please try again in a minute." : bookingError === "MEETING_UNAVAILABLE" ? "This meeting type has reached its booking limit for today \u2014 try another time or contact us." : bookingError === "LINK_GONE" ? "This meeting type is no longer available." : "Please double-check your details and try again." }),
-          escapeHatch
-        ] }),
+      )
+    ] }) : /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-[var(--spacing-system-m)] md:min-h-0 md:flex-1", children: [
+      bookingError === "SLOT_TAKEN" && /* @__PURE__ */ jsx6("p", { className: "px-[var(--spacing-system-l)] pt-[var(--spacing-system-l)] text-h6 text-ods-error lg:p-0", children: "That time is no longer available \u2014 if you just submitted, check your email for a confirmation before rebooking." }),
+      timezone && durationMs != null ? (
+        // The picker owns BOTH the loading and the empty month now —
+        // it keeps the calendar up either way, so there is no branch
+        // here that can take it off screen mid-flow.
         /* @__PURE__ */ jsx6(
-          BookingForm,
+          SlotPicker,
           {
-            availability,
-            meetingId,
-            startTimeMs: selectedSlot,
-            durationMs,
+            slots,
             timezone,
-            isSubmitting,
-            onSubmit: handleSubmit,
-            honeypotInputProps,
-            getSignals
+            monthOffset,
+            onMonthOffsetChange: (o) => {
+              setSelectedDay(null);
+              setSelectedSlot(null);
+              setMonthOffset(o);
+            },
+            selectedSlot,
+            onSelectSlot: (ms) => {
+              setSelectedSlot(ms);
+              setStep("details");
+            },
+            selectedDay,
+            onSelectDay: setSelectedDay,
+            isLoading: isLoadingAvailability
           }
         )
-      ] })
-    ] }) : /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-[var(--spacing-system-md)]", children: [
-      /* @__PURE__ */ jsx6("p", { className: "text-h5 text-ods-text-secondary", children: "Select a date & time" }),
-      bookingError === "SLOT_TAKEN" && /* @__PURE__ */ jsx6("p", { className: "text-h6 text-ods-error", children: "That time is no longer available \u2014 if you just submitted, check your email for a confirmation before rebooking." }),
-      timezone && durationMs != null ? slots.length > 0 || isLoadingAvailability ? /* @__PURE__ */ jsx6(
-        SlotPicker,
-        {
-          slots,
-          timezone,
-          monthOffset,
-          onMonthOffsetChange: (o) => {
-            setSelectedDay(null);
-            setSelectedSlot(null);
-            setMonthOffset(o);
-          },
-          selectedSlot,
-          onSelectSlot: (ms) => {
-            setSelectedSlot(ms);
-            setStep("details");
-          },
-          selectedDay,
-          onSelectDay: setSelectedDay,
-          isLoading: isLoadingAvailability
-        }
-      ) : /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-start gap-[var(--spacing-system-md)]", children: [
-        /* @__PURE__ */ jsx6("p", { className: "text-h6 text-ods-text-secondary", children: isLoadingAvailability ? "Checking more dates\u2026" : "No call times are published right now." }),
-        !isLoadingAvailability && escapeHatch
-      ] }) : (
+      ) : durations.length === 0 && !isFetchingAvailability ? (
+        // The LINK publishes nothing at all — a different thing from a
+        // fully-booked month, and the only case the escape hatch is
+        // the right answer to.
+        /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-start gap-[var(--spacing-system-m)]", children: [
+          /* @__PURE__ */ jsx6("p", { className: "text-h6 text-ods-text-secondary", children: "No call times are published right now." }),
+          escapeHatch
+        ] })
+      ) : (
         // Pre-mount timezone-resolution window (every SSR load hits
-        // this for one frame-batch) — SAME per-region skeletons, no
-        // bare rectangle, no shift when the real picker swaps in.
-        /* @__PURE__ */ jsx6(SlotPickerSkeleton, {})
+        // this for one frame-batch) — same layout, real calendar, so
+        // nothing shifts when the picker takes over.
+        /* @__PURE__ */ jsx6(SlotPickerSkeleton, { monthOffset })
       )
     ] }) })
   ] }) });
 }
 export {
   HubSpotMeetingScheduler,
+  MEETING_SCHEDULER_H,
   MeetingSchedulerDirectory,
   MeetingSchedulerDirectoryRowSkeleton
 };