@luxalgo/vela 0.6.2 → 0.6.4

package/dist/widget.d.cts

@@ -1,10 +1,10 @@
-import { W as WidgetContext, V as Vela, y as SidePanelButton } from './contributions-DDpv7hEL.cjs';
-export { ah as DEFAULT_PANEL_ORDER, z as SidePanelDescriptor, A as SidePanelHandle, U as WidgetActionDescriptor, X as WidgetActionTarget, Y as WidgetAttachment, a4 as registerSidePanel, a5 as registerWidgetAction, a6 as registerWidgetAttachment, a8 as sidePanels, ac as unregisterSidePanel, ad as unregisterWidgetAction, ae as unregisterWidgetAttachment, af as widgetActions, ag as widgetAttachments } from './contributions-DDpv7hEL.cjs';
-import { b as VelaOptions, d as MarketSession, r as DataWindowReadout } from './options-BqGeFHtp.cjs';
+import { W as WidgetContext, V as Vela, y as SidePanelButton } from './contributions-2bEmCF9S.cjs';
+export { ah as DEFAULT_PANEL_ORDER, z as SidePanelDescriptor, A as SidePanelHandle, U as WidgetActionDescriptor, X as WidgetActionTarget, Y as WidgetAttachment, a4 as registerSidePanel, a5 as registerWidgetAction, a6 as registerWidgetAttachment, a8 as sidePanels, ac as unregisterSidePanel, ad as unregisterWidgetAction, ae as unregisterWidgetAttachment, af as widgetActions, ag as widgetAttachments } from './contributions-2bEmCF9S.cjs';
+import { b as VelaOptions, d as MarketSession, r as DataWindowReadout } from './options-YdiaaVjt.cjs';
 import { K as KeymapManager } from './keymap-CGOz5F5f.cjs';
-import { W as WidgetHistory, b as VelaShellOptions, e as WorkspaceState, a as RangePreset, i as PersistedState, P as PanelsState } from './history-ChoT34nz.cjs';
-export { B as Bottombar, j as BottombarOptions, C as CellState, f as ChartState, I as IndicatorLoader, k as IndicatorManifest, l as IndicatorManifestEntry, m as RANGE_PRESETS, R as ResolvedIndicator, V as VelaStorage, n as WidgetStorage, g as decodeState, h as encodeState, o as legacyWidgetState, p as loadPersisted, q as localStorageAdapter, r as parsePersisted, t as resolveIndicators, s as sanitizeState, u as savePersisted } from './history-ChoT34nz.cjs';
-import { a as SymbolDescriptor } from './DataProvider-CNmk84SH.cjs';
+import { W as WidgetHistory, b as VelaShellOptions, e as WorkspaceState, a as RangePreset, i as PersistedState, P as PanelsState } from './history-BmyjaVir.cjs';
+export { B as Bottombar, j as BottombarOptions, C as CellState, f as ChartState, I as IndicatorLoader, k as IndicatorManifest, l as IndicatorManifestEntry, m as RANGE_PRESETS, R as ResolvedIndicator, V as VelaStorage, n as WidgetStorage, g as decodeState, h as encodeState, o as legacyWidgetState, p as loadPersisted, q as localStorageAdapter, r as parsePersisted, t as resolveIndicators, s as sanitizeState, u as savePersisted } from './history-BmyjaVir.cjs';
+import { a as SymbolDescriptor } from './DataProvider-DrN7ZIou.cjs';
 import { d as SidePanel } from './side-panel-CT9ZwIGz.cjs';
 export { D as DEFAULT_PANEL_MAX_WIDTH, a as DEFAULT_PANEL_MIN_WIDTH, b as DEFAULT_PANEL_WIDTH, S as SidePanelOptions, c as clampPanelWidth } from './side-panel-CT9ZwIGz.cjs';
 
@@ -23,6 +23,11 @@ declare class VelaWidget {
     private readonly statusline;
     /** Keeps the statusline'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;
+    /** Whether the ACTIVE symbol declares real trading sessions (RTH/ETH meaningful) —
+     *  gates the bottombar toggle and the settings dialog's Trading session group. */
+    private sessionsAvailable;
     private readonly watermark;
     private readonly bottombar;
     private readonly objectTree;
@@ -160,9 +165,25 @@ declare class VelaWidget {
      * disabled there, but the API tolerates the call — the provider ignores the flag).
      */
     setSession(session: MarketSession): void;
-    /** Re-derive the RTH/ETH toggle's posture from the ACTIVE symbol's metadata: enabled
-     *  iff the resolved symbol declares a real session vocabulary (not `24x7`). */
+    /** Re-derive the session chrome from the ACTIVE symbol's metadata: the RTH/ETH
+     *  toggle shows (and the settings dialog's Trading session group appears) iff the
+     *  resolved symbol declares a real session vocabulary (not `24x7`); the pre/post
+     *  shading re-derives for the new market either way. */
     private refreshSessionToggle;
+    /** (Re)derive the pre/post-market shading bands for the current 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 widget only proxies them into its settings rows. */
+    private sessionShadeColor;
+    private setSessionShadeColor;
+    /**
+     * (Re)contribute the widget's settings-dialog sections: status line parts, the fetch
+     * depth, the watermark toggle, and — only while the active symbol HAS sessions — the
+     * Trading session group (RTH/ETH switch + the pre/post-market shading colors) inside
+     * the Symbol tab. Re-run whenever a gate changes (the dialog reads them on open).
+     */
+    private pushSettingsSections;
     /** Star/unstar a timeframe — the topbar chips and dropdown stars follow, and the
      *  set persists with the rest of the shell state. */
     private setTimeframeFavorite;

package/dist/widget.d.ts

@@ -1,10 +1,10 @@
-import { W as WidgetContext, V as Vela, y as SidePanelButton } from './contributions-ciV6Neyd.js';
-export { ah as DEFAULT_PANEL_ORDER, z as SidePanelDescriptor, A as SidePanelHandle, U as WidgetActionDescriptor, X as WidgetActionTarget, Y as WidgetAttachment, a4 as registerSidePanel, a5 as registerWidgetAction, a6 as registerWidgetAttachment, a8 as sidePanels, ac as unregisterSidePanel, ad as unregisterWidgetAction, ae as unregisterWidgetAttachment, af as widgetActions, ag as widgetAttachments } from './contributions-ciV6Neyd.js';
-import { b as VelaOptions, d as MarketSession, r as DataWindowReadout } from './options-BqGeFHtp.js';
+import { W as WidgetContext, V as Vela, y as SidePanelButton } from './contributions-DatoAzMx.js';
+export { ah as DEFAULT_PANEL_ORDER, z as SidePanelDescriptor, A as SidePanelHandle, U as WidgetActionDescriptor, X as WidgetActionTarget, Y as WidgetAttachment, a4 as registerSidePanel, a5 as registerWidgetAction, a6 as registerWidgetAttachment, a8 as sidePanels, ac as unregisterSidePanel, ad as unregisterWidgetAction, ae as unregisterWidgetAttachment, af as widgetActions, ag as widgetAttachments } from './contributions-DatoAzMx.js';
+import { b as VelaOptions, d as MarketSession, r as DataWindowReadout } from './options-YdiaaVjt.js';
 import { K as KeymapManager } from './keymap-CGOz5F5f.js';
-import { W as WidgetHistory, b as VelaShellOptions, e as WorkspaceState, a as RangePreset, i as PersistedState, P as PanelsState } from './history-CFqZm5re.js';
-export { B as Bottombar, j as BottombarOptions, C as CellState, f as ChartState, I as IndicatorLoader, k as IndicatorManifest, l as IndicatorManifestEntry, m as RANGE_PRESETS, R as ResolvedIndicator, V as VelaStorage, n as WidgetStorage, g as decodeState, h as encodeState, o as legacyWidgetState, p as loadPersisted, q as localStorageAdapter, r as parsePersisted, t as resolveIndicators, s as sanitizeState, u as savePersisted } from './history-CFqZm5re.js';
-import { a as SymbolDescriptor } from './DataProvider-DHX4x6-r.js';
+import { W as WidgetHistory, b as VelaShellOptions, e as WorkspaceState, a as RangePreset, i as PersistedState, P as PanelsState } from './history-CvOtsjT5.js';
+export { B as Bottombar, j as BottombarOptions, C as CellState, f as ChartState, I as IndicatorLoader, k as IndicatorManifest, l as IndicatorManifestEntry, m as RANGE_PRESETS, R as ResolvedIndicator, V as VelaStorage, n as WidgetStorage, g as decodeState, h as encodeState, o as legacyWidgetState, p as loadPersisted, q as localStorageAdapter, r as parsePersisted, t as resolveIndicators, s as sanitizeState, u as savePersisted } from './history-CvOtsjT5.js';
+import { a as SymbolDescriptor } from './DataProvider-BmHkcwvJ.js';
 import { d as SidePanel } from './side-panel-CT9ZwIGz.js';
 export { D as DEFAULT_PANEL_MAX_WIDTH, a as DEFAULT_PANEL_MIN_WIDTH, b as DEFAULT_PANEL_WIDTH, S as SidePanelOptions, c as clampPanelWidth } from './side-panel-CT9ZwIGz.js';
 
@@ -23,6 +23,11 @@ declare class VelaWidget {
     private readonly statusline;
     /** Keeps the statusline'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;
+    /** Whether the ACTIVE symbol declares real trading sessions (RTH/ETH meaningful) —
+     *  gates the bottombar toggle and the settings dialog's Trading session group. */
+    private sessionsAvailable;
     private readonly watermark;
     private readonly bottombar;
     private readonly objectTree;
@@ -160,9 +165,25 @@ declare class VelaWidget {
      * disabled there, but the API tolerates the call — the provider ignores the flag).
      */
     setSession(session: MarketSession): void;
-    /** Re-derive the RTH/ETH toggle's posture from the ACTIVE symbol's metadata: enabled
-     *  iff the resolved symbol declares a real session vocabulary (not `24x7`). */
+    /** Re-derive the session chrome from the ACTIVE symbol's metadata: the RTH/ETH
+     *  toggle shows (and the settings dialog's Trading session group appears) iff the
+     *  resolved symbol declares a real session vocabulary (not `24x7`); the pre/post
+     *  shading re-derives for the new market either way. */
     private refreshSessionToggle;
+    /** (Re)derive the pre/post-market shading bands for the current 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 widget only proxies them into its settings rows. */
+    private sessionShadeColor;
+    private setSessionShadeColor;
+    /**
+     * (Re)contribute the widget's settings-dialog sections: status line parts, the fetch
+     * depth, the watermark toggle, and — only while the active symbol HAS sessions — the
+     * Trading session group (RTH/ETH switch + the pre/post-market shading colors) inside
+     * the Symbol tab. Re-run whenever a gate changes (the dialog reads them on open).
+     */
+    private pushSettingsSections;
     /** Star/unstar a timeframe — the topbar chips and dropdown stars follow, and the
      *  set persists with the rest of the shell state. */
     private setTimeframeFavorite;

package/dist/widget.js

@@ -1,11 +1,11 @@
-import { Glider, WidgetHistory, localStorageAdapter, decodeState, prefixedSymbol, normalizeSession, SymbolPicker, IndicatorPicker, TimeframeQuick, Topbar, PanelDock, ObjectTree, DataWindow, ChartContextMenu, Toast, Watermark, Statusline, MarketStatusTracker, Bottombar, MobileBar, DrawingPill, LayoutModeController, ZOOM_IN, ZOOM_OUT, PAN_FAST, ShortcutsHelp, TimeframeDrawer, RANGE_PRESETS, DrawingsDrawer, MoreDrawer, priceStyleIcon, priceStyleLabel, TimezoneDrawer, PriceScaleDrawer, indicatorLedger, sanitizeState, legacyWidgetState, parsePersisted, statuslineInkOf, toolShortcutHints, resolveIndicators, encodeState } from './chunk-U5KCQHAC.js';
-export { Bottombar, ChartContextMenu, DataWindow, IndicatorPicker, ObjectTree, PanelDock, RANGE_PRESETS, ShortcutsHelp, Statusline, SymbolPicker, TimeframeQuick, Topbar, Watermark, dataWindowSections, decimalsFor, decodeState, encodeState, filterSymbols, fmtChange, fmtPrice, legacyWidgetState, loadPersisted, localStorageAdapter, parsePersisted, parseTimeframe, priceStyleLabel, resolveIndicators, sanitizeState, savePersisted, timeframeLabel, timeframeMs } from './chunk-U5KCQHAC.js';
-import { registerBuiltinChartTypes, resolveTheme, parseSymbol, buildToolbar, priceStyleIds, Vela, normalizeTimezone } from './chunk-7D6YIF34.js';
-export { TIMEZONES, normalizeTimezone, tzButtonLabel, tzMenuLabel, tzOffset } from './chunk-7D6YIF34.js';
-import { widgetActions, widgetAttachments, legendActionsProviderFor, resolveEngines } from './chunk-7Y7CJ7EN.js';
-export { DEFAULT_PANEL_MAX_WIDTH, DEFAULT_PANEL_MIN_WIDTH, DEFAULT_PANEL_ORDER, DEFAULT_PANEL_WIDTH, SidePanel, clampPanelWidth, registerSidePanel, registerWidgetAction, registerWidgetAttachment, sidePanels, unregisterSidePanel, unregisterWidgetAction, unregisterWidgetAttachment, widgetActions, widgetAttachments } from './chunk-7Y7CJ7EN.js';
-import { KeymapManager, isEditableTarget } from './chunk-TP56QRMK.js';
-import { ensureUIHost, Menu, applyPlotOverlayTokens } from './chunk-QHZ7IXFL.js';
+import { SessionShadingTracker, Glider, WidgetHistory, localStorageAdapter, decodeState, prefixedSymbol, normalizeSession, SymbolPicker, IndicatorPicker, TimeframeQuick, Topbar, PanelDock, ObjectTree, DataWindow, ChartContextMenu, Toast, Watermark, Statusline, MarketStatusTracker, Bottombar, MobileBar, DrawingPill, LayoutModeController, ZOOM_IN, ZOOM_OUT, PAN_FAST, ShortcutsHelp, TimeframeDrawer, RANGE_PRESETS, DrawingsDrawer, MoreDrawer, priceStyleIcon, priceStyleLabel, TimezoneDrawer, PriceScaleDrawer, timeframeMs, indicatorLedger, sanitizeState, legacyWidgetState, parsePersisted, statuslineInkOf, toolShortcutHints, resolveIndicators, encodeState } from './chunk-3QX6QOCX.js';
+export { Bottombar, ChartContextMenu, DataWindow, IndicatorPicker, ObjectTree, PanelDock, RANGE_PRESETS, ShortcutsHelp, Statusline, SymbolPicker, TimeframeQuick, Topbar, Watermark, dataWindowSections, decimalsFor, decodeState, encodeState, filterSymbols, fmtChange, fmtPrice, legacyWidgetState, loadPersisted, localStorageAdapter, parsePersisted, parseTimeframe, priceStyleLabel, resolveIndicators, sanitizeState, savePersisted, timeframeLabel, timeframeMs } from './chunk-3QX6QOCX.js';
+import { registerBuiltinChartTypes, resolveTheme, parseSymbol, buildToolbar, priceStyleIds, Vela, normalizeTimezone } from './chunk-6FA4TDUF.js';
+export { TIMEZONES, normalizeTimezone, tzButtonLabel, tzMenuLabel, tzOffset } from './chunk-6FA4TDUF.js';
+import { widgetActions, widgetAttachments, legendActionsProviderFor, resolveEngines } from './chunk-BEJ57HP4.js';
+export { DEFAULT_PANEL_MAX_WIDTH, DEFAULT_PANEL_MIN_WIDTH, DEFAULT_PANEL_ORDER, DEFAULT_PANEL_WIDTH, SidePanel, clampPanelWidth, registerSidePanel, registerWidgetAction, registerWidgetAttachment, sidePanels, unregisterSidePanel, unregisterWidgetAction, unregisterWidgetAttachment, widgetActions, widgetAttachments } from './chunk-BEJ57HP4.js';
+import { KeymapManager, isEditableTarget } from './chunk-2R7BANEM.js';
+import { ensureUIHost, Menu, applyPlotOverlayTokens } from './chunk-OICPLNU7.js';
 import { injectStyles } from './chunk-PN5KWFZ4.js';
 
 // src/widget/url-state.ts
@@ -54,6 +54,11 @@ var WIDGET_CSS = `
 `;
 var VelaWidget = class {
   constructor(container, opts) {
+    /** 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));
+    /** Whether the ACTIVE symbol declares real trading sessions (RTH/ETH meaningful) —
+     *  gates the bottombar toggle and the settings dialog's Trading session group. */
+    this.sessionsAvailable = false;
     this.shortcutsHelp = null;
     this.inner = null;
     /** The manifest library (loaded once). */
@@ -517,17 +522,140 @@ var VelaWidget = class {
     this.markStateDirty();
     void this.inner?.setMarket({ session });
   }
-  /** Re-derive the RTH/ETH toggle's posture from the ACTIVE symbol's metadata: enabled
-   *  iff the resolved symbol declares a real session vocabulary (not `24x7`). */
+  /** Re-derive the session chrome from the ACTIVE symbol's metadata: the RTH/ETH
+   *  toggle shows (and the settings dialog's Trading session group appears) iff the
+   *  resolved symbol declares a real session vocabulary (not `24x7`); the pre/post
+   *  shading re-derives for the new market either way. */
   refreshSessionToggle() {
     const chart = this.inner;
-    if (!chart || !this.bottombar) return;
+    if (!chart) return;
     void chart.data.symbolInfo(this.symbol).then((si) => {
       if (this.destroyed || this.inner !== chart) return;
       const enabled = typeof si?.session === "string" && si.session !== "" && si.session !== "24x7";
       this.bottombar?.setSession({ session: this.session ?? "regular", enabled });
+      if (enabled !== this.sessionsAvailable) {
+        this.sessionsAvailable = enabled;
+        this.pushSettingsSections();
+      }
+      this.refreshSessionShading();
     });
   }
+  /** (Re)derive the pre/post-market shading bands for the current market. The loaded
+   *  depth (bars × timeframe) bounds the calendar fetch; the tracker clamps it. */
+  refreshSessionShading() {
+    const chart = this.inner;
+    if (!chart) return;
+    const lookbackMs = Math.max(this.bars, this.rangeBars) * timeframeMs(this.timeframe);
+    this.sessionShading.track(chart.data, this.symbol, { session: this.session ?? "regular", lookbackMs });
+  }
+  /** The session-shade colors live in the renderer CONFIG (persisted with it, edited
+   *  live by the dialog swatch) — the widget 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.markStateDirty();
+  }
+  /**
+   * (Re)contribute the widget's settings-dialog sections: status line parts, the fetch
+   * depth, the watermark toggle, and — only while the active symbol HAS sessions — the
+   * Trading session group (RTH/ETH switch + the pre/post-market shading colors) inside
+   * the Symbol tab. Re-run whenever a gate changes (the dialog reads them 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 ?? "regular") === "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.bars),
+          set: (v) => {
+            this.bars = Number(v);
+            this.markStateDirty();
+            void this.inner?.setMarket({ bars: Math.max(this.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.sessionsAvailable) sections.push(sessionSection);
+    sections.push(watermarkSection);
+    chart.renderer.setSettingsSections(sections);
+  }
   /** Star/unstar a timeframe — the topbar chips and dropdown stars follow, and the
    *  set persists with the rest of the shell state. */
   setTimeframeFavorite(tf, on) {
@@ -833,6 +961,7 @@ var VelaWidget = class {
     this.indicatorPicker?.destroy();
     this.tfQuick.destroy();
     this.marketStatus?.stop();
+    this.sessionShading.stop();
     this.statusline?.destroy();
     this.watermark?.destroy();
     this.bottombar?.destroy();
@@ -971,7 +1100,10 @@ var VelaWidget = class {
         this.refreshSessionToggle();
         this.marketStatus?.track(chart.data, symbol);
       }
-      if (timeframe !== this.timeframe) this.syncTimeframeChrome(timeframe);
+      if (timeframe !== this.timeframe) {
+        this.syncTimeframeChrome(timeframe);
+        this.refreshSessionShading();
+      }
     });
     this.history.onChart(chart);
     chart.on("alert", (alert) => {
@@ -1020,67 +1152,7 @@ var VelaWidget = class {
     this.statusline?.onChart(chart);
     this.drawingPill.onChart(chart);
     this.syncStatuslineColors();
-    const advanced = {
-      title: "Advanced",
-      placement: "end",
-      rows: [
-        {
-          kind: "select",
-          label: "Bars to fetch",
-          options: ["500", "1000", "2000", "5000", "10000", "20000"],
-          get: () => String(this.bars),
-          set: (v) => {
-            this.bars = Number(v);
-            this.markStateDirty();
-            void this.inner?.setMarket({ bars: Math.max(this.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;
-      chart.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 {
-      chart.renderer.setSettingsSections([advanced, watermarkSection]);
-    }
+    this.pushSettingsSections();
     void chart.ready().then(() => {
       if (this.buildSeq !== seq || this.destroyed) return;
       if (this.pendingRange) {