@yuneta/gobj-ui 7.23.112 → 7.23.114

package/dist/gobj-ui.cjs.js

@@ -68243,6 +68243,14 @@ function open_dialog(gobj, $content, title, logical, title_prefix) {
 *  a language change does not have to know the form exists.
 ***************************************************************/
 function field(logical, name, label, $control, help) {
+	if ((0, _yuneta_gobj_js.is_array)($control) && (0, _yuneta_gobj_js.is_object)($control[1]) && [
+		"input",
+		"select",
+		"textarea"
+	].includes($control[0]) && !$control[1]["aria-label"]) {
+		$control[1]["aria-label"] = (0, i18next.t)(label);
+		$control[1]["data-i18n-aria-label"] = label;
+	}
 	return [
 		"div",
 		{ class: `${logical} field mb-3` },
@@ -72101,37 +72109,37 @@ var TRAFFIC_TS_FIELDS = {
 var TRACE_DEFS = [
 	[
 		"trace_automata",
-		"Automata",
+		"automata",
 		trace_automata
 	],
 	[
 		"trace_creation",
-		"Creation",
+		"creation",
 		trace_creation
 	],
 	[
 		"trace_start_stop",
-		"Start/Stop",
+		"start / stop",
 		trace_start_stop
 	],
 	[
 		"trace_subscriptions",
-		"Subscriptions",
+		"subscriptions",
 		trace_subscriptions
 	],
 	[
 		"trace_i18n",
-		"I18n",
+		"i18n",
 		trace_i18n
 	],
 	[
 		"trace_traffic",
-		"Traffic",
+		"traffic",
 		trace_traffic
 	],
 	[
 		"no_poll",
-		"No Poll",
+		"no poll",
 		set_no_poll
 	]
 ];
@@ -72605,7 +72613,8 @@ function mute_button(sig) {
 		{
 			class: "TRAFFIC_MUTE",
 			type: "button",
-			title: "Mute " + sig
+			title: (0, i18next.t)("mute this message"),
+			"data-i18n-title": "mute this message"
 		},
 		"⊘",
 		{ click: (ev) => {
@@ -73105,7 +73114,7 @@ function set_no_poll() {
 function refresh_dev_chrome() {
 	document.querySelectorAll(".YDEV_CHIP[data-trace]").forEach(($b) => {
 		let key = $b.getAttribute("data-trace");
-		let label = $b.getAttribute("data-label") || "";
+		let label = (0, i18next.t)($b.getAttribute("data-label") || "");
 		let v = dev_num(key, 0);
 		$b.textContent = key === "trace_automata" && v > 0 ? label + " " + v : label;
 		$b.classList.toggle("is-active", v > 0);
@@ -73139,7 +73148,8 @@ function refresh_dev_chrome() {
 		if (set.size) {
 			let $lbl = document.createElement("span");
 			$lbl.className = "YDEV_LABEL";
-			$lbl.textContent = "Muted";
+			$lbl.textContent = (0, i18next.t)("muted");
+			$lbl.setAttribute("data-i18n", "muted");
 			$m.appendChild($lbl);
 			set.forEach((sig) => {
 				$m.appendChild((0, _yuneta_gobj_js.createElement2)([
@@ -73147,7 +73157,8 @@ function refresh_dev_chrome() {
 					{
 						class: "YDEV_MUTED_CHIP",
 						type: "button",
-						title: "Unmute"
+						title: (0, i18next.t)("unmute"),
+						"data-i18n-title": "unmute"
 					},
 					"⊘ " + sig + "  ✕",
 					{ click: (ev) => {
@@ -73202,15 +73213,16 @@ function dev_fallback_copy(text) {
 	document.body.removeChild(ta);
 }
 function build_control_bar() {
-	let trace_chips = TRACE_DEFS.map(([key, label, fn]) => [
+	let trace_chips = TRACE_DEFS.map(([key, label_key, fn]) => [
 		"button",
 		{
 			class: "YDEV_CHIP",
 			"data-trace": key,
-			"data-label": label,
+			"data-label": label_key,
+			"data-i18n": label_key,
 			type: "button"
 		},
-		label,
+		(0, i18next.t)(label_key),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			fn();
@@ -73222,9 +73234,11 @@ function build_control_bar() {
 			class: "YDEV_CHIP",
 			"data-toggle": "automata-simple",
 			type: "button",
-			title: "Machine trace shape. On (default): one line per transition, event first, like the C kernel. Off: the legacy three-line shape (the call, the state change and the return)"
+			title: (0, i18next.t)("machine trace shape"),
+			"data-i18n-title": "machine trace shape",
+			"data-i18n": "simple mach"
 		},
-		"Simple mach",
+		(0, i18next.t)("simple mach"),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			let v = dev_simple_mach() ? 0 : 1;
@@ -73238,9 +73252,10 @@ function build_control_bar() {
 		{
 			class: "YDEV_SEG_BTN",
 			"data-view": v,
+			"data-i18n": label,
 			type: "button"
 		},
-		label,
+		(0, i18next.t)(label),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			set_view(v);
@@ -73253,16 +73268,16 @@ function build_control_bar() {
 			id: "ydev-seg"
 		},
 		[
-			mk_view("detailed", "Detailed"),
-			mk_view("full", "Expanded"),
-			mk_view("compact", "Compact"),
-			mk_view("name", "Name only")
+			mk_view("detailed", "detailed"),
+			mk_view("full", "expanded"),
+			mk_view("compact", "compact"),
+			mk_view("name", "name only")
 		]
 	];
 	let OUT_TITLES = {
-		window: "Dev window only (browser console stays clean)",
-		console: "Browser console only (nothing shown in this window)",
-		both: "Dev window and browser console"
+		window: "dev window only",
+		console: "browser console only",
+		both: "dev window and browser console"
 	};
 	let mk_out = (v, label) => [
 		"button",
@@ -73270,9 +73285,11 @@ function build_control_bar() {
 			class: "YDEV_SEG_BTN",
 			"data-output": v,
 			type: "button",
-			title: OUT_TITLES[v]
+			title: (0, i18next.t)(OUT_TITLES[v]),
+			"data-i18n-title": OUT_TITLES[v],
+			"data-i18n": label
 		},
-		label,
+		(0, i18next.t)(label),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			set_output_route(v);
@@ -73285,9 +73302,9 @@ function build_control_bar() {
 			id: "ydev-output"
 		},
 		[
-			mk_out("window", "Window"),
-			mk_out("console", "Console"),
-			mk_out("both", "Both")
+			mk_out("window", "window"),
+			mk_out("console", "console"),
+			mk_out("both", "both")
 		]
 	];
 	let mk_expand = (key, label) => [
@@ -73296,9 +73313,11 @@ function build_control_bar() {
 			class: "YDEV_CHIP",
 			"data-expand": key,
 			type: "button",
-			title: "Show " + label + " in the Expanded view"
+			title: (0, i18next.t)("show this section in the expanded view"),
+			"data-i18n-title": "show this section in the expanded view",
+			"data-i18n": label
 		},
-		label,
+		(0, i18next.t)(label),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			toggle_pref(key, key === "dev_full_data" ? 1 : 0);
@@ -73313,12 +73332,15 @@ function build_control_bar() {
 		[
 			[
 				"span",
-				{ class: "YDEV_LABEL" },
-				"Expand"
+				{
+					class: "YDEV_LABEL",
+					"data-i18n": "expand"
+				},
+				(0, i18next.t)("expand")
 			],
-			mk_expand("dev_full_schema", "Schema"),
-			mk_expand("dev_full_data", "Data"),
-			mk_expand("dev_full_meta", "Metadata")
+			mk_expand("dev_full_schema", "schema"),
+			mk_expand("dev_full_data", "data"),
+			mk_expand("dev_full_meta", "metadata")
 		]
 	];
 	let mk_dir = (dir, glyph, key, title) => [
@@ -73327,7 +73349,8 @@ function build_control_bar() {
 			class: "YDEV_CHIP s-" + dir,
 			"data-dir": key,
 			type: "button",
-			title
+			title: (0, i18next.t)(title),
+			"data-i18n-title": title
 		},
 		glyph,
 		{ click: (ev) => {
@@ -73336,9 +73359,9 @@ function build_control_bar() {
 		} }
 	];
 	let dir_chips = [
-		mk_dir("out", "⇢", "dev_filter_out", "Outgoing"),
-		mk_dir("in", "⇠", "dev_filter_in", "Incoming"),
-		mk_dir("err", "⚠", "dev_filter_err", "Errors")
+		mk_dir("out", "⇢", "dev_filter_out", "outgoing"),
+		mk_dir("in", "⇠", "dev_filter_in", "incoming"),
+		mk_dir("err", "⚠", "dev_filter_err", "errors")
 	];
 	let periodic_chip = [
 		"button",
@@ -73346,9 +73369,18 @@ function build_control_bar() {
 			class: "YDEV_CHIP",
 			"data-toggle": "periodic",
 			type: "button",
-			title: "Hide the timers: EV_TIMEOUT / PERIODIC / HEARTBEAT / PING transitions, and recurring traffic. On by default"
+			title: (0, i18next.t)("hide the timers and the recurring traffic"),
+			"data-i18n-title": "hide the timers and the recurring traffic"
 		},
-		"⊘ Periodic",
+		[[
+			"span",
+			{ class: "YDEV_GLYPH" },
+			"⊘"
+		], [
+			"span",
+			{ "data-i18n": "periodic" },
+			(0, i18next.t)("periodic")
+		]],
 		{ click: (ev) => {
 			ev.stopPropagation();
 			toggle_pref("dev_hide_periodic", HIDE_PERIODIC_DEFAULT);
@@ -73359,8 +73391,9 @@ function build_control_bar() {
 		{
 			class: "YDEV_SEARCH",
 			type: "search",
-			placeholder: "filter events / payload…",
-			"data-role": "search"
+			"data-role": "search",
+			placeholder: (0, i18next.t)("filter events / payload"),
+			"data-i18n-placeholder": "filter events / payload"
 		},
 		"",
 		{ input: (ev) => {
@@ -73373,15 +73406,17 @@ function build_control_bar() {
 		{
 			class: "YDEV_CHIP",
 			type: "button",
-			title: "Copy visible traffic to clipboard"
+			title: (0, i18next.t)("copy visible traffic to clipboard"),
+			"data-i18n-title": "copy visible traffic to clipboard",
+			"data-i18n": "copy"
 		},
-		"Copy",
+		(0, i18next.t)("copy"),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			let btn = ev.currentTarget;
 			dev_copy_text(traffic_to_text()).then(() => {
 				let prev = btn.textContent;
-				btn.textContent = "Copied";
+				btn.textContent = (0, i18next.t)("copied");
 				setTimeout(() => {
 					btn.textContent = prev;
 				}, 1e3);
@@ -73393,9 +73428,11 @@ function build_control_bar() {
 		{
 			class: "YDEV_CHIP",
 			type: "button",
-			title: "Clear captured traffic"
+			title: (0, i18next.t)("clear captured traffic"),
+			"data-i18n-title": "clear captured traffic",
+			"data-i18n": "clear"
 		},
-		"Clear",
+		(0, i18next.t)("clear"),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			clear_traffic();
@@ -73406,8 +73443,11 @@ function build_control_bar() {
 		{ class: "YDEV_GROUP" },
 		[[
 			"span",
-			{ class: "YDEV_LABEL" },
-			label
+			{
+				class: "YDEV_LABEL",
+				"data-i18n": label
+			},
+			(0, i18next.t)(label)
 		], ...items]
 	];
 	let sep = () => [
@@ -73419,18 +73459,18 @@ function build_control_bar() {
 		"div",
 		{ class: "YDEV_BAR" },
 		[
-			grp("Traces", [...trace_chips, simple_mach]),
+			grp("traces", [...trace_chips, simple_mach]),
 			sep(),
-			grp("Output", [output_seg]),
+			grp("output", [output_seg]),
 			sep(),
-			grp("View", [view_seg]),
+			grp("view", [view_seg]),
 			expand_grp,
 			sep(),
-			grp("Show", [...dir_chips, periodic_chip]),
+			grp("show", [...dir_chips, periodic_chip]),
 			sep(),
-			grp("Find", [search]),
+			grp("find", [search]),
 			sep(),
-			grp("Log", [copy, clear])
+			grp("log", [copy, clear])
 		]
 	]);
 }
@@ -73440,12 +73480,18 @@ function build_title_header() {
 		{ class: "YDEV_TITLE" },
 		[[
 			"span",
-			{ class: "YDEV_TITLE_MAIN" },
-			"Developer"
+			{
+				class: "YDEV_TITLE_MAIN",
+				"data-i18n": "developer"
+			},
+			(0, i18next.t)("developer")
 		], [
 			"span",
-			{ class: "YDEV_TITLE_SUB" },
-			"yuno monitor · traffic & traces"
+			{
+				class: "YDEV_TITLE_SUB",
+				"data-i18n": "yuno monitor"
+			},
+			(0, i18next.t)("yuno monitor")
 		]]
 	]);
 }
@@ -73543,7 +73589,7 @@ function setup_dev(self, show) {
 			showFooter: false,
 			auto_save_size_and_position: true,
 			center: false,
-			title: "Developer",
+			title: "developer",
 			icon: "yi-terminal",
 			manager: (0, _yuneta_gobj_js.gobj_find_service)("__window_manager__", false) || null,
 			keep_on_navigate: true,

package/dist/gobj-ui.es.js

@@ -68238,6 +68238,14 @@ function open_dialog(gobj, $content, title, logical, title_prefix) {
 *  a language change does not have to know the form exists.
 ***************************************************************/
 function field(logical, name, label, $control, help) {
+	if (is_array($control) && is_object($control[1]) && [
+		"input",
+		"select",
+		"textarea"
+	].includes($control[0]) && !$control[1]["aria-label"]) {
+		$control[1]["aria-label"] = t(label);
+		$control[1]["data-i18n-aria-label"] = label;
+	}
 	return [
 		"div",
 		{ class: `${logical} field mb-3` },
@@ -72096,37 +72104,37 @@ var TRAFFIC_TS_FIELDS = {
 var TRACE_DEFS = [
 	[
 		"trace_automata",
-		"Automata",
+		"automata",
 		trace_automata
 	],
 	[
 		"trace_creation",
-		"Creation",
+		"creation",
 		trace_creation
 	],
 	[
 		"trace_start_stop",
-		"Start/Stop",
+		"start / stop",
 		trace_start_stop
 	],
 	[
 		"trace_subscriptions",
-		"Subscriptions",
+		"subscriptions",
 		trace_subscriptions
 	],
 	[
 		"trace_i18n",
-		"I18n",
+		"i18n",
 		trace_i18n
 	],
 	[
 		"trace_traffic",
-		"Traffic",
+		"traffic",
 		trace_traffic
 	],
 	[
 		"no_poll",
-		"No Poll",
+		"no poll",
 		set_no_poll
 	]
 ];
@@ -72600,7 +72608,8 @@ function mute_button(sig) {
 		{
 			class: "TRAFFIC_MUTE",
 			type: "button",
-			title: "Mute " + sig
+			title: t("mute this message"),
+			"data-i18n-title": "mute this message"
 		},
 		"⊘",
 		{ click: (ev) => {
@@ -73100,7 +73109,7 @@ function set_no_poll() {
 function refresh_dev_chrome() {
 	document.querySelectorAll(".YDEV_CHIP[data-trace]").forEach(($b) => {
 		let key = $b.getAttribute("data-trace");
-		let label = $b.getAttribute("data-label") || "";
+		let label = t($b.getAttribute("data-label") || "");
 		let v = dev_num(key, 0);
 		$b.textContent = key === "trace_automata" && v > 0 ? label + " " + v : label;
 		$b.classList.toggle("is-active", v > 0);
@@ -73134,7 +73143,8 @@ function refresh_dev_chrome() {
 		if (set.size) {
 			let $lbl = document.createElement("span");
 			$lbl.className = "YDEV_LABEL";
-			$lbl.textContent = "Muted";
+			$lbl.textContent = t("muted");
+			$lbl.setAttribute("data-i18n", "muted");
 			$m.appendChild($lbl);
 			set.forEach((sig) => {
 				$m.appendChild(createElement2([
@@ -73142,7 +73152,8 @@ function refresh_dev_chrome() {
 					{
 						class: "YDEV_MUTED_CHIP",
 						type: "button",
-						title: "Unmute"
+						title: t("unmute"),
+						"data-i18n-title": "unmute"
 					},
 					"⊘ " + sig + "  ✕",
 					{ click: (ev) => {
@@ -73197,15 +73208,16 @@ function dev_fallback_copy(text) {
 	document.body.removeChild(ta);
 }
 function build_control_bar() {
-	let trace_chips = TRACE_DEFS.map(([key, label, fn]) => [
+	let trace_chips = TRACE_DEFS.map(([key, label_key, fn]) => [
 		"button",
 		{
 			class: "YDEV_CHIP",
 			"data-trace": key,
-			"data-label": label,
+			"data-label": label_key,
+			"data-i18n": label_key,
 			type: "button"
 		},
-		label,
+		t(label_key),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			fn();
@@ -73217,9 +73229,11 @@ function build_control_bar() {
 			class: "YDEV_CHIP",
 			"data-toggle": "automata-simple",
 			type: "button",
-			title: "Machine trace shape. On (default): one line per transition, event first, like the C kernel. Off: the legacy three-line shape (the call, the state change and the return)"
+			title: t("machine trace shape"),
+			"data-i18n-title": "machine trace shape",
+			"data-i18n": "simple mach"
 		},
-		"Simple mach",
+		t("simple mach"),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			let v = dev_simple_mach() ? 0 : 1;
@@ -73233,9 +73247,10 @@ function build_control_bar() {
 		{
 			class: "YDEV_SEG_BTN",
 			"data-view": v,
+			"data-i18n": label,
 			type: "button"
 		},
-		label,
+		t(label),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			set_view(v);
@@ -73248,16 +73263,16 @@ function build_control_bar() {
 			id: "ydev-seg"
 		},
 		[
-			mk_view("detailed", "Detailed"),
-			mk_view("full", "Expanded"),
-			mk_view("compact", "Compact"),
-			mk_view("name", "Name only")
+			mk_view("detailed", "detailed"),
+			mk_view("full", "expanded"),
+			mk_view("compact", "compact"),
+			mk_view("name", "name only")
 		]
 	];
 	let OUT_TITLES = {
-		window: "Dev window only (browser console stays clean)",
-		console: "Browser console only (nothing shown in this window)",
-		both: "Dev window and browser console"
+		window: "dev window only",
+		console: "browser console only",
+		both: "dev window and browser console"
 	};
 	let mk_out = (v, label) => [
 		"button",
@@ -73265,9 +73280,11 @@ function build_control_bar() {
 			class: "YDEV_SEG_BTN",
 			"data-output": v,
 			type: "button",
-			title: OUT_TITLES[v]
+			title: t(OUT_TITLES[v]),
+			"data-i18n-title": OUT_TITLES[v],
+			"data-i18n": label
 		},
-		label,
+		t(label),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			set_output_route(v);
@@ -73280,9 +73297,9 @@ function build_control_bar() {
 			id: "ydev-output"
 		},
 		[
-			mk_out("window", "Window"),
-			mk_out("console", "Console"),
-			mk_out("both", "Both")
+			mk_out("window", "window"),
+			mk_out("console", "console"),
+			mk_out("both", "both")
 		]
 	];
 	let mk_expand = (key, label) => [
@@ -73291,9 +73308,11 @@ function build_control_bar() {
 			class: "YDEV_CHIP",
 			"data-expand": key,
 			type: "button",
-			title: "Show " + label + " in the Expanded view"
+			title: t("show this section in the expanded view"),
+			"data-i18n-title": "show this section in the expanded view",
+			"data-i18n": label
 		},
-		label,
+		t(label),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			toggle_pref(key, key === "dev_full_data" ? 1 : 0);
@@ -73308,12 +73327,15 @@ function build_control_bar() {
 		[
 			[
 				"span",
-				{ class: "YDEV_LABEL" },
-				"Expand"
+				{
+					class: "YDEV_LABEL",
+					"data-i18n": "expand"
+				},
+				t("expand")
 			],
-			mk_expand("dev_full_schema", "Schema"),
-			mk_expand("dev_full_data", "Data"),
-			mk_expand("dev_full_meta", "Metadata")
+			mk_expand("dev_full_schema", "schema"),
+			mk_expand("dev_full_data", "data"),
+			mk_expand("dev_full_meta", "metadata")
 		]
 	];
 	let mk_dir = (dir, glyph, key, title) => [
@@ -73322,7 +73344,8 @@ function build_control_bar() {
 			class: "YDEV_CHIP s-" + dir,
 			"data-dir": key,
 			type: "button",
-			title
+			title: t(title),
+			"data-i18n-title": title
 		},
 		glyph,
 		{ click: (ev) => {
@@ -73331,9 +73354,9 @@ function build_control_bar() {
 		} }
 	];
 	let dir_chips = [
-		mk_dir("out", "⇢", "dev_filter_out", "Outgoing"),
-		mk_dir("in", "⇠", "dev_filter_in", "Incoming"),
-		mk_dir("err", "⚠", "dev_filter_err", "Errors")
+		mk_dir("out", "⇢", "dev_filter_out", "outgoing"),
+		mk_dir("in", "⇠", "dev_filter_in", "incoming"),
+		mk_dir("err", "⚠", "dev_filter_err", "errors")
 	];
 	let periodic_chip = [
 		"button",
@@ -73341,9 +73364,18 @@ function build_control_bar() {
 			class: "YDEV_CHIP",
 			"data-toggle": "periodic",
 			type: "button",
-			title: "Hide the timers: EV_TIMEOUT / PERIODIC / HEARTBEAT / PING transitions, and recurring traffic. On by default"
+			title: t("hide the timers and the recurring traffic"),
+			"data-i18n-title": "hide the timers and the recurring traffic"
 		},
-		"⊘ Periodic",
+		[[
+			"span",
+			{ class: "YDEV_GLYPH" },
+			"⊘"
+		], [
+			"span",
+			{ "data-i18n": "periodic" },
+			t("periodic")
+		]],
 		{ click: (ev) => {
 			ev.stopPropagation();
 			toggle_pref("dev_hide_periodic", HIDE_PERIODIC_DEFAULT);
@@ -73354,8 +73386,9 @@ function build_control_bar() {
 		{
 			class: "YDEV_SEARCH",
 			type: "search",
-			placeholder: "filter events / payload…",
-			"data-role": "search"
+			"data-role": "search",
+			placeholder: t("filter events / payload"),
+			"data-i18n-placeholder": "filter events / payload"
 		},
 		"",
 		{ input: (ev) => {
@@ -73368,15 +73401,17 @@ function build_control_bar() {
 		{
 			class: "YDEV_CHIP",
 			type: "button",
-			title: "Copy visible traffic to clipboard"
+			title: t("copy visible traffic to clipboard"),
+			"data-i18n-title": "copy visible traffic to clipboard",
+			"data-i18n": "copy"
 		},
-		"Copy",
+		t("copy"),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			let btn = ev.currentTarget;
 			dev_copy_text(traffic_to_text()).then(() => {
 				let prev = btn.textContent;
-				btn.textContent = "Copied";
+				btn.textContent = t("copied");
 				setTimeout(() => {
 					btn.textContent = prev;
 				}, 1e3);
@@ -73388,9 +73423,11 @@ function build_control_bar() {
 		{
 			class: "YDEV_CHIP",
 			type: "button",
-			title: "Clear captured traffic"
+			title: t("clear captured traffic"),
+			"data-i18n-title": "clear captured traffic",
+			"data-i18n": "clear"
 		},
-		"Clear",
+		t("clear"),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			clear_traffic();
@@ -73401,8 +73438,11 @@ function build_control_bar() {
 		{ class: "YDEV_GROUP" },
 		[[
 			"span",
-			{ class: "YDEV_LABEL" },
-			label
+			{
+				class: "YDEV_LABEL",
+				"data-i18n": label
+			},
+			t(label)
 		], ...items]
 	];
 	let sep = () => [
@@ -73414,18 +73454,18 @@ function build_control_bar() {
 		"div",
 		{ class: "YDEV_BAR" },
 		[
-			grp("Traces", [...trace_chips, simple_mach]),
+			grp("traces", [...trace_chips, simple_mach]),
 			sep(),
-			grp("Output", [output_seg]),
+			grp("output", [output_seg]),
 			sep(),
-			grp("View", [view_seg]),
+			grp("view", [view_seg]),
 			expand_grp,
 			sep(),
-			grp("Show", [...dir_chips, periodic_chip]),
+			grp("show", [...dir_chips, periodic_chip]),
 			sep(),
-			grp("Find", [search]),
+			grp("find", [search]),
 			sep(),
-			grp("Log", [copy, clear])
+			grp("log", [copy, clear])
 		]
 	]);
 }
@@ -73435,12 +73475,18 @@ function build_title_header() {
 		{ class: "YDEV_TITLE" },
 		[[
 			"span",
-			{ class: "YDEV_TITLE_MAIN" },
-			"Developer"
+			{
+				class: "YDEV_TITLE_MAIN",
+				"data-i18n": "developer"
+			},
+			t("developer")
 		], [
 			"span",
-			{ class: "YDEV_TITLE_SUB" },
-			"yuno monitor · traffic & traces"
+			{
+				class: "YDEV_TITLE_SUB",
+				"data-i18n": "yuno monitor"
+			},
+			t("yuno monitor")
 		]]
 	]);
 }
@@ -73538,7 +73584,7 @@ function setup_dev(self, show) {
 			showFooter: false,
 			auto_save_size_and_position: true,
 			center: false,
-			title: "Developer",
+			title: "developer",
 			icon: "yi-terminal",
 			manager: gobj_find_service("__window_manager__", false) || null,
 			keep_on_navigate: true,

package/package.json

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

package/src/c_yui_schema_editor.js

@@ -107,6 +107,7 @@ import {
     kw_get_str,
     kw_get_dict,
     is_object,
+    is_array,
     empty_string,
 } from "@yuneta/gobj-js";
 import {yui_tint} from "./bulma_tint.js";
@@ -1557,6 +1558,17 @@ function open_dialog(gobj, $content, title, logical, title_prefix)
  ***************************************************************/
 function field(logical, name, label, $control, help)
 {
+    /*  The label is a SIBLING of the control -- Bulma's `field` shape --
+     *  so it names it for the eye and for nothing else: no `for`, no
+     *  wrapping, and a reader announces the box as unlabelled. The name
+     *  is put on the control itself, from the label's own key, so the
+     *  two cannot drift and a language change reaches both.  */
+    if(is_array($control) && is_object($control[1]) &&
+            ["input", "select", "textarea"].includes($control[0]) &&
+            !$control[1]["aria-label"]) {
+        $control[1]["aria-label"] = t(label);
+        $control[1]["data-i18n-aria-label"] = label;
+    }
     return ["div", {class: `${logical} field mb-3`}, [
         ["label", {class: "label", i18n: label}, t(label)],
         ["div", {class: "control"}, [$control]],

package/src/yui_dev.js

@@ -31,7 +31,7 @@ import * as gobj_js from "@yuneta/gobj-js";
 
 import {log_signature, log_is_periodic} from "./dev_machine_trace.js";
 
-import i18next from 'i18next';
+import i18next, {t} from 'i18next';
 
 /***********************************************************************
  *          Traffic model (bounded ring buffer)
@@ -62,14 +62,18 @@ const TRAFFIC_TS_FIELDS = {
 };
 
 /*  Trace toggles: [localStorage key, display label, handler]. */
+/*  `data-label` carries the i18n KEY and not the text: the chips are
+ *  repainted from it by `refresh_dev_chrome()` on every toggle, so a
+ *  label translated once at build time would come back in English at
+ *  the first click.  */
 const TRACE_DEFS = [
-    ["trace_automata",      "Automata",      trace_automata],
-    ["trace_creation",      "Creation",      trace_creation],
-    ["trace_start_stop",    "Start/Stop",    trace_start_stop],
-    ["trace_subscriptions", "Subscriptions", trace_subscriptions],
-    ["trace_i18n",          "I18n",          trace_i18n],
-    ["trace_traffic",       "Traffic",       trace_traffic],
-    ["no_poll",             "No Poll",       set_no_poll],
+    ["trace_automata",      "automata",      trace_automata],
+    ["trace_creation",      "creation",      trace_creation],
+    ["trace_start_stop",    "start / stop",  trace_start_stop],
+    ["trace_subscriptions", "subscriptions", trace_subscriptions],
+    ["trace_i18n",          "i18n",          trace_i18n],
+    ["trace_traffic",       "traffic",       trace_traffic],
+    ["no_poll",             "no poll",       set_no_poll],
 ];
 
 
@@ -703,7 +707,10 @@ function traffic_bullets(obj)
 /*  A small mute affordance that silences this signature (persistent). */
 function mute_button(sig)
 {
-    return ['button', {class: 'TRAFFIC_MUTE', type: 'button', title: 'Mute ' + sig}, '⊘', {
+    /*  `t('mute this message')` and not `'Mute ' + sig`: a composed
+     *  title is no i18n key, and the row already says which message.  */
+    return ['button', {class: 'TRAFFIC_MUTE', type: 'button',
+        title: t('mute this message'), 'data-i18n-title': 'mute this message'}, '⊘', {
         click: (ev) => {
             ev.stopPropagation();
             ev.preventDefault();
@@ -1328,7 +1335,7 @@ function refresh_dev_chrome()
 {
     document.querySelectorAll('.YDEV_CHIP[data-trace]').forEach(($b) => {
         let key = $b.getAttribute('data-trace');
-        let label = $b.getAttribute('data-label') || '';
+        let label = t($b.getAttribute('data-label') || '');
         let v = dev_num(key, 0);
         $b.textContent = (key === "trace_automata" && v > 0) ? (label + " " + v) : label;
         $b.classList.toggle('is-active', v > 0);
@@ -1373,11 +1380,13 @@ function refresh_dev_chrome()
         if(set.size) {
             let $lbl = document.createElement('span');
             $lbl.className = 'YDEV_LABEL';
-            $lbl.textContent = 'Muted';
+            $lbl.textContent = t('muted');
+            $lbl.setAttribute('data-i18n', 'muted');
             $m.appendChild($lbl);
             set.forEach((sig) => {
                 $m.appendChild(createElement2(
-                    ['button', {class: 'YDEV_MUTED_CHIP', type: 'button', title: 'Unmute'},
+                    ['button', {class: 'YDEV_MUTED_CHIP', type: 'button',
+                        title: t('unmute'), 'data-i18n-title': 'unmute'},
                         '⊘ ' + sig + '  ✕', {
                         click: (ev) => {
                             ev.stopPropagation();
@@ -1457,9 +1466,10 @@ function dev_fallback_copy(text)
  *  periodic filters, free-text search, copy, clear. Returns an element. */
 function build_control_bar()
 {
-    let trace_chips = TRACE_DEFS.map(([key, label, fn]) => ['button', {
-        class: 'YDEV_CHIP', 'data-trace': key, 'data-label': label, type: 'button',
-    }, label, {
+    let trace_chips = TRACE_DEFS.map(([key, label_key, fn]) => ['button', {
+        class: 'YDEV_CHIP', 'data-trace': key, 'data-label': label_key,
+        'data-i18n': label_key, type: 'button',
+    }, t(label_key), {
         click: (ev) => {
             ev.stopPropagation();
             fn();
@@ -1471,10 +1481,9 @@ function build_control_bar()
      *  emitted while Automata is on. */
     let simple_mach = ['button', {
         class: 'YDEV_CHIP', 'data-toggle': 'automata-simple', type: 'button',
-        title: 'Machine trace shape. On (default): one line per transition, ' +
-            'event first, like the C kernel. Off: the legacy three-line shape ' +
-            '(the call, the state change and the return)',
-    }, 'Simple mach', {
+        title: t('machine trace shape'), 'data-i18n-title': 'machine trace shape',
+        'data-i18n': 'simple mach',
+    }, t('simple mach'), {
         click: (ev) => {
             ev.stopPropagation();
             let v = dev_simple_mach() ? 0 : 1;
@@ -1484,7 +1493,8 @@ function build_control_bar()
         }
     }];
 
-    let mk_view = (v, label) => ['button', {class: 'YDEV_SEG_BTN', 'data-view': v, type: 'button'}, label, {
+    let mk_view = (v, label) => ['button', {class: 'YDEV_SEG_BTN', 'data-view': v,
+                                            'data-i18n': label, type: 'button'}, t(label), {
         click: (ev) => {
             ev.stopPropagation();
             set_view(v);
@@ -1492,53 +1502,62 @@ function build_control_bar()
     }];
 
     let view_seg = ['div', {class: 'YDEV_SEG', id: 'ydev-seg'}, [
-        mk_view('detailed', 'Detailed'),
-        mk_view('full', 'Expanded'),
-        mk_view('compact', 'Compact'),
-        mk_view('name', 'Name only'),
+        mk_view('detailed', 'detailed'),
+        mk_view('full', 'expanded'),
+        mk_view('compact', 'compact'),
+        mk_view('name', 'name only'),
     ]];
 
     /*  Output routing: send traffic + all logs + automata to the dev window,
      *  the browser console, or both. */
     let OUT_TITLES = {
-        window:  'Dev window only (browser console stays clean)',
-        console: 'Browser console only (nothing shown in this window)',
-        both:    'Dev window and browser console',
+        window:  'dev window only',
+        console: 'browser console only',
+        both:    'dev window and browser console',
     };
     let mk_out = (v, label) => ['button', {
-        class: 'YDEV_SEG_BTN', 'data-output': v, type: 'button', title: OUT_TITLES[v],
-    }, label, {
+        class: 'YDEV_SEG_BTN', 'data-output': v, type: 'button',
+        title: t(OUT_TITLES[v]), 'data-i18n-title': OUT_TITLES[v],
+        'data-i18n': label,
+    }, t(label), {
         click: (ev) => {
             ev.stopPropagation();
             set_output_route(v);
         }
     }];
     let output_seg = ['div', {class: 'YDEV_SEG', id: 'ydev-output'}, [
-        mk_out('window', 'Window'),
-        mk_out('console', 'Console'),
-        mk_out('both', 'Both'),
+        mk_out('window', 'window'),
+        mk_out('console', 'console'),
+        mk_out('both', 'both'),
     ]];
 
     /*  Expanded-view section toggles (only meaningful in the 'full' view;
      *  the group is shown/hidden by refresh_dev_chrome). */
+    /*  The title says WHAT it does and not which section: composing
+     *  `'Show ' + label + '...'` gives a string that is no i18n key, so
+     *  it could never re-translate -- and the button's own label is the
+     *  section anyway.  */
     let mk_expand = (key, label) => ['button', {
         class: 'YDEV_CHIP', 'data-expand': key, type: 'button',
-        title: 'Show ' + label + ' in the Expanded view',
-    }, label, {
+        title: t('show this section in the expanded view'),
+        'data-i18n-title': 'show this section in the expanded view',
+        'data-i18n': label,
+    }, t(label), {
         click: (ev) => {
             ev.stopPropagation();
             toggle_pref(key, (key === 'dev_full_data') ? 1 : 0);
         }
     }];
     let expand_grp = ['div', {class: 'YDEV_GROUP', id: 'ydev-expand-grp'}, [
-        ['span', {class: 'YDEV_LABEL'}, 'Expand'],
-        mk_expand('dev_full_schema', 'Schema'),
-        mk_expand('dev_full_data', 'Data'),
-        mk_expand('dev_full_meta', 'Metadata'),
+        ['span', {class: 'YDEV_LABEL', 'data-i18n': 'expand'}, t('expand')],
+        mk_expand('dev_full_schema', 'schema'),
+        mk_expand('dev_full_data', 'data'),
+        mk_expand('dev_full_meta', 'metadata'),
     ]];
 
     let mk_dir = (dir, glyph, key, title) => ['button', {
-        class: 'YDEV_CHIP s-' + dir, 'data-dir': key, type: 'button', title: title,
+        class: 'YDEV_CHIP s-' + dir, 'data-dir': key, type: 'button',
+        title: t(title), 'data-i18n-title': title,
     }, glyph, {
         click: (ev) => {
             ev.stopPropagation();
@@ -1547,16 +1566,23 @@ function build_control_bar()
     }];
 
     let dir_chips = [
-        mk_dir('out', '⇢', 'dev_filter_out', 'Outgoing'),
-        mk_dir('in', '⇠', 'dev_filter_in', 'Incoming'),
-        mk_dir('err', '⚠', 'dev_filter_err', 'Errors'),
+        mk_dir('out', '⇢', 'dev_filter_out', 'outgoing'),
+        mk_dir('in', '⇠', 'dev_filter_in', 'incoming'),
+        mk_dir('err', '⚠', 'dev_filter_err', 'errors'),
     ];
 
     let periodic_chip = ['button', {
         class: 'YDEV_CHIP', 'data-toggle': 'periodic', type: 'button',
-        title: 'Hide the timers: EV_TIMEOUT / PERIODIC / HEARTBEAT / PING ' +
-            'transitions, and recurring traffic. On by default',
-    }, '⊘ Periodic', {
+        title: t('hide the timers and the recurring traffic'),
+        'data-i18n-title': 'hide the timers and the recurring traffic',
+    }, [
+        /*  The glyph is its own element so the label beside it can carry
+         *  its key: `refresh_language()` replaces the FIRST text node of
+         *  the element that carries `data-i18n`, and that would have
+         *  eaten the glyph with the word.  */
+        ['span', {class: 'YDEV_GLYPH'}, '⊘'],
+        ['span', {'data-i18n': 'periodic'}, t('periodic')]
+    ], {
         click: (ev) => {
             ev.stopPropagation();
             toggle_pref('dev_hide_periodic', HIDE_PERIODIC_DEFAULT);
@@ -1564,7 +1590,9 @@ function build_control_bar()
     }];
 
     let search = ['input', {
-        class: 'YDEV_SEARCH', type: 'search', placeholder: 'filter events / payload…', 'data-role': 'search',
+        class: 'YDEV_SEARCH', type: 'search', 'data-role': 'search',
+        placeholder: t('filter events / payload'),
+        'data-i18n-placeholder': 'filter events / payload',
     }, '', {
         input: (ev) => {
             SEARCH_TEXT = String(ev.target.value || '').toLowerCase().trim();
@@ -1572,35 +1600,42 @@ function build_control_bar()
         }
     }];
 
-    let copy = ['button', {class: 'YDEV_CHIP', type: 'button', title: 'Copy visible traffic to clipboard'}, 'Copy', {
+    let copy = ['button', {class: 'YDEV_CHIP', type: 'button',
+        title: t('copy visible traffic to clipboard'),
+        'data-i18n-title': 'copy visible traffic to clipboard',
+        'data-i18n': 'copy'}, t('copy'), {
         click: (ev) => {
             ev.stopPropagation();
             let btn = ev.currentTarget;
             dev_copy_text(traffic_to_text()).then(() => {
                 let prev = btn.textContent;
-                btn.textContent = 'Copied';
+                btn.textContent = t('copied');
                 setTimeout(() => { btn.textContent = prev; }, 1000);
             });
         }
     }];
 
-    let clear = ['button', {class: 'YDEV_CHIP', type: 'button', title: 'Clear captured traffic'}, 'Clear', {
+    let clear = ['button', {class: 'YDEV_CHIP', type: 'button',
+        title: t('clear captured traffic'),
+        'data-i18n-title': 'clear captured traffic',
+        'data-i18n': 'clear'}, t('clear'), {
         click: (ev) => {
             ev.stopPropagation();
             clear_traffic();
         }
     }];
 
-    let grp = (label, items) => ['div', {class: 'YDEV_GROUP'}, [['span', {class: 'YDEV_LABEL'}, label], ...items]];
+    let grp = (label, items) => ['div', {class: 'YDEV_GROUP'},
+        [['span', {class: 'YDEV_LABEL', 'data-i18n': label}, t(label)], ...items]];
     let sep = () => ['span', {class: 'YDEV_SEP'}, ''];
 
     return createElement2(['div', {class: 'YDEV_BAR'}, [
-        grp('Traces', [...trace_chips, simple_mach]), sep(),
-        grp('Output', [output_seg]), sep(),
-        grp('View', [view_seg]), expand_grp, sep(),
-        grp('Show', [...dir_chips, periodic_chip]), sep(),
-        grp('Find', [search]), sep(),
-        grp('Log', [copy, clear]),
+        grp('traces', [...trace_chips, simple_mach]), sep(),
+        grp('output', [output_seg]), sep(),
+        grp('view', [view_seg]), expand_grp, sep(),
+        grp('show', [...dir_chips, periodic_chip]), sep(),
+        grp('find', [search]), sep(),
+        grp('log', [copy, clear]),
     ]]);
 }
 
@@ -1608,8 +1643,9 @@ function build_control_bar()
 function build_title_header()
 {
     return createElement2(['div', {class: 'YDEV_TITLE'}, [
-        ['span', {class: 'YDEV_TITLE_MAIN'}, 'Developer'],
-        ['span', {class: 'YDEV_TITLE_SUB'}, 'yuno monitor · traffic & traces'],
+        ['span', {class: 'YDEV_TITLE_MAIN', 'data-i18n': 'developer'}, t('developer')],
+        ['span', {class: 'YDEV_TITLE_SUB', 'data-i18n': 'yuno monitor'},
+         t('yuno monitor')],
     ]]);
 }
 
@@ -1710,7 +1746,7 @@ function setup_dev(self, show)
                 showFooter: false,
                 auto_save_size_and_position: true,
                 center: false,
-                title: "Developer",
+                title: "developer",
                 icon: "yi-terminal",
                 /*  Opt into the dock/taskbar if the app provides one. `|| null`
                  *  because gobj_find_service returns undefined when absent, and