@sincpro/web-ui 0.1.0 → 0.2.0

package/dist/primitives/table/EditableTable.js

@@ -6,9 +6,27 @@ import { pathKey, pileIsOpen, pileItems, pilesOf, } from "../../foundations/grou
 import { HANDHELD_WIDTH } from "../../foundations/layout.js";
 import { stickyTop, useScrollBox } from "../../foundations/sticky.js";
 import { IconButton } from "../button/Button.js";
+import { NoteCard } from "../field/note.js";
+import { Flag } from "../notice/Flag.js";
 import { Plus, Trash2 } from "lucide-react";
 import { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { useKeyboard } from "react-aria";
+/** The lines each section heads: the rows after it up to the next section. Notes do not
+ *  cut a section, and are not lines. */
+export function sectionLines(rows, getRowId, kind) {
+    const out = new Map();
+    let current = null;
+    for (const row of rows) {
+        const k = kind(row);
+        if (k === "section") {
+            current = [];
+            out.set(getRowId(row), current);
+        }
+        else if (k === null)
+            current?.push(row);
+    }
+    return out;
+}
 /**
  * Where each column goes in the stacked card, defaults resolved: a declared `stack`
  * wins; otherwise the first undeclared column is the title (unless one was declared),
@@ -36,14 +54,47 @@ function pileTag(pile, locale) {
 /** The focus ring of an operable row: drawn on the row, inset, so it is not cut by the
  *  box and does not move the cells. */
 const RING = "outline-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary forced-colors:focus-visible:outline-[Highlight]";
-/** What can take the focus in a row. Filtered again in `firstControl`: React Aria's
- *  hidden form mirrors (a `<select>` behind a `Select`) match this and are not stops. */
+/** What can take the focus in a row. Filtered again in `stopsIn`: React Aria's hidden form
+ *  mirrors (a `<select>` behind a `Select`, an `<input hidden>` in a date picker) match this
+ *  and are not stops. */
 const FOCUSABLE = 'input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), a[href], [tabindex]';
+/** What `Tab` stops on inside `scope` of a row: focusable, and not a hidden form mirror.
+ *
+ *  Context: NOT filtered by `aria-hidden` / `inert`. While a list is open (a tags field, a
+ *  picker) React Aria hides everything outside it that way — the rest of the row included —
+ *  and the row then looked as if its open control were its last: `Tab` added a new row from
+ *  the middle of this one. The mirrors carry their own marks instead. */
+function stopsIn(row, scope) {
+    return [...row.querySelectorAll(scope)].filter((el) => el.tabIndex >= 0 && el.closest("[hidden], [data-react-aria-prevent-focus]") === null);
+}
+/** The controls of the editable cells of a row, in tab order. */
+function editStops(row) {
+    return stopsIn(row, `[data-edit] :is(${FOCUSABLE})`);
+}
 /** The first control of a row being edited: the first one in an editable cell, else
  *  anything focusable in the row (a column without `edit` may still hold a button). */
-function firstControl(row) {
-    const stops = (scope) => [...row.querySelectorAll(scope)].find((el) => el.tabIndex >= 0 && el.closest('[aria-hidden="true"], [inert]') === null) ?? null;
-    return stops(`[data-edit] :is(${FOCUSABLE})`) ?? stops(FOCUSABLE);
+export function firstControl(row) {
+    return editStops(row)[0] ?? stopsIn(row, FOCUSABLE)[0] ?? null;
+}
+/** The last control of a row being edited — where `Shift+Tab` from the next row lands. */
+function lastControl(row) {
+    return editStops(row).at(-1) ?? stopsIn(row, FOCUSABLE).at(-1) ?? null;
+}
+/**
+ * Where `Tab` past the last control (`next`) or `Shift+Tab` before the first (`prev`) of
+ * the edited row `from` goes, over the rows in the order they are drawn.
+ *
+ * Past the last row it adds one when the table can — unless `from` is itself a row just
+ * added and still blank: one more `Tab` there means «I am done», not «another blank line».
+ */
+export function tabTarget(order, from, direction, { canAdd, blank }) {
+    const at = order.indexOf(from);
+    if (at === -1)
+        return { kind: "leave" };
+    const to = order[direction === "next" ? at + 1 : at - 1];
+    if (to !== undefined)
+        return { kind: "row", id: to };
+    return direction === "next" && canAdd && !blank ? { kind: "add" } : { kind: "leave" };
 }
 /** Keys a control inside the row already answers with `Enter`: a button presses, a
  *  link follows, a text area breaks the line, an open list picks its option. */
@@ -54,10 +105,11 @@ function ownsEnter(target) {
 /**
  * One body row. Its own component so that it can hold React Aria's `useKeyboard`
  * (a hook per row) and the timer that decides whether the focus really left it.
- * The same row is a `<tr>` in the table and an `<li>` in the stacked list: one
- * keyboard model, two shapes.
+ * The same row is a `<tr>` in the table and an `<li>` in the stacked list — and the row
+ * of a new record in `DataTable`: one keyboard model, three shapes. Exported for that
+ * family sibling only; it is not in the barrel.
  */
-function EditRow({ as, rowId, rowRef, editable, editing, tabbable, className, onStart, onCommit, onCancel, onMove, onFocusRow, children, }) {
+export function EditRow({ as, rowId, rowRef, editable, editing, tabbable, className, onStart, onCommit, onCancel, onMove, onFocusRow, onTabOut, children, }) {
     const leaving = useRef(null);
     const stay = () => {
         if (leaving.current !== null)
@@ -108,10 +160,23 @@ function EditRow({ as, rowId, rowRef, editable, editing, tabbable, className, on
              that field write the value it was holding (it commits on blur). */
         onKeyDownCapture: editing
             ? (e) => {
-                if (e.key !== "Enter" || e.nativeEvent.isComposing)
+                if (e.nativeEvent.isComposing)
                     return;
                 if (!(e.target instanceof Node) || !e.currentTarget.contains(e.target))
                     return;
+                if (e.key === "Tab") {
+                    /* Only the default is prevented, never the propagation: a combobox still
+                       hears its `Tab` and takes the option it has marked before the row moves. */
+                    const stops = editStops(e.currentTarget);
+                    const edge = e.shiftKey ? stops[0] : stops.at(-1);
+                    if (edge === undefined || !edge.contains(e.target))
+                        return;
+                    if (onTabOut(e.shiftKey ? "prev" : "next"))
+                        e.preventDefault();
+                    return;
+                }
+                if (e.key !== "Enter")
+                    return;
                 if (ownsEnter(e.target))
                     return;
                 e.preventDefault();
@@ -174,8 +239,32 @@ totals, empty, grouping,
 /** El total de una columna DENTRO de un montón, ya formateado. Lo calcula quien
  *  compone, por el mismo motivo que `totals`: sumar significa cosas distintas
  *  según el dominio, y un porcentaje se promedia, no se suma. */
-groupTotal, height, layout = "auto", onOpen, }) {
+groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, }) {
     const copy = useUiCopy();
+    const bandOf = (row) => bands?.kind(row) ?? null;
+    /* The row's mark, before its first value — and, in a record's margin, its card. */
+    const flagOf = (row, withCard = false) => {
+        const said = flag?.(row) ?? null;
+        if (said === null)
+            return null;
+        return (_jsxs(_Fragment, { children: [_jsx(Flag, { tone: said.tone, label: said.label, children: said.detail }), withCard ? (_jsx(NoteCard, { id: `flag-${getRowId(row)}`, ...(said.owner === undefined ? {} : { owner: said.owner }), note: {
+                        tone: said.tone,
+                        label: said.label,
+                        ...(said.detail === undefined ? {} : { detail: said.detail }),
+                    } })) : null] }));
+    };
+    const underSection = useMemo(() => (bands === undefined ? null : sectionLines(rows, getRowId, bands.kind)), [rows, bands, getRowId]);
+    /* Where a band's text stops: the first column with something of its own on that row. */
+    const bandFigures = (row) => {
+        const lines = underSection?.get(getRowId(row)) ?? null;
+        const figures = columns.map((c) => c.onBands === true
+            ? c.render(row)
+            : lines === null
+                ? null
+                : (bands?.total?.(c, lines) ?? null));
+        const first = figures.findIndex((f, i) => columns[i]?.onBands === true || (f !== null && f !== undefined));
+        return { span: first <= 0 ? columns.length : first, figures };
+    };
     const d = useDensity();
     const box = useScrollBox(height === undefined ? {} : { height });
     const [editing, setEditing] = useState(null);
@@ -185,9 +274,13 @@ groupTotal, height, layout = "auto", onOpen, }) {
     /* The row as it was when editing began, to put it back on `Escape`; `touched` says
        whether any control wrote to it since, so a cancel without changes changes nothing. */
     const before = useRef(null);
-    /* Set when the keyboard opened the row: its first control takes the focus once
-       the controls exist. A click opens it without moving the focus. */
+    /* Set when the keyboard opened the row: its first control —or its last, coming back
+       with `Shift+Tab`— takes the focus once the controls exist. A click opens it without
+       moving the focus. */
     const focusOnOpen = useRef(null);
+    /* The id `onAdd` returned, until that row shows up in `rows` and can be opened. */
+    const [arriving, setArriving] = useState(null);
+    const addButton = useRef(null);
     /* La secuencia que se dibuja: montones y filas intercalados. Sin agrupado, las
        filas tal cual — una tabla que no agrupa no paga nada por poder hacerlo. */
     const drawn = useMemo(() => {
@@ -240,35 +333,82 @@ groupTotal, height, layout = "auto", onOpen, }) {
     const opens = stacked && onOpen !== undefined;
     const operable = editable || opens;
     const cell = byDensity(d, "px-3 py-1.5", "px-2 py-1");
-    const add = addLabel ?? copy.editable.add;
+    const addText = addLabel ?? copy.editable.add;
     const emptyText = empty ?? copy.editable.empty;
     /* The rows in the order they are drawn: what the arrows walk. */
     const order = drawn.flatMap((entry) => entry.row === undefined ? [] : [getRowId(entry.row)]);
     const stop = active !== null && order.includes(active) ? active : (order[0] ?? null);
     useEffect(() => {
-        const id = focusOnOpen.current;
-        if (id === null || id !== editing)
+        const target = focusOnOpen.current;
+        if (target === null || target.id !== editing)
             return;
         focusOnOpen.current = null;
-        const node = rowNodes.current.get(id);
-        if (node !== undefined)
-            (firstControl(node) ?? node).focus();
+        const node = rowNodes.current.get(target.id);
+        if (node === undefined)
+            return;
+        const control = target.at === "last" ? lastControl(node) : firstControl(node);
+        (control ?? node).focus();
     }, [editing]);
-    const start = (id, row, viaKeyboard) => {
-        if (opens) {
+    const start = (id, row, viaKeyboard, { at = "first", added = false } = {}) => {
+        /* A row just added is written where it appeared, card or not: it was added in place
+           precisely so that it would not open somewhere else. */
+        if (opens && !added && bandOf(row) === null) {
             setActive(id);
             onOpen?.(id);
             return;
         }
-        before.current = { id, row, touched: false };
-        focusOnOpen.current = viaKeyboard ? id : null;
+        before.current = { id, row, touched: false, added };
+        focusOnOpen.current = viaKeyboard ? { id, at } : null;
         setActive(id);
         setEditing(id);
     };
+    /* The added row is opened the render it appears in — which may be this one, or the one
+       after the backend answered. */
+    useEffect(() => {
+        if (arriving === null)
+            return;
+        const row = rows.find((r) => getRowId(r) === arriving);
+        if (row === undefined)
+            return;
+        setArriving(null);
+        start(arriving, row, true, { added: true });
+        /* `start` and `getRowId` are new every render; what decides is the id and the rows. */
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [arriving, rows]);
+    const add = (maker = onAdd) => {
+        if (maker === undefined)
+            return;
+        const made = maker();
+        if (typeof made === "string")
+            setArriving(made);
+        else if (made instanceof Promise) {
+            void made.then((id) => {
+                if (typeof id === "string")
+                    setArriving(id);
+            });
+        }
+    };
     /* Keyed by the row: a commit that arrives late (the blur of the row you clicked
        away from) must not close the row the click just opened. */
     const close = (id) => setEditing((current) => (current === id ? null : current));
+    /* A row added and abandoned goes away. `true` when it did. */
+    const discard = (id, untouchedOnly) => {
+        const was = before.current;
+        if (was === null || was.id !== id || !was.added || onDiscard === undefined)
+            return false;
+        if (untouchedOnly && was.touched)
+            return false;
+        before.current = null;
+        close(id);
+        onDiscard(id);
+        return true;
+    };
     const commit = (id, refocus) => {
+        if (discard(id, true)) {
+            if (refocus)
+                addButton.current?.focus();
+            return;
+        }
         if (refocus)
             rowNodes.current.get(id)?.focus();
         if (before.current?.id === id)
@@ -280,12 +420,34 @@ groupTotal, height, layout = "auto", onOpen, }) {
            (a number field) writes it now, and the old row is put back after it, not
            before. */
         rowNodes.current.get(id)?.focus();
+        if (discard(id, false)) {
+            /* The row is gone with the focus in it: «add» is where it came from. */
+            addButton.current?.focus();
+            return;
+        }
         const was = before.current;
         before.current = null;
         if (was !== null && was.id === id && was.touched)
             onChange?.(id, was.row);
         close(id);
     };
+    const tabOut = (from, direction) => {
+        const was = before.current;
+        const blank = was !== null && was.id === from && was.added && !was.touched;
+        const target = tabTarget(order, from, direction, { canAdd: onAdd !== undefined, blank });
+        if (target.kind === "leave")
+            return false;
+        commit(from, false);
+        if (target.kind === "add") {
+            add();
+            return true;
+        }
+        const row = rows.find((r) => getRowId(r) === target.id);
+        if (row === undefined)
+            return false;
+        start(target.id, row, true, { at: direction === "next" ? "first" : "last" });
+        return true;
+    };
     /* What a control writes, marking the row as touched for `Escape`. */
     const setter = (id) => (next) => {
         if (before.current?.id === id)
@@ -309,6 +471,7 @@ groupTotal, height, layout = "auto", onOpen, }) {
         onCancel: () => cancel(id),
         onMove: (key) => move(id, key),
         onFocusRow: () => setActive(id),
+        onTabOut: (direction) => tabOut(id, direction),
     });
     const move = (from, key) => {
         const at = order.indexOf(from);
@@ -349,7 +512,7 @@ groupTotal, height, layout = "auto", onOpen, }) {
             ];
         });
         const controls = editable && isEditing ? columns.filter((c) => c.edit !== undefined) : [];
-        return (_jsxs(EditRow, { as: "li", ...rowWiring(id, row), className: `group/row flex min-w-0 flex-col gap-1 rounded-control border-b border-line ${pad} ${isEditing ? "bg-primary/5" : "hover:bg-ink/4"} ${operable ? RING : ""} ${operable && !isEditing ? (opens ? "cursor-pointer" : "cursor-text") : ""}`, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-meta text-ink", children: titles.map((c) => (_jsx("div", { className: "min-w-0", children: c.render(row) }, c.id))) }), trails.map((c) => (_jsx("div", { className: "shrink-0", children: c.render(row) }, c.id))), isEditing && onRemove !== undefined ? (_jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", onClick: () => onRemove(id) })) : null] }), parts.length === 0 && amounts.length === 0 ? null : (_jsxs("div", { className: "flex min-w-0 items-baseline gap-3 text-meta", children: [_jsx("span", { className: "min-w-0 flex-1 text-muted tabular-nums", children: parts.map((p, i) => (_jsxs(Fragment, { children: [i > 0 ? " · " : null, p.node] }, p.id))) }), amounts.map((c) => (
+        return (_jsxs(EditRow, { as: "li", ...rowWiring(id, row), className: `group/row flex min-w-0 flex-col gap-1 rounded-control border-b border-line ${pad} ${isEditing ? "bg-primary/5" : "hover:bg-ink/4"} ${operable ? RING : ""} ${operable && !isEditing ? (opens ? "cursor-pointer" : "cursor-text") : ""}`, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [flagOf(row), _jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-meta text-ink", children: titles.map((c) => (_jsx("div", { className: "min-w-0", children: c.render(row) }, c.id))) }), trails.map((c) => (_jsx("div", { className: "shrink-0", children: c.render(row) }, c.id))), isEditing && onRemove !== undefined ? (_jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", onClick: () => onRemove(id) })) : null] }), parts.length === 0 && amounts.length === 0 ? null : (_jsxs("div", { className: "flex min-w-0 items-baseline gap-3 text-meta", children: [_jsx("span", { className: "min-w-0 flex-1 text-muted tabular-nums", children: parts.map((p, i) => (_jsxs(Fragment, { children: [i > 0 ? " · " : null, p.node] }, p.id))) }), amounts.map((c) => (
                         /* The amount is read by its figure on screen and by its name aloud: a
                            lone «Bs. 1.296,00» at the end of a card does not say what it is. */
                         _jsxs("span", { className: "shrink-0 text-right font-medium whitespace-nowrap text-ink tabular-nums", children: [_jsxs("span", { className: "sr-only", children: [c.header, " "] }), c.render(row)] }, c.id)))] })), controls.length === 0 ? null : (
@@ -358,6 +521,17 @@ groupTotal, height, layout = "auto", onOpen, }) {
                    guess. The name is drawn for the eye; the control carries its own label. */
                 _jsx("div", { className: "grid grid-cols-2 gap-x-3 gap-y-2 pt-1.5", children: controls.map((c) => (_jsxs("div", { "data-edit": "", className: `flex min-w-0 flex-col gap-1 ${c.numeric === true ? "" : "col-span-2"}`, children: [_jsx("span", { "aria-hidden": "true", className: "text-micro text-muted", children: c.header }), c.edit?.(row, set)] }, c.id))) }))] }, id));
     };
+    /* A section or a note on a phone: the band and, for a section, what it adds up to in
+       the card's amount; editing, its control under it. */
+    const bandCard = (row) => {
+        const id = getRowId(row);
+        const band = bandOf(row);
+        const isEditing = editing === id;
+        const lines = underSection?.get(id) ?? null;
+        return (_jsxs(EditRow, { as: "li", ...rowWiring(id, row), className: `flex min-w-0 flex-col gap-1.5 rounded-control border-b border-line ${pad} ${isEditing ? "bg-primary/5" : band === "section" ? "bg-ground" : ""} ${operable ? RING : ""}`, children: [_jsxs("div", { className: "flex min-w-0 items-baseline gap-3 text-meta", children: [_jsx("span", { className: `min-w-0 flex-1 ${band === "section" ? "font-semibold text-ink" : "text-muted italic"}`, children: bands?.render(row) }), lines === null
+                            ? null
+                            : amounts.map((c) => (_jsx("span", { className: "shrink-0 font-semibold text-ink tabular-nums", children: bands?.total?.(c, lines) ?? null }, c.id))), isEditing && onRemove !== undefined ? (_jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", onClick: () => onRemove(id) })) : null] }), isEditing && editable && bands?.edit !== undefined ? (_jsx("div", { "data-edit": "", children: bands.edit(row, setter(id)) })) : null] }, id));
+    };
     const list = (_jsxs(_Fragment, { children: [_jsx("ul", { "data-stacked": "", className: "flex min-w-0 flex-col px-1", children: rows.length === 0 ? (_jsx("li", { className: `text-meta text-muted italic ${pad}`, children: emptyText })) : (drawn.map((entry) => {
                     if (entry.pile !== undefined) {
                         const pile = entry.pile;
@@ -371,7 +545,8 @@ groupTotal, height, layout = "auto", onOpen, }) {
                                 }
                                 : undefined, children: [_jsx("span", { className: "min-w-0 flex-1", children: pileTag(pile, copy.locale) }), amounts.map((c) => (_jsx("span", { className: "shrink-0 text-ink tabular-nums", children: groupTotal?.(c, inside) ?? null }, c.id)))] }, `pile:${pathKey(pile.path)}`));
                     }
-                    return card(entry.row);
+                    const row = entry.row;
+                    return bandOf(row) === null ? card(row) : bandCard(row);
                 })) }), totals === undefined ? null : (
             /* The footer's aggregates, one per line with the column's name: under a card
                there is no column to stand under. */
@@ -401,6 +576,22 @@ groupTotal, height, layout = "auto", onOpen, }) {
                                 const row = entry.row;
                                 const id = getRowId(row);
                                 const isEditing = editing === id;
+                                const band = bandOf(row);
+                                if (band !== null) {
+                                    const { span, figures } = bandFigures(row);
+                                    const bandWash = isEditing
+                                        ? "bg-primary/5"
+                                        : band === "section"
+                                            ? "bg-ground group-hover/row:bg-ink/6"
+                                            : "group-hover/row:bg-ink/4";
+                                    const bandMark = `border-b border-line first:rounded-l-control last:rounded-r-control ${bandWash}`;
+                                    const control = isEditing && editable && bands?.edit !== undefined;
+                                    return (_jsxs(EditRow, { as: "tr", ...rowWiring(id, row), className: `group/row ${editable ? RING : ""} ${editable && !isEditing ? "cursor-text" : ""}`, children: [_jsx("td", { colSpan: span, ...(control ? { "data-edit": "" } : {}), className: `text-meta ${bandMark} ${cell} ${band === "section"
+                                                    ? "font-semibold text-ink"
+                                                    : "text-muted italic"}`, children: control ? bands?.edit?.(row, setter(id)) : bands?.render(row) }), columns.slice(span).map((c, i) => (_jsx("td", { className: `text-meta text-ink ${bandMark} ${cell} ${c.numeric === true
+                                                    ? "text-right font-semibold tabular-nums"
+                                                    : ""}`, children: figures[span + i] ?? null }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: `w-0 py-1 pr-2 pl-1 align-middle ${bandMark}`, children: _jsx("span", { className: "flex opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 group-focus-visible/row:opacity-100 focus-within:opacity-100", onClick: (e) => e.stopPropagation(), children: _jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", ...(editable && stop !== id ? { tabIndex: -1 } : {}), onClick: () => onRemove(id) }) }) }))] }, id));
+                                }
                                 /* The wash lives on the cells. A background on the row paints
                                  edge to edge, and `border-collapse` would ignore a radius. */
                                 const wash = isEditing ? "bg-primary/5" : "group-hover/row:bg-ink/4";
@@ -409,15 +600,18 @@ groupTotal, height, layout = "auto", onOpen, }) {
                                 return (_jsxs(EditRow, { as: "tr", ...rowWiring(id, row), 
                                     /* The focus ring is drawn on the row, inset, so it is not cut by
                                      the box and does not move the cells. */
-                                    className: `group/row ${editable ? RING : ""} ${editable && !isEditing ? "cursor-text" : ""}`, children: [columns.map((c) => {
+                                    className: `group/row ${editable ? RING : ""} ${editable && !isEditing ? "cursor-text" : ""}`, children: [columns.map((c, ci) => {
                                             const control = isEditing && c.edit !== undefined && editable;
-                                            return (_jsx("td", { ...(control ? { "data-edit": "" } : {}), className: `text-meta text-ink ${mark} ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: control ? c.edit?.(row, set) : c.render(row) }, c.id));
+                                            const mark = ci === 0 ? flagOf(row, true) : null;
+                                            return (_jsx("td", { ...(control ? { "data-edit": "" } : {}), className: `text-meta text-ink ${mark} ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: mark === null ? (control ? (c.edit?.(row, set)) : (c.render(row))) : (_jsxs("span", { className: "flex min-w-0 items-start gap-1.5", children: [mark, _jsx("span", { className: "min-w-0 flex-1", children: control ? c.edit?.(row, set) : c.render(row) })] })) }, c.id));
                                         }), onRemove === undefined ? null : (_jsx("td", { className: `w-0 py-1 pr-2 pl-1 align-middle ${mark}`, children: _jsx("span", { className: "flex opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 group-focus-visible/row:opacity-100 focus-within:opacity-100", onClick: (e) => e.stopPropagation(), children: _jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", ...(editable && stop !== id ? { tabIndex: -1 } : {}), onClick: () => onRemove(id) }) }) }))] }, id));
-                            })) }), totals === undefined ? null : (_jsx("tfoot", { children: _jsxs("tr", { children: [columns.map((c, i) => (_jsx("td", { className: `border-t border-line-strong text-meta font-semibold text-ink ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: totals[i] ?? null }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "border-t border-line-strong" }))] }) }))] })) }), onAdd === undefined ? null : (
+                            })) }), totals === undefined ? null : (_jsx("tfoot", { children: _jsxs("tr", { children: [columns.map((c, i) => (_jsx("td", { className: `border-t border-line-strong text-meta font-semibold text-ink ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: totals[i] ?? null }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "border-t border-line-strong" }))] }) }))] })) }), onAdd === undefined && (adds === undefined || adds.length === 0) ? null : (
             /* The «add» goes under the grid, as text, not as a button away from it:
                what is about to happen is that one more row shows up right here.
                The hover is the same inset mark as a row: the shell lines the label
                up with the cells, and the button itself is the rounded wash. It sits
-               outside the scroll box, so a table with its own height keeps it in view. */
-            _jsx("div", { className: "px-1 py-0.5", children: _jsxs("button", { type: "button", onClick: onAdd, className: `flex w-full items-center gap-1.5 rounded-control text-left text-meta text-primary transition-colors duration-(--duration-instant) hover:bg-primary/5 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary ${byDensity(d, "px-3 py-1", "px-2 py-0.5")}`, children: [_jsx(Plus, { className: "size-(--size-icon-sm)", strokeWidth: 2.5, "aria-hidden": true }), add] }) }))] }));
+               outside the scroll box, so a table with its own height keeps it in view.
+               A section and a note sit beside it, quieter: the line is what is added
+               most, so it keeps the lead and the whole free width. */
+            _jsxs("div", { className: "flex flex-wrap items-center gap-x-1 px-1 py-0.5", children: [onAdd === undefined ? null : (_jsxs("button", { ref: addButton, type: "button", onClick: () => add(), className: `flex items-center gap-1.5 rounded-control text-left text-meta text-primary transition-colors duration-(--duration-instant) hover:bg-primary/5 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary ${adds === undefined || adds.length === 0 ? "w-full" : ""} ${byDensity(d, "px-3 py-1", "px-2 py-0.5")}`, children: [_jsx(Plus, { className: "size-(--size-icon-sm)", strokeWidth: 2.5, "aria-hidden": true }), addText] })), (adds ?? []).map((extra) => (_jsx("button", { type: "button", onClick: () => add(extra.onAdd), className: `rounded-control text-left text-meta text-muted transition-colors duration-(--duration-instant) hover:bg-primary/5 hover:text-primary focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary ${byDensity(d, "px-3 py-1", "px-2 py-0.5")}`, children: extra.label }, extra.label)))] }))] }));
 }

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

@@ -20,7 +20,7 @@ value,
  *  nothing. */
 tone, 
 /** What the cell says on hover: «imputado por la mediana». */
-note, height, rowLabel, band, onBandToggle, caption, onCommit, editable, }: {
+note, height, rowLabel, band, onBandToggle, caption, onCommit, editable, onAddRow, }: {
     columns: readonly SheetColumn[];
     rows: number;
     value: (row: number, column: SheetColumn, columnIndex: number) => string | number | null;
@@ -67,4 +67,7 @@ note, height, rowLabel, band, onBandToggle, caption, onCommit, editable, }: {
     /** 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

@@ -4,8 +4,8 @@ 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";
+import { ChevronRight, Plus } from "lucide-react";
+import { useEffect, useState } from "react";
 const TONE = {
     neutral: "bg-ink/6",
     info: "bg-info/12",
@@ -26,7 +26,7 @@ value,
  *  nothing. */
 tone, 
 /** What the cell says on hover: «imputado por la mediana». */
-note, height = 420, rowLabel, band, onBandToggle, caption, onCommit, editable, }) {
+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
@@ -78,6 +78,27 @@ note, height = 420, rowLabel, band, onBandToggle, caption, onCommit, editable, }
         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. */
@@ -92,7 +113,12 @@ note, height = 420, rowLabel, band, onBandToggle, caption, onCommit, editable, }
             }
             else if (e.key === "Enter") {
                 e.preventDefault();
-                commit(e.shiftKey ? -1 : 1, 0);
+                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();
@@ -192,6 +218,13 @@ note, height = 420, rowLabel, band, onBandToggle, caption, onCommit, editable, }
                                                         ? "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/index.d.ts

@@ -1,5 +1,5 @@
-export { type Aggregate, type DataColumn, DataTable, type GroupColumn, } from "./DataTable.js";
-export { EditableTable, type EditColumn, type EditLayout, type StackPlace, stackPlaces, } from "./EditableTable.js";
+export { type Aggregate, type DataColumn, DataTable, type DataTableCreate, type GroupColumn, } from "./DataTable.js";
+export { EditableTable, type EditAdd, type EditBands, type EditColumn, type EditLayout, sectionLines, type StackPlace, stackPlaces, type TabTarget, tabTarget, } 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";

package/dist/primitives/table/index.js

@@ -1,7 +1,7 @@
 /* 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 { EditableTable, sectionLines, stackPlaces, tabTarget, } from "./EditableTable.js";
 export { PivotTable, } from "./PivotTable.js";
 export { ReportTable, } from "./ReportTable.js";
 export { RowActions } from "./RowActions.js";

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

@@ -4,7 +4,7 @@ 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
+ * `Aspects`, así que la actividad —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.
@@ -76,7 +76,7 @@ export type TabItem = {
     notice?: TabNotice;
 };
 /**
- * The strip only: what each tab opens is drawn by whoever uses it (`Record`, `Chatter`).
+ * The strip only: what each tab opens is drawn by whoever uses it (`Record`, `Activity`).
  *
  * 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

package/dist/primitives/tabs/Tabs.js

@@ -22,7 +22,7 @@ const NOTICE_DOT = {
     accent: "bg-accent",
 };
 /**
- * The strip only: what each tab opens is drawn by whoever uses it (`Record`, `Chatter`).
+ * The strip only: what each tab opens is drawn by whoever uses it (`Record`, `Activity`).
  *
  * 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

package/dist/primitives/tag/TagsField.d.ts

@@ -20,6 +20,9 @@ export type TagsFieldProps = {
     id?: string;
     describedBy?: string;
     invalid?: boolean;
+    /** The name of the control when it is NOT inside a `Field` — a cell of an editable table.
+     *  Inside a field, the field's label names it. */
+    "aria-label"?: string;
     /** Forces the mode. By default it inherits the form's: in read mode it draws `Tags`. */
     mode?: FormMode;
 };

package/dist/primitives/tag/TagsField.js

@@ -70,7 +70,7 @@ export function TagsField({ mode, ...props }) {
        to be ABOVE the component that asks for it. */
     return (_jsx(AriaLocale, { children: _jsx(EditableTagsField, { ...props }) }));
 }
-function EditableTagsField({ value, onChange, options, onCreate, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, }) {
+function EditableTagsField({ value, onChange, options, onCreate, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
     const { id, labelledBy, describedBy, invalid } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
@@ -132,7 +132,11 @@ function EditableTagsField({ value, onChange, options, onCreate, placeholder, di
             /* The box grows with the chips: five categories wrap to a second line instead of
                scrolling out of sight. */
             className: "h-auto min-h-(--size-control-md) flex-wrap gap-1 py-1 pl-1.5",
-        }), children: [chips.length === 0 ? null : (_jsx(Tags, { items: chips, ...(labelledBy === undefined ? {} : { labelledBy }) })), _jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, items: listed, selectedKey: null, onSelectionChange: commit, inputValue: text, onInputChange: setText, 
+        }), children: [chips.length === 0 ? null : (_jsx(Tags, { items: chips, ...(labelledBy === undefined
+                    ? ariaLabel === undefined
+                        ? {}
+                        : { label: ariaLabel }
+                    : { labelledBy }) })), _jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, items: listed, selectedKey: null, onSelectionChange: commit, inputValue: text, onInputChange: setText, 
                 /* Arriving at the field shows what can still be added, the way a many2one opens its
                    list on focus. With every tag chosen and no text there is nothing to show, and the
                    list stays closed. */

package/dist/primitives/tree/Tree.d.ts

@@ -0,0 +1,56 @@
+import { type LucideIcon } from "lucide-react";
+/** One record of the hierarchy. With `children` it is a group that folds. */
+export interface TreeItem {
+    id: string;
+    label: string;
+    /** What reads beside the name, at the right, in tabular figures: a balance, a stock, a
+     *  count. Already formatted — the tree does not know a currency from a unit. */
+    meta?: string;
+    icon?: LucideIcon;
+    children?: readonly TreeItem[];
+    /** It cannot be chosen — a view account that groups others and takes no entries. It still
+     *  folds and opens. */
+    disabled?: boolean;
+}
+/** One name or the other: a tree with no name is announced as a lone «tree». */
+type TreeName = {
+    /** The accessible name: «Plan de cuentas». */
+    label: string;
+    labelledBy?: never;
+} | {
+    /** The id of a visible heading that names the tree — the label of the `Field` it lives
+     *  in. */
+    labelledBy: string;
+    label?: never;
+};
+export type TreeProps = TreeName & {
+    items: readonly TreeItem[];
+    /** The groups open right now. Pass it with `onExpandedChange` to own the expansion. */
+    expanded?: readonly string[];
+    /** The groups that start open, when the tree owns its expansion. */
+    defaultExpanded?: readonly string[];
+    onExpandedChange?: (ids: string[]) => void;
+    /** `none` reads; `single` chooses one record (a category, a location); `multiple` a set. */
+    selectionMode?: "none" | "single" | "multiple";
+    /** The chosen ids — a list in both modes, like every other control, so a screen does not
+     *  switch shapes when one becomes many. */
+    selected?: readonly string[];
+    defaultSelected?: readonly string[];
+    onSelectedChange?: (ids: string[]) => void;
+    /** Open the record: Enter, or a click (a double click when the tree chooses one). Without
+     *  it, a click on a group folds or opens it. */
+    onAction?: (id: string) => void;
+    /** What an empty tree says. By default, the copy table's `tree.empty`. */
+    empty?: string;
+};
+/**
+ * A hierarchy of records — the chart of accounts, product categories, warehouse locations —
+ * with its groups that fold, a figure per row, and one or many rows to choose.
+ *
+ * Context: the keyboard is React Aria's `Tree`: arrows walk the visible rows, → opens a group
+ * and ← folds it (or goes up to the parent), Home and End jump, and typing a name moves to it.
+ * Escape does NOT clear the selection: the tree often lives in a dialog or a popover, and
+ * Escape there means «close» — clearing the choice on the way out would lose it without a word.
+ */
+export declare function Tree({ items, label, labelledBy, expanded, defaultExpanded, onExpandedChange, selectionMode, selected, defaultSelected, onSelectedChange, onAction, empty, }: TreeProps): import("react").JSX.Element;
+export {};