acttrader-charts 1.0.19 → 1.0.21

package/dist/index.cjs

@@ -264,6 +264,8 @@ function resolveCssVarsInTheme(theme, container) {
       dropdownHoverBg: resolve(theme.indicatorOverlay.dropdownHoverBg)
     },
     tradeLevels: {
+      buySide: resolve(theme.tradeLevels.buySide),
+      sellSide: resolve(theme.tradeLevels.sellSide),
       tradeLine: resolve(theme.tradeLevels.tradeLine),
       positionLine: resolve(theme.tradeLevels.positionLine),
       pendingBuyLine: resolve(theme.tradeLevels.pendingBuyLine),
@@ -340,6 +342,8 @@ var DARK_THEME = {
     dropdownHoverBg: "#1c2a35"
   },
   tradeLevels: {
+    buySide: "#26a69a",
+    sellSide: "#ef5350",
     tradeLine: "#5caf79",
     positionLine: "#7b61ff",
     pendingBuyLine: "rgba(92,175,121,0.75)",
@@ -412,6 +416,8 @@ var LIGHT_THEME = {
     dropdownHoverBg: "#f0f0f0"
   },
   tradeLevels: {
+    buySide: "#26a69a",
+    sellSide: "#ef5350",
     tradeLine: "#5caf79",
     positionLine: "#6d28d9",
     pendingBuyLine: "rgba(92,175,121,0.75)",
@@ -697,6 +703,7 @@ var DEFAULT_LABELS = {
     limit: "Limit",
     stop: "Stop",
     market: "Market",
+    at: "at",
     qty: "Qty",
     placeOrderTitle: "Place order at this price"
   },
@@ -1672,16 +1679,18 @@ function computeFanOutLayout(cluster, boxH, gapPx = 4) {
   return result;
 }
 function buildClusterBadgeLayout(cluster, chartW, ctx) {
-  const n = cluster.members.length;
-  const types = new Set(cluster.members.map((m) => m.level.type));
-  let noun;
-  if (types.size === 1) {
-    const t = types.values().next().value;
-    noun = t === "position" ? "Position" : t === "pending" ? "Order" : "Trade";
-  } else {
-    noun = "Level";
-  }
-  const text = `${n} ${noun}${n > 1 ? "s" : ""}`;
+  const posCount = cluster.members.filter(
+    (m) => m.level.type === "position" && !m.level.entryPriceEditable
+  ).length;
+  const orderCount = cluster.members.filter(
+    (m) => m.level.type === "pending" || m.level.entryPriceEditable === true
+  ).length;
+  const tradeCount = cluster.members.filter((m) => m.level.type === "trade").length;
+  const parts = [];
+  if (posCount > 0) parts.push(`${posCount} Position${posCount > 1 ? "s" : ""}`);
+  if (orderCount > 0) parts.push(`${orderCount} Order${orderCount > 1 ? "s" : ""}`);
+  if (tradeCount > 0) parts.push(`${tradeCount} Trade${tradeCount > 1 ? "s" : ""}`);
+  const text = parts.join(" / ");
   const PAD_X = 12;
   const textW = ctx.measureText(text).width;
   const EXPAND_ICON_W = 16;
@@ -2089,6 +2098,22 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
       const offMainDragActive = draggingLabel === offLevel.label;
       const offSlPrice = offMainDragActive && dragNewSLPrice !== null ? dragNewSLPrice : bh.stopLossPrice;
       const offTpPrice = offMainDragActive && dragNewTPPrice !== null ? dragNewTPPrice : bh.takeProfitPrice;
+      if (offSlPrice !== void 0 && offTpPrice !== void 0) {
+        const slY = scale.yToPixel(offSlPrice, priceRange, priceH);
+        const tpY = scale.yToPixel(offTpPrice, priceRange, priceH);
+        const bracketBH = Math.max(BRACKET_BOX_H, CLOSE_R * 2 + BRACKET_BOX_PAD_Y * 2);
+        ctx.save();
+        ctx.font = FONT_BRACKET;
+        const closeSlot = CLOSE_R * 2 + BRACKET_BOX_PAD_X / 2;
+        const slBW = BRACKET_BOX_PAD_X + ctx.measureText(`SL ${offSlPrice.toFixed(precision)}`).width + BRACKET_BOX_PAD_X + closeSlot;
+        const tpBW = BRACKET_BOX_PAD_X + ctx.measureText(`TP ${offTpPrice.toFixed(precision)}`).width + BRACKET_BOX_PAD_X + closeSlot;
+        ctx.restore();
+        const connX = ((bracketLineXMap.get(slDragKey) ?? fallbackX) - slBW / 2 - 2 + ((bracketLineXMap.get(tpDragKey) ?? fallbackX) - tpBW / 2 - 2)) / 2;
+        const slPillY = bracketBoxYMap.get(slDragKey) ?? slY - bracketBH / 2;
+        const tpPillY = bracketBoxYMap.get(tpDragKey) ?? tpY - bracketBH / 2;
+        const [upperY, lowerY] = tpPillY < slPillY ? [tpPillY, slPillY] : [slPillY, tpPillY];
+        drawSLTPConnector(ctx, connX, upperY + bracketBH, lowerY, theme);
+      }
       if (offSlPrice !== void 0) {
         drawBracketLine(
           ctx,
@@ -2222,6 +2247,20 @@ function drawFanConnector(ctx, fanCenterY, realY, chartW, theme) {
   ctx.stroke();
   ctx.restore();
 }
+function drawSLTPConnector(ctx, x, yTop, yBottom, theme) {
+  if (yBottom - yTop < 2) return;
+  ctx.save();
+  ctx.strokeStyle = monoColor(theme);
+  ctx.globalAlpha = 0.5;
+  ctx.lineWidth = 1;
+  ctx.setLineDash([3, 4]);
+  ctx.beginPath();
+  ctx.moveTo(x, yTop);
+  ctx.lineTo(x, yBottom);
+  ctx.stroke();
+  ctx.setLineDash([]);
+  ctx.restore();
+}
 function drawDotHoverBox(ctx, level, y, dotX, dotR, theme, precision) {
   const pl = level;
   const rows = [];
@@ -2333,6 +2372,24 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
     const mainDragActive = draggingLabel === level.label;
     const slRenderPrice = mainDragActive && dragNewSLPrice !== null ? dragNewSLPrice : bracketHost.stopLossPrice;
     const tpRenderPrice = mainDragActive && dragNewTPPrice !== null ? dragNewTPPrice : bracketHost.takeProfitPrice;
+    if (selected && slRenderPrice !== void 0 && tpRenderPrice !== void 0) {
+      const slY = scale.yToPixel(slRenderPrice, priceRange, priceH);
+      const tpY = scale.yToPixel(tpRenderPrice, priceRange, priceH);
+      const bracketBH = hideConfirmCancel ? BRACKET_BOX_H : Math.max(BRACKET_BOX_H, closeR * 2 + BRACKET_BOX_PAD_Y * 2);
+      ctx.save();
+      ctx.font = FONT_BRACKET;
+      const closeSlot = hideConfirmCancel ? 0 : closeR * 2 + BRACKET_BOX_PAD_X / 2;
+      const slBW = BRACKET_BOX_PAD_X + ctx.measureText(`SL ${slRenderPrice.toFixed(precision)}`).width + BRACKET_BOX_PAD_X + closeSlot;
+      const tpBW = BRACKET_BOX_PAD_X + ctx.measureText(`TP ${tpRenderPrice.toFixed(precision)}`).width + BRACKET_BOX_PAD_X + closeSlot;
+      ctx.restore();
+      const slBLineX = bracketLineXMap.get(slDragKey) ?? chartW * BRACKET_BASE_RATIO;
+      const tpBLineX = bracketLineXMap.get(tpDragKey) ?? chartW * BRACKET_BASE_RATIO;
+      const connX = (slBLineX - slBW / 2 - 2 + (tpBLineX - tpBW / 2 - 2)) / 2;
+      const slPillY = bracketBoxYMap?.get(slDragKey) ?? slY - bracketBH / 2;
+      const tpPillY = bracketBoxYMap?.get(tpDragKey) ?? tpY - bracketBH / 2;
+      const [upperY, lowerY] = tpPillY < slPillY ? [tpPillY, slPillY] : [slPillY, tpPillY];
+      drawSLTPConnector(ctx, connX, upperY + bracketBH, lowerY, theme);
+    }
     if (slRenderPrice !== void 0) {
       const bLineX = bracketLineXMap.get(slDragKey) ?? chartW * BRACKET_BASE_RATIO;
       drawBracketLine(
@@ -11331,6 +11388,14 @@ var DrawingManager = class {
     this.onDrawingsChange = null;
     /** Called when a text-type drawing is first completed — ChartEngine shows the text input. */
     this.onStartTextEdit = null;
+    /**
+     * Called after drag/resize mutates a drawing's points so ChartEngine can
+     * refresh each point's `timestamp` from the current dataStore. Required
+     * because DrawingManager has no access to the data layer, and drag
+     * reconstructs points from raw (barIndex, price) deltas that strip the
+     * original point's timestamp.
+     */
+    this.onPointsMutated = null;
     /** Set to true by ChartEngine while the text input is focused — prevents Delete/Backspace from deleting the drawing. */
     this.editingText = false;
     // Drag state (move whole drawing)
@@ -11425,14 +11490,18 @@ var DrawingManager = class {
       const dBar = point.barIndex - this.dragStartMouse.barIndex;
       const dPrice = point.price - this.dragStartMouse.price;
       for (let i = 0; i < this.dragDrawing.points.length; i++) {
+        const start = this.dragStartPoints[i];
+        if (!start) continue;
         this.dragDrawing.points[i] = {
-          barIndex: this.dragStartPoints[i].barIndex + dBar,
-          price: this.dragStartPoints[i].price + dPrice
+          barIndex: start.barIndex + dBar,
+          price: start.price + dPrice
         };
       }
+      this.onPointsMutated?.(this.dragDrawing);
     }
     if (this.resizeDrawing && this.resizePointIndex >= 0) {
       this.resizeDrawing.points[this.resizePointIndex] = { ...point };
+      this.onPointsMutated?.(this.resizeDrawing);
     }
   }
   /**
@@ -13189,8 +13258,8 @@ var TradeButton = class {
       this.el.style.opacity = "1";
       Object.assign(this.el.style, {
         background: theme.tooltip.background,
-        color: "#26a69a",
-        border: "1px solid #26a69a"
+        color: theme.tradeLevels.buySide,
+        border: `1px solid ${theme.tradeLevels.buySide}`
       });
     });
     this.el.addEventListener("mouseleave", (e) => {
@@ -13253,11 +13322,12 @@ var TradeButton = class {
 
 // src/ui/TradePopover.ts
 var TradePopover = class {
-  constructor(theme, lots, onDraftCreate, labels = DEFAULT_LABELS.trade, onVisibilityChange) {
+  constructor(theme, lots, symbol, onDraftCreate, labels = DEFAULT_LABELS.trade, onVisibilityChange) {
     this._price = 0;
     this._pricePrecision = 2;
     this._buyOrderType = "limit";
     this._sellOrderType = "limit";
+    this._compact = false;
     this.onDocMouseDown = (e) => {
       if (this.isVisible && !this.el.contains(e.target)) {
         this.hide();
@@ -13265,6 +13335,7 @@ var TradePopover = class {
     };
     this.theme = theme;
     this.lots = lots;
+    this.symbol = symbol;
     this.onDraftCreate = onDraftCreate;
     this.labels = labels;
     this.onVisibilityChange = onVisibilityChange;
@@ -13273,7 +13344,6 @@ var TradePopover = class {
       position: "absolute",
       display: "none",
       flexDirection: "column",
-      gap: "1px",
       background: theme.tooltip.background,
       border: `1px solid ${theme.axisBorder}`,
       borderRadius: "5px",
@@ -13282,7 +13352,7 @@ var TradePopover = class {
       boxShadow: "0 4px 16px rgba(0,0,0,0.25)",
       fontFamily: "'Inter', system-ui, sans-serif",
       fontSize: "12px",
-      minWidth: "140px",
+      width: "max-content",
       pointerEvents: "auto"
     });
     document.addEventListener("mousedown", this.onDocMouseDown);
@@ -13296,10 +13366,8 @@ var TradePopover = class {
     this._sellOrderType = sellOrderType;
     this.rebuild();
     this.el.style.display = "flex";
-    const popW = 145;
     this.el.style.right = `${buttonRight}px`;
     this.el.style.top = `${buttonY - 16}px`;
-    this.el.style.width = `${popW}px`;
     if (!wasVisible) this.onVisibilityChange?.();
   }
   hide() {
@@ -13313,6 +13381,12 @@ var TradePopover = class {
   setLots(lots) {
     this.lots = lots;
   }
+  setSymbol(symbol) {
+    this.symbol = symbol;
+  }
+  setCompact(compact) {
+    this._compact = compact;
+  }
   setTheme(theme) {
     this.theme = theme;
     Object.assign(this.el.style, {
@@ -13326,31 +13400,46 @@ var TradePopover = class {
   // ── Private ───────────────────────────────────────────────────────────────
   rebuild() {
     this.el.innerHTML = "";
+    const divider = document.createElement("div");
+    Object.assign(divider.style, {
+      height: "1px",
+      background: this.theme.axisBorder,
+      margin: "0 8px"
+    });
     this.el.append(
-      this.makeRow(this.labels.buy, "#26a69a", "buy", this._buyOrderType),
-      this.makeRow(this.labels.sell, "#ef5350", "sell", this._sellOrderType)
+      this.makeRow(this.theme.tradeLevels.sellSide, "sell", this._sellOrderType),
+      divider,
+      this.makeRow(this.theme.tradeLevels.buySide, "buy", this._buyOrderType)
     );
   }
-  makeRow(label, color, side, orderType) {
+  makeRow(color, side, orderType) {
     const btn = document.createElement("button");
-    const priceStr = this._price.toFixed(this._pricePrecision);
-    btn.textContent = `${label} ${orderType === "limit" ? this.labels.limit : this.labels.stop}  ${priceStr}`;
     Object.assign(btn.style, {
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
       width: "100%",
       background: "transparent",
-      color,
       border: "none",
       borderRadius: "3px",
-      padding: "7px 10px",
-      textAlign: "left",
+      padding: this._compact ? "5px 8px" : "8px 10px",
       cursor: "pointer",
-      fontSize: "12px",
       fontFamily: "'Inter', system-ui, sans-serif",
-      fontWeight: "600"
+      fontSize: this._compact ? "11px" : "12px"
     });
+    btn.appendChild(this.makeChevron(color, side));
+    const sideLabel = side === "sell" ? this.labels.sell : this.labels.buy;
+    const orderTypeLabel = orderType === "limit" ? this.labels.limit : this.labels.stop;
+    const priceStr = this._price.toFixed(this._pricePrecision);
+    const colored = document.createElement("span");
+    colored.textContent = `${sideLabel} ${orderTypeLabel}`;
+    Object.assign(colored.style, { color, fontWeight: "600" });
+    const plain = document.createElement("span");
+    plain.textContent = ` ${this.lots} ${this.symbol} ${this.labels.at} ${priceStr}`;
+    Object.assign(plain.style, { color: "#ffffff", fontWeight: "400" });
+    btn.append(colored, plain);
     btn.addEventListener("mouseenter", () => {
-      btn.style.background = color + "22";
+      btn.style.background = "rgba(255,255,255,0.06)";
     });
     btn.addEventListener("mouseleave", () => {
       btn.style.background = "transparent";
@@ -13362,6 +13451,23 @@ var TradePopover = class {
     });
     return btn;
   }
+  makeChevron(color, side) {
+    const ns = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(ns, "svg");
+    svg.setAttribute("width", "10");
+    svg.setAttribute("height", "8");
+    svg.setAttribute("viewBox", "0 0 10 8");
+    svg.style.flexShrink = "0";
+    const path = document.createElementNS(ns, "path");
+    path.setAttribute("d", side === "sell" ? "M1 1 L5 7 L9 1" : "M1 7 L5 1 L9 7");
+    path.setAttribute("stroke", color);
+    path.setAttribute("fill", "none");
+    path.setAttribute("stroke-width", "1.5");
+    path.setAttribute("stroke-linecap", "round");
+    path.setAttribute("stroke-linejoin", "round");
+    svg.appendChild(path);
+    return svg;
+  }
 };
 
 // src/ui/DraftQtyFlyout.ts
@@ -17572,6 +17678,13 @@ var _ChartEngine = class _ChartEngine {
     /** Pending resize — committed only after mouse moves past DRAW_GESTURE_THRESHOLD. */
     this._pendingDrawResize = null;
     // px
+    /**
+     * Pending trade-level drag — committed only after mouse moves past TRADE_DRAG_PIXEL_THRESHOLD.
+     * A mouseup before the threshold means it was a click: route to _openTradeLevelEditForm instead
+     * of finishing a zero-delta drag (which would otherwise stage a spurious pending change).
+     */
+    this._pendingTradeDrag = null;
+    // px
     // Pane resize
     this.paneHeightOverrides = /* @__PURE__ */ new Map();
     this.separatorDrag = null;
@@ -17587,6 +17700,21 @@ var _ChartEngine = class _ChartEngine {
     // lerp target; null = snap on next render
     this._lockedAutoFitBase = null;
     // non-null = user has manually adjusted Y-axis
+    /**
+     * When setState() restores a persisted viewport but data isn't loaded yet,
+     * we stash the desired time window here and apply it from loadData() once
+     * bars are available. Cleared after one application.
+     */
+    this._pendingViewportRestore = null;
+    /**
+     * Debounces viewport/priceScale stateChange emissions during continuous
+     * gestures (pan, wheel-zoom, price-scale drag). Pan/zoom don't emit
+     * stateChange directly because doing so per-frame would be wasteful; this
+     * timer coalesces bursts so the persisted viewport catches up a few ms
+     * after the user stops interacting. Paired with the consumer's own
+     * debounce (e.g. CRM's 800ms save) for minimal traffic.
+     */
+    this._viewportPersistTimer = null;
     this.axisDrag = null;
     this.subPaneScaleFactors = /* @__PURE__ */ new Map();
     this._mobileCrosshairActive = false;
@@ -17747,14 +17875,14 @@ var _ChartEngine = class _ChartEngine {
         const dx = x - this._pendingDrawDrag.startX;
         const dy = y - this._pendingDrawDrag.startY;
         if (Math.sqrt(dx * dx + dy * dy) > _ChartEngine.DRAW_GESTURE_THRESHOLD) {
-          this.drawingManager.startDrag(this._pendingDrawDrag.drawing, {
-            barIndex: rawBarIndex,
-            price
-          });
+          this.drawingManager.startDrag(
+            this._pendingDrawDrag.drawing,
+            this.makeDrawingPoint(rawBarIndex, price)
+          );
           this._pendingDrawDrag = null;
         }
       }
-      this.drawingManager.onMouseMove({ barIndex: rawBarIndex, price });
+      this.drawingManager.onMouseMove(this.makeDrawingPoint(rawBarIndex, price));
       if (this.axisDrag) {
         if (this.axisDrag.axis === "price") {
           const delta = y - this.axisDrag.startPos;
@@ -17796,6 +17924,18 @@ var _ChartEngine = class _ChartEngine {
         this.scheduleRender();
         return;
       }
+      if (this._pendingTradeDrag) {
+        const dx = x - this._pendingTradeDrag.startX;
+        const dy = y - this._pendingTradeDrag.startY;
+        if (Math.sqrt(dx * dx + dy * dy) > _ChartEngine.TRADE_DRAG_PIXEL_THRESHOLD) {
+          const { dragHit, level, hitY } = this._pendingTradeDrag;
+          this._pendingTradeDrag = null;
+          this._startTradeDragFromHit(dragHit, level, hitY);
+          this.drawCanvas.style.cursor = "ns-resize";
+        } else {
+          return;
+        }
+      }
       if (this.tradeDragHandler?.active) {
         const moveResult = this.tradeDragHandler.onMouseMove(
           y,
@@ -17836,6 +17976,10 @@ var _ChartEngine = class _ChartEngine {
         const dragHover = hitTestTradeLevelDrag(x, y, this.tradeLevelDragAreas);
         if (dragHover) {
           this.drawCanvas.style.cursor = "ns-resize";
+          if (dragHover.label !== this.hoveredTradeLabel) {
+            this.hoveredTradeLabel = dragHover.label;
+            this.renderTradeLayer();
+          }
           this.scheduleRender();
           return;
         }
@@ -17905,6 +18049,16 @@ var _ChartEngine = class _ChartEngine {
       this.scheduleRender();
     };
     this.onMouseUp = () => {
+      if (this._pendingTradeDrag) {
+        const { level } = this._pendingTradeDrag;
+        this._pendingTradeDrag = null;
+        if (this._editOpenLabel === level.label && !this.pendingLevelDrags.has(level.label)) {
+          this._cancelEditAndDeselect(level.label);
+          return;
+        }
+        this._openTradeLevelEditForm(level);
+        return;
+      }
       if (this.tradeDragHandler?.active) {
         const result = this.tradeDragHandler.endDrag();
         if (result) {
@@ -17921,9 +18075,11 @@ var _ChartEngine = class _ChartEngine {
         return;
       }
       if (this.axisDrag) {
+        const wasPriceAxis = this.axisDrag.axis === "price" || this.axisDrag.axis === "time";
         this.axisDrag = null;
         this.drawCanvas.style.cursor = "default";
         this.scheduleRender();
+        if (wasPriceAxis) this.scheduleViewportPersist();
       }
       if (this.separatorDrag) {
         this.separatorDrag = null;
@@ -18085,22 +18241,7 @@ var _ChartEngine = class _ChartEngine {
         if (editHit) {
           e.preventDefault();
           const level = this.levels.find((l) => l.label === editHit.label);
-          if (level) {
-            this.selectedTradeLabel = level.label;
-            this.renderTradeLayer();
-            const { slPrice: _slE, tpPrice: _tpE } = this._resolveBracketPrices(level);
-            this._editOpenLabel = level.label;
-            this.emitter.emit("tradeLevelEditOpen", {
-              label: level.label,
-              type: level.type,
-              data: level.data,
-              price: level.price,
-              side: level.side,
-              stopLossPrice: _slE,
-              takeProfitPrice: _tpE,
-              isFullscreen: this.isFullscreen
-            });
-          }
+          if (level) this._openTradeLevelEditForm(level);
           return;
         }
       }
@@ -18115,23 +18256,10 @@ var _ChartEngine = class _ChartEngine {
             if (this.hideLevelConfirmCancel && !isMobileDraggable) {
               const hasPending = this.pendingLevelDrags.has(level.label);
               if (this.selectedTradeLabel === level.label && !hasPending) {
-                this.selectedTradeLabel = null;
-              } else {
-                this.selectedTradeLabel = level.label;
+                this._cancelEditAndDeselect(level.label);
+                return;
               }
-              this.renderTradeLayer();
-              const { slPrice: _sl1, tpPrice: _tp1 } = this._resolveBracketPrices(level);
-              this._editOpenLabel = level.label;
-              this.emitter.emit("tradeLevelEditOpen", {
-                label: level.label,
-                type: level.type,
-                data: level.data,
-                price: level.price,
-                side: level.side,
-                stopLossPrice: _sl1,
-                takeProfitPrice: _tp1,
-                isFullscreen: this.isFullscreen
-              });
+              this._openTradeLevelEditForm(level);
               return;
             }
             this._startTradeDragFromHit(dragHit, level, y);
@@ -18155,23 +18283,10 @@ var _ChartEngine = class _ChartEngine {
           if (level) {
             const hasPending = this.pendingLevelDrags.has(hoverHit.label);
             if (this.selectedTradeLabel === hoverHit.label && !hasPending) {
-              this.selectedTradeLabel = null;
-            } else {
-              this.selectedTradeLabel = hoverHit.label;
+              this._cancelEditAndDeselect(hoverHit.label);
+              return;
             }
-            const { slPrice: _slH, tpPrice: _tpH } = this._resolveBracketPrices(level);
-            this._editOpenLabel = level.label;
-            this.renderTradeLayer();
-            this.emitter.emit("tradeLevelEditOpen", {
-              label: level.label,
-              type: level.type,
-              data: level.data,
-              price: level.price,
-              side: level.side,
-              stopLossPrice: _slH,
-              takeProfitPrice: _tpH,
-              isFullscreen: this.isFullscreen
-            });
+            this._openTradeLevelEditForm(level);
             return;
           }
         }
@@ -18370,8 +18485,10 @@ var _ChartEngine = class _ChartEngine {
         return;
       }
       if (this.axisDrag) {
+        const wasPriceAxis = this.axisDrag.axis === "price" || this.axisDrag.axis === "time";
         this.axisDrag = null;
         this.scheduleRender();
+        if (wasPriceAxis) this.scheduleViewportPersist();
         return;
       }
       const wasAnchorTouch = this._drawTouchAnchorActive;
@@ -18456,22 +18573,7 @@ var _ChartEngine = class _ChartEngine {
         const editHit = hitTestTradeLevelEdit(x, y, this.tradeLevelEditAreas);
         if (editHit) {
           const level = this.levels.find((l) => l.label === editHit.label);
-          if (level) {
-            this.selectedTradeLabel = level.label;
-            this.renderTradeLayer();
-            const { slPrice: _sl2, tpPrice: _tp2 } = this._resolveBracketPrices(level);
-            this._editOpenLabel = level.label;
-            this.emitter.emit("tradeLevelEditOpen", {
-              label: level.label,
-              type: level.type,
-              data: level.data,
-              price: level.price,
-              side: level.side,
-              stopLossPrice: _sl2,
-              takeProfitPrice: _tp2,
-              isFullscreen: this.isFullscreen
-            });
-          }
+          if (level) this._openTradeLevelEditForm(level);
           return;
         }
       }
@@ -18489,8 +18591,7 @@ var _ChartEngine = class _ChartEngine {
           const level = this.levels.find((l) => l.label === dragHit.label);
           if (level) {
             if (!(this.hideLevelConfirmCancel && !dragHit.isBracket)) {
-              this._startTradeDragFromHit(dragHit, level, y);
-              this.drawCanvas.style.cursor = "ns-resize";
+              this._pendingTradeDrag = { dragHit, level, hitY: y, startX: x, startY: y };
               return;
             }
           }
@@ -18500,49 +18601,24 @@ var _ChartEngine = class _ChartEngine {
       if (hoverHit) {
         const hasPending = this.pendingLevelDrags.has(hoverHit.label);
         if (this.selectedTradeLabel === hoverHit.label && !hasPending) {
-          this.selectedTradeLabel = null;
+          this._cancelEditAndDeselect(hoverHit.label);
+          return;
+        }
+        const level = this.levels.find((l) => l.label === hoverHit.label);
+        if (level) {
+          this._openTradeLevelEditForm(level);
         } else {
           this.selectedTradeLabel = hoverHit.label;
-        }
-        this.renderTradeLayer();
-        if (this.hideLevelConfirmCancel) {
-          const level = this.levels.find((l) => l.label === hoverHit.label);
-          if (level) {
-            const { slPrice: _sl3, tpPrice: _tp3 } = this._resolveBracketPrices(level);
-            this._editOpenLabel = level.label;
-            this.emitter.emit("tradeLevelEditOpen", {
-              label: level.label,
-              type: level.type,
-              data: level.data,
-              price: level.price,
-              side: level.side,
-              stopLossPrice: _sl3,
-              takeProfitPrice: _tp3,
-              isFullscreen: this.isFullscreen
-            });
-          }
+          this.renderTradeLayer();
         }
         return;
       } else if (this.selectedTradeLabel !== null) {
         if (!this.hideLevelConfirmCancel) {
           const lbl = this.selectedTradeLabel;
           const pending = this.pendingLevelDrags.get(lbl);
-          const isEditFormOpen = this._editOpenLabel === lbl;
           if (!pending || pending.length === 0) {
-            if (isEditFormOpen) {
-              const lvl = this.levels.find((l) => l.label === lbl);
-              this._editOpenLabel = null;
-              if (lvl) {
-                this.emitter.emit("tradeLevelEditCancelled", {
-                  label: lbl,
-                  type: lvl.type,
-                  isFullscreen: this.isFullscreen
-                });
-              }
-            }
-            this.selectedTradeLabel = null;
-            this.renderTradeLayer();
-          } else if (pending.every((c) => c.isNew)) {
+            this._cancelEditAndDeselect(lbl);
+          } else {
             this.revertPendingChanges(lbl);
           }
         }
@@ -18597,10 +18673,9 @@ var _ChartEngine = class _ChartEngine {
         this.scheduleRender();
         return;
       }
-      const consumed = this.drawingManager.onMouseDown({
-        barIndex: rawBarIndex,
-        price
-      });
+      const consumed = this.drawingManager.onMouseDown(
+        this.makeDrawingPoint(rawBarIndex, price)
+      );
       if (!consumed) {
         const handleHit = this.drawingManager.getHandleAtPoint(
           x,
@@ -19195,6 +19270,7 @@ var _ChartEngine = class _ChartEngine {
       this.tradePopover = new TradePopover(
         this.theme,
         0.01,
+        this.symbol,
         (side, price, orderType) => {
           this.createDraftOrder(side, price, orderType);
         },
@@ -19298,6 +19374,12 @@ var _ChartEngine = class _ChartEngine {
       this.drawCanvas.style.cursor = "default";
     });
     this.drawingManager.onDrawingsChange = () => this.emitStateChange();
+    this.drawingManager.onPointsMutated = (drawing) => {
+      for (const pt of drawing.points) {
+        const t = this.barIndexToTimestamp(pt.barIndex);
+        if (t != null) pt.timestamp = t;
+      }
+    };
     this.drawingManager.onStartTextEdit = (drawing) => this.showTextInput(drawing);
     this.panHandler = new PanHandler(
       this.drawCanvas,
@@ -19307,16 +19389,19 @@ var _ChartEngine = class _ChartEngine {
         this.clearDuration();
         this.checkNeedMoreData();
         this.scheduleRender();
+        this.scheduleViewportPersist();
       },
       () => this.dataStore.length,
       () => this.scheduleRender(),
       () => this.drawingManager.getActiveTool() !== null || this.drawingManager.isDraggingDrawing() || this.drawingManager.isResizingDrawing() || this.separatorDrag !== null || this.axisDrag !== null || (this.tradeDragHandler?.active ?? false) || this._mobileCrosshairActive,
       (deltaY) => {
+        if (this.priceScaleFactor === 1) return;
         const { priceH } = this.getChartLayout();
         const currentRange = this._displayedPriceRange ?? this.getScaledPriceRange(this._targetViewport);
         const pricePerPixel = (currentRange.max - currentRange.min) / priceH;
         this.pricePanOffset += deltaY * pricePerPixel;
         this.scheduleRender();
+        this.scheduleViewportPersist();
       },
       () => {
         this._isPanning = true;
@@ -19339,6 +19424,7 @@ var _ChartEngine = class _ChartEngine {
         this.clearDuration();
         this.checkNeedMoreData();
         this.scheduleRender();
+        this.scheduleViewportPersist();
       },
       () => this.dataStore.length,
       () => this.scheduleRender(),
@@ -19359,6 +19445,7 @@ var _ChartEngine = class _ChartEngine {
         this.clearDuration();
         this.checkNeedMoreData();
         this.scheduleRender();
+        this.scheduleViewportPersist();
       }
     );
     this.drawCanvas.addEventListener("mousemove", this.onMouseMove);
@@ -19396,6 +19483,15 @@ var _ChartEngine = class _ChartEngine {
       return true;
     }).map((s) => s.indicator);
   }
+  /** Schedules a stateChange emission so viewport/priceScale changes made by
+   *  pan/zoom/price-scale drag reach persistence. Coalesces rapid calls. */
+  scheduleViewportPersist() {
+    if (this._viewportPersistTimer) clearTimeout(this._viewportPersistTimer);
+    this._viewportPersistTimer = setTimeout(() => {
+      this._viewportPersistTimer = null;
+      this.emitStateChange();
+    }, 500);
+  }
   get isFullscreen() {
     return this._isCssFullscreen || !!document.fullscreenElement;
   }
@@ -19487,6 +19583,22 @@ var _ChartEngine = class _ChartEngine {
     }
     this.recomputeIndicators();
     this.reanchorDrawingsByTimestamp();
+    if (this._pendingViewportRestore) {
+      const pending = this._pendingViewportRestore;
+      this._pendingViewportRestore = null;
+      if (pending.priceScale) {
+        this.priceScaleFactor = pending.priceScale.factor;
+        this.pricePanOffset = pending.priceScale.panOffset;
+        this._displayedPriceRange = null;
+        this._lockedAutoFitBase = null;
+      }
+      if (pending.viewport) {
+        this.applyViewportFromTimestamps(
+          pending.viewport.startTime,
+          pending.viewport.endTime
+        );
+      }
+    }
     this.updateCountdownState();
     this.scheduleRender();
     return this;
@@ -19507,6 +19619,7 @@ var _ChartEngine = class _ChartEngine {
       };
       this._targetViewport = { ...this.viewport };
       this.drawingManager.shiftBarIndices(n);
+      this.reanchorDrawingsByTimestamp();
       this.recomputeIndicators();
       this.scheduleRender();
     }
@@ -20030,15 +20143,44 @@ var _ChartEngine = class _ChartEngine {
         ...d,
         points: d.points.map((p) => ({
           ...p,
-          timestamp: this.dataStore.all[Math.floor(p.barIndex)]?.time
+          // Prefer the point's own timestamp (captured at placement / drag /
+          // resize); only derive from current bars as a fallback for legacy
+          // points. Re-deriving on every export would otherwise corrupt the
+          // anchor after a timeframe change has staled the cached barIndex.
+          timestamp: p.timestamp ?? this.barIndexToTimestamp(p.barIndex)
         }))
       })),
       positionRenderStyle: this.positionRenderStyle,
       tradeDisplayFilter: this.tradeDisplayFilter,
       canvasColors: Object.keys(this.settingsCanvasColors).length > 0 ? { ...this.settingsCanvasColors } : void 0,
-      tfcEnabled: this.tfcActive
+      tfcEnabled: this.tfcActive,
+      viewport: this.getViewportTimestamps(),
+      priceScale: this.priceScaleFactor !== 1 || this.pricePanOffset !== 0 ? { factor: this.priceScaleFactor, panOffset: this.pricePanOffset } : void 0
     };
   }
+  /**
+   * Captures the current viewport as a {startTime, endTime} timestamp pair,
+   * preserving sub-bar fractional position. Returns undefined only when no
+   * bars are loaded (viewport has no meaningful time anchor).
+   */
+  getViewportTimestamps() {
+    if (this.dataStore.all.length === 0) return void 0;
+    const startTime = this.barIndexToTimestamp(this.viewport.startIndex);
+    const endTime = this.barIndexToTimestamp(this.viewport.endIndex);
+    if (startTime == null || endTime == null) return void 0;
+    return { startTime, endTime };
+  }
+  /**
+   * Restores the viewport from a timestamp pair, converting each edge back
+   * into a fractional bar index relative to the current dataStore. Callers
+   * must ensure bars are loaded before invoking.
+   */
+  applyViewportFromTimestamps(startTime, endTime) {
+    const startIndex = this.timestampToBarIndex(startTime);
+    const endIndex = this.timestampToBarIndex(endTime);
+    this.viewport = { ...this.viewport, startIndex, endIndex };
+    this._targetViewport = { ...this.viewport };
+  }
   /**
    * Restores chart configuration from a previously captured `ChartState`.
    * Call this after construction to hydrate a chart from persisted state.
@@ -20085,18 +20227,11 @@ var _ChartEngine = class _ChartEngine {
           }
         }
       }
-      const bars = this.dataStore.all;
       const resolvedDrawings = state.drawings.map((d) => ({
         ...d,
         points: d.points.map((p) => {
-          if (!p.timestamp || bars.length === 0) return p;
-          let lo = 0, hi = bars.length - 1;
-          while (lo < hi) {
-            const mid = lo + hi >> 1;
-            if ((bars[mid]?.time ?? 0) < p.timestamp) lo = mid + 1;
-            else hi = mid;
-          }
-          return { ...p, barIndex: lo + (p.barIndex - Math.floor(p.barIndex)) };
+          if (p.timestamp == null || this.dataStore.all.length === 0) return p;
+          return { ...p, barIndex: this.timestampToBarIndex(p.timestamp) };
         })
       }));
       this.drawingManager.loadDrawings(resolvedDrawings);
@@ -20114,6 +20249,25 @@ var _ChartEngine = class _ChartEngine {
         this.tfcActive = state.tfcEnabled;
         this.topBar?.setTfcActive(state.tfcEnabled);
       }
+      if (state.priceScale) {
+        this.priceScaleFactor = state.priceScale.factor;
+        this.pricePanOffset = state.priceScale.panOffset;
+        this._displayedPriceRange = null;
+        this._lockedAutoFitBase = null;
+      }
+      if (state.viewport) {
+        if (this.dataStore.all.length > 0) {
+          this.applyViewportFromTimestamps(
+            state.viewport.startTime,
+            state.viewport.endTime
+          );
+        } else {
+          this._pendingViewportRestore = {
+            viewport: state.viewport,
+            priceScale: state.priceScale
+          };
+        }
+      }
     } finally {
       this.isRestoringState = false;
     }
@@ -20122,23 +20276,120 @@ var _ChartEngine = class _ChartEngine {
     return this;
   }
   /**
-   * Re-anchors all loaded drawings to the current dataset using their stored timestamps.
-   * Called after loadData() to fix drawings restored via setState() before data was
-   * available (bars.length === 0 at restore time causes the raw barIndex fallback).
+   * Converts a fractional barIndex into an absolute unix-ms timestamp by
+   * interpolating across the containing bar. Extrapolates linearly for indexes
+   * outside [0, bars.length-1] using the adjacent bar's width.
+   *
+   * This is the inverse of `timestampToBarIndex` and the authoritative way to
+   * capture "where in time" a drawing point sits at placement, drag, or resize.
+   * Returns undefined only when no bars are loaded.
+   */
+  barIndexToTimestamp(idx) {
+    const bars = this.dataStore.all;
+    const n = bars.length;
+    if (n === 0) return void 0;
+    const first = bars[0];
+    if (!first) return void 0;
+    if (n === 1) return first.time;
+    const floorIdx = Math.floor(idx);
+    const frac = idx - floorIdx;
+    if (floorIdx < 0) {
+      const second = bars[1];
+      if (!second) return first.time;
+      return first.time + idx * (second.time - first.time);
+    }
+    if (floorIdx >= n - 1) {
+      const last = bars[n - 1];
+      const prev = bars[n - 2];
+      if (!last || !prev) return first.time;
+      return last.time + (idx - (n - 1)) * (last.time - prev.time);
+    }
+    const lo = bars[floorIdx];
+    const hi = bars[floorIdx + 1];
+    if (!lo || !hi) return first.time;
+    return lo.time + frac * (hi.time - lo.time);
+  }
+  /**
+   * Converts a unix-ms timestamp into a fractional barIndex using floor-bar
+   * containment: the result is `floorBar + (ts - floorBar.time) / (nextBar.time - floorBar.time)`.
+   * Extrapolates linearly for timestamps outside the loaded range using the edge
+   * bar width, so drawings outside the visible data still render at the correct
+   * relative offset rather than snapping to an edge.
+   *
+   * Matches TradingView's floor-bar semantics and preserves sub-bar time
+   * precision across timeframe changes.
+   */
+  timestampToBarIndex(ts) {
+    const bars = this.dataStore.all;
+    const n = bars.length;
+    if (n === 0) return 0;
+    const first = bars[0];
+    if (!first) return 0;
+    if (n === 1) return 0;
+    if (ts <= first.time) {
+      const second = bars[1];
+      if (!second) return 0;
+      const barMs2 = second.time - first.time;
+      return barMs2 > 0 ? (ts - first.time) / barMs2 : 0;
+    }
+    const lastIdx = n - 1;
+    const lastBar = bars[lastIdx];
+    const prevBar = bars[lastIdx - 1];
+    if (!lastBar || !prevBar) return 0;
+    if (ts >= lastBar.time) {
+      const barMs2 = lastBar.time - prevBar.time;
+      return lastIdx + (barMs2 > 0 ? (ts - lastBar.time) / barMs2 : 0);
+    }
+    let lo = 0, hi = lastIdx;
+    while (lo < hi) {
+      const mid = lo + hi + 1 >> 1;
+      if ((bars[mid]?.time ?? 0) <= ts) lo = mid;
+      else hi = mid - 1;
+    }
+    const loBar = bars[lo];
+    const hiBar = bars[lo + 1];
+    if (!loBar || !hiBar) return lo;
+    const barMs = hiBar.time - loBar.time;
+    return lo + (barMs > 0 ? (ts - loBar.time) / barMs : 0);
+  }
+  /**
+   * Re-anchors all loaded drawings to the current dataset. For points with a
+   * stored timestamp, barIndex is recomputed via `timestampToBarIndex`; for
+   * points missing a timestamp (legacy saves or freshly placed points whose
+   * timestamp capture was skipped), the timestamp is backfilled from the
+   * current barIndex so subsequent data reloads remain accurate.
+   *
+   * Called after loadData(), prependData(), and whenever the underlying bars
+   * change such that cached barIndex values would otherwise drift.
    */
   reanchorDrawingsByTimestamp() {
     const bars = this.dataStore.all;
     if (bars.length === 0) return;
     for (const drawing of this.drawingManager.getDrawings()) {
       for (const pt of drawing.points) {
-        if (!pt.timestamp) continue;
-        let lo = 0, hi = bars.length - 1;
-        while (lo < hi) {
-          const mid = lo + hi >> 1;
-          if ((bars[mid]?.time ?? 0) < pt.timestamp) lo = mid + 1;
-          else hi = mid;
+        if (pt.timestamp == null) {
+          const t = this.barIndexToTimestamp(pt.barIndex);
+          if (t != null) pt.timestamp = t;
+          continue;
         }
-        pt.barIndex = lo + (pt.barIndex - Math.floor(pt.barIndex));
+        pt.barIndex = this.timestampToBarIndex(pt.timestamp);
+      }
+    }
+  }
+  /**
+   * Captures a timestamp on any drawing point that is missing one, using the
+   * current bars. Call this BEFORE mutating `dataStore.all` (insert/splice)
+   * so that points still pointing at a stale barIndex get frozen to the
+   * correct time before the mutation invalidates the index. Safe no-op for
+   * points that already have a timestamp.
+   */
+  backfillDrawingTimestamps() {
+    if (this.dataStore.all.length === 0) return;
+    for (const drawing of this.drawingManager.getDrawings()) {
+      for (const pt of drawing.points) {
+        if (pt.timestamp != null) continue;
+        const t = this.barIndexToTimestamp(pt.barIndex);
+        if (t != null) pt.timestamp = t;
       }
     }
   }
@@ -20168,6 +20419,7 @@ var _ChartEngine = class _ChartEngine {
   }
   setSymbol(symbol) {
     this.symbol = symbol;
+    this.tradePopover?.setSymbol(symbol);
     if (this.siSymbolSpan) {
       this.siSymbolSpan.textContent = symbol;
       this.siSymbolSpan.style.display = symbol ? "inline" : "none";
@@ -21175,7 +21427,7 @@ var _ChartEngine = class _ChartEngine {
       return;
     }
     const { chartW, priceH } = this.getChartLayout();
-    const priceRange = this.getScaledPriceRange(viewport);
+    const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(viewport);
     const bracketOrders = this.levels.filter(
       (l) => l.type === "pending" && l.ToClose != null
     );
@@ -21240,7 +21492,12 @@ var _ChartEngine = class _ChartEngine {
       this.tradeDragHandler?.dragLabel ?? null,
       this.tradeDragNewPrice,
       this.selectedTradeLabel,
-      new Set(this.pendingLevelDrags.keys()),
+      // Include _editOpenLabel so confirm/cancel buttons appear while the edit form is open
+      // even before any change is staged — e.g. editing a position with no SL/TP.
+      /* @__PURE__ */ new Set([
+        ...this.pendingLevelDrags.keys(),
+        ...this._editOpenLabel !== null ? [this._editOpenLabel] : []
+      ]),
       this.positionRenderStyle,
       this.hideLevelConfirmCancel,
       this.draftOrderLabel,
@@ -21443,6 +21700,11 @@ var _ChartEngine = class _ChartEngine {
         }
       }
     }
+    if (result.newPrice === oldPrice) {
+      this.tradeDragNewPrice = null;
+      this.renderTradeLayer();
+      return;
+    }
     const field = result.bracketType ?? "main";
     const isNew = this._isBracketNew;
     this._isBracketNew = false;
@@ -21548,7 +21810,22 @@ var _ChartEngine = class _ChartEngine {
   }
   applyPendingChanges(label) {
     const changes = this.pendingLevelDrags.get(label);
-    if (!changes) return;
+    if (!changes) {
+      if (this._editOpenLabel === label) {
+        const level2 = this.levels.find((l) => l.label === label);
+        this._editOpenLabel = null;
+        this.selectedTradeLabel = null;
+        this.renderTradeLayer();
+        if (level2) {
+          this.emitter.emit("tradeLevelConfirmed", {
+            label,
+            type: level2.type,
+            isFullscreen: this.isFullscreen
+          });
+        }
+      }
+      return;
+    }
     const level = this.levels.find((l) => l.label === label);
     if (!level) return;
     if (this._editOpenLabel === label) this._editOpenLabel = null;
@@ -21627,6 +21904,10 @@ var _ChartEngine = class _ChartEngine {
     if (!label && this.draftOrderLabel) {
       this.removeDraftOrder();
     }
+    if (label && !this.pendingLevelDrags.has(label) && this._editOpenLabel === label) {
+      this._cancelEditAndDeselect(label);
+      return;
+    }
     const toRevert = label ? this.pendingLevelDrags.has(label) ? [[label, this.pendingLevelDrags.get(label) ?? []]] : [] : [...this.pendingLevelDrags.entries()];
     for (const [lbl] of toRevert) {
       this.undoIsNewBracketMutations(lbl);
@@ -22199,6 +22480,7 @@ var _ChartEngine = class _ChartEngine {
       this.leftBar?.setMobileMode(isMobile);
       this.topBar?.setMobileLayout(isMobile);
       this.tradeButton?.setMobileMode(isMobile);
+      this.tradePopover?.setCompact(isMobile);
       if (this.siEl) {
         this.siEl.style.flexDirection = isMobile ? "column" : "row";
         this.siEl.style.alignItems = isMobile ? "flex-start" : "center";
@@ -22289,10 +22571,21 @@ var _ChartEngine = class _ChartEngine {
     const y = touch.clientY - rect.top;
     const { chartW, priceH } = this.getChartLayout();
     const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
-    return {
-      barIndex: this.scaleManager.pixelToBarIndex(x, this.viewport, chartW),
-      price: this.scaleManager.pixelToPrice(y, priceRange, priceH)
-    };
+    return this.makeDrawingPoint(
+      this.scaleManager.pixelToBarIndex(x, this.viewport, chartW),
+      this.scaleManager.pixelToPrice(y, priceRange, priceH)
+    );
+  }
+  /**
+   * Builds a fully-populated DrawingPoint from raw float coordinates. Captures
+   * the absolute timestamp at this fractional barIndex so the anchor survives
+   * timeframe changes, data reloads, and serialization round-trips.
+   */
+  makeDrawingPoint(barIndex, price) {
+    const point = { barIndex, price };
+    const t = this.barIndexToTimestamp(barIndex);
+    if (t != null) point.timestamp = t;
+    return point;
   }
   /** Shared close-button handler used by both mouse click and touch tap. */
   _handleTradeLevelClose(closedLevel) {
@@ -22402,6 +22695,49 @@ var _ChartEngine = class _ChartEngine {
     }
     this.scheduleRender();
   }
+  /**
+   * Closes the edit form, clears selection, and emits `tradeLevelEditCancelled` when
+   * the edit form was actually open for this label. Shared between click-outside,
+   * repeat-click toggle, and the ✗ button so all exit paths produce the same payload.
+   */
+  _cancelEditAndDeselect(label) {
+    const wasEditFormOpen = this._editOpenLabel === label;
+    const level = this.levels.find((l) => l.label === label);
+    this._editOpenLabel = null;
+    this.selectedTradeLabel = null;
+    this.draftBracketPnl = {};
+    this.renderTradeLayer();
+    if (wasEditFormOpen && level) {
+      this.emitter.emit("tradeLevelEditCancelled", {
+        label,
+        type: level.type,
+        isFullscreen: this.isFullscreen
+      });
+    }
+  }
+  /**
+   * Opens the external edit form for a trade level by emitting `tradeLevelEditOpen`.
+   * Shared between pencil click, bare box click, and drag start so every entry
+   * point fires the same payload. No-op when the form is already open for this
+   * label, so repeat opens (e.g. pencil click followed by drag) don't spam the event.
+   */
+  _openTradeLevelEditForm(level) {
+    if (this._editOpenLabel === level.label) return;
+    this.selectedTradeLabel = level.label;
+    this._editOpenLabel = level.label;
+    const { slPrice, tpPrice } = this._resolveBracketPrices(level);
+    this.renderTradeLayer();
+    this.emitter.emit("tradeLevelEditOpen", {
+      label: level.label,
+      type: level.type,
+      data: level.data,
+      price: level.price,
+      side: level.side,
+      stopLossPrice: slPrice,
+      takeProfitPrice: tpPrice,
+      isFullscreen: this.isFullscreen
+    });
+  }
   /** Shared helper: initiate a trade level main-line drag from a hit area. */
   _startTradeDragFromHit(dragHit, level, hitY) {
     if (!this.tradeDragHandler) return;
@@ -22477,6 +22813,7 @@ var _ChartEngine = class _ChartEngine {
         );
       }
     }
+    this._openTradeLevelEditForm(level);
   }
   /** Shared helper: initiate a +SL/+TP add-bracket drag from a hit area. */
   _startAddBracketFromHit(addHit, hitY) {
@@ -22590,6 +22927,7 @@ var _ChartEngine = class _ChartEngine {
     this.dataLoader({ start: new Date(fromTime), end: new Date(toTime), interval }).then((rawBars) => {
       const bars = this.maybeAggregate(rawBars);
       if (bars.length === 0) return;
+      this.backfillDrawingTimestamps();
       const all = this.dataStore.all;
       const liveBar = all[all.length - 1];
       let insertCount = 0;
@@ -22610,6 +22948,7 @@ var _ChartEngine = class _ChartEngine {
           startIndex: this.viewport.startIndex + insertCount,
           endIndex: this.viewport.endIndex + insertCount
         };
+        this.reanchorDrawingsByTimestamp();
         this.recomputeIndicators();
         this.scheduleRender();
       }
@@ -22804,6 +23143,7 @@ var _ChartEngine = class _ChartEngine {
   }
 };
 _ChartEngine.DRAW_GESTURE_THRESHOLD = 4;
+_ChartEngine.TRADE_DRAG_PIXEL_THRESHOLD = 3;
 var ChartEngine = _ChartEngine;
 
 // src/data/WebSocketAdapter.ts