feat: add multi-language support for 20 locales

Add complete i18n infrastructure with 21 supported languages:
English, Simplified Chinese, Traditional Chinese, Japanese, Korean,
Spanish, French, Italian, Brazilian Portuguese, German, Dutch, Swedish,
Russian, Polish, Ukrainian, Arabic (RTL), Turkish, Hindi, Vietnamese,
Indonesian, and Thai.

- I18nProvider context with three-tier locale detection
  (user preference > navigator.languages > instance default > English)
- ~1500 translation keys per locale with TypeScript-enforced completeness
- Dynamic code-splitting: only the active locale is loaded at runtime
- Language selectors in footer, login page, settings, and mobile sidebar
- Arabic RTL support with CSS logical properties across all components
- Tool names, descriptions, and categories translated via i18n helpers
- Public API endpoint GET /api/v1/config/locale for instance default
- Multi-script font stack (CJK, Arabic, Devanagari, Thai, Cyrillic)
- format() and plural() helpers for interpolation and pluralization
- API error translation mapping (translateApiError)
- 36 Playwright e2e tests verifying all 21 locales load correctly
- 25 unit tests for format, plural, locale detection, and completeness
- Updated translations.md docs and CLAUDE.md conventions

apps/web/src/components/tools/erase-object-settings.tsx

@@ -1,7 +1,9 @@
 import { Download, Redo, Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
 import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
 import { formatHeaders } from "@/lib/api";
+import { format } from "@/lib/format";
 import { generateId } from "@/lib/utils";
 import { useFileStore } from "@/stores/file-store";
 import type { EraserCanvasRef } from "./eraser-canvas";
@@ -36,6 +38,7 @@ export function EraseObjectSettings({
   onMaskCenter,
   maskedFileCount,
 }: EraseObjectSettingsProps) {
+  const { t } = useTranslation();
   const {
     files,
     entries,
@@ -386,7 +389,7 @@ export function EraseObjectSettings({
       <div>
         <div className="flex justify-between items-center">
           <label htmlFor="eraser-brush-size" className="text-xs text-muted-foreground">
-            Brush Size
+            {t.toolSettings["erase-object"].brushSize}
           </label>
           <span className="text-xs font-mono text-foreground">{brushSize}px</span>
         </div>
@@ -400,8 +403,8 @@ export function EraseObjectSettings({
           className="w-full mt-1"
         />
         <div className="flex justify-between text-[10px] text-muted-foreground mt-0.5">
-          <span>Fine</span>
-          <span>Wide</span>
+          <span>{t.toolSettings["erase-object"].fine}</span>
+          <span>{t.toolSettings["erase-object"].wide}</span>
         </div>
       </div>
 
@@ -493,7 +496,7 @@ export function EraseObjectSettings({
         <ProgressCard
           active={processing}
           phase={progressPhase === "idle" ? "uploading" : progressPhase}
-          label={progressStage || "Erasing object"}
+          label={progressStage || t.toolSettings["erase-object"].progressLabel}
           percent={progressPercent}
           elapsed={elapsed}
         />
@@ -505,7 +508,9 @@ export function EraseObjectSettings({
           disabled={!hasFile || (!hasStrokes && maskedFileCount === 0) || processing}
           className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
         >
-          {maskedFileCount > 1 ? `Erase All (${maskedFileCount})` : "Erase Object"}
+          {maskedFileCount > 1
+            ? format(t.toolSettings["erase-object"].submitBatch, { count: maskedFileCount })
+            : t.toolSettings["erase-object"].submit}
         </button>
       )}