@medalsocial/meda 3.0.0 → 3.2.0

package/dist/booking/portal/visit-history.d.ts

@@ -0,0 +1,63 @@
+import { type ComponentType } from 'react';
+import type { BookingClock, BookingFormat } from '../format.js';
+import { type SlotClassNames } from '../slots.js';
+import type { PortalBookingDto } from '../types.js';
+export declare const VISIT_HISTORY_LABEL_KEYS: readonly ["history.heading", "history.empty", "history.serviceFallback", "history.count.one", "history.count.other", "history.unknownAmount"];
+/** `history.count.*` take `{count}` and `{year}`. */
+export type VisitHistoryLabels = Record<(typeof VISIT_HISTORY_LABEL_KEYS)[number], string>;
+/**
+ * - `root`: the section. - `heading`. - `empty`: the no-visits box.
+ * - `yearChip` / `yearChipSelected`: the year switcher's buttons.
+ * - `list`. - `row`: one visit. - `total`: the year's summary bar.
+ */
+export type VisitHistorySlot = 'root' | 'heading' | 'empty' | 'yearChip' | 'yearChipSelected' | 'list' | 'row' | 'total';
+/**
+ * One year of completed visits, newest first. `totalOre` is `null` unless
+ * EVERY visit that year carried a price — «we do not know», not «nothing».
+ *
+ * (Declared here: the shared `VisitYear` in `types.ts` carries `bookings` but
+ * no total.)
+ */
+export interface VisitHistoryYear {
+    year: number;
+    visits: PortalBookingDto[];
+    totalOre: number | null;
+}
+/**
+ * The visits behind the history section, grouped by the year the BUSINESS
+ * says they happened in (a visit at 00:30 on 1 January belongs to the year the
+ * business's calendar says, not the reader's).
+ *
+ * Completed only: a cancelled appointment is not a visit that happened, and
+ * adding it to a year's total would bill the user for a chair nobody sat in.
+ */
+export declare function visitHistoryYears(past: readonly PortalBookingDto[], clock: Pick<BookingClock, 'dayKey'>): VisitHistoryYear[];
+export interface VisitRowProps {
+    visit: PortalBookingDto;
+    labels: VisitHistoryLabels;
+    format: BookingFormat;
+    classNames?: SlotClassNames<VisitHistorySlot>;
+}
+export interface VisitHistoryComponents {
+    VisitRow?: ComponentType<VisitRowProps>;
+}
+export interface VisitHistoryProps {
+    /** Past bookings in any order and status; only completed ones are shown. */
+    past: PortalBookingDto[];
+    labels: VisitHistoryLabels;
+    format: BookingFormat;
+    /** Precomputed years; default `visitHistoryYears(past, format.clock)`. */
+    years?: VisitHistoryYear[];
+    /** `id` of the heading. Default `portal-history-heading`. */
+    headingId?: string;
+    classNames?: SlotClassNames<VisitHistorySlot>;
+    components?: VisitHistoryComponents;
+}
+/**
+ * «History» — every visit behind this user, by year, with the year's count
+ * and total. No receipt link: a button that downloaded nothing would be worse
+ * than the honest absence; the row still carries what a receipt would say.
+ */
+export declare function VisitHistory({ past, labels, format, years: yearsProp, headingId, classNames, components, }: VisitHistoryProps): import("react").JSX.Element;
+/** One visit (an `<li>`): what, then when · who for · who with, and the price. */
+export declare function DefaultVisitRow({ visit, labels, format, classNames }: VisitRowProps): import("react").JSX.Element;

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

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../../lib/utils.js';
+import { fillLabel } from '../labels.js';
+import { slotClass } from '../slots.js';
+export const VISIT_HISTORY_LABEL_KEYS = [
+    'history.heading',
+    'history.empty',
+    'history.serviceFallback',
+    'history.count.one',
+    'history.count.other',
+    'history.unknownAmount',
+];
+/**
+ * The visits behind the history section, grouped by the year the BUSINESS
+ * says they happened in (a visit at 00:30 on 1 January belongs to the year the
+ * business's calendar says, not the reader's).
+ *
+ * Completed only: a cancelled appointment is not a visit that happened, and
+ * adding it to a year's total would bill the user for a chair nobody sat in.
+ */
+export function visitHistoryYears(past, clock) {
+    const byYear = new Map();
+    for (const booking of past) {
+        if (booking.status !== 'completed')
+            continue;
+        const year = Number(clock.dayKey(booking.startTs).slice(0, 4));
+        const bucket = byYear.get(year);
+        if (bucket === undefined)
+            byYear.set(year, [booking]);
+        else
+            bucket.push(booking);
+    }
+    return [...byYear.entries()]
+        .sort(([a], [b]) => b - a)
+        .map(([year, visits]) => {
+        // ALL or nothing: summing only the priced rows would show a total smaller
+        // than what was actually paid, labelled as the year's spending.
+        const unknown = visits.some((visit) => visit.amountOre === null);
+        return {
+            year,
+            visits: visits.sort((a, b) => b.startTs - a.startTs),
+            totalOre: unknown ? null : visits.reduce((sum, visit) => sum + (visit.amountOre ?? 0), 0),
+        };
+    });
+}
+/**
+ * «History» — every visit behind this user, by year, with the year's count
+ * and total. No receipt link: a button that downloaded nothing would be worse
+ * than the honest absence; the row still carries what a receipt would say.
+ */
+export function VisitHistory({ past, labels, format, years: yearsProp, headingId = 'portal-history-heading', classNames, components, }) {
+    const years = yearsProp ?? visitHistoryYears(past, format.clock);
+    const [selected, setSelected] = useState(null);
+    const shown = years.find((year) => year.year === selected) ?? years[0];
+    const Row = components?.VisitRow ?? DefaultVisitRow;
+    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-4'), children: [_jsx("h2", { id: headingId, className: slotClass(classNames, 'heading', 'font-sans text-xl font-bold md:text-2xl'), children: labels['history.heading'] }), shown === undefined ? (_jsx("p", { className: slotClass(classNames, 'empty', 'rounded-lg border border-border bg-card px-5 py-4 text-muted-foreground'), children: labels['history.empty'] })) : (_jsxs(_Fragment, { children: [years.length > 1 && (_jsx("div", { className: "flex flex-wrap gap-2", children: years.map((year) => {
+                            const pressed = year.year === shown.year;
+                            return (_jsx("button", { type: "button", "aria-pressed": pressed, onClick: () => setSelected(year.year), className: cn(slotClass(classNames, 'yearChip', 'rounded-full border px-4 py-1.5 text-sm font-semibold transition-colors', pressed
+                                    ? 'border-foreground bg-foreground text-background'
+                                    : 'border-border hover:bg-muted'), pressed && classNames?.yearChipSelected), children: year.year }, year.year));
+                        }) })), _jsx("ul", { className: slotClass(classNames, 'list', 'divide-y divide-border border-y border-border'), children: shown.visits.map((visit) => (_jsx(Row, { visit: visit, labels: labels, format: format, classNames: classNames }, visit.bookingId))) }), _jsxs("p", { className: slotClass(classNames, 'total', 'flex flex-wrap items-baseline justify-between gap-3 rounded-lg bg-muted px-5 py-4'), children: [_jsx("span", { className: "font-semibold", children: fillLabel(labels[shown.visits.length === 1 ? 'history.count.one' : 'history.count.other'], { count: shown.visits.length, year: shown.year }) }), _jsx("span", { className: "font-sans text-lg font-bold tabular-nums", children: shown.totalOre === null
+                                    ? labels['history.unknownAmount']
+                                    : format.price(shown.totalOre) })] })] }))] }));
+}
+/** One visit (an `<li>`): what, then when · who for · who with, and the price. */
+export function DefaultVisitRow({ visit, labels, format, classNames }) {
+    const detail = [format.clock.date(visit.startTs), visit.bookedForName, visit.resourceName]
+        .filter(Boolean)
+        .join(' · ');
+    return (_jsxs("li", { className: slotClass(classNames, 'row', 'flex flex-wrap items-baseline gap-x-4 gap-y-1 py-4'), children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block font-semibold", children: visit.serviceName ?? labels['history.serviceFallback'] }), _jsx("span", { className: "block text-sm text-muted-foreground", children: detail })] }), _jsx("span", { className: "font-bold tabular-nums", children: visit.amountOre === null ? labels['history.unknownAmount'] : format.price(visit.amountOre) })] }));
+}

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

@@ -0,0 +1,137 @@
+import { type ComponentType } from 'react';
+import type { BookingFormat } from './format.js';
+import { type SlotClassNames } from './slots.js';
+import type { BookingServiceDto } from './types.js';
+/**
+ * The service step — what should be done?
+ *
+ * Presentational. A tap raises `onPick` and the caller's machine decides what
+ * that means; nothing here knows which step comes next or whether the basket
+ * already holds a child.
+ */
+export declare const SERVICE_SCREEN_LABEL_KEYS: readonly ["service.heading", "service.categoriesLegend", "service.sameAsLast", "service.chooseOther", "service.duration", "service.phoneOnly", "service.phoneOnlyLinkLabel", "service.ageDivider.named", "service.ageDivider.unnamed", "service.party.listLabel", "service.party.adultAlone", "service.party.nothingFits", "service.party.remove"];
+export type ServiceScreenLabels = Record<(typeof SERVICE_SCREEN_LABEL_KEYS)[number], string>;
+/**
+ * - `root` — the `<section>`
+ * - `heading` — the `<h2>`
+ * - `pill` / `pillSelected` — a category pill / the marked one
+ * - `groupHeading` — a category's (or a party member's) `<h3>`
+ * - `card` / `cardSelected` — a service card / a pressed one (passed to `ServiceCard`)
+ */
+export type ServiceScreenSlot = 'root' | 'heading' | 'pill' | 'pillSelected' | 'groupHeading' | 'card' | 'cardSelected';
+/** One service group, in display order. */
+export interface ServiceScreenCategory {
+    key: string;
+    /** The pill's and the section heading's text. */
+    label: string;
+}
+/** A person's «same as last time», and the one-line note when it was swapped (e.g. for age). */
+export interface ServiceSuggestion {
+    service: BookingServiceDto;
+    note?: string;
+}
+/** One chair on the step for a family — who, as the section heading names them. */
+export interface ServicePartyPerson {
+    key: string;
+    /** The section heading, e.g. «Theo · 7 years», «Child 2», «Myself». */
+    label: string;
+    adult: boolean;
+    suggestion?: ServiceSuggestion | null;
+    /** The child's own name, for the age divider; absent for an anonymous seat. */
+    name?: string;
+}
+export interface ServiceCardProps {
+    service: BookingServiceDto;
+    /**
+     * `book` — a one-tap card that answers the step;
+     * `choice` — one person's pressed/unpressed choice in a family;
+     * `phone` — not bookable online: no button, a number to call instead.
+     */
+    kind: 'book' | 'choice' | 'phone';
+    selected: boolean;
+    onPick: () => void;
+    /** The number for `phone` cards; `null` renders the sentence without a link. */
+    phone: string | null;
+    format: BookingFormat;
+    labels: ServiceScreenLabels;
+    className?: string;
+    selectedClassName?: string;
+}
+export interface ServiceScreenComponents {
+    ServiceCard?: ComponentType<ServiceCardProps>;
+}
+export interface ServiceScreenProps {
+    labels: ServiceScreenLabels;
+    format: BookingFormat;
+    /** The full catalogue, in the order the source returned it. */
+    services: BookingServiceDto[];
+    /** The groups, in display order. Only groups with services are drawn. */
+    categories: ServiceScreenCategory[];
+    /**
+     * The group a service is filed under. Default: its `category` when that is
+     * one of `categories`, else the LAST category — a service from a category
+     * nobody planned for is filed at the end rather than dropped off the page.
+     */
+    categoryOf?: (service: BookingServiceDto) => string;
+    /**
+     * For a family: the category that is the children's menu. A child is
+     * offered only it, an adult everything else. Absent: no split.
+     */
+    childCategory?: string;
+    /**
+     * Whether a bookable service suits the person at `personIndex` (0 for a
+     * party of one) — typically their age on the day against the service's age
+     * band. `false` moves it below a divider: suggested against, never refused.
+     * Default: everything fits.
+     */
+    serviceFits?: (service: BookingServiceDto, personIndex: number) => boolean;
+    /**
+     * The business's number, for the services that cannot be booked online.
+     * `null` renders the same sentence without a link: a `tel:` that dials
+     * nothing looks like an offer and fails in the visitor's hand.
+     */
+    phone?: string | null;
+    /** The category pill to open on (e.g. from a link). Unknown or empty categories are ignored. */
+    initialCategory?: string | null;
+    onPick: (service: BookingServiceDto) => void;
+    /**
+     * A FAMILY: the people the first step seated, when there is more than one,
+     * each answered on their own. Absent or a single person, the step is the
+     * one-tap catalogue and `onPick` is the answer.
+     */
+    party?: {
+        people: ReadonlyArray<ServicePartyPerson>;
+        /** `choices[i]` is `people[i]`'s service so far, `null` for none yet. */
+        choices: ReadonlyArray<{
+            id: string;
+        } | null>;
+        onPickFor: (index: number, service: BookingServiceDto) => void;
+        /** Take one person out of the party — the way on when nothing fits them in a party this size. */
+        onRemove?: (index: number) => void;
+    };
+    /** «Same as last time» for a party of one, offered first. The catalogue below stays whole. */
+    suggestion?: ServiceSuggestion | null;
+    /** The service already chosen for a party of one. */
+    chosenId?: string | null;
+    /** The child's name for a party of one, for the age divider. */
+    childName?: string | null;
+    /**
+     * The possessive of a name for the age divider's `{nameGenitive}` — the
+     * rule is the language's (e.g. «Theos» / «Jonas'»). Default: the name as is.
+     */
+    possessive?: (name: string) => string;
+    classNames?: SlotClassNames<ServiceScreenSlot>;
+    components?: ServiceScreenComponents;
+}
+export declare function ServiceScreen(props: ServiceScreenProps): import("react").JSX.Element;
+/**
+ * The default service card.
+ *
+ * - `book`: the whole card is the target — on a phone, anything smaller is a
+ *   missed tap.
+ * - `choice`: pressed rather than advancing.
+ * - `phone`: not a button, deliberately. The business does not take this one
+ *   online, and a tap target that accepts the tap and does nothing is the dead
+ *   end the phone number replaces. The card stays so the catalogue is whole.
+ */
+export declare function DefaultServiceCard({ service, kind, selected, onPick, phone, format, labels, className, selectedClassName, }: ServiceCardProps): import("react").JSX.Element;

package/dist/booking/service-screen.js

@@ -0,0 +1,233 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../lib/utils.js';
+import { BookingButton } from './internal/ui.js';
+import { fillLabel } from './labels.js';
+import { slotClass } from './slots.js';
+/**
+ * The service step — what should be done?
+ *
+ * Presentational. A tap raises `onPick` and the caller's machine decides what
+ * that means; nothing here knows which step comes next or whether the basket
+ * already holds a child.
+ */
+export const SERVICE_SCREEN_LABEL_KEYS = [
+    'service.heading',
+    'service.categoriesLegend',
+    'service.sameAsLast',
+    'service.chooseOther',
+    'service.duration',
+    'service.phoneOnly',
+    'service.phoneOnlyLinkLabel',
+    'service.ageDivider.named',
+    'service.ageDivider.unnamed',
+    'service.party.listLabel',
+    'service.party.adultAlone',
+    'service.party.nothingFits',
+    'service.party.remove',
+];
+const HEADING_ID = 'booking-service-heading';
+function groupHeadingId(category) {
+    return `booking-services-${category}`;
+}
+const allFit = () => true;
+const asIs = (name) => name;
+/** The age divider's sentence for `name`. */
+function ageDividerLabel(labels, name, possessive) {
+    if (!name)
+        return labels['service.ageDivider.unnamed'];
+    return fillLabel(labels['service.ageDivider.named'], {
+        name,
+        nameGenitive: possessive(name),
+    });
+}
+/** Split a menu into what fits and what usually does not. Phone-only cards always stay put. */
+function byFit(services, fits) {
+    const fitting = [];
+    const unlikely = [];
+    for (const service of services) {
+        (!service.bookableOnline || fits(service) ? fitting : unlikely).push(service);
+    }
+    return { fitting, unlikely };
+}
+function cardProps(shared) {
+    return {
+        format: shared.format,
+        labels: shared.labels,
+        className: shared.classNames?.card,
+        selectedClassName: shared.classNames?.cardSelected,
+    };
+}
+export function ServiceScreen(props) {
+    const shared = {
+        labels: props.labels,
+        format: props.format,
+        classNames: props.classNames,
+        Card: props.components?.ServiceCard ?? DefaultServiceCard,
+        possessive: props.possessive ?? asIs,
+    };
+    if (props.party && props.party.people.length > 1) {
+        return _jsx(PartyServiceScreen, { ...props, party: props.party, shared: shared });
+    }
+    return _jsx(SingleServiceScreen, { ...props, shared: shared });
+}
+function Heading({ shared }) {
+    return (_jsx("h2", { id: HEADING_ID, tabIndex: -1, className: slotClass(shared.classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: shared.labels['service.heading'] }));
+}
+/**
+ * Below the ordinary list: what usually does not suit this person, still one
+ * tap away. A labelled list, so a screen reader hears the divider as the name
+ * of what follows rather than as a stray sentence.
+ */
+function UnlikelyForAge({ id, name, services, shared, children, }) {
+    if (services.length === 0)
+        return null;
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-3 pt-2", children: [_jsx("span", { "aria-hidden": "true", className: "h-px flex-1 bg-border" }), _jsx("p", { id: id, className: "text-sm text-muted-foreground", children: ageDividerLabel(shared.labels, name, shared.possessive) }), _jsx("span", { "aria-hidden": "true", className: "h-px flex-1 bg-border" })] }), _jsx("ul", { "aria-labelledby": id, className: "space-y-2", children: services.map((service) => (_jsx("li", { children: children(service) }, service.id))) })] }));
+}
+function SingleServiceScreen({ services, categories, categoryOf, serviceFits = allFit, phone = null, initialCategory = null, onPick, suggestion = null, chosenId = null, childName = null, shared, }) {
+    const { Card, labels, classNames } = shared;
+    const fileUnder = categoryOf ?? defaultCategoryOf(categories);
+    // What certainly does not suit this person moves below a divider, still
+    // bookable. Telephone-only cards stay where they are: the list stays whole.
+    const { fitting: offered, unlikely } = byFit(services, (service) => serviceFits(service, 0));
+    const groups = categories
+        .map((category) => ({
+        category,
+        items: offered.filter((service) => fileUnder(service) === category.key),
+    }))
+        .filter((group) => group.items.length > 0);
+    // Null until the visitor taps a pill, then read back through the groups that
+    // exist — seeding it with the first category's key instead would leave a
+    // catalogue without that group pointing at a section that is not on the
+    // page. An `initialCategory` seeds it (in the initialiser, so the server
+    // render already marks the right pill) when that group exists.
+    const [tapped, setTapped] = useState(() => initialCategory !== null && groups.some((group) => group.category.key === initialCategory)
+        ? initialCategory
+        : null);
+    const current = tapped ?? groups[0]?.category.key ?? null;
+    function jumpTo(category) {
+        setTapped(category);
+        // The pills mark where you are in the list; they never shorten it.
+        // Filtering would hide most of the catalogue behind a default nobody
+        // chose. `scrollIntoView` is absent in jsdom and older browsers; the tap
+        // still marks the pill, which is the half that matters.
+        document.getElementById(groupHeadingId(category))?.scrollIntoView?.({
+            behavior: 'smooth',
+            block: 'start',
+        });
+    }
+    return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx(Heading, { shared: shared }), suggestion && (_jsxs("div", { className: "space-y-2", children: [_jsx(SameAsLast, { suggestion: suggestion, selected: chosenId === suggestion.service.id, onPick: () => onPick(suggestion.service), shared: shared }), _jsx("p", { className: "text-sm font-semibold text-muted-foreground", children: labels['service.chooseOther'] })] })), groups.length > 1 && (_jsxs("fieldset", { className: "flex flex-wrap gap-2", children: [_jsx("legend", { className: "sr-only", children: labels['service.categoriesLegend'] }), groups.map(({ category }) => {
+                        const marked = category.key === current;
+                        return (_jsx(BookingButton, { variant: "outline", size: "sm", "aria-pressed": marked, onClick: () => jumpTo(category.key), 
+                            // Weight and ring carry the selection alongside the colour, so
+                            // it survives a monochrome screen and a colour-blind visitor.
+                            className: cn('rounded-full', marked
+                                ? 'font-bold ring-2 ring-primary bg-primary/10 border-primary text-foreground'
+                                : 'font-normal', classNames?.pill, marked && classNames?.pillSelected), children: category.label }, category.key));
+                    })] })), groups.map(({ category, items }) => (_jsxs("section", { "aria-labelledby": groupHeadingId(category.key), 
+                // Clears a sticky header when a pill jumps here.
+                className: "scroll-mt-24 space-y-3", children: [_jsx("h3", { id: groupHeadingId(category.key), className: slotClass(classNames, 'groupHeading', 'font-sans text-lg font-bold text-muted-foreground'), children: category.label }), _jsx("ul", { className: "space-y-2", children: items.map((service) => (_jsx("li", { children: _jsx(Card, { service: service, kind: service.bookableOnline ? 'book' : 'phone', selected: false, onPick: () => onPick(service), phone: phone, ...cardProps(shared) }) }, service.id))) })] }, category.key))), _jsx(UnlikelyForAge, { id: "booking-services-unlikely", name: childName, services: unlikely, shared: shared, children: (service) => (_jsx(Card, { service: service, kind: "book", selected: false, onPick: () => onPick(service), phone: phone, ...cardProps(shared) })) })] }));
+}
+function defaultCategoryOf(categories) {
+    const known = new Set(categories.map((category) => category.key));
+    const fallback = categories[categories.length - 1]?.key ?? '';
+    return (service) => (known.has(service.category) ? service.category : fallback);
+}
+/**
+ * The step for a family: one short list per person, each answered on its own.
+ *
+ * What a person in a party can have is what the business takes online and —
+ * like the booking engine — nothing whose `maxPerBooking` is below the party's
+ * size: the strictest service in a request sets the limit for all of it. With
+ * a `childCategory`, a child gets that menu and an adult everything else,
+ * which is often nothing, and is told so.
+ */
+function PartyServiceScreen({ services, categories, categoryOf, childCategory, serviceFits = allFit, party, shared, }) {
+    const { Card, labels, classNames } = shared;
+    const fileUnder = categoryOf ?? defaultCategoryOf(categories);
+    const size = party.people.length;
+    const fits = services.filter((service) => service.bookableOnline && service.maxPerBooking >= size);
+    return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx(Heading, { shared: shared }), party.people.map((person, index) => {
+                const headingId = `booking-service-for-${index}`;
+                const { fitting: menu, unlikely } = byFit(
+                // A grown-up gets the grown-ups' menu and a child the children's —
+                // a kids' cut for «myself» is not an answer, it is a way round the
+                // note below that books the wrong thing.
+                childCategory === undefined
+                    ? fits
+                    : fits.filter((service) => (fileUnder(service) === childCategory) === !person.adult), (service) => serviceFits(service, index));
+                const chosen = party.choices[index]?.id ?? null;
+                const suggestion = person.suggestion ?? null;
+                const pick = (service) => party.onPickFor(index, service);
+                const choiceCard = (service) => (_jsx(Card, { service: service, kind: "choice", selected: service.id === chosen, onPick: () => pick(service), phone: null, ...cardProps(shared) }));
+                const unlikelyList = (_jsx(UnlikelyForAge, { id: `booking-service-unlikely-${index}`, name: person.name, services: unlikely, shared: shared, children: choiceCard }));
+                const listLabel = fillLabel(labels['service.party.listLabel'], { label: person.label });
+                let body;
+                if (suggestion && menu.some((service) => service.id === suggestion.service.id)) {
+                    body = (_jsx(PersonWithSuggestion, { listLabel: listLabel, suggestion: suggestion, menu: menu, chosen: chosen, onPick: pick, choiceCard: choiceCard, unlikely: unlikelyList, hasUnlikely: unlikely.length > 0, shared: shared }));
+                }
+                else if (menu.length === 0 && unlikely.length === 0) {
+                    body = (_jsx(NothingInThisParty, { person: person, labels: labels, onRemove: party.onRemove ? () => party.onRemove?.(index) : undefined }));
+                }
+                else {
+                    body = (_jsxs(_Fragment, { children: [menu.length > 0 && (_jsx("ul", { "aria-label": listLabel, className: "space-y-2", children: menu.map((service) => (_jsx("li", { children: choiceCard(service) }, service.id))) })), unlikelyList] }));
+                }
+                return (_jsxs("section", { "aria-labelledby": headingId, className: "space-y-3", children: [_jsx("h3", { id: headingId, className: slotClass(classNames, 'groupHeading', 'font-sans text-lg font-bold'), children: person.label }), body] }, person.key));
+            })] }));
+}
+/**
+ * Nothing can be booked for this person IN A PARTY THIS SIZE.
+ *
+ * The engine's rule: one request holds at most as many people as the
+ * STRICTEST `maxPerBooking` among its services allows, so a one-per-booking
+ * adult service cannot ride along with the children's. The step says so in
+ * one line (the caller keeps «next» shut) and offers the one way on: take them
+ * out, and book them as their own time.
+ */
+function NothingInThisParty({ person, labels, onRemove, }) {
+    const values = { label: person.label };
+    return (_jsxs("div", { className: "space-y-2 rounded-lg border border-dashed border-border px-5 py-4 text-sm", children: [_jsx("p", { children: fillLabel(labels[person.adult ? 'service.party.adultAlone' : 'service.party.nothingFits'], values) }), onRemove && (_jsx("button", { type: "button", onClick: onRemove, className: "font-semibold text-primary underline underline-offset-4", children: fillLabel(labels['service.party.remove'], values) }))] }));
+}
+/**
+ * One person with a «same as last time»: the suggestion as the answer, and the
+ * rest of the menu one tap away behind «choose something else». The menu opens
+ * by itself when the answer is something else already, so a choice is never
+ * hidden.
+ */
+function PersonWithSuggestion({ listLabel, suggestion, menu, chosen, onPick, choiceCard, unlikely, hasUnlikely, shared, }) {
+    const [open, setOpen] = useState(chosen !== null && chosen !== suggestion.service.id);
+    const others = menu.filter((service) => service.id !== suggestion.service.id);
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(SameAsLast, { suggestion: suggestion, selected: chosen === suggestion.service.id, onPick: () => onPick(suggestion.service), shared: shared }), (others.length > 0 || hasUnlikely) && (_jsx("button", { type: "button", "aria-expanded": open, onClick: () => setOpen((current) => !current), className: "text-sm font-semibold text-primary underline underline-offset-4", children: shared.labels['service.chooseOther'] })), open && others.length > 0 && (_jsx("ul", { "aria-label": listLabel, className: "space-y-2", children: others.map((service) => (_jsx("li", { children: choiceCard(service) }, service.id))) })), open && unlikely] }));
+}
+/** «Same as last time · Kids' cut» — the person's last service, as one tap. */
+function SameAsLast({ suggestion, selected, onPick, shared, }) {
+    const { service, note } = suggestion;
+    const { labels, format, classNames } = shared;
+    return (_jsxs("div", { className: "space-y-1", children: [_jsxs("button", { type: "button", "aria-pressed": selected, onClick: onPick, className: cn('flex min-h-14 w-full items-baseline justify-between gap-4 rounded-lg border px-5 py-4 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary', selected
+                    ? 'border-primary bg-primary/5 ring-2 ring-primary'
+                    : 'border-primary/60 bg-card hover:border-primary', classNames?.card, selected && classNames?.cardSelected), children: [_jsxs("span", { children: [_jsx("span", { className: "block text-xs font-bold tracking-wide text-primary uppercase", children: labels['service.sameAsLast'] }), _jsx("span", { className: "font-medium", children: service.name })] }), _jsxs("span", { className: "flex items-baseline gap-4 text-right", children: [_jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: fillLabel(labels['service.duration'], { minutes: service.durationMinutes }) }), _jsx("span", { className: "whitespace-nowrap font-semibold text-foreground tabular-nums", children: format.price(service.priceOre) })] })] }), note && _jsx("p", { className: "text-sm text-muted-foreground", children: note })] }));
+}
+/**
+ * The default service card.
+ *
+ * - `book`: the whole card is the target — on a phone, anything smaller is a
+ *   missed tap.
+ * - `choice`: pressed rather than advancing.
+ * - `phone`: not a button, deliberately. The business does not take this one
+ *   online, and a tap target that accepts the tap and does nothing is the dead
+ *   end the phone number replaces. The card stays so the catalogue is whole.
+ */
+export function DefaultServiceCard({ service, kind, selected, onPick, phone, format, labels, className, selectedClassName, }) {
+    const duration = fillLabel(labels['service.duration'], { minutes: service.durationMinutes });
+    const price = (_jsx("span", { className: "whitespace-nowrap font-semibold text-foreground tabular-nums", children: format.price(service.priceOre) }));
+    if (kind === 'phone') {
+        return (_jsxs("div", { className: cn('flex min-h-14 w-full items-baseline justify-between gap-4 rounded-lg border border-dashed border-border px-5 py-4', className), children: [_jsx("span", { className: "font-medium", children: service.name }), _jsxs("span", { className: "flex items-baseline gap-4 text-right", children: [_jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: duration }), _jsxs("span", { className: "text-sm", children: [labels['service.phoneOnly'], phone ? (_jsxs(_Fragment, { children: [' – ', _jsx("a", { href: format.telHref(phone), "aria-label": fillLabel(labels['service.phoneOnlyLinkLabel'], { phone }), className: "font-semibold text-primary underline underline-offset-4", children: phone })] })) : null] })] })] }));
+    }
+    if (kind === 'choice') {
+        return (_jsxs("button", { type: "button", "aria-pressed": selected, onClick: onPick, className: cn('flex min-h-12 w-full items-baseline justify-between gap-4 rounded-lg border px-4 py-3 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary', selected
+                ? 'border-primary bg-primary/5 font-semibold ring-2 ring-primary'
+                : 'border-border bg-card hover:border-primary', className, selected && selectedClassName), children: [_jsx("span", { className: "font-medium", children: service.name }), _jsxs("span", { className: "flex items-baseline gap-3 text-right", children: [_jsx("span", { className: "text-muted-foreground tabular-nums", children: duration }), price] })] }));
+    }
+    return (_jsxs("button", { type: "button", onClick: onPick, className: cn('flex min-h-14 w-full items-baseline justify-between gap-4 rounded-lg border border-border bg-card px-5 py-4 text-left transition-colors hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary', className), children: [_jsx("span", { className: "font-medium", children: service.name }), _jsxs("span", { className: "flex items-baseline gap-4 text-right", children: [_jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: duration }), price] })] }));
+}

package/dist/booking/slots.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentType } from 'react';
+import { cn } from '../lib/utils.js';
+/**
+ * Per-slot class overrides a screen accepts: `classNames={{ card: '…' }}`.
+ * Merged AFTER the screen's own classes with tailwind-merge, so an override
+ * wins over a conflicting default utility.
+ */
+export type SlotClassNames<Slot extends string> = Partial<Record<Slot, string>>;
+/** `cn(base, classNames?.[slot])` — the one way a screen applies a slot override. */
+export declare function slotClass<Slot extends string>(classNames: SlotClassNames<Slot> | undefined, slot: Slot, ...base: Parameters<typeof cn>): string;
+/** Card-level renderer overrides: `components={{ ServiceCard: MyCard }}`. */
+export type ScreenComponents<Map extends Record<string, ComponentType<never>>> = Partial<Map>;

package/dist/booking/slots.js

@@ -0,0 +1,5 @@
+import { cn } from '../lib/utils.js';
+/** `cn(base, classNames?.[slot])` — the one way a screen applies a slot override. */
+export function slotClass(classNames, slot, ...base) {
+    return cn(...base, classNames?.[slot]);
+}