@medalsocial/meda 3.4.0 → 3.6.0

package/dist/booking/confirmation.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { joinLabelParts, renderLabel } from './internal/label-parts.js';
 import { BookingButton } from './internal/ui.js';
+import { visitName } from './internal/visit.js';
 import { fillLabel, labelText } from './labels.js';
 import { slotClass } from './slots.js';
 /**
@@ -54,10 +55,10 @@ export function Confirmation({ lines: rawLines, startTs, totalOre, address = nul
     const singleCard = first ? (_jsx("p", { className: slotClass(classNames, 'card', 'rounded-lg border border-border bg-card px-5 py-4 font-medium'), children: joinLabelParts([
             first.item.bookedForName
                 ? renderLabel(labels['confirmation.serviceFor'], {
-                    service: first.item.service.name,
+                    service: visitName(first.item),
                     name: first.item.bookedForName,
                 })
-                : first.item.service.name,
+                : visitName(first.item),
             first.stylistName,
             renderLabel(labels['confirmation.when'], {
                 day: clock.dayLabel(startTs, now),
@@ -82,7 +83,7 @@ function PartyCard({ lines, totalOre, now, format, labels, classNames, PartyLine
                     const text = fillLabel(labels['confirmation.party.line'], {
                         time,
                         name: line.item.bookedForName ?? '',
-                        service: line.item.service.name,
+                        service: visitName(line.item),
                         stylist: line.stylistName
                             ? fillLabel(labels['confirmation.party.stylist'], { name: line.stylistName })
                             : '',
@@ -95,7 +96,7 @@ function PartyCard({ lines, totalOre, now, format, labels, classNames, PartyLine
                     return (_jsx(PartyLine
                     // biome-ignore lint/suspicious/noArrayIndexKey: two lines can share a service; the index is the identity
                     , { line: line, text: text, manageLabel: labelText(labels['confirmation.manage']), manageAriaLabel: fillLabel(labels['confirmation.manageFor'], {
-                            who: line.item.bookedForName ?? line.item.service.name,
+                            who: line.item.bookedForName ?? visitName(line.item),
                             time,
                         }), linkClassName: slotClass(classNames, 'link', 'text-sm font-semibold text-primary underline underline-offset-4') }, index));
                 }) }), _jsx("p", { className: "font-semibold", children: renderLabel(labels['confirmation.party.total'], { total: format.price(totalOre) }) })] }));

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

@@ -13,7 +13,7 @@ import type { BookingFamilyMember, WizardAction, WizardError, WizardState } from
  * booking — the keystrokes behind the per-child fields, which field has focus,
  * whether submit has been pressed, and a fallback submission nonce.
  */
-export declare const DETAILS_SCREEN_LABEL_KEYS: readonly ["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.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"];
+export declare const DETAILS_SCREEN_LABEL_KEYS: readonly ["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"];
 export type DetailsScreenLabelKey = (typeof DETAILS_SCREEN_LABEL_KEYS)[number];
 export type DetailsScreenLabels = Record<DetailsScreenLabelKey, BookingLabel>;
 /**
@@ -24,7 +24,10 @@ export type DetailsScreenLabels = Record<DetailsScreenLabelKey, BookingLabel>;
 export declare const DETAILS_ERROR_LABEL_KEYS: Record<WizardError, DetailsScreenLabelKey>;
 /** One line of the submission. Optional fields are ABSENT, never blank. */
 export interface BookingSubmissionItem {
+    /** The person's first service. */
     serviceId: string;
+    /** The services after the first, in order, in the same visit. ABSENT for a one-service visit. */
+    extraServiceIds?: string[];
     resourceId?: string;
     startTs: number;
     bookedForName?: string;
@@ -107,6 +110,8 @@ export interface DetailsScreenProps {
     guardianPhone?: string | null;
     /** When set, a link to the full terms is drawn after the terms sentence. */
     termsHref?: string | null;
+    /** The e-mail is the address the guardian logged in with: shown, not editable. */
+    emailReadOnly?: boolean;
     /** Draw the (optional, unticked) marketing opt-in. */
     marketingConsent?: boolean;
     format: BookingFormat;
@@ -116,4 +121,4 @@ export interface DetailsScreenProps {
 }
 /** Blank is fine (the field is optional). Anything else has to be reachable. */
 export declare function looksLikeEmail(value: string): boolean;
-export declare function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phoneLooksValid, normalisePhone, submitting, phone, submissionNonce: nonceProp, family, guardianPhone, termsHref, marketingConsent, format, labels, classNames, components, }: DetailsScreenProps): import("react").JSX.Element;
+export declare function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phoneLooksValid, normalisePhone, submitting, phone, submissionNonce: nonceProp, family, guardianPhone, termsHref, emailReadOnly, marketingConsent, format, labels, classNames, components, }: DetailsScreenProps): import("react").JSX.Element;

package/dist/booking/details-screen.js

@@ -7,6 +7,7 @@ import { Input } from '../primitives/input.js';
 import { Textarea } from '../primitives/textarea.js';
 import { renderLabel } from './internal/label-parts.js';
 import { BOOKING_CHECKBOX_CLASS, BOOKING_INPUT_CLASS, BOOKING_TEXTAREA_CLASS, BookingButton, } from './internal/ui.js';
+import { visitName } from './internal/visit.js';
 import { fillLabel, labelText } from './labels.js';
 import { slotClass } from './slots.js';
 /**
@@ -41,6 +42,7 @@ export const DETAILS_SCREEN_LABEL_KEYS = [
     'details.child.yearPlaceholder',
     'details.email.label',
     'details.email.help',
+    'details.email.lockedHelp',
     'details.email.error',
     'details.notes.label',
     'details.notes.placeholder',
@@ -170,7 +172,7 @@ function isKnownChair(state, index) {
 // ---------------------------------------------------------------------------
 // Screen
 // ---------------------------------------------------------------------------
-export function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phoneLooksValid, normalisePhone, submitting = false, phone = null, submissionNonce: nonceProp, family, guardianPhone = null, termsHref = null, marketingConsent = false, format, labels, classNames, components, }) {
+export function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phoneLooksValid, normalisePhone, submitting = false, phone = null, submissionNonce: nonceProp, family, guardianPhone = null, termsHref = null, emailReadOnly = false, marketingConsent = false, format, labels, classNames, components, }) {
     const ids = useId();
     const field = (name) => `${ids}-${name}`;
     const phoneRef = useRef(null);
@@ -196,6 +198,9 @@ export function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phon
     const phoneTyped = state.contact.phone.trim().length > 0;
     const phoneValid = phoneLooksValid(state.contact.phone);
     const emailValid = looksLikeEmail(state.contact.email);
+    // Only lock an address that is present and well-formed; a blank or malformed
+    // one stays editable so the parent is never stuck with an unfixable field.
+    const emailLocked = emailReadOnly && state.contact.email.trim().length > 0 && emailValid;
     const showPhoneError = !phoneValid && (attempted || (phoneTyped && focused !== 'phone'));
     const showEmailError = !emailValid && (attempted || focused !== 'email');
     const showTermsError = attempted && !state.consentTerms;
@@ -243,6 +248,9 @@ export function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phon
             const resourceId = line?.resourceId ?? null;
             return {
                 serviceId: item.service.id,
+                ...(item.extraServices && item.extraServices.length > 0
+                    ? { extraServiceIds: item.extraServices.map((service) => service.id) }
+                    : {}),
                 ...(resourceId === null ? {} : { resourceId }),
                 startTs: line?.startTs ?? startTs,
                 ...present('bookedForName', isKnownChair(state, index) ? (item.bookedForName ?? '') : child.name),
@@ -287,11 +295,11 @@ export function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phon
     }
     const inputClass = (...extra) => slotClass(classNames, 'input', BOOKING_INPUT_CLASS, ...extra);
     const fieldClass = slotClass(classNames, 'field');
-    return (_jsxs("section", { "aria-labelledby": "booking-details-heading", className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h2", { id: "booking-details-heading", tabIndex: -1, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: labels['details.heading'] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('phone'), children: labels['details.phone.label'] }), _jsxs("div", { className: "flex items-stretch", children: [phonePrefix && (_jsx("span", { id: field('phone-prefix'), className: "flex h-12 items-center rounded-l-[4px] border border-r-0 border-input bg-muted px-4 text-base text-muted-foreground", children: phonePrefix })), _jsx(Input, { id: field('phone'), ref: phoneRef, type: "tel", inputMode: "numeric", autoComplete: "tel-national", className: inputClass(phonePrefix ? 'rounded-l-none' : ''), value: state.contact.phone, "aria-describedby": phonePrefix ? field('phone-prefix') : undefined, "aria-invalid": showPhoneError || undefined, onFocus: () => setFocused('phone'), onBlur: () => setFocused(null), onChange: (event) => setContact('phone', event.target.value) })] }), showPhoneError && _jsx(Field.Error, { children: labels['details.phone.error'] })] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('name'), children: labels['details.name.label'] }), _jsx(Input, { id: field('name'), autoComplete: "name", className: inputClass(), value: state.contact.name, onChange: (event) => setContact('name', event.target.value) })] }), state.items.some((_, index) => isKnownChair(state, index)) && (_jsx("ul", { "aria-label": labelText(labels['details.known.label']), className: "space-y-1 text-sm", children: state.items.map((item, index) => isKnownChair(state, index) ? (_jsxs("li", { children: [_jsx("span", { className: "font-semibold", children: item.service.name }), ' ', renderLabel(labels['details.known.for'], { who: knownWho(state, index, labels) })] }, index)) : null) })), state.items.map((item, index) => 
+    return (_jsxs("section", { "aria-labelledby": "booking-details-heading", className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h2", { id: "booking-details-heading", tabIndex: -1, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: labels['details.heading'] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('phone'), children: labels['details.phone.label'] }), _jsxs("div", { className: "flex items-stretch", children: [phonePrefix && (_jsx("span", { id: field('phone-prefix'), className: "flex h-12 items-center rounded-l-[4px] border border-r-0 border-input bg-muted px-4 text-base text-muted-foreground", children: phonePrefix })), _jsx(Input, { id: field('phone'), ref: phoneRef, type: "tel", inputMode: "numeric", autoComplete: "tel-national", className: inputClass(phonePrefix ? 'rounded-l-none' : ''), value: state.contact.phone, "aria-describedby": phonePrefix ? field('phone-prefix') : undefined, "aria-invalid": showPhoneError || undefined, onFocus: () => setFocused('phone'), onBlur: () => setFocused(null), onChange: (event) => setContact('phone', event.target.value) })] }), showPhoneError && _jsx(Field.Error, { children: labels['details.phone.error'] })] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('name'), children: labels['details.name.label'] }), _jsx(Input, { id: field('name'), autoComplete: "name", className: inputClass(), value: state.contact.name, onChange: (event) => setContact('name', event.target.value) })] }), state.items.some((_, index) => isKnownChair(state, index)) && (_jsx("ul", { "aria-label": labelText(labels['details.known.label']), className: "space-y-1 text-sm", children: state.items.map((item, index) => isKnownChair(state, index) ? (_jsxs("li", { children: [_jsx("span", { className: "font-semibold", children: visitName(item) }), ' ', renderLabel(labels['details.known.for'], { who: knownWho(state, index, labels) })] }, index)) : null) })), state.items.map((item, index) => 
             // 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 ? item.service.name : 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, "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: 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 }) })] }));
 }
 /**
  * The name and birth year for one line. Wrapped in a fieldset only when there

package/dist/booking/internal/service-multi.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import type { BookingFormat } from '../format.js';
+import type { ServiceMultiLabels, ServicePartyPerson, ServiceScreenSlot, ServiceSelection } from '../service-screen.js';
+import { type SlotClassNames } from '../slots.js';
+/**
+ * The service step's multi-select parts (`ServiceScreenProps.selection`):
+ * the per-person tabs, the sticky total bar and the checkbox card. Internal —
+ * `ServiceScreen` composes them; the package does not export them.
+ */
+export declare const serviceTabId: (index: number) => string;
+export declare const serviceTabPanelId: (index: number) => string;
+/**
+ * One tab per person on the multi-select step, a tick on everyone who has
+ * something. The WAI-ARIA tabs pattern: one tab stop, arrows move between
+ * people, Home / End jump to the ends; moving selects (one short panel, no
+ * cost to showing it).
+ */
+export declare function PersonTabs({ people, active, done, onSelect, labels, labelledBy, describedBy, classNames, }: {
+    people: ReadonlyArray<ServicePartyPerson>;
+    active: number;
+    done: (index: number) => boolean;
+    onSelect: (index: number) => void;
+    labels: ServiceMultiLabels;
+    labelledBy: string;
+    describedBy: string;
+    classNames: SlotClassNames<ServiceScreenSlot> | undefined;
+}): import("react").JSX.Element;
+/**
+ * The multi-select step's sticky bar: the running total, what is still
+ * missing, and «Next». The same bar as `SummaryBar`, so the step reads as one
+ * flow; a caller that also renders `SummaryBar` hides it on this step.
+ *
+ * «Next» is never disabled. A disabled button explains nothing and is skipped
+ * by a screen reader's tab order; this one stays, the line says what is
+ * missing, and the caller decides what pressing it does.
+ */
+export declare function TotalBar({ selection, format, classNames, }: {
+    selection: ServiceSelection;
+    format: BookingFormat;
+    classNames: SlotClassNames<ServiceScreenSlot> | undefined;
+}): import("react").JSX.Element;
+/**
+ * A service card on the multi-select step: a real checkbox inside its label.
+ * Space (and Enter) toggles it, the label's whole box is the target, and a
+ * screen reader hears «checkbox, checked».
+ */
+export declare function MultiServiceCard({ name, selected, onPick, duration, price, className, selectedClassName, }: {
+    name: string;
+    selected: boolean;
+    onPick: () => void;
+    duration: ReactNode;
+    price: ReactNode;
+    className?: string;
+    selectedClassName?: string;
+}): import("react").JSX.Element;

package/dist/booking/internal/service-multi.js

@@ -0,0 +1,83 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { LiveStatus } from '../live-status.js';
+import { slotClass } from '../slots.js';
+import { renderLabel } from './label-parts.js';
+import { BookingButton } from './ui.js';
+/**
+ * The service step's multi-select parts (`ServiceScreenProps.selection`):
+ * the per-person tabs, the sticky total bar and the checkbox card. Internal —
+ * `ServiceScreen` composes them; the package does not export them.
+ */
+export const serviceTabId = (index) => `booking-service-tab-${index}`;
+export const serviceTabPanelId = (index) => `booking-service-panel-${index}`;
+/**
+ * One tab per person on the multi-select step, a tick on everyone who has
+ * something. The WAI-ARIA tabs pattern: one tab stop, arrows move between
+ * people, Home / End jump to the ends; moving selects (one short panel, no
+ * cost to showing it).
+ */
+export function PersonTabs({ people, active, done, onSelect, labels, labelledBy, describedBy, classNames, }) {
+    function onKeyDown(event) {
+        const last = people.length - 1;
+        const moves = {
+            ArrowRight: active === last ? 0 : active + 1,
+            ArrowLeft: active === 0 ? last : active - 1,
+            Home: 0,
+            End: last,
+        };
+        const next = Object.hasOwn(moves, event.key) ? moves[event.key] : null;
+        if (next === null)
+            return;
+        event.preventDefault();
+        onSelect(next);
+        document.getElementById(serviceTabId(next))?.focus();
+    }
+    return (_jsx("div", { role: "tablist", "aria-labelledby": labelledBy, "aria-describedby": describedBy, onKeyDown: onKeyDown, className: "-mx-1 flex gap-2 overflow-x-auto px-1 py-1", children: people.map((person, index) => {
+            const selected = index === active;
+            const finished = done(index);
+            return (_jsxs("button", { type: "button", role: "tab", id: serviceTabId(index), "aria-selected": selected, "aria-controls": selected ? serviceTabPanelId(index) : undefined, tabIndex: selected ? 0 : -1, onClick: () => onSelect(index), 
+                // Weight and ring carry the open tab alongside the colour, as the
+                // category pills do. Focus is an outline, so it stacks on the
+                // selection ring instead of replacing it with a fainter one.
+                className: cn('inline-flex h-11 shrink-0 items-center gap-1.5 rounded-full border-[1.5px] px-4 text-sm whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring', selected
+                    ? 'border-primary bg-primary/10 font-bold text-foreground ring-2 ring-primary'
+                    : 'border-primary/35 font-normal text-primary hover:border-primary hover:bg-primary/5', classNames?.tab, selected && classNames?.tabSelected), children: [finished && _jsx(Check, { "aria-hidden": "true", className: "size-4 shrink-0" }), person.label, finished && (_jsxs("span", { className: "sr-only", children: [', ', renderLabel(labels['service.tabDone'])] }))] }, person.key));
+        }) }));
+}
+/**
+ * The multi-select step's sticky bar: the running total, what is still
+ * missing, and «Next». The same bar as `SummaryBar`, so the step reads as one
+ * flow; a caller that also renders `SummaryBar` hides it on this step.
+ *
+ * «Next» is never disabled. A disabled button explains nothing and is skipped
+ * by a screen reader's tab order; this one stays, the line says what is
+ * missing, and the caller decides what pressing it does.
+ */
+export function TotalBar({ selection, format, classNames, }) {
+    const { total, canContinue, labels } = selection;
+    return (_jsxs("div", { className: slotClass(classNames, 'bar', 'sticky bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur-md'), children: [_jsx(LiveStatus, { text: selection.notice ?? null, className: "px-5 text-sm font-medium text-foreground [&:not(:empty)]:pt-3" }), _jsxs("div", { className: "flex h-16 items-center justify-between gap-4 px-5", children: [_jsxs("div", { "aria-live": "polite", "aria-atomic": "true", className: "min-w-0 text-sm tabular-nums", children: [total !== null && (_jsx("p", { className: "truncate font-semibold", children: renderLabel(labels['service.total'], {
+                                    minutes: total.minutes,
+                                    price: format.price(total.priceOre),
+                                }) })), !canContinue && (_jsx("p", { className: "truncate text-muted-foreground", children: renderLabel(labels['service.chooseFirst']) }))] }), _jsx(BookingButton, { size: "lg", onClick: selection.onContinue, children: renderLabel(labels['service.continue']) })] })] }));
+}
+/**
+ * A service card on the multi-select step: a real checkbox inside its label.
+ * Space (and Enter) toggles it, the label's whole box is the target, and a
+ * screen reader hears «checkbox, checked».
+ */
+export function MultiServiceCard({ name, selected, onPick, duration, price, className, selectedClassName, }) {
+    return (_jsxs("label", { className: cn('flex min-h-14 w-full cursor-pointer items-center gap-4 rounded-lg border px-5 py-4 text-left transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary', selected ? 'border-primary bg-primary/5' : 'border-border bg-card hover:border-primary', className, selected && selectedClassName), children: [_jsx("input", { type: "checkbox", className: "sr-only", checked: selected, onChange: onPick, 
+                // Enter as well as Space: on a phone-sized list the card reads as a
+                // button, and a keyboard visitor presses it like one.
+                onKeyDown: (event) => {
+                    if (event.key !== 'Enter')
+                        return;
+                    event.preventDefault();
+                    onPick();
+                } }), _jsx("span", { "aria-hidden": "true", className: cn('flex size-6 shrink-0 items-center justify-center rounded-[4px] border-[1.5px] transition-colors', 
+                // The empty box needs 3:1 against the card to be seen at all.
+                selected ? 'border-primary bg-primary text-primary-foreground' : 'border-muted-foreground'), children: selected && _jsx(Check, { className: "size-4" }) }), _jsxs("span", { className: "flex min-w-0 flex-1 items-baseline justify-between gap-4", children: [_jsx("span", { className: "font-medium", children: name }), _jsxs("span", { className: "flex items-baseline gap-4 text-right", children: [_jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: duration }), price] })] })] }));
+}

package/dist/booking/internal/visit.d.ts

@@ -0,0 +1,13 @@
+import type { WizardService } from '../types.js';
+/**
+ * One person's visit: their first service and, when they booked more, the
+ * ones after it — done back to back, with one stylist.
+ */
+export interface VisitLike {
+    service: WizardService;
+    extraServices?: ReadonlyArray<WizardService>;
+}
+/** Every service in the visit, in the order they are done. */
+export declare function visitServices(item: VisitLike): WizardService[];
+/** The visit's services by name: «Klipp + Vask». */
+export declare function visitName(item: VisitLike): string;

package/dist/booking/internal/visit.js

@@ -0,0 +1,10 @@
+/** Every service in the visit, in the order they are done. */
+export function visitServices(item) {
+    return [item.service, ...(item.extraServices ?? [])];
+}
+/** The visit's services by name: «Klipp + Vask». */
+export function visitName(item) {
+    return visitServices(item)
+        .map((service) => service.name)
+        .join(' + ');
+}

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

@@ -16,7 +16,7 @@ import { REBOOK_CARDS_LABEL_KEYS } from './portal/rebook-cards.js';
 import { UPCOMING_BOOKINGS_LABEL_KEYS } from './portal/upcoming-bookings.js';
 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 } from './service-screen.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';
@@ -29,7 +29,14 @@ 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.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.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.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 type BookingLabelKey = (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. */
-export type BookingLabels = Record<BookingLabelKey, BookingLabel>;
+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 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];
+/** 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. */
+export type BookingLabels = Record<BookingRequiredLabelKey, BookingLabel> & Partial<Record<BookingOptionalLabelKey, BookingLabel>>;

package/dist/booking/label-keys.js

@@ -15,7 +15,7 @@ import { REBOOK_CARDS_LABEL_KEYS } from './portal/rebook-cards.js';
 import { UPCOMING_BOOKINGS_LABEL_KEYS } from './portal/upcoming-bookings.js';
 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 } from './service-screen.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';
@@ -33,6 +33,7 @@ export const BOOKING_LABEL_KEYS = [
         ...WHO_SCREEN_LABEL_KEYS,
         ...ADD_CHILD_SHEET_LABEL_KEYS,
         ...SERVICE_SCREEN_LABEL_KEYS,
+        ...SERVICE_SCREEN_MULTI_LABEL_KEYS,
         ...STYLIST_SCREEN_LABEL_KEYS,
         ...TIME_SCREEN_LABEL_KEYS,
         ...MANAGE_SCREEN_LABEL_KEYS,

package/dist/booking/login-panel.d.ts

@@ -4,8 +4,8 @@ import { type OtpSlotsLabels, type OtpSlotsSlot } from './otp-slots.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingGuardian } from './types.js';
 import { type VippsButtonLabels, type VippsButtonSlot, type VippsStartAction } from './vipps-button.js';
-export declare const LOGIN_PANEL_OWN_LABEL_KEYS: readonly ["login.heading", "login.codeHeading", "login.or", "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"];
-export declare const LOGIN_PANEL_LABEL_KEYS: readonly ["login.heading", "login.codeHeading", "login.or", "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", "otp.label", "vipps.button", "vipps.unavailable", "vipps.throttled"];
+export declare const LOGIN_PANEL_OWN_LABEL_KEYS: readonly ["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"];
+export declare const LOGIN_PANEL_LABEL_KEYS: readonly ["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", "otp.label", "vipps.button", "vipps.unavailable", "vipps.throttled"];
 /**
  * Placeholders: `login.codeHelp` `{email}`, `login.vippsSentTo` `{to}`,
  * `login.cooldownWait` `{seconds}`, `login.resendIn` `{time}` («0:30»).
@@ -20,13 +20,13 @@ export type LoginPanelLabels = Record<(typeof LOGIN_PANEL_OWN_LABEL_KEYS)[number
  * - `divider`: the «or» rule between Vipps and e-mail.
  * - `links`: the row under the code form; `link`: each of its buttons.
  */
-export type LoginPanelSlot = 'root' | 'notice' | 'form' | 'input' | 'submit' | 'divider' | 'links' | 'link';
+export type LoginPanelSlot = 'root' | 'notice' | 'form' | 'input' | 'submit' | 'divider' | 'emailButton' | 'links' | 'link';
 /** What asking for a code answered. `invalidEmail`: the address was refused. */
 export type LoginStartResult = {
     ok: true;
 } | {
     ok: false;
-    reason: 'unreachable' | 'invalidEmail';
+    reason: 'unreachable' | 'invalidEmail' | 'throttled';
 };
 /** What checking a code answered. `conflict`: the Vipps account belongs to another profile. */
 export type LoginVerifyResult = {
@@ -53,6 +53,8 @@ export interface LoginPanelMemory {
     sentTo: string;
     /** When «send a new code» opens again (epoch ms); `0` before any code went out. */
     resendAt: number;
+    /** `emailCollapsed` only: the e-mail form has been opened. */
+    emailOpen?: boolean;
 }
 export declare const FRESH_LOGIN_MEMORY: LoginPanelMemory;
 /** Where a Vipps return that asks for the code starts: on the code, for `to`. */
@@ -75,6 +77,8 @@ export interface LoginPanelProps {
     onVipps?: VippsStartAction;
     /** Where a Vipps login should land. */
     vippsNext?: string | null;
+    /** Show e-mail as a second button under Vipps; the form opens on tap. Ignored without `onVipps`. */
+    emailCollapsed?: boolean;
     /** Replaces the Vipps button's label. */
     vippsLabel?: string;
     /** Start on the Vipps confirm code screen (uncontrolled memory only). */
@@ -106,4 +110,4 @@ export interface LoginPanelProps {
  * waits between asks, so an impatient tap does not spend the rate-limit
  * allowance on a code that is still valid.
  */
-export declare function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps, vippsNext, vippsLabel, vippsConfirm, memory: memoryProp, onMemoryChange, heading, intro, resendCooldownMs, classNames, otpClassNames, vippsClassNames, }: LoginPanelProps): import("react").JSX.Element;
+export declare function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps, vippsNext, vippsLabel, emailCollapsed, vippsConfirm, memory: memoryProp, onMemoryChange, heading, intro, resendCooldownMs, classNames, otpClassNames, vippsClassNames, }: LoginPanelProps): import("react").JSX.Element;

package/dist/booking/login-panel.js

@@ -15,6 +15,7 @@ export const LOGIN_PANEL_OWN_LABEL_KEYS = [
     'login.heading',
     'login.codeHeading',
     'login.or',
+    'login.continueEmail',
     'login.emailIntro',
     'login.emailLabel',
     'login.sendCode',
@@ -56,6 +57,12 @@ export function loginMemoryFor(vippsConfirm) {
         ? { mode: 'vipps', email: '', sentTo: vippsConfirm.to ?? '', resendAt: 0 }
         : FRESH_LOGIN_MEMORY;
 }
+/** Which notice each refused send shows. */
+const START_NOTICE = {
+    invalidEmail: 'badEmail',
+    throttled: 'throttled',
+    unreachable: 'unreachable',
+};
 /** The notices that describe a mistake in the field they sit under. */
 const FIELD_ERRORS = new Set([
     'badEmail',
@@ -92,11 +99,11 @@ function verifyNotice(reason, vipps) {
  * waits between asks, so an impatient tap does not spend the rate-limit
  * allowance on a code that is still valid.
  */
-export function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps, vippsNext = null, vippsLabel, vippsConfirm = null, memory: memoryProp, onMemoryChange, heading = () => null, intro, resendCooldownMs = 30_000, classNames, otpClassNames, vippsClassNames, }) {
+export function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps, vippsNext = null, vippsLabel, emailCollapsed = false, vippsConfirm = null, memory: memoryProp, onMemoryChange, heading = () => null, intro, resendCooldownMs = 30_000, classNames, otpClassNames, vippsClassNames, }) {
     const id = useId();
     const [heldHere, setHeldHere] = useState(() => loginMemoryFor(vippsConfirm));
     const controlled = memoryProp !== undefined && onMemoryChange !== undefined;
-    const { mode, email, sentTo, resendAt } = controlled ? memoryProp : heldHere;
+    const { mode, email, sentTo, resendAt, emailOpen = false } = controlled ? memoryProp : heldHere;
     const setMemory = controlled ? onMemoryChange : setHeldHere;
     const remember = (patch) => setMemory((previous) => ({ ...previous, ...patch }));
     const setEmail = (next) => remember({ email: next });
@@ -112,6 +119,10 @@ export function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps
     const verifying = useRef(false);
     const [checking, setChecking] = useState(false);
     const codeRef = useRef(null);
+    const emailRef = useRef(null);
+    const collapsed = emailCollapsed && !!onVipps && !emailOpen;
+    /** Focus only after a tap opened the form, not when memory restores it. */
+    const focusEmail = useRef(false);
     const emailId = `${id}-email`;
     const codeId = `${id}-code`;
     const noticeId = `${id}-notice`;
@@ -136,6 +147,12 @@ export function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps
         setFocusCode(false);
         codeRef.current?.querySelector('input')?.focus();
     }, [focusCode, pending, mode]);
+    useEffect(() => {
+        if (!focusEmail.current || collapsed)
+            return;
+        focusEmail.current = false;
+        emailRef.current?.focus();
+    }, [collapsed]);
     function requestCode(address, resend) {
         startTransition(async () => {
             let result;
@@ -146,7 +163,7 @@ export function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps
                 result = { ok: false, reason: 'unreachable' };
             }
             if (!result.ok) {
-                setNotice(result.reason === 'invalidEmail' ? 'badEmail' : 'unreachable');
+                setNotice(START_NOTICE[result.reason]);
                 return;
             }
             const sentAt = Date.now();
@@ -206,7 +223,8 @@ export function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps
         verify(code);
     }
     function switchEmail() {
-        remember({ mode: 'start' });
+        // They already chose e-mail: back to the open form, not the two buttons.
+        remember({ mode: 'start', emailOpen: true });
         setCode('');
         setNotice(null);
     }
@@ -228,7 +246,10 @@ export function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps
     const link = slotClass(classNames, 'link', 'font-semibold text-primary underline underline-offset-4 disabled:no-underline disabled:opacity-60');
     return (_jsxs("div", { className: slotClass(classNames, 'root', 'space-y-6'), children: [heading(renderLabel(labels[mode === 'start' ? 'login.heading' : 'login.codeHeading'])), mode === 'vipps' && (_jsx("p", { className: "text-muted-foreground", children: sentTo === ''
                     ? labels['login.vippsSentToUnknown']
-                    : renderLabel(labels['login.vippsSentTo'], { to: sentTo }) })), liveRegion, cooldownRegion, mode === 'start' ? (_jsxs(_Fragment, { children: [intro, onVipps && (_jsxs(_Fragment, { children: [_jsx(VippsButton, { onVipps: onVipps, next: vippsNext, label: vippsLabel, labels: labels, classNames: vippsClassNames }), _jsxs("div", { className: slotClass(classNames, 'divider', 'flex items-center gap-4 text-sm text-muted-foreground'), "aria-hidden": "true", children: [_jsx("span", { className: "h-px flex-1 bg-border" }), labels['login.or'], _jsx("span", { className: "h-px flex-1 bg-border" })] })] })), _jsx("p", { className: "text-muted-foreground", children: labels['login.emailIntro'] }), _jsxs("form", { onSubmit: submitEmail, className: slotClass(classNames, 'form', 'space-y-6'), children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: emailId, children: labels['login.emailLabel'] }), _jsx(Input, { id: emailId, type: "email", autoComplete: "email", required: true, value: email, "aria-describedby": noticeText ? noticeId : undefined, "aria-invalid": isFieldError || undefined, onChange: (event) => setEmail(event.target.value), className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS) })] }), _jsx(BookingButton, { type: "submit", size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: pending, children: labels['login.sendCode'] })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: submitCode, className: slotClass(classNames, 'form', 'space-y-6'), children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: codeId, children: labels['login.codeLabel'] }), _jsx("div", { ref: codeRef, children: _jsx(OtpSlots, { id: codeId, value: code, 
+                    : renderLabel(labels['login.vippsSentTo'], { to: sentTo }) })), liveRegion, cooldownRegion, mode === 'start' ? (_jsxs(_Fragment, { children: [!collapsed && intro, onVipps && (_jsxs(_Fragment, { children: [_jsx(VippsButton, { onVipps: onVipps, next: vippsNext, label: vippsLabel, labels: labels, classNames: vippsClassNames }), !emailCollapsed && (_jsxs("div", { className: slotClass(classNames, 'divider', 'flex items-center gap-4 text-sm text-muted-foreground'), "aria-hidden": "true", children: [_jsx("span", { className: "h-px flex-1 bg-border" }), labels['login.or'], _jsx("span", { className: "h-px flex-1 bg-border" })] }))] })), collapsed ? (_jsx(BookingButton, { type: "button", variant: "outline", size: "lg", className: slotClass(classNames, 'emailButton', 'w-full'), onClick: () => {
+                            focusEmail.current = true;
+                            remember({ emailOpen: true });
+                        }, children: labels['login.continueEmail'] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-muted-foreground", children: labels['login.emailIntro'] }), _jsxs("form", { onSubmit: submitEmail, className: slotClass(classNames, 'form', 'space-y-6'), children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: emailId, children: labels['login.emailLabel'] }), _jsx(Input, { ref: emailRef, id: emailId, type: "email", autoComplete: "email", required: true, value: email, "aria-describedby": noticeText ? noticeId : undefined, "aria-invalid": (isFieldError && notice !== 'throttled') || undefined, onChange: (event) => setEmail(event.target.value), className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS) })] }), _jsx(BookingButton, { type: "submit", size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: pending, children: labels['login.sendCode'] })] })] }))] })) : (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: submitCode, className: slotClass(classNames, 'form', 'space-y-6'), children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: codeId, children: labels['login.codeLabel'] }), _jsx("div", { ref: codeRef, children: _jsx(OtpSlots, { id: codeId, value: code, 
                                             // Read-only rather than disabled while a request is out, so
                                             // the caret stays in the field instead of falling out of a
                                             // dialog; a wrong code then only has to empty it.

package/dist/booking/login-sheet.d.ts

@@ -3,7 +3,7 @@ import { type LoginPanelLabels, type LoginPanelProps } from './login-panel.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingGuardian } from './types.js';
 export declare const LOGIN_SHEET_OWN_LABEL_KEYS: readonly ["loginSheet.prompt", "loginSheet.trigger", "loginSheet.intro", "loginSheet.vipps", "loginSheet.close"];
-export declare const LOGIN_SHEET_LABEL_KEYS: readonly ["loginSheet.prompt", "loginSheet.trigger", "loginSheet.intro", "loginSheet.vipps", "loginSheet.close", "login.heading", "login.codeHeading", "login.or", "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", "otp.label", "vipps.button", "vipps.unavailable", "vipps.throttled"];
+export declare const LOGIN_SHEET_LABEL_KEYS: readonly ["loginSheet.prompt", "loginSheet.trigger", "loginSheet.intro", "loginSheet.vipps", "loginSheet.close", "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", "otp.label", "vipps.button", "vipps.unavailable", "vipps.throttled"];
 /** `loginSheet.prompt` holds a `{trigger}` placeholder where the trigger button goes. */
 export type LoginSheetLabels = Record<(typeof LOGIN_SHEET_OWN_LABEL_KEYS)[number], BookingLabel> & LoginPanelLabels;
 /**

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

@@ -9,9 +9,32 @@ import type { BookingServiceDto } from './types.js';
  * Presentational. A tap raises `onPick` and the caller's machine decides what
  * that means; nothing here knows which step comes next or whether the basket
  * already holds a child.
+ *
+ * With a `selection`, the step is multi-select instead: one person may have
+ * several services as ONE visit, the cards tick rather than answer, and a
+ * sticky bar carries the running total and the way on.
  */
 export declare const SERVICE_SCREEN_LABEL_KEYS: readonly ["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"];
-export type ServiceScreenLabels = Record<(typeof SERVICE_SCREEN_LABEL_KEYS)[number], BookingLabel>;
+/**
+ * The keys only the multi-select step reads (`ServiceScreenProps.selection`).
+ * Optional in `ServiceScreenLabels`, so a pack written before they existed
+ * still type-checks; a `selection` carries them all, required, in
+ * `ServiceSelection.labels` — a multi-select step cannot compile without them.
+ *
+ * - `service.multiHint` — under the heading: you may tick more than one;
+ * - `service.total` — the sticky bar's running total, `{minutes}` and `{price}`;
+ * - `service.chooseFirst` — the sticky bar's line while someone has nothing ticked;
+ * - `service.continue` — the sticky bar's button;
+ * - `service.party.nothingBookable` — a family member with nothing on their
+ *   menu, `{label}`: the business takes nothing for them online (the party's
+ *   size is no longer the reason, as `service.party.nothingFits` says);
+ * - `service.tabDone` — read after a family member's tab name once they have
+ *   something ticked (the visible tick, in words): «Theo, ferdig».
+ */
+export declare const SERVICE_SCREEN_MULTI_LABEL_KEYS: readonly ["service.multiHint", "service.total", "service.chooseFirst", "service.continue", "service.party.nothingBookable", "service.tabDone"];
+/** The multi-select step's labels, every one required (`ServiceSelection.labels`). */
+export type ServiceMultiLabels = Record<(typeof SERVICE_SCREEN_MULTI_LABEL_KEYS)[number], BookingLabel>;
+export type ServiceScreenLabels = Record<(typeof SERVICE_SCREEN_LABEL_KEYS)[number], BookingLabel> & Partial<ServiceMultiLabels>;
 /**
  * - `root` — the `<section>`
  * - `heading` — the `<h2>`
@@ -19,8 +42,10 @@ export type ServiceScreenLabels = Record<(typeof SERVICE_SCREEN_LABEL_KEYS)[numb
  * - `groupHeading` — a category's (or a party member's) `<h3>`
  * - `card` / `cardSelected` — a service card / a pressed one (passed to `ServiceCard`)
  * - `price` — a card's price (passed to `ServiceCard`, and the «same as last time» card's)
+ * - `tab` / `tabSelected` — a person's tab in a multi-select family / the open one
+ * - `bar` — the multi-select step's sticky total bar
  */
-export type ServiceScreenSlot = 'root' | 'heading' | 'pill' | 'pillSelected' | 'groupHeading' | 'card' | 'cardSelected' | 'price';
+export type ServiceScreenSlot = 'tab' | 'tabSelected' | 'bar' | 'root' | 'heading' | 'pill' | 'pillSelected' | 'groupHeading' | 'card' | 'cardSelected' | 'price';
 /** One service group, in display order. */
 export interface ServiceScreenCategory {
     key: string;
@@ -51,6 +76,13 @@ export interface ServiceCardProps {
      */
     kind: 'book' | 'choice' | 'phone';
     selected: boolean;
+    /**
+     * `choice` only: the card is one of several the person may tick (a
+     * checkbox, `selected` = ticked), not their one answer (a pressed button).
+     * Set on the multi-select step (`ServiceScreenProps.selection`).
+     */
+    multiple?: boolean;
+    /** Raised on a tap. On a `multiple` card it toggles; nothing advances. */
     onPick: () => void;
     /** The number for `phone` cards; `null` renders the sentence without a link. */
     phone: string | null;
@@ -61,6 +93,40 @@ export interface ServiceCardProps {
     /** Merged onto the price (the `price` slot). */
     priceClassName?: string;
 }
+/**
+ * The multi-select step: each person ticks one or more services, done back to
+ * back as one visit. The caller's machine owns the lists; the screen only
+ * reports taps.
+ */
+export interface ServiceSelection {
+    /** Each person's services so far, in order (index = party person; a lone person is index 0). */
+    lists: ReadonlyArray<ReadonlyArray<{
+        id: string;
+    }>>;
+    /** A tick or an untick on the person whose tab is open (0 for a lone person). Never advances. */
+    onToggle: (personIndex: number, service: BookingServiceDto) => void;
+    /** «Next» in the sticky bar. Called whether or not `canContinue`: the caller decides. */
+    onContinue: () => void;
+    /** The running total for the whole booking, or `null` when nothing is chosen. */
+    total: {
+        minutes: number;
+        priceOre: number;
+    } | null;
+    /**
+     * Whether every person has at least one service. «Next» stays enabled
+     * either way (a disabled button explains nothing); while `false` the bar
+     * shows `service.chooseFirst` instead of the total.
+     */
+    canContinue: boolean;
+    /** A refusal to say politely (e.g. too many services), announced as a live region. */
+    notice?: string | null;
+    /**
+     * The multi-select step's labels (`SERVICE_SCREEN_MULTI_LABEL_KEYS`), all
+     * required: a pack written before multi-select cannot reach this step and
+     * draw an unnamed «Next». A pack that defines them can be passed whole.
+     */
+    labels: ServiceMultiLabels;
+}
 export interface ServiceScreenComponents {
     ServiceCard?: ComponentType<ServiceCardProps>;
 }
@@ -126,6 +192,14 @@ export interface ServiceScreenProps {
     possessive?: (name: string) => string;
     classNames?: SlotClassNames<ServiceScreenSlot>;
     components?: ServiceScreenComponents;
+    /**
+     * Switches the step to multi-select (see `ServiceSelection`): bookable cards
+     * become checkboxes, a family gets one tab per person, and a sticky bar
+     * shows the total and «Next». `onPick` / `party.onPickFor` then serve only
+     * the one-tap «same as last time». Its labels come in `selection.labels`.
+     * Absent: the one-tap step, unchanged.
+     */
+    selection?: ServiceSelection;
 }
 export declare function ServiceScreen(props: ServiceScreenProps): import("react").JSX.Element;
 /**
@@ -138,4 +212,4 @@ export declare function ServiceScreen(props: ServiceScreenProps): import("react"
  *   online, and a tap target that accepts the tap and does nothing is the dead
  *   end the phone number replaces. The card stays so the catalogue is whole.
  */
-export declare function DefaultServiceCard({ service, kind, selected, onPick, phone, format, labels, className, selectedClassName, priceClassName, }: ServiceCardProps): import("react").JSX.Element;
+export declare function DefaultServiceCard({ service, kind, selected, multiple, onPick, phone, format, labels, className, selectedClassName, priceClassName, }: ServiceCardProps): import("react").JSX.Element;

package/dist/booking/service-screen.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { cn } from '../lib/utils.js';
 import { renderLabel } from './internal/label-parts.js';
+import { MultiServiceCard, PersonTabs, serviceTabId, serviceTabPanelId, TotalBar, } from './internal/service-multi.js';
 import { BookingButton } from './internal/ui.js';
 import { fillLabel, labelText } from './labels.js';
 import { slotClass } from './slots.js';
@@ -12,6 +13,10 @@ import { slotClass } from './slots.js';
  * Presentational. A tap raises `onPick` and the caller's machine decides what
  * that means; nothing here knows which step comes next or whether the basket
  * already holds a child.
+ *
+ * With a `selection`, the step is multi-select instead: one person may have
+ * several services as ONE visit, the cards tick rather than answer, and a
+ * sticky bar carries the running total and the way on.
  */
 export const SERVICE_SCREEN_LABEL_KEYS = [
     'service.heading',
@@ -28,10 +33,35 @@ export const SERVICE_SCREEN_LABEL_KEYS = [
     'service.party.nothingFits',
     'service.party.remove',
 ];
+/**
+ * The keys only the multi-select step reads (`ServiceScreenProps.selection`).
+ * Optional in `ServiceScreenLabels`, so a pack written before they existed
+ * still type-checks; a `selection` carries them all, required, in
+ * `ServiceSelection.labels` — a multi-select step cannot compile without them.
+ *
+ * - `service.multiHint` — under the heading: you may tick more than one;
+ * - `service.total` — the sticky bar's running total, `{minutes}` and `{price}`;
+ * - `service.chooseFirst` — the sticky bar's line while someone has nothing ticked;
+ * - `service.continue` — the sticky bar's button;
+ * - `service.party.nothingBookable` — a family member with nothing on their
+ *   menu, `{label}`: the business takes nothing for them online (the party's
+ *   size is no longer the reason, as `service.party.nothingFits` says);
+ * - `service.tabDone` — read after a family member's tab name once they have
+ *   something ticked (the visible tick, in words): «Theo, ferdig».
+ */
+export const SERVICE_SCREEN_MULTI_LABEL_KEYS = [
+    'service.multiHint',
+    'service.total',
+    'service.chooseFirst',
+    'service.continue',
+    'service.party.nothingBookable',
+    'service.tabDone',
+];
 const HEADING_ID = 'booking-service-heading';
 function groupHeadingId(category) {
     return `booking-services-${category}`;
 }
+const HINT_ID = 'booking-service-hint';
 const allFit = () => true;
 const asIs = (name) => name;
 /** The age divider's sentence for `name`. */
@@ -61,6 +91,10 @@ function cardProps(shared) {
         priceClassName: shared.classNames?.price,
     };
 }
+/** The ids `personIndex` has ticked so far. */
+function tickedBy(selection, personIndex) {
+    return new Set((selection.lists[personIndex] ?? []).map((service) => service.id));
+}
 export function ServiceScreen(props) {
     const shared = {
         labels: props.labels,
@@ -74,8 +108,13 @@ export function ServiceScreen(props) {
     }
     return _jsx(SingleServiceScreen, { ...props, shared: shared });
 }
-function Heading({ shared }) {
-    return (_jsx("h2", { id: HEADING_ID, tabIndex: -1, className: slotClass(shared.classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: shared.labels['service.heading'] }));
+function Heading({ shared, multiLabels = null, }) {
+    const heading = (_jsx("h2", { id: HEADING_ID, tabIndex: -1, className: slotClass(shared.classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: shared.labels['service.heading'] }));
+    if (!multiLabels)
+        return heading;
+    // «Choose one or more» — said once, under the question, so the first tick
+    // is not a surprise when it does not move the step on.
+    return (_jsxs("div", { className: "space-y-1", children: [heading, _jsx("p", { id: HINT_ID, className: "text-sm text-muted-foreground", children: renderLabel(multiLabels['service.multiHint']) })] }));
 }
 /**
  * Below the ordinary list: what usually does not suit this person, still one
@@ -87,8 +126,18 @@ function UnlikelyForAge({ id, name, services, shared, children, }) {
         return null;
     return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-3 pt-2", children: [_jsx("span", { "aria-hidden": "true", className: "h-px flex-1 bg-border" }), _jsx("p", { id: id, className: "text-sm text-muted-foreground", children: ageDividerLabel(shared.labels, name, shared.possessive) }), _jsx("span", { "aria-hidden": "true", className: "h-px flex-1 bg-border" })] }), _jsx("ul", { "aria-labelledby": id, className: "space-y-2", children: services.map((service) => (_jsx("li", { children: children(service) }, service.id))) })] }));
 }
-function SingleServiceScreen({ services, categories, categoryOf, serviceFits = allFit, phone = null, initialCategory = null, onPick, suggestion = null, chosenId = null, childName = null, shared, }) {
+function SingleServiceScreen({ services, categories, categoryOf, serviceFits = allFit, phone = null, initialCategory = null, onPick, suggestion = null, chosenId = null, childName = null, selection, shared, }) {
     const { Card, labels, classNames } = shared;
+    const ticked = selection ? tickedBy(selection, 0) : null;
+    // One person: a tap either answers the step or, multi-select, ticks.
+    const bookable = (service) => ticked && selection
+        ? {
+            kind: 'choice',
+            multiple: true,
+            selected: ticked.has(service.id),
+            onPick: () => selection.onToggle(0, service),
+        }
+        : { kind: 'book', selected: false, onPick: () => onPick(service) };
     const fileUnder = categoryOf ?? defaultCategoryOf(categories);
     // What certainly does not suit this person moves below a divider, still
     // bookable. Telephone-only cards stay where they are: the list stays whole.
@@ -119,7 +168,7 @@ function SingleServiceScreen({ services, categories, categoryOf, serviceFits = a
             block: 'start',
         });
     }
-    return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx(Heading, { shared: shared }), suggestion && (_jsxs("div", { className: "space-y-2", children: [_jsx(SameAsLast, { suggestion: suggestion, selected: chosenId === suggestion.service.id, onPick: () => onPick(suggestion.service), shared: shared }), _jsx("p", { className: "text-sm font-semibold text-muted-foreground", children: labels['service.chooseOther'] })] })), groups.length > 1 && (_jsxs("fieldset", { className: "flex flex-wrap gap-2", children: [_jsx("legend", { className: "sr-only", children: labels['service.categoriesLegend'] }), groups.map(({ category }) => {
+    return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx(Heading, { shared: shared, multiLabels: selection?.labels }), suggestion && (_jsxs("div", { className: "space-y-2", children: [_jsx(SameAsLast, { suggestion: suggestion, selected: ticked ? ticked.has(suggestion.service.id) : chosenId === suggestion.service.id, onPick: () => onPick(suggestion.service), shared: shared }), _jsx("p", { className: "text-sm font-semibold text-muted-foreground", children: labels['service.chooseOther'] })] })), groups.length > 1 && (_jsxs("fieldset", { className: "flex flex-wrap gap-2", children: [_jsx("legend", { className: "sr-only", children: labels['service.categoriesLegend'] }), groups.map(({ category }) => {
                         const marked = category.key === current;
                         return (_jsx(BookingButton, { variant: "outline", size: "sm", "aria-pressed": marked, onClick: () => jumpTo(category.key), 
                             // Weight and ring carry the selection alongside the colour, so
@@ -129,7 +178,9 @@ function SingleServiceScreen({ services, categories, categoryOf, serviceFits = a
                                 : 'font-normal', classNames?.pill, marked && classNames?.pillSelected), children: category.label }, category.key));
                     })] })), groups.map(({ category, items }) => (_jsxs("section", { "aria-labelledby": groupHeadingId(category.key), 
                 // Clears a sticky header when a pill jumps here.
-                className: "scroll-mt-24 space-y-3", children: [_jsx("h3", { id: groupHeadingId(category.key), className: slotClass(classNames, 'groupHeading', 'font-sans text-lg font-bold text-muted-foreground'), children: category.label }), _jsx("ul", { className: "space-y-2", children: items.map((service) => (_jsx("li", { children: _jsx(Card, { service: service, kind: service.bookableOnline ? 'book' : 'phone', selected: false, onPick: () => onPick(service), phone: phone, ...cardProps(shared) }) }, service.id))) })] }, category.key))), _jsx(UnlikelyForAge, { id: "booking-services-unlikely", name: childName, services: unlikely, shared: shared, children: (service) => (_jsx(Card, { service: service, kind: "book", selected: false, onPick: () => onPick(service), phone: phone, ...cardProps(shared) })) })] }));
+                className: "scroll-mt-24 space-y-3", children: [_jsx("h3", { id: groupHeadingId(category.key), className: slotClass(classNames, 'groupHeading', 'font-sans text-lg font-bold text-muted-foreground'), children: category.label }), _jsx("ul", { "aria-describedby": selection ? HINT_ID : undefined, className: "space-y-2", children: items.map((service) => (_jsx("li", { children: _jsx(Card, { service: service, ...(service.bookableOnline
+                                    ? bookable(service)
+                                    : { kind: 'phone', selected: false, onPick: () => onPick(service) }), phone: phone, ...cardProps(shared) }) }, service.id))) })] }, category.key))), _jsx(UnlikelyForAge, { id: "booking-services-unlikely", name: childName, services: unlikely, shared: shared, children: (service) => (_jsx(Card, { service: service, ...bookable(service), phone: phone, ...cardProps(shared) })) }), selection && (_jsx(TotalBar, { selection: selection, format: shared.format, classNames: classNames }))] }));
 }
 function defaultCategoryOf(categories) {
     const known = new Set(categories.map((category) => category.key));
@@ -145,51 +196,77 @@ function defaultCategoryOf(categories) {
  * a `childCategory`, a child gets that menu and an adult everything else,
  * which is often nothing, and is told so.
  */
-function PartyServiceScreen({ services, categories, categoryOf, childCategory, serviceFits = allFit, party, shared, }) {
+function PartyServiceScreen({ services, categories, categoryOf, childCategory, serviceFits = allFit, party, selection, shared, }) {
     const { Card, labels, classNames } = shared;
     const fileUnder = categoryOf ?? defaultCategoryOf(categories);
     const size = party.people.length;
-    const fits = services.filter((service) => service.bookableOnline && service.maxPerBooking >= size);
+    const [active, setActive] = useState(0);
+    // Multi-select: the engine books a grown-up's visit alongside the
+    // children's, so the party's size no longer narrows the menu; a refusal
+    // comes back from the caller as `selection.notice`.
+    const fits = services.filter((service) => service.bookableOnline && (selection !== undefined || service.maxPerBooking >= size));
+    function personBody(person, index) {
+        const { fitting: menu, unlikely } = byFit(
+        // A grown-up gets the grown-ups' menu and a child the children's —
+        // a kids' cut for «myself» is not an answer, it is a way round the
+        // note below that books the wrong thing.
+        childCategory === undefined
+            ? fits
+            : fits.filter((service) => (fileUnder(service) === childCategory) === !person.adult), (service) => serviceFits(service, index));
+        const ticked = selection ? tickedBy(selection, index) : null;
+        const chosen = party.choices[index]?.id ?? null;
+        const suggestion = person.suggestion ?? null;
+        const pick = (service) => party.onPickFor(index, service);
+        const choiceCard = (service) => (_jsx(Card, { service: service, kind: "choice", ...(ticked && selection
+                ? {
+                    multiple: true,
+                    selected: ticked.has(service.id),
+                    onPick: () => selection.onToggle(index, service),
+                }
+                : { selected: service.id === chosen, onPick: () => pick(service) }), phone: null, ...cardProps(shared) }));
+        const unlikelyList = (_jsx(UnlikelyForAge, { id: `booking-service-unlikely-${index}`, name: person.name, services: unlikely, shared: shared, children: choiceCard }));
+        const listLabel = fillLabel(labels['service.party.listLabel'], { label: person.label });
+        if (suggestion && menu.some((service) => service.id === suggestion.service.id)) {
+            return (_jsx(PersonWithSuggestion
+            // A fresh disclosure per person: the tabs share one panel.
+            , { listLabel: listLabel, suggestion: suggestion, menu: menu, ticked: ticked, chosen: chosen, onPick: pick, choiceCard: choiceCard, unlikely: unlikelyList, hasUnlikely: unlikely.length > 0, shared: shared }, person.key));
+        }
+        if (menu.length === 0 && unlikely.length === 0) {
+            return (_jsx(NothingInThisParty, { person: person, labels: labels, multiLabels: selection?.labels ?? null, onRemove: party.onRemove ? () => party.onRemove?.(index) : undefined }));
+        }
+        return (_jsxs(_Fragment, { children: [menu.length > 0 && (_jsx("ul", { "aria-label": listLabel, className: "space-y-2", children: menu.map((service) => (_jsx("li", { children: choiceCard(service) }, service.id))) })), unlikelyList] }));
+    }
+    if (selection) {
+        // A tab that left the party falls back to the last one still in it.
+        const current = Math.min(active, size - 1);
+        return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx(Heading, { shared: shared, multiLabels: selection.labels }), _jsx(PersonTabs, { people: party.people, active: current, done: (index) => (selection.lists[index]?.length ?? 0) > 0, onSelect: setActive, labels: selection.labels, labelledBy: HEADING_ID, describedBy: HINT_ID, classNames: classNames }), party.people.map((person, index) => index === current ? (_jsx("section", { role: "tabpanel", id: serviceTabPanelId(index), "aria-labelledby": serviceTabId(index), className: "space-y-3", children: personBody(person, index) }, person.key)) : null), _jsx(TotalBar, { selection: selection, format: shared.format, classNames: classNames })] }));
+    }
     return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx(Heading, { shared: shared }), party.people.map((person, index) => {
                 const headingId = `booking-service-for-${index}`;
-                const { fitting: menu, unlikely } = byFit(
-                // A grown-up gets the grown-ups' menu and a child the children's —
-                // a kids' cut for «myself» is not an answer, it is a way round the
-                // note below that books the wrong thing.
-                childCategory === undefined
-                    ? fits
-                    : fits.filter((service) => (fileUnder(service) === childCategory) === !person.adult), (service) => serviceFits(service, index));
-                const chosen = party.choices[index]?.id ?? null;
-                const suggestion = person.suggestion ?? null;
-                const pick = (service) => party.onPickFor(index, service);
-                const choiceCard = (service) => (_jsx(Card, { service: service, kind: "choice", selected: service.id === chosen, onPick: () => pick(service), phone: null, ...cardProps(shared) }));
-                const unlikelyList = (_jsx(UnlikelyForAge, { id: `booking-service-unlikely-${index}`, name: person.name, services: unlikely, shared: shared, children: choiceCard }));
-                const listLabel = fillLabel(labels['service.party.listLabel'], { label: person.label });
-                let body;
-                if (suggestion && menu.some((service) => service.id === suggestion.service.id)) {
-                    body = (_jsx(PersonWithSuggestion, { listLabel: listLabel, suggestion: suggestion, menu: menu, chosen: chosen, onPick: pick, choiceCard: choiceCard, unlikely: unlikelyList, hasUnlikely: unlikely.length > 0, shared: shared }));
-                }
-                else if (menu.length === 0 && unlikely.length === 0) {
-                    body = (_jsx(NothingInThisParty, { person: person, labels: labels, onRemove: party.onRemove ? () => party.onRemove?.(index) : undefined }));
-                }
-                else {
-                    body = (_jsxs(_Fragment, { children: [menu.length > 0 && (_jsx("ul", { "aria-label": listLabel, className: "space-y-2", children: menu.map((service) => (_jsx("li", { children: choiceCard(service) }, service.id))) })), unlikelyList] }));
-                }
-                return (_jsxs("section", { "aria-labelledby": headingId, className: "space-y-3", children: [_jsx("h3", { id: headingId, className: slotClass(classNames, 'groupHeading', 'font-sans text-lg font-bold'), children: person.label }), body] }, person.key));
+                return (_jsxs("section", { "aria-labelledby": headingId, className: "space-y-3", children: [_jsx("h3", { id: headingId, className: slotClass(classNames, 'groupHeading', 'font-sans text-lg font-bold'), children: person.label }), personBody(person, index)] }, person.key));
             })] }));
 }
 /**
- * Nothing can be booked for this person IN A PARTY THIS SIZE.
+ * Nothing can be booked for this person.
  *
- * The engine's rule: one request holds at most as many people as the
- * STRICTEST `maxPerBooking` among its services allows, so a one-per-booking
- * adult service cannot ride along with the children's. The step says so in
- * one line (the caller keeps «next» shut) and offers the one way on: take them
- * out, and book them as their own time.
+ * On the one-tap step that is IN A PARTY THIS SIZE — the engine's rule: one
+ * request holds at most as many people as the STRICTEST `maxPerBooking` among
+ * its services allows, so a one-per-booking adult service cannot ride along
+ * with the children's. On the multi-select step the size narrows nothing, so
+ * the reason is plainer: nothing on their menu is taken online. Either way the
+ * step says so in one line (the caller keeps «next» shut) and offers the one
+ * way on: take them out, and book them as their own time.
  */
-function NothingInThisParty({ person, labels, onRemove, }) {
+function NothingInThisParty({ person, labels, multiLabels, onRemove, }) {
     const values = { label: person.label };
-    return (_jsxs("div", { className: "space-y-2 rounded-lg border border-dashed border-border px-5 py-4 text-sm", children: [_jsx("p", { children: renderLabel(labels[person.adult ? 'service.party.adultAlone' : 'service.party.nothingFits'], values) }), onRemove && (_jsx("button", { type: "button", onClick: onRemove, className: "font-semibold text-primary underline underline-offset-4", children: renderLabel(labels['service.party.remove'], values) }))] }));
+    let reason;
+    if (multiLabels)
+        reason = multiLabels['service.party.nothingBookable'];
+    else if (person.adult)
+        reason = labels['service.party.adultAlone'];
+    else
+        reason = labels['service.party.nothingFits'];
+    return (_jsxs("div", { className: "space-y-2 rounded-lg border border-dashed border-border px-5 py-4 text-sm", children: [_jsx("p", { children: renderLabel(reason, values) }), onRemove && (_jsx("button", { type: "button", onClick: onRemove, className: "font-semibold text-primary underline underline-offset-4", children: renderLabel(labels['service.party.remove'], values) }))] }));
 }
 /**
  * One person with a «same as last time»: the suggestion as the answer, and the
@@ -197,10 +274,15 @@ function NothingInThisParty({ person, labels, onRemove, }) {
  * by itself when the answer is something else already, so a choice is never
  * hidden.
  */
-function PersonWithSuggestion({ listLabel, suggestion, menu, chosen, onPick, choiceCard, unlikely, hasUnlikely, shared, }) {
-    const [open, setOpen] = useState(chosen !== null && chosen !== suggestion.service.id);
-    const others = menu.filter((service) => service.id !== suggestion.service.id);
-    return (_jsxs("div", { className: "space-y-2", children: [_jsx(SameAsLast, { suggestion: suggestion, selected: chosen === suggestion.service.id, onPick: () => onPick(suggestion.service), shared: shared }), (others.length > 0 || hasUnlikely) && (_jsx("button", { type: "button", "aria-expanded": open, onClick: () => setOpen((current) => !current), className: "text-sm font-semibold text-primary underline underline-offset-4", children: shared.labels['service.chooseOther'] })), open && others.length > 0 && (_jsx("ul", { "aria-label": listLabel, className: "space-y-2", children: others.map((service) => (_jsx("li", { children: choiceCard(service) }, service.id))) })), open && unlikely] }));
+function PersonWithSuggestion({ listLabel, suggestion, menu, ticked, chosen, onPick, choiceCard, unlikely, hasUnlikely, shared, }) {
+    const id = suggestion.service.id;
+    const [open, setOpen] = useState(ticked
+        ? [...ticked].some((other) => other !== id)
+        : chosen !== null && chosen !== suggestion.service.id);
+    // Multi-select: the suggestion is in the menu too, so it can be unticked
+    // there, and something added to it.
+    const others = ticked ? menu : menu.filter((service) => service.id !== id);
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(SameAsLast, { suggestion: suggestion, selected: ticked ? ticked.has(id) : chosen === id, onPick: () => onPick(suggestion.service), shared: shared }), (others.length > 0 || hasUnlikely) && (_jsx("button", { type: "button", "aria-expanded": open, onClick: () => setOpen((current) => !current), className: "text-sm font-semibold text-primary underline underline-offset-4", children: shared.labels['service.chooseOther'] })), open && others.length > 0 && (_jsx("ul", { "aria-label": listLabel, className: "space-y-2", children: others.map((service) => (_jsx("li", { children: choiceCard(service) }, service.id))) })), open && unlikely] }));
 }
 /** «Same as last time · Kids' cut» — the person's last service, as one tap. */
 function SameAsLast({ suggestion, selected, onPick, shared, }) {
@@ -220,12 +302,15 @@ function SameAsLast({ suggestion, selected, onPick, shared, }) {
  *   online, and a tap target that accepts the tap and does nothing is the dead
  *   end the phone number replaces. The card stays so the catalogue is whole.
  */
-export function DefaultServiceCard({ service, kind, selected, onPick, phone, format, labels, className, selectedClassName, priceClassName, }) {
+export function DefaultServiceCard({ service, kind, selected, multiple = false, onPick, phone, format, labels, className, selectedClassName, priceClassName, }) {
     const duration = renderLabel(labels['service.duration'], { minutes: service.durationMinutes });
     const price = (_jsx("span", { className: cn('whitespace-nowrap font-semibold text-foreground tabular-nums', priceClassName), children: format.price(service.priceOre) }));
     if (kind === 'phone') {
         return (_jsxs("div", { className: cn('flex min-h-14 w-full items-baseline justify-between gap-4 rounded-lg border border-dashed border-border px-5 py-4', className), children: [_jsx("span", { className: "font-medium", children: service.name }), _jsxs("span", { className: "flex items-baseline gap-4 text-right", children: [_jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: duration }), _jsxs("span", { className: "text-sm", children: [labels['service.phoneOnly'], phone ? (_jsxs(_Fragment, { children: [' – ', _jsx("a", { href: format.telHref(phone), "aria-label": fillLabel(labels['service.phoneOnlyLinkLabel'], { phone }), className: "font-semibold text-primary underline underline-offset-4", children: phone })] })) : null] })] })] }));
     }
+    if (kind === 'choice' && multiple) {
+        return (_jsx(MultiServiceCard, { name: service.name, selected: selected, onPick: onPick, duration: duration, price: price, className: className, selectedClassName: selectedClassName }));
+    }
     if (kind === 'choice') {
         return (_jsxs("button", { type: "button", "aria-pressed": selected, onClick: onPick, className: cn('flex min-h-12 w-full items-baseline justify-between gap-4 rounded-lg border px-4 py-3 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary', selected
                 ? 'border-primary bg-primary/5 font-semibold ring-2 ring-primary'

package/dist/booking/time-screen.js

@@ -5,9 +5,17 @@ import { useEffect, useState } from 'react';
 import { cn } from '../lib/utils.js';
 import { renderLabel } from './internal/label-parts.js';
 import { BookingButton, bookingButtonClass } from './internal/ui.js';
+import { visitName } from './internal/visit.js';
 import { fillLabel, labelText } from './labels.js';
 import { LiveStatus } from './live-status.js';
 import { slotClass } from './slots.js';
+/**
+ * How many day chips sit under the heading.
+ *
+ * A thumb can scan about a week. The rest of the fetched window is picked
+ * from the month, not from a wrap of every open day.
+ */
+const DAY_STRIP_LIMIT = 7;
 /**
  * The time step — «when suits you?».
  *
@@ -122,7 +130,8 @@ function partyChipLabel(labels, clock, slot, party) {
         });
     }
     const seats = slot.seats.map((seat, index) => {
-        const who = party.items[index]?.bookedForName ?? party.items[index]?.service.name ?? '';
+        const item = party.items[index];
+        const who = item?.bookedForName ?? (item ? visitName(item) : '');
         const stylist = party.resolveStylistName(seat.resourceId);
         // No «with», rather than «with null»: a stylist the catalogue cannot name
         // is a reload of the resource list, not a reason to hide the slot.
@@ -213,23 +222,36 @@ export function TimeScreen({ labels, format, dayparts, slots, days, openDays = n
         ? [...bookable, { startTs: currentSlotTs, resourceId: null }]
         : bookable;
     const partyByStart = new Map(party?.slots.map((slot) => [slot.startTs, slot]) ?? []);
-    const strip = buildDayStrip(clock, offered, days, takenSlotTs, currentSlotTs, openDays, now);
-    // Read back through the strip rather than held as a day of its own, so new
-    // availability cannot leave the step pointing at a day no longer offered.
+    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,
+    // so new availability cannot leave the step pointing at a day no longer
+    // offered — including one chosen from the month, past the first week.
     const [tappedDayKey, setTappedDayKey] = useState(null);
     const [showMonth, setShowMonth] = useState(false);
     const [monthTs, setMonthTs] = useState(null);
-    const selectedDay = strip.find((day) => clock.dayKey(day) === tappedDayKey) ??
+    const selectedDay = offeredDays.find((day) => clock.dayKey(day) === tappedDayKey) ??
         // A stolen slot lands the visitor back on the day they just lost.
         (takenSlotTs === null
             ? undefined
-            : strip.find((day) => clock.dayKey(day) === clock.dayKey(takenSlotTs))) ??
+            : offeredDays.find((day) => clock.dayKey(day) === clock.dayKey(takenSlotTs))) ??
         // Moving an appointment opens on the day it is on.
         (currentSlotTs === null
             ? undefined
-            : strip.find((day) => clock.dayKey(day) === clock.dayKey(currentSlotTs))) ??
-        strip[0] ??
+            : offeredDays.find((day) => clock.dayKey(day) === clock.dayKey(currentSlotTs))) ??
+        offeredDays[0] ??
         now;
+    // Without a month, every offered day stays a chip — there is nowhere else
+    // to reach it. With a month, the chips are the week that contains the day
+    // on screen, never the whole window.
+    const selectedIndex = offeredDays.findIndex((day) => clock.dayKey(day) === clock.dayKey(selectedDay));
+    // Fixed weeks of seven, counted from the first offered day. Starting the
+    // slice at the selected day would drop the previous chip on every tap.
+    const stripStart = !monthView || selectedIndex < 0
+        ? 0
+        : Math.floor(selectedIndex / DAY_STRIP_LIMIT) * DAY_STRIP_LIMIT;
+    const strip = monthView
+        ? offeredDays.slice(stripStart, stripStart + DAY_STRIP_LIMIT)
+        : offeredDays;
     const selectedKey = clock.dayKey(selectedDay);
     const daySlots = offered
         .filter((slot) => clock.dayKey(slot.startTs) === selectedKey)
@@ -254,7 +276,7 @@ export function TimeScreen({ labels, format, dayparts, slots, days, openDays = n
     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: strip, 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 }))] }));
+                    })] })), 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 }))] }));
 }
 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'] }));
@@ -301,16 +323,17 @@ export function TimeScreenSkeleton({ labels, days = 7, monthView = false, surcha
         size: 'lg',
         className: 'min-w-20 animate-pulse border-border bg-muted text-transparent',
     });
-    return (_jsxs("section", { "aria-labelledby": "booking-time-heading", className: cn('space-y-6', className), children: [_jsx(TimeHeading, { labels: labels }), _jsx(LiveStatus, { text: labelText(labels['time.loading']) }), _jsxs("div", { "aria-hidden": "true", className: "space-y-6", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: days }, (_, index) => (_jsx("span", { "data-testid": "day-chip-skeleton", className: dayChip, children: labels['time.skeleton.dayPlaceholder'] }, index))) }), monthView && _jsx("span", { className: "block h-8 w-36 animate-pulse rounded bg-muted" }), surchargeRow && _jsx("span", { "data-testid": "surcharge-row-skeleton", className: "block min-h-5" }), _jsxs("div", { className: "space-y-3", children: [_jsx("span", { className: "block h-7 w-32 animate-pulse rounded bg-muted" }), _jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: 8 }, (_, index) => (_jsx("span", { "data-testid": "slot-skeleton", className: slotChip, children: "00:00" }, index))) })] })] })] }));
+    return (_jsxs("section", { "aria-labelledby": "booking-time-heading", className: cn('space-y-6', className), children: [_jsx(TimeHeading, { labels: labels }), _jsx(LiveStatus, { text: labelText(labels['time.loading']) }), _jsxs("div", { "aria-hidden": "true", className: "space-y-6", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: monthView ? Math.min(days, DAY_STRIP_LIMIT) : days }, (_, index) => (_jsx("span", { "data-testid": "day-chip-skeleton", className: dayChip, children: labels['time.skeleton.dayPlaceholder'] }, index))) }), monthView && _jsx("span", { className: "block h-8 w-36 animate-pulse rounded bg-muted" }), surchargeRow && _jsx("span", { "data-testid": "surcharge-row-skeleton", className: "block min-h-5" }), _jsxs("div", { className: "space-y-3", children: [_jsx("span", { className: "block h-7 w-32 animate-pulse rounded bg-muted" }), _jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: 8 }, (_, index) => (_jsx("span", { "data-testid": "slot-skeleton", className: slotChip, children: "00:00" }, index))) })] })] })] }));
 }
 // ---------------------------------------------------------------------------
 // Month view
 // ---------------------------------------------------------------------------
 /**
- * «Show the whole month» — the strip's days laid out as the month they sit in.
- * Only those days are tappable; every other cell is inert, because a calendar
- * that let a visitor tap an unasked-about date and then said «full» would be
- * inventing a fact. Collapsed by default; navigable both ways, never disabled.
+ * «Show the whole month» — the fetched window laid out as the month it sits in.
+ * Only days the caller asked about are tappable; every other cell is inert,
+ * because a calendar that let a visitor tap an unasked-about date and then
+ * said «full» would be inventing a fact. Collapsed by default; navigable both
+ * ways, never disabled.
  */
 function MonthCalendar({ labels, clock, open, onToggle, monthTs, onMonth, strip, selectedDay, now, onPickDay, classNames, }) {
     const offered = new Map(strip.map((day) => [clock.dayKey(day), day]));

package/dist/booking/types.d.ts

@@ -70,9 +70,15 @@ export interface WizardPerson {
     birthYear?: number;
     birthMonth?: number;
 }
-/** One line of the basket. */
+/** One line of the basket: one person's visit. */
 export interface WizardItem {
+    /** The person's FIRST service (the only one, when `extraServices` is absent). */
     service: WizardService;
+    /**
+     * The services after the first, in order, done back to back in the same
+     * visit with the same stylist. ABSENT for a one-service visit — never `[]`.
+     */
+    extraServices?: WizardService[];
     bookedForName?: string;
     bookedForBirthYear?: number;
     bookedForPersonId?: string;
@@ -84,7 +90,14 @@ export type PartyMode = 'sequential' | 'parallel';
 export interface WizardState {
     step: WizardStep;
     people: WizardPerson[];
+    /** Each person's FIRST service so far, `null` for none yet. */
     choices: Array<WizardService | null>;
+    /**
+     * Each person's services after the first, parallel to `people` (`extras[i]`
+     * is `people[i]`'s). Absent on a machine without multi-service visits: every
+     * person then has one service.
+     */
+    extras?: WizardService[][];
     items: WizardItem[];
     resourceId: string | null;
     stylistAnswered: boolean;

package/dist/booking/who-screen.js

@@ -145,7 +145,7 @@ function GuestChips({ choices, people, labels, classNames, onChoose, }) {
         }) }));
 }
 function CheckCircle({ checked }) {
-    return (_jsx("span", { "aria-hidden": "true", className: cn('flex size-6 shrink-0 items-center justify-center rounded-full border', checked ? 'border-primary bg-primary text-primary-foreground' : 'border-border'), children: checked && _jsx(Check, { className: "size-4" }) }));
+    return (_jsx("span", { "aria-hidden": "true", className: cn('flex size-6 shrink-0 items-center justify-center rounded-full border', checked ? 'border-primary bg-primary text-primary-foreground' : 'border-muted-foreground'), children: checked && _jsx(Check, { className: "size-4" }) }));
 }
 /** The default person card: an initial on a tinted avatar, the name, a line, a tick. */
 export function DefaultPersonCard({ name, line, index, selected, disabled, describedBy, onToggle, className, selectedClassName, }) {

package/package.json

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