@luxalgo/vela 0.5.0

package/dist/chunk-OVQKKXLZ.js

@@ -0,0 +1,3978 @@
+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';
+
+// src/widget/timeframe.ts
+var UNIT_MS = {
+  S: 1e3,
+  MIN: 6e4,
+  H: 36e5,
+  D: 864e5,
+  W: 6048e5,
+  M: 2592e6,
+  Y: 31536e6
+};
+var UNIT_NAME = {
+  S: "second",
+  MIN: "minute",
+  H: "hour",
+  D: "day",
+  W: "week",
+  M: "month",
+  Y: "year"
+};
+var UNIT_SHORT = { S: "s", MIN: "m", H: "h", D: "D", W: "W", M: "M", Y: "Y" };
+function unitKey(letter) {
+  if (letter === "") return "MIN";
+  return letter === "S" || letter === "H" || letter === "D" || letter === "W" || letter === "M" || letter === "Y" ? letter : null;
+}
+var UNIT_MINUTES = {
+  MIN: 1,
+  H: 60,
+  D: 1440,
+  W: 10080,
+  M: 43200,
+  Y: 525600
+};
+function canonicalFor(key, count) {
+  if (key === "S") return `${count}S`;
+  return `${count * UNIT_MINUTES[key]}`;
+}
+function parseTimeframe(text) {
+  const raw = String(text ?? "").trim();
+  if (!raw) return { valid: false };
+  const m = /^(\d*)\s*([a-zA-Z]?)$/.exec(raw);
+  if (!m) return { valid: false };
+  const numStr = m[1] ?? "";
+  const key = unitKey((m[2] ?? "").toUpperCase());
+  if (key === null) return { valid: false };
+  if (numStr === "" && key === "MIN") return { valid: false };
+  const count = numStr === "" ? 1 : parseInt(numStr, 10);
+  if (!Number.isFinite(count) || count < 1) return { valid: false };
+  const ms = count * UNIT_MS[key];
+  const name = UNIT_NAME[key];
+  return {
+    valid: true,
+    count,
+    unit: key,
+    ms,
+    canonical: canonicalFor(key, count),
+    label: `${count} ${name}${count === 1 ? "" : "s"}`,
+    short: `${count}${UNIT_SHORT[key]}`
+  };
+}
+function timeframeMs(value) {
+  const v = String(value ?? "").trim();
+  if (!v) return NaN;
+  const m = /^(\d*)\s*([a-zA-Z]?)$/.exec(v);
+  if (!m) return NaN;
+  const key = unitKey((m[2] ?? "").toUpperCase());
+  if (key === null) return NaN;
+  if ((m[1] ?? "") === "" && key === "MIN") return NaN;
+  const count = (m[1] ?? "") === "" ? 1 : parseInt(m[1], 10);
+  if (!Number.isFinite(count) || count < 1) return NaN;
+  return count * UNIT_MS[key];
+}
+function timeframeLabel(value) {
+  const parsed = parseTimeframe(value);
+  if (!parsed.valid) return value;
+  const ms = parsed.ms;
+  const order = ["Y", "M", "W", "D", "H", "MIN", "S"];
+  for (const key of order) {
+    if (ms % UNIT_MS[key] === 0 && ms / UNIT_MS[key] >= 1) {
+      return `${ms / UNIT_MS[key]}${UNIT_SHORT[key]}`;
+    }
+  }
+  return parsed.short;
+}
+
+// src/widget/topbar.ts
+var STYLE_ID = "vela-topbar";
+var CSS = `
+.vela-widget-topbar {
+    display: flex;
+    align-items: center;
+    gap: var(--vela-space-1);
+    padding: var(--vela-space-1) var(--vela-space-2);
+    border-bottom: 1px solid var(--vela-border-soft);
+    color: var(--vela-fg);
+    font-size: var(--vela-font-size-md);
+    flex: none;
+}
+.vela-widget-symbol, .vela-widget-tf, .vela-widget-style, .vela-widget-indicators {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 30px;
+    padding: 0 9px;
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--vela-fg-muted);
+    font-size: 13px;
+    font-weight: 550;
+    white-space: nowrap;
+}
+.vela-widget-symbol {
+    color: var(--vela-fg-bright);
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    padding: 0 10px;
+    gap: 7px;
+}
+.vela-widget-tf, .vela-widget-style, .vela-widget-indicators {
+    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-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
+   up looking like different thicknesses depending on subpixel placement. */
+.vela-sep { height: 22px; margin: 0 2px; flex: none; background: var(--vela-border-strong); }
+.vela-alerts-badge {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    min-width: 13px;
+    height: 13px;
+    padding: 0 3px;
+    border-radius: 7px;
+    background: var(--vela-accent);
+    color: var(--vela-fg-on-fill);
+    font-size: 9px;
+    font-weight: 700;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.vela-widget-actions { margin-left: auto; display: inline-flex; 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); }
+.vela-widget-tool {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 30px;
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--vela-fg-muted);
+    font-size: 14px;
+}
+.vela-widget-tool:hover:not(:disabled) { background: var(--vela-hover); color: var(--vela-fg-bright); }
+.vela-widget-tool:disabled { opacity: 0.35; cursor: default; }
+.vela-widget-tool[data-active='1'] { background: var(--vela-hover); color: var(--vela-fg-bright); }
+.vela-widget-action {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-radius: var(--vela-radius-sm);
+    cursor: pointer;
+    color: var(--vela-fg);
+}
+.vela-widget-action:hover { background: var(--vela-hover); }
+`;
+var BUILTIN_STYLE_LABELS = {
+  candles: "Candles",
+  bars: "Bars",
+  line: "Line",
+  area: "Area",
+  baseline: "Baseline"
+};
+function priceStyleLabel(id) {
+  return chartType(id)?.label ?? BUILTIN_STYLE_LABELS[id] ?? id;
+}
+function priceStyleIcon(id) {
+  const iconId = `style-${id}`;
+  if (iconMarkup(iconId)) return iconId;
+  const svg = chartType(id)?.icon;
+  if (svg) {
+    registerIcon(iconId, svg);
+    return iconId;
+  }
+  return void 0;
+}
+var Topbar = class {
+  constructor(host, opts) {
+    this.layoutButton = null;
+    this.layoutMenu = null;
+    this.layoutId = null;
+    this.tooltips = [];
+    this.panelBtns = /* @__PURE__ */ new Map();
+    this.panelTooltips = [];
+    this.onHairlineSync = () => {
+      if (this.hairlineRaf) return;
+      const win = this.el.ownerDocument.defaultView;
+      this.hairlineRaf = win?.requestAnimationFrame(() => {
+        this.hairlineRaf = 0;
+        this.syncHairlines();
+      }) ?? 0;
+    };
+    this.hairlineRo = null;
+    this.hairlineRaf = 0;
+    this.opts = opts;
+    this.host = host;
+    this.timeframe = opts.timeframe;
+    this.priceStyle = opts.priceStyle;
+    const doc = host.ownerDocument;
+    injectStyles(STYLE_ID, CSS, doc);
+    this.el = doc.createElement("div");
+    this.el.className = "vela-widget-topbar";
+    this.symbolEl = doc.createElement("button");
+    this.symbolEl.className = "vela-widget-symbol";
+    this.symbolEl.textContent = parseSymbol(opts.symbol).ticker;
+    if (opts.onSymbolClick) this.symbolEl.addEventListener("click", opts.onSymbolClick);
+    this.tfButton = doc.createElement("button");
+    this.tfButton.className = "vela-widget-tf";
+    this.tfButton.textContent = timeframeLabel(this.timeframe);
+    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);
+    this.actionsHost = doc.createElement("span");
+    this.actionsHost.className = "vela-widget-actions";
+    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);
+    this.undoBtn = tool("vela-widget-undo", "undo", "Undo", opts.onUndoClick);
+    this.redoBtn = tool("vela-widget-redo", "redo", "Redo", opts.onRedoClick);
+    this.setHistoryState(false, false);
+    const screenshotBtn = tool("vela-widget-screenshot", "camera", "Download screenshot", opts.onScreenshotClick);
+    this.alertsBtn = tool("vela-widget-alerts", "bell", "Alerts");
+    this.alertsBtn.style.position = "relative";
+    if (opts.onAlertsClick) this.alertsBtn.addEventListener("click", () => opts.onAlertsClick(this.alertsBtn));
+    this.alertsBadge = doc.createElement("span");
+    this.alertsBadge.className = "vela-alerts-badge";
+    this.alertsBadge.style.display = "none";
+    this.alertsBtn.appendChild(this.alertsBadge);
+    if (opts.layout) {
+      this.layoutId = opts.layout.current;
+      this.layoutButton = doc.createElement("button");
+      this.layoutButton.className = "vela-widget-style";
+      this.renderLayoutButton(doc);
+    }
+    const sep = () => {
+      const d = doc.createElement("span");
+      d.className = "vela-sep";
+      return d;
+    };
+    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);
+    host.appendChild(this.el);
+    this.onHairlineSync();
+    this.hairlineRo = new ResizeObserver(this.onHairlineSync);
+    this.hairlineRo.observe(this.el);
+    doc.defaultView?.addEventListener("resize", this.onHairlineSync);
+    this.renderActions();
+    this.tooltips.push(new Tooltip(this.tfButton, { content: "Timeframe", triggerId: "vela-topbar-tf", host }));
+    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({
+        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);
+        }
+      });
+    }
+    this.tfMenu = new Menu({
+      trigger: this.tfButton,
+      triggerId: "vela-topbar-tf",
+      host,
+      items: this.tfItems(),
+      onSelect: (id) => opts.onTimeframe(id),
+      // Timeframe labels are two-or-three characters ("1m", "4h", "1D") — the
+      // stylesheet's default min-width would leave the list mostly empty.
+      minWidth: "84px"
+    });
+    this.styleMenu = new Menu({
+      trigger: this.styleButton,
+      triggerId: "vela-topbar-style",
+      host,
+      items: this.styleItems(),
+      onSelect: (id) => opts.onPriceStyle(id)
+    });
+  }
+  setSymbol(symbol) {
+    this.symbolEl.textContent = parseSymbol(symbol).ticker;
+  }
+  setTimeframe(tf) {
+    this.timeframe = tf;
+    this.tfButton.textContent = timeframeLabel(tf);
+    this.tfMenu.setItems(this.tfItems());
+  }
+  setPriceStyle(style) {
+    this.priceStyle = style;
+    this.renderStyleButton(this.styleButton.ownerDocument);
+    this.styleMenu.setItems(this.styleItems());
+  }
+  /** Reflect the current workspace layout (no-op without the layout dropdown). */
+  setLayout(id) {
+    if (!this.layoutButton) return;
+    this.layoutId = id;
+    this.renderLayoutButton(this.layoutButton.ownerDocument);
+    this.layoutMenu?.setItems(this.layoutItems());
+  }
+  renderLayoutButton(doc) {
+    if (!this.layoutButton) return;
+    this.layoutButton.replaceChildren();
+    if (iconMarkup("layout")) this.layoutButton.appendChild(iconEl("layout", doc));
+    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);
+    if (icon2) this.styleButton.appendChild(iconEl(icon2, doc));
+    else this.styleButton.appendChild(doc.createTextNode(priceStyleLabel(this.priceStyle)));
+    this.styleButton.setAttribute("aria-label", `Chart style \u2014 ${priceStyleLabel(this.priceStyle)}`);
+  }
+  /** Re-project the contributed topbar actions (call after registrations change). */
+  renderActions() {
+    const ctx = this.opts.getContext?.();
+    this.actionsHost.replaceChildren();
+    const doc = this.actionsHost.ownerDocument;
+    for (const action of widgetActions("topbar", ctx)) {
+      const b = doc.createElement("button");
+      b.className = "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);
+    }
+  }
+  setIndicatorCount(_n) {
+  }
+  /** Enable/disable the undo and redo tools from the host's unified history. */
+  setHistoryState(canUndo, canRedo) {
+    this.undoBtn.disabled = !canUndo;
+    this.redoBtn.disabled = !canRedo;
+  }
+  setAlertCount(n) {
+    this.alertsBadge.textContent = n > 9 ? "9+" : String(n);
+    this.alertsBadge.style.display = n > 0 ? "" : "none";
+  }
+  /**
+   * Replace the side-panel toggle group — one icon button per docked panel, in the dock's own
+   * order. The dock calls this whenever its panel set changes (built-ins at construction,
+   * contributed panels on every `refreshActions()`), then pushes each pressed state.
+   */
+  setPanelButtons(buttons, onClick) {
+    for (const t of this.panelTooltips) t.destroy();
+    this.panelTooltips = [];
+    this.panelBtns.clear();
+    this.panelsHost.replaceChildren();
+    for (const b of buttons) {
+      const el = this.toolButton(`vela-widget-panel-${b.id}`, b.icon, b.title, () => onClick(b.id), this.panelTooltips);
+      this.panelBtns.set(b.id, el);
+      this.panelsHost.appendChild(el);
+    }
+  }
+  /** Reflect a docked side panel's open state on its button — the panels toggle each other,
+   *  so the dock pushes the state rather than the button assuming it. */
+  setPanelActive(id, open) {
+    const btn = this.panelBtns.get(id);
+    if (btn) btn.dataset.active = open ? "1" : "";
+  }
+  destroy() {
+    this.hairlineRo?.disconnect();
+    const win = this.el.ownerDocument.defaultView;
+    win?.removeEventListener("resize", this.onHairlineSync);
+    if (this.hairlineRaf) win?.cancelAnimationFrame(this.hairlineRaf);
+    this.tfMenu.destroy();
+    this.styleMenu.destroy();
+    this.layoutMenu?.destroy();
+    for (const t of [...this.tooltips, ...this.panelTooltips]) t.destroy();
+    this.el.remove();
+  }
+  /** One icon-only tool button with its kit tooltip, parked in `sink` for disposal. */
+  toolButton(cls, icon2, tip, onClick, sink) {
+    const doc = this.el.ownerDocument;
+    const b = doc.createElement("button");
+    b.className = `vela-widget-tool ${cls}`;
+    b.appendChild(iconEl(icon2, doc));
+    b.setAttribute("aria-label", tip);
+    sink.push(new Tooltip(b, { content: tip, triggerId: `vela-tool-${cls}`, host: this.host }));
+    if (onClick) b.addEventListener("click", onClick);
+    return b;
+  }
+  /** Paint each `.vela-sep` as exactly one device pixel, snapped to the pixel grid. */
+  syncHairlines() {
+    const win = this.el.ownerDocument.defaultView;
+    if (!win) return;
+    const dpr = win.devicePixelRatio || 1;
+    for (const el of this.el.querySelectorAll(".vela-sep")) {
+      el.style.width = `${1 / dpr}px`;
+      el.style.transform = "";
+      const left = el.getBoundingClientRect().left;
+      const dx = Math.round(left * dpr) / dpr - left;
+      if (dx) el.style.transform = `translateX(${dx}px)`;
+    }
+  }
+  tfItems() {
+    return this.opts.timeframes.map((tf) => ({ id: tf, label: timeframeLabel(tf), checked: tf === this.timeframe }));
+  }
+  styleItems() {
+    return priceStyleIds().map((id) => ({
+      id,
+      label: priceStyleLabel(id),
+      icon: priceStyleIcon(id),
+      checked: id === this.priceStyle
+    }));
+  }
+};
+
+// src/widget/format.ts
+function decimalsFor(ref) {
+  const a = Math.abs(ref);
+  return a >= 1 ? 2 : a >= 0.01 ? 4 : 6;
+}
+function fmtPrice(n, dp) {
+  if (n == null || !Number.isFinite(n)) return "\u2014";
+  const d = dp ?? decimalsFor(n);
+  return n.toLocaleString("en-US", { minimumFractionDigits: d, maximumFractionDigits: d });
+}
+function fmtChange(open, close) {
+  if (open == null || close == null || !Number.isFinite(open) || !Number.isFinite(close) || open === 0) return "";
+  const diff = close - open;
+  const pct = diff / open * 100;
+  const sign = diff >= 0 ? "+" : "";
+  return `${sign}${fmtPrice(diff, decimalsFor(close))} (${sign}${pct.toFixed(2)}%)`;
+}
+
+// src/widget/symbol-icon.ts
+var iconFailed = /* @__PURE__ */ new Set();
+function initialsOf(name) {
+  return (name || "?").replace(/[^A-Za-z0-9]/g, "").slice(0, 2).toUpperCase() || "?";
+}
+function cryptoIconUrl(base) {
+  return `https://crypto-icons.ledger.com/${encodeURIComponent(base.toUpperCase())}.png`;
+}
+function baseOf(d) {
+  const fromDesc = d.description?.split("/")[0]?.trim();
+  if (fromDesc) return fromDesc.replace(/\s+Perpetual$/i, "");
+  return d.ticker.replace(/[-_/]?(USDT|USDC|USD1|USDS|BUSD|USD|EUR|PERP)$/i, "") || d.ticker;
+}
+function tickerIconEl(doc, base, name, className) {
+  const wrap = doc.createElement("span");
+  wrap.className = className;
+  const key = base.toUpperCase();
+  const fallback = () => {
+    wrap.replaceChildren();
+    wrap.style.background = categoricalColor(name);
+    wrap.textContent = initialsOf(base || name);
+  };
+  if (!key || iconFailed.has(key)) {
+    fallback();
+    return wrap;
+  }
+  const img = doc.createElement("img");
+  img.alt = "";
+  img.src = cryptoIconUrl(key);
+  img.style.cssText = "width:100%;height:100%;border-radius:50%;display:block;object-fit:cover;";
+  img.addEventListener(
+    "error",
+    () => {
+      iconFailed.add(key);
+      fallback();
+    },
+    { once: true }
+  );
+  wrap.appendChild(img);
+  return wrap;
+}
+
+// src/widget/statusline.ts
+var STYLE_ID2 = "vela-widget-statusline";
+var CSS2 = `
+.vela-statusline {
+    position: absolute;
+    top: var(--vela-space-2);
+    /* Track the indicator legend's left edge: the renderer publishes its toolbar gutter
+     * on the mount container, and the legend sits 10px into the plot to its right \u2014
+     * so the two columns stay aligned whether the toolbar is docked (44px), collapsed
+     * (16px), or absent entirely (a workspace cell: 0). */
+    left: calc(var(--vela-toolbar-gutter, 0px) + 10px);
+    z-index: 10;
+    display: flex;
+    align-items: baseline;
+    gap: var(--vela-space-2);
+    color: var(--vela-fg);
+    font-size: var(--vela-font-size-md);
+    /* Same chip treatment as the indicator legend rows (InputsUI): a translucent wash of
+     * the chart background when idle \u2014 enough to keep the readout legible when candles
+     * reach it \u2014 and the solid chart background on hover. Symmetric 7px padding with a
+     * compensating negative margin (mirroring the legend rows) keeps the avatar's left
+     * edge on the legend column's left edge (both at left:10px) while the chip itself
+     * extends 7px further left, so both columns' chips share the same left edge. */
+    pointer-events: auto;
+    background: color-mix(in srgb, var(--vela-bg) 60%, transparent);
+    border-radius: 4px;
+    padding: 2px 7px;
+    margin-left: -7px;
+}
+.vela-statusline:hover { background: var(--vela-bg); }
+.vela-statusline .vela-sl-avatar {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    flex: none;
+    align-self: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--vela-fg-on-fill);
+    font-size: 10px;
+    font-weight: 700;
+}
+.vela-statusline .vela-sl-symbol { font-weight: 600; font-size: var(--vela-font-size-lg); }
+.vela-statusline .vela-sl-meta { color: var(--vela-fg-muted); font-size: var(--vela-font-size-md); font-weight: 600; }
+/* Market status badge \u2014 icon-only 16px circle, label on hover (kit tooltip). */
+.vela-statusline .vela-sl-market {
+    display: inline-grid;
+    place-items: center;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    flex: none;
+    align-self: center;
+    line-height: 0;
+    cursor: default;
+}
+.vela-statusline .vela-sl-market svg {
+    width: 12px;
+    height: 12px;
+    display: block;
+}
+/* Open wears the theme's up color; the other sessions are meaning constants from the
+ * palette (amber pre, sky post, gray closed/holiday). Same ink at 20% for the circle. */
+.vela-statusline .vela-sl-market[data-status='open'] {
+    background: color-mix(in srgb, var(--vela-up) 20%, transparent);
+    color: var(--vela-up);
+}
+.vela-statusline .vela-sl-market[data-status='pre'] { background: color-mix(in srgb, ${SESSION_PRE} 20%, transparent); color: ${SESSION_PRE}; }
+.vela-statusline .vela-sl-market[data-status='post'] { background: color-mix(in srgb, ${SESSION_POST} 20%, transparent); color: ${SESSION_POST}; }
+.vela-statusline .vela-sl-market[data-status='closed'],
+.vela-statusline .vela-sl-market[data-status='holiday'] { background: color-mix(in srgb, ${SESSION_OFF} 20%, transparent); color: ${SESSION_OFF}; }
+.vela-statusline .vela-sl-ohlc { display: flex; gap: var(--vela-space-1); color: var(--vela-fg-muted); }
+.vela-statusline .vela-sl-ohlc b { color: var(--vela-fg); font-weight: 500; }
+/* The change value wears the SAME ink as the OHLC values (set inline per render) \u2014
+ * these are the pre-ink fallbacks only. */
+.vela-statusline .vela-sl-change[data-dir='up'] { color: var(--vela-up); }
+.vela-statusline .vela-sl-change[data-dir='down'] { color: var(--vela-down); }
+/* Stack the renderer's PRICE-pane legend below the status line (study panes stay put).
+ * The renderer sets the legend's inline top \u2014 shift with a transform, don't fight it.
+ * Scoped to hosts that actually CARRY a status line (the marker class set by the
+ * 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); }
+`;
+function baseOfTicker(ticker) {
+  return ticker.replace(/[-_/]?(USDT|USDC|USD1|USDS|BUSD|USD|EUR|PERP)$/i, "") || ticker;
+}
+var MARKET_LABELS = {
+  open: "Market Open",
+  pre: "Pre-Market",
+  post: "Post-Market",
+  closed: "Market Closed",
+  holiday: "Market Holiday"
+};
+function statuslineInkOf(renderer, priceStyle) {
+  const cfg = renderer.getConfig();
+  const c = (v) => typeof v === "string" ? v : null;
+  switch (priceStyle) {
+    case "bars":
+      return [c(cfg?.bars?.upColor), c(cfg?.bars?.downColor), null, "ohlc"];
+    case "line": {
+      const v = c(cfg?.line?.color);
+      return [v, v, null, "value"];
+    }
+    case "area": {
+      const v = c(cfg?.area?.lineColor);
+      return [v, v, null, "value"];
+    }
+    case "baseline": {
+      const isUp = (bar) => {
+        const level = Number(renderer.get("baselinePrice"));
+        return Number.isFinite(level) ? bar.close >= level : bar.close >= bar.open;
+      };
+      return [c(cfg?.baseline?.topLineColor), c(cfg?.baseline?.bottomLineColor), isUp, "value"];
+    }
+    default:
+      return [c(cfg?.candles?.upColor), c(cfg?.candles?.downColor), null, "ohlc"];
+  }
+}
+var Statusline = class {
+  constructor(host, symbol) {
+    this.host = host;
+    this.parts = { name: true, market: true, ohlc: true, change: true };
+    this.lastBar = null;
+    this.hoverBar = null;
+    this.unsubs = [];
+    /** Up/down ink for the OHLC + change values — the ACTIVE price style's configured
+     *  colors (candle bodies, bar ticks, the line color, …); null falls back to the theme
+     *  tokens. `isUp` overrides the close-vs-open direction rule where the style paints by
+     *  something else (baseline: position against the baseline price). */
+    this.upColor = null;
+    this.downColor = null;
+    this.isUp = null;
+    /** 'ohlc' for bar-shaped styles; 'value' (the single plotted close) for line styles. */
+    this.readout = "ohlc";
+    const doc = host.ownerDocument;
+    injectStyles(STYLE_ID2, CSS2, doc);
+    host.classList.add("vela-has-statusline");
+    this.el = doc.createElement("div");
+    this.el.className = "vela-statusline";
+    const ticker = parseSymbol(symbol).ticker;
+    this.avatarEl = tickerIconEl(doc, baseOfTicker(ticker), ticker, "vela-sl-avatar");
+    this.symbolEl = doc.createElement("span");
+    this.symbolEl.className = "vela-sl-symbol";
+    this.symbolEl.textContent = ticker;
+    this.metaEl = doc.createElement("span");
+    this.metaEl.className = "vela-sl-meta";
+    this.marketEl = doc.createElement("span");
+    this.marketEl.className = "vela-sl-market";
+    this.ohlcEl = doc.createElement("span");
+    this.ohlcEl.className = "vela-sl-ohlc";
+    this.changeEl = doc.createElement("span");
+    this.changeEl.className = "vela-sl-change";
+    this.el.append(this.avatarEl, this.symbolEl, this.metaEl, this.marketEl, this.ohlcEl, this.changeEl);
+    host.appendChild(this.el);
+    this.marketTip = new Tooltip(this.marketEl, { content: MARKET_LABELS.open, placement: "bottom" });
+    this.setMarketStatus("open");
+    this.render();
+  }
+  setSymbol(symbol) {
+    const ticker = parseSymbol(symbol).ticker;
+    this.symbolEl.textContent = ticker;
+    const fresh = tickerIconEl(this.el.ownerDocument, baseOfTicker(ticker), ticker, "vela-sl-avatar");
+    this.avatarEl.replaceWith(fresh);
+    this.avatarEl = fresh;
+  }
+  /** 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
+   *  picks between them (`isUp` replaces close-vs-open where the style paints by
+   *  something else — baseline by position), and whether the readout is the four
+   *  O/H/L/C values or the single plotted value (one-line styles). Null colors fall
+   *  back to the theme's up/down tokens. See {@link statuslineInkOf}, which derives
+   *  all of it from the live renderer. */
+  setDirectionColors(up, down, isUp = null, readout = "ohlc") {
+    this.upColor = up;
+    this.downColor = down;
+    this.isUp = isUp;
+    this.readout = readout;
+    this.render();
+  }
+  /** Show/hide one part (the settings dialog's Status line tab drives these). */
+  /** The "· BINANCE · 1h" segment after the symbol — venue first, then resolution. */
+  setMeta(timeframe, provider) {
+    this.metaEl.textContent = `${provider ? `\xB7 ${provider.toUpperCase()} ` : ""}\xB7 ${timeframeLabel(timeframe)}`;
+  }
+  /** 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'. */
+  setMarketStatus(status) {
+    this.marketEl.dataset.status = status;
+    this.marketEl.innerHTML = icon(`market-${status}`);
+    this.marketEl.setAttribute("aria-label", MARKET_LABELS[status]);
+    this.marketTip.setContent(MARKET_LABELS[status]);
+  }
+  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";
+  }
+  partVisible(part) {
+    return this.parts[part];
+  }
+  /** (Re)bind to a chart instance — called after every widget rebuild. */
+  onChart(chart) {
+    this.detach();
+    this.lastBar = null;
+    this.hoverBar = null;
+    this.unsubs.push(
+      chart.on("bar", (b) => {
+        this.lastBar = b;
+        if (!this.hoverBar) this.render();
+      }),
+      chart.renderer.onCrosshairMove((e) => {
+        this.hoverBar = e.ohlc;
+        this.render();
+      })
+    );
+    this.render();
+  }
+  destroy() {
+    this.detach();
+    this.marketTip.destroy();
+    this.host.classList.remove("vela-has-statusline");
+    this.el.remove();
+  }
+  detach() {
+    for (const u of this.unsubs) u();
+    this.unsubs = [];
+  }
+  render() {
+    const bar = this.hoverBar ?? this.lastBar;
+    if (!bar) {
+      this.ohlcEl.replaceChildren();
+      this.changeEl.textContent = "";
+      return;
+    }
+    const dp = decimalsFor(bar.close);
+    const doc = this.el.ownerDocument;
+    const up = this.isUp ? this.isUp(bar) : bar.close >= bar.open;
+    const ink = up ? this.upColor ?? "var(--vela-up)" : this.downColor ?? "var(--vela-down)";
+    const cell = (k, v) => {
+      const s = doc.createElement("span");
+      if (k) s.append(`${k} `);
+      const b = doc.createElement("b");
+      b.textContent = fmtPrice(v, dp);
+      b.style.color = ink;
+      s.appendChild(b);
+      return s;
+    };
+    if (this.readout === "value") this.ohlcEl.replaceChildren(cell("", bar.close));
+    else this.ohlcEl.replaceChildren(cell("O", bar.open), cell("H", bar.high), cell("L", bar.low), cell("C", bar.close));
+    this.changeEl.textContent = fmtChange(bar.open, bar.close);
+    this.changeEl.dataset.dir = up ? "up" : "down";
+    this.changeEl.style.color = ink;
+  }
+};
+
+// src/widget/watermark.ts
+var STYLE_ID3 = "vela-widget-watermark";
+var CSS3 = `
+.vela-watermark {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 1;
+    color: var(--vela-fg);
+    opacity: 0.05;
+    font-size: clamp(28px, 7vw, 72px);
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    user-select: none;
+    white-space: nowrap;
+}
+`;
+var Watermark = class {
+  constructor(host, symbol, timeframe) {
+    injectStyles(STYLE_ID3, CSS3, host.ownerDocument);
+    this.el = host.ownerDocument.createElement("div");
+    this.el.className = "vela-watermark";
+    host.appendChild(this.el);
+    this.update(symbol, timeframe);
+  }
+  setVisible(visible) {
+    this.el.style.display = visible ? "" : "none";
+  }
+  update(symbol, timeframe) {
+    this.el.textContent = symbol ? `${parseSymbol(symbol).ticker} \xB7 ${timeframeLabel(timeframe)}` : "";
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+
+// src/widget/bottombar.ts
+var RANGE_PRESETS = [
+  { id: "1D", tf: "1", preset: "1D", bars: 1500 },
+  //   1 day  @ 1m  = 1440 bars
+  { id: "7D", tf: "5", preset: "1W", bars: 2100 },
+  //   7 days @ 5m  = 2016
+  { id: "1M", tf: "30", preset: "1M", bars: 1500 },
+  //  30 days @ 30m = 1440
+  { id: "3M", tf: "60", preset: "3M", bars: 2200 },
+  //  90 days @ 1h  = 2160
+  { id: "6M", tf: "240", preset: "6M", bars: 1150 },
+  // 180 days @ 4h  = 1080
+  { id: "YTD", tf: "D", preset: "YTD", bars: 400 },
+  //  ≤366 days @ 1D
+  { id: "1Y", tf: "D", preset: "1Y", bars: 400 },
+  //    365 days @ 1D
+  { id: "5Y", tf: "W", preset: "5Y", bars: 300 },
+  //    5 years  @ 1W = 261
+  { id: "ALL", tf: "W", preset: "ALL", bars: 5e3 }
+  // everything the provider serves
+];
+var STYLE_ID4 = "vela-widget-bottombar";
+var CSS4 = `
+.vela-widget-bottombar {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    height: 38px;
+    padding: 0 8px;
+    border-top: 1px solid var(--vela-border);
+    color: var(--vela-fg-muted);
+    font-size: 12px;
+    flex: none;
+}
+.vela-bb-range {
+    all: unset;
+    height: 24px;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 9px;
+    border-radius: 4px;
+    font-weight: 600;
+    cursor: pointer;
+}
+.vela-bb-range:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
+.vela-bb-range[data-active='1'] { color: var(--vela-fg-bright); background: var(--vela-hover); }
+.vela-bb-spacer { flex: 1 1 auto; }
+.vela-bb-clock { font-variant-numeric: tabular-nums; color: var(--vela-fg-bright); font-weight: 600; }
+.vela-bb-tz {
+    all: unset;
+    height: 26px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 8px;
+    border-radius: 4px;
+    font-weight: 600;
+    color: var(--vela-fg-bright);
+    cursor: pointer;
+}
+.vela-bb-tz:hover { background: var(--vela-hover); }
+.vela-bb-session { display: inline-flex; border: 1px solid var(--vela-border-strong); border-radius: 4px; overflow: hidden; margin-left: 6px; }
+.vela-bb-session-btn {
+    all: unset;
+    height: 24px;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 8px;
+    color: var(--vela-fg-muted);
+    font-size: 11px;
+    font-weight: 600;
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+.vela-bb-session-btn.is-active { color: var(--vela-fg); background: var(--vela-surface-elev); opacity: 0.8; }
+.vela-bb-settings {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 26px;
+    margin-left: 6px;
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--vela-fg-muted);
+    font-size: 14px;
+}
+.vela-bb-settings:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
+`;
+var Bottombar = class {
+  constructor(host, opts) {
+    this.settingsTip = null;
+    this.rangeButtons = /* @__PURE__ */ new Map();
+    this.timer = null;
+    this.timezone = opts.timezone;
+    const doc = host.ownerDocument;
+    injectStyles(STYLE_ID4, CSS4, doc);
+    this.el = doc.createElement("div");
+    this.el.className = "vela-widget-bottombar";
+    for (const preset of RANGE_PRESETS) {
+      const b = doc.createElement("button");
+      b.className = "vela-bb-range";
+      b.textContent = preset.id;
+      b.addEventListener("click", () => {
+        this.setActiveRange(preset.id);
+        opts.onRange(preset);
+      });
+      this.rangeButtons.set(preset.id, b);
+      this.el.appendChild(b);
+    }
+    const spacer = doc.createElement("span");
+    spacer.className = "vela-bb-spacer";
+    this.tzButton = doc.createElement("button");
+    this.tzButton.className = "vela-bb-tz";
+    this.tzButton.setAttribute("aria-label", "Time zone");
+    this.clockEl = doc.createElement("span");
+    this.clockEl.className = "vela-bb-clock";
+    this.tzLabelEl = doc.createElement("span");
+    this.tzLabelEl.textContent = tzButtonLabel(this.timezone);
+    this.tzButton.append(this.clockEl, this.tzLabelEl);
+    const session = doc.createElement("span");
+    session.className = "vela-bb-session";
+    session.title = "Session \u2014 stocks & ETFs only";
+    for (const [label, active] of [["RTH", true], ["ETH", false]]) {
+      const b = doc.createElement("button");
+      b.className = "vela-bb-session-btn" + (active ? " is-active" : "");
+      b.textContent = label;
+      b.disabled = true;
+      session.appendChild(b);
+    }
+    const settingsBtn = doc.createElement("button");
+    settingsBtn.className = "vela-bb-settings";
+    settingsBtn.appendChild(iconEl("gear", doc));
+    settingsBtn.setAttribute("aria-label", "Chart settings");
+    if (opts.onSettingsClick) settingsBtn.addEventListener("click", opts.onSettingsClick);
+    this.settingsTip = new Tooltip(settingsBtn, { content: "Chart settings", triggerId: "vela-bb-settings", host });
+    this.el.append(spacer, this.tzButton, session, settingsBtn);
+    host.appendChild(this.el);
+    this.tzMenu = new Menu({
+      trigger: this.tzButton,
+      triggerId: "vela-bb-tz",
+      host,
+      placement: "top-end",
+      items: this.tzItems(),
+      onSelect: (zone) => {
+        this.setTimezone(zone);
+        opts.onTimezone(zone);
+      }
+    });
+    this.tick();
+    this.timer = setInterval(() => this.tick(), 1e3);
+  }
+  setTimezone(zone) {
+    this.timezone = zone;
+    this.tzLabelEl.textContent = tzButtonLabel(zone);
+    this.tzMenu.setItems(this.tzItems());
+    this.tick();
+  }
+  /** Highlight (or clear with null) the active range chip — cleared on manual tf changes. */
+  setActiveRange(id) {
+    for (const [key, b] of this.rangeButtons) {
+      if (id !== null && key === id) b.dataset.active = "1";
+      else delete b.dataset.active;
+    }
+  }
+  destroy() {
+    if (this.timer !== null) clearInterval(this.timer);
+    this.tzMenu.destroy();
+    this.settingsTip?.destroy();
+    this.el.remove();
+  }
+  tzItems() {
+    return TIMEZONES.map((t) => ({
+      id: t.value,
+      label: tzMenuLabel(t.value, t.label),
+      checked: t.value === normalizeTimezone(this.timezone)
+    }));
+  }
+  tick() {
+    try {
+      this.clockEl.textContent = new Intl.DateTimeFormat("en-GB", {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+        timeZone: this.timezone
+      }).format(/* @__PURE__ */ new Date());
+    } catch {
+      this.clockEl.textContent = "";
+    }
+  }
+};
+
+// src/widget/symbol-picker.ts
+var TOP_TICKERS = ["BTCUSDT", "ETHUSDT", "SOLUSDT", "BNBUSDT", "XRPUSDT", "DOGEUSDT", "ADAUSDT", "LINKUSDT"];
+function parseQuery(raw, venues) {
+  const m = raw.match(/^\s*([^\s:]+)\s*[:\s]\s*(.*)$/);
+  if (m) {
+    const t = m[1].toLowerCase();
+    const scope = venues.includes(t) ? t : onlyOne(venues.filter((v) => v.startsWith(t)));
+    if (scope) return { scope, term: m[2].trim() };
+  }
+  return { scope: null, term: raw.trim() };
+}
+function onlyOne(matches) {
+  return matches.length === 1 ? matches[0] : null;
+}
+function filterSymbols(list, query, limit = 100) {
+  const venues = [...new Set(list.map((s) => s.provider?.toLowerCase()).filter((p) => !!p))];
+  const { scope, term } = parseQuery(query, venues);
+  const pool = scope ? list.filter((s) => s.provider?.toLowerCase() === scope) : list;
+  const q = term.toUpperCase();
+  if (!q) {
+    if (scope) return [...pool].sort((a, b) => a.ticker.localeCompare(b.ticker)).slice(0, limit);
+    const byTicker = new Map(pool.map((s) => [s.ticker.toUpperCase(), s]));
+    const top = TOP_TICKERS.map((t) => byTicker.get(t)).filter((s) => s !== void 0);
+    const rest = pool.filter((s) => !TOP_TICKERS.includes(s.ticker.toUpperCase()));
+    return [...top, ...rest].slice(0, limit);
+  }
+  const qLower = term.toLowerCase();
+  const prefix = [];
+  const substr = [];
+  const desc = [];
+  const venue = [];
+  for (const s of pool) {
+    const t = s.ticker.toUpperCase();
+    if (t.startsWith(q)) prefix.push(s);
+    else if (t.includes(q)) substr.push(s);
+    else if ((s.description ?? "").toUpperCase().includes(q)) desc.push(s);
+    else if (!scope && s.provider?.toLowerCase().includes(qLower)) venue.push(s);
+    if (prefix.length >= limit) break;
+  }
+  return [...prefix, ...substr, ...desc, ...venue].slice(0, limit);
+}
+var STYLE_ID5 = "vela-widget-symbolpicker";
+var CSS5 = `
+.vela-sp-searchrow {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 40px;
+    padding: 0 12px;
+    background: var(--vela-surface-elev);
+    border: 1px solid var(--vela-border);
+    border-radius: 8px;
+}
+.vela-sp-searchrow:focus-within { border-color: var(--vela-border-strong); }
+.vela-sp-searchrow .vela-icon { color: var(--vela-fg-muted); }
+.vela-sp-input {
+    flex: 1;
+    background: transparent;
+    color: var(--vela-fg);
+    border: none;
+    font-size: 14px;
+    outline: none;
+}
+.vela-sp-tabs { display: flex; gap: 14px; margin: 12px 2px 6px; border-bottom: 1px solid var(--vela-border); padding-bottom: 8px; }
+.vela-sp-tab {
+    all: unset;
+    padding: 3px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    color: var(--vela-fg-muted);
+    font-size: 13px;
+    font-weight: 600;
+}
+.vela-sp-tab:hover { color: var(--vela-fg); }
+.vela-sp-tab[data-active] { background: var(--vela-selected-bg); color: var(--vela-selected-fg); }
+.vela-sp-list { margin-top: var(--vela-space-2); max-height: 46vh; overflow: auto; }
+.vela-sp-list::-webkit-scrollbar { width: 8px; }
+.vela-sp-list::-webkit-scrollbar-thumb {
+    background: var(--vela-scroll);
+    border-radius: 4px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+}
+.vela-sp-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 7px 10px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+.vela-sp-row:hover, .vela-sp-row[data-highlighted] { background: var(--vela-hover); }
+.vela-sp-avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--vela-fg-on-fill);
+    font-size: var(--vela-font-size-md);
+    font-weight: 700;
+}
+.vela-sp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.vela-sp-ticker { font-weight: 700; color: var(--vela-fg-bright); font-size: 14px; }
+.vela-sp-desc { color: var(--vela-fg-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vela-sp-badge {
+    flex: none;
+    padding: 2px 8px;
+    border-radius: 4px;
+    background: var(--vela-surface-elev);
+    border: 1px solid var(--vela-border);
+    color: var(--vela-fg-muted);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+/* Provider brand marks \u2014 fixed by the venue, deliberately outside the theme palette. */
+.vela-sp-badge[data-p='binance'] { color: #f0b90b; } /* palette-exempt: venue brand mark */
+.vela-sp-badge[data-p='hyperliquid'] { color: #50d2c1; } /* palette-exempt: venue brand mark */
+.vela-sp-empty { padding: var(--vela-space-3); color: var(--vela-fg-muted); text-align: center; }
+`;
+var SymbolPicker = class {
+  constructor(opts) {
+    this.source = () => [];
+    this.rows = [];
+    this.highlighted = 0;
+    this.seed = "";
+    this.activeTab = "All";
+    const doc = (opts.host ?? document.body).ownerDocument;
+    injectStyles(STYLE_ID5, CSS5, doc);
+    this.input = doc.createElement("input");
+    this.input.className = "vela-sp-input";
+    this.input.placeholder = "Search symbol\u2026";
+    this.input.setAttribute("spellcheck", "false");
+    const searchRow = doc.createElement("div");
+    searchRow.className = "vela-sp-searchrow";
+    searchRow.append(iconEl("search", doc), this.input);
+    this.tabs = doc.createElement("div");
+    this.tabs.className = "vela-sp-tabs";
+    for (const t of ["All", "Stocks", "ETFs", "Crypto", "Forex", "Commodities"]) {
+      const b = doc.createElement("button");
+      b.className = "vela-sp-tab";
+      b.textContent = t;
+      if (t === this.activeTab) b.dataset.active = "1";
+      b.addEventListener("click", () => {
+        this.activeTab = t;
+        for (const c of this.tabs.children) delete c.dataset.active;
+        b.dataset.active = "1";
+        this.refresh();
+      });
+      this.tabs.appendChild(b);
+    }
+    this.list = doc.createElement("div");
+    this.list.className = "vela-sp-list";
+    this.dialog = new Dialog({
+      title: "Symbol Search",
+      host: opts.host,
+      closeOnInteractOutside: true,
+      content: (body) => body.append(searchRow, this.tabs, this.list),
+      onOpenChange: (open) => {
+        if (open) {
+          this.input.value = this.seed;
+          this.seed = "";
+          this.refresh();
+          setTimeout(() => {
+            this.input.focus();
+            this.input.setSelectionRange(this.input.value.length, this.input.value.length);
+          }, 0);
+        }
+        opts.onOpenChange?.(open);
+      }
+    });
+    this.input.addEventListener("input", () => this.refresh());
+    this.input.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowDown") this.moveHighlight(1);
+      else if (e.key === "ArrowUp") this.moveHighlight(-1);
+      else if (e.key === "Enter") {
+        const pick = this.rows[this.highlighted];
+        if (pick) this.select(pick.ticker, pick.provider, opts.onSelect);
+        return;
+      } else return;
+      e.preventDefault();
+    });
+    this.list.addEventListener("click", (e) => {
+      const row = e.target.closest(".vela-sp-row");
+      if (row?.dataset.ticker) this.select(row.dataset.ticker, row.dataset.provider, opts.onSelect);
+    });
+  }
+  /** Wire where symbols come from (re-called on every widget rebuild). */
+  setSource(source) {
+    this.source = source;
+  }
+  open(initialQuery = "") {
+    this.seed = initialQuery;
+    this.dialog.show();
+  }
+  close() {
+    this.dialog.hide();
+  }
+  destroy() {
+    this.dialog.destroy();
+  }
+  select(ticker, provider, onSelect) {
+    this.close();
+    onSelect(provider ? `${provider.toLowerCase()}:${ticker}` : ticker);
+  }
+  moveHighlight(delta) {
+    if (!this.rows.length) return;
+    this.highlighted = Math.min(this.rows.length - 1, Math.max(0, this.highlighted + delta));
+    this.renderHighlight();
+  }
+  renderHighlight() {
+    [...this.list.children].forEach((el, i) => {
+      if (i === this.highlighted) {
+        el.dataset.highlighted = "1";
+        el.scrollIntoView({ block: "nearest" });
+      } else delete el.dataset.highlighted;
+    });
+  }
+  refresh() {
+    const doc = this.list.ownerDocument;
+    const TAB_TYPES = { Crypto: ["crypto"], Stocks: ["stock"], ETFs: ["etf"], Forex: ["forex"], Commodities: ["commodity"] };
+    const pool = this.activeTab === "All" ? this.source() : this.source().filter((s) => TAB_TYPES[this.activeTab]?.includes((s.type ?? "").toLowerCase()) || this.activeTab === "Crypto" && (s.type ?? "").toLowerCase() === "futures");
+    this.rows = filterSymbols(pool, this.input.value);
+    this.highlighted = 0;
+    this.list.replaceChildren();
+    if (!this.rows.length) {
+      const empty = doc.createElement("div");
+      empty.className = "vela-sp-empty";
+      empty.textContent = this.input.value ? "No symbols match." : "No symbols indexed (provider still loading?).";
+      this.list.appendChild(empty);
+      return;
+    }
+    for (const s of this.rows) {
+      const row = doc.createElement("div");
+      row.className = "vela-sp-row";
+      row.dataset.ticker = s.ticker;
+      if (s.provider) row.dataset.provider = s.provider;
+      const av = tickerIconEl(doc, baseOf(s), s.ticker, "vela-sp-avatar");
+      const main = doc.createElement("span");
+      main.className = "vela-sp-main";
+      const t = doc.createElement("span");
+      t.className = "vela-sp-ticker";
+      t.textContent = s.ticker;
+      const d = doc.createElement("span");
+      d.className = "vela-sp-desc";
+      d.textContent = s.description ?? (s.type ?? "");
+      main.append(t, d);
+      row.append(av, main);
+      if (s.provider) {
+        const badge = doc.createElement("span");
+        badge.className = "vela-sp-badge";
+        badge.dataset.p = s.provider;
+        badge.textContent = s.provider;
+        row.appendChild(badge);
+      }
+      this.list.appendChild(row);
+    }
+    this.renderHighlight();
+  }
+};
+
+// src/widget/object-tree-model.ts
+var PRICE_PANE_ID = "price";
+var PRICE_PANE_LABEL = "Main chart";
+function drawingMeta(type) {
+  const meta = getDrawingType(type);
+  if (meta) return { label: meta.label, icon: meta.icon };
+  return { label: String(type || "drawing").replace(/(^|\s)\S/g, (c) => c.toUpperCase()), icon: null };
+}
+function drawingLabel(d) {
+  const { label } = drawingMeta(d.type);
+  const text = d.text?.value?.trim();
+  return text ? `${label} \u2014 ${text}` : label;
+}
+function paneLabel(pane, fallbackTitle) {
+  if (pane.kind === "price") return PRICE_PANE_LABEL;
+  const master = pane.indicators.find((i) => !i.ownScale) ?? pane.indicators[0];
+  if (master) return indicatorLabel(master, fallbackTitle);
+  return `Pane ${pane.order + 1}`;
+}
+function indicatorLabel(i, fallbackTitle) {
+  return i.title || fallbackTitle(i.id) || i.id;
+}
+function paneRows(pane) {
+  return pane.items.flatMap((it) => it.kind === "row" ? [it.row] : []);
+}
+function sameToken(a, b) {
+  if (a.kind === "price" || b.kind === "price") return a.kind === b.kind;
+  return a.kind === b.kind && a.id === b.id;
+}
+function unitTokens(u) {
+  if (u.kind === "draw") return [{ kind: "drawing", id: u.drawing.id }];
+  return u.members.map((m) => ({ kind: "drawing", id: m.id }));
+}
+function itemTokens(item) {
+  if (item.kind === "unit") return unitTokens(item.unit);
+  return [item.row.kind === "price" ? { kind: "price" } : { kind: "indicator", id: item.row.id }];
+}
+function paneTokens(pane) {
+  return pane.items.flatMap(itemTokens);
+}
+function tokenIndexOfSlot(pane, slot) {
+  let at = 0;
+  for (let i = 0; i < Math.min(slot, pane.items.length); i += 1) at += itemTokens(pane.items[i]).length;
+  return at;
+}
+function groupTokenIndex(pane, groupId, memberSlot) {
+  let at = 0;
+  for (const item of pane.items) {
+    if (item.kind === "unit" && item.unit.kind === "group" && item.unit.group.id === groupId) {
+      return at + Math.min(memberSlot, item.unit.members.length);
+    }
+    at += itemTokens(item).length;
+  }
+  return at;
+}
+function placeTokens(tokens, dragged, at) {
+  const isDragged = (t) => dragged.some((d) => sameToken(d, t));
+  let adjusted = at;
+  tokens.forEach((t, i) => {
+    if (i < at && isDragged(t)) adjusted -= 1;
+  });
+  const rest = tokens.filter((t) => !isDragged(t));
+  rest.splice(Math.max(0, Math.min(adjusted, rest.length)), 0, ...dragged);
+  return rest;
+}
+function tokensEqual(a, b) {
+  return a.length === b.length && a.every((t, i) => sameToken(t, b[i]));
+}
+function stackWrites(tokens) {
+  const n = tokens.length;
+  let candleZ = null;
+  const series = [];
+  const drawings = [];
+  tokens.forEach((t, i) => {
+    const z = n - i;
+    if (t.kind === "price") candleZ = z;
+    else if (t.kind === "indicator") series.push({ id: t.id, z });
+    else drawings.push({ id: t.id, z });
+  });
+  return { candleZ, series, drawings };
+}
+function zStackBounds(zOrder, candleZ, extra = []) {
+  const zs = [...zOrder.map((e) => e.z), ...extra];
+  return { top: Math.max(candleZ, 0, ...zs), bottom: Math.min(candleZ, 0, ...zs) };
+}
+function paneDrawings(drawings, paneId, paneIds) {
+  const mine = drawings.filter((d) => paneId === PRICE_PANE_ID ? d.paneId === PRICE_PANE_ID || !paneIds.has(d.paneId) : d.paneId === paneId);
+  return mine.slice().reverse();
+}
+function groupOf(groups, drawingId) {
+  return groups.find((g) => g.ids.includes(drawingId)) ?? null;
+}
+function groupState(members) {
+  return {
+    allHidden: members.length > 0 && members.every((d) => d.visible === false),
+    allLocked: members.length > 0 && members.every((d) => d.locked === true)
+  };
+}
+function canGroup(ids, groups) {
+  return ids.length > 0 && ids.every((id) => groupOf(groups, id) === null);
+}
+function nextGroupName(groups) {
+  const taken = new Set(groups.map((g) => g.name));
+  for (let n = 1; n <= groups.length; n += 1) {
+    const name = `Group ${n}`;
+    if (!taken.has(name)) return name;
+  }
+  return `Group ${groups.length + 1}`;
+}
+function withMembers(groups, keep) {
+  return groups.map((g) => ({ ...g, ids: g.ids.filter(keep) })).filter((g) => g.ids.length > 0);
+}
+function pruneGroups(groups, live) {
+  return withMembers(groups, (id) => live.has(id));
+}
+function removeFromGroups(groups, ids) {
+  const drop = new Set(ids);
+  return withMembers(groups, (id) => !drop.has(id));
+}
+function assignToGroup(groups, groupId, ids) {
+  const moving = new Set(ids);
+  const next = groups.map((g) => {
+    const kept = g.ids.filter((id) => !moving.has(id));
+    return { ...g, ids: g.id === groupId ? [...kept, ...ids] : kept };
+  });
+  return next.filter((g) => g.ids.length > 0);
+}
+function drawingUnits(paneDraws, groups) {
+  const units = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const d of paneDraws) {
+    if (seen.has(d.id)) continue;
+    const g = groupOf(groups, d.id);
+    if (g) {
+      const members = paneDraws.filter((x) => g.ids.includes(x.id));
+      for (const m of members) seen.add(m.id);
+      units.push({ kind: "group", group: g, members });
+    } else {
+      seen.add(d.id);
+      units.push({ kind: "draw", drawing: d });
+    }
+  }
+  return units;
+}
+function unitZ(u) {
+  if (u.kind === "draw") return u.drawing.zIndex;
+  return u.members[0]?.zIndex ?? 0;
+}
+function paneItems(snap, pane, units) {
+  const priceRow = () => ({ kind: "price", label: snap.priceLabel, visible: snap.priceVisible });
+  const indicatorRow = (i) => ({
+    kind: "indicator",
+    id: i.id,
+    label: indicatorLabel(i, snap.handleTitle),
+    visible: snap.indicatorVisible(i.id),
+    ownScale: i.ownScale
+  });
+  const unitItems = units.map((unit) => ({ kind: "unit", unit }));
+  if (!snap.stackable) {
+    const rows2 = pane.indicators.map((i) => ({ kind: "row", row: indicatorRow(i) }));
+    if (pane.kind === "price") rows2.unshift({ kind: "row", row: priceRow() });
+    return [...unitItems, ...rows2];
+  }
+  const zOf = new Map(snap.zOrder.map((e) => [e.id, e.z]));
+  const rows = pane.indicators.map((i) => ({ item: { kind: "row", row: indicatorRow(i) }, z: zOf.get(i.id) ?? 0 }));
+  if (pane.kind === "price") rows.push({ item: { kind: "row", row: priceRow() }, z: snap.candleZ });
+  rows.sort((a, b) => b.z - a.z);
+  if (!snap.interleave) return [...unitItems, ...rows.map((r) => r.item)];
+  const entries = [...rows, ...units.map((unit) => ({ item: { kind: "unit", unit }, z: unitZ(unit) }))];
+  entries.sort((a, b) => a.z === b.z ? Number(a.item.kind === "unit") - Number(b.item.kind === "unit") : b.z - a.z);
+  return entries.map((e) => e.item);
+}
+function buildTree(snap) {
+  const paneIds = new Set(snap.panes.map((p) => p.id));
+  return snap.panes.map((pane) => ({
+    id: pane.id,
+    kind: pane.kind,
+    label: paneLabel(pane, snap.handleTitle),
+    order: pane.order,
+    collapsed: pane.collapsed,
+    maximized: pane.maximized,
+    items: paneItems(snap, pane, drawingUnits(paneDrawings(snap.drawings, pane.id, paneIds), snap.groups))
+  }));
+}
+function treeIsEmpty(panes) {
+  return panes.every((p) => p.items.every((it) => it.kind === "row" && it.row.kind === "price"));
+}
+
+// src/widget/object-tree.ts
+var STYLE_ID6 = "vela-widget-objtree";
+var CSS6 = `
+/* One pane's block. The transparent border reserves the drop-target outline. */
+.vela-ot-pane {
+    border: 1px solid transparent;
+    border-radius: 6px;
+    margin: 2px 0;
+}
+.vela-ot-panehead { display: flex; align-items: center; gap: 2px; padding: 5px 6px; }
+.vela-ot-panename {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--vela-fg-muted);
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+.vela-ot-panesep { height: 1px; background: var(--vela-border); margin: 6px 8px; }
+
+.vela-ot-row {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 6px 6px;
+    border-radius: 6px;
+    cursor: default;
+}
+.vela-ot-row:hover { background: var(--vela-hover); }
+.vela-ot-row > .vela-icon { color: var(--vela-fg-muted); width: 14px; height: 14px; font-size: 14px; justify-content: center; flex: none; }
+/* Drawing glyphs come from the type registry at toolbar scale \u2014 bring them down to row size. */
+.vela-ot-row > .vela-icon svg { width: 14px; height: 14px; }
+.vela-ot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vela-ot-row[data-hidden] .vela-ot-name,
+.vela-ot-row[data-hidden] > .vela-icon { opacity: 0.45; }
+/* Two different states, and both can be true at once: "picked" is what the panel has selected
+   (the group/duplicate candidates), "selected" mirrors what the CHART has selected. */
+.vela-ot-row[data-picked] { background: var(--vela-active); }
+.vela-ot-row[data-picked] .vela-ot-name { color: var(--vela-fg-bright); }
+.vela-ot-row[data-selected] { box-shadow: inset 2px 0 0 var(--vela-accent); }
+.vela-ot-avatar {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--vela-fg-on-fill);
+    font-size: 10px;
+    font-weight: 700;
+}
+/* "scale": this indicator draws against its own price scale, not the pane's. */
+.vela-ot-tag {
+    flex: none;
+    font-size: 9px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--vela-fg-muted);
+    background: var(--vela-hover);
+    border-radius: 3px;
+    padding: 1px 4px;
+}
+/* One row's actions, kept in a tight cluster: they read as one control group, and the row's
+   own wider gap stays between the label and them. */
+.vela-ot-acts { display: flex; align-items: center; gap: 0; flex: none; }
+.vela-ot-btn {
+    all: unset;
+    cursor: pointer;
+    flex: none;
+    width: 20px;
+    height: 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 3px;
+    color: var(--vela-fg-muted);
+    font-size: 12px;
+    visibility: hidden;
+}
+.vela-ot-row:hover .vela-ot-btn,
+.vela-ot-panehead:hover .vela-ot-btn { visibility: visible; }
+/* An engaged action stays out: hidden and locked are states, and a state the user can only
+   see by hovering is a state they will not find. */
+.vela-ot-row .vela-ot-btn[data-engaged] { visibility: visible; color: var(--vela-fg); }
+.vela-ot-btn:hover:not(:disabled) { background: var(--vela-active); color: var(--vela-fg-bright); }
+.vela-ot-btn:disabled { opacity: 0.35; cursor: default; }
+.vela-ot-empty { padding: 20px 10px; text-align: center; color: var(--vela-fg-muted); font-size: 12px; }
+
+/* \u2500\u2500 drawing groups \u2500\u2500 */
+/* One top-level entry in a pane's drawing list: a lone drawing, or a whole group block. The
+   transparent border reserves the outline used when a drawing is dropped into the group. */
+.vela-ot-unit { border: 1px solid transparent; border-radius: 6px; }
+.vela-ot-row[data-row-kind='group'] > .vela-icon { width: 12px; font-size: 11px; }
+/* A member sits indented under its group's header. */
+.vela-ot-subrow { padding-left: 26px; }
+.vela-ot-rename {
+    flex: 1;
+    min-width: 0;
+    padding: 1px 4px;
+    border: 1px solid var(--vela-accent);
+    border-radius: var(--vela-radius-sm);
+    background: var(--vela-surface-elev);
+    color: var(--vela-fg-bright);
+    font: inherit;
+}
+/* The selection bar. Always there \u2014 the actions it holds are the panel's, not a row's, so they
+   stay in place and simply go dim until a drawing is selected. It stays put at the top of the
+   list while the list scrolls under it, so they never scroll out of reach. */
+.vela-ot-selbar {
+    position: sticky;
+    top: -8px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    margin: -8px -8px 6px;
+    padding: 6px 8px;
+    border-bottom: 1px solid var(--vela-border);
+    background: var(--vela-bg);
+}
+.vela-ot-selcount { flex: 1; min-width: 0; color: var(--vela-fg-muted); font-size: 11px; }
+.vela-ot-selbar .vela-ot-btn { visibility: visible; width: 24px; height: 22px; }
+.vela-ot-selbar .vela-ot-btn[data-icon='group'] .vela-icon { width: 16px; height: 16px; font-size: 16px; }
+
+/* \u2500\u2500 drag-and-drop \u2500\u2500 */
+.vela-ot-row[data-drag] { cursor: grab; }
+.vela-ot .vela-panel-body[data-dragging] .vela-ot-row[data-drag] { cursor: grabbing; }
+/* The row in flight fades: the ghost under the pointer is the thing being moved. */
+.vela-ot-row[data-source] { opacity: 0.4; }
+/* Buttons would only invite a click that a drag is about to swallow. */
+.vela-ot .vela-panel-body[data-dragging] .vela-ot-btn { visibility: hidden; }
+
+/* The band between two pane blocks: a hairline at rest, a bright bar when dropping there
+   would open a new pane. Doubles as the plain separator when dragging isn't available. */
+.vela-ot-gap { position: relative; height: 11px; border-radius: 3px; margin: 0 8px; }
+.vela-ot-gap::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 1px;
+    background: var(--vela-border);
+    transform: translateY(-50%);
+}
+.vela-ot-gap[data-drop] { height: 4px; background: var(--vela-fg-bright); }
+.vela-ot-gap[data-drop]::before { display: none; }
+/* A whole container accepts the drop: merging into a pane, or a pane with no drawings yet.
+   The pane block's transparent border reserves the room for this outline. */
+.vela-ot [data-drop='target'] { border-color: var(--vela-fg-bright); background: var(--vela-hover); }
+/* Where a reorder would insert. */
+.vela-ot [data-drop='before'] { box-shadow: inset 0 2px 0 var(--vela-fg-bright); }
+.vela-ot [data-drop='after'] { box-shadow: inset 0 -2px 0 var(--vela-fg-bright); }
+
+.vela-ot-ghost {
+    position: fixed;
+    z-index: 9999;
+    pointer-events: none;
+    max-width: 220px;
+    padding: 3px 10px;
+    border: 1px solid var(--vela-fg-bright);
+    border-radius: var(--vela-radius-sm);
+    background: var(--vela-surface-overlay);
+    color: var(--vela-fg);
+    box-shadow: var(--vela-shadow);
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+`;
+var REFRESH_EVENTS = [
+  "indicator:added",
+  "indicator:removed",
+  "indicator:moved",
+  "indicator:visibility",
+  "pane:changed",
+  "drawing:created",
+  "drawing:edited",
+  "drawing:removed"
+];
+var DRAG_SLOP = 4;
+function insertionSlot(els, y) {
+  for (let i = 0; i < els.length; i += 1) {
+    const r = els[i].getBoundingClientRect();
+    if (y < r.top + r.height / 2) return i;
+  }
+  return els.length;
+}
+var MenuBuilder = class {
+  constructor() {
+    this.actions = /* @__PURE__ */ new Map();
+    this.seq = 0;
+  }
+  entry(label, icon2, run, separatorBefore = false) {
+    const id = this.next();
+    this.actions.set(id, run);
+    return { id, label, icon: icon2, separatorBefore };
+  }
+  submenu(label, icon2, submenu, separatorBefore = false) {
+    return { id: this.next(), label, icon: icon2, submenu, separatorBefore };
+  }
+  next() {
+    this.seq += 1;
+    return `ot${this.seq}`;
+  }
+};
+var ObjectTree = class extends SidePanel {
+  constructor(host) {
+    super(host, "Object tree", "vela-ot");
+    this.chart = null;
+    this.selectedDrawing = null;
+    this.symbolName = "";
+    /** Drawing bundles — a view-side grouping, held for the panel's lifetime and never persisted.
+     *  Kept per chart because a workspace points this one panel at whichever chart is active, and
+     *  each chart's bundles have to survive the switch. */
+    this.groupsPerChart = /* @__PURE__ */ new WeakMap();
+    /** Group ids currently folded shut. Ids are never reused, so entries left behind by a group
+     *  that is gone are inert and can outlive it. */
+    this.collapsed = /* @__PURE__ */ new Set();
+    /** Drawings picked IN THE PANEL — what the selection bar and "group selection" act on. */
+    this.picked = /* @__PURE__ */ new Set();
+    /** The group showing its rename field, if any. */
+    this.renaming = null;
+    /** Set while the panel pushes its pick to the chart, so the `drawing:selected` that comes
+     *  back is recognised as our own echo instead of a fresh chart-side selection. */
+    this.syncingSelection = false;
+    this.groupSeq = 0;
+    this.unsubs = [];
+    /** The last render's model, kept so a right-click reads the same state the rows show. */
+    this.pass = null;
+    this.menu = null;
+    this.menuActions = /* @__PURE__ */ new Map();
+    this.drag = null;
+    injectStyles(STYLE_ID6, CSS6, host.ownerDocument);
+    this.body.addEventListener("contextmenu", (e) => this.onContextMenu(e));
+    this.body.addEventListener("pointerdown", (e) => this.onPointerDown(e));
+  }
+  get groups() {
+    return (this.chart === null ? void 0 : this.groupsPerChart.get(this.chart)) ?? [];
+  }
+  set groups(next) {
+    if (this.chart) this.groupsPerChart.set(this.chart, next);
+  }
+  toggle(open = this.el.hidden) {
+    super.toggle(open);
+    if (open) this.refresh();
+  }
+  setSymbol(symbol) {
+    this.symbolName = parseSymbol(symbol).ticker;
+  }
+  /** (Re)bind to a chart instance — called after every widget rebuild. */
+  onChart(chart) {
+    this.detach();
+    this.chart = chart;
+    for (const ev of REFRESH_EVENTS) {
+      this.unsubs.push(chart.on(ev, () => this.refresh()));
+    }
+    this.unsubs.push(
+      chart.on("drawing:selected", ({ id }) => {
+        this.selectedDrawing = id;
+        if (!this.syncingSelection) {
+          this.picked.clear();
+          if (id) this.picked.add(id);
+        }
+        this.refresh();
+      })
+    );
+    this.refresh();
+  }
+  destroy() {
+    this.detach();
+    this.endDrag(false);
+    this.menu?.destroy();
+    this.menu = null;
+    super.destroy();
+  }
+  detach() {
+    for (const u of this.unsubs) u();
+    this.unsubs = [];
+    this.chart = null;
+  }
+  /** Read the chart into the layout's input. Every chart query happens here, once a pass. */
+  snapshot(chart, handle) {
+    const stackable = chart.renderer.supports("seriesOrder") && chart.renderer.supports("candleZOrder");
+    return {
+      panes: chart.panes.list(),
+      indicatorVisible: (id) => handle(id)?.visible !== false,
+      handleTitle: (id) => handle(id)?.title,
+      stackable,
+      interleave: stackable && chart.drawings.supported && chart.renderer.capabilities.drawingDepth === true,
+      zOrder: stackable ? chart.renderer.get("seriesOrder") ?? [] : [],
+      candleZ: stackable ? Number(chart.renderer.get("candleZOrder")) || 0 : 0,
+      priceLabel: this.symbolName || "Price",
+      priceVisible: chart.renderer.get("candleVisible") !== false,
+      drawings: chart.drawings.supported ? chart.drawings.all() : [],
+      groups: this.groups
+    };
+  }
+  /**
+   * Repaint because something changed — unless the panel is mid-interaction. A live drag
+   * resolves drops against the rows as currently rendered, and a rename lives in an input
+   * that a repaint would destroy mid-word. Both end by painting themselves.
+   */
+  refresh() {
+    if (this.drag?.active === true || this.renaming !== null) return;
+    this.render();
+  }
+  render() {
+    if (this.el.hidden || !this.chart) return;
+    const chart = this.chart;
+    this.prune(chart);
+    const byId = new Map(chart.indicators().map((h) => [h.id, h]));
+    const snap = this.snapshot(chart, (id) => byId.get(id));
+    const panes = buildTree(snap);
+    const pass = { chart, handle: (id) => byId.get(id), stackable: snap.stackable, repanable: chart.panes.supported, interleave: snap.interleave, panes };
+    this.pass = pass;
+    this.body.replaceChildren();
+    const doc = this.el.ownerDocument;
+    this.body.appendChild(this.selectionBar(pass));
+    panes.forEach((pane, i) => {
+      if (i > 0) this.body.appendChild(this.gapEl(pass, panes[i - 1].id, pane.id));
+      this.body.appendChild(this.paneBlock(pass, pane));
+    });
+    const last = panes[panes.length - 1];
+    if (last && pass.repanable) this.body.appendChild(this.gapEl(pass, last.id, void 0));
+    if (treeIsEmpty(panes)) {
+      const empty = doc.createElement("div");
+      empty.className = "vela-ot-empty";
+      empty.textContent = "Add an indicator or a drawing to populate the tree";
+      this.body.appendChild(empty);
+    }
+  }
+  /** What the panel itself can do to the selected drawings: bundle them into a group, or
+   *  duplicate all of them. Always in place, dim until there is a selection to act on. */
+  selectionBar(pass) {
+    const doc = this.el.ownerDocument;
+    const bar = doc.createElement("div");
+    bar.className = "vela-ot-selbar";
+    const ids = [...this.picked];
+    const groupable = canGroup(ids, this.groups);
+    bar.appendChild(
+      this.btn({
+        icon: "group",
+        title: ids.length === 0 ? "Group the selected drawings" : groupable ? `Group ${ids.length === 1 ? "this drawing" : "these drawings"}` : "Already in a group",
+        disabled: !groupable,
+        run: () => this.makeGroup(ids)
+      })
+    );
+    bar.appendChild(
+      this.btn({
+        icon: "clone",
+        title: ids.length === 0 ? "Duplicate the selected drawings" : "Duplicate",
+        disabled: ids.length === 0,
+        run: () => {
+          for (const id of ids) this.cloneInto(pass, id);
+          this.render();
+        }
+      })
+    );
+    const count = doc.createElement("span");
+    count.className = "vela-ot-selcount";
+    count.textContent = ids.length > 1 ? `${ids.length} selected` : "";
+    bar.appendChild(count);
+    return bar;
+  }
+  /** The band between two pane blocks. With re-paning available it is a drop zone that opens
+   *  a fresh pane there; otherwise it is just the separator. `before`/`after` name the panes
+   *  it sits between (either end is open at the edges of the list). */
+  gapEl(pass, after, before) {
+    const el = this.el.ownerDocument.createElement("div");
+    if (!pass.repanable) {
+      el.className = "vela-ot-panesep";
+      return el;
+    }
+    el.className = "vela-ot-gap";
+    if (before !== void 0) el.dataset.before = before;
+    if (after !== void 0) el.dataset.after = after;
+    return el;
+  }
+  /**
+   * A pane, read top to bottom as front to back: ONE column holding its drawings, its
+   * indicators and (in the main pane) the candles, in draw order. Every child of the stack
+   * element is one slot, so a drop position is read straight off the rendered geometry.
+   */
+  paneBlock(pass, pane) {
+    const doc = this.el.ownerDocument;
+    const block = doc.createElement("div");
+    block.className = "vela-ot-pane";
+    block.dataset.pane = pane.id;
+    block.dataset.kind = pane.kind;
+    block.appendChild(this.paneHead(pass, pane));
+    const stack = doc.createElement("div");
+    stack.className = "vela-ot-stack";
+    for (const item of pane.items) {
+      stack.appendChild(item.kind === "row" ? this.rowEl(pass, pane, item.row) : this.unitEl(pass, pane, item.unit));
+    }
+    block.appendChild(stack);
+    return block;
+  }
+  /** One top-level drawing entry: a lone drawing's row, or a group block — its header plus,
+   *  unfolded, a member row for each drawing it holds. */
+  unitEl(pass, pane, unit) {
+    const doc = this.el.ownerDocument;
+    const wrap = doc.createElement("div");
+    wrap.className = "vela-ot-unit";
+    if (unit.kind === "draw") {
+      wrap.appendChild(this.drawRow(pass, unit.drawing));
+    } else {
+      wrap.dataset.group = unit.group.id;
+      wrap.appendChild(this.groupRow(pass, pane, unit.group));
+      if (!this.collapsed.has(unit.group.id)) {
+        for (const m of unit.members) wrap.appendChild(this.drawRow(pass, m, true));
+      }
+    }
+    return wrap;
+  }
+  /** The pane's name plus its ops: a study pane can move in the stack and collapse; every
+   *  pane can be maximized. */
+  paneHead(pass, pane) {
+    const doc = this.el.ownerDocument;
+    const { chart } = pass;
+    const head = doc.createElement("div");
+    head.className = "vela-ot-panehead";
+    const name = doc.createElement("span");
+    name.className = "vela-ot-panename";
+    name.textContent = pane.label;
+    name.title = pane.label;
+    head.appendChild(name);
+    if (!chart.panes.supported) return head;
+    const acts = doc.createElement("span");
+    acts.className = "vela-ot-acts";
+    head.appendChild(acts);
+    const op = (icon2, title, run) => {
+      acts.appendChild(this.btn({ icon: icon2, title, run }));
+    };
+    if (pane.kind !== "price") {
+      if (pane.order > 1) op("arrow-up", "Move pane up", () => chart.panes.move(pane.id, "up"));
+      if (pane.order < pass.panes.length - 1) op("arrow-down", "Move pane down", () => chart.panes.move(pane.id, "down"));
+      op(pane.collapsed ? "expand" : "collapse", pane.collapsed ? "Expand pane" : "Collapse pane", () => chart.panes.collapse(pane.id, !pane.collapsed));
+    }
+    op(pane.maximized ? "restore" : "maximize", pane.maximized ? "Restore panes" : "Maximize pane", () => chart.panes.maximize(pane.maximized ? null : pane.id));
+    return head;
+  }
+  rowEl(pass, pane, row) {
+    const doc = this.el.ownerDocument;
+    const { chart } = pass;
+    if (row.kind === "price") {
+      const base = this.symbolName.replace(/[-_/]?(USDT|USDC|USD1|USDS|BUSD|USD|EUR|PERP)$/i, "") || this.symbolName;
+      const icon2 = tickerIconEl(doc, base || "P", this.symbolName || "Price", "vela-ot-avatar");
+      const el2 = this.row(icon2, row.label, row.visible, [
+        {
+          icon: row.visible ? "eye" : "eye-off",
+          title: row.visible ? "Hide" : "Show",
+          engaged: !row.visible,
+          run: () => {
+            chart.renderer.set("candleVisible", !row.visible);
+            this.refresh();
+          }
+        }
+      ]);
+      el2.dataset.rowKind = "price";
+      el2.dataset.pane = pane.id;
+      if (pass.stackable) {
+        el2.dataset.drag = "1";
+        el2.title = "Drag to change what draws in front";
+      }
+      return el2;
+    }
+    const handle = pass.handle(row.id);
+    const el = this.row(
+      iconEl("indicators", doc),
+      row.label,
+      row.visible,
+      [
+        {
+          icon: row.visible ? "eye" : "eye-off",
+          title: row.visible ? "Hide" : "Show",
+          engaged: !row.visible,
+          run: () => {
+            handle?.setVisible(!row.visible);
+            this.refresh();
+          }
+        },
+        {
+          icon: "trash",
+          title: "Remove",
+          run: () => {
+            handle?.remove();
+            this.refresh();
+          }
+        }
+      ],
+      row.ownScale ? "scale" : void 0
+    );
+    el.dataset.rowKind = "indicator";
+    el.dataset.id = row.id;
+    el.dataset.pane = pane.id;
+    if (pass.repanable || pass.stackable) {
+      el.dataset.drag = "1";
+      el.title = pass.repanable ? "Drag to another pane, or between panes for a new one" : "Drag to change what draws in front";
+    }
+    return el;
+  }
+  /** A group's header: fold arrow, its name (or the rename field), then actions that apply to
+   *  every member at once. Reports "all hidden"/"all locked" rather than a mixed state.
+   *
+   * The state comes from the whole bundle, not from the members listed under this pane: should
+   * a member end up on another pane, the header still speaks for the group its actions affect.
+   */
+  groupRow(pass, pane, g) {
+    const doc = this.el.ownerDocument;
+    const folded = this.collapsed.has(g.id);
+    const members = pass.chart.drawings.all().filter((d) => g.ids.includes(d.id));
+    const { allHidden, allLocked } = groupState(members);
+    const ids = [...g.ids];
+    const el = this.row(iconEl(folded ? "chevron-right" : "chevron-down", doc), g.name, !allHidden, [
+      {
+        icon: allLocked ? "lock" : "unlock",
+        title: allLocked ? "Unlock all" : "Lock all",
+        engaged: allLocked,
+        run: () => this.setMembers(pass, ids, { locked: !allLocked })
+      },
+      {
+        icon: allHidden ? "eye-off" : "eye",
+        title: allHidden ? "Show all" : "Hide all",
+        engaged: allHidden,
+        run: () => this.setMembers(pass, ids, { visible: allHidden })
+      },
+      { icon: "trash", title: "Remove all", run: () => this.removeGroup(pass, g.id, true) }
+    ]);
+    el.dataset.rowKind = "group";
+    el.dataset.id = g.id;
+    el.dataset.pane = pane.id;
+    el.title = `${members.length} drawing${members.length === 1 ? "" : "s"} \u2014 drag to move them together`;
+    if (this.renaming === g.id) {
+      const name = el.querySelector(".vela-ot-name");
+      const input = doc.createElement("input");
+      input.className = "vela-ot-rename";
+      input.value = g.name;
+      name?.replaceWith(input);
+      queueMicrotask(() => {
+        input.focus();
+        input.select();
+      });
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          this.commitRename(g.id, input.value);
+        } else if (e.key === "Escape") {
+          this.renaming = null;
+          this.render();
+        } else if (e.key === " ") e.stopPropagation();
+      });
+      input.addEventListener("blur", () => this.commitRename(g.id, input.value));
+    } else {
+      el.dataset.drag = "1";
+      el.addEventListener("click", () => {
+        if (folded) this.collapsed.delete(g.id);
+        else this.collapsed.add(g.id);
+        this.render();
+      });
+    }
+    return el;
+  }
+  drawRow(pass, d, inGroup = false) {
+    const doc = this.el.ownerDocument;
+    const { chart } = pass;
+    const markup = drawingMeta(d.type).icon;
+    let icon2;
+    if (markup) {
+      icon2 = doc.createElement("span");
+      icon2.className = "vela-icon";
+      icon2.setAttribute("aria-hidden", "true");
+      icon2.innerHTML = markup;
+    } else {
+      icon2 = iconEl("pen", doc);
+    }
+    const el = this.row(icon2, drawingLabel(d), d.visible, [
+      {
+        icon: d.locked ? "lock" : "unlock",
+        title: d.locked ? "Unlock" : "Lock",
+        engaged: d.locked,
+        run: () => {
+          chart.drawings.lock(d.id, !d.locked);
+          this.refresh();
+        }
+      },
+      {
+        icon: d.visible ? "eye" : "eye-off",
+        title: d.visible ? "Hide" : "Show",
+        engaged: !d.visible,
+        run: () => {
+          chart.drawings.show(d.id, !d.visible);
+          this.refresh();
+        }
+      },
+      {
+        icon: "trash",
+        title: "Remove",
+        run: () => {
+          chart.drawings.remove(d.id);
+          this.refresh();
+        }
+      }
+    ]);
+    el.dataset.rowKind = "drawing";
+    el.dataset.id = d.id;
+    el.dataset.pane = d.paneId;
+    el.dataset.drag = "1";
+    el.title = "Drag to restack, or onto another pane to move it there";
+    if (inGroup) el.classList.add("vela-ot-subrow");
+    if (d.id === this.selectedDrawing) el.dataset.selected = "1";
+    if (this.picked.has(d.id)) el.dataset.picked = "1";
+    el.addEventListener("click", (e) => this.onDrawClick(e, d.id));
+    return el;
+  }
+  /** Clicking a drawing picks it; holding the platform's modifier extends the pick, and
+   *  clicking the only picked row clears it. The chart mirrors whatever comes out. */
+  onDrawClick(e, id) {
+    if (e.ctrlKey || e.metaKey) {
+      if (this.picked.has(id)) this.picked.delete(id);
+      else this.picked.add(id);
+    } else if (this.picked.has(id) && this.picked.size === 1) {
+      this.picked.clear();
+    } else {
+      this.picked.clear();
+      this.picked.add(id);
+    }
+    this.selectOnChart([...this.picked]);
+    this.render();
+  }
+  /** Push the panel's pick onto the chart, muting the `drawing:selected` echo it causes. */
+  selectOnChart(ids) {
+    const chart = this.chart;
+    if (!chart?.drawings.supported) return;
+    this.syncingSelection = true;
+    try {
+      chart.drawings.select(ids);
+    } finally {
+      this.syncingSelection = false;
+    }
+  }
+  /** The shared row shell: icon, name, optional tag, then the action buttons. */
+  row(icon2, label, visible, actions, tag) {
+    const doc = this.el.ownerDocument;
+    const el = doc.createElement("div");
+    el.className = "vela-ot-row";
+    if (!visible) el.dataset.hidden = "1";
+    const name = doc.createElement("span");
+    name.className = "vela-ot-name";
+    name.textContent = label;
+    name.title = label;
+    el.append(icon2, name);
+    if (tag) {
+      const t = doc.createElement("span");
+      t.className = "vela-ot-tag";
+      t.textContent = tag;
+      t.title = "Draws against its own price scale";
+      el.appendChild(t);
+    }
+    const acts = doc.createElement("span");
+    acts.className = "vela-ot-acts";
+    for (const a of actions) acts.appendChild(this.btn(a));
+    el.appendChild(acts);
+    return el;
+  }
+  btn(a) {
+    const doc = this.el.ownerDocument;
+    const b = doc.createElement("button");
+    b.className = "vela-ot-btn";
+    b.dataset.icon = a.icon;
+    if (a.engaged) b.dataset.engaged = "1";
+    if (a.disabled) b.disabled = true;
+    b.title = a.title;
+    b.appendChild(iconEl(a.icon, doc));
+    b.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (!a.disabled) a.run();
+    });
+    return b;
+  }
+  // ── groups ─────────────────────────────────────────────────────────────
+  // A group is the panel's own idea, not the chart's: it bundles drawings so they hide, lock,
+  // delete and move as one. It lives as long as the panel does.
+  /** Bundle drawings into a fresh group, which takes over the pick. */
+  makeGroup(ids) {
+    if (!canGroup(ids, this.groups)) return;
+    this.groupSeq += 1;
+    this.groups = [...this.groups, { id: `grp-${this.groupSeq}`, name: nextGroupName(this.groups), ids: [...ids] }];
+    this.picked.clear();
+    this.render();
+  }
+  commitRename(id, value) {
+    if (this.renaming !== id) return;
+    const name = value.trim();
+    this.groups = this.groups.map((g) => g.id === id && name !== "" ? { ...g, name } : g);
+    this.renaming = null;
+    this.render();
+  }
+  /** Dissolve a group. `withMembers` also deletes the drawings it held. */
+  removeGroup(pass, id, withMembers2) {
+    const g = this.groups.find((x) => x.id === id);
+    this.groups = this.groups.filter((x) => x.id !== id);
+    this.collapsed.delete(id);
+    if (withMembers2 && g) {
+      for (const m of g.ids) this.picked.delete(m);
+      pass.chart.drawings.removeMany(g.ids);
+    }
+    this.render();
+  }
+  /** Apply one patch to every member of a group as a single undo step. */
+  setMembers(pass, ids, patch) {
+    if (ids.length === 0) return;
+    pass.chart.drawings.updateMany(ids.map((id) => ({ id, patch })));
+    this.render();
+  }
+  /** Duplicate a drawing, keeping the copy in the same group as its original — the chart has
+   *  no notion of our groups, so the new id has to be spotted and filed here. */
+  cloneInto(pass, id) {
+    const { chart } = pass;
+    if (!chart.drawings.supported) return;
+    const before = new Set(chart.drawings.all().map((d) => d.id));
+    chart.drawings.clone(id);
+    const clone = chart.drawings.all().find((d) => !before.has(d.id));
+    const g = groupOf(this.groups, id);
+    if (g && clone) this.groups = assignToGroup(this.groups, g.id, [clone.id]);
+  }
+  // ── drag-and-drop ──────────────────────────────────────────────────────
+  // Indicator rows move between panes, into a fresh pane, or to a slot in the main pane's
+  // stack. The candles restack in place. Drawing rows take a slot among their pane's
+  // drawings, and land in another pane's list to move there.
+  onPointerDown(e) {
+    if (e.button !== 0 || this.drag) return;
+    const target = e.target;
+    if (target.closest(".vela-ot-btn")) return;
+    const rowEl = target.closest(".vela-ot-row[data-drag]");
+    if (!rowEl) return;
+    if (target.closest(".vela-ot-rename")) return;
+    const kind = rowEl.dataset.rowKind;
+    if (kind !== "price" && kind !== "indicator" && kind !== "drawing" && kind !== "group") return;
+    const win = this.el.ownerDocument.defaultView;
+    if (!win) return;
+    const drag = {
+      kind,
+      id: rowEl.dataset.id ?? null,
+      fromPane: rowEl.dataset.pane ?? PRICE_PANE_ID,
+      label: rowEl.querySelector(".vela-ot-name")?.textContent ?? "object",
+      startX: e.clientX,
+      startY: e.clientY,
+      active: false,
+      ghost: null,
+      drop: null,
+      onMove: (ev) => this.onDragMove(ev),
+      onUp: () => this.endDrag(true),
+      onCancel: () => this.endDrag(false)
+    };
+    this.drag = drag;
+    win.addEventListener("pointermove", drag.onMove);
+    win.addEventListener("pointerup", drag.onUp);
+    win.addEventListener("pointercancel", drag.onCancel);
+    e.preventDefault();
+  }
+  onDragMove(e) {
+    const drag = this.drag;
+    if (!drag) return;
+    if (!drag.active) {
+      if (Math.hypot(e.clientX - drag.startX, e.clientY - drag.startY) < DRAG_SLOP) return;
+      this.beginDrag(drag);
+    }
+    if (drag.ghost) {
+      drag.ghost.style.left = `${e.clientX + 12}px`;
+      drag.ghost.style.top = `${e.clientY + 8}px`;
+    }
+    drag.drop = this.resolveDrop(drag, e.clientX, e.clientY);
+    this.paintDropHint(drag.drop);
+  }
+  beginDrag(drag) {
+    drag.active = true;
+    this.body.dataset.dragging = "1";
+    const src = this.sourceRow(drag);
+    if (src) src.dataset.source = "1";
+    const ghost = this.el.ownerDocument.createElement("div");
+    ghost.className = "vela-ot-ghost";
+    ghost.textContent = drag.label;
+    this.uiHost().appendChild(ghost);
+    drag.ghost = ghost;
+  }
+  /** The rendered row a session started from — scanned rather than selected, so an id
+   *  carrying CSS-special characters needs no escaping. */
+  sourceRow(drag) {
+    for (const el of this.body.querySelectorAll(".vela-ot-row")) {
+      if (el.dataset.rowKind !== drag.kind) continue;
+      if (drag.id === null || el.dataset.id === drag.id) return el;
+    }
+    return null;
+  }
+  /** What a drop at this point would do. Measured off the live geometry, which is why a
+   *  refresh is suspended for the duration of the drag. */
+  resolveDrop(drag, x, y) {
+    const pass = this.pass;
+    if (!pass) return null;
+    if (drag.kind === "indicator") {
+      for (const gap of this.body.querySelectorAll(".vela-ot-gap")) {
+        const r = gap.getBoundingClientRect();
+        if (y >= r.top - 4 && y <= r.bottom + 4 && x >= r.left && x <= r.right) {
+          return { kind: "newPane", before: gap.dataset.before, after: gap.dataset.after, el: gap };
+        }
+      }
+    }
+    for (const block of this.body.querySelectorAll(".vela-ot-pane")) {
+      const r = block.getBoundingClientRect();
+      if (y < r.top || y > r.bottom) continue;
+      const paneId = block.dataset.pane ?? PRICE_PANE_ID;
+      if (drag.kind === "price" && block.dataset.kind !== "price") return null;
+      if (drag.kind === "indicator" && !pass.stackable) {
+        return paneId === drag.fromPane ? null : { kind: "merge", paneId, el: block };
+      }
+      const els = [...block.querySelector(":scope > .vela-ot-stack")?.children ?? []];
+      if (drag.kind === "drawing") {
+        for (const unit of els) {
+          const groupId = unit.dataset.group;
+          if (groupId === void 0) continue;
+          const ur = unit.getBoundingClientRect();
+          if (y < ur.top || y > ur.bottom) continue;
+          const subrows = [...unit.querySelectorAll(":scope > .vela-ot-subrow")];
+          return { kind: "intoGroup", paneId, groupId, memberSlot: insertionSlot(subrows, y), subrows, el: unit };
+        }
+      }
+      let slot = insertionSlot(els, y);
+      if ((drag.kind === "drawing" || drag.kind === "group") && !pass.interleave) {
+        const pane = pass.panes.find((p) => p.id === paneId);
+        const lead = pane ? pane.items.findIndex((it) => it.kind === "row") : -1;
+        if (lead >= 0) slot = Math.min(slot, lead);
+      }
+      return { kind: "slot", paneId, slot, els, el: block };
+    }
+    return null;
+  }
+  paintDropHint(drop) {
+    for (const el of this.body.querySelectorAll("[data-drop]")) delete el.dataset.drop;
+    if (!drop) return;
+    if (drop.kind === "newPane") {
+      drop.el.dataset.drop = "gap";
+      return;
+    }
+    if (drop.kind === "merge") {
+      drop.el.dataset.drop = "target";
+      return;
+    }
+    if (drop.kind === "intoGroup") {
+      drop.el.dataset.drop = "target";
+      const at2 = drop.subrows[drop.memberSlot];
+      if (at2) at2.dataset.drop = "before";
+      else if (drop.subrows.length > 0) drop.subrows[drop.subrows.length - 1].dataset.drop = "after";
+      return;
+    }
+    const at = drop.els[drop.slot];
+    if (drop.els.length === 0) drop.el.dataset.drop = "target";
+    else if (at) at.dataset.drop = "before";
+    else drop.els[drop.els.length - 1].dataset.drop = "after";
+  }
+  /** Close the session out: `apply` false abandons the move (a cancelled pointer, a teardown). */
+  endDrag(apply) {
+    const drag = this.drag;
+    this.drag = null;
+    if (!drag) return;
+    const win = this.el.ownerDocument.defaultView;
+    win?.removeEventListener("pointermove", drag.onMove);
+    win?.removeEventListener("pointerup", drag.onUp);
+    win?.removeEventListener("pointercancel", drag.onCancel);
+    if (!drag.active) return;
+    drag.ghost?.remove();
+    delete this.body.dataset.dragging;
+    const src = this.sourceRow(drag);
+    if (src) delete src.dataset.source;
+    this.paintDropHint(null);
+    if (apply && drag.drop) this.applyDrop(drag, drag.drop);
+    this.refresh();
+  }
+  applyDrop(drag, drop) {
+    const pass = this.pass;
+    if (!pass) return;
+    const { chart } = pass;
+    switch (drop.kind) {
+      case "merge":
+        if (drag.id !== null && drop.paneId !== drag.fromPane) {
+          chart.panes.moveIndicator(drag.id, drop.paneId === PRICE_PANE_ID ? "price" : { pane: drop.paneId });
+        }
+        return;
+      case "newPane": {
+        const from = pass.panes.find((p) => p.id === drag.fromPane);
+        const alone = from !== void 0 && from.kind !== "price" && paneRows(from).length <= 1;
+        if (alone && (drop.before === drag.fromPane || drop.after === drag.fromPane)) return;
+        if (drag.id !== null) chart.panes.moveIndicator(drag.id, { newPane: { before: drop.before, after: drop.after } });
+        return;
+      }
+      case "slot":
+      case "intoGroup":
+        this.applySlotDrop(pass, drag, drop);
+        return;
+    }
+  }
+  /**
+   * Land a drop in a pane's stack: place the dragged tokens (the candles, an indicator, a
+   * drawing, or a group's whole run of drawings) at the measured position, then renormalize
+   * the pane's z keys in one sweep — `candleZOrder`/`seriesOrder` for the series, a single
+   * `updateMany` (one undo step) for the drawings, re-paning the ones that crossed panes.
+   */
+  applySlotDrop(pass, drag, drop) {
+    const { chart } = pass;
+    const target = pass.panes.find((p) => p.id === drop.paneId);
+    if (!target) return;
+    const isDrawing = drag.kind === "drawing" || drag.kind === "group";
+    if (isDrawing && !chart.drawings.supported) return;
+    const dragged = drag.kind === "price" ? [{ kind: "price" }] : drag.kind === "indicator" ? [{ kind: "indicator", id: drag.id }] : this.draggedDrawings(pass, drag).map((id) => ({ kind: "drawing", id }));
+    if (dragged.length === 0 || drag.kind !== "price" && drag.id === null) return;
+    if (drag.kind === "indicator" && drag.fromPane !== drop.paneId) {
+      chart.panes.moveIndicator(drag.id, drop.paneId === PRICE_PANE_ID ? "price" : { pane: drop.paneId });
+    }
+    const tokens = paneTokens(target);
+    const at = drop.kind === "intoGroup" ? groupTokenIndex(target, drop.groupId, drop.memberSlot) : tokenIndexOfSlot(target, drop.slot);
+    const placed = placeTokens(tokens, dragged, at);
+    if (drag.kind === "drawing") {
+      this.groups = drop.kind === "intoGroup" ? assignToGroup(this.groups, drop.groupId, [drag.id]) : removeFromGroups(this.groups, [drag.id]);
+    }
+    const live = new Map(chart.drawings.all().map((d) => [d.id, d]));
+    const draggedIds = new Set(dragged.flatMap((t) => t.kind === "drawing" ? [t.id] : []));
+    const repaned = [...draggedIds].some((id) => live.get(id)?.paneId !== drop.paneId);
+    if (tokensEqual(tokens, placed) && !repaned) return;
+    this.writeStack(pass, drop.paneId, placed, draggedIds);
+  }
+  /** Renormalize one pane's z keys from a placed token stack: the series through the
+   *  renderer's order settings, the drawings as ONE `updateMany` (a single undo step),
+   *  re-paning the dragged ones that arrived from another pane. */
+  writeStack(pass, paneId, placed, draggedIds) {
+    const { chart } = pass;
+    const live = new Map(chart.drawings.all().map((d) => [d.id, d]));
+    const writes = stackWrites(placed);
+    if (pass.stackable) {
+      if (writes.candleZ !== null) chart.renderer.set("candleZOrder", writes.candleZ);
+      for (const s of writes.series) chart.renderer.set("seriesOrder", { id: s.id, z: s.z });
+    }
+    if (writes.drawings.length > 0) {
+      chart.drawings.updateMany(
+        writes.drawings.map(({ id, z }) => ({
+          id,
+          patch: { zIndex: z, ...draggedIds.has(id) && live.get(id)?.paneId !== paneId ? { paneId } : {} }
+        }))
+      );
+    }
+  }
+  /** Move a group's whole run to an end of its pane's stack — the menu twin of dragging it
+   *  to the top or the bottom of the column. */
+  restackGroup(pass, g, edge) {
+    const member = new Set(g.ids);
+    const mine = pass.chart.drawings.all().filter((d) => member.has(d.id));
+    const paneId = mine[0]?.paneId ?? PRICE_PANE_ID;
+    const target = pass.panes.find((p) => p.id === paneId) ?? pass.panes.find((p) => p.kind === "price");
+    if (!target || mine.length === 0) return;
+    const dragged = mine.map((d) => ({ kind: "drawing", id: d.id })).reverse();
+    const tokens = paneTokens(target);
+    const placed = placeTokens(tokens, dragged, edge === "front" ? 0 : tokens.length);
+    if (tokensEqual(tokens, placed)) return;
+    this.writeStack(pass, target.id, placed, /* @__PURE__ */ new Set());
+    this.refresh();
+  }
+  /** The drawings a session moves: a group carries every member, front-most first, so the
+   *  bundle keeps its own stacking wherever it lands. */
+  draggedDrawings(pass, drag) {
+    if (drag.id === null) return [];
+    if (drag.kind !== "group") return [drag.id];
+    const g = this.groups.find((x) => x.id === drag.id);
+    if (!g) return [];
+    const member = new Set(g.ids);
+    return pass.chart.drawings.all().filter((d) => member.has(d.id)).map((d) => d.id).reverse();
+  }
+  // ── context menus ──────────────────────────────────────────────────────
+  // Right-clicking a row opens the same actions its buttons expose, plus the ones with no
+  // room on a row: re-paning an indicator, and reordering what draws in front.
+  onContextMenu(e) {
+    const pass = this.pass;
+    if (!pass) return;
+    const rowEl = e.target.closest(".vela-ot-row");
+    if (!rowEl) return;
+    e.preventDefault();
+    const b = new MenuBuilder();
+    const items = this.itemsForRow(b, pass, rowEl);
+    if (items.length === 0) return;
+    this.menuActions = b.actions;
+    const menu = this.ensureMenu();
+    menu.setItems(items);
+    menu.openAt(e.clientX, e.clientY);
+  }
+  itemsForRow(b, pass, rowEl) {
+    const paneId = rowEl.dataset.pane ?? PRICE_PANE_ID;
+    const id = rowEl.dataset.id;
+    switch (rowEl.dataset.rowKind) {
+      case "price":
+        return this.priceMenu(b, pass);
+      case "indicator": {
+        const row = id === void 0 ? void 0 : this.findIndicatorRow(pass, id);
+        return row ? this.indicatorMenu(b, pass, row, paneId) : [];
+      }
+      case "drawing": {
+        const d = id === void 0 ? void 0 : pass.chart.drawings.all().find((x) => x.id === id);
+        return d ? this.drawingMenu(b, pass, d) : [];
+      }
+      case "group": {
+        const g = id === void 0 ? void 0 : this.groups.find((x) => x.id === id);
+        return g ? this.groupMenu(b, pass, g) : [];
+      }
+      default:
+        return [];
+    }
+  }
+  /** The nearest kit host, which is where anything floating has to mount: outside it the
+   *  theme's custom properties don't resolve and the surface renders unstyled. */
+  uiHost() {
+    return this.el.closest(".vela-ui") ?? this.el;
+  }
+  /** The menu, built on first use — by then the panel is mounted, so the theme host resolves. */
+  ensureMenu() {
+    if (!this.menu) {
+      this.menu = new Menu({ host: this.uiHost(), items: [], onSelect: (id) => this.menuActions.get(id)?.() });
+    }
+    return this.menu;
+  }
+  findIndicatorRow(pass, id) {
+    for (const pane of pass.panes) {
+      for (const row of paneRows(pane)) if (row.kind === "indicator" && row.id === id) return row;
+    }
+    return void 0;
+  }
+  priceMenu(b, pass) {
+    const { chart } = pass;
+    const visible = chart.renderer.get("candleVisible") !== false;
+    const items = [
+      b.entry(visible ? "Hide" : "Show", visible ? "eye-off" : "eye", () => {
+        chart.renderer.set("candleVisible", !visible);
+        this.refresh();
+      })
+    ];
+    if (pass.stackable) {
+      items.push(
+        b.entry("Bring to front", "arrow-up", () => {
+          chart.renderer.set("candleZOrder", this.stackBounds(pass, PRICE_PANE_ID).top + 1);
+          this.refresh();
+        }, true)
+      );
+      items.push(
+        b.entry("Send to back", "arrow-down", () => {
+          chart.renderer.set("candleZOrder", this.stackBounds(pass, PRICE_PANE_ID).bottom - 1);
+          this.refresh();
+        })
+      );
+    }
+    return items;
+  }
+  /** The pane's stacking extremes as of now — what a front/back command has to beat. The z
+   *  keys are plain numbers, not commands, so the writer beats the extremes itself; with a
+   *  shared draw-order space the drawings' keys count too. */
+  stackBounds(pass, paneId) {
+    const { chart } = pass;
+    const drawingZ = pass.interleave ? chart.drawings.all().filter((d) => d.paneId === paneId).map((d) => d.zIndex) : [];
+    return zStackBounds(
+      chart.renderer.get("seriesOrder") ?? [],
+      Number(chart.renderer.get("candleZOrder")) || 0,
+      drawingZ
+    );
+  }
+  indicatorMenu(b, pass, row, paneId) {
+    const { chart } = pass;
+    const handle = pass.handle(row.id);
+    const items = [
+      b.entry(row.visible ? "Hide" : "Show", row.visible ? "eye-off" : "eye", () => {
+        handle?.setVisible(!row.visible);
+        this.refresh();
+      })
+    ];
+    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));
+    }
+    if (pass.stackable) {
+      items.push(b.entry("Bring to front", "arrow-up", () => chart.renderer.set("seriesOrder", { id: row.id, z: this.stackBounds(pass, paneId).top + 1 }), true));
+      items.push(b.entry("Send to back", "arrow-down", () => chart.renderer.set("seriesOrder", { id: row.id, z: this.stackBounds(pass, paneId).bottom - 1 })));
+    }
+    items.push(
+      b.entry("Remove", "trash", () => {
+        handle?.remove();
+        this.refresh();
+      }, true)
+    );
+    return items;
+  }
+  /** "Move to …" entries for an indicator — only the moves that would change something. */
+  moveItems(b, pass, id, fromPane) {
+    const { chart } = pass;
+    const items = [];
+    for (const p of pass.panes) {
+      if (p.id === fromPane) continue;
+      items.push(b.entry(p.label, void 0, () => chart.panes.moveIndicator(id, p.kind === "price" ? "price" : { pane: p.id })));
+    }
+    const current = pass.panes.find((p) => p.id === fromPane);
+    const alone = current !== void 0 && current.kind !== "price" && paneRows(current).length <= 1;
+    if (!alone) {
+      if (fromPane !== PRICE_PANE_ID) items.push(b.entry("New pane above", void 0, () => chart.panes.moveIndicator(id, { newPane: { before: fromPane } })));
+      items.push(b.entry("New pane below", void 0, () => chart.panes.moveIndicator(id, { newPane: { after: fromPane } })));
+    }
+    return items;
+  }
+  drawingMenu(b, pass, d) {
+    const { chart } = pass;
+    const items = [
+      b.entry(d.visible ? "Hide" : "Show", d.visible ? "eye-off" : "eye", () => {
+        chart.drawings.show(d.id, !d.visible);
+        this.refresh();
+      }),
+      b.entry(d.locked ? "Unlock" : "Lock", d.locked ? "unlock" : "lock", () => {
+        chart.drawings.lock(d.id, !d.locked);
+        this.refresh();
+      }),
+      b.entry("Duplicate", "clone", () => {
+        this.cloneInto(pass, d.id);
+        this.render();
+      }),
+      // Front/back clear the WHOLE stack on a shared-z renderer — over or under the
+      // candles and every indicator, not just the other drawings.
+      b.entry("Bring to front", "arrow-up", () => chart.drawings.bringToFront(d.id), true),
+      b.entry("Send to back", "arrow-down", () => chart.drawings.sendToBack(d.id))
+    ];
+    items.push(...this.groupingItems(b, d.id));
+    items.push(b.entry("Remove", "trash", () => chart.drawings.remove(d.id), true));
+    return items;
+  }
+  /** The grouping half of a drawing's menu: what it can do about the bundle it is (or isn't)
+   *  part of. Only the moves that mean something for this row are offered. */
+  groupingItems(b, id) {
+    const items = [];
+    const mine = groupOf(this.groups, id);
+    const pick = this.picked.has(id) && this.picked.size > 1 ? [...this.picked] : null;
+    if (pick && canGroup(pick, this.groups)) {
+      items.push(b.entry(`Group selection (${pick.length})`, "group", () => this.makeGroup(pick), true));
+    } else if (!pick && mine === null) {
+      items.push(b.entry("New group", "group", () => this.makeGroup([id]), true));
+    }
+    const others = this.groups.filter((g) => g.id !== mine?.id);
+    if (!pick && others.length > 0) {
+      items.push(
+        b.submenu(
+          mine === null ? "Add to group" : "Move to group",
+          "folder-plus",
+          others.map(
+            (g) => b.entry(g.name, void 0, () => {
+              this.groups = assignToGroup(this.groups, g.id, [id]);
+              this.render();
+            })
+          ),
+          items.length === 0
+        )
+      );
+    }
+    if (mine !== null) {
+      items.push(
+        b.entry(`Remove from ${mine.name}`, "folder-minus", () => {
+          this.groups = removeFromGroups(this.groups, [id]);
+          this.render();
+        }, items.length === 0)
+      );
+    }
+    return items;
+  }
+  groupMenu(b, pass, g) {
+    const ids = [...g.ids];
+    const members = pass.chart.drawings.all().filter((d) => g.ids.includes(d.id));
+    const { allHidden, allLocked } = groupState(members);
+    const items = [
+      b.entry("Rename\u2026", "pen", () => {
+        this.renaming = g.id;
+        this.render();
+      }),
+      b.entry(allHidden ? "Show all" : "Hide all", allHidden ? "eye" : "eye-off", () => this.setMembers(pass, ids, { visible: allHidden }), true),
+      b.entry(allLocked ? "Unlock all" : "Lock all", allLocked ? "unlock" : "lock", () => this.setMembers(pass, ids, { locked: !allLocked })),
+      b.entry("Select all", "group", () => {
+        this.picked = new Set(ids);
+        this.selectOnChart(ids);
+        this.render();
+      })
+    ];
+    if (members.length > 0) {
+      items.push(b.entry("Bring all to front", "arrow-up", () => this.restackGroup(pass, g, "front")));
+      items.push(b.entry("Send all to back", "arrow-down", () => this.restackGroup(pass, g, "back")));
+    }
+    items.push(b.entry("Ungroup", "ungroup", () => this.removeGroup(pass, g.id, false), true));
+    items.push(b.entry("Remove all", "trash", () => this.removeGroup(pass, g.id, true)));
+    return items;
+  }
+  /** Forget everything that refers to a drawing or group the chart no longer has — otherwise a
+   *  deleted drawing would keep a group alive, or stay counted in the selection bar. */
+  prune(chart) {
+    const live = new Set((chart.drawings.supported ? chart.drawings.all() : []).map((d) => d.id));
+    for (const id of [...this.picked]) if (!live.has(id)) this.picked.delete(id);
+    if (this.groups.length === 0) {
+      this.renaming = null;
+      return;
+    }
+    this.groups = pruneGroups(this.groups, live);
+    if (this.renaming !== null && !this.groups.some((g) => g.id === this.renaming)) this.renaming = null;
+  }
+};
+
+// src/widget/data-window.ts
+var STYLE_ID7 = "vela-widget-datawindow";
+var CSS7 = `
+.vela-dw-group {
+    padding: 10px 8px 4px;
+    margin-top: 4px;
+    border-top: 1px solid var(--vela-border);
+    color: var(--vela-fg-muted);
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+.vela-dw-group:first-child { border-top: none; margin-top: 0; padding-top: 8px; }
+.vela-dw-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 4px 8px;
+    border-radius: 4px;
+}
+.vela-dw-row:hover { background: var(--vela-hover); }
+.vela-dw-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vela-fg-bright); }
+.vela-dw-value { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.vela-dw-empty { padding: 20px 10px; text-align: center; color: var(--vela-fg-muted); font-size: 12px; }
+`;
+var REFRESH_EVENTS2 = ["bar", "context:changed", "indicator:added", "indicator:removed", "indicator:visibility", "indicator:moved", "pane:changed", "market:changed", "history:complete"];
+var EM_DASH = "\u2014";
+function dataWindowSections(readout) {
+  const sections = [];
+  if (readout.date || readout.time) {
+    sections.push({
+      title: "Time",
+      lines: [
+        { label: "Date", value: readout.date || EM_DASH, color: "" },
+        { label: "Time", value: readout.time || EM_DASH, color: "" }
+      ]
+    });
+  }
+  const { ohlc } = readout;
+  if (ohlc) {
+    const color = ohlc.up ? "var(--vela-up)" : "var(--vela-down)";
+    const lines = [
+      { label: "Open", value: ohlc.o, color },
+      { label: "High", value: ohlc.h, color },
+      { label: "Low", value: ohlc.l, color },
+      { label: "Close", value: ohlc.c, color }
+    ];
+    if (ohlc.vol !== void 0) lines.push({ label: "Volume", value: ohlc.vol, color });
+    sections.push({ title: "Price", lines });
+  }
+  for (const group of readout.groups) {
+    sections.push({ title: group.name, lines: group.rows.map((r) => ({ label: r.label, value: r.value, color: r.color })) });
+  }
+  return sections;
+}
+var DataWindow = class extends SidePanel {
+  constructor(host) {
+    super(host, "Data window", "vela-dw");
+    this.chart = null;
+    this.unsubs = [];
+    injectStyles(STYLE_ID7, CSS7, host.ownerDocument);
+  }
+  toggle(open = this.el.hidden) {
+    super.toggle(open);
+    if (open) this.refresh();
+  }
+  /** (Re)bind to a chart instance — called after every widget rebuild. */
+  onChart(chart) {
+    this.detach();
+    this.chart = chart;
+    for (const ev of REFRESH_EVENTS2) this.unsubs.push(chart.on(ev, () => this.refresh()));
+    this.unsubs.push(chart.renderer.onCrosshairMove(() => this.refresh()));
+    this.refresh();
+  }
+  destroy() {
+    this.detach();
+    super.destroy();
+  }
+  detach() {
+    for (const u of this.unsubs) u();
+    this.unsubs = [];
+    this.chart = null;
+  }
+  refresh() {
+    if (this.el.hidden || !this.chart) return;
+    const doc = this.el.ownerDocument;
+    const readout = this.chart.renderer.dataWindowReadout();
+    this.body.replaceChildren();
+    const sections = readout ? dataWindowSections(readout) : [];
+    if (sections.length === 0) {
+      const empty = doc.createElement("div");
+      empty.className = "vela-dw-empty";
+      empty.textContent = readout ? "No data" : "This renderer provides no data readout.";
+      this.body.appendChild(empty);
+      return;
+    }
+    for (const section of sections) {
+      const head = doc.createElement("div");
+      head.className = "vela-dw-group";
+      head.textContent = section.title;
+      this.body.appendChild(head);
+      for (const line of section.lines) {
+        const row = doc.createElement("div");
+        row.className = "vela-dw-row";
+        const label = doc.createElement("span");
+        label.className = "vela-dw-label";
+        label.textContent = line.label;
+        const value = doc.createElement("span");
+        value.className = "vela-dw-value";
+        value.textContent = line.value;
+        if (line.color) value.style.color = line.color;
+        row.append(label, value);
+        this.body.appendChild(row);
+      }
+    }
+  }
+};
+
+// src/widget/panel-dock.ts
+var PanelDock = class {
+  constructor(host, deps) {
+    this.host = host;
+    this.deps = deps;
+    this.entries = [];
+    /** Widths the USER settled, by panel id — the only ones worth persisting. */
+    this.widths = /* @__PURE__ */ new Map();
+    /** A restored `open` naming a panel that has not registered yet: honored when it docks. */
+    this.pendingOpen = null;
+    this.chart = null;
+  }
+  /** Dock a panel the shell owns (created and destroyed by it). */
+  addBuiltIn(entry) {
+    this.add({ ...entry, contributed: false });
+  }
+  /**
+   * (Re)build the CONTRIBUTED panels from the registry — call once after the built-ins, and
+   * again on `refreshActions()` so a late registration appears. Contributed panels that are
+   * gone from the registry are dropped; the ones still there are rebuilt, so a replaced
+   * descriptor takes effect.
+   */
+  refresh() {
+    const openBefore = this.openId;
+    for (const entry of [...this.entries]) if (entry.contributed) this.drop(entry);
+    for (const desc of sidePanels()) {
+      const panel = new SidePanel(this.host, desc.title, `vela-panel-${desc.id}`, {
+        width: desc.width,
+        resizable: desc.resizable,
+        minWidth: desc.minWidth,
+        maxWidth: desc.maxWidth
+      });
+      const entry = {
+        id: desc.id,
+        title: desc.title,
+        icon: desc.icon,
+        order: desc.order ?? DEFAULT_PANEL_ORDER,
+        panel,
+        contributed: true
+      };
+      try {
+        entry.handle = desc.mount(this.deps.context(), panel.content, { slot: panel.headerSlot, setTitle: (t) => panel.setTitle(t) }) ?? void 0;
+        if (this.chart) entry.handle?.onChart?.(this.chart);
+      } catch (err) {
+        console.warn(`[vela] side panel "${desc.id}" failed to mount`, err);
+      }
+      this.add(entry);
+    }
+    if (openBefore && !this.openId) this.toggle(openBefore, true);
+    this.publish();
+  }
+  /** Bind (or rebind) every docked panel to a chart instance. */
+  onChart(chart) {
+    this.chart = chart;
+    for (const entry of this.entries) {
+      if (entry.onChart) entry.onChart(chart);
+      entry.handle?.onChart?.(chart);
+    }
+  }
+  /** Open/close one panel by id — a bare call flips it. Unknown ids are ignored. */
+  toggle(id, open) {
+    this.entries.find((e) => e.id === id)?.panel.toggle(open);
+  }
+  /** The open panel's id, or null when the column is closed. */
+  get openId() {
+    return this.entries.find((e) => e.panel.open)?.id ?? null;
+  }
+  /** The dock's persistable state, or null when there is nothing worth saving. */
+  getState() {
+    const out = {};
+    const open = this.openId;
+    if (open) out.open = open;
+    if (this.widths.size > 0) out.widths = Object.fromEntries(this.widths);
+    return out.open || out.widths ? out : null;
+  }
+  /**
+   * Restore a persisted dock state. Widths apply to any panel present, and are remembered for
+   * panels that register later; `open` opens that panel, and its absence closes the column —
+   * a document that predates the dock has no `panels` field at all, so the shell never calls
+   * this and the default (everything closed) stands. An `open` naming a panel that has not
+   * registered yet is held until it docks (a plugin loaded after the restore), unless the user
+   * opens something in the meantime.
+   */
+  applyState(state) {
+    if (!state) return;
+    if (state.widths) {
+      for (const [id, px] of Object.entries(state.widths)) {
+        this.widths.set(id, px);
+        this.entries.find((e) => e.id === id)?.panel.setWidth(px);
+      }
+    }
+    for (const entry of this.entries) entry.panel.toggle(entry.id === state.open);
+    this.pendingOpen = state.open && !this.entries.some((e) => e.id === state.open) ? state.open : null;
+  }
+  /** Drop the contributed panels (the shell destroys its own). */
+  destroy() {
+    for (const entry of [...this.entries]) if (entry.contributed) this.drop(entry);
+    this.entries.length = 0;
+  }
+  add(entry) {
+    this.entries.push(entry);
+    this.entries.sort((a, b) => a.order - b.order);
+    const stored = this.widths.get(entry.id);
+    if (stored !== void 0) entry.panel.setWidth(stored);
+    entry.panel.onOpenChange = (open) => {
+      if (open) {
+        for (const other of this.entries) if (other !== entry) other.panel.toggle(false);
+        this.pendingOpen = null;
+      }
+      this.deps.chrome.setPanelActive(entry.id, open);
+      if (open) entry.handle?.onOpen?.();
+      this.deps.changed?.();
+    };
+    entry.panel.onWidthChange = (px) => {
+      this.widths.set(entry.id, px);
+      this.deps.changed?.();
+    };
+    if (this.pendingOpen === entry.id) entry.panel.toggle(true);
+    if (!entry.contributed) this.publish();
+  }
+  drop(entry) {
+    const i = this.entries.indexOf(entry);
+    if (i >= 0) this.entries.splice(i, 1);
+    try {
+      entry.handle?.destroy?.();
+    } catch (err) {
+      console.warn(`[vela] side panel "${entry.id}" failed to release`, err);
+    }
+    entry.panel.destroy();
+  }
+  /** Push the current toggle group to the chrome, pressed states included. */
+  publish() {
+    const buttons = this.entries.map((e) => ({ id: e.id, title: e.title, icon: e.icon }));
+    this.deps.chrome.setPanelButtons(buttons, (id) => this.toggle(id));
+    for (const entry of this.entries) this.deps.chrome.setPanelActive(entry.id, entry.panel.open);
+  }
+};
+
+// src/widget/shortcuts-help.ts
+var STYLE_ID8 = "vela-widget-shortcuts";
+var CSS8 = `
+.vela-sh-cat {
+    color: var(--vela-fg-muted);
+    font-size: var(--vela-font-size-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: var(--vela-space-2) 0 var(--vela-space-1);
+}
+.vela-sh-row { display: flex; align-items: center; gap: var(--vela-space-3); padding: 3px 0; }
+.vela-sh-label { flex: 1; }
+.vela-sh-keys { display: flex; gap: 4px; }
+.vela-sh-key {
+    background: var(--vela-surface-overlay);
+    border: 1px solid var(--vela-border-soft);
+    border-radius: var(--vela-radius-sm);
+    padding: 1px 7px;
+    font-size: var(--vela-font-size-sm);
+    font-variant-numeric: tabular-nums;
+}
+.vela-sh-static { color: var(--vela-fg-muted); font-size: var(--vela-font-size-sm); margin-top: var(--vela-space-2); }
+`;
+var ShortcutsHelp = class {
+  constructor(keymap, host, onOpenChange) {
+    this.keymap = keymap;
+    const doc = (host ?? document.body).ownerDocument;
+    injectStyles(STYLE_ID8, CSS8, doc);
+    this.list = doc.createElement("div");
+    this.dialog = new Dialog({
+      title: "Keyboard shortcuts",
+      host,
+      closeOnInteractOutside: true,
+      content: (body) => body.appendChild(this.list),
+      onOpenChange: (open) => {
+        if (open) this.refresh();
+        onOpenChange?.(open);
+      }
+    });
+  }
+  open() {
+    this.dialog.show();
+  }
+  close() {
+    this.dialog.hide();
+  }
+  destroy() {
+    this.dialog.destroy();
+  }
+  refresh() {
+    const doc = this.list.ownerDocument;
+    this.list.replaceChildren();
+    const addCategory = (text) => {
+      const cat = doc.createElement("div");
+      cat.className = "vela-sh-cat";
+      cat.textContent = text;
+      this.list.appendChild(cat);
+    };
+    const addRow = (label, keys) => {
+      const row = doc.createElement("div");
+      row.className = "vela-sh-row";
+      const l = doc.createElement("span");
+      l.className = "vela-sh-label";
+      l.textContent = label;
+      const ks = doc.createElement("span");
+      ks.className = "vela-sh-keys";
+      for (const key of keys) {
+        const k = doc.createElement("span");
+        k.className = "vela-sh-key";
+        k.textContent = key;
+        ks.appendChild(k);
+      }
+      row.append(l, ks);
+      this.list.appendChild(row);
+    };
+    const byCategory = /* @__PURE__ */ new Map();
+    for (const b of this.keymap.bindings()) {
+      const bucket = byCategory.get(b.category) ?? [];
+      bucket.push(b);
+      byCategory.set(b.category, bucket);
+    }
+    for (const [category, bindings] of byCategory) {
+      addCategory(category);
+      for (const b of bindings) addRow(b.label, b.display);
+    }
+    addCategory("Mouse");
+    addRow("Scroll through history", ["Shift+Scroll"]);
+    addRow("Measure from the press point", ["Shift+Click"]);
+    addRow("Delete the drawing under the cursor", ["Middle-click"]);
+    const s = doc.createElement("div");
+    s.className = "vela-sh-static";
+    s.textContent = "Typing a letter opens the symbol search; typing a digit opens the timeframe entry.";
+    this.list.appendChild(s);
+  }
+};
+
+// src/widget/context-menu-model.ts
+var SETTINGS_SECTION = {
+  body: "Canvas",
+  "price-axis": "Scales and lines",
+  "time-axis": "Scales and lines"
+};
+function settingsItem(zone, label) {
+  return { id: `settings:${SETTINGS_SECTION[zone]}`, label, separatorBefore: true };
+}
+function settingsSectionOf(id) {
+  return id.slice("settings:".length) || void 0;
+}
+var SCALE_CHOICES = [
+  ["regular", "Regular"],
+  ["percent", "Percent"],
+  ["indexed", "Indexed to 100"],
+  ["log", "Logarithmic"]
+];
+function paneScaleAt(panes, y) {
+  return panes.find((p) => y >= p.top && y < p.top + p.height) ?? panes[0] ?? null;
+}
+function scaleChoiceOf(scale) {
+  if (scale.log) return "log";
+  if (scale.mode === "percent") return "percent";
+  if (scale.mode === "indexed") return "indexed";
+  return "regular";
+}
+function mainScale(pane) {
+  return pane === null || pane.kind === "price";
+}
+function scaleWrites(choice, pane) {
+  const mode = choice === "percent" ? "percent" : choice === "indexed" ? "indexed" : "price";
+  const log = choice === "log";
+  if (mainScale(pane)) {
+    return [
+      ["scaleMode", mode],
+      ["logScale", log]
+    ];
+  }
+  return [
+    ["scaleMode", { pane: pane.id, mode }],
+    ["logScale", { pane: pane.id, value: log }]
+  ];
+}
+function invertWrite(next, pane) {
+  return mainScale(pane) ? ["invertScale", next] : ["invertScale", { pane: pane.id, value: next }];
+}
+function priceAxisItems(s) {
+  return [
+    { id: "auto", label: "Auto (fits data to screen)", checked: s.auto },
+    { id: "invert", label: "Invert scale", checked: s.invert },
+    ...SCALE_CHOICES.map(([choice, label], i) => ({
+      id: `scale:${choice}`,
+      label,
+      checked: s.choice === choice,
+      separatorBefore: i === 0
+    })),
+    {
+      id: "labels",
+      label: "Labels",
+      separatorBefore: true,
+      submenu: [
+        { id: "toggle:axisLabels", label: "Price axis labels", checked: s.axisLabels },
+        { id: "toggle:priceLabel", label: "Last price label", checked: s.priceLabel },
+        { id: "toggle:countdown", label: "Countdown to bar close", checked: s.countdown }
+      ]
+    },
+    {
+      id: "levels",
+      label: "Levels",
+      submenu: [{ id: "toggle:currentPriceLine", label: "Last Price Line", checked: s.priceLine }]
+    },
+    settingsItem("price-axis", "More settings\u2026")
+  ];
+}
+function timeAxisItems(timezone) {
+  const active = timezone === "UTC" ? "Etc/UTC" : timezone;
+  return [
+    {
+      id: "timezone",
+      label: "Time zone",
+      submenu: TIMEZONES.map((t) => ({ id: `tz:${t.value}`, label: tzMenuLabel(t.value, t.label), checked: t.value === active }))
+    },
+    settingsItem("time-axis", "More settings\u2026")
+  ];
+}
+function bodyItems(counts) {
+  return [
+    { id: "reset-view", label: "Reset chart view" },
+    { id: "remove-drawings", label: "Remove drawings", disabled: counts.drawings === 0, separatorBefore: true },
+    { id: "remove-indicators", label: "Remove indicators", disabled: counts.indicators === 0 },
+    settingsItem("body", "Settings\u2026")
+  ];
+}
+
+// src/widget/context-menu.ts
+var PRICE_AXIS_W = 60;
+var TIME_AXIS_H = 26;
+var ChartContextMenu = class {
+  constructor(host, cbs) {
+    this.cbs = cbs;
+    this.chart = null;
+    this.lastZone = "body";
+    /** The pane whose scale the open price-axis menu targets (null ⇒ the main scale). */
+    this.lastPane = null;
+    this.onContextMenu = (e) => {
+      e.preventDefault();
+      if (!this.chart) return;
+      this.lastZone = this.zoneOf(e);
+      this.lastPane = this.lastZone === "price-axis" ? this.paneAt(e) : null;
+      this.menu.setItems(this.itemsFor(this.lastZone));
+      this.menu.openAt(e.clientX, e.clientY);
+    };
+    this.host = host;
+    this.menu = new Menu({
+      host,
+      items: [],
+      placement: "bottom-start",
+      onSelect: (id) => this.run(id)
+    });
+    host.addEventListener("contextmenu", this.onContextMenu);
+  }
+  /** (Re)bind to a chart instance — called after every widget rebuild. */
+  onChart(chart) {
+    this.chart = chart;
+  }
+  destroy() {
+    this.host.removeEventListener("contextmenu", this.onContextMenu);
+    this.menu.destroy();
+  }
+  zoneOf(e) {
+    const rect = this.host.getBoundingClientRect();
+    if (e.clientX - rect.left > rect.width - PRICE_AXIS_W) return "price-axis";
+    if (e.clientY - rect.top > rect.height - TIME_AXIS_H) return "time-axis";
+    return "body";
+  }
+  /** The pane under the pointer, so every pane's price scale has its own menu. */
+  paneAt(e) {
+    const panes = this.chart?.renderer.get("paneScales");
+    if (!Array.isArray(panes)) return null;
+    return paneScaleAt(panes, e.clientY - this.host.getBoundingClientRect().top);
+  }
+  flag(feature) {
+    return Boolean(this.chart?.renderer.get(feature));
+  }
+  contributed(zone) {
+    const ctx = this.cbs.getContext?.();
+    return widgetActions(`context:${zone}`, ctx).map((a, i) => ({
+      id: `action:${a.id}`,
+      label: a.label,
+      icon: a.icon,
+      separatorBefore: i === 0
+    }));
+  }
+  itemsFor(zone) {
+    if (zone === "price-axis") {
+      const pane = this.lastPane;
+      return [
+        ...priceAxisItems({
+          auto: this.chart?.renderer.get("autoScale") !== false,
+          invert: pane ? pane.invert : this.flag("invertScale"),
+          choice: scaleChoiceOf(pane ?? { mode: String(this.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")
+        }),
+        ...this.contributed(zone)
+      ];
+    }
+    if (zone === "time-axis") {
+      const tz = this.cbs.timezone?.() ?? String(this.chart?.renderer.get("timezone") ?? "Etc/UTC");
+      return [...timeAxisItems(tz), ...this.contributed("time-axis")];
+    }
+    const chart = this.chart;
+    return [
+      ...bodyItems({
+        drawings: chart?.drawings.supported ? chart.drawings.all().length : 0,
+        indicators: chart?.indicators().length ?? 0
+      }),
+      ...this.contributed("body")
+    ];
+  }
+  run(id) {
+    const chart = this.chart;
+    if (!chart) return;
+    if (id.startsWith("action:")) {
+      const ctx = this.cbs.getContext?.();
+      if (ctx) widgetActions(`context:${this.lastZone}`, ctx).find((a) => a.id === id.slice("action:".length))?.run(ctx);
+      return;
+    }
+    if (id.startsWith("toggle:")) {
+      const feature = id.slice("toggle:".length);
+      chart.renderer.set(feature, !this.flag(feature));
+    } else if (id.startsWith("scale:")) {
+      for (const [feature, value] of scaleWrites(id.slice("scale:".length), this.lastPane)) chart.renderer.set(feature, value);
+    } else if (id.startsWith("tz:")) {
+      const zone = id.slice("tz:".length);
+      if (this.cbs.setTimezone) this.cbs.setTimezone(zone);
+      else chart.renderer.set("timezone", zone);
+    } else if (id === "auto") {
+      chart.renderer.set("autoScale", chart.renderer.get("autoScale") === false);
+    } else if (id === "invert") {
+      const pane = this.lastPane;
+      const [feature, value] = invertWrite(!(pane ? pane.invert : this.flag("invertScale")), pane);
+      chart.renderer.set(feature, value);
+    } else if (id.startsWith("settings")) {
+      chart.renderer.openSettings(settingsSectionOf(id));
+    } else if (id === "reset-view") {
+      this.cbs.resetView();
+    } else if (id === "remove-drawings") {
+      if (chart.drawings.supported) for (const d of chart.drawings.all()) chart.drawings.remove(d.id);
+    } else if (id === "remove-indicators") {
+      for (const handle of chart.indicators()) handle.remove();
+    }
+  }
+};
+
+// src/widget/indicator-picker.ts
+var STYLE_ID9 = "vela-widget-indpicker";
+var CSS9 = `
+.vela-ip-searchrow {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 40px;
+    padding: 0 12px;
+    margin-bottom: var(--vela-space-2);
+    background: var(--vela-surface-elev);
+    border: 1px solid var(--vela-border);
+    border-radius: 8px;
+}
+.vela-ip-searchrow:focus-within { border-color: var(--vela-border-strong); }
+.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; }
+.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 {
+    color: var(--vela-fg-muted);
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding: 10px 4px 4px;
+    border-bottom: 1px solid var(--vela-border);
+    margin-bottom: 2px;
+}
+.vela-ip-oncard {
+    background: var(--vela-surface-elev);
+    border: 1px solid var(--vela-border);
+    border-radius: 8px;
+    padding: 6px 8px;
+    margin-bottom: var(--vela-space-2);
+}
+.vela-ip-oncard .vela-ip-group { border-bottom: none; padding-top: 2px; }
+.vela-ip-row {
+    display: flex;
+    align-items: center;
+    gap: var(--vela-space-2);
+    padding: 7px 6px;
+    border-radius: var(--vela-radius-sm);
+    cursor: pointer;
+}
+.vela-ip-row:hover { background: var(--vela-hover); }
+.vela-ip-name { flex: 1; font-weight: 600; color: var(--vela-fg-bright); font-size: 13px; }
+.vela-ip-badge {
+    flex: none;
+    padding: 1px 7px;
+    border-radius: var(--vela-radius-sm);
+    background: var(--vela-surface-elev);
+    border: 1px solid var(--vela-border);
+    color: var(--vela-accent);
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+.vela-ip-trash {
+    all: unset;
+    cursor: pointer;
+    color: var(--vela-fg-muted);
+    padding: 2px 4px;
+    border-radius: var(--vela-radius-sm);
+    font-size: var(--vela-font-size-md);
+}
+.vela-ip-trash:hover { color: var(--vela-down); background: var(--vela-hover); }
+.vela-ip-empty { padding: var(--vela-space-3); color: var(--vela-fg-muted); text-align: center; }
+`;
+var IndicatorPicker = class {
+  constructor(opts) {
+    this.isOpen = false;
+    this.opts = opts;
+    const doc = (opts.host ?? document.body).ownerDocument;
+    injectStyles(STYLE_ID9, CSS9, doc);
+    this.search = doc.createElement("input");
+    this.search.className = "vela-ip-search";
+    this.search.placeholder = "Search\u2026";
+    this.search.spellcheck = false;
+    this.search.addEventListener("input", () => this.refresh());
+    const searchRow = doc.createElement("div");
+    searchRow.className = "vela-ip-searchrow";
+    searchRow.append(iconEl("search", doc), this.search);
+    this.list = doc.createElement("div");
+    this.list.className = "vela-ip-list";
+    this.dialog = new Dialog({
+      title: "Indicators",
+      host: opts.host,
+      draggable: true,
+      closeOnInteractOutside: true,
+      // The picker adds/removes indicators live — keep the chart undimmed behind it.
+      content: (body) => body.append(searchRow, this.list),
+      onOpenChange: (open) => {
+        this.isOpen = open;
+        if (open) {
+          this.search.value = "";
+          this.refresh();
+          setTimeout(() => this.search.focus(), 0);
+        }
+        opts.onOpenChange?.(open);
+      }
+    });
+    this.list.addEventListener("click", (e) => {
+      const trash = e.target.closest(".vela-ip-trash");
+      const row = e.target.closest(".vela-ip-row");
+      if (!row) return;
+      if (trash) {
+        this.opts.onRemove(Number(row.dataset.instance));
+      } else if (row.dataset.library !== void 0) {
+        this.opts.onAdd(Number(row.dataset.library));
+      }
+      this.refresh();
+    });
+  }
+  open() {
+    this.dialog.show();
+  }
+  /** Re-render the lists if the dialog is open (async catalog updates land late). */
+  sync() {
+    if (this.isOpen) this.refresh();
+  }
+  close() {
+    this.dialog.hide();
+  }
+  destroy() {
+    this.dialog.destroy();
+  }
+  refresh() {
+    const doc = this.list.ownerDocument;
+    const q = this.search.value.trim().toLowerCase();
+    const library = this.opts.library();
+    const instances = this.opts.onChart();
+    this.list.replaceChildren();
+    const match = (r) => !q || r.name.toLowerCase().includes(q);
+    const rowEl = (r, opts) => {
+      const row = doc.createElement("div");
+      row.className = "vela-ip-row";
+      if (opts.library !== void 0) row.dataset.library = String(opts.library);
+      if (opts.instance !== void 0) row.dataset.instance = String(opts.instance);
+      if (r.native) row.dataset.native = "1";
+      const name = doc.createElement("span");
+      name.className = "vela-ip-name";
+      name.textContent = r.name;
+      row.appendChild(name);
+      if (r.beta) {
+        const beta = doc.createElement("span");
+        beta.className = "vela-ip-badge";
+        beta.textContent = "beta";
+        row.appendChild(beta);
+      }
+      if (opts.instance !== void 0) {
+        const badgeText = r.native ? "vela" : r.language;
+        if (badgeText) {
+          const badge = doc.createElement("span");
+          badge.className = "vela-ip-badge";
+          badge.textContent = badgeText;
+          row.appendChild(badge);
+        }
+        const trash = doc.createElement("button");
+        trash.className = "vela-ip-trash";
+        trash.appendChild(iconEl("trash", doc));
+        trash.title = "Remove from chart";
+        row.appendChild(trash);
+      }
+      return row;
+    };
+    const onChart = instances.map((r, i) => [r, i]).filter(([r]) => match(r));
+    if (onChart.length) {
+      const card = doc.createElement("div");
+      card.className = "vela-ip-oncard";
+      const title = doc.createElement("div");
+      title.className = "vela-ip-group";
+      title.textContent = `On chart \xB7 ${onChart.length}`;
+      card.appendChild(title);
+      for (const [r, i] of onChart) card.appendChild(rowEl(r, { instance: i }));
+      this.list.appendChild(card);
+    }
+    const byCat = /* @__PURE__ */ new Map();
+    library.forEach((r, i) => {
+      if (!match(r)) return;
+      const cat = r.category ?? "General";
+      const bucket = byCat.get(cat) ?? [];
+      bucket.push([r, i]);
+      byCat.set(cat, bucket);
+    });
+    for (const [cat, bucket] of byCat) {
+      const title = doc.createElement("div");
+      title.className = "vela-ip-group";
+      title.textContent = cat;
+      this.list.appendChild(title);
+      for (const [r, i] of bucket) this.list.appendChild(rowEl(r, { library: i }));
+    }
+    if (!onChart.length && byCat.size === 0) {
+      const empty = doc.createElement("div");
+      empty.className = "vela-ip-empty";
+      empty.textContent = library.length ? "No indicators match." : "No indicators in the manifest.";
+      this.list.appendChild(empty);
+    }
+  }
+};
+
+// src/widget/timeframe-quick.ts
+var STYLE_ID10 = "vela-widget-tfquick";
+var CSS10 = `
+.vela-tq-input {
+    display: block;
+    margin: 0 auto;
+    width: 220px;
+    box-sizing: border-box;
+    height: 40px;
+    background: var(--vela-surface-elev);
+    color: var(--vela-fg);
+    border: 1px solid var(--vela-border);
+    border-radius: 8px;
+    padding: 0 12px;
+    font-size: 18px;
+    text-align: center;
+    outline: none;
+}
+.vela-tq-input:focus { border-color: var(--vela-border-strong); }
+.vela-tq-hint { margin-top: var(--vela-space-2); text-align: center; color: var(--vela-fg-muted); min-height: 1.2em; }
+.vela-tq-hint[data-invalid] { color: var(--vela-danger); }
+`;
+var TimeframeQuick = class {
+  constructor(opts) {
+    const doc = (opts.host ?? document.body).ownerDocument;
+    injectStyles(STYLE_ID10, CSS10, doc);
+    this.input = doc.createElement("input");
+    this.input.className = "vela-tq-input";
+    this.input.setAttribute("spellcheck", "false");
+    this.hint = doc.createElement("div");
+    this.hint.className = "vela-tq-hint";
+    this.dialog = new Dialog({
+      title: "Change timeframe",
+      host: opts.host,
+      draggable: true,
+      closeOnInteractOutside: true,
+      content: (body) => body.append(this.input, this.hint),
+      onOpenChange: (open) => opts.onOpenChange?.(open)
+    });
+    this.input.addEventListener("input", () => this.renderHint());
+    this.input.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter") return;
+      const parsed = parseTimeframe(this.input.value);
+      if (parsed.valid && parsed.canonical !== void 0) {
+        this.close();
+        opts.onApply(parsed.canonical);
+      }
+    });
+  }
+  open(seed = "") {
+    this.dialog.show();
+    this.input.value = seed;
+    this.renderHint();
+    setTimeout(() => {
+      this.input.focus();
+      this.input.setSelectionRange(this.input.value.length, this.input.value.length);
+    }, 0);
+  }
+  close() {
+    this.dialog.hide();
+  }
+  destroy() {
+    this.dialog.destroy();
+  }
+  renderHint() {
+    const raw = this.input.value.trim();
+    const parsed = parseTimeframe(raw);
+    if (!raw) {
+      this.hint.textContent = "e.g. 15, 4h, D, 3M";
+      delete this.hint.dataset.invalid;
+    } else if (parsed.valid) {
+      this.hint.textContent = parsed.label ?? "";
+      delete this.hint.dataset.invalid;
+    } else {
+      this.hint.textContent = "Not a timeframe";
+      this.hint.dataset.invalid = "1";
+    }
+  }
+};
+
+// src/widget/persist.ts
+function localStorageAdapter(storageKey) {
+  return {
+    get(key) {
+      try {
+        return localStorage.getItem(storageKey ?? key);
+      } catch {
+        return null;
+      }
+    },
+    set(key, value) {
+      try {
+        localStorage.setItem(storageKey ?? key, value);
+      } catch {
+      }
+    },
+    remove(key) {
+      try {
+        localStorage.removeItem(storageKey ?? key);
+      } catch {
+      }
+    }
+  };
+}
+var KEYS = ["symbol", "timeframe", "priceStyle", "timezone", "bars", "watermark", "favorites"];
+function parsePersisted(raw) {
+  if (!raw) return {};
+  try {
+    const doc = JSON.parse(raw);
+    const out = {};
+    for (const k of KEYS) if (typeof doc[k] === "string") out[k] = doc[k];
+    return out;
+  } catch {
+    return {};
+  }
+}
+var parseState = parsePersisted;
+function loadPersisted(storage, storageKey) {
+  const raw = storage.get(storageKey);
+  if (raw instanceof Promise) return raw.then(parseState).catch(() => ({}));
+  return parseState(raw);
+}
+function savePersisted(storage, storageKey, state) {
+  try {
+    void storage.set(storageKey, JSON.stringify(state));
+  } catch {
+  }
+}
+function legacyWidgetState(prefs, rawConfig, rawDrawings) {
+  const cell = {};
+  if (prefs.symbol) cell.symbol = prefs.symbol;
+  if (prefs.timeframe) cell.timeframe = prefs.timeframe;
+  if (prefs.priceStyle) cell.priceStyle = prefs.priceStyle;
+  const bars = Number(prefs.bars);
+  if (Number.isFinite(bars) && bars > 0) cell.bars = bars;
+  if (prefs.watermark !== void 0) cell.watermark = prefs.watermark === "1";
+  try {
+    if (rawConfig) cell.rendererConfig = JSON.parse(rawConfig);
+  } catch {
+  }
+  try {
+    if (rawDrawings) cell.drawings = JSON.parse(rawDrawings);
+  } catch {
+  }
+  const favorites = prefs.favorites ? prefs.favorites.split(",").filter(Boolean) : [];
+  if (Object.keys(cell).length === 0 && favorites.length === 0 && !prefs.timezone) return null;
+  const doc = { version: 1, layout: "1", activeCellId: "c1", charts: [{ id: "c1", ...cell }] };
+  if (prefs.timezone) doc.timezone = prefs.timezone;
+  if (favorites.length > 0) doc.favorites = favorites;
+  return doc;
+}
+
+// src/state/document.ts
+function prefixedSymbol(cell) {
+  if (!cell?.symbol) return void 0;
+  if (cell.symbol.includes(":") || !cell.provider) return cell.symbol;
+  return `${cell.provider}:${cell.symbol}`;
+}
+function encodeState(state) {
+  return JSON.stringify(state);
+}
+function decodeState(raw) {
+  try {
+    return sanitizeState(JSON.parse(raw));
+  } catch {
+    return null;
+  }
+}
+function sanitizeState(doc) {
+  if (doc == null || typeof doc !== "object") return null;
+  const d = doc;
+  if (d.version !== 1 || typeof d.layout !== "string") return null;
+  const out = { version: 1, layout: d.layout, charts: [] };
+  if (Array.isArray(d.charts)) {
+    const byId = /* @__PURE__ */ new Map();
+    for (const raw of d.charts) {
+      const id = raw != null && typeof raw === "object" ? raw.id : void 0;
+      if (typeof id !== "string" || id.length === 0) continue;
+      const cell = sanitizeCell(raw);
+      if (cell) byId.set(id, { id, ...cell });
+    }
+    out.charts = [...byId.values()];
+  }
+  if (typeof d.activeCellId === "string") out.activeCellId = d.activeCellId;
+  if (typeof d.timezone === "string" && d.timezone) out.timezone = d.timezone;
+  if (Array.isArray(d.favorites)) {
+    const favs = d.favorites.filter((f) => typeof f === "string");
+    if (favs.length > 0) out.favorites = favs;
+  }
+  const sync = sanitizeSync(d.sync);
+  if (sync) out.sync = sync;
+  const tracks = sanitizeTrackSizes(d.trackSizes);
+  if (tracks) out.trackSizes = tracks;
+  const panels = sanitizePanels(d.panels);
+  if (panels) out.panels = panels;
+  return out;
+}
+function sanitizeCell(raw) {
+  if (raw == null || typeof raw !== "object") return null;
+  const c = raw;
+  const out = {};
+  if (typeof c.symbol === "string") out.symbol = c.symbol;
+  if (typeof c.provider === "string") out.provider = c.provider;
+  if (typeof c.timeframe === "string") out.timeframe = c.timeframe;
+  if (typeof c.priceStyle === "string") out.priceStyle = c.priceStyle;
+  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 (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;
+  if (ind != null && typeof ind === "object") {
+    const manifest = Array.isArray(ind.manifest) ? ind.manifest.filter((n) => typeof n === "string") : [];
+    const natives = Array.isArray(ind.natives) ? ind.natives.filter((n) => typeof n === "string") : [];
+    out.indicators = { manifest, natives };
+  }
+  return out;
+}
+function sanitizeSync(raw) {
+  if (raw == null || typeof raw !== "object") return null;
+  const s = raw;
+  const out = {};
+  for (const kind of ["viewport", "symbol", "timeframe", "crosshair"]) {
+    const v = s[kind];
+    if (v === true) out[kind] = true;
+    else if (v != null && typeof v === "object") {
+      const groups = {};
+      for (const [id, g] of Object.entries(v)) if (typeof g === "string") groups[id] = g;
+      if (Object.keys(groups).length > 0) out[kind] = groups;
+    }
+  }
+  return Object.keys(out).length > 0 ? out : null;
+}
+function sanitizePanels(raw) {
+  if (raw == null || typeof raw !== "object") return null;
+  const p = raw;
+  const out = {};
+  if (typeof p.open === "string" && p.open) out.open = p.open;
+  if (p.widths != null && typeof p.widths === "object") {
+    const widths = {};
+    for (const [id, px] of Object.entries(p.widths)) {
+      if (typeof px === "number" && Number.isFinite(px) && px > 0) widths[id] = px;
+    }
+    if (Object.keys(widths).length > 0) out.widths = widths;
+  }
+  return out.open || out.widths ? out : null;
+}
+function sanitizeTrackSizes(raw) {
+  if (raw == null || typeof raw !== "object") return null;
+  const out = {};
+  for (const [layoutId, ts] of Object.entries(raw)) {
+    if (ts == null || typeof ts !== "object") continue;
+    const t = ts;
+    const entry = {};
+    for (const axis of ["cols", "rows"]) {
+      const arr = t[axis];
+      if (Array.isArray(arr) && arr.length > 0 && arr.every((w) => typeof w === "number" && Number.isFinite(w) && w > 0)) {
+        entry[axis] = arr;
+      }
+    }
+    if (entry.cols || entry.rows) out[layoutId] = entry;
+  }
+  return Object.keys(out).length > 0 ? out : null;
+}
+
+// src/widget/indicators.ts
+function entriesOf(manifest) {
+  return Array.isArray(manifest) ? manifest : manifest.indicators;
+}
+async function resolveIndicators(config, fetchImpl = fetch) {
+  let manifest;
+  let baseUrl;
+  if (typeof config === "function") {
+    manifest = await config();
+  } else if (typeof config === "string") {
+    baseUrl = config;
+    const res = await fetchImpl(config);
+    if (!res.ok) throw new Error(`indicator manifest ${config}: HTTP ${res.status}`);
+    manifest = await res.json();
+  } else {
+    manifest = config;
+  }
+  const out = [];
+  for (const entry of entriesOf(manifest)) {
+    try {
+      let script = entry.script;
+      if (script === void 0 && entry.url !== void 0) {
+        let url = entry.url;
+        try {
+          const base = typeof location !== "undefined" ? new URL(baseUrl ?? ".", location.href) : new URL(baseUrl ?? "");
+          url = new URL(entry.url, base).href;
+        } catch {
+        }
+        const res = await fetchImpl(url);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        script = await res.text();
+      }
+      if (script === void 0) throw new Error("entry has neither script nor url");
+      out.push({ name: entry.name, script, language: entry.language, enabled: entry.enabled !== false, category: entry.category });
+    } catch (err) {
+      console.warn(`[vela] indicator "${entry.name}" skipped:`, err);
+    }
+  }
+  return out;
+}
+function indicatorLedger(i) {
+  const natives = [...i.present];
+  if (i.volumePending && !natives.includes("volume")) natives.push("volume");
+  return {
+    manifest: i.manifestSettled ? [...i.instanceNames] : [...i.pendingManifest ?? i.instanceNames],
+    natives
+  };
+}
+
+// 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
+   *  destroyed instance captured at record time. */
+  constructor(getChart = () => null) {
+    this.getChart = getChart;
+    this.undoStack = [];
+    this.redoStack = [];
+    this.listeners = /* @__PURE__ */ new Set();
+    this.unsubs = [];
+    this.muted = false;
+  }
+  /** Record a reversible action (a fresh edit forks history: redo branch clears). */
+  push(action) {
+    if (this.muted) return;
+    this.undoStack.push(action);
+    this.redoStack.length = 0;
+    this.notify();
+  }
+  undo() {
+    const a = this.undoStack.pop();
+    if (!a) return;
+    this.mutedRun(() => a.undo());
+    this.redoStack.push(a);
+    this.notify();
+  }
+  redo() {
+    const a = this.redoStack.pop();
+    if (!a) return;
+    this.mutedRun(() => a.redo());
+    this.undoStack.push(a);
+    this.notify();
+  }
+  /** Run `fn` without recording — for programmatic state application (setState,
+   *  ledger restore), whose indicator/drawing events are not user edits. */
+  silently(fn) {
+    this.mutedRun(fn);
+  }
+  get canUndo() {
+    return this.undoStack.length > 0;
+  }
+  get canRedo() {
+    return this.redoStack.length > 0;
+  }
+  onChange(cb) {
+    this.listeners.add(cb);
+    return () => this.listeners.delete(cb);
+  }
+  /** (Re)bind to a chart: drawing edits enter the unified stack as delegate steps. */
+  onChart(chart) {
+    for (const u of this.unsubs) u();
+    this.unsubs = [
+      chart.on("drawing:created", () => this.pushDrawingStep()),
+      chart.on("drawing:edited", () => this.pushDrawingStep()),
+      chart.on("drawing:removed", () => this.pushDrawingStep())
+    ];
+  }
+  destroy() {
+    for (const u of this.unsubs) u();
+    this.unsubs = [];
+    this.listeners.clear();
+  }
+  pushDrawingStep() {
+    this.push({ undo: () => this.getChart()?.drawings.undo(), redo: () => this.getChart()?.drawings.redo() });
+  }
+  /** Replaying an action must not re-record the drawing events it triggers. */
+  mutedRun(fn) {
+    this.muted = true;
+    try {
+      fn();
+    } finally {
+      this.muted = false;
+    }
+  }
+  notify() {
+    for (const cb of this.listeners) cb();
+  }
+};
+
+// src/widget/toast.ts
+var STYLE_ID11 = "vela-widget-toast";
+var CSS11 = `
+.vela-toast {
+    position: absolute;
+    left: 50%;
+    bottom: 34px;
+    transform: translateX(-50%);
+    z-index: 30;
+    display: none;
+    align-items: center;
+    gap: 8px;
+    max-width: 70%;
+    padding: 6px 14px;
+    border-radius: 999px;
+    background: var(--vela-surface-elev);
+    border: 1px solid var(--vela-border);
+    color: var(--vela-fg);
+    font-size: var(--vela-font-size-md);
+    box-shadow: var(--vela-shadow);
+    pointer-events: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.vela-toast[data-open] { display: inline-flex; }
+.vela-toast[data-type='error'] { color: var(--vela-down); border-color: var(--vela-down); }
+.vela-toast[data-type='success'] { color: var(--vela-up); }
+`;
+var Toast = class {
+  constructor(host) {
+    this.timer = null;
+    injectStyles(STYLE_ID11, CSS11, host.ownerDocument);
+    this.el = host.ownerDocument.createElement("div");
+    this.el.className = "vela-toast";
+    host.appendChild(this.el);
+  }
+  /** Show a message; auto-hides after `ms` (0 = sticky until `hide()`). */
+  show(message, type = "info", ms = 3e3) {
+    this.el.textContent = message;
+    this.el.dataset.type = type;
+    this.el.dataset.open = "1";
+    if (this.timer) clearTimeout(this.timer);
+    this.timer = ms > 0 ? setTimeout(() => this.hide(), ms) : null;
+  }
+  hide() {
+    delete this.el.dataset.open;
+    if (this.timer) clearTimeout(this.timer);
+    this.timer = null;
+  }
+  destroy() {
+    this.hide();
+    this.el.remove();
+  }
+};
+
+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 };