@yuneta/gobj-ui 7.19.4 → 7.20.1

package/README.md

@@ -426,19 +426,42 @@ 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.
+
 **Contract:**
 
 - Attributes: `subscriber`, `title` (i18n key, optional), `json_data` (initial
-  JSON, optional), `$container` (mounted by the parent).
+  JSON, optional), `view_mode` (`"tree"` default | `"text"`), `$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}`, plus `EV_REFRESH` / `EV_SHOW` / `EV_HIDE` /
-  `EV_LANGUAGE_CHANGED`.
+  `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).
 - 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`.
 - 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

@@ -10416,6 +10416,39 @@ function format_epoch(value) {
 	if (isNaN(d.getTime())) return null;
 	return d.toLocaleString();
 }
+/************************************************************
+*   The text view's payload: the document as text, indented
+*   four characters, cut at `max_chars`.
+*
+*   Returns {text, capped}.  `capped` is what the caller
+*   announces under the dump — a cut that is not announced
+*   reads as a document that ends there.
+************************************************************/
+function json_text_dump(root, max_chars) {
+	let text;
+	try {
+		text = JSON.stringify(root, null, 4);
+	} catch (e) {
+		return {
+			text: "",
+			capped: false,
+			error: String(e)
+		};
+	}
+	if (text === void 0) return {
+		text: "",
+		capped: false,
+		error: "not representable as JSON"
+	};
+	if (typeof max_chars === "number" && max_chars > 0 && text.length > max_chars) return {
+		text: text.slice(0, max_chars),
+		capped: true
+	};
+	return {
+		text,
+		capped: false
+	};
+}
 //#endregion
 //#region src/c_yui_json.js
 /***********************************************************************
@@ -10444,9 +10477,19 @@ function format_epoch(value) {
 *  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
+*  tree-only controls (search, expand/collapse) hide with the tree.
+*
 *  DOM is self-describing (UPPER_SNAKE logical classes): JSON_VIEWER /
-*  JSON_TOOLBAR / JSON_SEARCH / JSON_TREE / JSON_ROW / JSON_KEY /
-*  JSON_VALUE / JSON_SUMMARY / JSON_COLLAPSED / JSON_TIME.
+*  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.
 *
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
@@ -10456,6 +10499,7 @@ function format_epoch(value) {
 ***************************************************************/
 var GCLASS_NAME$10 = "C_YUI_JSON";
 var MAX_RENDER_ROWS = 5e3;
+var MAX_TEXT_CHARS = 2e6;
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -10463,6 +10507,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_POINTER, "$container", 0, null, "HTMLElement root, mounted by the parent"),
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
@@ -10473,7 +10518,13 @@ var PRIVATE_DATA$10 = {
 	errors: null,
 	search: "",
 	$tree: null,
-	$search: null
+	$text: null,
+	$text_body: null,
+	$search: null,
+	$search_ctl: null,
+	$expand_btn: null,
+	$collapse_btn: null,
+	$mode_btn: null
 };
 var __gclass__$10 = null;
 /******************************
@@ -10491,6 +10542,7 @@ function mt_create$10(gobj) {
 	let json_data = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "json_data");
 	if (json_data !== null && json_data !== void 0) priv.root = (0, _yuneta_gobj_js.json_deep_copy)(json_data);
 	build_ui$9(gobj);
+	apply_view_mode(gobj);
 	let subscriber = (0, _yuneta_gobj_js.gobj_read_pointer_attr)(gobj, "subscriber");
 	if (!subscriber) subscriber = (0, _yuneta_gobj_js.gobj_parent)(gobj);
 	(0, _yuneta_gobj_js.gobj_subscribe_event)(gobj, null, {}, subscriber);
@@ -10499,7 +10551,7 @@ function mt_create$10(gobj) {
 *          Framework Method: Start
 ***************************************************************/
 function mt_start$10(gobj) {
-	render_tree(gobj);
+	render_view(gobj);
 }
 /***************************************************************
 *          Framework Method: Stop
@@ -10526,22 +10578,38 @@ function build_ui$9(gobj) {
 			class: "C_YUI_JSON JSON_VIEWER view-card",
 			style: "height:100%; display:flex; flex-direction:column;"
 		},
-		[[
-			"div",
-			{ class: "JSON_TOOLBAR is-flex-grow-0" },
-			[$toolbar]
-		], [
-			"div",
-			{
-				class: "JSON_TREE is-flex-grow-1",
-				style: "flex:1 1 auto; min-height:0; overflow:auto;"
-			},
-			[]
-		]]
+		[
+			[
+				"div",
+				{ class: "JSON_TOOLBAR is-flex-grow-0" },
+				[$toolbar]
+			],
+			[
+				"div",
+				{
+					class: "JSON_TREE is-flex-grow-1",
+					style: "flex:1 1 auto; min-height:0; overflow:auto;"
+				},
+				[]
+			],
+			[
+				"div",
+				{
+					class: "JSON_TEXT is-flex-grow-1 is-hidden",
+					style: "flex:1 1 auto; min-height:0; overflow:auto;"
+				},
+				[]
+			]
+		]
 	]);
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "$container", $container);
 	priv.$tree = $container.querySelector(".JSON_TREE");
+	priv.$text = $container.querySelector(".JSON_TEXT");
 	priv.$search = $container.querySelector(".JSON_SEARCH");
+	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");
 	(0, _yuneta_gobj_js.refresh_language)($container, i18next.t);
 }
 /************************************************************
@@ -10555,10 +10623,17 @@ function destroy_ui$5(gobj) {
 		(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "$container", null);
 	}
 	priv.$tree = null;
+	priv.$text = null;
+	priv.$text_body = null;
 	priv.$search = null;
+	priv.$search_ctl = null;
+	priv.$expand_btn = null;
+	priv.$collapse_btn = null;
+	priv.$mode_btn = null;
 }
 /************************************************************
-*   Toolbar: search + expand-all / collapse-all / copy
+*   Toolbar: search + tree/text switch + expand-all /
+*   collapse-all / copy
 ************************************************************/
 function make_toolbar$2(gobj) {
 	let title = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "title");
@@ -10587,7 +10662,7 @@ function make_toolbar$2(gobj) {
 	let $search_control = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{
-			class: "control has-icons-left",
+			class: "control has-icons-left JSON_SEARCH_CONTROL",
 			style: "max-width:22em;"
 		},
 		[$search_input, [
@@ -10599,6 +10674,7 @@ function make_toolbar$2(gobj) {
 	attach_clear($search_control, $search_input);
 	left_items.push($search_control);
 	let right_items = [
+		view_mode_button(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")
@@ -10655,6 +10731,123 @@ function icon_button(gobj, icon, event_name, label_key) {
 	];
 }
 /************************************************************
+*   The tree/text switch.
+*
+*   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.
+************************************************************/
+function view_mode_button(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);
+		} }
+	];
+}
+/************************************************************
+*   The current view, normalised.  Anything but "text" is the tree.
+************************************************************/
+function current_view_mode(gobj) {
+	return (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "view_mode") === "text" ? "text" : "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);
+	[
+		priv.$search_ctl,
+		priv.$expand_btn,
+		priv.$collapse_btn
+	].forEach(function($el) {
+		if ($el) $el.classList.toggle("is-hidden", text_mode);
+	});
+	if (priv.$mode_btn) {
+		let icon = text_mode ? "yi-sitemap" : "yi-code";
+		let key = text_mode ? "tree view" : "text view";
+		let label = text_mode ? (0, i18next.t)("tree view") : (0, i18next.t)("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", label);
+		priv.$mode_btn.setAttribute("aria-label", label);
+	}
+}
+/************************************************************
+*   Render whichever view is current.
+************************************************************/
+function render_view(gobj) {
+	if (current_view_mode(gobj) === "text") render_text(gobj);
+	else render_tree(gobj);
+}
+/************************************************************
+*   Render the text view: the whole loaded document, verbatim.
+*
+*   Unlike the tree, nothing here is lazy — what the client holds is
+*   what it prints, `__collapsed__` sentinels included.  Over
+*   MAX_TEXT_CHARS the dump is cut and the cut is announced.
+************************************************************/
+function render_text(gobj) {
+	let priv = gobj.priv;
+	let $text = priv.$text;
+	if (!$text) return;
+	let scroll_top = $text.scrollTop;
+	$text.textContent = "";
+	priv.$text_body = null;
+	if (priv.root === null || priv.root === void 0) {
+		$text.appendChild((0, _yuneta_gobj_js.createElement2)([
+			"div",
+			{
+				class: "JSON_EMPTY has-text-grey p-3",
+				"data-i18n": "no data"
+			},
+			"no data"
+		]));
+		return;
+	}
+	let dump = json_text_dump(priv.root, MAX_TEXT_CHARS);
+	if (dump.error) (0, _yuneta_gobj_js.log_error)(`${GCLASS_NAME$10}: cannot dump the document as text: ${dump.error}`);
+	let $pre = (0, _yuneta_gobj_js.createElement2)([
+		"pre",
+		{ class: "JSON_TEXT_BODY" },
+		[]
+	]);
+	$pre.textContent = dump.text;
+	$text.appendChild($pre);
+	priv.$text_body = $pre;
+	if (dump.capped) $text.appendChild((0, _yuneta_gobj_js.createElement2)([
+		"div",
+		{
+			class: "JSON_CAPPED has-text-warning p-2",
+			"data-i18n": "text truncated; collapse some branches"
+		},
+		"text truncated; collapse some branches"
+	]));
+	(0, _yuneta_gobj_js.refresh_language)($text, i18next.t);
+	$text.scrollTop = scroll_top;
+}
+/************************************************************
 *   Re-render the whole tree from priv.root + priv.expanded.
 *
 *   Only expanded containers are walked, so the DOM size is
@@ -10985,7 +11178,7 @@ function ac_set_json(gobj, event, kw, src) {
 	priv.expanded.clear();
 	priv.pending.clear();
 	priv.errors.clear();
-	render_tree(gobj);
+	render_view(gobj);
 	return 0;
 }
 /************************************************************
@@ -11000,7 +11193,7 @@ function ac_subtree_loaded(gobj, event, kw, src) {
 	priv.pending.delete(path);
 	priv.errors.delete(path);
 	if (path) priv.expanded.add(path);
-	render_tree(gobj);
+	render_view(gobj);
 	return 0;
 }
 /************************************************************
@@ -11012,7 +11205,7 @@ function ac_subtree_error(gobj, event, kw, src) {
 	priv.pending.delete(path);
 	priv.errors.set(path, kw.error || "error");
 	(0, _yuneta_gobj_js.log_error)(`${GCLASS_NAME$10}: subtree load failed at '${path}': ${kw.error || ""}`);
-	render_tree(gobj);
+	render_view(gobj);
 	return 0;
 }
 /************************************************************
@@ -11023,7 +11216,7 @@ function ac_toggle_node(gobj, event, kw, src) {
 	let path = kw.path || "";
 	if (priv.expanded.has(path)) priv.expanded.delete(path);
 	else priv.expanded.add(path);
-	render_tree(gobj);
+	render_view(gobj);
 	return 0;
 }
 /************************************************************
@@ -11036,7 +11229,7 @@ function ac_expand_collapsed(gobj, event, kw, src) {
 	if (priv.pending.has(path)) return 0;
 	priv.pending.add(path);
 	priv.errors.delete(path);
-	render_tree(gobj);
+	render_view(gobj);
 	(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_EXPAND_PATH", {
 		path,
 		size: kw.size
@@ -11049,7 +11242,7 @@ function ac_expand_collapsed(gobj, event, kw, src) {
 function ac_search$1(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	priv.search = (kw.text || "").trim().toLowerCase();
-	render_tree(gobj);
+	render_view(gobj);
 	return 0;
 }
 /************************************************************
@@ -11067,7 +11260,7 @@ function ac_expand_all$1(gobj, event, kw, src) {
 	paths.forEach(function(p) {
 		priv.expanded.add(p);
 	});
-	render_tree(gobj);
+	render_view(gobj);
 	return 0;
 }
 /************************************************************
@@ -11075,7 +11268,7 @@ function ac_expand_all$1(gobj, event, kw, src) {
 ************************************************************/
 function ac_collapse_all$1(gobj, event, kw, src) {
 	gobj.priv.expanded.clear();
-	render_tree(gobj);
+	render_view(gobj);
 	return 0;
 }
 /************************************************************
@@ -11084,7 +11277,12 @@ 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, 4);
+	let dump = json_text_dump(priv.root, 0);
+	if (dump.error) {
+		(0, _yuneta_gobj_js.log_error)(`${GCLASS_NAME$10}: cannot copy the document: ${dump.error}`);
+		return -1;
+	}
+	let text = dump.text;
 	if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).catch(function(e) {
 		(0, _yuneta_gobj_js.log_error)(`${GCLASS_NAME$10}: clipboard write failed: ${e}`);
 	});
@@ -11092,6 +11290,23 @@ function ac_copy_all(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*   EV_SET_VIEW_MODE { mode } — "tree" | "text".
+*
+*   With no mode it toggles, which is what the toolbar button sends.
+************************************************************/
+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") {
+		(0, _yuneta_gobj_js.log_error)(`${GCLASS_NAME$10}: unknown view_mode '${mode}'`);
+		return -1;
+	}
+	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "view_mode", mode);
+	apply_view_mode(gobj);
+	render_view(gobj);
+	return 0;
+}
+/************************************************************
 *   EV_LANGUAGE_CHANGED — re-translate chrome + re-render
 ************************************************************/
 function ac_language_changed$3(gobj, event, kw, src) {
@@ -11100,8 +11315,9 @@ function ac_language_changed$3(gobj, event, kw, src) {
 	if ($container) {
 		(0, _yuneta_gobj_js.refresh_language)($container, i18next.t);
 		if (priv.$search) priv.$search.setAttribute("placeholder", (0, i18next.t)("search"));
+		apply_view_mode(gobj);
 	}
-	render_tree(gobj);
+	render_view(gobj);
 	return 0;
 }
 /************************************************************
@@ -11121,7 +11337,7 @@ function ac_hide$6(gobj, event, kw, src) {
 *   EV_REFRESH
 ************************************************************/
 function ac_refresh$4(gobj, event, kw, src) {
-	render_tree(gobj);
+	render_view(gobj);
 	return 0;
 }
 /***************************
@@ -11147,6 +11363,11 @@ function create_gclass$10(gclass_name) {
 			ac_set_json,
 			"ST_READY"
 		],
+		[
+			"EV_SET_VIEW_MODE",
+			ac_set_view_mode,
+			null
+		],
 		[
 			"EV_LANGUAGE_CHANGED",
 			ac_language_changed$3,
@@ -11213,6 +11434,11 @@ function create_gclass$10(gclass_name) {
 			ac_copy_all,
 			null
 		],
+		[
+			"EV_SET_VIEW_MODE",
+			ac_set_view_mode,
+			null
+		],
 		[
 			"EV_LANGUAGE_CHANGED",
 			ac_language_changed$3,
@@ -11244,6 +11470,7 @@ function create_gclass$10(gclass_name) {
 		["EV_EXPAND_ALL", 0],
 		["EV_COLLAPSE_ALL", 0],
 		["EV_COPY_ALL", 0],
+		["EV_SET_VIEW_MODE", 0],
 		["EV_LANGUAGE_CHANGED", 0],
 		["EV_REFRESH", 0],
 		["EV_SHOW", 0],