Add German, Portuguese, and Indonesian translations

static/css/daw.css

@@ -474,7 +474,11 @@ input, textarea { font-family: inherit; }
 .rail-btn:hover { background: var(--panel); color: var(--fg-2); }
 .rail-btn.active { color: var(--accent); background: var(--panel); }
 .rail-btn svg { flex-shrink: 0; }
-.rail-btn span { white-space: nowrap; }
+/* max-width + ellipsis: a translated label (e.g. Polish "Ustawienia") can run
+   longer than English at this 9px size inside the fixed 40px button. The
+   full text is still reachable via the button's title/aria-label; this just
+   guarantees the label itself can never visually overflow the rail column. */
+.rail-btn > span { white-space: nowrap; max-width: 56px; overflow: hidden; text-overflow: ellipsis; }
 
 /* Queue rail button. Only present while something is importing, so the rail
    stays as it is today for anyone not using the queue. */
@@ -949,6 +953,9 @@ input, textarea { font-family: inherit; }
 .settings-num-input, .settings-select { flex-shrink: 0; width: 84px; background: rgba(10,17,24,0.6); border: 1px solid var(--border-strong); border-radius: 7px; color: var(--fg); font-family: var(--font-mono); font-size: 12px; padding: 6px 9px; }
 .settings-num-input { text-align: right; }
 .settings-select { cursor: pointer; }
+/* Wider variant for options whose text doesn't fit the shared 84px column --
+   currently just the language picker (flag + native name, up to "Bahasa Indonesia"). */
+.settings-select-wide { width: 190px; }
 .settings-num-input:focus, .settings-select:focus { outline: none; border-color: rgba(244,183,64,0.5); }
 
 /* Settings → network access section */

static/css/variables.css

@@ -44,8 +44,15 @@
   --focus-ring:  rgba(236,236,236,0.55);
 
   /* Typography */
-  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+  /* Explicit CJK fallbacks for Japanese/Simplified Chinese (i18n, EN/PL/JA/ZH):
+     neither Inter nor JetBrains Mono carries CJK glyphs, so without these the
+     browser still substitutes automatically, just to whichever CJK font it
+     picks on its own -- naming one keeps weight/x-height consistent with the
+     Latin text sitting next to it across platforms, rather than leaving it to
+     chance. Never affects EN/PL text: browsers only reach past the first name
+     a glyph is missing from. */
+  --font-sans: 'Inter', -apple-system, system-ui, 'Hiragino Sans', 'Noto Sans JP', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Hiragino Sans', 'Noto Sans JP', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', monospace;
 
   /* Layout */
   --header-w: 300px;

static/js/constants.js

@@ -1,3 +1,5 @@
+import { t, TRANSLATIONS } from "./i18n.js";
+
 // Fallback list used before /api/config responds. Kept in sync with
 // STEM_NAMES in app/core/config.py — the API is the canonical source.
 export let STEM_NAMES = ["vocals", "drums", "bass", "guitar", "piano", "other"];
@@ -36,17 +38,20 @@ export function effectiveStemOrder(presentNames) {
   return STEM_NAMES.flatMap((n) => (n === "vocals" && splitDone ? EXTRA_STEM_NAMES : [n]));
 }
 
-export const STEM_DISPLAY = {
-  vocals: "Vocals",
-  drums: "Drums",
-  bass: "Bass",
-  guitar: "Guitar",
-  piano: "Piano",
-  other: "Other",
-  original: "Original",
-  lead_vocals: "Lead Vocals",
-  backing_vocals: "Backing Vocals",
-};
+// A Proxy, not a plain object, so every lookup resolves through the CURRENT
+// language live -- a plain object would freeze these labels in whatever
+// language was active the moment this module first loaded. Callers keep their
+// existing `STEM_DISPLAY[name] || name` fallback pattern unchanged: an
+// unrecognized name (not one of ours) still yields undefined, same as a plain
+// object would, rather than the i18n engine's own missing-key fallback
+// (which returns the raw dictionary key string -- wrong here).
+export const STEM_DISPLAY = new Proxy({}, {
+  get(_target, prop) {
+    if (typeof prop !== "string") return undefined;
+    const key = `stem.${prop}`;
+    return key in TRANSLATIONS.en ? t(key) : undefined;
+  },
+});
 
 // FL Studio-style channel palette: saturated but slightly dusty, designed
 // to read well on a dark background.