@sincpro/web-ui 0.2.0 → 1.1.0

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/ListingBar.d.ts

@@ -83,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;

package/dist/components/listing/ListingBar.js

@@ -88,7 +88,10 @@ 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. */
@@ -98,7 +101,7 @@ export function ListingBar({ actions, title, description, counters, selection, s
             (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 }))] }) }));
+        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

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;

package/dist/components/listing/PivotExplorer.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { grainName } from "../../foundations/calendar.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { pivotFrom } from "../../foundations/pivot.js";
+import { downloadPivot } from "../../foundations/pivotSheet.js";
+import { Button, IconButton } from "../../primitives/button/Button.js";
+import { Menu } from "../../primitives/menu/Menu.js";
+import { PivotTable } from "../../primitives/table/PivotTable.js";
+import { Tags } from "../../primitives/tag/Tags.js";
+import { ArrowLeftRight, Download, Plus, Sigma } from "lucide-react";
+import { useMemo, useState } from "react";
+const levelId = (level) => `${level.field}:${level.grain ?? ""}`;
+const fromId = (id) => {
+    const [field = "", grain = ""] = id.split(":");
+    return grain === "" ? { field } : { field, grain: grain };
+};
+/**
+ * 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 function PivotExplorer({ items, of, fields, measures, defaultMeasures, rows: outerRows, defaultRows = [], defaultColumns = [], onCell, height, fileName, }) {
+    const copy = useUiCopy();
+    const words = copy.pivot;
+    const [ownRows, setOwnRows] = useState(defaultRows);
+    const [columns, setColumns] = useState(defaultColumns);
+    const [chosen, setChosen] = useState(() => new Set(defaultMeasures ?? measures.slice(0, 1).map((one) => one.id)));
+    const rows = outerRows ?? ownRows;
+    const following = outerRows !== undefined;
+    const labelOf = (level) => {
+        const field = fields.find((one) => one.field === level.field)?.label ?? level.field;
+        return level.grain === undefined
+            ? field
+            : `${field} · ${grainName(level.grain).toLowerCase()}`;
+    };
+    const shownMeasures = measures.filter((one) => chosen.has(one.id));
+    const pivot = useMemo(() => pivotFrom(items, { rows, columns, of, measures: shownMeasures, labelOf }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [items, rows, columns, of, shownMeasures.map((one) => one.id).join("|")]);
+    /* What can be added to an axis: every field (each grain of a date) not on either axis. */
+    const used = new Set([...rows, ...columns].map(levelId));
+    const options = fields.flatMap((field) => (field.grains ?? [undefined]).map((grain) => {
+        const level = grain === undefined ? { field: field.field } : { field: field.field, grain };
+        return {
+            id: levelId(level),
+            label: labelOf(level),
+            disabled: used.has(levelId(level)),
+        };
+    }));
+    const axis = (name, levels, set) => (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-micro font-medium text-muted", children: name }), _jsx(Tags, { label: name, items: levels.map((level) => ({
+                    id: levelId(level),
+                    label: labelOf(level),
+                    ...(set === null
+                        ? {}
+                        : {
+                            onRemove: () => set(levels.filter((one) => levelId(one) !== levelId(level))),
+                            removeLabel: fillCopy(words.removeLevel, { level: labelOf(level) }),
+                        }),
+                })) }), set === null ? (_jsx("span", { className: "text-micro text-muted italic", children: words.fromSearch })) : (_jsx(Menu, { label: fillCopy(words.addLevel, { axis: name }), icon: Plus, iconOnly: true, chevron: false, variant: "text", groups: [{ options }], onSelect: (id) => set([...levels, fromId(id)]) }))] }));
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-5 gap-y-2", children: [_jsx(Menu, { label: words.measures, icon: Sigma, groups: [
+                            {
+                                options: measures.map((one) => ({
+                                    id: one.id,
+                                    label: one.header,
+                                    checked: chosen.has(one.id),
+                                })),
+                            },
+                        ], onSelect: (id) => setChosen((current) => {
+                            const next = new Set(current);
+                            if (next.has(id))
+                                next.delete(id);
+                            else
+                                next.add(id);
+                            return next;
+                        }) }), axis(words.rowsAxis, rows, following ? null : setOwnRows), axis(words.columnsAxis, columns, setColumns), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [following ? null : (_jsx(IconButton, { icon: ArrowLeftRight, label: words.swap, onClick: () => {
+                                    setOwnRows(columns);
+                                    setColumns(rows);
+                                } })), _jsx(Button, { role: "ghost", size: "sm", icon: Download, onClick: () => downloadPivot(pivot, fileName === undefined ? {} : { name: fileName }), children: words.download })] })] }), _jsx(PivotTable, { pivot: pivot, ...(onCell === undefined ? {} : { onCell }), ...(height === undefined ? {} : { height }) })] }));
+}

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

@@ -12,22 +12,20 @@ import type { ReactNode } from "react";
  * Its hierarchy is the row's: the state first (what it is), the name as the entry point,
  * the facts below in the quiet size.
  */
-export declare function RecordCard({ title, tags, meta, figure, media, onOpen, }: {
-    /** The record's name — the entry point of the card. */
+export declare function RecordCard({ title, subtitle, tags, meta, figure, media, footer, onOpen, }: {
     title: ReactNode;
-    /** The state, as a `Tag`: read before the name, the way a board is scanned. */
+    /** Who or what it is about, under the title: the customer of an opportunity. */
+    subtitle?: ReactNode;
     tags?: ReactNode;
-    /** The facts that tell two cards apart — a number, a date. */
     meta?: ReactNode;
-    /** The record's key figure, on the right of the name — an amount. */
     figure?: ReactNode;
-    /** The record's picture — a product photo, a customer's logo — or its icon. A board of
-     *  products is recognised by the pictures before a single name is read. */
     media?: {
         src?: string;
         alt?: string;
         icon?: LucideIcon;
     };
-    /** Opens the record. Without it the card is not pressable. */
+    /** The card's last line, its controls: priority, kanban state, next activity, the owner's
+     *  avatar — each its own button, pressable without opening the card. */
+    footer?: ReactNode;
     onOpen?: () => void;
 }): import("react").JSX.Element;

package/dist/components/listing/RecordCard.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Thumb } from "../../primitives/cell/CellStack.js";
 /**
  * One record as a card — the board presentation of a list.
@@ -13,10 +13,16 @@ import { Thumb } from "../../primitives/cell/CellStack.js";
  * Its hierarchy is the row's: the state first (what it is), the name as the entry point,
  * the facts below in the quiet size.
  */
-export function RecordCard({ title, tags, meta, figure, media, onOpen, }) {
-    const body = (_jsxs(_Fragment, { children: [media === undefined ? null : (_jsx(Thumb, { size: "lg", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), tags, _jsxs("div", { className: "flex min-w-0 items-baseline justify-between gap-3", children: [_jsx("p", { className: "min-w-0 truncate text-lead font-medium text-ink", children: title }), figure === undefined ? null : (_jsx("p", { className: "shrink-0 text-lead font-semibold tabular-nums text-ink", children: figure }))] }), meta === undefined ? null : (_jsx("p", { className: "text-micro tabular-nums text-muted", children: meta }))] }));
-    const box = "flex min-w-0 flex-col gap-2 rounded-box border border-line bg-surface p-4 text-left";
-    if (onOpen === undefined)
-        return _jsx("div", { className: box, children: body });
-    return (_jsx("button", { type: "button", onClick: onOpen, className: `${box} transition-colors duration-(--duration-instant) hover:border-line-strong focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary`, children: body }));
+export function RecordCard({ title, subtitle, tags, meta, figure, media, footer, onOpen, }) {
+    /* The card is a box, and the TITLE is the button that opens it, stretched over the whole
+       card (`after:inset-0`). It used to be a `<button>` around everything: a priority star or a
+       kanban state inside it would be a control inside a control, which is invalid and which a
+       screen reader announces as one thing. The footer's controls sit above the stretch. */
+    const titleText = _jsx("span", { className: "min-w-0 truncate", children: title });
+    return (_jsxs("div", { className: `relative flex w-full min-w-0 flex-col gap-2 rounded-box border border-line bg-surface p-4 text-left ${onOpen === undefined
+            ? ""
+            : "transition-colors duration-(--duration-instant) focus-within:border-line-strong hover:border-line-strong"}`, children: [media === undefined ? null : (_jsx(Thumb, { size: "lg", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), tags === undefined ? null : _jsx("div", { className: "flex flex-wrap gap-1.5", children: tags }), _jsxs("div", { className: "flex min-w-0 items-baseline justify-between gap-3", children: [onOpen === undefined ? (_jsx("p", { className: "flex min-w-0 text-lead font-medium text-ink", children: titleText })) : (_jsx("button", { type: "button", onClick: onOpen, className: "flex min-w-0 text-left text-lead font-medium text-ink outline-none after:absolute after:inset-0 after:rounded-box focus-visible:after:outline-2 focus-visible:after:outline-primary", children: titleText })), figure === undefined ? null : (_jsx("p", { className: "shrink-0 text-lead font-semibold tabular-nums text-ink", children: figure }))] }), subtitle === undefined ? null : (
+            /* Above the stretched title, at its own width: the subtitle may be a link to ANOTHER
+               record (the customer), which must open that one and not the card. */
+            _jsx("p", { className: "relative z-10 -mt-1.5 w-fit max-w-full min-w-0 truncate text-meta text-muted", children: subtitle })), meta === undefined ? null : (_jsx("p", { className: "text-micro tabular-nums text-muted", children: meta })), footer === undefined ? null : (_jsx("div", { className: "relative z-10 flex min-w-0 items-center gap-1.5", children: footer }))] }));
 }

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

@@ -18,8 +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, copy: copyAs, }: {
+export declare function Row({ icon: Icon, avatar, name, onOpen, onPeek, click, openers, tags, meta, selected, onSelectedChange, actions, more, onMoreSelect, openHint, children, copy: copyAs, }: {
     icon?: LucideIcon;
+    /** A person or a company in the icon's place: who the row is, recognised before it is read. */
+    avatar?: {
+        name: string;
+        src?: string;
+    };
     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;
@@ -27,6 +32,10 @@ export declare function Row({ icon: Icon, name, onOpen, onPeek, tags, meta, sele
     copy?: string | false;
     onOpen?: () => void;
     onPeek?: () => void;
+    /** What a press on the body does when both exist: the look (default) or the record. */
+    click?: "peek" | "open";
+    /** The 👁 / ↗ buttons. Off in a list that chooses: there the row answers, it does not open. */
+    openers?: boolean;
     tags?: ReactNode;
     /** The secondary data, already formatted. In mono: it aligns across rows. */
     meta?: string;
@@ -67,7 +76,7 @@ export declare function Row({ icon: Icon, name, onOpen, onPeek, tags, meta, sele
  * espaciadores de casilla, ícono y acciones— en vez de declarar un ancho
  * propio. Si `Row` cambia su geometría, esto la sigue.
  */
-export declare function RowHeader({ name, meta, tags, withSelection, withIcon, withActions, }: {
+export declare function RowHeader({ name, meta, tags, withSelection, withIcon, withAvatar, withActions, trail, }: {
     name: string;
     meta?: string;
     tags?: string;
@@ -75,10 +84,20 @@ export declare function RowHeader({ name, meta, tags, withSelection, withIcon, w
      *  es el único que sabe si esta lista elige y si sus filas tienen ícono. */
     withSelection?: boolean;
     withIcon?: boolean;
+    /** The rows carry a face instead of an icon: a wider spacer, so the labels stay aligned. */
+    withAvatar?: boolean;
     /** La zona de acciones de la derecha ocupa su lugar aunque esté invisible
      *  —así nada se corre al pasar el puntero—, así que el rótulo de las fichas
      *  queda desalineado si acá no se reserva lo mismo. */
     withActions?: boolean;
+    /** What the rows have at their end — the same flags `Row` gets — drawn invisible here so
+     *  the header reserves exactly that width. Takes over from `withActions`. */
+    trail?: {
+        actions?: ReactNode;
+        peek?: boolean;
+        open?: boolean;
+        copy?: boolean;
+    };
 }): import("react").JSX.Element;
 /**
  * The header of a group inside a list.

package/dist/components/listing/Row.js

@@ -1,12 +1,28 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { RecordLink } from "./RecordLink.js";
 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 { HEADER_TEXT } from "../../primitives/table/Table.js";
 import { CopyButton } from "../../primitives/value/Copyable.js";
-import { ChevronRight, MoreHorizontal, SquareArrowOutUpRight } from "lucide-react";
+import { Avatar } from "../../primitives/value/Person.js";
+import { ChevronRight, Eye, MoreHorizontal, SquareArrowOutUpRight } from "lucide-react";
+const ICON_BUTTON = "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";
+/** The buttons at the end of a row. Its own piece so `RowHeader` can draw the same one,
+ *  invisible, and reserve exactly its width — a spacer of a guessed width drifted every time
+ *  a button was added. */
+function Trail({ name, openAs, actions, copy: copyAs, onPeek, onOpen, more, onMoreSelect, }) {
+    const copy = useUiCopy();
+    return (_jsxs(_Fragment, { children: [actions, copyAs === false ? null : (_jsx(CopyButton, { value: copyAs ?? name, label: fillCopy(copy.copyable.field, { label: name }) })), onPeek === undefined ? null : (_jsx("button", { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    onPeek();
+                }, title: copy.list.peek, "aria-label": `${copy.list.peek}: ${name}`, className: ICON_BUTTON, children: _jsx(Eye, { className: "size-(--size-icon-sm)", strokeWidth: 2 }) })), onOpen === undefined ? null : (_jsx("button", { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    onOpen();
+                }, title: openAs, "aria-label": `${openAs}: ${name}`, className: ICON_BUTTON, 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 }) }) }))] }));
+}
 /* ---------------------------------------------------------------- *
  *  THE RICH ROW — the other density
  * ---------------------------------------------------------------- */
@@ -27,10 +43,13 @@ 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, copy: copyAs, }) {
+export function Row({ icon: Icon, avatar, name, onOpen, onPeek, click = "peek", openers = true, tags, meta, selected, onSelectedChange, actions, more, onMoreSelect, openHint, children, copy: copyAs, }) {
     const d = useDensity();
     const copy = useUiCopy();
-    const openAs = openHint ?? copy.shell.openAsPanel;
+    const openAs = openHint ?? copy.list.open;
+    /* A read-only row (nothing to peek, nothing to open) does not light up on hover: a wash
+       and a hand promise a click that does nothing. */
+    const interactive = (onPeek ?? onOpen) !== undefined;
     const row = (
     /* A `div` and not an `li`: whoever composes decides whether this is a list,
        a table or a branch of a tree. And the zone that peeks is a `div` with
@@ -42,21 +61,18 @@ export function Row({ icon: Icon, name, onOpen, onPeek, tags, meta, selected, on
              no rule between them read as a paragraph. The wash is the inner row,
              inset and rounded, so the hover is a mark and not a stripe. The inner
              padding is shorter by exactly that inset, so the text does not move. */
-            className: `group/row flex min-w-0 items-center rounded-control transition-colors duration-(--duration-instant) hover:bg-ink/4 ${byDensity(d, "gap-3 px-2 py-2", "gap-2 px-1.5 py-1")}`, 
+            className: `group/row flex min-w-0 items-center rounded-control transition-colors duration-(--duration-instant) ${interactive ? "cursor-pointer hover:bg-ink/4" : ""} ${byDensity(d, "gap-3 px-2 py-2", "gap-2 px-1.5 py-1")}`, 
             /* `onPeek` con `onOpen` de reserva: quien sólo declara `onOpen` —lo
              natural si nunca oyó hablar de la vista previa— tiene que poder abrir
              igual haciendo click en cualquier parte de la fila, no sólo en el
              nombre. Con la vista previa apagada (`PeekLayer.tsx`) esto es hoy el
              caso de todos: un click en la fila abre, sin más. */
-            onClick: onPeek ?? onOpen, role: "presentation", children: [onSelectedChange === undefined ? null : (_jsx("input", { type: "checkbox", checked: selected ?? false, "aria-label": fillCopy(copy.selection.named, { name }), onChange: (e) => onSelectedChange(e.target.checked), onClick: (e) => e.stopPropagation(), className: "size-3.5 shrink-0 cursor-pointer accent-primary" })), Icon === undefined ? null : (_jsx(Icon, { className: "size-(--size-icon-md) shrink-0 text-muted", strokeWidth: 1.75, "aria-hidden": true })), _jsxs("div", { className: `flex min-w-0 shrink grow basis-(--container-name) flex-wrap items-center gap-y-0 ${byDensity(d, "gap-x-3", "gap-x-2")}`, children: [_jsx("span", { className: "min-w-0 grow basis-(--container-name)", children: _jsx(RecordLink, { ...((onOpen ?? onPeek) === undefined ? {} : { onClick: (onOpen ?? onPeek) }), title: name, children: name }) }), meta === undefined ? null : (
+            onClick: click === "open" ? (onOpen ?? onPeek) : (onPeek ?? onOpen), role: "presentation", children: [onSelectedChange === undefined ? null : (_jsx("input", { type: "checkbox", checked: selected ?? false, "aria-label": fillCopy(copy.selection.named, { name }), onChange: (e) => onSelectedChange(e.target.checked), onClick: (e) => e.stopPropagation(), className: "size-3.5 shrink-0 cursor-pointer accent-primary" })), avatar !== undefined ? (_jsx(Avatar, { name: avatar.name, size: "sm", ...(avatar.src === undefined ? {} : { src: avatar.src }) })) : Icon === undefined ? null : (_jsx(Icon, { className: "size-(--size-icon-md) shrink-0 text-muted", strokeWidth: 1.75, "aria-hidden": true })), _jsxs("div", { className: `flex min-w-0 shrink grow basis-(--container-name) flex-wrap items-center gap-y-0 ${byDensity(d, "gap-x-3", "gap-x-2")}`, children: [_jsx("span", { className: "min-w-0 grow basis-(--container-name)", children: _jsx(RecordLink, { ...((onOpen ?? onPeek) === undefined ? {} : { onClick: (onOpen ?? onPeek) }), title: name, children: name }) }), meta === undefined ? null : (
                         /* Wrapped or not, the metadata is still there —it is what saves
                          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 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 }) }) }))] })] }) }));
+                        _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 })), _jsx("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: _jsx(Trail, { name: name, openAs: openAs, ...(actions === undefined ? {} : { actions }), copy: copyAs, ...(onPeek === undefined || !openers ? {} : { onPeek }), ...(onOpen === undefined || !openers ? {} : { onOpen }), ...(more === undefined ? {} : { more }), ...(onMoreSelect === undefined ? {} : { onMoreSelect }) }) })] }) }));
     if (children === undefined)
         return row;
     /* What the resource produced, hanging below. The indent reaches up to where
@@ -87,13 +103,13 @@ export function Row({ icon: Icon, name, onOpen, onPeek, tags, meta, selected, on
  * espaciadores de casilla, ícono y acciones— en vez de declarar un ancho
  * propio. Si `Row` cambia su geometría, esto la sigue.
  */
-export function RowHeader({ name, meta, tags, withSelection = false, withIcon = false, withActions = false, }) {
+export function RowHeader({ name, meta, tags, withSelection = false, withIcon = false, withAvatar = false, withActions = false, trail, }) {
     const d = useDensity();
-    const rotulo = "truncate text-micro font-medium text-muted";
+    const rotulo = `truncate ${HEADER_TEXT}`;
     return (_jsxs("div", { "data-slot": "row-header", 
         /* Se pega debajo de la barra de la lista, como el encabezado de la tabla
            y el de la planilla. Ver `system/sticky.tsx`. */
-        className: `sticky z-10 flex min-w-0 items-center border-b border-line-strong bg-ground ${byDensity(d, "gap-3 px-3 py-2", "gap-2 px-2.5 py-1.5")}`, style: stickyTop, role: "presentation", children: [!withSelection ? null : _jsx("span", { className: "size-3.5 shrink-0", "aria-hidden": true }), !withIcon ? null : _jsx("span", { className: "size-(--size-icon-md) shrink-0", "aria-hidden": true }), _jsxs("div", { className: `flex min-w-0 shrink grow basis-(--container-name) flex-wrap items-center gap-y-0 ${byDensity(d, "gap-x-3", "gap-x-2")}`, children: [_jsx("span", { className: `min-w-0 grow basis-(--container-name) ${rotulo}`, children: name }), meta === undefined ? null : _jsx("span", { className: `min-w-0 ${rotulo}`, children: meta })] }), tags === undefined ? null : (_jsx("span", { className: "flex min-w-fit shrink basis-(--container-tags) items-center justify-end", children: _jsx("span", { className: rotulo, children: tags }) })), !withActions ? null : (_jsx("span", { className: "size-(--size-control-sm) shrink-0", "aria-hidden": true }))] }));
+        className: `sticky z-10 flex min-w-0 items-center border-b border-line-strong bg-ground ${byDensity(d, "gap-3 px-3 py-2", "gap-2 px-2.5 py-1.5")}`, style: stickyTop, role: "presentation", children: [!withSelection ? null : _jsx("span", { className: "size-3.5 shrink-0", "aria-hidden": true }), withAvatar ? (_jsx("span", { className: "size-5 shrink-0", "aria-hidden": true })) : !withIcon ? null : (_jsx("span", { className: "size-(--size-icon-md) shrink-0", "aria-hidden": true })), _jsxs("div", { className: `flex min-w-0 shrink grow basis-(--container-name) flex-wrap items-center gap-y-0 ${byDensity(d, "gap-x-3", "gap-x-2")}`, children: [_jsx("span", { className: `min-w-0 grow basis-(--container-name) ${rotulo}`, children: name }), meta === undefined ? null : _jsx("span", { className: `min-w-0 ${rotulo}`, children: meta })] }), tags === undefined ? null : (_jsx("span", { className: "flex min-w-fit shrink basis-(--container-tags) items-center justify-end", children: _jsx("span", { className: rotulo, children: tags }) })), trail !== undefined ? (_jsx("span", { inert: true, "aria-hidden": true, className: "invisible flex shrink-0 items-center gap-1", children: _jsx(Trail, { name: "", openAs: "", ...(trail.actions === undefined ? {} : { actions: trail.actions }), ...(trail.copy === false ? { copy: false } : {}), ...(trail.peek === true ? { onPeek: () => { } } : {}), ...(trail.open === true ? { onOpen: () => { } } : {}) }) })) : !withActions ? null : (_jsx("span", { className: "size-(--size-control-sm) shrink-0", "aria-hidden": true }))] }));
 }
 /**
  * The header of a group inside a list.

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

@@ -11,7 +11,9 @@ export { type Selection, useSelection } from "./selection.js";
 export { type SetControl, useSetControl } from "./set.js";
 export { toggleCollapsed, type TreeControl, useTreeControl, } from "./tree.js";
 export { type ViewOption, ViewSwitcher, } from "./ViewSwitcher.js";
+export { type BoardColumn, BoardColumns, type BoardStages, } from "./BoardColumns.js";
 export { type GroupingControl, useGroupingControl, } from "./grouping.js";
 export { GroupingLevels, type GroupingLevelsProps, } from "./GroupingLevels.js";
+export { PivotExplorer, type PivotExplorerProps, } from "./PivotExplorer.js";
 export { RecordCard } from "./RecordCard.js";
 export { type SortField, SortMenu, type SortMenuProps, } from "./SortMenu.js";

package/dist/components/listing/index.js

@@ -14,7 +14,9 @@ export { useSetControl } from "./set.js";
 export { toggleCollapsed, useTreeControl, } from "./tree.js";
 export { ViewSwitcher, } from "./ViewSwitcher.js";
 /* El control de los niveles. El vocabulario está en `system/grouping.ts`. */
+export { BoardColumns, } from "./BoardColumns.js";
 export { useGroupingControl, } from "./grouping.js";
 export { GroupingLevels, } from "./GroupingLevels.js";
+export { PivotExplorer, } from "./PivotExplorer.js";
 export { RecordCard } from "./RecordCard.js";
 export { SortMenu, } from "./SortMenu.js";

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

@@ -33,7 +33,7 @@ import { type Pages } from "./pages.js";
  *                    también; lo que se lee está en el cruce. Tampoco se
  *                    ordena: el orden de cada eje es el de sus claves.
  */
-export type ListPresent = "rows" | "table" | "board" | "sheet" | "report" | "pivot";
+export type ListPresent = "rows" | "table" | "board" | "sheet" | "report" | "pivot" | "calendar" | "gantt" | "timeline";
 export interface SetControl<Row, Present extends string = ListPresent> extends Pages<Row> {
     present: Present;
     setPresent: (next: Present) => void;

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

@@ -1,3 +1 @@
-export { CommandPalette, useCommandPaletteShortcut, } from "./CommandPalette.js";
-export { type PaletteCommand } from "./commands.js";
 export { NavigationTree, type NavItem, } from "./NavigationTree.js";

package/dist/components/navigation/index.js

@@ -1,4 +1,3 @@
-/* LA NAVEGACIÓN — el árbol lateral de una aplicación y la paleta de comandos. */
-export { CommandPalette, useCommandPaletteShortcut, } from "./CommandPalette.js";
-export {} from "./commands.js";
+/* LA NAVEGACIÓN — el árbol lateral de una aplicación. La paleta de comandos (⌘K) es del
+   espacio de trabajo (composer), no de acá. */
 export { NavigationTree, } from "./NavigationTree.js";

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

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+/** Who did something to the record and when, already written: «Carla Rojas», «hace 3 días». */
+export type RecordStamp = {
+    by: ReactNode;
+    at: ReactNode;
+};
+/**
+ * The last line of the paper: who created the record and who touched it last.
+ *
+ * Context: «¿quién cambió esto?» is the first question in front of a number that looks wrong,
+ * and the activity's timeline answers it only for what was logged. Small and at the end: it is
+ * consulted, not read.
+ */
+export declare function RecordAudit({ created, updated, }: {
+    created?: RecordStamp;
+    updated?: RecordStamp;
+}): import("react").JSX.Element | null;