@sincpro/web-ui 0.0.0-stage → 0.1.0

package/dist/components/form/Sheet.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { byDensity, useDensity } from "../../foundations/density.js";
+import { FieldLayoutProvider, } from "../../primitives/field/layout.js";
+import { Hint } from "../../primitives/hint/Hint.js";
+import { Children } from "react";
+function Facts({ fields, columns, layout, }) {
+    const d = useDensity();
+    const horizontal = layout === "horizontal";
+    /* Horizontal facts are a run of pairs, not a grid stretched across the
+       paper. A two-column grid put «Total Bs 12.480» on the left and «Vence
+       15 nov» on the right, with the middle of the card empty. */
+    const asGrid = !horizontal && columns > 1 && d === "comfortable";
+    const grid = columns === 4
+        ? "grid-cols-2 @lg:grid-cols-4"
+        : columns === 3
+            ? "grid-cols-3"
+            : "grid-cols-2";
+    return (_jsx("dl", { className: horizontal
+            ? "flex min-w-0 flex-wrap items-baseline gap-x-6 gap-y-1.5"
+            : asGrid
+                ? `@container grid min-w-0 ${grid} ${byDensity(d, "gap-x-8 gap-y-2.5", "gap-x-6 gap-y-2")}`
+                : `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: fields.map((field) => {
+            const empty = field.value === undefined || field.value === null || field.value === "";
+            const value = (_jsx("dd", { className: `min-w-0 text-meta ${empty ? "text-muted italic" : "text-ink"} ${field.mono === true ? "font-mono tabular-nums" : ""}`, children: empty ? "—" : field.value }));
+            const name = (_jsxs("dt", { className: `flex items-center gap-1 text-micro text-muted ${horizontal ? "shrink-0" : "min-w-0"}`, children: [_jsx("span", { children: field.label }), field.hint === undefined ? null : _jsx(Hint, { children: field.hint })] }));
+            if (horizontal) {
+                /* A header fact is a pair: the number sits next to its name. The
+                   8rem label column is for a form, where twenty values have to
+                   start on the same vertical. Here it left «Filas» half a column
+                   away from 400. */
+                return (_jsxs("div", { className: "flex min-w-0 items-baseline gap-2", children: [name, value] }, field.label));
+            }
+            return (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [name, value] }, field.label));
+        }) }));
+}
+export function Sheet({ fields, columns = 2, layout = "stacked", head, children, }) {
+    const d = useDensity();
+    const facts = fields !== undefined && fields.length > 0;
+    if (!facts && head === undefined && children === undefined)
+        return null;
+    const top = facts || head !== undefined ? (_jsxs("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-4", "gap-3")}`, children: [facts ? _jsx(Facts, { fields: fields, columns: columns, layout: layout }) : null, head] })) : null;
+    return (_jsx(FieldLayoutProvider, { value: layout, children: _jsxs("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-(--spacing-block)", "gap-2.5")}`, children: [top, children] }) }));
+}
+/** A row of columns on the paper. The paper is the sheet; a group is not a
+ *  second box. A vertical hairline separates columns — that is what still
+ *  groups them when a column has no title. */
+export function SheetGroups({ children, columns = 2, }) {
+    const d = useDensity();
+    const stacked = d === "compact";
+    // Below `handheld` the columns stack the way compact density does: two 180 px
+    // columns on a phone left each label beside a control with no width at all. The
+    // container is a wrapper because a grid cannot query its own width.
+    const grid = stacked
+        ? "grid-cols-1"
+        : columns === 4
+            ? "grid-cols-2 @lg:grid-cols-4 @max-handheld:grid-cols-1"
+            : columns === 3
+                ? "grid-cols-3 @max-handheld:grid-cols-1"
+                : "grid-cols-2 @max-handheld:grid-cols-1";
+    const items = Children.toArray(children);
+    return (_jsx("div", { className: "@container min-w-0", children: _jsx("div", { className: `grid min-w-0 ${grid}`, children: items.map((child, i) => {
+                const first = i === 0;
+                const last = i === items.length - 1;
+                const edge = stacked
+                    ? `${first ? "" : "border-t border-line pt-3"} ${last ? "" : "pb-3"}`
+                    : `${first ? "" : "border-l border-line pl-6 @max-handheld:border-l-0 @max-handheld:border-t @max-handheld:pl-0 @max-handheld:pt-3"} ${last ? "" : "pr-6 @max-handheld:pr-0 @max-handheld:pb-3"}`;
+                return (_jsx("div", { className: `min-w-0 ${edge}`, children: child }, i));
+            }) }) }));
+}
+/** One column of a `SheetGroups` row.
+ *
+ *  The title is OPTIONAL. With one, it is a name above the fields — the same
+ *  name in read and in edit, so the paper does not rearrange. Without one,
+ *  the column is still a group: the hairline between columns is the edge.
+ *
+ *  It is not a tray and not a card. Nested boxes on the sheet made untitled
+ *  groups look empty and made edit mode look like a dashboard. */
+export function SheetGroup({ title, hint, icon: Icon, children, }) {
+    const d = useDensity();
+    const withHeader = title !== undefined;
+    return (_jsxs("section", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: [withHeader ? (_jsxs("header", { className: "flex min-w-0 items-center gap-2", children: [Icon === undefined ? null : (_jsx(Icon, { className: "size-(--size-icon-sm) shrink-0 text-muted", strokeWidth: 1.75, "aria-hidden": true })), _jsx("h3", { className: "min-w-0 truncate text-meta font-medium text-ink", children: title }), hint === undefined ? null : _jsx(Hint, { children: hint })] })) : hint === undefined ? null : (_jsx(Hint, { children: hint })), _jsx("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: children })] }));
+}

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

@@ -0,0 +1,2 @@
+export { FormActions, FormSection } from "./Form.js";
+export { Sheet, type SheetField, SheetGroup, SheetGroups, type SheetLayout, } from "./Sheet.js";

package/dist/components/form/index.js

@@ -0,0 +1,4 @@
+/* FORMULARIO — lo que ACOMODA los campos: la hoja, la sección y el pie. Los
+   controles con los que se escribe están en `primitives/field`. */
+export { FormActions, FormSection } from "./Form.js";
+export { Sheet, SheetGroup, SheetGroups, } from "./Sheet.js";

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

@@ -0,0 +1,13 @@
+import type { SeriesBar } from "./model.js";
+/**
+ * One series, drawn as a bar list: the name, the count, and a track.
+ *
+ * A column of vertical bars with the names in a legend underneath asks the
+ * eye to match a bar to a word. Here the word sits on its own bar, which is
+ * the question this piece answers — how the values of one column are spread.
+ * CSS, not a charting library: the width is a percentage of the largest
+ * count, and the color is the data color, one series, not a palette.
+ */
+export declare function SeriesChart({ series }: {
+    series: readonly SeriesBar[];
+}): import("react").JSX.Element;

package/dist/components/frame/Chart.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+/**
+ * One series, drawn as a bar list: the name, the count, and a track.
+ *
+ * A column of vertical bars with the names in a legend underneath asks the
+ * eye to match a bar to a word. Here the word sits on its own bar, which is
+ * the question this piece answers — how the values of one column are spread.
+ * CSS, not a charting library: the width is a percentage of the largest
+ * count, and the color is the data color, one series, not a palette.
+ */
+export function SeriesChart({ series }) {
+    const copy = useUiCopy();
+    const peak = Math.max(1, ...series.map((bar) => bar.count));
+    if (series.length === 0) {
+        return _jsx("p", { className: "px-3 py-4 text-body text-muted", children: copy.frame.noSeries });
+    }
+    return (_jsx("ul", { className: "flex flex-col gap-2.5 px-3 py-3", children: series.map((bar) => {
+            const width = Math.max((bar.count / peak) * 100, 2);
+            const count = bar.count.toLocaleString(copy.locale);
+            return (_jsxs("li", { className: "flex min-w-0 flex-col gap-1", title: `${bar.label}: ${count}`, children: [_jsxs("div", { className: "flex min-w-0 items-baseline justify-between gap-3", children: [_jsx("span", { className: "min-w-0 truncate text-meta text-ink", children: bar.label }), _jsx("span", { className: "shrink-0 text-micro tabular-nums text-muted", children: count })] }), _jsx("div", { className: "h-1.5 overflow-hidden rounded-pill bg-ink/8", children: _jsx("div", { className: "h-full rounded-pill bg-data", style: { width: `${width}%` } }) })] }, bar.label));
+        }) }));
+}

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

@@ -0,0 +1,33 @@
+import { type Frame, type FramePresent } from "./model.js";
+import { type ListIdentity } from "../listing/ListingBar.js";
+import { type Grouping } from "../../foundations/grouping.js";
+import { type ReactNode } from "react";
+export type FrameViewProps = {
+    frame: Frame;
+    identity?: ListIdentity;
+    caption?: ReactNode;
+    present?: FramePresent;
+    presents?: readonly FramePresent[];
+    onPresentChange?: (next: FramePresent) => void;
+    /** Which column the chart reads. Defaults to the first numeric, else the first. */
+    chartColumn?: string;
+    onChartColumnChange?: (id: string) => void;
+    visibleColumnIds?: readonly string[];
+    onVisibleColumnIdsChange?: (ids: readonly string[]) => void;
+    /** Search, filters, pagination: the same slots as a list. A frame inside a
+     *  form is still a SET of rows, and a set without a narrowing line is a
+     *  dump. Assembled by whoever holds the domain — this file does not know
+     *  what a column name is. */
+    search?: ReactNode;
+    pagination?: ReactNode;
+    /**
+     * El agrupado, con el mismo contrato que usa la lista.
+     *
+     * Acá lo que se agrupa son ÍNDICES de fila y no registros: un marco es una
+     * matriz y sus filas no tienen identidad propia —son la fila 12 del archivo—,
+     * así que `T` es `number` y `of(fila, nivel)` lee la celda que corresponda. El
+     * contrato no cambia, que es exactamente la prueba de que no es restrictivo.
+     */
+    grouping?: Grouping<number>;
+};
+export declare function FrameView({ frame, identity, caption, present: presentProp, presents, onPresentChange, chartColumn: chartColumnProp, onChartColumnChange, visibleColumnIds, onVisibleColumnIdsChange, search, pagination, grouping, }: FrameViewProps): import("react").JSX.Element;

package/dist/components/frame/FrameView.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SeriesChart } from "./Chart.js";
+import { columnSeries, withColumns, } from "./model.js";
+import { useColumnControl } from "../listing/columns.js";
+import { ColumnsMenu, specsFromColumns, } from "../listing/ColumnsMenu.js";
+import { Listing } from "../listing/Listing.js";
+import { ListingBar } from "../listing/ListingBar.js";
+import { ViewSwitcher } from "../listing/ViewSwitcher.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { pathKey, pileIsOpen, pilesOf, } from "../../foundations/grouping.js";
+import { Menu } from "../../primitives/menu/Menu.js";
+import { Empty } from "../../primitives/notice/Notice.js";
+import { SheetTable } from "../../primitives/table/SheetTable.js";
+import { BarChart3, Table2 } from "lucide-react";
+import { useMemo, useState } from "react";
+/**
+ * ARCHETYPE 3 — a FRAME: the cells of a payload, as a table or as a chart.
+ *
+ * Context: ListView is N records of a kind. Record is ONE record. Neither
+ * is the glance at the raw matrix an imported file carries — that was being drawn as
+ * a naked SheetTable, so it could not change presentation, hide a column or
+ * chart one, which is exactly what looking at a table is for.
+ *
+ * Columns use the same `useColumnControl` as ListView. Payload columns default
+ * to optional; pin one with `optional: false`.
+ *
+ * The app maps a preview (or any rectangle) onto a `Frame`. This archetype
+ * does not know what an invoice is.
+ */
+const PRESENT_ICONS = [
+    { id: "table", icon: Table2 },
+    { id: "chart", icon: BarChart3 },
+];
+export function FrameView({ frame, identity, caption, present: presentProp, presents = ["table", "chart"], onPresentChange, chartColumn: chartColumnProp, onChartColumnChange, visibleColumnIds, onVisibleColumnIdsChange, search, pagination, grouping, }) {
+    const copy = useUiCopy();
+    const [ownedPresent, setOwnedPresent] = useState(presentProp ?? "table");
+    const present = onPresentChange !== undefined ? (presentProp ?? "table") : ownedPresent;
+    const setPresent = onPresentChange ?? setOwnedPresent;
+    const defaultChart = frame.columns.find((column) => column.numeric)?.id ?? frame.columns[0]?.id ?? "";
+    const [ownedChart, setOwnedChart] = useState(chartColumnProp ?? defaultChart);
+    const chartColumn = onChartColumnChange !== undefined ? (chartColumnProp ?? defaultChart) : ownedChart;
+    const setChartColumn = onChartColumnChange ?? setOwnedChart;
+    const columnSpecs = useMemo(() => specsFromColumns(frame.columns, true), [frame.columns]);
+    const columns = useColumnControl(columnSpecs, {
+        ...(visibleColumnIds === undefined ? {} : { visibleIds: visibleColumnIds }),
+        ...(onVisibleColumnIdsChange === undefined ? {} : { onVisibleColumnIdsChange }),
+    });
+    const shown = useMemo(() => columns.visibleIds.length === frame.columns.length
+        ? frame
+        : withColumns(frame, columns.visibleIds), [frame, columns.visibleIds]);
+    /* Los montones aplanados a una SECUENCIA: la planilla está virtualizada por
+       índice, así que la jerarquía la dice la sangría de cada banda y no el
+       anidamiento. Es el mismo aplanado que hace la lista, sobre índices en vez de
+       registros. */
+    const bands = useMemo(() => {
+        const piles = pilesOf(Array.from({ length: shown.rows }, (_, index) => index), grouping);
+        if (piles === null)
+            return null;
+        const out = [];
+        const walk = (list) => {
+            for (const pile of list) {
+                const open = pileIsOpen(pile, grouping);
+                out.push({
+                    band: {
+                        field: pile.field,
+                        label: pile.label,
+                        count: pile.count,
+                        open,
+                        depth: pile.depth,
+                        key: pathKey(pile.path),
+                    },
+                });
+                if (!open)
+                    continue;
+                if (pile.piles.length > 0)
+                    walk(pile.piles);
+                else
+                    for (const row of pile.items)
+                        out.push({ row });
+            }
+        };
+        walk(piles);
+        return out;
+    }, [shown.rows, grouping]);
+    const series = useMemo(() => (present === "chart" ? columnSeries(shown, chartColumn) : []), [present, shown, chartColumn]);
+    const switcher = presents.length > 1 ? (_jsx(ViewSwitcher, { options: PRESENT_ICONS.filter((option) => presents.includes(option.id)).map((option) => ({
+            id: option.id,
+            label: option.id === "table" ? copy.present.table : copy.present.chart,
+            icon: option.icon,
+        })), current: present, onSelect: (id) => setPresent(id) })) : undefined;
+    const chartMenu = present === "chart" ? (_jsx(Menu, { label: copy.frame.series, groups: [
+            {
+                label: copy.frame.column,
+                options: shown.columns.map((column) => ({
+                    id: column.id,
+                    label: column.type === undefined
+                        ? column.header
+                        : `${column.header} · ${column.type}`,
+                    checked: column.id === chartColumn,
+                })),
+            },
+        ], onSelect: setChartColumn })) : null;
+    const bar = (_jsx(ListingBar, { ...(identity?.title === undefined ? {} : { title: identity.title }), ...(identity?.description === undefined ? {} : { description: identity.description }), ...(identity?.counters === undefined ? {} : { counters: identity.counters }), ...(search === undefined ? {} : { search }), ...(pagination === undefined ? {} : { pagination }), views: _jsxs(_Fragment, { children: [_jsx(ColumnsMenu, { control: columns }), chartMenu, switcher] }) }));
+    if (frame.rows === 0 || frame.columns.length === 0) {
+        return (_jsx(Listing, { bar: bar, children: _jsx(Empty, { sentence: copy.frame.empty }) }));
+    }
+    return (_jsx(Listing, { bar: bar, children: present === "chart" ? (_jsx(SeriesChart, { series: series })) : (_jsx(SheetTable, { columns: shown.columns, rows: bands === null ? shown.rows : bands.length, value: (index, column, columnIndex) => {
+                const row = bands === null ? index : bands[index]?.row;
+                return row === undefined ? null : shown.value(row, column, columnIndex);
+            }, height: "auto", ...(bands === null
+                ? {}
+                : {
+                    band: (index) => bands[index]?.band,
+                    ...(grouping?.onToggle === undefined
+                        ? {}
+                        : {
+                            onBandToggle: (index) => {
+                                const key = bands[index]?.band?.key;
+                                if (key !== undefined)
+                                    grouping.onToggle?.(key);
+                            },
+                        }),
+                }), ...(caption === undefined ? {} : { caption }) })) }));
+}

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

@@ -0,0 +1,3 @@
+export { SeriesChart } from "./Chart.js";
+export { FrameView, type FrameViewProps } from "./FrameView.js";
+export { columnSeries, type Frame, type FrameCell, type FrameColumn, frameFromRows, type FramePresent, type SeriesBar, withColumns, } from "./model.js";

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 "./assist/index.js";
+export * from "./chatter/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 "./assist/index.js";
+export * from "./chatter/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,74 @@
+import { type DialogContext } from "../../primitives/dialog/Dialog.js";
+import { type FormMode } from "../../primitives/field/mode.js";
+import type { DataColumn } from "../../primitives/table/DataTable.js";
+import { type EditColumn, type EditLayout } from "../../primitives/table/EditableTable.js";
+import { 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"> & 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 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`. */
+    totals?: readonly TotalsRow[];
+    /** `auto` (the default) draws the lines as stacked cards below
+     *  `--container-handheld`; `table` and `stacked` force one. */
+    layout?: EditLayout;
+};
+/**
+ * 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, }: LineItemsProps<T>): import("react").JSX.Element;