@yuneta/gobj-ui 7.23.178 → 7.23.179

package/dist/gobj-ui.cjs.js

@@ -76444,6 +76444,10 @@ function ensure_dev_style() {
 .TRAFFIC_ARROW { font-weight: 700; }
 .TRAFFIC_EVENT { font-weight: 700; }
 .TRAFFIC_CMD { opacity: 0.75; font-weight: 600; }
+/*  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 { opacity: 0.45; font-size: 11px; 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; }
@@ -76674,6 +76678,11 @@ function event_spans(e) {
 		{ class: "TRAFFIC_CMD" },
 		e.command
 	]);
+	if (e.title) spans.push([
+		"span",
+		{ class: "TRAFFIC_SRC" },
+		e.title
+	]);
 	return spans;
 }
 function render_detailed(e) {

package/dist/gobj-ui.es.js

@@ -76439,6 +76439,10 @@ function ensure_dev_style() {
 .TRAFFIC_ARROW { font-weight: 700; }
 .TRAFFIC_EVENT { font-weight: 700; }
 .TRAFFIC_CMD { opacity: 0.75; font-weight: 600; }
+/*  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 { opacity: 0.45; font-size: 11px; 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; }
@@ -76669,6 +76673,11 @@ function event_spans(e) {
 		{ class: "TRAFFIC_CMD" },
 		e.command
 	]);
+	if (e.title) spans.push([
+		"span",
+		{ class: "TRAFFIC_SRC" },
+		e.title
+	]);
 	return spans;
 }
 function render_detailed(e) {

package/package.json

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

package/src/yui_dev.js

@@ -464,6 +464,10 @@ function ensure_dev_style()
 .TRAFFIC_ARROW { font-weight: 700; }
 .TRAFFIC_EVENT { font-weight: 700; }
 .TRAFFIC_CMD { opacity: 0.75; font-weight: 600; }
+/*  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 { opacity: 0.45; font-size: 11px; 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; }
@@ -695,6 +699,20 @@ function traffic_bullets(obj)
                      ******************************/
 
 
+/*  The head of a traffic entry: direction, event, command, and WHERE the
+ *  message went through -- the gobj and the url, which gobj-js composes
+ *  (`c_ievent_cli`) and the browser console prints in its prefix.
+ *
+ *  It is written as TEXT, dim, and not as a `title`: as a tooltip it popped a
+ *  box over the log while it was being read, and it is the one thing in that
+ *  tooltip that was written nowhere else -- an app browsing several backends
+ *  cannot tell its messages apart without it. It shrinks before anything
+ *  else in the row.
+ *
+ *  The string carries its own `==>` / `<==`, which says the direction the
+ *  arrow already says. It is left as it comes: taking it out means parsing a
+ *  string built in another package, and it would go wrong the day that one
+ *  writes it differently.  */
 function event_spans(e)
 {
     let spans = [['span', {class: 'TRAFFIC_ARROW'}, dir_arrow(e.dir)],
@@ -702,6 +720,9 @@ function event_spans(e)
     if(e.command) {
         spans.push(['span', {class: 'TRAFFIC_CMD'}, e.command]);
     }
+    if(e.title) {
+        spans.push(['span', {class: 'TRAFFIC_SRC'}, e.title]);
+    }
     return spans;
 }
 
@@ -1760,4 +1781,11 @@ function build_dev_panel()
     return {$el: $el, dispose: dispose};
 }
 
-export {info_traffic, setup_dev, build_dev_panel, apply_dev_traces, dev_window_was_open};
+export {
+    info_traffic, setup_dev, build_dev_panel, apply_dev_traces, dev_window_was_open,
+    /*  Exported for its test: a pure formatter, and the import is also what
+        guards this file from a syntax error nothing else would catch --
+        the stylesheet below is a template literal, so one backtick in a CSS
+        comment stops the whole module from parsing.  */
+    object_preview,
+};

package/src/yui_dev_preview.test.js

@@ -0,0 +1,58 @@
+/***********************************************************************
+ *          yui_dev_preview.test.js
+ *
+ *          What a FOLDED object says about itself in the Developer
+ *          window: its first fields, the way a browser console says it.
+ *
+ *          Importing the module at all is half of this file's job: the
+ *          monitor's stylesheet is a template literal, so a single
+ *          backtick in a CSS comment stops yui_dev.js from parsing --
+ *          twice now -- and nothing else in the suite imports it.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, it, expect} from "vitest";
+import {object_preview} from "./yui_dev.js";
+
+describe("object_preview", () => {
+    it("names the first fields instead of counting them", () => {
+        const col = {
+            header: "id", fillspace: 18, type: "string",
+            flag: ["persistent"], hidden: false,
+        };
+        expect(object_preview(col, Object.keys(col).length)).toBe(
+            '{header: "id", fillspace: 18, type: "string", flag: […], …}'
+        );
+    });
+
+    it("quotes strings, so a value does not run into the next key", () => {
+        expect(object_preview({result: 0, comment: "ok"}, 2)).toBe(
+            '{result: 0, comment: "ok"}'
+        );
+    });
+
+    it("does not enter a nested container", () => {
+        const o = {a: {x: 1}, b: [1, 2]};
+        expect(object_preview(o, 2)).toBe("{a: {…}, b: […]}");
+    });
+
+    it("says there is more with an ellipsis", () => {
+        const o = {a: 1, b: 2, c: 3, d: 4, e: 5};
+        expect(object_preview(o, 5)).toBe("{a: 1, b: 2, c: 3, d: 4, …}");
+    });
+
+    it("clips a long string at 28 characters", () => {
+        const o = {comment: "x".repeat(60)};
+        expect(object_preview(o, 1)).toBe('{comment: "' + "x".repeat(28) + '…"}');
+    });
+
+    it("keeps one field even when it alone is too wide", () => {
+        const o = {only: "y".repeat(200), other: 1};
+        expect(object_preview(o, 2).startsWith('{only: "yyy')).toBe(true);
+    });
+
+    it("renders null and booleans as themselves", () => {
+        expect(object_preview({a: null, b: true}, 2)).toBe("{a: null, b: true}");
+    });
+});