@sincpro/web-ui 0.0.0-stage → 0.2.0

package/dist/components/search/SearchBar.js

@@ -0,0 +1,387 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { bySurface, useSurface } from "../../foundations/surface.js";
+import { Tags } from "../../primitives/tag/Tags.js";
+import { ChevronRight, CornerDownRight, ListFilter, Search, SlidersHorizontal, } from "lucide-react";
+import { Fragment, useEffect, useId, useRef, useState } from "react";
+function Option({ o, onSelect }) {
+    const Icon = o.icon;
+    return (_jsxs("button", { type: "button", disabled: o.disabled, onClick: () => onSelect?.(o.id), className: `flex w-full items-start gap-2 rounded-control px-1.5 py-1 text-left transition-colors duration-(--duration-instant) disabled:pointer-events-none disabled:opacity-45 hover:bg-primary/8 ${o.checked === true ? "bg-primary/6" : ""}`, children: [_jsx("span", { className: "mt-0.5 flex size-(--size-icon-sm) shrink-0 items-center justify-center", children: o.checked === true ? (_jsx("span", { className: "size-1.5 rounded-pill bg-primary" })) : Icon !== undefined ? (_jsx(Icon, { className: "size-(--size-icon-sm) text-muted", strokeWidth: 2 })) : (_jsx("span", { className: "size-3 rounded-pill border border-line-strong" })) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: `truncate text-meta ${o.checked === true ? "font-medium text-ink" : "text-ink"}`, children: o.label }), o.badge === undefined ? null : (_jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-warn/30 bg-warn/10 px-2 py-0.5 text-micro text-warn", children: o.badge }))] }), o.hint === undefined ? null : (_jsx("span", { className: "mt-0.5 block truncate text-micro text-muted", children: o.hint }))] })] }));
+}
+/** Un grupo del panel. Plegable cuando lo pide —una fecha, que trae once
+ *  opciones— y abierto de entrada si ya tiene algo tildado: si no, lo puesto
+ *  queda escondido detrás de un chevron y hay que adivinar dónde está. */
+function Group({ group, first, onSelect, }) {
+    const active = group.options.some((o) => o.checked === true);
+    const [open, setOpen] = useState(active);
+    const options = (_jsx(_Fragment, { children: group.options.map((o) => (_jsxs(Fragment, { children: [o.divider === true ? _jsx("div", { className: "my-1 h-px bg-line", role: "separator" }) : null, _jsx(Option, { o: o, onSelect: onSelect })] }, o.id))) }));
+    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [first ? null : _jsx("div", { className: "my-1 h-px bg-line", role: "separator" }), group.label === undefined ? null : group.collapsible !== true ? (
+            /* El rótulo del grupo va en la columna del TEXTO, no en la del borde.
+               La banda de la columna ya es el título (medium, sobre la línea). Este
+               es un escalón abajo: peso normal, y el mismo hueco de la marca para
+               que «mostrar sólo» arranque donde arranca «traídos». */
+            _jsxs("div", { className: "flex items-center gap-2 px-1.5 pt-1 pb-0.5 text-micro text-muted", children: [_jsx("span", { className: "size-(--size-icon-sm) shrink-0", "aria-hidden": true }), group.label] })) : (_jsxs("button", { type: "button", onClick: () => setOpen(!open), "aria-expanded": open, className: "flex items-center gap-2 rounded-control px-1.5 py-1 text-left transition-colors duration-(--duration-instant) hover:bg-primary/8", children: [_jsx(ChevronRight, { className: `size-(--size-icon-sm) shrink-0 text-muted transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: `min-w-0 flex-1 truncate text-meta ${active ? "font-medium text-ink" : "text-ink"}`, children: group.label }), !active ? null : (_jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-accent/40 bg-accent/18 px-2 py-0.5 text-micro tabular-nums text-ink", children: group.options.filter((o) => o.checked === true).length }))] })), group.collapsible === true && !open ? null : (_jsx("div", { className: group.collapsible === true
+                    ? "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, surface, }) {
+    const copy = useUiCopy();
+    const sup = useSurface(surface);
+    const [text, setText] = useState("");
+    const [panel, setPanel] = useState(false);
+    /** El paso en el que está la pregunta que se escribe: sin campo, con campo, o
+     *  con campo y operador. */
+    const [step, setStep] = useState({});
+    /** Cuál de lo ofrecido está marcado. Arranca en el primero, que es el que
+     *  Enter toma sin bajar ni una vez. */
+    const [active, setActive] = useState(0);
+    /**
+     * El grupo ABIERTO: dónde cae lo próximo que se escriba.
+     *
+     * `null` es «al final de la lista», que es lo normal. Se abre con `#and` y se
+     * cierra con Escape o eligiendo otro — un grupo que no se puede cerrar es una
+     * trampa en la que todo lo que se escriba después queda adentro sin que nadie
+     * lo haya pedido.
+     */
+    const [openGroup, setOpenGroup] = useState(null);
+    /* Cuál es el nodo abierto se DERIVA de la ruta y del árbol, y no se guarda
+       aparte: guardado, el día que alguien le cambia la conjunción desde la ficha
+       quedan dos verdades sobre la misma cosa. */
+    const openNode = openGroup === null ? undefined : at(criteria, openGroup);
+    const openJoin = openNode?.kind === "join" ? openNode.join : undefined;
+    /**
+     * Cerrar el nodo abierto: lo que siga vuelve a caer afuera.
+     *
+     * Si quedó VACÍO se lo saca. Abrirlo y no poner nada deja un corchete que no
+     * agrupa nada, y alguien tendría que descubrir que se saca con la × de una
+     * ficha que no dice nada adentro.
+     */
+    function closeGroup() {
+        if (openGroup !== null && openNode?.kind === "join" && openNode.of.length === 0) {
+            onCriteriaChange(removeAt(criteria, openGroup));
+        }
+        setOpenGroup(null);
+        input.current?.focus();
+    }
+    /* Cuántas cosas hay puestas, para el número del embudo. Se cuenta lo de
+       ARRIBA y no las hojas: «tres» tiene que ser lo que se ve en la barra, y lo
+       que se ve es un grupo, no sus dos condiciones. */
+    const puestos = criteria.length;
+    const input = useRef(null);
+    const box = useRef(null);
+    const id = useId();
+    /**
+     * Los campos por los que se puede preguntar.
+     *
+     * Con un modelo, salen de él con su tipo, sus operadores y sus relaciones —y
+     * entonces la barra sabe que «total» acepta «menor que» y «estado» sólo
+     * tres valores. Sin modelo, una faceta es un campo de texto y nada más: es
+     * exactamente lo que una lista podía declarar hasta ahora, dibujado por el
+     * mismo camino. Dos caminos serían dos barras.
+     */
+    const fields = model === undefined
+        ? facets.map((facet) => ({
+            field: facet.id,
+            label: facet.label,
+            kind: "text",
+            /* Las tres que se le pueden hacer a un texto sin saber nada más de
+               él. Con una sola —«contiene»— el paso de la comparación ofrecía un
+               botón y nada que elegir, que es peor que no tener el paso. Un modelo
+               publica las suyas y éstas no se usan. */
+            ops: ["like", "=", "!="],
+        }))
+        : queryFields(model, copy.locale);
+    /* Lo marcado vuelve al primero cuando cambia lo ofrecido: dejar la marca en el
+       cuarto renglón mientras se sigue escribiendo hace que Enter tome algo que ya
+       no es lo que dice la pantalla. */
+    const suggestions = suggest({
+        ...(step.field === undefined ? {} : { field: step.field }),
+        ...(step.op === undefined ? {} : { op: step.op }),
+        text,
+    }, fields);
+    /* 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);
+    /* Se abre cuando hay algo que ofrecer Y alguien empezó: escribiendo, o
+       eligiendo un campo, que ya es haber empezado. */
+    const open = suggestions.length > 0 && (text.trim() !== "" || step.field !== undefined);
+    /* Se eligen FICHAS cuando lo que se elige es un atributo o una comparación, y
+       renglones cuando lo que se elige es una pregunta entera. */
+    const asTags = asked.attribute === true || (step.field !== undefined && step.op === undefined);
+    const shown = suggestions.map((one) => one.id).join("\u0000");
+    useEffect(() => {
+        setActive(0);
+    }, [shown]);
+    /** Una columna sin opciones no es una columna: aparecería el disparador y el
+     *  panel abriría en blanco. Pasar `[]` es lo que hace quien tiene una lista que
+     *  no declara ningún recorte, y tiene que leerse igual que no pasar nada. */
+    const withOptions = (groups) => groups.some((group) => group.options.length > 0);
+    const columns = [
+        ...(filters === undefined || !withOptions(filters)
+            ? []
+            : [{ title: copy.search.filters, groups: filters, onSelect: onFilterSelect }]),
+        ...(grouping === undefined ? [] : [{ title: copy.search.groupBy, content: grouping }]),
+        ...(favorites === undefined || !withOptions(favorites)
+            ? []
+            : [{ title: copy.search.favorites, groups: favorites, onSelect: onFavoriteSelect }]),
+    ];
+    useEffect(() => {
+        if (!panel)
+            return;
+        function outside(e) {
+            if (box.current?.contains(e.target) === true)
+                return;
+            setPanel(false);
+        }
+        function onEscape(e) {
+            if (e.key === "Escape")
+                setPanel(false);
+        }
+        document.addEventListener("mousedown", outside);
+        document.addEventListener("keydown", onEscape);
+        return () => {
+            document.removeEventListener("mousedown", outside);
+            document.removeEventListener("keydown", onEscape);
+        };
+    }, [panel]);
+    /**
+     * UNA PREGUNTA ENTERA entra como instancia, y la barra vuelve al principio.
+     *
+     * Cae adentro del grupo ABIERTO si hay uno —lo que hace `#and`— y al final de
+     * 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));
+        onCriteriaChange(openGroup === null
+            ? [...criteria, one]
+            : replaceAt(criteria, openGroup, addTo(at(criteria, openGroup), one)));
+        setText("");
+        setStep({});
+        input.current?.focus();
+    }
+    /** Lo elegido en el desplegable, según de qué clase sea. */
+    function pick(suggestion) {
+        if (suggestion.kind === "field") {
+            setStep({ field: suggestion.field });
+            setText("");
+            input.current?.focus();
+            return;
+        }
+        if (suggestion.kind === "op") {
+            setStep((current) => ({ ...current, op: suggestion.op }));
+            input.current?.focus();
+            return;
+        }
+        if (suggestion.kind === "group") {
+            /* Abrir un grupo es poner un nodo VACÍO y recordar que lo que venga cae
+               adentro. Vacío y no con lo de antes metido a la fuerza: quien escribe
+               `#and` está diciendo «lo que sigue va junto», no «agrupá lo que ya
+               puse». */
+            const node = {
+                id: criteriaId("n"),
+                kind: "join",
+                join: suggestion.join,
+                of: [],
+            };
+            onCriteriaChange([...criteria, node]);
+            setOpenGroup([criteria.length]);
+            onOpenGroup?.(suggestion.join);
+            setText("");
+            input.current?.focus();
+            return;
+        }
+        commit(suggestion.field, suggestion.op, suggestion.value);
+    }
+    /** El nodo con una instancia más adentro. */
+    function addTo(node, one) {
+        return node === undefined || node.kind !== "join"
+            ? one
+            : { ...node, of: [...node.of, one] };
+    }
+    return (_jsxs("div", { ref: box, className: "relative flex min-w-0 items-center gap-2", children: [_jsxs("div", { className: `flex min-h-(--size-control-md) w-full min-w-0 items-stretch rounded-box border transition-colors duration-(--duration-instant) ${bySurface(sup, "border-line-strong bg-surface focus-within:border-primary/60", 
+                /* Sobre el cromo lo que define al campo es el BORDE, no el relleno. El
+                   azul ya es casi negro, así que hundirlo no da contraste (1,05:1) y
+                   levantarlo da 1,21:1 — en los dos casos el campo no se lee como un
+                   campo, que era «no llama la atención». La tinta al 45 % es el primer
+                   borde que pasa 3:1 contra el relleno Y contra el cromo, que es lo que
+                   1.4.11 le pide a un control. */
+                "border-chrome-ink/45 bg-chrome-ink/8 focus-within:border-chrome-link")}`, children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5 py-1 pl-2.5", children: [_jsx(Search, { className: "size-(--size-icon-md) shrink-0 text-muted", strokeWidth: 2, "aria-hidden": true }), _jsx(CriteriaChips, { criteria: criteria, surface: sup, ...(openGroup === null ? {} : { open: openGroup }), ...(onOpenBuilder === undefined ? {} : { onOpen: onOpenBuilder }), onJoin: (path, join) => {
+                                    const node = at(criteria, path);
+                                    if (node?.kind !== "join")
+                                        return;
+                                    onCriteriaChange(replaceAt(criteria, path, { ...node, join }));
+                                }, onRemove: (path) => {
+                                    onCriteriaChange(removeAt(criteria, path));
+                                    /* Si lo que se sacó era el grupo abierto, deja de estarlo: escribir
+                                       adentro de algo que ya no existe es escribir en el aire. */
+                                    if (openGroup !== null && path.join(".") === openGroup.join(".")) {
+                                        setOpenGroup(null);
+                                    }
+                                } }), _jsx(Tags, { surface: sup, items: [
+                                    /* ADENTRO DE QUÉ se está escribiendo, primero: es lo que envuelve
+                                       al resto del borrador, y es la única ficha que se saca para
+                                       CERRAR en vez de para deshacer un paso. Sin ella, `#and` abría
+                                       un grupo y lo único que lo decía era que la próxima pregunta
+                                       aparecía en un lugar que nadie eligió mirando. */
+                                    ...(openJoin === undefined
+                                        ? []
+                                        : [
+                                            {
+                                                id: "draft-group",
+                                                label: copy.search.joins[openJoin === "not" ? "none" : openJoin],
+                                                icon: CornerDownRight,
+                                                selected: true,
+                                                onRemove: closeGroup,
+                                                removeLabel: copy.search.closeGroup,
+                                            },
+                                        ]),
+                                    ...(step.field === undefined
+                                        ? []
+                                        : [
+                                            {
+                                                id: "draft-field",
+                                                label: step.field.label,
+                                                ...(step.field.through === undefined
+                                                    ? {}
+                                                    : { note: step.field.through }),
+                                                selected: true,
+                                                onRemove: () => {
+                                                    setStep({});
+                                                    input.current?.focus();
+                                                },
+                                                removeLabel: copy.search.dropField,
+                                            },
+                                        ]),
+                                    ...(step.field === undefined || step.op === undefined
+                                        ? []
+                                        : [
+                                            {
+                                                id: "draft-op",
+                                                label: opLabel(step.op),
+                                                note: step.op,
+                                                selected: true,
+                                                onRemove: () => {
+                                                    setStep({ field: step.field });
+                                                    input.current?.focus();
+                                                },
+                                                removeLabel: copy.search.dropOp,
+                                            },
+                                        ]),
+                                ] }), _jsx("input", { ref: input, value: text, onChange: (e) => setText(e.target.value), onKeyDown: (e) => {
+                                    /* Retroceso con el campo vacío saca la ÚLTIMA instancia: el gesto
+                                       que ya existe en cualquier campo de fichas y el único que se
+                                       descubre sin que nadie lo explique. La última y no la última de
+                                       su clase — ahora son una sola lista, así que no hay un orden de
+                                       preferencia que recordar. */
+                                    if (e.key === "Backspace" && text === "") {
+                                        if (criteria.length > 0) {
+                                            onCriteriaChange(removeAt(criteria, [criteria.length - 1]));
+                                        }
+                                        return;
+                                    }
+                                    /* Las flechas RECORREN lo ofrecido y Enter toma lo que esté
+                                       marcado. Sin esto, escribir «#nom» y bajar no hacía nada: la
+                                       lista se veía y no se podía tocar sin el mouse, que es
+                                       justamente lo que una barra de búsqueda no puede pedir. */
+                                    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                                        if (suggestions.length === 0)
+                                            return;
+                                        e.preventDefault();
+                                        setActive((current) => {
+                                            const next = e.key === "ArrowDown" ? current + 1 : current - 1;
+                                            /* Da la vuelta: con cinco campos, bajar seis veces vuelve al
+                                               primero en vez de quedarse trabado en el último. */
+                                            return (next + suggestions.length) % suggestions.length;
+                                        });
+                                        return;
+                                    }
+                                    /* Enter toma lo MARCADO, que arranca siendo lo primero — y lo
+                                       primero es lo más probable: con «test» el primer campo de texto,
+                                       con «<= 100» el único que puede contestarlo. */
+                                    if (e.key === "Enter") {
+                                        e.preventDefault();
+                                        const chosen = suggestions[active] ?? suggestions[0];
+                                        if (chosen !== undefined)
+                                            pick(chosen);
+                                    }
+                                    /* Escape DESHACE, un paso por vez y siempre el último: primero lo
+                                       escrito, después la comparación, después el campo. Quien se
+                                       equivocó de campo quiere cambiarlo, no volver a empezar — y
+                                       quien no está armando nada no espera que le pase nada.
+                      
+                                       Antes sólo desarmaba el paso cuando ya había un campo elegido,
+                                       así que con «vent» a medio escribir no hacía nada: la tecla que
+                                       todo el mundo aprieta para deshacer no deshacía. */
+                                    if (e.key === "Escape") {
+                                        if (text !== "") {
+                                            e.preventDefault();
+                                            setText("");
+                                            return;
+                                        }
+                                        if (step.op !== undefined) {
+                                            e.preventDefault();
+                                            setStep({ field: step.field });
+                                            return;
+                                        }
+                                        if (step.field !== undefined) {
+                                            e.preventDefault();
+                                            setStep({});
+                                            return;
+                                        }
+                                        /* Y al final, el grupo: lo último que se abrió es lo último que
+                                           se deshace. */
+                                        if (openGroup !== null) {
+                                            e.preventDefault();
+                                            closeGroup();
+                                        }
+                                        return;
+                                    }
+                                }, placeholder: step.field !== undefined
+                                    ? copy.search.typeValue
+                                    : criteria.length === 0
+                                        ? (placeholder ?? copy.search.placeholder)
+                                        : "", 
+                                /* CON UN CAMPO ELEGIDO, lo que se escribe es el VALOR — y se dibuja
+                                   como la ficha que va a ser, atrás de las otras dos. No es un
+                                   adorno: el borrador se lee entero —«nombre · contiene · vent▌»—
+                                   antes de existir como recorte, así que se ve lo que va a quedar
+                                   antes de que quede. Y sigue siendo el input: nada se duplica, y
+                                   nada se convierte en filtro hasta que alguien aprieta Enter o
+                                   elige de la lista.
+                    
+                                   El ancho lo pide el CONTENIDO —`field-sizing`— para que la ficha
+                                   crezca con lo escrito en vez de reservar una banda vacía. Donde no
+                                   esté, el input se estira como siempre. */
+                                style: step.field === undefined ? undefined : { fieldSizing: "content" }, className: step.field === undefined
+                                    ? `min-w-24 flex-1 bg-transparent text-meta outline-none ${bySurface(sup, "text-ink placeholder:text-muted", "text-chrome-ink placeholder:text-chrome-muted")}`
+                                    : `min-w-16 rounded-pill px-2 py-0.5 text-micro outline-none ${bySurface(sup, "bg-accent/18 text-ink placeholder:text-muted", "bg-chrome-link/20 text-chrome-ink placeholder:text-chrome-muted")}` })] }), 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 self-center 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
+                       columna y el teclado también. Doce atributos doblados en tres
+                       renglones son doce cosas que barrer en zigzag para encontrar una. */
+                    _jsx("div", { className: "max-h-72 overflow-y-auto p-1", children: _jsx(Tags, { stack: true, surface: "canvas", label: step.field !== undefined ? copy.search.askOp : copy.search.askAttribute, items: suggestions.map((one, at) => ({
+                                id: one.id,
+                                label: one.label,
+                                ...(one.kind === "op"
+                                    ? { note: one.op }
+                                    : one.kind === "field" && one.hint !== undefined
+                                        ? { note: one.hint }
+                                        : {}),
+                                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 ??
+                                    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);
+                            }, className: "flex w-full items-center gap-2 rounded-control px-1.5 py-1 text-left text-meta text-ink transition-colors duration-(--duration-instant) hover:bg-primary/8 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: [_jsx(SlidersHorizontal, { className: "size-(--size-icon-sm)", strokeWidth: 2 }), copy.search.openBuilder] }) }))] })) : null] }));
+}

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

@@ -0,0 +1,116 @@
+import type { BuiltCondition, BuiltFilter } from "./FilterBuilder.js";
+import type { GroupGrain, GroupLevel } from "../../foundations/grouping.js";
+/** Cómo se juntan las instancias de un nodo. `not` niega lo que tiene adentro. */
+export type CriteriaJoin = "all" | "any" | "not";
+/**
+ * UNA INSTANCIA de lo que la barra tiene puesto.
+ *
+ * Tres formas y ninguna de más: un nivel de agrupado, un filtro, o un nodo que
+ * junta filtros. Un nodo NO junta grupos — «año y mes» no se cruza con Y, se
+ * anida, y para eso el orden de la lista ya es la jerarquía.
+ */
+export type SearchCriteria = {
+    id: string;
+    kind: "group";
+    /** Cómo se lee: «registrado · mes». Lo pone quien conoce el modelo. */
+    label: string;
+    /** Lo que viaja: por qué campo se parte y con qué grano. */
+    level: GroupLevel;
+} | {
+    id: string;
+    kind: "filter";
+    /** Cómo se lee. Un filtro declarado trae el suyo; uno escrito en la barra
+     *  se describe solo, con las palabras del modelo. */
+    label: string;
+    /**
+     * Lo que viaja, en la forma del motor y sin una clave de más.
+     *
+     * FALTA cuando el recorte no se puede preguntar: «con entregas pendientes» se define
+     * con datos de otro contexto y ningún `where` sobre esta tabla lo
+     * contesta. La instancia existe igual —se ve, se cuenta, se saca— y lo
+     * contesta quien la declaró. Sin esto, un recorte así no era una instancia
+     * de nada: se dibujaba en el menú y tildarlo no hacía nada.
+     */
+    where?: BuiltCondition | BuiltFilter;
+} | {
+    id: string;
+    kind: "join";
+    join: CriteriaJoin;
+    of: readonly SearchCriteria[];
+};
+/** El camino hasta una instancia, por índice desde la raíz. Es su identidad: dos
+ *  instancias pueden decir lo mismo en ramas distintas, y tocar una no puede
+ *  abrir la otra. */
+export type CriteriaPath = readonly number[];
+/** Una instancia de agrupado, ya estrechada: los de grupo nunca son un nodo, así
+ *  que quien los dibuja no tiene que preguntarse si tienen rótulo. */
+export type GroupCriteria = Extract<SearchCriteria, {
+    kind: "group";
+}>;
+/** Las instancias de agrupado, en orden. Van SIEMPRE a la izquierda y no se
+ *  cruzan con nada: el orden ES la jerarquía. */
+export declare function groupsOf(all: readonly SearchCriteria[]): GroupCriteria[];
+/** Las de filtro, que son las que se anidan. */
+export declare function filtersOf(all: readonly SearchCriteria[]): SearchCriteria[];
+/** La instancia que hay en esa ruta, si hay alguna. */
+export declare function at(all: readonly SearchCriteria[], path: CriteriaPath): SearchCriteria | undefined;
+/** El mismo árbol con una instancia cambiada. Devolver uno nuevo y no tocar el
+ *  viejo es lo que deja comparar antes y después —y deshacer. */
+export declare function replaceAt(all: readonly SearchCriteria[], path: CriteriaPath, next: SearchCriteria): SearchCriteria[];
+/**
+ * El mismo árbol sin esa instancia.
+ *
+ * Un nodo que se queda con un solo hijo se DESARMA: «cualquiera de: (a)» es un
+ * paréntesis alrededor de nada, y dejarlo obliga a leer un grupo que no agrupa.
+ */
+export declare function removeAt(all: readonly SearchCriteria[], path: CriteriaPath): SearchCriteria[];
+/** Cómo se juntan los de un nodo: `all` → `any` → `not` y vuelta a empezar. Es
+ *  la misma rueda que el selector muestra abierta, para quien prefiera el
+ *  atajo. */
+export declare function nextJoin(join: CriteriaJoin): CriteriaJoin;
+/** Un id que no choca con otro. Corto, porque se lee en el DOM. */
+export declare function criteriaId(prefix: string): string;
+/** Una instancia de agrupado, a partir de un nivel ya legible. */
+export declare function groupCriteria(level: GroupLevel, label: string): SearchCriteria;
+/** Una instancia de filtro. `label` es lo único que distingue a uno declarado en
+ *  código de uno escrito en la barra; sin `where`, es uno que sólo contesta
+ *  quien lo declaró. */
+export declare function filterCriteria(where: BuiltCondition | BuiltFilter | undefined, label: string, id?: string): SearchCriteria;
+/**
+ * Lo que VIAJA: el `where` del motor, armado con las instancias de filtro.
+ *
+ * Es lo único que sale de acá hacia afuera, y sale sin rótulos, sin ids y sin
+ * clases: la UI se queda con lo que la UI necesita.
+ */
+export declare function whereOf(all: readonly SearchCriteria[]): BuiltFilter | undefined;
+/** Los niveles que viajan, en orden. */
+export declare function levelsOf(all: readonly SearchCriteria[]): GroupLevel[];
+export type { GroupGrain, GroupLevel };
+/**
+ * Los niveles de agrupado, puestos al día.
+ *
+ * Reemplaza TODAS las instancias de grupo por las que salen de `levels`, y no
+ * toca ninguna de filtro. Existe porque el control de niveles es una lista
+ * ordenada que se edita entera —se agrega, se saca, se mueve— y reconciliarla
+ * instancia por instancia desde afuera es el mismo bucle escrito en cada
+ * pantalla.
+ *
+ * Los de grupo quedan ADELANTE, que es donde se dibujan.
+ */
+export declare function withLevels(all: readonly SearchCriteria[], levels: readonly GroupLevel[], labelOf: (level: GroupLevel) => string): SearchCriteria[];
+/**
+ * Un filtro CON NOMBRE, puesto o sacado.
+ *
+ * Es lo único que hace un filtro declarado en código: traer su rótulo y su
+ * condición ya pensadas. Tildarlo lo agrega, destildarlo lo saca, y se reconoce
+ * por su `id` — el mismo que declaró quien lo escribió, así que sobrevive a
+ * guardarlo como favorito y volver a leerlo.
+ */
+export declare function toggleNamed(all: readonly SearchCriteria[], named: {
+    id: string;
+    label: string;
+    where?: BuiltCondition | BuiltFilter;
+}): SearchCriteria[];
+/** Si ese filtro con nombre está puesto. Lo usa el panel para dibujar la marca:
+ *  la marca sale de lo PUESTO y no de un estado aparte que podría discrepar. */
+export declare function hasNamed(all: readonly SearchCriteria[], id: string): boolean;