@sincpro/web-ui 1.5.0 → 1.6.0

package/dist/components/lines/LineItems.d.ts

@@ -2,7 +2,7 @@ import { type FormMode } from "../../foundations/form.js";
 import { type DialogContext } from "../../primitives/dialog/Dialog.js";
 import type { FlagTone } from "../../primitives/notice/Flag.js";
 import type { DataColumn } from "../../primitives/table/DataTable.js";
-import { type EditColumn, type EditLayout } from "../../primitives/table/EditableTable.js";
+import { type EditCellState, type EditColumn, type EditLayout, type EditRowState } from "../../primitives/table/EditableTable.js";
 import { type TotalsProps, type TotalsRow } from "../../primitives/value/Totals.js";
 import { type ReactNode } from "react";
 /**
@@ -41,6 +41,8 @@ export type LineEditorState = {
 export type LineItemsProps<T> = {
     lines: readonly T[];
     columns: readonly LineItemColumn<T>[];
+    /** The line's key on this screen — LOCAL, not its id on the server: a new line gets one
+     *  when it is made and keeps it after saving. See «A line's key is local» above. */
     getLineId: (line: T) => string;
     /** How a line is named — in the removal notice, the editor's header and for the
      *  screen reader next to each row's buttons. Defaults to the first column's text. */
@@ -52,7 +54,8 @@ export type LineItemsProps<T> = {
     onChange?: (id: string, next: T) => void;
     /** A new line, already filled in the editor (or blank, without an editor). */
     onAdd?: (line: T) => void;
-    /** The blank line «Agregar una línea» starts from. Required for adding. */
+    /** The blank line «Agregar una línea» starts from. Required for adding. It carries its
+     *  local key from here — `{ key: crypto.randomUUID(), … }` — since it has no server id. */
     newLine?: () => T;
     /** A line was removed. It is gone at once; the notice offers to undo it. */
     onRemove?: (id: string) => void;
@@ -93,6 +96,14 @@ export type LineItemsProps<T> = {
         detail?: ReactNode;
         owner?: string;
     } | null;
+    /** What each cell is on each line — readonly, required, hidden, its error, its warning
+     *  («precio bajo el costo» on the price) — as the backend says it per line and field.
+     *  `EditableTable`'s `cellState`, passed through. The error reaches the cell's control as
+     *  `aria-invalid` and `aria-describedby`. */
+    cellState?: (line: T, columnId: string) => EditCellState | null;
+    /** What a whole line is: `readonly` is read in place and offers no pencil (a delivered
+     *  line). A line that should not be seen is not passed in `lines`. */
+    rowState?: (line: T) => EditRowState | null;
     /** Sections and notes among the lines. See the file's header. */
     structure?: LineStructure<T>;
     /** The lines' order is the document's (Odoo's `sequence`): a grip at the start of each line
@@ -111,4 +122,4 @@ export type LineItemsProps<T> = {
  * removing asked first, what an empty document said. One component, built on
  * `EditableTable` and `Dialog`, makes the one2many the same block everywhere.
  */
-export declare function LineItems<T>({ lines, columns, getLineId, lineLabel, mode, onChange, onAdd, newLine, onRemove, onRestore, editor, isValid, context, searchText, searchFrom, totals, layout, adding, onOpenLine, flag, structure, onReorder, visibleColumnIds, onVisibleColumnIdsChange, }: LineItemsProps<T>): import("react").JSX.Element;
+export declare function LineItems<T>({ lines, columns, getLineId, lineLabel, mode, onChange, onAdd, newLine, onRemove, onRestore, editor, isValid, context, searchText, searchFrom, totals, layout, adding, onOpenLine, flag, cellState, rowState, structure, onReorder, visibleColumnIds, onVisibleColumnIdsChange, }: LineItemsProps<T>): import("react").JSX.Element;

package/dist/components/lines/LineItems.js

@@ -38,7 +38,7 @@ function plain(v) {
  * removing asked first, what an empty document said. One component, built on
  * `EditableTable` and `Dialog`, makes the one2many the same block everywhere.
  */
-export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange, onAdd, newLine, onRemove, onRestore, editor, isValid, context, searchText, searchFrom = 8, totals, layout = "auto", adding, onOpenLine, flag, structure, onReorder, visibleColumnIds, onVisibleColumnIdsChange, }) {
+export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange, onAdd, newLine, onRemove, onRestore, editor, isValid, context, searchText, searchFrom = 8, totals, layout = "auto", adding, onOpenLine, flag, cellState, rowState, structure, onReorder, visibleColumnIds, onVisibleColumnIdsChange, }) {
     const copy = useUiCopy();
     const toast = useOptionalToast();
     const read = useFormMode(mode) === "read";
@@ -259,7 +259,7 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
                    and a trash can lit on each of twenty lines are forty invitations. They
                    fade instead of unmounting, so Tab still reaches them. Pressing them does
                    not put the row into in-place editing. */
-                _jsxs("span", { "data-line": id, className: "flex items-center justify-end gap-0.5 whitespace-nowrap opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 focus-within:opacity-100 in-data-stacked:opacity-100", onClick: (e) => e.stopPropagation(), children: [_jsx("span", { id: nameId, className: "sr-only", children: labelOf(line) }), canEdit && kindOf(line) === "line" ? (_jsx(IconButton, { icon: Pencil, label: copy.lines.edit, "aria-describedby": nameId, haspopup: "dialog", onClick: () => openLine(id, line) })) : null, canRemove ? (_jsx(IconButton, { icon: Trash2, label: copy.lines.remove, tone: "danger", "aria-describedby": nameId, onClick: () => remove(line) })) : null] }));
+                _jsxs("span", { "data-line": id, className: "flex items-center justify-end gap-0.5 whitespace-nowrap opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 focus-within:opacity-100 in-data-stacked:opacity-100", onClick: (e) => e.stopPropagation(), children: [_jsx("span", { id: nameId, className: "sr-only", children: labelOf(line) }), canEdit && kindOf(line) === "line" && rowState?.(line)?.readonly !== true ? (_jsx(IconButton, { icon: Pencil, label: copy.lines.edit, "aria-describedby": nameId, haspopup: "dialog", onClick: () => openLine(id, line) })) : null, canRemove ? (_jsx(IconButton, { icon: Trash2, label: copy.lines.remove, tone: "danger", "aria-describedby": nameId, onClick: () => remove(line) })) : null] }));
             },
         });
     }
@@ -283,7 +283,7 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
                                             invalid: false,
                                         }, children: _jsx(SearchField, { value: query, onChange: setQuery, placeholder: copy.lines.search }) })] })) : null, _jsx("span", { className: "text-meta text-muted tabular-nums", "aria-live": "polite", children: count }), columnControl.hasOptional || addButton !== null ? (_jsxs("span", { className: "ml-auto flex items-center gap-2", children: [_jsx(ColumnsMenu, { control: columnControl }), addButton] })) : null] }), _jsx(EditableTable, { rows: shown, columns: tableColumns, getRowId: getLineId, empty: lines.length === 0
                             ? copy.lines.empty
-                            : fillCopy(copy.lineItems.noMatch, { query: query.trim() }), layout: layout, ...(inline ? { onAdd: () => addInline(), addLabel: copy.lines.add } : {}), ...(bandAdds.length === 0 ? {} : { adds: bandAdds }), ...(bands === undefined ? {} : { bands }), ...(flag === undefined ? {} : { flag }), ...(onReorder === undefined || read ? {} : { onReorder }), ...(inPlace && onRemove !== undefined
+                            : fillCopy(copy.lineItems.noMatch, { query: query.trim() }), layout: layout, ...(inline ? { onAdd: () => addInline(), addLabel: copy.lines.add } : {}), ...(bandAdds.length === 0 ? {} : { adds: bandAdds }), ...(bands === undefined ? {} : { bands }), ...(flag === undefined ? {} : { flag }), ...(cellState === undefined ? {} : { cellState }), ...(rowState === undefined ? {} : { rowState }), ...(onReorder === undefined || read ? {} : { onReorder }), ...(inPlace && onRemove !== undefined
                             ? /* A blank row nobody wrote in is taken back without a notice: nobody
                                  removed anything, so there is nothing to undo. */
                                 { onDiscard: onRemove }
@@ -291,8 +291,10 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
                             ? {
                                 onOpen: (id) => {
                                     const line = lines.find((l) => getLineId(l) === id);
-                                    if (line !== undefined)
+                                    /* A read-only line opens no form to change it. */
+                                    if (line !== undefined && rowState?.(line)?.readonly !== true) {
                                         openLine(id, line);
+                                    }
                                 },
                             }
                             : {}), ...(canChange && columns.some((c) => c.edit !== undefined)

package/dist/foundations/form.d.ts

@@ -18,7 +18,24 @@ export type FieldIds = {
     invalid: boolean;
 };
 export declare const FieldIdsContext: import("react").Context<FieldIds | null>;
-/** The ids of the enclosing `Field`, resolved against the control's own props. */
+/**
+ * What a place WITHOUT a `Field` says to the control in it: what describes it and whether it
+ * is in error — no id, no label.
+ *
+ * Context: a cell of an editable table has no label of its own (its control carries an
+ * `aria-label`, the column's name) but it can be wrong — «la cantidad supera el stock» — and
+ * that has to reach the control the same way a field's error does, or the error is a red
+ * cell nobody hears. The table provides this around each control it edits; every control
+ * that reads `useFieldIds` (the package's and an application's own) gets `aria-invalid` and
+ * `aria-describedby` without the table knowing what control it is.
+ */
+export type ControlState = {
+    describedBy?: string;
+    invalid?: boolean;
+};
+export declare const ControlStateContext: import("react").Context<ControlState | null>;
+/** The ids of the enclosing `Field` — or, outside one, the state of the place the control
+ *  sits in (a cell) — resolved against the control's own props. */
 export declare function useFieldIds(own: {
     id?: string;
     describedBy?: string;

package/dist/foundations/form.js

@@ -2,14 +2,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 export const FieldIdsContext = createContext(null);
-/** The ids of the enclosing `Field`, resolved against the control's own props. */
+export const ControlStateContext = createContext(null);
+/** The ids of the enclosing `Field` — or, outside one, the state of the place the control
+ *  sits in (a cell) — resolved against the control's own props. */
 export function useFieldIds(own) {
     const field = useContext(FieldIdsContext);
+    const place = useContext(ControlStateContext);
     return {
         id: own.id ?? field?.id,
         labelledBy: field?.labelId,
-        describedBy: own.describedBy ?? field?.describedBy,
-        invalid: own.invalid ?? field?.invalid ?? false,
+        describedBy: own.describedBy ?? field?.describedBy ?? place?.describedBy,
+        invalid: own.invalid ?? field?.invalid ?? place?.invalid ?? false,
     };
 }
 const Ctx = createContext("edit");

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

@@ -1,5 +1,6 @@
 import { type Grouping } from "../../foundations/grouping.js";
 import { type FlagProps } from "../notice/Flag.js";
+import { type WindowedRow } from "./rowWindow.js";
 import { type ReactNode } from "react";
 /** Where a column goes when the row is drawn as a stacked card (a narrow box).
  *  `trail` sits at the top right, beside the title — a state, the row's buttons. */
@@ -46,6 +47,37 @@ export type EditBands<T> = {
      *  column does not add up. The lines are the ones under it until the next section. */
     total?: (column: EditColumn<T>, lines: readonly T[]) => ReactNode | null;
 };
+/** A warning drawn as a `Flag`: on a row (`flag`) or on one cell (`EditCellState.flag`). */
+export type EditFlag = Omit<FlagProps, "children"> & {
+    detail?: ReactNode;
+    owner?: string;
+};
+/**
+ * What ONE cell of one row is right now — said by whoever knows the record: the states the
+ * backend sends per line and field. Every key left out keeps the column as declared.
+ *
+ * Context: a column declares what it is for every row (`edit`), but an ERP line decides
+ * per row — a delivered line keeps its quantity, a service line has no lot, a discount is
+ * required only past a threshold. The table does not know why; it is told, cell by cell.
+ */
+export type EditCellState = {
+    /** Not written in on this row: the cell reads while the row is edited. */
+    readonly?: boolean;
+    /** Has to have a value: marked while the row is edited, and said to its control. */
+    required?: boolean;
+    /** Not there on this row (Odoo's per-row `invisible`): the cell is drawn empty. */
+    hidden?: boolean;
+    /** What is wrong with this value, said as what to put — under the value, with an icon,
+     *  and the control is `aria-invalid` and described by it. `null` when nothing is. */
+    error?: string | null;
+    /** A warning about THIS value — «precio bajo el costo» on the price, not on the line. */
+    flag?: EditFlag | null;
+};
+/** What a whole row is right now. A row that should not be seen is not passed at all. */
+export type EditRowState = {
+    /** Read, not written: walked with the arrows, never opened to edit. */
+    readonly?: boolean;
+};
 /** One more way to add, beside «add a line»: a section, a note. */
 export type EditAdd = {
     label: string;
@@ -97,7 +129,7 @@ export type RowKey = "ArrowDown" | "ArrowUp" | "Home" | "End";
  * of a new record in `DataTable`: one keyboard model, three shapes. Exported for that
  * family sibling only; it is not in the barrel.
  */
-export declare function EditRow({ as, rowId, rowRef, editable, editing, tabbable, className, onStart, onCommit, onCancel, onMove, onFocusRow, onTabOut, children, }: {
+export declare function EditRow({ as, rowId, rowRef, editable, editing, tabbable, className, onStart, onCommit, onCancel, onMove, onFocusRow, onTabOut, windowed, children, }: {
     as: "tr" | "li";
     rowId: string;
     rowRef: (node: HTMLElement | null) => void;
@@ -113,6 +145,9 @@ export declare function EditRow({ as, rowId, rowRef, editable, editing, tabbable
     /** `Tab` left the row by one of its edges. `true` = the table took it (opened another
      *  row, added one); `false` = the browser moves the focus as usual. */
     onTabOut: (direction: "next" | "prev") => boolean;
+    /** Past a few hundred rows the table draws only the ones in view (`rowWindow`): this row's
+     *  measure, its index, and the focus that keeps it drawn. */
+    windowed?: WindowedRow | undefined;
     children: ReactNode;
 }): import("react").JSX.Element;
 /**
@@ -135,15 +170,19 @@ 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, onOpen, onDiscard, bands, adds, flag, onReorder, }: {
+groupTotal, height, layout, onOpen, onDiscard, bands, adds, flag, onReorder, cellState, rowState, }: {
     rows: readonly T[];
     columns: readonly EditColumn<T>[];
+    /** The row's key on this screen, stable for as long as the row is drawn — a local key for
+     *  a row the backend has not made yet, kept after it is saved. A key that changes is a new
+     *  row to React: the row being written is unmounted and loses the focus. */
     getRowId: (row: T) => string;
     onChange?: (id: string, next: T) => void;
     onRemove?: (id: string) => void;
     /** «Add a line». Return the new row's id —or a promise of it, when the backend makes
      *  the record— and the table opens that row with the focus on its first control.
-     *  Return nothing and the row just appears, closed. */
+     *  Return nothing and the row just appears, closed. The id is the row's KEY (`getRowId`):
+     *  give a line the backend has not made a local one, and keep it after the save. */
     onAdd?: () => string | void | Promise<string | void>;
     addLabel?: string;
     totals?: readonly (ReactNode | null)[];
@@ -184,10 +223,13 @@ groupTotal, height, layout, onOpen, onDiscard, bands, adds, flag, onReorder, }:
      *  `null` for the rows with nothing to say, which should be most of them. `owner` is what
      *  the record's activity says it belongs to («Línea 3 · Impresora…»); without it, the
      *  row's first value. */
-    flag?: (row: T) => (Omit<FlagProps, "children"> & {
-        detail?: ReactNode;
-        owner?: string;
-    }) | null;
+    flag?: (row: T) => EditFlag | null;
+    /** What each cell is on each row — readonly, required, hidden, its error, its warning —
+     *  as the backend says it per line. `null` keeps the column as declared. See
+     *  `EditCellState`. */
+    cellState?: (row: T, columnId: string) => EditCellState | null;
+    /** What a whole row is: `readonly` is read, not opened. See `EditRowState`. */
+    rowState?: (row: T) => EditRowState | null;
     /** The rows have an order of their own — the lines of an order, Odoo's `sequence` — and it
      *  is changed by dragging the grip at the start of a row, or with Alt + ↑ / ↓ on it. `before`
      *  is the row it lands in front of; `null`, the end. Off while grouped (the piles decide the

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/index.d.ts

@@ -1,5 +1,5 @@
 export { type Aggregate, type DataColumn, DataTable, type DataTableCreate, type GroupColumn, } from "./DataTable.js";
-export { EditableTable, type EditAdd, type EditBands, type EditColumn, type EditLayout, sectionLines, type StackPlace, stackPlaces, type TabTarget, tabTarget, } from "./EditableTable.js";
+export { EditableTable, type EditAdd, type EditBands, type EditCellState, type EditColumn, type EditFlag, type EditLayout, type EditRowState, sectionLines, type StackPlace, stackPlaces, type TabTarget, tabTarget, } from "./EditableTable.js";
 export { PileFootLine } from "./PileFootLine.js";
 export { PivotTable, type PivotTableProps, } from "./PivotTable.js";
 export { type ReportColumn, type ReportRow, type ReportRowKind, ReportTable, } from "./ReportTable.js";

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

@@ -36,4 +36,7 @@ export declare function useRowWindow({ count, rowsBefore, getKey, }: {
     pad: (from: number, to: number, columns: number, key: string) => ReactNode;
     /** The spacer after the last drawn row. */
     tail: (columns: number) => ReactNode;
+    /** Scrolls row `index` into the window, so it gets drawn — for a jump past what is drawn
+     *  (`Home`, `End`, «take me to it»). Nothing when the window is off: every row is there. */
+    reveal: (index: number) => void;
 };

package/dist/primitives/table/rowWindow.js

@@ -173,5 +173,9 @@ export function useRowWindow({ count, rowsBefore = 1, getKey, }) {
             const end = rows.length === 0 ? 0 : rows[rows.length - 1].end;
             return spacer(total - end, columns, "\u0000tail");
         },
+        reveal: (index) => {
+            if (on && scroller !== null)
+                v.scrollToIndex(index, { align: "auto" });
+        },
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/web-ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "An enterprise web design system for business software — ERPs, back offices, management tools — in React and Tailwind: tokens, primitives, components and the two views every management screen is made of.",
   "type": "module",
   "main": "./dist/index.js",