@sincpro/web-ui 0.0.0-stage → 0.2.0

package/dist/components/frame/index.js

@@ -0,0 +1,3 @@
+export { SeriesChart } from "./Chart.js";
+export { FrameView } from "./FrameView.js";
+export { columnSeries, frameFromRows, withColumns, } from "./model.js";

package/dist/components/frame/model.d.ts

@@ -0,0 +1,43 @@
+/**
+ * A FRAME is a rectangle of values: columns × rows.
+ *
+ * It is not a domain record and it is not a set of records. ListView talks
+ * about N entities of the same kind (the Facturas list, a queue). Record talks
+ * about ONE entity. The frame talks about the PAYLOAD — the cells that a
+ * record carries, or that a glance extracted from a file — so they can be
+ * shown as a table or as a chart, and so a column can be hidden, without the
+ * design system knowing what an invoice is.
+ *
+ * The value is a function, not a copied matrix: the consumer already has the
+ * bytes somewhere and this layer only reads them.
+ */
+export type FrameCell = string | number | null;
+export type FrameColumn = {
+    id: string;
+    header: string;
+    type?: string;
+    numeric?: boolean;
+    width?: number;
+    /** Payload columns default to optional. Set `false` to pin a column. */
+    optional?: boolean;
+    defaultHidden?: boolean;
+};
+export type Frame = {
+    columns: readonly FrameColumn[];
+    rows: number;
+    value: (row: number, column: FrameColumn, columnIndex: number) => FrameCell;
+};
+export type FramePresent = "table" | "chart";
+export type SeriesBar = {
+    label: string;
+    count: number;
+};
+export declare function frameFromRows(columns: readonly FrameColumn[], rows: readonly (readonly FrameCell[])[]): Frame;
+/** Keep only some columns. The cells still come from the original frame. */
+export declare function withColumns(frame: Frame, ids: readonly string[]): Frame;
+/**
+ * Turn one column into bars: a histogram if the values are numbers, the
+ * most frequent labels otherwise. Twelve bars is the ceiling — more than
+ * that is a table again.
+ */
+export declare function columnSeries(frame: Frame, columnId: string): SeriesBar[];

package/dist/components/frame/model.js

@@ -0,0 +1,101 @@
+import { currentCopy, currentCopyLocale } from "../../foundations/copy.js";
+const BINS = 12;
+const TOP = 12;
+export function frameFromRows(columns, rows) {
+    return {
+        columns,
+        rows: rows.length,
+        value: (row, _column, columnIndex) => rows[row]?.[columnIndex] ?? null,
+    };
+}
+/** Keep only some columns. The cells still come from the original frame. */
+export function withColumns(frame, ids) {
+    const wanted = new Set(ids);
+    const columns = frame.columns.filter((column) => wanted.has(column.id));
+    const indexOf = new Map(frame.columns.map((column, index) => [column.id, index]));
+    return {
+        columns,
+        rows: frame.rows,
+        value: (row, column) => {
+            const index = indexOf.get(column.id) ?? 0;
+            return frame.value(row, column, index);
+        },
+    };
+}
+function asNumber(cell) {
+    if (typeof cell === "number" && Number.isFinite(cell))
+        return cell;
+    if (typeof cell === "string" && cell.trim() !== "") {
+        const n = Number(cell.replace(",", "."));
+        return Number.isFinite(n) ? n : null;
+    }
+    return null;
+}
+function present(cell) {
+    return cell !== null && cell !== "";
+}
+/**
+ * Turn one column into bars: a histogram if the values are numbers, the
+ * most frequent labels otherwise. Twelve bars is the ceiling — more than
+ * that is a table again.
+ */
+export function columnSeries(frame, columnId) {
+    const columnIndex = frame.columns.findIndex((column) => column.id === columnId);
+    const column = frame.columns[columnIndex];
+    if (column === undefined || columnIndex < 0)
+        return [];
+    const cells = [];
+    for (let row = 0; row < frame.rows; row += 1) {
+        cells.push(frame.value(row, column, columnIndex));
+    }
+    const numbers = cells.map(asNumber);
+    const numeric = numbers.filter((n) => n !== null);
+    const filled = cells.filter(present).length;
+    if (filled === 0)
+        return [];
+    if (column.numeric === true || numeric.length / filled >= 0.8) {
+        return histogram(numeric);
+    }
+    return categories(cells);
+}
+function histogram(values) {
+    if (values.length === 0)
+        return [];
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    if (min === max)
+        return [{ label: String(min), count: values.length }];
+    const width = (max - min) / BINS;
+    const counts = Array.from({ length: BINS }, () => 0);
+    for (const value of values) {
+        const slot = Math.min(BINS - 1, Math.floor((value - min) / width));
+        counts[slot] = (counts[slot] ?? 0) + 1;
+    }
+    return counts.map((count, index) => {
+        const from = min + index * width;
+        const to = index === BINS - 1 ? max : from + width;
+        return { label: `${formatTick(from)}–${formatTick(to)}`, count };
+    });
+}
+function categories(cells) {
+    const tally = new Map();
+    for (const cell of cells) {
+        if (!present(cell))
+            continue;
+        const label = String(cell);
+        tally.set(label, (tally.get(label) ?? 0) + 1);
+    }
+    return [...tally.entries()]
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, TOP)
+        .map(([label, count]) => ({
+        label: label === "" ? currentCopy().cell.emptyBin : label,
+        count,
+    }));
+}
+function formatTick(n) {
+    const abs = Math.abs(n);
+    if (abs >= 100 || Number.isInteger(n))
+        return String(Math.round(n));
+    return n.toLocaleString(currentCopyLocale(), { maximumFractionDigits: 1 });
+}

package/dist/components/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./activity/index.js";
+export * from "./assist/index.js";
+export * from "./form/index.js";
+export * from "./frame/index.js";
+export * from "./lines/index.js";
+export * from "./listing/index.js";
+export * from "./navigation/index.js";
+export * from "./record/index.js";
+export * from "./search/index.js";
+export * from "./shell/index.js";

package/dist/components/index.js

@@ -0,0 +1,11 @@
+/* COMPONENTS — primitives composed to answer ONE question of the product, by family. */
+export * from "./activity/index.js";
+export * from "./assist/index.js";
+export * from "./form/index.js";
+export * from "./frame/index.js";
+export * from "./lines/index.js";
+export * from "./listing/index.js";
+export * from "./navigation/index.js";
+export * from "./record/index.js";
+export * from "./search/index.js";
+export * from "./shell/index.js";

package/dist/components/lines/LineItems.d.ts

@@ -0,0 +1,111 @@
+import { type DialogContext } from "../../primitives/dialog/Dialog.js";
+import { type FormMode } from "../../primitives/field/mode.js";
+import type { FlagTone } from "../../primitives/notice/Flag.js";
+import type { DataColumn } from "../../primitives/table/DataTable.js";
+import { type EditColumn, type EditLayout } from "../../primitives/table/EditableTable.js";
+import { type TotalsProps, type TotalsRow } from "../../primitives/value/Totals.js";
+import { type ReactNode } from "react";
+/**
+ * A column of the lines. The same contract as `DataTable`'s columns —`value` is
+ * the raw value (what the search reads), `cell` how it is drawn, `text` how it
+ * reads as plain text— plus `edit`, the control that replaces the cell when the
+ * row is being edited in place.
+ */
+export type LineItemColumn<T> = Pick<DataColumn<T>, "id" | "header" | "value" | "cell" | "text" | "numeric" | "width" | "optional" | "defaultHidden"> & Pick<EditColumn<T>, "stack" | "brief"> & {
+    /** The control while the row is edited in place. Without it the cell stays read
+     *  only — a computed amount, a code. Only simple values belong here; the whole
+     *  line is edited in the `editor`. */
+    edit?: (line: T, set: (next: T) => void) => ReactNode;
+    /** What the lines of a section add up to in this column, already formatted. Only
+     *  with `structure`; without it the section says nothing in this column. */
+    subtotal?: (lines: readonly T[]) => ReactNode;
+};
+/** Which lines are sections or notes, and how their text is read and written. See
+ *  «Sections and notes» in the file's header. */
+export type LineStructure<T> = {
+    kind: (line: T) => "line" | "section" | "note";
+    text: (line: T) => string;
+    withText: (line: T, text: string) => T;
+    /** A blank section; enables «Agregar una sección». */
+    newSection?: () => T;
+    /** A blank note; enables «Agregar una nota». */
+    newNote?: () => T;
+};
+/** What the popup editor receives besides the draft. */
+export type LineEditorState = {
+    /** «Listo» was pressed and the draft was not valid: show the errors now, not before. */
+    tried: boolean;
+    /** A line that does not exist yet. */
+    isNew: boolean;
+};
+export type LineItemsProps<T> = {
+    lines: readonly T[];
+    columns: readonly LineItemColumn<T>[];
+    getLineId: (line: T) => string;
+    /** How a line is named — in the removal notice, the editor's header and for the
+     *  screen reader next to each row's buttons. Defaults to the first column's text. */
+    lineLabel?: (line: T) => string;
+    /** `read` for a document that can no longer change (a posted invoice): no add, no
+     *  edit, no remove — just the lines. By default it inherits the form's mode. */
+    mode?: FormMode;
+    /** A line changed, in place or in the editor. Without it nothing is editable. */
+    onChange?: (id: string, next: T) => void;
+    /** A new line, already filled in the editor (or blank, without an editor). */
+    onAdd?: (line: T) => void;
+    /** The blank line «Agregar una línea» starts from. Required for adding. */
+    newLine?: () => T;
+    /** A line was removed. It is gone at once; the notice offers to undo it. */
+    onRemove?: (id: string) => void;
+    /** Put a removed line back where it was. Without it the notice has no «Deshacer». */
+    onRestore?: (line: T, index: number) => void;
+    /** The whole line as a form: the product, the quantity, the price, the discount.
+     *  Written with the system's `Field` controls; `set` replaces the draft. */
+    editor?: (draft: T, set: (next: T) => void, state: LineEditorState) => ReactNode;
+    /** Whether the draft can be saved. When it cannot, «Listo» keeps the editor open
+     *  and `state.tried` turns on so the editor can say what is missing. */
+    isValid?: (draft: T) => boolean;
+    /** What the editor is about, in its header: «factura · FAC/2026/0118». */
+    context?: DialogContext;
+    /** What the search reads. Defaults to every column's `text` or `value`. */
+    searchText?: (line: T) => string;
+    /** The search shows up only with MORE lines than this. Four lines are read, not
+     *  searched; a search box over them is a control that answers nothing. */
+    searchFrom?: number;
+    /** The money summary under the lines, on the right: the system's `Totals`. Its rows,
+     *  or all of it — payments deducted, the balance due, the credits that can be applied. */
+    totals?: readonly TotalsRow[] | TotalsProps;
+    /** `auto` (the default) draws the lines as stacked cards below
+     *  `--container-handheld`; `table` and `stacked` force one. */
+    layout?: EditLayout;
+    /** How «Agregar una línea» adds: `editor` opens the blank line in the dialog;
+     *  `inline` puts it in the table, open, under the others (see the file's header).
+     *  By default the dialog when there is an `editor`, the table when there is not. */
+    adding?: "inline" | "editor";
+    /** Open the whole line somewhere else than this block's dialog — the app's `Drill`, so
+     *  the line opens as «S00142 › Línea 3» and can go deeper (its product, its lot) without
+     *  a modal over a modal. When given, it replaces `editor` for existing lines. */
+    onOpenLine?: (id: string) => void;
+    /** A warning about one line, on the line: «Sin existencias», «Precio bajo el costo».
+     *  `EditableTable`'s `flag`, passed through. */
+    flag?: (line: T) => {
+        tone: FlagTone;
+        label: string;
+        detail?: ReactNode;
+        owner?: string;
+    } | null;
+    /** Sections and notes among the lines. See the file's header. */
+    structure?: LineStructure<T>;
+    /** Which columns are on screen, when the owner remembers it (a preference). */
+    visibleColumnIds?: readonly string[];
+    onVisibleColumnIdsChange?: (ids: readonly string[]) => void;
+};
+/**
+ * The lines of a document inside its record: a count and a search above, the lines
+ * (edited in place or in a popup editor), and the totals under them on the right.
+ *
+ * Context: the record used to compose this by hand — a `Table`, its rows, a
+ * `Totals` — and every module did it a little differently: where «add» went, whether
+ * removing asked first, what an empty document said. One component, built on
+ * `EditableTable` and `Dialog`, makes the one2many the same block everywhere.
+ */
+export declare function LineItems<T>({ lines, columns, getLineId, lineLabel, mode, onChange, onAdd, newLine, onRemove, onRestore, editor, isValid, context, searchText, searchFrom, totals, layout, adding, onOpenLine, flag, structure, visibleColumnIds, onVisibleColumnIdsChange, }: LineItemsProps<T>): import("react").JSX.Element;

package/dist/components/lines/LineItems.js

@@ -0,0 +1,317 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { commitDraft, filterLines, planRemoval, } from "./lines.js";
+import { useColumnControl, } from "../listing/columns.js";
+import { ColumnsMenu } from "../listing/ColumnsMenu.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { Button, IconButton } from "../../primitives/button/Button.js";
+import { SearchField } from "../../primitives/choice/SearchField.js";
+import { Dialog } from "../../primitives/dialog/Dialog.js";
+import { FieldIdsContext } from "../../primitives/field/context.js";
+import { TextInput } from "../../primitives/field/Field.js";
+import { useFormMode } from "../../primitives/field/mode.js";
+import { Empty } from "../../primitives/notice/Notice.js";
+import { useToast } from "../../primitives/notice/Toast.js";
+import { EditableTable, } from "../../primitives/table/EditableTable.js";
+import { Totals, } from "../../primitives/value/Totals.js";
+import { Pencil, Plus, Trash2 } from "lucide-react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+/** The notice is optional: without a `ToastProvider` the line is still removed, just
+ *  without the way back — a missing provider must not break a form. */
+function useOptionalToast() {
+    try {
+        return useToast();
+    }
+    catch {
+        return null;
+    }
+}
+function plain(v) {
+    return v === null ? "" : String(v);
+}
+/**
+ * The lines of a document inside its record: a count and a search above, the lines
+ * (edited in place or in a popup editor), and the totals under them on the right.
+ *
+ * Context: the record used to compose this by hand — a `Table`, its rows, a
+ * `Totals` — and every module did it a little differently: where «add» went, whether
+ * removing asked first, what an empty document said. One component, built on
+ * `EditableTable` and `Dialog`, makes the one2many the same block everywhere.
+ */
+export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange, onAdd, newLine, onRemove, onRestore, editor, isValid, context, searchText, searchFrom = 8, totals, layout = "auto", adding, onOpenLine, flag, structure, visibleColumnIds, onVisibleColumnIdsChange, }) {
+    const copy = useUiCopy();
+    const toast = useOptionalToast();
+    const read = useFormMode(mode) === "read";
+    const root = useRef(null);
+    const searchLabelId = useId();
+    const formId = useId();
+    const [query, setQuery] = useState("");
+    const [session, setSession] = useState(null);
+    const [open, setOpen] = useState(false);
+    /* The draft the form submits, read from a ref: Enter in a number field commits
+       the typed text and submits in the same keystroke, before a re-render. */
+    const draftRef = useRef(null);
+    /* Where focus goes after a removal: the button that was pressed is gone with its
+       row, and focus falling to the page is losing the place. */
+    const focusNext = useRef(null);
+    const canChange = !read && onChange !== undefined;
+    const canAdd = !read && onAdd !== undefined && newLine !== undefined;
+    const canRemove = !read && onRemove !== undefined;
+    /* The whole line opens either in this block's own dialog (`editor`) or wherever the app
+       opens records (`onOpenLine`, a `Drill` context) — never both, so a line's form never
+       sits on top of another modal. */
+    const canEdit = (canChange && editor !== undefined) || onOpenLine !== undefined;
+    const openLine = (id, line) => {
+        if (onOpenLine !== undefined)
+            onOpenLine(id);
+        else
+            openEditor(id, line);
+    };
+    const inline = canAdd && (adding ?? (editor === undefined ? "inline" : "editor")) === "inline";
+    const labelOf = (line) => {
+        if (lineLabel !== undefined)
+            return lineLabel(line);
+        const first = columns[0];
+        if (first === undefined)
+            return getLineId(line);
+        return first.text?.(line) ?? plain(first.value(line));
+    };
+    const kindOf = (line) => structure?.kind(line) ?? "line";
+    /* Sections and notes are not lines: they are not counted, and a search leaves only lines. */
+    const lineCount = structure === undefined ? lines.length : lines.filter((l) => kindOf(l) === "line").length;
+    const searchable = lineCount > searchFrom;
+    const q = searchable ? query.trim() : "";
+    const shown = useMemo(() => {
+        const found = filterLines(lines, q, (line) => searchText !== undefined
+            ? searchText(line)
+            : columns.map((c) => c.text?.(line) ?? plain(c.value(line))).join(" "), copy.locale);
+        return q === "" || structure === undefined
+            ? found
+            : found.filter((l) => structure.kind(l) === "line");
+    }, [lines, columns, searchText, q, copy.locale, structure]);
+    /* ── which columns are on screen ── */
+    const specs = useMemo(() => columns.map((c) => ({
+        id: c.id,
+        label: c.header,
+        optional: c.optional === true,
+        ...(c.defaultHidden === true ? { defaultHidden: true } : {}),
+    })), [columns]);
+    /* `visibleColumnIds` alone is a fixed choice, the way a controlled input without
+       `onChange` is: the owner said which columns, and the menu cannot change them. */
+    const columnControl = useColumnControl(specs, visibleColumnIds === undefined && onVisibleColumnIdsChange === undefined
+        ? {}
+        : {
+            ...(visibleColumnIds === undefined ? {} : { visibleIds: visibleColumnIds }),
+            onVisibleIdsChange: onVisibleColumnIdsChange ?? (() => { }),
+        });
+    const onScreen = columns.filter((c) => columnControl.isVisible(c.id));
+    useEffect(() => {
+        const target = focusNext.current;
+        if (target === null)
+            return;
+        focusNext.current = null;
+        const scope = root.current;
+        if (scope === null)
+            return;
+        /* The next line's first button on a desk; on a phone its card, which has none. */
+        const next = target.id === null
+            ? null
+            : (scope.querySelector(`[data-line="${CSS.escape(target.id)}"] button`) ?? scope.querySelector(`[data-row-id="${CSS.escape(target.id)}"]`));
+        (next ?? scope.querySelector("[data-line-add]"))?.focus();
+    }, [lines]);
+    /* ── the editor ─────────────────────────────────────────────────── */
+    const openEditor = (id, draft) => {
+        draftRef.current = draft;
+        setSession({ id, draft, tried: false });
+        setOpen(true);
+    };
+    const setDraft = (next) => {
+        draftRef.current = next;
+        setSession((s) => (s === null ? s : { ...s, draft: next }));
+    };
+    const save = () => {
+        const draft = draftRef.current;
+        if (session === null || draft === null)
+            return;
+        const commit = commitDraft(session.id, draft, isValid);
+        if (commit.kind === "invalid") {
+            setSession({ ...session, draft, tried: true });
+            return;
+        }
+        if (commit.kind === "add") {
+            /* A new line is shown even if it does not match the search: adding one and
+               not seeing it is the worst answer. */
+            setQuery("");
+            onAdd?.(commit.line);
+        }
+        else
+            onChange?.(commit.id, commit.line);
+        setOpen(false);
+    };
+    const add = () => {
+        if (newLine === undefined)
+            return;
+        const blank = newLine();
+        if (editor === undefined) {
+            setQuery("");
+            onAdd?.(blank);
+        }
+        else
+            openEditor(null, blank);
+    };
+    /* In place: the table opens the row whose id this returns. */
+    const addInline = (make = newLine) => {
+        if (make === undefined)
+            return undefined;
+        const blank = make();
+        setQuery("");
+        onAdd?.(blank);
+        return getLineId(blank);
+    };
+    /* A section and a note are always written in place, editor or not. */
+    const bandAdds = read || onAdd === undefined || structure === undefined
+        ? []
+        : [
+            ...(structure.newSection === undefined
+                ? []
+                : [
+                    {
+                        label: copy.lines.addSection,
+                        onAdd: () => addInline(structure.newSection),
+                    },
+                ]),
+            ...(structure.newNote === undefined
+                ? []
+                : [{ label: copy.lines.addNote, onAdd: () => addInline(structure.newNote) }]),
+        ];
+    const inPlace = inline || bandAdds.length > 0;
+    const bands = structure === undefined
+        ? undefined
+        : {
+            kind: (line) => {
+                const k = structure.kind(line);
+                return k === "line" ? null : k;
+            },
+            render: (line) => structure.text(line),
+            ...(canChange
+                ? {
+                    edit: (line, set) => (_jsx(TextInput, { "aria-label": structure.kind(line) === "section"
+                            ? copy.lines.section
+                            : copy.lines.note, value: structure.text(line), onChange: (text) => set(structure.withText(line, text)) })),
+                }
+                : {}),
+            total: (column, under) => columns.find((c) => c.id === column.id)?.subtotal?.(under) ?? null,
+        };
+    const remove = (line) => {
+        const id = getLineId(line);
+        const { index, focus } = planRemoval(lines, shown, id, getLineId);
+        focusNext.current = { id: focus };
+        onRemove?.(id);
+        toast?.show({
+            message: fillCopy(copy.lineItems.removed, { name: labelOf(line) }),
+            ...(onRestore === undefined
+                ? {}
+                : {
+                    action: {
+                        label: copy.lineItems.undo,
+                        onSelect: () => onRestore(line, index),
+                    },
+                }),
+        });
+    };
+    /* ── the table ──────────────────────────────────────────────────── */
+    const tableColumns = onScreen.map((c) => ({
+        id: c.id,
+        header: c.header,
+        ...(c.width === undefined ? {} : { width: c.width }),
+        ...(c.numeric === undefined ? {} : { numeric: c.numeric }),
+        ...(c.stack === undefined ? {} : { stack: c.stack }),
+        ...(c.brief === undefined ? {} : { brief: c.brief }),
+        render: (line) => {
+            const drawn = c.cell === undefined ? plain(c.value(line)) : c.cell(line);
+            /* An amount never breaks in two: «Bs.» over «12.500,00» reads as two values. */
+            return c.numeric === true ? _jsx("span", { className: "whitespace-nowrap", children: drawn }) : drawn;
+        },
+        ...(c.edit === undefined || !canChange
+            ? {}
+            : {
+                /* The control takes the column's width and does not impose its own: an input's
+                   natural width is twenty characters, and in an auto-sized table that pushes
+                   the amounts off the card the moment a row goes into editing. */
+                edit: (line, set) => (_jsx("div", { className: "contain-inline-size", children: c.edit?.(line, set) })),
+            }),
+    }));
+    if (canEdit || canRemove) {
+        tableColumns.push({
+            id: "\u0000actions",
+            header: "",
+            width: 1,
+            /* On a card the press opens the editor, and the editor removes: the buttons
+               would be two more targets on a small screen. Without an editor the trash
+               is the only way to remove, so it stays — at the card's top right, lit. */
+            stack: canEdit ? "hidden" : "trail",
+            onBands: true,
+            render: (line) => {
+                const id = getLineId(line);
+                const nameId = `${formId}-line-${id}`;
+                return (
+                /* Hidden until the row is hovered or holds focus, like `RowActions`: a pencil
+                   and a trash can lit on each of twenty lines are forty invitations. They
+                   fade instead of unmounting, so Tab still reaches them. Pressing them does
+                   not put the row into in-place editing. */
+                _jsxs("span", { "data-line": id, className: "flex items-center justify-end gap-0.5 whitespace-nowrap opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 focus-within:opacity-100 in-data-stacked:opacity-100", onClick: (e) => e.stopPropagation(), children: [_jsx("span", { id: nameId, className: "sr-only", children: labelOf(line) }), canEdit && kindOf(line) === "line" ? (_jsx(IconButton, { icon: Pencil, label: copy.lines.edit, "aria-describedby": nameId, haspopup: "dialog", onClick: () => openLine(id, line) })) : null, canRemove ? (_jsx(IconButton, { icon: Trash2, label: copy.lines.remove, tone: "danger", "aria-describedby": nameId, onClick: () => remove(line) })) : null] }));
+            },
+        });
+    }
+    /* In place, «add» is the table's own row under the grid: where the line will appear. */
+    const addButton = canAdd && !inline ? (_jsx(Button, { role: "secondary", size: "sm", icon: Plus, onClick: add, "data-line-add": "", children: copy.lines.add })) : null;
+    const count = q === ""
+        ? fillCopy(lineCount === 1 ? copy.lineItems.one : copy.lineItems.many, {
+            count: lineCount.toLocaleString(copy.locale),
+        })
+        : fillCopy(copy.lineItems.shown, {
+            shown: shown.length.toLocaleString(copy.locale),
+            count: lineCount.toLocaleString(copy.locale),
+        });
+    return (_jsxs("section", { ref: root, "aria-label": copy.lineItems.table, className: "flex min-w-0 flex-col gap-4", children: [lines.length === 0 && !canAdd ? (
+            /* Said, with its way out: an empty document is a question («what is sold
+               here?»), not a blank box. In read mode there is no way out to offer. */
+            _jsx(Empty, { align: "start", sentence: copy.lines.empty, action: addButton ?? undefined })) : (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 px-1", children: [searchable ? (_jsxs("div", { className: "w-full max-w-(--container-search) min-w-0 flex-1", children: [_jsx("span", { id: searchLabelId, className: "sr-only", children: copy.lines.search }), _jsx(FieldIdsContext.Provider, { value: {
+                                            id: `${searchLabelId}-input`,
+                                            labelId: searchLabelId,
+                                            describedBy: undefined,
+                                            invalid: false,
+                                        }, children: _jsx(SearchField, { value: query, onChange: setQuery, placeholder: copy.lines.search }) })] })) : null, _jsx("span", { className: "text-meta text-muted tabular-nums", "aria-live": "polite", children: count }), columnControl.hasOptional || addButton !== null ? (_jsxs("span", { className: "ml-auto flex items-center gap-2", children: [_jsx(ColumnsMenu, { control: columnControl }), addButton] })) : null] }), _jsx(EditableTable, { rows: shown, columns: tableColumns, getRowId: getLineId, empty: lines.length === 0
+                            ? copy.lines.empty
+                            : fillCopy(copy.lineItems.noMatch, { query: query.trim() }), layout: layout, ...(inline ? { onAdd: () => addInline(), addLabel: copy.lines.add } : {}), ...(bandAdds.length === 0 ? {} : { adds: bandAdds }), ...(bands === undefined ? {} : { bands }), ...(flag === undefined ? {} : { flag }), ...(inPlace && onRemove !== undefined
+                            ? /* A blank row nobody wrote in is taken back without a notice: nobody
+                                 removed anything, so there is nothing to undo. */
+                                { onDiscard: onRemove }
+                            : {}), ...(canEdit
+                            ? {
+                                onOpen: (id) => {
+                                    const line = lines.find((l) => getLineId(l) === id);
+                                    if (line !== undefined)
+                                        openLine(id, line);
+                                },
+                            }
+                            : {}), ...(canChange && columns.some((c) => c.edit !== undefined)
+                            ? { onChange: (id, next) => onChange?.(id, next) }
+                            : {}) })] })), totals === undefined || ("length" in totals && totals.length === 0) ? null : (
+            /* Inset like the table's cells, so the last figure lines up with the amounts. */
+            _jsx("div", { className: "px-4", children: "length" in totals ? _jsx(Totals, { rows: totals }) : _jsx(Totals, { ...totals }) })), editor === undefined || session === null ? null : (_jsx(Dialog, { open: open, width: "sm", title: session.id === null ? copy.lineItems.newLine : copy.lines.edit, ...(context === undefined ? {} : { context }), ...(session.id === null ? {} : { subtitle: labelOf(session.draft) }), onClose: () => setOpen(false), footer: _jsxs(_Fragment, { children: [session.id === null || !canRemove ? null : (
+                        /* Apart, at the other end from «Listo»: removing is not the way the
+                           form is meant to close. */
+                        _jsx("span", { className: "mr-auto", children: _jsx(IconButton, { icon: Trash2, label: copy.lines.remove, tone: "danger", onClick: () => {
+                                    const line = lines.find((l) => getLineId(l) === session.id);
+                                    setOpen(false);
+                                    if (line !== undefined)
+                                        remove(line);
+                                } }) })), _jsx(Button, { role: "ghost", size: "sm", onClick: () => setOpen(false), children: copy.dialog.cancel }), _jsx(Button, { role: "primary", size: "sm", type: "submit", form: formId, children: copy.lines.done })] }), children: _jsx("form", { id: formId, noValidate: true, onSubmit: (e) => {
+                        e.preventDefault();
+                        save();
+                    }, className: "flex flex-col gap-3", children: editor(session.draft, setDraft, {
+                        tried: session.tried,
+                        isNew: session.id === null,
+                    }) }) }))] }));
+}

package/dist/components/lines/index.d.ts

@@ -0,0 +1 @@
+export { type LineEditorState, type LineItemColumn, LineItems, type LineItemsProps, } from "./LineItems.js";

package/dist/components/lines/index.js

@@ -0,0 +1,2 @@
+/* LINES — the sub-list of lines inside a record (Odoo's one2many): an invoice's, an order's. */
+export { LineItems, } from "./LineItems.js";

package/dist/components/lines/lines.d.ts

@@ -0,0 +1,23 @@
+/** The lines whose text contains the query, case and locale aware. An empty query is all. */
+export declare function filterLines<T>(lines: readonly T[], query: string, textOf: (line: T) => string, locale: string): readonly T[];
+/**
+ * What removing a line needs to know BEFORE it is gone: its position among all the lines (so
+ * «Deshacer» puts it back exactly there) and the visible line that inherits the focus — the
+ * next one, or the previous one when it was the last. `null` when none is left.
+ */
+export declare function planRemoval<T>(lines: readonly T[], shown: readonly T[], id: string, getId: (line: T) => string): {
+    index: number;
+    focus: string | null;
+};
+/** What «Listo» does with the draft: nothing yet (it is not valid), add it, or replace a line. */
+export type DraftCommit<T> = {
+    kind: "invalid";
+} | {
+    kind: "add";
+    line: T;
+} | {
+    kind: "change";
+    id: string;
+    line: T;
+};
+export declare function commitDraft<T>(id: string | null, draft: T, isValid?: (draft: T) => boolean): DraftCommit<T>;

package/dist/components/lines/lines.js

@@ -0,0 +1,26 @@
+/* The decisions of `LineItems` that do not need a screen: which lines a search leaves, where a
+   removed line was and who takes the focus after it, and what «Listo» hands to the owner of
+   the lines. Pure, so a test reads them without a browser. */
+/** The lines whose text contains the query, case and locale aware. An empty query is all. */
+export function filterLines(lines, query, textOf, locale) {
+    const q = query.trim().toLocaleLowerCase(locale);
+    if (q === "")
+        return lines;
+    return lines.filter((line) => textOf(line).toLocaleLowerCase(locale).includes(q));
+}
+/**
+ * What removing a line needs to know BEFORE it is gone: its position among all the lines (so
+ * «Deshacer» puts it back exactly there) and the visible line that inherits the focus — the
+ * next one, or the previous one when it was the last. `null` when none is left.
+ */
+export function planRemoval(lines, shown, id, getId) {
+    const index = lines.findIndex((l) => getId(l) === id);
+    const at = shown.findIndex((l) => getId(l) === id);
+    const neighbour = shown[at + 1] ?? (at > 0 ? shown[at - 1] : undefined);
+    return { index, focus: neighbour === undefined ? null : getId(neighbour) };
+}
+export function commitDraft(id, draft, isValid) {
+    if (isValid !== undefined && !isValid(draft))
+        return { kind: "invalid" };
+    return id === null ? { kind: "add", line: draft } : { kind: "change", id, line: draft };
+}