@sincpro/web-ui 0.0.0-stage → 0.1.0

package/dist/primitives/table/EditableTable.js

@@ -0,0 +1,423 @@
+"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 { Plus, Trash2 } from "lucide-react";
+import { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { useKeyboard } from "react-aria";
+/**
+ * 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 `firstControl`: React Aria's
+ *  hidden form mirrors (a `<select>` behind a `Select`) 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]';
+/** 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). */
+function firstControl(row) {
+    const stops = (scope) => [...row.querySelectorAll(scope)].find((el) => el.tabIndex >= 0 && el.closest('[aria-hidden="true"], [inert]') === null) ?? null;
+    return stops(`[data-edit] :is(${FOCUSABLE})`) ?? stops(FOCUSABLE);
+}
+/** 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: one
+ * keyboard model, two shapes.
+ */
+function EditRow({ as, rowId, rowRef, editable, editing, tabbable, className, onStart, onCommit, onCancel, onMove, onFocusRow, 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.key !== "Enter" || e.nativeEvent.isComposing)
+                    return;
+                if (!(e.target instanceof Node) || !e.currentTarget.contains(e.target))
+                    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, }) {
+    const copy = useUiCopy();
+    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 takes the focus once
+       the controls exist. A click opens it without moving the focus. */
+    const focusOnOpen = 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 add = 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 id = focusOnOpen.current;
+        if (id === null || id !== editing)
+            return;
+        focusOnOpen.current = null;
+        const node = rowNodes.current.get(id);
+        if (node !== undefined)
+            (firstControl(node) ?? node).focus();
+    }, [editing]);
+    const start = (id, row, viaKeyboard) => {
+        if (opens) {
+            setActive(id);
+            onOpen?.(id);
+            return;
+        }
+        before.current = { id, row, touched: false };
+        focusOnOpen.current = viaKeyboard ? id : null;
+        setActive(id);
+        setEditing(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));
+    const commit = (id, refocus) => {
+        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();
+        const was = before.current;
+        before.current = null;
+        if (was !== null && was.id === id && was.touched)
+            onChange?.(id, was.row);
+        close(id);
+    };
+    /* 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),
+    });
+    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: [_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));
+    };
+    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)}`));
+                    }
+                    return card(entry.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;
+                                /* 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) => {
+                                            const control = isEditing && c.edit !== undefined && editable;
+                                            return (_jsx("td", { ...(control ? { "data-edit": "" } : {}), className: `text-meta text-ink ${mark} ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, 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 ? 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. */
+            _jsx("div", { className: "px-1 py-0.5", children: _jsxs("button", { type: "button", onClick: onAdd, className: `flex w-full 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 ${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 }), add] }) }))] }));
+}

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;

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

@@ -0,0 +1,38 @@
+export type ReportRowKind = "section" | "group" | "line" | "total";
+export interface ReportRow {
+    id: string;
+    label: string;
+    /** The indent. It comes from the consumer and not from the nesting, because a
+     *  second-level total lives next to its siblings and not inside them. */
+    level?: number;
+    kind?: ReportRowKind;
+    /** One value per column, in the same order. `null` is «not applicable» and is
+     *  drawn empty — different from `0`, which is an amount. */
+    values: readonly (number | null)[];
+    /** What hangs underneath when it opens. Its presence is what puts the chevron
+     *  there. */
+    children?: readonly ReportRow[];
+    /** The note on the line: what goes into this account, where the number comes
+     *  from. */
+    note?: string;
+    onClick?: () => void;
+}
+export interface ReportColumn {
+    id: string;
+    header: string;
+    /** For a percentage or a variation column, which is not formatted the same
+     *  way. */
+    format?: (value: number) => string;
+}
+export declare function ReportTable({ columns, rows, 
+/** Which groups start open. By default, none: a balance sheet with everything
+ *  expanded is four hundred lines, and what gets looked at first are the
+ *  totals. */
+defaultOpen, caption, height, }: {
+    columns: readonly ReportColumn[];
+    rows: readonly ReportRow[];
+    defaultOpen?: readonly string[];
+    /** What says what this report is about. It is read out loud and it is drawn. */
+    caption?: string;
+    height?: number;
+}): import("react").JSX.Element;

package/dist/primitives/table/ReportTable.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { currentCopyLocale, fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { byDensity, useDensity } from "../../foundations/density.js";
+import { stickyTop, useScrollBox } from "../../foundations/sticky.js";
+import { ChevronRight, Info } from "lucide-react";
+import { useState } from "react";
+/* `useGrouping: "always"` and not the default: without it, four-digit numbers
+   lose the thousands separator —`2023.04` next to `258,015.31` in en-US, or
+   `2023,04` next to `258.015,31` in es-ES— and in a column of amounts that
+   inconsistency reads as a data error. */
+function amountFormat(locale) {
+    return new Intl.NumberFormat(locale, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+        /* The assertion is because of the type definitions, not because of the
+           engine: `"always"` is ES2023 and TypeScript's `lib` still declares
+           `useGrouping` as a boolean. The runtime understands it, and a boolean here
+           is not enough — `true` still leaves four-digit numbers without a
+           separator. */
+        useGrouping: "always",
+    });
+}
+const INDENT = 1.25;
+/** The look of each kind of row. It is up here and not spread across the JSX
+ *  because it is THE decision table of the component: it reads in one go and it
+ *  changes in one place.
+ *
+ *  `cell` goes on EVERY cell and not on the `<tr>`: the first column is `sticky`
+ *  and needs a background of its own to cover what passes underneath, so a
+ *  background on the row plus another one on the pinned cell gives two layers of
+ *  the same alpha and the band comes out of two greys. The hover of a clickable
+ *  row is the same: a layer inside each cell, rounded at the two ends, so the
+ *  pinned name stays opaque and the mark does not run off the sheet. */
+const SKIN = {
+    section: { row: "", cell: "bg-ink/8", text: "font-semibold text-ink" },
+    group: { row: "", cell: "bg-surface", text: "font-medium text-ink" },
+    line: { row: "", cell: "bg-surface", text: "text-ink" },
+    total: {
+        row: "border-t border-line-strong",
+        cell: "bg-surface",
+        text: "font-semibold text-ink",
+    },
+};
+function Amount({ value, format }) {
+    if (value === null)
+        return _jsx("span", { className: "text-line-strong", children: "\u00B7" });
+    const zero = value === 0;
+    const negative = value < 0;
+    return (_jsx("span", { className: `tabular-nums ${zero ? "text-muted" : negative ? "text-bad" : "text-ink"}`, children: format === undefined ? amountFormat(currentCopyLocale()).format(value) : format(value) }));
+}
+function ReportLine({ row, columns, open, onToggle, compact, }) {
+    const copy = useUiCopy();
+    const kind = row.kind ?? "line";
+    const skin = SKIN[kind];
+    const level = row.level ?? 0;
+    const collapsible = row.children !== undefined && row.children.length > 0;
+    const isOpen = open.has(row.id);
+    const clickable = row.onClick !== undefined;
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { className: `group/row ${skin.row} ${clickable ? "cursor-pointer" : ""}`, onClick: row.onClick, children: [_jsxs("th", { scope: "row", 
+                        /* `sticky left-0` so that the account name does not go away when you
+                           scroll twelve comparison columns to the right. An amount without its
+                           line is a loose number. */
+                        className: `sticky left-0 z-10 text-left font-normal ${skin.cell} ${compact ? "py-1 pr-4 pl-2" : "py-1.5 pr-6 pl-3"}`, style: { paddingLeft: `${(compact ? 0.5 : 0.75) + level * INDENT}rem` }, children: [clickable ? (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 rounded-l-control group-hover/row:bg-primary/5" })) : null, _jsxs("span", { className: `relative flex min-w-0 items-center gap-1.5 text-meta ${skin.text}`, children: [collapsible ? (_jsx("button", { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            onToggle(row.id);
+                                        }, "aria-expanded": isOpen, "aria-label": fillCopy(isOpen ? copy.report.close : copy.report.open, {
+                                            name: row.label,
+                                        }), className: "-ml-1 inline-flex size-4 shrink-0 items-center justify-center rounded-pill text-muted transition-colors duration-(--duration-instant) hover:bg-ink/8 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: _jsx(ChevronRight, { className: `size-(--size-icon-sm) transition-transform duration-(--duration-instant) ${isOpen ? "rotate-90" : ""}`, strokeWidth: 2 }) })) : (
+                                    /* The slot for the chevron is reserved anyway: without it, a leaf
+                                       account and a collapsible one would start on different
+                                       verticals and the hierarchy would stop reading. */
+                                    _jsx("span", { className: "-ml-1 size-4 shrink-0", "aria-hidden": true })), _jsx("span", { className: "truncate", children: row.label })] })] }), columns.map((c, i) => (_jsxs("td", { className: `text-right text-meta whitespace-nowrap ${clickable ? "relative" : ""} ${skin.cell} ${compact ? "px-2 py-1" : "px-3 py-1.5"}`, children: [clickable ? (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 group-hover/row:bg-primary/5" })) : null, kind === "section" ? null : (_jsx("span", { className: "relative", children: _jsx(Amount, { value: row.values[i] ?? null, ...(c.format === undefined ? {} : { format: c.format }) }) }))] }, c.id))), _jsxs("td", { className: `w-0 ${clickable ? "relative" : ""} ${skin.cell} ${compact ? "pr-2" : "pr-3"}`, children: [clickable ? (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 rounded-r-control group-hover/row:bg-primary/5" })) : null, row.note === undefined ? null : (_jsx("span", { title: row.note, className: "relative inline-flex text-muted transition-colors duration-(--duration-instant) hover:text-ink", children: _jsx(Info, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-label": row.note }) }))] })] }), !collapsible || !isOpen
+                ? null
+                : row.children?.map((child) => (_jsx(ReportLine, { row: child, columns: columns, open: open, onToggle: onToggle, compact: compact }, child.id)))] }));
+}
+export function ReportTable({ columns, rows, 
+/** Which groups start open. By default, none: a balance sheet with everything
+ *  expanded is four hundred lines, and what gets looked at first are the
+ *  totals. */
+defaultOpen, caption, height, }) {
+    const copy = useUiCopy();
+    const d = useDensity();
+    const compact = d === "compact";
+    const [open, setOpen] = useState(() => new Set(defaultOpen ?? []));
+    const caja = useScrollBox(height === undefined ? {} : { height });
+    function toggle(id) {
+        setOpen((prev) => {
+            const n = new Set(prev);
+            if (n.has(id))
+                n.delete(id);
+            else
+                n.add(id);
+            return n;
+        });
+    }
+    return (
+    /* Misma decisión que las otras dos tablas, en el mismo lugar: con alto la
+       caja scrollea y la pila arranca de cero adentro; sin alto y entrando, no
+       hay caja y el encabezado se pega debajo de la barra de la lista. Antes
+       esto era `overflow-auto` siempre, así que el encabezado heredaba el
+       desplazamiento de la barra y quedaba empujado 68 px hacia adentro de su
+       propia caja — banda en blanco arriba y títulos de columna cayendo entre
+       las filas. */
+    _jsx("div", { ref: caja.ref, className: `min-w-0 ${caja.className}`, style: caja.style, children: _jsxs("table", { className: "w-full border-collapse px-1", children: [caption === undefined ? null : (_jsx("caption", { className: `text-left text-meta text-muted ${byDensity(d, "px-3 pb-2", "px-2 pb-1.5")}`, children: caption })), _jsx("thead", { className: "sticky z-20 bg-ground", style: stickyTop, children: _jsxs("tr", { className: "border-b border-line-strong", children: [_jsx("th", { className: `sticky left-0 z-10 bg-ground text-left ${compact ? "px-2 py-1.5" : "px-3 py-2"}`, children: _jsx("span", { className: "sr-only", children: copy.report.concept }) }), columns.map((c) => (_jsx("th", { scope: "col", className: `text-right text-meta font-medium whitespace-nowrap text-muted ${compact ? "px-2 py-1.5" : "px-3 py-2"}`, children: c.header }, c.id))), _jsx("th", { className: "w-0" })] }) }), _jsx("tbody", { children: rows.map((r) => (_jsx(ReportLine, { row: r, columns: columns, open: open, onToggle: toggle, compact: compact }, r.id))) })] }) }));
+}

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

@@ -0,0 +1,16 @@
+import type { LucideIcon } from "lucide-react";
+export interface RowAction {
+    id: string;
+    /** What is read out loud, in the `title` and in the menu. */
+    label: string;
+    icon: LucideIcon;
+    tone?: "normal" | "action" | "danger";
+    disabled?: boolean;
+    onSelect: () => void;
+}
+export declare function RowActions({ actions, 
+/** How many stay visible before the rest fall into the `⋯`. */
+inline, }: {
+    actions: readonly RowAction[];
+    inline?: number;
+}): import("react").JSX.Element;

package/dist/primitives/table/RowActions.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { IconButton } from "../button/Button.js";
+import { Menu } from "../menu/Menu.js";
+import { MoreHorizontal } from "lucide-react";
+export function RowActions({ actions, 
+/** How many stay visible before the rest fall into the `⋯`. */
+inline = 2, }) {
+    const copy = useUiCopy();
+    if (actions.length === 0)
+        return _jsx("td", { className: "w-0" });
+    /* With only one left over there is no `⋯`: a menu with a single item is one
+       extra click to reach the same button. */
+    const inlineActions = actions.length <= inline + 1 ? actions : actions.slice(0, inline);
+    const overflow = actions.slice(inlineActions.length);
+    const byId = new Map(actions.map((a) => [a.id, a]));
+    return (_jsx("td", { className: "w-0 py-1 pr-2 pl-1 align-middle whitespace-nowrap", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: "flex items-center justify-end gap-0.5 opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 focus-within:opacity-100", children: [inlineActions.map((a) => (_jsx(IconButton, { icon: a.icon, label: a.label, size: "sm", ...(a.tone === undefined ? {} : { tone: a.tone }), ...(a.disabled === undefined ? {} : { disabled: a.disabled }), onClick: a.onSelect }, a.id))), overflow.length === 0 ? null : (_jsx(Menu, { label: copy.selection.more, icon: MoreHorizontal, iconOnly: true, chevron: false, align: "end", groups: [
+                        {
+                            options: overflow.map((a) => ({
+                                id: a.id,
+                                label: a.label,
+                                icon: a.icon,
+                                ...(a.disabled === undefined ? {} : { disabled: a.disabled }),
+                            })),
+                        },
+                    ], onSelect: (id) => byId.get(id)?.onSelect() }))] }) }));
+}