@medalsocial/meda 3.2.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

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useId, useRef, useState, useTransition, } from 'react';
 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 { OTP_SLOTS_LABEL_KEYS, OtpSlots, } from './otp-slots.js';
 import { slotClass } from './slots.js';
 import { VIPPS_BUTTON_LABEL_KEYS, VippsButton, } from './vipps-button.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
@@ -221,19 +222,19 @@ export function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps
     // The countdown on the button changes every second; this region says only
     // the two things worth hearing — how long, and that it is over.
     const cooldownSentence = waitSeconds > 0
-        ? fillLabel(labels['login.cooldownWait'], { seconds: Math.ceil(resendCooldownMs / 1000) })
+        ? renderLabel(labels['login.cooldownWait'], { seconds: Math.ceil(resendCooldownMs / 1000) })
         : 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']
-                    : fillLabel(labels['login.vippsSentTo'], { to: sentTo }) })), liveRegion, cooldownRegion, mode === 'start' ? (_jsxs(_Fragment, { children: [intro, onVipps && (_jsxs(_Fragment, { children: [_jsx(VippsButton, { onVipps: onVipps, next: vippsNext, label: vippsLabel, labels: labels, classNames: vippsClassNames }), _jsxs("div", { className: slotClass(classNames, 'divider', 'flex items-center gap-4 text-sm text-muted-foreground'), "aria-hidden": "true", children: [_jsx("span", { className: "h-px flex-1 bg-border" }), labels['login.or'], _jsx("span", { className: "h-px flex-1 bg-border" })] })] })), _jsx("p", { className: "text-muted-foreground", children: labels['login.emailIntro'] }), _jsxs("form", { onSubmit: submitEmail, className: slotClass(classNames, 'form', 'space-y-6'), children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: emailId, children: labels['login.emailLabel'] }), _jsx(Input, { id: emailId, type: "email", autoComplete: "email", required: true, value: email, "aria-describedby": noticeText ? noticeId : undefined, "aria-invalid": isFieldError || undefined, onChange: (event) => setEmail(event.target.value), className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS) })] }), _jsx(BookingButton, { type: "submit", size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: pending, children: labels['login.sendCode'] })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: submitCode, className: slotClass(classNames, 'form', 'space-y-6'), children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: codeId, children: labels['login.codeLabel'] }), _jsx("div", { ref: codeRef, children: _jsx(OtpSlots, { id: codeId, value: code, 
+                    : renderLabel(labels['login.vippsSentTo'], { to: sentTo }) })), liveRegion, cooldownRegion, mode === 'start' ? (_jsxs(_Fragment, { children: [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
                                             // the caret stays in the field instead of falling out of a
                                             // dialog; a wrong code then only has to empty it.
                                             readOnly: checking, invalid: isFieldError, describedBy: `${codeId}-help${noticeText ? ` ${noticeId}` : ''}`, labels: labels, classNames: otpClassNames, onChange: setCode, onComplete: verify }) }), _jsx(Field.Description, { id: `${codeId}-help`, children: mode === 'vipps'
                                             ? labels['login.codeHelpVipps']
-                                            : fillLabel(labels['login.codeHelp'], { email: sentTo }) })] }), _jsx(BookingButton, { type: "submit", size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: pending, children: labels['login.submitCode'] })] }), _jsxs("div", { className: slotClass(classNames, 'links', 'flex flex-wrap items-center gap-4 text-sm'), children: [mode !== 'vipps' && (_jsx("button", { type: "button", disabled: pending || waitSeconds > 0, onClick: () => requestCode(sentTo, true), className: link, children: waitSeconds > 0
-                                    ? fillLabel(labels['login.resendIn'], { time: timer(waitSeconds) })
+                                            : renderLabel(labels['login.codeHelp'], { email: sentTo }) })] }), _jsx(BookingButton, { type: "submit", size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: pending, children: labels['login.submitCode'] })] }), _jsxs("div", { className: slotClass(classNames, 'links', 'flex flex-wrap items-center gap-4 text-sm'), children: [mode !== 'vipps' && (_jsx("button", { type: "button", disabled: pending || waitSeconds > 0, onClick: () => requestCode(sentTo, true), className: link, children: waitSeconds > 0
+                                    ? renderLabel(labels['login.resendIn'], { time: timer(waitSeconds) })
                                     : labels['login.resend'] })), _jsx("button", { type: "button", disabled: pending, onClick: switchEmail, className: link, children: mode === 'vipps' ? labels['login.useEmailInstead'] : labels['login.switchEmail'] })] })] }))] }));
 }

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

@@ -2,8 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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';
 /**
@@ -120,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 });
 }
 /**
@@ -141,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) {
@@ -158,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) });
     }
@@ -199,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.
@@ -271,14 +276,14 @@ export function ManageScreen({ labels, format, dayparts, booking, phone = null,
     const panelClass = (base) => slotClass(classNames, 'panel', base);
     return (_jsxs("section", { "aria-labelledby": "booking-manage-heading", className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h1", { id: "booking-manage-heading", className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold md:text-3xl'), children: labels['manage.heading'] }), error !== null && (_jsx("p", { role: "alert", className: slotClass(classNames, 'alert', 'rounded-lg border border-secondary/40 bg-secondary/10 px-5 py-3 text-sm'), children: errorSentence(labels, error, phone) })), view === 'cancelled' && (_jsxs("div", { className: panelClass('space-y-4 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "font-medium", children: labels['manage.cancelled'] }), _jsx("a", { href: bookingHref, className: LINK_CLASS, children: labels['manage.cancelled.findNew'] })] })), view === 'moved' && (_jsxs("div", { className: panelClass('space-y-4 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "font-medium", children: movedTo === null
                             ? labels['manage.moved']
-                            : fillLabel(labels['manage.movedTo'], {
+                            : renderLabel(labels['manage.movedTo'], {
                                 dateTime: format.clock.dateTime(movedTo),
                             }) }), newManageHref ? (_jsx("a", { href: newManageHref, className: LINK_CLASS, children: labels['manage.moved.view'] })) : (_jsxs("p", { className: "text-sm text-muted-foreground", children: [labels['manage.moved.noLink'], ' ', _jsx(PhoneSentence, { format: format, phone: phone, children: callUs(labels, phone) }), ' ', labels['manage.moved.noLinkSuffix']] }))] })), view !== 'cancelled' && view !== 'moved' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: slotClass(classNames, 'card', 'space-y-1 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "font-semibold", children: booking.bookedForName
-                                    ? fillLabel(labels['manage.card.named'], {
+                                    ? renderLabel(labels['manage.card.named'], {
                                         name: booking.bookedForName,
                                         service: serviceLabel,
                                     })
-                                    : serviceLabel }), _jsx("p", { className: "tabular-nums", children: fillLabel(labels[stylist ? 'manage.card.whenWithStylist' : 'manage.card.when'], {
+                                    : serviceLabel }), _jsx("p", { className: "tabular-nums", children: renderLabel(labels[stylist ? 'manage.card.whenWithStylist' : 'manage.card.when'], {
                                     dateTime: format.clock.dateTime(booking.startTs),
                                     stylist: stylist ?? '',
                                     price: format.price(booking.amountOre),
@@ -287,11 +292,11 @@ export function ManageScreen({ labels, format, dayparts, booking, phone = null,
                                 setError(null);
                                 setView('cancel');
                             } })) : (_jsx(ClosedBooking, { labels: labels, format: format, status: booking.status, bookingHref: bookingHref, phone: phone, className: panelClass('space-y-3 rounded-lg border border-border bg-card px-5 py-4') }))), view === 'party' && (_jsx(PartyChoice, { labels: labels, format: format, bookedForName: booking.bookedForName, phone: phone, onJustThisOne: goToTime, onBack: () => setView('overview'), className: panelClass('space-y-4 rounded-lg border border-primary/40 bg-primary/5 px-5 py-4') })), view === 'time' && (_jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: stylist
-                                    ? fillLabel(labels['manage.reschedule.leadWithStylist'], {
+                                    ? renderLabel(labels['manage.reschedule.leadWithStylist'], {
                                         service: serviceLabel,
                                         stylist,
                                     })
-                                    : fillLabel(labels['manage.reschedule.lead'], { service: serviceLabel }) }), slotsFailed && (_jsxs("p", { className: "rounded-lg border border-border bg-card px-5 py-4 text-sm", children: [labels['manage.reschedule.failed'], ' ', _jsx(PhoneSentence, { format: format, phone: phone, children: ringUs(labels, phone) }), labels['manage.reschedule.failedSuffix']] })), !slotsFailed && slots === null && (_jsx("p", { className: "text-sm text-muted-foreground", children: labels['manage.reschedule.loading'] })), !slotsFailed && slots !== null && (_jsx(TimeScreen, { labels: labels, format: format, dayparts: dayparts, slots: slots, days: reschedule.days, openDays: reschedule.openDays ?? null, currentSlotTs: booking.startTs, weekendNote: weekendNoteFor(pricing), phone: phone, now: nowProp, classNames: timeClassNames, components: components, onPick: (slot) => {
+                                    : renderLabel(labels['manage.reschedule.lead'], { service: serviceLabel }) }), slotsFailed && (_jsxs("p", { className: "rounded-lg border border-border bg-card px-5 py-4 text-sm", children: [labels['manage.reschedule.failed'], ' ', _jsx(PhoneSentence, { format: format, phone: phone, children: ringUs(labels, phone) }), labels['manage.reschedule.failedSuffix']] })), !slotsFailed && slots === null && (_jsx("p", { className: "text-sm text-muted-foreground", children: labels['manage.reschedule.loading'] })), !slotsFailed && slots !== null && (_jsx(TimeScreen, { labels: labels, format: format, dayparts: dayparts, slots: slots, days: reschedule.days, openDays: reschedule.openDays ?? null, currentSlotTs: booking.startTs, weekendNote: weekendNoteFor(pricing), phone: phone, now: nowProp, classNames: timeClassNames, components: components, onPick: (slot) => {
                                     setPending(slot);
                                     setError(null);
                                     setView('move');
@@ -311,13 +316,15 @@ function Overview({ labels, format, booking, freeUntilTs, remaining, phone, icsH
     // The largest window that has already closed — the number the sentence below
     // quotes. Zero when both are open, and then it is not rendered.
     const blockedHours = Math.max(booking.canCancel ? 0 : booking.cancelWindowHours, booking.canReschedule ? 0 : booking.rescheduleWindowHours);
-    return (_jsxs(_Fragment, { children: [booking.canCancel && booking.canReschedule && (_jsxs("p", { className: "text-sm text-muted-foreground", children: [fillLabel(labels['manage.freeUntil'], { dateTime: format.clock.dateTime(freeUntilTs) }), remaining !== null && _jsxs("span", { children: [" (", remaining, ")"] })] })), _jsxs("div", { className: cn('flex flex-wrap items-center gap-4', actionsClassName), children: [booking.canReschedule ? (_jsx(BookingButton, { size: "lg", onClick: onChange, children: labels['manage.change'] })) : (_jsx(PhoneSentence, { format: format, phone: phone, children: fillLabel(labels['manage.callToChange'], { hours: booking.rescheduleWindowHours }) })), booking.canCancel ? (_jsx(BookingButton, { size: "lg", variant: "outline", onClick: onCancel, children: labels['manage.cancel'] })) : (_jsx(PhoneSentence, { format: format, phone: phone, children: fillLabel(labels['manage.callToCancel'], { hours: booking.cancelWindowHours }) })), icsHref !== null && (_jsx("a", { href: icsHref, download: icsFileName ?? true, className: LINK_CLASS, children: labels['manage.calendar'] }))] }), blockedHours > 0 && (_jsxs("p", { className: "rounded-lg border border-border bg-card px-5 py-4 text-sm", children: [fillLabel(labels['manage.blocked'], { hours: blockedHours }), ' ', phone ? (_jsxs(_Fragment, { children: [_jsx(PhoneSentence, { format: format, phone: phone, children: fillLabel(labels['manage.ringUsOn'], { phone }) }), labels['manage.blocked.suffix']] })) : (labels['manage.blocked.plain'])] }))] }));
+    return (_jsxs(_Fragment, { children: [booking.canCancel && booking.canReschedule && (_jsxs("p", { className: "text-sm text-muted-foreground", children: [renderLabel(labels['manage.freeUntil'], {
+                        dateTime: format.clock.dateTime(freeUntilTs),
+                    }), remaining !== null && _jsxs("span", { children: [" (", remaining, ")"] })] })), _jsxs("div", { className: cn('flex flex-wrap items-center gap-4', actionsClassName), children: [booking.canReschedule ? (_jsx(BookingButton, { size: "lg", onClick: onChange, children: labels['manage.change'] })) : (_jsx(PhoneSentence, { format: format, phone: phone, children: renderLabel(labels['manage.callToChange'], { hours: booking.rescheduleWindowHours }) })), booking.canCancel ? (_jsx(BookingButton, { size: "lg", variant: "outline", onClick: onCancel, children: labels['manage.cancel'] })) : (_jsx(PhoneSentence, { format: format, phone: phone, children: renderLabel(labels['manage.callToCancel'], { hours: booking.cancelWindowHours }) })), icsHref !== null && (_jsx("a", { href: icsHref, download: icsFileName ?? true, className: LINK_CLASS, children: labels['manage.calendar'] }))] }), blockedHours > 0 && (_jsxs("p", { className: "rounded-lg border border-border bg-card px-5 py-4 text-sm", children: [renderLabel(labels['manage.blocked'], { hours: blockedHours }), ' ', phone ? (_jsxs(_Fragment, { children: [_jsx(PhoneSentence, { format: format, phone: phone, children: renderLabel(labels['manage.ringUsOn'], { phone }) }), labels['manage.blocked.suffix']] })) : (labels['manage.blocked.plain'])] }))] }));
 }
 /** A booking no longer open to either action, saying which kind it is. */
 function ClosedBooking({ labels, format, status, bookingHref, phone, className, }) {
     const sentence = labels[CLOSED_SENTENCE[status] ?? 'manage.closed.pending'];
     return (_jsxs("div", { className: className, children: [_jsx("p", { className: "text-sm", children: sentence }), status === 'pending' ? (_jsx("p", { className: "text-sm", children: _jsx(PhoneSentence, { format: format, phone: phone, children: phone
-                        ? fillLabel(labels['manage.closed.pendingCall'], { phone })
+                        ? renderLabel(labels['manage.closed.pendingCall'], { phone })
                         : labels['manage.closed.pendingCallPlain'] }) })) : (_jsx("a", { href: bookingHref, className: LINK_CLASS, children: labels['manage.bookNew'] }))] }));
 }
 /**
@@ -327,8 +334,8 @@ 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'];
-    return (_jsxs("div", { className: className, children: [_jsx("h2", { className: "font-sans text-lg font-bold", children: fillLabel(labels['manage.party.heading'], { who }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx(BookingButton, { size: "lg", onClick: onJustThisOne, children: fillLabel(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']] })] }));
+    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']] })] }));
 }
 /**
  * The single confirm for a move. The weekend note appears only when the new
@@ -340,13 +347,13 @@ function ConfirmMove({ labels, format, booking, pricing, stylist, pending, busy,
     const nextOre = pricing ? pricing.priceAt(pending.startTs) : 0;
     const nowOre = pricing ? pricing.priceAt(booking.startTs) : 0;
     const dearer = pricing !== null && nextOre > nowOre;
-    const question = fillLabel(labels[stylist ? 'manage.move.questionWithStylist' : 'manage.move.question'], {
+    const question = renderLabel(labels[stylist ? 'manage.move.questionWithStylist' : 'manage.move.question'], {
         appointment: theirAppointment(labels, booking.bookedForName),
         from: `${clock.date(booking.startTs)} ${clock.formatTime(booking.startTs)}`,
         to: `${clock.date(pending.startTs)} ${clock.formatTime(pending.startTs)}`,
         stylist: stylist ?? '',
     });
-    return (_jsxs("div", { className: className, children: [_jsx("p", { className: "font-medium", children: question }), dearer && pricing && (_jsx("p", { className: "text-sm", children: fillLabel(labels['manage.move.surcharge'], {
+    return (_jsxs("div", { className: className, children: [_jsx("p", { className: "font-medium", children: question }), dearer && pricing && (_jsx("p", { className: "text-sm", children: renderLabel(labels['manage.move.surcharge'], {
                     weekday: clock.weekday(pending.startTs),
                     price: format.price(nextOre),
                     pct: pricing.weekendSurchargePct,
@@ -354,16 +361,17 @@ function ConfirmMove({ labels, format, booking, pricing, stylist, pending, busy,
 }
 /** The single confirm for a cancellation, with the reason asked and never required. */
 function ConfirmCancel({ labels, format, booking, reason, busy, onPickReason, onConfirm, onBack, className, }) {
-    return (_jsxs("div", { className: className, children: [_jsx("p", { className: "font-medium", children: fillLabel(labels['manage.cancel.question'], {
+    return (_jsxs("div", { className: className, children: [_jsx("p", { className: "font-medium", children: renderLabel(labels['manage.cancel.question'], {
                     appointment: theirAppointment(labels, booking.bookedForName),
                     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/age-confirm-card.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from 'react';
 import { Field } from '../../primitives/field.js';
+import { renderLabel } from '../internal/label-parts.js';
 import { BookingButton } from '../internal/ui.js';
-import { fillLabel } from '../labels.js';
 import { slotClass } from '../slots.js';
 export const AGE_CONFIRM_CARD_LABEL_KEYS = [
     'ageConfirm.heading',
@@ -35,8 +35,8 @@ export function AgeConfirmCard({ labels, name, birthYear, years, months, busy, e
     const [month, setMonth] = useState('');
     const headingId = `${id}-heading`;
     const errorId = `${id}-error`;
-    return (_jsxs("section", { "aria-labelledby": headingId, "aria-busy": busy || undefined, className: slotClass(classNames, 'root', 'space-y-3 rounded-lg border border-secondary/40 bg-secondary/10 px-5 py-4'), children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h3", { id: headingId, className: slotClass(classNames, 'heading', 'font-sans text-lg font-bold'), children: fillLabel(labels['ageConfirm.heading'], { name }) }), _jsx("p", { className: "text-sm text-muted-foreground", children: labels['ageConfirm.lead'] })] }), _jsxs("form", { onSubmit: (event) => {
+    return (_jsxs("section", { "aria-labelledby": headingId, "aria-busy": busy || undefined, className: slotClass(classNames, 'root', 'space-y-3 rounded-lg border border-secondary/40 bg-secondary/10 px-5 py-4'), children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h3", { id: headingId, className: slotClass(classNames, 'heading', 'font-sans text-lg font-bold'), children: renderLabel(labels['ageConfirm.heading'], { name }) }), _jsx("p", { className: "text-sm text-muted-foreground", children: labels['ageConfirm.lead'] })] }), _jsxs("form", { onSubmit: (event) => {
                     event.preventDefault();
                     onConfirm({ birthYear: year, birthMonth: month });
-                }, "aria-describedby": error ? errorId : undefined, className: slotClass(classNames, 'form', 'space-y-3'), children: [_jsxs("fieldset", { disabled: busy, className: "grid min-w-0 grid-cols-2 gap-3", children: [_jsx("legend", { className: "sr-only", children: fillLabel(labels['ageConfirm.legend'], { name }) }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-year`, children: labels['ageConfirm.birthYear'] }), _jsx("select", { id: `${id}-year`, value: year, onChange: (event) => setYear(event.target.value), className: SELECT_CLASS, children: years.map((option) => (_jsx("option", { value: String(option), children: option }, option))) })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-month`, children: labels['ageConfirm.birthMonth'] }), _jsxs("select", { id: `${id}-month`, value: month, onChange: (event) => setMonth(event.target.value), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['ageConfirm.birthMonthUnknown'] }), months.map((label, index) => (_jsx("option", { value: String(index + 1), children: label }, label)))] })] })] }), _jsxs("div", { className: slotClass(classNames, 'actions', 'flex flex-wrap items-center gap-3'), children: [_jsx(BookingButton, { type: "submit", size: "sm", disabled: busy, children: labels['ageConfirm.confirm'] }), _jsx(BookingButton, { type: "button", variant: "ghost", size: "sm", disabled: busy, onClick: onDismiss, children: labels['ageConfirm.dismiss'] }), _jsx("span", { "aria-live": "polite", className: "min-h-5 text-sm", children: error && _jsx(Field.Error, { id: errorId, children: error }) })] })] })] }));
+                }, "aria-describedby": error ? errorId : undefined, className: slotClass(classNames, 'form', 'space-y-3'), children: [_jsxs("fieldset", { disabled: busy, className: "grid min-w-0 grid-cols-2 gap-3", children: [_jsx("legend", { className: "sr-only", children: renderLabel(labels['ageConfirm.legend'], { name }) }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-year`, children: labels['ageConfirm.birthYear'] }), _jsx("select", { id: `${id}-year`, value: year, onChange: (event) => setYear(event.target.value), className: SELECT_CLASS, children: years.map((option) => (_jsx("option", { value: String(option), children: option }, option))) })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-month`, children: labels['ageConfirm.birthMonth'] }), _jsxs("select", { id: `${id}-month`, value: month, onChange: (event) => setMonth(event.target.value), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['ageConfirm.birthMonthUnknown'] }), months.map((label, index) => (_jsx("option", { value: String(index + 1), children: label }, label)))] })] })] }), _jsxs("div", { className: slotClass(classNames, 'actions', 'flex flex-wrap items-center gap-3'), children: [_jsx(BookingButton, { type: "submit", size: "sm", disabled: busy, children: labels['ageConfirm.confirm'] }), _jsx(BookingButton, { type: "button", variant: "ghost", size: "sm", disabled: busy, onClick: onDismiss, children: labels['ageConfirm.dismiss'] }), _jsx("span", { "aria-live": "polite", className: "min-h-5 text-sm", children: error && _jsx(Field.Error, { id: errorId, children: error }) })] })] })] }));
 }

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/child-cards.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowRight } from 'lucide-react';
 import { cn } from '../../lib/utils.js';
-import { fillLabel } from '../labels.js';
+import { renderLabel } from '../internal/label-parts.js';
 import { slotClass } from '../slots.js';
 export const CHILD_CARDS_LABEL_KEYS = [
     'childCards.empty',
@@ -20,11 +20,11 @@ const AVATAR_TINTS = ['bg-secondary/30', 'bg-primary/10', 'bg-accent'];
 function lastVisitLine(child, labels, format) {
     const age = format.ageLabel(child.ageRange);
     if (child.lastVisitTs === null)
-        return fillLabel(labels['childCards.neverVisited'], { age });
+        return renderLabel(labels['childCards.neverVisited'], { age });
     const date = format.clock.date(child.lastVisitTs);
     return child.serviceName
-        ? fillLabel(labels['childCards.lastVisit'], { age, service: child.serviceName, date })
-        : fillLabel(labels['childCards.lastVisitNoService'], { age, date });
+        ? renderLabel(labels['childCards.lastVisit'], { age, service: child.serviceName, date })
+        : renderLabel(labels['childCards.lastVisitNoService'], { age, date });
 }
 /**
  * «My children» — one card per child, and one tap to book them again. A plain
@@ -44,7 +44,7 @@ export function ChildCards({ kids, variant = 'full', hrefFor, onBook, empty, sty
 export function DefaultChildCard({ child, index, variant, href, onBook, stylistNames, labels, format, classNames, }) {
     return (_jsxs("li", { className: slotClass(classNames, 'card', 'flex gap-4 rounded-lg border border-border bg-card px-5 py-4', variant === 'full' ? 'flex-col' : 'items-center'), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("span", { "aria-hidden": "true", className: slotClass(classNames, 'avatar', 'flex size-11 shrink-0 items-center justify-center rounded-full font-sans text-lg font-bold', AVATAR_TINTS[index % AVATAR_TINTS.length]), children: child.name.trim().charAt(0).toUpperCase() }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: slotClass(classNames, 'name', 'block truncate font-semibold'), children: child.name }), _jsx("span", { className: slotClass(classNames, 'detail', 'block truncate text-sm text-muted-foreground'), children: lastVisitLine(child, labels, format) })] })] }), variant === 'full' && (_jsx(ChildDetails, { child: child, stylistNames: stylistNames, labels: labels, format: format, className: classNames?.details })), _jsxs("a", { href: href, onClick: onBook ? () => onBook(child) : undefined, className: slotClass(classNames, 'link', 'font-semibold text-primary underline underline-offset-4', variant === 'full'
                     ? 'inline-flex items-center gap-2 no-underline'
-                    : 'ms-auto shrink-0 text-sm'), children: [fillLabel(labels['childCards.book'], { name: child.name }), variant === 'full' && _jsx(ArrowRight, { "aria-hidden": "true", className: "size-4" })] })] }));
+                    : 'ms-auto shrink-0 text-sm'), children: [renderLabel(labels['childCards.book'], { name: child.name }), variant === 'full' && _jsx(ArrowRight, { "aria-hidden": "true", className: "size-4" })] })] }));
 }
 /**
  * The full card's two facts beyond the last visit: the usual stylist and the

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

@@ -3,8 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState, useTransition } from 'react';
 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 = [
@@ -50,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) {
@@ -58,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);
@@ -92,7 +93,7 @@ export function DataControls({ labels, onExport, onDelete, onSessionExpired, cla
                 setError(message);
         });
     }
-    return (_jsxs("section", { "aria-labelledby": "portal-data-heading", className: slotClass(classNames, 'root', 'space-y-4'), children: [_jsx("h2", { id: "portal-data-heading", className: slotClass(classNames, 'heading', 'font-sans text-xl font-bold md:text-2xl'), children: labels['dataControls.heading'] }), _jsxs("div", { className: slotClass(classNames, 'actions', 'flex flex-wrap items-center gap-3'), children: [_jsx(BookingButton, { variant: "outline", onClick: exportData, disabled: pending, children: labels['dataControls.export'] }), !confirming && (_jsx(BookingButton, { variant: "destructive", onClick: () => setConfirming(true), disabled: pending, children: labels['dataControls.delete'] }))] }), _jsx("div", { "aria-live": "polite", children: exportError && _jsx(Field.Error, { children: exportError }) }), confirming && (_jsxs("form", { onSubmit: deleteMe, "aria-labelledby": `${id}-delete-heading`, className: slotClass(classNames, 'confirm', 'space-y-4 rounded-lg border border-destructive/40 bg-destructive/10 px-5 py-4'), children: [_jsx("p", { id: `${id}-delete-heading`, className: "font-semibold", children: labels['dataControls.confirmHeading'] }), _jsx("p", { className: "text-sm", children: labels['dataControls.consequences'] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: confirmId, children: fillLabel(labels['dataControls.confirmLabel'], { word }) }), _jsx(Input, { id: confirmId, autoComplete: "off", autoCapitalize: "characters", value: typed, "aria-describedby": `${confirmId}-help${error ? ` ${errorId}` : ''}`, "aria-invalid": error ? true : undefined, onChange: (event) => {
+    return (_jsxs("section", { "aria-labelledby": "portal-data-heading", className: slotClass(classNames, 'root', 'space-y-4'), children: [_jsx("h2", { id: "portal-data-heading", className: slotClass(classNames, 'heading', 'font-sans text-xl font-bold md:text-2xl'), children: labels['dataControls.heading'] }), _jsxs("div", { className: slotClass(classNames, 'actions', 'flex flex-wrap items-center gap-3'), children: [_jsx(BookingButton, { variant: "outline", onClick: exportData, disabled: pending, children: labels['dataControls.export'] }), !confirming && (_jsx(BookingButton, { variant: "destructive", onClick: () => setConfirming(true), disabled: pending, children: labels['dataControls.delete'] }))] }), _jsx("div", { "aria-live": "polite", children: exportError && _jsx(Field.Error, { children: exportError }) }), confirming && (_jsxs("form", { onSubmit: deleteMe, "aria-labelledby": `${id}-delete-heading`, className: slotClass(classNames, 'confirm', 'space-y-4 rounded-lg border border-destructive/40 bg-destructive/10 px-5 py-4'), children: [_jsx("p", { id: `${id}-delete-heading`, className: "font-semibold", children: labels['dataControls.confirmHeading'] }), _jsx("p", { className: "text-sm", children: labels['dataControls.consequences'] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: confirmId, children: renderLabel(labels['dataControls.confirmLabel'], { word }) }), _jsx(Input, { id: confirmId, autoComplete: "off", autoCapitalize: "characters", value: typed, "aria-describedby": `${confirmId}-help${error ? ` ${errorId}` : ''}`, "aria-invalid": error ? true : undefined, onChange: (event) => {
                                     setTyped(event.target.value);
                                     setError(null);
                                 }, className: BOOKING_INPUT_CLASS }), _jsx(Field.Description, { id: `${confirmId}-help`, children: labels['dataControls.confirmHelp'] })] }), _jsx("div", { "aria-live": "polite", children: error && _jsx(Field.Error, { id: errorId, children: error }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(BookingButton, { type: "submit", variant: "destructive", disabled: pending, children: labels['dataControls.deleteForever'] }), _jsx(BookingButton, { variant: "ghost", disabled: pending, onClick: () => {

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