@medalsocial/meda 3.3.0 → 3.5.0

package/README.md

@@ -81,13 +81,47 @@ ships no default language and no brand. Override, cheapest first:
 1. **CSS variables** — the shadcn tokens the bridge maps (`--primary`, `--card`,
    `--muted`, `--border`, `--ring`, `--radius`, …). Colours come from nowhere else.
 2. **`labels`** — a flat record (`'who.heading'`, …); `BookingLabels` is the full set
-   and `BOOKING_LABEL_KEYS` lists it. `{placeholders}` are filled by the screen.
+   and `BOOKING_LABEL_KEYS` lists it. `{placeholders}` are filled by the screen. A
+   value is a `BookingLabel`: a **string** renders as one text node once filled (like
+   a template literal), a **string array** renders one text node per element, each
+   element filled with the same values (see below).
 3. **`classNames`** — per documented slot (`root`, `card`, `cardSelected`, `chip`, …),
    merged after the defaults so an override wins.
 4. **`components`** — card renderers (`ServiceCard`, `StylistCard`, `TimeChip`,
    `DayChip`, `PersonCard`, …). The defaults are exported (`DefaultServiceCard`, …)
    so an override can wrap them.
 
+### Where a sentence breaks into text nodes
+
+A browser lays text out per DOM text node, so the same sentence split differently can
+land its later glyphs a sub-pixel apart. The pack decides; a screen never splits a
+string on its own:
+
+```ts
+// One text node: «Total 840 kr · paid at the salon».
+const asOneNode = {
+  'confirmation.party.total': 'Total {total} · paid at the salon',
+} satisfies Partial<BookingLabels>;
+
+// Four text nodes, the DOM of `Total {total}{' · '}paid at the salon` in JSX.
+const asPieces = {
+  'confirmation.party.total': ['Total ', '{total}', ' · ', 'paid at the salon'],
+} satisfies Partial<BookingLabels>;
+```
+
+- An element that fills to `''` renders nothing; a label that fills to nothing renders
+  nothing at all.
+- Lines joined from several parts (the confirmation card's `service · stylist · when ·
+  price`, the portal's booking lines) are one text node while every part is a string,
+  and in pieces (each part and separator its own node) once one of their labels is an
+  array. `joinLabelParts(parts, separator, { pieces })` forces either.
+- Text-only targets — `aria-label`, `placeholder`, file names, error and status
+  messages, live-region announcements, a value filled into another label, and a custom
+  component's `string` prop — read the label flattened (`fillLabel`, `labelText`).
+- Helpers, for UI composed around the screens: `renderLabel(label, values)` (element
+  children), `fillLabel(label, values)` (text), `labelParts(label, { hole: <el/> })`
+  (element holes), `fillLabelPieces`, `labelText`, `joinLabelParts`.
+
 ```css
 @import 'tailwindcss';
 @import '@medalsocial/meda/styles/bridge.css';      /* your own shadcn tokens */

package/dist/booking/add-child-sheet.d.ts

@@ -1,4 +1,5 @@
 import type { BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { NewChild, SaveResult } from './types.js';
 /**
@@ -13,7 +14,7 @@ import type { NewChild, SaveResult } from './types.js';
  * save — so a child is never shown as added before it exists.
  */
 export declare const ADD_CHILD_SHEET_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"];
-export type AddChildSheetLabels = Record<(typeof ADD_CHILD_SHEET_LABEL_KEYS)[number], string>;
+export type AddChildSheetLabels = Record<(typeof ADD_CHILD_SHEET_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root` — the dashed trigger card (the only element in the page flow)
  * - `content` — the sheet (`<dialog>`)

package/dist/booking/add-child-sheet.js

@@ -7,6 +7,7 @@ import { Input } from '../primitives/input.js';
 import { Sheet } from '../primitives/sheet.js';
 import { Textarea } from '../primitives/textarea.js';
 import { BOOKING_INPUT_CLASS, BOOKING_SELECT_CLASS, BOOKING_TEXTAREA_CLASS, BookingButton, } from './internal/ui.js';
+import { labelText } from './labels.js';
 import { slotClass } from './slots.js';
 /**
  * «+ Add child» — a dashed card that opens a small sheet: name, birth year,
@@ -58,7 +59,7 @@ export function AddChildSheet({ labels, format, saveNotes, disabled, onSave, cur
         event.preventDefault();
         const trimmed = name.trim();
         if (trimmed === '' || year === '') {
-            setError(labels['addChild.missing']);
+            setError(labelText(labels['addChild.missing']));
             return;
         }
         startTransition(async () => {

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

@@ -1,7 +1,8 @@
+import type { BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 export declare const BOOKING_SKELETON_LABEL_KEYS: readonly ["bookingSkeleton.opening"];
 /** Copy for the pending skeleton: the sentence a screen reader hears while it is up. */
-export type BookingSkeletonLabels = Record<(typeof BOOKING_SKELETON_LABEL_KEYS)[number], string>;
+export type BookingSkeletonLabels = Record<(typeof BOOKING_SKELETON_LABEL_KEYS)[number], BookingLabel>;
 /**
  * `classNames` slots: `root` the fixed overlay · `frame` the pulsing column ·
  * `bar` the active step-bar segment · `chip` one of the four person chips.

package/dist/booking/confirmation.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentType } from 'react';
 import type { BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { WizardItem } from './types.js';
 /**
@@ -14,7 +15,7 @@ import type { WizardItem } from './types.js';
  * link to a page that 404s reads as a booking that did not quite happen.
  */
 export declare const CONFIRMATION_LABEL_KEYS: readonly ["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"];
-export type ConfirmationLabels = Record<(typeof CONFIRMATION_LABEL_KEYS)[number], string>;
+export type ConfirmationLabels = Record<(typeof CONFIRMATION_LABEL_KEYS)[number], BookingLabel>;
 /**
  * One booked line (one person's appointment). One array rather than parallel
  * lists, because every part answers about the SAME line.

package/dist/booking/confirmation.js

@@ -2,7 +2,8 @@
 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 { fillLabel } from './labels.js';
+import { visitName } from './internal/visit.js';
+import { fillLabel, labelText } from './labels.js';
 import { slotClass } from './slots.js';
 /**
  * The confirmation screen — the one the whole flow exists to reach.
@@ -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 })
                             : '',
@@ -94,8 +95,8 @@ function PartyCard({ lines, totalOre, now, format, labels, classNames, PartyLine
                         .trim();
                     return (_jsx(PartyLine
                     // biome-ignore lint/suspicious/noArrayIndexKey: two lines can share a service; the index is the identity
-                    , { line: line, text: text, manageLabel: labels['confirmation.manage'], manageAriaLabel: fillLabel(labels['confirmation.manageFor'], {
-                            who: line.item.bookedForName ?? line.item.service.name,
+                    , { line: line, text: text, manageLabel: labelText(labels['confirmation.manage']), manageAriaLabel: fillLabel(labels['confirmation.manageFor'], {
+                            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

@@ -1,5 +1,6 @@
 import { type ComponentType } from 'react';
 import type { BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingFamilyMember, WizardAction, WizardError, WizardState } from './types.js';
 /**
@@ -14,7 +15,7 @@ import type { BookingFamilyMember, WizardAction, WizardError, WizardState } from
  */
 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 type DetailsScreenLabelKey = (typeof DETAILS_SCREEN_LABEL_KEYS)[number];
-export type DetailsScreenLabels = Record<DetailsScreenLabelKey, string>;
+export type DetailsScreenLabels = Record<DetailsScreenLabelKey, BookingLabel>;
 /**
  * The label key for each failure the wizard can carry. Exported because some
  * of them (e.g. `maxParty`) are raised on earlier steps, where the shell shows
@@ -23,7 +24,10 @@ export type DetailsScreenLabels = Record<DetailsScreenLabelKey, string>;
 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;

package/dist/booking/details-screen.js

@@ -7,7 +7,8 @@ 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 { fillLabel } from './labels.js';
+import { visitName } from './internal/visit.js';
+import { fillLabel, labelText } from './labels.js';
 import { slotClass } from './slots.js';
 /**
  * The last step of the booking wizard: contact details, who each seat is for,
@@ -154,10 +155,10 @@ function knownWho(state, index, labels) {
     const item = state.items[index];
     if (item?.adult) {
         return state.people[index]?.key === 'self'
-            ? labels['details.known.self']
-            : labels['details.known.adult'];
+            ? labelText(labels['details.known.self'])
+            : labelText(labels['details.known.adult']);
     }
-    return item?.bookedForName ?? labels['details.known.child'];
+    return item?.bookedForName ?? labelText(labels['details.known.child']);
 }
 /**
  * Whether step 1 already said who sits in this seat: a saved person's card
@@ -200,7 +201,8 @@ export function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phon
     const showEmailError = !emailValid && (attempted || focused !== 'email');
     const showTermsError = attempted && !state.consentTerms;
     const price = format.price(totalOre);
-    const phonePrefix = labels['details.phone.prefix'];
+    // `null` when the pack leaves it blank, in either form: no box, no description.
+    const phonePrefix = renderLabel(labels['details.phone.prefix']);
     const FamilyChip = components?.FamilyChip ?? DefaultFamilyChip;
     function setContact(name, value) {
         onChange({ type: 'setContact', field: name, value });
@@ -242,6 +244,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),
@@ -286,11 +291,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": 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: 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, "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 }) })] }));
 }
 /**
  * The name and birth year for one line. Wrapped in a fieldset only when there
@@ -298,7 +303,7 @@ export function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phon
  * them is how one child's name lands on the other's booking.
  */
 function ChildFields({ legend, nameId, yearId, value, family, labels, classNames, FamilyChip, onChange, }) {
-    const fields = (_jsxs("div", { className: "grid grid-cols-[1fr_7rem] gap-3", children: [_jsxs(Field, { className: slotClass(classNames, 'field'), children: [_jsx(Field.Label, { htmlFor: nameId, children: labels['details.child.name'] }), _jsx(Input, { id: nameId, className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS), value: value.name, onChange: (event) => onChange({ name: event.target.value }) })] }), _jsxs(Field, { className: slotClass(classNames, 'field'), children: [_jsx(Field.Label, { htmlFor: yearId, children: labels['details.child.year'] }), _jsx(Input, { id: yearId, inputMode: "numeric", maxLength: 4, className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS), placeholder: labels['details.child.yearPlaceholder'], value: value.birthYear, onChange: (event) => onChange({ birthYear: event.target.value }) })] })] }));
+    const fields = (_jsxs("div", { className: "grid grid-cols-[1fr_7rem] gap-3", children: [_jsxs(Field, { className: slotClass(classNames, 'field'), children: [_jsx(Field.Label, { htmlFor: nameId, children: labels['details.child.name'] }), _jsx(Input, { id: nameId, className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS), value: value.name, onChange: (event) => onChange({ name: event.target.value }) })] }), _jsxs(Field, { className: slotClass(classNames, 'field'), children: [_jsx(Field.Label, { htmlFor: yearId, children: labels['details.child.year'] }), _jsx(Input, { id: yearId, inputMode: "numeric", maxLength: 4, className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS), placeholder: labelText(labels['details.child.yearPlaceholder']), value: value.birthYear, onChange: (event) => onChange({ birthYear: event.target.value }) })] })] }));
     const withSuggestions = (_jsxs("div", { className: "space-y-3", children: [family !== undefined && family.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: family.map((member) => (_jsx(FamilyChip, { member: member, pressed: value.name === member.name && value.birthYear === String(member.birthYear), onPick: () => onChange({ name: member.name, birthYear: String(member.birthYear) }, member.personId) }, `${member.name}-${member.birthYear}`))) })), fields] }));
     if (legend === null)
         return withSuggestions;

package/dist/booking/index.d.ts

@@ -3,10 +3,10 @@ export * from './booking-skeleton.js';
 export * from './confirmation.js';
 export * from './details-screen.js';
 export type { BookingClock, BookingDaypart, BookingFormat } from './format.js';
-export { joinLabelParts, labelParts, renderLabel } from './internal/label-parts.js';
+export { type JoinLabelPartsOptions, joinLabelParts, labelParts, renderLabel, } from './internal/label-parts.js';
 export * from './internal/ui.js';
 export * from './label-keys.js';
-export { fillLabel } from './labels.js';
+export { type BookingLabel, fillLabel, fillLabelPieces, labelText } from './labels.js';
 export * from './live-status.js';
 export * from './login-panel.js';
 export * from './login-sheet.js';

package/dist/booking/index.js

@@ -10,10 +10,10 @@ export * from './add-child-sheet.js';
 export * from './booking-skeleton.js';
 export * from './confirmation.js';
 export * from './details-screen.js';
-export { joinLabelParts, labelParts, renderLabel } from './internal/label-parts.js';
+export { joinLabelParts, labelParts, renderLabel, } from './internal/label-parts.js';
 export * from './internal/ui.js';
 export * from './label-keys.js';
-export { fillLabel } from './labels.js';
+export { fillLabel, fillLabelPieces, labelText } from './labels.js';
 export * from './live-status.js';
 export * from './login-panel.js';
 export * from './login-sheet.js';

package/dist/booking/internal/label-parts.d.ts

@@ -1,28 +1,43 @@
 import { type ReactNode } from 'react';
+import { type BookingLabel } from '../labels.js';
 /**
- * `fillLabel` for templates whose placeholders are elements (a link, a
- * button) rather than strings: `'Have an account? {trigger} – …'` with
- * `{ trigger: <button>…</button> }`. Text parts stay text; unknown
- * placeholders are left as written.
+ * A filled label as element children (see `BookingLabel`): a string renders
+ * as one text node, an array as one text node per element. Prefer it over
+ * `fillLabel` wherever a label is rendered as children, so the pack decides
+ * where the sentence breaks.
+ *
+ * Returns the string itself for a one-node label, an array of strings for a
+ * split one, and `null` for a label that fills to nothing at all. Text-only
+ * targets (`aria-label`, `title`, a file name) keep `fillLabel`.
  */
-export declare function labelParts(template: string, parts: Readonly<Record<string, ReactNode>>): ReactNode;
+export declare function renderLabel(template: BookingLabel, values?: Readonly<Record<string, string | number>>): string | string[] | null;
 /**
- * A filled label as element children: the template split around its
- * `{placeholders}`, so React renders one text node per literal run and one
- * per value — the same DOM as writing the sentence out in JSX
- * (`Total {total} · paid at the salon`). Prefer it over `fillLabel` wherever
- * a label is rendered as children; a browser lays text out per text node, so
- * one joined string can land a line's glyphs a sub-pixel away from the same
- * sentence composed in JSX.
- *
- * Text-only targets (`aria-label`, `title`, a file name) keep `fillLabel`.
- * Empty literal runs and empty values render nothing, as in JSX; a label
- * that fills to nothing at all is `null`.
+ * `renderLabel` for templates whose placeholders include elements (a link, a
+ * button) rather than strings: `'Have an account? {trigger} – …'` with
+ * `{ trigger: <button>…</button> }`. Each element sits in its own place; the
+ * text around it follows the label's form — a string's text runs stay whole
+ * between elements, an array's elements stay separate. String and number
+ * values join the text they sit in. Unknown placeholders are left as written.
  */
-export declare function renderLabel(template: string, values: Readonly<Record<string, string | number>>): ReactNode;
+export declare function labelParts(template: BookingLabel, parts: Readonly<Record<string, ReactNode>>): ReactNode;
+export interface JoinLabelPartsOptions {
+    /**
+     * `false`: the line is ONE text node (every part is flattened to text and
+     * joined). `true`: every part and every separator is its own text node, and
+     * a split part (an array, from a `string[]` label) keeps its pieces.
+     *
+     * Default: one text node when every part is plain text, pieces as soon as
+     * one part is split (a pack wrote one of the line's labels as an array) or
+     * is an element. A part that cannot be flattened (an element) always
+     * renders in pieces.
+     */
+    pieces?: boolean;
+}
 /**
- * `parts.filter(Boolean).join(separator)` as element children: every part
- * and every separator its own text piece. Blank parts drop out, so an absent
- * one closes the gap rather than leaving a doubled separator.
+ * `parts.filter(Boolean).join(separator)` as element children. Blank parts
+ * drop out, so an absent one closes the gap rather than leaving a doubled
+ * separator. Whether the line is one text node or one per part and separator
+ * follows the parts' own form (see `JoinLabelPartsOptions.pieces`): plain
+ * strings join into one, as `[a, b].join(' · ')` in JSX did.
  */
-export declare function joinLabelParts(parts: ReadonlyArray<ReactNode>, separator: string): ReactNode;
+export declare function joinLabelParts(parts: ReadonlyArray<ReactNode>, separator: string, options?: JoinLabelPartsOptions): ReactNode;

package/dist/booking/internal/label-parts.js

@@ -1,57 +1,85 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
+import { fillLabelPieces } from '../labels.js';
 /**
- * `fillLabel` for templates whose placeholders are elements (a link, a
- * button) rather than strings: `'Have an account? {trigger} – …'` with
- * `{ trigger: <button>…</button> }`. Text parts stay text; unknown
- * placeholders are left as written.
+ * A filled label as element children (see `BookingLabel`): a string renders
+ * as one text node, an array as one text node per element. Prefer it over
+ * `fillLabel` wherever a label is rendered as children, so the pack decides
+ * where the sentence breaks.
+ *
+ * Returns the string itself for a one-node label, an array of strings for a
+ * split one, and `null` for a label that fills to nothing at all. Text-only
+ * targets (`aria-label`, `title`, a file name) keep `fillLabel`.
  */
-export function labelParts(template, parts) {
-    const pieces = template.split(/(\{\w+\})/g);
-    return pieces.map((piece, index) => {
-        const match = /^\{(\w+)\}$/.exec(piece);
-        if (match && Object.hasOwn(parts, match[1])) {
-            // biome-ignore lint/suspicious/noArrayIndexKey: the pieces of a fixed template never reorder
-            return _jsx(Fragment, { children: parts[match[1]] }, index);
-        }
-        return piece;
-    });
+export function renderLabel(template, values = {}) {
+    const pieces = fillLabelPieces(template, values);
+    if (pieces.length === 0)
+        return null;
+    return typeof template === 'string' ? pieces[0] : pieces;
 }
 /**
- * A filled label as element children: the template split around its
- * `{placeholders}`, so React renders one text node per literal run and one
- * per value — the same DOM as writing the sentence out in JSX
- * (`Total {total} · paid at the salon`). Prefer it over `fillLabel` wherever
- * a label is rendered as children; a browser lays text out per text node, so
- * one joined string can land a line's glyphs a sub-pixel away from the same
- * sentence composed in JSX.
- *
- * Text-only targets (`aria-label`, `title`, a file name) keep `fillLabel`.
- * Empty literal runs and empty values render nothing, as in JSX; a label
- * that fills to nothing at all is `null`.
+ * `renderLabel` for templates whose placeholders include elements (a link, a
+ * button) rather than strings: `'Have an account? {trigger} – …'` with
+ * `{ trigger: <button>…</button> }`. Each element sits in its own place; the
+ * text around it follows the label's form — a string's text runs stay whole
+ * between elements, an array's elements stay separate. String and number
+ * values join the text they sit in. Unknown placeholders are left as written.
  */
-export function renderLabel(template, values) {
-    const pieces = template.split(/(\{\w+\})/g);
+export function labelParts(template, parts) {
+    const pieces = typeof template === 'string' ? [template] : template;
     const nodes = [];
     for (const piece of pieces) {
-        const match = /^\{(\w+)\}$/.exec(piece);
-        const value = match && Object.hasOwn(values, match[1]) ? values[match[1]] : piece;
-        if (value !== '')
-            nodes.push(value);
+        let run = '';
+        for (const token of piece.split(/(\{\w+\})/g)) {
+            const name = /^\{(\w+)\}$/.exec(token)?.[1];
+            const value = name !== undefined && Object.hasOwn(parts, name) ? parts[name] : token;
+            if (typeof value === 'string' || typeof value === 'number') {
+                run += String(value);
+                continue;
+            }
+            if (run !== '')
+                nodes.push(run);
+            run = '';
+            nodes.push(_jsx(Fragment, { children: value }, nodes.length));
+        }
+        if (run !== '')
+            nodes.push(run);
+    }
+    return nodes;
+}
+/** A part as plain text, or `null` when it holds an element. */
+function partText(part) {
+    if (typeof part === 'string' || typeof part === 'number')
+        return String(part);
+    if (Array.isArray(part)) {
+        let text = '';
+        for (const piece of part) {
+            const pieceText = partText(piece);
+            if (pieceText === null)
+                return null;
+            text += pieceText;
+        }
+        return text;
     }
-    return nodes.length > 0 ? nodes : null;
+    return null;
 }
 /**
- * `parts.filter(Boolean).join(separator)` as element children: every part
- * and every separator its own text piece. Blank parts drop out, so an absent
- * one closes the gap rather than leaving a doubled separator.
+ * `parts.filter(Boolean).join(separator)` as element children. Blank parts
+ * drop out, so an absent one closes the gap rather than leaving a doubled
+ * separator. Whether the line is one text node or one per part and separator
+ * follows the parts' own form (see `JoinLabelPartsOptions.pieces`): plain
+ * strings join into one, as `[a, b].join(' · ')` in JSX did.
  */
-export function joinLabelParts(parts, separator) {
-    return parts
-        .filter((part) => part !== null &&
-        part !== undefined &&
-        part !== false &&
-        part !== '' &&
-        !(Array.isArray(part) && part.length === 0))
-        .map((part, index) => (_jsxs(Fragment, { children: [index > 0 && separator, part] }, index)));
+export function joinLabelParts(parts, separator, options = {}) {
+    // Blank = renders no text: nothing at all, or text pieces that are all empty.
+    const present = parts.filter((part) => part !== null && part !== undefined && typeof part !== 'boolean' && partText(part) !== '');
+    const pieces = options.pieces ?? present.some((part) => typeof part !== 'string' && typeof part !== 'number');
+    if (!pieces) {
+        const texts = present.map(partText);
+        if (texts.every((text) => text !== null)) {
+            const line = texts.join(separator);
+            return line === '' ? null : line;
+        }
+    }
+    return present.map((part, index) => (_jsxs(Fragment, { children: [index > 0 && separator, part] }, index)));
 }

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;