@luxalgo/vela 0.6.8 → 0.6.10

package/dist/vela.global.js

@@ -114,6 +114,7 @@ var Vela = (function (exports) {
     constructor(id, title, controller, source) {
       this.controller = controller;
       this.schema = [];
+      this.propsSchema = [];
       this.visibleState = true;
       this.bus = new TypedEventBus();
       this.id = id;
@@ -123,6 +124,9 @@ var Vela = (function (exports) {
     get inputs() {
       return this.schema;
     }
+    get props() {
+      return this.propsSchema;
+    }
     get visible() {
       return this.visibleState;
     }
@@ -132,6 +136,12 @@ var Vela = (function (exports) {
     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);
     }
@@ -151,6 +161,9 @@ var Vela = (function (exports) {
     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;
@@ -164,6 +177,8 @@ var Vela = (function (exports) {
   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,
@@ -183,7 +198,8 @@ var Vela = (function (exports) {
       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) {
@@ -204,7 +220,8 @@ var Vela = (function (exports) {
         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)
       }
     };
   }
@@ -474,11 +491,11 @@ var Vela = (function (exports) {
   );
   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(
@@ -511,6 +528,8 @@ var Vela = (function (exports) {
   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"/>'));
@@ -518,7 +537,7 @@ var Vela = (function (exports) {
   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"'));
@@ -6889,6 +6908,23 @@ var Vela = (function (exports) {
     return 36e5;
   }
 
+  // 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();
@@ -6978,17 +7014,24 @@ var Vela = (function (exports) {
     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];
@@ -6997,6 +7040,13 @@ var Vela = (function (exports) {
       }
       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
@@ -7285,6 +7335,10 @@ var Vela = (function (exports) {
       /** 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
@@ -7318,7 +7372,9 @@ var Vela = (function (exports) {
       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;
@@ -7425,6 +7481,8 @@ var Vela = (function (exports) {
      *  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;
     }
@@ -7478,7 +7536,47 @@ var Vela = (function (exports) {
       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);
@@ -7998,7 +8096,7 @@ var Vela = (function (exports) {
       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;
     }
@@ -8021,7 +8119,7 @@ var Vela = (function (exports) {
         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;
@@ -8074,6 +8172,19 @@ var Vela = (function (exports) {
       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() {
@@ -8222,6 +8333,10 @@ var Vela = (function (exports) {
         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) {
@@ -8245,6 +8360,7 @@ var Vela = (function (exports) {
           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
@@ -8338,6 +8454,9 @@ var Vela = (function (exports) {
       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",
@@ -8346,7 +8465,8 @@ var Vela = (function (exports) {
         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);
@@ -8579,7 +8699,7 @@ var Vela = (function (exports) {
       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));
@@ -8606,16 +8726,17 @@ var Vela = (function (exports) {
     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;
@@ -8768,6 +8889,15 @@ var Vela = (function (exports) {
     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
@@ -9118,6 +9248,28 @@ var Vela = (function (exports) {
       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
@@ -9363,6 +9515,17 @@ var Vela = (function (exports) {
       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
@@ -9450,6 +9613,18 @@ var Vela = (function (exports) {
       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 ?? "");
@@ -16606,13 +16781,6 @@ var Vela = (function (exports) {
     }
   };
 
-  // src/core/model/inputs.ts
-  function inputVisible(when, values) {
-    if (!when) return true;
-    const conds = Array.isArray(when) ? when : [when];
-    return conds.every((c) => c.anyOf ? c.anyOf.some((x) => x === values[c.key]) : values[c.key] === c.equals);
-  }
-
   // src/ui/tokens.ts
   var STATIC_ID = "vela-ui-tokens";
   var STATIC_DECLS = Object.entries(STATIC_TOKENS).map(([k, v]) => `    ${k}: ${v};`).join("\n");
@@ -16858,6 +17026,203 @@ ${STATIC_DECLS}
     }
   };
 
+  // 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 last2 = rows[rows.length - 1];
+      if (last2 && last2.type === "buttons") last2.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/core/model/inputs.ts
+  function inputVisible(when, values) {
+    if (!when) return true;
+    const conds = Array.isArray(when) ? when : [when];
+    return conds.every((c) => c.anyOf ? c.anyOf.some((x) => x === values[c.key]) : values[c.key] === c.equals);
+  }
+
   // src/ui/components/select/controller.ts
   function selectController(opts) {
     const options = opts.options;
@@ -19961,6 +20326,10 @@ ${overlayScrollbarCss(".vela-dialog *")}
   }
 
   // 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) {
@@ -19971,6 +20340,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
       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;
@@ -19993,10 +20363,11 @@ ${overlayScrollbarCss(".vela-dialog *")}
     }
     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)";
@@ -20004,7 +20375,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
       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,
@@ -20036,6 +20407,16 @@ ${overlayScrollbarCss(".vela-dialog *")}
         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 = [];
@@ -20138,9 +20519,10 @@ ${overlayScrollbarCss(".vela-dialog *")}
       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;
@@ -20154,6 +20536,17 @@ ${overlayScrollbarCss(".vela-dialog *")}
           }
         }
       }
+      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
@@ -20171,19 +20564,27 @@ ${overlayScrollbarCss(".vela-dialog *")}
       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. */
@@ -20210,7 +20611,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
       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,
@@ -20219,7 +20620,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
           toggle: {
             id,
             checked: current,
-            onChange: (v) => this.commit(row, lead.key, v)
+            onChange: (v) => this.commit(row, lead, v)
           }
         }));
       }
@@ -20244,8 +20645,8 @@ ${overlayScrollbarCss(".vela-dialog *")}
     }
     /** 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;
       }
@@ -20256,7 +20657,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
           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;
       }
@@ -20819,6 +21220,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
   }
 
   // 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;
@@ -20836,6 +21238,9 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
   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;
@@ -20857,10 +21262,14 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       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 = [];
@@ -21018,6 +21427,42 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
         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);
@@ -21185,6 +21630,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     }
     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;
@@ -21260,13 +21706,13 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     }
     /** 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;
@@ -21318,6 +21764,9 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
         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;`;
@@ -21334,13 +21783,13 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
         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");
@@ -21380,7 +21829,9 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       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. */
@@ -21389,9 +21840,11 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       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
@@ -21473,8 +21926,13 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     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) {
@@ -21492,10 +21950,12 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     }
     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();
@@ -21515,6 +21975,8 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       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();
@@ -21560,7 +22022,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
   };
   var STYLE_ID = "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 ensureStyles() {
     if (typeof document === "undefined" || document.getElementById(STYLE_ID)) return;
     const st = document.createElement("style");
@@ -21580,8 +22042,12 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       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;
@@ -21653,7 +22119,12 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       }
       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
+          })
         );
       }
     }
@@ -21690,17 +22161,18 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
         }
         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";
         }
       }
     }
@@ -21710,6 +22182,14 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       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);
@@ -21860,131 +22340,6 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     }
   };
 
-  // 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 wrap2 = document.createElement("div");
-      wrap2.style.position = "absolute";
-      this.anchor(wrap2, 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);
-      }
-      wrap2.appendChild(table);
-      return wrap2;
-    }
-    /**
-     * 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,
@@ -22005,7 +22360,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     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
@@ -22036,6 +22391,9 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     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);
@@ -22841,8 +23199,12 @@ void main() {
             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) {
@@ -22856,15 +23218,26 @@ void main() {
             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);
@@ -22911,7 +23284,7 @@ void main() {
       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);
@@ -22980,15 +23353,23 @@ void main() {
       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);
         }
       }
     }
@@ -23251,12 +23632,12 @@ void main() {
         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) {
@@ -23271,9 +23652,9 @@ void main() {
             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);
@@ -24589,9 +24970,10 @@ void main() {
        *  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
@@ -24825,8 +25207,12 @@ void main() {
           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) => {
@@ -24848,13 +25234,25 @@ void main() {
           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) {
@@ -25099,13 +25497,13 @@ void main() {
         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;
@@ -25127,9 +25525,9 @@ void main() {
             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);
@@ -25552,6 +25950,19 @@ void main() {
 
   // 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(size3) {
     return size3 === "auto" ? 12 : namedFontSize(size3);
   }
@@ -25561,6 +25972,8 @@ void main() {
       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.
@@ -25581,8 +25994,13 @@ void main() {
       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);
@@ -25930,13 +26348,35 @@ void main() {
         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":
@@ -25955,8 +26395,7 @@ void main() {
       }
     }
     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");
@@ -26036,9 +26475,9 @@ void main() {
           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;
@@ -26096,38 +26535,51 @@ void main() {
           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);
@@ -26363,7 +26815,7 @@ void main() {
       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) {
@@ -26388,8 +26840,8 @@ void main() {
      */
     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.
@@ -26421,17 +26873,6 @@ void main() {
         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);
@@ -26447,25 +26888,6 @@ void main() {
       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;
@@ -26499,23 +26921,6 @@ void main() {
       );
       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;
@@ -26731,6 +27136,68 @@ void main() {
     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() {
@@ -30862,17 +31329,17 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     return textGlyph(String(glyph), 15);
   }
   function stampSizeIcon(size3) {
-    return textGlyph("\u25CF", (SIZE_PX4[String(size3)] ?? 13) + 4);
+    return textGlyph("\u25CF", (SIZE_PX3[String(size3)] ?? 13) + 4);
   }
   function sizeIcon(size3) {
     return textGlyph(String(size3).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(size3) {
-    return textGlyph("12", (SIZE_PX4[String(size3)] ?? 13) - 1, 16.5, 'font-weight="600"');
+    return textGlyph("12", (SIZE_PX3[String(size3)] ?? 13) - 1, 16.5, 'font-weight="600"');
   }
   function labelSizeIcon(size3) {
-    return textGlyph("T", (SIZE_PX4[String(size3)] ?? 13) + 2);
+    return textGlyph("T", (SIZE_PX3[String(size3)] ?? 13) + 2);
   }
   function capitalize(s) {
     return s.charAt(0).toUpperCase() + s.slice(1);
@@ -31036,7 +31503,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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) {
@@ -31140,6 +31607,14 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;
@@ -32471,6 +32946,315 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
   };
 
+  // src/renderers/shared/TableOverlay.ts
+  var SIZE_PX4 = {
+    auto: 13,
+    tiny: 10,
+    small: 11,
+    normal: 13,
+    large: 16,
+    huge: 20
+  };
+  function fontPxOf(size3) {
+    if (typeof size3 === "number") return size3 > 0 ? size3 : SIZE_PX4.auto;
+    return SIZE_PX4[size3] ?? 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, ref2) {
+      this.tips = [];
+      const out = /* @__PURE__ */ new Map();
+      if (ref2.width === 0 || ref2.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 !== ref2.width || canvas.height !== ref2.height) {
+          canvas.width = ref2.width;
+          canvas.height = ref2.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 {
@@ -32522,19 +33306,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     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);
     }
@@ -32556,6 +33329,36 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     const span = max2 - min2;
     return { min: min2 - span * MARGIN_BOTTOM, max: max2 + 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 min2 = Infinity;
+    let max2 = -Infinity;
+    const consider = (v) => {
+      if (v != null && Number.isFinite(v)) {
+        if (v < min2) min2 = v;
+        if (v > max2) max2 = 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 min2 === Infinity ? null : { min: min2, max: max2 };
+  }
   function expandScaleByPixels(scale, heightPx, abovePx, belowPx) {
     if (abovePx <= 0 && belowPx <= 0) return scale;
     const content = heightPx - abovePx - belowPx;
@@ -33331,6 +34134,11 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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)
@@ -33338,6 +34146,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;
@@ -33348,6 +34160,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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) ──
@@ -33482,7 +34296,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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,
@@ -33796,7 +34609,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
      * 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;
@@ -34456,6 +35268,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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,
@@ -34495,9 +35311,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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);
@@ -34538,6 +35355,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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,
@@ -34547,8 +35365,19 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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();
     }
@@ -34673,8 +35502,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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);
@@ -34687,6 +35514,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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?.();
@@ -34701,6 +35530,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;
@@ -34793,7 +35623,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     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 */);
     }
@@ -34815,17 +35644,14 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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 */);
     }
@@ -34834,7 +35660,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       if (!pane || pane.collapsed === collapsed) return;
       pane.collapsed = collapsed;
       this.layoutPanes();
-      this.repositionTables();
       this.paneControls?.refresh();
       this.scheduler.invalidate(4 /* Full */);
     }
@@ -34842,7 +35667,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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 */);
     }
@@ -34927,9 +35751,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;
@@ -34953,7 +35776,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         }
       }
       applyPatch(model, patch);
-      this.syncTables(model);
       this.scheduler.invalidate(3 /* Light */);
     }
     removeIndicator(handle) {
@@ -34972,14 +35794,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;
@@ -34989,6 +35809,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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);
@@ -35013,8 +35837,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       }
       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 */);
@@ -35060,6 +35882,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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`;
@@ -35455,7 +36278,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     /** 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 */);
     }
@@ -35536,7 +36358,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       above.heightWeight = next2.above;
       below.heightWeight = next2.below;
       this.layoutPanes();
-      this.repositionTables();
       this.scheduler.invalidate(4 /* Full */);
     }
     /** Double-click a separator → split the two adjacent panes evenly (each gets half of
@@ -35551,7 +36372,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       above.heightWeight = half;
       below.heightWeight = half;
       this.layoutPanes();
-      this.repositionTables();
       this.scheduler.invalidate(4 /* Full */);
     }
     // ── keyboard navigation / accessibility (item 11) ──
@@ -35830,7 +36650,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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());
@@ -35969,7 +36792,11 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         }
         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 or2 = overlaySeriesRange(this.scene.indicators.values(), i0, i1, (id) => this.scene.offsetOf(id));
+          if (or2) dr = dr ? { min: Math.min(dr.min, or2.min), max: Math.max(dr.max, or2.max) } : or2;
+        }
         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);
@@ -36243,6 +37070,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;
@@ -36263,27 +37091,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       }
       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;
@@ -36334,6 +37141,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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`;
@@ -36426,30 +37234,33 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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 size3 = (canvas) => {
+        canvas.width = bw;
+        canvas.height = bh;
+        canvas.style.width = `${pw}px`;
+        canvas.style.height = `${ph}px`;
+      };
+      size3(this.dataCanvas);
+      size3(this.backdropCanvas);
+      size3(this.volumeCanvas);
+      for (const l of this.extLayers) size3(l.canvas);
+      size3(this.vpvrCanvas);
+      size3(this.chromeCanvas);
+      size3(this.drawingsCanvas);
+      size3(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();
@@ -37148,6 +37959,19 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   function legendActions() {
     return [...legendRegistry.values()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
   }
+  var calloutRegistry = /* @__PURE__ */ new Map();
+  function registerLegendCallout(desc) {
+    calloutRegistry.set(desc.id, desc);
+    return () => {
+      if (calloutRegistry.get(desc.id) === desc) calloutRegistry.delete(desc.id);
+    };
+  }
+  function unregisterLegendCallout(id) {
+    calloutRegistry.delete(id);
+  }
+  function legendCallouts() {
+    return [...calloutRegistry.values()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  }
   var stateHandlers = /* @__PURE__ */ new Map();
   function registerStatePersistence(handler) {
     stateHandlers.set(handler.key, handler);
@@ -38491,6 +39315,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   exports.iconMarkup = iconMarkup;
   exports.inputVisible = inputVisible;
   exports.legendActions = legendActions;
+  exports.legendCallouts = legendCallouts;
   exports.nativeIndicatorDescriptors = nativeIndicatorDescriptors;
   exports.nativeIndicatorTypes = nativeIndicatorTypes;
   exports.normalizeSettingsRow = normalizeSettingsRow;
@@ -38499,6 +39324,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   exports.registerDrawingType = registerDrawingType;
   exports.registerIcon = registerIcon;
   exports.registerLegendAction = registerLegendAction;
+  exports.registerLegendCallout = registerLegendCallout;
   exports.registerNativeIndicator = registerNativeIndicator;
   exports.registerRendererDefaults = registerRendererDefaults;
   exports.registerRendererLayer = registerRendererLayer;
@@ -38524,6 +39350,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   exports.unregisterChartType = unregisterChartType;
   exports.unregisterDefaultEngine = unregisterDefaultEngine;
   exports.unregisterLegendAction = unregisterLegendAction;
+  exports.unregisterLegendCallout = unregisterLegendCallout;
   exports.unregisterNativeIndicator = unregisterNativeIndicator;
   exports.unregisterRendererDefaults = unregisterRendererDefaults;
   exports.unregisterRendererLayer = unregisterRendererLayer;