@sincpro/web-ui 0.1.0 → 1.0.0

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

@@ -1,4 +1,5 @@
 import { type Grouping } from "../../foundations/grouping.js";
+import { type FlagProps } from "../notice/Flag.js";
 import { type ReactNode } from "react";
 /** Where a column goes when the row is drawn as a stacked card (a narrow box).
  *  `trail` sits at the top right, beside the title — a state, the row's buttons. */
@@ -28,7 +29,32 @@ export interface EditColumn<T> {
      *  discount. `null` or `""` leaves it out of that row's line — a zero discount is
      *  not news. Without it the line reads «<header> <cell>». */
     brief?: (row: T) => ReactNode;
+    /** Drawn on section and note rows too, instead of being covered by their text — the
+     *  row's buttons. `render` receives the band's row. */
+    onBands?: boolean;
 }
+/** What a row that is not a line is. See «sections and notes» in the file's header. */
+export type EditBands<T> = {
+    /** `section` heads the lines under it; `note` is a sentence between lines; `null` is a
+     *  line. */
+    kind: (row: T) => "section" | "note" | null;
+    /** The band's text as it reads. */
+    render: (row: T) => ReactNode;
+    /** Its control while the row is edited — a text field, named. */
+    edit?: (row: T, set: (next: T) => void) => ReactNode;
+    /** What a section's lines add up to in `column`, already formatted; `null` where the
+     *  column does not add up. The lines are the ones under it until the next section. */
+    total?: (column: EditColumn<T>, lines: readonly T[]) => ReactNode | null;
+};
+/** One more way to add, beside «add a line»: a section, a note. */
+export type EditAdd = {
+    label: string;
+    /** As `onAdd`: return the new row's id and it opens. */
+    onAdd: () => string | void | Promise<string | void>;
+};
+/** 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 declare function sectionLines<T>(rows: readonly T[], getRowId: (row: T) => string, kind: (row: T) => "section" | "note" | null): Map<string, T[]>;
 /**
  * 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),
@@ -39,6 +65,56 @@ export declare function stackPlaces(columns: readonly {
     stack?: StackPlace;
     numeric?: boolean;
 }[]): StackPlace[];
+/** 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). */
+export declare function firstControl(row: HTMLElement): HTMLElement | null;
+/** Where `Tab` goes from the edge of an edited row: the next or previous row opened, a new
+ *  row added, or out of the table the browser's way. */
+export type TabTarget = {
+    kind: "row";
+    id: string;
+} | {
+    kind: "add";
+} | {
+    kind: "leave";
+};
+/**
+ * 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 declare function tabTarget(order: readonly string[], from: string, direction: "next" | "prev", { canAdd, blank }: {
+    canAdd: boolean;
+    blank: boolean;
+}): TabTarget;
+export type RowKey = "ArrowDown" | "ArrowUp" | "Home" | "End";
+/**
+ * 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 — 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.
+ */
+export declare function EditRow({ as, rowId, rowRef, editable, editing, tabbable, className, onStart, onCommit, onCancel, onMove, onFocusRow, onTabOut, children, }: {
+    as: "tr" | "li";
+    rowId: string;
+    rowRef: (node: HTMLElement | null) => void;
+    editable: boolean;
+    editing: boolean;
+    tabbable: boolean;
+    className: string;
+    onStart: (viaKeyboard: boolean) => void;
+    onCommit: (refocus: boolean) => void;
+    onCancel: () => void;
+    onMove: (key: RowKey) => void;
+    onFocusRow: () => void;
+    /** `Tab` left the row by one of its edges. `true` = the table took it (opened another
+     *  row, added one); `false` = the browser moves the focus as usual. */
+    onTabOut: (direction: "next" | "prev") => boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
 /**
  * A table whose rows are edited in place, one row at a time.
  *
@@ -59,13 +135,16 @@ 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, onOpen, }: {
+groupTotal, height, layout, onOpen, onDiscard, bands, adds, flag, onReorder, }: {
     rows: readonly T[];
     columns: readonly EditColumn<T>[];
     getRowId: (row: T) => string;
     onChange?: (id: string, next: T) => void;
     onRemove?: (id: string) => void;
-    onAdd?: () => void;
+    /** «Add a line». Return the new row's id —or a promise of it, when the backend makes
+     *  the record— and the table opens that row with the focus on its first control.
+     *  Return nothing and the row just appears, closed. */
+    onAdd?: () => string | void | Promise<string | void>;
     addLabel?: string;
     totals?: readonly (ReactNode | null)[];
     empty?: string;
@@ -93,4 +172,25 @@ groupTotal, height, layout, onOpen, }: {
      *  form of its own, a dialog that is a bottom sheet on a phone. The table ignores it:
      *  there the row is edited where it is read. */
     onOpen?: (id: string) => void;
+    /** Take back a row `onAdd` opened when it is abandoned: `Escape` on it, or leaving it
+     *  without a single change. Not `onRemove`: nobody removed a line, so there is nothing
+     *  to undo or to announce. Without it the blank row stays. */
+    onDiscard?: (id: string) => void;
+    /** Rows that are not lines: sections and notes. See the file's header. */
+    bands?: EditBands<T>;
+    /** More ways to add, drawn beside «add» under the grid: «add a section», «add a note». */
+    adds?: readonly EditAdd[];
+    /** A warning about one row — stock, a price under cost — drawn as a `Flag` at its start.
+     *  `null` for the rows with nothing to say, which should be most of them. `owner` is what
+     *  the record's activity says it belongs to («Línea 3 · Impresora…»); without it, the
+     *  row's first value. */
+    flag?: (row: T) => (Omit<FlagProps, "children"> & {
+        detail?: ReactNode;
+        owner?: string;
+    }) | null;
+    /** The rows have an order of their own — the lines of an order, Odoo's `sequence` — and it
+     *  is changed by dragging the grip at the start of a row, or with Alt + ↑ / ↓ on it. `before`
+     *  is the row it lands in front of; `null`, the end. Off while grouped (the piles decide the
+     *  order) and in the stacked layout. */
+    onReorder?: (id: string, before: string | null) => void;
 }): import("react").JSX.Element;

package/dist/primitives/table/EditableTable.js

@@ -6,9 +6,28 @@ 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 { Plus, Trash2 } from "lucide-react";
+import { NoteCard } from "../field/note.js";
+import { Flag } from "../notice/Flag.js";
+import { HEADER_TEXT } from "./Table.js";
+import { GripVertical, 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 +55,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 +106,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 +161,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 +240,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, onReorder, }) {
     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 +275,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 +334,127 @@ 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);
+    /* REORDER — a grip at the start of each row. Dragged, the row shows where it would land (a
+       line over the row it goes in front of); Alt + ↑ / ↓ on the grip does the same by keyboard. */
+    const reorderable = onReorder !== undefined && grouping === undefined && !stacked;
+    /* A ref and not state: `dragover` can arrive before React re-renders after `dragstart`. */
+    const dragged = useRef(null);
+    const [landing, setLanding] = useState(undefined);
+    const after = (id) => order[order.indexOf(id) + 1] ?? null;
+    const land = (id, before) => {
+        if (before === id || before === after(id))
+            return;
+        onReorder?.(id, before);
+    };
+    const overRow = (event) => {
+        if (dragged.current === null)
+            return;
+        const tr = event.target.closest("tr[data-row-id]");
+        if (tr === null)
+            return;
+        event.preventDefault();
+        const id = tr.dataset["rowId"] ?? "";
+        const box = tr.getBoundingClientRect();
+        setLanding(event.clientY < box.top + box.height / 2 ? id : after(id));
+    };
+    const lineOver = (id) => (landing === id ? "border-t-2 border-t-primary" : "");
+    const grip = (id, mark) => (_jsx("td", { className: `w-0 py-1 pr-0 pl-1 align-middle ${mark} ${lineOver(id)}`, children: _jsx("button", { type: "button", draggable: true, "aria-label": copy.editable.reorder, title: copy.editable.reorderHint, "aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown", ...(editable && stop !== id ? { tabIndex: -1 } : {}), onClick: (event) => event.stopPropagation(), onKeyDown: (event) => {
+                if (!event.altKey || (event.key !== "ArrowUp" && event.key !== "ArrowDown"))
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                const at = order.indexOf(id);
+                if (event.key === "ArrowUp" && at > 0)
+                    land(id, order[at - 1] ?? null);
+                if (event.key === "ArrowDown" && at < order.length - 1)
+                    land(id, order[at + 2] ?? null);
+            }, onDragStart: (event) => {
+                event.dataTransfer.setData("text/plain", id);
+                event.dataTransfer.effectAllowed = "move";
+                const tr = event.currentTarget.closest("tr");
+                if (tr !== null)
+                    event.dataTransfer.setDragImage(tr, 16, 16);
+                dragged.current = id;
+            }, onDragEnd: () => {
+                dragged.current = null;
+                setLanding(undefined);
+            }, className: "flex cursor-grab items-center rounded-control p-0.5 text-muted opacity-40 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 hover:text-ink focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-primary active:cursor-grabbing", children: _jsx(GripVertical, { "aria-hidden": true, className: "size-(--size-icon-sm)", strokeWidth: 2 }) }) }));
     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 +466,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 +517,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 +558,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 +567,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 +591,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. */
@@ -381,7 +602,20 @@ groupTotal, height, layout = "auto", onOpen, }) {
                         return null;
                     return (_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-meta", children: [_jsx("dt", { className: "text-muted", children: c.header }), _jsx("dd", { className: "font-semibold text-ink tabular-nums", children: total })] }, c.id));
                 }) }))] }));
-    return (_jsxs("div", { ref: frame, className: "min-w-0", children: [_jsx("div", { ref: box.ref, className: `min-w-0 ${box.className}`, style: box.style, children: stacked ? (list) : (_jsxs("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", children: [_jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsxs("tr", { children: [columns.map((c) => (_jsx("th", { scope: "col", style: c.width === undefined ? undefined : { width: c.width }, className: `border-b border-line-strong text-meta font-medium whitespace-nowrap text-muted ${cell} ${c.numeric === true ? "text-right" : "text-left"}`, children: c.header }, c.id))), onRemove === undefined ? null : (_jsx("th", { className: "w-0 border-b border-line-strong" }))] }) }), _jsx("tbody", { children: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length + (onRemove === undefined ? 0 : 1), className: `text-meta text-muted italic ${cell}`, children: emptyText }) })) : (drawn.map((entry) => {
+    return (_jsxs("div", { ref: frame, className: "min-w-0", children: [_jsx("div", { ref: box.ref, className: `min-w-0 ${box.className}`, style: box.style, children: stacked ? (list) : (_jsxs("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", children: [_jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsxs("tr", { children: [reorderable ? _jsx("th", { className: "w-0 border-b border-line-strong" }) : null, columns.map((c) => (_jsx("th", { scope: "col", style: c.width === undefined ? undefined : { width: c.width }, className: `border-b border-line-strong ${HEADER_TEXT} ${cell} ${c.numeric === true ? "text-right" : "text-left"}`, children: c.header }, c.id))), onRemove === undefined ? null : (_jsx("th", { className: "w-0 border-b border-line-strong" }))] }) }), _jsx("tbody", { ...(reorderable
+                                ? {
+                                    onDragOver: overRow,
+                                    onDrop: (event) => {
+                                        event.preventDefault();
+                                        if (dragged.current !== null && landing !== undefined)
+                                            land(dragged.current, landing);
+                                        dragged.current = null;
+                                        setLanding(undefined);
+                                    },
+                                }
+                                : {}), children: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length +
+                                        (onRemove === undefined ? 0 : 1) +
+                                        (reorderable ? 1 : 0), className: `text-meta text-muted italic ${cell}`, children: emptyText }) })) : (drawn.map((entry) => {
                                 if (entry.pile !== undefined) {
                                     const pile = entry.pile;
                                     const inside = pile.piles.length === 0 ? pile.items : pileItems(pile.piles);
@@ -390,7 +624,7 @@ groupTotal, height, layout = "auto", onOpen, }) {
                                      columna y cada total bajo la suya. Un total en un rincón
                                      obliga a buscar de qué columna es; alineado no hay nada que
                                      buscar. */
-                                    _jsxs("tr", { children: [columns.map((c, ci) => (_jsx("td", { className: `bg-ground text-meta ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, style: ci === 0 && pile.depth > 0
+                                    _jsxs("tr", { children: [reorderable ? _jsx("td", { className: "w-0 bg-ground" }) : null, columns.map((c, ci) => (_jsx("td", { className: `bg-ground text-meta ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, style: ci === 0 && pile.depth > 0
                                                     ? {
                                                         paddingLeft: `calc(var(--spacing-indent) * ${pile.depth} + 0.625rem)`,
                                                     }
@@ -401,6 +635,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: [reorderable ? grip(id, bandMark) : null, _jsx("td", { colSpan: span, ...(control ? { "data-edit": "" } : {}), className: `text-meta ${bandMark} ${lineOver(id)} ${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 +659,20 @@ 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: [reorderable ? grip(id, mark) : null, 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));
+                                            /* Not `mark`: that name is the row's border and wash, above. Shadowed,
+                                               the cells were drawn with the class «null» — no hairline, no hover. */
+                                            const flagged = ci === 0 ? flagOf(row, true) : null;
+                                            return (_jsx("td", { ...(control ? { "data-edit": "" } : {}), className: `text-meta text-ink ${mark} ${lineOver(id)} ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: flagged === null ? (control ? (c.edit?.(row, set)) : (c.render(row))) : (_jsxs("span", { className: "flex min-w-0 items-start gap-1.5", children: [flagged, _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: [reorderable ? _jsx("td", { className: "border-t border-line-strong" }) : null, 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)))] }))] }));
 }