@sincpro/web-ui 0.2.0 → 1.0.0

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));
     };
@@ -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">;
 }

package/dist/views/record/Record.js

@@ -3,8 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Activity } from "../../components/activity/Activity.js";
 import { Sheet, } from "../../components/form/Sheet.js";
 import { Pager as PagerControl } from "../../components/record/Pager.js";
+import { RecordAudit } from "../../components/record/RecordAudit.js";
 import { RecordHeader } from "../../components/record/RecordHeader.js";
 import { RecordBlocking, RecordNoticeIndicator, splitNotices, } from "../../components/record/RecordNotices.js";
+import { RecordRibbon } from "../../components/record/RecordRibbon.js";
 import { RecordSkeleton } from "../../components/record/RecordSkeleton.js";
 import { SmartButton, SmartButtons } from "../../components/record/SmartButtons.js";
 import { StatusBar } from "../../components/record/StatusBar.js";
@@ -51,6 +53,11 @@ const Status = slot("status", (_props) => null);
  *  notice that was already true when the record opened interrupts nothing (`Callout`
  *  is `role="status"`). */
 const NoticeSlot = slot("notice", (_props) => null);
+/** What the record IS now, across the paper's corner: «PAGADA», «ARCHIVADA». A word with its
+ *  tone, written as a child of `Record` or `Record.Paper`; see `RecordRibbon`. */
+const RibbonSlot = slot("ribbon", (_props) => null);
+/** Who created the record and who changed it last, on the paper's last line. */
+const AuditSlot = slot("audit", (_props) => null);
 /** El papel: el registro. El `<sheet>` blanco sobre el piso. */
 const Paper = slot("paper", (_props) => null);
 const ActivitySlot = slot("activity", (_props) => null);
@@ -89,10 +96,12 @@ export function Record({ identity, error = null, dirty, children }) {
     /* Apiladas en un bloque: arriba dónde está, abajo qué pasó para llegar.
        Lado a lado competían por el ancho con los botones y quedaban las dos
        truncadas; una debajo de la otra, cada una tiene su línea entera. */
-    _jsxs("div", { className: "flex min-w-0 flex-col items-end gap-1.5", children: [status.stages === undefined ? null : (_jsx(StatusBar, { stages: status.stages, current: status.current ?? status.stages[0]?.id ?? "", failed: status.failed ?? false, surface: surface })), status.children] }));
+    _jsxs("div", { className: "flex min-w-0 flex-col items-end gap-1.5", children: [status.stages === undefined ? null : (_jsx(StatusBar, { stages: status.stages, current: status.current ?? status.stages[0]?.id ?? "", failed: status.failed ?? false, surface: surface, ...(status.onSelect === undefined ? {} : { onSelect: status.onSelect }) })), status.children] }));
     const paper = propsOf(paperNode);
     const inPaper = [...flatten(paper?.children), ...loose];
     const fields = propsOf(pick(inPaper, "facts"))?.fields;
+    const ribbon = propsOf(pick(inPaper, "ribbon"));
+    const audit = propsOf(pick(inPaper, "audit"));
     /* Written at the top of the record or inside the paper: both are «on the record». */
     const notices = pickAll(inPaper, "notice")
         .map((node) => propsOf(node))
@@ -157,7 +166,11 @@ export function Record({ identity, error = null, dirty, children }) {
        shorter than the screen. The extra height has no paint of its own: on a desk
        nothing changes. */
     /* The record knows the notes of its fields and rows: their cards register here. */
-    _jsx(NoteRegistryContext, { value: registry, children: _jsx("article", { className: "flex min-w-0 flex-1 flex-col", children: _jsx(RecordHeader, { railSurface: surface, ...(dirty === undefined ? {} : { dirty }), ...(crumbs === undefined ? {} : { crumbs }), ...(pager === undefined
+    _jsx(NoteRegistryContext, { value: registry, children: _jsx("article", { className: "flex min-w-0 flex-1 flex-col", children: _jsx(RecordHeader, { railSurface: surface, ...(ribbon === undefined
+                    ? {}
+                    : {
+                        ribbon: (_jsx(RecordRibbon, { label: ribbon.label, ...(ribbon.tone === undefined ? {} : { tone: ribbon.tone }) })),
+                    }), ...(paper?.width === undefined ? {} : { width: paper.width }), ...(dirty === undefined ? {} : { dirty }), ...(crumbs === undefined ? {} : { crumbs }), ...(pager === undefined
                     ? {}
                     : {
                         pager: (_jsx(PagerControl, { index: pager.index, total: pager.total, surface: surface, ...(pager.onPrev === undefined ? {} : { onPrev: pager.onPrev }), ...(pager.onNext === undefined ? {} : { onNext: pager.onNext }) })),
@@ -190,11 +203,11 @@ export function Record({ identity, error = null, dirty, children }) {
                                         },
                                     },
                                 }) })),
-                    }), children: _jsx("div", { className: "min-w-0", children: _jsx("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-(--spacing-block) px-4 pt-(--spacing-block) pb-4", "gap-2.5 pt-2.5 pb-2")}`, children: _jsxs(Sheet, { layout: paper?.layout ?? "stacked", columns: paper?.columns ?? 2, ...(hasFacts ? { fields } : {}), ...(above.length > 0 || (globalSheet && aspectsNode !== undefined)
-                                ? {
-                                    head: (_jsxs(_Fragment, { children: [above, globalSheet && aspectsNode !== undefined ? (_jsx("div", { className: `border-b border-line-strong ${byDensity(d, "-mx-4 px-4", "")}`, children: aspectsNode })) : null] })),
-                                }
-                                : {}), children: [pageBody, below] }) }) }) }) }) }));
+                    }), children: _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-(--spacing-block) px-4 pt-(--spacing-block) pb-4", "gap-2.5 pt-2.5 pb-2")}`, children: _jsxs(Sheet, { layout: paper?.layout ?? "stacked", columns: paper?.columns ?? 2, ...(hasFacts ? { fields } : {}), ...(above.length > 0 || (globalSheet && aspectsNode !== undefined)
+                                    ? {
+                                        head: (_jsxs(_Fragment, { children: [above, globalSheet && aspectsNode !== undefined ? (_jsx("div", { className: `border-b border-line-strong ${byDensity(d, "-mx-4 px-4", "")}`, children: aspectsNode })) : null] })),
+                                    }
+                                    : {}), children: [pageBody, below] }) }), audit === undefined ? null : _jsx(RecordAudit, { ...audit })] }) }) }) }));
 }
 Record.Skeleton = RecordSkeleton;
 Record.Rail = Rail;
@@ -209,3 +222,5 @@ Record.Facts = Facts;
 Record.Pages = Pages;
 Record.Page = Page;
 Record.Notice = NoticeSlot;
+Record.Ribbon = RibbonSlot;
+Record.Audit = AuditSlot;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/web-ui",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "An enterprise web design system for business software — ERPs, back offices, management tools — in React and Tailwind: tokens, primitives, components and the two views every management screen is made of.",
   "type": "module",
   "main": "./dist/index.js",
@@ -53,19 +53,24 @@
     "@codemirror/lint": "^6.9.7",
     "@fontsource/ibm-plex-mono": "^5.3.0",
     "@fontsource/ibm-plex-sans": "^5.3.0",
+    "@fullcalendar/react": "7.1.3",
     "@internationalized/date": "^3.12.4",
+    "@svar-ui/react-gantt": "2.8.2",
     "@uiw/react-codemirror": "^4.25.11",
     "lucide-react": "^1.45.0",
     "react-aria": "^3.53.1",
     "react-aria-components": "^1.22.1",
     "tailwind-variants": "^4.0.0",
-    "tailwindcss-react-aria-components": "^2.2.0"
+    "tailwindcss-react-aria-components": "^2.2.0",
+    "temporal-polyfill": "^1.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@sincpro/web-composer": "^1.4.0",
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/addon-docs": "10.6.0",
     "@storybook/addon-mcp": "10.6.0",
+    "@storybook/addon-vitest": "10.6.0",
     "@storybook/react-vite": "10.6.0",
     "@tailwindcss/vite": "4.3.3",
     "@tanstack/react-table": "^9.2.4",
@@ -74,12 +79,13 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "6.1.1",
+    "@vitest/browser-playwright": "5.0.5",
     "eslint": "^10.11.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
+    "playwright": "1.64.1",
     "prettier": "^3.9.8",
-    "puppeteer-core": "^23.11.1",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "storybook": "10.6.0",
@@ -88,7 +94,8 @@
     "tsx": "^4.23.13",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.70.0",
-    "vite": "8.3.0"
+    "vite": "8.3.0",
+    "vitest": "5.0.5"
   },
   "keywords": [
     "design-system",

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

@@ -1,40 +0,0 @@
-import { type PaletteCommand } from "./commands.js";
-/**
- * The search box and the list, without the modal around them.
- *
- * Context: split out so the filtering can be rendered on its own — in a test, with a query
- * already typed — since the modal is a portal that only exists in a browser.
- */
-export declare function CommandSearch({ commands, onRun, query, onQueryChange, placeholder, }: {
-    commands: readonly PaletteCommand[];
-    onRun: (id: string) => void;
-    query?: string;
-    onQueryChange?: (next: string) => void;
-    placeholder?: string;
-}): import("react").JSX.Element;
-/**
- * A modal search over everything the app can do — go to a screen, create a record — opened
- * with ⌘K (Ctrl+K) and run with Enter.
- *
- * Context: it is controlled (`open`, `onOpenChange`) and does not bind the shortcut itself,
- * because an app has ONE palette and many screens: the key is bound once, where the palette
- * lives, with `useCommandPaletteShortcut`. Running a command closes it — the palette is a
- * path, not a place to stay.
- */
-export declare function CommandPalette({ open, onOpenChange, commands, onRun, placeholder, }: {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    commands: readonly PaletteCommand[];
-    /** A command was chosen. The palette closes on its own. */
-    onRun: (id: string) => void;
-    /** The search box's prompt and its accessible name. By default, the copy table's. */
-    placeholder?: string;
-}): import("react").JSX.Element;
-/**
- * Binds ⌘K (Ctrl+K on Windows and Linux) to open the palette, anywhere in the page.
- *
- * Context: both modifiers are accepted on every platform. Telling them apart by the user
- * agent guesses wrong on a Mac with a PC keyboard, and the cost of accepting both is that
- * Ctrl+K on a Mac — «delete to the end of the line» in a text box — opens the palette.
- */
-export declare function useCommandPaletteShortcut(setOpen: (open: boolean) => void): void;