@luxalgo/vela 0.8.5 → 0.9.1

package/dist/{chunk-WY5H4S4I.js → chunk-PZN4RS4T.js}

@@ -1,4 +1,4 @@
-import { overlayScrollbarCss, isDarkColor, mix, HIGHLIGHT, ACCENT_BRIGHT, ACCENT, withAlpha, injectStyles, announceSurface, holdForExit, iconAt, iconEl, BULLISH, BEARISH, WARNING, NEUTRAL } from './chunk-I2U4NZD2.js';
+import { msg, overlayScrollbarCss, isDarkColor, mix, HIGHLIGHT, ACCENT_BRIGHT, ACCENT, withAlpha, injectStyles, announceSurface, holdForExit, iconAt, iconEl, englishTranslator, formatSettingsOf, monthNames, yearLabel, weekdayNames, yearBeforeMonth, textOf, BULLISH, BEARISH, WARNING, NEUTRAL, plainInteger } from './chunk-O6L27KRB.js';
 import { VanillaMachine, normalizeProps, spreadProps } from '@zag-js/vanilla';
 export { normalizeProps, spreadProps } from '@zag-js/vanilla';
 import * as menu from '@zag-js/menu';
@@ -112,7 +112,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;
 }
@@ -121,7 +121,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; }
@@ -202,7 +202,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] {
@@ -210,7 +210,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;
@@ -255,7 +255,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;
@@ -282,8 +282,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;
@@ -311,6 +311,27 @@ var MENU_CSS = `
 }
 .vela-menu-item[data-state='open'] { background: var(--vela-hover); }
 `;
+
+// src/ui/kit-text.ts
+var scoped = null;
+function withKitTranslator(i18n, build) {
+  const previous = scoped;
+  scoped = i18n ?? null;
+  try {
+    return build();
+  } finally {
+    scoped = previous;
+  }
+}
+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 = [];
@@ -327,6 +348,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");
@@ -489,7 +511,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());
@@ -518,6 +540,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}`
@@ -545,6 +568,7 @@ var Menu = class {
       id: opts.id,
       minWidth: opts.minWidth,
       onFavorite: opts.onFavorite,
+      i18n: opts.i18n ?? kitTranslator(),
       checkmarks: opts.checkmarks,
       iconBadges: opts.iconBadges
     });
@@ -865,7 +889,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;
@@ -1440,13 +1464,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 {
@@ -1663,9 +1687,14 @@ var Dialog = 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")}`;
 }
@@ -1691,6 +1720,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() {
@@ -1705,38 +1740,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
@@ -1746,7 +1786,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;
     },
@@ -1826,6 +1866,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;
@@ -1842,19 +1884,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);
@@ -2117,7 +2161,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; }
@@ -2164,10 +2208,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;
@@ -2272,7 +2321,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;
   }
 };
@@ -2582,6 +2631,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);
@@ -2594,6 +2647,7 @@ function addRecent(hex6) {
 }
 function buildColorPicker(color, theme, onChange, options = {}) {
   const commit = options.commit ?? "live";
+  const i18n = options.i18n ?? kitTranslator();
   const parsed = splitColor(color);
   let curHex = parsed.hex6;
   let curAlpha = parsed.alpha;
@@ -2654,7 +2708,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;";
@@ -2666,7 +2720,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)";
@@ -2761,6 +2815,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;
@@ -2807,7 +2862,7 @@ var ColorField = class {
           this.onVal(val);
           this.paint();
         },
-        { commit: this.commit }
+        { commit: this.commit, i18n: this.i18n }
       )
     });
     pop.show();
@@ -3032,7 +3087,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; }
@@ -3338,4 +3393,4 @@ function buildFieldControl(desc) {
   return { el };
 }
 
-export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, ColorField, DatePicker, Dialog, FIELD_GAP_PX, GlyphSelect, Menu, NumberInput, Popover, STATIC_TOKENS, Select, Switch, TextArea, TextField, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, calloutPanelRows, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, closesPanel, colorField, colorPickerController, combineColor, datePickerController, decorateSelectScroll, dialogController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, insetRect, intersectRects, isPopoverOpen, isoDate, lineWidthGlyph, menuController, nextUid, normalizeDateInput, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, switchController, textAreaController, textFieldController, themeTokens, toggleSelectList, transparencyChecker, viewportRect, widthField, widthFieldOptions };
+export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, ColorField, DatePicker, Dialog, FIELD_GAP_PX, GlyphSelect, Menu, NumberInput, Popover, STATIC_TOKENS, Select, Switch, TextArea, TextField, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, calloutPanelRows, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, closesPanel, colorField, colorPickerController, combineColor, datePickerController, decorateSelectScroll, dialogController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, insetRect, intersectRects, isPopoverOpen, isoDate, lineWidthGlyph, menuController, nextUid, normalizeDateInput, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, switchController, textAreaController, textFieldController, themeTokens, toggleSelectList, transparencyChecker, viewportRect, widthField, widthFieldOptions, withKitTranslator };