@yuneta/gobj-ui 7.26.27 → 7.26.28

package/dist/gobj-ui.es.js

@@ -5,7 +5,7 @@ import { createJSONEditor } from "vanilla-jsoneditor";
 import { TabulatorFull } from "tabulator-tables";
 import * as maplibregl from "maplibre-gl";
 import uPlot from "uplot";
-import { BaseLayout, BrushSelect, CanvasEvent, Circle, CommonEvent, DragCanvas, EdgeEvent, ExtensionCategory, Graph, HTML, HistoryEvent, NodeEvent, Polyline, Toolbar, ZoomCanvas, register } from "@antv/g6";
+import { BaseLayout, BrushSelect, CanvasEvent, Circle, CommonEvent, DragCanvas, EdgeEvent, ExtensionCategory, Graph, GraphEvent, HTML, HistoryEvent, NodeEvent, Polyline, Toolbar, ZoomCanvas, register } from "@antv/g6";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -1843,7 +1843,7 @@ function build_toolbar$1(gobj, config) {
 	}
 	priv.avatar_nodes = [];
 	priv.conn_nodes = [];
-	let toolbar_aria = tb.aria_label || "Toolbar";
+	const toolbar_aria = tb.aria_label || "toolbar";
 	let $bar = createElement2([
 		"nav",
 		{
@@ -2054,8 +2054,8 @@ function build_toolbar_brand_item(gobj, it) {
 ************************************************************/
 function build_toolbar_avatar_item(gobj, it) {
 	let priv = gobj.priv;
-	let aria_key = it.aria_label || it.name || it.id || "User menu";
-	let i18n_aria = it.aria_label || it.name || "User menu";
+	const aria_key = it.aria_label || it.name || it.id || "user menu";
+	const i18n_aria = it.aria_label || it.name || "user menu";
 	let action_type = it.action && it.action.type || "";
 	let attrs = {
 		class: "navbar-item yui-toolbar-item yui-toolbar-avatar is-unselectable",
@@ -2131,8 +2131,8 @@ function attach_context_action(gobj, $item, it) {
 ************************************************************/
 function build_toolbar_connection_item(gobj, it) {
 	let priv = gobj.priv;
-	let aria_key = it.aria_label || it.name || it.id || "backend connection";
-	let i18n_aria = it.aria_label || it.name || "backend connection";
+	const aria_key = it.aria_label || it.name || it.id || "backend connection";
+	const i18n_aria = it.aria_label || it.name || "backend connection";
 	let attrs = {
 		class: "navbar-item yui-toolbar-item yui-toolbar-conn is-unselectable is-disconnected",
 		type: "button",
@@ -2238,8 +2238,8 @@ function toggle_toolbar_dropdown(gobj, item, action, $trigger) {
 function open_toolbar_dropdown(gobj, item, action, $trigger) {
 	let priv = gobj.priv;
 	if (!priv || !priv.layers || !priv.layers.popup) return;
-	let aria_key = item && (item.aria_label || item.name || item.id) || "Menu";
-	let i18n_aria = item && (item.aria_label || item.name) || "Menu";
+	const aria_key = item && (item.aria_label || item.name || item.id) || "menu";
+	const i18n_aria = item && (item.aria_label || item.name) || "menu";
 	let $panel = createElement2(["div", {
 		class: "yui-toolbar-dropdown-panel",
 		role: "menu",
@@ -3776,19 +3776,22 @@ function build_dialog(shell, message, buttons, opts) {
 *  "Delete" and "Cancel", keys that no locale carries, so a dialog
 *  that took the defaults read in English in every language.
 *
-*  Written as `i18n:` entries so the validate-locales script of a
-*  consumer finds them when it scans this module: an app that
-*  mounts these dialogs must define the five keys.
+*  An app that mounts these dialogs must define the five keys. A
+*  consumer's validate-locales reads them where build_dialog() gets
+*  them (a const, `DEFAULT_LABEL.ok`, it follows), and in
+*  SHELL_MODALS_I18N_KEYS, which a test holds to this table. (Up to
+*  7.26.27 they were written as `i18n:` entries, which only a regex
+*  scan of `i18n: "..."` happened to see.)
 ***************************************************************/
 var DEFAULT_LABEL = Object.freeze({
-	ok: Object.freeze({ i18n: "ok" }),
-	yes: Object.freeze({ i18n: "yes" }),
-	no: Object.freeze({ i18n: "no" }),
-	delete: Object.freeze({ i18n: "delete" }),
-	cancel: Object.freeze({ i18n: "cancel" })
+	ok: "ok",
+	yes: "yes",
+	no: "no",
+	delete: "delete",
+	cancel: "cancel"
 });
 function yui_shell_confirm_ok(shell, message, opts) {
-	let label = opts && opts.ok_label || DEFAULT_LABEL.ok.i18n;
+	const label = opts && opts.ok_label || DEFAULT_LABEL.ok;
 	if (!opts || !opts.type) opts = Object.assign({}, opts, { type: "success" });
 	return build_dialog(shell, message, [{
 		label,
@@ -3797,8 +3800,8 @@ function yui_shell_confirm_ok(shell, message, opts) {
 	}], opts).then(() => void 0);
 }
 function yui_shell_confirm_yesno(shell, message, opts) {
-	let yes_label = opts && opts.yes_label || DEFAULT_LABEL.yes.i18n;
-	let no_label = opts && opts.no_label || DEFAULT_LABEL.no.i18n;
+	const yes_label = opts && opts.yes_label || DEFAULT_LABEL.yes;
+	const no_label = opts && opts.no_label || DEFAULT_LABEL.no;
 	return build_dialog(shell, message, [{
 		label: yes_label,
 		value: "yes",
@@ -3823,8 +3826,8 @@ function yui_shell_confirm_yesno(shell, message, opts) {
 *  pressed.
 ***************************************************************/
 function yui_shell_confirm_danger(shell, message, opts) {
-	let confirm_label = opts && opts.confirm_label || DEFAULT_LABEL.delete.i18n;
-	let cancel_label = opts && opts.cancel_label || DEFAULT_LABEL.cancel.i18n;
+	const confirm_label = opts && opts.confirm_label || DEFAULT_LABEL.delete;
+	const cancel_label = opts && opts.cancel_label || DEFAULT_LABEL.cancel;
 	if (!opts || !opts.type) opts = Object.assign({}, opts, { type: "danger" });
 	return build_dialog(shell, message, [{
 		label: confirm_label,
@@ -3836,9 +3839,9 @@ function yui_shell_confirm_danger(shell, message, opts) {
 	}], opts).then((v) => v === "confirm");
 }
 function yui_shell_confirm_yesnocancel(shell, message, opts) {
-	let yes_label = opts && opts.yes_label || DEFAULT_LABEL.yes.i18n;
-	let no_label = opts && opts.no_label || DEFAULT_LABEL.no.i18n;
-	let cancel_label = opts && opts.cancel_label || DEFAULT_LABEL.cancel.i18n;
+	const yes_label = opts && opts.yes_label || DEFAULT_LABEL.yes;
+	const no_label = opts && opts.no_label || DEFAULT_LABEL.no;
+	const cancel_label = opts && opts.cancel_label || DEFAULT_LABEL.cancel;
 	return build_dialog(shell, message, [
 		{
 			label: yes_label,
@@ -4492,7 +4495,7 @@ function set_max_icon(gobj, maximized) {
 	if (!$container) return;
 	let $btn = $container.querySelector(".wc-max");
 	if ($btn) {
-		let key = maximized ? "restore" : "maximize";
+		const key = maximized ? "restore" : "maximize";
 		$btn.innerHTML = maximized ? WC_RESTORE : WC_MAX;
 		$btn.setAttribute("title", t(key));
 		$btn.setAttribute("data-i18n-title", key);
@@ -5594,7 +5597,7 @@ function render_header(gobj) {
 	let $discard = $container.querySelector(".yui-pager-discard");
 	$back.classList.toggle("is-hidden", !model.show_back);
 	let $back_icon = $back.querySelector("i");
-	let back_key = model.back_kind === "close" ? "close" : "back";
+	const back_key = model.back_kind === "close" ? "close" : "back";
 	$back_icon.className = back_key === "close" ? "yi-xmark" : "yi-arrow-left";
 	$back.setAttribute("title", t(back_key));
 	$back.setAttribute("data-i18n-title", back_key);
@@ -12749,7 +12752,7 @@ function set_pressed_state($container, selector, set) {
 *
 *          Utilities for graph, using Bulma
 *
-*          Copyright (c) 2025, ArtGins.
+*          Copyright (c) 2025-2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
 /************************************************************
@@ -12778,15 +12781,46 @@ function removeChildElements($element) {
 }
 /************************************************************
 *  Disable/Enable elements
-************************************************************/
+*
+*  A disabled control says so to the keyboard and to a screen
+*  reader too, not only to the pointer:
+*    - `disabled`, what the stylesheets and the click guards
+*      read (on a `div` drawn as a button it means nothing to
+*      the browser itself);
+*    - `aria-disabled="true"`, what a reader announces -- without
+*      it a disabled toolbar item was heard as a button that
+*      works;
+*    - `tabindex="-1"`, so Tab does not stop on a control that
+*      does nothing.
+*
+*  Enabled again, it gets back the tabindex it had, kept in
+*  `data-enabled-tabindex` while it is disabled (empty: it had
+*  none, and it gets none). Whoever BUILDS a control disabled
+*  writes that attribute itself, with the tabindex the control
+*  takes once enabled (see toolbar_item_html in
+*  c_g6_nodes_tree.js). An element that keeps the focus while it
+*  is disabled keeps it: tabindex -1 still takes a focus, it is
+*  only left out of the Tab order.
+************************************************************/
+var ENABLED_TABINDEX = "data-enabled-tabindex";
 function disableElements($container, selector) {
 	$container.querySelectorAll(selector).forEach((el) => {
 		el.setAttribute("disabled", "");
+		el.setAttribute("aria-disabled", "true");
+		if (!el.hasAttribute(ENABLED_TABINDEX)) el.setAttribute(ENABLED_TABINDEX, el.getAttribute("tabindex") ?? "");
+		el.setAttribute("tabindex", "-1");
 	});
 }
 function enableElements($container, selector) {
 	$container.querySelectorAll(selector).forEach((el) => {
 		if (el.hasAttribute("disabled")) el.removeAttribute("disabled");
+		el.removeAttribute("aria-disabled");
+		if (el.hasAttribute(ENABLED_TABINDEX)) {
+			let tabindex = el.getAttribute(ENABLED_TABINDEX);
+			el.removeAttribute(ENABLED_TABINDEX);
+			if (tabindex === "") el.removeAttribute("tabindex");
+			else el.setAttribute("tabindex", tabindex);
+		}
 	});
 }
 /************************************************************
@@ -13169,7 +13203,7 @@ function yui_graph_update_anchor($container, state) {
 	set_pressed_state($container, ".EV_TOGGLE_ANCHOR", state === "on");
 	$btn.classList.toggle("color_pending_state", state === "arming");
 	$btn.setAttribute("aria-pressed", state === "on" ? "true" : "false");
-	let key = state === "arming" ? "click the element to centre on" : state === "on" ? "centred: click to release" : "anchor view";
+	const key = state === "arming" ? "click the element to centre on" : state === "on" ? "centred: click to release" : "anchor view";
 	$btn.setAttribute("title", t(key));
 	$btn.setAttribute("data-i18n-title", key);
 	$btn.setAttribute("aria-label", t(key));
@@ -13783,6 +13817,73 @@ function g6_event_kw(evt) {
 	};
 }
 //#endregion
+//#region src/g6_canvas_tab_order.js
+/***********************************************************************
+*          g6_canvas_tab_order.js
+*
+*          The canvases of a G6 graph in the page's Tab order: the main
+*          one in its place, the other layers out of it.
+*
+*          G6 stacks four canvases (background, main, label, transient)
+*          and gives each of them `tabIndex = 1` (configCanvasDom, when it
+*          builds the Canvas and again on a renderer change). A POSITIVE
+*          tabindex goes before every control of the page: Tab from a
+*          graph went to its other canvases, then to the top of the page
+*          and through every control there, and only then to the graph's
+*          own buttons. The main canvas -- the one G6 listens on, and the
+*          one a view puts the keyboard on -- takes 0, so Tab goes from it
+*          to the graph's toolbars and buttons in DOM order; the other
+*          layers receive nothing (`pointer-events: none`) and take -1.
+*
+*          Every view that creates a G6 Graph calls
+*          keep_canvas_tab_order() right after `new Graph()`: the order is
+*          put right each time G6 writes the 1 -- once the canvas is built
+*          (on the first render(), whichever function of the view calls
+*          it), and after a renderer change. One place, so a view with
+*          several render() calls cannot miss the one that builds the
+*          canvas.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/************************************************************
+*  Main canvas 0, every other layer -1. Returns 0, or -1 with
+*  the cause logged.
+************************************************************/
+function set_canvas_tab_order(gobj, graph) {
+	let canvas = graph ? graph.getCanvas() : null;
+	if (!canvas || typeof canvas.getLayers !== "function") {
+		log_error(`${gobj_short_name(gobj)}: no canvas to set the Tab order of`);
+		return -1;
+	}
+	let ret = 0;
+	let layers = canvas.getLayers() || {};
+	for (let name of Object.keys(layers)) {
+		let $el = null;
+		try {
+			$el = layers[name].getContextService().getDomElement();
+		} catch (e) {
+			$el = null;
+		}
+		if (!$el) {
+			log_error(`${gobj_short_name(gobj)}: canvas layer '${name}' has no element`);
+			ret = -1;
+			continue;
+		}
+		$el.tabIndex = name === "main" ? 0 : -1;
+	}
+	return ret;
+}
+/************************************************************
+*  Keep the order for the life of `graph`: on every moment G6
+*  writes its own.
+************************************************************/
+function keep_canvas_tab_order(gobj, graph) {
+	for (let ev of [GraphEvent.AFTER_CANVAS_INIT, GraphEvent.AFTER_RENDERER_CHANGE]) graph.on(ev, () => {
+		set_canvas_tab_order(gobj, graph);
+	});
+}
+//#endregion
 //#region src/c_yui_json_graph.js
 /***********************************************************************
 *          c_yui_json_graph.js
@@ -14286,6 +14387,7 @@ function build_graph$4(gobj) {
 		behaviors: BEHAVIORS_READING$1.slice()
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
+	keep_canvas_tab_order(gobj, graph);
 	graph.on(NodeEvent.CLICK, (evt) => {
 		gobj_send_event(gobj, "EV_NODE_CLICK", g6_event_kw(evt), gobj);
 	});
@@ -18203,6 +18305,7 @@ function build_graph$3(gobj) {
 	} catch (e) {
 		log_error(`${gobj_short_name(gobj)}: the theme was refused: ${e}`);
 	}
+	keep_canvas_tab_order(gobj, priv.graph);
 	priv.graph.on("aftertransform", () => {
 		yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
 	});
@@ -21706,6 +21809,7 @@ function build_graph$2(gobj) {
 		behaviors: BEHAVIORS_READING.slice()
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
+	keep_canvas_tab_order(gobj, graph);
 	graph.on("aftertransform", () => {
 		yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
 		let z = priv.last_zoom;
@@ -23522,7 +23626,7 @@ function build_ui$7(gobj) {
 	if (layout !== "drawer") {
 		$container.setAttribute("role", "navigation");
 		if (!$container.hasAttribute("aria-label")) {
-			let label = gobj_read_attr(gobj, "nav_label") || "navigation";
+			const label = gobj_read_attr(gobj, "nav_label") || "navigation";
 			$container.setAttribute("aria-label", t(label));
 			$container.setAttribute("data-i18n-aria-label", label);
 		}
@@ -23783,14 +23887,17 @@ function render_backbar(gobj) {
 	let label = gobj_read_attr(gobj, "nav_label") || "";
 	let label_attrs = { class: "yui-nav-label" };
 	if (label) label_attrs.i18n = label;
+	const name_key = label || "back";
 	let a_attrs = {
 		class: "yui-nav-item yui-nav-back",
 		href: back_route ? "#" + back_route : "#",
 		"data-item-id": "__index__",
 		"data-route": back_route,
-		"aria-label": label || "back"
+		title: t(name_key),
+		"data-i18n-title": name_key,
+		"aria-label": t(name_key),
+		"data-i18n-aria-label": name_key
 	};
-	if (label) a_attrs["data-i18n-aria-label"] = label;
 	return createElement2([
 		"div",
 		{},
@@ -23817,7 +23924,7 @@ function render_drawer(gobj, items) {
 	wrap.className = "yui-drawer";
 	wrap.setAttribute("role", "dialog");
 	wrap.setAttribute("aria-modal", "true");
-	let nav_label = gobj_read_attr(gobj, "nav_label") || "navigation";
+	const nav_label = gobj_read_attr(gobj, "nav_label") || "navigation";
 	wrap.setAttribute("aria-label", t(nav_label));
 	wrap.setAttribute("data-i18n-aria-label", nav_label);
 	let back = document.createElement("div");
@@ -25612,7 +25719,7 @@ function show_load_error$1(gobj, message) {
 		$container.insertBefore($err, $container.firstChild);
 	}
 	let treedb = gobj_read_attr(gobj, "treedb_name") || "";
-	$err.textContent = (treedb ? `${treedb}: ` : "") + (message || "cannot load treedb");
+	$err.textContent = (treedb ? `${treedb}: ` : "") + (message || t("cannot load treedb"));
 }
 /************************************************************
 *   Destroy UI
@@ -27990,7 +28097,6 @@ function yui_selection_bar(t, opts) {
 			if (typeof o.on_clear === "function") o.on_clear(e);
 		} }
 	]);
-	$clear._yui_label = "clear selection";
 	let $el = createElement2([
 		"div",
 		{
@@ -28006,7 +28112,7 @@ function yui_selection_bar(t, opts) {
 		$count.textContent = t("{{n}} selected", { n: count });
 		for (let $b of $buttons.concat([$clear])) {
 			let $label = label_of($b);
-			let key = $b._yui_label;
+			const key = $b === $clear ? "clear selection" : $b._yui_label;
 			if ($label && key) $label.textContent = t(key);
 			$b.title = key ? t(key) : "";
 			$b.setAttribute("aria-label", $b.title);
@@ -30088,7 +30194,7 @@ function open_form_dialog(gobj, mode, record) {
 		return;
 	}
 	let pkey = desc.pkey || "id";
-	let title = mode === "create" ? "new" : mode === "view" ? "view" : "edit";
+	const title = mode === "create" ? "new" : mode === "view" ? "view" : "edit";
 	let title_prefix = "";
 	if (mode !== "create") {
 		let rid = record ? String(record[pkey] ?? "") : "";
@@ -60769,17 +60875,41 @@ function css_color_or_null(value) {
 *  The markup of one toolbar item. Everything that goes into it is
 *  escaped, the read-out branch too: its text, title and value are
 *  values (a zoom figure, a translated title), never markup.
+*
+*  An item is a BUTTON for the keyboard too: `role="button"` and
+*  `tabindex="0"`, and YuiToolbar presses it on Enter or Space.
+*  `title_key` is the i18n key of `title`: written as
+*  `data-i18n-title` / `data-i18n-aria-label`, so the name carries
+*  its key like every other control's.
+*
+*  A `disabled` item is born the way disableElements() (lib_graph.js)
+*  leaves one: `aria-disabled`, out of the Tab order, and the
+*  tabindex it takes once enabled kept in `data-enabled-tabindex`,
+*  where enableElements() finds it. A toggle (`pressed` given, true
+*  or false) says its state in `aria-pressed`, as its look says it
+*  with `pressed_state`. `data-control` names the CONTROL the item
+*  is, whatever state it shows: `control` when the item gives one
+*  (full screen is `request-fullscreen` or `exit-fullscreen`, and
+*  one control), its `value` otherwise -- it is what a rebuild puts
+*  the focus back on.
 ***************************************************************/
 function toolbar_item_html(item) {
 	if (item.separator) return `<div class="g6-toolbar-sep" aria-hidden="true"></div>`;
 	const extra_class = item.className ? ` ${escapeHtml(String(item.className))}` : "";
 	const title = escapeHtml(String(item.title ?? ""));
-	if (item.readout) return `<div class="g6-toolbar-readout${extra_class}" title="${title}" aria-label="${title}">${escapeHtml(String(item.text ?? ""))}</div>`;
-	const disabled = item.disabled ? " disabled" : "";
+	let i18n_attrs = "";
+	if (item.title_key) {
+		const key = escapeHtml(String(item.title_key));
+		i18n_attrs = ` data-i18n-title="${key}" data-i18n-aria-label="${key}"`;
+	}
+	if (item.readout) return `<div class="g6-toolbar-readout${extra_class}" title="${title}" aria-label="${title}"${i18n_attrs}>${escapeHtml(String(item.text ?? ""))}</div>`;
+	const state = item.disabled ? " tabindex=\"-1\" aria-disabled=\"true\" data-enabled-tabindex=\"0\" disabled" : " tabindex=\"0\"";
+	const pressed = item.pressed === void 0 ? "" : ` aria-pressed="${item.pressed ? "true" : "false"}"`;
+	const control = escapeHtml(String(item.control ?? item.value));
 	const is_text = item.text !== void 0;
 	const kind_class = is_text ? " g6-toolbar-item-text" : "";
 	const body = is_text ? `<span class="g6-toolbar-text">${escapeHtml(String(item.text))}</span>` : `<svg aria-hidden="true" focusable="false"><use xlink:href="#${escapeHtml(String(item.id))}"></use></svg>`;
-	return `<div class="g6-toolbar-item${kind_class}${extra_class}" value="${escapeHtml(String(item.value))}" title="${title}" aria-label="${title}"${disabled}>${body}</div>`;
+	return `<div class="g6-toolbar-item${kind_class}${extra_class}" role="button"${state}${pressed} value="${escapeHtml(String(item.value))}" data-control="${control}" title="${title}" aria-label="${title}"${i18n_attrs}>${body}</div>`;
 }
 /***************************************************************
 *  YuiToolbar — G6 Toolbar subclass that adds per-item className
@@ -60794,6 +60924,11 @@ function toolbar_item_html(item) {
 *    readout    — a text item that REPORTS instead of acting (the
 *                 zoom level); it is not a button
 *    separator  — a group divider, not an item
+*    title_key  — the i18n key of `title` (see toolbar_item_html)
+*    pressed    — boolean; the item is a TOGGLE, and this is its
+*                 state (`aria-pressed`)
+*    control    — the identity of the control when its `value`
+*                 changes with its state (full screen enter/exit)
 *
 *  The base class fires onClick only for elements whose class list
 *  contains `g6-toolbar-item`, so a separator and a readout carry
@@ -60804,12 +60939,117 @@ function toolbar_item_html(item) {
 *  functions (set_submit_state, disableElements, …) work on toolbar
 *  icons exactly like on regular Bulma/FA buttons — no special
 *  icon-specific helpers needed.
+*
+*  The items are buttons for the KEYBOARD as well:
+*    - Enter or Space CLICKS the focused item, and the click bubbles
+*      to the base class's own handler, so the key reaches the same
+*      onClick a pointer does. A `disabled` item takes the key and
+*      does nothing, as its `pointer-events: none` does for a press.
+*    - A POINTER press does not move the focus to an item (it stays
+*      on the canvas, where the graph's keys are heard), the way the
+*      floating buttons keep it (see keep_focus_on_press).
+*    - A disabled item is out of the Tab order and says it is
+*      disabled (`aria-disabled`), from its first render
+*      (toolbar_item_html) and on every change (disableElements /
+*      enableElements in lib_graph.js).
+*    - A rebuild (update) replaces the innerHTML, the focused item
+*      with it: the focus goes back to the item of the same CONTROL
+*      (`data-control`: Enter on "enter full screen" lands on "exit
+*      full screen"), or to the canvas when there is none. And a
+*      toolbar that goes away (destroy) hands it to the canvas
+*      first. A removed element that held the focus leaves it on
+*      <body> in Firefox, which fires no focusout for it, and the
+*      graph goes deaf.
 ***************************************************************/
 var YuiToolbar = class extends Toolbar {
+	constructor(context, options) {
+		super(context, options);
+		this.$element.addEventListener("pointerdown", keep_focus_on_toolbar_press);
+		this.$element.addEventListener("keydown", press_toolbar_item_on_key);
+	}
+	async update(options) {
+		const control = focused_toolbar_item_control(this.$element);
+		await super.update(options);
+		if (control !== null) refocus_toolbar_item(this.$element, control);
+	}
+	destroy() {
+		if (!this.destroyed && this.$element) {
+			this.$element.removeEventListener("pointerdown", keep_focus_on_toolbar_press);
+			this.$element.removeEventListener("keydown", press_toolbar_item_on_key);
+			if (this.$element.contains(document.activeElement)) focus_main_canvas(this.$element.parentNode);
+		}
+		super.destroy();
+	}
 	async getDOMContent() {
 		return (await this.options.getItems()).map(toolbar_item_html).join("");
 	}
 };
+/***************************************************************
+*  A POINTER press on a button of this view does not take the
+*  focus. The container's capture listener has just put it on the
+*  canvas, where the graph's keys are heard; a press that moved it
+*  on to the button would leave it on something this view removes
+*  -- Escape deselects and takes the floating buttons away, the ✕
+*  closes its popover, a rebuild replaces the toolbar -- and
+*  Firefox fires no focusout for a removed element: the focus falls
+*  to <body> and the graph hears nothing until it is clicked again.
+*  Cancelling the pointerdown cancels the mousedown that moves the
+*  focus; the click still comes, and Tab still reaches the button.
+***************************************************************/
+function keep_focus_on_press(el) {
+	el.addEventListener("pointerdown", (e) => {
+		e.preventDefault();
+	});
+}
+function keep_focus_on_toolbar_press(e) {
+	let target = e.target;
+	if (target && typeof target.closest === "function" && target.closest(".g6-toolbar-item")) e.preventDefault();
+}
+/***************************************************************
+*  The keyboard to the graph: the focus on its main canvas.
+***************************************************************/
+function focus_main_canvas($container) {
+	if (!$container) return;
+	let $canvas = main_canvas_of($container);
+	if ($canvas && $canvas.isConnected && typeof $canvas.focus === "function") $canvas.focus({ preventScroll: true });
+}
+/***************************************************************
+*  Enter or Space on a toolbar item clicks it; the click bubbles
+*  to G6's toolbar handler, which reads the item's `value`.
+***************************************************************/
+function press_toolbar_item_on_key(e) {
+	if (e.key !== "Enter" && e.key !== " ") return;
+	let target = e.target;
+	let item = target && typeof target.closest === "function" ? target.closest(".g6-toolbar-item") : null;
+	if (!item) return;
+	e.preventDefault();
+	e.stopPropagation();
+	if (item.hasAttribute("disabled")) return;
+	item.click();
+}
+/***************************************************************
+*  The control (`data-control`) of the toolbar item that has the
+*  focus, or null.
+***************************************************************/
+function focused_toolbar_item_control($toolbar) {
+	let active = document.activeElement;
+	if (!$toolbar || !active || active === $toolbar || !$toolbar.contains(active)) return null;
+	if (!active.classList || !active.classList.contains("g6-toolbar-item")) return null;
+	return active.getAttribute("data-control");
+}
+/***************************************************************
+*  After a rebuild: the focus on the item of that control, in
+*  whatever state the rebuild shows it, or on the canvas when the
+*  rebuild has none (a fold took it away).
+***************************************************************/
+function refocus_toolbar_item($toolbar, control) {
+	let items = $toolbar.querySelectorAll(".g6-toolbar-item");
+	for (let i = 0; i < items.length; i++) if (items[i].getAttribute("data-control") === control) {
+		items[i].focus({ preventScroll: true });
+		return;
+	}
+	focus_main_canvas($toolbar.parentNode);
+}
 register(ExtensionCategory.PLUGIN, "yui-toolbar", YuiToolbar);
 ensure_drag_canvas_patch();
 ensure_brush_select_owned();
@@ -60974,6 +61214,7 @@ var PRIVATE_DATA$4 = {
 	_saved_graph_properties: {},
 	_graphs_writes_owed: {},
 	_graphs_load: 0,
+	_save_lit: false,
 	yet_showed: false,
 	edit_mode: false,
 	operation_mode: null,
@@ -61007,6 +61248,7 @@ var PRIVATE_DATA$4 = {
 	_detail_node_id: null,
 	_delete_confirm_el: null,
 	_unlink_confirm_el: null,
+	_confirm_questions: {},
 	_create_popover_el: null,
 	_context_node_id: null,
 	_context_port_key: null,
@@ -61015,6 +61257,7 @@ var PRIVATE_DATA$4 = {
 	_link_source: null,
 	_link_icon_el: null,
 	_link_drag_svg: null,
+	_link_drag: null,
 	_link_valid_hooks: [],
 	_link_saved_styles: [],
 	_focus_topic: null,
@@ -61258,6 +61501,7 @@ function build_graph$1(gobj) {
 		plugins: []
 	});
 	graph.setTheme(priv.theme);
+	keep_canvas_tab_order(gobj, graph);
 	priv._unforward_wheel = yui_graph_forward_wheel(graph, priv.$container, { selector: ".TREEDB_CARD, .TREEDB_PILLS" });
 	graph.setLayout(layout);
 	priv.graph_rendered = false;
@@ -61415,8 +61659,6 @@ function update_toolbar(gobj) {
 	if (graph_get_plugin(gobj, "toolbar")) graph.updatePlugin({ key: "toolbar" });
 	configure_toolbar_edit(gobj);
 	if (graph_get_plugin(gobj, "toolbar-edit")) graph.updatePlugin({ key: "toolbar-edit" });
-	update_zoom_selection_button(gobj);
-	update_selection_mode_button(gobj);
 }
 /************************************************************
 *  The floating toolbars follow the theme.
@@ -61467,13 +61709,15 @@ function toolbar_fold_item(gobj) {
 		id: "g6-icon-toolbar-show",
 		value: "toolbar-toggle",
 		className: "EV_TOGGLE_TOOLBARS",
-		title: t("show toolbar")
+		title: t("show toolbar"),
+		title_key: "show toolbar"
 	};
 	return {
 		id: "g6-icon-toolbar-hide",
 		value: "toolbar-toggle",
 		className: "EV_TOGGLE_TOOLBARS",
-		title: t("hide toolbar")
+		title: t("hide toolbar"),
+		title_key: "hide toolbar"
 	};
 }
 function toolbar_style(extra) {
@@ -61539,38 +61783,44 @@ function configure_toolbar(gobj) {
 					id: "g6-icon-zoom-in",
 					value: "zoom-in",
 					className: "EV_ZOOM_IN",
-					title: t("zoom in")
+					title: t("zoom in"),
+					title_key: "zoom in"
 				},
 				{
 					id: "g6-icon-zoom-out",
 					value: "zoom-out",
 					className: "EV_ZOOM_OUT",
-					title: t("zoom out")
+					title: t("zoom out"),
+					title_key: "zoom out"
 				},
 				{
 					readout: true,
 					className: "G6_ZOOM_LEVEL",
 					text: zoom_percent_text(gobj),
-					title: t("zoom level")
+					title: t("zoom level"),
+					title_key: "zoom level"
 				},
 				{ separator: true },
 				{
 					id: "g6-icon-fit",
 					value: "auto-fit",
 					className: "EV_AUTO_FIT",
-					title: t("auto fit")
+					title: t("auto fit"),
+					title_key: "auto fit"
 				},
 				{
 					text: "1:1",
 					value: "reset",
 					className: "EV_ZOOM_RESET",
-					title: t("actual size")
+					title: t("actual size"),
+					title_key: "actual size"
 				},
 				{
 					id: "g6-icon-anchor",
 					value: "anchor",
 					className: "EV_TOGGLE_ANCHOR" + (priv.anchor_state === "on" ? " pressed_state" : "") + (priv.anchor_state === "arming" ? " color_pending_state" : ""),
-					title: anchor_title(priv.anchor_state)
+					pressed: priv.anchor_state === "on",
+					...anchor_title(priv.anchor_state)
 				}
 			];
 			if (priv.edit_mode) items.push({
@@ -61578,21 +61828,26 @@ function configure_toolbar(gobj) {
 				value: "fit-selection",
 				className: "EV_ZOOM_SELECTION",
 				title: t("zoom to selection"),
-				disabled: true
+				title_key: "zoom to selection",
+				disabled: !selection_is_painted(gobj)
 			});
 			if (gobj_read_bool_attr(gobj, "with_fullscreen")) {
 				items.push({ separator: true });
 				if (priv.is_fullscreen) items.push({
 					id: "g6-icon-fullscreen-exit",
 					value: "exit-fullscreen",
+					control: "fullscreen",
 					className: "EV_EXIT_FULLSCREEN",
-					title: t("exit full screen")
+					title: t("exit full screen"),
+					title_key: "exit full screen"
 				});
 				else items.push({
 					id: "g6-icon-fullscreen",
 					value: "request-fullscreen",
+					control: "fullscreen",
 					className: "EV_REQUEST_FULLSCREEN",
-					title: t("enter full screen")
+					title: t("enter full screen"),
+					title_key: "enter full screen"
 				});
 			}
 			if (toolbars_can_collapse(gobj)) {
@@ -61653,46 +61908,53 @@ function configure_toolbar_edit(gobj) {
 		position: "left-top",
 		style: toolbar_style(),
 		getItems: () => {
+			let lit = edit_buttons_lit(gobj);
 			return [
 				{
 					id: "g6-icon-plus",
 					value: "create-node",
 					className: "EV_CREATE_NODE_BTN color_create_state",
-					title: t("create node")
+					title: t("create node"),
+					title_key: "create node"
 				},
 				{
 					id: "g6-icon-select-mode",
 					value: "selection-mode",
 					className: "EV_TOGGLE_SELECTION_MODE" + (priv.selection_mode ? " pressed_state" : ""),
-					title: t("selection mode")
+					pressed: !!priv.selection_mode,
+					title: t("selection mode"),
+					title_key: "selection mode"
 				},
 				{
 					id: "g6-icon-save",
 					value: "save",
-					className: "EV_SAVE_GRAPH",
+					className: "EV_SAVE_GRAPH" + (lit.save ? " color_submit_state" : ""),
 					title: t("save"),
-					disabled: true
+					title_key: "save",
+					disabled: !lit.save
 				},
 				{
 					id: "g6-icon-undo",
 					value: "undo",
-					className: "EV_HISTORY_UNDO",
+					className: "EV_HISTORY_UNDO" + (lit.undo ? " color_active_state" : ""),
 					title: t("undo"),
-					disabled: true
+					title_key: "undo",
+					disabled: !lit.undo
 				},
 				{
 					id: "g6-icon-redo",
 					value: "redo",
-					className: "EV_HISTORY_REDO",
+					className: "EV_HISTORY_REDO" + (lit.redo ? " color_active_state" : ""),
 					title: t("redo"),
-					disabled: true
+					title_key: "redo",
+					disabled: !lit.redo
 				}
 			];
 		},
 		onClick: (value) => {
 			switch (value) {
 				case "create-node":
-					toggle_create_popover(gobj);
+					gobj_send_event(gobj, "EV_TOGGLE_CREATE_POPOVER", {}, gobj);
 					break;
 				case "selection-mode":
 					gobj_send_event(gobj, "EV_TOGGLE_SELECTION_MODE", {}, gobj);
@@ -62753,28 +63015,50 @@ function update_history_buttons(gobj) {
 			if (history.canUndo()) {
 				enableElements($container, ".EV_HISTORY_UNDO");
 				set_active_state($container, ".EV_HISTORY_UNDO", true);
-				enableElements($container, ".EV_SAVE_GRAPH");
-				set_submit_state($container, ".EV_SAVE_GRAPH", true);
+				light_save_button(gobj, true);
 			} else {
 				disableElements($container, ".EV_HISTORY_UNDO");
 				set_active_state($container, ".EV_HISTORY_UNDO", false);
-				if (graphs_write_is_owed(gobj)) {
-					enableElements($container, ".EV_SAVE_GRAPH");
-					set_submit_state($container, ".EV_SAVE_GRAPH", true);
-				} else {
-					disableElements($container, ".EV_SAVE_GRAPH");
-					set_submit_state($container, ".EV_SAVE_GRAPH", false);
-				}
+				light_save_button(gobj, graphs_write_is_owed(gobj));
 			}
 		} else {
 			disableElements($container, ".EV_HISTORY_REDO");
 			set_active_state($container, ".EV_HISTORY_REDO", false);
 			disableElements($container, ".EV_HISTORY_UNDO");
 			set_active_state($container, ".EV_HISTORY_UNDO", false);
+			light_save_button(gobj, graphs_write_is_owed(gobj));
 		}
 	}
 }
 /************************************************************
+*  What Save, Undo and Redo show when the edit toolbar is
+*  built (its getItems): Undo and Redo what the history can do
+*  now; Save what it was last told (`_save_lit`, see
+*  light_save_button), because more than the history lights
+*  it -- a change the history does not record
+*  (mark_graph_dirty), a write owed -- and update_history_
+*  buttons() is where those are weighed.
+************************************************************/
+function edit_buttons_lit(gobj) {
+	let history = graph_get_plugin(gobj, "history");
+	return {
+		undo: !!history && history.canUndo(),
+		redo: !!history && history.canRedo(),
+		save: !!gobj.priv._save_lit
+	};
+}
+/************************************************************
+*  Light the Save, or put it out: on the live element, and in
+*  `_save_lit`, where the next rebuild of the toolbar reads it.
+************************************************************/
+function light_save_button(gobj, lit) {
+	let $container = gobj_read_attr(gobj, "$container");
+	gobj.priv._save_lit = !!lit;
+	if (lit) enableElements($container, ".EV_SAVE_GRAPH");
+	else disableElements($container, ".EV_SAVE_GRAPH");
+	set_submit_state($container, ".EV_SAVE_GRAPH", !!lit);
+}
+/************************************************************
 *  Graph utility functions
 *
 *  From the G6 documentation:
@@ -63650,20 +63934,59 @@ function floating_popover_dx() {
 	return 4 + floating_icon_size() + 4;
 }
 /************************************************************
+*  A key press IS the click on an element drawn as a button.
+*
+*  Enter or Space clicks it, so the keyboard reaches the very
+*  handler the pointer does, whatever that handler is. Stopped
+*  here, as the click is: this view's container forwards every
+*  keydown to G6 (its shortcuts, and EV_KEY_DOWN), and a key
+*  that pressed a button is not the graph's. Space would scroll
+*  the page as well. Any other key goes on to the graph, so
+*  Escape and Delete keep doing there what they do.
+************************************************************/
+function click_on_enter_or_space(el) {
+	el.addEventListener("keydown", (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			e.stopPropagation();
+			el.click();
+		}
+	});
+}
+/************************************************************
 *  Create a floating circular icon button.
-*  @param {string} svgKey   - key into SVG_ICONS
-*  @param {string} color    - border & text color (e.g. '#1890ff')
-*  @param {number} left     - CSS left in px
-*  @param {number} top      - CSS top in px
-*  @param {string} title    - tooltip text
-*  @param {Function} onClick
+*
+*  A button for the keyboard too: `role` and `tabindex`, and
+*  Enter or Space click it (click_on_enter_or_space). Its name
+*  carries its KEY, so refresh_language() renames it on a
+*  language switch; a key handed in here goes in
+*  G6_NODES_TREE_I18N_KEYS, because no scan sees it.
+*
+*  Its click does one thing: it sends `event` to `gobj`, with
+*  `kw` -- the plain identity of what the button belongs to --
+*  and the ACTION does the work, where the `machine` trace sees
+*  it. A pointer press does not take the focus
+*  (keep_focus_on_press).
+*
+*  @param {string} svgKey     - key into SVG_ICONS
+*  @param {string} color      - border & text color (e.g. '#1890ff')
+*  @param {number} left       - CSS left in px
+*  @param {number} top        - CSS top in px
+*  @param {string} title_key  - i18n key of its title and aria-label
+*  @param {object} gobj       - who hears the click
+*  @param {string} event      - an input event of this gclass
+*  @param {object} kw         - plain JSON identity, copied per click
 *  @returns {HTMLElement}
 ************************************************************/
-function create_floating_icon(svgKey, color, left, top, title, onClick) {
+function create_floating_icon(svgKey, color, left, top, title_key, gobj, event, kw) {
 	const size = floating_icon_size();
 	const el = document.createElement("div");
-	el.title = title;
-	el.setAttribute("aria-label", title);
+	el.setAttribute("role", "button");
+	el.setAttribute("tabindex", "0");
+	el.setAttribute("title", t(title_key));
+	el.setAttribute("data-i18n-title", title_key);
+	el.setAttribute("aria-label", t(title_key));
+	el.setAttribute("data-i18n-aria-label", title_key);
 	el.innerHTML = SVG_ICONS[svgKey] || "";
 	el.style.cssText = "position:absolute;left:" + left + "px;top:" + top + "px;width:" + size + "px;height:" + size + "px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid " + color + ";border-radius:50%;cursor:pointer;pointer-events:all;z-index:11;touch-action:none;box-shadow:0 2px 6px rgba(0,0,0,0.15);color:" + color + ";";
 	const $svg = el.querySelector("svg");
@@ -63674,19 +63997,33 @@ function create_floating_icon(svgKey, color, left, top, title, onClick) {
 	}
 	el.addEventListener("click", (e) => {
 		e.stopPropagation();
-		onClick();
+		gobj_send_event(gobj, event, json_deep_copy(kw || {}), gobj);
 	});
+	keep_focus_on_press(el);
+	click_on_enter_or_space(el);
 	return el;
 }
 /************************************************************
 *  Remove one or more overlay elements from priv and the DOM.
+*
+*  An overlay that holds the focus -- a floating button reached
+*  with Tab, the ✕ of the detail popover, a field of a popover --
+*  gives it back to the canvas BEFORE it goes. Removing the
+*  focused element is a focus loss the browsers do not report
+*  alike: Chromium fires a focusout, which _on_focusout_restore
+*  answers; Firefox fires none and leaves the focus on <body>,
+*  and the graph is deaf to Escape, Delete and ctrl+A until the
+*  next click on it.
+*
 *  @param {object} gobj
 *  @param {...string} keys  - priv property names to remove
 ************************************************************/
 function hide_overlay(gobj, ...keys) {
 	let priv = gobj.priv;
 	for (let key of keys) if (priv[key]) {
-		priv[key].remove();
+		let el = priv[key];
+		if (el.contains(document.activeElement) && !gobj_is_destroying(gobj)) focus_main_canvas(priv.$container);
+		el.remove();
 		priv[key] = null;
 	}
 }
@@ -63731,9 +64068,7 @@ function graphs_write_is_owed(gobj) {
 	return Object.keys(gobj.priv._graphs_writes_owed).length > 0;
 }
 function mark_graph_dirty(gobj) {
-	let $container = gobj_read_attr(gobj, "$container");
-	enableElements($container, ".EV_SAVE_GRAPH");
-	set_submit_state($container, ".EV_SAVE_GRAPH", true);
+	light_save_button(gobj, true);
 }
 /************************************************************
 *  Extract width/height from a style's size property.
@@ -63748,13 +64083,15 @@ function extract_size(style) {
 }
 /************************************************************
 *  Show a pair of floating icons (gear + trash) next to an
-*  element. Returns {icon_el, delete_el}.
+*  element. The titles are i18n KEYS (see create_floating_icon);
+*  each click sends its event to `gobj` with the same identity
+*  `kw`. Returns {icon_el, delete_el}.
 ************************************************************/
-function show_dual_icons(gobj, x, y, gear_title, gear_click, trash_title, trash_click) {
+function show_dual_icons(gobj, x, y, gear_key, gear_event, trash_key, trash_event, kw) {
 	let priv = gobj.priv;
-	const icon_el = create_floating_icon("gear", "#1890ff", x, y, gear_title, gear_click);
+	const icon_el = create_floating_icon("gear", "#1890ff", x, y, gear_key, gobj, gear_event, kw);
 	priv.$container.appendChild(icon_el);
-	const delete_el = create_floating_icon("trash", "#ff4d4f", x, y + floating_icon_step(), trash_title, trash_click);
+	const delete_el = create_floating_icon("trash", "#ff4d4f", x, y + floating_icon_step(), trash_key, gobj, trash_event, kw);
 	priv.$container.appendChild(delete_el);
 	return {
 		icon_el,
@@ -63846,10 +64183,22 @@ function create_form_select(parent, options, marginBottom) {
 	return select;
 }
 var BTN_STYLE_CANCEL = "flex:1;padding:6px;background:var(--bulma-scheme-main-bis, #fff);color:var(--bulma-text-strong, #333);border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;";
-function create_form_button_row(parent, buttons) {
+/************************************************************
+*  The buttons of a popover: each one SENDS an input event of
+*  this gclass to `gobj`, and the action does the work, where
+*  the `machine` trace sees it (V20.5 #4). A button is
+*      {i18n, style, event, kw, form}
+*  `kw` is the plain identity of what the popover is about
+*  (copied per click); `form` names the controls whose `value`
+*  goes in the kw too, as the control says it -- a string, the
+*  action parses it. The kw says what was asked for, in the
+*  trace: the identity and what the form held when it was
+*  pressed.
+************************************************************/
+function create_form_button_row(parent, buttons, gobj) {
 	let btnRow = document.createElement("div");
 	btnRow.style.cssText = "display:flex;gap:8px;";
-	for (let { i18n, style, onClick } of buttons) {
+	for (let { i18n, style, event, kw, form } of buttons) {
 		let btn = document.createElement("button");
 		btn.textContent = t(i18n);
 		btn.setAttribute("data-i18n", i18n);
@@ -63860,18 +64209,28 @@ function create_form_button_row(parent, buttons) {
 		btn.style.cssText = style + touch_control_css();
 		btn.addEventListener("click", (e) => {
 			e.stopPropagation();
-			onClick();
+			gobj_send_event(gobj, event, form_kw(kw, form), gobj);
 		});
 		btnRow.appendChild(btn);
 	}
 	parent.appendChild(btnRow);
 	return btnRow;
 }
+function form_kw(kw, form) {
+	let out = json_deep_copy(kw || {});
+	for (let [name, control] of Object.entries(form || {})) out[name] = String(control.value);
+	return out;
+}
 /************************************************************
 *  Show a confirmation popover next to a target element.
-*  Returns the popover element.
+*
+*  `question` is the plain identity of what is asked, {what,
+*  id|ids}: the confirm button sends it with EV_CONFIRMED and the
+*  cancel button with EV_CANCEL_CONFIRM, and the actions answer.
+*  `priv_key` is where the popover is kept, and it must be the
+*  one CONFIRM_POPOVER_OF names for `question.what`.
 ************************************************************/
-function show_confirm_popover(gobj, target_el, message, confirm_text, confirm_color, onConfirm, priv_key) {
+function show_confirm_popover(gobj, target_el, message, confirm_text, confirm_color, question, priv_key) {
 	hide_overlay(gobj, priv_key);
 	let priv = gobj.priv;
 	let containerRect = priv.$container.getBoundingClientRect();
@@ -63892,14 +64251,17 @@ function show_confirm_popover(gobj, target_el, message, confirm_text, confirm_co
 	create_form_button_row(popover, [{
 		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
-		onClick: () => hide_overlay(gobj, priv_key)
+		event: "EV_CANCEL_CONFIRM",
+		kw: question
 	}, {
 		i18n: confirm_text,
 		style: "flex:1;padding:6px;background:" + confirm_color + ";color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
-		onClick: onConfirm
-	}]);
+		event: "EV_CONFIRMED",
+		kw: question
+	}], gobj);
 	priv.$container.appendChild(popover);
 	priv[priv_key] = popover;
+	priv._confirm_questions[priv_key] = json_deep_copy(question);
 	clamp_popover_position(gobj, popover);
 }
 /************************************************************
@@ -63977,27 +64339,30 @@ function paint_selection(gobj, ids) {
 *  Zoom-to-selection can only act on a selection.
 *
 *  The attribute is toggled on the element instead of re-rendering
-*  the toolbar, which would rebuild its innerHTML -- and with it
-*  drop the disabled state of every OTHER button -- each time a
-*  card is ticked.
+*  the toolbar, which would rebuild its whole innerHTML each time a
+*  card is ticked. A rebuild asks the same question
+*  (selection_is_painted) in the toolbar's getItems().
 ************************************************************/
+function selection_is_painted(gobj) {
+	return (gobj.priv._selected_paint_ids || []).length > 0;
+}
 function update_zoom_selection_button(gobj) {
-	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
 	if (!$container) return;
 	if (!$container.querySelector(".EV_ZOOM_SELECTION")) return;
-	if ((priv._selected_paint_ids || []).length > 0) enableElements($container, ".EV_ZOOM_SELECTION");
+	if (selection_is_painted(gobj)) enableElements($container, ".EV_ZOOM_SELECTION");
 	else disableElements($container, ".EV_ZOOM_SELECTION");
 }
 /************************************************************
 *  The selection mode is a state, so it has to LOOK like one:
 *  a PRESSED toggle, not a button wearing one of the palette's
-*  action colours (see `pressed_state` in lib_graph.css).
+*  action colours (see `pressed_state` in lib_graph.css). And
+*  it SAYS it, in `aria-pressed`, for whoever does not see it.
 *
 *  Toggled on the element rather than re-rendered with the
 *  toolbar, for the same reason as the button above: a
-*  re-render rebuilds the innerHTML and drops what every OTHER
-*  button was told.
+*  re-render rebuilds the whole innerHTML. A rebuild draws the
+*  same state, baked in the edit toolbar's getItems().
 ************************************************************/
 function update_selection_mode_button(gobj) {
 	let priv = gobj.priv;
@@ -64005,6 +64370,9 @@ function update_selection_mode_button(gobj) {
 	if (!$container) return;
 	if (!$container.querySelector(".EV_TOGGLE_SELECTION_MODE")) return;
 	set_pressed_state($container, ".EV_TOGGLE_SELECTION_MODE", priv.selection_mode);
+	$container.querySelectorAll(".EV_TOGGLE_SELECTION_MODE").forEach(($el) => {
+		$el.setAttribute("aria-pressed", priv.selection_mode ? "true" : "false");
+	});
 }
 /************************************************************
 *  Select a SET of nodes: what a marquee and a shift-click do.
@@ -64459,13 +64827,18 @@ function show_link_icon_if_fkey(gobj) {
 	let canvasPos = get_port_canvas_position(gobj, priv._selected_node_id, priv._selected_port_key);
 	if (!canvasPos) return;
 	let vp = graph.getViewportByCanvas([canvasPos.x, canvasPos.y]);
-	let icon = create_floating_icon("link", "#52c41a", vp[0] + floating_icon_size() / 2 + 4, vp[1] + floating_icon_dy(), t("link to hook"), () => {
-		if (!priv._linking_mode) enter_linking_mode(gobj);
-	});
+	let identity = {
+		node_id: priv._selected_node_id,
+		port_key: priv._selected_port_key
+	};
+	let icon = create_floating_icon("link", "#52c41a", vp[0] + floating_icon_size() / 2 + 4, vp[1] + floating_icon_dy(), "link to hook", gobj, "EV_ENTER_LINKING_MODE", identity);
 	icon.addEventListener("pointerdown", (e) => {
 		e.stopPropagation();
 		e.preventDefault();
-		start_link_drag(gobj, e);
+		gobj_send_event(gobj, "EV_START_LINK_DRAG", Object.assign(json_deep_copy(identity), {
+			client_x: e.clientX,
+			client_y: e.clientY
+		}), gobj);
 	});
 	priv.$container.appendChild(icon);
 	priv._link_icon_el = icon;
@@ -64515,7 +64888,10 @@ function show_port_icon(gobj) {
 	if (!priv._selected_node_id || !priv._selected_port_key) return;
 	let xy = port_icon_xy(gobj);
 	if (!xy) return;
-	let icon = create_floating_icon("gear", "#1890ff", xy.x, xy.y, t("port properties"), () => toggle_port_popover(gobj));
+	let icon = create_floating_icon("gear", "#1890ff", xy.x, xy.y, "port properties", gobj, "EV_TOGGLE_PORT_POPOVER", {
+		node_id: priv._selected_node_id,
+		port_key: priv._selected_port_key
+	});
 	priv.$container.appendChild(icon);
 	priv._port_icon_el = icon;
 }
@@ -64625,17 +65001,26 @@ function show_port_popover(gobj) {
 	create_form_button_row(popover, [{
 		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
-		onClick: () => {
-			hide_port_popover(gobj);
+		event: "EV_CANCEL_PORT_POPOVER",
+		kw: {
+			node_id,
+			port_key
 		}
 	}, {
 		i18n: "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);
+		event: "EV_APPLY_PORT_POPOVER",
+		kw: {
+			node_id,
+			port_key,
+			r_before: orig_r
+		},
+		form: {
+			shape: shapeSelect,
+			r: rInput,
+			scope: scopeSelect
 		}
-	}]);
+	}], gobj);
 	priv.$container.appendChild(popover);
 	priv._port_popover_el = popover;
 	set_preview_undo(gobj, "_port_preview_undo", undo_port);
@@ -64852,8 +65237,16 @@ function try_complete_link(gobj, clicked_node_id, clicked_port_key) {
 /************************************************************
 *  Drag-link: drag from link icon to a hook port.
 *  Draws a temporary SVG line from the fkey port to the cursor.
+*
+*  Run by ac_start_link_drag. The pointer's MOVES only draw the
+*  line and the cursor -- the drag's own picture, no action, and
+*  one event per move would bury the machine trace -- while the
+*  END of the gesture is an event: EV_LINK_DRAG_END {client_x,
+*  client_y, dragged} on the release, EV_LINK_DRAG_CANCEL when
+*  the browser takes the pointer. Their actions take the drag
+*  down (end_link_drag) and link, or leave the linking mode.
 ************************************************************/
-function start_link_drag(gobj, e) {
+function start_link_drag(gobj, client_x, client_y) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	if (!priv._linking_mode) enter_linking_mode(gobj);
@@ -64867,8 +65260,8 @@ function start_link_drag(gobj, e) {
 	let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
 	line.setAttribute("x1", startX);
 	line.setAttribute("y1", startY);
-	line.setAttribute("x2", e.clientX - containerRect.left);
-	line.setAttribute("y2", e.clientY - containerRect.top);
+	line.setAttribute("x2", client_x - containerRect.left);
+	line.setAttribute("y2", client_y - containerRect.top);
 	line.setAttribute("stroke", "#52c41a");
 	line.setAttribute("stroke-width", "2");
 	line.setAttribute("stroke-dasharray", "6 3");
@@ -64887,41 +65280,47 @@ function start_link_drag(gobj, e) {
 		priv.$container.style.cursor = hoverTarget ? "copy" : "not-allowed";
 	}
 	function onPointerUp(ev) {
-		document.removeEventListener("pointermove", onPointerMove);
-		document.removeEventListener("pointerup", onPointerUp);
-		document.removeEventListener("pointercancel", onPointerCancel);
-		priv.$container.style.cursor = "";
-		if (priv._link_drag_svg) {
-			priv._link_drag_svg.remove();
-			priv._link_drag_svg = null;
-		}
-		if (!dragged) return;
-		let cx = ev.clientX - containerRect.left;
-		let cy = ev.clientY - containerRect.top;
-		let canvasPt = graph.getCanvasByViewport([cx, cy]);
-		let target = find_hook_at_point(gobj, canvasPt[0], canvasPt[1]);
-		if (target) try_complete_link(gobj, target.node_id, target.port_key);
-		else exit_linking_mode(gobj);
+		gobj_send_event(gobj, "EV_LINK_DRAG_END", {
+			client_x: ev.clientX,
+			client_y: ev.clientY,
+			dragged
+		}, gobj);
 	}
 	function onPointerCancel(ev) {
+		gobj_send_event(gobj, "EV_LINK_DRAG_CANCEL", {}, gobj);
+	}
+	function unwire() {
 		document.removeEventListener("pointermove", onPointerMove);
 		document.removeEventListener("pointerup", onPointerUp);
 		document.removeEventListener("pointercancel", onPointerCancel);
-		priv.$container.style.cursor = "";
-		if (priv._link_drag_svg) {
-			priv._link_drag_svg.remove();
-			priv._link_drag_svg = null;
-		}
-		exit_linking_mode(gobj);
 	}
 	document.addEventListener("pointermove", onPointerMove);
 	document.addEventListener("pointerup", onPointerUp);
 	document.addEventListener("pointercancel", onPointerCancel);
-	gobj.priv._drag_unwire = function() {
-		document.removeEventListener("pointermove", onPointerMove);
-		document.removeEventListener("pointerup", onPointerUp);
-		document.removeEventListener("pointercancel", onPointerCancel);
+	priv._link_drag = {
+		left: containerRect.left,
+		top: containerRect.top,
+		unwire
 	};
+	priv._drag_unwire = unwire;
+}
+/************************************************************
+*  Take a link drag down: its listeners, its line, its cursor.
+*  What was linked, or not, is the caller's.
+************************************************************/
+function end_link_drag(gobj) {
+	let priv = gobj.priv;
+	let drag = priv._link_drag;
+	priv._link_drag = null;
+	if (drag) {
+		drag.unwire();
+		if (priv._drag_unwire === drag.unwire) priv._drag_unwire = null;
+	}
+	priv.$container.style.cursor = "";
+	if (priv._link_drag_svg) {
+		priv._link_drag_svg.remove();
+		priv._link_drag_svg = null;
+	}
 }
 /************************************************************
 *  Find if a canvas point hits a valid hook port during
@@ -65211,7 +65610,7 @@ function show_edge_icon(gobj) {
 	if (!priv._selected_edge_id) return;
 	let mid = get_edge_viewport_midpoint(gobj, priv._selected_edge_id);
 	if (!mid) return;
-	let icons = show_dual_icons(gobj, mid.x + 4, mid.y + floating_icon_dy(), t("edge properties"), () => toggle_edge_popover(gobj), t("unlink"), () => gobj_send_event(gobj, "EV_REQUEST_UNLINK_EDGE", {}, gobj));
+	let icons = show_dual_icons(gobj, mid.x + 4, mid.y + floating_icon_dy(), "edge properties", "EV_TOGGLE_EDGE_POPOVER", "unlink", "EV_REQUEST_UNLINK_EDGE", { edge_id: priv._selected_edge_id });
 	priv._edge_icon_el = icons.icon_el;
 	priv._edge_delete_el = icons.delete_el;
 }
@@ -65321,17 +65720,19 @@ function show_edge_popover(gobj) {
 	create_form_button_row(popover, [{
 		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
-		onClick: () => {
-			deselect_edge(gobj);
-		}
+		event: "EV_CANCEL_EDGE_POPOVER",
+		kw: { edge_id }
 	}, {
 		i18n: "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);
-		}
-	}]);
+		event: "EV_APPLY_EDGE_POPOVER",
+		kw: { edge_id },
+		form: {
+			line_width: lwInput,
+			color: colorInput,
+			scope: scopeSelect
+		}
+	}], gobj);
 	priv.$container.appendChild(popover);
 	priv._edge_popover_el = popover;
 	set_preview_undo(gobj, "_edge_preview_undo", undo_edge);
@@ -65368,7 +65769,7 @@ function show_node_icon(gobj) {
 	if (!priv._selected_node_id || priv._selected_port_key) return;
 	let rect = get_node_viewport_rect(gobj, priv._selected_node_id);
 	if (!rect) return;
-	let icons = show_dual_icons(gobj, rect.right + 4, rect.top + floating_icon_dy(), t("node properties"), () => toggle_node_popover(gobj), t("delete node"), () => gobj_send_event(gobj, "EV_REQUEST_DELETE_NODE", {}, gobj));
+	let icons = show_dual_icons(gobj, rect.right + 4, rect.top + floating_icon_dy(), "node properties", "EV_TOGGLE_NODE_POPOVER", "delete node", "EV_REQUEST_DELETE_NODE", { node_id: priv._selected_node_id });
 	priv._node_icon_el = icons.icon_el;
 	priv._node_delete_el = icons.delete_el;
 }
@@ -65482,17 +65883,24 @@ function show_node_popover(gobj) {
 	create_form_button_row(popover, [{
 		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
-		onClick: () => {
-			hide_node_popover(gobj);
-		}
+		event: "EV_CANCEL_NODE_POPOVER",
+		kw: { node_id }
 	}, {
 		i18n: "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 !== orig_figure ? shapeSelect.value : "");
+		event: "EV_APPLY_NODE_POPOVER",
+		kw: {
+			node_id,
+			shape_before: orig_figure
+		},
+		form: {
+			fill: fillInput,
+			stroke: strokeInput,
+			line_width: lwInput,
+			scope: scopeSelect,
+			shape: shapeSelect
 		}
-	}]);
+	}], gobj);
 	priv.$container.appendChild(popover);
 	priv._node_popover_el = popover;
 	set_preview_undo(gobj, "_node_preview_undo", undo_node);
@@ -65512,6 +65920,39 @@ function hide_node_detail(gobj) {
 	gobj.priv._detail_node_id = null;
 	hide_overlay(gobj, "_node_detail_el");
 }
+/************************************************************
+*  The ✕ of the detail popover. Built as an element and not in
+*  the popover's markup, so that it is a whole button: named
+*  with its key (a language switch renames it), reachable by
+*  the keyboard and pressed by Enter or Space as by the pointer.
+*  Its click sends EV_CLOSE_NODE_DETAIL {node_id} and nothing
+*  else; a pointer press does not take the focus.
+************************************************************/
+function create_detail_close(gobj, color, node_id) {
+	let el = document.createElement("div");
+	el.className = "g6-detail-close";
+	el.setAttribute("role", "button");
+	el.setAttribute("tabindex", "0");
+	el.setAttribute("title", t("close"));
+	el.setAttribute("data-i18n-title", "close");
+	el.setAttribute("aria-label", t("close"));
+	el.setAttribute("data-i18n-aria-label", "close");
+	el.style.color = color;
+	el.textContent = "×";
+	el.addEventListener("click", (e) => {
+		e.stopPropagation();
+		gobj_send_event(gobj, "EV_CLOSE_NODE_DETAIL", { node_id }, gobj);
+	});
+	keep_focus_on_press(el);
+	click_on_enter_or_space(el);
+	return el;
+}
+function detail_div(class_name, text) {
+	let el = document.createElement("div");
+	if (class_name) el.className = class_name;
+	if (text !== void 0) el.textContent = text;
+	return el;
+}
 function show_node_detail_popover(gobj, node_id) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
@@ -65541,7 +65982,19 @@ function show_node_detail_popover(gobj, node_id) {
 	popover.style.overflow = "auto";
 	popover.style.padding = "0 12px 12px";
 	popover.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
-	let rows = "";
+	let head = detail_div("g6-detail-head");
+	head.style.background = bg;
+	let names = detail_div("");
+	names.style.flex = "1 1 auto";
+	names.style.minWidth = "0";
+	names.appendChild(detail_div("g6-detail-id", id));
+	let topic_el = detail_div("g6-detail-topic", topic);
+	topic_el.style.color = sub;
+	names.appendChild(topic_el);
+	head.appendChild(names);
+	head.appendChild(create_detail_close(gobj, sub, node_id));
+	popover.appendChild(head);
+	let n_rows = 0;
 	for (let key of Object.keys(record)) {
 		if (key.indexOf("__") === 0) continue;
 		let v = record[key];
@@ -65550,14 +66003,21 @@ function show_node_detail_popover(gobj, node_id) {
 		else if (typeof v === "object") vs = JSON.stringify(v);
 		else vs = String(v);
 		if (vs.length > 240) vs = vs.slice(0, 240) + "…";
-		rows += `<div class="g6-detail-row" style="border-top:1px solid ${rowbd};"><div class="g6-detail-key" style="color:${sub};">${escapeHtml(key)}</div><div class="g6-detail-val">${escapeHtml(vs)}</div></div>`;
+		let row = detail_div("g6-detail-row");
+		row.style.borderTop = `1px solid ${rowbd}`;
+		let key_el = detail_div("g6-detail-key", key);
+		key_el.style.color = sub;
+		row.appendChild(key_el);
+		row.appendChild(detail_div("g6-detail-val", vs));
+		popover.appendChild(row);
+		n_rows++;
+	}
+	if (!n_rows) {
+		let empty = detail_div("g6-detail-empty", t("no fields"));
+		empty.setAttribute("data-i18n", "no fields");
+		empty.style.color = sub;
+		popover.appendChild(empty);
 	}
-	popover.innerHTML = `<div class="g6-detail-head" style="background:${bg};"><div style="flex:1 1 auto;min-width:0;"><div class="g6-detail-id">${escapeHtml(id)}</div><div class="g6-detail-topic" style="color:${sub};">${escapeHtml(topic)}</div></div><div class="g6-detail-close" role="button" tabindex="0" aria-label="${escapeHtml(t("close"))}" title="${escapeHtml(t("close"))}" style="color:${sub};">×</div></div>` + (rows || `<div class="g6-detail-empty" style="color:${sub};">${escapeHtml(t("no fields"))}</div>`);
-	let close_el = popover.querySelector(".g6-detail-close");
-	if (close_el) close_el.addEventListener("click", (e) => {
-		e.stopPropagation();
-		hide_node_detail(gobj);
-	});
 	priv.$container.appendChild(popover);
 	priv._node_detail_el = popover;
 	priv._detail_node_id = node_id;
@@ -66079,10 +66539,10 @@ function request_delete_selection(gobj) {
 		execute_delete_selection(gobj, nodes);
 		return;
 	}
-	show_confirm_popover(gobj, null, delete_question(nodes), "delete", "#ff4d4f", () => gobj_send_event(gobj, "EV_CONFIRMED", {
+	show_confirm_popover(gobj, null, delete_question(nodes), "delete", "#ff4d4f", {
 		what: "delete_selection",
 		ids: nodes.map((nd) => String(nd.id))
-	}, gobj), "_delete_confirm_el");
+	}, "_delete_confirm_el");
 }
 function execute_delete_selection(gobj, nodes) {
 	let priv = gobj.priv;
@@ -66099,10 +66559,10 @@ function execute_delete_selection(gobj, nodes) {
 ************************************************************/
 function show_delete_confirm(gobj, nodeData) {
 	let priv = gobj.priv;
-	show_confirm_popover(gobj, priv._node_delete_el, delete_question([nodeData]), "delete", "#ff4d4f", () => gobj_send_event(gobj, "EV_CONFIRMED", {
+	show_confirm_popover(gobj, priv._node_delete_el, delete_question([nodeData]), "delete", "#ff4d4f", {
 		what: "delete_node",
 		id: String(nodeData.id)
-	}, gobj), "_delete_confirm_el");
+	}, "_delete_confirm_el");
 }
 function hide_delete_confirm(gobj) {
 	hide_overlay(gobj, "_delete_confirm_el");
@@ -66151,6 +66611,7 @@ function show_create_popover(gobj) {
 	topicLabel.appendChild(document.createTextNode(":"));
 	popover.appendChild(topicLabel);
 	let topicSelect = document.createElement("select");
+	topicSelect.className = "G6_CREATE_TOPIC";
 	topicSelect.setAttribute("title", t("topic"));
 	topicSelect.setAttribute("data-i18n-title", "topic");
 	topicSelect.setAttribute("aria-label", t("topic"));
@@ -66190,6 +66651,7 @@ function show_create_popover(gobj) {
 	idLabel.appendChild(document.createTextNode(":"));
 	popover.appendChild(idLabel);
 	let idInput = document.createElement("input");
+	idInput.className = "G6_CREATE_ID";
 	idInput.type = "text";
 	idInput.placeholder = t("node id");
 	idInput.setAttribute("data-i18n-placeholder", "node id");
@@ -66200,39 +66662,31 @@ function show_create_popover(gobj) {
 	idInput.style.cssText = "width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px;margin-bottom:10px;box-sizing:border-box;" + touch_control_css();
 	popover.appendChild(idInput);
 	let errorEl = document.createElement("div");
+	errorEl.className = "G6_CREATE_ERROR";
 	errorEl.style.cssText = "color:#ff4d4f;font-size:12px;margin-bottom:8px;display:none;";
 	popover.appendChild(errorEl);
-	let createBtn;
-	create_form_button_row(popover, [{
+	let createBtn = create_form_button_row(popover, [{
 		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
-		onClick: () => hide_create_popover(gobj)
+		event: "EV_CLOSE_CREATE_POPOVER",
+		kw: {}
 	}, {
 		i18n: "create",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
-		onClick: () => {
-			let node_id = idInput.value.trim();
-			if (!node_id) {
-				errorEl.textContent = t("node id required");
-				errorEl.setAttribute("data-i18n", "node id required");
-				errorEl.style.display = "block";
-				idInput.focus();
-				return;
-			}
-			gobj_send_event(gobj, "EV_SUBMIT_NEW_NODE", {
-				topic_name: String(topicSelect.value),
-				id: node_id
-			}, gobj);
+		event: "EV_SUBMIT_NEW_NODE",
+		kw: {},
+		form: {
+			topic_name: topicSelect,
+			id: idInput
 		}
-	}]);
-	createBtn = popover.querySelector("button:last-child");
+	}], gobj).lastElementChild;
 	idInput.addEventListener("keydown", (e) => {
 		if (e.key === "Enter") {
 			e.preventDefault();
 			createBtn.click();
 		} else if (e.key === "Escape") {
 			e.preventDefault();
-			hide_create_popover(gobj);
+			gobj_send_event(gobj, "EV_CLOSE_CREATE_POPOVER", {}, gobj);
 		}
 	});
 	priv.$container.appendChild(popover);
@@ -66282,10 +66736,10 @@ function execute_unlink_edge(gobj, edgeData) {
 function show_unlink_confirm(gobj, edgeData) {
 	let priv = gobj.priv;
 	const d = edgeData.data;
-	show_confirm_popover(gobj, priv._edge_delete_el, t("unlink") + " " + d.child_id + " → " + d.parent_id + "?\n" + t("neither record is deleted"), "unlink", "#ff4d4f", () => gobj_send_event(gobj, "EV_CONFIRMED", {
+	show_confirm_popover(gobj, priv._edge_delete_el, t("unlink") + " " + d.child_id + " → " + d.parent_id + "?\n" + t("neither record is deleted"), "unlink", "#ff4d4f", {
 		what: "unlink_edge",
 		id: String(edgeData.id)
-	}, gobj), "_unlink_confirm_el");
+	}, "_unlink_confirm_el");
 }
 function hide_unlink_confirm(gobj) {
 	hide_overlay(gobj, "_unlink_confirm_el");
@@ -67656,9 +68110,7 @@ function ac_load_data(gobj, event, kw, src) {
 ************************************************************/
 function ac_save_graph(gobj, event, kw, src) {
 	if (gobj.priv.edit_mode) {
-		let $container = gobj_read_attr(gobj, "$container");
-		disableElements($container, ".EV_SAVE_GRAPH");
-		set_submit_state($container, ".EV_SAVE_GRAPH", false);
+		light_save_button(gobj, false);
 		let history = graph_get_plugin(gobj, "history");
 		if (history) history.clear();
 		save_geometry(gobj);
@@ -67935,12 +68387,22 @@ function ac_center_anchor(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
-*  What the anchor button says it will do next.
+*  What the anchor button says it will do next: its `title`,
+*  and the `title_key` it is translated from.
 ************************************************************/
 function anchor_title(state) {
-	if (state === "arming") return t("click the element to centre on");
-	if (state === "on") return t("centred: click to release");
-	return t("anchor view");
+	if (state === "arming") return {
+		title: t("click the element to centre on"),
+		title_key: "click the element to centre on"
+	};
+	if (state === "on") return {
+		title: t("centred: click to release"),
+		title_key: "centred: click to release"
+	};
+	return {
+		title: t("anchor view"),
+		title_key: "anchor view"
+	};
 }
 /************************************************************
 *  Every camera action ends the same way once an anchor is
@@ -68356,8 +68818,8 @@ function ac_set_layout$1(gobj, event, kw, src) {
 function ac_set_operation_mode$1(gobj, event, kw, src) {
 	gobj_write_attr(gobj, "operation_mode", kw.operation_mode);
 	configure_behaviour(gobj);
-	update_toolbar(gobj);
 	sync_history_plugin(gobj);
+	update_toolbar(gobj);
 	return 0;
 }
 /************************************************************
@@ -68539,25 +69001,134 @@ function ac_context_menu_item(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
-*  The delete icon floating beside the selected node.
+*  Is the identity a floating button was drawn with still what
+*  is selected?
+*
+*  The buttons are removed with their selection and drawn again
+*  for the next one, so a click carrying another identity is a
+*  broken invariant -- said loudly, never acted on: it would
+*  delete, unlink or edit what the reader is not looking at.
+************************************************************/
+function floating_button_is_current(gobj, event, kw) {
+	let priv = gobj.priv;
+	let want = {
+		node_id: priv._selected_node_id || "",
+		port_key: priv._selected_port_key || "",
+		edge_id: priv._selected_edge_id || ""
+	};
+	let keys = Object.keys(kw || {});
+	let matches = keys.length > 0 && keys.every((k) => {
+		return Object.prototype.hasOwnProperty.call(want, k) && !!kw[k] && kw[k] === want[k];
+	});
+	if (!matches) log_error(`${gobj_short_name(gobj)}: ${event} for ${JSON.stringify(kw || {})}, but the selection is ${JSON.stringify(want)}`);
+	return matches;
+}
+/************************************************************
+*  {node_id} -- the delete icon floating beside the selected
+*  node.
 ************************************************************/
 function ac_request_delete_node(gobj, event, kw, src) {
+	if (!floating_button_is_current(gobj, event, kw)) return -1;
 	request_delete_node(gobj);
 	return 0;
 }
 /************************************************************
-*  The unlink icon floating beside the selected edge.
+*  {edge_id} -- the unlink icon floating beside the selected
+*  edge.
 ************************************************************/
 function ac_request_unlink_edge(gobj, event, kw, src) {
+	if (!floating_button_is_current(gobj, event, kw)) return -1;
 	request_unlink_edge(gobj);
 	return 0;
 }
 /************************************************************
+*  {node_id} -- the gear beside the selected node: its
+*  properties popover, opened or closed.
+************************************************************/
+function ac_toggle_node_popover(gobj, event, kw, src) {
+	if (!floating_button_is_current(gobj, event, kw)) return -1;
+	toggle_node_popover(gobj);
+	return 0;
+}
+/************************************************************
+*  {edge_id} -- the gear beside the selected edge.
+************************************************************/
+function ac_toggle_edge_popover(gobj, event, kw, src) {
+	if (!floating_button_is_current(gobj, event, kw)) return -1;
+	toggle_edge_popover(gobj);
+	return 0;
+}
+/************************************************************
+*  {node_id, port_key} -- the gear beside the selected port.
+************************************************************/
+function ac_toggle_port_popover(gobj, event, kw, src) {
+	if (!floating_button_is_current(gobj, event, kw)) return -1;
+	toggle_port_popover(gobj);
+	return 0;
+}
+/************************************************************
+*  {node_id, port_key} -- the link icon of a selected fkey port,
+*  CLICKED (a press that drags enters the mode on its own, from
+*  start_link_drag): the compatible hooks light up, and the next
+*  click on one of them links.
+************************************************************/
+function ac_enter_linking_mode(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (!floating_button_is_current(gobj, event, kw)) return -1;
+	if (!priv._linking_mode) enter_linking_mode(gobj);
+	return 0;
+}
+/************************************************************
+*  {node_id} -- the ✕ of the detail popover.
+************************************************************/
+function ac_close_node_detail(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let node_id = kw && kw.node_id || "";
+	if (!priv._node_detail_el || !node_id || node_id !== priv._detail_node_id) {
+		log_error(`${gobj_short_name(gobj)}: ${event} for '${node_id}', but the detail popover shows '${priv._detail_node_id || ""}'`);
+		return -1;
+	}
+	hide_node_detail(gobj);
+	return 0;
+}
+/************************************************************
+*  {} -- the create button of the edit toolbar: the create
+*  popover, opened or closed. Only in edition, where that
+*  toolbar is.
+************************************************************/
+function ac_toggle_create_popover(gobj, event, kw, src) {
+	if (!gobj.priv.edit_mode) {
+		log_error(`${gobj_short_name(gobj)}: ${event} outside edition`);
+		return -1;
+	}
+	toggle_create_popover(gobj);
+	return 0;
+}
+/************************************************************
+*  {} -- the cancel of the create popover, or Escape in its id.
+************************************************************/
+function ac_close_create_popover(gobj, event, kw, src) {
+	if (!gobj.priv._create_popover_el) {
+		log_error(`${gobj_short_name(gobj)}: ${event} with no create popover open`);
+		return -1;
+	}
+	hide_create_popover(gobj);
+	return 0;
+}
+/************************************************************
 *  {topic_name, id} -- the create popover was filled in.
+*
+*  An empty id with the popover open is the person's to fix,
+*  not a fault: it is said IN the popover, where they typed.
 ************************************************************/
 function ac_submit_new_node(gobj, event, kw, src) {
-	let topic_name = kw && kw.topic_name ? kw.topic_name : "";
-	let node_id = kw && kw.id ? kw.id : "";
+	let priv = gobj.priv;
+	let topic_name = kw && kw.topic_name ? String(kw.topic_name) : "";
+	let node_id = kw && kw.id ? String(kw.id).trim() : "";
+	if (topic_name && !node_id && priv._create_popover_el) {
+		say_node_id_required(gobj);
+		return 0;
+	}
 	if (!topic_name || !node_id) {
 		log_error(`${gobj_short_name(gobj)}: ${event} without topic or id`);
 		return -1;
@@ -68565,6 +69136,168 @@ function ac_submit_new_node(gobj, event, kw, src) {
 	execute_create_node(gobj, topic_name, node_id);
 	return 0;
 }
+function say_node_id_required(gobj) {
+	let $popover = gobj.priv._create_popover_el;
+	let $error = $popover.querySelector(".G6_CREATE_ERROR");
+	let $id = $popover.querySelector(".G6_CREATE_ID");
+	if (!$error || !$id) {
+		log_error(`${gobj_short_name(gobj)}: the create popover has no id or no error line`);
+		return;
+	}
+	$error.textContent = t("node id required");
+	$error.setAttribute("data-i18n", "node id required");
+	$error.style.display = "block";
+	$id.focus();
+}
+/************************************************************
+*  Is `popover_key` open, and for the selection `kw` names?
+*  `keys` are the identity in `kw` (the rest is what the form
+*  held). A button of a popover that is not the one open is a
+*  broken invariant -- said loudly, never acted on.
+************************************************************/
+function popover_is_current(gobj, event, kw, popover_key, keys) {
+	if (!gobj.priv[popover_key]) {
+		log_error(`${gobj_short_name(gobj)}: ${event} for ${JSON.stringify(kw || {})}, but its popover is not open`);
+		return false;
+	}
+	let identity = {};
+	for (let k of keys) identity[k] = kw ? kw[k] : void 0;
+	return floating_button_is_current(gobj, event, identity);
+}
+/************************************************************
+*  {node_id, shape_before, fill, stroke, line_width, scope,
+*  shape} -- apply of the node popover.
+************************************************************/
+function ac_apply_node_popover(gobj, event, kw, src) {
+	if (!popover_is_current(gobj, event, kw, "_node_popover_el", ["node_id"])) return -1;
+	let shape = String(kw.shape || "");
+	drop_preview_undo(gobj, "_node_preview_undo");
+	apply_node_properties(gobj, kw.node_id, kw.fill, kw.stroke, parseInt(kw.line_width) || 1, kw.scope, shape !== kw.shape_before ? shape : "");
+	return 0;
+}
+/************************************************************
+*  {node_id} -- cancel of the node popover, which undoes the
+*  preview.
+************************************************************/
+function ac_cancel_node_popover(gobj, event, kw, src) {
+	if (!popover_is_current(gobj, event, kw, "_node_popover_el", ["node_id"])) return -1;
+	hide_node_popover(gobj);
+	return 0;
+}
+/************************************************************
+*  {edge_id, line_width, color, scope} -- apply of the edge
+*  popover.
+************************************************************/
+function ac_apply_edge_popover(gobj, event, kw, src) {
+	if (!popover_is_current(gobj, event, kw, "_edge_popover_el", ["edge_id"])) return -1;
+	drop_preview_undo(gobj, "_edge_preview_undo");
+	apply_edge_properties(gobj, kw.edge_id, parseInt(kw.line_width) || 2, kw.color, kw.scope);
+	return 0;
+}
+/************************************************************
+*  {edge_id} -- cancel of the edge popover: the edge is let go,
+*  which undoes the preview.
+************************************************************/
+function ac_cancel_edge_popover(gobj, event, kw, src) {
+	if (!popover_is_current(gobj, event, kw, "_edge_popover_el", ["edge_id"])) return -1;
+	deselect_edge(gobj);
+	return 0;
+}
+/************************************************************
+*  {node_id, port_key, r_before, shape, r, scope} -- apply of
+*  the port popover.
+************************************************************/
+function ac_apply_port_popover(gobj, event, kw, src) {
+	if (!popover_is_current(gobj, event, kw, "_port_popover_el", ["node_id", "port_key"])) return -1;
+	drop_preview_undo(gobj, "_port_preview_undo");
+	apply_port_properties(gobj, kw.node_id, kw.port_key, kw.shape, parseInt(kw.r) || kw.r_before, kw.scope);
+	return 0;
+}
+/************************************************************
+*  {node_id, port_key} -- cancel of the port popover, which
+*  undoes the preview.
+************************************************************/
+function ac_cancel_port_popover(gobj, event, kw, src) {
+	if (!popover_is_current(gobj, event, kw, "_port_popover_el", ["node_id", "port_key"])) return -1;
+	hide_port_popover(gobj);
+	return 0;
+}
+var CONFIRM_POPOVER_OF = {
+	delete_selection: "_delete_confirm_el",
+	delete_node: "_delete_confirm_el",
+	unlink_edge: "_unlink_confirm_el"
+};
+function same_question(a, b) {
+	return !!a && !!b && a.what === b.what && JSON.stringify(a.id ?? null) === JSON.stringify(b.id ?? null) && JSON.stringify(a.ids ?? null) === JSON.stringify(b.ids ?? null);
+}
+/************************************************************
+*  {what, id|ids} -- the person said no in a confirm popover:
+*  the question it carries must be the one open.
+************************************************************/
+function ac_cancel_confirm(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let key = CONFIRM_POPOVER_OF[kw && kw.what || ""];
+	let asked = key ? priv._confirm_questions[key] : null;
+	if (!key || !priv[key] || !same_question(asked, kw)) {
+		log_error(`${gobj_short_name(gobj)}: ${event} for ${JSON.stringify(kw || {})}, but the question open is ${JSON.stringify(priv[key] && asked || {})}`);
+		return -1;
+	}
+	hide_overlay(gobj, key);
+	return 0;
+}
+/************************************************************
+*  {node_id, port_key, client_x, client_y} -- a press on the
+*  link icon of the selected fkey port, which may be a drag.
+************************************************************/
+function ac_start_link_drag(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (!floating_button_is_current(gobj, event, {
+		node_id: kw && kw.node_id,
+		port_key: kw && kw.port_key
+	})) return -1;
+	if (priv._link_drag) {
+		log_warning(`${gobj_short_name(gobj)}: ${event} with a link drag still in flight`);
+		end_link_drag(gobj);
+	}
+	start_link_drag(gobj, Number(kw.client_x) || 0, Number(kw.client_y) || 0);
+	return 0;
+}
+/************************************************************
+*  {client_x, client_y, dragged} -- the pointer of a link drag
+*  went up. Not dragged, it was a click: the click comes next
+*  (EV_ENTER_LINKING_MODE). Dragged, it links to the hook it was
+*  dropped on, or leaves the linking mode.
+************************************************************/
+function ac_link_drag_end(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let drag = priv._link_drag;
+	if (!drag) {
+		log_error(`${gobj_short_name(gobj)}: ${event} with no link drag in flight`);
+		return -1;
+	}
+	end_link_drag(gobj);
+	if (!kw || !kw.dragged) return 0;
+	let cx = Number(kw.client_x) - drag.left;
+	let cy = Number(kw.client_y) - drag.top;
+	let canvasPt = priv.graph.getCanvasByViewport([cx, cy]);
+	let target = find_hook_at_point(gobj, canvasPt[0], canvasPt[1]);
+	if (target) try_complete_link(gobj, target.node_id, target.port_key);
+	else exit_linking_mode(gobj);
+	return 0;
+}
+/************************************************************
+*  {} -- the browser took the pointer of a link drag: no drop,
+*  and the linking mode goes.
+************************************************************/
+function ac_link_drag_cancel(gobj, event, kw, src) {
+	if (!gobj.priv._link_drag) {
+		log_error(`${gobj_short_name(gobj)}: ${event} with no link drag in flight`);
+		return -1;
+	}
+	end_link_drag(gobj);
+	exit_linking_mode(gobj);
+	return 0;
+}
 /************************************************************
 *  {what, id|ids} -- the person said yes in a confirm popover.
 *
@@ -68821,16 +69554,101 @@ function create_gclass$4(gclass_name) {
 			ac_request_unlink_edge,
 			null
 		],
+		[
+			"EV_TOGGLE_NODE_POPOVER",
+			ac_toggle_node_popover,
+			null
+		],
+		[
+			"EV_TOGGLE_EDGE_POPOVER",
+			ac_toggle_edge_popover,
+			null
+		],
+		[
+			"EV_TOGGLE_PORT_POPOVER",
+			ac_toggle_port_popover,
+			null
+		],
+		[
+			"EV_ENTER_LINKING_MODE",
+			ac_enter_linking_mode,
+			null
+		],
+		[
+			"EV_CLOSE_NODE_DETAIL",
+			ac_close_node_detail,
+			null
+		],
+		[
+			"EV_TOGGLE_CREATE_POPOVER",
+			ac_toggle_create_popover,
+			null
+		],
+		[
+			"EV_CLOSE_CREATE_POPOVER",
+			ac_close_create_popover,
+			null
+		],
 		[
 			"EV_SUBMIT_NEW_NODE",
 			ac_submit_new_node,
 			null
 		],
+		[
+			"EV_APPLY_NODE_POPOVER",
+			ac_apply_node_popover,
+			null
+		],
+		[
+			"EV_CANCEL_NODE_POPOVER",
+			ac_cancel_node_popover,
+			null
+		],
+		[
+			"EV_APPLY_EDGE_POPOVER",
+			ac_apply_edge_popover,
+			null
+		],
+		[
+			"EV_CANCEL_EDGE_POPOVER",
+			ac_cancel_edge_popover,
+			null
+		],
+		[
+			"EV_APPLY_PORT_POPOVER",
+			ac_apply_port_popover,
+			null
+		],
+		[
+			"EV_CANCEL_PORT_POPOVER",
+			ac_cancel_port_popover,
+			null
+		],
 		[
 			"EV_CONFIRMED",
 			ac_confirmed$1,
 			null
 		],
+		[
+			"EV_CANCEL_CONFIRM",
+			ac_cancel_confirm,
+			null
+		],
+		[
+			"EV_START_LINK_DRAG",
+			ac_start_link_drag,
+			null
+		],
+		[
+			"EV_LINK_DRAG_END",
+			ac_link_drag_end,
+			null
+		],
+		[
+			"EV_LINK_DRAG_CANCEL",
+			ac_link_drag_cancel,
+			null
+		],
 		[
 			"EV_CANVAS_CLICK",
 			ac_canvas_click,
@@ -69051,8 +69869,25 @@ function create_gclass$4(gclass_name) {
 		["EV_CONTEXT_MENU_ITEM", 0],
 		["EV_REQUEST_DELETE_NODE", 0],
 		["EV_REQUEST_UNLINK_EDGE", 0],
+		["EV_TOGGLE_NODE_POPOVER", 0],
+		["EV_TOGGLE_EDGE_POPOVER", 0],
+		["EV_TOGGLE_PORT_POPOVER", 0],
+		["EV_ENTER_LINKING_MODE", 0],
+		["EV_CLOSE_NODE_DETAIL", 0],
+		["EV_TOGGLE_CREATE_POPOVER", 0],
+		["EV_CLOSE_CREATE_POPOVER", 0],
 		["EV_SUBMIT_NEW_NODE", 0],
+		["EV_APPLY_NODE_POPOVER", 0],
+		["EV_CANCEL_NODE_POPOVER", 0],
+		["EV_APPLY_EDGE_POPOVER", 0],
+		["EV_CANCEL_EDGE_POPOVER", 0],
+		["EV_APPLY_PORT_POPOVER", 0],
+		["EV_CANCEL_PORT_POPOVER", 0],
 		["EV_CONFIRMED", 0],
+		["EV_CANCEL_CONFIRM", 0],
+		["EV_START_LINK_DRAG", 0],
+		["EV_LINK_DRAG_END", 0],
+		["EV_LINK_DRAG_CANCEL", 0],
 		["EV_CANVAS_CLICK", 0],
 		["EV_NODE_DRAG_END", 0],
 		["EV_BRUSH_SELECT", 0],
@@ -69402,7 +70237,7 @@ function show_load_error(gobj, message) {
 		$container.insertBefore($err, $container.firstChild);
 	}
 	let treedb = gobj_read_attr(gobj, "treedb_name") || "";
-	$err.textContent = (treedb ? `${treedb}: ` : "") + (message || "cannot load treedb");
+	$err.textContent = (treedb ? `${treedb}: ` : "") + (message || t("cannot load treedb"));
 }
 /************************************************************
 *   Destroy UI
@@ -71087,7 +71922,7 @@ function refresh_legend(gobj) {
 			},
 			hidden ? `${entry.total}` : `${entry.visible}/${entry.total}`
 		]);
-		let body_key = is_main ? "main topic" : hidden ? "show topic" : "hide topic";
+		const body_key = is_main ? "main topic" : hidden ? "show topic" : "hide topic";
 		let body_attrs = {
 			class: "GRAPH_LEGEND_ITEM button" + (focused ? " GRAPH_LEGEND_FOCUSED" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
 			type: "button",
@@ -72347,6 +73182,7 @@ function build_graph(gobj) {
 	}
 	priv.graph = graph;
 	graph.setTheme(dark ? "dark" : "light");
+	keep_canvas_tab_order(gobj, graph);
 	graph.on("aftertransform", () => {
 		yui_graph_update_zoom($container, priv.graph);
 	});
@@ -77660,7 +78496,7 @@ function ac_mt_command_answer(gobj, event, kw, src) {
 			}
 			return late_write_done(gobj, command, topic_name, data);
 		}
-		if (result < 0) return end_writes(gobj, comment || t("the treedb refused the write"));
+		if (result < 0) return end_writes(gobj, comment || "the treedb refused the write");
 		priv.save_wrote = true;
 		let record = null;
 		if (command === "delete-node") forget_record(gobj, topic_name, kw_get_str(gobj, md, "record_id", "", 0));
@@ -78176,7 +79012,8 @@ function confirm_column_delete(gobj, verdict) {
 		capped: "the records read hold no value in this column, but not all were read: the rest may hold values that no reader will show any more",
 		unknown: "the records of this topic could not be read: if they hold values in this column, they keep them, but no reader shows them any more"
 	};
-	let message = "delete this column?";
+	const message = "delete this column?";
+	let $warning = null;
 	if (NOTES[verdict]) {
 		let children = [[
 			"p",
@@ -78206,13 +79043,13 @@ function confirm_column_delete(gobj, verdict) {
 				String(c.scanned)
 			]]
 		]);
-		message = createElement2([
+		$warning = createElement2([
 			"div",
 			{ class: "SCHEMA_COLUMN_DATA_WARNING" },
 			children
 		]);
 	}
-	confirm_then(gobj, message, `${c.topic}.${c.col}`, {
+	confirm_then(gobj, $warning ? $warning : message, `${c.topic}.${c.col}`, {
 		what: "column",
 		topic: c.topic,
 		col: c.col
@@ -81777,7 +82614,9 @@ function build_control_bar() {
 			type: "button",
 			title: t("machine trace shape"),
 			"data-i18n-title": "machine trace shape",
-			"data-i18n": "simple mach"
+			"data-i18n": "simple mach",
+			"aria-label": t("simple mach"),
+			"data-i18n-aria-label": "simple mach"
 		},
 		t("simple mach"),
 		{ click: (ev) => {
@@ -81851,7 +82690,9 @@ function build_control_bar() {
 			type: "button",
 			title: t(OUT_TITLES[v]),
 			"data-i18n-title": OUT_TITLES[v],
-			"data-i18n": label
+			"data-i18n": label,
+			"aria-label": t(label),
+			"data-i18n-aria-label": label
 		},
 		t(label),
 		{ click: (ev) => {
@@ -81879,7 +82720,9 @@ function build_control_bar() {
 			type: "button",
 			title: t("show this section in the expanded view"),
 			"data-i18n-title": "show this section in the expanded view",
-			"data-i18n": label
+			"data-i18n": label,
+			"aria-label": t(label),
+			"data-i18n-aria-label": label
 		},
 		t(label),
 		{ click: (ev) => {
@@ -81978,7 +82821,9 @@ function build_control_bar() {
 			type: "button",
 			title: t("copy visible traffic to clipboard"),
 			"data-i18n-title": "copy visible traffic to clipboard",
-			"data-i18n": "copy"
+			"data-i18n": "copy",
+			"aria-label": t("copy"),
+			"data-i18n-aria-label": "copy"
 		},
 		t("copy"),
 		{ click: (ev) => {
@@ -82000,7 +82845,9 @@ function build_control_bar() {
 			type: "button",
 			title: t("clear captured traffic"),
 			"data-i18n-title": "clear captured traffic",
-			"data-i18n": "clear"
+			"data-i18n": "clear",
+			"aria-label": t("clear"),
+			"data-i18n-aria-label": "clear"
 		},
 		t("clear"),
 		{ click: (ev) => {