@yuneta/gobj-ui 7.23.6 → 7.23.8

package/README.md

@@ -459,10 +459,11 @@ written in every editor that offers it and never drawn. Fold is the chevron
 pair, from the lazy tree viewer's own toolbar. The readout hangs off G6's
 `aftertransform`, the one hook that also covers the wheel.
 
-Both graph toolbars are arranged the same way (`7.23.6`): camera and refresh in
-the centre, layout picker and the fold pair on the right. The middle is the
-camera — a fold changes the DOCUMENT, not the view of it, and among the camera
-buttons it read as two more of them.
+Both graph toolbars are arranged the same way (`7.23.7`): the **global**
+expand/collapse leftmost, ahead of the find box; camera and refresh in the
+centre; the layout picker on the right. The **per-node** fold is a different
+control and lives elsewhere — on the right of each card's own header, last,
+where the gobj tree puts its `+N` / `−`.
 
 The graph carries **its own** toolbar, a **layout picker**
 (`EV_CHANGE_LAYOUT {layout}`: `vertical tree`, `dagre top-down`,

package/dist/gobj-ui.cjs.js

@@ -9912,24 +9912,17 @@ function destroy_ui$6(gobj) {
 function make_toolbar$3(gobj) {
 	let priv = gobj.priv;
 	let toolbar_wide = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "wide");
-	let left_items = [[
-		"div",
+	let $find_input = (0, _yuneta_gobj_js.createElement2)([
+		"input",
 		{
-			class: "JSON_GRAPH_FIND control has-icons-left",
-			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
-		},
-		[["input", {
 			class: "JSON_GRAPH_FIND_INPUT input",
 			type: "text",
 			placeholder: (0, i18next.t)("search"),
 			"data-i18n-placeholder": "search",
 			"aria-label": (0, i18next.t)("search"),
 			"data-i18n-aria-label": "search"
-		}], [
-			"span",
-			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
-		]],
+		},
+		[],
 		{ input: (evt) => {
 			evt.stopPropagation();
 			let text = evt.target.value.trim();
@@ -9939,7 +9932,21 @@ function make_toolbar$3(gobj) {
 				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text }, gobj);
 			}, 250);
 		} }
-	], [
+	]);
+	let $find_control = (0, _yuneta_gobj_js.createElement2)([
+		"div",
+		{
+			class: "JSON_GRAPH_FIND control has-icons-left",
+			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
+		},
+		[$find_input, [
+			"span",
+			{ class: "icon is-left" },
+			[["i", { class: "yi-magnifying-glass" }]]
+		]]
+	]);
+	attach_clear($find_control, $find_input);
+	let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([$find_control, [
 		"div",
 		{
 			class: "JSON_GRAPH_FIND_RESULT is-hidden",
@@ -9954,7 +9961,7 @@ function make_toolbar$3(gobj) {
 			{ i18n: "matches" },
 			"matches"
 		]]
-	]];
+	]]);
 	let center_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
 	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
@@ -9989,7 +9996,7 @@ function make_toolbar$3(gobj) {
 			evt.stopPropagation();
 			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
 		} }
-	])].concat(yui_graph_fold_items(gobj, toolbar_wide));
+	])];
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -10098,6 +10105,11 @@ function build_cell_html(key, value, type, dark, matched) {
 *  innerHTML string, so there is no other way to hang a
 *  handler on it.
 *
+*  On the RIGHT of the header, and last, where the gobj tree
+*  puts its own — with a spacer of the same width on the left
+*  so the label stays centred on its own axis instead of
+*  drifting by the width of a chip that only some cards have.
+*
 *  A filled CHIP, the same one the gobj tree draws
 *  (`c_yui_gobj_tree_js.js`, render_toggle_html): background,
 *  border, radius, and `+N` / `−` rather than a triangle.  It
@@ -10111,8 +10123,9 @@ function build_cell_html(key, value, type, dark, matched) {
 *  where it could carry no i18n key and would sit in English
 *  forever.  `+3` and `−` need no language.
 ************************************************************/
+var FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
 function fold_toggle_html(path, foldable, folded, branches, colors) {
-	if (!foldable) return `<span style="width:24px; flex:0 0 auto;"></span>`;
+	if (!foldable) return FOLD_SPACER;
 	let label = folded ? "+" + branches : "&#8722;";
 	return `<span data-fold-path="${(0, _yuneta_gobj_js.escapeHtml)(path)}" style="
         flex: 0 0 auto;
@@ -10243,7 +10256,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
         display: flex;
         align-items: center;
         gap: 6px;
-    ">${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}<span style="flex:1 1 auto; text-align:center;">${(0, _yuneta_gobj_js.escapeHtml)(label)}</span></div>
+    ">${FOLD_SPACER}<span style="flex:1 1 auto; text-align:center;">${(0, _yuneta_gobj_js.escapeHtml)(label)}</span>${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}</div>
     ${content_html}
 </div>`;
 	let node = {
@@ -11234,14 +11247,10 @@ function make_toolbar$2(gobj) {
 			[["i", { class: "yi-magnifying-glass" }]]
 		]]
 	]);
+	left_items.push(icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"), icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"));
 	attach_clear($search_control, $search_input);
 	left_items.push($search_control);
-	let right_items = [
-		view_mode_switch(gobj),
-		icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"),
-		icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"),
-		icon_button(gobj, "yi-copy", "EV_COPY_ALL", "copy json")
-	];
+	let right_items = [view_mode_switch(gobj), icon_button(gobj, "yi-copy", "EV_COPY_ALL", "copy json")];
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -12606,7 +12615,7 @@ function make_toolbar$1(gobj) {
 	let priv = gobj.priv;
 	let toolbar_wide = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "wide");
 	let current_layout = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "layout");
-	let left_items = [];
+	let left_items = yui_graph_fold_items(gobj, toolbar_wide);
 	let center_items = [];
 	let right_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
@@ -12639,7 +12648,6 @@ function make_toolbar$1(gobj) {
 	]);
 	priv.$layout_select = $select;
 	right_items.push($select);
-	right_items.push(...yui_graph_fold_items(gobj, toolbar_wide));
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -52595,24 +52603,17 @@ function make_toolbar(gobj) {
 			} }
 		]
 	];
-	let center_items = [[
-		"div",
+	let $find_input = (0, _yuneta_gobj_js.createElement2)([
+		"input",
 		{
-			class: "GRAPH_FIND control has-icons-left",
-			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
-		},
-		[["input", {
 			class: "GRAPH_FIND_INPUT input",
 			type: "text",
 			placeholder: (0, i18next.t)("search"),
 			"data-i18n-placeholder": "search",
 			"aria-label": (0, i18next.t)("search"),
 			"data-i18n-aria-label": "search"
-		}], [
-			"span",
-			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
-		]],
+		},
+		[],
 		{ input: (evt) => {
 			evt.stopPropagation();
 			let text = evt.target.value.trim();
@@ -52622,22 +52623,20 @@ function make_toolbar(gobj) {
 				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text }, gobj);
 			}, 250);
 		} }
-	], [
+	]);
+	let $find_control = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{
-			class: "GRAPH_FIND_RESULT is-hidden",
-			style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
+			class: "GRAPH_FIND control has-icons-left",
+			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
 		},
-		[[
+		[$find_input, [
 			"span",
-			{ class: "GRAPH_FIND_COUNT" },
-			""
-		], [
-			"span",
-			{ i18n: "matches" },
-			"matches"
+			{ class: "icon is-left" },
+			[["i", { class: "yi-magnifying-glass" }]]
 		]]
-	]];
+	]);
+	attach_clear($find_control, $find_input);
 	const $toolbar_header = yui_toolbar({}, [
 		[
 			"div",
@@ -52647,7 +52646,22 @@ function make_toolbar(gobj) {
 		[
 			"div",
 			{ class: "yui-horizontal-toolbar-section center" },
-			center_items
+			[$find_control, [
+				"div",
+				{
+					class: "GRAPH_FIND_RESULT is-hidden",
+					style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
+				},
+				[[
+					"span",
+					{ class: "GRAPH_FIND_COUNT" },
+					""
+				], [
+					"span",
+					{ i18n: "matches" },
+					"matches"
+				]]
+			]]
 		],
 		[
 			"div",

package/dist/gobj-ui.es.js

@@ -9907,24 +9907,17 @@ function destroy_ui$6(gobj) {
 function make_toolbar$3(gobj) {
 	let priv = gobj.priv;
 	let toolbar_wide = gobj_read_attr(gobj, "wide");
-	let left_items = [[
-		"div",
+	let $find_input = createElement2([
+		"input",
 		{
-			class: "JSON_GRAPH_FIND control has-icons-left",
-			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
-		},
-		[["input", {
 			class: "JSON_GRAPH_FIND_INPUT input",
 			type: "text",
 			placeholder: t("search"),
 			"data-i18n-placeholder": "search",
 			"aria-label": t("search"),
 			"data-i18n-aria-label": "search"
-		}], [
-			"span",
-			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
-		]],
+		},
+		[],
 		{ input: (evt) => {
 			evt.stopPropagation();
 			let text = evt.target.value.trim();
@@ -9934,7 +9927,21 @@ function make_toolbar$3(gobj) {
 				gobj_send_event(gobj, "EV_FIND_NODES", { text }, gobj);
 			}, 250);
 		} }
-	], [
+	]);
+	let $find_control = createElement2([
+		"div",
+		{
+			class: "JSON_GRAPH_FIND control has-icons-left",
+			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
+		},
+		[$find_input, [
+			"span",
+			{ class: "icon is-left" },
+			[["i", { class: "yi-magnifying-glass" }]]
+		]]
+	]);
+	attach_clear($find_control, $find_input);
+	let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([$find_control, [
 		"div",
 		{
 			class: "JSON_GRAPH_FIND_RESULT is-hidden",
@@ -9949,7 +9956,7 @@ function make_toolbar$3(gobj) {
 			{ i18n: "matches" },
 			"matches"
 		]]
-	]];
+	]]);
 	let center_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
 	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
@@ -9984,7 +9991,7 @@ function make_toolbar$3(gobj) {
 			evt.stopPropagation();
 			gobj_send_event(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
 		} }
-	])].concat(yui_graph_fold_items(gobj, toolbar_wide));
+	])];
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -10093,6 +10100,11 @@ function build_cell_html(key, value, type, dark, matched) {
 *  innerHTML string, so there is no other way to hang a
 *  handler on it.
 *
+*  On the RIGHT of the header, and last, where the gobj tree
+*  puts its own — with a spacer of the same width on the left
+*  so the label stays centred on its own axis instead of
+*  drifting by the width of a chip that only some cards have.
+*
 *  A filled CHIP, the same one the gobj tree draws
 *  (`c_yui_gobj_tree_js.js`, render_toggle_html): background,
 *  border, radius, and `+N` / `−` rather than a triangle.  It
@@ -10106,8 +10118,9 @@ function build_cell_html(key, value, type, dark, matched) {
 *  where it could carry no i18n key and would sit in English
 *  forever.  `+3` and `−` need no language.
 ************************************************************/
+var FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
 function fold_toggle_html(path, foldable, folded, branches, colors) {
-	if (!foldable) return `<span style="width:24px; flex:0 0 auto;"></span>`;
+	if (!foldable) return FOLD_SPACER;
 	let label = folded ? "+" + branches : "&#8722;";
 	return `<span data-fold-path="${escapeHtml(path)}" style="
         flex: 0 0 auto;
@@ -10238,7 +10251,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
         display: flex;
         align-items: center;
         gap: 6px;
-    ">${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span></div>
+    ">${FOLD_SPACER}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span>${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}</div>
     ${content_html}
 </div>`;
 	let node = {
@@ -11229,14 +11242,10 @@ function make_toolbar$2(gobj) {
 			[["i", { class: "yi-magnifying-glass" }]]
 		]]
 	]);
+	left_items.push(icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"), icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"));
 	attach_clear($search_control, $search_input);
 	left_items.push($search_control);
-	let right_items = [
-		view_mode_switch(gobj),
-		icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"),
-		icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"),
-		icon_button(gobj, "yi-copy", "EV_COPY_ALL", "copy json")
-	];
+	let right_items = [view_mode_switch(gobj), icon_button(gobj, "yi-copy", "EV_COPY_ALL", "copy json")];
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -12601,7 +12610,7 @@ function make_toolbar$1(gobj) {
 	let priv = gobj.priv;
 	let toolbar_wide = gobj_read_attr(gobj, "wide");
 	let current_layout = gobj_read_str_attr(gobj, "layout");
-	let left_items = [];
+	let left_items = yui_graph_fold_items(gobj, toolbar_wide);
 	let center_items = [];
 	let right_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
@@ -12634,7 +12643,6 @@ function make_toolbar$1(gobj) {
 	]);
 	priv.$layout_select = $select;
 	right_items.push($select);
-	right_items.push(...yui_graph_fold_items(gobj, toolbar_wide));
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -52582,24 +52590,17 @@ function make_toolbar(gobj) {
 			} }
 		]
 	];
-	let center_items = [[
-		"div",
+	let $find_input = createElement2([
+		"input",
 		{
-			class: "GRAPH_FIND control has-icons-left",
-			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
-		},
-		[["input", {
 			class: "GRAPH_FIND_INPUT input",
 			type: "text",
 			placeholder: t("search"),
 			"data-i18n-placeholder": "search",
 			"aria-label": t("search"),
 			"data-i18n-aria-label": "search"
-		}], [
-			"span",
-			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
-		]],
+		},
+		[],
 		{ input: (evt) => {
 			evt.stopPropagation();
 			let text = evt.target.value.trim();
@@ -52609,22 +52610,20 @@ function make_toolbar(gobj) {
 				gobj_send_event(gobj, "EV_FIND_NODES", { text }, gobj);
 			}, 250);
 		} }
-	], [
+	]);
+	let $find_control = createElement2([
 		"div",
 		{
-			class: "GRAPH_FIND_RESULT is-hidden",
-			style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
+			class: "GRAPH_FIND control has-icons-left",
+			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
 		},
-		[[
+		[$find_input, [
 			"span",
-			{ class: "GRAPH_FIND_COUNT" },
-			""
-		], [
-			"span",
-			{ i18n: "matches" },
-			"matches"
+			{ class: "icon is-left" },
+			[["i", { class: "yi-magnifying-glass" }]]
 		]]
-	]];
+	]);
+	attach_clear($find_control, $find_input);
 	const $toolbar_header = yui_toolbar({}, [
 		[
 			"div",
@@ -52634,7 +52633,22 @@ function make_toolbar(gobj) {
 		[
 			"div",
 			{ class: "yui-horizontal-toolbar-section center" },
-			center_items
+			[$find_control, [
+				"div",
+				{
+					class: "GRAPH_FIND_RESULT is-hidden",
+					style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
+				},
+				[[
+					"span",
+					{ class: "GRAPH_FIND_COUNT" },
+					""
+				], [
+					"span",
+					{ i18n: "matches" },
+					"matches"
+				]]
+			]]
 		],
 		[
 			"div",

package/package.json

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

package/src/c_yui_gobj_tree_js.js

@@ -537,7 +537,11 @@ function make_toolbar(gobj)
     let toolbar_wide = gobj_read_attr(gobj, "wide");
     let current_layout = gobj_read_str_attr(gobj, "layout");
 
-    let left_items = [];
+    /*  The GLOBAL fold opens the whole tree; it is not a camera control
+     *  and not a per-node one, so it sits on its own at the left — ahead
+     *  of a find box where the toolbar has one.  The per-node handles
+     *  live inside the cards, on the right of each header.  */
+    let left_items = yui_graph_fold_items(gobj, toolbar_wide);
     let center_items = [];
     let right_items = [];
 
@@ -583,12 +587,6 @@ function make_toolbar(gobj)
     priv.$layout_select = $select;
     right_items.push($select);
 
-    /*  Fold on the RIGHT, past the layout picker — where the JSON graph
-     *  already put it.  The camera is what the middle is for: the fold
-     *  pair changes the DOCUMENT, not the view of it, and sitting in the
-     *  middle it read as two more camera buttons.  */
-    right_items.push(...yui_graph_fold_items(gobj, toolbar_wide));
-
     const $toolbar = yui_toolbar({}, [
         ['div', {class: 'yui-horizontal-toolbar-section left'}, left_items],
         ['div', {class: 'yui-horizontal-toolbar-section center'}, center_items],

package/src/c_yui_json.js

@@ -365,14 +365,20 @@ function make_toolbar(gobj)
             $search_input,
             ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
         ]]);
+    /*  The GLOBAL fold leads the row, ahead of the find box — the same
+     *  place both graphs put theirs.  It opens the whole document; the
+     *  per-row toggles live in the rows.  */
+    left_items.push(
+        icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL",   "expand loaded"),
+        icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all")
+    );
+
     attach_clear($search_control, $search_input);
     left_items.push($search_control);
 
     let right_items = [
         view_mode_switch(gobj),
-        icon_button(gobj, "yi-chevron-right",  "EV_EXPAND_ALL",   "expand loaded"),
-        icon_button(gobj, "yi-chevron-right",  "EV_COLLAPSE_ALL", "collapse all"),
-        icon_button(gobj, "yi-copy",           "EV_COPY_ALL",     "copy json"),
+        icon_button(gobj, "yi-copy", "EV_COPY_ALL", "copy json"),
     ];
 
     const $toolbar = yui_toolbar({}, [

package/src/c_yui_json_graph.js

@@ -47,6 +47,7 @@ import {
 } from "@yuneta/gobj-js";
 
 import {yui_toolbar} from "./yui_toolbar.js";
+import {attach_clear} from "./yui_inputs.js";
 import {
     yui_graph_camera_items,
     yui_graph_fold_items,
@@ -478,27 +479,25 @@ function make_toolbar(gobj)
      *  looks the same whether nothing matched or the match was already
      *  on screen.
      */
-    let left_items = [
-        ['div', {class: 'JSON_GRAPH_FIND control has-icons-left',
-                 style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
-            ['input', {
-                class: 'JSON_GRAPH_FIND_INPUT input',
-                type: 'text',
-                /*  A placeholder is not a text node, so the data-i18n
-                 *  walk cannot reach it: it needs its own key. */
-                placeholder: t('search'),
-                'data-i18n-placeholder': 'search',
-                'aria-label': t('search'),
-                'data-i18n-aria-label': 'search'
-            }],
-            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
-        ], {
+    /*  Materialised, not a spec: attach_clear() hangs the NORM clear (✕)
+     *  on a real element.  Clearing dispatches a synthetic `input`, which
+     *  goes through the same rate-limited handler and fires EV_FIND_NODES
+     *  with an empty term — the box and the highlight clear together.  */
+    let $find_input = createElement2(
+        ['input', {
+            class: 'JSON_GRAPH_FIND_INPUT input',
+            type: 'text',
+            /*  A placeholder is not a text node, so the data-i18n walk
+             *  cannot reach it: it needs its own key. */
+            placeholder: t('search'),
+            'data-i18n-placeholder': 'search',
+            'aria-label': t('search'),
+            'data-i18n-aria-label': 'search'
+        }, [], {
             /*  Rate-limited, not delayed for effect: every keystroke
              *  REBUILDS the cards — an html node paints no G6 state, so
              *  the highlight has to live in the card's own markup — and
-             *  the first letter typed can match most of a document.
-             *  Input plumbing: the action still crosses the FSM, just
-             *  not once per keystroke. */
+             *  the first letter typed can match most of a document. */
             input: (evt) => {
                 evt.stopPropagation();
                 let text = evt.target.value.trim();
@@ -510,20 +509,39 @@ function make_toolbar(gobj)
                     gobj_send_event(gobj, "EV_FIND_NODES", {text: text}, gobj);
                 }, 250);
             }
-        }],
+        }]);
+
+    let $find_control = createElement2(
+        ['div', {class: 'JSON_GRAPH_FIND control has-icons-left',
+                 style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
+            $find_input,
+            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+        ]]);
+    attach_clear($find_control, $find_input);
+
+    /*
+     *  Left: the global fold leads the row, then find a node.
+     *
+     *  A graph of a large document has no other way in — the only way to
+     *  locate a key was to read every card.  The count SAYS how many
+     *  matched, because a graph that did not move looks the same whether
+     *  nothing matched or the match was already on screen.
+     */
+    let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([
+        $find_control,
         /*  Two spans, not one string: the number is DATA and "matches"
          *  is the word, so a language switch re-translates the half that
-         *  is a word.  Spaced with CSS because createElement2 trims text
-         *  nodes.  `display:flex` inline and NOT the `is-flex` helper —
-         *  both Bulma helpers carry !important, so `is-hidden is-flex` on
-         *  one element is decided by stylesheet order. */
+         *  is a word.  `display:flex` inline and NOT the `is-flex`
+         *  helper — both Bulma helpers carry !important, so
+         *  `is-hidden is-flex` on one element is decided by stylesheet
+         *  order. */
         ['div', {class: 'JSON_GRAPH_FIND_RESULT is-hidden',
                  style: 'display:flex; align-items:center; gap:.3rem; ' +
                         'margin-right:.5rem; font-size:.85rem;'}, [
             ['span', {class: 'JSON_GRAPH_FIND_COUNT'}, ''],
             ['span', {i18n: 'matches'}, 'matches']
         ]]
-    ];
+    ]);
     let center_items = [];
 
     /*
@@ -573,8 +591,7 @@ function make_toolbar(gobj)
         }]
     );
 
-    let right_items = [$layout_select].concat(
-        yui_graph_fold_items(gobj, toolbar_wide));
+    let right_items = [$layout_select];
 
     const $toolbar = yui_toolbar({}, [
         ['div', {class: 'yui-horizontal-toolbar-section left'}, left_items],
@@ -731,6 +748,11 @@ function build_cell_html(key, value, type, dark, matched)
  *  innerHTML string, so there is no other way to hang a
  *  handler on it.
  *
+ *  On the RIGHT of the header, and last, where the gobj tree
+ *  puts its own — with a spacer of the same width on the left
+ *  so the label stays centred on its own axis instead of
+ *  drifting by the width of a chip that only some cards have.
+ *
  *  A filled CHIP, the same one the gobj tree draws
  *  (`c_yui_gobj_tree_js.js`, render_toggle_html): background,
  *  border, radius, and `+N` / `−` rather than a triangle.  It
@@ -744,12 +766,12 @@ function build_cell_html(key, value, type, dark, matched)
  *  where it could carry no i18n key and would sit in English
  *  forever.  `+3` and `−` need no language.
  ************************************************************/
+const FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
+
 function fold_toggle_html(path, foldable, folded, branches, colors)
 {
     if(!foldable) {
-        /*  A spacer the width of the chip, so the label of a leaf card
-         *  stays on the same axis as the label of a foldable one.  */
-        return `<span style="width:24px; flex:0 0 auto;"></span>`;
+        return FOLD_SPACER;
     }
 
     let label = folded? ("+" + branches): "&#8722;";        /*  +N / −  */
@@ -940,7 +962,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
         display: flex;
         align-items: center;
         gap: 6px;
-    ">${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span></div>
+    ">${FOLD_SPACER}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span>${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}</div>
     ${content_html}
 </div>`;
 

package/src/c_yui_treedb_graph.js

@@ -78,6 +78,7 @@ import {
 } from "@yuneta/gobj-js";
 
 import {yui_toolbar} from "./yui_toolbar.js";
+import {attach_clear} from "./yui_inputs.js";
 import {register_c_g6_nodes_tree} from "./c_g6_nodes_tree.js";
 import {
     removeChildElements,
@@ -548,23 +549,21 @@ function make_toolbar(gobj)
      *  not move looks the same whether nothing matched or the match was
      *  already on screen.
      */
-    let center_items = [
-        ['div', {class: 'GRAPH_FIND control has-icons-left',
-                 style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
-            ['input', {
-                class: 'GRAPH_FIND_INPUT input',
-                type: 'text',
-                /*  A placeholder is not a text node, so the data-i18n walk
-                 *  cannot reach it: it needs its own key. */
-                placeholder: t('search'),
-                'data-i18n-placeholder': 'search',
-                'aria-label': t('search'),
-                'data-i18n-aria-label': 'search'
-            }],
-            ['span', {class: 'icon is-left'}, [
-                ['i', {class: 'yi-magnifying-glass'}]
-            ]]
-        ], {
+    /*  Materialised, not a spec: attach_clear() hangs the NORM clear (✕)
+     *  on a real element.  Clearing dispatches a synthetic `input`, which
+     *  goes through the same rate-limited handler and fires EV_FIND_NODES
+     *  with an empty term — the box and the highlight clear together.  */
+    let $find_input = createElement2(
+        ['input', {
+            class: 'GRAPH_FIND_INPUT input',
+            type: 'text',
+            /*  A placeholder is not a text node, so the data-i18n walk
+             *  cannot reach it: it needs its own key. */
+            placeholder: t('search'),
+            'data-i18n-placeholder': 'search',
+            'aria-label': t('search'),
+            'data-i18n-aria-label': 'search'
+        }, [], {
             /*  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
@@ -581,7 +580,18 @@ function make_toolbar(gobj)
                     gobj_send_event(gobj, "EV_FIND_NODES", {text: text}, gobj);
                 }, 250);
             }
-        }],
+        }]);
+
+    let $find_control = createElement2(
+        ['div', {class: 'GRAPH_FIND control has-icons-left',
+                 style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
+            $find_input,
+            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+        ]]);
+    attach_clear($find_control, $find_input);
+
+    let center_items = [
+        $find_control,
         /*  Two spans, not one string: the number is DATA and "matches" is
          *  the word, so a language switch re-translates the half that is a
          *  word. Spaced with CSS because createElement2 trims text nodes. */