@medalsocial/meda 3.6.1 → 3.8.0

package/dist/booking/booking-recap.d.ts

@@ -0,0 +1,60 @@
+import type { BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
+import { type SlotClassNames } from './slots.js';
+/**
+ * What is about to be booked, at the top of the last step.
+ *
+ * Without it the details step asks for a phone number and a «confirm» under
+ * no day, no time and no stylist: the visitor agrees to a price alone. This
+ * card names the day (a calendar leaf), the hours, each person's services and
+ * who takes them, and the total — and offers the two changes worth one tap:
+ * «edit» back to the time step, and, when «first available» resolved to one
+ * stylist while others are free at the same minute, a swap to one of them.
+ *
+ * Presentational: the caller resolves who and when (the same lines the
+ * submission is built from), so the card cannot describe a different booking.
+ */
+export declare const BOOKING_RECAP_LABEL_KEYS: readonly ["recap.label", "recap.time", "recap.line", "recap.lineFor", "recap.anyStylist", "recap.total", "recap.edit", "recap.editLabel", "recap.alsoFree", "recap.swapTo"];
+export type BookingRecapLabels = Record<(typeof BOOKING_RECAP_LABEL_KEYS)[number], BookingLabel>;
+/** One person's part of the visit. */
+export interface BookingRecapLine {
+    startTs: number;
+    endTs: number;
+    /** The services, in the order they are done. */
+    services: readonly string[];
+    /** Who takes this line; `null` until a slot names somebody. Cleaned with `format.stylistName`. */
+    stylist: {
+        name: string;
+        photoUrl?: string | null;
+    } | null;
+    /** Whose line it is; only drawn when there is more than one line. */
+    who?: string | null;
+}
+/** A stylist free at the same start who could take the whole visit instead. */
+export interface BookingRecapAlternative {
+    resourceId: string;
+    name: string;
+    photoUrl?: string | null;
+}
+/**
+ * - `root` the card
+ * - `leaf` the calendar leaf
+ * - `edit` the edit button
+ * - `alternatives` the swap row
+ */
+export type BookingRecapSlot = 'root' | 'leaf' | 'edit' | 'alternatives';
+export interface BookingRecapProps {
+    /** At least one, in the order the visit runs. */
+    lines: readonly BookingRecapLine[];
+    /** The whole visit in minor units. */
+    totalOre: number;
+    format: BookingFormat;
+    labels: BookingRecapLabels;
+    /** Back to the time step. Absent: no edit button. */
+    onEdit?: () => void;
+    /** Others free at the same start. Drawn with `onSwap`; at most three are shown. */
+    alternatives?: readonly BookingRecapAlternative[];
+    onSwap?: (resourceId: string) => void;
+    classNames?: SlotClassNames<BookingRecapSlot>;
+}
+export declare function BookingRecap({ lines, totalOre, format, labels, onEdit, alternatives, onSwap, classNames, }: BookingRecapProps): import("react").JSX.Element | null;

package/dist/booking/booking-recap.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+import { labelParts, renderLabel } from './internal/label-parts.js';
+import { BookingButton } from './internal/ui.js';
+import { fillLabel } from './labels.js';
+import { slotClass } from './slots.js';
+/**
+ * What is about to be booked, at the top of the last step.
+ *
+ * Without it the details step asks for a phone number and a «confirm» under
+ * no day, no time and no stylist: the visitor agrees to a price alone. This
+ * card names the day (a calendar leaf), the hours, each person's services and
+ * who takes them, and the total — and offers the two changes worth one tap:
+ * «edit» back to the time step, and, when «first available» resolved to one
+ * stylist while others are free at the same minute, a swap to one of them.
+ *
+ * Presentational: the caller resolves who and when (the same lines the
+ * submission is built from), so the card cannot describe a different booking.
+ */
+export const BOOKING_RECAP_LABEL_KEYS = [
+    /** Accessible name of the card, e.g. «The appointment you are booking». */
+    'recap.label',
+    /** `{start}` `{end}` — the visit's hours, e.g. «{start}–{end}». */
+    'recap.time',
+    /** `{services}` `{stylist}` — one person's line, e.g. «{services} with {stylist}». */
+    'recap.line',
+    /** `{who}` `{services}` `{stylist}` — a line in a family booking. */
+    'recap.lineFor',
+    /** The stylist part when nobody is named yet, e.g. «the first free stylist». */
+    'recap.anyStylist',
+    /** `{price}` — the total line, e.g. «{price}, paid at the salon». */
+    'recap.total',
+    /** Visible text of the edit button. */
+    'recap.edit',
+    /** Accessible name of the edit button, e.g. «Change day and time». */
+    'recap.editLabel',
+    /** `{time}` — leads the swap row, e.g. «Also free at {time}:». */
+    'recap.alsoFree',
+    /** `{name}` — accessible name of a swap button, e.g. «Book with {name} instead». */
+    'recap.swapTo',
+];
+const MAX_ALTERNATIVES = 3;
+/** A stylist's face beside the name. Nothing without a photo: the name already says who. */
+function Avatar({ photoUrl }) {
+    if (!photoUrl)
+        return null;
+    return (_jsx("img", { src: photoUrl, alt: "", width: 24, height: 24, decoding: "async", className: "size-6 shrink-0 rounded-full object-cover" }));
+}
+export function BookingRecap({ lines, totalOre, format, labels, onEdit, alternatives, onSwap, classNames, }) {
+    const first = lines[0];
+    if (!first)
+        return null;
+    const { clock } = format;
+    const last = lines.reduce((latest, line) => (line.endTs > latest.endTs ? line : latest), first);
+    const [, month, day] = clock.dayKey(first.startTs).split('-').map(Number);
+    const many = lines.length > 1;
+    const swaps = onSwap ? (alternatives ?? []).slice(0, MAX_ALTERNATIVES) : [];
+    const stylistOf = (line) => line.stylist ? (_jsxs("span", { className: "inline-flex items-center gap-1.5 whitespace-nowrap font-medium text-foreground", children: [_jsx(Avatar, { photoUrl: line.stylist.photoUrl }), format.stylistName(line.stylist.name)] })) : (renderLabel(labels['recap.anyStylist']));
+    return (_jsxs("section", { "aria-label": fillLabel(labels['recap.label'], {}), "data-testid": "booking-recap", className: slotClass(classNames, 'root', 'rounded-lg border border-border bg-card'), children: [_jsxs("div", { className: "flex items-start gap-4 p-4", children: [_jsxs("span", { "aria-hidden": "true", className: slotClass(classNames, 'leaf', 'flex w-16 shrink-0 flex-col overflow-hidden rounded-md border border-border bg-background text-center'), children: [_jsx("span", { className: "truncate bg-primary px-1 py-0.5 text-[10px] font-bold uppercase tracking-wider text-primary-foreground", children: clock.weekday(first.startTs) }), _jsx("span", { className: "pt-1 font-sans text-2xl font-bold leading-none tabular-nums", children: day }), _jsx("span", { className: "truncate px-1 pt-0.5 pb-1.5 text-[11px] text-muted-foreground", children: month ? clock.monthName(month) : '' })] }), _jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [_jsxs("p", { className: "font-semibold tabular-nums", children: [_jsxs("span", { className: "sr-only", children: [clock.dayLabel(first.startTs), " "] }), renderLabel(labels['recap.time'], {
+                                        start: clock.formatTime(first.startTs),
+                                        end: clock.formatTime(last.endTs),
+                                    })] }), _jsx("ul", { className: "space-y-1 text-sm text-muted-foreground", children: lines.map((line, index) => (_jsx("li", { className: "flex flex-wrap items-center gap-x-1", children: labelParts(many && line.who ? labels['recap.lineFor'] : labels['recap.line'], {
+                                        who: line.who ?? '',
+                                        services: line.services.join(' + '),
+                                        stylist: stylistOf(line),
+                                    }) }, index))) }), _jsx("p", { className: "text-sm text-muted-foreground tabular-nums", children: renderLabel(labels['recap.total'], { price: format.price(totalOre) }) })] }), onEdit && (_jsx(BookingButton, { variant: "link", size: "sm", "aria-label": fillLabel(labels['recap.editLabel'], {}), onClick: onEdit, className: slotClass(classNames, 'edit', 'h-auto px-0 py-0.5'), children: renderLabel(labels['recap.edit']) }))] }), swaps.length > 0 && (_jsxs("div", { className: slotClass(classNames, 'alternatives', 'flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-border px-4 py-2.5 text-sm text-muted-foreground'), children: [_jsx("span", { children: renderLabel(labels['recap.alsoFree'], { time: clock.formatTime(first.startTs) }) }), swaps.map((alternative) => (_jsxs("button", { type: "button", "aria-label": fillLabel(labels['recap.swapTo'], {
+                            name: format.stylistName(alternative.name),
+                        }), onClick: () => onSwap?.(alternative.resourceId), className: cn('inline-flex min-h-11 items-center gap-1.5 rounded-full px-2 font-semibold text-primary', 'transition-colors hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'), children: [_jsx(Avatar, { photoUrl: alternative.photoUrl }), format.stylistName(alternative.name)] }, alternative.resourceId)))] }))] }));
+}

package/dist/booking/details-screen.js

@@ -61,7 +61,10 @@ export const DETAILS_SCREEN_LABEL_KEYS = [
     'details.call.link',
     /** The rescue sentence when there is no phone number to link. */
     'details.call.none',
-    /** `{price}` — the total, already formatted. */
+    /**
+     * `{price}` — the total, already formatted; `{day}` (`clock.dayLabel`) and
+     * `{time}` — when the visit starts, so the button can name what it books.
+     */
     'details.submit',
 ];
 /**
@@ -299,7 +302,11 @@ export function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phon
             // A seat step 1 already named is not asked again: a second answer could disagree.
             isKnownChair(state, index) ? null : (_jsx(ChildFields
             // biome-ignore lint/suspicious/noArrayIndexKey: two lines can share a service; the index is the identity
-            , { legend: state.items.length > 1 ? visitName(item) : null, nameId: field(`child-name-${index}`), yearId: field(`child-year-${index}`), value: childAt(index), family: family, labels: labels, classNames: classNames, FamilyChip: FamilyChip, onChange: (patch, personId) => setChild(index, patch, personId) }, index))), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('email'), children: labels['details.email.label'] }), _jsx(Input, { id: field('email'), ref: emailRef, type: "email", autoComplete: "email", className: inputClass(), value: state.contact.email, readOnly: emailLocked || undefined, "aria-readonly": emailLocked || undefined, "aria-describedby": field('email-help'), "aria-invalid": showEmailError || undefined, onFocus: () => setFocused('email'), onBlur: () => setFocused(null), onChange: (event) => setContact('email', event.target.value) }), _jsx(Field.Description, { id: field('email-help'), children: emailLocked ? labels['details.email.lockedHelp'] : labels['details.email.help'] }), showEmailError && _jsx(Field.Error, { children: labels['details.email.error'] })] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('notes'), children: labels['details.notes.label'] }), _jsx(Textarea, { id: field('notes'), rows: 3, className: slotClass(classNames, 'input', BOOKING_TEXTAREA_CLASS), placeholder: labelText(labels['details.notes.placeholder']), value: state.notes, onChange: (event) => onChange({ type: 'setNotes', value: event.target.value }) })] }), _jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: field('terms'), ref: termsRef, className: BOOKING_CHECKBOX_CLASS, checked: state.consentTerms, "aria-invalid": showTermsError || undefined, onCheckedChange: (accepted) => onChange({ type: 'setConsent', which: 'terms', accepted }) }), _jsx(Field.Label, { htmlFor: field('terms'), className: "cursor-pointer font-normal", children: labels['details.terms.text'] }), termsHref && (_jsx("a", { href: termsHref, className: "col-start-2 text-sm font-semibold text-primary underline underline-offset-4", children: labels['details.terms.link'] }))] }), marketingConsent && (_jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: field('marketing'), className: BOOKING_CHECKBOX_CLASS, checked: state.consentMarketing, onCheckedChange: (accepted) => onChange({ type: 'setConsent', which: 'marketing', accepted }) }), _jsx(Field.Label, { htmlFor: field('marketing'), className: "cursor-pointer font-normal", children: labels['details.marketing.text'] })] })), state.error && (_jsx(SubmitFailure, { error: state.error, phone: phone, format: format, labels: labels, className: slotClass(classNames, 'error', 'rounded-lg border border-destructive/40 bg-destructive/10 px-5 py-3 text-sm') })), _jsx(BookingButton, { size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: submitting, "aria-busy": submitting || undefined, onClick: handleSubmit, children: renderLabel(labels['details.submit'], { price }) })] }));
+            , { legend: state.items.length > 1 ? visitName(item) : null, nameId: field(`child-name-${index}`), yearId: field(`child-year-${index}`), value: childAt(index), family: family, labels: labels, classNames: classNames, FamilyChip: FamilyChip, onChange: (patch, personId) => setChild(index, patch, personId) }, index))), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('email'), children: labels['details.email.label'] }), _jsx(Input, { id: field('email'), ref: emailRef, type: "email", autoComplete: "email", className: inputClass(), value: state.contact.email, readOnly: emailLocked || undefined, "aria-readonly": emailLocked || undefined, "aria-describedby": field('email-help'), "aria-invalid": showEmailError || undefined, onFocus: () => setFocused('email'), onBlur: () => setFocused(null), onChange: (event) => setContact('email', event.target.value) }), _jsx(Field.Description, { id: field('email-help'), children: emailLocked ? labels['details.email.lockedHelp'] : labels['details.email.help'] }), showEmailError && _jsx(Field.Error, { children: labels['details.email.error'] })] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('notes'), children: labels['details.notes.label'] }), _jsx(Textarea, { id: field('notes'), rows: 3, className: slotClass(classNames, 'input', BOOKING_TEXTAREA_CLASS), placeholder: labelText(labels['details.notes.placeholder']), value: state.notes, onChange: (event) => onChange({ type: 'setNotes', value: event.target.value }) })] }), _jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: field('terms'), ref: termsRef, className: BOOKING_CHECKBOX_CLASS, checked: state.consentTerms, "aria-invalid": showTermsError || undefined, onCheckedChange: (accepted) => onChange({ type: 'setConsent', which: 'terms', accepted }) }), _jsx(Field.Label, { htmlFor: field('terms'), className: "cursor-pointer font-normal", children: labels['details.terms.text'] }), termsHref && (_jsx("a", { href: termsHref, className: "col-start-2 text-sm font-semibold text-primary underline underline-offset-4", children: labels['details.terms.link'] }))] }), marketingConsent && (_jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: field('marketing'), className: BOOKING_CHECKBOX_CLASS, checked: state.consentMarketing, onCheckedChange: (accepted) => onChange({ type: 'setConsent', which: 'marketing', accepted }) }), _jsx(Field.Label, { htmlFor: field('marketing'), className: "cursor-pointer font-normal", children: labels['details.marketing.text'] })] })), state.error && (_jsx(SubmitFailure, { error: state.error, phone: phone, format: format, labels: labels, className: slotClass(classNames, 'error', 'rounded-lg border border-destructive/40 bg-destructive/10 px-5 py-3 text-sm') })), _jsx(BookingButton, { size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: submitting, "aria-busy": submitting || undefined, onClick: handleSubmit, children: renderLabel(labels['details.submit'], {
+                    price,
+                    day: state.startTs === null ? '' : format.clock.dayLabel(state.startTs),
+                    time: state.startTs === null ? '' : format.clock.formatTime(state.startTs),
+                }) })] }));
 }
 /**
  * The name and birth year for one line. Wrapped in a fieldset only when there

package/dist/booking/index.d.ts

@@ -1,4 +1,5 @@
 export * from './add-child-sheet.js';
+export * from './booking-recap.js';
 export * from './booking-skeleton.js';
 export * from './confirmation.js';
 export * from './details-screen.js';

package/dist/booking/index.js

@@ -7,6 +7,7 @@
 // Styles: import `@medalsocial/meda/booking/styles.css` and
 // `@medalsocial/meda/primitives/styles.css` after the bridge.
 export * from './add-child-sheet.js';
+export * from './booking-recap.js';
 export * from './booking-skeleton.js';
 export * from './confirmation.js';
 export * from './details-screen.js';

package/dist/booking/label-keys.d.ts

@@ -1,4 +1,5 @@
 import { ADD_CHILD_SHEET_LABEL_KEYS } from './add-child-sheet.js';
+import { BOOKING_RECAP_LABEL_KEYS } from './booking-recap.js';
 import { BOOKING_SKELETON_LABEL_KEYS } from './booking-skeleton.js';
 import { CONFIRMATION_LABEL_KEYS } from './confirmation.js';
 import { DETAILS_SCREEN_LABEL_KEYS } from './details-screen.js';
@@ -18,9 +19,9 @@ import { VIPPS_LINK_ROW_LABEL_KEYS } from './portal/vipps-link-row.js';
 import { VISIT_HISTORY_LABEL_KEYS } from './portal/visit-history.js';
 import { SERVICE_SCREEN_LABEL_KEYS, SERVICE_SCREEN_MULTI_LABEL_KEYS } from './service-screen.js';
 import { STYLIST_SCREEN_LABEL_KEYS } from './stylist-screen.js';
-import { SUMMARY_BAR_LABEL_KEYS } from './summary-bar.js';
-import { TIME_SCREEN_LABEL_KEYS } from './time-screen.js';
-import { WHO_SCREEN_LABEL_KEYS } from './who-screen.js';
+import { SUMMARY_BAR_HINT_LABEL_KEYS, SUMMARY_BAR_LABEL_KEYS } from './summary-bar.js';
+import { TIME_SCREEN_FINDER_LABEL_KEYS, TIME_SCREEN_LABEL_KEYS } from './time-screen.js';
+import { WHO_SCREEN_LABEL_KEYS, WHO_SCREEN_PARTY_LABEL_KEYS } from './who-screen.js';
 /**
  * Every label key any booking screen reads, once. A complete pack for a
  * locale is a `BookingLabels`; each screen's `labels` prop is a subset of it,
@@ -29,13 +30,13 @@ import { WHO_SCREEN_LABEL_KEYS } from './who-screen.js';
  * (Screens that embed another screen already include its keys, e.g. the
  * login sheet carries the login panel's, OTP slots' and Vipps button's.)
  */
-export declare const BOOKING_LABEL_KEYS: readonly ("addChild.trigger" | "addChild.title" | "addChild.description.saved" | "addChild.description.local" | "addChild.name" | "addChild.birthYear" | "addChild.birthYearPlaceholder" | "addChild.birthMonth" | "addChild.birthMonthUnknown" | "addChild.notes" | "addChild.missing" | "addChild.submit" | "addChild.close" | "bookingSkeleton.opening" | "confirmation.heading" | "confirmation.serviceFor" | "confirmation.when" | "confirmation.party.heading" | "confirmation.party.line" | "confirmation.party.stylist" | "confirmation.party.total" | "confirmation.calendar" | "confirmation.manage" | "confirmation.manageFor" | "confirmation.portal" | "confirmation.startOver" | "details.heading" | "details.phone.label" | "details.phone.prefix" | "details.phone.error" | "details.name.label" | "details.known.label" | "details.known.for" | "details.known.self" | "details.known.adult" | "details.known.child" | "details.child.name" | "details.child.year" | "details.child.yearPlaceholder" | "details.email.label" | "details.email.help" | "details.email.lockedHelp" | "details.email.error" | "details.notes.label" | "details.notes.placeholder" | "details.terms.text" | "details.terms.link" | "details.marketing.text" | "details.error.maxParty" | "details.error.slotTaken" | "details.error.conflict" | "details.error.invalidInput" | "details.error.unconfigured" | "details.error.upstreamError" | "details.error.inProgress" | "details.call.link" | "details.call.none" | "details.submit" | "otp.label" | "vipps.button" | "vipps.unavailable" | "vipps.throttled" | "login.heading" | "login.codeHeading" | "login.or" | "login.continueEmail" | "login.emailIntro" | "login.emailLabel" | "login.sendCode" | "login.codeLabel" | "login.submitCode" | "login.codeHelp" | "login.codeHelpVipps" | "login.vippsSentTo" | "login.vippsSentToUnknown" | "login.cooldownWait" | "login.cooldownReady" | "login.resendIn" | "login.resend" | "login.switchEmail" | "login.useEmailInstead" | "login.notice.sent" | "login.notice.resent" | "login.notice.unreachable" | "login.notice.badEmail" | "login.notice.invalid" | "login.notice.throttled" | "login.notice.vippsInvalid" | "login.notice.vippsConflict" | "loginSheet.prompt" | "loginSheet.trigger" | "loginSheet.intro" | "loginSheet.vipps" | "loginSheet.close" | "time.heading" | "time.dayStrip.legend" | "time.nearest" | "time.current" | "time.nextFree" | "time.shortNotice" | "time.weekend.pct" | "time.weekend.mixed" | "time.month.show" | "time.month.hide" | "time.month.previous" | "time.month.next" | "time.month.heading" | "time.month.note" | "time.party.sequential" | "time.party.parallel" | "time.party.seat" | "time.party.seatSeparator" | "time.parallel.offer.two" | "time.parallel.offer.other" | "time.parallel.accept" | "time.empty.closed" | "time.empty.over" | "time.empty.full" | "time.empty.stylist" | "time.empty.unknown" | "time.empty.callLink" | "time.empty.callLinkAria" | "time.empty.callSuffix" | "time.empty.callPlain" | "time.loading" | "time.skeleton.dayPlaceholder" | "time.taken.message" | "time.taken.close" | "manage.heading" | "manage.serviceFallback" | "manage.card.named" | "manage.card.when" | "manage.card.whenWithStylist" | "manage.appointment.named" | "manage.appointment.namedSibilant" | "manage.appointment.unnamed" | "manage.ringUs" | "manage.ringUsOn" | "manage.callUs" | "manage.callUsOn" | "manage.error.windowPassed" | "manage.error.slotTaken" | "manage.error.notFound" | "manage.error.conflict" | "manage.error.invalidInput" | "manage.error.unavailable" | "manage.freeUntil" | "manage.remaining.in" | "manage.remaining.daysAndHours" | "manage.remaining.underMinute" | "manage.remaining.day.one" | "manage.remaining.day.other" | "manage.remaining.hour.one" | "manage.remaining.hour.other" | "manage.remaining.minute.one" | "manage.remaining.minute.other" | "manage.change" | "manage.cancel" | "manage.callToChange" | "manage.callToCancel" | "manage.blocked" | "manage.blocked.suffix" | "manage.blocked.plain" | "manage.calendar" | "manage.closed.cancelled" | "manage.closed.completed" | "manage.closed.noShow" | "manage.closed.pending" | "manage.closed.pendingCall" | "manage.closed.pendingCallPlain" | "manage.bookNew" | "manage.party.heading" | "manage.party.justThisOne" | "manage.party.unnamed" | "manage.party.note" | "manage.party.noteSuffix" | "manage.back" | "manage.reschedule.lead" | "manage.reschedule.leadWithStylist" | "manage.reschedule.failed" | "manage.reschedule.failedSuffix" | "manage.reschedule.loading" | "manage.move.question" | "manage.move.questionWithStylist" | "manage.move.surcharge" | "manage.move.confirm" | "manage.move.pickAnother" | "manage.cancel.question" | "manage.cancel.reasonLegend" | "manage.cancel.reason.illness" | "manage.cancel.reason.noLongerSuits" | "manage.cancel.reason.other" | "manage.cancel.confirm" | "manage.cancel.keep" | "manage.cancelled" | "manage.cancelled.findNew" | "manage.moved" | "manage.movedTo" | "manage.moved.view" | "manage.moved.noLink" | "manage.moved.noLinkSuffix" | "manage.portal" | "childCards.empty" | "childCards.neverVisited" | "childCards.lastVisit" | "childCards.lastVisitNoService" | "childCards.book" | "childCards.stylist" | "childCards.next" | "childCards.none" | "dataControls.heading" | "dataControls.export" | "dataControls.delete" | "dataControls.confirmHeading" | "dataControls.consequences" | "dataControls.confirmLabel" | "dataControls.confirmHelp" | "dataControls.wrongWord" | "dataControls.deleteForever" | "dataControls.cancel" | "dataControls.unreachable" | "dataControls.confirmWord" | "ageConfirm.heading" | "ageConfirm.lead" | "ageConfirm.legend" | "ageConfirm.birthYear" | "ageConfirm.birthMonth" | "ageConfirm.birthMonthUnknown" | "ageConfirm.confirm" | "ageConfirm.dismiss" | "familyEditor.heading" | "familyEditor.lead" | "familyEditor.empty" | "familyEditor.legend" | "familyEditor.add" | "familyEditor.name" | "familyEditor.birthYear" | "familyEditor.birthYearPlaceholder" | "familyEditor.birthMonth" | "familyEditor.birthMonthUnknown" | "familyEditor.stylist" | "familyEditor.stylistNone" | "familyEditor.stylistFormer" | "familyEditor.notes" | "familyEditor.notesPlaceholder" | "familyEditor.newRow" | "familyEditor.save" | "familyEditor.remove" | "familyEditor.removeNamed" | "familyEditor.removeRow" | "familyEditor.saved" | "familyEditor.savedNoDetails" | "familyEditor.partial" | "familyEditor.removed" | "familyEditor.unreachable" | "familyEditor.ageConfirmed" | "familyEditor.ageSaved" | "logout.button" | "logout.unreachable" | "portalShell.nav" | "portalShell.navBar" | "portalUnreachable.heading" | "portalUnreachable.body" | "portalUnreachable.retry" | "portalUnreachable.call" | "profileForm.heading" | "profileForm.firstName" | "profileForm.lastName" | "profileForm.phone" | "profileForm.email" | "profileForm.emailHelp" | "profileForm.save" | "profileForm.saved" | "profileForm.restored" | "profileForm.marketing" | "profileForm.unreachable" | "rebook.heading" | "rebook.empty" | "rebook.serviceFallback" | "rebook.anyStylist" | "rebook.cta" | "upcoming.heading" | "upcoming.empty" | "upcoming.book" | "upcoming.next" | "upcoming.today" | "upcoming.tomorrow" | "upcoming.inDays" | "upcoming.when" | "upcoming.serviceFallback" | "upcoming.anyStylist" | "upcoming.manage" | "upcoming.noManage" | "upcoming.noManageWithPhone" | "upcoming.call" | "vippsLink.heading" | "vippsLink.linked" | "vippsLink.pitch" | "vippsLink.button" | "vippsLink.success" | "vippsLink.conflict" | "vippsLink.failed" | "vippsLink.unavailable" | "vippsLink.throttled" | "history.heading" | "history.empty" | "history.serviceFallback" | "history.count.one" | "history.count.other" | "history.unknownAmount" | "service.multiHint" | "service.total" | "service.chooseFirst" | "service.continue" | "service.party.nothingBookable" | "service.tabDone" | "service.heading" | "service.categoriesLegend" | "service.sameAsLast" | "service.chooseOther" | "service.duration" | "service.phoneOnly" | "service.phoneOnlyLinkLabel" | "service.ageDivider.named" | "service.ageDivider.unnamed" | "service.party.listLabel" | "service.party.adultAlone" | "service.party.nothingFits" | "service.party.remove" | "stylist.heading" | "stylist.firstAvailable" | "stylist.firstAvailableSubtitle" | "stylist.firstAvailableBadge" | "stylist.pendingName" | "stylist.nextAvailable" | "stylist.loading" | "stylist.party.legend" | "stylist.party.sequential" | "stylist.party.sequentialMinutes" | "stylist.party.parallel.two" | "stylist.party.parallel.three" | "stylist.party.parallel.other" | "stylist.party.parallelMinutes" | "stylist.party.parallelNote.two" | "stylist.party.parallelNote.three" | "stylist.party.parallelNote.other" | "summary.placeholder.who" | "summary.placeholder.service" | "summary.next" | "who.heading" | "who.guest.groupLabel" | "who.guest.children.one" | "who.guest.children.other" | "who.guest.adult" | "who.guest.addedList" | "who.family.legend" | "who.family.self" | "who.family.limit")[];
+export declare const BOOKING_LABEL_KEYS: readonly ("addChild.trigger" | "addChild.title" | "addChild.description.saved" | "addChild.description.local" | "addChild.name" | "addChild.birthYear" | "addChild.birthYearPlaceholder" | "addChild.birthMonth" | "addChild.birthMonthUnknown" | "addChild.notes" | "addChild.missing" | "addChild.submit" | "addChild.close" | "recap.label" | "recap.time" | "recap.line" | "recap.lineFor" | "recap.anyStylist" | "recap.total" | "recap.edit" | "recap.editLabel" | "recap.alsoFree" | "recap.swapTo" | "bookingSkeleton.opening" | "confirmation.heading" | "confirmation.serviceFor" | "confirmation.when" | "confirmation.party.heading" | "confirmation.party.line" | "confirmation.party.stylist" | "confirmation.party.total" | "confirmation.calendar" | "confirmation.manage" | "confirmation.manageFor" | "confirmation.portal" | "confirmation.startOver" | "details.heading" | "details.phone.label" | "details.phone.prefix" | "details.phone.error" | "details.name.label" | "details.known.label" | "details.known.for" | "details.known.self" | "details.known.adult" | "details.known.child" | "details.child.name" | "details.child.year" | "details.child.yearPlaceholder" | "details.email.label" | "details.email.help" | "details.email.lockedHelp" | "details.email.error" | "details.notes.label" | "details.notes.placeholder" | "details.terms.text" | "details.terms.link" | "details.marketing.text" | "details.error.maxParty" | "details.error.slotTaken" | "details.error.conflict" | "details.error.invalidInput" | "details.error.unconfigured" | "details.error.upstreamError" | "details.error.inProgress" | "details.call.link" | "details.call.none" | "details.submit" | "otp.label" | "vipps.button" | "vipps.unavailable" | "vipps.throttled" | "login.heading" | "login.codeHeading" | "login.or" | "login.continueEmail" | "login.emailIntro" | "login.emailLabel" | "login.sendCode" | "login.codeLabel" | "login.submitCode" | "login.codeHelp" | "login.codeHelpVipps" | "login.vippsSentTo" | "login.vippsSentToUnknown" | "login.cooldownWait" | "login.cooldownReady" | "login.resendIn" | "login.resend" | "login.switchEmail" | "login.useEmailInstead" | "login.notice.sent" | "login.notice.resent" | "login.notice.unreachable" | "login.notice.badEmail" | "login.notice.invalid" | "login.notice.throttled" | "login.notice.vippsInvalid" | "login.notice.vippsConflict" | "loginSheet.prompt" | "loginSheet.trigger" | "loginSheet.intro" | "loginSheet.vipps" | "loginSheet.close" | "time.heading" | "time.dayStrip.legend" | "time.nearest" | "time.current" | "time.nextFree" | "time.shortNotice" | "time.weekend.pct" | "time.weekend.mixed" | "time.month.show" | "time.month.hide" | "time.month.previous" | "time.month.next" | "time.month.heading" | "time.month.note" | "time.party.sequential" | "time.party.parallel" | "time.party.seat" | "time.party.seatSeparator" | "time.parallel.offer.two" | "time.parallel.offer.other" | "time.parallel.accept" | "time.empty.closed" | "time.empty.over" | "time.empty.full" | "time.empty.stylist" | "time.empty.unknown" | "time.empty.callLink" | "time.empty.callLinkAria" | "time.empty.callSuffix" | "time.empty.callPlain" | "time.loading" | "time.skeleton.dayPlaceholder" | "time.taken.message" | "time.taken.close" | "time.soonest.heading" | "time.soonest.pick" | "time.soonest.with" | "time.dayChip.free" | "time.dayChip.freeOne" | "time.dayChip.full" | "time.week.none" | "time.week.more" | "manage.heading" | "manage.serviceFallback" | "manage.card.named" | "manage.card.when" | "manage.card.whenWithStylist" | "manage.appointment.named" | "manage.appointment.namedSibilant" | "manage.appointment.unnamed" | "manage.ringUs" | "manage.ringUsOn" | "manage.callUs" | "manage.callUsOn" | "manage.error.windowPassed" | "manage.error.slotTaken" | "manage.error.notFound" | "manage.error.conflict" | "manage.error.invalidInput" | "manage.error.unavailable" | "manage.freeUntil" | "manage.remaining.in" | "manage.remaining.daysAndHours" | "manage.remaining.underMinute" | "manage.remaining.day.one" | "manage.remaining.day.other" | "manage.remaining.hour.one" | "manage.remaining.hour.other" | "manage.remaining.minute.one" | "manage.remaining.minute.other" | "manage.change" | "manage.cancel" | "manage.callToChange" | "manage.callToCancel" | "manage.blocked" | "manage.blocked.suffix" | "manage.blocked.plain" | "manage.calendar" | "manage.closed.cancelled" | "manage.closed.completed" | "manage.closed.noShow" | "manage.closed.pending" | "manage.closed.pendingCall" | "manage.closed.pendingCallPlain" | "manage.bookNew" | "manage.party.heading" | "manage.party.justThisOne" | "manage.party.unnamed" | "manage.party.note" | "manage.party.noteSuffix" | "manage.back" | "manage.reschedule.lead" | "manage.reschedule.leadWithStylist" | "manage.reschedule.failed" | "manage.reschedule.failedSuffix" | "manage.reschedule.loading" | "manage.move.question" | "manage.move.questionWithStylist" | "manage.move.surcharge" | "manage.move.confirm" | "manage.move.pickAnother" | "manage.cancel.question" | "manage.cancel.reasonLegend" | "manage.cancel.reason.illness" | "manage.cancel.reason.noLongerSuits" | "manage.cancel.reason.other" | "manage.cancel.confirm" | "manage.cancel.keep" | "manage.cancelled" | "manage.cancelled.findNew" | "manage.moved" | "manage.movedTo" | "manage.moved.view" | "manage.moved.noLink" | "manage.moved.noLinkSuffix" | "manage.portal" | "childCards.empty" | "childCards.neverVisited" | "childCards.lastVisit" | "childCards.lastVisitNoService" | "childCards.book" | "childCards.stylist" | "childCards.next" | "childCards.none" | "dataControls.heading" | "dataControls.export" | "dataControls.delete" | "dataControls.confirmHeading" | "dataControls.consequences" | "dataControls.confirmLabel" | "dataControls.confirmHelp" | "dataControls.wrongWord" | "dataControls.deleteForever" | "dataControls.cancel" | "dataControls.unreachable" | "dataControls.confirmWord" | "ageConfirm.heading" | "ageConfirm.lead" | "ageConfirm.legend" | "ageConfirm.birthYear" | "ageConfirm.birthMonth" | "ageConfirm.birthMonthUnknown" | "ageConfirm.confirm" | "ageConfirm.dismiss" | "familyEditor.heading" | "familyEditor.lead" | "familyEditor.empty" | "familyEditor.legend" | "familyEditor.add" | "familyEditor.name" | "familyEditor.birthYear" | "familyEditor.birthYearPlaceholder" | "familyEditor.birthMonth" | "familyEditor.birthMonthUnknown" | "familyEditor.stylist" | "familyEditor.stylistNone" | "familyEditor.stylistFormer" | "familyEditor.notes" | "familyEditor.notesPlaceholder" | "familyEditor.newRow" | "familyEditor.save" | "familyEditor.remove" | "familyEditor.removeNamed" | "familyEditor.removeRow" | "familyEditor.saved" | "familyEditor.savedNoDetails" | "familyEditor.partial" | "familyEditor.removed" | "familyEditor.unreachable" | "familyEditor.ageConfirmed" | "familyEditor.ageSaved" | "logout.button" | "logout.unreachable" | "portalShell.nav" | "portalShell.navBar" | "portalUnreachable.heading" | "portalUnreachable.body" | "portalUnreachable.retry" | "portalUnreachable.call" | "profileForm.heading" | "profileForm.firstName" | "profileForm.lastName" | "profileForm.phone" | "profileForm.email" | "profileForm.emailHelp" | "profileForm.save" | "profileForm.saved" | "profileForm.restored" | "profileForm.marketing" | "profileForm.unreachable" | "rebook.heading" | "rebook.empty" | "rebook.serviceFallback" | "rebook.anyStylist" | "rebook.cta" | "upcoming.heading" | "upcoming.empty" | "upcoming.book" | "upcoming.next" | "upcoming.today" | "upcoming.tomorrow" | "upcoming.inDays" | "upcoming.when" | "upcoming.serviceFallback" | "upcoming.anyStylist" | "upcoming.manage" | "upcoming.noManage" | "upcoming.noManageWithPhone" | "upcoming.call" | "vippsLink.heading" | "vippsLink.linked" | "vippsLink.pitch" | "vippsLink.button" | "vippsLink.success" | "vippsLink.conflict" | "vippsLink.failed" | "vippsLink.unavailable" | "vippsLink.throttled" | "history.heading" | "history.empty" | "history.serviceFallback" | "history.count.one" | "history.count.other" | "history.unknownAmount" | "service.multiHint" | "service.total" | "service.chooseFirst" | "service.continue" | "service.party.nothingBookable" | "service.tabDone" | "service.heading" | "service.categoriesLegend" | "service.sameAsLast" | "service.chooseOther" | "service.duration" | "service.phoneOnly" | "service.phoneOnlyLinkLabel" | "service.ageDivider.named" | "service.ageDivider.unnamed" | "service.party.listLabel" | "service.party.adultAlone" | "service.party.nothingFits" | "service.party.remove" | "stylist.heading" | "stylist.firstAvailable" | "stylist.firstAvailableSubtitle" | "stylist.firstAvailableBadge" | "stylist.pendingName" | "stylist.nextAvailable" | "stylist.loading" | "stylist.party.legend" | "stylist.party.sequential" | "stylist.party.sequentialMinutes" | "stylist.party.parallel.two" | "stylist.party.parallel.three" | "stylist.party.parallel.other" | "stylist.party.parallelMinutes" | "stylist.party.parallelNote.two" | "stylist.party.parallelNote.three" | "stylist.party.parallelNote.other" | "summary.placeholder.who" | "summary.placeholder.service" | "summary.next" | "summary.hint.who" | "summary.hint.service" | "summary.hint.when" | "who.heading" | "who.guest.groupLabel" | "who.guest.children.one" | "who.guest.children.other" | "who.guest.adult" | "who.guest.addedList" | "who.family.legend" | "who.family.self" | "who.family.limit" | "who.party.children" | "who.party.childrenNote" | "who.party.adult" | "who.party.adultNote" | "who.party.fewer" | "who.party.more" | "who.party.count")[];
 export type BookingLabelKey = BookingRequiredLabelKey | BookingOptionalLabelKey;
 /**
  * Keys added after a screen first shipped, for a feature a caller opts into.
  * A pack may leave them out; a screen using the feature needs them.
  */
-export type BookingOptionalLabelKey = (typeof SERVICE_SCREEN_MULTI_LABEL_KEYS)[number];
+export type BookingOptionalLabelKey = (typeof SERVICE_SCREEN_MULTI_LABEL_KEYS)[number] | (typeof BOOKING_RECAP_LABEL_KEYS)[number] | (typeof TIME_SCREEN_FINDER_LABEL_KEYS)[number] | (typeof SUMMARY_BAR_HINT_LABEL_KEYS)[number] | (typeof WHO_SCREEN_PARTY_LABEL_KEYS)[number];
 /** Keys every complete pack defines. */
 export type BookingRequiredLabelKey = (typeof WHO_SCREEN_LABEL_KEYS)[number] | (typeof ADD_CHILD_SHEET_LABEL_KEYS)[number] | (typeof SERVICE_SCREEN_LABEL_KEYS)[number] | (typeof STYLIST_SCREEN_LABEL_KEYS)[number] | (typeof TIME_SCREEN_LABEL_KEYS)[number] | (typeof MANAGE_SCREEN_LABEL_KEYS)[number] | (typeof DETAILS_SCREEN_LABEL_KEYS)[number] | (typeof SUMMARY_BAR_LABEL_KEYS)[number] | (typeof CONFIRMATION_LABEL_KEYS)[number] | (typeof BOOKING_SKELETON_LABEL_KEYS)[number] | (typeof LOGIN_SHEET_LABEL_KEYS)[number] | (typeof PORTAL_SHELL_LABEL_KEYS)[number] | (typeof PORTAL_UNREACHABLE_LABEL_KEYS)[number] | (typeof UPCOMING_BOOKINGS_LABEL_KEYS)[number] | (typeof VISIT_HISTORY_LABEL_KEYS)[number] | (typeof REBOOK_CARDS_LABEL_KEYS)[number] | (typeof CHILD_CARDS_LABEL_KEYS)[number] | (typeof FAMILY_EDITOR_LABEL_KEYS)[number] | (typeof PROFILE_FORM_LABEL_KEYS)[number] | (typeof DATA_CONTROLS_LABEL_KEYS)[number] | (typeof LOGOUT_BUTTON_LABEL_KEYS)[number] | (typeof VIPPS_LINK_ROW_LABEL_KEYS)[number];
 /** A complete label pack for one locale. The opt-in keys may be absent. */

package/dist/booking/label-keys.js

@@ -1,4 +1,5 @@
 import { ADD_CHILD_SHEET_LABEL_KEYS } from './add-child-sheet.js';
+import { BOOKING_RECAP_LABEL_KEYS } from './booking-recap.js';
 import { BOOKING_SKELETON_LABEL_KEYS } from './booking-skeleton.js';
 import { CONFIRMATION_LABEL_KEYS } from './confirmation.js';
 import { DETAILS_SCREEN_LABEL_KEYS } from './details-screen.js';
@@ -17,9 +18,9 @@ import { VIPPS_LINK_ROW_LABEL_KEYS } from './portal/vipps-link-row.js';
 import { VISIT_HISTORY_LABEL_KEYS } from './portal/visit-history.js';
 import { SERVICE_SCREEN_LABEL_KEYS, SERVICE_SCREEN_MULTI_LABEL_KEYS } from './service-screen.js';
 import { STYLIST_SCREEN_LABEL_KEYS } from './stylist-screen.js';
-import { SUMMARY_BAR_LABEL_KEYS } from './summary-bar.js';
-import { TIME_SCREEN_LABEL_KEYS } from './time-screen.js';
-import { WHO_SCREEN_LABEL_KEYS } from './who-screen.js';
+import { SUMMARY_BAR_HINT_LABEL_KEYS, SUMMARY_BAR_LABEL_KEYS } from './summary-bar.js';
+import { TIME_SCREEN_FINDER_LABEL_KEYS, TIME_SCREEN_LABEL_KEYS } from './time-screen.js';
+import { WHO_SCREEN_LABEL_KEYS, WHO_SCREEN_PARTY_LABEL_KEYS } from './who-screen.js';
 /**
  * Every label key any booking screen reads, once. A complete pack for a
  * locale is a `BookingLabels`; each screen's `labels` prop is a subset of it,
@@ -31,14 +32,18 @@ import { WHO_SCREEN_LABEL_KEYS } from './who-screen.js';
 export const BOOKING_LABEL_KEYS = [
     ...new Set([
         ...WHO_SCREEN_LABEL_KEYS,
+        ...WHO_SCREEN_PARTY_LABEL_KEYS,
         ...ADD_CHILD_SHEET_LABEL_KEYS,
         ...SERVICE_SCREEN_LABEL_KEYS,
         ...SERVICE_SCREEN_MULTI_LABEL_KEYS,
         ...STYLIST_SCREEN_LABEL_KEYS,
         ...TIME_SCREEN_LABEL_KEYS,
+        ...TIME_SCREEN_FINDER_LABEL_KEYS,
         ...MANAGE_SCREEN_LABEL_KEYS,
+        ...BOOKING_RECAP_LABEL_KEYS,
         ...DETAILS_SCREEN_LABEL_KEYS,
         ...SUMMARY_BAR_LABEL_KEYS,
+        ...SUMMARY_BAR_HINT_LABEL_KEYS,
         ...CONFIRMATION_LABEL_KEYS,
         ...BOOKING_SKELETON_LABEL_KEYS,
         ...LOGIN_SHEET_LABEL_KEYS,

package/dist/booking/stylist-screen.d.ts

@@ -42,6 +42,12 @@ export interface StylistOption {
     /** The avatar's fallback: initials, or a symbol for «first available». */
     badge: string;
     photoUrl?: string | null;
+    /**
+     * For «first available» with `firstAvailableFaces`: the photos of the
+     * stylists it can be. Two or more draw a small group in the avatar instead
+     * of the badge.
+     */
+    faces?: readonly string[];
     /** The formatted next opening, when there is one. */
     availability?: string | null;
     availabilityLoading?: boolean;
@@ -59,6 +65,8 @@ export interface StylistCardProps {
     selectedClassName?: string;
     /** Merged onto the next-opening line (the `nextAvailable` slot). */
     nextAvailableClassName?: string;
+    /** `StylistScreen`'s `row`: draw the phone's avatar tile at every width. */
+    row?: boolean;
 }
 export interface StylistScreenComponents {
     StylistCard?: ComponentType<StylistCardProps>;
@@ -98,6 +106,25 @@ export interface StylistScreenProps {
     /** A polite announcement once the list is here (e.g. the restored stylist is gone). */
     notice?: string | null;
     onPick: (resourceId: string | null) => void;
+    /**
+     * Draw «first available» as the faces of the first three qualified stylists
+     * with a photo (in the salon's order) instead of its badge: it means «any of
+     * these», so it shows them, and only ones who can do the whole basket.
+     * Falls back to the badge with fewer than two photos.
+     */
+    firstAvailableFaces?: boolean;
+    /**
+     * On a phone, fade the right edge of the sideways row so a cut-off card reads
+     * as «there is more», not as a layout bug.
+     */
+    edgeFade?: boolean;
+    /**
+     * Keep the phone's one row of avatars at every width instead of the column
+     * of cards from `md`, so a wide screen reaches the times without scrolling
+     * past every stylist. The chosen stylist's bio, which a tile has no room
+     * for, is shown under the row.
+     */
+    row?: boolean;
     /**
      * Present only for a family. One child gets no picker: «one after the
      * other» is not a choice when there is nobody to be after.
@@ -124,6 +151,6 @@ export interface StylistScreenProps {
     classNames?: SlotClassNames<StylistScreenSlot>;
     components?: StylistScreenComponents;
 }
-export declare function StylistScreen({ labels, format, now, serviceIds, resources, selectedResourceId, nextAvailableTs, nextAvailableLoading, loading, skeletonCount, pendingName, notice, onPick, party, classNames, components, }: StylistScreenProps): import("react").JSX.Element;
+export declare function StylistScreen({ labels, format, now, serviceIds, resources, selectedResourceId, nextAvailableTs, nextAvailableLoading, loading, skeletonCount, pendingName, notice, onPick, firstAvailableFaces, edgeFade, row, party, classNames, components, }: StylistScreenProps): import("react").JSX.Element;
 /** The default stylist option: avatar (photo or badge), name(s), bio, next opening. */
-export declare function DefaultStylistCard({ ref, option, selected, tabIndex, onClick, labels, className, selectedClassName, nextAvailableClassName, }: StylistCardProps): import("react").JSX.Element;
+export declare function DefaultStylistCard({ ref, option, selected, tabIndex, onClick, labels, className, selectedClassName, nextAvailableClassName, row, }: StylistCardProps): import("react").JSX.Element;

package/dist/booking/stylist-screen.js

@@ -49,6 +49,14 @@ export const STYLIST_SCREEN_LABEL_KEYS = [
  */
 const OPTION_HEIGHT = 'h-32 md:h-24';
 const DEFAULT_SKELETON_COUNT = 5;
+/** How many faces «first available» draws with `firstAvailableFaces`. */
+const FACE_COUNT = 3;
+/** One on top, two below, overlapping like people standing together. */
+const FACE_POSITIONS = [
+    'left-1/2 top-[3px] -translate-x-1/2',
+    'bottom-[3px] left-[3px]',
+    'bottom-[3px] right-[3px]',
+];
 const HEADING_ID = 'booking-stylist-heading';
 /** «Ada» from «Ada Demo»: a phone tile has room for one word. */
 function firstName(displayName) {
@@ -64,7 +72,7 @@ function bySize(labels, base, size, sizeWord) {
     const suffix = SIZE_WORDS[size] ?? 'other';
     return renderLabel(labels[`${base}.${suffix}`], { count: size, sizeWord: sizeWord ?? size });
 }
-export function StylistScreen({ labels, format, now, serviceIds, resources, selectedResourceId = null, nextAvailableTs, nextAvailableLoading = false, loading = false, skeletonCount = DEFAULT_SKELETON_COUNT, pendingName = null, notice = null, onPick, party, classNames, components, }) {
+export function StylistScreen({ labels, format, now, serviceIds, resources, selectedResourceId = null, nextAvailableTs, nextAvailableLoading = false, loading = false, skeletonCount = DEFAULT_SKELETON_COUNT, pendingName = null, notice = null, onPick, firstAvailableFaces = false, edgeFade = false, row = false, party, classNames, components, }) {
     // `every`, not `some`: the step asks one question for the whole visit, so a
     // stylist who covers one of two services is not an answer — it is a refusal
     // the engine issues at submit, offered here as a choice.
@@ -88,6 +96,14 @@ export function StylistScreen({ labels, format, now, serviceIds, resources, sele
             shortName: labelText(labels['stylist.firstAvailable']),
             subtitle: labelText(labels['stylist.firstAvailableSubtitle']),
             badge: labelText(labels['stylist.firstAvailableBadge']),
+            ...(firstAvailableFaces && !loading
+                ? {
+                    // Distinct photos: two stylists sharing one picture is one face.
+                    faces: [
+                        ...new Set(qualified.flatMap((resource) => (resource.photoUrl ? [resource.photoUrl] : []))),
+                    ].slice(0, FACE_COUNT),
+                }
+                : {}),
         },
         ...(loading
             ? held
@@ -114,7 +130,7 @@ export function StylistScreen({ labels, format, now, serviceIds, resources, sele
                         }), classNames: classNames })] })), party?.mode === 'parallel' ? (_jsx("p", { className: "rounded-lg border border-border bg-card px-5 py-4 text-sm", children: bySize(labels, 'stylist.party.parallelNote', party.size, party.sizeWord) })) : (_jsx(StylistRadioGroup, { options: options, selectedResourceId: selectedResourceId, 
                 // The held option takes one placeholder's place, so the row is
                 // exactly as long as it was and nothing after it moves.
-                skeletons: loading ? Math.max(0, skeletonCount - (options.length - 1)) : 0, busy: loading, onPick: onPick, labels: labels, classNames: classNames, Card: components?.StylistCard ?? DefaultStylistCard })), _jsx(LiveStatus, { text: loading ? labelText(labels['stylist.loading']) : notice })] }));
+                skeletons: loading ? Math.max(0, skeletonCount - (options.length - 1)) : 0, busy: loading, onPick: onPick, labels: labels, classNames: classNames, edgeFade: edgeFade, row: row, Card: components?.StylistCard ?? DefaultStylistCard })), row && party?.mode !== 'parallel' && (_jsx(ChosenBio, { options: options, selectedResourceId: selectedResourceId })), _jsx(LiveStatus, { text: loading ? labelText(labels['stylist.loading']) : notice })] }));
 }
 /**
  * The options as one radiogroup with a roving tab stop.
@@ -123,7 +139,7 @@ export function StylistScreen({ labels, format, now, serviceIds, resources, sele
  * stylist is cheap and reversible, and a group that needed Space after every
  * arrow would be a list of buttons in a radiogroup's clothes.
  */
-function StylistRadioGroup({ options, selectedResourceId, skeletons, busy, onPick, labels, classNames, Card, }) {
+function StylistRadioGroup({ options, selectedResourceId, skeletons, busy, onPick, labels, classNames, edgeFade, row, Card, }) {
     const groupRef = useRef(null);
     const optionRefs = useRef([]);
     const selectedIndex = options.findIndex((option) => option.resourceId === selectedResourceId);
@@ -176,9 +192,13 @@ function StylistRadioGroup({ options, selectedResourceId, skeletons, busy, onPic
         // Phone: one row of fixed height, scrolled sideways with snap; the
         // padding leaves room for the selected avatar's ring, which the scroll
         // box would otherwise clip. `md`: the column of cards.
-        className: slotClass(classNames, 'group', 'relative -mx-1 flex h-36 snap-x snap-mandatory scroll-px-1 gap-1 overflow-x-auto overscroll-x-contain px-1 py-2', 'md:mx-0 md:h-auto md:snap-none md:flex-col md:gap-2 md:overflow-visible md:p-0'), children: [options.map((option, index) => (_jsx(Card, { ref: (node) => {
+        className: slotClass(classNames, 'group', 'relative -mx-1 flex h-36 snap-x snap-mandatory scroll-px-1 gap-1 overflow-x-auto overscroll-x-contain px-1 py-2', 
+        // The last few pixels fade, so the cut-off card reads as «more this way».
+        // The trailing room lets the last card scroll wholly clear of the fade.
+        edgeFade &&
+            cn('pr-10 [mask-image:linear-gradient(to_right,#000_calc(100%-2.5rem),transparent)]', !row && 'md:[mask-image:none]'), !row && 'md:mx-0 md:h-auto md:snap-none md:flex-col md:gap-2 md:overflow-visible md:p-0'), children: [options.map((option, index) => (_jsx(Card, { ref: (node) => {
                     optionRefs.current[index] = node;
-                }, option: option, selected: option.resourceId === selectedResourceId, tabIndex: index === tabStop ? 0 : -1, onClick: () => onPick(option.resourceId), labels: labels, className: classNames?.card, selectedClassName: classNames?.cardSelected, nextAvailableClassName: classNames?.nextAvailable }, option.resourceId ?? 'first-available'))), Array.from({ length: skeletons }, (_, index) => (_jsx(SkeletonCard, {}, index)))] }));
+                }, option: option, selected: option.resourceId === selectedResourceId, tabIndex: index === tabStop ? 0 : -1, onClick: () => onPick(option.resourceId), labels: labels, className: classNames?.card, selectedClassName: classNames?.cardSelected, nextAvailableClassName: classNames?.nextAvailable, row: row }, option.resourceId ?? 'first-available'))), Array.from({ length: skeletons }, (_, index) => (_jsx(SkeletonCard, { row: row }, index)))] }));
 }
 /** The restored stylist's stand-in: a real, checked radio of the final size,
  * with its next-opening row pulsing like every card still waiting for one. */
@@ -208,23 +228,51 @@ function ModeCard({ selected, onClick, title, subtitle, classNames, }) {
             : 'border-border bg-card hover:border-primary', classNames?.modeCard, selected && classNames?.modeCardSelected), children: [_jsx("span", { className: "font-medium", children: title }), _jsx("span", { className: "text-sm font-normal text-muted-foreground tabular-nums", children: subtitle })] }));
 }
 /** The default stylist option: avatar (photo or badge), name(s), bio, next opening. */
-export function DefaultStylistCard({ ref, option, selected, tabIndex, onClick, labels, className, selectedClassName, nextAvailableClassName, }) {
+export function DefaultStylistCard({ ref, option, selected, tabIndex, onClick, labels, className, selectedClassName, nextAvailableClassName, row = false, }) {
     const id = useId();
+    // From `md` the tile becomes a card, unless the screen keeps the row.
+    const md = (classes) => (row ? '' : classes);
     const nameId = `${id}-name`;
     const nextId = `${id}-next`;
     const bioId = `${id}-bio`;
-    const { name, subtitle, badge, photoUrl, availability, availabilityLoading, reserveAvailability, } = option;
+    const { name, subtitle, badge, photoUrl, faces, availability, availabilityLoading, reserveAvailability, } = option;
     return (_jsxs("button", { ref: ref, type: "button", role: "radio", "aria-checked": selected, tabIndex: tabIndex, onClick: onClick, "aria-labelledby": availability ? `${nameId} ${nextId}` : nameId, "aria-describedby": subtitle ? bioId : undefined, 
         // Ring and weight alongside the tint: the selected option has to be
         // obvious on a monochrome screen too. On a phone the ring is on the
         // avatar; from `md` it is on the card.
-        className: cn('group flex w-24 shrink-0 snap-start flex-col items-center gap-1 rounded-lg px-1 pt-1 text-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary', 'md:w-full md:shrink md:flex-row md:gap-4 md:border md:px-5 md:py-4 md:text-left', OPTION_HEIGHT, selected
-            ? 'font-semibold md:border-primary md:bg-primary/10 md:ring-2 md:ring-primary'
-            : 'md:border-border md:bg-card md:hover:border-primary', className, selected && selectedClassName), children: [_jsx("span", { "aria-hidden": "true", "data-testid": "stylist-avatar", className: cn('flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-full bg-secondary/30 font-semibold md:size-12', selected
-                    ? 'ring-2 ring-primary ring-offset-2 ring-offset-background md:ring-0 md:ring-offset-0'
-                    : 'ring-1 ring-border md:ring-0'), children: photoUrl ? (_jsx("img", { src: photoUrl, alt: "", className: "size-full object-cover", width: 56, height: 56, loading: "lazy", decoding: "async" })) : (badge) }), _jsxs("span", { className: "flex w-full min-w-0 flex-col md:w-auto", children: [_jsx("span", { "aria-hidden": "true", className: "h-5 truncate text-sm font-medium md:hidden", children: option.shortName }), _jsx("span", { id: nameId, className: "hidden truncate font-medium md:block", children: name }), subtitle && (_jsx("span", { id: bioId, className: "hidden truncate text-sm text-muted-foreground md:block", children: subtitle })), availability ? (_jsxs("span", { id: nextId, "data-testid": "next-available-row", className: cn('line-clamp-2 h-8 text-xs leading-4 text-foreground tabular-nums md:line-clamp-1 md:h-5 md:text-sm md:leading-5', nextAvailableClassName), children: [_jsx("span", { className: "sr-only md:not-sr-only", children: labels['stylist.nextAvailable'] }), ' ', availability] })) : (reserveAvailability && (_jsx("span", { "data-testid": "next-available-row", "aria-hidden": "true", className: "flex h-8 justify-center pt-1 md:block md:h-5 md:py-1", children: availabilityLoading && (_jsx("span", { className: "block h-3 w-16 animate-pulse rounded bg-muted md:w-36" })) })))] })] }));
+        className: cn('group flex w-24 shrink-0 snap-start flex-col items-center gap-1 rounded-lg px-1 pt-1 text-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary', md('md:w-full md:shrink md:flex-row md:gap-4 md:border md:px-5 md:py-4 md:text-left'), row ? 'h-32' : OPTION_HEIGHT, selected
+            ? cn('font-semibold', md('md:border-primary md:bg-primary/10 md:ring-2 md:ring-primary'))
+            : md('md:border-border md:bg-card md:hover:border-primary'), className, selected && selectedClassName), children: [_jsx("span", { "aria-hidden": "true", "data-testid": "stylist-avatar", className: cn('flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-full bg-secondary/30 font-semibold', md('md:size-12'), selected
+                    ? cn('ring-2 ring-primary ring-offset-2 ring-offset-background', md('md:ring-0 md:ring-offset-0'))
+                    : cn('ring-1 ring-border', md('md:ring-0'))), children: _jsx(StylistAvatarContent, { photoUrl: photoUrl, faces: faces, badge: badge, row: row }) }), _jsxs("span", { className: cn('flex w-full min-w-0 flex-col', md('md:w-auto')), children: [_jsx("span", { "aria-hidden": "true", className: cn('h-5 truncate text-sm font-medium', md('md:hidden')), children: option.shortName }), _jsx("span", { id: nameId, className: cn('hidden truncate font-medium', md('md:block')), children: name }), subtitle && (_jsx("span", { id: bioId, className: cn('hidden truncate text-sm text-muted-foreground', md('md:block')), children: subtitle })), availability ? (_jsxs("span", { id: nextId, "data-testid": "next-available-row", className: cn('line-clamp-2 h-8 text-xs leading-4 text-foreground tabular-nums', md('md:line-clamp-1 md:h-5 md:text-sm md:leading-5'), nextAvailableClassName), children: [_jsx("span", { className: cn('sr-only', md('md:not-sr-only')), children: labels['stylist.nextAvailable'] }), ' ', availability] })) : (reserveAvailability && (_jsx("span", { "data-testid": "next-available-row", "aria-hidden": "true", className: cn('flex h-8 justify-center pt-1', md('md:block md:h-5 md:py-1')), children: availabilityLoading && (_jsx("span", { className: cn('block h-3 w-16 animate-pulse rounded bg-muted', md('md:w-36')) })) })))] })] }));
+}
+/**
+ * What fills the avatar circle: the stylist's photo, a small group of faces
+ * for «first available» (`firstAvailableFaces`), or the badge.
+ */
+function StylistAvatarContent({ photoUrl, faces, badge, row, }) {
+    if (photoUrl) {
+        return (_jsx("img", { src: photoUrl, alt: "", className: "size-full object-cover", width: 56, height: 56, loading: "lazy", decoding: "async" }));
+    }
+    if (faces && faces.length >= 2) {
+        // A small group, for «any of these»: the faces of who it can be.
+        return (_jsx("span", { "data-testid": "stylist-faces", className: "relative size-full", children: faces.slice(0, FACE_POSITIONS.length).map((src, index) => (_jsx("img", { src: src, alt: "", width: 30, height: 30, decoding: "async", className: cn('absolute size-[30px] rounded-full object-cover ring-2 ring-background', !row && 'md:size-[26px]', FACE_POSITIONS[index]) }, src))) }));
+    }
+    return badge;
 }
 /** A stylist option before there is a stylist: the same box, the same circle, at both widths. */
-function SkeletonCard() {
-    return (_jsxs("div", { "aria-hidden": "true", "data-testid": "stylist-skeleton", className: cn('flex w-24 shrink-0 flex-col items-center gap-1 px-1 pt-1', 'md:w-full md:flex-row md:gap-4 md:rounded-lg md:border md:border-border md:bg-card md:px-5 md:py-4', OPTION_HEIGHT), children: [_jsx("span", { className: "size-14 shrink-0 animate-pulse rounded-full bg-muted md:size-12" }), _jsxs("span", { className: "flex w-full min-w-0 flex-col items-center gap-2 md:w-auto md:flex-1 md:items-start", children: [_jsx("span", { className: "h-4 w-14 animate-pulse rounded bg-muted md:w-28" }), _jsx("span", { className: "h-3 w-16 animate-pulse rounded bg-muted md:w-40" })] })] }));
+function SkeletonCard({ row }) {
+    const md = (classes) => (row ? '' : classes);
+    return (_jsxs("div", { "aria-hidden": "true", "data-testid": "stylist-skeleton", className: cn('flex w-24 shrink-0 flex-col items-center gap-1 px-1 pt-1', md('md:w-full md:flex-row md:gap-4 md:rounded-lg md:border md:border-border md:bg-card md:px-5 md:py-4'), row ? 'h-32' : OPTION_HEIGHT), children: [_jsx("span", { className: cn('size-14 shrink-0 animate-pulse rounded-full bg-muted', md('md:size-12')) }), _jsxs("span", { className: cn('flex w-full min-w-0 flex-col items-center gap-2', md('md:w-auto md:flex-1 md:items-start')), children: [_jsx("span", { className: cn('h-4 w-14 animate-pulse rounded bg-muted', md('md:w-28')) }), _jsx("span", { className: cn('h-3 w-16 animate-pulse rounded bg-muted', md('md:w-40')) })] })] }));
+}
+/**
+ * Under a `row`: the chosen stylist's bio, which a tile has no room for —
+ * «tar oftest de minste», read where the choice is made. Nothing for «first
+ * available», or a stylist without one.
+ */
+function ChosenBio({ options, selectedResourceId, }) {
+    const chosen = options.find((option) => option.resourceId === selectedResourceId);
+    if (!chosen || chosen.resourceId === null || !chosen.subtitle)
+        return null;
+    return (_jsxs("p", { "data-testid": "stylist-bio", className: "-mt-3 text-sm text-muted-foreground", children: [_jsx("span", { className: "font-medium text-foreground", children: chosen.name }), " \u00B7 ", chosen.subtitle] }));
 }

package/dist/booking/summary-bar.d.ts

@@ -10,18 +10,36 @@ import type { WizardStep } from './types.js';
  * wizard it summarises.
  */
 export declare const SUMMARY_BAR_LABEL_KEYS: readonly ["summary.placeholder.who", "summary.placeholder.service", "summary.next"];
-export type SummaryBarLabels = Record<(typeof SUMMARY_BAR_LABEL_KEYS)[number], BookingLabel>;
-/** `root` the bar, `line` the summary sentence, `next` the button. */
-export type SummaryBarSlot = 'root' | 'line' | 'next';
+/**
+ * Opt-in: what the bar says in place of a greyed-out button, per step, when
+ * `hideNextWhenDisabled` is on — the step moves on by itself once answered,
+ * so the useful words are what to tap (e.g. «Tap a time»). Absent: nothing.
+ */
+export declare const SUMMARY_BAR_HINT_LABEL_KEYS: readonly ["summary.hint.who", "summary.hint.service", "summary.hint.when"];
+export type SummaryBarLabels = Record<(typeof SUMMARY_BAR_LABEL_KEYS)[number], BookingLabel> & Partial<Record<(typeof SUMMARY_BAR_HINT_LABEL_KEYS)[number], BookingLabel>>;
+/** `root` the bar, `line` the summary sentence, `detail` its second line, `next` the button, `hint` the words in its place. */
+export type SummaryBarSlot = 'root' | 'line' | 'detail' | 'next' | 'hint';
 export interface SummaryBarProps {
     /** The summary sentence, e.g. «Service · Stylist · today 15:00 · 490 kr». Empty = nothing chosen. */
     line: string;
+    /**
+     * A second, smaller line under it (e.g. «today 15:00 · 490 kr»), so the part
+     * a parent checks is not the part an ellipsis eats on a phone. The bar keeps
+     * its one fixed height either way.
+     */
+    detail?: string;
     /** Whether the current step can be left. */
     canAdvance: boolean;
     /** The current step. The bar renders nothing on `details`, which has its own submit. */
     step: WizardStep;
     onNext: () => void;
+    /**
+     * Draw the button only while it does something. For a step that moves on by
+     * itself once answered, a disabled «next» is the loudest thing on the screen
+     * and reads as broken; the step's `summary.hint.*` label stands in its place.
+     */
+    hideNextWhenDisabled?: boolean;
     labels: SummaryBarLabels;
     classNames?: SlotClassNames<SummaryBarSlot>;
 }
-export declare function SummaryBar({ line, canAdvance, step, onNext, labels, classNames, }: SummaryBarProps): import("react").JSX.Element | null;
+export declare function SummaryBar({ line, detail, canAdvance, step, onNext, hideNextWhenDisabled, labels, classNames, }: SummaryBarProps): import("react").JSX.Element | null;

package/dist/booking/summary-bar.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderLabel } from './internal/label-parts.js';
 import { BookingButton } from './internal/ui.js';
 import { slotClass } from './slots.js';
 /**
@@ -17,16 +18,34 @@ export const SUMMARY_BAR_LABEL_KEYS = [
     'summary.placeholder.service',
     'summary.next',
 ];
-export function SummaryBar({ line, canAdvance, step, onNext, labels, classNames, }) {
+/**
+ * Opt-in: what the bar says in place of a greyed-out button, per step, when
+ * `hideNextWhenDisabled` is on — the step moves on by itself once answered,
+ * so the useful words are what to tap (e.g. «Tap a time»). Absent: nothing.
+ */
+export const SUMMARY_BAR_HINT_LABEL_KEYS = [
+    'summary.hint.who',
+    'summary.hint.service',
+    'summary.hint.when',
+];
+/** Which hint each step shows. */
+const HINT_KEYS = {
+    who: 'summary.hint.who',
+    service: 'summary.hint.service',
+    when: 'summary.hint.when',
+};
+export function SummaryBar({ line, detail, canAdvance, step, onNext, hideNextWhenDisabled = false, labels, classNames, }) {
     // Gone on the details step, not merely relabelled: that step's own button
     // carries the price and the commitment, and two sticky submits stacked at the
     // bottom of a phone is the outcome to avoid.
     if (step === 'details')
         return null;
+    const hintKey = HINT_KEYS[step];
+    const hint = hideNextWhenDisabled && !canAdvance && hintKey ? labels[hintKey] : undefined;
     // There from the first step at one fixed height, rather than appearing on
     // the first tap and pushing the page down under the visitor's thumb.
-    return (_jsxs("div", { className: slotClass(classNames, 'root', 'sticky bottom-0 z-40 flex h-16 items-center justify-between gap-4 border-t border-border bg-background/95 px-5 backdrop-blur-md'), children: [_jsx("p", { className: slotClass(classNames, 'line', 'min-w-0 truncate text-sm font-medium', !line && 'text-muted-foreground'), children: line ||
-                    (step === 'who'
-                        ? labels['summary.placeholder.who']
-                        : labels['summary.placeholder.service']) }), _jsx(BookingButton, { size: "lg", className: slotClass(classNames, 'next'), onClick: onNext, disabled: !canAdvance, children: labels['summary.next'] })] }));
+    return (_jsxs("div", { className: slotClass(classNames, 'root', 'sticky bottom-0 z-40 flex h-16 items-center justify-between gap-4 border-t border-border bg-background/95 px-5 backdrop-blur-md'), children: [_jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("p", { className: slotClass(classNames, 'line', 'min-w-0 truncate text-sm font-medium', !line && 'text-muted-foreground'), children: line ||
+                            (step === 'who'
+                                ? labels['summary.placeholder.who']
+                                : labels['summary.placeholder.service']) }), line && detail && (_jsx("p", { className: slotClass(classNames, 'detail', 'min-w-0 truncate text-xs text-muted-foreground tabular-nums'), children: detail }))] }), hideNextWhenDisabled && !canAdvance ? (hint && (_jsx("p", { className: slotClass(classNames, 'hint', 'shrink-0 text-sm font-medium text-muted-foreground'), children: renderLabel(hint) }))) : (_jsx(BookingButton, { size: "lg", className: slotClass(classNames, 'next'), onClick: onNext, disabled: !canAdvance, children: labels['summary.next'] }))] }));
 }

package/dist/booking/time-screen.d.ts

@@ -27,7 +27,14 @@ export declare const TIME_SCREEN_LABEL_KEYS: readonly ["time.heading", "time.day
  *   finishes (end them with the dash); `closed` and `over` are whole sentences.
  * - `time.empty.callLink|callLinkAria` `{phone}`
  */
-export type TimeScreenLabels = Record<(typeof TIME_SCREEN_LABEL_KEYS)[number], BookingLabel>;
+/**
+ * Opt-in keys, for the `soonest` row, `dayFullness` and the `adaptive` week
+ * grid. Placeholders: `time.soonest.pick` `{day}` `{time}`;
+ * `time.soonest.with` `{stylist}`; `time.dayChip.free` `{count}`;
+ * `time.week.more` `{count}`.
+ */
+export declare const TIME_SCREEN_FINDER_LABEL_KEYS: readonly ["time.soonest.heading", "time.soonest.pick", "time.soonest.with", "time.dayChip.free", "time.dayChip.freeOne", "time.dayChip.full", "time.week.none", "time.week.more"];
+export type TimeScreenLabels = Record<(typeof TIME_SCREEN_LABEL_KEYS)[number], BookingLabel> & Partial<Record<(typeof TIME_SCREEN_FINDER_LABEL_KEYS)[number], BookingLabel>>;
 /**
  * `classNames` slots:
  * - `root` the section · `heading` the h2
@@ -39,7 +46,7 @@ export type TimeScreenLabels = Record<(typeof TIME_SCREEN_LABEL_KEYS)[number], B
  * - `parallel` the «both at once» offer · `empty` the nothing-free card
  * - `nextFree` the «next free time» link-button · `shortNotice` the short-notice line
  */
-export type TimeScreenSlot = 'root' | 'heading' | 'dayStrip' | 'dayChip' | 'dayChipSelected' | 'month' | 'monthCell' | 'monthCellSelected' | 'surcharge' | 'daypart' | 'daypartHeading' | 'chip' | 'chipNearest' | 'chipCurrent' | 'parallel' | 'empty' | 'nextFree' | 'shortNotice';
+export type TimeScreenSlot = 'root' | 'heading' | 'dayStrip' | 'dayChip' | 'dayChipSelected' | 'month' | 'monthCell' | 'monthCellSelected' | 'surcharge' | 'daypart' | 'daypartHeading' | 'chip' | 'chipNearest' | 'chipCurrent' | 'parallel' | 'empty' | 'nextFree' | 'shortNotice' | 'soonest';
 export interface DayChipProps {
     /** An instant inside the day. */
     dayTs: number;
@@ -49,9 +56,18 @@ export interface DayChipProps {
     /** The resolved classes (base + selected + slot overrides). */
     className: string;
     onSelect: () => void;
+    /**
+     * With `dayFullness`: how many starts the day has free (0 = full). Absent
+     * otherwise, and the chip is the plain one-line chip.
+     */
+    free?: number;
+    /** With `free`: what the marks say, read out (e.g. «4 free», «full»). */
+    freeLabel?: string;
 }
+/** How full a day looks, as filled marks out of three: 1–3 free, 4–7, 8 and more. */
+export declare function dayFreeMarks(free: number): 0 | 1 | 2 | 3;
 /** One chip of the day strip: an `aria-pressed` outline button. */
-export declare function DefaultDayChip({ label, selected, className, onSelect }: DayChipProps): import("react").JSX.Element;
+export declare function DefaultDayChip({ label, selected, className, onSelect, free, freeLabel, }: DayChipProps): import("react").JSX.Element;
 export interface TimeChipProps {
     startTs: number;
     /** «14:30», a party's «15:00 → 16:00», or the current hour's «15:00 · Current time». */
@@ -146,8 +162,36 @@ export interface TimeScreenProps {
     onPick: (slot: BookingSlotDto) => void;
     /** A family. Present, its slots replace `slots` entirely. */
     party?: TimeScreenParty;
+    /**
+     * A «free soon» row above the days: the `count` (default 3) earliest starts
+     * across the whole window, one tap each, so «when is the first time?» is
+     * answered before any day is chosen. `resolveStylist` names who each would
+     * be with (the stylist `onPick` books). Not drawn for a family or a move.
+     * Needs the `time.soonest.*` labels.
+     */
+    soonest?: {
+        count?: number;
+        resolveStylist?: (resourceId: string) => {
+            name: string;
+            photoUrl?: string | null;
+        } | null;
+    };
+    /**
+     * Draw each day chip with how many starts it has free (marks, or «full»),
+     * as a 44 px target. Needs the `time.dayChip.*` labels.
+     */
+    dayFullness?: boolean;
     /** «Now», for today / tomorrow and whether today is over. Defaults to `Date.now()`. */
     now?: number;
+    /**
+     * `stack` (default): the days above the chosen day's times at every width.
+     * `adaptive`: the same on a phone, with the days, the month and the weekend
+     * note kept together; from `md` the days are a column beside the chosen
+     * day's times; from `lg` the whole week is a grid of times, seven columns,
+     * nothing to tap first. The grid needs the `time.week.*` labels and a strip
+     * of at most seven days (with `monthView`, the week on screen).
+     */
+    layout?: 'stack' | 'adaptive';
     classNames?: SlotClassNames<TimeScreenSlot>;
     components?: TimeScreenComponents;
 }
@@ -160,7 +204,7 @@ export interface TimeScreenProps {
  * - `open` — open, with a start still ahead.
  */
 export type DayStanding = 'unknown' | 'closed' | 'over' | 'open';
-export declare function TimeScreen({ labels, format, dayparts, slots, days, openDays, stylistName, takenSlotTs, phone, weekendNote, currentSlotTs, monthView, onPick, party, now: nowProp, classNames, components, }: TimeScreenProps): import("react").JSX.Element;
+export declare function TimeScreen({ labels, format, dayparts, slots, days, openDays, stylistName, takenSlotTs, phone, weekendNote, currentSlotTs, monthView, onPick, party, soonest, dayFullness, now: nowProp, layout, classNames, components, }: TimeScreenProps): import("react").JSX.Element;
 export interface TakenToastProps {
     labels: Pick<TimeScreenLabels, 'time.taken.message' | 'time.taken.close'>;
     /** The instant that was just lost; each new one is a fresh toast. */

package/dist/booking/time-screen.js

@@ -1,7 +1,7 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, X } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import { cn } from '../lib/utils.js';
 import { renderLabel } from './internal/label-parts.js';
 import { BookingButton, bookingButtonClass } from './internal/ui.js';
@@ -64,9 +64,63 @@ export const TIME_SCREEN_LABEL_KEYS = [
     'time.taken.message',
     'time.taken.close',
 ];
+/**
+ * Copy for the time step. Placeholders:
+ * - `time.current` `{time}`; `time.weekend.pct` `{pct}` `{price}`; `time.weekend.mixed` `{price}`
+ *   (keep a non-breaking space inside «+10 %» and the price so neither wraps)
+ * - `time.month.heading` `{month}` `{year}`
+ * - `time.party.sequential` `{start}` `{end}`; `time.party.parallel` `{time}` `{seats}`;
+ *   `time.party.seat` `{who}` `{stylist}`
+ * - `time.parallel.offer.*` `{day}` `{time}` (`two` for two people, `other` for more);
+ *   `time.parallel.accept` `{time}`
+ * - `time.empty.closed|over|full|unknown` `{day}`; `time.empty.stylist` `{stylist}` `{day}`.
+ *   `full`, `stylist` and `unknown` are the lead of a sentence the phone line
+ *   finishes (end them with the dash); `closed` and `over` are whole sentences.
+ * - `time.empty.callLink|callLinkAria` `{phone}`
+ */
+/**
+ * Opt-in keys, for the `soonest` row, `dayFullness` and the `adaptive` week
+ * grid. Placeholders: `time.soonest.pick` `{day}` `{time}`;
+ * `time.soonest.with` `{stylist}`; `time.dayChip.free` `{count}`;
+ * `time.week.more` `{count}`.
+ */
+export const TIME_SCREEN_FINDER_LABEL_KEYS = [
+    /** Heading of the soonest-times row, e.g. «Free soon». */
+    'time.soonest.heading',
+    /** Accessible name of a soonest card: `{day}` `{time}`, e.g. «{day} at {time}». */
+    'time.soonest.pick',
+    /** Appended to it when the card names a stylist: `{stylist}`, e.g. «with {stylist}». */
+    'time.soonest.with',
+    /** Screen-reader text of a day chip with openings: `{count}`, e.g. «{count} free». */
+    'time.dayChip.free',
+    /** The same for exactly one opening, where the language needs it (nb «1 ledig»). Falls back to `free`. */
+    'time.dayChip.freeOne',
+    /** A day chip with none, shown and read, e.g. «full». */
+    'time.dayChip.full',
+    /** A week-grid day with nothing free, e.g. «Nothing free». */
+    'time.week.none',
+    /** A week-grid day's button for the rest of its times: `{count}`, e.g. «{count} more». */
+    'time.week.more',
+];
+/** How full a day looks, as filled marks out of three: 1–3 free, 4–7, 8 and more. */
+export function dayFreeMarks(free) {
+    if (free <= 0)
+        return 0;
+    if (free <= 3)
+        return 1;
+    if (free <= 7)
+        return 2;
+    return 3;
+}
 /** One chip of the day strip: an `aria-pressed` outline button. */
-export function DefaultDayChip({ label, selected, className, onSelect }) {
-    return (_jsx(BookingButton, { variant: "outline", size: "sm", "aria-pressed": selected, onClick: onSelect, className: className, children: label }));
+export function DefaultDayChip({ label, selected, className, onSelect, free, freeLabel, }) {
+    if (free === undefined) {
+        return (_jsx(BookingButton, { variant: "outline", size: "sm", "aria-pressed": selected, onClick: onSelect, className: className, children: label }));
+    }
+    const marks = dayFreeMarks(free);
+    // Two lines and a 44 px target: the day, and under it how much room it has,
+    // so a full day is seen before it is tapped rather than after.
+    return (_jsxs(BookingButton, { variant: "outline", size: "sm", "aria-pressed": selected, onClick: onSelect, className: cn('h-auto min-h-11 flex-col gap-1 py-1.5', free === 0 && !selected && 'text-muted-foreground', className), children: [_jsx("span", { children: label }), free === 0 && freeLabel ? (_jsx("span", { className: "text-[11px] font-medium leading-none", children: freeLabel })) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", "data-testid": "day-free-marks", className: "flex gap-0.5", children: [1, 2, 3].map((mark) => (_jsx("span", { "data-filled": mark <= marks ? '' : undefined, className: cn('block h-[3px] w-2 rounded-full bg-current', mark > marks && 'opacity-25') }, mark))) }), freeLabel && _jsx("span", { className: "sr-only", children: freeLabel })] }))] }));
 }
 /** One time chip. */
 export function DefaultTimeChip({ label, nearest, nearestLabel, current, className, onPick, }) {
@@ -209,7 +263,7 @@ function monthGrid(clock, ts) {
 // ---------------------------------------------------------------------------
 // TimeScreen
 // ---------------------------------------------------------------------------
-export function TimeScreen({ labels, format, dayparts, slots, days, openDays = null, stylistName = null, takenSlotTs = null, phone = null, weekendNote, currentSlotTs = null, monthView = false, onPick, party, now: nowProp, classNames, components, }) {
+export function TimeScreen({ labels, format, dayparts, slots, days, openDays = null, stylistName = null, takenSlotTs = null, phone = null, weekendNote, currentSlotTs = null, monthView = false, onPick, party, soonest, dayFullness = false, now: nowProp, layout = 'stack', classNames, components, }) {
     const now = nowProp ?? Date.now();
     const { clock } = format;
     const DayChip = components?.DayChip ?? DefaultDayChip;
@@ -221,6 +275,22 @@ export function TimeScreen({ labels, format, dayparts, slots, days, openDays = n
     const offered = currentSlotTs !== null && !bookable.some((slot) => slot.startTs === currentSlotTs)
         ? [...bookable, { startTs: currentSlotTs, resourceId: null }]
         : bookable;
+    // Free starts per day, for the fullness marks (the current-hour marker is not free).
+    const freeByDay = new Map();
+    if (dayFullness) {
+        for (const slot of bookable) {
+            if (slot.startTs === currentSlotTs)
+                continue;
+            const key = clock.dayKey(slot.startTs);
+            freeByDay.set(key, (freeByDay.get(key) ?? 0) + 1);
+        }
+    }
+    const soonestSlots = soonest && !party && currentSlotTs === null
+        ? [...bookable]
+            .filter((slot) => slot.startTs >= now)
+            .sort((a, b) => a.startTs - b.startTs)
+            .slice(0, soonest.count ?? 3)
+        : [];
     const partyByStart = new Map(party?.slots.map((slot) => [slot.startTs, slot]) ?? []);
     const offeredDays = buildDayStrip(clock, offered, days, takenSlotTs, currentSlotTs, openDays, now);
     // Read back through the offered days rather than held as a day of its own,
@@ -273,10 +343,152 @@ export function TimeScreen({ labels, format, dayparts, slots, days, openDays = n
     const alternative = party !== undefined && party.mode === 'sequential'
         ? (party.alternativeFor?.(selectedDay) ?? null)
         : null;
-    return (_jsxs("section", { "aria-labelledby": "booking-time-heading", className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx(TimeHeading, { labels: labels, className: classNames?.heading }), strip.length > 1 && (_jsxs("fieldset", { className: slotClass(classNames, 'dayStrip', 'flex flex-wrap gap-2'), children: [_jsx("legend", { className: "sr-only", children: labels['time.dayStrip.legend'] }), strip.map((day) => {
-                        const selected = clock.dayKey(day) === selectedKey;
-                        return (_jsx(DayChip, { dayTs: day, label: clock.dayChip(day, now), selected: selected, onSelect: () => setTappedDayKey(clock.dayKey(day)), className: cn('rounded-full', selected ? 'border-primary bg-primary/10 font-bold ring-2 ring-primary' : '', classNames?.dayChip, selected ? classNames?.dayChipSelected : undefined) }, clock.dayKey(day)));
-                    })] })), monthView && (_jsx(MonthCalendar, { labels: labels, clock: clock, open: showMonth, onToggle: () => setShowMonth((shown) => !shown), monthTs: monthTs ?? selectedDay, onMonth: setMonthTs, strip: offeredDays, selectedDay: selectedDay, now: now, onPickDay: (day) => setTappedDayKey(clock.dayKey(day)), classNames: classNames })), surcharge !== null && (_jsx("p", { "data-testid": "surcharge-row", className: slotClass(classNames, 'surcharge', 'min-h-5 text-sm text-muted-foreground'), children: clock.isWeekend(selectedDay) ? weekendSentence(labels, format, surcharge) : null })), dayBookable.length === 0 && alternative && party && (_jsx(ParallelInstead, { labels: labels, clock: clock, slot: alternative, day: selectedDay, now: now, size: party.items.length, onAccept: () => party.onPick(alternative), className: classNames?.parallel })), dayBookable.length === 0 && !(alternative && party) && (_jsx(NothingFreeCard, { labels: labels, format: format, day: selectedDay, now: now, phone: phone, standing: dayStanding(clock, selectedDay, openDays, now), stylistName: stylistName, className: classNames?.empty })), dayBookable.length > 0 && (_jsx(DaypartSections, { labels: labels, clock: clock, dayparts: dayparts, daySlots: daySlots, nearest: nearest, currentSlotTs: currentSlotTs, party: party, partyByStart: partyByStart, onPick: onPick, classNames: classNames, TimeChip: components?.TimeChip ?? DefaultTimeChip })), elsewhere && (_jsx(BookingButton, { variant: "link", onClick: () => setTappedDayKey(clock.dayKey(elsewhere.startTs)), className: classNames?.nextFree, children: labels['time.nextFree'] })), isToday && dayBookable.length > 0 && (_jsx(ShortNoticeLine, { labels: labels, format: format, phone: phone, className: classNames?.shortNotice }))] }));
+    const adaptive = layout === 'adaptive';
+    // The week grid shows the strip whole, so it needs one week of it, and its words.
+    const weekNone = labels['time.week.none'];
+    const weekMore = labels['time.week.more'];
+    const week = adaptive &&
+        strip.length > 1 &&
+        strip.length <= DAY_STRIP_LIMIT &&
+        weekNone !== undefined &&
+        weekMore !== undefined
+        ? { none: weekNone, more: weekMore }
+        : null;
+    const TimeChip = components?.TimeChip ?? DefaultTimeChip;
+    const dayStrip = strip.length > 1 && (_jsxs("fieldset", { className: slotClass(classNames, 'dayStrip', cn('flex flex-wrap gap-2', adaptive && 'md:flex-col md:flex-nowrap')), children: [_jsx("legend", { className: "sr-only", children: labels['time.dayStrip.legend'] }), strip.map((day) => {
+                const selected = clock.dayKey(day) === selectedKey;
+                return (_jsx(DayChip, { dayTs: day, label: clock.dayChip(day, now), selected: selected, onSelect: () => setTappedDayKey(clock.dayKey(day)), ...(dayFullness
+                        ? dayFreeProps(labels, freeByDay.get(clock.dayKey(day)) ?? 0, 
+                        // «Full» only when it is true of the business: an open
+                        // day, asked for everyone — not hours that could not be
+                        // read, nor a day one named stylist does not work, nor a
+                        // family's day (the other mode may still seat them).
+                        !party &&
+                            stylistName === null &&
+                            dayStanding(clock, day, openDays, now) === 'open')
+                        : {}), className: cn('rounded-full', 
+                    // A column of days: full-width rows, not pills.
+                    adaptive && 'md:w-full md:rounded-lg', selected ? 'border-primary bg-primary/10 font-bold ring-2 ring-primary' : '', classNames?.dayChip, selected ? classNames?.dayChipSelected : undefined) }, clock.dayKey(day)));
+            })] }));
+    const month = monthView && (_jsx(MonthCalendar, { labels: labels, clock: clock, open: showMonth, onToggle: () => setShowMonth((shown) => !shown), monthTs: monthTs ?? selectedDay, onMonth: setMonthTs, strip: offeredDays, selectedDay: selectedDay, now: now, onPickDay: (day) => setTappedDayKey(clock.dayKey(day)), classNames: classNames }));
+    const surchargeRow = surcharge !== null && (_jsx("p", { "data-testid": "surcharge-row", className: slotClass(classNames, 'surcharge', 'min-h-5 text-sm text-muted-foreground'), children: clock.isWeekend(selectedDay) ? weekendSentence(labels, format, surcharge) : null }));
+    const dayTimes = (_jsxs(_Fragment, { children: [dayBookable.length === 0 && alternative && party && (_jsx(ParallelInstead, { labels: labels, clock: clock, slot: alternative, day: selectedDay, now: now, size: party.items.length, onAccept: () => party.onPick(alternative), className: classNames?.parallel })), dayBookable.length === 0 && !(alternative && party) && (_jsx(NothingFreeCard, { labels: labels, format: format, day: selectedDay, now: now, phone: phone, standing: dayStanding(clock, selectedDay, openDays, now), stylistName: stylistName, className: classNames?.empty })), dayBookable.length > 0 && (_jsx(DaypartSections, { labels: labels, clock: clock, dayparts: dayparts, daySlots: daySlots, nearest: nearest, currentSlotTs: currentSlotTs, party: party, partyByStart: partyByStart, onPick: onPick, classNames: classNames, TimeChip: TimeChip })), elsewhere && (_jsx(BookingButton, { variant: "link", onClick: () => setTappedDayKey(clock.dayKey(elsewhere.startTs)), className: classNames?.nextFree, children: labels['time.nextFree'] })), isToday && dayBookable.length > 0 && (_jsx(ShortNoticeLine, { labels: labels, format: format, phone: phone, className: classNames?.shortNotice }))] }));
+    return (_jsxs("section", { "aria-labelledby": "booking-time-heading", className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx(TimeHeading, { labels: labels, className: classNames?.heading }), soonestSlots.length > 0 && (_jsx(SoonestRow, { labels: labels, format: format, slots: soonestSlots, now: now, resolveStylist: soonest?.resolveStylist, weekendNote: weekendNote, onPick: onPick, className: classNames?.soonest })), adaptive ? (_jsxs(_Fragment, { children: [month, _jsxs("div", { "data-testid": "time-columns", className: cn('space-y-6 md:grid md:grid-cols-[minmax(0,13rem)_minmax(0,1fr)] md:items-start md:gap-8 md:space-y-0', week && 'lg:hidden'), children: [_jsxs("div", { className: "space-y-2", children: [dayStrip, surchargeRow] }), _jsx("div", { className: "min-w-0 space-y-6", children: dayTimes })] }), week && (_jsx(WeekGrid, { labels: labels, words: week, format: format, days: strip, offered: offered, currentSlotTs: currentSlotTs, nearest: nearest, party: party, partyByStart: partyByStart, onPick: onPick, freeByDay: dayFullness ? freeByDay : null, openDays: openDays, stylistName: stylistName, weekendNote: weekendNote, phone: phone, now: now, classNames: classNames, TimeChip: TimeChip, empty: _jsx(NothingFreeCard, { labels: labels, format: format, day: selectedDay, now: now, phone: phone, standing: dayStanding(clock, selectedDay, openDays, now), stylistName: stylistName, className: classNames?.empty }), next: elsewhere &&
+                            !strip.some((day) => clock.dayKey(day) === clock.dayKey(elsewhere.startTs)) && (_jsx(BookingButton, { variant: "link", onClick: () => setTappedDayKey(clock.dayKey(elsewhere.startTs)), className: classNames?.nextFree, children: labels['time.nextFree'] })), className: "hidden lg:block" }))] })) : (_jsxs(_Fragment, { children: [dayStrip, month, surchargeRow, dayTimes] }))] }));
+}
+/** How many times a week-grid day shows before «{count} more». */
+const WEEK_CAP = 8;
+/**
+ * `layout="adaptive"` from `lg`: the week as seven columns of times, so a
+ * wide screen books in one tap. Each day heads its column with how full it is;
+ * a long day folds after `WEEK_CAP`; an empty one says so, or offers a
+ * family's simultaneous time. The chips are the strip's own `TimeChip`s.
+ */
+function WeekGrid({ labels, words, format, days, offered, currentSlotTs, nearest, party, partyByStart, onPick, freeByDay, openDays, stylistName, weekendNote, phone, now, classNames, TimeChip, empty, next, className, }) {
+    const { clock } = format;
+    const id = useId();
+    const [unfolded, setUnfolded] = useState(null);
+    // Unfolding unmounts the button that held focus: hand it to the first time
+    // it revealed, so a keyboard user carries on where they were.
+    const lists = useRef(new Map());
+    useEffect(() => {
+        if (unfolded === null)
+            return;
+        lists.current.get(unfolded)?.querySelectorAll('button')[WEEK_CAP]?.focus();
+    }, [unfolded]);
+    let todayOpen = false;
+    let anyBookable = false;
+    const columns = days.map((day, column) => {
+        const key = clock.dayKey(day);
+        const daySlots = offered
+            .filter((slot) => clock.dayKey(slot.startTs) === key)
+            .sort((a, b) => a.startTs - b.startTs);
+        const bookable = daySlots.filter((slot) => slot.startTs !== currentSlotTs).length;
+        if (bookable > 0 && clock.daysBetween(now, day) === 0)
+            todayOpen = true;
+        if (bookable > 0)
+            anyBookable = true;
+        // Each weekend day says its own surcharge: the price is the basket priced
+        // on that date, and Saturday's need not be Sunday's.
+        const note = clock.isWeekend(day) ? (weekendNote?.(day) ?? null) : null;
+        const shown = unfolded === key ? daySlots : daySlots.slice(0, WEEK_CAP);
+        const more = daySlots.length - shown.length;
+        const headId = `${id}-day-${column}`;
+        const alternative = bookable === 0 && party?.mode === 'sequential' ? (party.alternativeFor?.(day) ?? null) : null;
+        if (alternative)
+            anyBookable = true;
+        const free = freeByDay === null
+            ? null
+            : dayFreeProps(labels, freeByDay.get(key) ?? 0, !party && stylistName === null && dayStanding(clock, day, openDays, now) === 'open').freeLabel;
+        return (_jsxs("li", { className: "min-w-0 space-y-2", children: [_jsxs("p", { id: headId, className: "flex flex-col items-center gap-0.5 rounded-lg bg-muted/50 px-1 py-2 text-center", children: [_jsx("span", { className: "max-w-full truncate text-sm font-semibold", children: clock.dayChip(day, now) }), free ? (_jsx("span", { className: "max-w-full truncate text-xs text-muted-foreground", children: free })) : null] }), note !== null && (_jsx("p", { "data-testid": "week-surcharge", className: slotClass(classNames, 'surcharge', 'px-1 text-center text-xs leading-tight text-muted-foreground'), children: weekendSentence(labels, format, note) })), shown.length > 0 && (_jsx("ul", { ref: (node) => {
+                        lists.current.set(key, node);
+                    }, "aria-labelledby": headId, className: "flex flex-col gap-1.5", children: shown.map((slot) => {
+                        const partySlot = partyByStart.get(slot.startTs);
+                        const current = slot.startTs === currentSlotTs;
+                        const isNearest = !current && nearest.has(slot.startTs);
+                        return (_jsx("li", { children: _jsx(TimeChip, { startTs: slot.startTs, label: chipLabel(labels, clock, slot, current, partySlot, party), nearest: isNearest, nearestLabel: labelText(labels['time.nearest']), current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('h-auto min-h-11 w-full min-w-0 whitespace-normal px-1 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }) }, slot.startTs));
+                    }) })), more > 0 && (_jsx(BookingButton, { variant: "link", size: "sm", onClick: () => setUnfolded(key), className: "w-full", children: renderLabel(words.more, { count: more }) })), bookable === 0 &&
+                    (alternative && party ? (_jsx(BookingButton, { size: "sm", onClick: () => party.onPick(alternative), className: "h-auto min-h-11 w-full whitespace-normal tabular-nums", children: renderLabel(labels['time.parallel.accept'], {
+                            time: clock.formatTime(alternative.startTs),
+                        }) })) : (_jsx("p", { className: "px-1 text-center text-xs text-muted-foreground", children: renderLabel(words.none) })))] }, key));
+    });
+    return (_jsxs("div", { "data-testid": "time-week", className: cn('space-y-4', className), children: [_jsx("ol", { className: "grid grid-cols-7 gap-2", children: columns }), !anyBookable && empty, next, todayOpen && (_jsx(ShortNoticeLine, { labels: labels, format: format, phone: phone, className: classNames?.shortNotice }))] }));
+}
+/** A time chip's words: the hour, the held hour marked, or a family's whole visit. */
+function chipLabel(labels, clock, slot, current, partySlot, party) {
+    const time = clock.formatTime(slot.startTs);
+    if (current)
+        return fillLabel(labels['time.current'], { time });
+    if (partySlot && party)
+        return partyChipLabel(labels, clock, partySlot, party);
+    return time;
+}
+/** The weekend note as one plain sentence, for a card that books without the notice on screen. */
+function weekendSentenceText(labels, format, note) {
+    const price = format.price(note.priceOre);
+    return note.pct === null
+        ? fillLabel(labels['time.weekend.mixed'], { price })
+        : fillLabel(labels['time.weekend.pct'], { pct: note.pct, price });
+}
+/** A day chip's `free` and `freeLabel`. */
+function dayFreeProps(labels, free, canClaimFull) {
+    let label;
+    if (free === 0)
+        label = canClaimFull ? labels['time.dayChip.full'] : undefined;
+    else if (free === 1)
+        label = labels['time.dayChip.freeOne'] ?? labels['time.dayChip.free'];
+    else
+        label = labels['time.dayChip.free'];
+    return { free, freeLabel: label ? fillLabel(label, { count: free }) : '' };
+}
+/**
+ * «Free soon»: the earliest starts across the window as cards (the day, the
+ * time, and who it would be with), each booking exactly what `onPick` books
+ * for that start.
+ */
+function SoonestRow({ labels, format, slots, now, resolveStylist, weekendNote, onPick, className, }) {
+    const { clock } = format;
+    const heading = labels['time.soonest.heading'];
+    const pick = labels['time.soonest.pick'];
+    const withWho = labels['time.soonest.with'];
+    return (_jsxs("section", { "aria-label": heading ? fillLabel(heading, {}) : undefined, className: cn('space-y-2', className), children: [heading && (_jsx("p", { "aria-hidden": "true", className: "text-sm font-semibold text-muted-foreground", children: renderLabel(heading) })), _jsx("ul", { className: "grid grid-cols-3 gap-2", children: slots.map((slot) => {
+                    const stylist = slot.resourceId !== null && resolveStylist ? resolveStylist(slot.resourceId) : null;
+                    const day = clock.dayChip(slot.startTs, now);
+                    const time = clock.formatTime(slot.startTs);
+                    const name = stylist ? format.stylistName(stylist.name) : null;
+                    // A weekend card says its surcharge itself: the notice under the
+                    // days only speaks for the day on screen, and a card books without it.
+                    const note = clock.isWeekend(slot.startTs) ? (weekendNote?.(slot.startTs) ?? null) : null;
+                    const surcharge = note ? weekendSentenceText(labels, format, note) : null;
+                    const ariaLabel = [
+                        pick ? fillLabel(pick, { day, time }) : `${day} ${time}`,
+                        name && withWho ? fillLabel(withWho, { stylist: name }) : null,
+                        surcharge,
+                    ]
+                        .filter(Boolean)
+                        .join(' ');
+                    return (_jsx("li", { className: "min-w-0", children: _jsxs("button", { type: "button", "aria-label": ariaLabel, onClick: () => onPick(slot), className: cn('flex min-h-11 w-full flex-col items-start gap-0.5 rounded-lg border border-border bg-card px-3 py-2.5 text-left', 'transition-colors hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'), children: [_jsx("span", { className: "max-w-full truncate text-xs font-medium text-muted-foreground", children: day }), _jsx("span", { className: "font-sans text-xl font-bold leading-tight text-primary tabular-nums", children: time }), name && (_jsxs("span", { className: "flex min-w-0 max-w-full items-center gap-1.5 text-xs", children: [stylist?.photoUrl && (_jsx("img", { src: stylist.photoUrl, alt: "", width: 20, height: 20, decoding: "async", className: "size-5 shrink-0 rounded-full object-cover" })), _jsx("span", { className: "truncate", children: name })] })), surcharge && (_jsx("span", { "data-testid": "soonest-surcharge", className: "max-w-full text-[11px] leading-tight text-muted-foreground", children: surcharge }))] }) }, slot.startTs));
+                }) })] }));
 }
 function TimeHeading({ labels, className, }) {
     return (_jsx("h2", { id: "booking-time-heading", tabIndex: -1, className: cn('font-sans text-2xl font-bold outline-none md:text-3xl', className), children: labels['time.heading'] }));
@@ -382,14 +594,7 @@ function DaypartSections({ labels, clock, dayparts, daySlots, nearest, currentSl
                         const partySlot = partyByStart.get(slot.startTs);
                         const current = slot.startTs === currentSlotTs;
                         const isNearest = !current && nearest.has(slot.startTs);
-                        let label = clock.formatTime(slot.startTs);
-                        if (current) {
-                            label = fillLabel(labels['time.current'], { time: label });
-                        }
-                        else if (partySlot && party) {
-                            label = partyChipLabel(labels, clock, partySlot, party);
-                        }
-                        return (_jsx(TimeChip, { startTs: slot.startTs, label: label, nearest: isNearest, nearestLabel: labelText(labels['time.nearest']), current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('min-w-20 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }, slot.startTs));
+                        return (_jsx(TimeChip, { startTs: slot.startTs, label: chipLabel(labels, clock, slot, current, partySlot, party), nearest: isNearest, nearestLabel: labelText(labels['time.nearest']), current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('min-w-20 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }, slot.startTs));
                     }) })] }, daypart.key));
     });
 }

package/dist/booking/who-screen.d.ts

@@ -36,7 +36,13 @@ import type { NewChild, SaveResult, WizardPerson } from './types.js';
  * from the sheet, grows the list by whole rows and moves nothing sideways.
  */
 export declare const WHO_SCREEN_LABEL_KEYS: readonly ["who.heading", "who.guest.groupLabel", "who.guest.children.one", "who.guest.children.other", "who.guest.adult", "who.guest.addedList", "who.family.legend", "who.family.self", "who.family.limit", "addChild.trigger", "addChild.title", "addChild.description.saved", "addChild.description.local", "addChild.name", "addChild.birthYear", "addChild.birthYearPlaceholder", "addChild.birthMonth", "addChild.birthMonthUnknown", "addChild.notes", "addChild.missing", "addChild.submit", "addChild.close"];
-export type WhoScreenLabels = Record<(typeof WHO_SCREEN_LABEL_KEYS)[number], BookingLabel> & AddChildSheetLabels;
+/**
+ * Opt-in keys for `guestParty`. `who.party.fewer` / `who.party.more` are the
+ * stepper buttons' accessible names; `who.party.count` `{count}` is read out
+ * when the number changes.
+ */
+export declare const WHO_SCREEN_PARTY_LABEL_KEYS: readonly ["who.party.children", "who.party.childrenNote", "who.party.adult", "who.party.adultNote", "who.party.fewer", "who.party.more", "who.party.count"];
+export type WhoScreenLabels = Record<(typeof WHO_SCREEN_LABEL_KEYS)[number], BookingLabel> & Partial<Record<(typeof WHO_SCREEN_PARTY_LABEL_KEYS)[number], BookingLabel>> & AddChildSheetLabels;
 /**
  * - `root` — the `<section>`
  * - `heading` — the `<h2>`
@@ -110,6 +116,22 @@ export interface WhoScreenProps {
      * exist (or with a sentence for the sheet); a guest's is local.
      */
     onAddChild: (child: NewChild) => Promise<SaveResult>;
+    /**
+     * A guest picks how many children and whether they come too, instead of the
+     * chips: a stepper (1 child to begin with) and a «me too» row, up to
+     * `maxPeople` in all. Each change is a live answer (`advance: false`); the
+     * caller's «next» moves on. `child(seat)` is the 1-based child seat the chips
+     * use; `adult` the grown-up's seat. Named children from the add-child
+     * sheet keep their seats. Needs the `who.party.*` labels: without
+     * `children`, `adult`, `fewer`, `more` and `count` the chips are drawn
+     * instead, rather than unnamed controls.
+     */
+    guestParty?: {
+        child: (seat: number) => WizardPerson;
+        adult: WizardPerson & {
+            adult: true;
+        };
+    };
     /** Shown under the heading for a guest — e.g. an offer to log in. */
     loginRow?: ReactNode;
     /** Newest birth year the sheet offers (see `AddChildSheet`). */
@@ -117,6 +139,6 @@ export interface WhoScreenProps {
     classNames?: SlotClassNames<WhoScreenSlot>;
     components?: WhoScreenComponents;
 }
-export declare function WhoScreen({ labels, format, people, family, guestChoices, addedChildren, maxPeople, selfKey, isGuestSeat, onChoose, onAddChild, loginRow, currentYear, classNames, components, }: WhoScreenProps): import("react").JSX.Element;
+export declare function WhoScreen({ labels, format, people, family, guestChoices, addedChildren, maxPeople, selfKey, isGuestSeat, onChoose, onAddChild, guestParty, loginRow, currentYear, classNames, components, }: WhoScreenProps): import("react").JSX.Element;
 /** The default person card: an initial on a tinted avatar, the name, a line, a tick. */
 export declare function DefaultPersonCard({ name, line, index, selected, disabled, describedBy, onToggle, className, selectedClassName, }: PersonCardProps): import("react").JSX.Element;

package/dist/booking/who-screen.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from 'lucide-react';
-import { useRef } from 'react';
+import { Check, Minus, Plus } from 'lucide-react';
+import { useEffect, useRef } from 'react';
 import { cn } from '../lib/utils.js';
 import { ADD_CHILD_SHEET_LABEL_KEYS, AddChildSheet, } from './add-child-sheet.js';
 import { renderLabel } from './internal/label-parts.js';
-import { labelText } from './labels.js';
+import { fillLabel, labelText } from './labels.js';
 import { slotClass } from './slots.js';
 /**
  * The first step — who is the visit for?
@@ -50,6 +50,33 @@ export const WHO_SCREEN_LABEL_KEYS = [
     'who.family.limit',
     ...ADD_CHILD_SHEET_LABEL_KEYS,
 ];
+/**
+ * Opt-in keys for `guestParty`. `who.party.fewer` / `who.party.more` are the
+ * stepper buttons' accessible names; `who.party.count` `{count}` is read out
+ * when the number changes.
+ */
+export const WHO_SCREEN_PARTY_LABEL_KEYS = [
+    /** «Children». */
+    'who.party.children',
+    /** Under it, e.g. «0–12 years». */
+    'who.party.childrenNote',
+    /** The grown-up's row, e.g. «I'm getting a cut too». */
+    'who.party.adult',
+    /** Under it, e.g. «Side by side, at the same time». */
+    'who.party.adultNote',
+    'who.party.fewer',
+    'who.party.more',
+    /** `{count}` — the children's number, read out, e.g. «{count} children». */
+    'who.party.count',
+];
+/** The `who.party.*` keys `guestParty` cannot draw without; the two notes are extras. */
+const PARTY_REQUIRED_LABEL_KEYS = [
+    'who.party.children',
+    'who.party.adult',
+    'who.party.fewer',
+    'who.party.more',
+    'who.party.count',
+];
 /** The tints the avatars take, in order. */
 const AVATAR_TINTS = ['bg-secondary/30', 'bg-primary/10', 'bg-accent'];
 const HEADING_ID = 'booking-who-heading';
@@ -77,7 +104,7 @@ function choicePressed(people, choice) {
     return (people.length === wanted.length &&
         people.every((person, index) => person.key === wanted[index]?.key));
 }
-export function WhoScreen({ labels, format, people, family, guestChoices, addedChildren = [], maxPeople, selfKey, isGuestSeat = noGuestSeats, onChoose, onAddChild, loginRow, currentYear, classNames, components, }) {
+export function WhoScreen({ labels, format, people, family, guestChoices, addedChildren = [], maxPeople, selfKey, isGuestSeat = noGuestSeats, onChoose, onAddChild, guestParty, loginRow, currentYear, classNames, components, }) {
     const PersonCard = components?.PersonCard ?? DefaultPersonCard;
     const heading = (_jsx("h2", { id: HEADING_ID, tabIndex: -1, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: labels['who.heading'] }));
     const sheet = (disabled, saveNotes) => (_jsx(AddChildSheet, { labels: labels, format: format, saveNotes: saveNotes, disabled: disabled, currentYear: currentYear, onSave: onAddChild }));
@@ -85,8 +112,9 @@ export function WhoScreen({ labels, format, people, family, guestChoices, addedC
         className: classNames?.card,
         selectedClassName: classNames?.cardSelected,
     };
+    const partyReady = guestParty !== undefined && PARTY_REQUIRED_LABEL_KEYS.every((key) => labels[key] !== undefined);
     if (family === null) {
-        return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [heading, loginRow, _jsxs("div", { className: "space-y-4", children: [_jsx(GuestChips, { choices: guestChoices, people: people, labels: labels, classNames: classNames, onChoose: onChoose }), addedChildren.length > 0 && (_jsx("ul", { "aria-label": labelText(labels['who.guest.addedList']), className: "space-y-2", children: addedChildren.map((entry, index) => (_jsx("li", { children: _jsx(PersonCard, { name: entry.person.name ?? '', line: entry.line, index: index, selected: true, disabled: false, onToggle: () => onChoose(people.filter((other) => other.key !== entry.person.key), false), ...cardClasses }) }, entry.person.key))) })), sheet(addedChildren.length >= maxPeople, false)] })] }));
+        return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [heading, loginRow, _jsxs("div", { className: "space-y-4", children: [partyReady && guestParty ? (_jsx(GuestParty, { party: guestParty, people: people, maxPeople: maxPeople, labels: labels, classNames: classNames, onChoose: onChoose })) : (_jsx(GuestChips, { choices: guestChoices, people: people, labels: labels, classNames: classNames, onChoose: onChoose })), addedChildren.length > 0 && (_jsx("ul", { "aria-label": labelText(labels['who.guest.addedList']), className: "space-y-2", children: addedChildren.map((entry, index) => (_jsx("li", { children: _jsx(PersonCard, { name: entry.person.name ?? '', line: entry.line, index: index, selected: true, disabled: false, onToggle: () => onChoose(people.filter((other) => other.key !== entry.person.key), false), ...cardClasses }) }, entry.person.key))) })), sheet(partyReady ? people.length >= maxPeople : addedChildren.length >= maxPeople, false)] })] }));
     }
     // Defensively only what this picker draws: the caller clears guest seats
     // when the family appears, and a seat nobody can see must never count
@@ -110,6 +138,55 @@ export function WhoScreen({ labels, format, people, family, guestChoices, addedC
                                 return (_jsx("li", { children: _jsx(PersonCard, { name: entry.person.name ?? '', line: entry.line, index: index, selected: selected, disabled: !selected && full, describedBy: !selected && full ? LIMIT_ID : undefined, onToggle: () => toggle(entry.person), ...cardClasses }) }, entry.person.key));
                             }), _jsx("li", { children: sheet(full, true) })] }), _jsxs(CheckRow, { checked: selfChecked, disabled: !selfChecked && full, describedBy: !selfChecked && full ? LIMIT_ID : undefined, onToggle: () => toggle(self), className: cn('h-14 justify-between px-5 text-sm', classNames?.card), selectedClassName: classNames?.cardSelected, children: [_jsx("span", { className: "font-medium", children: labels['who.family.self'] }), _jsx(CheckCircle, { checked: selfChecked })] }), _jsx("p", { id: LIMIT_ID, "aria-live": "polite", className: slotClass(classNames, 'limit', 'min-h-5 text-sm text-muted-foreground'), children: full ? renderLabel(labels['who.family.limit'], { max: maxPeople }) : '' })] })] }));
 }
+/**
+ * A guest's party: how many children (a stepper) and whether the grown-up
+ * comes too (a check row), so «a child and me» is one booking without an
+ * account. Starts at one child, which is the common answer, so «next» is live
+ * from the first frame.
+ */
+function GuestParty({ party, people, maxPeople, labels, classNames, onChoose, }) {
+    const adultOn = people.some((person) => person.key === party.adult.key);
+    // The grown-up's seat is never a child, flag or no flag.
+    const childSeats = people.filter((person) => !person.adult && person.key !== party.adult.key);
+    const children = childSeats.length;
+    const full = children + (adultOn ? 1 : 0) >= maxPeople;
+    // Named children (from the add-child sheet) keep their seats, first; the
+    // stepper adds and removes the unnamed ones after them.
+    const generatedKeys = new Set(Array.from({ length: maxPeople }, (_, index) => party.child(index + 1).key));
+    const named = childSeats.filter((person) => !generatedKeys.has(person.key));
+    // The stepper never takes a named child away: their own card does that.
+    const floor = Math.max(named.length, adultOn ? 0 : 1);
+    const answer = (count, withAdult) => {
+        const kept = named;
+        const used = new Set(kept.map((person) => person.key));
+        const fill = [];
+        for (let seat = 1; kept.length + fill.length < count && seat <= maxPeople; seat += 1) {
+            const next = party.child(seat);
+            if (!used.has(next.key))
+                fill.push(next);
+        }
+        onChoose([...kept, ...fill, ...(withAdult ? [party.adult] : [])], false);
+    };
+    // One child whenever the answer becomes empty (first frame or cleared
+    // later): an empty answer would leave «next» dead on the most common visit.
+    // Once per emptying, so a parent that ignores the answer is not flooded,
+    // and a restored answer is never replaced.
+    const wasEmpty = useRef(false);
+    useEffect(() => {
+        const empty = people.length === 0;
+        if (empty && !wasEmpty.current)
+            answer(1, false);
+        wasEmpty.current = empty;
+    });
+    const text = (key, values = {}) => {
+        const label = labels[key];
+        return label ? fillLabel(label, values) : '';
+    };
+    const stepButton = 'flex size-11 shrink-0 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-40';
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: cn('flex items-center gap-4 rounded-lg border border-border bg-card px-5 py-4', classNames?.card), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "font-semibold", children: text('who.party.children') }), labels['who.party.childrenNote'] && (_jsx("p", { className: "text-sm text-muted-foreground", children: renderLabel(labels['who.party.childrenNote']) }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", "aria-label": text('who.party.fewer'), disabled: children <= floor, onClick: () => answer(children - 1, adultOn), className: stepButton, children: _jsx(Minus, { "aria-hidden": "true", className: "size-4" }) }), _jsxs("span", { "aria-live": "polite", "aria-atomic": "true", className: "w-6 text-center text-lg font-bold tabular-nums", children: [_jsx("span", { "aria-hidden": "true", children: children }), _jsx("span", { className: "sr-only", children: text('who.party.count', { count: children }) })] }), _jsx("button", { type: "button", "aria-label": text('who.party.more'), "aria-describedby": full ? LIMIT_ID : undefined, disabled: full, onClick: () => answer(children + 1, adultOn), className: stepButton, children: _jsx(Plus, { "aria-hidden": "true", className: "size-4" }) })] })] }), _jsxs(CheckRow, { checked: adultOn, 
+                // Never down to nobody: the last person in the booking stays.
+                disabled: (!adultOn && full) || (adultOn && children === 0), describedBy: !adultOn && full ? LIMIT_ID : undefined, onToggle: () => answer(children, !adultOn), className: cn('min-h-14 justify-between px-5 py-3 text-sm', classNames?.card), selectedClassName: classNames?.cardSelected, children: [_jsxs("span", { className: "flex min-w-0 flex-col text-left", children: [_jsx("span", { className: "font-medium", children: text('who.party.adult') }), labels['who.party.adultNote'] && (_jsx("span", { className: "text-muted-foreground", children: renderLabel(labels['who.party.adultNote']) }))] }), _jsx(CheckCircle, { checked: adultOn })] }), _jsx("p", { id: LIMIT_ID, "aria-live": "polite", className: slotClass(classNames, 'limit', 'min-h-5 text-sm text-muted-foreground'), children: full ? renderLabel(labels['who.family.limit'], { max: maxPeople }) : '' })] }));
+}
 /**
  * The guest chips as a radio group. Roving focus: one chip is in the tab
  * order (the chosen one, else the first) and the arrows move between them.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "3.6.1",
+  "version": "3.8.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {