@luxalgo/vela 0.5.0 → 0.5.1

package/dist/{DataProvider-DKNDHpNv.d.cts → DataProvider-BBQ3Hr21.d.cts}

@@ -1,4 +1,4 @@
-import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-Q-576hIi.cjs';
+import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-DbQholFV.cjs';
 
 /**
  * Symbol metadata an engine may need (e.g. Pine `syminfo.*`). Free-form beyond

package/dist/{DataProvider-Dzd-Erlk.d.ts → DataProvider-DGesjOJT.d.ts}

@@ -1,4 +1,4 @@
-import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-Q-576hIi.js';
+import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-DbQholFV.js';
 
 /**
  * Symbol metadata an engine may need (e.g. Pine `syminfo.*`). Free-form beyond

package/dist/{chunk-OVQKKXLZ.js → chunk-5SE4PL3H.js}

@@ -1,7 +1,7 @@
-import { parseSymbol, priceStyleIds, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel } from './chunk-KCCZNKH7.js';
-import { chartType, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, getDrawingType } from './chunk-7UFX5ZIG.js';
-import { Tooltip, Menu, Dialog } from './chunk-RHIDOUFL.js';
-import { injectStyles, iconEl, iconMarkup, SESSION_PRE, SESSION_POST, SESSION_OFF, icon, registerIcon, categoricalColor } from './chunk-GYD2THPV.js';
+import { parseSymbol, priceStyleIds, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel } from './chunk-FNOMKHEZ.js';
+import { chartType, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, getDrawingType } from './chunk-S6F6SQ2L.js';
+import { Tooltip, Menu, Dialog } from './chunk-AIW3EJUE.js';
+import { injectStyles, iconEl, iconMarkup, SESSION_PRE, SESSION_POST, SESSION_OFF, icon, registerIcon, categoricalColor } from './chunk-EP6NDJYK.js';
 
 // src/widget/timeframe.ts
 var UNIT_MS = {
@@ -87,9 +87,329 @@ function timeframeLabel(value) {
   return parsed.short;
 }
 
-// src/widget/topbar.ts
-var STYLE_ID = "vela-topbar";
+// src/widget/layout-picker.ts
+var STYLE_ID = "vela-widget-layout-picker-v14";
 var CSS = `
+.vela-lp-layer { position: absolute; z-index: var(--vela-z-menu); }
+.vela-lp {
+    background: var(--vela-surface-elev);
+    color: var(--vela-fg);
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 8px;
+    box-shadow: var(--vela-shadow);
+    padding: 10px 12px 10px;
+    font-size: 13px;
+    user-select: none;
+    transform-origin: top;
+    animation: vela-lp-in var(--vela-dur-fast) var(--vela-ease);
+}
+@keyframes vela-lp-in {
+    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.vela-lp-cols { display: flex; align-items: stretch; gap: 14px; }
+.vela-lp-heading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 1.2px;
+    text-transform: uppercase;
+    color: var(--vela-fg-faint);
+    margin-bottom: 10px;
+}
+/* "?" help badge: hover it for the canvas explainer. */
+.vela-lp-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 1px solid var(--vela-border-strong);
+    color: var(--vela-fg-muted);
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 0;
+    cursor: default;
+    transition: color var(--vela-dur-fast) var(--vela-ease), border-color var(--vela-dur-fast) var(--vela-ease);
+}
+.vela-lp-badge:hover { color: var(--vela-fg-bright); border-color: var(--vela-fg-muted); }
+.vela-lp-tip { display: flex; flex-direction: column; gap: 4px; max-width: 230px; white-space: normal; }
+.vela-lp-vsep { width: 1px; flex: none; align-self: stretch; background: var(--vela-border-faint); }
+.vela-lp-layout { width: 132px; display: flex; flex-direction: column; align-items: center; }
+.vela-lp-layout > .vela-lp-heading,
+.vela-lp-layout > .vela-lp-presets { align-self: stretch; }
+.vela-lp-grid { display: grid; grid-template-columns: repeat(4, 24px); grid-auto-rows: 24px; gap: 4px; }
+.vela-lp-sq {
+    all: unset;
+    box-sizing: border-box;
+    border-radius: 4px;
+    background: var(--vela-hover);
+    border: 1px solid var(--vela-border-faint);
+    cursor: pointer;
+    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. */
+.vela-lp-sq[data-on='1'] {
+    background: var(--vela-selected-bg);
+    border-color: var(--vela-selected-bg);
+}
+.vela-lp-presets { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
+.vela-lp-preset { all: unset; padding: 5px 8px; border-radius: 4px; cursor: pointer; color: var(--vela-fg-muted); font-size: 12px; white-space: nowrap; transition: transform 120ms var(--vela-ease); }
+.vela-lp-preset:hover { background: var(--vela-hover); }
+.vela-lp-preset:active { transform: scale(0.98); }
+.vela-lp-preset[data-checked='1'] { background: var(--vela-hover-strong); color: var(--vela-fg-bright); }
+.vela-lp-sync { display: flex; flex-direction: column; gap: 4px; min-width: 118px; }
+.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. */
+.vela-lp-switch {
+    position: relative;
+    flex: none;
+    width: 34px;
+    height: 18px;
+    border-radius: 9px;
+    background: var(--vela-hover);
+    border: 1px solid var(--vela-border-soft);
+    transition: background 0.16s ease, border-color 0.16s ease;
+}
+.vela-lp-switch::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--vela-fg-muted);
+    transition: transform 0.16s ease, background 0.16s ease;
+}
+.vela-lp-switch.on { background: var(--vela-selected-bg); border-color: var(--vela-selected-bg); }
+.vela-lp-switch.on::after { transform: translateX(16px); background: var(--vela-selected-fg); }
+`;
+var GRID = 4;
+var LayoutPicker = class {
+  constructor(opts) {
+    this.squares = [];
+    this.isOpen = false;
+    /** Hover preview (1-based rows/cols), null = show current shape. */
+    this.hover = null;
+    this.onDocPointerDown = (e) => {
+      const t = e.target;
+      if (t && (this.layer.contains(t) || this.opts.trigger.contains(t))) return;
+      this.close();
+    };
+    this.onDocKeydown = (e) => {
+      if (e.key === "Escape") this.close();
+    };
+    this.opts = opts;
+    this.doc = opts.host.ownerDocument;
+    injectStyles(STYLE_ID, CSS, this.doc);
+    const doc = this.doc;
+    this.layer = doc.createElement("div");
+    this.layer.className = "vela-ui-layer vela-lp-layer";
+    this.layer.style.display = "none";
+    const panel = doc.createElement("div");
+    panel.className = "vela-lp";
+    this.layer.appendChild(panel);
+    const cols = doc.createElement("div");
+    cols.className = "vela-lp-cols";
+    panel.appendChild(cols);
+    const layoutCol = doc.createElement("div");
+    layoutCol.className = "vela-lp-layout";
+    const layoutHeading = doc.createElement("div");
+    layoutHeading.className = "vela-lp-heading";
+    const headingText = doc.createElement("span");
+    headingText.textContent = "Layout";
+    const badge = doc.createElement("span");
+    badge.className = "vela-lp-badge";
+    badge.textContent = "?";
+    layoutHeading.append(headingText, badge);
+    layoutCol.appendChild(layoutHeading);
+    this.infoTip = new Tooltip(badge, {
+      host: opts.host,
+      placement: "bottom",
+      content: () => this.tipNode()
+    });
+    const grid = doc.createElement("div");
+    grid.className = "vela-lp-grid";
+    for (let r = 0; r < GRID; r += 1) {
+      for (let c = 0; c < GRID; c += 1) {
+        const sq = doc.createElement("button");
+        sq.className = "vela-lp-sq";
+        sq.dataset.r = String(r);
+        sq.dataset.c = String(c);
+        sq.setAttribute("aria-label", `${c + 1} \xD7 ${r + 1}`);
+        this.squares.push(sq);
+        grid.appendChild(sq);
+      }
+    }
+    layoutCol.appendChild(grid);
+    this.presetsEl = doc.createElement("div");
+    this.presetsEl.className = "vela-lp-presets";
+    layoutCol.appendChild(this.presetsEl);
+    cols.appendChild(layoutCol);
+    const vsep = doc.createElement("div");
+    vsep.className = "vela-lp-vsep";
+    cols.appendChild(vsep);
+    const syncCol = doc.createElement("div");
+    const syncHeading = doc.createElement("div");
+    syncHeading.className = "vela-lp-heading";
+    syncHeading.textContent = "Sync";
+    syncCol.appendChild(syncHeading);
+    this.syncEl = doc.createElement("div");
+    this.syncEl.className = "vela-lp-sync";
+    syncCol.appendChild(this.syncEl);
+    cols.appendChild(syncCol);
+    grid.addEventListener("pointerdown", (e) => {
+      const sq = this.squareAt(e);
+      if (!sq) return;
+      e.preventDefault();
+      const { r, c } = this.squarePos(sq);
+      this.close();
+      this.opts.onSelectGrid(r + 1, c + 1);
+    });
+    grid.addEventListener("pointermove", (e) => {
+      const sq = this.squareAt(e);
+      if (!sq) return;
+      const { r, c } = this.squarePos(sq);
+      if (this.hover?.rows !== r + 1 || this.hover?.cols !== c + 1) {
+        this.hover = { rows: r + 1, cols: c + 1 };
+        this.render();
+      }
+    });
+    grid.addEventListener("pointerleave", () => {
+      if (this.hover) {
+        this.hover = null;
+        this.render();
+      }
+    });
+    opts.trigger.addEventListener("click", () => this.toggle());
+    opts.trigger.setAttribute("aria-haspopup", "true");
+    opts.trigger.setAttribute("aria-expanded", "false");
+    opts.host.appendChild(this.layer);
+  }
+  toggle() {
+    if (this.isOpen) this.close();
+    else this.open();
+  }
+  open() {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    this.hover = null;
+    this.refresh();
+    this.layer.style.display = "";
+    this.position();
+    this.opts.trigger.setAttribute("aria-expanded", "true");
+    this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
+    this.doc.addEventListener("keydown", this.onDocKeydown, true);
+    this.opts.onOpenChange?.(true);
+  }
+  close() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.layer.style.display = "none";
+    this.opts.trigger.setAttribute("aria-expanded", "false");
+    this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
+    this.doc.removeEventListener("keydown", this.onDocKeydown, true);
+    this.opts.onOpenChange?.(false);
+  }
+  /** Re-read shape/presets/syncs and re-render (no-op while closed — `open` re-reads). */
+  refresh() {
+    if (!this.isOpen) return;
+    this.renderPresets();
+    this.renderSyncs();
+    this.render();
+  }
+  destroy() {
+    this.close();
+    this.infoTip.destroy();
+    this.layer.remove();
+  }
+  // ── internals ──
+  squareAt(e) {
+    const sq = e.target?.closest?.(".vela-lp-sq");
+    return sq instanceof HTMLButtonElement ? sq : null;
+  }
+  squarePos(sq) {
+    return { r: Number(sq.dataset.r), c: Number(sq.dataset.c) };
+  }
+  /** Help copy for the LAYOUT "?" badge. */
+  tipNode() {
+    const tip = this.doc.createElement("div");
+    tip.className = "vela-lp-tip";
+    tip.textContent = "Click a square to apply that columns \xD7 rows layout.";
+    return tip;
+  }
+  /** Project the interaction state onto the DOM (the hover/current rectangle). */
+  render() {
+    const preview = this.hover ?? this.opts.shape();
+    for (const sq of this.squares) {
+      const { r, c } = this.squarePos(sq);
+      const on = preview !== null && r < preview.rows && c < preview.cols;
+      if (on) sq.dataset.on = "1";
+      else delete sq.dataset.on;
+    }
+  }
+  renderPresets() {
+    const doc = this.doc;
+    this.presetsEl.replaceChildren();
+    const presets = this.opts.presets();
+    this.presetsEl.style.display = presets.length > 0 ? "" : "none";
+    for (const p of presets) {
+      const b = doc.createElement("button");
+      b.className = "vela-lp-preset";
+      b.textContent = p.label;
+      if (p.checked) b.dataset.checked = "1";
+      b.addEventListener("click", () => {
+        this.close();
+        this.opts.onSelectPreset(p.id);
+      });
+      this.presetsEl.appendChild(b);
+    }
+  }
+  renderSyncs() {
+    const doc = this.doc;
+    this.syncEl.replaceChildren();
+    for (const s of this.opts.syncs()) {
+      const row = doc.createElement("button");
+      row.className = "vela-lp-sync-row";
+      const label = doc.createElement("span");
+      label.className = "vela-lp-label";
+      label.textContent = s.label;
+      const pill = doc.createElement("span");
+      pill.className = "vela-lp-switch" + (s.checked ? " on" : "");
+      pill.setAttribute("aria-hidden", "true");
+      row.setAttribute("role", "switch");
+      row.setAttribute("aria-checked", String(s.checked));
+      row.append(label, pill);
+      row.addEventListener("click", () => {
+        this.opts.onToggleSync(s.id);
+        this.renderSyncs();
+      });
+      this.syncEl.appendChild(row);
+    }
+  }
+  /** Anchor under the trigger, clamped to the host's right edge. */
+  position() {
+    const hostRect = this.opts.host.getBoundingClientRect();
+    const trigRect = this.opts.trigger.getBoundingClientRect();
+    let left = trigRect.left - hostRect.left;
+    const top = trigRect.bottom - hostRect.top + 4;
+    const width = this.layer.offsetWidth;
+    if (left + width > hostRect.width - 8) left = Math.max(8, hostRect.width - 8 - width);
+    this.layer.style.left = `${left}px`;
+    this.layer.style.top = `${top}px`;
+  }
+};
+
+// src/widget/topbar.ts
+var STYLE_ID2 = "vela-topbar";
+var CSS2 = `
 .vela-widget-topbar {
     display: flex;
     align-items: center;
@@ -201,7 +521,7 @@ function priceStyleIcon(id) {
 var Topbar = class {
   constructor(host, opts) {
     this.layoutButton = null;
-    this.layoutMenu = null;
+    this.layoutPicker = null;
     this.layoutId = null;
     this.tooltips = [];
     this.panelBtns = /* @__PURE__ */ new Map();
@@ -221,7 +541,7 @@ var Topbar = class {
     this.timeframe = opts.timeframe;
     this.priceStyle = opts.priceStyle;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID, CSS, doc);
+    injectStyles(STYLE_ID2, CSS2, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-widget-topbar";
     this.symbolEl = doc.createElement("button");
@@ -278,19 +598,16 @@ var Topbar = class {
     this.tooltips.push(new Tooltip(this.styleButton, { content: "Chart style", triggerId: "vela-topbar-style", host }));
     if (this.layoutButton && opts.layout) {
       this.tooltips.push(new Tooltip(this.layoutButton, { content: "Layout", triggerId: "vela-topbar-layout", host }));
-      this.layoutMenu = new Menu({
+      const layout = opts.layout;
+      this.layoutPicker = new LayoutPicker({
         trigger: this.layoutButton,
-        triggerId: "vela-topbar-layout",
         host,
-        items: this.layoutItems(),
-        onSelect: (id) => {
-          if (id.startsWith("toggle:")) {
-            opts.layout.onToggle?.(id.slice("toggle:".length));
-            this.layoutMenu?.setItems(this.layoutItems());
-            return;
-          }
-          opts.layout.onSelect(id);
-        }
+        shape: () => layout.shape(),
+        presets: () => layout.presets().map((p) => ({ ...p, checked: p.id === this.layoutId })),
+        onSelectGrid: (rows, cols) => layout.onSelectGrid(rows, cols),
+        onSelectPreset: (id) => layout.onSelectPreset(id),
+        syncs: () => layout.syncs(),
+        onToggleSync: (id) => layout.onToggleSync(id)
       });
     }
     this.tfMenu = new Menu({
@@ -329,7 +646,7 @@ var Topbar = class {
     if (!this.layoutButton) return;
     this.layoutId = id;
     this.renderLayoutButton(this.layoutButton.ownerDocument);
-    this.layoutMenu?.setItems(this.layoutItems());
+    this.layoutPicker?.refresh();
   }
   renderLayoutButton(doc) {
     if (!this.layoutButton) return;
@@ -338,11 +655,6 @@ var Topbar = class {
     else this.layoutButton.appendChild(doc.createTextNode(this.layoutId ?? ""));
     this.layoutButton.setAttribute("aria-label", `Layout \u2014 ${this.layoutId ?? ""}`);
   }
-  layoutItems() {
-    const presets = (this.opts.layout?.options() ?? []).map((l) => ({ id: l.id, label: l.label, checked: l.id === this.layoutId }));
-    const toggles = (this.opts.layout?.toggles?.() ?? []).map((t, i) => ({ id: `toggle:${t.id}`, label: t.label, checked: t.checked, toggle: true, separatorBefore: i === 0 }));
-    return [...presets, ...toggles];
-  }
   renderStyleButton(doc) {
     this.styleButton.replaceChildren();
     const icon2 = priceStyleIcon(this.priceStyle);
@@ -407,7 +719,7 @@ var Topbar = class {
     if (this.hairlineRaf) win?.cancelAnimationFrame(this.hairlineRaf);
     this.tfMenu.destroy();
     this.styleMenu.destroy();
-    this.layoutMenu?.destroy();
+    this.layoutPicker?.destroy();
     for (const t of [...this.tooltips, ...this.panelTooltips]) t.destroy();
     this.el.remove();
   }
@@ -509,8 +821,8 @@ function tickerIconEl(doc, base, name, className) {
 }
 
 // src/widget/statusline.ts
-var STYLE_ID2 = "vela-widget-statusline";
-var CSS2 = `
+var STYLE_ID3 = "vela-widget-statusline";
+var CSS3 = `
 .vela-statusline {
     position: absolute;
     top: var(--vela-space-2);
@@ -645,7 +957,7 @@ var Statusline = class {
     /** 'ohlc' for bar-shaped styles; 'value' (the single plotted close) for line styles. */
     this.readout = "ohlc";
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID2, CSS2, doc);
+    injectStyles(STYLE_ID3, CSS3, doc);
     host.classList.add("vela-has-statusline");
     this.el = doc.createElement("div");
     this.el.className = "vela-statusline";
@@ -768,11 +1080,21 @@ var Statusline = class {
 };
 
 // src/widget/watermark.ts
-var STYLE_ID3 = "vela-widget-watermark";
-var CSS3 = `
+var MAX_FONT_PX = 72;
+var MIN_FONT_PX = 12;
+var FILL = 0.9;
+var STYLE_ID4 = "vela-widget-watermark";
+var CSS4 = `
 .vela-watermark {
     position: absolute;
-    inset: 0;
+    /* Insets follow the renderer-published gutters (mount container), so the mark
+     * centers and fits within the PLOT \u2014 never bleeding into the drawings toolbar
+     * on the left or the price scale on the right (visible in small multi-chart
+     * cells, where the scale is a large share of the width). */
+    top: 0;
+    bottom: 0;
+    left: var(--vela-toolbar-gutter, 0px);
+    right: var(--vela-scale-gutter, 0px);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -780,28 +1102,48 @@ var CSS3 = `
     z-index: 1;
     color: var(--vela-fg);
     opacity: 0.05;
-    font-size: clamp(28px, 7vw, 72px);
+    font-size: ${MAX_FONT_PX}px;
     font-weight: 700;
     letter-spacing: 0.04em;
     user-select: none;
     white-space: nowrap;
 }
 `;
+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 Watermark = class {
   constructor(host, symbol, timeframe) {
-    injectStyles(STYLE_ID3, CSS3, host.ownerDocument);
+    this.resizeObserver = null;
+    injectStyles(STYLE_ID4, CSS4, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-watermark";
+    this.text = host.ownerDocument.createElement("span");
+    this.el.appendChild(this.text);
     host.appendChild(this.el);
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(() => this.fit());
+      this.resizeObserver.observe(this.el);
+    }
     this.update(symbol, timeframe);
   }
   setVisible(visible) {
     this.el.style.display = visible ? "" : "none";
   }
   update(symbol, timeframe) {
-    this.el.textContent = symbol ? `${parseSymbol(symbol).ticker} \xB7 ${timeframeLabel(timeframe)}` : "";
+    this.text.textContent = symbol ? `${parseSymbol(symbol).ticker} \xB7 ${timeframeLabel(timeframe)}` : "";
+    this.fit();
+  }
+  /** Measure the text at the cap and shrink it to the chart's own width. */
+  fit() {
+    if (this.el.clientWidth <= 0 || !this.text.textContent) return;
+    this.el.style.fontSize = `${MAX_FONT_PX}px`;
+    const px = watermarkFontPx(this.el.clientWidth, this.text.getBoundingClientRect().width);
+    if (px !== MAX_FONT_PX) this.el.style.fontSize = `${px}px`;
   }
   destroy() {
+    this.resizeObserver?.disconnect();
     this.el.remove();
   }
 };
@@ -827,8 +1169,8 @@ var RANGE_PRESETS = [
   { id: "ALL", tf: "W", preset: "ALL", bars: 5e3 }
   // everything the provider serves
 ];
-var STYLE_ID4 = "vela-widget-bottombar";
-var CSS4 = `
+var STYLE_ID5 = "vela-widget-bottombar";
+var CSS5 = `
 .vela-widget-bottombar {
     display: flex;
     align-items: center;
@@ -903,7 +1245,7 @@ var Bottombar = class {
     this.timer = null;
     this.timezone = opts.timezone;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID4, CSS4, doc);
+    injectStyles(STYLE_ID5, CSS5, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-widget-bottombar";
     for (const preset of RANGE_PRESETS) {
@@ -1041,8 +1383,8 @@ function filterSymbols(list, query, limit = 100) {
   }
   return [...prefix, ...substr, ...desc, ...venue].slice(0, limit);
 }
-var STYLE_ID5 = "vela-widget-symbolpicker";
-var CSS5 = `
+var STYLE_ID6 = "vela-widget-symbolpicker";
+var CSS6 = `
 .vela-sp-searchrow {
     display: flex;
     align-items: center;
@@ -1132,7 +1474,7 @@ var SymbolPicker = class {
     this.seed = "";
     this.activeTab = "All";
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID5, CSS5, doc);
+    injectStyles(STYLE_ID6, CSS6, doc);
     this.input = doc.createElement("input");
     this.input.className = "vela-sp-input";
     this.input.placeholder = "Search symbol\u2026";
@@ -1454,8 +1796,8 @@ function treeIsEmpty(panes) {
 }
 
 // src/widget/object-tree.ts
-var STYLE_ID6 = "vela-widget-objtree";
-var CSS6 = `
+var STYLE_ID7 = "vela-widget-objtree";
+var CSS7 = `
 /* One pane's block. The transparent border reserves the drop-target outline. */
 .vela-ot-pane {
     border: 1px solid transparent;
@@ -1693,7 +2035,7 @@ var ObjectTree = class extends SidePanel {
     this.menu = null;
     this.menuActions = /* @__PURE__ */ new Map();
     this.drag = null;
-    injectStyles(STYLE_ID6, CSS6, host.ownerDocument);
+    injectStyles(STYLE_ID7, CSS7, host.ownerDocument);
     this.body.addEventListener("contextmenu", (e) => this.onContextMenu(e));
     this.body.addEventListener("pointerdown", (e) => this.onPointerDown(e));
   }
@@ -2672,8 +3014,8 @@ var ObjectTree = class extends SidePanel {
 };
 
 // src/widget/data-window.ts
-var STYLE_ID7 = "vela-widget-datawindow";
-var CSS7 = `
+var STYLE_ID8 = "vela-widget-datawindow";
+var CSS8 = `
 .vela-dw-group {
     padding: 10px 8px 4px;
     margin-top: 4px;
@@ -2732,7 +3074,7 @@ var DataWindow = class extends SidePanel {
     super(host, "Data window", "vela-dw");
     this.chart = null;
     this.unsubs = [];
-    injectStyles(STYLE_ID7, CSS7, host.ownerDocument);
+    injectStyles(STYLE_ID8, CSS8, host.ownerDocument);
   }
   toggle(open = this.el.hidden) {
     super.toggle(open);
@@ -2929,8 +3271,8 @@ var PanelDock = class {
 };
 
 // src/widget/shortcuts-help.ts
-var STYLE_ID8 = "vela-widget-shortcuts";
-var CSS8 = `
+var STYLE_ID9 = "vela-widget-shortcuts";
+var CSS9 = `
 .vela-sh-cat {
     color: var(--vela-fg-muted);
     font-size: var(--vela-font-size-sm);
@@ -2955,7 +3297,7 @@ var ShortcutsHelp = class {
   constructor(keymap, host, onOpenChange) {
     this.keymap = keymap;
     const doc = (host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID8, CSS8, doc);
+    injectStyles(STYLE_ID9, CSS9, doc);
     this.list = doc.createElement("div");
     this.dialog = new Dialog({
       title: "Keyboard shortcuts",
@@ -3243,8 +3585,8 @@ var ChartContextMenu = class {
 };
 
 // src/widget/indicator-picker.ts
-var STYLE_ID9 = "vela-widget-indpicker";
-var CSS9 = `
+var STYLE_ID10 = "vela-widget-indpicker";
+var CSS10 = `
 .vela-ip-searchrow {
     display: flex;
     align-items: center;
@@ -3318,7 +3660,7 @@ var IndicatorPicker = class {
     this.isOpen = false;
     this.opts = opts;
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID9, CSS9, doc);
+    injectStyles(STYLE_ID10, CSS10, doc);
     this.search = doc.createElement("input");
     this.search.className = "vela-ip-search";
     this.search.placeholder = "Search\u2026";
@@ -3446,8 +3788,8 @@ var IndicatorPicker = class {
 };
 
 // src/widget/timeframe-quick.ts
-var STYLE_ID10 = "vela-widget-tfquick";
-var CSS10 = `
+var STYLE_ID11 = "vela-widget-tfquick";
+var CSS11 = `
 .vela-tq-input {
     display: block;
     margin: 0 auto;
@@ -3470,7 +3812,7 @@ var CSS10 = `
 var TimeframeQuick = class {
   constructor(opts) {
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID10, CSS10, doc);
+    injectStyles(STYLE_ID11, CSS11, doc);
     this.input = doc.createElement("input");
     this.input.className = "vela-tq-input";
     this.input.setAttribute("spellcheck", "false");
@@ -3667,7 +4009,7 @@ function sanitizeSync(raw) {
   if (raw == null || typeof raw !== "object") return null;
   const s = raw;
   const out = {};
-  for (const kind of ["viewport", "symbol", "timeframe", "crosshair"]) {
+  for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) {
     const v = s[kind];
     if (v === true) out[kind] = true;
     else if (v != null && typeof v === "object") {
@@ -3920,8 +4262,8 @@ var WidgetHistory = class {
 };
 
 // src/widget/toast.ts
-var STYLE_ID11 = "vela-widget-toast";
-var CSS11 = `
+var STYLE_ID12 = "vela-widget-toast";
+var CSS12 = `
 .vela-toast {
     position: absolute;
     left: 50%;
@@ -3951,7 +4293,7 @@ var CSS11 = `
 var Toast = class {
   constructor(host) {
     this.timer = null;
-    injectStyles(STYLE_ID11, CSS11, host.ownerDocument);
+    injectStyles(STYLE_ID12, CSS12, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-toast";
     host.appendChild(this.el);