@luxalgo/vela 0.8.4 → 0.9.0

package/dist/ui.cjs

@@ -186,7 +186,7 @@ var STATIC_CSS = `
 ${STATIC_DECLS}
     font-family: var(--vela-font, -apple-system, system-ui, sans-serif);
     box-sizing: border-box;
-    /* Chrome text (titles, buttons, menus, readouts) is UI, not copy \u2014 never selectable. */
+    /* Chrome text (titles, buttons, menus, readouts) is UI, not copy — never selectable. */
     user-select: none;
     -webkit-user-select: none;
 }
@@ -195,7 +195,7 @@ ${STATIC_DECLS}
 .vela-ui :is(input, textarea), .vela-ui-layer :is(input, textarea) { user-select: text; -webkit-user-select: text; }
 /* iOS Safari zooms the page when a focused field is under 16px, and often
    keeps that zoom after the field blurs or a dialog closes. The shell's
-   mobile size class is the honest gate \u2014 not a media query \u2014 so an embedded
+   mobile size class is the honest gate — not a media query — so an embedded
    chart on a wide desktop still gets the rule when it is in the phone layout.
    Scoped to the kit root so a host page's own [data-layout] is never touched. */
 .vela-ui[data-layout='mobile'] :is(input, textarea, select) { font-size: 16px; }
@@ -383,7 +383,7 @@ registerIcon(
   "send-back",
   svg24('<rect x="8.5" y="8.5" width="7" height="7" rx="1.5" fill="currentColor" stroke="none" opacity="0.35"/><path d="M4.5 10.5V6a1.5 1.5 0 0 1 1.5-1.5h4.5"/><path d="M19.5 13.5V18a1.5 1.5 0 0 1-1.5 1.5h-4.5"/><rect x="8.5" y="8.5" width="7" height="7" rx="1.5"/>')
 );
-registerIcon("r-squared", '<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" stroke="none"><text x="2.5" y="17.5" font-size="14" font-family="serif">R\xB2</text></svg>');
+registerIcon("r-squared", '<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" stroke="none"><text x="2.5" y="17.5" font-size="14" font-family="serif">R²</text></svg>');
 registerIcon("bands", svg24('<path d="M3 6h18"/><path d="M3 18h18"/><path d="M3 12h18" stroke-dasharray="3 3"/>'));
 registerIcon("dedekind", svg24('<path d="M2 20h20"/><path d="M4 20a8 8 0 0 1 16 0"/><path d="M8 20a4 4 0 0 1 8 0"/><path d="M12 4v16"/>'));
 registerIcon("sonic", svg24('<circle cx="15" cy="12" r="4"/><circle cx="12" cy="12" r="2.5"/><path d="M8 5v14"/>'));
@@ -398,14 +398,14 @@ function iconEl(id, doc = document) {
   if (svg) span.innerHTML = svg;
   return span;
 }
-function runMachine(machine5, props, render) {
+function runMachine(machine5, props, render2) {
   const m = new vanilla.VanillaMachine(machine5, props);
-  const unsub = m.subscribe(render);
+  const unsub = m.subscribe(render2);
   m.start();
-  render(m.service);
+  render2(m.service);
   return {
     service: m.service,
-    flush: () => render(m.service),
+    flush: () => render2(m.service),
     stop: () => {
       unsub();
       m.stop();
@@ -428,6 +428,896 @@ function announceSurface(el, open2, kind, trigger = null) {
   );
 }
 
+// src/core/i18n/message.ts
+function msg(id, defaultMessage) {
+  return Object.freeze({ id, defaultMessage });
+}
+
+// src/core/format/numbers.ts
+var BIDI_MARKS = /[‎‏؜]/g;
+function stripBidiMarks(text) {
+  return text.replace(BIDI_MARKS, "");
+}
+var numberFormats = /* @__PURE__ */ new Map();
+function numberFormat(settings, options) {
+  const key = `${settings.locale}|${settings.numberingSystem}|${JSON.stringify(options)}`;
+  let nf = numberFormats.get(key);
+  if (!nf) {
+    try {
+      nf = new Intl.NumberFormat(settings.locale, { ...options, numberingSystem: settings.numberingSystem });
+    } catch {
+      nf = new Intl.NumberFormat("en", options);
+    }
+    numberFormats.set(key, nf);
+  }
+  return nf;
+}
+var symbolCache = /* @__PURE__ */ new Map();
+function numberSymbols(settings) {
+  const key = `${settings.locale}|${settings.numberingSystem}`;
+  let sym = symbolCache.get(key);
+  if (sym) return sym;
+  const parts = numberFormat(settings, { useGrouping: false, minimumFractionDigits: 1, maximumFractionDigits: 1 }).formatToParts(-1.5);
+  const decimal = stripBidiMarks(parts.find((p) => p.type === "decimal")?.value ?? ".") || ".";
+  const minus = stripBidiMarks(parts.find((p) => p.type === "minusSign")?.value ?? "-") || "-";
+  const plain = numberFormat(settings, { useGrouping: false, maximumFractionDigits: 0 });
+  const digits = Array.from({ length: 10 }, (_, d) => stripBidiMarks(plain.format(d)));
+  const ascii = decimal === "." && minus === "-" && digits.every((d, i) => d === String(i));
+  sym = { ascii, decimal, minus, digits };
+  symbolCache.set(key, sym);
+  return sym;
+}
+function localizeAscii(text, settings) {
+  const sym = numberSymbols(settings);
+  if (sym.ascii) return text;
+  let out = "";
+  for (const ch of text) {
+    const code = ch.charCodeAt(0);
+    if (code >= 48 && code <= 57) out += sym.digits[code - 48];
+    else if (ch === ".") out += sym.decimal;
+    else if (ch === "-") out += sym.minus;
+    else out += ch;
+  }
+  return out;
+}
+function localizeDigits(text, settings) {
+  const sym = numberSymbols(settings);
+  if (sym.digits.every((d, i) => d === String(i))) return text;
+  return text.replace(/[0-9]/g, (d) => sym.digits[Number(d)]);
+}
+var clampDecimals = (d) => Number.isFinite(d) ? Math.max(0, Math.min(20, Math.trunc(d))) : 2;
+function formatFixed(value, decimals, settings) {
+  return localizeAscii(value.toFixed(clampDecimals(decimals)), settings);
+}
+function formatGrouped(value, decimals, settings) {
+  const d = clampDecimals(decimals);
+  return stripBidiMarks(numberFormat(settings, { minimumFractionDigits: d, maximumFractionDigits: d }).format(value));
+}
+function formatMessageNumber(value, settings, style) {
+  if (style === "integer") return stripBidiMarks(numberFormat(settings, { maximumFractionDigits: 0 }).format(value));
+  if (style === "percent") return stripBidiMarks(numberFormat(settings, { style: "percent" }).format(value));
+  return stripBidiMarks(numberFormat(settings, {}).format(value));
+}
+function formatPercent(value, options, settings) {
+  const d = clampDecimals(options?.decimals ?? 2);
+  const signed = options?.signed ?? true;
+  if (settings.english) {
+    const text = signed ? `${value >= 0 ? "+" : "-"}${Math.abs(value).toFixed(d)}%` : `${value.toFixed(d)}%`;
+    return localizeAscii(text, settings);
+  }
+  const nf = numberFormat(settings, { style: "percent", minimumFractionDigits: d, maximumFractionDigits: d, signDisplay: signed ? "always" : "auto" });
+  return stripBidiMarks(nf.format(value / 100));
+}
+function formatPrice(value, options, settings) {
+  const mode = options.mode ?? "price";
+  if (mode === "percent") return formatPercent(value, { decimals: options.decimals, signed: true }, settings);
+  if (mode === "indexed" || !options.grouping) return formatFixed(value, options.decimals, settings);
+  return formatGrouped(value, options.decimals, settings);
+}
+var COMPACT_STEPS = [
+  [1e9, "B"],
+  [1e6, "M"],
+  [1e3, "K"]
+];
+function formatCompact(value, options, settings) {
+  const d = clampDecimals(options?.decimals ?? 2);
+  const trim = options?.trimZeros ?? true;
+  if (settings.english) {
+    const a = Math.abs(value);
+    let div = 1;
+    let suffix = "";
+    for (const [step, s] of COMPACT_STEPS) {
+      if (a >= step) {
+        div = step;
+        suffix = s;
+        break;
+      }
+    }
+    const scaled = value / div;
+    const text = trim ? Number(scaled.toFixed(d)).toString() : scaled.toFixed(d);
+    return localizeAscii(text, settings) + suffix;
+  }
+  const nf = numberFormat(settings, { notation: "compact", compactDisplay: "short", maximumFractionDigits: d, minimumFractionDigits: trim ? 0 : d });
+  return stripBidiMarks(nf.format(value));
+}
+
+// src/core/format/dates.ts
+var EN_MONTHS_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var EN_WEEKDAYS_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var pad2 = (n) => n < 10 ? `0${n}` : String(n);
+var DAY_MS = 864e5;
+var zoneParsers = /* @__PURE__ */ new Map();
+function zoneOffsetMs(ms, timeZone) {
+  if (!timeZone || timeZone === "UTC") return 0;
+  let dtf = zoneParsers.get(timeZone);
+  if (dtf === void 0) {
+    try {
+      dtf = new Intl.DateTimeFormat("en-US", {
+        timeZone,
+        hourCycle: "h23",
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit"
+      });
+    } catch {
+      dtf = null;
+    }
+    zoneParsers.set(timeZone, dtf);
+  }
+  if (!dtf) return 0;
+  try {
+    const parts = dtf.formatToParts(new Date(ms));
+    const get = (t) => Number(parts.find((p) => p.type === t)?.value);
+    const asUTC = Date.UTC(get("year"), get("month") - 1, get("day"), get("hour") % 24, get("minute"), get("second"));
+    return asUTC - ms;
+  } catch {
+    return 0;
+  }
+}
+var dateFormats = /* @__PURE__ */ new Map();
+function dateFormat(settings, options) {
+  const key = `${settings.locale}|${settings.numberingSystem}|${JSON.stringify(options)}`;
+  let dtf = dateFormats.get(key);
+  if (!dtf) {
+    const full = { ...options, timeZone: "UTC", calendar: "gregory", numberingSystem: settings.numberingSystem };
+    try {
+      dtf = new Intl.DateTimeFormat(settings.locale, full);
+    } catch {
+      dtf = new Intl.DateTimeFormat("en", { ...options, timeZone: "UTC", calendar: "gregory" });
+    }
+    dateFormats.set(key, dtf);
+  }
+  return dtf;
+}
+function clockOptions(settings) {
+  if (settings.hourCycle === "h23") return { hour: "2-digit", minute: "2-digit", hourCycle: "h23" };
+  if (settings.hourCycle === "h12") return { hour: "numeric", minute: "2-digit", hourCycle: "h12" };
+  return { hour: "numeric", minute: "2-digit" };
+}
+function englishClock(wall, settings) {
+  if (settings.hourCycle === "h23") return localizeAscii(`${pad2(wall.getUTCHours())}:${pad2(wall.getUTCMinutes())}`, settings);
+  return stripBidiMarks(dateFormat(settings, clockOptions(settings)).format(wall));
+}
+var TICK_OPTIONS = {
+  year: { year: "numeric" },
+  month: { month: "short" },
+  day: { month: "short", day: "numeric" }
+};
+var isClockUnit = (unit) => unit === "hour" || unit === "minute" || unit === "second";
+function formatTimeTick(ms, options, settings) {
+  const wall = new Date(ms + (options.offsetMs ?? 0));
+  const unit = options.unit;
+  if (settings.english) {
+    if (isClockUnit(unit)) return englishClock(wall, settings);
+    const month = EN_MONTHS_SHORT[wall.getUTCMonth()];
+    if (unit === "year") return localizeAscii(String(wall.getUTCFullYear()), settings);
+    if (unit === "month") return month;
+    return localizeAscii(`${month} ${wall.getUTCDate()}`, settings);
+  }
+  const opts = isClockUnit(unit) ? clockOptions(settings) : TICK_OPTIONS[unit];
+  return stripBidiMarks(dateFormat(settings, opts).format(wall));
+}
+function formatTimeStamp(ms, options, settings) {
+  const wall = new Date(ms + zoneOffsetMs(ms, options?.timeZone ?? "UTC"));
+  const withTime = options?.withTime ?? true;
+  if (settings.english) {
+    const date = localizeAscii(
+      `${EN_WEEKDAYS_SHORT[wall.getUTCDay()]} ${wall.getUTCDate()} ${EN_MONTHS_SHORT[wall.getUTCMonth()]} '${pad2(wall.getUTCFullYear() % 100)}`,
+      settings
+    );
+    return withTime ? `${date} ${englishClock(wall, settings)}` : date;
+  }
+  const opts = { weekday: "short", day: "numeric", month: "short", year: "2-digit", ...withTime ? clockOptions(settings) : {} };
+  return stripBidiMarks(dateFormat(settings, opts).format(wall));
+}
+function countdownText(ms) {
+  const total = Math.max(0, Math.ceil(ms / 1e3));
+  const s = total % 60;
+  const m = Math.floor(total / 60) % 60;
+  const h = Math.floor(total / 3600);
+  const pad = (v) => String(v).padStart(2, "0");
+  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
+}
+function spanParts(ms) {
+  const m = Math.abs(ms);
+  const HR = 36e5;
+  const MIN = 6e4;
+  if (m >= DAY_MS) {
+    const d = Math.floor(m / DAY_MS);
+    const h = Math.round(m % DAY_MS / HR);
+    return h ? [[d, "day"], [h, "hour"]] : [[d, "day"]];
+  }
+  if (m >= HR) {
+    const h = Math.floor(m / HR);
+    const mn = Math.round(m % HR / MIN);
+    return mn ? [[h, "hour"], [mn, "minute"]] : [[h, "hour"]];
+  }
+  if (m >= MIN) return [[Math.round(m / MIN), "minute"]];
+  return [[Math.round(m / 1e3), "second"]];
+}
+var EN_UNIT = { day: "d", hour: "h", minute: "m", second: "s" };
+function formatDuration(ms, options, settings) {
+  if ((options?.style ?? "countdown") === "countdown") return localizeDigits(countdownText(ms), settings);
+  const parts = spanParts(ms);
+  if (settings.english) return localizeDigits(parts.map(([n, u]) => `${n}${EN_UNIT[u]}`).join(" "), settings);
+  return parts.map(([n, unit]) => stripBidiMarks(numberFormat(settings, { style: "unit", unit, unitDisplay: "narrow" }).format(n))).join(" ");
+}
+var clockFormats = /* @__PURE__ */ new Map();
+function formatClock(ms, options, settings) {
+  const timeZone = options?.timeZone ?? "UTC";
+  const seconds = options?.seconds ?? true;
+  const english2 = settings.english && settings.hourCycle === "h23";
+  const key = `${english2 ? "en-GB" : settings.locale}|${settings.numberingSystem}|${settings.hourCycle}|${timeZone}|${seconds}`;
+  let dtf = clockFormats.get(key);
+  if (dtf === void 0) {
+    const base = { hour: "2-digit", minute: "2-digit", ...seconds ? { second: "2-digit" } : {}, timeZone };
+    try {
+      dtf = english2 ? new Intl.DateTimeFormat("en-GB", { ...base, hour12: false }) : new Intl.DateTimeFormat(settings.locale, {
+        ...base,
+        calendar: "gregory",
+        numberingSystem: settings.numberingSystem,
+        ...settings.hourCycle === "locale" ? {} : { hourCycle: settings.hourCycle }
+      });
+    } catch {
+      dtf = null;
+    }
+    clockFormats.set(key, dtf);
+  }
+  if (!dtf) return "";
+  try {
+    return stripBidiMarks(dtf.format(new Date(ms)));
+  } catch {
+    return "";
+  }
+}
+
+// src/core/format/formatters.ts
+function builtinFormatters(settings) {
+  return {
+    price: (value, options) => formatPrice(value, options, settings),
+    percent: (value, options) => formatPercent(value, options, settings),
+    compact: (value, options) => formatCompact(value, options, settings),
+    timeTick: (ms, options) => formatTimeTick(ms, options, settings),
+    timeStamp: (ms, options) => formatTimeStamp(ms, options, settings),
+    duration: (ms, options) => formatDuration(ms, options, settings),
+    clock: (ms, options) => formatClock(ms, options, settings)
+  };
+}
+var warned = false;
+function viaHost(host, value, ctx, fallback) {
+  try {
+    const out = host(value, ctx);
+    if (typeof out === "string") return out;
+  } catch (err) {
+    if (!warned) {
+      warned = true;
+      console.warn("[vela] a host formatter threw; the built-in formatting is used instead.", err);
+    }
+  }
+  return fallback();
+}
+function resolveFormatters(settings, overrides) {
+  const base = builtinFormatters(settings);
+  if (!overrides) return base;
+  const ctx = (surface, defaultSurface, timeZone, fallback) => ({
+    locale: settings.locale,
+    timeZone: timeZone ?? "UTC",
+    surface: surface ?? defaultSurface,
+    fallback
+  });
+  const o = overrides;
+  return {
+    price(value, options) {
+      const fallback = () => base.price(value, options);
+      if (typeof o.price !== "function") return fallback();
+      return viaHost(o.price, value, { ...ctx(options.surface, "priceAxis", void 0, fallback), decimals: options.decimals, mintick: options.mintick, mode: options.mode ?? "price", paneId: options.paneId, grouping: options.grouping ?? false }, fallback);
+    },
+    percent(value, options) {
+      const fallback = () => base.percent(value, options);
+      if (typeof o.percent !== "function") return fallback();
+      return viaHost(o.percent, value, { ...ctx(options?.surface, "statusLine", void 0, fallback), decimals: options?.decimals ?? 2, signed: options?.signed ?? true }, fallback);
+    },
+    compact(value, options) {
+      const fallback = () => base.compact(value, options);
+      if (typeof o.compact !== "function") return fallback();
+      return viaHost(o.compact, value, { ...ctx(options?.surface, "priceAxis", void 0, fallback), decimals: options?.decimals ?? 2, trimZeros: options?.trimZeros ?? true }, fallback);
+    },
+    timeTick(ms, options) {
+      const fallback = () => base.timeTick(ms, options);
+      if (typeof o.timeTick !== "function") return fallback();
+      return viaHost(o.timeTick, ms, { ...ctx(options.surface, "timeAxis", options.timeZone, fallback), unit: options.unit, major: options.major, offsetMs: options.offsetMs ?? 0 }, fallback);
+    },
+    timeStamp(ms, options) {
+      const fallback = () => base.timeStamp(ms, options);
+      if (typeof o.timeStamp !== "function") return fallback();
+      return viaHost(o.timeStamp, ms, { ...ctx(options?.surface, "crosshair", options?.timeZone, fallback), withTime: options?.withTime ?? true }, fallback);
+    },
+    duration(ms, options) {
+      const fallback = () => base.duration(ms, options);
+      if (typeof o.duration !== "function") return fallback();
+      return viaHost(o.duration, ms, { ...ctx(options?.surface, "lastPrice", void 0, fallback), style: options?.style ?? "countdown" }, fallback);
+    },
+    clock(ms, options) {
+      const fallback = () => base.clock(ms, options);
+      if (typeof o.clock !== "function") return fallback();
+      return viaHost(o.clock, ms, { ...ctx(options?.surface, "clock", options?.timeZone, fallback), seconds: options?.seconds ?? true }, fallback);
+    }
+  };
+}
+
+// src/core/i18n/icu.ts
+var Parser = class {
+  constructor(src) {
+    this.src = src;
+    this.i = 0;
+  }
+  parse() {
+    const nodes = this.message(false, 0);
+    if (this.i < this.src.length) throw this.error("unmatched }");
+    return nodes;
+  }
+  error(what) {
+    return new SyntaxError(`[vela] message syntax: ${what} at ${this.i} in "${this.src}"`);
+  }
+  /** Text and arguments up to an unmatched `}` (left unread) or the end. */
+  message(inPlural, depth) {
+    if (depth > 8) throw this.error("nesting too deep");
+    const src = this.src;
+    const out = [];
+    let text = "";
+    const flush = () => {
+      if (text) out.push(text);
+      text = "";
+    };
+    while (this.i < src.length) {
+      const ch = src[this.i];
+      if (ch === "'") {
+        const next = src[this.i + 1];
+        if (next === "'") {
+          text += "'";
+          this.i += 2;
+        } else if (next === "{" || next === "}" || inPlural && next === "#") {
+          this.i += 1;
+          while (this.i < src.length) {
+            const c = src[this.i];
+            if (c === "'") {
+              if (src[this.i + 1] === "'") {
+                text += "'";
+                this.i += 2;
+                continue;
+              }
+              this.i += 1;
+              break;
+            }
+            text += c;
+            this.i += 1;
+          }
+        } else {
+          text += "'";
+          this.i += 1;
+        }
+      } else if (ch === "{") {
+        flush();
+        this.i += 1;
+        out.push(this.argument(depth));
+      } else if (ch === "}") {
+        break;
+      } else if (ch === "#" && inPlural) {
+        flush();
+        out.push({ kind: "pound" });
+        this.i += 1;
+      } else {
+        text += ch;
+        this.i += 1;
+      }
+    }
+    flush();
+    return out;
+  }
+  skipSpace() {
+    while (this.i < this.src.length && /\s/.test(this.src[this.i])) this.i += 1;
+  }
+  word() {
+    this.skipSpace();
+    const start = this.i;
+    while (this.i < this.src.length && !/[\s,{}]/.test(this.src[this.i])) this.i += 1;
+    return this.src.slice(start, this.i);
+  }
+  expect(ch) {
+    this.skipSpace();
+    if (this.src[this.i] !== ch) throw this.error(`expected "${ch}"`);
+    this.i += 1;
+  }
+  /** After a `{`: the argument through its closing `}`. */
+  argument(depth) {
+    const name = this.word();
+    if (!name) throw this.error("empty argument name");
+    this.skipSpace();
+    if (this.src[this.i] === "}") {
+      this.i += 1;
+      return { kind: "arg", name };
+    }
+    this.expect(",");
+    const type = this.word();
+    this.skipSpace();
+    if (type === "number") {
+      let style;
+      if (this.src[this.i] === ",") {
+        this.i += 1;
+        style = this.word() || void 0;
+      }
+      this.expect("}");
+      return { kind: "arg", name, format: "number", style };
+    }
+    if (type === "plural" || type === "selectordinal" || type === "select") {
+      this.expect(",");
+      let offset = 0;
+      this.skipSpace();
+      if (type !== "select" && this.src.startsWith("offset:", this.i)) {
+        this.i += "offset:".length;
+        offset = Number(this.word());
+        if (!Number.isFinite(offset)) throw this.error("bad offset");
+      }
+      const options = {};
+      for (; ; ) {
+        this.skipSpace();
+        if (this.src[this.i] === "}") {
+          this.i += 1;
+          break;
+        }
+        const key = this.word();
+        if (!key) throw this.error("expected a selector");
+        this.expect("{");
+        options[key] = this.message(type !== "select", depth + 1);
+        this.expect("}");
+      }
+      if (!options.other) throw this.error(`"${name}" has no "other" option`);
+      return type === "select" ? { kind: "select", name, options } : { kind: "plural", name, ordinal: type === "selectordinal", offset, options };
+    }
+    throw this.error(`unknown argument type "${type}"`);
+  }
+};
+var parsed = /* @__PURE__ */ new Map();
+var PARSE_CACHE_CAP = 2e3;
+function parseMessage(source) {
+  let nodes = parsed.get(source);
+  if (!nodes) {
+    nodes = new Parser(source).parse();
+    if (parsed.size >= PARSE_CACHE_CAP) parsed.clear();
+    parsed.set(source, nodes);
+  }
+  return nodes;
+}
+var pluralRules = /* @__PURE__ */ new Map();
+function rulesFor(locale, ordinal) {
+  const key = `${locale}|${ordinal ? "o" : "c"}`;
+  let pr = pluralRules.get(key);
+  if (!pr) {
+    try {
+      pr = new Intl.PluralRules(locale, { type: ordinal ? "ordinal" : "cardinal" });
+    } catch {
+      pr = new Intl.PluralRules("en", { type: ordinal ? "ordinal" : "cardinal" });
+    }
+    pluralRules.set(key, pr);
+  }
+  return pr;
+}
+function render(nodes, values, rt, pound) {
+  let out = "";
+  for (const node of nodes) {
+    if (typeof node === "string") {
+      out += node;
+      continue;
+    }
+    if (node.kind === "pound") {
+      out += pound == null ? "#" : rt.formatNumber(pound);
+      continue;
+    }
+    const raw = values?.[node.name];
+    if (node.kind === "arg") {
+      if (raw === void 0) out += `{${node.name}}`;
+      else if (typeof raw === "number") out += rt.formatNumber(raw, node.format === "number" ? node.style : void 0);
+      else if (node.format === "number" && raw.trim() !== "" && Number.isFinite(Number(raw))) out += rt.formatNumber(Number(raw), node.style);
+      else out += raw;
+      continue;
+    }
+    if (node.kind === "select") {
+      const branch2 = node.options[String(raw)] ?? node.options.other;
+      out += render(branch2, values, rt, pound);
+      continue;
+    }
+    const n = typeof raw === "number" ? raw : Number(raw);
+    let branch;
+    if (Number.isFinite(n)) {
+      branch = node.options[`=${n}`] ?? node.options[rulesFor(rt.locale, node.ordinal).select(n - node.offset)];
+    }
+    out += render(branch ?? node.options.other, values, rt, Number.isFinite(n) ? n - node.offset : null);
+  }
+  return out;
+}
+function formatMessage(source, values, rt) {
+  if (source.indexOf("{") < 0 && source.indexOf("'") < 0) return source;
+  return render(parseMessage(source), values, rt, null);
+}
+
+// src/core/format/calendar.ts
+var EN_MONTHS_LONG = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+var EN_MONTHS_SHORT_PICKER = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var EN_WEEKDAYS_MIN = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function monthNames(settings, width) {
+  if (settings.english) return [...width === "long" ? EN_MONTHS_LONG : EN_MONTHS_SHORT_PICKER];
+  const dtf = dateFormat(settings, { month: width });
+  return Array.from({ length: 12 }, (_, m) => stripBidiMarks(dtf.format(Date.UTC(2e3, m, 15))));
+}
+function weekdayNames(settings) {
+  if (settings.english) return [...EN_WEEKDAYS_MIN];
+  const dtf = dateFormat(settings, { weekday: "short" });
+  return Array.from({ length: 7 }, (_, d) => stripBidiMarks(dtf.format(Date.UTC(2e3, 0, 2 + d))));
+}
+function yearLabel(settings, year) {
+  if (settings.english) return localizeAscii(String(year), settings);
+  return stripBidiMarks(dateFormat(settings, { year: "numeric" }).format(Date.UTC(year, 6, 1)));
+}
+function plainInteger(settings, n) {
+  return localizeAscii(String(Math.trunc(n)), settings);
+}
+var yearFirstCache = /* @__PURE__ */ new Map();
+function yearBeforeMonth(settings) {
+  if (settings.english) return false;
+  const key = `${settings.locale}|${settings.numberingSystem}`;
+  let first = yearFirstCache.get(key);
+  if (first === void 0) {
+    const types = dateFormat(settings, { year: "numeric", month: "long" }).formatToParts(Date.UTC(2026, 8, 15)).map((p) => p.type);
+    first = types.indexOf("year") < types.indexOf("month");
+    yearFirstCache.set(key, first);
+  }
+  return first;
+}
+var SUNDAY_REGIONS = /* @__PURE__ */ new Set([
+  "AG",
+  "AS",
+  "BD",
+  "BR",
+  "BS",
+  "BT",
+  "BW",
+  "BZ",
+  "CA",
+  "CN",
+  "CO",
+  "DM",
+  "DO",
+  "ET",
+  "GT",
+  "GU",
+  "HK",
+  "HN",
+  "ID",
+  "IL",
+  "IN",
+  "JM",
+  "JP",
+  "KE",
+  "KH",
+  "KR",
+  "LA",
+  "MH",
+  "MM",
+  "MO",
+  "MT",
+  "MX",
+  "MZ",
+  "NI",
+  "NP",
+  "PA",
+  "PE",
+  "PH",
+  "PK",
+  "PR",
+  "PT",
+  "PY",
+  "SA",
+  "SG",
+  "SV",
+  "TH",
+  "TT",
+  "TW",
+  "UM",
+  "US",
+  "VE",
+  "VI",
+  "WS",
+  "YE",
+  "ZA",
+  "ZW"
+]);
+var SATURDAY_REGIONS = /* @__PURE__ */ new Set(["AE", "AF", "BH", "DJ", "DZ", "EG", "IQ", "IR", "JO", "KW", "LY", "OM", "QA", "SD", "SY"]);
+function localeWeekStart(locale) {
+  let loc;
+  try {
+    loc = new Intl.Locale(locale);
+  } catch {
+    return 1;
+  }
+  try {
+    const wl = loc;
+    const info = typeof wl.getWeekInfo === "function" ? wl.getWeekInfo() : wl.weekInfo;
+    const firstDay = info?.firstDay;
+    if (typeof firstDay === "number") return firstDay === 7 ? 0 : firstDay === 6 ? 6 : 1;
+  } catch {
+  }
+  let region = loc.region;
+  if (!region) {
+    try {
+      region = loc.maximize().region;
+    } catch {
+      region = void 0;
+    }
+  }
+  if (region && SUNDAY_REGIONS.has(region)) return 0;
+  if (region && SATURDAY_REGIONS.has(region)) return 6;
+  return 1;
+}
+
+// src/core/i18n/locale.ts
+function canonicalLocale(tag) {
+  const raw = typeof tag === "string" ? tag.trim() : "";
+  if (!raw) return "en";
+  try {
+    return Intl.getCanonicalLocales(raw)[0] ?? raw;
+  } catch {
+    return raw;
+  }
+}
+function parseLocale(tag) {
+  try {
+    return new Intl.Locale(tag);
+  } catch {
+    return null;
+  }
+}
+function languageOf(tag) {
+  return (parseLocale(tag)?.language ?? tag.split(/[-_]/)[0] ?? tag).toLowerCase();
+}
+function fallbackChain(tag) {
+  const out = [];
+  const add = (t) => {
+    if (t && !out.includes(t)) out.push(t);
+  };
+  add(tag);
+  const loc = parseLocale(tag);
+  if (loc) {
+    const base = loc.baseName;
+    add(base);
+    const parts = base.split("-");
+    let impliedScript;
+    if (!loc.script) {
+      try {
+        impliedScript = loc.maximize().script;
+      } catch {
+        impliedScript = void 0;
+      }
+    }
+    for (let i = parts.length - 1; i >= 1; i -= 1) {
+      if (i === 1 && impliedScript && loc.region) add(`${loc.language}-${impliedScript}`);
+      add(parts.slice(0, i).join("-"));
+    }
+    if (impliedScript && !loc.region) add(`${loc.language}-${impliedScript}`);
+    try {
+      const usual = new Intl.Locale(loc.language).maximize();
+      if (usual.region && usual.script === (loc.script ?? impliedScript)) add(`${loc.language}-${usual.region}`);
+    } catch {
+    }
+  }
+  add("en");
+  return out;
+}
+var RTL_SCRIPTS = /* @__PURE__ */ new Set(["Arab", "Hebr", "Thaa", "Syrc", "Nkoo", "Adlm", "Rohg", "Mand", "Samr", "Yezi"]);
+var RTL_LANGUAGES = /* @__PURE__ */ new Set(["ar", "he", "iw", "fa", "ur", "ps", "sd", "ug", "yi", "dv", "ckb", "ks"]);
+function localeDirection(tag) {
+  const loc = parseLocale(tag);
+  if (loc) {
+    try {
+      const tl = loc;
+      const info = typeof tl.getTextInfo === "function" ? tl.getTextInfo() : tl.textInfo;
+      if (info?.direction === "rtl" || info?.direction === "ltr") return info.direction;
+    } catch {
+    }
+    try {
+      const script = loc.script ?? loc.maximize().script;
+      if (script) return RTL_SCRIPTS.has(script) ? "rtl" : "ltr";
+    } catch {
+    }
+  }
+  return RTL_LANGUAGES.has(languageOf(tag)) ? "rtl" : "ltr";
+}
+var numberingCache = /* @__PURE__ */ new Map();
+function resolveNumberingSystem(tag, requested) {
+  const key = `${tag}|${requested ?? ""}`;
+  const cached = numberingCache.get(key);
+  if (cached) return cached;
+  let nu = "latn";
+  try {
+    if (requested === "locale") nu = new Intl.NumberFormat(tag).resolvedOptions().numberingSystem;
+    else if (requested) nu = new Intl.NumberFormat(tag, { numberingSystem: requested }).resolvedOptions().numberingSystem;
+    else {
+      const ext = parseLocale(tag)?.numberingSystem;
+      if (ext) nu = new Intl.NumberFormat(tag).resolvedOptions().numberingSystem;
+    }
+  } catch {
+    nu = "latn";
+  }
+  numberingCache.set(key, nu);
+  return nu;
+}
+
+// src/core/i18n/registry.ts
+var entries = [];
+var version = 0;
+var merged = /* @__PURE__ */ new Map();
+function messagesFor(chain) {
+  const key = chain.join("|");
+  const hit = merged.get(key);
+  if (hit && hit.version === version) return hit.map;
+  const map = /* @__PURE__ */ new Map();
+  for (let c = chain.length - 1; c >= 0; c -= 1) {
+    const tag = chain[c];
+    for (const e of entries) {
+      if (e.tag !== tag) continue;
+      for (const [id, text] of Object.entries(e.messages)) {
+        if (typeof text === "string") map.set(id, text);
+      }
+    }
+  }
+  merged.set(key, { version, map });
+  return map;
+}
+
+// src/core/i18n/translator.ts
+function isMessageDescriptor(m) {
+  return typeof m === "object" && m !== null && typeof m.id === "string" && typeof m.defaultMessage === "string";
+}
+var warnedSyntax = false;
+function resolveArgs(args, resolve) {
+  if (!args) return void 0;
+  let out = null;
+  for (const key of Object.keys(args)) {
+    const v = args[key];
+    if (typeof v === "object" && v !== null) {
+      out ?? (out = { ...args });
+      out[key] = resolve(v);
+    }
+  }
+  return out ?? args;
+}
+var LocaleState = class {
+  constructor(options = {}) {
+    this.runtime = {
+      locale: "en",
+      formatNumber: (value, style) => formatMessageNumber(value, this.settings, style)
+    };
+    this.opts = { ...options };
+    this.resolve();
+  }
+  /** The options as last set (unresolved). */
+  get options() {
+    return this.opts;
+  }
+  /** Whether the host chose a locale; Vela stamps `lang` only then. */
+  get localeExplicit() {
+    return this.opts.locale !== void 0;
+  }
+  /** Whether the host chose a direction; Vela stamps `dir` only then. */
+  get directionExplicit() {
+    return this.opts.direction !== void 0;
+  }
+  /** Apply a change: fields present in `next` replace (an explicit `undefined` restores
+   *  the default), absent fields keep their current value. */
+  update(next) {
+    const patch = typeof next === "string" ? { locale: next } : next;
+    this.opts = { ...this.opts, ...patch };
+    for (const key of Object.keys(this.opts)) {
+      if (this.opts[key] === void 0) delete this.opts[key];
+    }
+    this.resolve();
+  }
+  resolve() {
+    const o = this.opts;
+    const locale = canonicalLocale(o.locale);
+    const numberingSystem = resolveNumberingSystem(locale, o.numberingSystem);
+    const hourCycle = o.hourCycle === "h12" || o.hourCycle === "locale" ? o.hourCycle : "h23";
+    this.settings = { locale, numberingSystem, hourCycle, english: languageOf(locale) === "en" };
+    this.chain = fallbackChain(locale);
+    this.resolvedDirection = o.direction === "rtl" || o.direction === "ltr" ? o.direction : o.direction === "auto" ? localeDirection(locale) : "ltr";
+    this.resolvedWeekStart = o.weekStart === 0 || o.weekStart === 1 || o.weekStart === 6 ? o.weekStart : localeWeekStart(locale);
+    this.runtime.locale = locale;
+    this.formatters = resolveFormatters(this.settings, o.formatters);
+  }
+  get locale() {
+    return this.settings.locale;
+  }
+  get direction() {
+    return this.resolvedDirection;
+  }
+  get numberingSystem() {
+    return this.settings.numberingSystem;
+  }
+  get hourCycle() {
+    return this.settings.hourCycle;
+  }
+  get weekStart() {
+    return this.resolvedWeekStart;
+  }
+  get format() {
+    return this.formatters;
+  }
+  /** The resolved settings the built-in formatters and calendar helpers read. */
+  get formatSettings() {
+    return this.settings;
+  }
+  t(message, args) {
+    if (typeof message === "string") return message;
+    if (!isMessageDescriptor(message)) return message == null ? "" : String(message);
+    const { id, defaultMessage } = message;
+    const bound = message.values;
+    const values = resolveArgs(bound ? args ? { ...bound, ...args } : bound : args, (m) => this.t(m));
+    const override = this.opts.messages?.[id];
+    const source = typeof override === "string" ? override : messagesFor(this.chain).get(id) ?? defaultMessage;
+    try {
+      return formatMessage(source, values, this.runtime);
+    } catch (err) {
+      if (!warnedSyntax) {
+        warnedSyntax = true;
+        console.warn(`[vela] message "${id}" could not be formatted; the English text is used instead.`, err);
+      }
+      if (source === defaultMessage) return defaultMessage;
+      try {
+        return formatMessage(defaultMessage, values, this.runtime);
+      } catch {
+        return defaultMessage;
+      }
+    }
+  }
+};
+var english = null;
+function englishTranslator() {
+  english ?? (english = new LocaleState());
+  return english;
+}
+function formatSettingsOf(i18n) {
+  if (i18n instanceof LocaleState) return i18n.formatSettings;
+  if (!i18n) return englishTranslator().formatSettings;
+  return { locale: i18n.locale, numberingSystem: i18n.numberingSystem, hourCycle: i18n.hourCycle, english: languageOf(i18n.locale) === "en" };
+}
+
+// src/core/i18n/text.ts
+function textOf(i18n, message, values) {
+  return (i18n ?? englishTranslator()).t(message, values);
+}
+
 // src/ui/keymap.ts
 var KEY_ALIASES = {
   esc: "escape",
@@ -441,7 +1331,15 @@ var KEY_ALIASES = {
   up: "arrowup",
   down: "arrowdown"
 };
-var MAC_GLYPHS = { meta: "\u2318", ctrl: "\u2303", alt: "\u2325", shift: "\u21E7" };
+var MAC_GLYPHS = { meta: "⌘", ctrl: "⌃", alt: "⌥", shift: "⇧" };
+var KEY_TEXT = {
+  ctrl: msg("ui.keys.ctrl", "Ctrl"),
+  alt: msg("ui.keys.alt", "Alt"),
+  shift: msg("ui.keys.shift", "Shift"),
+  meta: msg("ui.keys.meta", "Win"),
+  space: msg("ui.keys.space", "Space"),
+  general: msg("ui.keys.general", "General")
+};
 function parseChord(spec, mac) {
   const parts = spec.toLowerCase().split("+").map((p) => p.trim()).filter((p, i, a) => p !== "" || a[i - 1] === "");
   const chord = { ctrl: false, meta: false, alt: false, shift: false, key: "" };
@@ -456,10 +1354,16 @@ function parseChord(spec, mac) {
   }
   return chord;
 }
+function chordKeyOf(ev) {
+  const key = String(ev.key ?? "").toLowerCase();
+  if (key.length !== 1 || /^[a-z0-9]$/.test(key) || !/\p{L}/u.test(key)) return key;
+  const m = /^Key([A-Z])$|^Digit([0-9])$/.exec(ev.code ?? "");
+  return m ? (m[1] ?? m[2]).toLowerCase() : key;
+}
 function eventMatches(ev, c) {
   return ev.ctrlKey === c.ctrl && ev.metaKey === c.meta && ev.altKey === c.alt && // Shift is part of producing many printable keys ('?', '+') — only enforce it
   // when the chord names a non-printable/letter key where shift is a real modifier.
-  (c.key.length > 1 || /^[a-z0-9 ]$/.test(c.key) ? ev.shiftKey === c.shift : true) && ev.key.toLowerCase() === c.key;
+  (c.key.length > 1 || /^[a-z0-9 ]$/.test(c.key) ? ev.shiftKey === c.shift : true) && chordKeyOf(ev) === c.key;
 }
 function isEditableTarget(ev) {
   const t = ev.target;
@@ -469,13 +1373,14 @@ function isEditableTarget(ev) {
   if (t.isContentEditable === true) return true;
   return (typeof t.getAttribute === "function" ? t.getAttribute("role") : null) === "textbox";
 }
-function displayChord(spec, mac) {
+function displayChord(spec, mac, i18n) {
   const c = parseChord(spec, mac);
-  const keyLabel = c.key === " " ? "Space" : c.key.length === 1 ? c.key.toUpperCase() : c.key.charAt(0).toUpperCase() + c.key.slice(1);
+  const name = (m) => textOf(i18n, m);
+  const keyLabel = c.key === " " ? name(KEY_TEXT.space) : c.key.length === 1 ? c.key.toUpperCase() : c.key.charAt(0).toUpperCase() + c.key.slice(1);
   if (mac) {
     return (c.ctrl ? MAC_GLYPHS.ctrl : "") + (c.alt ? MAC_GLYPHS.alt : "") + (c.shift ? MAC_GLYPHS.shift : "") + (c.meta ? MAC_GLYPHS.meta : "") + keyLabel;
   }
-  const mods = [c.ctrl && "Ctrl", c.alt && "Alt", c.shift && "Shift", c.meta && "Win"].filter(Boolean);
+  const mods = [c.ctrl && name(KEY_TEXT.ctrl), c.alt && name(KEY_TEXT.alt), c.shift && name(KEY_TEXT.shift), c.meta && name(KEY_TEXT.meta)].filter(Boolean);
   return [...mods, keyLabel].join("+");
 }
 var KeymapManager = class {
@@ -506,17 +1411,18 @@ var KeymapManager = class {
     if (keys === null) this.rebinds.delete(id);
     else this.rebinds.set(id, Array.isArray(keys) ? [...keys] : [keys]);
   }
-  /** Snapshot for a shortcuts help panel / rebinding UI. */
-  bindings() {
+  /** Snapshot for a shortcuts help panel / rebinding UI: labels, categories and key
+   *  names in `i18n`'s language (English when absent). */
+  bindings(i18n) {
     return [...this.descriptors.values()].map((d) => {
       const keys = this.activeKeys(d);
       return {
         id: d.id,
-        label: d.label,
-        category: d.category ?? "General",
+        label: textOf(i18n, d.label),
+        category: textOf(i18n, d.category ?? KEY_TEXT.general),
         scope: d.scope ?? this.baseScope,
         keys,
-        display: keys.map((k) => displayChord(k, this.mac))
+        display: keys.map((k) => displayChord(k, this.mac, i18n))
       };
     });
   }
@@ -750,7 +1656,7 @@ var MENU_CSS = `
 .vela-menu-item .vela-icon { width: 16px; height: 16px; font-size: 16px; justify-content: center; color: var(--vela-fg-muted); }
 .vela-menu-item .vela-menu-label { flex: 1 1 auto; }
 .vela-menu-item .vela-menu-hint { color: var(--vela-fg-faint); font-size: var(--vela-font-size-sm); }
-/* Active entry: the row surface carries the selection \u2014 a stronger background wash
+/* Active entry: the row surface carries the selection — a stronger background wash
    than the hover one, plus bright ink. Declared after the hover rule so a selected
    row stays visibly selected while highlighted. */
 .vela-menu-item[data-checked] {
@@ -758,7 +1664,7 @@ var MENU_CSS = `
     color: var(--vela-fg-bright);
 }
 /* Checkmark mode (context/action menus): every row reserves the leading mark column so
-   labels align; a checked row fills it with a \u2713 and brightens its ink \u2014 the row surface
+   labels align; a checked row fills it with a ✓ and brightens its ink — the row surface
    stays free for the hover wash. */
 .vela-menu-item .vela-menu-mark {
     width: 14px;
@@ -803,7 +1709,7 @@ var MENU_CSS = `
     border-color: color-mix(in srgb, var(--vela-fg-bright) 40%, transparent);
     color: var(--vela-surface);
 }
-/* Switch rows (boolean settings in a dropdown): a right-aligned toggle pill \u2014 the
+/* Switch rows (boolean settings in a dropdown): a right-aligned toggle pill — the
    same control language as the settings dialog's toggles. */
 .vela-menu-switch {
     order: 99;
@@ -830,8 +1736,8 @@ var MENU_CSS = `
 }
 .vela-menu-switch.on { background: var(--vela-accent-bright, var(--vela-accent)); border-color: var(--vela-accent-bright, var(--vela-accent)); }
 .vela-menu-switch.on::after { transform: translateX(16px); background: var(--vela-bg); }
-/* Favorite star (rows carrying \`favorite\`): reserved space always \u2014 it fades in on row
-   hover instead of shifting the layout \u2014 and a starred row keeps its filled star visible.
+/* Favorite star (rows carrying \`favorite\`): reserved space always — it fades in on row
+   hover instead of shifting the layout — and a starred row keeps its filled star visible.
    Same control language as the drawing toolbar's flyout stars. */
 .vela-menu-item .vela-menu-star {
     order: 98;
@@ -859,6 +1765,18 @@ var MENU_CSS = `
 }
 .vela-menu-item[data-state='open'] { background: var(--vela-hover); }
 `;
+
+// src/ui/kit-text.ts
+var scoped = null;
+function kitTranslator() {
+  return scoped;
+}
+
+// src/ui/components/menu/view.ts
+var TEXT = {
+  addFavorite: msg("ui.menu.addFavorite", "Add to favorites"),
+  removeFavorite: msg("ui.menu.removeFavorite", "Remove from favorites")
+};
 var Surface = class _Surface {
   constructor(doc, opts) {
     this.items = [];
@@ -875,6 +1793,7 @@ var Surface = class _Surface {
     this.host = opts.host;
     this.onSelect = opts.onSelect;
     this.onFavorite = opts.onFavorite;
+    this.i18n = opts.i18n;
     this.checkmarks = opts.checkmarks === true;
     this.iconBadges = opts.iconBadges === true;
     this.positioner = doc.createElement("div");
@@ -1037,7 +1956,7 @@ var Surface = class _Surface {
         if (on) star.classList.add("vela-fav");
         star.removeAttribute("aria-hidden");
         star.setAttribute("role", "button");
-        star.setAttribute("aria-label", on ? "Remove from favorites" : "Add to favorites");
+        star.setAttribute("aria-label", textOf(this.i18n, on ? TEXT.removeFavorite : TEXT.addFavorite));
         star.setAttribute("aria-pressed", on ? "true" : "false");
         for (const ev of ["pointerdown", "pointerup", "mousedown", "mouseup"]) {
           star.addEventListener(ev, (e) => e.stopPropagation());
@@ -1066,6 +1985,7 @@ var Surface = class _Surface {
           opener: li,
           onSelect: this.onSelect,
           onFavorite: this.onFavorite,
+          i18n: this.i18n,
           checkmarks: this.checkmarks,
           iconBadges: this.iconBadges,
           id: `${this.mid}--${item.id}`
@@ -1093,6 +2013,7 @@ var Menu = class {
       id: opts.id,
       minWidth: opts.minWidth,
       onFavorite: opts.onFavorite,
+      i18n: opts.i18n ?? kitTranslator(),
       checkmarks: opts.checkmarks,
       iconBadges: opts.iconBadges
     });
@@ -1508,13 +2429,13 @@ var DIALOG_CSS = `
 .vela-dialog-btn-primary:hover { background: var(--vela-selected-bg); color: var(--vela-selected-fg); opacity: 0.85; border-color: var(--vela-selected-bg); }
 ${overlayScrollbarCss(".vela-dialog-body")}
 /* Scrollers NESTED in a dialog (a flush body's grid, a tab pane) get the same thin
-   overlay bars \u2014 the two-class selectors below stay overridable by more specific
+   overlay bars — the two-class selectors below stay overridable by more specific
    per-dialog sheets. */
 ${overlayScrollbarCss(".vela-dialog *")}
-/* \u2500\u2500 mobile chrome: dialogs fill the shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+/* ── mobile chrome: dialogs fill the shell ─────────────────────────────────────────
    Inside a shell in the mobile size class ([data-layout='mobile'] on the widget root,
    which is position:relative) every kit dialog presents fullscreen: desktop cards are
-   unusable at phone widths, and the shell's bounds \u2014 not the viewport \u2014 are the honest
+   unusable at phone widths, and the shell's bounds — not the viewport — are the honest
    "screen" for an embedded chart. */
 [data-layout='mobile'] .vela-dialog-backdrop { position: absolute; }
 [data-layout='mobile'] .vela-dialog-positioner {
@@ -1762,7 +2683,7 @@ var DRAWER_CSS = `
     z-index: var(--vela-z-dialog);
 }
 /* Inside a shell that declares a size class, the sheet scopes to the SHELL's bounds
-   (the widget root is position:relative) instead of the whole viewport \u2014 an embedded
+   (the widget root is position:relative) instead of the whole viewport — an embedded
    chart must not curtain the host page. */
 [data-layout] .vela-drawer-backdrop, [data-layout] .vela-drawer-positioner { position: absolute; }
 .vela-drawer {
@@ -2562,7 +3483,7 @@ var NUMBER_CSS = `
 .vela-num input::-webkit-inner-spin-button, .vela-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
 .vela-num input:hover { border-color: var(--vela-fg-muted); }
 .vela-num input:focus { border-color: var(--vela-focus); box-shadow: 0 0 0 3px var(--vela-focus-soft); }
-/* The stepper gutter exists only while the steppers do (hover) \u2014 an idle field keeps
+/* The stepper gutter exists only while the steppers do (hover) — an idle field keeps
    its full width so long values aren't cut under an invisible arrow column. */
 .vela-num[data-steppers]:hover input { padding-right: 26px; }
 .vela-num[data-size='sm'] { width: 64px; flex: none; }
@@ -2609,10 +3530,15 @@ var NUMBER_CSS = `
 `;
 
 // src/ui/components/number-input/view.ts
+var TEXT2 = {
+  increase: msg("ui.numberInput.increase", "Increase"),
+  decrease: msg("ui.numberInput.decrease", "Decrease")
+};
 var NumberInput = class {
   constructor(opts) {
     const doc = document;
     injectStyles(NUMBER_STYLE_ID, NUMBER_CSS, doc);
+    this.i18n = opts.i18n ?? kitTranslator();
     this.ctrl = numberInputController(opts);
     this.placeholderMode = opts.placeholder !== void 0;
     this.emptyValue = opts.emptyValue ?? opts.value;
@@ -2717,7 +3643,7 @@ var NumberInput = class {
       b.addEventListener("pointercancel", stop);
       return b;
     };
-    steps.append(mk(1, "chevron-up", "Increase"), mk(-1, "chevron-down", "Decrease"));
+    steps.append(mk(1, "chevron-up", textOf(this.i18n, TEXT2.increase)), mk(-1, "chevron-down", textOf(this.i18n, TEXT2.decrease)));
     return steps;
   }
 };
@@ -2886,9 +3812,9 @@ function transparencyChecker(size) {
   return `repeating-conic-gradient(#9aa0a6 0% 25%, #d3d6da 0% 50%) 0 0 / ${size}px ${size}px`;
 }
 function colorPickerController(opts = {}) {
-  const parsed = splitColor(opts.color ?? ACCENT_BRIGHT);
-  let hex6 = parsed.hex6;
-  let alpha = parsed.alpha;
+  const parsed2 = splitColor(opts.color ?? ACCENT_BRIGHT);
+  let hex6 = parsed2.hex6;
+  let alpha = parsed2.alpha;
   return {
     get hex6() {
       return hex6;
@@ -2920,6 +3846,10 @@ var COLOR_CSS = `
 `;
 
 // src/ui/components/color-picker/view.ts
+var TEXT3 = {
+  opacity: msg("ui.colorPicker.opacity", "Opacity"),
+  opacityPercent: msg("ui.colorPicker.opacityPercent", "Opacity (%)")
+};
 var PALETTE = buildPalette();
 var CHECKER = transparencyChecker(10);
 var FIELD_CHECKER = transparencyChecker(8);
@@ -2932,9 +3862,10 @@ function addRecent(hex6) {
 }
 function buildColorPicker(color, theme, onChange, options = {}) {
   const commit = options.commit ?? "live";
-  const parsed = splitColor(color);
-  let curHex = parsed.hex6;
-  let curAlpha = parsed.alpha;
+  const i18n = options.i18n ?? kitTranslator();
+  const parsed2 = splitColor(color);
+  let curHex = parsed2.hex6;
+  let curAlpha = parsed2.alpha;
   const root = document.createElement("div");
   root.style.cssText = "display:flex;flex-direction:column;gap:9px;width:236px;";
   const grid = document.createElement("div");
@@ -2992,7 +3923,7 @@ function buildColorPicker(color, theme, onChange, options = {}) {
     }
   };
   const opLabel = document.createElement("div");
-  opLabel.textContent = "Opacity";
+  opLabel.textContent = textOf(i18n, TEXT3.opacity);
   opLabel.style.cssText = `font:11px ${theme.fontFamily};color:var(--vela-fg-muted);`;
   const opRow = document.createElement("div");
   opRow.style.cssText = "display:flex;align-items:center;gap:10px;";
@@ -3004,7 +3935,7 @@ function buildColorPicker(color, theme, onChange, options = {}) {
   const pctBox = document.createElement("input");
   pctBox.type = "text";
   pctBox.inputMode = "numeric";
-  pctBox.title = "Opacity (%)";
+  pctBox.title = textOf(i18n, TEXT3.opacityPercent);
   pctBox.style.cssText = `width:46px;box-sizing:border-box;text-align:center;font:var(--vela-font-size-md) ${theme.fontFamily};color:var(--vela-fg);background:transparent;border:1px solid var(--vela-border);border-radius:5px;padding:3px 4px;outline:none;`;
   pctBox.addEventListener("focus", () => {
     pctBox.style.borderColor = "var(--vela-border-strong)";
@@ -3099,6 +4030,7 @@ var ColorField = class {
     this.onVal = opts.onVal;
     this.popoverOpts = opts.popover;
     this.commit = opts.commit;
+    this.i18n = opts.i18n ?? kitTranslator();
     const trigger = document.createElement("button");
     trigger.type = "button";
     if (opts.id) trigger.id = opts.id;
@@ -3145,7 +4077,7 @@ var ColorField = class {
           this.onVal(val);
           this.paint();
         },
-        { commit: this.commit }
+        { commit: this.commit, i18n: this.i18n }
       )
     });
     pop.show();
@@ -3477,7 +4409,7 @@ var FIELD_CSS = `
     font-size: 14px;
 }
 .vela-field-label[data-size='sm'] { font-size: inherit; opacity: 0.85; }
-/* Titles are fully inert: spans, not label[for] \u2014 native labels propagate :hover and
+/* Titles are fully inert: spans, not label[for] — native labels propagate :hover and
    clicks onto their control, and both belong to the input alone. */
 .vela-field-cell { display: flex; align-items: center; gap: 8px; justify-self: start; }
 .vela-field-bool { display: flex; align-items: center; gap: 8px; min-height: 22px; }
@@ -3817,7 +4749,7 @@ var CALLOUT_CSS = `
 }
 .vela-callout[role='button'] { cursor: pointer; }
 .vela-callout svg { display: block; }
-/* The deployed panel \u2014 carries the kit's elevated-card look itself (the popover
+/* The deployed panel — carries the kit's elevated-card look itself (the popover
    shell is bare positioning chrome). */
 .vela-callout-panel {
     display: flex;
@@ -3974,9 +4906,14 @@ var CalloutBubble = class {
 };
 
 // src/ui/components/date-picker/controller.ts
-var MONTH_LABELS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-var MONTH_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-var WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var NAV = {
+  prevMonth: msg("ui.datePicker.previousMonth", "Previous month"),
+  nextMonth: msg("ui.datePicker.nextMonth", "Next month"),
+  prevYear: msg("ui.datePicker.previousYear", "Previous year"),
+  nextYear: msg("ui.datePicker.nextYear", "Next year"),
+  prevDecade: msg("ui.datePicker.previousDecade", "Previous decade"),
+  nextDecade: msg("ui.datePicker.nextDecade", "Next decade")
+};
 function isoDate(d) {
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
 }
@@ -4002,6 +4939,12 @@ function datePickerController(opts = {}) {
   let year = selected?.getFullYear() ?? today.getFullYear();
   let month = selected?.getMonth() ?? today.getMonth();
   let panel = "date";
+  const i18n = opts.i18n ?? englishTranslator();
+  const settings = formatSettingsOf(i18n);
+  const weekStart = opts.i18n ? i18n.weekStart : 0;
+  const monthsLong = monthNames(settings, "long");
+  const monthsShort = monthNames(settings, "short");
+  const num = (n) => plainInteger(settings, n);
   const decade = () => Math.floor(year / 10) * 10;
   return {
     get panel() {
@@ -4016,38 +4959,43 @@ function datePickerController(opts = {}) {
     get value() {
       return selected ? isoDate(selected) : null;
     },
+    yearFirst: yearBeforeMonth(settings),
+    weekdays() {
+      const names = weekdayNames(settings);
+      return Array.from({ length: 7 }, (_, i) => names[(weekStart + i) % 7]);
+    },
     header() {
       return {
-        month: MONTH_LABELS[month] ?? "",
+        month: monthsLong[month] ?? "",
         monthVisible: panel === "date",
-        year: panel === "year" ? `${decade()}-${decade() + 9}` : String(year),
+        year: panel === "year" ? `${num(decade())}-${num(decade() + 9)}` : yearLabel(settings, year),
         yearDisabled: panel === "year"
         // in the decade panel the year reads as its title
       };
     },
     navLabels() {
-      if (panel === "date") return { prev: "Previous month", next: "Next month" };
-      if (panel === "month") return { prev: "Previous year", next: "Next year" };
-      return { prev: "Previous decade", next: "Next decade" };
+      if (panel === "date") return { prev: i18n.t(NAV.prevMonth), next: i18n.t(NAV.nextMonth) };
+      if (panel === "month") return { prev: i18n.t(NAV.prevYear), next: i18n.t(NAV.nextYear) };
+      return { prev: i18n.t(NAV.prevDecade), next: i18n.t(NAV.nextDecade) };
     },
     cells() {
       const out = [];
       if (panel === "date") {
-        const startPad = new Date(year, month, 1).getDay();
+        const startPad = (new Date(year, month, 1).getDay() - weekStart + 7) % 7;
         const days = new Date(year, month + 1, 0).getDate();
         const todayIso = isoDate(today);
         const selectedIso = selected ? isoDate(selected) : "";
         for (let i = 0; i < startPad; i++) out.push({ label: "", value: "", checked: false, today: false, blank: true });
         for (let day = 1; day <= days; day++) {
           const iso = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-          out.push({ label: String(day), value: iso, checked: iso === selectedIso, today: iso === todayIso });
+          out.push({ label: num(day), value: iso, checked: iso === selectedIso, today: iso === todayIso });
         }
         return out;
       }
       if (panel === "month") {
         for (let m = 0; m < 12; m++) {
           out.push({
-            label: MONTH_SHORT[m] ?? "",
+            label: monthsShort[m] ?? "",
             value: m,
             checked: selected?.getFullYear() === year && selected.getMonth() === m,
             today: today.getFullYear() === year && today.getMonth() === m
@@ -4057,7 +5005,7 @@ function datePickerController(opts = {}) {
       }
       const d = decade();
       for (let y = d - 1; y <= d + 10; y++) {
-        out.push({ label: String(y), value: y, checked: selected?.getFullYear() === y, today: today.getFullYear() === y, outside: y < d || y > d + 9 });
+        out.push({ label: num(y), value: y, checked: selected?.getFullYear() === y, today: today.getFullYear() === y, outside: y < d || y > d + 9 });
       }
       return out;
     },
@@ -4137,6 +5085,8 @@ var DATE_PICKER_CSS = `
 `;
 
 // src/ui/components/date-picker/view.ts
+var CHOOSE_MONTH = msg("ui.datePicker.chooseMonth", "Choose month");
+var CHOOSE_YEAR = msg("ui.datePicker.chooseYear", "Choose year");
 var DatePicker = class {
   constructor(opts = {}) {
     this.opts = opts;
@@ -4153,19 +5103,21 @@ var DatePicker = class {
     this.prev.append(iconEl("chevron-left", doc));
     this.next = button("vela-date-picker-nav");
     this.next.append(iconEl("chevron-right", doc));
+    const i18n = opts.i18n ?? englishTranslator();
     this.monthBtn = button("vela-date-picker-switch");
-    this.monthBtn.setAttribute("aria-label", "Choose month");
+    this.monthBtn.setAttribute("aria-label", i18n.t(CHOOSE_MONTH));
     this.yearBtn = button("vela-date-picker-switch");
-    this.yearBtn.setAttribute("aria-label", "Choose year");
+    this.yearBtn.setAttribute("aria-label", i18n.t(CHOOSE_YEAR));
     const title = doc.createElement("div");
     title.className = "vela-date-picker-title";
-    title.append(this.monthBtn, this.yearBtn);
+    if (this.ctrl.yearFirst) title.append(this.yearBtn, this.monthBtn);
+    else title.append(this.monthBtn, this.yearBtn);
     const head = doc.createElement("div");
     head.className = "vela-date-picker-head";
     head.append(this.prev, title, this.next);
     this.week = doc.createElement("div");
     this.week.className = "vela-date-picker-week";
-    for (const d of WEEKDAY_LABELS) {
+    for (const d of this.ctrl.weekdays()) {
       const cell = doc.createElement("span");
       cell.textContent = d;
       this.week.appendChild(cell);