acttrader-charts 1.0.8 → 1.0.9

package/README.md

@@ -194,6 +194,18 @@ chart.on('tradeLevelDrag', ({ label, newPrice, bracketType, isFullscreen }) => {
 | `buy`  | must stay ≤ order price | must stay ≥ order price |
 | `sell` | must stay ≥ order price | must stay ≤ order price |
 
+**Mobile mode — `hideLevelConfirmCancel: true`:**
+
+When the on-canvas ✓/✗ buttons are hidden (mobile native UI), the chart adapts its interaction model:
+
+- **Tap a trade level line** → `tradeLevelEditOpen` fires immediately (the whole line acts as the edit button; no pencil icon required).
+- **Tap empty canvas area while a level is selected** → edit is dismissed and any pending drag changes are reverted (equivalent to pressing ✗).
+- **Drag a SL/TP bracket and release** → `tradeLevelEdit` fires automatically without needing a ✓ button tap.
+
+**Market orders — BID/ASK spread zone:**
+
+When `enableTrading` is on and live BID/ASK data is streaming, hovering / activating the trade crosshair button while the cursor price is inside the spread shows **"Buy Market"** and **"Sell Market"** rows instead of the standard Limit/Stop rows. Tapping either row calls `showMarketDraft()` internally and emits `draftInitiated` with `orderType: 'market'`.
+
 ---
 
 ## Default Configuration
@@ -484,6 +496,8 @@ chart.setDrawingTool(tool: DrawingToolType | null): this
 chart.setLevels(levels, labelField, priceField, type): this
 chart.removeLevelByLabel(label: string): this
 chart.cancelCurrentEdit(): this   // cancel the active draft order or in-progress level edit; no-op when nothing is active
+chart.addLevelBracket(label: string, bracketType: 'sl' | 'tp'): this   // auto-place a SL or TP bracket at a default offset; emits tradeLevelBracketActivated with the computed price
+chart.setDraftBracketPnl(bracketType: 'sl' | 'tp', pnlText: string | null): this   // set estimated P&L text on a draft order bracket line; pass null to clear
 ```
 
 ### Trade Button
@@ -662,6 +676,12 @@ chart.on('draftInitiated',     ({ side, price, orderType, isFullscreen }) => {})
 chart.on('draftCancelled',     ({ label, isFullscreen }) => {}); // draft order dismissed without confirming
 chart.on('tradeLevelDragEnd',  ({ label, type, newPrice, data }) => {}); // deprecated — use tradeLevelEdit
 chart.on('tradeLevelBracketDrag', ({ label, bracketType, newPrice, data }) => {}); // deprecated
+
+// Fires after addLevelBracket() auto-places a bracket, delivering the computed price back to the caller
+chart.on('tradeLevelBracketActivated', ({ label, bracketType, price, isFullscreen }) => {
+    // Use price to pre-populate the SL/TP input field in your native form
+    updateBracketPriceInput(bracketType, price);
+});
 ```
 
 ---

package/dist/{MACD-CHD5mG7r.d.cts → MACD-CjC_rccv.d.cts}

@@ -518,6 +518,8 @@ interface ChartConfig {
     showUI?: boolean;
     /** If false, the drawing tools toolbar and pencil button are hidden entirely. Default: true */
     showDrawingTools?: boolean;
+    /** If false, the settings gear button in the top bar is hidden entirely. Default: true */
+    showSettings?: boolean;
     timeframe?: Timeframe;
     duration?: Duration;
     symbol?: string;
@@ -986,6 +988,13 @@ type ChartEventMap = {
         openingBar: OHLCVBar;
         intervalMs: number;
     };
+    /** Emitted after addLevelBracket() auto-places a SL or TP bracket so consumers can populate their form's price field. */
+    tradeLevelBracketActivated: {
+        label: string;
+        bracketType: 'sl' | 'tp';
+        price: number;
+        isFullscreen: boolean;
+    };
     /** Emitted when the user confirms all edits to a level — replaces separate tradeLevelDragEnd / tradeLevelBracketDrag events. */
     tradeLevelEdit: {
         label: string;

package/dist/{MACD-CHD5mG7r.d.ts → MACD-CjC_rccv.d.ts}

@@ -518,6 +518,8 @@ interface ChartConfig {
     showUI?: boolean;
     /** If false, the drawing tools toolbar and pencil button are hidden entirely. Default: true */
     showDrawingTools?: boolean;
+    /** If false, the settings gear button in the top bar is hidden entirely. Default: true */
+    showSettings?: boolean;
     timeframe?: Timeframe;
     duration?: Duration;
     symbol?: string;
@@ -986,6 +988,13 @@ type ChartEventMap = {
         openingBar: OHLCVBar;
         intervalMs: number;
     };
+    /** Emitted after addLevelBracket() auto-places a SL or TP bracket so consumers can populate their form's price field. */
+    tradeLevelBracketActivated: {
+        label: string;
+        bracketType: 'sl' | 'tp';
+        price: number;
+        isFullscreen: boolean;
+    };
     /** Emitted when the user confirms all edits to a level — replaces separate tradeLevelDragEnd / tradeLevelBracketDrag events. */
     tradeLevelEdit: {
         label: string;

package/dist/index.cjs

@@ -1607,7 +1607,7 @@ function isDraggable(level) {
     return !!level.entryPriceEditable;
   return false;
 }
-function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH, precision, hoveredLabel = null, draggingLabel = null, dragNewPrice = null, selectedLabel = null, pendingLabels = /* @__PURE__ */ new Set(), positionStyle = "line", hideConfirmCancel = false) {
+function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH, precision, hoveredLabel = null, draggingLabel = null, dragNewPrice = null, selectedLabel = null, pendingLabels = /* @__PURE__ */ new Set(), positionStyle = "line", hideConfirmCancel = false, draftOrderLabel = null, draftBracketPnl = {}) {
   if (levels.length === 0)
     return {
       hitAreas: [],
@@ -1704,7 +1704,8 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
       dragAreas,
       confirmAreas,
       addBracketAreas,
-      hideConfirmCancel
+      hideConfirmCancel,
+      level.label === draftOrderLabel ? draftBracketPnl : void 0
     );
   }
   ctx.restore();
@@ -1768,7 +1769,7 @@ function drawDotHoverBox(ctx, level, y, dotX, dotR, theme, precision) {
   });
   ctx.restore();
 }
-function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered, selected, scale, priceRange, priceH, draggingLabel, dragNewPrice, bracketLineXMap, hasPendingChanges, positionStyle, hitAreas, editAreas, hoverAreas, dragAreas, confirmAreas, addBracketAreas, hideConfirmCancel = false) {
+function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered, selected, scale, priceRange, priceH, draggingLabel, dragNewPrice, bracketLineXMap, hasPendingChanges, positionStyle, hitAreas, editAreas, hoverAreas, dragAreas, confirmAreas, addBracketAreas, hideConfirmCancel = false, draftBracketPnl) {
   const { y, boxY, boxW, boxH } = layout;
   const color = levelColor(level, colors, theme);
   const active = hovered || selected;
@@ -1830,7 +1831,8 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
         dragNewPrice,
         hitAreas,
         dragAreas,
-        bracketHost._slOrderLabel
+        bracketHost._slOrderLabel,
+        draftBracketPnl?.sl
       );
     } else if (draggingLabel === slDragKey && dragNewPrice !== null) {
       const bLineX = chartW * BRACKET_BASE_RATIO;
@@ -1850,7 +1852,8 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
         dragNewPrice,
         hitAreas,
         dragAreas,
-        void 0
+        void 0,
+        draftBracketPnl?.sl
       );
     }
     if (bracketHost.takeProfitPrice !== void 0) {
@@ -1871,7 +1874,8 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
         dragNewPrice,
         hitAreas,
         dragAreas,
-        bracketHost._tpOrderLabel
+        bracketHost._tpOrderLabel,
+        draftBracketPnl?.tp
       );
     } else if (draggingLabel === tpDragKey && dragNewPrice !== null) {
       const bLineX = chartW * BRACKET_BASE_RATIO;
@@ -1891,7 +1895,8 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
         dragNewPrice,
         hitAreas,
         dragAreas,
-        void 0
+        void 0,
+        draftBracketPnl?.tp
       );
     }
     if (selected && bracketHost.side !== void 0) {
@@ -2162,7 +2167,7 @@ function drawAddBracketButton(ctx, level, bracketType, entryY, bracketLineX, cha
     h: bH
   });
 }
-function drawBracketLine(ctx, level, bracketType, bracketPrice, scale, priceRange, priceH, bracketLineX, chartW, theme, precision, draggingLabel, dragNewPrice, hitAreas, dragAreas, bracketOrderLabel) {
+function drawBracketLine(ctx, level, bracketType, bracketPrice, scale, priceRange, priceH, bracketLineX, chartW, theme, precision, draggingLabel, dragNewPrice, hitAreas, dragAreas, bracketOrderLabel, pnlText) {
   const isDraggingThis = draggingLabel === `${level.label}:${bracketType}`;
   const price = isDraggingThis && dragNewPrice !== null ? dragNewPrice : bracketPrice;
   const y = scale.yToPixel(price, priceRange, priceH);
@@ -2181,7 +2186,8 @@ function drawBracketLine(ctx, level, bracketType, bracketPrice, scale, priceRang
   const boxLabel = `${typeLabel} ${priceStr}`;
   ctx.font = FONT_BRACKET;
   const textW = ctx.measureText(boxLabel).width;
-  const bW = BRACKET_BOX_PAD_X + textW + BRACKET_BOX_PAD_X + CLOSE_R * 2 + BRACKET_BOX_PAD_X / 2;
+  const pnlW = pnlText ? ctx.measureText(pnlText).width + BRACKET_BOX_PAD_X : 0;
+  const bW = BRACKET_BOX_PAD_X + textW + pnlW + BRACKET_BOX_PAD_X + CLOSE_R * 2 + BRACKET_BOX_PAD_X / 2;
   const bH = BRACKET_BOX_H;
   const bX = bracketLineX - bW - 2;
   const bY = y - bH / 2;
@@ -2195,6 +2201,11 @@ function drawBracketLine(ctx, level, bracketType, bracketPrice, scale, priceRang
   ctx.textAlign = "left";
   ctx.textBaseline = "middle";
   ctx.fillText(boxLabel, bX + BRACKET_BOX_PAD_X, y);
+  if (pnlText) {
+    const isLoss = pnlText.trim().startsWith("-");
+    ctx.fillStyle = isLoss ? theme.candle.down : theme.candle.up;
+    ctx.fillText(pnlText, bX + BRACKET_BOX_PAD_X + textW + BRACKET_BOX_PAD_X, y);
+  }
   const btnX = bX + bW - BRACKET_BOX_PAD_X / 2 - CLOSE_R;
   const btnY = y;
   ctx.fillStyle = monoColor(theme);
@@ -3073,7 +3084,7 @@ function injectFlyoutScrollbarStyles() {
   document.head.appendChild(style);
 }
 var TopBar = class {
-  constructor(onSeriesChange, onTimeframeChange, onAddIndicator, onDurationChange, onSettingsClick, onFullscreenToggle, onDrawingToolsToggle, showDrawingToolsBtn, initialSeries, initialTf, initialDuration, durationMap, theme, cfg = DEFAULT_TOP_BAR_CONFIG, labels = DEFAULT_LABELS.topBar) {
+  constructor(onSeriesChange, onTimeframeChange, onAddIndicator, onDurationChange, onSettingsClick, onFullscreenToggle, onDrawingToolsToggle, showDrawingToolsBtn, showSettingsBtn, initialSeries, initialTf, initialDuration, durationMap, theme, cfg = DEFAULT_TOP_BAR_CONFIG, labels = DEFAULT_LABELS.topBar) {
     this.onSeriesChange = onSeriesChange;
     this.onTimeframeChange = onTimeframeChange;
     this.onAddIndicator = onAddIndicator;
@@ -3081,6 +3092,7 @@ var TopBar = class {
     this.onSettingsClick = onSettingsClick;
     this.onFullscreenToggle = onFullscreenToggle;
     this.onDrawingToolsToggle = onDrawingToolsToggle;
+    this.settingsBtn = null;
     this.isFullscreen = false;
     this.durationBtns = /* @__PURE__ */ new Map();
     this.isMobileLayout = false;
@@ -3156,16 +3168,18 @@ var TopBar = class {
     });
     this.addBtnHover(this.fullscreenBtn);
     this.rightGroup.appendChild(this.fullscreenBtn);
-    this.settingsBtn = document.createElement("button");
-    this.settingsBtn.title = this.labels.settingsTitle;
-    this.settingsBtn.innerHTML = ICON_SETTINGS;
-    this.applyIconBtnStyles(this.settingsBtn, theme, false);
-    this.settingsBtn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      this.onSettingsClick();
-    });
-    this.addBtnHover(this.settingsBtn);
-    this.rightGroup.appendChild(this.settingsBtn);
+    if (showSettingsBtn) {
+      this.settingsBtn = document.createElement("button");
+      this.settingsBtn.title = this.labels.settingsTitle;
+      this.settingsBtn.innerHTML = ICON_SETTINGS;
+      this.applyIconBtnStyles(this.settingsBtn, theme, false);
+      this.settingsBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.onSettingsClick();
+      });
+      this.addBtnHover(this.settingsBtn);
+      this.rightGroup.appendChild(this.settingsBtn);
+    }
     this.el.append(this.leftGroup, this.rightGroup);
     this.docClickHandler = (e) => {
       if (!this.el.contains(e.target) && !this.flyout.contains(e.target)) {
@@ -3199,7 +3213,7 @@ var TopBar = class {
     this.applyFlyoutStyles();
     if (this.drawingBtn) this.applyIconBtnStyles(this.drawingBtn, theme, false);
     this.applyIconBtnStyles(this.fullscreenBtn, theme, this.isFullscreen);
-    this.applyIconBtnStyles(this.settingsBtn, theme, false);
+    if (this.settingsBtn) this.applyIconBtnStyles(this.settingsBtn, theme, false);
     this.applySeriesBtnStyles(this.seriesBtn, theme, false);
     this.applyDropBtnStyles(this.tfBtn, theme, false);
     this.applyDropBtnStyles(this.indBtn, theme, false);
@@ -11519,7 +11533,7 @@ var TAB_LABELS = {
   trading: "Trading"
 };
 var ChartSettingsDialog = class {
-  constructor(theme, initial, labels = DEFAULT_LABELS.dialogs) {
+  constructor(theme, initial, labels = DEFAULT_LABELS.dialogs, showTradingTab = true) {
     this.activeTab = "appearance";
     this.onChange = null;
     this.onReset = null;
@@ -11527,6 +11541,8 @@ var ChartSettingsDialog = class {
     this.theme = theme;
     this.labels = labels;
     this.current = { ...initial };
+    this.showTradingTab = showTradingTab;
+    if (!showTradingTab && this.activeTab === "trading") this.activeTab = "appearance";
     this.el = document.createElement("div");
     Object.assign(this.el.style, {
       position: "fixed",
@@ -11718,7 +11734,7 @@ var ChartSettingsDialog = class {
     return sidebar;
   }
   buildSidebarTabs(container) {
-    const tabs = ["appearance", "trading"];
+    const tabs = this.showTradingTab ? ["appearance", "trading"] : ["appearance"];
     for (const tab of tabs) {
       const btn = document.createElement("button");
       Object.assign(btn.style, {
@@ -12259,6 +12275,7 @@ var TradePopover = class {
     this._pricePrecision = 2;
     this._buyOrderType = "limit";
     this._sellOrderType = "limit";
+    this._isMarket = false;
     this.onDocMouseDown = (e) => {
       if (this.isVisible && !this.el.contains(e.target)) {
         this.hide();
@@ -12288,11 +12305,12 @@ var TradePopover = class {
     document.addEventListener("mousedown", this.onDocMouseDown);
   }
   // ── Public ────────────────────────────────────────────────────────────────
-  show(price, buttonY, buttonRight, pricePrecision = 2, buyOrderType = "limit", sellOrderType = "limit") {
+  show(price, buttonY, buttonRight, pricePrecision = 2, buyOrderType = "limit", sellOrderType = "limit", isMarket = false) {
     this._price = price;
     this._pricePrecision = pricePrecision;
     this._buyOrderType = buyOrderType;
     this._sellOrderType = sellOrderType;
+    this._isMarket = isMarket;
     this.rebuild();
     this.el.style.display = "flex";
     const popW = 145;
@@ -12322,16 +12340,22 @@ var TradePopover = class {
   // ── Private ───────────────────────────────────────────────────────────────
   rebuild() {
     this.el.innerHTML = "";
-    this.el.append(
-      this.makeRow(this.labels.buy, "#26a69a", "buy", this._buyOrderType),
-      this.makeRow(this.labels.sell, "#ef5350", "sell", this._sellOrderType)
-    );
+    if (this._isMarket) {
+      this.el.append(
+        this.makeRow(`${this.labels.buy} Market`, "#26a69a", "buy", "market"),
+        this.makeRow(`${this.labels.sell} Market`, "#ef5350", "sell", "market")
+      );
+    } else {
+      this.el.append(
+        this.makeRow(this.labels.buy, "#26a69a", "buy", this._buyOrderType),
+        this.makeRow(this.labels.sell, "#ef5350", "sell", this._sellOrderType)
+      );
+    }
   }
   makeRow(label, color, side, orderType) {
     const btn = document.createElement("button");
     const priceStr = this._price.toFixed(this._pricePrecision);
-    const typeLabel = orderType === "limit" ? this.labels.limit : this.labels.stop;
-    btn.textContent = `${label} ${typeLabel}  ${priceStr}`;
+    btn.textContent = orderType === "market" ? `${label}  ${priceStr}` : `${label} ${orderType === "limit" ? this.labels.limit : this.labels.stop}  ${priceStr}`;
     Object.assign(btn.style, {
       display: "block",
       width: "100%",
@@ -16377,6 +16401,7 @@ var _ChartEngine = class _ChartEngine {
     this.leftBar = null;
     this.leftBarVisible = true;
     this.drawingToolsEnabled = true;
+    this.settingsEnabled = true;
     this._mobileLayout = false;
     this.indicatorOverlay = null;
     this.subPaneOverlays = /* @__PURE__ */ new Map();
@@ -16400,6 +16425,7 @@ var _ChartEngine = class _ChartEngine {
     this.draftOrderQtyInput = null;
     this._hoverBuyType = "limit";
     this._hoverSellType = "limit";
+    this._hoverInSpread = false;
     this._onOrderSubmit = void 0;
     this._minLots = 1;
     this.scrollToEndBtn = null;
@@ -16496,6 +16522,8 @@ var _ChartEngine = class _ChartEngine {
     this.tradeAddBracketAreas = [];
     this.hoveredTradeLabel = null;
     this.selectedTradeLabel = null;
+    /** Estimated PNL text for draft order SL/TP bracket lines, set by setDraftBracketPnl(). */
+    this.draftBracketPnl = {};
     // TFC components
     this.tradeDragHandler = null;
     this.tradeDragNewPrice = null;
@@ -16560,6 +16588,7 @@ var _ChartEngine = class _ChartEngine {
           const lastClose = allBars.length > 0 ? allBars[allBars.length - 1].close : price;
           this._hoverBuyType = price < lastClose ? "limit" : "stop";
           this._hoverSellType = price > lastClose ? "limit" : "stop";
+          this._hoverInSpread = !!(this.liveBidAsk && price >= this.liveBidAsk.bid && price <= this.liveBidAsk.ask);
         } else if (!this.tradePopover?.isVisible) {
           this.tradeButton.hide();
         }
@@ -17172,9 +17201,28 @@ var _ChartEngine = class _ChartEngine {
           this.selectedTradeLabel = hoverHit.label;
         }
         this.renderTradeLayer();
+        if (this.hideLevelConfirmCancel) {
+          const level = this.levels.find((l) => l.label === hoverHit.label);
+          if (level) {
+            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
+            });
+          }
+        }
         return;
       } else if (this.selectedTradeLabel !== null) {
-        if (!this.pendingLevelDrags.has(this.selectedTradeLabel)) {
+        if (this.hideLevelConfirmCancel) {
+          this.revertPendingChanges(this.selectedTradeLabel);
+          this.selectedTradeLabel = null;
+          this.renderTradeLayer();
+        } else if (!this.pendingLevelDrags.has(this.selectedTradeLabel)) {
           this.selectedTradeLabel = null;
           this.renderTradeLayer();
         }
@@ -17384,6 +17432,7 @@ var _ChartEngine = class _ChartEngine {
     } = config;
     this.dataLoader = dataLoader ?? null;
     this.drawingToolsEnabled = config.showDrawingTools !== false;
+    this.settingsEnabled = config.showSettings !== false;
     this.uiConfig = resolveUiConfig(uiConfig);
     this.labels = resolveLabels(labels);
     this.tickActivityMs = tickActivityMs;
@@ -17476,6 +17525,7 @@ var _ChartEngine = class _ChartEngine {
         },
         this.drawingToolsEnabled ? () => this.toggleDrawingTools() : null,
         this.drawingToolsEnabled,
+        this.settingsEnabled,
         this.series,
         this.timeframe,
         null,
@@ -17734,7 +17784,10 @@ var _ChartEngine = class _ChartEngine {
       this.tradePopover = new TradePopover(
         this.theme,
         lots,
-        (side, price, orderType) => this.createDraftOrder(side, price, orderType),
+        (side, price, orderType) => {
+          if (orderType === "market") this.showMarketDraft(price, side);
+          else this.createDraftOrder(side, price, orderType);
+        },
         this.labels.trade
       );
       this.canvasWrap.appendChild(this.tradePopover.el);
@@ -17756,7 +17809,8 @@ var _ChartEngine = class _ChartEngine {
               btnRight,
               this.dataStore.getPricePrecision(),
               this._hoverBuyType,
-              this._hoverSellType
+              this._hoverSellType,
+              this._hoverInSpread
             );
           }
         },
@@ -18808,6 +18862,34 @@ var _ChartEngine = class _ChartEngine {
     this.renderTradeLayer();
     return this;
   }
+  /**
+   * Add a SL or TP bracket to an existing level at an auto-computed default price.
+   * Use this when an external panel enables a bracket without knowing the price.
+   * The chart places the bracket at the same offset used by the canvas +SL/+TP button
+   * and emits `tradeLevelBracketActivated` with the chosen price so the panel can populate its input.
+   * No-op if the level doesn't exist or already has the requested bracket.
+   */
+  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 { priceH } = this.getChartLayout();
+    const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
+    const entryY = this.scaleManager.yToPixel(level.price, priceRange, priceH);
+    const side = level.side ?? "buy";
+    const isBelowEntry = side === "buy" && type === "sl" || side === "sell" && type === "tp";
+    const bracketY = entryY + (isBelowEntry ? 30 : -30);
+    const defaultPrice = this.scaleManager.pixelToPrice(bracketY, priceRange, priceH);
+    this.updateLevelBracket(label, type, defaultPrice);
+    this.emitter.emit("tradeLevelBracketActivated", {
+      label,
+      bracketType: type,
+      price: defaultPrice,
+      isFullscreen: this.isFullscreen
+    });
+    return this;
+  }
   /**
    * Move an existing level's entry price line to a new price and re-render.
    * Used when an external panel updates the entry price for an open position or pending order.
@@ -18821,6 +18903,21 @@ 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.
+   * 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 {
+      this.draftBracketPnl = { ...this.draftBracketPnl, tp: pnlText ?? void 0 };
+    }
+    this.renderTradeLayer();
+    return this;
+  }
   /**
    * Update the stop-loss or take-profit price on the current draft order.
    * Pass `null` to remove the bracket. No-op if no draft order is active.
@@ -19079,7 +19176,8 @@ var _ChartEngine = class _ChartEngine {
           positionRenderStyle: this.positionRenderStyle,
           theme: this.themeName
         },
-        this.labels.dialogs
+        this.labels.dialogs,
+        !!this._onOrderSubmit
       );
       this.getFloatingRoot().appendChild(this.chartSettingsDialog.el);
     }
@@ -19269,7 +19367,9 @@ var _ChartEngine = class _ChartEngine {
       this.selectedTradeLabel,
       new Set(this.pendingLevelDrags.keys()),
       this.positionRenderStyle,
-      this.hideLevelConfirmCancel
+      this.hideLevelConfirmCancel,
+      this.draftOrderLabel,
+      this.draftBracketPnl
     );
     ctx.restore();
     ctx.restore();
@@ -19348,6 +19448,10 @@ var _ChartEngine = class _ChartEngine {
     filtered.push({ field, newPrice: result.newPrice, oldPrice, isNew, bracketOrderLabel });
     this.pendingLevelDrags.set(result.label, filtered);
     this.tradeDragNewPrice = null;
+    if (this.hideLevelConfirmCancel) {
+      this.applyPendingChanges(result.label);
+      return;
+    }
     this.renderTradeLayer();
   }
   createDraftOrder(side, price, orderType) {
@@ -19383,6 +19487,7 @@ var _ChartEngine = class _ChartEngine {
     this.pendingLevelDrags.delete(label);
     this.selectedTradeLabel = null;
     this.draftOrderLabel = null;
+    this.draftBracketPnl = {};
     this.draftOrderQtyInput?.hide();
     this.renderTradeLayer();
     this.emitter.emit("draftCancelled", { label, isFullscreen: this.isFullscreen });