@yuneta/gobj-ui 7.2.5 → 7.3.0

package/README.md

@@ -582,6 +582,15 @@ Two details that are not decoration:
 The find and the topic focus **share the highlight**: starting one clears the
 other. Two amber sets at once would say nothing about either.
 
+The highlight is painted **into the card's own html**, not with G6's `active`
+element state. That state is an amber `stroke` + `halo`, both properties of a
+node's KEY SHAPE — and every node here is an `html` node, whose key shape is a
+DOM element. There was nothing for either property to paint on, so the amber
+had never appeared, for the topic focus either. Only the cards whose state
+changes are repainted, and a theme switch carries the highlight across (it
+rebuilds every card, and rebuilding them without it would clear what is on
+screen).
+
 Wiring: the box sends `EV_FIND_NODES {text}` to the view, which forwards it to
 `C_G6_NODES_TREE`; the graph answers `EV_FIND_RESULT {term, matches}`, which the
 view declares like every other event its child publishes.

package/dist/gobj-ui.cjs.js

@@ -18594,6 +18594,7 @@ var PRIVATE_DATA$4 = {
 	topics: [],
 	records: {},
 	gobj_nodes_tree: null,
+	find_timer: null,
 	gobj_treedb_tables: null,
 	hook_data_viewer: null,
 	json_gobj: null,
@@ -18668,6 +18669,11 @@ function mt_stop$4(gobj) {
 *          Framework Method: Destroy
 ***************************************************************/
 function mt_destroy$4(gobj) {
+	let priv = gobj.priv;
+	if (priv.find_timer) {
+		clearTimeout(priv.find_timer);
+		priv.find_timer = null;
+	}
 	destroy_ui$1(gobj);
 }
 /***************************
@@ -18774,7 +18780,7 @@ function destroy_ui$1(gobj) {
 *
 ************************************************************/
 function make_toolbar(gobj) {
-	gobj.priv;
+	let priv = gobj.priv;
 	let modes = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "operation_modes");
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "readonly")) modes = modes.filter((mode) => mode !== "edition");
 	let left_items = [
@@ -18883,7 +18889,12 @@ function make_toolbar(gobj) {
 		]],
 		{ input: (evt) => {
 			evt.stopPropagation();
-			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text: evt.target.value.trim() }, gobj);
+			let text = evt.target.value.trim();
+			if (priv.find_timer) clearTimeout(priv.find_timer);
+			priv.find_timer = setTimeout(function() {
+				priv.find_timer = null;
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text }, gobj);
+			}, 250);
 		} }
 	], [
 		"div",
@@ -52642,6 +52653,8 @@ ensure_drag_canvas_patch();
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$1 = "C_G6_NODES_TREE";
+var HIGHLIGHT_COLOR = "#f0a020";
+var HIGHLIGHT_HALO = "rgba(240,160,32,0.35)";
 /***************************************************************
 *  Internal layout and operation mode definitions
 ***************************************************************/
@@ -53918,10 +53931,12 @@ function graph_focus_topic(gobj, topic) {
 		if (ids.length === 0) (0, _yuneta_gobj_js.log_warning)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: focus topic '${topic}' has no nodes`);
 		for (let id of ids) states[id] = ["active"];
 	}
+	let prev_ids = priv._focus_ids || [];
 	priv._focus_ids = ids;
 	priv._focus_topic = topic || null;
 	try {
 		if (typeof graph.setElementState === "function") graph.setElementState(states);
+		apply_node_highlight(gobj, prev_ids, ids);
 		if (ids.length && typeof graph.focusElement === "function") graph.focusElement(ids);
 	} catch (e) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: focus topic apply failed: ${e}`);
@@ -53978,10 +53993,12 @@ function graph_find_nodes(gobj, term) {
 		}
 		for (let id of ids) states[id] = ["active"];
 	}
+	let prev_ids = priv._focus_ids || [];
 	priv._focus_ids = ids;
 	priv._focus_topic = null;
 	try {
 		if (typeof graph.setElementState === "function") graph.setElementState(states);
+		apply_node_highlight(gobj, prev_ids, ids);
 		if (ids.length && typeof graph.focusElement === "function") graph.focusElement(ids);
 	} catch (e) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: find apply failed: ${e}`);
@@ -55525,27 +55542,66 @@ function show_node_detail_popover(gobj, node_id) {
 *  not re-themed by setTheme()) are regenerated; structural
 *  junction diamonds get their neutral fill/stroke re-themed.
 ************************************************************/
+/************************************************************
+*  The innerHTML of ONE node, in the given theme and highlight state.
+*  The three treedb tiers (hierarchical / extended / child) each have
+*  their own card, and both the theme refresh and the highlight need the
+*  same three-way choice — it lived inline in the theme refresh and is
+*  shared now. Returns null for a node that carries no desc.
+************************************************************/
+function node_innerHTML_of(nd, theme, highlight) {
+	if (!nd || !nd.data || !nd.data.desc) return null;
+	let desc = nd.data.desc;
+	let record = nd.data.record || {};
+	let label = node_label(desc, record);
+	switch (desc.node_treedb_type) {
+		case "child": return build_chip_innerHTML(desc.color, theme, record.icon, label, record.id, highlight);
+		case "extended": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, true, record.id, highlight);
+		case "hierarchical": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, false, record.id, highlight);
+	}
+	return null;
+}
+/************************************************************
+*  Repaint the cards whose highlight state CHANGES: the ones that had it
+*  and lose it, plus the ones that gain it. Only those — a treedb graph
+*  is redrawn per keystroke of the find box otherwise.
+************************************************************/
+function apply_node_highlight(gobj, prev_ids, next_ids) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	if (!graph) return;
+	let next = new Set(next_ids || []);
+	let touched = /* @__PURE__ */ new Set([...prev_ids || [], ...next]);
+	if (touched.size === 0) return;
+	let updates = [];
+	for (let id of touched) {
+		let html = node_innerHTML_of(graph.getNodeData(id), priv.theme, next.has(id));
+		if (html !== null) updates.push({
+			id,
+			style: { innerHTML: html }
+		});
+	}
+	if (!updates.length) return;
+	try {
+		graph.updateNodeData(updates);
+		graph.draw();
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot repaint the highlight: ${e}`);
+	}
+}
 function refresh_html_nodes_theme(gobj, theme) {
-	let graph = gobj.priv.graph;
+	let priv = gobj.priv;
+	let graph = priv.graph;
 	if (!graph) return;
 	let nodes = graph.getData().nodes || [];
+	let highlighted = new Set(priv._focus_ids || []);
 	let updates = [];
 	for (let i = 0; i < nodes.length; i++) {
-		let nd = graph.getNodeData(nodes[i].id);
-		if (!nd || !nd.data || !nd.data.desc) continue;
-		let tt = nd.data.desc.node_treedb_type;
-		let record = nd.data.record || {};
-		if (tt === "hierarchical") updates.push({
-			id: nodes[i].id,
-			style: { innerHTML: build_node_innerHTML(nd.data.desc.color, theme, record.icon, node_label(nd.data.desc, record), nd.data.desc.topic_name, false, record.id) }
-		});
-		else if (tt === "child") updates.push({
-			id: nodes[i].id,
-			style: { innerHTML: build_chip_innerHTML(nd.data.desc.color, theme, record.icon, node_label(nd.data.desc, record), record.id) }
-		});
-		else if (tt === "extended") updates.push({
-			id: nodes[i].id,
-			style: { innerHTML: build_node_innerHTML(nd.data.desc.color, theme, record.icon, node_label(nd.data.desc, record), nd.data.desc.topic_name, true, record.id) }
+		let id = nodes[i].id;
+		let html = node_innerHTML_of(graph.getNodeData(id), theme, highlighted.has(id));
+		if (html !== null) updates.push({
+			id,
+			style: { innerHTML: html }
 		});
 	}
 	if (updates.length > 0) graph.updateNodeData(updates);
@@ -55577,12 +55633,13 @@ function refresh_default_edges_theme(gobj, theme) {
 *  but lighter (1px border, no shadow, single line). The name is
 *  always legible (ellipsis + native title tooltip on overflow).
 ************************************************************/
-function build_chip_innerHTML(color, theme, icon, label, key) {
+function build_chip_innerHTML(color, theme, icon, label, key, highlight) {
 	let title = key || label;
 	let dark = theme === "dark";
 	let bg = dark ? `color-mix(in srgb, ${color} 30%, #2c3542)` : `color-mix(in srgb, ${color} 10%, ${dark ? "#1b2230" : "#ffffff"})`;
 	let border = dark ? `color-mix(in srgb, ${color} 85%, #ffffff)` : color;
 	let text_color = dark ? "#e8eaed" : "#0f172a";
+	if (highlight) border = HIGHLIGHT_COLOR;
 	let icon_html = "";
 	if (icon) icon_html = `<img src="${(0, _yuneta_gobj_js.safeSrc)(icon)}" alt="" style="
         width: 16px; height: 16px; object-fit: contain;
@@ -55594,7 +55651,8 @@ function build_chip_innerHTML(color, theme, icon, label, key) {
     width: 100%;
     height: 100%;
     background: ${bg};
-    border: 1px solid ${border};
+    border: ${highlight ? "3px" : "1px"} solid ${border};
+    ${highlight ? `box-shadow: 0 0 0 4px ${HIGHLIGHT_HALO};` : ""}
     border-radius: 8px;
     color: ${text_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -55620,7 +55678,7 @@ function build_chip_innerHTML(color, theme, icon, label, key) {
 *  colour is kept (per-topic differentiation) but softened via
 *  color-mix instead of a harsh saturated fill. Theme-aware.
 ************************************************************/
-function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key) {
+function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight) {
 	let title = key || label;
 	let dark = theme === "dark";
 	let surface = dark ? "#1b2230" : "#ffffff";
@@ -55634,6 +55692,10 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
 		border = dark ? `color-mix(in srgb, ${color} 85%, #ffffff)` : color;
 		border_style = "solid";
 	}
+	if (highlight) {
+		border = HIGHLIGHT_COLOR;
+		border_style = "solid";
+	}
 	let title_color = dark ? "#e8eaed" : "#0f172a";
 	let sub_color = dark ? "#9aa4b2" : "#64748b";
 	let shadow = dark ? "0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30)" : "0 1px 3px rgba(15,23,42,0.12), 0 1px 2px rgba(15,23,42,0.06)";
@@ -55656,9 +55718,9 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
     width: 100%;
     height: 100%;
     background: ${bg};
-    border: 1.5px ${border_style} ${border};
+    border: ${highlight ? "3px" : "1.5px"} ${border_style} ${border};
     border-radius: 10px;
-    box-shadow: ${shadow};
+    box-shadow: ${highlight ? `0 0 0 4px ${HIGHLIGHT_HALO}, ${shadow}` : shadow};
     color: ${title_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     display: flex;

package/dist/gobj-ui.es.js

@@ -18581,6 +18581,7 @@ var PRIVATE_DATA$4 = {
 	topics: [],
 	records: {},
 	gobj_nodes_tree: null,
+	find_timer: null,
 	gobj_treedb_tables: null,
 	hook_data_viewer: null,
 	json_gobj: null,
@@ -18655,6 +18656,11 @@ function mt_stop$4(gobj) {
 *          Framework Method: Destroy
 ***************************************************************/
 function mt_destroy$4(gobj) {
+	let priv = gobj.priv;
+	if (priv.find_timer) {
+		clearTimeout(priv.find_timer);
+		priv.find_timer = null;
+	}
 	destroy_ui$1(gobj);
 }
 /***************************
@@ -18761,7 +18767,7 @@ function destroy_ui$1(gobj) {
 *
 ************************************************************/
 function make_toolbar(gobj) {
-	gobj.priv;
+	let priv = gobj.priv;
 	let modes = gobj_read_attr(gobj, "operation_modes");
 	if (gobj_read_bool_attr(gobj, "readonly")) modes = modes.filter((mode) => mode !== "edition");
 	let left_items = [
@@ -18870,7 +18876,12 @@ function make_toolbar(gobj) {
 		]],
 		{ input: (evt) => {
 			evt.stopPropagation();
-			gobj_send_event(gobj, "EV_FIND_NODES", { text: evt.target.value.trim() }, gobj);
+			let text = evt.target.value.trim();
+			if (priv.find_timer) clearTimeout(priv.find_timer);
+			priv.find_timer = setTimeout(function() {
+				priv.find_timer = null;
+				gobj_send_event(gobj, "EV_FIND_NODES", { text }, gobj);
+			}, 250);
 		} }
 	], [
 		"div",
@@ -52629,6 +52640,8 @@ ensure_drag_canvas_patch();
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$1 = "C_G6_NODES_TREE";
+var HIGHLIGHT_COLOR = "#f0a020";
+var HIGHLIGHT_HALO = "rgba(240,160,32,0.35)";
 /***************************************************************
 *  Internal layout and operation mode definitions
 ***************************************************************/
@@ -53905,10 +53918,12 @@ function graph_focus_topic(gobj, topic) {
 		if (ids.length === 0) log_warning(`${gobj_short_name(gobj)}: focus topic '${topic}' has no nodes`);
 		for (let id of ids) states[id] = ["active"];
 	}
+	let prev_ids = priv._focus_ids || [];
 	priv._focus_ids = ids;
 	priv._focus_topic = topic || null;
 	try {
 		if (typeof graph.setElementState === "function") graph.setElementState(states);
+		apply_node_highlight(gobj, prev_ids, ids);
 		if (ids.length && typeof graph.focusElement === "function") graph.focusElement(ids);
 	} catch (e) {
 		log_error(`${gobj_short_name(gobj)}: focus topic apply failed: ${e}`);
@@ -53965,10 +53980,12 @@ function graph_find_nodes(gobj, term) {
 		}
 		for (let id of ids) states[id] = ["active"];
 	}
+	let prev_ids = priv._focus_ids || [];
 	priv._focus_ids = ids;
 	priv._focus_topic = null;
 	try {
 		if (typeof graph.setElementState === "function") graph.setElementState(states);
+		apply_node_highlight(gobj, prev_ids, ids);
 		if (ids.length && typeof graph.focusElement === "function") graph.focusElement(ids);
 	} catch (e) {
 		log_error(`${gobj_short_name(gobj)}: find apply failed: ${e}`);
@@ -55512,27 +55529,66 @@ function show_node_detail_popover(gobj, node_id) {
 *  not re-themed by setTheme()) are regenerated; structural
 *  junction diamonds get their neutral fill/stroke re-themed.
 ************************************************************/
+/************************************************************
+*  The innerHTML of ONE node, in the given theme and highlight state.
+*  The three treedb tiers (hierarchical / extended / child) each have
+*  their own card, and both the theme refresh and the highlight need the
+*  same three-way choice — it lived inline in the theme refresh and is
+*  shared now. Returns null for a node that carries no desc.
+************************************************************/
+function node_innerHTML_of(nd, theme, highlight) {
+	if (!nd || !nd.data || !nd.data.desc) return null;
+	let desc = nd.data.desc;
+	let record = nd.data.record || {};
+	let label = node_label(desc, record);
+	switch (desc.node_treedb_type) {
+		case "child": return build_chip_innerHTML(desc.color, theme, record.icon, label, record.id, highlight);
+		case "extended": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, true, record.id, highlight);
+		case "hierarchical": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, false, record.id, highlight);
+	}
+	return null;
+}
+/************************************************************
+*  Repaint the cards whose highlight state CHANGES: the ones that had it
+*  and lose it, plus the ones that gain it. Only those — a treedb graph
+*  is redrawn per keystroke of the find box otherwise.
+************************************************************/
+function apply_node_highlight(gobj, prev_ids, next_ids) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	if (!graph) return;
+	let next = new Set(next_ids || []);
+	let touched = /* @__PURE__ */ new Set([...prev_ids || [], ...next]);
+	if (touched.size === 0) return;
+	let updates = [];
+	for (let id of touched) {
+		let html = node_innerHTML_of(graph.getNodeData(id), priv.theme, next.has(id));
+		if (html !== null) updates.push({
+			id,
+			style: { innerHTML: html }
+		});
+	}
+	if (!updates.length) return;
+	try {
+		graph.updateNodeData(updates);
+		graph.draw();
+	} catch (e) {
+		log_error(`${gobj_short_name(gobj)}: cannot repaint the highlight: ${e}`);
+	}
+}
 function refresh_html_nodes_theme(gobj, theme) {
-	let graph = gobj.priv.graph;
+	let priv = gobj.priv;
+	let graph = priv.graph;
 	if (!graph) return;
 	let nodes = graph.getData().nodes || [];
+	let highlighted = new Set(priv._focus_ids || []);
 	let updates = [];
 	for (let i = 0; i < nodes.length; i++) {
-		let nd = graph.getNodeData(nodes[i].id);
-		if (!nd || !nd.data || !nd.data.desc) continue;
-		let tt = nd.data.desc.node_treedb_type;
-		let record = nd.data.record || {};
-		if (tt === "hierarchical") updates.push({
-			id: nodes[i].id,
-			style: { innerHTML: build_node_innerHTML(nd.data.desc.color, theme, record.icon, node_label(nd.data.desc, record), nd.data.desc.topic_name, false, record.id) }
-		});
-		else if (tt === "child") updates.push({
-			id: nodes[i].id,
-			style: { innerHTML: build_chip_innerHTML(nd.data.desc.color, theme, record.icon, node_label(nd.data.desc, record), record.id) }
-		});
-		else if (tt === "extended") updates.push({
-			id: nodes[i].id,
-			style: { innerHTML: build_node_innerHTML(nd.data.desc.color, theme, record.icon, node_label(nd.data.desc, record), nd.data.desc.topic_name, true, record.id) }
+		let id = nodes[i].id;
+		let html = node_innerHTML_of(graph.getNodeData(id), theme, highlighted.has(id));
+		if (html !== null) updates.push({
+			id,
+			style: { innerHTML: html }
 		});
 	}
 	if (updates.length > 0) graph.updateNodeData(updates);
@@ -55564,12 +55620,13 @@ function refresh_default_edges_theme(gobj, theme) {
 *  but lighter (1px border, no shadow, single line). The name is
 *  always legible (ellipsis + native title tooltip on overflow).
 ************************************************************/
-function build_chip_innerHTML(color, theme, icon, label, key) {
+function build_chip_innerHTML(color, theme, icon, label, key, highlight) {
 	let title = key || label;
 	let dark = theme === "dark";
 	let bg = dark ? `color-mix(in srgb, ${color} 30%, #2c3542)` : `color-mix(in srgb, ${color} 10%, ${dark ? "#1b2230" : "#ffffff"})`;
 	let border = dark ? `color-mix(in srgb, ${color} 85%, #ffffff)` : color;
 	let text_color = dark ? "#e8eaed" : "#0f172a";
+	if (highlight) border = HIGHLIGHT_COLOR;
 	let icon_html = "";
 	if (icon) icon_html = `<img src="${safeSrc(icon)}" alt="" style="
         width: 16px; height: 16px; object-fit: contain;
@@ -55581,7 +55638,8 @@ function build_chip_innerHTML(color, theme, icon, label, key) {
     width: 100%;
     height: 100%;
     background: ${bg};
-    border: 1px solid ${border};
+    border: ${highlight ? "3px" : "1px"} solid ${border};
+    ${highlight ? `box-shadow: 0 0 0 4px ${HIGHLIGHT_HALO};` : ""}
     border-radius: 8px;
     color: ${text_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -55607,7 +55665,7 @@ function build_chip_innerHTML(color, theme, icon, label, key) {
 *  colour is kept (per-topic differentiation) but softened via
 *  color-mix instead of a harsh saturated fill. Theme-aware.
 ************************************************************/
-function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key) {
+function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight) {
 	let title = key || label;
 	let dark = theme === "dark";
 	let surface = dark ? "#1b2230" : "#ffffff";
@@ -55621,6 +55679,10 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
 		border = dark ? `color-mix(in srgb, ${color} 85%, #ffffff)` : color;
 		border_style = "solid";
 	}
+	if (highlight) {
+		border = HIGHLIGHT_COLOR;
+		border_style = "solid";
+	}
 	let title_color = dark ? "#e8eaed" : "#0f172a";
 	let sub_color = dark ? "#9aa4b2" : "#64748b";
 	let shadow = dark ? "0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30)" : "0 1px 3px rgba(15,23,42,0.12), 0 1px 2px rgba(15,23,42,0.06)";
@@ -55643,9 +55705,9 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
     width: 100%;
     height: 100%;
     background: ${bg};
-    border: 1.5px ${border_style} ${border};
+    border: ${highlight ? "3px" : "1.5px"} ${border_style} ${border};
     border-radius: 10px;
-    box-shadow: ${shadow};
+    box-shadow: ${highlight ? `0 0 0 4px ${HIGHLIGHT_HALO}, ${shadow}` : shadow};
     color: ${title_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     display: flex;

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -140,6 +140,14 @@ ensure_drag_canvas_patch();
  ***************************************************************/
 const GCLASS_NAME = "C_G6_NODES_TREE";
 
+/*  The highlight of a focused topic / a find match. It is drawn INTO the
+ *  node's own html, not with G6's `active` element state: every node here
+ *  is an `html` node, whose key shape is a DOM element — the state's
+ *  `stroke` / `halo` have nothing to paint on and the amber never
+ *  appeared, for the topic focus either.  */
+const HIGHLIGHT_COLOR = "#f0a020";
+const HIGHLIGHT_HALO  = "rgba(240,160,32,0.35)";
+
 /***************************************************************
  *  Internal layout and operation mode definitions
  ***************************************************************/
@@ -2113,6 +2121,7 @@ function graph_focus_topic(gobj, topic)
             states[id] = ['active'];
         }
     }
+    let prev_ids = priv._focus_ids || [];
     priv._focus_ids = ids;
     priv._focus_topic = topic || null;
 
@@ -2120,6 +2129,7 @@ function graph_focus_topic(gobj, topic)
         if(typeof graph.setElementState === "function") {
             graph.setElementState(states);
         }
+        apply_node_highlight(gobj, prev_ids, ids);
         if(ids.length && typeof graph.focusElement === "function") {
             graph.focusElement(ids);
         }
@@ -2194,6 +2204,7 @@ function graph_find_nodes(gobj, term)
         }
     }
 
+    let prev_ids = priv._focus_ids || [];
     priv._focus_ids = ids;
     priv._focus_topic = null;       /*  a find takes over the highlight  */
 
@@ -2201,6 +2212,7 @@ function graph_find_nodes(gobj, term)
         if(typeof graph.setElementState === "function") {
             graph.setElementState(states);
         }
+        apply_node_highlight(gobj, prev_ids, ids);
         if(ids.length && typeof graph.focusElement === "function") {
             graph.focusElement(ids);
         }
@@ -4469,6 +4481,79 @@ function show_node_detail_popover(gobj, node_id)
  *  not re-themed by setTheme()) are regenerated; structural
  *  junction diamonds get their neutral fill/stroke re-themed.
  ************************************************************/
+/************************************************************
+ *  The innerHTML of ONE node, in the given theme and highlight state.
+ *  The three treedb tiers (hierarchical / extended / child) each have
+ *  their own card, and both the theme refresh and the highlight need the
+ *  same three-way choice — it lived inline in the theme refresh and is
+ *  shared now. Returns null for a node that carries no desc.
+ ************************************************************/
+function node_innerHTML_of(nd, theme, highlight)
+{
+    if(!nd || !nd.data || !nd.data.desc) {
+        return null;
+    }
+    let desc = nd.data.desc;
+    let record = nd.data.record || {};
+    let label = node_label(desc, record);
+
+    switch(desc.node_treedb_type) {
+        case 'child':
+            return build_chip_innerHTML(
+                desc.color, theme, record.icon, label, record.id, highlight
+            );
+        case 'extended':
+            return build_node_innerHTML(
+                desc.color, theme, record.icon, label,
+                desc.topic_name, true, record.id, highlight
+            );
+        case 'hierarchical':
+            return build_node_innerHTML(
+                desc.color, theme, record.icon, label,
+                desc.topic_name, false, record.id, highlight
+            );
+    }
+    return null;
+}
+
+/************************************************************
+ *  Repaint the cards whose highlight state CHANGES: the ones that had it
+ *  and lose it, plus the ones that gain it. Only those — a treedb graph
+ *  is redrawn per keystroke of the find box otherwise.
+ ************************************************************/
+function apply_node_highlight(gobj, prev_ids, next_ids)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+    if(!graph) {
+        return;
+    }
+
+    let next = new Set(next_ids || []);
+    let touched = new Set([...(prev_ids || []), ...next]);
+    if(touched.size === 0) {
+        return;
+    }
+
+    let updates = [];
+    for(let id of touched) {
+        let nd = graph.getNodeData(id);
+        let html = node_innerHTML_of(nd, priv.theme, next.has(id));
+        if(html !== null) {
+            updates.push({id: id, style: {innerHTML: html}});
+        }
+    }
+    if(!updates.length) {
+        return;
+    }
+    try {
+        graph.updateNodeData(updates);
+        graph.draw();
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: cannot repaint the highlight: ${e}`);
+    }
+}
+
 function refresh_html_nodes_theme(gobj, theme)
 {
     let priv = gobj.priv;
@@ -4477,46 +4562,16 @@ function refresh_html_nodes_theme(gobj, theme)
         return;
     }
     let nodes = graph.getData().nodes || [];
+    /*  The highlight is part of the card's html, so a theme switch that
+     *  rebuilt every card without it would silently CLEAR the focus or the
+     *  find that is on screen. Carry it across. */
+    let highlighted = new Set(priv._focus_ids || []);
     let updates = [];
     for(let i = 0; i < nodes.length; i++) {
-        let nd = graph.getNodeData(nodes[i].id);
-        if(!nd || !nd.data || !nd.data.desc) {
-            continue;
-        }
-        let tt = nd.data.desc.node_treedb_type;
-        let record = nd.data.record || {};
-        if(tt === 'hierarchical') {
-            updates.push({
-                id: nodes[i].id,
-                style: {
-                    innerHTML: build_node_innerHTML(
-                        nd.data.desc.color, theme, record.icon,
-                        node_label(nd.data.desc, record),
-                        nd.data.desc.topic_name, false, record.id
-                    )
-                }
-            });
-        } else if(tt === 'child') {
-            updates.push({
-                id: nodes[i].id,
-                style: {
-                    innerHTML: build_chip_innerHTML(
-                        nd.data.desc.color, theme, record.icon,
-                        node_label(nd.data.desc, record), record.id
-                    )
-                }
-            });
-        } else if(tt === 'extended') {
-            updates.push({
-                id: nodes[i].id,
-                style: {
-                    innerHTML: build_node_innerHTML(
-                        nd.data.desc.color, theme, record.icon,
-                        node_label(nd.data.desc, record),
-                        nd.data.desc.topic_name, true, record.id
-                    )
-                }
-            });
+        let id = nodes[i].id;
+        let html = node_innerHTML_of(graph.getNodeData(id), theme, highlighted.has(id));
+        if(html !== null) {
+            updates.push({id: id, style: {innerHTML: html}});
         }
     }
     if(updates.length > 0) {
@@ -4559,7 +4614,7 @@ function refresh_default_edges_theme(gobj, theme)
  *  but lighter (1px border, no shadow, single line). The name is
  *  always legible (ellipsis + native title tooltip on overflow).
  ************************************************************/
-function build_chip_innerHTML(color, theme, icon, label, key)
+function build_chip_innerHTML(color, theme, icon, label, key, highlight)
 {
     let title = key || label;
     let dark = (theme === "dark");
@@ -4571,6 +4626,9 @@ function build_chip_innerHTML(color, theme, icon, label, key)
         ? `color-mix(in srgb, ${color} 85%, #ffffff)`
         : color;
     let text_color = dark ? "#e8eaed" : "#0f172a";
+    if(highlight) {
+        border = HIGHLIGHT_COLOR;
+    }
 
     let icon_html = "";
     if(icon) {
@@ -4586,7 +4644,8 @@ function build_chip_innerHTML(color, theme, icon, label, key)
     width: 100%;
     height: 100%;
     background: ${bg};
-    border: 1px solid ${border};
+    border: ${highlight? "3px" : "1px"} solid ${border};
+    ${highlight? `box-shadow: 0 0 0 4px ${HIGHLIGHT_HALO};` : ""}
     border-radius: 8px;
     color: ${text_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -4613,7 +4672,7 @@ function build_chip_innerHTML(color, theme, icon, label, key)
  *  colour is kept (per-topic differentiation) but softened via
  *  color-mix instead of a harsh saturated fill. Theme-aware.
  ************************************************************/
-function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key)
+function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight)
 {
     let title = key || label;
     let dark = (theme === "dark");
@@ -4639,6 +4698,10 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
             : color;
         border_style = "solid";
     }
+    if(highlight) {
+        border = HIGHLIGHT_COLOR;
+        border_style = "solid";
+    }
     let title_color = dark ? "#e8eaed" : "#0f172a";
     let sub_color = dark ? "#9aa4b2" : "#64748b";
     let shadow = dark
@@ -4670,9 +4733,9 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
     width: 100%;
     height: 100%;
     background: ${bg};
-    border: 1.5px ${border_style} ${border};
+    border: ${highlight? "3px" : "1.5px"} ${border_style} ${border};
     border-radius: 10px;
-    box-shadow: ${shadow};
+    box-shadow: ${highlight? `0 0 0 4px ${HIGHLIGHT_HALO}, ${shadow}` : shadow};
     color: ${title_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     display: flex;

package/src/c_yui_treedb_graph.js

@@ -147,6 +147,7 @@ let PRIVATE_DATA = {
     topics:             [],
     records:            {},
     gobj_nodes_tree:    null,
+    find_timer:         null,       // rate-limits the find box (see make_toolbar)
     gobj_treedb_tables: null,
     hook_data_viewer:   null,
     json_gobj:          null,   /*  C_YUI_JSON viewer of the raw tranger (or null)  */
@@ -310,6 +311,14 @@ function mt_stop(gobj)
  ***************************************************************/
 function mt_destroy(gobj)
 {
+    let priv = gobj.priv;
+    /*  The find box rate-limits itself with a timer; a view torn down
+     *  between the keystroke and the send would fire an event into a
+     *  destroyed gobj. */
+    if(priv.find_timer) {
+        clearTimeout(priv.find_timer);
+        priv.find_timer = null;
+    }
     destroy_ui(gobj);
 }
 
@@ -530,14 +539,21 @@ function make_toolbar(gobj)
                 ['i', {class: 'yi-magnifying-glass'}]
             ]]
         ], {
+            /*  Rate-limited, not delayed for effect: a match repaints the
+             *  cards it lands on, and on a large treedb the first letter
+             *  typed can match hundreds. This is input plumbing — the
+             *  event still carries every action to the FSM, just not one
+             *  per keystroke. */
             input: (evt) => {
                 evt.stopPropagation();
-                gobj_send_event(
-                    gobj,
-                    "EV_FIND_NODES",
-                    {text: evt.target.value.trim()},
-                    gobj
-                );
+                let text = evt.target.value.trim();
+                if(priv.find_timer) {
+                    clearTimeout(priv.find_timer);
+                }
+                priv.find_timer = setTimeout(function() {
+                    priv.find_timer = null;
+                    gobj_send_event(gobj, "EV_FIND_NODES", {text: text}, gobj);
+                }, 250);
             }
         }],
         /*  Two spans, not one string: the number is DATA and "matches" is