@sincpro/web-ui 1.1.0 → 1.3.0

package/dist/primitives/value/Avatar.js

@@ -87,5 +87,12 @@ src, }) {
            the same baseline the initials disc has. */
         _jsxs("span", { title: name, className: `relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-pill ${SIZE[size]}`, children: [_jsx("span", { "aria-hidden": true, className: "invisible", children: initials(name) }), _jsx("img", { src: src, alt: name, className: "absolute inset-0 size-full object-cover" })] }));
     }
-    return (_jsx("span", { title: name, "aria-hidden": true, className: `inline-flex shrink-0 items-center justify-center rounded-pill font-medium select-none ${SIZE[size]} ${toneOf(name, surface)}`, children: initials(name) }));
+    /* Each identity is a tint and an ink: the tint goes on the disc, the ink on the letters. */
+    const [tint = "", ink = ""] = toneOf(name, surface).split(" ");
+    return (
+    /* The tint lies over an OPAQUE disc of the surface. Laid straight over whatever is
+       behind, a translucent tint took that colour: on a calendar event the letters fell to
+       3.8:1. Over the surface it is the same disc everywhere, and the contrast is the one
+       measured for it. */
+    _jsxs("span", { title: name, "aria-hidden": true, className: `relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-pill font-medium select-none ${SIZE[size]} ${surface === "chrome" ? "bg-chrome" : "bg-surface"}`, children: [_jsx("span", { className: `absolute inset-0 ${tint}` }), _jsx("span", { className: `relative ${ink}`, children: initials(name) })] }));
 }

package/dist/primitives/value/{Fecha.d.ts → DateValue.d.ts}

@@ -1,5 +1,8 @@
-export declare function formatRelative(when: Date, now?: Date): string;
-export declare function formatDateTime(when: Date): string;
+import { type UiCopy } from "../../foundations/copy.js";
+/** Context: `copy` defaults to the installed words — what a caller outside a component has;
+ *  a component passes its branch's (`useUiCopy()`), so a provider reaches the sentence. */
+export declare function formatRelative(when: Date, now?: Date, copy?: UiCopy): string;
+export declare function formatDateTime(when: Date, locale?: string): string;
 export declare function DateValue({ when, format, 
 /** So it can be tested: without this, a story with «hace 2 min» changes its
  *  text every minute and no snapshot works as a reference. */

package/dist/primitives/value/{Fecha.js → DateValue.js}

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { currentCopy, currentCopyLocale, useUiCopy } from "../../foundations/copy.js";
+import { currentCopy, currentCopyLocale, useUiCopy, } from "../../foundations/copy.js";
 /* ==================================================================== *
  *  WHEN — a date says two things and they can't both be said together.
  *
@@ -45,20 +45,21 @@ const STEPS = [
     [HOUR, "hour"],
     [DAY, "day"],
 ];
-export function formatRelative(when, now = new Date()) {
-    const locale = currentCopyLocale();
+/** Context: `copy` defaults to the installed words — what a caller outside a component has;
+ *  a component passes its branch's (`useUiCopy()`), so a provider reaches the sentence. */
+export function formatRelative(when, now = new Date(), copy = currentCopy()) {
+    const locale = copy.locale;
     const delta = when.getTime() - now.getTime();
     const abs = Math.abs(delta);
     if (abs < MINUTE)
-        return currentCopy().time.justNow;
+        return copy.time.justNow;
     if (abs > 7 * DAY)
         return dateFormat(locale).format(when);
     const step = STEPS.find(([ms]) => abs < ms * 60) ?? STEPS[STEPS.length - 1];
     const [ms, unit] = step;
     return relativeFormat(locale).format(Math.round(delta / ms), unit);
 }
-export function formatDateTime(when) {
-    const locale = currentCopyLocale();
+export function formatDateTime(when, locale = currentCopyLocale()) {
     return `${dateFormat(locale).format(when)} ${timeFormat(locale).format(when)}`;
 }
 /** A day written as `YYYY-MM-DD` (what a date field stores) is that day HERE. `new Date()`
@@ -79,11 +80,11 @@ now, }) {
     if (Number.isNaN(d.getTime())) {
         return (_jsx("span", { className: "text-meta text-muted italic", title: copy.time.invalid, children: copy.time.noDate }));
     }
-    const exact = formatDateTime(d);
+    const exact = formatDateTime(d, copy.locale);
     const text = format === "exact"
         ? exact
         : format === "date"
             ? dateFormat(copy.locale).format(d)
-            : formatRelative(d, now);
+            : formatRelative(d, now, copy);
     return (_jsx("time", { dateTime: d.toISOString(), title: exact, className: "text-meta whitespace-nowrap tabular-nums text-muted", children: text }));
 }

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

@@ -1,5 +1,5 @@
+import { type FormMode } from "../../foundations/form.js";
 import type { OpenTarget, Tone } from "../../foundations/types.js";
-import { type FormMode } from "../field/mode.js";
 import { type PersonContact } from "./contact.js";
 import type { LucideIcon } from "lucide-react";
 import { type ReactNode } from "react";

package/dist/primitives/value/Relation.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { FieldIdsContext } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 import { cn, focusRing } from "../../foundations/variants.js";
 import { Button, ButtonLink, IconButton } from "../button/Button.js";
 import { CellStack, Thumb } from "../cell/CellStack.js";
-import { FieldIdsContext } from "../field/context.js";
-import { useFormMode } from "../field/mode.js";
 import { Menu } from "../menu/Menu.js";
 import { PopoverTrigger } from "../overlay/PopoverTrigger.js";
 import { Preview } from "../overlay/Preview.js";

package/dist/primitives/value/Value.js

@@ -64,7 +64,10 @@ export function Cell({ value,
 max = 48, }) {
     const copy = useUiCopy();
     if (value === null || value === undefined) {
-        return (_jsx("span", { className: "text-muted italic", title: copy.cell.missing, children: copy.cell.missing }));
+        return (
+        /* Said by the word and the italic, in ink: muted, it fell under 4.5:1 on a toned
+           cell — and a missing value is exactly what someone has to see. */
+        _jsx("span", { className: "text-ink italic", title: copy.cell.missing, children: copy.cell.missing }));
     }
     if (typeof value === "number")
         return _jsx(Numeric, { value: value, format: "decimal" });

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

@@ -1,5 +1,5 @@
 export { Copyable, type CopyableProps, CopyButton, } from "./Copyable.js";
-export { DateValue, formatDateTime, formatRelative, } from "./Fecha.js";
+export { DateValue, formatDateTime, formatRelative, } from "./DateValue.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, type PersonContact, UserChip, type UserChipProps, UserStack, } from "./Person.js";

package/dist/primitives/value/index.js

@@ -1,6 +1,6 @@
 /* Show a number or a datum so that it reads as such and not as text. */
 export { Copyable, CopyButton, } from "./Copyable.js";
-export { DateValue, formatDateTime, formatRelative, } from "./Fecha.js";
+export { DateValue, formatDateTime, formatRelative, } from "./DateValue.js";
 export { Meter, meterLevel, } from "./Meter.js";
 export { Metric, Metrics } from "./Metric.js";
 export { Avatar, UserChip, UserStack, } from "./Person.js";

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

@@ -1,11 +1,12 @@
 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 { ViewIcon } from "../../components/listing/ViewSwitcher.js";
 import type { Surface } from "../../foundations/types.js";
 import type { DataColumn, DataTableCreate } from "../../primitives/table/DataTable.js";
 import type { RowAction } from "../../primitives/table/RowActions.js";
 import type { SortState } from "../../primitives/table/Table.js";
-import { type 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 ListCalendar, type ListCrumb, type ListEmpty, type ListGantt, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSet, type ListSheet, type ListTimeline, type RowOf } from "./types.js";
 import type { ReactNode } from "react";
 type BarProps = {
     children?: ReactNode;
@@ -58,6 +59,17 @@ type BoardProps<T> = {
  *  de datos CRUDOS sí las trae, porque ahí salen del archivo y el código no sabe
  *  cuáles son. */
 type SheetProps<T> = Partial<ListSheet<T>>;
+export type ListPresentProps<T> = {
+    /** Its own name — not one of the nine the package draws. What `present` asks for. */
+    id: string;
+    /** Its name in the switcher: the button's `title` and accessible name. */
+    label: string;
+    icon: ViewIcon;
+    /** It needs width — a grid of columns — so a narrow list (a phone, a panel) does not
+     *  offer it. A map or a gallery reflows, and stays. */
+    wide?: boolean;
+    children: (set: ListSet<T>) => ReactNode;
+};
 export type ListProps<T extends object> = {
     items: readonly T[];
     keyOf: (item: T) => string;
@@ -138,5 +150,6 @@ export declare namespace List {
     var Calendar: <T>(props: ListCalendar<T>) => ReactNode;
     var Gantt: <T>(props: ListGantt<T>) => ReactNode;
     var Timeline: <T>(props: ListTimeline<T>) => ReactNode;
+    var Present: <T>(props: ListPresentProps<T>) => ReactNode;
 }
 export {};

package/dist/views/list/List.js

@@ -61,6 +61,23 @@ const TimelineSlot = slot("timeline", (_props) => null);
 const CalendarSlot = slot("calendar", (_props) => null);
 /** Each record as a span on a timeline, with its dependencies (`RecordGantt`). */
 const GanttSlot = slot("gantt", (_props) => null);
+/* Through `unknown`, like `TableSlot`: the set both gives a `T` (`items`) and takes one
+   (`press`), so the props are invariant in `T`. */
+const Present = slot("present", (_props) => null);
+/** The presentations written with `List.Present`, checked once: an id that repeats or that
+ *  shadows a built-in one would make the switcher offer two buttons for one thing. */
+function facesOf(nodes) {
+    const faces = nodes
+        .filter((node) => slotOf(node) === "present")
+        .map((node) => propsOf(node))
+        .map(({ children, ...face }) => ({ ...face, render: children }));
+    for (const [at, face] of faces.entries()) {
+        if (face.id in PRESENT_OF || faces.findIndex((one) => one.id === face.id) !== at) {
+            throw new Error(`List.Present: «${face.id}» is already a presentation of this list`);
+        }
+    }
+    return faces;
+}
 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;
@@ -86,13 +103,17 @@ export function List({ items, keyOf, embedded, surface, group, selection: select
     /* 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. */
-    const presents = top
-        .map((node) => FACES.find((face) => slotOf(node) === face))
-        .filter((face) => face !== undefined)
-        .map((face) => PRESENT_OF[face]);
+    const faces = facesOf(top);
+    const presents = top.flatMap((node) => {
+        const name = slotOf(node);
+        if (name === "present")
+            return [propsOf(node).id];
+        const builtIn = name === undefined ? undefined : PRESENT_OF[name];
+        return builtIn === undefined ? [] : [builtIn];
+    });
     /* 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]);
+    const rest = loose(top, ["bar", "metrics", "present", ...FACES]);
     return (_jsx(ListView, { items: items, keyOf: keyOf, row: rows === undefined
             ? () => ({ name: "" })
             : readOnly
@@ -120,7 +141,7 @@ export function List({ items, keyOf, embedded, surface, group, selection: select
                     : { onVisibleColumnIdsChange: table.onVisibleColumnIdsChange }),
             }), ...(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 }), ...(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 }));
+            : { sheet: sheet }), ...(report === undefined ? {} : { report }), ...(pivot === undefined ? {} : { pivot }), ...(calendar === undefined ? {} : { calendar }), ...(gantt === undefined ? {} : { gantt }), ...(timeline === undefined ? {} : { timeline }), ...(faces.length === 0 ? {} : { faces }), ...(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;
@@ -139,3 +160,4 @@ List.Pivot = Pivot;
 List.Calendar = CalendarSlot;
 List.Gantt = GanttSlot;
 List.Timeline = TimelineSlot;
+List.Present = Present;

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

@@ -1,5 +1,5 @@
 import type { ListViewProps } from "./types.js";
-export declare function ListView<T extends object>({ items, keyOf, identity, crumbs, embedded, surface: requestedSurface, metrics, search, pagination, views, actions, row, rowHeader, columns, visibleColumnIds, onVisibleColumnIdsChange, card, 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;
+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, faces, 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

@@ -9,9 +9,9 @@ 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 { GroupHeader, GroupMore, Row, RowHeader, } from "../../components/listing/Row.js";
 import { sortItems, SortMenu, } from "../../components/listing/SortMenu.js";
-import { ViewSwitcher } from "../../components/listing/ViewSwitcher.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";
@@ -22,7 +22,7 @@ import { Button } from "../../primitives/button/Button.js";
 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 { groupedColumnIds, WIDE_PRESENTS } from "./columns.js";
 import { groupLevelsOf, reportColumnsOf, reportRowsOf, sheetFromColumns, sheetRowsOf, } from "./derive.js";
 import { SheetPresentation, TablePresentation, } from "./presentations.js";
 import { useNarrowList } from "./useNarrowList.js";
@@ -66,8 +66,13 @@ const PRESENT_ICONS = [
     { 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, 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);
+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, faces, 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 wide = useMemo(() => [
+        ...WIDE_PRESENTS,
+        ...(faces ?? []).filter((f) => f.wide === true).map((f) => f.id),
+    ], [faces]);
+    const { frame, offered, present } = useNarrowList(presents, requested, wide);
+    const face = faces?.find((one) => one.id === present);
     /* 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;
@@ -99,14 +104,18 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
         ];
     const shownColumns = columns === undefined ? undefined : visibleColumns(columns, tableIds);
     const groupLevels = useMemo(() => groupLevelsOf(group, columns), [group, columns]);
+    /* In the order the tree wrote them — the application's own among the package's. */
+    const options = offered.flatMap((id) => {
+        const own = faces?.find((one) => one.id === id);
+        if (own !== undefined)
+            return [{ id, label: own.label, icon: own.icon }];
+        const builtIn = PRESENT_ICONS.find((option) => option.id === id);
+        return builtIn === undefined
+            ? []
+            : [{ id, label: copy.present[builtIn.id], icon: builtIn.icon }];
+    });
     const switcher = views ??
-        (offered.length > 1 ? (_jsx(ViewSwitcher, { options: PRESENT_ICONS.filter((option) => offered.includes(option.id)).map((option) => ({
-                id: option.id,
-                label: copy.present[option.id],
-                icon: option.icon,
-            })), current: present, ...(onPresentChange === undefined
-                ? {}
-                : { onSelect: (id) => onPresentChange(id) }), ...(surface === undefined ? {} : { surface }) })) : undefined);
+        (options.length > 1 ? (_jsx(ViewSwitcher, { options: options, current: present, ...(onPresentChange === undefined ? {} : { onSelect: onPresentChange }), ...(surface === undefined ? {} : { surface }) })) : undefined);
     const sheetFromDeclared = useMemo(() => sheetFromColumns(shownColumns), [shownColumns]);
     const sheetSpec = sheet ?? sheetFromDeclared;
     /* El menú de columnas vale en `table` y en la planilla DERIVADA —las dos
@@ -244,7 +253,10 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
                         ? null
                         : pile.piles.length > 0
                             ? renderPiles(pile.piles, nodes)
-                            : nodes(pile.items)] }, key));
+                            : nodes(pile.items), open &&
+                        pile.piles.length === 0 &&
+                        pile.items.length < pile.count &&
+                        group?.onMore !== undefined ? (_jsx(GroupMore, { left: pile.count - pile.items.length, depth: pile.depth, onMore: () => group.onMore?.(pile) })) : null] }, key));
         });
     }
     const reportRows = useMemo(() => reportRowsOf(piles, columns, row), [piles, columns, row]);
@@ -260,7 +272,22 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
         const d = row(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 ? (
+    const body = face !== undefined ? (face.render({
+        items: ordered,
+        keyOf,
+        piles,
+        isOpen,
+        ...(group?.onToggle === undefined
+            ? {}
+            : { toggle: (pile) => group.onToggle?.(pathKey(pile.path)) }),
+        ...(group?.onMore === undefined ? {} : { more: group.onMore }),
+        ...(selection === undefined
+            ? {}
+            : { selection: { has: selection.has, toggle: selection.toggle } }),
+        ...(press === undefined ? {} : { press }),
+        ...(onPeek === undefined || choosing ? {} : { peek: onPeek }),
+        ...(onOpen === undefined || choosing ? {} : { open: onOpen }),
+    })) : 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 || 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`. */

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

@@ -1,2 +1,2 @@
-export { List, type ListProps } from "./List.js";
-export { type ListCrumb, type ListEmpty, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSheet, type RowOf, } from "./types.js";
+export { List, type ListPresentProps, type ListProps } from "./List.js";
+export { type ListCrumb, type ListEmpty, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSet, type ListSheet, type RowOf, } from "./types.js";

package/dist/views/list/presentations.js

@@ -37,7 +37,9 @@ export function TablePresentation({ items, columns, keyOf, levels, group, totals
                 ]),
             ...(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
+    /* Piles counted by whoever keeps the data go through as they are: the table draws those,
+       not the ones it would build from the page. */
+    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 }), ...(group?.piles === undefined || levels.length === 0 ? {} : { piles: group.piles }), ...(group?.onMore === undefined ? {} : { onMore: group.onMore }), ...(selection === undefined
             ? {}
             : {
                 selected: new Set(items.filter((i) => selection.has(keyOf(i))).map(keyOf)),

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

@@ -4,9 +4,10 @@ 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 { ViewIcon } from "../../components/listing/ViewSwitcher.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 { Grouping, GroupLevel, Pile } from "../../foundations/grouping.js";
 import type { Pivot, PivotKey, PivotSpec } from "../../foundations/pivot.js";
 import type { Surface, Tone } from "../../foundations/types.js";
 import type { DataColumn, DataTableCreate } from "../../primitives/table/DataTable.js";
@@ -40,6 +41,51 @@ export type RowOf = {
     children?: ReactNode;
     actions?: ReactNode;
 };
+/**
+ * The set as a presentation receives it — what a `List.Present` draws from.
+ *
+ * Context: the built-in presentations do not each sort, group and wire selection on their
+ * own; the list does it once and hands them the result. A presentation the application
+ * writes gets the same hand-off, so a map or a gallery is one more way of looking at the
+ * SAME set: the bar's sort, the search's grouping, the selection and the rule of what a
+ * press on a record does all hold, and switching to it and back loses none of them.
+ */
+export type ListSet<T> = {
+    /** In the order the bar asks for. The page, when the list pages. */
+    items: readonly T[];
+    keyOf: (item: T) => string;
+    /** Grouped: the piles, outermost level first, each with its sub-piles or its items.
+     *  `null` when the list is not grouped — draw `items`. */
+    piles: readonly Pile<T>[] | null;
+    /** Whether a pile is open, with the same keys every presentation folds by. */
+    isOpen: (pile: Pile<T>) => boolean;
+    /** Folds or unfolds a pile — present when the list lets it. */
+    toggle?: (pile: Pile<T>) => void;
+    /** Asks for the next page of a pile that holds fewer records than it counts
+     *  (`pile.items.length < pile.count`) — present when whoever keeps the data can. */
+    more?: (pile: Pile<T>) => void;
+    selection?: {
+        has: (id: string) => boolean;
+        toggle: (id: string) => void;
+    };
+    /** What a press on a record does in THIS list: choose it, look at it or open it, as the
+     *  list decided (`onChoose`, `rowClick`). Call this from the body of a card or a marker. */
+    press?: (item: T) => void;
+    /** The two ways in, for a presentation that offers both buttons (👁 and ↗). Absent while
+     *  the list is choosing. */
+    peek?: (item: T) => void;
+    open?: (item: T) => void;
+};
+/** A presentation the application writes, as the list receives it from `List.Present`. */
+export type ListFace<T> = {
+    id: string;
+    /** Its name in the switcher — the `title` and the accessible name of its button. */
+    label: string;
+    icon: ViewIcon;
+    /** It needs width (a grid of columns): a narrow list does not offer it. */
+    wide?: boolean;
+    render: (set: ListSet<T>) => ReactNode;
+};
 /** A crumb of the list: where I came from. */
 export type ListCrumb = {
     label: string;
@@ -279,6 +325,8 @@ export type ListViewProps<T extends object> = {
      * elegirlo acá sería adivinar la pregunta.
      */
     pivot?: ListPivot<T>;
+    /** The presentations the application wrote (`List.Present`), by id. */
+    faces?: readonly ListFace<T>[];
     present?: ListPresent;
     /** Which presentations this list offers. Two or more draw the switcher. */
     presents?: readonly ListPresent[];

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

@@ -13,7 +13,7 @@ import { type RefObject } from "react";
  * 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): {
+export declare function useNarrowList(presents: readonly ListPresent[] | undefined, requested: ListPresent, wide?: readonly ListPresent[]): {
     frame: RefObject<HTMLDivElement | null>;
     offered: readonly ListPresent[];
     present: ListPresent;
@@ -21,7 +21,7 @@ export declare function useNarrowList(presents: readonly ListPresent[] | undefin
 /** 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): {
+export declare function narrowed(presents: readonly ListPresent[] | undefined, requested: ListPresent, narrow: boolean, wide?: readonly ListPresent[]): {
     offered: readonly ListPresent[];
     present: ListPresent;
 };

package/dist/views/list/useNarrowList.js

@@ -15,7 +15,7 @@ import { useLayoutEffect, useRef, useState } from "react";
  * 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) {
+export function useNarrowList(presents, requested, wide = WIDE_PRESENTS) {
     const frame = useRef(null);
     const [narrow, setNarrow] = useState(false);
     useLayoutEffect(() => {
@@ -32,15 +32,15 @@ export function useNarrowList(presents, requested) {
         watch.observe(el);
         return () => watch.disconnect();
     }, []);
-    return { frame, ...narrowed(presents, requested, narrow) };
+    return { frame, ...narrowed(presents, requested, narrow, wide) };
 }
 /** 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) {
+export function narrowed(presents, requested, narrow, wide = WIDE_PRESENTS) {
     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,
+        offered: (presents ?? []).filter((p) => !folds || !wide.includes(p)),
+        present: folds && wide.includes(requested) ? "rows" : requested,
     };
 }

package/dist/views/record/Record.js

@@ -14,7 +14,7 @@ import { useUiCopy } from "../../foundations/copy.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
 import { flatten, pick as pickSlot, pickAll, propsOf, slot, slotOf, } from "../../foundations/slots.js";
 import { createNoteRegistry, NoteRegistryContext, } from "../../primitives/field/note.js";
-import { Tabs } from "../../primitives/tabs/Tabs.js";
+import { Tabs, TabsPanel, TabsScope, } from "../../primitives/tabs/Tabs.js";
 import { useEffect, useId, useState, useSyncExternalStore } from "react";
 const pick = (nodes, name) => pickSlot(nodes, name);
 /** El riel: mi lugar delante del registro. Sin él, no hay banda — y eso
@@ -68,6 +68,10 @@ const Facts = slot("facts", (_props) => null);
  *  que no está escrita no tiene solapa, y ésa es toda la declaración. */
 const Pages = slot("pages", (_props) => null);
 const Page = slot("page", (_props) => null);
+/** The notebook's tabs and its page share an id — only when there are tabs. */
+function NotebookScope({ tabs, children }) {
+    return tabs ? _jsx(TabsScope, { children: children }) : children;
+}
 export function Record({ identity, error = null, dirty, children }) {
     const d = useDensity();
     const copy = useUiCopy();
@@ -166,48 +170,48 @@ 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, ...(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 }) })),
-                    }), ...(actions === undefined ? {} : { actions }), ...(statusBlock === undefined ? {} : { status: statusBlock }), ...(identity.icon === undefined ? {} : { icon: identity.icon }), title: identity.title, ...(identity.subtitle === undefined ? {} : { subtitle: identity.subtitle }), ...(identity.figure === undefined ? {} : { figure: identity.figure }), ...(identity.tag === undefined ? {} : { tag: identity.tag }), ...(smart === undefined || smart.length === 0
-                    ? {}
-                    : {
-                        smart: (_jsx(SmartButtons, { children: smart.map((s) => (_jsx(SmartButton, { icon: s.icon, ...(s.count === undefined ? {} : { count: s.count }), label: s.label, layout: onTheRail && d === "comfortable" ? "inline" : "stacked", ...(s.onClick === undefined ? {} : { onClick: s.onClick }) }, s.label))) })),
-                    }), ...(aspectsNode === undefined || globalSheet ? {} : { aspects: aspectsNode }), ...(activitySlot === undefined
-                    ? {}
-                    : {
-                        activity: (_jsx(Activity, { ...activitySlot, alerts: rest, alertsId: alertsId, open: activityOpen, onToggle: () => setActivityOpen(!activityOpen) })),
-                        activityLayout: activitySlot.layout ?? "auto",
-                    }), ...(blocking.length === 0 && error === null
-                    ? {}
-                    : {
-                        blocking: (_jsx(RecordBlocking, { notices: blocking, error: error, errorHeading: copy.failed.operation })),
-                    }), ...(rest.length === 0 && (activitySlot === undefined || notes.length === 0)
-                    ? {}
-                    : {
-                        indicator: (_jsx(RecordNoticeIndicator, { notices: rest, anchored: notes.map((entry) => ({ tone: entry.note.tone ?? "info" })), ...(activitySlot === undefined
-                                ? {}
-                                : {
-                                    /* With a panel, the notices live there: the indicator goes to them
-                                     instead of floating a second copy in a popover. */
-                                    reveal: {
-                                        target: alertsId,
-                                        onReveal: () => {
-                                            setActivityOpen(true);
-                                            setReveal((n) => n + 1);
+    _jsx(NoteRegistryContext, { value: registry, children: _jsx("article", { className: "flex min-w-0 flex-1 flex-col", children: _jsx(NotebookScope, { tabs: tabs.length > 0, 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 }) })),
+                        }), ...(actions === undefined ? {} : { actions }), ...(statusBlock === undefined ? {} : { status: statusBlock }), ...(identity.icon === undefined ? {} : { icon: identity.icon }), title: identity.title, ...(identity.subtitle === undefined ? {} : { subtitle: identity.subtitle }), ...(identity.figure === undefined ? {} : { figure: identity.figure }), ...(identity.tag === undefined ? {} : { tag: identity.tag }), ...(smart === undefined || smart.length === 0
+                        ? {}
+                        : {
+                            smart: (_jsx(SmartButtons, { children: smart.map((s) => (_jsx(SmartButton, { icon: s.icon, ...(s.count === undefined ? {} : { count: s.count }), label: s.label, layout: onTheRail && d === "comfortable" ? "inline" : "stacked", ...(s.onClick === undefined ? {} : { onClick: s.onClick }) }, s.label))) })),
+                        }), ...(aspectsNode === undefined || globalSheet ? {} : { aspects: aspectsNode }), ...(activitySlot === undefined
+                        ? {}
+                        : {
+                            activity: (_jsx(Activity, { ...activitySlot, alerts: rest, alertsId: alertsId, open: activityOpen, onToggle: () => setActivityOpen(!activityOpen) })),
+                            activityLayout: activitySlot.layout ?? "auto",
+                        }), ...(blocking.length === 0 && error === null
+                        ? {}
+                        : {
+                            blocking: (_jsx(RecordBlocking, { notices: blocking, error: error, errorHeading: copy.failed.operation })),
+                        }), ...(rest.length === 0 && (activitySlot === undefined || notes.length === 0)
+                        ? {}
+                        : {
+                            indicator: (_jsx(RecordNoticeIndicator, { notices: rest, anchored: notes.map((entry) => ({ tone: entry.note.tone ?? "info" })), ...(activitySlot === undefined
+                                    ? {}
+                                    : {
+                                        /* With a panel, the notices live there: the indicator goes to them
+                                       instead of floating a second copy in a popover. */
+                                        reveal: {
+                                            target: alertsId,
+                                            onReveal: () => {
+                                                setActivityOpen(true);
+                                                setReveal((n) => n + 1);
+                                            },
                                         },
-                                    },
-                                }) })),
-                    }), 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 })] }) }) }) }));
+                                    }) })),
+                        }), 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: [tabs.length === 0 ? (pageBody) : (_jsx(TabsPanel, { id: current, className: `flex min-w-0 flex-col ${byDensity(d, "gap-(--spacing-block)", "gap-2.5")}`, children: pageBody })), below] }) }), audit === undefined ? null : _jsx(RecordAudit, { ...audit })] }) }) }) }) }));
 }
 Record.Skeleton = RecordSkeleton;
 Record.Rail = Rail;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/web-ui",
-  "version": "1.1.0",
+  "version": "1.3.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",