nexus-shared 3.2.0 → 4.1.0

package/dist/Components/Forms/RecordFlows.js

@@ -0,0 +1,282 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconLoader2, InlineIcon } from "nexus-icons";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { apiRequestOptions, toApiResult } from "../../Helpers/ApiFormHelpers.js";
+import { readApiResponse } from "../../Helpers/ApiResponses.js";
+import { isApiEndpoint } from "../../Helpers/ApiRoutes.js";
+import { FormStore } from "../../Helpers/FormStore.js";
+import { recordOpenedValues, recordStartStep, recordStatusLine, recordSteps, secondsUntil } from "../../Helpers/RecordCards.js";
+import { api as browserApi, getApiReader } from "../../Services/BrowserApi.js";
+import { Button } from "../Documents/Button.js";
+import { messageBox } from "../Layouts/MessageBox.js";
+import { openPopup } from "../Layouts/PopupHost.js";
+import { toast } from "../Layouts/Toaster.js";
+import { ApiForm } from "./ApiForm.js";
+import { confirmDiscard, FormButtons } from "./SubmitForm.js";
+/*
+ * The popups of a record's page of cards (`RecordCards`): a card's Edit, a list's Add and an item's actions open a popup
+ * of one step or several (a code sent, then typed), each step a form whose answer is written into the card's data at
+ * once; a Remove and the like ask first, then call. The page holds the data; the popup asks it for the data as held now
+ * every time it draws, so a write made meanwhile (another popup, a reload) is what the next step sees and sends.
+ */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/** Where a change goes, sent through the app's `api` without its toasts: an endpoint, a URL (POST), a request, or a function. */
+export async function sendRecordCall(submit, body) {
+    try {
+        if (typeof submit === "function")
+            return await toApiResult(await submit(body), getApiReader() ?? readApiResponse);
+        if (isApiEndpoint(submit))
+            return await browserApi.send(submit, { body, toast: false });
+        if (typeof submit === "string")
+            return await browserApi.send(submit, { method: "POST", body: body ?? {}, toast: false });
+        return await browserApi.send(submit.url, { ...apiRequestOptions(submit, body), toast: false });
+    }
+    catch (error) {
+        return { ok: false, message: error instanceof Error ? error.message : "The server did not answer." };
+    }
+}
+/** A step with nowhere to send its values says so, rather than saving nothing. */
+const NOWHERE = async () => ({ ok: false, message: "This step has nowhere to send its values." });
+/** Which step a popup shows, and the answer that led to it. */
+function flowState(initial) {
+    let state = initial;
+    const listeners = new Set();
+    return {
+        get: () => state,
+        set(next) {
+            state = next;
+            for (const listener of listeners)
+                listener();
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+}
+/**
+ * Opens a record page's popup: one per key, brought back as it was when it is open. Each step is a form (none of its
+ * inputs is required: a step can be its sentence and its button); its answer is written into the card's data, then the
+ * step's `next` shows, or the popup closes and `done` runs. Closing with changes asks first, unless the step says there
+ * is nothing worth keeping.
+ */
+export function openRecordFlow(request) {
+    const { flow, host, key, kind } = request;
+    const steps = recordSteps(flow);
+    const state = flowState({ step: recordStartStep(flow, host.context()), result: undefined, round: 0 });
+    // A form per step, kept while the popup is open, so a step shown again has what was typed in it - unless it is shown
+    // afresh (`fresh`), which drops its form: a new one opens on the step's values again.
+    const forms = new Map();
+    const formOf = (id) => {
+        let form = forms.get(id);
+        if (!form)
+            forms.set(id, (form = new FormStore()));
+        return form;
+    };
+    const shown = new Set();
+    let rounds = 0;
+    const stepOf = (id) => steps.find(step => step.id === id) ?? steps[0];
+    let popup = null;
+    const contextOf = () => ({
+        ...host.context(),
+        step: state.get().step,
+        result: state.get().result,
+        form: formOf(state.get().step),
+        goTo: (id, options) => go(id, state.get().result, options),
+        close: () => popup?.close(),
+    });
+    const resolve = (value) => (typeof value === "function" ? value(contextOf()) : value);
+    const inputsOf = (step) => (step.inputs === undefined ? (kind === "edit" ? (request.inputs ?? []) : []) : typeof step.inputs === "function" ? step.inputs(contextOf()) : step.inputs);
+    const heading = () => {
+        const step = stepOf(state.get().step);
+        return { title: resolve(step.title ?? flow.title) ?? request.title, description: resolve(step.description ?? flow.description) ?? request.description };
+    };
+    function go(id, result, options) {
+        const step = steps.find(one => one.id === id);
+        if (!step)
+            return;
+        const fresh = options?.fresh ?? (step.fresh === true && shown.has(id));
+        if (fresh)
+            forms.delete(id);
+        shown.add(id);
+        state.set({ step: id, result, round: fresh ? ++rounds : state.get().round });
+        popup?.update(heading());
+    }
+    shown.add(state.get().step);
+    async function saved(step, result, values) {
+        await host.write({ writes: step.writes, result, values, fallback: kind === "edit" ? "values" : "reload" });
+        const answer = { ...contextOf(), result, values };
+        if (typeof step.successMessage === "function") {
+            const message = step.successMessage(answer);
+            if (message !== false && message !== null && message !== undefined && message !== "")
+                toast.success(message);
+        }
+        const next = typeof step.next === "function" ? step.next(answer) : step.next;
+        if (next && steps.some(one => one.id === next))
+            return go(next, result);
+        const closing = popup;
+        closing?.close();
+        if (step.done && closing)
+            void closing.closed.then(() => step.done?.({ ...contextOf(), result, values }));
+    }
+    const size = flow.size ?? (kind === "edit" && inputsOf(stepOf(state.get().step)).length > 2 ? "md" : "sm");
+    popup = openPopup({
+        key,
+        reopen: "restore",
+        ...heading(),
+        icon: flow.icon,
+        size,
+        closeOnBackdrop: false,
+        beforeClose: () => {
+            const step = stepOf(state.get().step);
+            return step.confirmCancel === false ? true : confirmDiscard(formOf(step.id));
+        },
+        content: () => _jsx(RecordFlowBody, { state: state, stepOf: stepOf, formOf: formOf, inputsOf: inputsOf, contextOf: contextOf, resolve: resolve, host: host, kind: kind, onSaved: saved }),
+        footer: handle => _jsx(RecordFlowFooter, { state: state, stepOf: stepOf, formOf: formOf, inputsOf: inputsOf, onCancel: () => handle.close() }),
+    });
+    host.track(popup);
+    return popup;
+}
+/** What a step works on: its own values, else the card's data for an Edit, the item for an item's step, nothing for an Add. */
+function workedOn(step, context, kind) {
+    const given = step.values ? step.values(context) : kind === "edit" ? context.data : kind === "item" ? context.item : undefined;
+    return isRecord(given) ? given : {};
+}
+/**
+ * The values a step's form opens on: its own `values` as given; else, of the record or the item, only what its inputs
+ * name and an input can hold (a code step's `code` box never opens on the item's `code` record).
+ */
+function openedOn(step, context, kind, inputs) {
+    const given = workedOn(step, context, kind);
+    return step.values ? given : recordOpenedValues(given, inputs);
+}
+/** The step shown: its sentence, its form, the button that stays on it, and the page's own part. */
+function RecordFlowBody({ state, stepOf, formOf, inputsOf, contextOf, resolve, host, kind, onSaved, }) {
+    // Drawn again on every write of the page's data, so the sentence and the item are as held now.
+    const version = useSyncExternalStore(host.subscribe, host.snapshot, host.snapshot);
+    const { step: id, round } = useSyncExternalStore(state.subscribe, state.get, state.get);
+    const step = stepOf(id);
+    const context = contextOf();
+    // Inputs of a function follow the data (and the form, which a step shown afresh has new).
+    const inputs = useMemo(() => inputsOf(step), [step, round, typeof step.inputs === "function" ? version : null]); // eslint-disable-line react-hooks/exhaustive-deps
+    const opened = useMemo(() => openedOn(step, context, kind, inputs), [id, round]); // eslint-disable-line react-hooks/exhaustive-deps
+    const rootRef = useRef(null);
+    const shownBefore = useRef(false);
+    // A step shown after another takes the cursor, where its own input did not: its first box, else its first button.
+    useLayoutEffect(() => {
+        if (!shownBefore.current) {
+            shownBefore.current = true;
+            return;
+        }
+        const root = rootRef.current;
+        const frame = window.requestAnimationFrame(() => {
+            if (!root?.isConnected || root.contains(document.activeElement))
+                return;
+            const dialog = root.closest("dialog");
+            dialog?.querySelector(".nx-popup__body :is(input, textarea, select, [contenteditable='true']):not([disabled]), .nx-popup__foot .nx-btn--primary, .nx-popup__foot .nx-btn--danger")?.focus();
+        });
+        return () => window.cancelAnimationFrame(frame);
+    }, [id, round]);
+    const lead = resolve(step.lead);
+    const title = resolve(step.title) ?? null;
+    const sent = (values) => {
+        if (step.transform)
+            return step.transform(values, contextOf());
+        if (kind === "add" && !step.values)
+            return values;
+        const now = contextOf();
+        return { ...workedOn(step, now, kind), ...values };
+    };
+    return (_jsxs("div", { ref: rootRef, className: "nx-record-step", children: [lead !== undefined && lead !== null && lead !== false && lead !== "" && _jsx("div", { className: "nx-record-step__lead", children: typeof lead === "string" ? _jsx("p", { children: lead }) : lead }), _jsx(ApiForm, { form: formOf(id), inputs: inputs, defaultValue: opened, validate: step.validate ? values => step.validate(values, contextOf()) : undefined, 
+                // A step with nothing worth keeping (a code step) never asks before the page is left, as its Cancel does not.
+                confirmLeave: step.confirmCancel !== false, api: typeof step.submit === "string" ? { url: step.submit } : (step.submit ?? NOWHERE), transform: values => sent(values), buttons: false, successMessage: typeof step.successMessage === "function" ? false : step.successMessage, "aria-label": typeof title === "string" ? title : undefined, onSuccess: (result, values) => void onSaved(step, result, values), onError: answer => {
+                    if (!host.ended(answer))
+                        step.onError?.(answer, contextOf());
+                } }, `${id}:${round}`), step.also && _jsx(RecordCall, { call: step.also, context: context, host: host, form: formOf(id) }, `${id}:${round}:also`), step.render?.(context)] }));
+}
+/** The step's bar: Cancel, and its Save under its own name. */
+function RecordFlowFooter({ state, stepOf, formOf, inputsOf, onCancel }) {
+    const { step: id, round } = useSyncExternalStore(state.subscribe, state.get, state.get);
+    const step = stepOf(id);
+    return (_jsx(FormButtons, { form: formOf(id), submitLabel: step.submitLabel ?? "Save", 
+        // A floppy disk says Save; a step of its own name ("Send a code") has none unless it gives one.
+        submitIcon: step.submitIcon !== undefined ? step.submitIcon : step.submitLabel === undefined ? undefined : null, submitTone: step.submitTone, statusLine: recordStatusLine(inputsOf(step).length), confirmCancel: step.confirmCancel !== false, onCancel: onCancel }, `${id}:${round}`));
+}
+/**
+ * A button in a step that calls an endpoint and stays: "Send a new code". While the server says to wait it counts the
+ * seconds down in its label, held (`aria-disabled`, so the focus stays on it); while it calls, a spinner.
+ */
+function RecordCall({ call, context, host, form }) {
+    const until = call.waitUntil?.(context) ?? null;
+    const [now, setNow] = useState(() => Date.now());
+    const [busy, setBusy] = useState(false);
+    const live = useRef(true);
+    useEffect(() => {
+        live.current = true;
+        return () => {
+            live.current = false;
+        };
+    }, []);
+    useEffect(() => {
+        setNow(Date.now());
+        if (secondsUntil(until) <= 0)
+            return;
+        const timer = window.setInterval(() => setNow(Date.now()), 1000);
+        return () => window.clearInterval(timer);
+    }, [until]);
+    const wait = secondsUntil(until, now);
+    const held = busy || wait > 0;
+    async function press() {
+        if (held)
+            return;
+        setBusy(true);
+        const answer = await sendRecordCall(call.submit, call.transform?.(context));
+        if (answer.ok) {
+            await host.write({ writes: call.writes, result: answer.result, values: undefined, fallback: "reload" });
+            if (call.successMessage !== false)
+                toast.success(call.successMessage ?? answer.message ?? "Done");
+            if (call.focus)
+                form.focus(call.focus);
+        }
+        else if (!host.ended(answer))
+            toast.error(answer.message ?? "It did not work just now. Try again in a moment.");
+        if (live.current)
+            setBusy(false);
+    }
+    const label = typeof call.label === "function" ? call.label(context) : call.label;
+    return (_jsx("p", { className: "nx-record-step__also", children: _jsx(Button, { size: "sm", variant: "ghost", icon: busy ? _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin" }) : call.icon, "aria-disabled": held || undefined, "aria-busy": busy || undefined, onClick: () => void press(), children: wait > 0 ? (call.waitLabel?.(wait) ?? `Again in ${wait}s`) : label }) }));
+}
+/**
+ * A change that needs no form: the question first ("Remove ram@example.com?"), then the call, its answer written into
+ * the card's data. `busy` marks the item while it runs. A refusal is said in a toast, in the server's words.
+ */
+export async function runRecordConfirm(confirm, host, busy) {
+    const asked = host.context();
+    const resolve = (value) => (typeof value === "function" ? value(asked) : value);
+    const tone = confirm.tone ?? "danger";
+    const sure = await messageBox.confirm({ title: resolve(confirm.title), message: resolve(confirm.message), tone, confirmLabel: confirm.confirmLabel ?? (tone === "danger" ? "Remove" : "OK") });
+    if (!sure)
+        return;
+    busy(true);
+    try {
+        const now = host.context();
+        const answer = await sendRecordCall(confirm.submit, confirm.transform ? confirm.transform(now) : (now.item ?? now.data));
+        if (answer.ok) {
+            await host.write({ writes: confirm.writes, result: answer.result, values: undefined, fallback: "reload" });
+            const after = host.context();
+            const message = typeof confirm.successMessage === "function" ? confirm.successMessage(after) : confirm.successMessage;
+            if (message !== false)
+                toast.success(message ?? answer.message ?? (tone === "danger" ? "Removed" : "Done"));
+            confirm.done?.({ ...after, result: answer.result });
+        }
+        else if (!host.ended(answer))
+            toast.error(answer.message ?? "It could not be done just now. Try again in a moment.");
+    }
+    finally {
+        busy(false);
+    }
+}

package/dist/Components/Forms/SubmitForm.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import type { AnyFormStore, FormStore } from "../../Helpers/FormStore.ts";
-import type { FormStatusLineMode, FormValues, SubmitFormProps } from "../../Interfaces/FormInterfaces.ts";
+import type { FormStatusLineMode, FormSubmitTone, FormValues, SubmitFormProps } from "../../Interfaces/FormInterfaces.ts";
 import type { Size } from "../../Interfaces/TypeInterfaces.ts";
 export interface FormButtonsProps<TValues extends FormValues = FormValues> {
     /** The form's store: the one given to the form as `form`. */
@@ -9,6 +9,11 @@ export interface FormButtonsProps<TValues extends FormValues = FormValues> {
     submitLabel?: ReactNode;
     /** Default: a floppy disk. `null` shows none. */
     submitIcon?: ReactNode | null;
+    /**
+     * The submit button's fill: `primary` (default), or `danger` for a form whose save removes something - "Remove",
+     * "Turn two-step off" - filled with the danger colour and its light text, as every solid danger fill is.
+     */
+    submitTone?: FormSubmitTone;
     /** Shows a Cancel button. */
     onCancel?: () => void;
     /** Cancel asks before it drops changed values. Default true. */
@@ -40,6 +45,36 @@ export interface FormButtonsProps<TValues extends FormValues = FormValues> {
  * Asks "Discard your changes?" when the form has changes. Resolves `true` to go on (nothing changed, or the user chose
  * Discard), `false` to keep editing. Cancel buttons and popups that close a form ask it.
  */
+/**
+ * Asks before a navigation the app makes itself takes forms away: "Discard your changes?" while one of them has
+ * changes, the question a link inside the app asks. Answers whether to go on.
+ *
+ * - Default, a move inside the app (`router.push` from a menu pick): the page's own forms are asked about; a form drawn in
+ *   a `PopupHost` popup stays open through such a move and is not.
+ * - `unload: true`, a move that loads a whole page (a sign-out, `location.assign`): every form is asked about, the
+ *   popups' too, since the load takes them all; once it is confirmed nothing asks again - neither this nor the browser's
+ *   close question - until the page goes, however long the call before the move takes. A move that then does not happen
+ *   (the call failed) gives the questions back with `endPageLeave()`.
+ *
+ * @example if (await confirmPageLeave()) router.push(href);
+ * @example
+ * if (!(await confirmPageLeave({ unload: true }))) return;
+ * const answer = await api.post(SIGN_OUT);
+ * if (answer.ok) window.location.assign("/");
+ * else endPageLeave();
+ */
+export declare function confirmPageLeave(options?: {
+    unload?: boolean;
+}): Promise<boolean>;
+/** Gives the leave questions back after `confirmPageLeave({ unload: true })` when the page did not go after all. */
+export declare function endPageLeave(): void;
+/**
+ * Whether a move to `href` leaves nothing of this page behind in this tab, so no form is lost and nothing is asked: one
+ * for another tab or a download, one to another site (the browser's close question asks there), one to this page
+ * itself or a place on it. The same test for a link and for a menu row the app moves by `router.push`.
+ */
+export declare function keepsPage(href: string, target?: string | null, download?: boolean): boolean;
+/** Asks "Discard your changes?" when the form holds changes worth keeping (`isWorthKeeping`): true to go on. */
 export declare function confirmDiscard(form: AnyFormStore): Promise<boolean>;
 /**
  * A form's bar: its status line (loading, saving, what needs attention, unsaved changes, saved), Reset, Cancel, and Save.
@@ -52,7 +87,7 @@ export declare function confirmDiscard(form: AnyFormStore): Promise<boolean>;
  *   <ApiForm form={form} buttons={false} inputs={inputs} api={api} />
  * </Popup>
  */
-export declare function FormButtons<TValues extends FormValues = FormValues>({ form, submitLabel, submitIcon, onCancel, confirmCancel, cancelLabel, resettable, resetLabel, align, size, readOnly, statusLine, block, loadingLabel, className, }: FormButtonsProps<TValues>): import("react").JSX.Element;
+export declare function FormButtons<TValues extends FormValues = FormValues>({ form, submitLabel, submitIcon, submitTone, onCancel, confirmCancel, cancelLabel, resettable, resetLabel, align, size, readOnly, statusLine, block, loadingLabel, className, }: FormButtonsProps<TValues>): import("react").JSX.Element;
 /**
  * A `Form` that submits: every value is checked on Save (the inputs' own rules, the form's `validate`, rows not on the
  * page), each message shows, and the first problem takes focus; then `onSubmit` gets the values, and while it runs Save

package/dist/Components/Forms/SubmitForm.js

@@ -1,13 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { iconAlertCircle, iconCircleCheck, iconDeviceFloppy, iconLoader2, iconRefresh, InlineIcon } from "nexus-icons";
-import { useEffect, useId, useLayoutEffect, useRef } from "react";
+import { useContext, useEffect, useId, useLayoutEffect, useRef } from "react";
 import { errorMessage, isAbortError } from "../../Helpers/ApiResponses.js";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { useDatePreferences } from "../../Helpers/DatePreferences.js";
+import { formConfirmAsks, formConfirmQuestion } from "../../Helpers/FormConfirm.js";
+import { FORM_SAVED_EVENT } from "../../Helpers/InputMemory.js";
 import { Button } from "../Documents/Button.js";
 import { messageBox } from "../Layouts/MessageBox.js";
+import { askFormQuestion } from "./FormQuestion.js";
 import { Form, formatFormTime, formInputLabel, namesToShow, useFormStatus, useFormStore } from "./Form.js";
+import { FormLeaveGuardContext, pageLeaveGuard, PageLeaveGuardContext, unloadLeaveGuard } from "./FormLeaveGuard.js";
 /** The problems after a submit, each a button that goes to its input: "2 fields need attention: Email, Phone." */
 function ProblemList({ form, names }) {
     const { shown, more } = namesToShow(names);
@@ -50,8 +54,116 @@ function FormStatusLine({ form, status, mode }) {
  * Asks "Discard your changes?" when the form has changes. Resolves `true` to go on (nothing changed, or the user chose
  * Discard), `false` to keep editing. Cancel buttons and popups that close a form ask it.
  */
+/**
+ * Asks before a navigation the app makes itself takes forms away: "Discard your changes?" while one of them has
+ * changes, the question a link inside the app asks. Answers whether to go on.
+ *
+ * - Default, a move inside the app (`router.push` from a menu pick): the page's own forms are asked about; a form drawn in
+ *   a `PopupHost` popup stays open through such a move and is not.
+ * - `unload: true`, a move that loads a whole page (a sign-out, `location.assign`): every form is asked about, the
+ *   popups' too, since the load takes them all; once it is confirmed nothing asks again - neither this nor the browser's
+ *   close question - until the page goes, however long the call before the move takes. A move that then does not happen
+ *   (the call failed) gives the questions back with `endPageLeave()`.
+ *
+ * @example if (await confirmPageLeave()) router.push(href);
+ * @example
+ * if (!(await confirmPageLeave({ unload: true }))) return;
+ * const answer = await api.post(SIGN_OUT);
+ * if (answer.ok) window.location.assign("/");
+ * else endPageLeave();
+ */
+export async function confirmPageLeave(options = {}) {
+    if (options.unload) {
+        if (pageLeaveGuard.unloadAllowed)
+            return true;
+        const form = unloadLeaveGuard.changed();
+        if (form && !(await confirmDiscard(form)))
+            return false;
+        pageLeaveGuard.allowUnload();
+        return true;
+    }
+    if (pageLeaveGuard.allowed)
+        return true;
+    const form = pageLeaveGuard.changed();
+    if (!form)
+        return true;
+    const go = await confirmDiscard(form);
+    if (go)
+        pageLeaveGuard.allow();
+    return go;
+}
+/** Gives the leave questions back after `confirmPageLeave({ unload: true })` when the page did not go after all. */
+export function endPageLeave() {
+    pageLeaveGuard.end();
+}
+/**
+ * Whether a move to `href` leaves nothing of this page behind in this tab, so no form is lost and nothing is asked: one
+ * for another tab or a download, one to another site (the browser's close question asks there), one to this page
+ * itself or a place on it. The same test for a link and for a menu row the app moves by `router.push`.
+ */
+export function keepsPage(href, target, download = false) {
+    if (typeof window === "undefined")
+        return true;
+    if ((target && target !== "_self") || download)
+        return true;
+    const to = new URL(href, window.location.href);
+    if (to.origin !== window.location.origin)
+        return true;
+    return to.pathname === window.location.pathname && to.search === window.location.search;
+}
+let linksGuarded = false;
+/**
+ * Every link inside the app asks before it takes the page's own forms away: a press on one - next/link or a plain `<a>`,
+ * a menu's, the brand's, the side menu's - is held first (in the capture phase, before any other handler) while a
+ * form has changes, and followed once "Discard" is chosen. Set up once, by the first form that asks before leaving.
+ */
+function guardLinks() {
+    if (linksGuarded || typeof window === "undefined")
+        return;
+    linksGuarded = true;
+    window.addEventListener("click", event => {
+        if (pageLeaveGuard.allowed || event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+        const link = event.target instanceof Element ? event.target.closest("a[href]") : null;
+        if (!(link instanceof HTMLAnchorElement) || keepsPage(link.href, link.target, link.hasAttribute("download")) || !pageLeaveGuard.changed())
+            return;
+        // A link inside text being edited (a rich-text editor's) is never followed by the browser: a click there places
+        // the caret, and nothing would be left.
+        if (link.isContentEditable || link.closest('[contenteditable]:not([contenteditable="false"])'))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        void confirmPageLeave().then(go => {
+            if (!go)
+                return;
+            // Followed as it was pressed (the app's router for its own links), or by its address if it has gone meanwhile.
+            if (link.isConnected)
+                link.click();
+            else
+                window.location.assign(link.href);
+        });
+    }, true);
+}
+/** Ctrl+S (or ⌘S) while a form's question is open does nothing: neither a second save nor the browser's Save page. */
+function holdSaveKey(event) {
+    if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "s")
+        event.preventDefault();
+}
+/**
+ * A form's question before it saves (`SubmitFormProps.confirm`): asked when `when` holds, with what will be sent worked
+ * out first (`makeBody`, an ApiForm's transform) and handed to every text. Resolves whether to save.
+ */
+async function askBeforeSaving(confirm, values, context, makeBody) {
+    if (!formConfirmAsks(confirm, values))
+        return true;
+    const body = makeBody ? await makeBody(values, context) : values;
+    if (context.signal.aborted)
+        return false;
+    return askFormQuestion(formConfirmQuestion(confirm, values, body), context.signal);
+}
+/** Asks "Discard your changes?" when the form holds changes worth keeping (`isWorthKeeping`): true to go on. */
 export async function confirmDiscard(form) {
-    if (!form.isChanged())
+    if (!form.isWorthKeeping())
         return true;
     return messageBox.confirm({
         title: "Discard your changes?",
@@ -72,7 +184,7 @@ export async function confirmDiscard(form) {
  *   <ApiForm form={form} buttons={false} inputs={inputs} api={api} />
  * </Popup>
  */
-export function FormButtons({ form, submitLabel = "Save", submitIcon, onCancel, confirmCancel = true, cancelLabel = "Cancel", resettable = false, resetLabel = "Reset", align = "end", size = "md", readOnly = false, statusLine = "full", block = false, loadingLabel = "Loading…", className, }) {
+export function FormButtons({ form, submitLabel = "Save", submitIcon, submitTone = "primary", onCancel, confirmCancel = true, cancelLabel = "Cancel", resettable = false, resetLabel = "Reset", align = "end", size = "md", readOnly = false, statusLine = "full", block = false, loadingLabel = "Loading…", className, }) {
     const store = form;
     const status = useFormStatus(store);
     useEffect(() => store.addButtons(), [store]);
@@ -88,7 +200,7 @@ export function FormButtons({ form, submitLabel = "Save", submitIcon, onCancel,
     const actions = [
         resettable && !readOnly && (_jsx(Button, { size: buttonSize, variant: "ghost", icon: _jsx(InlineIcon, { icon: iconRefresh }), disabled: !status.changed || status.submitting || status.loading, onClick: () => store.reset(), children: resetLabel }, "reset")),
         onCancel && (_jsx(Button, { size: buttonSize, onClick: () => void cancel(), children: cancelLabel }, "cancel")),
-        !readOnly && (_jsx(Button, { type: "submit", form: status.formId ?? undefined, size: buttonSize, variant: "primary", loading: status.submitting || loadingInButton, disabled: status.loading, icon: submitIcon === undefined ? _jsx(InlineIcon, { icon: iconDeviceFloppy }) : (submitIcon ?? undefined), children: loadingInButton ? loadingLabel : submitLabel }, "submit")),
+        !readOnly && (_jsx(Button, { type: "submit", form: status.formId ?? undefined, size: buttonSize, variant: submitTone === "danger" ? "danger" : "primary", loading: status.submitting || loadingInButton, disabled: status.loading, icon: submitIcon === undefined ? _jsx(InlineIcon, { icon: iconDeviceFloppy }) : (submitIcon ?? undefined), children: loadingInButton ? loadingLabel : submitLabel }, "submit")),
     ].filter(Boolean);
     if (align === "start")
         actions.reverse();
@@ -115,12 +227,14 @@ export function FormButtons({ form, submitLabel = "Save", submitIcon, onCancel,
  * />
  */
 export function SubmitForm(props) {
-    const { onSubmit: _onSubmit, onSaved: _onSaved, onCancel, confirmCancel, submitLabel, submitIcon, cancelLabel, resettable, resetLabel, resetOnSuccess: _resetOnSuccess, buttons = "end", statusLine, confirmLeave, id, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...formProps } = props;
+    const { onSubmit: _onSubmit, onSaved: _onSaved, onCancel, confirmCancel, submitLabel, submitIcon, submitTone, cancelLabel, resettable, resetLabel, resetOnSuccess: _resetOnSuccess, buttons = "end", statusLine, confirmLeave, confirm: _confirm, makeBody: _makeBody, id, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...formProps } = props;
     const store = useFormStore(props.form);
     const formRef = useRef(null);
     const generatedId = useId();
     const formId = id ?? `${generatedId}form`;
     const controllerRef = useRef(null);
+    // True while the question before a save is open (or what it shows is being worked out): nothing else submits.
+    const confirmingRef = useRef(false);
     const latest = useRef(props);
     latest.current = props;
     const locked = Boolean(props.readOnly || props.disabled);
@@ -138,11 +252,17 @@ export function SubmitForm(props) {
     useEffect(() => () => controllerRef.current?.abort(), []);
     // Closing or reloading the page with unsaved changes asks first, unless a draft keeps them.
     const guardLeave = confirmLeave ?? !props.draftKey;
+    // Whether this form is the page's own (in the page guard) or a popup's: the close question follows it.
+    const pageGuardRef = useRef(useContext(PageLeaveGuardContext));
     useEffect(() => {
         if (!guardLeave)
             return;
         const onBeforeUnload = (event) => {
-            if (!store.isChanged() || locked)
+            // A navigation the person already confirmed is not asked about twice: for a page form, a link inside the app or
+            // `confirmPageLeave`; for a form in a popup, which those never asked about, only a confirmed full-page move.
+            if (!store.isWorthKeeping() || locked)
+                return;
+            if (pageGuardRef.current ? pageLeaveGuard.allowed : pageLeaveGuard.unloadAllowed)
                 return;
             event.preventDefault();
             // Older browsers show the prompt only when this is set.
@@ -151,9 +271,33 @@ export function SubmitForm(props) {
         window.addEventListener("beforeunload", onBeforeUnload);
         return () => window.removeEventListener("beforeunload", onBeforeUnload);
     }, [store, guardLeave, locked]);
+    // Inside a place that can go away with the form (a tab of a record's workspace), that place asks the same question.
+    const leaveGuard = useContext(FormLeaveGuardContext);
+    const lockedRef = useRef(locked);
+    lockedRef.current = locked;
+    useEffect(() => {
+        if (!guardLeave || !leaveGuard)
+            return;
+        return leaveGuard.watch({ form: store, changed: () => !lockedRef.current && store.isWorthKeeping() });
+    }, [store, guardLeave, leaveGuard]);
+    // On the page itself, a navigation inside the app asks the same question before it takes the form away (a link,
+    // `confirmPageLeave`); a form in a `PopupHost` popup is left out, as the popup stays open through a navigation. Every
+    // such form, popups' too, is one a full-page load takes away (`confirmPageLeave({ unload: true })`).
+    const pageGuard = useContext(PageLeaveGuardContext);
+    useEffect(() => {
+        if (!guardLeave)
+            return;
+        return unloadLeaveGuard.watch({ form: store, changed: () => !lockedRef.current && store.isWorthKeeping() });
+    }, [store, guardLeave]);
+    useEffect(() => {
+        if (!guardLeave || !pageGuard)
+            return;
+        guardLinks();
+        return pageGuard.watch({ form: store, changed: () => !lockedRef.current && store.isWorthKeeping() });
+    }, [store, guardLeave, pageGuard]);
     async function submit() {
         const status = store.getStatus();
-        if (status.submitting || status.loading || locked)
+        if (confirmingRef.current || status.submitting || status.loading || locked)
             return;
         if (!store.validate())
             return;
@@ -161,6 +305,32 @@ export function SubmitForm(props) {
         controllerRef.current = controller;
         const values = store.getValue();
         const context = { changes: store.getChanges(), initial: store.getInitial(), form: store, signal: controller.signal };
+        const { confirm, makeBody } = latest.current;
+        if (confirm) {
+            // The question comes after the checks and before "Saving…": while it is open nothing else submits, and Back, Esc
+            // or the close button end here with nothing sent and the form as it was.
+            confirmingRef.current = true;
+            window.addEventListener("keydown", holdSaveKey, true);
+            let go;
+            try {
+                go = await askBeforeSaving(confirm, values, context, makeBody);
+            }
+            catch (error) {
+                // A transform or a rule of the question that throws shows under the form, as a failed save does, and asks nothing.
+                go = false;
+                if (!controller.signal.aborted && !isAbortError(error))
+                    store.setErrors({}, errorMessage(error));
+            }
+            finally {
+                confirmingRef.current = false;
+                window.removeEventListener("keydown", holdSaveKey, true);
+            }
+            if (!go || controller.signal.aborted) {
+                if (controllerRef.current === controller)
+                    controllerRef.current = null;
+                return;
+            }
+        }
         store.beginSubmit();
         let result;
         try {
@@ -183,7 +353,9 @@ export function SubmitForm(props) {
                 store.focus(first);
             return;
         }
-        // Saved.
+        // Saved. Remembered inputs keep what was saved, before a reset opens them on it; so do rows' (the last row added).
+        store.rememberSaved(values);
+        formRef.current?.dispatchEvent(new Event(FORM_SAVED_EVENT));
         if (latest.current.resetOnSuccess) {
             store.reset();
             store.markSaved();
@@ -202,8 +374,8 @@ export function SubmitForm(props) {
             formRef.current?.requestSubmit();
         }
     }
-    return (_jsxs("form", { ref: formRef, id: formId, className: cx("nx-submit-form", className), style: style, noValidate: true, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onSubmit: event => {
+    return (_jsxs("form", { ref: formRef, id: formId, className: cx("nx-submit-form", className), style: style, noValidate: true, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onSubmit: event => {
             event.preventDefault();
             void submit();
-        }, onKeyDown: onKeyDown, children: [_jsx(Form, { ...formProps, form: store }), buttons !== false && (_jsx(FormButtons, { form: store, align: buttons, submitLabel: submitLabel, submitIcon: submitIcon, onCancel: onCancel, confirmCancel: confirmCancel, cancelLabel: cancelLabel, resettable: resettable, resetLabel: resetLabel, size: formProps.size, readOnly: locked, statusLine: statusLine }))] }));
+        }, onKeyDown: onKeyDown, children: [_jsx(Form, { ...formProps, form: store }), buttons !== false && (_jsx(FormButtons, { form: store, align: buttons, submitLabel: submitLabel, submitIcon: submitIcon, submitTone: submitTone, onCancel: onCancel, confirmCancel: confirmCancel, cancelLabel: cancelLabel, resettable: resettable, resetLabel: resetLabel, size: formProps.size, readOnly: locked, statusLine: statusLine }))] }));
 }

package/dist/Components/Inputs/CheckBox.js

@@ -83,5 +83,5 @@ function Toggle(props) {
     // With a description, the name comes from the label text alone; the description is read as a description.
     const labelId = descriptionId && hasContent(label) && !inputProps["aria-label"] ? `${field.fieldId}-label` : undefined;
     const describedBy = [inputProps["aria-describedby"], descriptionId, field.error && field.messageId].filter(Boolean).join(" ") || undefined;
-    return (_jsxs("div", { ref: field.containerRef, className: cx("nx-choice-field", className), style: style, "data-invalid": field.error ? true : undefined, "data-readonly": readOnly || undefined, onBlur: handleBlur, children: [_jsxs("label", { className: cx("nx-choice", `nx-choice--${size}`, labelPosition === "start" && "nx-choice--start"), children: [_jsx("input", { ...inputProps, [OPTION_ATTRIBUTE]: 0, ref: setRef, id: field.fieldId, type: kind === "radio" ? "radio" : "checkbox", role: kind === "switch" ? "switch" : undefined, className: cx("nx-choice__control", `nx-choice__control--${kind}`, inputClassName), checked: checked, disabled: disabled, "aria-invalid": field.error ? true : undefined, "aria-required": required || undefined, "aria-readonly": readOnly || undefined, "aria-labelledby": inputProps["aria-labelledby"] ?? labelId, "aria-describedby": describedBy, onClick: handleClick, onKeyDown: handleKeyDown, onChange: handleChange, onInvalid: field.onInvalid }), (hasContent(label) || descriptionId) && (_jsxs("span", { className: "nx-choice__text", children: [hasContent(label) && (_jsxs("span", { id: labelId, className: "nx-choice__label", children: [label, readOnlyNotice.lock] })), descriptionId && (_jsx("span", { id: descriptionId, className: "nx-choice__description", children: description }))] }))] }), _jsx(GroupFooter, { id: field.messageId, error: field.error }), readOnlyNotice.notice] }));
+    return (_jsxs("div", { ref: field.containerRef, className: cx("nx-choice-field", className), style: style, "data-invalid": field.error ? true : undefined, "data-readonly": readOnly || undefined, onBlur: handleBlur, children: [_jsxs("label", { className: cx("nx-choice", `nx-choice--${size}`, labelPosition === "start" && "nx-choice--start"), title: inputProps.title, children: [_jsx("input", { ...inputProps, [OPTION_ATTRIBUTE]: 0, ref: setRef, id: field.fieldId, type: kind === "radio" ? "radio" : "checkbox", role: kind === "switch" ? "switch" : undefined, className: cx("nx-choice__control", `nx-choice__control--${kind}`, inputClassName), checked: checked, disabled: disabled, "aria-invalid": field.error ? true : undefined, "aria-required": required || undefined, "aria-readonly": readOnly || undefined, "aria-labelledby": inputProps["aria-labelledby"] ?? labelId, "aria-describedby": describedBy, onClick: handleClick, onKeyDown: handleKeyDown, onChange: handleChange, onInvalid: field.onInvalid }), (hasContent(label) || descriptionId) && (_jsxs("span", { className: "nx-choice__text", children: [hasContent(label) && (_jsxs("span", { id: labelId, className: "nx-choice__label", children: [label, readOnlyNotice.lock] })), descriptionId && (_jsx("span", { id: descriptionId, className: "nx-choice__description", children: description }))] }))] }), _jsx(GroupFooter, { id: field.messageId, error: field.error }), readOnlyNotice.notice] }));
 }