acttrader-charts 1.0.13 → 1.0.14

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: {
@@ -1430,18 +1463,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));
@@ -1513,6 +1546,66 @@ 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 BOX_PAD_Y = 4;
@@ -1631,7 +1724,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) {
   if (levels.length === 0)
     return {
       hitAreas: [],
@@ -1639,7 +1732,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;
@@ -1670,13 +1765,46 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
     const bW = BOX_PAD_X + 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 +1820,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 +1831,10 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
   const dragAreas = [];
   const confirmAreas = [];
   const addBracketAreas = [];
+  const clusterBadgeAreas = [];
+  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;
@@ -1732,9 +1865,134 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
       hideConfirmCancel,
       level.label === draftOrderLabel ? draftBracketPnl : void 0
     );
+    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 };
+}
+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;
@@ -2365,6 +2623,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_X = 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_GAP = 4;
+  const renderPill = (direction, text, y, target) => {
+    const textW = ctx.measureText(text).width;
+    const w = Math.ceil(textW) + PILL_PAD_X * 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_GAP);
+    }
+    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_GAP);
+      }
+    }
+  };
+  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;
@@ -2479,10 +2883,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 +3511,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 +3548,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 +3556,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 +3571,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 +3648,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 +3692,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 +3709,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 +3750,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 +3760,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 +8591,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 +8642,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 +8694,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 +8711,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 +8739,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 +8860,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 +8886,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 +8909,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 +8942,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 +8956,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 +8980,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) {
@@ -12694,9 +13142,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 +13157,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 +13169,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 +13205,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 +13223,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 +13234,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 +13334,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;
@@ -13912,6 +14372,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();
@@ -13985,11 +14447,16 @@ var _ChartEngine = class _ChartEngine {
     // 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 +14471,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 +14483,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 +14523,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 +14630,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 +14842,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();
@@ -14422,6 +14917,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 +15070,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,6 +15157,21 @@ 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);
@@ -14737,6 +15256,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 +15375,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();
@@ -14938,7 +15467,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 +15478,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 +15518,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;
@@ -15050,6 +15586,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 +15742,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 +15886,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 +15905,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) => {
@@ -15658,6 +16204,7 @@ var _ChartEngine = class _ChartEngine {
   }
   triggerLoad(reason) {
     if (!this.dataLoader) return;
+    const gen = ++this._loadGeneration;
     this.isFetching = true;
     this.noMoreData = false;
     const end = /* @__PURE__ */ new Date();
@@ -15669,6 +16216,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 +16226,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 +16248,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);
     });
@@ -15965,6 +16507,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 +16575,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 +16648,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;
   }
@@ -16682,7 +17255,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;
   }
@@ -16865,7 +17458,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);
@@ -16976,11 +17569,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 +17629,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 +17647,22 @@ var _ChartEngine = class _ChartEngine {
       this.positionRenderStyle,
       this.hideLevelConfirmCancel,
       this.draftOrderLabel,
-      this.draftBracketPnl
+      this.draftBracketPnl,
+      this.expandedClusters,
+      clusterThreshold
     );
     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 +17670,14 @@ var _ChartEngine = class _ChartEngine {
     this.tradeLevelDragAreas = result.dragAreas;
     this.tradeLevelConfirmAreas = result.confirmAreas;
     this.tradeAddBracketAreas = result.addBracketAreas;
+    this.clusterBadgeAreas = result.clusterBadgeAreas;
+    this.lastClusters = result.clusters;
+    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. */
@@ -17956,7 +18572,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 +18590,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 +18605,8 @@ var _ChartEngine = class _ChartEngine {
         level,
         dragHit.bracketType,
         dragHit.price,
+        hitY,
+        levelPixelY,
         marketPrice,
         this._effectiveEntryPrice(level.label, level.price)
       );
@@ -18000,6 +18626,7 @@ var _ChartEngine = class _ChartEngine {
         this.tradeDragHandler.startDrag(
           level,
           hitY,
+          levelPixelY,
           dragHit.price,
           posLevel.stopLossPrice,
           posLevel.takeProfitPrice,
@@ -18014,6 +18641,7 @@ var _ChartEngine = class _ChartEngine {
         this.tradeDragHandler.startDrag(
           level,
           hitY,
+          levelPixelY,
           dragHit.price,
           void 0,
           void 0,
@@ -18043,6 +18671,8 @@ var _ChartEngine = class _ChartEngine {
       level,
       addHit.bracketType,
       initialPrice,
+      hitY,
+      btnCenterY,
       marketPrice,
       this._effectiveEntryPrice(level.label, level.price)
     );
@@ -18233,6 +18863,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;