@yuneta/gobj-ui 7.26.25 → 7.26.27

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;
 }
@@ -5010,9 +5056,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 +5112,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,
@@ -6131,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);
@@ -6141,21 +6194,21 @@ 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, [
         {
-            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: () => {
@@ -7093,21 +7146,21 @@ 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, [
         {
-            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: () => {
@@ -7332,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 || {})
@@ -7342,21 +7395,21 @@ 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, [
         {
-            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 +8484,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();
@@ -8477,12 +8539,21 @@ 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');
     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 +8570,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/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],

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);