@sincpro/web-ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,189 @@
+import type { Tone } from "../../foundations/types.js";
+import { type RowAction } from "./RowActions.js";
+import { type SortState } from "./Table.js";
+import { type ReactNode } from "react";
+/** How a column is aggregated when its rows are pulled together into a group.
+ *
+ *  **`count` is the default and it is the right one almost always**: summing
+ *  identifiers or averaging file sizes produces numbers that look like data and
+ *  mean nothing. An aggregate has to be chosen on purpose. */
+export type Aggregate = "count" | "sum" | "mean" | "min" | "max" | "unique";
+/**
+ * How the aggregate of a column is written: its `format` when the aggregate is in the
+ * column's units, `undefined` (the bare number) otherwise.
+ *
+ * Exported for the other places that draw `aggregateOf` — the bands of the sheet, the report
+ * built from the piles — so the footer and the band never write the same total two ways.
+ * Not public.
+ */
+export declare function aggregateFormat<T>(column: DataColumn<T>): ((value: number) => string) | undefined;
+/** An aggregate of a column, written — or the bare number when nothing says how. */
+export declare function aggregateText<T>(column: DataColumn<T>, value: number): string | number;
+export interface DataColumn<T> {
+    id: string;
+    header: string;
+    /** Qué campo del MODELO muestra esta columna, cuando no se llama igual que
+     *  él: «filas» muestra `row_count`. Lo lee `columnsFromModel` para no volver
+     *  a agregar, en crudo, un campo que esta columna ya contesta. */
+    field?: string;
+    /** The raw value: this is what sorting and grouping run on. */
+    value: (row: T) => string | number | boolean | null;
+    /** How it is drawn. Without this the raw value is drawn. */
+    cell?: (row: T) => ReactNode;
+    /** A column of CODES — a SKU, a hash, a key — set in the monospaced face. Numbers do not
+     *  need it: they align with tabular figures in the same face as the rest of the row. */
+    mono?: boolean;
+    /**
+     * Cómo se LEE la columna donde no se puede dibujar: la planilla, que es una
+     * cuadrícula de texto y números y no puede recibir un nodo.
+     *
+     * Context: sin esto, la planilla caía a `value`, que es la clave de ORDEN y
+     * no lo que una persona lee. La columna «estado» de Facturas mostraba
+     * `posted` y `paid` —los valores del contrato— en vez de «publicada» y
+     * «pagada», que es lo que dice la ficha de al lado en la tabla. Dos
+     * presentaciones del mismo conjunto diciendo cosas distintas.
+     */
+    text?: (row: T) => string;
+    /** Paints the BACKGROUND of the cell, row by row. It is what turns a table
+     *  into something you look at: «this amount is out of range», «this value was
+     *  imputed by the engine». Returning `undefined` leaves the cell unpainted,
+     *  which is the normal case — a table with everything colored highlights
+     *  nothing. */
+    tone?: (row: T) => Tone | undefined;
+    /** Why it is painted, on hover. */
+    note?: (row: T) => string | undefined;
+    numeric?: boolean;
+    width?: number;
+    aggregate?: Aggregate;
+    /**
+     * How a number of this column is WRITTEN where the code draws it instead of a row: the
+     * footer's aggregate, the total of a band of the sheet, the lines of a report built
+     * from the piles. `(n) => money(n)` makes the footer read «Bs. 78.752,90» like the cells
+     * above it, and not «78.752,9».
+     *
+     * Context: the cells already had their way (`cell`), and that way takes a ROW — the
+     * footer has no row, only a number. A string and not a node because two of the three
+     * places are grids of text: the sheet and the report. Applies to the aggregates in the
+     * column's units (`sum`, `mean`, `min`, `max`); a `count` stays a count. Without it,
+     * the number in the copy table's locale, as before.
+     */
+    format?: (value: number) => string;
+    sortable?: boolean;
+    /** Odoo: fields without `optional` cannot leave the view. When true, the
+     *  column appears in the columns submenu and can be hidden. */
+    optional?: boolean;
+    /** Odoo `optional="hide"`: start off. Only with `optional`. */
+    defaultHidden?: boolean;
+    /**
+     * Edit this cell IN the list, through a small popover anchored to it: the salesperson of
+     * an invoice, its due date, its stage. The cell becomes a button (with a pencil on hover
+     * and focus) and `render` draws the editor inside the popover.
+     *
+     * Context: one function and not a kind of editor, because the editor is the system's own
+     * control — a `Picker`, a `Calendar`, a `Select` — written by whoever knows the field.
+     * The editor commits with its own gesture and then calls `done`, which closes the popover
+     * and returns the focus to the cell. Escape and a click outside close without committing.
+     * Do not draw links in an editable column: the cell is already a button.
+     */
+    edit?: {
+        render: (row: T, done: () => void) => ReactNode;
+        /** Which rows can be changed — a paid invoice cannot. All of them by default. */
+        when?: (row: T) => boolean;
+    };
+    /** The control of this column in the row of a NEW record (`DataTable`'s `create`).
+     *  The same contract as `EditableTable`'s `edit`: `set` replaces the draft. Give it an
+     *  `aria-label` — a cell has no `Field` to name it. Without it the column stays
+     *  empty in that row: a computed amount, a sequence the backend assigns. */
+    input?: (draft: T, set: (next: T) => void) => ReactNode;
+    /** The copy button of the cells (`CellCopy`): on by default, copying what the cell shows.
+     *  A function copies what it returns for the row instead; `false` removes it from this
+     *  column — a column of tags or of buttons has nothing worth pasting. */
+    copy?: false | ((row: T) => string);
+}
+/** Writing a new record in the list. See the file's header. */
+export type DataTableCreate<T> = {
+    /** The record being written, or `null` when there is none. */
+    draft: T | null;
+    /** «Add» was asked for: the consumer sets a blank `draft`. */
+    onStart: () => void;
+    onChange: (next: T) => void;
+    /** `Enter`, leaving the row after writing in it, or `Tab` past its last control. The
+     *  consumer validates and saves, and sets `draft` back to `null` — or keeps it, to
+     *  say what is missing. */
+    onCommit: (draft: T) => void;
+    /** `Escape`, or leaving the row without having written anything. */
+    onCancel: () => void;
+    /** The «add» under the table. Defaults to the copy table's. */
+    label?: string;
+};
+/**
+ * El agregado de una columna sobre un conjunto de filas.
+ *
+ * Vive afuera del componente porque lo preguntan tres lugares: el pie de la
+ * tabla, la banda de un montón en la planilla, y la línea de un informe armado
+ * a partir de los montones. Tres implementaciones de «cuánto suma esto» es que
+ * el pie diga un número y el montón otro.
+ *
+ * `null` cuando la columna no declaró agregado, no es numérica, o no hay ningún
+ * número que sumar — que es distinto de sumar cero.
+ */
+export declare function aggregateOf<T extends object>(column: DataColumn<T>, rows: readonly T[]): number | null;
+/**
+ * UN NIVEL, como lo necesita una tabla.
+ *
+ * La identidad es la del NIVEL y no la del campo: un mismo `registered_at`
+ * puesto por mes y por día son dos cortes, y con el nombre del campo serían el
+ * mismo repetido. `keyOf` da la clave del motor —la misma que arman las otras
+ * presentaciones, así que lo plegado vale para todas— y `labelOf` la lee en el
+ * idioma activo.
+ */
+export type GroupColumn<T> = {
+    /** La identidad del nivel: `levelKey(level)`. */
+    id: string;
+    /** Cómo se llama el corte, a la izquierda del valor. Sin él, «Septiembre» no
+     *  dice si es cuándo se registró o cuándo se corrió. */
+    label: string;
+    /** A qué montón va cada fila en este nivel. */
+    keyOf: (item: T) => string;
+    /** Cómo se lee esa clave. */
+    labelOf: (key: string) => string;
+};
+export declare function DataTable<T extends object>({ data, columns, getRowId, sort, onSortChange, levels, selected, onSelectedChange, height, onRowClick, rowActions, totals, collapsed, onGroupToggle, create, copyable, }: {
+    data: readonly T[];
+    columns: readonly DataColumn<T>[];
+    getRowId: (row: T) => string;
+    sort?: SortState | null;
+    onSortChange?: (next: SortState | null) => void;
+    /**
+     * Los NIVELES por los que se parte, de afuera hacia adentro. Vacío o ausente
+     * es «sin agrupar».
+     *
+     * Varios, porque agrupar no es una pregunta: «por cliente y después por
+     * mes» es un árbol y no una lista de montones. El orden ES la jerarquía.
+     */
+    levels?: readonly GroupColumn<T>[];
+    selected?: ReadonlySet<string>;
+    onSelectedChange?: (next: Set<string>) => void;
+    height?: number;
+    onRowClick?: (row: T) => void;
+    /** What you do to ONE row without going into it. They are drawn hidden and
+     *  show up on the hovered row — see `RowActions.tsx`. */
+    rowActions?: (row: T) => readonly RowAction[];
+    /** The footer with the aggregate of every column that declared one.
+     *
+     *  Context: up to now the aggregate only existed INSIDE a group, so an
+     *  ungrouped table had no way to say how much it adds up to — and «how much
+     *  does it add up to» is the question that makes a table of amounts a report
+     *  and not a list. It stays pinned at the bottom: in a four-hundred-row table,
+     *  a total you have to scroll to is a total nobody sees. */
+    totals?: boolean;
+    /** Group keys that are closed. Same keys as `ListGroup.collapsed`, so the
+     *  table does not reopen what rows just folded. */
+    collapsed?: readonly string[];
+    onGroupToggle?: (key: string) => void;
+    /** Write a new record as a row of the list. See the file's header. */
+    create?: DataTableCreate<T>;
+    /** The cells' copy buttons, on by default. `false` takes them off the whole table; a
+     *  column turns its own off with `copy: false`. */
+    copyable?: boolean;
+}): import("react").JSX.Element;

package/dist/primitives/table/DataTable.js

@@ -0,0 +1,330 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { pathKey } from "../../foundations/grouping.js";
+import { CellCopy } from "./CellCopy.js";
+import { CellEditor } from "./CellEditor.js";
+import { EditRow, firstControl } from "./EditableTable.js";
+import { RowActions } from "./RowActions.js";
+import { SelectBox, Table, Td, Th, THead, Tr, } from "./Table.js";
+import { aggregationFns, columnGroupingFeature, createColumnHelper, createExpandedRowModel, createGroupedRowModel, createSortedRowModel, rowAggregationFeature, rowExpandingFeature, rowSortingFeature, sortFns, tableFeatures, useTable, } from "@tanstack/react-table";
+import { ChevronRight, Plus } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+/** The aggregates that are an amount OF the column — a sum of bolivianos is bolivianos — and
+ *  so are written the way the column writes its numbers. `count` and `unique` count rows
+ *  and values: «Bs. 12,00 rows» would be nonsense. */
+const IN_COLUMN_UNITS = new Set(["sum", "mean", "min", "max"]);
+/**
+ * How the aggregate of a column is written: its `format` when the aggregate is in the
+ * column's units, `undefined` (the bare number) otherwise.
+ *
+ * Exported for the other places that draw `aggregateOf` — the bands of the sheet, the report
+ * built from the piles — so the footer and the band never write the same total two ways.
+ * Not public.
+ */
+export function aggregateFormat(column) {
+    return column.aggregate !== undefined && IN_COLUMN_UNITS.has(column.aggregate)
+        ? column.format
+        : undefined;
+}
+/** An aggregate of a column, written — or the bare number when nothing says how. */
+export function aggregateText(column, value) {
+    const format = aggregateFormat(column);
+    return format === undefined ? value : format(value);
+}
+function aggregateLabel(copy, column, v) {
+    const n = v.toLocaleString(copy.locale);
+    /* Raw, a sum of amounts read «78.752,9»: one decimal lost and no currency, under a
+       column whose every cell says «Bs. 12.300,00». */
+    const amount = (fallback) => column.format === undefined ? fallback : column.format(v);
+    switch (column.aggregate ?? "count") {
+        case "sum":
+            return amount(n);
+        case "count":
+            return `${n} ${v === 1 ? copy.table.row : copy.table.rows}`;
+        case "mean":
+            return fillCopy(copy.table.mean, {
+                value: amount(v.toLocaleString(copy.locale, { maximumFractionDigits: 2 })),
+            });
+        case "min":
+            return fillCopy(copy.table.min, { value: amount(n) });
+        case "max":
+            return fillCopy(copy.table.max, { value: amount(n) });
+        case "unique":
+            return fillCopy(copy.table.distinct, { value: n });
+    }
+}
+function raw(copy, v) {
+    if (v === null)
+        return "—";
+    if (typeof v === "number")
+        return v.toLocaleString(copy.locale);
+    if (typeof v === "boolean")
+        return v ? copy.table.yes : copy.table.no;
+    return v;
+}
+/** What a cell draws: its `cell`, or the raw value. */
+function drawCell(copy, column, row) {
+    return column.cell === undefined ? raw(copy, column.value(row)) : column.cell(row);
+}
+/* The features are declared once. In v9 they are opt-in: asking only for what
+   is used is what keeps the bundle down to what is actually needed. */
+const FEATURES = tableFeatures({
+    rowSortingFeature,
+    columnGroupingFeature,
+    rowExpandingFeature,
+    // `rowAggregationFeature` is what enables `aggregationFn` on a column.
+    // Without it, grouping pulls rows together but each column does not know what
+    // to show in the group row — which is half of the reason for grouping.
+    rowAggregationFeature,
+    sortedRowModel: createSortedRowModel(),
+    groupedRowModel: createGroupedRowModel(),
+    expandedRowModel: createExpandedRowModel(),
+    sortFns,
+    aggregationFns,
+});
+/**
+ * El agregado de una columna sobre un conjunto de filas.
+ *
+ * Vive afuera del componente porque lo preguntan tres lugares: el pie de la
+ * tabla, la banda de un montón en la planilla, y la línea de un informe armado
+ * a partir de los montones. Tres implementaciones de «cuánto suma esto» es que
+ * el pie diga un número y el montón otro.
+ *
+ * `null` cuando la columna no declaró agregado, no es numérica, o no hay ningún
+ * número que sumar — que es distinto de sumar cero.
+ */
+export function aggregateOf(column, rows) {
+    if (column.aggregate === undefined || column.numeric !== true)
+        return null;
+    const numbers = rows
+        .map((row) => column.value(row))
+        .filter((value) => typeof value === "number");
+    if (numbers.length === 0)
+        return null;
+    switch (column.aggregate) {
+        case "sum":
+            return numbers.reduce((a, b) => a + b, 0);
+        case "mean":
+            return numbers.reduce((a, b) => a + b, 0) / numbers.length;
+        case "min":
+            return Math.min(...numbers);
+        case "max":
+            return Math.max(...numbers);
+        case "unique":
+            return new Set(numbers).size;
+        default:
+            return numbers.length;
+    }
+}
+export function DataTable({ data, columns, getRowId, sort, onSortChange, levels, selected, onSelectedChange, height, onRowClick, rowActions, totals = false, collapsed, onGroupToggle, create, copyable = true, }) {
+    const copy = useUiCopy();
+    const draft = create?.draft ?? null;
+    const draftRow = useRef(null);
+    const addButton = useRef(null);
+    /* Whether anything was written in the draft: leaving a blank one drops it. */
+    const touched = useRef(false);
+    const writing = draft !== null;
+    /* Each «add» is a session. With `Tab` the next draft replaces the saved one without
+       ever being `null`, so `writing` alone would not say a new record began. */
+    const [session, setSession] = useState(0);
+    /* «add» is hidden while writing: the focus goes back to it once it is there again. */
+    const backToAdd = useRef(false);
+    const start = () => {
+        setSession((n) => n + 1);
+        create?.onStart();
+    };
+    /* A draft that appears takes the focus on its first control — «add» is a request to
+       write, not to look for where to. */
+    useEffect(() => {
+        if (!writing) {
+            if (backToAdd.current)
+                addButton.current?.focus();
+            backToAdd.current = false;
+            return;
+        }
+        touched.current = false;
+        const node = draftRow.current;
+        if (node !== null)
+            (firstControl(node) ?? node).focus();
+    }, [writing, session]);
+    const saveDraft = (refocus) => {
+        if (create === undefined || draft === null)
+            return;
+        backToAdd.current = refocus;
+        if (touched.current)
+            create.onCommit(draft);
+        else
+            create.onCancel();
+    };
+    // In v9 the helper is bound to the features AND to the data type: that is what
+    // makes the compiler know about `enableGrouping` only if we ask for the
+    // feature.
+    const helper = useMemo(() => createColumnHelper(), []);
+    const defs = useMemo(() => [
+        ...columns.map((c) => helper.accessor((row) => c.value(row), {
+            id: c.id,
+            header: c.header,
+            enableSorting: c.sortable !== false,
+            /* Ninguna columna agrupa. Lo que parte el conjunto son los NIVELES, y
+               cada uno entra como una columna suya —abajo— que existe sólo para
+               eso: nadie la dibuja y nadie la ordena. */
+            enableGrouping: false,
+            aggregationFn: c.aggregate ?? "count",
+        })),
+        /* Una columna por NIVEL, no por campo. Es la única forma de que «por mes y
+           adentro por día» sea dos cortes: con el id de la columna, los dos niveles
+           de `registered_at` eran el mismo id repetido, y un mismo id no se puede
+           agrupar dos veces.
+  
+           Y la clave la pone el nivel, no la columna: `value` es la clave de
+           ORDEN —para una fecha, los milisegundos— y agrupar por ella deja un
+           montón por instante, con «1789294903895» de rótulo. Acá entra la misma
+           clave que arman las otras cinco presentaciones, así que los montones de
+           la tabla son LOS MISMOS y lo plegado vale para todas. */
+        ...(levels ?? []).map((level) => helper.accessor((row) => level.keyOf(row), {
+            id: level.id,
+            header: level.label,
+            enableSorting: false,
+            enableGrouping: true,
+        })),
+    ], [columns, helper, levels]);
+    /* The assertion, and why it is safe: `ColumnDef` is INVARIANT in its value
+       type (`in out TValue`), so an array of columns with concrete values is not
+       assignable to the one of `unknown` even though each one on its own is. The
+       library solves this with `helper.columns([...])`, which needs a literal
+       tuple — and here the columns come out of a `map` over what the consumer
+       declared, which is not literal.
+  
+       It is safe because that value is only used by the library to sort and
+       group; it is never read with its type from our side. What gets drawn comes
+       from `c.cell(row)` or from `c.value(row)`, both typed against `T`. */
+    const table = useTable({
+        features: FEATURES,
+        data,
+        columns: defs,
+        getRowId: (row) => getRowId(row),
+        state: {
+            sorting: sort === null || sort === undefined
+                ? []
+                : [{ id: sort.key, desc: sort.direction === "desc" }],
+            grouping: (levels ?? []).map((level) => level.id),
+        },
+        // Groups start open: grouping and then having to open each group is two
+        // gestures for what the user asked for in one.
+        initialState: { expanded: true },
+    });
+    const rows = table.getRowModel().rows;
+    /**
+     * The PATH of a row: the values of every group it hangs from, outermost
+     * first.
+     *
+     * The identity of a pile is its route and not its value, because with several
+     * levels two piles can be called the same — «2026-09» inside «Ferretería Sur» and
+     * «2026-09» inside «Distribuidora Andina» are different piles, and folding one must not
+     * fold the other. It walks up because that is where TanStack keeps the
+     * ancestry; a leaf contributes nothing, since `groupingColumnId` is only set
+     * on grouped rows.
+     */
+    function pathOf(row) {
+        const path = [];
+        let node = row;
+        while (node !== undefined) {
+            const columnId = node.groupingColumnId;
+            if (columnId !== undefined && columnId !== null) {
+                path.unshift(String(node.getGroupingValue(columnId) ?? "—"));
+            }
+            node = node.getParentRow();
+        }
+        return path;
+    }
+    /* TanStack keeps every leaf in the model when `expanded: true`. Folding is
+       ours: the same path keys as the rows presentation, so switching present
+       does not reopen a group.
+  
+       It checks EVERY ancestor and not just the parent. With one level they were
+       the same thing; with several, folding the outer pile has to take the inner
+       ones with it — otherwise closing «Ferretería Sur» leaves its months on screen,
+       orphaned under a header that says it is closed. */
+    const drawn = collapsed === undefined
+        ? rows
+        : rows.filter((row) => {
+            let node = row.getParentRow();
+            while (node !== undefined) {
+                if (collapsed.includes(pathKey(pathOf(node))))
+                    return false;
+                node = node.getParentRow();
+            }
+            return true;
+        });
+    const selecting = onSelectedChange !== undefined;
+    const leaves = useMemo(() => rows.filter((r) => r.subRows.length === 0), [rows]);
+    /* The aggregates are computed by the component and not by TanStack: its
+       `aggregationFn` lives in the GROUP model, and a footer exists precisely when
+       there are no groups. */
+    const footer = useMemo(() => (totals ? columns.map((c) => aggregateOf(c, data)) : null), [totals, columns, data]);
+    const all = leaves.length > 0 && leaves.every((r) => selected?.has(r.id) === true);
+    const some = leaves.some((r) => selected?.has(r.id) === true);
+    function toggle(id, on) {
+        const n = new Set(selected ?? []);
+        if (on)
+            n.add(id);
+        else
+            n.delete(id);
+        onSelectedChange?.(n);
+    }
+    const grid = (_jsxs(Table, { height: height, children: [_jsxs(THead, { children: [selecting ? (_jsx(Th, { width: 36, children: _jsx(SelectBox, { label: copy.selection.all, checked: all, indeterminate: some, onChange: (v) => onSelectedChange?.(v ? new Set(leaves.map((r) => r.id)) : new Set()) }) })) : null, columns.map((c) => (_jsx(Th, { sortKey: c.sortable === false ? undefined : c.id, sort: sort, onSort: onSortChange, numeric: c.numeric, width: c.width, children: c.header }, c.id))), rowActions === undefined ? null : _jsx(Th, { width: 1, children: "" })] }), _jsxs("tbody", { children: [drawn.map((row) => {
+                        const isGroup = row.subRows.length > 0;
+                        if (isGroup) {
+                            const path = pathOf(row);
+                            const key = pathKey(path);
+                            const depth = path.length - 1;
+                            const id = row.groupingColumnId ?? undefined;
+                            const level = levels?.find((one) => one.id === id);
+                            /* La CLAVE del montón —la del motor— y el rótulo, que lo pone el
+                               nivel: son dos textos y sólo el segundo cambia con el idioma. */
+                            const value = path[depth] ?? key;
+                            const open = collapsed === undefined
+                                ? row.getIsExpanded()
+                                : collapsed.includes(key) !== true;
+                            return (
+                            /* The group row: it spans the whole width, says which value it
+                               groups by and how many are inside. The counter is what makes it
+                               useful without opening it. */
+                            _jsx("tr", { className: "border-b border-line bg-ground", children: _jsx("td", { colSpan: columns.length + (selecting ? 1 : 0) + (rowActions === undefined ? 0 : 1), className: "px-3 py-1.5", style: depth === 0
+                                        ? undefined
+                                        : { paddingLeft: `calc(var(--spacing-indent) * ${depth} + 0.75rem)` }, children: _jsxs("button", { type: "button", onClick: () => onGroupToggle === undefined ? row.toggleExpanded() : onGroupToggle(key), "aria-expanded": open, className: "inline-flex items-center gap-1.5 rounded-control text-meta font-medium text-ink transition-colors duration-(--duration-instant) hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: [_jsx(ChevronRight, { className: `size-(--size-icon-sm) text-muted transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true }), level === undefined ? null : (_jsx("span", { className: "text-micro font-normal text-muted/70", children: level.label })), _jsx("span", { children: level === undefined ? value : level.labelOf(value) }), _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: row.getLeafRows().length.toLocaleString(copy.locale) })] }) }) }, row.id));
+                        }
+                        const original = row.original;
+                        return (_jsxs(Tr, { selected: selected?.has(row.id) === true, onClick: onRowClick === undefined ? undefined : () => onRowClick(original), children: [selecting ? (_jsx(Td, { children: _jsx(SelectBox, { label: copy.selection.row, checked: selected?.has(row.id) === true, onChange: (v) => toggle(row.id, v) }) })) : null, columns.map((c) => {
+                                    const t = c.tone?.(original);
+                                    const n = c.note?.(original);
+                                    const edit = c.edit?.when?.(original) === false ? undefined : c.edit;
+                                    return (_jsx(Td, { numeric: c.numeric, mono: c.mono === true, ...(t === undefined ? {} : { tone: t }), ...(n === undefined ? {} : { title: n }), children: edit !== undefined ? (_jsx(CellEditor, { label: fillCopy(copy.inlineEdit.editCell, { column: c.header }), numeric: c.numeric === true, editor: (done) => edit.render(original, done), children: drawCell(copy, c, original) })) : copyable && c.copy !== false ? (_jsx(CellCopy, { header: c.header, numeric: c.numeric === true, ...(c.copy === undefined ? {} : { value: c.copy(original) }), children: drawCell(copy, c, original) })) : (drawCell(copy, c, original)) }, c.id));
+                                }), rowActions === undefined ? null : (_jsx(RowActions, { actions: rowActions(original) }))] }, row.id));
+                    }), create === undefined || draft === null ? null : (_jsxs(EditRow, { as: "tr", rowId: "\\u0000draft", rowRef: (node) => {
+                            draftRow.current = node;
+                        }, editable: true, editing: true, tabbable: false, className: "group/row", onStart: () => { }, onCommit: saveDraft, onCancel: () => {
+                            backToAdd.current = true;
+                            create.onCancel();
+                        }, onMove: () => { }, onFocusRow: () => { }, onTabOut: (direction) => {
+                            /* Past the last control: saved, and the next one started — unless nothing
+                               was written, which is «I am done». Backwards, the browser's way. */
+                            if (direction === "prev" || !touched.current)
+                                return false;
+                            create.onCommit(draft);
+                            start();
+                            return true;
+                        }, children: [selecting ? _jsx("td", { className: DRAFT_CELL }) : null, columns.map((c) => (_jsx("td", { ...(c.input === undefined ? {} : { "data-edit": "" }), className: `${DRAFT_CELL} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: c.input?.(draft, (next) => {
+                                    touched.current = true;
+                                    create.onChange(next);
+                                }) ?? null }, c.id))), rowActions === undefined ? null : _jsx("td", { className: DRAFT_CELL })] }))] }), footer === null ? null : (_jsx("tfoot", { className: "sticky bottom-0 z-10 bg-ground", children: _jsxs("tr", { className: "border-t border-line-strong", children: [selecting ? _jsx("td", {}) : null, columns.map((c, i) => {
+                            const value = footer[i] ?? null;
+                            return (_jsx("td", { className: `px-3 py-1.5 text-meta font-semibold text-ink ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: i === 0 && value === null ? (_jsxs("span", { className: "text-muted", children: [data.length.toLocaleString(copy.locale), " ", data.length === 1 ? copy.table.row : copy.table.rows] })) : value === null ? null : (aggregateLabel(copy, c, value)) }, c.id));
+                        }), rowActions === undefined ? null : _jsx("td", {})] }) }))] }));
+    if (create === undefined)
+        return grid;
+    return (_jsxs("div", { className: "flex min-w-0 flex-col", children: [grid, writing ? null : (_jsx("div", { className: "px-1 py-0.5", children: _jsxs("button", { ref: addButton, type: "button", onClick: start, className: "flex w-full items-center gap-1.5 rounded-control px-3 py-1 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 }), create.label ?? copy.table.add] }) }))] }));
+}
+/* A cell of the row being written: the table's cell, washed like an edited row. */
+const DRAFT_CELL = "border-b border-line bg-primary/5 px-3 py-1 align-middle text-meta text-ink first:rounded-l-control last:rounded-r-control";