@medalsocial/meda 3.0.0 → 3.2.0

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

@@ -0,0 +1,117 @@
+import { type ComponentType, type Ref } from 'react';
+import type { BookingFormat } from './format.js';
+import { type SlotClassNames } from './slots.js';
+import type { BookingResourceDto, PartyMode } from './types.js';
+/**
+ * The stylist step — who would you like to see?
+ *
+ * Presentational, and one decision short of the machine's: `null` is a real
+ * answer here — «first available» — so the tap raises `onPick(null)` rather
+ * than raising nothing.
+ *
+ * ONE list of options at every width, restyled rather than swapped. Under `md`
+ * it is a single fixed-height row of avatars that scrolls sideways — full
+ * cards stacked above a time grid push everything a phone could tap below the
+ * fold — and from `md` up it is the column of cards. A second, phone-only list
+ * would be a second set of radios in the accessibility tree and a layout that
+ * could only be picked after hydration, i.e. a jump.
+ *
+ * A radiogroup, because that is what it is: exactly one answer, «first
+ * available» included. Arrow keys move and choose, Tab enters and leaves once.
+ */
+export declare const STYLIST_SCREEN_LABEL_KEYS: readonly ["stylist.heading", "stylist.firstAvailable", "stylist.firstAvailableSubtitle", "stylist.firstAvailableBadge", "stylist.pendingName", "stylist.nextAvailable", "stylist.loading", "stylist.party.legend", "stylist.party.sequential", "stylist.party.sequentialMinutes", "stylist.party.parallel.two", "stylist.party.parallel.three", "stylist.party.parallel.other", "stylist.party.parallelMinutes", "stylist.party.parallelNote.two", "stylist.party.parallelNote.three", "stylist.party.parallelNote.other"];
+export type StylistScreenLabels = Record<(typeof STYLIST_SCREEN_LABEL_KEYS)[number], string>;
+/**
+ * - `root` — the `<section>`
+ * - `heading` — the `<h2>`
+ * - `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
+ */
+export type StylistScreenSlot = 'root' | 'heading' | 'group' | 'card' | 'cardSelected' | 'modeCard' | 'modeCardSelected';
+/** One option of the radiogroup as the card draws it. */
+export interface StylistOption {
+    /** `null` is «first available». */
+    resourceId: string | null;
+    name: string;
+    /** What a phone tile has room for: a stylist's first name, else the whole label. */
+    shortName: string;
+    subtitle?: string | null;
+    /** The avatar's fallback: initials, or a symbol for «first available». */
+    badge: string;
+    photoUrl?: string | null;
+    /** The formatted next opening, when there is one. */
+    availability?: string | null;
+    availabilityLoading?: boolean;
+    /** Hold the next-opening row's height even when empty. */
+    reserveAvailability?: boolean;
+}
+export interface StylistCardProps {
+    ref: Ref<HTMLButtonElement>;
+    option: StylistOption;
+    selected: boolean;
+    tabIndex: number;
+    onClick: () => void;
+    labels: StylistScreenLabels;
+    className?: string;
+    selectedClassName?: string;
+}
+export interface StylistScreenComponents {
+    StylistCard?: ComponentType<StylistCardProps>;
+}
+export interface StylistScreenProps {
+    labels: StylistScreenLabels;
+    /** `format.clock.when` prints the next opening; `stylistName` / `initials` the names. */
+    format: BookingFormat;
+    /** «Now» for «today / tomorrow» in the next-opening line. Default `Date.now()`. */
+    now?: number;
+    /** Every service in the basket. A named stylist has to cover all of them. */
+    serviceIds: string[];
+    resources: BookingResourceDto[];
+    /** The machine's resource answer; `null` is «first available». */
+    selectedResourceId?: string | null;
+    /**
+     * The first opening per stylist, epoch milliseconds. A stylist with no entry
+     * gets no line: inventing a time, or printing an empty prefix, both promise
+     * more than is known.
+     */
+    nextAvailableTs?: Record<string, number | null>;
+    /** The next-opening answer is still on its way: the rows it will fill pulse instead of sitting blank. */
+    nextAvailableLoading?: boolean;
+    /**
+     * The stylist list itself has not arrived. Cards of the final height stand
+     * in for it, so what is below does not jump when it lands.
+     */
+    loading?: boolean;
+    /** How many placeholders to hold while `loading`. Default 5. */
+    skeletonCount?: number;
+    /**
+     * The name to show for a NAMED stylist restored before the list that can
+     * vouch for them has landed (a saved draft, a rebook link). `null` reads
+     * `stylist.pendingName`. Ignored once the list is here.
+     */
+    pendingName?: string | null;
+    /** A polite announcement once the list is here (e.g. the restored stylist is gone). */
+    notice?: string | null;
+    onPick: (resourceId: string | null) => void;
+    /**
+     * Present only for a family. One child gets no picker: «one after the
+     * other» is not a choice when there is nobody to be after.
+     */
+    party?: {
+        mode: PartyMode;
+        /** How many people, for the option labels. */
+        size: number;
+        /** How long the visit is in each mode. */
+        minutes: {
+            sequential: number;
+            parallel: number;
+        };
+        onMode: (mode: PartyMode) => void;
+    };
+    classNames?: SlotClassNames<StylistScreenSlot>;
+    components?: StylistScreenComponents;
+}
+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;

package/dist/booking/stylist-screen.js

@@ -0,0 +1,226 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from 'react';
+import { cn } from '../lib/utils.js';
+import { fillLabel } from './labels.js';
+import { LiveStatus } from './live-status.js';
+import { slotClass } from './slots.js';
+/**
+ * The stylist step — who would you like to see?
+ *
+ * Presentational, and one decision short of the machine's: `null` is a real
+ * answer here — «first available» — so the tap raises `onPick(null)` rather
+ * than raising nothing.
+ *
+ * ONE list of options at every width, restyled rather than swapped. Under `md`
+ * it is a single fixed-height row of avatars that scrolls sideways — full
+ * cards stacked above a time grid push everything a phone could tap below the
+ * fold — and from `md` up it is the column of cards. A second, phone-only list
+ * would be a second set of radios in the accessibility tree and a layout that
+ * could only be picked after hydration, i.e. a jump.
+ *
+ * A radiogroup, because that is what it is: exactly one answer, «first
+ * available» included. Arrow keys move and choose, Tab enters and leaves once.
+ */
+export const STYLIST_SCREEN_LABEL_KEYS = [
+    'stylist.heading',
+    'stylist.firstAvailable',
+    'stylist.firstAvailableSubtitle',
+    'stylist.firstAvailableBadge',
+    'stylist.pendingName',
+    'stylist.nextAvailable',
+    'stylist.loading',
+    'stylist.party.legend',
+    'stylist.party.sequential',
+    'stylist.party.sequentialMinutes',
+    'stylist.party.parallel.two',
+    'stylist.party.parallel.three',
+    'stylist.party.parallel.other',
+    'stylist.party.parallelMinutes',
+    'stylist.party.parallelNote.two',
+    'stylist.party.parallelNote.three',
+    'stylist.party.parallelNote.other',
+];
+/**
+ * One height per breakpoint for every option, filled or not, so nothing on the
+ * step — nor what is under it — moves when a list or a line lands: a 128 px
+ * avatar tile on a phone, the 96 px card from `md` up.
+ */
+const OPTION_HEIGHT = 'h-32 md:h-24';
+const DEFAULT_SKELETON_COUNT = 5;
+const HEADING_ID = 'booking-stylist-heading';
+/** «Ada» from «Ada Demo»: a phone tile has room for one word. */
+function firstName(displayName) {
+    return displayName.split(/\s+/u)[0] ?? 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) {
+    const suffix = SIZE_WORDS[size] ?? 'other';
+    return fillLabel(labels[`${base}.${suffix}`], { count: 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
+    // stylist who covers one of two services is not an answer — it is a refusal
+    // the engine issues at submit, offered here as a choice.
+    const qualified = resources
+        .filter((resource) => serviceIds.every((id) => resource.serviceIds.includes(id)))
+        .sort((a, b) => a.sortOrder - b.sortOrder);
+    const at = now ?? Date.now();
+    // A named answer restored before the list: held in the first slot after
+    // «first available», checked and tabbable, so the group does not claim
+    // «nobody chosen» — nor put the tab stop on the one answer the visitor did
+    // NOT give — for the second it takes the list to land.
+    const held = selectedResourceId === null
+        ? []
+        : [pendingOption(selectedResourceId, pendingName, labels, format)];
+    // First and pre-selected: most people do not mind who does it, and the
+    // business fills its gaps best when they do not.
+    const options = [
+        {
+            resourceId: null,
+            name: labels['stylist.firstAvailable'],
+            shortName: labels['stylist.firstAvailable'],
+            subtitle: labels['stylist.firstAvailableSubtitle'],
+            badge: labels['stylist.firstAvailableBadge'],
+        },
+        ...(loading
+            ? held
+            : qualified.map((resource) => {
+                const nextTs = nextAvailableTs?.[resource.id];
+                const name = format.stylistName(resource.name);
+                return {
+                    resourceId: resource.id,
+                    name,
+                    shortName: firstName(name),
+                    subtitle: resource.bio,
+                    photoUrl: resource.photoUrl,
+                    badge: format.initials(name),
+                    availability: typeof nextTs === 'number' ? format.clock.when(nextTs, at) : null,
+                    availabilityLoading: nextAvailableLoading && typeof nextTs !== 'number',
+                    reserveAvailability: true,
+                };
+            })),
+    ];
+    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'], {
+                            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'], {
+                            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, 
+                // 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 })] }));
+}
+/**
+ * The options as one radiogroup with a roving tab stop.
+ *
+ * Arrow keys move AND choose, as a native radio group does — picking a
+ * stylist is cheap and reversible, and a group that needed Space after every
+ * arrow would be a list of buttons in a radiogroup's clothes.
+ */
+function StylistRadioGroup({ options, selectedResourceId, skeletons, busy, onPick, labels, classNames, Card, }) {
+    const groupRef = useRef(null);
+    const optionRefs = useRef([]);
+    const selectedIndex = options.findIndex((option) => option.resourceId === selectedResourceId);
+    // A preference the list cannot show (the stylist does not cover this basket)
+    // still leaves the group one tab stop: the first option.
+    const tabStop = selectedIndex === -1 ? 0 : selectedIndex;
+    // On a phone the chosen stylist may sit past the right edge of the row —
+    // coming back to the step must show the answer already given. Only the row
+    // is scrolled, never the page: `scrollIntoView` would also move the
+    // viewport. The row is `relative`, so an option's `offsetLeft` is already
+    // measured from it.
+    useEffect(() => {
+        const group = groupRef.current;
+        const chosen = optionRefs.current[tabStop];
+        if (!group || !chosen || group.scrollWidth <= group.clientWidth)
+            return;
+        group.scrollLeft = Math.max(0, chosen.offsetLeft - 8);
+    }, [tabStop]);
+    function onKeyDown(event) {
+        const last = options.length - 1;
+        const from = optionRefs.current.indexOf(document.activeElement);
+        if (from === -1)
+            return;
+        let to;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                to = from === last ? 0 : from + 1;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                to = from === 0 ? last : from - 1;
+                break;
+            case 'Home':
+                to = 0;
+                break;
+            case 'End':
+                to = last;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        optionRefs.current[to]?.focus();
+        const target = options[to];
+        if (target)
+            onPick(target.resourceId);
+    }
+    return (_jsxs("div", { ref: groupRef, role: "radiogroup", "aria-labelledby": HEADING_ID, "aria-busy": busy, onKeyDown: onKeyDown, "data-testid": "stylist-options", 
+        // Phone: one row of fixed height, scrolled sideways with snap; the
+        // padding leaves room for the selected avatar's ring, which the scroll
+        // 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)))] }));
+}
+/** 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'];
+    return {
+        resourceId,
+        name,
+        shortName: known ? firstName(name) : name,
+        badge: known ? format.initials(name) : '…',
+        availability: null,
+        availabilityLoading: true,
+        reserveAvailability: true,
+    };
+}
+/**
+ * One of the two answers to how a family is seen.
+ *
+ * Its own card rather than a stylist card: that one carries a photo or a set
+ * of initials, which a mode does not have, and a mode with an avatar reads as
+ * a third stylist.
+ */
+function ModeCard({ selected, onClick, title, subtitle, classNames, }) {
+    return (_jsxs("button", { type: "button", "aria-pressed": selected, onClick: onClick, className: cn('flex min-h-16 flex-1 flex-col justify-center 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/10 font-semibold ring-2 ring-primary'
+            : '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, }) {
+    const id = useId();
+    const nameId = `${id}-name`;
+    const nextId = `${id}-next`;
+    const bioId = `${id}-bio`;
+    const { name, subtitle, badge, photoUrl, availability, availabilityLoading, reserveAvailability, } = option;
+    return (_jsxs("button", { ref: ref, type: "button", role: "radio", "aria-checked": selected, tabIndex: tabIndex, onClick: onClick, "aria-labelledby": availability ? `${nameId} ${nextId}` : nameId, "aria-describedby": subtitle ? bioId : undefined, 
+        // Ring and weight alongside the tint: the selected option has to be
+        // obvious on a monochrome screen too. On a phone the ring is on the
+        // avatar; from `md` it is on the card.
+        className: cn('group flex w-24 shrink-0 snap-start flex-col items-center gap-1 rounded-lg px-1 pt-1 text-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary', 'md:w-full md:shrink md:flex-row md:gap-4 md:border md:px-5 md:py-4 md:text-left', OPTION_HEIGHT, selected
+            ? '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" })) })))] })] }));
+}
+/** A stylist option before there is a stylist: the same box, the same circle, at both widths. */
+function SkeletonCard() {
+    return (_jsxs("div", { "aria-hidden": "true", "data-testid": "stylist-skeleton", className: cn('flex w-24 shrink-0 flex-col items-center gap-1 px-1 pt-1', 'md:w-full md:flex-row md:gap-4 md:rounded-lg md:border md:border-border md:bg-card md:px-5 md:py-4', OPTION_HEIGHT), children: [_jsx("span", { className: "size-14 shrink-0 animate-pulse rounded-full bg-muted md:size-12" }), _jsxs("span", { className: "flex w-full min-w-0 flex-col items-center gap-2 md:w-auto md:flex-1 md:items-start", children: [_jsx("span", { className: "h-4 w-14 animate-pulse rounded bg-muted md:w-28" }), _jsx("span", { className: "h-3 w-16 animate-pulse rounded bg-muted md:w-40" })] })] }));
+}

package/dist/booking/summary-bar.d.ts

@@ -0,0 +1,26 @@
+import { type SlotClassNames } from './slots.js';
+import type { WizardStep } from './types.js';
+/**
+ * The sticky bar that accretes the visitor's choices, and the one button that
+ * leaves a step.
+ *
+ * It computes nothing: the sentence and whether the button is enabled come in
+ * precomputed from the caller's machine, so the bar cannot disagree with the
+ * 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>;
+/** `root` the bar, `line` the summary sentence, `next` the button. */
+export type SummaryBarSlot = 'root' | 'line' | 'next';
+export interface SummaryBarProps {
+    /** The summary sentence, e.g. «Service · Stylist · today 15:00 · 490 kr». Empty = nothing chosen. */
+    line: string;
+    /** Whether the current step can be left. */
+    canAdvance: boolean;
+    /** The current step. The bar renders nothing on `details`, which has its own submit. */
+    step: WizardStep;
+    onNext: () => void;
+    labels: SummaryBarLabels;
+    classNames?: SlotClassNames<SummaryBarSlot>;
+}
+export declare function SummaryBar({ line, canAdvance, step, onNext, labels, classNames, }: SummaryBarProps): import("react").JSX.Element | null;

package/dist/booking/summary-bar.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BookingButton } from './internal/ui.js';
+import { slotClass } from './slots.js';
+/**
+ * The sticky bar that accretes the visitor's choices, and the one button that
+ * leaves a step.
+ *
+ * It computes nothing: the sentence and whether the button is enabled come in
+ * precomputed from the caller's machine, so the bar cannot disagree with the
+ * wizard it summarises.
+ */
+export const SUMMARY_BAR_LABEL_KEYS = [
+    /** Shown on the first step while nothing is chosen. */
+    'summary.placeholder.who',
+    /** Shown on later steps while nothing is chosen. */
+    'summary.placeholder.service',
+    'summary.next',
+];
+export function SummaryBar({ line, canAdvance, step, onNext, labels, classNames, }) {
+    // Gone on the details step, not merely relabelled: that step's own button
+    // carries the price and the commitment, and two sticky submits stacked at the
+    // bottom of a phone is the outcome to avoid.
+    if (step === 'details')
+        return null;
+    // There from the first step at one fixed height, rather than appearing on
+    // the first tap and pushing the page down under the visitor's thumb.
+    return (_jsxs("div", { className: slotClass(classNames, 'root', 'sticky bottom-0 z-40 flex h-16 items-center justify-between gap-4 border-t border-border bg-background/95 px-5 backdrop-blur-md'), children: [_jsx("p", { className: slotClass(classNames, 'line', 'min-w-0 truncate text-sm font-medium', !line && 'text-muted-foreground'), children: line ||
+                    (step === 'who'
+                        ? labels['summary.placeholder.who']
+                        : labels['summary.placeholder.service']) }), _jsx(BookingButton, { size: "lg", className: slotClass(classNames, 'next'), onClick: onNext, disabled: !canAdvance, children: labels['summary.next'] })] }));
+}

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

@@ -0,0 +1,191 @@
+import { type ComponentType } from 'react';
+import type { BookingDaypart, BookingFormat } from './format.js';
+import { type SlotClassNames } from './slots.js';
+import type { BookingDayDto, BookingSlotDto, PartySlot, WizardItem } from './types.js';
+/**
+ * The time step — «when suits you?».
+ *
+ * Presentational, with one piece of state the booking machine deliberately does
+ * not hold: which day the visitor is *looking at*. Nothing about it is
+ * submitted and it survives no further than this screen, so putting it in the
+ * machine would make the wizard remember a scroll position. What gets booked
+ * still leaves here as `onPick(slot)`.
+ */
+export declare const TIME_SCREEN_LABEL_KEYS: readonly ["time.heading", "time.dayStrip.legend", "time.nearest", "time.current", "time.nextFree", "time.shortNotice", "time.weekend.pct", "time.weekend.mixed", "time.month.show", "time.month.hide", "time.month.previous", "time.month.next", "time.month.heading", "time.month.note", "time.party.sequential", "time.party.parallel", "time.party.seat", "time.party.seatSeparator", "time.parallel.offer.two", "time.parallel.offer.other", "time.parallel.accept", "time.empty.closed", "time.empty.over", "time.empty.full", "time.empty.stylist", "time.empty.unknown", "time.empty.callLink", "time.empty.callLinkAria", "time.empty.callSuffix", "time.empty.callPlain", "time.loading", "time.skeleton.dayPlaceholder", "time.taken.message", "time.taken.close"];
+/**
+ * Copy for the time step. Placeholders:
+ * - `time.current` `{time}`; `time.weekend.pct` `{pct}` `{price}`; `time.weekend.mixed` `{price}`
+ *   (keep a non-breaking space inside «+10 %» and the price so neither wraps)
+ * - `time.month.heading` `{month}` `{year}`
+ * - `time.party.sequential` `{start}` `{end}`; `time.party.parallel` `{time}` `{seats}`;
+ *   `time.party.seat` `{who}` `{stylist}`
+ * - `time.parallel.offer.*` `{day}` `{time}` (`two` for two people, `other` for more);
+ *   `time.parallel.accept` `{time}`
+ * - `time.empty.closed|over|full|unknown` `{day}`; `time.empty.stylist` `{stylist}` `{day}`.
+ *   `full`, `stylist` and `unknown` are the lead of a sentence the phone line
+ *   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>;
+/**
+ * `classNames` slots:
+ * - `root` the section · `heading` the h2
+ * - `dayStrip` the fieldset of day chips · `dayChip` / `dayChipSelected` one day chip
+ * - `month` the month-view wrapper · `monthCell` / `monthCellSelected` a tappable date
+ * - `surcharge` the weekend-note row
+ * - `daypart` one daypart section · `daypartHeading` its h3
+ * - `chip` a time chip · `chipNearest` a chip marked nearest · `chipCurrent` the current-hour chip
+ * - `parallel` the «both at once» offer · `empty` the nothing-free card
+ * - `nextFree` the «next free time» link-button · `shortNotice` the short-notice line
+ */
+export type TimeScreenSlot = 'root' | 'heading' | 'dayStrip' | 'dayChip' | 'dayChipSelected' | 'month' | 'monthCell' | 'monthCellSelected' | 'surcharge' | 'daypart' | 'daypartHeading' | 'chip' | 'chipNearest' | 'chipCurrent' | 'parallel' | 'empty' | 'nextFree' | 'shortNotice';
+export interface DayChipProps {
+    /** An instant inside the day. */
+    dayTs: number;
+    /** «Today», «Thu 3». */
+    label: string;
+    selected: boolean;
+    /** The resolved classes (base + selected + slot overrides). */
+    className: string;
+    onSelect: () => void;
+}
+/** One chip of the day strip: an `aria-pressed` outline button. */
+export declare function DefaultDayChip({ label, selected, className, onSelect }: DayChipProps): import("react").JSX.Element;
+export interface TimeChipProps {
+    startTs: number;
+    /** «14:30», a party's «15:00 → 16:00», or the current hour's «15:00 · Current time». */
+    label: string;
+    /** One of the nearest alternatives to a slot that was just taken. */
+    nearest: boolean;
+    /** The screen-reader text that says so. */
+    nearestLabel: string;
+    /** The hour the visitor already holds: drawn, disabled, `aria-current`. */
+    current: boolean;
+    /** The resolved classes (base + state + slot overrides). */
+    className: string;
+    onPick: () => void;
+}
+/** One time chip. */
+export declare function DefaultTimeChip({ label, nearest, nearestLabel, current, className, onPick, }: TimeChipProps): import("react").JSX.Element;
+export interface TimeScreenComponents {
+    DayChip?: ComponentType<DayChipProps>;
+    TimeChip?: ComponentType<TimeChipProps>;
+}
+/** What the weekend note says for one day. `pct: null` = the basket carries more than one rate. */
+export interface WeekendNote {
+    pct: number | null;
+    /** The basket's total priced on the day asked about, in minor units. */
+    priceOre: number;
+}
+/** A family, whose slots are whole visits rather than single openings. */
+export interface TimeScreenParty {
+    /** The basket, for the chip label — who is being served, and the family size. */
+    items: WizardItem[];
+    mode: 'sequential' | 'parallel';
+    /** Whole visits in the mode the visitor chose. */
+    slots: PartySlot[];
+    /** When a back-to-back visit starting at `slot.startTs` ends (the sequential chip's «→ 16:00»). */
+    chipEndTs: (slot: PartySlot) => number;
+    /**
+     * The rescue for a `sequential` family whose day on screen has no
+     * back-to-back opening: a simultaneous visit that day, or `null`. Asked about
+     * the day actually on screen, only in `sequential` mode.
+     */
+    alternativeFor?: (dayTs: number) => PartySlot | null;
+    /** The machine holds stylist ids; the parallel chip names people. */
+    resolveStylistName: (resourceId: string) => string | null;
+    onPick: (slot: PartySlot) => void;
+}
+export interface TimeScreenProps {
+    labels: TimeScreenLabels;
+    format: BookingFormat;
+    /** Dayparts in display order; `format.clock.daypartOf` returns their keys. */
+    dayparts: readonly BookingDaypart[];
+    /** Free slots, any number of days' worth. */
+    slots: BookingSlotDto[];
+    /**
+     * The days availability was asked for, as an instant inside each. Without it
+     * the strip can only be the days that have slots — and a booked-out day has
+     * none, so it could never be shown.
+     */
+    days?: number[];
+    /**
+     * The business's open dates over the same window, or `null` when they could
+     * not be read (NOT the same as `[]`, which says it keeps no hours at all).
+     * A date missing from the list is one it keeps no hours on. This is what
+     * separates «closed», «too late today» and «full» — free slots alone cannot.
+     */
+    openDays?: readonly BookingDayDto[] | null;
+    /**
+     * The stylist the visitor asked for by name. Holds the empty-day card back
+     * from claiming «full»: the hours are the business's, so an open day with no
+     * slots may just be a day that stylist does not work.
+     */
+    stylistName?: string | null;
+    /** The instant that was taken while the visitor was typing, if one was. */
+    takenSlotTs?: number | null;
+    /** `null` renders every phone sentence without a link. */
+    phone?: string | null;
+    /**
+     * Offer «show the whole month» under the day strip. Every cell is coloured
+     * from the same days the strip is built from; nothing outside them is tappable.
+     */
+    monthView?: boolean;
+    /**
+     * The weekend note for a day: `null` when the basket never pays a surcharge,
+     * otherwise its rate and the basket total priced on `dayTs` (asked about
+     * weekdays too — the row is kept, empty, so a day tap cannot move the grid).
+     */
+    weekendNote?: (dayTs: number) => WeekendNote | null;
+    /**
+     * The hour the visitor already holds, when moving an appointment. Drawn among
+     * the chips, marked and not tappable; availability can never return it.
+     */
+    currentSlotTs?: number | null;
+    onPick: (slot: BookingSlotDto) => void;
+    /** A family. Present, its slots replace `slots` entirely. */
+    party?: TimeScreenParty;
+    /** «Now», for today / tomorrow and whether today is over. Defaults to `Date.now()`. */
+    now?: number;
+    classNames?: SlotClassNames<TimeScreenSlot>;
+    components?: TimeScreenComponents;
+}
+/**
+ * Where one day stands with the business — the question an empty day cannot
+ * answer on its own.
+ * - `unknown` — the hours could not be read.
+ * - `closed` — no hours on the date, or hours posted and shut anyway (holiday).
+ * - `over` — open, but the last start this visit could take has passed.
+ * - `open` — open, with a start still ahead.
+ */
+export type DayStanding = 'unknown' | 'closed' | 'over' | 'open';
+export declare function TimeScreen({ labels, format, dayparts, slots, days, openDays, stylistName, takenSlotTs, phone, weekendNote, currentSlotTs, monthView, onPick, party, now: nowProp, classNames, components, }: TimeScreenProps): import("react").JSX.Element;
+export interface TakenToastProps {
+    labels: Pick<TimeScreenLabels, 'time.taken.message' | 'time.taken.close'>;
+    /** The instant that was just lost; each new one is a fresh toast. */
+    takenSlotTs: number | null;
+    className?: string;
+}
+/**
+ * «That one was just taken», as a toast over the page. Fixed, so it moves
+ * nothing; the ringed chips carry the message once it has gone. Render it ONCE,
+ * outside any skeleton-or-step switch, so a re-read of the openings cannot
+ * remount it. The live region is mounted empty and filled after mount.
+ */
+export declare function TakenToast({ labels, takenSlotTs, className }: TakenToastProps): import("react").JSX.Element;
+export interface TimeScreenSkeletonProps {
+    labels: Pick<TimeScreenLabels, 'time.heading' | 'time.loading' | 'time.skeleton.dayPlaceholder'>;
+    /** How many day chips to hold. */
+    days?: number;
+    /** Hold the «show the whole month» row too, when the real step will draw it. */
+    monthView?: boolean;
+    /** Hold the weekend-surcharge row, when the basket pays one — the real step keeps it on every day. */
+    surchargeRow?: boolean;
+    className?: string;
+}
+/**
+ * The time step before its openings are in: the same heading, a strip of day
+ * chips and a daypart of time chips, each built from the real chip's own button
+ * classes so every box is the same size.
+ */
+export declare function TimeScreenSkeleton({ labels, days, monthView, surchargeRow, className, }: TimeScreenSkeletonProps): import("react").JSX.Element;