@sincpro/web-ui 0.1.0 → 0.2.0

package/dist/components/index.js

@@ -1,6 +1,6 @@
 /* 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 "./form/index.js";
 export * from "./frame/index.js";
 export * from "./lines/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,33 @@ 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 — 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
@@ -71,4 +108,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, visibleColumnIds, onVisibleColumnIdsChange, }: LineItemsProps<T>): import("react").JSX.Element;

package/dist/components/lines/LineItems.js

@@ -1,16 +1,19 @@
 "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 { 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
@@ -35,7 +38,7 @@ function plain(v) {
  * 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", }) {
+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";
@@ -54,7 +57,17 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
     const canChange = !read && onChange !== undefined;
     const canAdd = !read && onAdd !== undefined && newLine !== undefined;
     const canRemove = !read && onRemove !== undefined;
-    const canEdit = canChange && editor !== 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);
@@ -63,11 +76,35 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
             return getLineId(line);
         return first.text?.(line) ?? plain(first.value(line));
     };
-    const searchable = lines.length > searchFrom;
+    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(() => filterLines(lines, q, (line) => searchText !== undefined
-        ? searchText(line)
-        : columns.map((c) => c.text?.(line) ?? plain(c.value(line))).join(" "), copy.locale), [lines, columns, searchText, q, copy.locale]);
+    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)
@@ -122,6 +159,49 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
         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);
@@ -140,7 +220,7 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
         });
     };
     /* ── the table ──────────────────────────────────────────────────── */
-    const tableColumns = columns.map((c) => ({
+    const tableColumns = onScreen.map((c) => ({
         id: c.id,
         header: c.header,
         ...(c.width === undefined ? {} : { width: c.width }),
@@ -170,6 +250,7 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
                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}`;
@@ -178,20 +259,21 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
                    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 ? (_jsx(IconButton, { icon: Pencil, label: copy.lines.edit, "aria-describedby": nameId, haspopup: "dialog", onClick: () => openEditor(id, line) })) : null, canRemove ? (_jsx(IconButton, { icon: Trash2, label: copy.lines.remove, tone: "danger", "aria-describedby": nameId, onClick: () => remove(line) })) : null] }));
+                _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] }));
             },
         });
     }
-    const addButton = canAdd ? (_jsx(Button, { role: "secondary", size: "sm", icon: Plus, onClick: add, "data-line-add": "", children: copy.lines.add })) : 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(lines.length === 1 ? copy.lineItems.one : copy.lineItems.many, {
-            count: lines.length.toLocaleString(copy.locale),
+        ? 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: lines.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 ? (
+    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: {
@@ -199,19 +281,25 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
                                             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 }), addButton === null ? null : _jsx("span", { className: "ml-auto", children: addButton })] }), _jsx(EditableTable, { rows: shown, columns: tableColumns, getRowId: getLineId, empty: fillCopy(copy.lineItems.noMatch, { query: query.trim() }), layout: layout, ...(canEdit
+                                        }, 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)
-                                        openEditor(id, line);
+                                        openLine(id, line);
                                 },
                             }
                             : {}), ...(canChange && columns.some((c) => c.edit !== undefined)
                             ? { onChange: (id, next) => onChange?.(id, next) }
-                            : {}) })] })), totals === undefined || totals.length === 0 ? null : (
+                            : {}) })] })), 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: _jsx(Totals, { rows: 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 : (
+            _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: () => {

package/dist/components/listing/Listing.js

@@ -82,5 +82,5 @@ export function Listing({ bar, metrics, sticky = false, surface, children, }) {
        background is its white and its radius; a frame around a list that is
        already inside a framed panel is a nested rectangle, and nested
        rectangles are what make a product read like a cloud console. */
-    _jsxs("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: [inSlot ? (createPortal(bar, slot)) : (_jsx("div", { ref: band.ref, className: `min-w-0 ${pegada ? `sticky z-30 ${surface === "chrome" ? "bg-chrome" : "bg-ground"}` : ""}`, style: pegada ? band.self : undefined, children: bar })), inSlot && metrics !== undefined ? _jsx("div", { className: "pt-2", children: metrics }) : metrics, _jsx("div", { className: "min-w-0 overflow-clip rounded-box bg-surface", style: pegada && !inSlot ? band.below : undefined, children: children })] }));
+    _jsxs("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: [bar === undefined || bar === null ? null : inSlot ? (createPortal(bar, slot)) : (_jsx("div", { ref: band.ref, className: `min-w-0 ${pegada ? `sticky z-30 ${surface === "chrome" ? "bg-chrome" : "bg-ground"}` : ""}`, style: pegada ? band.self : undefined, children: bar })), inSlot && metrics !== undefined ? _jsx("div", { className: "pt-2", children: metrics }) : metrics, _jsx("div", { className: "min-w-0 overflow-clip rounded-box bg-surface", style: pegada && !inSlot ? band.below : undefined, children: children })] }));
 }

package/dist/components/listing/ListingBar.d.ts

@@ -32,8 +32,40 @@ import type { ReactNode } from "react";
  *  checkboxes, and the row they were about to tick is no longer where it was.
  *
  *  The actions on the left do NOT go away: «Nuevo» stays available with three
- *  rows selected, because selecting is not entering a mode. */
-export declare function ListingBar({ actions, title, description, counters, selection, search, pagination, views, crumbs, surface, }: {
+ *  rows selected, because selecting is not entering a mode.
+ *
+ *  ── Inside a record it is ONE line (`inline`) ────────────────────────
+ *
+ *      ┌───────────────────────────────────────────────────────────────┐
+ *      │ 🔍 search the lines…               12 records  [sort][cols][▤▦] │
+ *      └───────────────────────────────────────────────────────────────┘
+ *        WHAT I LOOK FOR (fills)          HOW MANY    HOW I LOOK
+ *
+ *  A collection that is a FIELD of a record — the lines of an order, the
+ *  contacts of a customer, the journal items of an invoice — is not a screen.
+ *  Everything the two rows above answer is already answered by the record
+ *  around it: where I am (the record's crumbs), what this is (the tab it sits
+ *  in), what I can do (the record's actions). Drawn with the page bar, it
+ *  spent two rows and a rule on the one question left —the search, alone and
+ *  centred on the first row; «Ordenar» and the switcher alone on the second—
+ *  and pushed the rows, which are what the tab is for, below the fold.
+ *
+ *  So it is a single line, and the order is the order of the questions: the
+ *  search FILLS from the left (it is the only thing with variable content),
+ *  then how many there are, then how they are looked at, then what starts a
+ *  new one. No band, no padding, no hairline: it sits on the record's paper,
+ *  aligned with the fields above it, and a light band inside a white sheet is
+ *  a rectangle inside a rectangle.
+ *
+ *  On a phone the line breaks by itself, with no threshold written anywhere:
+ *  the search asks for `--container-name` before it gives up its place, so
+ *  when the controls do not fit next to it they drop to a second line, pushed
+ *  to the right, and the search keeps the whole first one.
+ *
+ *  The count is a live region: typing in the search changes it, and somebody
+ *  who cannot see the rows thin out hears how many are left. With
+ *  `pagination` the page range replaces it — it already says how many. */
+export declare function ListingBar({ actions, title, description, counters, selection, search, pagination, views, crumbs, surface, inline, count, }: {
     /** What starts something new. It stays visible even when there is a selection. */
     actions?: ReactNode;
     title?: string;
@@ -62,6 +94,13 @@ export declare function ListingBar({ actions, title, description, counters, sele
     /** `chrome` paints the whole band navy and everything inside inherits it:
      *  the search box, the pagination and the switcher. See `system/surface.tsx`. */
     surface?: Surface;
+    /** One line, for a collection inside a record: search, count, views, actions. The
+     *  title, the description, the counters and the crumbs are not drawn — the record
+     *  around it already says them. Always on the canvas. See the header. */
+    inline?: boolean;
+    /** How many records there are, said on the inline line when there is no
+     *  `pagination` to say it. Ignored by the two-row bar: its identity has counters. */
+    count?: number;
 }): import("react").JSX.Element;
 export type ListIdentity = {
     title?: string;

package/dist/components/listing/ListingBar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useUiCopy } from "../../foundations/copy.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
 import { SurfaceProvider, useSurface } from "../../foundations/surface.js";
 import { Line } from "../../primitives/block/Line.js";
@@ -37,12 +37,44 @@ import { X } from "lucide-react";
  *  checkboxes, and the row they were about to tick is no longer where it was.
  *
  *  The actions on the left do NOT go away: «Nuevo» stays available with three
- *  rows selected, because selecting is not entering a mode. */
-export function ListingBar({ actions, title, description, counters, selection, search, pagination, views, crumbs, surface, }) {
+ *  rows selected, because selecting is not entering a mode.
+ *
+ *  ── Inside a record it is ONE line (`inline`) ────────────────────────
+ *
+ *      ┌───────────────────────────────────────────────────────────────┐
+ *      │ 🔍 search the lines…               12 records  [sort][cols][▤▦] │
+ *      └───────────────────────────────────────────────────────────────┘
+ *        WHAT I LOOK FOR (fills)          HOW MANY    HOW I LOOK
+ *
+ *  A collection that is a FIELD of a record — the lines of an order, the
+ *  contacts of a customer, the journal items of an invoice — is not a screen.
+ *  Everything the two rows above answer is already answered by the record
+ *  around it: where I am (the record's crumbs), what this is (the tab it sits
+ *  in), what I can do (the record's actions). Drawn with the page bar, it
+ *  spent two rows and a rule on the one question left —the search, alone and
+ *  centred on the first row; «Ordenar» and the switcher alone on the second—
+ *  and pushed the rows, which are what the tab is for, below the fold.
+ *
+ *  So it is a single line, and the order is the order of the questions: the
+ *  search FILLS from the left (it is the only thing with variable content),
+ *  then how many there are, then how they are looked at, then what starts a
+ *  new one. No band, no padding, no hairline: it sits on the record's paper,
+ *  aligned with the fields above it, and a light band inside a white sheet is
+ *  a rectangle inside a rectangle.
+ *
+ *  On a phone the line breaks by itself, with no threshold written anywhere:
+ *  the search asks for `--container-name` before it gives up its place, so
+ *  when the controls do not fit next to it they drop to a second line, pushed
+ *  to the right, and the search keeps the whole first one.
+ *
+ *  The count is a live region: typing in the search changes it, and somebody
+ *  who cannot see the rows thin out hears how many are left. With
+ *  `pagination` the page range replaces it — it already says how many. */
+export function ListingBar({ actions, title, description, counters, selection, search, pagination, views, crumbs, surface, inline = false, count, }) {
     const selecting = selection !== undefined && selection.count > 0;
     const d = useDensity();
     const copy = useUiCopy();
-    const activeSurface = useSurface(surface);
+    const activeSurface = useSurface(inline ? "canvas" : surface);
     const isChrome = activeSurface === "chrome";
     /* In compact the title and the description are NOT drawn, and it is not for
        lack of room: in a preview or on a phone, the surface header already says
@@ -61,6 +93,13 @@ export function ListingBar({ actions, title, description, counters, selection, s
        ALREADY filtered, so searching there would change the set underneath the
        selection. */
     _jsx("div", { className: "w-full min-w-0", children: search }));
+    if (inline) {
+        const howMany = pagination ??
+            (count === undefined ? null : (_jsx("span", { role: "status", className: "shrink-0 text-meta text-muted tabular-nums", children: count === 1
+                    ? copy.list.countOne
+                    : fillCopy(copy.list.count, { count: count.toLocaleString(copy.locale) }) })));
+        return (_jsx(SurfaceProvider, { value: "canvas", children: _jsxs("div", { className: `flex min-w-0 flex-wrap items-center gap-y-1.5 ${byDensity(d, "gap-x-3", "gap-x-2")}`, children: [center === null ? null : (_jsx("div", { className: "flex min-w-0 flex-1 basis-(--container-name) items-center overflow-x-clip overflow-y-visible", children: center })), howMany, views === undefined ? null : (_jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: views })), actions === undefined ? null : (_jsx("div", { className: `flex shrink-0 items-center gap-1.5 ${views === undefined ? "ml-auto" : ""}`, children: actions }))] }) }));
+    }
     /* El campo de búsqueda va en el CENTRO de la línea, y centrado contra la
        línea: pide `--container-search` y los dos lados se reparten lo que sobra
        en mitades iguales. Antes tomaba el resto, así que un rastro largo a la

package/dist/components/listing/Row.d.ts

@@ -18,9 +18,13 @@ import type { ReactNode } from "react";
  *
  *  «some metadata that might help is not visible» — and it was literal: to know
  *  whether `FAC/2026/0118` was paid or overdue you had to open it. */
-export declare function Row({ icon: Icon, name, onOpen, onPeek, tags, meta, selected, onSelectedChange, actions, more, onMoreSelect, openHint, children, }: {
+export declare function Row({ icon: Icon, name, onOpen, onPeek, tags, meta, selected, onSelectedChange, actions, more, onMoreSelect, openHint, children, copy: copyAs, }: {
     icon?: LucideIcon;
     name: string;
+    /** The copy button among the row's actions: on by default, copying the row's name — the
+     *  number of an invoice, a customer — without opening it. A string copies that instead;
+     *  `false` removes it. */
+    copy?: string | false;
     onOpen?: () => void;
     onPeek?: () => void;
     tags?: ReactNode;

package/dist/components/listing/Row.js

@@ -5,6 +5,7 @@ import { fillCopy, useUiCopy } from "../../foundations/copy.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
 import { stickyTop } from "../../foundations/sticky.js";
 import { Menu } from "../../primitives/menu/Menu.js";
+import { CopyButton } from "../../primitives/value/Copyable.js";
 import { ChevronRight, MoreHorizontal, SquareArrowOutUpRight } from "lucide-react";
 /* ---------------------------------------------------------------- *
  *  THE RICH ROW — the other density
@@ -26,7 +27,7 @@ import { ChevronRight, MoreHorizontal, SquareArrowOutUpRight } from "lucide-reac
  *
  *  «some metadata that might help is not visible» — and it was literal: to know
  *  whether `FAC/2026/0118` was paid or overdue you had to open it. */
-export function Row({ icon: Icon, name, onOpen, onPeek, tags, meta, selected, onSelectedChange, actions, more, onMoreSelect, openHint, children, }) {
+export function Row({ icon: Icon, name, onOpen, onPeek, tags, meta, selected, onSelectedChange, actions, more, onMoreSelect, openHint, children, copy: copyAs, }) {
     const d = useDensity();
     const copy = useUiCopy();
     const openAs = openHint ?? copy.shell.openAsPanel;
@@ -52,7 +53,7 @@ export function Row({ icon: Icon, name, onOpen, onPeek, tags, meta, selected, on
                          having to open a set to know whether it is a thousand rows or a
                          million— and it truncates instead of wrapping into itself: three
                          lines per row in a 480 px drawer means three rows fit on screen. */
-                        _jsx("span", { className: "min-w-0 truncate text-micro tabular-nums text-muted", children: meta }))] }), tags === undefined ? null : (_jsx("span", { className: "flex min-w-fit shrink basis-(--container-tags) items-center justify-end gap-1.5", children: tags })), _jsxs("span", { className: "flex shrink-0 items-center gap-1 opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 focus-within:opacity-100", children: [actions, onOpen === undefined ? null : (_jsx("button", { type: "button", onClick: (e) => {
+                        _jsx("span", { className: "min-w-0 truncate text-micro tabular-nums text-muted", children: meta }))] }), tags === undefined ? null : (_jsx("span", { className: "flex min-w-fit shrink basis-(--container-tags) items-center justify-end gap-1.5", children: tags })), _jsxs("span", { className: "flex shrink-0 items-center gap-1 opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 focus-within:opacity-100 pointer-coarse:opacity-100", children: [actions, copyAs === false ? null : (_jsx(CopyButton, { value: copyAs ?? name, label: fillCopy(copy.copyable.field, { label: name }) })), onOpen === undefined ? null : (_jsx("button", { type: "button", onClick: (e) => {
                                 e.stopPropagation();
                                 onOpen();
                             }, title: openAs, "aria-label": `${openAs}: ${name}`, className: "inline-flex size-(--size-control-sm) items-center justify-center rounded-pill text-muted transition-colors duration-(--duration-instant) hover:bg-ink/6 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", children: _jsx(SquareArrowOutUpRight, { className: "size-(--size-icon-sm)", strokeWidth: 2 }) })), more === undefined || more.length === 0 ? null : (_jsx("span", { onClick: (e) => e.stopPropagation(), role: "presentation", children: _jsx(Menu, { label: fillCopy(copy.selection.moreOf, { name }), groups: more, icon: MoreHorizontal, iconOnly: true, chevron: false, align: "end", width: "sm", variant: "text", ...(onMoreSelect === undefined ? {} : { onSelect: onMoreSelect }) }) }))] })] }) }));

package/dist/components/record/RecordHeader.d.ts

@@ -2,9 +2,9 @@ import { type Crumb } from "./Breadcrumb.js";
 import { type DirtyState } from "./DirtyActions.js";
 import type { Surface, Tone } from "../../foundations/types.js";
 import type { LucideIcon } from "lucide-react";
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 export type { Surface };
-export declare function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Icon, title, subtitle, tag, figure, railSurface, smart, aspects, dirty, chatter, chatterLayout, children, }: {
+export declare function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Icon, title, subtitle, tag, figure, railSurface, smart, aspects, dirty, activity, activityLayout, blocking, indicator, children, }: {
     crumbs?: readonly Crumb[];
     pager?: ReactNode;
     /** The action buttons. At most three visible + a `Menu` with `iconOnly`, and
@@ -12,25 +12,23 @@ export declare function RecordHeader({ crumbs, pager, actions, status, kicker, i
      *  never the navigation ones. They take the rail's surface from context: write
      *  them without `surface`, light by default, dark on `Record.Rail surface="chrome"`. */
     actions?: ReactNode;
-    /** La historia del registro: `<Chatter …/>`. En `page` es la última fila de
-     *  la hoja —el mismo papel, separado por una línea— y no una segunda tarjeta.
-     *  En `aside` sigue al costado, con su propio marco. */
-    chatter?: ReactNode;
+    /** Everything around the record: its notices, conversation and history — an
+     *  `Activity`. Never inside the sheet: it is about the record, not part of the form. */
+    activity?: ReactNode;
     /**
-     * Dónde se pone respecto de la hoja.
+     * Where the activity goes, as the record's width allows (THE PAGE, below).
      *
-     *     page    debajo y a todo el ancho, como hoja propia. **El default**: un
-     *             formulario necesita su ancho, y una columna al costado se lo
-     *             come en cuanto la pantalla no sobra.
-     *     aside   al costado cuando hay ancho, debajo cuando no.
+     *     auto    a column at the RIGHT of the sheet, joined to it, when the page is
+     *             `--container-beside` wide, and a card BELOW the sheet when it is not.
+     *             **The default.**
+     *     below   always below the sheet, at its width.
      *
-     * Lo dice el REGISTRO y no se adivina del hijo: la dirección del flex la pone
-     * este contenedor, y un padre que mira qué le pasaron adentro para decidir
-     * cómo acomodarse se rompe la próxima vez que alguien envuelva el chatter en
-     * otra cosa.
+     * It is said by the RECORD and not guessed from the child: the flex direction is set by
+     * this container, and a parent that inspects what it was handed to decide how to lay
+     * itself out breaks the next time someone wraps the panel in something else.
      */
-    chatterLayout?: "aside" | "page";
-    /** `StatusBar` (where is it at?), the chatter's `Timeline` (what happened to get
+    activityLayout?: "auto" | "below";
+    /** `StatusBar` (where is it at?), the activity's `Timeline` (what happened to get
      *  here?), or both: they are different questions and many records only have one. */
     status?: ReactNode;
     /** The category, small and above the name: «factura de cliente». It makes a
@@ -65,6 +63,12 @@ export declare function RecordHeader({ crumbs, pager, actions, status, kicker, i
      *  it has no way to know. As long as there are changes, the only thing that
      *  can be done is confirm them or throw them away. */
     dirty?: DirtyState;
+    /** What is WRONG with the record — `RecordBlocking`. Always visible, outside the sheet:
+     *  between the rail and the paper, never among the fields (see `RecordNotices`). */
+    blocking?: ReactNode;
+    /** The rest of the record's notices, as one indicator — `RecordNoticeIndicator`. In the
+     *  rail next to the counters; without a rail, first in the record, next to them. */
+    indicator?: ReactNode;
     /** The record body. It sits IN the paper with the title, so groups, tabs
      *  and the page are one white sheet on the ground — Odoo's `<sheet>`. */
     children?: ReactNode;