@sincpro/web-ui 0.0.0-stage → 0.2.0

package/dist/primitives/table/EditableTable.js

@@ -0,0 +1,617 @@
+"use client";
+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 { 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 { Flag } from "../notice/Flag.js";
+import { Plus, Trash2 } from "lucide-react";
+import { Fragment, useEffect, 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. */
+export function sectionLines(rows, getRowId, kind) {
+    const out = new Map();
+    let current = null;
+    for (const row of rows) {
+        const k = kind(row);
+        if (k === "section") {
+            current = [];
+            out.set(getRowId(row), current);
+        }
+        else if (k === null)
+            current?.push(row);
+    }
+    return out;
+}
+/**
+ * Where each column goes in the stacked card, defaults resolved: a declared `stack`
+ * wins; otherwise the first undeclared column is the title (unless one was declared),
+ * the last undeclared numeric one is the amount (unless one was declared), and the rest
+ * are detail.
+ */
+export function stackPlaces(columns) {
+    const titleAt = columns.some((c) => c.stack === "title")
+        ? -1
+        : columns.findIndex((c) => c.stack === undefined);
+    const amountAt = columns.some((c) => c.stack === "amount")
+        ? -1
+        : columns.findLastIndex((c, i) => c.stack === undefined && c.numeric === true && i !== titleAt);
+    return columns.map((c, i) => c.stack ?? (i === titleAt ? "title" : i === amountAt ? "amount" : "detail"));
+}
+/** A brief that says nothing is left out of the line, separator included. */
+function says(node) {
+    return node !== null && node !== undefined && node !== false && node !== "";
+}
+/** The label of a group band — its field, its value, how many rows it holds. The same
+ *  in the table's band and the stacked list's. */
+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/70", 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 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]";
+/** What can take the focus in a row. Filtered again in `stopsIn`: React Aria's hidden form
+ *  mirrors (a `<select>` behind a `Select`, an `<input hidden>` in a date picker) match this
+ *  and are not stops. */
+const FOCUSABLE = 'input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), a[href], [tabindex]';
+/** What `Tab` stops on inside `scope` of a row: focusable, and not a hidden form mirror.
+ *
+ *  Context: NOT filtered by `aria-hidden` / `inert`. While a list is open (a tags field, a
+ *  picker) React Aria hides everything outside it that way — the rest of the row included —
+ *  and the row then looked as if its open control were its last: `Tab` added a new row from
+ *  the middle of this one. The mirrors carry their own marks instead. */
+function stopsIn(row, scope) {
+    return [...row.querySelectorAll(scope)].filter((el) => el.tabIndex >= 0 && el.closest("[hidden], [data-react-aria-prevent-focus]") === null);
+}
+/** The controls of the editable cells of a row, in tab order. */
+function editStops(row) {
+    return stopsIn(row, `[data-edit] :is(${FOCUSABLE})`);
+}
+/** The first control of a row being edited: the first one in an editable cell, else
+ *  anything focusable in the row (a column without `edit` may still hold a button). */
+export function firstControl(row) {
+    return editStops(row)[0] ?? stopsIn(row, FOCUSABLE)[0] ?? null;
+}
+/** The last control of a row being edited — where `Shift+Tab` from the next row lands. */
+function lastControl(row) {
+    return editStops(row).at(-1) ?? stopsIn(row, FOCUSABLE).at(-1) ?? null;
+}
+/**
+ * Where `Tab` past the last control (`next`) or `Shift+Tab` before the first (`prev`) of
+ * the edited row `from` goes, over the rows in the order they are drawn.
+ *
+ * Past the last row it adds one when the table can — unless `from` is itself a row just
+ * added and still blank: one more `Tab` there means «I am done», not «another blank line».
+ */
+export function tabTarget(order, from, direction, { canAdd, blank }) {
+    const at = order.indexOf(from);
+    if (at === -1)
+        return { kind: "leave" };
+    const to = order[direction === "next" ? at + 1 : at - 1];
+    if (to !== undefined)
+        return { kind: "row", id: to };
+    return direction === "next" && canAdd && !blank ? { kind: "add" } : { kind: "leave" };
+}
+/** Keys a control inside the row already answers with `Enter`: a button presses, a
+ *  link follows, a text area breaks the line, an open list picks its option. */
+function ownsEnter(target) {
+    return (target instanceof Element &&
+        target.closest('button, a[href], textarea, [role="button"], [role="combobox"][aria-expanded="true"]') !== null);
+}
+/**
+ * One body row. Its own component so that it can hold React Aria's `useKeyboard`
+ * (a hook per row) and the timer that decides whether the focus really left it.
+ * The same row is a `<tr>` in the table and an `<li>` in the stacked list — and the row
+ * 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, }) {
+    const leaving = useRef(null);
+    const stay = () => {
+        if (leaving.current !== null)
+            clearTimeout(leaving.current);
+        leaving.current = null;
+    };
+    useEffect(() => stay, []);
+    /* React Aria's `useKeyboard` stops the propagation of what it handles and lets
+       the rest through (`continuePropagation`), so an `Escape` the row did not use
+       still reaches the dialog or the drawer around the table. */
+    const { keyboardProps } = useKeyboard({
+        isDisabled: !editable,
+        onKeyDown: (e) => {
+            if (!editing) {
+                /* Only on the row itself: a link drawn inside a reading cell keeps its
+                   own `Enter`. */
+                if (e.target !== e.currentTarget)
+                    return e.continuePropagation();
+                if (e.key === "Enter" || e.key === "F2") {
+                    e.preventDefault();
+                    onStart(true);
+                    return;
+                }
+                if (e.key === "ArrowDown" ||
+                    e.key === "ArrowUp" ||
+                    e.key === "Home" ||
+                    e.key === "End") {
+                    e.preventDefault();
+                    onMove(e.key);
+                    return;
+                }
+                return e.continuePropagation();
+            }
+            if (e.key === "Escape") {
+                e.preventDefault();
+                onCancel();
+                return;
+            }
+            e.continuePropagation();
+        },
+    });
+    const props = {
+        ...keyboardProps,
+        /* `Enter` commits in the CAPTURE phase: React Aria's number field answers
+             `Enter` itself and stops it, so it would never bubble up to the row. Taking
+             it on the way down —and only from the row's own cells, not from a list
+             open in a portal— commits from any control. Focusing the row first lets
+             that field write the value it was holding (it commits on blur). */
+        onKeyDownCapture: editing
+            ? (e) => {
+                if (e.nativeEvent.isComposing)
+                    return;
+                if (!(e.target instanceof Node) || !e.currentTarget.contains(e.target))
+                    return;
+                if (e.key === "Tab") {
+                    /* Only the default is prevented, never the propagation: a combobox still
+                       hears its `Tab` and takes the option it has marked before the row moves. */
+                    const stops = editStops(e.currentTarget);
+                    const edge = e.shiftKey ? stops[0] : stops.at(-1);
+                    if (edge === undefined || !edge.contains(e.target))
+                        return;
+                    if (onTabOut(e.shiftKey ? "prev" : "next"))
+                        e.preventDefault();
+                    return;
+                }
+                if (e.key !== "Enter")
+                    return;
+                if (ownsEnter(e.target))
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
+                onCommit(true);
+            }
+            : undefined,
+        ...(editable
+            ? {
+                /* While it is being edited the row itself is not a stop: `Shift+Tab`
+                     from its first control leaves it (and commits) instead of landing on
+                     the row it is already in. */
+                tabIndex: tabbable && !editing ? 0 : -1,
+                "aria-keyshortcuts": editing ? undefined : "Enter F2",
+                onFocus: () => {
+                    stay();
+                    onFocusRow();
+                },
+                onBlur: editing
+                    ? () => {
+                        /* Commit only if the focus left the WHOLE row — and the row is
+                             not only its DOM. A `Select`'s list opens in a portal, outside
+                             the `<tr>`, so "the next focused element is not inside" would
+                             close the row the moment its list opened. The focus event of a
+                             portal still bubbles through React's tree back to this row, so
+                             the commit waits one tick: if the focus landed anywhere that
+                             belongs to the row, `onFocus` above cancels it. */
+                        stay();
+                        leaving.current = setTimeout(() => {
+                            leaving.current = null;
+                            onCommit(false);
+                        }, 0);
+                    }
+                    : undefined,
+                onClick: editing ? undefined : () => onStart(false),
+            }
+            : {}),
+        className,
+        "data-row-id": rowId,
+    };
+    return as === "li" ? (_jsx("li", { ref: rowRef, ...props, children: children })) : (_jsx("tr", { ref: rowRef, ...props, children: children }));
+}
+/**
+ * A table whose rows are edited in place, one row at a time.
+ *
+ * Mouse: touching a row opens it. Keyboard: the rows are one tab stop, the arrows walk
+ * them, `Enter` / `F2` open one, `Tab` walks its controls, `Enter` commits and `Escape`
+ * puts the row back as it was; both return the focus to the row. Leaving the row
+ * (click outside, tabbing past its last control) commits.
+ *
+ * Narrower than `--container-handheld`, each row is a stacked card (see the file's
+ * header): the same keys, and `onOpen` —when given— instead of editing in place.
+ */
+export function EditableTable({ rows, columns, getRowId, onChange, onRemove, onAdd, addLabel, 
+/** The footer with the aggregates, already formatted. `null` on the columns
+ *  that do not add up. Whoever composes computes it, because whoever composes
+ *  knows what adding up means in their domain —a percentage is not summed, it
+ *  is averaged. */
+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, }) {
+    const copy = useUiCopy();
+    const bandOf = (row) => bands?.kind(row) ?? 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] }));
+    };
+    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. */
+    const bandFigures = (row) => {
+        const lines = underSection?.get(getRowId(row)) ?? null;
+        const figures = columns.map((c) => c.onBands === true
+            ? c.render(row)
+            : lines === null
+                ? null
+                : (bands?.total?.(c, lines) ?? null));
+        const first = figures.findIndex((f, i) => columns[i]?.onBands === true || (f !== null && f !== undefined));
+        return { span: first <= 0 ? columns.length : first, figures };
+    };
+    const d = useDensity();
+    const box = useScrollBox(height === undefined ? {} : { height });
+    const [editing, setEditing] = useState(null);
+    /* The row that holds the one tab stop of the body: the last one focused. */
+    const [active, setActive] = useState(null);
+    const rowNodes = useRef(new Map());
+    /* The row as it was when editing began, to put it back on `Escape`; `touched` says
+       whether any control wrote to it since, so a cancel without changes changes nothing. */
+    const before = useRef(null);
+    /* Set when the keyboard opened the row: its first control —or its last, coming back
+       with `Shift+Tab`— takes the focus once the controls exist. A click opens it without
+       moving the focus. */
+    const focusOnOpen = useRef(null);
+    /* The id `onAdd` returned, until that row shows up in `rows` and can be opened. */
+    const [arriving, setArriving] = useState(null);
+    const addButton = useRef(null);
+    /* 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(() => {
+        const piles = pilesOf(rows, grouping);
+        if (piles === null)
+            return rows.map((row) => ({ row }));
+        const out = [];
+        const walk = (list) => {
+            for (const pile of list) {
+                out.push({ pile });
+                if (!pileIsOpen(pile, grouping))
+                    continue;
+                if (pile.piles.length > 0)
+                    walk(pile.piles);
+                else
+                    for (const row of pile.items)
+                        out.push({ row });
+            }
+        };
+        walk(piles);
+        return out;
+    }, [rows, grouping]);
+    /* The width of the box decides, not the window's: a drawer on a wide screen is as
+       narrow as a phone. Measured before paint, so a phone never sees the table first. */
+    const frame = useRef(null);
+    const [narrow, setNarrow] = useState(false);
+    useLayoutEffect(() => {
+        const el = frame.current;
+        if (layout !== "auto" || el === null)
+            return;
+        /* A box that measures zero is hidden (a closed tab): it keeps what it had. */
+        const measure = (width) => {
+            if (width > 0)
+                setNarrow(width < HANDHELD_WIDTH);
+        };
+        measure(el.getBoundingClientRect().width);
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const watch = new ResizeObserver(([entry]) => {
+            if (entry !== undefined)
+                measure(entry.contentRect.width);
+        });
+        watch.observe(el);
+        return () => watch.disconnect();
+    }, [layout]);
+    const stacked = layout === "stacked" || (layout === "auto" && narrow);
+    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. */
+    const opens = stacked && onOpen !== undefined;
+    const operable = editable || opens;
+    const cell = byDensity(d, "px-3 py-1.5", "px-2 py-1");
+    const addText = addLabel ?? copy.editable.add;
+    const emptyText = empty ?? copy.editable.empty;
+    /* The rows in the order they are drawn: what the arrows walk. */
+    const order = drawn.flatMap((entry) => entry.row === undefined ? [] : [getRowId(entry.row)]);
+    const stop = active !== null && order.includes(active) ? active : (order[0] ?? null);
+    useEffect(() => {
+        const target = focusOnOpen.current;
+        if (target === null || target.id !== editing)
+            return;
+        focusOnOpen.current = null;
+        const node = rowNodes.current.get(target.id);
+        if (node === undefined)
+            return;
+        const control = target.at === "last" ? lastControl(node) : firstControl(node);
+        (control ?? node).focus();
+    }, [editing]);
+    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. */
+        if (opens && !added && bandOf(row) === null) {
+            setActive(id);
+            onOpen?.(id);
+            return;
+        }
+        before.current = { id, row, touched: false, added };
+        focusOnOpen.current = viaKeyboard ? { id, at } : null;
+        setActive(id);
+        setEditing(id);
+    };
+    /* The added row is opened the render it appears in — which may be this one, or the one
+       after the backend answered. */
+    useEffect(() => {
+        if (arriving === null)
+            return;
+        const row = rows.find((r) => getRowId(r) === arriving);
+        if (row === undefined)
+            return;
+        setArriving(null);
+        start(arriving, row, true, { added: true });
+        /* `start` and `getRowId` are new every render; what decides is the id and the rows. */
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [arriving, rows]);
+    const add = (maker = onAdd) => {
+        if (maker === undefined)
+            return;
+        const made = maker();
+        if (typeof made === "string")
+            setArriving(made);
+        else if (made instanceof Promise) {
+            void made.then((id) => {
+                if (typeof id === "string")
+                    setArriving(id);
+            });
+        }
+    };
+    /* Keyed by the row: a commit that arrives late (the blur of the row you clicked
+       away from) must not close the row the click just opened. */
+    const close = (id) => setEditing((current) => (current === id ? null : current));
+    /* A row added and abandoned goes away. `true` when it did. */
+    const discard = (id, untouchedOnly) => {
+        const was = before.current;
+        if (was === null || was.id !== id || !was.added || onDiscard === undefined)
+            return false;
+        if (untouchedOnly && was.touched)
+            return false;
+        before.current = null;
+        close(id);
+        onDiscard(id);
+        return true;
+    };
+    const commit = (id, refocus) => {
+        if (discard(id, true)) {
+            if (refocus)
+                addButton.current?.focus();
+            return;
+        }
+        if (refocus)
+            rowNodes.current.get(id)?.focus();
+        if (before.current?.id === id)
+            before.current = null;
+        close(id);
+    };
+    const cancel = (id) => {
+        /* The focus goes back to the row FIRST: a control that writes its value on blur
+           (a number field) writes it now, and the old row is put back after it, not
+           before. */
+        rowNodes.current.get(id)?.focus();
+        if (discard(id, false)) {
+            /* The row is gone with the focus in it: «add» is where it came from. */
+            addButton.current?.focus();
+            return;
+        }
+        const was = before.current;
+        before.current = null;
+        if (was !== null && was.id === id && was.touched)
+            onChange?.(id, was.row);
+        close(id);
+    };
+    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 });
+        if (target.kind === "leave")
+            return false;
+        commit(from, false);
+        if (target.kind === "add") {
+            add();
+            return true;
+        }
+        const row = rows.find((r) => getRowId(r) === target.id);
+        if (row === undefined)
+            return false;
+        start(target.id, row, true, { at: direction === "next" ? "first" : "last" });
+        return true;
+    };
+    /* What a control writes, marking the row as touched for `Escape`. */
+    const setter = (id) => (next) => {
+        if (before.current?.id === id)
+            before.current.touched = true;
+        onChange?.(id, next);
+    };
+    /* The wiring a row needs, the same for the table's `<tr>` and the stacked `<li>`. */
+    const rowWiring = (id, row) => ({
+        rowId: id,
+        rowRef: (node) => {
+            if (node === null)
+                rowNodes.current.delete(id);
+            else
+                rowNodes.current.set(id, node);
+        },
+        editable: operable,
+        editing: editing === id,
+        tabbable: stop === id,
+        onStart: (viaKeyboard) => start(id, row, viaKeyboard),
+        onCommit: (refocus) => commit(id, refocus),
+        onCancel: () => cancel(id),
+        onMove: (key) => move(id, key),
+        onFocusRow: () => setActive(id),
+        onTabOut: (direction) => tabOut(id, direction),
+    });
+    const move = (from, key) => {
+        const at = order.indexOf(from);
+        const to = key === "Home"
+            ? 0
+            : key === "End"
+                ? order.length - 1
+                : key === "ArrowDown"
+                    ? Math.min(at + 1, order.length - 1)
+                    : Math.max(at - 1, 0);
+        const id = order[to];
+        if (id === undefined)
+            return;
+        setActive(id);
+        rowNodes.current.get(id)?.focus();
+    };
+    /* ── the stacked list: one card per row, below `--container-handheld` ── */
+    const places = stackPlaces(columns);
+    const placed = (place) => columns.filter((_, i) => places[i] === place);
+    const titles = placed("title");
+    const details = placed("detail");
+    const amounts = placed("amount");
+    const trails = placed("trail");
+    const pad = byDensity(d, "px-3 py-2.5", "px-2 py-1.5");
+    const card = (row) => {
+        const id = getRowId(row);
+        const isEditing = editing === id;
+        const set = setter(id);
+        const parts = details.flatMap((c) => {
+            const said = c.brief === undefined ? null : c.brief(row);
+            if (c.brief !== undefined)
+                return says(said) ? [{ id: c.id, node: said }] : [];
+            return [
+                {
+                    id: c.id,
+                    node: (_jsxs(_Fragment, { children: [c.header, " ", c.render(row)] })),
+                },
+            ];
+        });
+        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) => (
+                        /* 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));
+    };
+    /* 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. */
+    const bandCard = (row) => {
+        const id = getRowId(row);
+        const band = bandOf(row);
+        const isEditing = editing === id;
+        const lines = underSection?.get(id) ?? null;
+        return (_jsxs(EditRow, { as: "li", ...rowWiring(id, row), className: `flex min-w-0 flex-col gap-1.5 rounded-control border-b border-line ${pad} ${isEditing ? "bg-primary/5" : band === "section" ? "bg-ground" : ""} ${operable ? RING : ""}`, children: [_jsxs("div", { className: "flex min-w-0 items-baseline gap-3 text-meta", children: [_jsx("span", { className: `min-w-0 flex-1 ${band === "section" ? "font-semibold text-ink" : "text-muted italic"}`, children: bands?.render(row) }), lines === null
+                            ? null
+                            : amounts.map((c) => (_jsx("span", { className: "shrink-0 font-semibold text-ink tabular-nums", children: bands?.total?.(c, lines) ?? null }, c.id))), isEditing && onRemove !== undefined ? (_jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", onClick: () => onRemove(id) })) : null] }), isEditing && editable && bands?.edit !== undefined ? (_jsx("div", { "data-edit": "", children: bands.edit(row, setter(id)) })) : null] }, id));
+    };
+    const list = (_jsxs(_Fragment, { children: [_jsx("ul", { "data-stacked": "", className: "flex min-w-0 flex-col px-1", children: rows.length === 0 ? (_jsx("li", { className: `text-meta text-muted italic ${pad}`, 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 (
+                        /* The band says the group and, at the right, what its rows add up to in
+                           the column that is the card's amount: the figure under the figures. */
+                        _jsxs("li", { className: `flex min-w-0 items-center gap-3 bg-ground text-meta ${pad}`, style: pile.depth > 0
+                                ? {
+                                    paddingLeft: `calc(var(--spacing-indent) * ${pile.depth} + 0.625rem)`,
+                                }
+                                : undefined, children: [_jsx("span", { className: "min-w-0 flex-1", children: pileTag(pile, copy.locale) }), amounts.map((c) => (_jsx("span", { className: "shrink-0 text-ink tabular-nums", children: groupTotal?.(c, inside) ?? null }, c.id)))] }, `pile:${pathKey(pile.path)}`));
+                    }
+                    const row = entry.row;
+                    return bandOf(row) === null ? card(row) : bandCard(row);
+                })) }), totals === undefined ? null : (
+            /* The footer's aggregates, one per line with the column's name: under a card
+               there is no column to stand under. */
+            _jsx("dl", { className: `mx-1 flex flex-col gap-1 border-t border-line-strong ${pad}`, children: columns.map((c, i) => {
+                    const total = totals[i];
+                    if (total === null || total === undefined)
+                        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, className: `min-w-0 ${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: [columns.map((c) => (_jsx("th", { scope: "col", style: c.width === undefined ? undefined : { width: c.width }, className: `border-b border-line-strong text-meta font-medium whitespace-nowrap text-muted ${cell} ${c.numeric === true ? "text-right" : "text-left"}`, children: c.header }, c.id))), onRemove === undefined ? null : (_jsx("th", { className: "w-0 border-b border-line-strong" }))] }) }), _jsx("tbody", { children: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length + (onRemove === undefined ? 0 : 1), 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: [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: [_jsx("td", { colSpan: span, ...(control ? { "data-edit": "" } : {}), className: `text-meta ${bandMark} ${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: [columns.map((c, ci) => {
+                                            const control = isEditing && c.edit !== undefined && editable;
+                                            const mark = ci === 0 ? flagOf(row, true) : null;
+                                            return (_jsx("td", { ...(control ? { "data-edit": "" } : {}), className: `text-meta text-ink ${mark} ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: mark === null ? (control ? (c.edit?.(row, set)) : (c.render(row))) : (_jsxs("span", { className: "flex min-w-0 items-start gap-1.5", children: [mark, _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: [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
+               up with the cells, and the button itself is the rounded wash. It sits
+               outside the scroll box, so a table with its own height keeps it in view.
+               A section and a note sit beside it, quieter: the line is what is added
+               most, so it keeps the lead and the whole free width. */
+            _jsxs("div", { className: "flex flex-wrap items-center gap-x-1 px-1 py-0.5", children: [onAdd === undefined ? null : (_jsxs("button", { ref: addButton, type: "button", onClick: () => add(), className: `flex items-center gap-1.5 rounded-control text-left text-meta text-primary transition-colors duration-(--duration-instant) hover:bg-primary/5 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary ${adds === undefined || adds.length === 0 ? "w-full" : ""} ${byDensity(d, "px-3 py-1", "px-2 py-0.5")}`, children: [_jsx(Plus, { className: "size-(--size-icon-sm)", strokeWidth: 2.5, "aria-hidden": true }), addText] })), (adds ?? []).map((extra) => (_jsx("button", { type: "button", onClick: () => add(extra.onAdd), className: `rounded-control text-left text-meta text-muted transition-colors duration-(--duration-instant) hover:bg-primary/5 hover:text-primary focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary ${byDensity(d, "px-3 py-1", "px-2 py-0.5")}`, children: extra.label }, extra.label)))] }))] }));
+}

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

@@ -0,0 +1,14 @@
+import { type Pivot, type PivotKey } from "../../foundations/pivot.js";
+export type PivotTableProps = {
+    pivot: Pivot;
+    /** Qué pasa al tocar un cruce. Sin esto los números no son botones: una celda
+     *  que no lleva a ningún lado no tiene por qué prometer que sí. */
+    onCell?: (row: PivotKey, column: PivotKey) => void;
+    /** Con alto, la grilla scrollea sola y el encabezado se pega a su borde; sin
+     *  alto scrollea la página. Es la misma regla que las otras tres tablas y vive
+     *  entera en `useScrollBox`. */
+    height?: number | string;
+    /** Qué es esta grilla. Se lee en voz alta y se dibuja. */
+    caption?: string;
+};
+export declare function PivotTable({ pivot, onCell, height, caption }: PivotTableProps): import("react").JSX.Element;