@medalsocial/meda 3.2.0 → 3.4.0

package/dist/booking/stylist-screen.js

@@ -1,8 +1,9 @@
 '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 { labelText } from './labels.js';
 import { LiveStatus } from './live-status.js';
 import { slotClass } from './slots.js';
 /**
@@ -55,10 +56,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
@@ -80,10 +84,10 @@ export function StylistScreen({ labels, format, now, serviceIds, resources, sele
     const options = [
         {
             resourceId: null,
-            name: labels['stylist.firstAvailable'],
-            shortName: labels['stylist.firstAvailable'],
-            subtitle: labels['stylist.firstAvailableSubtitle'],
-            badge: labels['stylist.firstAvailableBadge'],
+            name: labelText(labels['stylist.firstAvailable']),
+            shortName: labelText(labels['stylist.firstAvailable']),
+            subtitle: labelText(labels['stylist.firstAvailableSubtitle']),
+            badge: labelText(labels['stylist.firstAvailableBadge']),
         },
         ...(loading
             ? held
@@ -103,14 +107,14 @@ 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 })] }));
+                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 ? labelText(labels['stylist.loading']) : notice })] }));
 }
 /**
  * The options as one radiogroup with a roving tab stop.
@@ -174,13 +178,13 @@ 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. */
 function pendingOption(resourceId, pendingName, labels, format) {
     const known = pendingName?.trim() ? pendingName.trim() : null;
-    const name = known ?? labels['stylist.pendingName'];
+    const name = known ?? labelText(labels['stylist.pendingName']);
     return {
         resourceId,
         name,
@@ -204,7 +208,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 +222,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/summary-bar.d.ts

@@ -1,3 +1,4 @@
+import type { BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { WizardStep } from './types.js';
 /**
@@ -9,7 +10,7 @@ import type { WizardStep } from './types.js';
  * wizard it summarises.
  */
 export declare const SUMMARY_BAR_LABEL_KEYS: readonly ["summary.placeholder.who", "summary.placeholder.service", "summary.next"];
-export type SummaryBarLabels = Record<(typeof SUMMARY_BAR_LABEL_KEYS)[number], string>;
+export type SummaryBarLabels = Record<(typeof SUMMARY_BAR_LABEL_KEYS)[number], BookingLabel>;
 /** `root` the bar, `line` the summary sentence, `next` the button. */
 export type SummaryBarSlot = 'root' | 'line' | 'next';
 export interface SummaryBarProps {

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

@@ -1,5 +1,6 @@
 import { type ComponentType } from 'react';
 import type { BookingDaypart, BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingDayDto, BookingSlotDto, PartySlot, WizardItem } from './types.js';
 /**
@@ -26,7 +27,7 @@ export declare const TIME_SCREEN_LABEL_KEYS: readonly ["time.heading", "time.day
  *   finishes (end them with the dash); `closed` and `over` are whole sentences.
  * - `time.empty.callLink|callLinkAria` `{phone}`
  */
-export type TimeScreenLabels = Record<(typeof TIME_SCREEN_LABEL_KEYS)[number], string>;
+export type TimeScreenLabels = Record<(typeof TIME_SCREEN_LABEL_KEYS)[number], BookingLabel>;
 /**
  * `classNames` slots:
  * - `root` the section · `heading` the h2

package/dist/booking/time-screen.js

@@ -3,8 +3,9 @@ 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 { fillLabel, labelText } from './labels.js';
 import { LiveStatus } from './live-status.js';
 import { slotClass } from './slots.js';
 /**
@@ -129,7 +130,7 @@ function partyChipLabel(labels, clock, slot, party) {
     });
     return fillLabel(labels['time.party.parallel'], {
         time: clock.formatTime(slot.startTs),
-        seats: seats.join(labels['time.party.seatSeparator']),
+        seats: seats.join(labelText(labels['time.party.seatSeparator'])),
     });
 }
 /**
@@ -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.
@@ -282,7 +283,7 @@ export function TakenToast({ labels, takenSlotTs, className }) {
     }, [takenSlotTs]);
     return (_jsx("div", { role: "status", "aria-live": "polite", className: shown
             ? cn('fixed inset-x-4 bottom-24 z-50 mx-auto flex max-w-md items-center gap-3 rounded-lg border border-secondary/40 bg-background px-5 py-3 text-sm shadow-lg', className)
-            : 'sr-only', children: shown && (_jsxs(_Fragment, { children: [_jsx("p", { className: "flex-1", children: labels['time.taken.message'] }), _jsx("button", { type: "button", "aria-label": labels['time.taken.close'], onClick: () => setShown(false), className: "flex size-8 shrink-0 items-center justify-center rounded-full hover:bg-muted", children: _jsx(X, { "aria-hidden": "true", className: "size-4" }) })] })) }));
+            : 'sr-only', children: shown && (_jsxs(_Fragment, { children: [_jsx("p", { className: "flex-1", children: labels['time.taken.message'] }), _jsx("button", { type: "button", "aria-label": labelText(labels['time.taken.close']), onClick: () => setShown(false), className: "flex size-8 shrink-0 items-center justify-center rounded-full hover:bg-muted", children: _jsx(X, { "aria-hidden": "true", className: "size-4" }) })] })) }));
 }
 /**
  * The time step before its openings are in: the same heading, a strip of day
@@ -300,7 +301,7 @@ export function TimeScreenSkeleton({ labels, days = 7, monthView = false, surcha
         size: 'lg',
         className: 'min-w-20 animate-pulse border-border bg-muted text-transparent',
     });
-    return (_jsxs("section", { "aria-labelledby": "booking-time-heading", className: cn('space-y-6', className), children: [_jsx(TimeHeading, { labels: labels }), _jsx(LiveStatus, { text: labels['time.loading'] }), _jsxs("div", { "aria-hidden": "true", className: "space-y-6", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: days }, (_, index) => (_jsx("span", { "data-testid": "day-chip-skeleton", className: dayChip, children: labels['time.skeleton.dayPlaceholder'] }, index))) }), monthView && _jsx("span", { className: "block h-8 w-36 animate-pulse rounded bg-muted" }), surchargeRow && _jsx("span", { "data-testid": "surcharge-row-skeleton", className: "block min-h-5" }), _jsxs("div", { className: "space-y-3", children: [_jsx("span", { className: "block h-7 w-32 animate-pulse rounded bg-muted" }), _jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: 8 }, (_, index) => (_jsx("span", { "data-testid": "slot-skeleton", className: slotChip, children: "00:00" }, index))) })] })] })] }));
+    return (_jsxs("section", { "aria-labelledby": "booking-time-heading", className: cn('space-y-6', className), children: [_jsx(TimeHeading, { labels: labels }), _jsx(LiveStatus, { text: labelText(labels['time.loading']) }), _jsxs("div", { "aria-hidden": "true", className: "space-y-6", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: days }, (_, index) => (_jsx("span", { "data-testid": "day-chip-skeleton", className: dayChip, children: labels['time.skeleton.dayPlaceholder'] }, index))) }), monthView && _jsx("span", { className: "block h-8 w-36 animate-pulse rounded bg-muted" }), surchargeRow && _jsx("span", { "data-testid": "surcharge-row-skeleton", className: "block min-h-5" }), _jsxs("div", { className: "space-y-3", children: [_jsx("span", { className: "block h-7 w-32 animate-pulse rounded bg-muted" }), _jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: 8 }, (_, index) => (_jsx("span", { "data-testid": "slot-skeleton", className: slotChip, children: "00:00" }, index))) })] })] })] }));
 }
 // ---------------------------------------------------------------------------
 // Month view
@@ -317,12 +318,12 @@ 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,
     });
     const selectedKey = clock.dayKey(selectedDay);
-    return (_jsxs("div", { className: slotClass(classNames, 'month', 'space-y-3'), children: [_jsxs(BookingButton, { variant: "link", size: "sm", "aria-expanded": open, onClick: onToggle, className: "px-0", children: [open ? labels['time.month.hide'] : labels['time.month.show'], open ? (_jsx(ChevronUp, { "aria-hidden": "true", className: "size-4" })) : (_jsx(ChevronDown, { "aria-hidden": "true", className: "size-4" }))] }), open && (_jsxs("div", { className: "space-y-3 rounded-lg border border-border bg-card px-4 py-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(BookingButton, { variant: "outline", size: "icon", "aria-label": labels['time.month.previous'], onClick: () => onMonth(clock.dayStart(firstOfMonth, -1)), className: "rounded-full", children: _jsx(ChevronLeft, { "aria-hidden": "true", className: "size-4" }) }), _jsx("p", { "aria-live": "polite", className: "font-sans font-bold", children: heading }), _jsx(BookingButton, { variant: "outline", size: "icon", "aria-label": labels['time.month.next'], onClick: () => onMonth(clock.dayStart(firstOfMonth, daysInMonth(year, month))), className: "rounded-full", children: _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4" }) })] }), _jsx("div", { "aria-hidden": "true", className: "grid grid-cols-7 gap-1 text-center", children: clock.weekdayHeads().map((head, index) => (_jsx("span", { className: "text-xs font-bold text-muted-foreground", children: head }, index))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: cells.map((cell, index) => {
+    return (_jsxs("div", { className: slotClass(classNames, 'month', 'space-y-3'), children: [_jsxs(BookingButton, { variant: "link", size: "sm", "aria-expanded": open, onClick: onToggle, className: "px-0", children: [open ? labels['time.month.hide'] : labels['time.month.show'], open ? (_jsx(ChevronUp, { "aria-hidden": "true", className: "size-4" })) : (_jsx(ChevronDown, { "aria-hidden": "true", className: "size-4" }))] }), open && (_jsxs("div", { className: "space-y-3 rounded-lg border border-border bg-card px-4 py-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(BookingButton, { variant: "outline", size: "icon", "aria-label": labelText(labels['time.month.previous']), onClick: () => onMonth(clock.dayStart(firstOfMonth, -1)), className: "rounded-full", children: _jsx(ChevronLeft, { "aria-hidden": "true", className: "size-4" }) }), _jsx("p", { "aria-live": "polite", className: "font-sans font-bold", children: heading }), _jsx(BookingButton, { variant: "outline", size: "icon", "aria-label": labelText(labels['time.month.next']), onClick: () => onMonth(clock.dayStart(firstOfMonth, daysInMonth(year, month))), className: "rounded-full", children: _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4" }) })] }), _jsx("div", { "aria-hidden": "true", className: "grid grid-cols-7 gap-1 text-center", children: clock.weekdayHeads().map((head, index) => (_jsx("span", { className: "text-xs font-bold text-muted-foreground", children: head }, index))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: cells.map((cell, index) => {
                             if (cell === null) {
                                 // The blanks before the first of the month; the position is
                                 // the only thing that tells them apart.
@@ -365,7 +366,7 @@ function DaypartSections({ labels, clock, dayparts, daySlots, nearest, currentSl
                         else if (partySlot && party) {
                             label = partyChipLabel(labels, clock, partySlot, party);
                         }
-                        return (_jsx(TimeChip, { startTs: slot.startTs, label: label, nearest: isNearest, nearestLabel: labels['time.nearest'], current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('min-w-20 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }, slot.startTs));
+                        return (_jsx(TimeChip, { startTs: slot.startTs, label: label, nearest: isNearest, nearestLabel: labelText(labels['time.nearest']), current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('min-w-20 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }, slot.startTs));
                     }) })] }, daypart.key));
     });
 }
@@ -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/vipps-button.d.ts

@@ -1,6 +1,7 @@
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 export declare const VIPPS_BUTTON_LABEL_KEYS: readonly ["vipps.button", "vipps.unavailable", "vipps.throttled"];
-export type VippsButtonLabels = Record<(typeof VIPPS_BUTTON_LABEL_KEYS)[number], string>;
+export type VippsButtonLabels = Record<(typeof VIPPS_BUTTON_LABEL_KEYS)[number], BookingLabel>;
 /** Why a Vipps start did NOT end in a redirect. `null` is silence. */
 export type VippsStartState = {
     ok: false;

package/dist/booking/vipps-button.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useActionState, useId } from 'react';
 import { useFormStatus } from 'react-dom';
 import { bookingButtonClass } from './internal/ui.js';
+import { labelText } from './labels.js';
 import { slotClass } from './slots.js';
 export const VIPPS_BUTTON_LABEL_KEYS = [
     'vipps.button',
@@ -26,7 +27,7 @@ export function VippsButton({ onVipps, next = null, label, labels, classNames })
     const [state, formAction] = useActionState(onVipps, null);
     const noticeId = `${useId()}-notice`;
     const notice = state === null ? null : labels[`vipps.${state.reason}`];
-    return (_jsxs("form", { action: formAction, className: slotClass(classNames, 'root', 'space-y-3'), "aria-describedby": notice ? noticeId : undefined, children: [next && _jsx("input", { type: "hidden", name: "next", value: next }), _jsx(SubmitButton, { label: label ?? labels['vipps.button'], className: bookingButtonClass({
+    return (_jsxs("form", { action: formAction, className: slotClass(classNames, 'root', 'space-y-3'), "aria-describedby": notice ? noticeId : undefined, children: [next && _jsx("input", { type: "hidden", name: "next", value: next }), _jsx(SubmitButton, { label: label ?? labelText(labels['vipps.button']), className: bookingButtonClass({
                     size: 'lg',
                     className: slotClass(classNames, 'button', 'w-full rounded-full bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring/40'),
                 }) }), _jsx("div", { "aria-live": "polite", children: notice && (_jsx("p", { id: noticeId, className: slotClass(classNames, 'notice', 'text-sm text-muted-foreground'), children: notice })) })] }));

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

@@ -1,6 +1,7 @@
 import { type ComponentType, type ReactNode } from 'react';
 import { type AddChildSheetLabels } from './add-child-sheet.js';
 import type { BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { NewChild, SaveResult, WizardPerson } from './types.js';
 /**
@@ -35,7 +36,7 @@ import type { NewChild, SaveResult, WizardPerson } from './types.js';
  * from the sheet, grows the list by whole rows and moves nothing sideways.
  */
 export declare const WHO_SCREEN_LABEL_KEYS: readonly ["who.heading", "who.guest.groupLabel", "who.guest.children.one", "who.guest.children.other", "who.guest.adult", "who.guest.addedList", "who.family.legend", "who.family.self", "who.family.limit", "addChild.trigger", "addChild.title", "addChild.description.saved", "addChild.description.local", "addChild.name", "addChild.birthYear", "addChild.birthYearPlaceholder", "addChild.birthMonth", "addChild.birthMonthUnknown", "addChild.notes", "addChild.missing", "addChild.submit", "addChild.close"];
-export type WhoScreenLabels = Record<(typeof WHO_SCREEN_LABEL_KEYS)[number], string> & AddChildSheetLabels;
+export type WhoScreenLabels = Record<(typeof WHO_SCREEN_LABEL_KEYS)[number], BookingLabel> & AddChildSheetLabels;
 /**
  * - `root` — the `<section>`
  * - `heading` — the `<h2>`

package/dist/booking/who-screen.js

@@ -4,7 +4,8 @@ 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 { labelText } from './labels.js';
 import { slotClass } from './slots.js';
 /**
  * The first step — who is the visit for?
@@ -67,7 +68,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,
     });
 }
@@ -85,7 +86,7 @@ export function WhoScreen({ labels, format, people, family, guestChoices, addedC
         selectedClassName: classNames?.cardSelected,
     };
     if (family === null) {
-        return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [heading, loginRow, _jsxs("div", { className: "space-y-4", children: [_jsx(GuestChips, { choices: guestChoices, people: people, labels: labels, classNames: classNames, onChoose: onChoose }), addedChildren.length > 0 && (_jsx("ul", { "aria-label": labels['who.guest.addedList'], className: "space-y-2", children: addedChildren.map((entry, index) => (_jsx("li", { children: _jsx(PersonCard, { name: entry.person.name ?? '', line: entry.line, index: index, selected: true, disabled: false, onToggle: () => onChoose(people.filter((other) => other.key !== entry.person.key), false), ...cardClasses }) }, entry.person.key))) })), sheet(addedChildren.length >= maxPeople, false)] })] }));
+        return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [heading, loginRow, _jsxs("div", { className: "space-y-4", children: [_jsx(GuestChips, { choices: guestChoices, people: people, labels: labels, classNames: classNames, onChoose: onChoose }), addedChildren.length > 0 && (_jsx("ul", { "aria-label": labelText(labels['who.guest.addedList']), className: "space-y-2", children: addedChildren.map((entry, index) => (_jsx("li", { children: _jsx(PersonCard, { name: entry.person.name ?? '', line: entry.line, index: index, selected: true, disabled: false, onToggle: () => onChoose(people.filter((other) => other.key !== entry.person.key), false), ...cardClasses }) }, entry.person.key))) })), sheet(addedChildren.length >= maxPeople, false)] })] }));
     }
     // Defensively only what this picker draws: the caller clears guest seats
     // when the family appears, and a seat nobody can see must never count
@@ -104,10 +105,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
@@ -134,7 +135,7 @@ function GuestChips({ choices, people, labels, classNames, onChoose, }) {
         event.preventDefault();
         refs.current[target]?.focus();
     }
-    return (_jsx("div", { role: "radiogroup", "aria-label": labels['who.guest.groupLabel'], className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: choices.map((choice, index) => {
+    return (_jsx("div", { role: "radiogroup", "aria-label": labelText(labels['who.guest.groupLabel']), className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: choices.map((choice, index) => {
             const pressed = index === checked;
             return (_jsx("button", { ref: (element) => {
                     refs.current[index] = element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "3.2.0",
+  "version": "3.4.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",

package/skills/components/SKILL.md

@@ -156,6 +156,10 @@ same wizard / manage page / portal. Rules when editing or adding one:
 - **No copy, no clock.** Every string is a `labels` key (`'<screen>.<thing>'`, declared in
   the screen's `*_LABEL_KEYS` array and rolled up in `label-keys.ts`); every date / price
   goes through the `format: BookingFormat` prop — never `Date` getters or `Intl`.
+- **Labels render in the pack's own pieces.** A label is `string | readonly string[]`:
+  render it as children through `renderLabel` (string → one text node, array → one per
+  element) and as text (`aria-label`, messages) through `fillLabel` / `labelText`. Never
+  split a string label at its `{placeholders}`; test both forms (`childNodes`).
 - **Colours through the bridge only** (`bg-primary`, `text-muted-foreground`, …).
   `pnpm lint:tokens` rejects palette colours (`bg-white`, `text-green-600`) and arbitrary
   colour values in `src/booking`.