acttrader-charts 1.0.0 → 1.0.2

package/dist/index.js

@@ -83,17 +83,17 @@ var DataStore = class {
 var _ScaleManager = class _ScaleManager {
   // ── X axis: bar index → canvas pixel ──────────────────────────────────────
   xToPixel(index, viewport, chartWidth) {
-    const visibleBars = viewport.endIndex - viewport.startIndex;
+    const visibleBars = Math.max(1, viewport.endIndex - viewport.startIndex);
     const candleWidth = chartWidth / visibleBars;
     return (index - viewport.startIndex) * candleWidth + candleWidth / 2;
   }
   pixelToBarIndex(x, viewport, chartWidth) {
-    const visibleBars = viewport.endIndex - viewport.startIndex;
+    const visibleBars = Math.max(1, viewport.endIndex - viewport.startIndex);
     const candleWidth = chartWidth / visibleBars;
     return viewport.startIndex + x / candleWidth - 0.5;
   }
   candleBodyWidth(viewport, chartWidth) {
-    const visibleBars = viewport.endIndex - viewport.startIndex;
+    const visibleBars = Math.max(1, viewport.endIndex - viewport.startIndex);
     const raw = chartWidth / visibleBars * 0.7;
     return Math.max(1, Math.min(raw, 40));
   }
@@ -715,7 +715,7 @@ function resolveLabels(override) {
 // src/interaction/PanHandler.ts
 var _PanHandler = class _PanHandler {
   // px — below this = click, not drag
-  constructor(canvas, getViewport, setViewport, totalBars, onUpdate, isLocked = () => false, panY) {
+  constructor(canvas, getViewport, setViewport, totalBars, onUpdate, isLocked = () => false, panY, onDragStart, onDragEnd) {
     this.canvas = canvas;
     this.getViewport = getViewport;
     this.setViewport = setViewport;
@@ -723,15 +723,20 @@ var _PanHandler = class _PanHandler {
     this.onUpdate = onUpdate;
     this.isLocked = isLocked;
     this.panY = panY;
+    this.onDragStart = onDragStart;
+    this.onDragEnd = onDragEnd;
     this.isDragging = false;
+    this.isTouchDrag = false;
     this.lastX = 0;
     this.lastY = 0;
     this.dragStartX = 0;
     this.dragStartY = 0;
     this.hasPanned = false;
+    this.dragStartFired = false;
     this.onMouseDown = (e) => {
       if (this.isLocked()) return;
       this.isDragging = true;
+      this.isTouchDrag = false;
       this.lastX = e.clientX;
       this.lastY = e.clientY;
       this.dragStartX = e.clientX;
@@ -742,8 +747,13 @@ var _PanHandler = class _PanHandler {
       if (this.isLocked()) return;
       if (e.touches.length !== 1) return;
       this.isDragging = true;
+      this.isTouchDrag = true;
       this.lastX = e.touches[0].clientX;
       this.lastY = e.touches[0].clientY;
+      this.dragStartX = e.touches[0].clientX;
+      this.dragStartY = e.touches[0].clientY;
+      this.dragStartFired = true;
+      this.onDragStart?.();
     };
     this.onMouseMove = (e) => {
       if (!this.isDragging) return;
@@ -760,6 +770,8 @@ var _PanHandler = class _PanHandler {
       const totalDeltaY = Math.abs(e.clientY - this.dragStartY);
       if (!this.hasPanned && (totalDeltaX > _PanHandler.DRAG_THRESHOLD || totalDeltaY > _PanHandler.DRAG_THRESHOLD)) {
         this.hasPanned = true;
+        this.dragStartFired = true;
+        this.onDragStart?.();
         this.canvas.style.cursor = "grabbing";
       }
       if (this.hasPanned) {
@@ -785,6 +797,10 @@ var _PanHandler = class _PanHandler {
       if (this.hasPanned) this.canvas.style.cursor = "crosshair";
       this.isDragging = false;
       this.hasPanned = false;
+      if (this.dragStartFired) {
+        this.dragStartFired = false;
+        this.onDragEnd?.();
+      }
     };
     this.attach();
   }
@@ -792,10 +808,15 @@ var _PanHandler = class _PanHandler {
     this.canvas.addEventListener("mousedown", this.onMouseDown);
     window.addEventListener("mousemove", this.onMouseMove);
     window.addEventListener("mouseup", this.onMouseUp);
-    this.canvas.addEventListener("touchstart", this.onTouchStart, { passive: true });
+    this.canvas.addEventListener("touchstart", this.onTouchStart, { passive: false });
     window.addEventListener("touchmove", this.onTouchMove, { passive: false });
     window.addEventListener("touchend", this.onMouseUp);
   }
+  /** Cancel any in-progress pan gesture (e.g. when a drawing drag takes over). */
+  cancel() {
+    this.isDragging = false;
+    this.hasPanned = false;
+  }
   destroy() {
     this.canvas.removeEventListener("mousedown", this.onMouseDown);
     window.removeEventListener("mousemove", this.onMouseMove);
@@ -807,9 +828,10 @@ var _PanHandler = class _PanHandler {
   pan(deltaX) {
     const vp = this.getViewport();
     const visibleBars = vp.endIndex - vp.startIndex;
-    const barsPerPixel = visibleBars / this.canvas.width;
+    const width = this.isTouchDrag ? this.canvas.clientWidth || this.canvas.width / (window.devicePixelRatio || 1) : this.canvas.width;
+    const barsPerPixel = visibleBars / width;
     const shift = -deltaX * barsPerPixel;
-    const maxStart = this.totalBars();
+    const maxStart = Math.max(0, this.totalBars() - Math.floor(visibleBars / 2));
     const newStart = Math.max(0, Math.min(maxStart, vp.startIndex + shift));
     this.setViewport({ ...vp, startIndex: newStart, endIndex: newStart + visibleBars });
     this.onUpdate();
@@ -908,7 +930,7 @@ var ZoomHandler = class {
   }
   attach() {
     this.canvas.addEventListener("wheel", this.onWheel, { passive: false });
-    this.canvas.addEventListener("touchstart", this.onTouchStart, { passive: true });
+    this.canvas.addEventListener("touchstart", this.onTouchStart, { passive: false });
     this.canvas.addEventListener("touchmove", this.onTouchMove, { passive: false });
     this.canvas.addEventListener("touchend", this.onTouchEnd);
   }
@@ -10523,6 +10545,19 @@ var DrawingManager = class {
   isResizingDrawing() {
     return this.resizeDrawing !== null;
   }
+  /** Shift all drawings' barIndex values by `delta` (called when bars are prepended to DataStore). */
+  shiftBarIndices(delta) {
+    for (const drawing of this.drawings) {
+      for (const pt of drawing.points) {
+        pt.barIndex += delta;
+      }
+    }
+    if (this.dragStartPoints) {
+      for (const pt of this.dragStartPoints) {
+        pt.barIndex += delta;
+      }
+    }
+  }
   /** Returns the handle under (x,y) across all complete drawings, or null */
   getHandleAtPoint(x, y, scale, viewport, priceRange, chartW, chartH) {
     for (let i = this.drawings.length - 1; i >= 0; i--) {
@@ -12338,9 +12373,9 @@ var DraftOrderQtyInput = class _DraftOrderQtyInput {
       display: "none",
       alignItems: "center",
       gap: "5px",
-      right: `${priceAxisWidth + 70}px`,
+      right: `${priceAxisWidth + 4}px`,
       top: "0",
-      transform: "translateY(-50%)",
+      transform: "translateY(calc(-100% - 16px))",
       zIndex: "18",
       pointerEvents: "auto",
       userSelect: "none",
@@ -12390,7 +12425,7 @@ var DraftOrderQtyInput = class _DraftOrderQtyInput {
     this.input.step = String(minQty);
     this.input.value = String(this._pendingLots ?? minQty);
     this._pendingLots = null;
-    const clampedY = priceH !== void 0 ? Math.max(10, Math.min(priceH - 10, y)) : y;
+    const clampedY = priceH !== void 0 ? Math.max(54, Math.min(priceH - 10, y)) : y;
     this.el.style.top = `${clampedY}px`;
     this.el.style.display = "flex";
     requestAnimationFrame(() => this.input.focus({ preventScroll: true }));
@@ -12412,12 +12447,12 @@ var DraftOrderQtyInput = class _DraftOrderQtyInput {
     return isNaN(v) || v <= 0 ? parseFloat(this.input.min || "1") : v;
   }
   setY(y, priceH) {
-    const clampedY = priceH !== void 0 ? Math.max(10, Math.min(priceH - 10, y)) : y;
+    const clampedY = priceH !== void 0 ? Math.max(54, Math.min(priceH - 10, y)) : y;
     this.el.style.top = `${clampedY}px`;
   }
   setTheme(theme, priceAxisWidth) {
     this.priceAxisWidth = priceAxisWidth;
-    this.el.style.right = `${priceAxisWidth + 70}px`;
+    this.el.style.right = `${priceAxisWidth + 4}px`;
     const bg = _DraftOrderQtyInput.boxBg(theme);
     const fg = _DraftOrderQtyInput.boxFg(theme);
     Object.assign(this.input.style, {
@@ -13785,13 +13820,20 @@ var VOLUME_PANEL_RATIO = 0.18;
 var SUB_PANE_HEIGHT = 80;
 var PANE_SEPARATOR = 1;
 var DEFAULT_VISIBLE_BARS = 80;
+var DEFAULT_CANDLE_SLOT_WIDTH = 10;
 var PRICE_RANGE_LERP = 0.25;
+var VIEWPORT_LERP = 0.2;
 function isMobileDevice() {
   return typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 1);
 }
-function initialVisibleBars(mobileBarDivisor = 2, forceApply = false) {
-  if (!forceApply && !isMobileDevice()) return DEFAULT_VISIBLE_BARS;
-  return Math.max(10, Math.round(DEFAULT_VISIBLE_BARS / mobileBarDivisor));
+function initialVisibleBars(mobileBarDivisor = 2, forceApply = false, defaultBars = DEFAULT_VISIBLE_BARS, defaultMobileBars, chartWidth, targetCandleSlotWidth) {
+  if (chartWidth && chartWidth > 0 && targetCandleSlotWidth && targetCandleSlotWidth > 0) {
+    const auto = Math.floor(chartWidth / targetCandleSlotWidth);
+    return Math.max(10, Math.min(500, auto));
+  }
+  if (!forceApply && !isMobileDevice()) return defaultBars;
+  if (defaultMobileBars !== void 0) return defaultMobileBars;
+  return Math.max(10, Math.round(defaultBars / mobileBarDivisor));
 }
 var LOOKAHEAD = 4;
 function applySubPaneScale(range, factor) {
@@ -13807,7 +13849,7 @@ function subPaneAxisPrecision(range) {
   if (span >= 0.1) return 3;
   return 4;
 }
-var ChartEngine = class {
+var _ChartEngine = class _ChartEngine {
   constructor(config) {
     // UI bars
     this.topBar = null;
@@ -13826,6 +13868,7 @@ var ChartEngine = class {
     this.siStreamDot = null;
     this.siSymbolSpan = null;
     this.siOHLCSpan = null;
+    this.siOHLC2Span = null;
     this.tickActivityTimer = null;
     this.tickActivityMs = 3e4;
     this.streamStatus = "disconnected";
@@ -13860,11 +13903,24 @@ var ChartEngine = class {
       candleWidth: 8,
       candleGap: 2
     };
+    // Logical target viewport — pan/zoom handlers write here; `viewport` lerps toward it each frame.
+    this._targetViewport = {
+      startIndex: 0,
+      endIndex: initialVisibleBars(),
+      candleWidth: 8,
+      candleGap: 2
+    };
+    this._isPanning = false;
     this.crosshair = null;
     // Drawing
     this.drawingManager = new DrawingManager();
     this.textInputEl = null;
     this.textInputDrawing = null;
+    /** Pending drag — committed only after mouse moves past DRAW_GESTURE_THRESHOLD. */
+    this._pendingDrawDrag = null;
+    /** Pending resize — committed only after mouse moves past DRAW_GESTURE_THRESHOLD. */
+    this._pendingDrawResize = null;
+    // px
     // Pane resize
     this.paneHeightOverrides = /* @__PURE__ */ new Map();
     this.separatorDrag = null;
@@ -13884,7 +13940,9 @@ var ChartEngine = class {
     this.subPaneScaleFactors = /* @__PURE__ */ new Map();
     this._mobileCrosshairActive = false;
     this._mobileTapStartXY = null;
-    this._isHoveringTradeButton = false;
+    this._longPressTimer = null;
+    this._longPressPoint = null;
+    this._lastTouchTime = 0;
     this._tradeButtonClickData = null;
     this.rafId = null;
     this.countdownRafId = null;
@@ -13937,8 +13995,13 @@ var ChartEngine = class {
     this.isFetching = false;
     this.noMoreData = false;
     this.maxCandles = 200;
+    this.defaultVisibleBars = DEFAULT_VISIBLE_BARS;
+    this.defaultMobileVisibleBars = void 0;
     this.mobileBarDivisor = 2;
     this.explicitMobileDivisor = false;
+    this._autoVisibleBars = true;
+    // false when defaultVisibleBars was explicitly set
+    this.targetCandleWidth = DEFAULT_CANDLE_SLOT_WIDTH;
     this.maxSubPanes = 3;
     this.showCandleCountdown = true;
     this.loadingOverlayEl = null;
@@ -13948,6 +14011,7 @@ var ChartEngine = class {
     this.isRestoringState = false;
     this.onMouseMove = (e) => {
       if (this._mobileCrosshairActive) return;
+      if (Date.now() - this._lastTouchTime < 500) return;
       const rect = this._cachedDrawRect ?? this.drawCanvas.getBoundingClientRect();
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
@@ -13962,7 +14026,7 @@ var ChartEngine = class {
         Math.min(Math.ceil(this.viewport.endIndex), Math.round(rawBarIndex))
       );
       const bar = this.dataStore.all[clamped] ?? null;
-      this.crosshair = isInChartArea && !this._isHoveringTradeButton ? { x, y, barIndex: clamped, price, bar } : null;
+      this.crosshair = isInChartArea && this.tradeButton === 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) {
@@ -13978,6 +14042,28 @@ var ChartEngine = class {
           this.tradeButton.hide();
         }
       }
+      if (this._pendingDrawResize) {
+        const dx = x - this._pendingDrawResize.startX;
+        const dy = y - this._pendingDrawResize.startY;
+        if (Math.sqrt(dx * dx + dy * dy) > _ChartEngine.DRAW_GESTURE_THRESHOLD) {
+          this.drawingManager.startResize(
+            this._pendingDrawResize.drawing,
+            this._pendingDrawResize.pointIndex
+          );
+          this._pendingDrawResize = null;
+        }
+      }
+      if (this._pendingDrawDrag) {
+        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._pendingDrawDrag = null;
+        }
+      }
       this.drawingManager.onMouseMove({ barIndex: rawBarIndex, price });
       if (this.axisDrag) {
         if (this.axisDrag.axis === "price") {
@@ -14006,6 +14092,7 @@ var ChartEngine = class {
             startIndex: newStart,
             endIndex: newStart + newVisible
           };
+          this._targetViewport = { ...this.viewport };
         }
         this.drawCanvas.style.cursor = this.axisDrag.axis === "time" ? "ew-resize" : "ns-resize";
         this.scheduleRender();
@@ -14149,6 +14236,8 @@ var ChartEngine = class {
         this.drawCanvas.style.cursor = "default";
         this.scheduleRender();
       }
+      this._pendingDrawDrag = null;
+      this._pendingDrawResize = null;
       if (this.drawingManager.isDraggingDrawing()) {
         this.drawingManager.endDrag();
         this.drawCanvas.style.cursor = "default";
@@ -14230,6 +14319,7 @@ var ChartEngine = class {
       );
       if (handleHit) {
         e.preventDefault();
+        this.panHandler.cancel();
         this.drawingManager.selectDrawing(handleHit.drawing);
         this.drawingManager.startResize(handleHit.drawing, handleHit.handle.pointIndex);
         this.hideMobileDrawingFlyout();
@@ -14247,18 +14337,66 @@ var ChartEngine = class {
       );
       if (bodyHit) {
         e.preventDefault();
+        this.panHandler.cancel();
         this.drawingManager.selectDrawing(bodyHit);
         this.drawingManager.startDrag(bodyHit, point);
         this._drawTouchStartXY = { x: touch.clientX, y: touch.clientY };
         this.hideMobileDrawingFlyout();
         this.scheduleRender();
-      } else {
-        this.drawingManager.selectDrawing(null);
-        this.hideMobileDrawingFlyout();
-        const timeAxisY2 = rect.height - this.timeAxisHeight;
-        const isInChartArea = x < chartW && y < timeAxisY2;
-        if (isInChartArea) {
+        return;
+      }
+      const confirmHit = hitTestTradeLevelConfirm(x, y, this.tradeLevelConfirmAreas);
+      if (confirmHit) {
+        e.preventDefault();
+        if (confirmHit.action === "confirm") this.applyPendingChanges(confirmHit.label);
+        else this.revertPendingChanges(confirmHit.label);
+        return;
+      }
+      const closeHit = hitTestTradeLevelClose(x, y, this.tradeLevelHitAreas);
+      if (closeHit) {
+        e.preventDefault();
+        this._handleTradeLevelClose(closeHit);
+        return;
+      }
+      if (this.tradeDragHandler && !this.drawingManager.getActiveTool()) {
+        const dragHit = hitTestTradeLevelDrag(x, y, this.tradeLevelDragAreas);
+        if (dragHit) {
+          e.preventDefault();
+          const level = this.levels.find((l) => l.label === dragHit.label);
+          if (level) {
+            this._startTradeDragFromHit(dragHit, level, y);
+            this.scheduleRender();
+            return;
+          }
+        }
+        const addHit = hitTestTradeLevelAddBracket(x, y, this.tradeAddBracketAreas);
+        if (addHit) {
+          e.preventDefault();
+          this._startAddBracketFromHit(addHit, y);
+          this.scheduleRender();
+          return;
+        }
+      }
+      this.drawingManager.selectDrawing(null);
+      this.hideMobileDrawingFlyout();
+      const isInChartArea = x < chartW && y < timeAxisY;
+      if (isInChartArea) {
+        if (this._mobileCrosshairActive) {
+          if (this._longPressTimer !== null) {
+            clearTimeout(this._longPressTimer);
+            this._longPressTimer = null;
+          }
           this._mobileTapStartXY = { x, y };
+        } else {
+          if (this._longPressTimer !== null) clearTimeout(this._longPressTimer);
+          this._longPressPoint = { x, y };
+          this._longPressTimer = setTimeout(() => {
+            this._longPressTimer = null;
+            if (this._longPressPoint) {
+              this._activateMobileCrosshair(this._longPressPoint.x, this._longPressPoint.y);
+              this._longPressPoint = null;
+            }
+          }, 500);
         }
       }
     };
@@ -14293,7 +14431,11 @@ var ChartEngine = class {
           );
           const mid = (this.viewport.startIndex + this.viewport.endIndex) / 2;
           const newStart = Math.max(0, mid - newVisible / 2);
-          this.viewport = { ...this.viewport, startIndex: newStart, endIndex: newStart + newVisible };
+          this.viewport = {
+            ...this.viewport,
+            startIndex: newStart,
+            endIndex: newStart + newVisible
+          };
         }
         this.scheduleRender();
         return;
@@ -14306,16 +14448,52 @@ var ChartEngine = class {
       }
       if (this.drawingManager.isDraggingDrawing() || this.drawingManager.isResizingDrawing()) {
         e.preventDefault();
+        e.stopPropagation();
         this.drawingManager.onMouseMove(point);
         this.scheduleRender();
+        return;
+      }
+      if (this.tradeDragHandler?.active) {
+        e.preventDefault();
+        const touch = e.touches[0];
+        const rect = this._cachedDrawRect ?? this.drawCanvas.getBoundingClientRect();
+        const ty = touch.clientY - rect.top;
+        const { priceH } = this.getChartLayout();
+        const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
+        const moveResult = this.tradeDragHandler.onMouseMove(ty, this.scaleManager, priceRange, priceH);
+        this.tradeDragNewPrice = moveResult?.newPrice ?? null;
+        this.renderTradeLayer();
+        if (this.tradeDragNewPrice !== null && moveResult) {
+          const colonIdx = moveResult.label.indexOf(":");
+          const baseLabel = colonIdx !== -1 ? moveResult.label.slice(0, colonIdx) : moveResult.label;
+          const bracketType = colonIdx !== -1 ? moveResult.label.slice(colonIdx + 1) : void 0;
+          const draggingLevel = this.levels.find((l) => l.label === baseLabel);
+          if (draggingLevel) {
+            this.emitter.emit("tradeLevelDrag", {
+              label: draggingLevel.label,
+              newPrice: this.tradeDragNewPrice,
+              data: draggingLevel.data,
+              bracketType
+            });
+          }
+        }
+        return;
       }
-      if (!this._mobileCrosshairActive && this._mobileTapStartXY) {
+      if (this._mobileTapStartXY || this._longPressTimer !== null) {
         const touch = e.touches[0];
         const rect = this._cachedDrawRect ?? this.drawCanvas.getBoundingClientRect();
-        const dx = touch.clientX - rect.left - this._mobileTapStartXY.x;
-        const dy = touch.clientY - rect.top - this._mobileTapStartXY.y;
-        if (Math.sqrt(dx * dx + dy * dy) > 6) {
-          this._mobileTapStartXY = null;
+        const tapOrigin = this._mobileTapStartXY ?? this._longPressPoint;
+        if (tapOrigin) {
+          const dx = touch.clientX - rect.left - tapOrigin.x;
+          const dy = touch.clientY - rect.top - tapOrigin.y;
+          if (Math.sqrt(dx * dx + dy * dy) > 6) {
+            this._mobileTapStartXY = null;
+            if (this._longPressTimer !== null) {
+              clearTimeout(this._longPressTimer);
+              this._longPressTimer = null;
+              this._longPressPoint = null;
+            }
+          }
         }
       }
       if (this._mobileCrosshairActive) {
@@ -14345,6 +14523,23 @@ var ChartEngine = class {
       }
     };
     this.onDrawingTouchEnd = (_e) => {
+      this._lastTouchTime = Date.now();
+      if (this._longPressTimer !== null) {
+        clearTimeout(this._longPressTimer);
+        this._longPressTimer = null;
+        this._longPressPoint = null;
+      }
+      if (this.tradeDragHandler?.active) {
+        const result = this.tradeDragHandler.endDrag();
+        if (result) {
+          this.storePendingChange(result, result.startPrice, this._pendingBracketOrderLabel ?? void 0);
+        } else {
+          this.tradeDragNewPrice = null;
+        }
+        this._pendingBracketOrderLabel = null;
+        this.renderTradeLayer();
+        return;
+      }
       if (this.axisDrag) {
         this.axisDrag = null;
         this.scheduleRender();
@@ -14377,35 +14572,11 @@ var ChartEngine = class {
         this.scheduleRender();
       }
       if (this._mobileTapStartXY) {
-        const { x, y } = this._mobileTapStartXY;
         this._mobileTapStartXY = null;
-        if (this._mobileCrosshairActive) {
-          this._mobileCrosshairActive = false;
-          this.crosshair = null;
-          this.tradeButton?.hide();
-          this.scheduleRender();
-        } else {
-          const rect = this._cachedDrawRect ?? this.drawCanvas.getBoundingClientRect();
-          const { chartW, priceH } = this.getChartLayout();
-          const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
-          const timeAxisY = rect.height - this.timeAxisHeight;
-          if (x < chartW && y < timeAxisY) {
-            this._mobileCrosshairActive = true;
-            const rawBarIndex = this.scaleManager.pixelToBarIndex(x, this.viewport, chartW);
-            const price = this.scaleManager.pixelToPrice(y, priceRange, priceH);
-            const clamped = Math.max(
-              Math.floor(this.viewport.startIndex),
-              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 };
-            if (this.tradeButton) {
-              this.tradeButton.setY(y);
-              this.tradeButton.show();
-            }
-            this.scheduleRender();
-          }
-        }
+        this._mobileCrosshairActive = false;
+        this.crosshair = null;
+        this.tradeButton?.hide();
+        this.scheduleRender();
       }
     };
     this.onCanvasClick = (e) => {
@@ -14413,7 +14584,7 @@ var ChartEngine = class {
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
       const { chartW, priceH } = this.getChartLayout();
-      const priceRange = this.getScaledPriceRange(this.viewport);
+      const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
       const rawBarIndex = this.scaleManager.pixelToBarIndex(x, this.viewport, chartW);
       const price = this.scaleManager.pixelToPrice(y, priceRange, priceH);
       const barIndex = Math.round(rawBarIndex);
@@ -14425,54 +14596,7 @@ var ChartEngine = class {
       }
       const closedLevel = hitTestTradeLevelClose(x, y, this.tradeLevelHitAreas);
       if (closedLevel) {
-        if (closedLevel.bracketType) {
-          const parentLevel = this.levels.find((l) => l.label === closedLevel.label);
-          const isMarketDraftBracket = parentLevel?.orderType === "market" && parentLevel?.data?._isDraft === true;
-          if (isMarketDraftBracket) {
-            const bracketKey = closedLevel.bracketType === "stopLoss" ? "sl" : "tp";
-            this.updateDraftOrderBracket(bracketKey, null);
-            this.emitter.emit("tradeLevelEdit", {
-              label: closedLevel.label,
-              data: parentLevel?.data,
-              type: "pending",
-              changes: [
-                {
-                  field: closedLevel.bracketType === "stopLoss" ? "REMOVE_SL" : "REMOVE_TP",
-                  newPrice: 0,
-                  data: closedLevel.data
-                }
-              ]
-            });
-            return;
-          }
-          const field = closedLevel.bracketType;
-          const existing = this.pendingLevelDrags.get(closedLevel.label) ?? [];
-          const filtered = existing.filter((c) => c.field !== field);
-          filtered.push({
-            field,
-            newPrice: 0,
-            oldPrice: 0,
-            isRemoval: true,
-            bracketOrderLabel: closedLevel.bracketOrderLabel
-          });
-          this.pendingLevelDrags.set(closedLevel.label, filtered);
-          this.selectedTradeLabel = closedLevel.label;
-          this.renderTradeLayer();
-          return;
-        }
-        const isDraftOrder = closedLevel.label === this.draftOrderLabel;
-        this.revertPendingChanges(closedLevel.label);
-        this.pendingLevelDrags.delete(closedLevel.label);
-        if (isDraftOrder) return;
-        const originalLevel = this.levels.find((l) => l.label === closedLevel.label);
-        const isEntryOrder = originalLevel?.type === "position" && !!originalLevel.entryPriceEditable;
-        const closeAction = closedLevel.type === "position" && !isEntryOrder ? "CLOSED" : "CANCELLED";
-        this.emitter.emit("tradeLevelClose", {
-          label: closedLevel.label,
-          type: closedLevel.type,
-          action: closeAction,
-          data: closedLevel.data
-        });
+        this._handleTradeLevelClose(closedLevel);
         return;
       }
       if (this.tradeDragHandler && !this.drawingManager.getActiveTool()) {
@@ -14480,54 +14604,7 @@ var ChartEngine = class {
         if (dragHit) {
           const level = this.levels.find((l) => l.label === dragHit.label);
           if (level) {
-            if (dragHit.isBracket) {
-              this._pendingBracketOrderLabel = dragHit.bracketOrderLabel ?? null;
-              this._isBracketNew = false;
-              const isEntryOrder = level.entryPriceEditable === true;
-              const isDraft = level.data?._isDraft === true;
-              const all = this.dataStore.all;
-              const marketPrice = isEntryOrder || isDraft ? 0 : all[all.length - 1]?.close ?? 0;
-              this.tradeDragHandler.startBracketDrag(
-                level,
-                dragHit.bracketType,
-                dragHit.price,
-                marketPrice,
-                this._effectiveEntryPrice(level.label, level.price)
-              );
-            } else {
-              this._pendingBracketOrderLabel = null;
-              const isEntryOrder = level.entryPriceEditable === true;
-              if (isEntryOrder) {
-                this.selectedTradeLabel = dragHit.label;
-                const posLevel = level;
-                const allPos = this.dataStore.all;
-                const mktPricePos = allPos[allPos.length - 1]?.close ?? 0;
-                this.tradeDragHandler.startDrag(
-                  level,
-                  y,
-                  dragHit.price,
-                  posLevel.stopLossPrice,
-                  posLevel.takeProfitPrice,
-                  posLevel.side,
-                  mktPricePos,
-                  posLevel.orderType
-                );
-              } else {
-                const pendingLevel = level;
-                const allBars = this.dataStore.all;
-                const mktPrice = allBars[allBars.length - 1]?.close ?? 0;
-                this.tradeDragHandler.startDrag(
-                  level,
-                  y,
-                  dragHit.price,
-                  void 0,
-                  void 0,
-                  pendingLevel.side,
-                  mktPrice,
-                  pendingLevel.orderType
-                );
-              }
-            }
+            this._startTradeDragFromHit(dragHit, level, y);
             this.drawCanvas.style.cursor = "ns-resize";
             return;
           }
@@ -14536,43 +14613,9 @@ var ChartEngine = class {
       if (this.tradeDragHandler && !this.drawingManager.getActiveTool()) {
         const addHit = hitTestTradeLevelAddBracket(x, y, this.tradeAddBracketAreas);
         if (addHit) {
-          const level = this.levels.find((l) => l.label === addHit.label);
-          if (level) {
-            const { priceH: priceH2 } = this.getChartLayout();
-            const priceRange2 = this.getScaledPriceRange(this.viewport);
-            const btnCenterY = addHit.y + addHit.h / 2;
-            const initialPrice = this.scaleManager.pixelToPrice(
-              btnCenterY,
-              priceRange2,
-              priceH2
-            );
-            const isEntryOrder = level.entryPriceEditable === true;
-            const isDraft = level.data?._isDraft === true;
-            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
-              });
-            }
-            this._pendingBracketOrderLabel = null;
-            this._isBracketNew = true;
-            this.tradeDragHandler.startBracketDrag(
-              level,
-              addHit.bracketType,
-              initialPrice,
-              marketPrice,
-              this._effectiveEntryPrice(level.label, level.price)
-            );
-            this.drawCanvas.style.cursor = "ns-resize";
-            return;
-          }
+          this._startAddBracketFromHit(addHit, y);
+          this.drawCanvas.style.cursor = "ns-resize";
+          return;
         }
       }
       if (!this.drawingManager.getActiveTool()) {
@@ -14673,7 +14716,12 @@ var ChartEngine = class {
         );
         if (handleHit) {
           this.drawingManager.selectDrawing(handleHit.drawing);
-          this.drawingManager.startResize(handleHit.drawing, handleHit.handle.pointIndex);
+          this._pendingDrawResize = {
+            drawing: handleHit.drawing,
+            pointIndex: handleHit.handle.pointIndex,
+            startX: x,
+            startY: y
+          };
         } else {
           const bodyHit = this.drawingManager.hitTest(
             x,
@@ -14686,10 +14734,7 @@ var ChartEngine = class {
           );
           this.drawingManager.selectDrawing(bodyHit);
           if (bodyHit) {
-            this.drawingManager.startDrag(bodyHit, {
-              barIndex: rawBarIndex,
-              price
-            });
+            this._pendingDrawDrag = { drawing: bodyHit, startX: x, startY: y };
           }
         }
         const bar = this.dataStore.all[barIndex] ?? null;
@@ -14774,11 +14819,11 @@ var ChartEngine = class {
           );
         }
         const openingBar = all[all.length - 1];
-        if (this.viewport.endIndex >= all.length) {
-          this.viewport = {
-            ...this.viewport,
-            startIndex: this.viewport.startIndex + 1,
-            endIndex: this.viewport.endIndex + 1
+        if (this._targetViewport.endIndex >= all.length) {
+          this._targetViewport = {
+            ...this._targetViewport,
+            startIndex: this._targetViewport.startIndex + 1,
+            endIndex: this._targetViewport.endIndex + 1
           };
         }
         this.emitter.emit("newBar", { completedBar, openingBar, intervalMs });
@@ -14791,7 +14836,7 @@ var ChartEngine = class {
       this.scheduleRender();
     };
     if (typeof window === "undefined" || typeof document === "undefined") {
-      throw new Error("stockchart requires a browser environment");
+      throw new Error("acttrader-charts requires a browser environment");
     }
     const {
       container,
@@ -14817,16 +14862,26 @@ var ChartEngine = class {
     this.labels = resolveLabels(labels);
     this.tickActivityMs = tickActivityMs;
     this.maxCandles = config.maxCandles ?? 200;
+    this.defaultVisibleBars = config.defaultVisibleBars ?? DEFAULT_VISIBLE_BARS;
+    this.defaultMobileVisibleBars = config.defaultMobileVisibleBars;
     this.explicitMobileDivisor = config.mobileBarDivisor !== void 0;
     this.mobileBarDivisor = config.mobileBarDivisor ?? 2;
-    this.viewport = { ...this.viewport, endIndex: initialVisibleBars(this.mobileBarDivisor, this.explicitMobileDivisor) };
+    this._autoVisibleBars = config.defaultVisibleBars == null && config.defaultMobileVisibleBars == null;
+    this.targetCandleWidth = config.targetCandleWidth ?? DEFAULT_CANDLE_SLOT_WIDTH;
+    this.viewport = {
+      ...this.viewport,
+      endIndex: initialVisibleBars(this.mobileBarDivisor, this.explicitMobileDivisor, this.defaultVisibleBars, this.defaultMobileVisibleBars)
+    };
+    this._targetViewport = { ...this.viewport };
     this.maxSubPanes = config.maxSubPanes ?? 3;
     this.tickClosePriceSource = config.tickClosePriceSource ?? "bid";
     this.tradesThresholdForHorizontalLine = config.tradesThresholdForHorizontalLine ?? 2;
     if (config.positionRenderStyle === "line" || config.positionRenderStyle === "dot") {
       this.positionRenderStyleOverride = config.positionRenderStyle;
     } else {
-      const _storedStyle = localStorage.getItem(this.RENDER_STYLE_LS_KEY);
+      const _storedStyle = localStorage.getItem(
+        this.RENDER_STYLE_LS_KEY
+      );
       if (_storedStyle === "line" || _storedStyle === "dot") {
         this.positionRenderStyleOverride = _storedStyle;
       }
@@ -14964,7 +15019,8 @@ var ChartEngine = class {
     Object.assign(this.canvasWrap.style, {
       flex: "1",
       position: "relative",
-      overflow: "hidden"
+      overflow: "hidden",
+      touchAction: "none"
     });
     this.canvas = document.createElement("canvas");
     Object.assign(this.canvas.style, {
@@ -14994,8 +15050,11 @@ var ChartEngine = class {
       width: "100%",
       height: "100%",
       cursor: "crosshair",
-      touchAction: "none"
+      touchAction: "none",
+      userSelect: "none"
     });
+    this.drawCanvas.style["webkitUserSelect"] = "none";
+    this.drawCanvas.style["webkitTouchCallout"] = "none";
     this.canvasWrap.appendChild(this.drawCanvas);
     this.textInputEl = document.createElement("input");
     this.textInputEl.type = "text";
@@ -15077,6 +15136,12 @@ var ChartEngine = class {
         fontFamily: "'Inter', system-ui, sans-serif",
         whiteSpace: "nowrap"
       });
+      this.siOHLC2Span = document.createElement("span");
+      Object.assign(this.siOHLC2Span.style, {
+        fontSize: "14px",
+        fontFamily: "'Inter', system-ui, sans-serif",
+        whiteSpace: "nowrap"
+      });
       this.siStreamDot = document.createElement("span");
       Object.assign(this.siStreamDot.style, {
         width: "7px",
@@ -15086,7 +15151,14 @@ var ChartEngine = class {
         display: "inline-block",
         flexShrink: "0"
       });
-      this.siEl.append(this.siStreamDot, this.siSymbolSpan, this.siOHLCSpan);
+      const siRow1 = document.createElement("div");
+      Object.assign(siRow1.style, {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px"
+      });
+      siRow1.append(this.siStreamDot, this.siSymbolSpan, this.siOHLCSpan);
+      this.siEl.append(siRow1, this.siOHLC2Span);
       this.canvasWrap.appendChild(this.siEl);
     }
     if (showUI) {
@@ -15154,7 +15226,6 @@ var ChartEngine = class {
       );
       this.canvasWrap.appendChild(this.tradeButton.el);
       this.tradeButton.el.addEventListener("mouseenter", () => {
-        this._isHoveringTradeButton = true;
         this.crosshair = null;
         this.scheduleRender();
       });
@@ -15170,9 +15241,6 @@ var ChartEngine = class {
           this._tradeButtonClickData = { price, y };
         }
       });
-      this.tradeButton.el.addEventListener("mouseleave", () => {
-        this._isHoveringTradeButton = false;
-      });
     }
     middleRow.appendChild(this.canvasWrap);
     this.wrapper.appendChild(middleRow);
@@ -15229,45 +15297,58 @@ var ChartEngine = class {
     this.drawingManager.onStartTextEdit = (drawing) => this.showTextInput(drawing);
     this.panHandler = new PanHandler(
       this.drawCanvas,
-      () => this.viewport,
+      () => this._targetViewport,
       (v) => {
-        this.viewport = v;
+        this._targetViewport = v;
         this.clearDuration();
         this.checkNeedMoreData();
+        this.scheduleRender();
       },
       () => 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) => {
         const { priceH } = this.getChartLayout();
-        const range = this.getScaledPriceRange(this.viewport);
-        const pricePerPixel = (range.max - range.min) / priceH;
+        const currentRange = this._displayedPriceRange ?? this.getScaledPriceRange(this._targetViewport);
+        const pricePerPixel = (currentRange.max - currentRange.min) / priceH;
         this.pricePanOffset += deltaY * pricePerPixel;
         this.scheduleRender();
+      },
+      () => {
+        this._isPanning = true;
+      },
+      () => {
+        this._isPanning = false;
       }
     );
     this.zoomHandler = new ZoomHandler(
       this.drawCanvas,
-      () => this.viewport,
+      () => this._targetViewport,
       (v) => {
-        this.viewport = v;
+        this._targetViewport = v;
         this.clearDuration();
         this.checkNeedMoreData();
+        this.scheduleRender();
       },
       () => this.dataStore.length,
       () => this.scheduleRender(),
       () => this._cachedDrawRect ?? this.drawCanvas.getBoundingClientRect(),
       () => this.getChartLayout().chartW,
       (dx) => {
-        const vp = this.viewport;
+        const vp = this._targetViewport;
         const visibleBars = vp.endIndex - vp.startIndex;
         const barsPerPixel = visibleBars / this.drawCanvas.width;
         const shift = dx * barsPerPixel;
-        const maxStart = this.dataStore.length;
+        const maxStart = Math.max(0, this.dataStore.length - Math.floor(visibleBars / 2));
         const newStart = Math.max(0, Math.min(maxStart, vp.startIndex + shift));
-        this.viewport = { ...vp, startIndex: newStart, endIndex: newStart + visibleBars };
+        this._targetViewport = {
+          ...vp,
+          startIndex: newStart,
+          endIndex: newStart + visibleBars
+        };
         this.clearDuration();
         this.checkNeedMoreData();
+        this.scheduleRender();
       }
     );
     this.drawCanvas.addEventListener("mousemove", this.onMouseMove);
@@ -15280,6 +15361,7 @@ var ChartEngine = class {
     });
     this.drawCanvas.addEventListener("touchmove", this.onDrawingTouchMove, { passive: false });
     this.drawCanvas.addEventListener("touchend", this.onDrawingTouchEnd, { passive: false });
+    this.drawCanvas.addEventListener("contextmenu", (e) => e.preventDefault());
     document.addEventListener("keydown", this.onKeyDown);
     const onFullscreenChange = () => {
       const active = !!document.fullscreenElement;
@@ -15313,11 +15395,17 @@ var ChartEngine = class {
     this._displayedPriceRange = null;
     this._lockedAutoFitBase = null;
     this.dataStore.set(bars);
+    const rawW = (this._cachedWrapRect?.width ?? this.canvasWrap.getBoundingClientRect().width) - this.priceAxisWidth;
+    const autoChartW = this._autoVisibleBars && rawW > 0 ? rawW : void 0;
     this.viewport = {
       ...this.viewport,
-      startIndex: fitAll ? 0 : Math.max(0, bars.length - initialVisibleBars(this.mobileBarDivisor, this.explicitMobileDivisor) + LOOKAHEAD),
+      startIndex: fitAll ? 0 : Math.max(
+        0,
+        bars.length - initialVisibleBars(this.mobileBarDivisor, this.explicitMobileDivisor, this.defaultVisibleBars, this.defaultMobileVisibleBars, autoChartW, this.targetCandleWidth) + LOOKAHEAD
+      ),
       endIndex: bars.length + LOOKAHEAD
     };
+    this._targetViewport = { ...this.viewport };
     const hasVol = this.dataStore.hasVolumeData;
     if (!hasVol) this.showVolume = false;
     this.topBar?.setVolumeControl(this.showVolume, hasVol);
@@ -15342,6 +15430,7 @@ var ChartEngine = class {
       );
     }
     this.recomputeIndicators();
+    this.reanchorDrawingsByTimestamp();
     this.updateCountdownState();
     this.scheduleRender();
     return this;
@@ -15360,6 +15449,8 @@ var ChartEngine = class {
         startIndex: this.viewport.startIndex + n,
         endIndex: this.viewport.endIndex + n
       };
+      this._targetViewport = { ...this.viewport };
+      this.drawingManager.shiftBarIndices(n);
       this.recomputeIndicators();
       this.scheduleRender();
     }
@@ -15462,8 +15553,11 @@ var ChartEngine = class {
   }
   checkNeedMoreData() {
     if (!this.dataLoader || this.isFetching || this.noMoreData) return;
-    const threshold = Math.max(20, Math.round(initialVisibleBars(this.mobileBarDivisor, this.explicitMobileDivisor) * 0.25));
-    if (this.viewport.startIndex > threshold) return;
+    const threshold = Math.max(
+      20,
+      Math.round(initialVisibleBars(this.mobileBarDivisor, this.explicitMobileDivisor, this.defaultVisibleBars, this.defaultMobileVisibleBars) * 0.25)
+    );
+    if (this._targetViewport.startIndex > threshold) return;
     if (this.dataStore.length === 0) return;
     this.isFetching = true;
     const before = this.dataStore.all[0].time;
@@ -15676,7 +15770,10 @@ var ChartEngine = class {
         }
       }
     } : void 0;
-    const merged = deepMergeTheme(deepMergeTheme(base, this.themeOverrides?.[mode]), userOverride);
+    const merged = deepMergeTheme(
+      deepMergeTheme(base, this.themeOverrides?.[mode]),
+      userOverride
+    );
     return resolveCssVarsInTheme(merged, this.wrapper);
   }
   setTheme(theme) {
@@ -15740,7 +15837,13 @@ var ChartEngine = class {
         params: { ...s.currentParams },
         visible: s.visible
       })),
-      drawings: this.drawingManager.getDrawingsSnapshot(),
+      drawings: this.drawingManager.getDrawingsSnapshot().map((d) => ({
+        ...d,
+        points: d.points.map((p) => ({
+          ...p,
+          timestamp: this.dataStore.all[Math.floor(p.barIndex)]?.time
+        }))
+      })),
       positionRenderStyle: this.positionRenderStyle,
       tradeDisplayFilter: this.tradeDisplayFilter,
       canvasColors: Object.keys(this.settingsCanvasColors).length > 0 ? { ...this.settingsCanvasColors } : void 0
@@ -15790,7 +15893,21 @@ var ChartEngine = class {
           }
         }
       }
-      this.drawingManager.loadDrawings(state.drawings);
+      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)) };
+        })
+      }));
+      this.drawingManager.loadDrawings(resolvedDrawings);
       if (state.positionRenderStyle) {
         this.positionRenderStyleOverride = state.positionRenderStyle;
         this.positionRenderStyle = state.positionRenderStyle;
@@ -15807,6 +15924,27 @@ var ChartEngine = class {
     this.scheduleRender();
     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).
+   */
+  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;
+        }
+        pt.barIndex = lo + (pt.barIndex - Math.floor(pt.barIndex));
+      }
+    }
+  }
   /**
    * Resets all chart settings that are captured by `getState()` back to their
    * defaults (candlestick / dark / 1D / 1Y / volume on / no indicators / no drawings)
@@ -15859,6 +15997,7 @@ var ChartEngine = class {
     if (!this.siOHLCSpan) return;
     if (!bar) {
       this.siOHLCSpan.innerHTML = "";
+      if (this.siOHLC2Span) this.siOHLC2Span.innerHTML = "";
       return;
     }
     const up = bar.close >= bar.open;
@@ -15866,26 +16005,32 @@ var ChartEngine = class {
     const fmt = (n) => n.toFixed(this.dataStore.getPricePrecision());
     const fmtVol = (v) => v >= 1e6 ? (v / 1e6).toFixed(2) + "M" : v >= 1e3 ? (v / 1e3).toFixed(1) + "K" : v.toFixed(0);
     const ol = this.labels.ohlc;
-    const fields = [
+    const renderFields = (el, fields) => {
+      el.innerHTML = "";
+      for (const [lbl, val, clr] of fields) {
+        const span = document.createElement("span");
+        span.style.marginRight = "8px";
+        const key = document.createElement("span");
+        key.textContent = lbl + "\xA0";
+        key.style.color = this.theme.axisText;
+        key.style.opacity = "0.6";
+        const num = document.createElement("span");
+        num.textContent = val;
+        num.style.color = clr;
+        span.append(key, num);
+        el.appendChild(span);
+      }
+    };
+    renderFields(this.siOHLCSpan, [
       [ol.open, fmt(bar.open), this.theme.axisText],
-      [ol.high, fmt(bar.high), this.theme.axisText],
-      [ol.low, fmt(bar.low), this.theme.axisText],
-      [ol.close, fmt(bar.close), color],
-      ...bar.volume != null && bar.volume !== 0 ? [[ol.volume, fmtVol(bar.volume), this.theme.axisText]] : []
-    ];
-    this.siOHLCSpan.innerHTML = "";
-    for (const [lbl, val, clr] of fields) {
-      const span = document.createElement("span");
-      span.style.marginRight = "8px";
-      const key = document.createElement("span");
-      key.textContent = lbl + "\xA0";
-      key.style.color = this.theme.axisText;
-      key.style.opacity = "0.6";
-      const num = document.createElement("span");
-      num.textContent = val;
-      num.style.color = clr;
-      span.append(key, num);
-      this.siOHLCSpan.appendChild(span);
+      [ol.high, fmt(bar.high), this.theme.axisText]
+    ]);
+    if (this.siOHLC2Span) {
+      renderFields(this.siOHLC2Span, [
+        [ol.low, fmt(bar.low), this.theme.axisText],
+        [ol.close, fmt(bar.close), color],
+        ...bar.volume != null && bar.volume !== 0 ? [[ol.volume, fmtVol(bar.volume), this.theme.axisText]] : []
+      ]);
     }
   }
   setMinLots(lots) {
@@ -16354,7 +16499,9 @@ var ChartEngine = class {
   }
   updateCountdownState() {
     const INTRADAY = ["1m", "5m", "15m", "30m", "1h", "4h"];
-    const allowed = this.candleCountdownTimeframes === "all" ? true : (this.candleCountdownTimeframes ?? INTRADAY).includes(this.timeframe);
+    const allowed = this.candleCountdownTimeframes === "all" ? true : (this.candleCountdownTimeframes ?? INTRADAY).includes(
+      this.timeframe
+    );
     const should = this.showCandleCountdown && allowed && this.dataStore.length > 0;
     if (should && !this.countdownActive) {
       this.countdownActive = true;
@@ -16660,6 +16807,7 @@ var ChartEngine = class {
       this.getScaledPriceRange(this.viewport),
       priceH
     );
+    this.crosshair = null;
     this.draftOrderQtyInput?.show(yPx, this._minLots, this.theme, priceH);
     this.renderTradeLayer();
   }
@@ -16758,6 +16906,28 @@ var ChartEngine = class {
     ctx.fillRect(0, 0, totalW, totalH);
     const bars = this.dataStore.getVisible(viewport);
     if (bars.length === 0) return;
+    {
+      if (this._isPanning) {
+        this.viewport = { ...this._targetViewport };
+      } else {
+        const dStart = this._targetViewport.startIndex - this.viewport.startIndex;
+        const dEnd = this._targetViewport.endIndex - this.viewport.endIndex;
+        const visibleBars = this._targetViewport.endIndex - this._targetViewport.startIndex;
+        const epsilon = visibleBars * 2e-4;
+        if (Math.abs(dStart) < epsilon && Math.abs(dEnd) < epsilon) {
+          this.viewport = { ...this._targetViewport };
+        } else {
+          this.viewport = {
+            ...this.viewport,
+            startIndex: this.viewport.startIndex + dStart * VIEWPORT_LERP,
+            endIndex: this.viewport.endIndex + dEnd * VIEWPORT_LERP,
+            candleWidth: this._targetViewport.candleWidth,
+            candleGap: this._targetViewport.candleGap
+          };
+          this.scheduleRender();
+        }
+      }
+    }
     const isManualMode = this.priceScaleFactor !== 1 || this.pricePanOffset !== 0;
     if (!isManualMode) {
       this._lockedAutoFitBase = null;
@@ -17093,7 +17263,9 @@ var ChartEngine = class {
     }
     {
       const INTRADAY_TF = ["1m", "5m", "15m", "30m", "1h", "4h"];
-      const countdownAllowed = this.candleCountdownTimeframes === "all" ? true : (this.candleCountdownTimeframes ?? INTRADAY_TF).includes(this.timeframe);
+      const countdownAllowed = this.candleCountdownTimeframes === "all" ? true : (this.candleCountdownTimeframes ?? INTRADAY_TF).includes(
+        this.timeframe
+      );
       const showCountdown = this.showCandleCountdown && countdownAllowed && bars.length > 0 && viewport.endIndex >= this.dataStore.length - 1;
       const countdownBarIndex = showCountdown ? this.dataStore.length - 1 : void 0;
       if (this._debug) {
@@ -17191,7 +17363,7 @@ var ChartEngine = class {
       this.dataStore.getPricePrecision()
     );
     if (this.scrollToEndBtn) {
-      const atEnd = this.dataStore.length === 0 || this.viewport.endIndex >= this.dataStore.length - 0.5;
+      const atEnd = this.dataStore.length === 0 || this._targetViewport.endIndex >= this.dataStore.length - 0.5;
       if (atEnd !== !this.scrollToEndVisible) {
         this.scrollToEndVisible = !atEnd;
         this.scrollToEndBtn.style.opacity = atEnd ? "0" : "0.85";
@@ -17221,6 +17393,11 @@ var ChartEngine = class {
       this._mobileLayout = isMobile;
       this.leftBar?.setMobileMode(isMobile);
       this.topBar?.setMobileLayout(isMobile);
+      if (this.siEl) {
+        this.siEl.style.flexDirection = isMobile ? "column" : "row";
+        this.siEl.style.alignItems = isMobile ? "flex-start" : "center";
+        this.siEl.style.gap = isMobile ? "2px" : "8px";
+      }
       if (isMobile) {
         this.leftBarVisible = false;
         this.topBar?.setDrawingsBtnActive(false);
@@ -17311,6 +17488,164 @@ var ChartEngine = class {
       price: this.scaleManager.pixelToPrice(y, priceRange, priceH)
     };
   }
+  /** Shared close-button handler used by both mouse click and touch tap. */
+  _handleTradeLevelClose(closedLevel) {
+    if (closedLevel.bracketType) {
+      const parentLevel = this.levels.find((l) => l.label === closedLevel.label);
+      const isMarketDraftBracket = parentLevel?.orderType === "market" && parentLevel?.data?._isDraft === true;
+      if (isMarketDraftBracket) {
+        const bracketKey = closedLevel.bracketType === "stopLoss" ? "sl" : "tp";
+        this.updateDraftOrderBracket(bracketKey, null);
+        this.emitter.emit("tradeLevelEdit", {
+          label: closedLevel.label,
+          data: parentLevel?.data,
+          type: "pending",
+          changes: [
+            {
+              field: closedLevel.bracketType === "stopLoss" ? "REMOVE_SL" : "REMOVE_TP",
+              newPrice: 0,
+              data: closedLevel.data
+            }
+          ]
+        });
+        return;
+      }
+      const field = closedLevel.bracketType;
+      const existing = this.pendingLevelDrags.get(closedLevel.label) ?? [];
+      const filtered = existing.filter((c) => c.field !== field);
+      filtered.push({
+        field,
+        newPrice: 0,
+        oldPrice: 0,
+        isRemoval: true,
+        bracketOrderLabel: closedLevel.bracketOrderLabel
+      });
+      this.pendingLevelDrags.set(closedLevel.label, filtered);
+      this.selectedTradeLabel = closedLevel.label;
+      this.renderTradeLayer();
+      return;
+    }
+    const isDraftOrder = closedLevel.label === this.draftOrderLabel;
+    this.revertPendingChanges(closedLevel.label);
+    this.pendingLevelDrags.delete(closedLevel.label);
+    if (isDraftOrder) return;
+    const originalLevel = this.levels.find((l) => l.label === closedLevel.label);
+    const isEntryOrder = originalLevel?.type === "position" && !!originalLevel.entryPriceEditable;
+    const closeAction = closedLevel.type === "position" && !isEntryOrder ? "CLOSED" : "CANCELLED";
+    this.emitter.emit("tradeLevelClose", {
+      label: closedLevel.label,
+      type: closedLevel.type,
+      action: closeAction,
+      data: closedLevel.data
+    });
+  }
+  /** Activates the mobile crosshair at canvas coords (x, y). */
+  _activateMobileCrosshair(x, y) {
+    const rect = this._cachedDrawRect ?? this.drawCanvas.getBoundingClientRect();
+    const { chartW, priceH } = this.getChartLayout();
+    const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
+    const timeAxisY = rect.height - this.timeAxisHeight;
+    if (x >= chartW || y >= timeAxisY) return;
+    this._mobileCrosshairActive = true;
+    const rawBarIndex = this.scaleManager.pixelToBarIndex(x, this.viewport, chartW);
+    const price = this.scaleManager.pixelToPrice(y, priceRange, priceH);
+    const clamped = Math.max(
+      Math.floor(this.viewport.startIndex),
+      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 };
+    if (this.tradeButton) {
+      this.tradeButton.setY(y);
+      this.tradeButton.show();
+    }
+    this.scheduleRender();
+  }
+  /** Shared helper: initiate a trade level main-line drag from a hit area. */
+  _startTradeDragFromHit(dragHit, level, hitY) {
+    if (!this.tradeDragHandler) return;
+    if (dragHit.isBracket) {
+      this._pendingBracketOrderLabel = dragHit.bracketOrderLabel ?? null;
+      this._isBracketNew = false;
+      const isEntryOrder = level.entryPriceEditable === true;
+      const isDraft = level.data?._isDraft === true;
+      const all = this.dataStore.all;
+      const marketPrice = isEntryOrder || isDraft ? 0 : all[all.length - 1]?.close ?? 0;
+      this.tradeDragHandler.startBracketDrag(
+        level,
+        dragHit.bracketType,
+        dragHit.price,
+        marketPrice,
+        this._effectiveEntryPrice(level.label, level.price)
+      );
+    } else {
+      this._pendingBracketOrderLabel = null;
+      const isEntryOrder = level.entryPriceEditable === true;
+      if (isEntryOrder) {
+        this.selectedTradeLabel = dragHit.label;
+        const posLevel = level;
+        const allPos = this.dataStore.all;
+        const mktPricePos = allPos[allPos.length - 1]?.close ?? 0;
+        this.tradeDragHandler.startDrag(
+          level,
+          hitY,
+          dragHit.price,
+          posLevel.stopLossPrice,
+          posLevel.takeProfitPrice,
+          posLevel.side,
+          mktPricePos,
+          posLevel.orderType
+        );
+      } else {
+        const pendingLevel = level;
+        const allBars = this.dataStore.all;
+        const mktPrice = allBars[allBars.length - 1]?.close ?? 0;
+        this.tradeDragHandler.startDrag(
+          level,
+          hitY,
+          dragHit.price,
+          void 0,
+          void 0,
+          pendingLevel.side,
+          mktPrice,
+          pendingLevel.orderType
+        );
+      }
+    }
+  }
+  /** Shared helper: initiate a +SL/+TP add-bracket drag from a hit area. */
+  _startAddBracketFromHit(addHit, hitY) {
+    const level = this.levels.find((l) => l.label === addHit.label);
+    if (!level || !this.tradeDragHandler) return;
+    const { priceH } = this.getChartLayout();
+    const priceRange = this.getScaledPriceRange(this.viewport);
+    const btnCenterY = addHit.y + addHit.h / 2;
+    const initialPrice = this.scaleManager.pixelToPrice(btnCenterY, priceRange, priceH);
+    const isEntryOrder = level.entryPriceEditable === true;
+    const isDraft = level.data?._isDraft === true;
+    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
+      });
+    }
+    this._pendingBracketOrderLabel = null;
+    this._isBracketNew = true;
+    this.tradeDragHandler.startBracketDrag(
+      level,
+      addHit.bracketType,
+      initialPrice,
+      marketPrice,
+      this._effectiveEntryPrice(level.label, level.price)
+    );
+  }
   // ── Text drawing input ────────────────────────────────────────────────────
   showTextInput(drawing) {
     if (!this.textInputEl) return;
@@ -17481,6 +17816,7 @@ var ChartEngine = class {
         startIndex: newEnd - visible,
         endIndex: newEnd
       };
+      this._targetViewport = { ...this.viewport };
       this.pricePanOffset = startPan * (1 - prog);
       this.render();
       if (raw < 1) {
@@ -17500,8 +17836,12 @@ var ChartEngine = class {
   resetTimeAxis() {
     const total = this.dataStore.length;
     if (total === 0) return;
-    const newStart = Math.max(0, total - initialVisibleBars(this.mobileBarDivisor, this.explicitMobileDivisor) + LOOKAHEAD);
+    const newStart = Math.max(
+      0,
+      total - initialVisibleBars(this.mobileBarDivisor, this.explicitMobileDivisor, this.defaultVisibleBars, this.defaultMobileVisibleBars) + LOOKAHEAD
+    );
     this.viewport = { ...this.viewport, startIndex: newStart, endIndex: total + LOOKAHEAD };
+    this._targetViewport = { ...this.viewport };
     this.scheduleRender();
   }
   /** Reset both price and time axes to their default state. */
@@ -17560,6 +17900,8 @@ var ChartEngine = class {
     });
   }
 };
+_ChartEngine.DRAW_GESTURE_THRESHOLD = 4;
+var ChartEngine = _ChartEngine;
 
 // src/data/WebSocketAdapter.ts
 var WebSocketAdapter = class {