@sincpro/web-ui 0.2.0 → 1.1.0

package/dist/views/list/List.d.ts

@@ -1,10 +1,11 @@
+import type { BoardStages } from "../../components/listing/BoardColumns.js";
 import type { ListIdentity } from "../../components/listing/ListingBar.js";
 import type { SortField } from "../../components/listing/SortMenu.js";
 import type { Surface } from "../../foundations/types.js";
 import type { DataColumn, DataTableCreate } from "../../primitives/table/DataTable.js";
 import type { RowAction } from "../../primitives/table/RowActions.js";
 import type { SortState } from "../../primitives/table/Table.js";
-import { type ListCrumb, type ListEmpty, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSheet, type RowOf } from "./types.js";
+import { type ListCalendar, type ListCrumb, type ListEmpty, type ListGantt, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSheet, type ListTimeline, type RowOf } from "./types.js";
 import type { ReactNode } from "react";
 type BarProps = {
     children?: ReactNode;
@@ -50,6 +51,8 @@ type TableProps<T extends object> = {
  *  se puede ver como tablero. */
 type BoardProps<T> = {
     card?: (item: T) => ReactNode;
+    /** One column per stage, with drag (and Alt + ← / →) to move a card between them. */
+    stages?: BoardStages<T>;
 };
 /** La planilla. Sin columnas propias, sale de las que declaró `List.Table` — la
  *  de datos CRUDOS sí las trae, porque ahí salen del archivo y el código no sabe
@@ -75,6 +78,11 @@ export type ListProps<T extends object> = {
         count: number;
         clear: () => void;
         actions?: ReactNode;
+        /** Every record that matches, not just the page — see `ListViewProps`. */
+        matching?: {
+            total: number;
+            onSelect: () => void;
+        };
     };
     /** El orden, que también es del conjunto. */
     sort?: SortState | null;
@@ -88,6 +96,18 @@ export type ListProps<T extends object> = {
     onOpen?: (item: T) => void;
     onPeek?: (item: T) => void;
     isPeeked?: (item: T) => boolean;
+    /** What a press on the row's body does when both ways in exist. `peek` (the default) looks
+     *  without leaving the list; `open` goes to the record — a workspace whose rule is «a row
+     *  opens the page» (the composer's) says `open`, and 👁 stays for the look. */
+    rowClick?: "peek" | "open";
+    /** The list CHOOSES instead of opening — a «Buscar más…», a chooser a workspace asked for:
+     *  a press on a row (its body, its name, a card) calls this, and the row offers no 👁 / ↗.
+     *  For several at once, give `selection` too and toggle it here. */
+    onChoose?: (item: T) => void;
+    /** Nothing in it can be acted on: no opening, peeking, selecting, creating nor row
+     *  actions — a list to read, like the lines of a record in view mode. One switch, so whoever
+     *  passes the handlers generically does not have to strip them one by one. */
+    readOnly?: boolean;
     /** Los tres estados, en un solo lugar. */
     state?: {
         loading?: boolean;
@@ -99,7 +119,7 @@ export type ListProps<T extends object> = {
     empty?: ListEmpty;
     children?: ReactNode;
 };
-export declare function List<T extends object>({ items, keyOf, embedded, surface, group, selection, sort, onSortChange, sortable, present, onPresentChange, onOpen, onPeek, isPeeked, state, filtered, empty, children, }: ListProps<T>): import("react").JSX.Element;
+export declare function List<T extends object>({ items, keyOf, embedded, surface, group, selection: selectWith, sort, onSortChange, sortable, present, onPresentChange, onOpen: openWith, onPeek: peekWith, isPeeked, readOnly, rowClick, onChoose, state, filtered, empty, children, }: ListProps<T>): import("react").JSX.Element;
 export declare namespace List {
     var Bar: ((props: BarProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"bar">;
     var Crumbs: ((props: CrumbsProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"crumbs">;
@@ -115,5 +135,8 @@ export declare namespace List {
     var Sheet: <T>(props: SheetProps<T>) => ReactNode;
     var Report: ((props: ListReport) => ReactNode) & import("../../foundations/slots.js").Slotted<"report">;
     var Pivot: <T>(props: ListPivot<T>) => ReactNode;
+    var Calendar: <T>(props: ListCalendar<T>) => ReactNode;
+    var Gantt: <T>(props: ListGantt<T>) => ReactNode;
+    var Timeline: <T>(props: ListTimeline<T>) => ReactNode;
 }
 export {};

package/dist/views/list/List.js

@@ -40,10 +40,32 @@ const PRESENT_OF = {
     sheet: "sheet",
     report: "report",
     pivot: "pivot",
+    calendar: "calendar",
+    gantt: "gantt",
+    timeline: "timeline",
 };
-const FACES = ["rows", "table", "board", "sheet", "report", "pivot"];
-export function List({ items, keyOf, embedded, surface, group, selection, sort, onSortChange, sortable, present, onPresentChange, onOpen, onPeek, isPeeked, state, filtered, empty, children, }) {
+const FACES = [
+    "rows",
+    "table",
+    "board",
+    "sheet",
+    "report",
+    "pivot",
+    "calendar",
+    "gantt",
+    "timeline",
+];
+/** Records grouped in rows across time, N per row — a planning (`RecordTimeline`). */
+const TimelineSlot = slot("timeline", (_props) => null);
+/** When each record happens, on a month, a week, a day or an agenda (`RecordCalendar`). */
+const CalendarSlot = slot("calendar", (_props) => null);
+/** Each record as a span on a timeline, with its dependencies (`RecordGantt`). */
+const GanttSlot = slot("gantt", (_props) => null);
+export function List({ items, keyOf, embedded, surface, group, selection: selectWith, sort, onSortChange, sortable, present, onPresentChange, onOpen: openWith, onPeek: peekWith, isPeeked, readOnly = false, rowClick, onChoose, state, filtered, empty, children, }) {
     const top = flatten(children);
+    const onOpen = readOnly ? undefined : openWith;
+    const onPeek = readOnly ? undefined : peekWith;
+    const selection = readOnly ? undefined : selectWith;
     const bar = flatten(propsOf(pick(top, "bar"))?.children);
     const crumbs = propsOf(pick(bar, "crumbs"))?.crumbs;
     const identity = propsOf(pick(bar, "identity"));
@@ -58,6 +80,9 @@ export function List({ items, keyOf, embedded, surface, group, selection, sort,
     const sheet = propsOf(pick(top, "sheet"));
     const report = propsOf(pick(top, "report"));
     const pivot = propsOf(pick(top, "pivot"));
+    const calendar = propsOf(pick(top, "calendar"));
+    const gantt = propsOf(pick(top, "gantt"));
+    const timeline = propsOf(pick(top, "timeline"));
     /* Las caras que hay son las que están escritas, EN ESE ORDEN. El conmutador
        no puede ofrecer una que no se pueda dibujar, porque la que se dibuja y la
        que se ofrece son el mismo nodo. */
@@ -68,22 +93,34 @@ export function List({ items, keyOf, embedded, surface, group, selection, sort,
     /* La escotilla: lo que el arquetipo no previó se dibuja igual, debajo. Que
        aparezca algo acá es la señal de que al arquetipo le falta una pieza. */
     const rest = loose(top, ["bar", "metrics", ...FACES]);
-    return (_jsx(ListView, { items: items, keyOf: keyOf, row: rows?.row ?? (() => ({ name: "" })), ...(rows?.header === undefined ? {} : { rowHeader: rows.header }), ...(identity === undefined ? {} : { identity }), ...(crumbs === undefined ? {} : { crumbs }), ...(embedded === undefined ? {} : { embedded }), ...(surface === undefined ? {} : { surface }), ...(search === undefined ? {} : { search }), ...(actions === undefined ? {} : { actions }), ...(pagination === undefined ? {} : { pagination }), ...(views === undefined ? {} : { views }), ...(metrics === undefined ? {} : { metrics }), ...(table === undefined
+    return (_jsx(ListView, { items: items, keyOf: keyOf, row: rows === undefined
+            ? () => ({ name: "" })
+            : readOnly
+                ? (item) => {
+                    const { actions: _actions, ...rest } = rows.row(item);
+                    return rest;
+                }
+                : rows.row, ...(rows?.header === undefined ? {} : { rowHeader: rows.header }), ...(identity === undefined ? {} : { identity }), ...(crumbs === undefined ? {} : { crumbs }), ...(embedded === undefined ? {} : { embedded }), ...(surface === undefined ? {} : { surface }), ...(search === undefined ? {} : { search }), ...(actions === undefined ? {} : { actions }), ...(pagination === undefined ? {} : { pagination }), ...(views === undefined ? {} : { views }), ...(metrics === undefined ? {} : { metrics }), ...(table === undefined
             ? {}
             : {
-                columns: table.columns,
+                /* Read-only: a cell that opens an editor is an action too. */
+                columns: readOnly
+                    ? table.columns.map(({ edit: _edit, ...c }) => c)
+                    : table.columns,
                 ...(table.totals === undefined ? {} : { totals: table.totals }),
-                ...(table.rowActions === undefined ? {} : { rowActions: table.rowActions }),
-                ...(table.create === undefined ? {} : { create: table.create }),
+                ...(table.rowActions === undefined || readOnly
+                    ? {}
+                    : { rowActions: table.rowActions }),
+                ...(table.create === undefined || readOnly ? {} : { create: table.create }),
                 ...(table.visibleColumnIds === undefined
                     ? {}
                     : { visibleColumnIds: table.visibleColumnIds }),
                 ...(table.onVisibleColumnIdsChange === undefined
                     ? {}
                     : { onVisibleColumnIdsChange: table.onVisibleColumnIdsChange }),
-            }), ...(board?.card === undefined ? {} : { card: board.card }), ...(sheet?.columns === undefined || sheet.cell === undefined
+            }), ...(board?.card === undefined ? {} : { card: board.card }), ...(board?.stages === undefined ? {} : { boardStages: board.stages }), ...(sheet?.columns === undefined || sheet.cell === undefined
             ? {}
-            : { sheet: sheet }), ...(report === undefined ? {} : { report }), ...(pivot === undefined ? {} : { pivot }), ...(presents.length === 0 ? {} : { presents }), ...(present === undefined ? {} : { present }), ...(onPresentChange === undefined ? {} : { onPresentChange }), ...(group === undefined ? {} : { group }), ...(selection === undefined ? {} : { selection }), ...(sort === undefined ? {} : { sort }), ...(onSortChange === undefined ? {} : { onSortChange }), ...(sortable === undefined ? {} : { sortable }), ...(onOpen === undefined ? {} : { onOpen }), ...(onPeek === undefined ? {} : { onPeek }), ...(isPeeked === undefined ? {} : { isPeeked }), ...(state === undefined ? {} : { state }), ...(filtered === undefined ? {} : { filtered }), ...(empty === undefined ? {} : { empty }), children: rest.length === 0 ? undefined : rest }));
+            : { sheet: sheet }), ...(report === undefined ? {} : { report }), ...(pivot === undefined ? {} : { pivot }), ...(calendar === undefined ? {} : { calendar }), ...(gantt === undefined ? {} : { gantt }), ...(timeline === undefined ? {} : { timeline }), ...(presents.length === 0 ? {} : { presents }), ...(present === undefined ? {} : { present }), ...(onPresentChange === undefined ? {} : { onPresentChange }), ...(group === undefined ? {} : { group }), ...(selection === undefined ? {} : { selection }), ...(sort === undefined ? {} : { sort }), ...(onSortChange === undefined ? {} : { onSortChange }), ...(sortable === undefined ? {} : { sortable }), ...(onOpen === undefined ? {} : { onOpen }), ...(onPeek === undefined ? {} : { onPeek }), ...(isPeeked === undefined ? {} : { isPeeked }), ...(rowClick === undefined ? {} : { rowClick }), ...(onChoose === undefined || readOnly ? {} : { onChoose }), ...(state === undefined ? {} : { state }), ...(filtered === undefined ? {} : { filtered }), ...(empty === undefined ? {} : { empty }), children: rest.length === 0 ? undefined : rest }));
 }
 List.Bar = Bar;
 List.Crumbs = Crumbs;
@@ -99,3 +136,6 @@ List.Board = Board;
 List.Sheet = SheetSlot;
 List.Report = Report;
 List.Pivot = Pivot;
+List.Calendar = CalendarSlot;
+List.Gantt = GanttSlot;
+List.Timeline = TimelineSlot;

package/dist/views/list/ListView.d.ts

@@ -1,5 +1,5 @@
 import type { ListViewProps } from "./types.js";
-export declare function ListView<T extends object>({ items, keyOf, identity, crumbs, embedded, surface: requestedSurface, metrics, search, pagination, views, actions, row, rowHeader, columns, visibleColumnIds, onVisibleColumnIdsChange, card, sheet, report, pivot, present: requested, presents, onPresentChange, sort, onSortChange, sortable, totals, rowActions, create, group, selection, onOpen, onPeek, state, filtered, empty, children, }: ListViewProps<T>): import("react").JSX.Element;
+export declare function ListView<T extends object>({ items, keyOf, identity, crumbs, embedded, surface: requestedSurface, metrics, search, pagination, views, actions, row, rowHeader, columns, visibleColumnIds, onVisibleColumnIdsChange, card, boardStages, calendar, gantt, timeline, sheet, report, pivot, present: requested, presents, onPresentChange, sort, onSortChange, sortable, totals, rowActions, create, group, selection, onOpen, onPeek, rowClick, onChoose, state, filtered, empty, children, }: ListViewProps<T>): import("react").JSX.Element;
 /** What a list offers when it fails and can be retried. */
 export declare function RetryAction({ onRetry }: {
     onRetry: () => void;

package/dist/views/list/ListView.js

@@ -1,14 +1,19 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { RecordCalendar } from "../../components/calendar/RecordCalendar.js";
+import { RecordGantt } from "../../components/gantt/RecordGantt.js";
+import { BoardColumns } from "../../components/listing/BoardColumns.js";
 import { useColumnControl, visibleColumns } from "../../components/listing/columns.js";
 import { ColumnsMenu, specsFromColumns, } from "../../components/listing/ColumnsMenu.js";
 import { Listing } from "../../components/listing/Listing.js";
 import { ListingBar } from "../../components/listing/ListingBar.js";
+import { PivotExplorer } from "../../components/listing/PivotExplorer.js";
 import { RecordCard } from "../../components/listing/RecordCard.js";
 import { GroupHeader, Row, RowHeader } from "../../components/listing/Row.js";
 import { sortItems, SortMenu, } from "../../components/listing/SortMenu.js";
 import { ViewSwitcher } from "../../components/listing/ViewSwitcher.js";
 import { Breadcrumb } from "../../components/record/Breadcrumb.js";
+import { RecordTimeline } from "../../components/timeline/RecordTimeline.js";
 import { useUiCopy } from "../../foundations/copy.js";
 import { useDensity } from "../../foundations/density.js";
 import { pathKey, pileIsOpen, pilesOf, } from "../../foundations/grouping.js";
@@ -21,7 +26,7 @@ import { groupedColumnIds } from "./columns.js";
 import { groupLevelsOf, reportColumnsOf, reportRowsOf, sheetFromColumns, sheetRowsOf, } from "./derive.js";
 import { SheetPresentation, TablePresentation, } from "./presentations.js";
 import { useNarrowList } from "./useNarrowList.js";
-import { Grid3x3, LayoutGrid, List, Sheet, Sigma, Table2 } from "lucide-react";
+import { CalendarDays, CalendarRange, ChartGantt, Grid3x3, LayoutGrid, List, Sheet, Sigma, Table2, } from "lucide-react";
 import { Fragment, useCallback, useMemo } from "react";
 /**
  * EL DIBUJO de una lista. **La puerta es `List`**, que se escribe como árbol y
@@ -57,8 +62,11 @@ const PRESENT_ICONS = [
     { id: "report", icon: Sigma },
     /* La cuadrícula: dos ejes, y lo que importa está adentro. */
     { id: "pivot", icon: Grid3x3 },
+    { id: "calendar", icon: CalendarDays },
+    { id: "gantt", icon: ChartGantt },
+    { id: "timeline", icon: CalendarRange },
 ];
-export function ListView({ items, keyOf, identity, crumbs, embedded = false, surface: requestedSurface, metrics, search, pagination, views, actions, row, rowHeader, columns, visibleColumnIds, onVisibleColumnIdsChange, card, sheet, report, pivot, present: requested = "rows", presents, onPresentChange, sort, onSortChange, sortable, totals = false, rowActions, create, group, selection, onOpen, onPeek, state, filtered = false, empty, children, }) {
+export function ListView({ items, keyOf, identity, crumbs, embedded = false, surface: requestedSurface, metrics, search, pagination, views, actions, row, rowHeader, columns, visibleColumnIds, onVisibleColumnIdsChange, card, boardStages, calendar, gantt, timeline, sheet, report, pivot, present: requested = "rows", presents, onPresentChange, sort, onSortChange, sortable, totals = false, rowActions, create, group, selection, onOpen, onPeek, rowClick = "peek", onChoose, state, filtered = false, empty, children, }) {
     const { frame, offered, present } = useNarrowList(presents, requested);
     /* Embedded, the list sits on the record's paper: there is no dark band to inherit, and a
        navy switcher inside a white sheet would be a second chrome on the screen. */
@@ -134,6 +142,7 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
     /* Embedded, the line is drawn only if it has something to OFFER: a count alone repeats
        what the rows (and the footer) already say. */
     const barHasControls = !embedded ||
+        identity?.title !== undefined ||
         search !== undefined ||
         viewsSlot !== undefined ||
         actions !== undefined ||
@@ -150,12 +159,26 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
                     count: selection.count,
                     onClear: selection.clear,
                     ...(selection.actions === undefined ? {} : { actions: selection.actions }),
+                    ...(selection.matching === undefined ? {} : { matching: selection.matching }),
                 },
             }), ...(search === undefined ? {} : { search }), ...(pagination === undefined ? {} : { pagination }), ...(viewsSlot === undefined ? {} : { views: viewsSlot }) }));
+    /* The body of a row, a card: the look first unless the list says the page. */
+    /* Choosing, the press chooses and the ways in (👁 ↗) are not offered: a chooser's row answers. */
+    const choosing = onChoose !== undefined;
+    const press = choosing
+        ? onChoose
+        : rowClick === "open"
+            ? (onOpen ?? onPeek)
+            : (onPeek ?? onOpen);
     const renderRow = (item) => {
         const d = row(item);
         const id = keyOf(item);
-        return (_jsx(Row, { ...(d.icon === undefined ? {} : { icon: d.icon }), name: d.name, ...(d.tags === undefined ? {} : { tags: d.tags }), ...(d.meta === undefined ? {} : { meta: d.meta }), ...(d.actions === undefined ? {} : { actions: d.actions }), ...(onOpen === undefined ? {} : { onOpen: () => onOpen(item) }), ...(onPeek === undefined ? {} : { onPeek: () => onPeek(item) }), ...(selection === undefined
+        return (_jsx(Row, { ...(d.icon === undefined ? {} : { icon: d.icon }), ...(d.avatar === undefined ? {} : { avatar: d.avatar }), name: d.name, ...(d.tags === undefined ? {} : { tags: d.tags }), ...(d.meta === undefined ? {} : { meta: d.meta }), ...(d.actions === undefined ? {} : { actions: d.actions }), ...(choosing
+                ? { onOpen: () => onChoose(item), openers: false }
+                : {
+                    ...(onOpen === undefined ? {} : { onOpen: () => onOpen(item) }),
+                    ...(onPeek === undefined ? {} : { onPeek: () => onPeek(item) }),
+                }), click: rowClick, ...(selection === undefined
                 ? {}
                 : { selected: selection.has(id), onSelectedChange: () => selection.toggle(id) }), children: d.children }, id));
     };
@@ -215,7 +238,7 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
         return list.map((pile) => {
             const key = pathKey(pile.path);
             const open = isOpen(pile);
-            return (_jsxs(Fragment, { children: [_jsx(GroupHeader, { field: pile.field, label: pile.label, count: pile.count, depth: pile.depth, open: open, ...(group?.onToggle === undefined
+            return (_jsxs(Fragment, { children: [_jsx(GroupHeader, { field: pile.field, label: pile.label, count: pile.count, ...(pile.detail === undefined ? {} : { detail: pile.detail }), depth: pile.depth, open: open, ...(group?.onToggle === undefined
                             ? {}
                             : { onToggle: () => group.onToggle?.(key) }) }), !open
                         ? null
@@ -235,11 +258,11 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
             return _jsx(Fragment, { children: card(item) }, keyOf(item));
         }
         const d = row(item);
-        return (_jsx(RecordCard, { title: d.name, ...(d.tags === undefined ? {} : { tags: d.tags }), ...(d.meta === undefined ? {} : { meta: d.meta }), ...(onOpen === undefined ? {} : { onOpen: () => onOpen(item) }) }, keyOf(item)));
+        return (_jsx(RecordCard, { title: d.name, ...(d.tags === undefined ? {} : { tags: d.tags }), ...(d.meta === undefined ? {} : { meta: d.meta }), ...(press === undefined ? {} : { onOpen: () => press(item) }) }, keyOf(item)));
     };
     const body = present === "table" && shownColumns !== undefined ? (
     /* The table receives EVERYTHING that belongs to the set: see `TablePresentation`. */
-    _jsx(TablePresentation, { items: items, columns: shownColumns, keyOf: keyOf, levels: groupLevels, ...(sort === undefined ? {} : { sort }), ...(onSortChange === undefined ? {} : { onSortChange }), ...(group === undefined ? {} : { group }), ...(selection === undefined ? {} : { selection }), totals: totals, ...(rowActions === undefined ? {} : { rowActions }), ...(create === undefined ? {} : { create }), ...(onPeek === undefined ? {} : { onPeek }), ...(onOpen === undefined ? {} : { onOpen }) })) : present === "sheet" && sheetSpec !== undefined ? (
+    _jsx(TablePresentation, { items: items, columns: shownColumns, keyOf: keyOf, levels: groupLevels, ...(sort === undefined ? {} : { sort }), ...(onSortChange === undefined ? {} : { onSortChange }), ...(group === undefined ? {} : { group }), ...(selection === undefined ? {} : { selection }), totals: totals, ...(rowActions === undefined ? {} : { rowActions }), ...(create === undefined ? {} : { create }), ...(onPeek === undefined || choosing ? {} : { onPeek }), ...(onOpen === undefined || choosing ? {} : { onOpen }), ...(choosing ? { onChoose } : {}), rowClick: rowClick })) : present === "sheet" && sheetSpec !== undefined ? (
     /* La planilla recibe el conjunto por ÍNDICE y no una matriz ya armada: ver `SheetPresentation`. */
     _jsx(SheetPresentation, { spec: sheetSpec, entries: sheetRows, ordered: ordered, ...(group === undefined ? {} : { group }) })) : present === "report" && report !== undefined ? (
     /* El informe declarado por el dominio no se ORDENA desde la barra: el
@@ -255,20 +278,28 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
            are written. Declared by the domain, the columns are the domain's. */
         columns: report.rows === undefined
             ? reportColumnsOf(report.columns, columns)
-            : report.columns, rows: report.rows ?? reportRows, ...(report.defaultOpen === undefined ? {} : { defaultOpen: report.defaultOpen }), ...(report.height === undefined ? {} : { height: report.height }) })) : present === "pivot" && pivotShown !== undefined ? (
+            : report.columns, rows: report.rows ?? reportRows, ...(report.defaultOpen === undefined ? {} : { defaultOpen: report.defaultOpen }), ...(report.height === undefined ? {} : { height: report.height }) })) : present === "pivot" && pivot?.spec !== undefined && pivot.fields !== undefined ? (
+    /* Explored: the person moves the axes. Its rows follow the search bar's grouping. */
+    _jsx("div", { className: "p-3", children: _jsx(PivotExplorer, { items: ordered, of: pivot.spec.of, fields: pivot.fields, measures: pivot.spec.measures, ...(pivot.defaultMeasures === undefined
+                ? {}
+                : { defaultMeasures: pivot.defaultMeasures }), ...((group?.levels.length ?? 0) > 0 ? { rows: group.levels } : {}), defaultRows: pivot.spec.rows, defaultColumns: pivot.spec.columns, ...(pivot.onCell === undefined ? {} : { onCell: pivot.onCell }), ...(pivot.height === undefined ? {} : { height: pivot.height }) }) })) : present === "pivot" && pivotShown !== undefined ? (
     /* El pivote recibe la grilla y nada más: no hay selección que pasarle
        —una casilla por montón elegiría cosas que no son registros—, no hay
        orden —cada eje viene en el orden de sus claves— y no hay menú de
        columnas, porque las columnas son un eje y no una lista de campos que
        se puedan esconder de a uno. */
-    _jsx(PivotTable, { pivot: pivotShown, ...(pivot?.onCell === undefined ? {} : { onCell: pivot.onCell }), ...(pivot?.height === undefined ? {} : { height: pivot.height }) })) : present === "board" ? (_jsx("div", { className: "flex flex-col", children: wrapGroups((inside) => (_jsx("div", { className: "grid gap-3 p-3 @2xl:grid-cols-2 @5xl:grid-cols-3", children: inside.map(renderCard) }))) })) : (
+    _jsx(PivotTable, { pivot: pivotShown, ...(pivot?.onCell === undefined ? {} : { onCell: pivot.onCell }), ...(pivot?.height === undefined ? {} : { height: pivot.height }) })) : present === "calendar" && calendar !== undefined ? (_jsx("div", { className: "p-3", children: _jsx(RecordCalendar, { ...calendar, items: ordered, keyOf: keyOf, ...(press === undefined ? {} : { onOpen: press }) }) })) : present === "gantt" && gantt !== undefined ? (_jsx("div", { className: "p-3", children: _jsx(RecordGantt, { ...gantt, items: ordered, keyOf: keyOf, ...(press === undefined ? {} : { onOpen: press }) }) })) : present === "timeline" && timeline !== undefined ? (_jsx("div", { className: "p-3", children: _jsx(RecordTimeline, { ...timeline, items: ordered, keyOf: keyOf, ...(press === undefined ? {} : { onOpen: press }) }) })) : present === "board" && boardStages !== undefined ? (_jsx(BoardColumns, { items: ordered, keyOf: keyOf, stages: boardStages, card: renderCard })) : present === "board" ? (_jsx("div", { className: "flex flex-col", children: wrapGroups((inside) => (_jsx("div", { className: "grid gap-3 p-3 @2xl:grid-cols-2 @5xl:grid-cols-3", children: inside.map(renderCard) }))) })) : (
     /* El encabezado va ANTES de los montones y no adentro de cada uno:
        rotula la fila, y la fila es la misma en los cinco montones. */
     _jsxs(_Fragment, { children: [rowHeader === undefined || items.length === 0 ? null : (_jsx(RowHeader, { name: rowHeader.name, ...(rowHeader.meta === undefined ? {} : { meta: rowHeader.meta }), ...(rowHeader.tags === undefined ? {} : { tags: rowHeader.tags }), withSelection: selection !== undefined, 
                 /* Los espaciadores se preguntan por la PRIMERA fila: el ícono y las
                    acciones son de la lista entera, no de una fila — si la primera no
                    tiene ícono, ninguna lo tiene. */
-                withIcon: firstRow?.icon !== undefined, withActions: onOpen !== undefined || firstRow?.actions !== undefined })), wrapGroups((inside) => inside.map(renderRow))] }));
+                withIcon: firstRow?.icon !== undefined, withAvatar: firstRow?.avatar !== undefined, trail: {
+                    ...(firstRow?.actions === undefined ? {} : { actions: firstRow.actions }),
+                    peek: onPeek !== undefined && !choosing,
+                    open: onOpen !== undefined && !choosing,
+                } })), wrapGroups((inside) => inside.map(renderRow))] }));
     return (
     /* The list is its own container (`@container`: the presentations adapt to the width
        the LIST has, not the window) and fills the space it is given. Before, every page

package/dist/views/list/columns.js

@@ -16,7 +16,14 @@ export function groupedColumnIds(group, columns) {
         .filter((id) => id !== undefined);
 }
 /** The presentations that need width: a grid of columns. */
-export const WIDE_PRESENTS = ["table", "sheet", "report", "pivot"];
+export const WIDE_PRESENTS = [
+    "table",
+    "sheet",
+    "report",
+    "pivot",
+    "gantt",
+    "timeline",
+];
 /** The id of the column that answers for a model field, when there is one. */
 function columnAnswering(field, columns) {
     if (columns === undefined)

package/dist/views/list/presentations.d.ts

@@ -15,11 +15,14 @@ type TableProps<T extends object> = {
     levels: NonNullable<Parameters<typeof DataTable<T>>[0]["levels"]>;
     group?: ListGroup<T>;
     totals: boolean;
-} & Pick<ListViewProps<T>, "sort" | "onSortChange" | "selection" | "rowActions" | "create" | "onPeek" | "onOpen">;
+} & Pick<ListViewProps<T>, "sort" | "onSortChange" | "selection" | "rowActions" | "create" | "onPeek" | "onOpen"> & {
+    rowClick?: "peek" | "open";
+    onChoose?: (item: T) => void;
+};
 /** The table receives EVERYTHING that belongs to the set —sorting, selection, grouping,
  *  which columns are on screen— and not a trimmed down version: that was exactly the trap
  *  this archetype exists to avoid, that switching presentation loses capabilities. */
-export declare function TablePresentation<T extends object>({ items, columns, keyOf, levels, group, totals, sort, onSortChange, selection, rowActions, create, onPeek, onOpen, }: TableProps<T>): import("react").JSX.Element;
+export declare function TablePresentation<T extends object>({ items, columns, keyOf, levels, group, totals, sort, onSortChange, selection, rowActions, create, onPeek, onOpen, rowClick, onChoose, }: TableProps<T>): import("react").JSX.Element;
 type SheetProps<T extends object> = {
     spec: ListSheet<T>;
     /** The flattened bands and rows when the set is grouped; `null` when it is not. */

package/dist/views/list/presentations.js

@@ -3,10 +3,40 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useUiCopy } from "../../foundations/copy.js";
 import { DataTable } from "../../primitives/table/DataTable.js";
 import { SheetTable } from "../../primitives/table/SheetTable.js";
+import { Eye, SquareArrowOutUpRight } from "lucide-react";
 /** The table receives EVERYTHING that belongs to the set —sorting, selection, grouping,
  *  which columns are on screen— and not a trimmed down version: that was exactly the trap
  *  this archetype exists to avoid, that switching presentation loses capabilities. */
-export function TablePresentation({ items, columns, keyOf, levels, group, totals, sort, onSortChange, selection, rowActions, create, onPeek, onOpen, }) {
+export function TablePresentation({ items, columns, keyOf, levels, group, totals, sort, onSortChange, selection, rowActions, create, onPeek, onOpen, rowClick = "peek", onChoose, }) {
+    const copy = useUiCopy();
+    const press = onChoose ?? (rowClick === "open" ? (onOpen ?? onPeek) : (onPeek ?? onOpen));
+    /* The row's ways in go FIRST among its actions, so they are always the inline ones and
+       always in the same place; the domain's actions follow (and fold into ⋯ past two). */
+    const withOpeners = onPeek === undefined && onOpen === undefined
+        ? rowActions
+        : (item) => [
+            ...(onPeek === undefined
+                ? []
+                : [
+                    {
+                        id: "peek",
+                        label: copy.list.peek,
+                        icon: Eye,
+                        onSelect: () => onPeek(item),
+                    },
+                ]),
+            ...(onOpen === undefined
+                ? []
+                : [
+                    {
+                        id: "open",
+                        label: copy.list.open,
+                        icon: SquareArrowOutUpRight,
+                        onSelect: () => onOpen(item),
+                    },
+                ]),
+            ...(rowActions?.(item) ?? []),
+        ];
     return (_jsx(DataTable, { data: items, columns: columns, getRowId: keyOf, ...(sort === undefined ? {} : { sort }), ...(onSortChange === undefined ? {} : { onSortChange }), ...(levels.length === 0 ? {} : { levels: levels }), ...(group?.collapsed === undefined ? {} : { collapsed: group.collapsed }), ...(group?.onToggle === undefined ? {} : { onGroupToggle: group.onToggle }), ...(selection === undefined
             ? {}
             : {
@@ -22,7 +52,7 @@ export function TablePresentation({ items, columns, keyOf, levels, group, totals
                             selection.toggle(id);
                     }
                 },
-            }), ...(totals ? { totals: true } : {}), ...(rowActions === undefined ? {} : { rowActions }), ...(create === undefined ? {} : { create }), ...((onPeek ?? onOpen) === undefined ? {} : { onRowClick: onPeek ?? onOpen }) }));
+            }), ...(totals ? { totals: true } : {}), ...(withOpeners === undefined ? {} : { rowActions: withOpeners }), ...(create === undefined ? {} : { create }), ...(press === undefined ? {} : { onRowClick: press }) }));
 }
 /** The sheet receives the set by INDEX and not a ready-made matrix: `SheetTable` is
  *  virtualized precisely so as not to materialize a million rows, and handing it copies

package/dist/views/list/types.d.ts

@@ -1,6 +1,11 @@
+import type { RecordCalendarProps } from "../../components/calendar/RecordCalendar.js";
+import type { RecordGanttProps } from "../../components/gantt/RecordGantt.js";
+import type { BoardStages } from "../../components/listing/BoardColumns.js";
 import type { ListIdentity } from "../../components/listing/ListingBar.js";
 import type { ListPresent } from "../../components/listing/set.js";
 import type { SortField } from "../../components/listing/SortMenu.js";
+import type { RecordTimelineProps } from "../../components/timeline/RecordTimeline.js";
+import type { GroupableField } from "../../foundations/grouping.js";
 import type { Grouping, GroupLevel } from "../../foundations/grouping.js";
 import type { Pivot, PivotKey, PivotSpec } from "../../foundations/pivot.js";
 import type { Surface, Tone } from "../../foundations/types.js";
@@ -23,6 +28,11 @@ export type { ListPresent };
 /** What an item looks like when the presentation is rows. */
 export type RowOf = {
     icon?: LucideIcon;
+    /** A person or a company: its face in the icon's place — the photo or the initials. */
+    avatar?: {
+        name: string;
+        src?: string;
+    };
     name: string;
     tags?: ReactNode;
     meta?: string;
@@ -153,6 +163,12 @@ export type ListPivot<T> = {
     /** Qué pasa al tocar un cruce: abrir las filas que cayeron ahí. */
     onCell?: (row: PivotKey, column: PivotKey) => void;
     height?: number | string;
+    /** The fields the person may pivot by. With them (and `spec`) the pivot is EXPLORED — axes,
+     *  measures and download on the grid (`PivotExplorer`) — and its rows follow the search
+     *  bar's grouping while there is one; `spec.rows` / `spec.columns` are where it starts. */
+    fields?: readonly GroupableField[];
+    /** Which of `spec.measures` start on. The first one by default. */
+    defaultMeasures?: readonly string[];
 };
 export type ListViewProps<T extends object> = {
     items: readonly T[];
@@ -226,6 +242,14 @@ export type ListViewProps<T extends object> = {
     create?: DataTableCreate<T>;
     /** The board presentation. */
     card?: (item: T) => ReactNode;
+    /** The board by stages: one column each, cards moved between them. */
+    boardStages?: BoardStages<T>;
+    /** The calendar presentation: when each record happens. */
+    calendar?: ListCalendar<T>;
+    /** The Gantt presentation: each record as a span on a timeline. */
+    gantt?: ListGantt<T>;
+    /** The planning presentation: records grouped in rows across time (Odoo's Gantt). */
+    timeline?: ListTimeline<T>;
     /**
      * La PLANILLA. Con esto, `present="sheet"` dibuja un `SheetTable`.
      *
@@ -266,10 +290,24 @@ export type ListViewProps<T extends object> = {
         count: number;
         clear: () => void;
         actions?: ReactNode;
+        /** Every record that matches, not just the page: «Elegir los 187 que coinciden». The total
+         *  is the server's; `onSelect` makes the selection mean «all of them». */
+        matching?: {
+            total: number;
+            onSelect: () => void;
+        };
     };
     onOpen?: (item: T) => void;
     onPeek?: (item: T) => void;
     isPeeked?: (item: T) => boolean;
+    /** What a press on the row's body does when both ways in exist. `peek` (the default) looks
+     *  without leaving the list; `open` goes to the record — a workspace whose rule is «a row
+     *  opens the page» (the composer's) says `open`, and 👁 stays for the look. */
+    rowClick?: "peek" | "open";
+    /** The list CHOOSES instead of opening — a «Buscar más…», a chooser a workspace asked for:
+     *  a press on a row (its body, its name, a card) calls this, and the row offers no 👁 / ↗.
+     *  For several at once, give `selection` too and toggle it here. */
+    onChoose?: (item: T) => void;
     /** The three states, in a single place. Every view used to re-assemble them
      *  with three nested ternaries, and that is why «empty because of a filter»
      *  and «really empty» got mixed up in half the screens. */
@@ -282,3 +320,9 @@ export type ListViewProps<T extends object> = {
     /** The escape hatch. */
     children?: ReactNode;
 };
+/** `List.Calendar`: the calendar's own props; the records, their key and «open» are the list's. */
+export type ListCalendar<T> = Omit<RecordCalendarProps<T>, "items" | "keyOf" | "onOpen">;
+/** `List.Gantt`: the chart's own props; the records, their key and «open» are the list's. */
+export type ListGantt<T> = Omit<RecordGanttProps<T>, "items" | "keyOf" | "onOpen">;
+/** `List.Timeline`: the planning's own props; the records, their key and «open» are the list's. */
+export type ListTimeline<T> = Omit<RecordTimelineProps<T>, "items" | "keyOf" | "onOpen">;

package/dist/views/list/useNarrowList.d.ts

@@ -9,9 +9,19 @@ import { type RefObject } from "react";
  *
  * Attach `frame` to the list's root element; `offered` is what the switcher may show and
  * `present` what to draw (a wide one that was asked for falls back to rows).
+ *
+ * Measured BEFORE paint: waiting for the observer's first report drew the table and swapped it
+ * for rows a frame later, so a click on a row of a list in a panel landed on a detached `<tr>`.
  */
 export declare function useNarrowList(presents: readonly ListPresent[] | undefined, requested: ListPresent): {
     frame: RefObject<HTMLDivElement | null>;
     offered: readonly ListPresent[];
     present: ListPresent;
 };
+/** What a list offers and draws at its width. Only a list that HAS rows folds into them: one
+ *  that declares just a table fell back to rows it had no `row` for, and drew empty lines — a
+ *  table that scrolls sideways says more. */
+export declare function narrowed(presents: readonly ListPresent[] | undefined, requested: ListPresent, narrow: boolean): {
+    offered: readonly ListPresent[];
+    present: ListPresent;
+};

package/dist/views/list/useNarrowList.js

@@ -1,7 +1,7 @@
 "use client";
 import { HANDHELD_WIDTH } from "../../foundations/layout.js";
 import { WIDE_PRESENTS } from "./columns.js";
-import { useEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 /**
  * A narrow LIST — a phone, a drawer, a panel among four — does not offer the presentations
  * that need width: a seven-column table at 360 px is a horizontal scroll nobody reads.
@@ -11,13 +11,19 @@ import { useEffect, useRef, useState } from "react";
  *
  * Attach `frame` to the list's root element; `offered` is what the switcher may show and
  * `present` what to draw (a wide one that was asked for falls back to rows).
+ *
+ * Measured BEFORE paint: waiting for the observer's first report drew the table and swapped it
+ * for rows a frame later, so a click on a row of a list in a panel landed on a detached `<tr>`.
  */
 export function useNarrowList(presents, requested) {
     const frame = useRef(null);
     const [narrow, setNarrow] = useState(false);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const el = frame.current;
-        if (el === null || typeof ResizeObserver === "undefined")
+        if (el === null)
+            return;
+        setNarrow(el.getBoundingClientRect().width < HANDHELD_WIDTH);
+        if (typeof ResizeObserver === "undefined")
             return;
         const watch = new ResizeObserver(([entry]) => {
             if (entry !== undefined)
@@ -26,7 +32,15 @@ export function useNarrowList(presents, requested) {
         watch.observe(el);
         return () => watch.disconnect();
     }, []);
-    const offered = (presents ?? []).filter((p) => !narrow || !WIDE_PRESENTS.includes(p));
-    const present = narrow && WIDE_PRESENTS.includes(requested) ? "rows" : requested;
-    return { frame, offered, present };
+    return { frame, ...narrowed(presents, requested, narrow) };
+}
+/** What a list offers and draws at its width. Only a list that HAS rows folds into them: one
+ *  that declares just a table fell back to rows it had no `row` for, and drew empty lines — a
+ *  table that scrolls sideways says more. */
+export function narrowed(presents, requested, narrow) {
+    const folds = narrow && (presents === undefined || presents.includes("rows"));
+    return {
+        offered: (presents ?? []).filter((p) => !folds || !WIDE_PRESENTS.includes(p)),
+        present: folds && WIDE_PRESENTS.includes(requested) ? "rows" : requested,
+    };
 }

package/dist/views/record/Record.d.ts

@@ -2,6 +2,7 @@ import { type ActivityProps } from "../../components/activity/Activity.js";
 import { type SheetField, type SheetLayout } from "../../components/form/Sheet.js";
 import type { Crumb } from "../../components/record/Breadcrumb.js";
 import type { DirtyState } from "../../components/record/DirtyActions.js";
+import { type RecordStamp } from "../../components/record/RecordAudit.js";
 import { type RecordNoticeSpec } from "../../components/record/RecordNotices.js";
 import { RecordSkeleton } from "../../components/record/RecordSkeleton.js";
 import { type Stage } from "../../components/record/StatusBar.js";
@@ -68,6 +69,8 @@ type StatusProps = {
     /** Cuál de las etapas es la de ahora. Sin esto, la primera. */
     current?: string;
     failed?: boolean;
+    /** The stages can be chosen: pressing one moves the record there (a CRM's pipeline). */
+    onSelect?: (id: string) => void;
     /** La escotilla del estado, para lo que no es ninguna de las dos. */
     children?: ReactNode;
 };
@@ -76,6 +79,9 @@ type PaperProps = {
      *  valor, que es la forma de Odoo. */
     layout?: SheetLayout;
     columns?: 1 | 2 | 3 | 4;
+    /** `reading` (default): the sheet stops at a reading width, centred, with the rail lined
+     *  up to it. `full`: the whole page, for a record whose body is mostly a wide table. */
+    width?: "reading" | "full";
     children?: ReactNode;
 };
 type FactsProps = {
@@ -142,4 +148,12 @@ export declare namespace Record {
     var Pages: ((props: PagesProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"pages">;
     var Page: ((props: PageProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"page">;
     var Notice: ((props: RecordNoticeSpec) => ReactNode) & import("../../foundations/slots.js").Slotted<"notice">;
+    var Ribbon: ((props: {
+        label: string;
+        tone?: Tone;
+    }) => ReactNode) & import("../../foundations/slots.js").Slotted<"ribbon">;
+    var Audit: ((props: {
+        created?: RecordStamp;
+        updated?: RecordStamp;
+    }) => ReactNode) & import("../../foundations/slots.js").Slotted<"audit">;
 }