@sincpro/web-ui 0.0.0-stage → 0.2.0

package/dist/components/search/CriteriaBuilder.js

@@ -0,0 +1,278 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { blankGroup, ExpressionView, treeFromFilter, treeToFilter, WhereTree, } from "./FilterBuilder.js";
+import { JsonEditor } from "./JsonEditor.js";
+import { filterableNames, } from "./model.js";
+import { currentCopy, fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { GRAIN_ORDER } from "../../foundations/grouping.js";
+import { useSurface } from "../../foundations/surface.js";
+import { Rule } from "../../primitives/block/Block.js";
+import { Button } from "../../primitives/button/index.js";
+import { Tags } from "../../primitives/tag/Tags.js";
+import { Plus, Trash2 } from "lucide-react";
+import { Fragment, useMemo, useState } from "react";
+/**
+ * Los cortes de una fecha, de GRUESO a fino, con `null` adelante: sin corte, un
+ * campo de fecha parte por instante y cada fila termina en su propio montón.
+ *
+ * El orden no es una preferencia — un día entero vive adentro de un solo mes— y
+ * es el mismo que `GRAIN_ORDER` publica para la barra: una sola dirección para
+ * las dos pantallas. La ficha de un nivel rota por esta lista.
+ */
+const GRAINS = [null, ...GRAIN_ORDER];
+/** Qué tipos admiten un grano: recortar un texto por mes no significa nada. */
+const DATE_TYPES = new Set(["date", "datetime"]);
+/** Los operadores que un plegado —siempre un número— o `count` admiten en un `having`: los
+ *  mismos que la definición del modelo publica para un campo numérico, `is null` aparte, que
+ *  no significa nada sobre un número que el propio motor calculó. */
+const COMPARABLE = ["=", "!=", ">", ">=", "<", "<=", "between"];
+/** Las funciones que un plegado puede pedir, cerradas del lado del servidor porque el nombre
+ *  llega a SQL. */
+const FOLD_FUNCTIONS = ["sum", "avg", "min", "max", "count"];
+function isEmpty(criteria) {
+    return (criteria.where === undefined &&
+        (criteria.order ?? []).length === 0 &&
+        (criteria.grouping?.by ?? []).length === 0 &&
+        Object.keys(criteria.grouping?.totals ?? {}).length === 0 &&
+        Object.keys(criteria.specification ?? {}).length === 0);
+}
+/**
+ * LA FICHA QUE AGREGA: un «+» que abre la lista de lo que se puede elegir.
+ *
+ * Es lo mismo que hace el numeral en la barra, y por la misma razón: elegir
+ * entre veinte campos es elegir de una LISTA, no desplegar un `<select>` que ya
+ * viene con uno puesto y que hay que cambiar. Con el `<select>`, agregar un
+ * nivel ponía el primer campo del modelo aunque nadie lo hubiera pedido.
+ */
+function AddTag({ label, options, onPick, }) {
+    const [open, setOpen] = useState(false);
+    if (options.length === 0)
+        return null;
+    return (_jsxs("span", { className: "relative inline-flex shrink-0", children: [_jsxs("button", { type: "button", onClick: () => setOpen((current) => !current), "aria-expanded": open, className: "inline-flex shrink-0 items-center gap-1 rounded-pill border border-dashed border-line-strong px-2 py-0.5 text-micro text-muted transition-colors duration-(--duration-instant) hover:border-line-strong hover:bg-ink/5 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: [_jsx(Plus, { className: "size-3", strokeWidth: 2, "aria-hidden": true }), label] }), open ? (_jsx("span", { className: "absolute top-full left-0 z-40 mt-1 max-h-64 overflow-y-auto rounded-panel border border-line-strong bg-surface p-1 shadow-float", children: _jsx(Tags, { stack: true, label: label, items: options.map((name) => ({
+                        id: name,
+                        label: name,
+                        onSelect: () => {
+                            onPick(name);
+                            setOpen(false);
+                        },
+                    })) }) })) : null] }));
+}
+/** El corte siguiente, y vuelta a empezar. */
+function nextGrain(grain) {
+    const at = GRAINS.indexOf(grain ?? null);
+    return GRAINS[(at + 1) % GRAINS.length] ?? null;
+}
+export function CriteriaBuilder({ model, initial, focus, onApply, onCancel, }) {
+    const surface = useSurface();
+    const names = Object.keys(model.fields).sort();
+    /* Nunca un relacional ni un valor-objeto: ninguno de los dos tiene una comparación propia
+       (`ops` vacío), así que ninguno sirve de blanco para un filtro, un orden o un nivel. */
+    const scalarNames = filterableNames(model);
+    const sortable = names.filter((name) => model.fields[name]?.sortable === true);
+    const decomposed = initial?.where === undefined ? null : treeFromFilter(initial.where);
+    const [tree, setTree] = useState(() => decomposed !== null && decomposed.kind === "group"
+        ? decomposed
+        : decomposed !== null
+            ? { kind: "group", join: "all", children: [decomposed] }
+            : blankGroup(model, scalarNames[0]));
+    const copy = useUiCopy();
+    const [lockedWhere, setLockedWhere] = useState(initial?.where !== undefined && decomposed === null ? initial.where : null);
+    const [order, setOrder] = useState(initial?.order ?? []);
+    const [levels, setLevels] = useState(initial?.grouping?.by ?? []);
+    const [totals, setTotals] = useState(initial?.grouping?.totals ?? {});
+    const [groupOrder, setGroupOrder] = useState(initial?.grouping?.order ?? []);
+    const [groupLimit, setGroupLimit] = useState(initial?.grouping?.pagination?.limit);
+    /* `having` es un filtro como cualquier otro, sobre un modelo sintético cuyos únicos campos
+       son los nombres que admite: los de `totals`, más `count`. Reutilizar `WhereTree` sobre ese
+       modelo es más simple y más correcto que armar un editor de condiciones aparte. */
+    const havingModel = useMemo(() => ({
+        aggregate: "having",
+        identity: "count",
+        fields: Object.fromEntries([
+            ["count", { type: "integer", nullable: false, sortable: false, ops: COMPARABLE }],
+            ...Object.keys(totals).map((name) => [
+                name,
+                { type: "number", nullable: false, sortable: false, ops: COMPARABLE },
+            ]),
+        ]),
+    }), [totals]);
+    const havingDecomposed = initial?.grouping?.having === undefined ? null : treeFromFilter(initial.grouping.having);
+    const [havingTree, setHavingTree] = useState(() => havingDecomposed !== null && havingDecomposed.kind === "group"
+        ? havingDecomposed
+        : havingDecomposed !== null
+            ? { kind: "group", join: "all", children: [havingDecomposed] }
+            : blankGroup(havingModel, "count"));
+    const [fields, setFields] = useState(Object.keys(initial?.specification ?? {}));
+    const [rawText, setRawText] = useState(() => initial === undefined ? "" : JSON.stringify(initial, null, 2));
+    const [rawError, setRawError] = useState(null);
+    /** Lo que los controles dicen, junto: es lo que se aplica y lo que el JSON muestra. */
+    function assemble(next) {
+        const where = next.locked ?? lockedWhere ?? treeToFilter(next.tree ?? tree);
+        const sorts = next.order ?? order;
+        const by = next.levels ?? levels;
+        const folds = next.totals ?? totals;
+        const having = treeToFilter(next.havingTree ?? havingTree);
+        const groupSorts = next.groupOrder ?? groupOrder;
+        const limit = "groupLimit" in next ? next.groupLimit : groupLimit;
+        const chosen = next.fields ?? fields;
+        /* Sin niveles no hay qué plegar, qué filtrar entre montones ni en qué orden o página
+           volverían — un total, un `having` o una página puestos y luego vaciados de niveles no
+           tienen que sobrevivir sueltos en la criteria que se manda. */
+        const grouping = by.length === 0
+            ? {}
+            : {
+                by,
+                ...(Object.keys(folds).length === 0 ? {} : { totals: folds }),
+                ...(having === undefined ? {} : { having }),
+                ...(groupSorts.length === 0 ? {} : { order: groupSorts }),
+                ...(limit === undefined ? {} : { pagination: { limit } }),
+            };
+        return {
+            ...(where === undefined ? {} : { where }),
+            ...(sorts.length === 0 ? {} : { order: sorts }),
+            ...(Object.keys(grouping).length === 0 ? {} : { grouping }),
+            ...(chosen.length === 0
+                ? {}
+                : {
+                    specification: Object.fromEntries(chosen.map((name) => [name, {}])),
+                }),
+        };
+    }
+    /* Tocar cualquier control reescribe el JSON entero: las dos vistas son la misma criteria. */
+    function push(next) {
+        if (next.tree !== undefined)
+            setTree(next.tree);
+        if (next.locked !== undefined)
+            setLockedWhere(next.locked);
+        if (next.order !== undefined)
+            setOrder(next.order);
+        if (next.levels !== undefined)
+            setLevels(next.levels);
+        if (next.totals !== undefined)
+            setTotals(next.totals);
+        if (next.havingTree !== undefined)
+            setHavingTree(next.havingTree);
+        if (next.groupOrder !== undefined)
+            setGroupOrder(next.groupOrder);
+        if ("groupLimit" in next)
+            setGroupLimit(next.groupLimit);
+        if (next.fields !== undefined)
+            setFields(next.fields);
+        const built = assemble(next);
+        setRawText(isEmpty(built) ? "" : JSON.stringify(built, null, 2));
+        setRawError(null);
+    }
+    /* Escribir el JSON rehace los controles, mientras lo escrito sea una criteria. */
+    function updateRaw(text) {
+        setRawText(text);
+        if (text.trim() === "") {
+            setRawError(null);
+            return;
+        }
+        let parsed;
+        try {
+            parsed = JSON.parse(text);
+        }
+        catch {
+            setRawError(currentCopy().builder.invalidJson);
+            return;
+        }
+        if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+            setRawError(currentCopy().builder.notCriteria);
+            return;
+        }
+        setRawError(null);
+        const node = parsed.where === undefined ? null : treeFromFilter(parsed.where);
+        if (node !== null) {
+            setTree(node.kind === "group" ? node : { kind: "group", join: "all", children: [node] });
+            setLockedWhere(null);
+        }
+        else if (parsed.where !== undefined) {
+            setLockedWhere(parsed.where);
+        }
+        else {
+            setTree(blankGroup(model, scalarNames[0]));
+            setLockedWhere(null);
+        }
+        setOrder(parsed.order ?? []);
+        setLevels(parsed.grouping?.by ?? []);
+        setTotals(parsed.grouping?.totals ?? {});
+        setGroupOrder(parsed.grouping?.order ?? []);
+        setGroupLimit(parsed.grouping?.pagination?.limit);
+        const havingNode = parsed.grouping?.having === undefined ? null : treeFromFilter(parsed.grouping.having);
+        setHavingTree(havingNode !== null && havingNode.kind === "group"
+            ? havingNode
+            : havingNode !== null
+                ? { kind: "group", join: "all", children: [havingNode] }
+                : blankGroup(havingModel, "count"));
+        setFields(Object.keys(parsed.specification ?? {}));
+    }
+    const box = surface === "chrome"
+        ? "border-chrome-ink/20 bg-chrome text-chrome-ink"
+        : "border-ink/15 bg-surface text-ink";
+    const select = `min-w-0 flex-1 basis-40 rounded-control border px-2 py-1 text-meta ${box}`;
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-3 p-3", children: [_jsxs("section", { className: "flex min-w-0 flex-col gap-2", children: [_jsx(Rule, { label: copy.builder.filter }), _jsx("div", { className: "max-h-72 min-w-0 overflow-auto", children: lockedWhere !== null ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "mb-2 text-meta text-muted", children: copy.search.unreadable }), _jsx(ExpressionView, { node: lockedWhere, model: model })] })) : (_jsx(WhereTree, { model: model, group: tree, onChange: (next) => push({ tree: next }), ...(focus === undefined ? {} : { focus }) })) })] }), _jsxs("section", { className: "flex min-w-0 flex-col gap-2", children: [_jsx(Rule, { label: copy.builder.order }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1", children: [_jsx(Tags, { items: order.map((sort, index) => ({
+                                    id: `${sort.field}-${index}`,
+                                    label: sort.field,
+                                    note: sort.descending === true ? "↓" : "↑",
+                                    title: sort.descending === true
+                                        ? `${copy.builder.descending} · ${copy.builder.flip}`
+                                        : `${copy.builder.ascending} · ${copy.builder.flip}`,
+                                    onSelect: () => push({
+                                        order: order.map((one, at) => at === index ? { ...one, descending: one.descending !== true } : one),
+                                    }),
+                                    onRemove: () => push({ order: order.filter((_, at) => at !== index) }),
+                                    removeLabel: fillCopy(copy.builder.dropOrderBy, { field: sort.field }),
+                                })) }), _jsx(AddTag, { label: copy.builder.addOrder, options: sortable.filter((name) => !order.some((one) => one.field === name)), onPick: (name) => push({ order: [...order, { field: name, descending: false }] }) })] }), order.length === 0 ? (_jsx("p", { className: "text-meta text-muted", children: copy.builder.noOrder })) : null] }), _jsxs("section", { className: "flex min-w-0 flex-col gap-2", children: [_jsx(Rule, { label: copy.builder.groupBy }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1", children: [levels.map((level, index) => (_jsxs(Fragment, { children: [index === 0 ? null : (_jsx("span", { className: "shrink-0 text-micro text-muted", "aria-hidden": true, children: "\u203A" })), _jsx(Tags, { items: [
+                                            {
+                                                id: `${level.field}-${index}`,
+                                                label: level.field,
+                                                ...(level.grain == null ? {} : { note: level.grain }),
+                                                ...(DATE_TYPES.has(model.fields[level.field]?.type ?? "")
+                                                    ? {
+                                                        title: copy.builder.changeGrain,
+                                                        onSelect: () => push({
+                                                            levels: levels.map((one, at) => at === index ? { ...one, grain: nextGrain(one.grain) } : one),
+                                                        }),
+                                                    }
+                                                    : {}),
+                                                onRemove: () => push({ levels: levels.filter((_, at) => at !== index) }),
+                                                removeLabel: fillCopy(copy.builder.dropLevel, { field: level.field }),
+                                            },
+                                        ] })] }, `${level.field}-${index}`))), _jsx(AddTag, { label: copy.builder.addGroup, options: scalarNames.filter((name) => !levels.some((one) => one.field === name)), onPick: (name) => push({ levels: [...levels, { field: name }] }) })] }), levels.length === 0 ? (_jsx("p", { className: "text-meta text-muted", children: copy.builder.noGrouping })) : null] }), levels.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("section", { className: "flex min-w-0 flex-col gap-2", children: [_jsx(Rule, { label: copy.builder.totals }), Object.keys(totals).length === 0 ? (_jsx("p", { className: "text-meta text-muted", children: copy.builder.noTotals })) : null, Object.entries(totals).map(([name, [fn, field]]) => (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("select", { value: fn, onChange: (event) => push({
+                                            totals: { ...totals, [name]: [event.target.value, field] },
+                                        }), className: `min-w-0 flex-1 basis-28 rounded-control border px-2 py-1 text-meta ${box}`, children: FOLD_FUNCTIONS.map((one) => (_jsx("option", { value: one, children: one }, one))) }), _jsx("select", { value: field, onChange: (event) => push({ totals: { ...totals, [name]: [fn, event.target.value] } }), className: select, children: scalarNames.map((one) => (_jsx("option", { value: one, children: one }, one))) }), _jsx("span", { className: "shrink-0 text-micro text-muted", children: fillCopy(copy.builder.totalAs, { name }) }), _jsx("button", { type: "button", "aria-label": copy.builder.dropTotal, onClick: () => {
+                                            const { [name]: _dropped, ...rest } = totals;
+                                            push({ totals: rest });
+                                        }, className: "ml-auto shrink-0 text-muted", children: _jsx(Trash2, { className: "size-4" }) })] }, name))), _jsx("div", { children: _jsxs(Button, { role: "ghost", disabled: scalarNames.length === 0, onClick: () => {
+                                        let name = "total";
+                                        let index = 2;
+                                        while (name in totals)
+                                            name = `total_${index++}`;
+                                        push({
+                                            totals: { ...totals, [name]: ["sum", scalarNames[0] ?? ""] },
+                                        });
+                                    }, children: [_jsx(Plus, { className: "size-4" }), " ", copy.builder.addTotal] }) })] }), _jsxs("section", { className: "flex min-w-0 flex-col gap-2", children: [_jsx(Rule, { label: copy.builder.filterPiles }), _jsx("p", { className: "text-meta text-muted", children: copy.builder.pilesNote }), _jsx(WhereTree, { model: havingModel, group: havingTree, onChange: (next) => push({ havingTree: next }) })] }), _jsxs("section", { className: "flex min-w-0 flex-col gap-2", children: [_jsx(Rule, { label: copy.builder.pileOrder }), groupOrder.length === 0 ? (_jsx("p", { className: "text-meta text-muted", children: copy.builder.noPileOrder })) : null, groupOrder.map((sort, index) => (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("select", { value: sort.field, onChange: (event) => push({
+                                            groupOrder: groupOrder.map((one, at) => at === index ? { ...one, field: event.target.value } : one),
+                                        }), className: select, children: [
+                                            ...levels.map((level) => level.field),
+                                            ...Object.keys(totals),
+                                            "count",
+                                        ].map((name) => (_jsx("option", { value: name, children: name }, name))) }), _jsxs("select", { value: sort.descending === true ? "desc" : "asc", onChange: (event) => push({
+                                            groupOrder: groupOrder.map((one, at) => at === index
+                                                ? { ...one, descending: event.target.value === "desc" }
+                                                : one),
+                                        }), className: `min-w-0 flex-1 basis-32 rounded-control border px-2 py-1 text-meta ${box}`, children: [_jsx("option", { value: "asc", children: copy.builder.ascending }), _jsx("option", { value: "desc", children: copy.builder.descending })] }), _jsx("button", { type: "button", "aria-label": copy.builder.dropOrder, onClick: () => push({ groupOrder: groupOrder.filter((_, at) => at !== index) }), className: "ml-auto shrink-0 text-muted", children: _jsx(Trash2, { className: "size-4" }) })] }, index))), _jsx("div", { children: _jsxs(Button, { role: "ghost", onClick: () => push({
+                                        groupOrder: [...groupOrder, { field: "count", descending: true }],
+                                    }), children: [_jsx(Plus, { className: "size-4" }), " ", copy.builder.addPileOrder] }) })] }), _jsxs("section", { className: "flex min-w-0 flex-col gap-2", children: [_jsx(Rule, { label: copy.builder.pilePage }), _jsx("p", { className: "text-meta text-muted", children: copy.builder.pilePageNote }), _jsxs("label", { className: "flex items-center gap-2 text-meta", children: [_jsx("input", { type: "checkbox", checked: groupLimit !== undefined, onChange: (event) => push({ groupLimit: event.target.checked ? 20 : undefined }) }), copy.builder.limitPiles] }), groupLimit !== undefined ? (_jsx("input", { type: "number", min: 0, value: groupLimit, onChange: (event) => push({ groupLimit: Number(event.target.value) }), className: `w-32 rounded-control border px-2 py-1 text-meta ${box}` })) : null] })] })) : null, _jsxs("section", { className: "flex min-w-0 flex-col gap-2", children: [_jsx(Rule, { label: copy.builder.fields }), _jsx("p", { className: "text-meta text-muted", children: fields.length === 0
+                            ? copy.builder.allFields
+                            : fillCopy(copy.builder.someFields, {
+                                shown: fields.length,
+                                total: names.length,
+                            }) }), _jsx("div", { className: "flex flex-wrap gap-2", children: names.map((name) => {
+                            const chosen = fields.includes(name);
+                            return (_jsx("button", { type: "button", onClick: () => push({
+                                    fields: chosen ? fields.filter((one) => one !== name) : [...fields, name],
+                                }), className: `rounded-pill border px-2 py-0.5 text-micro ${chosen ? "border-accent/40 bg-accent/18 text-ink" : `text-muted ${box}`}`, children: name }, name));
+                        }) })] }), _jsx(JsonEditor, { value: rawText, onChange: updateRaw, error: rawError, height: "14rem", label: copy.builder.json }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { role: "primary", disabled: rawError !== null, onClick: () => onApply(rawText.trim() === "" ? undefined : JSON.parse(rawText)), children: copy.builder.apply }), onCancel === undefined ? null : (_jsx(Button, { role: "ghost", onClick: onCancel, children: copy.builder.cancel }))] })] }));
+}

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

@@ -0,0 +1,22 @@
+import { type CriteriaJoin, type CriteriaPath, type SearchCriteria } from "./criteria.js";
+import type { Surface } from "../../foundations/types.js";
+export type CriteriaChipsProps = {
+    /** Lo que la barra tiene puesto. Grupos y filtros mezclados: acá se separan. */
+    criteria: readonly SearchCriteria[];
+    /** Abrir el constructor sobre una instancia. */
+    onOpen?: (path: CriteriaPath) => void;
+    /** Cambiar cómo se juntan los de un nodo. */
+    onJoin?: (path: CriteriaPath, join: CriteriaJoin) => void;
+    /** Sacar una instancia, o una rama entera. */
+    onRemove?: (path: CriteriaPath) => void;
+    /**
+     * Cuál nodo está ABIERTO: dónde va a caer lo próximo que se escriba.
+     *
+     * Se marca porque si no, escribir `#and` y después una condición la mete en un
+     * lugar que nadie eligió mirando: el grupo existe, la condición entra, y el
+     * único que sabía dónde era el que la escribió.
+     */
+    open?: CriteriaPath;
+    surface?: Surface;
+};
+export declare function CriteriaChips({ criteria, onOpen, onJoin, onRemove, open, surface, }: CriteriaChipsProps): import("react").JSX.Element;

package/dist/components/search/CriteriaChips.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { filtersOf, groupsOf, } from "./criteria.js";
+import { JoinWord } from "./JoinWord.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { bySurface, useSurface } from "../../foundations/surface.js";
+import { ChevronRight, Layers, ListFilter, X } from "lucide-react";
+export function CriteriaChips({ criteria, onOpen, onJoin, onRemove, open, surface, }) {
+    const sup = useSurface(surface);
+    const copy = useUiCopy();
+    const groups = groupsOf(criteria);
+    const filters = filtersOf(criteria);
+    /* La ruta se cuenta sobre la lista ENTERA y no sobre la mitad dibujada: es la
+       identidad de la instancia, y una identidad que cambia según de qué lado se
+       la mire no identifica nada. */
+    const pathOf = (one) => [
+        criteria.findIndex((each) => each.id === one.id),
+    ];
+    return (_jsxs(_Fragment, { children: [groups.length === 0 ? null : (_jsx(Zone, { lead: copy.search.groupedBy, icon: Layers, surface: sup, children: groups.map((one, at) => (_jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [at === 0 ? null : (_jsx(ChevronRight, { className: "size-3 shrink-0 text-muted", strokeWidth: 2, "aria-hidden": true })), _jsx(Chip, { label: one.label, path: pathOf(one), ...(onOpen === undefined ? {} : { onOpen }), ...(onRemove === undefined ? {} : { onRemove }), surface: sup })] }, one.id))) })), filters.length === 0 ? null : (_jsx(Zone, { lead: copy.search.narrowedBy, icon: ListFilter, surface: sup, children: filters.map((one) => (_jsx(Node, { node: one, path: pathOf(one), ...(onOpen === undefined ? {} : { onOpen }), ...(onJoin === undefined ? {} : { onJoin }), ...(onRemove === undefined ? {} : { onRemove }), ...(open === undefined ? {} : { open }), surface: sup }, one.id))) }))] }));
+}
+function Node({ node, path, onOpen, onJoin, onRemove, open, surface, }) {
+    const copy = useUiCopy();
+    if (node.kind !== "join") {
+        /* Una instancia que no lleva expresión no tiene qué editar: el constructor
+           edita lo que VIAJA, y ésta la contesta quien la declaró. Se ve y se saca
+           como cualquiera; lo que no hace es prometer una puerta que da a nada. */
+        const editable = node.kind === "group" || node.where !== undefined;
+        return (_jsx(Chip, { label: node.label, path: path, ...(onOpen === undefined || !editable ? {} : { onOpen }), ...(onRemove === undefined ? {} : { onRemove }), surface: surface }));
+    }
+    /* El nodo abierto se marca: es donde va a caer lo próximo. Un anillo y no un
+       fondo, porque adentro hay fichas que ya tienen el suyo. */
+    const isOpen = open !== undefined && open.join(".") === path.join(".");
+    return (_jsxs("span", { className: `inline-flex min-w-0 flex-wrap items-center gap-1 rounded-control border px-1.5 py-0.5 ${bySurface(surface, "border-line bg-ink/4", "border-chrome-ink/25 bg-chrome-ink/8")} ${isOpen ? "ring-1 ring-primary/60" : ""}`, children: [_jsx(JoinWord, { join: node.join, ...(onJoin === undefined ? {} : { onChange: (next) => onJoin(path, next) }), surface: surface }), node.of.length === 0 ? (
+            /* Un nodo recién abierto no tiene nada adentro, y un corchete vacío se
+               lee como un error. Dice que está esperando. */
+            _jsx("span", { className: `shrink-0 text-micro italic ${bySurface(surface, "text-muted", "text-chrome-muted")}`, children: copy.search.landsHere })) : null, node.of.map((child, at) => (_jsx(Node, { node: child, path: [...path, at], ...(onOpen === undefined ? {} : { onOpen }), ...(onJoin === undefined ? {} : { onJoin }), ...(onRemove === undefined ? {} : { onRemove }), ...(open === undefined ? {} : { open }), surface: surface }, child.id)))] }));
+}
+/** El contexto, con su palabra adelante. Sin la palabra, las fichas no dicen de
+ *  qué son. No lleva caja: una caja adentro del campo las separa de él. */
+function Zone({ lead, icon: Icon, surface, children, }) {
+    return (_jsxs("span", { className: "inline-flex min-w-0 shrink items-center gap-1", children: [_jsx(Icon, { className: `size-3 shrink-0 ${bySurface(surface, "text-muted", "text-chrome-muted")}`, strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: `shrink-0 text-micro ${bySurface(surface, "text-muted", "text-chrome-muted")}`, children: lead }), _jsx("span", { className: "flex min-w-0 flex-wrap items-center gap-1", children: children })] }));
+}
+function Chip({ label, path, onOpen, onRemove, surface, }) {
+    const copy = useUiCopy();
+    const shell = `inline-flex min-w-0 shrink-0 items-center gap-1 rounded-pill border py-0.5 text-micro ${bySurface(surface, "border-accent/40 bg-accent/18 text-ink", "border-chrome-link/35 bg-chrome-link/18 text-chrome-link")} ${onRemove === undefined ? "px-2" : "pr-0.5 pl-2"}`;
+    const remove = onRemove === undefined ? null : (_jsx("button", { type: "button", onClick: (event) => {
+            /* Sin esto, sacarla también la abre: el click llega acá y después
+               sube. */
+            event.stopPropagation();
+            onRemove(path);
+        }, "aria-label": copy.search.removeFilter.replace("{label}", label), className: `inline-flex size-4 shrink-0 items-center justify-center rounded-pill transition-colors duration-(--duration-instant) ${bySurface(surface, "hover:bg-primary/20", "hover:bg-chrome-link/25")}`, children: _jsx(X, { className: "size-3", strokeWidth: 2.5 }) }));
+    if (onOpen === undefined) {
+        return (_jsxs("span", { className: shell, children: [_jsx("span", { className: "min-w-0 truncate", children: label }), remove] }));
+    }
+    /* Un botón adentro de otro es HTML inválido —el navegador cierra el de afuera
+       antes de tiempo y el click deja de llegar—, así que la ficha que se abre Y se
+       saca es un `span` con `role`, y la × adentro es el único botón de verdad. */
+    return (_jsxs("span", { role: "button", tabIndex: 0, onClick: () => onOpen(path), onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onOpen(path);
+            }
+        }, title: copy.search.openBuilderHere, className: `${shell} cursor-pointer`, children: [_jsx("span", { className: "min-w-0 truncate", children: label }), remove] }));
+}

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

@@ -0,0 +1,142 @@
+import type { CriteriaJoin } from "./criteria.js";
+import { type ModelDefinition } from "./model.js";
+/** Una condición, tal como la declara el motor. `operator` sale del `ops` del campo, así que
+ *  lo que el constructor ofrece es exactamente lo que el modelo acepta. */
+export interface BuiltCondition {
+    field: string;
+    operator: string;
+    value: unknown;
+}
+/** Lo que el filtro puede ser en su forma real: una condición, un grupo `all`/`any` de más
+ *  filtros —lo que el árbol arma, a cualquier profundidad—, o un `negate` que llegó de otro
+ *  lado y que el árbol no fabrica, pero que este componente sabe mostrar y editar como JSON. */
+export type BuiltFilter = BuiltCondition | {
+    all: BuiltFilter[];
+} | {
+    any: BuiltFilter[];
+} | {
+    negate: BuiltFilter;
+};
+/** Si esto es una de las formas que el filtro reconoce — condición, o grupo `all`/`any`/
+ *  `negate`. Un JSON válido que no es ninguna de éstas —`{}`, `{"foo": 1}`, un array suelto—
+ *  no es un filtro que este componente sepa dibujar, y se trata como error de forma en vez de
+ *  intentar mostrar cualquier cosa. */
+export declare function isRecognizedFilter(value: unknown): value is BuiltFilter;
+export interface TreeCondition {
+    kind: "condition";
+    field: string;
+    operator: string;
+    value: string;
+    /** El otro extremo, para los operadores que comparan contra dos —hoy `between`—. Vacío en
+     *  todos los demás, donde no significa nada. */
+    upper?: string;
+}
+export interface TreeGroup {
+    kind: "group";
+    /** Todas, cualquiera, o NINGUNA. Las tres, y las mismas que la barra: negar
+     *  algo se podía escribir sólo en el JSON, y una pregunta que el editor no
+     *  sabe construir es una pregunta que la mayoría no va a hacer. */
+    join: CriteriaJoin;
+    children: TreeNode[];
+}
+export type TreeNode = TreeCondition | TreeGroup;
+export declare function blankCondition(model: ModelDefinition, first: string | undefined): TreeCondition;
+export declare function blankGroup(model: ModelDefinition, first: string | undefined): TreeGroup;
+/** El árbol como el filtro que viaja.
+ *
+ *      in   condición sola
+ *      out  esa condición, sin envolver
+ *
+ *      in   grupo con dos hijos, join «any»
+ *      out  {any: [ … , … ]}
+ *
+ *  Un grupo de un solo hijo no se envuelve —es ese hijo—, y un grupo sin hijos desaparece: ni
+ *  «todas» ni «cualquiera» vacío es un filtro que alguien pidió. La regla vale en cualquier
+ *  nivel, no sólo en la raíz, así que anidar un grupo de una condición sola es lo mismo que no
+ *  haberlo anidado. */
+export declare function treeToFilter(node: TreeNode): BuiltFilter | undefined;
+/** El filtro leído de vuelta a un árbol.
+ *
+ *      in   {field: "name", operator: "=", value: "labs"}
+ *      out  TreeCondition
+ *
+ *      in   {any: [{all: [cond1, cond2]}, cond3]}       grupo adentro de grupo
+ *      out  TreeGroup(any) con un TreeGroup(all) y una condición como hijos
+ *
+ *      in   {negate: {any: [cond1, cond2]}}
+ *      out  TreeGroup(not) con las dos condiciones como hijos
+ *
+ *  El `negate` de un `any` se abre en el grupo «ninguna» y no queda como un grupo
+ *  adentro de otro: es lo que `treeToFilter` vuelve a escribir, así que ida y
+ *  vuelta dan lo mismo. Lo que NO se puede leer —un objeto que no es ni una
+ *  condición ni ninguna de las tres formas— devuelve `null`, y ahí el componente
+ *  lo muestra de sólo lectura sin dejar de poder tocarlo como JSON.
+ */
+export declare function treeFromFilter(filter: unknown): TreeNode | null;
+/** El filtro dicho en una línea, para una ficha o un rótulo.
+ *
+ *      in   {field: "row_count", operator: ">", value: 1000}, con el modelo
+ *      out  'filas mayor que 1000'
+ *
+ *      in   {all: [cond1, cond2]}
+ *      out  'el nombre contiene labs y filas mayor que 1000'
+ *
+ *      in   {any: [cond1, cond2]}
+ *      out  'el nombre es a o el nombre es b'
+ *
+ *  Cada condición la dice `sayCondition`, que es la misma que usa la barra: sin
+ *  eso, lo escrito en la barra y lo armado en el diálogo se leen distinto aunque
+ *  filtren igual, y nadie sabe cuál de las dos frases es la que manda.
+ *
+ *  **El modelo es el que sabe cómo se llama un campo.** Sin él queda el nombre
+ *  crudo —`row_count`—, que es lo mejor que se puede decir sin preguntarle a
+ *  nadie.
+ *
+ *  Un grupo anidado se encierra entre paréntesis, que es lo que evita que «a y (b o c)» se
+ *  lea como «(a y b) o c». Para más de tres condiciones se corta: una ficha que no entra en
+ *  la barra no dice nada — para eso está abrir el constructor y verlo entero. */
+export declare function describeFilter(node: BuiltFilter, model?: ModelDefinition): string;
+/** El filtro dibujado tal como es, recursivo: una condición es una línea, `all`/`any` son un
+ *  grupo con su rótulo y sus hijos adentro, `negate` es «no» envolviendo al que niega.
+ *
+ *  Es la mitad de sólo lectura de este archivo, y también sirve sola: mostrar qué dice un
+ *  filtro que ya está puesto no necesita abrir el constructor. */
+export declare function ExpressionView({ node, model, depth, }: {
+    node: BuiltFilter;
+    /** Quién sabe cómo se llama un campo. Sin él queda el nombre crudo. */
+    model?: ModelDefinition;
+    depth?: number;
+}): import("react").JSX.Element;
+export declare function WhereTree({ model, group, onChange, depth, focus, }: {
+    model: ModelDefinition;
+    group: TreeGroup;
+    onChange: (next: TreeGroup) => void;
+    depth?: number;
+    /**
+     * El campo de la condición que hay que mostrar PRIMERO: la que alguien tocó en
+     * la barra.
+     *
+     * Sin esto, tocar una ficha abría el constructor en la regla uno y había que
+     * buscar entre doce la que uno venía mirando — que es la manera más rápida de
+     * editar la equivocada. Se marca y se lleva a la vista; no se abre en un modo
+     * distinto, porque el constructor es el mismo.
+     *
+     * Marca a CUALQUIER profundidad: el árbol se lo pasa a los grupos que anida.
+     *
+     * **Es un nombre de campo, no una ruta**, así que dos condiciones sobre el
+     * mismo campo en ramas distintas se marcan las dos y la vista va a la primera.
+     * Distinguirlas pide que el árbol y las instancias de la barra compartan la
+     * identidad, y hoy no la comparten: `whereOf` arma el filtro salteándose los
+     * niveles y lo que no viaja, así que la posición en uno no es la posición en
+     * el otro.
+     */
+    focus?: string;
+}): import("react").JSX.Element;
+export declare function FilterBuilder({ model, initial, onApply, onCancel, }: {
+    model: ModelDefinition;
+    /** El filtro que ya estaba puesto, si había uno. Reabrir el constructor con esto adentro
+     *  tiene que seguir donde quedó, no empezar en blanco. */
+    initial?: BuiltFilter;
+    onApply: (where: BuiltFilter | undefined) => void;
+    onCancel?: () => void;
+}): import("react").JSX.Element;