@yuneta/gobj-ui 7.26.24 → 7.26.26

package/README.md

@@ -3589,9 +3589,55 @@ makes Tabulator re-run a title formatter on the EXISTING header cell, which
 **A missing key is invisible:** i18next answers an unknown key **with the key
 itself**, so it renders (lower-case English) and simply never changes language.
 A **duplicate** key in a locale file is silent too — an object literal keeps the
-last one. Both are caught by the apps' `scripts/validate-locales.mjs`, which
-also scans the gobj-ui modules the app mounts: **the library translates through
-the APP's i18next**, so every key it asks for must be defined by the app.
+last one. Both are caught by `validate-locales`, which this package publishes
+(since `7.26.25`) and every app runs from its `prebuild`, from its own
+directory:
+
+```json
+"scripts": {
+    "validate-locales": "node node_modules/@yuneta/gobj-ui/scripts/validate-locales.mjs",
+    "prebuild": "npm run validate-locales && npm run check-markup"
+}
+```
+
+It also scans the gobj-ui modules the app mounts -- deep, through the barrel,
+or by a dynamic `import()`: **the library translates through the APP's
+i18next**, so every key it asks for must be defined by the app. The library it
+scans is the one it ships in, the package the app builds with. The app's own
+source is read recursively. Code and catalogs shared by several apps are named
+with `--src <dir>` (repeatable) and `--locales <dir>` (yunovatios:
+`--src ../gui-common/src --locales ../gui-common/src/locales`); `--config`
+names a shell declaration other than `src/app_config.json`.
+
+What is particular to an app goes in ITS `package.json`, not in the script:
+properties whose value is a key, and properties whose value is a list of keys
+(yunovatios hands its orchestrator `app_title: "central"` and
+`welcome_features: [...]`):
+
+```json
+"validate-locales": {
+    "attr_keys":  ["app_title", "app_subtitle", "welcome_title", "welcome_lead"],
+    "array_keys": ["welcome_features"]
+}
+```
+
+Plurals are compared by language (since `7.26.26`): `songs_one` /
+`songs_few` / `songs_many` / `songs_other` are one key, and each locale must
+carry the categories of ITS language (`Intl.PluralRules`: English `one`,
+`other`; Russian `one`, `few`, `many`, `other`; Chinese `other`). The key with
+no suffix serves `other` and `many`, as i18next falls back to it; `zero`,
+`one`, `two` and `few` need their own form. A value of the shell declaration
+that is not lower-case ASCII (an endonym, `"中文"`, in a language menu) is a
+literal, not a key.
+
+Up to `7.26.24` each app carried its own copy, and the copies had drifted into
+three families: only one read the codes of the schema editor, only the other
+two the barrel imports, and two read `t('topic') + ':'` as a key built by
+concatenation and skipped it -- so the gobj tree's *"topic:"* went untranslated
+in wattyzer and yunovatios. No app keeps a copy now, but one: `test-app`, this
+library's own demo, whose catalog has English as the source (a key IS the
+English text, Title Case included) and so follows other rules, in its own
+`test-app/scripts/validate-locales.mjs`.
 
 ### Dates: never hand-roll them again
 

package/dist/gobj-ui.cjs.js

@@ -7181,11 +7181,11 @@ function yui_file_control(gobj, { name, value, readonly, accept, on_pick }) {
 		if (picked) {
 			$state.classList.add("is-picked");
 			$state.setAttribute("data-i18n", "not saved yet");
-			$state.textContent = "not saved yet";
+			$state.textContent = (0, i18next.t)("not saved yet");
 		} else if (!kept) {
 			$state.classList.add("is-empty");
 			$state.setAttribute("data-i18n", "no file");
-			$state.textContent = "no file";
+			$state.textContent = (0, i18next.t)("no file");
 		}
 		$clear.hidden = readonly || !picked && !kept;
 		$pick.hidden = !!readonly;
@@ -63836,9 +63836,14 @@ var BTN_STYLE_CANCEL = "flex:1;padding:6px;background:var(--bulma-scheme-main-bi
 function create_form_button_row(parent, buttons) {
 	let btnRow = document.createElement("div");
 	btnRow.style.cssText = "display:flex;gap:8px;";
-	for (let { text, style, onClick } of buttons) {
+	for (let { i18n, style, onClick } of buttons) {
 		let btn = document.createElement("button");
-		btn.textContent = (0, i18next.t)(text);
+		btn.textContent = (0, i18next.t)(i18n);
+		btn.setAttribute("data-i18n", i18n);
+		btn.setAttribute("title", (0, i18next.t)(i18n));
+		btn.setAttribute("data-i18n-title", i18n);
+		btn.setAttribute("aria-label", (0, i18next.t)(i18n));
+		btn.setAttribute("data-i18n-aria-label", i18n);
 		btn.style.cssText = style + touch_control_css();
 		btn.addEventListener("click", (e) => {
 			e.stopPropagation();
@@ -63872,11 +63877,11 @@ function show_confirm_popover(gobj, target_el, message, confirm_text, confirm_co
 	msg.textContent = message;
 	popover.appendChild(msg);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => hide_overlay(gobj, priv_key)
 	}, {
-		text: confirm_text,
+		i18n: confirm_text,
 		style: "flex:1;padding:6px;background:" + confirm_color + ";color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: onConfirm
 	}]);
@@ -64605,13 +64610,13 @@ function show_port_popover(gobj) {
 		}
 	]);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
 			hide_port_popover(gobj);
 		}
 	}, {
-		text: "apply",
+		i18n: "apply",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			drop_preview_undo(gobj, "_port_preview_undo");
@@ -65301,13 +65306,13 @@ function show_edge_popover(gobj) {
 		}
 	]);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
 			deselect_edge(gobj);
 		}
 	}, {
-		text: "apply",
+		i18n: "apply",
 		style: "flex:1;padding:6px;background:#52c41a;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			drop_preview_undo(gobj, "_edge_preview_undo");
@@ -65462,13 +65467,13 @@ function show_node_popover(gobj) {
 		}
 	]);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
 			hide_node_popover(gobj);
 		}
 	}, {
-		text: "apply",
+		i18n: "apply",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			drop_preview_undo(gobj, "_node_preview_undo");
@@ -66122,12 +66127,21 @@ function show_create_popover(gobj) {
 	let titleEl = document.createElement("div");
 	titleEl.style.cssText = "margin-bottom:10px;font-weight:600;font-size:14px;";
 	titleEl.textContent = (0, i18next.t)("create node");
+	titleEl.setAttribute("data-i18n", "create node");
 	popover.appendChild(titleEl);
 	let topicLabel = document.createElement("div");
 	topicLabel.style.cssText = "margin-bottom:4px;font-weight:500;";
-	topicLabel.textContent = (0, i18next.t)("topic") + ":";
+	let topicWord = document.createElement("span");
+	topicWord.textContent = (0, i18next.t)("topic");
+	topicWord.setAttribute("data-i18n", "topic");
+	topicLabel.appendChild(topicWord);
+	topicLabel.appendChild(document.createTextNode(":"));
 	popover.appendChild(topicLabel);
 	let topicSelect = document.createElement("select");
+	topicSelect.setAttribute("title", (0, i18next.t)("topic"));
+	topicSelect.setAttribute("data-i18n-title", "topic");
+	topicSelect.setAttribute("aria-label", (0, i18next.t)("topic"));
+	topicSelect.setAttribute("data-i18n-aria-label", "topic");
 	topicSelect.style.cssText = "width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px;margin-bottom:8px;" + touch_control_css();
 	for (let i = 0; i < topics.length; i++) {
 		let opt = document.createElement("option");
@@ -66161,6 +66175,11 @@ function show_create_popover(gobj) {
 	let idInput = document.createElement("input");
 	idInput.type = "text";
 	idInput.placeholder = (0, i18next.t)("node id");
+	idInput.setAttribute("data-i18n-placeholder", "node id");
+	idInput.setAttribute("title", (0, i18next.t)("node id"));
+	idInput.setAttribute("data-i18n-title", "node id");
+	idInput.setAttribute("aria-label", (0, i18next.t)("node id"));
+	idInput.setAttribute("data-i18n-aria-label", "node id");
 	idInput.style.cssText = "width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px;margin-bottom:10px;box-sizing:border-box;" + touch_control_css();
 	popover.appendChild(idInput);
 	let errorEl = document.createElement("div");
@@ -66168,16 +66187,17 @@ function show_create_popover(gobj) {
 	popover.appendChild(errorEl);
 	let createBtn;
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => hide_create_popover(gobj)
 	}, {
-		text: "create",
+		i18n: "create",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			let node_id = idInput.value.trim();
 			if (!node_id) {
-				errorEl.textContent = (0, i18next.t)("node id") + " required";
+				errorEl.textContent = (0, i18next.t)("node id required");
+				errorEl.setAttribute("data-i18n", "node id required");
 				errorEl.style.display = "block";
 				idInput.focus();
 				return;
@@ -73651,17 +73671,22 @@ function plan_import(treedb, incoming, options) {
 				col: inner_id
 			});
 			let hook = (in_col.col || {}).hook;
-			if (hook && typeof hook === "object" && !Array.isArray(hook)) for (let [child_topic, fkey_col] of Object.entries(hook)) {
-				if (topic_name_breaks_the_rule(child_topic)) conflicts.push({
-					code: "topic name breaks the name rule",
-					topic: child_topic,
-					col: ""
-				});
-				if (col_name_breaks_the_rule(fkey_col)) conflicts.push({
-					code: "column name breaks the name rule",
-					topic: child_topic,
-					col: String(fkey_col)
-				});
+			if (hook && typeof hook === "object" && !Array.isArray(hook)) {
+				let from_hook = `${name || ""}.${in_col.name}`;
+				for (let [child_topic, fkey_col] of Object.entries(hook)) {
+					if (topic_name_breaks_the_rule(child_topic)) conflicts.push({
+						code: "topic name breaks the name rule",
+						topic: child_topic,
+						col: "",
+						hook: from_hook
+					});
+					if (col_name_breaks_the_rule(fkey_col)) conflicts.push({
+						code: "column name breaks the name rule",
+						topic: child_topic,
+						col: String(fkey_col),
+						hook: from_hook
+					});
+				}
 			}
 		}
 	}
@@ -76973,15 +76998,31 @@ function render_import_plan(gobj, plan) {
 				return [
 					"p",
 					{ class: "SCHEMA_IMPORT_CONFLICT is-size-7" },
-					[[
-						"span",
-						{ i18n: conflict.code },
-						(0, i18next.t)(conflict.code)
-					], where ? [
-						"code",
-						{ class: "SCHEMA_IMPORT_CONFLICT_NAME ml-2" },
-						text_node(where)
-					] : null].filter(Boolean)
+					[
+						[
+							"span",
+							{ i18n: conflict.code },
+							(0, i18next.t)(conflict.code)
+						],
+						where ? [
+							"code",
+							{ class: "SCHEMA_IMPORT_CONFLICT_NAME ml-2" },
+							text_node(where)
+						] : null,
+						conflict.hook ? [
+							"span",
+							{
+								class: "SCHEMA_IMPORT_CONFLICT_HOOK ml-2",
+								i18n: "in the hook map of"
+							},
+							(0, i18next.t)("in the hook map of")
+						] : null,
+						conflict.hook ? [
+							"code",
+							{ class: "SCHEMA_IMPORT_CONFLICT_HOOK_NAME ml-1" },
+							text_node(conflict.hook)
+						] : null
+					].filter(Boolean)
 				];
 			})
 		]));

package/dist/gobj-ui.es.js

@@ -7176,11 +7176,11 @@ function yui_file_control(gobj, { name, value, readonly, accept, on_pick }) {
 		if (picked) {
 			$state.classList.add("is-picked");
 			$state.setAttribute("data-i18n", "not saved yet");
-			$state.textContent = "not saved yet";
+			$state.textContent = t("not saved yet");
 		} else if (!kept) {
 			$state.classList.add("is-empty");
 			$state.setAttribute("data-i18n", "no file");
-			$state.textContent = "no file";
+			$state.textContent = t("no file");
 		}
 		$clear.hidden = readonly || !picked && !kept;
 		$pick.hidden = !!readonly;
@@ -63831,9 +63831,14 @@ var BTN_STYLE_CANCEL = "flex:1;padding:6px;background:var(--bulma-scheme-main-bi
 function create_form_button_row(parent, buttons) {
 	let btnRow = document.createElement("div");
 	btnRow.style.cssText = "display:flex;gap:8px;";
-	for (let { text, style, onClick } of buttons) {
+	for (let { i18n, style, onClick } of buttons) {
 		let btn = document.createElement("button");
-		btn.textContent = t(text);
+		btn.textContent = t(i18n);
+		btn.setAttribute("data-i18n", i18n);
+		btn.setAttribute("title", t(i18n));
+		btn.setAttribute("data-i18n-title", i18n);
+		btn.setAttribute("aria-label", t(i18n));
+		btn.setAttribute("data-i18n-aria-label", i18n);
 		btn.style.cssText = style + touch_control_css();
 		btn.addEventListener("click", (e) => {
 			e.stopPropagation();
@@ -63867,11 +63872,11 @@ function show_confirm_popover(gobj, target_el, message, confirm_text, confirm_co
 	msg.textContent = message;
 	popover.appendChild(msg);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => hide_overlay(gobj, priv_key)
 	}, {
-		text: confirm_text,
+		i18n: confirm_text,
 		style: "flex:1;padding:6px;background:" + confirm_color + ";color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: onConfirm
 	}]);
@@ -64600,13 +64605,13 @@ function show_port_popover(gobj) {
 		}
 	]);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
 			hide_port_popover(gobj);
 		}
 	}, {
-		text: "apply",
+		i18n: "apply",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			drop_preview_undo(gobj, "_port_preview_undo");
@@ -65296,13 +65301,13 @@ function show_edge_popover(gobj) {
 		}
 	]);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
 			deselect_edge(gobj);
 		}
 	}, {
-		text: "apply",
+		i18n: "apply",
 		style: "flex:1;padding:6px;background:#52c41a;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			drop_preview_undo(gobj, "_edge_preview_undo");
@@ -65457,13 +65462,13 @@ function show_node_popover(gobj) {
 		}
 	]);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
 			hide_node_popover(gobj);
 		}
 	}, {
-		text: "apply",
+		i18n: "apply",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			drop_preview_undo(gobj, "_node_preview_undo");
@@ -66117,12 +66122,21 @@ function show_create_popover(gobj) {
 	let titleEl = document.createElement("div");
 	titleEl.style.cssText = "margin-bottom:10px;font-weight:600;font-size:14px;";
 	titleEl.textContent = t("create node");
+	titleEl.setAttribute("data-i18n", "create node");
 	popover.appendChild(titleEl);
 	let topicLabel = document.createElement("div");
 	topicLabel.style.cssText = "margin-bottom:4px;font-weight:500;";
-	topicLabel.textContent = t("topic") + ":";
+	let topicWord = document.createElement("span");
+	topicWord.textContent = t("topic");
+	topicWord.setAttribute("data-i18n", "topic");
+	topicLabel.appendChild(topicWord);
+	topicLabel.appendChild(document.createTextNode(":"));
 	popover.appendChild(topicLabel);
 	let topicSelect = document.createElement("select");
+	topicSelect.setAttribute("title", t("topic"));
+	topicSelect.setAttribute("data-i18n-title", "topic");
+	topicSelect.setAttribute("aria-label", t("topic"));
+	topicSelect.setAttribute("data-i18n-aria-label", "topic");
 	topicSelect.style.cssText = "width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px;margin-bottom:8px;" + touch_control_css();
 	for (let i = 0; i < topics.length; i++) {
 		let opt = document.createElement("option");
@@ -66156,6 +66170,11 @@ function show_create_popover(gobj) {
 	let idInput = document.createElement("input");
 	idInput.type = "text";
 	idInput.placeholder = t("node id");
+	idInput.setAttribute("data-i18n-placeholder", "node id");
+	idInput.setAttribute("title", t("node id"));
+	idInput.setAttribute("data-i18n-title", "node id");
+	idInput.setAttribute("aria-label", t("node id"));
+	idInput.setAttribute("data-i18n-aria-label", "node id");
 	idInput.style.cssText = "width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px;margin-bottom:10px;box-sizing:border-box;" + touch_control_css();
 	popover.appendChild(idInput);
 	let errorEl = document.createElement("div");
@@ -66163,16 +66182,17 @@ function show_create_popover(gobj) {
 	popover.appendChild(errorEl);
 	let createBtn;
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => hide_create_popover(gobj)
 	}, {
-		text: "create",
+		i18n: "create",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			let node_id = idInput.value.trim();
 			if (!node_id) {
-				errorEl.textContent = t("node id") + " required";
+				errorEl.textContent = t("node id required");
+				errorEl.setAttribute("data-i18n", "node id required");
 				errorEl.style.display = "block";
 				idInput.focus();
 				return;
@@ -73646,17 +73666,22 @@ function plan_import(treedb, incoming, options) {
 				col: inner_id
 			});
 			let hook = (in_col.col || {}).hook;
-			if (hook && typeof hook === "object" && !Array.isArray(hook)) for (let [child_topic, fkey_col] of Object.entries(hook)) {
-				if (topic_name_breaks_the_rule(child_topic)) conflicts.push({
-					code: "topic name breaks the name rule",
-					topic: child_topic,
-					col: ""
-				});
-				if (col_name_breaks_the_rule(fkey_col)) conflicts.push({
-					code: "column name breaks the name rule",
-					topic: child_topic,
-					col: String(fkey_col)
-				});
+			if (hook && typeof hook === "object" && !Array.isArray(hook)) {
+				let from_hook = `${name || ""}.${in_col.name}`;
+				for (let [child_topic, fkey_col] of Object.entries(hook)) {
+					if (topic_name_breaks_the_rule(child_topic)) conflicts.push({
+						code: "topic name breaks the name rule",
+						topic: child_topic,
+						col: "",
+						hook: from_hook
+					});
+					if (col_name_breaks_the_rule(fkey_col)) conflicts.push({
+						code: "column name breaks the name rule",
+						topic: child_topic,
+						col: String(fkey_col),
+						hook: from_hook
+					});
+				}
 			}
 		}
 	}
@@ -76968,15 +76993,31 @@ function render_import_plan(gobj, plan) {
 				return [
 					"p",
 					{ class: "SCHEMA_IMPORT_CONFLICT is-size-7" },
-					[[
-						"span",
-						{ i18n: conflict.code },
-						t(conflict.code)
-					], where ? [
-						"code",
-						{ class: "SCHEMA_IMPORT_CONFLICT_NAME ml-2" },
-						text_node(where)
-					] : null].filter(Boolean)
+					[
+						[
+							"span",
+							{ i18n: conflict.code },
+							t(conflict.code)
+						],
+						where ? [
+							"code",
+							{ class: "SCHEMA_IMPORT_CONFLICT_NAME ml-2" },
+							text_node(where)
+						] : null,
+						conflict.hook ? [
+							"span",
+							{
+								class: "SCHEMA_IMPORT_CONFLICT_HOOK ml-2",
+								i18n: "in the hook map of"
+							},
+							t("in the hook map of")
+						] : null,
+						conflict.hook ? [
+							"code",
+							{ class: "SCHEMA_IMPORT_CONFLICT_HOOK_NAME ml-1" },
+							text_node(conflict.hook)
+						] : null
+					].filter(Boolean)
 				];
 			})
 		]));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.26.24",
+  "version": "7.26.26",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",
@@ -19,7 +19,8 @@
     "index.js",
     "src/",
     "vite-plugin-yuneta-html.js",
-    "scripts/check-markup-strings.mjs"
+    "scripts/check-markup-strings.mjs",
+    "scripts/validate-locales.mjs"
   ],
   "description": "Yuneta UI Library — the active line: declarative shell (C_YUI_SHELL+NAV+PAGER+WIZARD) + windows, TreeDB views, forms, charts and maps.  Consumed from the npm registry by the Yuneta SPAs (gui_agent, gui_treedb, wattyzer, yunovatios).  The frozen legacy GClass GUI stack (C_YUI_MAIN/TABS/ROUTING) lives on the v1 branch, npm dist-tag 'legacy' (consumed by estadodelaire and hidraulia).",
   "scripts": {