@yuneta/gobj-ui 7.26.26 → 7.26.27

package/README.md

@@ -3625,10 +3625,28 @@ 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.
+no suffix serves `other` and `many`; `zero`, `one`, `two` and `few` need their
+own form. That is a policy of GRAMMAR, not a need of i18next, which falls back
+to the bare key for any form that is missing: a Russian count of 3 rendered
+with the bare key reads wrong, and the check says so. A key that only ends
+like a form (`pick_one` alone) is a plain key; ordinals (`place_ordinal_one`)
+are checked with the ordinal categories of each language. A value of the shell
+declaration is a literal when it is the endonym of one of the app's locales
+(the `name` its catalog exports: `"中文"`, `"español"`); any other lower-case
+text is a key, `"configuración"` included.
+
+**A key that reaches `t()` as data is PUBLISHED by its module** (since
+`7.26.27`): an exported `<NAME>_I18N_KEYS` array of string literals, which
+`validate-locales` reads in every module the app mounts and asks the locales
+for. `yui_dev.js` publishes the 51 keys of the Developer window
+(`YUI_DEV_I18N_KEYS`) -- they used to be a comment each consumer copied, and
+one consumer lacked 35 --, `c_g6_nodes_tree.js` those of its shape tables and
+popover labels (`G6_NODES_TREE_I18N_KEYS`). A module that hands a key to `t()`
+by variable adds it to such a list:
+
+```js
+export const MY_VIEW_I18N_KEYS = ['shape', 'radius', 'apply to'];
+```
 
 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

package/dist/gobj-ui.cjs.js

@@ -8988,7 +8988,7 @@ function destroy_widgets(gobj, $container) {
 *  ids would break the association for both. The key is the
 *  label's own, so a language change reaches it.
 ************************************************************/
-function name_form_control($field, conf) {
+function name_form_control$1($field, conf) {
 	if (!$field || typeof $field.querySelector !== "function" || !conf) return;
 	let key = conf.label_i18n || conf.label || "";
 	if (!key) return;
@@ -9059,7 +9059,7 @@ function build_html_form(gobj, $form, prefix, template) {
 		if (placeholders[key]) html_field_conf.placeholder = placeholders[key];
 		if (html_field_conf.tag) {
 			let $field = create_form_field(gobj, $form, prefix, field_desc, html_field_conf);
-			name_form_control($field, html_field_conf);
+			name_form_control$1($field, html_field_conf);
 			$form.appendChild($field);
 		}
 	});
@@ -63793,19 +63793,34 @@ function touch_control_css() {
 	if (!coarse_pointer()) return "";
 	return "min-height:44px;font-size:16px;";
 }
+var form_control_seq = 0;
 function create_form_label(parent, text) {
 	let label = document.createElement("label");
 	label.textContent = (0, i18next.t)(text);
+	label.setAttribute("data-i18n", text);
 	label.style.cssText = "display:block;margin-bottom:4px;font-weight:500;";
 	parent.appendChild(label);
 	return label;
 }
+function name_form_control(parent, control) {
+	let label = parent.lastElementChild;
+	if (!label || label.tagName !== "LABEL") return;
+	let key = label.getAttribute("data-i18n");
+	if (!key) return;
+	control.id = "g6-form-control-" + ++form_control_seq;
+	label.htmlFor = control.id;
+	control.setAttribute("title", (0, i18next.t)(key));
+	control.setAttribute("data-i18n-title", key);
+	control.setAttribute("aria-label", (0, i18next.t)(key));
+	control.setAttribute("data-i18n-aria-label", key);
+}
 function create_form_color_input(parent, value, onInput) {
 	let input = document.createElement("input");
 	input.type = "color";
 	input.value = value;
 	input.style.cssText = "width:100%;height:30px;padding:0;border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;cursor:pointer;margin-bottom:10px;" + touch_control_css();
 	if (onInput) input.addEventListener("input", onInput);
+	name_form_control(parent, input);
 	parent.appendChild(input);
 	return input;
 }
@@ -63817,6 +63832,7 @@ function create_form_number_input(parent, value, min, max, onInput) {
 	input.value = value;
 	input.style.cssText = "width:100%;padding:4px 6px;background:var(--bulma-scheme-main-bis, #fff);color:var(--bulma-text-strong, #333);border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;box-sizing:border-box;margin-bottom:10px;" + touch_control_css();
 	if (onInput) input.addEventListener("input", onInput);
+	name_form_control(parent, input);
 	parent.appendChild(input);
 	return input;
 }
@@ -63826,9 +63842,11 @@ function create_form_select(parent, options, marginBottom) {
 	for (let opt of options) {
 		let o = document.createElement("option");
 		o.value = opt.value;
-		o.textContent = opt.label;
+		o.textContent = (0, i18next.t)(opt.i18n);
+		o.setAttribute("data-i18n", opt.i18n);
 		select.appendChild(o);
 	}
+	name_form_control(parent, select);
 	parent.appendChild(select);
 	return select;
 }
@@ -64587,7 +64605,7 @@ function show_port_popover(gobj) {
 	let shapeSelect = create_form_select(popover, PORT_SHAPES.map((shape) => {
 		return {
 			value: shape,
-			label: (0, i18next.t)(shape)
+			i18n: shape
 		};
 	}));
 	shapeSelect.value = orig_shape;
@@ -64598,15 +64616,15 @@ function show_port_popover(gobj) {
 	let scopeSelect = create_form_select(popover, [
 		{
 			value: "this",
-			label: (0, i18next.t)("this port")
+			i18n: "this port"
 		},
 		{
 			value: "same_topic",
-			label: (0, i18next.t)("same port in topic")
+			i18n: "same port in topic"
 		},
 		{
 			value: "all",
-			label: (0, i18next.t)("all ports")
+			i18n: "all ports"
 		}
 	]);
 	create_form_button_row(popover, [{
@@ -65294,15 +65312,15 @@ function show_edge_popover(gobj) {
 	let scopeSelect = create_form_select(popover, [
 		{
 			value: "this",
-			label: (0, i18next.t)("this edge")
+			i18n: "this edge"
 		},
 		{
 			value: "same_type",
-			label: (0, i18next.t)("same type edges")
+			i18n: "same type edges"
 		},
 		{
 			value: "all",
-			label: (0, i18next.t)("all edges")
+			i18n: "all edges"
 		}
 	]);
 	create_form_button_row(popover, [{
@@ -65446,7 +65464,7 @@ function show_node_popover(gobj) {
 	let shapeSelect = create_form_select(popover, NODE_SHAPES.map((shape) => {
 		return {
 			value: shape,
-			label: (0, i18next.t)(shape)
+			i18n: shape
 		};
 	}));
 	shapeSelect.value = nodeData.data && nodeData.data.desc ? node_figure_of(gobj, nodeData.data.desc, nodeData.data.graph_props || {}) : DEFAULT_NODE_SHAPE;
@@ -65455,15 +65473,15 @@ function show_node_popover(gobj) {
 	let scopeSelect = create_form_select(popover, [
 		{
 			value: "this",
-			label: (0, i18next.t)("this node")
+			i18n: "this node"
 		},
 		{
 			value: "same_topic",
-			label: (0, i18next.t)("same topic nodes")
+			i18n: "same topic nodes"
 		},
 		{
 			value: "all",
-			label: (0, i18next.t)("all nodes")
+			i18n: "all nodes"
 		}
 	]);
 	create_form_button_row(popover, [{
@@ -66170,7 +66188,11 @@ function show_create_popover(gobj) {
 	});
 	let idLabel = document.createElement("div");
 	idLabel.style.cssText = "margin-bottom:4px;font-weight:500;";
-	idLabel.textContent = "Id:";
+	let idWord = document.createElement("span");
+	idWord.textContent = (0, i18next.t)("node id");
+	idWord.setAttribute("data-i18n", "node id");
+	idLabel.appendChild(idWord);
+	idLabel.appendChild(document.createTextNode(":"));
 	popover.appendChild(idLabel);
 	let idInput = document.createElement("input");
 	idInput.type = "text";

package/dist/gobj-ui.es.js

@@ -8983,7 +8983,7 @@ function destroy_widgets(gobj, $container) {
 *  ids would break the association for both. The key is the
 *  label's own, so a language change reaches it.
 ************************************************************/
-function name_form_control($field, conf) {
+function name_form_control$1($field, conf) {
 	if (!$field || typeof $field.querySelector !== "function" || !conf) return;
 	let key = conf.label_i18n || conf.label || "";
 	if (!key) return;
@@ -9054,7 +9054,7 @@ function build_html_form(gobj, $form, prefix, template) {
 		if (placeholders[key]) html_field_conf.placeholder = placeholders[key];
 		if (html_field_conf.tag) {
 			let $field = create_form_field(gobj, $form, prefix, field_desc, html_field_conf);
-			name_form_control($field, html_field_conf);
+			name_form_control$1($field, html_field_conf);
 			$form.appendChild($field);
 		}
 	});
@@ -63788,19 +63788,34 @@ function touch_control_css() {
 	if (!coarse_pointer()) return "";
 	return "min-height:44px;font-size:16px;";
 }
+var form_control_seq = 0;
 function create_form_label(parent, text) {
 	let label = document.createElement("label");
 	label.textContent = t(text);
+	label.setAttribute("data-i18n", text);
 	label.style.cssText = "display:block;margin-bottom:4px;font-weight:500;";
 	parent.appendChild(label);
 	return label;
 }
+function name_form_control(parent, control) {
+	let label = parent.lastElementChild;
+	if (!label || label.tagName !== "LABEL") return;
+	let key = label.getAttribute("data-i18n");
+	if (!key) return;
+	control.id = "g6-form-control-" + ++form_control_seq;
+	label.htmlFor = control.id;
+	control.setAttribute("title", t(key));
+	control.setAttribute("data-i18n-title", key);
+	control.setAttribute("aria-label", t(key));
+	control.setAttribute("data-i18n-aria-label", key);
+}
 function create_form_color_input(parent, value, onInput) {
 	let input = document.createElement("input");
 	input.type = "color";
 	input.value = value;
 	input.style.cssText = "width:100%;height:30px;padding:0;border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;cursor:pointer;margin-bottom:10px;" + touch_control_css();
 	if (onInput) input.addEventListener("input", onInput);
+	name_form_control(parent, input);
 	parent.appendChild(input);
 	return input;
 }
@@ -63812,6 +63827,7 @@ function create_form_number_input(parent, value, min, max, onInput) {
 	input.value = value;
 	input.style.cssText = "width:100%;padding:4px 6px;background:var(--bulma-scheme-main-bis, #fff);color:var(--bulma-text-strong, #333);border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;box-sizing:border-box;margin-bottom:10px;" + touch_control_css();
 	if (onInput) input.addEventListener("input", onInput);
+	name_form_control(parent, input);
 	parent.appendChild(input);
 	return input;
 }
@@ -63821,9 +63837,11 @@ function create_form_select(parent, options, marginBottom) {
 	for (let opt of options) {
 		let o = document.createElement("option");
 		o.value = opt.value;
-		o.textContent = opt.label;
+		o.textContent = t(opt.i18n);
+		o.setAttribute("data-i18n", opt.i18n);
 		select.appendChild(o);
 	}
+	name_form_control(parent, select);
 	parent.appendChild(select);
 	return select;
 }
@@ -64582,7 +64600,7 @@ function show_port_popover(gobj) {
 	let shapeSelect = create_form_select(popover, PORT_SHAPES.map((shape) => {
 		return {
 			value: shape,
-			label: t(shape)
+			i18n: shape
 		};
 	}));
 	shapeSelect.value = orig_shape;
@@ -64593,15 +64611,15 @@ function show_port_popover(gobj) {
 	let scopeSelect = create_form_select(popover, [
 		{
 			value: "this",
-			label: t("this port")
+			i18n: "this port"
 		},
 		{
 			value: "same_topic",
-			label: t("same port in topic")
+			i18n: "same port in topic"
 		},
 		{
 			value: "all",
-			label: t("all ports")
+			i18n: "all ports"
 		}
 	]);
 	create_form_button_row(popover, [{
@@ -65289,15 +65307,15 @@ function show_edge_popover(gobj) {
 	let scopeSelect = create_form_select(popover, [
 		{
 			value: "this",
-			label: t("this edge")
+			i18n: "this edge"
 		},
 		{
 			value: "same_type",
-			label: t("same type edges")
+			i18n: "same type edges"
 		},
 		{
 			value: "all",
-			label: t("all edges")
+			i18n: "all edges"
 		}
 	]);
 	create_form_button_row(popover, [{
@@ -65441,7 +65459,7 @@ function show_node_popover(gobj) {
 	let shapeSelect = create_form_select(popover, NODE_SHAPES.map((shape) => {
 		return {
 			value: shape,
-			label: t(shape)
+			i18n: shape
 		};
 	}));
 	shapeSelect.value = nodeData.data && nodeData.data.desc ? node_figure_of(gobj, nodeData.data.desc, nodeData.data.graph_props || {}) : DEFAULT_NODE_SHAPE;
@@ -65450,15 +65468,15 @@ function show_node_popover(gobj) {
 	let scopeSelect = create_form_select(popover, [
 		{
 			value: "this",
-			label: t("this node")
+			i18n: "this node"
 		},
 		{
 			value: "same_topic",
-			label: t("same topic nodes")
+			i18n: "same topic nodes"
 		},
 		{
 			value: "all",
-			label: t("all nodes")
+			i18n: "all nodes"
 		}
 	]);
 	create_form_button_row(popover, [{
@@ -66165,7 +66183,11 @@ function show_create_popover(gobj) {
 	});
 	let idLabel = document.createElement("div");
 	idLabel.style.cssText = "margin-bottom:4px;font-weight:500;";
-	idLabel.textContent = "Id:";
+	let idWord = document.createElement("span");
+	idWord.textContent = t("node id");
+	idWord.setAttribute("data-i18n", "node id");
+	idLabel.appendChild(idWord);
+	idLabel.appendChild(document.createTextNode(":"));
 	popover.appendChild(idLabel);
 	let idInput = document.createElement("input");
 	idInput.type = "text";

package/package.json

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

package/scripts/validate-locales.mjs

@@ -22,7 +22,14 @@
  *               `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).
+ *               allowed (i18next uses it for a count of 0). i18next itself
+ *               falls back to the bare key for ANY missing form: asking for
+ *               `one`/`few` is a policy of grammar, not of i18next. A key
+ *               that only ENDS like a form (`pick_one` alone) is a plain
+ *               key: a group is a plural when a locale has its bare base,
+ *               its `_other` or two of its forms. Ordinals
+ *               (`place_ordinal_one`) are checked with the ordinal
+ *               categories of each language.
  *            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").
@@ -31,7 +38,10 @@
  *               fine and simply never changes language -- invisible by
  *               construction, and it shipped: a Settings `label` column).
  *
- *          Rule 5 reads the app's own source (recursively), the shell
+ *          Rule 5 reads the app's own source (recursively, .js and .mjs;
+ *          not tests, not a locales/ directory), the keys a module
+ *          PUBLISHES as data (an exported `<NAME>_I18N_KEYS` array: the
+ *          keys it hands to t() as variables, yui_dev.js's 51), 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
@@ -59,7 +69,8 @@
  *          `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.
+ *          t() the scan can read. A name declared that no source uses is a
+ *          violation (a typo would turn its check off).
  *
  *          A locale is a file <code>.js of the locales directory (en.js,
  *          es.js, pt-br.js; flags.js and locales.js are not) exporting
@@ -84,7 +95,7 @@ import {pathToFileURL} from "url";
 
 const ASCII_RE = /^[\x20-\x7e]+$/;
 const LOCALE_FILE_RE = /^([a-z]{2,3}(?:[-_][a-zA-Z]{2,4})?)\.js$/;
-const PLURAL_RE = /^(.+)_(zero|one|two|few|many|other)$/;
+const PLURAL_RE = /^(.+?)(_ordinal)?_(zero|one|two|few|many|other)$/;
 
 /*  This package: the library the app builds with.  */
 const LIB       = new URL("../", import.meta.url);
@@ -201,47 +212,64 @@ async function load_locales(locales_dir)
         codes = ["en", ...codes.filter((c) => c !== "en")];
     }
     let locales = {};
+    let names = new Set();
     for(let code of codes) {
-        let mod = await import(new URL(`${code}.js`, locales_dir).href);
-        let locale = mod[code] || mod[code.replace(/-/g, "_")] || mod.default;
+        let mod;
+        try {
+            mod = await import(new URL(`${code}.js`, locales_dir).href);
+        } catch(e) {
+            /*  A helper that happens to have a locale's name (app.js), and
+             *  needs a browser to load: said and skipped, not a crash  */
+            note(`${code}.js cannot be loaded here (${e.message}): not a locale, skipped`);
+            continue;
+        }
+        let camel = code.replace(/[-_]([a-z])/gi, (m, c) => c.toUpperCase());     // pt-br -> ptBr
+        let upper = code.replace(/[-_]([a-z]+)/gi, (m, c) => c.toUpperCase());    // pt-br -> ptBR
+        let locale = mod[code] || mod[code.replace(/-/g, "_")] || mod[camel] || mod[upper] || mod.default;
         if(!locale || !locale.translation || typeof locale.translation !== "object") {
             note(`${code}.js exports no {${code}} with a translation dict: not a locale, skipped`);
             continue;
         }
         locales[code] = locale.translation;
+        if(typeof locale.name === "string" && locale.name) {
+            names.add(locale.name);     // its endonym: a literal of a language menu
+        }
     }
     if(Object.keys(locales).length === 0) {
         abort(`no locale (<code>.js exporting {<code>: {translation}}) in ${locales_dir.pathname}`);
     }
-    return locales;
+    return {locales, names};
 }
 
 /***************************************************************
  *  The plural categories of a language (Intl.PluralRules)
  ***************************************************************/
-function plural_categories(code)
+function plural_categories(code, ordinal)
 {
     try {
-        return new Set(new Intl.PluralRules(code.replace(/_/g, "-")).resolvedOptions().pluralCategories);
+        return new Set(new Intl.PluralRules(code.replace(/_/g, "-"),
+            {type: ordinal? "ordinal" : "cardinal"}).resolvedOptions().pluralCategories);
     } catch(e) {
         return new Set(["one", "other"]);
     }
 }
 
 /***************************************************************
- *  A locale's keys split: plain ones, and {base: Set(categories)}
+ *  A locale's keys split: plain ones, and {group: Set(categories)}, a
+ *  group being a base, or "<base>#ordinal" for `<base>_ordinal_<cat>`
  ***************************************************************/
-function split_plurals(keys)
+function split_plurals(keys, plural_groups)
 {
     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());
+        let group = m? m[1] + (m[2]? "#ordinal" : "") : null;
+        if(m && plural_groups.has(group)) {
+            if(!plurals.has(group)) {
+                plurals.set(group, new Set());
             }
-            plurals.get(m[1]).add(m[2]);
+            plurals.get(group).add(m[3]);
         } else {
             plain.add(k);
         }
@@ -249,20 +277,67 @@ function split_plurals(keys)
     return {plain, plurals};
 }
 
+/***************************************************************
+ *  Which `<x>_<category>` keys ARE plurals: a key that only ends like one
+ *  (`pick_one`, `step_two`) is a key. A group is a plural when some locale
+ *  has its bare base, or its `_other` form, or two of its forms.
+ ***************************************************************/
+function find_plural_groups(locales)
+{
+    let forms = new Map();      // group -> Set of "code:cat"
+    let bare = new Set();
+    for(let [code, translation] of Object.entries(locales)) {
+        for(let k of Object.keys(translation)) {
+            bare.add(k);
+            let m = k.match(PLURAL_RE);
+            if(m) {
+                let group = m[1] + (m[2]? "#ordinal" : "");
+                if(!forms.has(group)) {
+                    forms.set(group, new Map());
+                }
+                let per = forms.get(group);
+                if(!per.has(code)) {
+                    per.set(code, new Set());
+                }
+                per.get(code).add(m[3]);
+            }
+        }
+    }
+    let groups = new Set();
+    for(let [group, per] of forms) {
+        let base = group.replace(/#ordinal$/, "");
+        let is_plural = bare.has(base) && !group.endsWith("#ordinal");
+        for(let cats of per.values()) {
+            if(cats.has("other") || cats.size >= 2) {
+                is_plural = true;
+            }
+        }
+        if(group.endsWith("#ordinal")) {
+            is_plural = true;   // `_ordinal_` says it
+        }
+        if(is_plural) {
+            groups.add(group);
+        }
+    }
+    return groups;
+}
+
 /***************************************************************
  *
  ***************************************************************/
 async function main()
 {
     let opts = parse_args(process.argv.slice(2));
-    let locales = await load_locales(opts.locales);
+    let {locales, names} = await load_locales(opts.locales);
+    opts.language_names = names;
     let codes = Object.keys(locales);
 
     /*  Per-locale key checks (ASCII + lower-case)  */
+    let plural_groups = find_plural_groups(locales);
     let split = {};
     for(let code of codes) {
         let keys = Object.keys(locales[code]);
-        split[code] = split_plurals(keys);
+        split[code] = split_plurals(keys, plural_groups);
         for(let k of keys) {
             if(!ASCII_RE.test(k)) {
                 fail(`[${code}] non-ASCII key: ${JSON.stringify(k)}`);
@@ -277,11 +352,9 @@ async function main()
      *  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);
-        }
+    let bases = new Set();      // the plain base of each plural group
+    for(let group of plural_groups) {
+        bases.add(group.replace(/#ordinal$/, ""));
     }
 
     /*  Symmetry of the plain keys: every locale carries those of the first  */
@@ -309,19 +382,21 @@ async function main()
      */
     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();
+        for(let group of plural_groups) {
+            let ordinal = group.endsWith("#ordinal");
+            let base = group.replace(/#ordinal$/, "");
+            let wanted = plural_categories(code, ordinal);
+            let have = split[code].plurals.get(group) || 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` +
+                    fail(`[${code}] ${ordinal? "ordinal" : "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`);
+                    fail(`[${code}] ${ordinal? "ordinal" : "plural"} ${JSON.stringify(base)} has a form "${c}" its language never uses`);
                 }
             }
         }
@@ -424,6 +499,11 @@ function collect_used_keys(opts)
     }
     let array_re = opts.array_keys.length > 0?
         re(String.raw`\b(?:` + opts.array_keys.join("|") + String.raw`)\s*:\s*\[([^\]]*)\]`) : null;
+    /*  A module publishes the keys it hands to t() as DATA (yui_dev.js:
+     *  YUI_DEV_I18N_KEYS): every key of such an array is asked for  */
+    let published_re = /\bexport\s+const\s+[A-Z0-9_]+_I18N_KEYS\s*=\s*\[([^\]]*)\]/g;
+    let declared = new Set([...opts.attr_keys, ...opts.array_keys]);
+    let declared_seen = new Set();
 
     let scan = (url) => {
         /*  Comments are not code: the library documents the contract with
@@ -442,15 +522,29 @@ function collect_used_keys(opts)
                 keys.add(k);
             }
         }
+        let lists = [];
         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));
-                }
+                lists.push(f[1]);
+            }
+        }
+        published_re.lastIndex = 0;
+        let pm;
+        while((pm = published_re.exec(code)) !== null) {
+            lists.push(pm[1]);
+        }
+        for(let list of lists) {
+            let lit_re = re(STR);
+            let l;
+            while((l = lit_re.exec(list)) !== null) {
+                keys.add(literal_of(l));
+            }
+        }
+        for(let name of declared) {
+            if(re(String.raw`\b` + name + String.raw`\s*:`).test(code)) {
+                declared_seen.add(name);
             }
         }
         return code;
@@ -470,7 +564,14 @@ function collect_used_keys(opts)
         }
     }
 
-    keys_from_shell_config(opts.config, keys);
+    /*  A name declared and found in no source is a typo that turns its check off  */
+    for(let name of declared) {
+        if(!declared_seen.has(name)) {
+            fail(`package.json "validate-locales" names ${JSON.stringify(name)}, which no source uses: a typo turns its check off`);
+        }
+    }
+
+    keys_from_shell_config(opts.config, keys, opts.language_names);
 
     /*
      *  ...and the gobj-ui views it MOUNTS. Only the modules actually
@@ -504,10 +605,13 @@ function collect_used_keys(opts)
 }
 
 /***************************************************************
- *  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
+ *  The .js / .mjs files of a source directory, recursively: not the tests
+ *  (*.test.js, *.spec.js, __tests__/, test/, tests/), not a locales/
+ *  directory (its keys are definitions, not uses), not node_modules or a
+ *  build
  ***************************************************************/
+const SKIPPED_DIRS = new Set(["node_modules", "dist", "locales", "__tests__", "test", "tests"]);
+
 function source_files(dir, locales_dir)
 {
     let out = [];
@@ -519,11 +623,11 @@ function source_files(dir, locales_dir)
             let url = new URL(f, d);
             let st = statSync(url);
             if(st.isDirectory()) {
-                if(f === "node_modules" || f === "dist" || f.startsWith(".")) {
+                if(SKIPPED_DIRS.has(f) || f.startsWith(".")) {
                     continue;
                 }
                 walk(new URL(f + "/", d));
-            } else if(f.endsWith(".js") && !f.endsWith(".test.js")) {
+            } else if(/\.m?js$/.test(f) && !/\.(test|spec)\.m?js$/.test(f)) {
                 out.push(url);
             }
         }
@@ -540,15 +644,17 @@ function source_files(dir, locales_dir)
  *  ever -- which is how four toolbar buttons announced themselves as
  *  "toggle language" in Spanish.
  *
- *  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
+ *  A value that is not lower-case is a literal the config carries on
+ *  purpose ("ES/EN" on a language button); so is the endonym of one of the
+ *  app's locales (its `name`: "中文", "español") in a language menu. Any
+ *  other value is a key -- "configuración" is a Spanish literal that forgot
+ *  its key, and it is reported, as an ASCII one would be. `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)
+function keys_from_shell_config(url, keys, language_names)
 {
     if(!existsSync(url)) {
         note(`no ${url.pathname}: no shell keys checked`);
@@ -575,7 +681,7 @@ function keys_from_shell_config(url, keys)
                 continue;
             }
             if(CONFIG_I18N_FIELDS.includes(k) && typeof v === "string" && v
-                    && ASCII_RE.test(v) && v === v.toLowerCase()) {
+                    && v === v.toLowerCase() && !language_names.has(v)) {
                 keys.add(v);
             }
             walk(v);

package/src/c_g6_nodes_tree.js

@@ -340,6 +340,19 @@ const SHAPE_SIZE = {
  *  default: a figure is a POINT of the topology, and a circle is
  *  the one figure that says nothing more than that.  */
 const NODE_SHAPES = ['square', 'circle', 'diamond', 'triangle', 'hexagon', 'star'];
+
+/*  The keys of this view that reach t() as DATA or as an ARGUMENT -- the
+ *  shape tables, the labels of the property popovers (create_form_label),
+ *  the confirm button (show_confirm_popover): read by a consumer's
+ *  validate-locales, which asks the locales for every key of an exported
+ *  `*_I18N_KEYS` array of a module the app mounts. A shape added to
+ *  NODE_SHAPES or PORT_SHAPES, or a new label, goes here too (a test checks
+ *  the shapes).  */
+export const G6_NODES_TREE_I18N_KEYS = [
+    'square', 'circle', 'diamond', 'triangle', 'hexagon', 'star',
+    'shape', 'radius', 'apply to', 'line width', 'color', 'fill color', 'stroke color',
+    'delete'
+];
 const DEFAULT_NODE_SHAPE = 'circle';
 
 /***************************************************************
@@ -4931,15 +4944,43 @@ function touch_control_css()
  *  one id.
  */
 
+/*
+ *  A form of the property popovers is a LABEL followed by its control. The
+ *  label carries its key (`text` is one) and the control built next is
+ *  NAMED by it: a `<label>` beside a control names nothing, so the control
+ *  gets the label's `for`, and its own `title` and `aria-label`, with their
+ *  keys (REV-CLOUD V19.4.1: 11 controls without a name).
+ */
+let form_control_seq = 0;
+
 function create_form_label(parent, text)
 {
     let label = document.createElement('label');
     label.textContent = t(text);
+    label.setAttribute('data-i18n', text);
     label.style.cssText = 'display:block;margin-bottom:4px;font-weight:500;';
     parent.appendChild(label);
     return label;
 }
 
+function name_form_control(parent, control)
+{
+    let label = parent.lastElementChild;
+    if(!label || label.tagName !== 'LABEL') {
+        return;
+    }
+    let key = label.getAttribute('data-i18n');
+    if(!key) {
+        return;
+    }
+    control.id = 'g6-form-control-' + (++form_control_seq);
+    label.htmlFor = control.id;
+    control.setAttribute('title', t(key));
+    control.setAttribute('data-i18n-title', key);
+    control.setAttribute('aria-label', t(key));
+    control.setAttribute('data-i18n-aria-label', key);
+}
+
 function create_form_color_input(parent, value, onInput)
 {
     let input = document.createElement('input');
@@ -4952,6 +4993,7 @@ function create_form_color_input(parent, value, onInput)
     if(onInput) {
         input.addEventListener('input', onInput);
     }
+    name_form_control(parent, input);
     parent.appendChild(input);
     return input;
 }
@@ -4976,6 +5018,7 @@ function create_form_number_input(parent, value, min, max, onInput)
     if(onInput) {
         input.addEventListener('input', onInput);
     }
+    name_form_control(parent, input);
     parent.appendChild(input);
     return input;
 }
@@ -4991,11 +5034,14 @@ function create_form_select(parent, options, marginBottom)
         'box-sizing:border-box;margin-bottom:' + (marginBottom || '12px') + ';' +
         touch_control_css();
     for(let opt of options) {
+        /*  `i18n` is the option's key: it carries it, and `value` stays explicit  */
         let o = document.createElement('option');
         o.value = opt.value;
-        o.textContent = opt.label;
+        o.textContent = t(opt.i18n);
+        o.setAttribute('data-i18n', opt.i18n);
         select.appendChild(o);
     }
+    name_form_control(parent, select);
     parent.appendChild(select);
     return select;
 }
@@ -6138,7 +6184,7 @@ function show_port_popover(gobj)
 
     create_form_label(popover, 'shape');
     let shapeSelect = create_form_select(popover, PORT_SHAPES.map((shape) => {
-        return {value: shape, label: t(shape)};
+        return {value: shape, i18n: shape};
     }));
     shapeSelect.value = orig_shape;
     shapeSelect.addEventListener('change', preview_port);
@@ -6148,9 +6194,9 @@ function show_port_popover(gobj)
 
     create_form_label(popover, 'apply to');
     let scopeSelect = create_form_select(popover, [
-        {value: 'this', label: t('this port')},
-        {value: 'same_topic', label: t('same port in topic')},
-        {value: 'all', label: t('all ports')},
+        {value: 'this', i18n: 'this port'},
+        {value: 'same_topic', i18n: 'same port in topic'},
+        {value: 'all', i18n: 'all ports'},
     ]);
 
     create_form_button_row(popover, [
@@ -7100,9 +7146,9 @@ function show_edge_popover(gobj)
     // Apply-to scope
     create_form_label(popover, 'apply to');
     let scopeSelect = create_form_select(popover, [
-        { value: 'this', label: t('this edge') },
-        { value: 'same_type', label: t('same type edges') },
-        { value: 'all', label: t('all edges') },
+        { value: 'this', i18n: 'this edge' },
+        { value: 'same_type', i18n: 'same type edges' },
+        { value: 'all', i18n: 'all edges' },
     ]);
 
     create_form_button_row(popover, [
@@ -7339,7 +7385,7 @@ function show_node_popover(gobj)
      *  reshape either way.  */
     create_form_label(popover, 'shape');
     let shapeSelect = create_form_select(popover, NODE_SHAPES.map((shape) => {
-        return {value: shape, label: t(shape)};
+        return {value: shape, i18n: shape};
     }));
     shapeSelect.value = nodeData.data && nodeData.data.desc
         ? node_figure_of(gobj, nodeData.data.desc, nodeData.data.graph_props || {})
@@ -7349,9 +7395,9 @@ function show_node_popover(gobj)
     // Apply-to scope
     create_form_label(popover, 'apply to');
     let scopeSelect = create_form_select(popover, [
-        { value: 'this', label: t('this node') },
-        { value: 'same_topic', label: t('same topic nodes') },
-        { value: 'all', label: t('all nodes') },
+        { value: 'this', i18n: 'this node' },
+        { value: 'same_topic', i18n: 'same topic nodes' },
+        { value: 'all', i18n: 'all nodes' },
     ]);
 
     create_form_button_row(popover, [
@@ -8493,7 +8539,11 @@ function show_create_popover(gobj)
     // Node ID input
     let idLabel = document.createElement('div');
     idLabel.style.cssText = 'margin-bottom:4px;font-weight:500;';
-    idLabel.textContent = 'Id:';
+    let idWord = document.createElement('span');
+    idWord.textContent = t('node id');
+    idWord.setAttribute('data-i18n', 'node id');
+    idLabel.appendChild(idWord);
+    idLabel.appendChild(document.createTextNode(':'));
     popover.appendChild(idLabel);
 
     let idInput = document.createElement('input');

package/src/g6_nodes_tree_i18n_keys.test.js

@@ -0,0 +1,39 @@
+/***********************************************************************
+ *          g6_nodes_tree_i18n_keys.test.js
+ *
+ *      The shape tables of c_g6_nodes_tree.js reach t() as DATA, so the
+ *      view publishes their keys in G6_NODES_TREE_I18N_KEYS, which a
+ *      consumer's validate-locales asks the locales for. A shape added to
+ *      a table and not to the list would render raw in every language.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, test, expect} from "vitest";
+import {readFileSync} from "node:fs";
+import {dirname, join} from "node:path";
+import {fileURLToPath} from "node:url";
+
+const SRC = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "c_g6_nodes_tree.js"), "utf8");
+
+function array_of(name)
+{
+    const m = SRC.match(new RegExp(`(?:export\\s+)?const ${name} = \\[([^\\]]*)\\]`));
+    expect(m, name).toBeTruthy();
+    return [...m[1].matchAll(/'([^']+)'/g)].map((x) => x[1]);
+}
+
+describe("c_g6_nodes_tree publishes the keys of its shape tables", () => {
+    test("every node and port shape is in G6_NODES_TREE_I18N_KEYS", () => {
+        const published = new Set(array_of("G6_NODES_TREE_I18N_KEYS"));
+        for(const shape of [...array_of("NODE_SHAPES"), ...array_of("PORT_SHAPES")]) {
+            expect(published.has(shape), shape).toBe(true);
+        }
+    });
+
+    test("a form control is named by the label before it, and an option carries its key", () => {
+        expect(SRC).toMatch(/function name_form_control\(parent, control\)/);
+        expect(SRC).toMatch(/o\.setAttribute\('data-i18n', opt\.i18n\)/);
+        expect(SRC).not.toMatch(/label: t\('/);
+    });
+});

package/src/yui_dev.js

@@ -71,36 +71,34 @@ const TRAFFIC_TS_FIELDS = {
  *  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.  */
-/*  ⚠️  The keys of this window are a BLIND SPOT for a consumer's
- *  `validate-locales`: the table below and the `grp` / `mk_view` /
- *  `mk_expand` / `mk_dir` / `mk_out` helpers pass their key as a
- *  VARIABLE, and `OUT_TITLES` holds three more in a lookup table --
- *  so a scan of `t("…")` sees none of them and reports OK with the
- *  whole window in English. The full set a consumer must define,
- *  kept here so it can be copied:
- *
- *      automata, both, browser console only, clear,
- *      clear captured traffic, collapsed, console, copied, copy,
- *      copy visible traffic to clipboard, creation, data,
- *      dev window and browser console, dev window only, developer,
- *      clear the filter, errors, expand, expanded, filter events / payload,
- *      find, i18n,
- *      i18next debug output, incoming, log, machine trace shape,
- *      metadata, outgoing, output, payload, periodic, schema, show,
- *      show the payload of the traces,
- *      show this section in the expanded view, simple mach,
- *      start / stop, subscriptions,
- *      trace every event of every automaton,
- *      trace subscriptions and publications,
- *      trace the creation and destruction of gobjs,
- *      trace the messages to and from the backend,
- *      trace the periodic timer event,
- *      trace the start and stop of gobjs,
- *      traces, traffic, traffic payload folded,
- *      traffic payload laid out, view, window, yuno monitor
- *
- *  wattyzer and the yunovatios GUIs carry them; check a new consumer
- *  against this list, and confirm it by DUMPING the window.  */
+/*  The keys of this window that reach t() as VARIABLES: the table below,
+ *  the `grp` / `mk_view` / `mk_expand` / `mk_dir` / `mk_out` helpers and
+ *  `OUT_TITLES` pass their key by name, so a scan of `t("...")` sees none of
+ *  them. They are published HERE, as data: a consumer's `validate-locales`
+ *  (gobj-ui 7.26.27+) reads an exported `*_I18N_KEYS` array of every module
+ *  the app mounts and asks the locales for each key -- it used to be a
+ *  comment each consumer copied by hand, and yunomusica lacked 35 of them
+ *  (REV-CLOUD V19.4.2). A key added to the window goes in this list.  */
+export const YUI_DEV_I18N_KEYS = [
+    "automata", "both", "browser console only", "clear",
+    "clear captured traffic", "collapsed", "console", "copied", "copy",
+    "copy visible traffic to clipboard", "creation", "data",
+    "dev window and browser console", "dev window only", "developer",
+    "clear the filter", "errors", "expand", "expanded",
+    "filter events / payload", "find", "i18n", "i18next debug output",
+    "incoming", "log", "machine trace shape", "metadata", "outgoing",
+    "output", "payload", "periodic", "schema", "show",
+    "show the payload of the traces",
+    "show this section in the expanded view", "simple mach", "start / stop",
+    "subscriptions", "trace every event of every automaton",
+    "trace subscriptions and publications",
+    "trace the creation and destruction of gobjs",
+    "trace the messages to and from the backend",
+    "trace the periodic timer event", "trace the start and stop of gobjs",
+    "traces", "traffic", "traffic payload folded",
+    "traffic payload laid out", "view", "window", "yuno monitor"
+];
+
 const TRACE_DEFS = [
     ["automata",      "automata",      "trace every event of every automaton",
         automata_state, toggle_automata],