@sincpro/web-ui 0.0.0-stage → 0.2.0

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() }))] }) }));
+}

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

@@ -0,0 +1,73 @@
+import type { Tone } from "../../foundations/types.js";
+import { type ReactNode } from "react";
+export interface SheetColumn {
+    id: string;
+    /** The name of the column, just as it came from the file. */
+    header: string;
+    /** The detected type, underneath the name. It is half the value of a glance:
+     *  seeing that `importe` was read as text explains the rest of the screen. */
+    type?: string;
+    numeric?: boolean;
+    width?: number;
+}
+export declare function SheetTable({ columns, rows, 
+/** The value of a cell, by index. It is a function and not a prebuilt matrix
+ *  so that the consumer can read from wherever they want without copying a
+ *  million rows into another structure. */
+value, 
+/** Which cells are painted and with what. `undefined` is unpainted, which is
+ *  the normal case — a spreadsheet with everything colored highlights
+ *  nothing. */
+tone, 
+/** What the cell says on hover: «imputado por la mediana». */
+note, height, rowLabel, band, onBandToggle, caption, onCommit, editable, onAddRow, }: {
+    columns: readonly SheetColumn[];
+    rows: number;
+    value: (row: number, column: SheetColumn, columnIndex: number) => string | number | null;
+    tone?: (row: number, column: SheetColumn, columnIndex: number) => Tone | undefined;
+    note?: (row: number, column: SheetColumn, columnIndex: number) => string | undefined;
+    /** Pixel height of the scroll box. `"auto"` grows with the rows so a
+     *  twenty-row glance is not a window with its own scrollbar. */
+    height?: number | "auto";
+    rowLabel?: (row: number) => string;
+    /**
+     * Esta fila no es una fila: es la cabecera del montón que empieza acá.
+     *
+     * Agrupar sin perder la virtualización es esto — **una banda es una fila
+     * más, de otra clase**. La alternativa era una planilla por montón, y eso
+     * son N cuadrículas con N encabezados y N scrolls para un solo conjunto.
+     *
+     * `depth` es cuán adentro está el montón. La planilla no puede recibir un
+     * árbol —está virtualizada por índice, y un índice es una posición en una
+     * secuencia—, así que la jerarquía la dice la sangría de cada banda y no el
+     * anidamiento del marcado.
+     */
+    band?: (row: number) => {
+        field?: string;
+        label: string;
+        count: number;
+        open: boolean;
+        depth?: number;
+        /**
+         * Lo que el montón suma EN CADA COLUMNA, en la posición de esa columna.
+         *
+         * Una banda que pone su total en un rincón obliga a buscar a qué columna
+         * corresponde el número. Alineado bajo su columna no hay nada que buscar:
+         * la cuadrícula ya dice qué significa, que es para lo que existe una
+         * cuadrícula. `null` en una columna que no suma — que es la mayoría.
+         */
+        total?: (column: SheetColumn, columnIndex: number) => string | number | null;
+    } | undefined;
+    onBandToggle?: (row: number) => void;
+    caption?: ReactNode;
+    /** Present = the spreadsheet is editable. It receives the raw text just as it
+     *  was typed; converting it to the column's type belongs to the domain, not
+     *  here. */
+    onCommit?: (row: number, column: SheetColumn, columnIndex: number, next: string) => void;
+    /** Which cells are editable. Without this, all of them — but a computed column
+     *  or an identifier is not touched. */
+    editable?: (row: number, column: SheetColumn, columnIndex: number) => boolean;
+    /** Present = rows can be added (see the file's header). Only with `onCommit`: a row
+     *  that cannot be written in is not worth adding. */
+    onAddRow?: () => void;
+}): import("react").JSX.Element;

package/dist/primitives/table/SheetTable.js

@@ -0,0 +1,230 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { stickyTop, useScrollBox } from "../../foundations/sticky.js";
+import { Cell } from "../value/Value.js";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ChevronRight, Plus } from "lucide-react";
+import { useEffect, useState } from "react";
+const TONE = {
+    neutral: "bg-ink/6",
+    info: "bg-info/12",
+    good: "bg-good/12",
+    warn: "bg-warn/15",
+    bad: "bg-bad/12",
+    accent: "bg-accent/20",
+};
+const WIDTH = 168;
+const HEIGHT = 28;
+export function SheetTable({ columns, rows, 
+/** The value of a cell, by index. It is a function and not a prebuilt matrix
+ *  so that the consumer can read from wherever they want without copying a
+ *  million rows into another structure. */
+value, 
+/** Which cells are painted and with what. `undefined` is unpainted, which is
+ *  the normal case — a spreadsheet with everything colored highlights
+ *  nothing. */
+tone, 
+/** What the cell says on hover: «imputado por la mediana». */
+note, height = 420, rowLabel, band, onBandToggle, caption, onCommit, editable, onAddRow, }) {
+    const copy = useUiCopy();
+    const labelOf = rowLabel ?? ((i) => (i + 1).toLocaleString(copy.locale));
+    /* `"auto"` es para un conjunto que ya vino CORTADO —una página de ochenta— y
+       deja de virtualizar de hecho: sin scroll propio, la ventana visible es la
+       caja entera y se dibujan todas las filas. Para los datos crudos —donde son
+       un millón— hay que declarar un alto, y ahí sí se dibujan las ~30 que se
+       ven. Cuándo la caja es un contenedor de scroll lo decide `useScrollBox`. */
+    const caja = useScrollBox(height === "auto" ? {} : { height });
+    const v = useVirtualizer({
+        count: rows,
+        getScrollElement: () => caja.ref.current,
+        estimateSize: () => HEIGHT,
+        overscan: 12,
+    });
+    const items = v.getVirtualItems();
+    const [active, setActive] = useState(null);
+    const [draft, setDraft] = useState(null);
+    const editing = draft !== null;
+    const isEditable = onCommit !== undefined;
+    function canEdit(r, c) {
+        if (!isEditable)
+            return false;
+        const col = columns[c];
+        if (col === undefined)
+            return false;
+        return editable === undefined || editable(r, col, c);
+    }
+    function goTo(r, c) {
+        const rr = Math.max(0, Math.min(rows - 1, r));
+        const cc = Math.max(0, Math.min(columns.length - 1, c));
+        setActive({ r: rr, c: cc });
+        setDraft(null);
+        v.scrollToIndex(rr);
+    }
+    function openCell(r, c, initial) {
+        if (!canEdit(r, c))
+            return;
+        const col = columns[c];
+        setActive({ r, c });
+        setDraft(initial ?? String(value(r, col, c) ?? ""));
+    }
+    function commit(dr, dc) {
+        if (active === null || draft === null)
+            return;
+        const col = columns[active.c];
+        if (col !== undefined)
+            onCommit?.(active.r, col, active.c, draft);
+        setDraft(null);
+        if (dr !== 0 || dc !== 0)
+            goTo(active.r + dr, active.c + dc);
+    }
+    /* The column the active cell waits in until the added row arrives, and how many rows
+       there were when it was asked for. */
+    const canAdd = isEditable && onAddRow !== undefined;
+    const [arriving, setArriving] = useState(null);
+    function addRow(c) {
+        if (!canAdd)
+            return;
+        setArriving({ c, from: rows });
+        onAddRow?.();
+    }
+    useEffect(() => {
+        if (arriving === null || rows <= arriving.from)
+            return;
+        setArriving(null);
+        setActive({ r: rows - 1, c: arriving.c });
+        setDraft(null);
+        v.scrollToIndex(rows - 1);
+        caja.ref.current?.focus();
+        /* `v` and `caja` are new objects every render; the row count is what decides. */
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rows, arriving]);
+    /* All the keyboard handling in one place. Splitting it between the box and
+       each cell is how you end up with spreadsheets whose arrows sometimes move
+       and sometimes scroll. */
+    function onKey(e) {
+        if (active === null)
+            return;
+        const { r, c } = active;
+        if (editing) {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                setDraft(null);
+            }
+            else if (e.key === "Enter") {
+                e.preventDefault();
+                if (!e.shiftKey && canAdd && r === rows - 1) {
+                    commit(0, 0);
+                    addRow(c);
+                }
+                else
+                    commit(e.shiftKey ? -1 : 1, 0);
+            }
+            else if (e.key === "Tab") {
+                e.preventDefault();
+                commit(0, e.shiftKey ? -1 : 1);
+            }
+            return;
+        }
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                goTo(r + 1, c);
+                return;
+            case "ArrowUp":
+                e.preventDefault();
+                goTo(r - 1, c);
+                return;
+            case "ArrowRight":
+            case "Tab":
+                e.preventDefault();
+                goTo(r, c + (e.shiftKey && e.key === "Tab" ? -1 : 1));
+                return;
+            case "ArrowLeft":
+                e.preventDefault();
+                goTo(r, c - 1);
+                return;
+            case "Enter":
+            case "F2":
+                e.preventDefault();
+                openCell(r, c);
+                return;
+            case "Delete":
+            case "Backspace":
+                e.preventDefault();
+                if (canEdit(r, c)) {
+                    const col = columns[c];
+                    if (col !== undefined)
+                        onCommit?.(r, col, c, "");
+                }
+                return;
+            default:
+                /* Typing with the cell active starts editing and keeps the keystroke:
+                   it is what anyone coming from a spreadsheet does, and losing the first
+                   character feels like the app is not responding. */
+                if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                    e.preventDefault();
+                    openCell(r, c, e.key);
+                }
+        }
+    }
+    return (_jsxs("div", { className: "flex min-w-0 flex-col", children: [caption === undefined ? null : (_jsx("div", { className: "px-3 pb-2 text-meta text-muted", children: caption })), _jsx("div", { ref: caja.ref, style: caja.style, onKeyDown: isEditable ? onKey : undefined, tabIndex: isEditable ? 0 : undefined, className: `relative min-w-0 rounded-box border border-line bg-surface focus:outline-none ${caja.className}`, role: "grid", "aria-rowcount": rows, "aria-colcount": columns.length + 1, children: _jsxs("div", { style: {
+                        minWidth: `${ROW_LABEL_WIDTH + columns.reduce((a, c) => a + (c.width ?? WIDTH), 0)}px`,
+                    }, children: [_jsxs("div", { className: "sticky z-20 flex border-b border-line-strong bg-ground", style: stickyTop, role: "row", children: [_jsx("div", { className: "sticky left-0 z-30 shrink-0 border-r border-line bg-ground", style: { width: ROW_LABEL_WIDTH } }), columns.map((c) => (_jsxs("div", { role: "columnheader", style: { width: c.width ?? WIDTH }, className: `flex shrink-0 flex-col justify-center gap-0.5 border-r border-line px-2.5 py-1.5 ${c.numeric === true ? "items-end" : "items-start"}`, children: [_jsx("span", { className: "max-w-full truncate text-meta font-medium text-ink", title: c.header, children: c.header }), c.type === undefined ? null : (_jsx("span", { className: "max-w-full truncate font-mono text-micro text-muted", children: c.type }))] }, c.id))), _jsx("div", { className: "flex-1" })] }), _jsx("div", { style: { height: v.getTotalSize(), position: "relative" }, children: items.map((item) => {
+                                const montón = band?.(item.index);
+                                if (montón !== undefined) {
+                                    /* La banda queda pegada a la IZQUIERDA como el número de fila:
+                                       con cuarenta columnas, un rótulo que se va con el scroll
+                                       horizontal deja de decir en qué montón estás justo cuando
+                                       más lejos estás de él. */
+                                    return (
+                                    /* La banda RESPETA la cuadrícula: rótulo en la columna fija de
+                                       la izquierda, y después una celda por columna —vacía, salvo
+                                       que esa columna sume algo—. Antes era un rótulo suelto que
+                                       ignoraba las columnas, y entonces un total quedaba en un
+                                       rincón sin decir de qué columna era. */
+                                    _jsxs("div", { role: "row", "aria-rowindex": item.index + 1, className: "absolute top-0 left-0 flex w-full border-b border-line-strong bg-ground", style: { height: item.size, transform: `translateY(${item.start}px)` }, children: [_jsx("button", { type: "button", onClick: onBandToggle === undefined
+                                                    ? undefined
+                                                    : () => onBandToggle(item.index), "aria-expanded": montón.open, className: "sticky left-0 z-10 flex min-w-0 shrink-0 items-center gap-1.5 border-r border-line bg-ground px-2.5 text-left", style: {
+                                                    height: "100%",
+                                                    /* El mismo ancho que la columna del número de fila, para
+                                                       que el rótulo no corra la cuadrícula. */
+                                                    width: ROW_LABEL_WIDTH,
+                                                    ...(montón.depth === undefined || montón.depth === 0
+                                                        ? {}
+                                                        : {
+                                                            paddingLeft: `calc(var(--spacing-indent) * ${montón.depth} + 0.625rem)`,
+                                                        }),
+                                                }, children: onBandToggle === undefined ? null : (_jsx(ChevronRight, { className: `size-(--size-icon-sm) shrink-0 text-muted transition-transform duration-(--duration-instant) ${montón.open ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true })) }), columns.map((c, ci) => {
+                                                const total = montón.total?.(c, ci) ?? null;
+                                                return (_jsx("div", { role: "gridcell", style: { width: c.width ?? WIDTH }, className: `flex shrink-0 items-center overflow-hidden border-r border-line px-2.5 whitespace-nowrap ${c.numeric === true ? "justify-end" : "justify-start"}`, children: ci === 0 ? (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [montón.field === undefined ? null : (_jsx("span", { className: "shrink-0 text-micro text-muted/70", children: montón.field })), _jsx("span", { className: "truncate text-micro font-medium text-ink", children: montón.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: montón.count.toLocaleString(copy.locale) })] })) : total === null ? null : (_jsx("span", { className: "truncate text-meta font-medium tabular-nums text-ink", children: typeof total === "number"
+                                                            ? total.toLocaleString(copy.locale)
+                                                            : total })) }, c.id));
+                                            })] }, item.key));
+                                }
+                                return (_jsxs("div", { role: "row", "aria-rowindex": item.index + 1, className: "absolute top-0 left-0 flex w-full border-b border-line", style: { height: item.size, transform: `translateY(${item.start}px)` }, children: [_jsx("div", { className: "sticky left-0 z-10 flex shrink-0 items-center justify-end border-r border-line bg-surface px-2 text-micro tabular-nums text-muted", style: { width: ROW_LABEL_WIDTH }, children: labelOf(item.index) }), columns.map((c, ci) => {
+                                            const t = tone?.(item.index, c, ci);
+                                            const n = note?.(item.index, c, ci);
+                                            const isActive = active !== null && active.r === item.index && active.c === ci;
+                                            const isEditingHere = isActive && editing;
+                                            return (_jsx("div", { role: "gridcell", title: n, "aria-selected": isActive, onClick: isEditable ? () => goTo(item.index, ci) : undefined, onDoubleClick: isEditable ? () => openCell(item.index, ci) : undefined, style: { width: c.width ?? WIDTH }, className: `relative flex shrink-0 items-center overflow-hidden border-r border-line px-2.5 text-meta tabular-nums whitespace-nowrap text-ink ${c.numeric === true ? "justify-end" : "justify-start"} ${t === undefined ? "" : TONE[t]} ${
+                                                /* The outline of the active cell goes on the inside
+                                                 (`inset-ring`) and not on the outside: a 2 px border
+                                                 would push the content and the whole row would dance
+                                                 as you move around with the arrows. */
+                                                isActive
+                                                    ? "inset-ring-2 inset-ring-primary"
+                                                    : isEditable
+                                                        ? "cursor-cell"
+                                                        : ""}`, children: isEditingHere ? (_jsx("input", { autoFocus: true, value: draft, onChange: (ev) => setDraft(ev.target.value), onBlur: () => commit(0, 0), className: `absolute inset-0 w-full bg-surface px-2.5 text-meta tabular-nums text-ink outline-none ${c.numeric === true ? "text-right" : "text-left"}` })) : (_jsx(Cell, { value: value(item.index, c, ci), max: 24 })) }, c.id));
+                                        }), _jsx("div", { className: "flex-1" })] }, item.key));
+                            }) })] }) }), canAdd ? (
+            /* Under the grid and outside its scroll box, like the editable table's «add»: in
+               view however far down a long sheet is scrolled. The new row's first cell that
+               can be written takes the place. */
+            _jsx("div", { className: "px-1 py-0.5", children: _jsxs("button", { type: "button", onClick: () => {
+                        const first = columns.findIndex((_, ci) => canEdit(rows, ci));
+                        addRow(first === -1 ? 0 : first);
+                    }, className: "flex w-full items-center gap-1.5 rounded-control px-2 py-0.5 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", children: [_jsx(Plus, { className: "size-(--size-icon-sm)", strokeWidth: 2.5, "aria-hidden": true }), copy.editable.addRow] }) })) : null] }));
+}
+const ROW_LABEL_WIDTH = 64;

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

@@ -0,0 +1,106 @@
+import type { Tone } from "../../foundations/types.js";
+import { type ReactNode } from "react";
+export type SortDirection = "asc" | "desc";
+export interface SortState {
+    key: string;
+    direction: SortDirection;
+}
+export declare function Table({ children, 
+/** With a height, the table scrolls on its own and the header sticks.
+ *  Without a height, the page scrolls and the header goes away. */
+height, }: {
+    children: ReactNode;
+    /** A number means pixels; a string goes through as is, so `26rem` follows the
+     *  system scale instead of pinning a size in pixels. */
+    height?: number | string;
+}): import("react").JSX.Element;
+export declare function THead({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A column. If it gets a `sortKey`, it can be sorted.
+ *
+ *  The icon is ALWAYS there, dimmed when the column is not the sorted one: an
+ *  indicator that only shows up once you sort does not say which columns are
+ *  sortable, and then you have to try them one by one. */
+export declare function Th({ children, sortKey, sort, onSort, numeric, align, width, }: {
+    children: ReactNode;
+    sortKey?: string;
+    sort?: SortState | null;
+    onSort?: (next: SortState | null) => void;
+    /** Numbers align to the right: that is what lets you compare orders of
+     *  magnitude without reading the figures. */
+    numeric?: boolean;
+    /** The alignment, when it is NOT because it is a number. They are two
+     *  different things: `numeric` says «this is a figure» and drags along the
+     *  right alignment and the tabular figures; `align` only pushes. A status
+     *  label on the right is not a number. */
+    align?: "left" | "right";
+    /** A number means pixels; a string goes through as is, so `6rem` follows the
+     *  system scale instead of pinning a size in pixels. */
+    width?: number | string;
+}): import("react").JSX.Element;
+export declare function Tr({ children, onClick, selected, }: {
+    children: ReactNode;
+    onClick?: () => void;
+    selected?: boolean;
+}): import("react").JSX.Element;
+/**
+ * A row that opens its own detail underneath.
+ *
+ * Context: `DataTable` expands GROUPS —TanStack takes care of that— and that is
+ * not enough for the most common case in this product: a column that opens up
+ * to show its distribution. That is not a group, it is the detail of ONE row,
+ * and every view was writing it by hand with its own `colSpan` and its own
+ * chevron.
+ *
+ * The trigger is the first cell and not a column of chevrons: a whole column
+ * for a 12 px control is width that a twelve-column table needs.
+ */
+export declare function TrDetail({ children, detail, open, onToggle, columns, label, selected, }: {
+    children: ReactNode;
+    detail: ReactNode;
+    open: boolean;
+    onToggle: () => void;
+    /** How many columns the table has, so the detail spans all of them. */
+    columns: number;
+    /** What is being opened, for the screen reader: «distribución de importe». */
+    label: string;
+    selected?: boolean;
+}): import("react").JSX.Element;
+/** The background of a cell, by tone. It replaces the row wash on that cell:
+ *  a hovered row and a painted cell are two signals, and stacking them reads
+ *  as a third color. */
+export declare const CELL_TONE: Record<Tone, string>;
+export declare function Td({ children, numeric, align, 
+/** A CODE — an id, a hash, a key — set in the monospaced face. Off by default: a
+ *  number does not need it (a numeric cell gets tabular figures on its own), and a
+ *  name in mono reads like a log, not like a report. */
+mono, 
+/** Paints the whole cell. For what the eye has to find without reading: an
+ *  imputed value, one out of range, a row that changed.
+ *
+ *  Context: it is the CELL and not the text. Tinting the text says «this
+ *  number is of another kind»; tinting the cell says «look here», which is
+ *  something else — and in a table of forty rows by six columns, colored text
+ *  gets lost. */
+tone, title, }: {
+    children: ReactNode;
+    numeric?: boolean;
+    /** Pushes without saying it is a number. See the note on `Th`. */
+    align?: "left" | "right";
+    mono?: boolean;
+    tone?: Tone;
+    /** Why it is painted. A colored cell with no explanation is a question. */
+    title?: string;
+}): import("react").JSX.Element;
+/** The selection checkbox, with its third state.
+ *
+ *  «some» is not an ornament: without it, the header checkbox of a table with
+ *  three of forty rows selected lies in both directions — empty says «none»
+ *  and filled says «all». */
+export declare function SelectBox({ checked, indeterminate, onChange, label, }: {
+    checked: boolean;
+    indeterminate?: boolean;
+    onChange?: (next: boolean) => void;
+    label: string;
+}): import("react").JSX.Element;