@yuneta/gobj-ui 7.19.4 → 7.20.1

package/dist/gobj-ui.es.js

@@ -10411,6 +10411,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
 /***********************************************************************
@@ -10439,9 +10472,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.
@@ -10451,6 +10494,7 @@ function format_epoch(value) {
 ***************************************************************/
 var GCLASS_NAME$10 = "C_YUI_JSON";
 var MAX_RENDER_ROWS = 5e3;
+var MAX_TEXT_CHARS = 2e6;
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -10458,6 +10502,7 @@ var attrs_table$10 = [
 	SDATA(data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
 	SDATA(data_type_t.DTP_STRING, "title", 0, "", "Optional header title (i18n key)"),
 	SDATA(data_type_t.DTP_JSON, "json_data", 0, null, "Initial JSON to render (usually already collapsed)"),
+	SDATA(data_type_t.DTP_STRING, "view_mode", 0, "tree", "View: 'tree' (lazy tree) or 'text' (raw JSON dump)"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "HTMLElement root, mounted by the parent"),
 	SDATA_END()
 ];
@@ -10468,7 +10513,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;
 /******************************
@@ -10486,6 +10537,7 @@ function mt_create$10(gobj) {
 	let json_data = gobj_read_attr(gobj, "json_data");
 	if (json_data !== null && json_data !== void 0) priv.root = json_deep_copy(json_data);
 	build_ui$9(gobj);
+	apply_view_mode(gobj);
 	let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
 	if (!subscriber) subscriber = gobj_parent(gobj);
 	gobj_subscribe_event(gobj, null, {}, subscriber);
@@ -10494,7 +10546,7 @@ function mt_create$10(gobj) {
 *          Framework Method: Start
 ***************************************************************/
 function mt_start$10(gobj) {
-	render_tree(gobj);
+	render_view(gobj);
 }
 /***************************************************************
 *          Framework Method: Stop
@@ -10521,22 +10573,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;"
+				},
+				[]
+			]
+		]
 	]);
 	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");
 	refresh_language($container, t);
 }
 /************************************************************
@@ -10550,10 +10618,17 @@ function destroy_ui$5(gobj) {
 		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 = gobj_read_str_attr(gobj, "title");
@@ -10582,7 +10657,7 @@ function make_toolbar$2(gobj) {
 	let $search_control = createElement2([
 		"div",
 		{
-			class: "control has-icons-left",
+			class: "control has-icons-left JSON_SEARCH_CONTROL",
 			style: "max-width:22em;"
 		},
 		[$search_input, [
@@ -10594,6 +10669,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")
@@ -10650,6 +10726,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: t("text view"),
+			"data-i18n-title": "text view",
+			"aria-label": t("text view"),
+			"data-i18n-aria-label": "text view"
+		},
+		[[
+			"span",
+			{ class: "icon" },
+			[["i", { class: "yi-code" }]]
+		]],
+		{ click: function(evt) {
+			evt.stopPropagation();
+			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 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 ? t("tree view") : 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(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) log_error(`${GCLASS_NAME$10}: cannot dump the document as text: ${dump.error}`);
+	let $pre = createElement2([
+		"pre",
+		{ class: "JSON_TEXT_BODY" },
+		[]
+	]);
+	$pre.textContent = dump.text;
+	$text.appendChild($pre);
+	priv.$text_body = $pre;
+	if (dump.capped) $text.appendChild(createElement2([
+		"div",
+		{
+			class: "JSON_CAPPED has-text-warning p-2",
+			"data-i18n": "text truncated; collapse some branches"
+		},
+		"text truncated; collapse some branches"
+	]));
+	refresh_language($text, 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
@@ -10980,7 +11173,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;
 }
 /************************************************************
@@ -10995,7 +11188,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;
 }
 /************************************************************
@@ -11007,7 +11200,7 @@ function ac_subtree_error(gobj, event, kw, src) {
 	priv.pending.delete(path);
 	priv.errors.set(path, kw.error || "error");
 	log_error(`${GCLASS_NAME$10}: subtree load failed at '${path}': ${kw.error || ""}`);
-	render_tree(gobj);
+	render_view(gobj);
 	return 0;
 }
 /************************************************************
@@ -11018,7 +11211,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;
 }
 /************************************************************
@@ -11031,7 +11224,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);
 	gobj_publish_event(gobj, "EV_EXPAND_PATH", {
 		path,
 		size: kw.size
@@ -11044,7 +11237,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;
 }
 /************************************************************
@@ -11062,7 +11255,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;
 }
 /************************************************************
@@ -11070,7 +11263,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;
 }
 /************************************************************
@@ -11079,7 +11272,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) {
+		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) {
 		log_error(`${GCLASS_NAME$10}: clipboard write failed: ${e}`);
 	});
@@ -11087,6 +11285,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") {
+		log_error(`${GCLASS_NAME$10}: unknown view_mode '${mode}'`);
+		return -1;
+	}
+	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) {
@@ -11095,8 +11310,9 @@ function ac_language_changed$3(gobj, event, kw, src) {
 	if ($container) {
 		refresh_language($container, t);
 		if (priv.$search) priv.$search.setAttribute("placeholder", t("search"));
+		apply_view_mode(gobj);
 	}
-	render_tree(gobj);
+	render_view(gobj);
 	return 0;
 }
 /************************************************************
@@ -11116,7 +11332,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;
 }
 /***************************
@@ -11142,6 +11358,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,
@@ -11208,6 +11429,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,
@@ -11239,6 +11465,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],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.19.4",
+  "version": "7.20.1",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_json.css

@@ -1,7 +1,7 @@
 /***********************************************************************
  *          c_yui_json.css
  *
- *      Styling for C_YUI_JSON (lazy JSON tree viewer).
+ *      Styling for C_YUI_JSON (lazy JSON tree viewer + raw text view).
  *      Monospace tree, type-coloured leaves, dark-aware.
  *      No transitions/animations by design (lib-yui convention).
  *
@@ -151,6 +151,43 @@
     opacity: 0.7;
 }
 
+/*
+ *  Text view: the same document as a raw dump, monospace like the tree.
+ */
+.C_YUI_JSON .JSON_TEXT {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 1em;
+    line-height: 1.5;
+    padding: 0.25rem 0.5rem;
+}
+
+.C_YUI_JSON .JSON_TEXT_BODY {
+    margin: 0;
+    padding: 0;
+    background: none;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    /*  `pre`, NOT `pre-wrap`: the indentation IS the structure here, and
+     *  a wrapped continuation line restarts at column 0 and lies about
+     *  the depth of everything under it — on a phone that is most of the
+     *  document.  Long lines scroll sideways inside .JSON_TEXT (which
+     *  owns the overflow), never on the page body. */
+    white-space: pre;
+    /*  And the <pre> must GROW to its longest line: as a plain block it
+     *  takes the container's width, its text spills out of a box that
+     *  reports no overflow, and .JSON_TEXT gets no scroll range to
+     *  offer — the tail of every long line is simply unreachable.
+     *  `min-width: 100%` keeps it filling the container when the
+     *  document is narrower. */
+    width: max-content;
+    min-width: 100%;
+    /*  The dump is there to be read AND taken: a plain <pre> in some
+     *  host stylesheets is unselectable chrome. */
+    user-select: text;
+}
+
 /*
  *  Disable any transition a host stylesheet might inject.
  */