@sincpro/web-ui 1.1.0 → 1.3.0

package/dist/primitives/table/EditableTable.js

@@ -50,7 +50,7 @@ function says(node) {
 /** The label of a group band — its field, its value, how many rows it holds. The same
  *  in the table's band and the stacked list's. */
 function pileTag(pile, locale) {
-    return (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "shrink-0 text-micro text-muted/70", children: pile.field }), _jsx("span", { className: "truncate text-micro font-medium text-ink", children: pile.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: pile.count.toLocaleString(locale) })] }));
+    return (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "shrink-0 text-micro text-muted", children: pile.field }), _jsx("span", { className: "truncate text-micro font-medium text-ink", children: pile.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: pile.count.toLocaleString(locale) })] }));
 }
 /** The focus ring of an operable row: drawn on the row, inset, so it is not cut by the
  *  box and does not move the cells. */
@@ -602,7 +602,7 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
                         return null;
                     return (_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-meta", children: [_jsx("dt", { className: "text-muted", children: c.header }), _jsx("dd", { className: "font-semibold text-ink tabular-nums", children: total })] }, c.id));
                 }) }))] }));
-    return (_jsxs("div", { ref: frame, className: "min-w-0", children: [_jsx("div", { ref: box.ref, className: `min-w-0 ${box.className}`, style: box.style, children: stacked ? (list) : (_jsxs("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", children: [_jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsxs("tr", { children: [reorderable ? _jsx("th", { className: "w-0 border-b border-line-strong" }) : null, columns.map((c) => (_jsx("th", { scope: "col", style: c.width === undefined ? undefined : { width: c.width }, className: `border-b border-line-strong ${HEADER_TEXT} ${cell} ${c.numeric === true ? "text-right" : "text-left"}`, children: c.header }, c.id))), onRemove === undefined ? null : (_jsx("th", { className: "w-0 border-b border-line-strong" }))] }) }), _jsx("tbody", { ...(reorderable
+    return (_jsxs("div", { ref: frame, className: "min-w-0", children: [_jsx("div", { ref: box.ref, tabIndex: box.tabIndex, className: `min-w-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary ${box.className}`, style: box.style, children: stacked ? (list) : (_jsxs("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", children: [_jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsxs("tr", { children: [reorderable ? _jsx("td", { className: "w-0 border-b border-line-strong" }) : null, columns.map((c) => c.header === "" ? (_jsx("td", { className: "w-0 border-b border-line-strong" }, c.id)) : (_jsx("th", { scope: "col", style: c.width === undefined ? undefined : { width: c.width }, className: `border-b border-line-strong ${HEADER_TEXT} ${cell} ${c.numeric === true ? "text-right" : "text-left"}`, children: c.header }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "w-0 border-b border-line-strong" }))] }) }), _jsx("tbody", { ...(reorderable
                                 ? {
                                     onDragOver: overRow,
                                     onDrop: (event) => {

package/dist/primitives/table/ReportTable.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { currentCopyLocale, fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
 import { stickyTop, useScrollBox } from "../../foundations/sticky.js";
 import { HEADER_TEXT } from "./Table.js";
@@ -44,11 +44,12 @@ const SKIN = {
     },
 };
 function Amount({ value, format }) {
+    const { locale } = useUiCopy();
     if (value === null)
         return _jsx("span", { className: "text-line-strong", children: "\u00B7" });
     const zero = value === 0;
     const negative = value < 0;
-    return (_jsx("span", { className: `tabular-nums ${zero ? "text-muted" : negative ? "text-bad" : "text-ink"}`, children: format === undefined ? amountFormat(currentCopyLocale()).format(value) : format(value) }));
+    return (_jsx("span", { className: `tabular-nums ${zero ? "text-muted" : negative ? "text-bad" : "text-ink"}`, children: format === undefined ? amountFormat(locale).format(value) : format(value) }));
 }
 function ReportLine({ row, columns, open, onToggle, compact, }) {
     const copy = useUiCopy();
@@ -103,5 +104,5 @@ defaultOpen, caption, height, }) {
        desplazamiento de la barra y quedaba empujado 68 px hacia adentro de su
        propia caja — banda en blanco arriba y títulos de columna cayendo entre
        las filas. */
-    _jsx("div", { ref: caja.ref, className: `min-w-0 ${caja.className}`, style: caja.style, children: _jsxs("table", { className: "w-full border-collapse px-1", children: [caption === undefined ? null : (_jsx("caption", { className: `text-left text-meta text-muted ${byDensity(d, "px-3 pb-2", "px-2 pb-1.5")}`, children: caption })), _jsx("thead", { className: "sticky z-20 bg-ground", style: stickyTop, children: _jsxs("tr", { className: "border-b border-line-strong", children: [_jsx("th", { className: `sticky left-0 z-10 bg-ground text-left ${compact ? "px-2 py-1.5" : "px-3 py-2"}`, children: _jsx("span", { className: "sr-only", children: copy.report.concept }) }), columns.map((c) => (_jsx("th", { scope: "col", className: `text-right ${HEADER_TEXT} ${compact ? "px-2 py-1.5" : "px-3 py-2"}`, children: c.header }, c.id))), _jsx("th", { className: "w-0" })] }) }), _jsx("tbody", { children: rows.map((r) => (_jsx(ReportLine, { row: r, columns: columns, open: open, onToggle: toggle, compact: compact }, r.id))) })] }) }));
+    _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: _jsxs("table", { className: "w-full border-collapse px-1", children: [caption === undefined ? null : (_jsx("caption", { className: `text-left text-meta text-muted ${byDensity(d, "px-3 pb-2", "px-2 pb-1.5")}`, children: caption })), _jsx("thead", { className: "sticky z-20 bg-ground", style: stickyTop, children: _jsxs("tr", { className: "border-b border-line-strong", children: [_jsx("th", { className: `sticky left-0 z-10 bg-ground text-left ${compact ? "px-2 py-1.5" : "px-3 py-2"}`, children: _jsx("span", { className: "sr-only", children: copy.report.concept }) }), columns.map((c) => (_jsx("th", { scope: "col", className: `text-right ${HEADER_TEXT} ${compact ? "px-2 py-1.5" : "px-3 py-2"}`, children: c.header }, c.id))), _jsx("td", { className: "w-0" })] }) }), _jsx("tbody", { children: rows.map((r) => (_jsx(ReportLine, { row: r, columns: columns, open: open, onToggle: toggle, compact: compact }, r.id))) })] }) }));
 }

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.d.ts

@@ -1,4 +1,5 @@
 import type { Tone } from "../../foundations/types.js";
+import type { WindowedRow } from "./rowWindow.js";
 import { type ReactNode } from "react";
 export type SortDirection = "asc" | "desc";
 export interface SortState {
@@ -8,17 +9,23 @@ export interface SortState {
 export declare function Table({ children, 
 /** With a height, the table scrolls on its own and the header sticks.
  *  Without a height, the page scrolls and the header goes away. */
-height, }: {
+height, rowCount, }: {
     children: ReactNode;
     /** A number means pixels; a string goes through as is, so `26rem` follows the
      *  system scale instead of pinning a size in pixels. */
     height?: number | string;
+    /** How many rows the table REALLY has, header and footer included, when it draws only
+     *  some of them (`useRowWindow`): a screen reader says «row 412 of 3 000» and not
+     *  «row 12 of 40». Leave it out when every row is drawn. */
+    rowCount?: number;
 }): import("react").JSX.Element;
 /** 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. */
 export declare const HEADER_TEXT = "text-meta font-semibold whitespace-nowrap text-ink";
-export declare function THead({ children }: {
+export declare function THead({ children, rowIndex, }: {
     children: ReactNode;
+    /** Its `aria-rowindex`, set only when the table says its `rowCount`. */
+    rowIndex?: number;
 }): import("react").JSX.Element;
 /** A column. If it gets a `sortKey`, it can be sorted.
  *
@@ -42,10 +49,12 @@ export declare function Th({ children, sortKey, sort, onSort, numeric, align, wi
      *  system scale instead of pinning a size in pixels. */
     width?: number | string;
 }): import("react").JSX.Element;
-export declare function Tr({ children, onClick, selected, }: {
+export declare function Tr({ children, onClick, selected, windowed, }: {
     children: ReactNode;
     onClick?: () => void;
     selected?: boolean;
+    /** Set by a table that draws only the rows in view (`useRowWindow`). */
+    windowed?: WindowedRow;
 }): import("react").JSX.Element;
 /**
  * A row that opens its own detail underneath.

package/dist/primitives/table/Table.js

@@ -6,25 +6,25 @@ import { createContext, useContext, useId } from "react";
 export function Table({ children, 
 /** With a height, the table scrolls on its own and the header sticks.
  *  Without a height, the page scrolls and the header goes away. */
-height, }) {
+height, rowCount, }) {
     const caja = useScrollBox(height === undefined ? {} : { height });
     return (
     /* Cuándo esta caja es un contenedor de scroll y cuándo no lo decide
        `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", { 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. */
 export const HEADER_TEXT = "text-meta font-semibold whitespace-nowrap text-ink";
-export function THead({ children }) {
+export function THead({ children, rowIndex, }) {
     return (
     /* Se pega DEBAJO de lo que ya esté pegado —la barra de la aplicación y la
        de la lista— y no en `top: 0`, que lo metía atrás de las dos. Sin alto en
        `Table` el que scrollea es la página, y ahí la diferencia es justamente
        la que hacía desaparecer los nombres de columna. Ver `system/sticky.tsx`. */
-    _jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsx("tr", { children: children }) }));
+    _jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsx("tr", { "aria-rowindex": rowIndex, children: children }) }));
 }
 /** A column. If it gets a `sortKey`, it can be sorted.
  *
@@ -59,8 +59,8 @@ const ROW_ON = "bg-primary/8";
 function rowWash({ selected, interactive }) {
     return selected ? ROW_ON : interactive ? ROW_WASH : "";
 }
-export function Tr({ children, onClick, selected = false, }) {
-    return (_jsx(RowMark.Provider, { value: { selected, interactive: onClick !== undefined }, children: _jsx("tr", { onClick: onClick, className: `group/row ${onClick === undefined ? "" : "cursor-pointer"}`, children: children }) }));
+export function Tr({ children, onClick, selected = false, windowed, }) {
+    return (_jsx(RowMark.Provider, { value: { selected, interactive: onClick !== undefined }, children: _jsx("tr", { ...windowed, onClick: onClick, className: `group/row ${onClick === undefined ? "" : "cursor-pointer"}`, children: children }) }));
 }
 /**
  * A row that opens its own detail underneath.
@@ -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/table/rowWindow.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode, type RefObject } from "react";
+/** From how many rows the table draws only the ones in view. */
+export declare const WINDOW_FROM = 200;
+/** What a drawn row has to carry: spread on its `<tr>`. */
+export type WindowedRow = {
+    ref: (node: HTMLTableRowElement | null) => void;
+    "data-index": number;
+    "aria-rowindex": number;
+    onFocus: () => void;
+};
+/**
+ * Which rows of `count` to draw. Spread `body` on the `<tbody>`, draw `rows` in the
+ * order given — `windowed(i)` on each one's `<tr>` — with `pad(...)` between them, and
+ * pass `rowCount` to the table.
+ *
+ * `rowsBefore` is how many rows the table has above the body (the header), so the
+ * `aria-rowindex` of the rows counts from there.
+ */
+export declare function useRowWindow({ count, rowsBefore, getKey, }: {
+    count: number;
+    rowsBefore?: number;
+    getKey: (index: number) => string;
+}): {
+    on: boolean;
+    body: {
+        ref: RefObject<HTMLTableSectionElement | null>;
+    };
+    /** The indices to draw, in order. All of them when the window is off. */
+    rows: readonly {
+        index: number;
+        start: number;
+        end: number;
+    }[];
+    windowed: (index: number) => WindowedRow | undefined;
+    /** The spacer that stands for the rows not drawn before `start`. */
+    pad: (from: number, to: number, columns: number, key: string) => ReactNode;
+    /** The spacer after the last drawn row. */
+    tail: (columns: number) => ReactNode;
+};

package/dist/primitives/table/rowWindow.js

@@ -0,0 +1,177 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useVirtualizer, useWindowVirtualizer } from "@tanstack/react-virtual";
+import { useLayoutEffect, useRef, useState } from "react";
+/* ==================================================================== *
+ *  ROW WINDOW — the rows of a `<table>` that are worth drawing.
+ *
+ *  Context: `DataTable` drew every row it got. A page of eighty is nothing; a
+ *  «load more» that reached three thousand was three thousand rows of cells,
+ *  copy buttons and editors, and the tab froze. web-framework put a ceiling on
+ *  «load more» and kept the pages BECAUSE of it. This is what lifts the ceiling.
+ *
+ *  ── It stays a `<table>` ────────────────────────────────────────────
+ *
+ *  `SheetTable` positions `<div>` rows absolutely. A list cannot: its columns
+ *  size themselves from the content, its header sticks with `position: sticky`
+ *  and its rows carry the row semantics a screen reader walks. So the rows that
+ *  are NOT drawn become one spacer row above and one below — real height, no
+ *  content, `aria-hidden` —, and the table says how many rows it really has
+ *  (`aria-rowcount`) and where each drawn one sits (`aria-rowindex`).
+ *
+ *  ── The scroller is found, not declared ─────────────────────────────
+ *
+ *  A list inside `AppFrame` scrolls with the PAGE — that is what keeps the
+ *  application bar, the list bar and the header stuck one under the other. The
+ *  same list inside a composer panel or a `Peek` scrolls inside THAT box, and a
+ *  `DataTable` with `height` scrolls inside its own. The nearest ancestor that
+ *  really scrolls vertically is the one; none means the page. Giving the table a
+ *  scroll box of its own instead would break the sticky stack — the trap
+ *  AGENTS.md writes down for `overflow-hidden`.
+ *
+ *  ── Only past a size ────────────────────────────────────────────────
+ *
+ *  Under `WINDOW_FROM` rows everything is drawn, as before: the browser's find,
+ *  printing and a row that is always there are worth more than the few
+ *  milliseconds saved on a page of eighty. Over it, the find of the browser only
+ *  sees what is drawn — the search bar is how a set that large is searched.
+ *
+ *  ── What has focus stays drawn ──────────────────────────────────────
+ *
+ *  A cell being edited, a copy button just pressed: if its row scrolled out and
+ *  got unmounted, the focus would fall to `<body>` and the popover with it. The
+ *  last row that took focus is always kept in the window, wherever it is.
+ *  Tabbing forward works without help: the next row is in the overscan, the
+ *  browser scrolls it into view, and the window follows.
+ * ==================================================================== */
+/** From how many rows the table draws only the ones in view. */
+export const WINDOW_FROM = 200;
+/** A first guess of a row's height; each drawn row is measured after. */
+const ESTIMATE = 36;
+/** Rows drawn beyond each edge of the view. */
+const OVERSCAN = 10;
+/** Rows drawn before the scroller is known — the first frame only. */
+const FIRST_FRAME = 40;
+/** The nearest ancestor that scrolls vertically, or the page. */
+function scrollerOf(node) {
+    for (let el = node.parentElement; el !== null; el = el.parentElement) {
+        if (el === document.body || el === document.documentElement)
+            break;
+        const { overflowY } = getComputedStyle(el);
+        const scrolls = overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
+        /* A box that is `overflow-auto` only because the table is WIDER than it grows with
+           its content and never scrolls down: it is not the one. */
+        if (scrolls && el.scrollHeight > el.clientHeight + 1)
+            return el;
+    }
+    return "page";
+}
+/** Where the body starts inside the scroller's content — what the window counts from. */
+function offsetIn(body, scroller) {
+    const top = body.getBoundingClientRect().top;
+    if (scroller === "page")
+        return top + window.scrollY;
+    return top - scroller.getBoundingClientRect().top + scroller.scrollTop;
+}
+/**
+ * Which rows of `count` to draw. Spread `body` on the `<tbody>`, draw `rows` in the
+ * order given — `windowed(i)` on each one's `<tr>` — with `pad(...)` between them, and
+ * pass `rowCount` to the table.
+ *
+ * `rowsBefore` is how many rows the table has above the body (the header), so the
+ * `aria-rowindex` of the rows counts from there.
+ */
+export function useRowWindow({ count, rowsBefore = 1, getKey, }) {
+    const on = count >= WINDOW_FROM;
+    const body = useRef(null);
+    const [scroller, setScroller] = useState(null);
+    const [margin, setMargin] = useState(0);
+    const pinned = useRef(null);
+    /* Every render, before paint: which box scrolls and where the body starts in it. The
+       window re-renders on scroll, so what moves above the table — metrics that loaded,
+       chips that wrapped — is caught on the next one. Set only on a real change: each set
+       is one more render. No dependency list on purpose: what it measures is the layout,
+       which no prop of this hook describes; it settles because it sets only on a change. */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useLayoutEffect(() => {
+        const node = body.current;
+        if (!on || node === null)
+            return;
+        const found = scrollerOf(node);
+        if (found !== scroller)
+            setScroller(found);
+        const at = offsetIn(node, found);
+        if (Math.abs(at - margin) > 1)
+            setMargin(at);
+    });
+    const options = {
+        count,
+        estimateSize: () => ESTIMATE,
+        overscan: OVERSCAN,
+        scrollMargin: margin,
+        getItemKey: getKey,
+        rangeExtractor: (range) => {
+            const first = Math.max(0, range.startIndex - OVERSCAN);
+            const last = Math.min(count - 1, range.endIndex + OVERSCAN);
+            const out = [];
+            for (let i = first; i <= last; i += 1)
+                out.push(i);
+            const keep = pinned.current;
+            if (keep !== null && keep < count && (keep < first || keep > last)) {
+                out.push(keep);
+                out.sort((a, b) => a - b);
+            }
+            return out;
+        },
+    };
+    const inBox = useVirtualizer({
+        ...options,
+        enabled: on && scroller !== null && scroller !== "page",
+        getScrollElement: () => (scroller === null || scroller === "page" ? null : scroller),
+    });
+    const inPage = useWindowVirtualizer({
+        ...options,
+        enabled: on && scroller === "page",
+    });
+    const v = scroller === "page" ? inPage : inBox;
+    const all = () => Array.from({ length: count }, (_, index) => ({
+        index,
+        start: index * ESTIMATE,
+        end: (index + 1) * ESTIMATE,
+    }));
+    /* The positions come back in the scroller's coordinates; the spacers live inside the
+       body, so they are counted from where it starts. */
+    const rows = !on
+        ? all()
+        : scroller === null
+            ? all().slice(0, FIRST_FRAME)
+            : v.getVirtualItems().map((item) => ({
+                index: item.index,
+                start: item.start - margin,
+                end: item.end - margin,
+            }));
+    const total = !on ? 0 : scroller === null ? count * ESTIMATE : v.getTotalSize();
+    const spacer = (height, columns, key) => height <= 0 ? null : (_jsx("tr", { "aria-hidden": true, style: { height }, children: _jsx("td", { colSpan: columns, className: "p-0" }) }, key));
+    return {
+        on,
+        body: { ref: body },
+        rows,
+        windowed: (index) => !on
+            ? undefined
+            : {
+                ref: scroller === null ? () => { } : v.measureElement,
+                "data-index": index,
+                "aria-rowindex": index + rowsBefore + 1,
+                onFocus: () => {
+                    pinned.current = index;
+                },
+            },
+        pad: (from, to, columns, key) => (on ? spacer(to - from, columns, key) : null),
+        tail: (columns) => {
+            if (!on)
+                return null;
+            const end = rows.length === 0 ? 0 : rows[rows.length - 1].end;
+            return spacer(total - end, columns, "\u0000tail");
+        },
+    };
+}

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";