@luxalgo/vela 0.6.4 → 0.6.5

package/dist/workspace.cjs

@@ -13407,6 +13407,7 @@ var CSS8 = `
 .vela-sp-badge[data-p='hyperliquid'] { color: #50d2c1; } /* palette-exempt: venue brand mark */
 .vela-sp-empty { padding: var(--vela-space-3); color: var(--vela-fg-muted); text-align: center; }
 `;
+var PAGE = 100;
 var SymbolPicker = class {
   constructor(opts) {
     this.source = () => [];
@@ -13414,6 +13415,7 @@ var SymbolPicker = class {
     this.highlighted = 0;
     this.seed = "";
     this.activeTab = "All";
+    this.visible = PAGE;
     const doc = (opts.host ?? document.body).ownerDocument;
     injectStyles(STYLE_ID7, CSS8, doc);
     this.input = doc.createElement("input");
@@ -13440,6 +13442,12 @@ var SymbolPicker = class {
     }
     this.list = doc.createElement("div");
     this.list.className = "vela-sp-list";
+    this.list.addEventListener("scroll", () => {
+      if (this.rows.length < this.visible) return;
+      if (this.list.scrollTop + this.list.clientHeight < this.list.scrollHeight - 200) return;
+      this.visible += PAGE;
+      this.grow();
+    });
     this.dialog = new Dialog({
       title: "Symbol Search",
       host: opts.host,
@@ -13505,11 +13513,15 @@ var SymbolPicker = class {
       } else delete el.dataset.highlighted;
     });
   }
-  refresh() {
-    const doc = this.list.ownerDocument;
+  computeRows() {
     const TAB_TYPES = { Crypto: ["crypto"], Stocks: ["stock"], ETFs: ["etf"], Forex: ["forex"], Commodities: ["commodity"] };
     const pool = this.activeTab === "All" ? this.source() : this.source().filter((s) => TAB_TYPES[this.activeTab]?.includes((s.type ?? "").toLowerCase()) || this.activeTab === "Crypto" && (s.type ?? "").toLowerCase() === "futures");
-    this.rows = filterSymbols(pool, this.input.value);
+    return filterSymbols(pool, this.input.value, this.visible);
+  }
+  refresh() {
+    const doc = this.list.ownerDocument;
+    this.visible = PAGE;
+    this.rows = this.computeRows();
     this.highlighted = 0;
     this.list.replaceChildren();
     if (!this.rows.length) {
@@ -13519,34 +13531,42 @@ var SymbolPicker = class {
       this.list.appendChild(empty);
       return;
     }
-    for (const s of this.rows) {
-      const row = doc.createElement("div");
-      row.className = "vela-sp-row";
-      row.dataset.ticker = s.ticker;
-      const venue = s.prefix ?? s.provider;
-      if (venue) row.dataset.venue = venue;
-      const av = tickerIconEl(doc, baseOf(s), s.ticker, "vela-sp-avatar");
-      const main = doc.createElement("span");
-      main.className = "vela-sp-main";
-      const t = doc.createElement("span");
-      t.className = "vela-sp-ticker";
-      t.textContent = s.ticker;
-      const d = doc.createElement("span");
-      d.className = "vela-sp-desc";
-      d.textContent = s.description ?? (s.type ?? "");
-      main.append(t, d);
-      row.append(av, main);
-      if (venue) {
-        const badge = doc.createElement("span");
-        badge.className = "vela-sp-badge";
-        badge.dataset.p = s.provider ?? venue;
-        badge.textContent = venue;
-        row.appendChild(badge);
-      }
-      this.list.appendChild(row);
-    }
+    for (const s of this.rows) this.list.appendChild(this.rowEl(s));
     this.renderHighlight();
   }
+  /** Append the page the grown `visible` just uncovered — rows already on screen stay put. */
+  grow() {
+    const already = this.rows.length;
+    this.rows = this.computeRows();
+    for (const s of this.rows.slice(already)) this.list.appendChild(this.rowEl(s));
+  }
+  rowEl(s) {
+    const doc = this.list.ownerDocument;
+    const row = doc.createElement("div");
+    row.className = "vela-sp-row";
+    row.dataset.ticker = s.ticker;
+    const venue = s.prefix ?? s.provider;
+    if (venue) row.dataset.venue = venue;
+    const av = tickerIconEl(doc, baseOf(s), s.ticker, "vela-sp-avatar");
+    const main = doc.createElement("span");
+    main.className = "vela-sp-main";
+    const t = doc.createElement("span");
+    t.className = "vela-sp-ticker";
+    t.textContent = s.ticker;
+    const d = doc.createElement("span");
+    d.className = "vela-sp-desc";
+    d.textContent = s.description ?? (s.type ?? "");
+    main.append(t, d);
+    row.append(av, main);
+    if (venue) {
+      const badge = doc.createElement("span");
+      badge.className = "vela-sp-badge";
+      badge.dataset.p = s.provider ?? venue;
+      badge.textContent = venue;
+      row.appendChild(badge);
+    }
+    return row;
+  }
 };
 
 // src/widget/indicator-picker.ts
@@ -21997,6 +22017,12 @@ var SceneGraph = class {
   assignIndicatorZ(id) {
     if (!this.seriesZ.has(id)) this.seriesZ.set(id, this.bottomZ() - 1);
   }
+  /** Mount-time default for a LAYER-BACKED native (it paints on a canvas stacked above the
+   *  data canvas by default): top of the stack, so the recorded order tells the truth from
+   *  the first frame. Keeps an existing key, so a restored stack survives the remount. */
+  assignIndicatorZTop(id) {
+    if (!this.seriesZ.has(id)) this.seriesZ.set(id, this.topZ() + 1);
+  }
   forgetIndicatorZ(id) {
     this.seriesZ.delete(id);
   }
@@ -31035,6 +31061,19 @@ function rendererLayers() {
   return [...registry4.values()];
 }
 
+// src/renderers/native/core/layerStacking.ts
+function stackLayers(entries, candleZ) {
+  const keyed = entries.map((e) => ({
+    id: e.id,
+    key: e.ownerZ ?? (e.placement === "below-data" ? -Infinity : candleZ)
+  }));
+  keyed.sort((a, b) => a.key - b.key);
+  const below = [];
+  const above = [];
+  for (const k of keyed) (k.key < candleZ ? below : above).push(k.id);
+  return { below, above };
+}
+
 // src/renderers/shared/dom-raster.ts
 function hasInk(color) {
   if (!color || color === "transparent") return false;
@@ -31407,6 +31446,8 @@ var NativeRenderer = class {
     this.volumeRenderer = new VolumeRenderer();
     /** SDK renderer layers instantiated at mount ({@link registerRendererLayer}). */
     this.extLayers = [];
+    /** Last applied layer-canvas order (ids below + above the data canvas) — re-slotted only on change. */
+    this.layerOrderSig = "";
     // The attribution mark (see chrome/AttributionMark + the NOTICE file): default-on;
     // disabling requires an equivalent visible attribution elsewhere in the host UI.
     this.attributionEl = null;
@@ -32337,9 +32378,7 @@ var NativeRenderer = class {
         if (el.getAttribute("data-vela-screenshot") === "under") rasterizeOverlay(ctx, el, frame);
       }
     }
-    const below = this.extLayers.filter((l) => l.def.placement === "below-data").map((l) => l.canvas);
-    const above = this.extLayers.filter((l) => l.def.placement !== "below-data").map((l) => l.canvas);
-    for (const canvas of [...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas]) {
+    for (const canvas of [...this.canvasPile(), this.chromeCanvas, this.drawingsCanvas]) {
       if (canvas && canvas.width > 0 && canvas.height > 0) ctx.drawImage(canvas, 0, 0);
     }
     if (frame) {
@@ -32473,6 +32512,7 @@ var NativeRenderer = class {
     const below = this.extLayers.filter((l) => l.def.placement === "below-data").map((l) => l.canvas);
     const above = this.extLayers.filter((l) => l.def.placement !== "below-data").map((l) => l.canvas);
     this.plot.append(...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas, this.cursorCanvas, this.overlayRoot);
+    this.layerOrderSig = "";
     this.wrapper.appendChild(this.plot);
     this.factoryConfig = this.getConfig();
     this.attributionEl = this.buildAttributionEl();
@@ -33001,7 +33041,8 @@ var NativeRenderer = class {
   mountIndicator(model) {
     this.scene.indicators.set(model.id, model);
     this.refreshAnchorOffset(model);
-    this.scene.assignIndicatorZ(model.id);
+    if (model.native && this.extLayers.some((l) => l.def.id === model.native.type)) this.scene.assignIndicatorZTop(model.id);
+    else this.scene.assignIndicatorZ(model.id);
     this.inputsUI.upsert(model.id, model.shorttitle ?? model.title, model.inputs, model.inputValues, model.paneId, {
       native: !!model.native,
       ...model.shorttitle ? { settingsTitle: model.title } : {}
@@ -33820,10 +33861,17 @@ var NativeRenderer = class {
     const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
     for (const l of this.extLayers) {
       if (!l.def.repaintOnCursor) continue;
-      l.instance.render(this.extLayerArgs(l.def.id, pane.scale, pane.bounds, nowMs));
+      const lp = this.layerPane(l.def.id) ?? pane;
+      if (lp.collapsed) continue;
+      l.instance.render(this.extLayerArgs(l.def.id, lp.scale, lp.bounds, nowMs));
       if (this.animZoom && l.instance.animating?.()) this.animator.start();
     }
   }
+  /** Blank one SDK layer canvas (a collapsed host pane suppresses the layer's painting). */
+  clearLayerCanvas(canvas) {
+    if (canvas.width === 0 || canvas.height === 0) return;
+    canvas.getContext("2d")?.clearRect(0, 0, canvas.width, canvas.height);
+  }
   /** One frame's args for an SDK renderer layer (shared by the data + cursor paint paths). */
   extLayerArgs(id, scale, bounds, nowMs) {
     return {
@@ -33842,6 +33890,7 @@ var NativeRenderer = class {
   }
   /** Paint the below-data (L-1) + geometry (L0) + chrome (L1) layers from the current scene/coords. */
   paintData() {
+    this.syncLayerCanvasOrder();
     this.stampScaleInvert();
     this.backend.modelAlpha = this.modelAlpha;
     this.backend.candleBodyAlpha = this.candleBodyAlpha;
@@ -33872,9 +33921,14 @@ var NativeRenderer = class {
       const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
       let folded = null;
       for (const l of this.extLayers) {
-        const args = this.extLayerArgs(l.def.id, pane.scale, pane.bounds, nowMs);
+        const lp = this.layerPane(l.def.id) ?? pane;
+        if (lp.collapsed) {
+          this.clearLayerCanvas(l.canvas);
+          continue;
+        }
+        const args = this.extLayerArgs(l.def.id, lp.scale, lp.bounds, nowMs);
         l.instance.render(args);
-        folded = foldBaseModulation(folded, l.instance.modulateBase?.(args) ?? null);
+        if (lp === pane) folded = foldBaseModulation(folded, l.instance.modulateBase?.(args) ?? null);
         if (this.animZoom && l.instance.animating?.()) this.animator.start();
       }
       if (folded) {
@@ -34036,6 +34090,9 @@ var NativeRenderer = class {
           pane.scaleTarget = { min: 0, max: maxVol / VOLUME_PANE_FILL_FRAC };
           pane.axisFormat = "volume";
         }
+      } else if (this.layerNativesOwnPane(pane, masterModels)) {
+        pane.scaleTarget = computePaneScale([], this.bars, true, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id));
+        pane.percentBaseline = this.bars[i0]?.close ?? 0;
       }
       if (pane === pricePane && this.scene.tradeMarkers.visible && pane.bounds.height > 0) {
         const th = this.tradesScaleHints(vr);
@@ -34122,6 +34179,59 @@ var NativeRenderer = class {
     }
     return null;
   }
+  /** The mounted native indicator that OWNS an SDK layer — the one whose type equals the
+   *  layer id (the id doubles as the data channel, so the pairing is the SDK's own
+   *  contract). Null for chart-type channels and while the owner is hidden (a hidden
+   *  indicator leaves the scene; its cleared data channel paints nothing anyway). */
+  layerOwner(layerId) {
+    for (const m of this.scene.indicators.values()) {
+      if (m.native?.type === layerId) return m;
+    }
+    return null;
+  }
+  /** The pane an SDK layer paints on: its owner's pane, else the price pane. */
+  layerPane(layerId) {
+    const owner = this.layerOwner(layerId);
+    const paneId = owner ? owner.paneId ?? PRICE_PANE_ID2 : PRICE_PANE_ID2;
+    return this.scene.panes.get(paneId) ?? null;
+  }
+  /** The SDK layer canvases split around the data canvas, each side back-to-front:
+   *  owned layers by their owner's z key against the candles' (an indicator restacked
+   *  below the candles takes its layer canvas along), unowned by declared placement. */
+  orderedLayerCanvases() {
+    const byId = new Map(this.extLayers.map((l) => [l.def.id, l.canvas]));
+    const { below, above } = stackLayers(
+      this.extLayers.map((l) => {
+        const owner = this.layerOwner(l.def.id);
+        return {
+          id: l.def.id,
+          placement: l.def.placement === "below-data" ? "below-data" : "above-data",
+          ownerZ: owner ? this.scene.zOf(owner.id) : null
+        };
+      }),
+      this.scene.candleZ
+    );
+    return { below: below.map((id) => byId.get(id)), above: above.map((id) => byId.get(id)) };
+  }
+  /** The full canvas pile in paint order (layers + data/volume/vpvr) — what the DOM
+   *  stacking and the screenshot compositor must both follow. */
+  canvasPile() {
+    const { below, above } = this.orderedLayerCanvases();
+    return [...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above];
+  }
+  /** Re-slot the SDK layer canvases in the plot when the computed order changed (a z
+   *  write, a restored config, an indicator mount/remove/restack). Runs at the top of
+   *  every data frame; a no-op when the signature is unchanged. Re-inserting an
+   *  absolutely-positioned, pointer-transparent canvas repaints nothing by itself. */
+  syncLayerCanvasOrder() {
+    if (this.extLayers.length === 0 || !this.plot) return;
+    const { below, above } = this.orderedLayerCanvases();
+    const sig = [...below.map((c) => this.extLayers.find((l) => l.canvas === c).def.id), "|", ...above.map((c) => this.extLayers.find((l) => l.canvas === c).def.id)].join(",");
+    if (sig === this.layerOrderSig) return;
+    this.layerOrderSig = sig;
+    for (const c of below) this.plot.insertBefore(c, this.dataCanvas);
+    for (const c of above) this.plot.insertBefore(c, this.chromeCanvas);
+  }
   /** True when an active volume layer is this study pane's ONLY content — so its scale should
    *  come from volume, not the empty {0,1} placeholder. (In the price pane, or alongside a real
    *  series, volume stays a bottom overlay and the master scale wins.) */
@@ -34131,6 +34241,15 @@ var NativeRenderer = class {
     if (this.nativeLayerPane("volume") !== pane) return false;
     return masterModels.every((m) => m.native?.type === "volume");
   }
+  /** True when this study pane's master content is only SDK-layer natives (series-less
+   *  models whose type names a mounted layer) — its scale then follows the visible bars
+   *  (see the call site). Any real master series takes over the scale as usual. */
+  layerNativesOwnPane(pane, masterModels) {
+    if (pane.kind === "price" || masterModels.length === 0) return false;
+    return masterModels.every(
+      (m) => m.series.length === 0 && !!m.native && this.extLayers.some((l) => l.def.id === m.native.type)
+    );
+  }
   /** Per-pane scale state for a host UI (e.g. a price-axis context menu): the pane's pixel
    *  band (`top`/`height`, so a click y maps to a pane) plus its current axis `mode`/`log`.
    *  Top-to-bottom order. Every pane is independent — the price pane from the scene setting,

package/dist/workspace.js

@@ -1,6 +1,6 @@
-import { WidgetHistory, SessionShadingTracker, prefixedSymbol, normalizeSession, Watermark, Statusline, MarketStatusTracker, ChartContextMenu, timeframeMs, statuslineInkOf, indicatorLedger, Glider, localStorageAdapter, decodeState, SymbolPicker, IndicatorPicker, TimeframeQuick, Topbar, PanelDock, ObjectTree, DataWindow, Toast, Bottombar, MobileBar, DrawingPill, LayoutModeController, toolShortcutHints, resolveIndicators, sanitizeState, encodeState, TimeframeDrawer, RANGE_PRESETS, DrawingsDrawer, MoreDrawer, priceStyleIcon, priceStyleLabel, TimezoneDrawer, PriceScaleDrawer, ZOOM_IN, ZOOM_OUT, PAN_FAST, ShortcutsHelp } from './chunk-3QX6QOCX.js';
-export { decodeState, encodeState, sanitizeState } from './chunk-3QX6QOCX.js';
-import { parseSymbol, Vela, normalizeTimezone, TypedEventBus, MultiProviderFeed, resolveTheme, createCustomMark, createAttributionMark, DrawingToolbar, defaultToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs, priceStyleIds } from './chunk-6FA4TDUF.js';
+import { WidgetHistory, SessionShadingTracker, prefixedSymbol, normalizeSession, Watermark, Statusline, MarketStatusTracker, ChartContextMenu, timeframeMs, statuslineInkOf, indicatorLedger, Glider, localStorageAdapter, decodeState, SymbolPicker, IndicatorPicker, TimeframeQuick, Topbar, PanelDock, ObjectTree, DataWindow, Toast, Bottombar, MobileBar, DrawingPill, LayoutModeController, toolShortcutHints, resolveIndicators, sanitizeState, encodeState, TimeframeDrawer, RANGE_PRESETS, DrawingsDrawer, MoreDrawer, priceStyleIcon, priceStyleLabel, TimezoneDrawer, PriceScaleDrawer, ZOOM_IN, ZOOM_OUT, PAN_FAST, ShortcutsHelp } from './chunk-N6MBJHMV.js';
+export { decodeState, encodeState, sanitizeState } from './chunk-N6MBJHMV.js';
+import { parseSymbol, Vela, normalizeTimezone, TypedEventBus, MultiProviderFeed, resolveTheme, createCustomMark, createAttributionMark, DrawingToolbar, defaultToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs, priceStyleIds } from './chunk-FQBT4NFM.js';
 import { resolveEngines, legendActionsProviderFor, rendererDefaults, widgetActions, widgetAttachments } from './chunk-BEJ57HP4.js';
 import { KeymapManager, isEditableTarget } from './chunk-2R7BANEM.js';
 import { applyPlotOverlayTokens, ensureUIHost, Menu } from './chunk-OICPLNU7.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxalgo/vela",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "Open-source charting library with a native high-performance renderer, drawing tools, pluggable chart types and pluggable scripting engines.",
   "license": "Apache-2.0",
   "homepage": "https://luxalgo.com/vela",