fix(web): RTL prose mono flow, structural catalog guard, detection hardening

Author: stultusmundi

clients/web/src/components/Header.tsx

@@ -1,8 +1,8 @@
 import type { Route } from '../hooks/useRoute';
 import type { ThemeMode } from '../hooks/useTheme';
 import { useI18n } from '../hooks/useLocale';
-import { LOCALE_NAMES, SUPPORTED_LOCALES } from '../i18n';
-import type { Locale, MessageKey } from '../i18n';
+import { isLocale, LOCALE_NAMES, SUPPORTED_LOCALES } from '../i18n';
+import type { MessageKey } from '../i18n';
 import { PoweredByFlux } from './PoweredByFlux';
 
 interface HeaderProps {
@@ -82,7 +82,9 @@ export function Header({ route, onNavigate, themeMode, onToggleTheme }: HeaderPr
           <select
             className="lang-select"
             value={locale}
-            onChange={(e) => setLocale(e.target.value as Locale)}
+            onChange={(e) => {
+              if (isLocale(e.target.value)) setLocale(e.target.value);
+            }}
             aria-label={t('header_language_label')}
           >
             {SUPPORTED_LOCALES.map((l) => (

clients/web/src/hooks/useLocale.tsx

@@ -24,7 +24,9 @@ function initialLocaleFor(): Locale {
   } catch {
     // Ignore storage failures (private mode).
   }
-  return detectLocale(navigator.languages ?? [navigator.language]);
+  return detectLocale(
+    (navigator.languages ?? [navigator.language]).filter((l): l is string => typeof l === 'string'),
+  );
 }
 
 /**

clients/web/src/i18n/catalogs.test.ts

@@ -83,3 +83,38 @@ describe('no untranslated stubs', () => {
     });
   }
 });
+
+/** Multiset of tag names (e.g. <b>, <em>) referenced across a message's text. */
+function tagCounts(msg: Message): Record<string, number> {
+  const text = typeof msg === 'string' ? msg : Object.values(msg).join(' ');
+  const counts: Record<string, number> = {};
+  for (const m of text.matchAll(/<(\w+)[\s/>]/g)) {
+    counts[m[1]!] = (counts[m[1]!] ?? 0) + 1;
+  }
+  return counts;
+}
+
+/** Set of {placeholder} names referenced across a message's text. */
+function paramNames(msg: Message): Set<string> {
+  const text = typeof msg === 'string' ? msg : Object.values(msg).join(' ');
+  const names = new Set<string>();
+  for (const m of text.matchAll(/\{(\w+)\}/g)) {
+    names.add(m[1]!);
+  }
+  return names;
+}
+
+describe('structural parity with en', () => {
+  for (const locale of SUPPORTED_LOCALES) {
+    if (locale === 'en') continue;
+    it(`${locale}: tags and params match en per key`, () => {
+      const catalog = ALL_CATALOGS[locale];
+      for (const key of Object.keys(en) as (keyof typeof en)[]) {
+        expect(tagCounts(catalog[key]), `${locale}.${key} tag mismatch`).toEqual(tagCounts(en[key]));
+        expect([...paramNames(catalog[key])].sort(), `${locale}.${key} param mismatch`).toEqual(
+          [...paramNames(en[key])].sort(),
+        );
+      }
+    });
+  }
+});

clients/web/src/styles.css

@@ -1142,6 +1142,18 @@ footer .wrap {
   direction: ltr;
   unicode-bidi: isolate;
 }
+/* …but these carry translated prose that merely uses mono typography —
+   let them flow RTL; plaintext keeps embedded LTR fragments (MTU 1420,
+   live/bundled) legible. */
+[dir='rtl'] footer .mono,
+[dir='rtl'] .qr-cap.mono,
+[dir='rtl'] .mh-style.mono,
+[dir='rtl'] .mh-conf-tag.mono,
+[dir='rtl'] .src-pill,
+[dir='rtl'] .mh-route.mono {
+  direction: rtl;
+  unicode-bidi: plaintext;
+}
 /* Decorative arrows point "forward"; mirror them when the flow mirrors. */
 [dir='rtl'] .mh-arrow,
 [dir='rtl'] .mh-route-arrow {