@flamingo-stack/openframe-frontend-core 0.0.764 → 0.0.766

package/dist/components/meeting-scheduler/index.d.ts

@@ -71,9 +71,10 @@ export interface HubSpotMeetingSchedulerProps {
      * The DATA form of the same override: `fieldRows`, a host consent row and
      * per-field display copy, spread onto whichever form renders. Serialisable,
      * so a Server Component can pass it across the RSC boundary where a component
-     * cannot.
+     * cannot. `answers` are what the page took outside the form (a choice made
+     * higher up the page), written into questions the visitor has not answered.
      */
-    detailsFormProps?: Pick<BookingFormProps, 'fieldRows' | 'consent' | 'fieldCopy' | 'deniedEmailDomains'>;
+    detailsFormProps?: Pick<BookingFormProps, 'fieldRows' | 'optionalFields' | 'consent' | 'fieldCopy' | 'deniedEmailDomains' | 'answers'>;
     /** Form rescue for the details form (`RESCUE_FORMS.meetingBooking`). OPT-IN:
      *  omitted or `null` saves nothing. */
     rescue?: FormRescueDefinition | null;
@@ -190,8 +191,8 @@ export declare function SchedulerDegradedCard({ flow, className, message, action
     children?: ReactNode;
 }): import("react").JSX.Element;
 export declare function HubSpotMeetingScheduler({ meetingId, apiBaseUrl, initialAvailability, title, description, hosts, displayTimezone, fallbackUrl, onBack, onBooked, onStageChange, className, flow, detailsForm: DetailsForm, detailsFormProps, rescue, layout, }: HubSpotMeetingSchedulerProps): import("react").JSX.Element;
-export { BookingForm, BookingFormSkeleton, type BookingFormProps, type BookingFieldRow, type BookingFieldSlot, type BookingFieldCopy, type BookingFormConsent, } from './booking-form';
-export { MeetingSchedulerDirectory, MeetingSchedulerDirectoryRowSkeleton, type MeetingSchedulerDirectoryProps, } from './directory';
+export { BookingForm, BookingFormSkeleton, formFieldOptionLabel, type BookingFormProps, type BookingFieldRow, type BookingFieldSlot, type BookingFieldCopy, type BookingFormConsent, } from './booking-form';
+export { MeetingSchedulerDirectory, MeetingSchedulerDirectoryRowSkeleton, MeetingSchedulerDirectorySkeleton, MEETING_DIRECTORY_PAGE_SIZE, type MeetingSchedulerDirectoryProps, } from './directory';
 export type { MeetingAvailability, BookingConfirmation, MeetingBookingErrorCode, MeetingHost };
 export type { SchedulingLink, SchedulingLinksPayload, DeniedEmailDomains } from '../../schemas/meeting-booking-schema';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/meeting-scheduler/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/index.tsx"],"names":[],"mappings":"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"}

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

@@ -15,15 +15,12 @@ import { formatDurationCompact, formatDateWithTimezone } from "../../utils/forma
 import { BackButton } from "../layout/back-button.js";
 import { LoadingRegion } from "../loading/loading-region.js";
 import { Alert, AlertDescription, Button } from "../ui/index.js";
-import {
-  BookingForm,
-  BookingFormSkeleton,
-  DEFAULT_SUBMIT_LABEL
-} from "./booking-form.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
+import { BookingForm, DEFAULT_SUBMIT_LABEL } from "./booking-form.js";
 import { Confirmation } from "./confirmation.js";
-import { SchedulerContextPanel, ContextPanelSkeleton } from "./context-panel.js";
-import { SchedulerModalHeader, SchedulerModalHeaderSkeleton } from "./modal-header.js";
-import { SlotPicker, SlotPickerSkeleton, dayKeyInZone } from "./slot-picker.js";
+import { SchedulerContextPanel } from "./context-panel.js";
+import { SchedulerModalHeader } from "./modal-header.js";
+import { SlotPicker, dayKeyInZone } from "./slot-picker.js";
 const BOOKING_ERROR_COPY = {
   INVALID_EMAIL: "That email address was rejected by our scheduling system \u2014 please use a real, reachable address (work email works best).",
   VALIDATION: "Please double-check your details \u2014 especially that the email address is real and reachable \u2014 and try again.",
@@ -85,6 +82,7 @@ const MODAL_STACK_CLASS = "flex flex-col gap-[var(--spacing-system-l)]";
 const MODAL_CARD_CLASS = "flex flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card";
 const MODAL_STEP_CLASS = "flex flex-col p-[var(--spacing-system-m)]";
 const NOOP = () => void 0;
+const NOOP_SUBMIT = () => Promise.resolve();
 const MODAL_FIELD_ROWS = [[{ name: "firstName" }, { name: "lastName" }], [{ name: "email" }]];
 const MODAL_PRIMARY_CLASS = "flex-1 content-md:min-w-[15.5rem] content-md:flex-none";
 function ModalFooter({ onCancel, primary }) {
@@ -93,6 +91,26 @@ function ModalFooter({ onCancel, primary }) {
     primary
   ] });
 }
+function schedulerCardClasses(flow, step, className) {
+  const detailsFirst = flow === "details-first";
+  const formOnly = detailsFirst && step === "details";
+  const boxed = !formOnly;
+  return {
+    formOnly,
+    cardClass: cn(
+      CARD_CLASS,
+      boxed ? SCHEDULER_FLOW_PRESETS[flow].height : "content-md:h-auto",
+      detailsFirst && "flex flex-col",
+      formOnly && "bg-ods-bg",
+      className
+    ),
+    /** details-first states a height on phones too (see MEETING_SCHEDULER_DETAILS_FIRST_H), so
+     *  the wrappers that let content shrink into a stated height run at every width there. */
+    innerClass: cn(CARD_INNER_CLASS, detailsFirst && boxed && "min-h-0 flex-1"),
+    actionPanelClass: cn(ACTION_PANEL_CLASS, detailsFirst && boxed && "min-h-0 overflow-y-auto"),
+    stepPanelClass: cn(STEP_PANEL_CLASS, detailsFirst && boxed && "min-h-0 overflow-y-auto")
+  };
+}
 function HubSpotMeetingScheduler({
   meetingId,
   apiBaseUrl = "",
@@ -123,6 +141,8 @@ function HubSpotMeetingScheduler({
     book,
     isSubmitting
   } = useMeetingBooking({ meetingId, apiBaseUrl, initialAvailability });
+  const inScope = useLoadingScope();
+  const coldStart = inScope || isLoadingAvailability && !availability;
   const detailsFirst = flow === "details-first";
   const modal = layout === "modal" && !detailsFirst;
   const modalFormId = useId();
@@ -140,14 +160,15 @@ function HubSpotMeetingScheduler({
   const timezone = pickedTimezone ?? displayTimezone ?? resolvedLocalTimezone;
   const preset = SCHEDULER_FLOW_PRESETS[flow];
   const [step, setStep] = useState(preset.initialStep);
-  const stage = !(isLoadingAvailability && !availability) && (Boolean(availabilityError) || !availability || !isNativelyBookable(availability)) ? "unavailable" : step;
+  const stage = !coldStart && (Boolean(availabilityError) || !availability || !isNativelyBookable(availability)) ? "unavailable" : step;
   const onStageChangeRef = useRef(onStageChange);
   useEffect(() => {
     onStageChangeRef.current = onStageChange;
   });
   useEffect(() => {
+    if (inScope) return;
     onStageChangeRef.current?.(stage);
-  }, [stage]);
+  }, [stage, inScope]);
   const [stash, setStash] = useState(null);
   const inFlightRef = useRef(false);
   const postInFlight = useCallback(
@@ -264,54 +285,14 @@ function HubSpotMeetingScheduler({
   );
   const escapeHatch = fallbackUrl ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "small-legacy", href: fallbackUrl, openInNewTab: true, children: "Open in HubSpot" }) : null;
   const backEdge = detailsFirst ? step === "slot" ? backToDetails : onBack : step === "details" ? backToSlot : onBack;
-  const boxed = !formOnly;
-  const cardClass = cn(
-    CARD_CLASS,
-    boxed ? preset.height : "content-md:h-auto",
-    detailsFirst && "flex flex-col",
-    formOnly && "bg-ods-bg",
-    className
-  );
-  const innerClass = cn(CARD_INNER_CLASS, detailsFirst && boxed && "min-h-0 flex-1");
-  const actionPanelClass = cn(ACTION_PANEL_CLASS, detailsFirst && boxed && "min-h-0 overflow-y-auto");
-  const stepPanelClass = cn(STEP_PANEL_CLASS, detailsFirst && boxed && "min-h-0 overflow-y-auto");
+  const { cardClass, innerClass, actionPanelClass, stepPanelClass } = schedulerCardClasses(flow, step, className);
   const degraded = (message) => /* @__PURE__ */ jsx(SchedulerDegradedCard, { flow, className, message, action: escapeHatch });
   const degradedCard = degraded("We couldn't load available call times. Please try again shortly.");
-  if (modal && isLoadingAvailability && !availability) {
-    return /* @__PURE__ */ jsxs("div", { className: cn(MODAL_STACK_CLASS, className), children: [
-      /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading available times", className: MODAL_CARD_CLASS, children: [
-        /* @__PURE__ */ jsx(SchedulerModalHeaderSkeleton, {}),
-        /* @__PURE__ */ jsx(SlotPickerSkeleton, { monthOffset, layout: "modal" })
-      ] }),
-      /* @__PURE__ */ jsx(
-        ModalFooter,
-        {
-          onCancel: onBack,
-          primary: /* @__PURE__ */ jsx(Button, { disabled: true, onClick: NOOP, className: MODAL_PRIMARY_CLASS, children: "Continue" })
-        }
-      )
-    ] });
-  }
-  if (isLoadingAvailability && !availability) {
-    return /* @__PURE__ */ jsx("div", { className: cardClass, children: /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading available times", className: innerClass, children: [
-      !formOnly && /* @__PURE__ */ jsx(ContextPanelSkeleton, { onBack: backEdge, className: CONTEXT_PANEL_CLASS }),
-      /* @__PURE__ */ jsx("div", { className: actionPanelClass, children: formOnly ? (
-        // The SAME wrapper the loaded form gets, so the skeleton never
-        // states its own inset.
-        /* @__PURE__ */ jsx("div", { className: stepPanelClass, children: /* @__PURE__ */ jsx(
-          BookingFormSkeleton,
-          {
-            fieldRows: detailsFormProps?.fieldRows,
-            consent: Boolean(detailsFormProps?.consent),
-            footerNote: preset.footerNote
-          }
-        ) })
-      ) : /* @__PURE__ */ jsx(SlotPickerSkeleton, { monthOffset }) })
-    ] }) });
-  }
-  if (availabilityError || !availability) return degradedCard;
-  if (!isNativelyBookable(availability)) {
-    return degraded("This meeting type is booked directly on HubSpot.");
+  if (!coldStart) {
+    if (availabilityError || !availability) return degradedCard;
+    if (!isNativelyBookable(availability)) {
+      return degraded("This meeting type is booked directly on HubSpot.");
+    }
   }
   if (modal) {
     const modalBack = step === "details" ? backToSlot : onBack;
@@ -322,7 +303,7 @@ function HubSpotMeetingScheduler({
     };
     const summary = selectedSlot != null && durationMs != null && timezone != null ? `${formatDateWithTimezone(selectedSlot, timezone, "weekdayDateTimeZoned", { viewerLocale: true })} \xB7 ${formatDurationCompact(durationMs / 1e3)}` : null;
     return /* @__PURE__ */ jsxs("div", { className: cn(MODAL_STACK_CLASS, className), children: [
-      /* @__PURE__ */ jsxs("div", { className: MODAL_CARD_CLASS, children: [
+      /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading available times", announce: coldStart, className: MODAL_CARD_CLASS, children: [
         modalBack && /* @__PURE__ */ jsx(
           BackButton,
           {
@@ -336,6 +317,7 @@ function HubSpotMeetingScheduler({
         /* @__PURE__ */ jsx(
           SchedulerModalHeader,
           {
+            loading: coldStart,
             hosts: shownHosts,
             durationsMs: durations,
             selectedDurationMs: durationMs,
@@ -370,28 +352,32 @@ function HubSpotMeetingScheduler({
           )
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           bookingError === "SLOT_TAKEN" && /* @__PURE__ */ jsx(Alert, { variant: "warning", className: "mx-[var(--spacing-system-m)] mt-[var(--spacing-system-m)] w-auto", children: /* @__PURE__ */ jsx(AlertDescription, { children: "That time was just taken \u2014 pick another slot below. (If you already submitted, check your email for a confirmation before rebooking.)" }) }),
-          timezone && durationMs != null ? /* @__PURE__ */ jsx(
-            SlotPicker,
-            {
-              layout: "modal",
-              slots,
-              timezone,
-              monthOffset,
-              onMonthOffsetChange: (o) => {
-                setSelectedDay(null);
-                setSelectedSlot(null);
-                setMonthOffset(o);
-              },
-              selectedSlot,
-              onSelectSlot: setSelectedSlot,
-              selectedDay,
-              onSelectDay: setSelectedDay,
-              isLoading: isLoadingAvailability
-            }
-          ) : durations.length === 0 && !isFetchingAvailability ? /* @__PURE__ */ jsxs("div", { className: cn(MODAL_STEP_CLASS, "items-start gap-[var(--spacing-system-m)]"), children: [
+          !coldStart && (!timezone || durationMs == null) && durations.length === 0 && !isFetchingAvailability ? /* @__PURE__ */ jsxs("div", { className: cn(MODAL_STEP_CLASS, "items-start gap-[var(--spacing-system-m)]"), children: [
             /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: "No call times are published right now." }),
             escapeHatch
-          ] }) : /* @__PURE__ */ jsx(SlotPickerSkeleton, { monthOffset, layout: "modal" })
+          ] }) : (
+            // On a cold start, or waiting for the zone or the length, the picker draws its own skeleton (`loading`).
+            /* @__PURE__ */ jsx(
+              SlotPicker,
+              {
+                loading: coldStart || !timezone || durationMs == null,
+                layout: "modal",
+                slots,
+                timezone,
+                monthOffset,
+                onMonthOffsetChange: (o) => {
+                  setSelectedDay(null);
+                  setSelectedSlot(null);
+                  setMonthOffset(o);
+                },
+                selectedSlot,
+                onSelectSlot: setSelectedSlot,
+                selectedDay,
+                onSelectDay: setSelectedDay,
+                isLoading: isLoadingAvailability
+              }
+            )
+          )
         ] })
       ] }),
       step === "slot" && /* @__PURE__ */ jsx(
@@ -428,10 +414,11 @@ function HubSpotMeetingScheduler({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx("div", { className: cardClass, children: /* @__PURE__ */ jsxs("div", { className: innerClass, children: [
+  return /* @__PURE__ */ jsx("div", { className: cardClass, children: /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading available times", announce: coldStart, className: innerClass, children: [
     !formOnly && /* @__PURE__ */ jsx(
       SchedulerContextPanel,
       {
+        loading: coldStart,
         hosts: shownHosts,
         title,
         description,
@@ -452,7 +439,41 @@ function HubSpotMeetingScheduler({
         className: CONTEXT_PANEL_CLASS
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: actionPanelClass, children: step === "confirmed" && confirmation && timezone ? /* @__PURE__ */ jsx("div", { className: stepPanelClass, children: /* @__PURE__ */ jsx(Confirmation, { confirmation, timezone }) }) : step === "details" && (detailsFirst ? (
+    /* @__PURE__ */ jsx("div", { className: actionPanelClass, children: coldStart ? (
+      // The month is not here yet: the step's own part draws its skeleton in the loaded wrapper. Both terms
+      // matter: without `formOnly` this would be a calendar where the form belongs; paging a month AFTER
+      // Continue (at `step === 'slot'`) keeps the calendar.
+      formOnly ? /* @__PURE__ */ jsx("div", { className: stepPanelClass, children: /* @__PURE__ */ jsx(
+        DetailsForm,
+        {
+          loading: true,
+          ...detailsFormProps,
+          availability,
+          meetingId,
+          timezone,
+          deferSlot: detailsFirst,
+          submitLabel: preset.submitLabel,
+          footerNote: preset.footerNote,
+          isSubmitting: false,
+          onSubmit: NOOP_SUBMIT,
+          honeypotInputProps,
+          getSignals
+        }
+      ) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--spacing-system-m)] content-md:min-h-0 content-md:flex-1", children: /* @__PURE__ */ jsx(
+        SlotPicker,
+        {
+          loading: true,
+          slots,
+          timezone,
+          monthOffset,
+          onMonthOffsetChange: NOOP,
+          selectedSlot: null,
+          onSelectSlot: NOOP,
+          selectedDay: null,
+          onSelectDay: NOOP
+        }
+      ) })
+    ) : step === "confirmed" && confirmation && timezone ? /* @__PURE__ */ jsx("div", { className: stepPanelClass, children: /* @__PURE__ */ jsx(Confirmation, { confirmation, timezone }) }) : step === "details" && (detailsFirst ? (
       // The form is step ONE here: no slot yet, and `timezone` is null
       // on the server render, so neither may gate the PANEL. A link
       // publishing no durations has no form worth showing; it gets the
@@ -495,13 +516,26 @@ function HubSpotMeetingScheduler({
           children: /* @__PURE__ */ jsx(AlertDescription, { children: "That time was just taken \u2014 pick another slot below. (If you already 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.
+      (!timezone || durationMs == null) && durations.length === 0 && (!isFetchingAvailability || formOnly) ? (
+        // 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. In the form-only layout it holds through
+        // a refetch too: the alternative frame is a calendar skeleton
+        // where a form belongs.
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-[var(--spacing-system-m)]", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: "No call times are published right now." }),
+          escapeHatch
+        ] })
+      ) : (
+        // The picker owns the loading and the empty month — it keeps
+        // the calendar up either way, so there is no branch here that
+        // can take it off screen mid-flow. In the pre-mount
+        // timezone-resolution window (every SSR load hits it for one
+        // frame-batch) it draws its own skeleton (`loading`).
         /* @__PURE__ */ jsx(
           SlotPicker,
           {
+            loading: !timezone || durationMs == null,
             slots,
             timezone,
             monthOffset,
@@ -546,42 +580,33 @@ function HubSpotMeetingScheduler({
             isSubmitting: detailsFirst ? isSubmitting : void 0
           }
         )
-      ) : durations.length === 0 && (!isFetchingAvailability || formOnly) ? (
-        // 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. In the form-only layout it holds through
-        // a refetch too: the alternative frame is a calendar skeleton
-        // where a form belongs.
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-[var(--spacing-system-m)]", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: "No call times are published right now." }),
-          escapeHatch
-        ] })
-      ) : (
-        // Pre-mount timezone-resolution window (every SSR load hits
-        // this for one frame-batch) — same layout, real calendar, so
-        // nothing shifts when the picker takes over.
-        /* @__PURE__ */ jsx(SlotPickerSkeleton, { monthOffset })
       )
     ] }) })
   ] }) });
 }
 import {
   BookingForm as BookingForm2,
-  BookingFormSkeleton as BookingFormSkeleton2
+  BookingFormSkeleton,
+  formFieldOptionLabel
 } from "./booking-form.js";
 import {
   MeetingSchedulerDirectory,
-  MeetingSchedulerDirectoryRowSkeleton
+  MeetingSchedulerDirectoryRowSkeleton,
+  MeetingSchedulerDirectorySkeleton,
+  MEETING_DIRECTORY_PAGE_SIZE
 } from "./directory.js";
 export {
   BookingForm2 as BookingForm,
-  BookingFormSkeleton2 as BookingFormSkeleton,
+  BookingFormSkeleton,
   DEFAULT_SCHEDULER_FLOW,
   HubSpotMeetingScheduler,
+  MEETING_DIRECTORY_PAGE_SIZE,
   MEETING_SCHEDULER_DETAILS_FIRST_H,
   MEETING_SCHEDULER_H,
   MeetingSchedulerDirectory,
   MeetingSchedulerDirectoryRowSkeleton,
+  MeetingSchedulerDirectorySkeleton,
   SCHEDULER_FLOW_PRESETS,
-  SchedulerDegradedCard
+  SchedulerDegradedCard,
+  formFieldOptionLabel
 };

package/dist/components/meeting-scheduler/modal-header.d.ts

@@ -20,8 +20,12 @@ export interface SchedulerModalHeaderProps {
     disabled?: boolean;
     /** Whether the timezone row renders (not on the confirmation). */
     showTimezone?: boolean;
+    /** The meeting is read on the client and has not arrived: the header draws its skeleton, as in a loading scope. */
+    loading?: boolean;
 }
-export declare function SchedulerModalHeader({ hosts, durationsMs, selectedDurationMs, onSelectDuration, timezone, onTimezoneChange, locked, disabled, showTimezone, }: SchedulerModalHeaderProps): import("react").JSX.Element;
-/** Same footprint as the loaded header, for the cold load. */
-export declare function SchedulerModalHeaderSkeleton(): import("react").JSX.Element;
+export declare function SchedulerModalHeader({ hosts, durationsMs, selectedDurationMs, onSelectDuration, timezone, onTimezoneChange, locked, disabled, showTimezone, loading, }: SchedulerModalHeaderProps): import("react").JSX.Element;
+/** Same footprint as the loaded header, for the cold load: "Timezone" real, one host and the length as bars. */
+export declare function SchedulerModalHeaderSkeleton({ showTimezone }?: {
+    showTimezone?: boolean;
+}): import("react").JSX.Element;
 //# sourceMappingURL=modal-header.d.ts.map

package/dist/components/meeting-scheduler/modal-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-header.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/modal-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAOxE;;;;;;;GAOG;AACH,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAqCD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,QAAQ,EACR,gBAAgB,EAChB,MAAc,EACd,QAAgB,EAChB,YAAmB,GACpB,EAAE,yBAAyB,+BA8C3B;AAED,8DAA8D;AAC9D,wBAAgB,4BAA4B,gCAmB3C"}
+{"version":3,"file":"modal-header.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/modal-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAUxE;;;;;;;GAOG;AACH,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mHAAmH;IACnH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA2CD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,QAAQ,EACR,gBAAgB,EAChB,MAAc,EACd,QAAgB,EAChB,YAAmB,EACnB,OAAe,GAChB,EAAE,yBAAyB,+BA4C3B;AAED,gHAAgH;AAChH,wBAAgB,4BAA4B,CAAC,EAAE,YAAmB,EAAE,GAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAO,+BAuBpG"}

package/dist/components/meeting-scheduler/modal-header.js

@@ -2,12 +2,20 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { formatDurationCompact } from "../../utils/format.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { SquareAvatar, AvatarStack, Button } from "../ui/index.js";
+import { AutocompleteSkeleton } from "../ui/autocomplete.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
+import { SquareAvatarSkeleton } from "../ui/square-avatar.js";
 import { TimezoneSelect } from "../ui/timezone-select.js";
 const ROW_CLASS = "border-b border-ods-border p-[var(--spacing-system-m)]";
 const STRIP_CLASS = cn(ROW_CLASS, "flex items-center justify-between gap-[var(--spacing-system-m)]");
 const FIELD_LABEL_CLASS = "text-h4 text-ods-text-primary";
+const TIMEZONE_ROW_CLASS = cn(ROW_CLASS, "flex flex-col gap-[var(--spacing-system-xxs)]");
+const HOST_LIST_CLASS = "flex min-w-0 flex-col gap-[var(--spacing-system-s)]";
+const HOST_ROW_CLASS = "flex items-center gap-[var(--spacing-system-xs)]";
+const HOST_TEXT_CLASS = "flex min-w-0 flex-col";
+const DURATION_LINE_CLASS = "shrink-0 text-ods-text-secondary text-h6";
 function HostIdentity({ hosts }) {
   if (hosts.length === 0) return null;
   if (hosts.length > 3) {
@@ -19,7 +27,7 @@ function HostIdentity({ hosts }) {
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-s)]", children: hosts.map((host) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
+  return /* @__PURE__ */ jsx("div", { className: HOST_LIST_CLASS, children: hosts.map((host) => /* @__PURE__ */ jsxs("div", { className: HOST_ROW_CLASS, children: [
     /* @__PURE__ */ jsx(
       SquareAvatar,
       {
@@ -30,7 +38,7 @@ function HostIdentity({ hosts }) {
         fallback: host.name
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: HOST_TEXT_CLASS, children: [
       /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-primary text-h4", children: host.name }),
       host.title && /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-secondary text-h6", children: host.title })
     ] })
@@ -45,9 +53,11 @@ function SchedulerModalHeader({
   onTimezoneChange,
   locked = false,
   disabled = false,
-  showTimezone = true
+  showTimezone = true,
+  loading = false
 }) {
   const chips = !locked && durationsMs.length > 1;
+  if (useLoadingScope() || loading) return /* @__PURE__ */ jsx(SchedulerModalHeaderSkeleton, { showTimezone });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: STRIP_CLASS, children: [
       /* @__PURE__ */ jsx(HostIdentity, { hosts }),
@@ -61,41 +71,42 @@ function SchedulerModalHeader({
           children: formatDurationCompact(ms / 1e3)
         },
         ms
-      )) }) : selectedDurationMs != null && /* @__PURE__ */ jsxs("p", { className: "shrink-0 text-ods-text-secondary text-h6", children: [
+      )) }) : selectedDurationMs != null && /* @__PURE__ */ jsxs("p", { className: DURATION_LINE_CLASS, children: [
         formatDurationCompact(selectedDurationMs / 1e3),
         " call"
       ] })
     ] }),
-    showTimezone && /* @__PURE__ */ jsxs("div", { className: cn(ROW_CLASS, "flex flex-col gap-[var(--spacing-system-xxs)]"), children: [
+    showTimezone && /* @__PURE__ */ jsxs("div", { className: TIMEZONE_ROW_CLASS, children: [
       /* @__PURE__ */ jsx("p", { className: FIELD_LABEL_CLASS, children: "Timezone" }),
-      timezone ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         TimezoneSelect,
         {
           value: timezone,
+          loading: !timezone,
           disabled,
           onChange: (tz) => {
             if (tz) onTimezoneChange?.(tz);
           }
         }
-      ) : /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-full" })
+      )
     ] })
   ] });
 }
-function SchedulerModalHeaderSkeleton() {
+function SchedulerModalHeaderSkeleton({ showTimezone = true } = {}) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: STRIP_CLASS, children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 shrink-0 rounded-full" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xxs)]", children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-32" }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-24" })
+      /* @__PURE__ */ jsx("div", { className: HOST_LIST_CLASS, children: /* @__PURE__ */ jsxs("div", { className: HOST_ROW_CLASS, children: [
+        /* @__PURE__ */ jsx(SquareAvatarSkeleton, { variant: "round", size: "sm" }),
+        /* @__PURE__ */ jsxs("div", { className: HOST_TEXT_CLASS, children: [
+          /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-32" }),
+          /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-24" })
         ] })
-      ] }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-20 shrink-0" })
+      ] }) }),
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: cn(DURATION_LINE_CLASS, "w-20") })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: cn(ROW_CLASS, "flex flex-col gap-[var(--spacing-system-xxs)]"), children: [
+    showTimezone && /* @__PURE__ */ jsxs("div", { className: TIMEZONE_ROW_CLASS, children: [
       /* @__PURE__ */ jsx("p", { className: FIELD_LABEL_CLASS, children: "Timezone" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-full" })
+      /* @__PURE__ */ jsx(AutocompleteSkeleton, {})
     ] })
   ] });
 }

package/dist/components/meeting-scheduler/slot-picker.d.ts

@@ -47,8 +47,8 @@ export interface SlotPickerProps {
     slots: number[];
     /** Column layout; `card` unless the host says otherwise. */
     layout?: SlotPickerLayout;
-    /** IANA zone every label renders in (parent resolves post-mount). */
-    timezone: string;
+    /** IANA zone every label renders in (parent resolves post-mount; null until then, which draws the skeleton). */
+    timezone: string | null;
     monthOffset: number;
     onMonthOffsetChange: (offset: number) => void;
     selectedSlot: number | null;
@@ -64,6 +64,11 @@ export interface SlotPickerProps {
      * the visitor can see WHICH time is being booked.
      */
     isSubmitting?: boolean;
+    /**
+     * The availability (or the duration and zone it is read for) has not arrived: the whole picker draws its
+     * skeleton, as in a loading scope. DISTINCT from `isLoading`, a month refetch under a mounted picker.
+     */
+    loading?: boolean;
 }
 /** Stable per-zone day key for an instant, e.g. "2026-08-14" (exported — the
  *  parent uses it to auto-select the first available day). */
@@ -87,6 +92,8 @@ export declare function SlotPickerSkeleton({ monthOffset, layout, }: {
     layout?: SlotPickerLayout;
 }): import("react").JSX.Element;
 /** Same-footprint skeleton for the time-chip column. */
-export declare function TimeChipsSkeleton(): import("react").JSX.Element;
-export declare function SlotPicker({ slots, layout, timezone, monthOffset, onMonthOffsetChange, selectedSlot, onSelectSlot, selectedDay, onSelectDay, isLoading, isSubmitting, }: SlotPickerProps): import("react").JSX.Element;
+export declare function TimeChipsSkeleton({ layout }?: {
+    layout?: SlotPickerLayout;
+}): import("react").JSX.Element;
+export declare function SlotPicker({ slots, layout, timezone, monthOffset, onMonthOffsetChange, selectedSlot, onSelectSlot, selectedDay, onSelectDay, isLoading, isSubmitting, loading, }: SlotPickerProps): import("react").JSX.Element;
 //# sourceMappingURL=slot-picker.d.ts.map

package/dist/components/meeting-scheduler/slot-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slot-picker.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/slot-picker.tsx"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,qEAAqE;IACrE,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;8DAC8D;AAC9D,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAIjE;AA6CD;yDACyD;AACzD,eAAO,MAAM,mBAAmB,uBAAuB,CAAC;AA4GxD;kEACkE;AAClE,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAIpD;AAgED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,WAAe,EACf,MAAe,GAChB,EAAE;IACD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B,+BAgCA;AAED,wDAAwD;AACxD,wBAAgB,iBAAiB,gCAmBhC;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAe,EACf,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,SAAiB,EACjB,YAAoB,GACrB,EAAE,eAAe,+BA6GjB"}
+{"version":3,"file":"slot-picker.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/slot-picker.tsx"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,gHAAgH;IAChH,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;8DAC8D;AAC9D,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAIjE;AA6CD;yDACyD;AACzD,eAAO,MAAM,mBAAmB,uBAAuB,CAAC;AA4GxD;kEACkE;AAClE,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAIpD;AAgED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,WAAe,EACf,MAAe,GAChB,EAAE;IACD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B,+BAgCA;AAED,wDAAwD;AACxD,wBAAgB,iBAAiB,CAAC,EAAE,MAAe,EAAE,GAAE;IAAE,MAAM,CAAC,EAAE,gBAAgB,CAAA;CAAO,+BAmBxF;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAe,EACf,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,SAAiB,EACjB,YAAoB,EACpB,OAAe,GAChB,EAAE,eAAe,+BAkHjB"}

package/dist/components/meeting-scheduler/slot-picker.js

@@ -5,8 +5,9 @@ import { useCallback, useMemo } from "react";
 import { cn } from "../../utils/cn.js";
 import { formatDateWithTimezone, formatTimeWithTimezone, VIEWER_TIMEZONE } from "../../utils/format.js";
 import { MAX_MONTH_OFFSET } from "../../utils/hubspot-meetings-convention.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Button, DatePickerCalendar } from "../ui/index.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 function dayKeyInZone(ms, timeZone) {
   return new Intl.DateTimeFormat("en-CA", { timeZone, year: "numeric", month: "2-digit", day: "2-digit" }).format(
     new Date(ms)
@@ -136,15 +137,15 @@ function SlotPickerSkeleton({
       "div",
       {
         className: modal ? cn(COLUMN_STACK, MODAL_COLUMN_BOX, MODAL_TIMES_H, "min-w-0 content-md:flex-1") : cn(COLUMN_STACK, COLUMN_BOX, "min-w-0 content-md:flex-1"),
-        children: /* @__PURE__ */ jsx(TimeChipsSkeleton, {})
+        children: /* @__PURE__ */ jsx(TimeChipsSkeleton, { layout })
       }
     )
   ] });
 }
-function TimeChipsSkeleton() {
+function TimeChipsSkeleton({ layout = "card" } = {}) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: COLUMN_HEADING_CLASS, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "inline-block h-4 w-40 align-middle" }) }),
-    /* @__PURE__ */ jsx("div", { className: CHIP_GRID_CLASS, children: Array.from({ length: 16 }, (_, i) => (
+    /* @__PURE__ */ jsx("div", { className: COLUMN_HEADING_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-40" }) }),
+    /* @__PURE__ */ jsx("div", { className: layout === "modal" ? MODAL_CHIP_GRID_CLASS : CHIP_GRID_CLASS, children: Array.from({ length: 16 }, (_, i) => (
       // h-11 content-md:h-12 — the loaded chip's own default-size height.
       /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn(CHIP_CLASS, "h-11 content-md:h-12") }, i)
     )) })
@@ -161,10 +162,13 @@ function SlotPicker({
   selectedDay,
   onSelectDay,
   isLoading = false,
-  isSubmitting = false
+  isSubmitting = false,
+  loading = false
 }) {
+  const inScope = useLoadingScope() || loading;
   const slotsByDay = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
+    if (timezone == null) return map;
     for (const ms of slots) {
       const key = dayKeyInZone(ms, timezone);
       const list = map.get(key) ?? [];
@@ -182,6 +186,7 @@ function SlotPicker({
   const monthPrefix = `${visibleMonth.getFullYear()}-${String(visibleMonth.getMonth() + 1).padStart(2, "0")}`;
   const monthHasSlots = [...slotsByDay.keys()].some((key) => key.startsWith(monthPrefix));
   const modal = layout === "modal";
+  if (inScope || timezone == null) return /* @__PURE__ */ jsx(SlotPickerSkeleton, { monthOffset, layout });
   return /* @__PURE__ */ jsxs("div", { className: modal ? MODAL_ROW_CLASS : SLOT_ROW_CLASS, children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -206,7 +211,7 @@ function SlotPicker({
       "div",
       {
         className: modal ? cn(COLUMN_STACK, MODAL_COLUMN_BOX, MODAL_TIMES_H, "min-w-0 content-md:flex-1") : cn(COLUMN_STACK, COLUMN_BOX, "min-w-0 content-md:flex-1"),
-        children: isLoading ? /* @__PURE__ */ jsx(TimeChipsSkeleton, {}) : selectedDay ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        children: isLoading ? /* @__PURE__ */ jsx(TimeChipsSkeleton, { layout }) : selectedDay ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("p", { className: COLUMN_HEADING_CLASS, children: formatDateWithTimezone(dateFromDayKey(selectedDay), VIEWER_TIMEZONE, "weekday", { viewerLocale: true }) }),
           /* @__PURE__ */ jsx("div", { className: modal ? MODAL_CHIP_GRID_CLASS : CHIP_GRID_CLASS, children: daySlots.map((ms) => {
             const isSelected = selectedSlot === ms;