@luxalgo/vela 0.7.0 → 0.7.2

package/dist/vela.global.js

@@ -51,6 +51,13 @@ var Vela = (function (exports) {
   function isLineLikeSeries(spec) {
     return spec.kind !== "candle" && spec.kind !== "bar" && spec.kind !== "markers";
   }
+  function seriesShownOn(spec, surface) {
+    if (spec.display) return spec.display[surface] !== false;
+    return spec.visible !== false;
+  }
+  function seriesInScale(spec) {
+    return seriesShownOn(spec, "pane") || seriesShownOn(spec, "priceScale");
+  }
 
   // src/core/events/EventBus.ts
   var TypedEventBus = class {
@@ -120,6 +127,9 @@ var Vela = (function (exports) {
   };
 
   // src/core/native-indicators/NativeIndicator.ts
+  function nativeInstanceChannel(type, instanceId) {
+    return `${type}#${instanceId}`;
+  }
   var REGISTRY = /* @__PURE__ */ new Map();
   function registerNativeIndicator(descriptor) {
     REGISTRY.set(descriptor.type, descriptor);
@@ -195,6 +205,9 @@ var Vela = (function (exports) {
     setProps(values) {
       this.controller.applyProps(this.id, values);
     }
+    updateCode(source) {
+      this.controller.updateCode(this.id, source);
+    }
     setVisible(visible) {
       this.controller.setVisible(this.id, visible);
     }
@@ -217,6 +230,10 @@ var Vela = (function (exports) {
     setPropsSchema(schema) {
       this.propsSchema = schema;
     }
+    /** Sync the public `source` once a code update has been prepared and taken over. */
+    setSource(source) {
+      this.source = source;
+    }
     /** Sync the public `visible` getter when the orchestrator changes visibility (API or legend eye). */
     setVisibleState(visible) {
       this.visibleState = visible;
@@ -2323,16 +2340,18 @@ var Vela = (function (exports) {
     geometry(proj) {
       const a = this.anchors[0];
       const b = this.anchors[1];
-      const c = this.anchors[2];
-      if (!a || !b || !c) return null;
+      if (!a || !b) return null;
       const px = (p) => {
         const y = proj.yOf(p.price, this.paneId);
         return y == null ? null : [proj.xOf(p.time), y];
       };
       const P0 = px(a);
       const P1 = px(b);
+      if (!P0 || !P1) return null;
+      const c = this.anchors[2];
+      if (!c) return { segments: [[P0[0], P0[1], P1[0], P1[1]]], fill: null };
       const P2 = px(c);
-      if (!P0 || !P1 || !P2) return null;
+      if (!P2) return null;
       const mx = (P1[0] + P2[0]) / 2;
       const my = (P1[1] + P2[1]) / 2;
       const dx = mx - P0[0];
@@ -2379,16 +2398,19 @@ var Vela = (function (exports) {
     geometry(proj) {
       const a = this.anchors[0];
       const b = this.anchors[1];
-      const c = this.anchors[2];
-      if (!a || !b || !c) return null;
+      if (!a || !b) return null;
       const px = (p) => {
         const y = proj.yOf(p.price, this.paneId);
         return y == null ? null : [proj.xOf(p.time), y];
       };
-      const S2 = px(this.medianStart(a, b, c));
+      const P0 = px(a);
       const P1 = px(b);
+      if (!P0 || !P1) return null;
+      const c = this.anchors[2];
+      if (!c) return { segments: [[P0[0], P0[1], P1[0], P1[1]]], fill: null };
+      const S2 = px(this.medianStart(a, b, c));
       const P2 = px(c);
-      if (!S2 || !P1 || !P2) return null;
+      if (!S2 || !P2) return null;
       const mx = (P1[0] + P2[0]) / 2;
       const my = (P1[1] + P2[1]) / 2;
       const dx = mx - S2[0];
@@ -2403,8 +2425,12 @@ var Vela = (function (exports) {
           // upper tine
           extendRay(P2[0], P2[1], P2[0] + dx, P2[1] + dy, "right", w, h),
           // lower tine
-          [P1[0], P1[1], P2[0], P2[1]]
+          [P1[0], P1[1], P2[0], P2[1]],
           // base line
+          // The median leaves from the shifted origin, not the pivot — without this construction
+          // line the pivot handle would float unattached to the shape it defines.
+          [P0[0], P0[1], P1[0], P1[1]]
+          // pivot → first tine anchor
         ],
         fill: null
       };
@@ -2461,17 +2487,19 @@ var Vela = (function (exports) {
     geometry(proj) {
       const a = this.anchors[0];
       const b = this.anchors[1];
-      const c = this.anchors[2];
-      if (!a || !b || !c) return null;
+      if (!a || !b) return null;
       const px = (p) => {
         const y = proj.yOf(p.price, this.paneId);
         return y == null ? null : [proj.xOf(p.time), y];
       };
-      const B = px({ time: (a.time + b.time) / 2, price: (a.price + b.price) / 2 });
       const P0 = px(a);
       const P1 = px(b);
+      if (!P0 || !P1) return null;
+      const c = this.anchors[2];
+      if (!c) return { segments: [[P0[0], P0[1], P1[0], P1[1]]], fill: null };
+      const B = px({ time: (a.time + b.time) / 2, price: (a.price + b.price) / 2 });
       const P2 = px(c);
-      if (!B || !P0 || !P1 || !P2) return null;
+      if (!B || !P2) return null;
       const mx = (P1[0] + P2[0]) / 2;
       const my = (P1[1] + P2[1]) / 2;
       const dx = P2[0] - B[0];
@@ -2642,16 +2670,18 @@ var Vela = (function (exports) {
     geometry(proj) {
       const a = this.anchors[0];
       const b = this.anchors[1];
-      const c = this.anchors[2];
-      if (!a || !b || !c) return null;
+      if (!a || !b) return null;
       const px = (p) => {
         const y = proj.yOf(p.price, this.paneId);
         return y == null ? null : [proj.xOf(p.time), y];
       };
       const A = px(a);
       const B = px(b);
+      if (!A || !B) return null;
+      const c = this.anchors[2];
+      if (!c) return { segments: [[A[0], A[1], B[0], B[1]]], fill: null };
       const C = px(c);
-      if (!A || !B || !C) return null;
+      if (!C) return null;
       return {
         segments: [
           [A[0], A[1], B[0], B[1]],
@@ -8180,6 +8210,7 @@ var Vela = (function (exports) {
         if (identityChanged) {
           this.beginLoad(false);
           this.setBarSeries([], { clearing: true });
+          this.blankIndicatorVisuals();
           if (this.activeEngineStyle) {
             this.typeEngines.get(this.activeEngineStyle)?.suspend();
             this.renderer.setNativeData?.(this.activeEngineStyle, void 0);
@@ -8222,7 +8253,7 @@ var Vela = (function (exports) {
     restartNativeIndicators() {
       for (const record of this.registry.all()) {
         if (!record.native) continue;
-        record.native.instance.stop();
+        if (record.native.started) record.native.instance.stop();
         record.native.instance = record.native.descriptor.create();
         record.native.started = false;
         record.pendingStructural = true;
@@ -8430,6 +8461,23 @@ var Vela = (function (exports) {
       this.renderer.setBars(this.bars, { preserveView: true });
       this.reexecuteIndicators();
     }
+    /**
+     * Blank every mounted indicator's painted output — series data, fills, backgrounds,
+     * price lines, drawings, bar colors, trades — while keeping the mount (legend row,
+     * pane, settings) intact, via the same idempotent-by-id remount an input edit uses.
+     * Called on a market identity switch: the fresh models arrive only after the new
+     * bars load, so nothing blanked here is ever restored — each consumer's re-run
+     * remounts a full model over it.
+     */
+    blankIndicatorVisuals() {
+      for (const record of this.registry.all()) {
+        if (record.hidden || !record.renderHandle || !record.model) continue;
+        record.model = blankedModel(record.model);
+        record.renderHandle = this.renderer.mountIndicator(record.model);
+        record.pendingStructural = true;
+        this.setLoading(record, true);
+      }
+    }
     /** Stop + re-run every visible Pine indicator (its input bars changed wholesale). */
     reexecuteIndicators() {
       for (const record of this.registry.all()) {
@@ -8674,6 +8722,61 @@ var Vela = (function (exports) {
       record.session.update(record.inputValues, record.propValues);
       this.events.emit("indicator:inputs", { id });
     }
+    /**
+     * IndicatorController: replace a SCRIPT indicator's source in place (see
+     * {@link IndicatorHandle.updateCode}). Prepare-first: the running session keeps
+     * computing until the new source has compiled, so a broken edit costs the user
+     * nothing but an `error` event. Natives have no script — warn and leave them alone.
+     */
+    updateCode(id, source) {
+      const record = this.registry.get(id);
+      const handle = this.handles.get(id);
+      if (!record || !handle) return;
+      if (record.native) {
+        console.warn(`[vela] updateCode("${id}") \u2014 a native indicator has no script to update.`);
+        return;
+      }
+      if (source === record.source && record.pendingSource === void 0) return;
+      record.pendingSource = source;
+      void this.swapSource(id, source, handle);
+    }
+    async swapSource(id, source, handle) {
+      const engine = this.registry.get(id)?.engine ?? this.engineFor(this.registry.get(id)?.options?.language);
+      let prepared;
+      try {
+        prepared = await engine.prepare(source, id);
+      } catch (err) {
+        const record2 = this.registry.get(id);
+        if (record2?.pendingSource === source) {
+          record2.pendingSource = void 0;
+          this.fail(id, handle, err);
+        }
+        return;
+      }
+      const record = this.registry.get(id);
+      if (!record || record.pendingSource !== source) return;
+      record.pendingSource = void 0;
+      record.source = source;
+      record.engine = engine;
+      record.prepared = prepared;
+      handle.setSource(source);
+      record.inputValues = valuesOnSchema(prepared.inputs, record.inputValues);
+      record.propValues = valuesOnSchema(prepared.props ?? [], record.propValues);
+      handle.setSchema(prepared.inputs);
+      handle.setPropsSchema(prepared.props ?? []);
+      record.session?.stop();
+      record.session = void 0;
+      record.pendingStructural = true;
+      record.pendingCause = "code";
+      if (record.hidden) return;
+      if (record.renderHandle) {
+        this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
+        this.setLoading(record, true);
+      } else {
+        this.mountLoadingPlaceholder(id, record);
+      }
+      this.executeIndicator(id, handle);
+    }
     /** IndicatorController: tear down an indicator and (if now empty) its pane. */
     /** Live handles of every indicator on the chart (script + native), insertion order. */
     listIndicators() {
@@ -8688,7 +8791,7 @@ var Vela = (function (exports) {
       const record = this.registry.remove(id);
       if (record?.native?.type === "volume") this.volumeOptedOut = true;
       record?.session?.stop();
-      record?.native?.instance.stop();
+      if (record?.native?.started) record.native.instance.stop();
       this.handles.delete(id);
       if (record?.renderHandle) this.renderer.removeIndicator(record.renderHandle);
       const paneId = record?.model?.paneId;
@@ -8714,7 +8817,7 @@ var Vela = (function (exports) {
       if (!visible) {
         record.session?.stop();
         record.session = void 0;
-        record.native?.instance.suspend();
+        if (record.native?.started) record.native.instance.suspend();
         if (record.renderHandle) this.renderer.setIndicatorVisible?.(record.renderHandle, false);
         else if (record.native) this.mountHiddenNativeRow(id, record);
       } else {
@@ -8795,7 +8898,7 @@ var Vela = (function (exports) {
       this.paneActionUnsub?.();
       for (const record of this.registry.all()) {
         record.session?.stop();
-        record.native?.instance.stop();
+        if (record.native?.started) record.native.instance.stop();
       }
       for (const engine of this.typeEngines.values()) engine.stop();
       this.typeEngines.clear();
@@ -8819,6 +8922,7 @@ var Vela = (function (exports) {
         const engine = this.engineFor(options.language);
         record.engine = engine;
         const prepared = await engine.prepare(source, id);
+        if (record.source !== source) return;
         record.prepared = prepared;
         const defaults2 = {};
         for (const input of prepared.inputs) defaults2[input.key] = input.defval;
@@ -8889,7 +8993,9 @@ var Vela = (function (exports) {
         await this.readyPromise;
         const record = this.registry.get(id);
         if (!record?.native || record.hidden) return;
+        const channel = this.nativeChannel(record);
         const ctx = {
+          id,
           symbol: this.config.market.symbol ?? "TEST",
           timeframe: this.config.market.timeframe ?? "60",
           live: this.config.live,
@@ -8897,7 +9003,7 @@ var Vela = (function (exports) {
           bars: () => this.bars,
           data: this.dataControl,
           emit: (out) => this.applyModel(id, this.buildNativeModel(record, out)),
-          pushData: (data) => this.renderer.setNativeData?.(record.native.type, data),
+          pushData: (data) => this.renderer.setNativeData?.(channel, data),
           setStatus: (status) => {
             if (record.renderHandle && !record.hidden) this.renderer.setIndicatorStatus?.(record.renderHandle, status);
           }
@@ -8908,16 +9014,26 @@ var Vela = (function (exports) {
         this.fail(id, handle, err);
       }
     }
+    /** The renderer-layer channel a native instance's `pushData` lands on: the type itself
+     *  for a single-instance type (the layer id doubles as the channel), a per-instance
+     *  channel for a `multiInstance` type — otherwise every instance would overwrite the
+     *  one layer. Stamped on the model so the renderer mounts a dedicated layer for it. */
+    nativeChannel(record) {
+      const { type, descriptor } = record.native;
+      return descriptor.multiInstance ? nativeInstanceChannel(type, record.id) : type;
+    }
     /** Wrap a native indicator's emitted visuals into a full IndicatorModel, tagged `native`. */
     buildNativeModel(record, out) {
       const d = record.native.descriptor;
+      const type = record.native.type;
+      const channel = this.nativeChannel(record);
       return {
         id: record.id,
         title: record.title,
         ...d.shortTitle ? { shorttitle: d.shortTitle } : {},
         overlay: d.overlay,
         paneHint: d.paneHint,
-        native: { type: record.native.type },
+        native: { type, ...channel !== type ? { channel } : {} },
         ...d.legend === false ? { legend: false } : {},
         ...out.paneAxis != null ? { paneAxis: out.paneAxis } : {},
         series: out.series ?? [],
@@ -9207,6 +9323,7 @@ var Vela = (function (exports) {
     applyModel(id, model) {
       const record = this.registry.get(id);
       if (!record || record.hidden) return true;
+      if (this.switchingMarket) return false;
       if (record.loading && this.bars.length === 0 && !_EngineOrchestrator.modelHasOutput(model)) return false;
       const handle = this.handles.get(id);
       if (!record.renderHandle) {
@@ -9224,7 +9341,7 @@ var Vela = (function (exports) {
       if (record.loading && !record.paneLocked) {
         const routed = this.routePane(id, model, record.options ?? {});
         if (routed !== paneId) {
-          if (paneId !== "price") {
+          if (paneId !== "price" && !this.registry.all().some((r) => r.id !== id && r.model?.paneId === paneId)) {
             this.renderer.removePane(paneId);
             this.forgetPane(paneId);
           }
@@ -9353,6 +9470,34 @@ var Vela = (function (exports) {
     }
     return new Promise((resolve) => setTimeout(resolve, 0));
   }
+  function valuesOnSchema(schema, previous) {
+    const out = {};
+    const declared = /* @__PURE__ */ new Set();
+    for (const s of schema) {
+      out[s.key] = s.defval;
+      declared.add(s.key);
+      declared.add(s.title);
+    }
+    for (const [k, v] of Object.entries(previous)) if (declared.has(k)) out[k] = v;
+    return out;
+  }
+  function blankedModel(model) {
+    return {
+      ...model,
+      series: model.series.map((s) => s.kind === "candle" || s.kind === "bar" ? { ...s, bars: [] } : s.kind === "markers" ? { ...s, markers: [] } : { ...s, points: [] }),
+      fills: [],
+      backgrounds: [],
+      priceLines: [],
+      lines: [],
+      boxes: [],
+      labels: [],
+      polylines: [],
+      linefills: [],
+      tables: [],
+      barColors: [],
+      trades: []
+    };
+  }
   function modelToValuePatch(model) {
     const series = [];
     let from = Number.POSITIVE_INFINITY;
@@ -12755,6 +12900,43 @@ var Vela = (function (exports) {
     host.appendChild(s);
   }
 
+  // src/ui/tokens.ts
+  var STATIC_ID = "vela-ui-tokens";
+  var STATIC_DECLS = Object.entries(STATIC_TOKENS).map(([k, v]) => `    ${k}: ${v};`).join("\n");
+  var STATIC_CSS = `
+.vela-ui, .vela-ui-layer {
+${STATIC_DECLS}
+    font-family: var(--vela-font, -apple-system, system-ui, sans-serif);
+    box-sizing: border-box;
+    /* Chrome text (titles, buttons, menus, readouts) is UI, not copy \u2014 never selectable. */
+    user-select: none;
+    -webkit-user-select: none;
+}
+.vela-ui *, .vela-ui-layer * { box-sizing: border-box; }
+/* Text ENTRY is the one exception: selection is part of editing. */
+.vela-ui :is(input, textarea), .vela-ui-layer :is(input, textarea) { user-select: text; -webkit-user-select: text; }
+/* iOS Safari zooms the page when a focused field is under 16px, and often
+   keeps that zoom after the field blurs or a dialog closes. The shell's
+   mobile size class is the honest gate \u2014 not a media query \u2014 so an embedded
+   chart on a wide desktop still gets the rule when it is in the phone layout.
+   Scoped to the kit root so a host page's own [data-layout] is never touched. */
+.vela-ui[data-layout='mobile'] :is(input, textarea, select) { font-size: 16px; }
+.vela-icon { display: inline-flex; align-items: center; flex: none; }
+.vela-icon svg { display: block; }
+`;
+  function applyThemeTokens(el, t) {
+    const tokens = themeTokens(t);
+    for (const key in tokens) el.style.setProperty(key, tokens[key]);
+  }
+  function floatingLayerHost(from, fallback) {
+    return from.closest(".vela-ui") ?? fallback ?? from;
+  }
+  function ensureUIHost(el, theme) {
+    injectStyles(STATIC_ID, STATIC_CSS, el.getRootNode());
+    el.classList.add("vela-ui");
+    if (theme) applyThemeTokens(el, theme);
+  }
+
   // src/ui/icons.ts
   function iconEl(id, doc = document) {
     const span = doc.createElement("span");
@@ -17120,7 +17302,7 @@ var Vela = (function (exports) {
     /* The list is a <ul>: without this, block rows (the separator) paint a ::marker dot. */
     list-style: none;
     margin: 0;
-    background: var(--vela-surface-elev);
+    background: var(--vela-surface);
     color: var(--vela-fg);
     border: 1px solid var(--vela-border-strong);
     border-radius: 6px;
@@ -17413,7 +17595,7 @@ var Vela = (function (exports) {
       const anchor = opts.trigger ?? opts.host ?? document.body;
       const doc = anchor.ownerDocument;
       injectStyles(MENU_STYLE_ID, MENU_CSS, doc);
-      const host = opts.host ?? anchor.closest?.(".vela-ui") ?? doc.body;
+      const host = floatingLayerHost(opts.host ?? anchor, doc.body);
       this.root = new Surface(doc, {
         host,
         placement: opts.placement,
@@ -17452,40 +17634,6 @@ var Vela = (function (exports) {
     }
   };
 
-  // src/ui/tokens.ts
-  var STATIC_ID = "vela-ui-tokens";
-  var STATIC_DECLS = Object.entries(STATIC_TOKENS).map(([k, v]) => `    ${k}: ${v};`).join("\n");
-  var STATIC_CSS = `
-.vela-ui, .vela-ui-layer {
-${STATIC_DECLS}
-    font-family: var(--vela-font, -apple-system, system-ui, sans-serif);
-    box-sizing: border-box;
-    /* Chrome text (titles, buttons, menus, readouts) is UI, not copy \u2014 never selectable. */
-    user-select: none;
-    -webkit-user-select: none;
-}
-.vela-ui *, .vela-ui-layer * { box-sizing: border-box; }
-/* Text ENTRY is the one exception: selection is part of editing. */
-.vela-ui :is(input, textarea), .vela-ui-layer :is(input, textarea) { user-select: text; -webkit-user-select: text; }
-/* iOS Safari zooms the page when a focused field is under 16px, and often
-   keeps that zoom after the field blurs or a dialog closes. The shell's
-   mobile size class is the honest gate \u2014 not a media query \u2014 so an embedded
-   chart on a wide desktop still gets the rule when it is in the phone layout.
-   Scoped to the kit root so a host page's own [data-layout] is never touched. */
-.vela-ui[data-layout='mobile'] :is(input, textarea, select) { font-size: 16px; }
-.vela-icon { display: inline-flex; align-items: center; flex: none; }
-.vela-icon svg { display: block; }
-`;
-  function applyThemeTokens(el, t) {
-    const tokens = themeTokens(t);
-    for (const key in tokens) el.style.setProperty(key, tokens[key]);
-  }
-  function ensureUIHost(el, theme) {
-    injectStyles(STATIC_ID, STATIC_CSS, el.getRootNode());
-    el.classList.add("vela-ui");
-    if (theme) applyThemeTokens(el, theme);
-  }
-
   // src/ui/components/popover/controller.ts
   function insetRect(r, inset) {
     return {
@@ -17592,7 +17740,8 @@ ${STATIC_DECLS}
       const doc = opts.trigger.ownerDocument;
       injectStyles(POPOVER_STYLE_ID, POPOVER_CSS, doc);
       this.trigger = opts.trigger;
-      this.host = opts.host ?? doc.body;
+      this.host = opts.host ?? floatingLayerHost(opts.trigger, doc.body);
+      this.inheritsTokens = !opts.host && this.host !== doc.body;
       this.ctrl = popoverController(opts);
       this.boundary = opts.boundary ?? "viewport";
       this.theme = opts.theme;
@@ -17624,7 +17773,7 @@ ${STATIC_DECLS}
         clearTimeout(this.leaveTimer);
         this.leaveTimer = null;
       }
-      ensureUIHost(this.el, this.theme);
+      ensureUIHost(this.el, this.inheritsTokens ? void 0 : this.theme);
       if (this.fadeMs > 0) {
         this.el.style.transition = `opacity ${this.fadeMs}ms ease`;
         this.el.style.opacity = "0";
@@ -23119,33 +23268,32 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       center: (wickLeftDev + wickDev / 2) / dpr
     };
   }
-  function aggregateCandleColumns(bars, i0, i1, xOf, yOf) {
+  function aggregateCandleColumns(bars, i0, i1, xOf, yOf, colorOf2) {
     const out = [];
     let col = NaN;
-    let intervals = [];
+    let runs = [];
     const flush = () => {
-      if (intervals.length === 0) return;
-      const merged = [intervals[0]];
-      for (let k = 1; k < intervals.length; k += 1) {
-        const prev3 = merged[merged.length - 1];
-        const next2 = intervals[k];
-        if (Math.abs(yOf(prev3.hi) - yOf(next2.lo)) < 1) {
-          prev3.hi = next2.hi;
-          if (next2.headIdx < prev3.headIdx) {
-            prev3.headIdx = next2.headIdx;
-            prev3.headTime = next2.headTime;
-            prev3.open = next2.open;
-          }
-          if (next2.lastIdx > prev3.lastIdx) {
-            prev3.lastIdx = next2.lastIdx;
-            prev3.close = next2.close;
+      if (runs.length === 0) return;
+      runs.sort((a, b) => a.lo - b.lo);
+      const merged = [];
+      for (const next2 of runs) {
+        let prev3;
+        for (let k = merged.length - 1; k >= 0; k -= 1) {
+          if (merged[k].color === next2.color) {
+            prev3 = merged[k];
+            break;
           }
+        }
+        if (prev3 && Math.abs(yOf(prev3.hi) - yOf(next2.lo)) < 1) {
+          prev3.hi = next2.hi;
+          if (next2.lastIdx > prev3.lastIdx) prev3.lastIdx = next2.lastIdx;
         } else {
           merged.push(next2);
         }
       }
-      for (const iv of merged) out.push({ x: col, hi: iv.hi, lo: iv.lo, headTime: iv.headTime, open: iv.open, close: iv.close });
-      intervals = [];
+      merged.sort((a, b) => a.lastIdx - b.lastIdx);
+      for (const r of merged) out.push({ x: col, hi: r.hi, lo: r.lo, color: r.color });
+      runs = [];
     };
     for (let i = i0; i <= i1; i += 1) {
       const b = bars[i];
@@ -23155,26 +23303,17 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
         flush();
         col = x;
       }
+      const color = colorOf2(b);
       let lo = b.low;
       let hi = b.high;
-      let headIdx = i;
-      let headTime = b.time;
-      let open2 = b.open;
-      for (let k = intervals.length - 1; k >= 0; k -= 1) {
-        const iv = intervals[k];
-        if (iv.lo > hi || iv.hi < lo) continue;
-        if (iv.lo < lo) lo = iv.lo;
-        if (iv.hi > hi) hi = iv.hi;
-        if (iv.headIdx < headIdx) {
-          headIdx = iv.headIdx;
-          headTime = iv.headTime;
-          open2 = iv.open;
-        }
-        intervals.splice(k, 1);
-      }
-      let insertAt = 0;
-      while (insertAt < intervals.length && intervals[insertAt].lo < lo) insertAt += 1;
-      intervals.splice(insertAt, 0, { lo, hi, headIdx, headTime, open: open2, lastIdx: i, close: b.close });
+      for (let k = runs.length - 1; k >= 0; k -= 1) {
+        const r = runs[k];
+        if (r.color !== color || r.lo > hi || r.hi < lo) continue;
+        if (r.lo < lo) lo = r.lo;
+        if (r.hi > hi) hi = r.hi;
+        runs.splice(k, 1);
+      }
+      runs.push({ lo, hi, color, lastIdx: i });
     }
     flush();
     return out;
@@ -24149,7 +24288,7 @@ void main() {
      *  Routing mirrors the main pass: own series per pane, force_overlay series on the price pane. */
     emitGlowSources(b, scene, pane, coords, i0, i1) {
       const emitOne = (s, off) => {
-        if (!isLineLikeSeries(s) || s.visible === false) return;
+        if (!isLineLikeSeries(s) || !seriesShownOn(s, "pane")) return;
         if (s.kind === "histogram" || s.kind === "columns") return;
         if (s.kind === "circles" || s.kind === "cross") this.emitPointMarkers(b, s, pane, coords, i0, i1, off);
         else this.emitPolyline(b, s, pane, coords, i0, i1, s.kind === "step", off);
@@ -24260,7 +24399,7 @@ void main() {
       const spacing = coords.bodySpacing();
       const tier = candleTier(spacing);
       if (tier === "aggregate") {
-        this.emitCandlesAggregated(b, bars, i0, i1, coords, pane, up, down, barColors);
+        this.emitCandlesAggregated(b, bars, i0, i1, coords, pane, (bar) => barColors.get(bar.time) ?? (bar.close >= bar.open ? up : down));
         return;
       }
       const tickW = Math.max(1, Math.round(spacing * 0.35));
@@ -24401,14 +24540,17 @@ void main() {
       const spacing = coords.bodySpacing();
       const tier = candleTier(spacing);
       const paint = effectiveCandlePaint(scene.style.candle, scene.candleOverride, theme.upColor, theme.downColor);
+      const up = paint.up;
+      const down = paint.down;
+      const cs = paint.candle;
       if (tier === "aggregate") {
-        this.emitCandlesAggregated(b, bars, i0, i1, coords, pane, paint.up, paint.down, barColors);
+        this.emitCandlesAggregated(b, bars, i0, i1, coords, pane, (bar) => {
+          const isUp = bar.close >= bar.open;
+          return (isUp ? cs.wickUpColor : cs.wickDownColor) ?? barColors.get(bar.time) ?? (isUp ? up : down);
+        });
         return;
       }
       const drawBody = tier === "full";
-      const up = paint.up;
-      const down = paint.down;
-      const cs = paint.candle;
       const fading = this.candleStructureAlpha > this.candleBodyAlpha + 1e-3;
       for (let i = i0; i <= i1; i += 1) {
         const bar = bars[i];
@@ -24457,24 +24599,26 @@ void main() {
     /**
      * Sub-pixel LOD (mirrors Canvas2dBackend.drawCandlesAggregated): bars sharing a
      * rounded pixel column collapse into high-low sticks — one per contiguous
-     * coverage run (see {@link aggregateCandleColumns}), so a price gap inside the
-     * column stays a void. Draw cost stays bounded by screen width, not bar count;
-     * stick color follows its own first-open→last-close.
+     * SAME-COLOR coverage run (see {@link aggregateCandleColumns}), so a price gap
+     * inside the column stays a void and every bar's extent keeps its own color. Draw
+     * cost stays bounded by screen width, not bar count. `colorOf` is the calling
+     * style's per-bar paint rule (candles and OHLC bars resolve theirs differently).
      */
-    emitCandlesAggregated(b, bars, i0, i1, coords, pane, up, down, barColors) {
+    emitCandlesAggregated(b, bars, i0, i1, coords, pane, colorOf2) {
       const yOf = (price) => coords.priceToY(price, pane.scale, pane.bounds);
-      for (const s of aggregateCandleColumns(bars, i0, i1, (i) => coords.logicalToX(i), yOf)) {
-        const c = parseColor(barColors.get(s.headTime) ?? (s.close >= s.open ? up : down));
+      for (const s of aggregateCandleColumns(bars, i0, i1, (i) => coords.logicalToX(i), yOf, colorOf2)) {
+        const c = parseColor(s.color);
         const hY = yOf(s.hi);
         b.rect(s.x - 0.5, hY, 1, yOf(s.lo) - hY, c);
       }
     }
     emitSeries(b, spec, pane, coords, i0, i1, theme, off = 0) {
+      if (!seriesShownOn(spec, "pane")) return;
       if (spec.kind === "candle" || spec.kind === "bar") {
         this.emitPlotCandles(b, spec, pane, coords, i0, i1, theme, off);
         return;
       }
-      if (!isLineLikeSeries(spec) || spec.visible === false) return;
+      if (!isLineLikeSeries(spec)) return;
       switch (spec.kind) {
         case "histogram":
         case "columns":
@@ -26138,7 +26282,7 @@ void main() {
       const spacing = coords.bodySpacing();
       const tier = candleTier(spacing);
       if (tier === "aggregate") {
-        this.drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, up, down, barColors);
+        this.drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, (b) => barColors.get(b.time) ?? (b.close >= b.open ? up : down));
         return;
       }
       const tickW = Math.max(1, Math.round(spacing * 0.35));
@@ -26314,12 +26458,15 @@ void main() {
       const spacing = coords.bodySpacing();
       const tier = candleTier(spacing);
       const paint = effectiveCandlePaint(scene.style.candle, scene.candleOverride, theme.upColor, theme.downColor);
+      const cs = paint.candle;
       if (tier === "aggregate") {
-        this.drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, paint.up, paint.down, barColors);
+        this.drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, (b) => {
+          const up = b.close >= b.open;
+          return (up ? cs.wickUpColor : cs.wickDownColor) ?? barColors.get(b.time) ?? (up ? paint.up : paint.down);
+        });
         return;
       }
       const drawBody = tier === "full";
-      const cs = paint.candle;
       const fading = this.candleStructureAlpha > this.candleBodyAlpha + 1e-3;
       for (let i = i0; i <= i1; i += 1) {
         const b = bars[i];
@@ -26376,17 +26523,18 @@ void main() {
     }
     /**
      * Sub-pixel LOD: bars sharing a rounded pixel column collapse into high-low
-     * sticks (one per contiguous coverage run — see {@link aggregateCandleColumns}),
-     * so draw cost is bounded by screen width (not bar count) when zoomed far out
-     * and a price gap inside the column stays a void. Each stick's color follows
-     * its first-open→last-close direction (a barcolor() on the head bar still wins).
+     * sticks (one per contiguous SAME-COLOR coverage run — see
+     * {@link aggregateCandleColumns}), so draw cost is bounded by screen width (not
+     * bar count) when zoomed far out, a price gap inside the column stays a void, and
+     * every bar's extent keeps its own color. `colorOf` is the calling style's per-bar
+     * paint rule (candles and OHLC bars resolve theirs differently).
      */
-    drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, up, down, barColors) {
+    drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, colorOf2) {
       const yOf = (price) => coords.priceToY(price, pane.scale, pane.bounds);
       ctx.lineWidth = 1;
-      for (const s of aggregateCandleColumns(bars, i0, i1, (i) => coords.logicalToX(i), yOf)) {
+      for (const s of aggregateCandleColumns(bars, i0, i1, (i) => coords.logicalToX(i), yOf, colorOf2)) {
         const x = s.x + 0.5;
-        ctx.strokeStyle = barColors.get(s.headTime) ?? (s.close >= s.open ? up : down);
+        ctx.strokeStyle = s.color;
         ctx.beginPath();
         ctx.moveTo(x, yOf(s.hi));
         ctx.lineTo(x, yOf(s.lo));
@@ -26394,11 +26542,12 @@ void main() {
       }
     }
     drawSeries(ctx, spec, pane, coords, i0, i1, theme, off = 0) {
+      if (!seriesShownOn(spec, "pane")) return;
       if (spec.kind === "candle" || spec.kind === "bar") {
         this.drawPlotCandles(ctx, spec, pane, coords, i0, i1, theme, off);
         return;
       }
-      if (!isLineLikeSeries(spec) || spec.visible === false) return;
+      if (!isLineLikeSeries(spec)) return;
       switch (spec.kind) {
         case "histogram":
         case "columns":
@@ -35346,6 +35495,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     return { min: min2 - span * MARGIN_BOTTOM, max: max2 + span * MARGIN_TOP };
   }
   function considerSeries(s, i0, i1, off, consider) {
+    if (!seriesInScale(s)) return;
     if (s.kind === "candle" || s.kind === "bar") {
       for (let i = i0; i <= i1; i += 1) {
         const b = s.bars[i - off];
@@ -35565,6 +35715,22 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.openKey = null;
       /** Bumped per open/close — a lazy content resolving after its popup went away is dropped. */
       this.generation = 0;
+      /**
+       * The cluster whose popup was open when the current pointer press began. The anchor is
+       * hit-transparent (the glyph is canvas pixels), so the shell's outside-dismiss closes the
+       * popup on pointerdown; the click the renderer derives from the same pointerup must then
+       * read as "close", not reopen that cluster. Captured on the document ahead of the shell's
+       * (deferred) listener, cleared once the release has dispatched.
+       */
+      this.pressKey = null;
+      this.onPress = () => {
+        if (this.openKey === null) return;
+        this.pressKey = this.openKey;
+        const doc = this.deps.plot.ownerDocument;
+        const clear = () => void setTimeout(() => this.pressKey = null, 0);
+        doc.addEventListener("pointerup", clear, { capture: true, once: true });
+        doc.addEventListener("pointercancel", clear, { capture: true, once: true });
+      };
       const doc = deps.plot.ownerDocument;
       injectStyles(CALLOUT_STYLE_ID, CALLOUT_CSS, doc);
       injectStyles(MARKS_STYLE_ID, MARKS_CSS, doc);
@@ -35572,12 +35738,14 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.anchor.className = "vela-marks-anchor";
       Object.assign(this.anchor.style, { position: "absolute", pointerEvents: "none", left: "0", top: "0", width: "0", height: "0" });
       deps.plot.appendChild(this.anchor);
+      doc.addEventListener("pointerdown", this.onPress, true);
     }
     /** The cluster key the open popup belongs to, or null. */
     get key() {
       return this.openKey;
     }
     open(cluster, rect) {
+      if (this.pressKey === cluster.key) return;
       this.close();
       this.place(rect);
       const gen = ++this.generation;
@@ -35625,6 +35793,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
     destroy() {
       this.close();
+      this.deps.plot.ownerDocument.removeEventListener("pointerdown", this.onPress, true);
       this.anchor.remove();
     }
     place(rect) {
@@ -36521,6 +36690,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.backdropRenderer = new BackdropRenderer();
       this.volumeRenderer = new VolumeRenderer();
       /** SDK renderer layers instantiated at mount ({@link registerRendererLayer}). */
+      /**
+       * The mounted SDK layers. One BASE entry per registered definition (channel = the layer
+       * id, no owner of its own), plus one DEDICATED entry per mounted native indicator whose
+       * model names its own channel (`native.channel` — an instance of a multi-instance type):
+       * same definition, its own canvas, reading that instance's channel and following that
+       * instance's pane and z key. `channel` is unique across the array.
+       */
       this.extLayers = [];
       /** Last applied layer-canvas order (ids below + above the data canvas) — re-slotted only on change. */
       this.layerOrderSig = "";
@@ -37666,11 +37842,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       Object.assign(this.overlayRoot.style, { position: "absolute", inset: "0", pointerEvents: "none" });
       this.plot = document.createElement("div");
       Object.assign(this.plot.style, { position: "absolute", top: "0", right: "0", bottom: "0", left: "0" });
-      this.extLayers = rendererLayers().map((def) => {
-        const canvas = document.createElement("canvas");
-        Object.assign(canvas.style, { position: "absolute", inset: "0", width: "100%", height: "100%", pointerEvents: "none" });
-        return { def, instance: def.create(), canvas };
-      });
+      this.extLayers = rendererLayers().map((def) => ({ def, instance: def.create(), canvas: this.createLayerCanvas(), channel: def.id, owner: null }));
       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(this.backdropCanvas, ...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas, this.cursorCanvas, this.overlayRoot);
@@ -37687,6 +37859,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.volumeRenderer.mount(this.volumeCanvas);
       this.vpvrRenderer.mount(this.vpvrCanvas);
       for (const l of this.extLayers) l.instance.mount(l.canvas);
+      for (const m of this.scene.indicators.values()) this.ensureInstanceLayer(m);
       this.chrome.mount(this.chromeCanvas);
       this.crosshairLayer.mount(this.cursorCanvas);
       this.coords.setViewport(defaultViewport());
@@ -38279,6 +38452,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.refreshAnchorOffset(model);
       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.ensureInstanceLayer(model);
       if (model.legend !== false) {
         this.inputsUI.upsert(model.id, model.shorttitle ?? model.title, model.inputs, model.inputValues, model.paneId, {
           native: !!model.native,
@@ -38322,6 +38496,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         this.scene.vpvrLayer = null;
       }
       this.scene.indicators.delete(handle.id);
+      this.dropInstanceLayer(handle.id);
       this.scene.forgetIndicatorZ(handle.id);
       this.scene.forgetAnchorOffset(handle.id);
       this.scene.dropIndicatorScale(handle.id);
@@ -39115,29 +39290,31 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         up: bar.close >= bar.open
       };
     }
-    /** One group per indicator (name = indicator title), each with a row per drawable plot. */
+    /** One group per indicator (name = indicator title), each with a row per plot shown in the data window. */
     dataWindowGroups(idx, pricePane) {
       const groups = [];
       for (const model of this.scene.indicators.values()) {
-        const rows = this.dataWindowRowsFor(model, idx, pricePane);
+        const rows = this.readoutRowsFor(model, idx, pricePane, "dataWindow");
         if (rows.length) groups.push({ name: model.title, rows });
       }
       return groups;
     }
-    /** One indicator's readout at bar `idx`: a row per drawable plot, formatted on its pane's scale. */
-    dataWindowRowsFor(model, idx, pricePane) {
+    /** One indicator's readout at bar `idx` for one value surface (the legend or the data window):
+     *  a row per plot shown on that surface, formatted on its pane's scale. A plot's `display`
+     *  decides per surface — a data-window-only plot has a row here and none in the legend. */
+    readoutRowsFor(model, idx, pricePane, surface) {
       if (model.native?.type === "volume") return this.volumeReadoutRows(model, idx);
       const pane = (model.paneId ? this.scene.panes.get(model.paneId) : null) ?? pricePane;
       const off = this.scene.offsetOf(model.id);
       const rows = [];
       for (const s of model.series) {
+        if (!seriesShownOn(s, surface)) continue;
         let value;
         let color;
         if (s.kind === "candle" || s.kind === "bar") {
           value = s.bars[idx - off]?.close;
           color = s.style?.up ?? this.theme.upColor;
         } else if (isLineLikeSeries(s)) {
-          if (s.visible === false) continue;
           value = s.points[idx - off]?.value;
           color = s.points[idx - off]?.color ?? s.style.color;
         } else {
@@ -39160,9 +39337,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const color = bar.close >= bar.open ? cfg?.upColor ?? this.theme.upColor : cfg?.downColor ?? this.theme.downColor;
       return [{ label: model.title, value: formatVolume(vol), color }];
     }
-    /** Refresh the plot values beside every legend title — the same readout the data window
-     *  shows (crosshair bar, else the latest bar), pushed per paint. A hidden indicator has
-     *  no scene model, so its row is absent from the map and its readout clears. */
+    /** Refresh the plot values beside every legend title — the same bar the data window reads
+     *  (crosshair bar, else the latest bar), pushed per paint, filtered to the plots whose
+     *  `display` includes the legend. A hidden indicator has no scene model, so its row is
+     *  absent from the map and its readout clears. */
     updateLegendValues() {
       if (!this.inputsUI) return;
       const n = this.bars.length;
@@ -39171,7 +39349,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         const idx = this.hoverLogical != null ? this.hoverLogical : n - 1;
         const pricePane = this.dataWindowPricePane();
         for (const model of this.scene.indicators.values()) {
-          values.set(model.id, this.dataWindowRowsFor(model, idx, pricePane).map((r) => ({ value: r.value, color: r.color })));
+          values.set(model.id, this.readoutRowsFor(model, idx, pricePane, "legend").map((r) => ({ value: r.value, color: r.color })));
         }
       }
       this.inputsUI.setPlotValues(values);
@@ -39197,9 +39375,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
       for (const l of this.extLayers) {
         if (!l.def.repaintOnCursor) continue;
-        const lp = this.layerPane(l.def.id) ?? pane;
+        const lp = this.layerPane(l) ?? pane;
         if (lp.collapsed) continue;
-        l.instance.render(this.extLayerArgs(l.def.id, lp.scale, lp.bounds, nowMs));
+        l.instance.render(this.extLayerArgs(l, lp.scale, lp.bounds, nowMs));
         if (this.animZoom.on && l.instance.animating?.()) this.animator.start();
       }
     }
@@ -39208,13 +39386,15 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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) {
+    /** One frame's args for an SDK renderer layer (shared by the data + cursor paint paths).
+     *  Data + pending come from the entry's channel (per instance for a dedicated entry);
+     *  the settings bag is the TYPE's — a chart type's dialog values, one bag per type. */
+    extLayerArgs(l, scale, bounds, nowMs) {
       return {
         bars: this.scene.bars,
-        data: this.scene.nativeData.get(id),
-        settings: this.scene.nativeData.get(`${id}-settings`) ?? {},
-        pending: this.scene.nativePending.get(id) ?? [],
+        data: this.scene.nativeData.get(l.channel),
+        settings: this.scene.nativeData.get(`${l.def.id}-settings`) ?? {},
+        pending: this.scene.nativePending.get(l.channel) ?? [],
         coords: this.coords,
         scale,
         bounds,
@@ -39257,12 +39437,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
         let folded = null;
         for (const l of this.extLayers) {
-          const lp = this.layerPane(l.def.id) ?? pane;
+          const lp = this.layerPane(l) ?? pane;
           if (lp.collapsed) {
             this.clearLayerCanvas(l.canvas);
             continue;
           }
-          const args = this.extLayerArgs(l.def.id, lp.scale, lp.bounds, nowMs);
+          const args = this.extLayerArgs(l, lp.scale, lp.bounds, nowMs);
           l.instance.render(args);
           if (lp === pane) folded = foldBaseModulation(folded, l.instance.modulateBase?.(args) ?? null);
           if (this.animZoom.on && l.instance.animating?.()) this.animator.start();
@@ -39426,7 +39606,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           const or2 = overlaySeriesRange(this.scene.indicators.values(), i0, i1, (id) => this.scene.offsetOf(id));
           if (or2) dr = dr ? { min: Math.min(dr.min, or2.min), max: Math.max(dr.max, or2.max) } : or2;
         }
-        const includeCandles = pane.kind === "price" && !this.scene.candlesHidden;
+        const includeCandles = pane.kind === "price" && (!this.scene.candlesHidden || this.priceLayersAnchoredToBars(masterModels));
         pane.scaleTarget = computePaneScale(masterModels, this.bars, includeCandles, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id));
         pane.percentBaseline = pane.kind === "price" ? this.bars[i0]?.close ?? 0 : this.firstVisibleValue(masterModels, i0);
         pane.axisFormat = void 0;
@@ -39545,19 +39725,60 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       }
       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) {
+    /** One transparent, pointer-transparent SDK layer canvas covering the plot. */
+    createLayerCanvas() {
+      const canvas = document.createElement("canvas");
+      Object.assign(canvas.style, { position: "absolute", inset: "0", width: "100%", height: "100%", pointerEvents: "none" });
+      return canvas;
+    }
+    /**
+     * Mount the DEDICATED layer of a native indicator that names its own channel (an
+     * instance of a multi-instance type painting through a registered layer): a fresh
+     * instance of the layer's definition on its own canvas, reading that channel. Idempotent
+     * — a show after hide re-mounts the model, and the layer (kept across the hide, like the
+     * z key) is simply reused. Skipped while the renderer itself is unmounted (`mount()`
+     * catches up from the scene).
+     */
+    ensureInstanceLayer(model) {
+      const channel = model.native?.channel;
+      if (!channel || !this.plot) return;
+      if (this.extLayers.some((l) => l.owner === model.id)) return;
+      const base = this.extLayers.find((l) => l.owner === null && l.def.id === model.native.type);
+      if (!base) return;
+      const canvas = this.createLayerCanvas();
+      canvas.width = this.dataCanvas.width;
+      canvas.height = this.dataCanvas.height;
+      canvas.style.width = this.dataCanvas.style.width || "100%";
+      canvas.style.height = this.dataCanvas.style.height || "100%";
+      const entry = { def: base.def, instance: base.def.create(), canvas, channel, owner: model.id };
+      this.extLayers.push(entry);
+      this.plot.insertBefore(canvas, this.chromeCanvas);
+      entry.instance.mount(canvas);
+    }
+    /** Tear down the dedicated layer of a removed indicator (a hide keeps it). */
+    dropInstanceLayer(indicatorId) {
+      const i = this.extLayers.findIndex((l2) => l2.owner === indicatorId);
+      if (i < 0) return;
+      const [l] = this.extLayers.splice(i, 1);
+      l.instance.destroy?.();
+      l.canvas.remove();
+    }
+    /** The mounted native indicator that OWNS an SDK layer entry. A dedicated entry is
+     *  owned by the instance it was mounted for; the base entry by the mounted indicator
+     *  whose type equals the layer id and that has no channel of its own (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(l) {
+      if (l.owner !== null) return this.scene.indicators.get(l.owner) ?? null;
       for (const m of this.scene.indicators.values()) {
-        if (m.native?.type === layerId) return m;
+        if (m.native?.type === l.def.id && !m.native.channel) 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);
+    layerPane(l) {
+      const owner = this.layerOwner(l);
       const paneId = owner ? owner.paneId ?? PRICE_PANE_ID : PRICE_PANE_ID;
       return this.scene.panes.get(paneId) ?? null;
     }
@@ -39565,12 +39786,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
      *  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 byId = new Map(this.extLayers.map((l) => [l.channel, l.canvas]));
       const { below, above } = stackLayers(
         this.extLayers.map((l) => {
-          const owner = this.layerOwner(l.def.id);
+          const owner = this.layerOwner(l);
           return {
-            id: l.def.id,
+            id: l.channel,
             placement: l.def.placement === "below-data" ? "below-data" : "above-data",
             ownerZ: owner ? this.scene.zOf(owner.id) : null
           };
@@ -39592,7 +39813,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     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(",");
+      const sig = [...below.map((c) => this.extLayers.find((l) => l.canvas === c).channel), "|", ...above.map((c) => this.extLayers.find((l) => l.canvas === c).channel)].join(",");
       if (sig === this.layerOrderSig) return;
       this.layerOrderSig = sig;
       for (const c of below) this.plot.insertBefore(c, this.dataCanvas);
@@ -39616,6 +39837,17 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         (m) => m.series.length === 0 && !!m.native && this.extLayers.some((l) => l.def.id === m.native.type)
       );
     }
+    /**
+     * True when SDK-layer content on the price pane paints at BAR PRICES without
+     * contributing a series: the active chart type's own layer, or an overlay layer native
+     * (a series-less model whose type names a mounted layer). Hiding the candles must then
+     * keep the bars in the price scale — with nothing else on the pane the scale would fall
+     * to the {0,1} placeholder and every such layer would paint off-screen and vanish.
+     */
+    priceLayersAnchoredToBars(masterModels) {
+      if (this.extLayers.some((l) => l.owner === null && l.def.id === this.scene.priceStyle)) return true;
+      return masterModels.some((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,
@@ -44355,6 +44587,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   exports.rendererLayers = rendererLayers;
   exports.resolveEngines = resolveEngines;
   exports.resolveTheme = resolveTheme;
+  exports.seriesInScale = seriesInScale;
+  exports.seriesShownOn = seriesShownOn;
   exports.settingsRowValueKeys = settingsRowValueKeys;
   exports.sharedBarStore = sharedBarStore;
   exports.sidePanels = sidePanels;