@medalsocial/meda 3.0.0 → 3.3.0

package/README.md

@@ -28,7 +28,7 @@ them (package managers no longer auto-install them):
 pnpm add @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities @xyflow/react
 ```
 
-Lean surfaces such as `@medalsocial/meda/calendar` and
+Lean surfaces such as `@medalsocial/meda/calendar`, `@medalsocial/meda/booking` and
 `@medalsocial/meda/primitives` need none of them. Fonts are not bundled either:
 the tokens name `Geist` / `Geist Mono`, so load them yourself (for example
 `@fontsource-variable/geist` + `@fontsource-variable/geist-mono`, or
@@ -62,6 +62,39 @@ either — if you `@import` them, list them yourself.
 per-feature stylesheets never reach an optional peer (see
 [Lean consumer setup](#lean-consumer-setup)).
 
+## Booking screens (`@medalsocial/meda/booking`)
+
+Unbranded, presentational screens for a customer booking flow: the wizard steps
+(`WhoScreen`, `ServiceScreen`, `StylistScreen`, `TimeScreen`, `DetailsScreen`,
+`SummaryBar`, `Confirmation`, `BookingSkeleton`, `AddChildSheet`), `ManageScreen`,
+login (`LoginSheet`, `LoginPanel`, `OtpSlots`, `VippsButton`) and the customer
+portal (`PortalShell`, `UpcomingBookings`, `VisitHistory`, `ChildCards`,
+`RebookCards`, `FamilyEditor`, `ProfileForm`, `DataControls`, `AccountCard`,
+`PortalUnreachable`, …).
+
+They are **props in, callbacks out**: nothing fetches, routes or touches storage.
+The data is plain structural shapes (`BookingServiceDto`, `WizardState`, …), every
+date and price goes through the `format` prop (`BookingFormat`: the business's
+clock, money, phone and name formatting), and every word through `labels` — meda
+ships no default language and no brand. Override, cheapest first:
+
+1. **CSS variables** — the shadcn tokens the bridge maps (`--primary`, `--card`,
+   `--muted`, `--border`, `--ring`, `--radius`, …). Colours come from nowhere else.
+2. **`labels`** — a flat record (`'who.heading'`, …); `BookingLabels` is the full set
+   and `BOOKING_LABEL_KEYS` lists it. `{placeholders}` are filled by the screen.
+3. **`classNames`** — per documented slot (`root`, `card`, `cardSelected`, `chip`, …),
+   merged after the defaults so an override wins.
+4. **`components`** — card renderers (`ServiceCard`, `StylistCard`, `TimeChip`,
+   `DayChip`, `PersonCard`, …). The defaults are exported (`DefaultServiceCard`, …)
+   so an override can wrap them.
+
+```css
+@import 'tailwindcss';
+@import '@medalsocial/meda/styles/bridge.css';      /* your own shadcn tokens */
+@import '@medalsocial/meda/primitives/styles.css';
+@import '@medalsocial/meda/booking/styles.css';
+```
+
 ## Tailwind CSS v4 setup
 
 Meda ships a `styles.css` with its design tokens. Import it once in your entry stylesheet or entry script:
@@ -119,8 +152,9 @@ only the utilities its own compiled output uses:
 | `styles/base.css` | `tokens.css` + `bridge.css` + the `color-scheme` base layer + Geist font mapping. No component scan, no xyflow. |
 | `styles/bridge.css` | `@custom-variant dark` + the `@theme inline` mappings (`bg-primary`, `text-muted-foreground`, `bg-brand-500`, ...). No token values, no fonts. |
 | `styles/tokens.css` | Raw CSS custom properties only. |
-| `primitives/styles.css` | Utilities for `@medalsocial/meda/primitives` (Button, Input, ToggleGroup, Avatar, Card, Skeleton, StatusPill, EmptyState, FilterRail; not MarkdownView). |
+| `primitives/styles.css` | Utilities for `@medalsocial/meda/primitives` (Button, Input, Textarea, Checkbox, Field, Sheet, ToggleGroup, Avatar, Card, Skeleton, StatusPill, EmptyState, FilterRail; not MarkdownView). |
 | `calendar/styles.css` | Utilities for `@medalsocial/meda/calendar`. |
+| `booking/styles.css` | Utilities for `@medalsocial/meda/booking`. Import `primitives/styles.css` too — the screens are built on the primitives. |
 | `workflow-builder/styles.css` | `@xyflow/react`'s stylesheet + utilities for `@medalsocial/meda/workflow-builder`. The only lean entry that ships xyflow CSS. |
 
 Feature stylesheets never include the foundation, so importing several of them

package/dist/booking/add-child-sheet.d.ts

@@ -0,0 +1,38 @@
+import type { BookingFormat } from './format.js';
+import { type SlotClassNames } from './slots.js';
+import type { NewChild, SaveResult } from './types.js';
+/**
+ * «+ Add child» — a dashed card that opens a small sheet: name, birth year,
+ * birth month (optional) and, where there is somewhere to keep it, a note for
+ * the stylist. Never a full birth date; the month is all a salon needs.
+ *
+ * The sheet only collects. What saving MEANS is the caller's: a logged-in
+ * parent's child may be created on their profile (`saveNotes`), a guest's
+ * lives in this booking only. The sheet stays open, fields locked, until
+ * `onSave` resolves — and shows the sentence it answers with if it could not
+ * save — so a child is never shown as added before it exists.
+ */
+export declare const ADD_CHILD_SHEET_LABEL_KEYS: readonly ["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 AddChildSheetLabels = Record<(typeof ADD_CHILD_SHEET_LABEL_KEYS)[number], string>;
+/**
+ * - `root` — the dashed trigger card (the only element in the page flow)
+ * - `content` — the sheet (`<dialog>`)
+ * - `title` — the sheet's heading
+ * - `submit` — the save button
+ */
+export type AddChildSheetSlot = 'root' | 'content' | 'title' | 'submit';
+export interface AddChildSheetProps {
+    labels: AddChildSheetLabels;
+    /** Month names come from `format.clock.monthName`. */
+    format: BookingFormat;
+    /** Offer the note for the stylist — only where it has somewhere to be kept. */
+    saveNotes: boolean;
+    disabled: boolean;
+    onSave: (child: NewChild) => Promise<SaveResult>;
+    /** The newest birth year offered. Defaults to the business-local year now. */
+    currentYear?: number;
+    /** How many years back the birth-year list goes. Default 18. */
+    oldestYearsBack?: number;
+    classNames?: SlotClassNames<AddChildSheetSlot>;
+}
+export declare function AddChildSheet({ labels, format, saveNotes, disabled, onSave, currentYear, oldestYearsBack, classNames, }: AddChildSheetProps): import("react").JSX.Element;

package/dist/booking/add-child-sheet.js

@@ -0,0 +1,88 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Plus, XIcon } from 'lucide-react';
+import { useId, useState, useTransition } from 'react';
+import { Field } from '../primitives/field.js';
+import { Input } from '../primitives/input.js';
+import { Sheet } from '../primitives/sheet.js';
+import { Textarea } from '../primitives/textarea.js';
+import { BOOKING_INPUT_CLASS, BOOKING_SELECT_CLASS, BOOKING_TEXTAREA_CLASS, BookingButton, } from './internal/ui.js';
+import { slotClass } from './slots.js';
+/**
+ * «+ Add child» — a dashed card that opens a small sheet: name, birth year,
+ * birth month (optional) and, where there is somewhere to keep it, a note for
+ * the stylist. Never a full birth date; the month is all a salon needs.
+ *
+ * The sheet only collects. What saving MEANS is the caller's: a logged-in
+ * parent's child may be created on their profile (`saveNotes`), a guest's
+ * lives in this booking only. The sheet stays open, fields locked, until
+ * `onSave` resolves — and shows the sentence it answers with if it could not
+ * save — so a child is never shown as added before it exists.
+ */
+export const ADD_CHILD_SHEET_LABEL_KEYS = [
+    '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',
+];
+const DEFAULT_OLDEST_YEARS_BACK = 18;
+export function AddChildSheet({ labels, format, saveNotes, disabled, onSave, currentYear, oldestYearsBack = DEFAULT_OLDEST_YEARS_BACK, classNames, }) {
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const [name, setName] = useState('');
+    const [year, setYear] = useState('');
+    const [month, setMonth] = useState('');
+    const [notes, setNotes] = useState('');
+    const [error, setError] = useState(null);
+    const [pending, startTransition] = useTransition();
+    const newestYear = currentYear ?? Number(format.clock.dayKey(Date.now()).slice(0, 4));
+    const years = Array.from({ length: oldestYearsBack + 1 }, (_, index) => newestYear - index);
+    const months = Array.from({ length: 12 }, (_, index) => index + 1);
+    function reset() {
+        setName('');
+        setYear('');
+        setMonth('');
+        setNotes('');
+        setError(null);
+    }
+    function submit(event) {
+        event.preventDefault();
+        const trimmed = name.trim();
+        if (trimmed === '' || year === '') {
+            setError(labels['addChild.missing']);
+            return;
+        }
+        startTransition(async () => {
+            const result = await onSave({
+                name: trimmed,
+                birthYear: Number(year),
+                ...(month === '' ? {} : { birthMonth: Number(month) }),
+                ...(saveNotes && notes.trim() !== '' ? { notes: notes.trim() } : {}),
+            });
+            if (result.ok) {
+                reset();
+                setOpen(false);
+                return;
+            }
+            setError(result.message);
+        });
+    }
+    return (_jsxs(Sheet, { open: open, dismissible: !pending, onOpenChange: (next) => {
+            if (pending)
+                return;
+            setOpen(next);
+            if (!next)
+                setError(null);
+        }, children: [_jsxs(Sheet.Trigger, { disabled: disabled, className: slotClass(classNames, 'root', 'flex h-[4.5rem] w-full items-center gap-3 rounded-lg border border-dashed border-border px-4 text-left font-medium text-primary transition-colors hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:opacity-50'), children: [_jsx("span", { "aria-hidden": "true", className: "flex size-11 shrink-0 items-center justify-center rounded-full border border-dashed border-primary", children: _jsx(Plus, { className: "size-5" }) }), labels['addChild.trigger']] }), _jsxs(Sheet.Content, { className: slotClass(classNames, 'content'), children: [_jsxs("form", { onSubmit: submit, className: "space-y-5", children: [_jsx(Sheet.Title, { className: slotClass(classNames, 'title', 'pe-10 font-sans text-2xl font-bold'), children: labels['addChild.title'] }), _jsx(Sheet.Description, { className: "text-muted-foreground", children: saveNotes
+                                    ? labels['addChild.description.saved']
+                                    : labels['addChild.description.local'] }), _jsxs("fieldset", { disabled: pending, className: "space-y-4", children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-name`, children: labels['addChild.name'] }), _jsx(Input, { id: `${id}-name`, value: name, maxLength: 60, autoComplete: "off", onChange: (event) => setName(event.target.value), className: BOOKING_INPUT_CLASS })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-year`, children: labels['addChild.birthYear'] }), _jsxs("select", { id: `${id}-year`, value: year, onChange: (event) => setYear(event.target.value), className: BOOKING_SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['addChild.birthYearPlaceholder'] }), years.map((option) => (_jsx("option", { value: String(option), children: option }, option)))] })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-month`, children: labels['addChild.birthMonth'] }), _jsxs("select", { id: `${id}-month`, value: month, onChange: (event) => setMonth(event.target.value), className: BOOKING_SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['addChild.birthMonthUnknown'] }), months.map((option) => (_jsx("option", { value: String(option), children: format.clock.monthName(option) }, option)))] })] })] }), saveNotes && (_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-notes`, children: labels['addChild.notes'] }), _jsx(Textarea, { id: `${id}-notes`, rows: 2, maxLength: 500, value: notes, onChange: (event) => setNotes(event.target.value), className: BOOKING_TEXTAREA_CLASS })] }))] }), _jsx("div", { "aria-live": "polite", className: "min-h-5", children: error && _jsx(Field.Error, { children: error }) }), _jsx(BookingButton, { type: "submit", size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: pending, children: labels['addChild.submit'] })] }), _jsx(Sheet.Close, { render: _jsxs(BookingButton, { variant: "ghost", className: "absolute top-4 right-4", size: "icon-sm", children: [_jsx(XIcon, { "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: labels['addChild.close'] })] }) })] })] }));
+}

package/dist/booking/booking-skeleton.d.ts

@@ -0,0 +1,24 @@
+import { type SlotClassNames } from './slots.js';
+export declare const BOOKING_SKELETON_LABEL_KEYS: readonly ["bookingSkeleton.opening"];
+/** Copy for the pending skeleton: the sentence a screen reader hears while it is up. */
+export type BookingSkeletonLabels = Record<(typeof BOOKING_SKELETON_LABEL_KEYS)[number], string>;
+/**
+ * `classNames` slots: `root` the fixed overlay · `frame` the pulsing column ·
+ * `bar` the active step-bar segment · `chip` one of the four person chips.
+ */
+export type BookingSkeletonSlot = 'root' | 'frame' | 'bar' | 'chip';
+export interface BookingSkeletonProps {
+    labels: BookingSkeletonLabels;
+    classNames?: SlotClassNames<BookingSkeletonSlot>;
+}
+/**
+ * The first screen of the booking flow, drawn while a navigation into it is
+ * still pending.
+ *
+ * Fixed and over the page rather than in its flow, so it moves nothing; under a
+ * `z-50` site header, which stays put across the navigation, and over a `z-40`
+ * sticky booking bar, which the flow hides. Its shapes follow the first step —
+ * title, lead, step bar, four person chips — so the page that replaces it lands
+ * where the skeleton was. Pure markup: when to show it is the caller's call.
+ */
+export declare function BookingSkeleton({ labels, classNames }: BookingSkeletonProps): import("react").JSX.Element;

package/dist/booking/booking-skeleton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from '../primitives/skeleton.js';
+import { slotClass } from './slots.js';
+export const BOOKING_SKELETON_LABEL_KEYS = ['bookingSkeleton.opening'];
+/**
+ * The first screen of the booking flow, drawn while a navigation into it is
+ * still pending.
+ *
+ * Fixed and over the page rather than in its flow, so it moves nothing; under a
+ * `z-50` site header, which stays put across the navigation, and over a `z-40`
+ * sticky booking bar, which the flow hides. Its shapes follow the first step —
+ * title, lead, step bar, four person chips — so the page that replaces it lands
+ * where the skeleton was. Pure markup: when to show it is the caller's call.
+ */
+export function BookingSkeleton({ labels, classNames }) {
+    return (_jsxs("div", { role: "status", "aria-live": "polite", "data-testid": "booking-pending", className: slotClass(classNames, 'root', 'fixed inset-0 z-[45] bg-background'), children: [_jsx("span", { className: "sr-only", children: labels['bookingSkeleton.opening'] }), _jsxs("div", { "aria-hidden": "true", className: slotClass(classNames, 'frame', 'mx-auto w-full max-w-[720px] px-8 pt-28 motion-safe:animate-pulse'), children: [_jsx(Skeleton, { className: "h-11 w-56 animate-none rounded-lg" }), _jsx(Skeleton, { className: "mt-5 h-4 w-full max-w-md animate-none rounded" }), _jsx(Skeleton, { className: "mt-2 h-4 w-3/4 max-w-sm animate-none rounded" }), _jsxs("div", { className: "mt-12 flex gap-2", children: [_jsx("div", { className: slotClass(classNames, 'bar', 'h-1.5 flex-1 rounded-full bg-primary/60') }), _jsx(Skeleton, { className: "h-1.5 flex-1 animate-none rounded-full" }), _jsx(Skeleton, { className: "h-1.5 flex-1 animate-none rounded-full" }), _jsx(Skeleton, { className: "h-1.5 flex-1 animate-none rounded-full" })] }), _jsx(Skeleton, { className: "mt-10 h-7 w-60 animate-none rounded-lg" }), _jsx("div", { className: "mt-8 grid grid-cols-2 gap-3", children: [0, 1, 2, 3].map((index) => (_jsx("div", { className: slotClass(classNames, 'chip', 'h-12 rounded-full border border-border bg-card') }, index))) })] })] }));
+}

package/dist/booking/confirmation.d.ts

@@ -0,0 +1,85 @@
+import type { ComponentType } from 'react';
+import type { BookingFormat } from './format.js';
+import { type SlotClassNames } from './slots.js';
+import type { WizardItem } from './types.js';
+/**
+ * The confirmation screen — the one the whole flow exists to reach.
+ *
+ * Presentational, and computes nothing about the booking: each line's start
+ * and price, the total, and the calendar file all come in precomputed from the
+ * same machine the details step read, so the number the visitor agreed to and
+ * the number on this card cannot drift apart.
+ *
+ * Everything it was not given, it does not draw: an empty address line or a
+ * link to a page that 404s reads as a booking that did not quite happen.
+ */
+export declare const CONFIRMATION_LABEL_KEYS: readonly ["confirmation.heading", "confirmation.serviceFor", "confirmation.when", "confirmation.party.heading", "confirmation.party.line", "confirmation.party.stylist", "confirmation.party.total", "confirmation.calendar", "confirmation.manage", "confirmation.manageFor", "confirmation.portal", "confirmation.startOver"];
+export type ConfirmationLabels = Record<(typeof CONFIRMATION_LABEL_KEYS)[number], string>;
+/**
+ * One booked line (one person's appointment). One array rather than parallel
+ * lists, because every part answers about the SAME line.
+ */
+export interface ConfirmationLine {
+    /** With the booked-for name filled in. */
+    item: WizardItem;
+    /** THIS line's own booking id. */
+    bookingId: string;
+    /** Who takes this line; `null` = «first available» not worth naming. Cleaned with `format.stylistName`. */
+    stylistName: string | null;
+    /** Where this line's own booking is managed; `null` draws no link. */
+    manageHref: string | null;
+    /** When this line starts (a sequential party runs back to back). */
+    startTs: number;
+    /** What this line costs on the day it is booked for, in minor units. */
+    priceOre: number;
+}
+/**
+ * - `root` the `<section>`
+ * - `heading` the `<h2>`
+ * - `card` the single booking's card
+ * - `partyCard` the family card
+ * - `address` the address line
+ * - `link` every text link (calendar, manage, portal)
+ * - `startOver` the «book again» button
+ */
+export type ConfirmationSlot = 'root' | 'heading' | 'card' | 'partyCard' | 'address' | 'link' | 'startOver';
+export interface PartyLineProps {
+    /** The line, with its stylist name already cleaned. */
+    line: ConfirmationLine;
+    /** The whole line as a sentence, e.g. «15:00 Name – Service with Stylist – 490 kr». */
+    text: string;
+    /** Visible manage-link text. */
+    manageLabel: string;
+    /** Accessible manage-link name, naming whose appointment it is. */
+    manageAriaLabel: string;
+    linkClassName?: string;
+}
+/** One row of the family card: the line and its own manage link. Renders an `<li>`. */
+export declare function DefaultPartyLine({ line, text, manageLabel, manageAriaLabel, linkClassName, }: PartyLineProps): import("react").JSX.Element;
+export interface ConfirmationComponents {
+    PartyLine?: ComponentType<PartyLineProps>;
+}
+export interface ConfirmationProps {
+    /** One per booked person, in the order they sit down. */
+    lines: readonly ConfirmationLine[];
+    /** When the visit starts. */
+    startTs: number;
+    /** The visit's total in minor units. */
+    totalOre: number;
+    address?: string | null;
+    /** The calendar file (e.g. a `data:text/calendar` URL). `null` draws no link. */
+    calendarHref?: string | null;
+    /** `download` filename for the calendar link. Required for a `data:` URL to work. */
+    calendarFileName?: string;
+    /** Where all of the visitor's bookings are listed. `null` draws no link. */
+    portalHref?: string | null;
+    /** A way back to an empty wizard. Absent, the button is not drawn. */
+    onStartOver?: () => void;
+    /** «today» is relative to this. Read once, so it cannot change mid-card. */
+    now?: number;
+    format: BookingFormat;
+    labels: ConfirmationLabels;
+    classNames?: SlotClassNames<ConfirmationSlot>;
+    components?: ConfirmationComponents;
+}
+export declare function Confirmation({ lines: rawLines, startTs, totalOre, address, calendarHref, calendarFileName, portalHref, onStartOver, now, format, labels, classNames, components, }: ConfirmationProps): import("react").JSX.Element;

package/dist/booking/confirmation.js

@@ -0,0 +1,102 @@
+'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';
+/**
+ * The confirmation screen — the one the whole flow exists to reach.
+ *
+ * Presentational, and computes nothing about the booking: each line's start
+ * and price, the total, and the calendar file all come in precomputed from the
+ * same machine the details step read, so the number the visitor agreed to and
+ * the number on this card cannot drift apart.
+ *
+ * Everything it was not given, it does not draw: an empty address line or a
+ * link to a page that 404s reads as a booking that did not quite happen.
+ */
+export const CONFIRMATION_LABEL_KEYS = [
+    'confirmation.heading',
+    /** `{service}` booked for `{name}` (used when a name is known). */
+    'confirmation.serviceFor',
+    /** `{day}` `{time}` — the single booking's «when». */
+    'confirmation.when',
+    /** `{day}` — the family card's heading. */
+    'confirmation.party.heading',
+    /** `{time} {name} – {service} {stylist} – {price}`; blank parts collapse. */
+    'confirmation.party.line',
+    /** `{name}` — the stylist part of a family line. */
+    'confirmation.party.stylist',
+    /** `{total}` — the family card's total line. */
+    'confirmation.party.total',
+    'confirmation.calendar',
+    'confirmation.manage',
+    /** `{who}` `{time}` — accessible name of a family line's manage link. */
+    'confirmation.manageFor',
+    'confirmation.portal',
+    'confirmation.startOver',
+];
+/** One row of the family card: the line and its own manage link. Renders an `<li>`. */
+export function DefaultPartyLine({ line, text, manageLabel, manageAriaLabel, linkClassName, }) {
+    return (_jsxs("li", { className: "flex flex-wrap items-baseline gap-x-3", children: [_jsx("span", { className: "tabular-nums", children: text }), line.manageHref && (_jsx("a", { href: line.manageHref, "aria-label": manageAriaLabel, className: linkClassName ?? 'text-sm font-semibold text-primary underline underline-offset-4', children: manageLabel }))] }));
+}
+const SEPARATOR = ' · ';
+export function Confirmation({ lines: rawLines, startTs, totalOre, address = null, calendarHref = null, calendarFileName = 'booking.ics', portalHref = null, onStartOver, now = Date.now(), format, labels, classNames, components, }) {
+    const { clock } = format;
+    // Cleaned here as well as upstream: a restored confirmation carries whatever
+    // name was resolved when it was stored.
+    const lines = rawLines.map((line) => ({
+        ...line,
+        stylistName: line.stylistName ? format.stylistName(line.stylistName) || null : null,
+    }));
+    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: joinLabelParts([
+            first.item.bookedForName
+                ? renderLabel(labels['confirmation.serviceFor'], {
+                    service: first.item.service.name,
+                    name: first.item.bookedForName,
+                })
+                : first.item.service.name,
+            first.stylistName,
+            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),
+        ], 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'] }) }))] }));
+}
+/**
+ * The family card: one line per person in the order they sit down, each with
+ * its own manage link (each line is its own booking), and a total.
+ */
+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: 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,
+                        name: line.item.bookedForName ?? '',
+                        service: line.item.service.name,
+                        stylist: line.stylistName
+                            ? fillLabel(labels['confirmation.party.stylist'], { name: line.stylistName })
+                            : '',
+                        price: format.price(line.priceOre),
+                    })
+                        // Blank parts collapse. Plain spaces only: a price joined with a
+                        // non-breaking space must keep it.
+                        .replace(/ {2,}/g, ' ')
+                        .trim();
+                    return (_jsx(PartyLine
+                    // biome-ignore lint/suspicious/noArrayIndexKey: two lines can share a service; the index is the identity
+                    , { line: line, text: text, manageLabel: labels['confirmation.manage'], manageAriaLabel: fillLabel(labels['confirmation.manageFor'], {
+                            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: renderLabel(labels['confirmation.party.total'], { total: format.price(totalOre) }) })] }));
+}

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

@@ -0,0 +1,118 @@
+import { type ComponentType } from 'react';
+import type { BookingFormat } from './format.js';
+import { type SlotClassNames } from './slots.js';
+import type { BookingFamilyMember, WizardAction, WizardError, WizardState } from './types.js';
+/**
+ * The last step of the booking wizard: contact details, who each seat is for,
+ * the consents, and the button that books.
+ *
+ * Presentational, with the same bargain the other steps make: every answer
+ * leaves as an action (`onChange`) and the caller's machine decides what it
+ * means. What stays here is local UI state that is not an answer about the
+ * booking — the keystrokes behind the per-child fields, which field has focus,
+ * whether submit has been pressed, and a fallback submission nonce.
+ */
+export declare const DETAILS_SCREEN_LABEL_KEYS: readonly ["details.heading", "details.phone.label", "details.phone.prefix", "details.phone.error", "details.name.label", "details.known.label", "details.known.for", "details.known.self", "details.known.adult", "details.known.child", "details.child.name", "details.child.year", "details.child.yearPlaceholder", "details.email.label", "details.email.help", "details.email.error", "details.notes.label", "details.notes.placeholder", "details.terms.text", "details.terms.link", "details.marketing.text", "details.error.maxParty", "details.error.slotTaken", "details.error.conflict", "details.error.invalidInput", "details.error.unconfigured", "details.error.upstreamError", "details.error.inProgress", "details.call.link", "details.call.none", "details.submit"];
+export type DetailsScreenLabelKey = (typeof DETAILS_SCREEN_LABEL_KEYS)[number];
+export type DetailsScreenLabels = Record<DetailsScreenLabelKey, string>;
+/**
+ * The label key for each failure the wizard can carry. Exported because some
+ * of them (e.g. `maxParty`) are raised on earlier steps, where the shell shows
+ * the same sentence — one map, so one refusal is never explained two ways.
+ */
+export declare const DETAILS_ERROR_LABEL_KEYS: Record<WizardError, DetailsScreenLabelKey>;
+/** One line of the submission. Optional fields are ABSENT, never blank. */
+export interface BookingSubmissionItem {
+    serviceId: string;
+    resourceId?: string;
+    startTs: number;
+    bookedForName?: string;
+    bookedForBirthYear?: number;
+    bookedForPersonId?: string;
+}
+/** The booking as the details step submits it. Optional fields are ABSENT, never blank. */
+export interface BookingSubmission {
+    items: BookingSubmissionItem[];
+    contact: {
+        phone: string;
+        name?: string;
+        email?: string;
+    };
+    notes?: string;
+    consentTerms: boolean;
+    consentMarketing: boolean;
+    /** Identifies the submission attempt, so a retry can be made idempotent. */
+    submissionNonce?: string;
+}
+/** Where and with whom one basket line sits, precomputed by the caller's machine. */
+export interface DetailsLine {
+    startTs: number;
+    /** The resource the slot RESOLVED to for this line; `null` sends none. */
+    resourceId: string | null;
+}
+/**
+ * - `root` the `<section>`
+ * - `heading` the `<h2>`
+ * - `field` every `Field` wrapper
+ * - `input` every text input and the notes textarea
+ * - `childGroup` the per-line `<fieldset>` (only drawn for more than one line)
+ * - `consent` the two consent rows
+ * - `error` the submit-failure alert
+ * - `submit` the submit button
+ */
+export type DetailsScreenSlot = 'root' | 'heading' | 'field' | 'input' | 'childGroup' | 'consent' | 'error' | 'submit';
+export interface FamilyChipProps {
+    member: BookingFamilyMember;
+    /** Both the name and the year in the fields match this member. */
+    pressed: boolean;
+    onPick: () => void;
+}
+/** One saved child offered as a single tap above the child fields. */
+export declare function DefaultFamilyChip({ member, pressed, onPick }: FamilyChipProps): import("react").JSX.Element;
+export interface DetailsScreenComponents {
+    FamilyChip?: ComponentType<FamilyChipProps>;
+}
+export interface DetailsScreenProps {
+    state: WizardState;
+    /** Raises `setContact`, `setItemField`, `setNotes` and `setConsent`. */
+    onChange: (action: WizardAction) => void;
+    onSubmit: (submission: BookingSubmission) => void;
+    /**
+     * One per `state.items`, in the same order: the start the machine seated
+     * each line at and the resource it resolved to.
+     */
+    lines: readonly DetailsLine[];
+    /** The whole basket's price in minor units, as the business will charge it. */
+    totalOre: number;
+    /** Whether the phone field holds a number the business can use. */
+    phoneLooksValid: (value: string) => boolean;
+    /** The phone as it is submitted and compared (e.g. national digits only). */
+    normalisePhone: (value: string) => string;
+    /** True while a submission is in flight: the button goes inert and `aria-busy`. */
+    submitting?: boolean;
+    /** The business's phone for the failure message; `null` renders the sentence unlinked. */
+    phone?: string | null;
+    /**
+     * The submission nonce, held by the caller so it survives a remount. Absent,
+     * one is minted for the life of this mount.
+     */
+    submissionNonce?: string;
+    /** Saved children on a logged-in profile, offered as one tap each. */
+    family?: readonly BookingFamilyMember[];
+    /**
+     * The logged-in guardian's phone. A line's saved-person id is only submitted
+     * while the phone in the form normalises to this one.
+     */
+    guardianPhone?: string | null;
+    /** When set, a link to the full terms is drawn after the terms sentence. */
+    termsHref?: string | null;
+    /** Draw the (optional, unticked) marketing opt-in. */
+    marketingConsent?: boolean;
+    format: BookingFormat;
+    labels: DetailsScreenLabels;
+    classNames?: SlotClassNames<DetailsScreenSlot>;
+    components?: DetailsScreenComponents;
+}
+/** Blank is fine (the field is optional). Anything else has to be reachable. */
+export declare function looksLikeEmail(value: string): boolean;
+export declare function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phoneLooksValid, normalisePhone, submitting, phone, submissionNonce: nonceProp, family, guardianPhone, termsHref, marketingConsent, format, labels, classNames, components, }: DetailsScreenProps): import("react").JSX.Element;