This PR introduces native Arabic (ar) language support to the website.

build/check-bundle-size.ts

@@ -146,7 +146,14 @@ const BUDGET_BYTES: Record<string, number> = {
   // scripts/sync-supported-devices.mjs), plus the hw.* and
   // nav.hardwareTest strings in all ten locale tables. Measured aggregate
   // is 1,748.7 kB, leaving ~31 kB of headroom.
-  ".js": 1_780_000,
+  // Raised to 1,845 kB for the Arabic (ar) interface locale: i18n-ar.ts is a
+  // full native translation of all ~1,050 keys and ships as its own lazy
+  // chunk (i18n-ar-*.js, ~69 kB, loaded only when Arabic is selected) — the
+  // initial (English) bundle is untouched. This is the same lazy-chunk pattern
+  // as the pt/es/fr/de/zh/ja/ko/ru/vi locales above, and the aggregate counts
+  // it only because the check sums every emitted chunk. Measured aggregate is
+  // 1,817.7 kB, leaving ~27 kB of headroom.
+  ".js": 1_845_000,
 };
 
 const ASSETS = join("dist", "assets");

src/app/App.tsx

@@ -67,12 +67,18 @@ export function App(): ReactNode {
         ko: "ko",
         ru: "ru",
         vi: "vi",
+        ar: "ar",
         en: "en",
       };
       const nextLang = htmlLang[locale] ?? "en";
       if (document.documentElement.lang !== nextLang) {
         document.documentElement.lang = nextLang;
       }
+      // Arabic reads right-to-left; every other locale is left-to-right.
+      const nextDir = locale === "ar" ? "rtl" : "ltr";
+      if (document.documentElement.dir !== nextDir) {
+        document.documentElement.dir = nextDir;
+      }
     } catch {
       /* non-DOM environment (tests) */
     }

src/i18n-de.ts

@@ -165,6 +165,7 @@ export const de: Record<I18nKey, string> = {
   "set.korean": "한국어",
   "set.russian": "Русский",
   "set.vietnamese": "Tiếng Việt",
+  "set.arabic" : "العربيّة",
   "set.motion": "BEWEGUNG",
   "set.animations": "Animationen",
   "set.animationsBody": "Aktiviert Oberflächenübergänge und animierte Zustandsänderungen.",

src/i18n-es.ts

@@ -165,6 +165,7 @@ export const es: Record<I18nKey, string> = {
   "set.korean": "한국어",
   "set.russian": "Русский",
   "set.vietnamese": "Tiếng Việt",
+  "set.arabic" : "العربيّة",
   "set.motion": "MOVIMIENTO",
   "set.animations": "Animaciones",
   "set.animationsBody": "Activa las transiciones de la interfaz y los cambios de estado animados.",

src/i18n-fr.ts

@@ -165,6 +165,7 @@ export const fr: Record<I18nKey, string> = {
   "set.korean": "한국어",
   "set.russian": "Русский",
   "set.vietnamese": "Tiếng Việt",
+  "set.arabic" : "العربيّة",
   "set.motion": "MOUVEMENT",
   "set.animations": "Animations",
   "set.animationsBody": "Active les transitions de l'interface et les changements d'état animés.",

src/i18n-ja.ts

@@ -165,6 +165,7 @@ export const ja: Record<I18nKey, string> = {
   "set.korean": "한국어",
   "set.russian": "Русский",
   "set.vietnamese": "Tiếng Việt",
+  "set.arabic" : "العربيّة",
   "set.motion": "モーション",
   "set.animations": "アニメーション",
   "set.animationsBody": "インターフェースの遷移とアニメーション付き状態変化を有効にします。",

src/i18n-ko.ts

@@ -165,6 +165,7 @@ export const ko: Record<I18nKey, string> = {
   "set.korean": "한국어",
   "set.russian": "Русский",
   "set.vietnamese": "Tiếng Việt",
+  "set.arabic" : "العربيّة",
   "set.motion": "모션",
   "set.animations": "애니메이션",
   "set.animationsBody": "인터페이스 전환 효과와 애니메이션 상태 변화를 활성화합니다.",

src/i18n-pt.ts

@@ -165,6 +165,7 @@ export const pt: Record<I18nKey, string> = {
   "set.korean": "한국어",
   "set.russian": "Русский",
   "set.vietnamese": "Tiếng Việt",
+  "set.arabic" : "العربيّة",
   "set.motion": "MOVIMENTO",
   "set.animations": "Animações",
   "set.animationsBody": "Ativa transições da interface e mudanças animadas de estado.",

src/i18n-ru.ts

@@ -164,6 +164,7 @@ export const ru: Record<I18nKey, string> = {
   "set.japanese": "日本語",
   "set.korean": "한국어",
   "set.vietnamese": "Tiếng Việt",
+  "set.arabic" : "العربيّة",
   "set.motion": "АНИМАЦИЯ",
   "set.animations": "Анимации",
   "set.animationsBody": "Включить переходы интерфейса и анимацию смены состояний.",

src/i18n-vi.ts

@@ -103,6 +103,7 @@ export const vi: Record<I18nKey, string> = {
   "set.korean": "한국어",
   "set.russian": "Русский",
   "set.vietnamese": "Tiếng Việt",
+  "set.arabic" : "العربيّة",
   "set.motion": "CHUYỂN ĐỘNG",
   "set.animations": "Hiệu ứng chuyển động",
   "set.animationsBody": "Bật hiệu ứng chuyển giao diện và thay đổi trạng thái có chuyển động.",

src/i18n-zh.ts

@@ -165,6 +165,7 @@ export const zh: Record<I18nKey, string> = {
   "set.korean": "한국어",
   "set.russian": "Русский",
   "set.vietnamese": "Tiếng Việt",
+  "set.arabic" : "العربيّة",
   "set.motion": "动效",
   "set.animations": "动画",
   "set.animationsBody": "启用界面过渡效果和动态状态变化。",

src/i18n.ts

@@ -168,6 +168,7 @@ const en = {
   "set.korean": "한국어",
   "set.russian": "Русский",
   "set.vietnamese": "Tiếng Việt",
+  "set.arabic" : "العربيّة",
   "set.motion": "MOTION",
   "set.animations": "Animations",
   "set.animationsBody": "Enable interface transitions and animated state changes.",
@@ -1074,6 +1075,7 @@ export const LOCALE_NAME_KEYS: ReadonlyArray<[InterfaceLocale, I18nKey]> = [
   ["ko", "set.korean"],
   ["ru", "set.russian"],
   ["vi", "set.vietnamese"],
+  ["ar", "set.arabic"],
 ];
 
 /** Non-English tables load on demand so the initial bundle ships English
@@ -1096,6 +1098,7 @@ const LOCALE_LOADERS: Record<Exclude<InterfaceLocale, "en">, () => Promise<Local
   ko: () => import("./i18n-ko.ts").then((m) => m.ko),
   ru: () => import("./i18n-ru.ts").then((m) => m.ru),
   vi: () => import("./i18n-vi.ts").then((m) => m.vi),
+  ar: () => import("./i18n-ar.ts").then((m) => m.ar),
 };
 
 export function ensureLocale(locale: InterfaceLocale): Promise<void> {

src/interface-preferences.ts

@@ -13,7 +13,7 @@ export type InterfaceTheme =
   | "Light";
 export type InterfaceColorMode = "Light" | "Dark" | "System";
 export type InterfaceLocale =
-  "en" | "pt" | "es" | "fr" | "de" | "zh" | "ja" | "ko" | "ru" | "vi";
+   "en" | "pt" | "es" | "fr" | "de" | "zh" | "ja" | "ko" | "ru" | "vi" | "ar";
 
 /** Every supported locale, in picker order. Each entry's `match` decides
     which `navigator.language` prefixes resolve to it on first run — checked
@@ -29,6 +29,7 @@ export const LOCALES: ReadonlyArray<{ code: InterfaceLocale; match: readonly str
   { code: "ru", match: ["ru"] },
   { code: "vi", match: ["vi"] },
   { code: "en", match: ["en"] },
+  { code: "ar", match: ["ar"] },
 ];
 
 export interface InterfacePreferences {