@sincpro/web-ui 0.1.0 → 1.0.0

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,11 +18,24 @@ import type { ReactNode } from "react";
  *
  *  «some metadata that might help is not visible» — and it was literal: to know
  *  whether `FAC/2026/0118` was paid or overdue you had to open it. */
-export declare function Row({ icon: Icon, name, onOpen, onPeek, tags, meta, selected, onSelectedChange, actions, more, onMoreSelect, openHint, children, }: {
+export declare function Row({ icon: Icon, 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;
+     *  `false` removes it. */
+    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;
@@ -63,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;
@@ -71,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,11 +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 { ChevronRight, MoreHorizontal, SquareArrowOutUpRight } from "lucide-react";
+import { HEADER_TEXT } from "../../primitives/table/Table.js";
+import { CopyButton } from "../../primitives/value/Copyable.js";
+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
  * ---------------------------------------------------------------- */
@@ -26,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, }) {
+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
@@ -41,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", children: [actions, 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
@@ -86,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;

package/dist/components/record/RecordAudit.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+/**
+ * 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 function RecordAudit({ created, updated, }) {
+    const copy = useUiCopy();
+    const stamp = (template, one) => {
+        const [before, middle, after] = splitStamp(template);
+        return (_jsxs("span", { children: [before, _jsx("span", { className: "text-ink", children: one.by }), middle, _jsx("span", { className: "tabular-nums", children: one.at }), after] }));
+    };
+    if (created === undefined && updated === undefined)
+        return null;
+    return (_jsxs("p", { className: "flex flex-wrap gap-x-4 gap-y-1 border-t border-line px-4 py-2.5 text-micro text-muted", children: [created === undefined ? null : stamp(copy.record.created, created), updated === undefined ? null : stamp(copy.record.updated, updated)] }));
+}
+/** «Creado por {by} · {at}» cut around its two holes, so `by` and `at` can be nodes. */
+function splitStamp(template) {
+    const marked = fillCopy(template, { by: "\u0000", at: "\u0001" });
+    const [before = "", rest = ""] = marked.split("\u0000");
+    const [middle = "", after = ""] = rest.split("\u0001");
+    return [before, middle, after];
+}

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

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