@yuneta/gobj-ui 7.23.47 → 7.23.49

package/dist/gobj-ui.cjs.js

@@ -22558,6 +22558,172 @@ function yui_selection_bar(t, opts) {
 	};
 }
 //#endregion
+//#region src/yui_table_filter_clear.js
+/***********************************************************************
+*          yui_table_filter_clear.js
+*
+*      LA ✕ DE LOS FILTROS DE CABECERA DE UNA TABULATOR.
+*
+*      Un filtro de columna se pone escribiendo y se quita BORRANDO lo
+*      escrito, letra a letra, y no hay nada en la cabecera que diga
+*      que se puede quitar.  Con varias columnas filtradas, volver a
+*      ver la tabla entera es un ejercicio de memoria: cuáles toqué.
+*      La ✕ lo dice y lo hace.
+*
+*      TRES DECISIONES QUE NO SON OBVIAS:
+*
+*      - **Se ve mientras el filtro tenga contenido, con foco o sin
+*        él.**  Es al revés que la ✕ de un formulario
+*        (`yui_inputs.js`), que sólo aparece en el campo que se está
+*        editando para no encender un aspa en cada campo relleno.  Aquí
+*        el caso de uso es justo el contrario: el filtro ya está puesto,
+*        el foco está en otra parte, y lo que se quiere es verlo y
+*        quitarlo.  Escondida tras el foco harían falta dos clics.
+*
+*      - **Se borra con la API, no simulando teclas.**
+*        `setHeaderFilterValue(field, "")` es lo que Tabulator ofrece, y
+*        deja el valor y el filtro consistentes.  Sintetizar un `input`
+*        sobre el `<input>` depende de a qué escuche el editor de ese
+*        filtro, que cambia con el tipo de columna.
+*
+*      - **Se recorre la cabecera, no se envuelve el editor.**  Las
+*        columnas se construyen del esquema del topic, así que no hay un
+*        sitio único donde envolver el editor; y la cabecera se rehace
+*        sola cuando cambian las columnas.  El recorrido es idempotente
+*        -- marca lo que ya tiene aspa -- y se dispara con un
+*        `querySelector` de una sola pasada, así que repetirlo en cada
+*        render no cuesta nada.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var MARK = "data-yui-filter-clear";
+/***************************************************************
+*  Pon (o repón) la ✕ de cada filtro de cabecera de `table`.
+*
+*  Idempotente: los que ya la tienen se saltan.
+***************************************************************/
+function decorate(table) {
+	if (!table || !table.element) return;
+	if (!table.element.querySelector(`.tabulator-header-filter:not([${MARK}])`)) return;
+	let list = table.element.querySelectorAll(`.tabulator-header-filter:not([${MARK}])`);
+	for (const $filter of list) {
+		$filter.setAttribute(MARK, "1");
+		let $input = $filter.querySelector("input");
+		if (!$input) continue;
+		let $col = $filter.closest(".tabulator-col");
+		let field = $col ? $col.getAttribute("tabulator-field") : "";
+		if (!field) continue;
+		$filter.classList.add("yui-filter-has-clear");
+		let $btn = (0, _yuneta_gobj_js.createElement2)(["button", {
+			type: "button",
+			class: "delete is-small yui-filter-clear",
+			tabindex: "-1",
+			title: i18next.default.t("clear"),
+			"aria-label": i18next.default.t("clear"),
+			"data-i18n-title": "clear",
+			"data-i18n-aria-label": "clear"
+		}]);
+		const sync = () => {
+			$btn.classList.toggle("is-visible", !!$input.value);
+		};
+		$input.addEventListener("input", sync);
+		$input.addEventListener("change", sync);
+		$btn.addEventListener("click", (event) => {
+			event.stopPropagation();
+			table.setHeaderFilterValue(field, "");
+			sync();
+		});
+		$filter.appendChild($btn);
+		sync();
+	}
+}
+/***************************************************************
+*  Engancha la ✕ a una tabla ya creada.
+*
+*  Se llama una vez, con la tabla construida.  Los enganches
+*  cubren los dos momentos en que la cabecera aparece o se
+*  rehace: cuando se construye y cuando cambian las columnas.
+***************************************************************/
+function yui_table_filter_clear(table) {
+	if (!table) return;
+	decorate(table);
+	table.on("renderComplete", () => {
+		decorate(table);
+	});
+	table.on("columnVisibilityChanged", () => {
+		decorate(table);
+	});
+}
+//#endregion
+//#region src/yui_row_search.js
+/***********************************************************************
+*          yui_row_search.js
+*
+*      ¿ESTÁ ESTE TÉRMINO EN ESTA FILA?
+*
+*      La caja de búsqueda de una tabla de treedb miraba los valores de
+*      la fila con `String(val)`, y una fila de treedb no es plana: un
+*      fkey llega como una LISTA DE OBJETOS
+*      `[{id, topic_name, hook_name}]`, y `String()` de eso es
+*      `"[object Object]"`.  O sea que buscar el taller de un equipo --
+*      que es donde vive el dato que un operador tiene en la cabeza --
+*      no encontraba nunca nada, y la caja no daba ninguna pista de que
+*      había mirado en otro sitio.
+*
+*      DOS REGLAS, Y LA SEGUNDA ES LA QUE HACE QUE SIRVA:
+*
+*      - Se baja por listas y objetos hasta una profundidad corta: un
+*        fkey está a dos niveles y nada de lo que se busca está más
+*        hondo.
+*      - **De un fkey se mira sólo el `id`.**  `topic_name` y
+*        `hook_name` son las MISMAS dos palabras en todas las filas, así
+*        que mirarlas convierte el término en un comodín: buscar
+*        "devices" traería el topic entero.  El `id` es lo único que
+*        nombra la cosa enlazada.
+*
+*      Las claves que empiezan por `_` no se miran en ningún nivel: son
+*      del armazón (`_check_box_state_`, `_operation`) o metadatos
+*      (`__md_treedb__`), y nadie busca por ellas.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var MAX_DEPTH = 4;
+/***************************************************************
+*  Un fkey, tal y como `nodes` lo contesta con `list_dict`.
+***************************************************************/
+function is_fkey_ref(value) {
+	return !!value && typeof value === "object" && !Array.isArray(value) && "id" in value && "topic_name" in value && "hook_name" in value;
+}
+/***************************************************************
+*  ¿Contiene `value` el término? El término viene YA en
+*  minúsculas: quien busca lo baja una vez y no una por celda.
+***************************************************************/
+function value_matches(value, term, depth) {
+	if (value === null || value === void 0) return false;
+	if (depth > MAX_DEPTH) return false;
+	if (Array.isArray(value)) return value.some((v) => value_matches(v, term, depth + 1));
+	if (typeof value === "object") {
+		if (is_fkey_ref(value)) return value_matches(value.id, term, depth + 1);
+		return Object.entries(value).some(([key, v]) => {
+			if (key.startsWith("_")) return false;
+			return value_matches(v, term, depth + 1);
+		});
+	}
+	return String(value).toLowerCase().includes(term);
+}
+/***************************************************************
+*  ¿Está el término en alguna parte de esta fila?
+***************************************************************/
+function row_matches(row, term) {
+	if (!row || typeof row !== "object" || !term) return false;
+	return Object.entries(row).some(([key, value]) => {
+		if (key.startsWith("_")) return false;
+		return value_matches(value, term, 0);
+	});
+}
+//#endregion
 //#region src/treedb_write_plan.js
 /***********************************************************************
 *          treedb_write_plan.js
@@ -23631,7 +23797,8 @@ function create_tabulator(gobj) {
 				50,
 				100,
 				200,
-				500
+				500,
+				true
 			],
 			ajaxURL: "nodes",
 			ajaxRequestFunc: function(url, config, params) {
@@ -23685,6 +23852,7 @@ function create_tabulator(gobj) {
 	tabulator.on("tableBuilt", function() {
 		tabulator._ready = true;
 		update_rowcount();
+		yui_table_filter_clear(tabulator);
 		if (tabulator._pendingData !== void 0) {
 			tabulator.setData(tabulator._pendingData);
 			delete tabulator._pendingData;
@@ -24999,11 +25167,12 @@ function request_page(gobj, page, size) {
 			reject,
 			timer
 		};
+		const all = size === true;
 		(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_REQUEST_PAGE", {
 			topic_name: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "topic_name"),
 			req_id,
-			from: (page - 1) * size + 1,
-			limit: size
+			from: all ? 1 : (page - 1) * size + 1,
+			limit: all ? 0 : size
 		});
 	});
 }
@@ -25085,11 +25254,7 @@ function ac_search(gobj, event, kw, src) {
 		return 0;
 	}
 	tabulator.setFilter(function(data) {
-		return Object.entries(data).some(([key, val]) => {
-			if (key.startsWith("_")) return false;
-			if (val === null || val === void 0) return false;
-			return String(val).toLowerCase().includes(term);
-		});
+		return row_matches(data, term);
 	});
 	return 0;
 }
@@ -67150,6 +67315,7 @@ function yui_asset_element(answer, opts = {}) {
 	}
 	el.src = src;
 	el.onerror = () => {
+		(0, _yuneta_gobj_js.log_error)(`asset could not be loaded: ${opts.detail || src}`);
 		const $marker = yui_asset_missing(opts.detail, opts);
 		if (el.parentNode) el.parentNode.replaceChild($marker, el);
 	};

package/dist/gobj-ui.es.js

@@ -22553,6 +22553,172 @@ function yui_selection_bar(t, opts) {
 	};
 }
 //#endregion
+//#region src/yui_table_filter_clear.js
+/***********************************************************************
+*          yui_table_filter_clear.js
+*
+*      LA ✕ DE LOS FILTROS DE CABECERA DE UNA TABULATOR.
+*
+*      Un filtro de columna se pone escribiendo y se quita BORRANDO lo
+*      escrito, letra a letra, y no hay nada en la cabecera que diga
+*      que se puede quitar.  Con varias columnas filtradas, volver a
+*      ver la tabla entera es un ejercicio de memoria: cuáles toqué.
+*      La ✕ lo dice y lo hace.
+*
+*      TRES DECISIONES QUE NO SON OBVIAS:
+*
+*      - **Se ve mientras el filtro tenga contenido, con foco o sin
+*        él.**  Es al revés que la ✕ de un formulario
+*        (`yui_inputs.js`), que sólo aparece en el campo que se está
+*        editando para no encender un aspa en cada campo relleno.  Aquí
+*        el caso de uso es justo el contrario: el filtro ya está puesto,
+*        el foco está en otra parte, y lo que se quiere es verlo y
+*        quitarlo.  Escondida tras el foco harían falta dos clics.
+*
+*      - **Se borra con la API, no simulando teclas.**
+*        `setHeaderFilterValue(field, "")` es lo que Tabulator ofrece, y
+*        deja el valor y el filtro consistentes.  Sintetizar un `input`
+*        sobre el `<input>` depende de a qué escuche el editor de ese
+*        filtro, que cambia con el tipo de columna.
+*
+*      - **Se recorre la cabecera, no se envuelve el editor.**  Las
+*        columnas se construyen del esquema del topic, así que no hay un
+*        sitio único donde envolver el editor; y la cabecera se rehace
+*        sola cuando cambian las columnas.  El recorrido es idempotente
+*        -- marca lo que ya tiene aspa -- y se dispara con un
+*        `querySelector` de una sola pasada, así que repetirlo en cada
+*        render no cuesta nada.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var MARK = "data-yui-filter-clear";
+/***************************************************************
+*  Pon (o repón) la ✕ de cada filtro de cabecera de `table`.
+*
+*  Idempotente: los que ya la tienen se saltan.
+***************************************************************/
+function decorate(table) {
+	if (!table || !table.element) return;
+	if (!table.element.querySelector(`.tabulator-header-filter:not([${MARK}])`)) return;
+	let list = table.element.querySelectorAll(`.tabulator-header-filter:not([${MARK}])`);
+	for (const $filter of list) {
+		$filter.setAttribute(MARK, "1");
+		let $input = $filter.querySelector("input");
+		if (!$input) continue;
+		let $col = $filter.closest(".tabulator-col");
+		let field = $col ? $col.getAttribute("tabulator-field") : "";
+		if (!field) continue;
+		$filter.classList.add("yui-filter-has-clear");
+		let $btn = createElement2(["button", {
+			type: "button",
+			class: "delete is-small yui-filter-clear",
+			tabindex: "-1",
+			title: i18next.t("clear"),
+			"aria-label": i18next.t("clear"),
+			"data-i18n-title": "clear",
+			"data-i18n-aria-label": "clear"
+		}]);
+		const sync = () => {
+			$btn.classList.toggle("is-visible", !!$input.value);
+		};
+		$input.addEventListener("input", sync);
+		$input.addEventListener("change", sync);
+		$btn.addEventListener("click", (event) => {
+			event.stopPropagation();
+			table.setHeaderFilterValue(field, "");
+			sync();
+		});
+		$filter.appendChild($btn);
+		sync();
+	}
+}
+/***************************************************************
+*  Engancha la ✕ a una tabla ya creada.
+*
+*  Se llama una vez, con la tabla construida.  Los enganches
+*  cubren los dos momentos en que la cabecera aparece o se
+*  rehace: cuando se construye y cuando cambian las columnas.
+***************************************************************/
+function yui_table_filter_clear(table) {
+	if (!table) return;
+	decorate(table);
+	table.on("renderComplete", () => {
+		decorate(table);
+	});
+	table.on("columnVisibilityChanged", () => {
+		decorate(table);
+	});
+}
+//#endregion
+//#region src/yui_row_search.js
+/***********************************************************************
+*          yui_row_search.js
+*
+*      ¿ESTÁ ESTE TÉRMINO EN ESTA FILA?
+*
+*      La caja de búsqueda de una tabla de treedb miraba los valores de
+*      la fila con `String(val)`, y una fila de treedb no es plana: un
+*      fkey llega como una LISTA DE OBJETOS
+*      `[{id, topic_name, hook_name}]`, y `String()` de eso es
+*      `"[object Object]"`.  O sea que buscar el taller de un equipo --
+*      que es donde vive el dato que un operador tiene en la cabeza --
+*      no encontraba nunca nada, y la caja no daba ninguna pista de que
+*      había mirado en otro sitio.
+*
+*      DOS REGLAS, Y LA SEGUNDA ES LA QUE HACE QUE SIRVA:
+*
+*      - Se baja por listas y objetos hasta una profundidad corta: un
+*        fkey está a dos niveles y nada de lo que se busca está más
+*        hondo.
+*      - **De un fkey se mira sólo el `id`.**  `topic_name` y
+*        `hook_name` son las MISMAS dos palabras en todas las filas, así
+*        que mirarlas convierte el término en un comodín: buscar
+*        "devices" traería el topic entero.  El `id` es lo único que
+*        nombra la cosa enlazada.
+*
+*      Las claves que empiezan por `_` no se miran en ningún nivel: son
+*      del armazón (`_check_box_state_`, `_operation`) o metadatos
+*      (`__md_treedb__`), y nadie busca por ellas.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var MAX_DEPTH = 4;
+/***************************************************************
+*  Un fkey, tal y como `nodes` lo contesta con `list_dict`.
+***************************************************************/
+function is_fkey_ref(value) {
+	return !!value && typeof value === "object" && !Array.isArray(value) && "id" in value && "topic_name" in value && "hook_name" in value;
+}
+/***************************************************************
+*  ¿Contiene `value` el término? El término viene YA en
+*  minúsculas: quien busca lo baja una vez y no una por celda.
+***************************************************************/
+function value_matches(value, term, depth) {
+	if (value === null || value === void 0) return false;
+	if (depth > MAX_DEPTH) return false;
+	if (Array.isArray(value)) return value.some((v) => value_matches(v, term, depth + 1));
+	if (typeof value === "object") {
+		if (is_fkey_ref(value)) return value_matches(value.id, term, depth + 1);
+		return Object.entries(value).some(([key, v]) => {
+			if (key.startsWith("_")) return false;
+			return value_matches(v, term, depth + 1);
+		});
+	}
+	return String(value).toLowerCase().includes(term);
+}
+/***************************************************************
+*  ¿Está el término en alguna parte de esta fila?
+***************************************************************/
+function row_matches(row, term) {
+	if (!row || typeof row !== "object" || !term) return false;
+	return Object.entries(row).some(([key, value]) => {
+		if (key.startsWith("_")) return false;
+		return value_matches(value, term, 0);
+	});
+}
+//#endregion
 //#region src/treedb_write_plan.js
 /***********************************************************************
 *          treedb_write_plan.js
@@ -23626,7 +23792,8 @@ function create_tabulator(gobj) {
 				50,
 				100,
 				200,
-				500
+				500,
+				true
 			],
 			ajaxURL: "nodes",
 			ajaxRequestFunc: function(url, config, params) {
@@ -23680,6 +23847,7 @@ function create_tabulator(gobj) {
 	tabulator.on("tableBuilt", function() {
 		tabulator._ready = true;
 		update_rowcount();
+		yui_table_filter_clear(tabulator);
 		if (tabulator._pendingData !== void 0) {
 			tabulator.setData(tabulator._pendingData);
 			delete tabulator._pendingData;
@@ -24994,11 +25162,12 @@ function request_page(gobj, page, size) {
 			reject,
 			timer
 		};
+		const all = size === true;
 		gobj_publish_event(gobj, "EV_REQUEST_PAGE", {
 			topic_name: gobj_read_str_attr(gobj, "topic_name"),
 			req_id,
-			from: (page - 1) * size + 1,
-			limit: size
+			from: all ? 1 : (page - 1) * size + 1,
+			limit: all ? 0 : size
 		});
 	});
 }
@@ -25080,11 +25249,7 @@ function ac_search(gobj, event, kw, src) {
 		return 0;
 	}
 	tabulator.setFilter(function(data) {
-		return Object.entries(data).some(([key, val]) => {
-			if (key.startsWith("_")) return false;
-			if (val === null || val === void 0) return false;
-			return String(val).toLowerCase().includes(term);
-		});
+		return row_matches(data, term);
 	});
 	return 0;
 }
@@ -67145,6 +67310,7 @@ function yui_asset_element(answer, opts = {}) {
 	}
 	el.src = src;
 	el.onerror = () => {
+		log_error(`asset could not be loaded: ${opts.detail || src}`);
 		const $marker = yui_asset_missing(opts.detail, opts);
 		if (el.parentNode) el.parentNode.replaceChild($marker, el);
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.47",
+  "version": "7.23.49",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_treedb_topic_with_form.js

@@ -85,6 +85,9 @@ import {
     yui_clear_selection,
 } from "./yui_table_select.js";
 
+import {yui_table_filter_clear} from "./yui_table_filter_clear.js";
+import {row_matches} from "./yui_row_search.js";
+
 import {t} from "i18next";
 
 import {plan_treedb_writes} from "./treedb_write_plan.js";
@@ -1346,7 +1349,13 @@ function create_tabulator(gobj)
             paginationMode:         "remote",
             filterMode:             "local",
             paginationSize:         page_size,
-            paginationSizeSelector: [50, 100, 200, 500],
+            /*  `true` is Tabulator's "All", and here it is not a courtesy:
+             *  `filterMode: "local"` means the header filters and the search
+             *  box only see the page that is loaded, so on a topic that does
+             *  not fit, searching for something on page 17 finds nothing.
+             *  "All" is the way out, and the backend has it -- `nodes` takes
+             *  `limit: 0` for "every one", answering the plain list. */
+            paginationSizeSelector: [50, 100, 200, 500, true],
             ajaxURL:                "nodes",   /*  dummy: only fires the func  */
             ajaxRequestFunc: function(url, config, params) {
                 /*  Widget plumbing, not an action: Tabulator wants a PROMISE
@@ -1467,6 +1476,10 @@ function create_tabulator(gobj)
     tabulator.on("tableBuilt", function() {
         tabulator._ready = true;
         update_rowcount();
+        /*  La ✕ de cada filtro de cabecera. Un filtro se quita borrando lo
+         *  escrito, y con varias columnas filtradas volver a la tabla entera
+         *  era acordarse de cuáles se tocaron. */
+        yui_table_filter_clear(tabulator);
         if(tabulator._pendingData !== undefined) {
             tabulator.setData(tabulator._pendingData);
             delete tabulator._pendingData;
@@ -3370,14 +3383,21 @@ function request_page(gobj, page, size)
 
         priv._pending_pages[req_id] = {resolve: resolve, reject: reject, timer: timer};
 
+        /*  "All" (Tabulator sends the size as `true`): `nodes` says every
+         *  one with `limit: 0`, and then it answers the plain list -- which
+         *  nodes_answer() reads as a single page, so the paginator hides and
+         *  every filter sees every row. Arithmetic on `true` would send
+         *  `limit: true` to a backend that wants an integer. */
+        const all = (size === true);
+
         gobj_publish_event(
             gobj,
             "EV_REQUEST_PAGE",
             {
                 topic_name: gobj_read_str_attr(gobj, "topic_name"),
                 req_id:     req_id,
-                from:       (page - 1) * size + 1,   /*  `nodes` counts from 1  */
-                limit:      size
+                from:       all? 1: (page - 1) * size + 1,  /*  `nodes` counts from 1  */
+                limit:      all? 0: size
             }
         );
     });
@@ -3482,16 +3502,13 @@ function ac_search(gobj, event, kw, src)
         return 0;
     }
 
+    /*  A treedb row is not flat: an fkey arrives as a list of objects, and
+     *  `String()` of that is "[object Object]" -- so searching for the
+     *  workshop of a meter, which is where the value a person has in mind
+     *  lives, never found anything. `row_matches()` walks into them, and
+     *  reads only the `id` of an fkey. See yui_row_search.js.  */
     tabulator.setFilter(function(data) {
-        return Object.entries(data).some(([key, val]) => {
-            if(key.startsWith('_')) {
-                return false;
-            }
-            if(val === null || val === undefined) {
-                return false;
-            }
-            return String(val).toLowerCase().includes(term);
-        });
+        return row_matches(data, term);
     });
 
     return 0;

package/src/yui_asset.js

@@ -16,7 +16,7 @@
  */
 
 import {
-    createElement2
+    createElement2, log_error
 } from "@yuneta/gobj-js";
 
 import "./yui_asset.css";
@@ -177,6 +177,16 @@ function yui_asset_element(answer, opts = {})
      *  silent gap this module was written to stop.
      */
     el.onerror = () => {
+        /*
+         *  And it is REPORTED, not only drawn. The marker tells the person
+         *  looking at the screen; log_error is what reaches the yuno, which
+         *  is the only place anybody can count how often it happens. An
+         *  asset the backend served and the browser could not load is a
+         *  fact of the system -- an expired signature, a blob gone from the
+         *  store, a codec nobody has -- and a failure only a user can see
+         *  is a failure nobody measures.
+         */
+        log_error(`asset could not be loaded: ${opts.detail || src}`);
         const $marker = yui_asset_missing(opts.detail, opts);
         if(el.parentNode) {
             el.parentNode.replaceChild($marker, el);

package/src/yui_row_search.js

@@ -0,0 +1,96 @@
+/***********************************************************************
+ *          yui_row_search.js
+ *
+ *      ¿ESTÁ ESTE TÉRMINO EN ESTA FILA?
+ *
+ *      La caja de búsqueda de una tabla de treedb miraba los valores de
+ *      la fila con `String(val)`, y una fila de treedb no es plana: un
+ *      fkey llega como una LISTA DE OBJETOS
+ *      `[{id, topic_name, hook_name}]`, y `String()` de eso es
+ *      `"[object Object]"`.  O sea que buscar el taller de un equipo --
+ *      que es donde vive el dato que un operador tiene en la cabeza --
+ *      no encontraba nunca nada, y la caja no daba ninguna pista de que
+ *      había mirado en otro sitio.
+ *
+ *      DOS REGLAS, Y LA SEGUNDA ES LA QUE HACE QUE SIRVA:
+ *
+ *      - Se baja por listas y objetos hasta una profundidad corta: un
+ *        fkey está a dos niveles y nada de lo que se busca está más
+ *        hondo.
+ *      - **De un fkey se mira sólo el `id`.**  `topic_name` y
+ *        `hook_name` son las MISMAS dos palabras en todas las filas, así
+ *        que mirarlas convierte el término en un comodín: buscar
+ *        "devices" traería el topic entero.  El `id` es lo único que
+ *        nombra la cosa enlazada.
+ *
+ *      Las claves que empiezan por `_` no se miran en ningún nivel: son
+ *      del armazón (`_check_box_state_`, `_operation`) o metadatos
+ *      (`__md_treedb__`), y nadie busca por ellas.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+const MAX_DEPTH = 4;
+
+
+/***************************************************************
+ *  Un fkey, tal y como `nodes` lo contesta con `list_dict`.
+ ***************************************************************/
+function is_fkey_ref(value)
+{
+    return !!value
+        && typeof value === "object"
+        && !Array.isArray(value)
+        && ("id" in value)
+        && ("topic_name" in value)
+        && ("hook_name" in value);
+}
+
+/***************************************************************
+ *  ¿Contiene `value` el término? El término viene YA en
+ *  minúsculas: quien busca lo baja una vez y no una por celda.
+ ***************************************************************/
+function value_matches(value, term, depth)
+{
+    if(value === null || value === undefined) {
+        return false;
+    }
+    if(depth > MAX_DEPTH) {
+        return false;
+    }
+    if(Array.isArray(value)) {
+        return value.some((v) => value_matches(v, term, depth + 1));
+    }
+    if(typeof value === "object") {
+        if(is_fkey_ref(value)) {
+            return value_matches(value.id, term, depth + 1);
+        }
+        return Object.entries(value).some(([key, v]) => {
+            if(key.startsWith("_")) {
+                return false;
+            }
+            return value_matches(v, term, depth + 1);
+        });
+    }
+    return String(value).toLowerCase().includes(term);
+}
+
+/***************************************************************
+ *  ¿Está el término en alguna parte de esta fila?
+ ***************************************************************/
+function row_matches(row, term)
+{
+    if(!row || typeof row !== "object" || !term) {
+        return false;
+    }
+    return Object.entries(row).some(([key, value]) => {
+        if(key.startsWith("_")) {
+            return false;
+        }
+        return value_matches(value, term, 0);
+    });
+}
+
+
+export {row_matches, value_matches, is_fkey_ref};

package/src/yui_row_search.test.js

@@ -0,0 +1,62 @@
+import {describe, it, expect} from "vitest";
+
+import {row_matches, is_fkey_ref} from "./yui_row_search.js";
+
+describe("row_matches", () => {
+    const row = {
+        id: "E22003089",
+        name: "",
+        place: [
+            {
+                id: "es.madrid.bm-madrid-fuencarral-m-av.local-13-torno",
+                topic_name: "places",
+                hook_name: "devices"
+            }
+        ],
+        tension: 400,
+        enabled: true,
+        _operation: "hidden",
+        __md_treedb__: {topic_name: "devices"}
+    };
+
+    it("finds a plain field", () => {
+        expect(row_matches(row, "e22003089")).toBe(true);
+    });
+
+    it("finds a number", () => {
+        expect(row_matches(row, "400")).toBe(true);
+    });
+
+    it("finds a value INSIDE an fkey, which is the whole point", () => {
+        expect(row_matches(row, "local-13-torno")).toBe(true);
+    });
+
+    it("does NOT match the structural halves of an fkey", () => {
+        /*  `topic_name`/`hook_name` are the same two words on every row:
+         *  matching them turns the term into a wildcard.  */
+        expect(row_matches(row, "places")).toBe(false);
+        expect(row_matches(row, "hook")).toBe(false);
+    });
+
+    it("ignores keys of the scaffolding", () => {
+        expect(row_matches(row, "hidden")).toBe(false);
+    });
+
+    it("says no when nothing matches", () => {
+        expect(row_matches(row, "zzz")).toBe(false);
+    });
+
+    it("says no for an empty term or a missing row", () => {
+        expect(row_matches(row, "")).toBe(false);
+        expect(row_matches(null, "a")).toBe(false);
+    });
+});
+
+describe("is_fkey_ref", () => {
+    it("wants the three keys", () => {
+        expect(is_fkey_ref({id: "a", topic_name: "t", hook_name: "h"})).toBe(true);
+        expect(is_fkey_ref({id: "a"})).toBe(false);
+        expect(is_fkey_ref(["a"])).toBe(false);
+        expect(is_fkey_ref(null)).toBe(false);
+    });
+});

package/src/yui_table_filter_clear.css

@@ -0,0 +1,37 @@
+/***********************************************************************
+ *          yui_table_filter_clear.css
+ *
+ *      La ✕ de un filtro de cabecera (yui_table_filter_clear.js).
+ *
+ *      Al reves que la ✕ de un formulario (yui_inputs.css), esta se ve
+ *      SIN foco: el filtro ya esta puesto, el foco esta en otra parte,
+ *      y lo que se quiere es verlo y quitarlo.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+.tabulator-header-filter.yui-filter-has-clear {
+    position: relative;
+}
+
+/*  Sitio para el aspa dentro del propio input, para que no se coma
+ *  ancho de columna.  */
+.tabulator-header-filter.yui-filter-has-clear input {
+    padding-right: 1.6em;
+}
+
+/*  Dos clases sobre el elemento para ganarle a las reglas propias de
+ *  Bulma para `.delete` (position:relative; display:inline-block) sin
+ *  depender de que hoja carga la ultima.  */
+.tabulator-header-filter .yui-filter-clear {
+    position: absolute;
+    top: 50%;
+    right: 0.25em;
+    transform: translateY(-50%);
+    display: none;
+    z-index: 4;
+}
+
+.tabulator-header-filter .yui-filter-clear.is-visible {
+    display: inline-block;
+}

package/src/yui_table_filter_clear.js

@@ -0,0 +1,151 @@
+/***********************************************************************
+ *          yui_table_filter_clear.js
+ *
+ *      LA ✕ DE LOS FILTROS DE CABECERA DE UNA TABULATOR.
+ *
+ *      Un filtro de columna se pone escribiendo y se quita BORRANDO lo
+ *      escrito, letra a letra, y no hay nada en la cabecera que diga
+ *      que se puede quitar.  Con varias columnas filtradas, volver a
+ *      ver la tabla entera es un ejercicio de memoria: cuáles toqué.
+ *      La ✕ lo dice y lo hace.
+ *
+ *      TRES DECISIONES QUE NO SON OBVIAS:
+ *
+ *      - **Se ve mientras el filtro tenga contenido, con foco o sin
+ *        él.**  Es al revés que la ✕ de un formulario
+ *        (`yui_inputs.js`), que sólo aparece en el campo que se está
+ *        editando para no encender un aspa en cada campo relleno.  Aquí
+ *        el caso de uso es justo el contrario: el filtro ya está puesto,
+ *        el foco está en otra parte, y lo que se quiere es verlo y
+ *        quitarlo.  Escondida tras el foco harían falta dos clics.
+ *
+ *      - **Se borra con la API, no simulando teclas.**
+ *        `setHeaderFilterValue(field, "")` es lo que Tabulator ofrece, y
+ *        deja el valor y el filtro consistentes.  Sintetizar un `input`
+ *        sobre el `<input>` depende de a qué escuche el editor de ese
+ *        filtro, que cambia con el tipo de columna.
+ *
+ *      - **Se recorre la cabecera, no se envuelve el editor.**  Las
+ *        columnas se construyen del esquema del topic, así que no hay un
+ *        sitio único donde envolver el editor; y la cabecera se rehace
+ *        sola cuando cambian las columnas.  El recorrido es idempotente
+ *        -- marca lo que ya tiene aspa -- y se dispara con un
+ *        `querySelector` de una sola pasada, así que repetirlo en cada
+ *        render no cuesta nada.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import i18next from "i18next";
+
+import {createElement2} from "@yuneta/gobj-js";
+
+import "./yui_table_filter_clear.css";
+
+
+const MARK = "data-yui-filter-clear";
+
+
+/***************************************************************
+ *  Pon (o repón) la ✕ de cada filtro de cabecera de `table`.
+ *
+ *  Idempotente: los que ya la tienen se saltan.
+ ***************************************************************/
+function decorate(table)
+{
+    if(!table || !table.element) {
+        return;
+    }
+    let $pending = table.element.querySelector(`.tabulator-header-filter:not([${MARK}])`);
+    if(!$pending) {
+        return;     /*  nada nuevo en la cabecera  */
+    }
+
+    let list = table.element.querySelectorAll(`.tabulator-header-filter:not([${MARK}])`);
+    for(const $filter of list) {
+        $filter.setAttribute(MARK, "1");
+
+        let $input = $filter.querySelector("input");
+        if(!$input) {
+            continue;   /*  un filtro que no se escribe: un select, un rango  */
+        }
+
+        /*  El campo se lee del `.tabulator-col` que lo contiene, que es
+         *  quien lo lleva; el `<input>` no sabe de qué columna es.  */
+        let $col = $filter.closest(".tabulator-col");
+        let field = $col? $col.getAttribute("tabulator-field"): "";
+        if(!field) {
+            continue;   /*  sin campo no hay a quién decirle que se limpie  */
+        }
+
+        $filter.classList.add("yui-filter-has-clear");
+
+        /*  La clave viaja con el botón: un `title` puesto con t() al
+         *  construir es invisible para refresh_language(), y se queda en
+         *  el idioma de aquel momento para siempre.  */
+        let $btn = createElement2(["button", {
+            type:                   "button",
+            class:                  "delete is-small yui-filter-clear",
+            tabindex:               "-1",
+            title:                  i18next.t("clear"),
+            "aria-label":           i18next.t("clear"),
+            "data-i18n-title":      "clear",
+            "data-i18n-aria-label": "clear"
+        }]);
+
+        const sync = () => {
+            $btn.classList.toggle("is-visible", !!$input.value);
+        };
+
+        $input.addEventListener("input", sync);
+        $input.addEventListener("change", sync);
+        $btn.addEventListener("click", (event) => {
+            event.stopPropagation();    /*  no ordenar la columna al pulsar  */
+            table.setHeaderFilterValue(field, "");
+            sync();
+        });
+
+        $filter.appendChild($btn);
+        sync();
+    }
+}
+
+/***************************************************************
+ *  Engancha la ✕ a una tabla ya creada.
+ *
+ *  Se llama una vez, con la tabla construida.  Los enganches
+ *  cubren los dos momentos en que la cabecera aparece o se
+ *  rehace: cuando se construye y cuando cambian las columnas.
+ ***************************************************************/
+export function yui_table_filter_clear(table)
+{
+    if(!table) {
+        return;
+    }
+    decorate(table);
+    table.on("renderComplete", () => {
+        decorate(table);
+    });
+    table.on("columnVisibilityChanged", () => {
+        decorate(table);
+    });
+}
+
+/***************************************************************
+ *  Repasa el estado de las ✕ tras un cambio que no vino del
+ *  teclado -- limpiar todos los filtros, cargar una vista
+ *  guardada -- porque eso no dispara `input`.
+ ***************************************************************/
+export function yui_table_filter_clear_refresh(table)
+{
+    if(!table || !table.element) {
+        return;
+    }
+    for(const $filter of table.element.querySelectorAll(".yui-filter-has-clear")) {
+        let $input = $filter.querySelector("input");
+        let $btn = $filter.querySelector(".yui-filter-clear");
+        if($input && $btn) {
+            $btn.classList.toggle("is-visible", !!$input.value);
+        }
+    }
+}