@sincpro/web-ui 0.1.0 → 1.0.0

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, onReorder, 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 modal of the workspace) — 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 }), ...(onReorder === undefined || read ? {} : { onReorder }), ...(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/BoardColumns.d.ts

@@ -0,0 +1,39 @@
+import type { Tone } from "../../foundations/types.js";
+import { type ReactNode } from "react";
+/** One stage of a board: its id (what `of` returns), its name, and its tone. */
+export type BoardColumn = {
+    id: string;
+    label: string;
+    tone?: Tone;
+};
+/** How a board lays its cards in stages, and what moving one means. */
+export type BoardStages<T> = {
+    /** The column a record goes in: its stage — or ANY field it is grouped by (the salesperson,
+     *  the priority, the tag): a board is a grouping you can drag across. */
+    of: (item: T) => string;
+    /** The columns, in order. Without it they come from the records themselves, in the order
+     *  they appear, named by `labelOf`. */
+    columns?: readonly BoardColumn[];
+    labelOf?: (id: string) => string;
+    /** A card dropped in another stage. Without it the board is read-only: nothing drags. */
+    onMove?: (item: T, to: string) => void;
+    /** How a record is named when a move is announced: «S00142 pasó a pedido». */
+    nameOf?: (item: T) => string;
+    /** The figure on a column's head: the expected revenue of the opportunities in it. */
+    total?: (items: readonly T[]) => ReactNode;
+    /** The bar under a column's head: how its records stand, by tone — Odoo's activity bar
+     *  (overdue red, today amber, planned green). `undefined` for a record with nothing to say. */
+    progress?: (item: T) => Tone | undefined;
+    /** «+» on a column's head: a name typed there creates a record in that column. */
+    onQuickCreate?: (column: string, name: string) => void;
+    /** A column at the end: «Agregar etapa». */
+    onAddColumn?: (label: string) => void;
+    /** Columns that start folded into a narrow strip (the won, the lost). */
+    defaultFolded?: readonly string[];
+};
+export declare function BoardColumns<T>({ items, keyOf, stages, card, }: {
+    items: readonly T[];
+    keyOf: (item: T) => string;
+    stages: BoardStages<T>;
+    card: (item: T) => ReactNode;
+}): import("react").JSX.Element;

package/dist/components/listing/BoardColumns.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { IconButton } from "../../primitives/button/Button.js";
+import { StatusDot } from "../../primitives/tag/Tag.js";
+import { ChevronsLeftRight, Plus } from "lucide-react";
+import { useState } from "react";
+/* The tones a progress bar draws, in the order they are read: what is wrong first. */
+const PROGRESS_ORDER = ["bad", "warn", "good", "info", "neutral", "accent"];
+const PROGRESS_FILL = {
+    bad: "bg-bad",
+    warn: "bg-warn",
+    good: "bg-good",
+    info: "bg-info",
+    neutral: "bg-muted",
+    accent: "bg-primary",
+};
+/** One-line input of a board: quick create, a new column. Enter keeps it, Escape leaves. */
+function BoardInput({ label, placeholder, onCommit, onClose, }) {
+    const [text, setText] = useState("");
+    return (_jsx("input", { autoFocus: true, "aria-label": label, placeholder: placeholder, value: text, onChange: (event) => setText(event.target.value), onKeyDown: (event) => {
+            if (event.key === "Escape")
+                onClose();
+            if (event.key === "Enter" && text.trim() !== "") {
+                onCommit(text.trim());
+                setText("");
+            }
+        }, onBlur: () => {
+            if (text.trim() === "")
+                onClose();
+        }, className: "h-(--size-control-md) w-full min-w-0 rounded-control border border-primary/60 bg-surface px-2.5 text-meta text-ink outline-none placeholder:text-muted" }));
+}
+/** The column's bar: its records counted by tone, what is wrong first. Said in words too. */
+function ProgressBar({ items, progress, }) {
+    const counts = new Map();
+    for (const item of items) {
+        const tone = progress(item);
+        if (tone !== undefined)
+            counts.set(tone, (counts.get(tone) ?? 0) + 1);
+    }
+    const parts = PROGRESS_ORDER.filter((tone) => (counts.get(tone) ?? 0) > 0);
+    if (parts.length === 0)
+        return null;
+    return (_jsx("div", { role: "img", "aria-label": parts.map((tone) => `${tone}: ${counts.get(tone)}`).join(", "), className: "mx-1 flex h-1.5 overflow-hidden rounded-pill bg-ink/8", children: parts.map((tone) => (_jsx("span", { className: PROGRESS_FILL[tone], style: { width: `${((counts.get(tone) ?? 0) / items.length) * 100}%` } }, tone))) }));
+}
+/* ==================================================================== *
+ *  THE BOARD BY STAGES — Odoo's kanban.
+ *
+ *  Context: a pipeline (quotations → orders → invoiced, leads → won) is read across: how many
+ *  in each stage, and which is stuck. One column per stage, the count on its head, and a card
+ *  moved by dragging it to another column — the gesture IS the change of stage.
+ *
+ *  Dragging is not the only way: a focused card moves with Alt + ← / →, and the move is said
+ *  out loud. A board that only drags is a board a keyboard cannot use.
+ * ==================================================================== */
+export function BoardColumns({ items, keyOf, stages, card, }) {
+    const copy = useUiCopy();
+    const { of, onMove, nameOf, total, progress, onQuickCreate, onAddColumn } = stages;
+    const columns = stages.columns ??
+        [...new Set(items.map(of))].map((id) => ({ id, label: stages.labelOf?.(id) ?? id }));
+    const [folded, setFolded] = useState(() => new Set(stages.defaultFolded ?? []));
+    const [creating, setCreating] = useState(null);
+    const [adding, setAdding] = useState(false);
+    const [dragging, setDragging] = useState(null);
+    const [over, setOver] = useState(null);
+    const [said, setSaid] = useState("");
+    const byId = new Map(items.map((item) => [keyOf(item), item]));
+    const move = (id, to) => {
+        const item = byId.get(id);
+        if (item === undefined || of(item) === to || onMove === undefined)
+            return;
+        onMove(item, to);
+        const column = columns.find((one) => one.id === to)?.label ?? to;
+        setSaid(fillCopy(copy.board.moved, { name: nameOf?.(item) ?? id, column }));
+    };
+    const toggleFold = (id) => setFolded((current) => {
+        const next = new Set(current);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        return next;
+    });
+    const dropOn = (id) => onMove === undefined
+        ? {}
+        : {
+            onDragOver: (event) => {
+                event.preventDefault();
+                setOver(id);
+            },
+            onDragLeave: () => setOver(null),
+            onDrop: (event) => {
+                event.preventDefault();
+                move(event.dataTransfer.getData("text/plain"), id);
+                setOver(null);
+                setDragging(null);
+            },
+        };
+    const byKeyboard = (event, item) => {
+        if (!event.altKey || (event.key !== "ArrowLeft" && event.key !== "ArrowRight"))
+            return;
+        const at = columns.findIndex((one) => one.id === of(item));
+        const next = columns[at + (event.key === "ArrowLeft" ? -1 : 1)];
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        move(keyOf(item), next.id);
+    };
+    return (_jsxs("div", { className: "flex min-w-0 items-start gap-3 overflow-x-auto p-3", children: [columns.map((column) => {
+                const inside = items.filter((item) => of(item) === column.id);
+                if (folded.has(column.id)) {
+                    /* Folded: a strip with its count and its name down the spine. Still a drop target —
+                       dropping on «perdido» is how a lost deal is marked. */
+                    return (_jsxs("section", { "aria-label": column.label, ...dropOn(column.id), className: `flex w-12 shrink-0 flex-col items-center gap-2 rounded-box border py-2 ${over === column.id ? "border-primary/50 bg-primary/6" : "border-line bg-ink/3"}`, children: [_jsx(IconButton, { icon: ChevronsLeftRight, label: fillCopy(copy.board.unfold, { column: column.label }), onClick: () => toggleFold(column.id) }), _jsx("span", { className: "text-micro text-muted tabular-nums", children: inside.length }), _jsx("span", { className: "text-vertical text-meta font-semibold text-ink", children: column.label })] }, column.id));
+                }
+                return (_jsxs("section", { "aria-label": column.label, ...dropOn(column.id), className: `flex w-(--container-lane) shrink-0 flex-col gap-2 rounded-box border p-2 transition-colors duration-(--duration-instant) ${over === column.id ? "border-primary/50 bg-primary/6" : "border-line bg-ink/3"}`, children: [_jsxs("header", { className: "flex min-w-0 items-center gap-1.5 px-1 py-0.5", children: [_jsx("h3", { className: "min-w-0 flex-1 truncate text-meta font-semibold text-ink", children: column.tone === undefined ? (column.label) : (_jsx(StatusDot, { tone: column.tone, label: column.label })) }), _jsx("span", { className: "shrink-0 text-micro text-muted tabular-nums", children: inside.length }), onQuickCreate === undefined ? null : (_jsx(IconButton, { icon: Plus, label: fillCopy(copy.board.quickCreate, { column: column.label }), onClick: () => setCreating(column.id) })), _jsx(IconButton, { icon: ChevronsLeftRight, label: fillCopy(copy.board.fold, { column: column.label }), onClick: () => toggleFold(column.id) })] }), total === undefined ? null : (_jsx("p", { className: "px-1 text-meta font-semibold text-ink tabular-nums", children: total(inside) })), progress === undefined || inside.length === 0 ? null : (_jsx(ProgressBar, { items: inside, progress: progress })), creating === column.id && onQuickCreate !== undefined ? (_jsx(BoardInput, { label: fillCopy(copy.board.quickCreate, { column: column.label }), placeholder: copy.board.quickPlaceholder, onCommit: (name) => onQuickCreate(column.id, name), onClose: () => setCreating(null) })) : null, inside.length === 0 ? (_jsx("p", { className: "px-1 py-3 text-micro text-muted", children: copy.board.emptyLane })) : (_jsx("ul", { className: "flex min-w-0 flex-col gap-2", children: inside.map((item) => {
+                                const id = keyOf(item);
+                                return (_jsx("li", { ...(onMove === undefined
+                                        ? {}
+                                        : {
+                                            draggable: true,
+                                            tabIndex: 0,
+                                            title: copy.board.moveHint,
+                                            "aria-keyshortcuts": "Alt+ArrowLeft Alt+ArrowRight",
+                                            onDragStart: (event) => {
+                                                event.dataTransfer.setData("text/plain", id);
+                                                event.dataTransfer.effectAllowed = "move";
+                                                setDragging(id);
+                                            },
+                                            onDragEnd: () => setDragging(null),
+                                            onKeyDown: (event) => byKeyboard(event, item),
+                                        }), className: `flex min-w-0 flex-col rounded-box focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary ${onMove === undefined ? "" : "cursor-grab active:cursor-grabbing"} ${dragging === id ? "opacity-50" : ""}`, children: card(item) }, id));
+                            }) }))] }, column.id));
+            }), onAddColumn === undefined ? null : (_jsx("div", { className: "flex w-(--container-lane) shrink-0 flex-col gap-2 p-2", children: adding ? (_jsx(BoardInput, { label: copy.board.addColumn, placeholder: copy.board.addColumnPlaceholder, onCommit: (label) => {
+                        onAddColumn(label);
+                        setAdding(false);
+                    }, onClose: () => setAdding(false) })) : (_jsxs("button", { type: "button", onClick: () => setAdding(true), className: "flex h-(--size-control-md) items-center gap-1.5 rounded-control px-2 text-meta text-muted transition-colors duration-(--duration-instant) hover:bg-ink/5 hover:text-ink focus-visible:outline-2 focus-visible:outline-primary", children: [_jsx(Plus, { "aria-hidden": true, className: "size-(--size-icon-sm)", strokeWidth: 2 }), copy.board.addColumn] })) })), _jsx("span", { role: "status", className: "sr-only", children: said })] }));
+}

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;
@@ -51,6 +83,11 @@ export declare function ListingBar({ actions, title, description, counters, sele
         count: number;
         onClear?: () => void;
         actions?: ReactNode;
+        /** More match than are chosen: offer to choose them all. */
+        matching?: {
+            total: number;
+            onSelect: () => void;
+        };
     };
     search?: ReactNode;
     pagination?: ReactNode;
@@ -62,6 +99,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
@@ -56,11 +88,21 @@ export function ListingBar({ actions, title, description, counters, selection, s
        Views used to sit next to the pagination. On a narrow window the search
        field and «1–80 / 211» painted over each other; columns and the switcher
        were the extra weight on a line that only needed how MANY. */
-    const center = selecting ? (_jsxs("div", { className: "flex min-w-0 items-center gap-x-2", children: [_jsxs("span", { className: `inline-flex h-(--size-control-md) shrink-0 items-center gap-1.5 rounded-control pr-1 pl-2.5 text-meta font-medium ${isChrome ? "bg-chrome-ink/14 text-chrome-ink" : "bg-ink/8 text-ink"}`, children: [_jsx("span", { className: "tabular-nums", children: selection?.count.toLocaleString(copy.locale) }), copy.selection.chosen, _jsx("button", { type: "button", onClick: selection?.onClear, "aria-label": copy.selection.clear, title: copy.selection.clear, className: `inline-flex size-5 items-center justify-center rounded-pill transition-colors duration-(--duration-instant) ${isChrome ? "hover:bg-chrome-ink/20" : "hover:bg-primary/20"}`, children: _jsx(X, { className: "size-3", strokeWidth: 2.5 }) })] }), selection?.actions === undefined ? null : (_jsx("div", { className: "flex min-w-0 items-center gap-1.5", children: selection.actions }))] })) : search === undefined ? null : (
+    const center = selecting ? (_jsxs("div", { className: "flex min-w-0 items-center gap-x-2", children: [_jsxs("span", { className: `inline-flex h-(--size-control-md) shrink-0 items-center gap-1.5 rounded-control pr-1 pl-2.5 text-meta font-medium ${isChrome ? "bg-chrome-ink/14 text-chrome-ink" : "bg-ink/8 text-ink"}`, children: [_jsx("span", { className: "tabular-nums", children: selection?.count.toLocaleString(copy.locale) }), copy.selection.chosen, _jsx("button", { type: "button", onClick: selection?.onClear, "aria-label": copy.selection.clear, title: copy.selection.clear, className: `inline-flex size-5 items-center justify-center rounded-pill transition-colors duration-(--duration-instant) ${isChrome ? "hover:bg-chrome-ink/20" : "hover:bg-primary/20"}`, children: _jsx(X, { className: "size-3", strokeWidth: 2.5 }) })] }), selection?.matching === undefined ||
+                selection.matching.total <= selection.count ? null : (_jsx("button", { type: "button", onClick: selection.matching.onSelect, className: `shrink-0 rounded-control px-1 text-meta font-medium underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${isChrome ? "text-chrome-link" : "text-primary"}`, children: fillCopy(copy.selection.allMatching, {
+                    count: selection.matching.total.toLocaleString(copy.locale),
+                }) })), selection?.actions === undefined ? null : (_jsx("div", { className: "flex min-w-0 items-center gap-1.5", children: selection.actions }))] })) : search === undefined ? null : (
     /* Selecting replaces the search box: what gets selected is over what is
        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: [title === undefined ? null : (_jsx("h3", { className: "min-w-0 shrink-0 truncate text-body font-semibold text-ink", children: title })), 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/PivotExplorer.d.ts

@@ -0,0 +1,34 @@
+import type { GroupableField, GroupLevel, PileOf } from "../../foundations/grouping.js";
+import { type PivotFold, type PivotKey } from "../../foundations/pivot.js";
+export type PivotExplorerProps<T> = {
+    items: readonly T[];
+    /** Which pile a record falls in, at a level — the same contract that groups a list. */
+    of: PileOf<T>;
+    /** What can be split by: a field, and its grains when it is a date. */
+    fields: readonly GroupableField[];
+    /** Every measure that can be shown; `defaultMeasures` says which start on. */
+    measures: readonly PivotFold<T>[];
+    defaultMeasures?: readonly string[];
+    /** The rows' levels, CONTROLLED from outside — the search bar's grouping. While given, the
+     *  rows follow it and are not edited here. */
+    rows?: readonly GroupLevel[];
+    defaultRows?: readonly GroupLevel[];
+    defaultColumns?: readonly GroupLevel[];
+    /** A cell was pressed: open the records that fell there. */
+    onCell?: (row: PivotKey, column: PivotKey) => void;
+    height?: number | string;
+    /** The file's name when downloaded. */
+    fileName?: string;
+};
+/**
+ * A pivot people actually pivot: what goes down the rows, what goes across the columns, which
+ * measures — chosen on the grid, not fixed in code.
+ *
+ * Context: the fold (`pivotFrom`) was already a real pivot — N levels each way, margins folded
+ * from the base — but its axes and measures were written once by whoever composed it. Here
+ * they are the person's: «+» adds a field (a date with its grain) to an axis, a level's ×
+ * drops it, ⇄ swaps the axes, the measures are ticked, and the grid downloads as it is seen.
+ * Inside a list the rows FOLLOW the search bar's grouping and the records are the ones the
+ * search left: the pivot answers the same question the list is asking.
+ */
+export declare function PivotExplorer<T>({ items, of, fields, measures, defaultMeasures, rows: outerRows, defaultRows, defaultColumns, onCell, height, fileName, }: PivotExplorerProps<T>): import("react").JSX.Element;