@yuneta/gobj-ui 5.2.1 → 5.3.0

package/dist/gobj-ui.es.js

@@ -339,6 +339,11 @@ function _is_non_empty_string(v) {
 *   - root `/` is NEVER an ancestor catch-all (it only matches
 *     exactly): otherwise every typo route would silently mount
 *     the home view and the unknown-route diagnostic would die.
+*     ONE exception, opt-in: an entry whose target declares
+*     `owns_subtree` is a view that resolves the tail ITSELF and
+*     says so when a segment names nothing — a C_YUI_NODE tree
+*     rooted at `/`.  The diagnostic is not lost there, it moves
+*     one layer down to whoever actually knows the names.
 *   - nothing matched                  → entry as found (may be
 *     null or a targetless submenu parent), subpath "".
 ************************************************************/
@@ -366,7 +371,15 @@ function resolve_route(item_index, route) {
 		while (parts.length > 0 && (!entry || !entry.target)) {
 			parts.pop();
 			let cand = "/" + parts.join("/");
-			if (cand === "/") break;
+			if (cand === "/") {
+				let root = item_index["/"];
+				if (root && root.target && root.target.owns_subtree) {
+					entry = root;
+					matched_route = "/";
+					subpath = route.replace(/^\/+/, "");
+				}
+				break;
+			}
 			let e = item_index[cand];
 			if (e && e.target) {
 				entry = e;
@@ -483,6 +496,38 @@ function collect_routes(nodes, into) {
 	}
 }
 /************************************************************
+*  A route can be reached from more than one surface: the primary
+*  menu, a drawer, an account dropdown.  Each occurrence rendered
+*  its whole SUBTREE, so a branch reachable three ways was drawn
+*  three times — bearable when a section had four children, noise
+*  once a node tree hangs there with fourteen.
+*
+*  Exactly one occurrence owns the subtree; the others become
+*  references (`ref: true`, no children) — still real, clickable
+*  routes, just not repeated structure.
+*
+*  Who owns it: the first occurrence in the NAV, then in `other`,
+*  then in the toolbar.  The nav is where the app's structure
+*  lives; a toolbar entry pointing at the same route is a
+*  shortcut — a non-structural edge — and hanging the tree off it
+*  would bury the whole structure inside the account menu.
+************************************************************/
+function dedupe_subtrees(groups) {
+	let owner = {};
+	let visit = (node) => {
+		if (node.route) {
+			if (owner[node.route] === void 0) owner[node.route] = node;
+			else if (owner[node.route] !== node) {
+				node.ref = true;
+				node.children = [];
+				return;
+			}
+		}
+		if (Array.isArray(node.children)) node.children.forEach(visit);
+	};
+	for (let group of groups) group.forEach(visit);
+}
+/************************************************************
 *  Mark "you are here": the node whose route best matches
 *  current_route — exact hit wins, else the LONGEST declared
 *  route that is a path-prefix of it (the base view of a deep
@@ -492,6 +537,7 @@ function mark_current(groups, current_route) {
 	if (!current_route) return;
 	let best = null;
 	let visit = (n) => {
+		if (n.ref) return;
 		if (n.route) {
 			if (n.route === current_route) {
 				if (!best || best.node.route !== current_route) best = {
@@ -609,6 +655,11 @@ function build_nav_map(input) {
 		});
 	}
 	other.forEach(enrich);
+	dedupe_subtrees([
+		nav,
+		other,
+		toolbar
+	]);
 	mark_current([
 		toolbar,
 		nav,
@@ -770,6 +821,7 @@ var attrs_table$17 = [
 	SDATA(data_type_t.DTP_JSON, "config", 0, null, "Shell declarative config (zones, menu, stages, toolbar)"),
 	SDATA(data_type_t.DTP_STRING, "default_route", 0, "", "Fallback route if hash is empty"),
 	SDATA(data_type_t.DTP_STRING, "current_route", 0, "", "Current active route"),
+	SDATA(data_type_t.DTP_BOOLEAN, "remember_section_position", 0, false, "A menu click returns to the last position visited inside that section"),
 	SDATA(data_type_t.DTP_BOOLEAN, "use_hash", 0, true, "Bind navigation to window.location.hash"),
 	SDATA(data_type_t.DTP_POINTER, "mount_element", 0, null, "HTMLElement to mount shell into (default: document.body)"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "Root HTMLElement of the shell"),
@@ -781,6 +833,7 @@ var PRIVATE_DATA$17 = {
 	stages: {},
 	navs: [],
 	item_index: {},
+	section_pos: {},
 	sub_routes: {},
 	event_handlers: {},
 	hash_handler: null,
@@ -828,6 +881,8 @@ function mt_start$14(gobj) {
 		]));
 		return;
 	}
+	let shell_cfg = config.shell || {};
+	if (typeof shell_cfg.remember_section_position === "boolean") gobj_write_attr(gobj, "remember_section_position", shell_cfg.remember_section_position);
 	build_item_index(gobj, config);
 	instantiate_menus(gobj, config);
 	build_toolbar(gobj, config);
@@ -1187,6 +1242,59 @@ function build_item_index(gobj, config) {
 			menu_id: prev && prev.menu_id || ""
 		};
 	}
+	index_node_tree(gobj, config);
+}
+/************************************************************
+*  config.shell.tree — the navigation is a TREE OF NODES and
+*  its root is where the shell's own root used to be.
+*
+*  The shell keeps what it is good at, the SPACE: zones, layers,
+*  stages, toolbar, overlays, theme, breakpoints.  It stops being
+*  the owner of the menu: the root C_YUI_NODE holds the primary
+*  options as its children and projects them into zones (a left
+*  rail, a bottom bar) exactly as `menu.primary.render` used to
+*  say — a per-zone projection is still a projection.
+*
+*  All this does is synthesize ONE route entry.  `owns_subtree`
+*  lets it match as the ancestor of everything (route_resolver),
+*  so the whole url space below it is the tree's `subpath` and no
+*  route table grows.  The unknown-route diagnostic is not lost:
+*  it moves to the node that knows the names of its children.
+*
+*  `menu` and `tree` are not exclusive — an app may declare both
+*  while it migrates — but a tree at "/" owns every route no
+*  other entry claims, which is the point.
+************************************************************/
+function index_node_tree(gobj, config) {
+	let priv = gobj.priv;
+	let tree = config.shell && config.shell.tree || null;
+	if (!tree) return;
+	if (!is_object(tree)) {
+		log_error("C_YUI_SHELL: config.shell.tree must be an object");
+		return;
+	}
+	let base_route = normalize_route(tree.base_route || "/");
+	let kw = {};
+	for (let key of Object.keys(tree)) {
+		if (key.charAt(0) === "_" || key === "stage") continue;
+		kw[key] = tree[key];
+	}
+	kw.base_route = base_route;
+	if (!kw.node_id) kw.node_id = "root";
+	let prev = priv.item_index[base_route];
+	priv.item_index[base_route] = {
+		item: prev && prev.item || null,
+		parent_item: prev && prev.parent_item || null,
+		stage: tree.stage || "main",
+		menu_id: prev && prev.menu_id || "",
+		target: {
+			stage: tree.stage || "main",
+			gclass: "C_YUI_NODE",
+			lifecycle: "keep_alive",
+			owns_subtree: true,
+			kw
+		}
+	};
 }
 /************************************************************
 *  For each menu declared: for each zone hosting it, create
@@ -1431,6 +1539,7 @@ function navigate_to(gobj, route, depth, no_drain) {
 	if ($c) $c.classList.remove("is-hidden");
 	stage.active_route = matched_route;
 	gobj_write_attr(gobj, "current_route", route);
+	remember_position(gobj, route);
 	update_secondary_nav_visibility(gobj, entry);
 	close_all_drawers(gobj);
 	close_toolbar_dropdown(gobj);
@@ -2055,7 +2164,11 @@ function pop_escape(gobj, handler) {
 *    - navigate_to() drains (closes) every registered overlay when the
 *      RESTING route changes — overlays are transient and do not
 *      outlive the view they float above.  An action route or a
-*      subpath-only move keeps them open.
+*      subpath-only move keeps them open.  An overlay registered with
+*      `keep_on_navigate` opts OUT of the drain: it is a NAVIGATION
+*      PANEL, not a thing floating above one view — the site map is
+*      the reference case, where every row click is meant to move the
+*      user with the panel still up.
 *    - a drained/buried entry is left INERT: overlay_dismissed only
 *      history.back()s when the marker is the CURRENT history entry
 *      (adjacent, so the back() is invisible) — never over real route
@@ -2068,14 +2181,20 @@ function pop_escape(gobj, handler) {
 function drain_overlays(gobj) {
 	let priv = gobj.priv;
 	if (!priv || !priv.overlay_stack) return;
+	let kept = [];
 	while (priv.overlay_stack.length > 0) {
 		let entry = priv.overlay_stack.pop();
+		if (entry.keep_on_navigate) {
+			kept.unshift(entry);
+			continue;
+		}
 		try {
 			entry.close();
 		} catch (e) {
 			log_warning(`C_YUI_SHELL: overlay close on navigation failed: ${e}`);
 		}
 	}
+	for (let entry of kept) priv.overlay_stack.push(entry);
 }
 function retag_overlay_hash(gobj, st, hash) {
 	let priv = gobj.priv;
@@ -2083,7 +2202,7 @@ function retag_overlay_hash(gobj, st, hash) {
 	let entry = priv.overlay_stack.find((e) => e.id === st.__yui_overlay__);
 	if (entry) entry.hash = hash;
 }
-function push_overlay_history(gobj, close) {
+function push_overlay_history(gobj, close, opts) {
 	let priv = gobj.priv;
 	if (!priv || !priv.overlay_stack || !gobj_read_attr(gobj, "use_hash")) return null;
 	let entry = {
@@ -2214,6 +2333,7 @@ function update_secondary_nav_visibility(gobj, entry) {
 function ac_nav_clicked(gobj, event, kw, src) {
 	let route = kw && kw.route || "";
 	if (empty_string(route)) return 0;
+	route = remembered_position(gobj, route);
 	if (gobj_read_attr(gobj, "use_hash") && !route_restores_url(gobj, route)) {
 		let target_hash = route_to_hash(route);
 		if (window.location.hash !== target_hash) window.location.hash = target_hash;
@@ -2297,6 +2417,48 @@ function register_c_yui_shell() {
 *  bottom of the file to keep the skeleton layout intact.
 ***************************************************************/
 /************************************************************
+*  Last position inside each section — the routes a MENU CLICK
+*  returns to (`remember_section_position`).
+*
+*  A section is a menu item's route; anything under it is a
+*  position inside it.  The memory MIRRORS the url and is never
+*  the authority for it (ROUTING.md §3): it lives for the page,
+*  not on disk, and only a click on the section's own menu item
+*  consults it.  Typing the url, a deep link, Back/Forward and
+*  programmatic navigation all land exactly where they say —
+*  which is the property that would be lost if this were stored
+*  and applied everywhere.
+************************************************************/
+function remember_position(gobj, route) {
+	let priv = gobj.priv;
+	if (!gobj_read_attr(gobj, "remember_section_position")) return;
+	for (let section of Object.keys(priv.item_index)) {
+		if (section === "/") continue;
+		if (route === section || route.indexOf(section + "/") === 0) priv.section_pos[section] = route;
+	}
+}
+/************************************************************
+*  Where a click on `route` should actually land: the last
+*  position inside it, when there is one and it still resolves.
+*  A remembered route whose node has since disappeared is
+*  dropped rather than followed — the tree is allowed to change
+*  under a memory.
+************************************************************/
+function remembered_position(gobj, route) {
+	let priv = gobj.priv;
+	if (!gobj_read_attr(gobj, "remember_section_position")) return route;
+	let current = gobj_read_attr(gobj, "current_route") || "";
+	if (current === route || current.indexOf(route + "/") === 0) return route;
+	let last = priv.section_pos[route];
+	if (!last || last === route) return route;
+	let r = resolve_route(priv.item_index, last);
+	if (!r || !r.entry || !r.entry.target) {
+		delete priv.section_pos[route];
+		return route;
+	}
+	return last;
+}
+/************************************************************
 *  Resolve the shell that governs `gobj`: the nearest
 *  C_YUI_SHELL ancestor, else the last shell created on the
 *  page (apps have exactly one).  Null when no shell exists —
@@ -2398,8 +2560,8 @@ function yui_shell_push_escape(shell_gobj, layer, handler) {
 function yui_shell_pop_escape(shell_gobj, handler) {
 	pop_escape(shell_gobj, handler);
 }
-function yui_shell_register_overlay(shell_gobj, close_fn) {
-	return push_overlay_history(shell_gobj, close_fn);
+function yui_shell_register_overlay(shell_gobj, close_fn, opts) {
+	return push_overlay_history(shell_gobj, close_fn, opts);
 }
 function yui_shell_overlay_dismissed(shell_gobj, overlay) {
 	overlay_dismissed(shell_gobj, overlay);
@@ -3003,6 +3165,7 @@ var attrs_table$16 = [
 	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"),
 	SDATA(data_type_t.DTP_BOOLEAN, "back_dismissable", 0, true, "Browser Back closes this window (floating overlays only; ignored when it has a `manager`)"),
+	SDATA(data_type_t.DTP_BOOLEAN, "keep_on_navigate", 0, false, "This window is a navigation PANEL: a route change does not close it"),
 	SDATA(data_type_t.DTP_POINTER, "back_overlay", 0, null, "Internal: overlay-history entry (Back-button integration)"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "Internal: Window container element"),
 	SDATA(data_type_t.DTP_STRING, "window_id", 0, "", "Internal: Window ID"),
@@ -3042,7 +3205,7 @@ function mt_create$16(gobj) {
 		let shell = yui_shell_of(gobj);
 		if (shell) gobj_write_attr(gobj, "back_overlay", yui_shell_register_overlay(shell, function() {
 			close_window(gobj);
-		}));
+		}, { keep_on_navigate: gobj_read_bool_attr(gobj, "keep_on_navigate") }));
 	}
 	let on_win_resize = function() {
 		handleResize(gobj);
@@ -10488,10 +10651,19 @@ function leaf_row(key, value, depth) {
 	];
 }
 /************************************************************
-*   Depth indentation (inline style keeps it CSS-framework free)
+*   Depth indentation (inline style keeps it CSS-framework free).
+*
+*   FOUR characters per level, house rule: structure is read as
+*   indentation, and it has to be the same four everywhere — this
+*   viewer, the raw dump behind it, the site map's tree.  `ch` is
+*   the character width of the row's own font, so the rows line up
+*   with the monospace text they carry instead of drifting from it
+*   at some zoom level.
 ************************************************************/
+var INDENT_CH = 4;
+var INDENT_PAD = .4;
 function row_indent(depth) {
-	return "padding-left:" + (.4 + depth * 1.1) + "em;";
+	return "padding-left:" + (INDENT_PAD + depth * INDENT_CH) + "ch;background-size:" + depth * INDENT_CH + "ch 100%;";
 }
 /************************************************************
 *   String() that never throws on a non-primitive
@@ -10631,7 +10803,7 @@ function ac_collapse_all$1(gobj, event, kw, src) {
 function ac_copy_all(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	if (priv.root === null || priv.root === void 0) return 0;
-	let text = JSON.stringify(priv.root, null, 2);
+	let text = JSON.stringify(priv.root, null, 4);
 	if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).catch(function(e) {
 		log_error(`${GCLASS_NAME$8}: clipboard write failed: ${e}`);
 	});
@@ -12488,6 +12660,13 @@ function cards_grid_descriptor(items, show_label) {
 *          "cards"      — grid of tappable cards (section-index landing;
 *                         mounted as a stage view by C_YUI_SHELL when a
 *                         primary item declares submenu.index)
+*          "breadcrumb" — the PATH as one line ("Cards › Energy › South
+*                         hall › Meter 3"), each crumb a link to that
+*                         level.  Unlike every other layout its items
+*                         are not a node's children but the trail down
+*                         to where the user is: the second way to show
+*                         depth, for when stacking one strip per level
+*                         costs more vertical room than it is worth.
 *          "backbar"    — single "← <section>" link back to the section
 *                         index; the mobile replacement of the tab strip
 *                         for submenu.index sections (the shell collapses
@@ -12535,7 +12714,8 @@ var SUPPORTED_LAYOUTS = [
 	"submenu",
 	"accordion",
 	"cards",
-	"backbar"
+	"backbar",
+	"breadcrumb"
 ];
 function is_decorative(it) {
 	return !!(it && (it.type === "header" || it.type === "divider"));
@@ -12641,6 +12821,9 @@ function build_ui$6(gobj) {
 		case "backbar":
 			$container = render_backbar(gobj);
 			break;
+		case "breadcrumb":
+			$container = render_breadcrumb(gobj, items);
+			break;
 		default: $container = render_vertical(gobj, items);
 	}
 	$container.setAttribute("data-nav-zone", zone);
@@ -12661,6 +12844,7 @@ function build_ui$6(gobj) {
 	}
 	wire_clicks(gobj, $container);
 	gobj_write_attr(gobj, "$container", $container);
+	apply_active_route(gobj);
 }
 /************************************************************
 *  Rebuild the nav DOM in place from the current menu_items.
@@ -12679,7 +12863,6 @@ function rebuild(gobj) {
 	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
@@ -12833,6 +13016,74 @@ function render_cards(gobj, items) {
 *  collapses the whole secondary zone (tabs and cards never
 *  coexist), so the bar needs no self-hiding logic.
 ************************************************************/
+/************************************************************
+*  breadcrumb: the trail to here, one line.
+*
+*  Bulma's own markup (nav.breadcrumb > ul > li, separators drawn by
+*  CSS), with the SAME data-route/data-item-id contract as every
+*  other layout — so the delegated click handler and the active
+*  highlight work unchanged, and the last crumb marks itself through
+*  `active_route` like a tab does.
+************************************************************/
+function render_breadcrumb(gobj, items) {
+	let show_label = gobj_read_attr(gobj, "show_label");
+	let lis = [];
+	for (let it of items || []) {
+		if (is_decorative(it)) continue;
+		let children = [];
+		if (it.icon) children.push([
+			"span",
+			{ class: "icon is-small" },
+			["i", {
+				class: it.icon,
+				"aria-hidden": "true"
+			}]
+		]);
+		if (show_label !== false) {
+			let label = it.name || it.id || "";
+			children.push([
+				"span",
+				{
+					class: "yui-nav-label",
+					i18n: label
+				},
+				label
+			]);
+		}
+		let a_attrs = {
+			class: "yui-nav-item yui-nav-crumb",
+			href: it.route ? "#" + it.route : "#",
+			"data-item-id": it.id,
+			"data-route": it.route || "",
+			"data-disabled": it.disabled ? "1" : "0"
+		};
+		if (it.name) {
+			a_attrs["aria-label"] = it.name;
+			a_attrs["data-i18n-aria-label"] = it.name;
+		}
+		lis.push([
+			"li",
+			{},
+			[[
+				"a",
+				a_attrs,
+				children
+			]]
+		]);
+	}
+	return createElement2([
+		"nav",
+		{
+			class: "breadcrumb is-small",
+			"aria-label": "breadcrumbs"
+		},
+		[[
+			"ul",
+			{},
+			lis
+		]]
+	]);
+}
 function render_backbar(gobj) {
 	let back_route = gobj_read_attr(gobj, "back_route") || "";
 	let label = gobj_read_attr(gobj, "nav_label") || "";
@@ -13238,6 +13489,7 @@ function register_c_yui_nav() {
 //#endregion
 //#region src/shell_route_map.js
 var WIN_NAME$1 = "shell-route-map-window";
+var __show_refs__ = true;
 var __open_modal__ = null;
 function scroll_to_current($body) {
 	let $cur = $body.querySelector(".ROUTEMAP_CURRENT");
@@ -13283,6 +13535,16 @@ function render_node(node) {
 		{ class: "ROUTEMAP_EVENT" },
 		node.event
 	]);
+	if (node.ref) row.push([
+		"span",
+		{
+			class: "ROUTEMAP_REF",
+			i18n: "shown above",
+			title: "shown above",
+			"data-i18n-title": "shown above"
+		},
+		"shown above"
+	]);
 	if (node.current) row.push([
 		"span",
 		{
@@ -13291,7 +13553,7 @@ function render_node(node) {
 		},
 		"you are here"
 	]);
-	let row_class = node.current ? " ROUTEMAP_CURRENT" : "";
+	let row_class = (node.current ? " ROUTEMAP_CURRENT" : "") + (node.ref ? " ROUTEMAP_IS_REF" : "");
 	let $row;
 	if (node.route) $row = createElement2([
 		"a",
@@ -13324,21 +13586,37 @@ function render_node(node) {
 *  descendant matches (keep the ancestor path). Empty `q` shows all.
 *  Matches against the visible row text (name + route + event), so it
 *  honours the current translation. Returns whether the <li> is shown.
+*
+*  `show_refs` off hides the reference rows — the second and third
+*  place a route is reachable from, which carry no structure. They are
+*  hidden by DEFAULT: in an app with a drawer and an account menu they
+*  are a third of the map, and what a reader comes here for is the
+*  structure. A ref stays hidden even inside a matched subtree — an
+*  ancestor match must not smuggle it back in — and a group left with
+*  nothing but refs collapses with them, since a group is only ever
+*  shown by what it contains.
 ***************************************************************/
-function filter_li($li, q, ancestor_match) {
+function filter_li($li, q, ancestor_match, show_refs) {
 	let $row = $li.querySelector(":scope > .ROUTEMAP_ROW");
 	let text = $row ? ($row.textContent || "").toLowerCase() : "";
+	let hidden_ref = !show_refs && !!($row && $row.classList.contains("ROUTEMAP_IS_REF"));
 	let self_match = q === "" || text.indexOf(q) >= 0;
-	let show_all = ancestor_match || self_match;
+	let show_all = (ancestor_match || self_match) && !hidden_ref;
 	let any_child = false;
 	let $ul = $li.querySelector(":scope > ul");
 	if ($ul) {
 		let kids = $ul.children;
-		for (let i = 0; i < kids.length; i++) if (filter_li(kids[i], q, show_all)) any_child = true;
+		for (let i = 0; i < kids.length; i++) if (filter_li(kids[i], q, show_all, show_refs)) any_child = true;
 	}
-	let visible = show_all || any_child;
+	let is_group = !!($row && $row.classList.contains("ROUTEMAP_STRUCT"));
+	let had_children = !!($ul && $ul.children.length);
+	if (is_group && had_children && !any_child && !show_refs) {
+		let kids = $ul.children;
+		for (let i = 0; i < kids.length; i++) if (filter_li(kids[i], q, show_all, true)) any_child = true;
+	}
+	let visible = is_group && had_children ? any_child || q !== "" && self_match : (show_all || any_child) && !hidden_ref;
 	$li.style.display = visible ? "" : "none";
-	if ($row) $row.classList.toggle("ROUTEMAP_MATCH", q !== "" && self_match);
+	if ($row) $row.classList.toggle("ROUTEMAP_MATCH", q !== "" && self_match && visible);
 	return visible;
 }
 /***************************************************************
@@ -13348,16 +13626,17 @@ function filter_li($li, q, ancestor_match) {
 *  on a resting-route change.  `on_jump()` closes the host for the
 *  one click that navigates nowhere (the current route).
 ***************************************************************/
-function build_body(shell, t, on_jump) {
+function build_body(shell, t) {
 	let map = yui_shell_nav_map(shell);
-	let children = [{
+	let children = [].concat(map.nav);
+	if (Array.isArray(map.toolbar) && map.toolbar.length) children.push({
 		label: "toolbar",
 		icon: "",
 		route: "",
 		event: "",
 		kind: "group",
 		children: map.toolbar
-	}].concat(map.nav);
+	});
 	if (Array.isArray(map.other) && map.other.length) children.push({
 		label: "other routes",
 		icon: "",
@@ -13410,21 +13689,53 @@ function build_body(shell, t, on_jump) {
 			"matches"
 		]]
 	]);
+	let $refs_input = createElement2(["input", {
+		class: "ROUTEMAP_REFS_INPUT",
+		type: "checkbox"
+	}]);
+	if (__show_refs__) $refs_input.checked = true;
+	let $refs_toggle = createElement2([
+		"label",
+		{
+			class: "checkbox is-size-7 ROUTEMAP_REFS_TOGGLE",
+			title: "show references",
+			"data-i18n-title": "show references"
+		},
+		[$refs_input, [
+			"span",
+			{
+				class: "ml-1",
+				i18n: "show references"
+			},
+			"show references"
+		]]
+	]);
 	let $search_row = createElement2([
 		"div",
 		{ class: "ROUTEMAP_SEARCH_ROW mb-2" },
-		[$search_ctrl, $count]
+		[
+			$search_ctrl,
+			$count,
+			$refs_toggle
+		]
 	]);
-	$search.addEventListener("input", function() {
+	let apply_filter = function() {
 		let q = ($search.value || "").trim().toLowerCase();
 		let $root_li = $tree.querySelector(".ROUTEMAP_ROOT > li");
-		if ($root_li) filter_li($root_li, q, false);
+		if ($root_li) filter_li($root_li, q, false, __show_refs__);
 		if (q === "") $count.classList.add("is-hidden");
 		else {
 			$count_n.textContent = $tree.querySelectorAll(".ROUTEMAP_MATCH").length;
 			$count.classList.remove("is-hidden");
 		}
+	};
+	$search.addEventListener("input", apply_filter);
+	$refs_input.addEventListener("change", function() {
+		__show_refs__ = !!$refs_input.checked;
+		apply_filter();
 	});
+	if ($tree.querySelectorAll(".ROUTEMAP_IS_REF").length === 0) $refs_toggle.classList.add("is-hidden");
+	apply_filter();
 	let $body = createElement2([
 		"div",
 		{ class: "C_YUI_SHELL_ROUTEMAP ROUTEMAP_BODY" },
@@ -13467,19 +13778,55 @@ function build_body(shell, t, on_jump) {
 			if ($area.parentNode) $area.parentNode.removeChild($area);
 		}
 	});
-	$body.addEventListener("click", function(ev) {
-		let $link = ev.target && ev.target.closest && ev.target.closest(".ROUTEMAP_LINK");
-		if (!$link) return;
-		let href = $link.getAttribute("href");
-		if (href && typeof window !== "undefined" && window.location.hash === href && typeof on_jump === "function") {
-			ev.preventDefault();
-			on_jump();
+	let on_hash = function() {
+		if (typeof document === "undefined" || !$body.isConnected) {
+			if (typeof window !== "undefined") window.removeEventListener("hashchange", on_hash);
+			return;
 		}
-	});
+		mark_current_row($body, window.location.hash, t);
+	};
+	if (typeof window !== "undefined") window.addEventListener("hashchange", on_hash);
 	refresh_language($body, t);
 	return $body;
 }
 /***************************************************************
+*  Move the "you are here" mark to the row that best matches
+*  `hash`: an exact route wins, else the LONGEST declared route
+*  that is a path-prefix of it (the base view of a deep subpath
+*  position).  Same rule as the model's mark_current(), applied
+*  to the rendered rows so the open panel stays truthful.
+***************************************************************/
+function mark_current_row($body, hash, t) {
+	let route = String(hash || "").replace(/^#/, "");
+	let $best = null;
+	let best_len = -1;
+	for (let $a of $body.querySelectorAll(".ROUTEMAP_LINK")) {
+		let r = String($a.getAttribute("href") || "").replace(/^#/, "");
+		if (!r) continue;
+		if (r === route) {
+			$best = $a;
+			break;
+		}
+		if (route.indexOf(r + "/") === 0 && r.length > best_len) {
+			$best = $a;
+			best_len = r.length;
+		}
+	}
+	for (let $marked of $body.querySelectorAll(".ROUTEMAP_CURRENT")) $marked.classList.remove("ROUTEMAP_CURRENT");
+	if (!$best) return;
+	$best.classList.add("ROUTEMAP_CURRENT");
+	let $badge = $body.querySelector(".ROUTEMAP_HERE");
+	if (!$badge) $badge = createElement2([
+		"span",
+		{
+			class: "ROUTEMAP_HERE",
+			i18n: "you are here"
+		},
+		t ? t("you are here") : "you are here"
+	]);
+	$best.appendChild($badge);
+}
+/***************************************************************
 *  Show the site map. Toggles: a second call closes the open one.
 ***************************************************************/
 function yui_shell_show_route_map(shell, opts) {
@@ -13497,9 +13844,7 @@ function yui_shell_show_route_map(shell, opts) {
 	}
 	if (gclass_find_by_name("C_YUI_WINDOW") !== null) {
 		let win_ref = { gobj: null };
-		let $body = build_body(shell, t, function() {
-			if (win_ref.gobj && is_gobj(win_ref.gobj)) gobj_send_event(win_ref.gobj, "EV_CLOSE_WINDOW", {}, shell);
-		});
+		let $body = build_body(shell, t);
 		let win = gobj_create_service(WIN_NAME$1, "C_YUI_WINDOW", {
 			$parent: yui_shell_popup_layer(shell) || typeof document !== "undefined" && document.getElementById("top-layer") || null,
 			subscriber: null,
@@ -13515,7 +13860,8 @@ function yui_shell_show_route_map(shell, opts) {
 			title: "site map",
 			icon: "yi-bars",
 			body: $body,
-			manager: null
+			manager: gobj_find_service("__window_manager__", false),
+			keep_on_navigate: true
 		}, shell);
 		if (!win) {
 			log_error("C_YUI_SHELL: cannot create the site-map window");
@@ -13527,9 +13873,7 @@ function yui_shell_show_route_map(shell, opts) {
 		return win;
 	}
 	let modal_ref = { modal: null };
-	let $body = build_body(shell, t, function() {
-		if (modal_ref.modal && typeof modal_ref.modal.close === "function") modal_ref.modal.close();
-	});
+	let $body = build_body(shell, t);
 	modal_ref.modal = yui_shell_show_modal(shell, $body, {
 		dialog: true,
 		logical_class: "ROUTEMAP_SHEET",
@@ -51997,7 +52341,7 @@ function render_full(e) {
 	let payload = full_sections(e.kw ? e.kw : e.jn);
 	let text;
 	try {
-		text = JSON.stringify(payload, null, 2);
+		text = JSON.stringify(payload, null, 4);
 	} catch (err) {
 		text = String(payload);
 	}
@@ -52260,7 +52604,7 @@ function info_log(level, msg, hora) {
 		let text;
 		if (lvl === "json") {
 			try {
-				text = JSON.stringify(msg, null, 2);
+				text = JSON.stringify(msg, null, 4);
 			} catch (e) {
 				text = String(msg);
 			}
@@ -52434,7 +52778,7 @@ function traffic_to_text() {
 		out.push(head);
 		let payload = e.kw ? e.kw : e.jn;
 		try {
-			out.push(JSON.stringify(payload, null, 2));
+			out.push(JSON.stringify(payload, null, 4));
 		} catch (err) {
 			out.push(String(payload));
 		}