@medalsocial/meda 3.3.0 → 3.5.0

package/dist/booking/portal/data-controls.js

@@ -5,7 +5,7 @@ import { Field } from '../../primitives/field.js';
 import { Input } from '../../primitives/input.js';
 import { renderLabel } from '../internal/label-parts.js';
 import { BOOKING_INPUT_CLASS, BookingButton } from '../internal/ui.js';
-import { fillLabel } from '../labels.js';
+import { fillLabel, labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 import { settle } from './action-result.js';
 export const DATA_CONTROLS_LABEL_KEYS = [
@@ -51,7 +51,7 @@ export function DataControls({ labels, onExport, onDelete, onSessionExpired, cla
     const [error, setError] = useState(null);
     const [exportError, setExportError] = useState(null);
     const [pending, startTransition] = useTransition();
-    const word = labels['dataControls.confirmWord'];
+    const word = labelText(labels['dataControls.confirmWord']);
     const confirmId = `${id}-confirm`;
     const errorId = `${id}-error`;
     function failed(failure) {
@@ -59,7 +59,7 @@ export function DataControls({ labels, onExport, onDelete, onSessionExpired, cla
             onSessionExpired?.();
             return null;
         }
-        return failure.message ?? labels['dataControls.unreachable'];
+        return failure.message ?? labelText(labels['dataControls.unreachable']);
     }
     function exportData() {
         setExportError(null);

package/dist/booking/portal/family-editor.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 { PortalFamilyMemberDto, PortalPersonNouns } from '../types.js';
 import { type PortalActionFailure } from './action-result.js';
@@ -10,7 +11,7 @@ export declare const FAMILY_EDITOR_LABEL_KEYS: readonly ["familyEditor.heading",
  * `heading` is used when no `nouns` are given. `removeNamed`, `ageConfirmed`
  * and `ageSaved` take `{name}`. The card's `ageConfirm.*` keys are included.
  */
-export type FamilyEditorLabels = Record<(typeof FAMILY_EDITOR_OWN_LABEL_KEYS)[number], string> & AgeConfirmCardLabels;
+export type FamilyEditorLabels = Record<(typeof FAMILY_EDITOR_OWN_LABEL_KEYS)[number], BookingLabel> & AgeConfirmCardLabels;
 /**
  * `root` (the section), `heading`, `list` (the `<ul>` of rows), `card` (each
  * row's form), `listStatus` (the live region under the list), `add` (the add

package/dist/booking/portal/family-editor.js

@@ -6,7 +6,7 @@ import { Field } from '../../primitives/field.js';
 import { Input } from '../../primitives/input.js';
 import { Textarea } from '../../primitives/textarea.js';
 import { BOOKING_INPUT_CLASS, BOOKING_TEXTAREA_CLASS, BookingButton } from '../internal/ui.js';
-import { fillLabel } from '../labels.js';
+import { fillLabel, labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 import { settle } from './action-result.js';
 import { AGE_CONFIRM_CARD_LABEL_KEYS, AgeConfirmCard, } from './age-confirm-card.js';
@@ -196,7 +196,7 @@ export function FamilyEditor({ labels, format, family, nouns, now = Date.now(),
             onSessionExpired?.();
             return null;
         }
-        return failure.message ?? labels['familyEditor.unreachable'];
+        return failure.message ?? labelText(labels['familyEditor.unreachable']);
     }
     /** Never ask about this child again. */
     function rememberAgeAnswer(personId) {
@@ -352,7 +352,7 @@ export function FamilyEditor({ labels, format, family, nouns, now = Date.now(),
                 adopt(result.family, row.key, isNew ? result.personId : null);
                 setStatuses({
                     [row.key]: result.fallback && gaveDetails
-                        ? { kind: 'saved', note: labels['familyEditor.savedNoDetails'] }
+                        ? { kind: 'saved', note: labelText(labels['familyEditor.savedNoDetails']) }
                         : { kind: 'saved' },
                 });
                 setListStatus(isNew ? { kind: 'saved' } : null);
@@ -371,13 +371,13 @@ export function FamilyEditor({ labels, format, family, nouns, now = Date.now(),
             showSaving({
                 rows: rows.filter((current) => current.key !== row.key),
                 statuses,
-                listStatus: { kind: 'saved', note: labels['familyEditor.removed'] },
+                listStatus: { kind: 'saved', note: labelText(labels['familyEditor.removed']) },
             });
             const result = await settle(() => onRemovePerson(target(row)));
             if (result.ok) {
                 adopt(result.family, row.key, null);
                 setStatuses({});
-                setListStatus({ kind: 'saved', note: labels['familyEditor.removed'] });
+                setListStatus({ kind: 'saved', note: labelText(labels['familyEditor.removed']) });
                 return;
             }
             fail(result, null);
@@ -404,18 +404,18 @@ export function DefaultFamilyMemberCard({ id, row, years, months, offerDetails,
     // A stylist no longer on the roster keeps their option rather than the
     // select silently showing «none» for a preference the backend still holds.
     const stylistOptions = row.stylist !== '' && !stylists.some((stylist) => stylist.id === row.stylist)
-        ? [...stylists, { id: row.stylist, name: labels['familyEditor.stylistFormer'] }]
+        ? [...stylists, { id: row.stylist, name: labelText(labels['familyEditor.stylistFormer']) }]
         : stylists;
     return (_jsxs("form", { onSubmit: (event) => {
             event.preventDefault();
             onSave();
-        }, "aria-label": name || labels['familyEditor.newRow'], className: cn('space-y-3 rounded-lg border border-border bg-card px-5 py-4', className), children: [_jsxs("div", { className: "grid grid-cols-[1fr_7rem] gap-3", children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-name`, children: labels['familyEditor.name'] }), _jsx(Input, { id: `${id}-name`, value: row.name, maxLength: 60, "aria-invalid": nameMissing || undefined, "aria-describedby": partial ? statusId : undefined, onChange: (event) => onPatch({ name: event.target.value }), className: BOOKING_INPUT_CLASS })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-year`, children: labels['familyEditor.birthYear'] }), _jsxs("select", { id: `${id}-year`, value: row.birthYear, "aria-invalid": yearMissing || undefined, "aria-describedby": partial ? statusId : undefined, onChange: (event) => onPatch({ birthYear: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.birthYearPlaceholder'] }), years.map((year) => (_jsx("option", { value: String(year), children: year }, year)))] })] })] }), offerDetails && (_jsx(DetailFields, { id: id, row: row, months: months, stylists: stylistOptions, labels: labels, onPatch: onPatch })), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(BookingButton, { type: "submit", size: "sm", children: labels['familyEditor.save'] }), _jsx(BookingButton, { type: "button", variant: "ghost", size: "sm", "aria-label": name
+        }, "aria-label": name || labelText(labels['familyEditor.newRow']), className: cn('space-y-3 rounded-lg border border-border bg-card px-5 py-4', className), children: [_jsxs("div", { className: "grid grid-cols-[1fr_7rem] gap-3", children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-name`, children: labels['familyEditor.name'] }), _jsx(Input, { id: `${id}-name`, value: row.name, maxLength: 60, "aria-invalid": nameMissing || undefined, "aria-describedby": partial ? statusId : undefined, onChange: (event) => onPatch({ name: event.target.value }), className: BOOKING_INPUT_CLASS })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-year`, children: labels['familyEditor.birthYear'] }), _jsxs("select", { id: `${id}-year`, value: row.birthYear, "aria-invalid": yearMissing || undefined, "aria-describedby": partial ? statusId : undefined, onChange: (event) => onPatch({ birthYear: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.birthYearPlaceholder'] }), years.map((year) => (_jsx("option", { value: String(year), children: year }, year)))] })] })] }), offerDetails && (_jsx(DetailFields, { id: id, row: row, months: months, stylists: stylistOptions, labels: labels, onPatch: onPatch })), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(BookingButton, { type: "submit", size: "sm", children: labels['familyEditor.save'] }), _jsx(BookingButton, { type: "button", variant: "ghost", size: "sm", "aria-label": name
                             ? fillLabel(labels['familyEditor.removeNamed'], { name })
-                            : labels['familyEditor.removeRow'], onClick: onRemove, children: labels['familyEditor.remove'] }), _jsx(RowStatusLine, { id: statusId, status: status, labels: labels })] })] }));
+                            : labelText(labels['familyEditor.removeRow']), onClick: onRemove, children: labels['familyEditor.remove'] }), _jsx(RowStatusLine, { id: statusId, status: status, labels: labels })] })] }));
 }
 /** Month, preferred stylist and a note for the stylist — where the backend keeps them. */
 function DetailFields({ id, row, months, stylists, labels, onPatch, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-month`, children: labels['familyEditor.birthMonth'] }), _jsxs("select", { id: `${id}-month`, value: row.birthMonth, onChange: (event) => onPatch({ birthMonth: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.birthMonthUnknown'] }), months.map((month, index) => (_jsx("option", { value: String(index + 1), children: month }, month)))] })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-stylist`, children: labels['familyEditor.stylist'] }), _jsxs("select", { id: `${id}-stylist`, value: row.stylist, onChange: (event) => onPatch({ stylist: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.stylistNone'] }), stylists.map((stylist) => (_jsx("option", { value: stylist.id, children: stylist.name }, stylist.id)))] })] })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-notes`, children: labels['familyEditor.notes'] }), _jsx(Textarea, { id: `${id}-notes`, rows: 2, maxLength: NOTES_MAX, placeholder: labels['familyEditor.notesPlaceholder'], value: row.notes, onChange: (event) => onPatch({ notes: event.target.value }), className: BOOKING_TEXTAREA_CLASS })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-month`, children: labels['familyEditor.birthMonth'] }), _jsxs("select", { id: `${id}-month`, value: row.birthMonth, onChange: (event) => onPatch({ birthMonth: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.birthMonthUnknown'] }), months.map((month, index) => (_jsx("option", { value: String(index + 1), children: month }, month)))] })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-stylist`, children: labels['familyEditor.stylist'] }), _jsxs("select", { id: `${id}-stylist`, value: row.stylist, onChange: (event) => onPatch({ stylist: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.stylistNone'] }), stylists.map((stylist) => (_jsx("option", { value: stylist.id, children: stylist.name }, stylist.id)))] })] })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-notes`, children: labels['familyEditor.notes'] }), _jsx(Textarea, { id: `${id}-notes`, rows: 2, maxLength: NOTES_MAX, placeholder: labelText(labels['familyEditor.notesPlaceholder']), value: row.notes, onChange: (event) => onPatch({ notes: event.target.value }), className: BOOKING_TEXTAREA_CLASS })] })] }));
 }
 function RowStatusLine({ id, status, labels, }) {
     return (_jsxs("span", { "aria-live": "polite", className: "min-h-5 text-sm", children: [status?.kind === 'saved' && (_jsx("span", { id: id, className: "text-muted-foreground", children: status.note ?? labels['familyEditor.saved'] })), status?.kind === 'partial' && (_jsx(Field.Error, { id: id, children: labels['familyEditor.partial'] })), status?.kind === 'error' && _jsx(Field.Error, { id: id, children: status.message })] }));

package/dist/booking/portal/logout-button.d.ts

@@ -1,7 +1,8 @@
+import { type BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 import type { SaveResult } from '../types.js';
 export declare const LOGOUT_BUTTON_LABEL_KEYS: readonly ["logout.button", "logout.unreachable"];
-export type LogoutButtonLabels = Record<(typeof LOGOUT_BUTTON_LABEL_KEYS)[number], string>;
+export type LogoutButtonLabels = Record<(typeof LOGOUT_BUTTON_LABEL_KEYS)[number], BookingLabel>;
 /** `root` (the form), `button`, `error` (the live line under it). */
 export type LogoutButtonSlot = 'root' | 'button' | 'error';
 export interface LogoutButtonProps {

package/dist/booking/portal/logout-button.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useTransition } from 'react';
 import { BookingButton } from '../internal/ui.js';
+import { labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 export const LOGOUT_BUTTON_LABEL_KEYS = ['logout.button', 'logout.unreachable'];
 /** «Log out», locked while the callback runs. */
@@ -20,7 +21,7 @@ export function LogoutButton({ labels, onLogout, classNames }) {
                 result = { ok: false, message: '' };
             }
             if (!result.ok)
-                setError(result.message || labels['logout.unreachable']);
+                setError(result.message || labelText(labels['logout.unreachable']));
         });
     }
     return (_jsxs("form", { onSubmit: logout, className: slotClass(classNames, 'root'), children: [_jsx(BookingButton, { type: "submit", variant: "outline", disabled: pending, className: slotClass(classNames, 'button'), children: labels['logout.button'] }), _jsx("p", { "aria-live": "polite", className: slotClass(classNames, 'error', 'mt-2 text-sm text-destructive'), children: error })] }));

package/dist/booking/portal/portal-shell.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentType, type ReactNode } from 'react';
+import { type BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 export declare const PORTAL_SHELL_LABEL_KEYS: readonly ["portalShell.nav", "portalShell.navBar"];
 /**
@@ -6,7 +7,7 @@ export declare const PORTAL_SHELL_LABEL_KEYS: readonly ["portalShell.nav", "port
  * bottom bar. Only one of the two is displayed at a time; a pack may give both
  * the same name.
  */
-export type PortalShellLabels = Record<(typeof PORTAL_SHELL_LABEL_KEYS)[number], string>;
+export type PortalShellLabels = Record<(typeof PORTAL_SHELL_LABEL_KEYS)[number], BookingLabel>;
 /** An icon the shell draws beside a tab label (e.g. a lucide icon). */
 export type PortalShellIcon = ComponentType<{
     className?: string;

package/dist/booking/portal/portal-shell.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { cn } from '../../lib/utils.js';
+import { labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 export const PORTAL_SHELL_LABEL_KEYS = ['portalShell.nav', 'portalShell.navBar'];
 /**
@@ -26,12 +27,12 @@ export function PortalShell({ labels, tabs, tab: tabProp, defaultTab, onTabChang
             setUncontrolled(next);
         onTabChange?.(next);
     }
-    return (_jsxs("div", { className: slotClass(classNames, 'root', 'space-y-8'), children: [header, _jsxs("div", { className: "gap-10 lg:grid lg:grid-cols-[15rem_minmax(0,1fr)]", children: [_jsx("aside", { className: slotClass(classNames, 'rail', 'hidden lg:block'), children: _jsxs("div", { className: "sticky top-8 space-y-4", children: [account, _jsx("nav", { "aria-label": labels['portalShell.nav'], children: _jsx("ul", { className: "space-y-1", children: tabs.map(({ id, label, icon: Icon }) => (_jsx("li", { children: _jsxs("button", { type: "button", "aria-current": tab === id ? 'page' : undefined, onClick: () => select(id), className: cn(slotClass(classNames, 'railItem', 'flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-semibold transition-colors', tab === id
+    return (_jsxs("div", { className: slotClass(classNames, 'root', 'space-y-8'), children: [header, _jsxs("div", { className: "gap-10 lg:grid lg:grid-cols-[15rem_minmax(0,1fr)]", children: [_jsx("aside", { className: slotClass(classNames, 'rail', 'hidden lg:block'), children: _jsxs("div", { className: "sticky top-8 space-y-4", children: [account, _jsx("nav", { "aria-label": labelText(labels['portalShell.nav']), children: _jsx("ul", { className: "space-y-1", children: tabs.map(({ id, label, icon: Icon }) => (_jsx("li", { children: _jsxs("button", { type: "button", "aria-current": tab === id ? 'page' : undefined, onClick: () => select(id), className: cn(slotClass(classNames, 'railItem', 'flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-semibold transition-colors', tab === id
                                                     ? 'bg-foreground text-background'
                                                     : 'text-foreground hover:bg-muted'), tab === id && classNames?.railItemActive), children: [Icon && _jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0" }), label] }) }, id))) }) }), logout] }) }), _jsx("div", { className: "pb-28 lg:pb-0", children: tabs.map(({ id, label, content }) => (_jsxs("section", { hidden: tab !== id, "aria-label": label, 
                             // `space-y` on the section rather than a wrapper, so a hidden one
                             // contributes no margin.
-                            className: slotClass(classNames, 'section', 'space-y-10'), children: [content, id === logoutIn && logout && _jsx("div", { className: "lg:hidden", children: logout })] }, id))) })] }), _jsx("nav", { "aria-label": labels['portalShell.navBar'], className: slotClass(classNames, 'bar', 'fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur-md lg:hidden'), children: _jsx("ul", { className: "mx-auto flex max-w-lg", children: tabs.map(({ id, label, short, icon, shortIcon }) => {
+                            className: slotClass(classNames, 'section', 'space-y-10'), children: [content, id === logoutIn && logout && _jsx("div", { className: "lg:hidden", children: logout })] }, id))) })] }), _jsx("nav", { "aria-label": labelText(labels['portalShell.navBar']), className: slotClass(classNames, 'bar', 'fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur-md lg:hidden'), children: _jsx("ul", { className: "mx-auto flex max-w-lg", children: tabs.map(({ id, label, short, icon, shortIcon }) => {
                         const ShortIcon = shortIcon ?? icon;
                         return (_jsx("li", { className: "flex-1", children: _jsxs("button", { type: "button", "aria-current": tab === id ? 'page' : undefined, onClick: () => select(id), className: cn(slotClass(classNames, 'barItem', 'flex w-full flex-col items-center gap-1 px-2 py-3 text-[0.7rem] font-bold transition-colors', tab === id ? 'text-primary' : 'text-muted-foreground'), tab === id && classNames?.barItemActive), children: [ShortIcon && _jsx(ShortIcon, { "aria-hidden": "true", className: "size-5" }), short ?? label] }) }, id));
                     }) }) })] }));

package/dist/booking/portal/portal-unreachable.d.ts

@@ -1,9 +1,10 @@
 import type { ReactNode } from 'react';
 import type { BookingFormat } from '../format.js';
+import type { BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 export declare const PORTAL_UNREACHABLE_LABEL_KEYS: readonly ["portalUnreachable.heading", "portalUnreachable.body", "portalUnreachable.retry", "portalUnreachable.call"];
 /** `portalUnreachable.call` takes `{phone}`. */
-export type PortalUnreachableLabels = Record<(typeof PORTAL_UNREACHABLE_LABEL_KEYS)[number], string>;
+export type PortalUnreachableLabels = Record<(typeof PORTAL_UNREACHABLE_LABEL_KEYS)[number], BookingLabel>;
 /** - `root`: the section. - `heading`. - `actions`: the row of links. - `link`: each link. */
 export type PortalUnreachableSlot = 'root' | 'heading' | 'actions' | 'link';
 export interface PortalUnreachableProps {

package/dist/booking/portal/profile-form.d.ts

@@ -1,9 +1,10 @@
+import { type BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 import type { PortalProfileDto } from '../types.js';
 import { type PortalActionFailure } from './action-result.js';
 export declare const PROFILE_FORM_LABEL_KEYS: readonly ["profileForm.heading", "profileForm.firstName", "profileForm.lastName", "profileForm.phone", "profileForm.email", "profileForm.emailHelp", "profileForm.save", "profileForm.saved", "profileForm.restored", "profileForm.marketing", "profileForm.unreachable"];
 /** `marketing` is the consent sentence and usually names the business. */
-export type ProfileFormLabels = Record<(typeof PROFILE_FORM_LABEL_KEYS)[number], string>;
+export type ProfileFormLabels = Record<(typeof PROFILE_FORM_LABEL_KEYS)[number], BookingLabel>;
 /**
  * `root` (the section), `heading`, `form`, `status` (the save notice's live
  * region), `save` (the submit button), `consent` (the marketing box's field).

package/dist/booking/portal/profile-form.js

@@ -5,6 +5,7 @@ import { Checkbox } from '../../primitives/checkbox.js';
 import { Field } from '../../primitives/field.js';
 import { Input } from '../../primitives/input.js';
 import { BOOKING_CHECKBOX_CLASS, BOOKING_INPUT_CLASS, BookingButton } from '../internal/ui.js';
+import { labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 import { settle } from './action-result.js';
 export const PROFILE_FORM_LABEL_KEYS = [
@@ -103,7 +104,7 @@ export function ProfileForm({ labels, profile, onSave, onConsentChange, onSessio
             }
             setStatus({
                 kind: 'error',
-                message: result.message ?? labels['profileForm.unreachable'],
+                message: result.message ?? labelText(labels['profileForm.unreachable']),
                 field: 'field' in result && result.field === 'phone' ? 'phone' : null,
             });
         });
@@ -124,7 +125,7 @@ export function ProfileForm({ labels, profile, onSave, onConsentChange, onSessio
                 onSessionExpired?.();
                 return;
             }
-            setConsentError(labels['profileForm.unreachable']);
+            setConsentError(labelText(labels['profileForm.unreachable']));
         });
     }
     const view = shown.status;

package/dist/booking/portal/rebook-cards.d.ts

@@ -1,8 +1,9 @@
 import type { ComponentType } from 'react';
+import { type BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 import type { RebookSuggestion } from '../types.js';
 export declare const REBOOK_CARDS_LABEL_KEYS: readonly ["rebook.heading", "rebook.empty", "rebook.serviceFallback", "rebook.anyStylist", "rebook.cta"];
-export type RebookCardsLabels = Record<(typeof REBOOK_CARDS_LABEL_KEYS)[number], string>;
+export type RebookCardsLabels = Record<(typeof REBOOK_CARDS_LABEL_KEYS)[number], BookingLabel>;
 /** - `root`: the section. - `heading`. - `empty`. - `list`. - `card`. - `link`: the book link. */
 export type RebookCardsSlot = 'root' | 'heading' | 'empty' | 'list' | 'card' | 'link';
 export interface RebookCardProps {

package/dist/booking/portal/rebook-cards.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 export const REBOOK_CARDS_LABEL_KEYS = [
     'rebook.heading',
@@ -26,9 +27,9 @@ export function RebookCards({ suggestions, hrefFor, onRebook, labels, headingId
 /** One suggestion (an `<li>`): what · who for · with whom, and the book link. */
 export function DefaultRebookCard({ suggestion, href, onRebook, labels, classNames, }) {
     return (_jsxs("li", { className: slotClass(classNames, 'card', 'space-y-2 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "font-semibold", children: [
-                    suggestion.serviceName ?? labels['rebook.serviceFallback'],
+                    suggestion.serviceName ?? labelText(labels['rebook.serviceFallback']),
                     suggestion.bookedForName,
-                    suggestion.resourceName ?? labels['rebook.anyStylist'],
+                    suggestion.resourceName ?? labelText(labels['rebook.anyStylist']),
                 ]
                     .filter(Boolean)
                     .join(SEPARATOR) }), _jsx("a", { href: href, onClick: onRebook ? () => onRebook(suggestion) : undefined, className: slotClass(classNames, 'link', 'text-sm font-semibold text-primary underline underline-offset-4'), children: labels['rebook.cta'] })] }));

package/dist/booking/portal/upcoming-bookings.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 { PortalBookingDto } from '../types.js';
 export declare const UPCOMING_BOOKINGS_LABEL_KEYS: readonly ["upcoming.heading", "upcoming.empty", "upcoming.book", "upcoming.next", "upcoming.today", "upcoming.tomorrow", "upcoming.inDays", "upcoming.when", "upcoming.serviceFallback", "upcoming.anyStylist", "upcoming.manage", "upcoming.noManage", "upcoming.noManageWithPhone", "upcoming.call"];
@@ -9,7 +10,7 @@ export declare const UPCOMING_BOOKINGS_LABEL_KEYS: readonly ["upcoming.heading",
  * `upcoming.noManageWithPhone` `{call}` (where the `upcoming.call` link goes),
  * `upcoming.call` `{phone}`.
  */
-export type UpcomingBookingsLabels = Record<(typeof UPCOMING_BOOKINGS_LABEL_KEYS)[number], string>;
+export type UpcomingBookingsLabels = Record<(typeof UPCOMING_BOOKINGS_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root`: the section. - `heading`. - `empty`: the no-bookings box.
  * - `list`. - `card`: a plain card; `cardHero`: the first (next) one.

package/dist/booking/portal/upcoming-bookings.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../lib/utils.js';
 import { joinLabelParts, labelParts, renderLabel } from '../internal/label-parts.js';
 import { bookingButtonClass } from '../internal/ui.js';
-import { fillLabel } from '../labels.js';
+import { fillLabel, labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 export const UPCOMING_BOOKINGS_LABEL_KEYS = [
     'upcoming.heading',
@@ -29,9 +29,9 @@ const SEPARATOR = ' · ';
 function howFarOff(startTs, now, labels, format) {
     const days = format.clock.daysBetween(now, startTs);
     if (days <= 0)
-        return labels['upcoming.today'];
+        return labelText(labels['upcoming.today']);
     if (days === 1)
-        return labels['upcoming.tomorrow'];
+        return labelText(labels['upcoming.tomorrow']);
     return fillLabel(labels['upcoming.inDays'], { count: days });
 }
 /** What is booked and who for. */

package/dist/booking/portal/vipps-link-row.d.ts

@@ -1,6 +1,7 @@
+import { type BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 export declare const VIPPS_LINK_ROW_LABEL_KEYS: readonly ["vippsLink.heading", "vippsLink.linked", "vippsLink.pitch", "vippsLink.button", "vippsLink.success", "vippsLink.conflict", "vippsLink.failed", "vippsLink.unavailable", "vippsLink.throttled"];
-export type VippsLinkRowLabels = Record<(typeof VIPPS_LINK_ROW_LABEL_KEYS)[number], string>;
+export type VippsLinkRowLabels = Record<(typeof VIPPS_LINK_ROW_LABEL_KEYS)[number], BookingLabel>;
 /** `root` (the section), `card` (the bordered row), `heading`, `button`, `notice` (the live line). */
 export type VippsLinkRowSlot = 'root' | 'card' | 'heading' | 'button' | 'notice';
 /** The outcome of a link attempt that just returned, as the server recorded it. */

package/dist/booking/portal/vipps-link-row.js

@@ -4,6 +4,7 @@ import { useActionState, useEffect, useId, useRef } from 'react';
 import { useFormStatus } from 'react-dom';
 import { cn } from '../../lib/utils.js';
 import { BookingButton } from '../internal/ui.js';
+import { labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 export const VIPPS_LINK_ROW_LABEL_KEYS = [
     'vippsLink.heading',
@@ -23,17 +24,17 @@ function LinkButton({ label, className }) {
 /** The sentence under the row: a failed start first, else what the return said. */
 function noticeFor(state, isLinked, flash, labels, announceSuccess) {
     if (state?.reason === 'unavailable')
-        return labels['vippsLink.unavailable'];
+        return labelText(labels['vippsLink.unavailable']);
     if (state?.reason === 'throttled')
-        return labels['vippsLink.throttled'];
+        return labelText(labels['vippsLink.throttled']);
     if (flash === 'linked' && announceSuccess)
-        return labels['vippsLink.success'];
+        return labelText(labels['vippsLink.success']);
     if (isLinked)
         return null;
     if (flash === 'link_conflict')
-        return labels['vippsLink.conflict'];
+        return labelText(labels['vippsLink.conflict']);
     if (flash === 'link_failed')
-        return labels['vippsLink.failed'];
+        return labelText(labels['vippsLink.failed']);
     return null;
 }
 /**
@@ -76,5 +77,5 @@ export function VippsLinkRow({ labels, linked, flash, onStart, onSessionExpired,
     const sentence = noticeFor(state, linked, flash, labels, announceSuccess);
     const headingId = `${id}-heading`;
     const noticeId = `${id}-notice`;
-    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-2'), children: [_jsxs("div", { className: slotClass(classNames, 'card', 'flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: headingId, className: slotClass(classNames, 'heading', 'font-semibold'), children: labels['vippsLink.heading'] }), _jsx("p", { className: "text-sm text-muted-foreground", children: linked ? labels['vippsLink.linked'] : labels['vippsLink.pitch'] })] }), !linked && (_jsx("form", { action: formAction, "aria-describedby": sentence ? noticeId : undefined, children: _jsx(LinkButton, { label: labels['vippsLink.button'], className: classNames?.button }) }))] }), _jsx("div", { "aria-live": "polite", className: slotClass(classNames, 'notice', 'min-h-5'), children: sentence && (_jsx("p", { id: noticeId, className: "text-sm text-muted-foreground", children: sentence })) })] }));
+    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-2'), children: [_jsxs("div", { className: slotClass(classNames, 'card', 'flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: headingId, className: slotClass(classNames, 'heading', 'font-semibold'), children: labels['vippsLink.heading'] }), _jsx("p", { className: "text-sm text-muted-foreground", children: linked ? labels['vippsLink.linked'] : labels['vippsLink.pitch'] })] }), !linked && (_jsx("form", { action: formAction, "aria-describedby": sentence ? noticeId : undefined, children: _jsx(LinkButton, { label: labelText(labels['vippsLink.button']), className: classNames?.button }) }))] }), _jsx("div", { "aria-live": "polite", className: slotClass(classNames, 'notice', 'min-h-5'), children: sentence && (_jsx("p", { id: noticeId, className: "text-sm text-muted-foreground", children: sentence })) })] }));
 }

package/dist/booking/portal/visit-history.d.ts

@@ -1,10 +1,11 @@
 import { type ComponentType } from 'react';
 import type { BookingClock, BookingFormat } from '../format.js';
+import type { BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 import type { PortalBookingDto } from '../types.js';
 export declare const VISIT_HISTORY_LABEL_KEYS: readonly ["history.heading", "history.empty", "history.serviceFallback", "history.count.one", "history.count.other", "history.unknownAmount"];
 /** `history.count.*` take `{count}` and `{year}`. */
-export type VisitHistoryLabels = Record<(typeof VISIT_HISTORY_LABEL_KEYS)[number], string>;
+export type VisitHistoryLabels = Record<(typeof VISIT_HISTORY_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root`: the section. - `heading`. - `empty`: the no-visits box.
  * - `yearChip` / `yearChipSelected`: the year switcher's buttons.

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