@sincpro/web-ui 1.5.0 → 1.7.0

package/dist/primitives/table/EditableTable.js

@@ -2,15 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useUiCopy } from "../../foundations/copy.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
+import { ControlStateContext } from "../../foundations/form.js";
 import { pathKey, pileIsOpen, pileItems, pilesOf, } from "../../foundations/grouping.js";
 import { HANDHELD_WIDTH } from "../../foundations/layout.js";
 import { stickyTop, useScrollBox } from "../../foundations/sticky.js";
 import { IconButton } from "../button/Button.js";
-import { NoteCard } from "../field/note.js";
+import { NoteCard, NoteRegistryContext, } from "../field/note.js";
 import { Flag } from "../notice/Flag.js";
+import { useRowWindow } from "./rowWindow.js";
 import { HEADER_TEXT } from "./Table.js";
-import { GripVertical, Plus, Trash2 } from "lucide-react";
-import { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { AlertCircle, GripVertical, Plus, Trash2 } from "lucide-react";
+import { Fragment, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { useKeyboard } from "react-aria";
 /** The lines each section heads: the rows after it up to the next section. Notes do not
  *  cut a section, and are not lines. */
@@ -52,6 +54,30 @@ function says(node) {
 function pileTag(pile, locale) {
     return (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "shrink-0 text-micro text-muted", children: pile.field }), _jsx("span", { className: "truncate text-micro font-medium text-ink", children: pile.label }), _jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-line-strong bg-ink/5 px-2 py-0.5 text-micro tabular-nums text-muted", children: pile.count.toLocaleString(locale) })] }));
 }
+/** The note a flag stands for, as the record lists it. */
+function noteOf(said) {
+    return {
+        tone: said.tone,
+        label: said.label,
+        ...(said.detail === undefined ? {} : { detail: said.detail }),
+    };
+}
+/** A cell's value as words, when it is words — what a note says it belongs to when the row
+ *  is not drawn to read it from. */
+function plainText(node) {
+    return typeof node === "string" || typeof node === "number"
+        ? String(node).slice(0, 60)
+        : "";
+}
+/** The ids of the notes a row registers with its record — one for the row, one per cell. */
+const rowNoteId = (rowId) => `flag-${rowId}`;
+const cellNoteId = (rowId, columnId) => `flag-${rowId}-${columnId}`;
+/** A cell's error, under its value: an icon and the sentence, in danger — the same shape as
+ *  a field's. No `role="alert"`: errors that arrive with a save land on many rows at once,
+ *  and each would interrupt the others; the control is described by it instead. */
+function CellError({ id, numeric, children, }) {
+    return (_jsxs("span", { id: id, className: `mt-1 flex items-start gap-1 text-left text-micro font-normal whitespace-normal text-danger ${numeric === true ? "justify-end" : ""}`, children: [_jsx(AlertCircle, { "aria-hidden": true, className: "mt-px size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "min-w-0", children: children })] }));
+}
 /** The focus ring of an operable row: drawn on the row, inset, so it is not cut by the
  *  box and does not move the cells. */
 const RING = "outline-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary forced-colors:focus-visible:outline-[Highlight]";
@@ -110,7 +136,7 @@ function ownsEnter(target) {
  * of a new record in `DataTable`: one keyboard model, three shapes. Exported for that
  * family sibling only; it is not in the barrel.
  */
-export function EditRow({ as, rowId, rowRef, editable, editing, tabbable, className, onStart, onCommit, onCancel, onMove, onFocusRow, onTabOut, children, }) {
+export function EditRow({ as, rowId, rowRef, editable, editing, tabbable, className, onStart, onCommit, onCancel, onMove, onFocusRow, onTabOut, windowed, children, }) {
     const leaving = useRef(null);
     const stay = () => {
         if (leaving.current !== null)
@@ -218,7 +244,24 @@ export function EditRow({ as, rowId, rowRef, editable, editing, tabbable, classN
         className,
         "data-row-id": rowId,
     };
-    return as === "li" ? (_jsx("li", { ref: rowRef, ...props, children: children })) : (_jsx("tr", { ref: rowRef, ...props, children: children }));
+    if (windowed !== undefined) {
+        /* The row that holds the focus stays drawn wherever it scrolls: a control being written
+           in must not be unmounted under the person's hands. */
+        const own = props.onFocus;
+        props.onFocus = (event) => {
+            windowed.onFocus();
+            own?.(event);
+        };
+    }
+    return as === "li" ? (_jsx("li", { ref: rowRef, ...props, children: children })) : (_jsx("tr", { ref: (node) => {
+            rowRef(node);
+            windowed?.ref(node);
+        }, ...(windowed === undefined
+            ? {}
+            : {
+                "data-index": windowed["data-index"],
+                "aria-rowindex": windowed["aria-rowindex"],
+            }), ...props, children: children }));
 }
 /**
  * A table whose rows are edited in place, one row at a time.
@@ -240,19 +283,60 @@ totals, empty, grouping,
 /** El total de una columna DENTRO de un montón, ya formateado. Lo calcula quien
  *  compone, por el mismo motivo que `totals`: sumar significa cosas distintas
  *  según el dominio, y un porcentaje se promedia, no se suma. */
-groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReorder, }) {
+groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReorder, cellState, rowState, }) {
     const copy = useUiCopy();
     const bandOf = (row) => bands?.kind(row) ?? null;
+    const uid = useId();
+    /* A mark, and —in a record— its card, which registers the note with the record. */
+    const marked = (said, noteId, withCard) => (_jsxs(_Fragment, { children: [_jsx(Flag, { tone: said.tone, label: said.label, children: said.detail }), withCard ? (_jsx(NoteCard, { id: noteId, ...(said.owner === undefined ? {} : { owner: said.owner }), note: noteOf(said) })) : null] }));
     /* The row's mark, before its first value — and, in a record's margin, its card. */
     const flagOf = (row, withCard = false) => {
         const said = flag?.(row) ?? null;
-        if (said === null)
-            return null;
-        return (_jsxs(_Fragment, { children: [_jsx(Flag, { tone: said.tone, label: said.label, children: said.detail }), withCard ? (_jsx(NoteCard, { id: `flag-${getRowId(row)}`, ...(said.owner === undefined ? {} : { owner: said.owner }), note: {
-                        tone: said.tone,
-                        label: said.label,
-                        ...(said.detail === undefined ? {} : { detail: said.detail }),
-                    } })) : null] }));
+        return said === null ? null : marked(said, rowNoteId(getRowId(row)), withCard);
+    };
+    /* What the backend says of each cell on each row. A hidden cell says nothing else: no
+       error and no warning about a value that is not there. */
+    const stateOf = (row, column) => {
+        const said = cellState?.(row, column.id) ?? null;
+        return said?.hidden === true ? { hidden: true } : said;
+    };
+    const locked = (row) => rowState?.(row)?.readonly === true;
+    /* Whether a cell becomes a control while its row is edited. */
+    const writes = (row, column, state) => editable &&
+        column.edit !== undefined &&
+        state?.hidden !== true &&
+        state?.readonly !== true &&
+        !locked(row);
+    /* Ids built from a row id: `aria-describedby` is a list split on spaces, so an id that
+       carries one would describe the control with two ids that do not exist. */
+    const cellId = (rowId, columnId, what) => `${uid}-${rowId.replace(/[^\w-]/g, "_")}-${columnId.replace(/[^\w-]/g, "_")}-${what}`;
+    const cellFlagOf = (row, column, state, withCard = false) => {
+        const said = state?.flag ?? null;
+        return said === null
+            ? null
+            : marked(said, cellNoteId(getRowId(row), column.id), withCard);
+    };
+    /* The control of a cell, wired through the form contract: its error and «required» reach
+       whatever control the column wrote — the package's or the application's own. */
+    const controlOf = (row, column, state, set) => {
+        const id = getRowId(row);
+        const error = state?.error ?? null;
+        const required = state?.required === true;
+        const describedBy = [
+            error === null ? null : cellId(id, column.id, "error"),
+            required ? cellId(id, column.id, "required") : null,
+        ]
+            .filter((one) => one !== null)
+            .join(" ");
+        return (_jsx(ControlStateContext, { value: {
+                ...(describedBy === "" ? {} : { describedBy }),
+                invalid: error !== null,
+            }, children: required ? (_jsxs("span", { className: "flex min-w-0 items-start gap-1", children: [_jsx("span", { className: "min-w-0 flex-1", children: column.edit?.(row, set) }), _jsx("span", { "aria-hidden": true, className: "pt-1 text-meta text-ink", children: "*" }), _jsx("span", { id: cellId(id, column.id, "required"), className: "sr-only", children: copy.field.required })] })) : (column.edit?.(row, set)) }));
+    };
+    /* The error of a cell, under its value — read with the cell, and describing its control. */
+    const errorOf = (row, column, state) => {
+        const error = state?.error ?? null;
+        return error === null ? null : (_jsx(CellError, { id: cellId(getRowId(row), column.id, "error"), numeric: column.numeric, children: error }));
     };
     const underSection = useMemo(() => (bands === undefined ? null : sectionLines(rows, getRowId, bands.kind)), [rows, bands, getRowId]);
     /* Where a band's text stops: the first column with something of its own on that row. */
@@ -282,6 +366,7 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
     /* The id `onAdd` returned, until that row shows up in `rows` and can be opened. */
     const [arriving, setArriving] = useState(null);
     const addButton = useRef(null);
+    const rowById = useMemo(() => new Map(rows.map((row) => [getRowId(row), row])), [rows, getRowId]);
     /* La secuencia que se dibuja: montones y filas intercalados. Sin agrupado, las
        filas tal cual — una tabla que no agrupa no paga nada por poder hacerlo. */
     const drawn = useMemo(() => {
@@ -328,6 +413,20 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
         return () => watch.disconnect();
     }, [layout]);
     const stacked = layout === "stacked" || (layout === "auto" && narrow);
+    /* Past a few hundred rows only the ones in view are drawn — see `rowWindow.tsx`. Measured
+       at 2,000 lines, drawing them all cost a quarter of a second per keystroke in the row
+       being written: every row re-rendered for one letter. The window counts what is DRAWN —
+       group bands included, folded rows left out. The cards of a phone are not windowed: a
+       phone does not hold a document of two thousand lines being written. */
+    const view = useRowWindow({
+        count: stacked ? 0 : drawn.length,
+        getKey: (index) => {
+            const entry = drawn[index];
+            if (entry?.pile !== undefined)
+                return `pile:${pathKey(entry.pile.path)}`;
+            return entry?.row === undefined ? String(index) : getRowId(entry.row);
+        },
+    });
     const editable = onChange !== undefined;
     /* A card that opens the consumer's form is operable even with nothing to edit in
        place: it has a tab stop, takes Enter and answers a press. */
@@ -341,7 +440,68 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
     const stop = active !== null && order.includes(active) ? active : (order[0] ?? null);
     /* REORDER — a grip at the start of each row. Dragged, the row shows where it would land (a
        line over the row it goes in front of); Alt + ↑ / ↓ on the grip does the same by keyboard. */
+    /* The notes of the rows the window does not draw. A drawn row's mark registers its note
+       with the record (`NoteCard`); one scrolled out of the window would vanish from the
+       record's activity — «2 avisos» for a document that has nine. The table registers those
+       itself, and «take me there» brings the row into the window. Every render, like a
+       `NoteCard`: a drawn row's card takes over its note, and gives it back when it leaves. */
+    const registry = useContext(NoteRegistryContext);
+    const ownNotes = useRef(new Set());
+    useLayoutEffect(() => {
+        if (registry === null)
+            return;
+        const now = new Set();
+        const theirs = new Set();
+        if (view.on) {
+            const inWindow = new Set(view.rows.flatMap((slot) => {
+                const row = drawn[slot.index]?.row;
+                return row === undefined ? [] : [getRowId(row)];
+            }));
+            for (const [index, entry] of drawn.entries()) {
+                const row = entry.row;
+                if (row === undefined || bandOf(row) !== null)
+                    continue;
+                const id = getRowId(row);
+                const said = [];
+                const own = flag?.(row) ?? null;
+                if (own !== null)
+                    said.push({ noteId: rowNoteId(id), flag: own });
+                for (const column of columns) {
+                    const cellFlag = stateOf(row, column)?.flag ?? null;
+                    if (cellFlag !== null)
+                        said.push({ noteId: cellNoteId(id, column.id), flag: cellFlag });
+                }
+                for (const one of said) {
+                    if (inWindow.has(id)) {
+                        theirs.add(one.noteId);
+                        continue;
+                    }
+                    registry.put({
+                        id: one.noteId,
+                        note: noteOf(one.flag),
+                        owner: one.flag.owner ?? plainText(columns[0]?.render(row)),
+                        anchor: () => {
+                            view.reveal(index);
+                            return null;
+                        },
+                    });
+                    now.add(one.noteId);
+                }
+            }
+        }
+        for (const noteId of ownNotes.current) {
+            if (!now.has(noteId) && !theirs.has(noteId))
+                registry.drop(noteId);
+        }
+        ownNotes.current = now;
+    });
+    useLayoutEffect(() => () => {
+        for (const noteId of ownNotes.current)
+            registry?.drop(noteId);
+    }, [registry]);
     const reorderable = onReorder !== undefined && grouping === undefined && !stacked;
+    /* Every cell of a row, the grip and the trash: what a spacer row spans. */
+    const width = columns.length + (onRemove === undefined ? 0 : 1) + (reorderable ? 1 : 0);
     /* A ref and not state: `dragover` can arrive before React re-renders after `dragstart`. */
     const dragged = useRef(null);
     const [landing, setLanding] = useState(undefined);
@@ -384,17 +544,34 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
                 dragged.current = null;
                 setLanding(undefined);
             }, className: "flex cursor-grab items-center rounded-control p-0.5 text-muted opacity-40 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 hover:text-ink focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-primary active:cursor-grabbing", children: _jsx(GripVertical, { "aria-hidden": true, className: "size-(--size-icon-sm)", strokeWidth: 2 }) }) }));
+    /* The focus a row is waiting for, once it is drawn: opened by the keyboard (its first or
+       last control), or reached by a jump (`Home`, `End`) past what the window draws. Every
+       render and not on `editing` alone: a row outside the window shows up a render or two
+       after it was asked for. */
+    const focusWhenDrawn = useRef(null);
+    const indexOf = (id) => drawn.findIndex((entry) => entry.row !== undefined && getRowId(entry.row) === id);
     useEffect(() => {
         const target = focusOnOpen.current;
-        if (target === null || target.id !== editing)
+        if (target !== null && target.id === editing) {
+            const node = rowNodes.current.get(target.id);
+            if (node === undefined) {
+                view.reveal(indexOf(target.id));
+                return;
+            }
+            focusOnOpen.current = null;
+            const control = target.at === "last" ? lastControl(node) : firstControl(node);
+            (control ?? node).focus();
+            return;
+        }
+        const waiting = focusWhenDrawn.current;
+        if (waiting === null)
             return;
-        focusOnOpen.current = null;
-        const node = rowNodes.current.get(target.id);
+        const node = rowNodes.current.get(waiting);
         if (node === undefined)
             return;
-        const control = target.at === "last" ? lastControl(node) : firstControl(node);
-        (control ?? node).focus();
-    }, [editing]);
+        focusWhenDrawn.current = null;
+        node.focus();
+    });
     const start = (id, row, viaKeyboard, { at = "first", added = false } = {}) => {
         /* A row just added is written where it appeared, card or not: it was added in place
            precisely so that it would not open somewhere else. */
@@ -403,6 +580,11 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
             onOpen?.(id);
             return;
         }
+        /* Read, not written: the row keeps the focus and opens nothing. */
+        if (locked(row)) {
+            setActive(id);
+            return;
+        }
         before.current = { id, row, touched: false, added };
         focusOnOpen.current = viaKeyboard ? { id, at } : null;
         setActive(id);
@@ -480,7 +662,18 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
     const tabOut = (from, direction) => {
         const was = before.current;
         const blank = was !== null && was.id === from && was.added && !was.touched;
-        const target = tabTarget(order, from, direction, { canAdd: onAdd !== undefined, blank });
+        /* `Tab` walks the rows that can be written: a locked one is passed over, as a
+           read-only field is in a form. */
+        const writable = rowState === undefined
+            ? order
+            : order.filter((id) => {
+                const row = rowById.get(id);
+                return id === from || row === undefined || !locked(row);
+            });
+        const target = tabTarget(writable, from, direction, {
+            canAdd: onAdd !== undefined,
+            blank,
+        });
         if (target.kind === "leave")
             return false;
         commit(from, false);
@@ -488,7 +681,7 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
             add();
             return true;
         }
-        const row = rows.find((r) => getRowId(r) === target.id);
+        const row = rowById.get(target.id);
         if (row === undefined)
             return false;
         start(target.id, row, true, { at: direction === "next" ? "first" : "last" });
@@ -532,7 +725,13 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
         if (id === undefined)
             return;
         setActive(id);
-        rowNodes.current.get(id)?.focus();
+        const node = rowNodes.current.get(id);
+        if (node !== undefined) {
+            node.focus();
+            return;
+        }
+        focusWhenDrawn.current = id;
+        view.reveal(indexOf(id));
     };
     /* ── the stacked list: one card per row, below `--container-handheld` ── */
     const places = stackPlaces(columns);
@@ -546,7 +745,9 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
         const id = getRowId(row);
         const isEditing = editing === id;
         const set = setter(id);
-        const parts = details.flatMap((c) => {
+        const states = new Map(columns.map((c) => [c.id, stateOf(row, c)]));
+        const shown = (c) => states.get(c.id)?.hidden !== true;
+        const parts = details.filter(shown).flatMap((c) => {
             const said = c.brief === undefined ? null : c.brief(row);
             if (c.brief !== undefined)
                 return says(said) ? [{ id: c.id, node: said }] : [];
@@ -557,15 +758,28 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
                 },
             ];
         });
-        const controls = editable && isEditing ? columns.filter((c) => c.edit !== undefined) : [];
-        return (_jsxs(EditRow, { as: "li", ...rowWiring(id, row), className: `group/row flex min-w-0 flex-col gap-1 rounded-control border-b border-line ${pad} ${isEditing ? "bg-primary/5" : "hover:bg-ink/4"} ${operable ? RING : ""} ${operable && !isEditing ? (opens ? "cursor-pointer" : "cursor-text") : ""}`, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [flagOf(row), _jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-meta text-ink", children: titles.map((c) => (_jsx("div", { className: "min-w-0", children: c.render(row) }, c.id))) }), trails.map((c) => (_jsx("div", { className: "shrink-0", children: c.render(row) }, c.id))), isEditing && onRemove !== undefined ? (_jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", onClick: () => onRemove(id) })) : null] }), parts.length === 0 && amounts.length === 0 ? null : (_jsxs("div", { className: "flex min-w-0 items-baseline gap-3 text-meta", children: [_jsx("span", { className: "min-w-0 flex-1 text-muted tabular-nums", children: parts.map((p, i) => (_jsxs(Fragment, { children: [i > 0 ? " · " : null, p.node] }, p.id))) }), amounts.map((c) => (
+        const controls = isEditing
+            ? columns.filter((c) => writes(row, c, states.get(c.id) ?? null))
+            : [];
+        /* The errors of the cells that are not a control right now: under the card. A control
+           carries its own, under it. */
+        const loose = columns.filter((c) => !controls.includes(c) && (states.get(c.id)?.error ?? null) !== null);
+        return (_jsxs(EditRow, { as: "li", ...rowWiring(id, row), className: `group/row flex min-w-0 flex-col gap-1 rounded-control border-b border-line ${pad} ${isEditing ? "bg-primary/5" : "hover:bg-ink/4"} ${operable ? RING : ""} ${operable && !isEditing
+                ? opens
+                    ? "cursor-pointer"
+                    : locked(row)
+                        ? ""
+                        : "cursor-text"
+                : ""}`, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [flagOf(row), columns.map((c) => (_jsx(Fragment, { children: cellFlagOf(row, c, states.get(c.id) ?? null) }, c.id))), _jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-meta text-ink", children: titles.filter(shown).map((c) => (_jsx("div", { className: "min-w-0", children: c.render(row) }, c.id))) }), trails.filter(shown).map((c) => (_jsx("div", { className: "shrink-0", children: c.render(row) }, c.id))), isEditing && onRemove !== undefined ? (_jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", onClick: () => onRemove(id) })) : null] }), parts.length === 0 && amounts.length === 0 ? null : (_jsxs("div", { className: "flex min-w-0 items-baseline gap-3 text-meta", children: [_jsx("span", { className: "min-w-0 flex-1 text-muted tabular-nums", children: parts.map((p, i) => (_jsxs(Fragment, { children: [i > 0 ? " · " : null, p.node] }, p.id))) }), amounts.filter(shown).map((c) => (
                         /* The amount is read by its figure on screen and by its name aloud: a
                            lone «Bs. 1.296,00» at the end of a card does not say what it is. */
                         _jsxs("span", { className: "shrink-0 text-right font-medium whitespace-nowrap text-ink tabular-nums", children: [_jsxs("span", { className: "sr-only", children: [c.header, " "] }), c.render(row)] }, c.id)))] })), controls.length === 0 ? null : (
                 /* Each control under the column's name: a cell had the header above it, a
                    card has nothing, and a number box that does not say what it holds is a
                    guess. The name is drawn for the eye; the control carries its own label. */
-                _jsx("div", { className: "grid grid-cols-2 gap-x-3 gap-y-2 pt-1.5", children: controls.map((c) => (_jsxs("div", { "data-edit": "", className: `flex min-w-0 flex-col gap-1 ${c.numeric === true ? "" : "col-span-2"}`, children: [_jsx("span", { "aria-hidden": "true", className: "text-micro text-muted", children: c.header }), c.edit?.(row, set)] }, c.id))) }))] }, id));
+                _jsx("div", { className: "grid grid-cols-2 gap-x-3 gap-y-2 pt-1.5", children: controls.map((c) => (_jsxs("div", { "data-edit": "", className: `flex min-w-0 flex-col gap-1 ${c.numeric === true ? "" : "col-span-2"}`, children: [_jsx("span", { "aria-hidden": "true", className: "text-micro text-muted", children: c.header }), controlOf(row, c, states.get(c.id) ?? null, set), errorOf(row, c, states.get(c.id) ?? null)] }, c.id))) })), loose.length === 0 ? null : (
+                /* Under a card there is no column to stand under: each error says its column. */
+                _jsx("div", { className: "flex flex-col", children: loose.map((c) => (_jsxs(CellError, { id: cellId(id, c.id, "error"), children: [c.header, ": ", states.get(c.id)?.error] }, c.id))) }))] }, id));
     };
     /* A section or a note on a phone: the band and, for a section, what it adds up to in
        the card's amount; editing, its control under it. */
@@ -602,11 +816,13 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
                         return null;
                     return (_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-meta", children: [_jsx("dt", { className: "text-muted", children: c.header }), _jsx("dd", { className: "font-semibold text-ink tabular-nums", children: total })] }, c.id));
                 }) }))] }));
-    return (_jsxs("div", { ref: frame, className: "min-w-0", children: [_jsx("div", { ref: box.ref, tabIndex: box.tabIndex, className: `min-w-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary ${box.className}`, style: box.style, children: stacked ? (list) : (_jsxs("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", children: [_jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsxs("tr", { children: [reorderable ? _jsx("td", { className: "w-0 border-b border-line-strong" }) : null, columns.map((c) => c.header === "" ? (_jsx("td", { className: "w-0 border-b border-line-strong" }, c.id)) : (_jsx("th", { scope: "col", style: c.width === undefined ? undefined : { width: c.width }, 
+    return (_jsxs("div", { ref: frame, className: "min-w-0", children: [_jsx("div", { ref: box.ref, tabIndex: box.tabIndex, className: `min-w-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary ${box.className}`, style: box.style, children: stacked ? (list) : (_jsxs("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", ...(view.on
+                        ? { "aria-rowcount": 1 + drawn.length + (totals === undefined ? 0 : 1) }
+                        : {}), children: [_jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsxs("tr", { ...(view.on ? { "aria-rowindex": 1 } : {}), children: [reorderable ? _jsx("td", { className: "w-0 border-b border-line-strong" }) : null, columns.map((c) => c.header === "" ? (_jsx("td", { className: "w-0 border-b border-line-strong" }, c.id)) : (_jsx("th", { scope: "col", style: c.width === undefined ? undefined : { width: c.width }, 
                                         /* A column of figures takes its figures' width (`w-0` in an auto
                                            table is «as narrow as its content») and the text takes the rest:
                                            the product name was cut while «Cantidad» had room for ten digits. */
-                                        className: `border-b border-line-strong ${HEADER_TEXT} ${cell} ${c.numeric === true ? "text-right" : "text-left"} ${c.numeric === true && c.width === undefined ? "w-0" : ""}`, children: c.header }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "w-0 border-b border-line-strong" }))] }) }), _jsx("tbody", { ...(reorderable
+                                        className: `border-b border-line-strong ${HEADER_TEXT} ${cell} ${c.numeric === true ? "text-right" : "text-left"} ${c.numeric === true && c.width === undefined ? "w-0" : ""}`, children: c.header }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "w-0 border-b border-line-strong" }))] }) }), _jsxs("tbody", { ref: view.body.ref, ...(reorderable
                                 ? {
                                     onDragOver: overRow,
                                     onDrop: (event) => {
@@ -617,60 +833,83 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
                                         setLanding(undefined);
                                     },
                                 }
-                                : {}), children: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length +
-                                        (onRemove === undefined ? 0 : 1) +
-                                        (reorderable ? 1 : 0), className: `text-meta text-muted italic ${cell}`, children: emptyText }) })) : (drawn.map((entry) => {
-                                if (entry.pile !== undefined) {
-                                    const pile = entry.pile;
-                                    const inside = pile.piles.length === 0 ? pile.items : pileItems(pile.piles);
-                                    return (
-                                    /* La banda respeta la cuadrícula: el rótulo en la primera
-                                     columna y cada total bajo la suya. Un total en un rincón
-                                     obliga a buscar de qué columna es; alineado no hay nada que
-                                     buscar. */
-                                    _jsxs("tr", { children: [reorderable ? _jsx("td", { className: "w-0 bg-ground" }) : null, columns.map((c, ci) => (_jsx("td", { className: `bg-ground text-meta ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, style: ci === 0 && pile.depth > 0
-                                                    ? {
-                                                        paddingLeft: `calc(var(--spacing-indent) * ${pile.depth} + 0.625rem)`,
-                                                    }
-                                                    : undefined, children: ci === 0
-                                                    ? pileTag(pile, copy.locale)
-                                                    : (groupTotal?.(c, inside) ?? null) }, c.id))), onRemove === undefined ? null : _jsx("td", { className: "w-0 bg-ground" })] }, `pile:${pathKey(pile.path)}`));
-                                }
-                                const row = entry.row;
-                                const id = getRowId(row);
-                                const isEditing = editing === id;
-                                const band = bandOf(row);
-                                if (band !== null) {
-                                    const { span, figures } = bandFigures(row);
-                                    const bandWash = isEditing
-                                        ? "bg-primary/5"
-                                        : band === "section"
-                                            ? "bg-ground group-hover/row:bg-ink/6"
-                                            : "group-hover/row:bg-ink/4";
-                                    const bandMark = `border-b border-line first:rounded-l-control last:rounded-r-control ${bandWash}`;
-                                    const control = isEditing && editable && bands?.edit !== undefined;
-                                    return (_jsxs(EditRow, { as: "tr", ...rowWiring(id, row), className: `group/row ${editable ? RING : ""} ${editable && !isEditing ? "cursor-text" : ""}`, children: [reorderable ? grip(id, bandMark) : null, _jsx("td", { colSpan: span, ...(control ? { "data-edit": "" } : {}), className: `text-meta ${bandMark} ${lineOver(id)} ${cell} ${band === "section"
-                                                    ? "font-semibold text-ink"
-                                                    : "text-muted italic"}`, children: control ? bands?.edit?.(row, setter(id)) : bands?.render(row) }), columns.slice(span).map((c, i) => (_jsx("td", { className: `text-meta text-ink ${bandMark} ${cell} ${c.numeric === true
-                                                    ? "text-right font-semibold tabular-nums"
-                                                    : ""}`, children: figures[span + i] ?? null }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: `w-0 py-1 pr-2 pl-1 align-middle ${bandMark}`, children: _jsx("span", { className: "flex opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 group-focus-visible/row:opacity-100 focus-within:opacity-100", onClick: (e) => e.stopPropagation(), children: _jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", ...(editable && stop !== id ? { tabIndex: -1 } : {}), onClick: () => onRemove(id) }) }) }))] }, id));
-                                }
-                                /* The wash lives on the cells. A background on the row paints
-                                 edge to edge, and `border-collapse` would ignore a radius. */
-                                const wash = isEditing ? "bg-primary/5" : "group-hover/row:bg-ink/4";
-                                const mark = `border-b border-line first:rounded-l-control last:rounded-r-control ${wash}`;
-                                const set = setter(id);
-                                return (_jsxs(EditRow, { as: "tr", ...rowWiring(id, row), 
-                                    /* The focus ring is drawn on the row, inset, so it is not cut by
-                                     the box and does not move the cells. */
-                                    className: `group/row ${editable ? RING : ""} ${editable && !isEditing ? "cursor-text" : ""}`, children: [reorderable ? grip(id, mark) : null, columns.map((c, ci) => {
-                                            const control = isEditing && c.edit !== undefined && editable;
-                                            /* Not `mark`: that name is the row's border and wash, above. Shadowed,
-                                               the cells were drawn with the class «null» — no hairline, no hover. */
-                                            const flagged = ci === 0 ? flagOf(row, true) : null;
-                                            return (_jsx("td", { ...(control ? { "data-edit": "" } : {}), className: `text-meta text-ink ${mark} ${lineOver(id)} ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: flagged === null ? (control ? (c.edit?.(row, set)) : (c.render(row))) : (_jsxs("span", { className: "flex min-w-0 items-start gap-1.5", children: [flagged, _jsx("span", { className: "min-w-0 flex-1", children: control ? c.edit?.(row, set) : c.render(row) })] })) }, c.id));
-                                        }), onRemove === undefined ? null : (_jsx("td", { className: `w-0 py-1 pr-2 pl-1 align-middle ${mark}`, children: _jsx("span", { className: "flex opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 group-focus-visible/row:opacity-100 focus-within:opacity-100", onClick: (e) => e.stopPropagation(), children: _jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", ...(editable && stop !== id ? { tabIndex: -1 } : {}), onClick: () => onRemove(id) }) }) }))] }, id));
-                            })) }), totals === undefined ? null : (_jsx("tfoot", { children: _jsxs("tr", { children: [reorderable ? _jsx("td", { className: "border-t border-line-strong" }) : null, columns.map((c, i) => (_jsx("td", { className: `border-t border-line-strong text-meta font-semibold text-ink ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: totals[i] ?? null }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "border-t border-line-strong" }))] }) }))] })) }), onAdd === undefined && (adds === undefined || adds.length === 0) ? null : (
+                                : {}), children: [rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length +
+                                            (onRemove === undefined ? 0 : 1) +
+                                            (reorderable ? 1 : 0), className: `text-meta text-muted italic ${cell}`, children: emptyText }) })) : (view.rows.flatMap((slot, at) => {
+                                    const entry = drawn[slot.index];
+                                    if (entry === undefined)
+                                        return [];
+                                    const windowed = view.windowed(slot.index);
+                                    /* What is not drawn is a spacer of its height: the rows above the window
+                                       before the first, and the gap before a row kept only because it holds
+                                       the focus. */
+                                    const gap = view.pad(at === 0 ? 0 : view.rows[at - 1].end, slot.start, width, `gap:${slot.index}`);
+                                    if (entry.pile !== undefined) {
+                                        const pile = entry.pile;
+                                        const inside = pile.piles.length === 0 ? pile.items : pileItems(pile.piles);
+                                        return [
+                                            gap,
+                                            /* La banda respeta la cuadrícula: el rótulo en la primera
+                                             columna y cada total bajo la suya. Un total en un rincón
+                                             obliga a buscar de qué columna es; alineado no hay nada que
+                                             buscar. */
+                                            _jsxs("tr", { ...windowed, children: [reorderable ? _jsx("td", { className: "w-0 bg-ground" }) : null, columns.map((c, ci) => (_jsx("td", { className: `bg-ground text-meta ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, style: ci === 0 && pile.depth > 0
+                                                            ? {
+                                                                paddingLeft: `calc(var(--spacing-indent) * ${pile.depth} + 0.625rem)`,
+                                                            }
+                                                            : undefined, children: ci === 0
+                                                            ? pileTag(pile, copy.locale)
+                                                            : (groupTotal?.(c, inside) ?? null) }, c.id))), onRemove === undefined ? null : _jsx("td", { className: "w-0 bg-ground" })] }, `pile:${pathKey(pile.path)}`),
+                                        ];
+                                    }
+                                    const row = entry.row;
+                                    const id = getRowId(row);
+                                    const isEditing = editing === id;
+                                    const band = bandOf(row);
+                                    if (band !== null) {
+                                        const { span, figures } = bandFigures(row);
+                                        const bandWash = isEditing
+                                            ? "bg-primary/5"
+                                            : band === "section"
+                                                ? "bg-ground group-hover/row:bg-ink/6"
+                                                : "group-hover/row:bg-ink/4";
+                                        const bandMark = `border-b border-line first:rounded-l-control last:rounded-r-control ${bandWash}`;
+                                        const control = isEditing && editable && bands?.edit !== undefined;
+                                        return [
+                                            gap,
+                                            _jsxs(EditRow, { as: "tr", ...rowWiring(id, row), windowed: windowed, className: `group/row ${editable ? RING : ""} ${editable && !isEditing ? "cursor-text" : ""}`, children: [reorderable ? grip(id, bandMark) : null, _jsx("td", { colSpan: span, ...(control ? { "data-edit": "" } : {}), className: `text-meta ${bandMark} ${lineOver(id)} ${cell} ${band === "section"
+                                                            ? "font-semibold text-ink"
+                                                            : "text-muted italic"}`, children: control ? bands?.edit?.(row, setter(id)) : bands?.render(row) }), columns.slice(span).map((c, i) => (_jsx("td", { className: `text-meta text-ink ${bandMark} ${cell} ${c.numeric === true
+                                                            ? "text-right font-semibold tabular-nums"
+                                                            : ""}`, children: figures[span + i] ?? null }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: `w-0 py-1 pr-2 pl-1 align-middle ${bandMark}`, children: _jsx("span", { className: "flex opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 group-focus-visible/row:opacity-100 focus-within:opacity-100", onClick: (e) => e.stopPropagation(), children: _jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", ...(editable && stop !== id ? { tabIndex: -1 } : {}), onClick: () => onRemove(id) }) }) }))] }, id),
+                                        ];
+                                    }
+                                    /* The wash lives on the cells. A background on the row paints
+                                     edge to edge, and `border-collapse` would ignore a radius. */
+                                    const wash = isEditing ? "bg-primary/5" : "group-hover/row:bg-ink/4";
+                                    const mark = `border-b border-line first:rounded-l-control last:rounded-r-control ${wash}`;
+                                    const set = setter(id);
+                                    return [
+                                        gap,
+                                        _jsxs(EditRow, { as: "tr", ...rowWiring(id, row), windowed: windowed, 
+                                            /* The focus ring is drawn on the row, inset, so it is not cut by
+                                             the box and does not move the cells. */
+                                            className: `group/row ${editable ? RING : ""} ${editable && !isEditing && !locked(row) ? "cursor-text" : ""}`, children: [reorderable ? grip(id, mark) : null, columns.map((c, ci) => {
+                                                    const state = stateOf(row, c);
+                                                    const control = isEditing && writes(row, c, state);
+                                                    /* Not `mark`: that name is the row's border and wash, above. Shadowed,
+                                                       the cells were drawn with the class «null» — no hairline, no hover. */
+                                                    const flagged = ci === 0 ? flagOf(row, true) : null;
+                                                    const cellFlag = cellFlagOf(row, c, state, true);
+                                                    const value = state?.hidden === true
+                                                        ? null
+                                                        : control
+                                                            ? controlOf(row, c, state, set)
+                                                            : c.render(row);
+                                                    return (_jsxs("td", { ...(control ? { "data-edit": "" } : {}), className: `text-meta text-ink ${mark} ${lineOver(id)} ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: [flagged === null && cellFlag === null ? (value) : (_jsxs("span", { className: "flex min-w-0 items-start gap-1.5", children: [flagged, cellFlag, _jsx("span", { className: "min-w-0 flex-1", children: value })] })), errorOf(row, c, state)] }, c.id));
+                                                }), onRemove === undefined ? null : (_jsx("td", { className: `w-0 py-1 pr-2 pl-1 align-middle ${mark}`, children: _jsx("span", { className: "flex opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 group-focus-visible/row:opacity-100 focus-within:opacity-100", onClick: (e) => e.stopPropagation(), children: _jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", ...(editable && stop !== id ? { tabIndex: -1 } : {}), onClick: () => onRemove(id) }) }) }))] }, id),
+                                    ];
+                                })), rows.length === 0 ? null : view.tail(width)] }), totals === undefined ? null : (_jsx("tfoot", { children: _jsxs("tr", { children: [reorderable ? _jsx("td", { className: "border-t border-line-strong" }) : null, columns.map((c, i) => (_jsx("td", { className: `border-t border-line-strong text-meta font-semibold text-ink ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: totals[i] ?? null }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "border-t border-line-strong" }))] }) }))] })) }), onAdd === undefined && (adds === undefined || adds.length === 0) ? null : (
             /* The «add» goes under the grid, as text, not as a button away from it:
                what is about to happen is that one more row shows up right here.
                The hover is the same inset mark as a row: the shell lines the label

package/dist/primitives/table/Table.d.ts

@@ -1,11 +1,7 @@
 import type { Tone } from "../../foundations/types.js";
 import type { WindowedRow } from "./rowWindow.js";
+import { type SortState } from "./sorting.js";
 import { type ReactNode } from "react";
-export type SortDirection = "asc" | "desc";
-export interface SortState {
-    key: string;
-    direction: SortDirection;
-}
 export declare function Table({ children, 
 /** With a height, the table scrolls on its own and the header sticks.
  *  Without a height, the page scrolls and the header goes away. */
@@ -29,14 +25,15 @@ export declare function THead({ children, rowIndex, }: {
 }): import("react").JSX.Element;
 /** A column. If it gets a `sortKey`, it can be sorted.
  *
- *  The icon is ALWAYS there, dimmed when the column is not the sorted one: an
+ *  The icon is ALWAYS there, dimmed when the column is not sorted: an
  *  indicator that only shows up once you sort does not say which columns are
  *  sortable, and then you have to try them one by one. */
 export declare function Th({ children, sortKey, sort, onSort, numeric, align, width, }: {
     children: ReactNode;
     sortKey?: string;
-    sort?: SortState | null;
-    onSort?: (next: SortState | null) => void;
+    /** The order of the set, outermost first. Empty is «as they came». */
+    sort?: readonly SortState[];
+    onSort?: (next: SortState[]) => void;
     /** Numbers align to the right: that is what lets you compare orders of
      *  magnitude without reading the figures. */
     numeric?: boolean;