@sincpro/web-ui 0.1.0 → 0.2.0

package/dist/primitives/value/Value.js

@@ -47,45 +47,6 @@ export function Numeric({ value, unit, format = "integer", }) {
             : formatCount(value);
     return (_jsxs("span", { className: "block text-right text-body tabular-nums whitespace-nowrap text-ink", children: [_jsx("span", { className: "tabular-nums", children: text }), unit === undefined ? null : _jsx("span", { className: "ml-1 text-muted", children: unit })] }));
 }
-/**
- * A real bar, never a spinner.
- *
- * Context: a spinner says «wait» and doesn't say how much; a bar says both
- * things.
- *
- * ── Why the fill is FLAT and the gradient is asked for ──────────────
- *
- * The bar always lived with `bar-brand`, the blue→gold gradient. At 3 px and at
- * 62 % that doesn't read as a brand: it reads as a blue bar with a broken tip.
- * A gradient needs length to be a gradient, and a bar inside a list row doesn't
- * have it.
- *
- * Now the fill is a flat tone —and the tone SAYS something: `good` finished,
- * `warn` is running slow, `bad` failed— and the gradient is asked for with
- * `tone="brand"`, which is the long bar of a live import: there it does have room
- * to be read.
- *
- * And it got fatter, from 3 px to 6 px. At 3 px it isn't a bar, it's a line: it
- * can't be told apart from a separator and the fill isn't visible unless it goes
- * past 20 %.
- */
-export function ProgressBar({ value, label, width = "w-24", tone = "brand", 
-/** The percentage next to it. It is turned off when the bar lives inside
- *  something that already says the figure —a cell with its column— and it
- *  would only mean reading it twice. */
-showValue = true, }) {
-    const clamped = Math.max(0, Math.min(100, Math.round(value)));
-    const fill = tone === "brand" ? "bar-brand" : FILL[tone];
-    return (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: `h-(--size-track) overflow-hidden rounded-pill bg-ink/10 ${width}`, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": label, children: _jsx("span", { className: `block h-full rounded-pill transition-[width] duration-(--duration-panel) ease-out ${fill}`, style: { width: `${clamped}%` } }) }), showValue ? (_jsxs("span", { className: "text-meta tabular-nums text-muted", children: [clamped, "%"] })) : null] }));
-}
-const FILL = {
-    neutral: "bg-muted",
-    info: "bg-info",
-    good: "bg-good",
-    warn: "bg-warn",
-    bad: "bg-bad",
-    accent: "bg-accent",
-};
 /**
  * The content of a data cell, with what the system decides and the view does not.
  *

package/dist/primitives/value/index.d.ts

@@ -1,8 +1,9 @@
-export { Copyable, type CopyableProps } from "./Copyable.js";
+export { Copyable, type CopyableProps, CopyButton, } from "./Copyable.js";
 export { DateValue, formatDateTime, formatRelative, } from "./Fecha.js";
 export { Meter, type MeterLevel, meterLevel, type MeterProps, type MeterThresholds, } from "./Meter.js";
 export { Metric, type MetricProps, Metrics } from "./Metric.js";
 export { Avatar, type AvatarSize, ContactCard, type ContactCardProps, type PersonContact, UserChip, type UserChipProps, UserStack, } from "./Person.js";
+export { ProgressBar, type ProgressBarProps, } from "./ProgressBar.js";
 export { RelationCard, type RelationCardProps, type RelationSummary, RelationValue, type RelationValueProps, } from "./Relation.js";
-export { Totals, type TotalsRow } from "./Totals.js";
-export { Cell, formatCount, formatDistance, formatNumber, KeyValue, Numeric, ProgressBar, } from "./Value.js";
+export { Totals, type TotalsCredit, type TotalsDeduction, type TotalsFact, type TotalsProps, type TotalsRow, } from "./Totals.js";
+export { Cell, formatCount, formatDistance, formatNumber, KeyValue, Numeric, } from "./Value.js";

package/dist/primitives/value/index.js

@@ -1,9 +1,10 @@
 /* Show a number or a datum so that it reads as such and not as text. */
-export { Copyable } from "./Copyable.js";
+export { Copyable, CopyButton, } from "./Copyable.js";
 export { DateValue, formatDateTime, formatRelative, } from "./Fecha.js";
 export { Meter, meterLevel, } from "./Meter.js";
 export { Metric, Metrics } from "./Metric.js";
 export { Avatar, ContactCard, UserChip, UserStack, } from "./Person.js";
+export { ProgressBar, } from "./ProgressBar.js";
 export { RelationCard, RelationValue, } from "./Relation.js";
-export { Totals } from "./Totals.js";
-export { Cell, formatCount, formatDistance, formatNumber, KeyValue, Numeric, ProgressBar, } from "./Value.js";
+export { Totals, } from "./Totals.js";
+export { Cell, formatCount, formatDistance, formatNumber, KeyValue, Numeric, } from "./Value.js";

package/dist/tokens.css

@@ -501,13 +501,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 `Drill`), 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 +535,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 +601,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%;
+  }
 }
 
 /* ==================================================================== *

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

@@ -1,7 +1,7 @@
 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";
@@ -41,6 +41,9 @@ 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
@@ -55,6 +58,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
@@ -93,7 +99,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, sort, onSortChange, sortable, present, onPresentChange, onOpen, onPeek, isPeeked, 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">;

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);
@@ -39,7 +42,7 @@ const PRESENT_OF = {
     pivot: "pivot",
 };
 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, }) {
+export function List({ items, keyOf, embedded, surface, group, selection, sort, onSortChange, sortable, present, onPresentChange, onOpen, onPeek, isPeeked, state, filtered, empty, children, }) {
     const top = flatten(children);
     const bar = flatten(propsOf(pick(top, "bar"))?.children);
     const crumbs = propsOf(pick(bar, "crumbs"))?.crumbs;
@@ -65,12 +68,13 @@ 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?.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
             ? {}
             : {
                 columns: table.columns,
                 ...(table.totals === undefined ? {} : { totals: table.totals }),
                 ...(table.rowActions === undefined ? {} : { rowActions: table.rowActions }),
+                ...(table.create === undefined ? {} : { create: table.create }),
                 ...(table.visibleColumnIds === undefined
                     ? {}
                     : { visibleColumnIds: table.visibleColumnIds }),

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, 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;
 /** What a list offers when it fails and can be retried. */
 export declare function RetryAction({ onRetry }: {
     onRetry: () => void;

package/dist/views/list/ListView.js

@@ -18,7 +18,7 @@ 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";
@@ -58,8 +58,11 @@ const PRESENT_ICONS = [
     /* La cuadrícula: dos ejes, y lo que importa está adentro. */
     { id: "pivot", icon: Grid3x3 },
 ];
-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, sheet, report, pivot, present: requested = "rows", presents, onPresentChange, sort, onSortChange, sortable, totals = false, rowActions, create, group, selection, onOpen, onPeek, 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 +131,15 @@ 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 ||
+        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 }) })),
@@ -183,7 +194,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]);
@@ -225,7 +239,7 @@ export function ListView({ items, keyOf, identity, crumbs, surface, metrics, sea
     };
     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 ? {} : { onPeek }), ...(onOpen === undefined ? {} : { onOpen }) })) : 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,7 +247,15 @@ 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" && 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
@@ -253,8 +275,12 @@ export function ListView({ items, keyOf, identity, crumbs, surface, metrics, sea
        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/derive.d.ts

@@ -1,6 +1,6 @@
 import { type Pile } from "../../foundations/grouping.js";
 import { type DataColumn } from "../../primitives/table/DataTable.js";
-import type { ReportRow } from "../../primitives/table/ReportTable.js";
+import type { ReportColumn, ReportRow } from "../../primitives/table/ReportTable.js";
 import type { SheetColumn } from "../../primitives/table/SheetTable.js";
 import type { ListGroup, ListSheet, RowOf } from "./types.js";
 /**
@@ -74,3 +74,14 @@ export declare function sheetRowsOf<T extends object>(piles: readonly Pile<T>[]
  * no digan totales distintos del mismo conjunto.
  */
 export declare function reportRowsOf<T extends object>(piles: readonly Pile<T>[] | null, columns: readonly DataColumn<T>[] | undefined, row: (item: T) => RowOf): readonly ReportRow[];
+/**
+ * The columns of a report built from the piles, written like the list's own columns.
+ *
+ * `reportRowsOf` puts in position `i` the aggregate of the `i`-th column that declared one,
+ * so `report.columns[i]` is THAT column's: a report column without its own `format` takes
+ * the one the list column declared — otherwise the report wrote «Bs. 78.752,90» in the
+ * table's footer and «78.752,90» in its own total line. A format declared on the report
+ * column wins: it is the more specific declaration. A `count` column keeps the report's own
+ * number format — a count of rows is not an amount.
+ */
+export declare function reportColumnsOf<T extends object>(reportColumns: readonly ReportColumn[], columns: readonly DataColumn<T>[] | undefined): readonly ReportColumn[];

package/dist/views/list/derive.js

@@ -1,5 +1,5 @@
 import { levelKey, pathKey, pileItems, pileLabel, } from "../../foundations/grouping.js";
-import { aggregateOf } from "../../primitives/table/DataTable.js";
+import { aggregateFormat, aggregateOf, aggregateText, } from "../../primitives/table/DataTable.js";
 /**
  * Context: what a list DERIVES from its set, as pure functions — the table's group levels,
  * the sheet drawn from the declared columns, the sheet's flattened band/row sequence and
@@ -114,10 +114,14 @@ export function sheetRowsOf(piles, isOpen, columns) {
                        las `columns` de la lista —las mismas que suma el pie de la
                        tabla— para que la planilla y la tabla no digan números distintos
                        del mismo montón. La planilla declara SUS columnas aparte, así que
-                       se busca por id. */
+                       se busca por id. Y se ESCRIBE como el pie: con el `format` de la
+                       columna, para que el montón no diga «78752,9» debajo de «Bs.». */
                     total: (column) => {
                         const declared = columns?.find((one) => one.id === column.id);
-                        return declared === undefined ? null : aggregateOf(declared, inside);
+                        const value = declared === undefined ? null : aggregateOf(declared, inside);
+                        return declared === undefined || value === null
+                            ? null
+                            : aggregateText(declared, value);
                     },
                 },
             });
@@ -179,3 +183,25 @@ export function reportRowsOf(piles, columns, row) {
     };
     return piles.map(line);
 }
+/**
+ * The columns of a report built from the piles, written like the list's own columns.
+ *
+ * `reportRowsOf` puts in position `i` the aggregate of the `i`-th column that declared one,
+ * so `report.columns[i]` is THAT column's: a report column without its own `format` takes
+ * the one the list column declared — otherwise the report wrote «Bs. 78.752,90» in the
+ * table's footer and «78.752,90» in its own total line. A format declared on the report
+ * column wins: it is the more specific declaration. A `count` column keeps the report's own
+ * number format — a count of rows is not an amount.
+ */
+export function reportColumnsOf(reportColumns, columns) {
+    if (columns === undefined)
+        return reportColumns;
+    const numeric = columns.filter((column) => column.aggregate !== undefined);
+    return reportColumns.map((column, index) => {
+        const declared = numeric[index];
+        const format = declared === undefined ? undefined : aggregateFormat(declared);
+        return column.format !== undefined || format === undefined
+            ? column
+            : { ...column, format };
+    });
+}

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

@@ -15,11 +15,11 @@ 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" | "onPeek" | "onOpen">;
+} & Pick<ListViewProps<T>, "sort" | "onSortChange" | "selection" | "rowActions" | "create" | "onPeek" | "onOpen">;
 /** 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, 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, }: 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

@@ -6,7 +6,7 @@ import { SheetTable } from "../../primitives/table/SheetTable.js";
 /** 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, onPeek, onOpen, }) {
+export function TablePresentation({ items, columns, keyOf, levels, group, totals, sort, onSortChange, selection, rowActions, create, onPeek, onOpen, }) {
     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 +22,7 @@ export function TablePresentation({ items, columns, keyOf, levels, group, totals
                             selection.toggle(id);
                     }
                 },
-            }), ...(totals ? { totals: true } : {}), ...(rowActions === undefined ? {} : { rowActions }), ...((onPeek ?? onOpen) === undefined ? {} : { onRowClick: onPeek ?? onOpen }) }));
+            }), ...(totals ? { totals: true } : {}), ...(rowActions === undefined ? {} : { rowActions }), ...(create === undefined ? {} : { create }), ...((onPeek ?? onOpen) === undefined ? {} : { onRowClick: onPeek ?? onOpen }) }));
 }
 /** 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
@@ -99,5 +99,7 @@ export function SheetPresentation({ spec, entries, ordered, group, }) {
                         ? false
                         : (spec.editable?.(item, column, columnIndex) ?? false);
                 },
-            }) }));
+            }), ...(spec.onAddRow === undefined || entries !== null
+            ? {}
+            : { onAddRow: spec.onAddRow }) }));
 }

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

@@ -4,7 +4,7 @@ import type { SortField } from "../../components/listing/SortMenu.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";
-import type { DataColumn } from "../../primitives/table/DataTable.js";
+import type { DataColumn, DataTableCreate } from "../../primitives/table/DataTable.js";
 import type { ReportColumn, ReportRow } from "../../primitives/table/ReportTable.js";
 import type { RowAction } from "../../primitives/table/RowActions.js";
 import type { SheetColumn } from "../../primitives/table/SheetTable.js";
@@ -87,6 +87,9 @@ export type ListSheet<T> = {
      *  convertirlo al tipo de la columna es del dominio, no de acá. */
     onCommit?: (item: T, column: SheetColumn, columnIndex: number, next: string) => void;
     editable?: (item: T, column: SheetColumn, columnIndex: number) => boolean;
+    /** Present = the sheet adds rows: «add a row» under it, and `Enter` on the last row.
+     *  The consumer appends the item; the sheet lands on it. Not while grouped. */
+    onAddRow?: () => void;
 };
 /**
  * El INFORME de una lista: los períodos y la jerarquía que termina en totales.
@@ -160,6 +163,11 @@ export type ListViewProps<T extends object> = {
     /** The metrics that also NARROW: «2 por confirmar», «41 por entregar». They go
      *  below the bar and above the rows — they belong to the set, not to the frame. */
     metrics?: ReactNode;
+    /** The list is a FIELD of a record (a one2many / many2many) and not a screen: the bar
+     *  is one line — search, count, sort, columns, switcher, actions —, it does not stick
+     *  and it does not move into the frame's header. Identity and crumbs are not drawn: the
+     *  record around it already says them. See `ListingBar`'s header. */
+    embedded?: boolean;
     /** Which surface the BAR sits on. `canvas` (the default) is a light control bar;
      *  `chrome` turns it into a dark band — an explicit choice, since the application bar
      *  is the screen's one dark band (same as the rail of a record). */
@@ -212,6 +220,10 @@ export type ListViewProps<T extends object> = {
     /** What gets done to ONE row without entering it, in the table presentation.
      *  They are drawn hidden and appear on the row being pointed at. */
     rowActions?: (item: T) => readonly RowAction[];
+    /** Write a new record as a row of the table presentation — Odoo's editable list. The
+     *  columns that declare `input` get a control in that row. See `DataTable`'s header.
+     *  While a record is being written the table shows even if the set is empty. */
+    create?: DataTableCreate<T>;
     /** The board presentation. */
     card?: (item: T) => ReactNode;
     /**

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

@@ -1,12 +1,14 @@
+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 RecordNoticeSpec } from "../../components/record/RecordNotices.js";
 import { RecordSkeleton } from "../../components/record/RecordSkeleton.js";
 import { type Stage } from "../../components/record/StatusBar.js";
 import type { Surface, Tone } from "../../foundations/types.js";
 import { type TabNotice } from "../../primitives/tabs/Tabs.js";
 import type { LucideIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 export type RecordIdentity = {
     icon?: LucideIcon;
     title: ReactNode;
@@ -42,6 +44,9 @@ export type RecordPager = {
     onNext?: () => void;
 };
 export type { SheetField };
+/** A notice of the record: the props of `Record.Notice` (a `Callout` without its × label,
+ *  which the record writes from the copy table). */
+export type RecordNotice = RecordNoticeSpec;
 type RailProps = {
     children?: ReactNode;
     /** The rail's surface. `canvas` (the default) is a light control bar; `chrome` is the dark
@@ -95,9 +100,27 @@ type PageProps = {
     notice?: TabNotice;
     children?: ReactNode;
 };
+/** The record's ACTIVITY panel, as DATA: its conversation, its history, its composer.
+ *  The record draws the `Activity` itself and gives it what only the record has — its
+ *  notices (the ones that are not blocking), and the indicator in the rail that opens the
+ *  panel on them.
+ *
+ *  Context: it was `<Record.Chatter><Chatter open onToggle …/></Record.Chatter>`, a node
+ *  the record could only place. Written as data — like `Record.Status` — the record owns
+ *  the panel's open state (`defaultOpen`, or `open` + `onOpenChange` to control it), so
+ *  «⚠ 2 avisos» in the rail can open it and move the focus to its notices. */
+export type RecordActivityProps = Omit<ActivityProps, "open" | "onToggle" | "alerts" | "alertsId"> & {
+    /** Starts OPEN unless this says otherwise: on a big screen you see what the record has. */
+    defaultOpen?: boolean;
+    /** Controls the panel: then `onOpenChange` must follow it. Remembering it between
+     *  records is the app's — the system only reports. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
 export type RecordProps = {
     identity: RecordIdentity;
-    /** Lo que falló al operar sobre el registro. Va arriba del papel, adentro. */
+    /** Lo que falló al operar sobre el registro. Va con los avisos que bloquean, primero:
+     *  entre el riel y el papel, siempre a la vista (ver `Record.Notice`). */
     error?: string | null;
     /** Hay cambios sin guardar. Su presencia REEMPLAZA los botones de acción por
      *  guardar y descartar — ver la nota en `RecordHeader`. */
@@ -114,13 +137,9 @@ export declare namespace Record {
     var Actions: ((props: ActionsProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"actions">;
     var Status: ((props: StatusProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"status">;
     var Paper: ((props: PaperProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"paper">;
-    var Chatter: ((props: {
-        children?: ReactNode;
-        /** `page` lo pone SIEMPRE debajo y a todo el ancho, como una hoja propia. Sin
-         *  esto va al costado cuando hay ancho, que es la forma angosta. */
-        layout?: "aside" | "page";
-    }) => ReactNode) & import("../../foundations/slots.js").Slotted<"chatter">;
+    var Activity: ((props: RecordActivityProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"activity">;
     var Facts: ((props: FactsProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"facts">;
     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">;
 }