dsh-plugin-vrmpet3d 0.1.0 → 0.1.2

package/lib/model-picker.js

@@ -30,47 +30,73 @@
   var MODEL_ACCEPT = '.vrm,.glb,.gltf';
   var MODEL_PATTERN = /\.(vrm|glb|gltf)$/i;
 
+  /**
+   * This surface's own wording, in the two languages it draws in: `TEXT.zh` is the Chinese half, and the English
+   * twin is the literal {@link resolveText} returns for `'en'`.
+   *
+   * TWO LITERALS, one per language, rather than two columns of one table — because each half has to be written as
+   * its own language rather than as a translation of the other, which is also why `lib/menu.js` spells its
+   * `LABELS` out twice. Both halves are written in FULL: a half that is merely a gloss on the other is what makes
+   * a half-translated interface.
+   *
+   * THE TWO KEY SETS MUST BE IDENTICAL. A key the Chinese half has and the English does not falls back to Chinese
+   * mid-sentence (`core.textFor`), which is the defect a suite asserts against — and that includes the
+   * FUNCTION-valued entries: they stay functions in both halves because that is what lets the English put its
+   * words in its own order (`creditAuthor(author)`) rather than in the Chinese sentence's order.
+   */
   var TEXT = {
-    dropTitle: '点击选择模型文件',
-    dropSub: '或把 ' + MODEL_ACCEPT.split(',').join(' / ') + ' 拖到这里',
-    reading: '正在读取模型列表…',
-    listFailed: '模型列表读取失败。',
-    empty: '还没有可用的模型。',
-    count: function (total, imported) {
-      return '共 ' + total + ' 个模型' + (imported ? '（其中 ' + imported + ' 个是导入的）' : '') + '。';
+    zh: {
+      dropTitle: '点击选择模型文件',
+      dropSub: '或把 ' + MODEL_ACCEPT.split(',').join(' / ') + ' 拖到这里',
+      reading: '正在读取模型列表…',
+      listFailed: '模型列表读取失败。',
+      empty: '还没有可用的模型。',
+      gridLabel: '现有模型',
+      count: function (total, imported) {
+        return '共 ' + total + ' 个模型' + (imported ? '（其中 ' + imported + ' 个是导入的）' : '') + '。';
+      },
+      tagBundled: '自带',
+      tagUser: '已导入',
+      using: '使用中',
+      remove: '移除这个导入的模型',
+      importing: '正在导入模型…',
+      importingFile: function (name) { return '正在导入 ' + name + '…'; },
+      imported: function (name) { return '已导入并切换：' + name; },
+      importedNoSwitch: function (name) { return '已导入：' + name; },
+      importFailed: '导入失败：',
+      switched: function (name) { return '已切换模型：' + name; },
+      switching: function (name) { return '正在切换模型：' + name + '…'; },
+      switchingBusy: '正在切换中，等这一只加载完再点。',
+      switchingSlow: '仍在加载。',
+      switchingTimeout: function (name) { return '切换超时：' + name + ' 可能没能加载，看看桌宠上的提示。'; },
+      noModel: '这个文件不是模型（只接受 .vrm / .glb / .gltf）。',
+      dropBusy: '正在导入，请等它读完。',
+      noFetchUpload: '这个页面不能上传文件。',
+      removed: '已移除插件复制的那一份。',
+      removeFailed: '移除失败：',
+      /**
+       * 自带模型的来源与作者 — the operator's own requirement (2026-10-13: 「需要注明来源和作者」).
+       *
+       * The WORDS live here with every other string; the FACTS come from the host, which is the only writer of a
+       * catalogue entry's `credit` (`BUNDLED_MODEL_CREDITS` in `lib/index.js`). A credit typed into this file as
+       * well would be a second copy of who made what.
+       */
+      creditTitle: '插件自带模型',
+      creditName: function (title, file) { return title ? title + '（' + file + '）' : file; },
+      creditAuthor: function (author) { return '作者：' + author; },
+      creditLicense: function (license) { return '授权：' + license; },
+      creditSource: function (source) { return '来源：' + source; },
     },
-    tagBundled: '自带',
-    tagUser: '已导入',
-    using: '使用中',
-    remove: '移除这个导入的模型',
-    importing: '正在导入模型…',
-    importingFile: function (name) { return '正在导入 ' + name + '…'; },
-    imported: function (name) { return '已导入并切换：' + name; },
-    importedNoSwitch: function (name) { return '已导入：' + name; },
-    importFailed: '导入失败：',
-    switched: function (name) { return '已切换模型：' + name; },
-    switching: function (name) { return '正在切换模型：' + name + '…'; },
-    switchingBusy: '正在切换中，等这一只加载完再点。',
-    switchingSlow: '仍在加载。',
-    switchingTimeout: function (name) { return '切换超时：' + name + ' 可能没能加载，看看桌宠上的提示。'; },
-    noModel: '这个文件不是模型（只接受 .vrm / .glb / .gltf）。',
-    dropBusy: '正在导入，请等它读完。',
-    removed: '已移除插件复制的那一份。',
-    removeFailed: '移除失败：',
-    /**
-     * 自带模型的来源与作者 — the operator's own requirement (2026-10-13: 「需要注明来源和作者」).
-     *
-     * The WORDS live here with every other string; the FACTS come from the host, which is the only writer of a
-     * catalogue entry's `credit` (`BUNDLED_MODEL_CREDITS` in `lib/index.js`). A credit typed into this file as
-     * well would be a second copy of who made what.
-     */
-    creditTitle: '插件自带模型',
-    creditName: function (title, file) { return title ? title + '（' + file + '）' : file; },
-    creditAuthor: function (author) { return '作者：' + author; },
-    creditLicense: function (license) { return '授权：' + license; },
-    creditSource: function (source) { return '来源：' + source; },
   };
 
+  /**
+   * This surface's words in one of its two languages — the accessor every caller goes through, and what
+   * `__VRMPET3D_MODEL_PICKER__.strings` exposes to a suite.
+   *
+   * `'zh'` (and anything that is not `'en'`, which includes a caller that passed no language at all) gets the
+   * Chinese half, the default this component has always had. `'auto'` is NOT resolved here: the caller knows what
+   * the environment says and passes the answer in, so a component that never sees a store cannot guess wrong.
+   */
   function resolveText(language) {
     if (language === 'en') {
       return {
@@ -79,8 +105,9 @@
         reading: 'Reading the model list…',
         listFailed: 'Could not read the model list.',
         empty: 'No models available yet.',
+        gridLabel: 'Available models',
         count: function (total, imported) {
-          return total + ' models' + (imported ? ' (' + imported + ' imported)' : '') + '.';
+          return total + (total === 1 ? ' model' : ' models') + (imported ? ' (' + imported + ' imported)' : '') + '.';
         },
         tagBundled: 'built-in',
         tagUser: 'imported',
@@ -96,18 +123,19 @@
         switchingBusy: 'A switch is already running — wait for this one to load.',
         switchingSlow: 'Still loading.',
         switchingTimeout: function (name) { return 'The switch timed out: ' + name + ' may not have loaded (check the pet for a message).'; },
-        noModel: 'That is not a model this plugin loads (.vrm / .glb / .gltf only).',
-        dropBusy: 'An import is already running.',
+        noModel: 'That file is not a model this plugin can load (.vrm / .glb / .gltf only).',
+        dropBusy: 'An import is already running — wait for it to finish.',
+        noFetchUpload: 'This page cannot upload files.',
         removed: 'Removed the plugin\'s own copy.',
         removeFailed: 'Could not remove it: ',
-        creditTitle: 'Models this plugin ships',
+        creditTitle: 'Bundled models',
         creditName: function (title, file) { return title ? title + ' (' + file + ')' : file; },
         creditAuthor: function (author) { return 'Author: ' + author; },
-        creditLicense: function (license) { return 'Terms: ' + license; },
+        creditLicense: function (license) { return 'License: ' + license; },
         creditSource: function (source) { return 'Source: ' + source; },
       };
     }
-    return TEXT;
+    return TEXT.zh;
   }
 
   function element(doc, tag, className, value) {
@@ -133,7 +161,9 @@
    * @param {object} options
    *   document        the document to build in (defaults to the global one)
    *   mount           the element to fill — the component owns everything inside it
-   *   language        'zh' (default) or 'en'
+   *   language        'zh' (default) or 'en' — the language it is BUILT in; `api.setLanguage` changes it later
+   *                   without a rebuild, which is how a caller whose language comes from the settings store
+   *                   (the 切换模型 page) follows a change while the grid is on screen
    *   bridge          the launcher bridge, or null to force the browser path (defaults to
    *                   `globalThis.vrmpet3dDesktop`); a page with no bridge still gets a working picker
    *   fetchImpl       fetch override, for a probe
@@ -154,7 +184,16 @@
     var mount = settings.mount;
     if (!doc || !mount) throw new Error('createModelPicker needs a document and a mount element');
 
-    var text = resolveText(settings.language);
+    /**
+     * The language this picker draws in, and its table.
+     *
+     * Resolved ONCE here, from `options.language` — 'zh' unless the caller says 'en', which is the default this
+     * option has always had (the wizard mounts with 'zh'). A caller whose language can change while the picker is on
+     * screen calls {@link api.setLanguage} instead of rebuilding: the 切换模型 page is exactly that caller, because
+     * its language comes from the settings store it polls.
+     */
+    var language = settings.language === 'en' ? 'en' : 'zh';
+    var text = resolveText(language);
     var onSwitch = typeof settings.onSwitch === 'function' ? settings.onSwitch : function () {};
     var onStatus = typeof settings.onStatus === 'function' ? settings.onStatus : function () {};
     var doFetch = settings.fetchImpl || (typeof fetch === 'function' ? fetch.bind(globalThis) : null);
@@ -212,7 +251,7 @@
     input.hidden = true;
 
     var gridHead = element(doc, 'div', 'model-grid-head');
-    var gridLabel = element(doc, 'span', 'k', '现有模型');
+    var gridLabel = element(doc, 'span', 'k', text.gridLabel);
     var gridCount = element(doc, 'span', 'note model-grid-count');
     gridHead.appendChild(gridLabel);
     gridHead.appendChild(gridCount);
@@ -385,7 +424,7 @@
     }
 
     function requestJson(path, body) {
-      if (!doFetch) return Promise.reject(new Error('no fetch in this document'));
+      if (!doFetch) return Promise.reject(new Error(text.noFetchUpload));
       return doFetch(path, {
         method: 'POST',
         credentials: 'omit',
@@ -494,6 +533,32 @@
       });
     }
 
+    /**
+     * Draw everything again in the CURRENT `text` — the whole of a language change.
+     *
+     * Three static labels are written at construction (the drop zone's two lines and the grid's heading) and one
+     * more is stateful (the progress bar, whose two lines are set when a switch STARTS). Everything else already
+     * comes out of `render()`, so repainting the grid covers the tiles, the tags, the 使用中 badge, the count, the
+     * empty note and the credit lines — and the bar is rewritten here so a switch that is in flight says the same
+     * thing in the new language instead of freezing in the old one until it settles.
+     */
+    function relabel() {
+      dropTitle.textContent = text.dropTitle;
+      dropSub.textContent = text.dropSub;
+      gridLabel.textContent = text.gridLabel;
+      if (switching) {
+        progressText.textContent = text.switching(switching.name);
+        progressNote.textContent = switching.slow ? text.switchingSlow : '';
+        progress.setAttribute('aria-valuetext', text.switching(switching.name));
+        // And the CALLER's line, which is where the same sentence usually lives: without this the bar would say
+        // 「正在切换模型…」 while the status line above it stayed in the language the switch STARTED in. The
+        // component owns this text, so it is the component that says it again — through the same channel it was
+        // first said on.
+        onStatus(text.switching(switching.name));
+      }
+      render();
+    }
+
     /**
      * Write out 来源 and 作者 for every bundled model the host sent a credit for.
      *
@@ -621,7 +686,7 @@
         return Promise.resolve(null);
       }
       if (!doFetch) {
-        onStatus(text.importFailed + 'no fetch in this document', 'warn');
+        onStatus(text.noFetchUpload, 'warn');
         return Promise.resolve(null);
       }
       setBusy(true, text.importingFile(name));
@@ -690,7 +755,7 @@
     function pickNative() {
       var chooser = bridge && typeof bridge.pickModelFile === 'function' ? bridge.pickModelFile : null;
       if (!chooser) return false;
-      Promise.resolve(chooser()).then(function (chosen) { return chosen ? importPath(chosen) : null; });
+      Promise.resolve(chooser(language)).then(function (chosen) { return chosen ? importPath(chosen) : null; });
       return true;
     }
 
@@ -750,6 +815,30 @@
        * handler calls it — see `settleSwitch`.
        */
       setCurrent: function () { pendingId = null; render(); settleSwitch(); },
+      /**
+       * Draw in another language, WITHOUT being rebuilt.
+       *
+       * `options.language` is fixed at construction, and that is right for a wizard step whose language was settled
+       * before the step was reached. The 切换模型 page is the other case: its language comes from the settings store
+       * it polls, so it can change while the picker is on screen. Rebuilding would be the easy answer and the wrong
+       * one — it would throw away a switch's progress bar, its pending tile and the catalogue it already has, so a
+       * language change would cost a second round trip and lose the user's click. `relabel()` is what this changes:
+       * the same nodes, the same state, new words.
+       *
+       * A language this component does not know ('auto', undefined, a typo) is IGNORED rather than treated as
+       * Chinese: the picker keeps the table it has, so a caller that passes the store's raw preference through
+       * cannot flip a page to Chinese by accident.
+       *
+       * @returns {boolean} whether the picker redrew — false for "same language" and for "not a language I know"
+       */
+      setLanguage: function (next) {
+        var wanted = next === 'en' ? 'en' : (next === 'zh' ? 'zh' : null);
+        if (!wanted || wanted === language) return false;
+        language = wanted;
+        text = resolveText(language);
+        relabel();
+        return true;
+      },
       /** Adopt a catalog payload a caller already has (the guide's own GET, a probe). */
       apply: apply,
       /** Import a path (the launcher's dialog) or a File (a drop, a browser input). */
@@ -766,6 +855,7 @@
           }),
           total: models.length,
           imported: imported.length,
+          language: language,
           current: currentId(),
           busy: busy,
           switching: switching ? switching.id : null,

package/lib/picker-page.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>vrmpet3d · 切换模型</title>
+  <title data-i18n="title">vrmpet3d · 切换模型</title>
   <meta name="color-scheme" content="dark light">
   <!--
     切换模型 — the model picker's own page (`/vrmpet3d/picker`), opened from either pet's right-click menu.
@@ -21,15 +21,21 @@
   <link rel="stylesheet" href="/vrmpet3d/window/lib/pages.css">
 </head>
 <body data-page="picker">
+  <!--
+    The page's own five pieces of text carry `data-i18n` and keep the Chinese inline: `lib/picker-page.js`
+    resolves the language and calls `core.applyI18n`, and a page whose script never ran still reads in one
+    language rather than showing empty nodes. `html lang` is that same Chinese default, and the script rewrites it
+    once it knows better — it is NOT what the language is resolved from (see `core.browserLanguageHints`).
+  -->
   <header class="page-header">
-    <div class="eyebrow">VRMPET3D · MODELS</div>
-    <h1>切换模型</h1>
-    <div id="status" role="status" aria-live="polite">正在读取…</div>
+    <div class="eyebrow" data-i18n="eyebrow">VRMPET3D · MODELS</div>
+    <h1 data-i18n="heading">切换模型</h1>
+    <div id="status" role="status" aria-live="polite" data-i18n="statusLoading">正在读取…</div>
   </header>
 
   <main>
     <section class="settings-section" id="settings-0">
-      <h2>模型</h2>
+      <h2 data-i18n="sectionModels">模型</h2>
       <div class="card" id="picker-mount"></div>
     </section>
   </main>
@@ -40,20 +46,40 @@
   -->
   <script>
     (function () {
+      /**
+       * The watchdog's OWN words, in its own two languages, because it runs BEFORE core.js and can use neither
+       * `core.textFor` nor the settings store. `navigator.language` is the whole of its rule: the document's own
+       * `lang` is the Chinese default every page here ships, so reading it would only ever say "Chinese".
+       */
+      var WORDS = {
+        zh: {
+          pageError: '页面脚本出错：',
+          stuckMissing: '初始化卡住：model-picker.js 没有加载（检查 /vrmpet3d/window/lib/model-picker.js 是否 404）。',
+          stuckSlow: '初始化卡住：脚本已加载但没有完成初始化（看看窗口的控制台，或宿主是否提供 /vrmpet3d/models 与 /vrmpet3d/settings）。',
+        },
+        en: {
+          pageError: 'Script error: ',
+          stuckMissing: 'Stuck on startup: model-picker.js did not load — check whether /vrmpet3d/window/lib/model-picker.js is a 404.',
+          stuckSlow: 'Stuck on startup: the script loaded but never finished — check the window console, and whether the host serves /vrmpet3d/models and /vrmpet3d/settings.',
+        },
+      };
+      var language = /^(zh|cn|chinese)/i.test(navigator.language || '') ? 'zh' : 'en';
+      function t(key) { return WORDS[language][key]; }
       function show(message) {
         var status = document.getElementById("status");
         if (status) { status.textContent = message; status.className = "warn"; }
       }
       window.addEventListener("error", function (event) {
-        show("页面脚本出错：" + (event.message || event.type) + (event.filename ? " （" + event.filename + "）" : ""));
+        var where = event.filename ? (language === 'zh' ? ' （' + event.filename + '）' : ' (' + event.filename + ')') : '';
+        show(t('pageError') + (event.message || event.type) + where);
       }, true);
       window.setTimeout(function () {
         if (window.__VRMPET3D_PICKER_STATE__) return;
         if (!window.__VRMPET3D_MODEL_PICKER__) {
-          show("初始化卡住：model-picker.js 没有加载（检查 /vrmpet3d/window/lib/model-picker.js 是否 404）。");
+          show(t('stuckMissing'));
           return;
         }
-        show("初始化卡住：脚本已加载但没有完成初始化（看看窗口的控制台，或宿主是否提供 /vrmpet3d/models 与 /vrmpet3d/settings）。");
+        show(t('stuckSlow'));
       }, 2000);
     })();
   </script>

package/lib/picker-page.js

@@ -11,6 +11,12 @@
  * (`hasSnapshot` in `lib/config-page.js`): nothing is written before the first read, or a page that booted into
  * defaults would overwrite everything the user configured.
  *
+ * AND THE LANGUAGE IS THE SECOND THING THIS PAGE OWNS. The two settings pages pick theirs when they boot, and so
+ * does the guide; this page can be sitting open while the user changes 界面语言 in 通用设置, because the setting
+ * lives in the same store the page already polls. So every snapshot re-resolves it (`resolveLanguage`), the
+ * page's own lines are written in it (`t`), and the mounted component is RE-LABELLED rather than rebuilt — see
+ * `applyLanguage` for why that is not just an optimisation.
+ *
  * For the browser probe and the launcher's self-test: `window.__VRMPET3D_PICKER_STATE__`.
  */
 (function () {
@@ -19,6 +25,46 @@
   var core = globalThis.__VRMPET3D_CORE__;
   var pickerApi = globalThis.__VRMPET3D_MODEL_PICKER__;
 
+  /**
+   * This page's own words, in both languages — `{ zh, en }`, the shape `core.textFor` and `core.applyI18n` take.
+   *
+   * The first five are the ones the MARKUP also carries: `lib/picker-page.html` marks its title, eyebrow, heading,
+   * status placeholder and section heading with `data-i18n`, and keeps the Chinese inline, so a page whose script
+   * never ran still says something in one language rather than showing nothing. The rest exist only here, because
+   * they are the lines THIS SCRIPT writes (the six status/error lines), and there is no markup to fall back to.
+   *
+   * THE TWO HALVES MUST HOLD THE SAME KEYS: a key the English half lacks falls back to Chinese mid-page
+   * (`core.textFor`), which is the half-translated interface this table exists to prevent.
+   */
+  var TEXT = {
+    zh: {
+      title: 'vrmpet3d · 切换模型',
+      eyebrow: 'VRMPET3D · MODELS',
+      heading: '切换模型',
+      statusLoading: '正在读取…',
+      sectionModels: '模型',
+      reading: '正在读取模型列表…',
+      settingsRead: '已读取当前设置。',
+      noHostSync: '这个宿主没有提供设置接口，切换只在本页生效。',
+      noCoreSettings: '这个版本的 core 没有设置接口，页面只能展示默认值。',
+      missingPicker: '页面脚本缺失：model-picker.js 没有加载。',
+      missingMount: '页面结构缺失：找不到 #picker-mount。',
+    },
+    en: {
+      title: 'vrmpet3d · Switch model',
+      eyebrow: 'VRMPET3D · MODELS',
+      heading: 'Switch model',
+      statusLoading: 'Reading…',
+      sectionModels: 'Model',
+      reading: 'Reading the model list…',
+      settingsRead: 'Settings loaded.',
+      noHostSync: 'This host has no settings API, so a switch only affects this page.',
+      noCoreSettings: 'This build of core has no settings API, so the page can only show defaults.',
+      missingPicker: 'Page script missing: model-picker.js did not load.',
+      missingMount: 'Page markup missing: #picker-mount was not found.',
+    },
+  };
+
   /** The first host snapshot is the permission to write. */
   var hasSnapshot = false;
   var preferences = core ? core.cleanPreferences({}) : {};
@@ -26,14 +72,67 @@
   var picker = null;
   /** Which model a SURFACE reports it is showing (`snapshot.live`), which is what ends the progress bar. */
   var liveModel = null;
+  /**
+   * The language this page draws in — `'zh'` or `'en'`, never `'auto'` (see `resolveLanguage`).
+   *
+   * `null` until the first resolution, which is what makes the boot pass the one that fills the markup in.
+   */
+  var language = null;
 
   function el(id) { return document.getElementById(id); }
 
-  function setStatus(text, kind) {
+  /**
+   * The line on `#status` right now: `{key}` when it is one of THIS page's own, `{text}` when the picker or the
+   * bootstrap watchdog wrote it, and `null` before anything has been written.
+   *
+   * The distinction is what a language change needs. One of this page's lines can be said again in the new
+   * language because it is stored as a KEY; a finished sentence from the component cannot be re-derived, so it is
+   * left exactly as it is rather than replaced by a translation of the placeholder — which would read as "reading
+   * the model list" while a model is in fact still loading.
+   */
+  var statusLine = null;
+  /** What this page last painted, so a line written by somebody ELSE (the watchdog) can be told apart from it. */
+  var paintedStatus = null;
+
+  function paintStatus() {
     var node = el('status');
-    if (!node) return;
-    node.textContent = text || '';
-    node.className = kind === 'warn' ? 'warn' : '';
+    if (!node || !statusLine) return;
+    node.textContent = statusLine.key ? t(statusLine.key) : statusLine.text;
+    node.className = statusLine.kind === 'warn' ? 'warn' : '';
+    paintedStatus = node.textContent;
+  }
+
+  /** A line this page wrote, as the key it came from — so a later language change can write it again. */
+  function setStatusKey(key, kind) {
+    statusLine = { key: key, kind: kind };
+    paintStatus();
+  }
+
+  /** A finished line, from the picker's `onStatus`. */
+  function setStatus(message, kind) {
+    statusLine = { text: message || '', kind: kind };
+    paintStatus();
+  }
+
+  /** The markup's own placeholder — the one line in `#status` that a translation is allowed to replace. */
+  function isPlaceholder(text) {
+    return text === TEXT.zh.statusLoading || text === TEXT.en.statusLoading;
+  }
+
+  /**
+   * One of THIS page's own lines, in the language on screen.
+   *
+   * `core.textFor` when core is there — so the lookup rule (and the fallback to the other language for a gap) is
+   * the shared one rather than a second implementation of it — and the table itself when core is old enough not to
+   * have it. A key with no entry shows as the KEY rather than as a blank line, which is how a missing entry gets
+   * reported instead of silently disappearing.
+   */
+  function t(key) {
+    var words = core && typeof core.textFor === 'function'
+      ? core.textFor(TEXT, language)
+      : (language === 'en' ? TEXT.en : TEXT.zh);
+    var value = words[key];
+    return typeof value === 'string' ? value : key;
   }
 
   /**
@@ -57,10 +156,80 @@
     return typeof preferences.modelId === 'string' ? preferences.modelId : '';
   }
 
+  /**
+   * Which language this page draws in, from the USER's setting and this surface's own environment.
+   *
+   * `preferences.language` is the store's answer — `'auto' | 'zh' | 'en'` (`core.LANGUAGE_SETTINGS`), which
+   * `core.cleanPreferences` passes through — so a choice made in 通用设置, in the guide or by another window
+   * reaches this page on its next snapshot. `'auto'` falls to `core.browserLanguageHints()`, which asks the
+   * browser BEFORE the document's own `lang`: every page in this plugin ships `<html lang="zh">`, so a page that
+   * read its own markup first could never auto-detect English.
+   *
+   * A core too old to know about languages keeps this page's own shipped answer, `'zh'` — the value this page
+   * passed unconditionally before it could resolve one, so an old host degrades to the old behaviour rather than
+   * failing to boot.
+   */
+  function resolveLanguage() {
+    if (core && typeof core.resolveLanguage === 'function') {
+      var hints = typeof core.browserLanguageHints === 'function' ? core.browserLanguageHints() : null;
+      return core.resolveLanguage(preferences.language, hints);
+    }
+    return 'zh';
+  }
+
+  /**
+   * Put the resolved language everywhere it is needed: the marked-up text, `html lang`, this page's own lines
+   * (through `t` at the point of use) and the mounted component.
+   *
+   * The component is RE-LABELLED, not rebuilt, and that is a real distinction rather than tidiness: a rebuild
+   * throws away a switch's progress bar, the tile it is pending on and the catalogue the grid already has — and a
+   * language change is exactly when a switch may be in flight, because the user has just come back from 通用设置
+   * to look at the window. `setLanguage` is the component's documented path for this; a component old enough not
+   * to have it keeps the language it was built with rather than being destroyed, so a language change can never
+   * cost the user the click they just made.
+   *
+   * The bootstrap watchdog writes into `#status` too, and it is the FIRST script on the page — it reports a
+   * core.js that threw before this script ran. `core.applyI18n` fills every marked node including that one, so a
+   * line the watchdog has already written is put back; the placeholder the markup ships is the only text the
+   * translation is allowed to replace.
+   *
+   * @returns {boolean} whether the language changed — false on the 700 ms polls that change nothing
+   */
+  function applyLanguage() {
+    var next = resolveLanguage();
+    if (next === language) return false;
+    language = next;
+    /**
+     * What is on the status line right now, if this page did NOT put it there.
+     *
+     * The bootstrap watchdog is the first script on the page and it writes into `#status` itself — it reports a
+     * core.js that threw while this script was still loading. `core.applyI18n` fills every marked node, that one
+     * included, so a line written by somebody else is captured here and put back: the placeholder the markup ships
+     * is the only text a translation may replace.
+     */
+    var status = el('status');
+    var foreign = status && !isPlaceholder(status.textContent) && status.textContent !== paintedStatus
+      ? status.textContent
+      : null;
+    if (core && typeof core.applyI18n === 'function') core.applyI18n(document, TEXT, language);
+    if (foreign !== null) {
+      status.textContent = foreign;
+      status.className = 'warn';
+    } else {
+      // One of this page's own lines — or the placeholder, which `applyI18n` has just translated.
+      paintStatus();
+    }
+    // The document says which language it is in, which is what a screen reader, a spell checker and a hyphenator
+    // read it for — and it is NOT the hint this page resolves from (that one was read before this line).
+    if (document.documentElement) document.documentElement.lang = language;
+    if (picker && typeof picker.setLanguage === 'function') picker.setLanguage(language);
+    return true;
+  }
+
   function patchPreferences(patch) {
     Object.keys(patch).forEach(function (key) { preferences[key] = patch[key]; });
     if (!hasSnapshot || !hostSync || typeof hostSync.push !== 'function') {
-      setStatus('这个宿主没有提供设置接口，切换只在本页生效。', 'warn');
+      setStatusKey('noHostSync', 'warn');
       return;
     }
     hostSync.push({ preferences: patch });
@@ -79,7 +248,7 @@
 
   function watchSettings() {
     if (!core || typeof core.watchHostSettings !== 'function') {
-      setStatus('这个版本的 core 没有设置接口，页面只能展示默认值。', 'warn');
+      setStatusKey('noCoreSettings', 'warn');
       return;
     }
     hostSync = core.watchHostSettings({
@@ -96,6 +265,10 @@
       onSnapshot: function (snapshot) {
         preferences = core.cleanPreferences(snapshot.preferences || {});
         hasSnapshot = true;
+        // The store's 界面语言 may have moved while this window was open (another window, or the guide), so the
+        // language is re-resolved BEFORE the lines below are written: a status line written first would be the one
+        // thing left in the old language.
+        applyLanguage();
         // Which model a pet reports it is SHOWING: the progress bar waits for this, not merely for the write.
         liveModel = liveModelIdOf(snapshot);
         // The value that wins is the STORE's, so a switch made from another window repaints this grid — and
@@ -103,24 +276,31 @@
         // what asks whether an in-flight switch has finished.
         if (picker) picker.setCurrent();
         // A snapshot that COMPLETES a switch must not have its line overwritten by this one.
-        if (!(picker && picker.state().switching)) setStatus('已读取当前设置。');
+        if (!(picker && picker.state().switching)) setStatusKey('settingsRead');
       },
     }).start();
   }
 
   function boot() {
     var mount = el('picker-mount');
+    // The language FIRST, so that even the failure lines below are in the language the user asked for. The store
+    // has not answered yet, so this resolves `'auto'` from the browser; the first snapshot resolves it again and
+    // re-labels if the store says otherwise.
+    applyLanguage();
     if (!pickerApi || typeof pickerApi.createModelPicker !== 'function') {
-      setStatus('页面脚本缺失：model-picker.js 没有加载。', 'warn');
+      setStatusKey('missingPicker', 'warn');
       return;
     }
     if (!mount) {
-      setStatus('页面结构缺失：找不到 #picker-mount。', 'warn');
+      setStatusKey('missingMount', 'warn');
       return;
     }
     picker = pickerApi.createModelPicker({
       mount: mount,
-      language: 'zh',
+      // The RESOLVED language, not the store's preference: the component owns two tables and no opinion about
+      // 'auto' (see `resolveText` in lib/model-picker.js). A change after this point goes through `setLanguage`,
+      // which is what `applyLanguage` calls.
+      language: language,
       currentModelId: modelId,
       // The live report is what makes the bar about the LOAD rather than about the write. See `liveModelIdOf`.
       liveModelId: function () { return liveModel; },
@@ -128,7 +308,7 @@
       onStatus: setStatus,
     });
     watchSettings();
-    setStatus('正在读取模型列表…');
+    setStatusKey('reading');
     picker.refresh();
   }
 
@@ -139,6 +319,7 @@
     return {
       hasSnapshot: hasSnapshot,
       current: modelId(),
+      language: language,
       picker: picker ? picker.state() : null,
     };
   };