feat(i18n): register 19 locales and flip document dir for RTL (ar, ur)

src/lib/i18n/index.svelte.ts

@@ -7,12 +7,61 @@
 // it to DICTS + LOCALES below. Translating that one file is the whole job.
 
 import en from "./en.json";
+import de from "./de.json";
+import esES from "./es-ES.json";
+import esMX from "./es-MX.json";
+import frFR from "./fr-FR.json";
+import frCA from "./fr-CA.json";
+import ptPT from "./pt-PT.json";
+import ptBR from "./pt-BR.json";
+import ru from "./ru.json";
+import sv from "./sv.json";
+import nb from "./nb.json";
+import fi from "./fi.json";
+import zhCN from "./zh-CN.json";
+import ko from "./ko.json";
+import hi from "./hi.json";
+import bn from "./bn.json";
+import ta from "./ta.json";
+import si from "./si.json";
+import ar from "./ar.json";
+import ur from "./ur.json";
 
 type Dict = Record<string, string>;
 
 // Register languages here. en is the source-of-truth key set + fallback.
-const DICTS: Record<string, Dict> = { en };
-export const LOCALES: { code: string; label: string }[] = [{ code: "en", label: "English" }];
+const DICTS: Record<string, Dict> = {
+  en, de, "es-ES": esES, "es-MX": esMX, "fr-FR": frFR, "fr-CA": frCA,
+  "pt-PT": ptPT, "pt-BR": ptBR, ru, sv, nb, fi, "zh-CN": zhCN, ko,
+  hi, bn, ta, si, ar, ur,
+};
+
+// Right-to-left scripts; used to flip document direction on locale change.
+const RTL = new Set(["ar", "ur"]);
+
+// `label` is the language's endonym so users find their own language in the list.
+export const LOCALES: { code: string; label: string }[] = [
+  { code: "en", label: "English" },
+  { code: "ar", label: "العربية" },
+  { code: "bn", label: "বাংলা" },
+  { code: "de", label: "Deutsch" },
+  { code: "es-ES", label: "Español (España)" },
+  { code: "es-MX", label: "Español (México)" },
+  { code: "fi", label: "Suomi" },
+  { code: "fr-FR", label: "Français (France)" },
+  { code: "fr-CA", label: "Français (Canada)" },
+  { code: "hi", label: "हिन्दी" },
+  { code: "ko", label: "한국어" },
+  { code: "nb", label: "Norsk bokmål" },
+  { code: "pt-BR", label: "Português (Brasil)" },
+  { code: "pt-PT", label: "Português (Portugal)" },
+  { code: "ru", label: "Русский" },
+  { code: "si", label: "සිංහල" },
+  { code: "sv", label: "Svenska" },
+  { code: "ta", label: "தமிழ்" },
+  { code: "ur", label: "اردو" },
+  { code: "zh-CN", label: "中文（简体）" },
+];
 
 const KEY = "wa-locale-v1";
 
@@ -26,12 +75,25 @@ function load(): string {
   return "en";
 }
 
+// Flip the document's text direction so RTL locales (Arabic, Urdu) lay out
+// correctly. Safe outside a browser (SSR/tests): guarded by `document`.
+function applyDir(code: string) {
+  if (typeof document === "undefined") return;
+  document.documentElement.dir = RTL.has(code) ? "rtl" : "ltr";
+  document.documentElement.lang = code;
+}
+
 class I18n {
   locale = $state(load());
 
+  constructor() {
+    applyDir(this.locale);
+  }
+
   setLocale(code: string) {
     if (!(code in DICTS)) return;
     this.locale = code;
+    applyDir(code);
     try {
       localStorage.setItem(KEY, code);
     } catch {