@luxalgo/vela 0.6.2 → 0.6.4

package/dist/workspace.d.cts

@@ -1,9 +1,9 @@
-import { O as OHLCV, V as VisibleRangePreset, a as VisibleRange, b as VelaOptions, c as VelaTheme, N as NativeBackend, d as MarketSession } from './options-BqGeFHtp.cjs';
-import { S as SyncSetting, V as VelaStorage, C as CellState, W as WidgetHistory, R as ResolvedIndicator, a as RangePreset, T as TrackSizes, b as VelaShellOptions, c as SyncOptions, d as SyncKind, e as WorkspaceState } from './history-ChoT34nz.cjs';
-export { f as ChartState, P as PanelsState, g as decodeState, h as encodeState, s as sanitizeState } from './history-ChoT34nz.cjs';
+import { O as OHLCV, V as VisibleRangePreset, a as VisibleRange, b as VelaOptions, c as VelaTheme, N as NativeBackend, d as MarketSession } from './options-YdiaaVjt.cjs';
+import { S as SyncSetting, V as VelaStorage, C as CellState, W as WidgetHistory, R as ResolvedIndicator, a as RangePreset, T as TrackSizes, b as VelaShellOptions, c as SyncOptions, d as SyncKind, e as WorkspaceState } from './history-BmyjaVir.cjs';
+export { f as ChartState, P as PanelsState, g as decodeState, h as encodeState, s as sanitizeState } from './history-BmyjaVir.cjs';
 import { K as KeymapManager } from './keymap-CGOz5F5f.cjs';
-import { I as IndicatorHandle, S as ScriptingEngine, W as WidgetContext, V as Vela, a as ScriptRun } from './contributions-DDpv7hEL.cjs';
-import { M as MarketDataFeed } from './DataProvider-CNmk84SH.cjs';
+import { I as IndicatorHandle, S as ScriptingEngine, W as WidgetContext, V as Vela, a as ScriptRun } from './contributions-2bEmCF9S.cjs';
+import { M as MarketDataFeed } from './DataProvider-DrN7ZIou.cjs';
 
 /** The cells that follow `originId` under `setting` — PURE (never includes the origin). */
 declare function syncTargets(originId: string, setting: SyncSetting | undefined, cellIds: readonly string[]): string[];
@@ -95,6 +95,8 @@ interface CellDeps {
     activate(id: string): void;
     /** The cell's market changed in place (chrome/retention refresh upstream). */
     onMarketChanged(id: string): void;
+    /** The cell's price style changed in place (topbar icon/menu refresh upstream). */
+    onPriceStyleChanged(id: string): void;
     /** The cell's indicator ledger changed (count/picker refresh upstream). */
     onIndicatorsChanged(id: string): void;
     /** Persistable per-cell state changed outside the market/indicator channels
@@ -129,6 +131,8 @@ declare class ChartCell {
     private readonly statusline;
     /** Keeps this cell's market badge on the symbol's real calendar (see {@link MarketStatusTracker}). */
     private readonly marketStatus;
+    /** Keeps the pre/post-market shading on the symbol's real calendar (see {@link SessionShadingTracker}). */
+    private readonly sessionShading;
     private readonly watermark;
     private readonly contextMenu;
     private readonly offMarket;
@@ -167,6 +171,22 @@ declare class ChartCell {
     /** Switch this cell's shown session in place (a reload — RTH and ETH are different bars). */
     setSession(session: MarketSession): void;
     private refreshSessionAvailable;
+    /** (Re)derive the pre/post-market shading bands for this cell's market. The loaded
+     *  depth (bars × timeframe) bounds the calendar fetch; the tracker clamps it. */
+    private refreshSessionShading;
+    /** The session-shade colors live in the renderer CONFIG (persisted with it, edited
+     *  live by the dialog swatch) — the cell only proxies them into its settings rows. */
+    private sessionShadeColor;
+    private setSessionShadeColor;
+    /**
+     * (Re)contribute this cell's settings-dialog sections: status line parts, the
+     * per-cell fetch depth, the watermark toggle, and — only while the cell's symbol
+     * HAS sessions — the Trading session group (RTH/ETH switch + the pre/post-market
+     * shading colors) inside the Symbol tab. Bars/watermark/titles are persistable
+     * cell state; a depth-only reload is silent, so mark dirty here. Re-run whenever
+     * a gate changes (the dialog reads the sections on open).
+     */
+    private pushSettingsSections;
     /** Show/hide this cell's symbol watermark (persisted per cell). */
     setWatermarkVisible(visible: boolean): void;
     /** Show/hide this cell's indicator titles — the in-chart legend rows (persisted per cell). */
@@ -636,6 +656,10 @@ declare class VelaWorkspace {
     private propagateMarket;
     /** Trigger ② — a cell's market changed: retention + sync always; chrome only if active. */
     private onCellMarketChanged;
+    /** Trigger ② — a cell's price style changed: the topbar button/menu only if active.
+     *  Reads the cell back (not the requested style) so the button reflects what the
+     *  renderer actually applied. */
+    private onCellPriceStyleChanged;
     /** Trigger ② — a cell's indicator ledger changed: count + picker only if active. */
     private onCellIndicatorsChanged;
     /** Timeframe changes routed from the topbar menu / quick entry (chip state follows). */

package/dist/workspace.d.ts

@@ -1,9 +1,9 @@
-import { O as OHLCV, V as VisibleRangePreset, a as VisibleRange, b as VelaOptions, c as VelaTheme, N as NativeBackend, d as MarketSession } from './options-BqGeFHtp.js';
-import { S as SyncSetting, V as VelaStorage, C as CellState, W as WidgetHistory, R as ResolvedIndicator, a as RangePreset, T as TrackSizes, b as VelaShellOptions, c as SyncOptions, d as SyncKind, e as WorkspaceState } from './history-CFqZm5re.js';
-export { f as ChartState, P as PanelsState, g as decodeState, h as encodeState, s as sanitizeState } from './history-CFqZm5re.js';
+import { O as OHLCV, V as VisibleRangePreset, a as VisibleRange, b as VelaOptions, c as VelaTheme, N as NativeBackend, d as MarketSession } from './options-YdiaaVjt.js';
+import { S as SyncSetting, V as VelaStorage, C as CellState, W as WidgetHistory, R as ResolvedIndicator, a as RangePreset, T as TrackSizes, b as VelaShellOptions, c as SyncOptions, d as SyncKind, e as WorkspaceState } from './history-CvOtsjT5.js';
+export { f as ChartState, P as PanelsState, g as decodeState, h as encodeState, s as sanitizeState } from './history-CvOtsjT5.js';
 import { K as KeymapManager } from './keymap-CGOz5F5f.js';
-import { I as IndicatorHandle, S as ScriptingEngine, W as WidgetContext, V as Vela, a as ScriptRun } from './contributions-ciV6Neyd.js';
-import { M as MarketDataFeed } from './DataProvider-DHX4x6-r.js';
+import { I as IndicatorHandle, S as ScriptingEngine, W as WidgetContext, V as Vela, a as ScriptRun } from './contributions-DatoAzMx.js';
+import { M as MarketDataFeed } from './DataProvider-BmHkcwvJ.js';
 
 /** The cells that follow `originId` under `setting` — PURE (never includes the origin). */
 declare function syncTargets(originId: string, setting: SyncSetting | undefined, cellIds: readonly string[]): string[];
@@ -95,6 +95,8 @@ interface CellDeps {
     activate(id: string): void;
     /** The cell's market changed in place (chrome/retention refresh upstream). */
     onMarketChanged(id: string): void;
+    /** The cell's price style changed in place (topbar icon/menu refresh upstream). */
+    onPriceStyleChanged(id: string): void;
     /** The cell's indicator ledger changed (count/picker refresh upstream). */
     onIndicatorsChanged(id: string): void;
     /** Persistable per-cell state changed outside the market/indicator channels
@@ -129,6 +131,8 @@ declare class ChartCell {
     private readonly statusline;
     /** Keeps this cell's market badge on the symbol's real calendar (see {@link MarketStatusTracker}). */
     private readonly marketStatus;
+    /** Keeps the pre/post-market shading on the symbol's real calendar (see {@link SessionShadingTracker}). */
+    private readonly sessionShading;
     private readonly watermark;
     private readonly contextMenu;
     private readonly offMarket;
@@ -167,6 +171,22 @@ declare class ChartCell {
     /** Switch this cell's shown session in place (a reload — RTH and ETH are different bars). */
     setSession(session: MarketSession): void;
     private refreshSessionAvailable;
+    /** (Re)derive the pre/post-market shading bands for this cell's market. The loaded
+     *  depth (bars × timeframe) bounds the calendar fetch; the tracker clamps it. */
+    private refreshSessionShading;
+    /** The session-shade colors live in the renderer CONFIG (persisted with it, edited
+     *  live by the dialog swatch) — the cell only proxies them into its settings rows. */
+    private sessionShadeColor;
+    private setSessionShadeColor;
+    /**
+     * (Re)contribute this cell's settings-dialog sections: status line parts, the
+     * per-cell fetch depth, the watermark toggle, and — only while the cell's symbol
+     * HAS sessions — the Trading session group (RTH/ETH switch + the pre/post-market
+     * shading colors) inside the Symbol tab. Bars/watermark/titles are persistable
+     * cell state; a depth-only reload is silent, so mark dirty here. Re-run whenever
+     * a gate changes (the dialog reads the sections on open).
+     */
+    private pushSettingsSections;
     /** Show/hide this cell's symbol watermark (persisted per cell). */
     setWatermarkVisible(visible: boolean): void;
     /** Show/hide this cell's indicator titles — the in-chart legend rows (persisted per cell). */
@@ -636,6 +656,10 @@ declare class VelaWorkspace {
     private propagateMarket;
     /** Trigger ② — a cell's market changed: retention + sync always; chrome only if active. */
     private onCellMarketChanged;
+    /** Trigger ② — a cell's price style changed: the topbar button/menu only if active.
+     *  Reads the cell back (not the requested style) so the button reflects what the
+     *  renderer actually applied. */
+    private onCellPriceStyleChanged;
     /** Trigger ② — a cell's indicator ledger changed: count + picker only if active. */
     private onCellIndicatorsChanged;
     /** Timeframe changes routed from the topbar menu / quick entry (chip state follows). */

package/dist/workspace.js

@@ -1,9 +1,9 @@
-import { WidgetHistory, prefixedSymbol, normalizeSession, Watermark, Statusline, MarketStatusTracker, ChartContextMenu, 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-U5KCQHAC.js';
-export { decodeState, encodeState, sanitizeState } from './chunk-U5KCQHAC.js';
-import { parseSymbol, Vela, normalizeTimezone, TypedEventBus, MultiProviderFeed, resolveTheme, createCustomMark, createAttributionMark, DrawingToolbar, defaultToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs, priceStyleIds } from './chunk-7D6YIF34.js';
-import { resolveEngines, legendActionsProviderFor, rendererDefaults, widgetActions, widgetAttachments } from './chunk-7Y7CJ7EN.js';
-import { KeymapManager, isEditableTarget } from './chunk-TP56QRMK.js';
-import { applyPlotOverlayTokens, ensureUIHost, Menu } from './chunk-QHZ7IXFL.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-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 { resolveEngines, legendActionsProviderFor, rendererDefaults, widgetActions, widgetAttachments } from './chunk-BEJ57HP4.js';
+import { KeymapManager, isEditableTarget } from './chunk-2R7BANEM.js';
+import { applyPlotOverlayTokens, ensureUIHost, Menu } from './chunk-OICPLNU7.js';
 import { registerIcon, svg16, injectStyles } from './chunk-PN5KWFZ4.js';
 
 // src/workspace/sync.ts
@@ -70,6 +70,8 @@ var ChartCell = class {
     this.activeRangeId = null;
     /** Latched verdict of {@link sessionAvailable} (async metadata, sticky per symbol). */
     this.sessionAvailableFlag = false;
+    /** Keeps the pre/post-market shading on the symbol's real calendar (see {@link SessionShadingTracker}). */
+    this.sessionShading = new SessionShadingTracker((zones) => this.inner?.renderer.set("sessionZones", zones));
     this.manifest = [];
     /** A restored ledger's manifest entry NAMES, waiting for the manifest to resolve
      *  (a pool/persisted cell can be built before the shared manifest has loaded). */
@@ -226,67 +228,7 @@ var ChartCell = class {
     });
     this.syncPresentNatives();
     this.refreshNativeCatalog();
-    const advanced = {
-      title: "Advanced",
-      placement: "end",
-      rows: [
-        {
-          kind: "select",
-          label: "Bars to fetch",
-          options: ["500", "1000", "2000", "5000", "10000", "20000"],
-          get: () => String(this.state.bars ?? 1e3),
-          set: (v) => {
-            this.state.bars = Number(v);
-            this.deps.onStateDirty();
-            void this.inner?.setMarket({ bars: Math.max(this.state.bars, this.rangeBars) });
-          }
-        }
-      ]
-    };
-    const watermarkSection = {
-      title: "Watermark",
-      placement: "symbol",
-      rows: [
-        {
-          kind: "toggle",
-          label: "Symbol watermark",
-          get: () => this.watermarkOn,
-          set: (v) => this.setWatermarkVisible(v)
-        }
-      ]
-    };
-    if (this.statusline) {
-      const sl = this.statusline;
-      this.inner.renderer.setSettingsSections([
-        {
-          title: "Status line",
-          rows: [
-            { kind: "heading", label: "Status line" },
-            { kind: "toggle", label: "Symbol name", get: () => sl.partVisible("name"), set: (v) => sl.setPartVisible("name", v) },
-            { kind: "toggle", label: "Market status", get: () => sl.partVisible("market"), set: (v) => sl.setPartVisible("market", v) },
-            { kind: "toggle", label: "OHLC values", get: () => sl.partVisible("ohlc"), set: (v) => sl.setPartVisible("ohlc", v) },
-            { kind: "toggle", label: "Bar change values", get: () => sl.partVisible("change"), set: (v) => sl.setPartVisible("change", v) },
-            { kind: "heading", label: "Indicators" },
-            {
-              kind: "toggle",
-              label: "Titles",
-              get: () => this.indicatorTitlesOn,
-              set: (v) => this.setIndicatorTitlesVisible(v)
-            },
-            {
-              kind: "toggle",
-              label: "Values",
-              get: () => this.indicatorValuesOn,
-              set: (v) => this.setIndicatorValuesVisible(v)
-            }
-          ]
-        },
-        advanced,
-        watermarkSection
-      ]);
-    } else {
-      this.inner.renderer.setSettingsSections([advanced, watermarkSection]);
-    }
+    this.pushSettingsSections();
     this.offMarket = this.inner.on("market:changed", ({ symbol: symbol2, timeframe }) => {
       this.state.symbol = symbol2;
       this.state.provider = parseSymbol(symbol2).provider ?? void 0;
@@ -331,9 +273,130 @@ var ChartCell = class {
       if (available !== this.sessionAvailableFlag) {
         this.sessionAvailableFlag = available;
         this.deps.onMarketChanged(this.id);
+        this.pushSettingsSections();
       }
+      this.refreshSessionShading();
     });
   }
+  /** (Re)derive the pre/post-market shading bands for this cell's market. The loaded
+   *  depth (bars × timeframe) bounds the calendar fetch; the tracker clamps it. */
+  refreshSessionShading() {
+    const chart = this.inner;
+    const symbol = this.state.symbol;
+    if (!chart || !symbol) return;
+    const lookbackMs = Math.max(this.state.bars ?? 1e3, this.rangeBars) * timeframeMs(this.state.timeframe ?? "60");
+    this.sessionShading.track(chart.data, symbol, { session: this.session, lookbackMs });
+  }
+  /** The session-shade colors live in the renderer CONFIG (persisted with it, edited
+   *  live by the dialog swatch) — the cell only proxies them into its settings rows. */
+  sessionShadeColor(key) {
+    const cfg = this.inner?.renderer.getConfig();
+    const v = cfg?.sessions?.[key];
+    return typeof v === "string" ? v : "";
+  }
+  setSessionShadeColor(key, color) {
+    this.inner?.renderer.applyConfig({ sessions: { [key]: color } });
+    this.deps.onStateDirty();
+  }
+  /**
+   * (Re)contribute this cell's settings-dialog sections: status line parts, the
+   * per-cell fetch depth, the watermark toggle, and — only while the cell's symbol
+   * HAS sessions — the Trading session group (RTH/ETH switch + the pre/post-market
+   * shading colors) inside the Symbol tab. Bars/watermark/titles are persistable
+   * cell state; a depth-only reload is silent, so mark dirty here. Re-run whenever
+   * a gate changes (the dialog reads the sections on open).
+   */
+  pushSettingsSections() {
+    const chart = this.inner;
+    if (!chart) return;
+    const rth = "Regular hours (RTH)";
+    const eth = "Extended hours (ETH)";
+    const sessionSection = {
+      title: "Trading session",
+      placement: "symbol",
+      rows: [
+        {
+          kind: "select",
+          label: "Session",
+          options: [rth, eth],
+          get: () => this.session === "extended" ? eth : rth,
+          set: (v) => this.setSession(v === eth ? "extended" : "regular")
+        },
+        {
+          kind: "color",
+          label: "Pre-market",
+          get: () => this.sessionShadeColor("premarketColor"),
+          set: (v) => this.setSessionShadeColor("premarketColor", v)
+        },
+        {
+          kind: "color",
+          label: "Post-market",
+          get: () => this.sessionShadeColor("postmarketColor"),
+          set: (v) => this.setSessionShadeColor("postmarketColor", v)
+        }
+      ]
+    };
+    const advanced = {
+      title: "Advanced",
+      placement: "end",
+      rows: [
+        {
+          kind: "select",
+          label: "Bars to fetch",
+          options: ["500", "1000", "2000", "5000", "10000", "20000"],
+          get: () => String(this.state.bars ?? 1e3),
+          set: (v) => {
+            this.state.bars = Number(v);
+            this.deps.onStateDirty();
+            void this.inner?.setMarket({ bars: Math.max(this.state.bars, this.rangeBars) });
+          }
+        }
+      ]
+    };
+    const watermarkSection = {
+      title: "Watermark",
+      placement: "symbol",
+      rows: [
+        {
+          kind: "toggle",
+          label: "Symbol watermark",
+          get: () => this.watermarkOn,
+          set: (v) => this.setWatermarkVisible(v)
+        }
+      ]
+    };
+    const sections = [];
+    if (this.statusline) {
+      const sl = this.statusline;
+      sections.push({
+        title: "Status line",
+        rows: [
+          { kind: "heading", label: "Status line" },
+          { kind: "toggle", label: "Symbol name", get: () => sl.partVisible("name"), set: (v) => sl.setPartVisible("name", v) },
+          { kind: "toggle", label: "Market status", get: () => sl.partVisible("market"), set: (v) => sl.setPartVisible("market", v) },
+          { kind: "toggle", label: "OHLC values", get: () => sl.partVisible("ohlc"), set: (v) => sl.setPartVisible("ohlc", v) },
+          { kind: "toggle", label: "Bar change values", get: () => sl.partVisible("change"), set: (v) => sl.setPartVisible("change", v) },
+          { kind: "heading", label: "Indicators" },
+          {
+            kind: "toggle",
+            label: "Titles",
+            get: () => this.indicatorTitlesOn,
+            set: (v) => this.setIndicatorTitlesVisible(v)
+          },
+          {
+            kind: "toggle",
+            label: "Values",
+            get: () => this.indicatorValuesOn,
+            set: (v) => this.setIndicatorValuesVisible(v)
+          }
+        ]
+      });
+    }
+    sections.push(advanced);
+    if (this.sessionAvailableFlag) sections.push(sessionSection);
+    sections.push(watermarkSection);
+    chart.renderer.setSettingsSections(sections);
+  }
   /** Show/hide this cell's symbol watermark (persisted per cell). */
   setWatermarkVisible(visible) {
     this.watermarkOn = visible;
@@ -388,6 +451,7 @@ var ChartCell = class {
     this.state.priceStyle = style;
     this.inner?.renderer.set("priceStyle", style);
     this.syncStatuslineColors();
+    this.deps.onPriceStyleChanged(this.id);
   }
   /** OHLC/change ink in the status line follows the ACTIVE price style's configured
    *  colors and direction rule (candle bodies by close-vs-open, baseline by position
@@ -611,6 +675,7 @@ var ChartCell = class {
     this.contextMenu.destroy();
     this.history.destroy();
     this.marketStatus?.stop();
+    this.sessionShading.stop();
     this.statusline?.destroy();
     this.watermark?.destroy();
     this.inner?.destroy();
@@ -1642,6 +1707,7 @@ var VelaWorkspace = class {
         context: () => this.context(),
         activate: (id2) => this.setActiveCell(id2),
         onMarketChanged: (id2) => this.onCellMarketChanged(id2),
+        onPriceStyleChanged: (id2) => this.onCellPriceStyleChanged(id2),
         onIndicatorsChanged: (id2) => this.onCellIndicatorsChanged(id2),
         onStateDirty: () => this.markStateDirty(),
         manifestSettled: () => this.manifestSettled
@@ -1931,6 +1997,16 @@ var VelaWorkspace = class {
     this.objectTree.setSymbol(cell.symbol);
     this.bottombar?.setSession({ session: cell.session, enabled: cell.sessionAvailable });
   }
+  /** Trigger ② — a cell's price style changed: the topbar button/menu only if active.
+   *  Reads the cell back (not the requested style) so the button reflects what the
+   *  renderer actually applied. */
+  onCellPriceStyleChanged(id) {
+    this.markStateDirty();
+    if (id !== this.activeId) return;
+    const cell = this.cellsById.get(id);
+    if (!cell) return;
+    this.topbar.setPriceStyle(cell.priceStyle);
+  }
   /** Trigger ② — a cell's indicator ledger changed: count + picker only if active. */
   onCellIndicatorsChanged(id) {
     this.markStateDirty();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxalgo/vela",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "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",