@luxalgo/vela 0.7.0 → 0.7.1

package/dist/{chunk-A4G64KVF.js → chunk-5RQGCZTX.js}

@@ -1,5 +1,5 @@
-import { deserializeDrawing, chartTypes, rendererLayers, foldBaseModulation, registerChartType, rendererDefaults, getDrawingType, settingsRowVisible, normalizeSettingsRow, Magnifier, TextLabel, Callout, resetDrawingSettings, registerNativeIndicator, chartType, getNativeIndicator, nativeIndicatorDescriptors, drawingTypes, settingsRowValueKeys, formatDuration, RegressionChannel, FixedRangeVolumeProfile, DEFAULT_DRAWING_COLOR, SegmentDrawing, ArrowMark, GlyphStamp, RadialFib, FibSpiral, DedekindTessellation, MachFigure, GannSquare, FibRatios, MeasureBox, PositionTool, AnchoredVwap, PatternDrawing, Comment, PriceNote, Signpost, Note, PriceLabel, GANN_SQUARE_ARCS, magnifierTimeframeLabel, lineSegmentIntersection, MAGNIFIER_TIMEFRAME_OPTIONS, GLYPH_OPTIONS, STAMP_SIZE_OPTIONS, LINE_STYLE_OPTIONS, DEDEKIND_CURVATURE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, TEXT_SIZE_OPTIONS, createDrawing, inputVisible, tickerModifierIds, CalloutBase, DIRECTION_OPTIONS, stableSeriesId } from './chunk-IFJJPXSV.js';
-import { themeTokens, Dialog, closeOpenPopovers, closeWidthPopover, fieldSection, buildFieldControl, fieldSeparator, fieldGrid, fieldRow, CALLOUT_STYLE_ID, CALLOUT_CSS, Popover, blendOver, splitColor, CalloutBubble, Menu, TextArea, NumberInput, buildColorPicker, isPopoverOpen, eventDismissedPopover, toggleSelectList, openPopoverTrigger, fieldGridColumns, FIELD_GAP_PX, STATIC_TOKENS } from './chunk-CZRNTHD6.js';
+import { deserializeDrawing, chartTypes, rendererLayers, isLineLikeSeries, seriesShownOn, foldBaseModulation, registerChartType, rendererDefaults, getDrawingType, settingsRowVisible, normalizeSettingsRow, Magnifier, TextLabel, Callout, resetDrawingSettings, registerNativeIndicator, chartType, getNativeIndicator, nativeIndicatorDescriptors, nativeInstanceChannel, drawingTypes, settingsRowValueKeys, formatDuration, RegressionChannel, FixedRangeVolumeProfile, DEFAULT_DRAWING_COLOR, SegmentDrawing, ArrowMark, GlyphStamp, RadialFib, FibSpiral, DedekindTessellation, MachFigure, GannSquare, FibRatios, MeasureBox, PositionTool, AnchoredVwap, PatternDrawing, Comment, PriceNote, Signpost, Note, PriceLabel, GANN_SQUARE_ARCS, magnifierTimeframeLabel, lineSegmentIntersection, MAGNIFIER_TIMEFRAME_OPTIONS, GLYPH_OPTIONS, STAMP_SIZE_OPTIONS, LINE_STYLE_OPTIONS, DEDEKIND_CURVATURE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, TEXT_SIZE_OPTIONS, createDrawing, inputVisible, seriesInScale, tickerModifierIds, CalloutBase, DIRECTION_OPTIONS, stableSeriesId } from './chunk-BFA32GOU.js';
+import { themeTokens, Dialog, closeOpenPopovers, closeWidthPopover, fieldSection, buildFieldControl, fieldSeparator, fieldGrid, fieldRow, CALLOUT_STYLE_ID, CALLOUT_CSS, Popover, blendOver, splitColor, CalloutBubble, Menu, TextArea, NumberInput, buildColorPicker, isPopoverOpen, eventDismissedPopover, toggleSelectList, openPopoverTrigger, fieldGridColumns, FIELD_GAP_PX, STATIC_TOKENS } from './chunk-BKHSQ4YM.js';
 import { icon, iconAt, withAlpha, WARNING, ACCENT, NEUTRAL, BULLISH, CATEGORICAL, SERIES_LINE, BEARISH, isDarkColor, INFO, injectStyles, CHIP_PLATE, CROSSHAIR, TRADE_EXIT, TRADE_SHORT, TRADE_LONG, iconMarkup, overlayScrollbarCss, SLATE_DEEP, VALID, INVALID, SLATE, FIELD_FOCUS_CSS, FIELD_FOCUS_RING, svg24, svg24Solid } from './chunk-CAFCLMPF.js';
 
 // src/core/events/EventBus.ts
@@ -3170,11 +3170,6 @@ function resolveAnimations(animations) {
   };
 }
 
-// src/core/model/series.ts
-function isLineLikeSeries(spec) {
-  return spec.kind !== "candle" && spec.kind !== "bar" && spec.kind !== "markers";
-}
-
 // src/renderers/shared/IndicatorInputsDialog.ts
 var PROPS_TAB = "Properties";
 function bagOf(row, decl) {
@@ -5255,33 +5250,32 @@ function candleGeometry(xCss, spacing, dpr, bodyScale = 1) {
     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 prev2 = merged[merged.length - 1];
-      const next = intervals[k];
-      if (Math.abs(yOf(prev2.hi) - yOf(next.lo)) < 1) {
-        prev2.hi = next.hi;
-        if (next.headIdx < prev2.headIdx) {
-          prev2.headIdx = next.headIdx;
-          prev2.headTime = next.headTime;
-          prev2.open = next.open;
-        }
-        if (next.lastIdx > prev2.lastIdx) {
-          prev2.lastIdx = next.lastIdx;
-          prev2.close = next.close;
+    if (runs.length === 0) return;
+    runs.sort((a, b) => a.lo - b.lo);
+    const merged = [];
+    for (const next of runs) {
+      let prev2;
+      for (let k = merged.length - 1; k >= 0; k -= 1) {
+        if (merged[k].color === next.color) {
+          prev2 = merged[k];
+          break;
         }
+      }
+      if (prev2 && Math.abs(yOf(prev2.hi) - yOf(next.lo)) < 1) {
+        prev2.hi = next.hi;
+        if (next.lastIdx > prev2.lastIdx) prev2.lastIdx = next.lastIdx;
       } else {
         merged.push(next);
       }
     }
-    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];
@@ -5291,26 +5285,17 @@ function aggregateCandleColumns(bars, i0, i1, xOf, yOf) {
       flush();
       col = x;
     }
+    const color = colorOf2(b);
     let lo = b.low;
     let hi = b.high;
-    let headIdx = i;
-    let headTime = b.time;
-    let open = 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;
-        open = 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, 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;
@@ -6285,7 +6270,7 @@ var WebGL2Backend = class {
    *  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);
@@ -6396,7 +6381,7 @@ var WebGL2Backend = class {
     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));
@@ -6537,14 +6522,17 @@ var WebGL2Backend = class {
     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];
@@ -6593,24 +6581,26 @@ var WebGL2Backend = class {
   /**
    * 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":
@@ -8274,7 +8264,7 @@ var Canvas2dBackend = class {
     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));
@@ -8450,12 +8440,15 @@ var Canvas2dBackend = class {
     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];
@@ -8512,17 +8505,18 @@ var Canvas2dBackend = class {
   }
   /**
    * 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));
@@ -8530,11 +8524,12 @@ var Canvas2dBackend = class {
     }
   }
   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":
@@ -16772,6 +16767,7 @@ function computePaneScale(models, bars, includeCandles, i0, i1, drawings, log =
   return { min: min - span * MARGIN_BOTTOM, max: max + 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];
@@ -16991,6 +16987,22 @@ var MarkPopover = class {
     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);
@@ -16998,12 +17010,14 @@ var MarkPopover = class {
     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;
@@ -17051,6 +17065,7 @@ var MarkPopover = class {
   }
   destroy() {
     this.close();
+    this.deps.plot.ownerDocument.removeEventListener("pointerdown", this.onPress, true);
     this.anchor.remove();
   }
   place(rect) {
@@ -17921,6 +17936,13 @@ var NativeRenderer = class {
     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 = "";
@@ -19066,11 +19088,7 @@ var NativeRenderer = class {
     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);
@@ -19087,6 +19105,7 @@ var NativeRenderer = class {
     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());
@@ -19679,6 +19698,7 @@ var NativeRenderer = class {
     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,
@@ -19722,6 +19742,7 @@ var NativeRenderer = class {
       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);
@@ -20515,29 +20536,31 @@ var NativeRenderer = class {
       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 {
@@ -20560,9 +20583,10 @@ var NativeRenderer = class {
     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;
@@ -20571,7 +20595,7 @@ var NativeRenderer = class {
       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);
@@ -20597,9 +20621,9 @@ var NativeRenderer = class {
     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();
     }
   }
@@ -20608,13 +20632,15 @@ var NativeRenderer = class {
     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,
@@ -20657,12 +20683,12 @@ var NativeRenderer = class {
       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();
@@ -20945,19 +20971,60 @@ 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) {
+  /** 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;
   }
@@ -20965,12 +21032,12 @@ var NativeRenderer = class {
    *  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
         };
@@ -20992,7 +21059,7 @@ var NativeRenderer = class {
   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);
@@ -21512,6 +21579,9 @@ var IndicatorHandleImpl = class {
   setProps(values) {
     this.controller.applyProps(this.id, values);
   }
+  updateCode(source) {
+    this.controller.updateCode(this.id, source);
+  }
   setVisible(visible) {
     this.controller.setVisible(this.id, visible);
   }
@@ -21534,6 +21604,10 @@ var IndicatorHandleImpl = class {
   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;
@@ -22342,6 +22416,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
       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);
@@ -22384,7 +22459,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
   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;
@@ -22592,6 +22667,23 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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()) {
@@ -22836,6 +22928,61 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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() {
@@ -22850,7 +22997,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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;
@@ -22876,7 +23023,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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 {
@@ -22957,7 +23104,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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();
@@ -22981,6 +23128,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
       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 defaults = {};
       for (const input of prepared.inputs) defaults[input.key] = input.defval;
@@ -23051,7 +23199,9 @@ var EngineOrchestrator = class _EngineOrchestrator {
       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,
@@ -23059,7 +23209,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
         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);
         }
@@ -23070,16 +23220,26 @@ var EngineOrchestrator = class _EngineOrchestrator {
       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 ?? [],
@@ -23369,6 +23529,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
   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) {
@@ -23386,7 +23547,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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);
         }
@@ -23515,6 +23676,34 @@ function yieldToPaint() {
   }
   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;