@sincpro/web-ui 1.0.0 → 1.2.0

package/dist/components/search/SearchBar.d.ts

@@ -1,4 +1,5 @@
 import { type CriteriaJoin, type CriteriaPath, type SearchCriteria } from "./criteria.js";
+import type { BuiltCondition, BuiltFilter } from "./FilterBuilder.js";
 import type { ModelDefinition } from "./model.js";
 import type { Surface } from "../../foundations/types.js";
 import type { MenuGroup } from "../../primitives/menu/Menu.js";
@@ -70,6 +71,16 @@ export type SearchBarProps = {
      * obligar a buscar la que uno venía mirando entre doce.
      */
     onOpenBuilder?: (path?: CriteriaPath) => void;
+    /**
+     * The set's own search — what a free text means when it is not a question about one field:
+     * every field the set searches, at once (sincpro_framework's `LiteralSearch`, Odoo's «Search
+     * for: …»). Given the typed text, it returns what the chip asks; `null` offers nothing.
+     *
+     * With it, «Buscar «Globex»» is offered for every text. It goes FIRST — the one Enter takes —
+     * unless the model reads the text as a question of its own (an operator, a field's name, an
+     * enum's value, a number a numeric field answers): then that goes first and this after it.
+     */
+    literal?: (text: string) => BuiltCondition | BuiltFilter | null;
     /** Lo que va pegado al campo, a su derecha. */
     trailing?: ReactNode;
     /** How many facets the bar shows before folding the rest into «+N»; the grouping chain
@@ -78,4 +89,4 @@ export type SearchBarProps = {
     /** Por default la hereda de la superficie que la envuelve. */
     surface?: Surface;
 };
-export declare function SearchBar({ facets, model, criteria, onCriteriaChange, placeholder, filters, grouping, onOpenGroup, favorites, onFilterSelect, onFavoriteSelect, onOpenBuilder, trailing, collapseAfter, surface, }: SearchBarProps): import("react").JSX.Element;
+export declare function SearchBar({ facets, model, criteria, onCriteriaChange, placeholder, filters, grouping, onOpenGroup, favorites, onFilterSelect, onFavoriteSelect, onOpenBuilder, literal, trailing, collapseAfter, surface, }: SearchBarProps): import("react").JSX.Element;

package/dist/components/search/SearchBar.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { at, criteriaId, filterCriteria, removeAt, replaceAt, } from "./criteria.js";
 import { CriteriaChips } from "./CriteriaChips.js";
 import { describeCondition, opLabel, queryFields, readTyped, suggest, withoutValue, } from "./query.js";
-import { useUiCopy } from "../../foundations/copy.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
 import { bySurface, useSurface } from "../../foundations/surface.js";
 import { Tags } from "../../primitives/tag/Tags.js";
 import { ChevronRight, CornerDownRight, ListFilter, Search, SlidersHorizontal, X, } from "lucide-react";
@@ -28,7 +28,7 @@ function Group({ group, first, onSelect, }) {
                     ? "flex flex-col gap-0.5 pl-(--spacing-indent)"
                     : "flex flex-col gap-0.5", children: options }))] }));
 }
-export function SearchBar({ facets, model, criteria, onCriteriaChange, placeholder, filters, grouping, onOpenGroup, favorites, onFilterSelect, onFavoriteSelect, onOpenBuilder, trailing, collapseAfter, surface, }) {
+export function SearchBar({ facets, model, criteria, onCriteriaChange, placeholder, filters, grouping, onOpenGroup, favorites, onFilterSelect, onFavoriteSelect, onOpenBuilder, literal, trailing, collapseAfter, surface, }) {
     const copy = useUiCopy();
     const sup = useSurface(surface);
     const [text, setText] = useState("");
@@ -102,7 +102,7 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
         ...(step.field === undefined ? {} : { field: step.field }),
         ...(step.op === undefined ? {} : { op: step.op }),
         text,
-    }, fields);
+    }, fields, { literal: literal !== undefined });
     /* Lo escrito, ya leído: hace falta acá para saber si se está eligiendo un
        ATRIBUTO —lo que empieza con `#`— y dibujar fichas en vez de renglones. */
     const asked = readTyped(text);
@@ -155,12 +155,8 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
      * la lista si no. Es lo único que la barra decide sobre dónde van las cosas:
      * el resto lo decide quien tiene la lista.
      */
-    function commit(field, op, value) {
-        const one = filterCriteria(
-        /* El que no lleva valor viaja con `true`, que es lo que el motor espera de
-           «está vacío»: mandarle la cadena vacía sería preguntar por el campo que
-           vale "". */
-        { field: field.field, operator: op, value: withoutValue(op) ? true : value }, describeCondition(field, op, value));
+    /** A finished instance, where the next one goes: the end, or the group left open. */
+    function put(one) {
         onCriteriaChange(openGroup === null
             ? [...criteria, one]
             : replaceAt(criteria, openGroup, addTo(at(criteria, openGroup), one)));
@@ -168,6 +164,14 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
         setStep({});
         input.current?.focus();
     }
+    function commit(field, op, value) {
+        const one = filterCriteria(
+        /* El que no lleva valor viaja con `true`, que es lo que el motor espera de
+           «está vacío»: mandarle la cadena vacía sería preguntar por el campo que
+           vale "". */
+        { field: field.field, operator: op, value: withoutValue(op) ? true : value }, describeCondition(field, op, value));
+        put(one);
+    }
     /** Lo elegido en el desplegable, según de qué clase sea. */
     function pick(suggestion) {
         if (suggestion.kind === "field") {
@@ -199,6 +203,12 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
             input.current?.focus();
             return;
         }
+        if (suggestion.kind === "literal") {
+            const where = literal?.(suggestion.text) ?? null;
+            if (where !== null)
+                put(filterCriteria(where, fillCopy(copy.search.literalChip, { text: suggestion.text })));
+            return;
+        }
         commit(suggestion.field, suggestion.op, suggestion.value);
     }
     /** El nodo con una instancia más adentro. */
@@ -371,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
@@ -387,7 +402,7 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
                                         : {}),
                                 active: at === active,
                                 onSelect: () => pick(one),
-                            })) }) })) : (_jsx("div", { className: "p-1", children: suggestions.map((one, at) => (_jsxs("button", { type: "button", onClick: () => pick(one), onMouseEnter: () => setActive(at), className: `flex w-full items-baseline gap-1.5 rounded-control px-2 py-1.5 text-left text-meta transition-colors duration-(--duration-instant) ${at === active ? "bg-primary/8" : "hover:bg-ink/4"}`, children: [_jsx("span", { className: "shrink-0 font-medium text-ink", children: one.label }), one.kind === "condition" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "shrink-0 text-muted", children: ":" }), _jsx("span", { className: "min-w-0 truncate font-mono text-micro text-ink", children: one.hint })] })) : one.kind === "field" && one.hint !== undefined ? (_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 text-muted", children: one.hint })) : null] }, one.id))) }))] })) : null, panel && (columns.length > 0 || onOpenBuilder !== undefined) ? (_jsxs("div", { id: id, className: "absolute top-full right-0 z-30 mt-1 flex w-max max-w-full flex-wrap overflow-hidden rounded-panel border border-line-strong bg-surface shadow-float", children: [columns.map((c, i) => (_jsxs("div", { className: `flex min-w-48 flex-1 flex-col ${i === 0 ? "" : "border-t border-line sm:border-t-0 sm:border-l"}`, children: [_jsx("div", { className: "border-b border-line px-2.5 py-1.5 text-micro font-medium text-muted", children: c.title }), _jsx("div", { className: "flex flex-col gap-0.5 p-1", children: c.content ??
+                            })) }) })) : (_jsx("div", { className: "p-1", children: suggestions.map((one, at) => (_jsxs("button", { type: "button", onClick: () => pick(one), onMouseEnter: () => setActive(at), className: `flex w-full items-baseline gap-1.5 rounded-control px-2 py-1.5 text-left text-meta transition-colors duration-(--duration-instant) ${at === active ? "bg-primary/8" : "hover:bg-ink/4"}`, children: [_jsx("span", { className: "shrink-0 font-medium text-ink", children: one.label }), one.kind === "condition" || one.kind === "literal" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "shrink-0 text-muted", children: ":" }), _jsx("span", { className: "min-w-0 truncate font-mono text-micro text-ink", children: one.hint })] })) : one.kind === "field" && one.hint !== undefined ? (_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 text-muted", children: one.hint })) : null] }, one.id))) }))] })) : null, panel && (columns.length > 0 || onOpenBuilder !== undefined) ? (_jsxs("div", { id: id, className: "absolute top-full right-0 z-30 mt-1 flex w-max max-w-full flex-wrap overflow-hidden rounded-panel border border-line-strong bg-surface shadow-float", children: [columns.map((c, i) => (_jsxs("div", { className: `flex min-w-48 flex-1 flex-col ${i === 0 ? "" : "border-t border-line sm:border-t-0 sm:border-l"}`, children: [_jsx("div", { className: "border-b border-line px-2.5 py-1.5 text-micro font-medium text-muted", children: c.title }), _jsx("div", { className: "flex flex-col gap-0.5 p-1", children: c.content ??
                                     c.groups?.map((g, gi) => (_jsx(Group, { group: g, first: gi === 0, onSelect: c.onSelect }, g.label ?? gi))) })] }, c.title))), onOpenBuilder === undefined ? null : (_jsx("div", { className: "w-full border-t border-line p-1", children: _jsxs("button", { type: "button", onClick: () => {
                                 onOpenBuilder();
                                 setPanel(false);

package/dist/components/search/query.d.ts

@@ -122,6 +122,15 @@ export type QuerySuggestion =
     field: QueryField;
     op: string;
     value: string;
+}
+/** The set's own search over the text — every field it searches, at once. What it asks is
+ *  the consumer's (`SearchBar literal`): the bar only offers it and puts the chip. */
+ | {
+    kind: "literal";
+    id: string;
+    label: string;
+    hint: string;
+    text: string;
 };
 /** Cómo se llama un operador para quien lo lee. Sale de la copia, así que un
  *  operador que el servidor agregue aparece con su símbolo hasta que alguien le
@@ -139,17 +148,11 @@ export declare function withoutValue(op: string): boolean;
  * preguntan en el constructor, que tiene los dos campos.
  */
 export declare function withTwoValues(op: string): boolean;
-/**
- * Qué se ofrece ahora mismo.
- *
- * Es una sola lista y no tres pantallas: en el primer paso conviven los campos
- * que se llaman como lo tipeado —«nombr» → «nombre»— con las preguntas enteras
- * que lo tipeado ya permite armar —«test» en el nombre—. Quien escribe el nombre
- * de un campo quiere seguir por ahí; quien escribe un valor quiere preguntarlo
- * ya. Las dos intenciones se escriben igual, así que se ofrecen las dos, con los
- * campos primero: es el paso que todavía no decidió nada.
- */
-export declare function suggest(draft: QueryDraft, fields: readonly QueryField[]): QuerySuggestion[];
+export declare function suggest(draft: QueryDraft, fields: readonly QueryField[], 
+/** The set has a literal search (`SearchBar literal`): offer it for free text. */
+options?: {
+    literal?: boolean;
+}): QuerySuggestion[];
 /**
  * CÓMO SE LEE UNA CONDICIÓN, en un solo lugar.
  *

package/dist/components/search/query.js

@@ -97,6 +97,7 @@ export function readTyped(text) {
 export function globToLike(value) {
     return value.replace(/\*/g, "%");
 }
+const NUMERIC = new Set(["integer", "number", "float", "decimal", "monetary", "money"]);
 /** Qué clase de valor es un campo, leída del tipo que publica el modelo. */
 function kindOf(definition) {
     if (definition.kind === "relation")
@@ -104,7 +105,9 @@ function kindOf(definition) {
     if (definition.choices !== undefined && definition.choices.length > 0)
         return "choice";
     const type = definition.type.toLowerCase();
-    if (type === "integer" || type === "number" || type === "float")
+    /* An amount is a number: «decimal» and «monetary» read as text made «total <= 1000»
+       impossible to ask of an invoice. */
+    if (NUMERIC.has(type))
         return "number";
     if (type === "date" || type === "datetime")
         return "date";
@@ -265,7 +268,24 @@ function matches(field, text) {
  * ya. Las dos intenciones se escriben igual, así que se ofrecen las dos, con los
  * campos primero: es el paso que todavía no decidió nada.
  */
-export function suggest(draft, fields) {
+/**
+ * Whether the MODEL reads what was typed as a question of its own: an operator written in
+ * front («> 100»), the name of a field («estado»), a value of an enum («pagada»), or a number or
+ * a date that a field with order can answer. Plain text («Globex») is none of those — every
+ * text field «contains» it, which says nothing — so the literal search goes first for it.
+ */
+function readByModel(typed, byName, fields) {
+    if (typed.op !== undefined || byName.length > 0)
+        return true;
+    const value = typed.value.toLowerCase();
+    if (fields.some((field) => field.choices?.some((one) => one.toLowerCase() === value)))
+        return true;
+    return ((typed.shape === "number" || typed.shape === "date") &&
+        fields.some((field) => ORDERED.has(field.kind) && answers(field, typed)));
+}
+export function suggest(draft, fields, 
+/** The set has a literal search (`SearchBar literal`): offer it for free text. */
+options = {}) {
     const typed = readTyped(draft.text);
     /* Paso 3 — el campo y el operador ya están: falta el valor. */
     if (draft.field !== undefined && draft.op !== undefined) {
@@ -409,10 +429,23 @@ export function suggest(draft, fields) {
        hecha — salvo que lo tipeado sea también un valor razonable, que es
        justamente el caso de «test». */
     const named = new Set(byName.map((one) => (one.kind === "field" ? one.field.field : "")));
-    return [
+    const byModel = [
         ...byName,
         ...ready.filter((one) => one.kind !== "condition" || !named.has(one.field.field)),
     ];
+    if (options.literal !== true)
+        return byModel;
+    /* The literal search is always offered for text: what the model reads goes first, and
+       when it reads nothing, the literal search is what Enter takes. */
+    const text = draft.text.trim();
+    const literal = {
+        kind: "literal",
+        id: "l:literal",
+        label: currentCopy().search.literal,
+        hint: text,
+        text,
+    };
+    return readByModel(typed, byName, fields) ? [...byModel, literal] : [literal, ...byModel];
 }
 /**
  * CÓMO SE LEE UNA CONDICIÓN, en un solo lugar.

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;
@@ -182,6 +186,10 @@ export type UiCopy = {
         askField: string;
         /** Cuando se escribió `#`: lo que sigue es el nombre de un campo. */
         askAttribute: string;
+        /** The set's own search over what was typed — every field it searches, at once — as it
+         *  is offered («Buscar») and as the chip reads once put («Buscar «Globex»»). */
+        literal: string;
+        literalChip: string;
         askOp: string;
         /** El encabezado de un nodo del árbol: cómo se juntan las reglas de abajo. */
         askJoin: 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}",
@@ -155,6 +157,8 @@ export const SPANISH_COPY = {
         openBuilderHere: "Abrir esta condición en el constructor",
         askField: "en qué campo",
         askAttribute: "elegí un atributo",
+        literal: "Buscar",
+        literalChip: "Buscar «{text}»",
         askOp: "comparado cómo",
         askJoin: "tienen que coincidir",
         askValue: "contra qué",

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}",
@@ -115,6 +117,8 @@ export const ENGLISH_COPY = {
         openBuilderHere: "Open this condition in the builder",
         askField: "ask about",
         askAttribute: "pick an attribute",
+        literal: "Search",
+        literalChip: "Search “{text}”",
         askOp: "compared how",
         askJoin: "these rules match",
         unreadable: "We cannot read this filter as a tree — here it is as it stands. It can still be edited as JSON below.",

package/dist/foundations/grouping.d.ts

@@ -97,6 +97,9 @@ export type Pile<T> = {
      * montones los cuenta quien guarda los datos, este número viene de allá.
      */
     count: number;
+    /** What the pile ADDS UP TO, already written — «Total Bs 1.204.933» — summed by whoever
+     *  keeps the data over EVERY row in it, like the count. Drawn in the pile's header. */
+    detail?: string;
     /** Las filas, en el nivel MÁS PROFUNDO. Vacío en los de arriba: un montón que
      *  tiene montones adentro no tiene filas propias. */
     items: readonly T[];

package/dist/primitives/picker/Picker.d.ts

@@ -47,6 +47,19 @@ export type PickerProps = {
     items: readonly PickerItem[];
     value?: string;
     onChange?: (id: string) => void;
+    /**
+     * The options are SEARCHED by whoever gives them — the server's literal search — and this
+     * hears what is typed (and `""` when the list starts over). With it the picker filters
+     * nothing itself and caps nothing: `items` is the answer, all of it drawn, with the typed
+     * text still marked inside it. Without it, the picker filters what it holds.
+     *
+     * Context: a picker over ten thousand customers holds the first ten. Filtering THOSE finds
+     * nothing past the tenth — the customer typed by its exact name was «not there».
+     */
+    onSearch?: (query: string) => void;
+    /** The chosen record's name when it is not among `items` — a search narrowed them, or it
+     *  lies past the first page. Without it, a chosen record that is not listed reads empty. */
+    valueLabel?: string;
     placeholder?: string;
     /** «Buscar más…»: the last option of the list, always there when this is — the record
      *  may not be among the eight, or two of them may need their columns to tell apart. It

package/dist/primitives/picker/Picker.js

@@ -91,13 +91,14 @@ const option = tv({
 });
 export function Picker({ mode, ...props }) {
     if (useFormMode(mode) === "read") {
-        return _jsx(ReadValue, { value: props.items.find((i) => i.id === props.value)?.name ?? null });
+        const name = props.items.find((i) => i.id === props.value)?.name ?? props.valueLabel;
+        return _jsx(ReadValue, { value: props.value === undefined ? null : (name ?? null) });
     }
     /* The filter reads the locale from React Aria's context, so the box that provides it has
        to be ABOVE the component that asks for it. */
     return (_jsx(AriaLocale, { children: _jsx(EditablePicker, { ...props }) }));
 }
-function EditablePicker({ id: ownId, items, value, onChange, placeholder, onBrowseAll, onCreate, onCreateAndEdit, onOpen, openTargets = ["modal", "peek", "side", "page"], emptyText, searchPlaceholder, loading = false, loadingText, onLoadMore, loadingMore = false, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, "aria-label": ariaLabel, }) {
+function EditablePicker({ id: ownId, items, value, onChange, onSearch, valueLabel, placeholder, onBrowseAll, onCreate, onCreateAndEdit, onOpen, openTargets = ["modal", "peek", "side", "page"], emptyText, searchPlaceholder, loading = false, loadingText, onLoadMore, loadingMore = false, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, "aria-label": ariaLabel, }) {
     const { id, labelledBy, describedBy, invalid } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
@@ -110,28 +111,40 @@ function EditablePicker({ id: ownId, items, value, onChange, placeholder, onBrow
     const shownSearch = searchPlaceholder ?? copy.picker.search;
     const shownLoading = loadingText ?? copy.picker.loading;
     const chosen = items.find((i) => i.id === value);
-    const chosenName = chosen?.name ?? "";
+    const chosenName = chosen?.name ?? (value === undefined ? "" : (valueLabel ?? ""));
     /* Both the text and the choice are controlled, so React Aria never rewrites the field
        from its own collection — which is capped and filtered, and may not hold the chosen
        record at all. `query` is what filters: empty when the list opens (the whole list,
        not just the one already chosen), the typed text after that. */
     const [open, setOpen] = useState(false);
     const [text, setText] = useState(chosenName);
-    const [query, setQuery] = useState("");
+    const [query, setQueryOnly] = useState("");
+    /* What the consumer last heard: a list that opens, closes or chooses starts the search over,
+       and telling it `""` three times would ask the server three times for the same page. */
+    const heard = useRef("");
+    const setQuery = (next) => {
+        setQueryOnly(next);
+        if (onSearch !== undefined && next !== heard.current) {
+            heard.current = next;
+            onSearch(next);
+        }
+    };
     const [shownFor, setShownFor] = useState(chosenName);
     if (!open && shownFor !== chosenName) {
         setShownFor(chosenName);
         setText(chosenName);
     }
+    const searched = onSearch !== undefined;
     const filtered = useMemo(() => {
         const q = query.trim();
-        if (q === "")
+        if (q === "" || searched)
             return items;
         return items.filter((i) => contains(`${i.name} ${i.meta ?? ""} ${i.haystack ?? ""}`, q));
-    }, [items, query, contains]);
+    }, [items, query, contains, searched]);
+    /* Searched by the consumer, the items ARE the page it chose to show: all of them. */
     const { visible, remaining } = shownRows(filtered, {
         loading,
-        incremental: onLoadMore !== undefined,
+        incremental: onLoadMore !== undefined || searched,
     });
     const hasMarks = items.some((i) => i.icon !== undefined);
     const hasHints = visible.some((i) => i.meta !== undefined);

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/dist/primitives/tag/TagsField.d.ts

@@ -15,6 +15,13 @@ export type TagsFieldProps = {
      * backend (Odoo's `name_create`); the consumer also appends the new option to `options`.
      */
     onCreate?: (label: string) => string | Promise<string>;
+    /**
+     * The options are SEARCHED by whoever gives them — the server's literal search over
+     * thousands of products or people — and this hears what is typed (`""` when it starts over).
+     * With it the field filters nothing itself: `options` is the answer, plus the chosen ones for
+     * their labels; the chosen still never come back as options.
+     */
+    onSearch?: (query: string) => void;
     /** «Buscar más…» at the end of the list: the tags to add chosen from a table
      *  (the list that chooses, `List onChoose` with `selection`, in a modal). It gets what was typed. */
     onBrowseAll?: (query: string) => void;

package/dist/primitives/tag/TagsField.js

@@ -84,7 +84,7 @@ export function TagsField({ mode, ...props }) {
        to be ABOVE the component that asks for it. */
     return (_jsx(AriaLocale, { children: _jsx(EditableTagsField, { ...props }) }));
 }
-function EditableTagsField({ value, onChange, options, onCreate, onBrowseAll, onOpen, openTarget, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
+function EditableTagsField({ value, onChange, options, onCreate, onSearch, onBrowseAll, onOpen, openTarget, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
     const { id, labelledBy, describedBy, invalid } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
@@ -95,7 +95,17 @@ function EditableTagsField({ value, onChange, options, onCreate, onBrowseAll, on
     const { contains } = useFilter({ sensitivity: "base" });
     const { locale } = useLocale();
     const collator = useMemo(() => new Intl.Collator(locale, { sensitivity: "base", usage: "search" }), [locale]);
-    const [text, setText] = useState("");
+    const [text, setTextOnly] = useState("");
+    /* What the consumer last heard: an add or a reopen starts the search over, and telling it
+       `""` twice would ask the server twice for the same page. */
+    const heard = useRef("");
+    const setText = (next) => {
+        setTextOnly(next);
+        if (onSearch !== undefined && next !== heard.current) {
+            heard.current = next;
+            onSearch(next);
+        }
+    };
     const boxRef = useRef(null);
     const [width, setWidth] = useState(null);
     const inputRef = useRef(null);
@@ -103,7 +113,7 @@ function EditableTagsField({ value, onChange, options, onCreate, onBrowseAll, on
        creating: a tag removed meanwhile must not come back. */
     const latest = useRef(value);
     latest.current = value;
-    const { available, create } = tagChoices(options, value, text, { contains, same: (a, b) => collator.compare(a.trim(), b) === 0 }, onCreate !== undefined && !disabled);
+    const { available, create } = tagChoices(options, value, text, { contains, same: (a, b) => collator.compare(a.trim(), b) === 0 }, onCreate !== undefined && !disabled, onSearch !== undefined);
     const listed = [
         ...available,
         ...(create === null

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

@@ -30,7 +30,10 @@ export type TagMatch = {
  * existing tag, chosen or not: creating «Mayorista» next to «mayorista» is how a catalog
  * ends up with both.
  */
-export declare function tagChoices(options: readonly TagOption[], value: readonly string[], text: string, match: TagMatch, creatable: boolean): {
+export declare function tagChoices(options: readonly TagOption[], value: readonly string[], text: string, match: TagMatch, creatable: boolean, 
+/** The options are already the answer to `text` (searched by the consumer, on a server):
+ *  they are not filtered again — the server may have matched a field no label shows. */
+searched?: boolean): {
     available: TagOption[];
     create: string | null;
 };

package/dist/primitives/tag/choices.js

@@ -7,10 +7,14 @@
  * existing tag, chosen or not: creating «Mayorista» next to «mayorista» is how a catalog
  * ends up with both.
  */
-export function tagChoices(options, value, text, match, creatable) {
+export function tagChoices(options, value, text, match, creatable, 
+/** The options are already the answer to `text` (searched by the consumer, on a server):
+ *  they are not filtered again — the server may have matched a field no label shows. */
+searched = false) {
     const chosen = new Set(value);
     const query = text.trim();
-    const available = options.filter((option) => !chosen.has(option.value) && (query === "" || match.contains(option.label, query)));
+    const available = options.filter((option) => !chosen.has(option.value) &&
+        (searched || query === "" || match.contains(option.label, query)));
     const create = creatable && query !== "" && !options.some((option) => match.same(option.label, query))
         ? query
         : null;

package/dist/views/list/ListView.js

@@ -238,7 +238,7 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
         return list.map((pile) => {
             const key = pathKey(pile.path);
             const open = isOpen(pile);
-            return (_jsxs(Fragment, { children: [_jsx(GroupHeader, { field: pile.field, label: pile.label, count: pile.count, depth: pile.depth, open: open, ...(group?.onToggle === undefined
+            return (_jsxs(Fragment, { children: [_jsx(GroupHeader, { field: pile.field, label: pile.label, count: pile.count, ...(pile.detail === undefined ? {} : { detail: pile.detail }), depth: pile.depth, open: open, ...(group?.onToggle === undefined
                             ? {}
                             : { onToggle: () => group.onToggle?.(key) }) }), !open
                         ? null

package/package.json

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