@yuneta/gobj-ui 7.23.28 → 7.23.30

package/dist/gobj-ui.es.js

@@ -1,4 +1,4 @@
-import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, duplicate_objects, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_find_by_name, gclass_flag_t, getPositionRelativeToBody, gobj_change_state, gobj_command, gobj_create, gobj_create_pure_child, gobj_create_service, gobj_current_state, gobj_destroy, gobj_find_child, gobj_find_service, gobj_full_name, gobj_gclass_name, gobj_is_destroying, gobj_is_playing, gobj_is_pure_child, gobj_is_running, gobj_is_service, gobj_is_volatil, gobj_match_children, gobj_name, gobj_parent, gobj_post_event, gobj_publish_event, gobj_read_attr, gobj_read_bool_attr, gobj_read_integer_attr, gobj_read_pointer_attr, gobj_read_str_attr, gobj_save_persistent_attrs, gobj_send_event, gobj_set_trace_machine_format, gobj_short_name, gobj_start, gobj_start_tree, gobj_stop, gobj_stop_children, gobj_subscribe_event, gobj_unsubscribe_event, gobj_write_attr, gobj_write_bool_attr, gobj_write_integer_attr, gobj_write_str_attr, gobj_yuno, is_array, is_boolean, is_date, is_gobj, is_null, is_number, is_object, is_string, json_deep_copy, json_object_size, json_object_update, json_object_update_missing, json_size, kw_clone_by_keys, kw_flag_t, kw_get_dict, kw_get_dict_value, kw_get_int, kw_get_local_storage_value, kw_get_str, kw_has_key, kw_set_dict_value, kw_set_local_storage_value, kwid_find_one_record, kwid_get_ids, kwid_new_dict, log_error, log_warning, msg_iev_get_stack, parseBoolean, parseSVG, refresh_language, safeSrc, sdata_flag_t, set_console_log_enabled, set_log_callback, sprintf, str_in_list, template_get_field_desc, trace_msg, treedb_decoder_fkey, treedb_encoder_fkey, treedb_get_field_desc, treedb_hook_data_size } from "@yuneta/gobj-js";
+import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, duplicate_objects, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_find_by_name, gclass_flag_t, getPositionRelativeToBody, gobj_bottom_gobj, gobj_change_state, gobj_command, gobj_create, gobj_create_pure_child, gobj_create_service, gobj_current_state, gobj_destroy, gobj_find_child, gobj_find_service, gobj_full_name, gobj_gclass_name, gobj_is_destroying, gobj_is_playing, gobj_is_pure_child, gobj_is_running, gobj_is_service, gobj_is_volatil, gobj_match_children, gobj_name, gobj_parent, gobj_post_event, gobj_publish_event, gobj_read_attr, gobj_read_bool_attr, gobj_read_integer_attr, gobj_read_pointer_attr, gobj_read_str_attr, gobj_save_persistent_attrs, gobj_send_event, gobj_set_trace_machine_format, gobj_short_name, gobj_start, gobj_start_tree, gobj_stop, gobj_stop_children, gobj_subscribe_event, gobj_unsubscribe_event, gobj_write_attr, gobj_write_bool_attr, gobj_write_integer_attr, gobj_write_str_attr, gobj_yuno, gobj_yuno_name, is_array, is_boolean, is_date, is_gobj, is_null, is_number, is_object, is_string, json_deep_copy, json_object_size, json_object_update, json_object_update_missing, json_size, kw_clone_by_keys, kw_flag_t, kw_get_dict, kw_get_dict_value, kw_get_int, kw_get_local_storage_value, kw_get_str, kw_has_key, kw_set_dict_value, kw_set_local_storage_value, kwid_find_one_record, kwid_get_ids, kwid_new_dict, log_error, log_warning, msg_iev_get_stack, parseBoolean, parseSVG, refresh_language, safeSrc, sdata_flag_t, set_console_log_enabled, set_log_callback, sprintf, str_in_list, template_get_field_desc, trace_msg, treedb_decoder_fkey, treedb_encoder_fkey, treedb_get_field_desc, treedb_hook_data_size } from "@yuneta/gobj-js";
 import i18next, { t } from "i18next";
 import TomSelect from "tom-select";
 import { createJSONEditor } from "vanilla-jsoneditor";
@@ -3513,7 +3513,7 @@ function composed_title(gobj) {
 *   Below the mobile breakpoint the window is a full-screen
 *   sheet (no float / drag / resize).
 ************************************************************/
-function is_mobile$3() {
+function is_mobile$4() {
 	return (window.innerWidth || document.documentElement.offsetWidth) <= MOBILE_MAX;
 }
 /************************************************************
@@ -3546,7 +3546,7 @@ function do_minimize(gobj) {
 ************************************************************/
 function build_ui$15(gobj) {
 	ensure_window_style();
-	let mobile = is_mobile$3();
+	let mobile = is_mobile$4();
 	let header = gobj_read_attr(gobj, "header");
 	if (is_gobj(header)) header = gobj_read_attr(header, "$container");
 	if (!header) header = build_default_header(gobj);
@@ -3884,7 +3884,7 @@ function min$1(gobj) {
 *  handlers moving
 ************************************************************/
 function mvStart(gobj, evt) {
-	if (is_mobile$3()) return;
+	if (is_mobile$4()) return;
 	let $container = gobj_read_attr(gobj, "$container");
 	let window_rect = $container.getBoundingClientRect();
 	let x = evt.screenX;
@@ -4043,7 +4043,7 @@ function do_center(gobj, x, y, width, height) {
 function handleResize(gobj) {
 	let $container = gobj_read_attr(gobj, "$container");
 	if (!$container) return;
-	if (is_mobile$3()) {
+	if (is_mobile$4()) {
 		$container.classList.add("is-mobile-sheet");
 		let vw = window.innerWidth || document.documentElement.offsetWidth;
 		let vh = window.innerHeight || document.documentElement.offsetHeight;
@@ -9706,6 +9706,42 @@ function yui_graph_update_anchor($container, state) {
 *   nothing to centre right now".
 ************************************************************/
 var __centring__ = /* @__PURE__ */ new WeakMap();
+/************************************************************
+*   Put `node_id` at a GIVEN point of the viewport.
+*
+*   What "the graph does not jump when I fold something" is
+*   made of: read where the card is, rebuild the layout, put
+*   that card back where it was. Everything that did not move
+*   in the layout stays put with it.
+************************************************************/
+async function yui_graph_place_at(graph, node_id, viewport_xy) {
+	if (!graph || !node_id || !viewport_xy) return false;
+	try {
+		if (typeof graph.getElementPosition !== "function" || typeof graph.getCanvasCenter !== "function" || typeof graph.translateTo !== "function") return false;
+		let z = graph.getZoom() || 1;
+		let c = graph.getCanvasCenter();
+		let n = graph.getElementPosition(node_id);
+		await graph.translateTo([(c[0] - n[0]) * z + (viewport_xy[0] - c[0]), (c[1] - n[1]) * z + (viewport_xy[1] - c[1])]);
+		return true;
+	} catch (e) {
+		return false;
+	}
+}
+/************************************************************
+*   Where `node_id` is right now, in viewport pixels.
+*
+*   The pair of the call above: read it before a rebuild, hand
+*   it back after, and the node has not moved on screen even
+*   though the layout under it changed.
+************************************************************/
+function yui_graph_viewport_of(graph, node_id) {
+	if (!graph || !node_id) return null;
+	try {
+		return graph.getViewportByCanvas(graph.getElementPosition(node_id));
+	} catch (e) {
+		return null;
+	}
+}
 async function yui_graph_center_on(graph, node_id) {
 	if (!graph || !node_id) return false;
 	let st = __centring__.get(graph);
@@ -10576,6 +10612,7 @@ var PRIVATE_DATA$11 = {
 	_resize_raf: 0,
 	search: "",
 	collapsed: null,
+	reserved: null,
 	match_count: 0,
 	find_timer: null,
 	fold_listener: null,
@@ -10587,7 +10624,8 @@ var PRIVATE_DATA$11 = {
 	anchor_path: "",
 	anchor_state: "off",
 	last_zoom: 1,
-	center_posted: false
+	center_posted: false,
+	pending_keep: null
 };
 var __gclass__$11 = null;
 var __layout_registered__$1 = false;
@@ -10697,6 +10735,7 @@ function type_color(type, dark) {
 function mt_create$11(gobj) {
 	let priv = gobj.priv;
 	priv.collapsed = /* @__PURE__ */ new Set();
+	priv.reserved = /* @__PURE__ */ new Map();
 	priv.search = "";
 	priv.canvas_id = "json-canvas-" + clean_name(gobj_name(gobj));
 	gobj_write_str_attr(gobj, "canvas_id", priv.canvas_id);
@@ -10796,7 +10835,11 @@ function build_ui$10(gobj) {
 			evt.stopPropagation();
 			evt.preventDefault();
 			if (evt.type !== "click") return;
-			gobj_send_event(gobj, "EV_TOGGLE_FOLD", { path: $handle.getAttribute("data-fold-path") }, gobj);
+			let $card = $handle.closest ? $handle.closest(".JSON_CARD") : null;
+			gobj_send_event(gobj, "EV_TOGGLE_FOLD", {
+				path: $handle.getAttribute("data-fold-path"),
+				keep: $card ? $card.getAttribute("data-json-path") : ""
+			}, gobj);
 		};
 		for (let type of FOLD_SWALLOWED_EVENTS) $mount.addEventListener(type, priv.fold_listener, true);
 	} else log_error(`${gobj_short_name(gobj)}: no canvas mount, fold handles are dead`);
@@ -11077,6 +11120,8 @@ var BEHAVIORS_READING$1 = [
 var BEHAVIORS_PICKING$1 = ["drag-canvas", ZOOM_CANVAS$1];
 var CARD_HEADER_H$1 = 24;
 var CARD_ROW_H$1 = 22;
+var H_GAP = 60;
+var V_GAP = 50;
 function fold_toggle_html(path, foldable, folded, branches, colors) {
 	if (!foldable) return FOLD_SPACER;
 	let label = folded ? "+" + branches : "&#8722;";
@@ -11198,7 +11243,10 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
 		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;
+		if (priv.collapsed.has(path)) {
+			push_fold_phantom(gobj, path, parent_id, parent_port, nodes, edges);
+			return parent_id;
+		}
 		for (let pending of pending_complex) build_json_nodes(gobj, add_segment(path, pending.key), pending.value, nodes, edges, parent_id, parent_port);
 		return parent_id;
 	}
@@ -11284,7 +11332,10 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
 		if (parent_port) edge.style.sourcePort = parent_port;
 		edges.push(edge);
 	}
-	if (folded) return group_id;
+	if (folded) {
+		push_fold_phantom(gobj, path, group_id, "", nodes, edges);
+		return group_id;
+	}
 	for (let pending of pending_complex) build_json_nodes(gobj, add_segment(path, pending.key), pending.value, nodes, edges, group_id, pending.port);
 	return group_id;
 }
@@ -11315,8 +11366,16 @@ function load_json(gobj) {
 		});
 		graph.render().then(() => {
 			reanchor$1(gobj);
-			paint_anchor_mark(gobj);
+			paint_anchor_mark$1(gobj);
 			if (preserve_view) {
+				let keep = priv.pending_keep;
+				priv.pending_keep = null;
+				if (keep) {
+					for (let n of nodes) if (n.data && n.data.path === keep.path) {
+						yui_graph_place_at(graph, n.id, [keep.x, keep.y]);
+						break;
+					}
+				}
 				yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
 				return;
 			}
@@ -11368,6 +11427,108 @@ function update_find_result(gobj) {
 	priv.$find_result.classList.remove("is-hidden");
 }
 /************************************************************
+*  The invisible child a fold leaves behind.
+*
+*  It is the whole of "nothing moves when I fold": the layout
+*  is a plain tree that centres a parent over its children, so
+*  the only way to keep the survivors still is to leave the
+*  space where it was, in the order it was, as a CHILD. A width
+*  reserved as a number would still have to be placed, and
+*  appending it moves every sibling by half of it.
+*
+*  A `rect` and not an `html` node: nothing is drawn, and a
+*  DOM element per fold would be a card nobody can see but the
+*  Inspector would show.
+************************************************************/
+function push_fold_phantom(gobj, path, parent_id, parent_port, nodes, edges) {
+	let width = gobj.priv.reserved.get(path) || 0;
+	if (!(width > 0) || !parent_id) return;
+	let id = gen_node_id$1(gobj);
+	nodes.push({
+		id,
+		type: "rect",
+		data: {
+			path,
+			phantom: true
+		},
+		style: {
+			size: [width, 1],
+			fill: "transparent",
+			stroke: "transparent",
+			opacity: 0,
+			pointerEvents: "none"
+		}
+	});
+	edges.push({
+		source: parent_id,
+		target: id,
+		style: {
+			opacity: 0,
+			endArrow: false,
+			sourcePort: parent_port || void 0
+		}
+	});
+}
+/************************************************************
+*  The width the children a fold is about to hide are taking
+*  RIGHT NOW, measured with the layout's own numbers.
+*
+*  `card_path` is the card that will lose them; `under` limits
+*  it to the ones hanging from one key of that card, which is
+*  the case of a container that has no card of its own -- its
+*  children hang from the parent, so its fold is a hole in the
+*  PARENT.
+************************************************************/
+function group_width_of(gobj, card_path, under) {
+	let priv = gobj.priv;
+	if (!priv.graph) return 0;
+	try {
+		let by_id = {};
+		let card_id = "";
+		for (let node of priv.graph.getNodeData()) {
+			if (!node || !node.data) continue;
+			by_id[node.id] = node;
+			if (node.data.path === card_path) card_id = node.id;
+		}
+		if (!card_id) return 0;
+		let prefix = under ? under + "`" : "";
+		let sum = 0;
+		let n = 0;
+		for (let edge of priv.graph.getEdgeData()) {
+			if (!edge || edge.source !== card_id) continue;
+			let kid = by_id[edge.target];
+			if (!kid) continue;
+			if (prefix && String(kid.data.path).indexOf(prefix) !== 0) continue;
+			sum += kid.data.subtree_width || 0;
+			n++;
+		}
+		return n ? sum + H_GAP * (n - 1) : 0;
+	} catch (e) {
+		return 0;
+	}
+}
+/************************************************************
+*  The screen spot of the card at `path`, to be given back
+*  after the rebuild. Null when it has no card of its own --
+*  a pure collection -- and then nothing anchors and the
+*  camera simply stays where it was.
+************************************************************/
+function keep_of(gobj, path) {
+	let priv = gobj.priv;
+	if (empty_string(path) || !priv.graph) return null;
+	try {
+		for (let node of priv.graph.getNodeData()) if (node && node.data && node.data.path === path) {
+			let vp = yui_graph_viewport_of(priv.graph, node.id);
+			return vp ? {
+				path,
+				x: vp[0],
+				y: vp[1]
+			} : null;
+		}
+	} catch (e) {}
+	return null;
+}
+/************************************************************
 *  Clear and reload.
 *      {preserve_view: true}
 *          keep the current zoom and translate (no fitView) —
@@ -11409,8 +11570,6 @@ var JsonTreeLayout = class extends BaseLayout {
 				h
 			};
 		}
-		const H_GAP = 60;
-		const V_GAP = 50;
 		let subtree_widths = {};
 		function calc_subtree_width(node_id) {
 			let kids = children_map[node_id] || [];
@@ -11427,6 +11586,7 @@ var JsonTreeLayout = class extends BaseLayout {
 			return subtree_widths[node_id];
 		}
 		for (let root of roots) calc_subtree_width(root.id);
+		for (let node of nodes) if (node.data) node.data.subtree_width = subtree_widths[node.id];
 		let positions = {};
 		function position_node(node_id, x, y) {
 			positions[node_id] = {
@@ -11474,9 +11634,16 @@ var JsonTreeLayout = class extends BaseLayout {
 /************************************************************
 *
 ************************************************************/
+function priv_reset_folds(gobj) {
+	gobj.priv.collapsed.clear();
+	gobj.priv.reserved.clear();
+}
 function ac_load_data$1(gobj, event, kw, src) {
 	if (kw.path !== void 0) gobj_write_str_attr(gobj, "path", kw.path);
-	if (kw.data !== void 0) gobj_write_attr(gobj, "json_data", kw.data);
+	if (kw.data !== void 0) {
+		gobj_write_attr(gobj, "json_data", kw.data);
+		priv_reset_folds(gobj);
+	}
 	refresh_json(gobj);
 	return 0;
 }
@@ -11531,8 +11698,16 @@ function ac_toggle_fold(gobj, event, kw, src) {
 		log_error(`${gobj_short_name(gobj)}: EV_TOGGLE_FOLD with no path`);
 		return -1;
 	}
-	if (priv.collapsed.has(path)) priv.collapsed.delete(path);
-	else priv.collapsed.add(path);
+	let card = kw && kw.keep || path;
+	if (priv.collapsed.has(path)) {
+		priv.collapsed.delete(path);
+		priv.reserved.delete(path);
+	} else {
+		let w = group_width_of(gobj, card, card === path ? "" : path);
+		priv.collapsed.add(path);
+		if (w > 0) priv.reserved.set(path, w);
+	}
+	priv.pending_keep = keep_of(gobj, kw && kw.keep || path);
 	refresh_json(gobj, { preserve_view: true });
 	update_find_result(gobj);
 	return 0;
@@ -11559,6 +11734,7 @@ function ac_expand_all$2(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	if (priv.collapsed.size === 0) return 0;
 	priv.collapsed.clear();
+	priv.reserved.clear();
 	refresh_json(gobj);
 	update_find_result(gobj);
 	return 0;
@@ -11575,6 +11751,7 @@ function ac_collapse_all$2(gobj, event, kw, src) {
 	if (empty_string(path)) path = "`";
 	collect_foldable_paths(json_data, path, paths, true);
 	priv.collapsed = new Set(paths);
+	priv.reserved.clear();
 	refresh_json(gobj);
 	update_find_result(gobj);
 	return 0;
@@ -11664,7 +11841,7 @@ function set_picking_mode$1(gobj, picking) {
 *   each time and the mark would otherwise survive only until the
 *   next fold.
 ************************************************************/
-function paint_anchor_mark(gobj) {
+function paint_anchor_mark$1(gobj) {
 	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
 	if (!$container) return;
@@ -11679,7 +11856,7 @@ function paint_anchor_mark(gobj) {
 function ac_center_anchor$2(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	priv.center_posted = false;
-	paint_anchor_mark(gobj);
+	paint_anchor_mark$1(gobj);
 	if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
 	return 0;
 }
@@ -11700,7 +11877,7 @@ function ac_toggle_anchor$2(gobj, event, kw, src) {
 		priv.anchor_path = "";
 	}
 	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
-	paint_anchor_mark(gobj);
+	paint_anchor_mark$1(gobj);
 	set_picking_mode$1(gobj, priv.anchor_state === "arming");
 	return 0;
 }
@@ -13023,7 +13200,7 @@ function ac_json_item_clicked(gobj, event, kw, src) {
 /************************************************************
 *   EV_LANGUAGE_CHANGED — re-translate chrome + re-render
 ************************************************************/
-function ac_language_changed$3(gobj, event, kw, src) {
+function ac_language_changed$4(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
 	if ($container) {
@@ -13084,7 +13261,7 @@ function create_gclass$10(gclass_name) {
 		],
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$3,
+			ac_language_changed$4,
 			null
 		],
 		[
@@ -13160,7 +13337,7 @@ function create_gclass$10(gclass_name) {
 		],
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$3,
+			ac_language_changed$4,
 			null
 		],
 		[
@@ -13210,6 +13387,567 @@ function register_c_yui_json() {
 	return create_gclass$10(GCLASS_NAME$10);
 }
 //#endregion
+//#region src/gobj_tree_model.js
+/***********************************************************************
+*          gobj_tree_model.js
+*
+*          The gobj tree of a yuno, as plain data.
+*
+*          The view (C_YUI_GOBJ_TREE_JS) draws NODE DESCRIPTORS, never
+*          gobjs. There are two producers of a descriptor, because the
+*          view has to show the gobjs of the BACKEND too:
+*
+*            - describe_js_gobj()      the gobj tree of THIS browser yuno
+*            - describe_backend_tree() the answer of the backend command
+*                                      `view-gobj-tree` of another yuno
+*
+*          Both answer the SAME shape, and that shape is the backend's:
+*          the field names are the ones `gobj2json()` writes in
+*          `kernel/c/gobj-c/src/gobj.c` (fullname, shortname, gclass,
+*          name, parent, state, running, playing, service, disabled,
+*          volatil, bottom_gobj, gobj_flags, commands, gobj_trace_level).
+*          Anything the browser runtime cannot answer is simply absent,
+*          and every reader here treats absent as "not known", never as
+*          false.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/************************************************************
+*  The role of a node: "yuno" | "service" | "volatil" | "pure" | "child"
+************************************************************/
+function node_role(d) {
+	if (!d) return "child";
+	if (d.is_yuno) return "yuno";
+	if (d.service) return "service";
+	if (d.volatil) return "volatil";
+	if (d.pure_child) return "pure";
+	return "child";
+}
+/************************************************************
+*  What the node is doing: "stopped" | "running" | "playing"
+************************************************************/
+function node_status(d) {
+	if (!d || !d.running) return "stopped";
+	return d.playing ? "playing" : "running";
+}
+/************************************************************
+*  The i18n key of the status, which is NOT the status itself:
+*  a gobj that runs and does not play is PAUSED to the reader,
+*  and "running" alone never said which of the two it was.
+************************************************************/
+function node_status_key(d) {
+	switch (node_status(d)) {
+		case "playing": return "playing";
+		case "running": return "running (paused)";
+		default: return "stopped";
+	}
+}
+/******************************
+*      Producers
+******************************/
+/************************************************************
+*  A descriptor of a LIVE gobj of this browser yuno, children
+*  included (the whole subtree, depth-first).
+*
+*  `is_root` marks the yuno itself: the JS runtime has no
+*  gobj_flag_yuno test of its own.
+************************************************************/
+function describe_js_gobj(target_gobj, is_root) {
+	if (!target_gobj) return null;
+	let parent_gobj = gobj_parent(target_gobj);
+	let bottom = gobj_bottom_gobj(target_gobj);
+	let d = {
+		gclass: gobj_gclass_name(target_gobj) || "",
+		name: gobj_name(target_gobj) || "",
+		shortname: gobj_short_name(target_gobj) || "",
+		fullname: gobj_full_name(target_gobj) || "",
+		parent: parent_gobj ? gobj_short_name(parent_gobj) || "" : "",
+		state: gobj_current_state(target_gobj) || "",
+		running: !!gobj_is_running(target_gobj),
+		playing: !!gobj_is_playing(target_gobj),
+		service: !!gobj_is_service(target_gobj),
+		volatil: !!gobj_is_volatil(target_gobj),
+		pure_child: !!gobj_is_pure_child(target_gobj),
+		disabled: !!target_gobj.disabled,
+		bottom_gobj: bottom ? gobj_short_name(bottom) || "" : "",
+		commands: !!(target_gobj.gclass && target_gobj.gclass.command_table),
+		is_yuno: !!is_root,
+		children: []
+	};
+	let children = target_gobj.dl_children || [];
+	for (let child of children) {
+		let cd = describe_js_gobj(child, false);
+		if (cd) d.children.push(cd);
+	}
+	return d;
+}
+/******************************
+*      Readouts
+******************************/
+/************************************************************
+*  The i18n key of a role. Two of the five roles are not the
+*  word the reader wants ("pure" and "volatil" alone say
+*  nothing), so the map is explicit.
+************************************************************/
+function role_i18n_key(role) {
+	switch (role) {
+		case "yuno": return "yuno";
+		case "service": return "service";
+		case "volatil": return "volatil child";
+		case "pure": return "pure child";
+		default: return "child";
+	}
+}
+/************************************************************
+*  The marks a node carries besides its role: what the reader
+*  would otherwise have to open the popover to learn.
+*
+*  Returns i18n KEYS, in a fixed order, so the card and the
+*  popover cannot disagree about what a node is.
+************************************************************/
+function node_badge_keys(d) {
+	let badges = [];
+	if (!d) return badges;
+	let role = node_role(d);
+	if (role !== "child") badges.push(role_i18n_key(role));
+	if (d.disabled) badges.push("disabled");
+	if (d.bottom_gobj) badges.push("bottom");
+	if (d.commands) badges.push("commands");
+	return badges;
+}
+/************************************************************
+*  The vocabulary of this view, translated.
+*
+*  Written as literal t("...") calls and not as t(key): a key
+*  reached through a variable is invisible to the locale
+*  validator, which is how a fixed vocabulary ships in one
+*  language and never changes it.
+************************************************************/
+function node_labels(t) {
+	if (typeof t !== "function") t = (k) => k;
+	return {
+		role: {
+			"yuno": t("yuno"),
+			"service": t("service"),
+			"volatil child": t("volatil child"),
+			"pure child": t("pure child"),
+			"child": t("child")
+		},
+		status: {
+			"playing": t("playing"),
+			"running (paused)": t("running (paused)"),
+			"stopped": t("stopped")
+		},
+		status_short: {
+			"playing": t("playing"),
+			"running": t("running"),
+			"stopped": t("stopped")
+		},
+		badge: {
+			"yuno": t("yuno"),
+			"service": t("service"),
+			"volatil child": t("volatil child"),
+			"pure child": t("pure child"),
+			"disabled": t("disabled"),
+			"bottom": t("bottom"),
+			"commands": t("commands")
+		},
+		field: {
+			gclass: t("gclass"),
+			name: t("name"),
+			full_name: t("full name"),
+			role: t("role"),
+			status: t("status"),
+			state: t("state"),
+			disabled: t("disabled"),
+			parent: t("parent"),
+			bottom_gobj: t("bottom gobj"),
+			commands: t("commands"),
+			traces: t("traces"),
+			flags: t("flags"),
+			children: t("children"),
+			yes: t("yes"),
+			collapsed: t("(collapsed)")
+		}
+	};
+}
+/************************************************************
+*  The rows of the popover: [label, value], both translated.
+*
+*  `t` is the app's translator -- the library has none of its
+*  own. Values that are a fixed vocabulary (the role, the
+*  status, yes) go through it too; free text does not.
+************************************************************/
+function node_info_rows(d, t) {
+	let rows = [];
+	if (!d) return rows;
+	let L = node_labels(t);
+	let f = L.field;
+	rows.push([f.gclass, d.gclass || "—"]);
+	rows.push([f.name, d.name || "—"]);
+	if (d.fullname && d.fullname !== d.shortname) rows.push([f.full_name, d.fullname]);
+	rows.push([f.role, L.role[role_i18n_key(node_role(d))]]);
+	rows.push([f.status, L.status[node_status_key(d)]]);
+	rows.push([f.state, d.state || "—"]);
+	if (d.disabled) rows.push([f.disabled, f.yes]);
+	if (d.parent) rows.push([f.parent, d.parent]);
+	if (d.bottom_gobj) rows.push([f.bottom_gobj, d.bottom_gobj]);
+	if (d.commands) rows.push([f.commands, f.yes]);
+	if (Array.isArray(d.gobj_trace_level) && d.gobj_trace_level.length > 0) rows.push([f.traces, d.gobj_trace_level.join(", ")]);
+	if (Array.isArray(d.gobj_flags) && d.gobj_flags.length > 0) rows.push([f.flags, d.gobj_flags.join(", ")]);
+	let kids = Array.isArray(d.children) ? d.children.length : 0;
+	if (kids > 0) rows.push([f.children, d.is_collapsed ? kids + " " + f.collapsed : String(kids)]);
+	return rows;
+}
+//#endregion
+//#region src/gclass_describe.js
+/***********************************************************************
+*          gclass_describe.js
+*
+*          A gclass, as plain JSON, in the shape the BACKEND answers.
+*
+*          There is no gclass viewer in the framework: the C kernel
+*          answers `view-gclass` with `gclass2json()`
+*          (`kernel/c/gobj-c/src/gobj.c`) and nothing draws it. This
+*          module builds the same document for a gclass of the BROWSER
+*          yuno, out of the gobj-js registry, so one viewer can show a
+*          gclass of either side:
+*
+*              {id, gcflag, attrs, commands, gclass_methods,
+*               internal_methods, FSM: {events, states}}
+*
+*          Two keys the backend does not carry are added at the end,
+*          because the browser can answer them for free and the reader
+*          asks them first: `instances` and `trace_levels`.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/***************************************************************
+*              Bit tables
+***************************************************************/
+var DATA_TYPE_NAMES = {
+	[data_type_t.DTP_STRING]: "DTP_STRING",
+	[data_type_t.DTP_BOOLEAN]: "DTP_BOOLEAN",
+	[data_type_t.DTP_INTEGER]: "DTP_INTEGER",
+	[data_type_t.DTP_REAL]: "DTP_REAL",
+	[data_type_t.DTP_LIST]: "DTP_LIST",
+	[data_type_t.DTP_DICT]: "DTP_DICT",
+	[data_type_t.DTP_JSON]: "DTP_JSON",
+	[data_type_t.DTP_POINTER]: "DTP_POINTER"
+};
+/************************************************************
+*  The names of the bits set in `bits`, in table order.
+************************************************************/
+function bits2names(table, bits) {
+	let names = [];
+	let value = Number(bits) || 0;
+	for (let name of Object.keys(table)) if ((value & table[name]) !== 0) names.push(name);
+	return names;
+}
+/************************************************************
+*  The name of a data type. An unknown type is reported as
+*  the number it is -- silently drawing "DTP_STRING" for a
+*  type nobody registered would be worse than saying "17".
+************************************************************/
+function data_type_name(type) {
+	return DATA_TYPE_NAMES[type] || String(type);
+}
+/************************************************************
+*  One SDATA descriptor -> one row.
+*
+*  A DTP_POINTER default is a live object (a DOM node, a
+*  gobj): it is never printed, only named, because a viewer
+*  that serializes it would either throw or dump the page.
+************************************************************/
+function sdatadesc2json(it) {
+	let row = {
+		id: it.name,
+		type: data_type_name(it.type),
+		flag: bits2names(sdata_flag_t, it.flag),
+		description: it.description || ""
+	};
+	if (it.type === data_type_t.DTP_POINTER) row.default_value = it.default_value === null || it.default_value === void 0 ? null : "<pointer>";
+	else row.default_value = it.default_value === void 0 ? null : it.default_value;
+	return row;
+}
+/************************************************************
+*  The attrs table of a gclass.
+************************************************************/
+function attrs2json(attrs_table) {
+	let rows = [];
+	if (!Array.isArray(attrs_table)) return rows;
+	for (let it of attrs_table) {
+		if (!it || !it.name) continue;
+		rows.push(sdatadesc2json(it));
+	}
+	return rows;
+}
+/************************************************************
+*  The command table of a gclass, with the parameters of
+*  each command (the `schema` slot of SDATACM).
+************************************************************/
+function commands2json(command_table) {
+	let rows = [];
+	if (!Array.isArray(command_table)) return rows;
+	for (let it of command_table) {
+		if (!it || !it.name) continue;
+		let row = {
+			id: it.name,
+			alias: it.alias || [],
+			description: it.description || ""
+		};
+		if (Array.isArray(it.schema)) row.parameters = attrs2json(it.schema);
+		rows.push(row);
+	}
+	return rows;
+}
+/************************************************************
+*  The methods the gclass actually implements. A table of
+*  every possible one, mostly empty, tells the reader nothing.
+************************************************************/
+function methods2json(mt) {
+	let names = [];
+	if (!mt || typeof mt !== "object") return names;
+	for (let key of Object.keys(mt)) if (typeof mt[key] === "function") names.push(key);
+	return names;
+}
+/************************************************************
+*  The FSM: the events the gclass declares, and what each
+*  state does with them.
+************************************************************/
+function fsm2json(gclass) {
+	let events = [];
+	for (let ev of gclass.dl_events || []) events.push({
+		event_name: ev.event_name,
+		event_flag: bits2names(event_flag_t, ev.event_flag)
+	});
+	let states = {};
+	for (let st of gclass.dl_states || []) {
+		let actions = [];
+		for (let ac of st.dl_actions || []) actions.push({
+			event_name: ac.event_name,
+			action: ac.action ? ac.action.name || "action" : "",
+			next_state: ac.next_state || ""
+		});
+		states[st.state_name] = actions;
+	}
+	return {
+		events,
+		states
+	};
+}
+/************************************************************
+*  The description of a gclass REGISTERED IN THIS BROWSER YUNO,
+*  or null when the registry does not know that name.
+*
+*  Null is the answer for a gclass of a BACKEND yuno too: the
+*  browser registry carries the GUI gclasses and nothing else,
+*  so the caller asks the backend `view-gclass` for those and
+*  shows whatever it answers -- this same shape.
+************************************************************/
+function describe_local_gclass(gclass_name) {
+	if (!gclass_name) return null;
+	let gclass = gclass_find_by_name(gclass_name, false);
+	if (!gclass) return null;
+	return {
+		id: gclass.gclass_name,
+		gcflag: bits2names(gclass_flag_t, gclass.gclass_flag),
+		attrs: attrs2json(gclass.attrs_table),
+		commands: commands2json(gclass.command_table),
+		gclass_methods: methods2json(gclass.gmt),
+		internal_methods: methods2json(gclass.lmt),
+		FSM: fsm2json(gclass),
+		instances: Number(gclass.instances) || 0,
+		trace_levels: Array.isArray(gclass.s_user_trace_level) ? gclass.s_user_trace_level : []
+	};
+}
+//#endregion
+//#region src/yui_gclass_view.js
+/***********************************************************************
+*          yui_gclass_view.js
+*
+*          The gclass viewer: what a GClass IS, in a window.
+*
+*          The framework had no such viewer. The C kernel answers
+*          `view-gclass` with a full description (attrs, commands,
+*          methods, FSM) and the only reader of it was a terminal.
+*          This one draws that same document with C_YUI_JSON, so the
+*          FSM of a gclass is a graph and its attrs table is a tree,
+*          and it takes the document from either side:
+*
+*            - a gclass of the browser yuno  -> describe_local_gclass()
+*            - a gclass of a backend yuno    -> `opts.description`, the
+*                                               answer of `view-gclass`
+*
+*          One window at a time per host: the caller keeps the handle
+*          and closes it, the way the treedb graph keeps its raw-JSON
+*          viewer.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/************************************************************
+*  Can this app show a gclass at all?
+*
+*  The viewer is C_YUI_JSON, and an app registers only the
+*  gclasses it mounts. The caller asks this BEFORE drawing a
+*  button, so an app that does not carry the viewer shows no
+*  control instead of a control that fails.
+************************************************************/
+function gclass_view_available() {
+	return !!gclass_find_by_name("C_YUI_JSON", false);
+}
+/************************************************************
+*  Open the viewer on `gclass_name`.
+*
+*  opts:
+*      description   the document to draw. Omitted, it is
+*                    built from the browser registry.
+*      title_prefix  what the window says before the gclass
+*                    name (the yuno it belongs to).
+*      on_close      called when the reader dismisses it.
+*
+*  Returns a handle for close_gclass_view(), or null (and a
+*  logged reason) when there is nothing to show.
+************************************************************/
+function open_gclass_view(host, gclass_name, opts) {
+	opts = opts || {};
+	if (!host || !gclass_name) {
+		log_error(`yui_gclass_view: open without a host or a gclass name`);
+		return null;
+	}
+	let shell = yui_shell_of(host);
+	if (!gclass_view_available()) {
+		log_error(`${gobj_short_name(host)}: C_YUI_JSON not registered by the app`);
+		yui_shell_show_error(shell, "gclass viewer unavailable", { t });
+		return null;
+	}
+	let description = opts.description || describe_local_gclass(gclass_name);
+	if (!description) {
+		log_warning(`${gobj_short_name(host)}: gclass not registered here: ${gclass_name}`);
+		yui_shell_show_error(shell, "gclass not registered in this yuno", { t });
+		return null;
+	}
+	let jv = gobj_create_service(`gclass-view-${clean_name(gobj_name(host))}`, "C_YUI_JSON", {
+		json_data: description,
+		subscriber: null
+	}, host);
+	if (!jv) {
+		log_error(`${gobj_short_name(host)}: cannot create the gclass viewer`);
+		return null;
+	}
+	gobj_start(jv);
+	let handle = {
+		json_gobj: jv,
+		win: null,
+		modal: null
+	};
+	let $box = gobj_read_pointer_attr(jv, "$container");
+	let on_close = () => {
+		if (typeof opts.on_close === "function") opts.on_close();
+	};
+	if (is_mobile$3()) {
+		if (!shell) {
+			log_error(`${gobj_short_name(host)}: no shell, cannot open the gclass sheet`);
+			close_gclass_view(handle);
+			return null;
+		}
+		handle.modal = yui_shell_show_modal(shell, $box, {
+			dialog: true,
+			logical_class: "GCLASS_VIEW_SHEET",
+			title_prefix: opts.title_prefix || "",
+			title: gclass_name,
+			t,
+			on_close
+		});
+		return handle;
+	}
+	let $win_parent = window_layer_of(host, shell);
+	handle.win = gobj_create_service(`gclass-win-${clean_name(gobj_name(host))}`, "C_YUI_WINDOW", {
+		$parent: $win_parent,
+		subscriber: null,
+		modal: false,
+		showMax: true,
+		showFooter: false,
+		resizable: true,
+		center: true,
+		auto_save_size_and_position: true,
+		width: 720,
+		height: 640,
+		logical_class: "GCLASS_VIEW_WINDOW",
+		title_prefix: opts.title_prefix || "",
+		title: gclass_name,
+		icon: "yi-code",
+		body: $box,
+		manager: gobj_find_service("__window_manager__", false) || null,
+		on_close
+	}, host);
+	if (!handle.win) {
+		log_error(`${gobj_short_name(host)}: cannot create the gclass window`);
+		close_gclass_view(handle);
+		return null;
+	}
+	gobj_start(handle.win);
+	return handle;
+}
+/************************************************************
+*  Close whatever open_gclass_view() opened. Safe on null and
+*  on a handle whose window the reader already dismissed.
+************************************************************/
+function close_gclass_view(handle) {
+	if (!handle) return;
+	let jv = handle.json_gobj;
+	let win = handle.win;
+	let modal = handle.modal;
+	handle.json_gobj = null;
+	handle.win = null;
+	handle.modal = null;
+	if (win && is_gobj(win)) try {
+		if (gobj_is_running(win)) gobj_stop(win);
+		gobj_destroy(win);
+	} catch (e) {
+		log_warning(`yui_gclass_view: window already gone: ${e}`);
+	}
+	if (modal && typeof modal.close === "function") try {
+		modal.close();
+	} catch (e) {
+		log_warning(`yui_gclass_view: modal already gone: ${e}`);
+	}
+	if (jv && is_gobj(jv)) try {
+		if (gobj_is_running(jv)) gobj_stop(jv);
+		gobj_destroy(jv);
+	} catch (e) {
+		log_warning(`yui_gclass_view: viewer already gone: ${e}`);
+	}
+}
+/************************************************************
+*  Where to mount the window: the SAME element the caller's
+*  own window hangs from.
+*
+*  Not a preference -- a requirement. z-index only orders
+*  siblings of one stacking context, so a viewer opened from a
+*  window on `body` and mounted in the shell's popup layer
+*  lands BEHIND its opener whatever number it is given, and
+*  the button reads as one that did nothing.
+************************************************************/
+function window_layer_of(host, shell) {
+	let $c = gobj_read_pointer_attr(host, "$container");
+	if ($c && typeof $c.closest === "function") {
+		let $win = $c.closest(".C_YUI_WINDOW");
+		if ($win && $win.parentNode) return $win.parentNode;
+	}
+	return typeof document !== "undefined" && document.getElementById("top-layer") || shell && yui_shell_popup_layer(shell) || null;
+}
+/************************************************************
+*  A window is not a sheet: below this width there is no room
+*  for a title bar the reader can drag.
+************************************************************/
+function is_mobile$3() {
+	return typeof window !== "undefined" && window.innerWidth <= 768;
+}
+//#endregion
 //#region src/c_yui_gobj_tree_js.js
 /***********************************************************************
 *          c_yui_gobj_tree_js.js
@@ -13245,6 +13983,71 @@ var BEHAVIORS_READING = [
 	"drag-element"
 ];
 var BEHAVIORS_PICKING = ["drag-canvas", ZOOM_CANVAS];
+var VIEW_STORE_PREFIX = "yui_gobj_tree_view:";
+function view_store_key(gobj) {
+	return VIEW_STORE_PREFIX + gobj_name(gobj);
+}
+function restore_view_shape(gobj) {
+	let priv = gobj.priv;
+	let state = load_view_state(gobj);
+	if (!state) return;
+	if (state.layout && LAYOUTS[state.layout]) {
+		gobj_write_str_attr(gobj, "layout", state.layout);
+		if (priv.$layout_select) priv.$layout_select.value = state.layout;
+	}
+	if (state.collapsed && typeof state.collapsed === "object") priv.collapse_state = Object.assign({}, state.collapsed);
+}
+function restore_view_state(gobj) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let state = load_view_state(gobj);
+	if (!graph || !state) return false;
+	let done = false;
+	priv.restoring = true;
+	try {
+		if (typeof state.zoom === "number" && state.zoom > 0) {
+			graph.zoomTo(state.zoom);
+			priv.last_zoom = state.zoom;
+			done = true;
+		}
+		if (Array.isArray(state.position) && state.position.length >= 2) {
+			graph.translateTo([state.position[0], state.position[1]]);
+			done = true;
+		}
+		if (state.anchor) {
+			priv.anchor_name = state.anchor;
+			priv.anchor_state = "on";
+			reanchor(gobj);
+			yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+			paint_anchor_mark(gobj);
+		}
+	} catch (e) {
+		log_error(`${gobj_short_name(gobj)}: cannot restore the saved view: ${e}`);
+	} finally {
+		priv.restoring = false;
+	}
+	yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+	return done;
+}
+function save_view_state(gobj) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	if (!graph || priv.restoring) return;
+	let state = {
+		layout: gobj_read_str_attr(gobj, "layout"),
+		collapsed: priv.collapse_state || {},
+		anchor: priv.anchor_state === "on" ? priv.anchor_name : ""
+	};
+	try {
+		state.zoom = graph.getZoom();
+		state.position = graph.getPosition();
+	} catch (e) {}
+	kw_set_local_storage_value(view_store_key(gobj), state);
+}
+function load_view_state(gobj) {
+	let state = kw_get_local_storage_value(view_store_key(gobj), null, false);
+	return state && typeof state === "object" ? state : null;
+}
 var PRIVATE_DATA$9 = {
 	canvas_id: "",
 	graph: null,
@@ -13255,6 +14058,9 @@ var PRIVATE_DATA$9 = {
 	$popover: null,
 	$popover_title: null,
 	$popover_body: null,
+	$popover_gclass: null,
+	popover_node: null,
+	gclass_view: null,
 	node_by_id: null,
 	collapse_state: null,
 	resize_observer: null,
@@ -13262,39 +14068,99 @@ var PRIVATE_DATA$9 = {
 	anchor_id: "",
 	anchor_name: "",
 	anchor_state: "off",
+	restoring: false,
+	restored: false,
 	last_zoom: 1
 };
 var __gclass__$9 = null;
 var __layout_registered__ = false;
 /***************************************************************
-*  Node colors by role
+*  Node colours by role.
+*
+*  Saturated hues, one family apart from the next, and the same
+*  five everywhere the reader meets a gobj. `stroke` draws the
+*  border and the edge; `accent` is the brighter sibling used
+*  for the bar down the left of the card and the toggle badge,
+*  so a card carries its colour twice at two intensities and is
+*  readable at the zoom where the text is not.
 ***************************************************************/
 var ROLE_COLORS = {
 	yuno: {
-		fill: "#E0F2FE",
-		stroke: "#075985"
+		stroke: "#0284c7",
+		accent: "#38bdf8"
 	},
 	service: {
-		fill: "#DCFCE7",
-		stroke: "#166534"
+		stroke: "#059669",
+		accent: "#34d399"
 	},
 	pure: {
-		fill: "#FEF9C3",
-		stroke: "#854D0E"
+		stroke: "#d97706",
+		accent: "#fbbf24"
 	},
 	volatil: {
-		fill: "#FCE7F3",
-		stroke: "#9D174D"
+		stroke: "#db2777",
+		accent: "#f472b6"
 	},
-	default: {
-		fill: "#F3F4F6",
-		stroke: "#374151"
+	child: {
+		stroke: "#7c3aed",
+		accent: "#a78bfa"
 	}
 };
-var STATE_COLORS = {
-	running_playing: "#15803D",
-	running: "#B45309",
-	stopped: "#B91C1C"
+/***************************************************************
+*  Status colours: what the gobj is DOING.
+*
+*  A pill and not a word: three states of one gobj are told
+*  apart across a whole tree by colour long before anybody
+*  reads them, and the dot alone never said which was which.
+*  `disabled` is a fourth entry and not a status -- a disabled
+*  gobj is still stopped or running -- but it takes the pill,
+*  because it is the fact that explains the other one.
+***************************************************************/
+var STATUS_COLORS = {
+	light: {
+		playing: {
+			fg: "#065f46",
+			bg: "#a7f3d0",
+			dot: "#10b981"
+		},
+		running: {
+			fg: "#92400e",
+			bg: "#fde68a",
+			dot: "#f59e0b"
+		},
+		stopped: {
+			fg: "#991b1b",
+			bg: "#fecaca",
+			dot: "#ef4444"
+		},
+		disabled: {
+			fg: "#334155",
+			bg: "#e2e8f0",
+			dot: "#94a3b8"
+		}
+	},
+	dark: {
+		playing: {
+			fg: "#6ee7b7",
+			bg: "rgba(16,185,129,0.28)",
+			dot: "#34d399"
+		},
+		running: {
+			fg: "#fcd34d",
+			bg: "rgba(245,158,11,0.28)",
+			dot: "#fbbf24"
+		},
+		stopped: {
+			fg: "#fca5a5",
+			bg: "rgba(239,68,68,0.28)",
+			dot: "#f87171"
+		},
+		disabled: {
+			fg: "#cbd5e1",
+			bg: "rgba(148,163,184,0.28)",
+			dot: "#94a3b8"
+		}
+	}
 };
 /***************************************************************
 *  Fixed node sizes per role (px).
@@ -13304,16 +14170,16 @@ var STATE_COLORS = {
 var NODE_SIZES = {
 	full: {
 		yuno: {
-			w: 240,
-			h: 72
+			w: 260,
+			h: 96
 		},
 		service: {
-			w: 210,
-			h: 68
+			w: 232,
+			h: 92
 		},
 		child: {
-			w: 160,
-			h: 60
+			w: 196,
+			h: 86
 		}
 	},
 	compact: {
@@ -13336,27 +14202,47 @@ var NODE_SIZES = {
 ***************************************************************/
 var GT_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
 /***************************************************************
-*  Soft, theme-aware card palette derived from the role colour
-*  (same visual language as the treedb graph cards): light tint
-*  fill + role-colour border, brightened on dark.
+*  Theme-aware card palette derived from the role colour.
+*
+*  Brighter than a tint: at 9% of the role colour every card
+*  was the same near-white rectangle and the tree read as a
+*  wireframe. The fill carries enough of the hue to be named
+*  from across the canvas, and the border and the accent bar
+*  carry the rest.
 ***************************************************************/
-function role_card_style(stroke, dark) {
+function role_card_style(colors, dark) {
+	let stroke = colors.stroke;
+	let accent = colors.accent;
 	return {
-		bg: dark ? `color-mix(in srgb, ${stroke} 30%, #2c3542)` : `color-mix(in srgb, ${stroke} 9%, #ffffff)`,
-		border: dark ? `color-mix(in srgb, ${stroke} 85%, #ffffff)` : stroke,
-		title: dark ? "#e8eaed" : "#0f172a",
-		sub: dark ? "#9aa4b2" : "#64748b",
-		tagbg: dark ? `color-mix(in srgb, ${stroke} 42%, #2c3542)` : `color-mix(in srgb, ${stroke} 14%, #ffffff)`,
-		shadow: dark ? "0 1px 3px rgba(0,0,0,0.45)" : "0 1px 3px rgba(15,23,42,0.12)"
+		bg: dark ? `color-mix(in srgb, ${stroke} 34%, #253044)` : `color-mix(in srgb, ${stroke} 13%, #ffffff)`,
+		border: dark ? accent : stroke,
+		accent: dark ? accent : stroke,
+		title: dark ? "#f1f5f9" : "#0f172a",
+		sub: dark ? "#a8b3c2" : "#475569",
+		tagbg: dark ? `color-mix(in srgb, ${stroke} 48%, #253044)` : `color-mix(in srgb, ${stroke} 20%, #ffffff)`,
+		tagfg: dark ? "#f1f5f9" : stroke,
+		shadow: dark ? "0 2px 6px rgba(0,0,0,0.50)" : "0 2px 5px rgba(15,23,42,0.16)"
 	};
 }
 /***************************************************************
-*  Map a gobj to its visual category.
+*  The pill colours of a node, for the theme in force.
 ***************************************************************/
-function get_node_category(target_gobj, is_root) {
-	if (is_root) return "yuno";
-	if (gobj_is_service(target_gobj)) return "service";
-	return "child";
+function status_card_style(d, dark) {
+	let table = dark ? STATUS_COLORS.dark : STATUS_COLORS.light;
+	if (d.disabled) return table.disabled;
+	return table[node_status(d)] || table.stopped;
+}
+/***************************************************************
+*  Map a node to its visual size class. Services are drawn
+*  bigger than plain children so the service boundary of the
+*  hierarchy is visible before anything is read.
+***************************************************************/
+function get_node_category(d) {
+	switch (node_role(d)) {
+		case "yuno": return "yuno";
+		case "service": return "service";
+		default: return "child";
+	}
 }
 /***************************************************************
 *  Layouts registry.
@@ -13468,13 +14354,22 @@ function mt_create$9(gobj) {
 *          Framework Method: Start
 ***************************************************************/
 function mt_start$9(gobj) {
+	restore_view_shape(gobj);
+	let shell = yui_shell_of(gobj);
+	if (shell) gobj_subscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
 	build_graph$2(gobj);
 	load_tree(gobj);
 }
 /***************************************************************
 *          Framework Method: Stop
 ***************************************************************/
-function mt_stop$9(gobj) {}
+function mt_stop$9(gobj) {
+	let priv = gobj.priv;
+	let shell = yui_shell_of(gobj);
+	if (shell) gobj_unsubscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+	close_gclass_view(priv.gclass_view);
+	priv.gclass_view = null;
+}
 /***************************************************************
 *          Framework Method: Destroy
 ***************************************************************/
@@ -13500,6 +14395,8 @@ function mt_destroy$9(gobj) {
 	priv.$popover = null;
 	priv.$popover_title = null;
 	priv.$popover_body = null;
+	priv.$popover_gclass = null;
+	priv.popover_node = null;
 	priv.$layout_select = null;
 	priv.node_by_id = null;
 	priv.collapse_state = null;
@@ -13603,10 +14500,38 @@ function build_popover(gobj, $container) {
         text-overflow: ellipsis;
     `;
 	$header.appendChild($title);
+	if (gclass_view_available()) {
+		let $gclass = document.createElement("button");
+		$gclass.type = "button";
+		$gclass.className = "GOBJ_TREE_POPOVER_GCLASS button is-small";
+		$gclass.style.cssText = `
+            margin-right: 6px;
+            padding: 0 8px;
+            height: 22px;
+            font-size: 11px;
+            white-space: nowrap;
+        `;
+		$gclass.textContent = t("gclass");
+		$gclass.setAttribute("i18n", "gclass");
+		$gclass.title = t("view gclass");
+		$gclass.setAttribute("data-i18n-title", "view gclass");
+		$gclass.setAttribute("aria-label", t("view gclass"));
+		$gclass.setAttribute("data-i18n-aria-label", "view gclass");
+		$gclass.addEventListener("click", (evt) => {
+			evt.stopPropagation();
+			gobj_send_event(gobj, "EV_OPEN_GCLASS", {}, gobj);
+		});
+		$header.appendChild($gclass);
+		priv.$popover_gclass = $gclass;
+	} else log_warning(`${gobj_short_name(gobj)}: no C_YUI_JSON registered, the gclass viewer is not offered`);
 	let $close = document.createElement("button");
 	$close.type = "button";
+	$close.className = "GOBJ_TREE_POPOVER_CLOSE";
 	$close.textContent = "×";
 	$close.title = t("close");
+	$close.setAttribute("data-i18n-title", "close");
+	$close.setAttribute("aria-label", t("close"));
+	$close.setAttribute("data-i18n-aria-label", "close");
 	$close.style.cssText = `
         background: transparent;
         border: none;
@@ -13740,6 +14665,7 @@ function build_graph$2(gobj) {
 		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);
+		save_view_state(gobj);
 	});
 	graph.on(NodeEvent.CLICK, (evt) => {
 		gobj_send_event(gobj, "EV_NODE_CLICK", { evt }, gobj);
@@ -13782,22 +14708,20 @@ function apply_layout(gobj) {
 	});
 }
 /************************************************************
-*  Resolve role colors for a gobj
-************************************************************/
-function get_role_colors(target_gobj, is_root) {
-	if (is_root) return ROLE_COLORS.yuno;
-	if (gobj_is_volatil(target_gobj)) return ROLE_COLORS.volatil;
-	if (gobj_is_service(target_gobj)) return ROLE_COLORS.service;
-	if (gobj_is_pure_child(target_gobj)) return ROLE_COLORS.pure;
-	return ROLE_COLORS.default;
-}
-/************************************************************
-*  Resolve state color
+*  The role colours of a node.
+*
+*  Note the ORDER: volatil before service. A volatil gobj that
+*  is also a service is drawn volatil, because that is the fact
+*  that decides how long it lives.
 ************************************************************/
-function get_state_color(target_gobj) {
-	if (!gobj_is_running(target_gobj)) return STATE_COLORS.stopped;
-	if (gobj_is_playing(target_gobj)) return STATE_COLORS.running_playing;
-	return STATE_COLORS.running;
+function get_role_colors(d) {
+	switch (node_role(d)) {
+		case "yuno": return ROLE_COLORS.yuno;
+		case "volatil": return ROLE_COLORS.volatil;
+		case "service": return ROLE_COLORS.service;
+		case "pure": return ROLE_COLORS.pure;
+		default: return ROLE_COLORS.child;
+	}
 }
 /************************************************************
 *  Generate a unique node id
@@ -13829,72 +14753,135 @@ function is_node_collapsed(gobj, full_name, num_children) {
 ************************************************************/
 function render_toggle_html(node_id, collapsed, num_children, cs) {
 	let label = collapsed ? "+" + num_children : "−";
+	let title = collapsed ? t("expand children") : t("collapse children");
 	return `<span
         data-gobj-toggle="true"
         data-node-id="${node_id}"
-        title="${collapsed ? "Expand children" : "Collapse children"}"
+        title="${escapeHtml(title)}"
         style="
             flex: 0 0 auto;
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            min-width: 22px;
-            height: 16px;
-            padding: 0 5px;
+            min-width: 24px;
+            height: 18px;
+            padding: 0 6px;
             margin-left: 4px;
-            background: ${cs.tagbg};
-            color: ${cs.border};
-            border: 1px solid ${cs.border};
-            border-radius: 6px;
+            background: ${cs.accent};
+            color: #ffffff;
+            border: 1px solid ${cs.accent};
+            border-radius: 9px;
             font-size: 10px;
-            font-weight: 600;
+            font-weight: 700;
             line-height: 1;
             cursor: pointer;
             user-select: none;
         ">${label}</span>`;
 }
 /************************************************************
-*  Recursively build nodes and edges from the gobj tree
+*  HTML for the status pill: what the gobj is DOING.
+*
+*  A dot plus a word, and the word is dropped in the compact
+*  card where there is no room for it -- the colour still
+*  carries it, and the `title` says it in full either way.
+************************************************************/
+function render_status_html(d, ss, labels, with_label) {
+	let full = d.disabled ? labels.field.disabled : labels.status[node_status_key(d)] || node_status_key(d);
+	let label = d.disabled ? labels.field.disabled : labels.status_short[node_status(d)] || node_status(d);
+	if (!with_label) return `<span title="${escapeHtml(full)}" style="
+            flex: 0 0 auto;
+            width: 10px; height: 10px; border-radius: 50%;
+            background: ${ss.dot};
+            box-shadow: 0 0 0 2px ${ss.bg};
+            margin-left: 6px;
+        "></span>`;
+	return `<span title="${escapeHtml(full)}" style="
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 1px 7px 1px 5px;
+        background: ${ss.bg};
+        color: ${ss.fg};
+        border-radius: 9px;
+        font-size: 10px;
+        font-weight: 700;
+        line-height: 1.45;
+        white-space: nowrap;
+    "><span style="width:7px; height:7px; border-radius:50%; background:${ss.dot};"></span>${escapeHtml(label)}</span>`;
+}
+/************************************************************
+*  HTML for the badges: what the gobj IS, besides its colour.
+************************************************************/
+function render_badges_html(d, cs, labels) {
+	let html = "";
+	for (let key of node_badge_keys(d)) {
+		let label = labels.badge[key] || key;
+		html += `<span style="
+            font-size: 10px;
+            font-weight: 600;
+            padding: 0 6px;
+            margin-right: 4px;
+            background: ${cs.tagbg};
+            color: ${cs.tagfg};
+            border: 1px solid ${cs.accent};
+            border-radius: 9px;
+            white-space: nowrap;
+        ">${escapeHtml(label)}</span>`;
+	}
+	return html;
+}
+/************************************************************
+*  Recursively build nodes and edges from a NODE DESCRIPTOR
+*  tree (gobj_tree_model.js), never from gobjs: the same
+*  builder draws the browser yuno and a backend one.
+*
+*  The descriptor is also what the popover reads, so the view
+*  fields it needs are written onto it here (`full_name`,
+*  `short_name`, `num_children`, `is_collapsed`,
+*  `direct_children`) instead of copied into a second object
+*  that can then disagree with the first.
 ************************************************************/
-function build_gobj_nodes(gobj, target_gobj, nodes, edges, parent_id, is_root, compact) {
+function build_gobj_nodes(gobj, d, nodes, edges, parent_id, compact, labels) {
 	let priv = gobj.priv;
 	let node_id = gen_node_id(gobj);
-	let gclass_name = gobj_gclass_name(target_gobj) || "";
-	let instance_name = gobj_name(target_gobj) || "";
-	let state = gobj_current_state(target_gobj) || "";
-	let full_name = gobj_full_name(target_gobj);
-	let colors = get_role_colors(target_gobj, is_root);
 	let dark = yui_is_dark();
-	let cs = role_card_style(colors.stroke, dark);
-	let state_color = get_state_color(target_gobj);
-	let running = gobj_is_running(target_gobj);
-	let playing = gobj_is_playing(target_gobj);
-	let status_text = !running ? "stopped" : playing ? "playing" : "running";
-	let category = get_node_category(target_gobj, is_root);
+	let colors = get_role_colors(d);
+	let cs = role_card_style(colors, dark);
+	let ss = status_card_style(d, dark);
+	let category = get_node_category(d);
 	let size = NODE_SIZES[compact ? "compact" : "full"][category];
 	let width = size.w;
 	let height = size.h;
 	let border_width = category === "yuno" || category === "service" ? 2 : 1;
-	let children = target_gobj.dl_children || [];
+	let border_style = d.disabled ? "dashed" : "solid";
+	let children = d.children || [];
 	let num_children = children.length;
 	let has_children = num_children > 0;
-	let collapsed = has_children && is_node_collapsed(gobj, full_name, num_children);
+	let collapsed = has_children && is_node_collapsed(gobj, d.fullname, num_children);
 	let direct_children = [];
 	for (let child of children) direct_children.push({
-		full_name: gobj_full_name(child),
-		has_grandchildren: (child.dl_children || []).length > 0
+		full_name: child.fullname,
+		has_grandchildren: (child.children || []).length > 0
 	});
+	d.full_name = d.fullname;
+	d.short_name = d.shortname;
+	d.num_children = num_children;
+	d.is_collapsed = collapsed;
+	d.direct_children = direct_children;
+	d.node_id = node_id;
 	let toggle_html = has_children ? render_toggle_html(node_id, collapsed, num_children, cs) : "";
+	let card_title = d.gclass + (d.name ? "^" + d.name : "");
 	let node_html;
 	if (compact) {
-		let compact_label = escapeHtml(instance_name ? gclass_name + "^" + instance_name : gclass_name);
+		let compact_label = escapeHtml(card_title);
 		node_html = `
-<div style="
+<div class="GOBJ_CARD" data-gobj-name="${escapeHtml(d.fullname)}" style="
     width: ${width}px;
     height: ${height}px;
     background: ${cs.bg};
-    border: ${border_width}px solid ${cs.border};
-    border-left: 5px solid ${cs.border};
+    border: ${border_width}px ${border_style} ${cs.border};
+    border-left: 6px solid ${cs.accent};
     border-radius: 7px;
     box-shadow: ${cs.shadow};
     font-family: ${GT_FONT};
@@ -13903,34 +14890,24 @@ function build_gobj_nodes(gobj, target_gobj, nodes, edges, parent_id, is_root, c
     padding: 0 8px;
     box-sizing: border-box;
     overflow: hidden;
+    opacity: ${d.disabled ? "0.72" : "1"};
     cursor: pointer;
 " title="${compact_label}">
     <span style="flex:1 1 auto; min-width:0; font-size:11px; font-weight:600; color:${cs.title}; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${compact_label}</span>
-    <span title="${escapeHtml(state || status_text)}" style="
-        flex: 0 0 auto;
-        width: 8px; height: 8px; border-radius: 50%;
-        background: ${state_color}; margin-left: 6px;
-    "></span>
+    ${render_status_html(d, ss, labels, false)}
     ${toggle_html}
 </div>`;
 	} else {
-		let header_label = escapeHtml(gclass_name);
-		let name_label = escapeHtml(instance_name);
-		let state_label = escapeHtml(state);
-		let badges = [];
-		if (is_root) badges.push("yuno");
-		else {
-			if (gobj_is_service(target_gobj)) badges.push("service");
-			if (gobj_is_pure_child(target_gobj)) badges.push("pure");
-			if (gobj_is_volatil(target_gobj)) badges.push("volatil");
-		}
-		let badges_html = badges.map((b) => `<span style="font-size:10px; padding:0 5px; margin-right:4px; background:${cs.tagbg}; color:${cs.border}; border:1px solid ${cs.border}; border-radius:6px; white-space:nowrap;">${b}</span>`).join("");
+		let header_label = escapeHtml(d.gclass);
+		let name_label = escapeHtml(d.name);
+		let state_label = escapeHtml(d.state);
 		node_html = `
-<div style="
+<div class="GOBJ_CARD" data-gobj-name="${escapeHtml(d.fullname)}" style="
     width: ${width}px;
     height: ${height}px;
     background: ${cs.bg};
-    border: ${border_width}px solid ${cs.border};
+    border: ${border_width}px ${border_style} ${cs.border};
+    border-left: 6px solid ${cs.accent};
     border-radius: 9px;
     box-shadow: ${cs.shadow};
     overflow: hidden;
@@ -13939,48 +14916,29 @@ function build_gobj_nodes(gobj, target_gobj, nodes, edges, parent_id, is_root, c
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: 5px 9px;
-    gap: 1px;
+    padding: 6px 9px;
+    gap: 2px;
+    opacity: ${d.disabled ? "0.72" : "1"};
     cursor: pointer;
-" title="${escapeHtml(gclass_name + (instance_name ? "^" + instance_name : ""))}">
+" title="${escapeHtml(card_title)}">
     <div style="flex:0 0 auto; display:flex; align-items:center; gap:6px; overflow:hidden;">
-        <span style="flex:1 1 auto; min-width:0; font-size:12px; line-height:1.25; font-weight:600; color:${cs.title}; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${header_label}</span>
+        <span style="flex:1 1 auto; min-width:0; font-size:12px; line-height:1.25; font-weight:700; color:${cs.title}; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${header_label}</span>
         ${toggle_html}
     </div>
     <div style="flex:0 0 auto; font-size:12px; line-height:1.25; color:${cs.sub}; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${name_label || "&nbsp;"}</div>
     <div style="flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; gap:6px; overflow:hidden;">
-        <span style="flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">${badges_html}</span>
-        <span style="flex:0 0 auto; display:flex; align-items:center; gap:4px; color:${state_color}; font-weight:600; font-size:11px; white-space:nowrap;">
-            <span style="width:7px; height:7px; border-radius:50%; background:${state_color};"></span>${state_label || status_text}
-        </span>
+        <span style="flex:1 1 auto; min-width:0; font-size:10px; line-height:1.25; color:${cs.sub}; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${state_label || "&nbsp;"}</span>
+        ${render_status_html(d, ss, labels, true)}
     </div>
+    <div style="flex:0 0 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">${render_badges_html(d, cs, labels)}</div>
 </div>`;
 	}
-	let parent_gobj = gobj_parent(target_gobj);
-	let node_data = {
-		gclass: gclass_name,
-		name: instance_name,
-		short_name: gobj_short_name(target_gobj),
-		full_name,
-		parent_short_name: parent_gobj ? gobj_short_name(parent_gobj) : "",
-		state,
-		category,
-		is_yuno: is_root,
-		is_service: gobj_is_service(target_gobj),
-		is_pure_child: gobj_is_pure_child(target_gobj),
-		is_volatil: gobj_is_volatil(target_gobj),
-		is_running: running,
-		is_playing: playing,
-		num_children,
-		is_collapsed: collapsed,
-		direct_children
-	};
 	if (!priv.node_by_id) priv.node_by_id = {};
-	priv.node_by_id[node_id] = node_data;
+	priv.node_by_id[node_id] = d;
 	let node = {
 		id: node_id,
 		type: "html",
-		data: node_data,
+		data: d,
 		style: {
 			innerHTML: node_html,
 			size: [width, height],
@@ -13993,11 +14951,11 @@ function build_gobj_nodes(gobj, target_gobj, nodes, edges, parent_id, is_root, c
 		source: parent_id,
 		target: node_id,
 		style: {
-			stroke: colors.stroke,
-			lineWidth: 1
+			stroke: colors.accent,
+			lineWidth: 1.4
 		}
 	});
-	if (!collapsed) for (let child of children) build_gobj_nodes(gobj, child, nodes, edges, node_id, false, compact);
+	if (!collapsed) for (let child of children) build_gobj_nodes(gobj, child, nodes, edges, node_id, compact, labels);
 	return node_id;
 }
 /************************************************************
@@ -14014,9 +14972,13 @@ function load_tree(gobj) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	if (!graph) return;
-	let yuno = gobj_yuno();
-	if (!yuno) return;
+	let root = describe_js_gobj(gobj_yuno(), true);
+	if (!root) {
+		log_error(`${gobj_short_name(gobj)}: no yuno to draw`);
+		return;
+	}
 	let layout_cfg = get_layout_cfg(gobj_read_str_attr(gobj, "layout"));
+	let labels = node_labels(t);
 	let anchor = priv.pending_anchor || null;
 	let preserve_view = !!priv.pending_preserve_view;
 	priv.pending_anchor = null;
@@ -14025,7 +14987,7 @@ function load_tree(gobj) {
 	priv.node_by_id = {};
 	let nodes = [];
 	let edges = [];
-	build_gobj_nodes(gobj, yuno, nodes, edges, null, true, layout_cfg.compact);
+	build_gobj_nodes(gobj, root, nodes, edges, null, layout_cfg.compact, labels);
 	if (nodes.length > 0) {
 		let root_id = nodes[0].id;
 		graph.setData({
@@ -14034,11 +14996,16 @@ function load_tree(gobj) {
 		});
 		graph.render().then(() => {
 			reanchor(gobj);
+			paint_anchor_mark(gobj);
 			if (anchor) {
 				restore_view_anchored(gobj, anchor);
 				return;
 			}
 			if (preserve_view) return;
+			if (!priv.restored) {
+				priv.restored = true;
+				if (restore_view_state(gobj)) 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;
@@ -14121,46 +15088,17 @@ function refresh_tree(gobj, opts) {
 	}
 }
 /************************************************************
-*  Rows to show in the popover for a given node data.
-*
-*  This is the extension point: to surface a new attribute,
-*  collect it into `node_data` in build_gobj_nodes(), then
-*  append a `[label, value]` pair here.
-************************************************************/
-function get_node_info_rows(node_data) {
-	let rows = [];
-	rows.push([t("gclass"), node_data.gclass || "—"]);
-	rows.push([t("name"), node_data.name || "—"]);
-	if (node_data.full_name && node_data.full_name !== node_data.short_name) rows.push([t("full name"), node_data.full_name]);
-	let role;
-	if (node_data.is_yuno) role = "yuno";
-	else if (node_data.is_service) role = "service";
-	else if (node_data.is_volatil) role = "volatil child";
-	else if (node_data.is_pure_child) role = "pure child";
-	else role = "child";
-	rows.push([t("role"), role]);
-	let status;
-	if (!node_data.is_running) status = "stopped";
-	else if (node_data.is_playing) status = "running + playing";
-	else status = "running";
-	rows.push([t("status"), status]);
-	rows.push([t("state"), node_data.state || "—"]);
-	if (node_data.parent_short_name) rows.push([t("parent"), node_data.parent_short_name]);
-	if (typeof node_data.num_children === "number") {
-		let kids = node_data.num_children;
-		if (kids > 0 && node_data.is_collapsed) rows.push([t("children"), kids + " " + t("(collapsed)")]);
-		else if (kids > 0) rows.push([t("children"), String(kids)]);
-	}
-	return rows;
-}
-/************************************************************
 *  Render popover body from the info rows of a node.
+*
+*  The rows come from gobj_tree_model.js, so a node of the
+*  browser yuno and a node of a backend one are read out with
+*  the same words in the same order.
 ************************************************************/
 function render_popover_body(gobj, node_data) {
 	let $body = gobj.priv.$popover_body;
 	if (!$body) return;
-	$body.innerHTML = get_node_info_rows(node_data).map(([label, value]) => `
-        <div style="display:grid; grid-template-columns: 90px 1fr; column-gap:10px; padding: 2px 0;">
+	$body.innerHTML = node_info_rows(node_data, t).map(([label, value]) => `
+        <div style="display:grid; grid-template-columns: 96px 1fr; column-gap:10px; padding: 2px 0;">
             <span style="color:var(--bulma-text-weak, #6B7280); font-weight:500;">${escapeHtml(String(label))}</span>
             <span style="color:var(--bulma-text-strong, #1A1A1A); word-break:break-all;">${escapeHtml(String(value))}</span>
         </div>
@@ -14177,6 +15115,7 @@ function show_popover(gobj, node_data, client_x, client_y) {
 	let $title = priv.$popover_title;
 	let $container = gobj_read_attr(gobj, "$container");
 	if (!$popover || !$title || !$container) return;
+	priv.popover_node = node_data;
 	$title.textContent = node_data.short_name || node_data.gclass + (node_data.name ? "^" + node_data.name : "");
 	$title.title = $title.textContent;
 	render_popover_body(gobj, node_data);
@@ -14207,6 +15146,7 @@ function hide_popover(gobj) {
 	if (priv.$popover) priv.$popover.style.display = "none";
 	if (priv.$popover_body) priv.$popover_body.innerHTML = "";
 	if (priv.$popover_title) priv.$popover_title.textContent = "";
+	priv.popover_node = null;
 }
 /************************************************************
 *  Generic tree layout engine.
@@ -14469,6 +15409,7 @@ var GobjLanesHLayout = class extends BaseLayout {
 *
 ************************************************************/
 function ac_refresh$3(gobj, event, kw, src) {
+	save_view_state(gobj);
 	refresh_tree(gobj);
 	return 0;
 }
@@ -14496,6 +15437,8 @@ function ac_change_layout(gobj, event, kw, src) {
 	gobj_write_str_attr(gobj, "layout", new_key);
 	if (priv.$layout_select && priv.$layout_select.value !== new_key) priv.$layout_select.value = new_key;
 	apply_layout(gobj);
+	save_view_state(gobj);
+	save_view_state(gobj);
 	refresh_tree(gobj);
 	return 0;
 }
@@ -14515,6 +15458,7 @@ function ac_toggle_collapse(gobj, event, kw, src) {
 		priv.collapse_state[node_data.full_name] = "expanded";
 		for (let child_info of node_data.direct_children || []) if (child_info.has_grandchildren) priv.collapse_state[child_info.full_name] = "collapsed";
 	} else priv.collapse_state[node_data.full_name] = "collapsed";
+	save_view_state(gobj);
 	refresh_tree(gobj, { anchor });
 	return 0;
 }
@@ -14594,10 +15538,31 @@ function reanchor(gobj) {
 ************************************************************/
 function ac_center_anchor$1(gobj, event, kw, src) {
 	let priv = gobj.priv;
+	paint_anchor_mark(gobj);
+	save_view_state(gobj);
 	if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
 	return 0;
 }
 /************************************************************
+*   Mark the card the camera is holding.
+*
+*   A class on the card's own element and not a G6 node state:
+*   G6 paints no state style on an html node.
+*
+*   Re-applied after every rebuild, because the cards are new
+*   DOM each time and the mark would otherwise last until the
+*   next expand.
+************************************************************/
+function paint_anchor_mark(gobj) {
+	let priv = gobj.priv;
+	let $container = gobj_read_attr(gobj, "$container");
+	if (!$container) return;
+	for (let $card of $container.querySelectorAll(".GOBJ_CARD_ANCHORED")) $card.classList.remove("GOBJ_CARD_ANCHORED");
+	if (priv.anchor_state !== "on" || !priv.anchor_name) return;
+	let $it = $container.querySelector(".GOBJ_CARD[data-gobj-name=\"" + CSS.escape(priv.anchor_name) + "\"]");
+	if ($it) $it.classList.add("GOBJ_CARD_ANCHORED");
+}
+/************************************************************
 *   Reading, or picking the node to anchor.
 ************************************************************/
 function set_picking_mode(gobj, picking) {
@@ -14625,6 +15590,8 @@ function ac_toggle_anchor$1(gobj, event, kw, src) {
 	}
 	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
 	set_picking_mode(gobj, priv.anchor_state === "arming");
+	paint_anchor_mark(gobj);
+	save_view_state(gobj);
 	return 0;
 }
 /************************************************************
@@ -14708,6 +15675,7 @@ function ac_node_click$3(gobj, event, kw, src) {
 function ac_show$6(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
+	save_view_state(gobj);
 	refresh_tree(gobj);
 	if (graph) {
 		let $canvas = document.getElementById(priv.canvas_id);
@@ -14748,6 +15716,68 @@ function ac_hide$5(gobj, event, kw, src) {
 	hide_popover(gobj);
 	return 0;
 }
+/************************************************************
+*  Open the gclass of the node the popover is showing.
+*
+*  One window at a time: opening a second gclass replaces the
+*  first rather than stacking windows nobody closes.
+************************************************************/
+function ac_open_gclass(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let node_data = priv.popover_node;
+	if (!node_data || !node_data.gclass) {
+		log_error(`${gobj_short_name(gobj)}: EV_OPEN_GCLASS with no node`);
+		return -1;
+	}
+	close_gclass_view(priv.gclass_view);
+	priv.gclass_view = null;
+	priv.gclass_view = open_gclass_view(gobj, node_data.gclass, {
+		title_prefix: gobj_yuno_name() || "",
+		on_close: () => {
+			if (gobj_is_destroying(gobj)) return;
+			gobj_send_event(gobj, "EV_GCLASS_CLOSED", {}, gobj);
+		}
+	});
+	return 0;
+}
+/************************************************************
+*  The reader dismissed the gclass window (its own ✕).
+*
+*  C_YUI_WINDOW.close_window() calls on_close and THEN destroys
+*  itself, so here we only drop our reference -- destroying it
+*  again would destroy it twice.
+************************************************************/
+function ac_gclass_closed(gobj, event, kw, src) {
+	gobj.priv.gclass_view = null;
+	return 0;
+}
+/************************************************************
+*  The gclass viewer asked for a subtree.
+*
+*  It cannot: the gclass description is a COMPLETE document,
+*  it carries no `__collapsed__` stub, so nothing in it is
+*  fetchable. The event is declared because the viewer is
+*  hosted as a child and subscribes its host to everything it
+*  publishes -- and it is logged, because arriving here means
+*  the document was not the one we built.
+************************************************************/
+function ac_gclass_expand_path(gobj, event, kw, src) {
+	log_error(`${gobj_short_name(gobj)}: EV_EXPAND_PATH on a complete document: ${kw && kw.path}`);
+	return -1;
+}
+/************************************************************
+*  The app switched language.
+*
+*  A rebuild, not a re-translation: the words live inside the
+*  innerHTML of G6 nodes, where refresh_language() cannot go.
+************************************************************/
+function ac_language_changed$3(gobj, event, kw, src) {
+	let $container = gobj_read_attr(gobj, "$container");
+	if ($container) refresh_language($container, t);
+	hide_popover(gobj);
+	refresh_tree(gobj);
+	return 0;
+}
 /***************************
 *          FSM
 ***************************/
@@ -14781,7 +15811,11 @@ function create_gclass$9(gclass_name) {
 		["EV_CENTER_ANCHOR", 0],
 		["EV_RESIZE", 0],
 		["EV_SHOW", 0],
-		["EV_HIDE", 0]
+		["EV_HIDE", 0],
+		["EV_OPEN_GCLASS", 0],
+		["EV_GCLASS_CLOSED", 0],
+		["EV_EXPAND_PATH", 0],
+		["EV_LANGUAGE_CHANGED", 0]
 	], [["ST_IDLE", [
 		[
 			"EV_REFRESH",
@@ -14862,6 +15896,26 @@ function create_gclass$9(gclass_name) {
 			"EV_HIDE",
 			ac_hide$5,
 			null
+		],
+		[
+			"EV_OPEN_GCLASS",
+			ac_open_gclass,
+			null
+		],
+		[
+			"EV_GCLASS_CLOSED",
+			ac_gclass_closed,
+			null
+		],
+		[
+			"EV_EXPAND_PATH",
+			ac_gclass_expand_path,
+			null
+		],
+		[
+			"EV_LANGUAGE_CHANGED",
+			ac_language_changed$3,
+			null
 		]
 	]]], gmt$9, 0, attrs_table$9, PRIVATE_DATA$9, 0, 0, 0, 0);
 	if (!__gclass__$9) return -1;
@@ -49026,7 +50080,7 @@ function configure_toolbar(gobj) {
 				{
 					id: "g6-icon-anchor",
 					value: "anchor",
-					className: "EV_TOGGLE_ANCHOR" + (priv.anchor_state !== "off" ? " pressed_state" : "") + (priv.anchor_state === "arming" ? " color_pending_state" : ""),
+					className: "EV_TOGGLE_ANCHOR" + (priv.anchor_state === "on" ? " pressed_state" : "") + (priv.anchor_state === "arming" ? " color_pending_state" : ""),
 					title: anchor_title(priv.anchor_state)
 				}
 			];
@@ -51935,15 +52989,15 @@ function refresh_minimap(gobj) {
 *  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, selected) {
+function node_innerHTML_of(nd, theme, highlight, selected, anchored) {
 	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, selected);
-		case "extended": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, true, record.id, highlight, selected);
-		case "hierarchical": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, false, record.id, highlight, selected);
+		case "child": return build_chip_innerHTML(desc.color, theme, record.icon, label, record.id, highlight, selected, anchored);
+		case "extended": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, true, record.id, highlight, selected, anchored);
+		case "hierarchical": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, false, record.id, highlight, selected, anchored);
 	}
 	return null;
 }
@@ -51964,7 +53018,7 @@ function repaint_cards(gobj, ids) {
 	let selected = new Set(priv._selected_paint_ids || []);
 	let updates = [];
 	for (let id of ids) {
-		let html = node_innerHTML_of(graph.getNodeData(id), priv.theme, focus.has(id), selected.has(id));
+		let html = node_innerHTML_of(graph.getNodeData(id), priv.theme, focus.has(id), selected.has(id), priv.anchor_state === "on" && id === priv.anchor_id);
 		if (html !== null) updates.push({
 			id,
 			style: { innerHTML: html }
@@ -52038,6 +53092,23 @@ function refresh_default_edges_theme(gobj, theme) {
 *  it, which is also the order that reads correctly when only one
 *  of them is on.
 ************************************************************/
+/************************************************************
+*  The mark of the card the CAMERA is holding.
+*
+*  An outline and not another ring, and DASHED: the two rings
+*  already mean things here -- amber is a find match or a
+*  focused topic, blue is the selection -- and a third solid
+*  ring would be a third thing to learn in the same channel.
+*  A dash is a different channel, so it reads beside either of
+*  them, and it says "provisional" the way a camera state is.
+*
+*  The same dash the other two viewers draw: this is one
+*  feature with one control, and it should not be three
+*  drawings.
+************************************************************/
+function anchor_outline(anchored) {
+	return anchored ? "outline: 3px dashed #fa8c16; outline-offset: 2px;" : "";
+}
 function ring_shadow(highlight, selected, base_shadow) {
 	let rings = [];
 	if (highlight) rings.push(`0 0 0 4px ${HIGHLIGHT_HALO}`);
@@ -52052,7 +53123,7 @@ function ring_shadow(highlight, selected, base_shadow) {
 *  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, highlight, selected) {
+function build_chip_innerHTML(color, theme, icon, label, key, highlight, selected, anchored) {
 	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"})`;
@@ -52065,13 +53136,14 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight, selecte
         margin-right: 6px; flex: 0 0 auto;
     "/>`;
 	return `
-<div title="${escapeHtml(title)}" style="
+<div class="TREEDB_CARD" title="${escapeHtml(title)}" style="
     box-sizing: border-box;
     width: 100%;
     height: 100%;
     background: ${bg};
     border: ${highlight ? "3px" : "1px"} solid ${border};
     ${ring_shadow(highlight, selected, "")}
+    ${anchor_outline(anchored)}
     border-radius: 8px;
     color: ${text_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -52097,7 +53169,7 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight, selecte
 *  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, highlight, selected) {
+function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight, selected, anchored) {
 	let title = key || label;
 	let dark = theme === "dark";
 	let surface = dark ? "#1b2230" : "#ffffff";
@@ -52132,7 +53204,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     ">${escapeHtml(topic_name)}</div>`;
 	return `
-<div title="${escapeHtml(title)}" style="
+<div class="TREEDB_CARD" title="${escapeHtml(title)}" style="
     box-sizing: border-box;
     width: 100%;
     height: 100%;
@@ -52140,6 +53212,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
     border: ${highlight ? "3px" : "1.5px"} ${border_style} ${border};
     border-radius: 10px;
     ${ring_shadow(highlight, selected, shadow)}
+    ${anchor_outline(anchored)}
     color: ${title_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     display: flex;
@@ -53123,12 +54196,14 @@ function after_camera(gobj, moved) {
 ************************************************************/
 function ac_toggle_anchor(gobj, event, kw, src) {
 	let priv = gobj.priv;
+	let was = priv.anchor_id;
 	if (priv.anchor_state === "off") priv.anchor_state = "arming";
 	else {
 		priv.anchor_state = "off";
 		priv.anchor_id = "";
 	}
 	update_toolbar(gobj);
+	if (was) repaint_cards(gobj, /* @__PURE__ */ new Set([was]));
 	return 0;
 }
 /************************************************************
@@ -53306,6 +54381,7 @@ function ac_node_click$2(gobj, event, kw, src) {
 		priv.anchor_id = node_id;
 		priv.anchor_state = "on";
 		update_toolbar(gobj);
+		repaint_cards(gobj, /* @__PURE__ */ new Set([node_id]));
 		gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
 		return 0;
 	}