@yuneta/gobj-ui 7.20.0 → 7.21.0

package/README.md

@@ -426,42 +426,66 @@ with limits, or any equivalent), and hands the subtree back via
 the DOM, so the tree stays bounded regardless of document size. With no
 sentinels present it degrades to a plain client-side collapsible tree.
 
-**Two views, one document.** The toolbar switch (and the `view_mode` attr,
-`"tree"` | `"text"`) turns the tree into the **raw text** of the same working
-document — `JSON.stringify(…, 4)`, four characters per level like every other
-indentation in the house. It is the view for reading a document as it is
-written, selecting a slab of it, or searching it with the browser's own Ctrl+F.
-Two consequences worth knowing:
-
-- Nothing there is lazy. The text prints what the client currently holds,
-  `__collapsed__` sentinels included, because that is honestly what it has.
-  Expand a branch in the tree and the text grows with it.
-- The tree-only controls (search, expand-loaded, collapse-all) hide with the
-  tree; copy stays. A control that can answer nothing is worse than an absent
-  one.
-
-Long lines scroll sideways **inside** the viewer (`white-space: pre` on a
-`max-content`-wide `<pre>`), never on the page body: in a raw dump the
-indentation *is* the structure, and a wrapped line restarts at column 0 and
-lies about the depth of everything under it.
+**Three views, one document.** The toolbar switch (and the `view_mode` attr,
+`"tree"` | `"text"` | `"graph"`) picks which. They answer three different
+questions:
+
+| view | question | notes |
+|---|---|---|
+| `tree` | *where is this value, and what is around it* | the lazy view; the only one that can drill |
+| `text` | *what does this document say, verbatim* | `JSON.stringify(…, 4)`, four characters per level |
+| `graph` | *what shape is this* | a hosted `C_YUI_JSON_GRAPH` child (AntV/G6) |
+
+- **Neither text nor graph is lazy.** Both show what the client currently
+  holds, `__collapsed__` sentinels included, because that is honestly what it
+  has. Drill in the tree and they grow with it.
+- **The tree-only controls** (search, expand-loaded, collapse-all) hide with
+  the tree; copy stays. A control that can answer nothing is worse than an
+  absent one. The graph brings its own zoom/centre toolbar.
+- **The graph child is built on first entry** into graph mode, never in
+  `build_ui`: G6 sizes itself from its container, so a graph created behind
+  `is-hidden` comes up 0×0. `register_c_yui_json()` auto-registers
+  `C_YUI_JSON_GRAPH` (and that register is idempotent, so an app may also
+  register it itself, in either order).
+
+Two layout facts the browser taught this component, both worth keeping:
+
+- In the text view long lines scroll sideways **inside** the viewer
+  (`white-space: pre` on a `max-content`-wide `<pre>`), never on the page body:
+  in a raw dump the indentation *is* the structure, and a wrapped line restarts
+  at column 0 and lies about the depth of everything under it. The `<pre>` must
+  be `max-content` wide or the container reports no overflow and the tail of
+  every long line is unreachable.
+- The graph body carries a **definite `height`** (`24rem`, with
+  `flex: 1 1 auto` so a constrained host still wins). Not `min-height`: a
+  percentage height does not resolve against a box sized by a minimum, and the
+  tree and the text push their own height while a canvas pushes none — so in an
+  unconstrained host the graph came up as a 2px hairline.
 
 **Contract:**
 
-- Attributes: `subscriber`, `title` (i18n key, optional), `json_data` (initial
-  JSON, optional), `view_mode` (`"tree"` default | `"text"`), `$container`
-  (mounted by the parent).
+- Attributes: `subscriber`, `title` (i18n key, optional — hidden on mobile,
+  where the toolbar cannot hold it as well as the buttons), `json_data`
+  (initial JSON, optional), `view_mode` (`"tree"` default | `"text"` |
+  `"graph"`), `$container` (mounted by the parent).
 - Input events: `EV_SET_JSON {json}` (replace the whole document; `ST_EMPTY` →
   `ST_READY`), `EV_SUBTREE_LOADED {path, json}` (splice a fetched subtree),
   `EV_SUBTREE_ERROR {path, error}`, `EV_SET_VIEW_MODE {mode}` (`"tree"` /
-  `"text"`; **no mode = toggle**, which is what the toolbar button sends), plus
-  `EV_REFRESH` / `EV_SHOW` / `EV_HIDE` / `EV_LANGUAGE_CHANGED`.
-- Output event: `EV_EXPAND_PATH {path, size}` (`EVF_OUTPUT_EVENT`) — the parent
-  must declare it in its own FSM (CHILD subscription model).
+  `"text"` / `"graph"`; **no mode advances** to the next view, which is what
+  the two-view toggle did when the list was two long), plus `EV_REFRESH` /
+  `EV_SHOW` / `EV_HIDE` / `EV_LANGUAGE_CHANGED`.
+- Output events: `EV_EXPAND_PATH {path, size}` (`EVF_OUTPUT_EVENT`) — the parent
+  must declare it in its own FSM (CHILD subscription model) — and
+  `EV_JSON_ITEM_CLICKED`, republished from the graph child so the host has one
+  contract and never has to know that child exists (`EVF_NO_WARN_SUBS`: most
+  hosts do not care).
 - Internal (DOM → FSM): `EV_TOGGLE_NODE`, `EV_EXPAND_COLLAPSED`, `EV_SEARCH`,
   `EV_EXPAND_ALL`, `EV_COLLAPSE_ALL`, `EV_COPY_ALL`. Every kw carries only a
   `path` string — never a DOM node or gobj.
-- i18n keys added by the text view: `text view`, `tree view`,
-  `text truncated; collapse some branches`.
+- i18n keys the switch needs: `tree view`, `text view`, `graph view`,
+  `text truncated; collapse some branches`. All spelled out inside `t()` in
+  `view_label()` — never `t(VIEWS[i].key)`, which no `validate-locales` can
+  see (that shipped once, in `7.20.0`).
 - Paths use the kernel delimiter (backtick) and index arrays numerically, so a
   path emitted by the viewer round-trips through `kw_find_path` on the backend.
 

package/dist/gobj-ui.cjs.js

@@ -10277,6 +10277,7 @@ function create_gclass$11(gclass_name) {
 *          Register GClass
 ***************************************************************/
 function register_c_yui_json_graph() {
+	if ((0, _yuneta_gobj_js.gclass_find_by_name)(GCLASS_NAME$11, false)) return 0;
 	return create_gclass$11(GCLASS_NAME$11);
 }
 /************************************************************
@@ -10477,19 +10478,32 @@ function json_text_dump(root, max_chars) {
 *  Only expanded containers are materialised in the DOM, so the tree
 *  stays bounded no matter how large the source document is.
 *
-*  TWO VIEWS over the same working document, chosen by the `view_mode`
-*  attr ("tree" | "text") and switched from the toolbar: the lazy tree
-*  above, and the raw `JSON.stringify(…, 4)` dump of what is currently
-*  loaded.  The text view is what you reach for to read a document as
-*  it is written, to select a slab of it, or to search it with the
-*  browser's own Ctrl+F; it shows the `__collapsed__` sentinels
-*  verbatim, because that is honestly what the client holds.  The
+*  THREE VIEWS over the same working document, chosen by the
+*  `view_mode` attr ("tree" | "text" | "graph") and switched from the
+*  toolbar.  They answer three different questions:
+*
+*      tree    where is this value, and what is around it — the lazy
+*              view above, the only one that can drill.
+*      text    what does this document SAY, verbatim — for reading it
+*              as written, selecting a slab of it, or searching it with
+*              the browser's own Ctrl+F.
+*      graph   what SHAPE is this — nesting as a hierarchy, drawn by a
+*              hosted C_YUI_JSON_GRAPH child (AntV/G6).
+*
+*  Neither text nor graph is lazy: both show what the client currently
+*  holds, `__collapsed__` sentinels included, because that is honestly
+*  what it has.  Drill in the tree and they grow with it.  The
 *  tree-only controls (search, expand/collapse) hide with the tree.
 *
+*  The graph child is built on FIRST entry into graph mode and not
+*  before: G6 measures its container, so a graph created behind
+*  `is-hidden` comes up 0x0, and a viewer nobody switches to graph
+*  should not pay for a canvas.
+*
 *  DOM is self-describing (UPPER_SNAKE logical classes): JSON_VIEWER /
-*  JSON_TOOLBAR / JSON_SEARCH / JSON_VIEW_MODE / JSON_TREE / JSON_TEXT /
-*  JSON_TEXT_BODY / JSON_ROW / JSON_KEY / JSON_VALUE / JSON_SUMMARY /
-*  JSON_COLLAPSED / JSON_TIME.
+*  JSON_TOOLBAR / JSON_SEARCH / JSON_VIEW_SWITCH / JSON_VIEW_MODE /
+*  JSON_TREE / JSON_TEXT / JSON_TEXT_BODY / JSON_GRAPH / JSON_ROW /
+*  JSON_KEY / JSON_VALUE / JSON_SUMMARY / JSON_COLLAPSED / JSON_TIME.
 *
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
@@ -10500,6 +10514,23 @@ function json_text_dump(root, max_chars) {
 var GCLASS_NAME$10 = "C_YUI_JSON";
 var MAX_RENDER_ROWS = 5e3;
 var MAX_TEXT_CHARS = 2e6;
+var VIEWS = [
+	{
+		mode: "tree",
+		icon: "yi-sitemap",
+		key: "tree view"
+	},
+	{
+		mode: "text",
+		icon: "yi-code",
+		key: "text view"
+	},
+	{
+		mode: "graph",
+		icon: "yi-hexagon-nodes",
+		key: "graph view"
+	}
+];
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -10507,7 +10538,7 @@ var attrs_table$10 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "title", 0, "", "Optional header title (i18n key)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "json_data", 0, null, "Initial JSON to render (usually already collapsed)"),
-	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "view_mode", 0, "tree", "View: 'tree' (lazy tree) or 'text' (raw JSON dump)"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "view_mode", 0, "tree", "View: 'tree' (lazy tree), 'text' (raw dump) or 'graph'"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "HTMLElement root, mounted by the parent"),
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
@@ -10520,11 +10551,13 @@ var PRIVATE_DATA$10 = {
 	$tree: null,
 	$text: null,
 	$text_body: null,
+	$graph: null,
+	graph_gobj: null,
 	$search: null,
 	$search_ctl: null,
 	$expand_btn: null,
 	$collapse_btn: null,
-	$mode_btn: null
+	$mode_btns: null
 };
 var __gclass__$10 = null;
 /******************************
@@ -10561,6 +10594,7 @@ function mt_stop$10(gobj) {}
 *          Framework Method: Destroy
 ***************************************************************/
 function mt_destroy$10(gobj) {
+	teardown_graph_child(gobj);
 	destroy_ui$5(gobj);
 }
 /***************************
@@ -10599,6 +10633,14 @@ function build_ui$9(gobj) {
 					style: "flex:1 1 auto; min-height:0; overflow:auto;"
 				},
 				[]
+			],
+			[
+				"div",
+				{
+					class: "JSON_GRAPH is-flex-grow-1 is-hidden",
+					style: "flex:1 1 auto; overflow:hidden;"
+				},
+				[]
 			]
 		]
 	]);
@@ -10609,7 +10651,12 @@ function build_ui$9(gobj) {
 	priv.$search_ctl = $container.querySelector(".JSON_SEARCH_CONTROL");
 	priv.$expand_btn = $container.querySelector(".EV_EXPAND_ALL");
 	priv.$collapse_btn = $container.querySelector(".EV_COLLAPSE_ALL");
-	priv.$mode_btn = $container.querySelector(".JSON_VIEW_MODE");
+	priv.$graph = $container.querySelector(".JSON_GRAPH");
+	priv.$mode_btns = /* @__PURE__ */ new Map();
+	VIEWS.forEach(function(v) {
+		let $btn = $container.querySelector(".JSON_VIEW_MODE_" + v.mode.toUpperCase());
+		if ($btn) priv.$mode_btns.set(v.mode, $btn);
+	});
 	(0, _yuneta_gobj_js.refresh_language)($container, i18next.t);
 }
 /************************************************************
@@ -10625,11 +10672,12 @@ function destroy_ui$5(gobj) {
 	priv.$tree = null;
 	priv.$text = null;
 	priv.$text_body = null;
+	priv.$graph = null;
 	priv.$search = null;
 	priv.$search_ctl = null;
 	priv.$expand_btn = null;
 	priv.$collapse_btn = null;
-	priv.$mode_btn = null;
+	priv.$mode_btns = null;
 }
 /************************************************************
 *   Toolbar: search + tree/text switch + expand-all /
@@ -10641,7 +10689,7 @@ function make_toolbar$2(gobj) {
 	if (title) left_items.push([
 		"span",
 		{
-			class: "JSON_TITLE is-flex is-align-items-center px-2",
+			class: "JSON_TITLE is-flex is-align-items-center px-2 is-hidden-mobile",
 			style: "font-weight:600;",
 			"data-i18n": title
 		},
@@ -10674,7 +10722,7 @@ function make_toolbar$2(gobj) {
 	attach_clear($search_control, $search_input);
 	left_items.push($search_control);
 	let right_items = [
-		view_mode_button(gobj),
+		view_mode_switch(gobj),
 		icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"),
 		icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"),
 		icon_button(gobj, "yi-copy", "EV_COPY_ALL", "copy json")
@@ -10731,74 +10779,174 @@ function icon_button(gobj, icon, event_name, label_key) {
 	];
 }
 /************************************************************
-*   The tree/text switch.
+*   The view switch: one button per view, the current one marked.
 *
-*   It shows the view it takes you TO — the `code` glyph while the
-*   tree is on screen, the `sitemap` glyph while the text is — and
-*   sends EV_SET_VIEW_MODE with no mode, which the action reads as
-*   "toggle".  apply_view_mode() keeps the icon and its i18n keys in
-*   step with the attr.
+*   Three views do not fit a toggle.  A button that CYCLES cannot be
+*   aimed — reaching the graph from the tree would mean passing
+*   through the text and rebuilding it on the way — so each view gets
+*   its own button and says where it goes.  apply_view_mode() moves
+*   the `is-active` mark.
 ************************************************************/
-function view_mode_button(gobj) {
+function view_mode_switch(gobj) {
 	return [
-		"button",
-		{
-			class: "button JSON_VIEW_MODE",
-			style: "width:2.5em;",
-			title: (0, i18next.t)("text view"),
-			"data-i18n-title": "text view",
-			"aria-label": (0, i18next.t)("text view"),
-			"data-i18n-aria-label": "text view"
-		},
-		[[
-			"span",
-			{ class: "icon" },
-			[["i", { class: "yi-code" }]]
-		]],
-		{ click: function(evt) {
-			evt.stopPropagation();
-			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_VIEW_MODE", {}, gobj);
-		} }
+		"div",
+		{ class: "buttons has-addons is-flex-wrap-nowrap mb-0 JSON_VIEW_SWITCH" },
+		VIEWS.map(function(v) {
+			let label = view_label(v.mode);
+			return [
+				"button",
+				{
+					class: `button JSON_VIEW_MODE JSON_VIEW_MODE_${v.mode.toUpperCase()}`,
+					type: "button",
+					style: "width:2.5em;",
+					title: label,
+					"data-i18n-title": v.key,
+					"aria-label": label,
+					"data-i18n-aria-label": v.key
+				},
+				[[
+					"span",
+					{ class: "icon" },
+					[["i", { class: v.icon }]]
+				]],
+				{ click: function(evt) {
+					evt.stopPropagation();
+					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_VIEW_MODE", { mode: v.mode }, gobj);
+				} }
+			];
+		})
 	];
 }
 /************************************************************
-*   The current view, normalised.  Anything but "text" is the tree.
+*   The label of a view, with every key SPELLED OUT inside t().
+*
+*   Never t(VIEWS[i].key): the apps' validate-locales scans for
+*   t("literal"), so a key reached through a variable is a key it
+*   cannot demand — and i18next answers an undefined key with the key
+*   ITSELF, which renders in lower-case English and never changes
+*   language.  That shipped once already (7.20.0, `tree view`); this
+*   table would have hidden all three.
+************************************************************/
+function view_label(mode) {
+	switch (mode) {
+		case "text": return (0, i18next.t)("text view");
+		case "graph": return (0, i18next.t)("graph view");
+		default: return (0, i18next.t)("tree view");
+	}
+}
+/************************************************************
+*   The current view, normalised.  Anything unknown is the tree.
 ************************************************************/
 function current_view_mode(gobj) {
-	return (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "view_mode") === "text" ? "text" : "tree";
+	let mode = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "view_mode");
+	return VIEWS.some((v) => v.mode === mode) ? mode : "tree";
 }
 /************************************************************
 *   Show the chrome of the current view and hide the other's.
 ************************************************************/
 function apply_view_mode(gobj) {
 	let priv = gobj.priv;
-	let text_mode = current_view_mode(gobj) === "text";
-	if (priv.$tree) priv.$tree.classList.toggle("is-hidden", text_mode);
-	if (priv.$text) priv.$text.classList.toggle("is-hidden", !text_mode);
+	let mode = current_view_mode(gobj);
+	let bodies = {
+		tree: priv.$tree,
+		text: priv.$text,
+		graph: priv.$graph
+	};
+	for (let [m, $el] of Object.entries(bodies)) if ($el) $el.classList.toggle("is-hidden", m !== mode);
 	[
 		priv.$search_ctl,
 		priv.$expand_btn,
 		priv.$collapse_btn
 	].forEach(function($el) {
-		if ($el) $el.classList.toggle("is-hidden", text_mode);
+		if ($el) $el.classList.toggle("is-hidden", mode !== "tree");
 	});
-	if (priv.$mode_btn) {
-		let icon = text_mode ? "yi-sitemap" : "yi-code";
-		let key = text_mode ? "tree view" : "text view";
-		let $i = priv.$mode_btn.querySelector("i");
-		if ($i) $i.className = icon;
-		priv.$mode_btn.setAttribute("data-i18n-title", key);
-		priv.$mode_btn.setAttribute("data-i18n-aria-label", key);
-		priv.$mode_btn.setAttribute("title", (0, i18next.t)(key));
-		priv.$mode_btn.setAttribute("aria-label", (0, i18next.t)(key));
+	if (priv.$mode_btns) for (let [m, $btn] of priv.$mode_btns) {
+		$btn.classList.toggle("is-active", m === mode);
+		$btn.setAttribute("aria-pressed", m === mode ? "true" : "false");
 	}
 }
 /************************************************************
 *   Render whichever view is current.
 ************************************************************/
 function render_view(gobj) {
-	if (current_view_mode(gobj) === "text") render_text(gobj);
-	else render_tree(gobj);
+	switch (current_view_mode(gobj)) {
+		case "text":
+			render_text(gobj);
+			break;
+		case "graph":
+			render_graph(gobj);
+			break;
+		default: render_tree(gobj);
+	}
+}
+/************************************************************
+*   Render the graph view.
+*
+*   The C_YUI_JSON_GRAPH child is built HERE, on first entry, and
+*   never in build_ui: G6 sizes itself from its container, and a
+*   container behind `is-hidden` measures 0x0.  By the time this
+*   runs apply_view_mode() has already revealed the body.
+************************************************************/
+function render_graph(gobj) {
+	let priv = gobj.priv;
+	let $graph = priv.$graph;
+	if (!$graph) return;
+	if (priv.root === null || priv.root === void 0) {
+		teardown_graph_child(gobj);
+		$graph.textContent = "";
+		$graph.appendChild((0, _yuneta_gobj_js.createElement2)([
+			"div",
+			{
+				class: "JSON_EMPTY has-text-grey p-3",
+				"data-i18n": "no data"
+			},
+			"no data"
+		]));
+		(0, _yuneta_gobj_js.refresh_language)($graph, i18next.t);
+		return;
+	}
+	if (!priv.graph_gobj) {
+		$graph.textContent = "";
+		if (!build_graph_child(gobj)) return;
+	}
+	(0, _yuneta_gobj_js.gobj_send_event)(priv.graph_gobj, "EV_LOAD_DATA", {
+		data: priv.root,
+		path: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "title") || ""
+	}, gobj);
+	(0, _yuneta_gobj_js.gobj_send_event)(priv.graph_gobj, "EV_RESIZE", {}, gobj);
+}
+/************************************************************
+*   Build and mount the hosted graph child.  Returns true on
+*   success; every failure path logs.
+************************************************************/
+function build_graph_child(gobj) {
+	let priv = gobj.priv;
+	let graph = (0, _yuneta_gobj_js.gobj_create_pure_child)("graph_" + (0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.gobj_name)(gobj)), "C_YUI_JSON_GRAPH", {}, gobj);
+	if (!graph) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot create the graph viewer`);
+		return false;
+	}
+	let $box = (0, _yuneta_gobj_js.gobj_read_attr)(graph, "$container");
+	if (!$box) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: the graph viewer built no $container`);
+		(0, _yuneta_gobj_js.gobj_destroy)(graph);
+		return false;
+	}
+	priv.$graph.appendChild($box);
+	priv.graph_gobj = graph;
+	(0, _yuneta_gobj_js.gobj_start)(graph);
+	return true;
+}
+/************************************************************
+*   Destroy the hosted graph child, if any.
+************************************************************/
+function teardown_graph_child(gobj) {
+	let priv = gobj.priv;
+	if (priv.graph_gobj) {
+		if ((0, _yuneta_gobj_js.gobj_is_running)(priv.graph_gobj)) (0, _yuneta_gobj_js.gobj_stop)(priv.graph_gobj);
+		(0, _yuneta_gobj_js.gobj_destroy)(priv.graph_gobj);
+		priv.graph_gobj = null;
+	}
 }
 /************************************************************
 *   Render the text view: the whole loaded document, verbatim.
@@ -11289,23 +11437,36 @@ function ac_copy_all(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
-*   EV_SET_VIEW_MODE { mode } — "tree" | "text".
+*   EV_SET_VIEW_MODE { mode } — "tree" | "text" | "graph".
 *
-*   With no mode it toggles, which is what the toolbar button sends.
+*   With no mode it ADVANCES to the next view in VIEWS order, which
+*   is what the two-view toggle did when the list was two long.  The
+*   toolbar buttons always name their mode.
 ************************************************************/
 function ac_set_view_mode(gobj, event, kw, src) {
 	let mode = kw.mode;
-	if (mode === void 0 || mode === null || mode === "") mode = current_view_mode(gobj) === "text" ? "tree" : "text";
-	else if (mode !== "tree" && mode !== "text") {
+	if (mode === void 0 || mode === null || mode === "") mode = VIEWS[(VIEWS.findIndex((v) => v.mode === current_view_mode(gobj)) + 1) % VIEWS.length].mode;
+	else if (!VIEWS.some((v) => v.mode === mode)) {
 		(0, _yuneta_gobj_js.log_error)(`${GCLASS_NAME$10}: unknown view_mode '${mode}'`);
 		return -1;
 	}
+	if (mode === current_view_mode(gobj)) return 0;
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "view_mode", mode);
 	apply_view_mode(gobj);
 	render_view(gobj);
 	return 0;
 }
 /************************************************************
+*   EV_JSON_ITEM_CLICKED — from the hosted graph child.
+*
+*   Republished under this gclass's own name so the host has ONE
+*   contract and never has to know the child exists.
+************************************************************/
+function ac_json_item_clicked(gobj, event, kw, src) {
+	(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_JSON_ITEM_CLICKED", kw);
+	return 0;
+}
+/************************************************************
 *   EV_LANGUAGE_CHANGED — re-translate chrome + re-render
 ************************************************************/
 function ac_language_changed$3(gobj, event, kw, src) {
@@ -11393,6 +11554,11 @@ function create_gclass$10(gclass_name) {
 			ac_set_json,
 			null
 		],
+		[
+			"EV_JSON_ITEM_CLICKED",
+			ac_json_item_clicked,
+			null
+		],
 		[
 			"EV_SUBTREE_LOADED",
 			ac_subtree_loaded,
@@ -11470,6 +11636,7 @@ function create_gclass$10(gclass_name) {
 		["EV_COLLAPSE_ALL", 0],
 		["EV_COPY_ALL", 0],
 		["EV_SET_VIEW_MODE", 0],
+		["EV_JSON_ITEM_CLICKED", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_LANGUAGE_CHANGED", 0],
 		["EV_REFRESH", 0],
 		["EV_SHOW", 0],
@@ -11485,6 +11652,7 @@ function create_gclass$10(gclass_name) {
 ***************************************************************/
 function register_c_yui_json() {
 	if ((0, _yuneta_gobj_js.gclass_find_by_name)(GCLASS_NAME$10, false)) return 0;
+	if (!(0, _yuneta_gobj_js.gclass_find_by_name)("C_YUI_JSON_GRAPH", false)) register_c_yui_json_graph();
 	return create_gclass$10(GCLASS_NAME$10);
 }
 //#endregion