i18n: multilingual mdbase writer (9 locales)

.github/workflows/ci.yml

@@ -30,6 +30,10 @@ jobs:
           node-version: 22
           cache: pnpm
       - run: pnpm install --frozen-lockfile
+      - name: Validate authored catalogues and generated JSON
+        run: |
+          pnpm i18n:check
+          git diff --exit-code -- apps/writer/src/i18n/locales
       - run: pnpm check
       # Demo is development/LAB-only, so verify the production build separately.
       - run: pnpm build
@@ -70,6 +74,7 @@ jobs:
           result=0
           pnpm --filter @mdbase-writer/app exec node scripts/browser-test.mjs || result=1
           pnpm --filter @mdbase-writer/app test:browser:reliability || result=1
+          pnpm --filter @mdbase-writer/app test:browser:i18n || result=1
           exit "$result"
       - name: Verify private feedback with demo data and intercepted delivery
         run: |

README.md

@@ -200,6 +200,21 @@ privately as described in the [security policy](SECURITY.md).
 For local setup, tests, deployment, and implementation details, see the
 [development guide](docs/development.md) and [architecture notes](docs/architecture.md).
 
+### Interface translations (integration branch)
+
+Writer shares the `@mdbase-dev/i18n` Lingui runtime and strict catalogue checks with the
+other mdbase apps. English loads synchronously; other interface languages are lazy chunks
+from Writer's own deployment. The browser language is the default; an explicit choice is
+remembered in this browser. This never changes manuscript text, frontmatter, citation
+language or exported prose.
+
+All eight target-language catalogues are merged and all nine locale controls are enabled
+on this branch. Strict completeness and app/library composition checks run in normal checks
+and builds. See [translation status and authoring](docs/translations.md).
+The kit and shared UI are temporarily vendored for coordinated development; replace both
+with their published npm versions at merge time. CI only validates local-agent-authored translations and never
+calls a translation service.
+
 ## License
 
 mdbase writer is available under the [MIT License](LICENSE). Bundled fonts, Typst packages, and

apps/writer/i18n-policy.json

@@ -0,0 +1,17 @@
+{
+  "allowIdentical": {
+    "de": ["GPQyjo","6stxj1","D2fBSU","WBbQ6j","YNmZG2","kjd02W","quZLv8","oRJEwT","oCl6qZ","YPtBzd","3c6Jwh","L0jxRL","x4F4rp","bvnb9m","ef0nW8","PKDyzC","4_lfk6","6y5Vqg","uBAxNB","kI1qVD","238qc6","yNCLLZ","rdU729","eavifN","yzF66j","6YtxFj","6Aih4U","D-NlUC","fUDM0u","ACjxWW","4RPJcT","nbrVo1"],
+    "fr": ["vZtY0S","GPQyjo","6stxj1","D2fBSU","WBbQ6j","YNmZG2","kjd02W","quZLv8","bvnb9m","PKDyzC","N8JYNj","f6e0Ry","nwJZJE","6y5Vqg","DoJzLz","mYGY3B","YUAoyO","kI1qVD","HhVDr2","_hpEcX","AnYKFm","1DBGsz","tdta9X","BhZ5PL","wdxz7K","sBJ5MF","9yoWSx","fUDM0u","ACjxWW","4RPJcT","1X0LyN"],
+    "es": ["GPQyjo","6stxj1","D2fBSU","WBbQ6j","YNmZG2","kjd02W","quZLv8","bvnb9m","ef0nW8","PKDyzC","uBAxNB","fUDM0u","ACjxWW","4RPJcT"],
+    "ja": ["GPQyjo","6stxj1","D2fBSU","WBbQ6j","YNmZG2","kjd02W","quZLv8","oRJEwT","oCl6qZ","YPtBzd","3c6Jwh","L0jxRL","x4F4rp","bvnb9m","ef0nW8","PKDyzC","4_lfk6"],
+    "ko": ["GPQyjo","6stxj1","D2fBSU","WBbQ6j","YNmZG2","kjd02W","quZLv8","oRJEwT","oCl6qZ","YPtBzd","3c6Jwh","L0jxRL","x4F4rp","bvnb9m","ef0nW8","PKDyzC","4_lfk6"],
+    "pt": ["vZtY0S","GPQyjo","6stxj1","D2fBSU","WBbQ6j","YNmZG2","kjd02W","quZLv8","oRJEwT","oCl6qZ","YPtBzd","3c6Jwh","L0jxRL","x4F4rp","bvnb9m","ef0nW8","PKDyzC","4_lfk6","uBAxNB","rdU729","eavifN","fUDM0u","ACjxWW"],
+    "ru": ["GPQyjo","6stxj1","D2fBSU","WBbQ6j","YNmZG2","kjd02W","quZLv8","oRJEwT","oCl6qZ","YPtBzd","3c6Jwh","L0jxRL","x4F4rp","bvnb9m","ef0nW8","PKDyzC","4_lfk6","4RPJcT"],
+    "zh": ["GPQyjo","6stxj1","D2fBSU","WBbQ6j","YNmZG2","kjd02W","quZLv8","oRJEwT","oCl6qZ","YPtBzd","3c6Jwh","L0jxRL","x4F4rp","bvnb9m","ef0nW8","PKDyzC","4_lfk6"]
+  },
+  "source": {
+    "include": ["src"],
+    "exclude": ["**/generated/**", "**/test/**"],
+    "brands": ["PDF", "Word", "Typst", "Pandoc", "{#fig-plan}"]
+  }
+}

apps/writer/lingui.config.ts

@@ -0,0 +1,6 @@
+import { i18nConfig } from "@mdbase-dev/i18n/config";
+
+export default i18nConfig({
+  include: ["<rootDir>/src"],
+  exclude: ["**/*.test.*", "**/test/**"],
+});

apps/writer/package.json

@@ -5,7 +5,11 @@
   "type": "module",
   "scripts": {
     "icons": "node scripts/write-pwa-icons.mjs",
-    "build": "pnpm manifest && pnpm manifest:validate && vite build",
+    "i18n:extract": "mdbase-i18n extract",
+    "i18n:compile": "mdbase-i18n compile",
+    "i18n:source": "mdbase-i18n source",
+    "i18n:check": "mdbase-i18n check --compose 'node_modules/@mdbase-dev/ui/dist/locales/{locale}/messages.json'",
+    "build": "pnpm i18n:check && pnpm manifest && pnpm manifest:validate && vite build",
     "build:lab": "MDBASE_WRITER_ORIGIN=https://lab.mdbase-writer.pages.dev VITE_MDBASE_ENV=lab pnpm build",
     "build:feedback-test": "VITE_WRITER_DEMO=1 MDBASE_WRITER_ORIGIN=https://lab.mdbase-writer.pages.dev VITE_MDBASE_ENV=lab VITE_MDBASE_FEEDBACK_URL=http://127.0.0.1:8892/v1/feedback pnpm build",
     "build:editing-test": "VITE_WRITER_DEMO=1 pnpm build",
@@ -14,6 +18,7 @@
     "manifest:validate": "node scripts/validate-manifest.mjs public/.well-known/mdbase-app.json",
     "preview": "vite preview --host 127.0.0.1",
     "test": "pnpm manifest && node --test scripts/*.test.mjs && vitest run",
+    "test:browser:i18n": "node scripts/i18n-browser-test.mjs",
     "test:browser": "node scripts/browser-test.mjs && node scripts/browser-reliability-test.mjs",
     "test:feedback": "node scripts/feedback-browser-test.mjs",
     "test:browser:reliability": "node scripts/browser-reliability-test.mjs",
@@ -35,10 +40,13 @@
     "@codemirror/view": "^6.43.8",
     "@lezer/highlight": "^1.2.3",
     "@lezer/markdown": "^1.4.3",
+    "@lingui/core": "6.9.0",
+    "@lingui/react": "6.9.0",
     "@mdbase-dev/connect": "file:../../vendor/connect-beta125-legacy-query-2a89e9ef.tgz",
     "@mdbase-dev/connect-protocol": "file:vendor/mdbase-dev-connect-protocol-0.1.0-beta.129-c280cd194ffd.tgz",
+    "@mdbase-dev/i18n": "file:../../vendor/mdbase-dev-i18n-0.1.0-beta.141-a36fa009.tgz",
     "@mdbase-dev/sdk": "file:../../vendor/sdk-eaa4e697-production-beta141.tgz",
-    "@mdbase-dev/ui": "file:../../vendor/mdbase-dev-ui-dev-9553ad66.tgz",
+    "@mdbase-dev/ui": "file:../../vendor/mdbase-dev-ui-0.1.0-beta.141-a36fa009.tgz",
     "@mdbase-writer/core": "workspace:*",
     "@myriaddreamin/typst-ts-renderer": "0.7.0",
     "@myriaddreamin/typst-ts-web-compiler": "0.7.0",
@@ -50,12 +58,16 @@
   },
   "devDependencies": {
     "@callumalpass/mdbase": "0.3.0-rc.5",
+    "@lingui/cli": "6.9.0",
+    "@lingui/format-po": "6.9.0",
+    "@lingui/vite-plugin": "6.9.0",
     "@mdbase-dev/connect-dev": "0.1.0-beta.125",
     "@mdbase-dev/connect-testing": "0.1.0-beta.125",
     "@testing-library/react": "16.3.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
+    "babel-plugin-macros": "3.1.0",
     "jsdom": "29.1.1",
     "playwright": "1.61.1",
     "vite": "^8.3.1",

apps/writer/scripts/i18n-browser-test.mjs

@@ -0,0 +1,102 @@
+import assert from "node:assert/strict";
+import { mkdir } from "node:fs/promises";
+import { chromium } from "playwright";
+
+// Disposable in-memory demo only. Block all non-local authority/compiler traffic.
+const base = process.env.BASE ?? "http://127.0.0.1:19400/";
+const origin = new URL(base).origin;
+assert.ok(["127.0.0.1", "localhost"].includes(new URL(base).hostname));
+await mkdir("out/i18n", { recursive: true });
+const browser = await chromium.launch({ headless: true });
+try {
+  const context = await browser.newContext({ viewport: { width: 1440, height: 960 }, locale: "en-US", recordVideo: { dir: "out/i18n/recordings", size: { width: 1440, height: 960 } } });
+  const page = await context.newPage();
+  const errors = [];
+  page.on("pageerror", error => errors.push(String(error)));
+  await page.route("**/*", route => new URL(route.request().url()).origin === origin ? route.continue() : route.abort());
+  await page.goto(new URL("?demo", base).href);
+  const picker = page.locator(".interface-language select:visible");
+  await picker.waitFor();
+  await page.locator(".manuscript-row").filter({ hasText: "Patient Observation" }).waitFor();
+  assert.equal(await page.locator("html").getAttribute("lang"), "en");
+
+  await picker.selectOption("ja");
+  await page.waitForFunction(() => document.documentElement.lang === "ja");
+  assert.equal(await page.evaluate(() => localStorage.getItem("mdbase-writer:interface-locale")), "ja");
+  await page.screenshot({ path: "out/i18n/japanese-home.png", fullPage: true });
+  await page.locator(".manuscript-row").filter({ hasText: "Patient Observation" }).click();
+  const editor = page.locator(".cm-content");
+  await editor.waitFor();
+  const manuscriptSource = () => page.evaluate(() => {
+    const workspace = window.writer.workspace;
+    return workspace.getSnapshot().records.get(workspace.main).snapshot.body;
+  });
+  const before = await manuscriptSource();
+  await editor.click();
+  await page.keyboard.press("Control+f");
+  await page.locator(".cm-search").waitFor();
+  await page.waitForFunction(() => document.querySelector('.cm-search input[name="search"]')?.getAttribute("placeholder") === "検索");
+  await page.screenshot({ path: "out/i18n/japanese-editor.png", fullPage: true });
+
+  await page.keyboard.press("Escape");
+  await page.keyboard.press("Control+,");
+  await page.locator(".settings-sheet").waitFor();
+  await picker.selectOption("de");
+  await page.waitForFunction(() => document.documentElement.lang === "de");
+  assert.equal(await manuscriptSource(), before, "language switching must not edit the manuscript");
+  await page.screenshot({ path: "out/i18n/german-settings.png", fullPage: true });
+  await page.reload();
+  await page.waitForFunction(() => document.documentElement.lang === "de");
+  await page.locator(".cm-content").waitFor();
+  await page.keyboard.press("Control+,");
+  await page.locator(".settings-sheet").waitFor();
+  assert.equal(await picker.inputValue(), "de");
+  await page.setViewportSize({ width: 390, height: 844 });
+  await picker.scrollIntoViewIfNeeded();
+  await page.screenshot({ path: "out/i18n/narrow-language-control.png", fullPage: true });
+  const bounds = await picker.boundingBox();
+  assert.ok(bounds && bounds.x >= 0 && bounds.x + bounds.width <= 390 && bounds.y >= 0 && bounds.y + bounds.height <= 844, "language setting remains reachable on a narrow viewport");
+  // Chinese is an authored product catalogue, not just a translated editor phrase set.
+  await picker.selectOption("zh");
+  await page.waitForFunction(() => document.documentElement.lang === "zh");
+  assert.match(await picker.getAttribute("aria-label"), /[\u3400-\u9fff]/);
+  assert.equal(await manuscriptSource(), before);
+  await page.screenshot({ path: "out/i18n/chinese-settings-narrow.png", fullPage: true });
+  // Menu descriptors must not cache labels from the previous interface language.
+  await page.keyboard.press("Escape");
+  await editor.click();
+  await page.keyboard.press("Control+End");
+  await page.keyboard.type("\n/");
+  await page.locator(".cm-tooltip-autocomplete").waitFor();
+  const insertLabels = await page.locator(".cm-tooltip-autocomplete li").allTextContents();
+  assert.ok(insertLabels.some(label => label.includes("引文")), "slash commands update after a locale switch");
+  await page.keyboard.press("Escape");
+  await page.keyboard.press("Backspace");
+  await page.keyboard.press("Backspace");
+  assert.equal(await manuscriptSource(), before, "the test restores its disposable slash-menu probe");
+  assert.deepEqual(errors, []);
+  await context.close();
+
+  // A fresh context avoids an already cached target import.
+  const failure = await browser.newContext({ locale: "en-US" });
+  const failedPage = await failure.newPage();
+  await failedPage.route("**/*", route => {
+    const url = new URL(route.request().url());
+    if (url.origin !== origin || /\/locales\/de\/messages\.json/.test(url.pathname)) return route.abort();
+    return route.continue();
+  });
+  await failedPage.goto(new URL("?demo", base).href);
+  const failedPicker = failedPage.locator(".interface-language select");
+  await failedPicker.waitFor();
+  await failedPicker.selectOption("de");
+  await failedPage.locator(".interface-language-error").waitFor();
+  assert.equal(await failedPage.locator("html").getAttribute("lang"), "en");
+  assert.notEqual(await failedPage.evaluate(() => localStorage.getItem("mdbase-writer:interface-locale")), "de");
+  await failedPicker.selectOption("ja");
+  await failedPage.waitForFunction(() => document.documentElement.lang === "ja");
+  assert.equal(await failedPage.locator(".interface-language-error").count(), 0, "a successful retry clears the prior error");
+  await failure.close();
+  console.log("i18n browser: synchronous English, selection/persistence, Japanese CodeMirror, unchanged manuscript, narrow picker, authored Chinese settings and chunk-failure retention passed. Authored Japanese and German catalogues activated; screenshots captured for wide/narrow layout review.");
+} finally {
+  await browser.close();
+}

apps/writer/scripts/i18n-cli.test.mjs

@@ -0,0 +1,9 @@
+import assert from "node:assert/strict";
+import { spawnSync } from "node:child_process";
+import { test } from "node:test";
+
+test("the packed i18n CLI executes and rejects invalid commands rather than silently succeeding", () => {
+  const result = spawnSync("pnpm", ["exec", "mdbase-i18n", "definitely-not-a-command"], { encoding: "utf8" });
+  assert.equal(result.status, 1);
+  assert.match(result.stderr, /Usage: mdbase-i18n/);
+});

apps/writer/src/App.tsx

@@ -1,8 +1,11 @@
+import { t } from "@lingui/core/macro";
+import { useLingui } from "@lingui/react";
 import { lazy, Suspense, useEffect, useMemo, useState } from "react";
 import { AppSwitcher } from "@mdbase-dev/ui/app-switcher";
 import { FeedbackButton } from "@mdbase-dev/ui/feedback";
 import { loadThemePreference, saveThemePreference, type ThemePreference } from "@mdbase-dev/ui/theme";
 import { ThemeSelect } from "@mdbase-dev/ui/theme-select";
+import { InterfaceLanguage } from "./i18n/provider.js";
 import { OpeningScreen } from "@mdbase-dev/ui/screens";
 import { appUrls } from "./apps.js";
 import { ThemeChoice, TopbarSlot } from "./ui/topbar.js";
@@ -12,18 +15,21 @@ import { SdkWriterRoot, type SdkWriterRootProps } from "./ui/SdkWriterRoot.js";
 // Production keeps its existing default; switching/bootstrap belongs to owner GO.
 const LegacyApp = lazy(async () => ({ default: (await import("./LegacyApp.js")).LegacyApp }));
 export function App(props: Partial<SdkWriterRootProps> = {}) {
+  useLingui();
   return props.sdk ? <NativeApp {...props} sdk={props.sdk} /> :
-    <Suspense fallback={<OpeningScreen app="writer" title="Opening mdbase writer" />}><LegacyApp /></Suspense>;
+    <Suspense fallback={<OpeningScreen app="writer" title={t`Opening mdbase writer`} />}><LegacyApp /></Suspense>;
 }
 function NativeApp(props: SdkWriterRootProps) {
+  useLingui();
   const [theme, setTheme] = useState<ThemePreference>(() => loadThemePreference());
   const [slot, setSlot] = useState<HTMLElement | null>(null);
   useEffect(() => saveThemePreference(theme), [theme]);
   const themeChoice = useMemo(() => ({ theme, setTheme }), [theme]);
   return <ThemeChoice.Provider value={themeChoice}><TopbarSlot.Provider value={slot}>
     <div className="app"><header className="topbar">
       <AppSwitcher current="writer" urls={appUrls} /><div className="topbar-slot" ref={setSlot} />
-      <ThemeSelect className="topbar-theme" value={theme} onChange={setTheme} /><FeedbackButton />
+      <InterfaceLanguage />
+            <ThemeSelect className="topbar-theme" value={theme} onChange={setTheme} /><FeedbackButton />
     </header><SdkWriterRoot {...props} /></div>
   </TopbarSlot.Provider></ThemeChoice.Provider>;
 }