@medalsocial/meda 3.0.0 → 3.2.0

package/dist/booking/types.d.ts

@@ -0,0 +1,284 @@
+/**
+ * Structural data shapes the booking screens take as props.
+ *
+ * These are local copies, on purpose: `@medalsocial/meda/booking` renders a
+ * booking flow but never fetches one, so it must not depend on the booking
+ * package or the Medal SDK. Whatever produces the data (the booking package,
+ * a test, a story) only has to be assignable to these shapes.
+ *
+ * Conventions every shape follows:
+ * - instants are epoch milliseconds (`…Ts`), never ISO strings;
+ * - money is integer minor units (`…Ore`: øre / cents);
+ * - optional fields are ABSENT rather than `undefined`-or-blank, except where a
+ *   `null` is itself an answer (documented on the field).
+ */
+/** One bookable service as the wizard carries it. */
+export interface WizardService {
+    id: string;
+    name: string;
+    /** The service group key (see `ServiceScreen`'s `categories`). */
+    category: string;
+    durationMinutes: number;
+    priceOre: number;
+    /** How many of this service one booking may hold. */
+    maxPerBooking: number;
+    /** 0 when there is no weekend surcharge. */
+    weekendSurchargePct: number;
+    bufferBeforeMinutes: number;
+    bufferAfterMinutes: number;
+    /** Inclusive age bounds, when the service is age-restricted. */
+    ageMinYears?: number;
+    ageMaxYears?: number;
+}
+/** A service as the service step lists it: online-bookable or «call us». */
+export interface BookingServiceDto extends WizardService {
+    bookableOnline: boolean;
+}
+/** One stylist (bookable resource). */
+export interface BookingResourceDto {
+    id: string;
+    name: string;
+    photoUrl: string | null;
+    bio: string | null;
+    /** The services this resource can perform. */
+    serviceIds: string[];
+    sortOrder: number;
+}
+/** One free slot. `resourceId: null` = «first available», not yet resolved. */
+export interface BookingSlotDto {
+    startTs: number;
+    resourceId: string | null;
+}
+/**
+ * One date the business keeps opening hours on. A date missing from the list
+ * is one it keeps no hours on. `lastStartTs` is the last start THIS visit could
+ * take (not the closing time); `null` = open-hours posted but shut (holiday).
+ */
+export interface BookingDayDto {
+    dayKey: string;
+    opensTs: number;
+    closesTs: number;
+    lastStartTs: number | null;
+}
+export type WizardStep = 'who' | 'service' | 'when' | 'details';
+/** One seat in the booking: a child (named or not) or an adult. */
+export interface WizardPerson {
+    key: string;
+    adult?: boolean;
+    personId?: string;
+    name?: string;
+    birthYear?: number;
+    birthMonth?: number;
+}
+/** One line of the basket. */
+export interface WizardItem {
+    service: WizardService;
+    bookedForName?: string;
+    bookedForBirthYear?: number;
+    bookedForPersonId?: string;
+    bookedForBirthMonth?: number;
+    adult?: boolean;
+}
+export type WizardError = 'maxParty' | 'slotTaken' | 'conflict' | 'invalidInput' | 'unconfigured' | 'upstreamError' | 'inProgress';
+export type PartyMode = 'sequential' | 'parallel';
+export interface WizardState {
+    step: WizardStep;
+    people: WizardPerson[];
+    choices: Array<WizardService | null>;
+    items: WizardItem[];
+    resourceId: string | null;
+    stylistAnswered: boolean;
+    partyMode: PartyMode;
+    startTs: number | null;
+    resolvedResourceId: string | null;
+    partyResourceIds: string[] | null;
+    contact: {
+        phone: string;
+        name: string;
+        email: string;
+    };
+    notes: string;
+    consentTerms: boolean;
+    consentMarketing: boolean;
+    pendingService: WizardService | null;
+    error: WizardError | null;
+}
+/**
+ * The subset of the machine's actions the screens raise. A screen never
+ * reduces them — it hands them to its `onChange` / callback and the caller's
+ * machine decides what they mean.
+ */
+export type WizardAction = {
+    type: 'setPartyMode';
+    mode: PartyMode;
+} | {
+    type: 'goToStep';
+    step: WizardStep;
+} | {
+    type: 'setContact';
+    field: keyof WizardState['contact'];
+    value: string;
+} | {
+    type: 'setItemField';
+    index: number;
+    field: 'bookedForName';
+    value: string;
+} | {
+    type: 'setItemField';
+    index: number;
+    field: 'bookedForBirthYear';
+    value: number | null;
+} | {
+    type: 'setItemField';
+    index: number;
+    field: 'bookedForPersonId';
+    value: string | null;
+} | {
+    type: 'setNotes';
+    value: string;
+} | {
+    type: 'setConsent';
+    which: 'terms' | 'marketing';
+    accepted: boolean;
+};
+/** One stylist seat inside a family (party) slot. */
+export interface PartySeat {
+    startTs: number;
+    resourceId: string;
+}
+/** A whole family visit at one start. */
+export interface PartySlot {
+    startTs: number;
+    mode: PartyMode;
+    seats: PartySeat[];
+}
+/** An age, exact (`min === max`) or a two-year range when only the year is known. */
+export interface AgeRange {
+    min: number;
+    max: number;
+}
+/** A child the «add child» sheet collects. Never a full birth date. */
+export interface NewChild {
+    name: string;
+    birthYear: number;
+    birthMonth?: number;
+    notes?: string;
+}
+/** What an async save answers a sheet or form with. */
+export type SaveResult = {
+    ok: true;
+} | {
+    ok: false;
+    message: string;
+};
+export interface BookingLastVisit {
+    serviceId: string;
+    serviceName: string | null;
+    resourceId: string | null;
+    startTs: number;
+}
+export interface BookingFamilyMember {
+    name: string;
+    birthYear: number;
+    personId?: string;
+    birthMonth?: number;
+    preferredResourceId?: string;
+    lastVisit?: BookingLastVisit;
+}
+export interface BookingGuardian {
+    firstName: string | null;
+    lastName: string | null;
+    email: string;
+    phone: string | null;
+    family: BookingFamilyMember[];
+}
+export type BookingStatus = 'pending' | 'confirmed' | 'completed' | 'cancelled' | 'no_show';
+/** One booking as the manage screen shows it. Never carries the manage token. */
+export interface BookingManageDto {
+    bookingId: string;
+    status: BookingStatus;
+    rescheduledFromId: string | null;
+    startTs: number;
+    endTs: number;
+    serviceId: string | null;
+    serviceName: string;
+    resourceId: string | null;
+    resourceName: string;
+    bookedForName: string | null;
+    partySequenceId: string | null;
+    amountOre: number;
+    cancelWindowHours: number;
+    rescheduleWindowHours: number;
+    canCancel: boolean;
+    canReschedule: boolean;
+}
+export interface PortalFamilyMemberDto {
+    personId: string | null;
+    name: string;
+    birthYear: number;
+    birthMonth: number | null;
+    notes: string | null;
+    preferredResourceId: string | null;
+}
+/** What the business calls the people on a profile («barn» / «children»). */
+export interface PortalPersonNouns {
+    person: string;
+    persons: string;
+}
+export interface PortalProfileDto {
+    email: string;
+    firstName: string | null;
+    lastName: string | null;
+    phone: string | null;
+    family: PortalFamilyMemberDto[];
+    /** Whether Medal speaks birth months / notes / preferred stylist. */
+    personDetails: boolean;
+    marketingConsent: boolean;
+    labels?: PortalPersonNouns;
+    vippsLinked?: boolean;
+}
+export interface PortalBookingDto {
+    bookingId: string;
+    status: BookingStatus;
+    startTs: number;
+    endTs: number;
+    serviceId: string | null;
+    serviceName: string | null;
+    resourceId: string | null;
+    resourceName: string | null;
+    bookedForName: string | null;
+    bookedForPersonId: string | null;
+    bookedForBirthYear: number | null;
+    bookedForBirthMonth: number | null;
+    amountOre: number | null;
+    notes: string | null;
+    /** Where the booking is managed, when it can be. */
+    managePath: string | null;
+}
+export interface RebookSuggestion {
+    serviceId: string;
+    serviceName: string | null;
+    resourceId: string | null;
+    resourceName: string | null;
+    bookedForName: string | null;
+}
+/** One child's card on the portal, derived from the profile and the bookings. */
+export interface ChildSummary {
+    personId: string | null;
+    name: string;
+    birthYear: number;
+    birthMonth: number | null;
+    ageRange: AgeRange;
+    age: number;
+    lastVisitTs: number | null;
+    serviceId: string | null;
+    serviceName: string | null;
+    resourceId: string | null;
+    preferredResourceId: string | null;
+    nextVisitTs: number | null;
+}
+/** One year of visit history. */
+export interface VisitYear {
+    year: number;
+    bookings: PortalBookingDto[];
+}

package/dist/booking/types.js

@@ -0,0 +1,15 @@
+/**
+ * Structural data shapes the booking screens take as props.
+ *
+ * These are local copies, on purpose: `@medalsocial/meda/booking` renders a
+ * booking flow but never fetches one, so it must not depend on the booking
+ * package or the Medal SDK. Whatever produces the data (the booking package,
+ * a test, a story) only has to be assignable to these shapes.
+ *
+ * Conventions every shape follows:
+ * - instants are epoch milliseconds (`…Ts`), never ISO strings;
+ * - money is integer minor units (`…Ore`: øre / cents);
+ * - optional fields are ABSENT rather than `undefined`-or-blank, except where a
+ *   `null` is itself an answer (documented on the field).
+ */
+export {};

package/dist/booking/vipps-button.d.ts

@@ -0,0 +1,49 @@
+import { type SlotClassNames } from './slots.js';
+export declare const VIPPS_BUTTON_LABEL_KEYS: readonly ["vipps.button", "vipps.unavailable", "vipps.throttled"];
+export type VippsButtonLabels = Record<(typeof VIPPS_BUTTON_LABEL_KEYS)[number], string>;
+/** Why a Vipps start did NOT end in a redirect. `null` is silence. */
+export type VippsStartState = {
+    ok: false;
+    reason: 'unavailable' | 'throttled';
+} | null;
+/**
+ * The start action, in `useActionState`'s shape — so a server action with
+ * this signature can be passed straight through and the button keeps working
+ * before hydration. On success it is expected to navigate (redirect) and never
+ * answer; the only answers the button shows are the reasons it did not.
+ */
+export type VippsStartAction = (previous: VippsStartState, formData: FormData) => VippsStartState | Promise<VippsStartState>;
+/**
+ * - `root`: the `<form>`.
+ * - `button`: the submit button. meda draws it in the bridge `primary`
+ *   colours; a site that must show the provider's own brand colour passes
+ *   it here (e.g. its orange background and white text).
+ * - `notice`: the sentence under the button.
+ */
+export type VippsButtonSlot = 'root' | 'button' | 'notice';
+export interface VippsButtonProps {
+    /**
+     * The start action, handed to `useActionState` unwrapped so a server action
+     * can be passed straight through (the form then works before hydration, and
+     * a framework redirect thrown from it propagates). Report failures by
+     * returning `{ reason }` — they become the notice under the button. A thrown
+     * error is not caught here; it reaches the host's error boundary.
+     */
+    onVipps: VippsStartAction;
+    /** Where to land afterwards; rides along as a hidden `next` field. */
+    next?: string | null;
+    /** Replaces `labels['vipps.button']` (e.g. «Continue with Vipps» mid-flow). */
+    label?: string;
+    labels: VippsButtonLabels;
+    classNames?: SlotClassNames<VippsButtonSlot>;
+}
+/**
+ * «Log in with Vipps» — one button, one action, no fields.
+ *
+ * A real `<form action>` rather than an `onClick`: the action ends in a
+ * redirect, and a form submission is what lets the browser follow it as a
+ * plain navigation. It also means the button works before hydration when the
+ * action is a server action. `useFormStatus` must be read from INSIDE the
+ * form, hence the small inner component.
+ */
+export declare function VippsButton({ onVipps, next, label, labels, classNames }: VippsButtonProps): import("react").JSX.Element;

package/dist/booking/vipps-button.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useActionState, useId } from 'react';
+import { useFormStatus } from 'react-dom';
+import { bookingButtonClass } from './internal/ui.js';
+import { slotClass } from './slots.js';
+export const VIPPS_BUTTON_LABEL_KEYS = [
+    'vipps.button',
+    'vipps.unavailable',
+    'vipps.throttled',
+];
+function SubmitButton({ label, className }) {
+    const { pending } = useFormStatus();
+    return (_jsx("button", { type: "submit", "data-slot": "button", disabled: pending, "aria-busy": pending || undefined, className: className, children: label }));
+}
+/**
+ * «Log in with Vipps» — one button, one action, no fields.
+ *
+ * A real `<form action>` rather than an `onClick`: the action ends in a
+ * redirect, and a form submission is what lets the browser follow it as a
+ * plain navigation. It also means the button works before hydration when the
+ * action is a server action. `useFormStatus` must be read from INSIDE the
+ * form, hence the small inner component.
+ */
+export function VippsButton({ onVipps, next = null, label, labels, classNames }) {
+    const [state, formAction] = useActionState(onVipps, null);
+    const noticeId = `${useId()}-notice`;
+    const notice = state === null ? null : labels[`vipps.${state.reason}`];
+    return (_jsxs("form", { action: formAction, className: slotClass(classNames, 'root', 'space-y-3'), "aria-describedby": notice ? noticeId : undefined, children: [next && _jsx("input", { type: "hidden", name: "next", value: next }), _jsx(SubmitButton, { label: label ?? labels['vipps.button'], className: bookingButtonClass({
+                    size: 'lg',
+                    className: slotClass(classNames, 'button', 'w-full rounded-full bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring/40'),
+                }) }), _jsx("div", { "aria-live": "polite", children: notice && (_jsx("p", { id: noticeId, className: slotClass(classNames, 'notice', 'text-sm text-muted-foreground'), children: notice })) })] }));
+}

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

@@ -0,0 +1,121 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { type AddChildSheetLabels } from './add-child-sheet.js';
+import type { BookingFormat } from './format.js';
+import { type SlotClassNames } from './slots.js';
+import type { NewChild, SaveResult, WizardPerson } from './types.js';
+/**
+ * The first step — who is the visit for?
+ *
+ * Presentational, like the other steps: every answer leaves as `onChoose` and
+ * the caller's machine decides what it means.
+ *
+ * TWO SHAPES, one question:
+ *
+ * - **A guest** gets a row of chips (e.g. «1 child · 2 children · 3 children ·
+ *   Adult») and a chip is the whole answer: one tap, and the next step is on
+ *   screen. Nothing about the child is asked here.
+ * - **A logged-in parent** gets their children as cards — initial, name, a
+ *   line (age on the appointment day, last visit) — to tick, up to
+ *   `maxPeople`, plus a «myself (adult)» row, and moves on with the wizard's
+ *   own «next». Ticking is a live answer to the machine, so the sticky bar
+ *   knows when there is one.
+ *
+ * «+ Add child» opens a small sheet for either: a logged-in parent's new child
+ * is created by the caller (`onAddChild` resolves once it exists), a guest's
+ * lives only in this booking.
+ *
+ * SEMANTICS. The chips are a radio group (one answer of several); the cards
+ * are checkboxes in a fieldset whose legend says the rule. At the limit an
+ * unticked card is `aria-disabled`, not `disabled`: it stays in the tab order
+ * and says why it does nothing, instead of vanishing from a screen reader's
+ * list of the children.
+ *
+ * Heights are fixed — cards, chips and the dashed card are one size whatever
+ * they hold — so a login that swaps chips for cards, or a child that arrives
+ * from the sheet, grows the list by whole rows and moves nothing sideways.
+ */
+export declare const WHO_SCREEN_LABEL_KEYS: readonly ["who.heading", "who.guest.groupLabel", "who.guest.children.one", "who.guest.children.other", "who.guest.adult", "who.guest.addedList", "who.family.legend", "who.family.self", "who.family.limit", "addChild.trigger", "addChild.title", "addChild.description.saved", "addChild.description.local", "addChild.name", "addChild.birthYear", "addChild.birthYearPlaceholder", "addChild.birthMonth", "addChild.birthMonthUnknown", "addChild.notes", "addChild.missing", "addChild.submit", "addChild.close"];
+export type WhoScreenLabels = Record<(typeof WHO_SCREEN_LABEL_KEYS)[number], string> & AddChildSheetLabels;
+/**
+ * - `root` — the `<section>`
+ * - `heading` — the `<h2>`
+ * - `chip` / `chipSelected` — a guest chip / the pressed one
+ * - `card` / `cardSelected` — a person card (and the «myself» row) / a ticked one
+ * - `limit` — the always-mounted limit sentence
+ */
+export type WhoScreenSlot = 'root' | 'heading' | 'chip' | 'chipSelected' | 'card' | 'cardSelected' | 'limit';
+/** One guest chip: the seats it stands for. */
+export interface WhoGuestChoice {
+    key: string;
+    /** The seats this chip answers with (e.g. two anonymous child seats). */
+    people: WizardPerson[];
+    /**
+     * The chip's text. Absent: an all-adult choice reads `who.guest.adult`,
+     * anything else `who.guest.children.one|other` with `{count}`.
+     */
+    label?: string;
+}
+/** A person the screen draws as a card, with its display line precomputed. */
+export interface WhoPersonEntry {
+    /** The seat the card ticks (its `key` identifies it; `name` is shown). */
+    person: WizardPerson;
+    /** «7 years · Last: Kids' cut, 12 Aug», or the age alone, or `''`. */
+    line: string;
+}
+export interface PersonCardProps {
+    name: string;
+    line: string;
+    /** Position in the list — the default card picks an avatar tint from it. */
+    index: number;
+    selected: boolean;
+    /** At the limit: announced and inert, but still focusable (`aria-disabled`). */
+    disabled: boolean;
+    describedBy?: string;
+    onToggle: () => void;
+    className?: string;
+    selectedClassName?: string;
+}
+export interface WhoScreenComponents {
+    PersonCard?: ComponentType<PersonCardProps>;
+}
+export interface WhoScreenProps {
+    labels: WhoScreenLabels;
+    format: BookingFormat;
+    /** The machine's current answer. */
+    people: WizardPerson[];
+    /** The logged-in parent's children, in profile order; `null` for a guest. */
+    family: WhoPersonEntry[] | null;
+    /** A guest's chips, in display order. */
+    guestChoices: WhoGuestChoice[];
+    /**
+     * Children a guest named in the sheet (they live only in this booking),
+     * drawn as ticked cards under the chips. Ignored for a family.
+     */
+    addedChildren?: WhoPersonEntry[];
+    /** The most people one booking may seat. */
+    maxPeople: number;
+    /** The key of the «myself (adult)» seat on a family's list. */
+    selfKey: string;
+    /**
+     * A seat only a guest's shape can draw (a chip's anonymous seat, a guest's
+     * named child, the guest «adult»). Under a family such a seat is one nobody
+     * can see or untick, so it never counts towards the limit and never
+     * survives the next tap. Default: none.
+     */
+    isGuestSeat?: (person: WizardPerson) => boolean;
+    onChoose: (people: WizardPerson[], advance: boolean) => void;
+    /**
+     * Save a new child. Logged in: creates the person and resolves once they
+     * exist (or with a sentence for the sheet); a guest's is local.
+     */
+    onAddChild: (child: NewChild) => Promise<SaveResult>;
+    /** Shown under the heading for a guest — e.g. an offer to log in. */
+    loginRow?: ReactNode;
+    /** Newest birth year the sheet offers (see `AddChildSheet`). */
+    currentYear?: number;
+    classNames?: SlotClassNames<WhoScreenSlot>;
+    components?: WhoScreenComponents;
+}
+export declare function WhoScreen({ labels, format, people, family, guestChoices, addedChildren, maxPeople, selfKey, isGuestSeat, onChoose, onAddChild, loginRow, currentYear, classNames, components, }: WhoScreenProps): import("react").JSX.Element;
+/** The default person card: an initial on a tinted avatar, the name, a line, a tick. */
+export declare function DefaultPersonCard({ name, line, index, selected, disabled, describedBy, onToggle, className, selectedClassName, }: PersonCardProps): import("react").JSX.Element;

package/dist/booking/who-screen.js

@@ -0,0 +1,164 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { useRef } from 'react';
+import { cn } from '../lib/utils.js';
+import { ADD_CHILD_SHEET_LABEL_KEYS, AddChildSheet, } from './add-child-sheet.js';
+import { fillLabel } from './labels.js';
+import { slotClass } from './slots.js';
+/**
+ * The first step — who is the visit for?
+ *
+ * Presentational, like the other steps: every answer leaves as `onChoose` and
+ * the caller's machine decides what it means.
+ *
+ * TWO SHAPES, one question:
+ *
+ * - **A guest** gets a row of chips (e.g. «1 child · 2 children · 3 children ·
+ *   Adult») and a chip is the whole answer: one tap, and the next step is on
+ *   screen. Nothing about the child is asked here.
+ * - **A logged-in parent** gets their children as cards — initial, name, a
+ *   line (age on the appointment day, last visit) — to tick, up to
+ *   `maxPeople`, plus a «myself (adult)» row, and moves on with the wizard's
+ *   own «next». Ticking is a live answer to the machine, so the sticky bar
+ *   knows when there is one.
+ *
+ * «+ Add child» opens a small sheet for either: a logged-in parent's new child
+ * is created by the caller (`onAddChild` resolves once it exists), a guest's
+ * lives only in this booking.
+ *
+ * SEMANTICS. The chips are a radio group (one answer of several); the cards
+ * are checkboxes in a fieldset whose legend says the rule. At the limit an
+ * unticked card is `aria-disabled`, not `disabled`: it stays in the tab order
+ * and says why it does nothing, instead of vanishing from a screen reader's
+ * list of the children.
+ *
+ * Heights are fixed — cards, chips and the dashed card are one size whatever
+ * they hold — so a login that swaps chips for cards, or a child that arrives
+ * from the sheet, grows the list by whole rows and moves nothing sideways.
+ */
+export const WHO_SCREEN_LABEL_KEYS = [
+    'who.heading',
+    'who.guest.groupLabel',
+    'who.guest.children.one',
+    'who.guest.children.other',
+    'who.guest.adult',
+    'who.guest.addedList',
+    'who.family.legend',
+    'who.family.self',
+    'who.family.limit',
+    ...ADD_CHILD_SHEET_LABEL_KEYS,
+];
+/** The tints the avatars take, in order. */
+const AVATAR_TINTS = ['bg-secondary/30', 'bg-primary/10', 'bg-accent'];
+const HEADING_ID = 'booking-who-heading';
+const LIMIT_ID = 'booking-who-limit';
+const noGuestSeats = () => false;
+const ARROW_STEPS = {
+    ArrowRight: 1,
+    ArrowDown: 1,
+    ArrowLeft: -1,
+    ArrowUp: -1,
+};
+function choiceLabel(choice, labels) {
+    if (choice.label !== undefined)
+        return choice.label;
+    if (choice.people.length > 0 && choice.people.every((person) => person.adult)) {
+        return labels['who.guest.adult'];
+    }
+    const count = choice.people.length;
+    return fillLabel(labels[count === 1 ? 'who.guest.children.one' : 'who.guest.children.other'], {
+        count,
+    });
+}
+function choicePressed(people, choice) {
+    const wanted = choice.people;
+    return (people.length === wanted.length &&
+        people.every((person, index) => person.key === wanted[index]?.key));
+}
+export function WhoScreen({ labels, format, people, family, guestChoices, addedChildren = [], maxPeople, selfKey, isGuestSeat = noGuestSeats, onChoose, onAddChild, loginRow, currentYear, classNames, components, }) {
+    const PersonCard = components?.PersonCard ?? DefaultPersonCard;
+    const heading = (_jsx("h2", { id: HEADING_ID, tabIndex: -1, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: labels['who.heading'] }));
+    const sheet = (disabled, saveNotes) => (_jsx(AddChildSheet, { labels: labels, format: format, saveNotes: saveNotes, disabled: disabled, currentYear: currentYear, onSave: onAddChild }));
+    const cardClasses = {
+        className: classNames?.card,
+        selectedClassName: classNames?.cardSelected,
+    };
+    if (family === null) {
+        return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [heading, loginRow, _jsxs("div", { className: "space-y-4", children: [_jsx(GuestChips, { choices: guestChoices, people: people, labels: labels, classNames: classNames, onChoose: onChoose }), addedChildren.length > 0 && (_jsx("ul", { "aria-label": labels['who.guest.addedList'], className: "space-y-2", children: addedChildren.map((entry, index) => (_jsx("li", { children: _jsx(PersonCard, { name: entry.person.name ?? '', line: entry.line, index: index, selected: true, disabled: false, onToggle: () => onChoose(people.filter((other) => other.key !== entry.person.key), false), ...cardClasses }) }, entry.person.key))) })), sheet(addedChildren.length >= maxPeople, false)] })] }));
+    }
+    // Defensively only what this picker draws: the caller clears guest seats
+    // when the family appears, and a seat nobody can see must never count
+    // towards the limit nor survive the next tap.
+    const seated = people.filter((person) => !isGuestSeat(person));
+    const chosen = new Set(seated.map((person) => person.key));
+    const full = seated.length >= maxPeople;
+    const self = { key: selfKey, adult: true };
+    const selfChecked = chosen.has(selfKey);
+    function toggle(person) {
+        if (chosen.has(person.key)) {
+            onChoose(seated.filter((other) => other.key !== person.key), false);
+            return;
+        }
+        if (full)
+            return;
+        onChoose([...seated, person], false);
+    }
+    return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [heading, _jsxs("fieldset", { className: "space-y-4", children: [_jsx("legend", { className: "mb-2 text-sm text-muted-foreground", children: fillLabel(labels['who.family.legend'], { max: maxPeople }) }), _jsxs("ul", { className: "space-y-2", children: [family.map((entry, index) => {
+                                const selected = chosen.has(entry.person.key);
+                                return (_jsx("li", { children: _jsx(PersonCard, { name: entry.person.name ?? '', line: entry.line, index: index, selected: selected, disabled: !selected && full, describedBy: !selected && full ? LIMIT_ID : undefined, onToggle: () => toggle(entry.person), ...cardClasses }) }, entry.person.key));
+                            }), _jsx("li", { children: sheet(full, true) })] }), _jsxs(CheckRow, { checked: selfChecked, disabled: !selfChecked && full, describedBy: !selfChecked && full ? LIMIT_ID : undefined, onToggle: () => toggle(self), className: cn('h-14 justify-between px-5 text-sm', classNames?.card), selectedClassName: classNames?.cardSelected, children: [_jsx("span", { className: "font-medium", children: labels['who.family.self'] }), _jsx(CheckCircle, { checked: selfChecked })] }), _jsx("p", { id: LIMIT_ID, "aria-live": "polite", className: slotClass(classNames, 'limit', 'min-h-5 text-sm text-muted-foreground'), children: full ? fillLabel(labels['who.family.limit'], { max: maxPeople }) : '' })] })] }));
+}
+/**
+ * The guest chips as a radio group. Roving focus: one chip is in the tab
+ * order (the chosen one, else the first) and the arrows move between them.
+ * The arrows move focus WITHOUT choosing — a chip is a whole answer that
+ * moves the wizard on, and an arrow key that jumped to the next step would
+ * take the visitor somewhere they only glanced at.
+ */
+function GuestChips({ choices, people, labels, classNames, onChoose, }) {
+    const refs = useRef([]);
+    const checked = choices.findIndex((choice) => choicePressed(people, choice));
+    const tabStop = checked === -1 ? 0 : checked;
+    function onKeyDown(event, index) {
+        const step = ARROW_STEPS[event.key];
+        let target;
+        if (event.key === 'Home')
+            target = 0;
+        else if (event.key === 'End')
+            target = choices.length - 1;
+        else if (step !== undefined)
+            target = (index + step + choices.length) % choices.length;
+        else
+            return;
+        event.preventDefault();
+        refs.current[target]?.focus();
+    }
+    return (_jsx("div", { role: "radiogroup", "aria-label": labels['who.guest.groupLabel'], className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: choices.map((choice, index) => {
+            const pressed = index === checked;
+            return (_jsx("button", { ref: (element) => {
+                    refs.current[index] = element;
+                }, type: "button", role: "radio", "aria-checked": pressed, tabIndex: index === tabStop ? 0 : -1, onKeyDown: (event) => onKeyDown(event, index), onClick: () => onChoose(choice.people, true), className: cn('flex h-12 items-center justify-center rounded-full border text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary', pressed
+                    ? 'border-primary bg-primary/10 font-bold ring-2 ring-primary'
+                    : 'border-border bg-card font-medium hover:border-primary', classNames?.chip, pressed && classNames?.chipSelected), children: choiceLabel(choice, labels) }, choice.key));
+        }) }));
+}
+function CheckCircle({ checked }) {
+    return (_jsx("span", { "aria-hidden": "true", className: cn('flex size-6 shrink-0 items-center justify-center rounded-full border', checked ? 'border-primary bg-primary text-primary-foreground' : 'border-border'), children: checked && _jsx(Check, { className: "size-4" }) }));
+}
+/** The default person card: an initial on a tinted avatar, the name, a line, a tick. */
+export function DefaultPersonCard({ name, line, index, selected, disabled, describedBy, onToggle, className, selectedClassName, }) {
+    return (_jsxs(CheckRow, { checked: selected, disabled: disabled, describedBy: describedBy, onToggle: onToggle, className: cn('h-[4.5rem] gap-3 px-4', className), selectedClassName: selectedClassName, children: [_jsx("span", { "aria-hidden": "true", className: cn('flex size-11 shrink-0 items-center justify-center rounded-full font-sans text-lg font-bold', AVATAR_TINTS[index % AVATAR_TINTS.length]), children: name.trim().charAt(0).toUpperCase() }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-semibold", children: name }), _jsx("span", { className: "block truncate text-sm text-muted-foreground", children: line })] }), _jsx(CheckCircle, { checked: selected })] }));
+}
+/**
+ * A card that IS a checkbox: a native one, visually hidden, inside the label
+ * the whole card is — so the name is the card's text, Space toggles it, and
+ * nothing re-implements what the browser already does. At the limit it is
+ * `aria-disabled` rather than `disabled`: focusable, announced, inert.
+ */
+function CheckRow({ checked, disabled, describedBy, onToggle, className, selectedClassName, children, }) {
+    return (_jsxs("label", { className: cn('flex w-full cursor-pointer items-center rounded-lg border text-left transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary', checked ? 'border-primary bg-primary/5' : 'border-border bg-card hover:border-primary', disabled && 'cursor-not-allowed opacity-50 hover:border-border', className, checked && selectedClassName), children: [_jsx("input", { type: "checkbox", className: "sr-only", checked: checked, "aria-disabled": disabled || undefined, "aria-describedby": describedBy, onChange: () => {
+                    if (!disabled)
+                        onToggle();
+                } }), children] }));
+}