nexus-shared 3.1.0 → 4.0.0

package/dist/Components/Layouts/MessageBox.d.ts

@@ -5,16 +5,29 @@ import type { PopupSize } from "./Popup.tsx";
 export type MessageTone = "neutral" | "info" | "success" | "warning" | "danger" | "question";
 export interface MessageBoxOptions {
     title: ReactNode;
-    /** Text under the title. */
+    /** Text under the title, in the box's muted text. */
     message?: ReactNode;
+    /**
+     * What the question is about, in full, after the message and in the normal text colour: a record's details
+     * (`<CrudDetails row columns />`), a list. It scrolls with the box's body while the buttons stay in view; give the box a
+     * width that suits it (`size: "lg"` or `"xl"`).
+     */
+    details?: ReactNode;
     /** Colors the icon: `info`, `success`, `warning`, `danger`, `question`. `neutral` shows no icon. */
     tone?: MessageTone;
     /** Replaces the tone's icon; `null` shows none. */
     icon?: ReactNode | null;
     /** Default `sm`. */
     size?: PopupSize;
-    /** The close button, Esc, and a click outside dismiss the box. Default true. */
+    /** The close button and Esc dismiss the box. Default true. */
     closable?: boolean;
+    /**
+     * A click outside dismisses the box. Default: as `closable`. `false` keeps a box with much to read (a question with its
+     * `details`) open through a stray click, while Esc and the close button still dismiss it.
+     */
+    closeOnBackdrop?: boolean;
+    /** Dismisses the box when it aborts, as Esc would: the form or the page that asked has gone. */
+    signal?: AbortSignal;
 }
 export interface MessageBoxButton<T extends string = string> {
     value: T;

package/dist/Components/Layouts/MessageBox.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconAlertCircle, iconAlertTriangle, iconCircleCheck, iconHelpCircle, iconInfoCircle, InlineIcon } from "nexus-icons";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { Button } from "../Documents/Button.js";
@@ -14,40 +14,85 @@ const TONE_ICONS = {
     question: iconHelpCircle,
 };
 let promptCounter = 0;
+let messageCounter = 0;
+/*
+ * A held Enter, or one pressed again at once (a double press), never answers a box. The Enter that opened a question (in
+ * a form's box) would otherwise press the Confirm it gave the focus to - by the key's repeat, or by the second tap of a
+ * double press - before anything in the box was read. Any Enter within this long of the one before it is held.
+ */
+const HASTY_ENTER_MS = 300;
+let lastEnterAt = Number.NEGATIVE_INFINITY;
+function holdHastyEnter(event) {
+    if (event.key !== "Enter")
+        return;
+    const gap = event.timeStamp - lastEnterAt;
+    lastEnterAt = event.timeStamp;
+    if (!(event.target instanceof Element) || !event.target.closest(".nx-popup--message"))
+        return;
+    if (event.repeat || gap < HASTY_ENTER_MS)
+        event.preventDefault();
+}
+// Listening from the start: the Enter that opens a box comes before the box.
+if (typeof window !== "undefined")
+    window.addEventListener("keydown", holdHastyEnter, true);
 function toneIcon(tone, icon) {
     if (icon !== undefined)
         return icon;
     const data = TONE_ICONS[tone];
     return data ? _jsx(InlineIcon, { icon: data }) : null;
 }
+/** The muted message, then the details in the normal text colour; each with an id the box is described by. */
+function messageBody(message, details, id) {
+    return (_jsxs(_Fragment, { children: [message && (_jsx("div", { id: `${id}-text`, className: "nx-message__text", children: message })), details && (_jsx("div", { id: `${id}-details`, className: "nx-message__details", children: details }))] }));
+}
+/**
+ * What describes a box to a screen reader: its message and its details, read with the title as the focus enters it, so
+ * a question's Confirm is never reached before what it confirms was heard.
+ */
+function describedBy(message, details, id) {
+    return cx(message ? `${id}-text` : undefined, details ? `${id}-details` : undefined) || undefined;
+}
+/** Dismisses an open box when the signal aborts; nothing is left listening once it has closed. */
+function closeOnAbort(popup, signal) {
+    if (!signal)
+        return;
+    const dismiss = () => popup.close();
+    signal.addEventListener("abort", dismiss, { once: true });
+    void popup.closed.then(() => signal.removeEventListener("abort", dismiss));
+}
 /**
  * A message box with the given buttons. Resolves with the clicked button's value, or `null` when the box was
  * dismissed with the close button, Esc, or a click outside.
  */
 export function showMessageBox(options) {
-    const { title, message, tone = "neutral", icon, size = "sm", closable = true, buttons } = options;
+    const { title, message, details, tone = "neutral", icon, size = "sm", closable = true, closeOnBackdrop = closable, signal, buttons } = options;
+    if (signal?.aborted)
+        return Promise.resolve(null);
     const cautious = tone === "danger" || tone === "warning";
     const explicit = buttons.findIndex(button => button.autoFocus);
     const focusIndex = explicit >= 0 ? explicit : cautious ? 0 : buttons.length - 1;
     let result = null;
+    const id = `nx-message-${++messageCounter}`;
     const popup = openPopup({
         title,
         icon: toneIcon(tone, icon),
         size,
         closable,
-        closeOnBackdrop: closable,
+        closeOnBackdrop,
         closeOnEscape: closable,
         variant: "dialog",
         minimizable: false,
         maximizable: false,
         className: cx("nx-popup--message", `nx-popup--tone-${tone}`),
         initialFocus: "[data-nx-focus]",
-        content: message ? _jsx("div", { className: "nx-message__text", children: message }) : null,
+        "aria-describedby": describedBy(message, details, id),
+        content: message || details ? messageBody(message, details, id) : null,
         footer: handle => buttons.map((button, index) => (_jsx(Button, { variant: button.variant ?? (index === buttons.length - 1 ? (tone === "danger" ? "danger" : "primary") : "secondary"), "data-nx-focus": index === focusIndex || undefined, onClick: () => {
                 result = button.value;
                 handle.close();
             }, children: button.label }, button.value))),
     });
+    closeOnAbort(popup, signal);
     return popup.closed.then(() => result);
 }
 function options(input) {
@@ -72,7 +117,9 @@ function confirm(input) {
 }
 /** A text box with Cancel and OK. Resolves with the text, or `null` when cancelled. */
 function prompt(input) {
-    const { title, message, tone = "neutral", icon, size = "sm", closable = true, label, defaultValue, placeholder, required = true, inputType = "text", confirmLabel, cancelLabel } = options(input);
+    const { title, message, details, tone = "neutral", icon, size = "sm", closable = true, closeOnBackdrop = closable, signal, label, defaultValue, placeholder, required = true, inputType = "text", confirmLabel, cancelLabel } = options(input);
+    if (signal?.aborted)
+        return Promise.resolve(null);
     const formId = `nx-prompt-${++promptCounter}`;
     let result = null;
     const popup = openPopup({
@@ -80,20 +127,22 @@ function prompt(input) {
         icon: toneIcon(tone, icon),
         size,
         closable,
-        closeOnBackdrop: closable,
+        closeOnBackdrop,
         closeOnEscape: closable,
         variant: "dialog",
         minimizable: false,
         maximizable: false,
         className: cx("nx-popup--message", `nx-popup--tone-${tone}`),
         initialFocus: `#${formId} input`,
+        "aria-describedby": describedBy(message, details, formId),
         content: handle => (_jsxs("form", { id: formId, className: "nx-message__form", onSubmit: (event) => {
                 event.preventDefault();
                 result = String(new FormData(event.currentTarget).get("value") ?? "");
                 handle.close();
-            }, children: [message && _jsx("div", { className: "nx-message__text", children: message }), _jsx(TextBox, { name: "value", label: label, type: inputType, defaultValue: defaultValue, placeholder: placeholder, required: required })] })),
+            }, children: [messageBody(message, details, formId), _jsx(TextBox, { name: "value", label: label, type: inputType, defaultValue: defaultValue, placeholder: placeholder, required: required })] })),
         footer: handle => (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => handle.close(), children: cancelLabel ?? "Cancel" }), _jsx(Button, { type: "submit", form: formId, variant: "primary", children: confirmLabel ?? "OK" })] })),
     });
+    closeOnAbort(popup, signal);
     return popup.closed.then(() => result);
 }
 /**

package/dist/Components/Layouts/Popup.d.ts

@@ -50,8 +50,9 @@ export interface PopupProps {
     closeOnBackdrop?: boolean;
     /**
      * The minimize button: the popup steps aside to a bar at the bottom right, keeping everything typed in it, and the
-     * page can be used again. Default: when `closable`, since a popup that must be answered cannot be put aside.
-     * Needs `<PopupHost />`, which shows the bars.
+     * page can be used again. Default false: only a popup that asks has it. A CRUD page's Add and Edit forms and its row
+     * forms ask (a form put aside while the list behind it is read); message boxes, viewers, galleries, histories and
+     * the rest do not. Needs `<PopupHost />`, which shows the bars.
      */
     minimizable?: boolean;
     /** The maximize button, and a double-click on the title bar: the popup fills the window. Default true. */
@@ -76,17 +77,23 @@ export interface PopupProps {
     initialFocus?: string;
     /** Name for screen readers when there is no title. */
     "aria-label"?: string;
+    /**
+     * Ids of elements inside the popup that describe it to screen readers, after its `description`: a message box names
+     * its message and its details, so they are read with the title as the focus enters.
+     */
+    "aria-describedby"?: string;
     className?: string;
     children?: ReactNode;
 }
 /**
- * A modal window on the native <dialog>, with the buttons of a desktop window: minimize, maximize, and close. It sits
- * in the top layer above everything, dims and locks the page behind it, traps Tab, closes with Esc or a click outside,
- * and returns focus to where it came from. The title bar moves it; a double-click there maximizes it. Minimized, it
+ * A modal window on the native <dialog>, with the buttons of a desktop window: maximize and close, and minimize when
+ * it asks (`minimizable`: a CRUD page's Add and Edit). It sits in the top layer above everything, dims and locks the
+ * page behind it, traps Tab, closes with Esc or a click outside, and returns focus to where it came from. The title
+ * bar moves it; a double-click there maximizes it. Minimized, it
  * waits as a bar at the bottom right with its content kept, while the page can be used. The body scrolls while the
  * title and the footer stay. The content mounts while the popup is open, so a form inside starts fresh every time.
  *
  * @example
  * <Popup open={open} onClose={() => setOpen(false)} title="Edit booking" footer={<Button variant="primary">Save</Button>}>…</Popup>
  */
-export declare function Popup({ open, onClose, onClosed, title, description, icon, variant, size, footer, closable, closeOnEscape, closeOnBackdrop, minimizable, maximizable, movable, reopen, windowState: windowStateProp, defaultWindowState, onWindowStateChange, flush, initialFocus, "aria-label": ariaLabel, className, children, }: PopupProps): import("react").JSX.Element;
+export declare function Popup({ open, onClose, onClosed, title, description, icon, variant, size, footer, closable, closeOnEscape, closeOnBackdrop, minimizable, maximizable, movable, reopen, windowState: windowStateProp, defaultWindowState, onWindowStateChange, flush, initialFocus, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, className, children, }: PopupProps): import("react").JSX.Element;

package/dist/Components/Layouts/Popup.js

@@ -17,17 +17,20 @@ function popupPosition(dialog) {
 }
 // Each popup's opener and the popup that held it, so focus can find its way back through popups that have gone.
 const openers = new WeakMap();
+// How each popup puts the focus inside itself (its `initialFocus`), for a popup closed over it that left the focus nowhere.
+const homes = new WeakMap();
 /**
- * A modal window on the native <dialog>, with the buttons of a desktop window: minimize, maximize, and close. It sits
- * in the top layer above everything, dims and locks the page behind it, traps Tab, closes with Esc or a click outside,
- * and returns focus to where it came from. The title bar moves it; a double-click there maximizes it. Minimized, it
+ * A modal window on the native <dialog>, with the buttons of a desktop window: maximize and close, and minimize when
+ * it asks (`minimizable`: a CRUD page's Add and Edit). It sits in the top layer above everything, dims and locks the
+ * page behind it, traps Tab, closes with Esc or a click outside, and returns focus to where it came from. The title
+ * bar moves it; a double-click there maximizes it. Minimized, it
  * waits as a bar at the bottom right with its content kept, while the page can be used. The body scrolls while the
  * title and the footer stay. The content mounts while the popup is open, so a form inside starts fresh every time.
  *
  * @example
  * <Popup open={open} onClose={() => setOpen(false)} title="Edit booking" footer={<Button variant="primary">Save</Button>}>…</Popup>
  */
-export function Popup({ open, onClose, onClosed, title, description, icon, variant = "window", size = "md", footer, closable = true, closeOnEscape = true, closeOnBackdrop = true, minimizable, maximizable = true, movable = true, reopen = "replace", windowState: windowStateProp, defaultWindowState = "normal", onWindowStateChange, flush = false, initialFocus, "aria-label": ariaLabel, className, children, }) {
+export function Popup({ open, onClose, onClosed, title, description, icon, variant = "window", size = "md", footer, closable = true, closeOnEscape = true, closeOnBackdrop = true, minimizable, maximizable = true, movable = true, reopen = "replace", windowState: windowStateProp, defaultWindowState = "normal", onWindowStateChange, flush = false, initialFocus, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, className, children, }) {
     const id = useId();
     const dialogRef = useRef(null);
     // Content stays mounted through the exit animation, and while minimized.
@@ -41,7 +44,8 @@ export function Popup({ open, onClose, onClosed, title, description, icon, varia
     const maximized = windowState === "maximized";
     const dockReady = useDockReady();
     const hosted = useContext(HostedPopupContext);
-    const canMinimize = (minimizable ?? closable) && dockReady;
+    // Only a popup that asks: a CRUD page's Add and Edit, and its row forms.
+    const canMinimize = minimizable === true && dockReady;
     const downOnBackdropRef = useRef(false);
     // The element that opened the popup, where focus goes back when the browser has nowhere better.
     const openerRef = useRef(null);
@@ -65,19 +69,22 @@ export function Popup({ open, onClose, onClosed, title, description, icon, varia
         onWindowStateChange?.(next);
     }
     // The latest props and callbacks, for the dock bar and the drag, which outlive a render.
-    const latest = useRef({ windowState, defaultWindowState, reopen, title, icon, closable, ariaLabel, onClose, changeWindowState });
+    const latest = useRef({ windowState, defaultWindowState, reopen, title, description, icon, closable, ariaLabel, onClose, changeWindowState });
     useLayoutEffect(() => {
-        latest.current = { windowState, defaultWindowState, reopen, title, icon, closable, ariaLabel, onClose, changeWindowState };
+        latest.current = { windowState, defaultWindowState, reopen, title, description, icon, closable, ariaLabel, onClose, changeWindowState };
         if (!minimized)
             restoreToRef.current = windowState;
     });
     function dock() {
         const current = latest.current;
         dockedRef.current = true;
+        const label = typeof current.title === "string" ? current.title : current.ariaLabel;
         dockWindow({
             id: dockId,
             title: current.title ?? current.ariaLabel ?? "Window",
-            label: typeof current.title === "string" ? current.title : current.ariaLabel,
+            // Under the title, so two bars of one kind (two Edit forms, two Adds) read apart: the record, the place.
+            description: current.description,
+            label: label && typeof current.description === "string" ? `${label} · ${current.description}` : label,
             icon: current.icon,
             restore: () => latest.current.changeWindowState(restoreToRef.current),
             close: current.closable ? () => latest.current.onClose("close") : undefined,
@@ -102,11 +109,26 @@ export function Popup({ open, onClose, onClosed, title, description, icon, varia
             link = openers.get(link.within);
         if (link?.opener?.isConnected)
             link.opener.focus({ preventScroll: true });
+        // An opener that cannot take the focus - hidden in a menu that closed, disabled while its action runs - or none at
+        // all never leaves it on the page while another popup is still open: the popup now on top takes it, where it puts
+        // it on opening (a record's workspace: its chosen tab).
+        const now = document.activeElement;
+        if (now && now !== document.body && !dialog.contains(now))
+            return;
+        const below = Array.from(document.querySelectorAll("dialog.nx-popup")).filter(other => other !== dialog && other.open);
+        const top = below[below.length - 1];
+        if (top)
+            (homes.get(top) ?? (() => top.focus()))();
     }
     function focusInside(dialog) {
         const target = initialFocus ? dialog.querySelector(initialFocus) : dialog.querySelector(`:is(.nx-popup__body, .nx-popup__foot) :is(${FOCUSABLE})`);
         (target ?? dialog).focus();
     }
+    useLayoutEffect(() => {
+        const dialog = dialogRef.current;
+        if (dialog)
+            homes.set(dialog, () => focusInside(dialog));
+    });
     function showDialog(dialog) {
         // The first modal locks the page; the space of its scrollbar is kept as padding, so nothing shifts.
         if (!document.querySelector(".nx-popup:modal"))
@@ -317,6 +339,12 @@ export function Popup({ open, onClose, onClosed, title, description, icon, varia
     function onPointerDown(event) {
         downOnBackdropRef.current = event.target === event.currentTarget;
     }
+    // A press outside a popup that stays open through it (`closeOnBackdrop: false`) leaves the focus where it was, as
+    // the press does nothing: a question's Confirm keeps it, so Enter still answers, and a field keeps its caret.
+    function onMouseDown(event) {
+        if (event.target === event.currentTarget && !closeOnBackdrop)
+            event.preventDefault();
+    }
     function onClick(event) {
         const onBackdrop = event.target === event.currentTarget && downOnBackdropRef.current;
         downOnBackdropRef.current = false;
@@ -369,5 +397,5 @@ export function Popup({ open, onClose, onClosed, title, description, icon, varia
     const titleId = `${id}-title`;
     const descriptionId = `${id}-description`;
     const hasControls = canMinimize || maximizable || closable;
-    return (_jsx("dialog", { ref: dialogRef, className: cx("nx-popup", `nx-popup--${variant}`, `nx-popup--${size}`, flush && "nx-popup--flush", maximized && "nx-popup--maximized", movable && "nx-popup--movable", closing && "nx-popup--closing", className), "data-window-state": windowState, "aria-labelledby": title ? titleId : undefined, "aria-label": title ? undefined : ariaLabel, "aria-describedby": description ? descriptionId : undefined, onCancel: onCancel, onClose: onNativeClose, onPointerDown: onPointerDown, onClick: onClick, children: shown && (_jsxs(HostedPopupContext, { value: false, children: [(title || icon || hasControls) && (_jsxs("header", { className: "nx-popup__head", onPointerDown: onHeadPointerDown, onDoubleClick: onHeadDoubleClick, children: [icon && _jsx("span", { className: "nx-popup__icon", children: icon }), _jsxs("div", { className: "nx-popup__heading", children: [title && (_jsx("h2", { id: titleId, className: "nx-popup__title", children: title })), description && (_jsx("p", { id: descriptionId, className: "nx-popup__description", children: description }))] }), hasControls && (_jsxs("div", { className: "nx-popup__controls", children: [canMinimize && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__minimize", "aria-label": "Minimize", title: "Minimize", onMouseDown: keepFocus, onClick: () => changeWindowState("minimized"), children: _jsx(InlineIcon, { icon: iconMinus }) })), maximizable && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__maximize", "aria-label": maximized ? "Restore down" : "Maximize", title: maximized ? "Restore down" : "Maximize", onMouseDown: keepFocus, onClick: toggleMaximize, children: _jsx(InlineIcon, { icon: maximized ? iconSquares : iconSquare }) })), closable && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__close", "aria-label": "Close", title: "Close", onClick: () => onClose("close"), children: _jsx(InlineIcon, { icon: iconX }) }))] }))] })), _jsx("div", { className: "nx-popup__body", children: children }), footer && _jsx("footer", { className: "nx-popup__foot", children: footer })] }, round)) }));
+    return (_jsx("dialog", { ref: dialogRef, className: cx("nx-popup", `nx-popup--${variant}`, `nx-popup--${size}`, flush && "nx-popup--flush", maximized && "nx-popup--maximized", movable && "nx-popup--movable", closing && "nx-popup--closing", className), "data-window-state": windowState, "aria-labelledby": title ? titleId : undefined, "aria-label": title ? undefined : ariaLabel, "aria-describedby": cx(description ? descriptionId : undefined, ariaDescribedBy) || undefined, onCancel: onCancel, onClose: onNativeClose, onPointerDown: onPointerDown, onMouseDown: onMouseDown, onClick: onClick, children: shown && (_jsxs(HostedPopupContext, { value: false, children: [(title || icon || hasControls) && (_jsxs("header", { className: "nx-popup__head", onPointerDown: onHeadPointerDown, onDoubleClick: onHeadDoubleClick, children: [icon && _jsx("span", { className: "nx-popup__icon", children: icon }), _jsxs("div", { className: "nx-popup__heading", children: [title && (_jsx("h2", { id: titleId, className: "nx-popup__title", children: title })), description && (_jsx("p", { id: descriptionId, className: "nx-popup__description", children: description }))] }), hasControls && (_jsxs("div", { className: "nx-popup__controls", children: [canMinimize && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__minimize", "aria-label": "Minimize", title: "Minimize", onMouseDown: keepFocus, onClick: () => changeWindowState("minimized"), children: _jsx(InlineIcon, { icon: iconMinus }) })), maximizable && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__maximize", "aria-label": maximized ? "Restore down" : "Maximize", title: maximized ? "Restore down" : "Maximize", onMouseDown: keepFocus, onClick: toggleMaximize, children: _jsx(InlineIcon, { icon: maximized ? iconSquares : iconSquare }) })), closable && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__close", "aria-label": "Close", title: "Close", onClick: () => onClose("close"), children: _jsx(InlineIcon, { icon: iconX }) }))] }))] })), _jsx("div", { className: "nx-popup__body", children: children }), footer && _jsx("footer", { className: "nx-popup__foot", children: footer })] }, round)) }));
 }

package/dist/Components/Layouts/PopupDock.d.ts

@@ -3,7 +3,9 @@ import { type ReactNode } from "react";
 export interface DockedWindow {
     id: string;
     title: ReactNode;
-    /** Plain text of the title, for the tooltip. */
+    /** A second line under the title: the record or the place a window is about, so two of one kind read apart. */
+    description?: ReactNode;
+    /** Plain text of the title, and of the description, for the tooltip. */
     label?: string;
     /** The window's icon; a window icon when left out. */
     icon?: ReactNode;

package/dist/Components/Layouts/PopupDock.js

@@ -113,9 +113,10 @@ export function PopupDock() {
 function DockBar({ item, onRestore }) {
     const id = useId();
     const titleId = `${id}-title`;
+    const descriptionId = `${id}-description`;
     const closeId = `${id}-close`;
     return (_jsxs("li", { className: "nx-dock__item", children: [_jsxs("button", { type: "button", className: "nx-dock__window", title: item.label ? `Restore: ${item.label}` : "Restore", onClick: () => {
                     onRestore();
                     item.restore();
-                }, children: [_jsx("span", { className: "nx-dock__icon", "aria-hidden": "true", children: item.icon ?? _jsx(InlineIcon, { icon: iconAppWindow }) }), _jsx("span", { className: "nx-visually-hidden", children: "Restore " }), _jsx("span", { id: titleId, className: "nx-dock__title", children: item.title }), _jsx(InlineIcon, { className: "nx-dock__restore", icon: iconChevronUp })] }), item.close && (_jsxs("button", { type: "button", className: "nx-dock__close", "aria-labelledby": `${closeId} ${titleId}`, title: "Close", onClick: item.close, children: [_jsx("span", { id: closeId, hidden: true, children: "Close" }), _jsx(InlineIcon, { icon: iconX })] }))] }));
+                }, children: [_jsx("span", { className: "nx-dock__icon", "aria-hidden": "true", children: item.icon ?? _jsx(InlineIcon, { icon: iconAppWindow }) }), _jsx("span", { className: "nx-visually-hidden", children: "Restore " }), _jsxs("span", { className: "nx-dock__text", children: [_jsx("span", { id: titleId, className: "nx-dock__title", children: item.title }), item.description ? (_jsx("span", { id: descriptionId, className: "nx-dock__description", children: item.description })) : null] }), _jsx(InlineIcon, { className: "nx-dock__restore", icon: iconChevronUp })] }), item.close && (_jsxs("button", { type: "button", className: "nx-dock__close", "aria-labelledby": item.description ? `${closeId} ${titleId} ${descriptionId}` : `${closeId} ${titleId}`, title: "Close", onClick: item.close, children: [_jsx("span", { id: closeId, hidden: true, children: "Close" }), _jsx(InlineIcon, { icon: iconX })] }))] }));
 }

package/dist/Components/Layouts/PopupHost.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useSyncExternalStore } from "react";
 import { Popup } from "./Popup.js";
 import { HostedPopupContext } from "./PopupContext.js";
+import { PageLeaveGuardContext } from "../Forms/FormLeaveGuard.js";
 import { PopupDock } from "./PopupDock.js";
 import { withPopupRule } from "./PopupRules.js";
 const EMPTY = [];
@@ -156,8 +157,8 @@ export function PopupHost() {
         for (const entry of list)
             rendered.add(entry.id);
     });
-    return (_jsxs(HostedPopupContext, { value: true, children: [list.map(entry => {
-                const { content, footer, onClose: _onClose, beforeClose: _beforeClose, onWindowStateChange: _onWindowStateChange, key: _key, ...rest } = entry.options;
-                return (_jsx(Popup, { ...rest, open: entry.open, windowState: entry.windowState, onWindowStateChange: state => setWindowState(entry.id, state), footer: typeof footer === "function" ? footer(entry.handle) : footer, onClose: reason => requestClose(entry.id, reason), onClosed: () => removeEntry(entry.id), children: typeof content === "function" ? content(entry.handle) : content }, entry.id));
-            }), _jsx(PopupDock, {})] }));
+    return (_jsx(PageLeaveGuardContext, { value: null, children: _jsxs(HostedPopupContext, { value: true, children: [list.map(entry => {
+                    const { content, footer, onClose: _onClose, beforeClose: _beforeClose, onWindowStateChange: _onWindowStateChange, key: _key, ...rest } = entry.options;
+                    return (_jsx(Popup, { ...rest, open: entry.open, windowState: entry.windowState, onWindowStateChange: state => setWindowState(entry.id, state), footer: typeof footer === "function" ? footer(entry.handle) : footer, onClose: reason => requestClose(entry.id, reason), onClosed: () => removeEntry(entry.id), children: typeof content === "function" ? content(entry.handle) : content }, entry.id));
+                }), _jsx(PopupDock, {})] }) }));
 }

package/dist/Components/Layouts/ThemePicker.d.ts

@@ -13,8 +13,9 @@ export interface ThemePickerProps {
     className?: string;
 }
 /**
- * Light / Dark / System, a card per theme with a live preview of its colors, the density, the animations and, in a
- * development build, the scale grid. Each choice applies at once and is saved in the browser.
+ * Two sections: the theme (Light / Dark / System and a card per theme with a live preview of its colors) and the
+ * appearance (the density, the animations and, in a development build, the scale grid). Each choice applies at once
+ * and is saved in the browser.
  */
 export declare function ThemePicker({ themes, showMode, showDensity, showAnimations, showGrid, className }: ThemePickerProps): import("react").JSX.Element;
 export interface PreferencesPickerProps {

package/dist/Components/Layouts/ThemePicker.js

@@ -15,6 +15,7 @@ import { useTheme } from "../../Services/ThemeService.js";
 import { TabButtons } from "../Documents/TabButtons.js";
 import { Switch } from "../Inputs/CheckBox.js";
 import { Dropdown } from "../Inputs/Dropdown.js";
+import { TextBox } from "../Inputs/TextBox.js";
 const MODES = [
     { value: "light", label: "Light", icon: _jsx(InlineIcon, { icon: iconSun }) },
     { value: "dark", label: "Dark", icon: _jsx(InlineIcon, { icon: iconMoon }) },
@@ -38,14 +39,20 @@ const GRIDS = [
 function Choice({ id, legend, options, value, onChange, children }) {
     return (_jsxs("div", { className: "nx-theme-picker__group", children: [_jsx("p", { id: id, className: "nx-theme-picker__legend", children: legend }), children ?? (options && value !== undefined && onChange && _jsx(TabButtons, { "aria-labelledby": id, name: id, options: options, value: value, onChange: onChange, block: true }))] }));
 }
+/** A group of settings under its name: one section of the panel, a line above it. */
+function Section({ title, wide, children }) {
+    const id = useId();
+    return (_jsxs("section", { className: cx("nx-theme-picker__block", wide && "nx-theme-picker__block--wide"), "aria-labelledby": id, children: [_jsx("h3", { id: id, className: "nx-theme-picker__section", children: title }), children] }));
+}
 /**
- * Light / Dark / System, a card per theme with a live preview of its colors, the density, the animations and, in a
- * development build, the scale grid. Each choice applies at once and is saved in the browser.
+ * Two sections: the theme (Light / Dark / System and a card per theme with a live preview of its colors) and the
+ * appearance (the density, the animations and, in a development build, the scale grid). Each choice applies at once
+ * and is saved in the browser.
  */
 export function ThemePicker({ themes = NEXUS_THEMES, showMode = true, showDensity = true, showAnimations = true, showGrid = isDevelopmentBuild(), className }) {
     const { theme, mode, density, animations, grid, setTheme, setMode, setDensity, setAnimations, setGrid } = useTheme();
     const name = useId();
-    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [showMode && _jsx(Choice, { id: `${name}-mode`, legend: "Mode", options: MODES, value: mode, onChange: setMode }), _jsxs("fieldset", { className: "nx-theme-picker__group", children: [_jsx("legend", { className: "nx-theme-picker__legend", children: "Theme" }), _jsx("div", { className: "nx-theme-picker__grid", children: themes.map(option => (_jsxs("label", { className: "nx-theme-option", title: option.description, children: [_jsx("input", { type: "radio", className: "nx-visually-hidden", name: `${name}-theme`, value: option.id, checked: theme === option.id, onChange: () => setTheme(option.id) }), _jsx("span", { className: "nx-theme-option__preview", "data-nx-theme": option.id, "aria-hidden": "true", children: _jsxs("span", { className: "nx-theme-option__window", children: [_jsx("span", { className: "nx-theme-option__line" }), _jsx("span", { className: "nx-theme-option__line nx-theme-option__line--muted" }), _jsxs("span", { className: "nx-theme-option__swatches", children: [_jsx("span", { className: "nx-theme-option__pill" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--success" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--warning" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--danger" })] })] }) }), _jsxs("span", { className: "nx-theme-option__name", children: [option.name, _jsx(InlineIcon, { icon: iconCheck, className: "nx-theme-option__check" })] })] }, option.id))) })] }), showDensity && _jsx(Choice, { id: `${name}-density`, legend: "Density", options: DENSITIES, value: density, onChange: setDensity }), showAnimations && _jsx(Choice, { id: `${name}-animations`, legend: "Animations", options: ANIMATIONS, value: animations, onChange: setAnimations }), showGrid && _jsx(Choice, { id: `${name}-grid`, legend: "Scale grid", options: GRIDS, value: grid, onChange: setGrid })] }));
+    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [_jsxs(Section, { title: "Theme", wide: true, children: [showMode && _jsx(Choice, { id: `${name}-mode`, legend: "Mode", options: MODES, value: mode, onChange: setMode }), _jsxs("fieldset", { className: "nx-theme-picker__group", children: [_jsx("legend", { className: "nx-theme-picker__legend", children: "Colors" }), _jsx("div", { className: "nx-theme-picker__grid", children: themes.map(option => (_jsxs("label", { className: "nx-theme-option", title: option.description, children: [_jsx("input", { type: "radio", className: "nx-visually-hidden", name: `${name}-theme`, value: option.id, checked: theme === option.id, onChange: () => setTheme(option.id) }), _jsx("span", { className: "nx-theme-option__preview", "data-nx-theme": option.id, "aria-hidden": "true", children: _jsxs("span", { className: "nx-theme-option__window", children: [_jsx("span", { className: "nx-theme-option__line" }), _jsx("span", { className: "nx-theme-option__line nx-theme-option__line--muted" }), _jsxs("span", { className: "nx-theme-option__swatches", children: [_jsx("span", { className: "nx-theme-option__pill" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--success" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--warning" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--danger" })] })] }) }), _jsxs("span", { className: "nx-theme-option__name", children: [option.name, _jsx(InlineIcon, { icon: iconCheck, className: "nx-theme-option__check" })] })] }, option.id))) })] })] }), (showDensity || showAnimations || showGrid) && (_jsxs(Section, { title: "Appearance", children: [showDensity && _jsx(Choice, { id: `${name}-density`, legend: "Density", options: DENSITIES, value: density, onChange: setDensity }), showAnimations && _jsx(Choice, { id: `${name}-animations`, legend: "Animations", options: ANIMATIONS, value: animations, onChange: setAnimations }), showGrid && _jsx(Choice, { id: `${name}-grid`, legend: "Scale grid", options: GRIDS, value: grid, onChange: setGrid })] }))] }));
 }
 /* The quick preferences: language, dates, numbers and tables, beside the theme. */
 const LANGUAGES = [
@@ -75,6 +82,11 @@ const SEPARATORS = [
     { value: "none", label: "1200", title: "None" },
 ];
 const PAGE_SIZES = DEFAULT_PAGE_SIZES.map(size => ({ value: size, label: `${size} rows` }));
+const DESIGNS = [
+    { value: "standard", label: "Standard", title: "The label above the box" },
+    { value: "outlined", label: "Outlined", title: "The label on the box's edge" },
+    { value: "inbox", label: "Inbox", title: "The label inside the top of the box" },
+];
 // A fixed day, so the server and the browser write the same examples, and one past the 12th, so day and month differ.
 const SAMPLE_DATE = "2026-09-27";
 /**
@@ -89,5 +101,5 @@ export function PreferencesPicker({ className }) {
     const preferences = useUserPreferences();
     const name = useId();
     const formats = DATE_FORMATS.map(format => ({ value: format, label: formatDate(SAMPLE_DATE, { ...dates, format }), description: format }));
-    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [_jsx("h3", { className: "nx-theme-picker__section", children: "Language and region" }), _jsx(Choice, { id: `${name}-language`, legend: "Interface language", options: LANGUAGES, value: preferences.language, onChange: language => setUserPreferences({ language }) }), _jsx(Choice, { id: `${name}-calendar`, legend: "Calendar", options: CALENDARS, value: dates.calendar, onChange: calendar => setDatePreferences({ calendar }) }), _jsx("h3", { className: "nx-theme-picker__section", children: "Dates and times" }), _jsx(Choice, { id: `${name}-script`, legend: "Date picker language", options: SCRIPTS, value: dates.script, onChange: script => setDatePreferences({ script }) }), _jsx(Choice, { id: `${name}-clock`, legend: "Clock", options: CLOCKS, value: /H/.test(dates.timeFormat) ? "24" : "12", onChange: clock => setDatePreferences({ timeFormat: clock === "24" ? "HH:mm" : DEFAULT_TIME_FORMAT }) }), _jsx(Choice, { id: `${name}-format`, legend: "Display date format", children: _jsx(Dropdown, { "aria-labelledby": `${name}-format`, options: formats, value: dates.format, clearable: false, searchable: false, onValueChange: format => format && setDatePreferences({ format }) }) }), _jsx("h3", { className: "nx-theme-picker__section", children: "Numbers" }), _jsx(Choice, { id: `${name}-scale`, legend: "Number scale", options: SCALES, value: String(preferences.numberScale), onChange: scale => setUserPreferences({ numberScale: Number(scale) === ENumberScales.SouthAsian ? ENumberScales.SouthAsian : ENumberScales.International }) }), _jsx(Choice, { id: `${name}-thousands`, legend: "Thousands separator", options: SEPARATORS, value: preferences.thousands, onChange: thousands => setUserPreferences({ thousands }) }), _jsx("h3", { className: "nx-theme-picker__section", children: "Tables" }), _jsx(Choice, { id: `${name}-page-size`, legend: "Default page size", children: _jsx(Dropdown, { "aria-labelledby": `${name}-page-size`, options: PAGE_SIZES, value: preferences.pageSize ?? DEFAULT_PAGE_SIZE, clearable: false, searchable: false, onValueChange: pageSize => pageSize && setUserPreferences({ pageSize }) }) }), _jsx(Switch, { label: "A row click opens the record", labelPosition: "start", checked: preferences.rowClick ?? false, onValueChange: rowClick => setUserPreferences({ rowClick }) })] }));
+    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [_jsxs(Section, { title: "Language and region", children: [_jsx(Choice, { id: `${name}-language`, legend: "Interface language", options: LANGUAGES, value: preferences.language, onChange: language => setUserPreferences({ language }) }), _jsx(Choice, { id: `${name}-calendar`, legend: "Calendar", options: CALENDARS, value: dates.calendar, onChange: calendar => setDatePreferences({ calendar }) })] }), _jsxs(Section, { title: "Dates and times", children: [_jsx(Choice, { id: `${name}-script`, legend: "Date picker language", options: SCRIPTS, value: dates.script, onChange: script => setDatePreferences({ script }) }), _jsx(Choice, { id: `${name}-clock`, legend: "Clock", options: CLOCKS, value: /H/.test(dates.timeFormat) ? "24" : "12", onChange: clock => setDatePreferences({ timeFormat: clock === "24" ? "HH:mm" : DEFAULT_TIME_FORMAT }) }), _jsx(Choice, { id: `${name}-format`, legend: "Display date format", children: _jsx(Dropdown, { "aria-labelledby": `${name}-format`, options: formats, value: dates.format, clearable: false, searchable: false, onValueChange: format => format && setDatePreferences({ format }) }) })] }), _jsxs(Section, { title: "Numbers", children: [_jsx(Choice, { id: `${name}-scale`, legend: "Number scale", options: SCALES, value: String(preferences.numberScale), onChange: scale => setUserPreferences({ numberScale: Number(scale) === ENumberScales.SouthAsian ? ENumberScales.SouthAsian : ENumberScales.International }) }), _jsx(Choice, { id: `${name}-thousands`, legend: "Thousands separator", options: SEPARATORS, value: preferences.thousands, onChange: thousands => setUserPreferences({ thousands }) })] }), _jsxs(Section, { title: "Tables", children: [_jsx(Choice, { id: `${name}-page-size`, legend: "Default page size", children: _jsx(Dropdown, { "aria-labelledby": `${name}-page-size`, options: PAGE_SIZES, value: preferences.pageSize ?? DEFAULT_PAGE_SIZE, clearable: false, searchable: false, onValueChange: pageSize => pageSize && setUserPreferences({ pageSize }) }) }), _jsx(Switch, { label: "A row click opens the record", labelPosition: "start", checked: preferences.rowClick ?? false, onValueChange: rowClick => setUserPreferences({ rowClick }) })] }), _jsxs(Section, { title: "Forms", children: [_jsx(Choice, { id: `${name}-design`, legend: "Input design", options: DESIGNS, value: preferences.inputDesign ?? "standard", onChange: inputDesign => setUserPreferences({ inputDesign }) }), _jsx(TextBox, { label: "Example", placeholder: "Type to try it" })] })] }));
 }