nexus-shared 2.0.0 → 3.1.0

package/dist/Components/Viewers/DataTableColumns.js

@@ -0,0 +1,200 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconArrowBackUp, iconGripVertical, iconPin, InlineIcon } from "nexus-icons";
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { isPopoverOpen } from "../../Helpers/PopoverHelpers.js";
+import { usePopoverPanel } from "../../Helpers/PopoverHooks.js";
+import { Button } from "../Documents/Button.js";
+/** The rows of the panel: a band for every run of neighbours that name the same group, as the header draws them. */
+function panelRows(columns, groups) {
+    const rows = [];
+    for (const column of columns) {
+        const group = groups.get(column.key);
+        const last = rows[rows.length - 1];
+        if (group && last && last.band === group)
+            last.columns.push(column);
+        else if (group)
+            rows.push({ band: group, columns: [column] });
+        else
+            rows.push({ band: null, column });
+    }
+    return rows;
+}
+/** The keys of a row, in order: one column, or every column of a band. */
+function rowKeys(row) {
+    return row.band === null ? [row.column.key] : row.columns.map(column => column.key);
+}
+/** Moves `from` to `to` in a list. */
+function moveItem(items, from, to) {
+    const next = [...items];
+    const [item] = next.splice(from, 1);
+    if (item === undefined)
+        return next;
+    next.splice(to, 0, item);
+    return next;
+}
+/** Which place the pointer is over, by the middle of each row: the index the row held would take. */
+function dropIndex(boxes, y, from) {
+    for (let index = 0; index < boxes.length; index++) {
+        const box = boxes[index];
+        if (y < box.top + box.height / 2)
+            return index > from ? index - 1 : index;
+    }
+    return boxes.length - 1;
+}
+/** The text of a label that may be a node, for an accessible name. */
+function textOf(label) {
+    return typeof label === "string" || typeof label === "number" ? String(label) : "the column";
+}
+/**
+ * The Columns panel, opened through its `open()` handle under `anchor`: a checkbox per column, bands with their columns under
+ * them, and a handle to drag a row into another place. The panel is a popover under the button, so it closes on Esc,
+ * on a click outside, and on Tab.
+ *
+ * @example
+ * <TableColumnsPanel columns={columns} hidden={state.hidden} pinned={state.pinned}
+ *   onToggle={(key, hide) => table.setHidden(key, hide)} onOrder={keys => table.setOrder(keys)} />
+ */
+export function TableColumnsPanel({ columns, hidden, pinned, reorderable = true, size = "md", changed = false, onToggle, onOrder, onReset, anchor, ref, }) {
+    const id = useId();
+    const panelId = `${id}-columns`;
+    const { panelRef, open, onToggle: onPanelToggle } = usePopoverPanel(anchor, ref);
+    // While a row is held: its key, the list it may move in, and where it would land.
+    const [drag, setDrag] = useState(null);
+    const [said, setSaid] = useState("");
+    // The columns of a band that were already hidden when its checkbox was cleared: shown again, the band keeps them off.
+    const bandMemory = useRef(new Map());
+    const all = columns.map(column => ({
+        key: column.key,
+        label: column.label,
+        shown: !hidden.has(column.key),
+        pin: pinned[column.key] ?? column.pinned ?? null,
+        movable: reorderable && column.movable !== false,
+        hideable: column.hideable !== false,
+    }));
+    const groups = new Map(columns.map(column => [column.key, column.group]));
+    const rows = panelRows(all, groups);
+    const shownCount = all.filter(column => column.shown).length;
+    const bands = rows.some(row => row.band !== null);
+    // A panel opened again starts without the last move's message, so a screen reader is not told about an old move.
+    useEffect(() => {
+        if (!open)
+            setSaid("");
+    }, [open]);
+    /** The whole order after moving a row of `list` ("" for the panel itself, a band's name for its own columns). */
+    function moved(list, from, to) {
+        if (list === "") {
+            const next = moveItem(rows, from, to);
+            return next.flatMap(rowKeys);
+        }
+        const band = rows.find(row => row.band === list);
+        if (!band || band.band === null)
+            return null;
+        const next = moveItem(band.columns, from, to);
+        return rows.flatMap(row => (row.band === list ? next.map(column => column.key) : rowKeys(row)));
+    }
+    function move(list, from, to, label) {
+        const length = list === "" ? rows.length : rows.find(row => row.band === list)?.columns.length;
+        if (!length)
+            return;
+        const target = Math.min(Math.max(to, 0), length - 1);
+        if (target === from)
+            return;
+        const order = moved(list, from, target);
+        if (!order)
+            return;
+        onOrder(order);
+        setSaid(list === "" ? `${label} is now ${target + 1} of ${length}.` : `${label} is now ${target + 1} of ${length} in ${list}.`);
+    }
+    function onHandleKeyDown(event, list, index, label) {
+        const length = list === "" ? rows.length : (rows.find(row => row.band === list)?.columns.length ?? 0);
+        const step = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : event.key === "Home" ? -index : event.key === "End" ? length - 1 - index : 0;
+        if (!step)
+            return;
+        event.preventDefault();
+        move(list, index, index + step, label);
+    }
+    function onHandlePointerDown(event, list, index, key, label) {
+        if (event.button !== 0)
+            return;
+        // A row moves inside its own list only: a band among the bands, a column of a band among its siblings.
+        const owner = event.currentTarget.closest("[data-list]");
+        if (!owner)
+            return;
+        const handle = event.currentTarget;
+        const boxes = [...owner.children].map(child => child.getBoundingClientRect());
+        handle.setPointerCapture(event.pointerId);
+        setDrag({ key, list, to: index });
+        const end = (done, y) => {
+            handle.removeEventListener("pointermove", onMove);
+            handle.removeEventListener("pointerup", up);
+            handle.removeEventListener("pointercancel", cancel);
+            handle.removeEventListener("keydown", escape);
+            setDrag(null);
+            if (done && y !== undefined)
+                move(list, index, dropIndex(boxes, y, index), label);
+        };
+        const onMove = (moved) => setDrag({ key, list, to: dropIndex(boxes, moved.clientY, index) });
+        const up = (moved) => {
+            if (handle.hasPointerCapture(moved.pointerId))
+                handle.releasePointerCapture(moved.pointerId);
+            end(true, moved.clientY);
+        };
+        const cancel = () => end(false);
+        // Esc puts the row back where it was.
+        const escape = (key) => {
+            if (key.key !== "Escape")
+                return;
+            key.preventDefault();
+            key.stopPropagation();
+            end(false);
+        };
+        handle.addEventListener("pointermove", onMove);
+        handle.addEventListener("pointerup", up);
+        handle.addEventListener("pointercancel", cancel);
+        handle.addEventListener("keydown", escape);
+    }
+    /** The band's checkbox: off hides every column under it, on brings back the ones it was not already hiding. */
+    function toggleBand(band, columnsOfBand, show) {
+        if (show) {
+            const kept = new Set(bandMemory.current.get(band) ?? []);
+            bandMemory.current.delete(band);
+            for (const column of columnsOfBand)
+                if (!column.shown && !kept.has(column.key))
+                    onToggle(column.key, false);
+            return;
+        }
+        bandMemory.current.set(band, columnsOfBand.filter(column => !column.shown).map(column => column.key));
+        for (const column of columnsOfBand)
+            if (column.shown)
+                onToggle(column.key, true);
+    }
+    function hidePopover(panel) {
+        if (isPopoverOpen(panel))
+            panel.hidePopover();
+    }
+    /** One column's row: the handle, the checkbox, the label, and a mark when it is pinned. */
+    function columnRow(column, list, index, inBand, bandOff) {
+        const lastShown = column.shown && shownCount <= 1;
+        return (_jsxs("li", { className: cx("nx-columns__row", inBand && "nx-columns__row--child"), "data-held": drag?.key === column.key ? "" : undefined, "data-drop": drag && drag.list === list && drag.key !== column.key && drag.to === index ? "" : undefined, children: [column.movable && !bandOff ? (_jsx("button", { type: "button", className: "nx-columns__handle", "aria-label": `Move ${textOf(column.label)}`, title: inBand ? `Drag to move it inside ${list}, or use the arrow keys` : "Drag to move, or use the arrow keys", onPointerDown: event => onHandlePointerDown(event, list, index, column.key, textOf(column.label)), onKeyDown: event => onHandleKeyDown(event, list, index, textOf(column.label)), children: _jsx(InlineIcon, { icon: iconGripVertical }) })) : (_jsx("span", { className: "nx-columns__handle nx-columns__handle--fixed", "aria-hidden": "true" })), _jsxs("label", { className: "nx-choice nx-choice--sm nx-columns__choice", children: [_jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: column.shown && !bandOff, disabled: bandOff || !column.hideable || lastShown, title: bandOff ? `${list} is hidden` : column.hideable ? undefined : "Always shown", onChange: event => onToggle(column.key, !event.currentTarget.checked) }), _jsx("span", { className: "nx-choice__text", children: _jsx("span", { className: "nx-choice__label nx-columns__label", children: column.label }) })] }), column.pin && (_jsxs("span", { className: "nx-columns__pin", title: `Pinned to the ${column.pin === "left" ? "left" : "right"}`, children: [_jsx(InlineIcon, { icon: iconPin }), _jsx("span", { className: "nx-visually-hidden", children: `Pinned to the ${column.pin === "left" ? "left" : "right"}` })] }))] }, column.key));
+    }
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: panelRef, id: panelId, popover: "auto", role: "dialog", tabIndex: -1, "aria-labelledby": `${panelId}-title`, className: cx("nx-popover", "nx-table-panel", "nx-columns", size === "sm" && "nx-columns--sm"), "data-dragging": drag ? "" : undefined, onToggle: onPanelToggle, onKeyDown: event => {
+                if (event.key === "Tab")
+                    hidePopover(event.currentTarget);
+            }, children: [_jsxs("div", { className: "nx-table-panel__head", children: [_jsx("span", { className: "nx-table-panel__title", id: `${panelId}-title`, children: "Columns" }), _jsxs("span", { className: "nx-table-panel__count", children: [shownCount, " of ", all.length, " shown"] })] }), _jsx("ul", { className: "nx-columns__list nx-popover__scroll", "data-list": "", children: rows.map((row, index) => {
+                        if (row.band === null)
+                            return columnRow(row.column, "", index, false, false);
+                        const band = row.band;
+                        // A band whose columns were split into two runs is drawn twice, so a row is known by its first column, never
+                        // by the band's name: two rows under one name would be one row to React.
+                        const bandId = `band:${row.columns[0].key}`;
+                        const shown = row.columns.filter(column => column.shown).length;
+                        const movable = row.columns.every(column => column.movable);
+                        const last = shown > 0 && shownCount - shown < 1;
+                        return (_jsxs("li", { className: "nx-columns__row nx-columns__row--band", "data-held": drag?.key === bandId ? "" : undefined, "data-drop": drag && drag.list === "" && drag.key !== bandId && drag.to === index ? "" : undefined, children: [_jsxs("div", { className: "nx-columns__band", children: [movable ? (_jsx("button", { type: "button", className: "nx-columns__handle", "aria-label": `Move ${band}`, title: "Drag to move the whole band, or use the arrow keys", onPointerDown: event => onHandlePointerDown(event, "", index, bandId, band), onKeyDown: event => onHandleKeyDown(event, "", index, band), children: _jsx(InlineIcon, { icon: iconGripVertical }) })) : (_jsx("span", { className: "nx-columns__handle nx-columns__handle--fixed", "aria-hidden": "true" })), _jsxs("label", { className: "nx-choice nx-choice--sm nx-columns__choice", children: [_jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: shown > 0, disabled: last, ref: input => {
+                                                        if (input)
+                                                            input.indeterminate = shown > 0 && shown < row.columns.length;
+                                                    }, "aria-label": `${band}: ${shown} of ${row.columns.length} shown`, onChange: event => toggleBand(band, row.columns, event.currentTarget.checked) }), _jsx("span", { className: "nx-choice__text", children: _jsx("span", { className: "nx-choice__label nx-columns__label", children: band }) })] }), _jsxs("span", { className: "nx-columns__band-count", children: [shown, " / ", row.columns.length] })] }), _jsx("ul", { className: "nx-columns__children", "data-list": band, children: row.columns.map((column, childIndex) => columnRow(column, band, childIndex, true, shown === 0)) })] }, bandId));
+                    }) }), _jsxs("p", { className: "nx-columns__note", children: [reorderable ? "Drag a handle, or move it with the arrow keys." : "This table keeps the order of its columns.", bands ? " A column under a band moves inside it; the band moves as one." : ""] }), onReset && (_jsx("div", { className: "nx-table-panel__foot", children: _jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconArrowBackUp }), disabled: !changed, onClick: () => onReset(), children: "Reset columns" }) })), _jsx("span", { className: "nx-visually-hidden", "aria-live": "polite", children: said })] }) }));
+}

package/dist/Components/Viewers/DataTableFilters.d.ts

@@ -0,0 +1,21 @@
+import { type Ref, type RefObject } from "react";
+import { type PopoverPanelHandle } from "../../Helpers/PopoverHooks.ts";
+import type { InputParams } from "../../Interfaces/FormInterfaces.ts";
+import type { TableFilters } from "../../Interfaces/TableInterfaces.ts";
+export interface TableFiltersPanelProps {
+    /** The filter inputs, as the table prepared them (`asFilterInput`). */
+    inputs: readonly InputParams[];
+    /** The table's filters: a change from outside, such as Clear filters, loads them into the form. */
+    value: TableFilters | undefined;
+    /** Milliseconds a typed value waits: the table's search delay. */
+    delay: number;
+    /** The rows the search and the filters leave, and every row, for the foot. */
+    matches: number;
+    total: number;
+    onChange: (values: Readonly<Record<string, unknown>>) => void;
+    /** The options button (⋮) the panel opens under; Esc gives the focus back to it. */
+    anchor: RefObject<HTMLElement | null>;
+    ref?: Ref<PopoverPanelHandle>;
+}
+/** The Filters panel, opened through its `open()` handle: a `Form` of the filter inputs, the count, and Clear all. */
+export declare function TableFiltersPanel({ inputs, value, delay, matches, total, onChange, anchor, ref }: TableFiltersPanelProps): import("react").JSX.Element;

package/dist/Components/Viewers/DataTableFilters.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconFilterOff, InlineIcon } from "nexus-icons";
+import { useEffect, useId, useRef } from "react";
+import { usePopoverPanel } from "../../Helpers/PopoverHooks.js";
+import { activeFilters } from "../../Helpers/TableFilters.js";
+import { Button } from "../Documents/Button.js";
+import { Form, useForm } from "../Forms/Form.js";
+import { formatCount } from "./DataTableParts.js";
+/*
+ * The Filters panel: the table's filter inputs as one small form under the options button (⋮), applied as they change.
+ * A choice applies at once; a value that can come a key or a step at a time (text, a number, a slider, a date) waits
+ * the table's search delay, or Enter, or the panel closing. Esc closes the panel, an open list or calendar first, and
+ * never clears a filter on its way out.
+ */
+/** Inputs typed into or dragged: their value waits until the person stops. A date box reads a date from part of one. */
+const TYPED = new Set(["text", "email", "search", "tel", "url", "textarea", "number", "slider", "range-slider", "date", "date-range", "time", "date-time"]);
+/** The Filters panel, opened through its `open()` handle: a `Form` of the filter inputs, the count, and Clear all. */
+export function TableFiltersPanel({ inputs, value, delay, matches, total, onChange, anchor, ref }) {
+    const titleId = useId();
+    const form = useForm();
+    // The form is drawn on the first open and kept: what was typed, and the labels a server list loaded, stay.
+    const { panelRef, shown, onToggle } = usePopoverPanel(anchor, ref, () => form.focus());
+    const pending = useRef(undefined);
+    const count = value ? Object.keys(value).length : 0;
+    const apply = () => {
+        clearTimeout(pending.current);
+        pending.current = undefined;
+        onChange(form.getValue());
+    };
+    const wait = () => {
+        clearTimeout(pending.current);
+        pending.current = setTimeout(apply, delay);
+    };
+    const flush = () => pending.current !== undefined && apply();
+    // Filters changed from outside reach the form, unless a typed value is still on its way.
+    useEffect(() => {
+        if (form.started && pending.current === undefined && JSON.stringify(activeFilters(inputs, form.getValue())) !== JSON.stringify(value))
+            form.load(value ?? {});
+    }, [form, inputs, value]);
+    useEffect(() => () => clearTimeout(pending.current), []);
+    return (_jsxs("div", { ref: panelRef, popover: "auto", role: "dialog", tabIndex: -1, "aria-labelledby": titleId, className: "nx-popover nx-table-panel nx-table-filters", onToggle: onToggle, onBeforeToggle: event => {
+            // Before the click that closes it lands: a clear that click makes then comes after what was typed.
+            if (event.target === event.currentTarget && event.newState === "closed")
+                flush();
+        }, onKeyDownCapture: event => {
+            // Kept from the inputs, whose Esc clears a value first: with no list or calendar open, Esc closes the panel.
+            if (event.key === "Escape" && !event.currentTarget.querySelector(":popover-open"))
+                event.stopPropagation();
+        }, onKeyDown: event => {
+            if (event.key === "Enter")
+                flush();
+        }, onInput: () => {
+            // A key that changes nothing the box reads ("2025-01-01 -") is typing too: a waiting value waits on.
+            if (pending.current !== undefined)
+                wait();
+        }, children: [_jsxs("div", { className: "nx-table-panel__head", children: [_jsx("span", { className: "nx-table-panel__title", id: titleId, children: "Filters" }), _jsx("span", { className: "nx-table-panel__count", children: count ? `${count} on` : "None" })] }), _jsx("div", { className: "nx-popover__scroll", children: shown && (_jsx(Form, { form: form, inputs: inputs, size: "sm", defaultValue: value, className: "nx-table-filters__form", onValueChange: (_, name) => {
+                        if (name === null)
+                            return;
+                        if (delay > 0 && TYPED.has(inputs.find(params => params.name === name)?.type ?? ""))
+                            wait();
+                        else
+                            apply();
+                    } })) }), _jsxs("div", { className: "nx-table-panel__foot", children: [_jsxs("span", { className: "nx-table-filters__rows", "aria-live": "polite", children: [formatCount(matches), " of ", formatCount(total), " rows"] }), _jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconFilterOff }), disabled: !count, onClick: () => {
+                            form.load({});
+                            apply();
+                        }, children: "Clear all" })] })] }));
+}

package/dist/Components/Viewers/DataTableParts.d.ts

@@ -38,8 +38,10 @@ export declare function TableColumnGroup<TRow extends TableRow>({ columns, width
     colRefs: Map<string, HTMLTableColElement>;
 }): import("react").JSX.Element;
 /** The number of a row, its checkbox, or both: the number until the pointer is over the row or something is selected. */
-export declare function TableIndexCell({ heading, own, number, numbered, selectable, checkbox, }: {
+export declare function TableIndexCell({ heading, rowSpan, own, number, numbered, selectable, checkbox, }: {
     heading?: boolean;
+    /** 2 in the heading while the header has a band of group headings above the columns' own. */
+    rowSpan?: number;
     own: {
         offset: number;
         edge: boolean;
@@ -74,9 +76,11 @@ export interface TableRowViewProps<TRow extends TableRow> {
     onToggle: (row: TRow, on: boolean, event: MouseEvent<HTMLInputElement>) => void;
     onAction: (row: TRow, action: TableRowAction<TRow>) => void;
     onOpen?: (row: TRow) => void;
+    /** A single click opens the row, as a double-click does. */
+    openOnClick?: boolean;
 }
 /** One row. It renders again only when its row, its state, or the columns change. */
-declare function TableRowViewInner<TRow extends TableRow>({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, pinned, frame, sized, actions, onToggle, onAction, onOpen, }: TableRowViewProps<TRow>): import("react").JSX.Element;
+declare function TableRowViewInner<TRow extends TableRow>({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, pinned, frame, sized, actions, onToggle, onAction, onOpen, openOnClick, }: TableRowViewProps<TRow>): import("react").JSX.Element;
 export declare const TableRowView: typeof TableRowViewInner;
 /**
  * The head of the pinned section: one row across the table with a button that folds the pinned records open and shut,
@@ -123,8 +127,8 @@ export declare function TablePageSize({ pageSize, pageSizes, compact, onChange }
     onChange: (size: number) => void;
 }): import("react").JSX.Element | null;
 /**
- * Under the table: which rows show and how many the search left ("Showing 41–50 of 234 · filtered from 1,000"), the page
- * of how many, and the pager.
+ * Under the table: which rows show and how many the search and the filters left ("Showing 41–50 of 234 · filtered
+ * from 1,000"), the page of how many, and the pager.
  */
 export declare function TableFooter<TRow extends TableRow>({ state, disabled, onPage }: {
     state: TableState<TRow>;

package/dist/Components/Viewers/DataTableParts.js

@@ -75,7 +75,7 @@ export function TableColumnGroup({ columns, widths, frame, colRefs, }) {
     return (_jsxs("colgroup", { children: [own(TABLE_INDEX_COLUMN, Boolean(frame.index)), columns.map(view => (_jsx("col", { ref: hold(view.column.key), style: { width: widths[view.column.key] ?? cssLength(view.column.width) ?? FALLBACK_COLUMN_WIDTH } }, view.column.key))), _jsx("col", { className: "nx-table__col-filler" }), own(TABLE_ACTIONS_COLUMN, Boolean(frame.actions))] }));
 }
 /** The number of a row, its checkbox, or both: the number until the pointer is over the row or something is selected. */
-export function TableIndexCell({ heading, own, number, numbered, selectable, checkbox, }) {
+export function TableIndexCell({ heading, rowSpan, own, number, numbered, selectable, checkbox, }) {
     const shared = {
         className: cx(heading ? "nx-table__heading" : "nx-table__cell", "nx-table__cell--index"),
         "data-col": TABLE_INDEX_COLUMN,
@@ -86,19 +86,31 @@ export function TableIndexCell({ heading, own, number, numbered, selectable, che
         style: ownStyle(own, "left"),
     };
     const content = (_jsxs(_Fragment, { children: [numbered && (_jsx("span", { className: "nx-table__number", "aria-hidden": selectable || undefined, children: number })), checkbox] }));
-    return heading ? (_jsx("th", { scope: "col", ...shared, children: content })) : (_jsx("td", { ...shared, children: content }));
+    return heading ? (_jsx("th", { scope: "col", rowSpan: rowSpan, ...shared, children: content })) : (_jsx("td", { ...shared, children: content }));
+}
+/** What in a row is a control of its own: a click there does what the control does, and never opens the row. */
+const ROW_CONTROLS = "button, a, input, select, textarea, label, [role=menu], [role=menuitem]";
+/**
+ * Whether a click on a row should open it. Never on one of its controls. A single click also does not when it ends a
+ * text selection inside the row — somebody dragging across a cell to copy a code is not asking for a popup — but a
+ * double-click is not asked that, because a double-click selects the word under the pointer on its way in.
+ */
+function opensRow(event, single) {
+    if (event.target.closest(ROW_CONTROLS))
+        return false;
+    if (!single)
+        return true;
+    const selection = window.getSelection();
+    return !(selection && !selection.isCollapsed && event.currentTarget.contains(selection.anchorNode));
 }
 /** One row. It renders again only when its row, its state, or the columns change. */
-function TableRowViewInner({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, pinned, frame, sized, actions, onToggle, onAction, onOpen, }) {
+function TableRowViewInner({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, pinned, frame, sized, actions, onToggle, onAction, onOpen, openOnClick, }) {
     const inline = actions?.filter(action => action.inline && action.icon) ?? [];
     const inMenu = actions?.filter(action => !(action.inline && action.icon)) ?? [];
     const items = inMenu.map(action => ({ value: action.id, label: action.label, icon: action.icon, description: action.description, tone: action.tone, disabled: action.disabled }));
-    return (_jsxs("tr", { className: "nx-table__row", "data-key": rowKey, "data-pinned": pinned || undefined, "data-selected": selected || undefined, "data-busy": busy || undefined, "data-flash": flashed || undefined, "aria-busy": busy || undefined, onDoubleClick: onOpen &&
-            (event => {
-                if (event.target.closest("button, a, input, label, [role=menu]"))
-                    return;
-                onOpen(row);
-            }), children: [frame.index && (_jsx(TableIndexCell, { own: frame.index, number: pinned ? _jsx(InlineIcon, { icon: iconPin, className: "nx-table__pin-mark" }) : formatCount(number), numbered: numbered || Boolean(pinned), selectable: selectable, checkbox: selectable && (_jsx("label", { className: "nx-choice nx-choice--sm nx-table__check", title: selectionFull ? "No more rows can be selected." : undefined, children: _jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: selected, disabled: selectionFull && !selected, "aria-label": `Select ${label}`, onClick: event => onToggle(row, event.currentTarget.checked, event), onChange: () => undefined }) })) })), columns.map(view => (_jsx("td", { className: cx("nx-table__cell", `nx-table__cell--${columnAlign(view.column)}`, view.column.wrap && "nx-table__cell--wrap"), "data-col": view.column.key, "data-pin": view.pin ?? undefined, "data-pin-edge": (view.pin && view.edge) || undefined, style: columnStyle(view, sized), children: _jsx("span", { className: "nx-table__value", children: _jsx(TableCellValue, { column: view.column, row: row, options: cellOptions }) }) }, view.column.key))), sized && _jsx("td", { className: "nx-table__cell nx-table__cell--filler" }), frame.actions && (_jsx("td", { className: "nx-table__cell nx-table__cell--actions", "data-col": TABLE_ACTIONS_COLUMN, "data-pin": "right", "data-pin-edge": frame.actions.edge || undefined, style: ownStyle(frame.actions, "right"), children: _jsxs("div", { className: "nx-table__actions", children: [inline.map(action => (_jsx(Button, { variant: "ghost", size: "sm", icon: action.icon, hoverTone: action.tone === "danger" ? "danger" : undefined, "aria-label": `${action.label}: ${label}`, title: action.label, "data-action": action.id, disabled: busy || action.disabled, onClick: () => onAction(row, action) }, action.id))), items.length > 0 && (_jsx(Menu, { items: items, align: "end", "aria-label": `Actions: ${label}`, onSelect: value => onAction(row, inMenu.find(action => action.id === value)), children: _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconDotsVertical }), loading: busy, "aria-label": `More actions: ${label}`, title: "More actions" }) })), items.length === 0 && busy && _jsx(Button, { variant: "ghost", size: "sm", loading: true, "aria-label": `Working: ${label}` })] }) }))] }));
+    return (_jsxs("tr", { className: "nx-table__row", "data-key": rowKey, "data-pinned": pinned || undefined, "data-selected": selected || undefined, "data-busy": busy || undefined, "data-flash": flashed || undefined, "aria-busy": busy || undefined, "data-open": (onOpen && openOnClick) || undefined, 
+        // One way in: with a single click the row is already open by the time a double-click would arrive.
+        onClick: onOpen && openOnClick ? event => opensRow(event, true) && onOpen(row) : undefined, onDoubleClick: onOpen && !openOnClick ? event => opensRow(event, false) && onOpen(row) : undefined, children: [frame.index && (_jsx(TableIndexCell, { own: frame.index, number: pinned ? _jsx(InlineIcon, { icon: iconPin, className: "nx-table__pin-mark" }) : formatCount(number), numbered: numbered || Boolean(pinned), selectable: selectable, checkbox: selectable && (_jsx("label", { className: "nx-choice nx-choice--sm nx-table__check", title: selectionFull ? "No more rows can be selected." : undefined, children: _jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: selected, disabled: selectionFull && !selected, "aria-label": `Select ${label}`, onClick: event => onToggle(row, event.currentTarget.checked, event), onChange: () => undefined }) })) })), columns.map(view => (_jsx("td", { className: cx("nx-table__cell", `nx-table__cell--${columnAlign(view.column)}`, view.column.wrap && "nx-table__cell--wrap"), "data-col": view.column.key, "data-pin": view.pin ?? undefined, "data-pin-edge": (view.pin && view.edge) || undefined, style: columnStyle(view, sized), children: _jsx("span", { className: "nx-table__value", children: _jsx(TableCellValue, { column: view.column, row: row, options: cellOptions }) }) }, view.column.key))), sized && _jsx("td", { className: "nx-table__cell nx-table__cell--filler" }), frame.actions && (_jsx("td", { className: "nx-table__cell nx-table__cell--actions", "data-col": TABLE_ACTIONS_COLUMN, "data-pin": "right", "data-pin-edge": frame.actions.edge || undefined, style: ownStyle(frame.actions, "right"), children: _jsxs("div", { className: "nx-table__actions", children: [inline.map(action => (_jsx(Button, { variant: "ghost", size: "sm", icon: action.icon, hoverTone: action.tone === "danger" ? "danger" : undefined, "aria-label": `${action.label}: ${label}`, title: action.label, "data-action": action.id, disabled: busy || action.disabled, onClick: () => onAction(row, action) }, action.id))), items.length > 0 && (_jsx(Menu, { items: items, align: "end", "aria-label": `Actions: ${label}`, onSelect: value => onAction(row, inMenu.find(action => action.id === value)), children: _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconDotsVertical }), loading: busy, "aria-label": `More actions: ${label}`, title: "More actions" }) })), items.length === 0 && busy && _jsx(Button, { variant: "ghost", size: "sm", loading: true, "aria-label": `Working: ${label}` })] }) }))] }));
 }
 export const TableRowView = memo(TableRowViewInner);
 /**
@@ -131,8 +143,8 @@ export function TablePageSize({ pageSize, pageSizes, compact = false, onChange }
     return (_jsx(Menu, { items: items, kind: "radio", size: "sm", align: compact ? "start" : "end", "aria-label": "Rows per page", onSelect: value => onChange(Number(value)), children: _jsx(Button, { variant: "ghost", size: "sm", iconEnd: _jsx(InlineIcon, { icon: iconChevronDown }), className: cx("nx-table__page-size", compact && "nx-table__page-size--field"), "aria-label": `Rows per page: ${pageSize}`, title: "Rows per page", children: compact ? formatCount(pageSize) : `${formatCount(pageSize)} / page` }) }));
 }
 /**
- * Under the table: which rows show and how many the search left ("Showing 41–50 of 234 · filtered from 1,000"), the page
- * of how many, and the pager.
+ * Under the table: which rows show and how many the search and the filters left ("Showing 41–50 of 234 · filtered
+ * from 1,000"), the page of how many, and the pager.
  */
 export function TableFooter({ state, disabled, onPage }) {
     const { status, rows, offset, matches, total, query } = state;
@@ -141,5 +153,5 @@ export function TableFooter({ state, disabled, onPage }) {
     const first = rows.length ? offset + 1 : 0;
     const last = offset + rows.length;
     const pages = pageCount(matches, query.pageSize);
-    return (_jsxs("div", { className: "nx-table__footer", children: [_jsxs("p", { className: "nx-table__range", "aria-live": "polite", children: [rows.length ? (_jsxs(_Fragment, { children: ["Showing ", _jsx("b", { children: `${formatCount(first)}–${formatCount(last)}` }), " of ", _jsx("b", { children: formatCount(matches) })] })) : (_jsx(_Fragment, { children: "No rows on this page" })), query.search && matches !== total && _jsxs("span", { className: "nx-table__range-all", children: [" \u00B7 filtered from ", formatCount(total)] })] }), _jsxs("div", { className: "nx-table__paging", children: [_jsxs("span", { className: "nx-table__page-info", children: ["Page ", formatCount(query.page), " of ", formatCount(pages)] }), _jsx(TablePager, { page: query.page, matches: matches, pageSize: query.pageSize, disabled: disabled, onPage: onPage })] })] }));
+    return (_jsxs("div", { className: "nx-table__footer", children: [_jsxs("p", { className: "nx-table__range", "aria-live": "polite", children: [rows.length ? (_jsxs(_Fragment, { children: ["Showing ", _jsx("b", { children: `${formatCount(first)}–${formatCount(last)}` }), " of ", _jsx("b", { children: formatCount(matches) })] })) : (_jsx(_Fragment, { children: "No rows on this page" })), (query.search || query.filters) && matches !== total && _jsxs("span", { className: "nx-table__range-all", children: [" \u00B7 filtered from ", formatCount(total)] })] }), _jsxs("div", { className: "nx-table__paging", children: [_jsxs("span", { className: "nx-table__page-info", children: ["Page ", formatCount(query.page), " of ", formatCount(pages)] }), _jsx(TablePager, { page: query.page, matches: matches, pageSize: query.pageSize, disabled: disabled, onPage: onPage })] })] }));
 }

package/dist/Helpers/AnimationHelpers.d.ts

@@ -1,3 +1,14 @@
+/**
+ * Whether things may move, as the stylesheets read it: `data-nx-motion` on `<html>`, which `ThemeScript` works out
+ * from the visitor's Animations choice and the system setting. Motion started from script (a flight, a smooth scroll)
+ * asks this, never `prefers-reduced-motion`, so "on" animates on a machine that reports reduced motion.
+ */
+export declare function motionAllowed(): boolean;
+/**
+ * Whether a scroll may be smooth: the visitor allows motion, and so does the system, because a browser whose system
+ * turned animations off scrolls at once whatever it is asked, and a smooth scroll that is skipped must not be waited on.
+ */
+export declare function smoothScrollAllowed(): boolean;
 /**
  * Calls `done` once the element's CSS animation `name` has finished, or at once when the element runs no animation of
  * that name. Call it after the class that starts the animation is on the element, e.g. in a layout effect.

package/dist/Helpers/AnimationHelpers.js

@@ -1,8 +1,26 @@
 /*
  * Exit animations. A closing element gets a class that starts a CSS animation, and the next step (closing a dialog,
- * removing a toast) waits for it. When no animation runs, the step must not wait: with reduced motion (which Windows
- * reports when its animations are turned off) or when a theme sets `animation: none`.
+ * removing a toast) waits for it. When no animation runs, the step must not wait: with animations off (the visitor's
+ * choice, or the system's under "system" - Windows reports reduced motion when its animations are turned off) or when
+ * a theme sets `animation: none`.
  */
+import { MOTION_ATTRIBUTE } from "../Interfaces/ThemeInterfaces.js";
+import { REDUCED_MOTION_QUERY } from "./ThemeHelpers.js";
+/**
+ * Whether things may move, as the stylesheets read it: `data-nx-motion` on `<html>`, which `ThemeScript` works out
+ * from the visitor's Animations choice and the system setting. Motion started from script (a flight, a smooth scroll)
+ * asks this, never `prefers-reduced-motion`, so "on" animates on a machine that reports reduced motion.
+ */
+export function motionAllowed() {
+    return typeof document === "undefined" || document.documentElement.getAttribute(MOTION_ATTRIBUTE) !== "reduce";
+}
+/**
+ * Whether a scroll may be smooth: the visitor allows motion, and so does the system, because a browser whose system
+ * turned animations off scrolls at once whatever it is asked, and a smooth scroll that is skipped must not be waited on.
+ */
+export function smoothScrollAllowed() {
+    return motionAllowed() && !(typeof window !== "undefined" && window.matchMedia?.(REDUCED_MOTION_QUERY).matches);
+}
 /**
  * Calls `done` once the element's CSS animation `name` has finished, or at once when the element runs no animation of
  * that name. Call it after the class that starts the animation is on the element, e.g. in a layout effect.

package/dist/Helpers/ApiClient.d.ts

@@ -12,6 +12,22 @@ export interface ApiCall<TOptions = object> {
     /** What the call does and acts on, for its messages. */
     context: MessageContext;
 }
+/**
+ * Reads a server's answer as an `ApiResult`. A client's `read` is the app's default for every call that does not bring
+ * its own (`ApiCallOptions.read`); `call` says what was asked for, and is left out for an answer that came from
+ * somewhere other than a call (an app's own send function).
+ *
+ * @example
+ * // A backend that answers { success, message, data, error: { code, message, fields } }
+ * configureApi({
+ *   read: (body, status) => {
+ *     const answer = body as { success?: boolean; message?: string; data?: unknown; error?: { code: string; fields?: Record<string, string[]> } };
+ *     if (answer?.success) return { ok: true, status, result: answer.data, message: answer.message };
+ *     return { ok: false, status, message: answer?.message, messageCode: answer?.error?.code, errors: … };
+ *   },
+ * });
+ */
+export type ApiResponseReader<TOptions = object> = (body: unknown, status: number | undefined, call?: ApiCall<TOptions>) => ApiResult;
 export interface ApiClientConfig<TOptions = object> {
     /** The full URL of an endpoint, given its filled path: through the proxy in the browser, the module's root on a server. */
     resolveUrl: (endpoint: ApiEndpoint, path: string, call: ApiCall<TOptions>) => string | Promise<string>;
@@ -24,6 +40,12 @@ export interface ApiClientConfig<TOptions = object> {
     /** Milliseconds to wait for an answer. Default 60,000. */
     timeout?: number;
     credentials?: RequestCredentials;
+    /**
+     * Reads every answer the call itself did not bring a reader for. Default `readApiResponse`: Nexus API responses,
+     * ASP.NET Core problem details, and any JSON by its status. An app on another backend registers its own once, so
+     * components that call inside themselves (`Crud`, `ApiForm`) read that backend's envelope too.
+     */
+    read?: ApiResponseReader<TOptions>;
     /** Changes the request just before it is sent, such as Next.js caching on a server. */
     prepare?: (init: RequestInit, call: ApiCall<TOptions>) => RequestInit;
     /**

package/dist/Helpers/ApiClient.js

@@ -99,7 +99,10 @@ export function createApiClient(config) {
                 controller.abort();
             }, timeout)
             : undefined;
-        const read = options.read ?? ((answer, status) => readApiResponse(answer, status, call.context));
+        // The call's own reader, else the app's (`configureApi({ read })`), else the built-in one. The app's is looked up
+        // on every call, so registering it after a module was imported still takes effect.
+        const appRead = config.read;
+        const read = options.read ?? (appRead ? (answer, status) => appRead(answer, status, call) : (answer, status) => readApiResponse(answer, status, call.context));
         const stopped = () => caller?.aborted ? aborted() : timedOut ? { ok: false, timeout: true, message: buildMessage("reason", { ...call.context, timeout: true }) } : undefined;
         let init = { method, headers, body, credentials: options.credentials ?? config.credentials, signal: controller.signal };
         if (config.prepare)

package/dist/Helpers/ApiFormHelpers.d.ts

@@ -4,7 +4,10 @@ export interface SendApiOptions {
     signal?: AbortSignal;
     read?: (body: unknown, status: number | undefined) => ApiResult;
 }
-/** The call options of a form's `{ url, method, headers, bodyType, credentials }` request with its values. */
+/**
+ * The call options of a form's `{ url, method, headers, bodyType, credentials }` request with its values. Without a
+ * `read` the client's own reader is used: the app's (`configureApi({ read })`), else the built-in one.
+ */
 export declare function apiRequestOptions(request: ApiRequest, body: unknown, { signal, read }?: SendApiOptions): ApiCallOptions;
 /** An abort as the error `fetch` throws, for code that expects a stopped request to reject. */
 export declare function abortError(): Error;
@@ -16,11 +19,31 @@ export declare function sendApiRequest(request: ApiRequest, body: unknown, optio
 /** What an `ApiSend` function answered, read the same way: a `Response`, an `ApiResult`, or a body. */
 export declare function toApiResult(answer: unknown, read?: (body: unknown, status: number | undefined) => ApiResult): Promise<ApiResult>;
 /**
- * Puts a server's messages on the inputs they name. Names match without case, and a path matches its first part that is
- * an input ("Addresses[1].City" and "$.addresses" go to "addresses"; "dto.Email" to "email"). Messages that match no
- * input are returned in `others`, for the form's message.
+ * The input a server's field name belongs to, or `undefined` when the form has no such input. Names match without case,
+ * and a path matches its first part that is an input ("Addresses[1].City" and "$.addresses" go to "addresses";
+ * "dto.Email" to "email"). The one rule every server message is matched by.
+ */
+export declare function matchInputName(name: string, inputNames: readonly string[]): string | undefined;
+/**
+ * Puts a server's messages on the inputs they name, by `matchInputName`. Messages that match no input are returned in
+ * `others`, for the form's message.
  */
 export declare function matchFieldErrors(errors: Record<string, string> | undefined, inputNames: readonly string[]): {
     fields: FormErrors;
     others: string[];
 };
+/**
+ * A failed answer as what a form shows, through the one path a 400's field errors already take: every message the server
+ * put on an input (`inputName`, several named with "|") goes to that input, every other message - including one naming an
+ * input this form does not have - goes under the form, and nothing is shown twice. `message` is `null` when the inputs
+ * carry it all. An answer that explains nothing falls back to a message for its HTTP status; that is the only time our
+ * own wording is shown.
+ *
+ * @example
+ * const { errors, message } = formErrorsFromResult(answer, store.inputs.map(params => params.name));
+ * store.setErrors(errors, message);
+ */
+export declare function formErrorsFromResult(answer: ApiResult, inputNames: readonly string[]): {
+    errors: FormErrors;
+    message: string | null;
+};