@luxalgo/vela 0.6.4 → 0.6.5

package/dist/{chunk-6FA4TDUF.js → chunk-FQBT4NFM.js}

@@ -5699,6 +5699,12 @@ var SceneGraph = class {
   assignIndicatorZ(id) {
     if (!this.seriesZ.has(id)) this.seriesZ.set(id, this.bottomZ() - 1);
   }
+  /** Mount-time default for a LAYER-BACKED native (it paints on a canvas stacked above the
+   *  data canvas by default): top of the stack, so the recorded order tells the truth from
+   *  the first frame. Keeps an existing key, so a restored stack survives the remount. */
+  assignIndicatorZTop(id) {
+    if (!this.seriesZ.has(id)) this.seriesZ.set(id, this.topZ() + 1);
+  }
   forgetIndicatorZ(id) {
     this.seriesZ.delete(id);
   }
@@ -14717,6 +14723,19 @@ var VolumeRenderer = class {
   }
 };
 
+// src/renderers/native/core/layerStacking.ts
+function stackLayers(entries, candleZ) {
+  const keyed = entries.map((e) => ({
+    id: e.id,
+    key: e.ownerZ ?? (e.placement === "below-data" ? -Infinity : candleZ)
+  }));
+  keyed.sort((a, b) => a.key - b.key);
+  const below = [];
+  const above = [];
+  for (const k of keyed) (k.key < candleZ ? below : above).push(k.id);
+  return { below, above };
+}
+
 // src/renderers/native/chrome/luxalgo-logos.ts
 var LUXALGO_SYMBOL_SVG = '<svg viewBox="0 0 45 40" aria-hidden="true"><g fill="currentColor"><path d="m40.25 38 4.58-7.998L28.802 2l-16.03 28 9.16-.001 6.87-12z"/><path d="M34.525 32.002 9.33 31.997 27.655 0h-9.158L.18 31.993 4.759 40h34.347z"/></g></svg>';
 var LUXALGO_WORDMARK_SVG = '<svg viewBox="0 0 964 252" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M 614 94.500 L 614 189 633.500 189 L 653 189 653 94.500 L 653 0 633.500 0 L 614 0 614 94.500 M 0 97.500 L 0 189 63.023 189 L 126.045 189 125.773 170.750 L 125.500 152.500 84.250 152.239 L 43 151.978 43 78.989 L 43 6 21.500 6 L 0 6 0 97.500 M 450.387 96.451 C 421.871 146.253, 398.306 186.994, 398.020 186.987 C 397.423 186.972, 362 124.724, 362 123.691 C 362 123.316, 370.100 108.818, 380 91.472 C 389.900 74.127, 398 59.500, 398 58.968 C 398 58.380, 391.007 58, 380.210 58 L 362.420 58 348.060 83.138 C 334.400 107.052, 333.637 108.160, 332.399 105.888 C 331.682 104.575, 325.287 93.375, 318.187 81 L 305.277 58.500 287.139 58.227 C 277.162 58.078, 269 58.186, 269 58.469 C 269 58.751, 277.154 73.274, 287.120 90.741 C 297.086 108.209, 305.261 122.983, 305.287 123.574 C 305.312 124.164, 297.318 138.789, 287.522 156.074 C 277.725 173.358, 269.524 187.838, 269.296 188.250 C 269.068 188.662, 276.977 189, 286.870 189 L 304.859 189 319.163 163.959 C 331.321 142.674, 333.647 139.165, 334.670 140.563 C 335.331 141.468, 341.864 152.737, 349.186 165.606 L 362.500 189.003 402.442 188.752 L 442.384 188.500 472.080 136.695 C 488.413 108.203, 501.939 84.729, 502.138 84.531 C 502.337 84.333, 516 107.757, 532.500 136.583 L 562.500 188.994 584.750 188.997 C 596.987 188.999, 607 188.854, 607 188.675 C 607 188.319, 503.014 6.686, 502.532 6.201 C 502.369 6.037, 478.904 46.649, 450.387 96.451 M 717.500 55.017 C 697.175 57.389, 680.641 68.752, 672.036 86.264 C 665.866 98.818, 663.840 108.024, 663.840 123.500 C 663.840 133.409, 664.328 138.355, 665.892 144.300 C 672.076 167.810, 689.191 184.757, 711.529 189.489 C 730.549 193.518, 747.264 189.540, 761.282 177.648 C 764.944 174.542, 768.178 172, 768.470 172 C 769.345 172, 769.030 185.018, 767.979 192.285 C 765.618 208.613, 755.148 218.672, 738.473 220.632 C 732.586 221.324, 723.136 219.599, 717.709 216.843 C 712.693 214.295, 706.636 207.946, 703.972 202.443 C 702.789 199.999, 701.749 198, 701.661 198.001 C 700.201 198.007, 665.596 205.071, 665.230 205.437 C 664.326 206.341, 669.156 218.313, 672.607 223.721 C 682.146 238.672, 700.008 248.257, 723.500 251.033 C 758.132 255.124, 788.930 241.875, 800.287 218 C 806.923 204.047, 807 203.001, 807 126.542 L 807 58 788.500 58 L 770 58 770 66.500 C 770 71.175, 769.641 75, 769.203 75 C 768.765 75, 766.627 73.142, 764.453 70.872 C 752.805 58.708, 735.614 52.903, 717.500 55.017 M 878.500 55.031 C 850.107 59.412, 830.755 75.064, 822.285 100.500 C 819.905 107.644, 819.614 110.051, 819.565 123 C 819.501 139.581, 820.786 145.825, 826.763 158 C 832.104 168.880, 842.842 179.424, 854.077 184.822 C 867.651 191.343, 873.132 192.462, 891.500 192.462 C 909.868 192.462, 915.349 191.343, 928.923 184.822 C 944.653 177.265, 956.667 162.306, 961.710 144 C 963.074 139.048, 963.481 134.047, 963.418 123 C 963.346 110.140, 963.038 107.595, 960.694 100.500 C 953.325 78.193, 936.695 62.854, 913.500 56.969 C 904.262 54.625, 887.240 53.682, 878.500 55.031 M 134.015 102.750 C 134.027 139.250, 134.310 148.689, 135.549 153.947 C 141.139 177.663, 159.815 193, 183.105 193 C 196.453 193, 210.163 186.171, 217.936 175.650 C 219.826 173.093, 221.738 171, 222.186 171 C 222.634 171, 223 175.050, 223 180 L 223 189 242.507 189 L 262.014 189 261.757 123.750 L 261.500 58.500 242.500 58.500 L 223.500 58.500 223 99.500 C 222.513 139.406, 222.441 140.610, 220.289 144.634 C 209.729 164.377, 183.014 164.880, 174.299 145.500 C 172.677 141.895, 172.469 137.382, 172.190 99.750 L 171.880 58 152.940 58 L 134 58 134.015 102.750 M 729.932 87.998 C 719.311 89.821, 710.155 97.164, 705.141 107.880 C 702.851 112.772, 702.510 114.798, 702.505 123.521 C 702.500 132.834, 702.732 134.014, 705.787 140.218 C 709.761 148.290, 715.989 154.097, 723.853 157.063 C 731.409 159.912, 744.359 159.466, 750.795 156.136 C 767.289 147.601, 774.103 127.713, 767.019 108.780 C 761.433 93.851, 746.051 85.232, 729.932 87.998 M 883.972 88.348 C 865.749 92.310, 854.873 109.966, 858.119 130.316 C 860.933 147.963, 872.346 158.830, 889.084 159.799 C 900.714 160.472, 906.867 158.234, 914.650 150.497 C 919.856 145.323, 921.123 143.340, 922.900 137.587 C 925.412 129.456, 925.655 118.570, 923.489 111.275 C 918.479 94.405, 901.478 84.541, 883.972 88.348"/></svg>';
@@ -15217,6 +15236,8 @@ var NativeRenderer = class {
     this.volumeRenderer = new VolumeRenderer();
     /** SDK renderer layers instantiated at mount ({@link registerRendererLayer}). */
     this.extLayers = [];
+    /** Last applied layer-canvas order (ids below + above the data canvas) — re-slotted only on change. */
+    this.layerOrderSig = "";
     // The attribution mark (see chrome/AttributionMark + the NOTICE file): default-on;
     // disabling requires an equivalent visible attribution elsewhere in the host UI.
     this.attributionEl = null;
@@ -16147,9 +16168,7 @@ var NativeRenderer = class {
         if (el.getAttribute("data-vela-screenshot") === "under") rasterizeOverlay(ctx, el, frame);
       }
     }
-    const below = this.extLayers.filter((l) => l.def.placement === "below-data").map((l) => l.canvas);
-    const above = this.extLayers.filter((l) => l.def.placement !== "below-data").map((l) => l.canvas);
-    for (const canvas of [...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas]) {
+    for (const canvas of [...this.canvasPile(), this.chromeCanvas, this.drawingsCanvas]) {
       if (canvas && canvas.width > 0 && canvas.height > 0) ctx.drawImage(canvas, 0, 0);
     }
     if (frame) {
@@ -16283,6 +16302,7 @@ var NativeRenderer = class {
     const below = this.extLayers.filter((l) => l.def.placement === "below-data").map((l) => l.canvas);
     const above = this.extLayers.filter((l) => l.def.placement !== "below-data").map((l) => l.canvas);
     this.plot.append(...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas, this.cursorCanvas, this.overlayRoot);
+    this.layerOrderSig = "";
     this.wrapper.appendChild(this.plot);
     this.factoryConfig = this.getConfig();
     this.attributionEl = this.buildAttributionEl();
@@ -16811,7 +16831,8 @@ var NativeRenderer = class {
   mountIndicator(model) {
     this.scene.indicators.set(model.id, model);
     this.refreshAnchorOffset(model);
-    this.scene.assignIndicatorZ(model.id);
+    if (model.native && this.extLayers.some((l) => l.def.id === model.native.type)) this.scene.assignIndicatorZTop(model.id);
+    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 } : {}
@@ -17630,10 +17651,17 @@ var NativeRenderer = class {
     const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
     for (const l of this.extLayers) {
       if (!l.def.repaintOnCursor) continue;
-      l.instance.render(this.extLayerArgs(l.def.id, pane.scale, pane.bounds, nowMs));
+      const lp = this.layerPane(l.def.id) ?? pane;
+      if (lp.collapsed) continue;
+      l.instance.render(this.extLayerArgs(l.def.id, lp.scale, lp.bounds, nowMs));
       if (this.animZoom && l.instance.animating?.()) this.animator.start();
     }
   }
+  /** Blank one SDK layer canvas (a collapsed host pane suppresses the layer's painting). */
+  clearLayerCanvas(canvas) {
+    if (canvas.width === 0 || canvas.height === 0) return;
+    canvas.getContext("2d")?.clearRect(0, 0, canvas.width, canvas.height);
+  }
   /** One frame's args for an SDK renderer layer (shared by the data + cursor paint paths). */
   extLayerArgs(id, scale, bounds, nowMs) {
     return {
@@ -17652,6 +17680,7 @@ var NativeRenderer = class {
   }
   /** Paint the below-data (L-1) + geometry (L0) + chrome (L1) layers from the current scene/coords. */
   paintData() {
+    this.syncLayerCanvasOrder();
     this.stampScaleInvert();
     this.backend.modelAlpha = this.modelAlpha;
     this.backend.candleBodyAlpha = this.candleBodyAlpha;
@@ -17682,9 +17711,14 @@ var NativeRenderer = class {
       const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
       let folded = null;
       for (const l of this.extLayers) {
-        const args = this.extLayerArgs(l.def.id, pane.scale, pane.bounds, nowMs);
+        const lp = this.layerPane(l.def.id) ?? pane;
+        if (lp.collapsed) {
+          this.clearLayerCanvas(l.canvas);
+          continue;
+        }
+        const args = this.extLayerArgs(l.def.id, lp.scale, lp.bounds, nowMs);
         l.instance.render(args);
-        folded = foldBaseModulation(folded, l.instance.modulateBase?.(args) ?? null);
+        if (lp === pane) folded = foldBaseModulation(folded, l.instance.modulateBase?.(args) ?? null);
         if (this.animZoom && l.instance.animating?.()) this.animator.start();
       }
       if (folded) {
@@ -17846,6 +17880,9 @@ var NativeRenderer = class {
           pane.scaleTarget = { min: 0, max: maxVol / VOLUME_PANE_FILL_FRAC };
           pane.axisFormat = "volume";
         }
+      } else if (this.layerNativesOwnPane(pane, masterModels)) {
+        pane.scaleTarget = computePaneScale([], this.bars, true, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id));
+        pane.percentBaseline = this.bars[i0]?.close ?? 0;
       }
       if (pane === pricePane && this.scene.tradeMarkers.visible && pane.bounds.height > 0) {
         const th = this.tradesScaleHints(vr);
@@ -17932,6 +17969,59 @@ var NativeRenderer = class {
     }
     return null;
   }
+  /** The mounted native indicator that OWNS an SDK layer — the one whose type equals the
+   *  layer id (the id doubles as the data channel, so the pairing is the SDK's own
+   *  contract). Null for chart-type channels and while the owner is hidden (a hidden
+   *  indicator leaves the scene; its cleared data channel paints nothing anyway). */
+  layerOwner(layerId) {
+    for (const m of this.scene.indicators.values()) {
+      if (m.native?.type === layerId) return m;
+    }
+    return null;
+  }
+  /** The pane an SDK layer paints on: its owner's pane, else the price pane. */
+  layerPane(layerId) {
+    const owner = this.layerOwner(layerId);
+    const paneId = owner ? owner.paneId ?? PRICE_PANE_ID : PRICE_PANE_ID;
+    return this.scene.panes.get(paneId) ?? null;
+  }
+  /** The SDK layer canvases split around the data canvas, each side back-to-front:
+   *  owned layers by their owner's z key against the candles' (an indicator restacked
+   *  below the candles takes its layer canvas along), unowned by declared placement. */
+  orderedLayerCanvases() {
+    const byId = new Map(this.extLayers.map((l) => [l.def.id, l.canvas]));
+    const { below, above } = stackLayers(
+      this.extLayers.map((l) => {
+        const owner = this.layerOwner(l.def.id);
+        return {
+          id: l.def.id,
+          placement: l.def.placement === "below-data" ? "below-data" : "above-data",
+          ownerZ: owner ? this.scene.zOf(owner.id) : null
+        };
+      }),
+      this.scene.candleZ
+    );
+    return { below: below.map((id) => byId.get(id)), above: above.map((id) => byId.get(id)) };
+  }
+  /** The full canvas pile in paint order (layers + data/volume/vpvr) — what the DOM
+   *  stacking and the screenshot compositor must both follow. */
+  canvasPile() {
+    const { below, above } = this.orderedLayerCanvases();
+    return [...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above];
+  }
+  /** Re-slot the SDK layer canvases in the plot when the computed order changed (a z
+   *  write, a restored config, an indicator mount/remove/restack). Runs at the top of
+   *  every data frame; a no-op when the signature is unchanged. Re-inserting an
+   *  absolutely-positioned, pointer-transparent canvas repaints nothing by itself. */
+  syncLayerCanvasOrder() {
+    if (this.extLayers.length === 0 || !this.plot) return;
+    const { below, above } = this.orderedLayerCanvases();
+    const sig = [...below.map((c) => this.extLayers.find((l) => l.canvas === c).def.id), "|", ...above.map((c) => this.extLayers.find((l) => l.canvas === c).def.id)].join(",");
+    if (sig === this.layerOrderSig) return;
+    this.layerOrderSig = sig;
+    for (const c of below) this.plot.insertBefore(c, this.dataCanvas);
+    for (const c of above) this.plot.insertBefore(c, this.chromeCanvas);
+  }
   /** True when an active volume layer is this study pane's ONLY content — so its scale should
    *  come from volume, not the empty {0,1} placeholder. (In the price pane, or alongside a real
    *  series, volume stays a bottom overlay and the master scale wins.) */
@@ -17941,6 +18031,15 @@ var NativeRenderer = class {
     if (this.nativeLayerPane("volume") !== pane) return false;
     return masterModels.every((m) => m.native?.type === "volume");
   }
+  /** True when this study pane's master content is only SDK-layer natives (series-less
+   *  models whose type names a mounted layer) — its scale then follows the visible bars
+   *  (see the call site). Any real master series takes over the scale as usual. */
+  layerNativesOwnPane(pane, masterModels) {
+    if (pane.kind === "price" || masterModels.length === 0) return false;
+    return masterModels.every(
+      (m) => m.series.length === 0 && !!m.native && this.extLayers.some((l) => l.def.id === m.native.type)
+    );
+  }
   /** Per-pane scale state for a host UI (e.g. a price-axis context menu): the pane's pixel
    *  band (`top`/`height`, so a click y maps to a pane) plus its current axis `mode`/`log`.
    *  Top-to-bottom order. Every pane is independent — the price pane from the scene setting,

package/dist/{chunk-3QX6QOCX.js → chunk-N6MBJHMV.js}

@@ -1,4 +1,4 @@
-import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel } from './chunk-6FA4TDUF.js';
+import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel } from './chunk-FQBT4NFM.js';
 import { chartType, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, getDrawingType } from './chunk-BEJ57HP4.js';
 import { Tooltip, Drawer } from './chunk-2R7BANEM.js';
 import { Menu, Dialog } from './chunk-OICPLNU7.js';
@@ -1751,6 +1751,7 @@ var CSS6 = `
 .vela-sp-badge[data-p='hyperliquid'] { color: #50d2c1; } /* palette-exempt: venue brand mark */
 .vela-sp-empty { padding: var(--vela-space-3); color: var(--vela-fg-muted); text-align: center; }
 `;
+var PAGE = 100;
 var SymbolPicker = class {
   constructor(opts) {
     this.source = () => [];
@@ -1758,6 +1759,7 @@ var SymbolPicker = class {
     this.highlighted = 0;
     this.seed = "";
     this.activeTab = "All";
+    this.visible = PAGE;
     const doc = (opts.host ?? document.body).ownerDocument;
     injectStyles(STYLE_ID6, CSS6, doc);
     this.input = doc.createElement("input");
@@ -1784,6 +1786,12 @@ var SymbolPicker = class {
     }
     this.list = doc.createElement("div");
     this.list.className = "vela-sp-list";
+    this.list.addEventListener("scroll", () => {
+      if (this.rows.length < this.visible) return;
+      if (this.list.scrollTop + this.list.clientHeight < this.list.scrollHeight - 200) return;
+      this.visible += PAGE;
+      this.grow();
+    });
     this.dialog = new Dialog({
       title: "Symbol Search",
       host: opts.host,
@@ -1849,11 +1857,15 @@ var SymbolPicker = class {
       } else delete el.dataset.highlighted;
     });
   }
-  refresh() {
-    const doc = this.list.ownerDocument;
+  computeRows() {
     const TAB_TYPES = { Crypto: ["crypto"], Stocks: ["stock"], ETFs: ["etf"], Forex: ["forex"], Commodities: ["commodity"] };
     const pool = this.activeTab === "All" ? this.source() : this.source().filter((s) => TAB_TYPES[this.activeTab]?.includes((s.type ?? "").toLowerCase()) || this.activeTab === "Crypto" && (s.type ?? "").toLowerCase() === "futures");
-    this.rows = filterSymbols(pool, this.input.value);
+    return filterSymbols(pool, this.input.value, this.visible);
+  }
+  refresh() {
+    const doc = this.list.ownerDocument;
+    this.visible = PAGE;
+    this.rows = this.computeRows();
     this.highlighted = 0;
     this.list.replaceChildren();
     if (!this.rows.length) {
@@ -1863,34 +1875,42 @@ var SymbolPicker = class {
       this.list.appendChild(empty);
       return;
     }
-    for (const s of this.rows) {
-      const row = doc.createElement("div");
-      row.className = "vela-sp-row";
-      row.dataset.ticker = s.ticker;
-      const venue = s.prefix ?? s.provider;
-      if (venue) row.dataset.venue = venue;
-      const av = tickerIconEl(doc, baseOf(s), s.ticker, "vela-sp-avatar");
-      const main = doc.createElement("span");
-      main.className = "vela-sp-main";
-      const t = doc.createElement("span");
-      t.className = "vela-sp-ticker";
-      t.textContent = s.ticker;
-      const d = doc.createElement("span");
-      d.className = "vela-sp-desc";
-      d.textContent = s.description ?? (s.type ?? "");
-      main.append(t, d);
-      row.append(av, main);
-      if (venue) {
-        const badge = doc.createElement("span");
-        badge.className = "vela-sp-badge";
-        badge.dataset.p = s.provider ?? venue;
-        badge.textContent = venue;
-        row.appendChild(badge);
-      }
-      this.list.appendChild(row);
-    }
+    for (const s of this.rows) this.list.appendChild(this.rowEl(s));
     this.renderHighlight();
   }
+  /** Append the page the grown `visible` just uncovered — rows already on screen stay put. */
+  grow() {
+    const already = this.rows.length;
+    this.rows = this.computeRows();
+    for (const s of this.rows.slice(already)) this.list.appendChild(this.rowEl(s));
+  }
+  rowEl(s) {
+    const doc = this.list.ownerDocument;
+    const row = doc.createElement("div");
+    row.className = "vela-sp-row";
+    row.dataset.ticker = s.ticker;
+    const venue = s.prefix ?? s.provider;
+    if (venue) row.dataset.venue = venue;
+    const av = tickerIconEl(doc, baseOf(s), s.ticker, "vela-sp-avatar");
+    const main = doc.createElement("span");
+    main.className = "vela-sp-main";
+    const t = doc.createElement("span");
+    t.className = "vela-sp-ticker";
+    t.textContent = s.ticker;
+    const d = doc.createElement("span");
+    d.className = "vela-sp-desc";
+    d.textContent = s.description ?? (s.type ?? "");
+    main.append(t, d);
+    row.append(av, main);
+    if (venue) {
+      const badge = doc.createElement("span");
+      badge.className = "vela-sp-badge";
+      badge.dataset.p = s.provider ?? venue;
+      badge.textContent = venue;
+      row.appendChild(badge);
+    }
+    return row;
+  }
 };
 
 // src/widget/object-tree-model.ts

package/dist/index.cjs

@@ -15344,6 +15344,12 @@ var SceneGraph = class {
   assignIndicatorZ(id) {
     if (!this.seriesZ.has(id)) this.seriesZ.set(id, this.bottomZ() - 1);
   }
+  /** Mount-time default for a LAYER-BACKED native (it paints on a canvas stacked above the
+   *  data canvas by default): top of the stack, so the recorded order tells the truth from
+   *  the first frame. Keeps an existing key, so a restored stack survives the remount. */
+  assignIndicatorZTop(id) {
+    if (!this.seriesZ.has(id)) this.seriesZ.set(id, this.topZ() + 1);
+  }
   forgetIndicatorZ(id) {
     this.seriesZ.delete(id);
   }
@@ -25102,6 +25108,19 @@ function rendererLayers() {
   return [...registry3.values()];
 }
 
+// src/renderers/native/core/layerStacking.ts
+function stackLayers(entries, candleZ) {
+  const keyed = entries.map((e) => ({
+    id: e.id,
+    key: e.ownerZ ?? (e.placement === "below-data" ? -Infinity : candleZ)
+  }));
+  keyed.sort((a, b) => a.key - b.key);
+  const below = [];
+  const above = [];
+  for (const k of keyed) (k.key < candleZ ? below : above).push(k.id);
+  return { below, above };
+}
+
 // src/renderers/native/chrome/luxalgo-logos.ts
 var LUXALGO_SYMBOL_SVG = '<svg viewBox="0 0 45 40" aria-hidden="true"><g fill="currentColor"><path d="m40.25 38 4.58-7.998L28.802 2l-16.03 28 9.16-.001 6.87-12z"/><path d="M34.525 32.002 9.33 31.997 27.655 0h-9.158L.18 31.993 4.759 40h34.347z"/></g></svg>';
 var LUXALGO_WORDMARK_SVG = '<svg viewBox="0 0 964 252" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M 614 94.500 L 614 189 633.500 189 L 653 189 653 94.500 L 653 0 633.500 0 L 614 0 614 94.500 M 0 97.500 L 0 189 63.023 189 L 126.045 189 125.773 170.750 L 125.500 152.500 84.250 152.239 L 43 151.978 43 78.989 L 43 6 21.500 6 L 0 6 0 97.500 M 450.387 96.451 C 421.871 146.253, 398.306 186.994, 398.020 186.987 C 397.423 186.972, 362 124.724, 362 123.691 C 362 123.316, 370.100 108.818, 380 91.472 C 389.900 74.127, 398 59.500, 398 58.968 C 398 58.380, 391.007 58, 380.210 58 L 362.420 58 348.060 83.138 C 334.400 107.052, 333.637 108.160, 332.399 105.888 C 331.682 104.575, 325.287 93.375, 318.187 81 L 305.277 58.500 287.139 58.227 C 277.162 58.078, 269 58.186, 269 58.469 C 269 58.751, 277.154 73.274, 287.120 90.741 C 297.086 108.209, 305.261 122.983, 305.287 123.574 C 305.312 124.164, 297.318 138.789, 287.522 156.074 C 277.725 173.358, 269.524 187.838, 269.296 188.250 C 269.068 188.662, 276.977 189, 286.870 189 L 304.859 189 319.163 163.959 C 331.321 142.674, 333.647 139.165, 334.670 140.563 C 335.331 141.468, 341.864 152.737, 349.186 165.606 L 362.500 189.003 402.442 188.752 L 442.384 188.500 472.080 136.695 C 488.413 108.203, 501.939 84.729, 502.138 84.531 C 502.337 84.333, 516 107.757, 532.500 136.583 L 562.500 188.994 584.750 188.997 C 596.987 188.999, 607 188.854, 607 188.675 C 607 188.319, 503.014 6.686, 502.532 6.201 C 502.369 6.037, 478.904 46.649, 450.387 96.451 M 717.500 55.017 C 697.175 57.389, 680.641 68.752, 672.036 86.264 C 665.866 98.818, 663.840 108.024, 663.840 123.500 C 663.840 133.409, 664.328 138.355, 665.892 144.300 C 672.076 167.810, 689.191 184.757, 711.529 189.489 C 730.549 193.518, 747.264 189.540, 761.282 177.648 C 764.944 174.542, 768.178 172, 768.470 172 C 769.345 172, 769.030 185.018, 767.979 192.285 C 765.618 208.613, 755.148 218.672, 738.473 220.632 C 732.586 221.324, 723.136 219.599, 717.709 216.843 C 712.693 214.295, 706.636 207.946, 703.972 202.443 C 702.789 199.999, 701.749 198, 701.661 198.001 C 700.201 198.007, 665.596 205.071, 665.230 205.437 C 664.326 206.341, 669.156 218.313, 672.607 223.721 C 682.146 238.672, 700.008 248.257, 723.500 251.033 C 758.132 255.124, 788.930 241.875, 800.287 218 C 806.923 204.047, 807 203.001, 807 126.542 L 807 58 788.500 58 L 770 58 770 66.500 C 770 71.175, 769.641 75, 769.203 75 C 768.765 75, 766.627 73.142, 764.453 70.872 C 752.805 58.708, 735.614 52.903, 717.500 55.017 M 878.500 55.031 C 850.107 59.412, 830.755 75.064, 822.285 100.500 C 819.905 107.644, 819.614 110.051, 819.565 123 C 819.501 139.581, 820.786 145.825, 826.763 158 C 832.104 168.880, 842.842 179.424, 854.077 184.822 C 867.651 191.343, 873.132 192.462, 891.500 192.462 C 909.868 192.462, 915.349 191.343, 928.923 184.822 C 944.653 177.265, 956.667 162.306, 961.710 144 C 963.074 139.048, 963.481 134.047, 963.418 123 C 963.346 110.140, 963.038 107.595, 960.694 100.500 C 953.325 78.193, 936.695 62.854, 913.500 56.969 C 904.262 54.625, 887.240 53.682, 878.500 55.031 M 134.015 102.750 C 134.027 139.250, 134.310 148.689, 135.549 153.947 C 141.139 177.663, 159.815 193, 183.105 193 C 196.453 193, 210.163 186.171, 217.936 175.650 C 219.826 173.093, 221.738 171, 222.186 171 C 222.634 171, 223 175.050, 223 180 L 223 189 242.507 189 L 262.014 189 261.757 123.750 L 261.500 58.500 242.500 58.500 L 223.500 58.500 223 99.500 C 222.513 139.406, 222.441 140.610, 220.289 144.634 C 209.729 164.377, 183.014 164.880, 174.299 145.500 C 172.677 141.895, 172.469 137.382, 172.190 99.750 L 171.880 58 152.940 58 L 134 58 134.015 102.750 M 729.932 87.998 C 719.311 89.821, 710.155 97.164, 705.141 107.880 C 702.851 112.772, 702.510 114.798, 702.505 123.521 C 702.500 132.834, 702.732 134.014, 705.787 140.218 C 709.761 148.290, 715.989 154.097, 723.853 157.063 C 731.409 159.912, 744.359 159.466, 750.795 156.136 C 767.289 147.601, 774.103 127.713, 767.019 108.780 C 761.433 93.851, 746.051 85.232, 729.932 87.998 M 883.972 88.348 C 865.749 92.310, 854.873 109.966, 858.119 130.316 C 860.933 147.963, 872.346 158.830, 889.084 159.799 C 900.714 160.472, 906.867 158.234, 914.650 150.497 C 919.856 145.323, 921.123 143.340, 922.900 137.587 C 925.412 129.456, 925.655 118.570, 923.489 111.275 C 918.479 94.405, 901.478 84.541, 883.972 88.348"/></svg>';
@@ -25602,6 +25621,8 @@ var NativeRenderer = class {
     this.volumeRenderer = new VolumeRenderer();
     /** SDK renderer layers instantiated at mount ({@link registerRendererLayer}). */
     this.extLayers = [];
+    /** Last applied layer-canvas order (ids below + above the data canvas) — re-slotted only on change. */
+    this.layerOrderSig = "";
     // The attribution mark (see chrome/AttributionMark + the NOTICE file): default-on;
     // disabling requires an equivalent visible attribution elsewhere in the host UI.
     this.attributionEl = null;
@@ -26532,9 +26553,7 @@ var NativeRenderer = class {
         if (el.getAttribute("data-vela-screenshot") === "under") rasterizeOverlay(ctx, el, frame);
       }
     }
-    const below = this.extLayers.filter((l) => l.def.placement === "below-data").map((l) => l.canvas);
-    const above = this.extLayers.filter((l) => l.def.placement !== "below-data").map((l) => l.canvas);
-    for (const canvas of [...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas]) {
+    for (const canvas of [...this.canvasPile(), this.chromeCanvas, this.drawingsCanvas]) {
       if (canvas && canvas.width > 0 && canvas.height > 0) ctx.drawImage(canvas, 0, 0);
     }
     if (frame) {
@@ -26668,6 +26687,7 @@ var NativeRenderer = class {
     const below = this.extLayers.filter((l) => l.def.placement === "below-data").map((l) => l.canvas);
     const above = this.extLayers.filter((l) => l.def.placement !== "below-data").map((l) => l.canvas);
     this.plot.append(...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas, this.cursorCanvas, this.overlayRoot);
+    this.layerOrderSig = "";
     this.wrapper.appendChild(this.plot);
     this.factoryConfig = this.getConfig();
     this.attributionEl = this.buildAttributionEl();
@@ -27196,7 +27216,8 @@ var NativeRenderer = class {
   mountIndicator(model) {
     this.scene.indicators.set(model.id, model);
     this.refreshAnchorOffset(model);
-    this.scene.assignIndicatorZ(model.id);
+    if (model.native && this.extLayers.some((l) => l.def.id === model.native.type)) this.scene.assignIndicatorZTop(model.id);
+    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 } : {}
@@ -28015,10 +28036,17 @@ var NativeRenderer = class {
     const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
     for (const l of this.extLayers) {
       if (!l.def.repaintOnCursor) continue;
-      l.instance.render(this.extLayerArgs(l.def.id, pane.scale, pane.bounds, nowMs));
+      const lp = this.layerPane(l.def.id) ?? pane;
+      if (lp.collapsed) continue;
+      l.instance.render(this.extLayerArgs(l.def.id, lp.scale, lp.bounds, nowMs));
       if (this.animZoom && l.instance.animating?.()) this.animator.start();
     }
   }
+  /** Blank one SDK layer canvas (a collapsed host pane suppresses the layer's painting). */
+  clearLayerCanvas(canvas) {
+    if (canvas.width === 0 || canvas.height === 0) return;
+    canvas.getContext("2d")?.clearRect(0, 0, canvas.width, canvas.height);
+  }
   /** One frame's args for an SDK renderer layer (shared by the data + cursor paint paths). */
   extLayerArgs(id, scale, bounds, nowMs) {
     return {
@@ -28037,6 +28065,7 @@ var NativeRenderer = class {
   }
   /** Paint the below-data (L-1) + geometry (L0) + chrome (L1) layers from the current scene/coords. */
   paintData() {
+    this.syncLayerCanvasOrder();
     this.stampScaleInvert();
     this.backend.modelAlpha = this.modelAlpha;
     this.backend.candleBodyAlpha = this.candleBodyAlpha;
@@ -28067,9 +28096,14 @@ var NativeRenderer = class {
       const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
       let folded = null;
       for (const l of this.extLayers) {
-        const args = this.extLayerArgs(l.def.id, pane.scale, pane.bounds, nowMs);
+        const lp = this.layerPane(l.def.id) ?? pane;
+        if (lp.collapsed) {
+          this.clearLayerCanvas(l.canvas);
+          continue;
+        }
+        const args = this.extLayerArgs(l.def.id, lp.scale, lp.bounds, nowMs);
         l.instance.render(args);
-        folded = foldBaseModulation(folded, l.instance.modulateBase?.(args) ?? null);
+        if (lp === pane) folded = foldBaseModulation(folded, l.instance.modulateBase?.(args) ?? null);
         if (this.animZoom && l.instance.animating?.()) this.animator.start();
       }
       if (folded) {
@@ -28231,6 +28265,9 @@ var NativeRenderer = class {
           pane.scaleTarget = { min: 0, max: maxVol / VOLUME_PANE_FILL_FRAC };
           pane.axisFormat = "volume";
         }
+      } else if (this.layerNativesOwnPane(pane, masterModels)) {
+        pane.scaleTarget = computePaneScale([], this.bars, true, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id));
+        pane.percentBaseline = this.bars[i0]?.close ?? 0;
       }
       if (pane === pricePane && this.scene.tradeMarkers.visible && pane.bounds.height > 0) {
         const th = this.tradesScaleHints(vr);
@@ -28317,6 +28354,59 @@ var NativeRenderer = class {
     }
     return null;
   }
+  /** The mounted native indicator that OWNS an SDK layer — the one whose type equals the
+   *  layer id (the id doubles as the data channel, so the pairing is the SDK's own
+   *  contract). Null for chart-type channels and while the owner is hidden (a hidden
+   *  indicator leaves the scene; its cleared data channel paints nothing anyway). */
+  layerOwner(layerId) {
+    for (const m of this.scene.indicators.values()) {
+      if (m.native?.type === layerId) return m;
+    }
+    return null;
+  }
+  /** The pane an SDK layer paints on: its owner's pane, else the price pane. */
+  layerPane(layerId) {
+    const owner = this.layerOwner(layerId);
+    const paneId = owner ? owner.paneId ?? PRICE_PANE_ID : PRICE_PANE_ID;
+    return this.scene.panes.get(paneId) ?? null;
+  }
+  /** The SDK layer canvases split around the data canvas, each side back-to-front:
+   *  owned layers by their owner's z key against the candles' (an indicator restacked
+   *  below the candles takes its layer canvas along), unowned by declared placement. */
+  orderedLayerCanvases() {
+    const byId = new Map(this.extLayers.map((l) => [l.def.id, l.canvas]));
+    const { below, above } = stackLayers(
+      this.extLayers.map((l) => {
+        const owner = this.layerOwner(l.def.id);
+        return {
+          id: l.def.id,
+          placement: l.def.placement === "below-data" ? "below-data" : "above-data",
+          ownerZ: owner ? this.scene.zOf(owner.id) : null
+        };
+      }),
+      this.scene.candleZ
+    );
+    return { below: below.map((id) => byId.get(id)), above: above.map((id) => byId.get(id)) };
+  }
+  /** The full canvas pile in paint order (layers + data/volume/vpvr) — what the DOM
+   *  stacking and the screenshot compositor must both follow. */
+  canvasPile() {
+    const { below, above } = this.orderedLayerCanvases();
+    return [...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above];
+  }
+  /** Re-slot the SDK layer canvases in the plot when the computed order changed (a z
+   *  write, a restored config, an indicator mount/remove/restack). Runs at the top of
+   *  every data frame; a no-op when the signature is unchanged. Re-inserting an
+   *  absolutely-positioned, pointer-transparent canvas repaints nothing by itself. */
+  syncLayerCanvasOrder() {
+    if (this.extLayers.length === 0 || !this.plot) return;
+    const { below, above } = this.orderedLayerCanvases();
+    const sig = [...below.map((c) => this.extLayers.find((l) => l.canvas === c).def.id), "|", ...above.map((c) => this.extLayers.find((l) => l.canvas === c).def.id)].join(",");
+    if (sig === this.layerOrderSig) return;
+    this.layerOrderSig = sig;
+    for (const c of below) this.plot.insertBefore(c, this.dataCanvas);
+    for (const c of above) this.plot.insertBefore(c, this.chromeCanvas);
+  }
   /** True when an active volume layer is this study pane's ONLY content — so its scale should
    *  come from volume, not the empty {0,1} placeholder. (In the price pane, or alongside a real
    *  series, volume stays a bottom overlay and the master scale wins.) */
@@ -28326,6 +28416,15 @@ var NativeRenderer = class {
     if (this.nativeLayerPane("volume") !== pane) return false;
     return masterModels.every((m) => m.native?.type === "volume");
   }
+  /** True when this study pane's master content is only SDK-layer natives (series-less
+   *  models whose type names a mounted layer) — its scale then follows the visible bars
+   *  (see the call site). Any real master series takes over the scale as usual. */
+  layerNativesOwnPane(pane, masterModels) {
+    if (pane.kind === "price" || masterModels.length === 0) return false;
+    return masterModels.every(
+      (m) => m.series.length === 0 && !!m.native && this.extLayers.some((l) => l.def.id === m.native.type)
+    );
+  }
   /** Per-pane scale state for a host UI (e.g. a price-axis context menu): the pane's pixel
    *  band (`top`/`height`, so a click y maps to a pane) plus its current axis `mode`/`log`.
    *  Top-to-bottom order. Every pane is independent — the price pane from the scene setting,

package/dist/index.d.cts

@@ -3,7 +3,7 @@ export { B as BarsChangeReason, C as ContextSelect, b as DataControl, c as Drawi
 import { D as Drawing, S as SerializedDrawing, U as Unsubscribe, L as LineStyle, P as PriceStyle, I as IChartRenderer, R as RendererCapabilities, e as RendererDisplayOptions, f as IndicatorRenderHandle, g as IndicatorStatus, c as VelaTheme, O as OHLCV, h as Pane, i as PaneAction, j as MoveTarget, k as IndicatorModel, l as ScenePatch, m as InputValue, n as SymbolPickerFn, o as LegendActionView, p as InputChangeEvent, T as ThemeName, C as CrosshairEvent, q as ClickEvent, A as AxisLongPressEvent, a as VisibleRange, r as DataWindowReadout, s as IDrawingsRendererPort, t as Millis, u as SnapMode, v as DrawingTypeKey, w as ToolbarDefinition, M as MarketConfig } from './options-YdiaaVjt.cjs';
 export { x as AddIndicatorOptions, B as Background, y as BoxFontFamily, z as BoxHAlign, E as BoxTextSize, F as BoxVAlign, G as CandleBarColor, H as CandleSeries, J as CandleStyle, K as DataWindowGroup, Q as DataWindowOHLC, W as DataWindowRow, X as DirtyRange, Y as DrawingBox, Z as DrawingExtend, _ as DrawingIntent, $ as DrawingLabel, a0 as DrawingLine, a1 as DrawingLinefill, a2 as DrawingMode, a3 as DrawingPoint, a4 as DrawingPolyline, a5 as DrawingStyle, a6 as DrawingTable, a7 as DrawingText, a8 as DrawingXLoc, a9 as DrawingsOption, aa as Fill, ab as FillGradientStop, ac as IndicatorMeta, ad as InputCondition, ae as InputSchema, af as InputType, ag as InputWhen, ah as LabelStyle, ai as LabelYLoc, aj as LineLikeKind, ak as LineLikeSeries, al as LineLikeStyle, am as MarkerPoint, an as MarkerSeries, ao as MarketSnapshot, ap as MarketSwitch, aq as PaneHint, ar as PaneKind, as as PolylinePoint, at as PriceLine, au as Projector, av as ProviderName, aw as RendererConstructor, ax as Scene, ay as SchemaPatch, az as SeriesKind, aA as SeriesPoint, aB as SeriesSpec, aC as SeriesValueDelta, aD as SettingsField, aE as SettingsSchema, aF as TableCell, aG as TableMerge, aH as TablePosition, aI as ToolbarGroupConfig, aJ as TradeExecution, aK as ValuePatch, b as VelaOptions, V as VisibleRangePreset, aL as buildToolbar, aM as defaultToolbar, aN as inputVisible } from './options-YdiaaVjt.cjs';
 import { M as MarketDataFeed, D as DataProvider, P as ProviderInfo, a as SymbolDescriptor, S as SymbolInfo, b as ProviderCapabilities, B as BarRange } from './DataProvider-DrN7ZIou.cjs';
-export { A as ACCENT, a as ACCENT_BRIGHT, B as BEARISH, b as BULLISH, c as BarTransform, d as BasePaintingModulation, C as CATEGORICAL, e as CROSSHAIR, f as ChartTypeDefinition, g as ChartTypeSettingsInstance, h as ChartTypeSettingsSection, i as ChartTypeSettingsSubsection, D as DrawingTypeMeta, H as HIGHLIGHT, I as INFO, j as INVALID, k as IdentifiableKind, M as MARKER, N as NEUTRAL, l as NormalizedSettingsRow, R as RendererLayerArgs, m as RendererLayerDefinition, n as RendererLayerInstance, S as SERIES_LINE, o as SESSION_OFF, p as SESSION_POST, q as SESSION_PRE, r as SLATE, s as SLATE_DEEP, t as SeriesDataEngine, u as SeriesDataEngineHost, v as SettingsInlineControl, w as SettingsRowCondition, x as SettingsRowDescriptor, y as SettingsRowInlineNumber, z as SettingsRowSwatch, E as SettingsRowValueKey, F as SettingsRowWhen, G as SettingsRowWidth, J as SettingsSelectOption, K as SettingsValueRow, T as TRADE_EXIT, L as TRADE_LONG, O as TRADE_SHORT, V as VALID, W as WARNING, P as categoricalColor, Q as chartType, U as chartTypes, X as createDrawing, Y as deserializeDrawing, Z as drawingTypes, _ as getDrawingType, $ as normalizeSettingsRow, a0 as registerChartType, a1 as registerDrawingType, a2 as registerRendererDefaults, a3 as registerRendererLayer, a4 as rendererDefaults, a5 as rendererLayers, a6 as settingsRowValueKeys, a7 as stableSeriesId, a8 as tickerModifierIds, a9 as unregisterChartType, aa as unregisterRendererDefaults, ab as unregisterRendererLayer } from './plugin-CkiStRaI.cjs';
+export { A as ACCENT, a as ACCENT_BRIGHT, B as BEARISH, b as BULLISH, c as BarTransform, d as BasePaintingModulation, C as CATEGORICAL, e as CROSSHAIR, f as ChartTypeDefinition, g as ChartTypeSettingsInstance, h as ChartTypeSettingsSection, i as ChartTypeSettingsSubsection, D as DrawingTypeMeta, H as HIGHLIGHT, I as INFO, j as INVALID, k as IdentifiableKind, M as MARKER, N as NEUTRAL, l as NormalizedSettingsRow, R as RendererLayerArgs, m as RendererLayerDefinition, n as RendererLayerInstance, S as SERIES_LINE, o as SESSION_OFF, p as SESSION_POST, q as SESSION_PRE, r as SLATE, s as SLATE_DEEP, t as SeriesDataEngine, u as SeriesDataEngineHost, v as SettingsInlineControl, w as SettingsRowCondition, x as SettingsRowDescriptor, y as SettingsRowInlineNumber, z as SettingsRowSwatch, E as SettingsRowValueKey, F as SettingsRowWhen, G as SettingsRowWidth, J as SettingsSelectOption, K as SettingsValueRow, T as TRADE_EXIT, L as TRADE_LONG, O as TRADE_SHORT, V as VALID, W as WARNING, P as categoricalColor, Q as chartType, U as chartTypes, X as createDrawing, Y as deserializeDrawing, Z as drawingTypes, _ as getDrawingType, $ as normalizeSettingsRow, a0 as registerChartType, a1 as registerDrawingType, a2 as registerRendererDefaults, a3 as registerRendererLayer, a4 as rendererDefaults, a5 as rendererLayers, a6 as settingsRowValueKeys, a7 as stableSeriesId, a8 as tickerModifierIds, a9 as unregisterChartType, aa as unregisterRendererDefaults, ab as unregisterRendererLayer } from './plugin-DO_DX0gp.cjs';
 export { D as DEFAULT_PANEL_MAX_WIDTH, a as DEFAULT_PANEL_MIN_WIDTH, b as DEFAULT_PANEL_WIDTH, S as SidePanelOptions, c as clampPanelWidth } from './side-panel-CT9ZwIGz.cjs';
 export { i as iconMarkup, r as registerIcon } from './icons-BZYbJXSV.cjs';
 export { a as KeyBindingDescriptor, R as ResolvedBinding } from './keymap-CGOz5F5f.cjs';
@@ -342,6 +342,8 @@ declare class NativeRenderer implements IChartRenderer {
     private readonly volumeRenderer;
     /** SDK renderer layers instantiated at mount ({@link registerRendererLayer}). */
     private extLayers;
+    /** Last applied layer-canvas order (ids below + above the data canvas) — re-slotted only on change. */
+    private layerOrderSig;
     private attributionEl;
     private attributionEnabled;
     /** Host-supplied mark shown INSTEAD of the built-in one (`attribution: '<html>'`). */
@@ -800,6 +802,8 @@ declare class NativeRenderer implements IChartRenderer {
     private renderFrame;
     /** Repaint the SDK layers that opted into cursor tracking (their own canvas only). */
     private repaintCursorLayers;
+    /** Blank one SDK layer canvas (a collapsed host pane suppresses the layer's painting). */
+    private clearLayerCanvas;
     /** One frame's args for an SDK renderer layer (shared by the data + cursor paint paths). */
     private extLayerArgs;
     /** Paint the below-data (L-1) + geometry (L0) + chrome (L1) layers from the current scene/coords. */
@@ -857,10 +861,33 @@ declare class NativeRenderer implements IChartRenderer {
     private paneMasterTitle;
     /** The pane a bespoke-layer native indicator (volume/vpvr) currently lives in (null = not mounted). */
     private nativeLayerPane;
+    /** The mounted native indicator that OWNS an SDK layer — the one whose type equals the
+     *  layer id (the id doubles as the data channel, so the pairing is the SDK's own
+     *  contract). Null for chart-type channels and while the owner is hidden (a hidden
+     *  indicator leaves the scene; its cleared data channel paints nothing anyway). */
+    private layerOwner;
+    /** The pane an SDK layer paints on: its owner's pane, else the price pane. */
+    private layerPane;
+    /** The SDK layer canvases split around the data canvas, each side back-to-front:
+     *  owned layers by their owner's z key against the candles' (an indicator restacked
+     *  below the candles takes its layer canvas along), unowned by declared placement. */
+    private orderedLayerCanvases;
+    /** The full canvas pile in paint order (layers + data/volume/vpvr) — what the DOM
+     *  stacking and the screenshot compositor must both follow. */
+    private canvasPile;
+    /** Re-slot the SDK layer canvases in the plot when the computed order changed (a z
+     *  write, a restored config, an indicator mount/remove/restack). Runs at the top of
+     *  every data frame; a no-op when the signature is unchanged. Re-inserting an
+     *  absolutely-positioned, pointer-transparent canvas repaints nothing by itself. */
+    private syncLayerCanvasOrder;
     /** True when an active volume layer is this study pane's ONLY content — so its scale should
      *  come from volume, not the empty {0,1} placeholder. (In the price pane, or alongside a real
      *  series, volume stays a bottom overlay and the master scale wins.) */
     private volumeOwnsPane;
+    /** True when this study pane's master content is only SDK-layer natives (series-less
+     *  models whose type names a mounted layer) — its scale then follows the visible bars
+     *  (see the call site). Any real master series takes over the scale as usual. */
+    private layerNativesOwnPane;
     /** Per-pane scale state for a host UI (e.g. a price-axis context menu): the pane's pixel
      *  band (`top`/`height`, so a click y maps to a pane) plus its current axis `mode`/`log`.
      *  Top-to-bottom order. Every pane is independent — the price pane from the scene setting,