@yuneta/gobj-ui 2.0.0 → 2.2.3

package/dist/gobj-ui.es.js

@@ -1,11 +1,11 @@
-import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, duplicate_objects, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_flag_t, getPositionRelativeToBody, gobj_command, gobj_create, gobj_create_service, gobj_current_state, gobj_default_service, gobj_destroy, gobj_find_child, gobj_find_service, gobj_full_name, gobj_gclass_name, gobj_has_attr, gobj_is_playing, gobj_is_pure_child, gobj_is_running, gobj_is_service, gobj_is_volatil, gobj_match_children, gobj_name, gobj_parent, gobj_publish_event, gobj_read_attr, gobj_read_bool_attr, gobj_read_integer_attr, gobj_read_pointer_attr, gobj_read_str_attr, gobj_save_persistent_attrs, gobj_send_event, gobj_short_name, gobj_start, gobj_stop, gobj_stop_children, gobj_subscribe_event, gobj_unsubscribe_event, gobj_write_attr, gobj_write_bool_attr, gobj_write_integer_attr, gobj_write_str_attr, gobj_yuno, is_array, is_boolean, is_date, is_gobj, is_null, is_number, is_object, is_pure_number, is_string, json_deep_copy, json_object_size, json_object_update, json_object_update_missing, json_size, kw_clone_by_keys, kw_flag_t, kw_get_dict, kw_get_dict_value, kw_get_int, kw_get_local_storage_value, kw_get_str, kw_has_key, kw_set_dict_value, kw_set_local_storage_value, kwid_find_one_record, kwid_get_ids, kwid_new_dict, list2options, log_error, log_warning, msg_iev_get_stack, parseBoolean, parseSVG, refresh_language, safeSrc, sdata_flag_t, sprintf, str_in_list, template_get_field_desc, trace_json, trace_msg, treedb_decoder_fkey, treedb_encoder_fkey, treedb_get_field_desc, treedb_hook_data_size } from "@yuneta/gobj-js";
+import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, duplicate_objects, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_flag_t, getPositionRelativeToBody, gobj_command, gobj_create, gobj_create_service, gobj_current_state, gobj_default_service, gobj_destroy, gobj_find_child, gobj_find_service, gobj_full_name, gobj_gclass_name, gobj_has_attr, gobj_is_playing, gobj_is_pure_child, gobj_is_running, gobj_is_service, gobj_is_volatil, gobj_match_children, gobj_name, gobj_parent, gobj_publish_event, gobj_read_attr, gobj_read_bool_attr, gobj_read_integer_attr, gobj_read_pointer_attr, gobj_read_str_attr, gobj_save_persistent_attrs, gobj_send_event, gobj_set_trace_machine_format, gobj_short_name, gobj_start, gobj_stop, gobj_stop_children, gobj_subscribe_event, gobj_unsubscribe_event, gobj_write_attr, gobj_write_bool_attr, gobj_write_integer_attr, gobj_write_str_attr, gobj_yuno, is_array, is_boolean, is_date, is_gobj, is_null, is_number, is_object, is_pure_number, is_string, json_deep_copy, json_object_size, json_object_update, json_object_update_missing, json_size, kw_clone_by_keys, kw_flag_t, kw_get_dict, kw_get_dict_value, kw_get_int, kw_get_local_storage_value, kw_get_str, kw_has_key, kw_set_dict_value, kw_set_local_storage_value, kwid_find_one_record, kwid_get_ids, kwid_new_dict, list2options, log_error, log_warning, msg_iev_get_stack, parseBoolean, parseSVG, refresh_language, safeSrc, sdata_flag_t, set_log_callback, sprintf, str_in_list, template_get_field_desc, trace_json, trace_msg, treedb_decoder_fkey, treedb_encoder_fkey, treedb_get_field_desc, treedb_hook_data_size } from "@yuneta/gobj-js";
 import i18next, { t } from "i18next";
-import { JSONEditor } from "vanilla-jsoneditor";
 import TomSelect from "tom-select";
 import { TabulatorFull } from "tabulator-tables";
 import maplibregl from "maplibre-gl";
 import uPlot from "uplot";
 import { BaseLayout, CanvasEvent, Circle, CommonEvent, DragCanvas, EdgeEvent, ExtensionCategory, Graph, HistoryEvent, NodeEvent, Toolbar, register } from "@antv/g6";
+import { JSONEditor } from "vanilla-jsoneditor";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -38,107 +38,907 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 //#endregion
-//#region yui_dev.js
+//#region src/yui_dev.js
 /***********************************************************************
 *          ui_dev.js
 *
-*          Development Tools
+*          Development Tools — yuno monitor / audit console
 *
-*          Copyright (c) 2024, ArtGins.
+*          Copyright (c) 2024-2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
+/***********************************************************************
+*          Traffic model (bounded ring buffer)
+*
+*  Every inter-event message is kept as a lightweight record so view
+*  and filter changes re-render instantly from memory instead of
+*  losing history. Reopening the window repaints the buffer.
+***********************************************************************/
+var TRAFFIC_MAX = 600;
+var PERIODIC_THRESHOLD = 5;
+var PERIODIC_RE = /PERIODIC|TIMEOUT|HEARTBEAT|PING/i;
+var TRAFFIC_LOG = [];
+var TRAFFIC_COUNTS = /* @__PURE__ */ new Map();
+var SEARCH_TEXT = "";
+var TRAFFIC_TS_FIELDS = {
+	"__t__": 1,
+	"__tm__": 1,
+	"tm": 1,
+	"t": 1,
+	"from_t": 1,
+	"to_t": 1,
+	"from_tm": 1,
+	"to_tm": 1,
+	"time": 1
+};
+var TRACE_DEFS = [
+	[
+		"trace_automata",
+		"Automata",
+		trace_automata
+	],
+	[
+		"trace_creation",
+		"Creation",
+		trace_creation
+	],
+	[
+		"trace_start_stop",
+		"Start/Stop",
+		trace_start_stop
+	],
+	[
+		"trace_subscriptions",
+		"Subscriptions",
+		trace_subscriptions
+	],
+	[
+		"trace_i18n",
+		"I18n",
+		trace_i18n
+	],
+	[
+		"trace_traffic",
+		"Traffic",
+		trace_traffic
+	],
+	[
+		"no_poll",
+		"No Poll",
+		set_no_poll
+	]
+];
+/******************************
+*      Small helpers
+******************************/
+/************************************************************
+*  hh:mm:ss.SSS wall-clock of the moment a message arrives.
+************************************************************/
+function traffic_now() {
+	let now = /* @__PURE__ */ new Date();
+	let pad = (num, len) => ("000" + num).slice(len * -1);
+	return `${pad(now.getHours(), 2)}:${pad(now.getMinutes(), 2)}:${pad(now.getSeconds(), 2)}.${pad(now.getMilliseconds(), 3)}`;
+}
+/************************************************************
+*  Human byte size (B / KB / MB).
+************************************************************/
+function traffic_size(n) {
+	n = Number(n) || 0;
+	if (n < 1024) return n + " B";
+	if (n < 1024 * 1024) return (n / 1024).toFixed(1) + " KB";
+	return (n / (1024 * 1024)).toFixed(1) + " MB";
+}
+/************************************************************
+*  Seconds-since-epoch → ISO string, or null if not a plausible
+*  timestamp (guards against 0 / NaN / out-of-range values).
+************************************************************/
+function traffic_iso(value) {
+	let n = Number(value);
+	if (!isFinite(n) || n <= 0) return null;
+	try {
+		return (/* @__PURE__ */ new Date(n * 1e3)).toISOString();
+	} catch (e) {
+		return null;
+	}
+}
+/************************************************************
+*  Clip a string for inline display (full text kept elsewhere).
+************************************************************/
+function traffic_clip(s, n) {
+	s = String(s);
+	return s.length > n ? s.slice(0, n) + "…" : s;
+}
+/************************************************************
+*  A scalar rendered as a short inline token (for summaries).
+************************************************************/
+function traffic_scalar_text(v) {
+	if (v === null) return "null";
+	if (typeof v === "string") return traffic_clip(v, 40);
+	return String(v);
+}
+function dir_class(dir) {
+	return dir === 2 ? "dir-in" : dir === 3 ? "dir-err" : "dir-out";
+}
+function dir_arrow(dir) {
+	return dir === 2 ? "⇠" : dir === 3 ? "⚠" : "⇢";
+}
+/******************************
+*      Preferences
+******************************/
+function dev_num(key, def) {
+	return Number(kw_get_local_storage_value(key, def === void 0 ? 0 : def, false));
+}
+function dev_view() {
+	let v = kw_get_local_storage_value("dev_view_mode", "detailed", false);
+	return v === "compact" || v === "name" || v === "full" ? v : "detailed";
+}
+function dev_hide_periodic() {
+	return dev_num("dev_hide_periodic", 0) ? true : false;
+}
+function dev_muted() {
+	let a = kw_get_local_storage_value("dev_muted_events", [], false);
+	if (!Array.isArray(a)) a = [];
+	return new Set(a);
+}
+function dev_set_muted(set) {
+	kw_set_local_storage_value("dev_muted_events", Array.from(set));
+}
+function set_view(v) {
+	kw_set_local_storage_value("dev_view_mode", v);
+	rerender_all();
+	refresh_dev_chrome();
+}
+function toggle_pref(key, def) {
+	kw_set_local_storage_value(key, dev_num(key, def) ? 0 : 1);
+	rerender_all();
+	refresh_dev_chrome();
+}
+function mute_signature(sig) {
+	let set = dev_muted();
+	set.add(sig);
+	dev_set_muted(set);
+	rerender_all();
+	refresh_dev_chrome();
+}
+function unmute_signature(sig) {
+	let set = dev_muted();
+	set.delete(sig);
+	dev_set_muted(set);
+	rerender_all();
+	refresh_dev_chrome();
+}
+/******************************
+*      Filtering
+******************************/
+function traffic_signature(event, command) {
+	return command ? event + " · " + command : event;
+}
+function traffic_is_periodic(sig) {
+	if (PERIODIC_RE.test(sig)) return true;
+	return (TRAFFIC_COUNTS.get(sig) || 0) >= PERIODIC_THRESHOLD;
+}
+function build_filter_ctx() {
+	return {
+		out: dev_num("dev_filter_out", 1),
+		inc: dev_num("dev_filter_in", 1),
+		err: dev_num("dev_filter_err", 1),
+		muted: dev_muted(),
+		hide_periodic: dev_hide_periodic(),
+		search: SEARCH_TEXT
+	};
+}
+function entry_hidden(e, ctx) {
+	if (e.kind === "log") return !!(ctx.search && e.hay.indexOf(ctx.search) < 0);
+	if (e.dir === 1 && !ctx.out) return true;
+	if (e.dir === 2 && !ctx.inc) return true;
+	if (e.dir === 3 && !ctx.err) return true;
+	if (ctx.muted.has(e.sig)) return true;
+	if (ctx.hide_periodic && traffic_is_periodic(e.sig)) return true;
+	if (ctx.search && e.hay.indexOf(ctx.search) < 0) return true;
+	return false;
+}
+/******************************
+*      Style
+******************************/
+/************************************************************
+*  Inject the monitor stylesheet once. Theme-aware via
+*  <html data-theme>; direction-coloured (out / in / error).
+************************************************************/
+function ensure_dev_style() {
+	if (document.getElementById("yui-dev-style")) return;
+	let css = `
+/* -------- layout -------- */
+.YDEV_BODY {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    box-sizing: border-box;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+.YDEV_LOG { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 10px; }
+.YDEV_MUTED {
+    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
+    padding: 4px 10px; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 12px;
+}
+.YDEV_MUTED:empty { display: none; }
+.YDEV_STATS {
+    flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 14px;
+    padding: 6px 10px; border-top: 1px solid rgba(0,0,0,0.1);
+    background: rgba(0,0,0,0.03);
+    font-family: "DejaVu Sans Mono", monospace; font-size: 11px;
+    opacity: 0.9; font-variant-numeric: tabular-nums;
+}
+/* -------- control bar -------- */
+.YDEV_BAR {
+    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
+    padding: 8px 10px; border-bottom: 1px solid rgba(0,0,0,0.1);
+    background: rgba(0,0,0,0.03);
+}
+.YDEV_GROUP { display: inline-flex; align-items: center; gap: 5px; }
+.YDEV_LABEL {
+    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
+    opacity: 0.5; align-self: center;
+}
+.YDEV_SEP { width: 1px; align-self: stretch; background: rgba(0,0,0,0.12); }
+.YDEV_CHIP {
+    font: inherit; font-size: 12px; line-height: 1.4; padding: 3px 9px;
+    border: 1px solid rgba(0,0,0,0.18); border-radius: 999px;
+    background: transparent; color: inherit; cursor: pointer;
+    display: inline-flex; align-items: center; gap: 5px;
+}
+.YDEV_CHIP:hover { border-color: currentColor; }
+.YDEV_CHIP.is-active { background: rgba(37,99,235,0.14); border-color: #2563eb; color: #2563eb; font-weight: 600; }
+.YDEV_CHIP.s-out.is-active { background: rgba(37,99,235,0.16); border-color: #2563eb; color: #2563eb; }
+.YDEV_CHIP.s-in.is-active  { background: rgba(5,150,105,0.16); border-color: #059669; color: #059669; }
+.YDEV_CHIP.s-err.is-active { background: rgba(220,38,38,0.16); border-color: #dc2626; color: #dc2626; }
+.YDEV_CHIP[data-dir]:not(.is-active) { opacity: 0.4; text-decoration: line-through; }
+.YDEV_CHIP[data-toggle="periodic"].is-active { background: rgba(217,119,6,0.16); border-color: #d97706; color: #b45309; font-weight: 600; }
+.YDEV_SEG { display: inline-flex; border: 1px solid rgba(0,0,0,0.18); border-radius: 7px; overflow: hidden; }
+.YDEV_SEG_BTN {
+    font: inherit; font-size: 12px; padding: 4px 10px; border: 0;
+    border-right: 1px solid rgba(0,0,0,0.12);
+    background: transparent; color: inherit; cursor: pointer;
+}
+.YDEV_SEG_BTN:last-child { border-right: 0; }
+.YDEV_SEG_BTN.is-active { background: #2563eb; color: #fff; font-weight: 600; }
+.YDEV_SEARCH {
+    font: inherit; font-size: 12px; padding: 4px 9px; min-width: 170px;
+    border: 1px solid rgba(0,0,0,0.18); border-radius: 7px;
+    background: transparent; color: inherit;
+}
+.YDEV_MUTED_CHIP {
+    font: inherit; font-family: "DejaVu Sans Mono", monospace; font-size: 12px;
+    display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px;
+    border: 1px solid rgba(217,119,6,0.5); border-radius: 999px;
+    background: rgba(217,119,6,0.12); color: #b45309; cursor: pointer;
+}
+.YDEV_STAT.s-out { color: #2563eb; } .YDEV_STAT.s-in { color: #059669; } .YDEV_STAT.s-err { color: #dc2626; }
+.YDEV_TITLE { display: flex; align-items: baseline; gap: 8px; }
+.YDEV_TITLE_MAIN { font-weight: 700; }
+.YDEV_TITLE_SUB { opacity: 0.7; font-size: 12px; }
+/* -------- entries (shared) -------- */
+.TRAFFIC_ENTRY, .TRAFFIC_LINE, .TRAFFIC_NAME {
+    border-left: 3px solid #94a3b8; border-radius: 3px;
+    font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 13px;
+    background: rgba(0,0,0,0.02);
+}
+.TRAFFIC_ENTRY { margin: 6px 0; padding: 4px 8px; line-height: 1.55; }
+.TRAFFIC_LINE  { margin: 2px 0; padding: 2px 8px; display: flex; align-items: baseline; gap: 8px; }
+.TRAFFIC_NAME  { margin: 1px 0; padding: 1px 8px; display: flex; align-items: baseline; gap: 8px; background: transparent; }
+.TRAFFIC_ENTRY.dir-out, .TRAFFIC_LINE.dir-out, .TRAFFIC_NAME.dir-out { border-left-color: #2563eb; }
+.TRAFFIC_ENTRY.dir-in,  .TRAFFIC_LINE.dir-in,  .TRAFFIC_NAME.dir-in  { border-left-color: #059669; }
+.TRAFFIC_ENTRY.dir-err, .TRAFFIC_LINE.dir-err, .TRAFFIC_NAME.dir-err { border-left-color: #dc2626; }
+.TRAFFIC_HEADER { display: flex; align-items: baseline; gap: 8px; }
+.TRAFFIC_ARROW { font-weight: 700; }
+.TRAFFIC_EVENT { font-weight: 700; }
+.TRAFFIC_CMD { opacity: 0.75; font-weight: 600; }
+.dir-out .TRAFFIC_ARROW, .dir-out .TRAFFIC_EVENT { color: #2563eb; }
+.dir-in  .TRAFFIC_ARROW, .dir-in  .TRAFFIC_EVENT { color: #059669; }
+.dir-err .TRAFFIC_ARROW, .dir-err .TRAFFIC_EVENT { color: #dc2626; }
+.TRAFFIC_SUMMARY { opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
+.TRAFFIC_META { margin-left: auto; opacity: 0.6; font-size: 11px; white-space: nowrap; }
+.TRAFFIC_MUTE { border: 0; background: transparent; color: inherit; cursor: pointer; opacity: 0; font-size: 12px; padding: 0 2px; flex: 0 0 auto; }
+.TRAFFIC_ENTRY:hover .TRAFFIC_MUTE, .TRAFFIC_LINE:hover .TRAFFIC_MUTE, .TRAFFIC_NAME:hover .TRAFFIC_MUTE { opacity: 0.5; }
+.TRAFFIC_MUTE:hover { opacity: 1 !important; color: #d97706; }
+.TRAFFIC_KW { margin: 2px 0 0 16px; }
+.TRAFFIC_FULL { margin: 4px 0 0 16px; padding: 6px 8px; font-family: monospace; font-size: 11px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
+.TRAFFIC_ROW { display: flex; gap: 6px; align-items: baseline; }
+.TRAFFIC_BULLET { opacity: 0.45; flex: 0 0 auto; }
+.TRAFFIC_KEY { opacity: 0.85; flex: 0 0 auto; }
+.TRAFFIC_VAL { word-break: break-word; }
+.TRAFFIC_VAL.t-num  { color: #0891b2; }
+.TRAFFIC_VAL.t-bool { color: #9333ea; }
+.TRAFFIC_VAL.t-null { color: #9333ea; font-style: italic; }
+.TRAFFIC_VAL.t-empty { opacity: 0.5; }
+.TRAFFIC_TS { opacity: 0.6; margin-left: 8px; }
+details.TRAFFIC_NEST > summary { cursor: pointer; list-style: none; display: flex; gap: 6px; align-items: baseline; }
+details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
+.TRAFFIC_NEST_KEY { opacity: 0.85; }
+.TRAFFIC_NEST_HINT { opacity: 0.5; margin-left: 4px; }
+.YDEV_EMPTY { opacity: 0.5; font-size: 12px; padding: 18px 10px; text-align: center; }
+/* -------- mirrored console logs (error/warning/info/debug/msg; the automata trace shows as debug) -------- */
+.YDEV_LOGROW { display: flex; align-items: baseline; gap: 8px; margin: 1px 0; padding: 2px 8px; border-left: 3px solid #94a3b8; border-radius: 3px; font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 12px; background: rgba(0,0,0,0.015); }
+.YDEV_LOG_LVL { flex: 0 0 auto; text-transform: uppercase; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; opacity: 0.8; min-width: 48px; }
+.YDEV_LOG_TXT { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; word-break: break-word; opacity: 0.9; }
+.YDEV_LOG_error   { border-left-color: #dc2626; } .YDEV_LOG_error   .YDEV_LOG_LVL { color: #dc2626; }
+.YDEV_LOG_warning { border-left-color: #d97706; } .YDEV_LOG_warning .YDEV_LOG_LVL { color: #d97706; }
+.YDEV_LOG_info    { border-left-color: #2563eb; } .YDEV_LOG_info    .YDEV_LOG_LVL { color: #2563eb; }
+.YDEV_LOG_msg     { border-left-color: #0891b2; } .YDEV_LOG_msg     .YDEV_LOG_LVL { color: #0891b2; }
+.YDEV_LOG_debug   { border-left-color: #94a3b8; } .YDEV_LOG_debug   .YDEV_LOG_LVL { color: #94a3b8; } .YDEV_LOG_debug .YDEV_LOG_TXT { opacity: 0.72; }
+.YDEV_LOG_json    { border-left-color: #9333ea; align-items: flex-start; } .YDEV_LOG_json .YDEV_LOG_LVL { color: #9333ea; } .YDEV_LOG_json .YDEV_LOG_TXT { font-size: 11px; line-height: 1.35; opacity: 0.8; }
+/* -------- dark theme -------- */
+:root[data-theme="dark"] .TRAFFIC_FULL { background: rgba(255,255,255,0.05); }
+:root[data-theme="dark"] .YDEV_BAR, :root[data-theme="dark"] .YDEV_STATS { background: rgba(255,255,255,0.04); }
+:root[data-theme="dark"] .YDEV_SEP { background: rgba(255,255,255,0.14); }
+:root[data-theme="dark"] .YDEV_CHIP, :root[data-theme="dark"] .YDEV_SEG, :root[data-theme="dark"] .YDEV_SEARCH { border-color: rgba(255,255,255,0.2); }
+:root[data-theme="dark"] .TRAFFIC_ENTRY, :root[data-theme="dark"] .TRAFFIC_LINE { background: rgba(255,255,255,0.03); }
+:root[data-theme="dark"] .TRAFFIC_ENTRY.dir-out, :root[data-theme="dark"] .TRAFFIC_LINE.dir-out, :root[data-theme="dark"] .TRAFFIC_NAME.dir-out { border-left-color: #60a5fa; }
+:root[data-theme="dark"] .TRAFFIC_ENTRY.dir-in,  :root[data-theme="dark"] .TRAFFIC_LINE.dir-in,  :root[data-theme="dark"] .TRAFFIC_NAME.dir-in  { border-left-color: #34d399; }
+:root[data-theme="dark"] .TRAFFIC_ENTRY.dir-err, :root[data-theme="dark"] .TRAFFIC_LINE.dir-err, :root[data-theme="dark"] .TRAFFIC_NAME.dir-err { border-left-color: #f87171; }
+:root[data-theme="dark"] .dir-out .TRAFFIC_ARROW, :root[data-theme="dark"] .dir-out .TRAFFIC_EVENT { color: #60a5fa; }
+:root[data-theme="dark"] .dir-in .TRAFFIC_ARROW,  :root[data-theme="dark"] .dir-in .TRAFFIC_EVENT { color: #34d399; }
+:root[data-theme="dark"] .dir-err .TRAFFIC_ARROW, :root[data-theme="dark"] .dir-err .TRAFFIC_EVENT { color: #f87171; }
+:root[data-theme="dark"] .YDEV_STAT.s-out { color: #60a5fa; } :root[data-theme="dark"] .YDEV_STAT.s-in { color: #34d399; } :root[data-theme="dark"] .YDEV_STAT.s-err { color: #f87171; }
+:root[data-theme="dark"] .TRAFFIC_VAL.t-num { color: #22d3ee; }
+:root[data-theme="dark"] .TRAFFIC_VAL.t-bool, :root[data-theme="dark"] .TRAFFIC_VAL.t-null { color: #c084fc; }
+:root[data-theme="dark"] .YDEV_CHIP.is-active { background: rgba(96,165,250,0.2); border-color: #60a5fa; color: #93c5fd; }
+:root[data-theme="dark"] .YDEV_SEG_BTN.is-active { background: #2563eb; color: #fff; }
+:root[data-theme="dark"] .YDEV_CHIP[data-toggle="periodic"].is-active { background: rgba(217,119,6,0.24); border-color: #f59e0b; color: #fbbf24; }
+:root[data-theme="dark"] .YDEV_MUTED_CHIP { border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.16); color: #fbbf24; }
+`;
+	let $style = document.createElement("style");
+	$style.id = "yui-dev-style";
+	$style.textContent = css;
+	document.head.appendChild($style);
+}
+/******************************
+*      kw bullet rendering
+******************************/
 /************************************************************
+*  One scalar field as a bullet row: `• key: value`.
+*  Type-coloured; long strings clipped (full text on hover);
+*  timestamp fields get an ISO annotation.
+************************************************************/
+function traffic_scalar_row(key, value) {
+	let cls;
+	let text;
+	if (value === null) {
+		cls = "t-null";
+		text = "null";
+	} else if (typeof value === "boolean") {
+		cls = "t-bool";
+		text = value ? "true" : "false";
+	} else if (typeof value === "number") {
+		cls = "t-num";
+		text = String(value);
+	} else {
+		cls = "t-str";
+		text = String(value);
+	}
+	let full = text;
+	if (text.length > 200) text = text.slice(0, 200) + "…";
+	let val_children = [[
+		"span",
+		{
+			class: "TRAFFIC_VAL " + cls,
+			title: full
+		},
+		text
+	]];
+	if (key in TRAFFIC_TS_FIELDS && typeof value === "number") {
+		let iso = traffic_iso(value);
+		if (iso) val_children.push([
+			"span",
+			{ class: "TRAFFIC_TS" },
+			iso
+		]);
+	}
+	return [
+		"div",
+		{ class: "TRAFFIC_ROW" },
+		[
+			[
+				"span",
+				{ class: "TRAFFIC_BULLET" },
+				"•"
+			],
+			[
+				"span",
+				{ class: "TRAFFIC_KEY" },
+				key + ":"
+			],
+			[
+				"span",
+				{},
+				val_children
+			]
+		]
+	];
+}
+/************************************************************
+*  One field of any type. Scalars → a bullet row; objects and
+*  arrays → a collapsed <details> so metadata / nested payloads
+*  stay folded. Empty containers render inline.
+************************************************************/
+function traffic_value_node(key, value) {
+	if (value === null || typeof value !== "object") return traffic_scalar_row(key, value);
+	let is_arr = Array.isArray(value);
+	let count = is_arr ? value.length : Object.keys(value).length;
+	if (count === 0) return [
+		"div",
+		{ class: "TRAFFIC_ROW" },
+		[
+			[
+				"span",
+				{ class: "TRAFFIC_BULLET" },
+				"•"
+			],
+			[
+				"span",
+				{ class: "TRAFFIC_KEY" },
+				key + ":"
+			],
+			[
+				"span",
+				{ class: "TRAFFIC_VAL t-empty" },
+				is_arr ? "[ ]" : "{ }"
+			]
+		]
+	];
+	let hint = is_arr ? `[${count}]` : `{${count}}`;
+	return [
+		"details",
+		{ class: "TRAFFIC_NEST" },
+		[[
+			"summary",
+			{},
+			[
+				[
+					"span",
+					{ class: "TRAFFIC_BULLET" },
+					"▸"
+				],
+				[
+					"span",
+					{ class: "TRAFFIC_NEST_KEY" },
+					key
+				],
+				[
+					"span",
+					{ class: "TRAFFIC_NEST_HINT" },
+					hint
+				]
+			]
+		], [
+			"div",
+			{ class: "TRAFFIC_KW" },
+			traffic_bullets(value)
+		]]
+	];
+}
+/************************************************************
+*  A whole object/array → an array of bullet nodes.
+************************************************************/
+function traffic_bullets(obj) {
+	let out = [];
+	if (Array.isArray(obj)) for (let i = 0; i < obj.length; i++) out.push(traffic_value_node(String(i), obj[i]));
+	else for (let k of Object.keys(obj)) out.push(traffic_value_node(k, obj[k]));
+	return out;
+}
+/******************************
+*      Entry rendering (per view)
+******************************/
+function mute_button(sig) {
+	return [
+		"button",
+		{
+			class: "TRAFFIC_MUTE",
+			type: "button",
+			title: "Mute " + sig
+		},
+		"⊘",
+		{ click: (ev) => {
+			ev.stopPropagation();
+			ev.preventDefault();
+			mute_signature(sig);
+		} }
+	];
+}
+function event_spans(e) {
+	let spans = [[
+		"span",
+		{ class: "TRAFFIC_ARROW" },
+		dir_arrow(e.dir)
+	], [
+		"span",
+		{ class: "TRAFFIC_EVENT" },
+		e.event
+	]];
+	if (e.command) spans.push([
+		"span",
+		{ class: "TRAFFIC_CMD" },
+		e.command
+	]);
+	return spans;
+}
+function compact_summary(kw) {
+	if (!kw) return "";
+	let parts = [];
+	if ("result" in kw) parts.push("result=" + traffic_scalar_text(kw.result));
+	if (typeof kw.comment === "string" && kw.comment) parts.push(traffic_clip(kw.comment, 80));
+	if (!parts.length) {
+		let n = 0;
+		for (let k of Object.keys(kw)) {
+			if (k === "command") continue;
+			let v = kw[k];
+			if (v === null || typeof v !== "object") {
+				parts.push(k + "=" + traffic_scalar_text(v));
+				if (++n >= 3) break;
+			}
+		}
+	}
+	return traffic_clip(parts.join("  ·  "), 140);
+}
+function render_detailed(e) {
+	let head = event_spans(e);
+	head.push(mute_button(e.sig));
+	head.push([
+		"span",
+		{ class: "TRAFFIC_META" },
+		`${traffic_size(e.size)} · ${e.ts}`
+	]);
+	let children = [[
+		"div",
+		{ class: "TRAFFIC_HEADER" },
+		head
+	]];
+	let kw = e.kw;
+	if (kw && Object.keys(kw).length > 0) children.push([
+		"div",
+		{ class: "TRAFFIC_KW" },
+		traffic_bullets(kw)
+	]);
+	else if (!kw) children.push([
+		"div",
+		{ class: "TRAFFIC_KW" },
+		traffic_bullets(e.jn)
+	]);
+	return createElement2([
+		"div",
+		{
+			class: "TRAFFIC_ENTRY " + dir_class(e.dir),
+			title: e.title
+		},
+		children
+	]);
+}
+function full_show(key) {
+	return !!dev_num(key, key === "dev_full_data" ? 1 : 0);
+}
+function full_sections(payload) {
+	if (!payload || typeof payload !== "object" || Array.isArray(payload)) return payload;
+	let show_schema = full_show("dev_full_schema");
+	let show_data = full_show("dev_full_data");
+	let show_meta = full_show("dev_full_meta");
+	let out = {};
+	for (let k of Object.keys(payload)) {
+		if (k === "schema") {
+			if (show_schema) out[k] = payload[k];
+			continue;
+		}
+		if (k === "data") {
+			if (show_data) out[k] = payload[k];
+			continue;
+		}
+		if (/^__.*__$/.test(k)) {
+			if (show_meta) out[k] = payload[k];
+			continue;
+		}
+		out[k] = payload[k];
+	}
+	return out;
+}
+function render_full(e) {
+	let head = event_spans(e);
+	head.push(mute_button(e.sig));
+	head.push([
+		"span",
+		{ class: "TRAFFIC_META" },
+		`${traffic_size(e.size)} · ${e.ts}`
+	]);
+	let payload = full_sections(e.kw ? e.kw : e.jn);
+	let text;
+	try {
+		text = JSON.stringify(payload, null, 2);
+	} catch (err) {
+		text = String(payload);
+	}
+	let children = [[
+		"div",
+		{ class: "TRAFFIC_HEADER" },
+		head
+	], [
+		"pre",
+		{ class: "TRAFFIC_FULL" },
+		text
+	]];
+	return createElement2([
+		"div",
+		{
+			class: "TRAFFIC_ENTRY " + dir_class(e.dir),
+			title: e.title
+		},
+		children
+	]);
+}
+function render_compact(e) {
+	let kids = event_spans(e);
+	kids.push([
+		"span",
+		{ class: "TRAFFIC_SUMMARY" },
+		compact_summary(e.kw)
+	]);
+	kids.push(mute_button(e.sig));
+	kids.push([
+		"span",
+		{ class: "TRAFFIC_META" },
+		`${traffic_size(e.size)} · ${e.ts}`
+	]);
+	return createElement2([
+		"div",
+		{
+			class: "TRAFFIC_LINE " + dir_class(e.dir),
+			title: e.title
+		},
+		kids
+	]);
+}
+function render_name(e) {
+	let kids = event_spans(e);
+	kids.push(mute_button(e.sig));
+	kids.push([
+		"span",
+		{ class: "TRAFFIC_META" },
+		e.ts
+	]);
+	return createElement2([
+		"div",
+		{
+			class: "TRAFFIC_NAME " + dir_class(e.dir),
+			title: e.title
+		},
+		kids
+	]);
+}
+function render_log(e) {
+	return createElement2([
+		"div",
+		{
+			class: "YDEV_LOGROW YDEV_LOG_" + e.level,
+			title: e.level
+		},
+		[
+			[
+				"span",
+				{ class: "YDEV_LOG_LVL" },
+				e.level
+			],
+			[
+				"span",
+				{ class: "YDEV_LOG_TXT" },
+				e.text
+			],
+			[
+				"span",
+				{ class: "TRAFFIC_META" },
+				e.ts
+			]
+		]
+	]);
+}
+function render_entry(e) {
+	if (e.kind === "log") return render_log(e);
+	let view = dev_view();
+	if (view === "full") return render_full(e);
+	if (view === "compact") return render_compact(e);
+	if (view === "name") return render_name(e);
+	return render_detailed(e);
+}
+/******************************
+*      Log painting
+******************************/
+function clear_traffic() {
+	TRAFFIC_LOG.length = 0;
+	TRAFFIC_COUNTS.clear();
+	let logger = document.getElementById("developer-traffic-logger");
+	if (logger) logger.replaceChildren();
+	update_stats();
+}
+function rerender_all() {
+	let logger = document.getElementById("developer-traffic-logger");
+	if (!logger) return;
+	ensure_dev_style();
+	let ctx = build_filter_ctx();
+	let frag = document.createDocumentFragment();
+	let shown = 0;
+	for (let e of TRAFFIC_LOG) {
+		e.$node = null;
+		if (!entry_hidden(e, ctx)) {
+			let node = render_entry(e);
+			e.$node = node;
+			frag.appendChild(node);
+			shown++;
+		}
+	}
+	logger.replaceChildren(frag);
+	if (shown === 0) {
+		let $empty = document.createElement("div");
+		$empty.className = "YDEV_EMPTY";
+		$empty.textContent = TRAFFIC_LOG.length ? "No messages match the current filters." : "Waiting for activity — console logs and errors show automatically; enable Traffic or Automata for more.";
+		logger.appendChild($empty);
+	}
+	logger.scrollTop = logger.scrollHeight;
+	update_stats();
+}
+function update_stats() {
+	let $s = document.getElementById("ydev-stats");
+	if (!$s) return;
+	let ctx = build_filter_ctx();
+	let total = TRAFFIC_LOG.length;
+	let shown = 0, out = 0, inc = 0, err = 0, hidden = 0, bytes = 0;
+	for (let e of TRAFFIC_LOG) {
+		bytes += e.size || 0;
+		if (e.dir === 1) out++;
+		else if (e.dir === 2) inc++;
+		else if (e.dir === 3) err++;
+		if (entry_hidden(e, ctx)) hidden++;
+		else shown++;
+	}
+	$s.replaceChildren();
+	[
+		[`${shown}/${total} shown`, ""],
+		[`⇢ ${out}`, "s-out"],
+		[`⇠ ${inc}`, "s-in"],
+		[`⚠ ${err}`, "s-err"],
+		[`⊘ ${hidden} hidden`, ""],
+		[`${traffic_size(bytes)}`, ""]
+	].forEach(([text, cls]) => {
+		let d = document.createElement("span");
+		d.className = "YDEV_STAT" + (cls ? " " + cls : "");
+		d.textContent = text;
+		$s.appendChild(d);
+	});
+}
+/************************************************************
+*  Append one inter-event message. Kept in a bounded buffer so
+*  view/filter switches repaint from memory. Shared by the legacy
+*  C_YUI_WINDOW (setup_dev) and the modal (build_dev_panel).
 *
+*  direction: 1 outgoing (⇢), 2 incoming (⇠), 3 error (⚠).
+*  With no logger mounted, fall back to a console dump.
 ************************************************************/
 function info_traffic(title, msg, direction, size) {
-	if (!document.getElementById("developer-traffic-logger")) {
+	let logger = document.getElementById("developer-traffic-logger");
+	if (!logger) {
 		trace_json(msg);
 		return;
 	}
 	if (!size) size = 0;
-	let jn_msg;
+	let jn;
 	try {
-		if (is_string(msg)) jn_msg = JSON.parse(msg);
-		else jn_msg = JSON.parse(JSON.stringify(msg));
+		jn = is_string(msg) ? JSON.parse(msg) : JSON.parse(JSON.stringify(msg));
 	} catch (e) {
 		return;
 	}
-	let content = {
-		text: void 0,
-		json: jn_msg
+	ensure_dev_style();
+	let event = jn && jn.event ? String(jn.event) : "(no event)";
+	let kw = jn && jn.kw && typeof jn.kw === "object" ? jn.kw : null;
+	let command = kw && typeof kw.command === "string" ? kw.command : "";
+	let sig = traffic_signature(event, command);
+	let hay = "";
+	try {
+		hay = (event + " " + command + " " + (kw ? JSON.stringify(kw) : "")).toLowerCase();
+	} catch (e) {
+		hay = (event + " " + command).toLowerCase();
+	}
+	let entry = {
+		title: title || "",
+		event,
+		command,
+		sig,
+		dir: direction,
+		size,
+		ts: traffic_now(),
+		kw,
+		jn,
+		hay,
+		$node: null
 	};
-	function formatCurrentTime() {
-		let now = /* @__PURE__ */ new Date();
-		let pad = (num, size) => ("000" + num).slice(size * -1);
-		return `${pad(now.getHours(), 2)}:${pad(now.getMinutes(), 2)}:${pad(now.getSeconds(), 2)} .${pad(now.getMilliseconds(), 4)}`;
-	}
-	let element = document.getElementById("developer-traffic-logger");
-	if (element) {
-		let style = "background-color:#3883FA;";
-		if (direction === 2) style += "color:yellow;";
-		else if (direction === 3) style += "color:red;";
-		else style += "color:white;";
-		let $item = createElement2([
-			"div",
-			{ class: "mt-4" },
-			[[
-				"div",
-				{
-					class: "is-flex with-border is-justify-content-space-between",
-					style
-				},
-				[
-					[
-						"div",
-						{ class: "p-1" },
-						title
-					],
-					[
-						"div",
-						{ class: "p-1" },
-						`(${size} bytes)`
-					],
-					[
-						"div",
-						{ class: "p-1" },
-						formatCurrentTime()
-					]
-				]
-			], [
-				"div",
-				{ class: "x-jsoneditor jse-theme-dark" },
-				[]
-			]]
-		]);
-		let $target = $item.querySelector(".x-jsoneditor");
-		let font_family = "DejaVu Sans Mono, monospace, consolas, monaco";
-		$target.style.setProperty("--jse-font-size-mono", "15px");
-		$target.style.setProperty("--jse-font-family-mono", font_family);
-		document.getElementById("developer-traffic-logger").appendChild($item);
-		new JSONEditor({
-			target: $target,
-			props: {
-				content,
-				readOnly: true,
-				timestampTag: function({ field, value, path }) {
-					if (field === "__t__" || field === "__tm__" || field === "tm" || field === "from_t" || field === "to_t" || field === "t" || field === "from_tm" || field === "to_tm" || field === "time") return true;
-					return false;
-				},
-				timestampFormat: function({ field, value, path }) {
-					if (field === "__t__" || field === "__tm__" || field === "tm" || field === "from_t" || field === "to_t" || field === "t" || field === "from_tm" || field === "to_tm" || field === "time") return (/* @__PURE__ */ new Date(value * 1e3)).toISOString();
-					return null;
-				}
-			}
-		}).expand((path) => path.length < 2);
-		element.scrollIntoView({ block: "end" });
+	TRAFFIC_LOG.push(entry);
+	TRAFFIC_COUNTS.set(sig, (TRAFFIC_COUNTS.get(sig) || 0) + 1);
+	let crossed = dev_hide_periodic() && TRAFFIC_COUNTS.get(sig) === PERIODIC_THRESHOLD;
+	if (TRAFFIC_LOG.length > TRAFFIC_MAX) {
+		let old = TRAFFIC_LOG.shift();
+		let c = (TRAFFIC_COUNTS.get(old.sig) || 0) - 1;
+		if (c <= 0) TRAFFIC_COUNTS.delete(old.sig);
+		else TRAFFIC_COUNTS.set(old.sig, c);
+		if (old.$node && old.$node.parentNode) old.$node.parentNode.removeChild(old.$node);
+	}
+	if (crossed) rerender_all();
+	else if (!entry_hidden(entry, build_filter_ctx())) {
+		let node = render_entry(entry);
+		entry.$node = node;
+		let ph = logger.querySelector(".YDEV_EMPTY");
+		if (ph) ph.remove();
+		logger.appendChild(node);
+		node.scrollIntoView({ block: "end" });
+	}
+	update_stats();
+}
+var __in_info_log__ = false;
+/************************************************************
+*  Mirror one framework log line into the monitor, alongside the
+*  inter-event traffic. level ∈ error|warning|info|debug|msg — the automata
+*  (FSM) trace arrives here too, as `debug`. No-op while the window is closed
+*  (the line already went to the browser console).
+************************************************************/
+function info_log(level, msg, hora) {
+	if (__in_info_log__) return;
+	let logger = document.getElementById("developer-traffic-logger");
+	if (!logger) return;
+	__in_info_log__ = true;
+	try {
+		ensure_dev_style();
+		let lvl = level || "debug";
+		let text;
+		if (lvl === "json") {
+			try {
+				text = JSON.stringify(msg, null, 2);
+			} catch (e) {
+				text = String(msg);
+			}
+			if (text.length > 4e3) text = text.slice(0, 4e3) + "\n…(truncated)";
+		} else text = is_string(msg) ? msg : String(msg);
+		let entry = {
+			kind: "log",
+			level: lvl,
+			text,
+			dir: 0,
+			size: 0,
+			ts: traffic_now(),
+			sig: "log:" + lvl,
+			hay: (lvl + " " + text).toLowerCase(),
+			$node: null
+		};
+		TRAFFIC_LOG.push(entry);
+		if (TRAFFIC_LOG.length > TRAFFIC_MAX) {
+			let old = TRAFFIC_LOG.shift();
+			if (old.kind !== "log") {
+				let c = (TRAFFIC_COUNTS.get(old.sig) || 0) - 1;
+				if (c <= 0) TRAFFIC_COUNTS.delete(old.sig);
+				else TRAFFIC_COUNTS.set(old.sig, c);
+			}
+			if (old.$node && old.$node.parentNode) old.$node.parentNode.removeChild(old.$node);
+		}
+		if (!entry_hidden(entry, build_filter_ctx())) {
+			let node = render_entry(entry);
+			entry.$node = node;
+			let ph = logger.querySelector(".YDEV_EMPTY");
+			if (ph) ph.remove();
+			logger.appendChild(node);
+			node.scrollIntoView({ block: "end" });
+		}
+		update_stats();
+	} finally {
+		__in_info_log__ = false;
 	}
 }
-/************************************************************
-*
-************************************************************/
+/******************************
+*      Trace toggles
+******************************/
 function trace_traffic() {
-	let v = kw_get_local_storage_value("trace_traffic");
-	v = Number(v);
+	let v = Number(kw_get_local_storage_value("trace_traffic"));
 	if (v) {
 		gobj_write_attr(gobj_yuno(), "trace_inter_event", false);
 		v = 0;
@@ -148,108 +948,401 @@ function trace_traffic() {
 		v = 1;
 	}
 	kw_set_local_storage_value("trace_traffic", v);
-	info_user();
+	refresh_dev_chrome();
 }
-/************************************************************
-*
-************************************************************/
 function trace_automata() {
-	let v = kw_get_local_storage_value("trace_automata");
-	v = Number(v);
+	let v = Number(kw_get_local_storage_value("trace_automata"));
 	if (v === 0) v = 1;
 	else if (v === 1) v = 2;
 	else v = 0;
 	gobj_write_attr(gobj_yuno(), "tracing", v);
 	kw_set_local_storage_value("trace_automata", v);
-	info_user();
+	refresh_dev_chrome();
 }
-/************************************************************
-*
-************************************************************/
 function trace_creation() {
-	let v = kw_get_local_storage_value("trace_creation");
-	v = Number(v);
-	if (v === 0) v = 1;
-	else v = 0;
+	let v = Number(kw_get_local_storage_value("trace_creation"));
+	v = v === 0 ? 1 : 0;
 	gobj_write_attr(gobj_yuno(), "trace_creation", v);
 	kw_set_local_storage_value("trace_creation", v);
-	info_user();
+	refresh_dev_chrome();
 }
-/************************************************************
-*
-************************************************************/
 function trace_start_stop() {
-	let v = kw_get_local_storage_value("trace_start_stop");
-	v = Number(v);
-	if (v === 0) v = 1;
-	else v = 0;
+	let v = Number(kw_get_local_storage_value("trace_start_stop"));
+	v = v === 0 ? 1 : 0;
 	gobj_write_attr(gobj_yuno(), "trace_start_stop", v);
 	kw_set_local_storage_value("trace_start_stop", v);
-	info_user();
+	refresh_dev_chrome();
 }
-/************************************************************
-*
-************************************************************/
 function trace_subscriptions() {
-	let v = kw_get_local_storage_value("trace_subscriptions");
-	v = Number(v);
-	if (v === 0) v = 1;
-	else v = 0;
+	let v = Number(kw_get_local_storage_value("trace_subscriptions"));
+	v = v === 0 ? 1 : 0;
 	gobj_write_attr(gobj_yuno(), "trace_subscriptions", v);
 	kw_set_local_storage_value("trace_subscriptions", v);
-	info_user();
+	refresh_dev_chrome();
 }
-/************************************************************
-*
-************************************************************/
 function trace_i18n() {
-	let v = kw_get_local_storage_value("trace_i18n");
-	v = Number(v);
-	if (v === 0) v = 1;
-	else v = 0;
+	let v = Number(kw_get_local_storage_value("trace_i18n"));
+	v = v === 0 ? 1 : 0;
 	i18next.options.debug = v ? true : false;
 	kw_set_local_storage_value("trace_i18n", v);
-	info_user();
+	refresh_dev_chrome();
 }
-/************************************************************
-*
-************************************************************/
 function set_no_poll() {
-	let v = kw_get_local_storage_value("no_poll");
-	v = Number(v);
-	if (v) v = 0;
-	else v = 1;
+	let v = Number(kw_get_local_storage_value("no_poll"));
+	v = v ? 0 : 1;
 	gobj_write_attr(gobj_yuno(), "no_poll", v);
 	kw_set_local_storage_value("no_poll", v);
-	info_user();
+	refresh_dev_chrome();
 }
-/************************************************************
-*
-************************************************************/
-function info_user() {
-	let $info = document.getElementById("developer-window-info");
-	let traffic = Number(kw_get_local_storage_value("trace_traffic", 0, false));
-	let trace = Number(kw_get_local_storage_value("trace_automata", 0, false));
-	let creation = Number(kw_get_local_storage_value("trace_creation", 0, false));
-	let start_stop = Number(kw_get_local_storage_value("trace_start_stop", 0, false));
-	let subscriptions = Number(kw_get_local_storage_value("trace_subscriptions", 0, false));
-	let i18n = Number(kw_get_local_storage_value("trace_i18n", 0, false));
-	let no_poll = Number(kw_get_local_storage_value("no_poll", 0, false));
-	$info.replaceChildren();
-	[
-		`Automata: ${trace}`,
-		`Creation: ${creation}`,
-		`Start/Stop: ${start_stop}`,
-		`Subscriptions: ${subscriptions}`,
-		`I18n: ${i18n}`,
-		`Traffic: ${traffic}`,
-		`No poll: ${no_poll}`
-	].forEach((text) => {
-		const div = document.createElement("div");
-		div.textContent = text;
-		$info.appendChild(div);
+/******************************
+*      Chrome (controls)
+******************************/
+function refresh_dev_chrome() {
+	document.querySelectorAll(".YDEV_CHIP[data-trace]").forEach(($b) => {
+		let key = $b.getAttribute("data-trace");
+		let label = $b.getAttribute("data-label") || "";
+		let v = dev_num(key, 0);
+		$b.textContent = key === "trace_automata" && v > 0 ? label + " " + v : label;
+		$b.classList.toggle("is-active", v > 0);
+	});
+	let view = dev_view();
+	document.querySelectorAll(".YDEV_SEG_BTN[data-view]").forEach(($b) => {
+		$b.classList.toggle("is-active", $b.getAttribute("data-view") === view);
+	});
+	let $eg = document.getElementById("ydev-expand-grp");
+	if ($eg) $eg.style.display = view === "full" ? "" : "none";
+	document.querySelectorAll(".YDEV_CHIP[data-expand]").forEach(($b) => {
+		$b.classList.toggle("is-active", full_show($b.getAttribute("data-expand")));
+	});
+	document.querySelectorAll(".YDEV_CHIP[data-dir]").forEach(($b) => {
+		$b.classList.toggle("is-active", !!dev_num($b.getAttribute("data-dir"), 1));
+	});
+	document.querySelectorAll(".YDEV_CHIP[data-toggle=\"periodic\"]").forEach(($b) => {
+		$b.classList.toggle("is-active", dev_hide_periodic());
+	});
+	document.querySelectorAll(".YDEV_CHIP[data-toggle=\"automata-simple\"]").forEach(($b) => {
+		$b.classList.toggle("is-active", !!dev_num("dev_automata_simple", 0));
+	});
+	let $m = document.getElementById("ydev-muted");
+	if ($m) {
+		$m.replaceChildren();
+		let set = dev_muted();
+		if (set.size) {
+			let $lbl = document.createElement("span");
+			$lbl.className = "YDEV_LABEL";
+			$lbl.textContent = "Muted";
+			$m.appendChild($lbl);
+			set.forEach((sig) => {
+				$m.appendChild(createElement2([
+					"button",
+					{
+						class: "YDEV_MUTED_CHIP",
+						type: "button",
+						title: "Unmute"
+					},
+					"⊘ " + sig + "  ✕",
+					{ click: (ev) => {
+						ev.stopPropagation();
+						unmute_signature(sig);
+					} }
+				]));
+			});
+		}
+	}
+	update_stats();
+}
+function traffic_to_text() {
+	let ctx = build_filter_ctx();
+	let out = [];
+	for (let e of TRAFFIC_LOG) {
+		if (entry_hidden(e, ctx)) continue;
+		if (e.kind === "log") {
+			out.push(`${e.ts} ${e.level}: ${e.text}`);
+			out.push("");
+			continue;
+		}
+		let head = `${e.ts} ${dir_arrow(e.dir)} ${e.title ? "[" + e.title + "] " : ""}${e.event}${e.command ? " " + e.command : ""}`;
+		out.push(head);
+		let payload = e.kw ? e.kw : e.jn;
+		try {
+			out.push(JSON.stringify(payload, null, 2));
+		} catch (err) {
+			out.push(String(payload));
+		}
+		out.push("");
+	}
+	return out.join("\n");
+}
+function dev_copy_text(text) {
+	if (navigator.clipboard && navigator.clipboard.writeText) return navigator.clipboard.writeText(text).catch(() => {
+		dev_fallback_copy(text);
 	});
+	dev_fallback_copy(text);
+	return Promise.resolve();
+}
+function dev_fallback_copy(text) {
+	let ta = document.createElement("textarea");
+	ta.value = text;
+	ta.style.position = "fixed";
+	ta.style.left = "-9999px";
+	document.body.appendChild(ta);
+	ta.select();
+	try {
+		document.execCommand("copy");
+	} catch (e) {}
+	document.body.removeChild(ta);
 }
+function build_control_bar() {
+	let trace_chips = TRACE_DEFS.map(([key, label, fn]) => [
+		"button",
+		{
+			class: "YDEV_CHIP",
+			"data-trace": key,
+			"data-label": label,
+			type: "button"
+		},
+		label,
+		{ click: (ev) => {
+			ev.stopPropagation();
+			fn();
+		} }
+	]);
+	let simple_mach = [
+		"button",
+		{
+			class: "YDEV_CHIP",
+			"data-toggle": "automata-simple",
+			type: "button",
+			title: "Compact automata format (one line per transition, like C)"
+		},
+		"Simple mach",
+		{ click: (ev) => {
+			ev.stopPropagation();
+			let v = dev_num("dev_automata_simple", 0) ? 0 : 1;
+			kw_set_local_storage_value("dev_automata_simple", v);
+			gobj_set_trace_machine_format(v);
+			refresh_dev_chrome();
+		} }
+	];
+	let mk_view = (v, label) => [
+		"button",
+		{
+			class: "YDEV_SEG_BTN",
+			"data-view": v,
+			type: "button"
+		},
+		label,
+		{ click: (ev) => {
+			ev.stopPropagation();
+			set_view(v);
+		} }
+	];
+	let view_seg = [
+		"div",
+		{
+			class: "YDEV_SEG",
+			id: "ydev-seg"
+		},
+		[
+			mk_view("detailed", "Detailed"),
+			mk_view("full", "Expanded"),
+			mk_view("compact", "Compact"),
+			mk_view("name", "Name only")
+		]
+	];
+	let mk_expand = (key, label) => [
+		"button",
+		{
+			class: "YDEV_CHIP",
+			"data-expand": key,
+			type: "button",
+			title: "Show " + label + " in the Expanded view"
+		},
+		label,
+		{ click: (ev) => {
+			ev.stopPropagation();
+			toggle_pref(key, key === "dev_full_data" ? 1 : 0);
+		} }
+	];
+	let expand_grp = [
+		"div",
+		{
+			class: "YDEV_GROUP",
+			id: "ydev-expand-grp"
+		},
+		[
+			[
+				"span",
+				{ class: "YDEV_LABEL" },
+				"Expand"
+			],
+			mk_expand("dev_full_schema", "Schema"),
+			mk_expand("dev_full_data", "Data"),
+			mk_expand("dev_full_meta", "Metadata")
+		]
+	];
+	let mk_dir = (dir, glyph, key, title) => [
+		"button",
+		{
+			class: "YDEV_CHIP s-" + dir,
+			"data-dir": key,
+			type: "button",
+			title
+		},
+		glyph,
+		{ click: (ev) => {
+			ev.stopPropagation();
+			toggle_pref(key, 1);
+		} }
+	];
+	let dir_chips = [
+		mk_dir("out", "⇢", "dev_filter_out", "Outgoing"),
+		mk_dir("in", "⇠", "dev_filter_in", "Incoming"),
+		mk_dir("err", "⚠", "dev_filter_err", "Errors")
+	];
+	let periodic_chip = [
+		"button",
+		{
+			class: "YDEV_CHIP",
+			"data-toggle": "periodic",
+			type: "button",
+			title: "Hide recurring / periodic events (polls, heartbeats)"
+		},
+		"⊘ Periodic",
+		{ click: (ev) => {
+			ev.stopPropagation();
+			toggle_pref("dev_hide_periodic", 0);
+		} }
+	];
+	let search = [
+		"input",
+		{
+			class: "YDEV_SEARCH",
+			type: "search",
+			placeholder: "filter events / payload…",
+			"data-role": "search"
+		},
+		"",
+		{ input: (ev) => {
+			SEARCH_TEXT = String(ev.target.value || "").toLowerCase().trim();
+			rerender_all();
+		} }
+	];
+	let copy = [
+		"button",
+		{
+			class: "YDEV_CHIP",
+			type: "button",
+			title: "Copy visible traffic to clipboard"
+		},
+		"Copy",
+		{ click: (ev) => {
+			ev.stopPropagation();
+			let btn = ev.currentTarget;
+			dev_copy_text(traffic_to_text()).then(() => {
+				let prev = btn.textContent;
+				btn.textContent = "Copied";
+				setTimeout(() => {
+					btn.textContent = prev;
+				}, 1e3);
+			});
+		} }
+	];
+	let clear = [
+		"button",
+		{
+			class: "YDEV_CHIP",
+			type: "button",
+			title: "Clear captured traffic"
+		},
+		"Clear",
+		{ click: (ev) => {
+			ev.stopPropagation();
+			clear_traffic();
+		} }
+	];
+	let grp = (label, items) => [
+		"div",
+		{ class: "YDEV_GROUP" },
+		[[
+			"span",
+			{ class: "YDEV_LABEL" },
+			label
+		], ...items]
+	];
+	let sep = () => [
+		"span",
+		{ class: "YDEV_SEP" },
+		""
+	];
+	return createElement2([
+		"div",
+		{ class: "YDEV_BAR" },
+		[
+			grp("Traces", [...trace_chips, simple_mach]),
+			sep(),
+			grp("View", [view_seg]),
+			expand_grp,
+			sep(),
+			grp("Show", [...dir_chips, periodic_chip]),
+			sep(),
+			grp("Find", [search]),
+			sep(),
+			grp("Log", [copy, clear])
+		]
+	]);
+}
+function build_title_header() {
+	return createElement2([
+		"div",
+		{ class: "YDEV_TITLE" },
+		[[
+			"span",
+			{ class: "YDEV_TITLE_MAIN" },
+			"Developer"
+		], [
+			"span",
+			{ class: "YDEV_TITLE_SUB" },
+			"yuno monitor · traffic & traces"
+		]]
+	]);
+}
+function build_dev_body() {
+	return createElement2([
+		"div",
+		{ class: "YDEV_BODY" },
+		[
+			build_control_bar(),
+			[
+				"div",
+				{
+					class: "YDEV_MUTED",
+					id: "ydev-muted"
+				},
+				[]
+			],
+			[
+				"div",
+				{
+					class: "YDEV_LOG",
+					id: "developer-traffic-logger"
+				},
+				[]
+			],
+			[
+				"div",
+				{
+					class: "YDEV_STATS",
+					id: "ydev-stats"
+				},
+				[]
+			]
+		]
+	]);
+}
+/******************************
+*      Public API
+******************************/
 /************************************************************
 *  Was the developer window open last session?  setup_dev()
 *  persists open_developer_window (1 on open, 0 on close), so
@@ -263,9 +1356,6 @@ function dev_window_was_open() {
 *  Apply ALL persisted developer-trace flags to the running
 *  yuno.  Independent of the dev window — call it once at app
 *  startup so a refresh keeps logging whatever was enabled.
-*  Single source of truth for "localStorage flag → effect";
-*  setup_dev() and build_dev_panel() reuse it instead of each
-*  re-applying a partial subset.
 ************************************************************/
 function apply_dev_traces() {
 	let traffic = Number(kw_get_local_storage_value("trace_traffic", 0, false));
@@ -285,176 +1375,58 @@ function apply_dev_traces() {
 	gobj_write_attr(gobj_yuno(), "trace_subscriptions", subscriptions);
 	gobj_write_attr(gobj_yuno(), "no_poll", no_poll);
 	i18next.options.debug = i18n ? true : false;
+	gobj_set_trace_machine_format(Number(kw_get_local_storage_value("dev_automata_simple", 0, false)) ? 1 : 0);
+	set_log_callback(info_log);
 }
 /************************************************************
-*  Open the developer panel inside a non-modal C_YUI_WINDOW
+*  Open the developer monitor inside a non-modal C_YUI_WINDOW
 *  (title bar + maximize + close + resize).
 *
 *  Shell-agnostic: the legacy C_YUI_MAIN shell has a
 *  '#top-layer' stacking element; the new C_YUI_SHELL does not.
-*  We pass that element when present, otherwise null — and
-*  C_YUI_WINDOW falls back to document.body by contract.  So the
-*  new shell gets the same windowed dev panel instead of the
-*  floating build_dev_panel() box.  Legacy behaviour is
-*  unchanged (when '#top-layer' exists it is still used).
+*  We pass that element when present, otherwise null — C_YUI_WINDOW
+*  falls back to document.body by contract.
 ************************************************************/
 function setup_dev(self, show) {
-	let traffic = Number(kw_get_local_storage_value("trace_traffic", 0, false));
-	let trace = Number(kw_get_local_storage_value("trace_automata", 0, false));
-	let creation = Number(kw_get_local_storage_value("trace_creation", 0, false));
-	let start_stop = Number(kw_get_local_storage_value("trace_start_stop", 0, false));
-	let subscriptions = Number(kw_get_local_storage_value("trace_subscriptions", 0, false));
-	let i18n = Number(kw_get_local_storage_value("trace_i18n", 0, false));
-	let no_poll = Number(kw_get_local_storage_value("no_poll", 0, false));
 	if (show) {
-		const $dev_toolbar = createElement2([
-			"div",
-			{ class: "buttons" },
-			[
-				[
-					"button",
-					{ class: "button" },
-					"Automata",
-					{ click: (evt) => {
-						evt.stopPropagation();
-						trace_automata();
-					} }
-				],
-				[
-					"button",
-					{ class: "button" },
-					"Creation",
-					{ click: (evt) => {
-						evt.stopPropagation();
-						trace_creation();
-					} }
-				],
-				[
-					"button",
-					{ class: "button" },
-					"Star/Stop",
-					{ click: (evt) => {
-						evt.stopPropagation();
-						trace_start_stop();
-					} }
-				],
-				[
-					"button",
-					{ class: "button" },
-					"Subscriptions",
-					{ click: (evt) => {
-						evt.stopPropagation();
-						trace_subscriptions();
-					} }
-				],
-				[
-					"button",
-					{ class: "button" },
-					"I18n",
-					{ click: (evt) => {
-						evt.stopPropagation();
-						trace_i18n();
-					} }
-				],
-				[
-					"button",
-					{ class: "button" },
-					"Traffic",
-					{ click: (evt) => {
-						evt.stopPropagation();
-						trace_traffic();
-					} }
-				],
-				[
-					"button",
-					{ class: "button" },
-					"No Poll",
-					{ click: (evt) => {
-						evt.stopPropagation();
-						set_no_poll();
-					} }
-				],
-				[
-					"button",
-					{ class: "button" },
-					"Clear Traffic",
-					{ click: (evt) => {
-						evt.stopPropagation();
-						document.getElementById("developer-traffic-logger").innerHTML = "";
-					} }
-				]
-			]
-		]);
-		let estados = `
-        <div>Automata: ${trace}</div>
-        <div>Creation: ${creation}</div>
-        <div>Start/Stop: ${start_stop}</div>
-        <div>Subscriptions: ${subscriptions}</div>
-        <div>I18n: ${i18n}</div>
-        <div>Traffic: ${traffic}</div>
-        <div>No poll: ${no_poll}</div>`;
+		ensure_dev_style();
 		gobj_create_service("Developer-Window", "C_YUI_WINDOW", {
 			$parent: document.getElementById("top-layer") || null,
 			subscriber: null,
 			showMax: true,
 			modal: false,
-			header: $dev_toolbar,
+			header: build_title_header(),
+			body: build_dev_body(),
+			showFooter: false,
 			auto_save_size_and_position: true,
 			center: false,
-			body: "<div style=\"overflow:scroll;height:100%;\"><div id=\"developer-traffic-logger\" style=\"margin-left:10px;margin-right:10px;\"/></div>",
-			footer: `<div id="developer-window-info" class="is-flex is-justify-content-space-between" style="gap:1.25rem;white-space:nowrap;">${estados}</div>`,
+			title: "Developer",
+			icon: "yi-terminal",
+			manager: gobj_find_service("__window_manager__", false) || null,
 			on_close: function() {
 				kw_set_local_storage_value("open_developer_window", 0);
 			}
 		}, self);
 		kw_set_local_storage_value("open_developer_window", 1);
+		setTimeout(() => {
+			refresh_dev_chrome();
+			rerender_all();
+		}, 0);
 	}
 	apply_dev_traces();
 }
 /************************************************************
-*  Build the developer panel as a self-contained DOM subtree,
+*  Build the developer monitor as a self-contained DOM subtree,
 *  to be mounted by the new declarative shell via
 *  yui_shell_show_modal (no C_YUI_WINDOW, no 'top-layer').
 *
 *  Returns { $el, dispose }:
-*    - $el:     the panel element (header tabs + traffic logger
-*               body + footer counters).
+*    - $el:     the panel element (control bar + log + stats).
 *    - dispose: stops the inter-event traffic trace; call it from
 *               the modal's on_close.
-*
-*  Backwards compatible: setup_dev() (old shell, C_YUI_WINDOW) is
-*  untouched; the trace_* helpers and info_traffic are shared.
 ************************************************************/
 function build_dev_panel() {
-	let traffic = Number(kw_get_local_storage_value("trace_traffic", 0, false));
-	let trace = Number(kw_get_local_storage_value("trace_automata", 0, false));
-	let creation = Number(kw_get_local_storage_value("trace_creation", 0, false));
-	let start_stop = Number(kw_get_local_storage_value("trace_start_stop", 0, false));
-	let subscriptions = Number(kw_get_local_storage_value("trace_subscriptions", 0, false));
-	let i18n = Number(kw_get_local_storage_value("trace_i18n", 0, false));
-	let no_poll = Number(kw_get_local_storage_value("no_poll", 0, false));
-	let mk_btn = (label, fn) => [
-		"button",
-		{ class: "button is-small" },
-		label,
-		{ click: (evt) => {
-			evt.stopPropagation();
-			fn();
-		} }
-	];
-	let counters = [
-		`Automata: ${trace}`,
-		`Creation: ${creation}`,
-		`Start/Stop: ${start_stop}`,
-		`Subscriptions: ${subscriptions}`,
-		`I18n: ${i18n}`,
-		`Traffic: ${traffic}`,
-		`No poll: ${no_poll}`
-	].map((txt) => [
-		"div",
-		{ style: "padding:0 8px;" },
-		txt
-	]);
+	ensure_dev_style();
 	let dark = typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark";
 	let surface = dark ? "#1f2733" : "#ffffff";
 	let fg = dark ? "#e8eaed" : "#0f172a";
@@ -463,53 +1435,15 @@ function build_dev_panel() {
 		"div",
 		{
 			class: "yui-dev-panel",
-			style: "display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:min(72vh,720px);max-height:82vh;background:" + surface + ";color:" + fg + ";border:1px solid " + bd + ";border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.35);padding:14px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;"
+			style: "display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:min(72vh,720px);max-height:82vh;background:" + surface + ";color:" + fg + ";border:1px solid " + bd + ";border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.35);overflow:hidden;"
 		},
-		[
-			[
-				"div",
-				{
-					class: "buttons",
-					style: "flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px 0;"
-				},
-				[
-					mk_btn("Automata", trace_automata),
-					mk_btn("Creation", trace_creation),
-					mk_btn("Star/Stop", trace_start_stop),
-					mk_btn("Subscriptions", trace_subscriptions),
-					mk_btn("I18n", trace_i18n),
-					mk_btn("Traffic", trace_traffic),
-					mk_btn("No Poll", set_no_poll),
-					mk_btn("Clear Traffic", () => {
-						let l = document.getElementById("developer-traffic-logger");
-						if (l) l.innerHTML = "";
-					})
-				]
-			],
-			[
-				"div",
-				{ style: "flex:1 1 auto;min-height:0;overflow:auto;" },
-				[[
-					"div",
-					{
-						id: "developer-traffic-logger",
-						style: "margin:0 4px;"
-					},
-					[]
-				]]
-			],
-			[
-				"div",
-				{
-					id: "developer-window-info",
-					class: "is-flex is-justify-content-space-between",
-					style: "flex:0 0 auto;border-top:1px solid " + bd + ";padding-top:6px;margin-top:6px;font-size:12px;opacity:0.85;flex-wrap:nowrap;gap:1.25rem;white-space:nowrap;"
-				},
-				counters
-			]
-		]
+		[build_dev_body()]
 	]);
 	apply_dev_traces();
+	setTimeout(() => {
+		refresh_dev_chrome();
+		rerender_all();
+	}, 0);
 	let dispose = function() {
 		gobj_write_attr(gobj_yuno(), "trace_inter_event", false);
 	};
@@ -519,7 +1453,7 @@ function build_dev_panel() {
 	};
 }
 //#endregion
-//#region yui_toolbar.js
+//#region src/yui_toolbar.js
 function yui_toolbar(attrs = {}, items = []) {
 	const left_button = `
         <span class="has-text-primary is-flex"><svg viewBox="0 0 320 512" style="fill:var(--bulma-link)"><path class="fa-secondary" opacity="1" d="M41.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l160-160c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L109.3 256 246.6 393.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-160-160z"/><path class="fa-primary" d=""/></svg></span>
@@ -584,7 +1518,7 @@ function yui_toolbar(attrs = {}, items = []) {
 	return $toolbar;
 }
 //#endregion
-//#region c_yui_main.js
+//#region src/c_yui_main.js
 /***********************************************************************
 *          yui_main.js
 *
@@ -620,11 +1554,11 @@ function yui_toolbar(attrs = {}, items = []) {
 /***************************************************************
 *              Constants
 ***************************************************************/
-var GCLASS_NAME$16 = "C_YUI_MAIN";
+var GCLASS_NAME$17 = "C_YUI_MAIN";
 /***************************************************************
 *              Data
 ***************************************************************/
-var attrs_table$16 = [
+var attrs_table$17 = [
 	SDATA(data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
 	SDATA(data_type_t.DTP_STRING, "username", 0, "", "username logged"),
 	SDATA(data_type_t.DTP_STRING, "publi_page", 0, "publi_page", "Publicity page shown when user is not logged in"),
@@ -640,16 +1574,16 @@ var attrs_table$16 = [
 	SDATA(data_type_t.DTP_STRING, "color_user_logout", 0, "#FF4500", "OrangeRed - user logged out"),
 	SDATA_END()
 ];
-var PRIVATE_DATA$16 = {};
-var __gclass__$16 = null;
+var PRIVATE_DATA$17 = {};
+var __gclass__$17 = null;
 /******************************
 *      Framework Methods
 ******************************/
 /***************************************************************
 *          Framework Method: Create
 ***************************************************************/
-function mt_create$16(gobj) {
-	build_ui$13(gobj);
+function mt_create$17(gobj) {
+	build_ui$14(gobj);
 	set_theme(gobj, kw_get_local_storage_value("theme", "light", true));
 	const subscriber = gobj_read_pointer_attr(gobj, "subscriber");
 	if (subscriber) gobj_subscribe_event(gobj, null, {}, subscriber);
@@ -667,19 +1601,19 @@ function mt_stop$16(gobj) {}
 /***************************************************************
 *          Framework Method: Destroy
 ***************************************************************/
-function mt_destroy$16(gobj) {}
+function mt_destroy$17(gobj) {}
 /***************************
 *      Local Methods
 ***************************/
 /************************************************************
 *   Build UI
 ************************************************************/
-function build_ui$13(gobj) {
-	const $layout = createElement2([
+function build_ui$14(gobj) {
+	const $container = createElement2([
 		"div",
 		{
 			id: "root",
-			class: "root"
+			class: "C_YUI_MAIN root"
 		},
 		[
 			["div", {
@@ -712,7 +1646,7 @@ function build_ui$13(gobj) {
 			]
 		]
 	]);
-	document.body.appendChild($layout);
+	document.body.appendChild($container);
 	const iframe = document.getElementById("iframe-publi-page");
 	if (iframe) iframe.onload = () => {
 		const theme = kw_get_local_storage_value("theme", "light", true);
@@ -1626,17 +2560,17 @@ function ac_timeout$1(gobj, event, kw, src) {
 /***************************
 *          FSM
 ***************************/
-var gmt$16 = {
-	mt_create: mt_create$16,
+var gmt$17 = {
+	mt_create: mt_create$17,
 	mt_start: mt_start$16,
 	mt_stop: mt_stop$16,
-	mt_destroy: mt_destroy$16
+	mt_destroy: mt_destroy$17
 };
 /***************************************************************
 *          Create the GClass
 ***************************************************************/
-function create_gclass$16(gclass_name) {
-	if (__gclass__$16) {
+function create_gclass$17(gclass_name) {
+	if (__gclass__$17) {
 		log_error(`GClass ALREADY created: ${gclass_name}`);
 		return -1;
 	}
@@ -1720,7 +2654,7 @@ function create_gclass$16(gclass_name) {
 			null
 		]
 	]]];
-	__gclass__$16 = gclass_create(gclass_name, [
+	__gclass__$17 = gclass_create(gclass_name, [
 		["EV_LOGIN_ACCEPTED", 0],
 		["EV_LOGIN_DENIED", 0],
 		["EV_LOGIN_REFRESHED", 0],
@@ -1738,18 +2672,18 @@ function create_gclass$16(gclass_name) {
 		["EV_ON_CLOSE", 0],
 		["EV_DO_RECOVERY_PASSWORD", 0],
 		["EV_TIMEOUT", 0]
-	], states, gmt$16, 0, attrs_table$16, PRIVATE_DATA$16, 0, 0, 0, 0);
-	if (!__gclass__$16) return -1;
+	], states, gmt$17, 0, attrs_table$17, PRIVATE_DATA$17, 0, 0, 0, 0);
+	if (!__gclass__$17) return -1;
 	return 0;
 }
 /***************************************************************
 *          Register GClass
 ***************************************************************/
 function register_c_yui_main() {
-	return create_gclass$16(GCLASS_NAME$16);
+	return create_gclass$17(GCLASS_NAME$17);
 }
 //#endregion
-//#region c_yui_window.js
+//#region src/c_yui_window.js
 /***********************************************************************
 *          c_yui_window.js
 *
@@ -1761,11 +2695,16 @@ function register_c_yui_main() {
 /***************************************************************
 *              Constants
 ***************************************************************/
-var GCLASS_NAME$15 = "C_YUI_WINDOW";
+var GCLASS_NAME$16 = "C_YUI_WINDOW";
+var WC_MIN = "<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><rect x=\"3\" y=\"11\" width=\"10\" height=\"1.6\" rx=\"0.8\" fill=\"currentColor\"/></svg>";
+var WC_MAX = "<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><rect x=\"3.3\" y=\"3.3\" width=\"9.4\" height=\"9.4\" rx=\"1.6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/></svg>";
+var WC_RESTORE = "<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><rect x=\"5.2\" y=\"3\" width=\"7.8\" height=\"7.8\" rx=\"1.3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"/><rect x=\"3\" y=\"5.2\" width=\"7.8\" height=\"7.8\" rx=\"1.3\" fill=\"var(--bulma-scheme-main)\" stroke=\"currentColor\" stroke-width=\"1.4\"/></svg>";
+var WC_CLOSE = "<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M4 4 L12 12 M12 4 L4 12\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"/></svg>";
+var MOBILE_MAX = 768;
 /***************************************************************
 *              Data
 ***************************************************************/
-var attrs_table$15 = [
+var attrs_table$16 = [
 	SDATA(data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
 	SDATA(data_type_t.DTP_POINTER, "$parent", 0, null, "$container will be appended to $parent if not null, else to document.body"),
 	SDATA(data_type_t.DTP_INTEGER, "x", 0, "300", "X position"),
@@ -1783,9 +2722,13 @@ var attrs_table$15 = [
 	SDATA(data_type_t.DTP_BOOLEAN, "showFooter", 0, true, "Show footer"),
 	SDATA(data_type_t.DTP_BOOLEAN, "openMaximized", 0, false, "Open the window maximized"),
 	SDATA(data_type_t.DTP_BOOLEAN, "showMax", 0, true, "Show maximize button"),
+	SDATA(data_type_t.DTP_BOOLEAN, "showMin", 0, true, "Show minimize (roll-up / shade) button"),
 	SDATA(data_type_t.DTP_BOOLEAN, "maximized", 0, false, "Flag to indicate if maximized"),
 	SDATA(data_type_t.DTP_JSON, "window_style", 0, "{}", "Override window style"),
 	SDATA(data_type_t.DTP_POINTER, "on_close", 0, null, "Callback on destroy"),
+	SDATA(data_type_t.DTP_POINTER, "manager", 0, null, "Optional C_YUI_WINDOW_MANAGER (gobj or service name) for dock/taskbar"),
+	SDATA(data_type_t.DTP_STRING, "title", 0, "", "Window title, shown on the dock chip"),
+	SDATA(data_type_t.DTP_STRING, "icon", 0, "", "Dock-chip icon: a yi-* class name or inline SVG (by window type)"),
 	SDATA(data_type_t.DTP_POINTER, "focus", 0, null, "Brings focus to the element, can be a number or selector"),
 	SDATA(data_type_t.DTP_BOOLEAN, "modal", 0, false, "Enable modal mode"),
 	SDATA(data_type_t.DTP_BOOLEAN, "keyboard", 0, true, "Close window on ESC if not modal"),
@@ -1794,19 +2737,35 @@ var attrs_table$15 = [
 	SDATA(data_type_t.DTP_POINTER, "win_resize_handler", 0, null, "Internal: native window 'resize' listener"),
 	SDATA_END()
 ];
-var PRIVATE_DATA$15 = { prevSize: 0 };
-var __gclass__$15 = null;
+var PRIVATE_DATA$16 = {
+	prevSize: 0,
+	preShadeHeight: 0
+};
+var __gclass__$16 = null;
 /******************************
 *      Framework Methods
 ******************************/
 /***************************************************************
 *          Framework Method: Create
 ***************************************************************/
-function mt_create$15(gobj) {
+function mt_create$16(gobj) {
 	const subscriber = gobj_read_pointer_attr(gobj, "subscriber");
 	if (subscriber) gobj_subscribe_event(gobj, null, {}, subscriber);
 	gobj_write_attr(gobj, "window_id", "window-" + clean_name(gobj_short_name(gobj)));
-	build_ui$12(gobj);
+	build_ui$13(gobj);
+	let manager = resolve_manager(gobj);
+	if (manager) {
+		let $c = gobj_read_attr(gobj, "$container");
+		if ($c) $c.addEventListener("pointerdown", function() {
+			let m = gobj_read_pointer_attr(gobj, "manager");
+			if (m) gobj_send_event(m, "EV_FOCUS_WINDOW", { window: gobj }, gobj);
+		}, true);
+		gobj_send_event(manager, "EV_REGISTER_WINDOW", {
+			window: gobj,
+			title: gobj_read_attr(gobj, "title") || gobj_short_name(gobj),
+			icon: gobj_read_attr(gobj, "icon") || ""
+		}, gobj);
+	}
 	let on_win_resize = function() {
 		handleResize(gobj);
 	};
@@ -1830,7 +2789,9 @@ function mt_stop$15(gobj) {
 /***************************************************************
 *          Framework Method: Destroy
 ***************************************************************/
-function mt_destroy$15(gobj) {
+function mt_destroy$16(gobj) {
+	let manager = gobj_read_pointer_attr(gobj, "manager");
+	if (manager) gobj_send_event(manager, "EV_UNREGISTER_WINDOW", { window: gobj }, gobj);
 	let on_win_resize = gobj_read_attr(gobj, "win_resize_handler");
 	if (on_win_resize) {
 		window.removeEventListener("resize", on_win_resize);
@@ -1842,9 +2803,97 @@ function mt_destroy$15(gobj) {
 *      Local Methods
 ***************************/
 /************************************************************
+*   Inject the window-chrome stylesheet once. Theme-aware via
+*   Bulma scheme vars (flips on <html data-theme>); replaces the
+*   old saturated `has-background-info` bar + forced black text.
+************************************************************/
+function ensure_window_style() {
+	if (document.getElementById("yui-window-style")) return;
+	let css = `
+.yui-window-header {
+    background: var(--bulma-scheme-main-bis);
+    color: var(--bulma-text-strong);
+    -webkit-user-select: none; user-select: none;
+}
+.yui-window-titlebar-controls { display: flex; align-items: center; gap: 2px; padding-left: 6px; }
+.yui-wc {
+    width: 30px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
+    padding: 0; border: 0; background: transparent; color: var(--bulma-text); cursor: pointer;
+    border-radius: 5px; -webkit-tap-highlight-color: transparent;
+}
+.yui-wc:hover { background: var(--bulma-scheme-main-ter); color: var(--bulma-text-strong); }
+.yui-wc.wc-close:hover { background: #e0364a; color: #fff; }
+.yui-wc svg { width: 15px; height: 15px; display: block; }
+.C_YUI_WINDOW.is-shaded .yui-window-body,
+.C_YUI_WINDOW.is-shaded .yui-window-footer { display: none !important; }
+.C_YUI_WINDOW.is-shaded { height: auto !important; }
+.yui-window-resize { color: var(--bulma-text-weak); opacity: 0.55; }
+.yui-window-resize:hover { opacity: 1; color: var(--bulma-text); }
+@media (max-width: ${MOBILE_MAX}px) {
+    .C_YUI_WINDOW.is-mobile-sheet { border-radius: 0 !important; box-shadow: none !important; }
+    .C_YUI_WINDOW.is-mobile-sheet .yui-window-resize { display: none !important; }
+    .yui-wc { width: 42px; height: 38px; }
+    .yui-wc.wc-max { display: none !important; }
+    .yui-wc svg { width: 18px; height: 18px; }
+}
+`;
+	let $style = document.createElement("style");
+	$style.id = "yui-window-style";
+	$style.textContent = css;
+	document.head.appendChild($style);
+}
+/************************************************************
+*   Below the mobile breakpoint the window is a full-screen
+*   sheet (no float / drag / resize).
+************************************************************/
+function is_mobile() {
+	return (window.innerWidth || document.documentElement.offsetWidth) <= MOBILE_MAX;
+}
+/************************************************************
+*   Resolve the optional `manager` attr (a gobj or a service
+*   name) to a gobj, caching the resolution back into the attr.
+************************************************************/
+function resolve_manager(gobj) {
+	let m = gobj_read_pointer_attr(gobj, "manager");
+	if (!m) return null;
+	if (typeof m === "string") {
+		m = gobj_find_service(m, false);
+		gobj_write_attr(gobj, "manager", m);
+	}
+	return m;
+}
+/************************************************************
+*   Minimize: with a manager, send the window to the dock;
+*   otherwise "shade" it in place. Called by the minimize button.
+************************************************************/
+function do_minimize(gobj) {
+	let manager = gobj_read_pointer_attr(gobj, "manager");
+	if (manager) gobj_send_event(manager, "EV_MINIMIZE_WINDOW", { window: gobj }, gobj);
+	else toggle_shade(gobj);
+}
+/************************************************************
+*   Minimize as "shade": roll the window up to its title bar
+*   in place (self-contained; no window manager needed). Toggles.
+************************************************************/
+function toggle_shade(gobj) {
+	let priv = gobj.priv;
+	let $container = gobj_read_attr(gobj, "$container");
+	if (!$container) return;
+	if ($container.classList.contains("is-shaded")) {
+		$container.classList.remove("is-shaded");
+		if (priv.preShadeHeight) $container.style.height = parseInt(priv.preShadeHeight) + "px";
+	} else {
+		priv.preShadeHeight = $container.getBoundingClientRect().height;
+		$container.classList.add("is-shaded");
+		$container.style.height = "auto";
+	}
+}
+/************************************************************
 *   Build UI
 ************************************************************/
-function build_ui$12(gobj) {
+function build_ui$13(gobj) {
+	ensure_window_style();
+	let mobile = is_mobile();
 	let header = gobj_read_attr(gobj, "header");
 	if (is_gobj(header)) header = gobj_read_attr(header, "$container");
 	let body = gobj_read_attr(gobj, "body");
@@ -1867,6 +2916,12 @@ function build_ui$12(gobj) {
 	}
 	let rect = do_fix_dimension_to_screen(gobj, gobj_read_integer_attr(gobj, "x"), gobj_read_integer_attr(gobj, "y"), gobj_read_integer_attr(gobj, "width"), gobj_read_integer_attr(gobj, "height"));
 	if (gobj_read_bool_attr(gobj, "center")) rect = do_center(gobj, rect.x, rect.y, rect.width, rect.height);
+	if (mobile) rect = {
+		x: 0,
+		y: 0,
+		width: window.innerWidth || document.documentElement.offsetWidth,
+		height: window.innerHeight || document.documentElement.offsetHeight
+	};
 	let window_style = {
 		position: "fixed",
 		"z-index": 3,
@@ -1888,14 +2943,14 @@ function build_ui$12(gobj) {
 	let $container = createElement2([
 		"div",
 		{
-			class: "yui-window strong-shadow is-flex is-flex-direction-column",
+			class: "C_YUI_WINDOW strong-shadow is-flex is-flex-direction-column" + (mobile ? " is-mobile-sheet" : ""),
 			style: window_style
 		},
 		[
 			[
 				"div",
 				{
-					class: "yui-window-header p-1 is-flex-shrink-0 is-flex is-flex-nowrap is-justify-content-space-between is-align-items-flex-start has-text-black has-background-info",
+					class: "yui-window-header p-1 is-flex-shrink-0 is-flex is-flex-nowrap is-justify-content-space-between is-align-items-center",
 					style: "border-bottom:1px solid var(--bulma-border); cursor:move; box-sizing: border-box;"
 				},
 				[[
@@ -1915,37 +2970,52 @@ function build_ui$12(gobj) {
 				], [
 					"div",
 					{
-						class: "is-flex-shrink-0 is-flex is-flex-nowrap is-align-items-flex-start",
+						class: "yui-window-titlebar-controls is-flex-shrink-0",
 						style: "position:relative; z-index:1; cursor:default;"
 					},
-					[[
-						"button",
-						{
-							class: "without-border pr-4",
-							style: {
-								color: "var(--bulma-text)",
-								"font-size": "1.4em",
-								"cursor": "pointer",
-								"display": gobj_read_bool_attr(gobj, "showMax") ? "inline-block" : "none"
-							}
-						},
-						"<i class=\"yi-square\"></i>",
-						{ click: (evt) => {
-							evt.stopPropagation();
-							toggle(gobj);
-						} }
-					], [
-						"button",
-						{
-							class: "without-border pr-2",
-							style: "color:var(--bulma-text);font-size:1.6em;cursor:pointer;"
-						},
-						"<i class=\"yi-xmark\"></i>",
-						{ click: (evt) => {
-							evt.stopPropagation();
-							close_window(gobj);
-						} }
-					]]
+					[
+						[
+							"button",
+							{
+								class: "yui-wc wc-min",
+								type: "button",
+								"aria-label": "minimize",
+								style: gobj_read_bool_attr(gobj, "showMin") ? "" : "display:none;"
+							},
+							WC_MIN,
+							{ click: (evt) => {
+								evt.stopPropagation();
+								do_minimize(gobj);
+							} }
+						],
+						[
+							"button",
+							{
+								class: "yui-wc wc-max",
+								type: "button",
+								"aria-label": "maximize",
+								style: gobj_read_bool_attr(gobj, "showMax") ? "" : "display:none;"
+							},
+							WC_MAX,
+							{ click: (evt) => {
+								evt.stopPropagation();
+								toggle(gobj);
+							} }
+						],
+						[
+							"button",
+							{
+								class: "yui-wc wc-close",
+								type: "button",
+								"aria-label": "close"
+							},
+							WC_CLOSE,
+							{ click: (evt) => {
+								evt.stopPropagation();
+								close_window(gobj);
+							} }
+						]
+					]
 				]],
 				{ pointerdown: (evt) => {
 					if (evt.target.closest && evt.target.closest("button")) return;
@@ -2030,7 +3100,7 @@ function build_ui$12(gobj) {
 		let $resizable_btn = createElement2([
 			"div",
 			{
-				class: "without-border",
+				class: "without-border yui-window-resize",
 				style: {
 					cursor: "nwse-resize",
 					display: "flex",
@@ -2057,7 +3127,7 @@ function build_ui$12(gobj) {
 	if ($parent) $parent.appendChild($container);
 	else document.body.appendChild($container);
 	if (gobj_read_bool_attr(gobj, "openMaximized")) max$2(gobj);
-	else {
+	else if (!mobile) {
 		if (gobj_read_bool_attr(gobj, "content_size")) $container.style.height = "auto";
 		if (gobj_read_bool_attr(gobj, "center")) {
 			rect = $container.getBoundingClientRect();
@@ -2118,9 +3188,22 @@ function max$2(gobj) {
 	$container.style.width = parseInt(rect.width) + "px";
 	$container.style.height = parseInt(rect.height) + "px";
 	gobj_write_bool_attr(gobj, "maximized", true);
+	set_max_icon(gobj, true);
 	return rect;
 }
 /************************************************************
+*   Swap the maximize/restore glyph to match the state.
+************************************************************/
+function set_max_icon(gobj, maximized) {
+	let $container = gobj_read_attr(gobj, "$container");
+	if (!$container) return;
+	let $btn = $container.querySelector(".wc-max");
+	if ($btn) {
+		$btn.innerHTML = maximized ? WC_RESTORE : WC_MAX;
+		$btn.setAttribute("aria-label", maximized ? "restore" : "maximize");
+	}
+}
+/************************************************************
 *
 ************************************************************/
 function min$1(gobj) {
@@ -2133,12 +3216,14 @@ function min$1(gobj) {
 	$container.style.width = parseInt(rect.width) + "px";
 	$container.style.height = parseInt(rect.height) + "px";
 	gobj_write_bool_attr(gobj, "maximized", false);
+	set_max_icon(gobj, false);
 	return rect;
 }
 /************************************************************
 *  handlers moving
 ************************************************************/
 function mvStart(gobj, evt) {
+	if (is_mobile()) return;
 	let $container = gobj_read_attr(gobj, "$container");
 	let window_rect = $container.getBoundingClientRect();
 	let x = evt.screenX;
@@ -2295,6 +3380,17 @@ function do_center(gobj, x, y, width, height) {
 function handleResize(gobj) {
 	let $container = gobj_read_attr(gobj, "$container");
 	if (!$container) return;
+	if (is_mobile()) {
+		$container.classList.add("is-mobile-sheet");
+		let vw = window.innerWidth || document.documentElement.offsetWidth;
+		let vh = window.innerHeight || document.documentElement.offsetHeight;
+		$container.style.left = "0px";
+		$container.style.top = "0px";
+		$container.style.width = vw + "px";
+		$container.style.height = vh + "px";
+		return;
+	}
+	$container.classList.remove("is-mobile-sheet");
 	if (gobj_read_bool_attr(gobj, "maximized") === true) {
 		let r = do_fix_dimension_to_screen(gobj, 0, 0, 1e4, 1e4);
 		if (gobj_read_bool_attr(gobj, "center")) r = do_center(gobj, r.x, r.y, r.width, r.height);
@@ -2339,20 +3435,28 @@ function ac_show$11(gobj, event, kw, src) {
 function ac_hide$11(gobj, event, kw, src) {
 	return 0;
 }
+/************************************************************
+*   EV_CLOSE_WINDOW — close from outside (e.g. the dock chip ✕),
+*   the same teardown as the title-bar close button.
+************************************************************/
+function ac_close(gobj, event, kw, src) {
+	close_window(gobj);
+	return 0;
+}
 /***************************
 *          FSM
 ***************************/
-var gmt$15 = {
-	mt_create: mt_create$15,
+var gmt$16 = {
+	mt_create: mt_create$16,
 	mt_start: mt_start$15,
 	mt_stop: mt_stop$15,
-	mt_destroy: mt_destroy$15
+	mt_destroy: mt_destroy$16
 };
 /***************************************************************
 *          Create the GClass
 ***************************************************************/
-function create_gclass$15(gclass_name) {
-	if (__gclass__$15) {
+function create_gclass$16(gclass_name) {
+	if (__gclass__$16) {
 		log_error(`GClass ALREADY created: ${gclass_name}`);
 		return -1;
 	}
@@ -2376,28 +3480,481 @@ function create_gclass$15(gclass_name) {
 			"EV_HIDE",
 			ac_hide$11,
 			null
+		],
+		[
+			"EV_CLOSE_WINDOW",
+			ac_close,
+			null
 		]
 	]]];
-	__gclass__$15 = gclass_create(gclass_name, [
+	__gclass__$16 = gclass_create(gclass_name, [
 		["EV_WINDOW_TO_CLOSE", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_WINDOW_MOVED", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_WINDOW_RESIZED", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_RESIZE", 0],
 		["EV_REFRESH", 0],
 		["EV_SHOW", 0],
-		["EV_HIDE", 0]
-	], states, gmt$15, 0, attrs_table$15, PRIVATE_DATA$15, 0, 0, 0, 0);
-	if (!__gclass__$15) return -1;
+		["EV_HIDE", 0],
+		["EV_CLOSE_WINDOW", 0]
+	], states, gmt$16, 0, attrs_table$16, PRIVATE_DATA$16, 0, 0, 0, 0);
+	if (!__gclass__$16) return -1;
 	return 0;
 }
 /***************************************************************
 *          Register GClass
 ***************************************************************/
 function register_c_yui_window() {
+	return create_gclass$16(GCLASS_NAME$16);
+}
+//#endregion
+//#region src/c_yui_window_manager.js
+/***********************************************************************
+*          c_yui_window_manager.js
+*
+*  Window manager / dock (taskbar).
+*
+*  A light registry + dock strip for C_YUI_WINDOW instances. Windows
+*  opt in via their `manager` attr: on create they REGISTER, on
+*  destroy they UNREGISTER, their minimize button MINIMIZEs (roll to
+*  the dock instead of shading in place), and any pointer press
+*  FOCUSes (raise z-order + highlight the dock chip).
+*
+*  The manager never owns window lifecycle: it only toggles a
+*  window's `$container` display / z-index and reflects state in the
+*  dock. Closing stays the window's own affordance (its ✕ →
+*  gobj_destroy → EV_UNREGISTER_WINDOW removes the chip).
+*
+*  Orthogonal to C_YUI_PAGER (page-stack): a window may host a pager
+*  in its body; the manager only arranges the windows themselves.
+*
+*  The dock placement is configurable via `dock_mode`:
+*    - "floating"   (default) a detached bar pinned to a corner
+*                   (`dock_corner`), hovering over the content.
+*    - "inline"     a full-width taskbar row mounted inside a layout
+*                   container (`inline_selector`, e.g. a shell zone).
+*    - "responsive" floating on wide viewports, inline on narrow ones
+*                   (`responsive_query`) — so on mobile it lives above
+*                   the bottom menu instead of covering it.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/***************************************************************
+*              Constants
+***************************************************************/
+var GCLASS_NAME$15 = "C_YUI_WINDOW_MANAGER";
+var DOCK_Z = 1e6;
+var WC_X = "<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M4.5 4.5 L11.5 11.5 M11.5 4.5 L4.5 11.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>";
+/***************************************************************
+*              Data
+***************************************************************/
+var attrs_table$15 = [
+	SDATA(data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
+	SDATA(data_type_t.DTP_STRING, "dock_mode", 0, "floating", "floating | inline | responsive (floating on wide screens, inline on narrow)"),
+	SDATA(data_type_t.DTP_STRING, "dock_corner", 0, "bottom-left", "Floating placement: top-left | top-right | bottom-left | bottom-right"),
+	SDATA(data_type_t.DTP_STRING, "inline_selector", 0, "", "CSS selector of the container the dock mounts into when inline (e.g. a shell zone)"),
+	SDATA(data_type_t.DTP_STRING, "responsive_query", 0, "(max-width: 768px)", "Media query that selects inline placement when dock_mode is 'responsive'"),
+	SDATA(data_type_t.DTP_POINTER, "$parent", 0, null, "Where the floating dock mounts (default document.body)"),
+	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "Internal: the dock element"),
+	SDATA_END()
+];
+var PRIVATE_DATA$15 = {
+	windows: null,
+	z: 0,
+	mql: null,
+	mql_handler: null
+};
+var __gclass__$15 = null;
+/******************************
+*      Framework Methods
+******************************/
+/***************************************************************
+*          Framework Method: Create
+***************************************************************/
+function mt_create$15(gobj) {
+	let priv = gobj.priv;
+	priv.windows = [];
+	priv.z = 10;
+	if ((gobj_read_attr(gobj, "dock_mode") || "floating") === "responsive") {
+		let q = gobj_read_attr(gobj, "responsive_query") || "(max-width: 768px)";
+		priv.mql = window.matchMedia(q);
+		priv.mql_handler = () => {
+			apply_placement(gobj);
+		};
+		priv.mql.addEventListener("change", priv.mql_handler);
+	}
+	build_dock(gobj);
+	const subscriber = gobj_read_pointer_attr(gobj, "subscriber");
+	if (subscriber) gobj_subscribe_event(gobj, null, {}, subscriber);
+}
+/***************************************************************
+*          Framework Method: Destroy
+***************************************************************/
+function mt_destroy$15(gobj) {
+	let priv = gobj.priv;
+	if (priv.mql && priv.mql_handler) {
+		priv.mql.removeEventListener("change", priv.mql_handler);
+		priv.mql = null;
+		priv.mql_handler = null;
+	}
+	destroy_dock(gobj);
+}
+/***************************
+*      Local Methods
+***************************/
+/************************************************************
+*   Inject the dock stylesheet once (theme-aware).
+************************************************************/
+function ensure_dock_style() {
+	if (document.getElementById("yui-dock-style")) return;
+	let css = `
+.yui-dock {
+    z-index: ${DOCK_Z};
+    display: flex; gap: 6px; align-items: center; padding: 5px 8px;
+    overflow-x: auto;
+    background: var(--bulma-scheme-main-bis); color: var(--bulma-text);
+    border: 1px solid var(--bulma-border);
+    font-family: var(--bulma-family-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+}
+.yui-dock.is-empty { display: none; }
+
+/*  Floating: a detached bar hovering over the content, pinned to a corner.  */
+.yui-dock--floating {
+    position: fixed;
+    max-width: calc(100vw - 24px);
+    border-radius: 10px;
+    box-shadow: 0 6px 22px rgba(0,0,0,0.25);
+}
+.yui-dock--bottom-left  { bottom: 12px; left: 12px; }
+.yui-dock--bottom-right { bottom: 12px; right: 12px; }
+.yui-dock--top-left     { top: 12px;    left: 12px; }
+.yui-dock--top-right    { top: 12px;    right: 12px; }
+
+/*  Inline: flows inside a layout zone as a full-width taskbar row (the zone
+ *  already provides the separating border, so the bar itself stays flat).  */
+.yui-dock--inline {
+    position: relative;
+    width: 100%; max-width: 100%;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+}
+.yui-dock-chip {
+    display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12px;
+    padding: 4px 5px 4px 11px; border: 1px solid var(--bulma-border); border-radius: 7px;
+    background: var(--bulma-scheme-main); color: var(--bulma-text); cursor: pointer; white-space: nowrap;
+}
+.yui-dock-chip:hover { border-color: var(--bulma-text-weak); }
+.yui-dock-chip.is-active { border-color: #2563eb; color: #2563eb; background: rgba(37,99,235,0.10); font-weight: 600; }
+.yui-dock-chip.is-min { opacity: 0.65; }
+.yui-dock-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: 0 0 auto; }
+.yui-dock-chip.is-min .yui-dock-dot { background: var(--bulma-text-weak); }
+.yui-dock-icon { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; font-size: 14px; flex: 0 0 auto; }
+.yui-dock-icon svg { width: 14px; height: 14px; display: block; }
+.yui-dock-icon i { line-height: 1; }
+.yui-dock-label { flex: 0 0 auto; }
+.yui-dock-close {
+    width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
+    padding: 0; margin-left: 1px; border: 0; border-radius: 4px;
+    background: transparent; color: var(--bulma-text-weak); cursor: pointer; flex: 0 0 auto;
+}
+.yui-dock-close:hover { background: #e0364a; color: #fff; }
+.yui-dock-close svg { width: 11px; height: 11px; display: block; }
+:root[data-theme="dark"] .yui-dock-chip.is-active { border-color: #60a5fa; color: #93c5fd; background: rgba(96,165,250,0.16); }
+`;
+	let $style = document.createElement("style");
+	$style.id = "yui-dock-style";
+	$style.textContent = css;
+	document.head.appendChild($style);
+}
+/************************************************************
+*   Build the dock element (empty, hidden until a window
+*   registers).
+************************************************************/
+function build_dock(gobj) {
+	ensure_dock_style();
+	gobj_write_attr(gobj, "$container", createElement2([
+		"div",
+		{ class: "yui-dock is-empty" },
+		[]
+	]));
+	apply_placement(gobj);
+}
+/************************************************************
+*   Whether the dock should render inline (in a layout zone)
+*   rather than floating, given the mode and — for
+*   'responsive' — the current viewport.
+************************************************************/
+function want_inline_placement(gobj) {
+	let mode = gobj_read_attr(gobj, "dock_mode") || "floating";
+	if (mode === "inline") return true;
+	if (mode === "responsive") {
+		let priv = gobj.priv;
+		return !!(priv.mql && priv.mql.matches);
+	}
+	return false;
+}
+/************************************************************
+*   Place (or re-place) the dock: pick floating vs inline,
+*   set the modifier classes, and mount it in the right
+*   container. Also re-attaches the dock if it got detached
+*   (e.g. a shell that replaced its parent's children after
+*   the dock was first mounted, or the responsive breakpoint
+*   flipped). Idempotent — safe to call on every register and
+*   on every media-query change.
+************************************************************/
+function apply_placement(gobj) {
+	let $dock = gobj_read_attr(gobj, "$container");
+	if (!$dock) return;
+	let $inline = null;
+	if (want_inline_placement(gobj)) {
+		let sel = gobj_read_attr(gobj, "inline_selector");
+		if (sel) $inline = document.querySelector(sel);
+	}
+	let inline = !!$inline;
+	$dock.classList.toggle("yui-dock--inline", inline);
+	$dock.classList.toggle("yui-dock--floating", !inline);
+	let corner = gobj_read_attr(gobj, "dock_corner") || "bottom-left";
+	for (let c of [
+		"top-left",
+		"top-right",
+		"bottom-left",
+		"bottom-right"
+	]) $dock.classList.toggle(`yui-dock--${c}`, !inline && c === corner);
+	let target = inline ? $inline : gobj_read_attr(gobj, "$parent") || document.body;
+	if ($dock.parentNode !== target) target.appendChild($dock);
+}
+/************************************************************
+*   Destroy the dock element.
+************************************************************/
+function destroy_dock(gobj) {
+	let $dock = gobj_read_attr(gobj, "$container");
+	if ($dock) {
+		if ($dock.parentNode) $dock.parentNode.removeChild($dock);
+		gobj_write_attr(gobj, "$container", null);
+	}
+}
+/************************************************************
+*   The chip's leading mark: a per-type icon if the window
+*   provides one (a `yi-*` class name, or inline SVG/HTML), else
+*   the status dot. Returns a createElement2() spec.
+************************************************************/
+function chip_lead(icon) {
+	if (!icon) return [
+		"span",
+		{ class: "yui-dock-dot" },
+		""
+	];
+	if (icon.charAt(0) === "<") return [
+		"span",
+		{ class: "yui-dock-icon" },
+		icon
+	];
+	return [
+		"span",
+		{ class: "yui-dock-icon" },
+		[["i", { class: icon }]]
+	];
+}
+/************************************************************
+*   Find a registry entry by its window gobj.
+************************************************************/
+function find_entry(priv, win) {
+	for (let e of priv.windows) if (e.gobj === win) return e;
+	return null;
+}
+/************************************************************
+*   Show / hide the empty state.
+************************************************************/
+function sync_dock_visibility(gobj) {
+	let priv = gobj.priv;
+	let $dock = gobj_read_attr(gobj, "$container");
+	if ($dock) $dock.classList.toggle("is-empty", priv.windows.length === 0);
+}
+/************************************************************
+*   Mark one entry active (raised), the rest inactive.
+************************************************************/
+function set_active(gobj, entry) {
+	let priv = gobj.priv;
+	for (let e of priv.windows) if (e.$chip) e.$chip.classList.toggle("is-active", e === entry);
+}
+/************************************************************
+*   Bring a window to front and mark it active/visible.
+************************************************************/
+function focus_entry(gobj, entry) {
+	let priv = gobj.priv;
+	let $win = gobj_read_attr(entry.gobj, "$container");
+	if ($win) {
+		if (entry.minimized) {
+			$win.style.removeProperty("display");
+			entry.minimized = false;
+			if (entry.$chip) entry.$chip.classList.remove("is-min");
+		}
+		priv.z += 1;
+		$win.style.zIndex = priv.z;
+	}
+	set_active(gobj, entry);
+}
+/************************************************************
+*   Send a window to the dock (hidden, chip dimmed).
+************************************************************/
+function minimize_entry(gobj, entry) {
+	let $win = gobj_read_attr(entry.gobj, "$container");
+	if ($win) $win.style.setProperty("display", "none", "important");
+	entry.minimized = true;
+	if (entry.$chip) {
+		entry.$chip.classList.add("is-min");
+		entry.$chip.classList.remove("is-active");
+	}
+}
+/************************************************************
+*   Dock chip click: taskbar toggle — restore+focus a
+*   minimized/inactive window, minimize the active one.
+************************************************************/
+function on_chip_click(gobj, entry) {
+	if (entry.minimized || !entry.$chip.classList.contains("is-active")) focus_entry(gobj, entry);
+	else minimize_entry(gobj, entry);
+}
+/***************************
+*      Actions
+***************************/
+/************************************************************
+*   EV_REGISTER_WINDOW { window, title }
+************************************************************/
+function ac_register_window(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let win = kw.window;
+	if (!win || find_entry(priv, win)) return 0;
+	apply_placement(gobj);
+	let title = kw.title || gobj_name(win) || "window";
+	let entry = {
+		gobj: win,
+		$chip: null,
+		minimized: false
+	};
+	let $chip = createElement2([
+		"div",
+		{
+			class: "yui-dock-chip",
+			role: "button",
+			tabindex: "0",
+			title
+		},
+		[
+			chip_lead(kw.icon),
+			[
+				"span",
+				{ class: "yui-dock-label" },
+				title
+			],
+			[
+				"button",
+				{
+					class: "yui-dock-close",
+					type: "button",
+					"aria-label": "close"
+				},
+				WC_X,
+				{ click: (evt) => {
+					evt.stopPropagation();
+					gobj_send_event(entry.gobj, "EV_CLOSE_WINDOW", {}, gobj);
+				} }
+			]
+		],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			on_chip_click(gobj, entry);
+		} }
+	]);
+	entry.$chip = $chip;
+	priv.windows.push(entry);
+	let $dock = gobj_read_attr(gobj, "$container");
+	if ($dock) $dock.appendChild($chip);
+	sync_dock_visibility(gobj);
+	focus_entry(gobj, entry);
+	return 0;
+}
+/************************************************************
+*   EV_UNREGISTER_WINDOW { window }
+************************************************************/
+function ac_unregister_window(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let entry = find_entry(priv, kw.window);
+	if (!entry) return 0;
+	if (entry.$chip && entry.$chip.parentNode) entry.$chip.parentNode.removeChild(entry.$chip);
+	priv.windows = priv.windows.filter((e) => e !== entry);
+	sync_dock_visibility(gobj);
+	return 0;
+}
+/************************************************************
+*   EV_MINIMIZE_WINDOW { window }
+************************************************************/
+function ac_minimize_window(gobj, event, kw, src) {
+	let entry = find_entry(gobj.priv, kw.window);
+	if (entry) minimize_entry(gobj, entry);
+	return 0;
+}
+/************************************************************
+*   EV_FOCUS_WINDOW { window }
+************************************************************/
+function ac_focus_window(gobj, event, kw, src) {
+	let entry = find_entry(gobj.priv, kw.window);
+	if (entry) focus_entry(gobj, entry);
+	return 0;
+}
+/***************************
+*          FSM
+***************************/
+var gmt$15 = {
+	mt_create: mt_create$15,
+	mt_destroy: mt_destroy$15
+};
+/***************************************************************
+*          Create the GClass
+***************************************************************/
+function create_gclass$15(gclass_name) {
+	if (__gclass__$15) {
+		log_error(`GClass ALREADY created: ${gclass_name}`);
+		return -1;
+	}
+	__gclass__$15 = gclass_create(gclass_name, [
+		["EV_REGISTER_WINDOW", 0],
+		["EV_UNREGISTER_WINDOW", 0],
+		["EV_MINIMIZE_WINDOW", 0],
+		["EV_FOCUS_WINDOW", 0]
+	], [["ST_IDLE", [
+		[
+			"EV_REGISTER_WINDOW",
+			ac_register_window,
+			null
+		],
+		[
+			"EV_UNREGISTER_WINDOW",
+			ac_unregister_window,
+			null
+		],
+		[
+			"EV_MINIMIZE_WINDOW",
+			ac_minimize_window,
+			null
+		],
+		[
+			"EV_FOCUS_WINDOW",
+			ac_focus_window,
+			null
+		]
+	]]], gmt$15, 0, attrs_table$15, PRIVATE_DATA$15, 0, 0, 0, 0);
+	if (!__gclass__$15) return -1;
+	return 0;
+}
+/***************************************************************
+*          Register GClass
+***************************************************************/
+function register_c_yui_window_manager() {
 	return create_gclass$15(GCLASS_NAME$15);
 }
 //#endregion
-//#region c_yui_tabs.js
+//#region src/c_yui_tabs.js
 /***********************************************************************
 *          c_yui_tabs.js
 *
@@ -2451,7 +4008,7 @@ var __gclass__$14 = null;
 *          Framework Method: Create
 ***************************************************************/
 function mt_create$14(gobj) {
-	build_ui$11(gobj);
+	build_ui$12(gobj);
 	let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
 	if (!subscriber) subscriber = gobj_parent(gobj);
 	gobj_subscribe_event(gobj, null, {}, subscriber);
@@ -2493,11 +4050,11 @@ function mt_child_removed(gobj, child) {
 /************************************************************
 *   Build UI
 ************************************************************/
-function build_ui$11(gobj) {
+function build_ui$12(gobj) {
 	gobj_write_attr(gobj, "$container", createElement2([
 		"div",
 		{
-			class: `yui_tabs`,
+			class: `C_YUI_TABS`,
 			style: "height:100%; display:flex; flex-direction:column;"
 		},
 		[[
@@ -2688,7 +4245,7 @@ function register_c_yui_tabs() {
 	return create_gclass$14(GCLASS_NAME$14);
 }
 //#endregion
-//#region pager_helpers.js
+//#region src/pager_helpers.js
 /***************************************************************
 *  Top entry or null.
 ***************************************************************/
@@ -2742,7 +4299,7 @@ function pager_back_action(stack, back_on_root) {
 	return { type: "noop" };
 }
 //#endregion
-//#region c_yui_pager.js
+//#region src/c_yui_pager.js
 /***********************************************************************
 *          c_yui_pager.js
 *
@@ -2794,7 +4351,7 @@ var __gclass__$13 = null;
 function mt_create$13(gobj) {
 	let priv = gobj.priv;
 	priv.stack = [];
-	build_ui$10(gobj);
+	build_ui$11(gobj);
 	let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
 	if (!subscriber) subscriber = gobj_parent(gobj);
 	gobj_subscribe_event(gobj, null, {}, subscriber);
@@ -2821,11 +4378,11 @@ function mt_destroy$13(gobj) {
 /************************************************************
 *   Build UI
 ************************************************************/
-function build_ui$10(gobj) {
+function build_ui$11(gobj) {
 	gobj_write_attr(gobj, "$container", createElement2([
 		"div",
 		{
-			class: "yui-pager",
+			class: "C_YUI_PAGER",
 			style: "height:100%; display:flex; flex-direction:column;"
 		},
 		[[
@@ -3175,7 +4732,7 @@ function register_c_yui_pager() {
 	return create_gclass$13(GCLASS_NAME$13);
 }
 //#endregion
-//#region wizard_helpers.js
+//#region src/wizard_helpers.js
 /***********************************************************************
 *          wizard_helpers.js
 *
@@ -3264,7 +4821,7 @@ function wizard_should_validate(linear, has_gobj) {
 	return !!linear && !!has_gobj;
 }
 //#endregion
-//#region c_yui_wizard.js
+//#region src/c_yui_wizard.js
 /***********************************************************************
 *          c_yui_wizard.js
 *
@@ -3326,7 +4883,7 @@ function mt_create$12(gobj) {
 	priv.idx = 0;
 	priv.acc = null;
 	priv.awaiting = false;
-	build_ui$9(gobj);
+	build_ui$10(gobj);
 	let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
 	if (!subscriber) subscriber = gobj_parent(gobj);
 	gobj_subscribe_event(gobj, null, {}, subscriber);
@@ -3353,11 +4910,11 @@ function mt_destroy$12(gobj) {
 /************************************************************
 *   Build UI
 ************************************************************/
-function build_ui$9(gobj) {
+function build_ui$10(gobj) {
 	gobj_write_attr(gobj, "$container", createElement2([
 		"div",
 		{
-			class: "yui-wizard",
+			class: "C_YUI_WIZARD",
 			style: "height:100%; display:flex; flex-direction:column;"
 		},
 		[
@@ -3793,7 +5350,7 @@ function register_c_yui_wizard() {
 	return create_gclass$12(GCLASS_NAME$12);
 }
 //#endregion
-//#region c_yui_form.js
+//#region src/c_yui_form.js
 /***********************************************************************
 *          c_yui_form.js
 *
@@ -3845,7 +5402,7 @@ function mt_create$11(gobj) {
 	if (!subscriber) subscriber = gobj_parent(gobj);
 	gobj_subscribe_event(gobj, null, {}, subscriber);
 	gobj_write_attr(gobj, "form_id", "form" + clean_name(gobj_name(gobj)));
-	build_ui$8(gobj);
+	build_ui$9(gobj);
 }
 /************************************************************
 *      Framework Method destroy
@@ -3932,11 +5489,11 @@ async function readClipboard$1(gobj) {
 /************************************************************
 *   Build UI
 ************************************************************/
-function build_ui$8(gobj) {
+function build_ui$9(gobj) {
 	let $container = createElement2([
 		"div",
 		{
-			class: "yui-form-container is-flex is-flex-direction-row overscroll-contain",
+			class: "C_YUI_FORM is-flex is-flex-direction-row overscroll-contain",
 			style: "height:100%; width:100%; box-sizing:border-box;"
 		},
 		[[
@@ -5796,7 +7353,7 @@ function register_c_yui_form() {
 	return create_gclass$11(GCLASS_NAME$11);
 }
 //#endregion
-//#region c_yui_routing.js
+//#region src/c_yui_routing.js
 /***********************************************************************
 *          ui_routing.js
 *
@@ -6003,7 +7560,7 @@ function build_layout(gobj) {
 	const $container = createElement2([
 		"div",
 		{
-			class: "container-grid-2col",
+			class: "C_YUI_ROUTING",
 			style: ""
 		},
 		[[
@@ -6363,7 +7920,7 @@ function register_c_yui_routing() {
 	return create_gclass$10(GCLASS_NAME$10);
 }
 //#endregion
-//#region lib_maplibre.js
+//#region src/lib_maplibre.js
 /***********************************************************************
 *          lib_maplibre.js
 *
@@ -6508,7 +8065,7 @@ var MarkerControl = class {
 	}
 };
 //#endregion
-//#region c_yui_map.js
+//#region src/c_yui_map.js
 /***********************************************************************
 *          c_yui_map.js
 *
@@ -6567,7 +8124,9 @@ function mt_create$9(gobj) {
 	if (!subscriber) subscriber = gobj_parent(gobj);
 	gobj_subscribe_event(gobj, null, {}, subscriber);
 	let map_settings = json_deep_copy(gobj_read_attr(gobj, "map_settings"));
-	Object.assign(map_settings, { container: gobj_read_attr(gobj, "$map") });
+	let $map = gobj_read_attr(gobj, "$map");
+	if ($map) $map.classList.add(GCLASS_NAME$9);
+	Object.assign(map_settings, { container: $map });
 	priv.onClick = (ev) => {
 		onClick(gobj, ev);
 	};
@@ -7115,7 +8674,7 @@ function register_c_yui_map() {
 	return create_gclass$9(GCLASS_NAME$9);
 }
 //#endregion
-//#region c_yui_uplot.js
+//#region src/c_yui_uplot.js
 /***********************************************************************
 *          c_yui_uplot.js
 *
@@ -7175,7 +8734,7 @@ var __gclass__$8 = null;
 *          Framework Method: Create
 ***************************************************************/
 function mt_create$8(gobj) {
-	build_ui$7(gobj);
+	build_ui$8(gobj);
 	let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
 	if (!subscriber) subscriber = gobj_parent(gobj);
 	gobj_subscribe_event(gobj, null, {}, subscriber);
@@ -7205,11 +8764,11 @@ function mt_destroy$8(gobj) {
 /************************************************************
 *   Build UI
 ************************************************************/
-function build_ui$7(gobj) {
+function build_ui$8(gobj) {
 	let $container = gobj_read_attr(gobj, "$container");
 	if (!$container) {
 		$container = createElement2(["div", {
-			class: "",
+			class: "C_YUI_UPLOT",
 			style: "overflow:auto;"
 		}]);
 		gobj_write_bool_attr(gobj, "$container", $container);
@@ -7408,7 +8967,7 @@ function register_c_yui_uplot() {
 	return create_gclass$8(GCLASS_NAME$8);
 }
 //#endregion
-//#region g6_drag_canvas_touch.js
+//#region src/g6_drag_canvas_touch.js
 /***********************************************************************
 *          g6_drag_canvas_touch.js
 *
@@ -7516,7 +9075,7 @@ function ensure_drag_canvas_patch() {
 	__drag_canvas_patched__ = true;
 }
 //#endregion
-//#region c_yui_json_graph.js
+//#region src/c_yui_json_graph.js
 /***********************************************************************
 *          c_yui_json_graph.js
 *
@@ -7589,7 +9148,7 @@ function mt_create$7(gobj) {
 	gobj_subscribe_event(gobj, null, {}, subscriber);
 	let __yui_main__ = gobj_find_service("__yui_main__", true);
 	if (__yui_main__) priv.theme = gobj_read_str_attr(__yui_main__, "theme");
-	build_ui$6(gobj);
+	build_ui$7(gobj);
 	ensure_drag_canvas_patch();
 	if (!__layout_registered__$1) {
 		register(ExtensionCategory.LAYOUT, "json-tree-layout", JsonTreeLayout);
@@ -7632,12 +9191,12 @@ function mt_destroy$7(gobj) {
 /************************************************************
 *   Build UI
 ************************************************************/
-function build_ui$6(gobj) {
+function build_ui$7(gobj) {
 	let priv = gobj.priv;
 	let $container = createElement2([
 		"div",
 		{
-			class: "json-graph",
+			class: "C_YUI_JSON_GRAPH",
 			style: "height:100%; display:flex; flex-direction:column;"
 		},
 		[[
@@ -8270,7 +9829,7 @@ function register_c_yui_json_graph() {
 	return create_gclass$7(GCLASS_NAME$7);
 }
 //#endregion
-//#region c_yui_gobj_tree_js.js
+//#region src/c_yui_gobj_tree_js.js
 /***********************************************************************
 *          c_yui_gobj_tree_js.js
 *
@@ -8505,7 +10064,7 @@ function mt_create$6(gobj) {
 	let __yui_main__ = gobj_find_service("__yui_main__");
 	if (__yui_main__) priv.theme = gobj_read_str_attr(__yui_main__, "theme");
 	else priv.theme = gt_is_dark() ? "dark" : "light";
-	build_ui$5(gobj);
+	build_ui$6(gobj);
 	ensure_drag_canvas_patch();
 	if (!__layout_registered__) {
 		register(ExtensionCategory.LAYOUT, "gobj-tree-v", GobjTreeVLayout);
@@ -8557,12 +10116,12 @@ function mt_destroy$6(gobj) {
 /************************************************************
 *   Build UI
 ************************************************************/
-function build_ui$5(gobj) {
+function build_ui$6(gobj) {
 	let priv = gobj.priv;
 	let $container = createElement2([
 		"div",
 		{
-			class: "gobj-tree",
+			class: "C_YUI_GOBJ_TREE_JS",
 			style: "height:100%; display:flex; flex-direction:column; position:relative;"
 		},
 		[[
@@ -9835,7 +11394,7 @@ function register_c_yui_gobj_tree_js() {
 	return create_gclass$6(GCLASS_NAME$6);
 }
 //#endregion
-//#region shell_show_on.js
+//#region src/shell_show_on.js
 /***********************************************************************
 *          shell_show_on.js
 *
@@ -9911,7 +11470,7 @@ function bulma_hidden_class(bp) {
 	return "";
 }
 //#endregion
-//#region shell_focus_trap.js
+//#region src/shell_focus_trap.js
 /***********************************************************************
 *          shell_focus_trap.js
 *
@@ -9985,7 +11544,7 @@ function activate_focus_trap_on($panel, doc) {
 	};
 }
 //#endregion
-//#region shell_toolbar_helpers.js
+//#region src/shell_toolbar_helpers.js
 var TOOLBAR_ACTION_TYPES = [
 	"navigate",
 	"drawer",
@@ -10111,7 +11670,7 @@ function _is_non_empty_string(v) {
 	return typeof v === "string" && v.trim().length > 0;
 }
 //#endregion
-//#region route_resolver.js
+//#region src/route_resolver.js
 /***********************************************************************
 *          route_resolver.js
 *
@@ -10162,7 +11721,7 @@ function resolve_route(item_index, route) {
 	};
 }
 //#endregion
-//#region c_yui_shell.js
+//#region src/c_yui_shell.js
 /***********************************************************************
 *          c_yui_shell.js
 *
@@ -10248,7 +11807,7 @@ function mt_create$5(gobj) {
 		conn_nodes: [],
 		active_dropdown: null
 	});
-	build_ui$4(gobj);
+	build_ui$5(gobj);
 }
 /***************************************************************
 *          Framework Method: Start
@@ -10453,16 +12012,16 @@ function check_route_unique(route_owner, item, menu_id) {
 /************************************************************
 *  Build the DOM: layers → base → zones
 ************************************************************/
-function build_ui$4(gobj) {
+function build_ui$5(gobj) {
 	let priv = gobj_read_attr(gobj, "priv");
 	let shell_cfg = (gobj_read_attr(gobj, "config") || {}).shell || {};
-	let $root = createElement2(["div", { class: "yui-shell" }]);
+	let $container = createElement2(["div", { class: "C_YUI_SHELL yui-shell" }]);
 	for (let [id, z] of LAYER_DEFS) {
 		let $layer = createElement2(["div", {
 			class: `yui-layer yui-layer-${id}`,
 			style: `z-index:${z};`
 		}]);
-		$root.appendChild($layer);
+		$container.appendChild($layer);
 		priv.layers[id] = $layer;
 	}
 	let $base = priv.layers.base;
@@ -10511,8 +12070,8 @@ function build_ui$4(gobj) {
 		};
 		priv.zones.center.classList.add("yui-stage", "yui-stage-main");
 	}
-	(gobj_read_attr(gobj, "mount_element") || document.body).appendChild($root);
-	gobj_write_attr(gobj, "$container", $root);
+	(gobj_read_attr(gobj, "mount_element") || document.body).appendChild($container);
+	gobj_write_attr(gobj, "$container", $container);
 }
 /************************************************************
 *  Translate zone id to grid-area name
@@ -10781,9 +12340,10 @@ function navigate_to(gobj, route) {
 	let prev_route = stage.active_route;
 	if (prev_route && prev_route !== matched_route) {
 		let prev_gobj = stage.items[prev_route];
+		let $prev = null;
 		if (prev_gobj) {
-			let $c = gobj_read_attr(prev_gobj, "$container");
-			if ($c) $c.classList.add("is-hidden");
+			$prev = gobj_read_attr(prev_gobj, "$container");
+			if ($prev) $prev.classList.add("is-hidden");
 		}
 		let prev_entry = priv.item_index[prev_route];
 		if (prev_entry && prev_entry.target && prev_entry.target.lifecycle === "lazy_destroy") {
@@ -10793,6 +12353,7 @@ function navigate_to(gobj, route) {
 			} catch (e) {
 				log_warning(`C_YUI_SHELL: lazy_destroy of '${prev_route}' failed: ${e}`);
 			}
+			if ($prev && $prev.parentNode) $prev.parentNode.removeChild($prev);
 			delete stage.items[prev_route];
 		}
 	}
@@ -11477,6 +13038,21 @@ function ac_drawer_close_requested(gobj, event, kw, src) {
 	close_drawer(gobj, kw && kw.menu_id || "");
 	return 0;
 }
+/************************************************************
+*  Close 'x' on a closable tab (from a C_YUI_NAV child).  The
+*  shell does not own the item set — re-publish so the app (which
+*  owns the underlying data, e.g. the selected-nodes list) removes
+*  the item and calls yui_shell_set_submenu() with the new list.
+************************************************************/
+function ac_nav_item_close(gobj, event, kw, src) {
+	gobj_publish_event(gobj, "EV_NAV_ITEM_CLOSE", {
+		item_id: kw && kw.item_id || "",
+		route: kw && kw.route || "",
+		menu_id: kw && kw.menu_id || "",
+		zone: kw && kw.zone || ""
+	});
+	return 0;
+}
 /***************************************************************
 *              FSM
 ***************************************************************/
@@ -11491,18 +13067,27 @@ function create_gclass$5(gclass_name) {
 		log_error(`GClass ALREADY created: ${gclass_name}`);
 		return -1;
 	}
-	const states = [["ST_IDLE", [[
-		"EV_NAV_CLICKED",
-		ac_nav_clicked,
-		null
-	], [
-		"EV_DRAWER_CLOSE_REQUESTED",
-		ac_drawer_close_requested,
-		null
-	]]]];
+	const states = [["ST_IDLE", [
+		[
+			"EV_NAV_CLICKED",
+			ac_nav_clicked,
+			null
+		],
+		[
+			"EV_DRAWER_CLOSE_REQUESTED",
+			ac_drawer_close_requested,
+			null
+		],
+		[
+			"EV_NAV_ITEM_CLOSE",
+			ac_nav_item_close,
+			null
+		]
+	]]];
 	__gclass__$5 = gclass_create(gclass_name, [
 		["EV_NAV_CLICKED", 0],
 		["EV_DRAWER_CLOSE_REQUESTED", 0],
+		["EV_NAV_ITEM_CLOSE", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_PUBLIC_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_ROUTE_REQUESTED", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_PUBLIC_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_ROUTE_CHANGED", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_PUBLIC_EVENT | event_flag_t.EVF_NO_WARN_SUBS]
 	], states, gmt$5, 0, attrs_table$5, PRIVATE_DATA$5, 0, 0, 0, gclass_flag_t.gcflag_no_check_output_events);
@@ -11594,9 +13179,9 @@ function yui_shell_set_connection_state(shell_gobj, connected) {
 *  `icon_class` fully replaces the <i> class.
 ************************************************************/
 function yui_shell_set_toolbar_item_icon(shell_gobj, item_id, icon_class) {
-	let $root = gobj_read_attr(shell_gobj, "$container");
-	if (!$root || empty_string(item_id) || empty_string(icon_class)) return;
-	let $i = $root.querySelector(`[data-toolbar-item-id="${item_id}"] .icon i`);
+	let $container = gobj_read_attr(shell_gobj, "$container");
+	if (!$container || empty_string(item_id) || empty_string(icon_class)) return;
+	let $i = $container.querySelector(`[data-toolbar-item-id="${item_id}"] .icon i`);
 	if ($i) $i.className = icon_class;
 }
 /************************************************************
@@ -11608,7 +13193,7 @@ function yui_shell_close_dropdown(shell_gobj) {
 	close_toolbar_dropdown(shell_gobj);
 }
 //#endregion
-//#region c_yui_nav.js
+//#region src/c_yui_nav.js
 /***********************************************************************
 *          c_yui_nav.js
 *
@@ -11626,6 +13211,15 @@ function yui_shell_close_dropdown(shell_gobj) {
 *
 *      Each item supports:
 *          id, name, icon (CSS class or svg id), route, badge, disabled
+*          class    — extra CSS class(es) on the item (tabs layout), e.g.
+*                     a per-item state colour like "yui-nav-disconnected"
+*          closable — render a trailing ✕ that emits EV_NAV_ITEM_CLOSE
+*                     instead of navigating (tabs layout)
+*
+*      Items can be replaced at runtime by sending EV_SET_ITEMS
+*      {items:[...]} to the nav; the DOM is rebuilt in place and the
+*      active highlight restored.  The app_config path is simply the
+*      first, startup caller of the same mechanism.
 *
 *      In addition to navigable items, secondary navs accept two
 *      decorative item kinds for in-place visual grouping:
@@ -11689,7 +13283,7 @@ function mt_create$4(gobj) {
 	if (!subscriber) subscriber = gobj_parent(gobj);
 	gobj_subscribe_event(gobj, null, {}, subscriber);
 	gobj_write_attr(gobj, "priv", { click_handler: null });
-	build_ui$3(gobj);
+	build_ui$4(gobj);
 }
 /***************************************************************
 *          Framework Method: Start
@@ -11723,7 +13317,7 @@ function mt_destroy$4(gobj) {
 /************************************************************
 *  Build the UI: dispatch to one of the six layout renderers
 ************************************************************/
-function build_ui$3(gobj) {
+function build_ui$4(gobj) {
 	let layout = gobj_read_attr(gobj, "layout") || "vertical";
 	if (SUPPORTED_LAYOUTS.indexOf(layout) < 0) {
 		log_error(`C_YUI_NAV: unsupported layout '${layout}', falling back to vertical`);
@@ -11732,40 +13326,75 @@ function build_ui$3(gobj) {
 	let items = gobj_read_attr(gobj, "menu_items") || [];
 	let zone = gobj_read_attr(gobj, "zone") || "";
 	let menu_id = gobj_read_attr(gobj, "menu_id") || "nav";
-	let $root;
+	let $container;
 	switch (layout) {
 		case "vertical":
-			$root = render_vertical(gobj, items);
+			$container = render_vertical(gobj, items);
 			break;
 		case "icon-bar":
-			$root = render_icon_bar(gobj, items);
+			$container = render_icon_bar(gobj, items);
 			break;
 		case "tabs":
-			$root = render_tabs(gobj, items);
+			$container = render_tabs(gobj, items);
 			break;
 		case "drawer":
-			$root = render_drawer(gobj, items);
+			$container = render_drawer(gobj, items);
 			break;
 		case "submenu":
-			$root = render_submenu(gobj, items);
+			$container = render_submenu(gobj, items);
 			break;
 		case "accordion":
-			$root = render_accordion(gobj, items);
+			$container = render_accordion(gobj, items);
 			break;
-		default: $root = render_vertical(gobj, items);
+		default: $container = render_vertical(gobj, items);
 	}
-	$root.setAttribute("data-nav-zone", zone);
-	$root.setAttribute("data-nav-layout", layout);
-	$root.classList.add("yui-nav", `yui-nav-${layout}`);
+	$container.setAttribute("data-nav-zone", zone);
+	$container.setAttribute("data-nav-layout", layout);
+	$container.classList.add("C_YUI_NAV", "yui-nav", `yui-nav-${layout}`);
 	if (layout !== "drawer") {
-		$root.setAttribute("role", "navigation");
-		if (!$root.hasAttribute("aria-label")) {
+		$container.setAttribute("role", "navigation");
+		if (!$container.hasAttribute("aria-label")) {
 			let label = gobj_read_attr(gobj, "nav_label") || menu_id;
-			$root.setAttribute("aria-label", label);
+			$container.setAttribute("aria-label", label);
 		}
 	}
-	wire_clicks(gobj, $root);
-	gobj_write_attr(gobj, "$container", $root);
+	wire_clicks(gobj, $container);
+	gobj_write_attr(gobj, "$container", $container);
+}
+/************************************************************
+*  Rebuild the nav DOM in place from the current menu_items.
+*  Used by EV_SET_ITEMS so a nav's tabs can be changed at runtime
+*  (the app_config path is just the first, startup caller).
+************************************************************/
+function rebuild(gobj) {
+	let $old = gobj_read_attr(gobj, "$container");
+	let priv = gobj_read_attr(gobj, "priv") || {};
+	let parent = $old ? $old.parentNode : null;
+	let next = $old ? $old.nextSibling : null;
+	let was_hidden = !!($old && $old.classList.contains("is-hidden"));
+	if ($old && priv.click_handler) $old.removeEventListener("click", priv.click_handler);
+	build_ui$4(gobj);
+	let $new = gobj_read_attr(gobj, "$container");
+	if ($new && was_hidden) $new.classList.add("is-hidden");
+	if (parent && $new) parent.insertBefore($new, next);
+	if ($old && $old.parentNode) $old.parentNode.removeChild($old);
+	apply_active_route(gobj);
+}
+/************************************************************
+*  Re-apply the active-route highlight after a rebuild (the
+*  shell only pushes EV_ROUTE_CHANGED on navigation, not on a
+*  self-triggered items change).
+************************************************************/
+function apply_active_route(gobj) {
+	let $c = gobj_read_attr(gobj, "$container");
+	let route = gobj_read_attr(gobj, "active_route") || "";
+	if (!$c || empty_string(route)) return;
+	let $a = $c.querySelector(`a[data-route="${css_escape(route)}"]`);
+	if ($a) {
+		let $li = $a.closest("li");
+		if ($li) $li.classList.add("is-active");
+		$a.classList.add("is-active");
+	}
 }
 /************************************************************
 *  Layouts
@@ -11843,6 +13472,20 @@ function render_tabs(gobj, items) {
 			{ i18n: it.name },
 			it.name
 		]);
+		if (it.closable) children.push([
+			"span",
+			{
+				class: "icon is-small yui-nav-close ml-2",
+				"data-close-item": it.id,
+				role: "button",
+				"aria-label": "close",
+				title: "close"
+			},
+			["i", {
+				class: "yi-xmark",
+				"aria-hidden": "true"
+			}]
+		]);
 		let a_attrs = {
 			href: it.route ? "#" + it.route : "#",
 			"data-item-id": it.id,
@@ -11853,10 +13496,11 @@ function render_tabs(gobj, items) {
 			a_attrs.title = tip;
 			a_attrs["data-i18n-title"] = tip;
 		}
+		let li_class = empty_string(it.class) ? "" : String(it.class);
 		lis.push([
 			"li",
 			{
-				class: "",
+				class: li_class,
 				"data-item-id": it.id,
 				"data-route": it.route || ""
 			},
@@ -11929,7 +13573,7 @@ function render_submenu(gobj, items) {
 function render_accordion(gobj, items) {
 	let show_label = gobj_read_attr(gobj, "show_label");
 	let icon_pos = gobj_read_attr(gobj, "icon_pos");
-	let $root = createElement2(["aside", { class: "menu yui-nav-accordion p-2" }]);
+	let $container = createElement2(["aside", { class: "menu yui-nav-accordion p-2" }]);
 	for (let it of items) {
 		if (is_decorative(it)) continue;
 		let acc_id = ++__nav_aria_seq__;
@@ -11951,7 +13595,7 @@ function render_accordion(gobj, items) {
 			head_attrs,
 			head_text
 		]);
-		$root.appendChild($hdr);
+		$container.appendChild($hdr);
 		let $ul = createElement2(["ul", {
 			id: body_id,
 			class: "menu-list yui-accordion-body is-hidden",
@@ -11963,9 +13607,9 @@ function render_accordion(gobj, items) {
 			show_label,
 			stacked: false
 		})));
-		$root.appendChild($ul);
+		$container.appendChild($ul);
 	}
-	return $root;
+	return $container;
 }
 /************************************************************
 *  Shared helpers
@@ -12100,18 +13744,31 @@ function item_iconbar(gobj, it, opts) {
 		]
 	];
 }
-function wire_clicks(gobj, $root) {
+function wire_clicks(gobj, $container) {
 	let priv = gobj_read_attr(gobj, "priv") || {};
 	let handler = (ev) => {
 		let target = ev.target;
 		if (!target || !target.closest) return;
+		let $close = target.closest("[data-close-item]");
+		if ($close) {
+			let $routed = $close.closest("[data-route]");
+			gobj_publish_event(gobj, "EV_NAV_ITEM_CLOSE", {
+				item_id: $close.getAttribute("data-close-item") || "",
+				route: $routed && $routed.getAttribute("data-route") || "",
+				menu_id: gobj_read_attr(gobj, "menu_id") || "",
+				zone: gobj_read_attr(gobj, "zone") || ""
+			});
+			ev.preventDefault();
+			ev.stopPropagation();
+			return;
+		}
 		if (target.closest("[data-close-drawer]")) {
 			gobj_publish_event(gobj, "EV_DRAWER_CLOSE_REQUESTED", { menu_id: gobj_read_attr(gobj, "menu_id") || "" });
 			ev.preventDefault();
 			return;
 		}
 		let $head = target.closest(".yui-accordion-head");
-		if ($head && $root.contains($head)) {
+		if ($head && $container.contains($head)) {
 			let $next = $head.nextElementSibling;
 			if ($next && $next.classList.contains("yui-accordion-body")) {
 				let open = $next.classList.contains("is-hidden");
@@ -12138,13 +13795,23 @@ function wire_clicks(gobj, $root) {
 			level: gobj_read_attr(gobj, "level") || "primary"
 		});
 	};
-	$root.addEventListener("click", handler);
+	$container.addEventListener("click", handler);
 	priv.click_handler = handler;
 }
 /***************************
 *      Actions
 ***************************/
 /************************************************************
+*  EV_SET_ITEMS — replace this nav's items and re-render in place.
+*  This is the runtime counterpart of the startup config path:
+*  the shell (or app, via the shell) drives dynamic navs through it.
+************************************************************/
+function ac_set_items(gobj, event, kw, src) {
+	gobj_write_attr(gobj, "menu_items", is_array(kw.items) ? kw.items : []);
+	rebuild(gobj);
+	return 0;
+}
+/************************************************************
 *  EV_ROUTE_CHANGED from the shell — refresh active highlight
 ************************************************************/
 function ac_route_changed(gobj, event, kw, src) {
@@ -12203,10 +13870,16 @@ function create_gclass$4(gclass_name) {
 		"EV_ROUTE_CHANGED",
 		ac_route_changed,
 		null
+	], [
+		"EV_SET_ITEMS",
+		ac_set_items,
+		null
 	]]]];
 	__gclass__$4 = gclass_create(gclass_name, [
 		["EV_ROUTE_CHANGED", 0],
+		["EV_SET_ITEMS", 0],
 		["EV_NAV_CLICKED", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_PUBLIC_EVENT],
+		["EV_NAV_ITEM_CLOSE", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_PUBLIC_EVENT],
 		["EV_DRAWER_CLOSE_REQUESTED", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_PUBLIC_EVENT]
 	], states, gmt$4, 0, attrs_table$4, PRIVATE_DATA$4, 0, 0, 0, 0);
 	if (!__gclass__$4) return -1;
@@ -12216,7 +13889,7 @@ function register_c_yui_nav() {
 	return create_gclass$4(GCLASS_NAME$4);
 }
 //#endregion
-//#region shell_modals.js
+//#region src/shell_modals.js
 /***********************************************************************
 *          shell_modals.js
 *
@@ -12350,27 +14023,74 @@ function yui_shell_show_modal(shell, content, opts) {
 			content
 		]]
 	] : null;
+	let dialog = !!(opts && opts.dialog);
+	let title = opts && opts.title || "";
 	let with_close = !(opts && opts.with_close_button === false);
-	let modal_children = [["div", { class: "modal-background" }], [
-		"div",
-		{ class: "modal-content" },
-		inner ? [inner] : []
-	]];
-	if (with_close) modal_children.push(["button", {
-		class: "modal-close is-large",
-		"aria-label": "close"
-	}]);
+	let modal_children;
+	if (dialog) {
+		modal_children = [["div", { class: "modal-background" }], [
+			"div",
+			{ class: "modal-content yui-dialog-content" },
+			[[
+				"div",
+				{ class: "yui-dialog-header" },
+				[
+					[
+						"button",
+						{
+							class: "yui-dialog-back",
+							type: "button",
+							"aria-label": "back"
+						},
+						[["i", { class: "yi-arrow-left" }]]
+					],
+					[
+						"span",
+						{
+							class: "yui-dialog-title",
+							i18n: title
+						},
+						title
+					],
+					[
+						"button",
+						{
+							class: "yui-dialog-x",
+							type: "button",
+							"aria-label": "close"
+						},
+						[["i", { class: "yi-xmark" }]]
+					]
+				]
+			], [
+				"div",
+				{ class: "yui-dialog-body" },
+				inner ? [inner] : []
+			]]
+		]];
+		with_close = false;
+	} else {
+		modal_children = [["div", { class: "modal-background" }], [
+			"div",
+			{ class: "modal-content" },
+			inner ? [inner] : []
+		]];
+		if (with_close) modal_children.push(["button", {
+			class: "modal-close is-large",
+			"aria-label": "close"
+		}]);
+	}
 	let $modal = createElement2([
 		"div",
 		{
-			class: "modal yui-modal is-active",
+			class: "modal yui-modal" + (dialog ? " yui-dialog" : "") + " is-active",
 			role: "dialog",
 			"aria-modal": "true"
 		},
 		modal_children
 	]);
 	$layer.appendChild($modal);
-	if (!inner && content && typeof content.appendChild !== "undefined") $modal.querySelector(".modal-content").appendChild(content);
+	if (!inner && content && typeof content.appendChild !== "undefined") (dialog ? $modal.querySelector(".yui-dialog-body") : $modal.querySelector(".modal-content")).appendChild(content);
 	maybe_apply_translator($modal, opts);
 	let closed = false;
 	let close_fn = null;
@@ -12399,6 +14119,12 @@ function yui_shell_show_modal(shell, content, opts) {
 	if (opts == null || opts.dismiss_on_background !== false) $modal.querySelector(".modal-background").addEventListener("click", close);
 	let $close_btn = $modal.querySelector(".modal-close");
 	if ($close_btn) $close_btn.addEventListener("click", close);
+	if (dialog) {
+		let $back = $modal.querySelector(".yui-dialog-back");
+		if ($back) $back.addEventListener("click", close);
+		let $x = $modal.querySelector(".yui-dialog-x");
+		if ($x) $x.addEventListener("click", close);
+	}
 	return { close };
 }
 /***************************************************************
@@ -12550,7 +14276,7 @@ function yui_shell_confirm_yesnocancel(shell, message, opts) {
 	], opts);
 }
 //#endregion
-//#region c_yui_treedb_topics.js
+//#region src/c_yui_treedb_topics.js
 /***********************************************************************
 *          c_yui_treedb_topics.js
 *
@@ -12593,7 +14319,7 @@ var __gclass__$3 = null;
 *          Framework Method: Create
 ***************************************************************/
 function mt_create$3(gobj) {
-	build_ui$2(gobj);
+	build_ui$3(gobj);
 	let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
 	if (!subscriber) subscriber = gobj_parent(gobj);
 	gobj_subscribe_event(gobj, null, {}, subscriber);
@@ -12667,11 +14393,11 @@ function cmd_get_topic_data$1(gobj, cmd, kw, src) {
 /************************************************************
 *   Build UI
 ************************************************************/
-function build_ui$2(gobj) {
+function build_ui$3(gobj) {
 	gobj_write_attr(gobj, "$container", createElement2([
 		"div",
 		{
-			class: `${gobj_read_attr(gobj, "treedb_name")}`,
+			class: `C_YUI_TREEDB_TOPICS ${gobj_read_attr(gobj, "treedb_name")}`,
 			style: "height:100%; display:flex; flex-direction:column;"
 		},
 		[[
@@ -12696,6 +14422,26 @@ function build_ui$2(gobj) {
 	]));
 }
 /************************************************************
+*   Show a non-blocking inline error banner at the top of the view
+*   (used when the treedb schema `descs` cannot load). Reuses a single
+*   banner so retries don't stack.
+************************************************************/
+function show_load_error$1(gobj, message) {
+	let $container = gobj_read_attr(gobj, "$container");
+	if (!$container) return;
+	let $err = $container.querySelector(".treedb-load-error");
+	if (!$err) {
+		$err = createElement2([
+			"div",
+			{ class: "notification is-danger is-light m-3 treedb-load-error" },
+			[]
+		]);
+		$container.insertBefore($err, $container.firstChild);
+	}
+	let treedb = gobj_read_attr(gobj, "treedb_name") || "";
+	$err.textContent = (treedb ? `${treedb}: ` : "") + (message || "cannot load treedb");
+}
+/************************************************************
 *   Destroy UI
 ************************************************************/
 function destroy_ui$2(gobj) {
@@ -12915,10 +14661,14 @@ function ac_mt_command_answer$1(gobj, event, kw, src) {
 		log_error(e);
 		return;
 	}
-	if (result < 0) display_error_message("Error", t(comment));
 	let __command__ = msg_iev_get_stack(gobj, kw, "command_stack", true);
 	let command = kw_get_str(gobj, __command__, "command", "", kw_flag_t.KW_REQUIRED);
 	let kw_command = kw_get_dict(gobj, __command__, "kw", {}, kw_flag_t.KW_REQUIRED);
+	if (result < 0) {
+		if (command === "descs") show_load_error$1(gobj, t(comment));
+		else display_error_message("Error", t(comment));
+		return 0;
+	}
 	switch (command) {
 		case "descs":
 			if (result >= 0) {
@@ -13183,7 +14933,7 @@ function register_c_yui_treedb_topics() {
 	return create_gclass$3(GCLASS_NAME$3);
 }
 //#endregion
-//#region c_yui_treedb_topic_with_form.js
+//#region src/c_yui_treedb_topic_with_form.js
 /***********************************************************************
 *          c_yui_treedb_topic_with_form.js
 *
@@ -13261,7 +15011,7 @@ function mt_create$2(gobj) {
 	gobj_write_attr(gobj, "toolbar_id", "toolbar" + name);
 	gobj_write_attr(gobj, "form_id", "form" + name);
 	gobj_write_attr(gobj, "popup_id", "popup" + name);
-	build_ui$1(gobj);
+	build_ui$2(gobj);
 	let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
 	if (!subscriber) subscriber = gobj_parent(gobj);
 	gobj_subscribe_event(gobj, null, {}, subscriber);
@@ -13345,7 +15095,7 @@ async function readClipboard(gobj) {
 /************************************************************
 *   Build UI
 ************************************************************/
-function build_ui$1(gobj) {
+function build_ui$2(gobj) {
 	function create_table_toolbar() {
 		let $table_toolbar = [];
 		let with_edition_mode = gobj_read_bool_attr(gobj, "with_edition_mode");
@@ -13562,7 +15312,7 @@ function build_ui$1(gobj) {
 	let $container = createElement2([
 		"div",
 		{
-			class: "container-treedb-topic-with-form",
+			class: "C_YUI_TREEDB_TOPIC_WITH_FORM",
 			style: "height:100%;"
 		},
 		[["div", {
@@ -15573,7 +17323,7 @@ function register_c_yui_treedb_topic_with_form() {
 	return create_gclass$2(GCLASS_NAME$2);
 }
 //#endregion
-//#region lib_graph.js
+//#region src/lib_graph.js
 /************************************************************
 *  Add class to elements selected
 ************************************************************/
@@ -15677,7 +17427,7 @@ function getStrokeColor(fillColor, theme = "light", factor = .2) {
 	return `rgba(${adjust(r)}, ${adjust(g)}, ${adjust(b)}, ${a.toFixed(3)})`;
 }
 //#endregion
-//#region c_yui_treedb_graph.js
+//#region src/c_yui_treedb_graph.js
 /***********************************************************************
 *          c_yui_treedb_graph.js
 *
@@ -15753,7 +17503,7 @@ function mt_create$1(gobj) {
 	let __yui_main__ = gobj_find_service("__yui_main__");
 	if (__yui_main__) gobj_subscribe_event(__yui_main__, "EV_RESIZE", {}, gobj);
 	gobj_write_attr(gobj, "canvas_id", clean_name(gobj_name(gobj)) + "-canvas");
-	let $container_canvas = build_ui(gobj).querySelector(`#${priv.canvas_id}`);
+	let $container_canvas = build_ui$1(gobj).querySelector(`#${priv.canvas_id}`);
 	priv.gobj_nodes_tree = gobj_create_service(`${gobj_name(gobj)}-g6`, "C_G6_NODES_TREE", {
 		$container: $container_canvas,
 		subscriber: gobj,
@@ -15803,13 +17553,13 @@ function mt_destroy$1(gobj) {
 /************************************************************
 *   Build UI
 ************************************************************/
-function build_ui(gobj) {
+function build_ui$1(gobj) {
 	let priv = gobj.priv;
 	let padding = gobj_read_attr(gobj, "padding");
 	let $container = createElement2([
 		"div",
 		{
-			class: "graphs",
+			class: "C_YUI_TREEDB_GRAPH",
 			style: `height:100%; display:flex; flex-direction:column;`
 		},
 		[[
@@ -15838,6 +17588,26 @@ function build_ui(gobj) {
 	return $container;
 }
 /************************************************************
+*   Show a non-blocking inline error banner at the top of the view
+*   (used when the treedb schema `descs` cannot load). Reuses a single
+*   banner so retries don't stack.
+************************************************************/
+function show_load_error(gobj, message) {
+	let $container = gobj_read_attr(gobj, "$container");
+	if (!$container) return;
+	let $err = $container.querySelector(".treedb-load-error");
+	if (!$err) {
+		$err = createElement2([
+			"div",
+			{ class: "notification is-danger is-light m-3 treedb-load-error" },
+			[]
+		]);
+		$container.insertBefore($err, $container.firstChild);
+	}
+	let treedb = gobj_read_attr(gobj, "treedb_name") || "";
+	$err.textContent = (treedb ? `${treedb}: ` : "") + (message || "cannot load treedb");
+}
+/************************************************************
 *   Destroy UI
 ************************************************************/
 function destroy_ui(gobj) {
@@ -16179,10 +17949,11 @@ function ac_mt_command_answer(gobj, event, kw, src) {
 		log_error(e);
 		return;
 	}
-	if (result < 0) display_error_message("Error", t(comment));
 	let __command__ = msg_iev_get_stack(gobj, kw, "command_stack", true);
 	let command = kw_get_str(gobj, __command__, "command", "", kw_flag_t.KW_REQUIRED);
 	let kw_command = kw_get_dict(gobj, __command__, "kw", {}, kw_flag_t.KW_REQUIRED);
+	if (result < 0) if (command === "descs") show_load_error(gobj, t(comment));
+	else display_error_message("Error", t(comment));
 	switch (command) {
 		case "descs":
 			if (result >= 0) process_treedb_descs(gobj, data);
@@ -43106,7 +44877,7 @@ Sector.PARSED_STYLE_LIST = new Set([].concat(_toConsumableArray(Path.PARSED_STYL
 	"endAngle"
 ]));
 //#endregion
-//#region lib_icons.js
+//#region src/lib_icons.js
 /*********************************************************
 *      lib_icons.js
 *
@@ -43217,7 +44988,7 @@ function inject_svg_icons() {
 	document.body.appendChild(div);
 }
 //#endregion
-//#region c_g6_nodes_tree.js
+//#region src/c_g6_nodes_tree.js
 /***********************************************************************
 *          c_g6_nodes_tree.js
 *
@@ -43403,6 +45174,7 @@ function mt_create(gobj) {
 			gobj.priv.theme_observer = mo;
 		}
 	}
+	build_ui(gobj);
 	register_layouts(gobj);
 	build_graph(gobj);
 	if (typeof ResizeObserver !== "undefined" && priv.$container) {
@@ -43501,6 +45273,13 @@ function get_default_ne_xy(gobj) {
 	return xy;
 }
 /************************************************************
+*   Build UI
+************************************************************/
+function build_ui(gobj) {
+	let $container = gobj_read_attr(gobj, "$container");
+	if ($container) $container.classList.add(GCLASS_NAME);
+}
+/************************************************************
 *  Register custom G6 layouts
 ************************************************************/
 var _g6_extensions_registered = false;
@@ -47415,7 +49194,7 @@ function register_c_g6_nodes_tree() {
 	return create_gclass(GCLASS_NAME);
 }
 //#endregion
-//#region themes.js
+//#region src/themes.js
 function themes() {
 	function openModal($el) {
 		$el.classList.add("is-active");
@@ -47545,7 +49324,7 @@ function themes() {
 	onClickOutside(".js-menu");
 }
 //#endregion
-//#region ytable.js
+//#region src/ytable.js
 var default_options = {
 	id: void 0,
 	width: "100%",
@@ -47817,6 +49596,37 @@ function createYTable($container, columns, options) {
 	return new YTable($container, columns, options);
 }
 //#endregion
-export { EditControl, MarkerControl, YTable, addClasses, apply_dev_traces, build_dev_panel, createYTable, dev_window_was_open, disableElements, display_error_message, display_info_message, display_volatil_modal, display_warning_message, enableElements, getStrokeColor, get_ok, get_yesno, get_yesnocancel, info_traffic, inject_svg_icons, register_c_g6_nodes_tree, register_c_yui_form, register_c_yui_gobj_tree_js, register_c_yui_json_graph, register_c_yui_main, register_c_yui_map, register_c_yui_nav, register_c_yui_pager, register_c_yui_routing, register_c_yui_shell, register_c_yui_tabs, register_c_yui_treedb_graph, register_c_yui_treedb_topic_with_form, register_c_yui_treedb_topics, register_c_yui_uplot, register_c_yui_window, register_c_yui_wizard, removeChildElements, removeClasses, set_active_state, set_cancel_state, set_submit_state, setup_dev, themes, toggleClasses, yui_shell_close_drawer, yui_shell_close_dropdown, yui_shell_confirm_ok, yui_shell_confirm_yesno, yui_shell_confirm_yesnocancel, yui_shell_navigate, yui_shell_open_drawer, yui_shell_pop_escape, yui_shell_push_escape, yui_shell_refresh_avatars, yui_shell_set_avatar_provider, yui_shell_set_connection_state, yui_shell_set_toolbar_item_icon, yui_shell_set_translator, yui_shell_show_error, yui_shell_show_info, yui_shell_show_modal, yui_shell_show_warning, yui_shell_toggle_drawer, yui_toolbar };
+//#region src/yui_inputs.js
+/***************************************************************
+*  Add a clear (✕) button to a Bulma control wrapping an input.
+*  Returns the button element (already appended to $control).
+***************************************************************/
+function attach_clear($control, $input, on_clear) {
+	if (!$control || !$input) return null;
+	$control.classList.add("has-clear");
+	let $btn = createElement2(["button", {
+		type: "button",
+		class: "delete is-medium yui-input-clear",
+		tabindex: "-1",
+		title: i18next.t("clear"),
+		"aria-label": i18next.t("clear")
+	}]);
+	function sync() {
+		$btn.classList.toggle("is-visible", !!$input.value);
+	}
+	$input.addEventListener("input", sync);
+	$btn.addEventListener("click", () => {
+		$input.value = "";
+		$input.dispatchEvent(new Event("input", { bubbles: true }));
+		if (typeof on_clear === "function") on_clear();
+		$input.focus();
+		sync();
+	});
+	$control.appendChild($btn);
+	sync();
+	return $btn;
+}
+//#endregion
+export { EditControl, MarkerControl, YTable, addClasses, apply_dev_traces, attach_clear, build_dev_panel, createYTable, dev_window_was_open, disableElements, display_error_message, display_info_message, display_volatil_modal, display_warning_message, enableElements, getStrokeColor, get_ok, get_yesno, get_yesnocancel, info_traffic, inject_svg_icons, register_c_g6_nodes_tree, register_c_yui_form, register_c_yui_gobj_tree_js, register_c_yui_json_graph, register_c_yui_main, register_c_yui_map, register_c_yui_nav, register_c_yui_pager, register_c_yui_routing, register_c_yui_shell, register_c_yui_tabs, register_c_yui_treedb_graph, register_c_yui_treedb_topic_with_form, register_c_yui_treedb_topics, register_c_yui_uplot, register_c_yui_window, register_c_yui_window_manager, register_c_yui_wizard, removeChildElements, removeClasses, set_active_state, set_cancel_state, set_submit_state, setup_dev, themes, toggleClasses, yui_shell_close_drawer, yui_shell_close_dropdown, yui_shell_confirm_ok, yui_shell_confirm_yesno, yui_shell_confirm_yesnocancel, yui_shell_navigate, yui_shell_open_drawer, yui_shell_pop_escape, yui_shell_push_escape, yui_shell_refresh_avatars, yui_shell_set_avatar_provider, yui_shell_set_connection_state, yui_shell_set_toolbar_item_icon, yui_shell_set_translator, yui_shell_show_error, yui_shell_show_info, yui_shell_show_modal, yui_shell_show_warning, yui_shell_toggle_drawer, yui_toolbar };
 
 //# sourceMappingURL=gobj-ui.es.js.map