@yuneta/gobj-ui 7.23.176 → 7.23.178

package/dist/gobj-ui.cjs.js

@@ -76448,7 +76448,12 @@ function ensure_dev_style() {
 .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; opacity: 0.6; font-size: 11px; white-space: nowrap; }
-.TRAFFIC_ENTRY:hover .TRAFFIC_KW { margin: 2px 0 0 16px; }
+/*  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_ROW { display: flex; gap: 6px; align-items: baseline; }
 .TRAFFIC_BULLET { opacity: 0.45; flex: 0 0 auto; }
@@ -76503,8 +76508,8 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
 ******************************/
 /************************************************************
 *  One scalar field as a bullet row: `• key: value`.
-*  Type-coloured; long strings clipped (full text on hover);
-*  timestamp fields get an ISO annotation.
+*  Type-coloured; long strings clipped (the whole value is in the Expanded
+*  view); timestamp fields get an ISO annotation.
 ************************************************************/
 function traffic_scalar_row(key, value) {
 	let cls;
@@ -76522,14 +76527,10 @@ function traffic_scalar_row(key, value) {
 		cls = "t-str";
 		text = String(value);
 	}
-	let full = text;
 	if (text.length > 200) text = text.slice(0, 200) + "…";
 	let val_children = [[
 		"span",
-		{
-			class: "TRAFFIC_VAL " + cls,
-			title: full
-		},
+		{ class: "TRAFFIC_VAL " + cls },
 		text
 	]];
 	if (key in TRAFFIC_TS_FIELDS && typeof value === "number") {
@@ -76562,6 +76563,29 @@ function traffic_scalar_row(key, value) {
 		]
 	];
 }
+var PREVIEW_MAX_KEYS = 4;
+var PREVIEW_MAX_CHARS = 90;
+var PREVIEW_MAX_VALUE = 28;
+function preview_scalar(v) {
+	if (v === null) return "null";
+	if (typeof v === "string") return "\"" + (v.length > PREVIEW_MAX_VALUE ? v.slice(0, PREVIEW_MAX_VALUE) + "…" : v) + "\"";
+	if (typeof v === "object") return Array.isArray(v) ? "[…]" : "{…}";
+	return String(v);
+}
+function object_preview(obj, count) {
+	let keys = Object.keys(obj);
+	let parts = [];
+	let used = 0;
+	for (let k of keys) {
+		if (parts.length >= PREVIEW_MAX_KEYS) break;
+		let part = k + ": " + preview_scalar(obj[k]);
+		if (parts.length > 0 && used + part.length > PREVIEW_MAX_CHARS) break;
+		parts.push(part);
+		used += part.length + 2;
+	}
+	if (parts.length < count) parts.push("…");
+	return "{" + parts.join(", ") + "}";
+}
 /************************************************************
 *  One field of any type. Scalars → a bullet row; objects and
 *  arrays → a collapsed <details> so metadata / nested payloads
@@ -76592,7 +76616,7 @@ function traffic_value_node(key, value) {
 			]
 		]
 	];
-	let hint = is_arr ? `[${count}]` : `{${count}}`;
+	let hint = is_arr ? `[${count}]` : object_preview(value, count);
 	return [
 		"details",
 		{ class: "TRAFFIC_NEST" },
@@ -76677,10 +76701,7 @@ function render_detailed(e) {
 	]);
 	return (0, _yuneta_gobj_js.createElement2)([
 		"div",
-		{
-			class: "TRAFFIC_ENTRY " + dir_class(e.dir),
-			title: e.title
-		},
+		{ class: "TRAFFIC_ENTRY " + dir_class(e.dir) },
 		children
 	]);
 }
@@ -76735,20 +76756,14 @@ function render_full(e) {
 	]];
 	return (0, _yuneta_gobj_js.createElement2)([
 		"div",
-		{
-			class: "TRAFFIC_ENTRY " + dir_class(e.dir),
-			title: e.title
-		},
+		{ class: "TRAFFIC_ENTRY " + dir_class(e.dir) },
 		children
 	]);
 }
 function render_log(e) {
 	let $row = (0, _yuneta_gobj_js.createElement2)([
 		"div",
-		{
-			class: "YDEV_LOGROW YDEV_LOG_" + e.level,
-			title: e.level
-		},
+		{ class: "YDEV_LOGROW YDEV_LOG_" + e.level },
 		[
 			[
 				"span",

package/dist/gobj-ui.es.js

@@ -76443,7 +76443,12 @@ function ensure_dev_style() {
 .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; opacity: 0.6; font-size: 11px; white-space: nowrap; }
-.TRAFFIC_ENTRY:hover .TRAFFIC_KW { margin: 2px 0 0 16px; }
+/*  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_ROW { display: flex; gap: 6px; align-items: baseline; }
 .TRAFFIC_BULLET { opacity: 0.45; flex: 0 0 auto; }
@@ -76498,8 +76503,8 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
 ******************************/
 /************************************************************
 *  One scalar field as a bullet row: `• key: value`.
-*  Type-coloured; long strings clipped (full text on hover);
-*  timestamp fields get an ISO annotation.
+*  Type-coloured; long strings clipped (the whole value is in the Expanded
+*  view); timestamp fields get an ISO annotation.
 ************************************************************/
 function traffic_scalar_row(key, value) {
 	let cls;
@@ -76517,14 +76522,10 @@ function traffic_scalar_row(key, value) {
 		cls = "t-str";
 		text = String(value);
 	}
-	let full = text;
 	if (text.length > 200) text = text.slice(0, 200) + "…";
 	let val_children = [[
 		"span",
-		{
-			class: "TRAFFIC_VAL " + cls,
-			title: full
-		},
+		{ class: "TRAFFIC_VAL " + cls },
 		text
 	]];
 	if (key in TRAFFIC_TS_FIELDS && typeof value === "number") {
@@ -76557,6 +76558,29 @@ function traffic_scalar_row(key, value) {
 		]
 	];
 }
+var PREVIEW_MAX_KEYS = 4;
+var PREVIEW_MAX_CHARS = 90;
+var PREVIEW_MAX_VALUE = 28;
+function preview_scalar(v) {
+	if (v === null) return "null";
+	if (typeof v === "string") return "\"" + (v.length > PREVIEW_MAX_VALUE ? v.slice(0, PREVIEW_MAX_VALUE) + "…" : v) + "\"";
+	if (typeof v === "object") return Array.isArray(v) ? "[…]" : "{…}";
+	return String(v);
+}
+function object_preview(obj, count) {
+	let keys = Object.keys(obj);
+	let parts = [];
+	let used = 0;
+	for (let k of keys) {
+		if (parts.length >= PREVIEW_MAX_KEYS) break;
+		let part = k + ": " + preview_scalar(obj[k]);
+		if (parts.length > 0 && used + part.length > PREVIEW_MAX_CHARS) break;
+		parts.push(part);
+		used += part.length + 2;
+	}
+	if (parts.length < count) parts.push("…");
+	return "{" + parts.join(", ") + "}";
+}
 /************************************************************
 *  One field of any type. Scalars → a bullet row; objects and
 *  arrays → a collapsed <details> so metadata / nested payloads
@@ -76587,7 +76611,7 @@ function traffic_value_node(key, value) {
 			]
 		]
 	];
-	let hint = is_arr ? `[${count}]` : `{${count}}`;
+	let hint = is_arr ? `[${count}]` : object_preview(value, count);
 	return [
 		"details",
 		{ class: "TRAFFIC_NEST" },
@@ -76672,10 +76696,7 @@ function render_detailed(e) {
 	]);
 	return createElement2([
 		"div",
-		{
-			class: "TRAFFIC_ENTRY " + dir_class(e.dir),
-			title: e.title
-		},
+		{ class: "TRAFFIC_ENTRY " + dir_class(e.dir) },
 		children
 	]);
 }
@@ -76730,20 +76751,14 @@ function render_full(e) {
 	]];
 	return createElement2([
 		"div",
-		{
-			class: "TRAFFIC_ENTRY " + dir_class(e.dir),
-			title: e.title
-		},
+		{ class: "TRAFFIC_ENTRY " + dir_class(e.dir) },
 		children
 	]);
 }
 function render_log(e) {
 	let $row = createElement2([
 		"div",
-		{
-			class: "YDEV_LOGROW YDEV_LOG_" + e.level,
-			title: e.level
-		},
+		{ class: "YDEV_LOGROW YDEV_LOG_" + e.level },
 		[
 			[
 				"span",

package/package.json

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

package/src/yui_dev.js

@@ -468,7 +468,12 @@ function ensure_dev_style()
 .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; opacity: 0.6; font-size: 11px; white-space: nowrap; }
-.TRAFFIC_ENTRY:hover .TRAFFIC_KW { margin: 2px 0 0 16px; }
+/*  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_ROW { display: flex; gap: 6px; align-items: baseline; }
 .TRAFFIC_BULLET { opacity: 0.45; flex: 0 0 auto; }
@@ -527,8 +532,8 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
 
 /************************************************************
  *  One scalar field as a bullet row: `• key: value`.
- *  Type-coloured; long strings clipped (full text on hover);
- *  timestamp fields get an ISO annotation.
+ *  Type-coloured; long strings clipped (the whole value is in the Expanded
+ *  view); timestamp fields get an ISO annotation.
  ************************************************************/
 function traffic_scalar_row(key, value)
 {
@@ -548,13 +553,16 @@ function traffic_scalar_row(key, value)
         text = String(value);
     }
 
-    let full = text;
     if(text.length > 200) {
         text = text.slice(0, 200) + "…";
     }
 
+    /*  No `title` with the full text: a tooltip that pops over the log while
+        it is being read is what this window had too much of, and the whole
+        value is one click away in the Expanded view. On a value SHORTER than
+        the clip -- almost all of them -- it repeated the visible text anyway.  */
     let val_children = [
-        ['span', {class: 'TRAFFIC_VAL ' + cls, title: full}, text],
+        ['span', {class: 'TRAFFIC_VAL ' + cls}, text],
     ];
     if((key in TRAFFIC_TS_FIELDS) && typeof value === "number") {
         let iso = traffic_iso(value);
@@ -570,6 +578,67 @@ function traffic_scalar_row(key, value)
     ]];
 }
 
+/*  What a FOLDED object says about itself, the way a browser console says it:
+ *  its first fields rather than a count. `{5}` is true and tells the reader
+ *  nothing -- a list of twelve column descriptors was twelve identical `{5}`,
+ *  and finding the one for `tags` meant opening them one at a time. The
+ *  console prints `Object { header: "id", fillspace: 18, … }` and that is the
+ *  idea copied here.
+ *
+ *  Strings are QUOTED, unlike the expanded rows: in one line of several
+ *  fields the quotes are what separate a value from the next key.
+ *  A nested container is not entered -- it says `{…}` / `[…]` -- because a
+ *  preview that recursed would be as long as the thing it previews.
+ *
+ *  The count is not lost: it stays in the tooltip, for an object whose first
+ *  fields do not fit.  */
+const PREVIEW_MAX_KEYS = 4;
+const PREVIEW_MAX_CHARS = 90;
+const PREVIEW_MAX_VALUE = 28;
+
+function preview_scalar(v)
+{
+    if(v === null) {
+        return "null";
+    }
+    if(typeof v === "string") {
+        let text = (v.length > PREVIEW_MAX_VALUE) ?
+            v.slice(0, PREVIEW_MAX_VALUE) + "…" : v;
+        return '"' + text + '"';
+    }
+    if(typeof v === "object") {
+        return Array.isArray(v) ? "[…]" : "{…}";
+    }
+    return String(v);
+}
+
+function object_preview(obj, count)
+{
+    let keys = Object.keys(obj);
+    let parts = [];
+    let used = 0;
+
+    for(let k of keys) {
+        if(parts.length >= PREVIEW_MAX_KEYS) {
+            break;
+        }
+        let part = k + ": " + preview_scalar(obj[k]);
+        /*  Stop at the width, but never with an empty preview: one field
+            too wide still says more than a number.  */
+        if(parts.length > 0 && used + part.length > PREVIEW_MAX_CHARS) {
+            break;
+        }
+        parts.push(part);
+        used += part.length + 2;
+    }
+
+    if(parts.length < count) {
+        parts.push("…");
+    }
+
+    return "{" + parts.join(", ") + "}";
+}
+
 /************************************************************
  *  One field of any type. Scalars → a bullet row; objects and
  *  arrays → a collapsed <details> so metadata / nested payloads
@@ -591,7 +660,7 @@ function traffic_value_node(key, value)
         ]];
     }
 
-    let hint = is_arr ? `[${count}]` : `{${count}}`;
+    let hint = is_arr ? `[${count}]` : object_preview(value, count);
     return ['details', {class: 'TRAFFIC_NEST'}, [
         ['summary', {}, [
             ['span', {class: 'TRAFFIC_BULLET'}, '▸'],
@@ -649,7 +718,7 @@ function render_detailed(e)
     } else if(!kw) {
         children.push(['div', {class: 'TRAFFIC_KW'}, traffic_bullets(e.jn)]);
     }
-    return createElement2(['div', {class: 'TRAFFIC_ENTRY ' + dir_class(e.dir), title: e.title}, children]);
+    return createElement2(['div', {class: 'TRAFFIC_ENTRY ' + dir_class(e.dir)}, children]);
 }
 
 /*  Whether an Expanded-view section is shown (persisted toggles). schema
@@ -709,14 +778,14 @@ function render_full(e)
         ['div', {class: 'TRAFFIC_HEADER'}, head],
         ['pre', {class: 'TRAFFIC_FULL'}, text],
     ];
-    return createElement2(['div', {class: 'TRAFFIC_ENTRY ' + dir_class(e.dir), title: e.title}, children]);
+    return createElement2(['div', {class: 'TRAFFIC_ENTRY ' + dir_class(e.dir)}, children]);
 }
 
 /*  A mirrored framework log line (error/warning/info/debug/msg). */
 function render_log(e)
 {
     let $row = createElement2(
-        ['div', {class: 'YDEV_LOGROW YDEV_LOG_' + e.level, title: e.level}, [
+        ['div', {class: 'YDEV_LOGROW YDEV_LOG_' + e.level}, [
             ['span', {class: 'YDEV_LOG_LVL'}, e.level],
             ['span', {class: 'YDEV_LOG_TXT'}, ''],
             ['span', {class: 'TRAFFIC_META'}, e.ts],