@luxalgo/vela 0.5.1 → 0.5.2

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

@@ -1,7 +1,7 @@
-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';
+import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel } from './chunk-RRFGWZNJ.js';
+import { chartType, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, getDrawingType } from './chunk-B5TIKQJ5.js';
+import { Tooltip, Menu, Dialog, Drawer } from './chunk-P556H6EA.js';
+import { iconMarkup, registerIcon, injectStyles, iconEl, SESSION_PRE, SESSION_POST, SESSION_OFF, icon, categoricalColor } from './chunk-LJLZR44Y.js';
 
 // src/widget/timeframe.ts
 var UNIT_MS = {
@@ -192,6 +192,31 @@ var CSS = `
 .vela-lp-switch.on::after { transform: translateX(16px); background: var(--vela-selected-fg); }
 `;
 var GRID = 4;
+function layoutGridCanvas(doc) {
+  injectStyles(STYLE_ID, CSS, doc);
+  const el = doc.createElement("div");
+  el.className = "vela-lp-grid";
+  const squares = [];
+  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}`);
+      squares.push(sq);
+      el.appendChild(sq);
+    }
+  }
+  return { el, squares };
+}
+function paintLayoutGrid(squares, shape) {
+  for (const sq of squares) {
+    const on = shape !== null && Number(sq.dataset.r) < shape.rows && Number(sq.dataset.c) < shape.cols;
+    if (on) sq.dataset.on = "1";
+    else delete sq.dataset.on;
+  }
+}
 var LayoutPicker = class {
   constructor(opts) {
     this.squares = [];
@@ -235,19 +260,8 @@ var LayoutPicker = class {
       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);
-      }
-    }
+    const { el: grid, squares } = layoutGridCanvas(doc);
+    this.squares.push(...squares);
     layoutCol.appendChild(grid);
     this.presetsEl = doc.createElement("div");
     this.presetsEl.className = "vela-lp-presets";
@@ -347,13 +361,7 @@ var LayoutPicker = class {
   }
   /** 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;
-    }
+    paintLayoutGrid(this.squares, this.hover ?? this.opts.shape());
   }
   renderPresets() {
     const doc = this.doc;
@@ -420,7 +428,7 @@ var CSS2 = `
     font-size: var(--vela-font-size-md);
     flex: none;
 }
-.vela-widget-symbol, .vela-widget-tf, .vela-widget-style, .vela-widget-indicators {
+.vela-widget-symbol, .vela-widget-tf, .vela-widget-style, .vela-widget-indicators, .vela-widget-action-left {
     all: unset;
     display: inline-flex;
     align-items: center;
@@ -442,10 +450,10 @@ var CSS2 = `
     padding: 0 10px;
     gap: 7px;
 }
-.vela-widget-tf, .vela-widget-style, .vela-widget-indicators {
+.vela-widget-tf, .vela-widget-style, .vela-widget-indicators, .vela-widget-action-left {
     color: var(--vela-fg-bright);
 }
-.vela-widget-symbol:hover, .vela-widget-tf:hover, .vela-widget-style:hover, .vela-widget-indicators:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
+.vela-widget-symbol:hover, .vela-widget-tf:hover, .vela-widget-style:hover, .vela-widget-indicators:hover, .vela-widget-action-left:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
 .vela-widget-topbar .vela-icon { color: inherit; font-size: 16px; width: 16px; height: 16px; }
 /* Width is set in syncHairlines() to exactly one device pixel \u2014 a CSS 1px at
    fractional DPR (1.25, 1.5\u2026) straddles two physical pixels and siblings end
@@ -468,6 +476,8 @@ var CSS2 = `
     justify-content: center;
 }
 .vela-widget-actions { margin-left: auto; display: inline-flex; gap: var(--vela-space-1); }
+/* Left-aligned contributed actions \u2014 the primary-chrome cluster after the dropdowns. */
+.vela-widget-actions-left { display: inline-flex; align-items: center; gap: var(--vela-space-1); }
 /* The side-panel toggles, one per docked panel \u2014 a group so the dock can rebuild them
    without disturbing the tools around it. */
 .vela-widget-panels { display: inline-flex; align-items: center; gap: var(--vela-space-1); }
@@ -554,12 +564,17 @@ var Topbar = class {
     this.styleButton = doc.createElement("button");
     this.styleButton.className = "vela-widget-style";
     this.renderStyleButton(doc);
-    const indicatorsBtn = doc.createElement("button");
-    indicatorsBtn.className = "vela-widget-indicators";
-    indicatorsBtn.append(iconEl("indicators", doc), doc.createTextNode("Indicators"));
-    if (opts.onIndicatorsClick) indicatorsBtn.addEventListener("click", opts.onIndicatorsClick);
+    let indicatorsBtn = null;
+    if (opts.onIndicatorsClick) {
+      indicatorsBtn = doc.createElement("button");
+      indicatorsBtn.className = "vela-widget-indicators";
+      indicatorsBtn.append(iconEl("indicators", doc), doc.createTextNode("Indicators"));
+      indicatorsBtn.addEventListener("click", opts.onIndicatorsClick);
+    }
     this.actionsHost = doc.createElement("span");
     this.actionsHost.className = "vela-widget-actions";
+    this.leftActionsHost = doc.createElement("span");
+    this.leftActionsHost.className = "vela-widget-actions-left";
     this.panelsHost = doc.createElement("span");
     this.panelsHost.className = "vela-widget-panels";
     const tool = (cls, icon2, tip, onClick) => this.toolButton(cls, icon2, tip, onClick, this.tooltips);
@@ -587,7 +602,10 @@ var Topbar = class {
     };
     const leading = [this.symbolEl, sep(), this.tfButton, sep(), this.styleButton, sep()];
     if (this.layoutButton) leading.push(this.layoutButton, sep());
-    this.el.append(...leading, indicatorsBtn, sep(), this.undoBtn, this.redoBtn, this.actionsHost, this.alertsBtn, this.panelsHost, screenshotBtn);
+    if (indicatorsBtn) leading.push(indicatorsBtn, sep());
+    this.leftActionsSep = sep();
+    this.leftActionsSep.hidden = true;
+    this.el.append(...leading, this.leftActionsHost, this.leftActionsSep, this.undoBtn, this.redoBtn, this.actionsHost, this.alertsBtn, this.panelsHost, screenshotBtn);
     host.appendChild(this.el);
     this.onHairlineSync();
     this.hairlineRo = new ResizeObserver(this.onHairlineSync);
@@ -666,18 +684,22 @@ var Topbar = class {
   renderActions() {
     const ctx = this.opts.getContext?.();
     this.actionsHost.replaceChildren();
+    this.leftActionsHost.replaceChildren();
     const doc = this.actionsHost.ownerDocument;
     for (const action of widgetActions("topbar", ctx)) {
+      const left = action.align === "left";
       const b = doc.createElement("button");
-      b.className = "vela-widget-action";
+      b.className = left ? "vela-widget-action-left" : "vela-widget-action";
       if (action.icon) b.appendChild(iconEl(action.icon, doc));
       b.appendChild(doc.createTextNode(action.label));
       b.addEventListener("click", () => {
         const c = this.opts.getContext?.();
         if (c) action.run(c);
       });
-      this.actionsHost.appendChild(b);
+      (left ? this.leftActionsHost : this.actionsHost).appendChild(b);
     }
+    this.leftActionsSep.hidden = this.leftActionsHost.childElementCount === 0;
+    this.onHairlineSync();
   }
   setIndicatorCount(_n) {
   }
@@ -751,11 +773,12 @@ var Topbar = class {
     return this.opts.timeframes.map((tf) => ({ id: tf, label: timeframeLabel(tf), checked: tf === this.timeframe }));
   }
   styleItems() {
-    return priceStyleIds().map((id) => ({
+    return priceStyleIds().map((id, i) => ({
       id,
       label: priceStyleLabel(id),
       icon: priceStyleIcon(id),
-      checked: id === this.priceStyle
+      checked: id === this.priceStyle,
+      separatorBefore: i === BUILTIN_PRICE_STYLES.length
     }));
   }
 };
@@ -806,6 +829,7 @@ function tickerIconEl(doc, base, name, className) {
   }
   const img = doc.createElement("img");
   img.alt = "";
+  img.crossOrigin = "anonymous";
   img.src = cryptoIconUrl(key);
   img.style.cssText = "width:100%;height:100%;border-radius:50%;display:block;object-fit:cover;";
   img.addEventListener(
@@ -904,6 +928,59 @@ var CSS3 = `
  * Statusline constructor) \u2014 the stylesheet is document-global, so a bare container
  * class here would shift every chart on the page, including statusline-less ones. */
 .vela-has-statusline [data-vela-pane='price'] { transform: translateY(26px); }
+/* Mobile: two-line chip \u2014 logo / symbol / meta / market status on one aligned row, the
+ * bar change on the next. Full O/H/L/C stays hidden (too dense on a phone-width plot).
+ * GRID, not a wrapping flexbox: an absolutely positioned wrapping flex container sizes
+ * to the one-line sum of ALL segments (max-content), so its background used to stretch
+ * far past the market badge; a grid hugs the widest actual row. The meta column may
+ * shrink (it carries the ellipsis), the others wrap their content. */
+[data-layout='mobile'] .vela-statusline {
+    display: grid;
+    grid-template-columns: auto auto minmax(0, auto) auto;
+    justify-content: start;
+    align-items: center;
+    row-gap: 1px;
+    max-width: calc(100% - var(--vela-toolbar-gutter, 0px) - var(--vela-scale-gutter, 0px) - 24px);
+    font-size: var(--vela-font-size-sm);
+}
+[data-layout='mobile'] .vela-statusline .vela-sl-symbol {
+    font-size: var(--vela-font-size-md);
+    line-height: 1;
+}
+[data-layout='mobile'] .vela-statusline .vela-sl-meta {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1;
+}
+[data-layout='mobile'] .vela-statusline .vela-sl-avatar,
+[data-layout='mobile'] .vela-statusline .vela-sl-market { align-self: center; }
+[data-layout='mobile'] .vela-statusline .vela-sl-ohlc { display: none !important; }
+[data-layout='mobile'] .vela-statusline .vela-sl-change {
+    /* Second row, under the text column \u2014 the avatar keeps the first column. */
+    grid-column: 2 / -1;
+    font-size: var(--vela-font-size-sm);
+    line-height: 1.2;
+}
+[data-layout='mobile'] .vela-has-statusline [data-vela-pane='price'] { transform: translateY(40px); }
+/* FIT mode (multi-chart cells \u2014 see setFitMode): the line never wraps; segments that
+ * don't fit are HIDDEN by fit() (change first, then meta, then the market badge), so
+ * overflow:hidden only guards the transient between a resize and the next measure.
+ * Placed after the mobile block on purpose: same specificity, later wins. */
+.vela-statusline.vela-sl-fit {
+    display: flex; /* undo the mobile grid \u2014 fit mode is one flex row again */
+    flex-wrap: nowrap;
+    align-items: center;
+    max-width: calc(100% - var(--vela-toolbar-gutter, 0px) - var(--vela-scale-gutter, 0px) - 24px);
+    overflow: hidden;
+}
+.vela-statusline.vela-sl-fit .vela-sl-change {
+    flex-basis: auto;
+    padding-left: 0;
+}
+/* One row again \u2014 the mobile two-line shift doesn't apply in fit mode. */
+[data-layout='mobile'] .vela-sl-fit-host.vela-has-statusline [data-vela-pane='price'] { transform: translateY(26px); }
 `;
 function baseOfTicker(ticker) {
   return ticker.replace(/[-_/]?(USDT|USDC|USD1|USDS|BUSD|USD|EUR|PERP)$/i, "") || ticker;
@@ -956,11 +1033,15 @@ var Statusline = class {
     this.isUp = null;
     /** 'ohlc' for bar-shaped styles; 'value' (the single plotted close) for line styles. */
     this.readout = "ohlc";
+    /** Fit mode (multi-chart cells): one row, overflowing segments hidden — see {@link setFitMode}. */
+    this.fitMode = false;
+    this.fitRO = null;
     const doc = host.ownerDocument;
     injectStyles(STYLE_ID3, CSS3, doc);
     host.classList.add("vela-has-statusline");
     this.el = doc.createElement("div");
     this.el.className = "vela-statusline";
+    this.el.dataset.velaScreenshot = "1";
     const ticker = parseSymbol(symbol).ticker;
     this.avatarEl = tickerIconEl(doc, baseOfTicker(ticker), ticker, "vela-sl-avatar");
     this.symbolEl = doc.createElement("span");
@@ -986,6 +1067,52 @@ var Statusline = class {
     const fresh = tickerIconEl(this.el.ownerDocument, baseOfTicker(ticker), ticker, "vela-sl-avatar");
     this.avatarEl.replaceWith(fresh);
     this.avatarEl = fresh;
+    this.fit();
+  }
+  /**
+   * Multi-chart cells: keep the line on ONE row whatever the cell width — never wrap.
+   * Segments that don't fit are hidden outright rather than clipped mid-glyph, least
+   * important first: OHLC, then the bar change, the venue/timeframe meta, and the
+   * market badge; the logo + ticker always stay. Re-fits live on host resizes.
+   */
+  setFitMode(on) {
+    if (on === this.fitMode) return;
+    this.fitMode = on;
+    this.el.classList.toggle("vela-sl-fit", on);
+    this.host.classList.toggle("vela-sl-fit-host", on);
+    if (on) {
+      if (typeof ResizeObserver !== "undefined" && !this.fitRO) {
+        this.fitRO = new ResizeObserver(() => this.fit());
+        this.fitRO.observe(this.host);
+      }
+      this.fit();
+    } else {
+      this.fitRO?.disconnect();
+      this.fitRO = null;
+      this.syncParts();
+    }
+  }
+  /** Project the parts config onto the segments (the baseline fit() prunes from). */
+  syncParts() {
+    this.symbolEl.style.display = this.parts.name ? "" : "none";
+    this.marketEl.style.display = this.parts.market ? "" : "none";
+    this.ohlcEl.style.display = this.parts.ohlc ? "" : "none";
+    this.changeEl.style.display = this.parts.change ? "" : "none";
+  }
+  /** Hide overflowing segments until the row fits its max-width (fit mode only). */
+  fit() {
+    if (!this.fitMode) return;
+    this.syncParts();
+    const order = [
+      [this.ohlcEl, this.parts.ohlc],
+      [this.changeEl, this.parts.change],
+      [this.metaEl, true],
+      [this.marketEl, this.parts.market]
+    ];
+    for (const [el, shown] of order) {
+      if (this.el.scrollWidth <= this.el.clientWidth) break;
+      if (shown) el.style.display = "none";
+    }
   }
   /** Shape + color the value readout after the active price style: its own up/down
    *  colors (candle bodies, bar ticks, the line color, …), the direction rule that
@@ -1005,6 +1132,7 @@ var Statusline = class {
   /** The "· BINANCE · 1h" segment after the symbol — venue first, then resolution. */
   setMeta(timeframe, provider) {
     this.metaEl.textContent = `${provider ? `\xB7 ${provider.toUpperCase()} ` : ""}\xB7 ${timeframeLabel(timeframe)}`;
+    this.fit();
   }
   /** Dress the market badge for a session state: its icon, tinted circle, and the
    *  hover label. Callers with no session model leave the constructor's 'open'. */
@@ -1016,10 +1144,8 @@ var Statusline = class {
   }
   setPartVisible(part, visible) {
     this.parts[part] = visible;
-    this.symbolEl.style.display = this.parts.name ? "" : "none";
-    this.marketEl.style.display = this.parts.market ? "" : "none";
-    this.ohlcEl.style.display = this.parts.ohlc ? "" : "none";
-    this.changeEl.style.display = this.parts.change ? "" : "none";
+    this.syncParts();
+    this.fit();
   }
   partVisible(part) {
     return this.parts[part];
@@ -1043,8 +1169,10 @@ var Statusline = class {
   }
   destroy() {
     this.detach();
+    this.fitRO?.disconnect();
+    this.fitRO = null;
     this.marketTip.destroy();
-    this.host.classList.remove("vela-has-statusline");
+    this.host.classList.remove("vela-has-statusline", "vela-sl-fit-host");
     this.el.remove();
   }
   detach() {
@@ -1076,11 +1204,12 @@ var Statusline = class {
     this.changeEl.textContent = fmtChange(bar.open, bar.close);
     this.changeEl.dataset.dir = up ? "up" : "down";
     this.changeEl.style.color = ink;
+    this.fit();
   }
 };
 
 // src/widget/watermark.ts
-var MAX_FONT_PX = 72;
+var MAX_FONT_PX = 36;
 var MIN_FONT_PX = 12;
 var FILL = 0.9;
 var STYLE_ID4 = "vela-widget-watermark";
@@ -1116,9 +1245,16 @@ function watermarkFontPx(availPx, textPxAtMax) {
 var Watermark = class {
   constructor(host, symbol, timeframe) {
     this.resizeObserver = null;
+    /** The host's visibility preference (the persisted watermark toggle). */
+    this.shown = true;
+    /** A bar load is in flight with nothing painted — the loading affordance owns the
+     *  canvas, so the mark stays out of its way. Starts true: the FIRST `load:start`
+     *  fires during chart construction, before any subscriber can see it. */
+    this.loading = true;
     injectStyles(STYLE_ID4, CSS4, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-watermark";
+    this.el.dataset.velaScreenshot = "under";
     this.text = host.ownerDocument.createElement("span");
     this.el.appendChild(this.text);
     host.appendChild(this.el);
@@ -1127,9 +1263,19 @@ var Watermark = class {
       this.resizeObserver.observe(this.el);
     }
     this.update(symbol, timeframe);
+    this.sync();
   }
   setVisible(visible) {
-    this.el.style.display = visible ? "" : "none";
+    this.shown = visible;
+    this.sync();
+  }
+  /** Loading and the watermark never share the canvas — hidden while a load is up. */
+  setLoading(loading) {
+    this.loading = loading;
+    this.sync();
+  }
+  sync() {
+    this.el.style.display = this.shown && !this.loading ? "" : "none";
   }
   update(symbol, timeframe) {
     this.text.textContent = symbol ? `${parseSymbol(symbol).ticker} \xB7 ${timeframeLabel(timeframe)}` : "";
@@ -1406,6 +1552,13 @@ var CSS6 = `
     outline: none;
 }
 .vela-sp-tabs { display: flex; gap: 14px; margin: 12px 2px 6px; border-bottom: 1px solid var(--vela-border); padding-bottom: 8px; }
+/* Mobile (fullscreen dialog): the asset-class strip scrolls sideways instead of
+   overflowing the body, and the result list stops capping itself \u2014 the body owns
+   the scrolling in the fullscreen presentation. */
+[data-layout='mobile'] .vela-sp-tabs { overflow-x: auto; scrollbar-width: none; gap: 6px; }
+[data-layout='mobile'] .vela-sp-tabs::-webkit-scrollbar { display: none; }
+[data-layout='mobile'] .vela-sp-tab { flex: none; padding: 7px 10px; }
+[data-layout='mobile'] .vela-sp-list { max-height: none; }
 .vela-sp-tab {
     all: unset;
     padding: 3px 10px;
@@ -2881,6 +3034,9 @@ var ObjectTree = class extends SidePanel {
         this.refresh();
       })
     ];
+    if (chart.renderer.supportsIndicatorSettings) {
+      items.push(b.entry("Indicator settings", "gear", () => chart.renderer.openIndicatorSettings(row.id)));
+    }
     if (chart.panes.supported) {
       const moves = this.moveItems(b, pass, row.id, paneId);
       if (moves.length > 0) items.push(b.submenu("Move to", "move-vertical", moves));
@@ -3199,6 +3355,11 @@ var PanelDock = class {
   get openId() {
     return this.entries.find((e) => e.panel.open)?.id ?? null;
   }
+  /** The docked panels in dock order — what a non-topbar chrome (the mobile
+   *  three-dots drawer) lists so every panel stays reachable there too. */
+  list() {
+    return this.entries.map((e) => ({ id: e.id, title: e.title, icon: e.icon }));
+  }
   /** The dock's persistable state, or null when there is nothing worth saving. */
   getState() {
     const out = {};
@@ -3602,6 +3763,9 @@ var CSS10 = `
 .vela-ip-searchrow .vela-icon { color: var(--vela-fg-muted); }
 .vela-ip-search { flex: 1; background: transparent; color: var(--vela-fg); border: none; font-size: 14px; outline: none; }
 .vela-ip-list { max-height: 50vh; overflow: auto; min-width: 380px; }
+/* Mobile (fullscreen dialog): no width floor \u2014 380px would overflow a phone \u2014
+   and no height cap; the fullscreen body owns the scrolling. */
+[data-layout='mobile'] .vela-ip-list { min-width: 0; max-height: none; }
 .vela-ip-list::-webkit-scrollbar { width: 8px; }
 .vela-ip-list::-webkit-scrollbar-thumb { background: var(--vela-scroll); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
 .vela-ip-group {
@@ -3683,7 +3847,7 @@ var IndicatorPicker = class {
         if (open) {
           this.search.value = "";
           this.refresh();
-          setTimeout(() => this.search.focus(), 0);
+          if (!this.search.closest('[data-layout="mobile"]')) setTimeout(() => this.search.focus(), 0);
         }
         opts.onOpenChange?.(open);
       }
@@ -3995,6 +4159,7 @@ function sanitizeCell(raw) {
   if (typeof c.bars === "number" && Number.isFinite(c.bars) && c.bars > 0) out.bars = c.bars;
   if (typeof c.watermark === "boolean") out.watermark = c.watermark;
   if (typeof c.indicatorTitles === "boolean") out.indicatorTitles = c.indicatorTitles;
+  if (typeof c.indicatorValues === "boolean") out.indicatorValues = c.indicatorValues;
   if (c.rendererConfig != null && typeof c.rendererConfig === "object") out.rendererConfig = c.rendererConfig;
   if (c.drawings != null && typeof c.drawings === "object") out.drawings = c.drawings;
   const ind = c.indicators;
@@ -4101,6 +4266,1156 @@ function indicatorLedger(i) {
   };
 }
 
+// src/widget/layout-mode.ts
+var MOBILE_BREAKPOINT_PX = 640;
+var COARSE_BREAKPOINT_PX = 920;
+function resolveLayoutMode(option, width, coarsePointer) {
+  if (option !== "auto") return option;
+  if (width <= 0) return "desktop";
+  if (width < MOBILE_BREAKPOINT_PX) return "mobile";
+  if (coarsePointer && width < COARSE_BREAKPOINT_PX) return "mobile";
+  return "desktop";
+}
+var LayoutModeController = class {
+  constructor(el, option = "auto") {
+    this.el = el;
+    this.option = option;
+    this.listeners = /* @__PURE__ */ new Set();
+    this.ro = null;
+    this.mql = null;
+    this.onMediaChange = () => this.evaluate();
+    const win = el.ownerDocument.defaultView;
+    if (win && typeof win.matchMedia === "function") {
+      this.mql = win.matchMedia("(pointer: coarse)");
+      if (typeof this.mql.addEventListener === "function") this.mql.addEventListener("change", this.onMediaChange);
+    }
+    this.mode = resolveLayoutMode(option, el.getBoundingClientRect().width, this.mql?.matches ?? false);
+    el.dataset.layout = this.mode;
+    if (option === "auto" && win && typeof win.ResizeObserver === "function") {
+      this.ro = new win.ResizeObserver(() => this.evaluate());
+      this.ro.observe(el);
+    }
+  }
+  get current() {
+    return this.mode;
+  }
+  /** Subscribe to mode transitions (fires with the NEW mode). */
+  onChange(cb) {
+    this.listeners.add(cb);
+    return () => this.listeners.delete(cb);
+  }
+  destroy() {
+    this.ro?.disconnect();
+    this.ro = null;
+    if (this.mql && typeof this.mql.removeEventListener === "function") this.mql.removeEventListener("change", this.onMediaChange);
+    this.mql = null;
+    this.listeners.clear();
+  }
+  evaluate() {
+    const next = resolveLayoutMode(this.option, this.el.getBoundingClientRect().width, this.mql?.matches ?? false);
+    if (next === this.mode) return;
+    this.mode = next;
+    this.el.dataset.layout = next;
+    for (const cb of [...this.listeners]) cb(next);
+  }
+};
+
+// src/widget/mobile-bar.ts
+var STYLE_ID12 = "vela-widget-mobilebar";
+var CSS12 = `
+.vela-mobilebar {
+    display: none;
+    align-items: stretch;
+    gap: 2px;
+    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
+    border-top: 1px solid var(--vela-border);
+    color: var(--vela-fg-muted);
+    flex: none;
+}
+[data-layout='mobile'] .vela-mobilebar { display: flex; }
+[data-layout='mobile'] .vela-widget-topbar { display: none; }
+[data-layout='mobile'] .vela-widget-bottombar { display: none; }
+.vela-mb-item {
+    all: unset;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    border-radius: 6px;
+    cursor: pointer;
+    color: var(--vela-fg-bright);
+    font-size: 13px;
+    font-weight: 600;
+    -webkit-tap-highlight-color: transparent;
+}
+.vela-mb-item:active { background: var(--vela-hover); }
+.vela-mb-item .vela-icon { font-size: 18px; width: 18px; height: 18px; }
+/* Left-aligned contributed actions get their own stops (the built-in indicators
+   slot) \u2014 the wrapper is layout-transparent so each stop flexes like a sibling. */
+.vela-mb-actions { display: contents; }
+.vela-mb-symbol {
+    flex: 1.6 1 0;
+    font-size: 14px;
+    letter-spacing: 0.3px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    line-height: 44px;
+    text-align: center;
+}
+`;
+var MobileBar = class {
+  constructor(host, opts) {
+    this.opts = opts;
+    const doc = host.ownerDocument;
+    injectStyles(STYLE_ID12, CSS12, doc);
+    this.el = doc.createElement("div");
+    this.el.className = "vela-mobilebar";
+    const item = (cls, label, onClick, icon2) => {
+      const b = doc.createElement("button");
+      b.className = `vela-mb-item ${cls}`;
+      b.setAttribute("aria-label", label);
+      if (icon2) b.appendChild(iconEl(icon2, doc));
+      b.addEventListener("click", onClick);
+      return b;
+    };
+    this.symbolEl = item("vela-mb-symbol", "Symbol search", opts.onSymbolClick);
+    this.symbolEl.textContent = parseSymbol(opts.symbol).ticker;
+    this.tfEl = item("vela-mb-tf", "Timeframe", opts.onTimeframeClick);
+    this.tfEl.textContent = timeframeLabel(opts.timeframe);
+    const onIndicators = opts.onIndicatorsClick;
+    const indicators = onIndicators ? item("vela-mb-indicators", "Indicators", onIndicators, "indicators") : null;
+    this.actionsHost = doc.createElement("span");
+    this.actionsHost.className = "vela-mb-actions";
+    const drawings = item("vela-mb-drawings", "Drawings", opts.onDrawingsClick, "pen");
+    const more = item("vela-mb-more", "More", opts.onMoreClick, "kebab");
+    const settings = item("vela-mb-settings", "Chart settings", opts.onSettingsClick, "gear");
+    this.el.append(this.symbolEl, this.tfEl, ...indicators ? [indicators] : [], this.actionsHost, drawings, more, settings);
+    host.appendChild(this.el);
+    this.renderActions();
+  }
+  /** Re-project the left-aligned contributed actions as icon-only stops in the
+   *  indicators slot (call after registrations change). Right-aligned actions stay
+   *  in the three-dots drawer — a primary stop is what `align: 'left'` opts into. */
+  renderActions() {
+    const ctx = this.opts.getContext?.();
+    if (!ctx) return;
+    const doc = this.el.ownerDocument;
+    this.actionsHost.replaceChildren();
+    for (const action of widgetActions("topbar", ctx).filter((a) => a.align === "left")) {
+      const b = doc.createElement("button");
+      b.className = "vela-mb-item";
+      b.setAttribute("aria-label", action.label);
+      if (action.icon) b.appendChild(iconEl(action.icon, doc));
+      else b.appendChild(doc.createTextNode(action.label));
+      b.addEventListener("click", () => {
+        const c = this.opts.getContext?.();
+        if (c) action.run(c);
+      });
+      this.actionsHost.appendChild(b);
+    }
+  }
+  setSymbol(symbol) {
+    this.symbolEl.textContent = parseSymbol(symbol).ticker;
+  }
+  setTimeframe(tf) {
+    this.tfEl.textContent = timeframeLabel(tf);
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+
+// src/widget/timeframe-drawer.ts
+var STYLE_ID13 = "vela-widget-tf-drawer";
+var CSS13 = `
+.vela-tfd-heading {
+    padding: 4px 2px 8px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+    color: var(--vela-fg-bright);
+}
+.vela-tfd-heading + .vela-tfd-ranges,
+.vela-tfd-heading + .vela-tfd-grid { padding-top: 0; }
+.vela-tfd-ranges {
+    display: flex;
+    gap: 6px;
+    overflow-x: auto;
+    scrollbar-width: none;
+    /* Sideways-scrolling strip: keep its touches native scroll (the drawer body is pan-y). */
+    touch-action: pan-x;
+    padding: 0 2px 14px;
+}
+.vela-tfd-ranges::-webkit-scrollbar { display: none; }
+.vela-tfd-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
+    gap: 6px;
+    padding-bottom: 4px;
+}
+.vela-tfd-chip {
+    all: unset;
+    min-height: 40px;
+    padding: 0 14px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    border: 1px solid var(--vela-border);
+    border-radius: 8px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--vela-fg);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+.vela-tfd-chip:active { background: var(--vela-hover); }
+.vela-tfd-chip[data-active='1'] {
+    color: var(--vela-fg-bright);
+    border-color: var(--vela-fg-bright);
+    background: var(--vela-hover);
+}
+`;
+var TimeframeDrawer = class {
+  constructor(opts) {
+    this.opts = opts;
+    this.rangeChips = /* @__PURE__ */ new Map();
+    this.tfChips = /* @__PURE__ */ new Map();
+    const doc = opts.host.ownerDocument;
+    injectStyles(STYLE_ID13, CSS13, doc);
+    this.drawer = new Drawer({ host: opts.host, onOpenChange: opts.onOpenChange });
+    const rangeHeading = doc.createElement("div");
+    rangeHeading.className = "vela-tfd-heading";
+    rangeHeading.textContent = "Date Range";
+    const ranges = doc.createElement("div");
+    ranges.className = "vela-tfd-ranges";
+    for (const preset of opts.ranges) {
+      const chip = doc.createElement("button");
+      chip.className = "vela-tfd-chip";
+      chip.textContent = preset.id;
+      chip.addEventListener("click", () => {
+        opts.onRange(preset);
+        this.drawer.hide();
+      });
+      this.rangeChips.set(preset.id, chip);
+      ranges.appendChild(chip);
+    }
+    const tfHeading = doc.createElement("div");
+    tfHeading.className = "vela-tfd-heading";
+    tfHeading.textContent = "Timeframes";
+    const grid = doc.createElement("div");
+    grid.className = "vela-tfd-grid";
+    for (const tf of opts.timeframes) {
+      const chip = doc.createElement("button");
+      chip.className = "vela-tfd-chip";
+      chip.textContent = timeframeLabel(tf);
+      chip.addEventListener("click", () => {
+        opts.onTimeframe(tf);
+        this.drawer.hide();
+      });
+      this.tfChips.set(tf, chip);
+      grid.appendChild(chip);
+    }
+    this.drawer.body.append(rangeHeading, ranges, tfHeading, grid);
+  }
+  open() {
+    const tf = this.opts.currentTimeframe();
+    const range = this.opts.activeRange();
+    for (const [id, chip] of this.rangeChips) {
+      if (range !== null && id === range) chip.dataset.active = "1";
+      else delete chip.dataset.active;
+    }
+    for (const [id, chip] of this.tfChips) {
+      if (range === null && id === tf) chip.dataset.active = "1";
+      else delete chip.dataset.active;
+    }
+    this.drawer.show();
+  }
+  close() {
+    this.drawer.hide();
+  }
+  destroy() {
+    this.drawer.destroy();
+  }
+};
+
+// src/widget/drawings-drawer.ts
+var STYLE_ID14 = "vela-widget-drawings-drawer";
+var CSS14 = `
+/* Search + tabs stay pinned while the tool list scrolls underneath. */
+.vela-dd-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--vela-surface);
+    padding-top: 2px;
+}
+.vela-dd-search {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    margin: 0 2px 8px;
+    border: 1px solid var(--vela-border);
+    border-radius: 8px;
+    color: var(--vela-fg-muted);
+    background: var(--vela-surface);
+}
+.vela-dd-search input {
+    all: unset;
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: 14px;
+    color: var(--vela-fg-bright);
+}
+.vela-dd-tabs {
+    display: flex;
+    gap: 4px;
+    overflow-x: auto;
+    scrollbar-width: none;
+    /* The strip scrolls sideways itself \u2014 its touches are native scroll, not tab swipes
+       (the drawer body is pan-y so everywhere ELSE a sideways move swipes the tabs). */
+    touch-action: pan-x;
+    padding: 0 2px 8px;
+    border-bottom: 1px solid var(--vela-border);
+    background: var(--vela-surface);
+}
+.vela-dd-tabs::-webkit-scrollbar { display: none; }
+.vela-dd-tab {
+    all: unset;
+    flex: none;
+    min-height: 36px;
+    padding: 0 12px;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 8px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--vela-fg-muted);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+.vela-dd-tab[data-active='1'] { color: var(--vela-fg-bright); background: var(--vela-hover); }
+.vela-dd-list { padding: 6px 0 4px; }
+.vela-dd-section {
+    padding: 10px 2px 6px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+    color: var(--vela-fg-muted);
+}
+.vela-dd-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 44px;
+    padding: 0 2px;
+    border-radius: 8px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+.vela-dd-row:active { background: var(--vela-hover); }
+.vela-dd-row[data-active='1'] { background: var(--vela-hover); }
+.vela-dd-row[data-active='1'] .vela-dd-label { color: var(--vela-accent); }
+.vela-dd-glyph { flex: none; width: 24px; height: 24px; color: var(--vela-fg); }
+.vela-dd-glyph svg { width: 24px; height: 24px; }
+.vela-dd-label { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--vela-fg-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vela-dd-star {
+    all: unset;
+    flex: none;
+    width: 40px;
+    height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    color: var(--vela-fg-muted);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+.vela-dd-star[data-on='1'] { color: var(--vela-highlight); }
+.vela-dd-empty { padding: 18px 2px; color: var(--vela-fg-muted); font-size: 13px; }
+`;
+var DrawingsDrawer = class {
+  constructor(opts) {
+    this.opts = opts;
+    this.definition = { groups: [] };
+    this.activeGroup = "";
+    const doc = opts.host.ownerDocument;
+    injectStyles(STYLE_ID14, CSS14, doc);
+    this.drawer = new Drawer({
+      host: opts.host,
+      title: "Drawings",
+      onOpenChange: opts.onOpenChange,
+      // Swiping across the tool list pages through the group tabs.
+      onSwipe: (dir) => this.stepGroup(dir === "left" ? 1 : -1)
+    });
+    const sticky = doc.createElement("div");
+    sticky.className = "vela-dd-sticky";
+    const search = doc.createElement("div");
+    search.className = "vela-dd-search";
+    search.appendChild(iconEl("search", doc));
+    this.input = doc.createElement("input");
+    this.input.type = "text";
+    this.input.placeholder = "Search tools\u2026";
+    this.input.addEventListener("input", () => this.renderList());
+    search.appendChild(this.input);
+    this.tabs = doc.createElement("div");
+    this.tabs.className = "vela-dd-tabs";
+    sticky.append(search, this.tabs);
+    this.list = doc.createElement("div");
+    this.list.className = "vela-dd-list";
+    this.drawer.body.append(sticky, this.list);
+  }
+  open() {
+    this.definition = this.opts.toolbar();
+    if (!this.definition.groups.some((g) => g.id === this.activeGroup)) this.activeGroup = this.definition.groups[0]?.id ?? "";
+    this.input.value = "";
+    this.renderTabs();
+    this.renderList();
+    this.drawer.show();
+  }
+  close() {
+    this.drawer.hide();
+  }
+  destroy() {
+    this.drawer.destroy();
+  }
+  /** Move the active group tab by `step` (a horizontal swipe on the list). Search mode
+   *  shows the flattened results — no tabs to page through, so the swipe is inert. */
+  stepGroup(step) {
+    if (this.input.value.trim()) return;
+    const groups = this.definition.groups;
+    const next = groups[groups.findIndex((g) => g.id === this.activeGroup) + step];
+    if (!next) return;
+    this.activeGroup = next.id;
+    this.renderTabs();
+    this.renderList();
+    this.tabs.querySelector('[data-active="1"]')?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }
+  renderTabs() {
+    const doc = this.tabs.ownerDocument;
+    this.tabs.replaceChildren();
+    for (const group of this.definition.groups) {
+      const tab = doc.createElement("button");
+      tab.className = "vela-dd-tab";
+      tab.textContent = group.label;
+      if (group.id === this.activeGroup) tab.dataset.active = "1";
+      tab.addEventListener("click", () => {
+        this.activeGroup = group.id;
+        this.input.value = "";
+        this.renderTabs();
+        this.renderList();
+      });
+      this.tabs.appendChild(tab);
+    }
+  }
+  renderList() {
+    const doc = this.list.ownerDocument;
+    this.list.replaceChildren();
+    const query = this.input.value.trim().toLowerCase();
+    const active = this.opts.currentTool();
+    const section = (label) => {
+      const el = doc.createElement("div");
+      el.className = "vela-dd-section";
+      el.textContent = label;
+      this.list.appendChild(el);
+    };
+    const row = (tool) => {
+      const el = doc.createElement("div");
+      el.className = "vela-dd-row";
+      if (tool.type === active) el.dataset.active = "1";
+      const glyph = doc.createElement("span");
+      glyph.className = "vela-dd-glyph";
+      glyph.innerHTML = tool.icon;
+      const label = doc.createElement("span");
+      label.className = "vela-dd-label";
+      label.textContent = tool.label;
+      const star = doc.createElement("button");
+      star.className = "vela-dd-star";
+      const paintStar = (on) => {
+        star.replaceChildren(iconEl(on ? "star-filled" : "star", doc));
+        if (on) star.dataset.on = "1";
+        else delete star.dataset.on;
+      };
+      paintStar(this.opts.isFavorite(tool.type));
+      star.setAttribute("aria-label", `Favorite ${tool.label}`);
+      star.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const on = !this.opts.isFavorite(tool.type);
+        this.opts.onFavorite(tool.type, on);
+        paintStar(on);
+      });
+      el.append(glyph, label, star);
+      el.addEventListener("click", () => {
+        this.opts.onSelect(tool.type);
+        this.drawer.hide();
+      });
+      this.list.appendChild(el);
+    };
+    if (query) {
+      let any = false;
+      for (const group2 of this.definition.groups) {
+        const hits = group2.tools.filter((t) => t.label.toLowerCase().includes(query));
+        if (hits.length === 0) continue;
+        any = true;
+        section(group2.label);
+        for (const tool of hits) row(tool);
+      }
+      if (!any) {
+        const empty = doc.createElement("div");
+        empty.className = "vela-dd-empty";
+        empty.textContent = "No tools match.";
+        this.list.appendChild(empty);
+      }
+      return;
+    }
+    const group = this.definition.groups.find((g) => g.id === this.activeGroup);
+    if (!group) return;
+    if (group.sections && group.sections.length > 0) {
+      for (const s of group.sections) {
+        section(s.label);
+        for (const tool of s.tools) row(tool);
+      }
+    } else {
+      for (const tool of group.tools) row(tool);
+    }
+  }
+};
+
+// src/widget/more-drawer.ts
+var STYLE_ID15 = "vela-widget-more-drawer";
+var CSS15 = `
+.vela-md-actions {
+    display: flex;
+    gap: 6px;
+    padding: 2px 2px 10px;
+    border-bottom: 1px solid var(--vela-border);
+}
+.vela-md-action {
+    all: unset;
+    flex: 1 1 0;
+    min-height: 48px;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    border-radius: 8px;
+    font-size: 11px;
+    color: var(--vela-fg);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+.vela-md-action:active { background: var(--vela-hover); }
+.vela-md-action:disabled { opacity: 0.35; cursor: default; }
+.vela-md-action .vela-icon { font-size: 17px; width: 17px; height: 17px; }
+.vela-md-list { padding: 6px 0 4px; }
+.vela-md-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 46px;
+    padding: 0 2px;
+    border-radius: 8px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+.vela-md-row:active { background: var(--vela-hover); }
+.vela-md-row[data-checked='1'] { background: var(--vela-hover-strong); }
+.vela-md-row .vela-icon { flex: none; font-size: 17px; width: 17px; height: 17px; color: var(--vela-fg-muted); }
+.vela-md-row-label { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--vela-fg-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vela-md-row-value { flex: none; font-size: 13px; color: var(--vela-fg-muted); }
+.vela-md-back {
+    all: unset;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 42px;
+    padding: 0 2px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--vela-fg-bright);
+    cursor: pointer;
+    border-bottom: 1px solid var(--vela-border);
+    width: 100%;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+}
+/* The layout sub-view's grid canvas, centered and touch-sized (the base .vela-lp-grid
+   squares are popover-sized for a mouse). */
+.vela-md-gridwrap { display: flex; justify-content: center; padding: 14px 0 10px; }
+.vela-md-gridwrap .vela-lp-grid { grid-template-columns: repeat(4, 44px); grid-auto-rows: 44px; gap: 8px; }
+.vela-md-section {
+    padding: 12px 2px 4px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+    color: var(--vela-fg-muted);
+}
+.vela-md-empty { padding: 18px 2px; color: var(--vela-fg-muted); font-size: 13px; }
+`;
+var MoreDrawer = class {
+  constructor(opts) {
+    this.opts = opts;
+    this.view = "main";
+    injectStyles(STYLE_ID15, CSS15, opts.host.ownerDocument);
+    this.drawer = new Drawer({ host: opts.host, onOpenChange: opts.onOpenChange });
+  }
+  open() {
+    this.view = "main";
+    this.render();
+    this.drawer.show();
+  }
+  close() {
+    this.drawer.hide();
+  }
+  destroy() {
+    this.drawer.destroy();
+  }
+  show(view) {
+    this.view = view;
+    this.render();
+  }
+  render() {
+    const doc = this.drawer.body.ownerDocument;
+    this.drawer.body.replaceChildren();
+    if (this.view !== "main") {
+      const back = doc.createElement("button");
+      back.className = "vela-md-back";
+      back.appendChild(iconEl("chevron-left", doc));
+      back.appendChild(doc.createTextNode(this.view === "style" ? "Chart type" : this.view === "layout" ? "Layout" : "Alerts"));
+      back.addEventListener("click", () => this.show("main"));
+      this.drawer.body.appendChild(back);
+    }
+    if (this.view === "main") this.renderMain(doc);
+    else if (this.view === "style") this.renderStyle(doc);
+    else if (this.view === "layout") this.renderLayout(doc);
+    else this.renderAlerts(doc);
+  }
+  row(doc, label, opts) {
+    const el = doc.createElement("div");
+    el.className = "vela-md-row";
+    if (opts.icon) el.appendChild(iconEl(opts.icon, doc));
+    const text = doc.createElement("span");
+    text.className = "vela-md-row-label";
+    text.textContent = label;
+    el.appendChild(text);
+    if (opts.value) {
+      const value = doc.createElement("span");
+      value.className = "vela-md-row-value";
+      value.textContent = opts.value;
+      el.appendChild(value);
+    }
+    if (opts.checked) el.dataset.checked = "1";
+    if (opts.chevron) el.appendChild(iconEl("chevron-right", doc));
+    el.addEventListener("click", opts.onClick);
+    return el;
+  }
+  renderMain(doc) {
+    const actions = doc.createElement("div");
+    actions.className = "vela-md-actions";
+    const action = (icon2, label, enabled, run) => {
+      const b = doc.createElement("button");
+      b.className = "vela-md-action";
+      b.disabled = !enabled;
+      b.appendChild(iconEl(icon2, doc));
+      b.appendChild(doc.createTextNode(label));
+      b.addEventListener("click", () => {
+        run();
+        this.drawer.hide();
+      });
+      actions.appendChild(b);
+    };
+    action("undo", "Undo", this.opts.canUndo(), this.opts.onUndo);
+    action("redo", "Redo", this.opts.canRedo(), this.opts.onRedo);
+    action("camera", "Screenshot", true, this.opts.onScreenshot);
+    this.drawer.body.appendChild(actions);
+    const list = doc.createElement("div");
+    list.className = "vela-md-list";
+    const current = this.opts.priceStyles().find((s) => s.id === this.opts.priceStyle());
+    list.appendChild(this.row(doc, "Chart type", { icon: "style-line", value: current?.label, chevron: true, onClick: () => this.show("style") }));
+    if (this.opts.layout) {
+      const shape = this.opts.layout.shape();
+      const value = shape ? `${shape.cols} \xD7 ${shape.rows}` : this.opts.layout.presets().find((p) => p.checked)?.label;
+      list.appendChild(this.row(doc, "Layout", { icon: "layout", value, chevron: true, onClick: () => this.show("layout") }));
+    }
+    for (const panel of this.opts.panels()) {
+      list.appendChild(
+        this.row(doc, panel.title, {
+          icon: panel.icon,
+          onClick: () => {
+            this.opts.onTogglePanel(panel.id);
+            this.drawer.hide();
+          }
+        })
+      );
+    }
+    const alertCount = this.opts.alerts().length;
+    list.appendChild(this.row(doc, "Alerts", { icon: "bell", value: alertCount > 0 ? String(alertCount) : void 0, chevron: true, onClick: () => this.show("alerts") }));
+    for (const act of this.opts.actions()) {
+      list.appendChild(
+        this.row(doc, act.label, {
+          icon: act.icon,
+          onClick: () => {
+            act.run();
+            this.drawer.hide();
+          }
+        })
+      );
+    }
+    this.drawer.body.appendChild(list);
+  }
+  renderStyle(doc) {
+    const list = doc.createElement("div");
+    list.className = "vela-md-list";
+    const current = this.opts.priceStyle();
+    for (const style of this.opts.priceStyles()) {
+      list.appendChild(
+        this.row(doc, style.label, {
+          icon: style.icon,
+          checked: style.id === current,
+          onClick: () => {
+            this.opts.onPriceStyle(style.id);
+            this.drawer.hide();
+          }
+        })
+      );
+    }
+    this.drawer.body.appendChild(list);
+  }
+  renderLayout(doc) {
+    const layout = this.opts.layout;
+    if (!layout) return;
+    const list = doc.createElement("div");
+    list.className = "vela-md-list";
+    const wrap = doc.createElement("div");
+    wrap.className = "vela-md-gridwrap";
+    const { el: grid, squares } = layoutGridCanvas(doc);
+    paintLayoutGrid(squares, layout.shape());
+    grid.addEventListener("click", (e) => {
+      const sq = e.target?.closest?.(".vela-lp-sq");
+      if (!(sq instanceof HTMLButtonElement)) return;
+      layout.onSelectGrid(Number(sq.dataset.r) + 1, Number(sq.dataset.c) + 1);
+      this.drawer.hide();
+    });
+    wrap.appendChild(grid);
+    list.appendChild(wrap);
+    for (const preset of layout.presets()) {
+      list.appendChild(
+        this.row(doc, preset.label, {
+          checked: preset.checked,
+          onClick: () => {
+            layout.onSelectPreset(preset.id);
+            this.drawer.hide();
+          }
+        })
+      );
+    }
+    const syncs = layout.syncs?.() ?? [];
+    if (syncs.length > 0) {
+      const heading = doc.createElement("div");
+      heading.className = "vela-md-section";
+      heading.textContent = "Sync";
+      list.appendChild(heading);
+      for (const s of syncs) {
+        list.appendChild(
+          this.row(doc, s.label, {
+            checked: s.checked,
+            onClick: () => {
+              layout.onToggleSync?.(s.id);
+              this.render();
+            }
+          })
+        );
+      }
+    }
+    this.drawer.body.appendChild(list);
+  }
+  renderAlerts(doc) {
+    const alerts = this.opts.alerts();
+    if (alerts.length === 0) {
+      const empty = doc.createElement("div");
+      empty.className = "vela-md-empty";
+      empty.textContent = "No alerts yet.";
+      this.drawer.body.appendChild(empty);
+      return;
+    }
+    const list = doc.createElement("div");
+    list.className = "vela-md-list";
+    for (const a of alerts) {
+      list.appendChild(this.row(doc, `${a.title}: ${a.message}`, { value: new Date(a.time).toLocaleTimeString(), onClick: () => void 0 }));
+    }
+    this.drawer.body.appendChild(list);
+  }
+};
+
+// src/widget/timezone-drawer.ts
+var STYLE_ID16 = "vela-widget-timezone-drawer";
+var CSS16 = `
+.vela-tzd-list { padding: 2px 0 4px; }
+.vela-tzd-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 46px;
+    padding: 0 2px;
+    border-radius: 8px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+.vela-tzd-row:active { background: var(--vela-hover); }
+.vela-tzd-row-label { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--vela-fg-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vela-tzd-row .vela-icon { flex: none; color: var(--vela-fg-bright); }
+`;
+var TimezoneDrawer = class {
+  constructor(opts) {
+    this.opts = opts;
+    injectStyles(STYLE_ID16, CSS16, opts.host.ownerDocument);
+    this.drawer = new Drawer({ host: opts.host, title: "Time zone", onOpenChange: opts.onOpenChange });
+  }
+  open() {
+    this.render();
+    this.drawer.show();
+  }
+  close() {
+    this.drawer.hide();
+  }
+  destroy() {
+    this.drawer.destroy();
+  }
+  render() {
+    const doc = this.drawer.body.ownerDocument;
+    this.drawer.body.replaceChildren();
+    const list = doc.createElement("div");
+    list.className = "vela-tzd-list";
+    const current = normalizeTimezone(this.opts.timezone());
+    for (const tz of TIMEZONES) {
+      const row = doc.createElement("div");
+      row.className = "vela-tzd-row";
+      const label = doc.createElement("span");
+      label.className = "vela-tzd-row-label";
+      label.textContent = tzMenuLabel(tz.value, tz.label);
+      row.appendChild(label);
+      if (tz.value === current) row.appendChild(iconEl("check", doc));
+      row.addEventListener("click", () => {
+        this.opts.onTimezone(tz.value);
+        this.drawer.hide();
+      });
+      list.appendChild(row);
+    }
+    this.drawer.body.appendChild(list);
+  }
+};
+
+// src/widget/price-scale-drawer.ts
+var STYLE_ID17 = "vela-widget-price-scale-drawer";
+var CSS17 = `
+.vela-psd-list { padding: 2px 0 4px; }
+.vela-psd-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 46px;
+    padding: 0 2px;
+    border-radius: 8px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+.vela-psd-row:active { background: var(--vela-hover); }
+.vela-psd-row[data-sep='1'] { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--vela-border); border-radius: 0 0 8px 8px; }
+.vela-psd-row-label { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--vela-fg-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vela-psd-row .vela-icon { flex: none; color: var(--vela-fg-bright); }
+.vela-psd-section {
+    padding: 12px 2px 4px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+    color: var(--vela-fg-muted);
+}
+`;
+var PriceScaleDrawer = class {
+  constructor(opts) {
+    this.opts = opts;
+    this.pane = null;
+    injectStyles(STYLE_ID17, CSS17, opts.host.ownerDocument);
+    this.drawer = new Drawer({ host: opts.host, title: "Price scale", onOpenChange: opts.onOpenChange });
+  }
+  open() {
+    const chart = this.opts.chart();
+    const panes = chart?.renderer.get("paneScales");
+    this.pane = Array.isArray(panes) ? paneScaleAt(panes, this.opts.pressY()) : null;
+    this.render();
+    this.drawer.show();
+  }
+  close() {
+    this.drawer.hide();
+  }
+  destroy() {
+    this.drawer.destroy();
+  }
+  flag(feature) {
+    return Boolean(this.opts.chart()?.renderer.get(feature));
+  }
+  render() {
+    const chart = this.opts.chart();
+    const doc = this.drawer.body.ownerDocument;
+    this.drawer.body.replaceChildren();
+    if (!chart) return;
+    const pane = this.pane;
+    const items = priceAxisItems({
+      auto: chart.renderer.get("autoScale") !== false,
+      invert: pane ? pane.invert : this.flag("invertScale"),
+      choice: scaleChoiceOf(pane ?? { mode: String(chart.renderer.get("scaleMode") ?? "price"), log: this.flag("logScale") }),
+      axisLabels: this.flag("axisLabels"),
+      priceLabel: this.flag("priceLabel"),
+      countdown: this.flag("countdown"),
+      priceLine: this.flag("currentPriceLine")
+    });
+    const list = doc.createElement("div");
+    list.className = "vela-psd-list";
+    const row = (label, opts) => {
+      const el = doc.createElement("div");
+      el.className = "vela-psd-row";
+      if (opts.sep) el.dataset.sep = "1";
+      const text = doc.createElement("span");
+      text.className = "vela-psd-row-label";
+      text.textContent = label;
+      el.appendChild(text);
+      if (opts.checked) el.appendChild(iconEl("check", doc));
+      el.addEventListener("click", opts.onClick);
+      list.appendChild(el);
+    };
+    const section = (label) => {
+      const el = doc.createElement("div");
+      el.className = "vela-psd-section";
+      el.textContent = label;
+      list.appendChild(el);
+    };
+    for (const item of items) {
+      if (item.id === "labels" && item.submenu) {
+        section("Labels");
+        for (const sub of item.submenu) {
+          row(sub.label, {
+            checked: sub.checked,
+            onClick: () => {
+              const feature = sub.id.slice("toggle:".length);
+              chart.renderer.set(feature, !this.flag(feature));
+              this.render();
+            }
+          });
+        }
+        continue;
+      }
+      if (item.id === "levels" && item.submenu) {
+        section("Levels");
+        for (const sub of item.submenu) {
+          row(sub.label, {
+            checked: sub.checked,
+            onClick: () => {
+              const feature = sub.id.slice("toggle:".length);
+              chart.renderer.set(feature, !this.flag(feature));
+              this.render();
+            }
+          });
+        }
+        continue;
+      }
+      if (item.id.startsWith("settings")) {
+        row(item.label, {
+          sep: true,
+          onClick: () => {
+            chart.renderer.openSettings(settingsSectionOf(item.id));
+            this.drawer.hide();
+          }
+        });
+        continue;
+      }
+      if (item.id === "auto") {
+        row(item.label, {
+          checked: item.checked,
+          onClick: () => {
+            chart.renderer.set("autoScale", chart.renderer.get("autoScale") === false);
+            this.render();
+          }
+        });
+        continue;
+      }
+      if (item.id === "invert") {
+        row(item.label, {
+          checked: item.checked,
+          onClick: () => {
+            const [feature, value] = invertWrite(!(pane ? pane.invert : this.flag("invertScale")), pane);
+            chart.renderer.set(feature, value);
+            const panes = chart.renderer.get("paneScales");
+            this.pane = Array.isArray(panes) ? paneScaleAt(panes, this.opts.pressY()) : pane;
+            this.render();
+          }
+        });
+        continue;
+      }
+      if (item.id.startsWith("scale:")) {
+        row(item.label, {
+          checked: item.checked,
+          sep: item.separatorBefore,
+          onClick: () => {
+            for (const [feature, value] of scaleWrites(item.id.slice("scale:".length), pane)) {
+              chart.renderer.set(feature, value);
+            }
+            const panes = chart.renderer.get("paneScales");
+            this.pane = Array.isArray(panes) ? paneScaleAt(panes, this.opts.pressY()) : pane;
+            this.render();
+          }
+        });
+      }
+    }
+    this.drawer.body.appendChild(list);
+  }
+};
+
+// src/widget/drawing-pill.ts
+var STYLE_ID18 = "vela-widget-drawing-pill";
+var CSS18 = `
+.vela-drawpill { display: none; }
+[data-layout='mobile'] .vela-drawpill {
+    position: absolute;
+    left: 50%;
+    bottom: 10px;
+    transform: translateX(-50%);
+    z-index: 7;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 4px;
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 999px;
+    background: var(--vela-surface);
+    box-shadow: var(--vela-shadow-dialog);
+    color: var(--vela-fg);
+}
+[data-layout='mobile'] .vela-drawpill[hidden] { display: none !important; }
+.vela-drawpill-tool {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 999px;
+    background: var(--vela-hover);
+    color: var(--vela-accent);
+}
+.vela-drawpill-tool svg { width: 22px; height: 22px; }
+.vela-drawpill-btn {
+    all: unset;
+    width: 36px;
+    height: 36px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 999px;
+    color: var(--vela-fg-muted);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    position: relative;
+}
+.vela-drawpill-btn:active { background: var(--vela-hover); }
+.vela-drawpill-btn[data-on='1'] { color: var(--vela-accent); background: var(--vela-hover); }
+.vela-drawpill-btn .vela-icon { font-size: 17px; width: 17px; height: 17px; }
+.vela-drawpill-badge {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    font-size: 8px;
+    font-weight: 700;
+    color: var(--vela-accent);
+}
+`;
+var DrawingPill = class {
+  constructor(host) {
+    this.chart = null;
+    this.chartSubs = [];
+    const doc = host.ownerDocument;
+    injectStyles(STYLE_ID18, CSS18, doc);
+    this.el = doc.createElement("div");
+    this.el.className = "vela-drawpill";
+    this.el.hidden = true;
+    this.toolGlyph = doc.createElement("span");
+    this.toolGlyph.className = "vela-drawpill-tool";
+    const btn = (icon2, label, onClick) => {
+      const b = doc.createElement("button");
+      b.className = "vela-drawpill-btn";
+      b.setAttribute("aria-label", label);
+      b.appendChild(iconEl(icon2, doc));
+      b.addEventListener("click", onClick);
+      return b;
+    };
+    this.magnetBtn = btn("magnet", "Magnet snap", () => {
+      const order = ["off", "weak", "strong"];
+      const cur = this.chart?.drawings.getSnapMode() ?? "off";
+      this.chart?.drawings.setSnapMode(order[(order.indexOf(cur) + 1) % order.length]);
+    });
+    this.magnetBadge = doc.createElement("span");
+    this.magnetBadge.className = "vela-drawpill-badge";
+    this.magnetBtn.appendChild(this.magnetBadge);
+    this.stayBtn = btn(iconMarkup("pen-lock") ? "pen-lock" : "pen", "Stay in drawing mode", () => {
+      this.chart?.drawings.setStayMode(!this.chart.drawings.getStayMode());
+    });
+    this.eraserBtn = btn("eraser", "Eraser", () => {
+      this.chart?.drawings.setMode(this.chart.drawings.getMode() === "eraser" ? null : "eraser");
+    });
+    const close = btn("close", "Exit drawing mode", () => {
+      this.chart?.drawings.setTool(null);
+      this.chart?.drawings.setMode(null);
+    });
+    this.el.append(this.toolGlyph, this.magnetBtn, this.stayBtn, this.eraserBtn, close);
+    host.appendChild(this.el);
+  }
+  /** Rebind to another chart (a rebuild, or the workspace's active cell changing) —
+   *  the previous chart's subscriptions are dropped so only one chart drives the pill. */
+  onChart(chart) {
+    for (const off of this.chartSubs) off();
+    this.chart = chart;
+    this.chartSubs = [
+      chart.on("drawing:tool", () => this.sync()),
+      chart.on("drawing:snap", () => this.sync()),
+      chart.on("drawing:stay", () => this.sync()),
+      chart.on("drawing:mode", () => this.sync())
+    ];
+    this.sync();
+  }
+  sync() {
+    const drawings = this.chart?.drawings;
+    if (!drawings || !drawings.supported) {
+      this.el.hidden = true;
+      return;
+    }
+    const tool = drawings.getTool();
+    const eraser = drawings.getMode() === "eraser";
+    this.el.hidden = tool === null && !eraser;
+    if (this.el.hidden) return;
+    this.toolGlyph.innerHTML = tool !== null ? getDrawingType(tool)?.icon ?? "" : iconMarkup("eraser") ?? "";
+    const snap = drawings.getSnapMode();
+    this.magnetBtn.dataset.on = snap !== "off" ? "1" : "";
+    this.magnetBadge.textContent = snap === "weak" ? "W" : snap === "strong" ? "S" : "";
+    this.stayBtn.dataset.on = drawings.getStayMode() ? "1" : "";
+    this.eraserBtn.dataset.on = eraser ? "1" : "";
+  }
+  destroy() {
+    for (const off of this.chartSubs) off();
+    this.chartSubs = [];
+    this.el.remove();
+  }
+};
+
 // src/widget/glide.ts
 var MIN_SPAN_MS = 6e4;
 var FOLLOW = 0.25;
@@ -4262,8 +5577,8 @@ var WidgetHistory = class {
 };
 
 // src/widget/toast.ts
-var STYLE_ID12 = "vela-widget-toast";
-var CSS12 = `
+var STYLE_ID19 = "vela-widget-toast";
+var CSS19 = `
 .vela-toast {
     position: absolute;
     left: 50%;
@@ -4293,7 +5608,7 @@ var CSS12 = `
 var Toast = class {
   constructor(host) {
     this.timer = null;
-    injectStyles(STYLE_ID12, CSS12, host.ownerDocument);
+    injectStyles(STYLE_ID19, CSS19, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-toast";
     host.appendChild(this.el);
@@ -4317,4 +5632,4 @@ var Toast = class {
   }
 };
 
-export { Bottombar, ChartContextMenu, DataWindow, Glider, IndicatorPicker, ObjectTree, PAN_FAST, PanelDock, RANGE_PRESETS, ShortcutsHelp, Statusline, SymbolPicker, TimeframeQuick, Toast, Topbar, Watermark, WidgetHistory, ZOOM_IN, ZOOM_OUT, dataWindowSections, decimalsFor, decodeState, encodeState, filterSymbols, fmtChange, fmtPrice, indicatorLedger, legacyWidgetState, loadPersisted, localStorageAdapter, parsePersisted, parseTimeframe, prefixedSymbol, priceStyleLabel, resolveIndicators, sanitizeState, savePersisted, statuslineInkOf, timeframeLabel, timeframeMs, toolShortcutHints };
+export { Bottombar, ChartContextMenu, DataWindow, DrawingPill, DrawingsDrawer, Glider, IndicatorPicker, LayoutModeController, MobileBar, MoreDrawer, ObjectTree, PAN_FAST, PanelDock, PriceScaleDrawer, RANGE_PRESETS, ShortcutsHelp, Statusline, SymbolPicker, TimeframeDrawer, TimeframeQuick, TimezoneDrawer, Toast, Topbar, Watermark, WidgetHistory, ZOOM_IN, ZOOM_OUT, dataWindowSections, decimalsFor, decodeState, encodeState, filterSymbols, fmtChange, fmtPrice, indicatorLedger, legacyWidgetState, loadPersisted, localStorageAdapter, parsePersisted, parseTimeframe, prefixedSymbol, priceStyleIcon, priceStyleLabel, resolveIndicators, sanitizeState, savePersisted, statuslineInkOf, timeframeLabel, timeframeMs, toolShortcutHints };