@flamingo-stack/openframe-frontend-core 0.0.742 → 0.0.744

package/src/components/meeting-scheduler/booking-form.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Fragment, useEffect, useMemo, useState } from 'react';
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import type { FormEvent, ReactNode, Ref } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import type { Control, Path, UseFormRegister } from 'react-hook-form';
@@ -397,6 +397,16 @@ export interface BookingFormProps {
    * appended full width. Both are deliberate — see `slotNode`/`unplacedFields`.
    */
   fieldRows?: BookingFieldRow[];
+  /** The form element's id, so a host can submit it from a button outside it
+   *  (`<button form={id}>`): the modal layout keeps its actions in a footer
+   *  under the card. */
+  formId?: string;
+  /** Leave the submit button out: the host draws one of its own (see `formId`). */
+  hideSubmit?: boolean;
+  /** Whether the answers would pass validation as they stand, reported on every
+   *  change: a host drawing its own submit keeps it disabled until this says
+   *  true. The form's own button never needs it - its click validates. */
+  onValidityChange?: (valid: boolean) => void;
   /** Per-field display overrides, keyed by field name — see `BookingFieldCopy`. */
   fieldCopy?: Record<string, BookingFieldCopy>;
   /** Email domains this form refuses, with the message it shows — see `DeniedEmailDomains`.
@@ -441,6 +451,9 @@ export function BookingForm({
   submitLabel,
   footerNote,
   fieldRows,
+  formId,
+  hideSubmit = false,
+  onValidityChange,
   fieldCopy,
   deniedEmailDomains,
   consent,
@@ -507,6 +520,19 @@ export function BookingForm({
   const [consentError, setConsentError] = useState<string | null>(null);
   const consentMissing = Boolean(consent) && !consented;
 
+  // Live validity for a host-drawn submit. `watch()` re-renders on every
+  // change; the parse is the same schema the submit runs, so the two can never
+  // disagree. Reported only when asked for, and only when it changes.
+  const watchedValues = watch();
+  const liveValid = onValidityChange ? schema.safeParse(watchedValues).success && !consentMissing : false;
+  const lastValidRef = useRef<boolean | null>(null);
+  useEffect(() => {
+    if (!onValidityChange) return;
+    if (lastValidRef.current === liveValid) return;
+    lastValidRef.current = liveValid;
+    onValidityChange(liveValid);
+  });
+
   // The seeded availability is refetched immediately on mount, so the link's
   // consent set can change WHILE this form is open. Reconcile rather than
   // remount: carry each `consented` across by id and default new ids to false.
@@ -685,7 +711,7 @@ export function BookingForm({
 
   // Opted out of HubSpot's collected-forms script — see HUBSPOT_DO_NOT_COLLECT_FORM_PROPS.
   return (
-    <form onSubmit={submit} className={FORM_STACK} noValidate {...HUBSPOT_DO_NOT_COLLECT_FORM_PROPS}>
+    <form id={formId} onSubmit={submit} className={FORM_STACK} noValidate {...HUBSPOT_DO_NOT_COLLECT_FORM_PROPS}>
       <HoneypotField {...honeypotInputProps} />
 
       {/* Email first, name pair below — the order the desktop and mobile mocks
@@ -806,7 +832,7 @@ export function BookingForm({
       {/* Two shapes, not one with a placeholder: without a note this must stay
           the bare `flex` row it has always been, or the submit slides from the
           left edge to the right on every existing slot-first booking. */}
-      {footerNote ? (
+      {hideSubmit ? null : footerNote ? (
         <div className={FOOTER_ROW_CLASS}>
           <p className="text-ods-text-secondary text-h6">{footerNote}</p>
           {submitButton}

package/src/components/meeting-scheduler/index.tsx

@@ -39,7 +39,7 @@
  * `SCHEDULER_FLOW_PRESETS` and the `detailsFirst` branches below.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import type { ComponentType, ReactNode } from 'react';
 import { useIsHydrated } from '../../hooks/ui/use-is-hydrated';
 import { completeFormRescue } from '../../hooks/use-form-rescue';
@@ -56,10 +56,18 @@ import {
 import { cn } from '../../utils/cn';
 import { FORM_RESCUE_ATTEMPT_FIELD, type FormRescueDefinition } from '../../utils/form-rescue';
 import { formatDurationCompact, formatDateWithTimezone } from '../../utils/format';
+import { BackButton } from '../layout/back-button';
 import { Alert, AlertDescription, Button } from '../ui';
-import { BookingForm, BookingFormSkeleton, DEFAULT_SUBMIT_LABEL, type BookingFormProps } from './booking-form';
+import {
+  BookingForm,
+  BookingFormSkeleton,
+  DEFAULT_SUBMIT_LABEL,
+  type BookingFieldRow,
+  type BookingFormProps,
+} from './booking-form';
 import { Confirmation } from './confirmation';
 import { SchedulerContextPanel, ContextPanelSkeleton } from './context-panel';
+import { SchedulerModalHeader, SchedulerModalHeaderSkeleton } from './modal-header';
 import { SlotPicker, SlotPickerSkeleton, dayKeyInZone } from './slot-picker';
 
 /**
@@ -156,8 +164,24 @@ export interface HubSpotMeetingSchedulerProps {
   /** Form rescue for the details form (`RESCUE_FORMS.meetingBooking`). OPT-IN:
    *  omitted or `null` saves nothing. */
   rescue?: FormRescueDefinition | null;
+  /**
+   * How the card is drawn.
+   *
+   * `'card'` (default, unchanged): the scheduler card - context panel beside
+   * (or over) the calendar, as every page embed has it.
+   * `'modal'`: the onboarding "Book an Onboarding Call" window: the host strip
+   * with the length on its right, the timezone row, then the calendar beside
+   * a single column of times, and Continue in a footer under the card (with
+   * Cancel beside it on a phone, where the window has no X). A time is
+   * CHOSEN, not submitted: Continue moves to the details form. Opt-in, so
+   * every existing embed keeps the card byte for byte; `details-first` has
+   * no modal arrangement and ignores it.
+   */
+  layout?: SchedulerLayout;
 }
 
+export type SchedulerLayout = 'card' | 'modal';
+
 type Step = 'slot' | 'details' | 'confirmed';
 /** `onStageChange`'s value: a step, or the degraded box that replaces the flow. */
 export type SchedulerStage = Step | 'unavailable';
@@ -393,6 +417,41 @@ function isNativelyBookable(availability: MeetingAvailability): boolean {
   return true;
 }
 
+/**
+ * The modal layout's frame: the content card and, under it, the footer row.
+ * No stated height - the window is as tall as the step (the calendar states
+ * its own, see the slot picker), and the modal around it scrolls if the form
+ * ever outgrows the screen.
+ */
+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 = () => undefined;
+
+/** The modal's form draws the name pair first and the email under it, as its design does. */
+const MODAL_FIELD_ROWS: BookingFieldRow[] = [[{ name: 'firstName' }, { name: 'lastName' }], [{ name: 'email' }]];
+
+const MODAL_PRIMARY_CLASS = 'flex-1 content-md:min-w-[15.5rem] content-md:flex-none';
+
+/**
+ * The action row under the card: the step's primary on the right and, on a
+ * phone, Cancel beside it (the window has no X there). On the calendar the
+ * primary is Continue; on the form it is the form's own submit, drawn here and
+ * wired to the form by id so the actions sit under the card, not inside it.
+ */
+function ModalFooter({ onCancel, primary }: { onCancel?: () => void; primary: ReactNode }) {
+  return (
+    <div className="flex gap-[var(--spacing-system-l)] content-md:justify-end">
+      {onCancel && (
+        <Button variant="outline" onClick={onCancel} className="flex-1 content-md:hidden">
+          Cancel
+        </Button>
+      )}
+      {primary}
+    </div>
+  );
+}
+
 export function HubSpotMeetingScheduler({
   meetingId,
   apiBaseUrl = '',
@@ -410,6 +469,7 @@ export function HubSpotMeetingScheduler({
   detailsForm: DetailsForm = BookingForm,
   detailsFormProps,
   rescue = null,
+  layout = 'card',
 }: HubSpotMeetingSchedulerProps) {
   const {
     availability,
@@ -424,6 +484,11 @@ export function HubSpotMeetingScheduler({
   } = useMeetingBooking({ meetingId, apiBaseUrl, initialAvailability });
 
   const detailsFirst = flow === 'details-first';
+  // The modal arrangement is slot-first's only: details-first keeps the card.
+  const modal = layout === 'modal' && !detailsFirst;
+  const modalFormId = useId();
+  // The modal's submit sits outside the form and follows what the form reports.
+  const [modalFormValid, setModalFormValid] = useState(false);
 
   // Zone resolution happens POST-mount (Intl) unless the embedder pins one —
   // the initial (server) render stays deterministic; time labels appear once
@@ -740,6 +805,25 @@ export function HubSpotMeetingScheduler({
   );
   const degradedCard = degraded("We couldn't load available call times. Please try again shortly.");
 
+  if (modal && isLoadingAvailability && !availability) {
+    return (
+      <div className={cn(MODAL_STACK_CLASS, className)}>
+        <div className={MODAL_CARD_CLASS}>
+          <SchedulerModalHeaderSkeleton />
+          <SlotPickerSkeleton monthOffset={monthOffset} layout="modal" />
+        </div>
+        <ModalFooter
+          onCancel={onBack}
+          primary={
+            <Button disabled onClick={NOOP} className={MODAL_PRIMARY_CLASS}>
+              Continue
+            </Button>
+          }
+        />
+      </div>
+    );
+  }
+
   if (isLoadingAvailability && !availability) {
     // COLD start only — a month already in the query cache renders straight
     // into the loaded card. Composed inside the SAME wrappers as that card
@@ -783,6 +867,142 @@ export function HubSpotMeetingScheduler({
 
   // ---- the card ------------------------------------------------------------
 
+  if (modal) {
+    // slot-first only, so the form's Back is the calendar and the calendar's is the host's exit.
+    const modalBack = step === 'details' ? backToSlot : onBack;
+    const onSelectDuration = (ms: number) => {
+      setDurationMs(ms);
+      setSelectedDay(null);
+      setSelectedSlot(null);
+    };
+    const summary =
+      selectedSlot != null && durationMs != null && timezone != null
+        ? `${formatDateWithTimezone(selectedSlot, timezone, 'weekdayDateTimeZoned', { viewerLocale: true })} · ${formatDurationCompact(durationMs / 1000)}`
+        : null;
+    return (
+      <div className={cn(MODAL_STACK_CLASS, className)}>
+        <div className={MODAL_CARD_CLASS}>
+          {/* The window's one back edge: on the form it returns to the
+              calendar at every width; on the calendar it is the host's exit,
+              drawn on a phone only - the window has an X everywhere else. */}
+          {modalBack && (
+            <BackButton
+              onClick={modalBack}
+              className={cn(
+                'px-[var(--spacing-system-m)] pt-[var(--spacing-system-m)]',
+                step === 'slot' && 'content-md:hidden',
+              )}
+            />
+          )}
+          <SchedulerModalHeader
+            hosts={shownHosts}
+            durationsMs={durations}
+            selectedDurationMs={durationMs}
+            onSelectDuration={onSelectDuration}
+            timezone={timezone}
+            onTimezoneChange={setTimezone}
+            locked={step !== 'slot'}
+            // The zone is chosen with the time; the form restates it in its
+            // summary line, so the picker is the calendar's only.
+            showTimezone={step === 'slot'}
+          />
+          {step === 'confirmed' && confirmation && timezone ? (
+            <div className={MODAL_STEP_CLASS}>
+              <Confirmation confirmation={confirmation} timezone={timezone} />
+            </div>
+          ) : step === 'details' && durationMs != null && selectedSlot != null && timezone ? (
+            <div className={cn(MODAL_STEP_CLASS, 'gap-[var(--spacing-system-m)]')}>
+              {summary && <p className="text-ods-text-primary text-h4">{summary}</p>}
+              <DetailsForm
+                fieldRows={MODAL_FIELD_ROWS}
+                {...detailsFormProps}
+                availability={availability}
+                meetingId={meetingId}
+                startTimeMs={selectedSlot}
+                durationMs={durationMs}
+                timezone={timezone}
+                formId={modalFormId}
+                hideSubmit
+                onValidityChange={setModalFormValid}
+                isSubmitting={isSubmitting}
+                onSubmit={handleSubmit}
+                honeypotInputProps={honeypotInputProps}
+                getSignals={getSignals}
+                rescue={rescue}
+              />
+            </div>
+          ) : (
+            <>
+              {bookingError === 'SLOT_TAKEN' && (
+                <Alert variant="warning" className="mx-[var(--spacing-system-m)] mt-[var(--spacing-system-m)] w-auto">
+                  <AlertDescription>
+                    That time was just taken — pick another slot below. (If you already submitted, check your email for
+                    a confirmation before rebooking.)
+                  </AlertDescription>
+                </Alert>
+              )}
+              {timezone && durationMs != null ? (
+                <SlotPicker
+                  layout="modal"
+                  slots={slots}
+                  timezone={timezone}
+                  monthOffset={monthOffset}
+                  onMonthOffsetChange={o => {
+                    setSelectedDay(null);
+                    setSelectedSlot(null);
+                    setMonthOffset(o);
+                  }}
+                  selectedSlot={selectedSlot}
+                  onSelectSlot={setSelectedSlot}
+                  selectedDay={selectedDay}
+                  onSelectDay={setSelectedDay}
+                  isLoading={isLoadingAvailability}
+                />
+              ) : durations.length === 0 && !isFetchingAvailability ? (
+                <div className={cn(MODAL_STEP_CLASS, 'items-start gap-[var(--spacing-system-m)]')}>
+                  <p className="text-ods-text-secondary text-h6">No call times are published right now.</p>
+                  {escapeHatch}
+                </div>
+              ) : (
+                <SlotPickerSkeleton monthOffset={monthOffset} layout="modal" />
+              )}
+            </>
+          )}
+        </div>
+        {step === 'slot' && (
+          <ModalFooter
+            onCancel={onBack}
+            primary={
+              <Button
+                disabled={selectedSlot == null || durationMs == null}
+                onClick={() => setStep('details')}
+                className={MODAL_PRIMARY_CLASS}
+              >
+                Continue
+              </Button>
+            }
+          />
+        )}
+        {step === 'details' && (
+          <ModalFooter
+            onCancel={onBack}
+            primary={
+              <Button
+                type="submit"
+                form={modalFormId}
+                loading={isSubmitting}
+                disabled={isSubmitting || !modalFormValid}
+                className={MODAL_PRIMARY_CLASS}
+              >
+                {preset.submitLabel}
+              </Button>
+            }
+          />
+        )}
+      </div>
+    );
+  }
+
   return (
     <div className={cardClass}>
       <div className={innerClass}>
@@ -912,7 +1132,8 @@ export function HubSpotMeetingScheduler({
                   onSelectSlot={ms => {
                     if (!detailsFirst) {
                       setSelectedSlot(ms);
-                      setStep('details');
+                      // The modal's Continue is what moves on; the card moves at the click.
+                      if (!modal) setStep('details');
                       return;
                     }
                     // details-first: the slot IS the submit. The step stays

package/src/components/meeting-scheduler/modal-header.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import type { MeetingHost } from '../../schemas/meeting-booking-schema';
+import { cn } from '../../utils/cn';
+import { formatDurationCompact } from '../../utils/format';
+import { SquareAvatar, AvatarStack, Button, Skeleton } from '../ui';
+import { TimezoneSelect } from '../ui/timezone-select';
+
+/**
+ * The head of the scheduler's MODAL layout: the host strip (who, and how long
+ * on its right - chips when the link offers several lengths, the length alone
+ * otherwise) and the timezone row under it, each cut off by a rule. The
+ * context panel's facts in the window's own arrangement: there is no side
+ * column in a 600px box, so the strip sits over the calendar and the zone
+ * picker spans the width above it, at every size.
+ */
+export interface SchedulerModalHeaderProps {
+  hosts: MeetingHost[];
+  durationsMs: number[];
+  selectedDurationMs: number | null;
+  onSelectDuration: (ms: number) => void;
+  /** Resolved IANA zone (null until the client resolves it). */
+  timezone: string | null;
+  onTimezoneChange?: (tz: string) => void;
+  /** A slot is chosen: the length is settled, the chips give way to the line. */
+  locked?: boolean;
+  disabled?: boolean;
+  /** Whether the timezone row renders (not on the confirmation). */
+  showTimezone?: boolean;
+}
+
+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';
+
+function HostIdentity({ hosts }: { hosts: MeetingHost[] }) {
+  if (hosts.length === 0) return null;
+  if (hosts.length > 3) {
+    return (
+      <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
+        <AvatarStack people={hosts} max={4} size="lg" label="Hosts" />
+        <p className="text-ods-text-secondary text-h6">{hosts.length} hosts on this calendar</p>
+      </div>
+    );
+  }
+  return (
+    <div className="flex min-w-0 flex-col gap-[var(--spacing-system-s)]">
+      {hosts.map(host => (
+        <div key={host.name} className="flex items-center gap-[var(--spacing-system-xs)]">
+          <SquareAvatar
+            variant="round"
+            size="sm"
+            src={host.avatarUrl ?? undefined}
+            alt={host.name}
+            fallback={host.name}
+          />
+          <div className="flex min-w-0 flex-col">
+            <p className="truncate text-ods-text-primary text-h4">{host.name}</p>
+            {host.title && <p className="truncate text-ods-text-secondary text-h6">{host.title}</p>}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function SchedulerModalHeader({
+  hosts,
+  durationsMs,
+  selectedDurationMs,
+  onSelectDuration,
+  timezone,
+  onTimezoneChange,
+  locked = false,
+  disabled = false,
+  showTimezone = true,
+}: SchedulerModalHeaderProps) {
+  const chips = !locked && durationsMs.length > 1;
+  return (
+    <>
+      <div className={STRIP_CLASS}>
+        <HostIdentity hosts={hosts} />
+        {chips ? (
+          <div className="flex shrink-0 flex-wrap justify-end gap-[var(--spacing-system-xs)]">
+            {durationsMs.map(ms => (
+              <Button
+                key={ms}
+                variant={selectedDurationMs === ms ? undefined : 'outline'}
+                size="small-legacy"
+                disabled={disabled}
+                onClick={() => onSelectDuration(ms)}
+              >
+                {formatDurationCompact(ms / 1000)}
+              </Button>
+            ))}
+          </div>
+        ) : (
+          selectedDurationMs != null && (
+            <p className="shrink-0 text-ods-text-secondary text-h6">
+              {formatDurationCompact(selectedDurationMs / 1000)} call
+            </p>
+          )
+        )}
+      </div>
+      {showTimezone && (
+        <div className={cn(ROW_CLASS, 'flex flex-col gap-[var(--spacing-system-xxs)]')}>
+          <p className={FIELD_LABEL_CLASS}>Timezone</p>
+          {timezone ? (
+            <TimezoneSelect
+              value={timezone}
+              disabled={disabled}
+              onChange={tz => {
+                if (tz) onTimezoneChange?.(tz);
+              }}
+            />
+          ) : (
+            <Skeleton className="h-12 w-full" />
+          )}
+        </div>
+      )}
+    </>
+  );
+}
+
+/** Same footprint as the loaded header, for the cold load. */
+export function SchedulerModalHeaderSkeleton() {
+  return (
+    <>
+      <div className={STRIP_CLASS}>
+        <div className="flex items-center gap-[var(--spacing-system-xs)]">
+          <Skeleton className="h-8 w-8 shrink-0 rounded-full" />
+          <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
+            <Skeleton className="h-5 w-32" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+        </div>
+        <Skeleton className="h-4 w-20 shrink-0" />
+      </div>
+      <div className={cn(ROW_CLASS, 'flex flex-col gap-[var(--spacing-system-xxs)]')}>
+        <p className={FIELD_LABEL_CLASS}>Timezone</p>
+        <Skeleton className="h-12 w-full" />
+      </div>
+    </>
+  );
+}

package/src/components/meeting-scheduler/slot-picker.tsx

@@ -44,9 +44,20 @@ import { Button, DatePickerCalendar, Skeleton } from '../ui';
  * itself, keeping SSR output deterministic).
  */
 
+/**
+ * How the two columns sit. `card` is the scheduler card's own (the module
+ * docblock). `modal` is the onboarding "Book an Onboarding Call" window: a
+ * 600px box where the calendar keeps its width and the times run down ONE
+ * column beside it, scrolling inside the calendar's height - on a phone the
+ * times are four across, as that design draws them.
+ */
+export type SlotPickerLayout = 'card' | 'modal';
+
 export interface SlotPickerProps {
   /** Bookable slot start times (epoch ms) for the selected duration. */
   slots: number[];
+  /** Column layout; `card` unless the host says otherwise. */
+  layout?: SlotPickerLayout;
   /** IANA zone every label renders in (parent resolves post-mount). */
   timezone: string;
   monthOffset: number;
@@ -207,6 +218,26 @@ const COLUMN_BOX = 'p-[var(--spacing-system-l)] content-lg:p-0';
 /** The rule between the two, wherever the layout puts it. */
 const COLUMN_DIVIDER = 'border-b border-ods-border content-md:border-b-0 content-md:border-r content-lg:border-0';
 
+/**
+ * The modal layout's classes: the same two columns, side by side from `md`
+ * only (the modal never reaches the desktop card's `lg` arrangement), the
+ * calendar at the card's tablet width and the rule between them at every
+ * width from `md`. The times column states the calendar's height
+ * (`MODAL_TIMES_H`) and scrolls inside it, so the window is as tall as the
+ * month whatever the day offers. On a phone the chips are four across and
+ * the column keeps the card's own three-row window.
+ */
+const MODAL_ROW_CLASS = 'flex min-w-0 flex-col content-md:flex-row content-md:items-start';
+const MODAL_CALENDAR_W = 'content-md:w-[19rem] content-md:shrink-0';
+const MODAL_COLUMN_BOX = 'p-[var(--spacing-system-m)]';
+const MODAL_COLUMN_DIVIDER = 'border-b border-ods-border content-md:border-b-0 content-md:border-r';
+/** The calendar column's height: its heading, the month header and six week rows. */
+const MODAL_TIMES_H = 'content-md:h-[21.5rem]';
+const MODAL_CHIP_GRID_CLASS = cn(
+  'grid grid-cols-4 content-start gap-[var(--spacing-system-xs)] overflow-y-auto content-md:grid-cols-1',
+  'max-h-[9.75rem] min-h-0 flex-1 content-md:max-h-none',
+);
+
 /** Deterministic month caption for a given offset (fixed en-US locale so
  *  the SSR and client first-paint markup agree byte-for-byte). */
 export function monthLabelFor(offset: number): string {
@@ -285,10 +316,23 @@ function DayCalendar({ monthOffset, onMonthOffsetChange, selectedDay, onSelectDa
  * the times column is a skeleton, and it is the same one the loaded picker
  * shows while a month loads, so there is no swap between the two.
  */
-export function SlotPickerSkeleton({ monthOffset = 0 }: { monthOffset?: number }) {
+export function SlotPickerSkeleton({
+  monthOffset = 0,
+  layout = 'card',
+}: {
+  monthOffset?: number;
+  layout?: SlotPickerLayout;
+}) {
+  const modal = layout === 'modal';
   return (
-    <div className={SLOT_ROW_CLASS}>
-      <div className={cn(COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, 'content-md:overflow-y-auto')}>
+    <div className={modal ? MODAL_ROW_CLASS : SLOT_ROW_CLASS}>
+      <div
+        className={
+          modal
+            ? cn(COLUMN_STACK, MODAL_COLUMN_BOX, MODAL_COLUMN_DIVIDER, MODAL_CALENDAR_W)
+            : cn(COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, 'content-md:overflow-y-auto')
+        }
+      >
         {/* Needs no data — the heading renders REAL in every loading state. */}
         <p className={COLUMN_HEADING_CLASS}>{SLOT_PICKER_HEADING}</p>
         <DayCalendar
@@ -299,7 +343,13 @@ export function SlotPickerSkeleton({ monthOffset = 0 }: { monthOffset?: number }
           slotsByDay={null}
         />
       </div>
-      <div className={cn(COLUMN_STACK, COLUMN_BOX, 'min-w-0 content-md:flex-1')}>
+      <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')
+        }
+      >
         <TimeChipsSkeleton />
       </div>
     </div>
@@ -330,6 +380,7 @@ export function TimeChipsSkeleton() {
 
 export function SlotPicker({
   slots,
+  layout = 'card',
   timezone,
   monthOffset,
   onMonthOffsetChange,
@@ -365,9 +416,16 @@ export 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';
   return (
-    <div className={SLOT_ROW_CLASS}>
-      <div className={cn(COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, 'content-md:overflow-y-auto')}>
+    <div className={modal ? MODAL_ROW_CLASS : SLOT_ROW_CLASS}>
+      <div
+        className={
+          modal
+            ? cn(COLUMN_STACK, MODAL_COLUMN_BOX, MODAL_COLUMN_DIVIDER, MODAL_CALENDAR_W)
+            : cn(COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, 'content-md:overflow-y-auto')
+        }
+      >
         <p className={COLUMN_HEADING_CLASS}>{SLOT_PICKER_HEADING}</p>
         {/* Stays mounted through a month load — `slotsByDay: null` is what
             "nothing selectable yet" looks like, not an unmount. */}
@@ -379,7 +437,13 @@ export function SlotPicker({
           slotsByDay={isLoading ? null : slotsByDay}
         />
       </div>
-      <div className={cn(COLUMN_STACK, COLUMN_BOX, 'min-w-0 content-md:flex-1')}>
+      <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')
+        }
+      >
         {isLoading ? (
           <TimeChipsSkeleton />
         ) : selectedDay ? (
@@ -389,7 +453,7 @@ export function SlotPicker({
                   local instant could label an adjacent day. */}
               {formatDateWithTimezone(dateFromDayKey(selectedDay), VIEWER_TIMEZONE, 'weekday', { viewerLocale: true })}
             </p>
-            <div className={CHIP_GRID_CLASS}>
+            <div className={modal ? MODAL_CHIP_GRID_CLASS : CHIP_GRID_CLASS}>
               {daySlots.map(ms => {
                 const isSelected = selectedSlot === ms;
                 return (

package/src/components/shared/product-release/product-release-card.tsx

@@ -436,6 +436,8 @@ export function ProductReleaseCard({
       // affordance, so explicit ring styles match the `<span role>` form.
       'my-1.5 flex w-full items-start gap-3 p-2',
       'rounded-lg border border-ods-border bg-ods-card no-underline',
+      // The play mark on a video cover shows on the card's hover.
+      'group',
       isInteractive
         ? 'cursor-pointer transition-colors hover:border-ods-text-secondary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-1 focus-visible:ring-offset-ods-card'
         : 'cursor-default',