@medalsocial/meda 3.0.0 → 3.3.0

package/dist/booking/label-keys.d.ts

@@ -0,0 +1,34 @@
+import { ADD_CHILD_SHEET_LABEL_KEYS } from './add-child-sheet.js';
+import { BOOKING_SKELETON_LABEL_KEYS } from './booking-skeleton.js';
+import { CONFIRMATION_LABEL_KEYS } from './confirmation.js';
+import { DETAILS_SCREEN_LABEL_KEYS } from './details-screen.js';
+import { LOGIN_SHEET_LABEL_KEYS } from './login-sheet.js';
+import { MANAGE_SCREEN_LABEL_KEYS } from './manage-screen.js';
+import { CHILD_CARDS_LABEL_KEYS } from './portal/child-cards.js';
+import { DATA_CONTROLS_LABEL_KEYS } from './portal/data-controls.js';
+import { FAMILY_EDITOR_LABEL_KEYS } from './portal/family-editor.js';
+import { LOGOUT_BUTTON_LABEL_KEYS } from './portal/logout-button.js';
+import { PORTAL_SHELL_LABEL_KEYS } from './portal/portal-shell.js';
+import { PORTAL_UNREACHABLE_LABEL_KEYS } from './portal/portal-unreachable.js';
+import { PROFILE_FORM_LABEL_KEYS } from './portal/profile-form.js';
+import { REBOOK_CARDS_LABEL_KEYS } from './portal/rebook-cards.js';
+import { UPCOMING_BOOKINGS_LABEL_KEYS } from './portal/upcoming-bookings.js';
+import { VIPPS_LINK_ROW_LABEL_KEYS } from './portal/vipps-link-row.js';
+import { VISIT_HISTORY_LABEL_KEYS } from './portal/visit-history.js';
+import { SERVICE_SCREEN_LABEL_KEYS } from './service-screen.js';
+import { STYLIST_SCREEN_LABEL_KEYS } from './stylist-screen.js';
+import { SUMMARY_BAR_LABEL_KEYS } from './summary-bar.js';
+import { TIME_SCREEN_LABEL_KEYS } from './time-screen.js';
+import { WHO_SCREEN_LABEL_KEYS } from './who-screen.js';
+/**
+ * Every label key any booking screen reads, once. A complete pack for a
+ * locale is a `BookingLabels`; each screen's `labels` prop is a subset of it,
+ * so the same merged pack can be handed to every screen.
+ *
+ * (Screens that embed another screen already include its keys, e.g. the
+ * login sheet carries the login panel's, OTP slots' and Vipps button's.)
+ */
+export declare const BOOKING_LABEL_KEYS: readonly ("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" | "bookingSkeleton.opening" | "confirmation.heading" | "confirmation.serviceFor" | "confirmation.when" | "confirmation.party.heading" | "confirmation.party.line" | "confirmation.party.stylist" | "confirmation.party.total" | "confirmation.calendar" | "confirmation.manage" | "confirmation.manageFor" | "confirmation.portal" | "confirmation.startOver" | "details.heading" | "details.phone.label" | "details.phone.prefix" | "details.phone.error" | "details.name.label" | "details.known.label" | "details.known.for" | "details.known.self" | "details.known.adult" | "details.known.child" | "details.child.name" | "details.child.year" | "details.child.yearPlaceholder" | "details.email.label" | "details.email.help" | "details.email.error" | "details.notes.label" | "details.notes.placeholder" | "details.terms.text" | "details.terms.link" | "details.marketing.text" | "details.error.maxParty" | "details.error.slotTaken" | "details.error.conflict" | "details.error.invalidInput" | "details.error.unconfigured" | "details.error.upstreamError" | "details.error.inProgress" | "details.call.link" | "details.call.none" | "details.submit" | "otp.label" | "vipps.button" | "vipps.unavailable" | "vipps.throttled" | "login.heading" | "login.codeHeading" | "login.or" | "login.emailIntro" | "login.emailLabel" | "login.sendCode" | "login.codeLabel" | "login.submitCode" | "login.codeHelp" | "login.codeHelpVipps" | "login.vippsSentTo" | "login.vippsSentToUnknown" | "login.cooldownWait" | "login.cooldownReady" | "login.resendIn" | "login.resend" | "login.switchEmail" | "login.useEmailInstead" | "login.notice.sent" | "login.notice.resent" | "login.notice.unreachable" | "login.notice.badEmail" | "login.notice.invalid" | "login.notice.throttled" | "login.notice.vippsInvalid" | "login.notice.vippsConflict" | "loginSheet.prompt" | "loginSheet.trigger" | "loginSheet.intro" | "loginSheet.vipps" | "loginSheet.close" | "time.heading" | "time.dayStrip.legend" | "time.nearest" | "time.current" | "time.nextFree" | "time.shortNotice" | "time.weekend.pct" | "time.weekend.mixed" | "time.month.show" | "time.month.hide" | "time.month.previous" | "time.month.next" | "time.month.heading" | "time.month.note" | "time.party.sequential" | "time.party.parallel" | "time.party.seat" | "time.party.seatSeparator" | "time.parallel.offer.two" | "time.parallel.offer.other" | "time.parallel.accept" | "time.empty.closed" | "time.empty.over" | "time.empty.full" | "time.empty.stylist" | "time.empty.unknown" | "time.empty.callLink" | "time.empty.callLinkAria" | "time.empty.callSuffix" | "time.empty.callPlain" | "time.loading" | "time.skeleton.dayPlaceholder" | "time.taken.message" | "time.taken.close" | "manage.heading" | "manage.serviceFallback" | "manage.card.named" | "manage.card.when" | "manage.card.whenWithStylist" | "manage.appointment.named" | "manage.appointment.namedSibilant" | "manage.appointment.unnamed" | "manage.ringUs" | "manage.ringUsOn" | "manage.callUs" | "manage.callUsOn" | "manage.error.windowPassed" | "manage.error.slotTaken" | "manage.error.notFound" | "manage.error.conflict" | "manage.error.invalidInput" | "manage.error.unavailable" | "manage.freeUntil" | "manage.remaining.in" | "manage.remaining.daysAndHours" | "manage.remaining.underMinute" | "manage.remaining.day.one" | "manage.remaining.day.other" | "manage.remaining.hour.one" | "manage.remaining.hour.other" | "manage.remaining.minute.one" | "manage.remaining.minute.other" | "manage.change" | "manage.cancel" | "manage.callToChange" | "manage.callToCancel" | "manage.blocked" | "manage.blocked.suffix" | "manage.blocked.plain" | "manage.calendar" | "manage.closed.cancelled" | "manage.closed.completed" | "manage.closed.noShow" | "manage.closed.pending" | "manage.closed.pendingCall" | "manage.closed.pendingCallPlain" | "manage.bookNew" | "manage.party.heading" | "manage.party.justThisOne" | "manage.party.unnamed" | "manage.party.note" | "manage.party.noteSuffix" | "manage.back" | "manage.reschedule.lead" | "manage.reschedule.leadWithStylist" | "manage.reschedule.failed" | "manage.reschedule.failedSuffix" | "manage.reschedule.loading" | "manage.move.question" | "manage.move.questionWithStylist" | "manage.move.surcharge" | "manage.move.confirm" | "manage.move.pickAnother" | "manage.cancel.question" | "manage.cancel.reasonLegend" | "manage.cancel.reason.illness" | "manage.cancel.reason.noLongerSuits" | "manage.cancel.reason.other" | "manage.cancel.confirm" | "manage.cancel.keep" | "manage.cancelled" | "manage.cancelled.findNew" | "manage.moved" | "manage.movedTo" | "manage.moved.view" | "manage.moved.noLink" | "manage.moved.noLinkSuffix" | "manage.portal" | "childCards.empty" | "childCards.neverVisited" | "childCards.lastVisit" | "childCards.lastVisitNoService" | "childCards.book" | "childCards.stylist" | "childCards.next" | "childCards.none" | "dataControls.heading" | "dataControls.export" | "dataControls.delete" | "dataControls.confirmHeading" | "dataControls.consequences" | "dataControls.confirmLabel" | "dataControls.confirmHelp" | "dataControls.wrongWord" | "dataControls.deleteForever" | "dataControls.cancel" | "dataControls.unreachable" | "dataControls.confirmWord" | "ageConfirm.heading" | "ageConfirm.lead" | "ageConfirm.legend" | "ageConfirm.birthYear" | "ageConfirm.birthMonth" | "ageConfirm.birthMonthUnknown" | "ageConfirm.confirm" | "ageConfirm.dismiss" | "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" | "logout.button" | "logout.unreachable" | "portalShell.nav" | "portalShell.navBar" | "portalUnreachable.heading" | "portalUnreachable.body" | "portalUnreachable.retry" | "portalUnreachable.call" | "profileForm.heading" | "profileForm.firstName" | "profileForm.lastName" | "profileForm.phone" | "profileForm.email" | "profileForm.emailHelp" | "profileForm.save" | "profileForm.saved" | "profileForm.restored" | "profileForm.marketing" | "profileForm.unreachable" | "rebook.heading" | "rebook.empty" | "rebook.serviceFallback" | "rebook.anyStylist" | "rebook.cta" | "upcoming.heading" | "upcoming.empty" | "upcoming.book" | "upcoming.next" | "upcoming.today" | "upcoming.tomorrow" | "upcoming.inDays" | "upcoming.when" | "upcoming.serviceFallback" | "upcoming.anyStylist" | "upcoming.manage" | "upcoming.noManage" | "upcoming.noManageWithPhone" | "upcoming.call" | "vippsLink.heading" | "vippsLink.linked" | "vippsLink.pitch" | "vippsLink.button" | "vippsLink.success" | "vippsLink.conflict" | "vippsLink.failed" | "vippsLink.unavailable" | "vippsLink.throttled" | "history.heading" | "history.empty" | "history.serviceFallback" | "history.count.one" | "history.count.other" | "history.unknownAmount" | "service.heading" | "service.categoriesLegend" | "service.sameAsLast" | "service.chooseOther" | "service.duration" | "service.phoneOnly" | "service.phoneOnlyLinkLabel" | "service.ageDivider.named" | "service.ageDivider.unnamed" | "service.party.listLabel" | "service.party.adultAlone" | "service.party.nothingFits" | "service.party.remove" | "stylist.heading" | "stylist.firstAvailable" | "stylist.firstAvailableSubtitle" | "stylist.firstAvailableBadge" | "stylist.pendingName" | "stylist.nextAvailable" | "stylist.loading" | "stylist.party.legend" | "stylist.party.sequential" | "stylist.party.sequentialMinutes" | "stylist.party.parallel.two" | "stylist.party.parallel.three" | "stylist.party.parallel.other" | "stylist.party.parallelMinutes" | "stylist.party.parallelNote.two" | "stylist.party.parallelNote.three" | "stylist.party.parallelNote.other" | "summary.placeholder.who" | "summary.placeholder.service" | "summary.next" | "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")[];
+export type BookingLabelKey = (typeof WHO_SCREEN_LABEL_KEYS)[number] | (typeof ADD_CHILD_SHEET_LABEL_KEYS)[number] | (typeof SERVICE_SCREEN_LABEL_KEYS)[number] | (typeof STYLIST_SCREEN_LABEL_KEYS)[number] | (typeof TIME_SCREEN_LABEL_KEYS)[number] | (typeof MANAGE_SCREEN_LABEL_KEYS)[number] | (typeof DETAILS_SCREEN_LABEL_KEYS)[number] | (typeof SUMMARY_BAR_LABEL_KEYS)[number] | (typeof CONFIRMATION_LABEL_KEYS)[number] | (typeof BOOKING_SKELETON_LABEL_KEYS)[number] | (typeof LOGIN_SHEET_LABEL_KEYS)[number] | (typeof PORTAL_SHELL_LABEL_KEYS)[number] | (typeof PORTAL_UNREACHABLE_LABEL_KEYS)[number] | (typeof UPCOMING_BOOKINGS_LABEL_KEYS)[number] | (typeof VISIT_HISTORY_LABEL_KEYS)[number] | (typeof REBOOK_CARDS_LABEL_KEYS)[number] | (typeof CHILD_CARDS_LABEL_KEYS)[number] | (typeof FAMILY_EDITOR_LABEL_KEYS)[number] | (typeof PROFILE_FORM_LABEL_KEYS)[number] | (typeof DATA_CONTROLS_LABEL_KEYS)[number] | (typeof LOGOUT_BUTTON_LABEL_KEYS)[number] | (typeof VIPPS_LINK_ROW_LABEL_KEYS)[number];
+/** A complete label pack for one locale. */
+export type BookingLabels = Record<BookingLabelKey, string>;

package/dist/booking/label-keys.js

@@ -0,0 +1,56 @@
+import { ADD_CHILD_SHEET_LABEL_KEYS } from './add-child-sheet.js';
+import { BOOKING_SKELETON_LABEL_KEYS } from './booking-skeleton.js';
+import { CONFIRMATION_LABEL_KEYS } from './confirmation.js';
+import { DETAILS_SCREEN_LABEL_KEYS } from './details-screen.js';
+import { LOGIN_SHEET_LABEL_KEYS } from './login-sheet.js';
+import { MANAGE_SCREEN_LABEL_KEYS } from './manage-screen.js';
+import { CHILD_CARDS_LABEL_KEYS } from './portal/child-cards.js';
+import { DATA_CONTROLS_LABEL_KEYS } from './portal/data-controls.js';
+import { FAMILY_EDITOR_LABEL_KEYS } from './portal/family-editor.js';
+import { LOGOUT_BUTTON_LABEL_KEYS } from './portal/logout-button.js';
+import { PORTAL_SHELL_LABEL_KEYS } from './portal/portal-shell.js';
+import { PORTAL_UNREACHABLE_LABEL_KEYS } from './portal/portal-unreachable.js';
+import { PROFILE_FORM_LABEL_KEYS } from './portal/profile-form.js';
+import { REBOOK_CARDS_LABEL_KEYS } from './portal/rebook-cards.js';
+import { UPCOMING_BOOKINGS_LABEL_KEYS } from './portal/upcoming-bookings.js';
+import { VIPPS_LINK_ROW_LABEL_KEYS } from './portal/vipps-link-row.js';
+import { VISIT_HISTORY_LABEL_KEYS } from './portal/visit-history.js';
+import { SERVICE_SCREEN_LABEL_KEYS } from './service-screen.js';
+import { STYLIST_SCREEN_LABEL_KEYS } from './stylist-screen.js';
+import { SUMMARY_BAR_LABEL_KEYS } from './summary-bar.js';
+import { TIME_SCREEN_LABEL_KEYS } from './time-screen.js';
+import { WHO_SCREEN_LABEL_KEYS } from './who-screen.js';
+/**
+ * Every label key any booking screen reads, once. A complete pack for a
+ * locale is a `BookingLabels`; each screen's `labels` prop is a subset of it,
+ * so the same merged pack can be handed to every screen.
+ *
+ * (Screens that embed another screen already include its keys, e.g. the
+ * login sheet carries the login panel's, OTP slots' and Vipps button's.)
+ */
+export const BOOKING_LABEL_KEYS = [
+    ...new Set([
+        ...WHO_SCREEN_LABEL_KEYS,
+        ...ADD_CHILD_SHEET_LABEL_KEYS,
+        ...SERVICE_SCREEN_LABEL_KEYS,
+        ...STYLIST_SCREEN_LABEL_KEYS,
+        ...TIME_SCREEN_LABEL_KEYS,
+        ...MANAGE_SCREEN_LABEL_KEYS,
+        ...DETAILS_SCREEN_LABEL_KEYS,
+        ...SUMMARY_BAR_LABEL_KEYS,
+        ...CONFIRMATION_LABEL_KEYS,
+        ...BOOKING_SKELETON_LABEL_KEYS,
+        ...LOGIN_SHEET_LABEL_KEYS,
+        ...PORTAL_SHELL_LABEL_KEYS,
+        ...PORTAL_UNREACHABLE_LABEL_KEYS,
+        ...UPCOMING_BOOKINGS_LABEL_KEYS,
+        ...VISIT_HISTORY_LABEL_KEYS,
+        ...REBOOK_CARDS_LABEL_KEYS,
+        ...CHILD_CARDS_LABEL_KEYS,
+        ...FAMILY_EDITOR_LABEL_KEYS,
+        ...PROFILE_FORM_LABEL_KEYS,
+        ...DATA_CONTROLS_LABEL_KEYS,
+        ...LOGOUT_BUTTON_LABEL_KEYS,
+        ...VIPPS_LINK_ROW_LABEL_KEYS,
+    ]),
+];

package/dist/booking/labels.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copy for the booking screens.
+ *
+ * Every word a booking screen shows arrives through its `labels` prop — meda
+ * ships no default brand and no default language. A screen's labels are a flat
+ * record of strings keyed `'<screen>.<thing>'` (e.g. `'who.heading'`), so one
+ * merged pack (`BookingLabels`) can be handed to every screen, and a customer
+ * can override a single sentence without touching the rest.
+ *
+ * Values are plain strings, so a pack is serialisable (it can travel from a
+ * server component to the client as a prop). Variable parts are `{name}`
+ * placeholders, filled by `fillLabel`.
+ */
+/** Replaces `{key}` placeholders in `template`. Unknown keys are left as written. */
+export declare function fillLabel(template: string, values: Readonly<Record<string, string | number>>): string;

package/dist/booking/labels.js

@@ -0,0 +1,17 @@
+/**
+ * Copy for the booking screens.
+ *
+ * Every word a booking screen shows arrives through its `labels` prop — meda
+ * ships no default brand and no default language. A screen's labels are a flat
+ * record of strings keyed `'<screen>.<thing>'` (e.g. `'who.heading'`), so one
+ * merged pack (`BookingLabels`) can be handed to every screen, and a customer
+ * can override a single sentence without touching the rest.
+ *
+ * Values are plain strings, so a pack is serialisable (it can travel from a
+ * server component to the client as a prop). Variable parts are `{name}`
+ * placeholders, filled by `fillLabel`.
+ */
+/** Replaces `{key}` placeholders in `template`. Unknown keys are left as written. */
+export function fillLabel(template, values) {
+    return template.replace(/\{(\w+)\}/g, (match, key) => Object.hasOwn(values, key) ? String(values[key]) : match);
+}

package/dist/booking/live-status.d.ts

@@ -0,0 +1,14 @@
+export interface LiveStatusProps {
+    /** The sentence to announce; `null` empties the region. */
+    text: string | null;
+    /** Visually hidden by default. */
+    className?: string;
+}
+/**
+ * A polite live region that is mounted EMPTY and filled after mount.
+ *
+ * Screen readers announce a change inside a live region they already know
+ * about; a region that arrives with its text already in it is often read as
+ * nothing at all. So the text lands one commit after the element does.
+ */
+export declare function LiveStatus({ text, className }: LiveStatusProps): import("react").JSX.Element;

package/dist/booking/live-status.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+/**
+ * A polite live region that is mounted EMPTY and filled after mount.
+ *
+ * Screen readers announce a change inside a live region they already know
+ * about; a region that arrives with its text already in it is often read as
+ * nothing at all. So the text lands one commit after the element does.
+ */
+export function LiveStatus({ text, className = 'sr-only' }) {
+    const [shown, setShown] = useState(null);
+    useEffect(() => {
+        setShown(text);
+    }, [text]);
+    return (_jsx("p", { role: "status", "aria-live": "polite", className: className, children: shown }));
+}

package/dist/booking/login-panel.d.ts

@@ -0,0 +1,108 @@
+import { type Dispatch, type ReactNode, type SetStateAction } from 'react';
+import { type OtpSlotsLabels, type OtpSlotsSlot } from './otp-slots.js';
+import { type SlotClassNames } from './slots.js';
+import type { BookingGuardian } from './types.js';
+import { type VippsButtonLabels, type VippsButtonSlot, type VippsStartAction } from './vipps-button.js';
+export declare const LOGIN_PANEL_OWN_LABEL_KEYS: readonly ["login.heading", "login.codeHeading", "login.or", "login.emailIntro", "login.emailLabel", "login.sendCode", "login.codeLabel", "login.submitCode", "login.codeHelp", "login.codeHelpVipps", "login.vippsSentTo", "login.vippsSentToUnknown", "login.cooldownWait", "login.cooldownReady", "login.resendIn", "login.resend", "login.switchEmail", "login.useEmailInstead", "login.notice.sent", "login.notice.resent", "login.notice.unreachable", "login.notice.badEmail", "login.notice.invalid", "login.notice.throttled", "login.notice.vippsInvalid", "login.notice.vippsConflict"];
+export declare const LOGIN_PANEL_LABEL_KEYS: readonly ["login.heading", "login.codeHeading", "login.or", "login.emailIntro", "login.emailLabel", "login.sendCode", "login.codeLabel", "login.submitCode", "login.codeHelp", "login.codeHelpVipps", "login.vippsSentTo", "login.vippsSentToUnknown", "login.cooldownWait", "login.cooldownReady", "login.resendIn", "login.resend", "login.switchEmail", "login.useEmailInstead", "login.notice.sent", "login.notice.resent", "login.notice.unreachable", "login.notice.badEmail", "login.notice.invalid", "login.notice.throttled", "login.notice.vippsInvalid", "login.notice.vippsConflict", "otp.label", "vipps.button", "vipps.unavailable", "vipps.throttled"];
+/**
+ * Placeholders: `login.codeHelp` `{email}`, `login.vippsSentTo` `{to}`,
+ * `login.cooldownWait` `{seconds}`, `login.resendIn` `{time}` («0:30»).
+ */
+export type LoginPanelLabels = Record<(typeof LOGIN_PANEL_OWN_LABEL_KEYS)[number], string> & OtpSlotsLabels & VippsButtonLabels;
+/**
+ * - `root`: the panel's column.
+ * - `notice`: a non-error sentence in the live region (errors use `Field.Error`).
+ * - `form`: both forms (e-mail, code).
+ * - `input`: the e-mail input.
+ * - `submit`: both forms' submit buttons.
+ * - `divider`: the «or» rule between Vipps and e-mail.
+ * - `links`: the row under the code form; `link`: each of its buttons.
+ */
+export type LoginPanelSlot = 'root' | 'notice' | 'form' | 'input' | 'submit' | 'divider' | 'links' | 'link';
+/** What asking for a code answered. `invalidEmail`: the address was refused. */
+export type LoginStartResult = {
+    ok: true;
+} | {
+    ok: false;
+    reason: 'unreachable' | 'invalidEmail';
+};
+/** What checking a code answered. `conflict`: the Vipps account belongs to another profile. */
+export type LoginVerifyResult = {
+    ok: true;
+    guardian: BookingGuardian | null;
+} | {
+    ok: false;
+    reason: 'invalid' | 'throttled' | 'conflict' | 'unreachable';
+};
+/** A Vipps return that asks for the e-mailed code. `to` is a masked address, or `null`. */
+export interface VippsConfirm {
+    to: string | null;
+}
+/**
+ * The part of a login that must outlive the dialog it is drawn in: a user
+ * who closes a sheet to check their mail should land back on the code screen
+ * for the address the code went to, with the resend wait still running.
+ */
+export interface LoginPanelMemory {
+    /** `vipps`: confirming a Vipps login with a code e-mailed to the address on file. */
+    mode: 'start' | 'code' | 'vipps';
+    email: string;
+    /** The address a code was actually sent to — pinned when the request leaves. */
+    sentTo: string;
+    /** When «send a new code» opens again (epoch ms); `0` before any code went out. */
+    resendAt: number;
+}
+export declare const FRESH_LOGIN_MEMORY: LoginPanelMemory;
+/** Where a Vipps return that asks for the code starts: on the code, for `to`. */
+export declare function loginMemoryFor(vippsConfirm: VippsConfirm | null | undefined): LoginPanelMemory;
+export interface LoginPanelProps {
+    labels: LoginPanelLabels;
+    /** Ask for a code for `email` (already trimmed). Resolve `ok` whether or not the address is known. */
+    onStartLogin: (email: string) => Promise<LoginStartResult>;
+    /**
+     * Check a code. `mode: 'email'` carries the address the code went to;
+     * `mode: 'vipps'` is a Vipps confirm, checked by the code alone.
+     */
+    onVerify: (code: string, context: {
+        mode: 'email' | 'vipps';
+        email: string;
+    }) => Promise<LoginVerifyResult>;
+    /** A good code. `guardian` is who logged in, or `null` when that read failed. */
+    onSignedIn: (guardian: BookingGuardian | null) => void;
+    /** The Vipps start action. Absent: no Vipps button and no «or» rule. */
+    onVipps?: VippsStartAction;
+    /** Where a Vipps login should land. */
+    vippsNext?: string | null;
+    /** Replaces the Vipps button's label. */
+    vippsLabel?: string;
+    /** Start on the Vipps confirm code screen (uncontrolled memory only). */
+    vippsConfirm?: VippsConfirm | null;
+    /** Controlled memory, for a caller whose panel unmounts (a sheet). */
+    memory?: LoginPanelMemory;
+    onMemoryChange?: Dispatch<SetStateAction<LoginPanelMemory>>;
+    /** Draws the heading («Log in» / «Check your e-mail»). Default: none — the page has its own. */
+    heading?: (text: string) => ReactNode;
+    /** Drawn above the Vipps button on the first screen. */
+    intro?: ReactNode;
+    /** Wait between codes. Default 30 s. */
+    resendCooldownMs?: number;
+    classNames?: SlotClassNames<LoginPanelSlot>;
+    otpClassNames?: SlotClassNames<OtpSlotsSlot>;
+    vippsClassNames?: SlotClassNames<VippsButtonSlot>;
+}
+/**
+ * The login itself: Vipps and an e-mail address, then the code that address
+ * received. Knows nothing about where it is drawn — the heading, the intro and
+ * what a good code leads to are the caller's.
+ *
+ * Two things it is careful NOT to say: whether the address is a customer (the
+ * «sent» copy is conditional, and `onStartLogin` should resolve `ok` for every
+ * address), and that a code was sent when asking for one failed.
+ *
+ * THE CODE FIELD fills from one paste, sends itself on the sixth digit, and
+ * empties itself and takes the caret back after a wrong code. «Send a new code»
+ * waits between asks, so an impatient tap does not spend the rate-limit
+ * allowance on a code that is still valid.
+ */
+export declare function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps, vippsNext, vippsLabel, vippsConfirm, memory: memoryProp, onMemoryChange, heading, intro, resendCooldownMs, classNames, otpClassNames, vippsClassNames, }: LoginPanelProps): import("react").JSX.Element;

package/dist/booking/login-panel.js

@@ -0,0 +1,239 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, 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 { OTP_SLOTS_LABEL_KEYS, OtpSlots, } from './otp-slots.js';
+import { slotClass } from './slots.js';
+import { VIPPS_BUTTON_LABEL_KEYS, VippsButton, } from './vipps-button.js';
+// ---------------------------------------------------------------------------
+// Contract
+// ---------------------------------------------------------------------------
+export const LOGIN_PANEL_OWN_LABEL_KEYS = [
+    'login.heading',
+    'login.codeHeading',
+    'login.or',
+    'login.emailIntro',
+    'login.emailLabel',
+    'login.sendCode',
+    'login.codeLabel',
+    'login.submitCode',
+    'login.codeHelp',
+    'login.codeHelpVipps',
+    'login.vippsSentTo',
+    'login.vippsSentToUnknown',
+    'login.cooldownWait',
+    'login.cooldownReady',
+    'login.resendIn',
+    'login.resend',
+    'login.switchEmail',
+    'login.useEmailInstead',
+    'login.notice.sent',
+    'login.notice.resent',
+    'login.notice.unreachable',
+    'login.notice.badEmail',
+    'login.notice.invalid',
+    'login.notice.throttled',
+    'login.notice.vippsInvalid',
+    'login.notice.vippsConflict',
+];
+export const LOGIN_PANEL_LABEL_KEYS = [
+    ...LOGIN_PANEL_OWN_LABEL_KEYS,
+    ...OTP_SLOTS_LABEL_KEYS,
+    ...VIPPS_BUTTON_LABEL_KEYS,
+];
+export const FRESH_LOGIN_MEMORY = {
+    mode: 'start',
+    email: '',
+    sentTo: '',
+    resendAt: 0,
+};
+/** Where a Vipps return that asks for the code starts: on the code, for `to`. */
+export function loginMemoryFor(vippsConfirm) {
+    return vippsConfirm
+        ? { mode: 'vipps', email: '', sentTo: vippsConfirm.to ?? '', resendAt: 0 }
+        : FRESH_LOGIN_MEMORY;
+}
+/** The notices that describe a mistake in the field they sit under. */
+const FIELD_ERRORS = new Set([
+    'badEmail',
+    'invalid',
+    'throttled',
+    'vippsInvalid',
+    'vippsConflict',
+]);
+/** «0:30» — minutes and zero-padded seconds, the way a phone shows a timer. */
+function timer(seconds) {
+    return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
+}
+function verifyNotice(reason, vipps) {
+    if (reason === 'invalid')
+        return vipps ? 'vippsInvalid' : 'invalid';
+    if (reason === 'conflict')
+        return 'vippsConflict';
+    return reason;
+}
+// ---------------------------------------------------------------------------
+// Panel
+// ---------------------------------------------------------------------------
+/**
+ * The login itself: Vipps and an e-mail address, then the code that address
+ * received. Knows nothing about where it is drawn — the heading, the intro and
+ * what a good code leads to are the caller's.
+ *
+ * Two things it is careful NOT to say: whether the address is a customer (the
+ * «sent» copy is conditional, and `onStartLogin` should resolve `ok` for every
+ * address), and that a code was sent when asking for one failed.
+ *
+ * THE CODE FIELD fills from one paste, sends itself on the sixth digit, and
+ * empties itself and takes the caret back after a wrong code. «Send a new code»
+ * waits between asks, so an impatient tap does not spend the rate-limit
+ * allowance on a code that is still valid.
+ */
+export function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps, vippsNext = null, vippsLabel, vippsConfirm = null, memory: memoryProp, onMemoryChange, heading = () => null, intro, resendCooldownMs = 30_000, classNames, otpClassNames, vippsClassNames, }) {
+    const id = useId();
+    const [heldHere, setHeldHere] = useState(() => loginMemoryFor(vippsConfirm));
+    const controlled = memoryProp !== undefined && onMemoryChange !== undefined;
+    const { mode, email, sentTo, resendAt } = controlled ? memoryProp : heldHere;
+    const setMemory = controlled ? onMemoryChange : setHeldHere;
+    const remember = (patch) => setMemory((previous) => ({ ...previous, ...patch }));
+    const setEmail = (next) => remember({ email: next });
+    const [code, setCode] = useState('');
+    const [notice, setNotice] = useState(null);
+    const [pending, startTransition] = useTransition();
+    /** The instant the countdown last read. */
+    const [now, setNow] = useState(() => Date.now());
+    /** Put the caret back into the code field once it is usable again. */
+    const [focusCode, setFocusCode] = useState(mode === 'code');
+    /** A verify in flight, read synchronously: the sixth digit and a submit can
+     * arrive in the same tick, before `pending` has rendered. */
+    const verifying = useRef(false);
+    const [checking, setChecking] = useState(false);
+    const codeRef = useRef(null);
+    const emailId = `${id}-email`;
+    const codeId = `${id}-code`;
+    const noticeId = `${id}-notice`;
+    const waitSeconds = Math.max(0, Math.ceil((resendAt - now) / 1000));
+    // One tick a second while the wait is on, and none at all once it is over.
+    useEffect(() => {
+        if (mode !== 'code' || resendAt <= Date.now())
+            return;
+        const interval = setInterval(() => {
+            const tick = Date.now();
+            setNow(tick);
+            if (tick >= resendAt)
+                clearInterval(interval);
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [mode, resendAt]);
+    // A disabled input cannot hold focus, so the caret goes back when the field
+    // is usable again.
+    useEffect(() => {
+        if (!focusCode || pending || mode !== 'code')
+            return;
+        setFocusCode(false);
+        codeRef.current?.querySelector('input')?.focus();
+    }, [focusCode, pending, mode]);
+    function requestCode(address, resend) {
+        startTransition(async () => {
+            let result;
+            try {
+                result = await onStartLogin(address);
+            }
+            catch {
+                result = { ok: false, reason: 'unreachable' };
+            }
+            if (!result.ok) {
+                setNotice(result.reason === 'invalidEmail' ? 'badEmail' : 'unreachable');
+                return;
+            }
+            const sentAt = Date.now();
+            setCode('');
+            setNotice(resend ? 'resent' : 'sent');
+            setNow(sentAt);
+            remember({ mode: 'code', sentTo: address, resendAt: sentAt + resendCooldownMs });
+            setFocusCode(true);
+        });
+    }
+    function submitEmail(event) {
+        event.preventDefault();
+        const trimmed = email.trim();
+        setEmail(trimmed);
+        requestCode(trimmed, false);
+    }
+    function verify(value) {
+        if (verifying.current)
+            return;
+        verifying.current = true;
+        setChecking(true);
+        const vipps = mode === 'vipps';
+        startTransition(async () => {
+            try {
+                let outcome;
+                try {
+                    outcome = await onVerify(value.trim(), {
+                        mode: vipps ? 'vipps' : 'email',
+                        email: sentTo,
+                    });
+                }
+                catch {
+                    outcome = { ok: false, reason: 'unreachable' };
+                }
+                if (outcome.ok) {
+                    setNotice(null);
+                    onSignedIn(outcome.guardian);
+                    return;
+                }
+                const next = verifyNotice(outcome.reason, vipps);
+                setNotice(next);
+                if (next === 'invalid' || next === 'vippsInvalid') {
+                    // Empty, and the caret back in it: the six digits on screen are
+                    // known to be wrong, and retyping over them is slower than typing.
+                    setCode('');
+                    setFocusCode(true);
+                }
+            }
+            finally {
+                verifying.current = false;
+                setChecking(false);
+            }
+        });
+    }
+    function submitCode(event) {
+        event.preventDefault();
+        verify(code);
+    }
+    function switchEmail() {
+        remember({ mode: 'start' });
+        setCode('');
+        setNotice(null);
+    }
+    const isFieldError = notice !== null && FIELD_ERRORS.has(notice);
+    const noticeText = notice === null ? null : labels[`login.notice.${notice}`];
+    // One live region for the whole flow, ABOVE the switch between the two
+    // screens so it stays mounted across it: a region that arrives already
+    // holding its sentence is often read as nothing at all. It doubles as the
+    // description of whichever input the notice is about.
+    const liveRegion = (_jsx("div", { "aria-live": "polite", children: noticeText &&
+            (isFieldError ? (_jsx(Field.Error, { id: noticeId, children: noticeText })) : (_jsx("p", { id: noticeId, className: slotClass(classNames, 'notice', 'text-sm text-muted-foreground'), children: noticeText }))) }));
+    // The countdown on the button changes every second; this region says only
+    // the two things worth hearing — how long, and that it is over.
+    const cooldownSentence = waitSeconds > 0
+        ? renderLabel(labels['login.cooldownWait'], { seconds: Math.ceil(resendCooldownMs / 1000) })
+        : labels['login.cooldownReady'];
+    const cooldownRegion = (_jsx("p", { "aria-live": "polite", className: "sr-only", children: mode === 'code' ? cooldownSentence : null }));
+    const link = slotClass(classNames, 'link', 'font-semibold text-primary underline underline-offset-4 disabled:no-underline disabled:opacity-60');
+    return (_jsxs("div", { className: slotClass(classNames, 'root', 'space-y-6'), children: [heading(mode === 'start' ? labels['login.heading'] : labels['login.codeHeading']), mode === 'vipps' && (_jsx("p", { className: "text-muted-foreground", children: sentTo === ''
+                    ? labels['login.vippsSentToUnknown']
+                    : renderLabel(labels['login.vippsSentTo'], { to: sentTo }) })), liveRegion, cooldownRegion, mode === 'start' ? (_jsxs(_Fragment, { children: [intro, onVipps && (_jsxs(_Fragment, { children: [_jsx(VippsButton, { onVipps: onVipps, next: vippsNext, label: vippsLabel, labels: labels, classNames: vippsClassNames }), _jsxs("div", { className: slotClass(classNames, 'divider', 'flex items-center gap-4 text-sm text-muted-foreground'), "aria-hidden": "true", children: [_jsx("span", { className: "h-px flex-1 bg-border" }), labels['login.or'], _jsx("span", { className: "h-px flex-1 bg-border" })] })] })), _jsx("p", { className: "text-muted-foreground", children: labels['login.emailIntro'] }), _jsxs("form", { onSubmit: submitEmail, className: slotClass(classNames, 'form', 'space-y-6'), children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: emailId, children: labels['login.emailLabel'] }), _jsx(Input, { id: emailId, type: "email", autoComplete: "email", required: true, value: email, "aria-describedby": noticeText ? noticeId : undefined, "aria-invalid": isFieldError || undefined, onChange: (event) => setEmail(event.target.value), className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS) })] }), _jsx(BookingButton, { type: "submit", size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: pending, children: labels['login.sendCode'] })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: submitCode, className: slotClass(classNames, 'form', 'space-y-6'), children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: codeId, children: labels['login.codeLabel'] }), _jsx("div", { ref: codeRef, children: _jsx(OtpSlots, { id: codeId, value: code, 
+                                            // Read-only rather than disabled while a request is out, so
+                                            // the caret stays in the field instead of falling out of a
+                                            // dialog; a wrong code then only has to empty it.
+                                            readOnly: checking, invalid: isFieldError, describedBy: `${codeId}-help${noticeText ? ` ${noticeId}` : ''}`, labels: labels, classNames: otpClassNames, onChange: setCode, onComplete: verify }) }), _jsx(Field.Description, { id: `${codeId}-help`, children: mode === 'vipps'
+                                            ? labels['login.codeHelpVipps']
+                                            : renderLabel(labels['login.codeHelp'], { email: sentTo }) })] }), _jsx(BookingButton, { type: "submit", size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: pending, children: labels['login.submitCode'] })] }), _jsxs("div", { className: slotClass(classNames, 'links', 'flex flex-wrap items-center gap-4 text-sm'), children: [mode !== 'vipps' && (_jsx("button", { type: "button", disabled: pending || waitSeconds > 0, onClick: () => requestCode(sentTo, true), className: link, children: waitSeconds > 0
+                                    ? renderLabel(labels['login.resendIn'], { time: timer(waitSeconds) })
+                                    : labels['login.resend'] })), _jsx("button", { type: "button", disabled: pending, onClick: switchEmail, className: link, children: mode === 'vipps' ? labels['login.useEmailInstead'] : labels['login.switchEmail'] })] })] }))] }));
+}

package/dist/booking/login-sheet.d.ts

@@ -0,0 +1,41 @@
+import { type LoginPanelLabels, type LoginPanelProps } from './login-panel.js';
+import { type SlotClassNames } from './slots.js';
+import type { BookingGuardian } from './types.js';
+export declare const LOGIN_SHEET_OWN_LABEL_KEYS: readonly ["loginSheet.prompt", "loginSheet.trigger", "loginSheet.intro", "loginSheet.vipps", "loginSheet.close"];
+export declare const LOGIN_SHEET_LABEL_KEYS: readonly ["loginSheet.prompt", "loginSheet.trigger", "loginSheet.intro", "loginSheet.vipps", "loginSheet.close", "login.heading", "login.codeHeading", "login.or", "login.emailIntro", "login.emailLabel", "login.sendCode", "login.codeLabel", "login.submitCode", "login.codeHelp", "login.codeHelpVipps", "login.vippsSentTo", "login.vippsSentToUnknown", "login.cooldownWait", "login.cooldownReady", "login.resendIn", "login.resend", "login.switchEmail", "login.useEmailInstead", "login.notice.sent", "login.notice.resent", "login.notice.unreachable", "login.notice.badEmail", "login.notice.invalid", "login.notice.throttled", "login.notice.vippsInvalid", "login.notice.vippsConflict", "otp.label", "vipps.button", "vipps.unavailable", "vipps.throttled"];
+/** `loginSheet.prompt` holds a `{trigger}` placeholder where the trigger button goes. */
+export type LoginSheetLabels = Record<(typeof LOGIN_SHEET_OWN_LABEL_KEYS)[number], string> & LoginPanelLabels;
+/**
+ * - `prompt`: the «have an account? Log in» row.
+ * - `trigger`: the button inside it.
+ * - `content`: the sheet (`Sheet.Content`).
+ * - `title`, `description`: the sheet's heading and intro.
+ * - `close`: the close button.
+ */
+export type LoginSheetSlot = 'prompt' | 'trigger' | 'content' | 'title' | 'description' | 'close';
+export interface LoginSheetProps extends Pick<LoginPanelProps, 'onStartLogin' | 'onVerify' | 'onVipps' | 'vippsConfirm' | 'resendCooldownMs' | 'otpClassNames' | 'vippsClassNames'> {
+    labels: LoginSheetLabels;
+    /**
+     * A good code. The sheet has already closed itself. `guardian` is who
+     * logged in, or `null` when that read failed.
+     */
+    onSignedIn: (guardian: BookingGuardian | null) => void;
+    /** Where a Vipps login should land (the caller's resume URL). */
+    resumePath: string;
+    /** Draw the prompt row. Off for a sheet opened for a Vipps confirm alone. Default `true`. */
+    trigger?: boolean;
+    classNames?: SlotClassNames<LoginSheetSlot>;
+    panelClassNames?: LoginPanelProps['classNames'];
+}
+/**
+ * The login as a booking flow offers it: a prompt row that opens a modal
+ * sheet (bottom sheet on phones, centred dialog from `md` up). It is an OFFER
+ * — the flow never waits on it — and it never navigates: a good code hands
+ * the user back through `onSignedIn` and the flow fills its fields in place.
+ *
+ * The login's memory (which screen, which address, the resend wait) lives
+ * here, above the sheet's content, which unmounts on close — so closing the
+ * sheet to check the mail and reopening it lands back on the code screen with
+ * the wait still running.
+ */
+export declare function LoginSheet({ labels, onStartLogin, onVerify, onVipps, onSignedIn, resumePath, vippsConfirm, trigger, resendCooldownMs, classNames, panelClassNames, otpClassNames, vippsClassNames, }: LoginSheetProps): import("react").JSX.Element;

package/dist/booking/login-sheet.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from 'lucide-react';
+import { useState } from 'react';
+import { Sheet } from '../primitives/sheet.js';
+import { labelParts } from './internal/label-parts.js';
+import { BookingButton } from './internal/ui.js';
+import { LOGIN_PANEL_LABEL_KEYS, LoginPanel, loginMemoryFor, } from './login-panel.js';
+import { slotClass } from './slots.js';
+export const LOGIN_SHEET_OWN_LABEL_KEYS = [
+    'loginSheet.prompt',
+    'loginSheet.trigger',
+    'loginSheet.intro',
+    'loginSheet.vipps',
+    'loginSheet.close',
+];
+export const LOGIN_SHEET_LABEL_KEYS = [
+    ...LOGIN_SHEET_OWN_LABEL_KEYS,
+    ...LOGIN_PANEL_LABEL_KEYS,
+];
+/**
+ * The login as a booking flow offers it: a prompt row that opens a modal
+ * sheet (bottom sheet on phones, centred dialog from `md` up). It is an OFFER
+ * — the flow never waits on it — and it never navigates: a good code hands
+ * the user back through `onSignedIn` and the flow fills its fields in place.
+ *
+ * The login's memory (which screen, which address, the resend wait) lives
+ * here, above the sheet's content, which unmounts on close — so closing the
+ * sheet to check the mail and reopening it lands back on the code screen with
+ * the wait still running.
+ */
+export function LoginSheet({ labels, onStartLogin, onVerify, onVipps, onSignedIn, resumePath, vippsConfirm = null, trigger = true, resendCooldownMs, classNames, panelClassNames, otpClassNames, vippsClassNames, }) {
+    // Open from the start for a Vipps return: the user is here to type a code.
+    const [open, setOpen] = useState(vippsConfirm !== null);
+    const [memory, setMemory] = useState(() => loginMemoryFor(vippsConfirm));
+    /**
+     * Set by a good code. The prompt row goes with it — the caller knows the
+     * user now — so the sheet has no trigger to hand focus back to, and the
+     * caller can put it on its own heading instead.
+     */
+    const [signedIn, setSignedIn] = useState(false);
+    return (_jsxs(Sheet, { open: open, onOpenChange: setOpen, children: [trigger && !signedIn && (_jsx("p", { className: slotClass(classNames, 'prompt', 'text-sm text-muted-foreground'), children: labelParts(labels['loginSheet.prompt'], {
+                    trigger: (_jsx(Sheet.Trigger, { className: slotClass(classNames, 'trigger', 'font-semibold text-primary underline underline-offset-4'), children: labels['loginSheet.trigger'] })),
+                }) })), _jsxs(Sheet.Content, { className: slotClass(classNames, 'content', 'z-50'), children: [_jsx(LoginPanel, { labels: labels, memory: memory, onMemoryChange: setMemory, onStartLogin: onStartLogin, onVerify: onVerify, onVipps: onVipps, vippsNext: resumePath, vippsLabel: labels['loginSheet.vipps'], resendCooldownMs: resendCooldownMs, classNames: panelClassNames, otpClassNames: otpClassNames, vippsClassNames: vippsClassNames, onSignedIn: (guardian) => {
+                            setSignedIn(true);
+                            setOpen(false);
+                            onSignedIn(guardian);
+                        }, heading: (text) => (_jsx(Sheet.Title, { className: slotClass(classNames, 'title', 'pe-10 font-sans text-2xl font-bold'), children: text })), intro: _jsx(Sheet.Description, { className: slotClass(classNames, 'description', 'text-muted-foreground'), children: labels['loginSheet.intro'] }) }), _jsx(Sheet.Close, { render: _jsxs(BookingButton, { variant: "ghost", size: "icon-sm", className: slotClass(classNames, 'close', 'absolute top-4 right-4'), children: [_jsx(XIcon, { "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: labels['loginSheet.close'] })] }) })] })] }));
+}