acttrader-charts 1.0.11 → 1.0.13

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 }
   };
 }
 
@@ -2100,7 +2111,7 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
   ctx.restore();
   if (draggable) {
     drawGripHandle(ctx, gripX, boxY, boxH, colors, hovered);
-    const BTN_ZONE_W = EDIT_R * 2 + EDIT_GAP + CLOSE_R * 2 + BOX_PAD_X / 2;
+    const BTN_ZONE_W = hideConfirmCancel ? 0 : EDIT_R * 2 + EDIT_GAP + CLOSE_R * 2 + BOX_PAD_X / 2;
     dragAreas.push({
       label: level.label,
       type: level.type,
@@ -2110,7 +2121,8 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
       y: boxY,
       w: GRIP_W + 2 + boxW - BTN_ZONE_W,
       h: boxH,
-      isBracket: false
+      isBracket: false,
+      isBox: true
     });
     dragAreas.push({
       label: level.label,
@@ -2123,6 +2135,19 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
       h: 8,
       isBracket: false
     });
+  } else if (hideConfirmCancel && boxW > 0) {
+    dragAreas.push({
+      label: level.label,
+      type: level.type,
+      data: level.data,
+      price: level.price,
+      x: boxX,
+      y: boxY,
+      w: boxW,
+      h: boxH,
+      isBracket: false,
+      isBox: true
+    });
   }
   hoverAreas.push({
     label: level.label,
@@ -3223,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;
@@ -3275,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;
@@ -3681,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",
@@ -3698,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
@@ -12214,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;
@@ -12224,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,
@@ -12244,6 +12304,7 @@ var TradeButton = class {
       pointerEvents: "auto",
       userSelect: "none"
     });
+    this.applyIconSize(cfg.iconSize);
     this.el.addEventListener("click", (e) => {
       e.stopPropagation();
       onClick();
@@ -12291,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
@@ -16472,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) {
@@ -16811,8 +16893,9 @@ var _ChartEngine = class _ChartEngine {
           e.preventDefault();
           const level = this.levels.find((l) => l.label === dragHit.label);
           if (level) {
-            const isLimitStopDraftLevel = level.data?._isDraft === true && level.orderType !== "market";
-            if (this.hideLevelConfirmCancel && !dragHit.isBracket && !isLimitStopDraftLevel) {
+            const isAlreadySelected = this.selectedTradeLabel === level.label;
+            const isMobileDraggable = dragHit.isBracket || level.type === "pending" && level.orderType !== "market" && (isAlreadySelected || !dragHit.isBox);
+            if (this.hideLevelConfirmCancel && !isMobileDraggable) {
               const hasPending = this.pendingLevelDrags.has(level.label);
               if (this.selectedTradeLabel === level.label && !hasPending) {
                 this.selectedTradeLabel = null;
@@ -16990,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) {
@@ -17600,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, {
@@ -17755,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", () => {
@@ -18355,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);
@@ -18883,8 +18993,10 @@ var _ChartEngine = class _ChartEngine {
   addLevelBracket(label, type) {
     const level = this.levels.find((l) => l.label === label);
     if (!level) return this;
-    const alreadyHas = type === "sl" ? level.stopLossPrice !== void 0 : level.takeProfitPrice !== void 0;
-    if (alreadyHas) return this;
+    const dragField = type === "sl" ? "stopLoss" : "takeProfit";
+    const alreadyHasInLevel = type === "sl" ? level.stopLossPrice !== void 0 : level.takeProfitPrice !== void 0;
+    const alreadyHasPending = this.pendingLevelDrags.get(label)?.some((c) => c.field === dragField && !c.isRemoval) ?? false;
+    if (alreadyHasInLevel || alreadyHasPending) return this;
     const { priceH } = this.getChartLayout();
     const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
     const entryY = this.scaleManager.yToPixel(level.price, priceRange, priceH);
@@ -18893,6 +19005,10 @@ var _ChartEngine = class _ChartEngine {
     const bracketY = entryY + (isBelowEntry ? 30 : -30);
     const defaultPrice = this.scaleManager.pixelToPrice(bracketY, priceRange, priceH);
     this.updateLevelBracket(label, type, defaultPrice);
+    const existingDrags = this.pendingLevelDrags.get(label) ?? [];
+    const filteredDrags = existingDrags.filter((c) => c.field !== dragField);
+    filteredDrags.push({ field: dragField, newPrice: defaultPrice, oldPrice: defaultPrice, isNew: true });
+    this.pendingLevelDrags.set(label, filteredDrags);
     this.emitter.emit("tradeLevelBracketActivated", {
       label,
       bracketType: type,
@@ -18955,7 +19071,20 @@ var _ChartEngine = class _ChartEngine {
    * No-op if the target doesn't exist or doesn't have the bracket type.
    */
   removeBracket(type, label) {
-    if (label) return this.updateLevelBracket(label, type, null);
+    if (label) {
+      const field = type === "sl" ? "stopLoss" : "takeProfit";
+      const level = this.levels.find((l) => l.label === label);
+      if (!level) return this;
+      const existingChange = this.pendingLevelDrags.get(label)?.find((c) => c.field === field);
+      const effectivePrice = existingChange && !existingChange.isRemoval ? existingChange.newPrice : type === "sl" ? level.stopLossPrice : level.takeProfitPrice;
+      if (effectivePrice === void 0) return this;
+      const existingDrags = this.pendingLevelDrags.get(label) ?? [];
+      const filteredDrags = existingDrags.filter((c) => c.field !== field);
+      filteredDrags.push({ field, newPrice: effectivePrice, oldPrice: effectivePrice, isRemoval: true });
+      this.pendingLevelDrags.set(label, filteredDrags);
+      this.renderTradeLayer();
+      return this;
+    }
     if (type === "sl") {
       this.draftBracketPnl = { ...this.draftBracketPnl, sl: void 0 };
     } else {
@@ -18977,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 {
@@ -19060,6 +19190,7 @@ var _ChartEngine = class _ChartEngine {
    */
   selectLevel(label) {
     this.selectedTradeLabel = label;
+    if (label !== null) this.crosshair = null;
     this.renderTradeLayer();
     return this;
   }
@@ -19367,25 +19498,31 @@ var _ChartEngine = class _ChartEngine {
     );
     const processedLevels = this.levels.filter((l) => !(l.type === "pending" && l.ToClose != null)).map((l) => {
       const draftChanges = this.pendingLevelDrags.get(l.label) ?? [];
-      const slDraft = draftChanges.find((c) => c.field === "stopLoss")?.newPrice;
-      const tpDraft = draftChanges.find((c) => c.field === "takeProfit")?.newPrice;
+      const slChange = draftChanges.find((c) => c.field === "stopLoss");
+      const tpChange = draftChanges.find((c) => c.field === "takeProfit");
+      const slDraft = slChange && !slChange.isRemoval ? slChange.newPrice : void 0;
+      const tpDraft = tpChange && !tpChange.isRemoval ? tpChange.newPrice : void 0;
+      const slIsRemoval = slChange?.isRemoval ?? false;
+      const tpIsRemoval = tpChange?.isRemoval ?? false;
       const mainDraft = draftChanges.find((c) => c.field === "main")?.newPrice;
       const linked = bracketOrders.filter((b) => b.ToClose === l.label);
-      if (linked.length === 0 && slDraft === void 0 && tpDraft === void 0 && mainDraft === void 0)
+      if (linked.length === 0 && slDraft === void 0 && tpDraft === void 0 && mainDraft === void 0 && !slIsRemoval && !tpIsRemoval)
         return l;
       const clone = { ...l };
       if (mainDraft !== void 0) clone.price = mainDraft;
       if (slDraft !== void 0) clone.stopLossPrice = slDraft;
+      else if (slIsRemoval) clone.stopLossPrice = void 0;
       if (tpDraft !== void 0) clone.takeProfitPrice = tpDraft;
+      else if (tpIsRemoval) clone.takeProfitPrice = void 0;
       if (linked.length > 0) {
         const parentSide = l.side ?? "buy";
         for (const b of linked) {
           const isSL = parentSide === "buy" ? b.price < l.price : b.price > l.price;
           if (isSL) {
-            clone.stopLossPrice = slDraft ?? clone.stopLossPrice ?? b.price;
+            clone.stopLossPrice = slIsRemoval ? void 0 : slDraft ?? clone.stopLossPrice ?? b.price;
             clone._slOrderLabel = b.label;
           } else {
-            clone.takeProfitPrice = tpDraft ?? clone.takeProfitPrice ?? b.price;
+            clone.takeProfitPrice = tpIsRemoval ? void 0 : tpDraft ?? clone.takeProfitPrice ?? b.price;
             clone._tpOrderLabel = b.label;
           }
         }
@@ -19447,8 +19584,9 @@ var _ChartEngine = class _ChartEngine {
       const parentPrice = this._effectiveEntryPrice(result.label, level?.price ?? oldPrice);
       const isEntryOrder = level?.entryPriceEditable === true;
       const isDraft = level?.data?._isDraft === true;
+      const isMobilePendingOrder = this.hideLevelConfirmCancel && result.type === "pending" && !isDraft;
       const all = this.dataStore.all;
-      const marketPrice = isEntryOrder || isDraft ? 0 : all[all.length - 1]?.close ?? 0;
+      const marketPrice = isEntryOrder || isDraft || isMobilePendingOrder ? 0 : all[all.length - 1]?.close ?? 0;
       if (!TradeDragHandler.isBracketPriceValid(
         result.newPrice,
         result.bracketType,
@@ -19578,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,
@@ -20157,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";
@@ -20259,24 +20396,20 @@ var _ChartEngine = class _ChartEngine {
       const isDraftBracket = parentLevel?.data?._isDraft === true;
       if (isDraftBracket && parentLevel) {
         const bracketKey = closedLevel.bracketType === "stopLoss" ? "sl" : "tp";
-        const { priceH } = this.getChartLayout();
-        const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
-        const entryY = this.scaleManager.yToPixel(
-          parentLevel.price,
-          priceRange,
-          priceH
-        );
-        const side = parentLevel.side ?? "buy";
-        const isBelowEntry = side === "buy" && bracketKey === "sl" || side === "sell" && bracketKey === "tp";
-        const bracketY = entryY + (isBelowEntry ? 30 : -30);
-        const defaultPrice = this.scaleManager.pixelToPrice(bracketY, priceRange, priceH);
-        this.updateDraftOrderBracket(bracketKey, defaultPrice);
-        this.emitter.emit("tradeLevelDrag", {
+        this.updateDraftOrderBracket(bracketKey, null);
+        this.emitter.emit("tradeLevelEdit", {
           label: closedLevel.label,
-          newPrice: defaultPrice,
-          data: parentLevel?.data,
-          bracketType: closedLevel.bracketType,
-          isFullscreen: this.isFullscreen
+          type: "pending",
+          data: parentLevel.data,
+          isFullscreen: this.isFullscreen,
+          changes: [
+            {
+              field: closedLevel.bracketType === "stopLoss" ? "REMOVE_SL" : "REMOVE_TP",
+              newPrice: 0,
+              data: parentLevel.data,
+              bracketOrderLabel: void 0
+            }
+          ]
         });
         return;
       }
@@ -20325,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) {
@@ -20349,8 +20482,9 @@ var _ChartEngine = class _ChartEngine {
       this._isBracketNew = false;
       const isEntryOrder = level.entryPriceEditable === true;
       const isDraft = level.data?._isDraft === true;
+      const isMobilePendingOrder = this.hideLevelConfirmCancel && level.type === "pending" && !isDraft;
       const all = this.dataStore.all;
-      const marketPrice = isEntryOrder || isDraft ? 0 : all[all.length - 1]?.close ?? 0;
+      const marketPrice = isEntryOrder || isDraft || isMobilePendingOrder ? 0 : all[all.length - 1]?.close ?? 0;
       this.tradeDragHandler.startBracketDrag(
         level,
         dragHit.bracketType,
@@ -20408,20 +20542,9 @@ var _ChartEngine = class _ChartEngine {
     const initialPrice = this.scaleManager.pixelToPrice(btnCenterY, priceRange, priceH);
     const isEntryOrder = level.entryPriceEditable === true;
     const isDraft = level.data?._isDraft === true;
+    const isMobilePendingOrder = this.hideLevelConfirmCancel && level.type === "pending" && !isDraft;
     const all = this.dataStore.all;
-    const marketPrice = isEntryOrder || isDraft ? 0 : all[all.length - 1]?.close ?? 0;
-    if (!isDraft) {
-      this.emitter.emit("tradeLevelEditOpen", {
-        label: level.label,
-        type: level.type,
-        data: level.data,
-        price: level.price,
-        side: level.side,
-        stopLossPrice: level.stopLossPrice,
-        takeProfitPrice: level.takeProfitPrice,
-        isFullscreen: this.isFullscreen
-      });
-    }
+    const marketPrice = isEntryOrder || isDraft || isMobilePendingOrder ? 0 : all[all.length - 1]?.close ?? 0;
     this._pendingBracketOrderLabel = null;
     this._isBracketNew = true;
     this.tradeDragHandler.startBracketDrag(
@@ -20811,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;