@luxalgo/vela 0.6.8 → 0.6.10

package/dist/widget.cjs

@@ -125,6 +125,23 @@ var TypedEventBus = class {
   }
 };
 
+// src/data/symbol-groups.ts
+function isGroupRow(d) {
+  return d.group != null && d.ticker === d.group;
+}
+function groupKeyOf(d) {
+  return `${(d.prefix ?? d.provider ?? "").toLowerCase()}:${(d.group ?? "").toUpperCase()}`;
+}
+function groupMembers(pool, groupRow) {
+  const key = groupKeyOf(groupRow);
+  return pool.filter((s) => s.group != null && !isGroupRow(s) && groupKeyOf(s) === key);
+}
+function defaultMemberOf(pool, groupRow) {
+  const members = groupMembers(pool, groupRow);
+  const defaults2 = members.filter((m) => m.default);
+  return (defaults2.length === 1 ? defaults2[0] : members[0]) ?? null;
+}
+
 // src/data/ProviderRegistry.ts
 var normName = (n) => n.trim().toLowerCase();
 var normTicker = (t) => t.trim().toUpperCase();
@@ -214,17 +231,24 @@ var ProviderRegistry = class {
   resolve(raw, opts = {}) {
     const { provider, ticker } = this.parse(raw);
     if (provider) {
-      if (this.entries.has(provider)) return { provider, ticker };
+      if (this.entries.has(provider)) {
+        const d = this.entries.get(provider).byTicker?.get(normTicker(ticker));
+        return { provider, ticker: d != null && isGroupRow(d) ? this.loadableTicker(provider, d) : ticker };
+      }
       const key = `${provider}:${normTicker(ticker)}`;
       for (const name of this.candidateOrder(opts.default)) {
         const d = this.entries.get(name).prefixIndex?.get(key);
-        if (d) return { provider: name, ticker: d.ticker };
+        if (d) return { provider: name, ticker: this.loadableTicker(name, d) };
       }
       return null;
     }
     const norm = normTicker(ticker);
     for (const name of this.candidateOrder(opts.default)) {
-      if (this.entries.get(name).index?.has(norm)) return { provider: name, ticker };
+      const e = this.entries.get(name);
+      if (e.index?.has(norm)) {
+        const d = e.byTicker?.get(norm);
+        return { provider: name, ticker: d != null && isGroupRow(d) ? this.loadableTicker(name, d) : ticker };
+      }
     }
     if (opts.lenient && this.entries.size === 1) {
       const only = this.names()[0];
@@ -233,6 +257,13 @@ var ProviderRegistry = class {
     }
     return null;
   }
+  /** What a resolved descriptor LOADS: itself — unless it is a GROUP row (listed, never
+   *  served), which loads its default member (single `default`, else first listed). A
+   *  memberless group keeps its own ticker and fails downstream like any unknown symbol. */
+  loadableTicker(name, d) {
+    if (!isGroupRow(d)) return d.ticker;
+    return defaultMemberOf(this.entries.get(name)?.descriptors ?? [], d)?.ticker ?? d.ticker;
+  }
   /**
    * Resolve now if possible, else resolve later — re-attempting after each provider
    * settles. The promise stays pending until some registered provider can serve the
@@ -486,6 +517,28 @@ var CachingDataFeed = class {
     this.store.merge(key, dropForming(bars));
     return bars;
   }
+  /**
+   * Progressive twin of {@link load}: a COLD load streams through the inner feed's
+   * progressive path — batches forwarded verbatim, the FINAL answer cached exactly as
+   * `load` caches — while a cache-covered load answers once through `load` itself (a
+   * warm chart has nothing to stream). Falls back to `load` wholesale when the inner
+   * feed lacks the capability, so callers may prefer this method unconditionally.
+   */
+  async loadProgressive(cfg, onBatch, opts) {
+    if (cfg.data && cfg.data.length > 0) return this.inner.load(cfg);
+    if (!this.inner.loadProgressive) return null;
+    const symbol = cfg.symbol ?? "TEST";
+    const key = cacheKey(symbol, cfg.timeframe ?? "60", cfg.session);
+    const cached = this.store.get(key);
+    const n = cfg.bars ?? 500;
+    const lastCached = cached?.[cached.length - 1];
+    if (cached && lastCached && cached.length >= n - 1 && this.inner.loadRange) return this.load(cfg);
+    this.store.retainSymbol(symbol);
+    const bars = await this.inner.loadProgressive(cfg, onBatch, opts);
+    if (bars == null) return null;
+    this.store.merge(key, dropForming(bars));
+    return bars;
+  }
   /**
    * Cache-backed ranged fetch — the gateway engines use for secondary series
    * (`request.security` HTF/LTF/cross-symbol) and the orchestrator's backward
@@ -731,6 +784,17 @@ var MultiProviderFeed = class {
     this.prefetchSymbolInfo(resolved);
     return this.cache.load(canonical(cfg, resolved));
   }
+  /** Progressive twin of {@link load} — same resolution, the cache streams the batches. */
+  async loadProgressive(cfg, onBatch, opts) {
+    if (cfg.data && cfg.data.length > 0) {
+      this.liveBars = cfg.data.map((b) => ({ ...b }));
+      return cfg.data;
+    }
+    const resolved = await this.registry.whenResolvable(rawSymbol(cfg), { default: this.primaryProvider });
+    this.primaryProvider = resolved.provider;
+    this.prefetchSymbolInfo(resolved);
+    return this.cache.loadProgressive(canonical(cfg, resolved), onBatch, opts);
+  }
   /**
    * Synchronous per-symbol metadata for engines (Pine `syminfo.*`), served from the cache
    * warmed by load(). Undefined until the prefetch lands (the engine then synthesizes a
@@ -818,6 +882,18 @@ var RegistryFetchFeed = class {
     if (!provider) return Promise.resolve([]);
     return safeBars(provider, ticker, cfg.timeframe ?? "60", { limit: cfg.bars ?? 500, session: cfg.session });
   }
+  async loadProgressive(cfg, onBatch, opts) {
+    const { provider: name, ticker } = parseSymbol(cfg.symbol ?? "");
+    const provider = this.registry.get(name ?? "");
+    if (!provider) return [];
+    if (!provider.getBarsProgressive) return null;
+    try {
+      return await provider.getBarsProgressive(ticker, cfg.timeframe ?? "60", { limit: cfg.bars ?? 500, session: cfg.session }, onBatch, opts);
+    } catch (e) {
+      console.warn(`[vela] progressive fetch failed for ${ticker} ${cfg.timeframe ?? "60"} \u2014 ${e instanceof Error ? e.message : String(e)}`);
+      return [];
+    }
+  }
   loadRange(cfg, range) {
     const { provider: name, ticker } = parseSymbol(cfg.symbol ?? "");
     const provider = this.registry.get(name ?? "");
@@ -1097,11 +1173,11 @@ registerIcon(
 );
 registerIcon(
   "market-pre",
-  svg24('<path d="M12 2v8"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 6-4 4-4-4"/><path d="M16 18a4 4 0 0 0-8 0"/>')
+  svg24('<path d="M12 2v8"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m8 6 4-4 4 4"/><path d="M16 18a4 4 0 0 0-8 0"/>')
 );
 registerIcon(
   "market-post",
-  svg24('<path d="M12 10V2"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 18-4-4-4 4"/><path d="M16 6a4 4 0 0 0-8 0"/>')
+  svg24('<path d="M12 10V2"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 14-4 4-4-4"/><path d="M16 6a4 4 0 0 0-8 0"/>')
 );
 registerIcon("market-closed", svg24('<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>'));
 registerIcon(
@@ -1134,6 +1210,8 @@ registerIcon("folder-plus", S('<path d="M1.6 4.4a1 1 0 0 1 1-1h2.7l1.3 1.7h6.8a1
 registerIcon("folder-minus", S('<path d="M1.6 4.4a1 1 0 0 1 1-1h2.7l1.3 1.7h6.8a1 1 0 0 1 1 1v6.5a1 1 0 0 1-1 1h-10.8a1 1 0 0 1-1-1z"/><path d="M6.2 9.4h3.6"/>'));
 registerIcon("collapse", S('<path d="M3 8h10"/>'));
 registerIcon("expand", S('<rect x="2.2" y="2.2" width="11.6" height="11.6" rx="1.4"/><path d="M8 5.4v5.2M5.4 8h5.2"/>'));
+registerIcon("plus", S('<path d="M8 2.8v10.4M2.8 8h10.4"/>'));
+registerIcon("minus", S('<path d="M2.8 8h10.4"/>'));
 registerIcon("maximize", S('<path d="M2.5 6V3a.5.5 0 0 1 .5-.5h3M10 2.5h3a.5.5 0 0 1 .5.5v3M13.5 10v3a.5.5 0 0 1-.5.5h-3M6 13.5H3a.5.5 0 0 1-.5-.5v-3"/>'));
 registerIcon("restore", S('<path d="M6.2 2.5v3.7H2.5M9.8 13.5V9.8h3.7M13.5 6.2H9.8V2.5M2.5 9.8h3.7v3.7"/>'));
 registerIcon("star", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l-3.5 1.85.65-3.9-2.8-2.75 3.9-.55z"/>'));
@@ -1141,7 +1219,7 @@ registerIcon("star-filled", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L
 registerIcon("grip", S('<circle cx="6" cy="3.5" r="1"/><circle cx="10" cy="3.5" r="1"/><circle cx="6" cy="8" r="1"/><circle cx="10" cy="8" r="1"/><circle cx="6" cy="12.5" r="1"/><circle cx="10" cy="12.5" r="1"/>', 'fill="currentColor" stroke="none"'));
 registerIcon("kebab", S('<circle cx="8" cy="3.2" r="1.2"/><circle cx="8" cy="8" r="1.2"/><circle cx="8" cy="12.8" r="1.2"/>', 'fill="currentColor" stroke="none"'));
 registerIcon("burger", S('<path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/>'));
-registerIcon("reset", S('<rect x="6" y="6" width="4" height="4" rx="0.8"/><path d="M2.2 8a5.8 5.8 0 1 0 1.9-4.3L2.2 5.3"/><path d="M2.2 2.2v3.1h3.1"/>'));
+registerIcon("reset", S('<path d="M2 8a6 6 0 1 0 6-6 6.5 6.5 0 0 0-4.5 1.83L2 5.33"/><path d="M2 2v3.33h3.33"/>'));
 registerIcon("pane-collapse", S('<path d="M2.6 9.4h4v4M13.4 6.6h-4v-4"/><path d="m9.4 6.6 4.2-4.2M2.4 13.6l4.2-4.2"/>'));
 registerIcon("pane-expand", S('<path d="M9.8 2.4h3.8v3.8M6.2 13.6H2.4V9.8"/><path d="m13.6 2.4-4.4 4.4M2.4 13.6l4.4-4.4"/>'));
 registerIcon("cursor", svg24('<path d="M5 3l6 16 2-6 6-2z"/>', 'fill="currentColor" stroke="none"'));
@@ -4195,6 +4273,196 @@ function buildFieldControl(desc) {
   return { el };
 }
 
+// src/ui/components/callout-bubble/controller.ts
+function closesPanel(item) {
+  return item.close !== false;
+}
+function calloutPanelRows(items) {
+  const rows = [];
+  for (const item of items) {
+    if (item.type === "text") {
+      rows.push({ type: "text", text: item.text });
+      continue;
+    }
+    const last = rows[rows.length - 1];
+    if (last && last.type === "buttons") last.buttons.push(item);
+    else rows.push({ type: "buttons", buttons: [item] });
+  }
+  return rows;
+}
+
+// src/ui/components/callout-bubble/styles.ts
+var CALLOUT_STYLE_ID = "vela-ui-callout-bubble";
+var CALLOUT_CSS = `
+.vela-callout {
+    display: inline-grid;
+    place-items: center;
+    border-radius: 50%;
+    flex: none;
+    line-height: 0;
+    box-sizing: border-box;
+    cursor: default;
+    user-select: none;
+    -webkit-user-select: none;
+}
+.vela-callout[role='button'] { cursor: pointer; }
+.vela-callout svg { display: block; }
+/* The deployed panel \u2014 carries the kit's elevated-card look itself (the popover
+   shell is bare positioning chrome). */
+.vela-callout-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 10px 12px;
+    max-width: 280px;
+    box-sizing: border-box;
+    background: var(--vela-surface-elev);
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 6px;
+    box-shadow: var(--vela-shadow);
+    color: var(--vela-fg);
+    font: var(--vela-font-size-md) var(--vela-font);
+}
+.vela-callout-title { font-weight: 600; color: var(--vela-fg-bright); }
+.vela-callout-text { color: var(--vela-fg-muted); line-height: 1.45; white-space: pre-line; }
+.vela-callout-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.vela-callout-btn {
+    cursor: pointer;
+    height: 26px;
+    padding: 0 10px;
+    border-radius: 5px;
+    border: 1px solid var(--vela-border);
+    background: transparent;
+    color: var(--vela-fg);
+    font-size: var(--vela-font-size-md);
+    font-family: inherit;
+    transition: background var(--vela-dur-fast) ease, color var(--vela-dur-fast) ease, opacity var(--vela-dur-fast) ease, border-color var(--vela-dur-fast) ease;
+}
+.vela-callout-btn:hover { background: var(--vela-hover); color: var(--vela-fg-bright); border-color: var(--vela-fg-muted); }
+.vela-callout-btn-primary { border-color: var(--vela-selected-bg); background: var(--vela-selected-bg); color: var(--vela-selected-fg); }
+.vela-callout-btn-primary:hover { background: var(--vela-selected-bg); color: var(--vela-selected-fg); opacity: 0.85; border-color: var(--vela-selected-bg); }
+`;
+
+// src/ui/components/callout-bubble/view.ts
+var CalloutBubble = class {
+  constructor(opts) {
+    this.pop = null;
+    this.spec = { icon: opts.icon, background: opts.background, label: opts.label };
+    if (opts.color !== void 0) this.spec.color = opts.color;
+    if (opts.panel !== void 0) this.spec.panel = opts.panel;
+    this.size = opts.size ?? 16;
+    this.host = opts.host;
+    this.theme = opts.theme;
+    this.boundary = opts.boundary;
+    const doc = (opts.host ?? document.body).ownerDocument;
+    injectStyles(CALLOUT_STYLE_ID, CALLOUT_CSS, doc);
+    this.el = doc.createElement("span");
+    this.el.className = "vela-callout";
+    this.el.style.width = `${this.size}px`;
+    this.el.style.height = `${this.size}px`;
+    this.el.addEventListener("click", (e) => {
+      if (!this.spec.panel) return;
+      e.stopPropagation();
+      this.toggle();
+    });
+    this.el.addEventListener("dblclick", (e) => {
+      if (this.spec.panel) e.stopPropagation();
+    });
+    this.el.addEventListener("keydown", (e) => {
+      if (!this.spec.panel || e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      this.toggle();
+    });
+    this.dress();
+  }
+  /** Re-dress the bubble (a status change: new icon, tint, label, panel). */
+  set(spec) {
+    this.spec = { ...this.spec, ...spec };
+    if ("panel" in spec) this.pop?.hide();
+    this.dress();
+  }
+  /** Whether the deployed panel is currently open. */
+  get open() {
+    return this.pop?.open ?? false;
+  }
+  /** Close the deployed panel, if any. The bubble itself stays. */
+  hidePanel() {
+    this.pop?.hide();
+  }
+  destroy() {
+    this.pop?.destroy();
+    this.pop = null;
+    this.el.remove();
+  }
+  dress() {
+    const clickable = this.spec.panel !== void 0;
+    this.el.style.background = this.spec.background;
+    this.el.style.color = this.spec.color ?? "";
+    this.el.innerHTML = iconAt(this.spec.icon, this.size - 4);
+    this.el.setAttribute("aria-label", this.spec.label);
+    if (clickable) {
+      this.el.setAttribute("role", "button");
+      this.el.tabIndex = 0;
+    } else {
+      this.el.removeAttribute("role");
+      this.el.removeAttribute("tabindex");
+    }
+  }
+  toggle() {
+    if (this.pop?.open) {
+      this.pop.hide();
+      return;
+    }
+    const panel = this.spec.panel;
+    if (!panel) return;
+    this.pop?.destroy();
+    this.pop = new Popover({
+      trigger: this.el,
+      gap: 6,
+      content: (body) => this.buildPanel(body, panel),
+      ...this.host ? { host: this.host } : {},
+      ...this.theme ? { theme: this.theme() } : {},
+      ...this.boundary ? { boundary: this.boundary } : {}
+    });
+    this.pop.show();
+  }
+  buildPanel(body, panel) {
+    const doc = body.ownerDocument;
+    const root = doc.createElement("div");
+    root.className = "vela-callout-panel";
+    if (panel.title) {
+      const title = doc.createElement("div");
+      title.className = "vela-callout-title";
+      title.textContent = panel.title;
+      root.appendChild(title);
+    }
+    for (const row of calloutPanelRows(panel.items)) {
+      if (row.type === "text") {
+        const text = doc.createElement("div");
+        text.className = "vela-callout-text";
+        text.textContent = row.text;
+        root.appendChild(text);
+        continue;
+      }
+      const actions = doc.createElement("div");
+      actions.className = "vela-callout-actions";
+      for (const item of row.buttons) {
+        const btn2 = doc.createElement("button");
+        btn2.type = "button";
+        btn2.className = "vela-callout-btn" + (item.primary ? " vela-callout-btn-primary" : "");
+        btn2.textContent = item.label;
+        btn2.addEventListener("click", () => {
+          item.run();
+          if (closesPanel(item)) this.pop?.hide();
+        });
+        actions.appendChild(btn2);
+      }
+      root.appendChild(actions);
+    }
+    body.appendChild(root);
+  }
+};
+
 // src/widget/layout-picker.ts
 var STYLE_ID = "vela-widget-layout-picker-v14";
 var CSS2 = `
@@ -4677,6 +4945,44 @@ function legendActionsProviderFor(chart, context) {
     return legendActions().filter((d) => !d.when || d.when(info)).map((d) => ({ id: d.id, icon: d.icon, tooltip: d.tooltip, run: () => d.run(context(), info) }));
   };
 }
+var calloutRegistry = /* @__PURE__ */ new Map();
+function legendCallouts() {
+  return [...calloutRegistry.values()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+}
+function legendCalloutsProviderFor(chart, context) {
+  return (indicatorId) => {
+    const handle = chart.indicators().find((h) => h.id === indicatorId);
+    if (!handle) return [];
+    const info = { id: handle.id, title: handle.title, ...handle.source !== void 0 ? { source: handle.source } : {} };
+    const views = [];
+    for (const d of legendCallouts()) {
+      const spec = d.callout(info);
+      if (!spec) continue;
+      views.push({
+        id: d.id,
+        icon: spec.icon,
+        background: spec.background,
+        ...spec.color !== void 0 ? { color: spec.color } : {},
+        tooltip: spec.tooltip,
+        ...spec.content !== void 0 ? {
+          content: {
+            ...spec.content.title !== void 0 ? { title: spec.content.title } : {},
+            items: spec.content.items.map(
+              (item) => item.type === "text" ? item : {
+                type: "button",
+                label: item.label,
+                ...item.primary !== void 0 ? { primary: item.primary } : {},
+                ...item.close !== void 0 ? { close: item.close } : {},
+                run: () => item.run(context(), info)
+              }
+            )
+          }
+        } : {}
+      });
+    }
+    return views;
+  };
+}
 var stateHandlers = /* @__PURE__ */ new Map();
 function registerStatePersistence(handler) {
   stateHandlers.set(handler.key, handler);
@@ -13516,6 +13822,17 @@ function dedupeSymbols(list) {
   }
   return out;
 }
+function foldGroups(list) {
+  const groupsAbove = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const s of list) {
+    if (isGroupRow(s)) {
+      groupsAbove.add(groupKeyOf(s));
+      out.push(s);
+    } else if (s.group == null || !groupsAbove.has(groupKeyOf(s))) out.push(s);
+  }
+  return out;
+}
 var TOP_TICKERS = ["BTCUSDT", "ETHUSDT", "SOLUSDT", "BNBUSDT", "XRPUSDT", "DOGEUSDT", "ADAUSDT", "LINKUSDT"];
 function parseQuery(raw, venues) {
   const m = raw.match(/^\s*([^\s:]+)\s*[:\s]\s*(.*)$/);
@@ -13647,6 +13964,21 @@ var CSS8 = `
 .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; }
+/* Grouped listings (futures roots): the chevron unfolds members inline, indented. */
+.vela-sp-expander {
+    all: unset;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 5px;
+    cursor: pointer;
+    color: var(--vela-fg-muted);
+}
+.vela-sp-expander:hover { background: var(--vela-surface-elev); color: var(--vela-fg); }
+.vela-sp-row[data-member] { padding-left: 34px; }
 `;
 var PAGE = 100;
 var SymbolPicker = class {
@@ -13658,6 +13990,11 @@ var SymbolPicker = class {
     this.seed = "";
     this.activeTab = "All";
     this.visible = PAGE;
+    /** The last filter pass returned fewer raw rows than asked — the pool is drained
+     *  (checked BEFORE folding: folding shortens pages without meaning exhaustion). */
+    this.exhausted = false;
+    /** Group rows currently expanded (venue-scoped keys) — members shown inline. */
+    this.expanded = /* @__PURE__ */ new Set();
     /** The ranked pool cache — `key` fingerprints the raw pool the ranking ran on. */
     this.ranked = null;
     this.ranking = false;
@@ -13672,7 +14009,7 @@ var SymbolPicker = class {
     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"]) {
+    for (const t of ["All", "Stocks", "ETFs", "Crypto", "Futures", "Forex", "Commodities"]) {
       const b = doc.createElement("button");
       b.className = "vela-sp-tab";
       b.textContent = t;
@@ -13688,7 +14025,7 @@ var SymbolPicker = class {
     this.list = doc.createElement("div");
     this.list.className = "vela-sp-list";
     this.list.addEventListener("scroll", () => {
-      if (this.rows.length < this.visible) return;
+      if (this.exhausted) return;
       if (this.list.scrollTop + this.list.clientHeight < this.list.scrollHeight - 200) return;
       this.visible += PAGE;
       this.grow();
@@ -13717,14 +14054,19 @@ var SymbolPicker = class {
       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.prefix ?? pick.provider, opts.onSelect);
+        if (pick) this.pick(pick);
         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.venue, opts.onSelect);
+      const target = e.target;
+      const row = target.closest(".vela-sp-row");
+      if (!row) return;
+      const s = this.rows[Number(row.dataset.i)];
+      if (!s) return;
+      if (target.closest(".vela-sp-expander")) this.toggleExpand(s);
+      else this.pick(s);
     });
   }
   /** Wire where symbols come from (re-called on every widget rebuild). */
@@ -13741,6 +14083,27 @@ var SymbolPicker = class {
   destroy() {
     this.dialog.destroy();
   }
+  /** Route a row activation: a GROUP row loads its default member (the root itself is
+   *  listed, never loadable), any other row loads itself. */
+  pick(s) {
+    const target = isGroupRow(s) ? defaultMemberOf(this.pool(), s) ?? s : s;
+    this.select(target.ticker, target.prefix ?? target.provider, this.opts.onSelect);
+  }
+  /** Expand/collapse a group row IN PLACE — same query, same page, same scroll; only
+   *  the member rows under the group appear or go. */
+  toggleExpand(s) {
+    const key = groupKeyOf(s);
+    if (!this.expanded.delete(key)) this.expanded.add(key);
+    const scrollTop = this.list.scrollTop;
+    const focus = this.rows[this.highlighted];
+    this.rows = this.computeRows();
+    this.list.replaceChildren();
+    this.rows.forEach((r, i) => this.list.appendChild(this.rowEl(r, i)));
+    const at = focus ? this.rows.indexOf(focus) : -1;
+    this.highlighted = at >= 0 ? at : Math.min(this.highlighted, Math.max(0, this.rows.length - 1));
+    this.renderHighlight();
+    this.list.scrollTop = scrollTop;
+  }
   select(ticker, venue, onSelect) {
     this.close();
     onSelect(venue ? `${venue}:${ticker}` : ticker);
@@ -13782,10 +14145,26 @@ var SymbolPicker = class {
     return this.ranked?.result ?? raw;
   }
   computeRows() {
-    const TAB_TYPES = { Crypto: ["crypto"], Stocks: ["stock"], ETFs: ["etf"], Forex: ["forex"], Commodities: ["commodity"] };
+    const TAB_TYPES = { Crypto: ["crypto"], Stocks: ["stock"], ETFs: ["etf"], Futures: ["futures", "root"], Forex: ["forex"], Commodities: ["commodity"] };
     const all = this.pool();
     const pool = this.activeTab === "All" ? all : all.filter((s) => TAB_TYPES[this.activeTab]?.includes((s.type ?? "").toLowerCase()) || this.activeTab === "Crypto" && (s.type ?? "").toLowerCase() === "futures");
-    return filterSymbols(pool, this.input.value, this.visible, symbolRanking() ? false : TOP_TICKERS);
+    const filtered = filterSymbols(pool, this.input.value, this.visible, symbolRanking() ? false : TOP_TICKERS);
+    this.exhausted = filtered.length < this.visible;
+    const folded = foldGroups(filtered);
+    if (!this.expanded.size) return folded;
+    const keyOf = (s) => `${(s.prefix ?? s.provider ?? "").toLowerCase()}:${s.ticker.toUpperCase()}`;
+    const present = new Set(folded.map(keyOf));
+    const out = [];
+    for (const s of folded) {
+      out.push(s);
+      if (!isGroupRow(s) || !this.expanded.has(groupKeyOf(s))) continue;
+      for (const m of groupMembers(all, s)) {
+        if (present.has(keyOf(m))) continue;
+        present.add(keyOf(m));
+        out.push(m);
+      }
+    }
+    return out;
   }
   refresh() {
     const doc = this.list.ownerDocument;
@@ -13800,19 +14179,20 @@ var SymbolPicker = class {
       this.list.appendChild(empty);
       return;
     }
-    for (const s of this.rows) this.list.appendChild(this.rowEl(s));
+    this.rows.forEach((s, i) => this.list.appendChild(this.rowEl(s, i)));
     this.renderHighlight();
   }
   /** Append the page the grown `visible` just uncovered — rows already on screen stay put. */
   grow() {
     const already = this.rows.length;
     this.rows = this.computeRows();
-    for (const s of this.rows.slice(already)) this.list.appendChild(this.rowEl(s));
+    this.rows.slice(already).forEach((s, j) => this.list.appendChild(this.rowEl(s, already + j)));
   }
-  rowEl(s) {
+  rowEl(s, i) {
     const doc = this.list.ownerDocument;
     const row = doc.createElement("div");
     row.className = "vela-sp-row";
+    row.dataset.i = String(i);
     row.dataset.ticker = s.ticker;
     const venue = s.prefix ?? s.provider;
     if (venue) row.dataset.venue = venue;
@@ -13827,6 +14207,14 @@ var SymbolPicker = class {
     d.textContent = s.description ?? (s.type ?? "");
     main.append(t, d);
     row.append(av, main);
+    if (isGroupRow(s)) {
+      row.dataset.group = "1";
+      const expander = doc.createElement("button");
+      expander.className = "vela-sp-expander";
+      expander.setAttribute("aria-label", "Show contracts");
+      expander.appendChild(iconEl(this.expanded.has(groupKeyOf(s)) ? "chevron-down" : "chevron-right", doc));
+      row.appendChild(expander);
+    } else if (s.group != null && this.expanded.has(groupKeyOf(s))) row.dataset.member = "1";
     if (venue) {
       const badge = doc.createElement("span");
       badge.className = "vela-sp-badge";
@@ -14443,6 +14831,9 @@ var CSS13 = `
 }
 .vela-mb-item:active { background: var(--vela-hover); }
 .vela-mb-item .vela-icon { font-size: 18px; width: 18px; height: 18px; }
+/* A lit stop (the maximize toggle while something is isolated): the inverse
+   "selected" chip \u2014 white on the dark theme, dark on the light one. */
+.vela-mb-item.vela-mb-on, .vela-mb-item.vela-mb-on:active { background: var(--vela-selected-bg); color: var(--vela-selected-fg); }
 /* Left-aligned contributed actions get their own stops (the built-in indicators
    slot) \u2014 the wrapper is layout-transparent so each stop flexes like a sibling. */
 .vela-mb-actions { display: contents; }
@@ -14483,9 +14874,11 @@ var MobileBar = class {
     this.actionsHost.className = "vela-mb-actions";
     const onDrawings = opts.onDrawingsClick;
     const drawings = onDrawings ? item("vela-mb-drawings", "Drawings", onDrawings, "pen") : null;
+    const onMaximize = opts.onMaximizeClick;
+    this.maxEl = onMaximize ? item("vela-mb-maximize", "Maximize chart", onMaximize, "maximize") : null;
     const more = item("vela-mb-more", "More", opts.onMoreClick, "kebab");
     const settings = item("vela-mb-settings", "Chart settings", opts.onSettingsClick, "gear");
-    this.el.append(this.symbolEl, this.tfEl, ...indicators ? [indicators] : [], this.actionsHost, ...drawings ? [drawings] : [], more, settings);
+    this.el.append(this.symbolEl, this.tfEl, ...indicators ? [indicators] : [], this.actionsHost, ...drawings ? [drawings] : [], ...this.maxEl ? [this.maxEl] : [], more, settings);
     host.appendChild(this.el);
     this.renderActions();
   }
@@ -14517,6 +14910,14 @@ var MobileBar = class {
   setTimeframe(tf) {
     this.tfEl.textContent = timeframeLabel(tf);
   }
+  /** Light the maximize stop while something is isolated (a chart over the grid,
+   *  or a maximized pane inside the active chart) — inverse chip + restore glyph. */
+  setMaximizeActive(on) {
+    if (!this.maxEl) return;
+    this.maxEl.classList.toggle("vela-mb-on", on);
+    this.maxEl.setAttribute("aria-label", on ? "Restore layout" : "Maximize chart");
+    this.maxEl.replaceChildren(iconEl(on ? "restore" : "maximize", this.el.ownerDocument));
+  }
   destroy() {
     this.el.remove();
   }
@@ -16694,7 +17095,7 @@ var DrawingToolbar = class {
     this.root.replaceChildren();
     this.groupCells.clear();
     this.groupIcons.clear();
-    this.cursorBtn = this.makeButton(CURSOR_ICON, "Cursor", () => this.onArm(null));
+    this.cursorBtn = this.makeButton(CURSOR_ICON, "Cursor", () => this.onCursorClick());
     this.root.appendChild(this.cursorBtn);
     if (this.def.groups.length > 0) this.root.appendChild(this.divider());
     for (const g of this.def.groups) {
@@ -16798,6 +17199,14 @@ var DrawingToolbar = class {
     this.magnetIcon = icon2;
     return cell;
   }
+  /** Cursor returns to select/idle: an active measure/eraser mode exits through its own
+   *  toggle callback (disarming a tool via `onArm(null)` alone can't — the host treats a
+   *  null arm as a no-op side effect of entering those modes), then the tool disarms. */
+  onCursorClick() {
+    if (this.measureActive) this.onMeasure();
+    if (this.eraserActive) this.onEraser();
+    this.onArm(null);
+  }
   /** Clicking the icon arms the group's last-used tool (it does NOT open the flyout). */
   onGroupIconClick(group) {
     const type = this.lastUsed.get(group.id) ?? group.tools[0]?.type;
@@ -17578,6 +17987,7 @@ var IndicatorHandleImpl = class {
   constructor(id, title, controller, source) {
     this.controller = controller;
     this.schema = [];
+    this.propsSchema = [];
     this.visibleState = true;
     this.bus = new TypedEventBus();
     this.id = id;
@@ -17587,6 +17997,9 @@ var IndicatorHandleImpl = class {
   get inputs() {
     return this.schema;
   }
+  get props() {
+    return this.propsSchema;
+  }
   get visible() {
     return this.visibleState;
   }
@@ -17596,6 +18009,12 @@ var IndicatorHandleImpl = class {
   setInputs(values) {
     this.controller.applyInputs(this.id, values);
   }
+  setProp(key, value) {
+    this.controller.applyProps(this.id, { [key]: value });
+  }
+  setProps(values) {
+    this.controller.applyProps(this.id, values);
+  }
   setVisible(visible) {
     this.controller.setVisible(this.id, visible);
   }
@@ -17615,6 +18034,9 @@ var IndicatorHandleImpl = class {
   setSchema(schema) {
     this.schema = schema;
   }
+  setPropsSchema(schema) {
+    this.propsSchema = schema;
+  }
   /** Sync the public `visible` getter when the orchestrator changes visibility (API or legend eye). */
   setVisibleState(visible) {
     this.visibleState = visible;
@@ -17628,6 +18050,8 @@ var IndicatorHandleImpl = class {
 function summarizeModel(model) {
   const series = {};
   for (const s of model.series) series[s.kind] = (series[s.kind] ?? 0) + 1;
+  const countOverlay = (items) => items?.filter((i) => i.overlay === true).length ?? 0;
+  const forcedOverlay = countOverlay(model.series) + countOverlay(model.fills) + countOverlay(model.backgrounds) + countOverlay(model.lines) + countOverlay(model.boxes) + countOverlay(model.labels) + countOverlay(model.polylines) + countOverlay(model.linefills) + countOverlay(model.tables);
   return {
     id: model.id,
     title: model.title,
@@ -17647,7 +18071,8 @@ function summarizeModel(model) {
     tables: model.tables?.length ?? 0,
     barColors: model.barColors?.length ?? 0,
     trades: model.trades?.length ?? 0,
-    inputs: model.inputs.length
+    inputs: model.inputs.length,
+    forcedOverlay
   };
 }
 function inspectModels(models) {
@@ -17668,7 +18093,8 @@ function inspectModels(models) {
       linefills: sum((s) => s.linefills),
       tables: sum((s) => s.tables),
       barColors: sum((s) => s.barColors),
-      trades: sum((s) => s.trades)
+      trades: sum((s) => s.trades),
+      forcedOverlay: sum((s) => s.forcedOverlay)
     }
   };
 }
@@ -17779,6 +18205,10 @@ var EngineOrchestrator = class _EngineOrchestrator {
     /** Invalidates detached async work (backfill loops, in-flight loads, gap heals):
      *  bumped by init(), setMarket() and destroy(). */
     this.generation = 0;
+    /** Aborts the in-flight PROGRESSIVE load's source polling on supersession — an
+     *  abandoned stream left polling to its own budget starves the browser's per-host
+     *  connection pool, and the NEXT symbol's very first fetch with it (measured). */
+    this.progressiveAbort = null;
     /** Awaiters racing a superseded load (setMarket callers) — released on every bump so they never hang. */
     this.supersedeWaiters = [];
     /** `history:complete` fired for the CURRENT load. Each market load re-arms the cycle
@@ -17812,7 +18242,9 @@ var EngineOrchestrator = class _EngineOrchestrator {
     for (const engine of engines) this.registerEngine(engine.language, engine);
     this.defaultLanguage = config.defaultLanguage;
     this.renderer.mount(container, config.theme);
-    this.renderer.onInputChange((e) => this.applyInputs(e.indicatorId, { [e.key]: e.value }));
+    this.renderer.onInputChange(
+      (e) => e.kind === "prop" ? this.applyProps(e.indicatorId, { [e.key]: e.value }) : this.applyInputs(e.indicatorId, { [e.key]: e.value })
+    );
     this.renderer.onRemoveIndicator((id) => this.removeIndicator(id));
     this.renderer.onToggleIndicatorVisible?.((id, visible) => this.setVisible(id, visible));
     this.paneActionUnsub = this.renderer.onPaneAction?.((a) => this.handlePaneAction(a)) ?? null;
@@ -17919,6 +18351,8 @@ var EngineOrchestrator = class _EngineOrchestrator {
    *  superseded setMarket awaiters so their promises resolve instead of hanging. */
   bumpGeneration() {
     const gen = ++this.generation;
+    this.progressiveAbort?.abort();
+    this.progressiveAbort = null;
     for (const w of this.supersedeWaiters.splice(0)) w();
     return gen;
   }
@@ -17972,7 +18406,47 @@ var EngineOrchestrator = class _EngineOrchestrator {
     const requested = market.bars ?? 500;
     const initialRange = market.visibleRange;
     const deep = !market.data?.length && initialRange == null && requested > SINGLE_LOAD_BARS;
-    if (deep && this.feed.loadRange) {
+    let progressiveServed = false;
+    if (!market.data?.length && initialRange == null && this.feed.loadProgressive) {
+      let painted = false;
+      const paint = (bars, final) => {
+        if (this.generation !== gen || !final && bars.length === 0) return;
+        this.setBarSeries(bars, painted ? { preserveView: true } : void 0);
+        if (!painted && bars.length > 0) {
+          painted = true;
+          if (opts.firstLoad) this.activateBarLayers();
+          if (!final) this.historyState = "backfill";
+        }
+      };
+      const abort = new AbortController();
+      this.progressiveAbort = abort;
+      progressiveServed = await new Promise((firstPaint) => {
+        let signaled = false;
+        const signal = (served) => {
+          if (!signaled) {
+            signaled = true;
+            firstPaint(served);
+          }
+        };
+        abort.signal.addEventListener("abort", () => signal(true), { once: true });
+        this.feed.loadProgressive(market, (bars) => {
+          paint(bars, false);
+          if (painted) signal(true);
+        }, { signal: abort.signal }).then((full) => {
+          if (this.progressiveAbort === abort) this.progressiveAbort = null;
+          if (full == null) return signal(false);
+          if (this.generation !== gen) return signal(true);
+          paint(full, true);
+          this.completeHistory(full.length >= requested ? "depth" : "genesis");
+          signal(true);
+        }).catch(() => {
+          if (this.progressiveAbort === abort) this.progressiveAbort = null;
+          if (this.generation === gen) this.completeHistory("aborted");
+          signal(true);
+        });
+      });
+    }
+    if (progressiveServed) ; else if (deep && this.feed.loadRange) {
       const head = await this.feed.load({ ...market, bars: Math.min(requested, CHUNK_BARS) });
       if (this.generation !== gen) return;
       this.setBarSeries(head);
@@ -18492,7 +18966,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     const title = options.title ?? "Indicator";
     const handle = new IndicatorHandleImpl(id, title, this, source);
     this.handles.set(id, handle);
-    this.registry.add({ id, title, source, options, inputValues: { ...options.inputs ?? {} } });
+    this.registry.add({ id, title, source, options, inputValues: { ...options.inputs ?? {} }, propValues: { ...options.props ?? {} } });
     void this.startIndicator(id, source, options, handle);
     return handle;
   }
@@ -18515,7 +18989,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
       return handle;
     }
     const inputValues = { ...descriptor.defaultInputs(), ...options.inputs ?? {} };
-    this.registry.add({ id, title, source: type, inputValues, native: { type, instance: descriptor.create(), descriptor } });
+    this.registry.add({ id, title, source: type, inputValues, propValues: {}, native: { type, instance: descriptor.create(), descriptor } });
     handle.setSchema(descriptor.inputsSchema());
     void this.startNativeIndicator(id, handle);
     return handle;
@@ -18568,6 +19042,19 @@ var EngineOrchestrator = class _EngineOrchestrator {
     if (record.session) record.session.update(record.inputValues);
     else if (record.native && !record.hidden) record.native.instance.setInputs(record.inputValues);
   }
+  /** IndicatorController: re-run an indicator with merged declaration-prop overrides.
+   *  Same lifecycle as {@link applyInputs} — a prop change replays the whole script.
+   *  Script indicators only: natives have no declaration props. */
+  applyProps(id, values) {
+    const record = this.registry.get(id);
+    if (!record?.session) return;
+    record.propValues = { ...record.propValues, ...values };
+    if (record.renderHandle) this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
+    record.pendingStructural = true;
+    if (!record.hidden) this.setLoading(record, true);
+    record.pendingCause = "inputs";
+    record.session.update(record.inputValues, record.propValues);
+  }
   /** IndicatorController: tear down an indicator and (if now empty) its pane. */
   /** Live handles of every indicator on the chart (script + native), insertion order. */
   listIndicators() {
@@ -18716,6 +19203,10 @@ var EngineOrchestrator = class _EngineOrchestrator {
       for (const input of prepared.inputs) defaults2[input.key] = input.defval;
       record.inputValues = { ...defaults2, ...record.inputValues };
       handle.setSchema(prepared.inputs);
+      const propDefaults = {};
+      for (const prop of prepared.props ?? []) propDefaults[prop.key] = prop.defval;
+      record.propValues = { ...propDefaults, ...record.propValues };
+      handle.setPropsSchema(prepared.props ?? []);
       this.mountLoadingPlaceholder(id, record);
       this.executeIndicator(id, handle);
     } catch (err) {
@@ -18739,6 +19230,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
         getBars: () => this.bars,
         fetchSeries: (sym, tf, range) => this.fetchSeries(sym, tf, range),
         inputs: record.inputValues,
+        props: record.propValues,
         visibleRange: this.currentVisibleRange(),
         mode,
         // Mid-backfill session starts (add / re-show / price-style re-execute) let the
@@ -18832,6 +19324,9 @@ var EngineOrchestrator = class _EngineOrchestrator {
     const meta = record.prepared.meta;
     const model = {
       id,
+      // Deliberately the FULL title, never a shorttitle: while the script loads the
+      // legend identifies it by its full name; the compact shorttitle arrives with
+      // the first computed model and takes over from there.
       title: record.options?.title ?? meta.title,
       overlay: meta.overlay,
       paneHint: meta.overlay ? "price" : "new",
@@ -18840,7 +19335,8 @@ var EngineOrchestrator = class _EngineOrchestrator {
       backgrounds: [],
       priceLines: [],
       inputs: record.prepared.inputs,
-      inputValues: record.inputValues
+      inputValues: record.inputValues,
+      ...record.prepared.props ? { props: record.prepared.props, propValues: record.propValues } : {}
     };
     const paneId = this.routePane(id, model, record.options ?? {});
     this.placeModel(model, id, paneId);
@@ -19073,7 +19569,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     record.model = model;
     if (record.pendingStructural) {
       record.renderHandle = this.renderer.mountIndicator(model);
-      this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues);
+      this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
       record.pendingStructural = false;
     } else {
       this.renderer.updateIndicator(record.renderHandle, modelToValuePatch(model));
@@ -19100,16 +19596,17 @@ var EngineOrchestrator = class _EngineOrchestrator {
   placeModel(model, id, paneId) {
     model.id = id;
     model.paneId = paneId;
-    for (const series of model.series) series.paneId = paneId;
-    for (const fill of model.fills) fill.paneId = paneId;
-    for (const bg of model.backgrounds) bg.paneId = paneId;
+    const paneOf = (item) => item.overlay === true ? "price" : paneId;
+    for (const series of model.series) series.paneId = paneOf(series);
+    for (const fill of model.fills) fill.paneId = paneOf(fill);
+    for (const bg of model.backgrounds) bg.paneId = paneOf(bg);
     for (const line of model.priceLines) line.paneId = paneId;
-    if (model.lines) for (const ln of model.lines) ln.paneId = paneId;
-    if (model.boxes) for (const bx of model.boxes) bx.paneId = paneId;
-    if (model.labels) for (const lb of model.labels) lb.paneId = paneId;
-    if (model.polylines) for (const pl of model.polylines) pl.paneId = paneId;
-    if (model.linefills) for (const lf of model.linefills) lf.paneId = paneId;
-    if (model.tables) for (const tb of model.tables) tb.paneId = paneId;
+    if (model.lines) for (const ln of model.lines) ln.paneId = paneOf(ln);
+    if (model.boxes) for (const bx of model.boxes) bx.paneId = paneOf(bx);
+    if (model.labels) for (const lb of model.labels) lb.paneId = paneOf(lb);
+    if (model.polylines) for (const pl of model.polylines) pl.paneId = paneOf(pl);
+    if (model.linefills) for (const lf of model.linefills) lf.paneId = paneOf(lf);
+    if (model.tables) for (const tb of model.tables) tb.paneId = paneOf(tb);
   }
   emitContextChanged(id) {
     if (!this.registry.get(id)?.session?.getContext) return;
@@ -19262,6 +19759,15 @@ var RendererControl = class {
   setLegendActions(provider) {
     this.renderer.setLegendActions?.(provider);
   }
+  /**
+   * Wire the legend rows' HOST-CONTRIBUTED callout bubbles (the shells route the
+   * plugin registry through this; see `registerLegendCallout`). Silent on a renderer
+   * without the seam — contributed callouts simply never show there, same graceful
+   * degradation as {@link setLegendActions}.
+   */
+  setLegendCallouts(provider) {
+    this.renderer.setLegendCallouts?.(provider);
+  }
   /**
    * Replace the indicator legend's fold toggle with a host action (or restore it with
    * `null`) — multi-chart shells point the chip at their indicator overview instead of
@@ -19771,6 +20277,10 @@ function inputVisible(when, values) {
 }
 
 // src/renderers/shared/IndicatorInputsDialog.ts
+var PROPS_TAB = "Properties";
+function bagOf(row, decl) {
+  return decl.prop ? row.propValues : row.values;
+}
 var SOURCES = ["close", "open", "high", "low", "hl2", "hlc3", "ohlc4", "volume"];
 var IndicatorInputsDialog = class {
   constructor(host) {
@@ -19781,6 +20291,7 @@ var IndicatorInputsDialog = class {
     this.openId = null;
     this.row = null;
     this.snapshot = null;
+    this.propSnapshot = null;
     this.dialogTips = [];
     /** Re-applies every `when` gate against current values; set while the dialog is open. */
     this.refreshVisibility = null;
@@ -19803,10 +20314,11 @@ var IndicatorInputsDialog = class {
   }
   open(row) {
     this.close();
-    if (row.inputs.length === 0) return;
+    if (row.inputs.length === 0 && row.props.length === 0) return;
     this.row = row;
     this.openId = row.id;
     this.snapshot = { ...row.values };
+    this.propSnapshot = { ...row.propValues };
     ensureDialogStyles();
     const t = this.host.theme();
     const border = "var(--vela-border)";
@@ -19814,7 +20326,7 @@ var IndicatorInputsDialog = class {
     const host = this.host.dialogHost() ?? this.host.container;
     const ui = new Dialog({
       host,
-      title: row.settingsTitle,
+      title: row.title,
       // Non-modal: live-edit dialog — a modal machine locks pointer events on the
       // whole body, killing the chart and the body-portaled popovers.
       modal: false,
@@ -19846,6 +20358,16 @@ var IndicatorInputsDialog = class {
       text: () => "Close"
     }));
     const tabDefs = tabInputs(row.inputs);
+    if (row.props.length > 0) {
+      const propDecls = row.props.map((p) => {
+        const d = { ...p, prop: true };
+        delete d.tab;
+        return d;
+      });
+      const existing = tabDefs.find((t2) => t2.name === PROPS_TAB);
+      if (existing) existing.inputs.push(...propDecls);
+      else tabDefs.push({ name: PROPS_TAB, inputs: propDecls });
+    }
     const tabs = document.createElement("div");
     tabs.style.cssText = `display:flex;gap:12px;padding:0 20px;border-bottom:1px solid ${border};flex:0 0 auto;`;
     const tabEls = [];
@@ -19948,9 +20470,10 @@ var IndicatorInputsDialog = class {
     this.openId = null;
     this.row = null;
     this.snapshot = null;
+    this.propSnapshot = null;
     ui?.destroy();
   }
-  /** Restore every input to its open-time value (re-running the indicator), then close. */
+  /** Restore every input and prop to its open-time value (re-running the indicator), then close. */
   revertAndClose() {
     const row = this.row;
     const snap = this.snapshot;
@@ -19964,6 +20487,17 @@ var IndicatorInputsDialog = class {
         }
       }
     }
+    const propSnap = this.propSnapshot;
+    if (row && propSnap) {
+      for (const p of row.props) {
+        const snapped = propSnap[p.key];
+        const before = snapped !== void 0 ? snapped : p.defval;
+        if (row.propValues[p.key] !== before) {
+          row.propValues[p.key] = before;
+          this.host.onChange?.({ indicatorId: row.id, key: p.key, value: before, kind: "prop" });
+        }
+      }
+    }
     this.close();
   }
   /** The footer's reset button — same chip as Cancel, pinned to the LEFT edge
@@ -19981,19 +20515,27 @@ var IndicatorInputsDialog = class {
     const row = this.row;
     if (!row) return;
     const snap = this.snapshot;
+    const propSnap = this.propSnapshot;
     for (const inp of row.inputs) {
       if (row.values[inp.key] !== inp.defval) {
         row.values[inp.key] = inp.defval;
         this.host.onChange?.({ indicatorId: row.id, key: inp.key, value: inp.defval });
       }
     }
+    for (const p of row.props) {
+      if (row.propValues[p.key] !== p.defval) {
+        row.propValues[p.key] = p.defval;
+        this.host.onChange?.({ indicatorId: row.id, key: p.key, value: p.defval, kind: "prop" });
+      }
+    }
     this.open(row);
     if (snap) this.snapshot = snap;
+    if (propSnap) this.propSnapshot = propSnap;
   }
   /** Write one edit through: store it, notify the host, and re-apply the `when` gates. */
-  commit(row, key, value) {
-    row.values[key] = value;
-    this.host.onChange?.({ indicatorId: row.id, key, value });
+  commit(row, decl, value) {
+    bagOf(row, decl)[decl.key] = value;
+    this.host.onChange?.({ indicatorId: row.id, key: decl.key, value, ...decl.prop ? { kind: "prop" } : {} });
     this.refreshVisibility?.();
   }
   /** One settings row (or several `inline=` inputs) placed into a section's grid. */
@@ -20020,7 +20562,7 @@ var IndicatorInputsDialog = class {
     const id = idOf(lead);
     const info = lead.tooltip ? this.infoButton(lead.tooltip) : void 0;
     if (lead.type === "bool") {
-      const current = Boolean(row.values[lead.key] ?? lead.defval);
+      const current = Boolean(bagOf(row, lead)[lead.key] ?? lead.defval);
       return append(fieldRow({
         label: nameOf(lead),
         id,
@@ -20029,7 +20571,7 @@ var IndicatorInputsDialog = class {
         toggle: {
           id,
           checked: current,
-          onChange: (v) => this.commit(row, lead.key, v)
+          onChange: (v) => this.commit(row, lead, v)
         }
       }));
     }
@@ -20054,8 +20596,8 @@ var IndicatorInputsDialog = class {
   }
   /** Build the typed control for one input, committing edits live via `onChange`. */
   buildControl(row, inp, id) {
-    const current = row.values[inp.key] ?? inp.defval;
-    const emit = (value) => this.commit(row, inp.key, value);
+    const current = bagOf(row, inp)[inp.key] ?? inp.defval;
+    const emit = (value) => this.commit(row, inp, value);
     if (inp.type === "bool") {
       return buildFieldControl({ kind: "switch", id, checked: Boolean(current), onChange: (v) => emit(v) }).el;
     }
@@ -20066,7 +20608,7 @@ var IndicatorInputsDialog = class {
         kind: "color",
         id,
         theme: this.host.theme(),
-        get: () => String(row.values[inp.key] ?? inp.defval),
+        get: () => String(bagOf(row, inp)[inp.key] ?? inp.defval),
         onChange: (v) => emit(v)
       }).el;
     }
@@ -20629,6 +21171,7 @@ function timeParts(ts) {
 }
 
 // src/renderers/shared/InputsUI.ts
+var LEGEND_AT_TOP_ATTR = "data-vela-pane-at-top";
 var STATUS_KEYFRAMES = "@keyframes vela-ind-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}";
 var LEGEND_ICON_PX2 = 16;
 var LEGEND_CTL_PX = 18;
@@ -20646,6 +21189,9 @@ var CLOSE_SVG = iconAt("close", LEGEND_ICON_PX2);
 var FOLD_SVG = iconAt("chevron-up", LEGEND_ICON_PX2);
 var UNFOLD_SVG = iconAt("chevron-down", LEGEND_ICON_PX2);
 var OVERVIEW_SVG = iconAt("objects", LEGEND_ICON_PX2);
+function legendCalloutsDisplay(open2, hasCallouts) {
+  return !open2 && hasCallouts ? "inline-flex" : "none";
+}
 var InputsUI = class {
   constructor(container, theme, paneBoundsOf) {
     this.container = container;
@@ -20667,10 +21213,14 @@ var InputsUI = class {
     this.moveApi = null;
     /** Host-contributed legend actions, resolved PER ROW at render time (see setLegendActions). */
     this.legendActions = null;
+    /** Host-contributed callout bubbles, resolved PER ROW at render time (see setLegendCallouts). */
+    this.legendCallouts = null;
     /** Chrome-tooltip disposers, per row id — a tip open at removal must not outlive its row. */
     this.rowTips = /* @__PURE__ */ new Map();
     /** Same, for the contributed extras only (rebuilt independently by setLegendActions). */
     this.extrasTips = /* @__PURE__ */ new Map();
+    /** Same, for the contributed callouts only (rebuilt independently by setLegendCallouts). */
+    this.calloutTips = /* @__PURE__ */ new Map();
     /** Open "Move to" menu (kept so it can be torn down). */
     this.moveMenu = null;
     this.moveTargets = [];
@@ -20828,6 +21378,42 @@ var InputsUI = class {
       extrasEl.appendChild(btn2);
     }
   }
+  /**
+   * Wire the host-contributed callout bubbles. Same contract as
+   * {@link setLegendActions}: re-calling replaces the provider and re-projects the
+   * rows already on screen.
+   */
+  setLegendCallouts(provider) {
+    this.legendCallouts = provider;
+    for (const row of this.rows.values()) this.renderCallouts(row);
+  }
+  /** (Re)build one row's callout bubbles — tinted icon circles beside the title whose
+   *  click (when the view carries content) deploys a panel of text and actions. */
+  renderCallouts(row) {
+    this.disposeTips(this.calloutTips, row.id);
+    for (const bubble of row.callouts) bubble.destroy();
+    row.callouts = [];
+    row.calloutsEl.replaceChildren();
+    const views = this.legendCallouts?.(row.id) ?? [];
+    row.calloutsEl.style.display = legendCalloutsDisplay(row.highlighted, views.length > 0);
+    for (const view of views) {
+      const bubble = new CalloutBubble({
+        icon: view.icon,
+        background: view.background,
+        ...view.color !== void 0 ? { color: view.color } : {},
+        label: view.tooltip,
+        ...view.content !== void 0 ? { panel: view.content } : {},
+        // The panel portals into the plot host and self-tokens: it must work on
+        // a bare chart, where no `.vela-ui` token ancestor exists.
+        host: this.container,
+        theme: () => this.theme
+      });
+      bubble.el.dataset.legendCallout = view.id;
+      this.tip(this.calloutTips, row.id, bubble.el, view.tooltip);
+      row.callouts.push(bubble);
+      row.calloutsEl.appendChild(bubble.el);
+    }
+  }
   /** Reposition the per-pane legend containers after a layout change. */
   reposition() {
     for (const [paneId, lg] of this.legends) this.positionLegend(lg, paneId);
@@ -20995,6 +21581,7 @@ var InputsUI = class {
   }
   positionLegend(lg, paneId) {
     const bounds = this.paneBoundsOf ? this.paneBoundsOf(paneId) : { top: 0, height: Infinity };
+    lg.toggleAttribute(LEGEND_AT_TOP_ATTR, bounds.top === 0);
     lg.style.display = bounds.height < 4 || !this.titlesVisible ? "none" : "flex";
     const collapsed = this.paneCollapse.has(paneId);
     const masterId = this.paneCollapse.get(paneId) ?? null;
@@ -21070,13 +21657,13 @@ var InputsUI = class {
   }
   /** Create or update an indicator's legend row (in the legend for its pane). */
   upsert(id, title, inputs, values, paneId = "price", opts = {}) {
-    const settingsTitle = opts.settingsTitle ?? title;
     const existing = this.rows.get(id);
     if (existing) {
       existing.title = title;
-      existing.settingsTitle = settingsTitle;
       existing.inputs = inputs;
       existing.values = { ...values };
+      existing.props = opts.props ?? [];
+      existing.propValues = { ...opts.propValues ?? {} };
       existing.titleEl.textContent = title;
       if (existing.paneId !== paneId) {
         existing.paneId = paneId;
@@ -21128,6 +21715,9 @@ var InputsUI = class {
       titleWrap.appendChild(beta);
     }
     el.appendChild(titleWrap);
+    const calloutsEl = document.createElement("span");
+    calloutsEl.style.cssText = `display:none;align-items:center;gap:4px;flex:none;margin-left:${LEGEND_TITLE_STATUS_GAP_PX}px;`;
+    el.appendChild(calloutsEl);
     el.appendChild(statusEl);
     const valuesEl = document.createElement("span");
     valuesEl.style.cssText = `display:none;align-items:center;gap:5px;margin-left:${LEGEND_TITLE_VALUES_GAP_PX}px;white-space:nowrap;font-variant-numeric:tabular-nums;`;
@@ -21144,13 +21734,13 @@ var InputsUI = class {
       eye.className = "vela-ind-ctl";
       eye.style.cssText = LEGEND_CTL_CSS;
       eye.addEventListener("click", () => {
-        const row = this.rows.get(id);
-        this.onToggleVisible?.(id, Boolean(row?.hidden));
+        const row2 = this.rows.get(id);
+        this.onToggleVisible?.(id, Boolean(row2?.hidden));
       });
       controlsEl.appendChild(eye);
       eyeEl = eye;
     }
-    if (inputs.length > 0) {
+    if (inputs.length > 0 || (opts.props ?? []).length > 0) {
       const gear = document.createElement("button");
       gear.type = "button";
       gear.setAttribute("aria-label", "Settings");
@@ -21190,7 +21780,9 @@ var InputsUI = class {
     controlsEl.appendChild(close);
     el.appendChild(controlsEl);
     this.attach(this.legendFor(paneId), el, !!opts.native);
-    this.rows.set(id, { id, title, settingsTitle, inputs, values: { ...values }, el, titleEl, statusEl, valuesEl, plotValues: [], plotValuesKey: "", showValues: null, highlighted: false, paneId, hidden: false, eyeEl, controlsEl, extrasEl, native: !!opts.native });
+    const row = { id, title, inputs, values: { ...values }, props: opts.props ?? [], propValues: { ...opts.propValues ?? {} }, el, titleEl, statusEl, valuesEl, plotValues: [], plotValuesKey: "", showValues: null, highlighted: false, paneId, hidden: false, eyeEl, controlsEl, extrasEl, calloutsEl, callouts: [], native: !!opts.native };
+    this.rows.set(id, row);
+    this.renderCallouts(row);
     this.syncFoldToggle();
   }
   /** Place a row in its pane's legend — native rows PREPEND (pinned to the top), Pine rows append. */
@@ -21199,9 +21791,11 @@ var InputsUI = class {
     else container.appendChild(el);
   }
   /** Reflect programmatic input changes (so a re-opened dialog shows current values). */
-  setValues(id, values) {
+  setValues(id, values, props) {
     const row = this.rows.get(id);
-    if (row) row.values = { ...row.values, ...values };
+    if (!row) return;
+    row.values = { ...row.values, ...values };
+    if (props) row.propValues = { ...row.propValues, ...props };
   }
   /**
    * Reflect an indicator's live status in its legend row: `'loading'` shows three pulsing
@@ -21283,8 +21877,13 @@ var InputsUI = class {
   syncRowActions(row) {
     const open2 = row.highlighted;
     row.controlsEl.style.display = open2 || row.hidden ? "inline-flex" : "none";
-    if (open2) row.el.appendChild(row.statusEl);
-    else row.el.insertBefore(row.statusEl, row.valuesEl);
+    if (open2) {
+      row.el.appendChild(row.statusEl);
+      for (const bubble of row.callouts) bubble.hidePanel();
+    } else {
+      row.el.insertBefore(row.statusEl, row.valuesEl);
+    }
+    row.calloutsEl.style.display = legendCalloutsDisplay(open2, row.callouts.length > 0);
     for (const child of Array.from(row.controlsEl.children)) {
       if (!(child instanceof HTMLElement) || child === row.eyeEl) continue;
       if (child === row.extrasEl) {
@@ -21302,10 +21901,12 @@ var InputsUI = class {
   }
   remove(id) {
     const row = this.rows.get(id);
+    for (const bubble of row?.callouts ?? []) bubble.destroy();
     row?.el.remove();
     this.rows.delete(id);
     this.disposeTips(this.rowTips, id);
     this.disposeTips(this.extrasTips, id);
+    this.disposeTips(this.calloutTips, id);
     if (this.selectedId === id) this.selectedId = null;
     if (this.inputsDialog.openId === id) this.inputsDialog.close();
     this.syncFoldToggle();
@@ -21325,6 +21926,8 @@ var InputsUI = class {
     this.rowMenu = null;
     for (const id of [...this.rowTips.keys()]) this.disposeTips(this.rowTips, id);
     for (const id of [...this.extrasTips.keys()]) this.disposeTips(this.extrasTips, id);
+    for (const id of [...this.calloutTips.keys()]) this.disposeTips(this.calloutTips, id);
+    for (const row of this.rows.values()) for (const bubble of row.callouts) bubble.destroy();
     for (const lg of this.legends.values()) lg.remove();
     this.legends.clear();
     this.rows.clear();
@@ -21370,7 +21973,7 @@ var ICONS = {
 };
 var STYLE_ID21 = "vela-pane-controls";
 var ICON_PX = 12;
-var CLUSTER_PILL = "rgba(0,0,0,0.28)";
+var CLUSTER_PILL = "rgba(0,0,0,0.65)";
 function ensureStyles3() {
   if (typeof document === "undefined" || document.getElementById(STYLE_ID21)) return;
   const st = document.createElement("style");
@@ -21390,8 +21993,12 @@ var PaneControls = class {
     this.deps = deps;
     this.clusters = /* @__PURE__ */ new Map();
     this.hoverPaneId = null;
+    /** Mobile: hover clusters are meaningless without a cursor — suppressed; a
+     *  collapsed pane's standalone expand chip stays (the only way back up). */
+    this.suspended = false;
     /** Reveal the cluster for the pane under the cursor, resolved from the pointer's y in the plot. */
     this.onPlotMove = (e) => {
+      if (this.suspended) return;
       const rect = this.plot.getBoundingClientRect();
       const y = e.clientY - rect.top;
       let hit = null;
@@ -21463,7 +22070,12 @@ var PaneControls = class {
     }
     if (p.count > 1) {
       cluster.appendChild(
-        this.button(p.maximized ? ICONS.restore : ICONS.maximize, p.maximized ? "Restore pane" : "Maximize pane", false, () => this.deps.onToggleMaximize(p.id), { role: "maximize" })
+        this.button(p.maximized ? ICONS.restore : ICONS.maximize, p.maximized ? "Restore pane" : "Maximize pane", false, () => this.deps.onToggleMaximize(p.id), {
+          role: "maximize",
+          // Same inverse-chip treatment as the collapsed pane's expand toggle: the
+          // maximized state must read as an active state, not just a swapped glyph.
+          selected: p.maximized
+        })
       );
     }
   }
@@ -21500,17 +22112,18 @@ var PaneControls = class {
       }
       const hovered = id === this.hoverPaneId;
       const hasButtons = cluster.children.length > 0;
-      const visible = hasButtons && (hovered || p.collapsed) && p.height > 8;
+      const stateChipRole = p.collapsed ? "collapse" : !this.suspended && p.maximized ? "maximize" : null;
+      const visible = hasButtons && (hovered || stateChipRole != null) && p.height > 8;
       cluster.style.right = `${rightPx}px`;
       cluster.style.top = p.collapsed ? `${p.top + Math.max(1, Math.round((p.height - 24) / 2))}px` : `${p.top + 4}px`;
       cluster.style.display = visible ? "flex" : "none";
       if (!visible) continue;
-      const soloExpand = p.collapsed && !hovered;
-      cluster.style.background = soloExpand ? "transparent" : CLUSTER_PILL;
+      const soloChip = stateChipRole != null && !hovered;
+      cluster.style.background = soloChip ? "transparent" : CLUSTER_PILL;
       for (const child of cluster.children) {
         const btn2 = child;
         btn2.style.display = "inline-flex";
-        btn2.style.visibility = soloExpand && btn2.dataset.role !== "collapse" ? "hidden" : "visible";
+        btn2.style.visibility = soloChip && btn2.dataset.role !== stateChipRole ? "hidden" : "visible";
       }
     }
   }
@@ -21520,6 +22133,14 @@ var PaneControls = class {
     this.hoverPaneId = paneId;
     this.reposition();
   }
+  /** Mobile suppression: no hover clusters (touch has no cursor; the shell's own
+   *  chrome covers maximize), while collapsed panes keep their expand chips. */
+  setSuspended(on) {
+    if (on === this.suspended) return;
+    this.suspended = on;
+    if (on) this.hoverPaneId = null;
+    this.reposition();
+  }
   destroy() {
     this.plot.removeEventListener("pointermove", this.onPlotMove);
     this.plot.removeEventListener("pointerleave", this.onPlotLeave);
@@ -21670,131 +22291,6 @@ var AxisScaleButtons = class {
   }
 };
 
-// src/renderers/shared/TableOverlay.ts
-var SIZE_PX3 = {
-  auto: 13,
-  tiny: 10,
-  small: 11,
-  normal: 13,
-  large: 16,
-  huge: 20
-};
-var TableOverlay = class {
-  constructor(container, theme, paneBounds) {
-    this.container = container;
-    this.theme = theme;
-    this.paneBounds = paneBounds;
-    this.lastTables = [];
-    if (getComputedStyle(container).position === "static") container.style.position = "relative";
-    this.root = document.createElement("div");
-    Object.assign(this.root.style, {
-      position: "absolute",
-      inset: "0",
-      pointerEvents: "none",
-      overflow: "hidden",
-      zIndex: "3"
-    });
-    container.appendChild(this.root);
-  }
-  update(tables) {
-    this.lastTables = tables;
-    this.root.replaceChildren();
-    for (const t of tables) this.root.appendChild(this.renderTable(t));
-  }
-  /** Re-render at the current pane geometry — after layout settles or on resize. */
-  reposition() {
-    if (this.root.isConnected) this.update(this.lastTables);
-  }
-  /** Show/hide the whole overlay. Tables anchor to pane corners, not to bars, so unlike the
-   *  series content they DON'T vanish with an emptied chart — the loading state hides them. */
-  setVisible(visible) {
-    this.root.style.display = visible ? "" : "none";
-  }
-  destroy() {
-    this.root.remove();
-  }
-  renderTable(t) {
-    const wrap = document.createElement("div");
-    wrap.style.position = "absolute";
-    this.anchor(wrap, t.position, this.paneBounds(t.paneId));
-    const table = document.createElement("table");
-    Object.assign(table.style, {
-      borderCollapse: "collapse",
-      background: t.bgColor ?? "transparent",
-      fontFamily: this.theme.fontFamily || "sans-serif",
-      // Frame as an inset shadow (not a `border`) so it stays independent of the
-      // collapsed cell borders even when frame_width != border_width.
-      boxShadow: t.frameColor && t.frameWidth > 0 ? `inset 0 0 0 ${t.frameWidth}px ${t.frameColor}` : "none",
-      border: "none",
-      tableLayout: "auto",
-      // Re-enable pointer events on the table only (root is none) so cell tooltips work.
-      pointerEvents: "auto"
-    });
-    const span = /* @__PURE__ */ new Map();
-    const skip = /* @__PURE__ */ new Set();
-    for (const m of t.merges) {
-      span.set(`${m.startRow}:${m.startCol}`, { cs: m.endCol - m.startCol + 1, rs: m.endRow - m.startRow + 1 });
-      for (let r = m.startRow; r <= m.endRow; r += 1) {
-        for (let c = m.startCol; c <= m.endCol; c += 1) {
-          if (r !== m.startRow || c !== m.startCol) skip.add(`${r}:${c}`);
-        }
-      }
-    }
-    const cellBorder = t.borderColor && t.borderWidth > 0 ? `${t.borderWidth}px solid ${t.borderColor}` : "none";
-    for (let r = 0; r < t.rows; r += 1) {
-      const tr = document.createElement("tr");
-      for (let c = 0; c < t.columns; c += 1) {
-        const cell = t.cells[r]?.[c] ?? null;
-        if (skip.has(`${r}:${c}`) || cell?.merged) continue;
-        const td = document.createElement("td");
-        const sp = span.get(`${r}:${c}`);
-        if (sp) {
-          if (sp.cs > 1) td.colSpan = sp.cs;
-          if (sp.rs > 1) td.rowSpan = sp.rs;
-        }
-        Object.assign(td.style, {
-          border: cellBorder,
-          padding: "2px 6px",
-          background: cell?.bgColor ?? "transparent",
-          color: cell?.textColor ?? this.theme.textColor,
-          textAlign: cell?.hAlign ?? "center",
-          verticalAlign: cell?.vAlign === "top" ? "top" : cell?.vAlign === "bottom" ? "bottom" : "middle",
-          fontSize: `${SIZE_PX3[cell?.textSize ?? "normal"]}px`,
-          fontFamily: cell?.fontFamily === "monospace" ? "monospace" : "inherit",
-          fontWeight: cell?.bold ? "bold" : "normal",
-          fontStyle: cell?.italic ? "italic" : "normal",
-          whiteSpace: "pre-line"
-        });
-        if (cell?.tooltip) td.title = cell.tooltip;
-        td.textContent = cell?.text ?? "";
-        tr.appendChild(td);
-      }
-      table.appendChild(tr);
-    }
-    wrap.appendChild(table);
-    return wrap;
-  }
-  /**
-   * Position the wrapper at a Pine `position.*` corner/edge of the table's PANE
-   * (not the whole chart), inset past the right price axis so it never overlaps
-   * the Y-axis labels.
-   */
-  anchor(el, position, b) {
-    const m = 6;
-    const containerH = this.root.clientHeight || this.container.clientHeight;
-    const paneBottom = b.top + b.height;
-    if (position.startsWith("top")) el.style.top = `${b.top + m}px`;
-    else if (position.startsWith("bottom")) el.style.bottom = `${Math.max(0, containerH - paneBottom) + m}px`;
-    else el.style.top = `${b.top + b.height / 2}px`;
-    if (position.endsWith("left")) el.style.left = `${m}px`;
-    else if (position.endsWith("right")) el.style.right = `${b.rightAxis + m}px`;
-    else el.style.left = `calc(50% - ${b.rightAxis / 2}px)`;
-    const tx = position.endsWith("center") ? "-50%" : "0";
-    const ty = position.startsWith("middle") ? "-50%" : "0";
-    if (tx !== "0" || ty !== "0") el.style.transform = `translate(${tx}, ${ty})`;
-  }
-};
-
 // src/renderers/native/capabilities.ts
 var NATIVE_CAPABILITIES = {
   panes: true,
@@ -21815,7 +22311,7 @@ var NATIVE_CAPABILITIES = {
   drawingDepth: true,
   // drawings share the series' z space (backend-composited interleave layers)
   tables: true,
-  // reuses the DOM TableOverlay
+  // canvas-painted into the owning indicator's interleave slice
   trades: true,
   // strategy order-fill markers (arrows + labels + fill-price ticks)
   inputsUI: true
@@ -21846,6 +22342,9 @@ function candleTier(spacing) {
   if (spacing < CANDLE_BODY_MIN_SPACING) return "wick";
   return "full";
 }
+function snapY(yCss, dpr) {
+  return Math.round(yCss * dpr) / dpr;
+}
 function candleGeometry(xCss, spacing, dpr, bodyScale = 1) {
   const wickDev = Math.max(1, Math.round(wickWidth(spacing) * dpr));
   const wickLeftDev = Math.round(xCss * dpr - wickDev / 2);
@@ -22368,8 +22867,12 @@ var WebGL2Backend = class {
           return sc === pane.scale ? pane : { ...pane, scale: sc };
         };
         b.alpha = this.modelAlpha;
-        for (const m of models) for (const bgSpan of m.backgrounds) this.emitBackground(b, bgSpan, pane, coords);
-        for (const m of models) for (const f of m.fills) this.emitFill(b, m, f, effPane(m), coords, i0, i1, scene.offsetOf(m.id));
+        for (const m of models) for (const bgSpan of m.backgrounds) if (bgSpan.overlay !== true) this.emitBackground(b, bgSpan, pane, coords);
+        if (isPrice) {
+          for (const m of scene.indicators.values()) {
+            for (const bgSpan of m.backgrounds) if (bgSpan.overlay === true) this.emitBackground(b, bgSpan, pane, coords);
+          }
+        }
         const drawCandles = isPrice && !scene.candlesHidden;
         let candleDrawn = false;
         for (const m of models) {
@@ -22383,15 +22886,26 @@ var WebGL2Backend = class {
           b.alpha = this.modelAlpha;
           const off = scene.offsetOf(m.id);
           const mp = effPane(m);
-          for (const s of m.series) this.emitSeries(b, s, mp, coords, i0, i1, theme, off);
+          for (const f of m.fills) if (f.overlay !== true) this.emitFill(b, m, f, mp, coords, i0, i1, off);
+          for (const s of m.series) if (s.overlay !== true) this.emitSeries(b, s, mp, coords, i0, i1, theme, off);
         }
         if (drawCandles && !candleDrawn) {
           drawSlicesUpTo(scene.candleZ);
           b.alpha = this.candleStructureAlpha;
           this.emitPriceSeries(b, scene, i0, i1, coords, pane, theme, barColorMap, dataW);
         }
-        drawSlicesUpTo(Infinity);
         b.alpha = this.modelAlpha;
+        if (isPrice) {
+          for (const m of scene.indicators.values()) {
+            const off = scene.offsetOf(m.id);
+            for (const f of m.fills) if (f.overlay === true) this.emitFill(b, m, f, pane, coords, i0, i1, off);
+          }
+          for (const m of scene.indicators.values()) {
+            const off = scene.offsetOf(m.id);
+            for (const s of m.series) if (s.overlay === true) this.emitSeries(b, s, pane, coords, i0, i1, theme, off);
+          }
+        }
+        drawSlicesUpTo(Infinity);
         for (const m of models) {
           const mp = effPane(m);
           for (const pl of m.priceLines) this.emitHline(b, pl, mp, coords, dataW, theme);
@@ -22438,7 +22952,7 @@ var WebGL2Backend = class {
     for (const pane of scene.orderedPanes()) {
       const b = this.glowBatch;
       b.reset();
-      this.emitGlowSources(b, scene.indicatorsForPane(pane.id), pane, coords, i0, i1, (id) => scene.offsetOf(id));
+      this.emitGlowSources(b, scene, pane, coords, i0, i1);
       if (b.vertexCount === 0) continue;
       const topH = Math.round(pane.bounds.top * dpr * 0.5);
       const botH = Math.round((pane.bounds.top + pane.bounds.height) * dpr * 0.5);
@@ -22507,15 +23021,23 @@ var WebGL2Backend = class {
     gl.bindVertexArray(null);
     return true;
   }
-  /** The "neon" elements that glow: line/area/step lines + point markers (not candles/fills/bars). */
-  emitGlowSources(b, models, pane, coords, i0, i1, offsetOf = () => 0) {
-    for (const m of models) {
-      const off = offsetOf(m.id);
-      for (const s of m.series) {
-        if (!isLineLikeSeries(s) || s.visible === false) continue;
-        if (s.kind === "histogram" || s.kind === "columns") continue;
-        if (s.kind === "circles" || s.kind === "cross") this.emitPointMarkers(b, s, pane, coords, i0, i1, off);
-        else this.emitPolyline(b, s, pane, coords, i0, i1, s.kind === "step", off);
+  /** The "neon" elements that glow: line/area/step lines + point markers (not candles/fills/bars).
+   *  Routing mirrors the main pass: own series per pane, force_overlay series on the price pane. */
+  emitGlowSources(b, scene, pane, coords, i0, i1) {
+    const emitOne = (s, off) => {
+      if (!isLineLikeSeries(s) || s.visible === false) return;
+      if (s.kind === "histogram" || s.kind === "columns") return;
+      if (s.kind === "circles" || s.kind === "cross") this.emitPointMarkers(b, s, pane, coords, i0, i1, off);
+      else this.emitPolyline(b, s, pane, coords, i0, i1, s.kind === "step", off);
+    };
+    for (const m of scene.indicatorsForPane(pane.id)) {
+      const off = scene.offsetOf(m.id);
+      for (const s of m.series) if (s.overlay !== true) emitOne(s, off);
+    }
+    if (pane.kind === "price") {
+      for (const m of scene.indicators.values()) {
+        const off = scene.offsetOf(m.id);
+        for (const s of m.series) if (s.overlay === true) emitOne(s, off);
       }
     }
   }
@@ -22778,12 +23300,12 @@ var WebGL2Backend = class {
       if (drawBody) {
         const oY = coords.priceToY(bar.open, pane.scale, pane.bounds);
         const cY = coords.priceToY(bar.close, pane.scale, pane.bounds);
-        bodyTop = Math.min(oY, cY);
-        bodyH = Math.max(1, Math.abs(cY - oY));
+        bodyTop = snapY(Math.min(oY, cY), coords.dpr);
+        bodyH = Math.max(1 / coords.dpr, snapY(Math.max(oY, cY), coords.dpr) - bodyTop);
       }
       if (cs.wickVisible) {
-        const hY = coords.priceToY(bar.high, pane.scale, pane.bounds);
-        const lY = coords.priceToY(bar.low, pane.scale, pane.bounds);
+        const hY = snapY(coords.priceToY(bar.high, pane.scale, pane.bounds), coords.dpr);
+        const lY = snapY(coords.priceToY(bar.low, pane.scale, pane.bounds), coords.dpr);
         b.alpha = this.candleStructureAlpha;
         const wCol = parseColor((isUp ? cs.wickUpColor : cs.wickDownColor) ?? (drawBody ? dir : bodyColorStr));
         if (drawBody) {
@@ -22798,9 +23320,9 @@ var WebGL2Backend = class {
           b.alpha = this.candleBodyAlpha;
           b.rect(g.bodyX, bodyTop, g.bodyW, bodyH, c);
         }
-        if (cs.borderVisible || bc || fading && cs.bodyVisible) {
+        if (cs.borderVisible || fading && cs.bodyVisible) {
           b.alpha = this.candleStructureAlpha;
-          const bord = cs.borderVisible || bc ? parseColor((isUp ? cs.borderUpColor : cs.borderDownColor) ?? dir) : c;
+          const bord = cs.borderVisible ? parseColor((isUp ? cs.borderUpColor : cs.borderDownColor) ?? bodyColorStr) : c;
           const bw = Math.max(0, g.bodyW - 1);
           const bh = Math.max(0, bodyH - 1);
           b.rectStroke(g.bodyX + 0.5, bodyTop + 0.5, bw, bh, 1, bord);
@@ -24116,9 +24638,10 @@ var SceneGraph = class {
      *  so each indicator arrives behind the candles (and behind older indicators);
      *  `setIndicatorZ`/`bringToFront`/`sendToBack` change it. */
     this.seriesZ = /* @__PURE__ */ new Map();
-    /** Per-pane raster layers of user drawings interleaved into the series stack — each is a
+    /** Per-pane raster layers of drawings interleaved into the series stack (each
+     *  indicator's Pine drawings at its model's z, plus in-stack user drawings) — each a
      *  prepainted canvas the backend composites just before the series carrying `beforeZ`.
-     *  Rebuilt by the renderer per data frame; empty when every drawing sits over the stack. */
+     *  Rebuilt by the renderer per data frame. */
     this.drawingSlices = /* @__PURE__ */ new Map();
     /** Per-model index offset: the chart bar index of the model's `anchorTime` — its
      *  index-aligned payloads (dense series arrays, `bar_index` drawings) count from that
@@ -24352,8 +24875,12 @@ var Canvas2dBackend = class {
         return sc === pane.scale ? pane : { ...pane, scale: sc };
       };
       ctx.globalAlpha = this.modelAlpha;
-      for (const m of models) for (const bg of m.backgrounds) this.drawBackground(ctx, bg, pane, coords);
-      for (const m of models) for (const f of m.fills) this.drawFill(ctx, m, f, effPane(m), coords, i0, i1, scene.offsetOf(m.id));
+      for (const m of models) for (const bg of m.backgrounds) if (bg.overlay !== true) this.drawBackground(ctx, bg, pane, coords);
+      if (isPrice) {
+        for (const m of scene.indicators.values()) {
+          for (const bg of m.backgrounds) if (bg.overlay === true) this.drawBackground(ctx, bg, pane, coords);
+        }
+      }
       const slices = scene.drawingSlices.get(pane.id) ?? [];
       let si = 0;
       const drawSlicesUpTo = (z) => {
@@ -24375,13 +24902,25 @@ var Canvas2dBackend = class {
         ctx.globalAlpha = this.modelAlpha;
         const off = scene.offsetOf(m.id);
         const mp = effPane(m);
-        for (const s of m.series) this.drawSeries(ctx, s, mp, coords, i0, i1, theme, off);
+        for (const f of m.fills) if (f.overlay !== true) this.drawFill(ctx, m, f, mp, coords, i0, i1, off);
+        for (const s of m.series) if (s.overlay !== true) this.drawSeries(ctx, s, mp, coords, i0, i1, theme, off);
       }
       if (drawCandles && !candleDrawn) {
         drawSlicesUpTo(scene.candleZ);
         ctx.globalAlpha = this.candleStructureAlpha;
         this.drawPriceSeries(ctx, scene, i0, i1, coords, pane, theme, barColorMap, dataW);
       }
+      if (isPrice) {
+        ctx.globalAlpha = this.modelAlpha;
+        for (const m of scene.indicators.values()) {
+          const off = scene.offsetOf(m.id);
+          for (const f of m.fills) if (f.overlay === true) this.drawFill(ctx, m, f, pane, coords, i0, i1, off);
+        }
+        for (const m of scene.indicators.values()) {
+          const off = scene.offsetOf(m.id);
+          for (const s of m.series) if (s.overlay === true) this.drawSeries(ctx, s, pane, coords, i0, i1, theme, off);
+        }
+      }
       drawSlicesUpTo(Infinity);
       ctx.globalAlpha = this.modelAlpha;
       for (const m of models) {
@@ -24626,13 +25165,13 @@ var Canvas2dBackend = class {
       if (drawBody) {
         const oY = coords.priceToY(b.open, pane.scale, pane.bounds);
         const cY = coords.priceToY(b.close, pane.scale, pane.bounds);
-        top = Math.min(oY, cY);
-        bodyH = Math.max(1, Math.abs(cY - oY));
+        top = snapY(Math.min(oY, cY), coords.dpr);
+        bodyH = Math.max(1 / coords.dpr, snapY(Math.max(oY, cY), coords.dpr) - top);
       }
       if (cs.wickVisible) {
         const wick = (up ? cs.wickUpColor : cs.wickDownColor) ?? (drawBody ? dir : color);
-        const hY = coords.priceToY(b.high, pane.scale, pane.bounds);
-        const lY = coords.priceToY(b.low, pane.scale, pane.bounds);
+        const hY = snapY(coords.priceToY(b.high, pane.scale, pane.bounds), coords.dpr);
+        const lY = snapY(coords.priceToY(b.low, pane.scale, pane.bounds), coords.dpr);
         ctx.globalAlpha = this.candleStructureAlpha;
         ctx.strokeStyle = wick;
         ctx.lineWidth = g.wickW;
@@ -24654,9 +25193,9 @@ var Canvas2dBackend = class {
           ctx.fillStyle = color;
           ctx.fillRect(g.bodyX, top, g.bodyW, bodyH);
         }
-        if (cs.borderVisible || bc || fading && cs.bodyVisible) {
+        if (cs.borderVisible || fading && cs.bodyVisible) {
           ctx.globalAlpha = this.candleStructureAlpha;
-          ctx.strokeStyle = cs.borderVisible || bc ? (up ? cs.borderUpColor : cs.borderDownColor) ?? dir : color;
+          ctx.strokeStyle = cs.borderVisible ? (up ? cs.borderUpColor : cs.borderDownColor) ?? color : color;
           ctx.lineWidth = 1;
           const bw = Math.max(0, g.bodyW - 1);
           const bh = Math.max(0, bodyH - 1);
@@ -25079,6 +25618,19 @@ function autoFontSize(lines, boxW, boxH, bold) {
 
 // src/renderers/shared/DrawingSceneRenderer.ts
 var EMPTY_DRAWING_SET = { lines: [], boxes: [], labels: [], polylines: [], linefills: [] };
+function modelDrawingSet(m, overlay) {
+  const want = (d) => Boolean(d.overlay) === overlay;
+  return {
+    lines: (m.lines ?? []).filter(want),
+    boxes: (m.boxes ?? []).filter(want),
+    labels: (m.labels ?? []).filter(want),
+    polylines: (m.polylines ?? []).filter(want),
+    linefills: (m.linefills ?? []).filter(want)
+  };
+}
+function drawingSetEmpty(s) {
+  return !s.lines.length && !s.boxes.length && !s.labels.length && !s.polylines.length && !s.linefills.length;
+}
 function fontSizePx(size) {
   return size === "auto" ? 12 : namedFontSize(size);
 }
@@ -25088,6 +25640,8 @@ var DrawingSceneRenderer = class {
     this.set = set;
     /** measureText width cache, keyed by `${font} ${text}`, persists across frames. */
     this.widthCache = /* @__PURE__ */ new Map();
+    /** Tooltip hit-rects captured while drawing the CURRENT set (rebuilt per render). */
+    this.tipRegions = [];
     /**
      * Index offset of the CURRENT set's model: its `xloc:'bar_index'` coordinates count
      * from the model's anchor bar, so they shift by this to land on chart logical indices.
@@ -25108,8 +25662,13 @@ var DrawingSceneRenderer = class {
     const s = this.set;
     return !s.lines.length && !s.boxes.length && !s.labels.length && !s.polylines.length && !s.linefills.length;
   }
+  /** Tooltip hit-rects of the labels drawn by the LAST `render` call (same coords as `ctx`). */
+  labelTipRegions() {
+    return this.tipRegions;
+  }
   /** Draw the whole set into `ctx` using the supplied coordinate closures. */
   render(ctx, W, H, xOf, yOf) {
+    this.tipRegions = [];
     if (this.isEmpty()) return;
     ctx.save();
     this.drawLinefills(ctx, W, H, xOf, yOf);
@@ -25457,13 +26016,35 @@ var DrawingSceneRenderer = class {
       if (this.isPointShape(lb.style)) {
         if (!lb.noFill) this.drawLabelShape(ctx, lb.style, px, py, fontPx, color);
         if (lb.text) this.drawLabelText(ctx, lb, px, py + fontPx, fontPx);
-      } else if (lb.style === "none" || lb.style === "text_outline" || lb.noFill) {
-        if (lb.text) this.drawLabelText(ctx, lb, px, py, fontPx, lb.style === "text_outline");
+        if (lb.tooltip) {
+          const r = Math.max(4, fontPx * 0.6) + 3;
+          this.tipRegions.push({ left: px - r, top: py - r, right: px + r, bottom: py + r, text: lb.tooltip });
+        }
+      } else if (lb.style === "none" || lb.style === "text_outline") {
+        if (lb.text) {
+          this.drawLabelText(ctx, lb, px, py, fontPx, lb.style === "text_outline");
+          if (lb.tooltip) this.tipRegions.push(this.textRegion(ctx, lb, px, py, fontPx, lb.tooltip));
+        }
       } else {
-        this.drawBubble(ctx, lb, px, py, fontPx, color);
+        const r = this.drawBubble(ctx, lb, px, py, fontPx, color);
+        if (lb.tooltip) this.tipRegions.push({ left: r.x, top: r.y, right: r.x + r.w, bottom: r.y + r.h, text: lb.tooltip });
       }
     }
   }
+  /** Canvas font for a label's text — family + Pine `text_formatting` (bold/italic). */
+  labelFont(lb, fontPx) {
+    const family = lb.fontFamily === "monospace" ? "monospace" : this.deps.theme.fontFamily || "sans-serif";
+    return `${lb.italic ? "italic " : ""}${lb.bold ? "bold " : ""}${fontPx}px ${family}`;
+  }
+  /** Hover rect of a text-only label (style none/text_outline/noFill), centered like drawLabelText. */
+  textRegion(ctx, lb, cx, cy, fontPx, text) {
+    const font = this.labelFont(lb, fontPx);
+    const lines = (lb.text ?? "").split("\n");
+    const w = Math.max(1, ...lines.map((l) => this.measure(ctx, font, l)));
+    const h = fontPx * 1.25 * lines.length;
+    const left = lb.textAlign === "left" ? cx : lb.textAlign === "right" ? cx - w : cx - w / 2;
+    return { left, top: cy - h / 2, right: left + w, bottom: cy + h / 2, text };
+  }
   isPointShape(style) {
     switch (style) {
       case "circle":
@@ -25482,8 +26063,7 @@ var DrawingSceneRenderer = class {
     }
   }
   drawLabelText(ctx, lb, cx, cy, fontPx, outline = false) {
-    const family = lb.fontFamily === "monospace" ? "monospace" : this.deps.theme.fontFamily || "sans-serif";
-    ctx.font = `${fontPx}px ${family}`;
+    ctx.font = this.labelFont(lb, fontPx);
     ctx.textAlign = lb.textAlign === "left" ? "left" : lb.textAlign === "right" ? "right" : "center";
     ctx.textBaseline = "middle";
     const lines = lb.text.split("\n");
@@ -25563,9 +26143,9 @@ var DrawingSceneRenderer = class {
         ctx.fill();
     }
   }
+  /** Draw a bubble label; returns the bubble body rect (for tooltip hit-testing). */
   drawBubble(ctx, lb, px, py, fontPx, color) {
-    const family = lb.fontFamily === "monospace" ? "monospace" : this.deps.theme.fontFamily || "sans-serif";
-    ctx.font = `${fontPx}px ${family}`;
+    ctx.font = this.labelFont(lb, fontPx);
     const lines = (lb.text ?? "").split("\n");
     const padX = 6;
     const padY = 4;
@@ -25623,38 +26203,51 @@ var DrawingSceneRenderer = class {
         by = py - h - ptr;
         pointer = "down";
     }
-    ctx.fillStyle = color;
-    this.roundRect(ctx, bx, by, w, h, 4);
-    ctx.fill();
-    if (pointer !== "none") {
-      ctx.beginPath();
-      if (pointer === "down") {
-        ctx.moveTo(px - ptr, by + h);
-        ctx.lineTo(px + ptr, by + h);
-        ctx.lineTo(px, py);
-      } else if (pointer === "up") {
-        ctx.moveTo(px - ptr, by);
-        ctx.lineTo(px + ptr, by);
-        ctx.lineTo(px, py);
-      } else if (pointer === "left") {
-        ctx.moveTo(bx, py - ptr);
-        ctx.lineTo(bx, py + ptr);
-        ctx.lineTo(px, py);
-      } else {
-        ctx.moveTo(bx + w, py - ptr);
-        ctx.lineTo(bx + w, py + ptr);
-        ctx.lineTo(px, py);
-      }
-      ctx.closePath();
+    if (!lb.noFill) {
+      ctx.fillStyle = color;
+      this.roundRect(ctx, bx, by, w, h, 4);
       ctx.fill();
+      if (pointer !== "none") {
+        ctx.beginPath();
+        if (pointer === "down") {
+          ctx.moveTo(px - ptr, by + h);
+          ctx.lineTo(px + ptr, by + h);
+          ctx.lineTo(px, py);
+        } else if (pointer === "up") {
+          ctx.moveTo(px - ptr, by);
+          ctx.lineTo(px + ptr, by);
+          ctx.lineTo(px, py);
+        } else if (pointer === "left") {
+          ctx.moveTo(bx, py - ptr);
+          ctx.lineTo(bx, py + ptr);
+          ctx.lineTo(px, py);
+        } else {
+          ctx.moveTo(bx + w, py - ptr);
+          ctx.lineTo(bx + w, py + ptr);
+          ctx.lineTo(px, py);
+        }
+        ctx.closePath();
+        ctx.fill();
+      }
     }
     if (lb.text) {
-      ctx.fillStyle = lb.textColor ?? contrastColor(color);
-      ctx.textAlign = "center";
+      ctx.fillStyle = lb.textColor ?? (lb.noFill ? this.deps.theme.textColor : contrastColor(color));
       ctx.textBaseline = "middle";
+      let tx;
+      if (lb.textAlign === "left") {
+        ctx.textAlign = "left";
+        tx = bx + padX;
+      } else if (lb.textAlign === "right") {
+        ctx.textAlign = "right";
+        tx = bx + w - padX;
+      } else {
+        ctx.textAlign = "center";
+        tx = bx + w / 2;
+      }
       const startY = by + padY + lineH / 2;
-      for (let i = 0; i < lines.length; i += 1) ctx.fillText(lines[i], bx + w / 2, startY + i * lineH);
+      for (let i = 0; i < lines.length; i += 1) ctx.fillText(lines[i], tx, startY + i * lineH);
     }
+    return { x: bx, y: by, w, h };
   }
   roundRect(ctx, x, y, w, h, r) {
     const rr = Math.min(r, w / 2, h / 2);
@@ -25890,7 +26483,7 @@ var ChromeRenderer = class {
     this.ctx = null;
     // The color for axis tick labels — the host-passed surface text, set each frame in render().
     this.axisTextColor = DARK_THEME.textColor;
-    // Shared Pine-drawing renderer (line/box/label/polyline/linefill); widthCache persists.
+    // Shared Pine-drawing renderer, used here for autoscale geometry only; widthCache persists.
     this.drawScene = new DrawingSceneRenderer({ timeToLogical: () => 0, barAt: () => null, theme: {} });
   }
   mount(canvas) {
@@ -25915,8 +26508,8 @@ var ChromeRenderer = class {
    */
   paneDrawingsRange(ownModels, scene, isPricePane, vr) {
     let dr = null;
-    for (const m of ownModels) dr = unionRange(dr, this.drawingsRange(this.ownDrawings(m), vr, scene.offsetOf(m.id)));
-    if (isPricePane) for (const m of scene.indicators.values()) dr = unionRange(dr, this.drawingsRange(this.overlayDrawings(m), vr, scene.offsetOf(m.id)));
+    for (const m of ownModels) dr = unionRange(dr, this.drawingsRange(modelDrawingSet(m, false), vr, scene.offsetOf(m.id)));
+    if (isPricePane) for (const m of scene.indicators.values()) dr = unionRange(dr, this.drawingsRange(modelDrawingSet(m, true), vr, scene.offsetOf(m.id)));
     return dr;
   }
   /** Clear the chrome canvas and draw drawings + axes + current-price line.
@@ -25948,17 +26541,6 @@ var ChromeRenderer = class {
       return;
     }
     const pricePane = panes.find((p) => p.kind === "price") ?? null;
-    for (const pane of panes) {
-      if (pane.collapsed) continue;
-      for (const m of scene.indicatorsForPane(pane.id)) {
-        const sc = scene.scaleFor(m, pane);
-        const mp = sc === pane.scale ? pane : { ...pane, scale: sc };
-        this.renderDrawings(ctx, coords, this.ownDrawings(m), mp, dataW, scene.offsetOf(m.id));
-      }
-    }
-    if (pricePane) {
-      for (const m of scene.indicators.values()) this.renderDrawings(ctx, coords, this.overlayDrawings(m), pricePane, dataW, scene.offsetOf(m.id));
-    }
     if (pricePane && !pricePane.collapsed && scene.tradeMarkers.visible) {
       for (const m of scene.indicators.values()) {
         if (m.trades?.length) this.renderTrades(ctx, coords, scene, theme, m.trades, pricePane, dataW);
@@ -25974,25 +26556,6 @@ var ChromeRenderer = class {
     this.canvas = null;
     this.ctx = null;
   }
-  // ── Pine-drawing helpers (own vs force_overlay routing) ──
-  ownDrawings(m) {
-    return {
-      lines: (m.lines ?? []).filter((d) => !d.overlay),
-      boxes: (m.boxes ?? []).filter((d) => !d.overlay),
-      labels: (m.labels ?? []).filter((d) => !d.overlay),
-      polylines: (m.polylines ?? []).filter((d) => !d.overlay),
-      linefills: (m.linefills ?? []).filter((d) => !d.overlay)
-    };
-  }
-  overlayDrawings(m) {
-    return {
-      lines: (m.lines ?? []).filter((d) => d.overlay),
-      boxes: (m.boxes ?? []).filter((d) => d.overlay),
-      labels: (m.labels ?? []).filter((d) => d.overlay),
-      polylines: (m.polylines ?? []).filter((d) => d.overlay),
-      linefills: (m.linefills ?? []).filter((d) => d.overlay)
-    };
-  }
   drawingsRange(set, vr, indexOffset = 0) {
     this.drawScene.setSet(set, indexOffset);
     if (this.drawScene.isEmpty()) return null;
@@ -26026,23 +26589,6 @@ var ChromeRenderer = class {
     );
     ctx.restore();
   }
-  renderDrawings(ctx, coords, set, pane, dataW, indexOffset = 0) {
-    this.drawScene.setSet(set, indexOffset);
-    if (this.drawScene.isEmpty()) return;
-    ctx.save();
-    ctx.translate(0, pane.bounds.top);
-    ctx.beginPath();
-    ctx.rect(0, 0, dataW, pane.bounds.height);
-    ctx.clip();
-    this.drawScene.render(
-      ctx,
-      dataW,
-      pane.bounds.height,
-      (l) => coords.logicalToX(l),
-      (price) => coords.priceToY(price, pane.scale, pane.bounds) - pane.bounds.top
-    );
-    ctx.restore();
-  }
   // ── axes ──
   drawPriceAxes(ctx, scene, coords, theme, dataW, panes) {
     ctx.strokeStyle = scene.style.borderColor ?? theme.borderColor;
@@ -26258,6 +26804,68 @@ function formatCountdown(ms) {
   return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
 }
 
+// src/renderers/native/chrome/LabelTooltip.ts
+var HOVER_DELAY_MS = 350;
+var LabelTooltip = class {
+  constructor(plot, deps) {
+    this.plot = plot;
+    this.deps = deps;
+    this.tip = null;
+    this.timer = null;
+    /** Text of the currently open OR armed tip — dedupes moves inside one label. */
+    this.current = null;
+    this.onMove = (e) => {
+      if (e.pointerType !== "mouse") return;
+      const rect = this.plot.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const text = this.deps.lookup(x, y);
+      if (!text) {
+        this.clear();
+        return;
+      }
+      if (text === this.current) return;
+      this.clear();
+      this.current = text;
+      this.timer = window.setTimeout(() => this.show(text, x, y), HOVER_DELAY_MS);
+    };
+    this.onLeave = () => {
+      this.clear();
+    };
+    plot.addEventListener("pointermove", this.onMove);
+    plot.addEventListener("pointerleave", this.onLeave);
+    plot.addEventListener("pointerdown", this.onLeave);
+  }
+  destroy() {
+    this.plot.removeEventListener("pointermove", this.onMove);
+    this.plot.removeEventListener("pointerleave", this.onLeave);
+    this.plot.removeEventListener("pointerdown", this.onLeave);
+    this.clear();
+  }
+  show(text, x, y) {
+    const doc = this.plot.ownerDocument;
+    const tip = doc.createElement("div");
+    tip.textContent = text;
+    tip.style.cssText = "position:absolute;z-index:var(--vela-z-tooltip);pointer-events:none;background:var(--vela-bg);border:1px solid var(--vela-border);color:var(--vela-fg);border-radius:var(--vela-radius-md);padding:4px 9px;box-shadow:var(--vela-shadow);font:var(--vela-font-size-md) var(--vela-font);max-width:260px;";
+    applyChromeTokens(tip, this.deps.theme());
+    this.plot.appendChild(tip);
+    const pw = this.plot.clientWidth;
+    const ph = this.plot.clientHeight;
+    tip.style.left = `${Math.max(0, Math.min(x + 12, pw - tip.offsetWidth - 4))}px`;
+    tip.style.top = `${Math.max(0, Math.min(y + 16, ph - tip.offsetHeight - 4))}px`;
+    this.tip = tip;
+  }
+  clear() {
+    if (this.timer !== null) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+    this.tip?.remove();
+    this.tip = null;
+    this.current = null;
+  }
+};
+
 // src/renderers/native/chrome/CrosshairRenderer.ts
 var CrosshairRenderer = class {
   constructor() {
@@ -30299,17 +30907,17 @@ function glyphIcon(glyph) {
   return textGlyph(String(glyph), 15);
 }
 function stampSizeIcon(size) {
-  return textGlyph("\u25CF", (SIZE_PX4[String(size)] ?? 13) + 4);
+  return textGlyph("\u25CF", (SIZE_PX3[String(size)] ?? 13) + 4);
 }
 function sizeIcon(size) {
   return textGlyph(String(size).charAt(0).toUpperCase(), 15);
 }
-var SIZE_PX4 = { small: 10, normal: 13, large: 16, huge: 20 };
+var SIZE_PX3 = { small: 10, normal: 13, large: 16, huge: 20 };
 function numbersSizeIcon(size) {
-  return textGlyph("12", (SIZE_PX4[String(size)] ?? 13) - 1, 16.5, 'font-weight="600"');
+  return textGlyph("12", (SIZE_PX3[String(size)] ?? 13) - 1, 16.5, 'font-weight="600"');
 }
 function labelSizeIcon(size) {
-  return textGlyph("T", (SIZE_PX4[String(size)] ?? 13) + 2);
+  return textGlyph("T", (SIZE_PX3[String(size)] ?? 13) + 2);
 }
 function capitalize(s) {
   return s.charAt(0).toUpperCase() + s.slice(1);
@@ -31284,6 +31892,315 @@ var UserDrawingController = class {
   }
 };
 
+// src/renderers/shared/TableOverlay.ts
+var SIZE_PX4 = {
+  auto: 13,
+  tiny: 10,
+  small: 11,
+  normal: 13,
+  large: 16,
+  huge: 20
+};
+function fontPxOf(size) {
+  if (typeof size === "number") return size > 0 ? size : SIZE_PX4.auto;
+  return SIZE_PX4[size] ?? SIZE_PX4.auto;
+}
+function tableHasContent(t) {
+  return t.cells.some((row) => row?.some((c) => c != null && !c.merged));
+}
+function mergeRenderPlan(t) {
+  const span = /* @__PURE__ */ new Map();
+  const omit = /* @__PURE__ */ new Set();
+  for (const m of t.merges) {
+    span.set(`${m.startRow}:${m.startCol}`, { cs: m.endCol - m.startCol + 1, rs: m.endRow - m.startRow + 1 });
+    for (let r = m.startRow; r <= m.endRow; r += 1) {
+      for (let c = m.startCol; c <= m.endCol; c += 1) {
+        if (r !== m.startRow || c !== m.startCol) omit.add(`${r}:${c}`);
+      }
+    }
+  }
+  for (let r = 0; r < t.rows; r += 1) {
+    for (let c = 0; c < t.columns; c += 1) {
+      if (t.cells[r]?.[c]?.merged && !span.has(`${r}:${c}`)) omit.add(`${r}:${c}`);
+    }
+  }
+  for (const key of span.keys()) omit.delete(key);
+  return { span, omit };
+}
+
+// src/renderers/shared/TableCanvasRenderer.ts
+var PAD_X = 6;
+var PAD_Y = 2;
+var MARGIN = 6;
+var LINE_HEIGHT = 1.2;
+function paintTable(ctx, t, args, tips) {
+  if (!tableHasContent(t)) return;
+  const layout = layoutTable(ctx, t, args);
+  if (!layout || layout.w <= 0 || layout.h <= 0) return;
+  const fw = t.frameColor && t.frameWidth > 0 ? t.frameWidth : 0;
+  const { x, y } = anchorOrigin(t.position, layout.w + 2 * fw, layout.h + 2 * fw, args);
+  const x0 = x + fw;
+  const y0 = y + fw;
+  if (t.bgColor) {
+    ctx.fillStyle = t.bgColor;
+    ctx.fillRect(x0, y0, layout.w, layout.h);
+  }
+  if (fw > 0 && t.frameColor) {
+    ctx.strokeStyle = t.frameColor;
+    ctx.lineWidth = fw;
+    ctx.strokeRect(x + fw / 2, y + fw / 2, layout.w + fw, layout.h + fw);
+  }
+  const colX = [0];
+  for (const w of layout.colW) colX.push(colX[colX.length - 1] + w);
+  const rowY = [0];
+  for (const h of layout.rowH) rowY.push(rowY[rowY.length - 1] + h);
+  const prevBaseline = ctx.textBaseline;
+  const prevAlign = ctx.textAlign;
+  ctx.textBaseline = "middle";
+  for (const box of layout.boxes) {
+    const rx = x0 + colX[box.c];
+    const ry = y0 + rowY[box.r];
+    const rw = colX[box.c + box.cs] - colX[box.c];
+    const rh = rowY[box.r + box.rs] - rowY[box.r];
+    const cell = box.cell;
+    if (cell.bgColor) {
+      ctx.fillStyle = cell.bgColor;
+      ctx.fillRect(rx, ry, rw, rh);
+    }
+    const text = cell.text ?? "";
+    if (text.length > 0) {
+      const px = fontPxOf(cell.textSize);
+      ctx.font = cellFont(cell, px, args.theme);
+      ctx.fillStyle = cell.textColor ?? args.theme.textColor;
+      const lines = text.split("\n");
+      const blockH = lines.length * px * LINE_HEIGHT;
+      const blockTop = cell.vAlign === "top" ? ry + PAD_Y : cell.vAlign === "bottom" ? ry + rh - PAD_Y - blockH : ry + (rh - blockH) / 2;
+      const tx = cell.hAlign === "left" ? rx + PAD_X : cell.hAlign === "right" ? rx + rw - PAD_X : rx + rw / 2;
+      ctx.textAlign = cell.hAlign;
+      lines.forEach((line, i) => ctx.fillText(line, tx, blockTop + (i + 0.5) * px * LINE_HEIGHT));
+    }
+    if (cell.tooltip) tips.push({ left: rx, top: ry, right: rx + rw, bottom: ry + rh, text: cell.tooltip });
+  }
+  ctx.textBaseline = prevBaseline;
+  ctx.textAlign = prevAlign;
+  if (t.borderColor && t.borderWidth > 0) {
+    ctx.strokeStyle = t.borderColor;
+    ctx.lineWidth = t.borderWidth;
+    const seen = /* @__PURE__ */ new Set();
+    ctx.beginPath();
+    const edge = (ax, ay, bx, by) => {
+      const key = `${ax},${ay},${bx},${by}`;
+      if (seen.has(key)) return;
+      seen.add(key);
+      ctx.moveTo(ax, ay);
+      ctx.lineTo(bx, by);
+    };
+    for (const box of layout.boxes) {
+      const l = Math.round(x0 + colX[box.c]);
+      const r = Math.round(x0 + colX[box.c + box.cs]);
+      const tp = Math.round(y0 + rowY[box.r]);
+      const bt = Math.round(y0 + rowY[box.r + box.rs]);
+      edge(l, tp, r, tp);
+      edge(l, bt, r, bt);
+      edge(l, tp, l, bt);
+      edge(r, tp, r, bt);
+    }
+    ctx.stroke();
+  }
+}
+function layoutTable(ctx, t, args) {
+  const { span, omit } = mergeRenderPlan(t);
+  const colW = new Array(t.columns).fill(0);
+  const rowH = new Array(t.rows).fill(0);
+  const boxes = [];
+  for (let r = 0; r < t.rows; r += 1) {
+    for (let c = 0; c < t.columns; c += 1) {
+      if (omit.has(`${r}:${c}`)) continue;
+      const cell = t.cells[r]?.[c];
+      if (cell == null) continue;
+      const sp = span.get(`${r}:${c}`);
+      boxes.push({ cell, r, c, cs: Math.min(sp?.cs ?? 1, t.columns - c), rs: Math.min(sp?.rs ?? 1, t.rows - r) });
+    }
+  }
+  if (boxes.length === 0) return null;
+  const sizeOf = (cell) => {
+    const px = fontPxOf(cell.textSize);
+    ctx.font = cellFont(cell, px, args.theme);
+    const lines = (cell.text ?? "").split("\n");
+    let maxW = 0;
+    for (const line of lines) maxW = Math.max(maxW, ctx.measureText(line).width);
+    let w2 = Math.ceil(maxW) + 2 * PAD_X;
+    let h2 = Math.ceil(lines.length * px * LINE_HEIGHT) + 2 * PAD_Y;
+    if (cell.width) w2 = Math.max(w2, cell.width / 100 * args.plotWidth);
+    if (cell.height) h2 = Math.max(h2, cell.height / 100 * args.paneHeight);
+    return { w: w2, h: h2 };
+  };
+  const spanning = [];
+  for (const box of boxes) {
+    const { w: w2, h: h2 } = sizeOf(box.cell);
+    if (box.cs === 1) colW[box.c] = Math.max(colW[box.c], w2);
+    if (box.rs === 1) rowH[box.r] = Math.max(rowH[box.r], h2);
+    if (box.cs > 1 || box.rs > 1) spanning.push({ box, w: w2, h: h2 });
+  }
+  for (const { box, w: w2, h: h2 } of spanning) {
+    if (box.cs > 1) {
+      let sum = 0;
+      for (let c = box.c; c < box.c + box.cs; c += 1) sum += colW[c];
+      if (w2 > sum) for (let c = box.c; c < box.c + box.cs; c += 1) colW[c] += (w2 - sum) / box.cs;
+    }
+    if (box.rs > 1) {
+      let sum = 0;
+      for (let r = box.r; r < box.r + box.rs; r += 1) sum += rowH[r];
+      if (h2 > sum) for (let r = box.r; r < box.r + box.rs; r += 1) rowH[r] += (h2 - sum) / box.rs;
+    }
+  }
+  let w = 0;
+  for (const cw of colW) w += cw;
+  let h = 0;
+  for (const rh of rowH) h += rh;
+  return { colW, rowH, w, h, boxes };
+}
+function anchorOrigin(position, totalW, totalH, args) {
+  let y;
+  if (position.startsWith("top")) y = MARGIN;
+  else if (position.startsWith("bottom")) y = args.paneHeight - MARGIN - totalH;
+  else y = args.paneHeight / 2 - totalH / 2;
+  let x;
+  if (position.endsWith("left")) x = MARGIN;
+  else if (position.endsWith("right")) x = args.plotWidth - MARGIN - totalW;
+  else x = args.plotWidth / 2 - totalW / 2;
+  return { x, y };
+}
+function cellFont(cell, px, theme) {
+  const family = cell.fontFamily === "monospace" ? "monospace" : theme.fontFamily || "sans-serif";
+  return `${cell.italic ? "italic " : ""}${cell.bold ? "bold " : ""}${px}px ${family}`;
+}
+
+// src/renderers/native/drawings/IndicatorDrawingSlices.ts
+function indicatorSliceKey(z, boundaries) {
+  return boundaries.find((b) => b > z) ?? Infinity;
+}
+var IndicatorDrawingSlices = class {
+  constructor() {
+    this.drawScene = new DrawingSceneRenderer({ timeToLogical: () => 0, barAt: () => null, theme: {} });
+    /** Slice canvas cache, keyed `paneId|beforeZ` — same lifecycle as the user-drawing cache. */
+    this.sliceCache = /* @__PURE__ */ new Map();
+    /** Tooltip hit-rects of every label drawn this frame, in plot coords (rebuilt per prepare). */
+    this.tips = [];
+  }
+  /**
+   * Rebuild the per-indicator drawing slices for this data frame. `ref` is the data
+   * canvas the slices must match pixel-for-pixel (the backend composites them 1:1).
+   * Runs from the renderer's data paint, just before the backend composites the scene.
+   */
+  prepare(scene, coords, theme, ref) {
+    this.tips = [];
+    const out = /* @__PURE__ */ new Map();
+    if (ref.width === 0 || ref.height === 0) {
+      this.sliceCache.clear();
+      return out;
+    }
+    this.drawScene.setDeps({
+      timeToLogical: (ms) => coords.timeToLogical(ms),
+      barAt: (logical) => {
+        const b = scene.bars[Math.round(logical)];
+        return b ? { high: b.high, low: b.low } : null;
+      },
+      theme
+    });
+    const dpr = coords.dpr;
+    const dataW = coords.width;
+    const buckets = /* @__PURE__ */ new Map();
+    const add = (paneId, beforeZ, entry) => {
+      const key = `${paneId}|${beforeZ}`;
+      const bucket = buckets.get(key);
+      if (bucket) bucket.entries.push(entry);
+      else buckets.set(key, { paneId, beforeZ, entries: [entry] });
+    };
+    for (const pane of scene.orderedPanes()) {
+      if (pane.collapsed) continue;
+      const boundaries = scene.seriesBoundaries(pane.id);
+      for (const m of scene.orderedIndicatorsForPane(pane.id)) {
+        const set = modelDrawingSet(m, false);
+        const tables = (m.tables ?? []).filter((t) => !t.overlay);
+        if (drawingSetEmpty(set) && tables.length === 0) continue;
+        const sc = scene.scaleFor(m, pane);
+        const mp = sc === pane.scale ? pane : { ...pane, scale: sc };
+        const beforeZ = indicatorSliceKey(scene.zOf(m.id), boundaries);
+        add(pane.id, beforeZ, { set, tables, pane: mp, indexOffset: scene.offsetOf(m.id) });
+      }
+      if (pane.kind === "price") {
+        for (const m of scene.indicators.values()) {
+          const set = modelDrawingSet(m, true);
+          const tables = (m.tables ?? []).filter((t) => t.overlay === true);
+          if (drawingSetEmpty(set) && tables.length === 0) continue;
+          add(pane.id, Infinity, { set, tables, pane, indexOffset: scene.offsetOf(m.id) });
+        }
+      }
+    }
+    for (const [key, { paneId, beforeZ, entries }] of buckets) {
+      let canvas = this.sliceCache.get(key);
+      if (!canvas) {
+        canvas = document.createElement("canvas");
+        this.sliceCache.set(key, canvas);
+      }
+      if (canvas.width !== ref.width || canvas.height !== ref.height) {
+        canvas.width = ref.width;
+        canvas.height = ref.height;
+      }
+      const ctx = canvas.getContext("2d");
+      if (!ctx) continue;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
+      for (const e of entries) this.paintEntry(ctx, e, coords, dataW, theme);
+      const slices = out.get(paneId) ?? [];
+      slices.push({ beforeZ, canvas });
+      out.set(paneId, slices);
+    }
+    for (const key of [...this.sliceCache.keys()]) if (!buckets.has(key)) this.sliceCache.delete(key);
+    for (const slices of out.values()) slices.sort((a, b) => a.beforeZ - b.beforeZ);
+    return out;
+  }
+  paintEntry(ctx, e, coords, dataW, theme) {
+    const { pane } = e;
+    const paneTips = [];
+    ctx.save();
+    ctx.translate(0, pane.bounds.top);
+    ctx.beginPath();
+    ctx.rect(0, 0, dataW, pane.bounds.height);
+    ctx.clip();
+    this.drawScene.setSet(e.set, e.indexOffset);
+    this.drawScene.render(
+      ctx,
+      dataW,
+      pane.bounds.height,
+      (l) => coords.logicalToX(l),
+      (price) => coords.priceToY(price, pane.scale, pane.bounds) - pane.bounds.top
+    );
+    paneTips.push(...this.drawScene.labelTipRegions());
+    for (const t of e.tables) paintTable(ctx, t, { paneHeight: pane.bounds.height, plotWidth: dataW, theme }, paneTips);
+    ctx.restore();
+    for (const r of paneTips) {
+      this.tips.push({ ...r, top: r.top + pane.bounds.top, bottom: r.bottom + pane.bounds.top });
+    }
+  }
+  /** Tooltip of the topmost label or table cell under a plot-space point, or null. Fed by the last prepare. */
+  labelTooltipAt(x, y) {
+    for (let i = this.tips.length - 1; i >= 0; i -= 1) {
+      const r = this.tips[i];
+      if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return r.text;
+    }
+    return null;
+  }
+};
+function mergeSlices(indicator, user) {
+  const out = /* @__PURE__ */ new Map();
+  for (const [paneId, slices] of indicator) out.set(paneId, [...slices]);
+  for (const [paneId, slices] of user) out.set(paneId, [...out.get(paneId) ?? [], ...slices]);
+  for (const slices of out.values()) slices.sort((a, b) => a.beforeZ - b.beforeZ);
+  return out;
+}
+
 // src/renderers/native/drawings/Projector.ts
 function createProjector(coords, paneOf, paneIdAtY, barsInRange) {
   return {
@@ -31335,19 +32252,8 @@ function computePaneScale(models, bars, includeCandles, i0, i1, drawings, log =
   for (const model of models) {
     const off = offsetOf(model.id);
     for (const s of model.series) {
-      if (s.kind === "candle" || s.kind === "bar") {
-        for (let i = i0; i <= i1; i += 1) {
-          const b = s.bars[i - off];
-          if (b) {
-            consider(b.high);
-            consider(b.low);
-          }
-        }
-      } else if (isLineLikeSeries(s)) {
-        for (let i = i0; i <= i1; i += 1) consider(s.points[i - off]?.value);
-        if (s.kind === "histogram" || s.kind === "columns") consider(s.style?.base ?? 0);
-        else if (s.style?.base != null) consider(s.style.base);
-      }
+      if (s.overlay === true) continue;
+      considerSeries(s, i0, i1, off, consider);
     }
     for (const pl of model.priceLines) consider(pl.price);
   }
@@ -31369,6 +32275,36 @@ function computePaneScale(models, bars, includeCandles, i0, i1, drawings, log =
   const span = max - min;
   return { min: min - span * MARGIN_BOTTOM, max: max + span * MARGIN_TOP };
 }
+function considerSeries(s, i0, i1, off, consider) {
+  if (s.kind === "candle" || s.kind === "bar") {
+    for (let i = i0; i <= i1; i += 1) {
+      const b = s.bars[i - off];
+      if (b) {
+        consider(b.high);
+        consider(b.low);
+      }
+    }
+  } else if (isLineLikeSeries(s)) {
+    for (let i = i0; i <= i1; i += 1) consider(s.points[i - off]?.value);
+    if (s.kind === "histogram" || s.kind === "columns") consider(s.style?.base ?? 0);
+    else if (s.style?.base != null) consider(s.style.base);
+  }
+}
+function overlaySeriesRange(models, i0, i1, offsetOf = () => 0) {
+  let min = Infinity;
+  let max = -Infinity;
+  const consider = (v) => {
+    if (v != null && Number.isFinite(v)) {
+      if (v < min) min = v;
+      if (v > max) max = v;
+    }
+  };
+  for (const model of models) {
+    const off = offsetOf(model.id);
+    for (const s of model.series) if (s.overlay === true) considerSeries(s, i0, i1, off, consider);
+  }
+  return min === Infinity ? null : { min, max };
+}
 function expandScaleByPixels(scale, heightPx, abovePx, belowPx) {
   if (abovePx <= 0 && belowPx <= 0) return scale;
   const content = heightPx - abovePx - belowPx;
@@ -32010,6 +32946,11 @@ var NativeRenderer = class {
     this.vpvrRenderer = new VpvrRenderer();
     this.resizeObserver = null;
     this.dprMedia = null;
+    /** Plot size in INTEGER device px, as last reported by the resize observer's
+     *  device-pixel-content-box — the browser's own statement of how many device pixels
+     *  it paints the plot into. `null` until the first report or where the box type is
+     *  unsupported (WebKit); syncSize then falls back to rounding the client rect. */
+    this.plotDeviceSize = null;
     this.coords = new CoordinateSystem();
     this.scene = new SceneGraph();
     // chosen at mount (WebGL2 if available, else canvas2d)
@@ -32017,6 +32958,10 @@ var NativeRenderer = class {
     this.glowAmount = 0;
     // WebGL2 neon-glow intensity (canvas2d ignores it)
     this.chrome = new ChromeRenderer();
+    /** Prepaints each indicator's Pine drawings into interleave slices at the model's z. */
+    this.indicatorSlices = new IndicatorDrawingSlices();
+    /** Hover tooltips for Pine labels (canvas hit-rects collected by the chrome layer). */
+    this.labelTooltip = null;
     this.crosshairLayer = new CrosshairRenderer();
     /** 1 Hz repaint pump so the price-axis countdown-to-bar-close ticks; null when off. */
     this.countdownTimer = null;
@@ -32027,6 +32972,8 @@ var NativeRenderer = class {
     this.indicatorValuesOn = true;
     /** Host-contributed legend actions — held here so a rebuild of the legend re-wires them. */
     this.legendActionsProvider = null;
+    /** Host-contributed legend callouts — held here so a rebuild of the legend re-wires them. */
+    this.legendCalloutsProvider = null;
     /** Host override of the legend's fold toggle — held here so a remount re-applies it. */
     this.legendOverviewAction = null;
     // ── keyboard navigation / accessibility (item 11) ──
@@ -32161,7 +33108,6 @@ var NativeRenderer = class {
     this.toggleVisibleCbs = /* @__PURE__ */ new Set();
     this.moveIndicatorCbs = /* @__PURE__ */ new Set();
     this.priceStyleCbs = /* @__PURE__ */ new Set();
-    this.tableOverlays = /* @__PURE__ */ new Map();
     this.name = "native";
     this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "intro", "zoomAnchor", "axisDrag", "paneResize", "candleZOrder", "candleVisible", "seriesOrder", "highlights", "sessionZones", "gridlines", "axisLabels", "scaleMode", "invertScale", "paneScales", "autoScale", "timezone", "keyboard", "historyChords", "priceStyle", "priceBaseline", "baselinePrice", "settings", "attribution", "dialogHost", "tradeMarkers", "indicatorTitles", "indicatorValues"];
     /** Track cursor proximity to the scroll button on the plot (bubbles from the button too,
@@ -32475,7 +33421,6 @@ var NativeRenderer = class {
    * hidden) on clear so a re-show picks up the current theme.
    */
   setLoading(loading) {
-    for (const overlay of this.tableOverlays.values()) overlay.setVisible(!loading);
     if (!loading || !this.wrapper) {
       this.loadingEl?.remove();
       this.loadingEl = null;
@@ -33135,6 +34080,10 @@ var NativeRenderer = class {
     this.plot.appendChild(this.scrollButton);
     this.plot.addEventListener("pointermove", this.onScrollProximityMove);
     this.plot.addEventListener("pointerleave", this.onScrollProximityLeave);
+    this.labelTooltip = new LabelTooltip(this.plot, {
+      theme: () => this.chromeTheme(),
+      lookup: (x, y) => this.indicatorSlices.labelTooltipAt(x, y)
+    });
     this.userDrawings = new UserDrawingController(this.wrapper, this.plot, this.drawingsCanvas, {
       projector: () => this.drawingProjector(),
       dpr: () => this.coords.dpr,
@@ -33174,9 +34123,10 @@ var NativeRenderer = class {
     this.inputsUI.setDialogHost(this.dialogHost);
     this.inputsUI.setSymbolPicker(this.symbolPicker);
     this.inputsUI.setLegendActions(this.legendActionsProvider);
+    this.inputsUI.setLegendCallouts(this.legendCalloutsProvider);
     this.inputsUI.setLegendOverviewAction(this.legendOverviewAction);
     this.inputsUI.setOnChange((c) => {
-      for (const cb of this.inputChangeCbs) cb({ indicatorId: c.indicatorId, key: c.key, value: c.value });
+      for (const cb of this.inputChangeCbs) cb({ indicatorId: c.indicatorId, key: c.key, value: c.value, ...c.kind ? { kind: c.kind } : {} });
     });
     this.inputsUI.setOnRemove((id) => {
       for (const cb of this.removeIndicatorCbs) cb(id);
@@ -33217,6 +34167,7 @@ var NativeRenderer = class {
         this.emitPaneAction({ type: "maximize", paneId, maximized });
       }
     });
+    this.paneControls.setSuspended(this.layoutMode === "mobile");
     this.axisScaleButtons = new AxisScaleButtons(this.plot, theme, {
       panes: () => this.axisScaleViews(),
       rightAxis: () => this.rightAxisW,
@@ -33226,8 +34177,19 @@ var NativeRenderer = class {
         if (pane) this.setPaneLog(paneId, !paneLogScale(this.scene, pane));
       }
     });
-    this.resizeObserver = new ResizeObserver(() => this.resize());
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const e of entries) {
+        if (e.target !== this.plot) continue;
+        const s = e.devicePixelContentBoxSize?.[0];
+        if (s) this.plotDeviceSize = { width: s.inlineSize, height: s.blockSize };
+      }
+      this.resize();
+    });
     this.resizeObserver.observe(this.wrapper);
+    try {
+      this.resizeObserver.observe(this.plot, { box: "device-pixel-content-box" });
+    } catch {
+    }
     this.watchDpr();
     this.syncSize();
   }
@@ -33352,8 +34314,6 @@ var NativeRenderer = class {
     this.inputsUI?.destroy();
     this.paneControls?.destroy();
     this.axisScaleButtons?.destroy();
-    for (const overlay of this.tableOverlays.values()) overlay.destroy();
-    this.tableOverlays.clear();
     this.resizeObserver?.disconnect();
     this.resizeObserver = null;
     this.dprMedia?.removeEventListener("change", this.onDprChange);
@@ -33366,6 +34326,8 @@ var NativeRenderer = class {
     this.settingsButton = null;
     this.plot?.removeEventListener("pointermove", this.onScrollProximityMove);
     this.plot?.removeEventListener("pointerleave", this.onScrollProximityLeave);
+    this.labelTooltip?.destroy();
+    this.labelTooltip = null;
     this.scrollButton?.remove();
     this.scrollButton = null;
     for (const l of this.extLayers) l.instance.destroy?.();
@@ -33380,6 +34342,7 @@ var NativeRenderer = class {
     this.attributionEl = null;
     this.mountContainer?.style.removeProperty("--vela-toolbar-gutter");
     this.mountContainer?.style.removeProperty("--vela-scale-gutter");
+    this.mountContainer?.style.removeProperty("--vela-bottom-gutter");
     this.mountContainer?.style.removeProperty("--vela-price-pane-top");
     this.mountContainer?.style.removeProperty("--vela-price-pane-bottom");
     this.mountContainer = null;
@@ -33472,7 +34435,6 @@ var NativeRenderer = class {
   ensurePane(pane) {
     this.scene.ensurePane(pane.id, pane.kind, pane.order, pane.heightWeight ?? (pane.kind === "price" ? 3 : 1));
     this.layoutPanes();
-    this.repositionTables();
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
   }
@@ -33494,17 +34456,14 @@ var NativeRenderer = class {
     if (!model.ownScale) this.scene.dropIndicatorScale(handle.id);
     this.inputsUI.setPane(handle.id, paneId);
     this.refreshAnchorOffset(model);
-    this.syncTables(model);
     this.refreshAxisWidth();
     this.layoutPanes();
-    this.repositionTables();
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
   }
   orderPanes(orderedIds) {
     this.scene.orderPanes(orderedIds);
     this.layoutPanes();
-    this.repositionTables();
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
   }
@@ -33513,7 +34472,6 @@ var NativeRenderer = class {
     if (!pane || pane.collapsed === collapsed) return;
     pane.collapsed = collapsed;
     this.layoutPanes();
-    this.repositionTables();
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
   }
@@ -33521,7 +34479,6 @@ var NativeRenderer = class {
     if (paneId !== null && !this.scene.panes.has(paneId)) paneId = null;
     this.maximizedPaneId = paneId;
     this.layoutPanes();
-    this.repositionTables();
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
   }
@@ -33606,9 +34563,8 @@ var NativeRenderer = class {
     else this.scene.assignIndicatorZ(model.id);
     this.inputsUI.upsert(model.id, model.shorttitle ?? model.title, model.inputs, model.inputValues, model.paneId, {
       native: !!model.native,
-      ...model.shorttitle ? { settingsTitle: model.title } : {}
+      ...model.props ? { props: model.props, propValues: model.propValues ?? {} } : {}
     });
-    this.syncTables(model);
     if (model.native?.type === "volume") {
       this.volumeActive = true;
       this.volumeHidden = false;
@@ -33632,7 +34588,6 @@ var NativeRenderer = class {
       }
     }
     applyPatch(model, patch);
-    this.syncTables(model);
     this.scheduler.invalidate(3 /* Light */);
   }
   removeIndicator(handle) {
@@ -33651,14 +34606,12 @@ var NativeRenderer = class {
     this.scene.forgetAnchorOffset(handle.id);
     this.scene.dropIndicatorScale(handle.id);
     this.inputsUI.remove(handle.id);
-    this.tableOverlays.get(handle.id)?.destroy();
-    this.tableOverlays.delete(handle.id);
     this.refreshAxisWidth();
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
   }
-  setIndicatorInputs(handle, values) {
-    this.inputsUI.setValues(handle.id, values);
+  setIndicatorInputs(handle, values, props) {
+    this.inputsUI.setValues(handle.id, values, props);
   }
   setSymbolPicker(picker) {
     this.symbolPicker = picker;
@@ -33668,6 +34621,10 @@ var NativeRenderer = class {
     this.legendActionsProvider = provider;
     this.inputsUI?.setLegendActions(provider);
   }
+  setLegendCallouts(provider) {
+    this.legendCalloutsProvider = provider;
+    this.inputsUI?.setLegendCallouts(provider);
+  }
   setLegendOverviewAction(action) {
     this.legendOverviewAction = action;
     this.inputsUI?.setLegendOverviewAction(action);
@@ -33692,8 +34649,6 @@ var NativeRenderer = class {
     }
     if (!visible) {
       this.scene.indicators.delete(handle.id);
-      this.tableOverlays.get(handle.id)?.destroy();
-      this.tableOverlays.delete(handle.id);
     }
     this.inputsUI.setVisible(handle.id, visible);
     this.scheduler.invalidate(4 /* Full */);
@@ -33739,6 +34694,7 @@ var NativeRenderer = class {
     this.userDrawings?.setLayoutMode(mode);
     this.settingsDialog?.setLayoutMode(mode);
     this.inputsUI?.setLayoutMode(mode);
+    this.paneControls?.setSuspended(mode === "mobile");
     if (this.scrollButton) {
       const px = mode === "mobile" ? SCROLL_BTN_SIZE_TOUCH : SCROLL_BTN_SIZE;
       this.scrollButton.style.width = `${px}px`;
@@ -34134,7 +35090,6 @@ var NativeRenderer = class {
   /** Relayout + repaint + refresh the hover buttons after a collapse/maximize/order change. */
   afterPaneLayoutChange() {
     this.layoutPanes();
-    this.repositionTables();
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
   }
@@ -34215,7 +35170,6 @@ var NativeRenderer = class {
     above.heightWeight = next.above;
     below.heightWeight = next.below;
     this.layoutPanes();
-    this.repositionTables();
     this.scheduler.invalidate(4 /* Full */);
   }
   /** Double-click a separator → split the two adjacent panes evenly (each gets half of
@@ -34230,7 +35184,6 @@ var NativeRenderer = class {
     above.heightWeight = half;
     below.heightWeight = half;
     this.layoutPanes();
-    this.repositionTables();
     this.scheduler.invalidate(4 /* Full */);
   }
   // ── keyboard navigation / accessibility (item 11) ──
@@ -34509,7 +35462,10 @@ var NativeRenderer = class {
     const liveActual = li >= 0 ? this.bars[li] : void 0;
     const easeLive = !!liveActual && this.liveEaseTime === liveActual.time && (liveActual.high !== this.liveEaseHigh || liveActual.low !== this.liveEaseLow || liveActual.close !== this.liveEaseClose);
     if (easeLive && liveActual) this.bars[li] = { ...liveActual, high: this.liveEaseHigh, low: this.liveEaseLow, close: this.liveEaseClose };
-    this.scene.drawingSlices = this.userDrawings?.prepareSlices(this.scene.orderedPanes().map((p) => p.id)) ?? /* @__PURE__ */ new Map();
+    this.scene.drawingSlices = mergeSlices(
+      this.indicatorSlices.prepare(this.scene, this.coords, this.theme, this.dataCanvas),
+      this.userDrawings?.prepareSlices(this.scene.orderedPanes().map((p) => p.id)) ?? /* @__PURE__ */ new Map()
+    );
     this.backdropRenderer.render(this.scene, this.coords, this.theme, gridAlpha);
     this.backend.render(this.scene, this.coords, this.theme);
     this.chrome.render(this.scene, this.coords, this.theme, this.axisSurface());
@@ -34648,7 +35604,11 @@ var NativeRenderer = class {
       }
       const models = this.scene.indicatorsForPane(pane.id);
       const masterModels = models.filter((m) => m.ownScale !== true);
-      const dr = this.chrome.paneDrawingsRange(masterModels, this.scene, pane === pricePane, vr);
+      let dr = this.chrome.paneDrawingsRange(masterModels, this.scene, pane === pricePane, vr);
+      if (pane === pricePane) {
+        const or = overlaySeriesRange(this.scene.indicators.values(), i0, i1, (id) => this.scene.offsetOf(id));
+        if (or) dr = dr ? { min: Math.min(dr.min, or.min), max: Math.max(dr.max, or.max) } : or;
+      }
       const includeCandles = pane.kind === "price" && !this.scene.candlesHidden;
       pane.scaleTarget = computePaneScale(masterModels, this.bars, includeCandles, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id));
       pane.percentBaseline = pane.kind === "price" ? this.bars[i0]?.close ?? 0 : this.firstVisibleValue(masterModels, i0);
@@ -34922,6 +35882,7 @@ var NativeRenderer = class {
     for (const m of models) {
       const off = this.scene.offsetOf(m.id);
       for (const s of m.series) {
+        if (s.overlay === true) continue;
         if (isLineLikeSeries(s)) {
           const v = s.points[i0 - off]?.value;
           if (v != null && Number.isFinite(v)) return v;
@@ -34942,27 +35903,6 @@ var NativeRenderer = class {
     }
     return maxVol;
   }
-  /** Create/update/destroy an indicator's DOM table overlay (anchored off real pane geometry). */
-  syncTables(model) {
-    const tables = model.tables ?? [];
-    let overlay = this.tableOverlays.get(model.id);
-    if (tables.length === 0) {
-      if (overlay) {
-        overlay.destroy();
-        this.tableOverlays.delete(model.id);
-      }
-      return;
-    }
-    if (!overlay) {
-      overlay = new TableOverlay(this.plot, this.theme, (id) => this.paneBoundsFor(id));
-      overlay.setVisible(this.loadingEl === null);
-      this.tableOverlays.set(model.id, overlay);
-    }
-    overlay.update(tables);
-  }
-  repositionTables() {
-    for (const overlay of this.tableOverlays.values()) overlay.reposition();
-  }
   layoutPanes() {
     const panes = this.scene.orderedPanes();
     const dataHeight = this.coords.height;
@@ -35013,6 +35953,7 @@ var NativeRenderer = class {
     const visible = maxPane ? [maxPane] : this.scene.orderedPanes().filter((p) => !p.collapsed);
     const paneBottom = visible.length ? Math.max(...visible.map((p) => p.bounds.top + p.bounds.height)) : dataHeight;
     this.scrollBtnBottomPx = SCROLL_BTN_BOTTOM + Math.max(0, dataHeight - paneBottom);
+    this.mountContainer?.style.setProperty("--vela-bottom-gutter", `${TIME_AXIS_H + Math.max(0, dataHeight - paneBottom)}px`);
     this.scrollBtnRightPx = this.rightAxisW + SCROLL_BTN_RIGHT_INSET;
     if (this.scrollButton) {
       this.scrollButton.style.bottom = `${this.scrollBtnBottomPx}px`;
@@ -35105,30 +36046,33 @@ var NativeRenderer = class {
     if (w <= 0 || h <= 0) return;
     const dpr = window.devicePixelRatio || 1;
     this.plot.style.left = `${this.toolbarGutter}px`;
-    const pw = Math.max(1, w - this.toolbarGutter);
-    const ph = h;
-    this.dataCanvas.width = Math.round(pw * dpr);
-    this.dataCanvas.height = Math.round(ph * dpr);
-    this.backdropCanvas.width = this.dataCanvas.width;
-    this.backdropCanvas.height = this.dataCanvas.height;
-    this.volumeCanvas.width = this.dataCanvas.width;
-    this.volumeCanvas.height = this.dataCanvas.height;
-    for (const l of this.extLayers) {
-      l.canvas.width = this.dataCanvas.width;
-      l.canvas.height = this.dataCanvas.height;
-    }
-    this.vpvrCanvas.width = this.dataCanvas.width;
-    this.vpvrCanvas.height = this.dataCanvas.height;
-    this.chromeCanvas.width = this.dataCanvas.width;
-    this.chromeCanvas.height = this.dataCanvas.height;
-    this.drawingsCanvas.width = this.dataCanvas.width;
-    this.drawingsCanvas.height = this.dataCanvas.height;
-    this.cursorCanvas.width = this.dataCanvas.width;
-    this.cursorCanvas.height = this.dataCanvas.height;
+    const rect = this.plot.getBoundingClientRect();
+    let bw = Math.max(1, Math.round(rect.width * dpr));
+    let bh = Math.max(1, Math.round(rect.height * dpr));
+    const dev = this.plotDeviceSize;
+    if (dev && Math.abs(dev.width - rect.width * dpr) <= 1 && Math.abs(dev.height - rect.height * dpr) <= 1) {
+      bw = Math.max(1, dev.width);
+      bh = Math.max(1, dev.height);
+    }
+    const pw = bw / dpr;
+    const ph = bh / dpr;
+    const size = (canvas) => {
+      canvas.width = bw;
+      canvas.height = bh;
+      canvas.style.width = `${pw}px`;
+      canvas.style.height = `${ph}px`;
+    };
+    size(this.dataCanvas);
+    size(this.backdropCanvas);
+    size(this.volumeCanvas);
+    for (const l of this.extLayers) size(l.canvas);
+    size(this.vpvrCanvas);
+    size(this.chromeCanvas);
+    size(this.drawingsCanvas);
+    size(this.cursorCanvas);
     this.coords.setSize(Math.max(1, pw - this.rightAxisW), Math.max(1, ph - TIME_AXIS_H), dpr);
     this.scene.crosshair = null;
     this.layoutPanes();
-    this.repositionTables();
     this.userDrawings?.onResize();
     if (!this.didInitialFit && this.coords.barCount > 0) {
       this.fitContent();
@@ -35794,45 +36738,24 @@ var CSS21 = `
 }
 .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}; }
+/* Market status badge \u2014 a kit callout bubble (icon-only 16px circle, label on hover
+ * via the kit tooltip); the session tint is applied per status in setMarketStatus. */
+.vela-statusline .vela-sl-market { align-self: center; }
 .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); }
+/* Stack the TOP pane's legend below the status line (lower study panes stay put).
+ * The renderer marks whichever legend sits at the plot's top edge \u2014 the price pane
+ * normally, or a maximized study pane filling the plot \u2014 so the legend never merges
+ * with the status line whichever pane owns the top. 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 attribute selector here would shift every
+ * chart on the page, including statusline-less ones. */
+.vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(26px); }
 /* Mobile: two-line chip \u2014 logo / symbol / meta / market status on one aligned row, the
  * bar change on the next. Full O/H/L/C stays hidden (too dense on a phone-width plot).
  * GRID, not a wrapping flexbox: an absolutely positioned wrapping flex container sizes
@@ -35868,7 +36791,7 @@ var CSS21 = `
     font-size: var(--vela-font-size-sm);
     line-height: 1.2;
 }
-[data-layout='mobile'] .vela-has-statusline [data-vela-pane='price'] { transform: translateY(40px); }
+[data-layout='mobile'] .vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(40px); }
 /* FIT mode (multi-chart cells \u2014 see setFitMode): the line never wraps; segments that
  * don't fit are HIDDEN by fit() (change first, then meta, then the market badge), so
  * overflow:hidden only guards the transient between a resize and the next measure.
@@ -35885,7 +36808,7 @@ var CSS21 = `
     padding-left: 0;
 }
 /* One row again \u2014 the mobile two-line shift doesn't apply in fit mode. */
-[data-layout='mobile'] .vela-sl-fit-host.vela-has-statusline [data-vela-pane='price'] { transform: translateY(26px); }
+[data-layout='mobile'] .vela-sl-fit-host.vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(26px); }
 `;
 function baseOfTicker(ticker) {
   return ticker.replace(/[-_/]?(USDT|USDC|USD1|USDS|BUSD|USD|EUR|PERP)$/i, "") || ticker;
@@ -35897,6 +36820,13 @@ var MARKET_LABELS = {
   closed: "Market Closed",
   holiday: "Market Holiday"
 };
+var MARKET_INKS = {
+  open: "var(--vela-up)",
+  pre: SESSION_PRE,
+  post: SESSION_POST,
+  closed: SESSION_OFF,
+  holiday: SESSION_OFF
+};
 function statuslineInkOf(renderer, priceStyle) {
   const cfg = renderer.getConfig();
   const c = (v) => typeof v === "string" ? v : null;
@@ -35955,8 +36885,15 @@ var Statusline = class {
     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.marketBubble = new CalloutBubble({
+      icon: "market-open",
+      background: `color-mix(in srgb, ${MARKET_INKS.open} 20%, transparent)`,
+      color: MARKET_INKS.open,
+      label: MARKET_LABELS.open,
+      host
+    });
+    this.marketEl = this.marketBubble.el;
+    this.marketEl.classList.add("vela-sl-market");
     this.ohlcEl = doc.createElement("span");
     this.ohlcEl.className = "vela-sl-ohlc";
     this.changeEl = doc.createElement("span");
@@ -36044,8 +36981,13 @@ var Statusline = class {
    *  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]);
+    const ink = MARKET_INKS[status];
+    this.marketBubble.set({
+      icon: `market-${status}`,
+      background: `color-mix(in srgb, ${ink} 20%, transparent)`,
+      color: ink,
+      label: MARKET_LABELS[status]
+    });
     this.marketTip.setContent(MARKET_LABELS[status]);
   }
   setPartVisible(part, visible) {
@@ -36078,6 +37020,7 @@ var Statusline = class {
     this.fitRO?.disconnect();
     this.fitRO = null;
     this.marketTip.destroy();
+    this.marketBubble.destroy();
     this.host.classList.remove("vela-has-statusline", "vela-sl-fit-host");
     this.el.remove();
   }
@@ -36304,6 +37247,8 @@ var SessionShadingTracker = class {
     this.spec = null;
     this.ready = false;
     this.session = "regular";
+    /** Whether one bar is shorter than a civil day — only then do pre/post bars exist. */
+    this.intraday = false;
     this.covered = null;
     /** The newest range seen — viewport moves during metadata resolution (a load's fit
      *  animation) must not be lost, so the resolution always expands the LATEST range. */
@@ -36316,6 +37261,8 @@ var SessionShadingTracker = class {
     this.spec = null;
     this.covered = null;
     this.session = opts.session;
+    const tfMs = timeframeMs(opts.timeframe);
+    this.intraday = Number.isFinite(tfMs) && tfMs < DAY_MS2;
     this.lastRange = opts.range;
     void data.symbolInfo(symbol).catch(() => void 0).then((si) => {
       if (my !== this.epoch) return;
@@ -36343,7 +37290,7 @@ var SessionShadingTracker = class {
       if (force) this.onZones(null);
       return;
     }
-    if (this.session !== "extended") {
+    if (this.session !== "extended" || !this.intraday) {
       if (force) this.onZones({ pre: [], post: [] });
       return;
     }
@@ -36444,9 +37391,168 @@ var Watermark = class {
   }
 };
 
+// src/widget/cell-controls.ts
+var CELL_CONTROLS_PROXIMITY_PX = 120;
+var TIME_AXIS_H2 = 22;
+var CONTROLS_BOTTOM_PX = TIME_AXIS_H2 + 12;
+var CLUSTER_H2 = 24;
+var CLUSTER_PILL2 = "rgba(0,0,0,0.65)";
+var STYLE_ID26 = "vela-cell-controls";
+var CSS23 = `
+.vela-cc-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--vela-radius-sm);background:transparent;line-height:0;font-size:12px;color:var(--vela-fg-muted);cursor:pointer;}
+.vela-cc-btn svg{display:block;}
+.vela-cc-btn:hover{background:var(--vela-active);color:var(--vela-fg-bright);}
+.vela-cc-on,.vela-cc-on:hover{background:var(--vela-selected-bg);color:var(--vela-selected-fg);}
+.vela-cc-grip{cursor:grab;touch-action:none;}
+.vela-cc-grip:active{cursor:grabbing;}
+`;
+function nearBottomCenter(x, y, width, height, proximityPx = CELL_CONTROLS_PROXIMITY_PX) {
+  const cx = width / 2;
+  const cy = height - CONTROLS_BOTTOM_PX - CLUSTER_H2 / 2;
+  return Math.hypot(x - cx, y - cy) <= proximityPx;
+}
+var CellControls = class {
+  constructor(host, deps) {
+    this.host = host;
+    this.deps = deps;
+    this.near = false;
+    /** A grip drag is underway — the proximity reveal must not hide the cluster
+     *  while captured pointer moves sweep across the whole grid. */
+    this.dragging = false;
+    /** Mobile: the proximity reveal is meaningless without a cursor — the mobile
+     *  bar's maximize stop replaces the cluster. */
+    this.suspended = false;
+    this.onHostMove = (e) => {
+      if (this.suspended) return;
+      if (this.dragging) return;
+      const rect = this.host.getBoundingClientRect();
+      this.setNear(nearBottomCenter(e.clientX - rect.left, e.clientY - rect.top, rect.width, rect.height));
+    };
+    this.onHostLeave = () => {
+      if (this.dragging) return;
+      this.setNear(false);
+    };
+    injectStyles(STYLE_ID26, CSS23, host.ownerDocument);
+    this.glider = new Glider(deps.chart);
+    this.root = host.ownerDocument.createElement("div");
+    Object.assign(this.root.style, {
+      position: "absolute",
+      left: "50%",
+      bottom: `${CONTROLS_BOTTOM_PX}px`,
+      transform: "translateX(-50%)",
+      zIndex: "6",
+      display: "none",
+      // revealed by cursor proximity (onHostMove)
+      gap: "2px",
+      padding: "2px",
+      borderRadius: "var(--vela-radius-md)",
+      background: CLUSTER_PILL2,
+      pointerEvents: "auto"
+    });
+    this.host.addEventListener("pointermove", this.onHostMove);
+    this.host.addEventListener("pointerleave", this.onHostLeave);
+    this.host.appendChild(this.root);
+    this.refresh();
+  }
+  /** Rebuild the buttons (the multi-cell gate or the maximized state changed). */
+  refresh() {
+    this.root.textContent = "";
+    const multi = this.deps.multiCell();
+    const maximized = multi && this.deps.isMaximized();
+    if (multi && !maximized) this.root.appendChild(this.makeGrip());
+    this.root.appendChild(this.button("minus", "Zoom out", () => this.glider.zoom(ZOOM_OUT)));
+    this.root.appendChild(this.button("plus", "Zoom in", () => this.glider.zoom(ZOOM_IN)));
+    if (multi) {
+      this.root.appendChild(
+        this.button(maximized ? "restore" : "maximize", maximized ? "Restore layout" : "Maximize chart", () => this.deps.toggleMaximize(), {
+          // The maximized state reads as an inverse chip (white-on-dark, dark-on-light),
+          // the same active-state affordance as a collapsed pane's expand button.
+          selected: maximized
+        })
+      );
+    }
+    this.root.appendChild(
+      this.button("reset", "Reset chart", () => {
+        this.glider.stop();
+        this.deps.reset();
+      })
+    );
+  }
+  button(iconId, title, onClick, opts = {}) {
+    const b = this.host.ownerDocument.createElement("button");
+    b.type = "button";
+    b.title = title;
+    b.setAttribute("aria-label", title);
+    b.className = opts.selected === true ? "vela-cc-btn vela-cc-on" : "vela-cc-btn";
+    b.innerHTML = icon(iconId);
+    b.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onClick();
+    });
+    return b;
+  }
+  /** The drag handle (2×3 dot grip): press and drag onto another cell to trade
+   *  slots with it. The preview highlight follows the pointer; releasing outside
+   *  any other cell cancels. */
+  makeGrip() {
+    const b = this.host.ownerDocument.createElement("button");
+    b.type = "button";
+    b.title = "Drag to move chart";
+    b.setAttribute("aria-label", "Drag to move chart");
+    b.className = "vela-cc-btn vela-cc-grip";
+    b.innerHTML = icon("grip");
+    b.addEventListener("pointerdown", (e) => this.onGripDown(b, e));
+    return b;
+  }
+  onGripDown(btn2, e) {
+    if (e.button !== 0 && e.pointerType === "mouse") return;
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      btn2.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    this.dragging = true;
+    let target = null;
+    const move = (ev) => {
+      target = this.deps.dragTargetAt(ev.clientX, ev.clientY);
+      this.deps.previewDrop(target);
+    };
+    const finish = (commit) => () => {
+      this.dragging = false;
+      this.deps.previewDrop(null);
+      btn2.removeEventListener("pointermove", move);
+      btn2.removeEventListener("pointerup", onUp);
+      btn2.removeEventListener("pointercancel", onCancel);
+      if (commit && target != null) this.deps.dropOn(target);
+    };
+    const onUp = finish(true);
+    const onCancel = finish(false);
+    btn2.addEventListener("pointermove", move);
+    btn2.addEventListener("pointerup", onUp);
+    btn2.addEventListener("pointercancel", onCancel);
+  }
+  /** Mobile flips the cluster off entirely (and hides it if currently revealed). */
+  setSuspended(on) {
+    this.suspended = on;
+    if (on) this.setNear(false);
+  }
+  setNear(near) {
+    if (near === this.near) return;
+    this.near = near;
+    this.root.style.display = near ? "flex" : "none";
+  }
+  destroy() {
+    this.glider.stop();
+    this.host.removeEventListener("pointermove", this.onHostMove);
+    this.host.removeEventListener("pointerleave", this.onHostLeave);
+    this.root.remove();
+  }
+};
+
 // src/widget/context-menu.ts
 var PRICE_AXIS_W = 60;
-var TIME_AXIS_H2 = 26;
+var TIME_AXIS_H3 = 26;
 var ChartContextMenu = class {
   constructor(host, cbs) {
     this.cbs = cbs;
@@ -36485,7 +37591,7 @@ var ChartContextMenu = class {
   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_H2) return "time-axis";
+    if (e.clientY - rect.top > rect.height - TIME_AXIS_H3) return "time-axis";
     return "body";
   }
   /** The pane under the pointer, so every pane's price scale has its own menu. */
@@ -36758,6 +37864,7 @@ var ChartCell = class {
     this.inner.renderer.set("attribution", false);
     this.inner.renderer.set("dialogHost", deps.dialogHost);
     this.inner.renderer.setLegendActions(legendActionsProviderFor(this.inner, () => deps.context()));
+    this.inner.renderer.setLegendCallouts(legendCalloutsProviderFor(this.inner, () => deps.context()));
     if (this.inner.renderer.supports("historyChords")) this.inner.renderer.set("historyChords", false);
     this.history.onChart(this.inner);
     this.inner.renderer.onConfigChanged(() => {
@@ -36818,11 +37925,18 @@ var ChartCell = class {
       if (this.inner && this.state.symbol) this.marketStatus?.track(this.inner.data, this.state.symbol);
     });
     this.syncStatuslineColors();
+    this.cellControls = new CellControls(this.host, {
+      chart: () => this.inner,
+      reset: () => this.resetView(),
+      multiCell: () => deps.multiCell(),
+      isMaximized: () => deps.isMaximized(id),
+      toggleMaximize: () => deps.toggleMaximize(id),
+      dragTargetAt: (x, y) => deps.cellDragTarget(id, x, y),
+      previewDrop: (target) => deps.previewDropTarget(target),
+      dropOn: (target) => deps.dropCell(id, target)
+    });
     this.contextMenu = new ChartContextMenu(this.host, {
-      resetView: () => {
-        this.inner?.renderer.set("autoScale", true);
-        this.inner?.setVisibleRangePreset("ALL");
-      },
+      resetView: () => this.resetView(),
       timezone: () => this.deps.timezone(),
       setTimezone: (zone) => this.deps.setTimezone(zone),
       // Right-clicking activates the cell first (capture-phase pointerdown), so the
@@ -36874,20 +37988,30 @@ var ChartCell = class {
     this.refreshNativeCatalog();
     this.pushSettingsSections();
     this.offMarket = this.inner.on("market:changed", ({ symbol: symbol2, timeframe }) => {
-      this.state.symbol = symbol2;
-      this.state.provider = parseSymbol(symbol2).provider ?? void 0;
-      this.state.timeframe = timeframe;
-      this.state.session = normalizeSession(this.inner?.market.session);
-      this.watermark?.update(symbol2, timeframe);
-      this.statusline?.setSymbol(symbol2);
-      this.statusline?.setMeta(timeframe, this.inner?.data.displayPrefix(symbol2) ?? this.state.provider ?? "");
-      if (this.inner) this.statusline?.onChart(this.inner);
+      this.projectMarket(symbol2, timeframe);
       this.refreshNativeCatalog();
       this.refreshSessionAvailable();
       if (this.inner) this.marketStatus?.track(this.inner.data, symbol2);
       this.deps.onMarketChanged(this.id);
     });
   }
+  /**
+   * Project a market identity into the cell state and its display overlays (watermark,
+   * statusline), WITHOUT the data-dependent bookkeeping. Runs twice per user pick: once
+   * optimistically from the cell setters — the labels reflect the pick immediately, not
+   * after the bars load — and again from `market:changed` (the committed pass, and the
+   * only pass for host `chart.setMarket` calls). Idempotent, so the double run converges.
+   */
+  projectMarket(symbol, timeframe) {
+    this.state.symbol = symbol;
+    this.state.provider = parseSymbol(symbol).provider ?? void 0;
+    this.state.timeframe = timeframe;
+    this.state.session = normalizeSession(this.inner?.market.session);
+    this.watermark?.update(symbol, timeframe);
+    this.statusline?.setSymbol(symbol);
+    this.statusline?.setMeta(timeframe, this.inner?.data.displayPrefix(symbol) ?? this.state.provider ?? "");
+    if (this.inner) this.statusline?.onChart(this.inner);
+  }
   /**
    * Does this cell's market HAVE sessions (RTH/ETH meaningful)? Derived from the
    * symbol's own metadata (`syminfo.session !== '24x7'`), asynchronously — the
@@ -36933,7 +38057,7 @@ var ChartCell = class {
     const requestedSpan = Math.max(this.state.bars ?? 1e3, this.rangeBars) * timeframeMs(this.state.timeframe ?? "60");
     const fallbackSpan = Number.isFinite(requestedSpan) ? Math.max(3 * 864e5, requestedSpan) : 3 * 864e5;
     const range = chart.getVisibleRange() ?? { from: now - fallbackSpan, to: now };
-    this.sessionShading.track(chart.data, symbol, { session: this.session, range });
+    this.sessionShading.track(chart.data, symbol, { session: this.session, timeframe: this.timeframe, range });
   }
   /** The session-shade colors live in the renderer CONFIG (persisted with it, edited
    *  live by the dialog swatch) — the cell only proxies them into its settings rows. */
@@ -37122,17 +38246,23 @@ var ChartCell = class {
   get indicatorCount() {
     return this.instances.length + this.nativeCatalog.filter((n) => n.present).length;
   }
-  /** Switch this cell's market in place (the chart instance survives). */
+  /** Switch this cell's market in place (the chart instance survives). The projection
+   *  is OPTIMISTIC — labels and chrome show the pick before the bars load; it follows
+   *  the setMarket call so the statusline reads the already-blanked chart. */
   setSymbol(symbol) {
     if (!this.inner || symbol === this.symbol) return;
     this.unresolvedToasted = null;
     void this.inner.setMarket({ symbol });
+    this.projectMarket(symbol, this.timeframe);
+    this.deps.onMarketChanged(this.id);
   }
   setTimeframe(timeframe) {
     if (!this.inner || timeframe === this.timeframe) return;
     this.activeRangeId = null;
     this.rangeBars = 0;
     void this.inner.setMarket({ timeframe, bars: this.state.bars });
+    this.projectMarket(this.symbol, timeframe);
+    this.deps.onMarketChanged(this.id);
   }
   /** Applied live (renderer feature) — no reload. */
   setPriceStyle(style) {
@@ -37180,6 +38310,20 @@ var ChartCell = class {
       this.inner.setVisibleRangePreset(preset.preset);
     }
   }
+  /** Reset this cell's view: re-enable auto scale and frame the full history —
+   *  the same action the chart context menu offers. */
+  resetView() {
+    this.inner?.renderer.set("autoScale", true);
+    this.inner?.setVisibleRangePreset("ALL");
+  }
+  /** Rebuild the view-controls cluster (the maximize gate or state changed). */
+  refreshControls() {
+    this.cellControls.refresh();
+  }
+  /** Mobile flips the per-cell cluster off (the shell's mobile bar replaces it). */
+  setControlsSuspended(on) {
+    this.cellControls.setSuspended(on);
+  }
   /** Make this cell the active one and put keyboard focus on its chart surface. */
   focus() {
     this.deps.activate(this.id);
@@ -37493,6 +38637,7 @@ var ChartCell = class {
   destroy() {
     this.destroyed = true;
     this.offMarket();
+    this.cellControls.destroy();
     this.contextMenu.destroy();
     this.history.destroy();
     this.marketStatus?.stop();
@@ -37785,10 +38930,10 @@ var SplitterLayer = class {
 var DEFAULT_TIMEFRAMES = ["1", "5", "15", "60", "240", "D", "W"];
 var GAP_PX = 2;
 var POOL_CAP = 16;
-var TIME_AXIS_H3 = 22;
+var TIME_AXIS_H4 = 22;
 var ALERT_CAP = 50;
-var STYLE_ID26 = "vela-workspace";
-var CSS23 = `
+var STYLE_ID27 = "vela-workspace";
+var CSS24 = `
 .vela-workspace { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--vela-bg); }
 .vela-ws-main { position: relative; display: flex; flex-direction: row; flex: 1 1 auto; min-height: 0; }
 .vela-ws-toolbar { position: relative; flex: none; }
@@ -37815,6 +38960,21 @@ var CSS23 = `
 /* Mobile: the docked drawing-toolbar column would eat a phone-width grid \u2014 the shell's
    drawings drawer + on-chart pill replace it (same policy as the widget's in-chart bar). */
 [data-layout='mobile'] .vela-ws-toolbar { display: none; }
+/* A maximized cell owns the whole grid: the splitter strips have no seams to grab and
+   the active ring would just outline the only visible chart \u2014 both are noise here. */
+.vela-ws-grid[data-maximized='1'] .vela-ws-splitter { display: none; }
+.vela-ws-grid[data-maximized='1'] .vela-cell[data-active='1']::after { display: none; }
+/* Drop-target preview while a cell's drag handle is held: a dashed ring + the same
+   soft wash the splitter hover uses, over the chart, inert to the pointer. */
+.vela-cell[data-drop-target='1']::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 2px dashed var(--vela-fg-bright);
+    background: var(--vela-separator-hover-band);
+    pointer-events: none;
+    z-index: 11;
+}
 `;
 registerIcon("layout", svg16('<rect x="1.5" y="1.5" width="13" height="13" rx="1.5"/><path d="M8 1.5v13M1.5 8h13"/>'));
 function declaredOrder(cells) {
@@ -37844,6 +39004,9 @@ var VelaWorkspace = class {
      *  slots beyond the list get auto identities. Grows, never reorders. */
     this.order = [];
     this.activeId = null;
+    /** The cell maximized over the whole grid (null = normal grid). TRANSIENT view
+     *  state — never persisted; any structural change (layout, applyState) restores. */
+    this.maximizedId = null;
     this.cellBackend = "auto";
     this.destroyed = false;
     this.shortcutsHelp = null;
@@ -37948,7 +39111,7 @@ var VelaWorkspace = class {
     this.order = boot?.charts ? boot.charts.map((c) => c.id) : declaredOrder(opts.cells);
     const bootActive = boot?.activeCellId ?? null;
     const doc = hostEl.ownerDocument;
-    injectStyles(STYLE_ID26, CSS23, doc);
+    injectStyles(STYLE_ID27, CSS24, doc);
     this.root = doc.createElement("div");
     this.root.className = "vela-workspace";
     ensureUIHost(this.root, resolveTheme(opts.theme));
@@ -38058,7 +39221,11 @@ var VelaWorkspace = class {
     if (attribution !== false) {
       const background = resolveTheme(opts.theme).background;
       const mark = typeof attribution === "string" && attribution.trim() ? createCustomMark(doc, attribution, background) : createAttributionMark(doc, background);
-      Object.assign(mark.style, { left: "12px", bottom: `${TIME_AXIS_H3 + 10}px`, zIndex: "11" });
+      Object.assign(mark.style, {
+        left: "calc(var(--vela-toolbar-gutter, 0px) + 12px)",
+        bottom: `calc(var(--vela-bottom-gutter, ${TIME_AXIS_H4}px) + 10px)`,
+        zIndex: "11"
+      });
       this.gridEl.appendChild(mark);
       this.attributionMark = mark;
     }
@@ -38124,6 +39291,9 @@ var VelaWorkspace = class {
       ...topbarHas(this.topbarComp, "indicators") && (picker || this.indicatorsOverride) ? { onIndicatorsClick: this.indicatorsOverride ? () => this.runOverride(this.indicatorsOverride) : () => picker.open() } : {},
       getContext: () => this.context(),
       ...this.drawingsEnabled ? { onDrawingsClick: () => this.openDrawingsDrawer() } : {},
+      // Multi-chart only: the stop that isolates the ACTIVE chart (the
+      // per-cell hover cluster has no cursor to reveal it on mobile).
+      ...this.monoLayout ? {} : { onMaximizeClick: () => this.toggleMobileMaximize() },
       onMoreClick: () => this.openMoreDrawer(),
       onSettingsClick: () => this.active.chart.renderer.openSettings()
     }) : null;
@@ -38238,7 +39408,10 @@ var VelaWorkspace = class {
     this.topbar.renderActions();
     this.mobileBar?.renderActions();
     this.dock.refresh();
-    for (const cell of this.cells()) cell.chart.renderer.setLegendActions(legendActionsProviderFor(cell.chart, () => this.context()));
+    for (const cell of this.cells()) {
+      cell.chart.renderer.setLegendActions(legendActionsProviderFor(cell.chart, () => this.context()));
+      cell.chart.renderer.setLegendCallouts(legendCalloutsProviderFor(cell.chart, () => this.context()));
+    }
   }
   // ── state surface (the SDK's read/restore of the whole grid's config + content) ──
   /**
@@ -38327,7 +39500,9 @@ var VelaWorkspace = class {
       this.pool.clear();
       for (const { id, ...cs } of st.charts.slice(liveCount)) this.pool.set(id, cs);
       this.order = st.charts.map((c) => c.id);
+      this.clearMaximized();
       this.applyGrid();
+      this.refreshCellControls();
       const nextActive2 = st.activeCellId && this.cellsById.has(st.activeCellId) ? st.activeCellId : this.order[0] ?? null;
       if (nextActive2 === this.activeId) this.projectActiveCell();
       else this.setActiveCell(nextActive2);
@@ -38353,6 +39528,7 @@ var VelaWorkspace = class {
     const def = this.monoLayout ? null : ensureLayout(st.layout);
     if (def) this.def = def;
     this.cellBackend = this.backendFor(this.def);
+    this.clearMaximized();
     this.applyGrid();
     this.buildCells();
     this.syncCellPresentation();
@@ -38416,6 +39592,7 @@ var VelaWorkspace = class {
   setLayout(layout) {
     if (this.destroyed) return;
     if (this.monoLayout) return;
+    this.clearMaximized();
     const next = this.resolveLayout(layout);
     const nextBackend = this.backendFor(next);
     const rebuildAll = nextBackend !== this.cellBackend;
@@ -38436,6 +39613,7 @@ var VelaWorkspace = class {
     this.buildCells();
     this.alignNewCellStyles(preexisting);
     this.syncCellPresentation();
+    this.refreshCellControls();
     this.topbar.setLayout(next.id);
     const nextActive = activeAfterLayout(this.activeId, this.order.slice(0, next.cells.length));
     if (nextActive === this.activeId) this.projectActiveCell();
@@ -38444,6 +39622,67 @@ var VelaWorkspace = class {
     this.events.emit("layout:changed", { layout: next.id });
     this.markStateDirty();
   }
+  /** The identity of the cell maximized over the whole grid, or null. */
+  get maximizedCell() {
+    return this.maximizedId;
+  }
+  /**
+   * Maximize one cell over the whole grid, or restore the layout with `null`. Pure
+   * presentation: the other cells stay alive underneath — charts, subscriptions and
+   * state untouched — so restoring is instant. The maximized cell becomes the active
+   * one. Transient view state (also reachable from each cell's bottom-center view
+   * cluster): switching layouts or applying a state document restores the grid.
+   */
+  maximizeCell(id) {
+    if (this.destroyed) return;
+    if (id != null && (!this.cellsById.has(id) || this.def.cells.length <= 1)) return;
+    if (id === this.maximizedId) return;
+    this.maximizedId = id;
+    if (id) this.setActiveCell(id);
+    this.applyGrid();
+    this.refreshCellControls();
+    this.syncMobileMaximize();
+    this.events.emit("cell:maximized", { id });
+  }
+  /** The mobile bar's maximize stop: one press isolates the ACTIVE chart over the
+   *  grid; while something is already isolated — the chart, or a pane inside it
+   *  (mobile's double-tap) — the press restores that instead. Every branch re-syncs
+   *  the stop on its own (`maximizeCell` directly, `panes.maximize` via its
+   *  synchronous `pane:changed`). */
+  toggleMobileMaximize() {
+    const cell = this.activeId ? this.cellsById.get(this.activeId) : void 0;
+    if (!cell) return;
+    if (this.maximizedId) this.maximizeCell(null);
+    else if (cell.chart.panes.list().some((p) => p.maximized)) cell.chart.panes.maximize(null);
+    else this.maximizeCell(cell.id);
+  }
+  /** Keep the mobile bar's maximize stop truthful: lit (inverse chip, restore
+   *  glyph) while the active chart covers the grid OR one of its panes is
+   *  maximized — the state a double-tap toggles is otherwise invisible on mobile. */
+  syncMobileMaximize() {
+    if (!this.mobileBar) return;
+    const cell = this.activeId ? this.cellsById.get(this.activeId) : void 0;
+    const paneMax = cell ? cell.chart.panes.list().some((p) => p.maximized) : false;
+    this.mobileBar.setMaximizeActive(this.maximizedId != null || paneMax);
+  }
+  /**
+   * Trade the SLOTS of two live cells — the grid arrangement changes, the cells
+   * themselves (charts, indicators, drawings, the active flag) stay untouched.
+   * What each cell's drag handle commits; also callable directly by hosts.
+   */
+  swapCells(a, b) {
+    if (this.destroyed || a === b) return;
+    const i = this.order.indexOf(a);
+    const j = this.order.indexOf(b);
+    if (i < 0 || j < 0 || !this.cellsById.has(a) || !this.cellsById.has(b)) return;
+    [this.order[i], this.order[j]] = [this.order[j], this.order[i]];
+    for (const [k] of this.def.cells.entries()) {
+      const host = this.cellsById.get(this.order[k] ?? "")?.host;
+      if (host) this.gridEl.appendChild(host);
+    }
+    this.applyGrid();
+    this.markStateDirty();
+  }
   resize() {
     this.splitters.layout();
   }
@@ -38513,6 +39752,7 @@ var VelaWorkspace = class {
     this.mobileBar?.renderActions();
     this.mobileBar?.setSymbol(cell.symbol);
     this.mobileBar?.setTimeframe(cell.timeframe);
+    this.syncMobileMaximize();
     this.drawingPill?.onChart(cell.chart);
     const pushHistory = () => this.topbar.setHistoryState(cell.history.canUndo, cell.history.canRedo);
     this.historyUnsub?.();
@@ -38602,8 +39842,78 @@ var VelaWorkspace = class {
       const host = this.cellsById.get(this.order[i] ?? "")?.host;
       if (host) host.style.gridArea = perCell[slot.id]?.gridArea ?? "";
     }
+    this.applyMaximizePresentation();
+    this.mountAttributionMark();
     this.splitters.layout();
   }
+  /** Overlay the maximize presentation on the freshly applied grid: EVERY cell spans
+   *  the full track grid — the maximized one on top, the siblings invisible beneath
+   *  it (their charts stay alive — restoring is instant). The siblings must span too:
+   *  left in their slots they would auto-flow into implicit zero-height rows, whose
+   *  gaps steal height from the maximized cell and collapse their renderers to 0.
+   *  The splitter strips and the active ring hide via the `data-maximized` rules. */
+  applyMaximizePresentation() {
+    const maxId = this.maximizedId;
+    if (maxId) this.gridEl.dataset.maximized = "1";
+    else delete this.gridEl.dataset.maximized;
+    for (const [id, cell] of this.cellsById) {
+      const style = cell.host.style;
+      if (maxId) style.gridArea = "1 / 1 / -1 / -1";
+      style.zIndex = maxId && id === maxId ? "5" : "";
+      style.visibility = maxId && id !== maxId ? "hidden" : "";
+    }
+  }
+  /** Rebuild every cell's view cluster (the maximize gate or state changed). */
+  refreshCellControls() {
+    for (const cell of this.cellsById.values()) cell.refreshControls();
+  }
+  /** Drop the transient maximize on a structural change (layout switch, state
+   *  document) — WITH the event, so hosts tracking `cell:maximized` never drift
+   *  from `maximizedCell`. The caller's own grid re-apply paints the restore. */
+  clearMaximized() {
+    if (this.maximizedId == null) return;
+    this.maximizedId = null;
+    this.events.emit("cell:maximized", { id: null });
+  }
+  /** The live cell under a viewport point, excluding `excludeId` and any host a
+   *  maximize has hidden — the drag handle's hit-test. */
+  cellAtPoint(x, y, excludeId) {
+    for (const [id, cell] of this.cellsById) {
+      if (id === excludeId || cell.host.style.visibility === "hidden") continue;
+      const r = cell.host.getBoundingClientRect();
+      if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return id;
+    }
+    return null;
+  }
+  /** Mark one cell as the live drop target of a grip drag (null clears all) —
+   *  the `data-drop-target` stylesheet rule paints the dashed preview ring. */
+  setDropTarget(id) {
+    for (const [cid, cell] of this.cellsById) {
+      if (cid === id) cell.host.dataset.dropTarget = "1";
+      else delete cell.host.dataset.dropTarget;
+    }
+  }
+  /** The cell whose bottom-left corner the grid's attribution mark floats in — the
+   *  maximized cell while one covers the grid, else the bottom-left slot's cell. */
+  bottomLeftCell() {
+    if (this.maximizedId) return this.cellsById.get(this.maximizedId);
+    const grid = occupancyGrid(this.def);
+    const slot = grid[grid.length - 1]?.[0];
+    const idx = this.def.cells.findIndex((c) => (c.area ?? c.id) === slot);
+    return this.cellsById.get(this.order[idx >= 0 ? idx : 0] ?? "");
+  }
+  /** Keep the shared attribution mark inside the BOTTOM-LEFT visible cell: its
+   *  offsets ride that cell's renderer-published `--vela-bottom-gutter` /
+   *  `--vela-toolbar-gutter`, so collapsed pane strips push the mark up without any
+   *  bookkeeping here. Re-run after anything that changes which host that is
+   *  (layout switch, maximize, cell rebuild); a destroyed host drops the mark from
+   *  the DOM, and this re-mount brings it back. */
+  mountAttributionMark() {
+    const mark = this.attributionMark;
+    if (!mark) return;
+    const host = this.bottomLeftCell()?.host ?? this.gridEl;
+    if (mark.parentElement !== host) host.appendChild(mark);
+  }
   /** Create the cells the current layout wants but don't exist yet (pool-first).
    *  A slot's CELL IDENTITY is `order[i]` (declaration order — never the slot's own
    *  positional id); slots past the declared list mint an auto identity once. */
@@ -38635,6 +39945,12 @@ var VelaWorkspace = class {
         setTimezone: (zone) => this.setTimezone(zone),
         context: () => this.context(),
         activate: (id2) => this.setActiveCell(id2),
+        multiCell: () => !this.monoLayout && this.def.cells.length > 1,
+        isMaximized: (id2) => this.maximizedId === id2,
+        toggleMaximize: (id2) => this.maximizeCell(this.maximizedId === id2 ? null : id2),
+        cellDragTarget: (id2, x, y) => this.cellAtPoint(x, y, id2),
+        previewDropTarget: (target) => this.setDropTarget(target),
+        dropCell: (id2, target) => this.swapCells(id2, target),
         onMarketChanged: (id2) => this.onCellMarketChanged(id2),
         onPriceStyleChanged: (id2) => this.onCellPriceStyleChanged(id2),
         onIndicatorsChanged: (id2) => this.onCellIndicatorsChanged(id2),
@@ -38648,6 +39964,7 @@ var VelaWorkspace = class {
       if (id === this.activeId) cell.host.dataset.active = "1";
       this.wireCell(cell);
       cell.chart.renderer.setLayoutMode(this.layoutCtl.current);
+      cell.setControlsSuspended(this.layoutCtl.current === "mobile");
       if (this.favs.length > 0) cell.chart.drawings.setFavorites(this.favs);
       cell.setManifest(this.manifest, pooled?.indicators == null);
       cell.restorePersistedExt();
@@ -38657,6 +39974,7 @@ var VelaWorkspace = class {
       const host = this.cellsById.get(this.order[i] ?? "")?.host;
       if (host) this.gridEl.appendChild(host);
     }
+    this.mountAttributionMark();
   }
   /** Per-cell chart subscriptions (trigger ② — the chart instance is stable for the
    *  cell's whole life, so these live and die with the cell). */
@@ -38716,6 +40034,9 @@ var VelaWorkspace = class {
     chart.on("viewport:changed", (range) => this.propagateViewport(cell.id, range));
     chart.renderer.onConfigChanged(() => this.propagateStylePrefs(cell.id));
     chart.on("theme:changed", (t) => this.setTheme(t));
+    chart.on("pane:changed", () => {
+      if (cell.id === this.activeId) this.syncMobileMaximize();
+    });
     chart.renderer.onAxisLongPress((e) => {
       if (this.layoutCtl.current !== "mobile") return;
       if (e.axis === "time") this.openTimezoneDrawer();
@@ -39036,6 +40357,7 @@ var VelaWorkspace = class {
     for (const cell of this.cellsById.values()) {
       cell.chart.renderer.closeDialogs();
       cell.chart.renderer.setLayoutMode(mode);
+      cell.setControlsSuspended(mode === "mobile");
     }
     this.syncCellPresentation();
   }