feat(i18n): add Loco package integration and Storybook live sync

.gitignore

@@ -21,4 +21,5 @@ packages/codify/
 #code-graph
 .adaptive-codegraph/
 .fastembed_cache/
-.vscode/
+.vscode/
+.playwright-mcp/

.storybook/main.ts

@@ -207,7 +207,13 @@ const config: StorybookConfig = {
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },
-  staticDirs: ['./public', { from: '../node_modules/@kerebron/wasm/assets', to: '/kerebron-wasm' }],
+  staticDirs: [
+    './public',
+    { from: '../node_modules/@kerebron/wasm/assets', to: '/kerebron-wasm' },
+    // Serve the exported Loco translation pack so the Loco runtime can load it
+    // in file (package) mode: Loco.init({ file: '/i18n/i18n-translations.json' })
+    { from: '../src/i18n', to: '/i18n' },
+  ],
   async viteFinal(config) {
     const optimizeDepNames = [
       ...datavisDependencyNames,

.storybook/manager.ts

@@ -437,6 +437,55 @@ addons.register('mieweb-brand-sync', (api) => {
   });
 });
 
+// Hide the locale switcher while Loco is disabled — switching languages has no
+// effect in that mode. The button is matched by the stable aria-label derived
+// from the `locale` globalType description in preview.tsx.
+const localeVisibilityStyleId = 'mieweb-loco-locale-visibility';
+
+function setLocaleSwitcherHidden(hidden: boolean) {
+  const existing = document.getElementById(localeVisibilityStyleId);
+  if (!hidden) {
+    existing?.remove();
+    return;
+  }
+  if (existing) return;
+  const style = document.createElement('style');
+  style.id = localeVisibilityStyleId;
+  style.textContent = `
+    [role="toolbar"] button[aria-label^="Locale used by i18n"] {
+      display: none !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+addons.register('mieweb-loco-locale-visibility', (api) => {
+  let previousLocoMode: unknown = api.getGlobals()?.locoMode;
+  setLocaleSwitcherHidden(previousLocoMode === 'disable');
+
+  const onGlobalsChanged = (globals?: Record<string, unknown>) => {
+    const locoMode = globals?.locoMode;
+    setLocaleSwitcherHidden(locoMode === 'disable');
+
+    // Changing the Loco mode resets the locale to English so every mode
+    // starts from the untranslated baseline.
+    if (previousLocoMode !== undefined && locoMode !== previousLocoMode && globals?.locale !== 'en') {
+      api.updateGlobals({ locale: 'en' });
+    }
+    previousLocoMode = locoMode;
+  };
+
+  // 'setGlobals' fires once when the preview boots with the initial globals
+  // (from the URL); 'globalsUpdated' fires on every toolbar change.
+  api.on('setGlobals', ({ globals }: { globals?: Record<string, unknown> }) => {
+    previousLocoMode = globals?.locoMode;
+    setLocaleSwitcherHidden(globals?.locoMode === 'disable');
+  });
+  api.on('globalsUpdated', ({ globals }) => {
+    onGlobalsChanged(globals);
+  });
+});
+
 // Redirect old/broken story bookmarks to the Introduction page
 addons.register('mieweb-404-redirect', (api) => {
   const FALLBACK_ID = 'introduction--docs';