@yuneta/gobj-ui 7.23.82 → 7.23.84

package/dist/gobj-ui.es.js

@@ -13982,7 +13982,7 @@ function ac_json_item_clicked(gobj, event, kw, src) {
 /************************************************************
 *   EV_LANGUAGE_CHANGED — re-translate chrome + re-render
 ************************************************************/
-function ac_language_changed$6(gobj, event, kw, src) {
+function ac_language_changed$8(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
 	if ($container) {
@@ -14043,7 +14043,7 @@ function create_gclass$12(gclass_name) {
 		],
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$6,
+			ac_language_changed$8,
 			null
 		],
 		[
@@ -14119,7 +14119,7 @@ function create_gclass$12(gclass_name) {
 		],
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$6,
+			ac_language_changed$8,
 			null
 		],
 		[
@@ -15058,7 +15058,7 @@ function ac_theme_changed(gobj, event, kw, src) {
 *   inside an innerHTML string, where refresh_language()
 *   cannot reach.
 ************************************************************/
-function ac_language_changed$5(gobj, event, kw, src) {
+function ac_language_changed$7(gobj, event, kw, src) {
 	let $container = gobj_read_attr(gobj, "$container");
 	if ($container) refresh_language($container, t);
 	load_fsm(gobj);
@@ -15165,7 +15165,7 @@ function create_gclass$11(gclass_name) {
 		],
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$5,
+			ac_language_changed$7,
 			null
 		],
 		[
@@ -16722,7 +16722,7 @@ function ac_copy_all(gobj, event, kw, src) {
 *   is. Re-rendering is the only way both end up in the same
 *   language.
 ************************************************************/
-function ac_language_changed$4(gobj, event, kw, src) {
+function ac_language_changed$6(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
 	if ($container) {
@@ -16814,7 +16814,7 @@ function create_gclass$10(gclass_name) {
 		],
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$4,
+			ac_language_changed$6,
 			null
 		],
 		[
@@ -19398,7 +19398,7 @@ function ac_gclass_closed(gobj, event, kw, src) {
 *  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) {
+function ac_language_changed$5(gobj, event, kw, src) {
 	let $container = gobj_read_attr(gobj, "$container");
 	if ($container) refresh_language($container, t);
 	hide_popover(gobj);
@@ -19542,7 +19542,7 @@ function create_gclass$9(gclass_name) {
 		],
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$3,
+			ac_language_changed$5,
 			null
 		]
 	]]], gmt$9, 0, attrs_table$9, PRIVATE_DATA$9, 0, 0, 0, 0);
@@ -25730,7 +25730,7 @@ function refuse_if_readonly$2(gobj, event) {
 *  placeholder, its loading/error notices — drawn once, from its own lang
 *  dict. Re-apply it in the new language.
 ***************************************************************/
-function ac_language_changed$2(gobj, event, kw, src) {
+function ac_language_changed$4(gobj, event, kw, src) {
 	let bar = gobj_read_attr(gobj, "selection_bar");
 	if (bar) bar.refresh();
 	let tabulator = gobj_read_attr(gobj, "tabulator");
@@ -26568,7 +26568,7 @@ function create_gclass$5(gclass_name) {
 	const states = [["ST_IDLE", [
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$2,
+			ac_language_changed$4,
 			null
 		],
 		[
@@ -27415,8 +27415,10 @@ function fold_reveal(model, state, node_key) {
 *
 *      `radial`: the root in the middle and a ring per depth, each
 *      subtree owning a sector proportional to its leaves; the radius
-*      of a ring grows until its neighbours sit side by side, so
-*      nothing overlaps by construction (see `layout_radial`).
+*      of a ring grows until its neighbours sit side by side AND
+*      until it clears the ring inside it, so nothing overlaps by
+*      construction, across the ring or along the radius (see
+*      `layout_radial`).
 *
 *      Pure: takes plain nodes and edges, returns positions. The G6
 *      classes in c_g6_nodes_tree.js are two thin adapters over it.
@@ -27596,6 +27598,10 @@ function tidy_tree_lr(nodes, edges, o) {
 	}
 	return pos;
 }
+function extent_at(n, a) {
+	if (!n) return 0;
+	return Math.abs(n.w * Math.cos(a)) + Math.abs(n.h * Math.sin(a));
+}
 /************************************************************
 *  The radial tree: the root in the middle, a ring per depth.
 *
@@ -27638,14 +27644,15 @@ function layout_radial(nodes, edges, opts) {
 	let ring_of = (id) => t.depth.get(id) + (single ? 0 : 1);
 	let angle = /* @__PURE__ */ new Map();
 	let rings = [];
-	let sector = (root_id, root_from, root_span) => {
+	let sector = (root_id, root_from, root_span, root_parent) => {
 		let stack = [{
 			id: root_id,
 			from: root_from,
-			span: root_span
+			span: root_span,
+			parent: root_parent
 		}];
 		while (stack.length) {
-			let { id, from, span } = stack.pop();
+			let { id, from, span, parent } = stack.pop();
 			let a = from + span / 2;
 			angle.set(id, a);
 			let ring = ring_of(id);
@@ -27654,7 +27661,9 @@ function layout_radial(nodes, edges, opts) {
 			rings[ring].push({
 				id,
 				angle: a,
-				diag: Math.hypot(n.w, n.h)
+				diag: Math.hypot(n.w, n.h),
+				ext: extent_at(n, a),
+				parent_ext: parent ? extent_at(t.by_id.get(parent), a) : 0
 			});
 			let cursor = from;
 			for (let kid of t.children.get(id) || []) {
@@ -27662,7 +27671,8 @@ function layout_radial(nodes, edges, opts) {
 				stack.push({
 					id: kid,
 					from: cursor,
-					span: part
+					span: part,
+					parent: id
 				});
 				cursor += part;
 			}
@@ -27674,20 +27684,21 @@ function layout_radial(nodes, edges, opts) {
 		let cursor = -Math.PI / 2;
 		for (let kid of t.children.get(root) || []) {
 			let part = 2 * Math.PI * leaves.get(kid) / leaves.get(root);
-			sector(kid, cursor, part);
+			sector(kid, cursor, part, root);
 			cursor += part;
 		}
 	} else {
 		let cursor = -Math.PI / 2;
 		for (let root of t.roots) {
 			let part = 2 * Math.PI * leaves.get(root) / total;
-			sector(root, cursor, part);
+			sector(root, cursor, part, null);
 			cursor += part;
 		}
 	}
 	let radius = [0];
 	for (let ring = 1; ring < rings.length; ring++) {
 		let r = radius[ring - 1] + o.ranksep;
+		for (let n of rings[ring] || []) r = Math.max(r, radius[ring - 1] + (n.parent_ext + n.ext) / 2 + o.nodesep);
 		let list = (rings[ring] || []).slice().sort((a, b) => a.angle - b.angle);
 		for (let i = 0; i < list.length && list.length > 1; i++) {
 			let a = list[i];
@@ -54673,11 +54684,14 @@ var PRIVATE_DATA$4 = {
 	_edge_icon_el: null,
 	_edge_delete_el: null,
 	_edge_popover_el: null,
+	_edge_preview_undo: null,
 	_port_icon_el: null,
 	_port_popover_el: null,
+	_port_preview_undo: null,
 	_node_icon_el: null,
 	_node_delete_el: null,
 	_node_popover_el: null,
+	_node_preview_undo: null,
 	_node_detail_el: null,
 	_detail_node_id: null,
 	_delete_confirm_el: null,
@@ -54761,12 +54775,16 @@ function mt_writing$1(gobj, path) {
 *          Framework Method: Start
 ***************************************************************/
 function mt_start$4(gobj) {
+	let shell = yui_shell_of(gobj);
+	if (shell) gobj_subscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
 	return 0;
 }
 /***************************************************************
 *          Framework Method: Stop
 ***************************************************************/
 function mt_stop$4(gobj) {
+	let shell = yui_shell_of(gobj);
+	if (shell) gobj_unsubscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
 	return 0;
 }
 /***************************************************************
@@ -54774,10 +54792,6 @@ function mt_stop$4(gobj) {
 ***************************************************************/
 function mt_destroy$4(gobj) {
 	let priv = gobj.priv;
-	if (priv._on_language_changed) {
-		i18next.off("languageChanged", priv._on_language_changed);
-		priv._on_language_changed = null;
-	}
 	uninstall_fold_listener(gobj);
 	if (priv._on_pointerdown_focus) {
 		priv.$container.removeEventListener("pointerdown", priv._on_pointerdown_focus, true);
@@ -54972,11 +54986,6 @@ function configure_events(gobj) {
 		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);
-		repaint_more_chips(gobj);
-	};
-	i18next.on("languageChanged", priv._on_language_changed);
 	priv._on_pointerdown_focus = (ev) => {
 		let target = ev.target;
 		if (target && typeof target.closest === "function") {
@@ -55494,12 +55503,23 @@ var LR_LAYOUTS = ["dagre"];
 *  toolbar's +/-, and the two-finger pinch of g6_touch_gestures.
 *  `enable` on the scroll keeps the two apart: a Ctrl wheel is
 *  the zoom's, so the scroll stands aside for it.
+*
+*  And the two have to name the SAME key, or the gesture falls
+*  between them: the scroll stood aside for Meta as well, while
+*  the zoom listened for Control alone, so Cmd + wheel neither
+*  scrolled nor zoomed. It is ONE key and not two because a G6
+*  `trigger` is a CHORD, not a list of alternatives -- its
+*  `Shortcut.match()` compares the held keys to the bound ones
+*  as a SET, so ["Control", "Meta"] means both keys down at
+*  once. Control it is, on every platform: it is what a
+*  trackpad pinch arrives as, so a Mac keeps its pinch and
+*  gains nothing to press by mistake.
 ************************************************************/
 function camera_behaviors() {
 	return [{
 		type: "scroll-canvas",
 		key: "scroll-canvas",
-		enable: (event) => !(event && (event.ctrlKey || event.metaKey))
+		enable: (event) => !(event && event.ctrlKey)
 	}, {
 		type: "zoom-canvas",
 		key: "zoom-canvas",
@@ -56967,6 +56987,34 @@ function hide_overlay(gobj, ...keys) {
 /************************************************************
 *  Enable the save button (mark graph as dirty).
 ************************************************************/
+/************************************************************
+*  A popover that PREVIEWS its changes owes an undo.
+*
+*  What the preview writes is not the reader's answer until
+*  `apply` is pressed, and `cancel` used to be the only way
+*  back: every other way out of the popover -- a click on the
+*  canvas, the icon pressed again, the element going away --
+*  left the preview standing on the element, and the next Save
+*  wrote it to `__graphs__`. So the undo is kept beside the
+*  popover and run by whoever hides it; `apply` drops it first,
+*  because then the preview IS the answer.
+************************************************************/
+function set_preview_undo(gobj, key, undo) {
+	gobj.priv[key] = undo;
+}
+function drop_preview_undo(gobj, key) {
+	gobj.priv[key] = null;
+}
+function run_preview_undo(gobj, key) {
+	let undo = gobj.priv[key];
+	gobj.priv[key] = null;
+	if (!undo || gobj_is_destroying(gobj)) return;
+	try {
+		undo();
+	} catch (e) {
+		log_error(`${gobj_short_name(gobj)}: cannot undo the preview: ${e}`);
+	}
+}
 function mark_graph_dirty(gobj) {
 	let $container = gobj_read_attr(gobj, "$container");
 	enableElements($container, ".EV_SAVE_GRAPH");
@@ -57564,6 +57612,26 @@ function port_hit_slop_world(graph) {
 	return slop / zoom;
 }
 /************************************************************
+*  Whether a point landed on a port, by the port's SHAPE.
+*
+*  A port was a circle and the test was a radius; since 7.23.81
+*  it can be a square, a diamond or a triangle too, and a circle
+*  around a diamond answers for the air off its corners while
+*  missing the middle of its edges. `r` is the drawn radius with
+*  the hit slop already added, and the shapes are the ones
+*  TreedbCard.drawPortShapes() draws from it.
+*
+*      dx, dy  the point, relative to the port's centre
+************************************************************/
+function port_shape_hit(shape, dx, dy, r) {
+	switch (shape) {
+		case "square": return Math.abs(dx) <= r && Math.abs(dy) <= r;
+		case "diamond": return Math.abs(dx) + Math.abs(dy) <= r;
+		case "triangle": return dy <= r && 2 * Math.abs(dx) - dy <= r;
+		default: return Math.hypot(dx, dy) <= r;
+	}
+}
+/************************************************************
 *  Detect if a click in canvas coordinates hits a port.
 *  Returns the port key string, or null if no port hit.
 ************************************************************/
@@ -57585,7 +57653,7 @@ function detect_port_click(gobj, node_id, canvasX, canvasY) {
 		let dx = canvasX - px;
 		let dy = canvasY - py;
 		let dist = Math.sqrt(dx * dx + dy * dy);
-		if (dist <= r + slop && dist < best_dist) {
+		if (port_shape_hit(ports[i].shape, dx, dy, r + slop) && dist < best_dist) {
 			best_dist = dist;
 			best_key = ports[i].key;
 		}
@@ -57726,6 +57794,7 @@ function toggle_port_popover(gobj) {
 	else show_port_popover(gobj);
 }
 function hide_port_popover(gobj) {
+	run_preview_undo(gobj, "_port_preview_undo");
 	hide_overlay(gobj, "_port_popover_el");
 }
 function ports_with(ports, port_key, changes) {
@@ -57747,6 +57816,18 @@ function show_port_popover(gobj) {
 	let xy = port_icon_xy(gobj);
 	if (!xy) return;
 	const popover = create_popover_base(xy.x + floating_popover_dx(), xy.y, "g6-port-popover", "#d9d9d9", 180);
+	let undo_port = () => {
+		graph.updateNodeData([{
+			id: node_id,
+			style: { ports: ports_with(nodeData.style.ports, port_key, {
+				shape: orig_shape,
+				r: orig_r
+			}) }
+		}]);
+		graph.draw().then(() => {
+			update_port_resize_handles_position(gobj);
+		});
+	};
 	function preview_port() {
 		let r = parseInt(rInput.value) || orig_r;
 		graph.updateNodeData([{
@@ -57790,27 +57871,19 @@ function show_port_popover(gobj) {
 		text: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
-			graph.updateNodeData([{
-				id: node_id,
-				style: { ports: ports_with(nodeData.style.ports, port_key, {
-					shape: orig_shape,
-					r: orig_r
-				}) }
-			}]);
-			graph.draw().then(() => {
-				update_port_resize_handles_position(gobj);
-			});
 			hide_port_popover(gobj);
 		}
 	}, {
 		text: "apply",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
+			drop_preview_undo(gobj, "_port_preview_undo");
 			apply_port_properties(gobj, node_id, port_key, shapeSelect.value, parseInt(rInput.value) || orig_r, scopeSelect.value);
 		}
 	}]);
 	priv.$container.appendChild(popover);
 	priv._port_popover_el = popover;
+	set_preview_undo(gobj, "_port_preview_undo", undo_port);
 	clamp_popover_position(gobj, popover);
 }
 /************************************************************
@@ -58412,6 +58485,16 @@ function show_edge_popover(gobj) {
 	let mid = get_edge_viewport_midpoint(gobj, edge_id);
 	if (!mid) return;
 	const popover = create_popover_base(mid.x + floating_popover_dx(), mid.y + floating_icon_dy(), "g6-edge-popover", "#d9d9d9", 180);
+	let undo_edge = () => {
+		graph.updateEdgeData([{
+			id: edge_id,
+			style: {
+				lineWidth: origLW,
+				stroke: origStroke
+			}
+		}]);
+		graph.draw();
+	};
 	function preview_edge() {
 		let lw = parseInt(lwInput.value) || 2;
 		let color = colorInput.value;
@@ -58447,25 +58530,19 @@ function show_edge_popover(gobj) {
 		text: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
-			graph.updateEdgeData([{
-				id: edge_id,
-				style: {
-					lineWidth: origLW,
-					stroke: origStroke
-				}
-			}]);
-			graph.draw();
 			deselect_edge(gobj);
 		}
 	}, {
 		text: "apply",
 		style: "flex:1;padding:6px;background:#52c41a;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
+			drop_preview_undo(gobj, "_edge_preview_undo");
 			apply_edge_properties(gobj, edge_id, parseInt(lwInput.value) || 2, colorInput.value, scopeSelect.value);
 		}
 	}]);
 	priv.$container.appendChild(popover);
 	priv._edge_popover_el = popover;
+	set_preview_undo(gobj, "_edge_preview_undo", undo_edge);
 	clamp_popover_position(gobj, popover);
 }
 /************************************************************
@@ -58487,6 +58564,7 @@ function clamp_popover_position(gobj, popover) {
 	popover.style.top = top + "px";
 }
 function hide_edge_popover(gobj) {
+	run_preview_undo(gobj, "_edge_preview_undo");
 	hide_overlay(gobj, "_edge_popover_el");
 }
 /************************************************************
@@ -58562,6 +58640,22 @@ function show_node_popover(gobj) {
 	if (!rect) return;
 	const popover = create_popover_base(rect.right + floating_popover_dx(), rect.top + floating_icon_dy(), "g6-node-popover", "#d9d9d9", 180);
 	let node_graph_type = nodeData.data && nodeData.data.desc ? nodeData.data.desc.node_treedb_type : null;
+	let undo_node = () => {
+		let restoreStyle = {
+			fill: origFill,
+			stroke: origStroke,
+			lineWidth: origLW
+		};
+		if (node_graph_type === "hierarchical") {
+			let record = nodeData.data.record || {};
+			restoreStyle.innerHTML = build_node_innerHTML(origFill, priv.theme, record.icon, node_label(nodeData.data.desc, record), nodeData.data.desc.topic_name, false, record.id, false, false, false, pills_html_of(gobj, nodeData));
+		}
+		graph.updateNodeData([{
+			id: node_id,
+			style: restoreStyle
+		}]);
+		graph.draw();
+	};
 	function preview_node() {
 		let fill = fillInput.value;
 		let updateStyle = {
@@ -58612,34 +58706,23 @@ function show_node_popover(gobj) {
 		text: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
-			let restoreStyle = {
-				fill: origFill,
-				stroke: origStroke,
-				lineWidth: origLW
-			};
-			if (node_graph_type === "hierarchical") {
-				let record = nodeData.data.record || {};
-				restoreStyle.innerHTML = build_node_innerHTML(origFill, priv.theme, record.icon, node_label(nodeData.data.desc, record), nodeData.data.desc.topic_name, false, record.id, false, false, false, pills_html_of(gobj, nodeData));
-			}
-			graph.updateNodeData([{
-				id: node_id,
-				style: restoreStyle
-			}]);
-			graph.draw();
 			hide_node_popover(gobj);
 		}
 	}, {
 		text: "apply",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
+			drop_preview_undo(gobj, "_node_preview_undo");
 			apply_node_properties(gobj, node_id, fillInput.value, strokeInput.value, parseInt(lwInput.value) || 1, scopeSelect.value, shapeSelect.value);
 		}
 	}]);
 	priv.$container.appendChild(popover);
 	priv._node_popover_el = popover;
+	set_preview_undo(gobj, "_node_preview_undo", undo_node);
 	clamp_popover_position(gobj, popover);
 }
 function hide_node_popover(gobj) {
+	run_preview_undo(gobj, "_node_preview_undo");
 	hide_overlay(gobj, "_node_popover_el");
 }
 /************************************************************
@@ -60282,6 +60365,17 @@ async function reconcile_fold_apply(gobj, opts, visible) {
 	return changed;
 }
 /************************************************************
+*  The application changed language: what this gclass DRAWS has
+*  to be drawn again. `refresh_language()` reaches what carries
+*  an i18n key in the DOM; a G6 toolbar and the html of a chip
+*  are built here and carry none.
+************************************************************/
+function ac_language_changed$3(gobj, event, kw, src) {
+	update_toolbar(gobj);
+	repaint_more_chips(gobj);
+	return 0;
+}
+/************************************************************
 *  Repaint the `+N` chips (theme or language changed).
 ************************************************************/
 function repaint_more_chips(gobj) {
@@ -61517,6 +61611,11 @@ function create_gclass$4(gclass_name) {
 			"EV_THEME",
 			ac_theme$1,
 			null
+		],
+		[
+			"EV_LANGUAGE_CHANGED",
+			ac_language_changed$3,
+			null
 		]
 	]]];
 	const event_types = [
@@ -61577,7 +61676,8 @@ function create_gclass$4(gclass_name) {
 		["EV_SHOW", 0],
 		["EV_HIDE", 0],
 		["EV_RESIZE", 0],
-		["EV_THEME", 0]
+		["EV_THEME", 0],
+		["EV_LANGUAGE_CHANGED", 0]
 	];
 	__gclass__$4 = gclass_create(gclass_name, event_types, states, gmt$4, 0, attrs_table$4, PRIVATE_DATA$4, 0, 0, 0, gclass_flag_t.gcflag_manual_start);
 	if (!__gclass__$4) return -1;
@@ -61665,6 +61765,7 @@ var PRIVATE_DATA$3 = {
 	layout: null,
 	_topics_subscribed: {},
 	_legend_state: null,
+	_find_result: null,
 	_links_subscribed: false,
 	is_pinhold_window: false
 };
@@ -61718,6 +61819,8 @@ function mt_writing(gobj, path) {
 ***************************************************************/
 function mt_start$3(gobj) {
 	let priv = gobj.priv;
+	let shell = yui_shell_of(gobj);
+	if (shell) gobj_subscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
 	if (priv.gobj_nodes_tree) gobj_start(priv.gobj_nodes_tree);
 	if (priv.gobj_treedb_tables) gobj_start(priv.gobj_treedb_tables);
 	request_treedb_descs(gobj);
@@ -61728,7 +61831,10 @@ function mt_start$3(gobj) {
 ***************************************************************/
 function mt_stop$3(gobj) {
 	let shell = yui_shell_of(gobj);
-	if (shell) yui_shell_set_sub_routes(shell, gobj_read_str_attr(gobj, "base_route"), null);
+	if (shell) {
+		yui_shell_set_sub_routes(shell, gobj_read_str_attr(gobj, "base_route"), null);
+		gobj_unsubscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+	}
 	close_json_viewer(gobj);
 	gobj_stop_children(gobj);
 }
@@ -61906,68 +62012,64 @@ function option_label(name) {
 *  its context menu (the child's business).
 ************************************************************/
 function node_shape_items(gobj, wide) {
-	let options = NODE_MODES.map((mode) => [
-		"option",
+	return [[
+		"div",
 		{
-			value: mode,
-			"data-i18n": NODE_MODE_LABELS[mode]
+			class: "GRAPH_NODE_MODE buttons has-addons",
+			style: "margin:0 0 0 .5rem; flex:0 0 auto; flex-wrap:nowrap;"
 		},
-		t(NODE_MODE_LABELS[mode])
-	]);
-	return [
-		[
-			"span",
-			{
-				class: "GRAPH_NODE_MODE_LABEL is-hidden-mobile",
-				style: "padding-left:10px; padding-right:5px;",
-				i18n: "nodes"
-			},
-			"nodes"
-		],
-		[
-			"div",
-			{ class: "select" },
-			[[
-				"select",
+		NODE_MODES.map((mode) => {
+			let key = NODE_MODE_LABELS[mode];
+			return [
+				"button",
 				{
-					class: "GRAPH_NODE_MODE_SELECT",
-					title: t("nodes"),
-					"data-i18n-title": "nodes",
-					"aria-label": t("nodes"),
-					"data-i18n-aria-label": "nodes"
-				},
-				options
-			]],
-			{ change: (evt) => {
-				evt.stopPropagation();
-				gobj_send_event(gobj, "EV_SET_NODE_MODE", { node_mode: evt.target.value }, gobj);
-			} }
-		],
-		[
-			"button",
-			{
-				class: "GRAPH_NODE_LABELS button",
-				type: "button",
-				style: {
-					height: wide,
-					width: "2.5em"
+					class: "GRAPH_NODE_MODE_BTN button",
+					type: "button",
+					"data-mode": mode,
+					style: {
+						height: wide,
+						width: "2.5em"
+					},
+					title: t(key),
+					"data-i18n-title": key,
+					"aria-label": t(key),
+					"data-i18n-aria-label": key,
+					"aria-pressed": "false"
 				},
-				title: t("node labels"),
-				"data-i18n-title": "node labels",
-				"aria-label": t("node labels"),
-				"data-i18n-aria-label": "node labels",
-				"aria-pressed": "false"
+				["i", {
+					style: "font-size:1.5em; color:inherit;",
+					class: NODE_MODE_ICONS[mode]
+				}],
+				{ click: (evt) => {
+					evt.stopPropagation();
+					gobj_send_event(gobj, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
+				} }
+			];
+		})
+	], [
+		"button",
+		{
+			class: "GRAPH_NODE_LABELS button",
+			type: "button",
+			style: {
+				height: wide,
+				width: "2.5em"
 			},
-			["i", {
-				style: "font-size:1.5em; color:inherit;",
-				class: "yi-font"
-			}],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				gobj_send_event(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
-			} }
-		]
-	];
+			title: t("node labels"),
+			"data-i18n-title": "node labels",
+			"aria-label": t("node labels"),
+			"data-i18n-aria-label": "node labels",
+			"aria-pressed": "false"
+		},
+		["i", {
+			style: "font-size:1.5em; color:inherit;",
+			class: "yi-font"
+		}],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			gobj_send_event(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
+		} }
+	]];
 }
 var NODE_MODES = [
 	"expanded",
@@ -61979,13 +62081,21 @@ var NODE_MODE_LABELS = {
 	compact: "compact",
 	shape: "shape"
 };
+var NODE_MODE_ICONS = {
+	expanded: "yi-square",
+	compact: "yi-bars",
+	shape: "yi-hexagon-nodes"
+};
 function refresh_node_shape_buttons(gobj, $root) {
 	if (!$root) return;
 	let mode = gobj_read_str_attr(gobj, "node_mode");
 	if (!NODE_MODES.includes(mode)) mode = "expanded";
 	let labels = gobj_read_bool_attr(gobj, "node_labels");
-	let $mode = $root.querySelector(".GRAPH_NODE_MODE_SELECT");
-	if ($mode) $mode.value = mode;
+	for (let $btn of $root.querySelectorAll(".GRAPH_NODE_MODE_BTN")) {
+		let on = $btn.getAttribute("data-mode") === mode;
+		$btn.classList.toggle("pressed_state", on);
+		$btn.setAttribute("aria-pressed", on ? "true" : "false");
+	}
 	set_pressed_state($root, ".GRAPH_NODE_LABELS", labels);
 	let $labels = $root.querySelector(".GRAPH_NODE_LABELS");
 	if ($labels) {
@@ -63126,11 +63236,13 @@ function refresh_legend(gobj) {
 			},
 			hidden ? `${entry.total}` : `${entry.visible}/${entry.total}`
 		]);
+		let body_key = is_main ? "main topic" : hidden ? "show topic" : "hide topic";
 		let body_attrs = {
 			class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " GRAPH_LEGEND_FOCUSED" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
 			type: "button",
 			style: "gap:0; flex:0 0 auto;" + (focused ? " box-shadow: inset 0 0 0 2px var(--bulma-text, #2e333d);" : ""),
-			title: is_main ? t("main topic") : hidden ? t("show topic") : t("hide topic"),
+			title: t(body_key),
+			"data-i18n-title": body_key,
 			"aria-label": topic_name,
 			"aria-pressed": hidden ? "false" : "true"
 		};
@@ -63157,6 +63269,7 @@ function refresh_legend(gobj) {
 				title: t("main topic"),
 				"data-i18n-title": "main topic",
 				"aria-label": t("main topic"),
+				"data-i18n-aria-label": "main topic",
 				"aria-pressed": "true"
 			},
 			[[
@@ -63194,7 +63307,8 @@ function refresh_legend(gobj) {
 				style: "padding:0 .4rem;",
 				title: t("main topic"),
 				"data-i18n-title": "main topic",
-				"aria-label": t("main topic")
+				"aria-label": t("main topic"),
+				"data-i18n-aria-label": "main topic"
 			},
 			[[
 				"span",
@@ -63218,6 +63332,7 @@ function refresh_legend(gobj) {
 				title: t("loose records"),
 				"data-i18n-title": "loose records",
 				"aria-label": t("loose records"),
+				"data-i18n-aria-label": "loose records",
 				"aria-pressed": entry.loose_shown ? "true" : "false"
 			},
 			`+${entry.loose}`,
@@ -63238,6 +63353,7 @@ function refresh_legend(gobj) {
 				title: t("highlight topic"),
 				"data-i18n-title": "highlight topic",
 				"aria-label": t("highlight topic"),
+				"data-i18n-aria-label": "highlight topic",
 				"aria-pressed": focused ? "true" : "false"
 			},
 			[["i", {
@@ -63264,6 +63380,18 @@ function refresh_legend(gobj) {
 	}
 }
 /************************************************************
+*  The application changed language. `refresh_language()` has
+*  already been over the document by now (the shell runs it
+*  before publishing), so what is left is what carries no key:
+*  the legend, whose chips say an ACTION that depends on the
+*  state, and the find box's counted line.
+************************************************************/
+function ac_language_changed$2(gobj, event, kw, src) {
+	refresh_legend(gobj);
+	refresh_find_result(gobj);
+	return 0;
+}
+/************************************************************
 *  The engine said what is drawn: repaint the strip.
 ************************************************************/
 function ac_legend_state(gobj, event, kw, src) {
@@ -63405,6 +63533,12 @@ function ac_toggle_node_labels(gobj, event, kw, src) {
 *  term typed is an ANSWER and is shown; an empty box shows nothing.
 ************************************************************/
 function ac_find_result(gobj, event, kw, src) {
+	gobj.priv._find_result = kw || null;
+	refresh_find_result(gobj);
+	return 0;
+}
+function refresh_find_result(gobj) {
+	let kw = gobj.priv._find_result;
 	let $container = gobj_read_attr(gobj, "$container");
 	if (!$container) return 0;
 	let $result = $container.querySelector(".GRAPH_FIND_RESULT");
@@ -63658,6 +63792,11 @@ function create_gclass$3(gclass_name) {
 			"EV_TRANSPORT_STATE",
 			ac_transport_state$1,
 			null
+		],
+		[
+			"EV_LANGUAGE_CHANGED",
+			ac_language_changed$2,
+			null
 		]
 	]]];
 	const event_types = [
@@ -63699,6 +63838,7 @@ function create_gclass$3(gclass_name) {
 		["EV_RECORD_WRITTEN", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_SHOW", 0],
 		["EV_HIDE", 0],
+		["EV_LANGUAGE_CHANGED", 0],
 		["EV_TRANSPORT_STATE", 0]
 	];
 	__gclass__$3 = gclass_create(gclass_name, event_types, states, gmt$3, 0, attrs_table$3, PRIVATE_DATA$3, 0, 0, 0, 0);