@sincpro/web-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,70 @@
+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, }: {
+    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;
+}): import("react").JSX.Element;

package/dist/primitives/table/SheetTable.js

@@ -0,0 +1,197 @@
+"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 } from "lucide-react";
+import { 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, }) {
+    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);
+    }
+    /* 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();
+                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));
+                            }) })] }) })] }));
+}
+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;

package/dist/primitives/table/Table.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { stickyTop, useScrollBox } from "../../foundations/sticky.js";
+import { ArrowDown, ArrowUp, ChevronRight, ChevronsUpDown } from "lucide-react";
+import { createContext, useContext, useId } from "react";
+export 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, }) {
+    const caja = useScrollBox(height === undefined ? {} : { height });
+    return (
+    /* Cuándo esta caja es un contenedor de scroll y cuándo no lo decide
+       `useScrollBox`: ahí vive el dilema entero y ahí vive su explicación. Las
+       tres tablas del sistema lo resolvían con tres copias de la misma
+       medición. */
+    _jsx("div", { ref: caja.ref, className: `min-w-0 ${caja.className}`, style: caja.style, children: _jsx("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", children: children }) }));
+}
+export function THead({ children }) {
+    return (
+    /* Se pega DEBAJO de lo que ya esté pegado —la barra de la aplicación y la
+       de la lista— y no en `top: 0`, que lo metía atrás de las dos. Sin alto en
+       `Table` el que scrollea es la página, y ahí la diferencia es justamente
+       la que hacía desaparecer los nombres de columna. Ver `system/sticky.tsx`. */
+    _jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsx("tr", { children: children }) }));
+}
+/** 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 function Th({ children, sortKey, sort, onSort, numeric = false, align, width, }) {
+    const active = sortKey !== undefined && sort?.key === sortKey;
+    const dir = active ? sort.direction : undefined;
+    function nextSort() {
+        if (sortKey === undefined || onSort === undefined)
+            return;
+        // asc → desc → unsorted. The third click puts the table back the way it was.
+        if (!active)
+            onSort({ key: sortKey, direction: "asc" });
+        else if (dir === "asc")
+            onSort({ key: sortKey, direction: "desc" });
+        else
+            onSort(null);
+    }
+    const Icon = dir === "asc" ? ArrowUp : dir === "desc" ? ArrowDown : ChevronsUpDown;
+    return (_jsx("th", { scope: "col", style: width === undefined ? undefined : { width }, "aria-sort": active ? (dir === "asc" ? "ascending" : "descending") : "none", className: `border-b border-line-strong px-3 py-2 text-meta font-medium whitespace-nowrap text-muted ${(align ?? (numeric ? "right" : "left")) === "right" ? "text-right" : "text-left"}`, children: sortKey === undefined ? (children) : (_jsxs("button", { type: "button", onClick: nextSort, className: `inline-flex items-center gap-1 rounded-control transition-colors duration-(--duration-instant) hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${(align ?? (numeric ? "right" : "left")) === "right" ? "flex-row-reverse" : ""} ${active ? "text-ink" : ""}`, children: [children, _jsx(Icon, { className: `size-(--size-icon-sm) shrink-0 ${active ? "text-primary" : "text-line-strong"}`, strokeWidth: 2, "aria-hidden": true })] })) }));
+}
+/** The wash of a row lives on the cells, not on the `<tr>`. A background on the
+ *  row paints edge to edge; on the cells the ends can round and the table's
+ *  padding keeps the mark off the card. */
+const RowMark = createContext(false);
+const ROW_WASH = "group-hover/row:bg-ink/4";
+const ROW_ON = "bg-primary/8";
+function rowWash(selected) {
+    return selected ? ROW_ON : ROW_WASH;
+}
+export function Tr({ children, onClick, selected = false, }) {
+    return (_jsx(RowMark.Provider, { value: selected, children: _jsx("tr", { onClick: onClick, className: `group/row ${onClick === undefined ? "" : "cursor-pointer"}`, children: children }) }));
+}
+/**
+ * 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 function TrDetail({ children, detail, open, onToggle, columns, label, selected = false, }) {
+    const id = useId();
+    return (_jsx(RowMark.Provider, { value: selected, children: _jsxs(_Fragment, { children: [_jsxs("tr", { onClick: onToggle, className: "group/row cursor-pointer", children: [_jsx("td", { className: `border-b border-line py-1.5 pr-0 pl-2.5 align-middle first:rounded-l-control ${rowWash(selected)}`, children: _jsx("button", { type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onToggle();
+                                }, "aria-expanded": open, "aria-controls": id, "aria-label": label, className: "inline-flex size-5 items-center justify-center rounded-pill text-muted transition-colors duration-(--duration-instant) hover:bg-ink/6 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", children: _jsx(ChevronRight, { className: `size-(--size-icon-sm) transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2 }) }) }), children] }), _jsx("tr", { id: id, hidden: !open, children: _jsx("td", { colSpan: columns + 1, className: "border-b border-line bg-ground px-3 py-3", children: detail }) })] }) }));
+}
+/** 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 const CELL_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",
+};
+export function Td({ children, numeric = false, 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 = false, 
+/** 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, }) {
+    const selected = useContext(RowMark);
+    return (_jsx("td", { title: title, className: `border-b border-line px-3 py-1.5 text-meta text-ink first:rounded-l-control last:rounded-r-control ${(align ?? (numeric ? "right" : "left")) === "right" ? "text-right" : "text-left"} ${mono ? "font-mono tabular-nums" : numeric ? "tabular-nums" : ""} ${tone === undefined ? rowWash(selected) : CELL_TONE[tone]}`, children: children }));
+}
+/** 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 function SelectBox({ checked, indeterminate = false, onChange, label, }) {
+    return (_jsx("input", { type: "checkbox", checked: checked, "aria-label": label, ref: (el) => {
+            if (el !== null)
+                el.indeterminate = indeterminate && !checked;
+        }, onChange: (e) => onChange?.(e.target.checked), onClick: (e) => e.stopPropagation(), className: "size-3.5 shrink-0 cursor-pointer accent-primary" }));
+}

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

@@ -0,0 +1,7 @@
+export { type Aggregate, type DataColumn, DataTable, type GroupColumn, } from "./DataTable.js";
+export { EditableTable, type EditColumn, type EditLayout, type StackPlace, stackPlaces, } from "./EditableTable.js";
+export { PivotTable, type PivotTableProps, } from "./PivotTable.js";
+export { type ReportColumn, type ReportRow, type ReportRowKind, ReportTable, } from "./ReportTable.js";
+export { type RowAction, RowActions } from "./RowActions.js";
+export { type SheetColumn, SheetTable } from "./SheetTable.js";
+export { CELL_TONE, type SortDirection, type SortState, Table, Td, Th, THead, Tr, } from "./Table.js";

package/dist/primitives/table/index.js

@@ -0,0 +1,9 @@
+/* The presentation (`Table`) is ours and is used on its own; `DataTable` is the
+   wiring to TanStack for grouping and sorting. See the note in `DataTable.tsx`. */
+export { DataTable, } from "./DataTable.js";
+export { EditableTable, stackPlaces, } from "./EditableTable.js";
+export { PivotTable, } from "./PivotTable.js";
+export { ReportTable, } from "./ReportTable.js";
+export { RowActions } from "./RowActions.js";
+export { SheetTable } from "./SheetTable.js";
+export { CELL_TONE, Table, Td, Th, THead, Tr, } from "./Table.js";

package/dist/primitives/tabs/Tabs.d.ts

@@ -0,0 +1,91 @@
+import type { Tone } from "../../foundations/types.js";
+import type { LucideIcon } from "lucide-react";
+/**
+ * UNA TIRA DE PESTAÑAS. La misma en todo el sistema.
+ *
+ * Context: esto vivía adentro del encabezado del registro y se llamaba
+ * `Aspects`, así que el chatter —que necesita exactamente lo mismo— no podía
+ * usarlo: un contexto no importa de otro contexto. El resultado era una tira de
+ * pestañas de segunda mano, con el activo marcado de otra manera, en la misma
+ * pantalla que la buena.
+ *
+ * Es una primitiva porque no sabe qué está separando: las caras de un registro,
+ * las dos fuentes de una historia, o lo que venga.
+ *
+ * ── Por qué el activo es una PESTAÑA de carpeta ─────────────────────
+ *
+ * Y no un subrayado. Un subrayado dice «esto está elegido»; una pestaña que sale
+ * del borde y tapa la línea dice «esto está ABIERTO y lo de abajo es su
+ * contenido», que es la relación real. La diferencia importa cuando hay tres y
+ * el contenido de abajo no cambia de forma al cambiar de una a otra.
+ *
+ * ── El contador apagado en cero ─────────────────────────────────────
+ *
+ * Un cero se dibuja, y apagado. Esconderlo obliga a abrir la pestaña para
+ * descubrir que está vacía; pintarlo como los demás la hace parecer que tiene
+ * algo. «No hay ninguna» es información y se dice.
+ *
+ * ── El contador y la NOTIFICACIÓN son dos cosas ─────────────────────
+ *
+ * El contador dice CUÁNTAS cosas hay detrás, y es neutro: «pagos 0» es una
+ * respuesta tan válida como «pagos 5». La notificación dice que algo de ahí
+ * PIDE que lo mires —falló, cambió, llegó— y por eso tiene color y por eso un
+ * cero no se dibuja: no hay nada que pedir.
+ *
+ * Confundirlos se ve así: una pestaña con «3» al lado y nadie sabe si son tres
+ * cosas o tres problemas. Son dos marcas porque son dos preguntas.
+ */
+/**
+ * ALGO DE ESTA PESTAÑA PIDE ATENCIÓN.
+ *
+ * No es un conteo: un conteo dice cuántas cosas hay y esto dice que hay algo que
+ * mirar. Por eso tiene color, por eso no se dibuja en cero, y por eso puede
+ * convivir con el contador — «pagos 4 ⬤» es cuatro cosas, una de ellas
+ * rechazada.
+ */
+export type TabNotice = {
+    /**
+     * Qué es lo que pide atención, en la voz del producto: «3 sin leer», «la
+     * factura no se pudo enviar».
+     *
+     * Obligatorio, y por la misma razón que en `StatusDot`: un punto de color sin
+     * su palabra al lado obliga a aprender una leyenda que no está escrita en
+     * ningún lado, y no le dice nada a quien no distingue el rojo del verde. Acá
+     * la marca acelera el barrido y la palabra informa — se lee al pasar por
+     * encima y la lee un lector de pantalla.
+     */
+    label: string;
+    /** Cuántas cosas lo piden. Sin esto es un punto, que es lo que se pone cuando
+     *  llegó algo nuevo y contarlo no agrega nada. Un `0` no dibuja nada: no hay
+     *  nada que pedir. */
+    count?: number;
+    /** De qué clase: `bad` algo falló, `warn` algo avisa, `accent` o `info` algo
+     *  llegó. Sin esto, `bad` — que es el caso por el que esto existe. */
+    tone?: Tone;
+};
+export type TabItem = {
+    id: string;
+    label: string;
+    /** La marca de la pestaña. Con tres o más, el ícono es lo que se reconoce sin
+     *  leer — y en una tira angosta es lo único que sobrevive al truncado. */
+    icon?: LucideIcon;
+    /** Cuántas cosas hay detrás. `undefined` = no se cuenta; `0` se dibuja
+     *  apagado, que es distinto de no contar. */
+    count?: number;
+    /** Que algo de acá pide que lo mires. Aparte del contador: ver `TabNotice`. */
+    notice?: TabNotice;
+};
+/**
+ * The strip only: what each tab opens is drawn by whoever uses it (`Record`, `Chatter`).
+ *
+ * Built on React Aria's `Tabs`, so the strip is a real tab list for the keyboard: the
+ * arrows move between tabs and select them, Home/End jump to the ends, and only the open
+ * tab is in the Tab order. The hand-written version had the roles and none of the keys.
+ */
+export declare function Tabs({ tabs, current, onSelect, label, }: {
+    tabs: readonly TabItem[];
+    current: string;
+    onSelect?: (id: string) => void;
+    /** El rótulo accesible de la tira. Sin esto, «las caras del registro». */
+    label?: string;
+}): import("react").JSX.Element;