i18n: translate the application views with t() as they render

Every data-i18n, data-i18n-title, data-i18n-aria-label and
data-i18n-placeholder marker in the Vue templates becomes a t() call with
the key the boot pass used to look up, contexts included. The three labels
the shell rewrote at boot (Visual Presets, Location and the standby
description) render through t() too, and that rewrite is gone. With the
locale in vue-i18n, view text now follows a locale change, and markup
under v-if or v-for no longer comes back in English when it re-renders.

Rendered text and attributes are unchanged in every locale. The boot pass
still translates static page markup such as the loading screen and a host's
own markup, and npm run i18n rejects data-i18n* in a Vue template.

docs/I18N.md

@@ -31,13 +31,23 @@ Vue views call the same `t()` and `tn()`. The page's vue-i18n instance (`src/ui/
 
 ## Markup
 
+Vue views translate in the template, so their text renders in the active locale:
+
+```vue
+<span>{{ t('Normal') }}</span>
+<button :title="t('Pin visual presets')">…</button>
+<option value="all">{{ t('All', { context: 'radio tag' }) }}</option>
+```
+
+Static page markup that no view renders (the loading screen in `index.html`, a host's own markup) opts in with attributes instead, and `npm run i18n` rejects them in a Vue template:
+
 ```html
 <span data-i18n>Normal</span>
 <button title="Pin visual presets" data-i18n-title>…</button>
 <input placeholder="Search any location..." data-i18n-placeholder />
 ```
 
-`data-i18n` replaces the element's text, so put it on the element that directly holds the text, never on a parent with child elements. `data-i18n-title`, `data-i18n-aria-label` and `data-i18n-placeholder` translate that attribute. `data-i18n-context="radio tag"` gives the element's text a context, the catalog entry `radio tag|All`, as `t('All', { context: 'radio tag' })` does in code. Markup is translated once at boot, and switching language reloads the page. A module that holds work a reload would lose (an unsaved edit, an open session) registers it with `registerUnsavedWork(() => busy ? msg('unsaved …') : null)` from `src/i18n/index.js`, and the language picker asks before reloading.
+`data-i18n` replaces the element's text, so put it on the element that directly holds the text, never on a parent with child elements. `data-i18n-title`, `data-i18n-aria-label` and `data-i18n-placeholder` translate that attribute. `data-i18n-context="radio tag"` gives the element's text a context, the catalog entry `radio tag|All`, as `t('All', { context: 'radio tag' })` does in code. Attribute markup is translated once at boot. Switching language still reloads the page: views would follow a new locale, but much of their text is published already translated by code that does not. A module that holds work a reload would lose (an unsaved edit, an open session) registers it with `registerUnsavedWork(() => busy ? msg('unsaved …') : null)` from `src/i18n/index.js`, and the language picker asks before reloading.
 
 ## Rules
 
@@ -68,16 +78,16 @@ An empty translation is reported, and so is one left as the English, plural form
 
 `npm run i18n` and `npm test` fail on UI text that is not marked:
 
-- **Markup:** element text without `data-i18n`, and `title`, `aria-label` or `placeholder` without the matching `data-i18n-*`.
+- **Markup:** element text without `data-i18n`, and `title`, `aria-label` or `placeholder` without the matching `data-i18n-*`. In a Vue template, static text or a static `title`, `aria-label` or `placeholder` (rather than `t()`), and any `data-i18n*` attribute.
 - **Code:** string literals that reach the page without `t()`, `tn()` or `msg()`: assigned to `textContent`, `title` and the like; passed to `setAttribute('title' | 'aria-label' | …)`, `createTextNode`, `showToast` and other notice helpers; assigned to a layer's `error`, `lastError`, `loadingLabel`, `statusMessage` or `status` (a plain `error = …` too); or kept in `label:`, `title:`, `status:` and similar properties. Not reported: declarations (`let status = …`), default values, ternary branches and lower-case codes (`'auth-failed'`). The full list is `JS_SINKS` in `scripts/i18n.mjs`.
 
 Fix it by marking the text. When the text must stay as it is, say so where it lives:
 
-| Case                                                                        | How                                                                      |
-| --------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| Codes, units, product names in markup (`0.9 dB`, `ADS-B · 1090`, `OpenSky`) | `translate="no"` on the element; it covers everything inside, as in HTML |
-| Markup whose text code sets through `t()` (a status that starts as `OFF`)   | `data-i18n-runtime` on the element                                       |
-| A literal in code that is not UI copy (a product name, sample data)         | `// i18n-ignore: <reason>` on the line or the line above                 |
+| Case                                                                           | How                                                                      |
+| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------ |
+| Codes, units, product names in markup (`0.9 dB`, `ADS-B · 1090`, `OpenSky`)    | `translate="no"` on the element; it covers everything inside, as in HTML |
+| Page markup whose text code sets through `t()` (a status that starts as `OFF`) | `data-i18n-runtime` on the element (not in a Vue template)               |
+| A literal in code that is not UI copy (a product name, sample data)            | `// i18n-ignore: <reason>` on the line or the line above                 |
 
 Icons (`aria-hidden="true"`, Material Symbols), comments, CSS values and lowercase identifiers are skipped automatically, and so is `src/tools/`, whose text is written for AI clients rather than the page.
 

docs/VUE-MIGRATION.md

@@ -153,10 +153,9 @@ a feature supplying only its accent.
    Next each view takes over its wiring: markup an owner builds with
    `createElement` becomes component markup that renders from a Pinia store
    the owner publishes to, and user actions come back to the owner through
-   the store, so the owner keeps every decision. Static markup that the
-   translation pass rewrites (`data-i18n*`) stays outside `v-if` and
-   `v-for`, because re-rendering it would bring back the English; component
-   text uses `t()` instead. Shared builders become components first and
+   the store, so the owner keeps every decision. Component text uses
+   `t()`, which follows the locale as the view renders; the views carry no
+   `data-i18n*` markers, which `npm run i18n` rejects in a template. Shared builders become components first and
    keep their imperative entry points until their owners are components:
    the rail cards, card blocks and timeline (`src/ui/rail/`) render through
    Vue's synchronous `render()` behind `createRailCards()`,
@@ -344,8 +343,10 @@ a feature supplying only its accent.
    now requires the pattern for new UI. The page-level markup tests read
    `renderApplicationHtml()`, the real views rendered on the server, and new
    tests mount components; three tests still read a `.vue` file's source
-   (`cyberTheme`, `panelStorageDocs`, `geoFileImport`). The attribute translation pass goes with the move to
-   vue-i18n. An explicit API for hosts to register panels and rail items is
+   (`cyberTheme`, `panelStorageDocs`, `geoFileImport`). The views translate with `t()`
+   while rendering, and vue-i18n holds the locale they read; the attribute
+   translation pass is left for static page markup (the loading screen and a
+   host's own markup). An explicit API for hosts to register panels and rail items is
    deferred until a host adds one: no host does today (the hosted
    application's account interface is its own markup), and the first such
    panel, the hosted timeline, will shape it.