@sincpro/web-ui 1.2.0 → 1.4.0

package/dist/primitives/table/SheetTable.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useUiCopy } from "../../foundations/copy.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
 import { stickyTop, useScrollBox } from "../../foundations/sticky.js";
 import { Cell } from "../value/Value.js";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -168,7 +168,7 @@ note, height = 420, rowLabel, band, onBandToggle, caption, onCommit, editable, o
                 }
         }
     }
-    return (_jsxs("div", { className: "flex min-w-0 flex-col", children: [caption === undefined ? null : (_jsx("div", { className: "px-3 pb-2 text-meta text-muted", children: caption })), _jsx("div", { ref: caja.ref, style: caja.style, onKeyDown: isEditable ? onKey : undefined, tabIndex: isEditable ? 0 : undefined, className: `relative min-w-0 rounded-box border border-line bg-surface focus:outline-none ${caja.className}`, role: "grid", "aria-rowcount": rows, "aria-colcount": columns.length + 1, children: _jsxs("div", { style: {
+    return (_jsxs("div", { className: "flex min-w-0 flex-col", children: [caption === undefined ? null : (_jsx("div", { className: "px-3 pb-2 text-meta text-muted", children: caption })), _jsx("div", { ref: caja.ref, style: caja.style, onKeyDown: isEditable ? onKey : undefined, tabIndex: isEditable ? 0 : caja.tabIndex, className: `relative min-w-0 rounded-box border border-line bg-surface outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary ${caja.className}`, role: "grid", "aria-rowcount": rows, "aria-colcount": columns.length + 1, children: _jsxs("div", { style: {
                         minWidth: `${ROW_LABEL_WIDTH + columns.reduce((a, c) => a + (c.width ?? WIDTH), 0)}px`,
                     }, children: [_jsxs("div", { className: "sticky z-20 flex border-b border-line-strong bg-ground", style: stickyTop, role: "row", children: [_jsx("div", { className: "sticky left-0 z-30 shrink-0 border-r border-line bg-ground", style: { width: ROW_LABEL_WIDTH } }), columns.map((c) => (_jsxs("div", { role: "columnheader", style: { width: c.width ?? WIDTH }, className: `flex shrink-0 flex-col justify-center gap-0.5 border-r border-line px-2.5 py-1.5 ${c.numeric === true ? "items-end" : "items-start"}`, children: [_jsx("span", { className: "max-w-full truncate text-meta font-medium text-ink", title: c.header, children: c.header }), c.type === undefined ? null : (_jsx("span", { className: "max-w-full truncate font-mono text-micro text-muted", children: c.type }))] }, c.id))), _jsx("div", { className: "flex-1" })] }), _jsx("div", { style: { height: v.getTotalSize(), position: "relative" }, children: items.map((item) => {
                                 const montón = band?.(item.index);
@@ -183,21 +183,15 @@ note, height = 420, rowLabel, band, onBandToggle, caption, onCommit, editable, o
                                        que esa columna sume algo—. Antes era un rótulo suelto que
                                        ignoraba las columnas, y entonces un total quedaba en un
                                        rincón sin decir de qué columna era. */
-                                    _jsxs("div", { role: "row", "aria-rowindex": item.index + 1, className: "absolute top-0 left-0 flex w-full border-b border-line-strong bg-ground", style: { height: item.size, transform: `translateY(${item.start}px)` }, children: [_jsx("button", { type: "button", onClick: onBandToggle === undefined
-                                                    ? undefined
-                                                    : () => onBandToggle(item.index), "aria-expanded": montón.open, className: "sticky left-0 z-10 flex min-w-0 shrink-0 items-center gap-1.5 border-r border-line bg-ground px-2.5 text-left", style: {
-                                                    height: "100%",
-                                                    /* El mismo ancho que la columna del número de fila, para
-                                                       que el rótulo no corra la cuadrícula. */
-                                                    width: ROW_LABEL_WIDTH,
-                                                    ...(montón.depth === undefined || montón.depth === 0
-                                                        ? {}
+                                    _jsxs("div", { role: "row", "aria-rowindex": item.index + 1, className: "absolute top-0 left-0 flex w-full border-b border-line-strong bg-ground", style: { height: item.size, transform: `translateY(${item.start}px)` }, children: [_jsx("div", { role: "gridcell", className: "sticky left-0 z-10 shrink-0 border-r border-line bg-ground", style: { height: "100%", width: ROW_LABEL_WIDTH }, children: onBandToggle === undefined ? null : (_jsx("button", { type: "button", onClick: () => onBandToggle(item.index), "aria-expanded": montón.open, "aria-label": fillCopy(montón.open ? copy.report.close : copy.report.open, {
+                                                        name: montón.label,
+                                                    }), className: "flex h-full w-full min-w-0 items-center gap-1.5 px-2.5 text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", style: montón.depth === undefined || montón.depth === 0
+                                                        ? undefined
                                                         : {
                                                             paddingLeft: `calc(var(--spacing-indent) * ${montón.depth} + 0.625rem)`,
-                                                        }),
-                                                }, children: onBandToggle === undefined ? null : (_jsx(ChevronRight, { className: `size-(--size-icon-sm) shrink-0 text-muted transition-transform duration-(--duration-instant) ${montón.open ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true })) }), columns.map((c, ci) => {
+                                                        }, children: _jsx(ChevronRight, { className: `size-(--size-icon-sm) shrink-0 text-muted transition-transform duration-(--duration-instant) ${montón.open ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true }) })) }), columns.map((c, ci) => {
                                                 const total = montón.total?.(c, ci) ?? null;
-                                                return (_jsx("div", { role: "gridcell", style: { width: c.width ?? WIDTH }, className: `flex shrink-0 items-center overflow-hidden border-r border-line px-2.5 whitespace-nowrap ${c.numeric === true ? "justify-end" : "justify-start"}`, children: ci === 0 ? (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [montón.field === undefined ? null : (_jsx("span", { className: "shrink-0 text-micro text-muted/70", children: montón.field })), _jsx("span", { className: "truncate text-micro font-medium text-ink", children: montón.label }), _jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-line-strong bg-ink/5 px-2 py-0.5 text-micro tabular-nums text-muted", children: montón.count.toLocaleString(copy.locale) })] })) : total === null ? null : (_jsx("span", { className: "truncate text-meta font-medium tabular-nums text-ink", children: typeof total === "number"
+                                                return (_jsx("div", { role: "gridcell", style: { width: c.width ?? WIDTH }, className: `flex shrink-0 items-center overflow-hidden border-r border-line px-2.5 whitespace-nowrap ${c.numeric === true ? "justify-end" : "justify-start"}`, children: ci === 0 ? (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [montón.field === undefined ? null : (_jsx("span", { className: "shrink-0 text-micro text-muted", children: montón.field })), _jsx("span", { className: "truncate text-micro font-medium text-ink", children: montón.label }), _jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-line-strong bg-ink/5 px-2 py-0.5 text-micro tabular-nums text-muted", children: montón.count.toLocaleString(copy.locale) })] })) : total === null ? null : (_jsx("span", { className: "truncate text-meta font-medium tabular-nums text-ink", children: typeof total === "number"
                                                             ? total.toLocaleString(copy.locale)
                                                             : total })) }, c.id));
                                             })] }, item.key));

package/dist/primitives/table/Table.js

@@ -13,7 +13,7 @@ height, rowCount, }) {
        `useScrollBox`: ahí vive el dilema entero y ahí vive su explicación. Las
        tres tablas del sistema lo resolvían con tres copias de la misma
        medición. */
-    _jsx("div", { ref: caja.ref, className: `min-w-0 ${caja.className}`, style: caja.style, children: _jsx("table", { "aria-rowcount": rowCount, className: "w-full border-separate border-spacing-0 px-1 text-left", children: children }) }));
+    _jsx("div", { ref: caja.ref, tabIndex: caja.tabIndex, className: `min-w-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary ${caja.className}`, style: caja.style, children: _jsx("table", { "aria-rowcount": rowCount, className: "w-full border-separate border-spacing-0 px-1 text-left", children: children }) }));
 }
 /** The text of a column header, shared by every table of the family. Ink and semibold, not
  *  muted: in grey at the cells' weight the names of the columns read as one more row. */
@@ -110,7 +110,7 @@ mono = false,
  *  gets lost. */
 tone, title, }) {
     const mark = useContext(RowMark);
-    return (_jsx("td", { title: title, className: `border-b border-line px-3 py-1.5 text-meta text-ink first:rounded-l-control last:rounded-r-control ${(align ?? (numeric ? "right" : "left")) === "right" ? "text-right" : "text-left"} ${mono ? "font-mono tabular-nums" : numeric ? "tabular-nums" : ""} ${tone === undefined ? rowWash(mark) : CELL_TONE[tone]}`, children: children }));
+    return (_jsx("td", { title: title, className: `border-b border-line px-3 py-1.5 text-meta text-ink first:rounded-l-control last:rounded-r-control ${(align ?? (numeric ? "right" : "left")) === "right" ? "text-right" : "text-left"} ${mono ? "font-mono tabular-nums" : numeric ? "tabular-nums whitespace-nowrap" : ""} ${tone === undefined ? rowWash(mark) : CELL_TONE[tone]}`, children: children }));
 }
 /** The selection checkbox, with its third state.
  *

package/dist/primitives/tabs/Tabs.d.ts

@@ -1,5 +1,6 @@
 import type { Tone } from "../../foundations/types.js";
 import type { LucideIcon } from "lucide-react";
+import { type ReactNode } from "react";
 /**
  * UNA TIRA DE PESTAÑAS. La misma en todo el sistema.
  *
@@ -76,11 +77,28 @@ export type TabItem = {
     notice?: TabNotice;
 };
 /**
- * The strip only: what each tab opens is drawn by whoever uses it (`Record`, `Activity`).
+ * A notebook whose strip and page are far apart — the record's tabs ride in its header and
+ * the page is drawn in its paper. It only shares an id: no box, no context of anything
+ * else, so it can wrap a whole record without touching what is inside.
  *
- * Built on React Aria's `Tabs`, so the strip is a real tab list for the keyboard: the
- * arrows move between tabs and select them, Home/End jump to the ends, and only the open
- * tab is in the Tab order. The hand-written version had the roles and none of the keys.
+ * Context: it was React Aria's `Tabs`, and that one walks its whole subtree to collect its
+ * items — wrapped around a record it collected the breadcrumbs too, and broke them.
+ */
+export declare function TabsScope({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The page of the open tab, inside a `TabsScope`. `id` is the tab's. */
+export declare function TabsPanel({ id, className, children, }: {
+    id: string;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The strip. Inside a `TabsScope` each tab points at its panel; alone it is a strip whose
+ * page the caller draws.
+ *
+ * The keyboard is the ARIA tabs pattern with automatic activation: one tab stop (the open
+ * tab), ← / → move AND open (wrapping), Home / End go to the ends.
  */
 export declare function Tabs({ tabs, current, onSelect, label, }: {
     tabs: readonly TabItem[];

package/dist/primitives/tabs/Tabs.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUiCopy } from "../../foundations/copy.js";
-import { Tab, TabList, Tabs as AriaTabs } from "react-aria-components";
+import { createContext, useContext, useId, useRef, } from "react";
 /* El color de la notificación. Estático y en una tabla porque Tailwind no puede
    componer una clase con un pedazo variable: `bg-${tone}/12` no existe en la
    hoja. */
@@ -28,29 +28,83 @@ const NOTICE_DOT = {
  * arrows move between tabs and select them, Home/End jump to the ends, and only the open
  * tab is in the Tab order. The hand-written version had the roles and none of the keys.
  */
+/* Set by `TabsScope`: the strip and its page share an id, so each tab can say which panel
+   it controls and the panel which tab names it. */
+const Scope = createContext(null);
+const tabIdOf = (base, id) => `${base}-tab-${id}`;
+const panelIdOf = (base, id) => `${base}-panel-${id}`;
+/**
+ * A notebook whose strip and page are far apart — the record's tabs ride in its header and
+ * the page is drawn in its paper. It only shares an id: no box, no context of anything
+ * else, so it can wrap a whole record without touching what is inside.
+ *
+ * Context: it was React Aria's `Tabs`, and that one walks its whole subtree to collect its
+ * items — wrapped around a record it collected the breadcrumbs too, and broke them.
+ */
+export function TabsScope({ children }) {
+    return _jsx(Scope, { value: useId(), children: children });
+}
+/** The page of the open tab, inside a `TabsScope`. `id` is the tab's. */
+export function TabsPanel({ id, className, children, }) {
+    const base = useContext(Scope);
+    return (_jsx("div", { role: "tabpanel", ...(base === null
+            ? {}
+            : { id: panelIdOf(base, id), "aria-labelledby": tabIdOf(base, id) }), 
+        /* Reachable on its own (the ARIA pattern), with the ring every focus stop has. */
+        tabIndex: 0, className: `focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary ${className ?? ""}`, children: children }));
+}
+/**
+ * The strip. Inside a `TabsScope` each tab points at its panel; alone it is a strip whose
+ * page the caller draws.
+ *
+ * The keyboard is the ARIA tabs pattern with automatic activation: one tab stop (the open
+ * tab), ← / → move AND open (wrapping), Home / End go to the ends.
+ */
 export function Tabs({ tabs, current, onSelect, label, }) {
     const copy = useUiCopy();
-    return (_jsx(AriaTabs, { selectedKey: current, onSelectionChange: (key) => onSelect?.(String(key)), children: _jsx(TabList, { "aria-label": label ?? copy.record.faces, className: "flex min-w-0 flex-wrap items-end gap-1", children: tabs.map((a) => {
-                const Icon = a.icon;
-                const empty = a.count === 0;
-                /* Un cero no pide nada, así que no se dibuja. Es la diferencia con el
-                   contador, donde «0» es una respuesta. */
-                const notice = a.notice?.count === 0 ? undefined : a.notice;
-                return (_jsx(Tab, { id: a.id, ...(notice === undefined
-                        ? {}
-                        : { "aria-label": `${a.label} · ${notice.label}` }), className: ({ isSelected }) => `inline-flex shrink-0 cursor-default items-center px-3 py-2 text-meta outline-0 transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary ${isSelected
-                        ? "-mb-px rounded-t-control border border-b-0 border-line-strong bg-surface font-medium text-ink"
-                        : "border border-transparent text-muted hover:text-ink"}`, children: ({ isSelected }) => (
-                    /* The `title` goes on the content and not on the tab: React Aria does not
-                       forward it, and on the content the native tooltip still covers the
-                       whole tab. */
-                    _jsxs("span", { className: "inline-flex items-center gap-1.5", ...(notice === undefined ? {} : { title: notice.label }), children: [Icon === undefined ? null : (_jsx(Icon, { className: `size-(--size-icon-sm) shrink-0 ${isSelected ? "text-ink" : "text-muted"}`, strokeWidth: 2, "aria-hidden": true })), a.label, a.count === undefined ? null : (_jsx("span", { className: `rounded-pill px-1.5 text-micro tabular-nums ${empty
-                                    ? "bg-ink/5 text-muted/70"
-                                    : isSelected
-                                        ? "bg-ink/8 text-ink"
-                                        : "bg-ink/8 text-muted"}`, children: a.count.toLocaleString(copy.locale) })), notice === undefined ? null : notice.count === undefined ? (
-                            /* Sin número, un punto. La palabra no se dibuja pero está: en el
+    const base = useContext(Scope);
+    const strip = useRef(null);
+    const go = (to) => {
+        const next = tabs[(to + tabs.length) % tabs.length];
+        if (next === undefined)
+            return;
+        onSelect?.(next.id);
+        strip.current?.querySelector(`[data-tab="${CSS.escape(next.id)}"]`)?.focus();
+    };
+    const onKeyDown = (event) => {
+        const at = tabs.findIndex((one) => one.id === current);
+        const to = event.key === "ArrowRight"
+            ? at + 1
+            : event.key === "ArrowLeft"
+                ? at - 1
+                : event.key === "Home"
+                    ? 0
+                    : event.key === "End"
+                        ? tabs.length - 1
+                        : null;
+        if (to === null)
+            return;
+        event.preventDefault();
+        go(to);
+    };
+    return (_jsx("div", { ref: strip, role: "tablist", "aria-label": label ?? copy.record.faces, onKeyDown: onKeyDown, className: "flex min-w-0 flex-wrap items-end gap-1", children: tabs.map((a) => {
+            const Icon = a.icon;
+            const empty = a.count === 0;
+            /* Un cero no pide nada, así que no se dibuja. Es la diferencia con el
+               contador, donde «0» es una respuesta. */
+            const notice = a.notice?.count === 0 ? undefined : a.notice;
+            const isSelected = a.id === current;
+            return (_jsx("button", { type: "button", role: "tab", "data-tab": a.id, "aria-selected": isSelected, tabIndex: isSelected ? 0 : -1, ...(base === null
+                    ? {}
+                    : { id: tabIdOf(base, a.id), "aria-controls": panelIdOf(base, a.id) }), onClick: () => onSelect?.(a.id), className: `inline-flex shrink-0 cursor-default items-center px-3 py-2 text-meta outline-0 transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary ${isSelected
+                    ? "-mb-px rounded-t-control border border-b-0 border-line-strong bg-surface font-medium text-ink"
+                    : "border border-transparent text-muted hover:text-ink"}`, children: _jsxs("span", { className: "inline-flex items-center gap-1.5", ...(notice === undefined ? {} : { title: notice.label }), children: [Icon === undefined ? null : (_jsx(Icon, { className: `size-(--size-icon-sm) shrink-0 ${isSelected ? "text-ink" : "text-muted"}`, strokeWidth: 2, "aria-hidden": true })), a.label, a.count === undefined ? null : (_jsx("span", { className: `rounded-pill px-1.5 text-micro tabular-nums ${empty
+                                ? "bg-ink/5 text-muted"
+                                : isSelected
+                                    ? "bg-ink/8 text-ink"
+                                    : "bg-ink/8 text-muted"}`, children: a.count.toLocaleString(copy.locale) })), notice === undefined ? null : (_jsx("span", { className: "sr-only", children: ` · ${notice.label}` })), notice === undefined ? null : notice.count === undefined ? (
+                        /* Sin número, un punto. La palabra no se dibuja pero está: en el
                                `title` y en el nombre accesible de la pestaña. */
-                            _jsx("span", { className: `size-1.5 shrink-0 rounded-pill ${NOTICE_DOT[notice.tone ?? "bad"]}`, "aria-hidden": true })) : (_jsx("span", { className: `rounded-pill px-1.5 text-micro font-medium tabular-nums ${NOTICE_TONE[notice.tone ?? "bad"]}`, "aria-hidden": true, children: notice.count.toLocaleString(copy.locale) }))] })) }, a.id));
-            }) }) }));
+                        _jsx("span", { className: `size-1.5 shrink-0 rounded-pill ${NOTICE_DOT[notice.tone ?? "bad"]}`, "aria-hidden": true })) : (_jsx("span", { className: `rounded-pill px-1.5 text-micro font-medium tabular-nums ${NOTICE_TONE[notice.tone ?? "bad"]}`, "aria-hidden": true, children: notice.count.toLocaleString(copy.locale) }))] }) }, a.id));
+        }) }));
 }

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

@@ -1 +1 @@
-export { type TabItem, type TabNotice, Tabs } from "./Tabs.js";
+export { type TabItem, type TabNotice, Tabs, TabsPanel, TabsScope, } from "./Tabs.js";

package/dist/primitives/tabs/index.js

@@ -1 +1 @@
-export { Tabs } from "./Tabs.js";
+export { Tabs, TabsPanel, TabsScope, } from "./Tabs.js";

package/dist/primitives/tag/Tags.js

@@ -96,7 +96,10 @@ function shell({ item, surface, stack, removable, pressable, }) {
 }
 function Inside({ item }) {
     const Icon = item.icon;
-    return (_jsxs(_Fragment, { children: [Icon === undefined ? null : (_jsx(Icon, { className: "size-3 shrink-0 opacity-70", strokeWidth: 2, "aria-hidden": true })), item.avatar === undefined ? null : (_jsx("span", { "aria-hidden": true, className: "-my-0.5 -ml-1.5 flex shrink-0", children: _jsx(Avatar, { name: item.label, size: "sm", ...(typeof item.avatar === "string" ? { src: item.avatar } : {}) }) })), _jsx("span", { className: "min-w-0 truncate", children: item.label }), item.note === undefined ? null : (_jsxs("span", { className: "shrink-0 opacity-60", children: ["\u00B7 ", item.note] }))] }));
+    return (_jsxs(_Fragment, { children: [Icon === undefined ? null : (_jsx(Icon, { className: "size-3 shrink-0 opacity-70", strokeWidth: 2, "aria-hidden": true })), item.avatar === undefined ? null : (_jsx("span", { "aria-hidden": true, className: "-my-0.5 -ml-1.5 flex shrink-0", children: _jsx(Avatar, { name: item.label, size: "sm", ...(typeof item.avatar === "string" ? { src: item.avatar } : {}) }) })), _jsx("span", { className: "min-w-0 truncate", children: item.label }), item.note === undefined ? null : (
+            /* Secondary by its separator and weight, not by fading: at 60 % the note fell
+               under 4.5:1 on a tinted chip. */
+            _jsxs("span", { className: "shrink-0 font-normal", children: ["\u00B7 ", item.note] }))] }));
 }
 /* The × is React Aria's `remove` slot: it removes THIS chip and never presses it, so
    removing a pressable chip does not also choose it. */

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

@@ -1,4 +1,2 @@
 export { StatusDot, Tag } from "./Tag.js";
 export { type TagItem, Tags } from "./Tags.js";
-export { type TagOption } from "./choices.js";
-export { TagsField, type TagsFieldProps } from "./TagsField.js";

package/dist/primitives/tag/index.js

@@ -3,6 +3,3 @@ export { StatusDot, Tag } from "./Tag.js";
 /* La tira de fichas: la misma en la barra, en el desplegable y en cualquier
    lugar donde se dibuje una lista de palabras cortas. */
 export { Tags } from "./Tags.js";
-/* El many2many: las fichas elegidas más una entrada que agrega la siguiente. */
-export {} from "./choices.js";
-export { TagsField } from "./TagsField.js";

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/tokens.css

@@ -630,6 +630,28 @@
      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;
+
+  /* What appears only if waiting takes long enough to be seen: a skeleton. A read that
+     answers in 150ms showed a skeleton for one frame — a flash that says «something broke»
+     more than «loading». It waits 200ms invisible, then fades in. */
+  --animate-reveal-late: reveal var(--duration-quick) var(--ease-out) 200ms both;
+}
+
+@keyframes reveal {
+  from {
+    opacity: 0;
+  }
+}
+
+/* The focus ring ARRIVES: it closes in from a little farther out while it takes its colour,
+   in 160ms. A ring that pops is found; one that moves is found before the eye looks for it.
+   Only on the controls a person moves through — a dialog or a popover that takes the focus to
+   be announced keeps its own entrance — and only with motion allowed. */
+@keyframes focus-in {
+  from {
+    outline-offset: 5px;
+    outline-color: transparent;
+  }
 }
 
 /* The segment is two fifths of its track: from just off the left edge (-100 % of
@@ -924,6 +946,26 @@
     font-variant-numeric: tabular-nums;
   }
 
+  @media (prefers-reduced-motion: no-preference) {
+    :where(
+      button,
+      a[href],
+      input,
+      textarea,
+      select,
+      summary,
+      [role="tab"],
+      [role="option"],
+      [role="gridcell"],
+      [role="row"],
+      [role="checkbox"],
+      [role="radio"],
+      [role="switch"]
+    ):focus-visible {
+      animation: focus-in var(--duration-quick) var(--ease-out);
+    }
+  }
+
   /* Thin and warm scrollbars. With six panels open, six grey system bars are
      six stripes that say nothing. */
   * {

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;
@@ -108,9 +120,16 @@ export type ListProps<T extends object> = {
      *  actions — a list to read, like the lines of a record in view mode. One switch, so whoever
      *  passes the handlers generically does not have to strip them one by one. */
     readOnly?: boolean;
-    /** Los tres estados, en un solo lugar. */
+    /** Los estados del conjunto, en un solo lugar.
+     *
+     *  `loading` es la PRIMERA lectura: no hay filas todavía, y se dibuja el esqueleto.
+     *  `refreshing` es volver a preguntar con filas en la mano —se tipeó en la búsqueda, se
+     *  cambió de página—: las filas se quedan y una barra discreta dice que se está
+     *  preguntando. Cambiarlas por un esqueleto en cada pregunta hacía parpadear la tabla, y un
+     *  clic podía caer sobre una fila que ya no estaba. */
     state?: {
         loading?: boolean;
+        refreshing?: boolean;
         error?: string | null;
     };
     /** Vacía POR UN FILTRO es otra situación: no falta contenido, sobra un
@@ -138,5 +157,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;