@flamingo-stack/openframe-frontend-core 0.0.594 → 0.0.595-snapshot.20260905173123

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

@@ -11,6 +11,7 @@ import {
   AlertDescription,
   Autocomplete,
   BackButton,
+  CheckboxBlock,
   DatePickerCalendar,
   HoneypotField,
   MAX_MONTH_OFFSET,
@@ -22,13 +23,13 @@ import {
   SelectTrigger,
   SelectValue,
   Textarea
-} from "../../chunk-PMN7WDXI.js";
+} from "../../chunk-YUHOKPKS.js";
 import "../../chunk-L2SLFCXP.js";
 import "../../chunk-BJXDHKUX.js";
 import {
   useHumanitySignals,
   useToast
-} from "../../chunk-MOHSA65M.js";
+} from "../../chunk-EZM5DNII.js";
 import "../../chunk-ZRIVCLPR.js";
 import "../../chunk-GBON2OCG.js";
 import {
@@ -42,10 +43,10 @@ import {
 } from "../../chunk-T2NQSKH4.js";
 import {
   useIsHydrated
-} from "../../chunk-LKN2KKYZ.js";
+} from "../../chunk-4K7TCJ35.js";
 import "../../chunk-5LIDR7HL.js";
 import "../../chunk-XXMHLZ3Y.js";
-import "../../chunk-A5AKGC4S.js";
+import "../../chunk-LPMDCQLL.js";
 import "../../chunk-IMDG23LW.js";
 import "../../chunk-W72U7OU7.js";
 import {
@@ -53,7 +54,7 @@ import {
   SquareAvatar,
   StatusBadge,
   formatDurationCompact
-} from "../../chunk-BTF3CNDP.js";
+} from "../../chunk-ROQO355A.js";
 import "../../chunk-MDKCTSDS.js";
 import "../../chunk-MYBXCWEI.js";
 import "../../chunk-OTX6XNSA.js";
@@ -76,7 +77,7 @@ import "../../chunk-3DTTSBDF.js";
 import "../../chunk-DCHYNTHI.js";
 
 // src/components/meeting-scheduler/index.tsx
-import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo5, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo5, useRef as useRef2, useState as useState4 } from "react";
 
 // src/hooks/use-meeting-booking.ts
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -113,7 +114,7 @@ function isValidBcp47Locale(locale) {
     return false;
   }
 }
-function makeBookingSchema(formFields, legalConsent) {
+function buildBookingSchema(formFields, legalConsent, slot) {
   const answers = {};
   for (const field of formFields) {
     if (!isSupportedFormField(field)) continue;
@@ -150,12 +151,12 @@ function makeBookingSchema(formFields, legalConsent) {
   const answersObject = z.object(answers);
   return z.object({
     meetingId: z.string().min(1),
-    startTimeMs: z.number().int().positive(),
-    durationMs: z.number().int().positive(),
+    startTimeMs: slot.startTimeMs,
+    durationMs: slot.durationMs,
     firstName: z.string().min(1, { message: "First name is required" }).max(255),
     lastName: z.string().min(1, { message: "Last name is required" }).max(255),
     email: z.string().email({ message: "Please enter a valid email address" }).max(255),
-    timezone: z.string().refine(isValidIanaTimezone, { message: "Invalid timezone" }),
+    timezone: slot.timezone,
     locale: z.string().refine(isValidBcp47Locale, { message: "Invalid locale" }).optional(),
     // Plain `.optional()` (no `.default()`) so zod's input and output types
     // match — react-hook-form's zodResolver needs them identical, and the
@@ -177,6 +178,13 @@ function makeBookingSchema(formFields, legalConsent) {
     }
   });
 }
+function makeDeferredBookingSchema(formFields, legalConsent) {
+  return buildBookingSchema(formFields, legalConsent, {
+    startTimeMs: z.number().int().positive().nullish(),
+    durationMs: z.number().int().positive().nullish(),
+    timezone: z.string().refine(isValidIanaTimezone, { message: "Invalid timezone" }).nullish()
+  });
+}
 
 // src/hooks/use-meeting-booking.ts
 var AVAILABILITY_STALE_MS = 0;
@@ -268,15 +276,28 @@ function useMeetingBooking(options) {
 
 // src/components/meeting-scheduler/booking-form.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMemo } from "react";
+import { Fragment, useEffect, useMemo, useState as useState2 } from "react";
 import { useForm, Controller } from "react-hook-form";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+var SPAN_CLASS = {
+  1: "md:col-span-1",
+  2: "md:col-span-2",
+  3: "md:col-span-3",
+  4: "md:col-span-4"
+};
+var evenSpan = (count) => Math.min(4, Math.max(1, Math.floor(4 / Math.max(1, count))));
 function BookingForm({
   availability,
   meetingId,
   startTimeMs,
   durationMs,
   timezone,
+  deferSlot = false,
+  initialValues,
+  submitLabel,
+  footerNote,
+  fieldRows,
+  consent,
   isSubmitting,
   onSubmit,
   honeypotInputProps,
@@ -284,42 +305,75 @@ function BookingForm({
 }) {
   const { formFields, legalConsent } = availability;
   const supportedFields = useMemo(() => formFields.filter(isSupportedFormField), [formFields]);
-  const schema = useMemo(() => makeBookingSchema(supportedFields, legalConsent), [supportedFields, legalConsent]);
+  const schema = useMemo(
+    () => makeDeferredBookingSchema(supportedFields, legalConsent),
+    [supportedFields, legalConsent]
+  );
+  const consentDefaults = useMemo(
+    () => (legalConsent?.communicationConsentCheckboxes ?? []).map((c) => ({
+      communicationTypeId: c.communicationTypeId,
+      consented: false
+    })),
+    [legalConsent]
+  );
   const {
     register,
     control,
     handleSubmit,
+    setValue,
     formState: { errors }
   } = useForm({
     resolver: zodResolver(schema),
     defaultValues: {
       meetingId,
-      startTimeMs,
-      durationMs,
+      // Genuinely OMITTED, not present-as-undefined, when the slot is deferred.
+      ...deferSlot ? {} : { startTimeMs, durationMs },
       timezone,
       locale: typeof navigator !== "undefined" ? navigator.language : void 0,
       firstName: "",
       lastName: "",
       email: "",
       formFields: {},
-      legalConsentResponses: (legalConsent?.communicationConsentCheckboxes ?? []).map((c) => ({
-        communicationTypeId: c.communicationTypeId,
-        consented: false
-      }))
+      legalConsentResponses: consentDefaults,
+      // A remount (back edge, or an error return) would otherwise lose every
+      // answer — `defaultValues` is snapshotted once and never re-read.
+      ...initialValues ?? {}
     }
   });
-  const submit = handleSubmit(async (data) => {
-    await onSubmit({ ...data, meetingId, startTimeMs, durationMs, timezone, ...getSignals() });
+  const priorConsents = initialValues?.legalConsentResponses;
+  const [consented, setConsented] = useState2(initialValues?.hostConsent === true);
+  const [consentError, setConsentError] = useState2(null);
+  const consentMissing = Boolean(consent) && !consented;
+  useEffect(() => {
+    setValue(
+      "legalConsentResponses",
+      consentDefaults.map((next) => ({
+        ...next,
+        consented: priorConsents?.find((r) => r.communicationTypeId === next.communicationTypeId)?.consented ?? false
+      })),
+      { shouldDirty: false }
+    );
+  }, [consentDefaults, priorConsents, setValue]);
+  const submitValid = handleSubmit(async (data) => {
+    if (consentMissing) return;
+    if (deferSlot) {
+      await onSubmit({ ...data, meetingId, hostConsent: consented });
+      return;
+    }
+    await onSubmit({ ...data, meetingId, hostConsent: consented, startTimeMs, durationMs, timezone, ...getSignals() });
   });
+  const submit = (event) => {
+    if (consentMissing) setConsentError(consent?.errorMessage ?? "Please agree to continue.");
+    return submitValid(event);
+  };
   const fieldError = (name) => {
     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-11 md:h-12";
   const FORM_STACK = "flex flex-col gap-[var(--spacing-system-l)]";
-  return /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: FORM_STACK, noValidate: true, children: [
-    /* @__PURE__ */ jsx(HoneypotField, { ...honeypotInputProps }),
-    /* @__PURE__ */ jsx(FieldWrapper, { label: "Email", htmlFor: "ms-email", error: errors.email?.message, children: /* @__PURE__ */ jsx(
+  const builtInFields = {
+    email: /* @__PURE__ */ jsx(FieldWrapper, { label: "Email", htmlFor: "ms-email", error: errors.email?.message, children: /* @__PURE__ */ jsx(
       Input,
       {
         id: "ms-email",
@@ -332,129 +386,210 @@ function BookingForm({
         ...register("email")
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-[var(--spacing-system-m)]", children: [
-      /* @__PURE__ */ jsx(FieldWrapper, { label: "First Name", htmlFor: "ms-first-name", error: errors.firstName?.message, children: /* @__PURE__ */ jsx(
-        Input,
-        {
-          id: "ms-first-name",
-          required: true,
-          autoComplete: "given-name",
-          placeholder: "Jane",
-          "aria-invalid": !!errors.firstName,
-          className: inputClass,
-          ...register("firstName")
-        }
-      ) }),
-      /* @__PURE__ */ jsx(FieldWrapper, { label: "Last Name", htmlFor: "ms-last-name", error: errors.lastName?.message, children: /* @__PURE__ */ jsx(
-        Input,
-        {
-          id: "ms-last-name",
-          required: true,
-          autoComplete: "family-name",
-          placeholder: "Doe",
-          "aria-invalid": !!errors.lastName,
-          className: inputClass,
-          ...register("lastName")
-        }
-      ) })
-    ] }),
-    supportedFields.map((field) => /* @__PURE__ */ jsxs(
-      FieldWrapper,
+    firstName: /* @__PURE__ */ jsx(FieldWrapper, { label: "First Name", htmlFor: "ms-first-name", error: errors.firstName?.message, children: /* @__PURE__ */ jsx(
+      Input,
       {
-        label: field.label,
-        htmlFor: `ms-q-${field.name}`,
-        error: fieldError(field.name),
-        children: [
-          field.type === "textarea" && /* @__PURE__ */ jsx(
-            Textarea,
-            {
-              id: `ms-q-${field.name}`,
-              className: "border-ods-border bg-ods-card px-3 text-ods-text-primary placeholder-ods-text-secondary",
-              ...register(`formFields.${field.name}`)
-            }
-          ),
-          field.type === "text" && /* @__PURE__ */ jsx(
-            Input,
+        id: "ms-first-name",
+        required: true,
+        autoComplete: "given-name",
+        placeholder: "Jane",
+        "aria-invalid": !!errors.firstName,
+        className: inputClass,
+        ...register("firstName")
+      }
+    ) }),
+    lastName: /* @__PURE__ */ jsx(FieldWrapper, { label: "Last Name", htmlFor: "ms-last-name", error: errors.lastName?.message, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: "ms-last-name",
+        required: true,
+        autoComplete: "family-name",
+        placeholder: "Doe",
+        "aria-invalid": !!errors.lastName,
+        className: inputClass,
+        ...register("lastName")
+      }
+    ) })
+  };
+  const renderDeclaredField = (field) => /* @__PURE__ */ jsxs(FieldWrapper, { label: field.label, htmlFor: `ms-q-${field.name}`, error: fieldError(field.name), children: [
+    field.type === "textarea" && /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        id: `ms-q-${field.name}`,
+        className: "border-ods-border bg-ods-card px-3 text-ods-text-primary placeholder-ods-text-secondary",
+        ...register(`formFields.${field.name}`)
+      }
+    ),
+    field.type === "text" && /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: `ms-q-${field.name}`,
+        className: "h-11 border-ods-border bg-ods-card px-3 text-ods-text-primary placeholder-ods-text-secondary md:h-12",
+        ...register(`formFields.${field.name}`)
+      }
+    ),
+    (field.type === "select" || field.type === "radio") && /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control,
+        name: `formFields.${field.name}`,
+        render: ({ field: rhf }) => field.type === "select" ? /* @__PURE__ */ jsxs(Select, { value: rhf.value ?? "", onValueChange: rhf.onChange, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { id: `ms-q-${field.name}`, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select\u2026" }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: (field.options ?? []).map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt, children: opt }, opt)) })
+        ] }) : /* @__PURE__ */ jsx(RadioGroup, { value: rhf.value ?? "", onValueChange: rhf.onChange, children: (field.options ?? []).map((opt) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
+          /* @__PURE__ */ jsx(RadioGroupItem, { id: `ms-q-${field.name}-${opt}`, value: opt }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: `ms-q-${field.name}-${opt}`, children: opt })
+        ] }, opt)) })
+      }
+    ),
+    field.type === "checkbox" && /* @__PURE__ */ jsx(
+      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__ */ jsx("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: /* @__PURE__ */ jsx(
+            Checkbox,
             {
               id: `ms-q-${field.name}`,
-              className: "h-11 border-ods-border bg-ods-card px-3 text-ods-text-primary placeholder-ods-text-secondary md:h-12",
-              ...register(`formFields.${field.name}`)
-            }
-          ),
-          (field.type === "select" || field.type === "radio") && /* @__PURE__ */ jsx(
-            Controller,
-            {
-              control,
-              name: `formFields.${field.name}`,
-              render: ({ field: rhf }) => field.type === "select" ? /* @__PURE__ */ jsxs(Select, { value: rhf.value ?? "", onValueChange: rhf.onChange, children: [
-                /* @__PURE__ */ jsx(SelectTrigger, { id: `ms-q-${field.name}`, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select\u2026" }) }),
-                /* @__PURE__ */ jsx(SelectContent, { children: (field.options ?? []).map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt, children: opt }, opt)) })
-              ] }) : /* @__PURE__ */ jsx(RadioGroup, { value: rhf.value ?? "", onValueChange: rhf.onChange, children: (field.options ?? []).map((opt) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
-                /* @__PURE__ */ jsx(RadioGroupItem, { id: `ms-q-${field.name}-${opt}`, value: opt }),
-                /* @__PURE__ */ jsx(Label, { htmlFor: `ms-q-${field.name}-${opt}`, children: opt })
-              ] }, opt)) })
+              checked: Boolean(rhf.value),
+              onCheckedChange: (v) => rhf.onChange(v === true)
             }
-          ),
-          field.type === "checkbox" && /* @__PURE__ */ jsx(
-            Controller,
+          ) })
+        )
+      }
+    )
+  ] }, field.name);
+  const declaredByName = new Map(supportedFields.map((f) => [f.name, f]));
+  const slotResolves = (name) => Boolean(builtInFields[name] || declaredByName.has(name));
+  const slotNode = (name) => {
+    const builtIn = builtInFields[name];
+    if (builtIn) return builtIn;
+    const declared = declaredByName.get(name);
+    return declared ? renderDeclaredField(declared) : null;
+  };
+  const unplacedFields = fieldRows ? supportedFields.filter((f) => !fieldRows.some((row) => row.some((slot) => slot.name === f.name))) : [];
+  const placedRows = (fieldRows ?? []).map((row) => row.filter((slot) => slotResolves(slot.name))).filter((row) => row.length > 0);
+  const submitButton = /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "submit",
+      loading: isSubmitting,
+      disabled: isSubmitting,
+      className: footerNote ? "md:w-60" : void 0,
+      children: submitLabel ?? "Confirm Booking"
+    }
+  );
+  return /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: FORM_STACK, noValidate: true, children: [
+    /* @__PURE__ */ jsx(HoneypotField, { ...honeypotInputProps }),
+    fieldRows ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+      placedRows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "grid grid-cols-2 gap-[var(--spacing-system-m)] md:grid-cols-4",
+          children: row.map((slot) => /* @__PURE__ */ jsx(
+            "div",
             {
-              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__ */ jsx("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: /* @__PURE__ */ jsx(
-                  Checkbox,
-                  {
-                    id: `ms-q-${field.name}`,
-                    checked: Boolean(rhf.value),
-                    onCheckedChange: (v) => rhf.onChange(v === true)
-                  }
-                ) })
-              )
-            }
-          )
-        ]
-      },
-      field.name
-    )),
+              className: cn(
+                // A two-field row stays side by side on a phone — the rule
+                // the built-in name pair has always followed: two short
+                // fields cost one line instead of two on the layout that can
+                // least afford them.
+                row.length === 2 ? "col-span-1" : "col-span-2",
+                SPAN_CLASS[slot.span ?? evenSpan(row.length)]
+              ),
+              children: slotNode(slot.name)
+            },
+            slot.name
+          ))
+        },
+        row.map((s) => s.name).join("|") || rowIndex
+      )),
+      unplacedFields.map((field) => /* @__PURE__ */ jsx(Fragment, { children: renderDeclaredField(field) }, field.name))
+    ] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+      builtInFields.email,
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-[var(--spacing-system-m)]", children: [
+        builtInFields.firstName,
+        builtInFields.lastName
+      ] }),
+      supportedFields.map((field) => /* @__PURE__ */ jsx(Fragment, { children: renderDeclaredField(field) }, field.name))
+    ] }),
+    consent && /* @__PURE__ */ jsx(
+      CheckboxBlock,
+      {
+        id: "ms-host-consent",
+        checked: consented,
+        onCheckedChange: (v) => {
+          setConsented(v);
+          if (v) setConsentError(null);
+        },
+        disabled: isSubmitting,
+        error: consentError ?? void 0,
+        label: consent.label,
+        description: consent.description
+      }
+    ),
     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__ */ jsx(FieldWrapper, { error: errors.legalConsentResponses?.message, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xs)] rounded-md border border-ods-border p-[var(--spacing-system-m)]", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: legalConsent.processingConsentText }),
-      legalConsent.communicationConsentText && /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: legalConsent.communicationConsentText }),
+    /* @__PURE__ */ jsx(FieldWrapper, { error: errors.legalConsentResponses?.message, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xs)]", children: [
       /* @__PURE__ */ jsx(
         Controller,
         {
           control,
           name: "legalConsentResponses",
-          render: ({ field: rhf }) => /* @__PURE__ */ jsx(Fragment, { children: legalConsent.communicationConsentCheckboxes.map((box) => {
+          render: ({ field: rhf }) => /* @__PURE__ */ jsx(Fragment2, { children: legalConsent.communicationConsentCheckboxes.map((box, index) => {
             const responses = rhf.value ?? [];
             const current = responses.find((r) => r.communicationTypeId === box.communicationTypeId);
-            return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
+            return (
+              // The design system's consent row (`checkbox-block`, the
+              // same block the waitlist form uses): box, label, caption
+              // in one bordered row. GDPR surface — HubSpot's copy is
+              // rendered VERBATIM, never edited. The processing statement
+              // rides as the caption of the FIRST row, once: it describes
+              // the consent as a whole, not each channel.
               /* @__PURE__ */ jsx(
-                Checkbox,
+                CheckboxBlock,
                 {
                   id: `ms-consent-${box.communicationTypeId}`,
                   checked: current?.consented ?? false,
                   onCheckedChange: (v) => rhf.onChange(
                     responses.map(
-                      (r) => r.communicationTypeId === box.communicationTypeId ? { ...r, consented: v === true } : r
+                      (r) => r.communicationTypeId === box.communicationTypeId ? { ...r, consented: v } : r
                     )
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(Label, { htmlFor: `ms-consent-${box.communicationTypeId}`, children: box.label })
-            ] }, box.communicationTypeId);
+                  ),
+                  label: box.label,
+                  description: index === 0 ? legalConsent.processingConsentText : void 0
+                },
+                box.communicationTypeId
+              )
+            );
           }) })
         }
       ),
+      legalConsent.communicationConsentText && /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: legalConsent.communicationConsentText }),
       legalConsent.privacyPolicyText && /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: legalConsent.privacyPolicyText })
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsx(Button, { type: "submit", loading: isSubmitting, disabled: isSubmitting, children: "Confirm Booking" }) })
+    footerNote ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-[var(--spacing-system-m)]", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: footerNote }),
+      submitButton
+    ] }) : /* @__PURE__ */ jsx("div", { className: "flex", children: submitButton })
+  ] });
+}
+function BookingFormSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-[var(--spacing-system-l)] p-[var(--spacing-system-l)] lg:p-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-[var(--spacing-system-m)] md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-[4.75rem] w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-[4.75rem] w-full" })
+    ] }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-[4.75rem] w-full" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-[7.75rem] w-full" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-[4.25rem] w-full" }),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-40" }) })
   ] });
 }
 
@@ -542,6 +677,7 @@ function SchedulerContextPanel({
   onBack,
   backLabel = "Back",
   locked = false,
+  fixedDuration = false,
   showTimezone = true,
   className
 }) {
@@ -585,8 +721,9 @@ function SchedulerContextPanel({
               " hosts on this calendar"
             ] })
           ] }),
-          locked || durationsMs.length <= 1 ? (
-            // Post-selection, or a link that offers one length: a static line,
+          locked || fixedDuration || durationsMs.length <= 1 ? (
+            // Post-selection, a fixed-length flow, 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__ */ jsxs3("p", { className: "shrink-0 text-ods-text-secondary text-h6", children: [
               formatDurationCompact(selectedDurationMs / 1e3),
@@ -596,7 +733,7 @@ function SchedulerContextPanel({
         ] }),
         title && /* @__PURE__ */ jsx3("p", { className: "text-ods-text-primary text-h3", children: title }),
         description && /* @__PURE__ */ jsx3("p", { className: "text-ods-text-secondary text-h6", children: description }),
-        !locked && durationsMs.length > 1 && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-[var(--spacing-system-xxs)]", children: [
+        !locked && !fixedDuration && durationsMs.length > 1 && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-[var(--spacing-system-xxs)]", children: [
           /* @__PURE__ */ jsx3("p", { className: FIELD_LABEL_CLASS, children: "Duration" }),
           /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-[var(--spacing-system-xs)]", children: durationsMs.map((ms) => /* @__PURE__ */ jsx3(
             Button,
@@ -639,7 +776,7 @@ function SchedulerContextPanel({
 // src/components/meeting-scheduler/slot-picker.tsx
 import { ChevronRight } from "lucide-react";
 import { useCallback as useCallback2, useMemo as useMemo3 } from "react";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } 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)
@@ -750,7 +887,7 @@ function SlotPickerSkeleton({ monthOffset = 0 }) {
   ] });
 }
 function TimeChipsSkeleton() {
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
     /* @__PURE__ */ jsx4("div", { className: COLUMN_HEADING_CLASS, children: /* @__PURE__ */ jsx4(Skeleton, { className: "inline-block h-4 w-40 align-middle" }) }),
     /* @__PURE__ */ jsx4("div", { className: CHIP_GRID_CLASS, children: Array.from({ length: 16 }, (_, i) => (
       // h-11 md:h-12 — the loaded chip's own default-size height.
@@ -767,7 +904,8 @@ function SlotPicker({
   onSelectSlot,
   selectedDay,
   onSelectDay,
-  isLoading = false
+  isLoading = false,
+  isSubmitting = false
 }) {
   const slotsByDay = useMemo3(() => {
     const map = /* @__PURE__ */ new Map();
@@ -801,7 +939,7 @@ function SlotPicker({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx4("div", { className: cn(COLUMN_STACK, COLUMN_BOX, "min-w-0 md:flex-1"), children: isLoading ? /* @__PURE__ */ jsx4(TimeChipsSkeleton, {}) : selectedDay ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx4("div", { className: cn(COLUMN_STACK, COLUMN_BOX, "min-w-0 md:flex-1"), children: isLoading ? /* @__PURE__ */ jsx4(TimeChipsSkeleton, {}) : selectedDay ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
       /* @__PURE__ */ jsx4("p", { className: COLUMN_HEADING_CLASS, children: new Intl.DateTimeFormat(void 0, {
         weekday: "long",
         month: "long",
@@ -813,7 +951,12 @@ function SlotPicker({
           Button,
           {
             variant: isSelected ? void 0 : "outline",
-            onClick: () => onSelectSlot(ms),
+            disabled: isSubmitting,
+            loading: isSubmitting && isSelected,
+            onClick: () => {
+              if (isSubmitting) return;
+              onSelectSlot(ms);
+            },
             className: CHIP_CLASS,
             children: timeLabelInZone(ms, timezone)
           },
@@ -849,7 +992,7 @@ function SlotPicker({
 
 // src/components/meeting-scheduler/directory.tsx
 import { ChevronRight as ChevronRight2 } from "lucide-react";
-import { useEffect, useMemo as useMemo4, useState as useState2 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo4, useState as useState3 } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function useNextAvailableLabel(ms) {
   const hydrated = useIsHydrated();
@@ -926,11 +1069,11 @@ function MeetingSchedulerDirectory({
   contactHref,
   className
 }) {
-  const [data, setData] = useState2(initialData);
-  const [isLoading, setIsLoading] = useState2(initialData === null);
-  const [error, setError] = useState2(null);
-  const [page, setPage] = useState2(1);
-  useEffect(() => {
+  const [data, setData] = useState3(initialData);
+  const [isLoading, setIsLoading] = useState3(initialData === null);
+  const [error, setError] = useState3(null);
+  const [page, setPage] = useState3(1);
+  useEffect2(() => {
     if (initialData !== null) return void 0;
     const controller = new AbortController();
     let active = true;
@@ -1019,16 +1162,18 @@ var CONTEXT_PANEL_CLASS = "p-[var(--spacing-system-l)] shrink-0 lg:w-[280px] bor
 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 MEETING_SCHEDULER_DETAILS_FIRST_H = "md:h-[39.875rem]";
 var CARD_CLASS = cn(
   "overflow-hidden rounded-md border border-ods-border bg-ods-card",
-  "md:flex md:flex-col",
-  MEETING_SCHEDULER_H
+  "md:flex md:flex-col"
+  // The height is NOT baked in any more: it is chosen per flow at each render
+  // site (`flowHeight`), because details-first needs a taller box and both
+  // constants are module scope.
 );
 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(
   "flex flex-col items-start gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-lf)]",
-  "md:justify-center md:overflow-y-auto",
-  MEETING_SCHEDULER_H
+  "md:justify-center md:overflow-y-auto"
 );
 function isNativelyBookable(availability) {
   if (!availability.formFields.every(isSupportedFormField)) return false;
@@ -1050,7 +1195,9 @@ function HubSpotMeetingScheduler({
   fallbackUrl,
   onBack,
   onBooked,
-  className
+  className,
+  flow = "slot-first",
+  detailsForm: DetailsForm = BookingForm
 }) {
   const {
     availability,
@@ -1063,8 +1210,9 @@ function HubSpotMeetingScheduler({
     book,
     isSubmitting
   } = useMeetingBooking({ meetingId, apiBaseUrl, initialAvailability });
+  const detailsFirst = flow === "details-first";
   const hydrated = useIsHydrated();
-  const [pickedTimezone, setTimezone] = useState3(null);
+  const [pickedTimezone, setTimezone] = useState4(null);
   const resolvedLocalTimezone = useMemo5(() => {
     if (!hydrated) return null;
     try {
@@ -1074,26 +1222,29 @@ function HubSpotMeetingScheduler({
     }
   }, [hydrated]);
   const timezone = pickedTimezone ?? displayTimezone ?? resolvedLocalTimezone;
-  const [step, setStep] = useState3("slot");
-  const [pickedDurationMs, setDurationMs] = useState3(null);
-  const [pickedDay, setSelectedDay] = useState3(null);
-  const [selectedSlot, setSelectedSlot] = useState3(null);
-  const [confirmation, setConfirmation] = useState3(null);
-  const [bookingError, setBookingError] = useState3(null);
+  const [step, setStep] = useState4(detailsFirst ? "details" : "slot");
+  const [stash, setStash] = useState4(null);
+  const formOnly = detailsFirst && step === "details";
+  const [pickedDurationMs, setDurationMs] = useState4(null);
+  const [pickedDay, setSelectedDay] = useState4(null);
+  const [selectedSlot, setSelectedSlot] = useState4(null);
+  const [confirmation, setConfirmation] = useState4(null);
+  const [bookingError, setBookingError] = useState4(null);
   const { honeypotInputProps, getSignals, resetSignals } = useHumanitySignals();
   const { toast } = useToast();
   const autoAdvanceCount = useRef2(0);
-  const [machineFor, setMachineFor] = useState3(meetingId);
+  const [machineFor, setMachineFor] = useState4(meetingId);
   if (machineFor !== meetingId) {
     setMachineFor(meetingId);
-    setStep("slot");
+    setStep(detailsFirst ? "details" : "slot");
     setDurationMs(null);
     setSelectedDay(null);
     setSelectedSlot(null);
     setConfirmation(null);
     setBookingError(null);
+    setStash(null);
   }
-  useEffect2(() => {
+  useEffect3(() => {
     autoAdvanceCount.current = 0;
   }, [meetingId]);
   const durations = useMemo5(() => availability?.durationsMs ?? [], [availability?.durationsMs]);
@@ -1116,7 +1267,7 @@ function HubSpotMeetingScheduler({
     if (pickedDay && dayKeys.has(pickedDay)) return pickedDay;
     return dayKeyInZone(inMonth[0], timezone);
   }, [step, timezone, slots, pickedDay, monthOffset]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (step === "slot" && availability && !isFetchingAvailability && durationMs != null && slots.length === 0 && availability.hasMore && autoAdvanceCount.current < 3) {
       autoAdvanceCount.current += 1;
       setMonthOffset(monthOffset + 1);
@@ -1126,10 +1277,30 @@ function HubSpotMeetingScheduler({
     setStep("slot");
     setBookingError(null);
   }, []);
+  const backToDetails = useCallback3(() => {
+    setStep("details");
+    setBookingError(null);
+  }, []);
+  const stashDetails = useCallback3(
+    (payload) => {
+      setBookingError(null);
+      setStash({ payload, signals: getSignals() });
+      setStep("slot");
+      autoAdvanceCount.current = 0;
+      void refetchAvailability();
+      return Promise.resolve();
+    },
+    [getSignals, refetchAvailability]
+  );
   const handleSubmit = useCallback3(
     async (payload) => {
+      const priorError = bookingError;
       setBookingError(null);
       const result = await book(payload);
+      if (!result.ok && result.message === "Already submitting") {
+        setBookingError(priorError);
+        return;
+      }
       if (result.ok && result.confirmation) {
         setConfirmation(result.confirmation);
         setStep("confirmed");
@@ -1141,8 +1312,10 @@ function HubSpotMeetingScheduler({
       if (code === "SLOT_TAKEN") {
         setSelectedSlot(null);
         setStep("slot");
-        resetSignals();
+        if (!detailsFirst) resetSignals();
         void refetchAvailability();
+      } else if (detailsFirst && (code === "VALIDATION" || code === "INVALID_EMAIL")) {
+        setStep("details");
       } else {
         toast({
           variant: "error",
@@ -1151,29 +1324,31 @@ function HubSpotMeetingScheduler({
         });
       }
     },
-    [book, onBooked, refetchAvailability, resetSignals, toast]
+    [book, bookingError, detailsFirst, onBooked, refetchAvailability, resetSignals, toast]
   );
   const escapeHatch = fallbackUrl ? /* @__PURE__ */ jsx6(Button, { variant: "outline", size: "small-legacy", href: fallbackUrl, openInNewTab: true, children: "Open in HubSpot" }) : null;
+  const flowHeight = detailsFirst ? MEETING_SCHEDULER_DETAILS_FIRST_H : MEETING_SCHEDULER_H;
+  const unseededDetailsFirstFailure = detailsFirst && step === "details" && !availability && !initialAvailability && !hydrated;
+  const degradedCard = /* @__PURE__ */ jsxs6("div", { className: cn(CARD_DEGRADED_CLASS, flowHeight, className), children: [
+    /* @__PURE__ */ jsx6("p", { className: "text-ods-text-secondary text-h6", children: "We couldn't load available call times. Please try again shortly." }),
+    escapeHatch
+  ] });
+  if (unseededDetailsFirstFailure) return degradedCard;
   if (isLoadingAvailability && !availability) {
-    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 }) })
+    return /* @__PURE__ */ jsx6("div", { className: cn(CARD_CLASS, flowHeight, formOnly && "bg-ods-bg", className), children: /* @__PURE__ */ jsxs6("div", { className: CARD_INNER_CLASS, children: [
+      !formOnly && /* @__PURE__ */ jsx6(ContextPanelSkeleton, { onBack, className: CONTEXT_PANEL_CLASS }),
+      /* @__PURE__ */ jsx6("div", { className: ACTION_PANEL_CLASS, children: detailsFirst && step === "details" ? /* @__PURE__ */ jsx6(BookingFormSkeleton, {}) : /* @__PURE__ */ jsx6(SlotPickerSkeleton, { monthOffset }) })
     ] }) });
   }
-  if (availabilityError || !availability) {
-    return /* @__PURE__ */ jsxs6("div", { className: cn(CARD_DEGRADED_CLASS, className), children: [
-      /* @__PURE__ */ jsx6("p", { className: "text-ods-text-secondary text-h6", children: "We couldn't load available call times. Please try again shortly." }),
-      escapeHatch
-    ] });
-  }
+  if (availabilityError || !availability) return degradedCard;
   if (!isNativelyBookable(availability)) {
-    return /* @__PURE__ */ jsxs6("div", { className: cn(CARD_DEGRADED_CLASS, className), children: [
+    return /* @__PURE__ */ jsxs6("div", { className: cn(CARD_DEGRADED_CLASS, flowHeight, className), children: [
       /* @__PURE__ */ jsx6("p", { className: "text-ods-text-secondary text-h6", children: "This meeting type is booked directly on HubSpot." }),
       escapeHatch
     ] });
   }
-  return /* @__PURE__ */ jsx6("div", { className: cn(CARD_CLASS, className), children: /* @__PURE__ */ jsxs6("div", { className: CARD_INNER_CLASS, children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx6("div", { className: cn(CARD_CLASS, flowHeight, formOnly && "bg-ods-bg", className), children: /* @__PURE__ */ jsxs6("div", { className: CARD_INNER_CLASS, children: [
+    !formOnly && /* @__PURE__ */ jsx6(
       SchedulerContextPanel,
       {
         hosts: shownHosts,
@@ -1185,18 +1360,24 @@ function HubSpotMeetingScheduler({
           setDurationMs(ms);
           setSelectedDay(null);
           setSelectedSlot(null);
-          if (step === "details") setStep("slot");
+          if (!detailsFirst && step === "details") setStep("slot");
         },
         timezone,
         onTimezoneChange: setTimezone,
-        onBack: step === "details" ? backToSlot : onBack,
-        locked: step !== "slot",
+        onBack: detailsFirst ? step === "slot" ? backToDetails : onBack : step === "details" ? backToSlot : onBack,
+        locked: detailsFirst ? step === "confirmed" || isSubmitting : step !== "slot",
         showTimezone: step !== "confirmed",
+        fixedDuration: detailsFirst,
         className: CONTEXT_PANEL_CLASS
       }
     ),
-    /* @__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-ods-text-primary text-h4", 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" && (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.
+      durations.length > 0
+    ) : durationMs != null && selectedSlot != null && timezone) ? /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-1 flex-col gap-[var(--spacing-system-m)]", PANEL_STEP_CLASS), children: [
+      selectedSlot != null && durationMs != null && timezone != null && /* @__PURE__ */ jsxs6("p", { className: "text-ods-text-primary text-h4", children: [
         new Intl.DateTimeFormat(void 0, {
           timeZone: timezone,
           weekday: "long",
@@ -1211,15 +1392,19 @@ function HubSpotMeetingScheduler({
         formatDurationCompact(durationMs / 1e3)
       ] }),
       /* @__PURE__ */ jsx6(
-        BookingForm,
+        DetailsForm,
         {
           availability,
           meetingId,
-          startTimeMs: selectedSlot,
-          durationMs,
+          startTimeMs: selectedSlot ?? void 0,
+          durationMs: durationMs ?? void 0,
           timezone,
+          deferSlot: detailsFirst,
+          submitLabel: detailsFirst ? "Continue" : void 0,
+          footerNote: detailsFirst ? "Next step: pick a slot that works. Calendar invite lands right after." : void 0,
+          initialValues: detailsFirst ? stash?.payload : void 0,
           isSubmitting,
-          onSubmit: handleSubmit,
+          onSubmit: detailsFirst ? stashDetails : handleSubmit,
           honeypotInputProps,
           getSignals
         }
@@ -1250,12 +1435,31 @@ function HubSpotMeetingScheduler({
             },
             selectedSlot,
             onSelectSlot: (ms) => {
+              if (!detailsFirst) {
+                setSelectedSlot(ms);
+                setStep("details");
+                return;
+              }
+              if (isSubmitting || !stash) return;
               setSelectedSlot(ms);
-              setStep("details");
+              void handleSubmit({
+                ...stash.payload,
+                ...stash.signals,
+                meetingId,
+                // `ms`, NOT `selectedSlot` — the setState above has not
+                // committed inside this handler, so state holds null on
+                // the first booking and the PREVIOUS slot on a retry.
+                startTimeMs: ms,
+                // Live values: both stay editable after Continue, so the
+                // copies frozen at that point can be stale.
+                durationMs,
+                timezone
+              });
             },
             selectedDay,
             onSelectDay: setSelectedDay,
-            isLoading: isLoadingAvailability
+            isLoading: isLoadingAvailability,
+            isSubmitting: detailsFirst ? isSubmitting : void 0
           }
         )
       ) : durations.length === 0 && !isFetchingAvailability ? (
@@ -1276,7 +1480,10 @@ function HubSpotMeetingScheduler({
   ] }) });
 }
 export {
+  BookingForm,
+  BookingFormSkeleton,
   HubSpotMeetingScheduler,
+  MEETING_SCHEDULER_DETAILS_FIRST_H,
   MEETING_SCHEDULER_H,
   MeetingSchedulerDirectory,
   MeetingSchedulerDirectoryRowSkeleton