@medalsocial/meda 3.3.0 → 3.4.0

package/dist/booking/labels.js

@@ -3,15 +3,52 @@
  *
  * Every word a booking screen shows arrives through its `labels` prop — meda
  * ships no default brand and no default language. A screen's labels are a flat
- * record of strings keyed `'<screen>.<thing>'` (e.g. `'who.heading'`), so one
- * merged pack (`BookingLabels`) can be handed to every screen, and a customer
- * can override a single sentence without touching the rest.
+ * record keyed `'<screen>.<thing>'` (e.g. `'who.heading'`), so one merged pack
+ * (`BookingLabels`) can be handed to every screen, and a customer can override
+ * a single sentence without touching the rest.
  *
- * Values are plain strings, so a pack is serialisable (it can travel from a
- * server component to the client as a prop). Variable parts are `{name}`
- * placeholders, filled by `fillLabel`.
+ * A label is a `BookingLabel`: a string, or an array of strings. Both are
+ * serialisable, so a pack can travel from a server component to the client as
+ * a prop. Variable parts are `{name}` placeholders.
+ *
+ * The two forms differ only in the DOM they render as element children:
+ *
+ * - a **string** renders as ONE text node once filled, like a template
+ *   literal: `'Total {total} · paid at the salon'` → «Total 840 kr · paid at
+ *   the salon», one node;
+ * - an **array** renders one text node per element, each element filled with
+ *   the same values: `['Total ', '{total}', ' · ', 'paid at the salon']` →
+ *   four nodes, the same DOM as `Total {total}{' · '}paid at the salon` in JSX.
+ *   An element that fills to `''` renders nothing.
+ *
+ * A browser lays text out per text node, so the same sentence split
+ * differently can land its later glyphs a sub-pixel apart. The pack decides
+ * where a sentence breaks; a screen never splits a string on its own.
+ *
+ * Text-only targets (`aria-label`, `title`, a file name, an error string) read
+ * a label through `fillLabel` / `labelText`, which join an array's elements.
  */
-/** Replaces `{key}` placeholders in `template`. Unknown keys are left as written. */
-export function fillLabel(template, values) {
+/** A label as plain text: an array's elements joined, a string as it is. */
+export function labelText(label) {
+    return typeof label === 'string' ? label : label.join('');
+}
+function fillOne(template, values) {
     return template.replace(/\{(\w+)\}/g, (match, key) => Object.hasOwn(values, key) ? String(values[key]) : match);
 }
+/**
+ * Replaces `{key}` placeholders in `template`, as plain text. An array is
+ * filled element by element and joined. Unknown keys are left as written.
+ */
+export function fillLabel(template, values) {
+    return typeof template === 'string'
+        ? fillOne(template, values)
+        : template.map((piece) => fillOne(piece, values)).join('');
+}
+/**
+ * The text nodes a label fills to: one for a string, one per element for an
+ * array, with empty ones dropped. `[]` when the label fills to nothing.
+ */
+export function fillLabelPieces(template, values) {
+    const pieces = typeof template === 'string' ? [template] : template;
+    return pieces.map((piece) => fillOne(piece, values)).filter((piece) => piece !== '');
+}

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

@@ -1,4 +1,5 @@
 import { type Dispatch, type ReactNode, type SetStateAction } from 'react';
+import type { BookingLabel } from './labels.js';
 import { type OtpSlotsLabels, type OtpSlotsSlot } from './otp-slots.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingGuardian } from './types.js';
@@ -9,7 +10,7 @@ export declare const LOGIN_PANEL_LABEL_KEYS: readonly ["login.heading", "login.c
  * Placeholders: `login.codeHelp` `{email}`, `login.vippsSentTo` `{to}`,
  * `login.cooldownWait` `{seconds}`, `login.resendIn` `{time}` («0:30»).
  */
-export type LoginPanelLabels = Record<(typeof LOGIN_PANEL_OWN_LABEL_KEYS)[number], string> & OtpSlotsLabels & VippsButtonLabels;
+export type LoginPanelLabels = Record<(typeof LOGIN_PANEL_OWN_LABEL_KEYS)[number], BookingLabel> & OtpSlotsLabels & VippsButtonLabels;
 /**
  * - `root`: the panel's column.
  * - `notice`: a non-error sentence in the live region (errors use `Field.Error`).
@@ -82,7 +83,7 @@ export interface LoginPanelProps {
     memory?: LoginPanelMemory;
     onMemoryChange?: Dispatch<SetStateAction<LoginPanelMemory>>;
     /** Draws the heading («Log in» / «Check your e-mail»). Default: none — the page has its own. */
-    heading?: (text: string) => ReactNode;
+    heading?: (text: ReactNode) => ReactNode;
     /** Drawn above the Vipps button on the first screen. */
     intro?: ReactNode;
     /** Wait between codes. Default 30 s. */

package/dist/booking/login-panel.js

@@ -211,7 +211,8 @@ export function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps
         setNotice(null);
     }
     const isFieldError = notice !== null && FIELD_ERRORS.has(notice);
-    const noticeText = notice === null ? null : labels[`login.notice.${notice}`];
+    // `null` for a blank notice, so no input is described by an empty one.
+    const noticeText = notice === null ? null : renderLabel(labels[`login.notice.${notice}`]);
     // One live region for the whole flow, ABOVE the switch between the two
     // screens so it stays mounted across it: a region that arrives already
     // holding its sentence is often read as nothing at all. It doubles as the
@@ -225,7 +226,7 @@ export function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps
         : labels['login.cooldownReady'];
     const cooldownRegion = (_jsx("p", { "aria-live": "polite", className: "sr-only", children: mode === 'code' ? cooldownSentence : null }));
     const link = slotClass(classNames, 'link', 'font-semibold text-primary underline underline-offset-4 disabled:no-underline disabled:opacity-60');
-    return (_jsxs("div", { className: slotClass(classNames, 'root', 'space-y-6'), children: [heading(mode === 'start' ? labels['login.heading'] : labels['login.codeHeading']), mode === 'vipps' && (_jsx("p", { className: "text-muted-foreground", children: sentTo === ''
+    return (_jsxs("div", { className: slotClass(classNames, 'root', 'space-y-6'), children: [heading(renderLabel(labels[mode === 'start' ? 'login.heading' : 'login.codeHeading'])), mode === 'vipps' && (_jsx("p", { className: "text-muted-foreground", children: sentTo === ''
                     ? labels['login.vippsSentToUnknown']
                     : renderLabel(labels['login.vippsSentTo'], { to: sentTo }) })), liveRegion, cooldownRegion, mode === 'start' ? (_jsxs(_Fragment, { children: [intro, onVipps && (_jsxs(_Fragment, { children: [_jsx(VippsButton, { onVipps: onVipps, next: vippsNext, label: vippsLabel, labels: labels, classNames: vippsClassNames }), _jsxs("div", { className: slotClass(classNames, 'divider', 'flex items-center gap-4 text-sm text-muted-foreground'), "aria-hidden": "true", children: [_jsx("span", { className: "h-px flex-1 bg-border" }), labels['login.or'], _jsx("span", { className: "h-px flex-1 bg-border" })] })] })), _jsx("p", { className: "text-muted-foreground", children: labels['login.emailIntro'] }), _jsxs("form", { onSubmit: submitEmail, className: slotClass(classNames, 'form', 'space-y-6'), children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: emailId, children: labels['login.emailLabel'] }), _jsx(Input, { id: emailId, type: "email", autoComplete: "email", required: true, value: email, "aria-describedby": noticeText ? noticeId : undefined, "aria-invalid": isFieldError || undefined, onChange: (event) => setEmail(event.target.value), className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS) })] }), _jsx(BookingButton, { type: "submit", size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: pending, children: labels['login.sendCode'] })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: submitCode, className: slotClass(classNames, 'form', 'space-y-6'), children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: codeId, children: labels['login.codeLabel'] }), _jsx("div", { ref: codeRef, children: _jsx(OtpSlots, { id: codeId, value: code, 
                                             // Read-only rather than disabled while a request is out, so

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

@@ -1,10 +1,11 @@
+import { type BookingLabel } from './labels.js';
 import { type LoginPanelLabels, type LoginPanelProps } from './login-panel.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingGuardian } from './types.js';
 export declare const LOGIN_SHEET_OWN_LABEL_KEYS: readonly ["loginSheet.prompt", "loginSheet.trigger", "loginSheet.intro", "loginSheet.vipps", "loginSheet.close"];
 export declare const LOGIN_SHEET_LABEL_KEYS: readonly ["loginSheet.prompt", "loginSheet.trigger", "loginSheet.intro", "loginSheet.vipps", "loginSheet.close", "login.heading", "login.codeHeading", "login.or", "login.emailIntro", "login.emailLabel", "login.sendCode", "login.codeLabel", "login.submitCode", "login.codeHelp", "login.codeHelpVipps", "login.vippsSentTo", "login.vippsSentToUnknown", "login.cooldownWait", "login.cooldownReady", "login.resendIn", "login.resend", "login.switchEmail", "login.useEmailInstead", "login.notice.sent", "login.notice.resent", "login.notice.unreachable", "login.notice.badEmail", "login.notice.invalid", "login.notice.throttled", "login.notice.vippsInvalid", "login.notice.vippsConflict", "otp.label", "vipps.button", "vipps.unavailable", "vipps.throttled"];
 /** `loginSheet.prompt` holds a `{trigger}` placeholder where the trigger button goes. */
-export type LoginSheetLabels = Record<(typeof LOGIN_SHEET_OWN_LABEL_KEYS)[number], string> & LoginPanelLabels;
+export type LoginSheetLabels = Record<(typeof LOGIN_SHEET_OWN_LABEL_KEYS)[number], BookingLabel> & LoginPanelLabels;
 /**
  * - `prompt`: the «have an account? Log in» row.
  * - `trigger`: the button inside it.

package/dist/booking/login-sheet.js

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { Sheet } from '../primitives/sheet.js';
 import { labelParts } from './internal/label-parts.js';
 import { BookingButton } from './internal/ui.js';
+import { labelText } from './labels.js';
 import { LOGIN_PANEL_LABEL_KEYS, LoginPanel, loginMemoryFor, } from './login-panel.js';
 import { slotClass } from './slots.js';
 export const LOGIN_SHEET_OWN_LABEL_KEYS = [
@@ -41,7 +42,7 @@ export function LoginSheet({ labels, onStartLogin, onVerify, onVipps, onSignedIn
     const [signedIn, setSignedIn] = useState(false);
     return (_jsxs(Sheet, { open: open, onOpenChange: setOpen, children: [trigger && !signedIn && (_jsx("p", { className: slotClass(classNames, 'prompt', 'text-sm text-muted-foreground'), children: labelParts(labels['loginSheet.prompt'], {
                     trigger: (_jsx(Sheet.Trigger, { className: slotClass(classNames, 'trigger', 'font-semibold text-primary underline underline-offset-4'), children: labels['loginSheet.trigger'] })),
-                }) })), _jsxs(Sheet.Content, { className: slotClass(classNames, 'content', 'z-50'), children: [_jsx(LoginPanel, { labels: labels, memory: memory, onMemoryChange: setMemory, onStartLogin: onStartLogin, onVerify: onVerify, onVipps: onVipps, vippsNext: resumePath, vippsLabel: labels['loginSheet.vipps'], resendCooldownMs: resendCooldownMs, classNames: panelClassNames, otpClassNames: otpClassNames, vippsClassNames: vippsClassNames, onSignedIn: (guardian) => {
+                }) })), _jsxs(Sheet.Content, { className: slotClass(classNames, 'content', 'z-50'), children: [_jsx(LoginPanel, { labels: labels, memory: memory, onMemoryChange: setMemory, onStartLogin: onStartLogin, onVerify: onVerify, onVipps: onVipps, vippsNext: resumePath, vippsLabel: labelText(labels['loginSheet.vipps']), resendCooldownMs: resendCooldownMs, classNames: panelClassNames, otpClassNames: otpClassNames, vippsClassNames: vippsClassNames, onSignedIn: (guardian) => {
                             setSignedIn(true);
                             setOpen(false);
                             onSignedIn(guardian);

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

@@ -1,4 +1,5 @@
 import type { BookingDaypart, BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import { type TimeScreenComponents, type TimeScreenLabels, type TimeScreenSlot } from './time-screen.js';
 import type { BookingDayDto, BookingManageDto, BookingSlotDto } from './types.js';
@@ -33,7 +34,7 @@ export declare const MANAGE_SCREEN_LABEL_KEYS: readonly ["manage.heading", "mana
  * The three `cancel.reason.*` strings are both the chips' text and the value
  * `onCancel` receives.
  */
-export type ManageScreenLabels = Record<(typeof MANAGE_SCREEN_LABEL_KEYS)[number], string> & TimeScreenLabels;
+export type ManageScreenLabels = Record<(typeof MANAGE_SCREEN_LABEL_KEYS)[number], BookingLabel> & TimeScreenLabels;
 /** Why a mutation failed. Map anything the route did not name to `unavailable`. */
 export type ManageErrorCode = 'windowPassed' | 'slotTaken' | 'notFound' | 'conflict' | 'invalidInput' | 'unavailable';
 /**

package/dist/booking/manage-screen.js

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { cn } from '../lib/utils.js';
 import { renderLabel } from './internal/label-parts.js';
 import { BookingButton } from './internal/ui.js';
-import { fillLabel } from './labels.js';
+import { fillLabel, labelText } from './labels.js';
 import { slotClass } from './slots.js';
 import { TimeScreen, } from './time-screen.js';
 /**
@@ -121,7 +121,7 @@ const LINK_CLASS = 'font-semibold text-primary underline underline-offset-4';
 /** «Name's appointment» when a name was given, the bare noun when not. */
 function theirAppointment(labels, name) {
     if (!name)
-        return labels['manage.appointment.unnamed'];
+        return labelText(labels['manage.appointment.unnamed']);
     return fillLabel(labels[/[sxz]$/i.test(name) ? 'manage.appointment.namedSibilant' : 'manage.appointment.named'], { name });
 }
 /**
@@ -142,16 +142,20 @@ function remainingLabel(labels, ms) {
         return fillLabel(labels['manage.remaining.in'], { amount: hourPart });
     const minutes = Math.floor((ms % HOUR_MS) / 60_000);
     if (minutes < 1)
-        return labels['manage.remaining.underMinute'];
+        return labelText(labels['manage.remaining.underMinute']);
     return fillLabel(labels['manage.remaining.in'], {
         amount: fillLabel(labels[minutes === 1 ? 'manage.remaining.minute.one' : 'manage.remaining.minute.other'], { count: minutes }),
     });
 }
 function ringUs(labels, phone) {
-    return phone ? fillLabel(labels['manage.ringUsOn'], { phone }) : labels['manage.ringUs'];
+    return phone
+        ? fillLabel(labels['manage.ringUsOn'], { phone })
+        : labelText(labels['manage.ringUs']);
 }
 function callUs(labels, phone) {
-    return phone ? fillLabel(labels['manage.callUsOn'], { phone }) : labels['manage.callUs'];
+    return phone
+        ? fillLabel(labels['manage.callUsOn'], { phone })
+        : labelText(labels['manage.callUs']);
 }
 /** What the visitor is told went wrong — never the upstream's own words. */
 function errorSentence(labels, code, phone) {
@@ -159,13 +163,13 @@ function errorSentence(labels, code, phone) {
         case 'windowPassed':
             return fillLabel(labels['manage.error.windowPassed'], { ringUs: ringUs(labels, phone) });
         case 'slotTaken':
-            return labels['manage.error.slotTaken'];
+            return labelText(labels['manage.error.slotTaken']);
         case 'notFound':
             return fillLabel(labels['manage.error.notFound'], { callUs: callUs(labels, phone) });
         case 'conflict':
             return fillLabel(labels['manage.error.conflict'], { ringUs: ringUs(labels, phone) });
         case 'invalidInput':
-            return labels['manage.error.invalidInput'];
+            return labelText(labels['manage.error.invalidInput']);
         default:
             return fillLabel(labels['manage.error.unavailable'], { ringUs: ringUs(labels, phone) });
     }
@@ -200,7 +204,7 @@ export function ManageScreen({ labels, format, dayparts, booking, phone = null,
         ? null
         : format.stylistName(booking.resourceName) || null;
     const serviceLabel = booking.serviceName === UNKNOWN_SERVICE
-        ? labels['manage.serviceFallback']
+        ? labelText(labels['manage.serviceFallback'])
         : booking.serviceName;
     // The LARGER window wins: the sentence promises both actions, and the earlier
     // of the two deadlines is the one true of both.
@@ -330,7 +334,7 @@ function ClosedBooking({ labels, format, status, bookingHref, phone, className,
  * contiguous, which the sub-line says.
  */
 function PartyChoice({ labels, format, bookedForName, phone, onJustThisOne, onBack, className, }) {
-    const who = bookedForName ?? labels['manage.party.unnamed'];
+    const who = bookedForName ?? labelText(labels['manage.party.unnamed']);
     return (_jsxs("div", { className: className, children: [_jsx("h2", { className: "font-sans text-lg font-bold", children: renderLabel(labels['manage.party.heading'], { who }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx(BookingButton, { size: "lg", onClick: onJustThisOne, children: renderLabel(labels['manage.party.justThisOne'], { who }) }), _jsx(BookingButton, { size: "lg", variant: "outline", onClick: onBack, children: labels['manage.back'] })] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [labels['manage.party.note'], ' ', _jsx(PhoneSentence, { format: format, phone: phone, children: ringUs(labels, phone) }), labels['manage.party.noteSuffix']] })] }));
 }
 /**
@@ -362,11 +366,12 @@ function ConfirmCancel({ labels, format, booking, reason, busy, onPickReason, on
                     dateTime: format.clock.dateTime(booking.startTs),
                     hours: booking.cancelWindowHours,
                 }) }), _jsxs("fieldset", { className: "flex flex-wrap gap-2", children: [_jsx("legend", { className: "sr-only", children: labels['manage.cancel.reasonLegend'] }), CANCEL_REASON_KEYS.map((key) => {
-                        const option = labels[key];
+                        // The reason travels as text; the chip shows the label in its own pieces.
+                        const option = labelText(labels[key]);
                         const picked = reason === option;
                         return (_jsx(BookingButton, { variant: "outline", size: "sm", "aria-pressed": picked, 
                             // Tapping the chosen chip again clears it: the answer is
                             // optional, so there has to be a way back to having given none.
-                            onClick: () => onPickReason(picked ? null : option), className: cn('rounded-full', picked ? 'border-primary ring-2 ring-primary' : ''), children: option }, key));
+                            onClick: () => onPickReason(picked ? null : option), className: cn('rounded-full', picked ? 'border-primary ring-2 ring-primary' : ''), children: labels[key] }, key));
                     })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx(BookingButton, { size: "lg", disabled: busy, onClick: onConfirm, children: labels['manage.cancel.confirm'] }), _jsx(BookingButton, { size: "lg", variant: "outline", disabled: busy, onClick: onBack, children: labels['manage.cancel.keep'] })] })] }));
 }

package/dist/booking/otp-slots.d.ts

@@ -1,6 +1,7 @@
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 export declare const OTP_SLOTS_LABEL_KEYS: readonly ["otp.label"];
-export type OtpSlotsLabels = Record<(typeof OTP_SLOTS_LABEL_KEYS)[number], string>;
+export type OtpSlotsLabels = Record<(typeof OTP_SLOTS_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root`: the positioned wrapper.
  * - `row`: the six-box grid.

package/dist/booking/otp-slots.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useLayoutEffect, useRef, useState, } from 'react';
 import { cn } from '../lib/utils.js';
+import { labelText } from './labels.js';
 import { slotClass } from './slots.js';
 const LENGTH = 6;
 function digitsOnly(value) {
@@ -98,7 +99,7 @@ export function OtpSlots({ id, name = 'code', value, disabled = false, readOnly
     return (_jsxs("div", { className: slotClass(classNames, 'root', 'relative'), children: [_jsx("input", { ref: hiddenRef, id: fieldId, name: name, inputMode: "numeric", autoComplete: "one-time-code", autoCorrect: "off", spellCheck: false, 
                 // `\d*` rather than `[0-9]{6}`: it is the spelling iOS reads as «show the
                 // number pad», and the length is `minLength`/`maxLength`'s job.
-                pattern: "\\d*", minLength: LENGTH, maxLength: LENGTH, required: true, disabled: disabled, readOnly: readOnly, "aria-busy": readOnly || undefined, value: digits, "aria-invalid": invalid || undefined, "aria-describedby": describedBy, "aria-label": labels['otp.label'], onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: (event) => syncCaret(event.currentTarget), onSelect: (event) => syncCaret(event.currentTarget), onClick: (event) => syncCaret(event.currentTarget), onPaste: handlePaste, className: "absolute inset-0 z-10 h-full w-full cursor-text opacity-0" }), _jsx("div", { "aria-hidden": "true", "data-slot": "otp-row", className: slotClass(classNames, 'row', 'grid grid-cols-6 gap-1.5 sm:gap-2.5'), onMouseDown: (event) => {
+                pattern: "\\d*", minLength: LENGTH, maxLength: LENGTH, required: true, disabled: disabled, readOnly: readOnly, "aria-busy": readOnly || undefined, value: digits, "aria-invalid": invalid || undefined, "aria-describedby": describedBy, "aria-label": labelText(labels['otp.label']), onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: (event) => syncCaret(event.currentTarget), onSelect: (event) => syncCaret(event.currentTarget), onClick: (event) => syncCaret(event.currentTarget), onPaste: handlePaste, className: "absolute inset-0 z-10 h-full w-full cursor-text opacity-0" }), _jsx("div", { "aria-hidden": "true", "data-slot": "otp-row", className: slotClass(classNames, 'row', 'grid grid-cols-6 gap-1.5 sm:gap-2.5'), onMouseDown: (event) => {
                     event.preventDefault();
                     focusHidden();
                 }, children: Array.from({ length: LENGTH }, (_, index) => {

package/dist/booking/portal/age-confirm-card.d.ts

@@ -1,7 +1,8 @@
+import type { BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 export declare const AGE_CONFIRM_CARD_LABEL_KEYS: readonly ["ageConfirm.heading", "ageConfirm.lead", "ageConfirm.legend", "ageConfirm.birthYear", "ageConfirm.birthMonth", "ageConfirm.birthMonthUnknown", "ageConfirm.confirm", "ageConfirm.dismiss"];
 /** `heading` and `legend` take `{name}`. */
-export type AgeConfirmCardLabels = Record<(typeof AGE_CONFIRM_CARD_LABEL_KEYS)[number], string>;
+export type AgeConfirmCardLabels = Record<(typeof AGE_CONFIRM_CARD_LABEL_KEYS)[number], BookingLabel>;
 /** `root` (the section), `heading`, `form`, `actions` (the button row). */
 export type AgeConfirmCardSlot = 'root' | 'heading' | 'form' | 'actions';
 export interface AgeConfirmCardProps {

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

@@ -1,5 +1,6 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { BookingFormat } from '../format.js';
+import type { BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 import type { ChildSummary } from '../types.js';
 export declare const CHILD_CARDS_LABEL_KEYS: readonly ["childCards.empty", "childCards.neverVisited", "childCards.lastVisit", "childCards.lastVisitNoService", "childCards.book", "childCards.stylist", "childCards.next", "childCards.none"];
@@ -8,7 +9,7 @@ export declare const CHILD_CARDS_LABEL_KEYS: readonly ["childCards.empty", "chil
  * `{age}` `{service}` `{date}`; `childCards.lastVisitNoService` `{age}`
  * `{date}`; `childCards.book` `{name}`.
  */
-export type ChildCardsLabels = Record<(typeof CHILD_CARDS_LABEL_KEYS)[number], string>;
+export type ChildCardsLabels = Record<(typeof CHILD_CARDS_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `list`: the grid. - `card`: one child. - `avatar`: the initial.
  * - `name`, `detail`: the two lines. - `details`: the full card's facts.

package/dist/booking/portal/data-controls.d.ts

@@ -1,3 +1,4 @@
+import { type BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 import { type PortalActionFailure, type PortalActionResult } from './action-result.js';
 export declare const DATA_CONTROLS_LABEL_KEYS: readonly ["dataControls.heading", "dataControls.export", "dataControls.delete", "dataControls.confirmHeading", "dataControls.consequences", "dataControls.confirmLabel", "dataControls.confirmHelp", "dataControls.wrongWord", "dataControls.deleteForever", "dataControls.cancel", "dataControls.unreachable", "dataControls.confirmWord"];
@@ -5,7 +6,7 @@ export declare const DATA_CONTROLS_LABEL_KEYS: readonly ["dataControls.heading",
  * `confirmWord` is the literal the visitor must type (e.g. «DELETE»);
  * `confirmLabel` and `wrongWord` take `{word}`.
  */
-export type DataControlsLabels = Record<(typeof DATA_CONTROLS_LABEL_KEYS)[number], string>;
+export type DataControlsLabels = Record<(typeof DATA_CONTROLS_LABEL_KEYS)[number], BookingLabel>;
 /**
  * `root` (the section), `heading`, `actions` (the export/delete row),
  * `confirm` (the confirm panel form).

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 {