@luxalgo/vela 0.5.0 → 0.5.2

package/dist/{chunk-OVQKKXLZ.js → chunk-Y7TK4ZWK.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, 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 = {
@@ -87,9 +87,337 @@ 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;
+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 = [];
+    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 { el: grid, squares } = layoutGridCanvas(doc);
+    this.squares.push(...squares);
+    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() {
+    paintLayoutGrid(this.squares, this.hover ?? this.opts.shape());
+  }
+  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;
@@ -100,7 +428,7 @@ var CSS = `
     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;
@@ -122,10 +450,10 @@ var CSS = `
     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
@@ -148,6 +476,8 @@ var CSS = `
     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); }
@@ -201,7 +531,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 +551,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");
@@ -234,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);
@@ -267,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);
@@ -278,19 +616,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 +664,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 +673,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);
@@ -354,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) {
   }
@@ -407,7 +741,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();
   }
@@ -439,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
     }));
   }
 };
@@ -494,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(
@@ -509,8 +845,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);
@@ -592,6 +928,59 @@ var CSS2 = `
  * 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;
@@ -644,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_ID2, CSS2, doc);
+    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");
@@ -674,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
@@ -693,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'. */
@@ -704,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];
@@ -731,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() {
@@ -764,15 +1204,26 @@ 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 STYLE_ID3 = "vela-widget-watermark";
-var CSS3 = `
+var MAX_FONT_PX = 36;
+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 +1231,65 @@ 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;
+    /** 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);
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(() => this.fit());
+      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.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 +1315,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 +1391,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 +1529,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;
@@ -1064,6 +1552,13 @@ var CSS5 = `
     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;
@@ -1132,7 +1627,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 +1949,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 +2188,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));
   }
@@ -2539,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));
@@ -2672,8 +3170,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 +3230,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);
@@ -2857,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 = {};
@@ -2929,8 +3432,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 +3458,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 +3746,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;
@@ -3260,6 +3763,9 @@ var CSS9 = `
 .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 {
@@ -3318,7 +3824,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";
@@ -3341,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);
       }
@@ -3446,8 +3952,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 +3976,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");
@@ -3653,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;
@@ -3667,7 +4174,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") {
@@ -3759,87 +4266,1237 @@ function indicatorLedger(i) {
   };
 }
 
-// src/widget/glide.ts
-var MIN_SPAN_MS = 6e4;
-var FOLLOW = 0.25;
-var ZOOM_IN = 0.8;
-var ZOOM_OUT = 1.25;
-var PAN_FAST = 0.2;
-function zoomTarget(base, factor) {
-  const newSpan = Math.max(MIN_SPAN_MS, (base.to - base.from) * factor);
-  return { from: base.to - newSpan, to: base.to };
+// 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";
 }
-function followStep(cur, target, follow = FOLLOW, epsFrac = 15e-4) {
-  const eps = Math.max(MIN_SPAN_MS, (target.to - target.from) * epsFrac);
-  const nf = cur.from + (target.from - cur.from) * follow;
-  const nt = cur.to + (target.to - cur.to) * follow;
-  const done = Math.abs(target.from - nf) <= eps && Math.abs(target.to - nt) <= eps;
-  return { cur: done ? { ...target } : { from: nf, to: nt }, done };
-}
-var Glider = class {
-  constructor(chart) {
-    this.chart = chart;
-    // The glide eases ITS OWN range, never the chart's read-back: getVisibleRange()
-    // is data-bounded (whole bars, `to` capped at the newest bar) and the renderer
-    // clamps what gets applied — chasing that read-back can never converge on a
-    // clamped step, leaving the rAF loop re-applying a stale target forever (and
-    // grinding the span down when panning past the newest bar). The internal range
-    // converges geometrically, so the glide always terminates; the renderer is free
-    // to clamp each applied frame.
-    this.cur = null;
-    this.target = null;
-    this.raf = 0;
+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);
+    }
   }
-  zoom(factor) {
-    this.to((base) => zoomTarget(base, factor));
+  get current() {
+    return this.mode;
   }
-  stop() {
-    if (this.raf) cancelAnimationFrame(this.raf);
-    this.raf = 0;
-    this.cur = null;
-    this.target = null;
+  /** Subscribe to mode transitions (fires with the NEW mode). */
+  onChange(cb) {
+    this.listeners.add(cb);
+    return () => this.listeners.delete(cb);
   }
-  to(make) {
-    const chart = this.chart();
-    const base = this.target ?? chart?.getVisibleRange();
-    if (!chart || !base) return;
-    this.cur ?? (this.cur = { ...base });
-    this.target = make(base);
-    if (!this.raf) this.tick();
+  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();
   }
-  tick() {
-    this.raf = requestAnimationFrame(() => {
-      const chart = this.chart();
-      if (!chart || !this.cur || !this.target) {
-        this.stop();
-        return;
-      }
-      const { cur: next, done } = followStep(this.cur, this.target);
-      this.cur = next;
-      chart.setVisibleRange(next);
-      if (done) this.stop();
-      else this.tick();
-    });
+  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/tool-shortcuts.ts
-var TOOL_BINDINGS = [
-  ["trendline", "drawings.trendline"],
-  ["hline", "drawings.hline-cursor"],
-  ["vline", "drawings.vline-cursor"]
-];
-function toolShortcutHints(keymap) {
-  const byId = new Map(keymap.bindings().map((b) => [b.id, b.display[0]]));
-  const out = {};
-  for (const [type, id] of TOOL_BINDINGS) {
-    const display = byId.get(id);
-    if (display) out[type] = display;
-  }
-  return out;
-}
-
-// src/widget/history.ts
+// 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;
+var ZOOM_IN = 0.8;
+var ZOOM_OUT = 1.25;
+var PAN_FAST = 0.2;
+function zoomTarget(base, factor) {
+  const newSpan = Math.max(MIN_SPAN_MS, (base.to - base.from) * factor);
+  return { from: base.to - newSpan, to: base.to };
+}
+function followStep(cur, target, follow = FOLLOW, epsFrac = 15e-4) {
+  const eps = Math.max(MIN_SPAN_MS, (target.to - target.from) * epsFrac);
+  const nf = cur.from + (target.from - cur.from) * follow;
+  const nt = cur.to + (target.to - cur.to) * follow;
+  const done = Math.abs(target.from - nf) <= eps && Math.abs(target.to - nt) <= eps;
+  return { cur: done ? { ...target } : { from: nf, to: nt }, done };
+}
+var Glider = class {
+  constructor(chart) {
+    this.chart = chart;
+    // The glide eases ITS OWN range, never the chart's read-back: getVisibleRange()
+    // is data-bounded (whole bars, `to` capped at the newest bar) and the renderer
+    // clamps what gets applied — chasing that read-back can never converge on a
+    // clamped step, leaving the rAF loop re-applying a stale target forever (and
+    // grinding the span down when panning past the newest bar). The internal range
+    // converges geometrically, so the glide always terminates; the renderer is free
+    // to clamp each applied frame.
+    this.cur = null;
+    this.target = null;
+    this.raf = 0;
+  }
+  zoom(factor) {
+    this.to((base) => zoomTarget(base, factor));
+  }
+  stop() {
+    if (this.raf) cancelAnimationFrame(this.raf);
+    this.raf = 0;
+    this.cur = null;
+    this.target = null;
+  }
+  to(make) {
+    const chart = this.chart();
+    const base = this.target ?? chart?.getVisibleRange();
+    if (!chart || !base) return;
+    this.cur ?? (this.cur = { ...base });
+    this.target = make(base);
+    if (!this.raf) this.tick();
+  }
+  tick() {
+    this.raf = requestAnimationFrame(() => {
+      const chart = this.chart();
+      if (!chart || !this.cur || !this.target) {
+        this.stop();
+        return;
+      }
+      const { cur: next, done } = followStep(this.cur, this.target);
+      this.cur = next;
+      chart.setVisibleRange(next);
+      if (done) this.stop();
+      else this.tick();
+    });
+  }
+};
+
+// src/widget/tool-shortcuts.ts
+var TOOL_BINDINGS = [
+  ["trendline", "drawings.trendline"],
+  ["hline", "drawings.hline-cursor"],
+  ["vline", "drawings.vline-cursor"]
+];
+function toolShortcutHints(keymap) {
+  const byId = new Map(keymap.bindings().map((b) => [b.id, b.display[0]]));
+  const out = {};
+  for (const [type, id] of TOOL_BINDINGS) {
+    const display = byId.get(id);
+    if (display) out[type] = display;
+  }
+  return out;
+}
+
+// src/widget/history.ts
 var WidgetHistory = class {
   /** `getChart` late-resolves the CURRENT chart: drawing steps recorded before a chart
    *  rebuild must undo on the chart that exists when the user presses Ctrl+Z, not on a
@@ -3920,8 +5577,8 @@ var WidgetHistory = class {
 };
 
 // src/widget/toast.ts
-var STYLE_ID11 = "vela-widget-toast";
-var CSS11 = `
+var STYLE_ID19 = "vela-widget-toast";
+var CSS19 = `
 .vela-toast {
     position: absolute;
     left: 50%;
@@ -3951,7 +5608,7 @@ var CSS11 = `
 var Toast = class {
   constructor(host) {
     this.timer = null;
-    injectStyles(STYLE_ID11, CSS11, host.ownerDocument);
+    injectStyles(STYLE_ID19, CSS19, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-toast";
     host.appendChild(this.el);
@@ -3975,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 };