@medalsocial/meda 3.2.0 → 3.3.0

package/dist/booking/confirmation.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { joinLabelParts, renderLabel } from './internal/label-parts.js';
 import { BookingButton } from './internal/ui.js';
 import { fillLabel } from './labels.js';
 import { slotClass } from './slots.js';
@@ -50,24 +51,21 @@ export function Confirmation({ lines: rawLines, startTs, totalOre, address = nul
     }));
     const linkClass = slotClass(classNames, 'link', 'font-semibold text-primary underline underline-offset-4');
     const first = lines[0];
-    const singleCard = first ? (_jsx("p", { className: slotClass(classNames, 'card', 'rounded-lg border border-border bg-card px-5 py-4 font-medium'), children: [
+    const singleCard = first ? (_jsx("p", { className: slotClass(classNames, 'card', 'rounded-lg border border-border bg-card px-5 py-4 font-medium'), children: joinLabelParts([
             first.item.bookedForName
-                ? fillLabel(labels['confirmation.serviceFor'], {
+                ? renderLabel(labels['confirmation.serviceFor'], {
                     service: first.item.service.name,
                     name: first.item.bookedForName,
                 })
                 : first.item.service.name,
             first.stylistName,
-            fillLabel(labels['confirmation.when'], {
+            renderLabel(labels['confirmation.when'], {
                 day: clock.dayLabel(startTs, now),
                 time: clock.formatTime(startTs),
             }),
             // This line's own price, which for one person is the whole total.
             format.price(first.priceOre),
-        ]
-            // Filtered, not conditionally joined: an absent stylist closes the gap.
-            .filter((part) => Boolean(part))
-            .join(SEPARATOR) })) : null;
+        ], SEPARATOR) })) : null;
     return (_jsxs("section", { "aria-labelledby": "booking-confirmed-heading", className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h2", { id: "booking-confirmed-heading", tabIndex: -1, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: labels['confirmation.heading'] }), lines.length > 1 ? (_jsx(PartyCard, { lines: lines, totalOre: totalOre, now: now, format: format, labels: labels, classNames: classNames, PartyLine: components?.PartyLine ?? DefaultPartyLine })) : (singleCard), address && (_jsx("p", { className: slotClass(classNames, 'address', 'text-sm text-muted-foreground'), children: address })), _jsxs("div", { className: "flex flex-wrap gap-4", children: [calendarHref && (_jsx("a", { href: calendarHref, download: calendarFileName, className: linkClass, children: labels['confirmation.calendar'] })), lines.length === 1 && first?.manageHref && (_jsx("a", { href: first.manageHref, className: linkClass, children: labels['confirmation.manage'] }))] }), portalHref && (_jsx("p", { className: "text-sm", children: _jsx("a", { href: portalHref, className: linkClass, children: labels['confirmation.portal'] }) })), onStartOver && (_jsx("div", { children: _jsx(BookingButton, { variant: "outline", className: slotClass(classNames, 'startOver'), onClick: onStartOver, children: labels['confirmation.startOver'] }) }))] }));
 }
 /**
@@ -77,7 +75,9 @@ export function Confirmation({ lines: rawLines, startTs, totalOre, address = nul
 function PartyCard({ lines, totalOre, now, format, labels, classNames, PartyLine, }) {
     const { clock } = format;
     const firstStart = lines[0]?.startTs ?? 0;
-    return (_jsxs("div", { className: slotClass(classNames, 'partyCard', 'space-y-2 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "font-semibold", children: fillLabel(labels['confirmation.party.heading'], { day: clock.dayLabel(firstStart, now) }) }), _jsx("ul", { className: "space-y-1", children: lines.map((line, index) => {
+    return (_jsxs("div", { className: slotClass(classNames, 'partyCard', 'space-y-2 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "font-semibold", children: renderLabel(labels['confirmation.party.heading'], {
+                    day: clock.dayLabel(firstStart, now),
+                }) }), _jsx("ul", { className: "space-y-1", children: lines.map((line, index) => {
                     const time = clock.formatTime(line.startTs);
                     const text = fillLabel(labels['confirmation.party.line'], {
                         time,
@@ -98,5 +98,5 @@ function PartyCard({ lines, totalOre, now, format, labels, classNames, PartyLine
                             who: line.item.bookedForName ?? line.item.service.name,
                             time,
                         }), linkClassName: slotClass(classNames, 'link', 'text-sm font-semibold text-primary underline underline-offset-4') }, index));
-                }) }), _jsx("p", { className: "font-semibold", children: fillLabel(labels['confirmation.party.total'], { total: format.price(totalOre) }) })] }));
+                }) }), _jsx("p", { className: "font-semibold", children: renderLabel(labels['confirmation.party.total'], { total: format.price(totalOre) }) })] }));
 }

package/dist/booking/details-screen.js

@@ -5,6 +5,7 @@ import { Checkbox } from '../primitives/checkbox.js';
 import { Field } from '../primitives/field.js';
 import { Input } from '../primitives/input.js';
 import { Textarea } from '../primitives/textarea.js';
+import { renderLabel } from './internal/label-parts.js';
 import { BOOKING_CHECKBOX_CLASS, BOOKING_INPUT_CLASS, BOOKING_TEXTAREA_CLASS, BookingButton, } from './internal/ui.js';
 import { fillLabel } from './labels.js';
 import { slotClass } from './slots.js';
@@ -285,11 +286,11 @@ export function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phon
     }
     const inputClass = (...extra) => slotClass(classNames, 'input', BOOKING_INPUT_CLASS, ...extra);
     const fieldClass = slotClass(classNames, 'field');
-    return (_jsxs("section", { "aria-labelledby": "booking-details-heading", className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h2", { id: "booking-details-heading", tabIndex: -1, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: labels['details.heading'] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('phone'), children: labels['details.phone.label'] }), _jsxs("div", { className: "flex items-stretch", children: [phonePrefix && (_jsx("span", { id: field('phone-prefix'), className: "flex h-12 items-center rounded-l-[4px] border border-r-0 border-input bg-muted px-4 text-base text-muted-foreground", children: phonePrefix })), _jsx(Input, { id: field('phone'), ref: phoneRef, type: "tel", inputMode: "numeric", autoComplete: "tel-national", className: inputClass(phonePrefix ? 'rounded-l-none' : ''), value: state.contact.phone, "aria-describedby": phonePrefix ? field('phone-prefix') : undefined, "aria-invalid": showPhoneError || undefined, onFocus: () => setFocused('phone'), onBlur: () => setFocused(null), onChange: (event) => setContact('phone', event.target.value) })] }), showPhoneError && _jsx(Field.Error, { children: labels['details.phone.error'] })] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('name'), children: labels['details.name.label'] }), _jsx(Input, { id: field('name'), autoComplete: "name", className: inputClass(), value: state.contact.name, onChange: (event) => setContact('name', event.target.value) })] }), state.items.some((_, index) => isKnownChair(state, index)) && (_jsx("ul", { "aria-label": labels['details.known.label'], className: "space-y-1 text-sm", children: state.items.map((item, index) => isKnownChair(state, index) ? (_jsxs("li", { children: [_jsx("span", { className: "font-semibold", children: item.service.name }), ' ', fillLabel(labels['details.known.for'], { who: knownWho(state, index, labels) })] }, index)) : null) })), state.items.map((item, index) => 
+    return (_jsxs("section", { "aria-labelledby": "booking-details-heading", className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h2", { id: "booking-details-heading", tabIndex: -1, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: labels['details.heading'] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('phone'), children: labels['details.phone.label'] }), _jsxs("div", { className: "flex items-stretch", children: [phonePrefix && (_jsx("span", { id: field('phone-prefix'), className: "flex h-12 items-center rounded-l-[4px] border border-r-0 border-input bg-muted px-4 text-base text-muted-foreground", children: phonePrefix })), _jsx(Input, { id: field('phone'), ref: phoneRef, type: "tel", inputMode: "numeric", autoComplete: "tel-national", className: inputClass(phonePrefix ? 'rounded-l-none' : ''), value: state.contact.phone, "aria-describedby": phonePrefix ? field('phone-prefix') : undefined, "aria-invalid": showPhoneError || undefined, onFocus: () => setFocused('phone'), onBlur: () => setFocused(null), onChange: (event) => setContact('phone', event.target.value) })] }), showPhoneError && _jsx(Field.Error, { children: labels['details.phone.error'] })] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('name'), children: labels['details.name.label'] }), _jsx(Input, { id: field('name'), autoComplete: "name", className: inputClass(), value: state.contact.name, onChange: (event) => setContact('name', event.target.value) })] }), state.items.some((_, index) => isKnownChair(state, index)) && (_jsx("ul", { "aria-label": labels['details.known.label'], className: "space-y-1 text-sm", children: state.items.map((item, index) => isKnownChair(state, index) ? (_jsxs("li", { children: [_jsx("span", { className: "font-semibold", children: item.service.name }), ' ', renderLabel(labels['details.known.for'], { who: knownWho(state, index, labels) })] }, index)) : null) })), state.items.map((item, index) => 
             // A seat step 1 already named is not asked again: a second answer could disagree.
             isKnownChair(state, index) ? null : (_jsx(ChildFields
             // biome-ignore lint/suspicious/noArrayIndexKey: two lines can share a service; the index is the identity
-            , { legend: state.items.length > 1 ? item.service.name : null, nameId: field(`child-name-${index}`), yearId: field(`child-year-${index}`), value: childAt(index), family: family, labels: labels, classNames: classNames, FamilyChip: FamilyChip, onChange: (patch, personId) => setChild(index, patch, personId) }, index))), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('email'), children: labels['details.email.label'] }), _jsx(Input, { id: field('email'), ref: emailRef, type: "email", autoComplete: "email", className: inputClass(), value: state.contact.email, "aria-describedby": field('email-help'), "aria-invalid": showEmailError || undefined, onFocus: () => setFocused('email'), onBlur: () => setFocused(null), onChange: (event) => setContact('email', event.target.value) }), _jsx(Field.Description, { id: field('email-help'), children: labels['details.email.help'] }), showEmailError && _jsx(Field.Error, { children: labels['details.email.error'] })] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('notes'), children: labels['details.notes.label'] }), _jsx(Textarea, { id: field('notes'), rows: 3, className: slotClass(classNames, 'input', BOOKING_TEXTAREA_CLASS), placeholder: labels['details.notes.placeholder'], value: state.notes, onChange: (event) => onChange({ type: 'setNotes', value: event.target.value }) })] }), _jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: field('terms'), ref: termsRef, className: BOOKING_CHECKBOX_CLASS, checked: state.consentTerms, "aria-invalid": showTermsError || undefined, onCheckedChange: (accepted) => onChange({ type: 'setConsent', which: 'terms', accepted }) }), _jsx(Field.Label, { htmlFor: field('terms'), className: "cursor-pointer font-normal", children: labels['details.terms.text'] }), termsHref && (_jsx("a", { href: termsHref, className: "col-start-2 text-sm font-semibold text-primary underline underline-offset-4", children: labels['details.terms.link'] }))] }), marketingConsent && (_jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: field('marketing'), className: BOOKING_CHECKBOX_CLASS, checked: state.consentMarketing, onCheckedChange: (accepted) => onChange({ type: 'setConsent', which: 'marketing', accepted }) }), _jsx(Field.Label, { htmlFor: field('marketing'), className: "cursor-pointer font-normal", children: labels['details.marketing.text'] })] })), state.error && (_jsx(SubmitFailure, { error: state.error, phone: phone, format: format, labels: labels, className: slotClass(classNames, 'error', 'rounded-lg border border-destructive/40 bg-destructive/10 px-5 py-3 text-sm') })), _jsx(BookingButton, { size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: submitting, "aria-busy": submitting || undefined, onClick: handleSubmit, children: fillLabel(labels['details.submit'], { price }) })] }));
+            , { legend: state.items.length > 1 ? item.service.name : null, nameId: field(`child-name-${index}`), yearId: field(`child-year-${index}`), value: childAt(index), family: family, labels: labels, classNames: classNames, FamilyChip: FamilyChip, onChange: (patch, personId) => setChild(index, patch, personId) }, index))), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('email'), children: labels['details.email.label'] }), _jsx(Input, { id: field('email'), ref: emailRef, type: "email", autoComplete: "email", className: inputClass(), value: state.contact.email, "aria-describedby": field('email-help'), "aria-invalid": showEmailError || undefined, onFocus: () => setFocused('email'), onBlur: () => setFocused(null), onChange: (event) => setContact('email', event.target.value) }), _jsx(Field.Description, { id: field('email-help'), children: labels['details.email.help'] }), showEmailError && _jsx(Field.Error, { children: labels['details.email.error'] })] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('notes'), children: labels['details.notes.label'] }), _jsx(Textarea, { id: field('notes'), rows: 3, className: slotClass(classNames, 'input', BOOKING_TEXTAREA_CLASS), placeholder: labels['details.notes.placeholder'], value: state.notes, onChange: (event) => onChange({ type: 'setNotes', value: event.target.value }) })] }), _jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: field('terms'), ref: termsRef, className: BOOKING_CHECKBOX_CLASS, checked: state.consentTerms, "aria-invalid": showTermsError || undefined, onCheckedChange: (accepted) => onChange({ type: 'setConsent', which: 'terms', accepted }) }), _jsx(Field.Label, { htmlFor: field('terms'), className: "cursor-pointer font-normal", children: labels['details.terms.text'] }), termsHref && (_jsx("a", { href: termsHref, className: "col-start-2 text-sm font-semibold text-primary underline underline-offset-4", children: labels['details.terms.link'] }))] }), marketingConsent && (_jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: field('marketing'), className: BOOKING_CHECKBOX_CLASS, checked: state.consentMarketing, onCheckedChange: (accepted) => onChange({ type: 'setConsent', which: 'marketing', accepted }) }), _jsx(Field.Label, { htmlFor: field('marketing'), className: "cursor-pointer font-normal", children: labels['details.marketing.text'] })] })), state.error && (_jsx(SubmitFailure, { error: state.error, phone: phone, format: format, labels: labels, className: slotClass(classNames, 'error', 'rounded-lg border border-destructive/40 bg-destructive/10 px-5 py-3 text-sm') })), _jsx(BookingButton, { size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: submitting, "aria-busy": submitting || undefined, onClick: handleSubmit, children: renderLabel(labels['details.submit'], { price }) })] }));
 }
 /**
  * The name and birth year for one line. Wrapped in a fieldset only when there
@@ -309,6 +310,7 @@ function ChildFields({ legend, nameId, yearId, value, family, labels, classNames
  * visitor cannot fix by trying harder.
  */
 function SubmitFailure({ error, phone, format, labels, className, }) {
-    const call = phone ? fillLabel(labels['details.call.link'], { phone }) : null;
-    return (_jsxs("p", { role: "alert", className: className, children: [labels[DETAILS_ERROR_LABEL_KEYS[error]], ' ', phone && call ? (_jsx("a", { href: format.telHref(phone), "aria-label": call, className: "font-semibold text-primary underline underline-offset-4", children: call })) : (labels['details.call.none'])] }));
+    const template = labels['details.call.link'];
+    const call = phone ? fillLabel(template, { phone }) : null;
+    return (_jsxs("p", { role: "alert", className: className, children: [labels[DETAILS_ERROR_LABEL_KEYS[error]], ' ', phone && call ? (_jsx("a", { href: format.telHref(phone), "aria-label": call, className: "font-semibold text-primary underline underline-offset-4", children: renderLabel(template, { phone }) })) : (labels['details.call.none'])] }));
 }

package/dist/booking/index.d.ts

@@ -3,6 +3,7 @@ export * from './booking-skeleton.js';
 export * from './confirmation.js';
 export * from './details-screen.js';
 export type { BookingClock, BookingDaypart, BookingFormat } from './format.js';
+export { joinLabelParts, labelParts, renderLabel } from './internal/label-parts.js';
 export * from './internal/ui.js';
 export * from './label-keys.js';
 export { fillLabel } from './labels.js';

package/dist/booking/index.js

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

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

@@ -6,3 +6,23 @@ import { type ReactNode } from 'react';
  * placeholders are left as written.
  */
 export declare function labelParts(template: string, parts: Readonly<Record<string, ReactNode>>): ReactNode;
+/**
+ * A filled label as element children: the template split around its
+ * `{placeholders}`, so React renders one text node per literal run and one
+ * per value — the same DOM as writing the sentence out in JSX
+ * (`Total {total} · paid at the salon`). Prefer it over `fillLabel` wherever
+ * a label is rendered as children; a browser lays text out per text node, so
+ * one joined string can land a line's glyphs a sub-pixel away from the same
+ * sentence composed in JSX.
+ *
+ * Text-only targets (`aria-label`, `title`, a file name) keep `fillLabel`.
+ * Empty literal runs and empty values render nothing, as in JSX; a label
+ * that fills to nothing at all is `null`.
+ */
+export declare function renderLabel(template: string, values: Readonly<Record<string, string | number>>): ReactNode;
+/**
+ * `parts.filter(Boolean).join(separator)` as element children: every part
+ * and every separator its own text piece. Blank parts drop out, so an absent
+ * one closes the gap rather than leaving a doubled separator.
+ */
+export declare function joinLabelParts(parts: ReadonlyArray<ReactNode>, separator: string): ReactNode;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 /**
  * `fillLabel` for templates whose placeholders are elements (a link, a
@@ -17,3 +17,41 @@ export function labelParts(template, parts) {
         return piece;
     });
 }
+/**
+ * A filled label as element children: the template split around its
+ * `{placeholders}`, so React renders one text node per literal run and one
+ * per value — the same DOM as writing the sentence out in JSX
+ * (`Total {total} · paid at the salon`). Prefer it over `fillLabel` wherever
+ * a label is rendered as children; a browser lays text out per text node, so
+ * one joined string can land a line's glyphs a sub-pixel away from the same
+ * sentence composed in JSX.
+ *
+ * Text-only targets (`aria-label`, `title`, a file name) keep `fillLabel`.
+ * Empty literal runs and empty values render nothing, as in JSX; a label
+ * that fills to nothing at all is `null`.
+ */
+export function renderLabel(template, values) {
+    const pieces = template.split(/(\{\w+\})/g);
+    const nodes = [];
+    for (const piece of pieces) {
+        const match = /^\{(\w+)\}$/.exec(piece);
+        const value = match && Object.hasOwn(values, match[1]) ? values[match[1]] : piece;
+        if (value !== '')
+            nodes.push(value);
+    }
+    return nodes.length > 0 ? nodes : null;
+}
+/**
+ * `parts.filter(Boolean).join(separator)` as element children: every part
+ * and every separator its own text piece. Blank parts drop out, so an absent
+ * one closes the gap rather than leaving a doubled separator.
+ */
+export function joinLabelParts(parts, separator) {
+    return parts
+        .filter((part) => part !== null &&
+        part !== undefined &&
+        part !== false &&
+        part !== '' &&
+        !(Array.isArray(part) && part.length === 0))
+        .map((part, index) => (_jsxs(Fragment, { children: [index > 0 && separator, part] }, index)));
+}

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';
@@ -221,19 +221,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 === ''
                     ? 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/manage-screen.js

@@ -2,6 +2,7 @@
 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 { slotClass } from './slots.js';
@@ -271,14 +272,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 +288,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 +312,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'] }))] }));
 }
 /**
@@ -328,7 +331,7 @@ function ClosedBooking({ labels, format, status, bookingHref, phone, className,
  */
 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']] })] }));
+    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 +343,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,7 +357,7 @@ 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,

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.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.js

@@ -3,6 +3,7 @@ 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 { slotClass } from '../slots.js';
@@ -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/portal-unreachable.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { fillLabel } from '../labels.js';
+import { renderLabel } from '../internal/label-parts.js';
 import { slotClass } from '../slots.js';
 export const PORTAL_UNREACHABLE_LABEL_KEYS = [
     'portalUnreachable.heading',
@@ -15,5 +15,5 @@ export const PORTAL_UNREACHABLE_LABEL_KEYS = [
  */
 export function PortalUnreachable({ labels, format, phone, retryHref, logout, headingId = 'portal-unreachable-heading', classNames, }) {
     const link = slotClass(classNames, 'link', 'font-semibold text-primary underline underline-offset-4');
-    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h1", { id: headingId, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold md:text-3xl'), children: labels['portalUnreachable.heading'] }), _jsx("p", { className: "text-muted-foreground", children: labels['portalUnreachable.body'] }), _jsxs("div", { className: slotClass(classNames, 'actions', 'flex flex-wrap items-center gap-4'), children: [_jsx("a", { href: retryHref, className: link, children: labels['portalUnreachable.retry'] }), phone && (_jsx("a", { href: format.telHref(phone), className: link, children: fillLabel(labels['portalUnreachable.call'], { phone }) })), logout] })] }));
+    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h1", { id: headingId, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold md:text-3xl'), children: labels['portalUnreachable.heading'] }), _jsx("p", { className: "text-muted-foreground", children: labels['portalUnreachable.body'] }), _jsxs("div", { className: slotClass(classNames, 'actions', 'flex flex-wrap items-center gap-4'), children: [_jsx("a", { href: retryHref, className: link, children: labels['portalUnreachable.retry'] }), phone && (_jsx("a", { href: format.telHref(phone), className: link, children: renderLabel(labels['portalUnreachable.call'], { phone }) })), logout] })] }));
 }

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../lib/utils.js';
-import { labelParts } from '../internal/label-parts.js';
+import { joinLabelParts, labelParts, renderLabel } from '../internal/label-parts.js';
 import { bookingButtonClass } from '../internal/ui.js';
 import { fillLabel } from '../labels.js';
 import { slotClass } from '../slots.js';
@@ -36,22 +36,18 @@ function howFarOff(startTs, now, labels, format) {
 }
 /** What is booked and who for. */
 function whatLine(booking, labels) {
-    return [booking.serviceName ?? labels['upcoming.serviceFallback'], booking.bookedForName]
-        .filter(Boolean)
-        .join(SEPARATOR);
+    return joinLabelParts([booking.serviceName ?? labels['upcoming.serviceFallback'], booking.bookedForName], SEPARATOR);
 }
 /** When, with whom, and what it costs. */
 function whenLine(booking, now, labels, format) {
-    return [
-        fillLabel(labels['upcoming.when'], {
+    return joinLabelParts([
+        renderLabel(labels['upcoming.when'], {
             day: format.clock.dayLabel(booking.startTs, now),
             time: format.clock.formatTime(booking.startTs),
         }),
         booking.resourceName ?? labels['upcoming.anyStylist'],
         booking.amountOre === null ? null : format.price(booking.amountOre),
-    ]
-        .filter(Boolean)
-        .join(SEPARATOR);
+    ], SEPARATOR);
 }
 /**
  * «Upcoming appointments» — one card per appointment still ahead.
@@ -72,7 +68,7 @@ export function UpcomingBookings({ bookings, phone, labels, format, bookingHref,
 export function DefaultBookingCard({ booking, phone, now, hero, labels, format, classNames, }) {
     return (_jsxs("li", { className: cn('space-y-2 px-5 py-4', hero
             ? slotClass(classNames, 'cardHero', 'rounded-2xl bg-primary p-6 text-primary-foreground md:p-8')
-            : slotClass(classNames, 'card', 'rounded-lg border border-border bg-card')), children: [hero && (_jsxs("p", { className: slotClass(classNames, 'badge', 'inline-flex items-center gap-2 rounded-full bg-primary-foreground/15 px-3 py-1 text-xs font-bold'), children: [_jsx("span", { "aria-hidden": "true", className: "size-2 rounded-full bg-current" }), fillLabel(labels['upcoming.next'], {
+            : slotClass(classNames, 'card', 'rounded-lg border border-border bg-card')), children: [hero && (_jsxs("p", { className: slotClass(classNames, 'badge', 'inline-flex items-center gap-2 rounded-full bg-primary-foreground/15 px-3 py-1 text-xs font-bold'), children: [_jsx("span", { "aria-hidden": "true", className: "size-2 rounded-full bg-current" }), renderLabel(labels['upcoming.next'], {
                         when: howFarOff(booking.startTs, now, labels, format),
                     })] })), _jsx("p", { className: cn('font-semibold', hero && 'font-sans text-2xl md:text-3xl'), children: whatLine(booking, labels) }), _jsx("p", { className: cn('tabular-nums', hero && slotClass(classNames, 'heroMuted', 'text-primary-foreground/85')), children: whenLine(booking, now, labels, format) }), booking.managePath ? (_jsx("a", { href: booking.managePath, className: slotClass(classNames, 'manage', 'text-sm font-semibold underline underline-offset-4', hero
                     ? 'inline-block rounded-lg bg-background px-4 py-2 text-foreground no-underline'
@@ -80,7 +76,7 @@ export function DefaultBookingCard({ booking, phone, now, hero, labels, format,
                     ? slotClass(classNames, 'heroMuted', 'text-primary-foreground/85')
                     : 'text-muted-foreground'), children: phone
                     ? labelParts(labels['upcoming.noManageWithPhone'], {
-                        call: (_jsx("a", { href: format.telHref(phone), className: cn('font-semibold underline underline-offset-4', hero ? 'text-primary-foreground' : 'text-primary'), children: fillLabel(labels['upcoming.call'], { phone }) })),
+                        call: (_jsx("a", { href: format.telHref(phone), className: cn('font-semibold underline underline-offset-4', hero ? 'text-primary-foreground' : 'text-primary'), children: renderLabel(labels['upcoming.call'], { phone }) })),
                     })
                     : // No number on file: the sentence without a link, because a `tel:`
                         // that dials nothing fails in the hand of someone already stuck.

package/dist/booking/portal/visit-history.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from '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 VISIT_HISTORY_LABEL_KEYS = [
     'history.heading',
@@ -60,7 +60,7 @@ export function VisitHistory({ past, labels, format, years: yearsProp, headingId
                             return (_jsx("button", { type: "button", "aria-pressed": pressed, onClick: () => setSelected(year.year), className: cn(slotClass(classNames, 'yearChip', 'rounded-full border px-4 py-1.5 text-sm font-semibold transition-colors', pressed
                                     ? 'border-foreground bg-foreground text-background'
                                     : 'border-border hover:bg-muted'), pressed && classNames?.yearChipSelected), children: year.year }, year.year));
-                        }) })), _jsx("ul", { className: slotClass(classNames, 'list', 'divide-y divide-border border-y border-border'), children: shown.visits.map((visit) => (_jsx(Row, { visit: visit, labels: labels, format: format, classNames: classNames }, visit.bookingId))) }), _jsxs("p", { className: slotClass(classNames, 'total', 'flex flex-wrap items-baseline justify-between gap-3 rounded-lg bg-muted px-5 py-4'), children: [_jsx("span", { className: "font-semibold", children: fillLabel(labels[shown.visits.length === 1 ? 'history.count.one' : 'history.count.other'], { count: shown.visits.length, year: shown.year }) }), _jsx("span", { className: "font-sans text-lg font-bold tabular-nums", children: shown.totalOre === null
+                        }) })), _jsx("ul", { className: slotClass(classNames, 'list', 'divide-y divide-border border-y border-border'), children: shown.visits.map((visit) => (_jsx(Row, { visit: visit, labels: labels, format: format, classNames: classNames }, visit.bookingId))) }), _jsxs("p", { className: slotClass(classNames, 'total', 'flex flex-wrap items-baseline justify-between gap-3 rounded-lg bg-muted px-5 py-4'), children: [_jsx("span", { className: "font-semibold", children: renderLabel(labels[shown.visits.length === 1 ? 'history.count.one' : 'history.count.other'], { count: shown.visits.length, year: shown.year }) }), _jsx("span", { className: "font-sans text-lg font-bold tabular-nums", children: shown.totalOre === null
                                     ? labels['history.unknownAmount']
                                     : format.price(shown.totalOre) })] })] }))] }));
 }

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

@@ -17,8 +17,9 @@ export type ServiceScreenLabels = Record<(typeof SERVICE_SCREEN_LABEL_KEYS)[numb
  * - `pill` / `pillSelected` — a category pill / the marked one
  * - `groupHeading` — a category's (or a party member's) `<h3>`
  * - `card` / `cardSelected` — a service card / a pressed one (passed to `ServiceCard`)
+ * - `price` — a card's price (passed to `ServiceCard`, and the «same as last time» card's)
  */
-export type ServiceScreenSlot = 'root' | 'heading' | 'pill' | 'pillSelected' | 'groupHeading' | 'card' | 'cardSelected';
+export type ServiceScreenSlot = 'root' | 'heading' | 'pill' | 'pillSelected' | 'groupHeading' | 'card' | 'cardSelected' | 'price';
 /** One service group, in display order. */
 export interface ServiceScreenCategory {
     key: string;
@@ -56,6 +57,8 @@ export interface ServiceCardProps {
     labels: ServiceScreenLabels;
     className?: string;
     selectedClassName?: string;
+    /** Merged onto the price (the `price` slot). */
+    priceClassName?: string;
 }
 export interface ServiceScreenComponents {
     ServiceCard?: ComponentType<ServiceCardProps>;
@@ -134,4 +137,4 @@ export declare function ServiceScreen(props: ServiceScreenProps): import("react"
  *   online, and a tap target that accepts the tap and does nothing is the dead
  *   end the phone number replaces. The card stays so the catalogue is whole.
  */
-export declare function DefaultServiceCard({ service, kind, selected, onPick, phone, format, labels, className, selectedClassName, }: ServiceCardProps): import("react").JSX.Element;
+export declare function DefaultServiceCard({ service, kind, selected, onPick, phone, format, labels, className, selectedClassName, priceClassName, }: ServiceCardProps): import("react").JSX.Element;

package/dist/booking/service-screen.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { 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 { slotClass } from './slots.js';
@@ -57,6 +58,7 @@ function cardProps(shared) {
         labels: shared.labels,
         className: shared.classNames?.card,
         selectedClassName: shared.classNames?.cardSelected,
+        priceClassName: shared.classNames?.price,
     };
 }
 export function ServiceScreen(props) {
@@ -187,7 +189,7 @@ function PartyServiceScreen({ services, categories, categoryOf, childCategory, s
  */
 function NothingInThisParty({ person, labels, onRemove, }) {
     const values = { label: person.label };
-    return (_jsxs("div", { className: "space-y-2 rounded-lg border border-dashed border-border px-5 py-4 text-sm", children: [_jsx("p", { children: fillLabel(labels[person.adult ? 'service.party.adultAlone' : 'service.party.nothingFits'], values) }), onRemove && (_jsx("button", { type: "button", onClick: onRemove, className: "font-semibold text-primary underline underline-offset-4", children: fillLabel(labels['service.party.remove'], values) }))] }));
+    return (_jsxs("div", { className: "space-y-2 rounded-lg border border-dashed border-border px-5 py-4 text-sm", children: [_jsx("p", { children: renderLabel(labels[person.adult ? 'service.party.adultAlone' : 'service.party.nothingFits'], values) }), onRemove && (_jsx("button", { type: "button", onClick: onRemove, className: "font-semibold text-primary underline underline-offset-4", children: renderLabel(labels['service.party.remove'], values) }))] }));
 }
 /**
  * One person with a «same as last time»: the suggestion as the answer, and the
@@ -206,7 +208,7 @@ function SameAsLast({ suggestion, selected, onPick, shared, }) {
     const { labels, format, classNames } = shared;
     return (_jsxs("div", { className: "space-y-1", children: [_jsxs("button", { type: "button", "aria-pressed": selected, onClick: onPick, className: cn('flex min-h-14 w-full items-baseline justify-between gap-4 rounded-lg border px-5 py-4 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary', selected
                     ? 'border-primary bg-primary/5 ring-2 ring-primary'
-                    : 'border-primary/60 bg-card hover:border-primary', classNames?.card, selected && classNames?.cardSelected), children: [_jsxs("span", { children: [_jsx("span", { className: "block text-xs font-bold tracking-wide text-primary uppercase", children: labels['service.sameAsLast'] }), _jsx("span", { className: "font-medium", children: service.name })] }), _jsxs("span", { className: "flex items-baseline gap-4 text-right", children: [_jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: fillLabel(labels['service.duration'], { minutes: service.durationMinutes }) }), _jsx("span", { className: "whitespace-nowrap font-semibold text-foreground tabular-nums", children: format.price(service.priceOre) })] })] }), note && _jsx("p", { className: "text-sm text-muted-foreground", children: note })] }));
+                    : 'border-primary/60 bg-card hover:border-primary', classNames?.card, selected && classNames?.cardSelected), children: [_jsxs("span", { children: [_jsx("span", { className: "block text-xs font-bold tracking-wide text-primary uppercase", children: labels['service.sameAsLast'] }), _jsx("span", { className: "font-medium", children: service.name })] }), _jsxs("span", { className: "flex items-baseline gap-4 text-right", children: [_jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: renderLabel(labels['service.duration'], { minutes: service.durationMinutes }) }), _jsx("span", { className: slotClass(classNames, 'price', 'whitespace-nowrap font-semibold text-foreground tabular-nums'), children: format.price(service.priceOre) })] })] }), note && _jsx("p", { className: "text-sm text-muted-foreground", children: note })] }));
 }
 /**
  * The default service card.
@@ -218,9 +220,9 @@ function SameAsLast({ suggestion, selected, onPick, shared, }) {
  *   online, and a tap target that accepts the tap and does nothing is the dead
  *   end the phone number replaces. The card stays so the catalogue is whole.
  */
-export function DefaultServiceCard({ service, kind, selected, onPick, phone, format, labels, className, selectedClassName, }) {
-    const duration = fillLabel(labels['service.duration'], { minutes: service.durationMinutes });
-    const price = (_jsx("span", { className: "whitespace-nowrap font-semibold text-foreground tabular-nums", children: format.price(service.priceOre) }));
+export function DefaultServiceCard({ service, kind, selected, onPick, phone, format, labels, className, selectedClassName, priceClassName, }) {
+    const duration = renderLabel(labels['service.duration'], { minutes: service.durationMinutes });
+    const price = (_jsx("span", { className: cn('whitespace-nowrap font-semibold text-foreground tabular-nums', priceClassName), children: format.price(service.priceOre) }));
     if (kind === 'phone') {
         return (_jsxs("div", { className: cn('flex min-h-14 w-full items-baseline justify-between gap-4 rounded-lg border border-dashed border-border px-5 py-4', className), children: [_jsx("span", { className: "font-medium", children: service.name }), _jsxs("span", { className: "flex items-baseline gap-4 text-right", children: [_jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: duration }), _jsxs("span", { className: "text-sm", children: [labels['service.phoneOnly'], phone ? (_jsxs(_Fragment, { children: [' – ', _jsx("a", { href: format.telHref(phone), "aria-label": fillLabel(labels['service.phoneOnlyLinkLabel'], { phone }), className: "font-semibold text-primary underline underline-offset-4", children: phone })] })) : null] })] })] }));
     }

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

@@ -27,8 +27,9 @@ export type StylistScreenLabels = Record<(typeof STYLIST_SCREEN_LABEL_KEYS)[numb
  * - `group` — the radiogroup (the sideways row / the column)
  * - `card` / `cardSelected` — a stylist option / the checked one (passed to `StylistCard`)
  * - `modeCard` / `modeCardSelected` — a family's mode card / the pressed one
+ * - `nextAvailable` — a stylist option's next-opening line (passed to `StylistCard`)
  */
-export type StylistScreenSlot = 'root' | 'heading' | 'group' | 'card' | 'cardSelected' | 'modeCard' | 'modeCardSelected';
+export type StylistScreenSlot = 'root' | 'heading' | 'group' | 'card' | 'cardSelected' | 'modeCard' | 'modeCardSelected' | 'nextAvailable';
 /** One option of the radiogroup as the card draws it. */
 export interface StylistOption {
     /** `null` is «first available». */
@@ -55,6 +56,8 @@ export interface StylistCardProps {
     labels: StylistScreenLabels;
     className?: string;
     selectedClassName?: string;
+    /** Merged onto the next-opening line (the `nextAvailable` slot). */
+    nextAvailableClassName?: string;
 }
 export interface StylistScreenComponents {
     StylistCard?: ComponentType<StylistCardProps>;
@@ -102,6 +105,14 @@ export interface StylistScreenProps {
         mode: PartyMode;
         /** How many people, for the option labels. */
         size: number;
+        /**
+         * The size as the copy spells it (e.g. «two»), filled into `{sizeWord}`
+         * in `stylist.party.parallel.*` and `stylist.party.parallelNote.*`.
+         * Default: the number. Lets a pack keep the word as its own text piece
+         * (`'We find {sizeWord} stylists …'`) rather than writing it into the
+         * sentence.
+         */
+        sizeWord?: string;
         /** How long the visit is in each mode. */
         minutes: {
             sequential: number;
@@ -114,4 +125,4 @@ export interface StylistScreenProps {
 }
 export declare function StylistScreen({ labels, format, now, serviceIds, resources, selectedResourceId, nextAvailableTs, nextAvailableLoading, loading, skeletonCount, pendingName, notice, onPick, party, classNames, components, }: StylistScreenProps): import("react").JSX.Element;
 /** The default stylist option: avatar (photo or badge), name(s), bio, next opening. */
-export declare function DefaultStylistCard({ ref, option, selected, tabIndex, onClick, labels, className, selectedClassName, }: StylistCardProps): import("react").JSX.Element;
+export declare function DefaultStylistCard({ ref, option, selected, tabIndex, onClick, labels, className, selectedClassName, nextAvailableClassName, }: StylistCardProps): import("react").JSX.Element;

package/dist/booking/stylist-screen.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef } from 'react';
+import { useEffect, useId, useRef, } from 'react';
 import { cn } from '../lib/utils.js';
-import { fillLabel } from './labels.js';
+import { renderLabel } from './internal/label-parts.js';
 import { LiveStatus } from './live-status.js';
 import { slotClass } from './slots.js';
 /**
@@ -55,10 +55,13 @@ function firstName(displayName) {
 }
 /** Sizes the label packs write out in words; any other size reads `.other`. */
 const SIZE_WORDS = { 2: 'two', 3: 'three' };
-/** The size-specific label: `.two`, `.three`, else `.other` with `{count}`. */
-function bySize(labels, base, size) {
+/**
+ * The size-specific label: `.two`, `.three`, else `.other`, filled with
+ * `{count}` (the number) and `{sizeWord}` (`party.sizeWord`, else the number).
+ */
+function bySize(labels, base, size, sizeWord) {
     const suffix = SIZE_WORDS[size] ?? 'other';
-    return fillLabel(labels[`${base}.${suffix}`], { count: size });
+    return renderLabel(labels[`${base}.${suffix}`], { count: size, sizeWord: sizeWord ?? size });
 }
 export function StylistScreen({ labels, format, now, serviceIds, resources, selectedResourceId = null, nextAvailableTs, nextAvailableLoading = false, loading = false, skeletonCount = DEFAULT_SKELETON_COUNT, pendingName = null, notice = null, onPick, party, classNames, components, }) {
     // `every`, not `some`: the step asks one question for the whole visit, so a
@@ -103,11 +106,11 @@ export function StylistScreen({ labels, format, now, serviceIds, resources, sele
                 };
             })),
     ];
-    return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h2", { id: HEADING_ID, tabIndex: -1, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: labels['stylist.heading'] }), party && (_jsxs("fieldset", { className: "flex flex-col gap-2 sm:flex-row", children: [_jsx("legend", { className: "mb-2 font-sans text-lg font-bold", children: labels['stylist.party.legend'] }), _jsx(ModeCard, { selected: party.mode === 'sequential', onClick: () => party.onMode('sequential'), title: labels['stylist.party.sequential'], subtitle: fillLabel(labels['stylist.party.sequentialMinutes'], {
+    return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h2", { id: HEADING_ID, tabIndex: -1, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: labels['stylist.heading'] }), party && (_jsxs("fieldset", { className: "flex flex-col gap-2 sm:flex-row", children: [_jsx("legend", { className: "mb-2 font-sans text-lg font-bold", children: labels['stylist.party.legend'] }), _jsx(ModeCard, { selected: party.mode === 'sequential', onClick: () => party.onMode('sequential'), title: labels['stylist.party.sequential'], subtitle: renderLabel(labels['stylist.party.sequentialMinutes'], {
                             minutes: party.minutes.sequential,
-                        }), classNames: classNames }), _jsx(ModeCard, { selected: party.mode === 'parallel', onClick: () => party.onMode('parallel'), title: bySize(labels, 'stylist.party.parallel', party.size), subtitle: fillLabel(labels['stylist.party.parallelMinutes'], {
+                        }), classNames: classNames }), _jsx(ModeCard, { selected: party.mode === 'parallel', onClick: () => party.onMode('parallel'), title: bySize(labels, 'stylist.party.parallel', party.size, party.sizeWord), subtitle: renderLabel(labels['stylist.party.parallelMinutes'], {
                             minutes: party.minutes.parallel,
-                        }), classNames: classNames })] })), party?.mode === 'parallel' ? (_jsx("p", { className: "rounded-lg border border-border bg-card px-5 py-4 text-sm", children: bySize(labels, 'stylist.party.parallelNote', party.size) })) : (_jsx(StylistRadioGroup, { options: options, selectedResourceId: selectedResourceId, 
+                        }), classNames: classNames })] })), party?.mode === 'parallel' ? (_jsx("p", { className: "rounded-lg border border-border bg-card px-5 py-4 text-sm", children: bySize(labels, 'stylist.party.parallelNote', party.size, party.sizeWord) })) : (_jsx(StylistRadioGroup, { options: options, selectedResourceId: selectedResourceId, 
                 // The held option takes one placeholder's place, so the row is
                 // exactly as long as it was and nothing after it moves.
                 skeletons: loading ? Math.max(0, skeletonCount - (options.length - 1)) : 0, busy: loading, onPick: onPick, labels: labels, classNames: classNames, Card: components?.StylistCard ?? DefaultStylistCard })), _jsx(LiveStatus, { text: loading ? labels['stylist.loading'] : notice })] }));
@@ -174,7 +177,7 @@ function StylistRadioGroup({ options, selectedResourceId, skeletons, busy, onPic
         // box would otherwise clip. `md`: the column of cards.
         className: slotClass(classNames, 'group', 'relative -mx-1 flex h-36 snap-x snap-mandatory scroll-px-1 gap-1 overflow-x-auto overscroll-x-contain px-1 py-2', 'md:mx-0 md:h-auto md:snap-none md:flex-col md:gap-2 md:overflow-visible md:p-0'), children: [options.map((option, index) => (_jsx(Card, { ref: (node) => {
                     optionRefs.current[index] = node;
-                }, option: option, selected: option.resourceId === selectedResourceId, tabIndex: index === tabStop ? 0 : -1, onClick: () => onPick(option.resourceId), labels: labels, className: classNames?.card, selectedClassName: classNames?.cardSelected }, option.resourceId ?? 'first-available'))), Array.from({ length: skeletons }, (_, index) => (_jsx(SkeletonCard, {}, index)))] }));
+                }, option: option, selected: option.resourceId === selectedResourceId, tabIndex: index === tabStop ? 0 : -1, onClick: () => onPick(option.resourceId), labels: labels, className: classNames?.card, selectedClassName: classNames?.cardSelected, nextAvailableClassName: classNames?.nextAvailable }, option.resourceId ?? 'first-available'))), Array.from({ length: skeletons }, (_, index) => (_jsx(SkeletonCard, {}, index)))] }));
 }
 /** The restored stylist's stand-in: a real, checked radio of the final size,
  * with its next-opening row pulsing like every card still waiting for one. */
@@ -204,7 +207,7 @@ function ModeCard({ selected, onClick, title, subtitle, classNames, }) {
             : 'border-border bg-card hover:border-primary', classNames?.modeCard, selected && classNames?.modeCardSelected), children: [_jsx("span", { className: "font-medium", children: title }), _jsx("span", { className: "text-sm font-normal text-muted-foreground tabular-nums", children: subtitle })] }));
 }
 /** The default stylist option: avatar (photo or badge), name(s), bio, next opening. */
-export function DefaultStylistCard({ ref, option, selected, tabIndex, onClick, labels, className, selectedClassName, }) {
+export function DefaultStylistCard({ ref, option, selected, tabIndex, onClick, labels, className, selectedClassName, nextAvailableClassName, }) {
     const id = useId();
     const nameId = `${id}-name`;
     const nextId = `${id}-next`;
@@ -218,7 +221,7 @@ export function DefaultStylistCard({ ref, option, selected, tabIndex, onClick, l
             ? 'font-semibold md:border-primary md:bg-primary/10 md:ring-2 md:ring-primary'
             : 'md:border-border md:bg-card md:hover:border-primary', className, selected && selectedClassName), children: [_jsx("span", { "aria-hidden": "true", "data-testid": "stylist-avatar", className: cn('flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-full bg-secondary/30 font-semibold md:size-12', selected
                     ? 'ring-2 ring-primary ring-offset-2 ring-offset-background md:ring-0 md:ring-offset-0'
-                    : 'ring-1 ring-border md:ring-0'), children: photoUrl ? (_jsx("img", { src: photoUrl, alt: "", className: "size-full object-cover", width: 56, height: 56, loading: "lazy", decoding: "async" })) : (badge) }), _jsxs("span", { className: "flex w-full min-w-0 flex-col md:w-auto", children: [_jsx("span", { "aria-hidden": "true", className: "h-5 truncate text-sm font-medium md:hidden", children: option.shortName }), _jsx("span", { id: nameId, className: "hidden truncate font-medium md:block", children: name }), subtitle && (_jsx("span", { id: bioId, className: "hidden truncate text-sm text-muted-foreground md:block", children: subtitle })), availability ? (_jsxs("span", { id: nextId, "data-testid": "next-available-row", className: "line-clamp-2 h-8 text-xs leading-4 text-foreground tabular-nums md:line-clamp-1 md:h-5 md:text-sm md:leading-5", children: [_jsx("span", { className: "sr-only md:not-sr-only", children: labels['stylist.nextAvailable'] }), ' ', availability] })) : (reserveAvailability && (_jsx("span", { "data-testid": "next-available-row", "aria-hidden": "true", className: "flex h-8 justify-center pt-1 md:block md:h-5 md:py-1", children: availabilityLoading && (_jsx("span", { className: "block h-3 w-16 animate-pulse rounded bg-muted md:w-36" })) })))] })] }));
+                    : 'ring-1 ring-border md:ring-0'), children: photoUrl ? (_jsx("img", { src: photoUrl, alt: "", className: "size-full object-cover", width: 56, height: 56, loading: "lazy", decoding: "async" })) : (badge) }), _jsxs("span", { className: "flex w-full min-w-0 flex-col md:w-auto", children: [_jsx("span", { "aria-hidden": "true", className: "h-5 truncate text-sm font-medium md:hidden", children: option.shortName }), _jsx("span", { id: nameId, className: "hidden truncate font-medium md:block", children: name }), subtitle && (_jsx("span", { id: bioId, className: "hidden truncate text-sm text-muted-foreground md:block", children: subtitle })), availability ? (_jsxs("span", { id: nextId, "data-testid": "next-available-row", className: cn('line-clamp-2 h-8 text-xs leading-4 text-foreground tabular-nums md:line-clamp-1 md:h-5 md:text-sm md:leading-5', nextAvailableClassName), children: [_jsx("span", { className: "sr-only md:not-sr-only", children: labels['stylist.nextAvailable'] }), ' ', availability] })) : (reserveAvailability && (_jsx("span", { "data-testid": "next-available-row", "aria-hidden": "true", className: "flex h-8 justify-center pt-1 md:block md:h-5 md:py-1", children: availabilityLoading && (_jsx("span", { className: "block h-3 w-16 animate-pulse rounded bg-muted md:w-36" })) })))] })] }));
 }
 /** A stylist option before there is a stylist: the same box, the same circle, at both widths. */
 function SkeletonCard() {

package/dist/booking/time-screen.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { cn } from '../lib/utils.js';
+import { renderLabel } from './internal/label-parts.js';
 import { BookingButton, bookingButtonClass } from './internal/ui.js';
 import { fillLabel } from './labels.js';
 import { LiveStatus } from './live-status.js';
@@ -155,8 +156,8 @@ function offeredSlots(slots, party) {
 function weekendSentence(labels, format, note) {
     const price = format.price(note.priceOre);
     return note.pct === null
-        ? fillLabel(labels['time.weekend.mixed'], { price })
-        : fillLabel(labels['time.weekend.pct'], { pct: note.pct, price });
+        ? renderLabel(labels['time.weekend.mixed'], { price })
+        : renderLabel(labels['time.weekend.pct'], { pct: note.pct, price });
 }
 // Month grid — pure calendar arithmetic over the business-local date, so a
 // viewer in another zone is never shown a grid built around the wrong day.
@@ -317,7 +318,7 @@ function MonthCalendar({ labels, clock, open, onToggle, monthTs, onMonth, strip,
     const { year, month, day: anchorDay } = ymd(clock, monthTs);
     const firstOfMonth = clock.dayStart(monthTs, 1 - anchorDay);
     const monthName = clock.monthName(month);
-    const heading = fillLabel(labels['time.month.heading'], {
+    const heading = renderLabel(labels['time.month.heading'], {
         month: `${monthName.charAt(0).toUpperCase()}${monthName.slice(1)}`,
         year,
     });
@@ -380,7 +381,7 @@ function DaypartSections({ labels, clock, dayparts, daySlots, nearest, currentSl
 function ParallelInstead({ labels, clock, slot, day, now, size, onAccept, className, }) {
     const time = clock.formatTime(slot.startTs);
     const offer = size === 2 ? labels['time.parallel.offer.two'] : labels['time.parallel.offer.other'];
-    return (_jsxs("div", { className: cn('space-y-3 rounded-lg border border-primary/40 bg-primary/5 px-5 py-4', className), children: [_jsx("p", { className: "text-sm", children: fillLabel(offer, { day: clock.dayLabel(day, now), time }) }), _jsx(BookingButton, { size: "lg", onClick: onAccept, className: "tabular-nums", children: fillLabel(labels['time.parallel.accept'], { time }) })] }));
+    return (_jsxs("div", { className: cn('space-y-3 rounded-lg border border-primary/40 bg-primary/5 px-5 py-4', className), children: [_jsx("p", { className: "text-sm", children: renderLabel(offer, { day: clock.dayLabel(day, now), time }) }), _jsx(BookingButton, { size: "lg", onClick: onAccept, className: "tabular-nums", children: renderLabel(labels['time.parallel.accept'], { time }) })] }));
 }
 /**
  * A day with nothing left, in four different situations:
@@ -395,17 +396,17 @@ function NothingFreeCard({ labels, format, day, now, phone, standing, stylistNam
     const dayLabel = format.clock.dayLabel(day, now);
     const cardClass = cn('rounded-lg border border-border bg-card px-5 py-4 text-sm', className);
     if (standing === 'closed' || standing === 'over') {
-        return (_jsx("p", { className: cardClass, children: fillLabel(labels[standing === 'closed' ? 'time.empty.closed' : 'time.empty.over'], {
+        return (_jsx("p", { className: cardClass, children: renderLabel(labels[standing === 'closed' ? 'time.empty.closed' : 'time.empty.over'], {
                 day: dayLabel,
             }) }));
     }
-    let lead = fillLabel(labels['time.empty.unknown'], { day: dayLabel });
+    let lead = renderLabel(labels['time.empty.unknown'], { day: dayLabel });
     if (standing === 'open') {
         lead = stylistName
-            ? fillLabel(labels['time.empty.stylist'], { stylist: stylistName, day: dayLabel })
-            : fillLabel(labels['time.empty.full'], { day: dayLabel });
+            ? renderLabel(labels['time.empty.stylist'], { stylist: stylistName, day: dayLabel })
+            : renderLabel(labels['time.empty.full'], { day: dayLabel });
     }
-    return (_jsxs("p", { className: cardClass, children: [lead, ' ', phone ? (_jsxs(_Fragment, { children: [_jsx("a", { href: format.telHref(phone), "aria-label": fillLabel(labels['time.empty.callLinkAria'], { phone }), className: "font-semibold text-primary underline underline-offset-4", children: fillLabel(labels['time.empty.callLink'], { phone }) }), labels['time.empty.callSuffix']] })) : (labels['time.empty.callPlain'])] }));
+    return (_jsxs("p", { className: cardClass, children: [lead, ' ', phone ? (_jsxs(_Fragment, { children: [_jsx("a", { href: format.telHref(phone), "aria-label": fillLabel(labels['time.empty.callLinkAria'], { phone }), className: "font-semibold text-primary underline underline-offset-4", children: renderLabel(labels['time.empty.callLink'], { phone }) }), labels['time.empty.callSuffix']] })) : (labels['time.empty.callPlain'])] }));
 }
 /**
  * Today's remaining gaps sit inside the business's lead time, so they are never

package/dist/booking/who-screen.js

@@ -4,7 +4,7 @@ import { Check } from 'lucide-react';
 import { useRef } from 'react';
 import { cn } from '../lib/utils.js';
 import { ADD_CHILD_SHEET_LABEL_KEYS, AddChildSheet, } from './add-child-sheet.js';
-import { fillLabel } from './labels.js';
+import { renderLabel } from './internal/label-parts.js';
 import { slotClass } from './slots.js';
 /**
  * The first step — who is the visit for?
@@ -67,7 +67,7 @@ function choiceLabel(choice, labels) {
         return labels['who.guest.adult'];
     }
     const count = choice.people.length;
-    return fillLabel(labels[count === 1 ? 'who.guest.children.one' : 'who.guest.children.other'], {
+    return renderLabel(labels[count === 1 ? 'who.guest.children.one' : 'who.guest.children.other'], {
         count,
     });
 }
@@ -104,10 +104,10 @@ export function WhoScreen({ labels, format, people, family, guestChoices, addedC
             return;
         onChoose([...seated, person], false);
     }
-    return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [heading, _jsxs("fieldset", { className: "space-y-4", children: [_jsx("legend", { className: "mb-2 text-sm text-muted-foreground", children: fillLabel(labels['who.family.legend'], { max: maxPeople }) }), _jsxs("ul", { className: "space-y-2", children: [family.map((entry, index) => {
+    return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [heading, _jsxs("fieldset", { className: "space-y-4", children: [_jsx("legend", { className: "mb-2 text-sm text-muted-foreground", children: renderLabel(labels['who.family.legend'], { max: maxPeople }) }), _jsxs("ul", { className: "space-y-2", children: [family.map((entry, index) => {
                                 const selected = chosen.has(entry.person.key);
                                 return (_jsx("li", { children: _jsx(PersonCard, { name: entry.person.name ?? '', line: entry.line, index: index, selected: selected, disabled: !selected && full, describedBy: !selected && full ? LIMIT_ID : undefined, onToggle: () => toggle(entry.person), ...cardClasses }) }, entry.person.key));
-                            }), _jsx("li", { children: sheet(full, true) })] }), _jsxs(CheckRow, { checked: selfChecked, disabled: !selfChecked && full, describedBy: !selfChecked && full ? LIMIT_ID : undefined, onToggle: () => toggle(self), className: cn('h-14 justify-between px-5 text-sm', classNames?.card), selectedClassName: classNames?.cardSelected, children: [_jsx("span", { className: "font-medium", children: labels['who.family.self'] }), _jsx(CheckCircle, { checked: selfChecked })] }), _jsx("p", { id: LIMIT_ID, "aria-live": "polite", className: slotClass(classNames, 'limit', 'min-h-5 text-sm text-muted-foreground'), children: full ? fillLabel(labels['who.family.limit'], { max: maxPeople }) : '' })] })] }));
+                            }), _jsx("li", { children: sheet(full, true) })] }), _jsxs(CheckRow, { checked: selfChecked, disabled: !selfChecked && full, describedBy: !selfChecked && full ? LIMIT_ID : undefined, onToggle: () => toggle(self), className: cn('h-14 justify-between px-5 text-sm', classNames?.card), selectedClassName: classNames?.cardSelected, children: [_jsx("span", { className: "font-medium", children: labels['who.family.self'] }), _jsx(CheckCircle, { checked: selfChecked })] }), _jsx("p", { id: LIMIT_ID, "aria-live": "polite", className: slotClass(classNames, 'limit', 'min-h-5 text-sm text-muted-foreground'), children: full ? renderLabel(labels['who.family.limit'], { max: maxPeople }) : '' })] })] }));
 }
 /**
  * The guest chips as a radio group. Roving focus: one chip is in the tab

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -201,13 +201,13 @@
     }
   },
   "dependencies": {
-    "@base-ui/react": "1.8.0",
-    "class-variance-authority": "0.7.1",
-    "clsx": "2.1.1",
-    "cmdk": "1.1.1",
-    "react-resizable-panels": "4.13.1",
-    "tailwind-merge": "3.7.0",
-    "vaul": "1.1.2"
+    "@base-ui/react": "^1.7.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "react-resizable-panels": "^4.13.1",
+    "tailwind-merge": "^3.6.0",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@biomejs/biome": "2.5.14",