@sincpro/web-ui 1.2.0 → 1.3.0

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.2.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",

package/dist/primitives/field/context.js

@@ -1,13 +0,0 @@
-"use client";
-import { createContext, useContext } from "react";
-export const FieldIdsContext = createContext(null);
-/** The ids of the enclosing `Field`, resolved against the control's own props. */
-export function useFieldIds(own) {
-    const field = useContext(FieldIdsContext);
-    return {
-        id: own.id ?? field?.id,
-        labelledBy: field?.labelId,
-        describedBy: own.describedBy ?? field?.describedBy,
-        invalid: own.invalid ?? field?.invalid ?? false,
-    };
-}

package/dist/primitives/field/mode.d.ts

@@ -1,9 +0,0 @@
-import { type ReactNode } from "react";
-export type FormMode = "edit" | "read";
-export declare function FormModeProvider({ value, children, }: {
-    value: FormMode;
-    children: ReactNode;
-}): import("react").JSX.Element;
-/** The mode of this field. The prop beats the context — a computed field stays
- *  in read mode inside a form that is being edited. */
-export declare function useFormMode(explicit?: FormMode): FormMode;