@medalsocial/meda 3.3.0 → 3.5.0

package/dist/booking/service-screen.js

@@ -3,8 +3,9 @@ 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 } from './labels.js';
+import { fillLabel, labelText } from './labels.js';
 import { slotClass } from './slots.js';
 /**
  * The service step — what should be done?
@@ -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,16 +33,41 @@ 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`. */
 function ageDividerLabel(labels, name, possessive) {
     if (!name)
-        return labels['service.ageDivider.unnamed'];
+        return labelText(labels['service.ageDivider.unnamed']);
     return fillLabel(labels['service.ageDivider.named'], {
         name,
         nameGenitive: possessive(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/stylist-screen.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentType, type Ref } from 'react';
 import type { BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingResourceDto, PartyMode } from './types.js';
 /**
@@ -20,7 +21,7 @@ import type { BookingResourceDto, PartyMode } from './types.js';
  * available» included. Arrow keys move and choose, Tab enters and leaves once.
  */
 export declare const STYLIST_SCREEN_LABEL_KEYS: readonly ["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"];
-export type StylistScreenLabels = Record<(typeof STYLIST_SCREEN_LABEL_KEYS)[number], string>;
+export type StylistScreenLabels = Record<(typeof STYLIST_SCREEN_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root` — the `<section>`
  * - `heading` — the `<h2>`

package/dist/booking/stylist-screen.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, } from 'react';
 import { cn } from '../lib/utils.js';
 import { renderLabel } from './internal/label-parts.js';
+import { labelText } from './labels.js';
 import { LiveStatus } from './live-status.js';
 import { slotClass } from './slots.js';
 /**
@@ -83,10 +84,10 @@ export function StylistScreen({ labels, format, now, serviceIds, resources, sele
     const options = [
         {
             resourceId: null,
-            name: labels['stylist.firstAvailable'],
-            shortName: labels['stylist.firstAvailable'],
-            subtitle: labels['stylist.firstAvailableSubtitle'],
-            badge: labels['stylist.firstAvailableBadge'],
+            name: labelText(labels['stylist.firstAvailable']),
+            shortName: labelText(labels['stylist.firstAvailable']),
+            subtitle: labelText(labels['stylist.firstAvailableSubtitle']),
+            badge: labelText(labels['stylist.firstAvailableBadge']),
         },
         ...(loading
             ? held
@@ -113,7 +114,7 @@ export function StylistScreen({ labels, format, now, serviceIds, resources, sele
                         }), classNames: classNames })] })), party?.mode === 'parallel' ? (_jsx("p", { className: "rounded-lg border border-border bg-card px-5 py-4 text-sm", children: bySize(labels, 'stylist.party.parallelNote', party.size, party.sizeWord) })) : (_jsx(StylistRadioGroup, { options: options, selectedResourceId: selectedResourceId, 
                 // The held option takes one placeholder's place, so the row is
                 // exactly as long as it was and nothing after it moves.
-                skeletons: loading ? Math.max(0, skeletonCount - (options.length - 1)) : 0, busy: loading, onPick: onPick, labels: labels, classNames: classNames, Card: components?.StylistCard ?? DefaultStylistCard })), _jsx(LiveStatus, { text: loading ? labels['stylist.loading'] : notice })] }));
+                skeletons: loading ? Math.max(0, skeletonCount - (options.length - 1)) : 0, busy: loading, onPick: onPick, labels: labels, classNames: classNames, Card: components?.StylistCard ?? DefaultStylistCard })), _jsx(LiveStatus, { text: loading ? labelText(labels['stylist.loading']) : notice })] }));
 }
 /**
  * The options as one radiogroup with a roving tab stop.
@@ -183,7 +184,7 @@ function StylistRadioGroup({ options, selectedResourceId, skeletons, busy, onPic
  * with its next-opening row pulsing like every card still waiting for one. */
 function pendingOption(resourceId, pendingName, labels, format) {
     const known = pendingName?.trim() ? pendingName.trim() : null;
-    const name = known ?? labels['stylist.pendingName'];
+    const name = known ?? labelText(labels['stylist.pendingName']);
     return {
         resourceId,
         name,

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

@@ -1,3 +1,4 @@
+import type { BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { WizardStep } from './types.js';
 /**
@@ -9,7 +10,7 @@ import type { WizardStep } from './types.js';
  * wizard it summarises.
  */
 export declare const SUMMARY_BAR_LABEL_KEYS: readonly ["summary.placeholder.who", "summary.placeholder.service", "summary.next"];
-export type SummaryBarLabels = Record<(typeof SUMMARY_BAR_LABEL_KEYS)[number], string>;
+export type SummaryBarLabels = Record<(typeof SUMMARY_BAR_LABEL_KEYS)[number], BookingLabel>;
 /** `root` the bar, `line` the summary sentence, `next` the button. */
 export type SummaryBarSlot = 'root' | 'line' | 'next';
 export interface SummaryBarProps {

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

@@ -1,5 +1,6 @@
 import { type ComponentType } from 'react';
 import type { BookingDaypart, BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingDayDto, BookingSlotDto, PartySlot, WizardItem } from './types.js';
 /**
@@ -26,7 +27,7 @@ export declare const TIME_SCREEN_LABEL_KEYS: readonly ["time.heading", "time.day
  *   finishes (end them with the dash); `closed` and `over` are whole sentences.
  * - `time.empty.callLink|callLinkAria` `{phone}`
  */
-export type TimeScreenLabels = Record<(typeof TIME_SCREEN_LABEL_KEYS)[number], string>;
+export type TimeScreenLabels = Record<(typeof TIME_SCREEN_LABEL_KEYS)[number], BookingLabel>;
 /**
  * `classNames` slots:
  * - `root` the section · `heading` the h2

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 { fillLabel } from './labels.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.
@@ -130,7 +139,7 @@ function partyChipLabel(labels, clock, slot, party) {
     });
     return fillLabel(labels['time.party.parallel'], {
         time: clock.formatTime(slot.startTs),
-        seats: seats.join(labels['time.party.seatSeparator']),
+        seats: seats.join(labelText(labels['time.party.seatSeparator'])),
     });
 }
 /**
@@ -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'] }));
@@ -283,7 +305,7 @@ export function TakenToast({ labels, takenSlotTs, className }) {
     }, [takenSlotTs]);
     return (_jsx("div", { role: "status", "aria-live": "polite", className: shown
             ? cn('fixed inset-x-4 bottom-24 z-50 mx-auto flex max-w-md items-center gap-3 rounded-lg border border-secondary/40 bg-background px-5 py-3 text-sm shadow-lg', className)
-            : 'sr-only', children: shown && (_jsxs(_Fragment, { children: [_jsx("p", { className: "flex-1", children: labels['time.taken.message'] }), _jsx("button", { type: "button", "aria-label": labels['time.taken.close'], onClick: () => setShown(false), className: "flex size-8 shrink-0 items-center justify-center rounded-full hover:bg-muted", children: _jsx(X, { "aria-hidden": "true", className: "size-4" }) })] })) }));
+            : 'sr-only', children: shown && (_jsxs(_Fragment, { children: [_jsx("p", { className: "flex-1", children: labels['time.taken.message'] }), _jsx("button", { type: "button", "aria-label": labelText(labels['time.taken.close']), onClick: () => setShown(false), className: "flex size-8 shrink-0 items-center justify-center rounded-full hover:bg-muted", children: _jsx(X, { "aria-hidden": "true", className: "size-4" }) })] })) }));
 }
 /**
  * The time step before its openings are in: the same heading, a strip of day
@@ -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: 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]));
@@ -323,7 +346,7 @@ function MonthCalendar({ labels, clock, open, onToggle, monthTs, onMonth, strip,
         year,
     });
     const selectedKey = clock.dayKey(selectedDay);
-    return (_jsxs("div", { className: slotClass(classNames, 'month', 'space-y-3'), children: [_jsxs(BookingButton, { variant: "link", size: "sm", "aria-expanded": open, onClick: onToggle, className: "px-0", children: [open ? labels['time.month.hide'] : labels['time.month.show'], open ? (_jsx(ChevronUp, { "aria-hidden": "true", className: "size-4" })) : (_jsx(ChevronDown, { "aria-hidden": "true", className: "size-4" }))] }), open && (_jsxs("div", { className: "space-y-3 rounded-lg border border-border bg-card px-4 py-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(BookingButton, { variant: "outline", size: "icon", "aria-label": labels['time.month.previous'], onClick: () => onMonth(clock.dayStart(firstOfMonth, -1)), className: "rounded-full", children: _jsx(ChevronLeft, { "aria-hidden": "true", className: "size-4" }) }), _jsx("p", { "aria-live": "polite", className: "font-sans font-bold", children: heading }), _jsx(BookingButton, { variant: "outline", size: "icon", "aria-label": labels['time.month.next'], onClick: () => onMonth(clock.dayStart(firstOfMonth, daysInMonth(year, month))), className: "rounded-full", children: _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4" }) })] }), _jsx("div", { "aria-hidden": "true", className: "grid grid-cols-7 gap-1 text-center", children: clock.weekdayHeads().map((head, index) => (_jsx("span", { className: "text-xs font-bold text-muted-foreground", children: head }, index))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: cells.map((cell, index) => {
+    return (_jsxs("div", { className: slotClass(classNames, 'month', 'space-y-3'), children: [_jsxs(BookingButton, { variant: "link", size: "sm", "aria-expanded": open, onClick: onToggle, className: "px-0", children: [open ? labels['time.month.hide'] : labels['time.month.show'], open ? (_jsx(ChevronUp, { "aria-hidden": "true", className: "size-4" })) : (_jsx(ChevronDown, { "aria-hidden": "true", className: "size-4" }))] }), open && (_jsxs("div", { className: "space-y-3 rounded-lg border border-border bg-card px-4 py-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(BookingButton, { variant: "outline", size: "icon", "aria-label": labelText(labels['time.month.previous']), onClick: () => onMonth(clock.dayStart(firstOfMonth, -1)), className: "rounded-full", children: _jsx(ChevronLeft, { "aria-hidden": "true", className: "size-4" }) }), _jsx("p", { "aria-live": "polite", className: "font-sans font-bold", children: heading }), _jsx(BookingButton, { variant: "outline", size: "icon", "aria-label": labelText(labels['time.month.next']), onClick: () => onMonth(clock.dayStart(firstOfMonth, daysInMonth(year, month))), className: "rounded-full", children: _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4" }) })] }), _jsx("div", { "aria-hidden": "true", className: "grid grid-cols-7 gap-1 text-center", children: clock.weekdayHeads().map((head, index) => (_jsx("span", { className: "text-xs font-bold text-muted-foreground", children: head }, index))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: cells.map((cell, index) => {
                             if (cell === null) {
                                 // The blanks before the first of the month; the position is
                                 // the only thing that tells them apart.
@@ -366,7 +389,7 @@ function DaypartSections({ labels, clock, dayparts, daySlots, nearest, currentSl
                         else if (partySlot && party) {
                             label = partyChipLabel(labels, clock, partySlot, party);
                         }
-                        return (_jsx(TimeChip, { startTs: slot.startTs, label: label, nearest: isNearest, nearestLabel: labels['time.nearest'], current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('min-w-20 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }, slot.startTs));
+                        return (_jsx(TimeChip, { startTs: slot.startTs, label: label, nearest: isNearest, nearestLabel: labelText(labels['time.nearest']), current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('min-w-20 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }, slot.startTs));
                     }) })] }, daypart.key));
     });
 }

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/vipps-button.d.ts

@@ -1,6 +1,7 @@
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 export declare const VIPPS_BUTTON_LABEL_KEYS: readonly ["vipps.button", "vipps.unavailable", "vipps.throttled"];
-export type VippsButtonLabels = Record<(typeof VIPPS_BUTTON_LABEL_KEYS)[number], string>;
+export type VippsButtonLabels = Record<(typeof VIPPS_BUTTON_LABEL_KEYS)[number], BookingLabel>;
 /** Why a Vipps start did NOT end in a redirect. `null` is silence. */
 export type VippsStartState = {
     ok: false;

package/dist/booking/vipps-button.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useActionState, useId } from 'react';
 import { useFormStatus } from 'react-dom';
 import { bookingButtonClass } from './internal/ui.js';
+import { labelText } from './labels.js';
 import { slotClass } from './slots.js';
 export const VIPPS_BUTTON_LABEL_KEYS = [
     'vipps.button',
@@ -26,7 +27,7 @@ export function VippsButton({ onVipps, next = null, label, labels, classNames })
     const [state, formAction] = useActionState(onVipps, null);
     const noticeId = `${useId()}-notice`;
     const notice = state === null ? null : labels[`vipps.${state.reason}`];
-    return (_jsxs("form", { action: formAction, className: slotClass(classNames, 'root', 'space-y-3'), "aria-describedby": notice ? noticeId : undefined, children: [next && _jsx("input", { type: "hidden", name: "next", value: next }), _jsx(SubmitButton, { label: label ?? labels['vipps.button'], className: bookingButtonClass({
+    return (_jsxs("form", { action: formAction, className: slotClass(classNames, 'root', 'space-y-3'), "aria-describedby": notice ? noticeId : undefined, children: [next && _jsx("input", { type: "hidden", name: "next", value: next }), _jsx(SubmitButton, { label: label ?? labelText(labels['vipps.button']), className: bookingButtonClass({
                     size: 'lg',
                     className: slotClass(classNames, 'button', 'w-full rounded-full bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring/40'),
                 }) }), _jsx("div", { "aria-live": "polite", children: notice && (_jsx("p", { id: noticeId, className: slotClass(classNames, 'notice', 'text-sm text-muted-foreground'), children: notice })) })] }));