@yuneta/gobj-ui 7.23.18 → 7.23.20

package/dist/gobj-ui.es.js

@@ -9345,6 +9345,123 @@ function yui_toolbar(attrs = {}, items = []) {
 	return $toolbar;
 }
 //#endregion
+//#region src/lib_graph.js
+/************************************************************
+*  Add class to elements selected
+************************************************************/
+function addClasses($container, selector, ...classNames) {
+	$container.querySelectorAll(selector).forEach((el) => el.classList.add(...classNames));
+}
+/************************************************************
+*  Remove class from elements selected
+************************************************************/
+function removeClasses($container, selector, ...classNames) {
+	$container.querySelectorAll(selector).forEach((el) => el.classList.remove(...classNames));
+}
+/************************************************************
+*  Toggle class to elements selected
+************************************************************/
+function toggleClasses($container, selector, ...classNames) {
+	$container.querySelectorAll(selector).forEach((el) => classNames.forEach((cls) => el.classList.toggle(cls)));
+}
+/************************************************************
+*  Remove child elements
+************************************************************/
+function removeChildElements($element) {
+	$element.innerHTML = "";
+}
+/************************************************************
+*  Disable/Enable elements
+************************************************************/
+function disableElements($container, selector) {
+	$container.querySelectorAll(selector).forEach((el) => {
+		el.setAttribute("disabled", "");
+	});
+}
+function enableElements($container, selector) {
+	$container.querySelectorAll(selector).forEach((el) => {
+		if (el.hasAttribute("disabled")) el.removeAttribute("disabled");
+	});
+}
+/************************************************************
+*  Set or reset the color of 'enable submit action' state
+*  Color green
+************************************************************/
+function set_submit_state($container, selector, set) {
+	if (set) addClasses($container, selector, "color_submit_state");
+	else removeClasses($container, selector, "color_submit_state");
+}
+/************************************************************
+*  Set or reset the color of 'enable cancel action' state
+*  Color red
+************************************************************/
+function set_cancel_state($container, selector, set) {
+	if (set) addClasses($container, selector, "color_cancel_state");
+	else removeClasses($container, selector, "color_cancel_state");
+}
+/************************************************************
+*  Set or reset the color of 'enable actived' state
+*  Color orange
+************************************************************/
+function set_active_state($container, selector, set) {
+	if (set) addClasses($container, selector, "color_active_state");
+	else removeClasses($container, selector, "color_active_state");
+}
+/************************************************************
+*  Set or reset the 'pressed' state of a TOGGLE.
+*
+*  Not one of the colours above: each of those names a KIND of
+*  action (create, pending, history, destructive), and a toggle
+*  is not an action -- it is a state the control is IN. So it
+*  looks pressed instead of changing category, which also keeps
+*  it out of the way of a neighbour wearing the same hue.
+************************************************************/
+function set_pressed_state($container, selector, set) {
+	if (set) addClasses($container, selector, "pressed_state");
+	else removeClasses($container, selector, "pressed_state");
+}
+/**
+* Returns a smart stroke color in `rgba()` format based on:
+* - The given fill color (hex or rgb[a])
+* - The current theme ('light' or 'dark')
+* - The adjustment factor (default 0.2)
+*
+* @param {string} fillColor - Fill color string
+* @param {string} theme - 'light' or 'dark'
+* @param {number} factor - Lighten/darken factor (default 0.2)
+* @returns {string} rgba(r, g, b, a)
+*/
+function getStrokeColor(fillColor, theme = "light", factor = .2) {
+	let r, g, b, a = 1;
+	if (fillColor.startsWith("#")) {
+		let hex = fillColor.slice(1);
+		if (hex.length === 3 || hex.length === 4) hex = hex.split("").map((c) => c + c).join("");
+		if (hex.length === 6) {
+			r = parseInt(hex.slice(0, 2), 16);
+			g = parseInt(hex.slice(2, 4), 16);
+			b = parseInt(hex.slice(4, 6), 16);
+		} else if (hex.length === 8) {
+			r = parseInt(hex.slice(0, 2), 16);
+			g = parseInt(hex.slice(2, 4), 16);
+			b = parseInt(hex.slice(4, 6), 16);
+			a = parseInt(hex.slice(6, 8), 16) / 255;
+		} else throw new Error("Unsupported hex format");
+	} else if (fillColor.startsWith("rgb")) {
+		const match = fillColor.match(/rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)/);
+		if (!match) throw new Error("Invalid rgb()/rgba() format.");
+		r = parseInt(match[1], 10);
+		g = parseInt(match[2], 10);
+		b = parseInt(match[3], 10);
+		if (match[4] !== void 0) a = parseFloat(match[4]);
+	} else throw new Error("Unsupported color format.");
+	const luminance = (.299 * r + .587 * g + .114 * b) / 255;
+	let lighten;
+	if (theme === "dark") lighten = luminance < .7;
+	else lighten = luminance < .3;
+	const adjust = (v) => lighten ? Math.min(255, Math.floor(v + (255 - v) * factor)) : Math.max(0, Math.floor(v * (1 - factor)));
+	return `rgba(${adjust(r)}, ${adjust(g)}, ${adjust(b)}, ${a.toFixed(3)})`;
+}
+//#endregion
 //#region src/yui_graph_camera.js
 /***********************************************************************
 *          yui_graph_camera.js
@@ -9493,6 +9610,79 @@ function yui_graph_fold_items(gobj, wide) {
 	return [camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide, " transform: rotate(90deg);"), camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide)];
 }
 /************************************************************
+*   The ANCHOR toggle: pick one element and every camera move
+*   from then on leaves it in the MIDDLE.
+*
+*   Why it exists: a graph that fits on screen is unreadable at
+*   the zoom that makes it fit, and the zoom that makes it
+*   readable does not fit -- so the useful view is always a
+*   fraction of the document, and which fraction is the whole
+*   question.  Without an anchor, `1:1` lands wherever the
+*   layout's origin happens to be and the reader hunts for the
+*   node they were looking at.
+*
+*   Crosshairs and not a thumbtack.  A tack says "do not move
+*   this", which is what a pinned NODE would mean in a graph you
+*   can drag nodes around in; this pins the CAMERA to a target,
+*   which is what a crosshair says and what every map that
+*   offers it draws.  It is also in the icon set already, and a
+*   `yi-*` class that is not is a black square.
+*
+*   Three states, because two would not say what a press does:
+*
+*      off      no target; the camera behaves as it always did
+*      arming   waiting for you to click the element you mean
+*      on       locked; every zoom re-centres on it
+************************************************************/
+function yui_graph_anchor_item(gobj, wide) {
+	return camera_button(gobj, "yi-location-crosshairs", "EV_TOGGLE_ANCHOR", "anchor view", wide);
+}
+/************************************************************
+*   Paint the anchor button.  `state` is "off" | "arming" | "on".
+*
+*   Both live states look PRESSED, because both are states the
+*   control is IN rather than actions; what separates them is the
+*   colour, and only the waiting one takes a palette colour --
+*   it is the one that needs the reader to do something next.
+************************************************************/
+function yui_graph_update_anchor($container, state) {
+	if (!$container) return;
+	let $btn = $container.querySelector(".EV_TOGGLE_ANCHOR");
+	if (!$btn) return;
+	set_pressed_state($container, ".EV_TOGGLE_ANCHOR", state !== "off");
+	$btn.classList.toggle("color_pending_state", state === "arming");
+	$btn.setAttribute("aria-pressed", state === "on" ? "true" : "false");
+	let key = state === "arming" ? "click the element to centre on" : state === "on" ? "centred: click to release" : "anchor view";
+	$btn.setAttribute("title", t(key));
+	$btn.setAttribute("data-i18n-title", key);
+	$btn.setAttribute("aria-label", t(key));
+	$btn.setAttribute("data-i18n-aria-label", key);
+}
+/************************************************************
+*   Put `node_id` back in the middle of the viewport.
+*
+*   Called AFTER the camera moved, never instead of moving it:
+*   the zoom is what the reader asked for, the centring is what
+*   keeps the thing they are reading under their eyes.
+*
+*   Guarded on every side because it runs on every wheel notch:
+*   a graph mid-rebuild, an anchor whose node went away with a
+*   fold, a G6 version without `focusElement` -- none of those is
+*   an error worth a log line per notch, they are all "there is
+*   nothing to centre right now".
+************************************************************/
+function yui_graph_center_on(graph, node_id) {
+	if (!graph || !node_id) return false;
+	try {
+		if (typeof graph.getElementData === "function" && !graph.getElementData(node_id)) return false;
+		if (typeof graph.focusElement !== "function") return false;
+		graph.focusElement(node_id);
+		return true;
+	} catch (e) {
+		return false;
+	}
+}
+/************************************************************
 *   A refresh button, for the graphs that offer one.
 ************************************************************/
 function yui_graph_refresh_item(gobj, wide) {
@@ -9969,6 +10159,268 @@ function ensure_drag_canvas_patch() {
 	register(ExtensionCategory.BEHAVIOR, "drag-canvas", DragCanvasTouch);
 	__drag_canvas_patched__ = true;
 }
+/************************************************************
+*   JSON type discriminator (viewer vocabulary)
+************************************************************/
+function json_type(value) {
+	if (value === null) return "null";
+	if (Array.isArray(value)) return "array";
+	switch (typeof value) {
+		case "string": return "string";
+		case "number": return "number";
+		case "boolean": return "boolean";
+		case "object": return "object";
+		default: return "unknown";
+	}
+}
+/************************************************************
+*   Detect a kw_collapse() sentinel.
+*
+*   The kernel replaces an over-limit dict with:
+*          { "__collapsed__": { "path": ..., "size": N } }
+*   and an over-limit array with:
+*          [ { "__collapsed__": { "path": ..., "size": N } } ]
+*
+*   Returns { size, path, is_array } or null.
+************************************************************/
+function is_collapsed(value) {
+	if (value && typeof value === "object" && !Array.isArray(value)) {
+		let keys = Object.keys(value);
+		if (keys.length === 1 && keys[0] === "__collapsed__") {
+			let c = value.__collapsed__ || {};
+			return {
+				size: c.size,
+				path: c.path,
+				is_array: false
+			};
+		}
+		return null;
+	}
+	if (Array.isArray(value) && value.length === 1) {
+		let e = value[0];
+		if (e && typeof e === "object" && !Array.isArray(e) && Object.keys(e).length === 1 && e.__collapsed__) {
+			let c = e.__collapsed__ || {};
+			return {
+				size: c.size,
+				path: c.path,
+				is_array: true
+			};
+		}
+	}
+	return null;
+}
+/************************************************************
+*   Join / split absolute path segments (kernel convention)
+************************************************************/
+function seg_join(segments) {
+	return segments.map(function(s) {
+		return String(s);
+	}).join("`");
+}
+function seg_split(path) {
+	if (path === "" || path === null || path === void 0) return [];
+	return path.split("`");
+}
+/************************************************************
+*   Walk a JSON tree by absolute segments; undefined if the
+*   path does not resolve.
+************************************************************/
+function get_by_segments(root, segments) {
+	let v = root;
+	for (let seg of segments) {
+		if (v === null || v === void 0) return;
+		if (Array.isArray(v)) v = v[Number(seg)];
+		else if (typeof v === "object") v = v[seg];
+		else return;
+	}
+	return v;
+}
+/************************************************************
+*   Set a value at absolute segments (mutates root).
+*
+*   segments == [] means "replace the whole root" — the caller
+*   must use the RETURNED value in that case (a primitive/array
+*   root cannot be mutated in place).
+************************************************************/
+function set_by_segments(root, segments, new_value) {
+	if (segments.length === 0) return new_value;
+	let parent = get_by_segments(root, segments.slice(0, -1));
+	if (parent === null || parent === void 0 || typeof parent !== "object") return root;
+	let last = segments[segments.length - 1];
+	if (Array.isArray(parent)) parent[Number(last)] = new_value;
+	else parent[last] = new_value;
+	return root;
+}
+/************************************************************
+*   Does `value` (or any loaded descendant / its own key)
+*   contain the lower-cased search term?
+*
+*   Collapsed (not-yet-loaded) subtrees can't be searched, so
+*   they never match on content — only their key can match,
+*   which the renderer checks separately.
+************************************************************/
+function subtree_matches(value, term) {
+	if (!term) return true;
+	if (is_collapsed(value)) return false;
+	let type = json_type(value);
+	if (type === "object") {
+		for (let [k, v] of Object.entries(value)) {
+			if (String(k).toLowerCase().includes(term)) return true;
+			if (subtree_matches(v, term)) return true;
+		}
+		return false;
+	}
+	if (type === "array") {
+		for (let v of value) if (subtree_matches(v, term)) return true;
+		return false;
+	}
+	return String(value).toLowerCase().includes(term);
+}
+/************************************************************
+*   Fields whose numeric value is an epoch timestamp.
+*   Mirrors the timestampTag list wired into C_YUI_FORM's
+*   jsoneditor control, so the two viewers agree.
+************************************************************/
+function is_time_field(field) {
+	return field === "__t__" || field === "__tm__" || field === "tm" || field === "t" || field === "time" || field === "from_t" || field === "to_t" || field === "t_input" || field === "t_output" || field === "from_tm" || field === "to_tm";
+}
+/************************************************************
+*   Format an epoch value as a local wall-clock string.
+*   Accepts seconds or milliseconds; returns null when the
+*   value is not a usable positive timestamp (0 == "unset").
+************************************************************/
+function format_epoch(value) {
+	if (typeof value !== "number" || !isFinite(value) || value <= 0) return null;
+	let ms = Math.abs(value) < 0xe8d4a51000 ? value * 1e3 : value;
+	let d = new Date(ms);
+	if (isNaN(d.getTime())) return null;
+	return d.toLocaleString();
+}
+/************************************************************
+*   The text view's payload: the document as text, indented
+*   four characters, cut at `max_chars`.
+*
+*   Returns {text, capped}.  `capped` is what the caller
+*   announces under the dump — a cut that is not announced
+*   reads as a document that ends there.
+************************************************************/
+function json_text_dump(root, max_chars) {
+	let text;
+	try {
+		text = JSON.stringify(root, null, 4);
+	} catch (e) {
+		return {
+			text: "",
+			capped: false,
+			error: String(e)
+		};
+	}
+	if (text === void 0) return {
+		text: "",
+		capped: false,
+		error: "not representable as JSON"
+	};
+	if (typeof max_chars === "number" && max_chars > 0 && text.length > max_chars) return {
+		text: text.slice(0, max_chars),
+		capped: true
+	};
+	return {
+		text,
+		capped: false
+	};
+}
+/************************************************************
+*   Which view a freshly mounted viewer opens on.
+*
+*   Three answers, in order of authority: what the HOST asked
+*   for, what the READER chose last time, and `fallback`.
+*
+*   The host wins because a viewer mounted to show a graph has
+*   to show one.  The memory comes next, because reopening a
+*   document in the view you just left is the whole point of
+*   remembering it.  `fallback` is the floor.
+*
+*   Anything not in `modes` is treated as unsaid, which covers
+*   an absent value, an empty one, and a stored string from an
+*   older release that named a view no longer offered.
+************************************************************/
+function pick_view_mode(asked, remembered, modes, fallback) {
+	let known = (m) => Array.isArray(modes) && modes.indexOf(m) >= 0;
+	if (known(asked)) return asked;
+	if (known(remembered)) return remembered;
+	return fallback;
+}
+/************************************************************
+*   The short label a container row carries beside its size.
+*
+*   An array of dicts that carry an `id` is a list of RECORDS,
+*   and a row that says only `2: {15}` makes you open all
+*   fifteen fields of every one of them to find out WHICH
+*   record it is.  The id is the one field that answers that,
+*   so the row says it without being opened.
+*
+*   Only a SCALAR id, and only when it is really there: an `id`
+*   that is itself a dict or a list is not a name, it is more
+*   document, and printing `[object Object]` beside the size
+*   would be worse than printing nothing.
+*
+*   Cut at `max_chars`, because this rides on a row whose job
+*   is to stay one line.
+************************************************************/
+function container_label(value, max_chars) {
+	if (value === null || typeof value !== "object" || Array.isArray(value)) return "";
+	if (!Object.prototype.hasOwnProperty.call(value, "id")) return "";
+	let id = value.id;
+	let t = typeof id;
+	if (t !== "string" && t !== "number" && t !== "boolean") return "";
+	let text = String(id).trim();
+	if (text === "") return "";
+	let cap = typeof max_chars === "number" && max_chars > 0 ? max_chars : 0;
+	if (cap && text.length > cap) return text.slice(0, cap) + "…";
+	return text;
+}
+/************************************************************
+*   A dict, in the JSON sense: not an array and not null.
+************************************************************/
+function is_plain_object(v) {
+	return v !== null && typeof v === "object" && !Array.isArray(v);
+}
+/************************************************************
+*  Does this container hold ONLY other containers?
+*
+*  Such a value is not a thing, it is a LIST of things -- and a
+*  list is fully described by the row that names it in its
+*  parent, plus the edges to what it holds.  Drawing it as a
+*  card of its own put a node in the middle of the graph with no
+*  data in it, saying nothing the parent's row did not already
+*  say, and pushed everything below it one level down.
+*
+*  An EMPTY container inside counts as content: `{0}` is
+*  something the card has to show, and there is no child card
+*  to show it instead.
+************************************************************/
+function is_pure_collection(value) {
+	let entries = is_plain_object(value) ? Object.entries(value) : Array.isArray(value) ? value.map((v, i) => [i, v]) : [];
+	if (entries.length === 0) return false;
+	for (let [, v] of entries) if (!has_branch(v)) return false;
+	return true;
+}
+/************************************************************
+*  A value that gets a card, or children, of its own.
+************************************************************/
+function has_branch(value) {
+	return is_plain_object(value) && Object.keys(value).length > 0 || Array.isArray(value) && value.length > 0;
+}
+/************************************************************
+*  How many branches a container has, which is what the fold
+*  chip counts.
+************************************************************/
+function count_branches(value) {
+	let entries = is_plain_object(value) ? Object.values(value) : Array.isArray(value) ? value : [];
+	let n = 0;
+	for (let v of entries) if (has_branch(v)) n++;
+	return n;
+}
 //#endregion
 //#region src/c_yui_json_graph.js
 /***********************************************************************
@@ -10070,7 +10522,11 @@ var PRIVATE_DATA$11 = {
 	$layout_select: null,
 	$find_input: null,
 	$find_result: null,
-	$find_count: null
+	$find_count: null,
+	anchor_id: "",
+	anchor_path: "",
+	anchor_state: "off",
+	last_zoom: 1
 };
 var __gclass__$11 = null;
 var __layout_registered__$1 = false;
@@ -10363,6 +10819,7 @@ function make_toolbar$3(gobj) {
 	]]);
 	let center_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
+	center_items.push(yui_graph_anchor_item(gobj, toolbar_wide));
 	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 	let current_layout = gobj_read_str_attr(gobj, "layout") || DEFAULT_LAYOUT;
 	let options = Object.keys(LAYOUTS$1).map(function(key) {
@@ -10445,6 +10902,15 @@ function build_graph$3(gobj) {
 	});
 	graph.on("aftertransform", () => {
 		yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+		let z = priv.last_zoom;
+		try {
+			z = priv.graph.getZoom();
+		} catch (e) {
+			return;
+		}
+		if (z === priv.last_zoom) return;
+		priv.last_zoom = z;
+		if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
 	});
 	graph.on(CanvasEvent.CLICK, (evt) => {});
 	if (typeof ResizeObserver !== "undefined") {
@@ -10465,7 +10931,7 @@ function build_graph$3(gobj) {
 /************************************************************
 *  Build cell value HTML (matching old mx_json_viewer colors)
 ************************************************************/
-function build_cell_html(key, value, type, dark, matched) {
+function build_cell_html(key, value, type, dark, matched, fold) {
 	let on_light = matched ? false : dark;
 	let color = type_color(type, on_light);
 	let key_color = json_card_style(GROUP_COLORS.dict, on_light).key;
@@ -10492,6 +10958,7 @@ function build_cell_html(key, value, type, dark, matched) {
 		default: display_value = String(value);
 	}
 	let row = `<span style="color:${key_color}">• ${escapeHtml(String(key))}: </span><span style="color:${color}">${display_value}</span>`;
+	if (fold) row += `<span style="margin-left:8px;">` + fold_toggle_html(fold.path, true, fold.folded, fold.branches, fold.colors) + `</span>`;
 	if (matched) row = `<span style="background:#ffe082; border-radius:2px; padding:0 2px;">${row}</span>`;
 	return row;
 }
@@ -10615,6 +11082,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 	let lines = [];
 	let pending_complex = [];
 	let card_matched = false;
+	let colors = json_card_style(is_dict ? GROUP_COLORS.dict : GROUP_COLORS.list, dark);
 	let entries = is_dict ? Object.entries(kw) : kw.map((v, i) => [i, v]);
 	for (let [key, value] of entries) {
 		let type = get_json_type(value);
@@ -10623,17 +11091,32 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 			card_matched = true;
 			priv.match_count++;
 		}
-		let html = build_cell_html(key, value, type, dark, matched);
-		lines.push(html);
-		if (is_object(value) && json_object_size(value) > 0 || is_array(value) && value.length > 0) pending_complex.push({
-			key,
-			value
-		});
+		let fold = null;
+		if (has_branch(value)) {
+			pending_complex.push({
+				key,
+				value
+			});
+			if (is_pure_collection(value)) {
+				let child_path = add_segment(path, key);
+				fold = {
+					path: child_path,
+					folded: priv.collapsed.has(child_path),
+					branches: count_branches(value),
+					colors
+				};
+			}
+		}
+		lines.push(build_cell_html(key, value, type, dark, matched, fold));
+	}
+	if (parent_id && is_pure_collection(kw)) {
+		if (priv.collapsed.has(path)) return parent_id;
+		for (let pending of pending_complex) build_json_nodes(gobj, add_segment(path, pending.key), pending.value, nodes, edges, parent_id);
+		return parent_id;
 	}
 	let label = get_group_label(path) || (is_dict ? "{}" : "[]");
 	let foldable = pending_complex.length > 0;
 	let folded = foldable && priv.collapsed.has(path);
-	let colors = json_card_style(is_dict ? GROUP_COLORS.dict : GROUP_COLORS.list, dark);
 	let border_color = card_matched ? dark ? "#ffb300" : "#ff8f00" : colors.border;
 	let border_width = card_matched ? 2 : 1;
 	let content_html = lines.map((line) => `<div style="font-family:monospace; font-size:13px; padding:1px 6px; white-space:nowrap;">${line}</div>`).join("");
@@ -10706,34 +11189,46 @@ function load_json(gobj) {
 	let preserve_view = !!priv.pending_preserve_view;
 	priv.pending_preserve_view = false;
 	if (nodes.length > 0) {
+		let root_id = nodes[0].id;
 		graph.setData({
 			nodes,
 			edges
 		});
 		graph.render().then(() => {
-			if (!preserve_view) graph.fitView();
-			yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+			reanchor$1(gobj);
+			if (preserve_view) {
+				yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+				return;
+			}
+			Promise.resolve(graph.zoomTo(1)).then(() => {
+				if (!yui_graph_center_on(graph, priv.anchor_id)) yui_graph_center_on(graph, root_id);
+				priv.last_zoom = 1;
+				yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+			});
 		});
 	}
 }
 /************************************************************
 *  Every path that HAS a branch to fold, in the same recursion
-*  build_json_nodes uses — so "collapse all" can never name a
-*  card that does not exist.  The root is excluded: folding it
+*  build_json_nodes uses — so "collapse all" can never name
+*  something with no handle.  The handle is a card's header chip
+*  for a container that gets a card, and the chip on its ROW in
+*  the parent for a pure collection, which gets none; both are
+*  keyed by this same path.  The root is excluded: folding it
 *  would leave an empty canvas.
 ************************************************************/
 function collect_foldable_paths(value, path, out, is_root) {
 	let is_dict = is_object(value);
 	let is_list = is_array(value);
 	if (!is_dict && !is_list) return false;
-	let has_branch = false;
+	let found_branch = false;
 	let entries = is_dict ? Object.entries(value) : value.map((v, i) => [i, v]);
-	for (let [key, child] of entries) if (is_object(child) && json_object_size(child) > 0 || is_array(child) && child.length > 0) {
-		has_branch = true;
+	for (let [key, child] of entries) if (has_branch(child)) {
+		found_branch = true;
 		collect_foldable_paths(child, add_segment(path, key), out, false);
 	}
-	if (has_branch && !is_root) out.push(path);
-	return has_branch;
+	if (found_branch && !is_root) out.push(path);
+	return found_branch;
 }
 /************************************************************
 *  Show the find count, or hide the chip when there is no
@@ -10975,13 +11470,79 @@ function ac_theme$3(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*   Every camera action ends the same way once an anchor is
+*   set: the thing you were reading goes back to the middle.
+*
+*   Chained on the promise G6 returns rather than run beside it
+*   -- centring before the zoom has finished centres the OLD
+*   view, and the reader watches the node slide away and come
+*   back.
+************************************************************/
+function after_camera$2(gobj, moved) {
+	let priv = gobj.priv;
+	if (priv.anchor_state !== "on" || !priv.anchor_id) return;
+	Promise.resolve(moved).then(function() {
+		yui_graph_center_on(priv.graph, priv.anchor_id);
+	}).catch(function() {});
+}
+/************************************************************
+*   Point the anchor back at its node after a rebuild.
+*
+*   Node ids are generated per build, so the id the reader
+*   chose does not survive a refresh, a fold or a layout
+*   change -- the PATH does, and it is what the anchor really
+*   means: "this place in the document", not "this card".
+*
+*   A path that is no longer drawn (its parent got folded)
+*   releases the anchor rather than leaving a button that says
+*   it is locked onto something invisible.
+************************************************************/
+function reanchor$1(gobj) {
+	let priv = gobj.priv;
+	if (priv.anchor_state !== "on" || !priv.anchor_path) return;
+	let found = "";
+	try {
+		for (let node of priv.graph.getNodeData()) if (node && node.data && node.data.path === priv.anchor_path) {
+			found = node.id;
+			break;
+		}
+	} catch (e) {
+		return;
+	}
+	priv.anchor_id = found;
+	if (!found) {
+		priv.anchor_state = "off";
+		priv.anchor_path = "";
+	}
+	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+}
+/************************************************************
+*   Arm the anchor, or let it go.
+*
+*   Three states and one button, so a press ADVANCES: with no
+*   target it starts waiting for one, and with a target it
+*   releases.  Pressing it while it waits is a cancel, which is
+*   what somebody who pressed it by mistake will try.
+************************************************************/
+function ac_toggle_anchor$2(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.anchor_state === "off") priv.anchor_state = "arming";
+	else {
+		priv.anchor_state = "off";
+		priv.anchor_id = "";
+		priv.anchor_path = "";
+	}
+	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+	return 0;
+}
+/************************************************************
 *
 ************************************************************/
 function ac_zoom_in$2(gobj, event, kw, src) {
 	let graph = gobj.priv.graph;
 	if (graph) {
 		let z = graph.getZoom();
-		graph.zoomTo(z * 1.2);
+		after_camera$2(gobj, graph.zoomTo(z * 1.2));
 	}
 	return 0;
 }
@@ -10992,7 +11553,7 @@ function ac_zoom_out$2(gobj, event, kw, src) {
 	let graph = gobj.priv.graph;
 	if (graph) {
 		let z = graph.getZoom();
-		graph.zoomTo(z * .8);
+		after_camera$2(gobj, graph.zoomTo(z * .8));
 	}
 	return 0;
 }
@@ -11000,10 +11561,14 @@ function ac_zoom_out$2(gobj, event, kw, src) {
 *
 ************************************************************/
 function ac_zoom_reset$2(gobj, event, kw, src) {
-	let graph = gobj.priv.graph;
+	let priv = gobj.priv;
+	let graph = priv.graph;
 	if (graph && graph.rendered) {
-		graph.zoomTo(1);
-		graph.translateTo([0, 0]);
+		if (priv.anchor_state === "on" && priv.anchor_id) after_camera$2(gobj, graph.zoomTo(1));
+		else {
+			graph.zoomTo(1);
+			graph.translateTo([0, 0]);
+		}
 	}
 	return 0;
 }
@@ -11022,12 +11587,21 @@ function ac_center$2(gobj, event, kw, src) {
 *
 ************************************************************/
 function ac_node_click$4(gobj, event, kw, src) {
-	let graph = gobj.priv.graph;
+	let priv = gobj.priv;
+	let graph = priv.graph;
 	let node_id = kw.evt.target.id;
 	let nodedata;
 	try {
 		nodedata = graph.getNodeData(node_id);
 	} catch (e) {}
+	if (priv.anchor_state === "arming") {
+		priv.anchor_id = node_id;
+		priv.anchor_path = nodedata && nodedata.data ? nodedata.data.path : "";
+		priv.anchor_state = "on";
+		yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+		yui_graph_center_on(graph, node_id);
+		return 0;
+	}
 	if (nodedata && nodedata.data) gobj_publish_event(gobj, "EV_JSON_ITEM_CLICKED", {
 		path: nodedata.data.path,
 		id: node_id
@@ -11161,6 +11735,11 @@ function create_gclass$11(gclass_name) {
 			ac_node_click$4,
 			null
 		],
+		[
+			"EV_TOGGLE_ANCHOR",
+			ac_toggle_anchor$2,
+			null
+		],
 		[
 			"EV_RESIZE",
 			ac_resize$2,
@@ -11191,6 +11770,7 @@ function create_gclass$11(gclass_name) {
 		["EV_ZOOM_RESET", 0],
 		["EV_CENTER", 0],
 		["EV_NODE_CLICK", 0],
+		["EV_TOGGLE_ANCHOR", 0],
 		["EV_RESIZE", 0],
 		["EV_SHOW", 0],
 		["EV_HIDE", 0],
@@ -11207,226 +11787,6 @@ function register_c_yui_json_graph() {
 	if (gclass_find_by_name(GCLASS_NAME$11, false)) return 0;
 	return create_gclass$11(GCLASS_NAME$11);
 }
-/************************************************************
-*   JSON type discriminator (viewer vocabulary)
-************************************************************/
-function json_type(value) {
-	if (value === null) return "null";
-	if (Array.isArray(value)) return "array";
-	switch (typeof value) {
-		case "string": return "string";
-		case "number": return "number";
-		case "boolean": return "boolean";
-		case "object": return "object";
-		default: return "unknown";
-	}
-}
-/************************************************************
-*   Detect a kw_collapse() sentinel.
-*
-*   The kernel replaces an over-limit dict with:
-*          { "__collapsed__": { "path": ..., "size": N } }
-*   and an over-limit array with:
-*          [ { "__collapsed__": { "path": ..., "size": N } } ]
-*
-*   Returns { size, path, is_array } or null.
-************************************************************/
-function is_collapsed(value) {
-	if (value && typeof value === "object" && !Array.isArray(value)) {
-		let keys = Object.keys(value);
-		if (keys.length === 1 && keys[0] === "__collapsed__") {
-			let c = value.__collapsed__ || {};
-			return {
-				size: c.size,
-				path: c.path,
-				is_array: false
-			};
-		}
-		return null;
-	}
-	if (Array.isArray(value) && value.length === 1) {
-		let e = value[0];
-		if (e && typeof e === "object" && !Array.isArray(e) && Object.keys(e).length === 1 && e.__collapsed__) {
-			let c = e.__collapsed__ || {};
-			return {
-				size: c.size,
-				path: c.path,
-				is_array: true
-			};
-		}
-	}
-	return null;
-}
-/************************************************************
-*   Join / split absolute path segments (kernel convention)
-************************************************************/
-function seg_join(segments) {
-	return segments.map(function(s) {
-		return String(s);
-	}).join("`");
-}
-function seg_split(path) {
-	if (path === "" || path === null || path === void 0) return [];
-	return path.split("`");
-}
-/************************************************************
-*   Walk a JSON tree by absolute segments; undefined if the
-*   path does not resolve.
-************************************************************/
-function get_by_segments(root, segments) {
-	let v = root;
-	for (let seg of segments) {
-		if (v === null || v === void 0) return;
-		if (Array.isArray(v)) v = v[Number(seg)];
-		else if (typeof v === "object") v = v[seg];
-		else return;
-	}
-	return v;
-}
-/************************************************************
-*   Set a value at absolute segments (mutates root).
-*
-*   segments == [] means "replace the whole root" — the caller
-*   must use the RETURNED value in that case (a primitive/array
-*   root cannot be mutated in place).
-************************************************************/
-function set_by_segments(root, segments, new_value) {
-	if (segments.length === 0) return new_value;
-	let parent = get_by_segments(root, segments.slice(0, -1));
-	if (parent === null || parent === void 0 || typeof parent !== "object") return root;
-	let last = segments[segments.length - 1];
-	if (Array.isArray(parent)) parent[Number(last)] = new_value;
-	else parent[last] = new_value;
-	return root;
-}
-/************************************************************
-*   Does `value` (or any loaded descendant / its own key)
-*   contain the lower-cased search term?
-*
-*   Collapsed (not-yet-loaded) subtrees can't be searched, so
-*   they never match on content — only their key can match,
-*   which the renderer checks separately.
-************************************************************/
-function subtree_matches(value, term) {
-	if (!term) return true;
-	if (is_collapsed(value)) return false;
-	let type = json_type(value);
-	if (type === "object") {
-		for (let [k, v] of Object.entries(value)) {
-			if (String(k).toLowerCase().includes(term)) return true;
-			if (subtree_matches(v, term)) return true;
-		}
-		return false;
-	}
-	if (type === "array") {
-		for (let v of value) if (subtree_matches(v, term)) return true;
-		return false;
-	}
-	return String(value).toLowerCase().includes(term);
-}
-/************************************************************
-*   Fields whose numeric value is an epoch timestamp.
-*   Mirrors the timestampTag list wired into C_YUI_FORM's
-*   jsoneditor control, so the two viewers agree.
-************************************************************/
-function is_time_field(field) {
-	return field === "__t__" || field === "__tm__" || field === "tm" || field === "t" || field === "time" || field === "from_t" || field === "to_t" || field === "t_input" || field === "t_output" || field === "from_tm" || field === "to_tm";
-}
-/************************************************************
-*   Format an epoch value as a local wall-clock string.
-*   Accepts seconds or milliseconds; returns null when the
-*   value is not a usable positive timestamp (0 == "unset").
-************************************************************/
-function format_epoch(value) {
-	if (typeof value !== "number" || !isFinite(value) || value <= 0) return null;
-	let ms = Math.abs(value) < 0xe8d4a51000 ? value * 1e3 : value;
-	let d = new Date(ms);
-	if (isNaN(d.getTime())) return null;
-	return d.toLocaleString();
-}
-/************************************************************
-*   The text view's payload: the document as text, indented
-*   four characters, cut at `max_chars`.
-*
-*   Returns {text, capped}.  `capped` is what the caller
-*   announces under the dump — a cut that is not announced
-*   reads as a document that ends there.
-************************************************************/
-function json_text_dump(root, max_chars) {
-	let text;
-	try {
-		text = JSON.stringify(root, null, 4);
-	} catch (e) {
-		return {
-			text: "",
-			capped: false,
-			error: String(e)
-		};
-	}
-	if (text === void 0) return {
-		text: "",
-		capped: false,
-		error: "not representable as JSON"
-	};
-	if (typeof max_chars === "number" && max_chars > 0 && text.length > max_chars) return {
-		text: text.slice(0, max_chars),
-		capped: true
-	};
-	return {
-		text,
-		capped: false
-	};
-}
-/************************************************************
-*   Which view a freshly mounted viewer opens on.
-*
-*   Three answers, in order of authority: what the HOST asked
-*   for, what the READER chose last time, and `fallback`.
-*
-*   The host wins because a viewer mounted to show a graph has
-*   to show one.  The memory comes next, because reopening a
-*   document in the view you just left is the whole point of
-*   remembering it.  `fallback` is the floor.
-*
-*   Anything not in `modes` is treated as unsaid, which covers
-*   an absent value, an empty one, and a stored string from an
-*   older release that named a view no longer offered.
-************************************************************/
-function pick_view_mode(asked, remembered, modes, fallback) {
-	let known = (m) => Array.isArray(modes) && modes.indexOf(m) >= 0;
-	if (known(asked)) return asked;
-	if (known(remembered)) return remembered;
-	return fallback;
-}
-/************************************************************
-*   The short label a container row carries beside its size.
-*
-*   An array of dicts that carry an `id` is a list of RECORDS,
-*   and a row that says only `2: {15}` makes you open all
-*   fifteen fields of every one of them to find out WHICH
-*   record it is.  The id is the one field that answers that,
-*   so the row says it without being opened.
-*
-*   Only a SCALAR id, and only when it is really there: an `id`
-*   that is itself a dict or a list is not a name, it is more
-*   document, and printing `[object Object]` beside the size
-*   would be worse than printing nothing.
-*
-*   Cut at `max_chars`, because this rides on a row whose job
-*   is to stay one line.
-************************************************************/
-function container_label(value, max_chars) {
-	if (value === null || typeof value !== "object" || Array.isArray(value)) return "";
-	if (!Object.prototype.hasOwnProperty.call(value, "id")) return "";
-	let id = value.id;
-	let t = typeof id;
-	if (t !== "string" && t !== "number" && t !== "boolean") return "";
-	let text = String(id).trim();
-	if (text === "") return "";
-	let cap = typeof max_chars === "number" && max_chars > 0 ? max_chars : 0;
-	if (cap && text.length > cap) return text.slice(0, cap) + "…";
-	return text;
-}
 //#endregion
 //#region src/c_yui_json.js
 /***********************************************************************
@@ -12712,7 +13072,11 @@ var PRIVATE_DATA$9 = {
 	node_by_id: null,
 	collapse_state: null,
 	resize_observer: null,
-	_resize_raf: 0
+	_resize_raf: 0,
+	anchor_id: "",
+	anchor_name: "",
+	anchor_state: "off",
+	last_zoom: 1
 };
 var __gclass__$9 = null;
 var __layout_registered__ = false;
@@ -13105,6 +13469,7 @@ function make_toolbar$1(gobj) {
 	let center_items = [];
 	let right_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
+	center_items.push(yui_graph_anchor_item(gobj, toolbar_wide));
 	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 	let options = [];
 	for (let key of Object.keys(LAYOUTS)) {
@@ -13180,6 +13545,15 @@ function build_graph$2(gobj) {
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on("aftertransform", () => {
 		yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+		let z = priv.last_zoom;
+		try {
+			z = priv.graph.getZoom();
+		} catch (e) {
+			return;
+		}
+		if (z === priv.last_zoom) return;
+		priv.last_zoom = z;
+		if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
 	});
 	graph.on(NodeEvent.CLICK, (evt) => {
 		gobj_send_event(gobj, "EV_NODE_CLICK", { evt }, gobj);
@@ -13467,13 +13841,23 @@ function load_tree(gobj) {
 	let edges = [];
 	build_gobj_nodes(gobj, yuno, nodes, edges, null, true, layout_cfg.compact);
 	if (nodes.length > 0) {
+		let root_id = nodes[0].id;
 		graph.setData({
 			nodes,
 			edges
 		});
 		graph.render().then(() => {
-			if (anchor) restore_view_anchored(gobj, anchor);
-			else if (!preserve_view) graph.fitView();
+			reanchor(gobj);
+			if (anchor) {
+				restore_view_anchored(gobj, anchor);
+				return;
+			}
+			if (preserve_view) return;
+			Promise.resolve(graph.zoomTo(1)).then(() => {
+				if (!yui_graph_center_on(graph, priv.anchor_id)) yui_graph_center_on(graph, root_id);
+				priv.last_zoom = 1;
+				yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+			});
 		});
 	}
 }
@@ -13975,13 +14359,77 @@ function ac_collapse_all(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*   Every camera action ends the same way once an anchor is
+*   set: the thing you were reading goes back to the middle.
+*
+*   Chained on the promise G6 returns rather than run beside it
+*   -- centring before the zoom has finished centres the OLD
+*   view, and the reader watches the node slide away and come
+*   back.
+************************************************************/
+function after_camera$1(gobj, moved) {
+	let priv = gobj.priv;
+	if (priv.anchor_state !== "on" || !priv.anchor_id) return;
+	Promise.resolve(moved).then(function() {
+		yui_graph_center_on(priv.graph, priv.anchor_id);
+	}).catch(function() {});
+}
+/************************************************************
+*   Point the anchor back at its node after a rebuild.
+*
+*   Node ids are generated per build, so the id the reader chose
+*   does not survive an expand, a collapse or a refresh -- the
+*   `full_name` does, and it is what the anchor really means:
+*   "this gobj", not "this card".
+*
+*   A gobj no longer drawn (its branch got collapsed, or it went
+*   away) releases the anchor rather than leaving a button that
+*   claims to be locked onto something invisible.
+************************************************************/
+function reanchor(gobj) {
+	let priv = gobj.priv;
+	if (priv.anchor_state !== "on" || !priv.anchor_name) return;
+	let found = "";
+	if (priv.node_by_id) {
+		for (let id of Object.keys(priv.node_by_id)) if (priv.node_by_id[id].full_name === priv.anchor_name) {
+			found = id;
+			break;
+		}
+	}
+	priv.anchor_id = found;
+	if (!found) {
+		priv.anchor_state = "off";
+		priv.anchor_name = "";
+	}
+	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+}
+/************************************************************
+*   Arm the anchor, or let it go.
+*
+*   Three states and one button, so a press ADVANCES: with no
+*   target it starts waiting for one, and with a target it
+*   releases.  Pressing it while it waits is a cancel, which is
+*   what somebody who pressed it by mistake will try.
+************************************************************/
+function ac_toggle_anchor$1(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.anchor_state === "off") priv.anchor_state = "arming";
+	else {
+		priv.anchor_state = "off";
+		priv.anchor_id = "";
+		priv.anchor_name = "";
+	}
+	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+	return 0;
+}
+/************************************************************
 *
 ************************************************************/
 function ac_zoom_in$1(gobj, event, kw, src) {
 	let graph = gobj.priv.graph;
 	if (graph) {
 		let z = graph.getZoom();
-		graph.zoomTo(z * 1.2);
+		after_camera$1(gobj, graph.zoomTo(z * 1.2));
 	}
 	return 0;
 }
@@ -13992,7 +14440,7 @@ function ac_zoom_out$1(gobj, event, kw, src) {
 	let graph = gobj.priv.graph;
 	if (graph) {
 		let z = graph.getZoom();
-		graph.zoomTo(z * .8);
+		after_camera$1(gobj, graph.zoomTo(z * .8));
 	}
 	return 0;
 }
@@ -14000,10 +14448,14 @@ function ac_zoom_out$1(gobj, event, kw, src) {
 *
 ************************************************************/
 function ac_zoom_reset$1(gobj, event, kw, src) {
-	let graph = gobj.priv.graph;
+	let priv = gobj.priv;
+	let graph = priv.graph;
 	if (graph && graph.rendered) {
-		graph.zoomTo(1);
-		graph.translateTo([0, 0]);
+		if (priv.anchor_state === "on" && priv.anchor_id) after_camera$1(gobj, graph.zoomTo(1));
+		else {
+			graph.zoomTo(1);
+			graph.translateTo([0, 0]);
+		}
 	}
 	return 0;
 }
@@ -14031,6 +14483,14 @@ function ac_node_click$3(gobj, event, kw, src) {
 		if (nd && nd.data) node_data = nd.data;
 	} catch (e) {}
 	if (!node_data) return 0;
+	if (priv.anchor_state === "arming") {
+		priv.anchor_id = node_id;
+		priv.anchor_name = node_data.full_name || "";
+		priv.anchor_state = "on";
+		yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+		yui_graph_center_on(graph, node_id);
+		return 0;
+	}
 	let client_x = kw.evt && kw.evt.client ? kw.evt.client.x : 0;
 	let client_y = kw.evt && kw.evt.client ? kw.evt.client.y : 0;
 	show_popover(gobj, node_data, client_x, client_y);
@@ -14111,6 +14571,7 @@ function create_gclass$9(gclass_name) {
 		["EV_ZOOM_RESET", 0],
 		["EV_CENTER", 0],
 		["EV_NODE_CLICK", 0],
+		["EV_TOGGLE_ANCHOR", 0],
 		["EV_RESIZE", 0],
 		["EV_SHOW", 0],
 		["EV_HIDE", 0]
@@ -14170,6 +14631,11 @@ function create_gclass$9(gclass_name) {
 			ac_node_click$3,
 			null
 		],
+		[
+			"EV_TOGGLE_ANCHOR",
+			ac_toggle_anchor$1,
+			null
+		],
 		[
 			"EV_RESIZE",
 			ac_resize$1,
@@ -20732,123 +21198,6 @@ function register_c_yui_treedb_topic_with_form() {
 	return create_gclass$5(GCLASS_NAME$5);
 }
 //#endregion
-//#region src/lib_graph.js
-/************************************************************
-*  Add class to elements selected
-************************************************************/
-function addClasses($container, selector, ...classNames) {
-	$container.querySelectorAll(selector).forEach((el) => el.classList.add(...classNames));
-}
-/************************************************************
-*  Remove class from elements selected
-************************************************************/
-function removeClasses($container, selector, ...classNames) {
-	$container.querySelectorAll(selector).forEach((el) => el.classList.remove(...classNames));
-}
-/************************************************************
-*  Toggle class to elements selected
-************************************************************/
-function toggleClasses($container, selector, ...classNames) {
-	$container.querySelectorAll(selector).forEach((el) => classNames.forEach((cls) => el.classList.toggle(cls)));
-}
-/************************************************************
-*  Remove child elements
-************************************************************/
-function removeChildElements($element) {
-	$element.innerHTML = "";
-}
-/************************************************************
-*  Disable/Enable elements
-************************************************************/
-function disableElements($container, selector) {
-	$container.querySelectorAll(selector).forEach((el) => {
-		el.setAttribute("disabled", "");
-	});
-}
-function enableElements($container, selector) {
-	$container.querySelectorAll(selector).forEach((el) => {
-		if (el.hasAttribute("disabled")) el.removeAttribute("disabled");
-	});
-}
-/************************************************************
-*  Set or reset the color of 'enable submit action' state
-*  Color green
-************************************************************/
-function set_submit_state($container, selector, set) {
-	if (set) addClasses($container, selector, "color_submit_state");
-	else removeClasses($container, selector, "color_submit_state");
-}
-/************************************************************
-*  Set or reset the color of 'enable cancel action' state
-*  Color red
-************************************************************/
-function set_cancel_state($container, selector, set) {
-	if (set) addClasses($container, selector, "color_cancel_state");
-	else removeClasses($container, selector, "color_cancel_state");
-}
-/************************************************************
-*  Set or reset the color of 'enable actived' state
-*  Color orange
-************************************************************/
-function set_active_state($container, selector, set) {
-	if (set) addClasses($container, selector, "color_active_state");
-	else removeClasses($container, selector, "color_active_state");
-}
-/************************************************************
-*  Set or reset the 'pressed' state of a TOGGLE.
-*
-*  Not one of the colours above: each of those names a KIND of
-*  action (create, pending, history, destructive), and a toggle
-*  is not an action -- it is a state the control is IN. So it
-*  looks pressed instead of changing category, which also keeps
-*  it out of the way of a neighbour wearing the same hue.
-************************************************************/
-function set_pressed_state($container, selector, set) {
-	if (set) addClasses($container, selector, "pressed_state");
-	else removeClasses($container, selector, "pressed_state");
-}
-/**
-* Returns a smart stroke color in `rgba()` format based on:
-* - The given fill color (hex or rgb[a])
-* - The current theme ('light' or 'dark')
-* - The adjustment factor (default 0.2)
-*
-* @param {string} fillColor - Fill color string
-* @param {string} theme - 'light' or 'dark'
-* @param {number} factor - Lighten/darken factor (default 0.2)
-* @returns {string} rgba(r, g, b, a)
-*/
-function getStrokeColor(fillColor, theme = "light", factor = .2) {
-	let r, g, b, a = 1;
-	if (fillColor.startsWith("#")) {
-		let hex = fillColor.slice(1);
-		if (hex.length === 3 || hex.length === 4) hex = hex.split("").map((c) => c + c).join("");
-		if (hex.length === 6) {
-			r = parseInt(hex.slice(0, 2), 16);
-			g = parseInt(hex.slice(2, 4), 16);
-			b = parseInt(hex.slice(4, 6), 16);
-		} else if (hex.length === 8) {
-			r = parseInt(hex.slice(0, 2), 16);
-			g = parseInt(hex.slice(2, 4), 16);
-			b = parseInt(hex.slice(4, 6), 16);
-			a = parseInt(hex.slice(6, 8), 16) / 255;
-		} else throw new Error("Unsupported hex format");
-	} else if (fillColor.startsWith("rgb")) {
-		const match = fillColor.match(/rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)/);
-		if (!match) throw new Error("Invalid rgb()/rgba() format.");
-		r = parseInt(match[1], 10);
-		g = parseInt(match[2], 10);
-		b = parseInt(match[3], 10);
-		if (match[4] !== void 0) a = parseFloat(match[4]);
-	} else throw new Error("Unsupported color format.");
-	const luminance = (.299 * r + .587 * g + .114 * b) / 255;
-	let lighten;
-	if (theme === "dark") lighten = luminance < .7;
-	else lighten = luminance < .3;
-	const adjust = (v) => lighten ? Math.min(255, Math.floor(v + (255 - v) * factor)) : Math.max(0, Math.floor(v * (1 - factor)));
-	return `rgba(${adjust(r)}, ${adjust(g)}, ${adjust(b)}, ${a.toFixed(3)})`;
-}
-//#endregion
 //#region src/treedb_node_label.js
 /***********************************************************************
 *          treedb_node_label.js
@@ -47716,6 +48065,13 @@ var ICONS = `<svg xmlns="http://www.w3.org/2000/svg">
             stroke="currentColor" stroke-width="40"
             stroke-dasharray="59 36"/>
     </symbol>
+    <!-- location-crosshairs (anchor the camera on one element).
+         The SAME path as the DOM toolbars and their yi-location-crosshairs
+         mask: the two toolbars sit in one console, and a control that
+         does one thing has to be drawn one way. -->
+    <symbol id="g6-icon-anchor" viewBox="0 0 576 512">
+        <path fill="currentColor" d="M288-16c17.7 0 32 14.3 32 32l0 18.3c98.1 14 175.7 91.6 189.7 189.7l18.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-18.3 0c-14 98.1-91.6 175.7-189.7 189.7l0 18.3c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-18.3C157.9 463.7 80.3 386.1 66.3 288L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l18.3 0C80.3 125.9 157.9 48.3 256 34.3L256 16c0-17.7 14.3-32 32-32zM128 256a160 160 0 1 0 320 0 160 160 0 1 0 -320 0zm160-96a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/>
+    </symbol>
     <!-- floppy-disk (save) -->
     <symbol id="g6-icon-save" viewBox="0 0 448 512">
         <path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-242.7c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32L64 32zm32 96c0-17.7 14.3-32 32-32l160 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32l-160 0c-17.7 0-32-14.3-32-32l0-64zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>
@@ -47909,6 +48265,9 @@ var attrs_table$4 = [
 	SDATA_END()
 ];
 var PRIVATE_DATA$4 = {
+	anchor_id: "",
+	anchor_state: "off",
+	last_zoom: 1,
 	_xy: 100,
 	_edge_seq: 0,
 	_history_paused: false,
@@ -48205,6 +48564,15 @@ function configure_events(gobj) {
 		update_node_icon_position(gobj);
 		update_link_icon_position(gobj);
 		update_zoom_readout(gobj);
+		let z = priv.last_zoom;
+		try {
+			z = priv.graph.getZoom();
+		} catch (e) {
+			return;
+		}
+		if (z === priv.last_zoom) return;
+		priv.last_zoom = z;
+		if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
 	});
 	priv._on_language_changed = () => {
 		update_toolbar(gobj);
@@ -48442,6 +48810,12 @@ function configure_toolbar(gobj) {
 					value: "reset",
 					className: "EV_ZOOM_RESET",
 					title: t("actual size")
+				},
+				{
+					id: "g6-icon-anchor",
+					value: "anchor",
+					className: "EV_TOGGLE_ANCHOR" + (priv.anchor_state !== "off" ? " pressed_state" : "") + (priv.anchor_state === "arming" ? " color_pending_state" : ""),
+					title: anchor_title(priv.anchor_state)
 				}
 			];
 			if (priv.edit_mode) items.push({
@@ -48483,6 +48857,9 @@ function configure_toolbar(gobj) {
 				case "reset":
 					gobj_send_event(gobj, "EV_ZOOM_RESET", {}, gobj);
 					break;
+				case "anchor":
+					gobj_send_event(gobj, "EV_TOGGLE_ANCHOR", {}, gobj);
+					break;
 				case "auto-fit":
 					gobj_send_event(gobj, "EV_AUTO_FIT", {}, gobj);
 					break;
@@ -49493,12 +49870,12 @@ function graph_find_nodes(gobj, term) {
 async function graph_zoom_in(gobj) {
 	let graph = gobj.priv.graph;
 	const z = graph.getZoom();
-	await graph.zoomTo(z * 1.1);
+	after_camera(gobj, graph.zoomTo(z * 1.1));
 }
 async function graph_zoom_out(gobj) {
 	let graph = gobj.priv.graph;
 	const z = graph.getZoom();
-	await graph.zoomTo(z * .9);
+	after_camera(gobj, graph.zoomTo(z * .9));
 }
 async function graph_render(gobj) {
 	await gobj.priv.graph.render();
@@ -52499,7 +52876,56 @@ function ac_zoom_out(gobj, event, kw, src) {
 	return 0;
 }
 function ac_zoom_reset(gobj, event, kw, src) {
-	gobj.priv.graph.zoomTo(1);
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	if (priv.anchor_state === "on" && priv.anchor_id) after_camera(gobj, graph.zoomTo(1));
+	else graph.zoomTo(1);
+	return 0;
+}
+/************************************************************
+*  What the anchor button says it will do next.
+************************************************************/
+function anchor_title(state) {
+	if (state === "arming") return t("click the element to centre on");
+	if (state === "on") return t("centred: click to release");
+	return t("anchor view");
+}
+/************************************************************
+*  Every camera action ends the same way once an anchor is
+*  set: the thing you were reading goes back to the middle.
+*
+*  Chained on the promise G6 returns rather than run beside it
+*  -- centring before the zoom has finished centres the OLD
+*  view, and the reader watches the node slide away and come
+*  back.
+************************************************************/
+function after_camera(gobj, moved) {
+	let priv = gobj.priv;
+	if (priv.anchor_state !== "on" || !priv.anchor_id) return;
+	Promise.resolve(moved).then(function() {
+		yui_graph_center_on(priv.graph, priv.anchor_id);
+	}).catch(function() {});
+}
+/************************************************************
+*  Arm the anchor, or let it go.
+*
+*  Three states and one button, so a press ADVANCES: with no
+*  target it starts waiting for one, and with a target it
+*  releases.  Pressing it while it waits is a cancel, which is
+*  what somebody who pressed it by mistake will try.
+*
+*  Unlike the DOM toolbars, the button is not repainted in
+*  place: this toolbar is a G6 plugin that rebuilds its whole
+*  item list, and the pressed classes are baked into that list.
+************************************************************/
+function ac_toggle_anchor(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.anchor_state === "off") priv.anchor_state = "arming";
+	else {
+		priv.anchor_state = "off";
+		priv.anchor_id = "";
+	}
+	update_toolbar(gobj);
 	return 0;
 }
 /************************************************************
@@ -52673,6 +53099,13 @@ function ac_node_click$2(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	let node_id = kw.evt.target.id;
+	if (priv.anchor_state === "arming") {
+		priv.anchor_id = node_id;
+		priv.anchor_state = "on";
+		update_toolbar(gobj);
+		yui_graph_center_on(graph, node_id);
+		return 0;
+	}
 	try {
 		let nodedata = graph.getNodeData(node_id);
 		if (nodedata && nodedata.data && nodedata.data.desc) {
@@ -52934,6 +53367,11 @@ function create_gclass$4(gclass_name) {
 			ac_zoom_reset,
 			null
 		],
+		[
+			"EV_TOGGLE_ANCHOR",
+			ac_toggle_anchor,
+			null
+		],
 		[
 			"EV_TOGGLE_TOOLBARS",
 			ac_toggle_toolbars,
@@ -53047,6 +53485,7 @@ function create_gclass$4(gclass_name) {
 		["EV_ZOOM_IN", 0],
 		["EV_ZOOM_OUT", 0],
 		["EV_ZOOM_RESET", 0],
+		["EV_TOGGLE_ANCHOR", 0],
 		["EV_TOGGLE_TOOLBARS", 0],
 		["EV_AUTO_FIT", 0],
 		["EV_ZOOM_SELECTION", 0],