acttrader-charts 1.0.12 → 1.0.13

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { C as ChartConfig, O as OHLCVBar, I as IIndicator, a as ChartEventMap, S as SeriesType, b as ChartState, D as DrawingToolType, c as IDrawing, d as IWebSocketAdapter, T as TradeLevelType, A as AnyLevel, e as DrawingPoint, f as ScaleManager, V as Viewport, P as PriceRange$1, g as DrawingHandle, h as SerializedDrawing, i as Tick, j as StreamStatus } from './MACD-DoO45b_C.cjs';
-export { k as ActiveIndicatorState, B as BollingerBands, l as BottomBarColors, m as BottomBarLabels, n as BottomBarUiConfig, o as CanvasColorSettings, p as ChartLabels, q as ChartMiscLabels, r as ChartTheme, s as ChartThemeUi, t as CrosshairPosition, u as CrosshairUiConfig, v as DARK_THEME, w as DEFAULT_BOTTOM_BAR_CONFIG, x as DEFAULT_CROSSHAIR_CONFIG, y as DEFAULT_DRAWING_TOOLBAR_CONFIG, z as DEFAULT_INDICATOR_OVERLAY_CONFIG, E as DEFAULT_LABELS, F as DEFAULT_PRICE_AXIS_CONFIG, G as DEFAULT_TIME_AXIS_CONFIG, H as DEFAULT_TOP_BAR_CONFIG, J as DEFAULT_UI_CONFIG, K as DataLoaderParams, L as DeepPartial, M as DeepPartialChartTheme, N as DialogLabels, Q as DrawingToolbarColors, R as DrawingToolbarLabels, U as DrawingToolbarUiConfig, W as Duration, X as EMA, Y as IndicatorOverlayColors, Z as IndicatorOverlayUiConfig, _ as IndicatorParams, $ as IndicatorResult, a0 as IndicatorStateEntry, a1 as LIGHT_THEME, a2 as MACD, a3 as OhlcLabels, a4 as OrderSubmit, a5 as Padding, a6 as PendingOrderLevel, a7 as PositionLevel, a8 as PositionRenderStyle, a9 as PriceAxisUiConfig, aa as RSI, ab as SMA, ac as Theme, ad as TimeAxisUiConfig, ae as Timeframe, af as TopBarColors, ag as TopBarLabels, ah as TopBarUiConfig, ai as TradeDisplayFilter, aj as TradeLabels, ak as TradeLevel, al as TradeLevelColors, am as TradePanelColors, an as UiConfig, ao as deepMergeTheme, ap as resolveCssVarsInTheme, aq as resolveLabels, ar as resolveUiConfig } from './MACD-DoO45b_C.cjs';
+import { C as ChartConfig, O as OHLCVBar, I as IIndicator, a as ChartEventMap, T as Timeframe, S as SeriesType, b as ChartState, D as DrawingToolType, c as IDrawing, d as IWebSocketAdapter, e as TradeLevelType, A as AnyLevel, f as DrawingPoint, g as ScaleManager, V as Viewport, P as PriceRange$1, h as DrawingHandle, i as SerializedDrawing, j as Tick, k as StreamStatus } from './MACD-CEmdbwGz.cjs';
+export { l as ActiveIndicatorState, B as BollingerBands, m as BottomBarColors, n as BottomBarLabels, o as BottomBarUiConfig, p as CanvasColorSettings, q as ChartLabels, r as ChartMiscLabels, s as ChartTheme, t as ChartThemeUi, u as CrosshairPosition, v as CrosshairUiConfig, w as DARK_THEME, x as DEFAULT_BOTTOM_BAR_CONFIG, y as DEFAULT_CROSSHAIR_CONFIG, z as DEFAULT_DRAWING_TOOLBAR_CONFIG, E as DEFAULT_INDICATOR_OVERLAY_CONFIG, F as DEFAULT_LABELS, G as DEFAULT_PRICE_AXIS_CONFIG, H as DEFAULT_TIME_AXIS_CONFIG, J as DEFAULT_TOP_BAR_CONFIG, K as DEFAULT_TRADE_BUTTON_CONFIG, L as DEFAULT_UI_CONFIG, M as DataLoaderParams, N as DeepPartial, Q as DeepPartialChartTheme, R as DialogLabels, U as DrawingToolbarColors, W as DrawingToolbarLabels, X as DrawingToolbarUiConfig, Y as Duration, Z as EMA, _ as IndicatorOverlayColors, $ as IndicatorOverlayUiConfig, a0 as IndicatorParams, a1 as IndicatorResult, a2 as IndicatorStateEntry, a3 as LIGHT_THEME, a4 as MACD, a5 as OhlcLabels, a6 as OrderSubmit, a7 as Padding, a8 as PendingOrderLevel, a9 as PositionLevel, aa as PositionRenderStyle, ab as PriceAxisUiConfig, ac as RSI, ad as SMA, ae as Theme, af as TimeAxisUiConfig, ag as TopBarColors, ah as TopBarLabels, ai as TopBarUiConfig, aj as TradeButtonUiConfig, ak as TradeDisplayFilter, al as TradeLabels, am as TradeLevel, an as TradeLevelColors, ao as TradePanelColors, ap as UiConfig, aq as deepMergeTheme, ar as resolveCssVarsInTheme, as as resolveLabels, at as resolveUiConfig } from './MACD-CEmdbwGz.cjs';
 
 declare class ChartEngine {
     private wrapper;
@@ -178,6 +178,10 @@ declare class ChartEngine {
     on<K extends keyof ChartEventMap>(event: K, listener: (payload: ChartEventMap[K]) => void): () => void;
     private buildTheme;
     setTheme(theme: 'dark' | 'light'): this;
+    /** Programmatically change the active timeframe and reload data. */
+    setTimeframe(tf: Timeframe): this;
+    /** Update per-theme deep-partial color overrides and rebuild the active theme. */
+    setThemeOverrides(overrides: ChartConfig['themeOverrides']): this;
     setSeries(series: SeriesType): this;
     private clearDuration;
     setVolume(show: boolean): this;
@@ -319,8 +323,10 @@ declare class ChartEngine {
      */
     updateLevelMainPrice(label: string, price: number): this;
     /**
-     * Set or clear the estimated PNL text shown on a draft order's SL or TP bracket line.
-     * Pass `null` to clear the text. No-op if no draft order is active.
+     * Set or clear the estimated PNL text shown on the SL or TP bracket line.
+     * Applies to the currently active bracket host — a draft order while drafting,
+     * or the selected/hovered level while editing an existing pending order or position.
+     * Pass `null` to clear the text.
      * Use this to display the consumer-calculated estimated profit/loss next to the bracket.
      */
     setDraftBracketPnl(type: 'sl' | 'tp', pnlText: string | null): this;
@@ -1434,4 +1440,4 @@ declare class WebSocketAdapter implements IWebSocketAdapter {
     private emitStatus;
 }
 
-export { AbcdPattern, AnchoredNote, AnchoredVP, type AnyDragArea, AnyLevel, Arc, ArrowDown, ArrowMarker, ArrowUp, BatPattern, Brush, ButterflyPattern, Callout, ChartConfig, ChartEngine, ChartEventMap, ChartState, Circle, CrabPattern, CrossLine, CyclicLines, CypherPattern, DatePriceRange, DateRange, DisjointChannel, DrawingHandle, DrawingManager, DrawingPoint, DrawingToolType, ElliottCombination, ElliottCorrective, ElliottImpulse, ElliottTriangle, ElliottWxy, Ellipse, FibChannel, FibCircles, FibExtension, FibFan, FibProjection, FibRetracement, FibSpiral, FibTimezone, FixedRangeVP, Flag, FlatChannel, GannBox, GannFan, GannSquare, GartleyPattern, GhostFeed, HeadShoulders, Highlighter, HorizontalLine, IDrawing, IIndicator, IWebSocketAdapter, InsidePitchfork, ModifiedSchiff, OHLCVBar, ParallelChannel, Path, Pitchfork, Polyline, PriceLabel, PriceNote, PriceProjection, PriceRange, PriceRange$1 as PriceRangeType, Projection, Rectangle, RegressionTrend, RotatedRectangle, Ruler, SchiffPitchfork, SerializedDrawing, SeriesType, SharkPattern, SineLine, StreamStatus, Text, ThreeDrives, Tick, TimeCycles, type TradeLevelBracketDragArea, type TradeLevelDragArea, TradeLevelType, TrendAngle, TrendLine, Triangle, TrianglePattern, VerticalLine, Viewport, VolumeProfile, WebSocketAdapter, aggregateCandles };
+export { AbcdPattern, AnchoredNote, AnchoredVP, type AnyDragArea, AnyLevel, Arc, ArrowDown, ArrowMarker, ArrowUp, BatPattern, Brush, ButterflyPattern, Callout, ChartConfig, ChartEngine, ChartEventMap, ChartState, Circle, CrabPattern, CrossLine, CyclicLines, CypherPattern, DatePriceRange, DateRange, DisjointChannel, DrawingHandle, DrawingManager, DrawingPoint, DrawingToolType, ElliottCombination, ElliottCorrective, ElliottImpulse, ElliottTriangle, ElliottWxy, Ellipse, FibChannel, FibCircles, FibExtension, FibFan, FibProjection, FibRetracement, FibSpiral, FibTimezone, FixedRangeVP, Flag, FlatChannel, GannBox, GannFan, GannSquare, GartleyPattern, GhostFeed, HeadShoulders, Highlighter, HorizontalLine, IDrawing, IIndicator, IWebSocketAdapter, InsidePitchfork, ModifiedSchiff, OHLCVBar, ParallelChannel, Path, Pitchfork, Polyline, PriceLabel, PriceNote, PriceProjection, PriceRange, PriceRange$1 as PriceRangeType, Projection, Rectangle, RegressionTrend, RotatedRectangle, Ruler, SchiffPitchfork, SerializedDrawing, SeriesType, SharkPattern, SineLine, StreamStatus, Text, ThreeDrives, Tick, TimeCycles, Timeframe, type TradeLevelBracketDragArea, type TradeLevelDragArea, TradeLevelType, TrendAngle, TrendLine, Triangle, TrianglePattern, VerticalLine, Viewport, VolumeProfile, WebSocketAdapter, aggregateCandles };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as ChartConfig, O as OHLCVBar, I as IIndicator, a as ChartEventMap, S as SeriesType, b as ChartState, D as DrawingToolType, c as IDrawing, d as IWebSocketAdapter, T as TradeLevelType, A as AnyLevel, e as DrawingPoint, f as ScaleManager, V as Viewport, P as PriceRange$1, g as DrawingHandle, h as SerializedDrawing, i as Tick, j as StreamStatus } from './MACD-DoO45b_C.js';
-export { k as ActiveIndicatorState, B as BollingerBands, l as BottomBarColors, m as BottomBarLabels, n as BottomBarUiConfig, o as CanvasColorSettings, p as ChartLabels, q as ChartMiscLabels, r as ChartTheme, s as ChartThemeUi, t as CrosshairPosition, u as CrosshairUiConfig, v as DARK_THEME, w as DEFAULT_BOTTOM_BAR_CONFIG, x as DEFAULT_CROSSHAIR_CONFIG, y as DEFAULT_DRAWING_TOOLBAR_CONFIG, z as DEFAULT_INDICATOR_OVERLAY_CONFIG, E as DEFAULT_LABELS, F as DEFAULT_PRICE_AXIS_CONFIG, G as DEFAULT_TIME_AXIS_CONFIG, H as DEFAULT_TOP_BAR_CONFIG, J as DEFAULT_UI_CONFIG, K as DataLoaderParams, L as DeepPartial, M as DeepPartialChartTheme, N as DialogLabels, Q as DrawingToolbarColors, R as DrawingToolbarLabels, U as DrawingToolbarUiConfig, W as Duration, X as EMA, Y as IndicatorOverlayColors, Z as IndicatorOverlayUiConfig, _ as IndicatorParams, $ as IndicatorResult, a0 as IndicatorStateEntry, a1 as LIGHT_THEME, a2 as MACD, a3 as OhlcLabels, a4 as OrderSubmit, a5 as Padding, a6 as PendingOrderLevel, a7 as PositionLevel, a8 as PositionRenderStyle, a9 as PriceAxisUiConfig, aa as RSI, ab as SMA, ac as Theme, ad as TimeAxisUiConfig, ae as Timeframe, af as TopBarColors, ag as TopBarLabels, ah as TopBarUiConfig, ai as TradeDisplayFilter, aj as TradeLabels, ak as TradeLevel, al as TradeLevelColors, am as TradePanelColors, an as UiConfig, ao as deepMergeTheme, ap as resolveCssVarsInTheme, aq as resolveLabels, ar as resolveUiConfig } from './MACD-DoO45b_C.js';
+import { C as ChartConfig, O as OHLCVBar, I as IIndicator, a as ChartEventMap, T as Timeframe, S as SeriesType, b as ChartState, D as DrawingToolType, c as IDrawing, d as IWebSocketAdapter, e as TradeLevelType, A as AnyLevel, f as DrawingPoint, g as ScaleManager, V as Viewport, P as PriceRange$1, h as DrawingHandle, i as SerializedDrawing, j as Tick, k as StreamStatus } from './MACD-CEmdbwGz.js';
+export { l as ActiveIndicatorState, B as BollingerBands, m as BottomBarColors, n as BottomBarLabels, o as BottomBarUiConfig, p as CanvasColorSettings, q as ChartLabels, r as ChartMiscLabels, s as ChartTheme, t as ChartThemeUi, u as CrosshairPosition, v as CrosshairUiConfig, w as DARK_THEME, x as DEFAULT_BOTTOM_BAR_CONFIG, y as DEFAULT_CROSSHAIR_CONFIG, z as DEFAULT_DRAWING_TOOLBAR_CONFIG, E as DEFAULT_INDICATOR_OVERLAY_CONFIG, F as DEFAULT_LABELS, G as DEFAULT_PRICE_AXIS_CONFIG, H as DEFAULT_TIME_AXIS_CONFIG, J as DEFAULT_TOP_BAR_CONFIG, K as DEFAULT_TRADE_BUTTON_CONFIG, L as DEFAULT_UI_CONFIG, M as DataLoaderParams, N as DeepPartial, Q as DeepPartialChartTheme, R as DialogLabels, U as DrawingToolbarColors, W as DrawingToolbarLabels, X as DrawingToolbarUiConfig, Y as Duration, Z as EMA, _ as IndicatorOverlayColors, $ as IndicatorOverlayUiConfig, a0 as IndicatorParams, a1 as IndicatorResult, a2 as IndicatorStateEntry, a3 as LIGHT_THEME, a4 as MACD, a5 as OhlcLabels, a6 as OrderSubmit, a7 as Padding, a8 as PendingOrderLevel, a9 as PositionLevel, aa as PositionRenderStyle, ab as PriceAxisUiConfig, ac as RSI, ad as SMA, ae as Theme, af as TimeAxisUiConfig, ag as TopBarColors, ah as TopBarLabels, ai as TopBarUiConfig, aj as TradeButtonUiConfig, ak as TradeDisplayFilter, al as TradeLabels, am as TradeLevel, an as TradeLevelColors, ao as TradePanelColors, ap as UiConfig, aq as deepMergeTheme, ar as resolveCssVarsInTheme, as as resolveLabels, at as resolveUiConfig } from './MACD-CEmdbwGz.js';
 
 declare class ChartEngine {
     private wrapper;
@@ -178,6 +178,10 @@ declare class ChartEngine {
     on<K extends keyof ChartEventMap>(event: K, listener: (payload: ChartEventMap[K]) => void): () => void;
     private buildTheme;
     setTheme(theme: 'dark' | 'light'): this;
+    /** Programmatically change the active timeframe and reload data. */
+    setTimeframe(tf: Timeframe): this;
+    /** Update per-theme deep-partial color overrides and rebuild the active theme. */
+    setThemeOverrides(overrides: ChartConfig['themeOverrides']): this;
     setSeries(series: SeriesType): this;
     private clearDuration;
     setVolume(show: boolean): this;
@@ -319,8 +323,10 @@ declare class ChartEngine {
      */
     updateLevelMainPrice(label: string, price: number): this;
     /**
-     * Set or clear the estimated PNL text shown on a draft order's SL or TP bracket line.
-     * Pass `null` to clear the text. No-op if no draft order is active.
+     * Set or clear the estimated PNL text shown on the SL or TP bracket line.
+     * Applies to the currently active bracket host — a draft order while drafting,
+     * or the selected/hovered level while editing an existing pending order or position.
+     * Pass `null` to clear the text.
      * Use this to display the consumer-calculated estimated profit/loss next to the bracket.
      */
     setDraftBracketPnl(type: 'sl' | 'tp', pnlText: string | null): this;
@@ -1434,4 +1440,4 @@ declare class WebSocketAdapter implements IWebSocketAdapter {
     private emitStatus;
 }
 
-export { AbcdPattern, AnchoredNote, AnchoredVP, type AnyDragArea, AnyLevel, Arc, ArrowDown, ArrowMarker, ArrowUp, BatPattern, Brush, ButterflyPattern, Callout, ChartConfig, ChartEngine, ChartEventMap, ChartState, Circle, CrabPattern, CrossLine, CyclicLines, CypherPattern, DatePriceRange, DateRange, DisjointChannel, DrawingHandle, DrawingManager, DrawingPoint, DrawingToolType, ElliottCombination, ElliottCorrective, ElliottImpulse, ElliottTriangle, ElliottWxy, Ellipse, FibChannel, FibCircles, FibExtension, FibFan, FibProjection, FibRetracement, FibSpiral, FibTimezone, FixedRangeVP, Flag, FlatChannel, GannBox, GannFan, GannSquare, GartleyPattern, GhostFeed, HeadShoulders, Highlighter, HorizontalLine, IDrawing, IIndicator, IWebSocketAdapter, InsidePitchfork, ModifiedSchiff, OHLCVBar, ParallelChannel, Path, Pitchfork, Polyline, PriceLabel, PriceNote, PriceProjection, PriceRange, PriceRange$1 as PriceRangeType, Projection, Rectangle, RegressionTrend, RotatedRectangle, Ruler, SchiffPitchfork, SerializedDrawing, SeriesType, SharkPattern, SineLine, StreamStatus, Text, ThreeDrives, Tick, TimeCycles, type TradeLevelBracketDragArea, type TradeLevelDragArea, TradeLevelType, TrendAngle, TrendLine, Triangle, TrianglePattern, VerticalLine, Viewport, VolumeProfile, WebSocketAdapter, aggregateCandles };
+export { AbcdPattern, AnchoredNote, AnchoredVP, type AnyDragArea, AnyLevel, Arc, ArrowDown, ArrowMarker, ArrowUp, BatPattern, Brush, ButterflyPattern, Callout, ChartConfig, ChartEngine, ChartEventMap, ChartState, Circle, CrabPattern, CrossLine, CyclicLines, CypherPattern, DatePriceRange, DateRange, DisjointChannel, DrawingHandle, DrawingManager, DrawingPoint, DrawingToolType, ElliottCombination, ElliottCorrective, ElliottImpulse, ElliottTriangle, ElliottWxy, Ellipse, FibChannel, FibCircles, FibExtension, FibFan, FibProjection, FibRetracement, FibSpiral, FibTimezone, FixedRangeVP, Flag, FlatChannel, GannBox, GannFan, GannSquare, GartleyPattern, GhostFeed, HeadShoulders, Highlighter, HorizontalLine, IDrawing, IIndicator, IWebSocketAdapter, InsidePitchfork, ModifiedSchiff, OHLCVBar, ParallelChannel, Path, Pitchfork, Polyline, PriceLabel, PriceNote, PriceProjection, PriceRange, PriceRange$1 as PriceRangeType, Projection, Rectangle, RegressionTrend, RotatedRectangle, Ruler, SchiffPitchfork, SerializedDrawing, SeriesType, SharkPattern, SineLine, StreamStatus, Text, ThreeDrives, Tick, TimeCycles, Timeframe, type TradeLevelBracketDragArea, type TradeLevelDragArea, TradeLevelType, TrendAngle, TrendLine, Triangle, TrianglePattern, VerticalLine, Viewport, VolumeProfile, WebSocketAdapter, aggregateCandles };

package/dist/index.js

@@ -429,6 +429,9 @@ var DEFAULT_TOP_BAR_CONFIG = {
   dropBtnFontFamily: INTER_FONT,
   drawBtnSize: "26px",
   drawBtnIconFontSize: "14px",
+  iconBtnSize: "26px",
+  mobileIconBtnSize: "28px",
+  mobileDrawBtnIconSize: "16px",
   flyoutRowFontSize: "12px",
   flyoutRowFontFamily: INTER_FONT,
   flyoutCategoryFontSize: "10px",
@@ -466,6 +469,12 @@ var DEFAULT_INDICATOR_OVERLAY_CONFIG = {
   dropdownRowFontFamily: INTER_FONT,
   dropdownIconFontSize: "10px"
 };
+var DEFAULT_TRADE_BUTTON_CONFIG = {
+  size: 22,
+  mobileSize: 24,
+  iconSize: 14,
+  mobileIconSize: 16
+};
 var DEFAULT_UI_CONFIG = {
   drawingToolbar: DEFAULT_DRAWING_TOOLBAR_CONFIG,
   topBar: DEFAULT_TOP_BAR_CONFIG,
@@ -473,7 +482,8 @@ var DEFAULT_UI_CONFIG = {
   priceAxis: DEFAULT_PRICE_AXIS_CONFIG,
   timeAxis: DEFAULT_TIME_AXIS_CONFIG,
   crosshair: DEFAULT_CROSSHAIR_CONFIG,
-  indicatorOverlay: DEFAULT_INDICATOR_OVERLAY_CONFIG
+  indicatorOverlay: DEFAULT_INDICATOR_OVERLAY_CONFIG,
+  tradeButton: DEFAULT_TRADE_BUTTON_CONFIG
 };
 function resolveUiConfig(override) {
   if (!override) return DEFAULT_UI_CONFIG;
@@ -484,7 +494,8 @@ function resolveUiConfig(override) {
     priceAxis: { ...DEFAULT_PRICE_AXIS_CONFIG, ...override.priceAxis },
     timeAxis: { ...DEFAULT_TIME_AXIS_CONFIG, ...override.timeAxis },
     crosshair: { ...DEFAULT_CROSSHAIR_CONFIG, ...override.crosshair },
-    indicatorOverlay: { ...DEFAULT_INDICATOR_OVERLAY_CONFIG, ...override.indicatorOverlay }
+    indicatorOverlay: { ...DEFAULT_INDICATOR_OVERLAY_CONFIG, ...override.indicatorOverlay },
+    tradeButton: { ...DEFAULT_TRADE_BUTTON_CONFIG, ...override.tradeButton }
   };
 }
 
@@ -3238,6 +3249,9 @@ var TopBar = class {
     this.fullscreenBtn.innerHTML = active ? ICON_FULLSCREEN_EXIT : ICON_FULLSCREEN_ENTER;
     this.fullscreenBtn.title = active ? this.labels.exitFullscreenTitle : this.labels.toggleFullscreenTitle;
     this.applyIconBtnStyles(this.fullscreenBtn, this.theme, active);
+    if (this.isMobileLayout) {
+      this.resizeSvg(this.fullscreenBtn, this.getSvgSize(this.fullscreenBtn) + 2);
+    }
   }
   setDrawingsBtnActive(active) {
     if (!this.drawingBtn) return;
@@ -3290,6 +3304,21 @@ var TopBar = class {
     }
     this.durationSep.style.display = btnDisplay;
     this.durationDropBtn.style.display = isMobile ? "" : "none";
+    const containerSize = isMobile ? this.cfg.mobileIconBtnSize : this.cfg.iconBtnSize;
+    for (const btn of [this.fullscreenBtn, this.settingsBtn, this.drawingBtn]) {
+      if (!btn) continue;
+      btn.style.width = containerSize;
+      btn.style.height = containerSize;
+    }
+    const delta = isMobile ? 2 : -2;
+    this.resizeSvg(this.fullscreenBtn, this.getSvgSize(this.fullscreenBtn) + delta);
+    if (this.settingsBtn) {
+      this.resizeSvg(this.settingsBtn, this.getSvgSize(this.settingsBtn) + delta);
+    }
+    if (this.drawingBtn) {
+      const drawIconSize = isMobile ? parseInt(this.cfg.mobileDrawBtnIconSize, 10) : parseInt(this.cfg.drawBtnIconFontSize, 10);
+      this.resizeSvg(this.drawingBtn, drawIconSize);
+    }
   }
   setIndicatorOptions(options) {
     this.indicatorOptions = options;
@@ -3696,13 +3725,14 @@ var TopBar = class {
   }
   applyIconBtnStyles(btn, theme, active) {
     btn.dataset.active = String(active);
+    const size = this.isMobileLayout ? this.cfg.mobileIconBtnSize : this.cfg.iconBtnSize;
     Object.assign(btn.style, {
       background: active ? theme.ui.accentBg : "transparent",
       color: active ? theme.ui.accentText : theme.topBar.btnColor,
       border: `1px solid ${active ? theme.ui.accent : theme.axisBorder}`,
       borderRadius: "5px",
-      width: "26px",
-      height: "26px",
+      width: size,
+      height: size,
       cursor: "pointer",
       outline: "none",
       display: "flex",
@@ -3713,6 +3743,20 @@ var TopBar = class {
       transition: "border-color 0.12s, background 0.12s"
     });
   }
+  resizeSvg(btn, size) {
+    if (!btn) return;
+    const svg = btn.querySelector("svg");
+    if (svg) {
+      svg.setAttribute("width", String(size));
+      svg.setAttribute("height", String(size));
+    }
+  }
+  getSvgSize(btn) {
+    if (!btn) return 0;
+    const svg = btn.querySelector("svg");
+    if (!svg) return 0;
+    return parseInt(svg.getAttribute("width") ?? "0", 10);
+  }
 };
 
 // src/ui/BottomBar.ts
@@ -12229,9 +12273,11 @@ var ChartSettingsDialog = class {
 
 // src/ui/TradeButton.ts
 var TradeButton = class {
-  constructor(theme, priceAxisWidth, onClick, labels = DEFAULT_LABELS.trade) {
+  constructor(theme, priceAxisWidth, onClick, labels = DEFAULT_LABELS.trade, cfg = DEFAULT_TRADE_BUTTON_CONFIG) {
     this._visible = false;
+    this._isMobile = false;
     this.theme = theme;
+    this.cfg = cfg;
     this.el = document.createElement("button");
     this.el.innerHTML = ICON_PLUS_CIRCLE;
     this.el.title = labels.placeOrderTitle;
@@ -12239,8 +12285,8 @@ var TradeButton = class {
       position: "absolute",
       right: `${priceAxisWidth + 26}px`,
       top: "0",
-      width: "22px",
-      height: "22px",
+      width: `${cfg.size}px`,
+      height: `${cfg.size}px`,
       borderRadius: "50%",
       border: `1px solid ${theme.axisBorder}`,
       background: theme.tooltip.background,
@@ -12259,6 +12305,7 @@ var TradeButton = class {
       pointerEvents: "auto",
       userSelect: "none"
     });
+    this.applyIconSize(cfg.iconSize);
     this.el.addEventListener("click", (e) => {
       e.stopPropagation();
       onClick();
@@ -12306,6 +12353,27 @@ var TradeButton = class {
       right: `${priceAxisWidth + 26}px`
     });
   }
+  /**
+   * Toggle mobile sizing. When `isMobile` is true, the button diameter and
+   * inner SVG icon are swapped for the configured mobile values; when false,
+   * they revert to desktop values.
+   */
+  setMobileMode(isMobile) {
+    if (this._isMobile === isMobile) return;
+    this._isMobile = isMobile;
+    const size = isMobile ? this.cfg.mobileSize : this.cfg.size;
+    const iconSize = isMobile ? this.cfg.mobileIconSize : this.cfg.iconSize;
+    this.el.style.width = `${size}px`;
+    this.el.style.height = `${size}px`;
+    this.applyIconSize(iconSize);
+  }
+  applyIconSize(size) {
+    const svg = this.el.querySelector("svg");
+    if (svg) {
+      svg.setAttribute("width", String(size));
+      svg.setAttribute("height", String(size));
+    }
+  }
 };
 
 // src/ui/TradePopover.ts
@@ -13978,7 +14046,7 @@ var _ChartEngine = class _ChartEngine {
         Math.min(Math.ceil(this.viewport.endIndex), Math.round(rawBarIndex))
       );
       const bar = this.dataStore.all[clamped] ?? null;
-      this.crosshair = isInChartArea && !this.tradePopover?.isVisible ? { x, y, barIndex: clamped, price, bar } : null;
+      this.crosshair = isInChartArea && !this.tradePopover?.isVisible && this.selectedTradeLabel === null ? { x, y, barIndex: clamped, price, bar } : null;
       if (this.crosshair) this.emitter.emit("crosshair", this.crosshair);
       const hoveringDotLevel = this.positionRenderStyle === "dot" && this.hoveredTradeLabel !== null;
       if (this.tradeButton) {
@@ -14497,7 +14565,7 @@ var _ChartEngine = class _ChartEngine {
             Math.min(Math.ceil(this.viewport.endIndex), Math.round(rawBarIndex))
           );
           const bar = this.dataStore.all[clamped] ?? null;
-          this.crosshair = { x, y, barIndex: clamped, price, bar };
+          this.crosshair = this.selectedTradeLabel === null ? { x, y, barIndex: clamped, price, bar } : null;
           if (this.tradeButton) {
             this.tradeButton.setY(y);
             if (this._isTradingActive) {
@@ -15107,30 +15175,32 @@ var _ChartEngine = class _ChartEngine {
       padding: "0 2px"
     });
     this.canvasWrap.appendChild(this.textInputEl);
-    this.loadingOverlayEl = document.createElement("div");
-    Object.assign(this.loadingOverlayEl.style, {
-      display: "none",
-      position: "absolute",
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-      pointerEvents: "none",
-      zIndex: "20"
-    });
-    const loadingLabel = document.createElement("span");
-    loadingLabel.textContent = this.labels.chart.loading;
-    Object.assign(loadingLabel.style, {
-      color: "rgba(200,200,200,0.9)",
-      fontSize: "13px",
-      background: "rgba(0,0,0,0.45)",
-      padding: "4px 12px",
-      borderRadius: "4px"
-    });
-    this.loadingOverlayEl.appendChild(loadingLabel);
-    this.canvasWrap.appendChild(this.loadingOverlayEl);
+    if (showUI) {
+      this.loadingOverlayEl = document.createElement("div");
+      Object.assign(this.loadingOverlayEl.style, {
+        display: "none",
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "none",
+        zIndex: "20"
+      });
+      const loadingLabel = document.createElement("span");
+      loadingLabel.textContent = this.labels.chart.loading;
+      Object.assign(loadingLabel.style, {
+        color: "rgba(200,200,200,0.9)",
+        fontSize: "13px",
+        background: "rgba(0,0,0,0.45)",
+        padding: "4px 12px",
+        borderRadius: "4px"
+      });
+      this.loadingOverlayEl.appendChild(loadingLabel);
+      this.canvasWrap.appendChild(this.loadingOverlayEl);
+    }
     if (showUI) {
       this.siEl = document.createElement("div");
       Object.assign(this.siEl.style, {
@@ -15262,7 +15332,8 @@ var _ChartEngine = class _ChartEngine {
             );
           }
         },
-        this.labels.trade
+        this.labels.trade,
+        this.uiConfig.tradeButton
       );
       this.canvasWrap.appendChild(this.tradeButton.el);
       this.tradeButton.el.addEventListener("mouseenter", () => {
@@ -15862,6 +15933,30 @@ var _ChartEngine = class _ChartEngine {
     this.emitStateChange();
     return this;
   }
+  /** Programmatically change the active timeframe and reload data. */
+  setTimeframe(tf) {
+    this.timeframe = tf;
+    this.topBar?.setTimeframe(tf);
+    this.emitter.emit("timeframeChange", { timeframe: tf });
+    this.emitStateChange();
+    this.updateCountdownState();
+    this.triggerLoad("timeframe");
+    return this;
+  }
+  /** Update per-theme deep-partial color overrides and rebuild the active theme. */
+  setThemeOverrides(overrides) {
+    this.themeOverrides = overrides;
+    this.theme = this.buildTheme(this.themeName);
+    this.topBar?.setTheme(this.theme);
+    this.bottomBar?.setTheme(this.theme);
+    this.leftBar?.setTheme(this.theme);
+    this.tradeButton?.setTheme(this.theme, this.priceAxisWidth);
+    this.tradePopover?.setTheme(this.theme);
+    this.indicatorSettingsDialog?.setTheme(this.theme);
+    this.chartSettingsDialog?.setTheme(this.theme);
+    this.scheduleRender();
+    return this;
+  }
   setSeries(series) {
     this.series = series;
     this.topBar?.setSeries(series);
@@ -16503,12 +16598,13 @@ var _ChartEngine = class _ChartEngine {
     return this;
   }
   /**
-   * Set or clear the estimated PNL text shown on a draft order's SL or TP bracket line.
-   * Pass `null` to clear the text. No-op if no draft order is active.
+   * Set or clear the estimated PNL text shown on the SL or TP bracket line.
+   * Applies to the currently active bracket host — a draft order while drafting,
+   * or the selected/hovered level while editing an existing pending order or position.
+   * Pass `null` to clear the text.
    * Use this to display the consumer-calculated estimated profit/loss next to the bracket.
    */
   setDraftBracketPnl(type, pnlText) {
-    if (!this.draftOrderLabel) return this;
     if (type === "sl") {
       this.draftBracketPnl = { ...this.draftBracketPnl, sl: pnlText ?? void 0 };
     } else {
@@ -16586,6 +16682,7 @@ var _ChartEngine = class _ChartEngine {
    */
   selectLevel(label) {
     this.selectedTradeLabel = label;
+    if (label !== null) this.crosshair = null;
     this.renderTradeLayer();
     return this;
   }
@@ -17111,16 +17208,14 @@ var _ChartEngine = class _ChartEngine {
     if (!level) return;
     if (label === this.draftOrderLabel) {
       const mainEntry = changes.find((c) => c.field === "main");
-      const slEntry = changes.find((c) => c.field === "stopLoss" && c.isNew);
-      const tpEntry = changes.find((c) => c.field === "takeProfit" && c.isNew);
       const draft = level;
       this._onOrderSubmit?.({
         price: mainEntry?.newPrice ?? draft.price,
         lots: this._minLots,
         side: draft.side,
         orderType: draft.orderType,
-        ...slEntry ? { stopLoss: slEntry.newPrice } : {},
-        ...tpEntry ? { takeProfit: tpEntry.newPrice } : {}
+        ...draft.stopLossPrice !== void 0 ? { stopLoss: draft.stopLossPrice } : {},
+        ...draft.takeProfitPrice !== void 0 ? { takeProfit: draft.takeProfitPrice } : {}
       });
       this.emitter.emit("tradeLevelConfirmed", {
         label,
@@ -17690,6 +17785,7 @@ var _ChartEngine = class _ChartEngine {
       this._mobileLayout = isMobile;
       this.leftBar?.setMobileMode(isMobile);
       this.topBar?.setMobileLayout(isMobile);
+      this.tradeButton?.setMobileMode(isMobile);
       if (this.siEl) {
         this.siEl.style.flexDirection = isMobile ? "column" : "row";
         this.siEl.style.alignItems = isMobile ? "flex-start" : "center";
@@ -17854,7 +17950,7 @@ var _ChartEngine = class _ChartEngine {
       Math.min(Math.ceil(this.viewport.endIndex), Math.round(rawBarIndex))
     );
     const bar = this.dataStore.all[clamped] ?? null;
-    this.crosshair = { x, y, barIndex: clamped, price, bar };
+    this.crosshair = this.selectedTradeLabel === null ? { x, y, barIndex: clamped, price, bar } : null;
     if (this.tradeButton) {
       this.tradeButton.setY(y);
       if (this._isTradingActive) {
@@ -18303,6 +18399,6 @@ function defaultTransform(msg) {
   };
 }
 
-export { AbcdPattern, AnchoredNote, AnchoredVP, Arc, ArrowDown, ArrowMarker, ArrowUp, BatPattern, Brush, ButterflyPattern, Callout, ChartEngine, Circle, CrabPattern, CrossLine, CyclicLines, CypherPattern, DARK_THEME, DEFAULT_BOTTOM_BAR_CONFIG, DEFAULT_CROSSHAIR_CONFIG, DEFAULT_DRAWING_TOOLBAR_CONFIG, DEFAULT_INDICATOR_OVERLAY_CONFIG, DEFAULT_LABELS, DEFAULT_PRICE_AXIS_CONFIG, DEFAULT_TIME_AXIS_CONFIG, DEFAULT_TOP_BAR_CONFIG, DEFAULT_UI_CONFIG, DatePriceRange, DateRange, DisjointChannel, DrawingManager, ElliottCombination, ElliottCorrective, ElliottImpulse, ElliottTriangle, ElliottWxy, Ellipse, FibChannel, FibCircles, FibExtension, FibFan, FibProjection, FibRetracement, FibSpiral, FibTimezone, FixedRangeVP, Flag, FlatChannel, GannBox, GannFan, GannSquare, GartleyPattern, GhostFeed, HeadShoulders, Highlighter, HorizontalLine, InsidePitchfork, LIGHT_THEME, ModifiedSchiff, ParallelChannel, Path, Pitchfork, Polyline, PriceLabel, PriceNote, PriceProjection, PriceRange, Projection, Rectangle, RegressionTrend, RotatedRectangle, Ruler, SchiffPitchfork, SharkPattern, SineLine, Text, ThreeDrives, TimeCycles, TrendAngle, TrendLine, Triangle, TrianglePattern, VerticalLine, VolumeProfile, WebSocketAdapter, aggregateCandles, deepMergeTheme, resolveCssVarsInTheme, resolveLabels, resolveUiConfig };
+export { AbcdPattern, AnchoredNote, AnchoredVP, Arc, ArrowDown, ArrowMarker, ArrowUp, BatPattern, Brush, ButterflyPattern, Callout, ChartEngine, Circle, CrabPattern, CrossLine, CyclicLines, CypherPattern, DARK_THEME, DEFAULT_BOTTOM_BAR_CONFIG, DEFAULT_CROSSHAIR_CONFIG, DEFAULT_DRAWING_TOOLBAR_CONFIG, DEFAULT_INDICATOR_OVERLAY_CONFIG, DEFAULT_LABELS, DEFAULT_PRICE_AXIS_CONFIG, DEFAULT_TIME_AXIS_CONFIG, DEFAULT_TOP_BAR_CONFIG, DEFAULT_TRADE_BUTTON_CONFIG, DEFAULT_UI_CONFIG, DatePriceRange, DateRange, DisjointChannel, DrawingManager, ElliottCombination, ElliottCorrective, ElliottImpulse, ElliottTriangle, ElliottWxy, Ellipse, FibChannel, FibCircles, FibExtension, FibFan, FibProjection, FibRetracement, FibSpiral, FibTimezone, FixedRangeVP, Flag, FlatChannel, GannBox, GannFan, GannSquare, GartleyPattern, GhostFeed, HeadShoulders, Highlighter, HorizontalLine, InsidePitchfork, LIGHT_THEME, ModifiedSchiff, ParallelChannel, Path, Pitchfork, Polyline, PriceLabel, PriceNote, PriceProjection, PriceRange, Projection, Rectangle, RegressionTrend, RotatedRectangle, Ruler, SchiffPitchfork, SharkPattern, SineLine, Text, ThreeDrives, TimeCycles, TrendAngle, TrendLine, Triangle, TrianglePattern, VerticalLine, VolumeProfile, WebSocketAdapter, aggregateCandles, deepMergeTheme, resolveCssVarsInTheme, resolveLabels, resolveUiConfig };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map