@yuneta/gobj-ui 7.26.25 → 7.26.26

package/README.md

@@ -3600,19 +3600,44 @@ directory:
 }
 ```
 
-It also scans the gobj-ui modules the app mounts, deep or through the barrel:
-**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. Code and catalogs shared by several apps are
-named with `--src <dir>` (repeatable) and `--locales <dir>` (yunovatios:
+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. An app keeps no copy now.
+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;

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;

package/package.json

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

package/scripts/validate-locales.mjs

@@ -11,7 +11,18 @@
  *
  *            1. Keys are ASCII (no em-dash, accents, etc.).
  *            2. Keys are lower-case.
- *            3. All locales carry the same key set (symmetric).
+ *            3. All locales carry the same key set (symmetric). A PLURAL key
+ *               (`songs_one`, `songs_few`, ...: i18next's `_zero` `_one`
+ *               `_two` `_few` `_many` `_other`) is compared by its base, and
+ *               each locale carries the plural categories of ITS language
+ *               (Intl.PluralRules): English `one`/`other`, Spanish
+ *               `one`/`many`/`other`, Russian `one`/`few`/`many`/`other`,
+ *               Chinese `other`. The key with no suffix (`songs`) serves
+ *               `other` and `many` -- i18next falls back to it -- but
+ *               `zero`, `one`, `two` and `few` change the grammar and need
+ *               their own form when the language has them. A form the
+ *               language never uses is a violation; `_zero` is always
+ *               allowed (i18next uses it for a count of 0).
  *            4. No duplicate key in a locale file (an object literal keeps
  *               the LAST one and says nothing -- a stale entry silently
  *               overrides a new one; it happened to "last" and "loading").
@@ -20,14 +31,15 @@
  *               fine and simply never changes language -- invisible by
  *               construction, and it shipped: a Settings `label` column).
  *
- *          Rule 5 reads the app's own source, the shell declaration
- *          (`src/app_config.json`) and the gobj-ui modules the app MOUNTS,
- *          transitively: the library translates through the APP's i18next,
- *          so a key it asks for and the app does not define renders raw
- *          (that is how the treedb editor shipped reading "edit", "new",
- *          "delete" in every language). The library scanned is THIS one --
- *          the package the app installed and builds with, the one this
- *          script ships in.
+ *          Rule 5 reads the app's own source (recursively), the shell
+ *          declaration (`src/app_config.json`) and the gobj-ui modules the
+ *          app MOUNTS, transitively -- deep, through the barrel, or by a
+ *          dynamic import(): the library translates through the APP's
+ *          i18next, so a key it asks for and the app does not define
+ *          renders raw (that is how the treedb editor shipped reading
+ *          "edit", "new", "delete" in every language). The library scanned
+ *          is THIS one -- the package the app installed and builds with,
+ *          the one this script ships in.
  *
  *          Options (paths relative to the app's directory):
  *
@@ -37,29 +49,42 @@
  *              --config <file>   the shell declaration
  *                                (default src/app_config.json)
  *
+ *          And, in the app's package.json, what is particular to it:
+ *
+ *              "validate-locales": {
+ *                  "attr_keys":  ["app_title", "welcome_lead"],
+ *                  "array_keys": ["welcome_features"]
+ *              }
+ *
+ *          `attr_keys` names properties whose string value is an i18n key
+ *          (`app_title: "central"`), `array_keys` properties whose value is
+ *          an array of keys. A key the app hands over that way reaches no
+ *          t() the scan can read.
+ *
  *          A locale is a file <code>.js of the locales directory (en.js,
- *          es.js; flags.js and locales.js are not) exporting
+ *          es.js, pt-br.js; flags.js and locales.js are not) exporting
  *          `{<code>}` with a `translation` dict. It is imported directly,
  *          not through locales.js, which drags in gobj-js and i18next and
- *          expects a browser.
+ *          expects a browser. A file with a locale's name and no such
+ *          export is said and skipped.
  *
  *          Exits 1 on any violation, so the build fails loudly.
  *
  *          Up to gobj-ui 7.26.24 every app carried its own copy, and the
- *          copies drifted into three families with different rules: only
- *          one read the codes of the schema editor, only the other two the
- *          barrel imports and the keys built by concatenation (REV-CLOUD
- *          V17.3.4). This one is their union, and an app keeps no copy.
+ *          copies drifted into three families with different rules
+ *          (REV-CLOUD V17.3.4). This one is their union, and an app keeps
+ *          no copy.
  *
  *          Copyright (c) 2025-2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
-import {readdirSync, readFileSync, existsSync} from "fs";
+import {readdirSync, readFileSync, existsSync, statSync} from "fs";
 import {resolve} from "path";
 import {pathToFileURL} from "url";
 
 const ASCII_RE = /^[\x20-\x7e]+$/;
-const LOCALE_FILE_RE = /^([a-z]{2,3})\.js$/;
+const LOCALE_FILE_RE = /^([a-z]{2,3}(?:[-_][a-zA-Z]{2,4})?)\.js$/;
+const PLURAL_RE = /^(.+)_(zero|one|two|few|many|other)$/;
 
 /*  This package: the library the app builds with.  */
 const LIB       = new URL("../", import.meta.url);
@@ -89,6 +114,14 @@ function abort(msg)
     process.exit(1);
 }
 
+/***************************************************************
+ *  Said, not a violation
+ ***************************************************************/
+function note(msg)
+{
+    process.stdout.write(`validate-locales: ${msg}\n`);
+}
+
 /***************************************************************
  *  The directory a path names, as a URL ending in '/'
  ***************************************************************/
@@ -106,7 +139,9 @@ function parse_args(argv)
     let opts = {
         src: [new URL("src/", APP_DIR)],
         locales: new URL("src/locales/", APP_DIR),
-        config: new URL("src/app_config.json", APP_DIR)
+        config: new URL("src/app_config.json", APP_DIR),
+        attr_keys: [],
+        array_keys: []
     };
     for(let i = 0; i < argv.length; i++) {
         let a = argv[i];
@@ -127,6 +162,25 @@ function parse_args(argv)
             abort(`unknown argument: ${a} (--src <dir>, --locales <dir>, --config <file>)`);
         }
     }
+
+    /*  What is particular to the app, in its package.json  */
+    let pkg_url = new URL("package.json", APP_DIR);
+    if(existsSync(pkg_url)) {
+        let pkg;
+        try {
+            pkg = JSON.parse(readFileSync(pkg_url, "utf8"));
+        } catch(e) {
+            abort(`${pkg_url.pathname} is not valid json: ${e.message}`);
+        }
+        let cfg = pkg["validate-locales"] || {};
+        for(let name of ["attr_keys", "array_keys"]) {
+            let list = cfg[name] || [];
+            if(!Array.isArray(list) || !list.every((x) => /^[A-Za-z_$][\w$]*$/.test(x))) {
+                abort(`package.json "validate-locales".${name} must be a list of property names`);
+            }
+            opts[name] = list;
+        }
+    }
     return opts;
 }
 
@@ -146,21 +200,55 @@ async function load_locales(locales_dir)
     if(codes.includes("en")) {
         codes = ["en", ...codes.filter((c) => c !== "en")];
     }
-    if(codes.length === 0) {
-        abort(`no locale (<code>.js) in ${locales_dir.pathname}`);
-    }
     let locales = {};
     for(let code of codes) {
         let mod = await import(new URL(`${code}.js`, locales_dir).href);
-        let locale = mod[code] || mod.default;
+        let locale = mod[code] || mod[code.replace(/-/g, "_")] || mod.default;
         if(!locale || !locale.translation || typeof locale.translation !== "object") {
-            abort(`${code}.js does not export {${code}} with a translation dict`);
+            note(`${code}.js exports no {${code}} with a translation dict: not a locale, skipped`);
+            continue;
         }
         locales[code] = locale.translation;
     }
+    if(Object.keys(locales).length === 0) {
+        abort(`no locale (<code>.js exporting {<code>: {translation}}) in ${locales_dir.pathname}`);
+    }
     return locales;
 }
 
+/***************************************************************
+ *  The plural categories of a language (Intl.PluralRules)
+ ***************************************************************/
+function plural_categories(code)
+{
+    try {
+        return new Set(new Intl.PluralRules(code.replace(/_/g, "-")).resolvedOptions().pluralCategories);
+    } catch(e) {
+        return new Set(["one", "other"]);
+    }
+}
+
+/***************************************************************
+ *  A locale's keys split: plain ones, and {base: Set(categories)}
+ ***************************************************************/
+function split_plurals(keys)
+{
+    let plain = new Set();
+    let plurals = new Map();
+    for(let k of keys) {
+        let m = k.match(PLURAL_RE);
+        if(m) {
+            if(!plurals.has(m[1])) {
+                plurals.set(m[1], new Set());
+            }
+            plurals.get(m[1]).add(m[2]);
+        } else {
+            plain.add(k);
+        }
+    }
+    return {plain, plurals};
+}
+
 /***************************************************************
  *
  ***************************************************************/
@@ -171,10 +259,10 @@ async function main()
     let codes = Object.keys(locales);
 
     /*  Per-locale key checks (ASCII + lower-case)  */
-    let key_sets = {};
+    let split = {};
     for(let code of codes) {
         let keys = Object.keys(locales[code]);
-        key_sets[code] = new Set(keys);
+        split[code] = split_plurals(keys);
         for(let k of keys) {
             if(!ASCII_RE.test(k)) {
                 fail(`[${code}] non-ASCII key: ${JSON.stringify(k)}`);
@@ -185,23 +273,60 @@ async function main()
         }
     }
 
-    /*  Symmetry: every locale carries the same keys as the first  */
+    /*
+     *  The plural bases, of any locale: a plain key that is one of them
+     *  belongs to its plural, and is checked with it
+     */
+    let bases = new Set();
+    for(let code of codes) {
+        for(let base of split[code].plurals.keys()) {
+            bases.add(base);
+        }
+    }
+
+    /*  Symmetry of the plain keys: every locale carries those of the first  */
     let ref = codes[0];
-    let ref_keys = key_sets[ref];
+    let plain_of = (code) => new Set([...split[code].plain].filter((k) => !bases.has(k)));
+    let ref_plain = plain_of(ref);
     for(let code of codes.slice(1)) {
-        let cur = key_sets[code];
-        for(let k of ref_keys) {
+        let cur = plain_of(code);
+        for(let k of ref_plain) {
             if(!cur.has(k)) {
                 fail(`[${code}] missing key present in [${ref}]: ${JSON.stringify(k)}`);
             }
         }
         for(let k of cur) {
-            if(!ref_keys.has(k)) {
+            if(!ref_plain.has(k)) {
                 fail(`[${code}] extra key not in [${ref}]: ${JSON.stringify(k)}`);
             }
         }
     }
 
+    /*
+     *  The plural keys: every base in every locale, with the categories of
+     *  ITS language -- not the same suffixes everywhere. The key with no
+     *  suffix serves `other` and `many`.
+     */
+    const SERVED_BY_THE_BASE = new Set(["other", "many"]);
+    for(let code of codes) {
+        let wanted = plural_categories(code);
+        for(let base of bases) {
+            let have = split[code].plurals.get(base) || new Set();
+            let has_base = split[code].plain.has(base);
+            for(let c of wanted) {
+                if(!have.has(c) && !(has_base && SERVED_BY_THE_BASE.has(c))) {
+                    fail(`[${code}] plural ${JSON.stringify(base)} lacks the form "${c}" of its language` +
+                        (SERVED_BY_THE_BASE.has(c)? ` (or the key ${JSON.stringify(base)} itself)` : ""));
+                }
+            }
+            for(let c of have) {
+                if(!wanted.has(c) && c !== "zero") {
+                    fail(`[${code}] plural ${JSON.stringify(base)} has a form "${c}" its language never uses`);
+                }
+            }
+        }
+    }
+
     /*
      *  No DUPLICATE key in a locale file. A JS object literal keeps the LAST
      *  of two identical keys and says nothing, so the imported dict looks
@@ -223,7 +348,7 @@ async function main()
     /*  Every key the source asks for exists: a missing one is a violation, not a fallback  */
     let used = collect_used_keys(opts);
     for(let k of used) {
-        if(!ref_keys.has(k)) {
+        if(!ref_plain.has(k) && !bases.has(k)) {
             fail(`key used in the source but defined in NO locale: ${JSON.stringify(k)}`);
         }
     }
@@ -233,66 +358,99 @@ async function main()
         process.exit(1);
     }
 
+    let n_keys = ref_plain.size + bases.size;
     process.stdout.write(
-        `validate-locales: OK (${codes.length} locales x ${ref_keys.size} keys, ` +
-        `${used.size} used in the source)\n`);
+        `validate-locales: OK (${codes.length} locales x ${n_keys} keys` +
+        (bases.size? `, ${bases.size} plural` : "") +
+        `, ${used.size} used in the source)\n`);
 }
 
 /***************************************************************
  *  The i18n keys the source asks for
+ *
+ *  A string literal is matched by its own quote: an apostrophe inside
+ *  double quotes ("don't") is part of the key.
+ *
+ *  The (?!\s*\+) guards skip a key BUILT BY CONCATENATION
+ *  (`i18n: "kind_" + t.kind`): the literal is only a prefix, the real key
+ *  cannot be known statically, and demanding "kind_" is a false positive.
+ *  Such keys are not validated: keep them in sync by hand. The guard is
+ *  right after the literal, INSIDE the call: `t('topic') + ':'`
+ *  concatenates the result, and its key is asked for.
  ***************************************************************/
+const STR = String.raw`(?:"([^"\n]+)"|'([^'\n]+)')`;
+const STR_OR_TEMPLATE = String.raw`(?:"([^"\n]+)"|'([^'\n]+)'|` + "`" + String.raw`([^` + "`" + String.raw`$\n]+)` + "`" + ")";
+const NOT_CONCAT = String.raw`(?!\s*\+)`;
+
+function re(source)
+{
+    return new RegExp(source, "g");
+}
+
 const PATTERNS = [
-    /*
-     *  Both quote styles: the apps quote with ", the library with '.
-     *
-     *  The (?!\s*\+) guards skip a key BUILT BY CONCATENATION
-     *  (`i18n: "kind_" + t.kind`): the literal is only a prefix, the real
-     *  key cannot be known statically, and demanding "kind_" is a false
-     *  positive. Such keys are not validated: keep them in sync by hand.
-     */
-    /\bt\(\s*['"]([^'"]+)['"](?!\s*\+)/g,
+    re(String.raw`\bt\(\s*` + STR_OR_TEMPLATE + NOT_CONCAT),
     /*  A local ALIAS of `t` is a blind spot: `yui_tabulator_i18n.js` asks
      *  for its whole chrome through `tr(key, default)`.  */
-    /\btr\(\s*['"]([^'"]+)['"](?!\s*\+)/g,
+    re(String.raw`\btr\(\s*` + STR_OR_TEMPLATE + NOT_CONCAT),
     /*  The codes the schema checks hand to `t(finding.code)` /
      *  `t(conflict.code)`: an i18n key each, written where it is born.  */
-    /\badd\(\s*['"](?:error|warning)['"]\s*,\s*['"]([^'"]+)['"]/g,
-    /\bcode:\s*['"]([^'"]+)['"](?!\s*\+)/g,
+    re(String.raw`\badd\(\s*['"](?:error|warning)['"]\s*,\s*` + STR),
+    re(String.raw`\bcode:\s*` + STR + NOT_CONCAT),
     /*  What refresh_language() re-translates  */
-    /\bi18n:\s*['"]([^'"]+)['"](?!\s*\+)/g,
-    /["']data-i18n(?:-title|-aria-label|-placeholder)?["']:\s*['"]([^'"]+)['"](?!\s*\+)/g,
-    /data-i18n(?:-title|-aria-label|-placeholder)?=["']([^"']+)["']/g,
-    /*  Keys an app hands its orchestrator as ATTRIBUTES (yunovatios):
-     *  no t(), no i18n:, so a typo there rendered raw  */
-    /\b(?:app_title|app_subtitle|welcome_title|welcome_lead)\s*:\s*['"]([^'"]+)['"]/g
+    re(String.raw`\bi18n:\s*` + STR + NOT_CONCAT),
+    re(String.raw`["']data-i18n(?:-title|-aria-label|-placeholder)?["']:\s*` + STR + NOT_CONCAT),
+    re(String.raw`\bsetAttribute\(\s*["']data-i18n(?:-title|-aria-label|-placeholder)?["']\s*,\s*` + STR + NOT_CONCAT),
+    /data-i18n(?:-title|-aria-label|-placeholder)?=["']([^"']+)["']/g
 ];
 
+function literal_of(m)
+{
+    for(let i = 1; i < m.length; i++) {
+        if(m[i] !== undefined) {
+            return m[i];
+        }
+    }
+    return undefined;
+}
+
 function collect_used_keys(opts)
 {
     let keys = new Set();
 
+    let patterns = [...PATTERNS];
+    if(opts.attr_keys.length > 0) {
+        /*  The app's own: properties whose value is a key  */
+        patterns.push(re(String.raw`\b(?:` + opts.attr_keys.join("|") + String.raw`)\s*:\s*` + STR));
+    }
+    let array_re = opts.array_keys.length > 0?
+        re(String.raw`\b(?:` + opts.array_keys.join("|") + String.raw`)\s*:\s*\[([^\]]*)\]`) : null;
+
     let scan = (url) => {
         /*  Comments are not code: the library documents the contract with
          *  examples like `data-i18n="<key>"`.  */
         let code = strip_comments(readFileSync(url, "utf8"));
-        for(let re of PATTERNS) {
-            re.lastIndex = 0;
+        for(let r of patterns) {
+            r.lastIndex = 0;
             let m;
-            while((m = re.exec(code)) !== null) {
+            while((m = r.exec(code)) !== null) {
+                let k = literal_of(m);
                 /*  A key INTERPOLATED in a template (`data-i18n="${key}"`)
                  *  cannot be known statically either  */
-                if(m[1].includes("${")) {
+                if(!k || k.includes("${")) {
                     continue;
                 }
-                keys.add(m[1]);
+                keys.add(k);
             }
         }
-        /*  The bullets of a welcome panel: an array of keys  */
-        let feats = /welcome_features\s*:\s*\[([^\]]*)\]/g;
-        let f;
-        while((f = feats.exec(code)) !== null) {
-            for(let lit of f[1].match(/['"]([^'"]+)['"]/g) || []) {
-                keys.add(lit.slice(1, -1));
+        if(array_re) {
+            array_re.lastIndex = 0;
+            let f;
+            while((f = array_re.exec(code)) !== null) {
+                let lit_re = re(STR);
+                let l;
+                while((l = lit_re.exec(f[1])) !== null) {
+                    keys.add(literal_of(l));
+                }
             }
         }
         return code;
@@ -306,11 +464,8 @@ function collect_used_keys(opts)
         if(!existsSync(dir)) {
             abort(`no source directory at ${dir.pathname}`);
         }
-        let own = readdirSync(dir).filter((f) => {
-            return f.endsWith(".js") && !f.endsWith(".test.js");
-        });
-        for(let f of own) {
-            let src = scan(new URL(f, dir));
+        for(let url of source_files(dir, opts.locales)) {
+            let src = scan(url);
             pending.push(...lib_imports(src, barrel, false));
         }
     }
@@ -348,6 +503,35 @@ function collect_used_keys(opts)
     return keys;
 }
 
+/***************************************************************
+ *  The .js files of a source directory, recursively: not the tests, not
+ *  the locales (their keys are definitions, not uses), not node_modules
+ *  or a build
+ ***************************************************************/
+function source_files(dir, locales_dir)
+{
+    let out = [];
+    let walk = (d) => {
+        if(d.href === locales_dir.href) {
+            return;
+        }
+        for(let f of readdirSync(d).sort()) {
+            let url = new URL(f, d);
+            let st = statSync(url);
+            if(st.isDirectory()) {
+                if(f === "node_modules" || f === "dist" || f.startsWith(".")) {
+                    continue;
+                }
+                walk(new URL(f + "/", d));
+            } else if(f.endsWith(".js") && !f.endsWith(".test.js")) {
+                out.push(url);
+            }
+        }
+    };
+    walk(dir);
+    return out;
+}
+
 /***************************************************************
  *  The shell declaration (`app_config.json`) holds i18n keys in DATA:
  *  every `name`, `aria_label` and `tooltip` of an item, the `label` of a
@@ -356,17 +540,18 @@ function collect_used_keys(opts)
  *  ever -- which is how four toolbar buttons announced themselves as
  *  "toggle language" in Spanish.
  *
- *  A value that is not lower-case is not a KEY: it is a literal the config
- *  carries on purpose ("ES/EN" on a language button). `wordmark` and `alt`
- *  are deliberately out: a brand name is not translated. A key starting
- *  with `_` is a comment.
+ *  A value that is not a KEY -- not lower-case ASCII -- is a literal the
+ *  config carries on purpose: "ES/EN" on a language button, an endonym
+ *  ("中文", "Español") in a language menu. `wordmark` and `alt` are
+ *  deliberately out: a brand name is not translated. A key starting with
+ *  `_` is a comment.
  ***************************************************************/
 const CONFIG_I18N_FIELDS = ["name", "aria_label", "tooltip", "label", "title", "subtitle"];
 
 function keys_from_shell_config(url, keys)
 {
     if(!existsSync(url)) {
-        process.stdout.write(`validate-locales: no ${url.pathname}: no shell keys checked\n`);
+        note(`no ${url.pathname}: no shell keys checked`);
         return;
     }
     let config;
@@ -390,7 +575,7 @@ function keys_from_shell_config(url, keys)
                 continue;
             }
             if(CONFIG_I18N_FIELDS.includes(k) && typeof v === "string" && v
-                    && v === v.toLowerCase()) {
+                    && ASCII_RE.test(v) && v === v.toLowerCase()) {
                 keys.add(v);
             }
             walk(v);
@@ -425,9 +610,9 @@ function barrel_export_map()
     } catch(e) {
         abort(`cannot read the gobj-ui barrel at ${LIB_INDEX.pathname}: ${e.message}`);
     }
-    let re = /export\s*\{([^}]*)\}\s*from\s*["']\.\/src\/([\w.-]+\.js)["']/g;
+    let r = /export\s*\{([^}]*)\}\s*from\s*["']\.\/src\/([\w.-]+\.js)["']/g;
     let m;
-    while((m = re.exec(src)) !== null) {
+    while((m = r.exec(src)) !== null) {
         let mod = m[2];
         for(let sym of m[1].split(",")) {
             sym = sym.trim();
@@ -444,8 +629,8 @@ function barrel_export_map()
 
 /***************************************************************
  *  The gobj-ui source modules a file imports:
- *    - deep:   "@yuneta/gobj-ui/src/x.js"
- *    - barrel: "@yuneta/gobj-ui[/index.js]", resolved per imported symbol
+ *    - deep:    "@yuneta/gobj-ui/src/x.js", also by a dynamic import()
+ *    - barrel:  "@yuneta/gobj-ui[/index.js]", resolved per imported symbol
  *    - inside the library: "./x.js" (in the app it names an app file,
  *      scanned already)
  ***************************************************************/
@@ -454,7 +639,7 @@ function lib_imports(src, barrel, inside_lib)
     let out = [];
     let m;
 
-    let from_app = /from\s+["']@yuneta\/gobj-ui\/src\/([\w.-]+\.js)["']/g;
+    let from_app = /(?:from\s+|import\(\s*)["']@yuneta\/gobj-ui\/src\/([\w.-]+\.js)["']/g;
     while((m = from_app.exec(src)) !== null) {
         out.push(m[1]);
     }
@@ -471,7 +656,7 @@ function lib_imports(src, barrel, inside_lib)
     }
 
     if(inside_lib) {
-        let inside = /from\s+["']\.\/([\w.-]+\.js)["']/g;
+        let inside = /(?:from\s+|import\(\s*)["']\.\/([\w.-]+\.js)["']/g;
         while((m = inside.exec(src)) !== null) {
             out.push(m[1]);
         }

package/src/c_g6_nodes_tree.js

@@ -5010,9 +5010,16 @@ 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) {
+        /*  `i18n` is the key (named so that validate-locales sees a literal
+         *  one): the button carries it, and its name  */
         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();
@@ -5059,12 +5066,12 @@ function show_confirm_popover(gobj, target_el, message, confirm_text, confirm_co
 
     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,
@@ -6148,14 +6155,14 @@ function show_port_popover(gobj)
 
     create_form_button_row(popover, [
         {
-            text: 'cancel',
+            i18n: 'cancel',
             style: BTN_STYLE_CANCEL,
             onClick: () => {
                 hide_port_popover(gobj);    /*  which undoes the preview  */
             },
         },
         {
-            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: () => {
@@ -7100,14 +7107,14 @@ function show_edge_popover(gobj)
 
     create_form_button_row(popover, [
         {
-            text: 'cancel',
+            i18n: 'cancel',
             style: BTN_STYLE_CANCEL,
             onClick: () => {
                 deselect_edge(gobj);        /*  which undoes the preview  */
             },
         },
         {
-            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: () => {
@@ -7349,14 +7356,14 @@ function show_node_popover(gobj)
 
     create_form_button_row(popover, [
         {
-            text: 'cancel',
+            i18n: 'cancel',
             style: BTN_STYLE_CANCEL,
             onClick: () => {
                 hide_node_popover(gobj);    /*  which undoes the preview  */
             },
         },
         {
-            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: () => {
@@ -8431,15 +8438,24 @@ 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);
 
-    // Topic selector
+    // Topic selector: the word carries its key, the colon is not translated
     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();
@@ -8483,6 +8499,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;' +
@@ -8499,18 +8520,19 @@ function show_create_popover(gobj)
     let createBtn;  // need reference for Enter key handler
     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;

package/src/yui_file_field.js

@@ -328,11 +328,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);