@medalsocial/meda 3.0.0 → 3.3.0

package/dist/booking/portal/account-card.d.ts

@@ -0,0 +1,24 @@
+import type { SlotClassNames } from '../slots.js';
+import type { PortalProfileDto } from '../types.js';
+/**
+ * - `root`: the card.
+ * - `avatar`: the initial.
+ * - `name`, `detail`: the two lines.
+ */
+export type AccountCardSlot = 'root' | 'avatar' | 'name' | 'detail';
+export interface AccountCardProps {
+    profile: Pick<PortalProfileDto, 'email' | 'firstName' | 'lastName' | 'phone'>;
+    /** The sidebar's narrower card: name and number, no address. */
+    compact?: boolean;
+    classNames?: SlotClassNames<AccountCardSlot>;
+}
+/**
+ * Who is logged in — the card at the top of the portal's sidebar, and again at
+ * the top of the profile section. Presentational and server-renderable.
+ *
+ * The e-mail sits beside the number because it is what the login is bound to.
+ * Not in the compact card, though: a sidebar is not wide enough for both, and
+ * an address cut off half-way answers nothing while looking like it should.
+ * The card has no copy of its own, so it takes no labels.
+ */
+export declare function AccountCard({ profile, compact, classNames }: AccountCardProps): import("react").JSX.Element;

package/dist/booking/portal/account-card.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { slotClass } from '../slots.js';
+/**
+ * Who is logged in — the card at the top of the portal's sidebar, and again at
+ * the top of the profile section. Presentational and server-renderable.
+ *
+ * The e-mail sits beside the number because it is what the login is bound to.
+ * Not in the compact card, though: a sidebar is not wide enough for both, and
+ * an address cut off half-way answers nothing while looking like it should.
+ * The card has no copy of its own, so it takes no labels.
+ */
+export function AccountCard({ profile, compact = false, classNames }) {
+    const name = [profile.firstName, profile.lastName].filter(Boolean).join(' ').trim();
+    const shown = name.length > 0 ? name : profile.email;
+    return (_jsxs("div", { className: slotClass(classNames, 'root', 'flex items-center gap-3 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("span", { "aria-hidden": "true", className: slotClass(classNames, 'avatar', 'flex size-11 shrink-0 items-center justify-center rounded-full bg-primary/10 font-sans text-lg font-bold'), children: shown.trim().charAt(0).toUpperCase() }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: slotClass(classNames, 'name', 'block truncate font-semibold'), children: shown }), _jsx("span", { className: slotClass(classNames, 'detail', 'block truncate text-sm text-muted-foreground'), children: (compact ? [profile.phone ?? profile.email] : [profile.phone, profile.email])
+                            .filter(Boolean)
+                            .join(' · ') })] })] }));
+}

package/dist/booking/portal/action-result.d.ts

@@ -0,0 +1,30 @@
+/**
+ * What a portal callback answers a form with when it did NOT succeed.
+ *
+ * The portal's forms ask the same two questions of every failed call: is the
+ * session dead (the caller should send the visitor back to the login — the
+ * form says nothing), or is there a sentence to show? `message` is optional:
+ * without one the form shows its own «could not reach the booking system»
+ * label, which is also what a callback that THROWS reads as.
+ */
+export type PortalActionFailure = {
+    ok: false;
+    kind: 'session';
+} | {
+    ok: false;
+    kind: 'error';
+    message?: string;
+};
+/** A portal callback's answer with no payload on success. */
+export type PortalActionResult = {
+    ok: true;
+} | PortalActionFailure;
+/**
+ * Runs a portal callback and turns a throw into the generic failure, so a
+ * form never gets stuck in its pending state on a rejected promise.
+ */
+export declare function settle<T extends {
+    ok: boolean;
+}>(run: () => Promise<T>): Promise<T | PortalActionFailure>;
+/** The sentence a failure shows, or `null` when it is a dead session. */
+export declare function failureMessage(failure: PortalActionFailure, unreachable: string): string | null;

package/dist/booking/portal/action-result.js

@@ -0,0 +1,18 @@
+/**
+ * Runs a portal callback and turns a throw into the generic failure, so a
+ * form never gets stuck in its pending state on a rejected promise.
+ */
+export async function settle(run) {
+    try {
+        return await run();
+    }
+    catch {
+        return { ok: false, kind: 'error' };
+    }
+}
+/** The sentence a failure shows, or `null` when it is a dead session. */
+export function failureMessage(failure, unreachable) {
+    if (failure.kind === 'session')
+        return null;
+    return failure.message ?? unreachable;
+}

package/dist/booking/portal/age-confirm-card.d.ts

@@ -0,0 +1,39 @@
+import { type SlotClassNames } from '../slots.js';
+export declare const AGE_CONFIRM_CARD_LABEL_KEYS: readonly ["ageConfirm.heading", "ageConfirm.lead", "ageConfirm.legend", "ageConfirm.birthYear", "ageConfirm.birthMonth", "ageConfirm.birthMonthUnknown", "ageConfirm.confirm", "ageConfirm.dismiss"];
+/** `heading` and `legend` take `{name}`. */
+export type AgeConfirmCardLabels = Record<(typeof AGE_CONFIRM_CARD_LABEL_KEYS)[number], string>;
+/** `root` (the section), `heading`, `form`, `actions` (the button row). */
+export type AgeConfirmCardSlot = 'root' | 'heading' | 'form' | 'actions';
+export interface AgeConfirmCardProps {
+    labels: AgeConfirmCardLabels;
+    name: string;
+    /** The year on file, as the editor holds it (a string: `''` is «not chosen»). */
+    birthYear: string;
+    years: readonly number[];
+    /** Month names, January first (e.g. from `format.clock.monthName`). */
+    months: readonly string[];
+    busy: boolean;
+    /** Why the last confirm failed, or `null`. */
+    error: string | null;
+    /** `birthMonth` is `''` for «don't know». */
+    onConfirm: (answer: {
+        birthYear: string;
+        birthMonth: string;
+    }) => void;
+    onDismiss: () => void;
+    classNames?: SlotClassNames<AgeConfirmCardSlot>;
+}
+/**
+ * «Confirm {name}'s age» — one small card at the top of the family editor,
+ * for a child whose birth month the booking system does not know.
+ *
+ * Presentational: `FamilyEditor` owns the save, so the editor row below and
+ * this card never disagree about what is stored. The year arrives prefilled
+ * and the month is optional, because «don't know» is a legitimate answer and
+ * the card must not hold a parent hostage for it.
+ *
+ * LAYOUT-STABLE: the caller decides up front whether the card is drawn, so it
+ * is in the first paint or not at all; its error line is always mounted, so a
+ * failure does not grow it; and it leaves only on the parent's own tap.
+ */
+export declare function AgeConfirmCard({ labels, name, birthYear, years, months, busy, error, onConfirm, onDismiss, classNames, }: AgeConfirmCardProps): import("react").JSX.Element;

package/dist/booking/portal/age-confirm-card.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { Field } from '../../primitives/field.js';
+import { renderLabel } from '../internal/label-parts.js';
+import { BookingButton } from '../internal/ui.js';
+import { slotClass } from '../slots.js';
+export const AGE_CONFIRM_CARD_LABEL_KEYS = [
+    'ageConfirm.heading',
+    'ageConfirm.lead',
+    'ageConfirm.legend',
+    'ageConfirm.birthYear',
+    'ageConfirm.birthMonth',
+    'ageConfirm.birthMonthUnknown',
+    'ageConfirm.confirm',
+    'ageConfirm.dismiss',
+];
+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';
+/**
+ * «Confirm {name}'s age» — one small card at the top of the family editor,
+ * for a child whose birth month the booking system does not know.
+ *
+ * Presentational: `FamilyEditor` owns the save, so the editor row below and
+ * this card never disagree about what is stored. The year arrives prefilled
+ * and the month is optional, because «don't know» is a legitimate answer and
+ * the card must not hold a parent hostage for it.
+ *
+ * LAYOUT-STABLE: the caller decides up front whether the card is drawn, so it
+ * is in the first paint or not at all; its error line is always mounted, so a
+ * failure does not grow it; and it leaves only on the parent's own tap.
+ */
+export function AgeConfirmCard({ labels, name, birthYear, years, months, busy, error, onConfirm, onDismiss, classNames, }) {
+    const id = useId();
+    const [year, setYear] = useState(birthYear);
+    const [month, setMonth] = useState('');
+    const headingId = `${id}-heading`;
+    const errorId = `${id}-error`;
+    return (_jsxs("section", { "aria-labelledby": headingId, "aria-busy": busy || undefined, className: slotClass(classNames, 'root', 'space-y-3 rounded-lg border border-secondary/40 bg-secondary/10 px-5 py-4'), children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h3", { id: headingId, className: slotClass(classNames, 'heading', 'font-sans text-lg font-bold'), children: renderLabel(labels['ageConfirm.heading'], { name }) }), _jsx("p", { className: "text-sm text-muted-foreground", children: labels['ageConfirm.lead'] })] }), _jsxs("form", { onSubmit: (event) => {
+                    event.preventDefault();
+                    onConfirm({ birthYear: year, birthMonth: month });
+                }, "aria-describedby": error ? errorId : undefined, className: slotClass(classNames, 'form', 'space-y-3'), children: [_jsxs("fieldset", { disabled: busy, className: "grid min-w-0 grid-cols-2 gap-3", children: [_jsx("legend", { className: "sr-only", children: renderLabel(labels['ageConfirm.legend'], { name }) }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-year`, children: labels['ageConfirm.birthYear'] }), _jsx("select", { id: `${id}-year`, value: year, onChange: (event) => setYear(event.target.value), className: SELECT_CLASS, children: years.map((option) => (_jsx("option", { value: String(option), children: option }, option))) })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-month`, children: labels['ageConfirm.birthMonth'] }), _jsxs("select", { id: `${id}-month`, value: month, onChange: (event) => setMonth(event.target.value), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['ageConfirm.birthMonthUnknown'] }), months.map((label, index) => (_jsx("option", { value: String(index + 1), children: label }, label)))] })] })] }), _jsxs("div", { className: slotClass(classNames, 'actions', 'flex flex-wrap items-center gap-3'), children: [_jsx(BookingButton, { type: "submit", size: "sm", disabled: busy, children: labels['ageConfirm.confirm'] }), _jsx(BookingButton, { type: "button", variant: "ghost", size: "sm", disabled: busy, onClick: onDismiss, children: labels['ageConfirm.dismiss'] }), _jsx("span", { "aria-live": "polite", className: "min-h-5 text-sm", children: error && _jsx(Field.Error, { id: errorId, children: error }) })] })] })] }));
+}

package/dist/booking/portal/child-cards.d.ts

@@ -0,0 +1,65 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { BookingFormat } from '../format.js';
+import { type SlotClassNames } from '../slots.js';
+import type { ChildSummary } from '../types.js';
+export declare const CHILD_CARDS_LABEL_KEYS: readonly ["childCards.empty", "childCards.neverVisited", "childCards.lastVisit", "childCards.lastVisitNoService", "childCards.book", "childCards.stylist", "childCards.next", "childCards.none"];
+/**
+ * Placeholders: `childCards.neverVisited` `{age}`; `childCards.lastVisit`
+ * `{age}` `{service}` `{date}`; `childCards.lastVisitNoService` `{age}`
+ * `{date}`; `childCards.book` `{name}`.
+ */
+export type ChildCardsLabels = Record<(typeof CHILD_CARDS_LABEL_KEYS)[number], string>;
+/**
+ * - `list`: the grid. - `card`: one child. - `avatar`: the initial.
+ * - `name`, `detail`: the two lines. - `details`: the full card's facts.
+ * - `link`: the book link. - `empty`: the default empty sentence.
+ */
+export type ChildCardsSlot = 'list' | 'card' | 'avatar' | 'name' | 'detail' | 'details' | 'link' | 'empty';
+export type ChildCardsVariant = 'full' | 'compact';
+export interface ChildCardProps {
+    child: ChildSummary;
+    /** Position in the list (drives the avatar tint). */
+    index: number;
+    variant: ChildCardsVariant;
+    href: string;
+    onBook?: (child: ChildSummary) => void;
+    stylistNames?: Readonly<Record<string, string>>;
+    labels: ChildCardsLabels;
+    format: Pick<BookingFormat, 'ageLabel' | 'clock'>;
+    classNames?: SlotClassNames<ChildCardsSlot>;
+}
+export interface ChildCardsComponents {
+    ChildCard?: ComponentType<ChildCardProps>;
+}
+export interface ChildCardsProps {
+    /** Named `kids` rather than `children`, which would collide with React's own. */
+    kids: ChildSummary[];
+    /**
+     * `full`: avatar, age, last visit, details and the book link (the children
+     * section). `compact`: a two-line row (the overview's reminder).
+     */
+    variant?: ChildCardsVariant;
+    /** The booking link for a child (their last service and usual stylist, when known). */
+    hrefFor: (child: ChildSummary) => string;
+    /** Called on the tap, before the link navigates (e.g. to stash the name outside the URL). */
+    onBook?: (child: ChildSummary) => void;
+    /**
+     * What to draw when there are no children. Default: the `childCards.empty`
+     * sentence. `null` where something next to it already says so.
+     */
+    empty?: ReactNode;
+    /** Stylist display names by id, for the «usual stylist» line. */
+    stylistNames?: Readonly<Record<string, string>>;
+    labels: ChildCardsLabels;
+    format: Pick<BookingFormat, 'ageLabel' | 'clock'>;
+    classNames?: SlotClassNames<ChildCardsSlot>;
+    components?: ChildCardsComponents;
+}
+/**
+ * «My children» — one card per child, and one tap to book them again. A plain
+ * `<a>` does the navigating, so the card works as a link; the tap only calls
+ * `onBook` first.
+ */
+export declare function ChildCards({ kids, variant, hrefFor, onBook, empty, stylistNames, labels, format, classNames, components, }: ChildCardsProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null;
+/** One child (an `<li>`). */
+export declare function DefaultChildCard({ child, index, variant, href, onBook, stylistNames, labels, format, classNames, }: ChildCardProps): import("react").JSX.Element;

package/dist/booking/portal/child-cards.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRight } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { renderLabel } from '../internal/label-parts.js';
+import { slotClass } from '../slots.js';
+export const CHILD_CARDS_LABEL_KEYS = [
+    'childCards.empty',
+    'childCards.neverVisited',
+    'childCards.lastVisit',
+    'childCards.lastVisitNoService',
+    'childCards.book',
+    'childCards.stylist',
+    'childCards.next',
+    'childCards.none',
+];
+/** The avatar tints, in order. Cosmetic, and deliberately not derived from the
+ * name: a hash would recolour a child the day they are renamed. */
+const AVATAR_TINTS = ['bg-secondary/30', 'bg-primary/10', 'bg-accent'];
+function lastVisitLine(child, labels, format) {
+    const age = format.ageLabel(child.ageRange);
+    if (child.lastVisitTs === null)
+        return renderLabel(labels['childCards.neverVisited'], { age });
+    const date = format.clock.date(child.lastVisitTs);
+    return child.serviceName
+        ? renderLabel(labels['childCards.lastVisit'], { age, service: child.serviceName, date })
+        : renderLabel(labels['childCards.lastVisitNoService'], { age, date });
+}
+/**
+ * «My children» — one card per child, and one tap to book them again. A plain
+ * `<a>` does the navigating, so the card works as a link; the tap only calls
+ * `onBook` first.
+ */
+export function ChildCards({ kids, variant = 'full', hrefFor, onBook, empty, stylistNames, labels, format, classNames, components, }) {
+    if (kids.length === 0) {
+        return empty === undefined ? (_jsx("p", { className: slotClass(classNames, 'empty', 'text-muted-foreground'), children: labels['childCards.empty'] })) : (empty);
+    }
+    const Card = components?.ChildCard ?? DefaultChildCard;
+    return (_jsx("ul", { className: slotClass(classNames, 'list', 'grid gap-4', variant === 'full' && 'sm:grid-cols-2'), children: kids.map((child, index) => (_jsx(Card
+        // Twins without Medal ids share name and year; the position keeps them apart.
+        , { child: child, index: index, variant: variant, href: hrefFor(child), onBook: onBook, stylistNames: stylistNames, labels: labels, format: format, classNames: classNames }, child.personId ?? `${child.name}-${child.birthYear}-${index}`))) }));
+}
+/** One child (an `<li>`). */
+export function DefaultChildCard({ child, index, variant, href, onBook, stylistNames, labels, format, classNames, }) {
+    return (_jsxs("li", { className: slotClass(classNames, 'card', 'flex gap-4 rounded-lg border border-border bg-card px-5 py-4', variant === 'full' ? 'flex-col' : 'items-center'), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("span", { "aria-hidden": "true", className: slotClass(classNames, 'avatar', 'flex size-11 shrink-0 items-center justify-center rounded-full font-sans text-lg font-bold', AVATAR_TINTS[index % AVATAR_TINTS.length]), children: child.name.trim().charAt(0).toUpperCase() }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: slotClass(classNames, 'name', 'block truncate font-semibold'), children: child.name }), _jsx("span", { className: slotClass(classNames, 'detail', 'block truncate text-sm text-muted-foreground'), children: lastVisitLine(child, labels, format) })] })] }), variant === 'full' && (_jsx(ChildDetails, { child: child, stylistNames: stylistNames, labels: labels, format: format, className: classNames?.details })), _jsxs("a", { href: href, onClick: onBook ? () => onBook(child) : undefined, className: slotClass(classNames, 'link', 'font-semibold text-primary underline underline-offset-4', variant === 'full'
+                    ? 'inline-flex items-center gap-2 no-underline'
+                    : 'ms-auto shrink-0 text-sm'), children: [renderLabel(labels['childCards.book'], { name: child.name }), variant === 'full' && _jsx(ArrowRight, { "aria-hidden": "true", className: "size-4" })] })] }));
+}
+/**
+ * The full card's two facts beyond the last visit: the usual stylist and the
+ * next appointment. Both lines are always drawn — a dash where there is
+ * nothing — so every card in the grid is the same height.
+ */
+function ChildDetails({ child, stylistNames, labels, format, className, }) {
+    const stylist = child.preferredResourceId === null ? null : (stylistNames?.[child.preferredResourceId] ?? null);
+    return (_jsxs("dl", { className: cn('grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-sm', className), children: [_jsx("dt", { className: "text-muted-foreground", children: labels['childCards.stylist'] }), _jsx("dd", { className: "truncate", children: stylist ?? labels['childCards.none'] }), _jsx("dt", { className: "text-muted-foreground", children: labels['childCards.next'] }), _jsx("dd", { className: "truncate", children: child.nextVisitTs === null
+                    ? labels['childCards.none']
+                    : format.clock.dateTime(child.nextVisitTs) })] }));
+}

package/dist/booking/portal/data-controls.d.ts

@@ -0,0 +1,48 @@
+import { type SlotClassNames } from '../slots.js';
+import { type PortalActionFailure, type PortalActionResult } from './action-result.js';
+export declare const DATA_CONTROLS_LABEL_KEYS: readonly ["dataControls.heading", "dataControls.export", "dataControls.delete", "dataControls.confirmHeading", "dataControls.consequences", "dataControls.confirmLabel", "dataControls.confirmHelp", "dataControls.wrongWord", "dataControls.deleteForever", "dataControls.cancel", "dataControls.unreachable", "dataControls.confirmWord"];
+/**
+ * `confirmWord` is the literal the visitor must type (e.g. «DELETE»);
+ * `confirmLabel` and `wrongWord` take `{word}`.
+ */
+export type DataControlsLabels = Record<(typeof DATA_CONTROLS_LABEL_KEYS)[number], string>;
+/**
+ * `root` (the section), `heading`, `actions` (the export/delete row),
+ * `confirm` (the confirm panel form).
+ */
+export type DataControlsSlot = 'root' | 'heading' | 'actions' | 'confirm';
+/**
+ * The export's answer. With `filename` and `json` the screen turns it into a
+ * file download (nothing of it is rendered into the page); a plain
+ * `{ ok: true }` means the caller delivered the file itself.
+ */
+export type DataExportResult = {
+    ok: true;
+    filename?: string;
+    json?: string;
+} | PortalActionFailure;
+export interface DataControlsProps {
+    labels: DataControlsLabels;
+    /** Take a copy of the visitor's data. */
+    onExport: () => Promise<DataExportResult>;
+    /**
+     * Delete the visitor. Called only with the confirm word typed exactly
+     * (trimmed); the backend should re-check it. On `{ ok: true }` the caller
+     * navigates away (a full document load, so no cached dashboard survives).
+     */
+    onDelete: (confirmation: string) => Promise<PortalActionResult>;
+    /** A callback answered `{ kind: 'session' }`: send the visitor to the login. */
+    onSessionExpired?: () => void;
+    classNames?: SlotClassNames<DataControlsSlot>;
+}
+/**
+ * «My data» — the two data-protection gestures: take a copy, and leave.
+ *
+ * The export is a file, not a page: the callback hands back the JSON as a
+ * string and this turns it into a download, so nothing about the visitor is
+ * rendered into the DOM or left in the history. The delete is two steps and
+ * a typed word — the button alone is not the confirmation, the literal word
+ * is, and the backend should re-check it because a page can be driven
+ * without its buttons.
+ */
+export declare function DataControls({ labels, onExport, onDelete, onSessionExpired, classNames, }: DataControlsProps): import("react").JSX.Element;

package/dist/booking/portal/data-controls.js

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState, useTransition } from 'react';
+import { Field } from '../../primitives/field.js';
+import { Input } from '../../primitives/input.js';
+import { renderLabel } from '../internal/label-parts.js';
+import { BOOKING_INPUT_CLASS, BookingButton } from '../internal/ui.js';
+import { fillLabel } from '../labels.js';
+import { slotClass } from '../slots.js';
+import { settle } from './action-result.js';
+export const DATA_CONTROLS_LABEL_KEYS = [
+    'dataControls.heading',
+    'dataControls.export',
+    'dataControls.delete',
+    'dataControls.confirmHeading',
+    'dataControls.consequences',
+    'dataControls.confirmLabel',
+    'dataControls.confirmHelp',
+    'dataControls.wrongWord',
+    'dataControls.deleteForever',
+    'dataControls.cancel',
+    'dataControls.unreachable',
+    'dataControls.confirmWord',
+];
+function download(filename, json) {
+    const url = URL.createObjectURL(new Blob([json], { type: 'application/json' }));
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = filename;
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    // Deferred a tick: Safari starts the download after `click()` returns, and
+    // a URL revoked synchronously is a download of nothing.
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+/**
+ * «My data» — the two data-protection gestures: take a copy, and leave.
+ *
+ * The export is a file, not a page: the callback hands back the JSON as a
+ * string and this turns it into a download, so nothing about the visitor is
+ * rendered into the DOM or left in the history. The delete is two steps and
+ * a typed word — the button alone is not the confirmation, the literal word
+ * is, and the backend should re-check it because a page can be driven
+ * without its buttons.
+ */
+export function DataControls({ labels, onExport, onDelete, onSessionExpired, classNames, }) {
+    const id = useId();
+    const [confirming, setConfirming] = useState(false);
+    const [typed, setTyped] = useState('');
+    const [error, setError] = useState(null);
+    const [exportError, setExportError] = useState(null);
+    const [pending, startTransition] = useTransition();
+    const word = labels['dataControls.confirmWord'];
+    const confirmId = `${id}-confirm`;
+    const errorId = `${id}-error`;
+    function failed(failure) {
+        if (failure.kind === 'session') {
+            onSessionExpired?.();
+            return null;
+        }
+        return failure.message ?? labels['dataControls.unreachable'];
+    }
+    function exportData() {
+        setExportError(null);
+        startTransition(async () => {
+            const result = await settle(onExport);
+            if (result.ok) {
+                if ('filename' in result && result.filename && result.json !== undefined) {
+                    download(result.filename, result.json);
+                }
+                return;
+            }
+            const message = failed(result);
+            if (message !== null)
+                setExportError(message);
+        });
+    }
+    function deleteMe(event) {
+        event.preventDefault();
+        const confirm = typed.trim();
+        if (confirm !== word) {
+            setError(fillLabel(labels['dataControls.wrongWord'], { word }));
+            return;
+        }
+        setError(null);
+        startTransition(async () => {
+            const result = await settle(() => onDelete(confirm));
+            if (result.ok)
+                return;
+            const message = failed(result);
+            if (message !== null)
+                setError(message);
+        });
+    }
+    return (_jsxs("section", { "aria-labelledby": "portal-data-heading", className: slotClass(classNames, 'root', 'space-y-4'), children: [_jsx("h2", { id: "portal-data-heading", className: slotClass(classNames, 'heading', 'font-sans text-xl font-bold md:text-2xl'), children: labels['dataControls.heading'] }), _jsxs("div", { className: slotClass(classNames, 'actions', 'flex flex-wrap items-center gap-3'), children: [_jsx(BookingButton, { variant: "outline", onClick: exportData, disabled: pending, children: labels['dataControls.export'] }), !confirming && (_jsx(BookingButton, { variant: "destructive", onClick: () => setConfirming(true), disabled: pending, children: labels['dataControls.delete'] }))] }), _jsx("div", { "aria-live": "polite", children: exportError && _jsx(Field.Error, { children: exportError }) }), confirming && (_jsxs("form", { onSubmit: deleteMe, "aria-labelledby": `${id}-delete-heading`, className: slotClass(classNames, 'confirm', 'space-y-4 rounded-lg border border-destructive/40 bg-destructive/10 px-5 py-4'), children: [_jsx("p", { id: `${id}-delete-heading`, className: "font-semibold", children: labels['dataControls.confirmHeading'] }), _jsx("p", { className: "text-sm", children: labels['dataControls.consequences'] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: confirmId, children: renderLabel(labels['dataControls.confirmLabel'], { word }) }), _jsx(Input, { id: confirmId, autoComplete: "off", autoCapitalize: "characters", value: typed, "aria-describedby": `${confirmId}-help${error ? ` ${errorId}` : ''}`, "aria-invalid": error ? true : undefined, onChange: (event) => {
+                                    setTyped(event.target.value);
+                                    setError(null);
+                                }, className: BOOKING_INPUT_CLASS }), _jsx(Field.Description, { id: `${confirmId}-help`, children: labels['dataControls.confirmHelp'] })] }), _jsx("div", { "aria-live": "polite", children: error && _jsx(Field.Error, { id: errorId, children: error }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(BookingButton, { type: "submit", variant: "destructive", disabled: pending, children: labels['dataControls.deleteForever'] }), _jsx(BookingButton, { variant: "ghost", disabled: pending, onClick: () => {
+                                    setConfirming(false);
+                                    setTyped('');
+                                    setError(null);
+                                }, children: labels['dataControls.cancel'] })] })] }))] }));
+}

package/dist/booking/portal/family-editor.d.ts

@@ -0,0 +1,141 @@
+import { type ComponentType } from 'react';
+import type { BookingFormat } from '../format.js';
+import { type SlotClassNames } from '../slots.js';
+import type { PortalFamilyMemberDto, PortalPersonNouns } from '../types.js';
+import { type PortalActionFailure } from './action-result.js';
+import { type AgeConfirmCardLabels } from './age-confirm-card.js';
+export declare const FAMILY_EDITOR_OWN_LABEL_KEYS: readonly ["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 declare const FAMILY_EDITOR_LABEL_KEYS: readonly ["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", "ageConfirm.heading", "ageConfirm.lead", "ageConfirm.legend", "ageConfirm.birthYear", "ageConfirm.birthMonth", "ageConfirm.birthMonthUnknown", "ageConfirm.confirm", "ageConfirm.dismiss"];
+/**
+ * `heading` is used when no `nouns` are given. `removeNamed`, `ageConfirmed`
+ * and `ageSaved` take `{name}`. The card's `ageConfirm.*` keys are included.
+ */
+export type FamilyEditorLabels = Record<(typeof FAMILY_EDITOR_OWN_LABEL_KEYS)[number], string> & AgeConfirmCardLabels;
+/**
+ * `root` (the section), `heading`, `list` (the `<ul>` of rows), `card` (each
+ * row's form), `listStatus` (the live region under the list), `add` (the add
+ * button), `ageCard` (the age prompt's section).
+ */
+export type FamilyEditorSlot = 'root' | 'heading' | 'list' | 'card' | 'listStatus' | 'add' | 'ageCard';
+/** One child as the form holds it. Every field is text; `''` is «not chosen». */
+export interface FamilyEditorRow {
+    key: number;
+    /** The backend's id for the child, `null` for a new row or one it could not name. */
+    personId: string | null;
+    /** Where the child sits in the profile's family — the fallback's address. */
+    index: number | null;
+    name: string;
+    birthYear: string;
+    birthMonth: string;
+    notes: string;
+    stylist: string;
+}
+export type FamilyEditorRowStatus = {
+    kind: 'saved';
+    note?: string;
+} | {
+    kind: 'error';
+    message: string;
+}
+/** A name without a year, or the reverse. */
+ | {
+    kind: 'partial';
+};
+export type FamilyEditorRowPatch = Partial<Omit<FamilyEditorRow, 'key' | 'personId' | 'index'>>;
+/** Which child a call is about: the id, or the family index where there is none. */
+export interface PersonTarget {
+    personId: string | null;
+    /** Present only when `personId` is `null` and the child is on file. */
+    index?: number;
+}
+/** A person as a save sends it. The three detail fields are absent unless offered; `null` clears. */
+export interface PersonPatch {
+    name: string;
+    birthYear: number;
+    birthMonth?: number | null;
+    notes?: string | null;
+    preferredResourceId?: string | null;
+}
+export interface PersonSaveRequest {
+    /** A new child (no id and no index yet). */
+    create: boolean;
+    target: PersonTarget;
+    person: PersonPatch;
+}
+/** A person save or removal's answer: the family as now stored, or why not. */
+export type PersonSaveResult = {
+    ok: true;
+    family: PortalFamilyMemberDto[];
+    /** The id a created child got, when the backend names one. */
+    personId: string | null;
+    /** The backend could keep only name and year (no per-person endpoints). */
+    fallback: boolean;
+} | PortalActionFailure;
+export interface FamilyMemberCardProps {
+    /** Unique id prefix for the row's controls. */
+    id: string;
+    row: FamilyEditorRow;
+    years: readonly number[];
+    months: readonly string[];
+    /** Whether month, stylist and notes are offered for this row. */
+    offerDetails: boolean;
+    stylists: ReadonlyArray<{
+        id: string;
+        name: string;
+    }>;
+    status: FamilyEditorRowStatus | null;
+    labels: FamilyEditorLabels;
+    className?: string;
+    onPatch: (patch: FamilyEditorRowPatch) => void;
+    onSave: () => void;
+    onRemove: () => void;
+}
+export interface FamilyEditorComponents {
+    /** One child's row (a `<form>`). Wrap `DefaultFamilyMemberCard` to extend it. */
+    FamilyMemberCard?: ComponentType<FamilyMemberCardProps>;
+}
+export interface FamilyEditorProps {
+    labels: FamilyEditorLabels;
+    /** Month names come from `format.clock.monthName`; the current year from `format.clock.dayKey(now)`. */
+    format: BookingFormat;
+    family: PortalFamilyMemberDto[];
+    /** What the business calls the people on a profile; `persons` becomes the heading. */
+    nouns?: PortalPersonNouns;
+    /** Overrides the year derived from `now`. */
+    currentYear?: number;
+    /** Defaults to `Date.now()`. */
+    now?: number;
+    /**
+     * Whether the backend keeps month, notes and stylist. A new row offers them
+     * too when there is nobody on the profile to tell from.
+     */
+    personDetails?: boolean;
+    /** Preferred-stylist choices, display names. */
+    stylists?: ReadonlyArray<{
+        id: string;
+        name: string;
+    }>;
+    /**
+     * Draw the age prompt for the first child with no birth month.
+     * `dismissed` are the ids already answered on this device. Absent: no card.
+     */
+    agePrompt?: {
+        dismissed: readonly string[];
+    };
+    /** Saves one child. Called with the trimmed name. */
+    onSavePerson: (request: PersonSaveRequest) => Promise<PersonSaveResult>;
+    /** Removes one child. */
+    onRemovePerson: (target: PersonTarget) => Promise<PersonSaveResult>;
+    /** A callback answered `{ kind: 'session' }`: send the visitor to the login. */
+    onSessionExpired?: () => void;
+    /**
+     * The age prompt was answered (confirmed or waved away). `dismissed` is the
+     * whole list to remember, the new id last.
+     */
+    onAgeAnswered?: (dismissed: readonly string[]) => void;
+    classNames?: SlotClassNames<FamilyEditorSlot>;
+    components?: FamilyEditorComponents;
+}
+export declare function FamilyEditor({ labels, format, family, nouns, now, currentYear, personDetails, stylists, agePrompt, onSavePerson, onRemovePerson, onSessionExpired, onAgeAnswered, classNames, components, }: FamilyEditorProps): import("react").JSX.Element;
+/** The default row: name + year, the three details where offered, save / remove and a status line. */
+export declare function DefaultFamilyMemberCard({ id, row, years, months, offerDetails, stylists, status, labels, className, onPatch, onSave, onRemove, }: FamilyMemberCardProps): import("react").JSX.Element;