@sincpro/web-ui 0.1.0 → 1.0.0

package/dist/tokens.css

@@ -11,6 +11,13 @@
 @import "@fontsource/ibm-plex-mono/latin-ext-400.css";
 @import "@fontsource/ibm-plex-mono/latin-500.css";
 @import "@fontsource/ibm-plex-mono/latin-ext-500.css";
+/* The record calendar (`RecordCalendar`, FullCalendar v7): its structure and the `forma`
+   theme. The palette that theme reads is defined below, from web-ui's tokens. */
+@import "@fullcalendar/react/skeleton.css";
+@import "@fullcalendar/react/themes/forma/theme.css";
+/* The record Gantt (`RecordGantt`, SVAR): its styles, Willow theme included. Its variables
+   are pointed at web-ui's tokens below. */
+@import "@svar-ui/react-gantt/all.css";
 
 @import "tailwindcss";
 
@@ -491,6 +498,20 @@
      earlier. */
   --container-name: 12rem;
 
+  /* The widest a chip of the search bar gets before it truncates. A filter written by hand
+     («cliente contiene Importadora y Exportadora…») would otherwise take a whole line of the
+     bar and push the rest down; the full text stays in the chip's title. */
+  /* One stage of a board by stages: a card with its name, a tag and a figure, without
+     wrapping the name into three lines. Five stages fit a desk; more scroll sideways. */
+  --container-lane: 18rem;
+  /* The names column of a timeline (an employee with an avatar, a room, a machine): wide enough
+     for «Ammy Shalem Aranibar Zambrana» before it truncates. */
+  --container-timeline-label: 15rem;
+  --container-facet: 16rem;
+  /* The grouping chain is several levels in one chip, so it asks for more before it
+     truncates — at its end, as one sentence, never level by level. */
+  --container-chain: 28rem;
+
   /* The minimum width of a metric. It belongs to the system and not to the
      component: three metrics of different widths read as three different
      things, and what they have to let you compare is precisely the number. */
@@ -501,13 +522,25 @@
      —which has to stay clickable— reduced to a useless strip. */
   --container-peek: 30rem;
 
-  /* The width of the chatter, beside a record. Narrower than the peek because it
-     is not a record: it is a column of one-line entries —«se evaluó el
-     resultado», «el proyecto pasó a generado»— and 22rem holds one of those
-     without wrapping while leaving the record the width it needs. A system
-     decision for the same reason the peek is: two records whose history column
-     is a different width read as two different screens. */
-  --container-chatter: 22rem;
+  /* THE ACTIVITY COLUMN — at the RIGHT of a record's sheet, joined to it (`Activity`,
+     `RecordHeader` THE PAGE). It holds what is true now (the record's
+     notices and its fields' and rows' notes, compact) over what happened (the timeline:
+     messages, notes and events by time) — both always in sight.
+
+     `--container-activity` is the column: 22rem holds a notice with its action and a
+     message bubble of readable measure.
+
+     `--container-beside` is how wide the record's PAGE has to be for the column to stand
+     beside the sheet: the column and a sheet that keeps 54rem — two groups of fields side by
+     side still fit their labels. Narrower (a laptop with a sidebar, a phone, a modal), the
+     panel goes BELOW the sheet as a card. Written as a number and not a `calc()` because a container query cannot
+     read a variable.
+
+     `--container-record` is the pair at its widest — the sheet's reading width and the
+     column — so on a big screen they are placed together, centred. At 1680 px: 72 + 22. */
+  --container-activity: 22rem;
+  --container-beside: 76rem;
+  --container-record: calc(var(--container-sheet) + var(--container-activity));
 
   /* Below this a surface is held in one hand: a phone, or a panel just as narrow. 40rem is
      the width the list already stops offering a table at (`ListView`), and it is the same
@@ -523,6 +556,12 @@
      covering the bottom of the screen, which is exactly where the sheet's actions are. */
   --size-sheet: 90dvh;
 
+  /* How tall a floating list grows before it scrolls inside: about eight two-line rows,
+     the height a capped `Picker` already has, so a list that loads page after page from the
+     backend opens at the same size as one that shows the first eight. Taller, and a list of
+     two thousand customers fills the window and covers the form it is choosing for. */
+  --size-dropdown: 20rem;
+
   /* The width of a module's sidebar. 15rem holds an icon, a screen name of two
      words —«Notas de crédito», «Órdenes de compra»— a count and one step of
      nesting without truncating, and still leaves a 1280-wide window more than
@@ -583,6 +622,25 @@
   --duration-panel: 240ms;
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* The one loop of the system: the bar of a task under way that cannot say how far
+     it is (`ProgressBar` without a value). It is not a move between two states — it
+     has no end until the task ends — so the 250ms ceiling above does not apply; at
+     1.6s a bar that stays a minute on screen moves slowly enough not to flicker in
+     the corner of the eye. The bar uses it behind `motion-safe:`: with reduced
+     motion it stands still. */
+  --animate-progress-sweep: progress-sweep 1.6s var(--ease-in-out) infinite;
+}
+
+/* The segment is two fifths of its track: from just off the left edge (-100 % of
+   itself) to just off the right one (250 % of itself = the track's width). */
+@keyframes progress-sweep {
+  from {
+    translate: -100%;
+  }
+  to {
+    translate: 250%;
+  }
 }
 
 /* ==================================================================== *
@@ -729,6 +787,113 @@
     0 2px 6px -2px rgba(26, 23, 20, 0.18), 0 18px 40px -20px rgba(26, 23, 20, 0.42);
 }
 
+/* ====================================================================
+ *  THE WORKSPACE (@sincpro/web-composer) dressed in these tokens.
+ *
+ *  Context: the composer depends on no design system and paints its frames, tabs, windows
+ *  and modals with `--sc-*` variables. Pointing them at web-ui's tokens here means a composer
+ *  on a web-ui page takes its theme — light, dark, and any brand — with nothing to wire: no
+ *  import, no dependency, only names. They are aliases, so they follow the dark theme on
+ *  their own and carry no contrast of their own to measure.
+ * ==================================================================== */
+:root {
+  --sc-ground: var(--color-ground);
+  --sc-surface: var(--color-surface);
+  --sc-line: var(--color-line);
+  --sc-line-strong: var(--color-line-strong);
+  --sc-ink: var(--color-ink);
+  --sc-muted: var(--color-muted);
+  /* The workspace's accent marks where you are (the active tab, a focused frame): the navy
+     of a link, not the gold of the one primary action. */
+  --sc-accent: var(--color-primary);
+  --sc-danger: var(--color-danger);
+  --sc-on-danger: var(--color-surface);
+  --sc-scrim: var(--color-scrim);
+  --sc-modal-scrim: color-mix(in srgb, var(--color-scrim) 40%, transparent);
+  --sc-shadow: var(--shadow-window);
+  --sc-radius: var(--radius-panel);
+  --sc-radius-control: var(--radius-control);
+  --sc-text: var(--text-meta);
+  --sc-text-small: var(--text-micro);
+  --sc-icon: var(--size-icon-md);
+}
+
+/* ====================================================================
+ *  THE RECORD CALENDAR (FullCalendar v7, `forma` theme) in these tokens.
+ *
+ *  Context: the theme reads a palette of `--fc-forma-*` variables. Pointed at web-ui's tokens it
+ *  takes the theme — light, dark, a brand — with no dark block of its own: the tokens already
+ *  flip. Aliases, so no contrast of their own to measure; the translucent washes are mixed from
+ *  the ink so they read on either theme.
+ * ==================================================================== */
+:root {
+  --fc-forma-primary: var(--color-primary);
+  --fc-forma-primary-over: var(--color-primary-hover);
+  --fc-forma-primary-down: var(--color-primary-hover);
+  --fc-forma-primary-foreground: var(--color-surface);
+  --fc-forma-event: var(--color-primary);
+  --fc-forma-event-contrast: var(--color-surface);
+  --fc-forma-background-event: var(--color-primary);
+  --fc-forma-highlight: color-mix(in srgb, var(--color-primary) 18%, transparent);
+  --fc-forma-background: var(--color-surface);
+  --fc-forma-faint: color-mix(in srgb, var(--color-ink) 3%, transparent);
+  --fc-forma-muted: color-mix(in srgb, var(--color-ink) 7%, transparent);
+  --fc-forma-strong: color-mix(in srgb, var(--color-ink) 12%, transparent);
+  --fc-forma-stronger: color-mix(in srgb, var(--color-ink) 16%, transparent);
+  --fc-forma-strongest: color-mix(in srgb, var(--color-ink) 20%, transparent);
+  --fc-forma-foreground: var(--color-ink);
+  --fc-forma-faint-foreground: var(--color-muted);
+  --fc-forma-muted-foreground: var(--color-muted);
+  --fc-forma-border: var(--color-line);
+  --fc-forma-muted-border: var(--color-line);
+  --fc-forma-strong-border: var(--color-line-strong);
+}
+
+/* ====================================================================
+ *  THE RECORD GANTT (SVAR, Willow theme) in these tokens.
+ *
+ *  Context: Willow declares its `--wx-*` on `.wx-willow-theme`; redeclared on the same class
+ *  here, later, they win. Bars are the navy of the system, a summary the ink, a milestone the
+ *  info tone; the type is the system's. Aliases: they flip with the theme.
+ * ==================================================================== */
+.wx-willow-theme {
+  --wx-color-primary: var(--color-primary);
+  --wx-color-primary-selected: color-mix(in srgb, var(--color-primary) 14%, transparent);
+  --wx-color-primary-font: var(--color-surface);
+  --wx-color-secondary-hover: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  --wx-color-success: var(--color-good);
+  --wx-color-warning: var(--color-warn);
+  --wx-color-info: var(--color-info);
+  --wx-color-danger: var(--color-danger);
+  --wx-color-font: var(--color-ink);
+  --wx-color-font-alt: var(--color-muted);
+  --wx-background: var(--color-surface);
+  --wx-background-alt: var(--color-ground);
+  --wx-background-hover: color-mix(in srgb, var(--color-ink) 5%, transparent);
+  --wx-font-family: inherit;
+  --wx-font-size: var(--text-meta);
+  --wx-font-size-sm: var(--text-micro);
+  --wx-icon-color: var(--color-muted);
+  --wx-border-color: var(--color-line);
+  --wx-border-radius: var(--radius-control);
+  --wx-radius-major: var(--radius-box);
+  --wx-gantt-border-color: var(--color-line);
+  --wx-gantt-task-color: var(--color-primary);
+  --wx-gantt-task-fill-color: var(--color-primary-hover);
+  --wx-gantt-task-border-color: var(--color-primary-hover);
+  --wx-gantt-task-font-color: var(--color-surface);
+  --wx-gantt-summary-color: var(--color-line-strong);
+  --wx-gantt-summary-fill-color: color-mix(in srgb, var(--color-ink) 45%, transparent);
+  --wx-gantt-summary-border-color: var(--color-line-strong);
+  --wx-gantt-summary-font-color: var(--color-ink);
+  --wx-gantt-milestone-color: var(--color-info);
+  --wx-gantt-select-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  --wx-gantt-link-color: var(--color-muted);
+  --wx-gantt-link-color-hovered: var(--color-ink);
+  --wx-gantt-holiday-background: var(--color-ground);
+  --wx-gantt-holiday-color: var(--color-muted);
+}
+
 @layer base {
   /* No forced height anywhere: the document is exactly as tall as its content.
    * The color still has to reach the bottom of the viewport on a short page —
@@ -1023,3 +1188,10 @@
     --size-control-lg: 48px;
   }
 }
+
+/* A label written down a narrow strip: the name of a folded board column, read bottom-up
+   like a book's spine. Tailwind has no writing-mode utility. */
+@utility text-vertical {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+}

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 } from "../../primitives/table/DataTable.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;
@@ -41,12 +42,17 @@ type TableProps<T extends object> = {
     /** Lo que se le hace a UNA fila sin entrar. Se dibujan escondidas y aparecen
      *  sobre la fila que se está apuntando. */
     rowActions?: (item: T) => readonly RowAction[];
+    /** Escribir un registro nuevo como una fila más de la tabla (la lista editable de
+     *  Odoo). Ver la cabecera de `DataTable`. */
+    create?: DataTableCreate<T>;
 };
 /** El tablero. Sin `card`, la tarjeta sale de lo que ya dice `List.Rows`: el
  *  nombre, el `meta` y las fichas. Escribirla igual es declarar que ESTA lista
  *  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
@@ -55,6 +61,9 @@ type SheetProps<T> = Partial<ListSheet<T>>;
 export type ListProps<T extends object> = {
     items: readonly T[];
     keyOf: (item: T) => string;
+    /** The list is a FIELD of a record — a one2many / many2many — and not a screen: a
+     *  one-line bar that does not stick. See «A list INSIDE a record» above. */
+    embedded?: boolean;
     /** En qué superficie se apoya la BARRA. `canvas` (el default) es una barra
      *  de control clara; `chrome` la convierte en una banda oscura, una opción
      *  explícita: la barra de la aplicación es la única banda oscura de la
@@ -69,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;
@@ -82,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;
@@ -93,7 +119,7 @@ export type ListProps<T extends object> = {
     empty?: ListEmpty;
     children?: ReactNode;
 };
-export declare function List<T extends object>({ items, keyOf, 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">;
@@ -109,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

@@ -22,6 +22,9 @@ const Views = slot("views", (_props) => null);
  *  arriba de las filas, porque son del conjunto y no del marco. */
 const Metrics = slot("metrics", (_props) => null);
 const Rows = slot("rows", (_props) => null);
+/* Through `unknown`: `create` both receives and hands back a `T` (`onChange`, `draft`),
+   so `TableProps` is invariant in `T` and `TableProps<never>` no longer narrows to it. The
+   slot only carries the props; `List` reads them back typed against the list's `T`. */
 const TableSlot = slot("table", (_props) => null);
 const Board = slot("board", (_props) => null);
 const SheetSlot = slot("sheet", (_props) => null);
@@ -37,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, 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"));
@@ -55,6 +80,9 @@ export function List({ items, keyOf, surface, group, selection, sort, onSortChan
     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. */
@@ -65,21 +93,34 @@ export function List({ items, keyOf, surface, group, selection, sort, onSortChan
     /* 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 }), ...(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.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;
@@ -95,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, surface, metrics, search, pagination, views, actions, row, rowHeader, columns, visibleColumnIds, onVisibleColumnIdsChange, card, sheet, report, pivot, present: requested, presents, onPresentChange, sort, onSortChange, sortable, totals, rowActions, 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";
@@ -18,10 +23,10 @@ import { Empty, Failed, Skeleton } from "../../primitives/notice/Notice.js";
 import { PivotTable } from "../../primitives/table/PivotTable.js";
 import { ReportTable } from "../../primitives/table/ReportTable.js";
 import { groupedColumnIds } from "./columns.js";
-import { groupLevelsOf, reportRowsOf, sheetFromColumns, sheetRowsOf, } from "./derive.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,9 +62,15 @@ 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, surface, 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, 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. */
+    const surface = embedded ? undefined : requestedSurface;
     const density = useDensity();
     const copy = useUiCopy();
     const loading = state?.loading === true;
@@ -128,7 +139,16 @@ export function ListView({ items, keyOf, identity, crumbs, surface, metrics, sea
         present === "pivot" ? null : (_jsx(SortMenu, { fields: sortable, sort: sort ?? null, onSortChange: (next) => onSortChange?.(next), ...(surface === undefined ? {} : { surface }) }));
     const rightViews = views ?? switcher;
     const viewsSlot = columnsMenu === null && sortMenu === null && rightViews === undefined ? undefined : (_jsxs(_Fragment, { children: [sortMenu, columnsMenu, rightViews] }));
-    const bar = (_jsx(ListingBar, { surface: surface, ...(crumbs === undefined || crumbs.length === 0 || density === "compact"
+    /* 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 ||
+        pagination !== undefined ||
+        (selection?.count ?? 0) > 0;
+    const bar = !barHasControls ? undefined : (_jsx(ListingBar, { surface: surface, ...(embedded ? { inline: true, count: items.length } : {}), ...(embedded || crumbs === undefined || crumbs.length === 0 || density === "compact"
             ? {}
             : {
                 crumbs: (_jsx(Breadcrumb, { crumbs: crumbs, ...(surface === undefined ? {} : { surface }) })),
@@ -139,12 +159,26 @@ export function ListView({ items, keyOf, identity, crumbs, surface, metrics, sea
                     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));
     };
@@ -183,7 +217,10 @@ export function ListView({ items, keyOf, identity, crumbs, surface, metrics, sea
         error === null &&
         (present === "pivot" && pivotShown !== undefined
             ? pivotIsEmpty(pivotShown)
-            : items.length === 0);
+            : items.length === 0) &&
+        /* The first record of an empty list is written in the table, not under a sentence
+           saying there is nothing. */
+        !(present === "table" && create?.draft != null);
     /* La única línea que hace agrupable a una vista: el árbol que le pasaron, o el
        que se arma con las filas en la mano. */
     const piles = useMemo(() => pilesOf(ordered, group), [group, ordered]);
@@ -221,11 +258,11 @@ export function ListView({ items, keyOf, identity, crumbs, surface, metrics, sea
             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 }), ...(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
@@ -233,28 +270,48 @@ export function ListView({ items, keyOf, identity, crumbs, surface, metrics, sea
        Activos» en el medio. Pero sí se AGRUPA cuando las líneas no vienen
        declaradas: ahí el informe es este conjunto contado por los niveles que
        estén puestos. */
-    _jsx(ReportTable, { columns: report.columns, rows: report.rows ?? reportRows, ...(report.defaultOpen === undefined ? {} : { defaultOpen: report.defaultOpen }), ...(report.height === undefined ? {} : { height: report.height }) })) : present === "pivot" && pivotShown !== undefined ? (
+    _jsx(ReportTable
+    /* Built from the piles, the numbers are the list's columns' — and so is how they
+       are written. Declared by the domain, the columns are the domain's. */
+    , { 
+        /* Built from the piles, the numbers are the list's columns' — and so is how they
+           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" && 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
        wrapped it in a `div` to get both. */
     _jsxs("div", { ref: frame, className: "@container flex min-w-0 flex-1 flex-col bg-surface", children: [_jsxs(Listing, { bar: bar, 
                 /* La barra se queda arriba: con 187 filas, scrollear para ver la última
-                   dejaba sin buscador, sin paginador y sin el conmutador. */
-                sticky: true, ...(surface === undefined ? {} : { surface }), ...(metrics === undefined
+                   dejaba sin buscador, sin paginador y sin el conmutador.
+                   Embedded it does NOT: the record has its own sticky parts (its rail, its tabs),
+                   and a second band stuck under them — or carried up into the frame's header slot,
+                   which is what a sticky list bar does under a sidebar — would cover the record
+                   for a collection of a dozen rows. */
+                sticky: !embedded, ...(surface === undefined ? {} : { surface }), ...(metrics === undefined
                     ? {}
                     : {
                         metrics: _jsx("div", { className: "px-3.5", children: metrics }),

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)