@luxalgo/vela 0.8.4 → 0.9.0

package/dist/{chunk-MOJ4T26N.js → chunk-4WAHYL7Y.js}

@@ -1,8 +1,8 @@
-import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, SecondClock, isGroupRow, defaultMemberOf, groupKeyOf, groupMembers, LEGEND_AT_TOP_ATTR, normalizeSession, Vela, TypedEventBus, timeframeToMs, MultiProviderFeed, registerBuiltinChartTypes, resolveTheme, buildToolbar, createCustomMark, createAttributionMark, DrawingToolbar, applyAttributionMarkTheme, sharedBarStore, CANDLE_OVERRIDE_KEYS } from './chunk-UNUVPQFW.js';
-import { chartType, resolveTopbarComposition, topbarActionOverride, TOPBAR_BUILTIN_IDS, widgetActions, tzButtonLabel, resolveTimezone, timezoneMenuRows, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, symbolRanking, paneScaleAt, composeMenu, priceAxisItems, scaleChoiceOf, timeAxisItems, bodyItems, scaleWrites, invertWrite, settingsSectionOf, resolveEngines, legendActionsProviderFor, legendCalloutsProviderFor, normalizeTimezone, isExchangeTimezone, statePersistenceHandlers, topbarHas, rendererDefaults, mobilePlacement, widgetAttachments, getDrawingType, inputDeltas } from './chunk-ALTGHKIM.js';
-import { Tooltip, KeymapManager, isEditableTarget, Drawer } from './chunk-AUOB7A5Y.js';
-import { Menu, Dialog, CalloutBubble, applyPlotOverlayTokens, ensureUIHost } from './chunk-WY5H4S4I.js';
-import { registerIcon, svg16, injectStyles, iconEl, iconMarkup, iconAt, SESSION_OFF, SESSION_POST, SESSION_PRE, announceSurface, holdForExit, icon, categoricalColor } from './chunk-I2U4NZD2.js';
+import { priceStyleMessage, parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, SecondClock, isGroupRow, defaultMemberOf, groupKeyOf, groupMembers, LEGEND_AT_TOP_ATTR, normalizeSession, Vela, TypedEventBus, timeframeToMs, MultiProviderFeed, registerBuiltinChartTypes, resolveTheme, buildToolbar, createCustomMark, createAttributionMark, DrawingToolbar, relabelAttributionMark, applyAttributionMarkTheme, sharedBarStore, CANDLE_OVERRIDE_KEYS } from './chunk-XIRSR3D6.js';
+import { resolveTopbarComposition, topbarActionOverride, TOPBAR_BUILTIN_IDS, widgetActions, tzButtonLabel, resolveTimezone, timezoneMenuRows, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, symbolRanking, paneScaleAt, composeMenu, priceAxisItems, scaleChoiceOf, timeAxisItems, bodyItems, scaleWrites, invertWrite, settingsSectionOf, resolveEngines, legendActionsProviderFor, legendCalloutsProviderFor, normalizeTimezone, isExchangeTimezone, statePersistenceHandlers, topbarHas, rendererDefaults, mobilePlacement, widgetAttachments, chartType, getDrawingType, nativeIndicatorEntry, inputDeltas } from './chunk-YRCL3WMD.js';
+import { Tooltip, KeymapManager, isEditableTarget, Drawer } from './chunk-WHPQQYH7.js';
+import { Menu, Dialog, CalloutBubble, applyPlotOverlayTokens, ensureUIHost } from './chunk-PZN4RS4T.js';
+import { msg, sourceText, registerIcon, svg16, textOf, localizeNumberText, injectStyles, iconEl, iconMarkup, englishTranslator, sliceGraphemes, iconAt, SESSION_OFF, SESSION_POST, SESSION_PRE, LocaleState, pickLocalization, eventTimeText, announceSurface, holdForExit, icon, withValues, categoricalColor } from './chunk-O6L27KRB.js';
 import { baseOf } from './chunk-W4EJWLEO.js';
 
 // src/widget/timeframe.ts
@@ -16,15 +16,26 @@ var UNIT_MS = {
   Y: 31536e6
 };
 var UNIT_NAME = {
-  S: "second",
-  MIN: "minute",
-  H: "hour",
-  D: "day",
-  W: "week",
-  M: "month",
-  Y: "year"
+  S: msg("widget.timeframe.seconds", "{count, plural, one {{n} second} other {{n} seconds}}"),
+  MIN: msg("widget.timeframe.minutes", "{count, plural, one {{n} minute} other {{n} minutes}}"),
+  H: msg("widget.timeframe.hours", "{count, plural, one {{n} hour} other {{n} hours}}"),
+  D: msg("widget.timeframe.days", "{count, plural, one {{n} day} other {{n} days}}"),
+  W: msg("widget.timeframe.weeks", "{count, plural, one {{n} week} other {{n} weeks}}"),
+  M: msg("widget.timeframe.months", "{count, plural, one {{n} month} other {{n} months}}"),
+  Y: msg("widget.timeframe.years", "{count, plural, one {{n} year} other {{n} years}}")
 };
-var UNIT_SHORT = { S: "s", MIN: "m", H: "h", D: "D", W: "W", M: "M", Y: "Y" };
+var UNIT_SHORT = {
+  S: msg("widget.timeframe.short.seconds", "{n}s"),
+  MIN: msg("widget.timeframe.short.minutes", "{n}m"),
+  H: msg("widget.timeframe.short.hours", "{n}h"),
+  D: msg("widget.timeframe.short.days", "{n}D"),
+  W: msg("widget.timeframe.short.weeks", "{n}W"),
+  M: msg("widget.timeframe.short.months", "{n}M"),
+  Y: msg("widget.timeframe.short.years", "{n}Y")
+};
+function shortLabel(key, count, i18n) {
+  return textOf(i18n, UNIT_SHORT[key], { n: localizeNumberText(String(count), i18n) });
+}
 function unitKey(letter) {
   if (letter === "") return "MIN";
   return letter === "S" || letter === "H" || letter === "D" || letter === "W" || letter === "M" || letter === "Y" ? letter : null;
@@ -41,7 +52,7 @@ function canonicalFor(key, count) {
   if (key === "S") return `${count}S`;
   return `${count * UNIT_MINUTES[key]}`;
 }
-function parseTimeframe(text) {
+function parseTimeframe(text, i18n) {
   const raw = String(text ?? "").trim();
   if (!raw) return { valid: false };
   const m = /^(\d*)\s*([a-zA-Z]?)$/.exec(raw);
@@ -53,15 +64,14 @@ function parseTimeframe(text) {
   const count = numStr === "" ? 1 : parseInt(numStr, 10);
   if (!Number.isFinite(count) || count < 1) return { valid: false };
   const ms = count * UNIT_MS[key];
-  const name = UNIT_NAME[key];
   return {
     valid: true,
     count,
     unit: key,
     ms,
     canonical: canonicalFor(key, count),
-    label: `${count} ${name}${count === 1 ? "" : "s"}`,
-    short: `${count}${UNIT_SHORT[key]}`
+    label: textOf(i18n, UNIT_NAME[key], { count, n: localizeNumberText(String(count), i18n) }),
+    short: shortLabel(key, count, i18n)
   };
 }
 function timeframeMs(value) {
@@ -94,20 +104,26 @@ function favoriteTimeframeChips(favorites) {
     return 0;
   });
 }
-function timeframeLabel(value) {
-  const parsed = parseTimeframe(value);
+function timeframeLabel(value, i18n) {
+  const parsed = parseTimeframe(value, i18n);
   if (!parsed.valid) return value;
   const ms = parsed.ms;
   const order = ["Y", "M", "W", "D", "H", "MIN", "S"];
   for (const key of order) {
     if (ms % UNIT_MS[key] === 0 && ms / UNIT_MS[key] >= 1) {
-      return `${ms / UNIT_MS[key]}${UNIT_SHORT[key]}`;
+      return shortLabel(key, ms / UNIT_MS[key], i18n);
     }
   }
   return parsed.short;
 }
 
 // src/widget/layout-picker.ts
+var TEXT = {
+  layout: msg("widget.layoutPicker.layout", "Layout"),
+  sync: msg("widget.layoutPicker.sync", "Sync"),
+  gridHint: msg("widget.layoutPicker.gridHint", "Click a square to apply that columns × rows layout."),
+  gridSize: msg("widget.layoutPicker.gridSize", "{cols} × {rows}")
+};
 var STYLE_ID = "vela-widget-layout-picker-v15";
 var CSS = `
 .vela-lp-layer { position: absolute; z-index: var(--vela-z-menu); }
@@ -172,7 +188,7 @@ var CSS = `
     transition: background var(--vela-dur-fast) var(--vela-ease), border-color var(--vela-dur-fast) var(--vela-ease);
 }
 .vela-lp-sq:hover { background: var(--vela-hover-strong); border-color: var(--vela-border-strong); }
-/* Selected/previewed squares \u2014 the shared monochrome selection chip. */
+/* Selected/previewed squares — the shared monochrome selection chip. */
 .vela-lp-sq[data-on='1'] {
     background: var(--vela-selected-bg);
     border-color: var(--vela-selected-bg);
@@ -186,7 +202,7 @@ var CSS = `
 .vela-lp-sync-row { all: unset; display: flex; align-items: center; gap: 14px; padding: 6px 8px; border-radius: 5px; cursor: pointer; }
 .vela-lp-sync-row:hover { background: var(--vela-hover); }
 .vela-lp-sync-row .vela-lp-label { flex: 1 1 auto; }
-/* Toggle pill \u2014 same control language as the menu's switch rows, monochrome ON state. */
+/* Toggle pill — same control language as the menu's switch rows, monochrome ON state. */
 .vela-lp-switch {
     position: relative;
     flex: none;
@@ -212,7 +228,10 @@ var CSS = `
 .vela-lp-switch.on::after { transform: translateX(16px); background: var(--vela-selected-fg); }
 `;
 var GRID = 4;
-function layoutGridCanvas(doc) {
+function layoutGridLabel(cols, rows, i18n) {
+  return textOf(i18n, TEXT.gridSize, { cols, rows });
+}
+function layoutGridCanvas(doc, i18n) {
   injectStyles(STYLE_ID, CSS, doc);
   const el = doc.createElement("div");
   el.className = "vela-lp-grid";
@@ -223,7 +242,7 @@ function layoutGridCanvas(doc) {
       sq.className = "vela-lp-sq";
       sq.dataset.r = String(r);
       sq.dataset.c = String(c);
-      sq.setAttribute("aria-label", `${c + 1} \xD7 ${r + 1}`);
+      sq.setAttribute("aria-label", textOf(i18n, TEXT.gridSize, { cols: c + 1, rows: r + 1 }));
       squares.push(sq);
       el.appendChild(sq);
     }
@@ -240,6 +259,8 @@ function paintLayoutGrid(squares, shape) {
 var LayoutPicker = class {
   constructor(opts) {
     this.squares = [];
+    /** Fixed text re-read in the current language on every open. */
+    this.fixedText = [];
     this.isOpen = false;
     /** The card's exit animation after a close; a reopen cancels it. */
     this.exit = null;
@@ -272,7 +293,8 @@ var LayoutPicker = class {
     const layoutHeading = doc.createElement("div");
     layoutHeading.className = "vela-lp-heading";
     const headingText = doc.createElement("span");
-    headingText.textContent = "Layout";
+    headingText.textContent = textOf(opts.i18n, TEXT.layout);
+    this.fixedText.push({ el: headingText, text: TEXT.layout });
     const badge = doc.createElement("span");
     badge.className = "vela-lp-badge";
     badge.textContent = "?";
@@ -283,7 +305,7 @@ var LayoutPicker = class {
       placement: "bottom",
       content: () => this.tipNode()
     });
-    const { el: grid, squares } = layoutGridCanvas(doc);
+    const { el: grid, squares } = layoutGridCanvas(doc, opts.i18n);
     this.squares.push(...squares);
     layoutCol.appendChild(grid);
     this.presetsEl = doc.createElement("div");
@@ -296,7 +318,8 @@ var LayoutPicker = class {
     const syncCol = doc.createElement("div");
     const syncHeading = doc.createElement("div");
     syncHeading.className = "vela-lp-heading";
-    syncHeading.textContent = "Sync";
+    syncHeading.textContent = textOf(opts.i18n, TEXT.sync);
+    this.fixedText.push({ el: syncHeading, text: TEXT.sync });
     syncCol.appendChild(syncHeading);
     this.syncEl = doc.createElement("div");
     this.syncEl.className = "vela-lp-sync";
@@ -340,6 +363,7 @@ var LayoutPicker = class {
     this.exit?.cancel();
     this.exit = null;
     this.hover = null;
+    this.relabel();
     this.refresh();
     this.layer.style.display = "";
     this.position();
@@ -375,6 +399,16 @@ var LayoutPicker = class {
     this.infoTip.destroy();
     this.layer.remove();
   }
+  /** Fixed text and square names in the current language. */
+  relabel() {
+    const i18n = this.opts.i18n;
+    for (const { el, text } of this.fixedText) el.textContent = textOf(i18n, text);
+    this.infoTip.setContent(() => this.tipNode());
+    for (const sq of this.squares) {
+      const { r, c } = this.squarePos(sq);
+      sq.setAttribute("aria-label", textOf(i18n, TEXT.gridSize, { cols: c + 1, rows: r + 1 }));
+    }
+  }
   // ── internals ──
   squareAt(e) {
     const sq = e.target?.closest?.(".vela-lp-sq");
@@ -387,7 +421,7 @@ var LayoutPicker = class {
   tipNode() {
     const tip = this.doc.createElement("div");
     tip.className = "vela-lp-tip";
-    tip.textContent = "Click a square to apply that columns \xD7 rows layout.";
+    tip.textContent = textOf(this.opts.i18n, TEXT.gridHint);
     return tip;
   }
   /** Project the interaction state onto the DOM (the hover/current rectangle). */
@@ -504,7 +538,7 @@ var CSS2 = `
     color: var(--vela-fg-muted);
 }
 .vela-widget-tf-caret:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
-/* The merged trigger is a plain button (hover feedback only) \u2014 the highlight
+/* The merged trigger is a plain button (hover feedback only) — the highlight
    background marks the CURRENT chip among favorites, and a lone trigger with a
    permanent highlight would read as stuck-pressed. */
 .vela-widget-tf-caret[data-solo='1'] {
@@ -518,8 +552,8 @@ var CSS2 = `
 }
 .vela-widget-topbar .vela-widget-tf-caret .vela-icon { font-size: 14px; width: 14px; height: 14px; }
 .vela-widget-topbar .vela-icon { color: inherit; font-size: 16px; width: 16px; height: 16px; }
-/* Width is set in syncHairlines() to exactly one device pixel \u2014 a CSS 1px at
-   fractional DPR (1.25, 1.5\u2026) straddles two physical pixels and siblings end
+/* Width is set in syncHairlines() to exactly one device pixel — a CSS 1px at
+   fractional DPR (1.25, 1.5…) straddles two physical pixels and siblings end
    up looking like different thicknesses depending on subpixel placement. */
 .vela-sep { height: 22px; margin: 0 2px; flex: none; background: var(--vela-border-strong); }
 .vela-alerts-badge {
@@ -538,15 +572,15 @@ var CSS2 = `
     align-items: center;
     justify-content: center;
 }
-/* The right side of the bar \u2014 whatever the composition puts there rides this one
+/* The right side of the bar — whatever the composition puts there rides this one
    auto-margin push (the flow-actions host used to carry it; composition can omit it). */
 .vela-topbar-right { margin-left: auto; display: inline-flex; align-items: center; gap: var(--vela-space-1); }
 .vela-widget-actions { display: inline-flex; gap: var(--vela-space-1); }
-/* Left-aligned contributed actions \u2014 the primary-chrome cluster after the dropdowns. */
+/* Left-aligned contributed actions — the primary-chrome cluster after the dropdowns. */
 .vela-widget-actions-left { display: inline-flex; align-items: center; gap: var(--vela-space-1); }
 /* One PINNED contributed action's slot (a composition entry naming the action's id). */
 .vela-widget-action-pin { display: inline-flex; align-items: center; }
-/* The side-panel toggles, one per docked panel \u2014 a group so the dock can rebuild them
+/* The side-panel toggles, one per docked panel — a group so the dock can rebuild them
    without disturbing the tools around it. */
 .vela-widget-panels { display: inline-flex; align-items: center; gap: var(--vela-space-1); }
 .vela-widget-tool {
@@ -576,15 +610,8 @@ var CSS2 = `
 }
 .vela-widget-action:hover { background: var(--vela-hover); }
 `;
-var BUILTIN_STYLE_LABELS = {
-  candles: "Candles",
-  bars: "Bars",
-  line: "Line",
-  area: "Area",
-  baseline: "Baseline"
-};
-function priceStyleLabel(id) {
-  return chartType(id)?.label ?? BUILTIN_STYLE_LABELS[id] ?? id;
+function priceStyleLabel(id, i18n) {
+  return textOf(i18n, priceStyleMessage(id));
 }
 function priceStyleIcon(id) {
   const iconId = `style-${id}`;
@@ -596,6 +623,21 @@ function priceStyleIcon(id) {
   }
   return void 0;
 }
+var TEXT2 = {
+  timeframes: msg("widget.topbar.timeframes", "Timeframes"),
+  indicators: msg("widget.topbar.indicators", "Indicators"),
+  undo: msg("widget.topbar.undo", "Undo"),
+  redo: msg("widget.topbar.redo", "Redo"),
+  screenshot: msg("widget.topbar.screenshot", "Download screenshot"),
+  alerts: msg("widget.topbar.alerts", "Alerts"),
+  timeframe: msg("widget.topbar.timeframe", "Timeframe"),
+  chartStyle: msg("widget.topbar.chartStyle", "Chart style"),
+  layout: msg("widget.topbar.layout", "Layout"),
+  switchTimeframe: msg("widget.topbar.switchTimeframe", "Switch timeframe to {timeframe}"),
+  currentTimeframe: msg("widget.topbar.currentTimeframe", "Timeframe — {timeframe}"),
+  currentLayout: msg("widget.topbar.currentLayout", "Layout — {layout}"),
+  currentStyle: msg("widget.topbar.currentStyle", "Chart style — {style}")
+};
 var Topbar = class {
   constructor(host, opts) {
     this.layoutButton = null;
@@ -625,6 +667,8 @@ var Topbar = class {
     };
     this.hairlineRo = null;
     this.hairlineRaf = 0;
+    /** Re-apply each fixed label in the current language (see {@link relocalize}). */
+    this.relabels = [];
     this.opts = opts;
     this.host = host;
     this.timeframe = opts.timeframe;
@@ -645,7 +689,7 @@ var Topbar = class {
     this.tfCaret = doc.createElement("button");
     this.tfCaret.className = "vela-widget-tf-caret";
     this.tfCaret.appendChild(iconEl("chevron-down", doc));
-    this.tfCaret.setAttribute("aria-label", "Timeframes");
+    this.tfCaret.setAttribute("aria-label", this.t(TEXT2.timeframes));
     const tfGroup = doc.createElement("span");
     tfGroup.className = "vela-widget-tf-group";
     tfGroup.append(this.tfChipsHost, this.tfCaret);
@@ -656,7 +700,9 @@ var Topbar = class {
     if (opts.onIndicatorsClick && !topbarActionOverride("indicators")) {
       indicatorsBtn = doc.createElement("button");
       indicatorsBtn.className = "vela-widget-indicators";
-      indicatorsBtn.append(iconEl("indicators", doc), doc.createTextNode("Indicators"));
+      const label = doc.createTextNode(this.t(TEXT2.indicators));
+      indicatorsBtn.append(iconEl("indicators", doc), label);
+      this.relabels.push(() => label.textContent = this.t(TEXT2.indicators));
       indicatorsBtn.addEventListener("click", opts.onIndicatorsClick);
     }
     this.actionsHost = doc.createElement("span");
@@ -667,15 +713,15 @@ var Topbar = class {
     this.panelsHost.className = "vela-widget-panels";
     const tool = (cls, icon2, tip, onClick) => this.toolButton(cls, icon2, tip, onClick, this.tooltips);
     if (vis("undo-redo")) {
-      this.undoBtn = tool("vela-widget-undo", "undo", "Undo", opts.onUndoClick);
-      this.redoBtn = tool("vela-widget-redo", "redo", "Redo", opts.onRedoClick);
+      this.undoBtn = tool("vela-widget-undo", "undo", TEXT2.undo, opts.onUndoClick);
+      this.redoBtn = tool("vela-widget-redo", "redo", TEXT2.redo, opts.onRedoClick);
     } else {
       this.undoBtn = doc.createElement("button");
       this.redoBtn = doc.createElement("button");
     }
     this.setHistoryState(false, false);
-    const screenshotBtn = vis("screenshot") && !topbarActionOverride("screenshot") ? tool("vela-widget-screenshot", "camera", "Download screenshot", opts.onScreenshotClick) : null;
-    this.alertsBtn = vis("alerts") ? tool("vela-widget-alerts", "bell", "Alerts") : doc.createElement("button");
+    const screenshotBtn = vis("screenshot") && !topbarActionOverride("screenshot") ? tool("vela-widget-screenshot", "camera", TEXT2.screenshot, opts.onScreenshotClick) : null;
+    this.alertsBtn = vis("alerts") ? tool("vela-widget-alerts", "bell", TEXT2.alerts) : doc.createElement("button");
     this.alertsBtn.style.position = "relative";
     if (opts.onAlertsClick) this.alertsBtn.addEventListener("click", () => opts.onAlertsClick(this.alertsBtn));
     this.alertsBadge = doc.createElement("span");
@@ -759,14 +805,15 @@ var Topbar = class {
     this.hairlineRo.observe(this.el);
     doc.defaultView?.addEventListener("resize", this.onHairlineSync);
     this.renderActions();
-    this.tooltips.push(new Tooltip(this.tfCaret, { content: "Timeframe", triggerId: "vela-topbar-tf", host }));
-    this.tooltips.push(new Tooltip(this.styleButton, { content: "Chart style", triggerId: "vela-topbar-style", host }));
+    this.labeledTooltip(this.tfCaret, TEXT2.timeframe, "vela-topbar-tf", this.tooltips);
+    this.labeledTooltip(this.styleButton, TEXT2.chartStyle, "vela-topbar-style", this.tooltips);
     if (this.layoutButton && opts.layout) {
-      this.tooltips.push(new Tooltip(this.layoutButton, { content: "Layout", triggerId: "vela-topbar-layout", host }));
+      this.labeledTooltip(this.layoutButton, TEXT2.layout, "vela-topbar-layout", this.tooltips);
       const layout = opts.layout;
       this.layoutPicker = new LayoutPicker({
         trigger: this.layoutButton,
         host,
+        ...opts.i18n ? { i18n: opts.i18n } : {},
         shape: () => layout.shape(),
         presets: () => layout.presets().map((p) => ({ ...p, checked: p.id === this.layoutId })),
         onSelectGrid: (rows, cols) => layout.onSelectGrid(rows, cols),
@@ -779,6 +826,7 @@ var Topbar = class {
       trigger: this.tfCaret,
       triggerId: "vela-topbar-tf",
       host,
+      i18n: opts.i18n ?? null,
       items: this.tfItems(),
       onSelect: (id) => opts.onTimeframe(id),
       onFavorite: (id, on) => opts.onTimeframeFavorite?.(id, on),
@@ -795,6 +843,12 @@ var Topbar = class {
       iconBadges: true
     });
   }
+  get i18n() {
+    return this.opts.i18n ?? null;
+  }
+  t(m, values) {
+    return textOf(this.i18n, m, values);
+  }
   setSymbol(symbol) {
     this.symbolEl.textContent = parseSymbol(symbol).ticker;
   }
@@ -820,13 +874,13 @@ var Topbar = class {
     for (const tf of shown) {
       const b = doc.createElement("button");
       b.className = "vela-widget-tf";
-      const label = timeframeLabel(tf);
+      const label = timeframeLabel(tf, this.i18n);
       b.textContent = label;
       if (tf === this.timeframe) {
         b.dataset.current = "1";
         b.setAttribute("aria-current", "true");
       } else {
-        b.setAttribute("aria-label", `Switch timeframe to ${label}`);
+        b.setAttribute("aria-label", this.t(TEXT2.switchTimeframe, { timeframe: label }));
         b.addEventListener("click", () => this.opts.onTimeframe(tf));
       }
       this.tfChipsHost.appendChild(b);
@@ -834,12 +888,12 @@ var Topbar = class {
     this.tfCaret.replaceChildren();
     if (chips.length === 0) {
       this.tfCaret.dataset.solo = "1";
-      this.tfCaret.append(doc.createTextNode(timeframeLabel(this.timeframe)), iconEl("chevron-down", doc));
-      this.tfCaret.setAttribute("aria-label", `Timeframe \u2014 ${timeframeLabel(this.timeframe)}`);
+      this.tfCaret.append(doc.createTextNode(timeframeLabel(this.timeframe, this.i18n)), iconEl("chevron-down", doc));
+      this.tfCaret.setAttribute("aria-label", this.t(TEXT2.currentTimeframe, { timeframe: timeframeLabel(this.timeframe, this.i18n) }));
     } else {
       delete this.tfCaret.dataset.solo;
       this.tfCaret.appendChild(iconEl("chevron-down", doc));
-      this.tfCaret.setAttribute("aria-label", "Timeframes");
+      this.tfCaret.setAttribute("aria-label", this.t(TEXT2.timeframes));
     }
     this.onHairlineSync();
   }
@@ -866,14 +920,14 @@ var Topbar = class {
     } else {
       this.layoutButton.appendChild(doc.createTextNode(this.layoutId ?? ""));
     }
-    this.layoutButton.setAttribute("aria-label", `Layout \u2014 ${this.layoutId ?? ""}`);
+    this.layoutButton.setAttribute("aria-label", this.t(TEXT2.currentLayout, { layout: this.layoutId ?? "" }));
   }
   renderStyleButton(doc) {
     this.styleButton.replaceChildren();
     const icon2 = priceStyleIcon(this.priceStyle);
     if (icon2) this.styleButton.appendChild(iconEl(icon2, doc));
-    else this.styleButton.appendChild(doc.createTextNode(priceStyleLabel(this.priceStyle)));
-    this.styleButton.setAttribute("aria-label", `Chart style \u2014 ${priceStyleLabel(this.priceStyle)}`);
+    else this.styleButton.appendChild(doc.createTextNode(priceStyleLabel(this.priceStyle, this.i18n)));
+    this.styleButton.setAttribute("aria-label", this.t(TEXT2.currentStyle, { style: priceStyleLabel(this.priceStyle, this.i18n) }));
   }
   /** Re-project the contributed topbar actions (call after registrations change).
    *  An action PINNED by the composition renders into its named slot (list position
@@ -898,16 +952,17 @@ var Topbar = class {
       const iconOnly = action.iconOnly === true && !!action.icon;
       if (action.iconOnly === true && !action.icon && !this.warnedIconless.has(action.id)) {
         this.warnedIconless.add(action.id);
-        console.warn(`[vela] widget action "${action.id}": iconOnly needs an \`icon\` \u2014 rendering the label instead.`);
+        console.warn(`[vela] widget action "${action.id}": iconOnly needs an \`icon\` — rendering the label instead.`);
       }
       const b = doc.createElement("button");
       b.className = left ? "vela-widget-action-left" : iconOnly ? "vela-widget-tool" : "vela-widget-action";
       if (action.icon) b.appendChild(iconEl(action.icon, doc));
+      const label = textOf(ctx?.i18n ?? this.i18n, action.label);
       if (iconOnly) {
-        b.setAttribute("aria-label", action.label);
-        this.actionTooltips.push(new Tooltip(b, { content: action.label, triggerId: `vela-action-${action.id}`, host: this.host }));
+        b.setAttribute("aria-label", label);
+        this.actionTooltips.push(new Tooltip(b, { content: label, triggerId: `vela-action-${action.id}`, host: this.host }));
       } else {
-        b.appendChild(doc.createTextNode(action.label));
+        b.appendChild(doc.createTextNode(label));
       }
       b.addEventListener("click", () => {
         const c = this.opts.getContext?.();
@@ -968,11 +1023,33 @@ var Topbar = class {
     const b = doc.createElement("button");
     b.className = `vela-widget-tool ${cls}`;
     b.appendChild(iconEl(icon2, doc));
-    b.setAttribute("aria-label", tip);
-    sink.push(new Tooltip(b, { content: tip, triggerId: `vela-tool-${cls}`, host: this.host }));
+    b.setAttribute("aria-label", this.t(tip));
+    const tooltip = new Tooltip(b, { content: this.t(tip), triggerId: `vela-tool-${cls}`, host: this.host });
+    sink.push(tooltip);
+    this.relabels.push(() => {
+      b.setAttribute("aria-label", this.t(tip));
+      tooltip.setContent(this.t(tip));
+    });
     if (onClick) b.addEventListener("click", onClick);
     return b;
   }
+  /** A kit tooltip whose text follows the language. */
+  labeledTooltip(el, text, triggerId, sink) {
+    const tooltip = new Tooltip(el, { content: this.t(text), triggerId, host: this.host });
+    sink.push(tooltip);
+    this.relabels.push(() => tooltip.setContent(this.t(text)));
+  }
+  /** Re-read every label, tooltip and menu in the current language. */
+  relocalize() {
+    for (const relabel of this.relabels) relabel();
+    this.renderTfChips();
+    this.renderStyleButton(this.styleButton.ownerDocument);
+    if (this.layoutButton) this.renderLayoutButton(this.layoutButton.ownerDocument);
+    this.tfMenu.setItems(this.tfItems());
+    this.styleMenu.setItems(this.styleItems());
+    this.layoutPicker?.relabel();
+    this.renderActions();
+  }
   /** Paint each `.vela-sep` as exactly one device pixel, snapped to the pixel grid. */
   syncHairlines() {
     const win = this.el.ownerDocument.defaultView;
@@ -990,7 +1067,7 @@ var Topbar = class {
     const stars = this.opts.onTimeframeFavorite !== void 0;
     return this.opts.timeframes.map((tf) => ({
       id: tf,
-      label: timeframeLabel(tf),
+      label: timeframeLabel(tf, this.i18n),
       checked: tf === this.timeframe,
       ...stars ? { favorite: this.tfFavs.includes(tf) } : {}
     }));
@@ -998,7 +1075,7 @@ var Topbar = class {
   styleItems() {
     return priceStyleIds().map((id, i) => ({
       id,
-      label: priceStyleLabel(id),
+      label: priceStyleLabel(id, this.i18n),
       icon: priceStyleIcon(id),
       checked: id === this.priceStyle,
       separatorBefore: i === BUILTIN_PRICE_STYLES.length
@@ -1098,12 +1175,34 @@ var CSS3 = `
 }
 .vela-bb-settings:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
 `;
+var TEXT3 = {
+  timeZone: msg("widget.bottombar.timeZone", "Time zone"),
+  session: msg("widget.bottombar.session", "Session — regular (RTH) vs extended (ETH) hours"),
+  regular: msg("widget.bottombar.regular", "RTH"),
+  extended: msg("widget.bottombar.extended", "ETH"),
+  chartSettings: msg("widget.bottombar.chartSettings", "Chart settings")
+};
+var RANGE_LABELS = {
+  "1D": msg("widget.bottombar.range.1d", "1D"),
+  "7D": msg("widget.bottombar.range.7d", "7D"),
+  "1M": msg("widget.bottombar.range.1m", "1M"),
+  "3M": msg("widget.bottombar.range.3m", "3M"),
+  "6M": msg("widget.bottombar.range.6m", "6M"),
+  YTD: msg("widget.bottombar.range.ytd", "YTD"),
+  "1Y": msg("widget.bottombar.range.1y", "1Y"),
+  "5Y": msg("widget.bottombar.range.5y", "5Y"),
+  ALL: msg("widget.bottombar.range.all", "ALL")
+};
+function rangeLabel(id, i18n) {
+  return textOf(i18n, RANGE_LABELS[id] ?? id);
+}
 var Bottombar = class {
   constructor(host, opts) {
     this.settingsTip = null;
     this.rangeButtons = /* @__PURE__ */ new Map();
     this.sessionButtons = /* @__PURE__ */ new Map();
     this.sessionEl = null;
+    this.i18n = opts.i18n ?? null;
     this.timezone = opts.timezone;
     this.exchangeTimezone = opts.exchangeTimezone;
     const doc = host.ownerDocument;
@@ -1113,7 +1212,7 @@ var Bottombar = class {
     for (const preset of RANGE_PRESETS) {
       const b = doc.createElement("button");
       b.className = "vela-bb-range";
-      b.textContent = preset.id;
+      b.textContent = this.t(RANGE_LABELS[preset.id] ?? preset.id);
       b.addEventListener("click", () => {
         this.setActiveRange(preset.id);
         opts.onRange(preset);
@@ -1125,7 +1224,7 @@ var Bottombar = class {
     spacer.className = "vela-bb-spacer";
     this.tzButton = doc.createElement("button");
     this.tzButton.className = "vela-bb-tz";
-    this.tzButton.setAttribute("aria-label", "Time zone");
+    this.tzButton.setAttribute("aria-label", this.t(TEXT3.timeZone));
     this.clockEl = doc.createElement("span");
     this.clockEl.className = "vela-bb-clock";
     this.tzLabelEl = doc.createElement("span");
@@ -1135,11 +1234,11 @@ var Bottombar = class {
     session.className = "vela-bb-session";
     this.sessionEl = session;
     session.style.display = "none";
-    session.title = "Session \u2014 regular (RTH) vs extended (ETH) hours";
-    for (const [key, label] of [["regular", "RTH"], ["extended", "ETH"]]) {
+    session.title = this.t(TEXT3.session);
+    for (const [key, label] of [["regular", TEXT3.regular], ["extended", TEXT3.extended]]) {
       const b = doc.createElement("button");
       b.className = "vela-bb-session-btn" + (key === "regular" ? " is-active" : "");
-      b.textContent = label;
+      b.textContent = this.t(label);
       b.disabled = true;
       b.addEventListener("click", () => {
         if (b.disabled) return;
@@ -1150,11 +1249,12 @@ var Bottombar = class {
       session.appendChild(b);
     }
     const settingsBtn = doc.createElement("button");
+    this.settingsBtn = settingsBtn;
     settingsBtn.className = "vela-bb-settings";
     settingsBtn.appendChild(iconEl("gear", doc));
-    settingsBtn.setAttribute("aria-label", "Chart settings");
+    settingsBtn.setAttribute("aria-label", this.t(TEXT3.chartSettings));
     if (opts.onSettingsClick) settingsBtn.addEventListener("click", opts.onSettingsClick);
-    this.settingsTip = new Tooltip(settingsBtn, { content: "Chart settings", triggerId: "vela-bb-settings", host });
+    this.settingsTip = new Tooltip(settingsBtn, { content: this.t(TEXT3.chartSettings), triggerId: "vela-bb-settings", host });
     this.el.append(spacer, this.tzButton, session, settingsBtn);
     host.appendChild(this.el);
     this.tzMenu = new Menu({
@@ -1217,20 +1317,25 @@ var Bottombar = class {
     this.el.remove();
   }
   tzItems() {
-    return timezoneMenuRows(this.timezone).map((r) => ({ id: r.value, label: r.label, checked: r.checked }));
+    return timezoneMenuRows(this.timezone, this.i18n).map((r) => ({ id: r.value, label: r.label, checked: r.checked }));
+  }
+  t(m) {
+    return textOf(this.i18n, m);
+  }
+  /** Re-read every label, the zone menu and the clock in the current language. */
+  relocalize() {
+    for (const [id, b] of this.rangeButtons) b.textContent = this.t(RANGE_LABELS[id] ?? id);
+    this.tzButton.setAttribute("aria-label", this.t(TEXT3.timeZone));
+    if (this.sessionEl) this.sessionEl.title = this.t(TEXT3.session);
+    this.sessionButtons.get("regular").textContent = this.t(TEXT3.regular);
+    this.sessionButtons.get("extended").textContent = this.t(TEXT3.extended);
+    this.settingsBtn.setAttribute("aria-label", this.t(TEXT3.chartSettings));
+    this.settingsTip?.setContent(this.t(TEXT3.chartSettings));
+    this.tzMenu.setItems(this.tzItems());
+    this.tick();
   }
   tick() {
-    try {
-      this.clockEl.textContent = new Intl.DateTimeFormat("en-GB", {
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: false,
-        timeZone: this.displayZone
-      }).format(/* @__PURE__ */ new Date());
-    } catch {
-      this.clockEl.textContent = "";
-    }
+    this.clockEl.textContent = (this.i18n ?? englishTranslator()).format.clock(Date.now(), { timeZone: this.displayZone, surface: "clock" });
   }
 };
 
@@ -1269,23 +1374,29 @@ function tickerIconEl(doc, base, name, className, iconUrl) {
 }
 
 // src/widget/object-tree-model.ts
+var TEXT4 = {
+  mainChart: msg("widget.objectTree.mainChart", "Main chart"),
+  pane: msg("widget.objectTree.pane", "Panel {n}"),
+  drawingWithText: msg("widget.objectTree.drawingWithText", "{name} — {text}"),
+  group: msg("widget.objectTree.group", "Group {n}")
+};
 var PRICE_PANE_ID = "price";
-var PRICE_PANE_LABEL = "Main chart";
-function drawingMeta(type) {
-  const meta = getDrawingType(type);
+sourceText(TEXT4.mainChart);
+function drawingMeta(type, i18n) {
+  const meta = getDrawingType(type, i18n ?? void 0);
   if (meta) return { label: meta.label, icon: meta.icon };
   return { label: String(type || "drawing").replace(/(^|\s)\S/g, (c) => c.toUpperCase()), icon: null };
 }
-function drawingLabel(d) {
-  const { label } = drawingMeta(d.type);
+function drawingLabel(d, i18n) {
+  const { label } = drawingMeta(d.type, i18n);
   const text = d.text?.value?.trim();
-  return text ? `${label} \u2014 ${text}` : label;
+  return text ? textOf(i18n, TEXT4.drawingWithText, { name: label, text }) : label;
 }
-function paneLabel(pane, fallbackTitle) {
-  if (pane.kind === "price") return PRICE_PANE_LABEL;
+function paneLabel(pane, fallbackTitle, i18n) {
+  if (pane.kind === "price") return textOf(i18n, TEXT4.mainChart);
   const master = pane.indicators.find((i) => !i.ownScale) ?? pane.indicators[0];
   if (master) return indicatorLabel(master, fallbackTitle);
-  return `Pane ${pane.order + 1}`;
+  return textOf(i18n, TEXT4.pane, { n: String(pane.order + 1) });
 }
 function indicatorLabel(i, fallbackTitle) {
   return i.title || fallbackTitle(i.id) || i.id;
@@ -1372,13 +1483,14 @@ function groupState(members) {
 function canGroup(ids, groups) {
   return ids.length > 0 && ids.every((id) => groupOf(groups, id) === null);
 }
-function nextGroupName(groups) {
+function nextGroupName(groups, i18n) {
   const taken = new Set(groups.map((g) => g.name));
+  const nameOf = (n) => textOf(i18n, TEXT4.group, { n: String(n) });
   for (let n = 1; n <= groups.length; n += 1) {
-    const name = `Group ${n}`;
+    const name = nameOf(n);
     if (!taken.has(name)) return name;
   }
-  return `Group ${groups.length + 1}`;
+  return nameOf(groups.length + 1);
 }
 function withMembers(groups, keep) {
   return groups.map((g) => ({ ...g, ids: g.ids.filter(keep) })).filter((g) => g.ids.length > 0);
@@ -1435,9 +1547,14 @@ function paneItems(snap, pane, units) {
     return [...unitItems, ...rows2];
   }
   const zOf = new Map(snap.zOrder.map((e) => [e.id, e.z]));
-  const rows = pane.indicators.map((i) => ({ item: { kind: "row", row: indicatorRow(i) }, z: zOf.get(i.id) ?? 0 }));
-  if (pane.kind === "price") rows.push({ item: { kind: "row", row: priceRow() }, z: snap.candleZ });
-  rows.sort((a, b) => b.z - a.z);
+  const rank = new Map(snap.zOrder.map((e, i) => [e.id, i]));
+  const rows = pane.indicators.map((i) => ({
+    item: { kind: "row", row: indicatorRow(i) },
+    z: zOf.get(i.id) ?? 0,
+    rank: rank.get(i.id) ?? -1
+  }));
+  if (pane.kind === "price") rows.push({ item: { kind: "row", row: priceRow() }, z: snap.candleZ, rank: -Infinity });
+  rows.sort((a, b) => b.z - a.z || b.rank - a.rank);
   if (!snap.interleave) return [...unitItems, ...rows.map((r) => r.item)];
   const entries = [...rows, ...units.map((unit) => ({ item: { kind: "unit", unit }, z: unitZ(unit) }))];
   entries.sort((a, b) => a.z === b.z ? Number(a.item.kind === "unit") - Number(b.item.kind === "unit") : b.z - a.z);
@@ -1448,7 +1565,7 @@ function buildTree(snap) {
   return snap.panes.map((pane) => ({
     id: pane.id,
     kind: pane.kind,
-    label: paneLabel(pane, snap.handleTitle),
+    label: paneLabel(pane, snap.handleTitle, snap.i18n),
     order: pane.order,
     collapsed: pane.collapsed,
     maximized: pane.maximized,
@@ -1460,6 +1577,56 @@ function treeIsEmpty(panes) {
 }
 
 // src/widget/object-tree.ts
+var TEXT5 = {
+  objectTree: msg("widget.objectTree.objectTree", "Object tree"),
+  price: msg("widget.objectTree.price", "Price"),
+  emptyHint: msg("widget.objectTree.emptyHint", "Add an indicator or a drawing to populate the tree"),
+  groupSelected: msg("widget.objectTree.groupSelected", "Group the selected drawings"),
+  groupDrawings: msg("widget.objectTree.groupDrawings", "{count, plural, one {Group this drawing} other {Group these drawings}}"),
+  alreadyInAGroup: msg("widget.objectTree.alreadyInAGroup", "Already in a group"),
+  duplicateSelected: msg("widget.objectTree.duplicateSelected", "Duplicate the selected drawings"),
+  duplicate: msg("widget.objectTree.duplicate", "Duplicate"),
+  movePaneUp: msg("widget.objectTree.movePaneUp", "Move panel up"),
+  movePaneDown: msg("widget.objectTree.movePaneDown", "Move panel down"),
+  expandPane: msg("widget.objectTree.expandPane", "Expand panel"),
+  collapsePane: msg("widget.objectTree.collapsePane", "Collapse panel"),
+  restorePanes: msg("widget.objectTree.restorePanes", "Restore panels"),
+  maximizePane: msg("widget.objectTree.maximizePane", "Maximize panel"),
+  hide: msg("widget.objectTree.hide", "Hide"),
+  show: msg("widget.objectTree.show", "Show"),
+  restackHint: msg("widget.objectTree.restackHint", "Drag to change what draws in front"),
+  remove: msg("widget.objectTree.remove", "Remove"),
+  moveIndicatorHint: msg("widget.objectTree.moveIndicatorHint", "Drag to another panel, or between panels for a new one"),
+  unlockAll: msg("widget.objectTree.unlockAll", "Unlock all"),
+  lockAll: msg("widget.objectTree.lockAll", "Lock all"),
+  showAll: msg("widget.objectTree.showAll", "Show all"),
+  hideAll: msg("widget.objectTree.hideAll", "Hide all"),
+  removeAll: msg("widget.objectTree.removeAll", "Remove all"),
+  unlock: msg("widget.objectTree.unlock", "Unlock"),
+  lock: msg("widget.objectTree.lock", "Lock"),
+  moveDrawingHint: msg("widget.objectTree.moveDrawingHint", "Drag to restack, or onto another panel to move it there"),
+  ownScaleHint: msg("widget.objectTree.ownScaleHint", "Draws against its own price scale"),
+  bringToFront: msg("widget.objectTree.bringToFront", "Bring to front"),
+  sendToBack: msg("widget.objectTree.sendToBack", "Send to back"),
+  indicatorSettings: msg("widget.objectTree.indicatorSettings", "Indicator settings"),
+  moveTo: msg("widget.objectTree.moveTo", "Move to"),
+  newPaneAbove: msg("widget.objectTree.newPaneAbove", "New panel above"),
+  newPaneBelow: msg("widget.objectTree.newPaneBelow", "New panel below"),
+  newGroup: msg("widget.objectTree.newGroup", "New group"),
+  addToGroup: msg("widget.objectTree.addToGroup", "Add to group"),
+  moveToGroup: msg("widget.objectTree.moveToGroup", "Move to group"),
+  rename: msg("widget.objectTree.rename", "Rename…"),
+  selectAll: msg("widget.objectTree.selectAll", "Select all"),
+  bringAllToFront: msg("widget.objectTree.bringAllToFront", "Bring all to front"),
+  sendAllToBack: msg("widget.objectTree.sendAllToBack", "Send all to back"),
+  ungroup: msg("widget.objectTree.ungroup", "Ungroup"),
+  selected: msg("widget.objectTree.selected", "{count, plural, one {# selected} other {# selected}}"),
+  groupMembers: msg("widget.objectTree.groupMembers", "{count, plural, one {# drawing — drag to move it} other {# drawings — drag to move them together}}"),
+  groupPick: msg("widget.objectTree.groupPick", "Group selection ({count})"),
+  removeFromGroup: msg("widget.objectTree.removeFromGroup", "Remove from {group}"),
+  scaleTag: msg("widget.objectTree.scaleTag", "scale")
+};
+var OBJECT_TREE_TITLE = TEXT5.objectTree;
 var STYLE_ID4 = "vela-widget-objtree";
 var CSS4 = `
 /* One pane's block. The transparent border reserves the drop-target outline. */
@@ -1493,7 +1660,7 @@ var CSS4 = `
 }
 .vela-ot-row:hover { background: var(--vela-hover); }
 .vela-ot-row > .vela-icon { color: var(--vela-fg-muted); width: 14px; height: 14px; font-size: 14px; justify-content: center; flex: none; }
-/* Drawing glyphs come from the type registry at toolbar scale \u2014 bring them down to row size. */
+/* Drawing glyphs come from the type registry at toolbar scale — bring them down to row size. */
 .vela-ot-row > .vela-icon svg { width: 14px; height: 14px; }
 .vela-ot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .vela-ot-row[data-hidden] .vela-ot-name,
@@ -1553,9 +1720,9 @@ var CSS4 = `
 .vela-ot-btn:disabled { opacity: 0.35; cursor: default; }
 .vela-ot-empty { padding: 20px 10px; text-align: center; color: var(--vela-fg-muted); font-size: 12px; }
 
-/* \u2500\u2500 drawing groups \u2500\u2500 */
+/* ── drawing groups ── */
 /* One top-level entry in a pane's drawing list: a lone drawing, or a whole group block. No
-   border of its own \u2014 units stack flush, so consecutive highlighted rows read as one block; the
+   border of its own — units stack flush, so consecutive highlighted rows read as one block; the
    drop-into-group outline is drawn inside the box instead (see the drag-and-drop rules). */
 .vela-ot-unit { border-radius: 6px; }
 /* Adjacent picked rows merge into one contiguous highlight: the shared edge loses its rounding. */
@@ -1574,7 +1741,7 @@ var CSS4 = `
     color: var(--vela-fg-bright);
     font: inherit;
 }
-/* The selection bar. Always there \u2014 the actions it holds are the panel's, not a row's, so they
+/* The selection bar. Always there — the actions it holds are the panel's, not a row's, so they
    stay in place and simply go dim until a drawing is selected. It stays put at the top of the
    list while the list scrolls under it, so they never scroll out of reach. */
 .vela-ot-selbar {
@@ -1593,7 +1760,7 @@ var CSS4 = `
 .vela-ot-selbar .vela-ot-btn { visibility: visible; width: 24px; height: 22px; }
 .vela-ot-selbar .vela-ot-btn[data-icon='group'] .vela-icon { width: 16px; height: 16px; font-size: 16px; }
 
-/* \u2500\u2500 drag-and-drop \u2500\u2500 */
+/* ── drag-and-drop ── */
 .vela-ot-row[data-drag] { cursor: grab; }
 .vela-ot .vela-panel-body[data-dragging] .vela-ot-row[data-drag] { cursor: grabbing; }
 /* The row in flight fades: the ghost under the pointer is the thing being moved. */
@@ -1679,8 +1846,8 @@ var MenuBuilder = class {
   }
 };
 var ObjectTree = class extends SidePanel {
-  constructor(host, iconFor) {
-    super(host, "Object tree", "vela-ot");
+  constructor(host, iconFor, i18n) {
+    super(host, TEXT5.objectTree, "vela-ot", i18n ? { i18n } : {});
     this.iconFor = iconFor;
     this.chart = null;
     /** What the CHART has selected — every member of a multi-selection, mirrored as rows. */
@@ -1734,6 +1901,7 @@ var ObjectTree = class extends SidePanel {
     for (const ev of REFRESH_EVENTS) {
       this.unsubs.push(chart.on(ev, () => this.refresh()));
     }
+    this.unsubs.push(chart.renderer.onConfigChanged(() => this.refresh()));
     this.unsubs.push(
       chart.on("drawing:selected", ({ ids }) => {
         this.selectedDrawings = new Set(ids);
@@ -1762,16 +1930,21 @@ var ObjectTree = class extends SidePanel {
       panes: chart.panes.list(),
       indicatorVisible: (id) => handle(id)?.visible !== false,
       handleTitle: (id) => handle(id)?.title,
+      i18n: this.i18n,
       stackable,
       interleave: stackable && chart.drawings.supported && chart.renderer.capabilities.drawingDepth === true,
       zOrder: stackable ? chart.renderer.get("seriesOrder") ?? [] : [],
       candleZ: stackable ? Number(chart.renderer.get("candleZOrder")) || 0 : 0,
-      priceLabel: this.symbolName || "Price",
+      priceLabel: this.symbolName || this.t(TEXT5.price),
       priceVisible: chart.renderer.get("candleVisible") !== false,
       drawings: chart.drawings.supported ? chart.drawings.all() : [],
       groups: this.groups
     };
   }
+  relocalize() {
+    super.relocalize();
+    this.refresh();
+  }
   /**
    * Repaint because something changed — unless the panel is mid-interaction. A live drag
    * resolves drops against the rows as currently rendered, and a rename lives in an input
@@ -1802,7 +1975,7 @@ var ObjectTree = class extends SidePanel {
     if (treeIsEmpty(panes)) {
       const empty = doc.createElement("div");
       empty.className = "vela-ot-empty";
-      empty.textContent = "Add an indicator or a drawing to populate the tree";
+      empty.textContent = this.t(TEXT5.emptyHint);
       this.body.appendChild(empty);
     }
   }
@@ -1817,7 +1990,7 @@ var ObjectTree = class extends SidePanel {
     bar.appendChild(
       this.btn({
         icon: "group",
-        title: ids.length === 0 ? "Group the selected drawings" : groupable ? `Group ${ids.length === 1 ? "this drawing" : "these drawings"}` : "Already in a group",
+        title: ids.length === 0 ? this.t(TEXT5.groupSelected) : groupable ? this.t(TEXT5.groupDrawings, { count: ids.length }) : this.t(TEXT5.alreadyInAGroup),
         disabled: !groupable,
         run: () => this.makeGroup(ids)
       })
@@ -1825,7 +1998,7 @@ var ObjectTree = class extends SidePanel {
     bar.appendChild(
       this.btn({
         icon: "clone",
-        title: ids.length === 0 ? "Duplicate the selected drawings" : "Duplicate",
+        title: ids.length === 0 ? this.t(TEXT5.duplicateSelected) : this.t(TEXT5.duplicate),
         disabled: ids.length === 0,
         run: () => {
           for (const id of ids) this.cloneInto(pass, id);
@@ -1835,7 +2008,7 @@ var ObjectTree = class extends SidePanel {
     );
     const count = doc.createElement("span");
     count.className = "vela-ot-selcount";
-    count.textContent = ids.length > 1 ? `${ids.length} selected` : "";
+    count.textContent = ids.length > 1 ? this.t(TEXT5.selected, { count: ids.length }) : "";
     bar.appendChild(count);
     return bar;
   }
@@ -1910,11 +2083,11 @@ var ObjectTree = class extends SidePanel {
       acts.appendChild(this.btn({ icon: icon2, title, run }));
     };
     if (pane.kind !== "price") {
-      if (pane.order > 1) op("arrow-up", "Move pane up", () => chart.panes.move(pane.id, "up"));
-      if (pane.order < pass.panes.length - 1) op("arrow-down", "Move pane down", () => chart.panes.move(pane.id, "down"));
-      op(pane.collapsed ? "expand" : "collapse", pane.collapsed ? "Expand pane" : "Collapse pane", () => chart.panes.collapse(pane.id, !pane.collapsed));
+      if (pane.order > 1) op("arrow-up", this.t(TEXT5.movePaneUp), () => chart.panes.move(pane.id, "up"));
+      if (pane.order < pass.panes.length - 1) op("arrow-down", this.t(TEXT5.movePaneDown), () => chart.panes.move(pane.id, "down"));
+      op(pane.collapsed ? "expand" : "collapse", pane.collapsed ? this.t(TEXT5.expandPane) : this.t(TEXT5.collapsePane), () => chart.panes.collapse(pane.id, !pane.collapsed));
     }
-    op(pane.maximized ? "restore" : "maximize", pane.maximized ? "Restore panes" : "Maximize pane", () => chart.panes.maximize(pane.maximized ? null : pane.id));
+    op(pane.maximized ? "restore" : "maximize", pane.maximized ? this.t(TEXT5.restorePanes) : this.t(TEXT5.maximizePane), () => chart.panes.maximize(pane.maximized ? null : pane.id));
     return head;
   }
   rowEl(pass, pane, row) {
@@ -1922,11 +2095,11 @@ var ObjectTree = class extends SidePanel {
     const { chart } = pass;
     if (row.kind === "price") {
       const base = this.symbolName.replace(/[-_/]?(USDT|USDC|USD1|USDS|BUSD|USD|EUR|PERP)$/i, "") || this.symbolName;
-      const icon2 = tickerIconEl(doc, base || "P", this.symbolName || "Price", "vela-ot-avatar", this.symbolRaw ? this.iconFor?.(this.symbolRaw) : void 0);
+      const icon2 = tickerIconEl(doc, base || sliceGraphemes(this.t(TEXT5.price), 1), this.symbolName || this.t(TEXT5.price), "vela-ot-avatar", this.symbolRaw ? this.iconFor?.(this.symbolRaw) : void 0);
       const el2 = this.row(icon2, row.label, row.visible, [
         {
           icon: row.visible ? "eye" : "eye-off",
-          title: row.visible ? "Hide" : "Show",
+          title: row.visible ? this.t(TEXT5.hide) : this.t(TEXT5.show),
           engaged: !row.visible,
           run: () => {
             chart.renderer.set("candleVisible", !row.visible);
@@ -1938,7 +2111,7 @@ var ObjectTree = class extends SidePanel {
       el2.dataset.pane = pane.id;
       if (pass.stackable) {
         el2.dataset.drag = "1";
-        el2.title = "Drag to change what draws in front";
+        el2.title = this.t(TEXT5.restackHint);
       }
       return el2;
     }
@@ -1950,7 +2123,7 @@ var ObjectTree = class extends SidePanel {
       [
         {
           icon: row.visible ? "eye" : "eye-off",
-          title: row.visible ? "Hide" : "Show",
+          title: row.visible ? this.t(TEXT5.hide) : this.t(TEXT5.show),
           engaged: !row.visible,
           run: () => {
             handle?.setVisible(!row.visible);
@@ -1959,21 +2132,21 @@ var ObjectTree = class extends SidePanel {
         },
         {
           icon: "trash",
-          title: "Remove",
+          title: this.t(TEXT5.remove),
           run: () => {
             handle?.remove();
             this.refresh();
           }
         }
       ],
-      row.ownScale ? "scale" : void 0
+      row.ownScale ? this.t(TEXT5.scaleTag) : void 0
     );
     el.dataset.rowKind = "indicator";
     el.dataset.id = row.id;
     el.dataset.pane = pane.id;
     if (pass.repanable || pass.stackable) {
       el.dataset.drag = "1";
-      el.title = pass.repanable ? "Drag to another pane, or between panes for a new one" : "Drag to change what draws in front";
+      el.title = pass.repanable ? this.t(TEXT5.moveIndicatorHint) : this.t(TEXT5.restackHint);
     }
     return el;
   }
@@ -1992,22 +2165,22 @@ var ObjectTree = class extends SidePanel {
     const el = this.row(iconEl(folded ? "chevron-right" : "chevron-down", doc), g.name, !allHidden, [
       {
         icon: allLocked ? "lock" : "unlock",
-        title: allLocked ? "Unlock all" : "Lock all",
+        title: allLocked ? this.t(TEXT5.unlockAll) : this.t(TEXT5.lockAll),
         engaged: allLocked,
         run: () => this.setMembers(pass, ids, { locked: !allLocked })
       },
       {
         icon: allHidden ? "eye-off" : "eye",
-        title: allHidden ? "Show all" : "Hide all",
+        title: allHidden ? this.t(TEXT5.showAll) : this.t(TEXT5.hideAll),
         engaged: allHidden,
         run: () => this.setMembers(pass, ids, { visible: allHidden })
       },
-      { icon: "trash", title: "Remove all", run: () => this.removeGroup(pass, g.id, true) }
+      { icon: "trash", title: this.t(TEXT5.removeAll), run: () => this.removeGroup(pass, g.id, true) }
     ]);
     el.dataset.rowKind = "group";
     el.dataset.id = g.id;
     el.dataset.pane = pane.id;
-    el.title = `${members.length} drawing${members.length === 1 ? "" : "s"} \u2014 drag to move them together`;
+    el.title = this.t(TEXT5.groupMembers, { count: members.length });
     if (this.renaming === g.id) {
       const name = el.querySelector(".vela-ot-name");
       const input = doc.createElement("input");
@@ -2041,7 +2214,7 @@ var ObjectTree = class extends SidePanel {
   drawRow(pass, d, inGroup = false) {
     const doc = this.el.ownerDocument;
     const { chart } = pass;
-    const markup = drawingMeta(d.type).icon;
+    const markup = drawingMeta(d.type, this.i18n).icon;
     let icon2;
     if (markup) {
       icon2 = doc.createElement("span");
@@ -2051,10 +2224,10 @@ var ObjectTree = class extends SidePanel {
     } else {
       icon2 = iconEl("pen", doc);
     }
-    const el = this.row(icon2, drawingLabel(d), d.visible, [
+    const el = this.row(icon2, drawingLabel(d, this.i18n), d.visible, [
       {
         icon: d.locked ? "lock" : "unlock",
-        title: d.locked ? "Unlock" : "Lock",
+        title: d.locked ? this.t(TEXT5.unlock) : this.t(TEXT5.lock),
         engaged: d.locked,
         run: () => {
           chart.drawings.lock(d.id, !d.locked);
@@ -2063,7 +2236,7 @@ var ObjectTree = class extends SidePanel {
       },
       {
         icon: d.visible ? "eye" : "eye-off",
-        title: d.visible ? "Hide" : "Show",
+        title: d.visible ? this.t(TEXT5.hide) : this.t(TEXT5.show),
         engaged: !d.visible,
         run: () => {
           chart.drawings.show(d.id, !d.visible);
@@ -2072,7 +2245,7 @@ var ObjectTree = class extends SidePanel {
       },
       {
         icon: "trash",
-        title: "Remove",
+        title: this.t(TEXT5.remove),
         run: () => {
           chart.drawings.remove(d.id);
           this.refresh();
@@ -2083,7 +2256,7 @@ var ObjectTree = class extends SidePanel {
     el.dataset.id = d.id;
     el.dataset.pane = d.paneId;
     el.dataset.drag = "1";
-    el.title = "Drag to restack, or onto another pane to move it there";
+    el.title = this.t(TEXT5.moveDrawingHint);
     if (inGroup) el.classList.add("vela-ot-subrow");
     if (this.selectedDrawings.has(d.id)) el.dataset.selected = "1";
     if (this.picked.has(d.id)) el.dataset.picked = "1";
@@ -2131,7 +2304,7 @@ var ObjectTree = class extends SidePanel {
       const t = doc.createElement("span");
       t.className = "vela-ot-tag";
       t.textContent = tag;
-      t.title = "Draws against its own price scale";
+      t.title = this.t(TEXT5.ownScaleHint);
       el.appendChild(t);
     }
     const acts = doc.createElement("span");
@@ -2162,7 +2335,7 @@ var ObjectTree = class extends SidePanel {
   makeGroup(ids) {
     if (!canGroup(ids, this.groups)) return;
     this.groupSeq += 1;
-    this.groups = [...this.groups, { id: `grp-${this.groupSeq}`, name: nextGroupName(this.groups), ids: [...ids] }];
+    this.groups = [...this.groups, { id: `grp-${this.groupSeq}`, name: nextGroupName(this.groups, this.i18n), ids: [...ids] }];
     this.picked.clear();
     this.render();
   }
@@ -2511,20 +2684,20 @@ var ObjectTree = class extends SidePanel {
     const { chart } = pass;
     const visible = chart.renderer.get("candleVisible") !== false;
     const items = [
-      b.entry(visible ? "Hide" : "Show", visible ? "eye-off" : "eye", () => {
+      b.entry(visible ? this.t(TEXT5.hide) : this.t(TEXT5.show), visible ? "eye-off" : "eye", () => {
         chart.renderer.set("candleVisible", !visible);
         this.refresh();
       })
     ];
     if (pass.stackable) {
       items.push(
-        b.entry("Bring to front", "arrow-up", () => {
+        b.entry(this.t(TEXT5.bringToFront), "arrow-up", () => {
           chart.renderer.set("candleZOrder", this.stackBounds(pass, PRICE_PANE_ID).top + 1);
           this.refresh();
         }, true)
       );
       items.push(
-        b.entry("Send to back", "arrow-down", () => {
+        b.entry(this.t(TEXT5.sendToBack), "arrow-down", () => {
           chart.renderer.set("candleZOrder", this.stackBounds(pass, PRICE_PANE_ID).bottom - 1);
           this.refresh();
         })
@@ -2548,24 +2721,24 @@ var ObjectTree = class extends SidePanel {
     const { chart } = pass;
     const handle = pass.handle(row.id);
     const items = [
-      b.entry(row.visible ? "Hide" : "Show", row.visible ? "eye-off" : "eye", () => {
+      b.entry(row.visible ? this.t(TEXT5.hide) : this.t(TEXT5.show), row.visible ? "eye-off" : "eye", () => {
         handle?.setVisible(!row.visible);
         this.refresh();
       })
     ];
     if (chart.renderer.supportsIndicatorSettings) {
-      items.push(b.entry("Indicator settings", "gear", () => chart.renderer.openIndicatorSettings(row.id)));
+      items.push(b.entry(this.t(TEXT5.indicatorSettings), "gear", () => chart.renderer.openIndicatorSettings(row.id)));
     }
     if (chart.panes.supported) {
       const moves = this.moveItems(b, pass, row.id, paneId);
-      if (moves.length > 0) items.push(b.submenu("Move to", "move-vertical", moves));
+      if (moves.length > 0) items.push(b.submenu(this.t(TEXT5.moveTo), "move-vertical", moves));
     }
     if (pass.stackable) {
-      items.push(b.entry("Bring to front", "arrow-up", () => chart.renderer.set("seriesOrder", { id: row.id, z: this.stackBounds(pass, paneId).top + 1 }), true));
-      items.push(b.entry("Send to back", "arrow-down", () => chart.renderer.set("seriesOrder", { id: row.id, z: this.stackBounds(pass, paneId).bottom - 1 })));
+      items.push(b.entry(this.t(TEXT5.bringToFront), "arrow-up", () => chart.renderer.set("seriesOrder", { id: row.id, z: this.stackBounds(pass, paneId).top + 1 }), true));
+      items.push(b.entry(this.t(TEXT5.sendToBack), "arrow-down", () => chart.renderer.set("seriesOrder", { id: row.id, z: this.stackBounds(pass, paneId).bottom - 1 })));
     }
     items.push(
-      b.entry("Remove", "trash", () => {
+      b.entry(this.t(TEXT5.remove), "trash", () => {
         handle?.remove();
         this.refresh();
       }, true)
@@ -2583,33 +2756,33 @@ var ObjectTree = class extends SidePanel {
     const current = pass.panes.find((p) => p.id === fromPane);
     const alone = current !== void 0 && current.kind !== "price" && paneRows(current).length <= 1;
     if (!alone) {
-      if (fromPane !== PRICE_PANE_ID) items.push(b.entry("New pane above", void 0, () => chart.panes.moveIndicator(id, { newPane: { before: fromPane } })));
-      items.push(b.entry("New pane below", void 0, () => chart.panes.moveIndicator(id, { newPane: { after: fromPane } })));
+      if (fromPane !== PRICE_PANE_ID) items.push(b.entry(this.t(TEXT5.newPaneAbove), void 0, () => chart.panes.moveIndicator(id, { newPane: { before: fromPane } })));
+      items.push(b.entry(this.t(TEXT5.newPaneBelow), void 0, () => chart.panes.moveIndicator(id, { newPane: { after: fromPane } })));
     }
     return items;
   }
   drawingMenu(b, pass, d) {
     const { chart } = pass;
     const items = [
-      b.entry(d.visible ? "Hide" : "Show", d.visible ? "eye-off" : "eye", () => {
+      b.entry(d.visible ? this.t(TEXT5.hide) : this.t(TEXT5.show), d.visible ? "eye-off" : "eye", () => {
         chart.drawings.show(d.id, !d.visible);
         this.refresh();
       }),
-      b.entry(d.locked ? "Unlock" : "Lock", d.locked ? "unlock" : "lock", () => {
+      b.entry(d.locked ? this.t(TEXT5.unlock) : this.t(TEXT5.lock), d.locked ? "unlock" : "lock", () => {
         chart.drawings.lock(d.id, !d.locked);
         this.refresh();
       }),
-      b.entry("Duplicate", "clone", () => {
+      b.entry(this.t(TEXT5.duplicate), "clone", () => {
         this.cloneInto(pass, d.id);
         this.render();
       }),
       // Front/back clear the WHOLE stack on a shared-z renderer — over or under the
       // candles and every indicator, not just the other drawings.
-      b.entry("Bring to front", "arrow-up", () => chart.drawings.bringToFront(d.id), true),
-      b.entry("Send to back", "arrow-down", () => chart.drawings.sendToBack(d.id))
+      b.entry(this.t(TEXT5.bringToFront), "arrow-up", () => chart.drawings.bringToFront(d.id), true),
+      b.entry(this.t(TEXT5.sendToBack), "arrow-down", () => chart.drawings.sendToBack(d.id))
     ];
     items.push(...this.groupingItems(b, d.id));
-    items.push(b.entry("Remove", "trash", () => chart.drawings.remove(d.id), true));
+    items.push(b.entry(this.t(TEXT5.remove), "trash", () => chart.drawings.remove(d.id), true));
     return items;
   }
   /** The grouping half of a drawing's menu: what it can do about the bundle it is (or isn't)
@@ -2619,15 +2792,15 @@ var ObjectTree = class extends SidePanel {
     const mine = groupOf(this.groups, id);
     const pick = this.picked.has(id) && this.picked.size > 1 ? [...this.picked] : null;
     if (pick && canGroup(pick, this.groups)) {
-      items.push(b.entry(`Group selection (${pick.length})`, "group", () => this.makeGroup(pick), true));
+      items.push(b.entry(this.t(TEXT5.groupPick, { count: pick.length }), "group", () => this.makeGroup(pick), true));
     } else if (!pick && mine === null) {
-      items.push(b.entry("New group", "group", () => this.makeGroup([id]), true));
+      items.push(b.entry(this.t(TEXT5.newGroup), "group", () => this.makeGroup([id]), true));
     }
     const others = this.groups.filter((g) => g.id !== mine?.id);
     if (!pick && others.length > 0) {
       items.push(
         b.submenu(
-          mine === null ? "Add to group" : "Move to group",
+          mine === null ? this.t(TEXT5.addToGroup) : this.t(TEXT5.moveToGroup),
           "folder-plus",
           others.map(
             (g) => b.entry(g.name, void 0, () => {
@@ -2641,7 +2814,7 @@ var ObjectTree = class extends SidePanel {
     }
     if (mine !== null) {
       items.push(
-        b.entry(`Remove from ${mine.name}`, "folder-minus", () => {
+        b.entry(this.t(TEXT5.removeFromGroup, { group: mine.name }), "folder-minus", () => {
           this.groups = removeFromGroups(this.groups, [id]);
           this.render();
         }, items.length === 0)
@@ -2654,24 +2827,24 @@ var ObjectTree = class extends SidePanel {
     const members = pass.chart.drawings.all().filter((d) => g.ids.includes(d.id));
     const { allHidden, allLocked } = groupState(members);
     const items = [
-      b.entry("Rename\u2026", "pen", () => {
+      b.entry(this.t(TEXT5.rename), "pen", () => {
         this.renaming = g.id;
         this.render();
       }),
-      b.entry(allHidden ? "Show all" : "Hide all", allHidden ? "eye" : "eye-off", () => this.setMembers(pass, ids, { visible: allHidden }), true),
-      b.entry(allLocked ? "Unlock all" : "Lock all", allLocked ? "unlock" : "lock", () => this.setMembers(pass, ids, { locked: !allLocked })),
-      b.entry("Select all", "group", () => {
+      b.entry(allHidden ? this.t(TEXT5.showAll) : this.t(TEXT5.hideAll), allHidden ? "eye" : "eye-off", () => this.setMembers(pass, ids, { visible: allHidden }), true),
+      b.entry(allLocked ? this.t(TEXT5.unlockAll) : this.t(TEXT5.lockAll), allLocked ? "unlock" : "lock", () => this.setMembers(pass, ids, { locked: !allLocked })),
+      b.entry(this.t(TEXT5.selectAll), "group", () => {
         this.picked = new Set(ids);
         this.selectOnChart(ids);
         this.render();
       })
     ];
     if (members.length > 0) {
-      items.push(b.entry("Bring all to front", "arrow-up", () => this.restackGroup(pass, g, "front")));
-      items.push(b.entry("Send all to back", "arrow-down", () => this.restackGroup(pass, g, "back")));
+      items.push(b.entry(this.t(TEXT5.bringAllToFront), "arrow-up", () => this.restackGroup(pass, g, "front")));
+      items.push(b.entry(this.t(TEXT5.sendAllToBack), "arrow-down", () => this.restackGroup(pass, g, "back")));
     }
-    items.push(b.entry("Ungroup", "ungroup", () => this.removeGroup(pass, g.id, false), true));
-    items.push(b.entry("Remove all", "trash", () => this.removeGroup(pass, g.id, true)));
+    items.push(b.entry(this.t(TEXT5.ungroup), "ungroup", () => this.removeGroup(pass, g.id, false), true));
+    items.push(b.entry(this.t(TEXT5.removeAll), "trash", () => this.removeGroup(pass, g.id, true)));
     return items;
   }
   /** Forget everything that refers to a drawing or group the chart no longer has — otherwise a
@@ -2689,6 +2862,21 @@ var ObjectTree = class extends SidePanel {
 };
 
 // src/widget/data-window.ts
+var TEXT6 = {
+  title: msg("widget.dataWindow.title", "Data window"),
+  timeSection: msg("widget.dataWindow.timeSection", "Time"),
+  date: msg("widget.dataWindow.date", "Date"),
+  time: msg("widget.dataWindow.time", "Time"),
+  open: msg("widget.dataWindow.open", "Open"),
+  high: msg("widget.dataWindow.high", "High"),
+  low: msg("widget.dataWindow.low", "Low"),
+  close: msg("widget.dataWindow.close", "Close"),
+  volume: msg("widget.dataWindow.volume", "Volume"),
+  priceSection: msg("widget.dataWindow.priceSection", "Price"),
+  noData: msg("widget.dataWindow.noData", "No data"),
+  noReadout: msg("widget.dataWindow.noReadout", "This renderer provides no data readout.")
+};
+var DATA_WINDOW_TITLE = TEXT6.title;
 var STYLE_ID5 = "vela-widget-datawindow";
 var CSS5 = `
 .vela-dw-group {
@@ -2714,19 +2902,21 @@ var CSS5 = `
 }
 .vela-dw-row:hover { background: var(--vela-hover); }
 .vela-dw-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vela-fg-bright); }
-.vela-dw-value { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
+/* Values are left-to-right isolates (dir="ltr"), so a sign keeps its place in a right-to-left page. */
+.vela-dw-value { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; unicode-bidi: isolate; }
 .vela-dw-empty { padding: 20px 10px; text-align: center; color: var(--vela-fg-muted); font-size: 12px; }
 `;
 var REFRESH_EVENTS2 = ["bar", "context:changed", "indicator:added", "indicator:removed", "indicator:visibility", "indicator:moved", "pane:changed", "market:changed", "history:complete"];
-var EM_DASH = "\u2014";
-function dataWindowSections(readout) {
+var EM_DASH = "—";
+function dataWindowSections(readout, i18n) {
+  const t = (m) => textOf(i18n, m);
   const sections = [];
   if (readout.date || readout.time) {
     sections.push({
-      title: "Time",
+      title: t(TEXT6.timeSection),
       lines: [
-        { label: "Date", value: readout.date || EM_DASH, color: "" },
-        { label: "Time", value: readout.time || EM_DASH, color: "" }
+        { label: t(TEXT6.date), value: readout.date || EM_DASH, color: "" },
+        { label: t(TEXT6.time), value: readout.time || EM_DASH, color: "" }
       ]
     });
   }
@@ -2734,13 +2924,13 @@ function dataWindowSections(readout) {
   if (ohlc) {
     const color = ohlc.up ? "var(--vela-up)" : "var(--vela-down)";
     const lines = [
-      { label: "Open", value: ohlc.o, color },
-      { label: "High", value: ohlc.h, color },
-      { label: "Low", value: ohlc.l, color },
-      { label: "Close", value: ohlc.c, color }
+      { label: t(TEXT6.open), value: ohlc.o, color },
+      { label: t(TEXT6.high), value: ohlc.h, color },
+      { label: t(TEXT6.low), value: ohlc.l, color },
+      { label: t(TEXT6.close), value: ohlc.c, color }
     ];
-    if (ohlc.vol !== void 0) lines.push({ label: "Volume", value: ohlc.vol, color });
-    sections.push({ title: "Price", lines });
+    if (ohlc.vol !== void 0) lines.push({ label: t(TEXT6.volume), value: ohlc.vol, color });
+    sections.push({ title: t(TEXT6.priceSection), lines });
   }
   for (const group of readout.groups) {
     sections.push({ title: group.name, lines: group.rows.map((r) => ({ label: r.label, value: r.value, color: r.color })) });
@@ -2748,8 +2938,8 @@ function dataWindowSections(readout) {
   return sections;
 }
 var DataWindow = class extends SidePanel {
-  constructor(host) {
-    super(host, "Data window", "vela-dw");
+  constructor(host, i18n) {
+    super(host, TEXT6.title, "vela-dw", i18n ? { i18n } : {});
     this.chart = null;
     this.unsubs = [];
     injectStyles(STYLE_ID5, CSS5, host.ownerDocument);
@@ -2770,6 +2960,10 @@ var DataWindow = class extends SidePanel {
     this.detach();
     super.destroy();
   }
+  relocalize() {
+    super.relocalize();
+    this.refresh();
+  }
   detach() {
     for (const u of this.unsubs) u();
     this.unsubs = [];
@@ -2780,11 +2974,11 @@ var DataWindow = class extends SidePanel {
     const doc = this.el.ownerDocument;
     const readout = this.chart.renderer.dataWindowReadout();
     this.body.replaceChildren();
-    const sections = readout ? dataWindowSections(readout) : [];
+    const sections = readout ? dataWindowSections(readout, this.i18n) : [];
     if (sections.length === 0) {
       const empty = doc.createElement("div");
       empty.className = "vela-dw-empty";
-      empty.textContent = readout ? "No data" : "This renderer provides no data readout.";
+      empty.textContent = this.t(readout ? TEXT6.noData : TEXT6.noReadout);
       this.body.appendChild(empty);
       return;
     }
@@ -2801,6 +2995,7 @@ var DataWindow = class extends SidePanel {
         label.textContent = line.label;
         const value = doc.createElement("span");
         value.className = "vela-dw-value";
+        value.dir = "ltr";
         value.textContent = line.value;
         if (line.color) value.style.color = line.color;
         row.append(label, value);
@@ -2846,7 +3041,8 @@ var PanelDock = class {
         minWidth: desc.minWidth,
         maxWidth: desc.maxWidth,
         overlay: desc.overlay,
-        maximizable: desc.maximizable
+        maximizable: desc.maximizable,
+        ...this.deps.i18n ? { i18n: this.deps.i18n } : {}
       });
       const entry = {
         id: desc.id,
@@ -2895,7 +3091,12 @@ var PanelDock = class {
   /** The docked panels in dock order — what a non-topbar chrome (the mobile
    *  three-dots drawer) lists so every panel stays reachable there too. */
   list() {
-    return this.entries.map((e) => ({ id: e.id, title: e.title, icon: e.icon }));
+    return this.entries.map((e) => ({ id: e.id, title: textOf(this.deps.i18n, e.title), icon: e.icon }));
+  }
+  /** Re-read every panel's header and the toggle tooltips in the current language. */
+  relocalize() {
+    for (const entry of this.entries) entry.panel.relocalize();
+    this.publish();
   }
   /** The dock's persistable state, or null when there is nothing worth saving. */
   getState() {
@@ -2972,7 +3173,7 @@ var PanelDock = class {
   }
   /** Push the current toggle group to the chrome, pressed states included. */
   publish() {
-    const buttons = this.entries.map((e) => ({ id: e.id, title: e.title, icon: e.icon }));
+    const buttons = this.list().slice();
     this.deps.chrome.setPanelButtons(buttons, (id) => this.toggle(id));
     for (const entry of this.entries) this.deps.chrome.setPanelActive(entry.id, entry.panel.open);
   }
@@ -3047,7 +3248,7 @@ var STYLE_ID6 = "vela-widget-symbolpicker";
 var CSS6 = `
 /* The dialog body is flush (a flex column): search + market tabs are a fixed head
    and the result list is the ONLY scroller, in both layouts. A sticky head over a
-   scrolling padded body is not an option \u2014 browsers pin sticky boxes to the
+   scrolling padded body is not an option — browsers pin sticky boxes to the
    scroller's content box, so the head lands one padding below the top and covers
    the first row. */
 .vela-sp-head { flex: none; padding: var(--vela-space-4) var(--vela-space-4) 0; }
@@ -3075,7 +3276,7 @@ var CSS6 = `
 .vela-sp-input::placeholder { text-transform: none; }
 .vela-sp-tabs { display: flex; gap: 14px; margin: 12px 2px 0; border-bottom: 1px solid var(--vela-border); padding-bottom: 8px; }
 /* Mobile (fullscreen dialog): the asset-class strip scrolls sideways instead of
-   overflowing the body, and the result list stops capping itself \u2014 it fills the
+   overflowing the body, and the result list stops capping itself — it fills the
    rest of the screen. The bottom inset (+ safe area) is the kit's: every mobile
    dialog body carries it, flush or not, so the list adds none of its own. */
 [data-layout='mobile'] .vela-sp-tabs { overflow-x: auto; scrollbar-width: none; gap: 6px; }
@@ -3142,7 +3343,7 @@ var CSS6 = `
     letter-spacing: 0.06em;
     text-transform: uppercase;
 }
-/* Provider brand marks \u2014 fixed by the venue, deliberately outside the theme palette. */
+/* Provider brand marks — fixed by the venue, deliberately outside the theme palette. */
 .vela-sp-badge[data-p='binance'] { color: #f0b90b; } /* palette-exempt: venue brand mark */
 .vela-sp-badge[data-p='hyperliquid'] { color: #50d2c1; } /* palette-exempt: venue brand mark */
 .vela-sp-empty { padding: var(--vela-space-3); color: var(--vela-fg-muted); text-align: center; }
@@ -3162,6 +3363,30 @@ var CSS6 = `
 .vela-sp-expander:hover { background: var(--vela-surface-elev); color: var(--vela-fg); }
 .vela-sp-row[data-member] { padding-left: 34px; }
 `;
+var TEXT7 = {
+  title: msg("widget.symbolPicker.title", "Symbol Search"),
+  search: msg("widget.symbolPicker.search", "Search symbol…"),
+  noMatch: msg("widget.symbolPicker.noMatch", "No symbols match."),
+  empty: msg("widget.symbolPicker.empty", "No symbols available yet."),
+  showContracts: msg("widget.symbolPicker.showContracts", "Show contracts")
+};
+var TABS = [
+  { id: "all", label: msg("widget.symbolPicker.tab.all", "All") },
+  { id: "stocks", label: msg("widget.symbolPicker.tab.stocks", "Stocks") },
+  { id: "etfs", label: msg("widget.symbolPicker.tab.etfs", "ETFs") },
+  { id: "crypto", label: msg("widget.symbolPicker.tab.crypto", "Crypto") },
+  { id: "futures", label: msg("widget.symbolPicker.tab.futures", "Futures") },
+  { id: "forex", label: msg("widget.symbolPicker.tab.forex", "Forex") },
+  { id: "commodities", label: msg("widget.symbolPicker.tab.commodities", "Commodities") }
+];
+var TAB_TYPES = {
+  crypto: ["crypto"],
+  stocks: ["stock"],
+  etfs: ["etf"],
+  futures: ["futures", "root"],
+  forex: ["forex"],
+  commodities: ["commodity"]
+};
 var PAGE = 100;
 var SymbolPicker = class {
   constructor(opts) {
@@ -3170,7 +3395,8 @@ var SymbolPicker = class {
     this.rows = [];
     this.highlighted = 0;
     this.seed = "";
-    this.activeTab = "All";
+    this.activeTab = "all";
+    this.tabButtons = [];
     this.visible = PAGE;
     /** The last filter pass returned fewer raw rows than asked — the pool is drained
      *  (checked BEFORE folding: folding shortens pages without meaning exhaustion). */
@@ -3184,7 +3410,7 @@ var SymbolPicker = class {
     injectStyles(STYLE_ID6, CSS6, doc);
     this.input = doc.createElement("input");
     this.input.className = "vela-sp-input";
-    this.input.placeholder = "Search symbol\u2026";
+    this.input.placeholder = textOf(opts.i18n, TEXT7.search);
     this.input.setAttribute("spellcheck", "false");
     const searchRow = doc.createElement("div");
     searchRow.className = "vela-sp-searchrow";
@@ -3193,13 +3419,15 @@ var SymbolPicker = class {
     this.tabs.className = "vela-sp-tabs";
     const head = doc.createElement("div");
     head.className = "vela-sp-head";
-    for (const t of ["All", "Stocks", "ETFs", "Crypto", "Futures", "Forex", "Commodities"]) {
+    for (const tab of TABS) {
       const b = doc.createElement("button");
       b.className = "vela-sp-tab";
-      b.textContent = t;
-      if (t === this.activeTab) b.dataset.active = "1";
+      b.dataset.tab = tab.id;
+      b.textContent = textOf(opts.i18n, tab.label);
+      this.tabButtons.push({ el: b, label: tab.label });
+      if (tab.id === this.activeTab) b.dataset.active = "1";
       b.addEventListener("click", () => {
-        this.activeTab = t;
+        this.activeTab = tab.id;
         for (const c of this.tabs.children) delete c.dataset.active;
         b.dataset.active = "1";
         this.refresh();
@@ -3216,13 +3444,14 @@ var SymbolPicker = class {
       this.grow();
     });
     this.dialog = new Dialog({
-      title: "Symbol Search",
+      title: textOf(opts.i18n, TEXT7.title),
       host: opts.host,
       closeOnInteractOutside: true,
       flush: true,
       content: (body) => body.append(head, this.list),
       onOpenChange: (open) => {
         if (open) {
+          this.relabel();
           this.input.value = this.seed.toUpperCase();
           this.seed = "";
           this.refresh();
@@ -3346,7 +3575,7 @@ var SymbolPicker = class {
       Promise.resolve([...raw]).then((copy) => hook(copy)).then((out) => {
         this.ranked = { key, result: dedupeSymbols(out) };
       }).catch((err) => {
-        console.warn("[vela] symbol ranking failed \u2014 pool order kept:", err);
+        console.warn("[vela] symbol ranking failed — pool order kept:", err);
         this.ranked = { key, result: [...raw] };
       }).finally(() => {
         this.ranking = false;
@@ -3355,10 +3584,17 @@ var SymbolPicker = class {
     }
     return this.ranked?.result ?? raw;
   }
+  /** The dialog's fixed text in the shell's language, re-read on every open. */
+  relabel() {
+    const i18n = this.opts.i18n;
+    this.dialog.titleEl.textContent = textOf(i18n, TEXT7.title);
+    this.input.placeholder = textOf(i18n, TEXT7.search);
+    for (const { el, label } of this.tabButtons) el.textContent = textOf(i18n, label);
+  }
   computeRows() {
-    const TAB_TYPES = { Crypto: ["crypto"], Stocks: ["stock"], ETFs: ["etf"], Futures: ["futures", "root"], Forex: ["forex"], Commodities: ["commodity"] };
     const all = this.pool();
-    const pool = this.activeTab === "All" ? all : all.filter((s) => TAB_TYPES[this.activeTab]?.includes((s.type ?? "").toLowerCase()) || this.activeTab === "Crypto" && (s.type ?? "").toLowerCase() === "futures");
+    const tab = this.activeTab;
+    const pool = tab === "all" ? all : all.filter((s) => TAB_TYPES[tab].includes((s.type ?? "").toLowerCase()) || tab === "crypto" && (s.type ?? "").toLowerCase() === "futures");
     const filtered = filterSymbols(pool, this.input.value, this.visible, symbolRanking() ? false : TOP_TICKERS);
     this.exhausted = filtered.length < this.visible;
     const folded = foldGroups(filtered);
@@ -3386,7 +3622,7 @@ var SymbolPicker = class {
     if (!this.rows.length) {
       const empty = doc.createElement("div");
       empty.className = "vela-sp-empty";
-      empty.textContent = this.input.value ? "No symbols match." : "No symbols indexed (provider still loading?).";
+      empty.textContent = textOf(this.opts.i18n, this.input.value ? TEXT7.noMatch : TEXT7.empty);
       this.list.appendChild(empty);
       return;
     }
@@ -3422,7 +3658,7 @@ var SymbolPicker = class {
       row.dataset.group = "1";
       const expander = doc.createElement("button");
       expander.className = "vela-sp-expander";
-      expander.setAttribute("aria-label", "Show contracts");
+      expander.setAttribute("aria-label", textOf(this.opts.i18n, TEXT7.showContracts));
       expander.appendChild(iconEl(this.expanded.has(groupKeyOf(s)) ? "chevron-down" : "chevron-right", doc));
       row.appendChild(expander);
     } else if (s.group != null && this.expanded.has(groupKeyOf(s))) row.dataset.member = "1";
@@ -3438,6 +3674,17 @@ var SymbolPicker = class {
 };
 
 // src/widget/indicator-picker.ts
+var TEXT8 = {
+  title: msg("widget.indicatorPicker.title", "Indicators"),
+  search: msg("widget.indicatorPicker.search", "Search…"),
+  beta: msg("widget.indicatorPicker.beta", "beta"),
+  remove: msg("widget.indicatorPicker.remove", "Remove from chart"),
+  onChart: msg("widget.indicatorPicker.onChart", "On chart · {count}"),
+  general: msg("widget.indicatorPicker.general", "General"),
+  noMatch: msg("widget.indicatorPicker.noMatch", "No indicators match."),
+  empty: msg("widget.indicatorPicker.empty", "No indicators in the manifest.")
+};
+var GENERAL = "General";
 var STYLE_ID7 = "vela-widget-indpicker";
 var CSS7 = `
 .vela-ip-searchrow {
@@ -3455,7 +3702,7 @@ var CSS7 = `
 .vela-ip-searchrow .vela-icon { color: var(--vela-fg-muted); }
 .vela-ip-search { flex: 1; background: transparent; color: var(--vela-fg); border: none; font-size: 14px; outline: none; }
 .vela-ip-list { max-height: 50vh; overflow: auto; min-width: 380px; }
-/* Mobile (fullscreen dialog): no width floor \u2014 380px would overflow a phone \u2014
+/* Mobile (fullscreen dialog): no width floor — 380px would overflow a phone —
    and no height cap; the fullscreen body owns the scrolling. */
 [data-layout='mobile'] .vela-ip-list { min-width: 0; max-height: none; }
 .vela-ip-list::-webkit-scrollbar { width: 8px; }
@@ -3519,7 +3766,7 @@ var IndicatorPicker = class {
     injectStyles(STYLE_ID7, CSS7, doc);
     this.search = doc.createElement("input");
     this.search.className = "vela-ip-search";
-    this.search.placeholder = "Search\u2026";
+    this.search.placeholder = this.t(TEXT8.search);
     this.search.spellcheck = false;
     this.search.addEventListener("input", () => this.refresh());
     const searchRow = doc.createElement("div");
@@ -3528,7 +3775,7 @@ var IndicatorPicker = class {
     this.list = doc.createElement("div");
     this.list.className = "vela-ip-list";
     this.dialog = new Dialog({
-      title: "Indicators",
+      title: this.t(TEXT8.title),
       host: opts.host,
       draggable: true,
       closeOnInteractOutside: true,
@@ -3538,6 +3785,7 @@ var IndicatorPicker = class {
         this.isOpen = open;
         if (open) {
           this.search.value = "";
+          this.relabel();
           this.refresh();
           if (!this.search.closest('[data-layout="mobile"]')) setTimeout(() => this.search.focus(), 0);
         }
@@ -3559,6 +3807,14 @@ var IndicatorPicker = class {
   open() {
     this.dialog.show();
   }
+  /** The dialog's fixed text in the shell's language, re-read on every open. */
+  relabel() {
+    this.dialog.titleEl.textContent = this.t(TEXT8.title);
+    this.search.placeholder = this.t(TEXT8.search);
+  }
+  t(text, values) {
+    return textOf(this.opts.i18n, text, values);
+  }
   /** Re-render the lists if the dialog is open (async catalog updates land late). */
   sync() {
     if (this.isOpen) this.refresh();
@@ -3571,11 +3827,21 @@ var IndicatorPicker = class {
   }
   refresh() {
     const doc = this.list.ownerDocument;
-    const q = this.search.value.trim().toLowerCase();
+    const raw = this.search.value.trim();
+    const locale = this.opts.i18n?.locale;
+    const lower = (s) => {
+      try {
+        return s.toLocaleLowerCase(locale);
+      } catch {
+        return s.toLowerCase();
+      }
+    };
+    const q = lower(raw);
+    const qPlain = raw.toLowerCase();
     const library = this.opts.library();
     const instances = this.opts.onChart();
     this.list.replaceChildren();
-    const match = (r) => !q || r.name.toLowerCase().includes(q);
+    const match = (r) => !raw || [r.name, ...r.aliases ?? []].some((n) => lower(n).includes(q) || n.toLowerCase().includes(qPlain));
     const rowEl = (r, opts) => {
       const row = doc.createElement("div");
       row.className = "vela-ip-row";
@@ -3589,7 +3855,7 @@ var IndicatorPicker = class {
       if (r.beta) {
         const beta = doc.createElement("span");
         beta.className = "vela-ip-badge";
-        beta.textContent = "beta";
+        beta.textContent = this.t(TEXT8.beta);
         row.appendChild(beta);
       }
       if (opts.instance !== void 0) {
@@ -3603,7 +3869,7 @@ var IndicatorPicker = class {
         const trash = doc.createElement("button");
         trash.className = "vela-ip-trash";
         trash.appendChild(iconEl("trash", doc));
-        trash.title = "Remove from chart";
+        trash.title = this.t(TEXT8.remove);
         row.appendChild(trash);
       }
       return row;
@@ -3614,7 +3880,7 @@ var IndicatorPicker = class {
       card.className = "vela-ip-oncard";
       const title = doc.createElement("div");
       title.className = "vela-ip-group";
-      title.textContent = `On chart \xB7 ${onChart.length}`;
+      title.textContent = this.t(TEXT8.onChart, { count: onChart.length });
       card.appendChild(title);
       for (const [r, i] of onChart) card.appendChild(rowEl(r, { instance: i }));
       this.list.appendChild(card);
@@ -3622,7 +3888,7 @@ var IndicatorPicker = class {
     const byCat = /* @__PURE__ */ new Map();
     library.forEach((r, i) => {
       if (!match(r)) return;
-      const cat = r.category ?? "General";
+      const cat = r.category ?? GENERAL;
       const bucket = byCat.get(cat) ?? [];
       bucket.push([r, i]);
       byCat.set(cat, bucket);
@@ -3630,14 +3896,14 @@ var IndicatorPicker = class {
     for (const [cat, bucket] of byCat) {
       const title = doc.createElement("div");
       title.className = "vela-ip-group";
-      title.textContent = cat;
+      title.textContent = cat === GENERAL ? this.t(TEXT8.general) : cat;
       this.list.appendChild(title);
       for (const [r, i] of bucket) this.list.appendChild(rowEl(r, { library: i }));
     }
     if (!onChart.length && byCat.size === 0) {
       const empty = doc.createElement("div");
       empty.className = "vela-ip-empty";
-      empty.textContent = library.length ? "No indicators match." : "No indicators in the manifest.";
+      empty.textContent = this.t(library.length ? TEXT8.noMatch : TEXT8.empty);
       this.list.appendChild(empty);
     }
   }
@@ -3665,8 +3931,18 @@ var CSS8 = `
 .vela-tq-hint { margin-top: var(--vela-space-2); text-align: center; color: var(--vela-fg-muted); min-height: 1.2em; }
 .vela-tq-hint[data-invalid] { color: var(--vela-danger); }
 `;
+var TEXT9 = {
+  title: msg("widget.timeframeQuick.title", "Change timeframe"),
+  // The codes are what the field accepts, typed as is in every language.
+  example: msg("widget.timeframeQuick.example", "e.g. 15, 4H, D, 3M"),
+  invalid: msg("widget.timeframeQuick.invalid", "Not a timeframe")
+};
 var TimeframeQuick = class {
+  t(text) {
+    return textOf(this.i18n, text);
+  }
   constructor(opts) {
+    this.i18n = opts.i18n ?? null;
     const doc = (opts.host ?? document.body).ownerDocument;
     injectStyles(STYLE_ID8, CSS8, doc);
     this.input = doc.createElement("input");
@@ -3675,7 +3951,7 @@ var TimeframeQuick = class {
     this.hint = doc.createElement("div");
     this.hint.className = "vela-tq-hint";
     this.dialog = new Dialog({
-      title: "Change timeframe",
+      title: this.t(TEXT9.title),
       host: opts.host,
       draggable: true,
       closeOnInteractOutside: true,
@@ -3697,7 +3973,12 @@ var TimeframeQuick = class {
       }
     });
   }
+  /** The dialog's title in the shell's language, re-read on every open. */
+  relabel() {
+    this.dialog.titleEl.textContent = this.t(TEXT9.title);
+  }
   open(seed = "") {
+    this.relabel();
     this.dialog.show();
     this.input.value = seed.toUpperCase();
     this.renderHint();
@@ -3728,21 +4009,32 @@ var TimeframeQuick = class {
   }
   renderHint() {
     const raw = this.input.value.trim();
-    const parsed = parseTimeframe(raw);
+    const parsed = parseTimeframe(raw, this.i18n);
     if (!raw) {
-      this.hint.textContent = "e.g. 15, 4H, D, 3M";
+      this.hint.textContent = this.t(TEXT9.example);
       delete this.hint.dataset.invalid;
     } else if (parsed.valid) {
       this.hint.textContent = parsed.label ?? "";
       delete this.hint.dataset.invalid;
     } else {
-      this.hint.textContent = "Not a timeframe";
+      this.hint.textContent = this.t(TEXT9.invalid);
       this.hint.dataset.invalid = "1";
     }
   }
 };
 
 // src/widget/shortcuts-help.ts
+var TEXT10 = {
+  title: msg("widget.shortcuts.title", "Keyboard shortcuts"),
+  mouse: msg("widget.shortcuts.mouse", "Mouse"),
+  scroll: msg("widget.shortcuts.scrollHistory", "Scroll through history"),
+  scrollKeys: msg("widget.shortcuts.scrollHistoryKeys", "Shift+Scroll"),
+  measure: msg("widget.shortcuts.measure", "Measure from the press point"),
+  measureKeys: msg("widget.shortcuts.measureKeys", "Shift+Click"),
+  erase: msg("widget.shortcuts.deleteDrawing", "Delete the drawing under the cursor"),
+  eraseKeys: msg("widget.shortcuts.deleteDrawingKeys", "Middle-click"),
+  typing: msg("widget.shortcuts.typing", "Typing a letter or 0 opens the symbol search; typing a digit from 1 to 9 opens the timeframe entry.")
+};
 var STYLE_ID9 = "vela-widget-shortcuts";
 var CSS9 = `
 .vela-sh-cat {
@@ -3766,13 +4058,15 @@ var CSS9 = `
 .vela-sh-static { color: var(--vela-fg-muted); font-size: var(--vela-font-size-sm); margin-top: var(--vela-space-2); }
 `;
 var ShortcutsHelp = class {
-  constructor(keymap, host, onOpenChange) {
+  /** `i18n` returns the shell's current translator; the panel reads it each time it opens. */
+  constructor(keymap, host, onOpenChange, i18n) {
     this.keymap = keymap;
+    this.i18n = i18n ?? englishTranslator;
     const doc = (host ?? document.body).ownerDocument;
     injectStyles(STYLE_ID9, CSS9, doc);
     this.list = doc.createElement("div");
     this.dialog = new Dialog({
-      title: "Keyboard shortcuts",
+      title: this.i18n().t(TEXT10.title),
       host,
       closeOnInteractOutside: true,
       content: (body) => body.appendChild(this.list),
@@ -3793,6 +4087,9 @@ var ShortcutsHelp = class {
   }
   refresh() {
     const doc = this.list.ownerDocument;
+    const i18n = this.i18n();
+    const t = (m) => i18n.t(m);
+    this.dialog.titleEl.textContent = t(TEXT10.title);
     this.list.replaceChildren();
     const addCategory = (text) => {
       const cat = doc.createElement("div");
@@ -3818,7 +4115,7 @@ var ShortcutsHelp = class {
       this.list.appendChild(row);
     };
     const byCategory = /* @__PURE__ */ new Map();
-    for (const b of this.keymap.bindings()) {
+    for (const b of this.keymap.bindings(i18n)) {
       const bucket = byCategory.get(b.category) ?? [];
       bucket.push(b);
       byCategory.set(b.category, bucket);
@@ -3827,13 +4124,13 @@ var ShortcutsHelp = class {
       addCategory(category);
       for (const b of bindings) addRow(b.label, b.display);
     }
-    addCategory("Mouse");
-    addRow("Scroll through history", ["Shift+Scroll"]);
-    addRow("Measure from the press point", ["Shift+Click"]);
-    addRow("Delete the drawing under the cursor", ["Middle-click"]);
+    addCategory(t(TEXT10.mouse));
+    addRow(t(TEXT10.scroll), [t(TEXT10.scrollKeys)]);
+    addRow(t(TEXT10.measure), [t(TEXT10.measureKeys)]);
+    addRow(t(TEXT10.erase), [t(TEXT10.eraseKeys)]);
     const s = doc.createElement("div");
     s.className = "vela-sh-static";
-    s.textContent = "Typing a letter or 0 opens the symbol search; typing a digit from 1 to 9 opens the timeframe entry.";
+    s.textContent = t(TEXT10.typing);
     this.list.appendChild(s);
   }
 };
@@ -3973,6 +4270,20 @@ function sanitizeDrawingTools(raw) {
   if (typeof r.stay === "boolean") out.stay = r.stay;
   return Object.keys(out).length > 0 ? out : null;
 }
+function successorNative(entry) {
+  const type = typeof entry === "string" ? entry : entry.type;
+  if (type !== "linear-regression") return entry;
+  const hidden = typeof entry === "object" && entry.hidden === true;
+  const { mode, lineColor, ...rest } = typeof entry === "object" ? entry.inputs ?? {} : {};
+  const slope = mode === "Slope";
+  const inputs = slope ? { ...rest, ...lineColor !== void 0 ? { lineColor } : {} } : (
+    // Saved deltas omit the curve's 100-bar default, which the LSMA's default is not.
+    { length: 100, ...rest, ...lineColor !== void 0 ? { neutralColor: lineColor } : {} }
+  );
+  const next = slope ? "linear-regression-slope" : "lsma";
+  const hasInputs = Object.keys(inputs).length > 0;
+  return hasInputs || hidden ? { type: next, ...hasInputs ? { inputs } : {}, ...hidden ? { hidden } : {} } : next;
+}
 function sanitizeCell(raw) {
   if (raw == null || typeof raw !== "object") return null;
   const c = raw;
@@ -4012,7 +4323,7 @@ function sanitizeCell(raw) {
         return [inputs || hidden ? { type: e.type, ...inputs ? { inputs } : {}, ...hidden ? { hidden } : {} } : e.type];
       }
       return [];
-    }) : [];
+    }).map(successorNative) : [];
     out.indicators = { manifest, natives };
   }
   const ext = sanitizeExt(c.ext);
@@ -4170,7 +4481,7 @@ function decimalsFor(ref) {
   return a >= 1 ? 2 : a >= 0.01 ? 4 : 6;
 }
 function fmtPrice(n, dp) {
-  if (n == null || !Number.isFinite(n)) return "\u2014";
+  if (n == null || !Number.isFinite(n)) return "—";
   const d = dp ?? decimalsFor(n);
   return n.toLocaleString("en-US", { minimumFractionDigits: d, maximumFractionDigits: d });
 }
@@ -4181,13 +4492,25 @@ function fmtChange(open, close) {
   const sign = diff >= 0 ? "+" : "";
   return `${sign}${fmtPrice(diff, decimalsFor(close))} (${sign}${pct.toFixed(2)}%)`;
 }
-function fmtChangePct(open, close) {
-  if (open == null || close == null || !Number.isFinite(open) || !Number.isFinite(close) || open === 0) return "";
-  const pct = (close - open) / open * 100;
-  return `${pct >= 0 ? "+" : ""}${pct.toFixed(2)}%`;
-}
 
 // src/widget/statusline-model.ts
+var CELL_LABELS = {
+  open: msg("widget.statusline.openShort", "O"),
+  high: msg("widget.statusline.highShort", "H"),
+  low: msg("widget.statusline.lowShort", "L"),
+  close: msg("widget.statusline.closeShort", "C")
+};
+var STATUSLINE_PART_LABELS = {
+  logo: msg("widget.statusline.part.logo", "Symbol logo"),
+  name: msg("widget.statusline.part.name", "Symbol name"),
+  market: msg("widget.statusline.part.market", "Market status"),
+  ohlc: msg("widget.statusline.part.ohlc", "OHLC values"),
+  change: msg("widget.statusline.part.change", "Bar change values")
+};
+var TEXT11 = {
+  hideChart: msg("widget.statusline.hideChart", "Hide chart"),
+  showChart: msg("widget.statusline.showChart", "Show chart")
+};
 function segmentVisibility(parts, chartHidden = false) {
   return { avatar: parts.logo, symbol: parts.name, meta: parts.name, market: parts.market, ohlc: parts.ohlc && !chartHidden, change: parts.change && !chartHidden, eye: chartHidden };
 }
@@ -4197,28 +4520,31 @@ var STATUSLINE_LADDER = [
   { stacked: true, level: "compact" },
   { stacked: true, level: "minimal" }
 ];
-function readoutCells(level, readout) {
+function readoutCells(level, readout, i18n) {
   if (readout === "value") return [{ key: "close", label: "" }];
+  const label = (key) => textOf(i18n, CELL_LABELS[key]);
   if (level === "full") {
     return [
-      { key: "open", label: "O" },
-      { key: "high", label: "H" },
-      { key: "low", label: "L" },
-      { key: "close", label: "C" }
+      { key: "open", label: label("open") },
+      { key: "high", label: label("high") },
+      { key: "low", label: label("low") },
+      { key: "close", label: label("close") }
     ];
   }
-  return [{ key: "close", label: level === "compact" ? "C" : "" }];
+  return [{ key: "close", label: level === "compact" ? label("close") : "" }];
 }
-function statuslineMenuItems(parts, chartVisible) {
+function statuslineMenuItems(parts, chartVisible, i18n) {
+  const t = (m) => textOf(i18n, m);
   return [
-    { id: "part:logo", label: "Symbol logo", checked: parts.logo },
-    { id: "part:name", label: "Symbol name", checked: parts.name },
-    { id: "part:market", label: "Market status", checked: parts.market },
-    { id: "part:ohlc", label: "OHLC values", checked: parts.ohlc },
-    { id: "part:change", label: "Bar change values", checked: parts.change },
-    { id: "chart", label: chartVisible ? "Hide chart" : "Show chart", separatorBefore: true }
+    { id: "part:logo", label: t(STATUSLINE_PART_LABELS.logo), checked: parts.logo },
+    { id: "part:name", label: t(STATUSLINE_PART_LABELS.name), checked: parts.name },
+    { id: "part:market", label: t(STATUSLINE_PART_LABELS.market), checked: parts.market },
+    { id: "part:ohlc", label: t(STATUSLINE_PART_LABELS.ohlc), checked: parts.ohlc },
+    { id: "part:change", label: t(STATUSLINE_PART_LABELS.change), checked: parts.change },
+    { id: "chart", label: t(chartVisible ? TEXT11.hideChart : TEXT11.showChart), separatorBefore: true }
   ];
 }
+var SHOW_CHART_LABEL = TEXT11.showChart;
 
 // src/widget/statusline.ts
 var STYLE_ID10 = "vela-widget-statusline";
@@ -4227,7 +4553,7 @@ var CSS10 = `
     position: absolute;
     top: var(--vela-space-2);
     /* Track the indicator legend's left edge: the renderer publishes its toolbar gutter
-     * on the mount container, and the legend sits 10px into the plot to its right \u2014
+     * on the mount container, and the legend sits 10px into the plot to its right —
      * so the two columns stay aligned whether the toolbar is docked (44px), collapsed
      * (16px), or absent entirely (a workspace cell: 0). */
     left: calc(var(--vela-toolbar-gutter, 0px) + 10px);
@@ -4243,8 +4569,8 @@ var CSS10 = `
     color: var(--vela-fg);
     font-size: var(--vela-font-size-md);
     /* Same chip treatment as the indicator legend rows (InputsUI): a translucent wash of
-     * the chart background when idle \u2014 enough to keep the readout legible when candles
-     * reach it \u2014 and the solid chart background on hover. Symmetric 7px padding with a
+     * the chart background when idle — enough to keep the readout legible when candles
+     * reach it — and the solid chart background on hover. Symmetric 7px padding with a
      * compensating negative margin (mirroring the legend rows) keeps the avatar's left
      * edge on the legend column's left edge (both at left:10px) while the chip itself
      * extends 7px further left, so both columns' chips share the same left edge. */
@@ -4256,12 +4582,12 @@ var CSS10 = `
 }
 /* Hovering opens the chip the same way a legend row opens: solid chart background
  * plus the same inset neutral outline the indicator rows wear (InputsUI's
- * setRowHighlighted) \u2014 the two columns read as one family. */
+ * setRowHighlighted) — the two columns read as one family. */
 .vela-statusline:hover { background: var(--vela-bg); box-shadow: inset 0 0 0 1px var(--vela-border); }
-/* Chart hidden (the price series' eye \u2014 renderer 'candleVisible'): the line dims to
+/* Chart hidden (the price series' eye — renderer 'candleVisible'): the line dims to
  * the same 0.5 wash a hidden indicator's legend row wears. */
 .vela-statusline.vela-sl-chart-hidden { opacity: 0.5; }
-/* Two rows inside the chip \u2014 the identity (logo / symbol / meta / market badge) and the
+/* Two rows inside the chip — the identity (logo / symbol / meta / market badge) and the
  * value readout (O/H/L/C + change, or the show-chart eye). In the widest layout they sit
  * side by side on one line; the STACKED layouts (fit() decides, see the ladder in
  * statusline-model) turn the chip into a column so the values drop under the symbol. */
@@ -4278,7 +4604,7 @@ var CSS10 = `
      * that follows the chip (see the stacked legend shift below). */
     row-gap: var(--vela-space-1);
 }
-/* Stacked, the identity row may shrink (the meta carries the ellipsis) \u2014 the values row
+/* Stacked, the identity row may shrink (the meta carries the ellipsis) — the values row
  * never does, so its overflow is what fit() measures to keep descending the ladder. */
 .vela-statusline.vela-sl-stacked .vela-sl-identity { max-width: 100%; }
 .vela-statusline.vela-sl-stacked .vela-sl-meta {
@@ -4301,25 +4627,28 @@ var CSS10 = `
 }
 .vela-statusline .vela-sl-symbol { font-weight: 600; font-size: var(--vela-font-size-lg); }
 .vela-statusline .vela-sl-meta { color: var(--vela-fg-muted); font-size: var(--vela-font-size-md); font-weight: 600; }
-/* The meta opens with "\xB7 " \u2014 sit its dot one space-width after the ticker, as far as the
+/* The meta opens with "· " — sit its dot one space-width after the ticker, as far as the
  * venue sits after it, not a full row gap away. */
 .vela-statusline .vela-sl-symbol + .vela-sl-meta { margin-left: calc(var(--vela-space-1) - var(--vela-space-2)); }
-/* Market status badge \u2014 a kit callout bubble (icon-only 16px circle, label on hover
+/* Market status badge — a kit callout bubble (icon-only 16px circle, label on hover
  * via the kit tooltip); the session tint is applied per status in setMarketStatus. While
  * the chart replays past bars it wears the replay badge instead (the inverse chip). */
 .vela-statusline .vela-sl-market { align-self: center; display: inline-flex; }
 .vela-statusline .vela-sl-market > [hidden] { display: none !important; }
 .vela-statusline .vela-sl-replay-badge, .vela-statusline .vela-sl-replay-badge svg { display: block; width: 16px; height: 16px; }
 /* Tabular figures: every digit has one advance, so a readout whose text changes only in
- * its digits keeps its width \u2014 render() skips the ladder for those (see widthKey). */
+ * its digits keeps its width — render() skips the ladder for those (see widthKey). */
 .vela-statusline .vela-sl-values { font-variant-numeric: tabular-nums; }
 .vela-statusline .vela-sl-ohlc { display: flex; gap: var(--vela-space-1); color: var(--vela-fg-muted); }
 .vela-statusline .vela-sl-ohlc b { color: var(--vela-fg); font-weight: 500; }
-/* The change value wears the SAME ink as the OHLC values (set inline per render) \u2014
+/* Prices and the signed change are left-to-right isolates (each carries dir="ltr"): inside a
+ * right-to-left page the row's order mirrors, but a sign stays in front of its number. */
+.vela-statusline .vela-sl-ohlc b, .vela-statusline .vela-sl-change { unicode-bidi: isolate; }
+/* The change value wears the SAME ink as the OHLC values (set inline per render) —
  * these are the pre-ink fallbacks only. */
 .vela-statusline .vela-sl-change[data-dir='up'] { color: var(--vela-up); }
 .vela-statusline .vela-sl-change[data-dir='down'] { color: var(--vela-down); }
-/* The show-chart eye \u2014 out only while the chart is hidden (syncParts drives display),
+/* The show-chart eye — out only while the chart is hidden (syncParts drives display),
  * replacing the value readout it took away. Same footprint as a legend action button. */
 .vela-statusline .vela-sl-eye {
     align-self: center;
@@ -4338,18 +4667,18 @@ var CSS10 = `
 }
 .vela-statusline .vela-sl-eye:hover { color: var(--vela-fg); background: color-mix(in srgb, var(--vela-fg) 12%, transparent); }
 /* Stack the TOP pane's legend below the status line (lower study panes stay put).
- * The renderer marks whichever legend sits at the plot's top edge \u2014 the price pane
- * normally, or a maximized study pane filling the plot \u2014 so the legend never merges
+ * The renderer marks whichever legend sits at the plot's top edge — the price pane
+ * normally, or a maximized study pane filling the plot — so the legend never merges
  * with the status line whichever pane owns the top. The renderer sets the legend's
- * inline top \u2014 shift with a transform, don't fight it. Scoped to hosts that actually
- * CARRY a status line (the marker class set by the Statusline constructor) \u2014 the
+ * inline top — shift with a transform, don't fight it. Scoped to hosts that actually
+ * CARRY a status line (the marker class set by the Statusline constructor) — the
  * stylesheet is document-global, so a bare attribute selector here would shift every
  * chart on the page, including statusline-less ones. */
 .vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(26px); }
-/* A stacked chip is two lines tall \u2014 the legend shifts one more line. fit() flags the
+/* A stacked chip is two lines tall — the legend shifts one more line. fit() flags the
  * host whenever the ladder lands on a stacked layout. */
 .vela-has-statusline.vela-sl-stacked-host [${LEGEND_AT_TOP_ATTR}] { transform: translateY(40px); }
-/* Mobile: the same ladder at the phone's type scale \u2014 the width alone decides how much
+/* Mobile: the same ladder at the phone's type scale — the width alone decides how much
  * of the readout fits, exactly as on a narrow desktop chart. */
 [data-layout='mobile'] .vela-statusline { font-size: var(--vela-font-size-sm); }
 [data-layout='mobile'] .vela-statusline .vela-sl-symbol { font-size: var(--vela-font-size-md); }
@@ -4358,14 +4687,16 @@ function baseOfTicker(ticker) {
   return ticker.replace(/[-_/]?(USDT|USDC|USD1|USDS|BUSD|USD|EUR|PERP)$/i, "") || ticker;
 }
 var MARKET_LABELS = {
-  open: "Market Open",
-  pre: "Pre-Market",
-  post: "Post-Market",
-  extended: "Extended Hours",
-  closed: "Market Closed",
-  holiday: "Market Holiday"
+  open: msg("widget.statusline.market.open", "Market Open"),
+  pre: msg("widget.statusline.market.pre", "Pre-Market"),
+  post: msg("widget.statusline.market.post", "Post-Market"),
+  extended: msg("widget.statusline.market.extended", "Extended Hours"),
+  closed: msg("widget.statusline.market.closed", "Market Closed"),
+  holiday: msg("widget.statusline.market.holiday", "Market Holiday")
 };
-var REPLAY_LABEL = "Replay Mode";
+var REPLAY_LABEL = msg("widget.statusline.replay", "Replay Mode");
+var CHANGE_TEXT = msg("widget.statusline.change", "{change} ({percent})");
+var EM_DASH2 = "—";
 var REPLAY_BADGE_SVG = '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="8" style="fill: var(--vela-selected-bg)"/><path d="M11.7 4.75v6.5L7.2 8zM7.2 4.75v6.5L2.7 8z" style="fill: var(--vela-selected-fg); stroke: var(--vela-selected-fg); stroke-width: 0.8; stroke-linejoin: round"/></svg>';
 var MARKET_INKS = {
   open: "var(--vela-up)",
@@ -4434,13 +4765,16 @@ var Statusline = class {
     this.fitKey = null;
     /** Web fonts landing after the last fit change every width without a resize. */
     this.onFontsLoaded = () => this.fit();
+    /** The bound chart's translator (English until {@link onChart}). */
+    this.i18n = null;
+    this.meta = null;
     this.onContextMenu = (e) => {
       if (!this.menu || !this.menuHooks) return;
       e.preventDefault();
       e.stopPropagation();
       const chartVisible = this.menuHooks.chartVisible();
       this.setChartHidden(!chartVisible);
-      this.menu.setItems(statuslineMenuItems(this.parts, chartVisible));
+      this.menu.setItems(statuslineMenuItems(this.parts, chartVisible, this.i18n));
       this.menu.openAt(e.clientX, e.clientY);
     };
     const doc = host.ownerDocument;
@@ -4460,7 +4794,7 @@ var Statusline = class {
       icon: "market-open",
       background: `color-mix(in srgb, ${MARKET_INKS.open} 20%, transparent)`,
       color: MARKET_INKS.open,
-      label: MARKET_LABELS.open,
+      label: this.t(MARKET_LABELS.open),
       host
     });
     this.replayBadge = doc.createElement("span");
@@ -4474,11 +4808,12 @@ var Statusline = class {
     this.ohlcEl.className = "vela-sl-ohlc";
     this.changeEl = doc.createElement("span");
     this.changeEl.className = "vela-sl-change";
+    this.changeEl.dir = "ltr";
     this.eyeEl = doc.createElement("button");
     this.eyeEl.type = "button";
     this.eyeEl.className = "vela-sl-eye";
     this.eyeEl.innerHTML = iconAt("eye-off", 14);
-    this.eyeEl.setAttribute("aria-label", "Show chart");
+    this.eyeEl.setAttribute("aria-label", this.t(SHOW_CHART_LABEL));
     this.eyeEl.style.display = "none";
     this.eyeEl.addEventListener("click", (e) => {
       e.stopPropagation();
@@ -4498,11 +4833,14 @@ var Statusline = class {
       this.fitRO.observe(host);
     }
     doc.fonts?.addEventListener("loadingdone", this.onFontsLoaded);
-    this.marketTip = new Tooltip(this.marketEl, { content: MARKET_LABELS.open, placement: "bottom" });
-    this.eyeTip = new Tooltip(this.eyeEl, { content: "Show chart", placement: "bottom" });
+    this.marketTip = new Tooltip(this.marketEl, { content: this.t(MARKET_LABELS.open), placement: "bottom" });
+    this.eyeTip = new Tooltip(this.eyeEl, { content: this.t(SHOW_CHART_LABEL), placement: "bottom" });
     this.setMarketStatus("open");
     this.render();
   }
+  t(text) {
+    return textOf(this.i18n, text);
+  }
   setSymbol(symbol) {
     const ticker = parseSymbol(symbol).ticker;
     this.symbolEl.textContent = ticker;
@@ -4587,7 +4925,17 @@ var Statusline = class {
   }
   /** The "· BINANCE · 1h" segment after the symbol — venue first, then resolution. */
   setMeta(timeframe, provider) {
-    this.metaEl.textContent = `${provider ? `\xB7 ${provider.toUpperCase()} ` : ""}\xB7 ${timeframeLabel(timeframe)}`;
+    this.meta = { timeframe, provider };
+    this.metaEl.textContent = `${provider ? `· ${provider.toUpperCase()} ` : ""}· ${timeframeLabel(timeframe, this.i18n)}`;
+    this.fit();
+  }
+  /** Re-read every label and value in the chart's language. */
+  relocalize() {
+    this.eyeEl.setAttribute("aria-label", this.t(SHOW_CHART_LABEL));
+    this.eyeTip.setContent(this.t(SHOW_CHART_LABEL));
+    this.dressBadge();
+    if (this.meta) this.setMeta(this.meta.timeframe, this.meta.provider);
+    this.fitKey = null;
     this.fit();
   }
   /** Dress the market badge for a session state: its icon, tinted circle, and the
@@ -4608,7 +4956,7 @@ var Statusline = class {
     this.replayBadge.hidden = !this.replaying;
     if (this.replaying) {
       this.marketEl.dataset.status = "replay";
-      this.marketTip.setContent(REPLAY_LABEL);
+      this.marketTip.setContent(this.t(REPLAY_LABEL));
       return;
     }
     const status = this.marketStatus;
@@ -4618,9 +4966,9 @@ var Statusline = class {
       icon: `market-${status}`,
       background: `color-mix(in srgb, ${ink} 20%, transparent)`,
       color: ink,
-      label: MARKET_LABELS[status]
+      label: this.t(MARKET_LABELS[status])
     });
-    this.marketTip.setContent(MARKET_LABELS[status]);
+    this.marketTip.setContent(this.t(MARKET_LABELS[status]));
   }
   /** Show/hide one part — the settings dialog's Status line tab and the right-click
    *  menu both drive these. 'name' owns the venue/timeframe meta too (see
@@ -4677,6 +5025,9 @@ var Statusline = class {
   /** (Re)bind to a chart instance — called after every widget rebuild. */
   onChart(chart) {
     this.detach();
+    const relabel = this.i18n !== chart.i18n;
+    this.i18n = chart.i18n;
+    if (relabel) this.relocalize();
     this.lastBar = null;
     this.hoverBar = null;
     this.unsubs.push(
@@ -4752,18 +5103,29 @@ var Statusline = class {
     const doc = this.el.ownerDocument;
     const up = this.isUp ? this.isUp(bar) : bar.close >= bar.open;
     const ink = up ? this.upColor ?? "var(--vela-up)" : this.downColor ?? "var(--vela-down)";
+    const format = this.i18n?.format;
+    const price = (v) => !Number.isFinite(v) ? EM_DASH2 : format ? format.price(v, { decimals: dp, grouping: true, surface: "statusLine" }) : v.toLocaleString("en-US", { minimumFractionDigits: dp, maximumFractionDigits: dp });
+    const percent = (v) => format ? format.percent(v, { surface: "statusLine" }) : `${v >= 0 ? "+" : "-"}${Math.abs(v).toFixed(2)}%`;
     const cell = (k, v) => {
       const s = doc.createElement("span");
       if (k) s.append(`${k} `);
       const b = doc.createElement("b");
-      b.textContent = fmtPrice(v, dp);
+      b.dir = "ltr";
+      b.textContent = price(v);
       b.style.color = ink;
       s.appendChild(b);
       return s;
     };
     const { level } = this.layout;
-    this.ohlcEl.replaceChildren(...readoutCells(level, this.readout).map((c) => cell(c.label, bar[c.key])));
-    this.changeEl.textContent = level === "minimal" ? fmtChangePct(bar.open, bar.close) : fmtChange(bar.open, bar.close);
+    this.ohlcEl.replaceChildren(...readoutCells(level, this.readout, this.i18n).map((c) => cell(c.label, bar[c.key])));
+    let change = "";
+    if (Number.isFinite(bar.open) && Number.isFinite(bar.close) && bar.open !== 0) {
+      const diff = bar.close - bar.open;
+      const pct = percent(diff / bar.open * 100);
+      const signed = (diff >= 0 ? "+" : "") + price(diff);
+      change = level === "minimal" ? pct : textOf(this.i18n, CHANGE_TEXT, { change: signed, percent: pct });
+    }
+    this.changeEl.textContent = change;
     this.changeEl.dataset.dir = up ? "up" : "down";
     this.changeEl.style.color = ink;
   }
@@ -4778,7 +5140,7 @@ var CSS11 = `
 .vela-watermark {
     position: absolute;
     /* Insets follow the renderer-published gutters AND the price-pane vertical
-     * bounds (mount container), so the mark centers on the PRICE PANE \u2014 never
+     * bounds (mount container), so the mark centers on the PRICE PANE — never
      * the study panes below, the drawings toolbar, or the price scale. */
     top: var(--vela-price-pane-top, 0px);
     bottom: var(--vela-price-pane-bottom, 0px);
@@ -4812,8 +5174,14 @@ function watermarkFontPx(availPx, textPxAtMax) {
   if (textPxAtMax <= 0) return MAX_FONT_PX;
   return Math.max(MIN_FONT_PX, Math.min(MAX_FONT_PX, Math.floor(MAX_FONT_PX * availPx * FILL / textPxAtMax)));
 }
+var TEXT12 = {
+  replay: msg("widget.watermark.replay", "Replay"),
+  mark: msg("widget.watermark.mark", "{symbol} · {timeframe}")
+};
 var Watermark = class {
-  constructor(host, symbol, timeframe) {
+  /** `i18n` reads the chart's translator (absent: English). */
+  constructor(host, symbol, timeframe, i18n = () => null) {
+    this.i18n = i18n;
     this.resizeObserver = null;
     /** The host's visibility preference (the persisted watermark toggle). */
     this.shown = true;
@@ -4825,6 +5193,8 @@ var Watermark = class {
      *  canvas, so the mark stays out of its way. Starts true: the FIRST `load:start`
      *  fires during chart construction, before any subscriber can see it. */
     this.loading = true;
+    this.symbol = "";
+    this.timeframe = "";
     injectStyles(STYLE_ID11, CSS11, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-watermark";
@@ -4832,7 +5202,8 @@ var Watermark = class {
     this.text = host.ownerDocument.createElement("span");
     this.replayLine = host.ownerDocument.createElement("span");
     this.replayLine.className = "vela-watermark-replay";
-    this.replayLine.append(iconEl("replay", host.ownerDocument), host.ownerDocument.createTextNode("Replay"));
+    this.replayText = host.ownerDocument.createTextNode(textOf(this.i18n(), TEXT12.replay));
+    this.replayLine.append(iconEl("replay", host.ownerDocument), this.replayText);
     this.el.append(this.text, this.replayLine);
     host.appendChild(this.el);
     if (typeof ResizeObserver !== "undefined") {
@@ -4868,9 +5239,17 @@ var Watermark = class {
     this.el.style.display = (this.shown || replay) && !this.loading ? "" : "none";
   }
   update(symbol, timeframe) {
-    this.text.textContent = symbol ? `${parseSymbol(symbol).ticker} \xB7 ${timeframeLabel(timeframe)}` : "";
+    this.symbol = symbol;
+    this.timeframe = timeframe;
+    const i18n = this.i18n();
+    this.text.textContent = symbol ? textOf(i18n, TEXT12.mark, { symbol: parseSymbol(symbol).ticker, timeframe: timeframeLabel(timeframe, i18n) }) : "";
     this.fit();
   }
+  /** Re-read the mark and the replay line in the chart's language. */
+  relocalize() {
+    this.replayText.data = textOf(this.i18n(), TEXT12.replay);
+    this.update(this.symbol, this.timeframe);
+  }
   /** Measure the text at the cap and shrink it to the price pane's width. */
   fit() {
     if (this.el.clientWidth <= 0 || !this.text.textContent) return;
@@ -4887,7 +5266,7 @@ var Watermark = class {
 // src/widget/context-menu.ts
 var PRICE_AXIS_W = 60;
 var TIME_AXIS_H = 26;
-var OFF_PLOT = { price: null, time: null, paneKind: null };
+var OFF_PLOT = { price: null, time: null, paneKind: null, paneId: null };
 var ChartContextMenu = class {
   constructor(host, cbs) {
     this.cbs = cbs;
@@ -4930,7 +5309,7 @@ var ChartContextMenu = class {
     this.chart = chart;
     this.crosshair = OFF_PLOT;
     this.offCrosshair = chart.renderer.onCrosshairMove((e) => {
-      this.crosshair = { price: e.price, time: e.time, paneKind: e.paneKind ?? null };
+      this.crosshair = { price: e.price, time: e.time, paneKind: e.paneKind ?? null, paneId: e.paneId ?? null };
     });
   }
   destroy() {
@@ -4966,7 +5345,7 @@ var ChartContextMenu = class {
   }
   contributed(zone) {
     return widgetActions(`context:${zone}`, this.context()).map((a) => ({
-      item: { id: `action:${a.id}`, label: a.label, icon: a.icon },
+      item: { id: `action:${a.id}`, label: textOf(this.chart?.i18n, a.label), icon: a.icon },
       order: a.order
     }));
   }
@@ -4974,6 +5353,7 @@ var ChartContextMenu = class {
     return composeMenu(zone, this.builtinItems(zone), this.contributed(zone));
   }
   builtinItems(zone) {
+    const chart = this.chart;
     if (zone === "price-axis") {
       const pane = this.lastPane;
       return priceAxisItems({
@@ -4984,16 +5364,18 @@ var ChartContextMenu = class {
         priceLabel: this.flag("priceLabel"),
         countdown: this.flag("countdown"),
         priceLine: this.flag("currentPriceLine")
-      });
+      }, this.chart?.i18n);
     }
     if (zone === "time-axis") {
-      return timeAxisItems(this.cbs.timezone?.() ?? String(this.chart?.renderer.get("timezone") ?? "Etc/UTC"));
+      return timeAxisItems(this.cbs.timezone?.() ?? String(this.chart?.renderer.get("timezone") ?? "Etc/UTC"), chart?.i18n);
     }
-    const chart = this.chart;
-    return bodyItems({
-      drawings: chart?.drawings.supported ? chart.drawings.all().length : 0,
-      indicators: chart?.indicators().length ?? 0
-    });
+    return bodyItems(
+      {
+        drawings: chart?.drawings.supported ? chart.drawings.all().length : 0,
+        indicators: chart?.indicators().length ?? 0
+      },
+      chart?.i18n
+    );
   }
   run(id) {
     const chart = this.chart;
@@ -5390,6 +5772,14 @@ var CONTROLS_BOTTOM_PX = TIME_AXIS_H2 + 12;
 var CLUSTER_H = 24;
 var CLUSTER_PILL = "rgba(0,0,0,0.65)";
 var CLUSTER_LEFT_CSS = "calc((100% + var(--vela-toolbar-gutter, 0px) - var(--vela-scale-gutter, 0px)) / 2)";
+var TEXT13 = {
+  zoomOut: msg("widget.cellControls.zoomOut", "Zoom out"),
+  zoomIn: msg("widget.cellControls.zoomIn", "Zoom in"),
+  restoreLayout: msg("widget.cellControls.restoreLayout", "Restore layout"),
+  maximizeChart: msg("widget.cellControls.maximizeChart", "Maximize chart"),
+  resetChart: msg("widget.cellControls.resetChart", "Reset chart"),
+  dragToMove: msg("widget.cellControls.dragToMove", "Drag to move chart")
+};
 var STYLE_ID12 = "vela-cell-controls";
 var CSS12 = `
 .vela-cc-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--vela-radius-sm);background:transparent;line-height:0;font-size:12px;color:var(--vela-fg-muted);cursor:pointer;}
@@ -5450,17 +5840,17 @@ var CellControls = class {
     this.host.appendChild(this.root);
     this.refresh();
   }
-  /** Rebuild the buttons (the multi-cell gate or the maximized state changed). */
+  /** Rebuild the buttons (the multi-cell gate, the maximized state or the language changed). */
   refresh() {
     this.root.textContent = "";
     const multi = this.deps.multiCell();
     const maximized = multi && this.deps.isMaximized();
     if (multi && !maximized) this.root.appendChild(this.makeGrip());
-    this.root.appendChild(this.button("minus", "Zoom out", () => this.glider.zoom(ZOOM_OUT)));
-    this.root.appendChild(this.button("plus", "Zoom in", () => this.glider.zoom(ZOOM_IN)));
+    this.root.appendChild(this.button("minus", TEXT13.zoomOut, () => this.glider.zoom(ZOOM_OUT)));
+    this.root.appendChild(this.button("plus", TEXT13.zoomIn, () => this.glider.zoom(ZOOM_IN)));
     if (multi) {
       this.root.appendChild(
-        this.button(maximized ? "restore" : "maximize", maximized ? "Restore layout" : "Maximize chart", () => this.deps.toggleMaximize(), {
+        this.button(maximized ? "restore" : "maximize", maximized ? TEXT13.restoreLayout : TEXT13.maximizeChart, () => this.deps.toggleMaximize(), {
           // The maximized state reads as an inverse chip (white-on-dark, dark-on-light),
           // the same active-state affordance as a collapsed pane's expand button.
           selected: maximized
@@ -5468,14 +5858,19 @@ var CellControls = class {
       );
     }
     this.root.appendChild(
-      this.button("reset", "Reset chart", () => {
+      this.button("reset", TEXT13.resetChart, () => {
         this.glider.stop();
         this.deps.reset();
       })
     );
   }
-  button(iconId, title, onClick, opts = {}) {
+  /** Text in the chart's language. */
+  t(text) {
+    return textOf(this.deps.chart()?.i18n, text);
+  }
+  button(iconId, text, onClick, opts = {}) {
     const b = this.host.ownerDocument.createElement("button");
+    const title = this.t(text);
     b.type = "button";
     b.title = title;
     b.setAttribute("aria-label", title);
@@ -5493,8 +5888,8 @@ var CellControls = class {
   makeGrip() {
     const b = this.host.ownerDocument.createElement("button");
     b.type = "button";
-    b.title = "Drag to move chart";
-    b.setAttribute("aria-label", "Drag to move chart");
+    b.title = this.t(TEXT13.dragToMove);
+    b.setAttribute("aria-label", b.title);
     b.className = "vela-cc-btn vela-cc-grip";
     b.innerHTML = icon("grip");
     b.addEventListener("pointerdown", (e) => this.onGripDown(b, e));
@@ -5637,6 +6032,28 @@ var WidgetHistory = class {
 };
 
 // src/workspace/ChartCell.ts
+var TEXT14 = {
+  regularHours: msg("workspace.settings.regularHours", "Regular hours (RTH)"),
+  extendedHours: msg("workspace.settings.extendedHours", "Extended hours (ETH)"),
+  extendedColor: msg("workspace.settings.extendedColor", "Extended hours"),
+  premarketColor: msg("workspace.settings.premarketColor", "Pre-market"),
+  postmarketColor: msg("workspace.settings.postmarketColor", "Post-market"),
+  tradingSession: msg("workspace.settings.tradingSession", "Trading session"),
+  session: msg("workspace.settings.session", "Session"),
+  advanced: msg("workspace.settings.advanced", "Advanced"),
+  barsToFetch: msg("workspace.settings.barsToFetch", "Bars to fetch"),
+  timeZone: msg("workspace.settings.timeZone", "Time zone"),
+  timeZoneRow: msg("workspace.settings.timeZoneRow", "Time zone"),
+  watermark: msg("workspace.settings.watermark", "Watermark"),
+  symbolWatermark: msg("workspace.settings.symbolWatermark", "Symbol watermark"),
+  replayWatermark: msg("workspace.settings.replayWatermark", "Replay watermark"),
+  statusLine: msg("workspace.settings.statusLine", "Status line"),
+  statusLineParts: msg("workspace.settings.statusLineParts", "Status line"),
+  indicators: msg("workspace.settings.indicators", "Indicators"),
+  indicatorTitles: msg("workspace.settings.indicatorTitles", "Titles"),
+  indicatorValues: msg("workspace.settings.indicatorValues", "Values"),
+  builtIn: msg("workspace.indicators.builtIn", "Built-in")
+};
 function seedDefaults(opts) {
   return {
     symbol: opts.symbol,
@@ -5668,6 +6085,13 @@ function instanceDeltas(handle) {
   const props = inputDeltas(handle.props, handle.propValues());
   return inputs || props ? { ...inputs ? { inputs } : {}, ...props ? { props } : {} } : void 0;
 }
+function nativeAliases(type, i18n) {
+  const entry = nativeIndicatorEntry(type);
+  if (!entry) return {};
+  const names = [sourceText(entry.title)];
+  if (entry.shortTitle !== void 0) names.push(textOf(i18n, entry.shortTitle), sourceText(entry.shortTitle));
+  return { aliases: [...new Set(names)] };
+}
 var ChartCell = class {
   constructor(id, gridHost, seed, deps) {
     this.id = id;
@@ -5743,6 +6167,7 @@ var ChartCell = class {
       this.host,
       {
         ...deps.chartDefaults,
+        ...deps.localization?.(),
         symbol,
         timeframe: seed.timeframe,
         bars: seed.bars,
@@ -5828,7 +6253,7 @@ var ChartCell = class {
     if (!this.indicatorValuesOn) this.inner.renderer.set("indicatorValues", false);
     this.watermarkOn = seed.watermark ?? deps.watermark;
     this.replayWatermarkOn = seed.replayWatermark ?? true;
-    this.watermark = deps.watermark ? new Watermark(this.host, symbol ?? "", seed.timeframe ?? "60") : null;
+    this.watermark = deps.watermark ? new Watermark(this.host, symbol ?? "", seed.timeframe ?? "60", () => this.inner?.i18n) : null;
     if (!this.watermarkOn) this.watermark?.setVisible(false);
     if (!this.replayWatermarkOn) this.watermark?.setReplayVisible(false);
     this.inner.on("replay:start", () => this.watermark?.setReplaying(true));
@@ -6056,12 +6481,10 @@ var ChartCell = class {
   pushSettingsSections() {
     const chart = this.inner;
     if (!chart) return;
-    const rth = "Regular hours (RTH)";
-    const eth = "Extended hours (ETH)";
     const shadeRows = this.sessionOvernightFlag ? [
       {
         kind: "color",
-        label: "Extended hours",
+        label: TEXT14.extendedColor,
         id: "extended-color",
         get: () => this.sessionShadeColor("extendedColor"),
         set: (v) => this.setSessionShadeColor("extendedColor", v)
@@ -6069,43 +6492,46 @@ var ChartCell = class {
     ] : [
       {
         kind: "color",
-        label: "Pre-market",
+        label: TEXT14.premarketColor,
         id: "premarket-color",
         get: () => this.sessionShadeColor("premarketColor"),
         set: (v) => this.setSessionShadeColor("premarketColor", v)
       },
       {
         kind: "color",
-        label: "Post-market",
+        label: TEXT14.postmarketColor,
         id: "postmarket-color",
         get: () => this.sessionShadeColor("postmarketColor"),
         set: (v) => this.setSessionShadeColor("postmarketColor", v)
       }
     ];
     const sessionSection = {
-      title: "Trading session",
+      title: TEXT14.tradingSession,
       id: "trading-session",
       placement: "symbol",
       rows: [
         {
           kind: "select",
-          label: "Session",
+          label: TEXT14.session,
           id: "session",
-          options: [rth, eth],
-          get: () => this.session === "extended" ? eth : rth,
-          set: (v) => this.setSession(v === eth ? "extended" : "regular")
+          options: [
+            ["regular", TEXT14.regularHours],
+            ["extended", TEXT14.extendedHours]
+          ],
+          get: () => this.session === "extended" ? "extended" : "regular",
+          set: (v) => this.setSession(v === "extended" ? "extended" : "regular")
         },
         ...shadeRows
       ]
     };
     const advanced = {
-      title: "Advanced",
+      title: TEXT14.advanced,
       id: "advanced",
       placement: "end",
       rows: [
         {
           kind: "select",
-          label: "Bars to fetch",
+          label: TEXT14.barsToFetch,
           id: "bars",
           options: ["500", "1000", "2000", "5000", "10000", "20000", "50000", "60000", "80000", "100000"],
           get: () => String(this.state.bars ?? 1e3),
@@ -6118,15 +6544,15 @@ var ChartCell = class {
       ]
     };
     const timezoneSection = {
-      title: "Time zone",
+      title: TEXT14.timeZone,
       id: "time-zone",
       placement: "symbol",
       rows: [
         {
           kind: "select",
-          label: "Time zone",
+          label: TEXT14.timeZoneRow,
           id: "zone",
-          options: timezoneMenuRows(this.deps.timezone()).map((r) => [r.value, r.label]),
+          options: timezoneMenuRows(this.deps.timezone(), chart.i18n).map((r) => [r.value, r.label]),
           get: () => {
             const choice = this.deps.timezone();
             return isExchangeTimezone(choice) ? choice : normalizeTimezone(choice);
@@ -6136,20 +6562,20 @@ var ChartCell = class {
       ]
     };
     const watermarkSection = {
-      title: "Watermark",
+      title: TEXT14.watermark,
       id: "watermark",
       placement: "symbol",
       rows: [
         {
           kind: "toggle",
-          label: "Symbol watermark",
+          label: TEXT14.symbolWatermark,
           id: "visible",
           get: () => this.watermarkOn,
           set: (v) => this.setWatermarkVisible(v)
         },
         {
           kind: "toggle",
-          label: "Replay watermark",
+          label: TEXT14.replayWatermark,
           id: "replay",
           get: () => this.replayWatermarkOn,
           set: (v) => this.setReplayWatermarkVisible(v)
@@ -6160,49 +6586,49 @@ var ChartCell = class {
     if (this.statusline) {
       const sl = this.statusline;
       sections.push({
-        title: "Status line",
+        title: TEXT14.statusLine,
         id: "status-line",
         rows: [
-          { kind: "heading", label: "Status line", id: "parts" },
+          { kind: "heading", label: TEXT14.statusLineParts, id: "parts" },
           {
             kind: "toggle",
-            label: "Symbol name",
+            label: STATUSLINE_PART_LABELS.name,
             id: "name",
             get: () => sl.partVisible("name"),
             set: (v) => this.setStatuslinePart("name", v)
           },
           {
             kind: "toggle",
-            label: "Market status",
+            label: STATUSLINE_PART_LABELS.market,
             id: "market",
             get: () => sl.partVisible("market"),
             set: (v) => this.setStatuslinePart("market", v)
           },
           {
             kind: "toggle",
-            label: "OHLC values",
+            label: STATUSLINE_PART_LABELS.ohlc,
             id: "ohlc",
             get: () => sl.partVisible("ohlc"),
             set: (v) => this.setStatuslinePart("ohlc", v)
           },
           {
             kind: "toggle",
-            label: "Bar change values",
+            label: STATUSLINE_PART_LABELS.change,
             id: "change",
             get: () => sl.partVisible("change"),
             set: (v) => this.setStatuslinePart("change", v)
           },
-          { kind: "heading", label: "Indicators", id: "indicators" },
+          { kind: "heading", label: TEXT14.indicators, id: "indicators" },
           {
             kind: "toggle",
-            label: "Titles",
+            label: TEXT14.indicatorTitles,
             id: "indicator-titles",
             get: () => this.indicatorTitlesOn,
             set: (v) => this.setIndicatorTitlesVisible(v)
           },
           {
             kind: "toggle",
-            label: "Values",
+            label: TEXT14.indicatorValues,
             id: "indicator-values",
             get: () => this.indicatorValuesOn,
             set: (v) => this.setIndicatorValuesVisible(v)
@@ -6279,6 +6705,16 @@ var ChartCell = class {
     if (!this.inner) throw new Error(`[vela] cell "${this.id}" is destroyed`);
     return this.inner;
   }
+  /** Re-read the cell's own chrome (status line, watermark, view controls, settings rows,
+   *  native indicator names) in the chart's language, after `chart.setLocale`. */
+  relocalize() {
+    if (!this.inner) return;
+    this.statusline?.relocalize();
+    this.watermark?.relocalize();
+    this.cellControls.refresh();
+    this.pushSettingsSections();
+    this.refreshNativeCatalog();
+  }
   get symbol() {
     return this.state.symbol ?? "";
   }
@@ -6467,20 +6903,29 @@ var ChartCell = class {
    *  index space the picker hands back, so `libraryRows` and `addFromLibrary` MUST both
    *  read it — indexing the unsorted catalog on add would land on a different study. */
   supportedNatives() {
-    return this.nativeCatalog.filter((n) => n.supported).sort((a, b) => a.title.localeCompare(b.title, "en", { sensitivity: "base" }));
+    const locale = this.inner?.i18n.locale ?? "en";
+    const collator = new Intl.Collator(locale, { sensitivity: "base" });
+    return this.nativeCatalog.filter((n) => n.supported).sort((a, b) => collator.compare(a.title, b.title));
   }
   /** The picker's library rows: supported natives first (see {@link supportedNatives}),
    *  then the manifest in the host's own order. */
   libraryRows() {
     return [
-      ...this.supportedNatives().map((n) => ({ name: n.title, category: "Built-in", native: true, nativeType: n.type, beta: n.beta })),
+      ...this.supportedNatives().map((n) => ({
+        name: n.title,
+        ...nativeAliases(n.type, this.inner?.i18n),
+        category: textOf(this.inner?.i18n, TEXT14.builtIn),
+        native: true,
+        nativeType: n.type,
+        beta: n.beta
+      })),
       ...this.manifest.map((e) => ({ name: e.name, language: e.language, category: e.category }))
     ];
   }
   /** The picker's on-chart rows: native instances first, then live script instances. */
   onChartRows() {
     return [
-      ...this.nativeHandles().map((h) => ({ name: h.title, native: true, nativeType: h.nativeType })),
+      ...this.nativeHandles().map((h) => ({ name: h.title, ...nativeAliases(h.nativeType, this.inner?.i18n), native: true, nativeType: h.nativeType })),
       ...this.instances.map((it) => ({ name: it.entry.name, language: it.entry.language }))
     ];
   }
@@ -6850,7 +7295,7 @@ var WorkspaceReplay = class {
     if (!this.session) return this;
     if (intervalMs !== void 0) {
       if (!(Number.isFinite(intervalMs) && intervalMs > 0)) {
-        console.warn(`[vela] workspace.replay.play(${intervalMs}) ignored \u2014 the interval must be a positive number of ms`);
+        console.warn(`[vela] workspace.replay.play(${intervalMs}) ignored — the interval must be a positive number of ms`);
         return this;
       }
       this.intervalMs = intervalMs;
@@ -7078,27 +7523,37 @@ function monthSpan(timeframe) {
 
 // src/workspace/layouts.ts
 var registry = /* @__PURE__ */ new Map();
+var labels = /* @__PURE__ */ new Map();
 function registerLayout(def) {
-  registry.set(def.id, def);
+  registry.set(def.id, typeof def.label === "string" ? def : { ...def, label: sourceText(def.label) });
+  labels.set(def.id, def.label);
 }
 function unregisterLayout(id) {
   registry.delete(id);
+  labels.delete(id);
+}
+function inLanguage(def, i18n) {
+  const grid = GRID_ID_RE.exec(def.id);
+  const message = labels.get(def.id) ?? (grid ? gridLabel(Number(grid[1]), Number(grid[2])) : def.label);
+  const label = textOf(i18n, message);
+  return label === def.label ? def : { ...def, label };
 }
-function layoutDefinition(id) {
-  return registry.get(id);
+function layoutDefinition(id, i18n) {
+  const def = registry.get(id);
+  return def && inLanguage(def, i18n);
 }
-function layouts() {
-  return [...registry.values()];
+function layouts(i18n) {
+  return [...registry.values()].map((def) => inLanguage(def, i18n));
 }
 function slots(n) {
   return Array.from({ length: n }, (_, i) => ({ id: `c${i + 1}` }));
 }
 function registerBuiltinLayouts() {
-  registerLayout({ id: "1", label: "Single", cols: [1], rows: [1], cells: slots(1) });
-  registerLayout({ id: "2h", label: "2 side by side", cols: [1, 1], rows: [1], cells: slots(2) });
-  registerLayout({ id: "2v", label: "2 stacked", cols: [1], rows: [1, 1], cells: slots(2) });
-  registerLayout({ id: "4", label: "4 grid", cols: [1, 1], rows: [1, 1], cells: slots(4) });
-  registerLayout({ id: "8", label: "8 grid", cols: [1, 1, 1, 1], rows: [1, 1], cells: slots(8) });
+  registerLayout({ id: "1", label: msg("workspace.layout.single", "Single"), cols: [1], rows: [1], cells: slots(1) });
+  registerLayout({ id: "2h", label: msg("workspace.layout.sideBySide", "2 side by side"), cols: [1, 1], rows: [1], cells: slots(2) });
+  registerLayout({ id: "2v", label: msg("workspace.layout.stacked", "2 stacked"), cols: [1], rows: [1, 1], cells: slots(2) });
+  registerLayout({ id: "4", label: msg("workspace.layout.grid4", "4 grid"), cols: [1, 1], rows: [1, 1], cells: slots(4) });
+  registerLayout({ id: "8", label: msg("workspace.layout.grid8", "8 grid"), cols: [1, 1, 1, 1], rows: [1, 1], cells: slots(8) });
 }
 var GRID_PICKER_MAX = 4;
 var GRID_BUILTIN_IDS = {
@@ -7108,17 +7563,20 @@ var GRID_BUILTIN_IDS = {
   "2x2": "4",
   "2x4": "8"
 };
+var GRID_LABEL = msg("workspace.layout.grid", "{cols} × {rows} grid");
+function gridLabel(rows, cols) {
+  return withValues(GRID_LABEL, { cols, rows });
+}
 var clampTrack = (n) => Math.max(1, Math.min(GRID_PICKER_MAX, Math.round(n)));
-function layoutForGrid(rows, cols) {
+function layoutForGrid(rows, cols, i18n) {
   const r = clampTrack(rows);
   const c = clampTrack(cols);
   const builtin = GRID_BUILTIN_IDS[`${r}x${c}`];
   const registered = builtin ? registry.get(builtin) : void 0;
-  if (registered) return registered;
+  if (registered) return inLanguage(registered, i18n);
   return {
     id: `g${r}x${c}`,
-    // Width-first label — matches the picker's caption ("3 × 2" = 3 wide, 2 tall).
-    label: `${c} \xD7 ${r} grid`,
+    label: textOf(i18n, gridLabel(r, c)),
     cols: Array.from({ length: c }, () => 1),
     rows: Array.from({ length: r }, () => 1),
     cells: slots(r * c)
@@ -7141,7 +7599,7 @@ function layoutShape(def) {
 function occupancyGrid(def) {
   if (def.areas) return def.areas.map((row) => row.trim().split(/\s+/));
   const cols = def.cols.length;
-  return def.rows.map((_, r) => def.cols.map((_2, c) => def.cells[r * cols + c]?.id ?? `\xB7${r}x${c}`));
+  return def.rows.map((_, r) => def.cols.map((_2, c) => def.cells[r * cols + c]?.id ?? `·${r}x${c}`));
 }
 var GLYPH_MIN = 1.5;
 var GLYPH_SPAN = 13;
@@ -7432,8 +7890,8 @@ var TOOL_BINDINGS = [
   ["hline", "drawings.hline-cursor"],
   ["vline", "drawings.vline-cursor"]
 ];
-function toolShortcutHints(keymap) {
-  const byId = new Map(keymap.bindings().map((b) => [b.id, b.display[0]]));
+function toolShortcutHints(keymap, i18n) {
+  const byId = new Map(keymap.bindings(i18n).map((b) => [b.id, b.display[0]]));
   const out = {};
   for (const [type, id] of TOOL_BINDINGS) {
     const display = byId.get(id);
@@ -7531,10 +7989,10 @@ var CSS14 = `
 .vela-mb-item:active { background: var(--vela-hover); }
 .vela-mb-item .vela-icon { font-size: 18px; width: 18px; height: 18px; }
 /* A lit stop (the maximize toggle while something is isolated): the inverse
-   "selected" chip \u2014 white on the dark theme, dark on the light one. */
+   "selected" chip — white on the dark theme, dark on the light one. */
 .vela-mb-item.vela-mb-on, .vela-mb-item.vela-mb-on:active { background: var(--vela-selected-bg); color: var(--vela-selected-fg); }
 /* Left-aligned contributed actions get their own stops (the built-in indicators
-   slot) \u2014 the wrapper is layout-transparent so each stop flexes like a sibling. */
+   slot) — the wrapper is layout-transparent so each stop flexes like a sibling. */
 .vela-mb-actions { display: contents; }
 .vela-mb-symbol {
     flex: 1.6 1 0;
@@ -7548,39 +8006,57 @@ var CSS14 = `
     text-align: center;
 }
 `;
+var TEXT15 = {
+  symbolSearch: msg("widget.mobileBar.symbolSearch", "Symbol search"),
+  timeframe: msg("widget.mobileBar.timeframe", "Timeframe"),
+  indicators: msg("widget.mobileBar.indicators", "Indicators"),
+  drawings: msg("widget.mobileBar.drawings", "Drawings"),
+  maximizeChart: msg("widget.mobileBar.maximizeChart", "Maximize chart"),
+  restoreLayout: msg("widget.mobileBar.restoreLayout", "Restore layout"),
+  more: msg("widget.mobileBar.more", "More"),
+  chartSettings: msg("widget.mobileBar.chartSettings", "Chart settings")
+};
 var MobileBar = class {
   constructor(host, opts) {
+    /** Each fixed stop's accessible name, re-read by {@link relocalize}. */
+    this.labels = [];
+    this.maximizeActive = false;
     this.opts = opts;
     const doc = host.ownerDocument;
     injectStyles(STYLE_ID14, CSS14, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-mobilebar";
+    this.timeframe = opts.timeframe;
     const item = (cls, label, onClick, icon2) => {
       const b = doc.createElement("button");
       b.className = `vela-mb-item ${cls}`;
-      b.setAttribute("aria-label", label);
+      b.setAttribute("aria-label", this.t(label));
+      this.labels.push({ el: b, label });
       if (icon2) b.appendChild(iconEl(icon2, doc));
       b.addEventListener("click", onClick);
       return b;
     };
-    this.symbolEl = item("vela-mb-symbol", "Symbol search", opts.onSymbolClick);
+    this.symbolEl = item("vela-mb-symbol", TEXT15.symbolSearch, opts.onSymbolClick);
     this.symbolEl.textContent = parseSymbol(opts.symbol).ticker;
-    this.tfEl = item("vela-mb-tf", "Timeframe", opts.onTimeframeClick);
-    this.tfEl.textContent = timeframeLabel(opts.timeframe);
+    this.tfEl = item("vela-mb-tf", TEXT15.timeframe, opts.onTimeframeClick);
+    this.tfEl.textContent = timeframeLabel(opts.timeframe, opts.i18n);
     const onIndicators = opts.onIndicatorsClick;
-    const indicators = onIndicators ? item("vela-mb-indicators", "Indicators", onIndicators, "indicators") : null;
+    const indicators = onIndicators ? item("vela-mb-indicators", TEXT15.indicators, onIndicators, "indicators") : null;
     this.actionsHost = doc.createElement("span");
     this.actionsHost.className = "vela-mb-actions";
     const onDrawings = opts.onDrawingsClick;
-    const drawings = onDrawings ? item("vela-mb-drawings", "Drawings", onDrawings, "pen") : null;
+    const drawings = onDrawings ? item("vela-mb-drawings", TEXT15.drawings, onDrawings, "pen") : null;
     const onMaximize = opts.onMaximizeClick;
-    this.maxEl = onMaximize ? item("vela-mb-maximize", "Maximize chart", onMaximize, "maximize") : null;
-    const more = item("vela-mb-more", "More", opts.onMoreClick, "kebab");
-    const settings = item("vela-mb-settings", "Chart settings", opts.onSettingsClick, "gear");
+    this.maxEl = onMaximize ? item("vela-mb-maximize", TEXT15.maximizeChart, onMaximize, "maximize") : null;
+    const more = item("vela-mb-more", TEXT15.more, opts.onMoreClick, "kebab");
+    const settings = item("vela-mb-settings", TEXT15.chartSettings, opts.onSettingsClick, "gear");
     this.el.append(this.symbolEl, this.tfEl, ...indicators ? [indicators] : [], this.actionsHost, ...drawings ? [drawings] : [], ...this.maxEl ? [this.maxEl] : [], more, settings);
     host.appendChild(this.el);
     this.renderActions();
   }
+  t(text) {
+    return textOf(this.opts.i18n, text);
+  }
   /** Re-project the contributed actions placed on the bar (left-aligned by default —
    *  see `mobilePlacement`) as icon-only stops in the indicators slot (call after
    *  registrations change). The rest are three-dots drawer rows. */
@@ -7593,9 +8069,10 @@ var MobileBar = class {
     for (const action of widgetActions("topbar", ctx).filter((a) => mobilePlacement(a) === "bar" && !builtin.has(a.id))) {
       const b = doc.createElement("button");
       b.className = "vela-mb-item";
-      b.setAttribute("aria-label", action.label);
+      const label = textOf(ctx.i18n ?? this.opts.i18n, action.label);
+      b.setAttribute("aria-label", label);
       if (action.icon) b.appendChild(iconEl(action.icon, doc));
-      else b.appendChild(doc.createTextNode(action.label));
+      else b.appendChild(doc.createTextNode(label));
       b.addEventListener("click", () => {
         const c = this.opts.getContext?.();
         if (c) action.run(c);
@@ -7607,14 +8084,23 @@ var MobileBar = class {
     this.symbolEl.textContent = parseSymbol(symbol).ticker;
   }
   setTimeframe(tf) {
-    this.tfEl.textContent = timeframeLabel(tf);
+    this.timeframe = tf;
+    this.tfEl.textContent = timeframeLabel(tf, this.opts.i18n);
+  }
+  /** Re-read every label in the current language. */
+  relocalize() {
+    for (const { el, label } of this.labels) el.setAttribute("aria-label", this.t(label));
+    this.setTimeframe(this.timeframe);
+    if (this.maxEl) this.setMaximizeActive(this.maximizeActive);
+    this.renderActions();
   }
   /** Light the maximize stop while something is isolated (a chart over the grid,
    *  or a maximized pane inside the active chart) — inverse chip + restore glyph. */
   setMaximizeActive(on) {
     if (!this.maxEl) return;
+    this.maximizeActive = on;
     this.maxEl.classList.toggle("vela-mb-on", on);
-    this.maxEl.setAttribute("aria-label", on ? "Restore layout" : "Maximize chart");
+    this.maxEl.setAttribute("aria-label", this.t(on ? TEXT15.restoreLayout : TEXT15.maximizeChart));
     this.maxEl.replaceChildren(iconEl(on ? "restore" : "maximize", this.el.ownerDocument));
   }
   /** Show the maximize stop only while the grid holds more than one chart — on a
@@ -7680,23 +8166,28 @@ var CSS15 = `
     background: var(--vela-hover);
 }
 `;
+var TEXT16 = {
+  dateRange: msg("widget.timeframeDrawer.dateRange", "Date Range"),
+  timeframes: msg("widget.timeframeDrawer.timeframes", "Timeframes")
+};
 var TimeframeDrawer = class {
   constructor(opts) {
     this.opts = opts;
     this.rangeChips = /* @__PURE__ */ new Map();
     this.tfChips = /* @__PURE__ */ new Map();
+    this.headings = [];
     const doc = opts.host.ownerDocument;
     injectStyles(STYLE_ID15, CSS15, doc);
     this.drawer = new Drawer({ host: opts.host, onOpenChange: opts.onOpenChange });
     const rangeHeading = doc.createElement("div");
     rangeHeading.className = "vela-tfd-heading";
-    rangeHeading.textContent = "Date Range";
+    this.headings.push({ el: rangeHeading, text: TEXT16.dateRange });
     const ranges = doc.createElement("div");
     ranges.className = "vela-tfd-ranges";
     for (const preset of opts.ranges) {
       const chip = doc.createElement("button");
       chip.className = "vela-tfd-chip";
-      chip.textContent = preset.id;
+      chip.textContent = rangeLabel(preset.id, opts.i18n);
       chip.addEventListener("click", () => {
         opts.onRange(preset);
         this.drawer.hide();
@@ -7706,13 +8197,13 @@ var TimeframeDrawer = class {
     }
     const tfHeading = doc.createElement("div");
     tfHeading.className = "vela-tfd-heading";
-    tfHeading.textContent = "Timeframes";
+    this.headings.push({ el: tfHeading, text: TEXT16.timeframes });
     const grid = doc.createElement("div");
     grid.className = "vela-tfd-grid";
     for (const tf of opts.timeframes) {
       const chip = doc.createElement("button");
       chip.className = "vela-tfd-chip";
-      chip.textContent = timeframeLabel(tf);
+      chip.textContent = timeframeLabel(tf, opts.i18n);
       chip.addEventListener("click", () => {
         opts.onTimeframe(tf);
         this.drawer.hide();
@@ -7721,8 +8212,17 @@ var TimeframeDrawer = class {
       grid.appendChild(chip);
     }
     this.drawer.body.append(rangeHeading, ranges, tfHeading, grid);
+    this.relabel();
+  }
+  /** Headings and chips in the current language. */
+  relabel() {
+    const i18n = this.opts.i18n;
+    for (const { el, text } of this.headings) el.textContent = textOf(i18n, text);
+    for (const [id, chip] of this.rangeChips) chip.textContent = rangeLabel(id, i18n);
+    for (const [tf, chip] of this.tfChips) chip.textContent = timeframeLabel(tf, i18n);
   }
   open() {
+    this.relabel();
     const tf = this.opts.currentTimeframe();
     const range = this.opts.activeRange();
     for (const [id, chip] of this.rangeChips) {
@@ -7744,6 +8244,12 @@ var TimeframeDrawer = class {
 };
 
 // src/widget/drawings-drawer.ts
+var TEXT17 = {
+  title: msg("widget.drawingsDrawer.title", "Drawings"),
+  search: msg("widget.drawingsDrawer.search", "Search tools…"),
+  favorite: msg("widget.drawingsDrawer.favorite", "Favorite {tool}"),
+  noMatch: msg("widget.drawingsDrawer.noMatch", "No tools match.")
+};
 var STYLE_ID16 = "vela-widget-drawings-drawer";
 var CSS16 = `
 /* Search + tabs stay pinned while the tool list scrolls underneath. */
@@ -7777,7 +8283,7 @@ var CSS16 = `
     gap: 4px;
     overflow-x: auto;
     scrollbar-width: none;
-    /* The strip scrolls sideways itself \u2014 its touches are native scroll, not tab swipes
+    /* The strip scrolls sideways itself — its touches are native scroll, not tab swipes
        (the drawer body is pan-y so everywhere ELSE a sideways move swipes the tabs). */
     touch-action: pan-x;
     padding: 0 2px 8px;
@@ -7850,7 +8356,7 @@ var DrawingsDrawer = class {
     injectStyles(STYLE_ID16, CSS16, doc);
     this.drawer = new Drawer({
       host: opts.host,
-      title: "Drawings",
+      title: this.t(TEXT17.title),
       onOpenChange: opts.onOpenChange,
       // Swiping across the tool list pages through the group tabs.
       onSwipe: (dir) => this.stepGroup(dir === "left" ? 1 : -1)
@@ -7862,7 +8368,7 @@ var DrawingsDrawer = class {
     search.appendChild(iconEl("search", doc));
     this.input = doc.createElement("input");
     this.input.type = "text";
-    this.input.placeholder = "Search tools\u2026";
+    this.input.placeholder = this.t(TEXT17.search);
     this.input.addEventListener("input", () => this.renderList());
     search.appendChild(this.input);
     this.tabs = doc.createElement("div");
@@ -7872,7 +8378,12 @@ var DrawingsDrawer = class {
     this.list.className = "vela-dd-list";
     this.drawer.body.append(sticky, this.list);
   }
+  t(m, values) {
+    return textOf(this.opts.i18n?.() ?? null, m, values);
+  }
   open() {
+    this.drawer.setTitle(this.t(TEXT17.title));
+    this.input.placeholder = this.t(TEXT17.search);
     this.definition = this.opts.toolbar();
     if (!this.definition.groups.some((g) => g.id === this.activeGroup)) this.activeGroup = this.definition.groups[0]?.id ?? "";
     this.input.value = "";
@@ -7904,7 +8415,7 @@ var DrawingsDrawer = class {
     for (const group of this.definition.groups) {
       const tab = doc.createElement("button");
       tab.className = "vela-dd-tab";
-      tab.textContent = group.label;
+      tab.textContent = this.t(group.label);
       if (group.id === this.activeGroup) tab.dataset.active = "1";
       tab.addEventListener("click", () => {
         this.activeGroup = group.id;
@@ -7918,7 +8429,15 @@ var DrawingsDrawer = class {
   renderList() {
     const doc = this.list.ownerDocument;
     this.list.replaceChildren();
-    const query = this.input.value.trim().toLowerCase();
+    const locale = this.opts.i18n?.().locale;
+    const lower = (s) => {
+      try {
+        return s.toLocaleLowerCase(locale);
+      } catch {
+        return s.toLowerCase();
+      }
+    };
+    const query = lower(this.input.value.trim());
     const active = this.opts.currentTool();
     const section = (label) => {
       const el = doc.createElement("div");
@@ -7935,7 +8454,7 @@ var DrawingsDrawer = class {
       glyph.innerHTML = tool.icon;
       const label = doc.createElement("span");
       label.className = "vela-dd-label";
-      label.textContent = tool.label;
+      label.textContent = this.t(tool.label);
       const star = doc.createElement("button");
       star.className = "vela-dd-star";
       const paintStar = (on) => {
@@ -7944,7 +8463,7 @@ var DrawingsDrawer = class {
         else delete star.dataset.on;
       };
       paintStar(this.opts.isFavorite(tool.type));
-      star.setAttribute("aria-label", `Favorite ${tool.label}`);
+      star.setAttribute("aria-label", this.t(TEXT17.favorite, { tool: this.t(tool.label) }));
       star.addEventListener("click", (e) => {
         e.stopPropagation();
         const on = !this.opts.isFavorite(tool.type);
@@ -7961,16 +8480,16 @@ var DrawingsDrawer = class {
     if (query) {
       let any = false;
       for (const group2 of this.definition.groups) {
-        const hits = group2.tools.filter((t) => t.label.toLowerCase().includes(query));
+        const hits = group2.tools.filter((t) => lower(this.t(t.label)).includes(query) || sourceText(t.label).toLowerCase().includes(query));
         if (hits.length === 0) continue;
         any = true;
-        section(group2.label);
+        section(this.t(group2.label));
         for (const tool of hits) row(tool);
       }
       if (!any) {
         const empty = doc.createElement("div");
         empty.className = "vela-dd-empty";
-        empty.textContent = "No tools match.";
+        empty.textContent = this.t(TEXT17.noMatch);
         this.list.appendChild(empty);
       }
       return;
@@ -7979,7 +8498,7 @@ var DrawingsDrawer = class {
     if (!group) return;
     if (group.sections && group.sections.length > 0) {
       for (const s of group.sections) {
-        section(s.label);
+        section(this.t(s.label));
         for (const tool of s.tools) row(tool);
       }
     } else {
@@ -7989,6 +8508,17 @@ var DrawingsDrawer = class {
 };
 
 // src/widget/more-drawer.ts
+var TEXT18 = {
+  chartType: msg("widget.moreDrawer.chartType", "Chart type"),
+  layout: msg("widget.moreDrawer.layout", "Layout"),
+  alerts: msg("widget.moreDrawer.alerts", "Alerts"),
+  undo: msg("widget.moreDrawer.undo", "Undo"),
+  redo: msg("widget.moreDrawer.redo", "Redo"),
+  screenshot: msg("widget.moreDrawer.screenshot", "Screenshot"),
+  sync: msg("widget.moreDrawer.sync", "Sync"),
+  noAlerts: msg("widget.moreDrawer.noAlerts", "No alerts yet."),
+  alert: msg("widget.moreDrawer.alert", "{title}: {message}")
+};
 var STYLE_ID17 = "vela-widget-more-drawer";
 var CSS17 = `
 .vela-md-actions {
@@ -8079,6 +8609,9 @@ var MoreDrawer = class {
   destroy() {
     this.drawer.destroy();
   }
+  t(text, values) {
+    return textOf(this.opts.i18n, text, values);
+  }
   show(view) {
     this.view = view;
     this.render();
@@ -8090,7 +8623,7 @@ var MoreDrawer = class {
       const back = doc.createElement("button");
       back.className = "vela-md-back";
       back.appendChild(iconEl("chevron-left", doc));
-      back.appendChild(doc.createTextNode(this.view === "style" ? "Chart type" : this.view === "layout" ? "Layout" : "Alerts"));
+      back.appendChild(doc.createTextNode(this.t(this.view === "style" ? TEXT18.chartType : this.view === "layout" ? TEXT18.layout : TEXT18.alerts)));
       back.addEventListener("click", () => this.show("main"));
       this.drawer.body.appendChild(back);
     }
@@ -8130,25 +8663,25 @@ var MoreDrawer = class {
       b.className = "vela-md-action";
       b.disabled = !enabled;
       b.appendChild(iconEl(icon2, doc));
-      b.appendChild(doc.createTextNode(label));
+      b.appendChild(doc.createTextNode(this.t(label)));
       b.addEventListener("click", () => {
         run();
         this.drawer.hide();
       });
       actions.appendChild(b);
     };
-    if (this.opts.onUndo) action("undo", "Undo", this.opts.canUndo(), this.opts.onUndo);
-    if (this.opts.onRedo) action("redo", "Redo", this.opts.canRedo(), this.opts.onRedo);
-    if (this.opts.onScreenshot) action("camera", "Screenshot", true, this.opts.onScreenshot);
+    if (this.opts.onUndo) action("undo", TEXT18.undo, this.opts.canUndo(), this.opts.onUndo);
+    if (this.opts.onRedo) action("redo", TEXT18.redo, this.opts.canRedo(), this.opts.onRedo);
+    if (this.opts.onScreenshot) action("camera", TEXT18.screenshot, true, this.opts.onScreenshot);
     if (actions.childElementCount > 0) this.drawer.body.appendChild(actions);
     const list = doc.createElement("div");
     list.className = "vela-md-list";
     const current = this.opts.priceStyles().find((s) => s.id === this.opts.priceStyle());
-    list.appendChild(this.row(doc, "Chart type", { icon: "style-line", value: current?.label, chevron: true, onClick: () => this.show("style") }));
+    list.appendChild(this.row(doc, this.t(TEXT18.chartType), { icon: "style-line", value: current?.label, chevron: true, onClick: () => this.show("style") }));
     if (this.opts.layout) {
       const shape = this.opts.layout.shape();
-      const value = shape ? `${shape.cols} \xD7 ${shape.rows}` : this.opts.layout.presets().find((p) => p.checked)?.label;
-      list.appendChild(this.row(doc, "Layout", { icon: "layout", glyph: this.opts.layout.glyph?.(), value, chevron: true, onClick: () => this.show("layout") }));
+      const value = shape ? layoutGridLabel(shape.cols, shape.rows, this.opts.i18n) : this.opts.layout.presets().find((p) => p.checked)?.label;
+      list.appendChild(this.row(doc, this.t(TEXT18.layout), { icon: "layout", glyph: this.opts.layout.glyph?.(), value, chevron: true, onClick: () => this.show("layout") }));
     }
     for (const act of this.opts.primaryActions?.() ?? []) list.appendChild(this.actionRow(doc, act));
     for (const panel of this.opts.panels()) {
@@ -8164,7 +8697,7 @@ var MoreDrawer = class {
     }
     if (this.opts.alerts) {
       const alertCount = this.opts.alerts().length;
-      list.appendChild(this.row(doc, "Alerts", { icon: "bell", value: alertCount > 0 ? String(alertCount) : void 0, chevron: true, onClick: () => this.show("alerts") }));
+      list.appendChild(this.row(doc, this.t(TEXT18.alerts), { icon: "bell", value: alertCount > 0 ? String(alertCount) : void 0, chevron: true, onClick: () => this.show("alerts") }));
     }
     for (const act of this.opts.actions()) list.appendChild(this.actionRow(doc, act));
     this.drawer.body.appendChild(list);
@@ -8204,7 +8737,7 @@ var MoreDrawer = class {
     list.className = "vela-md-list";
     const wrap = doc.createElement("div");
     wrap.className = "vela-md-gridwrap";
-    const { el: grid, squares } = layoutGridCanvas(doc);
+    const { el: grid, squares } = layoutGridCanvas(doc, this.opts.i18n);
     paintLayoutGrid(squares, layout.shape());
     grid.addEventListener("click", (e) => {
       const sq = e.target?.closest?.(".vela-lp-sq");
@@ -8229,7 +8762,7 @@ var MoreDrawer = class {
     if (syncs.length > 0) {
       const heading = doc.createElement("div");
       heading.className = "vela-md-section";
-      heading.textContent = "Sync";
+      heading.textContent = this.t(TEXT18.sync);
       list.appendChild(heading);
       for (const s of syncs) {
         list.appendChild(
@@ -8250,20 +8783,23 @@ var MoreDrawer = class {
     if (alerts.length === 0) {
       const empty = doc.createElement("div");
       empty.className = "vela-md-empty";
-      empty.textContent = "No alerts yet.";
+      empty.textContent = this.t(TEXT18.noAlerts);
       this.drawer.body.appendChild(empty);
       return;
     }
     const list = doc.createElement("div");
     list.className = "vela-md-list";
     for (const a of alerts) {
-      list.appendChild(this.row(doc, `${a.title}: ${a.message}`, { value: new Date(a.time).toLocaleTimeString(), onClick: () => void 0 }));
+      list.appendChild(this.row(doc, this.t(TEXT18.alert, { title: a.title, message: a.message }), { value: eventTimeText(a.time, this.opts.i18n), onClick: () => void 0 }));
     }
     this.drawer.body.appendChild(list);
   }
 };
 
 // src/widget/timezone-drawer.ts
+var TEXT19 = {
+  title: msg("widget.timezoneDrawer.title", "Time zone")
+};
 var STYLE_ID18 = "vela-widget-timezone-drawer";
 var CSS18 = `
 .vela-tzd-list { padding: 2px 0 4px; }
@@ -8285,9 +8821,10 @@ var TimezoneDrawer = class {
   constructor(opts) {
     this.opts = opts;
     injectStyles(STYLE_ID18, CSS18, opts.host.ownerDocument);
-    this.drawer = new Drawer({ host: opts.host, title: "Time zone", onOpenChange: opts.onOpenChange });
+    this.drawer = new Drawer({ host: opts.host, title: textOf(opts.i18n, TEXT19.title), onOpenChange: opts.onOpenChange });
   }
   open() {
+    this.drawer.setTitle(textOf(this.opts.i18n, TEXT19.title));
     this.render();
     this.drawer.show();
   }
@@ -8302,7 +8839,7 @@ var TimezoneDrawer = class {
     this.drawer.body.replaceChildren();
     const list = doc.createElement("div");
     list.className = "vela-tzd-list";
-    for (const tz of timezoneMenuRows(this.opts.timezone())) {
+    for (const tz of timezoneMenuRows(this.opts.timezone(), this.opts.i18n)) {
       const row = doc.createElement("div");
       row.className = "vela-tzd-row";
       const label = doc.createElement("span");
@@ -8347,17 +8884,21 @@ var CSS19 = `
     color: var(--vela-fg-muted);
 }
 `;
+var TEXT20 = {
+  title: msg("widget.priceScaleDrawer.title", "Price scale")
+};
 var PriceScaleDrawer = class {
   constructor(opts) {
     this.opts = opts;
     this.pane = null;
     injectStyles(STYLE_ID19, CSS19, opts.host.ownerDocument);
-    this.drawer = new Drawer({ host: opts.host, title: "Price scale", onOpenChange: opts.onOpenChange });
+    this.drawer = new Drawer({ host: opts.host, title: textOf(opts.chart()?.i18n, TEXT20.title), onOpenChange: opts.onOpenChange });
   }
   open() {
     const chart = this.opts.chart();
     const panes = chart?.renderer.get("paneScales");
     this.pane = Array.isArray(panes) ? paneScaleAt(panes, this.opts.pressY()) : null;
+    this.drawer.setTitle(textOf(chart?.i18n, TEXT20.title));
     this.render();
     this.drawer.show();
   }
@@ -8384,7 +8925,7 @@ var PriceScaleDrawer = class {
       priceLabel: this.flag("priceLabel"),
       countdown: this.flag("countdown"),
       priceLine: this.flag("currentPriceLine")
-    });
+    }, chart.i18n);
     const list = doc.createElement("div");
     list.className = "vela-psd-list";
     const row = (label, opts) => {
@@ -8407,7 +8948,7 @@ var PriceScaleDrawer = class {
     };
     for (const item of items) {
       if (item.id === "labels" && item.submenu) {
-        section("Labels");
+        section(item.label);
         for (const sub of item.submenu) {
           row(sub.label, {
             checked: sub.checked,
@@ -8421,7 +8962,7 @@ var PriceScaleDrawer = class {
         continue;
       }
       if (item.id === "levels" && item.submenu) {
-        section("Levels");
+        section(item.label);
         for (const sub of item.submenu) {
           row(sub.label, {
             checked: sub.checked,
@@ -8487,6 +9028,12 @@ var PriceScaleDrawer = class {
 };
 
 // src/widget/drawing-pill.ts
+var TEXT21 = {
+  magnet: msg("widget.drawingPill.magnet", "Magnet snap"),
+  stay: msg("widget.drawingPill.stay", "Stay in drawing mode"),
+  eraser: msg("widget.drawingPill.eraser", "Eraser"),
+  exit: msg("widget.drawingPill.exit", "Exit drawing mode")
+};
 var STYLE_ID20 = "vela-widget-drawing-pill";
 var CSS20 = `
 .vela-drawpill { display: none; }
@@ -8536,17 +9083,24 @@ var CSS20 = `
 .vela-drawpill-btn .vela-icon { font-size: 17px; width: 17px; height: 17px; }
 .vela-drawpill-badge {
     position: absolute;
-    top: 2px;
-    right: 2px;
-    font-size: 8px;
-    font-weight: 700;
+    top: 5px;
+    right: 5px;
+    display: none;
+    align-items: flex-end;
+    gap: 1px;
     color: var(--vela-accent);
 }
+.vela-drawpill-badge[data-strength] { display: inline-flex; }
+.vela-drawpill-badge > i { display: block; width: 2px; height: 4px; border-radius: 1px; background: currentColor; }
+.vela-drawpill-badge > i + i { height: 7px; opacity: 0.3; }
+.vela-drawpill-badge[data-strength='strong'] > i + i { opacity: 1; }
 `;
 var DrawingPill = class {
   constructor(host) {
     this.chart = null;
     this.chartSubs = [];
+    /** Each button's accessible name, re-read in the chart's language on every sync. */
+    this.labels = [];
     const doc = host.ownerDocument;
     injectStyles(STYLE_ID20, CSS20, doc);
     this.el = doc.createElement("div");
@@ -8557,32 +9111,38 @@ var DrawingPill = class {
     const btn = (icon2, label, onClick) => {
       const b = doc.createElement("button");
       b.className = "vela-drawpill-btn";
-      b.setAttribute("aria-label", label);
+      b.setAttribute("aria-label", this.t(label));
+      this.labels.push({ el: b, label });
       b.appendChild(iconEl(icon2, doc));
       b.addEventListener("click", onClick);
       return b;
     };
-    this.magnetBtn = btn("magnet", "Magnet snap", () => {
+    this.magnetBtn = btn("magnet", TEXT21.magnet, () => {
       const order = ["off", "weak", "strong"];
       const cur = this.chart?.drawings.getSnapMode() ?? "off";
       this.chart?.drawings.setSnapMode(order[(order.indexOf(cur) + 1) % order.length]);
     });
     this.magnetBadge = doc.createElement("span");
     this.magnetBadge.className = "vela-drawpill-badge";
+    this.magnetBadge.setAttribute("aria-hidden", "true");
+    this.magnetBadge.append(doc.createElement("i"), doc.createElement("i"));
     this.magnetBtn.appendChild(this.magnetBadge);
-    this.stayBtn = btn(iconMarkup("pen-lock") ? "pen-lock" : "pen", "Stay in drawing mode", () => {
+    this.stayBtn = btn(iconMarkup("pen-lock") ? "pen-lock" : "pen", TEXT21.stay, () => {
       this.chart?.drawings.setStayMode(!this.chart.drawings.getStayMode());
     });
-    this.eraserBtn = btn("eraser", "Eraser", () => {
+    this.eraserBtn = btn("eraser", TEXT21.eraser, () => {
       this.chart?.drawings.setMode(this.chart.drawings.getMode() === "eraser" ? null : "eraser");
     });
-    const close = btn("close", "Exit drawing mode", () => {
+    const close = btn("close", TEXT21.exit, () => {
       this.chart?.drawings.setTool(null);
       this.chart?.drawings.setMode(null);
     });
     this.el.append(this.toolGlyph, this.magnetBtn, this.stayBtn, this.eraserBtn, close);
     host.appendChild(this.el);
   }
+  t(text) {
+    return textOf(this.chart?.i18n, text);
+  }
   /** Rebind to another chart (a rebuild, or the workspace's active cell changing) —
    *  the previous chart's subscriptions are dropped so only one chart drives the pill. */
   onChart(chart) {
@@ -8596,7 +9156,12 @@ var DrawingPill = class {
     ];
     this.sync();
   }
+  /** Re-read the labels in the chart's language. */
+  relocalize() {
+    this.sync();
+  }
   sync() {
+    for (const { el, label } of this.labels) el.setAttribute("aria-label", this.t(label));
     const drawings = this.chart?.drawings;
     if (!drawings || !drawings.supported) {
       this.el.hidden = true;
@@ -8609,7 +9174,8 @@ var DrawingPill = class {
     this.toolGlyph.innerHTML = tool !== null ? getDrawingType(tool)?.icon ?? "" : iconMarkup("eraser") ?? "";
     const snap = drawings.getSnapMode();
     this.magnetBtn.dataset.on = snap !== "off" ? "1" : "";
-    this.magnetBadge.textContent = snap === "weak" ? "W" : snap === "strong" ? "S" : "";
+    if (snap === "off") delete this.magnetBadge.dataset.strength;
+    else this.magnetBadge.dataset.strength = snap;
     this.stayBtn.dataset.on = drawings.getStayMode() ? "1" : "";
     this.eraserBtn.dataset.on = eraser ? "1" : "";
   }
@@ -8644,6 +9210,7 @@ function buildContext(host) {
     togglePanel: (id, open) => host.togglePanel(id, open),
     dockStrip: (el) => host.dockStrip(el),
     host: host.root,
+    i18n: host.i18n,
     toast: (message, kind) => host.toast(message, kind),
     addIndicator: (entry) => host.active()?.addExternalIndicator(entry),
     addNativeIndicator: (type) => host.active()?.addNative(type),
@@ -8723,7 +9290,7 @@ var CSS21 = `
 .vela-ws-grid { position: relative; flex: 1 1 auto; min-width: 0; display: grid; gap: ${GAP_PX}px; background: var(--vela-border-soft); }
 .vela-cell { background: var(--vela-bg); position: relative; }
 /* Active-cell highlight: an overlay ring ABOVE the chart's own canvas stack (a plain
-   outline on the cell is painted under them) \u2014 inert to the pointer. Scoped to
+   outline on the cell is painted under them) — inert to the pointer. Scoped to
    multi-cell grids ([data-multi]): a single-cell layout always has an active cell,
    and ringing the only chart would just be noise. */
 .vela-ws-grid[data-multi='1'] .vela-cell[data-active='1']::after {
@@ -8740,11 +9307,11 @@ var CSS21 = `
 .vela-ws-splitter:hover::after { content: ''; position: absolute; background: var(--vela-separator-hover-line); }
 .vela-ws-splitter[data-axis='cols']:hover::after { left: calc(50% - 1px); top: 0; width: 2px; height: 100%; }
 .vela-ws-splitter[data-axis='rows']:hover::after { top: calc(50% - 1px); left: 0; height: 2px; width: 100%; }
-/* Mobile: the docked drawing-toolbar column would eat a phone-width grid \u2014 the shell's
+/* Mobile: the docked drawing-toolbar column would eat a phone-width grid — the shell's
    drawings drawer + on-chart pill replace it (same policy as the widget's in-chart bar). */
 [data-layout='mobile'] .vela-ws-toolbar { display: none; }
 /* A maximized cell owns the whole grid: the splitter strips have no seams to grab and
-   the active ring would just outline the only visible chart \u2014 both are noise here. */
+   the active ring would just outline the only visible chart — both are noise here. */
 .vela-ws-grid[data-maximized='1'] .vela-ws-splitter { display: none; }
 .vela-ws-grid[data-maximized='1'] .vela-cell[data-active='1']::after { display: none; }
 /* Drop-target preview while a cell's drag handle is held: a dashed ring + the same
@@ -8764,24 +9331,58 @@ function declaredOrder(cells) {
   const names = Object.keys(cells ?? {});
   for (const n of names) {
     if (/^\d+$/.test(n)) {
-      console.warn(`[vela] workspace cell "${n}" ignored \u2014 a purely-numeric name cannot keep its declaration order (JS object key semantics); use e.g. "cell${n}"`);
+      console.warn(`[vela] workspace cell "${n}" ignored — a purely-numeric name cannot keep its declaration order (JS object key semantics); use e.g. "cell${n}"`);
     }
   }
   return names.filter((n) => !/^\d+$/.test(n));
 }
+var TEXT22 = {
+  syncSymbol: msg("workspace.sync.symbol", "Symbol"),
+  syncInterval: msg("workspace.sync.interval", "Interval"),
+  syncCrosshair: msg("workspace.sync.crosshair", "Crosshair"),
+  syncStyle: msg("workspace.sync.style", "Style"),
+  alert: msg("workspace.alerts.untitled", "Alert"),
+  alertToast: msg("workspace.alerts.toast", "{source} — {title} — {message}"),
+  alertToastUntitled: msg("workspace.alerts.toastUntitled", "{source} — {message}"),
+  alertRow: msg("workspace.alerts.row", "{source} · {time} · {title}: {message}"),
+  alertDrawerTitle: msg("workspace.alerts.drawerTitle", "{source} · {title}"),
+  noAlerts: msg("workspace.alerts.none", "No alerts yet"),
+  screenshot: msg("workspace.keys.screenshot", "Download a screenshot of the layout"),
+  resetView: msg("workspace.keys.resetView", "Reset view (all history)"),
+  toggleLog: msg("workspace.keys.toggleLog", "Toggle logarithmic scale"),
+  togglePercent: msg("workspace.keys.togglePercent", "Toggle percent scale"),
+  trendline: msg("workspace.keys.trendline", "Arm the trend line tool"),
+  hlineCursor: msg("workspace.keys.hlineCursor", "Horizontal line at the cursor price"),
+  vlineCursor: msg("workspace.keys.vlineCursor", "Vertical line at the cursor time"),
+  undo: msg("workspace.keys.undo", "Undo (active chart)"),
+  redo: msg("workspace.keys.redo", "Redo (active chart)"),
+  zoomIn: msg("workspace.keys.zoomIn", "Zoom in"),
+  zoomOut: msg("workspace.keys.zoomOut", "Zoom out"),
+  panLeft: msg("workspace.keys.panLeft", "Pan toward history"),
+  panRight: msg("workspace.keys.panRight", "Pan toward now"),
+  openIndicators: msg("workspace.keys.openIndicators", "Open the indicator picker"),
+  showShortcuts: msg("workspace.keys.showShortcuts", "Show this shortcuts panel"),
+  categoryChart: msg("workspace.keys.category.chart", "Chart"),
+  categoryDrawings: msg("workspace.keys.category.drawings", "Drawings"),
+  categoryEdit: msg("workspace.keys.category.edit", "Edit"),
+  categoryIndicators: msg("workspace.keys.category.indicators", "Indicators"),
+  categoryHelp: msg("workspace.keys.category.help", "Help")
+};
+var ALERT_ROW_MAX = 80;
 function nextAutoCellId(taken) {
   for (let i = 1; ; i += 1) {
     if (!taken.has(`c${i}`)) return `c${i}`;
   }
 }
 function resolveTyping(key, open) {
+  const printable = [...key].length === 1;
   if (open.dialogs > 0) {
-    if (key.length !== 1) return null;
+    if (!printable) return null;
     if (open.symbolSearch) return { target: "symbol", text: key.toUpperCase() };
     if (open.timeframeEntry) return { target: "timeframe", text: key.toUpperCase() };
     return null;
   }
-  if (/^[a-zA-Z0]$/.test(key)) return { target: "symbol", text: key.toUpperCase() };
+  if (printable && /^[\p{L}0]$/u.test(key)) return { target: "symbol", text: key.toUpperCase() };
   if (/^[1-9]$/.test(key)) return { target: "timeframe", text: key };
   return null;
 }
@@ -8897,6 +9498,7 @@ var VelaWorkspace = class {
     const hostEl = typeof container === "string" ? document.querySelector(container) : container;
     if (!hostEl) throw new Error(`VelaWorkspace: container not found: ${String(container)}`);
     this.opts = opts;
+    this.localeState = new LocaleState(pickLocalization(opts));
     this.replay = new WorkspaceReplay({
       cells: () => this.cells(),
       activeId: () => this.activeId,
@@ -8947,12 +9549,14 @@ var VelaWorkspace = class {
     this.root = doc.createElement("div");
     this.root.className = "vela-workspace";
     ensureUIHost(this.root, resolveTheme(opts.theme));
+    this.applyRootAttributes();
     for (const [name, make] of Object.entries(opts.providers ?? {})) void this.feed.registerProvider(name, make());
     void this.feed.ready().then(() => {
       if (!this.destroyed) this.refreshRetention();
     });
     this.symbolPicker = new SymbolPicker({
       host: this.root,
+      i18n: this.localeState,
       // Row icons come from each descriptor's OWNING provider (resolveSymbolIcon).
       iconFor: (d) => this.feed.symbolIconOf(d),
       onSelect: (ticker) => this.active.setSymbol(ticker),
@@ -8964,6 +9568,7 @@ var VelaWorkspace = class {
     this.symbolPicker.setSource(() => this.feed.symbols());
     this.indicatorPicker = opts.indicatorPicker !== false && !this.indicatorsOverride && topbarHas(this.topbarComp, "indicators") ? new IndicatorPicker({
       host: this.root,
+      i18n: this.localeState,
       library: () => this.active.libraryRows(),
       onChart: () => this.active.onChartRows(),
       onAdd: (i) => this.active.addFromLibrary(i),
@@ -8976,11 +9581,13 @@ var VelaWorkspace = class {
     const picker = this.indicatorPicker;
     this.tfQuick = new TimeframeQuick({
       host: this.root,
+      i18n: this.localeState,
       onApply: (tf) => this.setActiveTimeframe(tf),
       onOpenChange: (open) => this.trackDialog(open)
     });
     this.topbar = new Topbar(this.root, {
       symbol: "",
+      i18n: this.localeState,
       // RAW option, not the resolved lists — the bar distinguishes a host-declared
       // side (list is law) from a default one (an override's `order` may flow).
       composition: opts.topbar,
@@ -9004,18 +9611,13 @@ var VelaWorkspace = class {
         // The picker composes dynamic layouts on its grid canvas; registered
         // presets the canvas cannot express (bespoke plugin areas) list as rows.
         shape: () => layoutShape(this.def),
-        presets: () => layouts().filter((l) => layoutShape(l) === null).map((l) => ({ id: l.id, label: l.label })),
+        presets: () => layouts(this.localeState).filter((l) => layoutShape(l) === null).map((l) => ({ id: l.id, label: l.label })),
         onSelectGrid: (rows, cols) => this.setLayout(layoutForGrid(rows, cols)),
         onSelectPreset: (id) => this.setLayout(id),
         // The SYNC switches reflect the simple all-cells form; flipping one
         // OVERRIDES a host-set group record with plain on/off (groups stay an
         // API-only shape).
-        syncs: () => [
-          { id: "symbol", label: "Symbol", checked: this.syncOpts.symbol === true },
-          { id: "timeframe", label: "Interval", checked: this.syncOpts.timeframe === true },
-          { id: "crosshair", label: "Crosshair", checked: this.syncOpts.crosshair === true },
-          { id: "style", label: "Style", checked: this.syncOpts.style === true }
-        ],
+        syncs: () => this.syncRows(),
         onToggleSync: (id) => {
           const kind = id;
           this.sync.set(kind, this.syncOpts[kind] ? false : true);
@@ -9026,7 +9628,7 @@ var VelaWorkspace = class {
     });
     const main = doc.createElement("div");
     main.className = "vela-ws-main";
-    const toolbar = buildToolbar(opts.drawings);
+    const toolbar = buildToolbar(opts.drawings, this.localeState);
     this.drawingsEnabled = opts.drawings !== false;
     this.toolbarDef = toolbar.definition;
     let toolbarHost = null;
@@ -9041,12 +9643,13 @@ var VelaWorkspace = class {
     this.dock = new PanelDock(main, {
       chrome: this.topbar,
       context: () => this.context(),
-      changed: () => this.markStateDirty()
+      changed: () => this.markStateDirty(),
+      i18n: this.localeState
     });
-    this.objectTree = new ObjectTree(main, (sym) => this.feed.symbolIcon(sym));
-    this.dataWindow = new DataWindow(main);
-    this.dock.addBuiltIn({ id: "dataWindow", title: "Data window", icon: "datawindow", order: 10, panel: this.dataWindow, onChart: (c) => this.dataWindow.onChart(c) });
-    this.dock.addBuiltIn({ id: "objects", title: "Object tree", icon: "objects", order: 20, panel: this.objectTree, onChart: (c) => this.objectTree.onChart(c) });
+    this.objectTree = new ObjectTree(main, (sym) => this.feed.symbolIcon(sym), this.localeState);
+    this.dataWindow = new DataWindow(main, this.localeState);
+    this.dock.addBuiltIn({ id: "dataWindow", title: DATA_WINDOW_TITLE, icon: "datawindow", order: 10, panel: this.dataWindow, onChart: (c) => this.dataWindow.onChart(c) });
+    this.dock.addBuiltIn({ id: "objects", title: OBJECT_TREE_TITLE, icon: "objects", order: 20, panel: this.objectTree, onChart: (c) => this.objectTree.onChart(c) });
     this.dock.refresh();
     if (boot?.panels) this.dock.applyState(boot.panels);
     this.root.appendChild(main);
@@ -9057,7 +9660,7 @@ var VelaWorkspace = class {
     const attribution = rendererDefaults().attribution;
     if (attribution !== false) {
       const background = resolveTheme(opts.theme).background;
-      const mark = typeof attribution === "string" && attribution.trim() ? createCustomMark(doc, attribution, background) : createAttributionMark(doc, background);
+      const mark = typeof attribution === "string" && attribution.trim() ? createCustomMark(doc, attribution, background) : createAttributionMark(doc, background, this.localeState);
       Object.assign(mark.style, {
         left: "calc(var(--vela-toolbar-gutter, 0px) + 12px)",
         bottom: `calc(var(--vela-bottom-gutter, ${TIME_AXIS_H3}px) + 10px)`,
@@ -9096,6 +9699,7 @@ var VelaWorkspace = class {
       },
       {
         dock: "static",
+        i18n: () => this.localeState,
         // Drawings sync is a WORKSPACE link (same model as the layout
         // dropdown's switches) — the bar only hosts its toggle.
         onDrawingsSync: (on) => {
@@ -9108,6 +9712,7 @@ var VelaWorkspace = class {
     this.drawToolbar?.setVisible(true);
     this.drawToolbar?.setDrawingsSyncMode(!!this.syncOpts.drawings);
     this.bottombar = opts.bottombar !== false ? new Bottombar(this.root, {
+      i18n: this.localeState,
       timezone: this.timezone,
       clock: this.clock,
       onRange: (preset) => {
@@ -9121,6 +9726,7 @@ var VelaWorkspace = class {
       onSettingsClick: () => this.active.chart.renderer.openSettings()
     }) : null;
     this.mobileBar = opts.bottombar !== false ? new MobileBar(this.root, {
+      i18n: this.localeState,
       symbol: "",
       timeframe: "60",
       onSymbolClick: () => this.symbolPicker.open(),
@@ -9154,7 +9760,7 @@ var VelaWorkspace = class {
     this.keymap = new KeymapManager();
     this.keymap.attach(this.root);
     this.registerDefaultKeys();
-    this.drawToolbar?.setShortcuts(toolShortcutHints(this.keymap));
+    this.drawToolbar?.setShortcuts(toolShortcutHints(this.keymap, this.localeState));
     this.root.addEventListener("keydown", this.onRootKeydown);
     this.root.tabIndex = -1;
     this.cellBackend = this.backendFor(this.def);
@@ -9278,6 +9884,61 @@ var VelaWorkspace = class {
   on(event, handler) {
     return this.events.on(event, handler);
   }
+  /**
+   * The workspace's translator: its resolved locale and direction, `t()` for messages and
+   * `format` for numbers and dates. Every cell's chart carries the same settings
+   * (`cell.chart.i18n`), and contributed actions read it as `ctx.i18n`. The same object
+   * for the workspace's lifetime; it reads the new settings after {@link setLocale}.
+   */
+  get i18n() {
+    return this.localeState;
+  }
+  /**
+   * Change the language, direction or formatting of the whole workspace at runtime — a
+   * locale tag (`ws.setLocale('de')`) or any {@link LocalizationOptions} fields. Fields
+   * you pass replace their current value (an explicit `undefined` restores the default);
+   * the others are kept. Every cell re-renders in place, the shared chrome follows, and
+   * `locale:changed` fires. Register the locale's pack (`registerLocale`) first for
+   * translated text.
+   */
+  setLocale(next) {
+    if (this.destroyed) return;
+    const patch = typeof next === "string" ? { locale: next } : pickLocalization(next);
+    this.localeState.update(patch);
+    this.applyRootAttributes();
+    for (const cell of this.cellsById.values()) {
+      cell.chart.setLocale(patch);
+      cell.relocalize();
+    }
+    this.relocalizeChrome();
+    this.events.emit("locale:changed", { locale: this.localeState.locale, direction: this.localeState.direction });
+  }
+  /** Re-read the shared chrome in the current language. Dialogs, menus and drawers read
+   *  it on their next open; what stays on screen is relabeled here. */
+  relocalizeChrome() {
+    this.symbolPicker.relabel();
+    this.indicatorPicker?.relabel();
+    this.tfQuick.relabel();
+    this.topbar.relocalize();
+    this.bottombar?.relocalize();
+    this.mobileBar?.relocalize();
+    this.dock.relocalize();
+    this.toolbarDef = buildToolbar(this.opts.drawings, this.localeState).definition;
+    this.drawToolbar?.setDefinition(this.toolbarDef);
+    this.drawToolbar?.relabel();
+    this.drawToolbar?.setShortcuts(toolShortcutHints(this.keymap, this.localeState));
+    this.drawingPill?.relocalize();
+    if (this.attributionMark) relabelAttributionMark(this.attributionMark, this.localeState);
+  }
+  /** `lang` once the host set a locale, `dir` once it set a direction; otherwise the
+   *  attributes stay off and the host page decides. */
+  applyRootAttributes() {
+    const s = this.localeState;
+    if (s.localeExplicit) this.root.setAttribute("lang", s.locale);
+    else this.root.removeAttribute("lang");
+    if (s.directionExplicit) this.root.setAttribute("dir", s.direction);
+    else this.root.removeAttribute("dir");
+  }
   /** The context handed to contributed actions/attachments (rebuilt per invocation). */
   context() {
     return buildContext({
@@ -9294,6 +9955,7 @@ var VelaWorkspace = class {
         };
       },
       root: this.root,
+      i18n: this.localeState,
       toast: (message, kind) => this.toastHost.show(message, kind),
       stateDirty: () => this.markStateDirty(),
       replay: this.replay
@@ -9794,7 +10456,7 @@ var VelaWorkspace = class {
   resolveLayout(layout) {
     if (typeof layout !== "string") return layout;
     const def = ensureLayout(layout);
-    if (!def) throw new Error(`[vela] unknown workspace layout "${layout}" \u2014 register it with registerLayout().`);
+    if (!def) throw new Error(`[vela] unknown workspace layout "${layout}" — register it with registerLayout().`);
     return def;
   }
   backendFor(def) {
@@ -9922,6 +10584,7 @@ var VelaWorkspace = class {
         feed: this.feed,
         engines: this.opts.engines ?? {},
         chartDefaults: cellChartDefaults(this.opts),
+        localization: () => this.localeState.options,
         theme,
         live: this.opts.live ?? false,
         volume: this.opts.volume ?? true,
@@ -9974,10 +10637,11 @@ var VelaWorkspace = class {
     chart.on("script:run", (run) => this.events.emit("script:run", { ...run, cell: cell.id }));
     chart.on("priceStyle:change", ({ from, to }) => this.events.emit("cell:priceStyle", { id: cell.id, from, to }));
     chart.on("alert", (alert) => {
-      const source = [parseSymbol(cell.symbol).ticker || cell.symbol, timeframeLabel(cell.timeframe), alert.indicator].filter(Boolean).join(" ");
-      this.alerts.unshift({ cellId: cell.id, source, title: alert.title ?? "Alert", message: alert.message, time: alert.time });
+      const source = [parseSymbol(cell.symbol).ticker || cell.symbol, timeframeLabel(cell.timeframe, this.localeState), alert.indicator].filter(Boolean).join(" ");
+      this.alerts.unshift({ cellId: cell.id, source, title: alert.title ?? this.t(TEXT22.alert), message: alert.message, time: alert.time });
       if (this.alerts.length > this.alertCap) this.alerts.pop();
-      this.toastHost.show(`${source} \u2014 ${alert.title ? alert.title + " \u2014 " : ""}${alert.message}`, "info", 4e3);
+      const toast = alert.title ? this.t(TEXT22.alertToast, { source, title: alert.title, message: alert.message }) : this.t(TEXT22.alertToastUntitled, { source, message: alert.message });
+      this.toastHost.show(toast, "info", 4e3);
       this.topbar.setAlertCount(this.alerts.length);
     });
     chart.on("drawing:favorites", ({ favorites }) => {
@@ -10063,7 +10727,7 @@ var VelaWorkspace = class {
     if (kind === "crosshair") {
       for (const cell of this.cellsById.values()) cell.chart.renderer.setExternalCrosshair(null);
       if (setting && ![...this.cellsById.values()].some((c) => c.chart.renderer.supportsExternalCrosshair)) {
-        console.warn("[vela] crosshair sync: no cell renderer supports an external crosshair \u2014 nothing will show.");
+        console.warn("[vela] crosshair sync: no cell renderer supports an external crosshair — nothing will show.");
       }
       if (this.topbar && this.def) this.topbar.setLayout(this.def.id);
       this.markStateDirty();
@@ -10446,7 +11110,8 @@ var VelaWorkspace = class {
         this.active.applyRange(preset);
         this.bottombar?.setActiveRange(preset.id);
       },
-      onOpenChange: (open) => this.trackDialog(open)
+      onOpenChange: (open) => this.trackDialog(open),
+      i18n: this.localeState
     }));
     this.tfDrawer.open();
   }
@@ -10459,7 +11124,8 @@ var VelaWorkspace = class {
       isFavorite: (type) => this.active.chart.drawings.isFavorite(type),
       onFavorite: (type, on) => this.active.chart.drawings.setFavorite(type, on),
       onSelect: (type) => this.active.chart.drawings.setTool(type),
-      onOpenChange: (open) => this.trackDialog(open)
+      onOpenChange: (open) => this.trackDialog(open),
+      i18n: () => this.localeState
     }));
     this.drawingsDrawer.open();
   }
@@ -10467,16 +11133,17 @@ var VelaWorkspace = class {
     const has = (id) => topbarHas(this.topbarComp, id);
     this.moreDrawer ?? (this.moreDrawer = new MoreDrawer({
       host: this.root,
+      i18n: this.localeState,
       ...has("undo-redo") ? { onUndo: () => this.active.history.undo(), onRedo: () => this.active.history.redo() } : {},
       ...has("screenshot") ? { onScreenshot: this.screenshotOverride ? () => this.runOverride(this.screenshotOverride) : () => this.downloadScreenshot() } : {},
       canUndo: () => this.active.history.canUndo,
       canRedo: () => this.active.history.canRedo,
-      priceStyles: () => priceStyleIds().map((id) => ({ id, label: priceStyleLabel(id), icon: priceStyleIcon(id) })),
+      priceStyles: () => priceStyleIds().map((id) => ({ id, label: priceStyleLabel(id, this.localeState), icon: priceStyleIcon(id) })),
       priceStyle: () => this.active.priceStyle,
       onPriceStyle: (id) => this.active.setPriceStyle(id),
       panels: () => has("panels") ? [...this.dock.list()] : [],
       onTogglePanel: (id) => this.dock.toggle(id),
-      ...has("alerts") ? { alerts: () => this.alerts.map((a) => ({ title: `${a.source} \xB7 ${a.title}`, message: a.message, time: a.time })) } : {},
+      ...has("alerts") ? { alerts: () => this.alerts.map((a) => ({ title: this.t(TEXT22.alertDrawerTitle, { source: a.source, title: a.title }), message: a.message, time: a.time })) } : {},
       // Actions placed on the bottom bar (left-aligned by default) have their stop
       // there — only the menu-placed ones land in the drawer, or they would appear
       // twice: left (primary) ones with the primary rows, right ones at the end.
@@ -10490,15 +11157,10 @@ var VelaWorkspace = class {
       // single-chart mode and a composition without 'layout' omit it here too.
       layout: this.monoLayout || !has("layout") ? void 0 : {
         shape: () => layoutShape(this.def),
-        presets: () => layouts().filter((l) => layoutShape(l) === null).map((l) => ({ id: l.id, label: l.label, checked: l.id === this.def.id })),
+        presets: () => layouts(this.localeState).filter((l) => layoutShape(l) === null).map((l) => ({ id: l.id, label: l.label, checked: l.id === this.def.id })),
         onSelectGrid: (rows, cols) => this.setLayout(layoutForGrid(rows, cols)),
         onSelectPreset: (id) => this.setLayout(id),
-        syncs: () => [
-          { id: "symbol", label: "Symbol", checked: this.syncOpts.symbol === true },
-          { id: "timeframe", label: "Interval", checked: this.syncOpts.timeframe === true },
-          { id: "crosshair", label: "Crosshair", checked: this.syncOpts.crosshair === true },
-          { id: "style", label: "Style", checked: this.syncOpts.style === true }
-        ],
+        syncs: () => this.syncRows(),
         onToggleSync: (id) => {
           const kind = id;
           this.sync.set(kind, this.syncOpts[kind] ? false : true);
@@ -10512,14 +11174,28 @@ var VelaWorkspace = class {
   /** The contributed topbar actions the mobile menu lists, from one cluster. */
   drawerActions(cluster) {
     const builtin = new Set(TOPBAR_BUILTIN_IDS);
-    return widgetActions("topbar", this.context()).filter((a) => mobilePlacement(a) === "menu" && a.align === "left" === (cluster === "left") && !builtin.has(a.id)).map((a) => ({ label: a.label, icon: a.icon, run: () => a.run(this.context()) }));
+    return widgetActions("topbar", this.context()).filter((a) => mobilePlacement(a) === "menu" && a.align === "left" === (cluster === "left") && !builtin.has(a.id)).map((a) => ({ label: this.t(a.label), icon: a.icon, run: () => a.run(this.context()) }));
+  }
+  /** Display text in the workspace's language. */
+  t(text, values) {
+    return textOf(this.localeState, text, values);
+  }
+  /** The layout SYNC switches (the topbar dropdown and the mobile drawer list the same). */
+  syncRows() {
+    return [
+      { id: "symbol", label: this.t(TEXT22.syncSymbol), checked: this.syncOpts.symbol === true },
+      { id: "timeframe", label: this.t(TEXT22.syncInterval), checked: this.syncOpts.timeframe === true },
+      { id: "crosshair", label: this.t(TEXT22.syncCrosshair), checked: this.syncOpts.crosshair === true },
+      { id: "style", label: this.t(TEXT22.syncStyle), checked: this.syncOpts.style === true }
+    ];
   }
   openTimezoneDrawer() {
     this.timezoneDrawer ?? (this.timezoneDrawer = new TimezoneDrawer({
       host: this.root,
       timezone: () => this.timezone,
       onTimezone: (zone) => this.setTimezone(zone),
-      onOpenChange: (open) => this.trackDialog(open)
+      onOpenChange: (open) => this.trackDialog(open),
+      i18n: this.localeState
     }));
     this.timezoneDrawer.open();
   }
@@ -10538,8 +11214,8 @@ var VelaWorkspace = class {
     this.alertsMenu?.destroy();
     const items = this.alerts.length ? this.alerts.map((a, i) => ({
       id: String(i),
-      label: `${a.source} \xB7 ${new Date(a.time).toLocaleTimeString()} \xB7 ${a.title}: ${a.message}`.slice(0, 80)
-    })) : [{ id: "none", label: "No alerts yet", disabled: true }];
+      label: sliceGraphemes(this.t(TEXT22.alertRow, { source: a.source, time: eventTimeText(a.time, this.localeState), title: a.title, message: a.message }), ALERT_ROW_MAX)
+    })) : [{ id: "none", label: this.t(TEXT22.noAlerts), disabled: true }];
     this.alertsMenu = new Menu({
       host: this.root,
       items,
@@ -10574,29 +11250,29 @@ var VelaWorkspace = class {
       this.keymap.register({
         id: "chart.screenshot",
         keys: "mod+alt+s",
-        label: ov ? ov.label : "Download a screenshot of the layout",
-        category: "Chart",
+        label: ov ? ov.label : TEXT22.screenshot,
+        category: TEXT22.categoryChart,
         run: ov ? () => this.runOverride(ov) : () => this.downloadScreenshot()
       });
     }
-    this.keymap.register({ id: "chart.reset-view", keys: "alt+r", label: "Reset view (all history)", category: "Chart", run: () => this.active.chart.setVisibleRangePreset("ALL") });
-    this.keymap.register({ id: "chart.toggle-log", keys: "alt+l", label: "Toggle logarithmic scale", category: "Chart", run: () => this.active.chart.renderer.set("logScale", !this.active.chart.renderer.get("logScale")) });
+    this.keymap.register({ id: "chart.reset-view", keys: "alt+r", label: TEXT22.resetView, category: TEXT22.categoryChart, run: () => this.active.chart.setVisibleRangePreset("ALL") });
+    this.keymap.register({ id: "chart.toggle-log", keys: "alt+l", label: TEXT22.toggleLog, category: TEXT22.categoryChart, run: () => this.active.chart.renderer.set("logScale", !this.active.chart.renderer.get("logScale")) });
     this.keymap.register({
       id: "chart.toggle-percent",
       keys: "alt+p",
-      label: "Toggle percent scale",
-      category: "Chart",
+      label: TEXT22.togglePercent,
+      category: TEXT22.categoryChart,
       run: () => {
         const mode = this.active.chart.renderer.get("scaleMode");
         this.active.chart.renderer.set("scaleMode", mode === "percent" ? "price" : "percent");
       }
     });
-    this.keymap.register({ id: "drawings.trendline", keys: "alt+t", label: "Arm the trend line tool", category: "Drawings", run: () => this.active.chart.drawings.setTool("trendline") });
+    this.keymap.register({ id: "drawings.trendline", keys: "alt+t", label: TEXT22.trendline, category: TEXT22.categoryDrawings, run: () => this.active.chart.drawings.setTool("trendline") });
     this.keymap.register({
       id: "drawings.hline-cursor",
       keys: "alt+h",
-      label: "Horizontal line at the cursor price",
-      category: "Drawings",
+      label: TEXT22.hlineCursor,
+      category: TEXT22.categoryDrawings,
       run: () => {
         const c = this.active;
         if (c.lastCrossTime != null && c.lastCrossPrice != null) c.chart.drawings.add("hline", { anchors: [{ time: c.lastCrossTime, price: c.lastCrossPrice }] });
@@ -10605,32 +11281,32 @@ var VelaWorkspace = class {
     this.keymap.register({
       id: "drawings.vline-cursor",
       keys: "alt+v",
-      label: "Vertical line at the cursor time",
-      category: "Drawings",
+      label: TEXT22.vlineCursor,
+      category: TEXT22.categoryDrawings,
       run: () => {
         const c = this.active;
         if (c.lastCrossTime != null && c.lastCrossPrice != null) c.chart.drawings.add("vline", { anchors: [{ time: c.lastCrossTime, price: c.lastCrossPrice }] });
       }
     });
-    this.keymap.register({ id: "history.undo", keys: ["mod+z"], label: "Undo (active chart)", category: "Edit", run: () => this.active.history.undo() });
-    this.keymap.register({ id: "history.redo", keys: ["mod+y", "mod+shift+z"], label: "Redo (active chart)", category: "Edit", run: () => this.active.history.redo() });
-    this.keymap.register({ id: "view.zoom-in", keys: "mod+arrowup", label: "Zoom in", category: "Chart", run: () => this.glider.zoom(ZOOM_IN) });
-    this.keymap.register({ id: "view.zoom-out", keys: "mod+arrowdown", label: "Zoom out", category: "Chart", run: () => this.glider.zoom(ZOOM_OUT) });
-    this.keymap.register({ id: "view.pan-left", keys: "mod+arrowleft", label: "Pan toward history", category: "Chart", run: () => this.active.chart.panBy(-PAN_FAST) });
-    this.keymap.register({ id: "view.pan-right", keys: "mod+arrowright", label: "Pan toward now", category: "Chart", run: () => this.active.chart.panBy(PAN_FAST) });
+    this.keymap.register({ id: "history.undo", keys: ["mod+z"], label: TEXT22.undo, category: TEXT22.categoryEdit, run: () => this.active.history.undo() });
+    this.keymap.register({ id: "history.redo", keys: ["mod+y", "mod+shift+z"], label: TEXT22.redo, category: TEXT22.categoryEdit, run: () => this.active.history.redo() });
+    this.keymap.register({ id: "view.zoom-in", keys: "mod+arrowup", label: TEXT22.zoomIn, category: TEXT22.categoryChart, run: () => this.glider.zoom(ZOOM_IN) });
+    this.keymap.register({ id: "view.zoom-out", keys: "mod+arrowdown", label: TEXT22.zoomOut, category: TEXT22.categoryChart, run: () => this.glider.zoom(ZOOM_OUT) });
+    this.keymap.register({ id: "view.pan-left", keys: "mod+arrowleft", label: TEXT22.panLeft, category: TEXT22.categoryChart, run: () => this.active.chart.panBy(-PAN_FAST) });
+    this.keymap.register({ id: "view.pan-right", keys: "mod+arrowright", label: TEXT22.panRight, category: TEXT22.categoryChart, run: () => this.active.chart.panBy(PAN_FAST) });
     const indOv = this.indicatorsOverride;
     if (indOv && topbarHas(this.topbarComp, "indicators")) {
-      this.keymap.register({ id: "indicators.open", keys: "/", label: indOv.label, category: "Indicators", run: () => this.runOverride(indOv) });
+      this.keymap.register({ id: "indicators.open", keys: "/", label: indOv.label, category: TEXT22.categoryIndicators, run: () => this.runOverride(indOv) });
     } else if (this.indicatorPicker) {
-      this.keymap.register({ id: "indicators.open", keys: "/", label: "Open the indicator picker", category: "Indicators", run: () => this.indicatorPicker?.open() });
+      this.keymap.register({ id: "indicators.open", keys: "/", label: TEXT22.openIndicators, category: TEXT22.categoryIndicators, run: () => this.indicatorPicker?.open() });
     }
     this.keymap.register({
       id: "help.shortcuts",
       keys: "?",
-      label: "Show this shortcuts panel",
-      category: "Help",
+      label: TEXT22.showShortcuts,
+      category: TEXT22.categoryHelp,
       run: () => {
-        this.shortcutsHelp ?? (this.shortcutsHelp = new ShortcutsHelp(this.keymap, this.root, (open) => this.trackDialog(open)));
+        this.shortcutsHelp ?? (this.shortcutsHelp = new ShortcutsHelp(this.keymap, this.root, (open) => this.trackDialog(open), () => this.localeState));
         this.shortcutsHelp.open();
       }
     });
@@ -10639,6 +11315,7 @@ var VelaWorkspace = class {
   routeTyping(ev) {
     if (this.destroyed) return;
     if (ev.ctrlKey || ev.metaKey || ev.altKey) return;
+    if (ev.isComposing || ev.key === "Process") return;
     if (isEditableTarget(ev)) return;
     const hit = resolveTyping(ev.key, { dialogs: this.openDialogs, symbolSearch: this.symbolPicker.isOpen, timeframeEntry: this.tfQuick.isOpen });
     if (!hit) return;