acttrader-charts 1.0.12 → 1.0.13

package/README.md

@@ -218,7 +218,7 @@ When `enableTrading` is on and live BID/ASK data is streaming, hovering / activa
 | `theme` | | `"dark"` | `"dark"` or `"light"` |
 | `series` | | `"candlestick"` | Initial chart type |
 | `showVolume` | | `true` | Show volume overlay |
-| `showUI` | | `true` | Render top / bottom / left bars |
+| `showUI` | | `true` | Render top / bottom / left bars. When `false`, the loading overlay is also suppressed (mobile wrappers provide their own) |
 | `showDrawingTools` | | `true` | Show drawing toolbar and pencil button |
 | `timeframe` | | `"1D"` | Initial timeframe |
 | `duration` | | — | Initial active duration button |
@@ -295,12 +295,15 @@ import { DEFAULT_UI_CONFIG } from 'acttrader-charts';
 | Component key | Configurable properties |
 |---|---|
 | `drawingToolbar` | `iconBtnSize`, `iconFontSize`, `iconFontFamily`, `flyoutLabelFontSize`, `flyoutLabelFontFamily`, `shortcutFontSize`, `soonBadgeFontSize`, `flyoutHeadingFontSize`, `flyoutHeadingLetterSpacing`, `scrollBtnHeight`, `scrollBtnFontSize`, `barPadding`, `btnGap` |
-| `topBar` | `height`, `dropBtnFontSize`, `dropBtnFontFamily`, `drawBtnSize`, `drawBtnIconFontSize`, `flyoutRowFontSize`, `flyoutRowFontFamily`, `flyoutCategoryFontSize`, `flyoutCategoryLetterSpacing`, `flyoutCheckFontSize`, `streamDotSize` |
+| `topBar` | `height`, `dropBtnFontSize`, `dropBtnFontFamily`, `drawBtnSize`, `drawBtnIconFontSize`, `iconBtnSize`, `mobileIconBtnSize`, `mobileDrawBtnIconSize`, `flyoutRowFontSize`, `flyoutRowFontFamily`, `flyoutCategoryFontSize`, `flyoutCategoryLetterSpacing`, `flyoutCheckFontSize`, `streamDotSize` |
 | `bottomBar` | `height`, `btnFontSize`, `btnFontFamily` |
 | `priceAxis` | `fontSize`, `fontFamily` |
 | `timeAxis` | `fontSize`, `fontFamily` |
 | `crosshair` | `labelHeight`, `labelPaddingX`, `fontSize`, `fontFamily` |
 | `indicatorOverlay` | `pillFontSize`, `pillFontFamily`, `dotFontSize`, `pillIconFontSize`, `collapseBtnFontSize`, `collapseBtnFontFamily`, `dropdownRowFontSize`, `dropdownRowFontFamily`, `dropdownIconFontSize` |
+| `tradeButton` | `size`, `mobileSize`, `iconSize`, `mobileIconSize` |
+
+**Mobile icon sizing:** When the chart container is narrower than `drawingToolbar.mobileBreakpoint` (default `480`), the top-bar icon buttons (settings, fullscreen, drawing toggle) and the floating trade ⊕ button use their mobile sizes automatically. Defaults: top-bar icon buttons grow `26px → 28px` (icon SVG +2px), trade button grows `22px → 24px` (icon `14px → 16px`). Override any of these values via `uiConfig.topBar.mobileIconBtnSize`, `uiConfig.topBar.mobileDrawBtnIconSize`, or `uiConfig.tradeButton.mobileSize` / `mobileIconSize`.
 
 **Example:**
 
@@ -324,6 +327,7 @@ import {
     DEFAULT_TOP_BAR_CONFIG,
     DEFAULT_PRICE_AXIS_CONFIG,
     DEFAULT_CROSSHAIR_CONFIG,
+    DEFAULT_TRADE_BUTTON_CONFIG,
     // ...
 } from 'acttrader-charts';
 ```
@@ -472,6 +476,8 @@ chart.setLoading(loading: boolean): this
 ```ts
 chart.setSeries(series: SeriesType): this
 chart.setTheme('dark' | 'light'): this
+chart.setTimeframe(tf: Timeframe): this                         // change timeframe and reload data
+chart.setThemeOverrides(overrides: ChartConfig['themeOverrides']): this  // update per-theme color overrides at runtime
 chart.setVolume(show: boolean): this
 ```
 

package/dist/{MACD-DoO45b_C.d.cts → MACD-CEmdbwGz.d.cts}

@@ -49,6 +49,12 @@ interface TopBarUiConfig {
     drawBtnSize: string;
     /** Font size for the icon inside the drawing toggle button */
     drawBtnIconFontSize: string;
+    /** Size (width = height) of icon-only buttons (settings, fullscreen) — desktop */
+    iconBtnSize: string;
+    /** Size (width = height) of icon-only buttons — mobile override */
+    mobileIconBtnSize: string;
+    /** SVG icon dimension inside the drawing toggle button — mobile override */
+    mobileDrawBtnIconSize: string;
     /** Font size for flyout list rows */
     flyoutRowFontSize: string;
     /** Font family for flyout list rows */
@@ -112,6 +118,16 @@ interface IndicatorOverlayUiConfig {
     /** Font size for gear ⚙ and remove ✕ icons inside dropdown rows */
     dropdownIconFontSize: string;
 }
+interface TradeButtonUiConfig {
+    /** Button diameter (px) — desktop */
+    size: number;
+    /** Button diameter (px) — mobile override */
+    mobileSize: number;
+    /** SVG icon dimension (px) — desktop */
+    iconSize: number;
+    /** SVG icon dimension (px) — mobile override */
+    mobileIconSize: number;
+}
 interface UiConfig {
     drawingToolbar: DrawingToolbarUiConfig;
     topBar: TopBarUiConfig;
@@ -120,6 +136,7 @@ interface UiConfig {
     timeAxis: TimeAxisUiConfig;
     crosshair: CrosshairUiConfig;
     indicatorOverlay: IndicatorOverlayUiConfig;
+    tradeButton: TradeButtonUiConfig;
 }
 declare const DEFAULT_DRAWING_TOOLBAR_CONFIG: DrawingToolbarUiConfig;
 declare const DEFAULT_TOP_BAR_CONFIG: TopBarUiConfig;
@@ -128,6 +145,7 @@ declare const DEFAULT_PRICE_AXIS_CONFIG: PriceAxisUiConfig;
 declare const DEFAULT_TIME_AXIS_CONFIG: TimeAxisUiConfig;
 declare const DEFAULT_CROSSHAIR_CONFIG: CrosshairUiConfig;
 declare const DEFAULT_INDICATOR_OVERLAY_CONFIG: IndicatorOverlayUiConfig;
+declare const DEFAULT_TRADE_BUTTON_CONFIG: TradeButtonUiConfig;
 declare const DEFAULT_UI_CONFIG: UiConfig;
 type DeepPartial$1<T> = {
     [K in keyof T]?: T[K] extends object ? DeepPartial$1<T[K]> : T[K];
@@ -1222,4 +1240,4 @@ declare class MACD implements IIndicator {
     render(ctx: CanvasRenderingContext2D, results: IndicatorResult[], scale: ScaleManager, viewport: Viewport, paneHeight: number, rangeOverride?: PriceRange): void;
 }
 
-export { type IndicatorResult as $, type AnyLevel as A, BollingerBands as B, type ChartConfig as C, type DrawingToolType as D, DEFAULT_LABELS as E, DEFAULT_PRICE_AXIS_CONFIG as F, DEFAULT_TIME_AXIS_CONFIG as G, DEFAULT_TOP_BAR_CONFIG as H, type IIndicator as I, DEFAULT_UI_CONFIG as J, type DataLoaderParams as K, type DeepPartial$1 as L, type DeepPartialChartTheme as M, type DialogLabels as N, type OHLCVBar as O, type PriceRange as P, type DrawingToolbarColors as Q, type DrawingToolbarLabels as R, type SeriesType as S, type TradeLevelType as T, type DrawingToolbarUiConfig as U, type Viewport as V, type Duration as W, EMA as X, type IndicatorOverlayColors as Y, type IndicatorOverlayUiConfig as Z, type IndicatorParams as _, type ChartEventMap as a, type IndicatorStateEntry as a0, LIGHT_THEME as a1, MACD as a2, type OhlcLabels as a3, type OrderSubmit as a4, type Padding as a5, type PendingOrderLevel as a6, type PositionLevel as a7, type PositionRenderStyle as a8, type PriceAxisUiConfig as a9, RSI as aa, SMA as ab, type Theme as ac, type TimeAxisUiConfig as ad, type Timeframe as ae, type TopBarColors as af, type TopBarLabels as ag, type TopBarUiConfig as ah, type TradeDisplayFilter as ai, type TradeLabels as aj, type TradeLevel as ak, type TradeLevelColors as al, type TradePanelColors as am, type UiConfig as an, deepMergeTheme as ao, resolveCssVarsInTheme as ap, resolveLabels as aq, resolveUiConfig as ar, type PriceSource as as, type ChartState as b, type IDrawing as c, type IWebSocketAdapter as d, type DrawingPoint as e, ScaleManager as f, type DrawingHandle as g, type SerializedDrawing as h, type Tick as i, type StreamStatus as j, type ActiveIndicatorState as k, type BottomBarColors as l, type BottomBarLabels as m, type BottomBarUiConfig as n, type CanvasColorSettings as o, type ChartLabels as p, type ChartMiscLabels as q, type ChartTheme as r, type ChartThemeUi as s, type CrosshairPosition as t, type CrosshairUiConfig as u, DARK_THEME as v, DEFAULT_BOTTOM_BAR_CONFIG as w, DEFAULT_CROSSHAIR_CONFIG as x, DEFAULT_DRAWING_TOOLBAR_CONFIG as y, DEFAULT_INDICATOR_OVERLAY_CONFIG as z };
+export { type IndicatorOverlayUiConfig as $, type AnyLevel as A, BollingerBands as B, type ChartConfig as C, type DrawingToolType as D, DEFAULT_INDICATOR_OVERLAY_CONFIG as E, DEFAULT_LABELS as F, DEFAULT_PRICE_AXIS_CONFIG as G, DEFAULT_TIME_AXIS_CONFIG as H, type IIndicator as I, DEFAULT_TOP_BAR_CONFIG as J, DEFAULT_TRADE_BUTTON_CONFIG as K, DEFAULT_UI_CONFIG as L, type DataLoaderParams as M, type DeepPartial$1 as N, type OHLCVBar as O, type PriceRange as P, type DeepPartialChartTheme as Q, type DialogLabels as R, type SeriesType as S, type Timeframe as T, type DrawingToolbarColors as U, type Viewport as V, type DrawingToolbarLabels as W, type DrawingToolbarUiConfig as X, type Duration as Y, EMA as Z, type IndicatorOverlayColors as _, type ChartEventMap as a, type IndicatorParams as a0, type IndicatorResult as a1, type IndicatorStateEntry as a2, LIGHT_THEME as a3, MACD as a4, type OhlcLabels as a5, type OrderSubmit as a6, type Padding as a7, type PendingOrderLevel as a8, type PositionLevel as a9, type PositionRenderStyle as aa, type PriceAxisUiConfig as ab, RSI as ac, SMA as ad, type Theme as ae, type TimeAxisUiConfig as af, type TopBarColors as ag, type TopBarLabels as ah, type TopBarUiConfig as ai, type TradeButtonUiConfig as aj, type TradeDisplayFilter as ak, type TradeLabels as al, type TradeLevel as am, type TradeLevelColors as an, type TradePanelColors as ao, type UiConfig as ap, deepMergeTheme as aq, resolveCssVarsInTheme as ar, resolveLabels as as, resolveUiConfig as at, type PriceSource as au, type ChartState as b, type IDrawing as c, type IWebSocketAdapter as d, type TradeLevelType as e, type DrawingPoint as f, ScaleManager as g, type DrawingHandle as h, type SerializedDrawing as i, type Tick as j, type StreamStatus as k, type ActiveIndicatorState as l, type BottomBarColors as m, type BottomBarLabels as n, type BottomBarUiConfig as o, type CanvasColorSettings as p, type ChartLabels as q, type ChartMiscLabels as r, type ChartTheme as s, type ChartThemeUi as t, type CrosshairPosition as u, type CrosshairUiConfig as v, DARK_THEME as w, DEFAULT_BOTTOM_BAR_CONFIG as x, DEFAULT_CROSSHAIR_CONFIG as y, DEFAULT_DRAWING_TOOLBAR_CONFIG as z };

package/dist/{MACD-DoO45b_C.d.ts → MACD-CEmdbwGz.d.ts}

@@ -49,6 +49,12 @@ interface TopBarUiConfig {
     drawBtnSize: string;
     /** Font size for the icon inside the drawing toggle button */
     drawBtnIconFontSize: string;
+    /** Size (width = height) of icon-only buttons (settings, fullscreen) — desktop */
+    iconBtnSize: string;
+    /** Size (width = height) of icon-only buttons — mobile override */
+    mobileIconBtnSize: string;
+    /** SVG icon dimension inside the drawing toggle button — mobile override */
+    mobileDrawBtnIconSize: string;
     /** Font size for flyout list rows */
     flyoutRowFontSize: string;
     /** Font family for flyout list rows */
@@ -112,6 +118,16 @@ interface IndicatorOverlayUiConfig {
     /** Font size for gear ⚙ and remove ✕ icons inside dropdown rows */
     dropdownIconFontSize: string;
 }
+interface TradeButtonUiConfig {
+    /** Button diameter (px) — desktop */
+    size: number;
+    /** Button diameter (px) — mobile override */
+    mobileSize: number;
+    /** SVG icon dimension (px) — desktop */
+    iconSize: number;
+    /** SVG icon dimension (px) — mobile override */
+    mobileIconSize: number;
+}
 interface UiConfig {
     drawingToolbar: DrawingToolbarUiConfig;
     topBar: TopBarUiConfig;
@@ -120,6 +136,7 @@ interface UiConfig {
     timeAxis: TimeAxisUiConfig;
     crosshair: CrosshairUiConfig;
     indicatorOverlay: IndicatorOverlayUiConfig;
+    tradeButton: TradeButtonUiConfig;
 }
 declare const DEFAULT_DRAWING_TOOLBAR_CONFIG: DrawingToolbarUiConfig;
 declare const DEFAULT_TOP_BAR_CONFIG: TopBarUiConfig;
@@ -128,6 +145,7 @@ declare const DEFAULT_PRICE_AXIS_CONFIG: PriceAxisUiConfig;
 declare const DEFAULT_TIME_AXIS_CONFIG: TimeAxisUiConfig;
 declare const DEFAULT_CROSSHAIR_CONFIG: CrosshairUiConfig;
 declare const DEFAULT_INDICATOR_OVERLAY_CONFIG: IndicatorOverlayUiConfig;
+declare const DEFAULT_TRADE_BUTTON_CONFIG: TradeButtonUiConfig;
 declare const DEFAULT_UI_CONFIG: UiConfig;
 type DeepPartial$1<T> = {
     [K in keyof T]?: T[K] extends object ? DeepPartial$1<T[K]> : T[K];
@@ -1222,4 +1240,4 @@ declare class MACD implements IIndicator {
     render(ctx: CanvasRenderingContext2D, results: IndicatorResult[], scale: ScaleManager, viewport: Viewport, paneHeight: number, rangeOverride?: PriceRange): void;
 }
 
-export { type IndicatorResult as $, type AnyLevel as A, BollingerBands as B, type ChartConfig as C, type DrawingToolType as D, DEFAULT_LABELS as E, DEFAULT_PRICE_AXIS_CONFIG as F, DEFAULT_TIME_AXIS_CONFIG as G, DEFAULT_TOP_BAR_CONFIG as H, type IIndicator as I, DEFAULT_UI_CONFIG as J, type DataLoaderParams as K, type DeepPartial$1 as L, type DeepPartialChartTheme as M, type DialogLabels as N, type OHLCVBar as O, type PriceRange as P, type DrawingToolbarColors as Q, type DrawingToolbarLabels as R, type SeriesType as S, type TradeLevelType as T, type DrawingToolbarUiConfig as U, type Viewport as V, type Duration as W, EMA as X, type IndicatorOverlayColors as Y, type IndicatorOverlayUiConfig as Z, type IndicatorParams as _, type ChartEventMap as a, type IndicatorStateEntry as a0, LIGHT_THEME as a1, MACD as a2, type OhlcLabels as a3, type OrderSubmit as a4, type Padding as a5, type PendingOrderLevel as a6, type PositionLevel as a7, type PositionRenderStyle as a8, type PriceAxisUiConfig as a9, RSI as aa, SMA as ab, type Theme as ac, type TimeAxisUiConfig as ad, type Timeframe as ae, type TopBarColors as af, type TopBarLabels as ag, type TopBarUiConfig as ah, type TradeDisplayFilter as ai, type TradeLabels as aj, type TradeLevel as ak, type TradeLevelColors as al, type TradePanelColors as am, type UiConfig as an, deepMergeTheme as ao, resolveCssVarsInTheme as ap, resolveLabels as aq, resolveUiConfig as ar, type PriceSource as as, type ChartState as b, type IDrawing as c, type IWebSocketAdapter as d, type DrawingPoint as e, ScaleManager as f, type DrawingHandle as g, type SerializedDrawing as h, type Tick as i, type StreamStatus as j, type ActiveIndicatorState as k, type BottomBarColors as l, type BottomBarLabels as m, type BottomBarUiConfig as n, type CanvasColorSettings as o, type ChartLabels as p, type ChartMiscLabels as q, type ChartTheme as r, type ChartThemeUi as s, type CrosshairPosition as t, type CrosshairUiConfig as u, DARK_THEME as v, DEFAULT_BOTTOM_BAR_CONFIG as w, DEFAULT_CROSSHAIR_CONFIG as x, DEFAULT_DRAWING_TOOLBAR_CONFIG as y, DEFAULT_INDICATOR_OVERLAY_CONFIG as z };
+export { type IndicatorOverlayUiConfig as $, type AnyLevel as A, BollingerBands as B, type ChartConfig as C, type DrawingToolType as D, DEFAULT_INDICATOR_OVERLAY_CONFIG as E, DEFAULT_LABELS as F, DEFAULT_PRICE_AXIS_CONFIG as G, DEFAULT_TIME_AXIS_CONFIG as H, type IIndicator as I, DEFAULT_TOP_BAR_CONFIG as J, DEFAULT_TRADE_BUTTON_CONFIG as K, DEFAULT_UI_CONFIG as L, type DataLoaderParams as M, type DeepPartial$1 as N, type OHLCVBar as O, type PriceRange as P, type DeepPartialChartTheme as Q, type DialogLabels as R, type SeriesType as S, type Timeframe as T, type DrawingToolbarColors as U, type Viewport as V, type DrawingToolbarLabels as W, type DrawingToolbarUiConfig as X, type Duration as Y, EMA as Z, type IndicatorOverlayColors as _, type ChartEventMap as a, type IndicatorParams as a0, type IndicatorResult as a1, type IndicatorStateEntry as a2, LIGHT_THEME as a3, MACD as a4, type OhlcLabels as a5, type OrderSubmit as a6, type Padding as a7, type PendingOrderLevel as a8, type PositionLevel as a9, type PositionRenderStyle as aa, type PriceAxisUiConfig as ab, RSI as ac, SMA as ad, type Theme as ae, type TimeAxisUiConfig as af, type TopBarColors as ag, type TopBarLabels as ah, type TopBarUiConfig as ai, type TradeButtonUiConfig as aj, type TradeDisplayFilter as ak, type TradeLabels as al, type TradeLevel as am, type TradeLevelColors as an, type TradePanelColors as ao, type UiConfig as ap, deepMergeTheme as aq, resolveCssVarsInTheme as ar, resolveLabels as as, resolveUiConfig as at, type PriceSource as au, type ChartState as b, type IDrawing as c, type IWebSocketAdapter as d, type TradeLevelType as e, type DrawingPoint as f, ScaleManager as g, type DrawingHandle as h, type SerializedDrawing as i, type Tick as j, type StreamStatus as k, type ActiveIndicatorState as l, type BottomBarColors as m, type BottomBarLabels as n, type BottomBarUiConfig as o, type CanvasColorSettings as p, type ChartLabels as q, type ChartMiscLabels as r, type ChartTheme as s, type ChartThemeUi as t, type CrosshairPosition as u, type CrosshairUiConfig as v, DARK_THEME as w, DEFAULT_BOTTOM_BAR_CONFIG as x, DEFAULT_CROSSHAIR_CONFIG as y, DEFAULT_DRAWING_TOOLBAR_CONFIG as z };

package/dist/index.cjs

@@ -428,6 +428,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",
@@ -465,6 +468,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,
@@ -472,7 +481,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;
@@ -483,7 +493,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 }
   };
 }
 
@@ -3237,6 +3248,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;
@@ -3289,6 +3303,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;
@@ -3695,13 +3724,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",
@@ -3712,6 +3742,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
@@ -12228,9 +12272,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;
@@ -12238,8 +12284,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,
@@ -12258,6 +12304,7 @@ var TradeButton = class {
       pointerEvents: "auto",
       userSelect: "none"
     });
+    this.applyIconSize(cfg.iconSize);
     this.el.addEventListener("click", (e) => {
       e.stopPropagation();
       onClick();
@@ -12305,6 +12352,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
@@ -16486,7 +16554,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) {
@@ -17005,7 +17073,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) {
@@ -17615,30 +17683,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, {
@@ -17770,7 +17840,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", () => {
@@ -18370,6 +18441,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);
@@ -19011,12 +19106,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 {
@@ -19094,6 +19190,7 @@ var _ChartEngine = class _ChartEngine {
    */
   selectLevel(label) {
     this.selectedTradeLabel = label;
+    if (label !== null) this.crosshair = null;
     this.renderTradeLayer();
     return this;
   }
@@ -19619,16 +19716,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,
@@ -20198,6 +20293,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";
@@ -20362,7 +20458,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) {
@@ -20838,6 +20934,7 @@ exports.DEFAULT_LABELS = DEFAULT_LABELS;
 exports.DEFAULT_PRICE_AXIS_CONFIG = DEFAULT_PRICE_AXIS_CONFIG;
 exports.DEFAULT_TIME_AXIS_CONFIG = DEFAULT_TIME_AXIS_CONFIG;
 exports.DEFAULT_TOP_BAR_CONFIG = DEFAULT_TOP_BAR_CONFIG;
+exports.DEFAULT_TRADE_BUTTON_CONFIG = DEFAULT_TRADE_BUTTON_CONFIG;
 exports.DEFAULT_UI_CONFIG = DEFAULT_UI_CONFIG;
 exports.DatePriceRange = DatePriceRange;
 exports.DateRange = DateRange;