@sincpro/web-ui 0.0.0-stage → 0.1.0

package/dist/components/lines/LineItems.js

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

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

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

package/dist/components/lines/index.js

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

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

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

package/dist/components/lines/lines.js

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

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

@@ -0,0 +1,20 @@
+import type { ColumnControl, ColumnSpec } from "./columns.js";
+import type { Surface } from "../../foundations/types.js";
+/**
+ * The Odoo columns submenu: required fields stay checked and cannot be
+ * unchecked; optional fields toggle. It stays open while toggling so hiding
+ * three columns is three clicks, not three open-close round trips.
+ *
+ * Drawn only when the set declared optional columns. A menu of required-only
+ * fields would be a list of things you cannot do.
+ */
+export declare function ColumnsMenu({ control, surface, }: {
+    control: ColumnControl;
+    surface?: Surface;
+}): import("react").JSX.Element | null;
+export declare function specsFromColumns(columns: readonly {
+    id: string;
+    header: string;
+    optional?: boolean;
+    defaultHidden?: boolean;
+}[], fallbackOptional: boolean): ColumnSpec[];

package/dist/components/listing/ColumnsMenu.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Menu } from "../../primitives/menu/Menu.js";
+import { Columns3 } from "lucide-react";
+/**
+ * The Odoo columns submenu: required fields stay checked and cannot be
+ * unchecked; optional fields toggle. It stays open while toggling so hiding
+ * three columns is three clicks, not three open-close round trips.
+ *
+ * Drawn only when the set declared optional columns. A menu of required-only
+ * fields would be a list of things you cannot do.
+ */
+export function ColumnsMenu({ control, surface, }) {
+    const copy = useUiCopy();
+    if (!control.hasOptional)
+        return null;
+    const requiredOptions = control.required.map((column) => ({
+        id: column.id,
+        label: column.label,
+        checked: true,
+        disabled: true,
+        hint: copy.frame.required,
+    }));
+    const optionalOptions = control.optional.map((column) => ({
+        id: column.id,
+        label: column.label,
+        checked: control.isVisible(column.id),
+    }));
+    const groups = requiredOptions.length === 0
+        ? [{ label: copy.frame.show, options: optionalOptions }]
+        : [
+            { label: copy.frame.required, options: requiredOptions },
+            { label: copy.frame.optional, options: optionalOptions },
+        ];
+    const hiddenOptional = control.optional.some((column) => !control.isVisible(column.id));
+    return (_jsx(Menu, { label: copy.frame.columns, icon: Columns3, groups: groups, onSelect: control.toggle, closeOnSelect: false, active: hiddenOptional, ...(surface === undefined ? {} : { surface }), size: "sm" }));
+}
+export function specsFromColumns(columns, fallbackOptional) {
+    return columns.map((column) => ({
+        id: column.id,
+        label: column.header,
+        optional: column.optional ?? fallbackOptional,
+        ...(column.defaultHidden === true ? { defaultHidden: true } : {}),
+    }));
+}

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

@@ -0,0 +1,35 @@
+import type { GroupingControl } from "./grouping.js";
+import { type GroupableField, type GroupGrain } from "../../foundations/grouping.js";
+/**
+ * «AGRUPAR POR», adentro del panel de recortes.
+ *
+ * Context: va en la MISMA columna donde están los filtros y los favoritos, y no
+ * en un control aparte. Filtrar y agrupar son la misma pregunta —«qué parte de
+ * esto estoy mirando»— y separarlos obliga a abrir dos cosas para armar un
+ * recorte, sin poder ver los dos estados a la vez.
+ *
+ * ── Una fecha se DESPLIEGA, no se elige ─────────────────────────────
+ *
+ * Un campo común es una opción: se tilda y listo. Un campo de fecha no, porque
+ * «agrupar por fecha» no quiere decir nada hasta decir con qué corte — y los
+ * cortes no son excluyentes: «por mes y adentro por día» es una pregunta
+ * legítima y frecuente. Así que una fecha se abre y ofrece sus granos como
+ * CASILLAS, que se tildan de a varias.
+ *
+ * ── Y se ordenan solas ──────────────────────────────────────────────
+ *
+ * Tildar «día» y después «mes» da «mes › día», nunca al revés. No es una
+ * preferencia: un día entero vive adentro de un solo mes, así que partir primero
+ * por día deja un nivel de mes que no parte nada. La dirección la pone el
+ * calendario y por eso la pone el sistema — ver `normalizeLevels`.
+ */
+export type GroupingLevelsProps = {
+    /** Por qué campos se puede partir. Sin ninguno no se dibuja nada: una columna
+     *  vacía en el panel es peor que una columna que no está. */
+    fields: readonly GroupableField[];
+    control: GroupingControl;
+    /** Cómo se llama cada grano, cuando el producto lo dice con otras palabras.
+     *  Sin esto, las de la copia en el idioma activo. */
+    grainLabel?: (grain: GroupGrain) => string;
+};
+export declare function GroupingLevels({ fields, control, grainLabel }: GroupingLevelsProps): import("react").JSX.Element | null;

package/dist/components/listing/GroupingLevels.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { grainName } from "../../foundations/calendar.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { GRAIN_ORDER, levelKey, } from "../../foundations/grouping.js";
+import { ChevronDown, ChevronRight, ChevronUp, X } from "lucide-react";
+import { useState } from "react";
+function fieldLabel(fields, field) {
+    return fields.find((one) => one.field === field)?.label ?? field;
+}
+export function GroupingLevels({ fields, control, grainLabel }) {
+    const copy = useUiCopy();
+    /* Qué fechas están desplegadas. Arranca desplegada la que ya tenga algún grano
+       puesto: si no, lo puesto queda escondido detrás de un chevron y hay que
+       adivinar dónde. */
+    const [opened, setOpened] = useState(() => control.levels.filter((one) => one.grain !== undefined).map((one) => one.field));
+    if (fields.length === 0)
+        return null;
+    const placed = control.levels;
+    const grain = (one) => grainLabel?.(one) ?? grainName(one);
+    const isOpen = (field) => opened.includes(field);
+    const toggleOpen = (field) => setOpened((current) => current.includes(field) ? current.filter((one) => one !== field) : [...current, field]);
+    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [placed.length === 0 ? null : (_jsxs(_Fragment, { children: [_jsx("ol", { className: "flex flex-wrap gap-1 px-1 pb-1.5", children: placed.map((level, index) => (_jsx("li", { children: _jsxs("span", { className: "inline-flex items-center gap-1 rounded-pill border border-accent/40 bg-accent/18 py-0.5 pr-0.5 pl-1.5 text-micro text-ink", children: [_jsx("span", { className: "tabular-nums opacity-70", children: index + 1 }), _jsxs("span", { className: "max-w-32 truncate", children: [fieldLabel(fields, level.field), level.grain === undefined ? "" : ` · ${grain(level.grain)}`] }), _jsx("button", { type: "button", onClick: () => control.move(level.field, -1), disabled: index === 0, "aria-label": copy.grouping.up, title: copy.grouping.up, className: "rounded-pill p-0.5 hover:bg-primary/15 disabled:opacity-30 disabled:hover:bg-transparent", children: _jsx(ChevronUp, { className: "size-3", strokeWidth: 2.5 }) }), _jsx("button", { type: "button", onClick: () => control.move(level.field, 1), disabled: index === placed.length - 1, "aria-label": copy.grouping.down, title: copy.grouping.down, className: "rounded-pill p-0.5 hover:bg-primary/15 disabled:opacity-30 disabled:hover:bg-transparent", children: _jsx(ChevronDown, { className: "size-3", strokeWidth: 2.5 }) }), _jsx("button", { type: "button", onClick: () => control.remove(level.field, level.grain), "aria-label": copy.grouping.remove, title: copy.grouping.remove, className: "rounded-pill p-0.5 hover:bg-primary/15", children: _jsx(X, { className: "size-3", strokeWidth: 2.5 }) })] }) }, levelKey(level)))) }), _jsx("div", { className: "mb-1 h-px bg-line", role: "separator" })] })), fields.map((one) => {
+                const grains = one.grains;
+                /* Un campo común: una casilla y nada más. */
+                if (grains === undefined || grains.length === 0) {
+                    const on = control.has(one.field);
+                    return (_jsxs("button", { type: "button", onClick: () => control.toggle(one.field), "aria-pressed": on, className: `flex items-center gap-2 rounded-control px-1.5 py-1 text-left transition-colors duration-(--duration-instant) hover:bg-primary/8 ${on ? "bg-primary/6" : ""}`, children: [_jsx(Mark, { on: on }), _jsx("span", { className: `min-w-0 truncate text-meta ${on ? "font-medium text-ink" : "text-ink"}`, children: one.label })] }, one.field));
+                }
+                /* Una FECHA: se despliega y ofrece sus cortes como casillas. */
+                const open = isOpen(one.field);
+                const puestos = placed.filter((level) => level.field === one.field);
+                return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", onClick: () => toggleOpen(one.field), "aria-expanded": open, className: "flex items-center gap-1.5 rounded-control px-1.5 py-1 text-left transition-colors duration-(--duration-instant) hover:bg-primary/8", children: [_jsx(ChevronRight, { className: `size-(--size-icon-sm) shrink-0 text-muted transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: `min-w-0 flex-1 truncate text-meta ${puestos.length > 0 ? "font-medium text-ink" : "text-ink"}`, children: one.label }), puestos.length === 0 ? null : (_jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-accent/40 bg-accent/18 px-2 py-0.5 text-micro tabular-nums text-ink", children: puestos.length }))] }), !open ? null : (_jsx("div", { className: "flex flex-col pl-(--spacing-indent)", children: GRAIN_ORDER.filter((g) => grains.includes(g)).map((g) => {
+                                const on = control.has(one.field, g);
+                                return (_jsxs("button", { type: "button", onClick: () => control.toggle(one.field, g), "aria-pressed": on, className: `flex items-center gap-2 rounded-control px-1.5 py-1 text-left transition-colors duration-(--duration-instant) hover:bg-primary/8 ${on ? "bg-primary/6" : ""}`, children: [_jsx(Mark, { on: on }), _jsx("span", { className: `min-w-0 truncate text-meta ${on ? "font-medium text-ink" : "text-muted"}`, children: grain(g) })] }, g));
+                            }) }))] }, one.field));
+            }), placed.length === 0 ? null : (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-1 h-px bg-line", role: "separator" }), _jsx("button", { type: "button", onClick: () => control.clear(), className: "rounded-control px-2 py-1 text-left text-meta text-muted transition-colors duration-(--duration-instant) hover:bg-ink/4 hover:text-ink", children: copy.grouping.clear })] }))] }));
+}
+/** La marca de tildado. La columna existe SIEMPRE, tildada o no: sin ella,
+ *  tildar corre el texto y la lista salta. Apagada se dibuja el aro, la misma
+ *  marca que el panel de filtros, para que las dos columnas se lean como
+ *  casillas y no como texto suelto con un hueco a la izquierda. */
+function Mark({ on }) {
+    return (_jsx("span", { className: "flex size-(--size-icon-sm) shrink-0 items-center justify-center", children: on ? (_jsx("span", { className: "size-1.5 rounded-pill bg-primary" })) : (_jsx("span", { className: "size-3 rounded-pill border border-line-strong" })) }));
+}

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

@@ -0,0 +1,27 @@
+import type { Surface } from "../../foundations/types.js";
+import type { ReactNode } from "react";
+export declare function Listing({ bar, metrics, sticky, surface, children, }: {
+    /** The `ListingBar`: actions, title, search, pagination and views. */
+    bar?: ReactNode;
+    /**
+     * La barra se queda arriba al scrollear, debajo de lo que ya esté pegado.
+     *
+     * Es opt-in y no el default porque el fondo tiene que ser el de lo que hay
+     * DETRÁS, y eso depende de dónde esté puesta: el arquetipo de lista vive
+     * sobre el piso de la página, pero un `FrameView` —«el vistazo» de un
+     * registro— vive sobre el PAPEL blanco, y ahí la banda color piso se ve como
+     * una mancha. Se descubrió comparando historias, no razonando.
+     */
+    sticky?: boolean;
+    /** Sobre qué está puesta la lista. Sólo se usa para el fondo de la banda que
+     *  se pega: `chrome` pinta el mismo azul que ya pinta la barra —o sea,
+     *  invisible— y cualquier otra pinta el PISO, que es lo que hay detrás de una
+     *  lista de página. Las que viven adentro de algo blanco —un cajón, una vista
+     *  previa— son compactas, y en compacto la barra no se pega. */
+    surface?: Surface;
+    /** The metrics that also narrow down. They go BELOW the bar and above the
+     *  rows: they belong to the set I am looking at, not to the frame that frames
+     *  it — above the bar they read as part of the navigation. */
+    metrics?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/listing/Listing.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useHeaderSlot } from "../shell/headerSlot.js";
+import { byDensity, useDensity } from "../../foundations/density.js";
+import { useStickyLayer } from "../../foundations/sticky.js";
+import { createPortal } from "react-dom";
+/* ==================================================================== *
+ *  LISTING — the shape of a screen of N records. A single one, for all of them.
+ *
+ *  The request was literal: «in every list window don't forget that it has
+ *  [Search (Filters)] [List]». Up to here every view built that by hand —one
+ *  put the totals on top, another the search box below the upload panel, another
+ *  had no search box at all— and the result is that two lists of the same
+ *  product get used differently.
+ *
+ *  Four bands, always in the same order:
+ *
+ *      bar       crumbs · search · pagination
+ *                actions · title · columns · views
+ *      body      the rows, in a card with a border
+ *
+ *  ── The list goes in a card and the background stays behind ─────────
+ *
+ *  It is what separates an application from a document. Without the card the
+ *  rows float over nothing and the screen reads as running text; the card puts
+ *  a boundary around the set, and that boundary is what makes it read as «one
+ *  thing with elements inside».
+ *
+ *  ── Two densities, and both are needed ──────────────────────────────
+ *
+ *  `table`  aligned, sortable columns. It wins when there is width: the data
+ *           gets compared across rows without reading, which is what a table
+ *           exists for.
+ *  `rows`   two lines per record, big name and metadata underneath. It wins
+ *           when there is NO width —a narrow panel, the preview— because a
+ *           six-column table in 380 px is not a table, it is an accordion.
+ *
+ *  It is not an aesthetic preference: it is the available width. That is why
+ *  the consumer passes it and this piece does not choose it — only whoever
+ *  composes knows which surface it is going to land on.
+ *
+ *  ── The row lays itself out; nobody tells it how ────────────────────
+ *
+ *  WHICH presentation is the consumer's call. How a row arranges itself inside
+ *  the one that was chosen is nobody's: there is no width at which a row «turns
+ *  narrow», and no breakpoint written anywhere. Every zone asks for what it
+ *  needs —the name `--container-name`, the tags `--container-tags`, the
+ *  metadata what it says— and the line does what a line does: what does not fit
+ *  wraps, and the name keeps the first one.
+ *
+ *  **That is why it holds up with a checkbox, an icon, actions, no tags, or a
+ *  metadata three times longer.** None of that is declared anywhere: they all
+ *  take their width from the same line, so a list that selects wraps a little
+ *  earlier than one that does not, on its own. Asking the density instead —a
+ *  decision per SURFACE— got it wrong in the one place it mattered: a list in a
+ *  480 px drawer is comfortable —it draws its title, its counters, its full
+ *  padding— and narrow at the same time, and the name was left with whatever
+ *  was over between a metadata that did not shrink and a tag column of 8 rem:
+ *  about a dozen pixels, «ve…».
+ * ==================================================================== */
+export function Listing({ bar, metrics, sticky = false, surface, children, }) {
+    const d = useDensity();
+    /* La barra se PEGA arriba y las filas se van debajo de ella.
+       Context: con 187 filas, scrollear para ver la última dejaba sin buscador,
+       sin paginador y sin el conmutador de presentación — o sea que recortar
+       después de mirar obligaba a subir de nuevo. Se pega debajo de lo que ya
+       esté pegado (la barra de la aplicación) y empuja la pila para el
+       encabezado de la tabla, que se pega debajo de ella. Ver `system/sticky.tsx`. */
+    const band = useStickyLayer();
+    /* En compacto NO se pega, y no es por falta de espacio: compacto es un cajón
+       o una vista previa, o sea una caja corta con su propia cabecera y su propio
+       scroll. Una banda pegada ahí se pinta encima del papel blanco del cajón —se
+       ve como una mancha— para resolver un scroll que en cinco filas no existe.
+       Es la misma razón por la que `ListingBar` tampoco dibuja la identidad ahí. */
+    const pegada = sticky && d === "comfortable";
+    /* With a sidebar the bar is the screen's header: it goes in the frame's full-width slot,
+       above the sidebar (see `shell/headerSlot.ts`), and the frame does the sticking. */
+    const slot = useHeaderSlot();
+    const inSlot = pegada && slot !== null;
+    return (
+    /* Context: the box of rows carries no border. What separates it from the
+       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 })] }));
+}

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

@@ -0,0 +1,73 @@
+import type { Surface } from "../../foundations/types.js";
+import type { ReactNode } from "react";
+/** THE BAR — two rows, two questions.
+ *
+ *      ┌──────────┬──────────────────────────────┬──────────────┐
+ *      │ crumbs   │ 🔍 search…  ⚙3               │ 1–8 of 187 ‹ › │
+ *      ├──────────┼──────────────────────────────┼──────────────┤
+ *      │ [New]    │ Facturas · 180 · 7 · 8       │ [columns] [▤][▦] │
+ *      └──────────┴──────────────────────────────┴──────────────┘
+ *        WHERE / HOW MUCH I SEE                    HOW I LOOK
+ *
+ *  Pagination answers how much of the filtered set is on screen, so it stays
+ *  with the search. Columns and the presentation switcher answer how the set
+ *  is looked at, so they sit with the actions — not next to the page range.
+ *  Putting the four of them on the search line is how the field and «1–80»
+ *  painted over each other the moment the window shrank.
+ *
+ *  ── Why it is two lines tall ────────────────────────────────────────
+ *
+ *  Because the three things that go on the left do not fit in one: a
+ *  comfortable button is 34 px tall, a list title may have to wrap onto two
+ *  lines, and below it goes a sentence saying what the list is made of. Forcing
+ *  it into a single line means shrinking the button —the defect we already
+ *  fixed— or truncating the title, which is worse: a list that cannot be named
+ *  in full is indistinguishable from the one next to it.
+ *
+ *  ── The selection transforms the bar, it does not add one ───────────
+ *
+ *  When rows get selected, the identity zone turns into «3 elegidas ✕» plus the
+ *  actions that apply. **In the same place and without pushing anything.** A
+ *  bar that appears shifts the list downwards right when somebody is ticking
+ *  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, }: {
+    /** What starts something new. It stays visible even when there is a selection. */
+    actions?: ReactNode;
+    title?: string;
+    /** One sentence: what this list is made of, or what can be done with it. It
+     *  goes below the title and that is why it can be a real sentence. */
+    description?: string;
+    /** The totals per category. The ones in the pagination say how many there
+     *  are; these say what they are made of, which is another question. */
+    counters?: readonly {
+        label: string;
+        value: number | string;
+    }[];
+    /** When there are selected rows. It replaces the identity, in the same place. */
+    selection?: {
+        count: number;
+        onClear?: () => void;
+        actions?: ReactNode;
+    };
+    search?: ReactNode;
+    pagination?: ReactNode;
+    /** Columns menu and presentation switcher. They sit on the actions row, on
+     *  the right: they are how I look at the set, not how many of it I see. */
+    views?: ReactNode;
+    /** Where I come from. It goes above the row and only on the chrome. */
+    crumbs?: ReactNode;
+    /** `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;
+}): import("react").JSX.Element;
+export type ListIdentity = {
+    title?: string;
+    description?: string;
+    counters?: readonly {
+        label: string;
+        value: number | string;
+    }[];
+};