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

package/dist/components/meeting-scheduler/booking-form.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Fragment as Fragment2, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment2, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { useRescuedForm } from "../../hooks/use-rescued-form.js";
 import { useToast } from "../../hooks/use-toast.js";
@@ -13,15 +13,17 @@ import {
   withDeniedEmailDomains,
   emailDomainDenied,
   MULTI_VALUE_SEPARATOR,
+  bookingFormAsks,
   normalizeFormFields,
   splitMultiValue
 } from "../../schemas/meeting-booking-schema.js";
 import { cn } from "../../utils/cn.js";
 import { HUBSPOT_DO_NOT_COLLECT_FORM_PROPS } from "../../utils/hubspot-collected-forms.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import {
   Button,
   FieldWrapper,
+  fieldLabelId,
   Input,
   Textarea,
   Label,
@@ -33,9 +35,13 @@ import {
   Checkbox,
   CheckboxBlock,
   RadioGroup,
-  RadioGroupItem
+  RadioGroupItem,
+  ToggleGroup,
+  ToggleGroupItem
 } from "../ui/index.js";
 import { HoneypotField } from "../ui/honeypot-field.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
+import { TOGGLE_SIZE_CLASS } from "../ui/toggle.js";
 const FORM_STACK = "flex flex-col gap-[var(--spacing-system-l)]";
 const ROW_GRID = "grid grid-cols-2 gap-x-[var(--spacing-system-m)] gap-y-[var(--spacing-system-lf)] content-md:grid-cols-4";
 const HOST_CONSENT_KEY = "hostConsent";
@@ -46,7 +52,6 @@ const SPAN_CLASS = {
   3: "content-md:col-span-3",
   4: "content-md:col-span-4"
 };
-const FIELD_SKELETON_CLASS = "h-[4.75rem] w-full";
 const DEFAULT_SUBMIT_LABEL = "Confirm Booking";
 const FOOTER_ROW_CLASS = "flex flex-wrap items-center justify-between gap-[var(--spacing-system-m)]";
 const FOOTER_BARE_CLASS = "flex";
@@ -59,7 +64,7 @@ const evenSpan = (count, index) => {
 };
 const slotColumnClass = (row, slot, index) => cn(row.length === 2 ? "col-span-1" : "col-span-2", SPAN_CLASS[slot.span ?? evenSpan(row.length, index)]);
 const placeholderFor = (field) => field.placeholder ?? fieldTypeSpec(field.type).placeholder?.(field);
-const optionLabel = (field, value) => field.optionLabels?.[value] ?? value;
+const formFieldOptionLabel = (field, value) => field.optionLabels?.[value] ?? value;
 const trimmed = (v) => String(v ?? "").trim();
 const canonicalNumber = (v) => {
   const s = String(v ?? "").trim();
@@ -151,7 +156,7 @@ const FIELD_CONTROLS = {
             children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select\u2026" })
           }
         ),
-        /* @__PURE__ */ jsx(SelectContent, { children: (field.options ?? []).map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt, children: optionLabel(field, opt) }, opt)) })
+        /* @__PURE__ */ jsx(SelectContent, { children: (field.options ?? []).map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt, children: formFieldOptionLabel(field, opt) }, opt)) })
       ] })
     }
   ),
@@ -169,7 +174,7 @@ const FIELD_CONTROLS = {
           "aria-invalid": Boolean(error),
           children: (field.options ?? []).map((opt) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
             /* @__PURE__ */ jsx(RadioGroupItem, { id: `${id}-${opt}`, value: opt }),
-            /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-${opt}`, children: optionLabel(field, opt) })
+            /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-${opt}`, children: formFieldOptionLabel(field, opt) })
           ] }, opt))
         }
       )
@@ -199,7 +204,7 @@ const FIELD_CONTROLS = {
                 "aria-invalid": Boolean(error)
               }
             ),
-            /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-${opt}`, children: optionLabel(field, opt) })
+            /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-${opt}`, children: formFieldOptionLabel(field, opt) })
           ] }, opt)) });
         }
       }
@@ -228,8 +233,60 @@ const FIELD_CONTROLS = {
     }
   )
 };
+const CHIP_FIELD_TYPES = /* @__PURE__ */ new Set(["select", "radio"]);
+const CHIP_MAX_OPTIONS = 6;
+function drawnAsChips(field, display) {
+  if (display !== "chips" || !CHIP_FIELD_TYPES.has(field.type)) return false;
+  const count = field.options?.length ?? 0;
+  return count > 0 && count <= CHIP_MAX_OPTIONS;
+}
+const CHIP_ROW_CLASS = "flex flex-wrap justify-start gap-[var(--spacing-system-xsf)]";
+const chipsControl = ({ field, id, registerName, error, control }) => /* @__PURE__ */ jsx(
+  Controller,
+  {
+    control,
+    name: registerName,
+    render: ({ field: rhf }) => /* @__PURE__ */ jsx(
+      ToggleGroup,
+      {
+        id,
+        type: "single",
+        variant: "choice",
+        value: rhf.value ?? "",
+        onValueChange: (value) => {
+          if (value) rhf.onChange(value);
+        },
+        ref: (group) => rhf.ref(group && { focus: () => group.querySelector("button")?.focus() }),
+        onBlur: rhf.onBlur,
+        "aria-labelledby": fieldLabelId(id),
+        "aria-required": field.required || void 0,
+        "aria-invalid": Boolean(error),
+        className: CHIP_ROW_CLASS,
+        children: (field.options ?? []).map((opt) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: opt, className: cn(error && "data-[state=off]:border-ods-error"), children: formFieldOptionLabel(field, opt) }, opt))
+      }
+    )
+  }
+);
 const builtInId = (name) => `ms-${name.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}`;
-function BookingForm({
+function BookingForm(props) {
+  const inScope = useLoadingScope();
+  const { availability } = props;
+  if (inScope || props.loading || !availability) {
+    return /* @__PURE__ */ jsx(
+      BookingFormSkeleton,
+      {
+        fieldRows: props.fieldRows,
+        optionalFields: props.optionalFields,
+        fieldCopy: props.fieldCopy,
+        consent: props.consent,
+        footerNote: props.footerNote,
+        submitLabel: props.submitLabel
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(BookingFormBody, { ...props, availability });
+}
+function BookingFormBody({
   availability,
   meetingId,
   startTimeMs,
@@ -237,9 +294,11 @@ function BookingForm({
   timezone,
   deferSlot = false,
   initialValues,
+  answers,
   submitLabel,
   footerNote,
   fieldRows,
+  optionalFields,
   formId,
   hideSubmit = false,
   onValidityChange,
@@ -253,7 +312,10 @@ function BookingForm({
   rescue = null
 }) {
   const { formFields, legalConsent } = availability;
-  const supportedFields = useMemo(() => normalizeFormFields(formFields), [formFields]);
+  const supportedFields = useMemo(
+    () => normalizeFormFields(formFields).filter((field) => bookingFormAsks(field, optionalFields)),
+    [formFields, optionalFields]
+  );
   const schema = useMemo(
     () => withDeniedEmailDomains(makeDeferredBookingSchema(supportedFields, legalConsent), deniedEmailDomains),
     [supportedFields, legalConsent, deniedEmailDomains]
@@ -315,6 +377,20 @@ function BookingForm({
       { shouldDirty: false }
     );
   }, [consentDefaults, priorConsents, getValues, setValue]);
+  const written = useRef({});
+  useEffect(() => {
+    const names = /* @__PURE__ */ new Set([...Object.keys(answers ?? {}), ...Object.keys(written.current)]);
+    for (const name of names) {
+      if (!supportedFields.some((field) => field.name === name)) continue;
+      const next = answers?.[name] ?? "";
+      const current = getValues("formFields")?.[name] ?? "";
+      if (current !== "" && current !== written.current[name]) continue;
+      if (next) written.current[name] = next;
+      else delete written.current[name];
+      if (current === next) continue;
+      setValue(`formFields.${name}`, next, { shouldValidate: next !== "" });
+    }
+  }, [answers, supportedFields, getValues, setValue]);
   const rescueFields = useMemo(
     () => [...BUILT_IN_BOOKING_FIELDS.map((field) => field.name), ...supportedFields.map((field) => field.name)],
     [supportedFields]
@@ -373,7 +449,7 @@ function BookingForm({
         htmlFor: where.id,
         required: shown.required,
         error: where.error,
-        children: FIELD_CONTROLS[shown.type]({
+        children: (drawnAsChips(shown, copy?.display) ? chipsControl : FIELD_CONTROLS[shown.type])({
           field: shown,
           id: where.id,
           registerName: where.registerName,
@@ -493,24 +569,49 @@ function BookingForm({
 }
 function BookingFormSkeleton({
   fieldRows,
+  optionalFields,
+  fieldCopy,
   consent,
-  footerNote
+  footerNote,
+  submitLabel = DEFAULT_SUBMIT_LABEL
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex-1", FORM_STACK), children: [
-    skeletonRows(fieldRows ?? DEFAULT_FIELD_ROWS).map((row) => /* @__PURE__ */ jsx("div", { className: ROW_GRID, children: row.map((slot, slotIndex) => /* @__PURE__ */ jsx(
-      UnifiedSkeleton,
-      {
-        className: cn(FIELD_SKELETON_CLASS, slotColumnClass(row, slot, slotIndex))
-      },
-      slot.name
-    )) }, row.map((s) => s.name).join("|"))),
-    !fieldRows && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[7.75rem] w-full" }),
-    consent && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[4.25rem] w-full" }),
-    footerNote ? /* @__PURE__ */ jsxs("div", { className: FOOTER_ROW_CLASS, children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 min-w-40 flex-1" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn("h-12 w-full", SUBMIT_WIDE_CLASS) })
-    ] }) : /* @__PURE__ */ jsx("div", { className: FOOTER_BARE_CLASS, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-40" }) })
-  ] });
+  const consentId = useId();
+  const submitButton = /* @__PURE__ */ jsx(Button, { type: "button", tabIndex: -1, className: footerNote ? SUBMIT_WIDE_CLASS : void 0, children: submitLabel });
+  return (
+    // Inert: the fields are the form's own controls, drawn so each is its loaded size; none takes focus.
+    /* @__PURE__ */ jsxs("div", { className: cn("flex-1", FORM_STACK), "aria-hidden": true, inert: true, children: [
+      skeletonRows(fieldRows ?? DEFAULT_FIELD_ROWS, optionalFields).map((row) => /* @__PURE__ */ jsx("div", { className: ROW_GRID, children: row.map((slot, slotIndex) => /* @__PURE__ */ jsx(
+        FieldSkeleton,
+        {
+          name: slot.name,
+          fieldCopy,
+          className: slotColumnClass(row, slot, slotIndex)
+        },
+        slot.name
+      )) }, row.map((s) => s.name).join("|"))),
+      !fieldRows && // An empty label keeps the field's own frame (`FieldWrapper` draws no label for it); the bar stands for it.
+      /* @__PURE__ */ jsxs(FieldWrapper, { label: "", children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "mb-1 w-40" }),
+        /* @__PURE__ */ jsx(Textarea, { tabIndex: -1 })
+      ] }),
+      consent && /* @__PURE__ */ jsx(
+        CheckboxBlock,
+        {
+          id: consentId,
+          checked: false,
+          onCheckedChange: () => {
+          },
+          required: true,
+          label: consent === true ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-64 max-w-full" }) : consent.label,
+          description: consent === true ? void 0 : consent.description
+        }
+      ),
+      footerNote ? /* @__PURE__ */ jsxs("div", { className: FOOTER_ROW_CLASS, children: [
+        /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: footerNote }),
+        submitButton
+      ] }) : /* @__PURE__ */ jsx("div", { className: FOOTER_BARE_CLASS, children: submitButton })
+    ] })
+  );
 }
 function normalizeFieldRows(fieldRows, resolves = () => true) {
   const seen = /* @__PURE__ */ new Set();
@@ -529,13 +630,32 @@ function normalizeFieldRows(fieldRows, resolves = () => true) {
   const unplacedBuiltIns = BUILT_IN_BOOKING_FIELDS.filter((f) => !named.has(f.name));
   return { rows, unplacedBuiltIns, named };
 }
-function skeletonRows(fieldRows) {
-  const { rows, unplacedBuiltIns } = normalizeFieldRows(fieldRows);
+function skeletonRows(fieldRows, optionalFields) {
+  const asks = (name) => !optionalFields || BUILT_IN_BOOKING_FIELDS.some((f) => f.name === name) || optionalFields.includes(name);
+  const { rows, unplacedBuiltIns } = normalizeFieldRows(fieldRows, asks);
   return [...rows, ...unplacedBuiltIns.map((f) => [{ name: f.name }])];
 }
+function FieldSkeleton({
+  name,
+  fieldCopy,
+  className
+}) {
+  const builtIn = BUILT_IN_BOOKING_FIELDS.find((f) => f.name === name);
+  const copy = fieldCopy?.[name];
+  const label = builtIn ? copy?.label ?? builtIn.label : copy?.label;
+  return (
+    // An empty label keeps the field's own frame; a read label is the bar under it.
+    /* @__PURE__ */ jsxs(FieldWrapper, { label: label ?? "", required: builtIn?.required, className, children: [
+      label === void 0 && /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "mb-1 w-32" }),
+      !builtIn && copy?.display === "chips" ? /* @__PURE__ */ jsx("div", { className: CHIP_ROW_CLASS, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { variant: "default", className: cn(TOGGLE_SIZE_CLASS.default, "w-24 rounded-md") }) }) : /* @__PURE__ */ jsx(Input, { tabIndex: -1 })
+    ] })
+  );
+}
 export {
   BookingForm,
   BookingFormSkeleton,
+  CHIP_MAX_OPTIONS,
   DEFAULT_SUBMIT_LABEL,
-  evenSpan
+  evenSpan,
+  formFieldOptionLabel
 };

package/dist/components/meeting-scheduler/context-panel.d.ts

@@ -46,16 +46,32 @@ export interface SchedulerContextPanelProps {
      *  right up to the confirmation — where there is nothing left to re-read. */
     showTimezone?: boolean;
     className?: string;
+    /** The meeting is still being read: the panel draws its own skeleton, as in a loading scope. */
+    loading?: boolean;
 }
 /**
  * Same-footprint skeleton — swaps with the loaded panel with zero shift.
  * STATIC labels ("Duration", "Timezone") render REAL; only data-driven
  * content (host identity, duration chips, the zone value) is skeleton.
  */
-export declare function ContextPanelSkeleton({ className, onBack, backLabel, }: {
+export declare function ContextPanelSkeleton({ className, onBack, backLabel, title, description, durations, timezone, }: {
     className?: string;
     onBack?: () => void;
     backLabel?: string;
+    /** The loaded panel has the meeting's title line (a bar of it). Default true: a scheduling link has a title. */
+    title?: boolean;
+    /** The loaded panel has the meeting's description line (a bar of it). Default true. */
+    description?: boolean;
+    /**
+     * How many duration chips the loaded panel offers: more than 1 draws the "Duration" row, otherwise the static
+     * duration line beside the host (every link states its length, as chips or as that line). Default 0.
+     */
+    durations?: number;
+    /**
+     * The timezone field, as the loaded panel draws it: `shown`, `wide` (only from `lg`, after a slot is chosen) or
+     * `hidden` (the confirmation). Default `shown`.
+     */
+    timezone?: 'shown' | 'wide' | 'hidden';
 }): import("react").JSX.Element;
-export declare function SchedulerContextPanel({ hosts, title, description, durationsMs, selectedDurationMs, onSelectDuration, timezone, onTimezoneChange, onBack, backLabel, locked, disabled, showTimezone, className, }: SchedulerContextPanelProps): import("react").JSX.Element;
+export declare function SchedulerContextPanel({ hosts, title, description, durationsMs, selectedDurationMs, onSelectDuration, timezone, onTimezoneChange, onBack, backLabel, locked, disabled, showTimezone, className, loading, }: SchedulerContextPanelProps): import("react").JSX.Element;
 //# sourceMappingURL=context-panel.d.ts.map

package/dist/components/meeting-scheduler/context-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-panel.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/context-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAQxE;;;;;;;;;;;;;;;;;;GAkBG;AAEH,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,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;gFAC4E;IAC5E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;2EAGuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;2EACuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;iFAE6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+CD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,MAAM,EACN,SAAkB,GACnB,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA4BA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,SAAkB,EAClB,MAAc,EACd,QAAgB,EAChB,YAAmB,EACnB,SAAS,GACV,EAAE,0BAA0B,+BAqG5B"}
+{"version":3,"file":"context-panel.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/context-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAWxE;;;;;;;;;;;;;;;;;;GAkBG;AAEH,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,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;gFAC4E;IAC5E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;2EAGuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;2EACuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;iFAE6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gGAAgG;IAChG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA0DD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,MAAM,EACN,SAAkB,EAClB,KAAY,EACZ,WAAkB,EAClB,SAAa,EACb,QAAkB,GACnB,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gHAAgH;IAChH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uFAAuF;IACvF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CACxC,+BA0CA;AAQD,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,SAAkB,EAClB,MAAc,EACd,QAAgB,EAChB,YAAmB,EACnB,SAAS,EACT,OAAe,GAChB,EAAE,0BAA0B,+BAgH5B"}

package/dist/components/meeting-scheduler/context-panel.js

@@ -3,8 +3,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { formatDurationCompact } from "../../utils/format.js";
 import { BackButton } from "../layout/back-button.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { InteractiveSkeleton, 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 PANEL_STACK = "flex flex-col gap-[var(--spacing-system-l)]";
 const IDENTITY_ROW = "flex items-center justify-between gap-[var(--spacing-system-m)] content-lg:flex-col content-lg:items-stretch content-lg:gap-[var(--spacing-system-l)]";
@@ -13,31 +16,50 @@ const STRIP_MAIN = "flex min-w-0 flex-col gap-[var(--spacing-system-l)] content-
 const STRIP_ASIDE = "flex flex-col gap-[var(--spacing-system-xxs)] content-md:w-[280px] content-md:shrink-0 content-lg:w-full";
 const BACK_BUTTON_CLASS = "py-0";
 const FIELD_LABEL_CLASS = "text-h4 text-ods-text-primary";
+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";
+const DURATION_FIELD_CLASS = "flex flex-col gap-[var(--spacing-system-xxs)]";
+const DURATION_CHIPS_CLASS = "flex flex-wrap gap-[var(--spacing-system-xs)]";
+const TIMEZONE_WIDE_ONLY_CLASS = "content-max-lg:hidden";
 function ContextPanelSkeleton({
   className,
   onBack,
-  backLabel = "Back"
+  backLabel = "Back",
+  title = true,
+  description = true,
+  durations = 0,
+  timezone = "shown"
 }) {
   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)] content-lg:flex-none", children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { 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(UnifiedSkeleton, { className: "h-5 w-32" }),
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-24" })
-          ] })
+      /* @__PURE__ */ jsxs("div", { className: STRIP_MAIN, children: [
+        /* @__PURE__ */ jsxs("div", { className: IDENTITY_ROW, 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" })
+            ] })
+          ] }),
+          durations <= 1 && /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-20 shrink-0" })
         ] }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-20 shrink-0" })
-      ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: STRIP_ASIDE, children: [
+        title && /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-3/5" }),
+        description && /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-4/5" }),
+        durations > 1 && /* @__PURE__ */ jsxs("div", { className: DURATION_FIELD_CLASS, children: [
+          /* @__PURE__ */ jsx("p", { className: FIELD_LABEL_CLASS, children: "Duration" }),
+          /* @__PURE__ */ jsx("div", { className: DURATION_CHIPS_CLASS, children: Array.from({ length: durations }, (_, i) => /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "small-legacy", className: "w-16" }, i)) })
+        ] })
+      ] }),
+      timezone !== "hidden" && /* @__PURE__ */ jsxs("div", { className: cn(STRIP_ASIDE, timezone === "wide" && TIMEZONE_WIDE_ONLY_CLASS), children: [
         /* @__PURE__ */ jsx("p", { className: FIELD_LABEL_CLASS, children: "Timezone" }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-full" })
+        /* @__PURE__ */ jsx(AutocompleteSkeleton, {})
       ] })
     ] })
   ] });
 }
+const CONTEXT_PANEL_TYPICAL_DURATIONS = 2;
 function SchedulerContextPanel({
   hosts,
   title,
@@ -52,14 +74,29 @@ function SchedulerContextPanel({
   locked = false,
   disabled = false,
   showTimezone = true,
-  className
+  className,
+  loading = false
 }) {
+  if (useLoadingScope() || loading) {
+    return /* @__PURE__ */ jsx(
+      ContextPanelSkeleton,
+      {
+        onBack,
+        backLabel,
+        title: title !== void 0,
+        description: description !== void 0 && description !== null,
+        durations: locked ? 0 : durationsMs.length || CONTEXT_PANEL_TYPICAL_DURATIONS,
+        timezone: showTimezone ? locked ? "wide" : "shown" : "hidden",
+        className
+      }
+    );
+  }
   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: [
+          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: HOST_ROW_CLASS, children: [
             /* @__PURE__ */ jsx(
               SquareAvatar,
               {
@@ -70,7 +107,7 @@ function SchedulerContextPanel({
                 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 })
             ] })
@@ -85,7 +122,7 @@ function SchedulerContextPanel({
           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-ods-text-secondary text-h6", children: [
+            selectedDurationMs != null && /* @__PURE__ */ jsxs("p", { className: DURATION_LINE_CLASS, children: [
               formatDurationCompact(selectedDurationMs / 1e3),
               " call"
             ] })
@@ -93,9 +130,9 @@ function SchedulerContextPanel({
         ] }),
         title && /* @__PURE__ */ jsx("p", { className: "text-ods-text-primary text-h3", children: title }),
         description && /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: description }),
-        !locked && durationsMs.length > 1 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xxs)]", children: [
+        !locked && durationsMs.length > 1 && /* @__PURE__ */ jsxs("div", { className: DURATION_FIELD_CLASS, 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(
+          /* @__PURE__ */ jsx("div", { className: DURATION_CHIPS_CLASS, children: durationsMs.map((ms) => /* @__PURE__ */ jsx(
             Button,
             {
               variant: selectedDurationMs === ms ? void 0 : "outline",
@@ -114,18 +151,19 @@ function SchedulerContextPanel({
       // 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 && "content-max-lg:hidden"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn(STRIP_ASIDE, locked && TIMEZONE_WIDE_ONLY_CLASS), children: [
         /* @__PURE__ */ jsx("p", { className: FIELD_LABEL_CLASS, children: "Timezone" }),
-        timezone ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           TimezoneSelect,
           {
-            value: timezone,
+            value: timezone ?? null,
+            loading: !timezone,
             disabled,
             onChange: (tz) => {
               if (tz) onTimezoneChange?.(tz);
             }
           }
-        ) : /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-full" })
+        )
       ] })
     ] })
   ] });

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

@@ -14,7 +14,17 @@ export interface MeetingSchedulerDirectoryProps {
     contactHref?: string;
     className?: string;
 }
-/** Same-shell loading row (co-located-skeleton convention). */
+/** Rows per page by default: also the skeleton's row count. */
+export declare const MEETING_DIRECTORY_PAGE_SIZE = 6;
+/**
+ * Same-shell loading row (co-located-skeleton convention): the row's frame, "Next available" and the chevron box
+ * real, the title, subtitle, audience chip, hosts and next time as shapes.
+ */
 export declare function MeetingSchedulerDirectoryRowSkeleton(): import("react").JSX.Element;
+/** The directory while its links are read: `pageSize` row skeletons in the reserved rows area, and the pager. */
+export declare function MeetingSchedulerDirectorySkeleton({ pageSize, className, }: {
+    pageSize?: number;
+    className?: string;
+}): import("react").JSX.Element;
 export declare function MeetingSchedulerDirectory({ apiBaseUrl, initialData, includeAll, pageSize, bookingBasePath, contactHref, className, }: MeetingSchedulerDirectoryProps): import("react").JSX.Element;
 //# sourceMappingURL=directory.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"directory.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/directory.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAkB,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAUnG,MAAM,WAAW,8BAA8B;IAC7C,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gEAAgE;IAChE,WAAW,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC5C,2EAA2E;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2ED,+DAA+D;AAC/D,wBAAgB,oCAAoC,gCAgBnD;AAKD,wBAAgB,yBAAyB,CAAC,EACxC,UAAe,EACf,WAAkB,EAClB,UAAkB,EAClB,QAAY,EACZ,eAAoC,EACpC,WAAW,EACX,SAAS,GACV,EAAE,8BAA8B,+BA4GhC"}
+{"version":3,"file":"directory.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/directory.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAkB,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAYnG,MAAM,WAAW,8BAA8B;IAC7C,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gEAAgE;IAChE,WAAW,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC5C,2EAA2E;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmBD,+DAA+D;AAC/D,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAwE7C;;;GAGG;AACH,wBAAgB,oCAAoC,gCAkBnD;AAED,iHAAiH;AACjH,wBAAgB,iCAAiC,CAAC,EAChD,QAAsC,EACtC,SAAS,GACV,EAAE;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAaA;AAED,wBAAgB,yBAAyB,CAAC,EACxC,UAAe,EACf,WAAkB,EAClB,UAAkB,EAClB,QAAsC,EACtC,eAAoC,EACpC,WAAW,EACX,SAAS,GACV,EAAE,8BAA8B,+BAkGhC"}