@sincpro/web-ui 0.1.0 → 1.0.0

package/dist/components/calendar/RecordCalendar.d.ts

@@ -0,0 +1,48 @@
+import type { Tone } from "../../foundations/types.js";
+import type { ReactNode } from "react";
+export type CalendarView = "month" | "week" | "day" | "agenda";
+export type RecordCalendarProps<T> = {
+    items: readonly T[];
+    keyOf: (item: T) => string;
+    titleOf: (item: T) => string;
+    startOf: (item: T) => Date;
+    /** Without it the event lasts an hour, or the day when it is all-day. */
+    endOf?: (item: T) => Date | undefined;
+    allDayOf?: (item: T) => boolean;
+    /** What the event means: an overdue call `bad`, a confirmed meeting `good`. */
+    toneOf?: (item: T) => Tone;
+    /** Who it is with or whose it is — a face on the event, the photo or the initials. */
+    avatarOf?: (item: T) => {
+        name: string;
+        src?: string;
+    } | undefined;
+    /** A second line under the title: the customer, the place. */
+    metaOf?: (item: T) => string | undefined;
+    /** The whole event drawn by the app — the calendar's equivalent of a board's `card`. Gets
+     *  the record and the time text the calendar computed («10:00 – 11:30»). */
+    renderEvent?: (item: T, time: string) => ReactNode;
+    /** The view it opens on. The calendar's own buttons switch it afterwards. */
+    view?: CalendarView;
+    /** The day it opens on. Today by default. */
+    date?: Date;
+    /** An event was dragged to another moment or stretched. The calendar does NOT keep the move:
+     *  `items` is the truth — the app saves and passes the new dates back. */
+    onMove?: (item: T, start: Date, end: Date | null) => void;
+    /** A stretch of empty time was selected: create something there. */
+    onCreate?: (start: Date, end: Date, allDay: boolean) => void;
+    /** An event was pressed. */
+    onOpen?: (item: T) => void;
+    /** A height of its own: `auto` grows with the month, a number or `40rem` scrolls inside. */
+    height?: number | string;
+};
+/**
+ * Records on a calendar — Odoo's calendar view: meetings, deliveries, due dates.
+ *
+ * Context: drawn by FullCalendar v7 (MIT standard views: month, week, day, agenda), dressed by
+ * `tokens.css` (its `forma` palette points at web-ui's tokens, so it follows the theme). It is a
+ * CONTROLLED view of the records: dragging or stretching an event reports `onMove` and the
+ * library's own change is undone at once — the app persists and passes the new `items`, so the
+ * screen never shows a date the backend refused. Resource rows (per person, per room) are
+ * FullCalendar's premium scheduler: a licence away, not built here.
+ */
+export declare function RecordCalendar<T>({ items, keyOf, titleOf, startOf, endOf, allDayOf, toneOf, avatarOf, metaOf, renderEvent, view, date, onMove, onCreate, onOpen, height, }: RecordCalendarProps<T>): import("react").JSX.Element;

package/dist/components/calendar/RecordCalendar.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/react/daygrid";
+import interactionPlugin from "@fullcalendar/react/interaction";
+import listPlugin from "@fullcalendar/react/list";
+import esLocale from "@fullcalendar/react/locales/es";
+import formaThemePlugin from "@fullcalendar/react/themes/forma";
+import timeGridPlugin from "@fullcalendar/react/timegrid";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Avatar } from "../../primitives/value/Person.js";
+const VIEW = {
+    month: "dayGridMonth",
+    week: "timeGridWeek",
+    day: "timeGridDay",
+    agenda: "listWeek",
+};
+/* An event takes the colour of what it MEANS — the five tones — and the surface colour on top,
+   which keeps ≥ 5.7:1 on every tone in both themes (see `tokens.css`). */
+const TONE_COLOR = {
+    neutral: "var(--color-muted)",
+    info: "var(--color-info)",
+    good: "var(--color-good)",
+    warn: "var(--color-warn)",
+    bad: "var(--color-bad)",
+    accent: "var(--color-primary)",
+};
+/**
+ * Records on a calendar — Odoo's calendar view: meetings, deliveries, due dates.
+ *
+ * Context: drawn by FullCalendar v7 (MIT standard views: month, week, day, agenda), dressed by
+ * `tokens.css` (its `forma` palette points at web-ui's tokens, so it follows the theme). It is a
+ * CONTROLLED view of the records: dragging or stretching an event reports `onMove` and the
+ * library's own change is undone at once — the app persists and passes the new `items`, so the
+ * screen never shows a date the backend refused. Resource rows (per person, per room) are
+ * FullCalendar's premium scheduler: a licence away, not built here.
+ */
+export function RecordCalendar({ items, keyOf, titleOf, startOf, endOf, allDayOf, toneOf, avatarOf, metaOf, renderEvent, view = "month", date, onMove, onCreate, onOpen, height = "auto", }) {
+    const copy = useUiCopy();
+    const byId = new Map(items.map((item) => [keyOf(item), item]));
+    const events = items.map((item) => {
+        const tone = toneOf?.(item);
+        const end = endOf?.(item);
+        return {
+            id: keyOf(item),
+            title: titleOf(item),
+            start: startOf(item),
+            ...(end === undefined ? {} : { end }),
+            ...(allDayOf === undefined ? {} : { allDay: allDayOf(item) }),
+            ...(tone === undefined
+                ? {}
+                : { color: TONE_COLOR[tone], textColor: "var(--color-surface)" }),
+        };
+    });
+    /* A record on the calendar, not a bare title: its face, its time, its name and a second
+       line, in that reading order. Only when the app gave something more than a title. */
+    const rich = avatarOf !== undefined || metaOf !== undefined || renderEvent !== undefined;
+    const content = (info) => {
+        const item = byId.get(info.event.id);
+        if (item === undefined)
+            return null;
+        if (renderEvent !== undefined)
+            return renderEvent(item, info.timeText);
+        const person = avatarOf?.(item);
+        const meta = metaOf?.(item);
+        return (_jsxs("span", { className: "flex min-w-0 items-start gap-1.5 px-0.5 py-px", children: [person === undefined ? null : (_jsx(Avatar, { name: person.name, size: "sm", ...(person.src === undefined ? {} : { src: person.src }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsxs("span", { className: "min-w-0 truncate", children: [info.timeText === "" ? null : (_jsxs("b", { className: "font-semibold tabular-nums", children: [info.timeText, " "] })), titleOf(item)] }), meta === undefined ? null : (_jsx("span", { className: "min-w-0 truncate opacity-80", children: meta }))] })] }));
+    };
+    const moved = (info) => {
+        const item = byId.get(info.event.id);
+        /* Undone first: the move is a request, and `items` answers it. */
+        info.revert();
+        if (item === undefined || info.event.start === null)
+            return;
+        onMove?.(item, info.event.start, info.event.end);
+    };
+    return (_jsx("div", { className: "min-w-0 text-meta", children: _jsx(FullCalendar, { plugins: [
+                dayGridPlugin,
+                timeGridPlugin,
+                listPlugin,
+                interactionPlugin,
+                formaThemePlugin,
+            ], locales: [esLocale], locale: copy.locale.toLowerCase().startsWith("es") ? "es" : "en", initialView: VIEW[view], ...(date === undefined ? {} : { initialDate: date }), headerToolbar: {
+                start: "prev,next today",
+                center: "title",
+                end: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
+            }, height: height, events: events, editable: onMove !== undefined, selectable: onCreate !== undefined, nowIndicator: true, 
+            /* The week and the day open on the working day, not on midnight. */
+            scrollTime: "07:00:00", ...(rich ? { eventContent: content } : {}), ...(onMove === undefined ? {} : { eventDrop: moved, eventResize: moved }), ...(onCreate === undefined
+                ? {}
+                : {
+                    select: (info) => onCreate(info.start, info.end, info.allDay),
+                }), ...(onOpen === undefined
+                ? {}
+                : {
+                    eventClick: (info) => {
+                        const item = byId.get(info.event.id);
+                        if (item !== undefined)
+                            onOpen(item);
+                    },
+                }) }) }));
+}

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

@@ -0,0 +1 @@
+export { type CalendarView, RecordCalendar, type RecordCalendarProps, } from "./RecordCalendar.js";

package/dist/components/calendar/index.js

@@ -0,0 +1 @@
+export { RecordCalendar, } from "./RecordCalendar.js";

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

@@ -1,4 +1,5 @@
 import { type SheetLayout } from "../../primitives/field/layout.js";
+import { type FieldNote } from "../../primitives/field/note.js";
 import type { LucideIcon } from "lucide-react";
 import { type ReactNode } from "react";
 export type { SheetLayout };
@@ -8,6 +9,9 @@ export type SheetField = {
     /** Help on the label, as a `?`. Hover or click. */
     hint?: string;
     mono?: boolean;
+    /** A note that belongs to this fact — the same as `Field`'s: a flag by the label, and an
+     *  entry in the record's activity. */
+    note?: FieldNote;
 };
 export declare function Sheet({ fields, columns, layout, head, children, }: {
     fields?: readonly SheetField[];

package/dist/components/form/Sheet.js

@@ -2,10 +2,12 @@
 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 { NoteCard, NoteFlag } from "../../primitives/field/note.js";
 import { Hint } from "../../primitives/hint/Hint.js";
-import { Children } from "react";
+import { Children, useId } from "react";
 function Facts({ fields, columns, layout, }) {
     const d = useDensity();
+    const idBase = useId();
     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
@@ -20,10 +22,15 @@ function Facts({ fields, columns, layout, }) {
             ? "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) => {
+                : `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: fields.map((field, at) => {
+            const noteId = field.note === undefined ? undefined : `${idBase}-${at}-note`;
             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 })] }));
+            const card = field.note === undefined || noteId === undefined ? null : (_jsx(NoteCard, { note: field.note, id: noteId, owner: field.label }));
+            /* The note's card goes INSIDE the value: a `<dl>` holds only its terms and values.
+               With a note the value is a flex box, so the absolute card keeps the value's top
+               as its static position while being read after it. */
+            const value = (_jsxs("dd", { ...(noteId === undefined ? {} : { "aria-describedby": noteId }), className: `min-w-0 text-meta ${card === null ? "" : "flex"} ${empty ? "text-muted italic" : "text-ink"} ${field.mono === true ? "font-mono tabular-nums" : ""}`, children: [empty ? "—" : field.value, card] }));
+            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 }), field.note === undefined ? null : _jsx(NoteFlag, { note: field.note })] }));
             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
@@ -79,5 +86,9 @@ export function SheetGroups({ children, columns = 2, }) {
 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 })] }));
+    return (_jsxs("section", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: [withHeader ? (
+            /* A group title is ABOVE its labels, not one of them: at the labels' size and weight
+               «Cliente» the group read like «Cliente» the field. One step up in size and weight,
+               and a hairline that says where the group starts. */
+            _jsxs("header", { className: "flex min-w-0 items-center gap-2 border-b border-line pb-1.5", 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-body font-semibold 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/gantt/RecordGantt.d.ts

@@ -0,0 +1,44 @@
+/** A dependency between two records: «B starts when A ends» (`e2s`, the usual one). */
+export type GanttLink = {
+    id: string;
+    source: string;
+    target: string;
+    type?: "e2s" | "s2s" | "e2e" | "s2e";
+};
+export type GanttZoom = "day" | "week" | "month";
+export type RecordGanttProps<T> = {
+    items: readonly T[];
+    keyOf: (item: T) => string;
+    titleOf: (item: T) => string;
+    startOf: (item: T) => Date;
+    endOf: (item: T) => Date;
+    /** 0 to 100. Without it the bar has no progress handle. */
+    progressOf?: (item: T) => number;
+    /** The record it hangs under — a task under its project. Summaries are drawn for parents. */
+    parentOf?: (item: T) => string | undefined;
+    /** A point in time rather than a span: a delivery, a sign-off. */
+    milestoneOf?: (item: T) => boolean;
+    links?: readonly GanttLink[];
+    /** The scale it opens on; the toolbar switches it. */
+    zoom?: GanttZoom;
+    /** A bar was dragged or stretched. The app persists and passes the new `items`. */
+    onMove?: (item: T, start: Date, end: Date) => void;
+    onProgress?: (item: T, progress: number) => void;
+    /** A bar was chosen. */
+    onOpen?: (item: T) => void;
+    /** The chart's height, toolbar included: it scrolls inside. */
+    height?: string;
+    /** The left grid's column title for the names. */
+    nameHeader?: string;
+};
+/**
+ * Records on a timeline — Odoo's Gantt view: projects, tasks, manufacturing orders.
+ *
+ * Context: drawn by SVAR React Gantt (MIT core: move, resize, progress, dependencies, zoom),
+ * dressed by `tokens.css` (its Willow theme's `--wx-*` variables point at web-ui's tokens).
+ * The chart keeps its own state while dragging; every finished change is reported (`onMove`,
+ * `onProgress`) and the app passes the saved `items` back, which the chart re-reads. Without
+ * `onMove` / `onProgress` it is read-only. Auto-scheduling, critical path and resource load are
+ * SVAR's PRO edition: a licence away, not built here.
+ */
+export declare function RecordGantt<T>({ items, keyOf, titleOf, startOf, endOf, progressOf, parentOf, milestoneOf, links, zoom, onMove, onProgress, onOpen, height, nameHeader, }: RecordGanttProps<T>): import("react").JSX.Element;

package/dist/components/gantt/RecordGantt.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TimelineToolbar } from "../timeline/TimelineToolbar.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Gantt, Willow } from "@svar-ui/react-gantt";
+import { useEffect, useMemo, useRef, useState } from "react";
+/* The two rows of the time scale per zoom, written with `Intl` in the system's language
+   (SVAR's own format strings would ignore it), and how wide one cell of the finer row is. */
+function scalesOf(zoom, locale) {
+    const say = (options) => (date) => new Intl.DateTimeFormat(locale, options).format(date);
+    const week = (date) => {
+        const first = new Date(date.getFullYear(), 0, 1);
+        return `S${Math.ceil(((+date - +first) / 86_400_000 + first.getDay() + 1) / 7)}`;
+    };
+    return {
+        day: {
+            cellWidth: 36,
+            scales: [
+                { unit: "month", step: 1, format: say({ month: "long", year: "numeric" }) },
+                { unit: "day", step: 1, format: say({ day: "numeric" }) },
+            ],
+        },
+        week: {
+            cellWidth: 72,
+            scales: [
+                { unit: "month", step: 1, format: say({ month: "long", year: "numeric" }) },
+                { unit: "week", step: 1, format: week },
+            ],
+        },
+        month: {
+            cellWidth: 96,
+            scales: [
+                { unit: "year", step: 1, format: say({ year: "numeric" }) },
+                { unit: "month", step: 1, format: say({ month: "short" }) },
+            ],
+        },
+    }[zoom];
+}
+/**
+ * Records on a timeline — Odoo's Gantt view: projects, tasks, manufacturing orders.
+ *
+ * Context: drawn by SVAR React Gantt (MIT core: move, resize, progress, dependencies, zoom),
+ * dressed by `tokens.css` (its Willow theme's `--wx-*` variables point at web-ui's tokens).
+ * The chart keeps its own state while dragging; every finished change is reported (`onMove`,
+ * `onProgress`) and the app passes the saved `items` back, which the chart re-reads. Without
+ * `onMove` / `onProgress` it is read-only. Auto-scheduling, critical path and resource load are
+ * SVAR's PRO edition: a licence away, not built here.
+ */
+export function RecordGantt({ items, keyOf, titleOf, startOf, endOf, progressOf, parentOf, milestoneOf, links = [], zoom = "day", onMove, onProgress, onOpen, height = "28rem", nameHeader, }) {
+    const copy = useUiCopy();
+    /* The toolbar's: the scale starts at `zoom`, the closeness in the middle. */
+    const [scale, setScale] = useState(zoom);
+    const [closeness, setCloseness] = useState(3);
+    const time = scalesOf(scale, copy.locale);
+    const cellWidth = Math.round(time.cellWidth * ([0.5, 0.75, 1, 1.5, 2.25][closeness - 1] ?? 1));
+    const root = useRef(null);
+    const [fullscreen, setFullscreen] = useState(false);
+    useEffect(() => {
+        const follow = () => setFullscreen(document.fullscreenElement === root.current);
+        document.addEventListener("fullscreenchange", follow);
+        return () => document.removeEventListener("fullscreenchange", follow);
+    }, []);
+    const byId = useMemo(() => new Map(items.map((item) => [keyOf(item), item])), [items, keyOf]);
+    const parents = new Set(items.map((item) => parentOf?.(item)).filter(Boolean));
+    const tasks = items.map((item) => {
+        const id = keyOf(item);
+        const parent = parentOf?.(item);
+        return {
+            id,
+            text: titleOf(item),
+            start: startOf(item),
+            end: endOf(item),
+            ...(progressOf === undefined ? {} : { progress: progressOf(item) }),
+            ...(parent === undefined ? {} : { parent }),
+            type: milestoneOf?.(item) === true ? "milestone" : parents.has(id) ? "summary" : "task",
+            open: true,
+        };
+    });
+    const editable = onMove !== undefined || onProgress !== undefined;
+    /* The chart reports through its store's actions: `update-task` for a move, a stretch or the
+       progress handle — the finished one, not every pixel of the drag (`inProgress`). */
+    const init = (api) => {
+        api.on("update-task", (ev) => {
+            if (ev.inProgress === true)
+                return;
+            const item = byId.get(String(ev.id));
+            if (item === undefined)
+                return;
+            const { start, end, progress } = ev.task;
+            if (start instanceof Date && end instanceof Date)
+                onMove?.(item, start, end);
+            if (typeof progress === "number")
+                onProgress?.(item, progress);
+        });
+        api.on("select-task", (ev) => {
+            const item = byId.get(String(ev.id));
+            if (item !== undefined)
+                onOpen?.(item);
+        });
+    };
+    return (_jsxs("div", { ref: root, className: "flex min-w-0 flex-col overflow-hidden rounded-box border border-line bg-surface", style: { height }, children: [_jsx(TimelineToolbar, { scale: scale, onScaleChange: (next) => {
+                    if (next !== "year")
+                        setScale(next);
+                }, scales: ["day", "week", "month"], zoom: closeness, onZoomChange: setCloseness, fullscreen: fullscreen, onFullscreenChange: (next) => {
+                    if (next)
+                        void root.current?.requestFullscreen?.();
+                    else if (document.fullscreenElement !== null)
+                        void document.exitFullscreen();
+                } }), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(Willow, { fonts: false, children: _jsx(Gantt, { tasks: tasks, links: links.map((link) => ({ ...link, type: link.type ?? "e2s" })), scales: time.scales, cellWidth: cellWidth, readonly: !editable, columns: [{ id: "text", header: nameHeader ?? "", width: 260 }], init: init }) }) })] }));
+}

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

@@ -0,0 +1 @@
+export { type GanttLink, type GanttZoom, RecordGantt, type RecordGanttProps, } from "./RecordGantt.js";

package/dist/components/gantt/index.js

@@ -0,0 +1 @@
+export { RecordGantt, } from "./RecordGantt.js";

package/dist/components/index.d.ts

@@ -1,10 +1,13 @@
+export * from "./activity/index.js";
 export * from "./assist/index.js";
-export * from "./chatter/index.js";
+export * from "./calendar/index.js";
 export * from "./form/index.js";
 export * from "./frame/index.js";
+export * from "./gantt/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";
+export * from "./timeline/index.js";

package/dist/components/index.js

@@ -1,11 +1,14 @@
 /* COMPONENTS — primitives composed to answer ONE question of the product, by family. */
+export * from "./activity/index.js";
 export * from "./assist/index.js";
-export * from "./chatter/index.js";
+export * from "./calendar/index.js";
 export * from "./form/index.js";
 export * from "./frame/index.js";
+export * from "./gantt/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";
+export * from "./timeline/index.js";

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

@@ -1,8 +1,9 @@
 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 TotalsRow } from "../../primitives/value/Totals.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
@@ -10,11 +11,25 @@ import { type ReactNode } from "react";
  * 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"> & {
+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 = {
@@ -56,11 +71,36 @@ export type LineItemsProps<T> = {
     /** 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[];
+    /** 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 — a modal of the workspace, 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>;
+    /** The lines' order is the document's (Odoo's `sequence`): a grip at the start of each line
+     *  drags it, Alt + ↑ / ↓ moves it. `EditableTable`'s `onReorder`, passed through. */
+    onReorder?: (id: string, before: string | null) => void;
+    /** 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
@@ -71,4 +111,4 @@ export type LineItemsProps<T> = {
  * 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;
+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, onReorder, visibleColumnIds, onVisibleColumnIdsChange, }: LineItemsProps<T>): import("react").JSX.Element;