@luxalgo/vela 0.6.9 → 0.6.10

package/dist/index.cjs

@@ -552,6 +552,8 @@ registerIcon("folder-plus", S('<path d="M1.6 4.4a1 1 0 0 1 1-1h2.7l1.3 1.7h6.8a1
 registerIcon("folder-minus", S('<path d="M1.6 4.4a1 1 0 0 1 1-1h2.7l1.3 1.7h6.8a1 1 0 0 1 1 1v6.5a1 1 0 0 1-1 1h-10.8a1 1 0 0 1-1-1z"/><path d="M6.2 9.4h3.6"/>'));
 registerIcon("collapse", S('<path d="M3 8h10"/>'));
 registerIcon("expand", S('<rect x="2.2" y="2.2" width="11.6" height="11.6" rx="1.4"/><path d="M8 5.4v5.2M5.4 8h5.2"/>'));
+registerIcon("plus", S('<path d="M8 2.8v10.4M2.8 8h10.4"/>'));
+registerIcon("minus", S('<path d="M2.8 8h10.4"/>'));
 registerIcon("maximize", S('<path d="M2.5 6V3a.5.5 0 0 1 .5-.5h3M10 2.5h3a.5.5 0 0 1 .5.5v3M13.5 10v3a.5.5 0 0 1-.5.5h-3M6 13.5H3a.5.5 0 0 1-.5-.5v-3"/>'));
 registerIcon("restore", S('<path d="M6.2 2.5v3.7H2.5M9.8 13.5V9.8h3.7M13.5 6.2H9.8V2.5M2.5 9.8h3.7v3.7"/>'));
 registerIcon("star", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l-3.5 1.85.65-3.9-2.8-2.75 3.9-.55z"/>'));
@@ -559,7 +561,7 @@ registerIcon("star-filled", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L
 registerIcon("grip", S('<circle cx="6" cy="3.5" r="1"/><circle cx="10" cy="3.5" r="1"/><circle cx="6" cy="8" r="1"/><circle cx="10" cy="8" r="1"/><circle cx="6" cy="12.5" r="1"/><circle cx="10" cy="12.5" r="1"/>', 'fill="currentColor" stroke="none"'));
 registerIcon("kebab", S('<circle cx="8" cy="3.2" r="1.2"/><circle cx="8" cy="8" r="1.2"/><circle cx="8" cy="12.8" r="1.2"/>', 'fill="currentColor" stroke="none"'));
 registerIcon("burger", S('<path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/>'));
-registerIcon("reset", S('<rect x="6" y="6" width="4" height="4" rx="0.8"/><path d="M2.2 8a5.8 5.8 0 1 0 1.9-4.3L2.2 5.3"/><path d="M2.2 2.2v3.1h3.1"/>'));
+registerIcon("reset", S('<path d="M2 8a6 6 0 1 0 6-6 6.5 6.5 0 0 0-4.5 1.83L2 5.33"/><path d="M2 2v3.33h3.33"/>'));
 registerIcon("pane-collapse", S('<path d="M2.6 9.4h4v4M13.4 6.6h-4v-4"/><path d="m9.4 6.6 4.2-4.2M2.4 13.6l4.2-4.2"/>'));
 registerIcon("pane-expand", S('<path d="M9.8 2.4h3.8v3.8M6.2 13.6H2.4V9.8"/><path d="m13.6 2.4-4.4 4.4M2.4 13.6l4.4-4.4"/>'));
 registerIcon("cursor", svg24('<path d="M5 3l6 16 2-6 6-2z"/>', 'fill="currentColor" stroke="none"'));
@@ -6930,6 +6932,23 @@ function timeframeToMs(timeframe) {
   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();
@@ -7019,17 +7038,24 @@ var ProviderRegistry = class {
   resolve(raw, opts = {}) {
     const { provider, ticker } = this.parse(raw);
     if (provider) {
-      if (this.entries.has(provider)) return { provider, ticker };
+      if (this.entries.has(provider)) {
+        const d = this.entries.get(provider).byTicker?.get(normTicker(ticker));
+        return { provider, ticker: d != null && isGroupRow(d) ? this.loadableTicker(provider, d) : ticker };
+      }
       const key = `${provider}:${normTicker(ticker)}`;
       for (const name of this.candidateOrder(opts.default)) {
         const d = this.entries.get(name).prefixIndex?.get(key);
-        if (d) return { provider: name, ticker: d.ticker };
+        if (d) return { provider: name, ticker: this.loadableTicker(name, d) };
       }
       return null;
     }
     const norm = normTicker(ticker);
     for (const name of this.candidateOrder(opts.default)) {
-      if (this.entries.get(name).index?.has(norm)) return { provider: name, ticker };
+      const e = this.entries.get(name);
+      if (e.index?.has(norm)) {
+        const d = e.byTicker?.get(norm);
+        return { provider: name, ticker: d != null && isGroupRow(d) ? this.loadableTicker(name, d) : ticker };
+      }
     }
     if (opts.lenient && this.entries.size === 1) {
       const only = this.names()[0];
@@ -7038,6 +7064,13 @@ var ProviderRegistry = class {
     }
     return null;
   }
+  /** What a resolved descriptor LOADS: itself — unless it is a GROUP row (listed, never
+   *  served), which loads its default member (single `default`, else first listed). A
+   *  memberless group keeps its own ticker and fails downstream like any unknown symbol. */
+  loadableTicker(name, d) {
+    if (!isGroupRow(d)) return d.ticker;
+    return defaultMemberOf(this.entries.get(name)?.descriptors ?? [], d)?.ticker ?? d.ticker;
+  }
   /**
    * Resolve now if possible, else resolve later — re-attempting after each provider
    * settles. The promise stays pending until some registered provider can serve the
@@ -7326,6 +7359,10 @@ var EngineOrchestrator = class _EngineOrchestrator {
     /** Invalidates detached async work (backfill loops, in-flight loads, gap heals):
      *  bumped by init(), setMarket() and destroy(). */
     this.generation = 0;
+    /** Aborts the in-flight PROGRESSIVE load's source polling on supersession — an
+     *  abandoned stream left polling to its own budget starves the browser's per-host
+     *  connection pool, and the NEXT symbol's very first fetch with it (measured). */
+    this.progressiveAbort = null;
     /** Awaiters racing a superseded load (setMarket callers) — released on every bump so they never hang. */
     this.supersedeWaiters = [];
     /** `history:complete` fired for the CURRENT load. Each market load re-arms the cycle
@@ -7468,6 +7505,8 @@ var EngineOrchestrator = class _EngineOrchestrator {
    *  superseded setMarket awaiters so their promises resolve instead of hanging. */
   bumpGeneration() {
     const gen = ++this.generation;
+    this.progressiveAbort?.abort();
+    this.progressiveAbort = null;
     for (const w of this.supersedeWaiters.splice(0)) w();
     return gen;
   }
@@ -7521,7 +7560,47 @@ var EngineOrchestrator = class _EngineOrchestrator {
     const requested = market.bars ?? 500;
     const initialRange = market.visibleRange;
     const deep = !market.data?.length && initialRange == null && requested > SINGLE_LOAD_BARS;
-    if (deep && this.feed.loadRange) {
+    let progressiveServed = false;
+    if (!market.data?.length && initialRange == null && this.feed.loadProgressive) {
+      let painted = false;
+      const paint = (bars, final) => {
+        if (this.generation !== gen || !final && bars.length === 0) return;
+        this.setBarSeries(bars, painted ? { preserveView: true } : void 0);
+        if (!painted && bars.length > 0) {
+          painted = true;
+          if (opts.firstLoad) this.activateBarLayers();
+          if (!final) this.historyState = "backfill";
+        }
+      };
+      const abort = new AbortController();
+      this.progressiveAbort = abort;
+      progressiveServed = await new Promise((firstPaint) => {
+        let signaled = false;
+        const signal = (served) => {
+          if (!signaled) {
+            signaled = true;
+            firstPaint(served);
+          }
+        };
+        abort.signal.addEventListener("abort", () => signal(true), { once: true });
+        this.feed.loadProgressive(market, (bars) => {
+          paint(bars, false);
+          if (painted) signal(true);
+        }, { signal: abort.signal }).then((full) => {
+          if (this.progressiveAbort === abort) this.progressiveAbort = null;
+          if (full == null) return signal(false);
+          if (this.generation !== gen) return signal(true);
+          paint(full, true);
+          this.completeHistory(full.length >= requested ? "depth" : "genesis");
+          signal(true);
+        }).catch(() => {
+          if (this.progressiveAbort === abort) this.progressiveAbort = null;
+          if (this.generation === gen) this.completeHistory("aborted");
+          signal(true);
+        });
+      });
+    }
+    if (progressiveServed) ; else if (deep && this.feed.loadRange) {
       const head = await this.feed.load({ ...market, bars: Math.min(requested, CHUNK_BARS) });
       if (this.generation !== gen) return;
       this.setBarSeries(head);
@@ -9193,6 +9272,28 @@ var CachingDataFeed = class {
     this.store.merge(key, dropForming(bars));
     return bars;
   }
+  /**
+   * Progressive twin of {@link load}: a COLD load streams through the inner feed's
+   * progressive path — batches forwarded verbatim, the FINAL answer cached exactly as
+   * `load` caches — while a cache-covered load answers once through `load` itself (a
+   * warm chart has nothing to stream). Falls back to `load` wholesale when the inner
+   * feed lacks the capability, so callers may prefer this method unconditionally.
+   */
+  async loadProgressive(cfg, onBatch, opts) {
+    if (cfg.data && cfg.data.length > 0) return this.inner.load(cfg);
+    if (!this.inner.loadProgressive) return null;
+    const symbol = cfg.symbol ?? "TEST";
+    const key = cacheKey(symbol, cfg.timeframe ?? "60", cfg.session);
+    const cached = this.store.get(key);
+    const n = cfg.bars ?? 500;
+    const lastCached = cached?.[cached.length - 1];
+    if (cached && lastCached && cached.length >= n - 1 && this.inner.loadRange) return this.load(cfg);
+    this.store.retainSymbol(symbol);
+    const bars = await this.inner.loadProgressive(cfg, onBatch, opts);
+    if (bars == null) return null;
+    this.store.merge(key, dropForming(bars));
+    return bars;
+  }
   /**
    * Cache-backed ranged fetch — the gateway engines use for secondary series
    * (`request.security` HTF/LTF/cross-symbol) and the orchestrator's backward
@@ -9438,6 +9539,17 @@ var MultiProviderFeed = class {
     this.prefetchSymbolInfo(resolved);
     return this.cache.load(canonical(cfg, resolved));
   }
+  /** Progressive twin of {@link load} — same resolution, the cache streams the batches. */
+  async loadProgressive(cfg, onBatch, opts) {
+    if (cfg.data && cfg.data.length > 0) {
+      this.liveBars = cfg.data.map((b) => ({ ...b }));
+      return cfg.data;
+    }
+    const resolved = await this.registry.whenResolvable(rawSymbol(cfg), { default: this.primaryProvider });
+    this.primaryProvider = resolved.provider;
+    this.prefetchSymbolInfo(resolved);
+    return this.cache.loadProgressive(canonical(cfg, resolved), onBatch, opts);
+  }
   /**
    * Synchronous per-symbol metadata for engines (Pine `syminfo.*`), served from the cache
    * warmed by load(). Undefined until the prefetch lands (the engine then synthesizes a
@@ -9525,6 +9637,18 @@ var RegistryFetchFeed = class {
     if (!provider) return Promise.resolve([]);
     return safeBars(provider, ticker, cfg.timeframe ?? "60", { limit: cfg.bars ?? 500, session: cfg.session });
   }
+  async loadProgressive(cfg, onBatch, opts) {
+    const { provider: name, ticker } = parseSymbol(cfg.symbol ?? "");
+    const provider = this.registry.get(name ?? "");
+    if (!provider) return [];
+    if (!provider.getBarsProgressive) return null;
+    try {
+      return await provider.getBarsProgressive(ticker, cfg.timeframe ?? "60", { limit: cfg.bars ?? 500, session: cfg.session }, onBatch, opts);
+    } catch (e) {
+      console.warn(`[vela] progressive fetch failed for ${ticker} ${cfg.timeframe ?? "60"} \u2014 ${e instanceof Error ? e.message : String(e)}`);
+      return [];
+    }
+  }
   loadRange(cfg, range) {
     const { provider: name, ticker } = parseSymbol(cfg.symbol ?? "");
     const provider = this.registry.get(name ?? "");
@@ -10787,6 +10911,10 @@ var CalloutBubble = class {
   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;
@@ -13694,6 +13822,9 @@ var CLOSE_SVG = iconAt("close", LEGEND_ICON_PX2);
 var FOLD_SVG = iconAt("chevron-up", LEGEND_ICON_PX2);
 var UNFOLD_SVG = iconAt("chevron-down", LEGEND_ICON_PX2);
 var OVERVIEW_SVG = iconAt("objects", LEGEND_ICON_PX2);
+function legendCalloutsDisplay(open2, hasCallouts) {
+  return !open2 && hasCallouts ? "inline-flex" : "none";
+}
 var InputsUI = class {
   constructor(container, theme, paneBoundsOf) {
     this.container = container;
@@ -13897,7 +14028,7 @@ var InputsUI = class {
     row.callouts = [];
     row.calloutsEl.replaceChildren();
     const views = this.legendCallouts?.(row.id) ?? [];
-    row.calloutsEl.style.display = views.length > 0 ? "inline-flex" : "none";
+    row.calloutsEl.style.display = legendCalloutsDisplay(row.highlighted, views.length > 0);
     for (const view of views) {
       const bubble = new CalloutBubble({
         icon: view.icon,
@@ -14381,11 +14512,11 @@ var InputsUI = class {
     row.controlsEl.style.display = open2 || row.hidden ? "inline-flex" : "none";
     if (open2) {
       row.el.appendChild(row.statusEl);
-      row.el.appendChild(row.calloutsEl);
+      for (const bubble of row.callouts) bubble.hidePanel();
     } else {
       row.el.insertBefore(row.statusEl, row.valuesEl);
-      row.el.insertBefore(row.calloutsEl, row.statusEl);
     }
+    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) {
@@ -14475,7 +14606,7 @@ var ICONS = {
 };
 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");
@@ -14495,8 +14626,12 @@ var PaneControls = class {
     this.deps = deps;
     this.clusters = /* @__PURE__ */ new Map();
     this.hoverPaneId = null;
+    /** Mobile: hover clusters are meaningless without a cursor — suppressed; a
+     *  collapsed pane's standalone expand chip stays (the only way back up). */
+    this.suspended = false;
     /** Reveal the cluster for the pane under the cursor, resolved from the pointer's y in the plot. */
     this.onPlotMove = (e) => {
+      if (this.suspended) return;
       const rect = this.plot.getBoundingClientRect();
       const y = e.clientY - rect.top;
       let hit = null;
@@ -14568,7 +14703,12 @@ var PaneControls = class {
     }
     if (p.count > 1) {
       cluster.appendChild(
-        this.button(p.maximized ? ICONS.restore : ICONS.maximize, p.maximized ? "Restore pane" : "Maximize pane", false, () => this.deps.onToggleMaximize(p.id), { role: "maximize" })
+        this.button(p.maximized ? ICONS.restore : ICONS.maximize, p.maximized ? "Restore pane" : "Maximize pane", false, () => this.deps.onToggleMaximize(p.id), {
+          role: "maximize",
+          // Same inverse-chip treatment as the collapsed pane's expand toggle: the
+          // maximized state must read as an active state, not just a swapped glyph.
+          selected: p.maximized
+        })
       );
     }
   }
@@ -14605,17 +14745,18 @@ var PaneControls = class {
       }
       const hovered = id === this.hoverPaneId;
       const hasButtons = cluster.children.length > 0;
-      const visible = hasButtons && (hovered || p.collapsed) && p.height > 8;
+      const stateChipRole = p.collapsed ? "collapse" : !this.suspended && p.maximized ? "maximize" : null;
+      const visible = hasButtons && (hovered || stateChipRole != null) && p.height > 8;
       cluster.style.right = `${rightPx}px`;
       cluster.style.top = p.collapsed ? `${p.top + Math.max(1, Math.round((p.height - 24) / 2))}px` : `${p.top + 4}px`;
       cluster.style.display = visible ? "flex" : "none";
       if (!visible) continue;
-      const soloExpand = p.collapsed && !hovered;
-      cluster.style.background = soloExpand ? "transparent" : CLUSTER_PILL;
+      const soloChip = stateChipRole != null && !hovered;
+      cluster.style.background = soloChip ? "transparent" : CLUSTER_PILL;
       for (const child of cluster.children) {
         const btn2 = child;
         btn2.style.display = "inline-flex";
-        btn2.style.visibility = soloExpand && btn2.dataset.role !== "collapse" ? "hidden" : "visible";
+        btn2.style.visibility = soloChip && btn2.dataset.role !== stateChipRole ? "hidden" : "visible";
       }
     }
   }
@@ -14625,6 +14766,14 @@ var PaneControls = class {
     this.hoverPaneId = paneId;
     this.reposition();
   }
+  /** Mobile suppression: no hover clusters (touch has no cursor; the shell's own
+   *  chrome covers maximize), while collapsed panes keep their expand chips. */
+  setSuspended(on) {
+    if (on === this.suspended) return;
+    this.suspended = on;
+    if (on) this.hoverPaneId = null;
+    this.reposition();
+  }
   destroy() {
     this.plot.removeEventListener("pointermove", this.onPlotMove);
     this.plot.removeEventListener("pointerleave", this.onPlotLeave);
@@ -14775,160 +14924,6 @@ var AxisScaleButtons = class {
   }
 };
 
-// src/renderers/shared/TableOverlay.ts
-var SIZE_PX3 = {
-  auto: 13,
-  tiny: 10,
-  small: 11,
-  normal: 13,
-  large: 16,
-  huge: 20
-};
-function fontPxOf(size) {
-  if (typeof size === "number") return size > 0 ? size : SIZE_PX3.auto;
-  return SIZE_PX3[size] ?? SIZE_PX3.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 };
-}
-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) {
-      if (tableHasContent(t)) 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 b = this.paneBounds(t.paneId);
-    const wrap = document.createElement("div");
-    wrap.style.position = "absolute";
-    if (t.frameColor && t.frameWidth > 0) wrap.style.border = `${t.frameWidth}px solid ${t.frameColor}`;
-    this.anchor(wrap, t.position, b);
-    const table = document.createElement("table");
-    Object.assign(table.style, {
-      borderCollapse: "collapse",
-      background: t.bgColor ?? "transparent",
-      fontFamily: this.theme.fontFamily || "sans-serif",
-      border: "none",
-      tableLayout: "auto",
-      // Re-enable pointer events on the table only (root is none) so cell tooltips work.
-      pointerEvents: "auto"
-    });
-    const { span, omit } = mergeRenderPlan(t);
-    const plotW = Math.max(0, (this.root.clientWidth || this.container.clientWidth) - b.rightAxis);
-    const paneH = b.height;
-    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) {
-        if (omit.has(`${r}:${c}`)) continue;
-        const cell = t.cells[r]?.[c] ?? null;
-        const td = document.createElement("td");
-        if (cell === null) {
-          Object.assign(td.style, { padding: "0", border: "none" });
-          tr.appendChild(td);
-          continue;
-        }
-        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,
-          verticalAlign: cell.vAlign === "top" ? "top" : cell.vAlign === "bottom" ? "bottom" : "middle",
-          fontSize: `${fontPxOf(cell.textSize)}px`,
-          fontFamily: cell.fontFamily === "monospace" ? "monospace" : "inherit",
-          fontWeight: cell.bold ? "bold" : "normal",
-          fontStyle: cell.italic ? "italic" : "normal",
-          // Pine cell text never wraps; `\n` still breaks lines. Wrapping
-          // used to collapse unicode sparklines and ━━━ dividers.
-          whiteSpace: "pre"
-        });
-        if (cell.width) td.style.width = `${cell.width / 100 * plotW}px`;
-        if (cell.height) td.style.height = `${cell.height / 100 * paneH}px`;
-        if (cell.tooltip) td.title = cell.tooltip;
-        td.textContent = cell.text ?? "";
-        tr.appendChild(td);
-      }
-      table.appendChild(tr);
-    }
-    wrap.appendChild(table);
-    return wrap;
-  }
-  /**
-   * Position the wrapper at a Pine `position.*` corner/edge of the table's PANE
-   * (not the whole chart), inset past the right price axis so it never overlaps
-   * the Y-axis labels.
-   */
-  anchor(el, position, b) {
-    const m = 6;
-    const containerH = this.root.clientHeight || this.container.clientHeight;
-    const paneBottom = b.top + b.height;
-    if (position.startsWith("top")) el.style.top = `${b.top + m}px`;
-    else if (position.startsWith("bottom")) el.style.bottom = `${Math.max(0, containerH - paneBottom) + m}px`;
-    else el.style.top = `${b.top + b.height / 2}px`;
-    if (position.endsWith("left")) el.style.left = `${m}px`;
-    else if (position.endsWith("right")) el.style.right = `${b.rightAxis + m}px`;
-    else el.style.left = `calc(50% - ${b.rightAxis / 2}px)`;
-    const tx = position.endsWith("center") ? "-50%" : "0";
-    const ty = position.startsWith("middle") ? "-50%" : "0";
-    if (tx !== "0" || ty !== "0") el.style.transform = `translate(${tx}, ${ty})`;
-  }
-};
-
 // src/renderers/native/capabilities.ts
 var NATIVE_CAPABILITIES = {
   panes: true,
@@ -14949,7 +14944,7 @@ var NATIVE_CAPABILITIES = {
   drawingDepth: true,
   // drawings share the series' z space (backend-composited interleave layers)
   tables: true,
-  // reuses the DOM TableOverlay
+  // canvas-painted into the owning indicator's interleave slice
   trades: true,
   // strategy order-fill markers (arrows + labels + fill-price ticks)
   inputsUI: true
@@ -14980,6 +14975,9 @@ function candleTier(spacing) {
   if (spacing < CANDLE_BODY_MIN_SPACING) return "wick";
   return "full";
 }
+function snapY(yCss, dpr) {
+  return Math.round(yCss * dpr) / dpr;
+}
 function candleGeometry(xCss, spacing, dpr, bodyScale = 1) {
   const wickDev = Math.max(1, Math.round(wickWidth(spacing) * dpr));
   const wickLeftDev = Math.round(xCss * dpr - wickDev / 2);
@@ -15786,11 +15784,9 @@ var WebGL2Backend = class {
         };
         b.alpha = this.modelAlpha;
         for (const m of models) for (const bgSpan of m.backgrounds) if (bgSpan.overlay !== true) this.emitBackground(b, bgSpan, pane, coords);
-        for (const m of models) for (const f of m.fills) if (f.overlay !== true) this.emitFill(b, m, f, effPane(m), coords, i0, i1, scene.offsetOf(m.id));
         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);
-            for (const f of m.fills) if (f.overlay === true) this.emitFill(b, m, f, pane, coords, i0, i1, scene.offsetOf(m.id));
           }
         }
         const drawCandles = isPrice && !scene.candlesHidden;
@@ -15806,6 +15802,7 @@ var WebGL2Backend = class {
           b.alpha = this.modelAlpha;
           const off = scene.offsetOf(m.id);
           const mp = effPane(m);
+          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) {
@@ -15813,14 +15810,18 @@ var WebGL2Backend = class {
           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);
@@ -16215,12 +16216,12 @@ var WebGL2Backend = class {
       if (drawBody) {
         const oY = coords.priceToY(bar.open, pane.scale, pane.bounds);
         const cY = coords.priceToY(bar.close, pane.scale, pane.bounds);
-        bodyTop = Math.min(oY, cY);
-        bodyH = Math.max(1, Math.abs(cY - oY));
+        bodyTop = snapY(Math.min(oY, cY), coords.dpr);
+        bodyH = Math.max(1 / coords.dpr, snapY(Math.max(oY, cY), coords.dpr) - bodyTop);
       }
       if (cs.wickVisible) {
-        const hY = coords.priceToY(bar.high, pane.scale, pane.bounds);
-        const lY = coords.priceToY(bar.low, pane.scale, pane.bounds);
+        const hY = snapY(coords.priceToY(bar.high, pane.scale, pane.bounds), coords.dpr);
+        const lY = snapY(coords.priceToY(bar.low, pane.scale, pane.bounds), coords.dpr);
         b.alpha = this.candleStructureAlpha;
         const wCol = parseColor((isUp ? cs.wickUpColor : cs.wickDownColor) ?? (drawBody ? dir : bodyColorStr));
         if (drawBody) {
@@ -17553,9 +17554,10 @@ var SceneGraph = class {
      *  so each indicator arrives behind the candles (and behind older indicators);
      *  `setIndicatorZ`/`bringToFront`/`sendToBack` change it. */
     this.seriesZ = /* @__PURE__ */ new Map();
-    /** Per-pane raster layers of user drawings interleaved into the series stack — each is a
+    /** Per-pane raster layers of drawings interleaved into the series stack (each
+     *  indicator's Pine drawings at its model's z, plus in-stack user drawings) — each a
      *  prepainted canvas the backend composites just before the series carrying `beforeZ`.
-     *  Rebuilt by the renderer per data frame; empty when every drawing sits over the stack. */
+     *  Rebuilt by the renderer per data frame. */
     this.drawingSlices = /* @__PURE__ */ new Map();
     /** Per-model index offset: the chart bar index of the model's `anchorTime` — its
      *  index-aligned payloads (dense series arrays, `bar_index` drawings) count from that
@@ -17790,11 +17792,9 @@ var Canvas2dBackend = class {
       };
       ctx.globalAlpha = this.modelAlpha;
       for (const m of models) for (const bg of m.backgrounds) if (bg.overlay !== true) this.drawBackground(ctx, bg, pane, coords);
-      for (const m of models) for (const f of m.fills) if (f.overlay !== true) this.drawFill(ctx, m, f, effPane(m), coords, i0, i1, scene.offsetOf(m.id));
       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);
-          for (const f of m.fills) if (f.overlay === true) this.drawFill(ctx, m, f, pane, coords, i0, i1, scene.offsetOf(m.id));
         }
       }
       const slices = scene.drawingSlices.get(pane.id) ?? [];
@@ -17818,6 +17818,7 @@ var Canvas2dBackend = class {
         ctx.globalAlpha = this.modelAlpha;
         const off = scene.offsetOf(m.id);
         const mp = effPane(m);
+        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) {
@@ -17825,14 +17826,18 @@ var Canvas2dBackend = class {
         ctx.globalAlpha = this.candleStructureAlpha;
         this.drawPriceSeries(ctx, scene, i0, i1, coords, pane, theme, barColorMap, dataW);
       }
-      drawSlicesUpTo(Infinity);
       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) {
         const mp = effPane(m);
@@ -18076,13 +18081,13 @@ var Canvas2dBackend = class {
       if (drawBody) {
         const oY = coords.priceToY(b.open, pane.scale, pane.bounds);
         const cY = coords.priceToY(b.close, pane.scale, pane.bounds);
-        top = Math.min(oY, cY);
-        bodyH = Math.max(1, Math.abs(cY - oY));
+        top = snapY(Math.min(oY, cY), coords.dpr);
+        bodyH = Math.max(1 / coords.dpr, snapY(Math.max(oY, cY), coords.dpr) - top);
       }
       if (cs.wickVisible) {
         const wick = (up ? cs.wickUpColor : cs.wickDownColor) ?? (drawBody ? dir : color);
-        const hY = coords.priceToY(b.high, pane.scale, pane.bounds);
-        const lY = coords.priceToY(b.low, pane.scale, pane.bounds);
+        const hY = snapY(coords.priceToY(b.high, pane.scale, pane.bounds), coords.dpr);
+        const lY = snapY(coords.priceToY(b.low, pane.scale, pane.bounds), coords.dpr);
         ctx.globalAlpha = this.candleStructureAlpha;
         ctx.strokeStyle = wick;
         ctx.lineWidth = g.wickW;
@@ -18529,6 +18534,19 @@ function autoFontSize(lines, boxW, boxH, bold) {
 
 // src/renderers/shared/DrawingSceneRenderer.ts
 var EMPTY_DRAWING_SET = { lines: [], boxes: [], labels: [], polylines: [], linefills: [] };
+function modelDrawingSet(m, overlay) {
+  const want = (d) => Boolean(d.overlay) === overlay;
+  return {
+    lines: (m.lines ?? []).filter(want),
+    boxes: (m.boxes ?? []).filter(want),
+    labels: (m.labels ?? []).filter(want),
+    polylines: (m.polylines ?? []).filter(want),
+    linefills: (m.linefills ?? []).filter(want)
+  };
+}
+function drawingSetEmpty(s) {
+  return !s.lines.length && !s.boxes.length && !s.labels.length && !s.polylines.length && !s.linefills.length;
+}
 function fontSizePx(size) {
   return size === "auto" ? 12 : namedFontSize(size);
 }
@@ -19381,10 +19399,8 @@ var ChromeRenderer = class {
     this.ctx = null;
     // The color for axis tick labels — the host-passed surface text, set each frame in render().
     this.axisTextColor = DARK_THEME.textColor;
-    // Shared Pine-drawing renderer (line/box/label/polyline/linefill); widthCache persists.
+    // Shared Pine-drawing renderer, used here for autoscale geometry only; widthCache persists.
     this.drawScene = new DrawingSceneRenderer({ timeToLogical: () => 0, barAt: () => null, theme: {} });
-    // Tooltip hit-rects of every label drawn this frame, in plot coords (rebuilt per render).
-    this.labelTips = [];
   }
   mount(canvas) {
     this.canvas = canvas;
@@ -19408,8 +19424,8 @@ var ChromeRenderer = class {
    */
   paneDrawingsRange(ownModels, scene, isPricePane, vr) {
     let dr = null;
-    for (const m of ownModels) dr = unionRange(dr, this.drawingsRange(this.ownDrawings(m), vr, scene.offsetOf(m.id)));
-    if (isPricePane) for (const m of scene.indicators.values()) dr = unionRange(dr, this.drawingsRange(this.overlayDrawings(m), vr, scene.offsetOf(m.id)));
+    for (const m of ownModels) dr = unionRange(dr, this.drawingsRange(modelDrawingSet(m, false), vr, scene.offsetOf(m.id)));
+    if (isPricePane) for (const m of scene.indicators.values()) dr = unionRange(dr, this.drawingsRange(modelDrawingSet(m, true), vr, scene.offsetOf(m.id)));
     return dr;
   }
   /** Clear the chrome canvas and draw drawings + axes + current-price line.
@@ -19426,7 +19442,6 @@ var ChromeRenderer = class {
     const dataW = coords.width;
     const dataH = coords.height;
     this.axisTextColor = surface?.textColor ?? theme.textColor;
-    this.labelTips = [];
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, fullW, fullH);
     if (surface && (fullW > dataW || fullH > dataH)) {
@@ -19442,17 +19457,6 @@ var ChromeRenderer = class {
       return;
     }
     const pricePane = panes.find((p) => p.kind === "price") ?? null;
-    for (const pane of panes) {
-      if (pane.collapsed) continue;
-      for (const m of scene.indicatorsForPane(pane.id)) {
-        const sc = scene.scaleFor(m, pane);
-        const mp = sc === pane.scale ? pane : { ...pane, scale: sc };
-        this.renderDrawings(ctx, coords, this.ownDrawings(m), mp, dataW, scene.offsetOf(m.id));
-      }
-    }
-    if (pricePane) {
-      for (const m of scene.indicators.values()) this.renderDrawings(ctx, coords, this.overlayDrawings(m), pricePane, dataW, scene.offsetOf(m.id));
-    }
     if (pricePane && !pricePane.collapsed && scene.tradeMarkers.visible) {
       for (const m of scene.indicators.values()) {
         if (m.trades?.length) this.renderTrades(ctx, coords, scene, theme, m.trades, pricePane, dataW);
@@ -19468,25 +19472,6 @@ var ChromeRenderer = class {
     this.canvas = null;
     this.ctx = null;
   }
-  // ── Pine-drawing helpers (own vs force_overlay routing) ──
-  ownDrawings(m) {
-    return {
-      lines: (m.lines ?? []).filter((d) => !d.overlay),
-      boxes: (m.boxes ?? []).filter((d) => !d.overlay),
-      labels: (m.labels ?? []).filter((d) => !d.overlay),
-      polylines: (m.polylines ?? []).filter((d) => !d.overlay),
-      linefills: (m.linefills ?? []).filter((d) => !d.overlay)
-    };
-  }
-  overlayDrawings(m) {
-    return {
-      lines: (m.lines ?? []).filter((d) => d.overlay),
-      boxes: (m.boxes ?? []).filter((d) => d.overlay),
-      labels: (m.labels ?? []).filter((d) => d.overlay),
-      polylines: (m.polylines ?? []).filter((d) => d.overlay),
-      linefills: (m.linefills ?? []).filter((d) => d.overlay)
-    };
-  }
   drawingsRange(set, vr, indexOffset = 0) {
     this.drawScene.setSet(set, indexOffset);
     if (this.drawScene.isEmpty()) return null;
@@ -19520,34 +19505,6 @@ var ChromeRenderer = class {
     );
     ctx.restore();
   }
-  renderDrawings(ctx, coords, set, pane, dataW, indexOffset = 0) {
-    this.drawScene.setSet(set, indexOffset);
-    if (this.drawScene.isEmpty()) return;
-    ctx.save();
-    ctx.translate(0, pane.bounds.top);
-    ctx.beginPath();
-    ctx.rect(0, 0, dataW, pane.bounds.height);
-    ctx.clip();
-    this.drawScene.render(
-      ctx,
-      dataW,
-      pane.bounds.height,
-      (l) => coords.logicalToX(l),
-      (price) => coords.priceToY(price, pane.scale, pane.bounds) - pane.bounds.top
-    );
-    ctx.restore();
-    for (const r of this.drawScene.labelTipRegions()) {
-      this.labelTips.push({ ...r, top: r.top + pane.bounds.top, bottom: r.bottom + pane.bounds.top });
-    }
-  }
-  /** Tooltip of the topmost label under a plot-space point, or null. Fed by the last render. */
-  labelTooltipAt(x, y) {
-    for (let i = this.labelTips.length - 1; i >= 0; i -= 1) {
-      const r = this.labelTips[i];
-      if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return r.text;
-    }
-    return null;
-  }
   // ── axes ──
   drawPriceAxes(ctx, scene, coords, theme, dataW, panes) {
     ctx.strokeStyle = scene.style.borderColor ?? theme.borderColor;
@@ -23956,17 +23913,17 @@ function glyphIcon(glyph) {
   return textGlyph(String(glyph), 15);
 }
 function stampSizeIcon(size) {
-  return textGlyph("\u25CF", (SIZE_PX4[String(size)] ?? 13) + 4);
+  return textGlyph("\u25CF", (SIZE_PX3[String(size)] ?? 13) + 4);
 }
 function sizeIcon(size) {
   return textGlyph(String(size).charAt(0).toUpperCase(), 15);
 }
-var SIZE_PX4 = { small: 10, normal: 13, large: 16, huge: 20 };
+var SIZE_PX3 = { small: 10, normal: 13, large: 16, huge: 20 };
 function numbersSizeIcon(size) {
-  return textGlyph("12", (SIZE_PX4[String(size)] ?? 13) - 1, 16.5, 'font-weight="600"');
+  return textGlyph("12", (SIZE_PX3[String(size)] ?? 13) - 1, 16.5, 'font-weight="600"');
 }
 function labelSizeIcon(size) {
-  return textGlyph("T", (SIZE_PX4[String(size)] ?? 13) + 2);
+  return textGlyph("T", (SIZE_PX3[String(size)] ?? 13) + 2);
 }
 function capitalize(s) {
   return s.charAt(0).toUpperCase() + s.slice(1);
@@ -24130,7 +24087,7 @@ var DrawingToolbar = class {
     this.root.replaceChildren();
     this.groupCells.clear();
     this.groupIcons.clear();
-    this.cursorBtn = this.makeButton(CURSOR_ICON, "Cursor", () => this.onArm(null));
+    this.cursorBtn = this.makeButton(CURSOR_ICON, "Cursor", () => this.onCursorClick());
     this.root.appendChild(this.cursorBtn);
     if (this.def.groups.length > 0) this.root.appendChild(this.divider());
     for (const g of this.def.groups) {
@@ -24234,6 +24191,14 @@ var DrawingToolbar = class {
     this.magnetIcon = icon2;
     return cell;
   }
+  /** Cursor returns to select/idle: an active measure/eraser mode exits through its own
+   *  toggle callback (disarming a tool via `onArm(null)` alone can't — the host treats a
+   *  null arm as a no-op side effect of entering those modes), then the tool disarms. */
+  onCursorClick() {
+    if (this.measureActive) this.onMeasure();
+    if (this.eraserActive) this.onEraser();
+    this.onArm(null);
+  }
   /** Clicking the icon arms the group's last-used tool (it does NOT open the flyout). */
   onGroupIconClick(group) {
     const type = this.lastUsed.get(group.id) ?? group.tools[0]?.type;
@@ -25565,6 +25530,315 @@ var UserDrawingController = class {
   }
 };
 
+// src/renderers/shared/TableOverlay.ts
+var SIZE_PX4 = {
+  auto: 13,
+  tiny: 10,
+  small: 11,
+  normal: 13,
+  large: 16,
+  huge: 20
+};
+function fontPxOf(size) {
+  if (typeof size === "number") return size > 0 ? size : SIZE_PX4.auto;
+  return SIZE_PX4[size] ?? SIZE_PX4.auto;
+}
+function tableHasContent(t) {
+  return t.cells.some((row) => row?.some((c) => c != null && !c.merged));
+}
+function mergeRenderPlan(t) {
+  const span = /* @__PURE__ */ new Map();
+  const omit = /* @__PURE__ */ new Set();
+  for (const m of t.merges) {
+    span.set(`${m.startRow}:${m.startCol}`, { cs: m.endCol - m.startCol + 1, rs: m.endRow - m.startRow + 1 });
+    for (let r = m.startRow; r <= m.endRow; r += 1) {
+      for (let c = m.startCol; c <= m.endCol; c += 1) {
+        if (r !== m.startRow || c !== m.startCol) omit.add(`${r}:${c}`);
+      }
+    }
+  }
+  for (let r = 0; r < t.rows; r += 1) {
+    for (let c = 0; c < t.columns; c += 1) {
+      if (t.cells[r]?.[c]?.merged && !span.has(`${r}:${c}`)) omit.add(`${r}:${c}`);
+    }
+  }
+  for (const key of span.keys()) omit.delete(key);
+  return { span, omit };
+}
+
+// src/renderers/shared/TableCanvasRenderer.ts
+var PAD_X = 6;
+var PAD_Y = 2;
+var MARGIN = 6;
+var LINE_HEIGHT = 1.2;
+function paintTable(ctx, t, args, tips) {
+  if (!tableHasContent(t)) return;
+  const layout = layoutTable(ctx, t, args);
+  if (!layout || layout.w <= 0 || layout.h <= 0) return;
+  const fw = t.frameColor && t.frameWidth > 0 ? t.frameWidth : 0;
+  const { x, y } = anchorOrigin(t.position, layout.w + 2 * fw, layout.h + 2 * fw, args);
+  const x0 = x + fw;
+  const y0 = y + fw;
+  if (t.bgColor) {
+    ctx.fillStyle = t.bgColor;
+    ctx.fillRect(x0, y0, layout.w, layout.h);
+  }
+  if (fw > 0 && t.frameColor) {
+    ctx.strokeStyle = t.frameColor;
+    ctx.lineWidth = fw;
+    ctx.strokeRect(x + fw / 2, y + fw / 2, layout.w + fw, layout.h + fw);
+  }
+  const colX = [0];
+  for (const w of layout.colW) colX.push(colX[colX.length - 1] + w);
+  const rowY = [0];
+  for (const h of layout.rowH) rowY.push(rowY[rowY.length - 1] + h);
+  const prevBaseline = ctx.textBaseline;
+  const prevAlign = ctx.textAlign;
+  ctx.textBaseline = "middle";
+  for (const box of layout.boxes) {
+    const rx = x0 + colX[box.c];
+    const ry = y0 + rowY[box.r];
+    const rw = colX[box.c + box.cs] - colX[box.c];
+    const rh = rowY[box.r + box.rs] - rowY[box.r];
+    const cell = box.cell;
+    if (cell.bgColor) {
+      ctx.fillStyle = cell.bgColor;
+      ctx.fillRect(rx, ry, rw, rh);
+    }
+    const text = cell.text ?? "";
+    if (text.length > 0) {
+      const px = fontPxOf(cell.textSize);
+      ctx.font = cellFont(cell, px, args.theme);
+      ctx.fillStyle = cell.textColor ?? args.theme.textColor;
+      const lines = text.split("\n");
+      const blockH = lines.length * px * LINE_HEIGHT;
+      const blockTop = cell.vAlign === "top" ? ry + PAD_Y : cell.vAlign === "bottom" ? ry + rh - PAD_Y - blockH : ry + (rh - blockH) / 2;
+      const tx = cell.hAlign === "left" ? rx + PAD_X : cell.hAlign === "right" ? rx + rw - PAD_X : rx + rw / 2;
+      ctx.textAlign = cell.hAlign;
+      lines.forEach((line, i) => ctx.fillText(line, tx, blockTop + (i + 0.5) * px * LINE_HEIGHT));
+    }
+    if (cell.tooltip) tips.push({ left: rx, top: ry, right: rx + rw, bottom: ry + rh, text: cell.tooltip });
+  }
+  ctx.textBaseline = prevBaseline;
+  ctx.textAlign = prevAlign;
+  if (t.borderColor && t.borderWidth > 0) {
+    ctx.strokeStyle = t.borderColor;
+    ctx.lineWidth = t.borderWidth;
+    const seen = /* @__PURE__ */ new Set();
+    ctx.beginPath();
+    const edge = (ax, ay, bx, by) => {
+      const key = `${ax},${ay},${bx},${by}`;
+      if (seen.has(key)) return;
+      seen.add(key);
+      ctx.moveTo(ax, ay);
+      ctx.lineTo(bx, by);
+    };
+    for (const box of layout.boxes) {
+      const l = Math.round(x0 + colX[box.c]);
+      const r = Math.round(x0 + colX[box.c + box.cs]);
+      const tp = Math.round(y0 + rowY[box.r]);
+      const bt = Math.round(y0 + rowY[box.r + box.rs]);
+      edge(l, tp, r, tp);
+      edge(l, bt, r, bt);
+      edge(l, tp, l, bt);
+      edge(r, tp, r, bt);
+    }
+    ctx.stroke();
+  }
+}
+function layoutTable(ctx, t, args) {
+  const { span, omit } = mergeRenderPlan(t);
+  const colW = new Array(t.columns).fill(0);
+  const rowH = new Array(t.rows).fill(0);
+  const boxes = [];
+  for (let r = 0; r < t.rows; r += 1) {
+    for (let c = 0; c < t.columns; c += 1) {
+      if (omit.has(`${r}:${c}`)) continue;
+      const cell = t.cells[r]?.[c];
+      if (cell == null) continue;
+      const sp = span.get(`${r}:${c}`);
+      boxes.push({ cell, r, c, cs: Math.min(sp?.cs ?? 1, t.columns - c), rs: Math.min(sp?.rs ?? 1, t.rows - r) });
+    }
+  }
+  if (boxes.length === 0) return null;
+  const sizeOf = (cell) => {
+    const px = fontPxOf(cell.textSize);
+    ctx.font = cellFont(cell, px, args.theme);
+    const lines = (cell.text ?? "").split("\n");
+    let maxW = 0;
+    for (const line of lines) maxW = Math.max(maxW, ctx.measureText(line).width);
+    let w2 = Math.ceil(maxW) + 2 * PAD_X;
+    let h2 = Math.ceil(lines.length * px * LINE_HEIGHT) + 2 * PAD_Y;
+    if (cell.width) w2 = Math.max(w2, cell.width / 100 * args.plotWidth);
+    if (cell.height) h2 = Math.max(h2, cell.height / 100 * args.paneHeight);
+    return { w: w2, h: h2 };
+  };
+  const spanning = [];
+  for (const box of boxes) {
+    const { w: w2, h: h2 } = sizeOf(box.cell);
+    if (box.cs === 1) colW[box.c] = Math.max(colW[box.c], w2);
+    if (box.rs === 1) rowH[box.r] = Math.max(rowH[box.r], h2);
+    if (box.cs > 1 || box.rs > 1) spanning.push({ box, w: w2, h: h2 });
+  }
+  for (const { box, w: w2, h: h2 } of spanning) {
+    if (box.cs > 1) {
+      let sum = 0;
+      for (let c = box.c; c < box.c + box.cs; c += 1) sum += colW[c];
+      if (w2 > sum) for (let c = box.c; c < box.c + box.cs; c += 1) colW[c] += (w2 - sum) / box.cs;
+    }
+    if (box.rs > 1) {
+      let sum = 0;
+      for (let r = box.r; r < box.r + box.rs; r += 1) sum += rowH[r];
+      if (h2 > sum) for (let r = box.r; r < box.r + box.rs; r += 1) rowH[r] += (h2 - sum) / box.rs;
+    }
+  }
+  let w = 0;
+  for (const cw of colW) w += cw;
+  let h = 0;
+  for (const rh of rowH) h += rh;
+  return { colW, rowH, w, h, boxes };
+}
+function anchorOrigin(position, totalW, totalH, args) {
+  let y;
+  if (position.startsWith("top")) y = MARGIN;
+  else if (position.startsWith("bottom")) y = args.paneHeight - MARGIN - totalH;
+  else y = args.paneHeight / 2 - totalH / 2;
+  let x;
+  if (position.endsWith("left")) x = MARGIN;
+  else if (position.endsWith("right")) x = args.plotWidth - MARGIN - totalW;
+  else x = args.plotWidth / 2 - totalW / 2;
+  return { x, y };
+}
+function cellFont(cell, px, theme) {
+  const family = cell.fontFamily === "monospace" ? "monospace" : theme.fontFamily || "sans-serif";
+  return `${cell.italic ? "italic " : ""}${cell.bold ? "bold " : ""}${px}px ${family}`;
+}
+
+// src/renderers/native/drawings/IndicatorDrawingSlices.ts
+function indicatorSliceKey(z, boundaries) {
+  return boundaries.find((b) => b > z) ?? Infinity;
+}
+var IndicatorDrawingSlices = class {
+  constructor() {
+    this.drawScene = new DrawingSceneRenderer({ timeToLogical: () => 0, barAt: () => null, theme: {} });
+    /** Slice canvas cache, keyed `paneId|beforeZ` — same lifecycle as the user-drawing cache. */
+    this.sliceCache = /* @__PURE__ */ new Map();
+    /** Tooltip hit-rects of every label drawn this frame, in plot coords (rebuilt per prepare). */
+    this.tips = [];
+  }
+  /**
+   * Rebuild the per-indicator drawing slices for this data frame. `ref` is the data
+   * canvas the slices must match pixel-for-pixel (the backend composites them 1:1).
+   * Runs from the renderer's data paint, just before the backend composites the scene.
+   */
+  prepare(scene, coords, theme, ref) {
+    this.tips = [];
+    const out = /* @__PURE__ */ new Map();
+    if (ref.width === 0 || ref.height === 0) {
+      this.sliceCache.clear();
+      return out;
+    }
+    this.drawScene.setDeps({
+      timeToLogical: (ms) => coords.timeToLogical(ms),
+      barAt: (logical) => {
+        const b = scene.bars[Math.round(logical)];
+        return b ? { high: b.high, low: b.low } : null;
+      },
+      theme
+    });
+    const dpr = coords.dpr;
+    const dataW = coords.width;
+    const buckets = /* @__PURE__ */ new Map();
+    const add = (paneId, beforeZ, entry) => {
+      const key = `${paneId}|${beforeZ}`;
+      const bucket = buckets.get(key);
+      if (bucket) bucket.entries.push(entry);
+      else buckets.set(key, { paneId, beforeZ, entries: [entry] });
+    };
+    for (const pane of scene.orderedPanes()) {
+      if (pane.collapsed) continue;
+      const boundaries = scene.seriesBoundaries(pane.id);
+      for (const m of scene.orderedIndicatorsForPane(pane.id)) {
+        const set = modelDrawingSet(m, false);
+        const tables = (m.tables ?? []).filter((t) => !t.overlay);
+        if (drawingSetEmpty(set) && tables.length === 0) continue;
+        const sc = scene.scaleFor(m, pane);
+        const mp = sc === pane.scale ? pane : { ...pane, scale: sc };
+        const beforeZ = indicatorSliceKey(scene.zOf(m.id), boundaries);
+        add(pane.id, beforeZ, { set, tables, pane: mp, indexOffset: scene.offsetOf(m.id) });
+      }
+      if (pane.kind === "price") {
+        for (const m of scene.indicators.values()) {
+          const set = modelDrawingSet(m, true);
+          const tables = (m.tables ?? []).filter((t) => t.overlay === true);
+          if (drawingSetEmpty(set) && tables.length === 0) continue;
+          add(pane.id, Infinity, { set, tables, pane, indexOffset: scene.offsetOf(m.id) });
+        }
+      }
+    }
+    for (const [key, { paneId, beforeZ, entries }] of buckets) {
+      let canvas = this.sliceCache.get(key);
+      if (!canvas) {
+        canvas = document.createElement("canvas");
+        this.sliceCache.set(key, canvas);
+      }
+      if (canvas.width !== ref.width || canvas.height !== ref.height) {
+        canvas.width = ref.width;
+        canvas.height = ref.height;
+      }
+      const ctx = canvas.getContext("2d");
+      if (!ctx) continue;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
+      for (const e of entries) this.paintEntry(ctx, e, coords, dataW, theme);
+      const slices = out.get(paneId) ?? [];
+      slices.push({ beforeZ, canvas });
+      out.set(paneId, slices);
+    }
+    for (const key of [...this.sliceCache.keys()]) if (!buckets.has(key)) this.sliceCache.delete(key);
+    for (const slices of out.values()) slices.sort((a, b) => a.beforeZ - b.beforeZ);
+    return out;
+  }
+  paintEntry(ctx, e, coords, dataW, theme) {
+    const { pane } = e;
+    const paneTips = [];
+    ctx.save();
+    ctx.translate(0, pane.bounds.top);
+    ctx.beginPath();
+    ctx.rect(0, 0, dataW, pane.bounds.height);
+    ctx.clip();
+    this.drawScene.setSet(e.set, e.indexOffset);
+    this.drawScene.render(
+      ctx,
+      dataW,
+      pane.bounds.height,
+      (l) => coords.logicalToX(l),
+      (price) => coords.priceToY(price, pane.scale, pane.bounds) - pane.bounds.top
+    );
+    paneTips.push(...this.drawScene.labelTipRegions());
+    for (const t of e.tables) paintTable(ctx, t, { paneHeight: pane.bounds.height, plotWidth: dataW, theme }, paneTips);
+    ctx.restore();
+    for (const r of paneTips) {
+      this.tips.push({ ...r, top: r.top + pane.bounds.top, bottom: r.bottom + pane.bounds.top });
+    }
+  }
+  /** Tooltip of the topmost label or table cell under a plot-space point, or null. Fed by the last prepare. */
+  labelTooltipAt(x, y) {
+    for (let i = this.tips.length - 1; i >= 0; i -= 1) {
+      const r = this.tips[i];
+      if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return r.text;
+    }
+    return null;
+  }
+};
+function mergeSlices(indicator, user) {
+  const out = /* @__PURE__ */ new Map();
+  for (const [paneId, slices] of indicator) out.set(paneId, [...slices]);
+  for (const [paneId, slices] of user) out.set(paneId, [...out.get(paneId) ?? [], ...slices]);
+  for (const slices of out.values()) slices.sort((a, b) => a.beforeZ - b.beforeZ);
+  return out;
+}
+
 // src/renderers/native/drawings/Projector.ts
 function createProjector(coords, paneOf, paneIdAtY, barsInRange) {
   return {
@@ -26444,6 +26718,11 @@ var NativeRenderer = class {
     this.vpvrRenderer = new VpvrRenderer();
     this.resizeObserver = null;
     this.dprMedia = null;
+    /** Plot size in INTEGER device px, as last reported by the resize observer's
+     *  device-pixel-content-box — the browser's own statement of how many device pixels
+     *  it paints the plot into. `null` until the first report or where the box type is
+     *  unsupported (WebKit); syncSize then falls back to rounding the client rect. */
+    this.plotDeviceSize = null;
     this.coords = new CoordinateSystem();
     this.scene = new SceneGraph();
     // chosen at mount (WebGL2 if available, else canvas2d)
@@ -26451,6 +26730,8 @@ var NativeRenderer = class {
     this.glowAmount = 0;
     // WebGL2 neon-glow intensity (canvas2d ignores it)
     this.chrome = new ChromeRenderer();
+    /** Prepaints each indicator's Pine drawings into interleave slices at the model's z. */
+    this.indicatorSlices = new IndicatorDrawingSlices();
     /** Hover tooltips for Pine labels (canvas hit-rects collected by the chrome layer). */
     this.labelTooltip = null;
     this.crosshairLayer = new CrosshairRenderer();
@@ -26599,7 +26880,6 @@ var NativeRenderer = class {
     this.toggleVisibleCbs = /* @__PURE__ */ new Set();
     this.moveIndicatorCbs = /* @__PURE__ */ new Set();
     this.priceStyleCbs = /* @__PURE__ */ new Set();
-    this.tableOverlays = /* @__PURE__ */ new Map();
     this.name = "native";
     this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "intro", "zoomAnchor", "axisDrag", "paneResize", "candleZOrder", "candleVisible", "seriesOrder", "highlights", "sessionZones", "gridlines", "axisLabels", "scaleMode", "invertScale", "paneScales", "autoScale", "timezone", "keyboard", "historyChords", "priceStyle", "priceBaseline", "baselinePrice", "settings", "attribution", "dialogHost", "tradeMarkers", "indicatorTitles", "indicatorValues"];
     /** Track cursor proximity to the scroll button on the plot (bubbles from the button too,
@@ -26913,7 +27193,6 @@ var NativeRenderer = class {
    * hidden) on clear so a re-show picks up the current theme.
    */
   setLoading(loading) {
-    for (const overlay of this.tableOverlays.values()) overlay.setVisible(!loading);
     if (!loading || !this.wrapper) {
       this.loadingEl?.remove();
       this.loadingEl = null;
@@ -27575,7 +27854,7 @@ var NativeRenderer = class {
     this.plot.addEventListener("pointerleave", this.onScrollProximityLeave);
     this.labelTooltip = new LabelTooltip(this.plot, {
       theme: () => this.chromeTheme(),
-      lookup: (x, y) => this.chrome.labelTooltipAt(x, y)
+      lookup: (x, y) => this.indicatorSlices.labelTooltipAt(x, y)
     });
     this.userDrawings = new UserDrawingController(this.wrapper, this.plot, this.drawingsCanvas, {
       projector: () => this.drawingProjector(),
@@ -27660,6 +27939,7 @@ var NativeRenderer = class {
         this.emitPaneAction({ type: "maximize", paneId, maximized });
       }
     });
+    this.paneControls.setSuspended(this.layoutMode === "mobile");
     this.axisScaleButtons = new AxisScaleButtons(this.plot, theme, {
       panes: () => this.axisScaleViews(),
       rightAxis: () => this.rightAxisW,
@@ -27669,8 +27949,19 @@ var NativeRenderer = class {
         if (pane) this.setPaneLog(paneId, !paneLogScale(this.scene, pane));
       }
     });
-    this.resizeObserver = new ResizeObserver(() => this.resize());
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const e of entries) {
+        if (e.target !== this.plot) continue;
+        const s = e.devicePixelContentBoxSize?.[0];
+        if (s) this.plotDeviceSize = { width: s.inlineSize, height: s.blockSize };
+      }
+      this.resize();
+    });
     this.resizeObserver.observe(this.wrapper);
+    try {
+      this.resizeObserver.observe(this.plot, { box: "device-pixel-content-box" });
+    } catch {
+    }
     this.watchDpr();
     this.syncSize();
   }
@@ -27795,8 +28086,6 @@ var NativeRenderer = class {
     this.inputsUI?.destroy();
     this.paneControls?.destroy();
     this.axisScaleButtons?.destroy();
-    for (const overlay of this.tableOverlays.values()) overlay.destroy();
-    this.tableOverlays.clear();
     this.resizeObserver?.disconnect();
     this.resizeObserver = null;
     this.dprMedia?.removeEventListener("change", this.onDprChange);
@@ -27825,6 +28114,7 @@ var NativeRenderer = class {
     this.attributionEl = null;
     this.mountContainer?.style.removeProperty("--vela-toolbar-gutter");
     this.mountContainer?.style.removeProperty("--vela-scale-gutter");
+    this.mountContainer?.style.removeProperty("--vela-bottom-gutter");
     this.mountContainer?.style.removeProperty("--vela-price-pane-top");
     this.mountContainer?.style.removeProperty("--vela-price-pane-bottom");
     this.mountContainer = null;
@@ -27917,7 +28207,6 @@ var NativeRenderer = class {
   ensurePane(pane) {
     this.scene.ensurePane(pane.id, pane.kind, pane.order, pane.heightWeight ?? (pane.kind === "price" ? 3 : 1));
     this.layoutPanes();
-    this.repositionTables();
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
   }
@@ -27939,17 +28228,14 @@ var NativeRenderer = class {
     if (!model.ownScale) this.scene.dropIndicatorScale(handle.id);
     this.inputsUI.setPane(handle.id, paneId);
     this.refreshAnchorOffset(model);
-    this.syncTables(model);
     this.refreshAxisWidth();
     this.layoutPanes();
-    this.repositionTables();
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
   }
   orderPanes(orderedIds) {
     this.scene.orderPanes(orderedIds);
     this.layoutPanes();
-    this.repositionTables();
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
   }
@@ -27958,7 +28244,6 @@ var NativeRenderer = class {
     if (!pane || pane.collapsed === collapsed) return;
     pane.collapsed = collapsed;
     this.layoutPanes();
-    this.repositionTables();
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
   }
@@ -27966,7 +28251,6 @@ var NativeRenderer = class {
     if (paneId !== null && !this.scene.panes.has(paneId)) paneId = null;
     this.maximizedPaneId = paneId;
     this.layoutPanes();
-    this.repositionTables();
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
   }
@@ -28053,7 +28337,6 @@ var NativeRenderer = class {
       native: !!model.native,
       ...model.props ? { props: model.props, propValues: model.propValues ?? {} } : {}
     });
-    this.syncTables(model);
     if (model.native?.type === "volume") {
       this.volumeActive = true;
       this.volumeHidden = false;
@@ -28077,7 +28360,6 @@ var NativeRenderer = class {
       }
     }
     applyPatch(model, patch);
-    this.syncTables(model);
     this.scheduler.invalidate(3 /* Light */);
   }
   removeIndicator(handle) {
@@ -28096,8 +28378,6 @@ var NativeRenderer = class {
     this.scene.forgetAnchorOffset(handle.id);
     this.scene.dropIndicatorScale(handle.id);
     this.inputsUI.remove(handle.id);
-    this.tableOverlays.get(handle.id)?.destroy();
-    this.tableOverlays.delete(handle.id);
     this.refreshAxisWidth();
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
@@ -28141,8 +28421,6 @@ var NativeRenderer = class {
     }
     if (!visible) {
       this.scene.indicators.delete(handle.id);
-      this.tableOverlays.get(handle.id)?.destroy();
-      this.tableOverlays.delete(handle.id);
     }
     this.inputsUI.setVisible(handle.id, visible);
     this.scheduler.invalidate(4 /* Full */);
@@ -28188,6 +28466,7 @@ var NativeRenderer = class {
     this.userDrawings?.setLayoutMode(mode);
     this.settingsDialog?.setLayoutMode(mode);
     this.inputsUI?.setLayoutMode(mode);
+    this.paneControls?.setSuspended(mode === "mobile");
     if (this.scrollButton) {
       const px = mode === "mobile" ? SCROLL_BTN_SIZE_TOUCH : SCROLL_BTN_SIZE;
       this.scrollButton.style.width = `${px}px`;
@@ -28583,7 +28862,6 @@ var NativeRenderer = class {
   /** Relayout + repaint + refresh the hover buttons after a collapse/maximize/order change. */
   afterPaneLayoutChange() {
     this.layoutPanes();
-    this.repositionTables();
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
   }
@@ -28664,7 +28942,6 @@ var NativeRenderer = class {
     above.heightWeight = next.above;
     below.heightWeight = next.below;
     this.layoutPanes();
-    this.repositionTables();
     this.scheduler.invalidate(4 /* Full */);
   }
   /** Double-click a separator → split the two adjacent panes evenly (each gets half of
@@ -28679,7 +28956,6 @@ var NativeRenderer = class {
     above.heightWeight = half;
     below.heightWeight = half;
     this.layoutPanes();
-    this.repositionTables();
     this.scheduler.invalidate(4 /* Full */);
   }
   // ── keyboard navigation / accessibility (item 11) ──
@@ -28958,7 +29234,10 @@ var NativeRenderer = class {
     const liveActual = li >= 0 ? this.bars[li] : void 0;
     const easeLive = !!liveActual && this.liveEaseTime === liveActual.time && (liveActual.high !== this.liveEaseHigh || liveActual.low !== this.liveEaseLow || liveActual.close !== this.liveEaseClose);
     if (easeLive && liveActual) this.bars[li] = { ...liveActual, high: this.liveEaseHigh, low: this.liveEaseLow, close: this.liveEaseClose };
-    this.scene.drawingSlices = this.userDrawings?.prepareSlices(this.scene.orderedPanes().map((p) => p.id)) ?? /* @__PURE__ */ new Map();
+    this.scene.drawingSlices = mergeSlices(
+      this.indicatorSlices.prepare(this.scene, this.coords, this.theme, this.dataCanvas),
+      this.userDrawings?.prepareSlices(this.scene.orderedPanes().map((p) => p.id)) ?? /* @__PURE__ */ new Map()
+    );
     this.backdropRenderer.render(this.scene, this.coords, this.theme, gridAlpha);
     this.backend.render(this.scene, this.coords, this.theme);
     this.chrome.render(this.scene, this.coords, this.theme, this.axisSurface());
@@ -29396,27 +29675,6 @@ var NativeRenderer = class {
     }
     return maxVol;
   }
-  /** Create/update/destroy an indicator's DOM table overlay (anchored off real pane geometry). */
-  syncTables(model) {
-    const tables = model.tables ?? [];
-    let overlay = this.tableOverlays.get(model.id);
-    if (tables.length === 0) {
-      if (overlay) {
-        overlay.destroy();
-        this.tableOverlays.delete(model.id);
-      }
-      return;
-    }
-    if (!overlay) {
-      overlay = new TableOverlay(this.plot, this.theme, (id) => this.paneBoundsFor(id));
-      overlay.setVisible(this.loadingEl === null);
-      this.tableOverlays.set(model.id, overlay);
-    }
-    overlay.update(tables);
-  }
-  repositionTables() {
-    for (const overlay of this.tableOverlays.values()) overlay.reposition();
-  }
   layoutPanes() {
     const panes = this.scene.orderedPanes();
     const dataHeight = this.coords.height;
@@ -29467,6 +29725,7 @@ var NativeRenderer = class {
     const visible = maxPane ? [maxPane] : this.scene.orderedPanes().filter((p) => !p.collapsed);
     const paneBottom = visible.length ? Math.max(...visible.map((p) => p.bounds.top + p.bounds.height)) : dataHeight;
     this.scrollBtnBottomPx = SCROLL_BTN_BOTTOM + Math.max(0, dataHeight - paneBottom);
+    this.mountContainer?.style.setProperty("--vela-bottom-gutter", `${TIME_AXIS_H + Math.max(0, dataHeight - paneBottom)}px`);
     this.scrollBtnRightPx = this.rightAxisW + SCROLL_BTN_RIGHT_INSET;
     if (this.scrollButton) {
       this.scrollButton.style.bottom = `${this.scrollBtnBottomPx}px`;
@@ -29559,30 +29818,33 @@ var NativeRenderer = class {
     if (w <= 0 || h <= 0) return;
     const dpr = window.devicePixelRatio || 1;
     this.plot.style.left = `${this.toolbarGutter}px`;
-    const pw = Math.max(1, w - this.toolbarGutter);
-    const ph = h;
-    this.dataCanvas.width = Math.round(pw * dpr);
-    this.dataCanvas.height = Math.round(ph * dpr);
-    this.backdropCanvas.width = this.dataCanvas.width;
-    this.backdropCanvas.height = this.dataCanvas.height;
-    this.volumeCanvas.width = this.dataCanvas.width;
-    this.volumeCanvas.height = this.dataCanvas.height;
-    for (const l of this.extLayers) {
-      l.canvas.width = this.dataCanvas.width;
-      l.canvas.height = this.dataCanvas.height;
-    }
-    this.vpvrCanvas.width = this.dataCanvas.width;
-    this.vpvrCanvas.height = this.dataCanvas.height;
-    this.chromeCanvas.width = this.dataCanvas.width;
-    this.chromeCanvas.height = this.dataCanvas.height;
-    this.drawingsCanvas.width = this.dataCanvas.width;
-    this.drawingsCanvas.height = this.dataCanvas.height;
-    this.cursorCanvas.width = this.dataCanvas.width;
-    this.cursorCanvas.height = this.dataCanvas.height;
+    const rect = this.plot.getBoundingClientRect();
+    let bw = Math.max(1, Math.round(rect.width * dpr));
+    let bh = Math.max(1, Math.round(rect.height * dpr));
+    const dev = this.plotDeviceSize;
+    if (dev && Math.abs(dev.width - rect.width * dpr) <= 1 && Math.abs(dev.height - rect.height * dpr) <= 1) {
+      bw = Math.max(1, dev.width);
+      bh = Math.max(1, dev.height);
+    }
+    const pw = bw / dpr;
+    const ph = bh / dpr;
+    const size = (canvas) => {
+      canvas.width = bw;
+      canvas.height = bh;
+      canvas.style.width = `${pw}px`;
+      canvas.style.height = `${ph}px`;
+    };
+    size(this.dataCanvas);
+    size(this.backdropCanvas);
+    size(this.volumeCanvas);
+    for (const l of this.extLayers) size(l.canvas);
+    size(this.vpvrCanvas);
+    size(this.chromeCanvas);
+    size(this.drawingsCanvas);
+    size(this.cursorCanvas);
     this.coords.setSize(Math.max(1, pw - this.rightAxisW), Math.max(1, ph - TIME_AXIS_H), dpr);
     this.scene.crosshair = null;
     this.layoutPanes();
-    this.repositionTables();
     this.userDrawings?.onResize();
     if (!this.didInitialFit && this.coords.barCount > 0) {
       this.fitContent();