@yuneta/gobj-ui 7.23.182 → 7.23.184

package/dist/gobj-ui.cjs.js

@@ -24640,7 +24640,7 @@ function get_gobj_formtable(gobj, topic_name) {
 /************************************************************
 *  Command to remote service
 ************************************************************/
-function treedb_nodes$1(gobj, treedb_name, topic_name, options, page) {
+function treedb_nodes$1(gobj, treedb_name, topic_name, options, page, purpose) {
 	let command = "nodes";
 	let gobj_remote_yuno = (0, _yuneta_gobj_js.gobj_read_pointer_attr)(gobj, "gobj_remote_yuno");
 	let kw = {
@@ -24650,6 +24650,7 @@ function treedb_nodes$1(gobj, treedb_name, topic_name, options, page) {
 		options: options || {}
 	};
 	kw.__md_command__ = { topic_name };
+	if (purpose) kw.__md_command__.purpose = purpose;
 	if (page) {
 		kw.from = page.from;
 		kw.limit = page.limit;
@@ -24931,7 +24932,8 @@ function ac_mt_command_answer$2(gobj, event, kw, src) {
 				let gobj_topic_form = (0, _yuneta_gobj_js.gobj_find_child)(gobj, { __gobj_name__: `${(0, _yuneta_gobj_js.gobj_name)(gobj)}?${topic_name}` });
 				let answer = nodes_answer(data);
 				let req_id = (0, _yuneta_gobj_js.kw_get_str)(gobj, kw_command, "req_id", "", 0);
-				if (req_id) (0, _yuneta_gobj_js.gobj_send_event)(gobj_topic_form, "EV_PAGE_LOADED", {
+				if ((0, _yuneta_gobj_js.kw_get_str)(gobj, kw_command, "purpose", "", 0) === "json") (0, _yuneta_gobj_js.gobj_send_event)(gobj_topic_form, "EV_JSON_LOADED", { rows: answer.rows }, gobj);
+				else if (req_id) (0, _yuneta_gobj_js.gobj_send_event)(gobj_topic_form, "EV_PAGE_LOADED", {
 					req_id,
 					rows: answer.rows,
 					pages: answer.pages,
@@ -25175,6 +25177,20 @@ function ac_create_record(gobj, event, kw, src) {
 	});
 }
 /********************************************
+*  A topic table wants its records as json, WITH the metadata of
+*  each one (its Raw JSON button). The table's own rows are read
+*  without it, so this is a read of its own: the whole topic, and
+*  the table keeps to the rows it shows.
+********************************************/
+function ac_request_json(gobj, event, kw, src) {
+	let topic_name = kw.topic_name || (0, _yuneta_gobj_js.gobj_read_attr)(src, "topic_name");
+	if (!topic_name) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: a json request with no topic`);
+		return -1;
+	}
+	return treedb_nodes$1(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "treedb_name"), topic_name, Object.assign({}, TABLE_READ_OPTIONS, { with_metadata: true }), null, "json");
+}
+/********************************************
 *  A topic table wants a page.
 *
 *  The transport is ours, so the table asks and we fetch; the answer
@@ -25458,6 +25474,11 @@ function create_gclass$6(gclass_name) {
 			ac_request_page,
 			null
 		],
+		[
+			"EV_REQUEST_JSON",
+			ac_request_json,
+			null
+		],
 		[
 			"EV_REQUEST_ASSET",
 			ac_request_asset,
@@ -25548,6 +25569,7 @@ function create_gclass$6(gclass_name) {
 		["EV_UPDATE_RECORD", 0],
 		["EV_UPDATE_FIELD", 0],
 		["EV_REQUEST_PAGE", 0],
+		["EV_REQUEST_JSON", 0],
 		["EV_REQUEST_ASSET", 0],
 		["EV_OPEN_LINKED", 0],
 		["EV_DELETE_RECORD", 0],
@@ -26359,6 +26381,7 @@ var attrs_table$5 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_search_button", 0, true, "Button toolbar SEARCH"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_schema_button", 0, true, "Button toolbar SCHEMA (show the topic's desc)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_columns_button", 0, true, "Button toolbar COLUMNS (choose which columns the table shows)"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_json_button", 0, true, "Button toolbar RAW JSON (the table's records as json, with the metadata of each record)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_export_button", 0, true, "Button toolbar EXPORT (download as CSV what the table holds)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_header_filters", 0, true, "Per-column filter box in the table header, on the columns a text/number match means something (not hooks, fkeys or json)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_inline_edit", 0, true, "Edit a writable scalar cell in place while in edition mode (the record form keeps the rest)"),
@@ -26409,6 +26432,9 @@ var PRIVATE_DATA$5 = {
 	schema_win: null,
 	cell_json_gobj: null,
 	cell_json_modal: null,
+	table_json_gobj: null,
+	table_json_win: null,
+	table_json_modal: null,
 	cell_json_win: null,
 	cell_file_box: null,
 	cell_file_modal: null,
@@ -26551,6 +26577,7 @@ function mt_stop$5(gobj) {
 	close_form_dialog(gobj);
 	close_schema_dialog(gobj);
 	close_cell_json_dialog(gobj);
+	close_table_json_dialog(gobj);
 	close_cell_file_dialog(gobj);
 	close_hook_choice(gobj);
 	drop_pending_assets(gobj);
@@ -26563,6 +26590,7 @@ function mt_destroy$5(gobj) {
 	close_form_dialog(gobj);
 	close_schema_dialog(gobj);
 	close_cell_json_dialog(gobj);
+	close_table_json_dialog(gobj);
 	close_cell_file_dialog(gobj);
 	close_hook_choice(gobj);
 	drop_pending_assets(gobj);
@@ -26792,6 +26820,7 @@ function build_ui$5(gobj) {
 	let with_search_button = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_search_button");
 	let with_schema_button = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_schema_button");
 	let with_columns_button = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_columns_button");
+	let with_json_button = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_json_button");
 	let with_export_button = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_export_button");
 	if (with_search_button) {
 		let search_id = `${toolbar_id}_search`;
@@ -26899,6 +26928,32 @@ function build_ui$5(gobj) {
 		]);
 		$view_toolbar.appendChild($columns);
 	}
+	if (with_json_button) {
+		let $json = (0, _yuneta_gobj_js.createElement2)([
+			"button",
+			{
+				class: "TREEDB_TABLE_JSON button mr-1",
+				title: (0, i18next.t)("raw json"),
+				"data-i18n-title": "raw json",
+				"aria-label": (0, i18next.t)("raw json"),
+				"data-i18n-aria-label": "raw json"
+			},
+			[yui_toolbar_icon("yi-eye"), [
+				"span",
+				{
+					class: "is-hidden-mobile",
+					i18n: "raw json",
+					style: "padding-left:5px;"
+				},
+				"raw json"
+			]],
+			{ "click": (event) => {
+				event.stopPropagation();
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SHOW_TABLE_JSON", {}, gobj);
+			} }
+		]);
+		$view_toolbar.appendChild($json);
+	}
 	if (with_export_button) {
 		let $export = (0, _yuneta_gobj_js.createElement2)([
 			"button",
@@ -29776,6 +29831,107 @@ function ac_export_table(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  The records of the table as json, with their metadata: ask
+*  the host for them (it owns the link to the backend). The rows
+*  the table holds were read WITHOUT metadata, so they cannot
+*  answer this themselves.
+************************************************************/
+function ac_show_table_json(gobj, event, kw, src) {
+	(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_REQUEST_JSON", { topic_name: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "topic_name") });
+	return 0;
+}
+/************************************************************
+*  The host's answer: the topic's records with metadata. What is
+*  shown is what the TABLE shows: when a filter or the search
+*  leaves some rows out, only the records of the rows left in
+*  (matched by id) are kept.
+************************************************************/
+function ac_json_loaded(gobj, event, kw, src) {
+	let records = kw && Array.isArray(kw.rows) ? kw.rows : [];
+	let tabulator = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator");
+	if (tabulator) try {
+		let active = tabulator.getData("active");
+		if (active.length < tabulator.getDataCount()) {
+			let ids = new Set(active.map((r) => String(r.id)));
+			records = records.filter((r) => ids.has(String(r && r.id)));
+		}
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_warning)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot read the active rows: ${e}`);
+	}
+	open_table_json_dialog(gobj, records);
+	return 0;
+}
+/************************************************************
+*  Show the table's records in the adaptive json popup (a
+*  window on a laptop, a sheet on a phone). One at a time: a
+*  second open replaces the first.
+************************************************************/
+function open_table_json_dialog(gobj, records) {
+	close_table_json_dialog(gobj);
+	let priv = gobj.priv;
+	let json_view = (0, _yuneta_gobj_js.gobj_create_pure_child)("tablejson_" + (0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.gobj_name)(gobj)), "C_YUI_JSON", {}, gobj);
+	if (!json_view) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot create the table json viewer`);
+		return;
+	}
+	priv.table_json_gobj = json_view;
+	(0, _yuneta_gobj_js.gobj_start)(json_view);
+	let $box = (0, _yuneta_gobj_js.gobj_read_attr)(json_view, "$container");
+	if (!$box) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: the table json viewer built no $container`);
+		teardown_table_json_child(gobj);
+		return;
+	}
+	let presented = present_json_popup(gobj, $box, {
+		name: "tablejsonwin_" + (0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.gobj_name)(gobj)),
+		logical_class: "TREEDB_TABLE_JSON",
+		title_prefix: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "topic_name"),
+		title: "raw json",
+		icon: "yi-eye",
+		forget_window: function() {
+			priv.table_json_win = null;
+		},
+		on_close: function() {
+			teardown_table_json_child(gobj);
+		}
+	});
+	if (!presented) {
+		teardown_table_json_child(gobj);
+		return;
+	}
+	priv.table_json_modal = presented.modal;
+	priv.table_json_win = presented.win;
+	(0, _yuneta_gobj_js.gobj_send_event)(json_view, "EV_SET_JSON", { json: records }, gobj);
+}
+/************************************************************
+*  Destroy the hosted C_YUI_JSON child of the table json.
+************************************************************/
+function teardown_table_json_child(gobj) {
+	let priv = gobj.priv;
+	if (priv.table_json_gobj) {
+		if ((0, _yuneta_gobj_js.gobj_is_running)(priv.table_json_gobj)) (0, _yuneta_gobj_js.gobj_stop)(priv.table_json_gobj);
+		(0, _yuneta_gobj_js.gobj_destroy)(priv.table_json_gobj);
+		priv.table_json_gobj = null;
+	}
+	let win = priv.table_json_win;
+	priv.table_json_win = null;
+	retire_popup_window(win);
+	priv.table_json_modal = null;
+}
+/************************************************************
+*  Close the table json dialog (teardown, or a second open).
+************************************************************/
+function close_table_json_dialog(gobj) {
+	let priv = gobj.priv;
+	if (priv.table_json_modal) {
+		let modal = priv.table_json_modal;
+		priv.table_json_modal = null;
+		modal.close();
+		return;
+	}
+	teardown_table_json_child(gobj);
+}
+/************************************************************
 *  {
 *      href: href
 *  }
@@ -30014,6 +30170,16 @@ function create_gclass$5(gclass_name) {
 			ac_export_table,
 			null
 		],
+		[
+			"EV_SHOW_TABLE_JSON",
+			ac_show_table_json,
+			null
+		],
+		[
+			"EV_JSON_LOADED",
+			ac_json_loaded,
+			null
+		],
 		[
 			"EV_SHOW",
 			ac_show$4,
@@ -30071,6 +30237,9 @@ function create_gclass$5(gclass_name) {
 		["EV_EDIT_RECORD", 0],
 		["EV_TOGGLE_COLUMN", 0],
 		["EV_EXPORT_TABLE", 0],
+		["EV_SHOW_TABLE_JSON", 0],
+		["EV_JSON_LOADED", 0],
+		["EV_REQUEST_JSON", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_CREATE_RECORD", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_UPDATE_RECORD", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_DELETE_RECORD", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
@@ -76385,9 +76554,14 @@ function ensure_dev_style() {
     flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 14px;
     padding: 6px 10px; border-top: 1px solid rgba(0,0,0,0.1);
     background: rgba(0,0,0,0.03);
-    font-family: "DejaVu Sans Mono", monospace; font-size: 11px;
+    font-family: "DejaVu Sans Mono", monospace; font-size: 0.875rem;
     opacity: 0.9; font-variant-numeric: tabular-nums;
 }
+/*  Sizes in rem, not px: they follow the reader's zoom and root size. The
+    controls (chips, segments, search) are at 1rem with a finger's padding --
+    this window used to be all 9-13px, controls included, which is what
+    is-small is not for. Only secondary ink (source, size/time, the
+    uppercase labels) goes under 0.9rem. (No backticks: template literal.)  */
 /* -------- control bar -------- */
 .YDEV_BAR {
     display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
@@ -76396,12 +76570,12 @@ function ensure_dev_style() {
 }
 .YDEV_GROUP { display: inline-flex; align-items: center; gap: 5px; }
 .YDEV_LABEL {
-    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
-    opacity: 0.5; align-self: center;
+    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
+    opacity: 0.6; align-self: center;
 }
 .YDEV_SEP { width: 1px; align-self: stretch; background: rgba(0,0,0,0.12); }
 .YDEV_CHIP {
-    font: inherit; font-size: 12px; line-height: 1.4; padding: 3px 9px;
+    font: inherit; font-size: 1rem; line-height: 1.4; padding: 0.4rem 0.8rem;
     border: 1px solid rgba(0,0,0,0.18); border-radius: 999px;
     background: transparent; color: inherit; cursor: pointer;
     display: inline-flex; align-items: center; gap: 5px;
@@ -76414,14 +76588,14 @@ function ensure_dev_style() {
 .YDEV_CHIP[data-dir]:not(.is-active) { opacity: 0.4; text-decoration: line-through; }
 .YDEV_SEG { display: inline-flex; border: 1px solid rgba(0,0,0,0.18); border-radius: 7px; overflow: hidden; }
 .YDEV_SEG_BTN {
-    font: inherit; font-size: 12px; padding: 4px 10px; border: 0;
+    font: inherit; font-size: 1rem; padding: 0.4rem 0.85rem; border: 0;
     border-right: 1px solid rgba(0,0,0,0.12);
     background: transparent; color: inherit; cursor: pointer;
 }
 .YDEV_SEG_BTN:last-child { border-right: 0; }
 .YDEV_SEG_BTN.is-active { background: #2563eb; color: #fff; font-weight: 600; }
 .YDEV_SEARCH {
-    font: inherit; font-size: 12px; padding: 4px 9px; min-width: 170px;
+    font: inherit; font-size: 1rem; padding: 0.4rem 0.7rem; min-width: 13rem;
     border: 1px solid rgba(0,0,0,0.18); border-radius: 7px;
     background: transparent; color: inherit;
 }
@@ -76430,7 +76604,7 @@ function ensure_dev_style() {
 .YDEV_STAT.is-strong { font-weight: 700; }
 .YDEV_TITLE { display: flex; align-items: baseline; gap: 8px; }
 .YDEV_TITLE_MAIN { font-weight: 700; }
-.YDEV_TITLE_SUB { opacity: 0.7; font-size: 12px; }
+.YDEV_TITLE_SUB { opacity: 0.7; font-size: 0.875rem; }
 /*  The ink of the log.
  *
  *  It used to be one grey dimmed with opacity per role -- 0.85 for a key,
@@ -76469,7 +76643,7 @@ function ensure_dev_style() {
 /* -------- entries (shared) -------- */
 .TRAFFIC_ENTRY {
     border-left: 3px solid #94a3b8; border-radius: 3px;
-    font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 13px;
+    font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 0.9375rem;
     background: rgba(0,0,0,0.02);
 }
 .TRAFFIC_ENTRY { margin: 6px 0; padding: 4px 8px; line-height: 1.55; }
@@ -76483,18 +76657,18 @@ function ensure_dev_style() {
 /*  Where the message went through. min-width 0 and flex 0 1 auto so it is the
     part that gives way when the row runs out of width -- the event name and
     the size/time must not be the ones to go.  */
-.TRAFFIC_SRC { color: var(--ydev-src); font-size: 11px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.TRAFFIC_SRC { color: var(--ydev-src); font-size: 0.8125rem; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dir-out .TRAFFIC_ARROW, .dir-out .TRAFFIC_EVENT { color: #2563eb; }
 .dir-in  .TRAFFIC_ARROW, .dir-in  .TRAFFIC_EVENT { color: #059669; }
 .dir-err .TRAFFIC_ARROW, .dir-err .TRAFFIC_EVENT { color: #dc2626; }
-.TRAFFIC_META { margin-left: auto; color: var(--ydev-dim); font-size: 11px; white-space: nowrap; }
+.TRAFFIC_META { margin-left: auto; color: var(--ydev-dim); font-size: 0.8125rem; white-space: nowrap; }
 /*  The indent of a nested block is NOT a hover effect: it used to be given
     only on .TRAFFIC_ENTRY:hover, so moving the cursor across the log made
     every payload under it jump 16px sideways and reflow. A payload being
     read must not move because the pointer passed over it.
     (No backticks in here: this stylesheet is a template literal.)  */
 .TRAFFIC_KW { margin: 2px 0 0 16px; }
-.TRAFFIC_FULL { margin: 4px 0 0 16px; padding: 6px 8px; font-family: monospace; font-size: 11px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
+.TRAFFIC_FULL { margin: 4px 0 0 16px; padding: 6px 8px; font-family: monospace; font-size: 0.875rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
 .TRAFFIC_ROW { display: flex; gap: 6px; align-items: baseline; }
 .TRAFFIC_BULLET { color: var(--ydev-bullet); flex: 0 0 auto; }
 .TRAFFIC_KEY { color: var(--ydev-key); flex: 0 0 auto; }
@@ -76519,17 +76693,17 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
 .TRAFFIC_PREV.t-bool  { color: var(--ydev-bool); }
 .TRAFFIC_PREV.t-null  { color: var(--ydev-bool); font-style: italic; }
 .TRAFFIC_PREV.t-empty { color: var(--ydev-dim); }
-.YDEV_EMPTY { color: var(--ydev-dim); font-size: 12px; padding: 18px 10px; text-align: center; }
+.YDEV_EMPTY { color: var(--ydev-dim); font-size: 0.875rem; padding: 18px 10px; text-align: center; }
 /* -------- mirrored console logs (error/warning/info/debug/msg; the automata trace shows as debug) -------- */
-.YDEV_LOGROW { display: flex; align-items: baseline; gap: 8px; margin: 1px 0; padding: 2px 8px; border-left: 3px solid #94a3b8; border-radius: 3px; font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 12px; background: rgba(0,0,0,0.015); }
-.YDEV_LOG_LVL { flex: 0 0 auto; text-transform: uppercase; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: var(--ydev-dim); min-width: 48px; }
+.YDEV_LOGROW { display: flex; align-items: baseline; gap: 8px; margin: 1px 0; padding: 2px 8px; border-left: 3px solid #94a3b8; border-radius: 3px; font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 0.9375rem; background: rgba(0,0,0,0.015); }
+.YDEV_LOG_LVL { flex: 0 0 auto; text-transform: uppercase; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ydev-dim); min-width: 4.5rem; }
 .YDEV_LOG_TXT { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; word-break: break-word; color: var(--ydev-ink); }
 .YDEV_LOG_error   { border-left-color: #dc2626; } .YDEV_LOG_error   .YDEV_LOG_LVL { color: #dc2626; }
 .YDEV_LOG_warning { border-left-color: #d97706; } .YDEV_LOG_warning .YDEV_LOG_LVL { color: #d97706; }
 .YDEV_LOG_info    { border-left-color: #2563eb; } .YDEV_LOG_info    .YDEV_LOG_LVL { color: #2563eb; }
 .YDEV_LOG_msg     { border-left-color: #0891b2; } .YDEV_LOG_msg     .YDEV_LOG_LVL { color: #0891b2; }
 .YDEV_LOG_debug   { border-left-color: #94a3b8; } .YDEV_LOG_debug   .YDEV_LOG_LVL { color: #94a3b8; } .YDEV_LOG_debug .YDEV_LOG_TXT { color: var(--ydev-dim); }
-.YDEV_LOG_json    { border-left-color: #9333ea; align-items: flex-start; } .YDEV_LOG_json .YDEV_LOG_LVL { color: #9333ea; } .YDEV_LOG_json .YDEV_LOG_TXT { font-size: 11px; line-height: 1.35; color: var(--ydev-dim); }
+.YDEV_LOG_json    { border-left-color: #9333ea; align-items: flex-start; } .YDEV_LOG_json .YDEV_LOG_LVL { color: #9333ea; } .YDEV_LOG_json .YDEV_LOG_TXT { font-size: 0.875rem; line-height: 1.4; color: var(--ydev-dim); }
 /* -------- dark theme -------- */
 :root[data-theme="dark"] .TRAFFIC_FULL { background: rgba(255,255,255,0.05); }
 :root[data-theme="dark"] .YDEV_BAR, :root[data-theme="dark"] .YDEV_STATS { background: rgba(255,255,255,0.04); }

package/dist/gobj-ui.es.js

@@ -24635,7 +24635,7 @@ function get_gobj_formtable(gobj, topic_name) {
 /************************************************************
 *  Command to remote service
 ************************************************************/
-function treedb_nodes$1(gobj, treedb_name, topic_name, options, page) {
+function treedb_nodes$1(gobj, treedb_name, topic_name, options, page, purpose) {
 	let command = "nodes";
 	let gobj_remote_yuno = gobj_read_pointer_attr(gobj, "gobj_remote_yuno");
 	let kw = {
@@ -24645,6 +24645,7 @@ function treedb_nodes$1(gobj, treedb_name, topic_name, options, page) {
 		options: options || {}
 	};
 	kw.__md_command__ = { topic_name };
+	if (purpose) kw.__md_command__.purpose = purpose;
 	if (page) {
 		kw.from = page.from;
 		kw.limit = page.limit;
@@ -24926,7 +24927,8 @@ function ac_mt_command_answer$2(gobj, event, kw, src) {
 				let gobj_topic_form = gobj_find_child(gobj, { __gobj_name__: `${gobj_name(gobj)}?${topic_name}` });
 				let answer = nodes_answer(data);
 				let req_id = kw_get_str(gobj, kw_command, "req_id", "", 0);
-				if (req_id) gobj_send_event(gobj_topic_form, "EV_PAGE_LOADED", {
+				if (kw_get_str(gobj, kw_command, "purpose", "", 0) === "json") gobj_send_event(gobj_topic_form, "EV_JSON_LOADED", { rows: answer.rows }, gobj);
+				else if (req_id) gobj_send_event(gobj_topic_form, "EV_PAGE_LOADED", {
 					req_id,
 					rows: answer.rows,
 					pages: answer.pages,
@@ -25170,6 +25172,20 @@ function ac_create_record(gobj, event, kw, src) {
 	});
 }
 /********************************************
+*  A topic table wants its records as json, WITH the metadata of
+*  each one (its Raw JSON button). The table's own rows are read
+*  without it, so this is a read of its own: the whole topic, and
+*  the table keeps to the rows it shows.
+********************************************/
+function ac_request_json(gobj, event, kw, src) {
+	let topic_name = kw.topic_name || gobj_read_attr(src, "topic_name");
+	if (!topic_name) {
+		log_error(`${gobj_short_name(gobj)}: a json request with no topic`);
+		return -1;
+	}
+	return treedb_nodes$1(gobj, gobj_read_str_attr(gobj, "treedb_name"), topic_name, Object.assign({}, TABLE_READ_OPTIONS, { with_metadata: true }), null, "json");
+}
+/********************************************
 *  A topic table wants a page.
 *
 *  The transport is ours, so the table asks and we fetch; the answer
@@ -25453,6 +25469,11 @@ function create_gclass$6(gclass_name) {
 			ac_request_page,
 			null
 		],
+		[
+			"EV_REQUEST_JSON",
+			ac_request_json,
+			null
+		],
 		[
 			"EV_REQUEST_ASSET",
 			ac_request_asset,
@@ -25543,6 +25564,7 @@ function create_gclass$6(gclass_name) {
 		["EV_UPDATE_RECORD", 0],
 		["EV_UPDATE_FIELD", 0],
 		["EV_REQUEST_PAGE", 0],
+		["EV_REQUEST_JSON", 0],
 		["EV_REQUEST_ASSET", 0],
 		["EV_OPEN_LINKED", 0],
 		["EV_DELETE_RECORD", 0],
@@ -26354,6 +26376,7 @@ var attrs_table$5 = [
 	SDATA(data_type_t.DTP_BOOLEAN, "with_search_button", 0, true, "Button toolbar SEARCH"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_schema_button", 0, true, "Button toolbar SCHEMA (show the topic's desc)"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_columns_button", 0, true, "Button toolbar COLUMNS (choose which columns the table shows)"),
+	SDATA(data_type_t.DTP_BOOLEAN, "with_json_button", 0, true, "Button toolbar RAW JSON (the table's records as json, with the metadata of each record)"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_export_button", 0, true, "Button toolbar EXPORT (download as CSV what the table holds)"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_header_filters", 0, true, "Per-column filter box in the table header, on the columns a text/number match means something (not hooks, fkeys or json)"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_inline_edit", 0, true, "Edit a writable scalar cell in place while in edition mode (the record form keeps the rest)"),
@@ -26404,6 +26427,9 @@ var PRIVATE_DATA$5 = {
 	schema_win: null,
 	cell_json_gobj: null,
 	cell_json_modal: null,
+	table_json_gobj: null,
+	table_json_win: null,
+	table_json_modal: null,
 	cell_json_win: null,
 	cell_file_box: null,
 	cell_file_modal: null,
@@ -26546,6 +26572,7 @@ function mt_stop$5(gobj) {
 	close_form_dialog(gobj);
 	close_schema_dialog(gobj);
 	close_cell_json_dialog(gobj);
+	close_table_json_dialog(gobj);
 	close_cell_file_dialog(gobj);
 	close_hook_choice(gobj);
 	drop_pending_assets(gobj);
@@ -26558,6 +26585,7 @@ function mt_destroy$5(gobj) {
 	close_form_dialog(gobj);
 	close_schema_dialog(gobj);
 	close_cell_json_dialog(gobj);
+	close_table_json_dialog(gobj);
 	close_cell_file_dialog(gobj);
 	close_hook_choice(gobj);
 	drop_pending_assets(gobj);
@@ -26787,6 +26815,7 @@ function build_ui$5(gobj) {
 	let with_search_button = gobj_read_bool_attr(gobj, "with_search_button");
 	let with_schema_button = gobj_read_bool_attr(gobj, "with_schema_button");
 	let with_columns_button = gobj_read_bool_attr(gobj, "with_columns_button");
+	let with_json_button = gobj_read_bool_attr(gobj, "with_json_button");
 	let with_export_button = gobj_read_bool_attr(gobj, "with_export_button");
 	if (with_search_button) {
 		let search_id = `${toolbar_id}_search`;
@@ -26894,6 +26923,32 @@ function build_ui$5(gobj) {
 		]);
 		$view_toolbar.appendChild($columns);
 	}
+	if (with_json_button) {
+		let $json = createElement2([
+			"button",
+			{
+				class: "TREEDB_TABLE_JSON button mr-1",
+				title: t("raw json"),
+				"data-i18n-title": "raw json",
+				"aria-label": t("raw json"),
+				"data-i18n-aria-label": "raw json"
+			},
+			[yui_toolbar_icon("yi-eye"), [
+				"span",
+				{
+					class: "is-hidden-mobile",
+					i18n: "raw json",
+					style: "padding-left:5px;"
+				},
+				"raw json"
+			]],
+			{ "click": (event) => {
+				event.stopPropagation();
+				gobj_send_event(gobj, "EV_SHOW_TABLE_JSON", {}, gobj);
+			} }
+		]);
+		$view_toolbar.appendChild($json);
+	}
 	if (with_export_button) {
 		let $export = createElement2([
 			"button",
@@ -29771,6 +29826,107 @@ function ac_export_table(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  The records of the table as json, with their metadata: ask
+*  the host for them (it owns the link to the backend). The rows
+*  the table holds were read WITHOUT metadata, so they cannot
+*  answer this themselves.
+************************************************************/
+function ac_show_table_json(gobj, event, kw, src) {
+	gobj_publish_event(gobj, "EV_REQUEST_JSON", { topic_name: gobj_read_str_attr(gobj, "topic_name") });
+	return 0;
+}
+/************************************************************
+*  The host's answer: the topic's records with metadata. What is
+*  shown is what the TABLE shows: when a filter or the search
+*  leaves some rows out, only the records of the rows left in
+*  (matched by id) are kept.
+************************************************************/
+function ac_json_loaded(gobj, event, kw, src) {
+	let records = kw && Array.isArray(kw.rows) ? kw.rows : [];
+	let tabulator = gobj_read_attr(gobj, "tabulator");
+	if (tabulator) try {
+		let active = tabulator.getData("active");
+		if (active.length < tabulator.getDataCount()) {
+			let ids = new Set(active.map((r) => String(r.id)));
+			records = records.filter((r) => ids.has(String(r && r.id)));
+		}
+	} catch (e) {
+		log_warning(`${gobj_short_name(gobj)}: cannot read the active rows: ${e}`);
+	}
+	open_table_json_dialog(gobj, records);
+	return 0;
+}
+/************************************************************
+*  Show the table's records in the adaptive json popup (a
+*  window on a laptop, a sheet on a phone). One at a time: a
+*  second open replaces the first.
+************************************************************/
+function open_table_json_dialog(gobj, records) {
+	close_table_json_dialog(gobj);
+	let priv = gobj.priv;
+	let json_view = gobj_create_pure_child("tablejson_" + clean_name(gobj_name(gobj)), "C_YUI_JSON", {}, gobj);
+	if (!json_view) {
+		log_error(`${gobj_short_name(gobj)}: cannot create the table json viewer`);
+		return;
+	}
+	priv.table_json_gobj = json_view;
+	gobj_start(json_view);
+	let $box = gobj_read_attr(json_view, "$container");
+	if (!$box) {
+		log_error(`${gobj_short_name(gobj)}: the table json viewer built no $container`);
+		teardown_table_json_child(gobj);
+		return;
+	}
+	let presented = present_json_popup(gobj, $box, {
+		name: "tablejsonwin_" + clean_name(gobj_name(gobj)),
+		logical_class: "TREEDB_TABLE_JSON",
+		title_prefix: gobj_read_str_attr(gobj, "topic_name"),
+		title: "raw json",
+		icon: "yi-eye",
+		forget_window: function() {
+			priv.table_json_win = null;
+		},
+		on_close: function() {
+			teardown_table_json_child(gobj);
+		}
+	});
+	if (!presented) {
+		teardown_table_json_child(gobj);
+		return;
+	}
+	priv.table_json_modal = presented.modal;
+	priv.table_json_win = presented.win;
+	gobj_send_event(json_view, "EV_SET_JSON", { json: records }, gobj);
+}
+/************************************************************
+*  Destroy the hosted C_YUI_JSON child of the table json.
+************************************************************/
+function teardown_table_json_child(gobj) {
+	let priv = gobj.priv;
+	if (priv.table_json_gobj) {
+		if (gobj_is_running(priv.table_json_gobj)) gobj_stop(priv.table_json_gobj);
+		gobj_destroy(priv.table_json_gobj);
+		priv.table_json_gobj = null;
+	}
+	let win = priv.table_json_win;
+	priv.table_json_win = null;
+	retire_popup_window(win);
+	priv.table_json_modal = null;
+}
+/************************************************************
+*  Close the table json dialog (teardown, or a second open).
+************************************************************/
+function close_table_json_dialog(gobj) {
+	let priv = gobj.priv;
+	if (priv.table_json_modal) {
+		let modal = priv.table_json_modal;
+		priv.table_json_modal = null;
+		modal.close();
+		return;
+	}
+	teardown_table_json_child(gobj);
+}
+/************************************************************
 *  {
 *      href: href
 *  }
@@ -30009,6 +30165,16 @@ function create_gclass$5(gclass_name) {
 			ac_export_table,
 			null
 		],
+		[
+			"EV_SHOW_TABLE_JSON",
+			ac_show_table_json,
+			null
+		],
+		[
+			"EV_JSON_LOADED",
+			ac_json_loaded,
+			null
+		],
 		[
 			"EV_SHOW",
 			ac_show$4,
@@ -30066,6 +30232,9 @@ function create_gclass$5(gclass_name) {
 		["EV_EDIT_RECORD", 0],
 		["EV_TOGGLE_COLUMN", 0],
 		["EV_EXPORT_TABLE", 0],
+		["EV_SHOW_TABLE_JSON", 0],
+		["EV_JSON_LOADED", 0],
+		["EV_REQUEST_JSON", event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_CREATE_RECORD", event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_UPDATE_RECORD", event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_DELETE_RECORD", event_flag_t.EVF_OUTPUT_EVENT],
@@ -76380,9 +76549,14 @@ function ensure_dev_style() {
     flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 14px;
     padding: 6px 10px; border-top: 1px solid rgba(0,0,0,0.1);
     background: rgba(0,0,0,0.03);
-    font-family: "DejaVu Sans Mono", monospace; font-size: 11px;
+    font-family: "DejaVu Sans Mono", monospace; font-size: 0.875rem;
     opacity: 0.9; font-variant-numeric: tabular-nums;
 }
+/*  Sizes in rem, not px: they follow the reader's zoom and root size. The
+    controls (chips, segments, search) are at 1rem with a finger's padding --
+    this window used to be all 9-13px, controls included, which is what
+    is-small is not for. Only secondary ink (source, size/time, the
+    uppercase labels) goes under 0.9rem. (No backticks: template literal.)  */
 /* -------- control bar -------- */
 .YDEV_BAR {
     display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
@@ -76391,12 +76565,12 @@ function ensure_dev_style() {
 }
 .YDEV_GROUP { display: inline-flex; align-items: center; gap: 5px; }
 .YDEV_LABEL {
-    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
-    opacity: 0.5; align-self: center;
+    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
+    opacity: 0.6; align-self: center;
 }
 .YDEV_SEP { width: 1px; align-self: stretch; background: rgba(0,0,0,0.12); }
 .YDEV_CHIP {
-    font: inherit; font-size: 12px; line-height: 1.4; padding: 3px 9px;
+    font: inherit; font-size: 1rem; line-height: 1.4; padding: 0.4rem 0.8rem;
     border: 1px solid rgba(0,0,0,0.18); border-radius: 999px;
     background: transparent; color: inherit; cursor: pointer;
     display: inline-flex; align-items: center; gap: 5px;
@@ -76409,14 +76583,14 @@ function ensure_dev_style() {
 .YDEV_CHIP[data-dir]:not(.is-active) { opacity: 0.4; text-decoration: line-through; }
 .YDEV_SEG { display: inline-flex; border: 1px solid rgba(0,0,0,0.18); border-radius: 7px; overflow: hidden; }
 .YDEV_SEG_BTN {
-    font: inherit; font-size: 12px; padding: 4px 10px; border: 0;
+    font: inherit; font-size: 1rem; padding: 0.4rem 0.85rem; border: 0;
     border-right: 1px solid rgba(0,0,0,0.12);
     background: transparent; color: inherit; cursor: pointer;
 }
 .YDEV_SEG_BTN:last-child { border-right: 0; }
 .YDEV_SEG_BTN.is-active { background: #2563eb; color: #fff; font-weight: 600; }
 .YDEV_SEARCH {
-    font: inherit; font-size: 12px; padding: 4px 9px; min-width: 170px;
+    font: inherit; font-size: 1rem; padding: 0.4rem 0.7rem; min-width: 13rem;
     border: 1px solid rgba(0,0,0,0.18); border-radius: 7px;
     background: transparent; color: inherit;
 }
@@ -76425,7 +76599,7 @@ function ensure_dev_style() {
 .YDEV_STAT.is-strong { font-weight: 700; }
 .YDEV_TITLE { display: flex; align-items: baseline; gap: 8px; }
 .YDEV_TITLE_MAIN { font-weight: 700; }
-.YDEV_TITLE_SUB { opacity: 0.7; font-size: 12px; }
+.YDEV_TITLE_SUB { opacity: 0.7; font-size: 0.875rem; }
 /*  The ink of the log.
  *
  *  It used to be one grey dimmed with opacity per role -- 0.85 for a key,
@@ -76464,7 +76638,7 @@ function ensure_dev_style() {
 /* -------- entries (shared) -------- */
 .TRAFFIC_ENTRY {
     border-left: 3px solid #94a3b8; border-radius: 3px;
-    font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 13px;
+    font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 0.9375rem;
     background: rgba(0,0,0,0.02);
 }
 .TRAFFIC_ENTRY { margin: 6px 0; padding: 4px 8px; line-height: 1.55; }
@@ -76478,18 +76652,18 @@ function ensure_dev_style() {
 /*  Where the message went through. min-width 0 and flex 0 1 auto so it is the
     part that gives way when the row runs out of width -- the event name and
     the size/time must not be the ones to go.  */
-.TRAFFIC_SRC { color: var(--ydev-src); font-size: 11px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.TRAFFIC_SRC { color: var(--ydev-src); font-size: 0.8125rem; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dir-out .TRAFFIC_ARROW, .dir-out .TRAFFIC_EVENT { color: #2563eb; }
 .dir-in  .TRAFFIC_ARROW, .dir-in  .TRAFFIC_EVENT { color: #059669; }
 .dir-err .TRAFFIC_ARROW, .dir-err .TRAFFIC_EVENT { color: #dc2626; }
-.TRAFFIC_META { margin-left: auto; color: var(--ydev-dim); font-size: 11px; white-space: nowrap; }
+.TRAFFIC_META { margin-left: auto; color: var(--ydev-dim); font-size: 0.8125rem; white-space: nowrap; }
 /*  The indent of a nested block is NOT a hover effect: it used to be given
     only on .TRAFFIC_ENTRY:hover, so moving the cursor across the log made
     every payload under it jump 16px sideways and reflow. A payload being
     read must not move because the pointer passed over it.
     (No backticks in here: this stylesheet is a template literal.)  */
 .TRAFFIC_KW { margin: 2px 0 0 16px; }
-.TRAFFIC_FULL { margin: 4px 0 0 16px; padding: 6px 8px; font-family: monospace; font-size: 11px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
+.TRAFFIC_FULL { margin: 4px 0 0 16px; padding: 6px 8px; font-family: monospace; font-size: 0.875rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
 .TRAFFIC_ROW { display: flex; gap: 6px; align-items: baseline; }
 .TRAFFIC_BULLET { color: var(--ydev-bullet); flex: 0 0 auto; }
 .TRAFFIC_KEY { color: var(--ydev-key); flex: 0 0 auto; }
@@ -76514,17 +76688,17 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
 .TRAFFIC_PREV.t-bool  { color: var(--ydev-bool); }
 .TRAFFIC_PREV.t-null  { color: var(--ydev-bool); font-style: italic; }
 .TRAFFIC_PREV.t-empty { color: var(--ydev-dim); }
-.YDEV_EMPTY { color: var(--ydev-dim); font-size: 12px; padding: 18px 10px; text-align: center; }
+.YDEV_EMPTY { color: var(--ydev-dim); font-size: 0.875rem; padding: 18px 10px; text-align: center; }
 /* -------- mirrored console logs (error/warning/info/debug/msg; the automata trace shows as debug) -------- */
-.YDEV_LOGROW { display: flex; align-items: baseline; gap: 8px; margin: 1px 0; padding: 2px 8px; border-left: 3px solid #94a3b8; border-radius: 3px; font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 12px; background: rgba(0,0,0,0.015); }
-.YDEV_LOG_LVL { flex: 0 0 auto; text-transform: uppercase; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: var(--ydev-dim); min-width: 48px; }
+.YDEV_LOGROW { display: flex; align-items: baseline; gap: 8px; margin: 1px 0; padding: 2px 8px; border-left: 3px solid #94a3b8; border-radius: 3px; font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 0.9375rem; background: rgba(0,0,0,0.015); }
+.YDEV_LOG_LVL { flex: 0 0 auto; text-transform: uppercase; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ydev-dim); min-width: 4.5rem; }
 .YDEV_LOG_TXT { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; word-break: break-word; color: var(--ydev-ink); }
 .YDEV_LOG_error   { border-left-color: #dc2626; } .YDEV_LOG_error   .YDEV_LOG_LVL { color: #dc2626; }
 .YDEV_LOG_warning { border-left-color: #d97706; } .YDEV_LOG_warning .YDEV_LOG_LVL { color: #d97706; }
 .YDEV_LOG_info    { border-left-color: #2563eb; } .YDEV_LOG_info    .YDEV_LOG_LVL { color: #2563eb; }
 .YDEV_LOG_msg     { border-left-color: #0891b2; } .YDEV_LOG_msg     .YDEV_LOG_LVL { color: #0891b2; }
 .YDEV_LOG_debug   { border-left-color: #94a3b8; } .YDEV_LOG_debug   .YDEV_LOG_LVL { color: #94a3b8; } .YDEV_LOG_debug .YDEV_LOG_TXT { color: var(--ydev-dim); }
-.YDEV_LOG_json    { border-left-color: #9333ea; align-items: flex-start; } .YDEV_LOG_json .YDEV_LOG_LVL { color: #9333ea; } .YDEV_LOG_json .YDEV_LOG_TXT { font-size: 11px; line-height: 1.35; color: var(--ydev-dim); }
+.YDEV_LOG_json    { border-left-color: #9333ea; align-items: flex-start; } .YDEV_LOG_json .YDEV_LOG_LVL { color: #9333ea; } .YDEV_LOG_json .YDEV_LOG_TXT { font-size: 0.875rem; line-height: 1.4; color: var(--ydev-dim); }
 /* -------- dark theme -------- */
 :root[data-theme="dark"] .TRAFFIC_FULL { background: rgba(255,255,255,0.05); }
 :root[data-theme="dark"] .YDEV_BAR, :root[data-theme="dark"] .YDEV_STATS { background: rgba(255,255,255,0.04); }

package/package.json

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

package/src/c_yui_treedb_topic_with_form.js

@@ -199,6 +199,7 @@ SDATA(data_type_t.DTP_BOOLEAN,  "with_refresh_button",       0,  true,   "Button
 SDATA(data_type_t.DTP_BOOLEAN,  "with_search_button",        0,  true,   "Button toolbar SEARCH"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_schema_button",        0,  true,   "Button toolbar SCHEMA (show the topic's desc)"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_columns_button",       0,  true,   "Button toolbar COLUMNS (choose which columns the table shows)"),
+SDATA(data_type_t.DTP_BOOLEAN,  "with_json_button",          0,  true,   "Button toolbar RAW JSON (the table's records as json, with the metadata of each record)"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_export_button",        0,  true,   "Button toolbar EXPORT (download as CSV what the table holds)"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_header_filters",       0,  true,   "Per-column filter box in the table header, on the columns a text/number match means something (not hooks, fkeys or json)"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_inline_edit",          0,  true,   "Edit a writable scalar cell in place while in edition mode (the record form keeps the rest)"),
@@ -255,6 +256,9 @@ let PRIVATE_DATA = {
     schema_win:         null,   // C_YUI_WINDOW presenting it (laptop)
     cell_json_gobj:     null,   // hosted C_YUI_JSON child (while a cell is open)
     cell_json_modal:    null,   // { close } handle of the cell dialog (phone)
+    table_json_gobj:    null,   // hosted C_YUI_JSON child (while the table json is open)
+    table_json_win:     null,   // C_YUI_WINDOW presenting it (laptop)
+    table_json_modal:   null,   // { close } handle of the table json dialog (phone)
     cell_json_win:      null,   // C_YUI_WINDOW presenting it (laptop)
     cell_file_box:      null,   // $box of the file popup (while a file cell is open)
     cell_file_modal:    null,   // { close } handle of the file dialog (phone)
@@ -465,6 +469,7 @@ function mt_stop(gobj)
     close_form_dialog(gobj);
     close_schema_dialog(gobj);
     close_cell_json_dialog(gobj);
+    close_table_json_dialog(gobj);
     close_cell_file_dialog(gobj);
     close_hook_choice(gobj);
     drop_pending_assets(gobj);
@@ -483,6 +488,7 @@ function mt_destroy(gobj)
     close_form_dialog(gobj);
     close_schema_dialog(gobj);
     close_cell_json_dialog(gobj);
+    close_table_json_dialog(gobj);
     close_cell_file_dialog(gobj);
     close_hook_choice(gobj);
     drop_pending_assets(gobj);
@@ -746,6 +752,7 @@ function build_ui(gobj)
     let with_search_button      = gobj_read_bool_attr(gobj, "with_search_button");
     let with_schema_button      = gobj_read_bool_attr(gobj, "with_schema_button");
     let with_columns_button     = gobj_read_bool_attr(gobj, "with_columns_button");
+    let with_json_button        = gobj_read_bool_attr(gobj, "with_json_button");
     let with_export_button      = gobj_read_bool_attr(gobj, "with_export_button");
 
     if(with_search_button) {
@@ -818,7 +825,7 @@ function build_ui(gobj)
 
     /*  The ORDER is a contract shared with every table toolbar of the
      *  ecosystem: what is particular to this view first (search, schema),
-     *  then the common block ALWAYS as Refresh, Columns, Export, then Close
+     *  then the common block ALWAYS as Refresh, Columns, (Raw JSON,) Export, then Close
      *  when there is one. A button that moves from view to view has to be
      *  looked for every time. */
     if(with_refresh_button) {
@@ -859,6 +866,27 @@ function build_ui(gobj)
         $view_toolbar.appendChild($columns);
     }
 
+    if(with_json_button) {
+        /*  The records of the table as json, WITH the metadata of each one
+         *  (__md_treedb__: rowids, t/tm, tag, pure_node...). The rows the
+         *  table holds carry no metadata -- it is filtered out of the read
+         *  that fills it -- so the host asks the backend again, with it. */
+        let $json = createElement2(
+            ['button', {class: 'TREEDB_TABLE_JSON button mr-1',
+                        title: t('raw json'), 'data-i18n-title': 'raw json',
+                        'aria-label': t('raw json'), 'data-i18n-aria-label': 'raw json'}, [
+                yui_toolbar_icon('yi-eye'),
+                ['span', {class: 'is-hidden-mobile', i18n: 'raw json', style: 'padding-left:5px;'}, 'raw json']
+            ], {
+                'click': (event) => {
+                    event.stopPropagation();
+                    gobj_send_event(gobj, "EV_SHOW_TABLE_JSON", {}, gobj);
+                }
+            }]
+        );
+        $view_toolbar.appendChild($json);
+    }
+
     if(with_export_button) {
         /*  What the TABLE holds, filters and column choice applied — not the
          *  topic. A server-side dump of every node is not something this view
@@ -4976,6 +5004,142 @@ function ac_export_table(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  The records of the table as json, with their metadata: ask
+ *  the host for them (it owns the link to the backend). The rows
+ *  the table holds were read WITHOUT metadata, so they cannot
+ *  answer this themselves.
+ ************************************************************/
+function ac_show_table_json(gobj, event, kw, src)
+{
+    gobj_publish_event(
+        gobj,
+        "EV_REQUEST_JSON",
+        {
+            topic_name: gobj_read_str_attr(gobj, "topic_name")
+        }
+    );
+    return 0;
+}
+
+/************************************************************
+ *  The host's answer: the topic's records with metadata. What is
+ *  shown is what the TABLE shows: when a filter or the search
+ *  leaves some rows out, only the records of the rows left in
+ *  (matched by id) are kept.
+ ************************************************************/
+function ac_json_loaded(gobj, event, kw, src)
+{
+    let records = (kw && Array.isArray(kw.rows)) ? kw.rows : [];
+
+    let tabulator = gobj_read_attr(gobj, "tabulator");
+    if(tabulator) {
+        try {
+            let active = tabulator.getData("active");
+            if(active.length < tabulator.getDataCount()) {
+                let ids = new Set(active.map((r) => String(r.id)));
+                records = records.filter((r) => ids.has(String(r && r.id)));
+            }
+        } catch(e) {
+            log_warning(`${gobj_short_name(gobj)}: cannot read the active rows: ${e}`);
+        }
+    }
+
+    open_table_json_dialog(gobj, records);
+    return 0;
+}
+
+/************************************************************
+ *  Show the table's records in the adaptive json popup (a
+ *  window on a laptop, a sheet on a phone). One at a time: a
+ *  second open replaces the first.
+ ************************************************************/
+function open_table_json_dialog(gobj, records)
+{
+    close_table_json_dialog(gobj);
+
+    let priv = gobj.priv;
+
+    let json_view = gobj_create_pure_child(
+        "tablejson_" + clean_name(gobj_name(gobj)),
+        "C_YUI_JSON",
+        {
+            /*  No `title`: the popup header already titles it. */
+        },
+        gobj
+    );
+    if(!json_view) {
+        log_error(`${gobj_short_name(gobj)}: cannot create the table json viewer`);
+        return;
+    }
+    priv.table_json_gobj = json_view;
+    gobj_start(json_view);
+
+    let $box = gobj_read_attr(json_view, "$container");
+    if(!$box) {
+        log_error(`${gobj_short_name(gobj)}: the table json viewer built no $container`);
+        teardown_table_json_child(gobj);
+        return;
+    }
+
+    /*  The topic is DATA (the prefix), the title carries its key.  */
+    let presented = present_json_popup(gobj, $box, {
+        name:          "tablejsonwin_" + clean_name(gobj_name(gobj)),
+        logical_class: "TREEDB_TABLE_JSON",
+        title_prefix:  gobj_read_str_attr(gobj, "topic_name"),
+        title:         "raw json",
+        icon:          "yi-eye",
+        forget_window: function() {
+            priv.table_json_win = null;
+        },
+        on_close:      function() {
+            teardown_table_json_child(gobj);
+        }
+    });
+    if(!presented) {
+        teardown_table_json_child(gobj);    // Error already logged
+        return;
+    }
+    priv.table_json_modal = presented.modal;
+    priv.table_json_win = presented.win;
+
+    gobj_send_event(json_view, "EV_SET_JSON", {json: records}, gobj);
+}
+
+/************************************************************
+ *  Destroy the hosted C_YUI_JSON child of the table json.
+ ************************************************************/
+function teardown_table_json_child(gobj)
+{
+    let priv = gobj.priv;
+    if(priv.table_json_gobj) {
+        if(gobj_is_running(priv.table_json_gobj)) {
+            gobj_stop(priv.table_json_gobj);
+        }
+        gobj_destroy(priv.table_json_gobj);
+        priv.table_json_gobj = null;
+    }
+    let win = priv.table_json_win;
+    priv.table_json_win = null;
+    retire_popup_window(win);
+    priv.table_json_modal = null;
+}
+
+/************************************************************
+ *  Close the table json dialog (teardown, or a second open).
+ ************************************************************/
+function close_table_json_dialog(gobj)
+{
+    let priv = gobj.priv;
+    if(priv.table_json_modal) {
+        let modal = priv.table_json_modal;
+        priv.table_json_modal = null;
+        modal.close();          // -> on_close -> teardown_table_json_child
+        return;
+    }
+    teardown_table_json_child(gobj);
+}
+
 /************************************************************
  *  {
  *      href: href
@@ -5075,6 +5239,8 @@ function create_gclass(gclass_name)
             ["EV_EDIT_RECORD",          ac_edit_record,        null],
             ["EV_TOGGLE_COLUMN",        ac_toggle_column,      null],
             ["EV_EXPORT_TABLE",         ac_export_table,       null],
+            ["EV_SHOW_TABLE_JSON",      ac_show_table_json,    null],
+            ["EV_JSON_LOADED",          ac_json_loaded,        null],
             ["EV_SHOW",                 ac_show,               null],
             ["EV_HIDE",                 ac_hide,               null]
         ]]
@@ -5130,6 +5296,9 @@ function create_gclass(gclass_name)
         ["EV_EDIT_RECORD",          0],
         ["EV_TOGGLE_COLUMN",        0],
         ["EV_EXPORT_TABLE",         0],
+        ["EV_SHOW_TABLE_JSON",      0],
+        ["EV_JSON_LOADED",          0],
+        ["EV_REQUEST_JSON",         event_flag_t.EVF_OUTPUT_EVENT],
 
         ["EV_CREATE_RECORD",        event_flag_t.EVF_OUTPUT_EVENT],
         ["EV_UPDATE_RECORD",        event_flag_t.EVF_OUTPUT_EVENT],

package/src/c_yui_treedb_topics.js

@@ -1502,7 +1502,7 @@ function get_gobj_formtable(gobj, topic_name)
 /************************************************************
  *  Command to remote service
  ************************************************************/
-function treedb_nodes(gobj, treedb_name, topic_name, options, page)
+function treedb_nodes(gobj, treedb_name, topic_name, options, page, purpose)
 {
     let command = "nodes";
 
@@ -1517,6 +1517,9 @@ function treedb_nodes(gobj, treedb_name, topic_name, options, page)
     kw.__md_command__ = { // Data to be returned
         topic_name: topic_name,
     };
+    if(purpose) {
+        kw.__md_command__.purpose = purpose;
+    }
 
     /*  A PAGE, when the table asked for one. `from` is 1-based and a
      *  backend that does not know these two answers the whole list, which
@@ -2006,7 +2009,19 @@ function ac_mt_command_answer(gobj, event, kw, src)
                  *  never travels to the backend as a parameter it does not
                  *  know. */
                 let req_id = kw_get_str(gobj, kw_command, "req_id", "", 0);
-                if(req_id) {
+                let purpose = kw_get_str(gobj, kw_command, "purpose", "", 0);
+                if(purpose === "json") {
+                    /*  The table's Raw JSON: the same records WITH their
+                     *  metadata, for the viewer -- never for the table,
+                     *  whose rows must stay metadata-free (they go back to
+                     *  the backend on a save). */
+                    gobj_send_event(
+                        gobj_topic_form,
+                        "EV_JSON_LOADED",
+                        {rows: answer.rows},
+                        gobj
+                    );
+                } else if(req_id) {
                     gobj_send_event(
                         gobj_topic_form,
                         "EV_PAGE_LOADED",
@@ -2415,6 +2430,29 @@ function ac_create_record(gobj, event, kw, src)
     );
 }
 
+/********************************************
+ *  A topic table wants its records as json, WITH the metadata of
+ *  each one (its Raw JSON button). The table's own rows are read
+ *  without it, so this is a read of its own: the whole topic, and
+ *  the table keeps to the rows it shows.
+ ********************************************/
+function ac_request_json(gobj, event, kw, src)
+{
+    let topic_name = kw.topic_name || gobj_read_attr(src, "topic_name");
+    if(!topic_name) {
+        log_error(`${gobj_short_name(gobj)}: a json request with no topic`);
+        return -1;
+    }
+    return treedb_nodes(
+        gobj,
+        gobj_read_str_attr(gobj, "treedb_name"),
+        topic_name,
+        Object.assign({}, TABLE_READ_OPTIONS, {with_metadata: true}),
+        null,
+        "json"
+    );    // Error already logged
+}
+
 /********************************************
  *  A topic table wants a page.
  *
@@ -2779,6 +2817,7 @@ function create_gclass(gclass_name)
             ["EV_UPDATE_RECORD",        ac_update_record,           null],
             ["EV_UPDATE_FIELD",         ac_update_field,            null],
             ["EV_REQUEST_PAGE",         ac_request_page,            null],
+            ["EV_REQUEST_JSON",         ac_request_json,            null],
             ["EV_REQUEST_ASSET",        ac_request_asset,           null],
             ["EV_OPEN_LINKED",          ac_open_linked,             null],
             ["EV_DELETE_RECORD",        ac_delete_record,           null],
@@ -2810,6 +2849,7 @@ function create_gclass(gclass_name)
         ["EV_UPDATE_RECORD",        0],
         ["EV_UPDATE_FIELD",         0],
         ["EV_REQUEST_PAGE",         0],
+        ["EV_REQUEST_JSON",         0],
         ["EV_REQUEST_ASSET",        0],
         ["EV_OPEN_LINKED",          0],
         ["EV_DELETE_RECORD",        0],

package/src/yui_dev.js

@@ -404,9 +404,14 @@ function ensure_dev_style()
     flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 14px;
     padding: 6px 10px; border-top: 1px solid rgba(0,0,0,0.1);
     background: rgba(0,0,0,0.03);
-    font-family: "DejaVu Sans Mono", monospace; font-size: 11px;
+    font-family: "DejaVu Sans Mono", monospace; font-size: 0.875rem;
     opacity: 0.9; font-variant-numeric: tabular-nums;
 }
+/*  Sizes in rem, not px: they follow the reader's zoom and root size. The
+    controls (chips, segments, search) are at 1rem with a finger's padding --
+    this window used to be all 9-13px, controls included, which is what
+    is-small is not for. Only secondary ink (source, size/time, the
+    uppercase labels) goes under 0.9rem. (No backticks: template literal.)  */
 /* -------- control bar -------- */
 .YDEV_BAR {
     display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
@@ -415,12 +420,12 @@ function ensure_dev_style()
 }
 .YDEV_GROUP { display: inline-flex; align-items: center; gap: 5px; }
 .YDEV_LABEL {
-    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
-    opacity: 0.5; align-self: center;
+    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
+    opacity: 0.6; align-self: center;
 }
 .YDEV_SEP { width: 1px; align-self: stretch; background: rgba(0,0,0,0.12); }
 .YDEV_CHIP {
-    font: inherit; font-size: 12px; line-height: 1.4; padding: 3px 9px;
+    font: inherit; font-size: 1rem; line-height: 1.4; padding: 0.4rem 0.8rem;
     border: 1px solid rgba(0,0,0,0.18); border-radius: 999px;
     background: transparent; color: inherit; cursor: pointer;
     display: inline-flex; align-items: center; gap: 5px;
@@ -433,14 +438,14 @@ function ensure_dev_style()
 .YDEV_CHIP[data-dir]:not(.is-active) { opacity: 0.4; text-decoration: line-through; }
 .YDEV_SEG { display: inline-flex; border: 1px solid rgba(0,0,0,0.18); border-radius: 7px; overflow: hidden; }
 .YDEV_SEG_BTN {
-    font: inherit; font-size: 12px; padding: 4px 10px; border: 0;
+    font: inherit; font-size: 1rem; padding: 0.4rem 0.85rem; border: 0;
     border-right: 1px solid rgba(0,0,0,0.12);
     background: transparent; color: inherit; cursor: pointer;
 }
 .YDEV_SEG_BTN:last-child { border-right: 0; }
 .YDEV_SEG_BTN.is-active { background: #2563eb; color: #fff; font-weight: 600; }
 .YDEV_SEARCH {
-    font: inherit; font-size: 12px; padding: 4px 9px; min-width: 170px;
+    font: inherit; font-size: 1rem; padding: 0.4rem 0.7rem; min-width: 13rem;
     border: 1px solid rgba(0,0,0,0.18); border-radius: 7px;
     background: transparent; color: inherit;
 }
@@ -449,7 +454,7 @@ function ensure_dev_style()
 .YDEV_STAT.is-strong { font-weight: 700; }
 .YDEV_TITLE { display: flex; align-items: baseline; gap: 8px; }
 .YDEV_TITLE_MAIN { font-weight: 700; }
-.YDEV_TITLE_SUB { opacity: 0.7; font-size: 12px; }
+.YDEV_TITLE_SUB { opacity: 0.7; font-size: 0.875rem; }
 /*  The ink of the log.
  *
  *  It used to be one grey dimmed with opacity per role -- 0.85 for a key,
@@ -488,7 +493,7 @@ function ensure_dev_style()
 /* -------- entries (shared) -------- */
 .TRAFFIC_ENTRY {
     border-left: 3px solid #94a3b8; border-radius: 3px;
-    font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 13px;
+    font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 0.9375rem;
     background: rgba(0,0,0,0.02);
 }
 .TRAFFIC_ENTRY { margin: 6px 0; padding: 4px 8px; line-height: 1.55; }
@@ -502,18 +507,18 @@ function ensure_dev_style()
 /*  Where the message went through. min-width 0 and flex 0 1 auto so it is the
     part that gives way when the row runs out of width -- the event name and
     the size/time must not be the ones to go.  */
-.TRAFFIC_SRC { color: var(--ydev-src); font-size: 11px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.TRAFFIC_SRC { color: var(--ydev-src); font-size: 0.8125rem; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dir-out .TRAFFIC_ARROW, .dir-out .TRAFFIC_EVENT { color: #2563eb; }
 .dir-in  .TRAFFIC_ARROW, .dir-in  .TRAFFIC_EVENT { color: #059669; }
 .dir-err .TRAFFIC_ARROW, .dir-err .TRAFFIC_EVENT { color: #dc2626; }
-.TRAFFIC_META { margin-left: auto; color: var(--ydev-dim); font-size: 11px; white-space: nowrap; }
+.TRAFFIC_META { margin-left: auto; color: var(--ydev-dim); font-size: 0.8125rem; white-space: nowrap; }
 /*  The indent of a nested block is NOT a hover effect: it used to be given
     only on .TRAFFIC_ENTRY:hover, so moving the cursor across the log made
     every payload under it jump 16px sideways and reflow. A payload being
     read must not move because the pointer passed over it.
     (No backticks in here: this stylesheet is a template literal.)  */
 .TRAFFIC_KW { margin: 2px 0 0 16px; }
-.TRAFFIC_FULL { margin: 4px 0 0 16px; padding: 6px 8px; font-family: monospace; font-size: 11px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
+.TRAFFIC_FULL { margin: 4px 0 0 16px; padding: 6px 8px; font-family: monospace; font-size: 0.875rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.04); border-radius: 4px; overflow-x: auto; }
 .TRAFFIC_ROW { display: flex; gap: 6px; align-items: baseline; }
 .TRAFFIC_BULLET { color: var(--ydev-bullet); flex: 0 0 auto; }
 .TRAFFIC_KEY { color: var(--ydev-key); flex: 0 0 auto; }
@@ -538,17 +543,17 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
 .TRAFFIC_PREV.t-bool  { color: var(--ydev-bool); }
 .TRAFFIC_PREV.t-null  { color: var(--ydev-bool); font-style: italic; }
 .TRAFFIC_PREV.t-empty { color: var(--ydev-dim); }
-.YDEV_EMPTY { color: var(--ydev-dim); font-size: 12px; padding: 18px 10px; text-align: center; }
+.YDEV_EMPTY { color: var(--ydev-dim); font-size: 0.875rem; padding: 18px 10px; text-align: center; }
 /* -------- mirrored console logs (error/warning/info/debug/msg; the automata trace shows as debug) -------- */
-.YDEV_LOGROW { display: flex; align-items: baseline; gap: 8px; margin: 1px 0; padding: 2px 8px; border-left: 3px solid #94a3b8; border-radius: 3px; font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 12px; background: rgba(0,0,0,0.015); }
-.YDEV_LOG_LVL { flex: 0 0 auto; text-transform: uppercase; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: var(--ydev-dim); min-width: 48px; }
+.YDEV_LOGROW { display: flex; align-items: baseline; gap: 8px; margin: 1px 0; padding: 2px 8px; border-left: 3px solid #94a3b8; border-radius: 3px; font-family: "DejaVu Sans Mono", monospace, consolas, monaco; font-size: 0.9375rem; background: rgba(0,0,0,0.015); }
+.YDEV_LOG_LVL { flex: 0 0 auto; text-transform: uppercase; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ydev-dim); min-width: 4.5rem; }
 .YDEV_LOG_TXT { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; word-break: break-word; color: var(--ydev-ink); }
 .YDEV_LOG_error   { border-left-color: #dc2626; } .YDEV_LOG_error   .YDEV_LOG_LVL { color: #dc2626; }
 .YDEV_LOG_warning { border-left-color: #d97706; } .YDEV_LOG_warning .YDEV_LOG_LVL { color: #d97706; }
 .YDEV_LOG_info    { border-left-color: #2563eb; } .YDEV_LOG_info    .YDEV_LOG_LVL { color: #2563eb; }
 .YDEV_LOG_msg     { border-left-color: #0891b2; } .YDEV_LOG_msg     .YDEV_LOG_LVL { color: #0891b2; }
 .YDEV_LOG_debug   { border-left-color: #94a3b8; } .YDEV_LOG_debug   .YDEV_LOG_LVL { color: #94a3b8; } .YDEV_LOG_debug .YDEV_LOG_TXT { color: var(--ydev-dim); }
-.YDEV_LOG_json    { border-left-color: #9333ea; align-items: flex-start; } .YDEV_LOG_json .YDEV_LOG_LVL { color: #9333ea; } .YDEV_LOG_json .YDEV_LOG_TXT { font-size: 11px; line-height: 1.35; color: var(--ydev-dim); }
+.YDEV_LOG_json    { border-left-color: #9333ea; align-items: flex-start; } .YDEV_LOG_json .YDEV_LOG_LVL { color: #9333ea; } .YDEV_LOG_json .YDEV_LOG_TXT { font-size: 0.875rem; line-height: 1.4; color: var(--ydev-dim); }
 /* -------- dark theme -------- */
 :root[data-theme="dark"] .TRAFFIC_FULL { background: rgba(255,255,255,0.05); }
 :root[data-theme="dark"] .YDEV_BAR, :root[data-theme="dark"] .YDEV_STATS { background: rgba(255,255,255,0.04); }