@medalsocial/meda 3.0.0 → 3.3.0

package/dist/booking/portal/family-editor.js

@@ -0,0 +1,422 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useOptimistic, useState, useTransition } from 'react';
+import { cn } from '../../lib/utils.js';
+import { Field } from '../../primitives/field.js';
+import { Input } from '../../primitives/input.js';
+import { Textarea } from '../../primitives/textarea.js';
+import { BOOKING_INPUT_CLASS, BOOKING_TEXTAREA_CLASS, BookingButton } from '../internal/ui.js';
+import { fillLabel } from '../labels.js';
+import { slotClass } from '../slots.js';
+import { settle } from './action-result.js';
+import { AGE_CONFIRM_CARD_LABEL_KEYS, AgeConfirmCard, } from './age-confirm-card.js';
+/**
+ * The children a parent books for, ONE CHILD AT A TIME.
+ *
+ * Each row saves on its own, through `onSavePerson` / `onRemovePerson`, which
+ * edit one stored person in place: the id the booking system keeps for the
+ * child survives a rename, and that id is what a booking points at. A backend
+ * without per-person endpoints may fall back to patching the whole list
+ * (`fallback: true` in the answer) and the row says what could not be kept.
+ *
+ * Beside name and birth year, three fields the backend keeps where it can
+ * (`personDetails`): the birth MONTH (optional — it makes an age exact across
+ * the birthday; never a full date), a preferred stylist (a preference the
+ * wizard preselects, not a booking rule) and a note for the stylist.
+ *
+ * OPTIMISTIC: the tap shows the outcome at once — the row as it will be
+ * stored and «saved» — with every row locked (`disabled` on the fieldset)
+ * until the callback answers. On success the rows are rebuilt from what was
+ * stored, keeping any OTHER row's unsaved typing; on failure the optimistic
+ * view ends, which puts the parent's edits back exactly as they were, with
+ * the reason in the live region.
+ *
+ * Fixed row shapes, so nothing below a row moves when a save lands: a row's
+ * status line is always there, empty until it has something to say.
+ *
+ * AGE PROMPT (`agePrompt`): above the rows, one `AgeConfirmCard` for the
+ * first child the backend can address whose birth month it does not know. It
+ * saves through the same `onSavePerson` and the same rebuild, so the row below
+ * shows what the card stored. Its patch is the minimum — name, year and, when
+ * chosen, month — so notes and preferred stylist are left alone. Confirmed or
+ * waved away, the child's id is reported through `onAgeAnswered` (the caller
+ * remembers it, e.g. in a cookie) and the card is not drawn for them again.
+ */
+const MAX_MEMBERS = 10;
+const OLDEST_YEARS_BACK = 18;
+const NOTES_MAX = 500;
+export const FAMILY_EDITOR_OWN_LABEL_KEYS = [
+    'familyEditor.heading',
+    'familyEditor.lead',
+    'familyEditor.empty',
+    'familyEditor.legend',
+    'familyEditor.add',
+    'familyEditor.name',
+    'familyEditor.birthYear',
+    'familyEditor.birthYearPlaceholder',
+    'familyEditor.birthMonth',
+    'familyEditor.birthMonthUnknown',
+    'familyEditor.stylist',
+    'familyEditor.stylistNone',
+    'familyEditor.stylistFormer',
+    'familyEditor.notes',
+    'familyEditor.notesPlaceholder',
+    'familyEditor.newRow',
+    'familyEditor.save',
+    'familyEditor.remove',
+    'familyEditor.removeNamed',
+    'familyEditor.removeRow',
+    'familyEditor.saved',
+    'familyEditor.savedNoDetails',
+    'familyEditor.partial',
+    'familyEditor.removed',
+    'familyEditor.unreachable',
+    'familyEditor.ageConfirmed',
+    'familyEditor.ageSaved',
+];
+export const FAMILY_EDITOR_LABEL_KEYS = [
+    ...FAMILY_EDITOR_OWN_LABEL_KEYS,
+    ...AGE_CONFIRM_CARD_LABEL_KEYS,
+];
+function toRow(member, key, index) {
+    return {
+        key,
+        personId: member.personId,
+        index,
+        name: member.name,
+        birthYear: String(member.birthYear),
+        birthMonth: member.birthMonth === null ? '' : String(member.birthMonth),
+        notes: member.notes ?? '',
+        stylist: member.preferredResourceId ?? '',
+    };
+}
+function same(a, b) {
+    return (a.name === b.name &&
+        a.birthYear === b.birthYear &&
+        a.birthMonth === b.birthMonth &&
+        a.notes === b.notes &&
+        a.stylist === b.stylist);
+}
+/** A row typed here and never saved: nothing on the backend's side to address. */
+function isNewRow(row) {
+    return row.personId === null && row.index === null;
+}
+function target(row) {
+    return {
+        personId: row.personId,
+        ...(row.personId === null && row.index !== null ? { index: row.index } : {}),
+    };
+}
+/** The three detail fields; `null` clears. */
+function details(row) {
+    const notes = row.notes.trim();
+    return {
+        birthMonth: row.birthMonth === '' ? null : Number(row.birthMonth),
+        notes: notes === '' ? null : notes,
+        preferredResourceId: row.stylist === '' ? null : row.stylist,
+    };
+}
+/**
+ * What one existing row becomes once the backend has answered: what was
+ * stored, unless the parent has unsaved typing in it — then their draft,
+ * re-indexed. The row just saved from the editor always takes the answer; the
+ * row the age card saved (`submitted`) keeps its draft and takes only those
+ * fields.
+ */
+function keptRow(previous, storedRow, lastStored, isSaved, submitted) {
+    const draftSurvives = !isSaved || submitted !== undefined;
+    if (!draftSurvives || lastStored === undefined || same(previous, lastStored))
+        return storedRow;
+    const merged = { ...previous, index: storedRow.index };
+    if (isSaved) {
+        for (const field of submitted ?? [])
+            merged[field] = storedRow[field];
+    }
+    return merged;
+}
+function hasDetails(row) {
+    return row.birthMonth !== '' || row.notes.trim() !== '' || row.stylist !== '';
+}
+function yearOptions(currentYear, extra) {
+    const years = new Set();
+    for (let year = currentYear; year >= currentYear - OLDEST_YEARS_BACK; year -= 1) {
+        years.add(year);
+    }
+    // A child who has aged out of the range keeps their own year on the list
+    // rather than being silently moved to the newest one the select allows.
+    for (const year of extra)
+        years.add(year);
+    return [...years].sort((a, b) => b - a);
+}
+/**
+ * The index of the child the age prompt asks about, or `null`: one the
+ * backend can address, with no birth month, not already answered, on a
+ * backend that keeps months.
+ */
+function agePromptIndex(family, dismissed, personDetails) {
+    if (!personDetails)
+        return null;
+    const index = family.findIndex((member) => member.personId !== null && member.birthMonth === null && !dismissed.includes(member.personId));
+    return index === -1 ? null : index;
+}
+const SELECT_CLASS = 'h-9 w-full rounded-md border border-input bg-transparent px-2.5 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50';
+export function FamilyEditor({ labels, format, family, nouns, now = Date.now(), currentYear = Number(format.clock.dayKey(now).slice(0, 4)), personDetails = false, stylists = [], agePrompt, onSavePerson, onRemovePerson, onSessionExpired, onAgeAnswered, classNames, components, }) {
+    const FamilyMemberCard = components?.FamilyMemberCard ?? DefaultFamilyMemberCard;
+    const id = useId();
+    const [rows, setRows] = useState(() => family.map((member, index) => toRow(member, index, index)));
+    /** What each row last was on the backend's side — what «dirty» is measured from. */
+    const [stored, setStored] = useState(() => Object.fromEntries(family.map((member, index) => [index, toRow(member, index, index)])));
+    const [nextKey, setNextKey] = useState(family.length);
+    const [statuses, setStatuses] = useState({});
+    const [listStatus, setListStatus] = useState(null);
+    const [pending, startTransition] = useTransition();
+    const [ageDismissed, setAgeDismissed] = useState(() => agePrompt?.dismissed ?? []);
+    const [ageError, setAgeError] = useState(null);
+    const [shown, showSaving] = useOptimistic({ rows, statuses, listStatus }, (_current, saving) => saving);
+    const detailsKnown = personDetails;
+    const months = Array.from({ length: 12 }, (_, index) => format.clock.monthName(index + 1));
+    const years = yearOptions(currentYear, rows.map((row) => Number(row.birthYear)).filter((year) => Number.isInteger(year) && year > 0));
+    /**
+     * The row the age card asks about: by what the backend HOLDS (`stored`),
+     * not what the parent may be typing below — a month chosen but not yet
+     * saved in the editor is not a month the backend knows.
+     */
+    const agePromptRow = (() => {
+        if (agePrompt === undefined)
+            return undefined;
+        const candidates = rows.filter((row) => stored[row.key] !== undefined);
+        const index = agePromptIndex(candidates.map((row) => ({
+            personId: row.personId,
+            birthMonth: stored[row.key].birthMonth === '' ? null : Number(stored[row.key].birthMonth),
+        })), ageDismissed, detailsKnown);
+        return index === null ? undefined : stored[candidates[index].key];
+    })();
+    function failed(failure) {
+        if (failure.kind === 'session') {
+            onSessionExpired?.();
+            return null;
+        }
+        return failure.message ?? labels['familyEditor.unreachable'];
+    }
+    /** Never ask about this child again. */
+    function rememberAgeAnswer(personId) {
+        const next = [...ageDismissed, personId];
+        setAgeDismissed(next);
+        setAgeError(null);
+        onAgeAnswered?.(next);
+    }
+    function confirmAge(row, answer) {
+        const personId = row.personId;
+        if (personId === null)
+            return;
+        const name = row.name.trim();
+        // Nothing to store: the year stands and the parent does not know (or
+        // will not say) the month. Still an answer, and remembered as one.
+        if (answer.birthYear === row.birthYear && answer.birthMonth === '') {
+            rememberAgeAnswer(personId);
+            setListStatus({
+                kind: 'saved',
+                note: fillLabel(labels['familyEditor.ageConfirmed'], { name }),
+            });
+            return;
+        }
+        setAgeError(null);
+        startTransition(async () => {
+            const result = await settle(() => onSavePerson({
+                create: false,
+                target: { personId },
+                person: {
+                    name,
+                    birthYear: Number(answer.birthYear),
+                    ...(answer.birthMonth === '' ? {} : { birthMonth: Number(answer.birthMonth) }),
+                },
+            }));
+            if (result.ok) {
+                // Only the fields the card sent come from the answer: anything the
+                // parent is still typing in this child's editor row stays theirs.
+                adopt(result.family, row.key, null, answer.birthMonth === '' ? ['birthYear'] : ['birthYear', 'birthMonth']);
+                rememberAgeAnswer(personId);
+                // No «saved» on the row itself: it may still hold unsaved typing.
+                setListStatus({
+                    kind: 'saved',
+                    note: fillLabel(labels['familyEditor.ageSaved'], { name }),
+                });
+                return;
+            }
+            const message = failed(result);
+            if (message !== null)
+                setAgeError(message);
+        });
+    }
+    function patchRow(key, patch) {
+        setRows((current) => current.map((row) => (row.key === key ? { ...row, ...patch } : row)));
+        setStatuses(({ [key]: _dropped, ...rest }) => rest);
+        setListStatus(null);
+    }
+    function addRow() {
+        if (rows.length >= MAX_MEMBERS)
+            return;
+        const row = {
+            key: nextKey,
+            personId: null,
+            index: null,
+            name: '',
+            birthYear: '',
+            birthMonth: '',
+            notes: '',
+            stylist: '',
+        };
+        setRows((current) => [...current, row]);
+        setNextKey((key) => key + 1);
+        setListStatus(null);
+    }
+    /**
+     * Rebuild the rows from what the backend now holds. Rows the parent is
+     * still typing in — changed and not the one just saved — keep their typing:
+     * saving one child must not throw away another's half-finished edit.
+     * Unsaved NEW rows stay at the end.
+     */
+    function adopt(fresh, savedKey, createdId, 
+    /**
+     * The age card's save: the saved row is NOT the one the parent submitted
+     * from the editor, so any unsaved typing in it survives — only the fields
+     * the card sent are taken from the answer.
+     */
+    submitted) {
+        let key = nextKey;
+        const savedRow = rows.find((row) => row.key === savedKey);
+        let claimed = false;
+        // The fresh entry the new row became: by the id it was given, or — from
+        // the list fallback, which names no id — by the name and year just typed.
+        const isCreated = (member) => {
+            if (claimed || savedRow === undefined || !isNewRow(savedRow))
+                return false;
+            const match = createdId !== null
+                ? member.personId === createdId
+                : member.name === savedRow.name.trim() && String(member.birthYear) === savedRow.birthYear;
+            claimed = match;
+            return match;
+        };
+        const kept = [];
+        const nextStored = {};
+        for (const [index, member] of fresh.entries()) {
+            const previous = member.personId === null ? undefined : rows.find((row) => row.personId === member.personId);
+            // The child just created keeps the key of the row it was typed in, so
+            // its «saved» stays where the parent is looking.
+            const rowKey = previous?.key ?? (isCreated(member) ? savedKey : key++);
+            const storedRow = toRow(member, rowKey, index);
+            nextStored[rowKey] = storedRow;
+            kept.push(previous === undefined
+                ? storedRow
+                : keptRow(previous, storedRow, stored[previous.key], previous.key === savedKey, submitted));
+        }
+        // The row just created has no id in `rows` yet; it is in `fresh` now, so
+        // it goes. Every other new row stays.
+        const drafts = rows.filter((row) => row.personId === null && row.index === null && row.key !== savedKey);
+        setRows([...kept, ...drafts]);
+        setStored(nextStored);
+        setNextKey(Math.max(key, nextKey));
+    }
+    function fail(failure, key) {
+        const message = failed(failure);
+        if (message === null)
+            return;
+        const status = { kind: 'error', message };
+        if (key === null)
+            setListStatus(status);
+        else
+            setStatuses((current) => ({ ...current, [key]: status }));
+    }
+    function save(row) {
+        const name = row.name.trim();
+        if (name === '' || row.birthYear === '') {
+            setStatuses((current) => ({ ...current, [row.key]: { kind: 'partial' } }));
+            return;
+        }
+        const isNew = isNewRow(row);
+        const offerDetails = detailsKnown || (isNew && family.length === 0);
+        const person = {
+            name,
+            birthYear: Number(row.birthYear),
+            ...(offerDetails ? details(row) : {}),
+        };
+        const gaveDetails = offerDetails && hasDetails(row);
+        startTransition(async () => {
+            showSaving({
+                rows: rows.map((current) => (current.key === row.key ? { ...row, name } : current)),
+                statuses: { ...statuses, [row.key]: { kind: 'saved' } },
+                listStatus: null,
+            });
+            const result = await settle(() => onSavePerson({ create: isNew, target: target(row), person }));
+            if (result.ok) {
+                adopt(result.family, row.key, isNew ? result.personId : null);
+                setStatuses({
+                    [row.key]: result.fallback && gaveDetails
+                        ? { kind: 'saved', note: labels['familyEditor.savedNoDetails'] }
+                        : { kind: 'saved' },
+                });
+                setListStatus(isNew ? { kind: 'saved' } : null);
+                return;
+            }
+            fail(result, row.key);
+        });
+    }
+    function remove(row) {
+        // A row that was never saved has nothing on the backend's side to remove.
+        if (isNewRow(row)) {
+            setRows((current) => current.filter((other) => other.key !== row.key));
+            return;
+        }
+        startTransition(async () => {
+            showSaving({
+                rows: rows.filter((current) => current.key !== row.key),
+                statuses,
+                listStatus: { kind: 'saved', note: labels['familyEditor.removed'] },
+            });
+            const result = await settle(() => onRemovePerson(target(row)));
+            if (result.ok) {
+                adopt(result.family, row.key, null);
+                setStatuses({});
+                setListStatus({ kind: 'saved', note: labels['familyEditor.removed'] });
+                return;
+            }
+            fail(result, null);
+        });
+    }
+    const listStatusId = `${id}-list-status`;
+    return (_jsxs("section", { "aria-labelledby": "portal-family-heading", className: slotClass(classNames, 'root', 'space-y-4'), children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h2", { id: "portal-family-heading", className: slotClass(classNames, 'heading', 'font-sans text-xl font-bold md:text-2xl'), children: nouns?.persons ?? labels['familyEditor.heading'] }), _jsx("p", { className: "text-sm text-muted-foreground", children: labels['familyEditor.lead'] })] }), agePromptRow !== undefined && (_jsx(AgeConfirmCard
+            // A fresh card per child: the next child's must not inherit this one's answer.
+            , { labels: labels, name: agePromptRow.name, birthYear: agePromptRow.birthYear, years: years, months: months, busy: pending, error: ageError, classNames: classNames?.ageCard ? { root: classNames.ageCard } : undefined, onConfirm: (answer) => confirmAge(agePromptRow, answer), onDismiss: () => agePromptRow.personId && rememberAgeAnswer(agePromptRow.personId) }, agePromptRow.personId)), shown.rows.length === 0 && (_jsx("p", { className: "text-muted-foreground", children: labels['familyEditor.empty'] })), _jsxs("fieldset", { 
+                // Locked while saving: an edit typed mid-save would be shown through
+                // the optimistic snapshot and then overwritten by the answer.
+                disabled: pending, className: "min-w-0 space-y-3", "aria-describedby": shown.listStatus?.kind === 'error' ? listStatusId : undefined, children: [_jsx("legend", { className: "sr-only", children: labels['familyEditor.legend'] }), _jsx("ul", { className: slotClass(classNames, 'list', 'space-y-3'), children: shown.rows.map((row) => {
+                            const offerDetails = detailsKnown || (isNewRow(row) && family.length === 0);
+                            return (_jsx("li", { children: _jsx(FamilyMemberCard, { id: `${id}-${row.key}`, row: row, years: years, months: months, offerDetails: offerDetails, stylists: stylists, status: shown.statuses[row.key] ?? null, labels: labels, className: classNames?.card, onPatch: (patch) => patchRow(row.key, patch), onSave: () => save(row), onRemove: () => remove(row) }) }, row.key));
+                        }) })] }), _jsxs("div", { "aria-live": "polite", className: slotClass(classNames, 'listStatus', 'min-h-5'), children: [shown.listStatus?.kind === 'saved' && shown.listStatus.note && (_jsx("p", { id: listStatusId, className: "text-sm text-muted-foreground", children: shown.listStatus.note })), shown.listStatus?.kind === 'error' && (_jsx(Field.Error, { id: listStatusId, children: shown.listStatus.message }))] }), shown.rows.length < MAX_MEMBERS && (_jsx(BookingButton, { variant: "outline", onClick: addRow, disabled: pending, className: slotClass(classNames, 'add'), children: labels['familyEditor.add'] }))] }));
+}
+/** The default row: name + year, the three details where offered, save / remove and a status line. */
+export function DefaultFamilyMemberCard({ id, row, years, months, offerDetails, stylists, status, labels, className, onPatch, onSave, onRemove, }) {
+    const statusId = `${id}-status`;
+    const partial = status?.kind === 'partial';
+    const nameMissing = partial && row.name.trim() === '';
+    const yearMissing = partial && row.birthYear === '';
+    const name = row.name.trim();
+    // A stylist no longer on the roster keeps their option rather than the
+    // select silently showing «none» for a preference the backend still holds.
+    const stylistOptions = row.stylist !== '' && !stylists.some((stylist) => stylist.id === row.stylist)
+        ? [...stylists, { id: row.stylist, name: labels['familyEditor.stylistFormer'] }]
+        : stylists;
+    return (_jsxs("form", { onSubmit: (event) => {
+            event.preventDefault();
+            onSave();
+        }, "aria-label": name || labels['familyEditor.newRow'], className: cn('space-y-3 rounded-lg border border-border bg-card px-5 py-4', className), children: [_jsxs("div", { className: "grid grid-cols-[1fr_7rem] gap-3", children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-name`, children: labels['familyEditor.name'] }), _jsx(Input, { id: `${id}-name`, value: row.name, maxLength: 60, "aria-invalid": nameMissing || undefined, "aria-describedby": partial ? statusId : undefined, onChange: (event) => onPatch({ name: event.target.value }), className: BOOKING_INPUT_CLASS })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-year`, children: labels['familyEditor.birthYear'] }), _jsxs("select", { id: `${id}-year`, value: row.birthYear, "aria-invalid": yearMissing || undefined, "aria-describedby": partial ? statusId : undefined, onChange: (event) => onPatch({ birthYear: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.birthYearPlaceholder'] }), years.map((year) => (_jsx("option", { value: String(year), children: year }, year)))] })] })] }), offerDetails && (_jsx(DetailFields, { id: id, row: row, months: months, stylists: stylistOptions, labels: labels, onPatch: onPatch })), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(BookingButton, { type: "submit", size: "sm", children: labels['familyEditor.save'] }), _jsx(BookingButton, { type: "button", variant: "ghost", size: "sm", "aria-label": name
+                            ? fillLabel(labels['familyEditor.removeNamed'], { name })
+                            : labels['familyEditor.removeRow'], onClick: onRemove, children: labels['familyEditor.remove'] }), _jsx(RowStatusLine, { id: statusId, status: status, labels: labels })] })] }));
+}
+/** Month, preferred stylist and a note for the stylist — where the backend keeps them. */
+function DetailFields({ id, row, months, stylists, labels, onPatch, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-month`, children: labels['familyEditor.birthMonth'] }), _jsxs("select", { id: `${id}-month`, value: row.birthMonth, onChange: (event) => onPatch({ birthMonth: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.birthMonthUnknown'] }), months.map((month, index) => (_jsx("option", { value: String(index + 1), children: month }, month)))] })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-stylist`, children: labels['familyEditor.stylist'] }), _jsxs("select", { id: `${id}-stylist`, value: row.stylist, onChange: (event) => onPatch({ stylist: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.stylistNone'] }), stylists.map((stylist) => (_jsx("option", { value: stylist.id, children: stylist.name }, stylist.id)))] })] })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-notes`, children: labels['familyEditor.notes'] }), _jsx(Textarea, { id: `${id}-notes`, rows: 2, maxLength: NOTES_MAX, placeholder: labels['familyEditor.notesPlaceholder'], value: row.notes, onChange: (event) => onPatch({ notes: event.target.value }), className: BOOKING_TEXTAREA_CLASS })] })] }));
+}
+function RowStatusLine({ id, status, labels, }) {
+    return (_jsxs("span", { "aria-live": "polite", className: "min-h-5 text-sm", children: [status?.kind === 'saved' && (_jsx("span", { id: id, className: "text-muted-foreground", children: status.note ?? labels['familyEditor.saved'] })), status?.kind === 'partial' && (_jsx(Field.Error, { id: id, children: labels['familyEditor.partial'] })), status?.kind === 'error' && _jsx(Field.Error, { id: id, children: status.message })] }));
+}

package/dist/booking/portal/logout-button.d.ts

@@ -0,0 +1,21 @@
+import { type SlotClassNames } from '../slots.js';
+import type { SaveResult } from '../types.js';
+export declare const LOGOUT_BUTTON_LABEL_KEYS: readonly ["logout.button", "logout.unreachable"];
+export type LogoutButtonLabels = Record<(typeof LOGOUT_BUTTON_LABEL_KEYS)[number], string>;
+/** `root` (the form), `button`, `error` (the live line under it). */
+export type LogoutButtonSlot = 'root' | 'button' | 'error';
+export interface LogoutButtonProps {
+    labels: LogoutButtonLabels;
+    /**
+     * Ends the session. On `{ ok: true }` the caller navigates away itself
+     * (one full document load, so nothing rendered under the old session
+     * survives in a router cache). Anything else keeps the visitor here with a
+     * message: navigating away would SAY logged out while the session may
+     * still be live. A failure's `message` is shown when given, else
+     * `logout.unreachable`.
+     */
+    onLogout: () => Promise<SaveResult>;
+    classNames?: SlotClassNames<LogoutButtonSlot>;
+}
+/** «Log out», locked while the callback runs. */
+export declare function LogoutButton({ labels, onLogout, classNames }: LogoutButtonProps): import("react").JSX.Element;

package/dist/booking/portal/logout-button.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useTransition } from 'react';
+import { BookingButton } from '../internal/ui.js';
+import { slotClass } from '../slots.js';
+export const LOGOUT_BUTTON_LABEL_KEYS = ['logout.button', 'logout.unreachable'];
+/** «Log out», locked while the callback runs. */
+export function LogoutButton({ labels, onLogout, classNames }) {
+    const [pending, startTransition] = useTransition();
+    const [error, setError] = useState(null);
+    function logout(event) {
+        event.preventDefault();
+        setError(null);
+        startTransition(async () => {
+            let result;
+            try {
+                result = await onLogout();
+            }
+            catch {
+                result = { ok: false, message: '' };
+            }
+            if (!result.ok)
+                setError(result.message || labels['logout.unreachable']);
+        });
+    }
+    return (_jsxs("form", { onSubmit: logout, className: slotClass(classNames, 'root'), children: [_jsx(BookingButton, { type: "submit", variant: "outline", disabled: pending, className: slotClass(classNames, 'button'), children: labels['logout.button'] }), _jsx("p", { "aria-live": "polite", className: slotClass(classNames, 'error', 'mt-2 text-sm text-destructive'), children: error })] }));
+}

package/dist/booking/portal/portal-shell.d.ts

@@ -0,0 +1,71 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { type SlotClassNames } from '../slots.js';
+export declare const PORTAL_SHELL_LABEL_KEYS: readonly ["portalShell.nav", "portalShell.navBar"];
+/**
+ * `portalShell.nav` names the desktop rail, `portalShell.navBar` the phone's
+ * bottom bar. Only one of the two is displayed at a time; a pack may give both
+ * the same name.
+ */
+export type PortalShellLabels = Record<(typeof PORTAL_SHELL_LABEL_KEYS)[number], string>;
+/** An icon the shell draws beside a tab label (e.g. a lucide icon). */
+export type PortalShellIcon = ComponentType<{
+    className?: string;
+    'aria-hidden'?: boolean | 'true';
+}>;
+export interface PortalShellTab<Id extends string = string> {
+    id: Id;
+    /** The rail's label, and the section's accessible name. */
+    label: string;
+    /** The bottom bar's label, where there is less room. Defaults to `label`. */
+    short?: string;
+    icon?: PortalShellIcon;
+    /** The bottom bar's icon. Defaults to `icon`. */
+    shortIcon?: PortalShellIcon;
+    /** The section's content. */
+    content: ReactNode;
+}
+/**
+ * - `root`: the whole shell.
+ * - `rail`: the desktop sidebar; `railItem` / `railItemActive`: its buttons.
+ * - `section`: every section.
+ * - `bar`: the phone's bottom tab bar; `barItem` / `barItemActive`: its buttons.
+ */
+export type PortalShellSlot = 'root' | 'rail' | 'railItem' | 'railItemActive' | 'section' | 'bar' | 'barItem' | 'barItemActive';
+export interface PortalShellProps<Id extends string = string> {
+    labels: PortalShellLabels;
+    /** The sections, in order. */
+    tabs: ReadonlyArray<PortalShellTab<Id>>;
+    /** The open section (controlled). Pair with `onTabChange`. */
+    tab?: Id;
+    /** The open section when uncontrolled. Defaults to the first tab. */
+    defaultTab?: Id;
+    /** Called with the tab a user picked — e.g. to write it to the URL. */
+    onTabChange?: (tab: Id) => void;
+    /** The page header (greeting, «book» button). */
+    header?: ReactNode;
+    /** Who is logged in, drawn at the top of the rail. */
+    account?: ReactNode;
+    /**
+     * The log-out control: last in the rail, and repeated under the
+     * `logoutTab` section below `lg`, where there is no rail. Rendered twice,
+     * so it should hold no state worth keeping.
+     */
+    logout?: ReactNode;
+    /** The section that carries the logout on a phone. Defaults to the last tab. */
+    logoutTab?: Id;
+    classNames?: SlotClassNames<PortalShellSlot>;
+}
+/**
+ * The portal's chrome: a sidebar on a desktop, a bottom tab bar on a phone,
+ * and the sections both of them switch between — one piece of state read by
+ * both, so rotating a tablet does not move the user.
+ *
+ * EVERY SECTION IS IN THE DOM, always, and only the current one is visible:
+ * sections hold half-edited forms, and unmounting one on a stray tap would
+ * throw that work away. `hidden` rather than a class, so an inactive section
+ * is out of the accessibility tree and the tab order too.
+ *
+ * A `nav` with `aria-current`, not a `tablist`: two tablists driving one set
+ * of panels is not a shape the pattern has, and these are page sections.
+ */
+export declare function PortalShell<Id extends string = string>({ labels, tabs, tab: tabProp, defaultTab, onTabChange, header, account, logout, logoutTab, classNames, }: PortalShellProps<Id>): import("react").JSX.Element;

package/dist/booking/portal/portal-shell.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../../lib/utils.js';
+import { slotClass } from '../slots.js';
+export const PORTAL_SHELL_LABEL_KEYS = ['portalShell.nav', 'portalShell.navBar'];
+/**
+ * The portal's chrome: a sidebar on a desktop, a bottom tab bar on a phone,
+ * and the sections both of them switch between — one piece of state read by
+ * both, so rotating a tablet does not move the user.
+ *
+ * EVERY SECTION IS IN THE DOM, always, and only the current one is visible:
+ * sections hold half-edited forms, and unmounting one on a stray tap would
+ * throw that work away. `hidden` rather than a class, so an inactive section
+ * is out of the accessibility tree and the tab order too.
+ *
+ * A `nav` with `aria-current`, not a `tablist`: two tablists driving one set
+ * of panels is not a shape the pattern has, and these are page sections.
+ */
+export function PortalShell({ labels, tabs, tab: tabProp, defaultTab, onTabChange, header, account, logout, logoutTab, classNames, }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultTab ?? tabs[0]?.id);
+    const tab = tabProp ?? uncontrolled;
+    const logoutIn = logoutTab ?? tabs[tabs.length - 1]?.id;
+    function select(next) {
+        if (tabProp === undefined)
+            setUncontrolled(next);
+        onTabChange?.(next);
+    }
+    return (_jsxs("div", { className: slotClass(classNames, 'root', 'space-y-8'), children: [header, _jsxs("div", { className: "gap-10 lg:grid lg:grid-cols-[15rem_minmax(0,1fr)]", children: [_jsx("aside", { className: slotClass(classNames, 'rail', 'hidden lg:block'), children: _jsxs("div", { className: "sticky top-8 space-y-4", children: [account, _jsx("nav", { "aria-label": labels['portalShell.nav'], children: _jsx("ul", { className: "space-y-1", children: tabs.map(({ id, label, icon: Icon }) => (_jsx("li", { children: _jsxs("button", { type: "button", "aria-current": tab === id ? 'page' : undefined, onClick: () => select(id), className: cn(slotClass(classNames, 'railItem', 'flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-semibold transition-colors', tab === id
+                                                    ? 'bg-foreground text-background'
+                                                    : 'text-foreground hover:bg-muted'), tab === id && classNames?.railItemActive), children: [Icon && _jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0" }), label] }) }, id))) }) }), logout] }) }), _jsx("div", { className: "pb-28 lg:pb-0", children: tabs.map(({ id, label, content }) => (_jsxs("section", { hidden: tab !== id, "aria-label": label, 
+                            // `space-y` on the section rather than a wrapper, so a hidden one
+                            // contributes no margin.
+                            className: slotClass(classNames, 'section', 'space-y-10'), children: [content, id === logoutIn && logout && _jsx("div", { className: "lg:hidden", children: logout })] }, id))) })] }), _jsx("nav", { "aria-label": labels['portalShell.navBar'], className: slotClass(classNames, 'bar', 'fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur-md lg:hidden'), children: _jsx("ul", { className: "mx-auto flex max-w-lg", children: tabs.map(({ id, label, short, icon, shortIcon }) => {
+                        const ShortIcon = shortIcon ?? icon;
+                        return (_jsx("li", { className: "flex-1", children: _jsxs("button", { type: "button", "aria-current": tab === id ? 'page' : undefined, onClick: () => select(id), className: cn(slotClass(classNames, 'barItem', 'flex w-full flex-col items-center gap-1 px-2 py-3 text-[0.7rem] font-bold transition-colors', tab === id ? 'text-primary' : 'text-muted-foreground'), tab === id && classNames?.barItemActive), children: [ShortIcon && _jsx(ShortIcon, { "aria-hidden": "true", className: "size-5" }), short ?? label] }) }, id));
+                    }) }) })] }));
+}

package/dist/booking/portal/portal-unreachable.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { BookingFormat } from '../format.js';
+import { type SlotClassNames } from '../slots.js';
+export declare const PORTAL_UNREACHABLE_LABEL_KEYS: readonly ["portalUnreachable.heading", "portalUnreachable.body", "portalUnreachable.retry", "portalUnreachable.call"];
+/** `portalUnreachable.call` takes `{phone}`. */
+export type PortalUnreachableLabels = Record<(typeof PORTAL_UNREACHABLE_LABEL_KEYS)[number], string>;
+/** - `root`: the section. - `heading`. - `actions`: the row of links. - `link`: each link. */
+export type PortalUnreachableSlot = 'root' | 'heading' | 'actions' | 'link';
+export interface PortalUnreachableProps {
+    labels: PortalUnreachableLabels;
+    format: Pick<BookingFormat, 'telHref'>;
+    /** The business's number, or `null` (then there is no call link). */
+    phone: string | null;
+    /** «Try again» — the portal page itself. */
+    retryHref: string;
+    /**
+     * The log-out control. This is the one screen a user could otherwise be held
+     * on, so the way out must not depend on the thing that is down.
+     */
+    logout?: ReactNode;
+    /** `id` of the heading (for `aria-labelledby`). Default `portal-unreachable-heading`. */
+    headingId?: string;
+    classNames?: SlotClassNames<PortalUnreachableSlot>;
+}
+/**
+ * What the portal shows when the booking system did not answer. The user's
+ * bookings are all still there — it is this page that could not read them —
+ * so the honest offer is «try again in a moment», pointed back at the same
+ * page, and a phone number. Says nothing about WHAT failed.
+ */
+export declare function PortalUnreachable({ labels, format, phone, retryHref, logout, headingId, classNames, }: PortalUnreachableProps): import("react").JSX.Element;

package/dist/booking/portal/portal-unreachable.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderLabel } from '../internal/label-parts.js';
+import { slotClass } from '../slots.js';
+export const PORTAL_UNREACHABLE_LABEL_KEYS = [
+    'portalUnreachable.heading',
+    'portalUnreachable.body',
+    'portalUnreachable.retry',
+    'portalUnreachable.call',
+];
+/**
+ * What the portal shows when the booking system did not answer. The user's
+ * bookings are all still there — it is this page that could not read them —
+ * so the honest offer is «try again in a moment», pointed back at the same
+ * page, and a phone number. Says nothing about WHAT failed.
+ */
+export function PortalUnreachable({ labels, format, phone, retryHref, logout, headingId = 'portal-unreachable-heading', classNames, }) {
+    const link = slotClass(classNames, 'link', 'font-semibold text-primary underline underline-offset-4');
+    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h1", { id: headingId, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold md:text-3xl'), children: labels['portalUnreachable.heading'] }), _jsx("p", { className: "text-muted-foreground", children: labels['portalUnreachable.body'] }), _jsxs("div", { className: slotClass(classNames, 'actions', 'flex flex-wrap items-center gap-4'), children: [_jsx("a", { href: retryHref, className: link, children: labels['portalUnreachable.retry'] }), phone && (_jsx("a", { href: format.telHref(phone), className: link, children: renderLabel(labels['portalUnreachable.call'], { phone }) })), logout] })] }));
+}