@sincpro/web-ui 0.0.0-stage → 0.1.0

package/dist/components/search/FilterBuilder.js

@@ -0,0 +1,421 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { JoinWord } from "./JoinWord.js";
+import { JsonEditor } from "./JsonEditor.js";
+import { fieldLabel, filterableNames, } from "./model.js";
+import { opLabel, sayCondition } from "./query.js";
+import { currentCopy, fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { useSurface } from "../../foundations/surface.js";
+import { Button } from "../../primitives/button/index.js";
+import { FolderTree, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+/* ====================================================================== *
+ *  UN FILTRO QUE ALGUIEN ARMA, DE LO QUE EL MODELO DICE QUE ACEPTA.
+ *
+ *  Los recortes con nombre de al lado —«vencidas», «con entregas pendientes»— son las
+ *  preguntas que alguien ya pensó. Esto es para las demás: elegir un campo, un
+ *  operador, escribir un valor — agruparlos con Y o con O, anidar un grupo
+ *  adentro de otro tantas veces como haga falta, o escribir directamente el
+ *  JSON para copiar o pegar una criteria entera.
+ *
+ *  **Nada acá está escrito a mano.** Los campos salen de la definición del
+ *  modelo que manda el servidor, y también los operadores de cada uno: un
+ *  campo de texto ofrece «contiene», uno numérico ofrece «>», uno que admite
+ *  vacío ofrece «está vacío». Agregar una columna la hace aparecer acá, con
+ *  sus operadores correctos, sin tocar este archivo.
+ *
+ *  **Un árbol, no una lista.** Cada grupo —la raíz incluida— tiene su propio
+ *  «todas / cualquiera» y sus propios hijos: una condición, o otro grupo
+ *  anidado adentro. El ícono del árbol agrega un grupo nuevo al lado de la
+ *  fila que se tocó; el `+` agrega otra condición.
+ *
+ *  **Un solo componente renderiza y construye — y siempre hay un JSON al
+ *  lado.** El árbol y el editor de código son dos vistas de la MISMA
+ *  criteria, sincronizadas en las dos direcciones: tocar el árbol reescribe
+ *  el JSON, y escribir un JSON reconocible rehace el árbol. Lo único que el
+ *  árbol no sabe construir ni mostrar es un NOT: si el filtro trae uno en
+ *  cualquier nivel, se dibuja de sólo lectura con `ExpressionView` en su
+ *  lugar, y el JSON sigue siendo la manera de tocarlo.
+ * ====================================================================== */
+/* Cómo se llama un operador para quien lo lee: `copy.ops`, que es la MISMA tabla que usa la
+   barra al armar la pregunta. Dos tablas es que la misma comparación se llame de dos maneras
+   en la misma pantalla. */
+/** Qué operadores no llevan valor: preguntar si algo está vacío no necesita escribir nada. */
+const WITHOUT_VALUE = new Set(["is null"]);
+/** Qué operadores comparan contra DOS valores. «Entre el 1 y el 31» es la pregunta que todo
+ *  el mundo hace sobre fechas, y escribirla como dos reglas sueltas es la forma de
+ *  equivocarse con uno de los dos extremos. */
+const WITH_RANGE = new Set(["between"]);
+/** Qué clase de input pide un valor, leído del tipo del campo. */
+function inputType(type) {
+    if (type === "integer" || type === "number")
+        return "number";
+    if (type === "date")
+        return "date";
+    if (type === "datetime")
+        return "datetime-local";
+    return "text";
+}
+function isCondition(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        !Array.isArray(value) &&
+        typeof value.field === "string" &&
+        typeof value.operator === "string" &&
+        "value" in value);
+}
+/** 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 function isRecognizedFilter(value) {
+    if (isCondition(value))
+        return true;
+    if (typeof value !== "object" || value === null)
+        return false;
+    const record = value;
+    if (Array.isArray(record.all))
+        return true;
+    if (Array.isArray(record.any))
+        return true;
+    if ("negate" in record)
+        return true;
+    return false;
+}
+export function blankCondition(model, first) {
+    const field = first ?? "";
+    return {
+        kind: "condition",
+        field,
+        operator: model.fields[field]?.ops[0] ?? "=",
+        value: "",
+    };
+}
+export function blankGroup(model, first) {
+    return { kind: "group", join: "all", children: [blankCondition(model, first)] };
+}
+/** 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 function treeToFilter(node) {
+    if (node.kind === "condition") {
+        if (node.field === "")
+            return undefined;
+        if (WITHOUT_VALUE.has(node.operator)) {
+            return { field: node.field, operator: node.operator, value: true };
+        }
+        if (WITH_RANGE.has(node.operator)) {
+            /* Un rango a medio escribir no es medio rango: mientras falte un extremo, la regla no
+               viaja. */
+            if (node.value === "" || (node.upper ?? "") === "")
+                return undefined;
+            return { field: node.field, operator: node.operator, value: [node.value, node.upper] };
+        }
+        /* **Una regla sin valor no filtra.** Viajaba con `value: ""`, y eso no es «todavía no
+           escribí nada»: contra un `=` es «el campo es la cadena vacía», que vacía la lista
+           mientras alguien sigue tipeando, y contra un `like` es «contiene nada», que la deja
+           igual. Para preguntar por lo que está vacío está el operador «está vacío», que el
+           modelo publica en los campos que lo admiten — explícito, y no por omisión. */
+        if (node.value === "")
+            return undefined;
+        return { field: node.field, operator: node.operator, value: node.value };
+    }
+    const kept = node.children
+        .map(treeToFilter)
+        .filter((one) => one !== undefined);
+    if (kept.length === 0)
+        return undefined;
+    /* «Ninguna» niega el grupo ENTERO y no cada hijo por su cuenta: «ni vencida ni
+       grande» es `no (vencida o grande)`. Y un grupo de uno tampoco se desarma
+       acá —desarmarlo perdería la negación—, que es lo mismo que hace la barra. */
+    if (node.join === "not") {
+        return { negate: kept.length === 1 ? kept[0] : { any: kept } };
+    }
+    if (kept.length === 1)
+        return kept[0];
+    return node.join === "any" ? { any: kept } : { all: kept };
+}
+/** Una condición de vuelta a una fila editable: el valor vuelve a texto, que es lo único que
+ *  un `<input>` sabe mostrar. Una lista —el valor de un `in`— se escribe separada por comas. */
+function conditionToTree(condition) {
+    if (WITH_RANGE.has(condition.operator) && Array.isArray(condition.value)) {
+        const [from, to] = condition.value;
+        return {
+            kind: "condition",
+            field: condition.field,
+            operator: condition.operator,
+            value: String(from ?? ""),
+            upper: String(to ?? ""),
+        };
+    }
+    return {
+        kind: "condition",
+        field: condition.field,
+        operator: condition.operator,
+        value: WITHOUT_VALUE.has(condition.operator)
+            ? ""
+            : Array.isArray(condition.value)
+                ? condition.value.join(",")
+                : String(condition.value ?? ""),
+    };
+}
+/** 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 function treeFromFilter(filter) {
+    if (isCondition(filter))
+        return conditionToTree(filter);
+    if (typeof filter !== "object" || filter === null)
+        return null;
+    const record = filter;
+    if ("negate" in record) {
+        const inside = record.negate;
+        /* Un `negate` de un `any` son los hijos del grupo negado; cualquier otra cosa
+           es un solo hijo. */
+        const raws = typeof inside === "object" &&
+            inside !== null &&
+            Array.isArray(inside.any)
+            ? inside.any
+            : [inside];
+        const children = readChildren(raws);
+        return children === null ? null : { kind: "group", join: "not", children };
+    }
+    const join = Array.isArray(record.all)
+        ? "all"
+        : Array.isArray(record.any)
+            ? "any"
+            : null;
+    if (join === null)
+        return null;
+    const children = readChildren(record[join]);
+    return children === null ? null : { kind: "group", join, children };
+}
+/** Los hijos de un grupo, o `null` si alguno no se puede leer: medio árbol es
+ *  peor que ninguno, porque dibuja algo que no es lo que filtra. */
+function readChildren(raws) {
+    const children = [];
+    for (const raw of raws) {
+        const child = treeFromFilter(raw);
+        if (child === null)
+            return null;
+        children.push(child);
+    }
+    return children;
+}
+function stringifyFilter(filter) {
+    return filter === undefined ? "" : JSON.stringify(filter, null, 2);
+}
+/** Un valor de condición, legible: una lista se junta con comas, y lo que no tiene nada se
+ *  dice en palabras en vez de mostrar `true`/`undefined` sueltos. */
+function describeValue(value, operator) {
+    const copy = currentCopy();
+    if (Array.isArray(value)) {
+        return operator !== undefined && WITH_RANGE.has(operator)
+            ? value.join(` ${copy.search.and} `)
+            : value.join(", ");
+    }
+    /* Las mismas dos palabras que la tabla pone en una celda booleana: un `sí` que
+       no es el `sí` de al lado es una segunda manera de decir lo mismo. */
+    if (typeof value === "boolean")
+        return value ? copy.table.yes : copy.table.no;
+    return String(value ?? "");
+}
+/** 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 function describeFilter(node, model) {
+    return say(node, model, 0);
+}
+function say(node, model, depth) {
+    const copy = currentCopy();
+    if ("all" in node || "any" in node) {
+        const items = "all" in node ? node.all : node.any;
+        const glue = "all" in node ? copy.search.and : copy.search.or;
+        const said = items.slice(0, 3).map((child) => say(child, model, depth + 1));
+        if (items.length > 3) {
+            said.push(fillCopy(copy.search.andMore, { count: items.length - 3 }));
+        }
+        const joined = said.join(` ${glue} `);
+        return depth === 0 || said.length === 1 ? joined : `(${joined})`;
+    }
+    if ("negate" in node)
+        return `${copy.search.notWord} ${say(node.negate, model, depth + 1)}`;
+    const label = model === undefined ? node.field : fieldLabel(model, node.field, copy.locale);
+    return sayCondition(label, node.operator, describeValue(node.value, node.operator));
+}
+/** 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 function ExpressionView({ node, model, depth = 0, }) {
+    const surface = useSurface();
+    const copy = useUiCopy();
+    const box = surface === "chrome" ? "border-chrome-ink/20" : "border-ink/15";
+    const indent = depth === 0 ? "" : "ml-4";
+    if ("all" in node || "any" in node) {
+        /* LAS MISMAS TRES PALABRAS QUE LA BARRA. Un grupo que acá se llama «coincide
+           con alguna» y en la ficha «cualquiera» son dos vocabularios para una sola
+           cosa, y el que los lee tiene que aprender los dos. */
+        const label = "all" in node ? copy.search.joins.all : copy.search.joins.any;
+        const items = "all" in node ? node.all : node.any;
+        return (_jsxs("div", { className: `flex flex-col gap-1 border-l-2 pl-2 ${box} ${indent}`, children: [_jsx("p", { className: "text-micro text-muted", children: label }), items.map((child, index) => (_jsx(ExpressionView, { node: child, ...(model === undefined ? {} : { model }), depth: depth + 1 }, index)))] }));
+    }
+    if ("negate" in node) {
+        return (_jsxs("div", { className: `flex flex-col gap-1 border-l-2 pl-2 ${box} ${indent}`, children: [_jsx("p", { className: "text-micro text-muted", children: copy.search.joins.none }), _jsx(ExpressionView, { node: node.negate, ...(model === undefined ? {} : { model }), depth: depth + 1 })] }));
+    }
+    /* Y la misma frase que la ficha: una condición se lee igual esté donde esté. */
+    return _jsx("p", { className: `text-meta ${indent}`, children: describeFilter(node, model) });
+}
+/* ---------------------------------------------------------------------- *
+ *  UN GRUPO, DIBUJADO — la pieza que se llama a sí misma para anidar.
+ * ---------------------------------------------------------------------- */
+export function WhereTree({ model, group, onChange, depth = 0, focus, }) {
+    const names = filterableNames(model);
+    const copy = useUiCopy();
+    const surface = useSurface();
+    const box = surface === "chrome"
+        ? "border-chrome-ink/20 bg-chrome text-chrome-ink"
+        : "border-ink/15 bg-surface text-ink";
+    function setChild(index, next) {
+        onChange({
+            ...group,
+            children: group.children.map((c, at) => (at === index ? next : c)),
+        });
+    }
+    function addConditionAfter(index) {
+        onChange({
+            ...group,
+            children: [
+                ...group.children.slice(0, index + 1),
+                blankCondition(model, names[0]),
+                ...group.children.slice(index + 1),
+            ],
+        });
+    }
+    function addGroupAfter(index) {
+        onChange({
+            ...group,
+            children: [
+                ...group.children.slice(0, index + 1),
+                blankGroup(model, names[0]),
+                ...group.children.slice(index + 1),
+            ],
+        });
+    }
+    function removeAt(index) {
+        onChange({ ...group, children: group.children.filter((_, at) => at !== index) });
+    }
+    return (_jsxs("div", { className: `flex min-w-0 flex-col gap-2 rounded-control border p-2 ${box}`, children: [_jsxs("p", { className: "flex flex-wrap items-baseline gap-1 text-meta", children: [copy.search.askJoin, _jsx(JoinWord, { join: group.join, onChange: (join) => onChange({ ...group, join }) })] }), group.children.map((child, index) => child.kind === "group" ? (_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(WhereTree, { model: model, group: child, onChange: (next) => setChild(index, next), depth: depth + 1, ...(focus === undefined ? {} : { focus }) }) }), _jsx("button", { type: "button", "aria-label": copy.builder.dropGroup, disabled: group.children.length === 1, onClick: () => removeAt(index), className: "mt-2 text-muted disabled:opacity-30", children: _jsx(Trash2, { className: "size-4" }) })] }, index)) : (_jsxs("div", { 
+                /* La que se vino a ver se marca y se trae a la vista. El anillo y no
+                   un fondo: el fondo compite con el `select` que hay que tocar. */
+                ref: focus !== undefined && child.field === focus
+                    ? (node) => node?.scrollIntoView({ block: "nearest" })
+                    : undefined, className: `flex min-w-0 flex-wrap items-center gap-2 rounded-control ${focus !== undefined && child.field === focus
+                    ? "-m-1 p-1 ring-1 ring-primary/60"
+                    : ""}`, children: [_jsx("select", { value: child.field, onChange: (event) => setChild(index, {
+                            ...child,
+                            field: event.target.value,
+                            operator: model.fields[event.target.value]?.ops.includes(child.operator)
+                                ? child.operator
+                                : (model.fields[event.target.value]?.ops[0] ?? "="),
+                        }), className: `min-w-0 flex-1 basis-40 rounded-control border px-2 py-1 text-meta ${box}`, children: names.map((name) => (_jsx("option", { value: name, children: name }, name))) }), _jsx("select", { value: child.operator, onChange: (event) => setChild(index, { ...child, operator: event.target.value }), className: `min-w-0 flex-1 basis-36 rounded-control border px-2 py-1 text-meta ${box}`, children: (model.fields[child.field]?.ops ?? []).map((operator) => (_jsx("option", { value: operator, children: opLabel(operator) }, operator))) }), WITHOUT_VALUE.has(child.operator) ? (_jsx("span", { className: "flex-1 text-meta text-muted", children: copy.builder.noValue })) : WITH_RANGE.has(child.operator) ? (_jsxs("span", { className: "flex min-w-0 flex-1 basis-40 items-center gap-1", children: [_jsx("input", { type: inputType(model.fields[child.field]?.type ?? "text"), value: child.value, onChange: (event) => setChild(index, { ...child, value: event.target.value }), placeholder: copy.builder.from, className: `min-w-0 flex-1 rounded-control border px-2 py-1 text-meta ${box}` }), _jsx("span", { className: "shrink-0 text-micro text-muted", children: copy.search.and }), _jsx("input", { type: inputType(model.fields[child.field]?.type ?? "text"), value: child.upper ?? "", onChange: (event) => setChild(index, { ...child, upper: event.target.value }), placeholder: copy.builder.to, className: `min-w-0 flex-1 rounded-control border px-2 py-1 text-meta ${box}` })] })) : (_jsx("input", { type: inputType(model.fields[child.field]?.type ?? "text"), value: child.value, onChange: (event) => setChild(index, { ...child, value: event.target.value }), placeholder: copy.builder.value, className: `min-w-0 flex-1 basis-40 rounded-control border px-2 py-1 text-meta ${box}` })), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-2", children: [_jsx("button", { type: "button", "aria-label": copy.builder.addRule, onClick: () => addConditionAfter(index), className: "text-muted hover:text-ink", children: _jsx(Plus, { className: "size-4" }) }), _jsx("button", { type: "button", "aria-label": copy.builder.addNested, onClick: () => addGroupAfter(index), className: "text-muted hover:text-ink", children: _jsx(FolderTree, { className: "size-4" }) }), _jsx("button", { type: "button", "aria-label": copy.builder.dropRule, disabled: group.children.length === 1, onClick: () => removeAt(index), className: "text-muted disabled:opacity-30", children: _jsx(Trash2, { className: "size-4" }) })] })] }, index)))] }));
+}
+export function FilterBuilder({ model, initial, onApply, onCancel, }) {
+    const names = filterableNames(model);
+    const copy = useUiCopy();
+    const decomposed = initial === undefined ? null : treeFromFilter(initial);
+    const [tree, setTree] = useState(() => decomposed !== null && decomposed.kind === "group"
+        ? decomposed
+        : decomposed !== null
+            ? { kind: "group", join: "all", children: [decomposed] }
+            : blankGroup(model, names[0]));
+    const [lockedView, setLockedView] = useState(initial !== undefined && decomposed === null ? initial : null);
+    const [rawText, setRawText] = useState(() => stringifyFilter(initial ?? treeToFilter(tree)));
+    const [rawError, setRawError] = useState(null);
+    /* Tocar el árbol reescribe el JSON para que muestre exactamente lo que el árbol ahora dice,
+       y suelta cualquier vista de sólo lectura que hubiera quedado. */
+    function updateTree(next) {
+        setTree(next);
+        setLockedView(null);
+        setRawText(stringifyFilter(treeToFilter(next)));
+        setRawError(null);
+    }
+    /* Escribir en el JSON intenta lo mismo al revés: si lo tipeado no trae un `negate` en
+       ningún nivel, el árbol se rehace para mostrarlo — Y y O, a cualquier profundidad. Si trae
+       uno, se dibuja de sólo lectura, pero el JSON sigue siendo lo que se va a aplicar. Si no
+       es ninguna de las dos —a medio escribir, o no es un filtro— no se toca lo que ya había. */
+    function updateRaw(text) {
+        setRawText(text);
+        if (text.trim() === "") {
+            setRawError(null);
+            setLockedView(null);
+            setTree(blankGroup(model, names[0]));
+            return;
+        }
+        let parsed;
+        try {
+            parsed = JSON.parse(text);
+        }
+        catch {
+            setRawError(currentCopy().builder.invalidJson);
+            return;
+        }
+        if (!isRecognizedFilter(parsed)) {
+            setRawError(currentCopy().builder.notFilter);
+            return;
+        }
+        setRawError(null);
+        const node = treeFromFilter(parsed);
+        if (node !== null) {
+            setTree(node.kind === "group" ? node : { kind: "group", join: "all", children: [node] });
+            setLockedView(null);
+        }
+        else {
+            setLockedView(parsed);
+        }
+    }
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-3 p-3", children: [_jsx("div", { className: "max-h-80 min-w-0 overflow-auto", children: lockedView !== null ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-meta text-muted", children: copy.search.unreadable }), _jsx(ExpressionView, { node: lockedView, model: model })] })) : (_jsx(WhereTree, { model: model, group: tree, onChange: updateTree })) }), _jsx(JsonEditor, { value: rawText, onChange: updateRaw, error: rawError, label: copy.builder.jsonFilter }), _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.add }), onCancel === undefined ? null : (_jsx(Button, { role: "ghost", onClick: onCancel, children: copy.builder.cancel }))] })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { CriteriaJoin } from "./criteria.js";
+import type { Surface } from "../../foundations/types.js";
+export declare function JoinWord({ join, onChange, surface, }: {
+    join: CriteriaJoin;
+    /** Sin esto la palabra es un valor: dice cómo junta, y no se toca. */
+    onChange?: (next: CriteriaJoin) => void;
+    surface?: Surface;
+}): import("react").JSX.Element;

package/dist/components/search/JoinWord.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { bySurface, useSurface } from "../../foundations/surface.js";
+import { Tags } from "../../primitives/tag/Tags.js";
+import { useState } from "react";
+/* ==================================================================== *
+ *  CÓMO SE JUNTA UN NODO, en una palabra que se toca.
+ *
+ *  Todas, cualquiera, ninguna. Son las tres y no dos: sin «ninguna», negar algo
+ *  sólo se podía escribir en el JSON, y una pregunta que el editor no sabe
+ *  construir es una pregunta que la mayoría no va a hacer.
+ *
+ *  ── Una palabra, no un símbolo ──────────────────────────────────────
+ *
+ *  «Y» y «O» son de quien escribe consultas; «todas» y «cualquiera» son de quien
+ *  busca. Y son las de la copia, así que cambiarlas las cambia en los dos lados
+ *  a la vez.
+ *
+ *  ── Se abre en sus opciones, no rota ────────────────────────────────
+ *
+ *  Con tres, un botón que alterna no dice cuáles hay ni cuál está puesta: hay
+ *  que apretarlo para averiguarlo, y averiguarlo cambia lo que filtra.
+ *
+ *  Vive acá y no adentro de la barra porque el constructor pregunta lo mismo. Un
+ *  `<select>` allá y una lista acá son dos controles para una decisión, y el que
+ *  aprendió uno no reconoce el otro.
+ * ==================================================================== */
+const OPTIONS = ["all", "any", "not"];
+export function JoinWord({ join, onChange, surface, }) {
+    const sup = useSurface(surface);
+    const copy = useUiCopy();
+    const [open, setOpen] = useState(false);
+    const word = copy.search.joins[join === "not" ? "none" : join];
+    if (onChange === undefined) {
+        return _jsx("span", { className: "shrink-0 text-micro text-muted", children: word });
+    }
+    return (_jsxs("span", { className: "relative inline-flex shrink-0", children: [_jsx("button", { type: "button", onClick: () => setOpen((current) => !current), "aria-expanded": open, title: copy.search.switchJoin, className: `shrink-0 rounded-control px-1 text-micro font-medium underline decoration-dotted underline-offset-4 decoration-current/40 transition-colors hover:decoration-current focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${bySurface(sup, "text-muted hover:text-ink", "text-chrome-muted hover:text-chrome-ink")}`, children: word }), open ? (_jsx("span", { className: "absolute top-full left-0 z-40 mt-1 rounded-panel border border-line-strong bg-surface p-1.5 shadow-float", children: _jsx(Tags, { stack: true, surface: "canvas", label: copy.search.switchJoin, items: OPTIONS.map((one) => ({
+                        id: one,
+                        label: copy.search.joins[one === "not" ? "none" : one],
+                        selected: one === join,
+                        onSelect: () => {
+                            onChange(one);
+                            setOpen(false);
+                        },
+                    })) }) })) : null] }));
+}

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

@@ -0,0 +1,19 @@
+/** Un JSON acomodado, o el mismo texto si todavía no se puede leer.
+ *
+ *      in   '{"all":[{"field":"a","operator":"=","value":1}]}'
+ *      out  el mismo, con sangría de dos espacios y un campo por línea
+ *
+ *  Separado del componente para que se pueda probar sin dibujar nada, que es lo único que
+ *  tiene lógica acá adentro. */
+export declare function formatJson(text: string): string;
+export declare function JsonEditor({ value, onChange, error, height, label, }: {
+    value: string;
+    onChange: (next: string) => void;
+    /** Qué está mal con lo escrito más allá de la sintaxis — que sea JSON válido pero no un
+     *  filtro, por ejemplo. Los errores de sintaxis los marca el editor, en su lugar exacto. */
+    error?: string | null;
+    height?: string;
+    /** Cómo se llama este editor. Sin esto dice sólo que es un editor de código,
+     *  que es lo único que se puede decir sin saber qué se escribe adentro. */
+    label?: string;
+}): import("react").JSX.Element;

package/dist/components/search/JsonEditor.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { json, jsonParseLinter } from "@codemirror/lang-json";
+import { linter, lintGutter } from "@codemirror/lint";
+import { useUiCopy } from "../../foundations/copy.js";
+import { useSurface } from "../../foundations/surface.js";
+import { useTheme } from "../../foundations/theme.js";
+import { Button } from "../../primitives/button/index.js";
+import CodeMirror, { EditorView, Prec } from "@uiw/react-codemirror";
+import { Wand2 } from "lucide-react";
+/* ====================================================================== *
+ *  UN JSON QUE SE ESCRIBE A MANO, EN UN EDITOR DE VERDAD.
+ *
+ *  CodeMirror y no un `<textarea>` con colores encima: eso último llegó hasta
+ *  donde llegan cincuenta líneas —pintar las comillas— y se quedaba corto en
+ *  todo lo demás, que es lo que hace usable escribir un filtro a mano:
+ *  números de línea para saber dónde está el error, plegado para no perderse
+ *  en un `all` de seis condiciones, y el subrayado en el carácter exacto
+ *  donde el JSON se rompe en vez de un cartel que dice que algo está mal.
+ *
+ *  El `linter` de abajo es el del propio paquete de JSON: marca el error
+ *  mientras se escribe. El aviso de afuera —`error`— sigue existiendo porque
+ *  dice otra cosa: que el JSON está bien escrito pero no es un filtro.
+ * ====================================================================== */
+/** Un JSON acomodado, o el mismo texto si todavía no se puede leer.
+ *
+ *      in   '{"all":[{"field":"a","operator":"=","value":1}]}'
+ *      out  el mismo, con sangría de dos espacios y un campo por línea
+ *
+ *  Separado del componente para que se pueda probar sin dibujar nada, que es lo único que
+ *  tiene lógica acá adentro. */
+export function formatJson(text) {
+    try {
+        return JSON.stringify(JSON.parse(text), null, 2);
+    }
+    catch {
+        return text;
+    }
+}
+/* The built-in `light`/`dark` themes pick the SYNTAX colours; this layer paints the box from
+   the system's tokens, so the editor sits on the same surface as the fields around it in
+   either theme instead of on a hard-coded one. */
+const SURFACE_THEME = EditorView.theme({
+    "&": { backgroundColor: "var(--color-surface)", color: "var(--color-ink)" },
+    ".cm-gutters": {
+        backgroundColor: "var(--color-ground)",
+        color: "var(--color-muted)",
+        borderRightStyle: "solid",
+        borderRightWidth: "thin",
+        borderRightColor: "var(--color-line)",
+    },
+    ".cm-activeLine, .cm-activeLineGutter": {
+        backgroundColor: "color-mix(in srgb, var(--color-ink) 5%, transparent)",
+    },
+    ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--color-ink)" },
+});
+export function JsonEditor({ value, onChange, error, height = "16rem", label, }) {
+    const copy = useUiCopy();
+    const surface = useSurface();
+    const { resolved } = useTheme();
+    /* The chrome is dark in both themes; the canvas follows the theme. */
+    const dark = surface === "chrome" || resolved === "dark";
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-micro text-muted", children: label ?? copy.builder.editor }), _jsxs(Button, { role: "ghost", size: "sm", disabled: value.trim() === "", onClick: () => onChange(formatJson(value)), children: [_jsx(Wand2, { className: "size-3" }), " ", copy.builder.format] })] }), _jsx("div", { className: `overflow-hidden rounded-control border ${error == null ? "border-ink/15" : "border-danger"}`, children: _jsx(CodeMirror, { value: value, onChange: onChange, height: height, theme: dark ? "dark" : "light", extensions: [
+                        json(),
+                        linter(jsonParseLinter()),
+                        lintGutter(),
+                        ...(surface === "chrome" ? [] : [Prec.highest(SURFACE_THEME)]),
+                    ], basicSetup: {
+                        lineNumbers: true,
+                        foldGutter: true,
+                        highlightActiveLine: true,
+                        autocompletion: false,
+                        /* El resaltado del par de llaves es lo que hace legible un filtro anidado: sin él,
+                           en un `any` adentro de un `all` hay que contar corchetes con el dedo. */
+                        bracketMatching: true,
+                        closeBrackets: true,
+                    } }) }), error == null ? null : _jsx("p", { className: "text-micro text-danger", children: error })] }));
+}

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

@@ -0,0 +1,78 @@
+import { type CriteriaJoin, type CriteriaPath, type SearchCriteria } from "./criteria.js";
+import type { ModelDefinition } from "./model.js";
+import type { Surface } from "../../foundations/types.js";
+import type { MenuGroup } from "../../primitives/menu/Menu.js";
+import { type ReactNode } from "react";
+/** Dónde se puede buscar. Lo declara el dominio, no esta pieza. */
+export interface SearchFacet {
+    id: string;
+    /** Cómo se lee en la sugerencia y en la ficha: «nombre», «columnas». */
+    label: string;
+}
+/**
+ * La CONJUNCIÓN entre dos recortes: «y» o «o».
+ *
+ * Con `onToggle` se puede tocar, y eso no es un adorno: «vencidas Y de este
+ * mes» y «vencidas O de este mes» son dos listas completamente distintas, y
+ * hasta acá cuál de las dos era estaba decidido por dentro y no se podía cambiar
+ * sin abrir el constructor. Sin `onToggle` es una palabra y nada más — que es lo
+ * correcto entre dos ejes, donde la Y no es una opción.
+ */
+/**
+ * Lo que la barra necesita. Está aparte de la función porque es el contrato: lo
+ * que una lista tiene que darle para que la barra pregunte, y nada más.
+ */
+export type SearchBarProps = {
+    facets: readonly SearchFacet[];
+    /**
+     * El modelo, cuando la lista lo tiene.
+     *
+     * Es lo que convierte la barra de «buscar un texto en un campo» a «hacer una
+     * pregunta»: de acá salen el tipo de cada campo —y con él qué se le puede
+     * escribir—, los operadores que acepta, sus valores posibles si es un enum, y
+     * por qué columna se busca un relacional. Sin esto, `facets` sigue funcionando
+     * como siempre: cada faceta es un campo de texto.
+     */
+    model?: ModelDefinition;
+    /**
+     * TODO lo que la barra tiene puesto: los niveles de agrupado y los filtros, en
+     * una sola lista de instancias.
+     *
+     * Una sola y no tres porque son lo mismo con clases distintas —ver
+     * `criteria.ts`—: lo que entra por el numeral, lo que se escribe a mano, lo
+     * que un filtro declarado trae con nombre y lo que sale del constructor son
+     * todas instancias, y por eso todas se leen, se tocan y se sacan igual.
+     */
+    criteria: readonly SearchCriteria[];
+    onCriteriaChange: (next: SearchCriteria[]) => void;
+    placeholder?: string;
+    /** Lo que el panel OFRECE. Lo puesto no sale de acá: sale de `criteria`. */
+    filters?: readonly MenuGroup[];
+    /**
+     * El editor de niveles de agrupado: `<GroupingLevels …/>`.
+     *
+     * Va en la MISMA columna del panel donde están los filtros, porque es la misma
+     * pregunta —«qué parte de esto estoy mirando»— y separarlos obliga a abrir dos
+     * cosas para armar un recorte sin poder ver los dos estados a la vez.
+     */
+    grouping?: ReactNode;
+    /**
+     * Alguien escribió `#and`, `#or` o `#not` y la barra abrió un nodo: esto avisa
+     * cuál, por si quien compone quiere hacer algo más con eso.
+     */
+    onOpenGroup?: (join: CriteriaJoin) => void;
+    favorites?: readonly MenuGroup[];
+    onFilterSelect?: (id: string) => void;
+    onFavoriteSelect?: (id: string) => void;
+    /**
+     * Abre el constructor. Recibe la RUTA de la instancia que se tocó, cuando se
+     * tocó una: el constructor abre ahí, en vez de abrir en la primera regla y
+     * obligar a buscar la que uno venía mirando entre doce.
+     */
+    onOpenBuilder?: (path?: CriteriaPath) => void;
+    /** Lo que va pegado al campo, a su derecha. */
+    trailing?: ReactNode;
+    /** 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, surface, }: SearchBarProps): import("react").JSX.Element;