@sincpro/web-ui 1.1.0 → 1.2.0

package/dist/components/search/SearchBar.js

@@ -381,7 +381,12 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
                             onCriteriaChange([]);
                             setOpenGroup(null);
                             input.current?.focus();
-                        }, "aria-label": copy.search.clearAll, title: copy.search.clearAll, className: `my-0.5 inline-flex h-(--size-control-sm) shrink-0 items-center rounded-control px-1.5 transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${bySurface(sup, "text-muted hover:bg-ink/5 hover:text-ink", "text-chrome-muted hover:bg-chrome-ink/10 hover:text-chrome-ink")}`, children: _jsx(X, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true }) })), columns.length === 0 && onOpenBuilder === undefined ? null : (_jsxs("button", { type: "button", onClick: () => setPanel((v) => !v), "aria-expanded": panel, "aria-controls": panel ? id : undefined, title: copy.search.tools, className: `my-0.5 mr-0.5 inline-flex h-(--size-control-sm) shrink-0 items-center gap-1 rounded-control border px-2 text-micro transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${puestos > 0 || panel
+                        }, "aria-label": copy.search.clearAll, title: copy.search.clearAll, className: `my-0.5 inline-flex h-(--size-control-sm) shrink-0 items-center rounded-control px-1.5 transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${bySurface(sup, "text-muted hover:bg-ink/5 hover:text-ink", "text-chrome-muted hover:bg-chrome-ink/10 hover:text-chrome-ink")}`, children: _jsx(X, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true }) })), columns.length === 0 && onOpenBuilder === undefined ? null : (_jsxs("button", { type: "button", onClick: () => setPanel((v) => !v), "aria-expanded": panel, "aria-controls": panel ? id : undefined, "aria-label": puestos === 0
+                            ? copy.search.tools
+                            : fillCopy(puestos === 1 ? copy.search.toolsSetOne : copy.search.toolsSetMany, {
+                                label: copy.search.tools,
+                                count: puestos.toLocaleString(copy.locale),
+                            }), title: copy.search.tools, className: `my-0.5 mr-0.5 inline-flex h-(--size-control-sm) shrink-0 items-center gap-1 rounded-control border px-2 text-micro transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${puestos > 0 || panel
                             ? bySurface(sup, "border-accent/40 bg-accent/18 text-ink", "border-chrome-link/35 bg-chrome-link/15 text-chrome-link")
                             : bySurface(sup, "border-transparent text-muted hover:bg-ink/5 hover:text-ink", "border-transparent text-chrome-muted hover:bg-chrome-ink/10 hover:text-chrome-ink")}`, children: [_jsx(ListFilter, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true }), puestos > 0 ? _jsx("span", { className: "text-micro tabular-nums", children: puestos }) : null] }))] }), trailing, open ? (_jsxs("div", { className: `absolute top-full z-30 mt-1 overflow-hidden rounded-panel border border-line-strong bg-surface shadow-float ${asTags ? "left-0 w-max max-w-full" : "right-0 left-0"}`, children: [openJoin === undefined ? null : (_jsxs("div", { className: "flex items-center gap-1.5 border-line border-b px-3 py-1.5 text-micro text-muted", children: [_jsx(CornerDownRight, { className: "size-3 shrink-0", strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: "min-w-0 truncate", children: copy.search.landsHere }), _jsx("span", { className: "shrink-0 rounded-pill border border-accent/40 bg-accent/18 px-1.5 text-ink", children: copy.search.joins[openJoin === "not" ? "none" : openJoin] })] })), asTags ? (
                     /* UNA LISTA, no una tira. Se está ELIGIENDO: el ojo baja por una

package/dist/foundations/copy.d.ts

@@ -125,6 +125,10 @@ export type UiCopy = {
     };
     search: {
         tools: string;
+        /** The name of the panel button once something is set: it shows the count, and what
+         *  the button SHOWS has to be inside its name (WCAG 2.5.3) — `{label}` is `tools`. */
+        toolsSetOne: string;
+        toolsSetMany: string;
         editChip: string;
         editNamed: string;
         removeChip: string;

package/dist/foundations/copy.es.js

@@ -127,6 +127,8 @@ export const SPANISH_COPY = {
     },
     search: {
         tools: "Filtrar, agrupar y favoritos",
+        toolsSetOne: "{label}, {count} puesto",
+        toolsSetMany: "{label}, {count} puestos",
         editChip: "Clic para editar",
         editNamed: "Editar {label}",
         removeChip: "Quitar {label}: {value}",

package/dist/foundations/copy.js

@@ -90,6 +90,8 @@ export const ENGLISH_COPY = {
     },
     search: {
         tools: "Filter, group and favorites",
+        toolsSetOne: "{label}, {count} applied",
+        toolsSetMany: "{label}, {count} applied",
         editChip: "Click to edit",
         editNamed: "Edit {label}",
         removeChip: "Remove {label}: {value}",

package/dist/primitives/table/DataTable.js

@@ -6,6 +6,7 @@ import { CellCopy } from "./CellCopy.js";
 import { CellEditor } from "./CellEditor.js";
 import { EditRow, firstControl } from "./EditableTable.js";
 import { RowActions } from "./RowActions.js";
+import { useRowWindow } from "./rowWindow.js";
 import { SelectBox, Table, Td, Th, THead, Tr, } from "./Table.js";
 import { aggregationFns, columnGroupingFeature, createColumnHelper, createExpandedRowModel, createGroupedRowModel, createSortedRowModel, rowAggregationFeature, rowExpandingFeature, rowSortingFeature, sortFns, tableFeatures, useTable, } from "@tanstack/react-table";
 import { ChevronRight, Plus } from "lucide-react";
@@ -258,6 +259,14 @@ export function DataTable({ data, columns, getRowId, sort, onSortChange, levels,
             return true;
         });
     const selecting = onSelectedChange !== undefined;
+    const width = columns.length + (selecting ? 1 : 0) + (rowActions === undefined ? 0 : 1);
+    /* Past a few hundred rows only the ones in view are drawn — see `rowWindow.tsx`. It
+       windows what is DRAWN, group rows included and folded rows left out: that is the
+       sequence a person scrolls through. */
+    const view = useRowWindow({
+        count: drawn.length,
+        getKey: (i) => drawn[i]?.id ?? String(i),
+    });
     const leaves = useMemo(() => rows.filter((r) => r.subRows.length === 0), [rows]);
     /* The aggregates are computed by the component and not by TanStack: its
        `aggregationFn` lives in the GROUP model, and a footer exists precisely when
@@ -273,8 +282,20 @@ export function DataTable({ data, columns, getRowId, sort, onSortChange, levels,
             n.delete(id);
         onSelectedChange?.(n);
     }
-    const grid = (_jsxs(Table, { height: height, children: [_jsxs(THead, { children: [selecting ? (_jsx(Th, { width: 36, children: _jsx(SelectBox, { label: copy.selection.all, checked: all, indeterminate: some, onChange: (v) => onSelectedChange?.(v ? new Set(leaves.map((r) => r.id)) : new Set()) }) })) : null, columns.map((c) => (_jsx(Th, { sortKey: c.sortable === false ? undefined : c.id, sort: sort, onSort: onSortChange, numeric: c.numeric, width: c.width, children: c.header }, c.id))), rowActions === undefined ? null : _jsx(Th, { width: 1, children: "" })] }), _jsxs("tbody", { children: [drawn.map((row) => {
+    const grid = (_jsxs(Table, { height: height, ...(view.on
+            ? {
+                rowCount: 1 + drawn.length + (draft === null ? 0 : 1) + (totals ? 1 : 0),
+            }
+            : {}), children: [_jsxs(THead, { ...(view.on ? { rowIndex: 1 } : {}), children: [selecting ? (_jsx(Th, { width: 36, children: _jsx(SelectBox, { label: copy.selection.all, checked: all, indeterminate: some, onChange: (v) => onSelectedChange?.(v ? new Set(leaves.map((r) => r.id)) : new Set()) }) })) : null, columns.map((c) => (_jsx(Th, { sortKey: c.sortable === false ? undefined : c.id, sort: sort, onSort: onSortChange, numeric: c.numeric, width: c.width, children: c.header }, c.id))), rowActions === undefined ? null : _jsx(Th, { width: 1, children: "" })] }), _jsxs("tbody", { ref: view.body.ref, children: [view.rows.flatMap((slot, at) => {
+                        const row = drawn[slot.index];
+                        if (row === undefined)
+                            return [];
                         const isGroup = row.subRows.length > 0;
+                        const windowed = view.windowed(slot.index);
+                        /* What is not drawn between the previous drawn row and this one: the rows
+                           above the view before the first, and the gap before a row kept only because
+                           it has the focus. */
+                        const gap = view.pad(at === 0 ? 0 : view.rows[at - 1].end, slot.start, width, `\u0000pad${slot.index}`);
                         if (isGroup) {
                             const path = pathOf(row);
                             const key = pathKey(path);
@@ -287,22 +308,27 @@ export function DataTable({ data, columns, getRowId, sort, onSortChange, levels,
                             const open = collapsed === undefined
                                 ? row.getIsExpanded()
                                 : collapsed.includes(key) !== true;
-                            return (
-                            /* The group row: it spans the whole width, says which value it
-                               groups by and how many are inside. The counter is what makes it
-                               useful without opening it. */
-                            _jsx("tr", { className: "border-b border-line bg-ground", children: _jsx("td", { colSpan: columns.length + (selecting ? 1 : 0) + (rowActions === undefined ? 0 : 1), className: "px-3 py-1.5", style: depth === 0
-                                        ? undefined
-                                        : { paddingLeft: `calc(var(--spacing-indent) * ${depth} + 0.75rem)` }, children: _jsxs("button", { type: "button", onClick: () => onGroupToggle === undefined ? row.toggleExpanded() : onGroupToggle(key), "aria-expanded": open, className: "inline-flex items-center gap-1.5 rounded-control text-meta font-medium text-ink transition-colors duration-(--duration-instant) hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: [_jsx(ChevronRight, { className: `size-(--size-icon-sm) text-muted transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true }), level === undefined ? null : (_jsx("span", { className: "text-micro font-normal text-muted/70", children: level.label })), _jsx("span", { children: level === undefined ? value : level.labelOf(value) }), _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: row.getLeafRows().length.toLocaleString(copy.locale) })] }) }) }, row.id));
+                            return [
+                                gap,
+                                /* The group row: it spans the whole width, says which value it
+                                   groups by and how many are inside. The counter is what makes it
+                                   useful without opening it. */
+                                _jsx("tr", { ...windowed, className: "border-b border-line bg-ground", children: _jsx("td", { colSpan: width, className: "px-3 py-1.5", style: depth === 0
+                                            ? undefined
+                                            : { paddingLeft: `calc(var(--spacing-indent) * ${depth} + 0.75rem)` }, children: _jsxs("button", { type: "button", onClick: () => onGroupToggle === undefined ? row.toggleExpanded() : onGroupToggle(key), "aria-expanded": open, className: "inline-flex items-center gap-1.5 rounded-control text-meta font-medium text-ink transition-colors duration-(--duration-instant) hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: [_jsx(ChevronRight, { className: `size-(--size-icon-sm) text-muted transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true }), level === undefined ? null : (_jsx("span", { className: "text-micro font-normal text-muted/70", children: level.label })), _jsx("span", { children: level === undefined ? value : level.labelOf(value) }), _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: row.getLeafRows().length.toLocaleString(copy.locale) })] }) }) }, row.id),
+                            ];
                         }
                         const original = row.original;
-                        return (_jsxs(Tr, { selected: selected?.has(row.id) === true, onClick: onRowClick === undefined ? undefined : () => onRowClick(original), children: [selecting ? (_jsx(Td, { children: _jsx(SelectBox, { label: copy.selection.row, checked: selected?.has(row.id) === true, onChange: (v) => toggle(row.id, v) }) })) : null, columns.map((c) => {
-                                    const t = c.tone?.(original);
-                                    const n = c.note?.(original);
-                                    const edit = c.edit?.when?.(original) === false ? undefined : c.edit;
-                                    return (_jsx(Td, { numeric: c.numeric, mono: c.mono === true, ...(t === undefined ? {} : { tone: t }), ...(n === undefined ? {} : { title: n }), children: edit !== undefined ? (_jsx(CellEditor, { label: fillCopy(copy.inlineEdit.editCell, { column: c.header }), numeric: c.numeric === true, editor: (done) => edit.render(original, done), children: drawCell(copy, c, original) })) : copyable && c.copy !== false ? (_jsx(CellCopy, { header: c.header, numeric: c.numeric === true, ...(c.copy === undefined ? {} : { value: c.copy(original) }), children: drawCell(copy, c, original) })) : (drawCell(copy, c, original)) }, c.id));
-                                }), rowActions === undefined ? null : (_jsx(RowActions, { actions: rowActions(original) }))] }, row.id));
-                    }), create === undefined || draft === null ? null : (_jsxs(EditRow, { as: "tr", rowId: "\\u0000draft", rowRef: (node) => {
+                        return [
+                            gap,
+                            _jsxs(Tr, { ...(windowed === undefined ? {} : { windowed }), selected: selected?.has(row.id) === true, onClick: onRowClick === undefined ? undefined : () => onRowClick(original), children: [selecting ? (_jsx(Td, { children: _jsx(SelectBox, { label: copy.selection.row, checked: selected?.has(row.id) === true, onChange: (v) => toggle(row.id, v) }) })) : null, columns.map((c) => {
+                                        const t = c.tone?.(original);
+                                        const n = c.note?.(original);
+                                        const edit = c.edit?.when?.(original) === false ? undefined : c.edit;
+                                        return (_jsx(Td, { numeric: c.numeric, mono: c.mono === true, ...(t === undefined ? {} : { tone: t }), ...(n === undefined ? {} : { title: n }), children: edit !== undefined ? (_jsx(CellEditor, { label: fillCopy(copy.inlineEdit.editCell, { column: c.header }), numeric: c.numeric === true, editor: (done) => edit.render(original, done), children: drawCell(copy, c, original) })) : copyable && c.copy !== false ? (_jsx(CellCopy, { header: c.header, numeric: c.numeric === true, ...(c.copy === undefined ? {} : { value: c.copy(original) }), children: drawCell(copy, c, original) })) : (drawCell(copy, c, original)) }, c.id));
+                                    }), rowActions === undefined ? null : (_jsx(RowActions, { actions: rowActions(original) }))] }, row.id),
+                        ];
+                    }), view.tail(width), create === undefined || draft === null ? null : (_jsxs(EditRow, { as: "tr", rowId: "\\u0000draft", rowRef: (node) => {
                             draftRow.current = node;
                         }, editable: true, editing: true, tabbable: false, className: "group/row", onStart: () => { }, onCommit: saveDraft, onCancel: () => {
                             backToAdd.current = true;
@@ -318,7 +344,7 @@ export function DataTable({ data, columns, getRowId, sort, onSortChange, levels,
                         }, children: [selecting ? _jsx("td", { className: DRAFT_CELL }) : null, columns.map((c) => (_jsx("td", { ...(c.input === undefined ? {} : { "data-edit": "" }), className: `${DRAFT_CELL} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: c.input?.(draft, (next) => {
                                     touched.current = true;
                                     create.onChange(next);
-                                }) ?? null }, c.id))), rowActions === undefined ? null : _jsx("td", { className: DRAFT_CELL })] }))] }), footer === null ? null : (_jsx("tfoot", { className: "sticky bottom-0 z-10 bg-ground", children: _jsxs("tr", { className: "border-t border-line-strong", children: [selecting ? _jsx("td", {}) : null, columns.map((c, i) => {
+                                }) ?? null }, c.id))), rowActions === undefined ? null : _jsx("td", { className: DRAFT_CELL })] }))] }), footer === null ? null : (_jsx("tfoot", { className: "sticky bottom-0 z-10 bg-ground", children: _jsxs("tr", { className: "border-t border-line-strong", "aria-rowindex": view.on ? 2 + drawn.length + (draft === null ? 0 : 1) : undefined, children: [selecting ? _jsx("td", {}) : null, columns.map((c, i) => {
                             const value = footer[i] ?? null;
                             return (_jsx("td", { className: `px-3 py-1.5 text-meta font-semibold text-ink ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: i === 0 && value === null ? (_jsxs("span", { className: "text-muted", children: [data.length.toLocaleString(copy.locale), " ", data.length === 1 ? copy.table.row : copy.table.rows] })) : value === null ? null : (aggregateLabel(copy, c, value)) }, c.id));
                         }), rowActions === undefined ? null : _jsx("td", {})] }) }))] }));

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, 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 }) }));
 }
 /** 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.

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/package.json

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