@yuneta/gobj-ui 7.23.173 → 7.23.175

package/dist/gobj-ui.cjs.js

@@ -76347,11 +76347,15 @@ function build_filter_ctx() {
 		out: dev_num("dev_filter_out", 1),
 		inc: dev_num("dev_filter_in", 1),
 		err: dev_num("dev_filter_err", 1),
-		search: SEARCH_TEXT
+		search: SEARCH_TEXT,
+		view: dev_view()
 	};
 }
 function entry_hidden(e, ctx) {
-	if (e.kind === "log") return !!(ctx.search && e.hay.indexOf(ctx.search) < 0);
+	if (e.kind === "log") {
+		if (e.level === "json" && (ctx.view === "name" || ctx.view === "compact")) return true;
+		return !!(ctx.search && e.hay.indexOf(ctx.search) < 0);
+	}
 	if (e.dir === 1 && !ctx.out) return true;
 	if (e.dir === 2 && !ctx.inc) return true;
 	if (e.dir === 3 && !ctx.err) return true;
@@ -76928,6 +76932,17 @@ function append_and_follow(logger, node) {
 	if (at_bottom) logger.scrollTop = logger.scrollHeight;
 }
 /************************************************************
+*  Keep one entry in the bounded buffer, dropping the oldest
+*  (and its row, if painted).
+************************************************************/
+function push_entry(entry) {
+	TRAFFIC_LOG.push(entry);
+	if (TRAFFIC_LOG.length > TRAFFIC_MAX) {
+		let old = TRAFFIC_LOG.shift();
+		if (old.$node && old.$node.parentNode) old.$node.parentNode.removeChild(old.$node);
+	}
+}
+/************************************************************
 *  Append one inter-event message. Kept in a bounded buffer so
 *  view/filter switches repaint from memory. Shared by the legacy
 *  C_YUI_WINDOW (setup_dev) and the modal (build_dev_panel).
@@ -76945,9 +76960,6 @@ function info_traffic(title, msg, direction, size) {
 	}
 	let route = dev_route();
 	if (route !== "window") console_traffic(title, jn, direction, size);
-	let logger = document.getElementById("developer-traffic-logger");
-	if (!logger || route === "console") return;
-	ensure_dev_style();
 	let event = jn && jn.event ? String(jn.event) : "(no event)";
 	let kw = jn && jn.kw && typeof jn.kw === "object" ? jn.kw : null;
 	let command = kw && typeof kw.command === "string" ? kw.command : "";
@@ -76969,11 +76981,10 @@ function info_traffic(title, msg, direction, size) {
 		hay,
 		$node: null
 	};
-	TRAFFIC_LOG.push(entry);
-	if (TRAFFIC_LOG.length > TRAFFIC_MAX) {
-		let old = TRAFFIC_LOG.shift();
-		if (old.$node && old.$node.parentNode) old.$node.parentNode.removeChild(old.$node);
-	}
+	push_entry(entry);
+	let logger = document.getElementById("developer-traffic-logger");
+	if (!logger || route === "console") return;
+	ensure_dev_style();
 	if (!entry_hidden(entry, build_filter_ctx())) {
 		let node = render_entry(entry);
 		entry.$node = node;
@@ -76994,15 +77005,8 @@ function info_log(level, msg, hora) {
 	if (__in_info_log__) return;
 	if (level === "error") LOG_ERR_COUNT++;
 	else if (level === "warning") LOG_WARN_COUNT++;
-	if (dev_route() === "console") {
-		update_stats();
-		return;
-	}
-	let logger = document.getElementById("developer-traffic-logger");
-	if (!logger) return;
 	__in_info_log__ = true;
 	try {
-		ensure_dev_style();
 		let lvl = level || "debug";
 		let text;
 		if (lvl === "json") {
@@ -77013,21 +77017,24 @@ function info_log(level, msg, hora) {
 			}
 			if (text.length > 4e3) text = text.slice(0, 4e3) + "\n…(truncated)";
 		} else text = (0, _yuneta_gobj_js.is_string)(msg) ? msg : String(msg);
+		let ts = (0, _yuneta_gobj_js.is_string)(hora) && hora.length >= 23 ? hora.slice(11, 23) : traffic_now();
 		let entry = {
 			kind: "log",
 			level: lvl,
 			text,
 			dir: 0,
 			size: 0,
-			ts: traffic_now(),
+			ts,
 			hay: (lvl + " " + text).toLowerCase(),
 			$node: null
 		};
-		TRAFFIC_LOG.push(entry);
-		if (TRAFFIC_LOG.length > TRAFFIC_MAX) {
-			let old = TRAFFIC_LOG.shift();
-			if (old.$node && old.$node.parentNode) old.$node.parentNode.removeChild(old.$node);
+		push_entry(entry);
+		let logger = document.getElementById("developer-traffic-logger");
+		if (!logger || dev_route() === "console") {
+			update_stats();
+			return;
 		}
+		ensure_dev_style();
 		if (!entry_hidden(entry, build_filter_ctx())) {
 			let node = render_entry(entry);
 			entry.$node = node;
@@ -77365,7 +77372,11 @@ function build_control_bar() {
 			type: "search",
 			"data-role": "search",
 			placeholder: (0, i18next.t)("filter events / payload"),
-			"data-i18n-placeholder": "filter events / payload"
+			"data-i18n-placeholder": "filter events / payload",
+			title: (0, i18next.t)("filter events / payload"),
+			"data-i18n-title": "filter events / payload",
+			"aria-label": (0, i18next.t)("filter events / payload"),
+			"data-i18n-aria-label": "filter events / payload"
 		},
 		"",
 		{ input: (ev) => {
@@ -77373,6 +77384,29 @@ function build_control_bar() {
 			rerender_all();
 		} }
 	];
+	let search_clear = [
+		"button",
+		{
+			class: "YDEV_CHIP YDEV_SEARCH_CLEAR",
+			type: "button",
+			title: (0, i18next.t)("clear the filter"),
+			"data-i18n-title": "clear the filter",
+			"aria-label": (0, i18next.t)("clear the filter"),
+			"data-i18n-aria-label": "clear the filter"
+		},
+		"✕",
+		{ click: (ev) => {
+			ev.stopPropagation();
+			let $bar = ev.currentTarget.closest(".YDEV_BAR");
+			let $input = $bar ? $bar.querySelector(".YDEV_SEARCH") : null;
+			if ($input) {
+				$input.value = "";
+				$input.focus();
+			}
+			SEARCH_TEXT = "";
+			rerender_all();
+		} }
+	];
 	let copy = [
 		"button",
 		{
@@ -77440,7 +77474,7 @@ function build_control_bar() {
 			sep(),
 			grp("show", dir_chips),
 			sep(),
-			grp("find", [search]),
+			grp("find", [search, search_clear]),
 			sep(),
 			grp("log", [copy, clear])
 		]

package/dist/gobj-ui.es.js

@@ -76342,11 +76342,15 @@ function build_filter_ctx() {
 		out: dev_num("dev_filter_out", 1),
 		inc: dev_num("dev_filter_in", 1),
 		err: dev_num("dev_filter_err", 1),
-		search: SEARCH_TEXT
+		search: SEARCH_TEXT,
+		view: dev_view()
 	};
 }
 function entry_hidden(e, ctx) {
-	if (e.kind === "log") return !!(ctx.search && e.hay.indexOf(ctx.search) < 0);
+	if (e.kind === "log") {
+		if (e.level === "json" && (ctx.view === "name" || ctx.view === "compact")) return true;
+		return !!(ctx.search && e.hay.indexOf(ctx.search) < 0);
+	}
 	if (e.dir === 1 && !ctx.out) return true;
 	if (e.dir === 2 && !ctx.inc) return true;
 	if (e.dir === 3 && !ctx.err) return true;
@@ -76923,6 +76927,17 @@ function append_and_follow(logger, node) {
 	if (at_bottom) logger.scrollTop = logger.scrollHeight;
 }
 /************************************************************
+*  Keep one entry in the bounded buffer, dropping the oldest
+*  (and its row, if painted).
+************************************************************/
+function push_entry(entry) {
+	TRAFFIC_LOG.push(entry);
+	if (TRAFFIC_LOG.length > TRAFFIC_MAX) {
+		let old = TRAFFIC_LOG.shift();
+		if (old.$node && old.$node.parentNode) old.$node.parentNode.removeChild(old.$node);
+	}
+}
+/************************************************************
 *  Append one inter-event message. Kept in a bounded buffer so
 *  view/filter switches repaint from memory. Shared by the legacy
 *  C_YUI_WINDOW (setup_dev) and the modal (build_dev_panel).
@@ -76940,9 +76955,6 @@ function info_traffic(title, msg, direction, size) {
 	}
 	let route = dev_route();
 	if (route !== "window") console_traffic(title, jn, direction, size);
-	let logger = document.getElementById("developer-traffic-logger");
-	if (!logger || route === "console") return;
-	ensure_dev_style();
 	let event = jn && jn.event ? String(jn.event) : "(no event)";
 	let kw = jn && jn.kw && typeof jn.kw === "object" ? jn.kw : null;
 	let command = kw && typeof kw.command === "string" ? kw.command : "";
@@ -76964,11 +76976,10 @@ function info_traffic(title, msg, direction, size) {
 		hay,
 		$node: null
 	};
-	TRAFFIC_LOG.push(entry);
-	if (TRAFFIC_LOG.length > TRAFFIC_MAX) {
-		let old = TRAFFIC_LOG.shift();
-		if (old.$node && old.$node.parentNode) old.$node.parentNode.removeChild(old.$node);
-	}
+	push_entry(entry);
+	let logger = document.getElementById("developer-traffic-logger");
+	if (!logger || route === "console") return;
+	ensure_dev_style();
 	if (!entry_hidden(entry, build_filter_ctx())) {
 		let node = render_entry(entry);
 		entry.$node = node;
@@ -76989,15 +77000,8 @@ function info_log(level, msg, hora) {
 	if (__in_info_log__) return;
 	if (level === "error") LOG_ERR_COUNT++;
 	else if (level === "warning") LOG_WARN_COUNT++;
-	if (dev_route() === "console") {
-		update_stats();
-		return;
-	}
-	let logger = document.getElementById("developer-traffic-logger");
-	if (!logger) return;
 	__in_info_log__ = true;
 	try {
-		ensure_dev_style();
 		let lvl = level || "debug";
 		let text;
 		if (lvl === "json") {
@@ -77008,21 +77012,24 @@ function info_log(level, msg, hora) {
 			}
 			if (text.length > 4e3) text = text.slice(0, 4e3) + "\n…(truncated)";
 		} else text = is_string(msg) ? msg : String(msg);
+		let ts = is_string(hora) && hora.length >= 23 ? hora.slice(11, 23) : traffic_now();
 		let entry = {
 			kind: "log",
 			level: lvl,
 			text,
 			dir: 0,
 			size: 0,
-			ts: traffic_now(),
+			ts,
 			hay: (lvl + " " + text).toLowerCase(),
 			$node: null
 		};
-		TRAFFIC_LOG.push(entry);
-		if (TRAFFIC_LOG.length > TRAFFIC_MAX) {
-			let old = TRAFFIC_LOG.shift();
-			if (old.$node && old.$node.parentNode) old.$node.parentNode.removeChild(old.$node);
+		push_entry(entry);
+		let logger = document.getElementById("developer-traffic-logger");
+		if (!logger || dev_route() === "console") {
+			update_stats();
+			return;
 		}
+		ensure_dev_style();
 		if (!entry_hidden(entry, build_filter_ctx())) {
 			let node = render_entry(entry);
 			entry.$node = node;
@@ -77360,7 +77367,11 @@ function build_control_bar() {
 			type: "search",
 			"data-role": "search",
 			placeholder: t("filter events / payload"),
-			"data-i18n-placeholder": "filter events / payload"
+			"data-i18n-placeholder": "filter events / payload",
+			title: t("filter events / payload"),
+			"data-i18n-title": "filter events / payload",
+			"aria-label": t("filter events / payload"),
+			"data-i18n-aria-label": "filter events / payload"
 		},
 		"",
 		{ input: (ev) => {
@@ -77368,6 +77379,29 @@ function build_control_bar() {
 			rerender_all();
 		} }
 	];
+	let search_clear = [
+		"button",
+		{
+			class: "YDEV_CHIP YDEV_SEARCH_CLEAR",
+			type: "button",
+			title: t("clear the filter"),
+			"data-i18n-title": "clear the filter",
+			"aria-label": t("clear the filter"),
+			"data-i18n-aria-label": "clear the filter"
+		},
+		"✕",
+		{ click: (ev) => {
+			ev.stopPropagation();
+			let $bar = ev.currentTarget.closest(".YDEV_BAR");
+			let $input = $bar ? $bar.querySelector(".YDEV_SEARCH") : null;
+			if ($input) {
+				$input.value = "";
+				$input.focus();
+			}
+			SEARCH_TEXT = "";
+			rerender_all();
+		} }
+	];
 	let copy = [
 		"button",
 		{
@@ -77435,7 +77469,7 @@ function build_control_bar() {
 			sep(),
 			grp("show", dir_chips),
 			sep(),
-			grp("find", [search]),
+			grp("find", [search, search_clear]),
 			sep(),
 			grp("log", [copy, clear])
 		]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.173",
+  "version": "7.23.175",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",
@@ -30,13 +30,13 @@
   "devDependencies": {
     "@rollup/plugin-terser": "^1.0.0",
     "@vitest/coverage-v8": "^4.1.10",
-    "@yuneta/gobj-js": "^7.22.0",
+    "@yuneta/gobj-js": "^7.22.2",
     "vite": "^8.2.1",
     "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "@antv/g6": "^5.1.0",
-    "@yuneta/gobj-js": "^7.22.0",
+    "@yuneta/gobj-js": "^7.22.2",
     "bulma": "^1.0.4",
     "i18next": "^26.3.6",
     "maplibre-gl": "^6.4.1",

package/src/yui_dev.js

@@ -82,7 +82,8 @@ const TRAFFIC_TS_FIELDS = {
  *      clear captured traffic, compact, console, copied, copy,
  *      copy visible traffic to clipboard, creation, data, detailed,
  *      dev window and browser console, dev window only, developer,
- *      errors, expand, expanded, filter events / payload, find, i18n,
+ *      clear the filter, errors, expand, expanded, filter events / payload,
+ *      find, i18n,
  *      i18next debug output, incoming, log, machine trace shape,
  *      metadata, name only, outgoing, output, periodic, schema, show,
  *      show this section in the expanded view, simple mach,
@@ -319,12 +320,19 @@ function build_filter_ctx()
         inc:            dev_num("dev_filter_in", 1),
         err:            dev_num("dev_filter_err", 1),
         search:         SEARCH_TEXT,
+        view:           dev_view(),
     };
 }
 
 function entry_hidden(e, ctx)
 {
     if(e.kind === "log") {
+        /*  A `json` line is a PAYLOAD (the kw the trace dumps with ev_kw or a
+         *  publication): the Compact and Name only views promise one line
+         *  per message, so they leave it out. Its level says what it is.  */
+        if(e.level === "json" && (ctx.view === "name" || ctx.view === "compact")) {
+            return true;
+        }
         /*  Mirrored console logs respect the search box only — not the
          *  in/out/err traffic filters, which are about DIRECTION and a
          *  log has none. What is traced at all is the runtime's trace
@@ -930,6 +938,21 @@ function append_and_follow(logger, node)
     }
 }
 
+/************************************************************
+ *  Keep one entry in the bounded buffer, dropping the oldest
+ *  (and its row, if painted).
+ ************************************************************/
+function push_entry(entry)
+{
+    TRAFFIC_LOG.push(entry);
+    if(TRAFFIC_LOG.length > TRAFFIC_MAX) {
+        let old = TRAFFIC_LOG.shift();
+        if(old.$node && old.$node.parentNode) {
+            old.$node.parentNode.removeChild(old.$node);
+        }
+    }
+}
+
 /************************************************************
  *  Append one inter-event message. Kept in a bounded buffer so
  *  view/filter switches repaint from memory. Shared by the legacy
@@ -958,16 +981,6 @@ function info_traffic(title, msg, direction, size)
         console_traffic(title, jn, direction, size);
     }
 
-    /*  Window side: skip when routed to the console only, or when the window
-     *  is not mounted (closed). No fallback console dump — console_traffic
-     *  above already covered every route that wants console output. */
-    let logger = document.getElementById('developer-traffic-logger');
-    if(!logger || route === "console") {
-        return;
-    }
-
-    ensure_dev_style();
-
     let event = (jn && jn.event) ? String(jn.event) : "(no event)";
     let kw = (jn && jn.kw && typeof jn.kw === "object") ? jn.kw : null;
     let command = (kw && typeof kw.command === "string") ? kw.command : "";
@@ -985,14 +998,16 @@ function info_traffic(title, msg, direction, size)
         kw: kw, jn: jn, hay: hay, $node: null,
     };
 
-    TRAFFIC_LOG.push(entry);
+    push_entry(entry);
 
-    if(TRAFFIC_LOG.length > TRAFFIC_MAX) {
-        let old = TRAFFIC_LOG.shift();
-        if(old.$node && old.$node.parentNode) {
-            old.$node.parentNode.removeChild(old.$node);
-        }
+    /*  Window side: the entry is buffered above whatever happens, so the
+     *  window shows what arrived before it was opened. Painted only when the
+     *  window is mounted and not routed to the console only. */
+    let logger = document.getElementById('developer-traffic-logger');
+    if(!logger || route === "console") {
+        return;
     }
+    ensure_dev_style();
 
     if(!entry_hidden(entry, build_filter_ctx())) {
         let node = render_entry(entry);
@@ -1033,20 +1048,8 @@ function info_log(level, msg, hora)
     } else if(level === "warning") {
         LOG_WARN_COUNT++;
     }
-    /*  Routed to the console only: the line already reached the browser
-     *  console (gobj-js gate left on), so don't mirror it into the window —
-     *  but keep the status-line tally live if the window is open. */
-    if(dev_route() === "console") {
-        update_stats();
-        return;
-    }
-    let logger = document.getElementById('developer-traffic-logger');
-    if(!logger) {
-        return;
-    }
     __in_info_log__ = true;
     try {
-        ensure_dev_style();
         let lvl = level || "debug";
         let text;
         if(lvl === "json") {
@@ -1061,18 +1064,25 @@ function info_log(level, msg, hora)
         } else {
             text = is_string(msg) ? msg : String(msg);
         }
+        /*  The time the line was WRITTEN, which the backlog replayed to a
+         *  late sink makes different from now: `hora` is gobj-js's local
+         *  timestamp (YYYY-MM-DDTHH:MM:SS.mmm±hhmm).  */
+        let ts = (is_string(hora) && hora.length >= 23) ? hora.slice(11, 23) : traffic_now();
         let entry = {
             kind: "log", level: lvl, text: text,
-            dir: 0, size: 0, ts: traffic_now(),
+            dir: 0, size: 0, ts: ts,
             hay: (lvl + " " + text).toLowerCase(), $node: null,
         };
-        TRAFFIC_LOG.push(entry);
-        if(TRAFFIC_LOG.length > TRAFFIC_MAX) {
-            let old = TRAFFIC_LOG.shift();
-            if(old.$node && old.$node.parentNode) {
-                old.$node.parentNode.removeChild(old.$node);
-            }
+        /*  Buffered always: the window shows what the app logged before it
+         *  was opened. Painted only when mounted and not routed to the
+         *  console only (the line already reached the console).  */
+        push_entry(entry);
+        let logger = document.getElementById('developer-traffic-logger');
+        if(!logger || dev_route() === "console") {
+            update_stats();
+            return;
         }
+        ensure_dev_style();
         if(!entry_hidden(entry, build_filter_ctx())) {
             let node = render_entry(entry);
             entry.$node = node;
@@ -1428,6 +1438,8 @@ function build_control_bar()
         class: 'YDEV_SEARCH', type: 'search', 'data-role': 'search',
         placeholder: t('filter events / payload'),
         'data-i18n-placeholder': 'filter events / payload',
+        title: t('filter events / payload'), 'data-i18n-title': 'filter events / payload',
+        'aria-label': t('filter events / payload'), 'data-i18n-aria-label': 'filter events / payload',
     }, '', {
         input: (ev) => {
             SEARCH_TEXT = String(ev.target.value || '').toLowerCase().trim();
@@ -1435,6 +1447,26 @@ function build_control_bar()
         }
     }];
 
+    /*  Its own button: a `type=search` input shows a clear cross in some
+     *  browsers only (not in Firefox).  */
+    let search_clear = ['button', {
+        class: 'YDEV_CHIP YDEV_SEARCH_CLEAR', type: 'button',
+        title: t('clear the filter'), 'data-i18n-title': 'clear the filter',
+        'aria-label': t('clear the filter'), 'data-i18n-aria-label': 'clear the filter',
+    }, '✕', {
+        click: (ev) => {
+            ev.stopPropagation();
+            let $bar = ev.currentTarget.closest('.YDEV_BAR');
+            let $input = $bar ? $bar.querySelector('.YDEV_SEARCH') : null;
+            if($input) {
+                $input.value = '';
+                $input.focus();
+            }
+            SEARCH_TEXT = '';
+            rerender_all();
+        }
+    }];
+
     let copy = ['button', {class: 'YDEV_CHIP', type: 'button',
         title: t('copy visible traffic to clipboard'),
         'data-i18n-title': 'copy visible traffic to clipboard',
@@ -1469,7 +1501,7 @@ function build_control_bar()
         grp('output', [output_seg]), sep(),
         grp('view', [view_seg]), expand_grp, sep(),
         grp('show', dir_chips), sep(),
-        grp('find', [search]), sep(),
+        grp('find', [search, search_clear]), sep(),
         grp('log', [copy, clear]),
     ]]);
 }