acttrader-charts 1.0.13 → 1.0.15

package/dist/index.js

@@ -117,6 +117,33 @@ var _ScaleManager = class _ScaleManager {
 };
 _ScaleManager.VERTICAL_PADDING_PX = 20;
 var ScaleManager = _ScaleManager;
+function niceStep(rawStep) {
+  if (!isFinite(rawStep) || rawStep <= 0) return 1;
+  const exp = Math.floor(Math.log10(rawStep));
+  const base = Math.pow(10, exp);
+  const frac = rawStep / base;
+  const nice = frac < 1.5 ? 1 : frac < 3.5 ? 2 : frac < 7.5 ? 5 : 10;
+  return nice * base;
+}
+function generatePriceTicks(range, chartHeight, targetPxPerLabel = 48) {
+  const { min, max } = range;
+  if (!isFinite(min) || !isFinite(max) || max <= min) return [min];
+  const approxSteps = Math.max(2, Math.floor(chartHeight / targetPxPerLabel));
+  const rawStep = (max - min) / approxSteps;
+  const step = niceStep(rawStep);
+  const first = Math.ceil(min / step) * step;
+  const ticks = [];
+  const eps = step * 1e-6;
+  for (let v = first; v <= max + eps; v += step) {
+    ticks.push(v);
+  }
+  return ticks;
+}
+function precisionForStep(step, minPrecision = 0) {
+  if (!isFinite(step) || step <= 0) return minPrecision;
+  const exp = Math.floor(Math.log10(step));
+  return Math.max(minPrecision, -exp);
+}
 
 // src/core/EventEmitter.ts
 var EventEmitter = class {
@@ -169,6 +196,11 @@ function resolveCssVarsInTheme(theme, container) {
   container.appendChild(tmp);
   const resolve = (value) => {
     if (!value.includes("var(")) return value;
+    value = value.replace(
+      /rgba\(\s*(var\([^)]+\))\s*,\s*([0-9.]+)\s*\)/g,
+      "rgb($1 / $2)"
+    );
+    tmp.style.color = "";
     tmp.style.color = value;
     const resolved = getComputedStyle(tmp).color;
     return resolved || value;
@@ -535,7 +567,8 @@ var DEFAULT_LABELS = {
     toggleDrawingTitle: "Toggle Drawing Tools",
     toggleFullscreenTitle: "Toggle Fullscreen",
     exitFullscreenTitle: "Exit Fullscreen",
-    settingsTitle: "Settings"
+    settingsTitle: "Settings",
+    tfcToggleTitle: "Trade from Charts"
   },
   bottomBar: {
     durations: {
@@ -726,8 +759,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, onDragStart, onDragEnd) {
+  constructor(canvas, getViewport, setViewport, totalBars, onUpdate, isLocked = () => false, panY, onDragStart, onDragEnd, momentumOptions) {
     this.canvas = canvas;
     this.getViewport = getViewport;
     this.setViewport = setViewport;
@@ -745,7 +777,12 @@ var _PanHandler = class _PanHandler {
     this.dragStartY = 0;
     this.hasPanned = false;
     this.dragStartFired = false;
+    // ── Velocity sample buffer (rolling 100 ms window) ─────────────────────────
+    this._velBuffer = [];
+    // ── In-flight momentum RAF ─────────────────────────────────────────────────
+    this._momentumRafId = null;
     this.onMouseDown = (e) => {
+      this._stopMomentum();
       if (this.isLocked()) return;
       this.isDragging = true;
       this.isTouchDrag = false;
@@ -754,10 +791,15 @@ var _PanHandler = class _PanHandler {
       this.dragStartX = e.clientX;
       this.dragStartY = e.clientY;
       this.hasPanned = false;
+      this._velBuffer.length = 0;
     };
     this.onTouchStart = (e) => {
+      if (e.touches.length !== 1) {
+        this._stopMomentum();
+        return;
+      }
+      this._stopMomentum();
       if (this.isLocked()) return;
-      if (e.touches.length !== 1) return;
       this.isDragging = true;
       this.isTouchDrag = true;
       this.lastX = e.touches[0].clientX;
@@ -765,6 +807,7 @@ var _PanHandler = class _PanHandler {
       this.dragStartX = e.touches[0].clientX;
       this.dragStartY = e.touches[0].clientY;
       this.dragStartFired = true;
+      this._velBuffer.length = 0;
       this.onDragStart?.();
     };
     this.onMouseMove = (e) => {
@@ -787,6 +830,7 @@ var _PanHandler = class _PanHandler {
         this.canvas.style.cursor = "grabbing";
       }
       if (this.hasPanned) {
+        this._recordVelocitySample(deltaX, performance.now());
         this.pan(deltaX);
         if (this.panY) this.panY(deltaY);
       }
@@ -800,6 +844,7 @@ var _PanHandler = class _PanHandler {
       e.preventDefault();
       const deltaX = e.touches[0].clientX - this.lastX;
       const deltaY = e.touches[0].clientY - this.lastY;
+      this._recordVelocitySample(deltaX, performance.now());
       this.pan(deltaX);
       if (this.panY) this.panY(deltaY);
       this.lastX = e.touches[0].clientX;
@@ -811,9 +856,16 @@ var _PanHandler = class _PanHandler {
       this.hasPanned = false;
       if (this.dragStartFired) {
         this.dragStartFired = false;
-        this.onDragEnd?.();
+        const velocity = this._computeReleaseVelocity();
+        this._velBuffer.length = 0;
+        const launched = this._startMomentum(velocity);
+        if (!launched) this.onDragEnd?.();
       }
     };
+    this._momentumEnabled = momentumOptions?.enabled ?? true;
+    this._momentumDecay = Math.min(0.99, Math.max(0.8, momentumOptions?.decay ?? 0.95));
+    this._momentumThreshold = momentumOptions?.threshold ?? 0.3;
+    this._momentumMaxVelocity = momentumOptions?.maxVelocity ?? 6;
     this.attach();
   }
   attach() {
@@ -824,12 +876,14 @@ var _PanHandler = class _PanHandler {
     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 any in-progress pan gesture or momentum (e.g. when a drawing drag takes over). */
   cancel() {
+    this._stopMomentum();
     this.isDragging = false;
     this.hasPanned = false;
   }
   destroy() {
+    this._stopMomentum();
     this.canvas.removeEventListener("mousedown", this.onMouseDown);
     window.removeEventListener("mousemove", this.onMouseMove);
     window.removeEventListener("mouseup", this.onMouseUp);
@@ -837,6 +891,73 @@ var _PanHandler = class _PanHandler {
     window.removeEventListener("touchmove", this.onTouchMove);
     window.removeEventListener("touchend", this.onMouseUp);
   }
+  // ── Velocity tracking ────────────────────────────────────────────────────────
+  _recordVelocitySample(dx, t) {
+    this._velBuffer.push({ dx, t });
+    const cutoff = t - _PanHandler.VEL_WINDOW_MS;
+    let i = 0;
+    while (i < this._velBuffer.length && this._velBuffer[i].t < cutoff) i++;
+    if (i > 0) this._velBuffer.splice(0, i);
+  }
+  _computeReleaseVelocity() {
+    const buf = this._velBuffer;
+    if (buf.length < 2) return 0;
+    const totalDx = buf.reduce((acc, s) => acc + s.dx, 0);
+    const dt = buf[buf.length - 1].t - buf[0].t;
+    if (dt <= 0) return 0;
+    const raw = totalDx / dt;
+    return Math.sign(raw) * Math.min(Math.abs(raw), this._momentumMaxVelocity);
+  }
+  // ── Momentum animation ────────────────────────────────────────────────────────
+  /**
+   * Launch momentum scrolling with the given initial velocity (px/ms).
+   * Returns `true` if momentum was successfully launched, `false` otherwise.
+   */
+  _startMomentum(velocity) {
+    if (!this._momentumEnabled) return false;
+    if (Math.abs(velocity) < this._momentumThreshold) return false;
+    let lastTime = null;
+    let vel = velocity;
+    const decay = this._momentumDecay;
+    const tick = (now) => {
+      if (lastTime === null) {
+        lastTime = now;
+        this._momentumRafId = requestAnimationFrame(tick);
+        return;
+      }
+      const dt = now - lastTime;
+      lastTime = now;
+      vel *= Math.pow(decay, dt / 16.67);
+      const pixelDelta = vel * dt;
+      if (Math.abs(pixelDelta) < 0.5) {
+        this._stopMomentum();
+        this.onDragEnd?.();
+        return;
+      }
+      if (this.isLocked()) {
+        this._stopMomentum();
+        this.onDragEnd?.();
+        return;
+      }
+      const prevStart = this.getViewport().startIndex;
+      this.pan(pixelDelta);
+      if (this.getViewport().startIndex === prevStart) {
+        this._stopMomentum();
+        this.onDragEnd?.();
+        return;
+      }
+      this._momentumRafId = requestAnimationFrame(tick);
+    };
+    this._momentumRafId = requestAnimationFrame(tick);
+    return true;
+  }
+  _stopMomentum() {
+    if (this._momentumRafId !== null) {
+      cancelAnimationFrame(this._momentumRafId);
+      this._momentumRafId = null;
+    }
+  }
+  // ── Core pan logic ────────────────────────────────────────────────────────────
   pan(deltaX) {
     const vp = this.getViewport();
     const visibleBars = vp.endIndex - vp.startIndex;
@@ -850,6 +971,7 @@ var _PanHandler = class _PanHandler {
   }
 };
 _PanHandler.DRAG_THRESHOLD = 4;
+_PanHandler.VEL_WINDOW_MS = 100;
 var PanHandler = _PanHandler;
 
 // src/interaction/ZoomHandler.ts
@@ -889,11 +1011,11 @@ var ZoomHandler = class {
         Math.max(MIN_VISIBLE_BARS, Math.min(MAX_VISIBLE_BARS, visibleBars * zoomFactor))
       );
       if (vp.endIndex >= this.totalBars()) {
-        const newEnd = vp.endIndex;
+        const newEnd = Math.min(vp.endIndex, this.totalBars() + Math.floor(newVisible / 2));
         const newStart = Math.max(0, newEnd - newVisible);
-        this.setViewport({ ...vp, startIndex: newStart, endIndex: newEnd });
+        this.setViewport({ ...vp, startIndex: newStart, endIndex: newStart + newVisible });
       } else {
-        const mouseRatio = e.offsetX / this.canvas.width;
+        const mouseRatio = e.offsetX / this.getChartWidth();
         const pivotBar = vp.startIndex + visibleBars * mouseRatio;
         const newStart = Math.max(0, pivotBar - newVisible * mouseRatio);
         this.setViewport({ ...vp, startIndex: newStart, endIndex: newStart + newVisible });
@@ -1430,18 +1552,18 @@ function renderHighLow(ctx, bars, viewport, priceRange, scale, theme, chartWidth
 }
 
 // src/overlays/GridOverlay.ts
-function renderGrid(ctx, priceRange, scale, theme, chartWidth, chartHeight, gridLines = 6) {
+function renderGrid(ctx, priceRange, scale, theme, chartWidth, chartHeight, gridLines) {
   ctx.save();
   ctx.globalAlpha = 0.6;
   ctx.strokeStyle = theme.grid;
   ctx.lineWidth = 1;
-  const step = (priceRange.max - priceRange.min) / gridLines;
   ctx.beginPath();
-  for (let i = 0; i <= gridLines; i++) {
-    const price = priceRange.min + step * i;
-    const y = Math.round(scale.yToPixel(price, priceRange, chartHeight)) + 0.5;
-    ctx.moveTo(0, y);
-    ctx.lineTo(chartWidth, y);
+  {
+    for (const price of generatePriceTicks(priceRange, chartHeight)) {
+      const y = Math.round(scale.yToPixel(price, priceRange, chartHeight)) + 0.5;
+      ctx.moveTo(0, y);
+      ctx.lineTo(chartWidth, y);
+    }
   }
   ctx.stroke();
   const vertCols = Math.max(1, Math.floor(chartWidth / 80));
@@ -1458,19 +1580,19 @@ function renderGrid(ctx, priceRange, scale, theme, chartWidth, chartHeight, grid
 
 // src/overlays/CrosshairOverlay.ts
 var SUB_DAILY = ["1m", "5m", "15m", "30m", "1h", "4h"];
-function formatCrosshairTime(ts, timeframe) {
+function formatCrosshairTime(ts, timeframe, timezone = "UTC") {
   const d = new Date(ts);
   if (SUB_DAILY.includes(timeframe)) {
-    const date = d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" });
-    const time = d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false, timeZone: "UTC" });
+    const date = d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: timezone });
+    const time = d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false, timeZone: timezone });
     return `${date}  ${time}`;
   }
   if (timeframe === "1M") {
-    return d.toLocaleDateString("en-US", { month: "short", year: "numeric", timeZone: "UTC" });
+    return d.toLocaleDateString("en-US", { month: "short", year: "numeric", timeZone: timezone });
   }
-  return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" });
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: timezone });
 }
-function renderCrosshair(ctx, pos, priceRange, viewport, scale, theme, chartWidth, chartHeight, priceAxisWidth, axisY, timeframe, pricePrecision = 2, cfg = DEFAULT_CROSSHAIR_CONFIG) {
+function renderCrosshair(ctx, pos, priceRange, viewport, scale, theme, chartWidth, chartHeight, priceAxisWidth, axisY, timeframe, pricePrecision = 2, cfg = DEFAULT_CROSSHAIR_CONFIG, timezone = "UTC") {
   const x = scale.xToPixel(pos.barIndex, viewport, chartWidth);
   const y = scale.yToPixel(pos.price, priceRange, chartHeight);
   ctx.setLineDash([4, 4]);
@@ -1498,7 +1620,7 @@ function renderCrosshair(ctx, pos, priceRange, viewport, scale, theme, chartWidt
   ctx.textAlign = "left";
   ctx.fillText(priceLabel, chartWidth + labelPad, y + 4);
   if (pos.bar) {
-    const timeLabel = formatCrosshairTime(pos.bar.time, timeframe);
+    const timeLabel = formatCrosshairTime(pos.bar.time, timeframe, timezone);
     const tw = ctx.measureText(timeLabel).width;
     const boxW = tw + labelPad * 2;
     const boxX = Math.max(0, Math.min(chartWidth - boxW, x - boxW / 2));
@@ -1513,8 +1635,70 @@ function renderCrosshair(ctx, pos, priceRange, viewport, scale, theme, chartWidt
   }
 }
 
+// src/overlays/TradeLevelCluster.ts
+function detectClusters(measured, thresholdPx, excludeLabels = /* @__PURE__ */ new Set()) {
+  const eligible = measured.filter((m) => !excludeLabels.has(m.level.label)).sort((a, b) => a.y - b.y);
+  if (eligible.length < 2) return [];
+  const groups = [];
+  let currentGroup = [eligible[0]];
+  let groupStartY = eligible[0].y;
+  for (let i = 1; i < eligible.length; i++) {
+    const m = eligible[i];
+    if (m.y - groupStartY <= thresholdPx) {
+      currentGroup.push(m);
+    } else {
+      groups.push(currentGroup);
+      currentGroup = [m];
+      groupStartY = m.y;
+    }
+  }
+  groups.push(currentGroup);
+  return groups.filter((g) => g.length >= 2).map((members) => {
+    const id = "cluster:" + members.map((m) => m.level.label).sort().join("|");
+    const centerY = members.reduce((sum, m) => sum + m.y, 0) / members.length;
+    const centerPrice = members.reduce((sum, m) => sum + m.price, 0) / members.length;
+    return { id, members, centerY, centerPrice };
+  });
+}
+function computeFanOutLayout(cluster, boxH, gapPx = 4) {
+  const n = cluster.members.length;
+  const totalH = n * boxH + (n - 1) * gapPx;
+  const startY = cluster.centerY - totalH / 2;
+  const sorted = [...cluster.members].sort((a, b) => a.y - b.y);
+  const result = /* @__PURE__ */ new Map();
+  for (let i = 0; i < sorted.length; i++) {
+    result.set(sorted[i].level.label, startY + i * (boxH + gapPx));
+  }
+  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 PAD_X = 12;
+  const textW = ctx.measureText(text).width;
+  const EXPAND_ICON_W = 16;
+  const badgeW = PAD_X + textW + EXPAND_ICON_W + PAD_X;
+  const badgeH = 24;
+  const badgeX = (chartW - badgeW) / 2;
+  const badgeY = cluster.centerY - badgeH / 2;
+  return { badgeX, badgeY, badgeW, badgeH, text };
+}
+function hitTestClusterBadge(x, y, areas) {
+  return areas.find((a) => x >= a.x && x <= a.x + a.w && y >= a.y && y <= a.y + a.h) ?? null;
+}
+
 // src/overlays/TradeLevelOverlay.ts
 var BOX_PAD_X = 8;
+var PILL_PAD_X = 6;
+var PILL_GAP = 6;
 var BOX_PAD_Y = 4;
 var ROW_H = 16;
 var BOX_RADIUS = 3;
@@ -1631,7 +1815,7 @@ function isDraggable(level) {
     return !!level.entryPriceEditable;
   return false;
 }
-function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH, precision, hoveredLabel = null, draggingLabel = null, dragNewPrice = null, selectedLabel = null, pendingLabels = /* @__PURE__ */ new Set(), positionStyle = "line", hideConfirmCancel = false, draftOrderLabel = null, draftBracketPnl = {}) {
+function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH, precision, hoveredLabel = null, draggingLabel = null, dragNewPrice = null, selectedLabel = null, pendingLabels = /* @__PURE__ */ new Set(), positionStyle = "line", hideConfirmCancel = false, draftOrderLabel = null, draftBracketPnl = {}, expandedClusters = /* @__PURE__ */ new Set(), clusterThresholdPx = 0, showQuantityField = false) {
   if (levels.length === 0)
     return {
       hitAreas: [],
@@ -1639,7 +1823,9 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
       hoverAreas: [],
       dragAreas: [],
       confirmAreas: [],
-      addBracketAreas: []
+      addBracketAreas: [],
+      clusterBadgeAreas: [],
+      clusters: []
     };
   const colors = theme.tradeLevels;
   const boxH = ROW_H + BOX_PAD_Y * 2;
@@ -1667,16 +1853,52 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
     const effectivePending = hasPending && !hideConfirmCancel;
     const confirmW = effectivePending ? (CONFIRM_R * 2 + CONFIRM_GAP) * 2 : 0;
     const closeW = effectivePending || hideConfirmCancel ? 0 : EDIT_R * 2 + EDIT_GAP + CLOSE_R * 2 + BOX_PAD_X / 2;
-    const bW = BOX_PAD_X + pnlW + labelW + BOX_PAD_X + confirmW + closeW;
+    const isDraftLevel = level.data?._isDraft === true;
+    const qtyPillText = showQuantityField && isDraftLevel && level.type === "pending" && level.lots !== void 0 ? String(level.lots) : null;
+    const pillW = qtyPillText ? PILL_PAD_X + ctx.measureText(qtyPillText).width + PILL_PAD_X + PILL_GAP : 0;
+    const bW = BOX_PAD_X + pillW + pnlW + labelW + BOX_PAD_X + confirmW + closeW;
     measured.push({ level, price, y, boxW: bW, boxH });
   }
+  const excludeFromClustering = /* @__PURE__ */ new Set();
+  if (draftOrderLabel) excludeFromClustering.add(draftOrderLabel);
+  const clusters = clusterThresholdPx > 0 ? detectClusters(measured, clusterThresholdPx, excludeFromClustering) : [];
+  const collapsedClusters = clusters.filter((c) => !expandedClusters.has(c.id));
+  const expandedClusterList = clusters.filter((c) => expandedClusters.has(c.id));
+  const collapsedLabels = /* @__PURE__ */ new Set();
+  for (const c of collapsedClusters) {
+    for (const m of c.members) collapsedLabels.add(m.level.label);
+  }
+  const expandedFanLayouts = /* @__PURE__ */ new Map();
+  for (const ec of expandedClusterList) {
+    expandedFanLayouts.set(ec.id, computeFanOutLayout(ec, boxH, 4));
+  }
+  const labelToExpandedCluster = /* @__PURE__ */ new Map();
+  for (const ec of expandedClusterList) {
+    for (const m of ec.members) labelToExpandedCluster.set(m.level.label, ec);
+  }
   measured.sort((a, b) => a.y - b.y);
   const placed = [];
   const layouts = /* @__PURE__ */ new Map();
   for (const m of measured) {
-    const centeredY = m.y - m.boxH / 2;
-    const overlaps = placed.some((p) => rectsOverlapY(centeredY, m.boxH, p.boxY, p.boxH));
-    const boxY = overlaps ? centeredY - m.boxH - 2 : centeredY;
+    if (collapsedLabels.has(m.level.label)) continue;
+    const ec = labelToExpandedCluster.get(m.level.label);
+    if (ec) {
+      const fanMap = expandedFanLayouts.get(ec.id);
+      const fanY = fanMap?.get(m.level.label);
+      if (fanY !== void 0) {
+        placed.push({ label: m.level.label, boxY: fanY, boxH: m.boxH });
+        layouts.set(m.level.label, { price: m.price, y: m.y, boxY: fanY, boxW: m.boxW, boxH: m.boxH });
+        continue;
+      }
+    }
+    let boxY = m.y - m.boxH / 2;
+    let attempts = 0;
+    while (attempts < placed.length + 1) {
+      const overlaps = placed.some((p) => rectsOverlapY(boxY, m.boxH, p.boxY, p.boxH));
+      if (!overlaps) break;
+      boxY -= m.boxH + 2;
+      attempts++;
+    }
     placed.push({ label: m.level.label, boxY, boxH: m.boxH });
     layouts.set(m.level.label, { price: m.price, y: m.y, boxY, boxW: m.boxW, boxH: m.boxH });
   }
@@ -1692,9 +1914,10 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
     selectedLabel
   );
   const activeLabel = hoveredLabel ?? selectedLabel;
+  const visibleMeasured = measured.filter((m) => !collapsedLabels.has(m.level.label));
   const drawOrder = [
-    ...measured.filter((m) => m.level.label !== activeLabel),
-    ...measured.filter((m) => m.level.label === activeLabel)
+    ...visibleMeasured.filter((m) => m.level.label !== activeLabel),
+    ...visibleMeasured.filter((m) => m.level.label === activeLabel)
   ];
   const hitAreas = [];
   const editAreas = [];
@@ -1702,6 +1925,11 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
   const dragAreas = [];
   const confirmAreas = [];
   const addBracketAreas = [];
+  const clusterBadgeAreas = [];
+  const draftQtyPillAreas = [];
+  for (const cluster of collapsedClusters) {
+    drawClusterBadge(ctx, cluster, chartW, theme, clusterBadgeAreas);
+  }
   for (const { level } of drawOrder) {
     const layout = layouts.get(level.label);
     if (!layout) continue;
@@ -1730,11 +1958,148 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
       confirmAreas,
       addBracketAreas,
       hideConfirmCancel,
-      level.label === draftOrderLabel ? draftBracketPnl : void 0
+      level.label === draftOrderLabel ? draftBracketPnl : void 0,
+      showQuantityField,
+      draftQtyPillAreas
     );
+    const ec = labelToExpandedCluster.get(level.label);
+    if (ec && layout.boxY !== layout.y - boxH / 2) {
+      drawFanConnector(ctx, layout.boxY + boxH / 2, layout.y, chartW, theme);
+    }
+  }
+  if (selectedLabel !== null && !layouts.has(selectedLabel)) {
+    const offLevel = levels.find((l) => l.label === selectedLabel);
+    if (offLevel) {
+      const bh = offLevel;
+      const slDragKey = `${offLevel.label}:stopLoss`;
+      const tpDragKey = `${offLevel.label}:takeProfit`;
+      const fallbackX = chartW * BRACKET_BASE_RATIO;
+      if (bh.stopLossPrice !== void 0) {
+        drawBracketLine(
+          ctx,
+          bh,
+          "stopLoss",
+          bh.stopLossPrice,
+          scale,
+          priceRange,
+          priceH,
+          bracketLineXMap.get(slDragKey) ?? fallbackX,
+          chartW,
+          theme,
+          precision,
+          draggingLabel,
+          dragNewPrice,
+          hitAreas,
+          dragAreas,
+          hideConfirmCancel,
+          bh._slOrderLabel
+        );
+      }
+      if (bh.takeProfitPrice !== void 0) {
+        drawBracketLine(
+          ctx,
+          bh,
+          "takeProfit",
+          bh.takeProfitPrice,
+          scale,
+          priceRange,
+          priceH,
+          bracketLineXMap.get(tpDragKey) ?? fallbackX,
+          chartW,
+          theme,
+          precision,
+          draggingLabel,
+          dragNewPrice,
+          hitAreas,
+          dragAreas,
+          hideConfirmCancel,
+          bh._tpOrderLabel
+        );
+      }
+    }
   }
   ctx.restore();
-  return { hitAreas, editAreas, hoverAreas, dragAreas, confirmAreas, addBracketAreas };
+  return {
+    hitAreas,
+    editAreas,
+    hoverAreas,
+    dragAreas,
+    confirmAreas,
+    addBracketAreas,
+    clusterBadgeAreas,
+    clusters,
+    draftQtyPillArea: draftQtyPillAreas[0]
+  };
+}
+var BADGE_FONT = "bold 12px 'Inter', system-ui, sans-serif";
+var BADGE_PAD_X = 12;
+var BADGE_H = 24;
+var BADGE_RADIUS = 12;
+function drawClusterBadge(ctx, cluster, chartW, theme, clusterBadgeAreas) {
+  const mono = monoColor(theme);
+  const isDark = theme.background !== "#ffffff";
+  ctx.save();
+  ctx.strokeStyle = mono;
+  ctx.globalAlpha = 0.12;
+  ctx.lineWidth = 1;
+  ctx.setLineDash([4, 4]);
+  for (const m of cluster.members) {
+    ctx.beginPath();
+    ctx.moveTo(0, m.y);
+    ctx.lineTo(chartW, m.y);
+    ctx.stroke();
+  }
+  ctx.setLineDash([]);
+  ctx.restore();
+  ctx.save();
+  ctx.font = BADGE_FONT;
+  const layout = buildClusterBadgeLayout(cluster, chartW, ctx);
+  const { badgeX, badgeY, badgeW, text } = layout;
+  const expandIcon = " \u25B8";
+  const bgColor = isDark ? "rgba(40,40,40,0.92)" : "rgba(240,240,240,0.92)";
+  ctx.fillStyle = bgColor;
+  ctx.beginPath();
+  ctx.roundRect(badgeX, badgeY, badgeW, BADGE_H, BADGE_RADIUS);
+  ctx.fill();
+  ctx.strokeStyle = mono;
+  ctx.globalAlpha = 0.3;
+  ctx.lineWidth = 1;
+  ctx.stroke();
+  ctx.globalAlpha = 1;
+  ctx.fillStyle = mono;
+  ctx.globalAlpha = 0.85;
+  ctx.textBaseline = "middle";
+  ctx.textAlign = "left";
+  ctx.fillText(text + expandIcon, badgeX + BADGE_PAD_X, badgeY + BADGE_H / 2);
+  ctx.globalAlpha = 1;
+  ctx.restore();
+  clusterBadgeAreas.push({
+    clusterId: cluster.id,
+    x: badgeX,
+    y: badgeY,
+    w: badgeW,
+    h: BADGE_H
+  });
+}
+function drawFanConnector(ctx, fanCenterY, realY, chartW, theme) {
+  if (Math.abs(fanCenterY - realY) < 2) return;
+  const mono = monoColor(theme);
+  ctx.save();
+  ctx.strokeStyle = mono;
+  ctx.globalAlpha = 0.25;
+  ctx.lineWidth = 1;
+  ctx.setLineDash([2, 3]);
+  const connectorX = chartW - 8;
+  ctx.beginPath();
+  ctx.moveTo(connectorX, fanCenterY);
+  ctx.lineTo(connectorX, realY);
+  ctx.stroke();
+  ctx.setLineDash([]);
+  ctx.beginPath();
+  ctx.moveTo(connectorX - 4, realY);
+  ctx.lineTo(connectorX + 4, realY);
+  ctx.stroke();
+  ctx.restore();
 }
 function drawDotHoverBox(ctx, level, y, dotX, dotR, theme, precision) {
   const pl = level;
@@ -1794,7 +2159,7 @@ function drawDotHoverBox(ctx, level, y, dotX, dotR, theme, precision) {
   });
   ctx.restore();
 }
-function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered, selected, scale, priceRange, priceH, draggingLabel, dragNewPrice, bracketLineXMap, hasPendingChanges, positionStyle, hitAreas, editAreas, hoverAreas, dragAreas, confirmAreas, addBracketAreas, hideConfirmCancel = false, draftBracketPnl) {
+function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered, selected, scale, priceRange, priceH, draggingLabel, dragNewPrice, bracketLineXMap, hasPendingChanges, positionStyle, hitAreas, editAreas, hoverAreas, dragAreas, confirmAreas, addBracketAreas, hideConfirmCancel = false, draftBracketPnl, showQuantityField = false, draftQtyPillAreas) {
   const { y, boxY, boxW, boxH } = layout;
   const color = levelColor(level, colors, theme);
   const active = hovered || selected;
@@ -1982,6 +2347,29 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
   ctx.fill();
   ctx.stroke();
   let textX = boxX + BOX_PAD_X;
+  const isDraftLevel = level.data?._isDraft === true;
+  if (showQuantityField && isDraftLevel && level.type === "pending" && level.lots !== void 0) {
+    const qtyText = String(level.lots);
+    ctx.font = FONT_MAIN;
+    const pillContentW = ctx.measureText(qtyText).width;
+    const pillW = PILL_PAD_X + pillContentW + PILL_PAD_X;
+    const pillX = textX;
+    ctx.save();
+    ctx.strokeStyle = monoColor(theme);
+    ctx.globalAlpha = 0.35;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(pillX + pillW, boxY + 3);
+    ctx.lineTo(pillX + pillW, boxY + boxH - 3);
+    ctx.stroke();
+    ctx.restore();
+    ctx.fillStyle = monoColor(theme);
+    ctx.textAlign = "left";
+    ctx.textBaseline = "middle";
+    ctx.fillText(qtyText, pillX + PILL_PAD_X, midY);
+    draftQtyPillAreas?.push({ label: level.label, pillX, pillY: boxY, pillW, pillH: boxH });
+    textX += pillW + PILL_GAP;
+  }
   if (pnlText) {
     const pnlColor = pnl !== void 0 ? pnl >= 0 ? theme.candle.up : theme.candle.down : monoColor(theme);
     ctx.font = FONT_PNL;
@@ -2365,6 +2753,152 @@ function hitTestTradeLevelAddBracket(x, y, areas) {
   return areas.find((a) => x >= a.x && x <= a.x + a.w && y >= a.y && y <= a.y + a.h) ?? null;
 }
 
+// src/overlays/OffViewportLevelIndicator.ts
+function collectOffViewportMarkers(levels, priceRange, draggingLabel) {
+  const above = [];
+  const below = [];
+  const { min, max } = priceRange;
+  for (const level of levels) {
+    if (level.label === draggingLabel) continue;
+    const isDraftMarket = level.type === "pending" && level.orderType === "market" && level.data?._isDraft === true;
+    if (isDraftMarket) continue;
+    if (isFinite(level.price)) {
+      if (level.price > max) above.push({ price: level.price, label: level.label, kind: "entry" });
+      else if (level.price < min) below.push({ price: level.price, label: level.label, kind: "entry" });
+    }
+    const slPrice = level.stopLossPrice;
+    const tpPrice = level.takeProfitPrice;
+    if (slPrice !== void 0 && isFinite(slPrice)) {
+      if (slPrice > max) above.push({ price: slPrice, label: level.label, kind: "sl" });
+      else if (slPrice < min) below.push({ price: slPrice, label: level.label, kind: "sl" });
+    }
+    if (tpPrice !== void 0 && isFinite(tpPrice)) {
+      if (tpPrice > max) above.push({ price: tpPrice, label: level.label, kind: "tp" });
+      else if (tpPrice < min) below.push({ price: tpPrice, label: level.label, kind: "tp" });
+    }
+  }
+  return { above, below };
+}
+function entryCount(markers) {
+  let n = 0;
+  for (const m of markers) if (m.kind === "entry") n++;
+  return n;
+}
+function nearestEdgeMarker(markers, edge) {
+  let best = markers[0];
+  let bestDist = Math.abs(best.price - edge);
+  for (let i = 1; i < markers.length; i++) {
+    const d = Math.abs(markers[i].price - edge);
+    if (d < bestDist) {
+      best = markers[i];
+      bestDist = d;
+    }
+  }
+  return best;
+}
+var PILL_FONT = "11px 'Inter', system-ui, sans-serif";
+var PILL_PAD_X2 = 8;
+var PILL_RIGHT_MARGIN = 8;
+var PILL_V_MARGIN = 10;
+var PILL_H = 20;
+var PILL_RADIUS = 10;
+var ARROW_UP = "\u25B2";
+var ARROW_DOWN = "\u25BC";
+function renderOffViewportIndicators(ctx, levels, priceRange, theme, chartWidth, chartHeight, draggingLabel, selectedLabel = null) {
+  const hitAreas = [];
+  const PADDING_PX = 20;
+  const usable = chartHeight - 2 * PADDING_PX;
+  const span = priceRange.max - priceRange.min;
+  const padInPrice = usable > 0 ? span / usable * PADDING_PX : 0;
+  const visualRange = {
+    min: priceRange.min - padInPrice,
+    max: priceRange.max + padInPrice
+  };
+  const { above, below } = collectOffViewportMarkers(levels, visualRange, draggingLabel);
+  if (above.length === 0 && below.length === 0) return { hitAreas };
+  ctx.save();
+  ctx.font = PILL_FONT;
+  ctx.textBaseline = "middle";
+  ctx.textAlign = "center";
+  const PILL_GAP2 = 4;
+  const renderPill = (direction, text, y, target) => {
+    const textW = ctx.measureText(text).width;
+    const w = Math.ceil(textW) + PILL_PAD_X2 * 2;
+    const x = chartWidth - PILL_RIGHT_MARGIN - w;
+    ctx.fillStyle = theme.tooltip.background;
+    ctx.strokeStyle = theme.tooltip.border;
+    ctx.lineWidth = 1;
+    roundedRect(ctx, x, y, w, PILL_H, PILL_RADIUS);
+    ctx.fill();
+    ctx.stroke();
+    ctx.fillStyle = theme.tooltip.text;
+    ctx.fillText(text, x + w / 2, y + PILL_H / 2 + 0.5);
+    hitAreas.push({
+      direction,
+      x,
+      y,
+      w,
+      h: PILL_H,
+      targetPrice: target.price,
+      targetLabel: target.label,
+      targetKind: target.kind
+    });
+    return w;
+  };
+  const drawColumn = (direction, markers, baseY) => {
+    if (markers.length === 0) return;
+    const arrow = direction === "up" ? ARROW_UP : ARROW_DOWN;
+    const edge = direction === "up" ? priceRange.max : priceRange.min;
+    const stackDir = direction === "up" ? 1 : -1;
+    let nextY = baseY;
+    const entries = entryCount(markers);
+    if (entries > 0) {
+      const target = nearestEdgeMarker(
+        markers.filter((m) => m.kind === "entry"),
+        edge
+      );
+      renderPill(direction, `${arrow} ${entries}`, nextY, target);
+      nextY += stackDir * (PILL_H + PILL_GAP2);
+    }
+    if (selectedLabel !== null) {
+      const bracketMarkers = markers.filter(
+        (m) => m.kind !== "entry" && m.label === selectedLabel
+      );
+      for (const bm of bracketMarkers) {
+        const kindLabel = bm.kind.toUpperCase();
+        renderPill(direction, `${arrow} ${kindLabel}`, nextY, bm);
+        nextY += stackDir * (PILL_H + PILL_GAP2);
+      }
+    }
+  };
+  drawColumn("up", above, PILL_V_MARGIN);
+  drawColumn("down", below, chartHeight - PILL_V_MARGIN - PILL_H);
+  ctx.restore();
+  return { hitAreas };
+}
+function hitTestOffViewportIndicator(x, y, hitAreas) {
+  return hitAreas.find((h) => x >= h.x && x <= h.x + h.w && y >= h.y && y <= h.y + h.h) ?? null;
+}
+function overlapsOffViewportPill(centerY, halfH, hitAreas) {
+  const top = centerY - halfH;
+  const bottom = centerY + halfH;
+  return hitAreas.some((h) => top < h.y + h.h && bottom > h.y);
+}
+function roundedRect(ctx, x, y, w, h, r) {
+  const rr = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + rr, y);
+  ctx.lineTo(x + w - rr, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + rr);
+  ctx.lineTo(x + w, y + h - rr);
+  ctx.quadraticCurveTo(x + w, y + h, x + w - rr, y + h);
+  ctx.lineTo(x + rr, y + h);
+  ctx.quadraticCurveTo(x, y + h, x, y + h - rr);
+  ctx.lineTo(x, y + rr);
+  ctx.quadraticCurveTo(x, y, x + rr, y);
+  ctx.closePath();
+}
+
 // src/axis/TimeAxis.ts
 var COUNTDOWN_LABEL_HEIGHT = 18;
 var COUNTDOWN_LABEL_PADDING_X = 6;
@@ -2391,45 +2925,45 @@ function formatRemaining(totalSec) {
   const d = Math.floor(totalSec % 604800 / 86400);
   return `${w}w ${d}d`;
 }
-function formatTimestamp(ts, visibleBars, timeframe, spansMultipleDays) {
+function formatTimestamp(ts, visibleBars, timeframe, spansMultipleDays, timezone = "UTC") {
   const d = new Date(ts);
   if (timeframe && INTRADAY_TIMEFRAMES.includes(timeframe)) {
     const time = d.toLocaleTimeString("en-US", {
       hour: "2-digit",
       minute: "2-digit",
       hour12: false,
-      timeZone: "UTC"
+      timeZone: timezone
     });
     if (spansMultipleDays) {
-      return d.toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" }) + " " + time;
+      return d.toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: timezone }) + " " + time;
     }
     return time;
   }
   if (timeframe === "1Y") {
-    return d.toLocaleDateString("en-US", { year: "numeric", timeZone: "UTC" });
+    return d.toLocaleDateString("en-US", { year: "numeric", timeZone: timezone });
   }
   if (timeframe === "1M") {
-    return d.toLocaleDateString("en-US", { month: "short", year: "numeric", timeZone: "UTC" });
+    return d.toLocaleDateString("en-US", { month: "short", year: "numeric", timeZone: timezone });
   }
   if (visibleBars <= 365) {
     return d.toLocaleDateString("en-US", {
       month: "short",
       day: "numeric",
-      timeZone: "UTC"
+      timeZone: timezone
     });
   }
-  return d.toLocaleDateString("en-US", { month: "short", year: "2-digit", timeZone: "UTC" });
+  return d.toLocaleDateString("en-US", { month: "short", year: "2-digit", timeZone: timezone });
 }
-function renderTimeAxis(ctx, bars, viewport, scale, theme, chartWidth, axisY, maxLabels = 8, cfg = DEFAULT_TIME_AXIS_CONFIG, timeframe, countdownBarIndex) {
+function renderTimeAxis(ctx, bars, viewport, scale, theme, chartWidth, axisY, maxLabels = 8, cfg = DEFAULT_TIME_AXIS_CONFIG, timeframe, countdownBarIndex, timezone = "UTC") {
   const visibleBars = viewport.endIndex - viewport.startIndex;
   const firstBar = bars[0];
   const lastBar = bars[bars.length - 1];
-  const spansMultipleDays = !!firstBar && !!lastBar && new Date(firstBar.time).toLocaleDateString("en-US", { timeZone: "UTC" }) !== new Date(lastBar.time).toLocaleDateString("en-US", { timeZone: "UTC" });
+  const spansMultipleDays = !!firstBar && !!lastBar && new Date(firstBar.time).toLocaleDateString("en-US", { timeZone: timezone }) !== new Date(lastBar.time).toLocaleDateString("en-US", { timeZone: timezone });
   ctx.fillStyle = theme.axisText;
   ctx.font = `${cfg.fontSize} ${cfg.fontFamily}`;
   ctx.textAlign = "center";
   const MIN_GAP = 12;
-  const sampleLabel = formatTimestamp(bars[Math.floor(bars.length / 2)]?.time ?? bars[0].time, visibleBars, timeframe, spansMultipleDays);
+  const sampleLabel = formatTimestamp(bars[Math.floor(bars.length / 2)]?.time ?? bars[0].time, visibleBars, timeframe, spansMultipleDays, timezone);
   const labelW = ctx.measureText(sampleLabel).width;
   const minStep = Math.max(1, Math.floor(bars.length / maxLabels));
   let step = minStep;
@@ -2444,7 +2978,7 @@ function renderTimeAxis(ctx, bars, viewport, scale, theme, chartWidth, axisY, ma
     const barIndex = viewport.startIndex + i;
     if (countdownBarIndex !== void 0 && barIndex === countdownBarIndex) continue;
     const x = scale.xToPixel(barIndex, viewport, chartWidth);
-    const label = formatTimestamp(bars[i].time, visibleBars, timeframe, spansMultipleDays);
+    const label = formatTimestamp(bars[i].time, visibleBars, timeframe, spansMultipleDays, timezone);
     const halfW = ctx.measureText(label).width / 2;
     const clampedX = Math.max(halfW, Math.min(chartWidth - halfW, x));
     ctx.fillText(label, clampedX, axisY + 14);
@@ -2479,10 +3013,20 @@ function renderCandleCountdown(ctx, lastBarTime, intervalMs, lastBarIndex, viewp
 }
 
 // src/axis/PriceAxis.ts
-function renderPriceAxis(ctx, priceRange, scale, theme, chartWidth, chartHeight, axisWidth, gridLines = 6, pricePrecision = 2, cfg = DEFAULT_PRICE_AXIS_CONFIG) {
+function renderPriceAxis(ctx, priceRange, scale, theme, chartWidth, chartHeight, axisWidth, gridLines, pricePrecision = 2, cfg = DEFAULT_PRICE_AXIS_CONFIG) {
   ctx.fillStyle = theme.axisText;
   ctx.font = `${cfg.fontSize} ${cfg.fontFamily}`;
   ctx.textAlign = "left";
+  if (gridLines === void 0) {
+    const ticks = generatePriceTicks(priceRange, chartHeight);
+    const step2 = ticks.length >= 2 ? ticks[1] - ticks[0] : priceRange.max - priceRange.min;
+    const precision = precisionForStep(step2, pricePrecision);
+    for (const price of ticks) {
+      const y = scale.yToPixel(price, priceRange, chartHeight);
+      ctx.fillText(price.toFixed(precision), chartWidth + 4, y + 4);
+    }
+    return;
+  }
   const step = (priceRange.max - priceRange.min) / gridLines;
   for (let i = 0; i <= gridLines; i++) {
     const price = priceRange.min + step * i;
@@ -3097,6 +3641,8 @@ var ICON_TOOL = {
     14
   )
 };
+var ICON_TFC = `<svg viewBox="0 0 16 16" width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><polyline points="1.5,12.5 5,9 7,11 14,4" stroke="#26a69a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><polyline points="10,4 14,4 14,8" stroke="#26a69a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><polyline points="1.5,3.5 5,7 7,5 14,12" stroke="#ef5350" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><polyline points="10,12 14,12 14,8" stroke="#ef5350" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+var ICON_TFC_OFF = `<svg viewBox="0 0 16 16" width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><polyline points="1.5,12.5 5,9 7,11 14,4" stroke="#26a69a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.3"/><polyline points="10,4 14,4 14,8" stroke="#26a69a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.3"/><polyline points="1.5,3.5 5,7 7,5 14,12" stroke="#ef5350" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.3"/><polyline points="10,12 14,12 14,8" stroke="#ef5350" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.3"/><line x1="3" y1="3" x2="13" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
 var iconScrollToEnd = (c, size = 16) => `<svg viewBox="0 0 16 16" width="${size}" height="${size}" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 4L6 8L1 12Z" fill="${c}"/><path d="M6 4L11 8L6 12Z" fill="${c}"/><line x1="13.5" y1="3.5" x2="13.5" y2="12.5" stroke="${c}" stroke-width="2" stroke-linecap="round"/></svg>`;
 var iconResetView = (c, size = 16) => `<svg viewBox="0 0 16 16" width="${size}" height="${size}" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2A6 6 0 1 1 2 8" stroke="${c}" stroke-width="1.6" stroke-linecap="round"/><path d="M4 10L2 8L1 10" stroke="${c}" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
 var ICON_TAB = {
@@ -3132,7 +3678,7 @@ function injectFlyoutScrollbarStyles() {
   document.head.appendChild(style);
 }
 var TopBar = class {
-  constructor(onSeriesChange, onTimeframeChange, onAddIndicator, onDurationChange, onSettingsClick, onFullscreenToggle, onDrawingToolsToggle, showDrawingToolsBtn, showSettingsBtn, initialSeries, initialTf, initialDuration, durationMap, theme, cfg = DEFAULT_TOP_BAR_CONFIG, labels = DEFAULT_LABELS.topBar) {
+  constructor(onSeriesChange, onTimeframeChange, onAddIndicator, onDurationChange, onSettingsClick, onFullscreenToggle, onDrawingToolsToggle, showDrawingToolsBtn, showSettingsBtn, showTfcBtn, initialTfcActive, onTfcToggle, initialSeries, initialTf, initialDuration, durationMap, theme, cfg = DEFAULT_TOP_BAR_CONFIG, labels = DEFAULT_LABELS.topBar) {
     this.onSeriesChange = onSeriesChange;
     this.onTimeframeChange = onTimeframeChange;
     this.onAddIndicator = onAddIndicator;
@@ -3140,11 +3686,14 @@ var TopBar = class {
     this.onSettingsClick = onSettingsClick;
     this.onFullscreenToggle = onFullscreenToggle;
     this.onDrawingToolsToggle = onDrawingToolsToggle;
+    this.onTfcToggle = onTfcToggle;
     this.settingsBtn = null;
     this.isFullscreen = false;
     this.durationBtns = /* @__PURE__ */ new Map();
     this.isMobileLayout = false;
     this.drawingBtn = null;
+    this.tfcBtn = null;
+    this.tfcActive = true;
     this.openDropdown = null;
     this.indicatorOptions = [];
     this.activeIndicators = /* @__PURE__ */ new Set();
@@ -3152,6 +3701,7 @@ var TopBar = class {
     this.theme = theme;
     this.cfg = cfg;
     this.labels = labels;
+    this.tfcActive = initialTfcActive;
     this.currentSeries = initialSeries;
     this.currentTf = initialTf;
     this.activeDuration = initialDuration;
@@ -3228,6 +3778,21 @@ var TopBar = class {
       this.addBtnHover(this.settingsBtn);
       this.rightGroup.appendChild(this.settingsBtn);
     }
+    if (showTfcBtn) {
+      this.tfcBtn = document.createElement("button");
+      this.tfcBtn.title = this.labels.tfcToggleTitle;
+      this.tfcBtn.innerHTML = this.tfcActive ? ICON_TFC : ICON_TFC_OFF;
+      this.applyIconBtnStyles(this.tfcBtn, theme, this.tfcActive);
+      this.tfcBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.tfcActive = !this.tfcActive;
+        this.tfcBtn.innerHTML = this.tfcActive ? ICON_TFC : ICON_TFC_OFF;
+        this.applyIconBtnStyles(this.tfcBtn, this.theme, this.tfcActive);
+        this.onTfcToggle?.(this.tfcActive);
+      });
+      this.addBtnHover(this.tfcBtn);
+      this.rightGroup.appendChild(this.tfcBtn);
+    }
     this.el.append(this.leftGroup, this.rightGroup);
     this.docClickHandler = (e) => {
       if (!this.el.contains(e.target) && !this.flyout.contains(e.target)) {
@@ -3257,6 +3822,15 @@ var TopBar = class {
     if (!this.drawingBtn) return;
     this.applyIconBtnStyles(this.drawingBtn, this.theme, active);
   }
+  setTfcActive(active) {
+    if (!this.tfcBtn) return;
+    this.tfcActive = active;
+    this.tfcBtn.innerHTML = active ? ICON_TFC : ICON_TFC_OFF;
+    this.applyIconBtnStyles(this.tfcBtn, this.theme, active);
+    if (this.isMobileLayout) {
+      this.resizeSvg(this.tfcBtn, this.getSvgSize(this.tfcBtn) + 2);
+    }
+  }
   setTheme(theme) {
     this.theme = theme;
     this.closeDropdown();
@@ -3265,6 +3839,7 @@ var TopBar = class {
     if (this.drawingBtn) this.applyIconBtnStyles(this.drawingBtn, theme, false);
     this.applyIconBtnStyles(this.fullscreenBtn, theme, this.isFullscreen);
     if (this.settingsBtn) this.applyIconBtnStyles(this.settingsBtn, theme, false);
+    if (this.tfcBtn) this.applyIconBtnStyles(this.tfcBtn, theme, this.tfcActive);
     this.applySeriesBtnStyles(this.seriesBtn, theme, false);
     this.applyDropBtnStyles(this.tfBtn, theme, false);
     this.applyDropBtnStyles(this.indBtn, theme, false);
@@ -3305,7 +3880,7 @@ var TopBar = class {
     this.durationSep.style.display = btnDisplay;
     this.durationDropBtn.style.display = isMobile ? "" : "none";
     const containerSize = isMobile ? this.cfg.mobileIconBtnSize : this.cfg.iconBtnSize;
-    for (const btn of [this.fullscreenBtn, this.settingsBtn, this.drawingBtn]) {
+    for (const btn of [this.fullscreenBtn, this.settingsBtn, this.drawingBtn, this.tfcBtn]) {
       if (!btn) continue;
       btn.style.width = containerSize;
       btn.style.height = containerSize;
@@ -3315,6 +3890,9 @@ var TopBar = class {
     if (this.settingsBtn) {
       this.resizeSvg(this.settingsBtn, this.getSvgSize(this.settingsBtn) + delta);
     }
+    if (this.tfcBtn) {
+      this.resizeSvg(this.tfcBtn, this.getSvgSize(this.tfcBtn) + delta);
+    }
     if (this.drawingBtn) {
       const drawIconSize = isMobile ? parseInt(this.cfg.mobileDrawBtnIconSize, 10) : parseInt(this.cfg.drawBtnIconFontSize, 10);
       this.resizeSvg(this.drawingBtn, drawIconSize);
@@ -8143,7 +8721,7 @@ function pointToSegmentDist19(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-function roundedRect(ctx, x, y, w, h, r) {
+function roundedRect2(ctx, x, y, w, h, r) {
   ctx.beginPath();
   ctx.moveTo(x + r, y);
   ctx.lineTo(x + w - r, y);
@@ -8194,7 +8772,7 @@ var Callout = class {
     ctx.beginPath();
     ctx.arc(tipX, tipY, 3, 0, Math.PI * 2);
     ctx.fill();
-    roundedRect(ctx, bx, by, boxW, BOX_H, RADIUS);
+    roundedRect2(ctx, bx, by, boxW, BOX_H, RADIUS);
     ctx.fillStyle = "#37474f";
     ctx.fill();
     ctx.strokeStyle = "#546e7a";
@@ -8246,7 +8824,7 @@ var Callout = class {
 // src/drawings/PriceLabel.ts
 var HIT_TOLERANCE42 = 6;
 var BADGE_W = 60;
-var BADGE_H = 18;
+var BADGE_H2 = 18;
 var ARROW_W = 7;
 var PriceLabel = class {
   constructor(point) {
@@ -8263,21 +8841,21 @@ var PriceLabel = class {
     ctx.fillStyle = "#26a69a";
     ctx.beginPath();
     ctx.moveTo(x, y);
-    ctx.lineTo(x + ARROW_W, y - BADGE_H / 2);
-    ctx.lineTo(x + ARROW_W, y + BADGE_H / 2);
+    ctx.lineTo(x + ARROW_W, y - BADGE_H2 / 2);
+    ctx.lineTo(x + ARROW_W, y + BADGE_H2 / 2);
     ctx.closePath();
     ctx.fill();
     const bx = x + ARROW_W;
-    const by = y - BADGE_H / 2;
+    const by = y - BADGE_H2 / 2;
     ctx.fillStyle = "#26a69a";
     ctx.beginPath();
-    ctx.roundRect(bx, by, BADGE_W, BADGE_H, BADGE_H / 2);
+    ctx.roundRect(bx, by, BADGE_W, BADGE_H2, BADGE_H2 / 2);
     ctx.fill();
     if (isSelected) {
       ctx.strokeStyle = "#80cbc4";
       ctx.lineWidth = 1.5;
       ctx.beginPath();
-      ctx.roundRect(bx - 2, by - 2, BADGE_W + 4, BADGE_H + 4, BADGE_H / 2 + 2);
+      ctx.roundRect(bx - 2, by - 2, BADGE_W + 4, BADGE_H2 + 4, BADGE_H2 / 2 + 2);
       ctx.stroke();
     }
     ctx.font = "11px 'Inter', system-ui, sans-serif";
@@ -8291,8 +8869,8 @@ var PriceLabel = class {
     const ax = scale.xToPixel(this.points[0].barIndex, viewport, chartW);
     const ay = scale.yToPixel(this.points[0].price, priceRange, chartH);
     const bx = ax + ARROW_W;
-    const by = ay - BADGE_H / 2;
-    return x >= ax - HIT_TOLERANCE42 && x <= bx + BADGE_W + HIT_TOLERANCE42 && y >= by - HIT_TOLERANCE42 && y <= by + BADGE_H + HIT_TOLERANCE42;
+    const by = ay - BADGE_H2 / 2;
+    return x >= ax - HIT_TOLERANCE42 && x <= bx + BADGE_W + HIT_TOLERANCE42 && y >= by - HIT_TOLERANCE42 && y <= by + BADGE_H2 + HIT_TOLERANCE42;
   }
   getHandle() {
     return null;
@@ -8412,7 +8990,7 @@ var Flag = class {
 
 // src/drawings/PriceNote.ts
 var HIT_TOLERANCE44 = 6;
-var BADGE_H2 = 16;
+var BADGE_H3 = 16;
 var BADGE_PADDING_X = 6;
 var TICK_HALF = 10;
 var PriceNote = class {
@@ -8438,10 +9016,10 @@ var PriceNote = class {
     const tw = ctx.measureText(label).width;
     const badgeW = tw + BADGE_PADDING_X * 2;
     const bx = x + TICK_HALF + 2;
-    const by = y - BADGE_H2 / 2;
+    const by = y - BADGE_H3 / 2;
     ctx.fillStyle = "#ffa726";
     ctx.beginPath();
-    ctx.roundRect(bx, by, badgeW, BADGE_H2, 3);
+    ctx.roundRect(bx, by, badgeW, BADGE_H3, 3);
     ctx.fill();
     ctx.fillStyle = "#ffffff";
     ctx.textBaseline = "middle";
@@ -8461,7 +9039,7 @@ var PriceNote = class {
 
 // src/drawings/AnchoredNote.ts
 var HIT_TOLERANCE45 = 6;
-var BADGE_H3 = 20;
+var BADGE_H4 = 20;
 var PAD_H2 = 10;
 function pointToSegmentDist21(px, py, x1, y1, x2, y2) {
   const dx = x2 - x1, dy = y2 - y1;
@@ -8494,7 +9072,7 @@ var AnchoredNote = class {
     ctx.lineWidth = isSelected ? 1.5 : 1;
     const badgeW = this.getBadgeW(ctx);
     const bx = x2 - badgeW / 2;
-    const by = y2 - BADGE_H3 / 2;
+    const by = y2 - BADGE_H4 / 2;
     ctx.strokeStyle = "#42a5f5";
     ctx.setLineDash([4, 3]);
     ctx.beginPath();
@@ -8508,12 +9086,12 @@ var AnchoredNote = class {
     ctx.fill();
     ctx.fillStyle = "#37474f";
     ctx.beginPath();
-    ctx.roundRect(bx, by, badgeW, BADGE_H3, 4);
+    ctx.roundRect(bx, by, badgeW, BADGE_H4, 4);
     ctx.fill();
     ctx.strokeStyle = "#42a5f5";
     ctx.lineWidth = isSelected ? 1.5 : 1;
     ctx.beginPath();
-    ctx.roundRect(bx, by, badgeW, BADGE_H3, 4);
+    ctx.roundRect(bx, by, badgeW, BADGE_H4, 4);
     ctx.stroke();
     const label = this.text || "Note";
     const isPlaceholder = !this.text;
@@ -8532,8 +9110,8 @@ var AnchoredNote = class {
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
     const approxBadgeW = Math.max(50, (this.text?.length ?? 4) * 7 + 20);
     const bx = x2 - approxBadgeW / 2;
-    const by = y2 - BADGE_H3 / 2;
-    if (x >= bx - HIT_TOLERANCE45 && x <= bx + approxBadgeW + HIT_TOLERANCE45 && y >= by - HIT_TOLERANCE45 && y <= by + BADGE_H3 + HIT_TOLERANCE45) {
+    const by = y2 - BADGE_H4 / 2;
+    if (x >= bx - HIT_TOLERANCE45 && x <= bx + approxBadgeW + HIT_TOLERANCE45 && y >= by - HIT_TOLERANCE45 && y <= by + BADGE_H4 + HIT_TOLERANCE45) {
       return true;
     }
     if (pointToSegmentDist21(x, y, x1, y1, x2, y2) <= HIT_TOLERANCE45) {
@@ -12484,6 +13062,158 @@ var TradePopover = class {
   }
 };
 
+// src/ui/DraftQtyFlyout.ts
+var DraftQtyFlyout = class {
+  constructor(theme, onCommit) {
+    this._min = 1;
+    this._max = 100;
+    this._step = 1;
+    this.onDocMouseDown = (e) => {
+      if (this.isVisible && !this.el.contains(e.target)) {
+        this.syncIfValid();
+        this.hide();
+      }
+    };
+    this.theme = theme;
+    this.onCommit = onCommit;
+    this.el = document.createElement("div");
+    Object.assign(this.el.style, {
+      position: "fixed",
+      display: "none",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: "4px",
+      background: theme.tooltip.background,
+      border: `1px solid ${theme.axisBorder}`,
+      borderRadius: "5px",
+      padding: "5px 7px",
+      zIndex: "25",
+      boxShadow: "0 4px 16px rgba(0,0,0,0.3)",
+      fontFamily: "'Inter', system-ui, sans-serif",
+      fontSize: "13px",
+      color: theme.tooltip.text,
+      pointerEvents: "auto"
+    });
+    const decBtn = this.makeStepBtn("\u2212", () => this.step(-1));
+    this.input = this.makeInput();
+    const incBtn = this.makeStepBtn("+", () => this.step(1));
+    this.el.append(decBtn, this.input, incBtn);
+    this.el.addEventListener("mousedown", (e) => e.stopPropagation());
+    this.el.addEventListener("touchstart", (e) => e.stopPropagation());
+    document.addEventListener("mousedown", this.onDocMouseDown);
+  }
+  // ── Public ────────────────────────────────────────────────────────────────
+  show(pillX, boxBottom, currentQty, min, max) {
+    this._min = min;
+    this._max = max;
+    this._step = min;
+    this.input.min = String(min);
+    this.input.max = String(max);
+    this.input.step = String(min);
+    this.input.value = String(currentQty);
+    this.el.style.display = "flex";
+    this.el.style.left = `${pillX}px`;
+    this.el.style.top = `${boxBottom + 4}px`;
+    requestAnimationFrame(() => {
+      this.input.focus();
+      this.input.select();
+    });
+  }
+  hide() {
+    this.el.style.display = "none";
+  }
+  get isVisible() {
+    return this.el.style.display !== "none";
+  }
+  setTheme(theme) {
+    this.theme = theme;
+    Object.assign(this.el.style, {
+      background: theme.tooltip.background,
+      border: `1px solid ${theme.axisBorder}`,
+      color: theme.tooltip.text
+    });
+    this.input.style.borderBottom = `1px solid ${theme.axisBorder}`;
+  }
+  destroy() {
+    document.removeEventListener("mousedown", this.onDocMouseDown);
+  }
+  // ── Private ───────────────────────────────────────────────────────────────
+  makeStepBtn(label, onClick) {
+    const btn = document.createElement("button");
+    btn.textContent = label;
+    Object.assign(btn.style, {
+      background: "transparent",
+      border: "none",
+      color: "inherit",
+      cursor: "pointer",
+      fontSize: "16px",
+      lineHeight: "1",
+      padding: "0 4px",
+      borderRadius: "3px",
+      opacity: "0.7"
+    });
+    btn.addEventListener("mouseenter", () => {
+      btn.style.opacity = "1";
+    });
+    btn.addEventListener("mouseleave", () => {
+      btn.style.opacity = "0.7";
+    });
+    btn.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      onClick();
+    });
+    return btn;
+  }
+  makeInput() {
+    const input = document.createElement("input");
+    input.type = "number";
+    Object.assign(input.style, {
+      width: "64px",
+      background: "transparent",
+      border: "none",
+      borderBottom: `1px solid ${this.theme.axisBorder}`,
+      color: "inherit",
+      font: "13px 'Inter', system-ui, sans-serif",
+      outline: "none",
+      textAlign: "center",
+      padding: "1px 2px"
+    });
+    input.addEventListener("input", () => {
+      this.syncIfValid();
+    });
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        this.syncIfValid();
+        this.hide();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        this.hide();
+      }
+    });
+    input.addEventListener("blur", () => {
+      if (this.isVisible) {
+        this.syncIfValid();
+        this.hide();
+      }
+    });
+    return input;
+  }
+  step(direction) {
+    const current = parseFloat(this.input.value) || this._min;
+    const next = Math.round((current + direction * this._step) * 1e10) / 1e10;
+    this.input.value = String(Math.min(this._max, Math.max(this._min, next)));
+    this.input.focus();
+    this.syncIfValid();
+  }
+  syncIfValid() {
+    const val = parseFloat(this.input.value);
+    if (!isNaN(val) && val >= this._min && val <= this._max) {
+      this.onCommit(val);
+    }
+  }
+};
+
 // src/ui/IsinPickerModal.ts
 var INITIAL_LIMIT = 50;
 var SEARCH_LIMIT = 20;
@@ -12694,9 +13424,14 @@ var TradeDragHandler = class _TradeDragHandler {
     this._isDraggingBracket = false;
     // Main line drag state
     this._level = null;
-    this._startY = 0;
     this._startPrice = 0;
     this._currentPrice = 0;
+    // Pixel offset between click Y and the level's rendered Y at drag start.
+    // Why: the drag hit-strip is 8 px tall; without this, the cursor-to-price
+    // mapping would snap the level to wherever the cursor is instead of
+    // preserving the grab point. Also immunises the drag from any priceRange
+    // animation (lerp) that happens between drag-start and first mousemove.
+    this._pixelOffset = 0;
     // Entry-price constraint bounds (applied when SL/TP exist on the level)
     this._mainMinPrice = -Infinity;
     this._mainMaxPrice = Infinity;
@@ -12704,6 +13439,7 @@ var TradeDragHandler = class _TradeDragHandler {
     this._bracketType = null;
     this._bracketStartPrice = 0;
     this._bracketCurrentPrice = 0;
+    this._bracketPixelOffset = 0;
     // Bracket constraint state (populated on startBracketDrag)
     this._bracketParentPrice = 0;
     this._bracketParentSide = "buy";
@@ -12715,11 +13451,11 @@ var TradeDragHandler = class _TradeDragHandler {
    * Pass `slPrice` / `tpPrice` / `side` to constrain the drag between SL and TP
    * (used for ES/EL entry orders where the entry price must stay between brackets).
    */
-  startDrag(level, startY, startPrice, slPrice, tpPrice, side, marketPrice, orderType) {
+  startDrag(level, clickY, levelPixelY, startPrice, slPrice, tpPrice, side, marketPrice, orderType) {
     this._active = true;
     this._isDraggingBracket = false;
     this._level = level;
-    this._startY = startY;
+    this._pixelOffset = clickY - levelPixelY;
     this._startPrice = startPrice;
     this._currentPrice = startPrice;
     this._bracketType = null;
@@ -12751,13 +13487,14 @@ var TradeDragHandler = class _TradeDragHandler {
    * @param bracketType  'stopLoss' | 'takeProfit'
    * @param startPrice   Current bracket price
    */
-  startBracketDrag(parentLevel, bracketType, startPrice, currentMarketPrice = 0, parentPriceOverride) {
+  startBracketDrag(parentLevel, bracketType, startPrice, clickY, bracketPixelY, currentMarketPrice = 0, parentPriceOverride) {
     this._active = true;
     this._isDraggingBracket = true;
     this._level = parentLevel;
     this._bracketType = bracketType;
     this._bracketStartPrice = startPrice;
     this._bracketCurrentPrice = startPrice;
+    this._bracketPixelOffset = clickY - bracketPixelY;
     this._bracketParentPrice = parentPriceOverride ?? parentLevel.price;
     this._bracketParentSide = parentLevel.side ?? "buy";
     this._bracketMarketPrice = currentMarketPrice;
@@ -12768,9 +13505,10 @@ var TradeDragHandler = class _TradeDragHandler {
    */
   onMouseMove(currentY, scale, priceRange, priceH) {
     if (!this._active || !this._level) return null;
-    const rawPrice = scale.pixelToPrice(currentY, priceRange, priceH);
     if (this._isDraggingBracket && this._bracketType !== null) {
-      const clampedPrice = this._clampBracketPrice(rawPrice, this._bracketType, this._bracketParentPrice, this._bracketParentSide, this._bracketMarketPrice);
+      const effectiveY2 = currentY - this._bracketPixelOffset;
+      const rawPrice2 = scale.pixelToPrice(effectiveY2, priceRange, priceH);
+      const clampedPrice = this._clampBracketPrice(rawPrice2, this._bracketType, this._bracketParentPrice, this._bracketParentSide, this._bracketMarketPrice);
       this._bracketCurrentPrice = clampedPrice;
       return {
         newPrice: clampedPrice,
@@ -12778,6 +13516,8 @@ var TradeDragHandler = class _TradeDragHandler {
         isBracket: true
       };
     }
+    const effectiveY = currentY - this._pixelOffset;
+    const rawPrice = scale.pixelToPrice(effectiveY, priceRange, priceH);
     const constrained = Math.max(this._mainMinPrice, Math.min(this._mainMaxPrice, rawPrice));
     this._currentPrice = constrained;
     return {
@@ -12876,10 +13616,12 @@ var TradeDragHandler = class _TradeDragHandler {
     this._level = null;
     this._bracketType = null;
     this._currentPrice = 0;
+    this._pixelOffset = 0;
     this._mainMinPrice = -Infinity;
     this._mainMaxPrice = Infinity;
     this._bracketStartPrice = 0;
     this._bracketCurrentPrice = 0;
+    this._bracketPixelOffset = 0;
     this._bracketParentPrice = 0;
     this._bracketParentSide = "buy";
     this._bracketMarketPrice = 0;
@@ -13897,6 +14639,11 @@ var _ChartEngine = class _ChartEngine {
     this._hoverBuyType = "limit";
     this._hoverSellType = "limit";
     this._minLots = 1;
+    this._showQuantityField = false;
+    this._qtyFieldMin = 1;
+    this._qtyFieldMax = 100;
+    this._draftQtyFlyout = null;
+    this._draftQtyPillArea = void 0;
     this._onOrderSubmit = void 0;
     this.scrollToEndBtn = null;
     this.scrollToEndVisible = false;
@@ -13912,6 +14659,8 @@ var _ChartEngine = class _ChartEngine {
     this.showBidAskLines = false;
     this.showActLogo = false;
     this.hideLevelConfirmCancel = false;
+    this.levelClusteringEnabled = true;
+    this.clusterThresholdDistance = 20;
     this.enableThemeToggle = false;
     this.activeIndicators = [];
     this.indicatorResults = /* @__PURE__ */ new Map();
@@ -13977,19 +14726,28 @@ var _ChartEngine = class _ChartEngine {
     this._mobileDrawingFlyout = null;
     // Fullscreen state
     this._isCssFullscreen = false;
+    this.timezone = "UTC";
     this.settingsCanvasColors = {};
     // Streaming
     this.streamAdapter = null;
     this.liveBidAsk = null;
     this.tickClosePriceSource = "bid";
+    /** True while an async data fetch is in-flight; suppresses tick processing to
+     *  prevent stale ticks from corrupting newly-loaded bars. */
+    this._suppressTicks = false;
     // Trade / position levels
     this.levels = [];
     this.tradeLevelHitAreas = [];
+    this.offViewportHitAreas = [];
     this.tradeLevelEditAreas = [];
     this.tradeHoverAreas = [];
     this.tradeLevelDragAreas = [];
     this.tradeLevelConfirmAreas = [];
     this.tradeAddBracketAreas = [];
+    this.clusterBadgeAreas = [];
+    this.lastClusters = [];
+    /** Set of cluster IDs that are currently expanded (fanned out). */
+    this.expandedClusters = /* @__PURE__ */ new Set();
     this.hoveredTradeLabel = null;
     this.selectedTradeLabel = null;
     /** Estimated PNL text for draft order SL/TP bracket lines, set by setDraftBracketPnl(). */
@@ -14004,6 +14762,8 @@ var _ChartEngine = class _ChartEngine {
     // Inline drag confirmation — accumulates changes per level until user confirms
     this.pendingLevelDrags = /* @__PURE__ */ new Map();
     // Trade from Charts settings
+    this.tfcEnabled = true;
+    this.tfcActive = true;
     this.tradeDisplayFilter = "all";
     this.positionRenderStyle = "dot";
     this.tradesThresholdForHorizontalLine = 2;
@@ -14014,7 +14774,9 @@ var _ChartEngine = class _ChartEngine {
     this.dataLoader = null;
     this.isFetching = false;
     this.noMoreData = false;
+    this._loadGeneration = 0;
     this.maxCandles = 200;
+    this.prefetchThreshold = 80;
     this.defaultVisibleBars = DEFAULT_VISIBLE_BARS;
     this.defaultMobileVisibleBars = void 0;
     this.mobileBarDivisor = 2;
@@ -14052,7 +14814,12 @@ var _ChartEngine = class _ChartEngine {
       if (this.tradeButton) {
         if (isInChartArea && y >= 0 && y <= priceH && !this._isTradingActive && !hoveringDotLevel) {
           this.tradeButton.setY(y);
-          this.tradeButton.show();
+          const btnHalfH = this.uiConfig.tradeButton.size / 2;
+          if (overlapsOffViewportPill(y, btnHalfH, this.offViewportHitAreas)) {
+            this.tradeButton.hide();
+          } else if (this.tfcActive) {
+            this.tradeButton.show();
+          }
           this._tradeButtonClickData = { price, y };
           const allBars = this.dataStore.all;
           const lastClose = allBars.length > 0 ? allBars[allBars.length - 1].close : price;
@@ -14154,7 +14921,7 @@ var _ChartEngine = class _ChartEngine {
         return;
       }
       if (!this.drawingManager.getActiveTool()) {
-        if (hitTestTradeLevelClose(x, y, this.tradeLevelHitAreas) || hitTestTradeLevelEdit(x, y, this.tradeLevelEditAreas) || hitTestTradeLevelConfirm(x, y, this.tradeLevelConfirmAreas)) {
+        if (hitTestClusterBadge(x, y, this.clusterBadgeAreas) || hitTestTradeLevelClose(x, y, this.tradeLevelHitAreas) || hitTestTradeLevelEdit(x, y, this.tradeLevelEditAreas) || hitTestTradeLevelConfirm(x, y, this.tradeLevelConfirmAreas) || hitTestOffViewportIndicator(x, y, this.offViewportHitAreas)) {
           this.drawCanvas.style.cursor = "pointer";
           this.scheduleRender();
           return;
@@ -14366,6 +15133,25 @@ var _ChartEngine = class _ChartEngine {
         this.scheduleRender();
         return;
       }
+      const clusterHitTouch = hitTestClusterBadge(x, y, this.clusterBadgeAreas);
+      if (clusterHitTouch) {
+        e.preventDefault();
+        this.panHandler.cancel();
+        if (this.expandedClusters.has(clusterHitTouch.clusterId)) {
+          this.expandedClusters.delete(clusterHitTouch.clusterId);
+        } else {
+          this.expandedClusters.add(clusterHitTouch.clusterId);
+        }
+        this.renderTradeLayer();
+        return;
+      }
+      const offVpHit = hitTestOffViewportIndicator(x, y, this.offViewportHitAreas);
+      if (offVpHit) {
+        e.preventDefault();
+        this.panHandler.cancel();
+        this.scrollToCenterPrice(offVpHit.targetPrice);
+        return;
+      }
       const confirmHit = hitTestTradeLevelConfirm(x, y, this.tradeLevelConfirmAreas);
       if (confirmHit) {
         e.preventDefault();
@@ -14373,6 +15159,15 @@ var _ChartEngine = class _ChartEngine {
         else this.revertPendingChanges(confirmHit.label);
         return;
       }
+      if (this._showQuantityField && this._draftQtyPillArea) {
+        const p = this._draftQtyPillArea;
+        if (x >= p.pillX && x <= p.pillX + p.pillW && y >= p.pillY && y <= p.pillY + p.pillH) {
+          e.preventDefault();
+          e.stopPropagation();
+          this.openDraftQtyFlyout(p);
+          return;
+        }
+      }
       const closeHit = hitTestTradeLevelClose(x, y, this.tradeLevelHitAreas);
       if (closeHit) {
         e.preventDefault();
@@ -14422,6 +15217,10 @@ var _ChartEngine = class _ChartEngine {
       }
       this.drawingManager.selectDrawing(null);
       this.hideMobileDrawingFlyout();
+      if (this.expandedClusters.size > 0) {
+        this.expandedClusters.clear();
+        this.renderTradeLayer();
+      }
       const isInChartArea = x < chartW && y < timeAxisY;
       if (isInChartArea) {
         if (this._mobileCrosshairActive) {
@@ -14571,7 +15370,12 @@ var _ChartEngine = class _ChartEngine {
             if (this._isTradingActive) {
               this.tradeButton.hide();
             } else {
-              this.tradeButton.show();
+              const _btnHalfH2 = this.uiConfig.tradeButton.size / 2;
+              if (overlapsOffViewportPill(y, _btnHalfH2, this.offViewportHitAreas)) {
+                this.tradeButton.hide();
+              } else if (this.tfcActive) {
+                this.tradeButton.show();
+              }
             }
             this._tradeButtonClickData = { price, y };
             const _allBars = this.dataStore.all;
@@ -14653,12 +15457,36 @@ var _ChartEngine = class _ChartEngine {
       const rawBarIndex = this.scaleManager.pixelToBarIndex(x, this.viewport, chartW);
       const price = this.scaleManager.pixelToPrice(y, priceRange, priceH);
       const barIndex = Math.round(rawBarIndex);
+      const clusterHit = hitTestClusterBadge(x, y, this.clusterBadgeAreas);
+      if (clusterHit) {
+        if (this.expandedClusters.has(clusterHit.clusterId)) {
+          this.expandedClusters.delete(clusterHit.clusterId);
+        } else {
+          this.expandedClusters.add(clusterHit.clusterId);
+        }
+        this.renderTradeLayer();
+        return;
+      }
+      const offVpHit = hitTestOffViewportIndicator(x, y, this.offViewportHitAreas);
+      if (offVpHit) {
+        this.scrollToCenterPrice(offVpHit.targetPrice);
+        return;
+      }
       const confirmHit = hitTestTradeLevelConfirm(x, y, this.tradeLevelConfirmAreas);
       if (confirmHit) {
         if (confirmHit.action === "confirm") this.applyPendingChanges(confirmHit.label);
         else this.revertPendingChanges(confirmHit.label);
         return;
       }
+      if (this._showQuantityField && this._draftQtyPillArea) {
+        const p = this._draftQtyPillArea;
+        if (x >= p.pillX && x <= p.pillX + p.pillW && y >= p.pillY && y <= p.pillY + p.pillH) {
+          e.preventDefault();
+          e.stopPropagation();
+          this.openDraftQtyFlyout(p);
+          return;
+        }
+      }
       const closedLevel = hitTestTradeLevelClose(x, y, this.tradeLevelHitAreas);
       if (closedLevel) {
         this._handleTradeLevelClose(closedLevel);
@@ -14737,6 +15565,10 @@ var _ChartEngine = class _ChartEngine {
           this.renderTradeLayer();
         }
       }
+      if (this.expandedClusters.size > 0) {
+        this.expandedClusters.clear();
+        this.renderTradeLayer();
+      }
       const timeAxisY = rect.height - this.timeAxisHeight;
       if (x >= chartW) {
         if (y <= priceH) {
@@ -14852,6 +15684,12 @@ var _ChartEngine = class _ChartEngine {
       this.scheduleRender();
     };
     this.onKeyDown = (e) => {
+      if (e.key === "Escape" && this.expandedClusters.size > 0) {
+        this.expandedClusters.clear();
+        this.renderTradeLayer();
+        e.preventDefault();
+        return;
+      }
       if (e.key === "Escape" && this.pendingLevelDrags.size > 0) {
         this.revertPendingChanges();
         e.preventDefault();
@@ -14871,6 +15709,7 @@ var _ChartEngine = class _ChartEngine {
     this.onTick = (tick) => {
       const all = this.dataStore.all;
       if (all.length === 0) return;
+      if (this._suppressTicks) return;
       this.liveBidAsk = { bid: tick.bid, ask: tick.ask };
       this.setDotTickActive();
       const last = all[all.length - 1];
@@ -14938,7 +15777,9 @@ var _ChartEngine = class _ChartEngine {
       durationTimeframeMap,
       uiConfig,
       labels,
-      tickActivityMs = 3e4
+      tickActivityMs = 3e4,
+      hideSymbolAndTick = false,
+      showBottomBar = false
     } = config;
     this.dataLoader = dataLoader ?? null;
     this.drawingToolsEnabled = config.showDrawingTools !== false;
@@ -14947,6 +15788,7 @@ var _ChartEngine = class _ChartEngine {
     this.labels = resolveLabels(labels);
     this.tickActivityMs = tickActivityMs;
     this.maxCandles = config.maxCandles ?? 200;
+    this.prefetchThreshold = config.prefetchThreshold ?? 80;
     this.defaultVisibleBars = config.defaultVisibleBars ?? DEFAULT_VISIBLE_BARS;
     this.defaultMobileVisibleBars = config.defaultMobileVisibleBars;
     this.explicitMobileDivisor = config.mobileBarDivisor !== void 0;
@@ -14986,7 +15828,11 @@ var _ChartEngine = class _ChartEngine {
     this.showBidAskLines = config.showBidAskLines ?? false;
     this.showActLogo = config.showActLogo ?? false;
     this.hideLevelConfirmCancel = config.hideLevelConfirmCancel ?? false;
+    this.levelClusteringEnabled = config.levelClusteringEnabled ?? true;
+    this.clusterThresholdDistance = config.clusterThresholdDistance ?? 20;
     this.enableThemeToggle = config.enableThemeToggle ?? false;
+    this.tfcEnabled = config.tfcEnabled !== false;
+    this.tfcActive = this.tfcEnabled;
     this.showCandleCountdown = config.showCandleCountdown ?? true;
     this.candleCountdownTimeframes = config.candleCountdownTimeframes;
     this._onOrderSubmit = onOrderSubmit;
@@ -14994,6 +15840,11 @@ var _ChartEngine = class _ChartEngine {
       console.warn("[acttrader-charts] ChartConfig.minLots is deprecated. DraftOrderQtyInput has been removed. The value is stored and used as the submitted lot size.");
       this._minLots = config.minLots;
     }
+    if (config.showQuantityField !== void 0) this._showQuantityField = config.showQuantityField;
+    if (config.quantityFieldConfig) {
+      if (config.quantityFieldConfig.minLots !== void 0) this._qtyFieldMin = config.quantityFieldConfig.minLots;
+      if (config.quantityFieldConfig.maxLots !== void 0) this._qtyFieldMax = config.quantityFieldConfig.maxLots;
+    }
     if (config.onLotsChange !== void 0) {
       console.warn("[acttrader-charts] ChartConfig.onLotsChange is deprecated. DraftOrderQtyInput has been removed; this callback will never fire.");
     }
@@ -15002,6 +15853,7 @@ var _ChartEngine = class _ChartEngine {
     }
     this.themeName = theme === "dark" ? "dark" : "light";
     this.themeOverrides = config.themeOverrides;
+    this.timezone = config.timezone === "local" ? Intl.DateTimeFormat().resolvedOptions().timeZone : config.timezone ?? "UTC";
     this.aggregateFrom = config.aggregateFrom;
     const _baseTheme = this.themeName === "dark" ? DARK_THEME : LIGHT_THEME;
     this.theme = deepMergeTheme(_baseTheme, this.themeOverrides?.[this.themeName]);
@@ -15050,6 +15902,11 @@ var _ChartEngine = class _ChartEngine {
         this.drawingToolsEnabled ? () => this.toggleDrawingTools() : null,
         this.drawingToolsEnabled,
         this.settingsEnabled,
+        this.tfcEnabled,
+        this.tfcActive,
+        this.tfcEnabled ? (enabled) => {
+          this.setTfcActive(enabled);
+        } : null,
         this.series,
         this.timeframe,
         null,
@@ -15201,7 +16058,7 @@ var _ChartEngine = class _ChartEngine {
       this.loadingOverlayEl.appendChild(loadingLabel);
       this.canvasWrap.appendChild(this.loadingOverlayEl);
     }
-    if (showUI) {
+    if (showUI && !hideSymbolAndTick) {
       this.siEl = document.createElement("div");
       Object.assign(this.siEl.style, {
         position: "absolute",
@@ -15345,6 +16202,11 @@ var _ChartEngine = class _ChartEngine {
         const rect = this._cachedDrawRect ?? this.drawCanvas.getBoundingClientRect();
         const y = e.clientY - rect.top;
         const { priceH } = this.getChartLayout();
+        const btnHalfH = this.uiConfig.tradeButton.size / 2;
+        if (overlapsOffViewportPill(y, btnHalfH, this.offViewportHitAreas)) {
+          this.tradeButton?.hide();
+          return;
+        }
         if (y >= 0 && y <= priceH) {
           this.tradeButton?.setY(y);
           const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
@@ -15359,7 +16221,7 @@ var _ChartEngine = class _ChartEngine {
     }
     middleRow.appendChild(this.canvasWrap);
     this.wrapper.appendChild(middleRow);
-    if (showUI) {
+    if (showUI && showBottomBar) {
       const resolvedDurationMap = { ...DURATION_TIMEFRAME_MAP, ...durationTimeframeMap };
       this.bottomBar = new BottomBar(
         (d, tf) => {
@@ -15434,6 +16296,12 @@ var _ChartEngine = class _ChartEngine {
       },
       () => {
         this._isPanning = false;
+      },
+      {
+        enabled: config.momentumScrollEnabled,
+        decay: config.momentumDecay,
+        threshold: config.momentumThreshold,
+        maxVelocity: config.momentumMaxVelocity
       }
     );
     this.zoomHandler = new ZoomHandler(
@@ -15509,9 +16377,31 @@ var _ChartEngine = class _ChartEngine {
     return (this.tradePopover?.isVisible ?? false) || this.draftOrderLabel !== null || (this.tradeDragHandler?.active ?? false) || this.pendingLevelDrags.size > 0;
   }
   // ── Public API ────────────────────────────────────────────────────────────
+  /**
+   * Completely resets the chart to a clean, empty state.
+   *
+   * Cancels any in-flight data fetch, clears all bars, resets the price/time
+   * axes, and discards the live bid/ask price line. The chart will render as
+   * blank until the next `loadData()` call.
+   *
+   * Call this before switching to a new symbol so that no previous symbol's
+   * data, price lines, or stale ticks can bleed into the new chart:
+   * ```
+   * chart.setSymbol('GBPUSD').resetData();
+   * // … fetch new bars, then:
+   * chart.loadData(newBars);
+   * ```
+   */
+  resetData() {
+    ++this._loadGeneration;
+    this.setLoading(false);
+    return this.loadData([]);
+  }
   loadData(bars, fitAll = false) {
     this.isFetching = false;
     this.noMoreData = false;
+    this._suppressTicks = false;
+    this.liveBidAsk = null;
     this.pricePanOffset = 0;
     this.priceScaleFactor = 1;
     this._displayedPriceRange = null;
@@ -15658,6 +16548,8 @@ var _ChartEngine = class _ChartEngine {
   }
   triggerLoad(reason) {
     if (!this.dataLoader) return;
+    const gen = ++this._loadGeneration;
+    this._suppressTicks = true;
     this.isFetching = true;
     this.noMoreData = false;
     const end = /* @__PURE__ */ new Date();
@@ -15669,6 +16561,7 @@ var _ChartEngine = class _ChartEngine {
     const interval = this.timeframeToInterval(this.getBaseInterval());
     this.setLoading(true);
     this.dataLoader({ start, end, interval }).then((bars) => {
+      if (gen !== this._loadGeneration) return;
       this.loadData(this.maybeAggregate(bars), reason === "duration");
       this.setLoading(false);
       this.emitter.emit("dataLoaded", {
@@ -15678,25 +16571,17 @@ var _ChartEngine = class _ChartEngine {
         end
       });
     }).catch(() => {
+      if (gen !== this._loadGeneration) return;
       this.isFetching = false;
       this.setLoading(false);
     });
   }
   checkNeedMoreData() {
     if (!this.dataLoader || this.isFetching || this.noMoreData) return;
-    const threshold = Math.max(
-      20,
-      Math.round(
-        initialVisibleBars(
-          this.mobileBarDivisor,
-          this.explicitMobileDivisor,
-          this.defaultVisibleBars,
-          this.defaultMobileVisibleBars
-        ) * 0.25
-      )
-    );
+    const threshold = Math.max(20, this.prefetchThreshold);
     if (this._targetViewport.startIndex > threshold) return;
     if (this.dataStore.length === 0) return;
+    const gen = this._loadGeneration;
     this.isFetching = true;
     const before = this.dataStore.all[0].time;
     const end = new Date(before - 1);
@@ -15708,9 +16593,11 @@ var _ChartEngine = class _ChartEngine {
     const interval = this.timeframeToInterval(this.getBaseInterval());
     this.setLoading(true);
     this.dataLoader({ start, end, interval }).then((bars) => {
+      if (gen !== this._loadGeneration) return;
       this.prependData(this.maybeAggregate(bars));
       this.setLoading(false);
     }).catch(() => {
+      if (gen !== this._loadGeneration) return;
       this.isFetching = false;
       this.setLoading(false);
     });
@@ -15922,6 +16809,7 @@ var _ChartEngine = class _ChartEngine {
     this.leftBar?.setTheme(this.theme);
     this.tradeButton?.setTheme(this.theme, this.priceAxisWidth);
     this.tradePopover?.setTheme(this.theme);
+    this._draftQtyFlyout?.setTheme(this.theme);
     this.indicatorSettingsDialog?.setTheme(this.theme);
     this.chartSettingsDialog?.setTheme(this.theme);
     this.applyScrollToEndBtnStyles();
@@ -15952,11 +16840,21 @@ var _ChartEngine = class _ChartEngine {
     this.leftBar?.setTheme(this.theme);
     this.tradeButton?.setTheme(this.theme, this.priceAxisWidth);
     this.tradePopover?.setTheme(this.theme);
+    this._draftQtyFlyout?.setTheme(this.theme);
     this.indicatorSettingsDialog?.setTheme(this.theme);
     this.chartSettingsDialog?.setTheme(this.theme);
     this.scheduleRender();
     return this;
   }
+  /**
+   * Changes the display timezone for all time-axis and crosshair labels.
+   * Accepts any IANA string (e.g. `"America/New_York"`), `"UTC"`, or `"local"`.
+   */
+  setTimezone(tz) {
+    this.timezone = tz === "local" ? Intl.DateTimeFormat().resolvedOptions().timeZone : tz;
+    this.scheduleRender();
+    return this;
+  }
   setSeries(series) {
     this.series = series;
     this.topBar?.setSeries(series);
@@ -15965,6 +16863,31 @@ var _ChartEngine = class _ChartEngine {
     this.emitStateChange();
     return this;
   }
+  /**
+   * Toggle TFC (Trade from Charts) on or off at runtime.
+   * When disabled, all trade levels, the trade button, and trade popover are hidden.
+   * Only functional when `tfcEnabled` config option is `true` (default).
+   */
+  setTfcActive(enabled) {
+    if (!this.tfcEnabled) return this;
+    this.tfcActive = enabled;
+    this.topBar?.setTfcActive(enabled);
+    if (!enabled) {
+      this.tradeButton?.hide();
+      this.tradePopover?.hide();
+      if (this.draftOrderLabel !== null) {
+        this.removeDraftOrder();
+      }
+    }
+    if (this.chartSettingsDialog) {
+      this.chartSettingsDialog.destroy();
+      this.chartSettingsDialog = null;
+    }
+    this.renderTradeLayer();
+    this.emitter.emit("tfcToggle", { enabled });
+    this.emitStateChange();
+    return this;
+  }
   clearDuration() {
     if (this.duration === void 0) return;
     this.duration = void 0;
@@ -16008,7 +16931,8 @@ var _ChartEngine = class _ChartEngine {
       })),
       positionRenderStyle: this.positionRenderStyle,
       tradeDisplayFilter: this.tradeDisplayFilter,
-      canvasColors: Object.keys(this.settingsCanvasColors).length > 0 ? { ...this.settingsCanvasColors } : void 0
+      canvasColors: Object.keys(this.settingsCanvasColors).length > 0 ? { ...this.settingsCanvasColors } : void 0,
+      tfcEnabled: this.tfcActive
     };
   }
   /**
@@ -16080,9 +17004,14 @@ var _ChartEngine = class _ChartEngine {
       if (state.canvasColors) {
         this.settingsCanvasColors = state.canvasColors;
       }
+      if (state.tfcEnabled !== void 0 && this.tfcEnabled) {
+        this.tfcActive = state.tfcEnabled;
+        this.topBar?.setTfcActive(state.tfcEnabled);
+      }
     } finally {
       this.isRestoringState = false;
     }
+    this.emitStateChange();
     this.scheduleRender();
     return this;
   }
@@ -16144,6 +17073,7 @@ var _ChartEngine = class _ChartEngine {
     }
     if (this.siStreamDot)
       this.siStreamDot.style.background = this.theme.ui.stream[this.streamStatus];
+    this.liveBidAsk = null;
     return this;
   }
   /**
@@ -16207,6 +17137,38 @@ var _ChartEngine = class _ChartEngine {
     this.tradePopover?.setLots(lots);
     return this;
   }
+  /**
+   * Updates the quantity (lots) shown in the draft order QTY pill and
+   * submitted when the order is confirmed.
+   * @param qty  Lot size to display and submit.
+   */
+  setDraftQty(qty) {
+    if (this.draftOrderLabel) {
+      const idx = this.levels.findIndex((l) => l.label === this.draftOrderLabel);
+      if (idx !== -1) {
+        const lvl = this.levels[idx];
+        this.levels = [
+          ...this.levels.slice(0, idx),
+          { ...lvl, lots: qty },
+          ...this.levels.slice(idx + 1)
+        ];
+        this.renderTradeLayer();
+      }
+    }
+    return this;
+  }
+  openDraftQtyFlyout(pill) {
+    if (!this._draftQtyFlyout) {
+      this._draftQtyFlyout = new DraftQtyFlyout(this.theme, (qty) => this.setDraftQty(qty));
+      this.getFloatingRoot().appendChild(this._draftQtyFlyout.el);
+    }
+    const draft = this.levels.find((l) => l.label === this.draftOrderLabel);
+    const currentQty = draft?.lots ?? this._qtyFieldMin;
+    const rect = this.canvasWrap.getBoundingClientRect();
+    const vpX = rect.left + pill.pillX;
+    const vpY = rect.top + pill.pillY + pill.pillH;
+    this._draftQtyFlyout.show(vpX, vpY, currentQty, this._qtyFieldMin, this._qtyFieldMax);
+  }
   /**
    * @deprecated DraftOrderQtyInput has been removed. This method is a no-op
    * kept for backward compatibility. It will be removed in a future version.
@@ -16682,7 +17644,27 @@ var _ChartEngine = class _ChartEngine {
    */
   selectLevel(label) {
     this.selectedTradeLabel = label;
-    if (label !== null) this.crosshair = null;
+    if (label !== null) {
+      this.crosshair = null;
+      const cluster = this.lastClusters.find(
+        (c) => c.members.some((m) => m.level.label === label)
+      );
+      if (cluster) this.expandedClusters.add(cluster.id);
+    }
+    this.renderTradeLayer();
+    return this;
+  }
+  /** Enable or disable trade-level fan-out clustering at runtime. */
+  setLevelClusteringEnabled(enabled) {
+    this.levelClusteringEnabled = enabled;
+    this.expandedClusters.clear();
+    this.renderTradeLayer();
+    return this;
+  }
+  /** Update the cluster proximity threshold (in pixels) at runtime. Only effective when levelClusteringEnabled is true. */
+  setClusterThresholdDistance(px) {
+    this.clusterThresholdDistance = px;
+    this.expandedClusters.clear();
     this.renderTradeLayer();
     return this;
   }
@@ -16697,6 +17679,7 @@ var _ChartEngine = class _ChartEngine {
     this.chartSettingsDialog?.destroy();
     this.isinPickerModal?.destroy();
     this.tradePopover?.destroy();
+    this._draftQtyFlyout?.destroy();
     this.leftBar?.destroy();
     this.drawCanvas.removeEventListener("mousemove", this.onMouseMove);
     this.drawCanvas.removeEventListener("mouseleave", this.onMouseLeave);
@@ -16865,7 +17848,7 @@ var _ChartEngine = class _ChartEngine {
           theme: this.themeName
         },
         this.labels.dialogs,
-        !!this._onOrderSubmit,
+        !!this._onOrderSubmit && this.tfcActive,
         this.enableThemeToggle
       );
       this.getFloatingRoot().appendChild(this.chartSettingsDialog.el);
@@ -16909,7 +17892,8 @@ var _ChartEngine = class _ChartEngine {
     const modals = [
       this.isinPickerModal?.el,
       this.indicatorSettingsDialog?.el,
-      this.chartSettingsDialog?.el
+      this.chartSettingsDialog?.el,
+      this._draftQtyFlyout?.el
     ];
     for (const el of modals) {
       if (el && el.parentElement !== root) root.appendChild(el);
@@ -16976,11 +17960,12 @@ var _ChartEngine = class _ChartEngine {
     const dpr = window.devicePixelRatio || 1;
     const { tradeCtx: ctx, tradeCanvas: canvas, theme, viewport } = this;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    if (this.levels.length === 0 || this.dataStore.length === 0) {
+    if (!this.tfcActive || this.levels.length === 0 || this.dataStore.length === 0) {
       this.tradeLevelHitAreas = [];
       this.tradeLevelEditAreas = [];
       this.tradeHoverAreas = [];
       this.tradeAddBracketAreas = [];
+      this.offViewportHitAreas = [];
       return;
     }
     const { chartW, priceH } = this.getChartLayout();
@@ -17035,6 +18020,7 @@ var _ChartEngine = class _ChartEngine {
       // Include true pending orders AND entry-order positions (ES/EL)
       processedLevels.filter((l) => l.type === "pending" || isEntryOrder(l))
     ) : processedLevels;
+    const clusterThreshold = this.levelClusteringEnabled ? this.clusterThresholdDistance : 0;
     const result = renderTradeLevels(
       ctx,
       filteredLevels,
@@ -17052,9 +18038,23 @@ var _ChartEngine = class _ChartEngine {
       this.positionRenderStyle,
       this.hideLevelConfirmCancel,
       this.draftOrderLabel,
-      this.draftBracketPnl
+      this.draftBracketPnl,
+      this.expandedClusters,
+      clusterThreshold,
+      this._showQuantityField
     );
     ctx.restore();
+    const offVpResult = renderOffViewportIndicators(
+      ctx,
+      filteredLevels,
+      priceRange,
+      theme,
+      chartW,
+      priceH,
+      this.tradeDragHandler?.dragLabel ?? null,
+      this.selectedTradeLabel
+    );
+    this.offViewportHitAreas = offVpResult.hitAreas;
     ctx.restore();
     this.tradeLevelHitAreas = result.hitAreas;
     this.tradeLevelEditAreas = result.editAreas;
@@ -17062,6 +18062,15 @@ var _ChartEngine = class _ChartEngine {
     this.tradeLevelDragAreas = result.dragAreas;
     this.tradeLevelConfirmAreas = result.confirmAreas;
     this.tradeAddBracketAreas = result.addBracketAreas;
+    this.clusterBadgeAreas = result.clusterBadgeAreas;
+    this.lastClusters = result.clusters;
+    this._draftQtyPillArea = result.draftQtyPillArea;
+    if (this.expandedClusters.size > 0) {
+      const currentIds = new Set(result.clusters.map((c) => c.id));
+      for (const id of this.expandedClusters) {
+        if (!currentIds.has(id)) this.expandedClusters.delete(id);
+      }
+    }
   }
   // ── Inline pending-change confirmation ────────────────────────────────────
   /** Returns the effective entry price for a level, preferring any staged main drag. */
@@ -17175,6 +18184,7 @@ var _ChartEngine = class _ChartEngine {
       side,
       price,
       orderType,
+      lots: this._qtyFieldMin,
       data: { _isDraft: true }
     };
     this.levels = [...this.levels, draftLevel];
@@ -17198,6 +18208,8 @@ var _ChartEngine = class _ChartEngine {
     this.selectedTradeLabel = null;
     this.draftOrderLabel = null;
     this.draftBracketPnl = {};
+    this._draftQtyFlyout?.hide();
+    this._draftQtyPillArea = void 0;
     this.renderTradeLayer();
     this.emitter.emit("draftCancelled", { label, isFullscreen: this.isFullscreen });
   }
@@ -17211,7 +18223,7 @@ var _ChartEngine = class _ChartEngine {
       const draft = level;
       this._onOrderSubmit?.({
         price: mainEntry?.newPrice ?? draft.price,
-        lots: this._minLots,
+        lots: draft.lots ?? this._qtyFieldMin,
         side: draft.side,
         orderType: draft.orderType,
         ...draft.stopLossPrice !== void 0 ? { stopLoss: draft.stopLossPrice } : {},
@@ -17689,7 +18701,8 @@ var _ChartEngine = class _ChartEngine {
         isMobileDevice() ? 3 : void 0,
         this.uiConfig.timeAxis,
         this.timeframe,
-        countdownBarIndex
+        countdownBarIndex,
+        this.timezone
       );
       if (showCountdown) {
         const lastBar2 = this.dataStore.all[this.dataStore.length - 1];
@@ -17722,7 +18735,8 @@ var _ChartEngine = class _ChartEngine {
         subPaneY,
         this.timeframe,
         this.dataStore.getPricePrecision(),
-        this.uiConfig.crosshair
+        this.uiConfig.crosshair,
+        this.timezone
       );
     }
     if (this.logoImage) {
@@ -17956,7 +18970,12 @@ var _ChartEngine = class _ChartEngine {
       if (this._isTradingActive) {
         this.tradeButton.hide();
       } else {
-        this.tradeButton.show();
+        const _btnHalfH1 = this.uiConfig.tradeButton.size / 2;
+        if (overlapsOffViewportPill(y, _btnHalfH1, this.offViewportHitAreas)) {
+          this.tradeButton.hide();
+        } else if (this.tfcActive) {
+          this.tradeButton.show();
+        }
       }
       this._tradeButtonClickData = { price, y };
       const _allBars = this.dataStore.all;
@@ -17969,6 +18988,9 @@ var _ChartEngine = class _ChartEngine {
   /** Shared helper: initiate a trade level main-line drag from a hit area. */
   _startTradeDragFromHit(dragHit, level, hitY) {
     if (!this.tradeDragHandler) return;
+    const { priceH } = this.getChartLayout();
+    const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
+    const levelPixelY = this.scaleManager.yToPixel(dragHit.price, priceRange, priceH);
     if (dragHit.isBracket) {
       this._pendingBracketOrderLabel = dragHit.bracketOrderLabel ?? null;
       this._isBracketNew = false;
@@ -17981,6 +19003,8 @@ var _ChartEngine = class _ChartEngine {
         level,
         dragHit.bracketType,
         dragHit.price,
+        hitY,
+        levelPixelY,
         marketPrice,
         this._effectiveEntryPrice(level.label, level.price)
       );
@@ -18000,6 +19024,7 @@ var _ChartEngine = class _ChartEngine {
         this.tradeDragHandler.startDrag(
           level,
           hitY,
+          levelPixelY,
           dragHit.price,
           posLevel.stopLossPrice,
           posLevel.takeProfitPrice,
@@ -18014,6 +19039,7 @@ var _ChartEngine = class _ChartEngine {
         this.tradeDragHandler.startDrag(
           level,
           hitY,
+          levelPixelY,
           dragHit.price,
           void 0,
           void 0,
@@ -18043,6 +19069,8 @@ var _ChartEngine = class _ChartEngine {
       level,
       addHit.bracketType,
       initialPrice,
+      hitY,
+      btnCenterY,
       marketPrice,
       this._effectiveEntryPrice(level.label, level.price)
     );
@@ -18129,6 +19157,7 @@ var _ChartEngine = class _ChartEngine {
    *  This happens when the system clock was behind feed time during the initial data load. */
   fillTickGap(fromTime, toTime) {
     if (!this.dataLoader) return;
+    if (this.isFetching) return;
     const interval = this.timeframeToInterval(this.getBaseInterval());
     this.dataLoader({ start: new Date(fromTime), end: new Date(toTime), interval }).then((rawBars) => {
       const bars = this.maybeAggregate(rawBars);
@@ -18163,6 +19192,7 @@ var _ChartEngine = class _ChartEngine {
    *  tick-reconstructed OHLCV with authoritative exchange data. No-op if no loader. */
   correctCompletedBar(barTime, intervalMs) {
     if (!this.dataLoader) return;
+    if (this.isFetching) return;
     const start = new Date(barTime);
     const end = new Date(barTime + intervalMs * 3);
     const interval = this.timeframeToInterval(this.getBaseInterval());
@@ -18202,6 +19232,7 @@ var _ChartEngine = class _ChartEngine {
     this.scheduleRender();
   }
   scrollToEnd() {
+    this.panHandler.cancel();
     if (this.scrollAnimId !== null) {
       cancelAnimationFrame(this.scrollAnimId);
       this.scrollAnimId = null;
@@ -18233,6 +19264,38 @@ var _ChartEngine = class _ChartEngine {
     };
     this.scrollAnimId = requestAnimationFrame(step);
   }
+  /**
+   * Smooth-scroll the Y axis so `price` lands at the vertical center of the
+   * chart. Animates `pricePanOffset` only — horizontal viewport is preserved.
+   * Used by off-viewport level indicator clicks.
+   */
+  scrollToCenterPrice(price) {
+    if (!isFinite(price) || this.dataStore.length === 0) return;
+    if (this.scrollAnimId !== null) {
+      cancelAnimationFrame(this.scrollAnimId);
+      this.scrollAnimId = null;
+    }
+    const base = this.dataStore.getPriceRange(this.viewport);
+    const naturalMid = (base.min + base.max) / 2;
+    const startPan = this.pricePanOffset;
+    const targetPan = price - naturalMid;
+    if (Math.abs(targetPan - startPan) < 1e-9) return;
+    const DURATION = 350;
+    const t0 = performance.now();
+    const ease = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+    const step = (now) => {
+      const raw = Math.min((now - t0) / DURATION, 1);
+      const prog = ease(raw);
+      this.pricePanOffset = startPan + (targetPan - startPan) * prog;
+      this.render();
+      if (raw < 1) {
+        this.scrollAnimId = requestAnimationFrame(step);
+      } else {
+        this.scrollAnimId = null;
+      }
+    };
+    this.scrollAnimId = requestAnimationFrame(step);
+  }
   resetPriceAxis() {
     this.priceScaleFactor = 1;
     this.pricePanOffset = 0;
@@ -18240,6 +19303,7 @@ var _ChartEngine = class _ChartEngine {
     this.scheduleRender();
   }
   resetTimeAxis() {
+    this.panHandler.cancel();
     const total = this.dataStore.length;
     if (total === 0) return;
     const newStart = Math.max(