@pradeepjadhav/trading-reload-chart 1.0.4 → 1.1.0

package/dist/trading-reload-chart.js

@@ -1,4 +1,4 @@
-import { forwardRef as Rt, useEffect as rt, useImperativeHandle as Dt, useRef as N } from "react";
+import { forwardRef as Rt, useEffect as st, useImperativeHandle as Dt, useRef as N } from "react";
 import { jsx as At } from "react/jsx-runtime";
 var h = {
   primary: "#7959F7",
@@ -23,7 +23,7 @@ var h = {
   gray: "#808080",
   orange: "#ff9500",
   purple: "#af52de"
-}, st = {
+}, rt = {
   defaultWidthCandles: 10,
   defaultStopLossPercent: 0.1,
   defaultRiskRewardRatio: 1.5,
@@ -114,8 +114,8 @@ var h = {
     fillColor: y.gray,
     fillOpacity: 0
   },
-  longPosition: { ...st },
-  shortPosition: { ...st },
+  longPosition: { ...rt },
+  shortPosition: { ...rt },
   previousDayHighLow: {
     line: {
       color: h.red,
@@ -412,22 +412,22 @@ var h = {
   if (t.length < 2) return 900 * 1e3;
   const e = [];
   for (let i = 1; i < Math.min(t.length, 10); i++) e.push(t[i].time - t[i - 1].time);
-  return e.sort((i, r) => i - r), e[Math.floor(e.length / 2)];
-}, Bt = ({ candleSpacing: t, candleTimeframeMs: e, labelWidth: i, minLabelGap: r }) => {
+  return e.sort((i, s) => i - s), e[Math.floor(e.length / 2)];
+}, Bt = ({ candleSpacing: t, candleTimeframeMs: e, labelWidth: i, minLabelGap: s }) => {
   if (t <= 0 || e <= 0) return lt[0];
-  const s = i + r;
-  for (const a of lt) if (a / e * t >= s) return a;
+  const r = i + s;
+  for (const a of lt) if (a / e * t >= r) return a;
   const n = 1440 * 60 * 1e3, o = n / e * t;
-  return n * Math.ceil(s / o);
+  return n * Math.ceil(r / o);
 }, Wt = (t, e) => {
-  const i = new Date(t), r = (i.getHours() * 60 + i.getMinutes()) * 60 * 1e3 + i.getSeconds() * 1e3 + i.getMilliseconds();
-  return e >= 1440 * 60 * 1e3 ? r === 0 : r % e === 0;
+  const i = new Date(t), s = (i.getHours() * 60 + i.getMinutes()) * 60 * 1e3 + i.getSeconds() * 1e3 + i.getMilliseconds();
+  return e >= 1440 * 60 * 1e3 ? s === 0 : s % e === 0;
 }, Ft = (t) => {
-  const e = new Date(t), i = e.getHours(), r = e.getMinutes();
-  return i === 0 && r === 0 ? String(e.getDate()) : `${String(i).padStart(2, "0")}:${String(r).padStart(2, "0")}`;
+  const e = new Date(t), i = e.getHours(), s = e.getMinutes();
+  return i === 0 && s === 0 ? String(e.getDate()) : `${String(i).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
 }, Yt = (t) => {
-  const e = new Date(t), i = e.toLocaleDateString("en-US", { weekday: "short" }), r = e.toLocaleDateString("en-US", { month: "short" });
-  return `${i} ${e.getDate()} ${r} ${e.getHours().toString().padStart(2, "0")}.${e.getMinutes().toString().padStart(2, "0")}`;
+  const e = new Date(t), i = e.toLocaleDateString("en-US", { weekday: "short" }), s = e.toLocaleDateString("en-US", { month: "short" });
+  return `${i} ${e.getDate()} ${s} ${e.getHours().toString().padStart(2, "0")}.${e.getMinutes().toString().padStart(2, "0")}`;
 }, Ot = class {
   #t;
   #e;
@@ -461,10 +461,10 @@ var h = {
   }
   drawCrosshairTimeLabel() {
     if (!this.crosshair.visible || !this.crosshair.candle) return;
-    const t = this.#e, e = this.#t.width, i = this.#t.height, r = c.axis.axisX.crosshairLabel, s = Yt(this.crosshair.candle.time);
-    t.save(), t.font = r.font;
-    const n = t.measureText(s).width + r.paddingX * 2, o = r.height, a = this.getCrosshairLabelX(n, e), l = Math.max(0, (i - o) / 2);
-    t.fillStyle = r.backgroundColor, t.fillRect(a, l, n, o), t.strokeStyle = r.borderColor, t.lineWidth = r.borderWidth, t.strokeRect(a, l, n, o), t.fillStyle = r.textColor, t.textAlign = "center", t.textBaseline = "middle", t.fillText(s, a + n / 2, l + o / 2), t.restore();
+    const t = this.#e, e = this.#t.width, i = this.#t.height, s = c.axis.axisX.crosshairLabel, r = Yt(this.crosshair.candle.time);
+    t.save(), t.font = s.font;
+    const n = t.measureText(r).width + s.paddingX * 2, o = s.height, a = this.getCrosshairLabelX(n, e), l = Math.max(0, (i - o) / 2);
+    t.fillStyle = s.backgroundColor, t.fillRect(a, l, n, o), t.strokeStyle = s.borderColor, t.lineWidth = s.borderWidth, t.strokeRect(a, l, n, o), t.fillStyle = s.textColor, t.textAlign = "center", t.textBaseline = "middle", t.fillText(r, a + n / 2, l + o / 2), t.restore();
   }
   clearCanvas() {
     this.#e.clearRect(0, 0, this.#t.width, this.#t.height);
@@ -479,16 +479,16 @@ var h = {
   }
   drawAxisLabels() {
     if (!this.viewport) return;
-    const t = this.#e, e = c.axis.axisX, i = this.#t.width, r = It(this.candles);
+    const t = this.#e, e = c.axis.axisX, i = this.#t.width, s = It(this.candles);
     t.save(), t.font = e.font, t.fillStyle = e.textColor, t.textAlign = e.textAlign, t.textBaseline = "middle";
-    const s = t.measureText("00:00").width, n = Bt({
+    const r = t.measureText("00:00").width, n = Bt({
       candleSpacing: this.viewport.candleSpacing,
-      candleTimeframeMs: r,
-      labelWidth: s,
+      candleTimeframeMs: s,
+      labelWidth: r,
       minLabelGap: e.minLabelGap
     }), { startIndex: o, endIndex: a } = this.getVisibleCandleIndexRange(i);
     for (let l = o; l <= a; l += 1) {
-      const d = this.getSlotTime(l, r);
+      const d = this.getSlotTime(l, s);
       if (d === null || !Wt(d, n)) continue;
       const u = this.getCandleCenterX(l), g = Ft(d), m = t.measureText(g).width;
       this.isLabelOutsideCanvas(u, m, i) || (this.drawTick(u), this.drawLabel(g, u));
@@ -508,18 +508,18 @@ var h = {
   }
   getSlotTime(t, e) {
     if (t < this.candles.length) {
-      const s = this.candles[t];
-      return s ? s.time : null;
+      const r = this.candles[t];
+      return r ? r.time : null;
     }
     const i = this.candles[this.candles.length - 1];
     if (!i) return null;
-    const r = t - (this.candles.length - 1);
-    return i.time + r * e;
+    const s = t - (this.candles.length - 1);
+    return i.time + s * e;
   }
   getCandleCenterX(t) {
     if (!this.viewport) return 0;
-    const { candleSpacing: e, candleWidth: i, offsetX: r } = this.viewport;
-    return t * e + r + i / 2;
+    const { candleSpacing: e, candleWidth: i, offsetX: s } = this.viewport;
+    return t * e + s + i / 2;
   }
   isLabelOutsideCanvas(t, e, i) {
     return t + e / 2 < 0 || t - e / 2 > i;
@@ -529,25 +529,25 @@ var h = {
     e.strokeStyle = i.tickColor, e.lineWidth = i.tickWidth, e.beginPath(), e.moveTo(t, 0), e.lineTo(t, i.tickLength), e.stroke();
   }
   drawLabel(t, e) {
-    const i = this.#e, r = c.axis.axisX;
-    i.fillStyle = r.textColor, i.fillText(t, e, r.labelOffsetY);
+    const i = this.#e, s = c.axis.axisX;
+    i.fillStyle = s.textColor, i.fillText(t, e, s.labelOffsetY);
   }
   getCrosshairLabelX(t, e) {
     return Math.max(120, Math.min(e - t, this.crosshair.x - t / 2));
   }
-}, p = (t, e = 5) => Number(t.toFixed(e)), O = ({ price: t, minPrice: e, priceRange: i, chartHeight: r }) => r - (t - e) / i * r, mt = ({ y: t, minPrice: e, priceRange: i, chartHeight: r }) => e + (1 - t / r) * i, Et = ({ priceRange: t, canvasHeight: e }) => {
-  const i = t / (e / c.axis.axisY.tickGap), r = 10 ** Math.floor(Math.log10(i));
-  for (const s of [
+}, p = (t, e = 5) => Number(t.toFixed(e)), O = ({ price: t, minPrice: e, priceRange: i, chartHeight: s }) => s - (t - e) / i * s, mt = ({ y: t, minPrice: e, priceRange: i, chartHeight: s }) => e + (1 - t / s) * i, Et = ({ priceRange: t, canvasHeight: e }) => {
+  const i = t / (e / c.axis.axisY.tickGap), s = 10 ** Math.floor(Math.log10(i));
+  for (const r of [
     1,
     2,
     5,
     10
   ]) {
-    const n = s * r;
+    const n = r * s;
     if (n >= i) return n;
   }
-  return 10 * r;
-}, Vt = class {
+  return 10 * s;
+}, zt = class {
   #t;
   #e;
   viewport = null;
@@ -576,8 +576,8 @@ var h = {
   }
   drawCrosshairPriceLabel() {
     if (!this.crosshair.visible) return;
-    const t = this.#e, e = this.#t.width, i = this.#t.height, r = c.axis.axisY.crosshairLabel, s = p(this.crosshair.price).toFixed(5), n = r.height, o = this.getCrosshairLabelY(n, i);
-    t.save(), t.fillStyle = r.backgroundColor, t.fillRect(0, o, e, n), t.strokeStyle = r.borderColor, t.lineWidth = r.borderWidth, t.strokeRect(0, o, e, n), t.font = r.font, t.fillStyle = r.textColor, t.textAlign = "left", t.textBaseline = "middle", t.fillText(s, r.paddingX, o + n / 2), t.restore();
+    const t = this.#e, e = this.#t.width, i = this.#t.height, s = c.axis.axisY.crosshairLabel, r = p(this.crosshair.price).toFixed(5), n = s.height, o = this.getCrosshairLabelY(n, i);
+    t.save(), t.fillStyle = s.backgroundColor, t.fillRect(0, o, e, n), t.strokeStyle = s.borderColor, t.lineWidth = s.borderWidth, t.strokeRect(0, o, e, n), t.font = s.font, t.fillStyle = s.textColor, t.textAlign = "left", t.textBaseline = "middle", t.fillText(r, s.paddingX, o + n / 2), t.restore();
   }
   clearCanvas() {
     this.#e.clearRect(0, 0, this.#t.width, this.#t.height);
@@ -592,13 +592,13 @@ var h = {
   }
   drawPriceLabels() {
     if (!this.viewport) return;
-    const t = this.#e, e = this.#t.height, i = c.axis.axisY, r = Et({
+    const t = this.#e, e = this.#t.height, i = c.axis.axisY, s = Et({
       priceRange: this.viewport.priceRange,
       canvasHeight: e
     });
     t.save(), t.font = i.font, t.fillStyle = i.textColor, t.textAlign = i.textAlign, t.textBaseline = "middle";
-    const { startPrice: s, endPrice: n } = this.getVisiblePriceRange(r);
-    for (let o = s; o <= n; o += r) {
+    const { startPrice: r, endPrice: n } = this.getVisiblePriceRange(s);
+    for (let o = r; o <= n; o += s) {
       const a = this.getPriceY(o, e);
       this.isPriceOutsideCanvas(a, e) || (this.drawTick(a), this.drawPriceLabel(o, a));
     }
@@ -629,13 +629,13 @@ var h = {
     e.strokeStyle = i.tickColor, e.lineWidth = i.tickWidth, e.beginPath(), e.moveTo(0, t), e.lineTo(i.tickLength, t), e.stroke();
   }
   drawPriceLabel(t, e) {
-    const i = this.#e, r = c.axis.axisY;
-    i.fillStyle = r.textColor, i.fillText(p(t).toFixed(5), r.labelOffsetX, e);
+    const i = this.#e, s = c.axis.axisY;
+    i.fillStyle = s.textColor, i.fillText(p(t).toFixed(5), s.labelOffsetX, e);
   }
   getCrosshairLabelY(t, e) {
     return Math.max(0, Math.min(e - t, this.crosshair.y - t / 2));
   }
-}, zt = class {
+}, Vt = class {
   #t;
   #e;
   mouseX = 0;
@@ -651,8 +651,8 @@ var h = {
     this.#e = e, this.crosshairColor = t.crosshairColor ?? c.crosshair.color, this.crosshairThickness = t.crosshairThickness ?? c.crosshair.thickness, this.crosshairStyle = t.crosshairStyle ?? c.crosshair.style;
   }
   updateMousePosition(t, e, i = {}) {
-    const r = this.getLocalCanvasPoint(t, e), s = i.snapX ?? r.x;
-    this.mouseX = this.clampX(s), this.mouseY = this.clampY(r.y), this.visible = !0;
+    const s = this.getLocalCanvasPoint(t, e), r = i.snapX ?? s.x;
+    this.mouseX = this.clampX(r), this.mouseY = this.clampY(s.y), this.visible = !0;
   }
   hide() {
     this.visible = !1;
@@ -684,10 +684,10 @@ var h = {
     t.clearRect(0, 0, e, i), this.visible && (t.save(), this.applyCrosshairStyle(), this.drawVerticalCrosshairLine(t, i), this.drawHorizontalCrosshairLine(t, e), t.restore());
   }
   getLocalCanvasPoint(t, e) {
-    const i = this.#t.getBoundingClientRect(), r = this.#t.width / i.width, s = this.#t.height / i.height;
+    const i = this.#t.getBoundingClientRect(), s = this.#t.width / i.width, r = this.#t.height / i.height;
     return {
-      x: (t - i.left) * r,
-      y: (e - i.top) * s
+      x: (t - i.left) * s,
+      y: (e - i.top) * r
     };
   }
   clampX(t) {
@@ -709,8 +709,8 @@ var h = {
         return [2, 6];
     }
   }
-  drawLine({ ctx: t, fromX: e, fromY: i, toX: r, toY: s }) {
-    t.beginPath(), t.moveTo(e, i), t.lineTo(r, s), t.stroke();
+  drawLine({ ctx: t, fromX: e, fromY: i, toX: s, toY: r }) {
+    t.beginPath(), t.moveTo(e, i), t.lineTo(s, r), t.stroke();
   }
 }, F = 60 * 1e3, Ct = 60 * F, Nt = 24 * Ct, _t = class {
   #t;
@@ -740,8 +740,8 @@ var h = {
       this.setFallbackViewport();
       return;
     }
-    const t = this.getInitialVisibleCandles(), { minPrice: e, maxPrice: i } = this.getCandlesPriceBounds(t), r = this.getInitialPriceRange(e, i);
-    this.priceCenter = (e + i) / 2, this.priceRange = r, this.initialPriceRange = r;
+    const t = this.getInitialVisibleCandles(), { minPrice: e, maxPrice: i } = this.getCandlesPriceBounds(t), s = this.getInitialPriceRange(e, i);
+    this.priceCenter = (e + i) / 2, this.priceRange = s, this.initialPriceRange = s;
   }
   isWithinAutoFollowThreshold() {
     return this.getRightGap() <= this.autoFollowThresholdCandles * this.candleSpacing + 5;
@@ -833,11 +833,11 @@ var h = {
   render() {
     const t = this.#e, e = this.#t.width, i = this.#t.height;
     if (this.clearCanvas(t, e, i), this.candles.length === 0) return;
-    const { startIndex: r, endIndex: s } = this.getVisibleRange(e), n = this.candles.slice(r, s + 1);
+    const { startIndex: s, endIndex: r } = this.getVisibleRange(e), n = this.candles.slice(s, r + 1);
     this.drawCandles({
       ctx: t,
       candles: n,
-      startIndex: r,
+      startIndex: s,
       chartHeight: i
     });
     const o = {
@@ -847,9 +847,9 @@ var h = {
     };
     this.drawAskPriceLine(o), this.drawBidPriceLine(o);
   }
-  drawCandles({ ctx: t, candles: e, startIndex: i, chartHeight: r }) {
-    e.forEach((s, n) => {
-      const o = i + n, a = this.getCandleX(o), l = this.getCandleColor(s), d = this.getCandleYCoordinates(s, r);
+  drawCandles({ ctx: t, candles: e, startIndex: i, chartHeight: s }) {
+    e.forEach((r, n) => {
+      const o = i + n, a = this.getCandleX(o), l = this.getCandleColor(r), d = this.getCandleYCoordinates(r, s);
       this.drawSingleCandle({
         ctx: t,
         candleX: a,
@@ -858,38 +858,38 @@ var h = {
       });
     });
   }
-  drawSingleCandle({ ctx: t, candleX: e, openY: i, closeY: r, highY: s, lowY: n, candleColor: o }) {
+  drawSingleCandle({ ctx: t, candleX: e, openY: i, closeY: s, highY: r, lowY: n, candleColor: o }) {
     t.strokeStyle = o, t.fillStyle = o;
     const a = e + this.candleWidth / 2;
-    t.beginPath(), t.moveTo(a, s), t.lineTo(a, n), t.stroke();
-    const l = Math.min(i, r), d = Math.max(Math.abs(r - i), c.candles.minBodyHeight);
+    t.beginPath(), t.moveTo(a, r), t.lineTo(a, n), t.stroke();
+    const l = Math.min(i, s), d = Math.max(Math.abs(s - i), c.candles.minBodyHeight);
     t.fillRect(e, l, this.candleWidth, d);
   }
-  drawPriceLine({ ctx: t, chartWidth: e, chartHeight: i, price: r, color: s, opacity: n, lineWidth: o, dash: a }) {
-    const l = this.getPriceY(p(r), i);
-    t.save(), t.globalAlpha = n, t.strokeStyle = s, t.lineWidth = o, t.setLineDash(a), t.beginPath(), t.moveTo(0, l), t.lineTo(e, l), t.stroke(), t.restore();
+  drawPriceLine({ ctx: t, chartWidth: e, chartHeight: i, price: s, color: r, opacity: n, lineWidth: o, dash: a }) {
+    const l = this.getPriceY(p(s), i);
+    t.save(), t.globalAlpha = n, t.strokeStyle = r, t.lineWidth = o, t.setLineDash(a), t.beginPath(), t.moveTo(0, l), t.lineTo(e, l), t.stroke(), t.restore();
   }
   drawBidPriceLine({ ctx: t, chartWidth: e, chartHeight: i }) {
-    const r = this.candles.at(-1);
-    !r || !c.candles.liveBidPriceLine.visible || this.drawPriceLine({
+    const s = this.candles.at(-1);
+    !s || !c.candles.liveBidPriceLine.visible || this.drawPriceLine({
       ctx: t,
       chartWidth: e,
       chartHeight: i,
-      price: r.close,
-      color: this.getBidPriceLineColor(r),
+      price: s.close,
+      color: this.getBidPriceLineColor(s),
       opacity: c.candles.liveBidPriceLine.opacity,
       lineWidth: c.candles.liveBidPriceLine.width,
       dash: c.candles.liveBidPriceLine.dash
     });
   }
   drawAskPriceLine({ ctx: t, chartWidth: e, chartHeight: i }) {
-    const r = this.candles.at(-1);
-    !r || !c.candles.liveAskPriceLine.visible || r.ask == null || this.drawPriceLine({
+    const s = this.candles.at(-1);
+    !s || !c.candles.liveAskPriceLine.visible || s.ask == null || this.drawPriceLine({
       ctx: t,
       chartWidth: e,
       chartHeight: i,
-      price: r.ask,
-      color: this.getAskPriceLineColor(r),
+      price: s.ask,
+      color: this.getAskPriceLineColor(s),
       opacity: c.candles.liveAskPriceLine.opacity,
       lineWidth: c.candles.liveAskPriceLine.width,
       dash: c.candles.liveAskPriceLine.dash
@@ -917,15 +917,15 @@ var h = {
   }
   getCandlesPriceBounds(t) {
     let e = Number.POSITIVE_INFINITY, i = Number.NEGATIVE_INFINITY;
-    for (const r of t)
-      r.low < e && (e = r.low), r.high > i && (i = r.high);
+    for (const s of t)
+      s.low < e && (e = s.low), s.high > i && (i = s.high);
     return {
       minPrice: e,
       maxPrice: i
     };
   }
   getInitialPriceRange(t, e) {
-    const i = this.getInitialFallbackPercent(), r = p(e - t), s = Math.max(Math.abs((t + e) / 2) * i, 1e-5), n = Math.max(r, s);
+    const i = this.getInitialFallbackPercent(), s = p(e - t), r = Math.max(Math.abs((t + e) / 2) * i, 1e-5), n = Math.max(s, r);
     return n + n * 0.2;
   }
   getInitialFallbackPercent() {
@@ -957,11 +957,11 @@ var h = {
     return (this.#t.width - this.offsetX) / this.candleSpacing;
   }
   getNextHorizontalZoom(t) {
-    const { speed: e, min: i, max: r } = c.zoom.x, s = this.zoomX + t * e;
-    return Math.max(i, Math.min(s, r));
+    const { speed: e, min: i, max: s } = c.zoom.x, r = this.zoomX + t * e;
+    return Math.max(i, Math.min(r, s));
   }
   getNextVerticalPriceRange(t) {
-    const { speed: e, min: i, max: r } = c.zoom.y, s = 1 - t * e, n = this.priceRange * s, o = this.initialPriceRange * (i / 100), a = this.initialPriceRange * (r / 100);
+    const { speed: e, min: i, max: s } = c.zoom.y, r = 1 - t * e, n = this.priceRange * r, o = this.initialPriceRange * (i / 100), a = this.initialPriceRange * (s / 100);
     return Math.max(o, Math.min(n, a));
   }
   clearCanvas(t, e, i) {
@@ -996,7 +996,7 @@ var h = {
   #t;
   #e;
   #r = null;
-  #s = null;
+  #i = null;
   constructor({ ctx: t, config: e }) {
     this.#t = t, this.#e = e;
   }
@@ -1007,32 +1007,32 @@ var h = {
     this.#e = t;
   }
   setPreviousDay(t) {
-    this.#s = t ?? null;
+    this.#i = t ?? null;
   }
   render() {
-    if (!this.#r || !this.#s) return;
-    const { high: t, low: e } = this.#s;
-    Number.isFinite(t) && t > 0 && this.#c(t, "PDH"), Number.isFinite(e) && e > 0 && this.#c(e, "PDL");
+    if (!this.#r || !this.#i) return;
+    const { high: t, low: e } = this.#i;
+    Number.isFinite(t) && t > 0 && this.#u(t, "PDH"), Number.isFinite(e) && e > 0 && this.#u(e, "PDL");
   }
-  #c(t, e) {
+  #u(t, e) {
     if (!this.#r || !this.#e) return;
-    const i = this.#t, r = i.canvas, s = O({
+    const i = this.#t, s = i.canvas, r = O({
       price: t,
       minPrice: this.#r.minPrice,
       priceRange: this.#r.priceRange,
-      chartHeight: r.height
+      chartHeight: s.height
     });
-    if (s < 0 || s > r.height) return;
-    const { line: n, text: o } = this.#e, a = r.width;
+    if (r < 0 || r > s.height) return;
+    const { line: n, text: o } = this.#e, a = s.width;
     i.save(), i.font = o.font;
     const l = i.measureText(e).width, d = a / 2, u = l / 2 + o.paddingX;
-    i.globalAlpha = n.opacity, i.strokeStyle = n.color, i.lineWidth = n.width, i.setLineDash(n.dash), i.beginPath(), i.moveTo(0, s), i.lineTo(d - u, s), i.stroke(), i.beginPath(), i.moveTo(d + u, s), i.lineTo(a, s), i.stroke(), i.setLineDash([]), i.globalAlpha = 1, i.fillStyle = o.color, i.textAlign = "center", i.textBaseline = "middle", i.fillText(e, d, s), i.restore();
+    i.globalAlpha = n.opacity, i.strokeStyle = n.color, i.lineWidth = n.width, i.setLineDash(n.dash), i.beginPath(), i.moveTo(0, r), i.lineTo(d - u, r), i.stroke(), i.beginPath(), i.moveTo(d + u, r), i.lineTo(a, r), i.stroke(), i.setLineDash([]), i.globalAlpha = 1, i.fillStyle = o.color, i.textAlign = "center", i.textBaseline = "middle", i.fillText(e, d, r), i.restore();
   }
 }, vt = (t, e) => {
-  const i = t.getBoundingClientRect(), r = t.width / i.width, s = t.height / i.height;
+  const i = t.getBoundingClientRect(), s = t.width / i.width, r = t.height / i.height;
   return {
-    x: (e.clientX - i.left) * r,
-    y: (e.clientY - i.top) * s
+    x: (e.clientX - i.left) * s,
+    y: (e.clientY - i.top) * r
   };
 };
 var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `shape-${Date.now()}-${Math.random().toString(16).slice(2)}`, $ = (t, e) => vt(t, e), ht = (t, e) => ({
@@ -1042,40 +1042,40 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   x: e.getXForTime(t.time),
   y: e.getYForPrice(t.price)
 }), Ut = (t, e) => {
-  const i = Math.min(t.x, e.x), r = Math.max(t.x, e.x), s = Math.min(t.y, e.y), n = Math.max(t.y, e.y);
+  const i = Math.min(t.x, e.x), s = Math.max(t.x, e.x), r = Math.min(t.y, e.y), n = Math.max(t.y, e.y);
   return {
     left: i,
-    top: s,
-    right: r,
+    top: r,
+    right: s,
     bottom: n,
-    width: r - i,
-    height: n - s
+    width: s - i,
+    height: n - r
   };
 }, J = (t, e, i) => Ut(C(t, i), C(e, i)), K = (t, e) => {
-  const i = t.x - e.x, r = t.y - e.y;
-  return Math.sqrt(i * i + r * r);
+  const i = t.x - e.x, s = t.y - e.y;
+  return Math.sqrt(i * i + s * s);
 }, yt = (t, e, i) => {
-  const r = i.x - e.x, s = i.y - e.y, n = r * r + s * s;
+  const s = i.x - e.x, r = i.y - e.y, n = s * s + r * r;
   if (n === 0) return K(t, e);
-  const o = Math.max(0, Math.min(1, ((t.x - e.x) * r + (t.y - e.y) * s) / n));
+  const o = Math.max(0, Math.min(1, ((t.x - e.x) * s + (t.y - e.y) * r) / n));
   return K(t, {
-    x: e.x + o * r,
-    y: e.y + o * s
+    x: e.x + o * s,
+    y: e.y + o * r
   });
 }, wt = (t, e, i = 0) => t.x >= e.left - i && t.x <= e.right + i && t.y >= e.top - i && t.y <= e.bottom + i, $t = (t, e, i = 8) => {
   if (!wt(t, e, i)) return !1;
-  const r = Math.abs(t.x - e.left) <= i, s = Math.abs(t.x - e.right) <= i, n = Math.abs(t.y - e.top) <= i, o = Math.abs(t.y - e.bottom) <= i, a = t.x >= e.left - i && t.x <= e.right + i, l = t.y >= e.top - i && t.y <= e.bottom + i;
-  return (r || s) && l || (n || o) && a;
-}, x = ({ shapeId: t, type: e, point: i, radius: r = 5, cursor: s, index: n }) => ({
+  const s = Math.abs(t.x - e.left) <= i, r = Math.abs(t.x - e.right) <= i, n = Math.abs(t.y - e.top) <= i, o = Math.abs(t.y - e.bottom) <= i, a = t.x >= e.left - i && t.x <= e.right + i, l = t.y >= e.top - i && t.y <= e.bottom + i;
+  return (s || r) && l || (n || o) && a;
+}, x = ({ shapeId: t, type: e, point: i, radius: s = 5, cursor: r, index: n }) => ({
   shapeId: t,
   type: e,
   x: i.x,
   y: i.y,
-  radius: r,
-  cursor: s,
+  radius: s,
+  cursor: r,
   index: n
-}), j = (t, e) => K(t, e) <= e.radius + 2, z = (t, e = 1) => t === "dashed" ? [e * 6, e * 4] : t === "dotted" ? [e, e * 3] : [], Q = (t, e, i) => {
-  t.strokeStyle = P(e.lineColor, e.lineOpacity), t.lineWidth = i ?? e.lineWidth, t.setLineDash(z(e.lineStyle, t.lineWidth));
+}), j = (t, e) => K(t, e) <= e.radius + 2, V = (t, e = 1) => t === "dashed" ? [e * 6, e * 4] : t === "dotted" ? [e, e * 3] : [], Q = (t, e, i) => {
+  t.strokeStyle = P(e.lineColor, e.lineOpacity), t.lineWidth = i ?? e.lineWidth, t.setLineDash(V(e.lineStyle, t.lineWidth));
 }, Pt = (t, e, i) => !e || i === void 0 || i <= 0 ? !1 : (t.fillStyle = P(e, i), !0), E = (t) => {
   t.setLineDash([]);
 }, Jt = (t, e, i = {
@@ -1084,35 +1084,35 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   borderThickness: 3
 }) => {
   t.save(), t.beginPath(), t.arc(e.x, e.y, e.radius, 0, Math.PI * 2), t.fillStyle = i.fillColor, t.fill(), t.lineWidth = i.borderThickness, t.strokeStyle = i.borderColor, t.stroke(), t.restore();
-}, V = (t, e, i) => {
-  e.forEach((r) => {
-    Jt(t, r, i);
+}, z = (t, e, i) => {
+  e.forEach((s) => {
+    Jt(t, s, i);
   });
 }, P = (t, e) => {
   const i = jt(e, 0, 1);
   return t.startsWith("rgba(") ? t : t.startsWith("rgb(") ? t.replace("rgb(", "rgba(").replace(")", `, ${i})`) : t.startsWith("#") ? Kt(t, i) : t;
 }, Kt = (t, e) => {
-  const i = t.replace("#", ""), r = i.length === 3 ? i.split("").map((s) => `${s}${s}`).join("") : i;
-  return `rgba(${parseInt(r.slice(0, 2), 16)}, ${parseInt(r.slice(2, 4), 16)}, ${parseInt(r.slice(4, 6), 16)}, ${e})`;
+  const i = t.replace("#", ""), s = i.length === 3 ? i.split("").map((r) => `${r}${r}`).join("") : i;
+  return `rgba(${parseInt(s.slice(0, 2), 16)}, ${parseInt(s.slice(2, 4), 16)}, ${parseInt(s.slice(4, 6), 16)}, ${e})`;
 }, jt = (t, e, i) => Math.min(i, Math.max(e, t)), dt = (t, e, i) => e + (t - e) * i, Z = (t, e) => {
   if (t.length === 0) return -1;
-  let i = 0, r = Math.abs(t[0].time - e);
-  for (let s = 1; s < t.length; s += 1) {
-    const n = Math.abs(t[s].time - e);
-    n < r && (r = n, i = s);
+  let i = 0, s = Math.abs(t[0].time - e);
+  for (let r = 1; r < t.length; r += 1) {
+    const n = Math.abs(t[r].time - e);
+    n < s && (s = n, i = r);
   }
   return i;
 }, q = (t) => {
   if (t.length < 2) return 900 * 1e3;
   const e = [];
   for (let i = 1; i < t.length; i += 1) {
-    const r = t[i].time - t[i - 1].time;
-    r > 0 && e.push(r);
+    const s = t[i].time - t[i - 1].time;
+    s > 0 && e.push(s);
   }
-  return e.length === 0 ? 900 * 1e3 : e.reduce((i, r) => i + r, 0) / e.length;
+  return e.length === 0 ? 900 * 1e3 : e.reduce((i, s) => i + s, 0) / e.length;
 }, Zt = (t, e, i) => {
-  const r = Z(t, e), s = r + i;
-  return r >= 0 && s >= 0 && s < t.length ? t[s].time : e + q(t) * i;
+  const s = Z(t, e), r = s + i;
+  return s >= 0 && r >= 0 && r < t.length ? t[r].time : e + q(t) * i;
 }, ct = (t) => t instanceof MouseEvent && t.type === "contextmenu" ? !1 : "button" in t && t.type === "pointerdown" ? t.button === 0 : !0, f = {
   handleColor: h.background,
   handleBorderColor: h.blue,
@@ -1165,20 +1165,20 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     fillColor: "#808080",
     fillOpacity: 0.04
   };
-  static draw({ ctx: e, shape: i, converter: r, config: s = I.defaultConfig, selected: n = !1, hovered: o = !1 }) {
-    const [a, l] = i.vertices, d = C(a, r), u = C(l, r), g = J(a, l, r), m = Math.min(d.x, u.x), b = Math.max(d.x, u.x);
-    e.save(), Pt(e, s.fillColor, s.fillOpacity) && e.fillRect(g.left, g.top, g.width, g.height);
-    for (const v of s.levels) {
-      const S = dt(a.price, l.price, v.level), T = r.getYForPrice(S), k = v.lineWidth;
-      e.beginPath(), e.strokeStyle = P(v.color, v.opacity), e.lineWidth = k, e.setLineDash(z(v.lineStyle, k)), e.moveTo(m, T), e.lineTo(b, T), e.stroke(), v.label && (e.setLineDash([]), e.fillStyle = P(v.color, v.opacity), e.font = "11px sans-serif", e.textBaseline = "middle", e.fillText(Number(v.label).toFixed(2).toString(), b + 12, T));
+  static draw({ ctx: e, shape: i, converter: s, config: r = I.defaultConfig, selected: n = !1, hovered: o = !1 }) {
+    const [a, l] = i.vertices, d = C(a, s), u = C(l, s), g = J(a, l, s), m = Math.min(d.x, u.x), b = Math.max(d.x, u.x);
+    e.save(), Pt(e, r.fillColor, r.fillOpacity) && e.fillRect(g.left, g.top, g.width, g.height);
+    for (const v of r.levels) {
+      const S = dt(a.price, l.price, v.level), T = s.getYForPrice(S), k = v.lineWidth;
+      e.beginPath(), e.strokeStyle = P(v.color, v.opacity), e.lineWidth = k, e.setLineDash(V(v.lineStyle, k)), e.moveTo(m, T), e.lineTo(b, T), e.stroke(), v.label && (e.setLineDash([]), e.fillStyle = P(v.color, v.opacity), e.font = "11px sans-serif", e.textBaseline = "middle", e.fillText(Number(v.label).toFixed(2).toString(), b + 12, T));
     }
-    E(e), (n || o) && V(e, I.getHandles(i, r), {
+    E(e), (n || o) && z(e, I.getHandles(i, s), {
       fillColor: f.handleColor,
       borderColor: f.handleBorderColor,
       borderThickness: f.handleBorderThickness
     }), e.restore();
   }
-  static drawDraft({ ctx: e, vertices: i, converter: r, config: s = I.defaultConfig }) {
+  static drawDraft({ ctx: e, vertices: i, converter: s, config: r = I.defaultConfig }) {
     I.draw({
       ctx: e,
       shape: {
@@ -1186,13 +1186,13 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         type: "fibRetracement",
         vertices: i
       },
-      converter: r,
-      config: s,
+      converter: s,
+      config: r,
       selected: !0
     });
   }
   static getHandles(e, i) {
-    const [r, s] = e.vertices, n = C(r, i), o = C(s, i);
+    const [s, r] = e.vertices, n = C(s, i), o = C(r, i);
     return [x({
       shapeId: e.id,
       type: "start",
@@ -1207,12 +1207,12 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       cursor: "grab"
     })];
   }
-  static hitTest({ point: e, shape: i, converter: r, tolerance: s = 8, config: n = I.defaultConfig }) {
-    const [o, a] = i.vertices, l = C(o, r), d = C(a, r), u = Math.min(l.x, d.x), g = Math.max(l.x, d.x);
-    if (e.x < u - s || e.x > g + s) return !1;
+  static hitTest({ point: e, shape: i, converter: s, tolerance: r = 8, config: n = I.defaultConfig }) {
+    const [o, a] = i.vertices, l = C(o, s), d = C(a, s), u = Math.min(l.x, d.x), g = Math.max(l.x, d.x);
+    if (e.x < u - r || e.x > g + r) return !1;
     for (const m of n.levels) {
-      const b = dt(o.price, a.price, m.level), v = r.getYForPrice(b);
-      if (Math.abs(e.y - v) <= s) return !0;
+      const b = dt(o.price, a.price, m.level), v = s.getYForPrice(b);
+      if (Math.abs(e.y - v) <= r) return !0;
     }
     return !1;
   }
@@ -1228,13 +1228,13 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       }]
     };
   }
-  static resize(e, i, r) {
+  static resize(e, i, s) {
     return i === "start" ? {
       ...e,
-      vertices: [r, e.vertices[1]]
+      vertices: [s, e.vertices[1]]
     } : i === "end" ? {
       ...e,
-      vertices: [e.vertices[0], r]
+      vertices: [e.vertices[0], s]
     } : e;
   }
 }, M = class Y {
@@ -1244,15 +1244,15 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     lineOpacity: 1,
     lineStyle: "solid"
   };
-  static draw({ ctx: e, shape: i, converter: r, config: s = Y.defaultConfig, selected: n = !1, hovered: o = !1 }) {
-    const [a, l] = i.vertices, d = C(a, r), u = C(l, r);
-    e.save(), Q(e, s), e.beginPath(), e.moveTo(d.x, d.y), e.lineTo(u.x, u.y), e.stroke(), E(e), (n || o) && V(e, Y.getHandles(i, r), {
+  static draw({ ctx: e, shape: i, converter: s, config: r = Y.defaultConfig, selected: n = !1, hovered: o = !1 }) {
+    const [a, l] = i.vertices, d = C(a, s), u = C(l, s);
+    e.save(), Q(e, r), e.beginPath(), e.moveTo(d.x, d.y), e.lineTo(u.x, u.y), e.stroke(), E(e), (n || o) && z(e, Y.getHandles(i, s), {
       fillColor: f.handleColor,
       borderColor: f.handleBorderColor,
       borderThickness: f.handleBorderThickness
     }), e.restore();
   }
-  static drawDraft({ ctx: e, vertices: i, converter: r, config: s = Y.defaultConfig }) {
+  static drawDraft({ ctx: e, vertices: i, converter: s, config: r = Y.defaultConfig }) {
     Y.draw({
       ctx: e,
       shape: {
@@ -1260,13 +1260,13 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         type: "trendline",
         vertices: i
       },
-      converter: r,
-      config: s,
+      converter: s,
+      config: r,
       selected: !0
     });
   }
   static getHandles(e, i) {
-    const [r, s] = e.vertices, n = C(r, i), o = C(s, i);
+    const [s, r] = e.vertices, n = C(s, i), o = C(r, i);
     return [x({
       shapeId: e.id,
       type: "start",
@@ -1281,9 +1281,9 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       cursor: "grab"
     })];
   }
-  static hitTest({ point: e, shape: i, converter: r, tolerance: s = 8 }) {
+  static hitTest({ point: e, shape: i, converter: s, tolerance: r = 8 }) {
     const [n, o] = i.vertices;
-    return yt(e, C(n, r), C(o, r)) <= s;
+    return yt(e, C(n, s), C(o, s)) <= r;
   }
   static move(e, i) {
     return {
@@ -1297,13 +1297,13 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       }]
     };
   }
-  static resize(e, i, r) {
+  static resize(e, i, s) {
     return i === "start" ? {
       ...e,
-      vertices: [r, e.vertices[1]]
+      vertices: [s, e.vertices[1]]
     } : i === "end" ? {
       ...e,
-      vertices: [e.vertices[0], r]
+      vertices: [e.vertices[0], s]
     } : e;
   }
 }, R = class B {
@@ -1315,27 +1315,27 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     fillColor: "#2962ff",
     fillOpacity: 0
   };
-  static draw({ ctx: e, shape: i, converter: r, config: s = B.defaultConfig, selected: n = !1, hovered: o = !1 }) {
-    const a = i.vertices.map((l) => C(l, r));
+  static draw({ ctx: e, shape: i, converter: s, config: r = B.defaultConfig, selected: n = !1, hovered: o = !1 }) {
+    const a = i.vertices.map((l) => C(l, s));
     if (a.length !== 0) {
-      e.save(), Q(e, s), e.beginPath(), e.moveTo(a[0].x, a[0].y);
+      e.save(), Q(e, r), e.beginPath(), e.moveTo(a[0].x, a[0].y);
       for (let l = 1; l < a.length; l += 1) e.lineTo(a[l].x, a[l].y);
       e.stroke(), E(e), a.length >= 2 && B.drawEndArrow({
         ctx: e,
         previousPoint: a[a.length - 2],
         endPoint: a[a.length - 1],
-        color: s.lineColor,
-        opacity: s.lineOpacity,
-        lineWidth: s.lineWidth
-      }), (n || o) && V(e, B.getHandles(i, r), {
+        color: r.lineColor,
+        opacity: r.lineOpacity,
+        lineWidth: r.lineWidth
+      }), (n || o) && z(e, B.getHandles(i, s), {
         fillColor: f.handleColor,
         borderColor: f.handleBorderColor,
         borderThickness: f.handleBorderThickness
       }), e.restore();
     }
   }
-  static drawDraft({ ctx: e, vertices: i, previewVertex: r, converter: s, config: n = B.defaultConfig }) {
-    const o = r ? [...i, r] : i;
+  static drawDraft({ ctx: e, vertices: i, previewVertex: s, converter: r, config: n = B.defaultConfig }) {
+    const o = s ? [...i, s] : i;
     B.draw({
       ctx: e,
       shape: {
@@ -1343,48 +1343,48 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         type: "path",
         vertices: o
       },
-      converter: s,
+      converter: r,
       config: n,
       selected: !0
     });
   }
   static getHandles(e, i) {
-    return e.vertices.map((r, s) => x({
+    return e.vertices.map((s, r) => x({
       shapeId: e.id,
-      type: s === 0 ? "start" : s === e.vertices.length - 1 ? "end" : "move",
-      point: C(r, i),
+      type: r === 0 ? "start" : r === e.vertices.length - 1 ? "end" : "move",
+      point: C(s, i),
       radius: f.handleRadius,
       cursor: "grab",
-      index: s
+      index: r
     }));
   }
-  static hitTest({ point: e, shape: i, converter: r, tolerance: s = 8 }) {
-    const n = i.vertices.map((o) => C(o, r));
+  static hitTest({ point: e, shape: i, converter: s, tolerance: r = 8 }) {
+    const n = i.vertices.map((o) => C(o, s));
     if (n.length === 1) {
       const o = n[0], a = e.x - o.x, l = e.y - o.y;
-      return Math.sqrt(a * a + l * l) <= s;
+      return Math.sqrt(a * a + l * l) <= r;
     }
-    for (let o = 1; o < n.length; o += 1) if (yt(e, n[o - 1], n[o]) <= s) return !0;
+    for (let o = 1; o < n.length; o += 1) if (yt(e, n[o - 1], n[o]) <= r) return !0;
     return !1;
   }
   static move(e, i) {
     return {
       ...e,
-      vertices: e.vertices.map((r) => ({
-        time: r.time + i.time,
-        price: r.price + i.price
+      vertices: e.vertices.map((s) => ({
+        time: s.time + i.time,
+        price: s.price + i.price
       }))
     };
   }
-  static resize(e, i, r) {
+  static resize(e, i, s) {
     return i < 0 || i >= e.vertices.length ? e : {
       ...e,
-      vertices: e.vertices.map((s, n) => n === i ? r : s)
+      vertices: e.vertices.map((r, n) => n === i ? s : r)
     };
   }
-  static drawEndArrow({ ctx: e, previousPoint: i, endPoint: r, color: s, opacity: n, lineWidth: o }) {
-    const a = Math.atan2(r.y - i.y, r.x - i.x), l = 12, d = Math.PI / 7;
-    e.save(), e.beginPath(), e.strokeStyle = P(s, n), e.fillStyle = P(s, n), e.lineWidth = o, e.setLineDash([]), e.moveTo(r.x, r.y), e.lineTo(r.x - l * Math.cos(a - d), r.y - l * Math.sin(a - d)), e.lineTo(r.x - l * Math.cos(a + d), r.y - l * Math.sin(a + d)), e.closePath(), e.fill(), e.stroke(), e.restore();
+  static drawEndArrow({ ctx: e, previousPoint: i, endPoint: s, color: r, opacity: n, lineWidth: o }) {
+    const a = Math.atan2(s.y - i.y, s.x - i.x), l = 12, d = Math.PI / 7;
+    e.save(), e.beginPath(), e.strokeStyle = P(r, n), e.fillStyle = P(r, n), e.lineWidth = o, e.setLineDash([]), e.moveTo(s.x, s.y), e.lineTo(s.x - l * Math.cos(a - d), s.y - l * Math.sin(a - d)), e.lineTo(s.x - l * Math.cos(a + d), s.y - l * Math.sin(a + d)), e.closePath(), e.fill(), e.stroke(), e.restore();
   }
 }, D = class W {
   static defaultConfig = {
@@ -1399,15 +1399,15 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     textFontFamily: "Arial",
     textFontSize: 20
   };
-  static draw({ ctx: e, shape: i, converter: r, config: s = W.defaultConfig, selected: n = !1, hovered: o = !1 }) {
-    const [a, l] = i.vertices, d = J(a, l, r);
-    e.save(), Pt(e, s.fillColor, s.fillOpacity) && e.fillRect(d.left, d.top, d.width, d.height), Q(e, s), e.strokeRect(d.left, d.top, d.width, d.height), E(e), W.drawText(e, d, i.text, s), (n || o) && V(e, W.getHandles(i, r), {
+  static draw({ ctx: e, shape: i, converter: s, config: r = W.defaultConfig, selected: n = !1, hovered: o = !1 }) {
+    const [a, l] = i.vertices, d = J(a, l, s);
+    e.save(), Pt(e, r.fillColor, r.fillOpacity) && e.fillRect(d.left, d.top, d.width, d.height), Q(e, r), e.strokeRect(d.left, d.top, d.width, d.height), E(e), W.drawText(e, d, i.text, r), (n || o) && z(e, W.getHandles(i, s), {
       fillColor: f.handleColor,
       borderColor: f.handleBorderColor,
       borderThickness: f.handleBorderThickness
     }), e.restore();
   }
-  static drawDraft({ ctx: e, vertices: i, converter: r, config: s = W.defaultConfig }) {
+  static drawDraft({ ctx: e, vertices: i, converter: s, config: r = W.defaultConfig }) {
     W.draw({
       ctx: e,
       shape: {
@@ -1415,13 +1415,13 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         type: "rectangle",
         vertices: i
       },
-      converter: r,
-      config: s,
+      converter: s,
+      config: r,
       selected: !0
     });
   }
   static getHandles(e, i) {
-    const [r, s] = e.vertices, n = C(r, i), o = C(s, i), a = n.x <= o.x, l = n.y <= o.y, d = a === l ? "nwse-resize" : "nesw-resize", u = a === l ? "nwse-resize" : "nesw-resize";
+    const [s, r] = e.vertices, n = C(s, i), o = C(r, i), a = n.x <= o.x, l = n.y <= o.y, d = a === l ? "nwse-resize" : "nesw-resize", u = a === l ? "nwse-resize" : "nesw-resize";
     return [x({
       shapeId: e.id,
       type: "start",
@@ -1436,9 +1436,9 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       cursor: u
     })];
   }
-  static hitTest({ point: e, shape: i, converter: r, tolerance: s = 8 }) {
+  static hitTest({ point: e, shape: i, converter: s, tolerance: r = 8 }) {
     const [n, o] = i.vertices;
-    return $t(e, J(n, o, r), s);
+    return $t(e, J(n, o, s), r);
   }
   static move(e, i) {
     return {
@@ -1452,18 +1452,18 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       }]
     };
   }
-  static resize(e, i, r) {
+  static resize(e, i, s) {
     return i === "start" ? {
       ...e,
-      vertices: [r, e.vertices[1]]
+      vertices: [s, e.vertices[1]]
     } : i === "end" ? {
       ...e,
-      vertices: [e.vertices[0], r]
+      vertices: [e.vertices[0], s]
     } : e;
   }
-  static drawText(e, i, r, s) {
-    const n = r?.trim();
-    n && (e.save(), e.beginPath(), e.rect(i.left, i.top, i.width, i.height), e.clip(), e.font = `${s.textFontSize}px ${s.textFontFamily}`, e.globalAlpha = s.textOpacity, e.fillStyle = s.textColor, e.textAlign = "center", e.textBaseline = "middle", e.fillText(n, i.left + i.width / 2, i.top + i.height / 2), e.restore());
+  static drawText(e, i, s, r) {
+    const n = s?.trim();
+    n && (e.save(), e.beginPath(), e.rect(i.left, i.top, i.width, i.height), e.clip(), e.font = `${r.textFontSize}px ${r.textFontFamily}`, e.globalAlpha = r.textOpacity, e.fillStyle = r.textColor, e.textAlign = "center", e.textBaseline = "middle", e.fillText(n, i.left + i.width / 2, i.top + i.height / 2), e.restore());
   }
 }, bt = [
   "USDJPY",
@@ -1477,8 +1477,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   "USOIL",
   "UKOIL",
   "XAGUSD"
-], Tt = (t) => bt.some((e) => t.includes(e.slice(3))) ? 0.01 : xt.includes(t) ? 1 : St.includes(t) ? 0.01 : 1e-4, qt = (t, e) => bt.includes(t) ? e * 6.33806 : xt.includes(t) ? e * 1 : (St.includes(t), e * 10), ut = (t, e, i, r, s) => {
-  const n = s.split(".")[0], o = Tt(n), a = qt(n, r);
+], Tt = (t) => bt.some((e) => t.includes(e.slice(3))) ? 0.01 : xt.includes(t) ? 1 : St.includes(t) ? 0.01 : 1e-4, qt = (t, e) => bt.includes(t) ? e * 6.33806 : xt.includes(t) ? e * 1 : (St.includes(t), e * 10), ut = (t, e, i, s, r) => {
+  const n = r.split(".")[0], o = Tt(n), a = qt(n, s);
   return (t === "buy" ? i - e : e - i) / o * a;
 }, H = class w {
   static defaultLongConfig = {
@@ -1499,53 +1499,53 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     midLineStyle: "dashed"
   };
   static defaultShortConfig = { ...w.defaultLongConfig };
-  static draw({ ctx: e, activeSymbol: i, shape: r, converter: s, config: n = r.type === "longPosition" ? w.defaultLongConfig : w.defaultShortConfig, selected: o = !1, hovered: a = !1 }) {
-    const l = w.getGeometry(r, s);
+  static draw({ ctx: e, activeSymbol: i, shape: s, converter: r, config: n = s.type === "longPosition" ? w.defaultLongConfig : w.defaultShortConfig, selected: o = !1, hovered: a = !1 }) {
+    const l = w.getGeometry(s, r);
     e.save(), e.fillStyle = P(n.profitFillColor, n.profitFillOpacity), e.fillRect(l.profitBox.left, l.profitBox.top, l.profitBox.width, l.profitBox.height), e.fillStyle = P(n.lossFillColor, n.lossFillOpacity), e.fillRect(l.lossBox.left, l.lossBox.top, l.lossBox.width, l.lossBox.height);
     const d = n.borderWidth;
-    e.strokeStyle = P(n.borderColor, n.borderOpacity), e.lineWidth = d, e.setLineDash(z(n.borderStyle, d)), e.strokeRect(l.box.left, l.box.top, l.box.width, l.box.height), e.beginPath(), e.strokeStyle = P(n.midLineColor, n.midLineOpacity), e.lineWidth = n.midLineWidth, e.setLineDash(z(n.midLineStyle, n.midLineWidth)), e.moveTo(l.box.left, l.entryY), e.lineTo(l.box.right, l.entryY), e.stroke(), E(e), w.drawLabels({
+    e.strokeStyle = P(n.borderColor, n.borderOpacity), e.lineWidth = d, e.setLineDash(V(n.borderStyle, d)), e.strokeRect(l.box.left, l.box.top, l.box.width, l.box.height), e.beginPath(), e.strokeStyle = P(n.midLineColor, n.midLineOpacity), e.lineWidth = n.midLineWidth, e.setLineDash(V(n.midLineStyle, n.midLineWidth)), e.moveTo(l.box.left, l.entryY), e.lineTo(l.box.right, l.entryY), e.stroke(), E(e), w.drawLabels({
       ctx: e,
       activeSymbol: i,
-      shape: r,
+      shape: s,
       geometry: l,
       config: n
-    }), (o || a) && V(e, w.getHandles(r, s), {
+    }), (o || a) && z(e, w.getHandles(s, r), {
       fillColor: f.handleColor,
       borderColor: f.handleBorderColor,
       borderThickness: f.handleBorderThickness
     }), e.restore();
   }
-  static createFromVertex({ id: e, type: i, entry: r, converter: s, config: n = i === "longPosition" ? w.defaultLongConfig : w.defaultShortConfig }) {
-    const o = s.getTimeForX(s.getXForTime(r.time) + s.getCandleWidth() * n.defaultWidthCandles), a = n.defaultStopLossPercent;
+  static createFromVertex({ id: e, type: i, entry: s, converter: r, config: n = i === "longPosition" ? w.defaultLongConfig : w.defaultShortConfig }) {
+    const o = r.getTimeForX(r.getXForTime(s.time) + r.getCandleWidth() * n.defaultWidthCandles), a = n.defaultStopLossPercent;
     return {
       id: e,
       type: i,
-      entry: r,
+      entry: s,
       endTime: o,
       stopLossPercent: a,
       takeProfitPercent: a * n.defaultRiskRewardRatio
     };
   }
   static getGeometry(e, i) {
-    const r = C(e.entry, i), s = i.getXForTime(e.endTime), n = Math.min(r.x, s), o = Math.max(r.x, s), a = e.type === "longPosition", l = a ? e.takeProfitPercent : e.stopLossPercent, d = a ? e.stopLossPercent : e.takeProfitPercent, u = e.entry.price * (1 + l / 100), g = e.entry.price * (1 - d / 100), m = i.getYForPrice(u), b = i.getYForPrice(g), v = Math.min(m, b, r.y), S = Math.max(m, b, r.y), T = {
+    const s = C(e.entry, i), r = i.getXForTime(e.endTime), n = Math.min(s.x, r), o = Math.max(s.x, r), a = e.type === "longPosition", l = a ? e.takeProfitPercent : e.stopLossPercent, d = a ? e.stopLossPercent : e.takeProfitPercent, u = e.entry.price * (1 + l / 100), g = e.entry.price * (1 - d / 100), m = i.getYForPrice(u), b = i.getYForPrice(g), v = Math.min(m, b, s.y), S = Math.max(m, b, s.y), T = {
       left: n,
       top: v,
       right: o,
-      bottom: r.y,
+      bottom: s.y,
       width: o - n,
-      height: Math.abs(r.y - v)
+      height: Math.abs(s.y - v)
     }, k = {
       left: n,
-      top: r.y,
+      top: s.y,
       right: o,
       bottom: S,
       width: o - n,
-      height: Math.abs(S - r.y)
+      height: Math.abs(S - s.y)
     };
     return {
-      entryPoint: r,
-      endX: s,
-      entryY: r.y,
+      entryPoint: s,
+      endX: r,
+      entryY: s.y,
       upperPrice: u,
       lowerPrice: g,
       box: {
@@ -1561,14 +1561,14 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     };
   }
   static getHandles(e, i) {
-    const r = w.getGeometry(e, i);
+    const s = w.getGeometry(e, i);
     return [
       x({
         shapeId: e.id,
         type: "upperHeight",
         point: {
-          x: r.box.left,
-          y: r.box.top
+          x: s.box.left,
+          y: s.box.top
         },
         radius: f.handleRadius,
         cursor: "ns-resize"
@@ -1577,8 +1577,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         shapeId: e.id,
         type: "lowerHeight",
         point: {
-          x: r.box.left,
-          y: r.box.bottom
+          x: s.box.left,
+          y: s.box.bottom
         },
         radius: f.handleRadius,
         cursor: "ns-resize"
@@ -1587,8 +1587,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         shapeId: e.id,
         type: "start",
         point: {
-          x: r.entryPoint.x,
-          y: r.entryY
+          x: s.entryPoint.x,
+          y: s.entryY
         },
         radius: f.handleRadius,
         cursor: "ns-resize"
@@ -1597,16 +1597,16 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         shapeId: e.id,
         type: "end",
         point: {
-          x: r.endX,
-          y: r.entryY
+          x: s.endX,
+          y: s.entryY
         },
         radius: f.handleRadius,
         cursor: "ew-resize"
       })
     ];
   }
-  static hitTest({ point: e, shape: i, converter: r }) {
-    return w.getHandles(i, r).some((s) => j(e, s)) ? !0 : wt(e, w.getGeometry(i, r).box);
+  static hitTest({ point: e, shape: i, converter: s }) {
+    return w.getHandles(i, s).some((r) => j(e, r)) ? !0 : wt(e, w.getGeometry(i, s).box);
   }
   static move(e, i) {
     return {
@@ -1618,48 +1618,48 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       endTime: e.endTime + i.time
     };
   }
-  static resize({ shape: e, handleType: i, vertex: r, converter: s }) {
+  static resize({ shape: e, handleType: i, vertex: s, converter: r }) {
     return i === "start" ? {
       ...e,
       entry: {
         time: e.entry.time,
-        price: r.price
+        price: s.price
       }
     } : i === "end" ? {
       ...e,
-      endTime: r.time
-    } : i === "upperHeight" ? w.resizeUpperHeight(e, r.price) : i === "lowerHeight" ? w.resizeLowerHeight(e, r.price) : {
+      endTime: s.time
+    } : i === "upperHeight" ? w.resizeUpperHeight(e, s.price) : i === "lowerHeight" ? w.resizeLowerHeight(e, s.price) : {
       ...e,
-      endTime: s.getTimeForX(s.getXForTime(e.endTime))
+      endTime: r.getTimeForX(r.getXForTime(e.endTime))
     };
   }
   static resizeUpperHeight(e, i) {
-    const r = Math.max(0, (i - e.entry.price) / e.entry.price * 100);
+    const s = Math.max(0, (i - e.entry.price) / e.entry.price * 100);
     return e.type === "longPosition" ? {
       ...e,
-      takeProfitPercent: r
+      takeProfitPercent: s
     } : {
       ...e,
-      stopLossPercent: r
+      stopLossPercent: s
     };
   }
   static resizeLowerHeight(e, i) {
-    const r = Math.max(0, (e.entry.price - i) / e.entry.price * 100);
+    const s = Math.max(0, (e.entry.price - i) / e.entry.price * 100);
     return e.type === "longPosition" ? {
       ...e,
-      stopLossPercent: r
+      stopLossPercent: s
     } : {
       ...e,
-      takeProfitPercent: r
+      takeProfitPercent: s
     };
   }
-  static drawLabels({ ctx: e, activeSymbol: i, shape: r, geometry: s, config: n }) {
+  static drawLabels({ ctx: e, activeSymbol: i, shape: s, geometry: r, config: n }) {
     e.save(), e.font = "11px sans-serif", e.textBaseline = "middle";
-    const o = r.type, a = Tt(i), l = r.entry.price * (r.takeProfitPercent / 100) / a, d = r.entry.price * (r.stopLossPercent / 100) / a, u = s.box.left + 6, g = l / d;
+    const o = s.type, a = Tt(i), l = s.entry.price * (s.takeProfitPercent / 100) / a, d = s.entry.price * (s.stopLossPercent / 100) / a, u = r.box.left + 6, g = l / d;
     e.fillStyle = P(n.profitFillColor, 0.95);
-    const m = o === "longPosition" ? s.profitBox.top + s.profitBox.height / 10 : s.profitBox.bottom - s.profitBox.height / 10;
+    const m = o === "longPosition" ? r.profitBox.top + r.profitBox.height / 10 : r.profitBox.bottom - r.profitBox.height / 10;
     e.fillText(`${l.toFixed(2)} (${g.toFixed(2)})`, u, m), e.fillStyle = P(n.lossFillColor, 0.95);
-    const b = o === "shortPosition" ? s.lossBox.top + s.lossBox.height / 10 : s.lossBox.bottom - s.lossBox.height / 10;
+    const b = o === "shortPosition" ? r.lossBox.top + r.lossBox.height / 10 : r.lossBox.bottom - r.lossBox.height / 10;
     e.fillText(d.toFixed(1), u, b);
   }
 }, Qt = class {
@@ -1731,8 +1731,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     if (this.selectedShapeId && !this.draft && !this.activeTool && (t.key === "ArrowLeft" || t.key === "ArrowRight" || t.key === "ArrowUp" || t.key === "ArrowDown")) {
       const e = this.shapes.find((i) => i.id === this.selectedShapeId);
       if (e) {
-        const i = this.getArrowKeyDelta(t.key), r = this.moveShape(e, i);
-        return this.emitShapeModified(r), !0;
+        const i = this.getArrowKeyDelta(t.key), s = this.moveShape(e, i);
+        return this.emitShapeModified(s), !0;
       }
     }
     return !1;
@@ -1764,42 +1764,42 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         vertex: i
       }), !0;
     if (!ct(t)) return !1;
-    const r = this.findHandleAtPoint(e);
-    if (r) {
-      const n = this.shapes.find((o) => o.id === r.shapeId);
+    const s = this.findHandleAtPoint(e);
+    if (s) {
+      const n = this.shapes.find((o) => o.id === s.shapeId);
       return n ? (this.setSelectedShapeId(n.id), this.checkTouchDoubleTap(n, t), this.dragState = {
         edit: {
           mode: "resize",
           shape: n,
-          handleType: r.type,
-          handleIndex: r.index,
+          handleType: s.type,
+          handleIndex: s.index,
           startPoint: e,
           startVertex: i
         },
         lastModifiedShape: n
-      }, this.canvas.style.cursor = r.cursor ?? "grab", !0) : !1;
+      }, this.canvas.style.cursor = s.cursor ?? "grab", !0) : !1;
     }
-    const s = this.findShapeAtPoint(e);
-    if (s) {
-      const n = this.findHandleAtPointForShape(s, e);
-      return n ? (this.setSelectedShapeId(s.id), this.checkTouchDoubleTap(s, t), this.dragState = {
+    const r = this.findShapeAtPoint(e);
+    if (r) {
+      const n = this.findHandleAtPointForShape(r, e);
+      return n ? (this.setSelectedShapeId(r.id), this.checkTouchDoubleTap(r, t), this.dragState = {
         edit: {
           mode: "resize",
-          shape: s,
+          shape: r,
           handleType: n.type,
           handleIndex: n.index,
           startPoint: e,
           startVertex: i
         },
-        lastModifiedShape: s
-      }, this.canvas.style.cursor = n.cursor ?? "grab", !0) : (this.setSelectedShapeId(s.id), this.checkTouchDoubleTap(s, t), this.hoveredShapeId = s.id, this.dragState = {
+        lastModifiedShape: r
+      }, this.canvas.style.cursor = n.cursor ?? "grab", !0) : (this.setSelectedShapeId(r.id), this.checkTouchDoubleTap(r, t), this.hoveredShapeId = r.id, this.dragState = {
         edit: {
           mode: "move",
-          shape: s,
+          shape: r,
           startPoint: e,
           startVertex: i
         },
-        lastModifiedShape: s
+        lastModifiedShape: r
       }, this.canvas.style.cursor = "move", !0);
     }
     return this.setSelectedShapeId(null), this.hoveredShapeId = null, this.canvas.style.cursor = "crosshair", !1;
@@ -1814,11 +1814,11 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }
     if (this.activeTool)
       return this.canvas.style.cursor = "crosshair", !0;
-    const r = this.findHandleAtPoint(e);
-    if (r)
-      return this.canvas.style.cursor = "pointer", this.hoveredShapeId = r.shapeId, !0;
-    const s = this.findShapeAtPoint(e);
-    return s ? (this.hoveredShapeId = s.id, this.canvas.style.cursor = "pointer", !0) : this.hoveredShapeId !== null ? (this.hoveredShapeId = null, this.canvas.style.cursor = "crosshair", !0) : !1;
+    const s = this.findHandleAtPoint(e);
+    if (s)
+      return this.canvas.style.cursor = "pointer", this.hoveredShapeId = s.shapeId, !0;
+    const r = this.findShapeAtPoint(e);
+    return r ? (this.hoveredShapeId = r.id, this.canvas.style.cursor = "pointer", !0) : this.hoveredShapeId !== null ? (this.hoveredShapeId = null, this.canvas.style.cursor = "crosshair", !0) : !1;
   }
   handlePointerUp() {
     if (!this.dragState) return !1;
@@ -1899,14 +1899,14 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }), this.draft = null, this.setActiveToolAndEmit(null));
   }
   addPositionShape(t, e) {
-    const i = this.getConverter(), r = t === "longPosition" ? this.config.longPosition : this.config.shortPosition, s = H.createFromVertex({
+    const i = this.getConverter(), s = t === "longPosition" ? this.config.longPosition : this.config.shortPosition, r = H.createFromVertex({
       id: U(),
       type: t,
       entry: e,
       converter: i,
-      config: r
+      config: s
     });
-    this.addShape(s), this.setActiveToolAndEmit(null);
+    this.addShape(r), this.setActiveToolAndEmit(null);
   }
   updateDraftPreview(t) {
     if (this.draft) {
@@ -1952,15 +1952,15 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   moveShape(t, e) {
     return t.type === "trendline" ? M.move(t, e) : t.type === "rectangle" ? D.move(t, e) : t.type === "path" ? R.move(t, e) : t.type === "fibRetracement" ? L.move(t, e) : H.move(t, e);
   }
-  resizeShape(t, e, i, r) {
-    return t.type === "trendline" ? M.resize(t, e, i) : t.type === "rectangle" ? D.resize(t, e, i) : t.type === "fibRetracement" ? L.resize(t, e, i) : t.type === "path" ? R.resize(t, r ?? -1, i) : H.resize({
+  resizeShape(t, e, i, s) {
+    return t.type === "trendline" ? M.resize(t, e, i) : t.type === "rectangle" ? D.resize(t, e, i) : t.type === "fibRetracement" ? L.resize(t, e, i) : t.type === "path" ? R.resize(t, s ?? -1, i) : H.resize({
       shape: t,
       handleType: e,
       vertex: i,
       converter: this.getConverter()
     });
   }
-  drawShape({ shape: t, converter: e, selected: i, hovered: r }) {
+  drawShape({ shape: t, converter: e, selected: i, hovered: s }) {
     if (t.type === "trendline") {
       const n = this.getTrendlineConfig(t);
       M.draw({
@@ -1969,7 +1969,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         converter: e,
         config: n,
         selected: i,
-        hovered: r
+        hovered: s
       });
       return;
     }
@@ -1981,7 +1981,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         converter: e,
         config: n,
         selected: i,
-        hovered: r
+        hovered: s
       });
       return;
     }
@@ -1993,7 +1993,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         converter: e,
         config: n,
         selected: i,
-        hovered: r
+        hovered: s
       });
       return;
     }
@@ -2005,19 +2005,19 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         converter: e,
         config: n,
         selected: i,
-        hovered: r
+        hovered: s
       });
       return;
     }
-    const s = this.getPositionConfig(t);
+    const r = this.getPositionConfig(t);
     H.draw({
       ctx: this.ctx,
       activeSymbol: this.activeSymbol,
       shape: t,
       converter: e,
-      config: s,
+      config: r,
       selected: i,
-      hovered: r
+      hovered: s
     });
   }
   drawDraft(t) {
@@ -2063,8 +2063,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       this.handleHitboxes = [];
       return;
     }
-    const t = this.getConverter(), e = [], i = this.shapes.find((s) => s.id === this.selectedShapeId), r = this.hoveredShapeId && this.hoveredShapeId !== this.selectedShapeId ? this.shapes.find((s) => s.id === this.hoveredShapeId) ?? null : null;
-    i && e.push(i), r && e.push(r), this.handleHitboxes = e.flatMap((s) => this.getShapeHandles(s, t));
+    const t = this.getConverter(), e = [], i = this.shapes.find((r) => r.id === this.selectedShapeId), s = this.hoveredShapeId && this.hoveredShapeId !== this.selectedShapeId ? this.shapes.find((r) => r.id === this.hoveredShapeId) ?? null : null;
+    i && e.push(i), s && e.push(s), this.handleHitboxes = e.flatMap((r) => this.getShapeHandles(r, t));
   }
   getShapeHandles(t, e) {
     return t.type === "trendline" ? M.getHandles(t, e) : t.type === "rectangle" ? D.getHandles(t, e) : t.type === "path" ? R.getHandles(t, e) : t.type === "fibRetracement" ? L.getHandles(t, e) : H.getHandles(t, e);
@@ -2077,15 +2077,15 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     return null;
   }
   findHandleAtPointForShape(t, e) {
-    const i = this.getConverter(), r = this.getShapeHandles(t, i);
-    for (const s of r) if (j(e, s)) return s;
+    const i = this.getConverter(), s = this.getShapeHandles(t, i);
+    for (const r of s) if (j(e, r)) return r;
     return null;
   }
   findShapeAtPoint(t) {
     const e = this.getConverter();
     for (let i = this.shapes.length - 1; i >= 0; i -= 1) {
-      const r = this.shapes[i];
-      if (this.isShapeHit(r, t, e)) return r;
+      const s = this.shapes[i];
+      if (this.isShapeHit(s, t, e)) return s;
     }
     return null;
   }
@@ -2195,8 +2195,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       getNearestCandleTimeForX: (e) => {
         const i = this.getTimeForX(e);
         if (this.candles.length > 0 && i > this.candles[this.candles.length - 1].time) return i;
-        const r = Z(this.candles, i);
-        return r >= 0 ? this.candles[r].time : i;
+        const s = Z(this.candles, i);
+        return s >= 0 ? this.candles[s].time : i;
       },
       getCandleWidth: () => t ? this.getCandleStepWidth(t) : 12
     };
@@ -2312,51 +2312,51 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     for (const t of this.trades) this.drawTrade({ trade: t });
     this.drawTemporaryProtectionDrag();
   }
-  createHitBox = ({ price: t, trade: e, type: i, x: r, y: s, width: n, height: o, viewport: a }) => {
-    const { showCloseSection: l, widthClose: d } = this.getHandleStyleConfig(i).handle, u = l ? d : 0, g = n - u, m = r + n - u;
+  createHitBox = ({ price: t, trade: e, type: i, x: s, y: r, width: n, height: o, viewport: a }) => {
+    const { showCloseSection: l, widthClose: d } = this.getHandleStyleConfig(i).handle, u = l ? d : 0, g = n - u, m = s + n - u;
     return {
       kind: "existingHandle",
       price: p(t),
       trade: e,
       type: i,
-      x: r,
-      y: s,
+      x: s,
+      y: r,
       width: n,
       height: o,
       viewport: a,
       labelArea: {
-        x: r,
-        y: s,
+        x: s,
+        y: r,
         width: g,
         height: o
       },
       closeButtonArea: {
         x: m,
-        y: s,
+        y: r,
         width: u,
         height: o
       }
     };
   };
-  createMissingProtectionHitBox = ({ price: t, trade: e, type: i, x: r, y: s, width: n, height: o, viewport: a }) => ({
+  createMissingProtectionHitBox = ({ price: t, trade: e, type: i, x: s, y: r, width: n, height: o, viewport: a }) => ({
     kind: "missingProtectionHandle",
     price: p(t),
     trade: e,
     type: i,
-    x: r,
-    y: s,
+    x: s,
+    y: r,
     width: n,
     height: o,
     viewport: a,
     labelArea: {
-      x: r,
-      y: s,
+      x: s,
+      y: r,
       width: n,
       height: o
     },
     closeButtonArea: {
-      x: r + n,
-      y: s,
+      x: s + n,
+      y: r,
       width: 0,
       height: o
     }
@@ -2384,21 +2384,21 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       type: "takeProfit",
       trade: t
     });
-    for (const r of i)
-      this.addMissingProtectionHitbox(r), this.drawMissingProtectionHandleRect({
-        x: r.handleX,
-        y: r.handleY,
-        width: r.handleWidth,
-        config: r.config
-      }), this.drawMissingProtectionHandleLabel(r);
+    for (const s of i)
+      this.addMissingProtectionHitbox(s), this.drawMissingProtectionHandleRect({
+        x: s.handleX,
+        y: s.handleY,
+        width: s.handleWidth,
+        config: s.config
+      }), this.drawMissingProtectionHandleLabel(s);
   }
   drawTradeHandle({ price: t, type: e, trade: i }) {
-    const r = this.getTradeHandleRenderState({
+    const s = this.getTradeHandleRenderState({
       price: t,
       type: e,
       trade: i
     });
-    return r ? (this.drawTradeHandleFromRenderState({ renderState: r }), r) : null;
+    return s ? (this.drawTradeHandleFromRenderState({ renderState: s }), s) : null;
   }
   drawTradeHandleFromRenderState({ renderState: t, blockedRanges: e = [] }) {
     this.addHandleHitbox(t), this.drawHandleHorizontalLines({
@@ -2420,26 +2420,26 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       y: t.y
     });
   }
-  drawHandleLine({ x1: t, x2: e, y: i, config: r }) {
+  drawHandleLine({ x1: t, x2: e, y: i, config: s }) {
     if (e <= t) return;
-    const s = this.#e;
-    s.save(), s.globalAlpha = r.opacity, s.strokeStyle = r.color, s.lineWidth = r.width, s.setLineDash(this.getHandleLineDash(r)), s.beginPath(), s.moveTo(t, i), s.lineTo(e, i), s.stroke(), s.restore();
+    const r = this.#e;
+    r.save(), r.globalAlpha = s.opacity, r.strokeStyle = s.color, r.lineWidth = s.width, r.setLineDash(this.getHandleLineDash(s)), r.beginPath(), r.moveTo(t, i), r.lineTo(e, i), r.stroke(), r.restore();
   }
-  drawConnectorLine({ x1: t, y1: e, x2: i, y2: r, config: s }) {
+  drawConnectorLine({ x1: t, y1: e, x2: i, y2: s, config: r }) {
     const n = this.#e;
-    n.save(), n.globalAlpha = s.opacity, n.strokeStyle = s.color, n.lineWidth = s.width, n.setLineDash(this.getHandleLineDash(s)), n.beginPath(), n.moveTo(t, e), n.lineTo(i, r), n.stroke(), n.restore();
+    n.save(), n.globalAlpha = r.opacity, n.strokeStyle = r.color, n.lineWidth = r.width, n.setLineDash(this.getHandleLineDash(r)), n.beginPath(), n.moveTo(t, e), n.lineTo(i, s), n.stroke(), n.restore();
   }
-  drawHandleRect({ x: t, y: e, width: i, config: r }) {
-    const s = this.#e;
+  drawHandleRect({ x: t, y: e, width: i, config: s }) {
+    const r = this.#e;
     this.clearRectArea({
       x: t,
       y: e,
       width: i,
-      height: r.height,
-      padding: Math.max(1, r.borderWidth)
-    }), s.save(), s.globalAlpha = r.backgroundOpacity, s.fillStyle = r.backgroundColor, s.fillRect(t, e, i, r.height), s.globalAlpha = r.borderOpacity, s.strokeStyle = r.borderColor, s.lineWidth = r.borderWidth, s.strokeRect(t, e, i, r.height), s.restore();
+      height: s.height,
+      padding: Math.max(1, s.borderWidth)
+    }), r.save(), r.globalAlpha = s.backgroundOpacity, r.fillStyle = s.backgroundColor, r.fillRect(t, e, i, s.height), r.globalAlpha = s.borderOpacity, r.strokeStyle = s.borderColor, r.lineWidth = s.borderWidth, r.strokeRect(t, e, i, s.height), r.restore();
   }
-  drawHandleSections({ handleType: t, handleX: e, handleY: i, handleWidth: r, handleHeight: s, handleConfig: n, trade: o, y: a }) {
+  drawHandleSections({ handleType: t, handleX: e, handleY: i, handleWidth: s, handleHeight: r, handleConfig: n, trade: o, y: a }) {
     const l = this.#e, d = c.tradeHandles, u = this.getHandleSections({
       handleType: t,
       handleConfig: n,
@@ -2452,10 +2452,10 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         section: m,
         currentX: g,
         y: a
-      }), g += m.width, g < e + r && this.drawHandleSectionDivider({
+      }), g += m.width, g < e + s && this.drawHandleSectionDivider({
         x: g,
         y1: i + 4,
-        y2: i + s - 4,
+        y2: i + r - 4,
         config: n
       }));
     l.restore();
@@ -2464,8 +2464,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     if (t === "startPrice") return this.formatPnlLabel(e.pnl);
     const i = t === "stopLoss" ? e.sl : e.tp;
     if (!i) return "N/A";
-    const r = ut(e.type, e.openPrice, i, e.volume, e.symbol);
-    return this.formatPnlLabel(r);
+    const s = ut(e.type, e.openPrice, i, e.volume, e.symbol);
+    return this.formatPnlLabel(s);
   }
   getHandleWidth(t) {
     let e = 0;
@@ -2494,8 +2494,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }
   }
   getProtectionDirection({ trade: t, type: e }) {
-    const i = this.isBuyTrade(t), r = e === "takeProfit" ? 1 : -1;
-    return i ? r : -r;
+    const i = this.isBuyTrade(t), s = e === "takeProfit" ? 1 : -1;
+    return i ? s : -s;
   }
   constrainProtectionPrice({ price: t, trade: e, type: i }) {
     return this.getProtectionDirection({
@@ -2520,18 +2520,18 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     if (!this.viewport) return null;
     const e = this.getTimeX(t.openTime), i = this.getTimeX(t.closeTime);
     if (e === null || i === null) return null;
-    const r = this.getPriceY(t.openPrice, this.viewport), s = this.getPriceY(t.closePrice, this.viewport), n = c.closedTradeIndicators.arrow, o = n.width, a = n.height;
+    const s = this.getPriceY(t.openPrice, this.viewport), r = this.getPriceY(t.closePrice, this.viewport), n = c.closedTradeIndicators.arrow, o = n.width, a = n.height;
     return {
       trade: t,
       start: {
         x: e,
-        y: r,
+        y: s,
         time: t.openTime,
         price: t.openPrice
       },
       close: {
         x: i,
-        y: s,
+        y: r,
         time: t.closeTime,
         price: t.closePrice
       },
@@ -2549,7 +2549,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       config: i
     });
   }
-  drawClosedTradeArrows({ trade: t, start: e, close: i, arrowWidth: r, arrowHeight: s }) {
+  drawClosedTradeArrows({ trade: t, start: e, close: i, arrowWidth: s, arrowHeight: r }) {
     const n = c.closedTradeIndicators.arrow;
     if (!n.visible) return;
     const o = t.type === "buy" ? "sell" : "buy";
@@ -2557,39 +2557,39 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       x: e.x,
       y: e.y,
       type: t.type,
-      width: r,
-      height: s,
+      width: s,
+      height: r,
       config: n
     }), this.drawClosedTradeArrow({
       x: i.x,
       y: i.y,
       type: o,
-      width: r,
-      height: s,
+      width: s,
+      height: r,
       config: n
     });
   }
-  drawClosedTradeArrow({ x: t, y: e, type: i, width: r, height: s, config: n }) {
-    if (r <= 0 || s <= 0) return;
-    const o = this.#e, a = i === "buy", l = a ? n.buyColor : n.sellColor, d = a ? n.buyBorderColor : n.sellBorderColor, u = a ? 1 : -1, g = t, m = e, b = t, v = e + u * s, S = s / 2, T = S / Math.SQRT2, k = S / Math.SQRT2, Ht = g - T, kt = g + T, tt = m + u * k, et = Math.max(1, n.shaftWidthRatio), Mt = et + n.borderWidth * 2, it = () => {
+  drawClosedTradeArrow({ x: t, y: e, type: i, width: s, height: r, config: n }) {
+    if (s <= 0 || r <= 0) return;
+    const o = this.#e, a = i === "buy", l = a ? n.buyColor : n.sellColor, d = a ? n.buyBorderColor : n.sellBorderColor, u = a ? 1 : -1, g = t, m = e, b = t, v = e + u * r, S = r / 2, T = S / Math.SQRT2, k = S / Math.SQRT2, Ht = g - T, kt = g + T, tt = m + u * k, et = Math.max(1, n.shaftWidthRatio), Mt = et + n.borderWidth * 2, it = () => {
       o.beginPath(), o.moveTo(b, v), o.lineTo(g, m), o.moveTo(g, m), o.lineTo(Ht, tt), o.moveTo(g, m), o.lineTo(kt, tt), o.stroke();
     };
     o.save(), o.globalAlpha = n.opacity, o.lineCap = "round", o.lineJoin = "round", o.strokeStyle = d, o.lineWidth = Mt, it(), o.strokeStyle = l, o.lineWidth = et, it(), o.restore();
   }
   getTimeX(t) {
     if (!this.viewport || this.candles.length === 0 || !Number.isFinite(t)) return null;
-    const e = this.normalizeTimestamp(t), i = this.candles[0], r = this.candles[this.candles.length - 1];
-    if (!i || !r) return null;
+    const e = this.normalizeTimestamp(t), i = this.candles[0], s = this.candles[this.candles.length - 1];
+    if (!i || !s) return null;
     if (this.candles.length === 1) return this.getCandleCenterX(0);
     if (e <= i.time) {
       const d = this.getCandleTimeInterval(0), u = (i.time - e) / d;
       return this.getCandleCenterX(0) - u * this.viewport.candleSpacing;
     }
-    if (e >= r.time) {
-      const d = this.candles.length - 1, u = this.getCandleTimeInterval(d), g = (e - r.time) / u;
+    if (e >= s.time) {
+      const d = this.candles.length - 1, u = this.getCandleTimeInterval(d), g = (e - s.time) / u;
       return this.getCandleCenterX(d) + g * this.viewport.candleSpacing;
     }
-    const s = this.getFirstCandleIndexAtOrAfterTime(e), n = Math.max(0, s - 1), o = this.candles[n], a = this.candles[s];
+    const r = this.getFirstCandleIndexAtOrAfterTime(e), n = Math.max(0, r - 1), o = this.candles[n], a = this.candles[r];
     if (!o || !a || a.time === o.time) return this.getCandleCenterX(n);
     const l = (e - o.time) / (a.time - o.time);
     return this.getCandleCenterX(n) + l * this.viewport.candleSpacing;
@@ -2600,8 +2600,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   getFirstCandleIndexAtOrAfterTime(t) {
     let e = 0, i = this.candles.length - 1;
     for (; e < i; ) {
-      const r = Math.floor((e + i) / 2);
-      this.candles[r].time < t ? e = r + 1 : i = r;
+      const s = Math.floor((e + i) / 2);
+      this.candles[s].time < t ? e = s + 1 : i = s;
     }
     return e;
   }
@@ -2609,18 +2609,18 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     return this.viewport ? t * this.viewport.candleSpacing + this.viewport.offsetX + this.viewport.candleWidth / 2 : 0;
   }
   getCandleTimeInterval(t) {
-    const e = this.candles[t], i = this.candles[t - 1], r = this.candles[t + 1];
-    return e && r && r.time > e.time ? r.time - e.time : e && i && e.time > i.time ? e.time - i.time : 60 * 1e3;
+    const e = this.candles[t], i = this.candles[t - 1], s = this.candles[t + 1];
+    return e && s && s.time > e.time ? s.time - e.time : e && i && e.time > i.time ? e.time - i.time : 60 * 1e3;
   }
   getTradeHandleRenderState({ price: t, type: e, trade: i }) {
     if (!this.viewport) return null;
-    const r = this.viewport, s = this.getPriceY(t, r), n = this.getHandleStyleConfig(e), o = n.handle, a = n.handleLine, l = this.getHandleWidth(o), d = o.height;
+    const s = this.viewport, r = this.getPriceY(t, s), n = this.getHandleStyleConfig(e), o = n.handle, a = n.handleLine, l = this.getHandleWidth(o), d = o.height;
     return {
       price: t,
       type: e,
       trade: i,
-      viewport: r,
-      y: s,
+      viewport: s,
+      y: r,
       handleStyleConfig: n,
       handleConfig: o,
       lineConfig: a,
@@ -2628,7 +2628,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         handleWidth: l,
         config: o
       }),
-      handleY: s - d / 2,
+      handleY: r - d / 2,
       handleWidth: l,
       handleHeight: d
     };
@@ -2665,20 +2665,20 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       viewport: t.viewport
     }));
   }
-  drawHandleHorizontalLines({ handleX: t, handleWidth: e, y: i, lineConfig: r, blockedRanges: s = [] }) {
+  drawHandleHorizontalLines({ handleX: t, handleWidth: e, y: i, lineConfig: s, blockedRanges: r = [] }) {
     this.drawHorizontalLineAroundBlockedRanges({
       y: i,
-      config: r,
+      config: s,
       blockedRanges: [{
         x1: t,
         x2: t + e
-      }, ...s]
+      }, ...r]
     });
   }
-  drawTemporaryProtectionHorizontalLines({ handleX: t, handleWidth: e, y: i, lineConfig: r }) {
+  drawTemporaryProtectionHorizontalLines({ handleX: t, handleWidth: e, y: i, lineConfig: s }) {
     this.drawHorizontalLineAroundBlockedRanges({
       y: i,
-      config: r,
+      config: s,
       blockedRanges: [{
         x1: t,
         x2: t + e
@@ -2686,34 +2686,34 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     });
   }
   drawHorizontalLineAroundBlockedRanges({ y: t, config: e, blockedRanges: i }) {
-    const r = this.getMergedBlockedRanges(i);
-    let s = 0;
-    for (const n of r)
-      n.x1 > s && this.drawHandleLine({
-        x1: s,
+    const s = this.getMergedBlockedRanges(i);
+    let r = 0;
+    for (const n of s)
+      n.x1 > r && this.drawHandleLine({
+        x1: r,
         x2: n.x1,
         y: t,
         config: e
-      }), s = Math.max(s, n.x2);
-    s < this.#t.width && this.drawHandleLine({
-      x1: s,
+      }), r = Math.max(r, n.x2);
+    r < this.#t.width && this.drawHandleLine({
+      x1: r,
       x2: this.#t.width,
       y: t,
       config: e
     });
   }
   getMergedBlockedRanges(t) {
-    const e = t.map((r) => ({
-      x1: Math.max(0, Math.min(r.x1, this.#t.width)),
-      x2: Math.max(0, Math.min(r.x2, this.#t.width))
-    })).filter((r) => r.x2 > r.x1).sort((r, s) => r.x1 - s.x1), i = [];
-    for (const r of e) {
-      const s = i.at(-1);
-      if (!s || r.x1 > s.x2) {
-        i.push({ ...r });
+    const e = t.map((s) => ({
+      x1: Math.max(0, Math.min(s.x1, this.#t.width)),
+      x2: Math.max(0, Math.min(s.x2, this.#t.width))
+    })).filter((s) => s.x2 > s.x1).sort((s, r) => s.x1 - r.x1), i = [];
+    for (const s of e) {
+      const r = i.at(-1);
+      if (!r || s.x1 > r.x2) {
+        i.push({ ...s });
         continue;
       }
-      s.x2 = Math.max(s.x2, r.x2);
+      r.x2 = Math.max(r.x2, s.x2);
     }
     return i;
   }
@@ -2728,7 +2728,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }
   }
   getHandleSections({ handleType: t, handleConfig: e, trade: i }) {
-    const r = this.getHandlePnLLabel({
+    const s = this.getHandlePnLLabel({
       handleType: t,
       trade: i
     });
@@ -2739,7 +2739,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         visible: e.showVolumeSection
       },
       {
-        label: r,
+        label: s,
         width: e.widthPNL,
         visible: e.showPnlSection,
         color: this.getHandlePnlTextColor({
@@ -2756,18 +2756,18 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     ];
   }
   drawHandleSectionLabel({ section: t, currentX: e, y: i }) {
-    const r = this.#e, s = c.tradeHandles, n = e + t.width / 2;
-    r.fillStyle = t.color ?? s.textColor, r.fillText(t.label, n - r.measureText(t.label).width / 2, i);
+    const s = this.#e, r = c.tradeHandles, n = e + t.width / 2;
+    s.fillStyle = t.color ?? r.textColor, s.fillText(t.label, n - s.measureText(t.label).width / 2, i);
   }
-  drawHandleSectionDivider({ x: t, y1: e, y2: i, config: r }) {
-    const s = this.#e;
-    s.strokeStyle = r.sectionDividerColor, s.lineWidth = 1, s.beginPath(), s.moveTo(t, e), s.lineTo(t, i), s.stroke();
+  drawHandleSectionDivider({ x: t, y1: e, y2: i, config: s }) {
+    const r = this.#e;
+    r.strokeStyle = s.sectionDividerColor, r.lineWidth = 1, r.beginPath(), r.moveTo(t, e), r.lineTo(t, i), r.stroke();
   }
   getMissingProtectionRenderStates({ trade: t, startPriceRenderState: e }) {
     if (!c.tradeHandles.missingProtectionHandles.visible) return [];
     const i = this.getMissingProtectionHandleTypes(t);
-    return i.map((r) => this.getMissingProtectionHandleRenderState({
-      type: r,
+    return i.map((s) => this.getMissingProtectionHandleRenderState({
+      type: s,
       trade: t,
       startPriceRenderState: e,
       visibleTypes: i
@@ -2777,12 +2777,12 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     const e = [];
     return t.sl || e.push("stopLoss"), t.tp || e.push("takeProfit"), e;
   }
-  getMissingProtectionHandleRenderState({ type: t, trade: e, startPriceRenderState: i, visibleTypes: r }) {
-    const s = this.getMissingProtectionHandleConfig(t), n = s.width, o = s.height, a = this.getMissingProtectionHandleX({
+  getMissingProtectionHandleRenderState({ type: t, trade: e, startPriceRenderState: i, visibleTypes: s }) {
+    const r = this.getMissingProtectionHandleConfig(t), n = r.width, o = r.height, a = this.getMissingProtectionHandleX({
       type: t,
-      config: s,
+      config: r,
       startPriceRenderState: i,
-      visibleTypes: r
+      visibleTypes: s
     }), l = i.y - o / 2;
     return {
       price: e.openPrice,
@@ -2790,15 +2790,15 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       trade: e,
       viewport: i.viewport,
       y: i.y,
-      config: s,
+      config: r,
       handleX: a,
       handleY: l,
       handleWidth: n,
       handleHeight: o
     };
   }
-  getMissingProtectionHandleX({ type: t, config: e, startPriceRenderState: i, visibleTypes: r }) {
-    const s = r.indexOf(t), n = e.gapFromStartPriceHandle + s * (e.width + e.gapBetweenHandles);
+  getMissingProtectionHandleX({ type: t, config: e, startPriceRenderState: i, visibleTypes: s }) {
+    const r = s.indexOf(t), n = e.gapFromStartPriceHandle + r * (e.width + e.gapBetweenHandles);
     return e.placement === "left" ? i.handleX - n - e.width : i.handleX + i.handleWidth + n;
   }
   getLineBlockedRangesFromMissingProtectionHandles(t) {
@@ -2811,19 +2811,19 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     const e = c.tradeHandles.missingProtectionHandles;
     return t === "stopLoss" ? e.slHandle : e.tpHandle;
   }
-  drawMissingProtectionHandleRect({ x: t, y: e, width: i, config: r }) {
-    const s = this.#e;
+  drawMissingProtectionHandleRect({ x: t, y: e, width: i, config: s }) {
+    const r = this.#e;
     this.clearRectArea({
       x: t,
       y: e,
       width: i,
-      height: r.height,
-      padding: Math.max(1, r.borderWidth)
-    }), s.save(), s.globalAlpha = r.backgroundOpacity, s.fillStyle = r.backgroundColor, s.fillRect(t, e, i, r.height), s.globalAlpha = r.borderOpacity, s.strokeStyle = r.borderColor, s.lineWidth = r.borderWidth, s.strokeRect(t, e, i, r.height), s.restore();
+      height: s.height,
+      padding: Math.max(1, s.borderWidth)
+    }), r.save(), r.globalAlpha = s.backgroundOpacity, r.fillStyle = s.backgroundColor, r.fillRect(t, e, i, s.height), r.globalAlpha = s.borderOpacity, r.strokeStyle = s.borderColor, r.lineWidth = s.borderWidth, r.strokeRect(t, e, i, s.height), r.restore();
   }
-  drawMissingProtectionHandleLabel({ type: t, handleX: e, y: i, handleWidth: r, config: s }) {
-    const n = this.#e, o = t === "stopLoss" ? "SL" : "TP", a = e + r / 2;
-    n.save(), n.font = s.font, n.textBaseline = "middle", n.globalAlpha = s.textOpacity, n.fillStyle = s.textColor, n.fillText(o, a - n.measureText(o).width / 2, i), n.restore();
+  drawMissingProtectionHandleLabel({ type: t, handleX: e, y: i, handleWidth: s, config: r }) {
+    const n = this.#e, o = t === "stopLoss" ? "SL" : "TP", a = e + s / 2;
+    n.save(), n.font = r.font, n.textBaseline = "middle", n.globalAlpha = r.textOpacity, n.fillStyle = r.textColor, n.fillText(o, a - n.measureText(o).width / 2, i), n.restore();
   }
   drawTemporaryProtectionDrag() {
     const t = this.getTemporaryProtectionRenderState();
@@ -2836,20 +2836,20 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   getTemporaryProtectionRenderState() {
     if (!this.temporaryProtectionDrag) return null;
-    const { trade: t, type: e, viewport: i } = this.temporaryProtectionDrag, r = p(this.temporaryProtectionDrag.price), s = this.getPriceY(r, i), n = this.getTemporaryProtectionHandleConfig(e), o = this.getTemporaryProtectionLineConfig(e), a = n.widthPNL, l = n.height;
+    const { trade: t, type: e, viewport: i } = this.temporaryProtectionDrag, s = p(this.temporaryProtectionDrag.price), r = this.getPriceY(s, i), n = this.getTemporaryProtectionHandleConfig(e), o = this.getTemporaryProtectionLineConfig(e), a = n.widthPNL, l = n.height;
     return {
-      price: r,
+      price: s,
       type: e,
       trade: t,
       viewport: i,
-      y: s,
+      y: r,
       handleConfig: n,
       lineConfig: o,
       handleX: this.getTemporaryProtectionHandleX({
         handleWidth: a,
         config: n
       }),
-      handleY: s - l / 2,
+      handleY: r - l / 2,
       handleWidth: a,
       handleHeight: l
     };
@@ -2862,22 +2862,22 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     const e = c.tradeHandles.missingProtectionHandles;
     return t === "stopLoss" ? e.temporarySlLine : e.temporaryTpLine;
   }
-  drawTemporaryProtectionHandleRect({ x: t, y: e, width: i, config: r }) {
-    const s = this.#e;
+  drawTemporaryProtectionHandleRect({ x: t, y: e, width: i, config: s }) {
+    const r = this.#e;
     this.clearRectArea({
       x: t,
       y: e,
       width: i,
-      height: r.height,
-      padding: Math.max(1, r.borderWidth)
-    }), s.save(), s.globalAlpha = r.backgroundOpacity, s.fillStyle = r.backgroundColor, s.fillRect(t, e, i, r.height), s.globalAlpha = r.borderOpacity, s.strokeStyle = r.borderColor, s.lineWidth = r.borderWidth, s.strokeRect(t, e, i, r.height), s.restore();
+      height: s.height,
+      padding: Math.max(1, s.borderWidth)
+    }), r.save(), r.globalAlpha = s.backgroundOpacity, r.fillStyle = s.backgroundColor, r.fillRect(t, e, i, s.height), r.globalAlpha = s.borderOpacity, r.strokeStyle = s.borderColor, r.lineWidth = s.borderWidth, r.strokeRect(t, e, i, s.height), r.restore();
   }
-  drawTemporaryProtectionPnLLabel({ trade: t, type: e, price: i, handleX: r, y: s, handleWidth: n, handleConfig: o }) {
-    const a = this.#e, l = ut(t.type, t.openPrice, i, t.volume, t.symbol), d = this.formatPnlLabel(l), u = r + n / 2;
-    a.save(), a.font = o.font, a.textBaseline = "middle", a.globalAlpha = o.textOpacity, a.fillStyle = this.getProtectionPnlTextColor(e), a.fillText(d, u - a.measureText(d).width / 2, s), a.restore();
+  drawTemporaryProtectionPnLLabel({ trade: t, type: e, price: i, handleX: s, y: r, handleWidth: n, handleConfig: o }) {
+    const a = this.#e, l = ut(t.type, t.openPrice, i, t.volume, t.symbol), d = this.formatPnlLabel(l), u = s + n / 2;
+    a.save(), a.font = o.font, a.textBaseline = "middle", a.globalAlpha = o.textOpacity, a.fillStyle = this.getProtectionPnlTextColor(e), a.fillText(d, u - a.measureText(d).width / 2, r), a.restore();
   }
-  clearRectArea({ x: t, y: e, width: i, height: r, padding: s = 0 }) {
-    this.#e.clearRect(t - s, e - s, i + s * 2, r + s * 2);
+  clearRectArea({ x: t, y: e, width: i, height: s, padding: r = 0 }) {
+    this.#e.clearRect(t - r, e - r, i + r * 2, s + r * 2);
   }
   getPositionedHandleX({ handleWidth: t, position: e }) {
     const i = this.#t.width;
@@ -2910,22 +2910,22 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   #t;
   #e;
   #r;
-  #s;
-  #c;
   #i;
-  #l;
   #u;
+  #s;
+  #l;
+  #g;
   #n;
   #a = null;
   #o = null;
   #d = !1;
   #h = 0;
-  #f = 0;
+  #m = 0;
   constructor(t) {
-    this.#t = t.canvas, this.#e = t.getHandleHitboxes, this.#r = t.getCurrentPrice, this.#s = t.onDrag, this.#c = t.onMissingProtectionDrag, this.#i = t.onMissingProtectionDragEnd, this.#l = t.onMissingProtectionDragCancel, this.#u = t.onTradeModified, this.#n = t.onTradeCloseClicked;
+    this.#t = t.canvas, this.#e = t.getHandleHitboxes, this.#r = t.getCurrentPrice, this.#i = t.onDrag, this.#u = t.onMissingProtectionDrag, this.#s = t.onMissingProtectionDragEnd, this.#l = t.onMissingProtectionDragCancel, this.#g = t.onTradeModified, this.#n = t.onTradeCloseClicked;
   }
   cancelActiveInteraction() {
-    this.#o && this.#l?.(), this.#a = null, this.#o = null, this.#d = !1, this.#h = 0, this.#f = 0;
+    this.#o && this.#l?.(), this.#a = null, this.#o = null, this.#d = !1, this.#h = 0, this.#m = 0;
   }
   handlePointerEvent(t) {
     if (!this.isSupportedEventType(t.type)) return !1;
@@ -2941,16 +2941,16 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     return ee.includes(t);
   }
   getCanvasMousePoint(t) {
-    const e = this.#t.getBoundingClientRect(), i = this.#t.width / e.width, r = this.#t.height / e.height;
+    const e = this.#t.getBoundingClientRect(), i = this.#t.width / e.width, s = this.#t.height / e.height;
     return {
       x: (t.clientX - e.left) * i,
-      y: (t.clientY - e.top) * r
+      y: (t.clientY - e.top) * s
     };
   }
   handleActiveDrag(t, e) {
     if (!this.#a) return !1;
     const i = this.getNextDragPrice(e.y);
-    return this.#a.price = i, this.#s?.({
+    return this.#a.price = i, this.#i?.({
       trade: this.#a.trade,
       type: this.#a.type,
       price: i
@@ -2958,25 +2958,25 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   handleActiveMissingProtectionDrag(t, e) {
     if (!this.#o || !this.isProtectionHandleType(this.#o.type)) return !1;
-    const i = e.y - this.#h, r = c.tradeHandles.missingProtectionHandles.dragActivationThresholdPx;
-    if (!this.#d && Math.abs(i) < r)
+    const i = e.y - this.#h, s = c.tradeHandles.missingProtectionHandles.dragActivationThresholdPx;
+    if (!this.#d && Math.abs(i) < s)
       return this.consumeEvent(t), !0;
     this.#d = !0;
-    const s = this.getNextMissingProtectionPrice(e.y);
-    return this.#o.price = s, this.#c?.({
+    const r = this.getNextMissingProtectionPrice(e.y);
+    return this.#o.price = r, this.#u?.({
       trade: this.#o.trade,
       type: this.#o.type,
-      price: s
+      price: r
     }), this.consumeEvent(t), !0;
   }
   getNextDragPrice(t) {
     if (!this.#a) return 0;
-    const e = t - this.#h, i = this.#a.viewport.priceRange / this.#t.height, r = p(this.#f - e * i);
+    const e = t - this.#h, i = this.#a.viewport.priceRange / this.#t.height, s = p(this.#m - e * i);
     return this.isProtectionHandleType(this.#a.type) ? this.constrainExistingProtectionPrice({
-      price: r,
+      price: s,
       hitbox: this.#a,
       type: this.#a.type
-    }) : r;
+    }) : s;
   }
   getNextMissingProtectionPrice(t) {
     if (!this.#o || !this.isProtectionHandleType(this.#o.type)) return 0;
@@ -2991,7 +2991,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     return this.#a && this.modifyActiveDragTrade(), this.#a = null, !1;
   }
   handleMissingProtectionDragEnd() {
-    return this.#o && this.#d && this.isProtectionHandleType(this.#o.type) ? this.#i?.({
+    return this.#o && this.#d && this.isProtectionHandleType(this.#o.type) ? this.#s?.({
       trade: this.#o.trade,
       type: this.#o.type,
       price: p(this.#o.price)
@@ -3001,13 +3001,13 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     if (!this.#a) return;
     const t = p(this.#a.price);
     if (this.#a.type === "stopLoss") {
-      this.#u?.({
+      this.#g?.({
         ticket: this.#a.trade.ticket,
         sl: t
       });
       return;
     }
-    this.#u?.({
+    this.#g?.({
       ticket: this.#a.trade.ticket,
       tp: t
     });
@@ -3017,21 +3017,21 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   handleHoveredHitbox(t, e, i) {
     if (e.kind === "missingProtectionHandle") return this.handleMissingProtectionHandleHover(t, e, i);
-    const r = this.isPointInsideArea(i, e.closeButtonArea), s = this.isPointInsideArea(i, e.labelArea);
-    return r ? this.handleCloseButtonHover(t, e) : (this.updateHandleCursor(e), s && t.type === "pointerdown" && e.type !== "startPrice" && this.startDrag(e, i.y), e.type !== "startPrice" ? (this.consumeEvent(t), !0) : !1);
+    const s = this.isPointInsideArea(i, e.closeButtonArea), r = this.isPointInsideArea(i, e.labelArea);
+    return s ? this.handleCloseButtonHover(t, e) : (this.updateHandleCursor(e), r && t.type === "pointerdown" && e.type !== "startPrice" && this.startDrag(e, i.y), e.type !== "startPrice" ? (this.consumeEvent(t), !0) : !1);
   }
   handleMissingProtectionHandleHover(t, e, i) {
     return document.body.style.cursor = "ns-resize", t.type === "pointerdown" ? (this.startMissingProtectionDrag(e, i.y), this.consumeEvent(t), !0) : (this.consumeEvent(t), !0);
   }
   handleCloseButtonHover(t, e) {
-    return document.body.style.cursor = "pointer", t.type !== "pointerdown" ? e.type !== "startPrice" : (this.handleCloseButtonClick(e), this.consumeEvent(t), !0);
+    return document.body.style.cursor = "pointer", this.consumeEvent(t), t.type === "pointerdown" && this.handleCloseButtonClick(e), !0;
   }
   handleCloseButtonClick(t) {
     if (t.type === "startPrice") {
       this.#n?.({ ticket: t.trade.ticket });
       return;
     }
-    this.#u?.({
+    this.#g?.({
       ticket: t.trade.ticket,
       ...t.type === "stopLoss" ? { sl: null } : {},
       ...t.type === "takeProfit" ? { tp: null } : {}
@@ -3041,7 +3041,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     document.body.style.cursor = t.type === "startPrice" ? "crosshair" : "ns-resize";
   }
   startDrag(t, e) {
-    this.#a = t, this.#h = e, this.#f = t.price;
+    this.#a = t, this.#h = e, this.#m = t.price;
   }
   startMissingProtectionDrag(t, e) {
     this.#o = t, this.#h = e, this.#d = !1;
@@ -3050,19 +3050,19 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     !this.#a && !this.#o && (document.body.style.cursor = "crosshair");
   }
   isPointInsideArea(t, e) {
-    const i = t.x >= e.x && t.x <= e.x + e.width, r = t.y >= e.y && t.y <= e.y + e.height;
-    return i && r;
+    const i = t.x >= e.x && t.x <= e.x + e.width, s = t.y >= e.y && t.y <= e.y + e.height;
+    return i && s;
   }
   isProtectionHandleType(t) {
     return t === "stopLoss" || t === "takeProfit";
   }
   constrainExistingProtectionPrice({ price: t, hitbox: e, type: i }) {
-    const r = this.isBuyTrade(e), s = e.trade.openPrice, n = this.#r?.() ?? 0;
-    return p(i === "takeProfit" ? r ? Math.max(t, s, n) : Math.min(t, s, n) : r ? Math.min(t, n) : Math.max(t, n));
+    const s = this.isBuyTrade(e), r = e.trade.openPrice, n = this.#r?.() ?? 0;
+    return p(i === "takeProfit" ? s ? Math.max(t, r, n) : Math.min(t, r, n) : s ? Math.min(t, n) : Math.max(t, n));
   }
   constrainProtectionPrice({ price: t, hitbox: e, type: i }) {
-    const r = this.isBuyTrade(e), s = e.trade.openPrice, n = this.#r?.() ?? 0;
-    return p(i === "takeProfit" ? r ? Math.max(t, s, n) : Math.min(t, s, n) : r ? Math.min(t, n) : Math.max(t, n));
+    const s = this.isBuyTrade(e), r = e.trade.openPrice, n = this.#r?.() ?? 0;
+    return p(i === "takeProfit" ? s ? Math.max(t, r, n) : Math.min(t, r, n) : s ? Math.min(t, n) : Math.max(t, n));
   }
   isBuyTrade(t) {
     return String(t.trade.type).toLowerCase().includes("buy");
@@ -3070,7 +3070,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   consumeEvent(t) {
     t.stopPropagation(), t.preventDefault();
   }
-}, re = class {
+}, se = class {
   #t;
   #e;
   candles;
@@ -3097,34 +3097,34 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   render() {
     if (this.clearCanvas(), !c.volume.visible || !this.viewport || this.candles.length === 0) return;
-    const t = this.#e, e = this.#t.width, i = this.#t.height, { startIndex: r, endIndex: s } = this.getVisibleRange(e);
-    if (s < r) return;
-    const n = this.candles.slice(r, s + 1), o = this.getMaxVolume(n);
+    const t = this.#e, e = this.#t.width, i = this.#t.height, { startIndex: s, endIndex: r } = this.getVisibleRange(e);
+    if (r < s) return;
+    const n = this.candles.slice(s, r + 1), o = this.getMaxVolume(n);
     o <= 0 || this.drawVolumeBars({
       ctx: t,
       candles: n,
-      startIndex: r,
+      startIndex: s,
       maxVolume: o,
       chartHeight: i
     });
   }
-  drawVolumeBars({ ctx: t, candles: e, startIndex: i, maxVolume: r, chartHeight: s }) {
+  drawVolumeBars({ ctx: t, candles: e, startIndex: i, maxVolume: s, chartHeight: r }) {
     t.save(), t.globalAlpha = this.opacity, e.forEach((n, o) => {
       const a = i + o, l = this.getCandleX(a);
       this.drawSingleVolumeBar({
         ctx: t,
         candle: n,
         candleX: l,
-        maxVolume: r,
-        chartHeight: s
+        maxVolume: s,
+        chartHeight: r
       });
     }), t.restore();
   }
-  drawSingleVolumeBar({ ctx: t, candle: e, candleX: i, maxVolume: r, chartHeight: s }) {
+  drawSingleVolumeBar({ ctx: t, candle: e, candleX: i, maxVolume: s, chartHeight: r }) {
     if (!this.viewport || e.volume <= 0) return;
-    const n = this.getVolumeAreaHeight(s);
+    const n = this.getVolumeAreaHeight(r);
     if (n <= 0) return;
-    const o = n * (e.volume / r), a = Math.min(n, Math.max(o, this.minBarHeight)), l = s - this.bottomOffset - a, d = Math.max(1, this.viewport.candleWidth);
+    const o = n * (e.volume / s), a = Math.min(n, Math.max(o, this.minBarHeight)), l = r - this.bottomOffset - a, d = Math.max(1, this.viewport.candleWidth);
     t.fillStyle = this.getVolumeBarColor(e), t.fillRect(i, l, d, a);
   }
   getVisibleRange(t) {
@@ -3159,20 +3159,20 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
 }, A = (t) => {
   const e = document.createElement("canvas");
   return e.className = t, e;
-}, se = (t, e) => {
+}, re = (t, e) => {
   const i = document.createElement("div");
   i.className = "trading-reload-chart", i.style.backgroundColor = e, i.tabIndex = 0;
-  const r = document.createElement("div");
-  r.className = "trading-reload-chart__layout";
   const s = document.createElement("div");
-  s.className = "trading-reload-chart__stack";
+  s.className = "trading-reload-chart__layout";
+  const r = document.createElement("div");
+  r.className = "trading-reload-chart__stack";
   const n = A("trading-reload-chart__volume"), o = A("trading-reload-chart__plot"), a = A("trading-reload-chart__shapes"), l = A("trading-reload-chart__trades"), d = A("trading-reload-chart__overlay"), u = A("trading-reload-chart__axis-x");
-  s.append(n, o, a, l, d, u);
+  r.append(n, o, a, l, d, u);
   const g = A("trading-reload-chart__axis-y");
-  return r.append(s, g), i.append(r), t.append(i), {
+  return s.append(r, g), i.append(s), t.append(i), {
     root: i,
-    layout: r,
-    stack: s,
+    layout: s,
+    stack: r,
     volumeCanvas: n,
     candleCanvas: o,
     shapesCanvas: a,
@@ -3180,69 +3180,70 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     overlayCanvas: d,
     axisXCanvas: u,
     axisYCanvas: g,
-    interactionTarget: r
+    interactionTarget: s
   };
 }, gt = (t) => typeof t == "object" && t !== null && !Array.isArray(t), Lt = (t, e) => {
   const i = { ...t };
-  for (const r of Object.keys(e)) {
-    const s = e[r], n = t[r];
-    if (s !== void 0) {
-      if (gt(s) && gt(n)) {
-        i[r] = Lt(n, s);
+  for (const s of Object.keys(e)) {
+    const r = e[s], n = t[s];
+    if (r !== void 0) {
+      if (gt(r) && gt(n)) {
+        i[s] = Lt(n, r);
         continue;
       }
-      i[r] = s;
+      i[s] = r;
     }
   }
   return i;
 }, ft = (t) => Lt(c, t ?? {}), pt = (t, e) => e === void 0 || t.time >= 1e12 ? t : {
   ...t,
   time: t.time * 1e3 - e
-}, ne = class {
+}, ne = 12, oe = class {
   #t;
   #e;
   #r;
-  #s = null;
-  #c = null;
   #i = null;
-  #l = null;
   #u = null;
+  #s = null;
+  #l = null;
+  #g = null;
   #n = null;
   #a = null;
   #o = null;
   #d = null;
   #h = null;
-  #f = !1;
-  #v = 0;
-  #y = !1;
-  #x = 0;
-  #S = 0;
-  #p = null;
-  #w = null;
+  #m = !1;
+  #y = 0;
+  #w = !1;
+  #T = 0;
+  #L = 0;
+  #f = null;
+  #C = null;
   #P = null;
+  #b = null;
   constructor(t, e) {
-    this.#t = t, this.#e = e, this.#r = ft(e.config), this.#s = se(t, this.#r.colors.background), this.#h = new zt({
-      canvas: this.#s.overlayCanvas,
+    this.#t = t, this.#e = e, this.#r = ft(e.config), this.#i = re(t, this.#r.colors.background), this.#h = new Vt({
+      canvas: this.#i.overlayCanvas,
       crosshairColor: this.#r.crosshair.color,
       crosshairThickness: this.#r.crosshair.thickness,
       crosshairStyle: this.#r.crosshair.style
-    }), this.#R(), this.#D(), this.#H(), this.updateProps(e);
+    }), this.#B(), this.#W(), this.#M(), this.updateProps(e);
   }
   updateProps(t) {
     const e = this.#e.activeShapeTool;
-    this.#e = t, this.#r = ft(t.config), this.#s && (this.#s.root.style.backgroundColor = this.#r.colors.background, this.#s.layout.style.setProperty("--axis-x-height", `${this.#r.axis.axisX.height}px`)), !this.#f && t.candles.length > 0 && this.#M(t.candles), this.#i && (t.activeShapeTool !== e && this.#X(t.activeShapeTool), this.#l?.setConfig(this.#r.shapes), this.#l?.setShapes(t.shapes), this.#l?.setActiveTool(t.activeShapeTool), this.#u?.setConfig(this.#r.shapes.previousDayHighLow ?? null), this.#u?.setPreviousDay(t.previousDay), this.#n?.setClosedTrades(t.closedTrades ?? []), this.#b(), this.#B(), this.#g());
+    this.#e = t, this.#r = ft(t.config), this.#i && (this.#i.root.style.backgroundColor = this.#r.colors.background, this.#i.layout.style.setProperty("--axis-x-height", `${this.#r.axis.axisX.height}px`)), !this.#m && t.candles.length > 0 && this.#I(t.candles), this.#s && (t.activeShapeTool !== e && this.#Y(t.activeShapeTool), this.#l?.setConfig(this.#r.shapes), this.#l?.setShapes(t.shapes), this.#l?.setActiveTool(t.activeShapeTool), this.#g?.setConfig(this.#r.shapes.previousDayHighLow ?? null), this.#g?.setPreviousDay(t.previousDay), this.#n?.setClosedTrades(t.closedTrades ?? []), this.#x(), this.#E(), this.#c());
   }
   resetChartView() {
-    this.#i?.resetView(), this.#g();
+    this.#s?.resetView(), this.#c();
   }
   destroy() {
-    this.#P?.abort(), this.#P = null, this.#w?.disconnect(), this.#w = null, this.#s?.root.remove(), this.#s = null, this.#c = null, this.#i = null, this.#l = null, this.#u = null, this.#n = null, this.#a = null, this.#o = null, this.#d = null, this.#h = null, this.#f = !1;
+    this.#b?.abort(), this.#b = null, this.#P?.disconnect(), this.#P = null, this.#i?.root.remove(), this.#i = null, this.#u = null, this.#s = null, this.#l = null, this.#g = null, this.#n = null, this.#a = null, this.#o = null, this.#d = null, this.#h = null, this.#f = null, this.#m = !1;
   }
-  #M(t) {
-    if (!this.#s || this.#f) return;
-    const e = t.map((r) => pt(r, this.#e.brokerTimezoneOffsetMs));
-    this.#c = new re({
-      canvas: this.#s.volumeCanvas,
+  #I(t) {
+    if (!this.#i || this.#m) return;
+    const e = t.map((s) => pt(s, this.#e.brokerTimezoneOffsetMs));
+    this.#u = new se({
+      canvas: this.#i.volumeCanvas,
       candles: e,
       bullishColor: this.#r.volume.bullishColor,
       bearishColor: this.#r.volume.bearishColor,
@@ -3250,8 +3251,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       height: this.#r.volume.height,
       bottomOffset: this.#r.volume.bottomOffset,
       minBarHeight: this.#r.volume.minBarHeight
-    }), this.#i = new _t({
-      canvas: this.#s.candleCanvas,
+    }), this.#s = new _t({
+      canvas: this.#i.candleCanvas,
       candles: e,
       baseCandleWidth: this.#r.candles.defaultWidth,
       baseCandleGap: this.#r.candles.defaultGap,
@@ -3261,122 +3262,122 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       autoFollowThresholdCandles: this.#r.candles.autoFollowThresholdCandles,
       rightOffsetCandles: this.#r.candles.rightOffsetCandles
     }), this.#l = new Qt({
-      canvas: this.#s.shapesCanvas,
+      canvas: this.#i.shapesCanvas,
       activeSymbol: this.#e.activeSymbol,
       candles: e,
       shapes: this.#e.shapes,
       activeTool: this.#e.activeShapeTool,
       config: this.#r.shapes,
-      onShapeAdded: (r) => {
-        this.#e.onShapeAdded?.(r);
+      onShapeAdded: (s) => {
+        this.#e.onShapeAdded?.(s);
       },
-      onShapeModified: (r) => {
-        this.#e.onShapeModified?.(r);
+      onShapeModified: (s) => {
+        this.#e.onShapeModified?.(s);
       },
-      onShapeSelected: (r) => {
-        this.#e.onShapeSelected?.(r);
+      onShapeSelected: (s) => {
+        this.#e.onShapeSelected?.(s);
       },
-      onShapeDoubleClicked: (r) => {
-        this.#e.onShapeDoubleClicked?.(r);
+      onShapeDoubleClicked: (s) => {
+        this.#e.onShapeDoubleClicked?.(s);
       },
-      onToolChange: (r) => {
-        this.#e.onActiveShapeToolChange?.(r);
+      onToolChange: (s) => {
+        this.#e.onActiveShapeToolChange?.(s);
       }
     });
-    const i = this.#s.shapesCanvas.getContext("2d");
-    i && (this.#u = new Gt({
+    const i = this.#i.shapesCanvas.getContext("2d");
+    i && (this.#g = new Gt({
       ctx: i,
       config: this.#r.shapes.previousDayHighLow ?? null
-    }), this.#u.setPreviousDay(this.#e.previousDay)), this.#n = new te({ canvas: this.#s.tradesCanvas }), this.#n.setCandles(e), this.#n.setClosedTrades(this.#e.closedTrades ?? []), this.#b(), this.#o = new Ot({
-      canvas: this.#s.axisXCanvas,
+    }), this.#g.setPreviousDay(this.#e.previousDay)), this.#n = new te({ canvas: this.#i.tradesCanvas }), this.#n.setCandles(e), this.#n.setClosedTrades(this.#e.closedTrades ?? []), this.#x(), this.#o = new Ot({
+      canvas: this.#i.axisXCanvas,
       candles: e
-    }), this.#d = new Vt({ canvas: this.#s.axisYCanvas }), this.#a = new ie({
-      canvas: this.#s.tradesCanvas,
-      getHandleHitboxes: () => this.#m() ? [] : this.#n?.handleHitboxes ?? [],
-      getCurrentPrice: () => this.#i?.liveCandle?.close ?? 0,
-      onDrag: (r) => this.#W(r),
-      onMissingProtectionDrag: (r) => this.#F(r),
-      onMissingProtectionDragEnd: (r) => this.#Y(r),
-      onMissingProtectionDragCancel: () => this.#O(),
-      onTradeModified: (r) => this.#k(r),
-      onTradeCloseClicked: (r) => this.#e.onTradeClose?.(r)
-    }), this.#f = !0, this.#g();
-  }
-  #R() {
-    if (!this.#s) return;
-    this.#P = new AbortController();
-    const { signal: t } = this.#P, e = this.#s.interactionTarget;
-    e.addEventListener("pointerdown", (i) => this.#N(i), { signal: t }), e.addEventListener("pointerup", (i) => this.#G(i), { signal: t }), e.addEventListener("pointermove", (i) => this.#_(i), { signal: t }), e.addEventListener("pointerenter", (i) => this.#U(i), { signal: t }), e.addEventListener("pointerleave", () => this.#$(), { signal: t }), e.addEventListener("contextmenu", (i) => this.#J(i), { signal: t }), e.addEventListener("dblclick", (i) => this.#K(i), { signal: t }), e.addEventListener("wheel", (i) => this.#V(i), {
+    }), this.#d = new zt({ canvas: this.#i.axisYCanvas }), this.#a = new ie({
+      canvas: this.#i.tradesCanvas,
+      getHandleHitboxes: () => this.#p() ? [] : this.#n?.handleHitboxes ?? [],
+      getCurrentPrice: () => this.#s?.liveCandle?.close ?? 0,
+      onDrag: (s) => this.#z(s),
+      onMissingProtectionDrag: (s) => this.#V(s),
+      onMissingProtectionDragEnd: (s) => this.#N(s),
+      onMissingProtectionDragCancel: () => this.#_(),
+      onTradeModified: (s) => this.#R(s),
+      onTradeCloseClicked: (s) => this.#e.onTradeClose?.(s)
+    }), this.#m = !0, this.#c();
+  }
+  #B() {
+    if (!this.#i) return;
+    this.#b = new AbortController();
+    const { signal: t } = this.#b, e = this.#i.interactionTarget;
+    e.addEventListener("pointerdown", (i) => this.#J(i), { signal: t }), e.addEventListener("pointerup", (i) => this.#j(i), { signal: t }), e.addEventListener("pointermove", (i) => this.#K(i), { signal: t }), e.addEventListener("pointerenter", (i) => this.#Z(i), { signal: t }), e.addEventListener("pointerleave", () => this.#q(), { signal: t }), e.addEventListener("contextmenu", (i) => this.#Q(i), { signal: t }), e.addEventListener("dblclick", (i) => this.#tt(i), { signal: t }), e.addEventListener("wheel", (i) => this.#U(i), {
       passive: !1,
       signal: t
-    }), this.#s.axisYCanvas.addEventListener("wheel", (i) => this.#z(i), {
+    }), this.#i.axisXCanvas.addEventListener("pointerenter", (i) => this.#D(i), { signal: t }), this.#i.axisXCanvas.addEventListener("pointerdown", (i) => this.#A(i, "x"), { signal: t }), this.#i.axisXCanvas.addEventListener("pointermove", (i) => this.#X(i), { signal: t }), this.#i.axisXCanvas.addEventListener("pointerup", (i) => this.#S(i), { signal: t }), this.#i.axisXCanvas.addEventListener("pointercancel", (i) => this.#S(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointerenter", (i) => this.#D(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointerdown", (i) => this.#A(i, "y"), { signal: t }), this.#i.axisYCanvas.addEventListener("pointermove", (i) => this.#X(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointerup", (i) => this.#S(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointercancel", (i) => this.#S(i), { signal: t }), this.#i.axisYCanvas.addEventListener("wheel", (i) => this.#$(i), {
       passive: !1,
       signal: t
-    }), document.addEventListener("keydown", (i) => this.#j(i), { signal: t });
+    }), document.addEventListener("keydown", (i) => this.#et(i), { signal: t });
   }
-  #D() {
-    this.#w = new ResizeObserver(() => {
-      this.#H(), this.#g();
-    }), this.#w.observe(this.#t);
+  #W() {
+    this.#P = new ResizeObserver(() => {
+      this.#M(), this.#c();
+    }), this.#P.observe(this.#t);
   }
-  #A() {
-    const t = this.#r.axis.axisY.width, e = this.#r.axis.axisX.height, i = this.#t.clientWidth, r = this.#t.clientHeight;
+  #F() {
+    const t = this.#r.axis.axisY.width, e = this.#r.axis.axisX.height, i = this.#t.clientWidth, s = this.#t.clientHeight;
     return {
       axisYWidth: t,
       axisXHeight: e,
       plotWidth: Math.max(0, i - t),
-      plotHeight: Math.max(0, r - e)
+      plotHeight: Math.max(0, s - e)
     };
   }
-  #C(t, e, i) {
+  #v(t, e, i) {
     t.width = e, t.height = i;
   }
-  #H() {
-    if (!this.#s) return;
-    const { plotWidth: t, plotHeight: e, axisYWidth: i, axisXHeight: r } = this.#A();
-    if (this.#i && this.#v > 0 && t !== this.#v) {
-      const s = t - this.#v;
-      this.#i.panHorizontally(s);
+  #M() {
+    if (!this.#i) return;
+    const { plotWidth: t, plotHeight: e, axisYWidth: i, axisXHeight: s } = this.#F();
+    if (this.#s && this.#y > 0 && t !== this.#y) {
+      const r = t - this.#y;
+      this.#s.panHorizontally(r);
     }
-    this.#v = t, this.#C(this.#s.volumeCanvas, t, e), this.#C(this.#s.candleCanvas, t, e), this.#C(this.#s.shapesCanvas, t, e), this.#C(this.#s.overlayCanvas, t, e), this.#C(this.#s.tradesCanvas, t, e), this.#C(this.#s.axisXCanvas, t, r), this.#C(this.#s.axisYCanvas, i, e);
+    this.#y = t, this.#v(this.#i.volumeCanvas, t, e), this.#v(this.#i.candleCanvas, t, e), this.#v(this.#i.shapesCanvas, t, e), this.#v(this.#i.overlayCanvas, t, e), this.#v(this.#i.tradesCanvas, t, e), this.#v(this.#i.axisXCanvas, t, s), this.#v(this.#i.axisYCanvas, i, e);
   }
-  #T() {
-    this.#i && (this.#o?.setCandles(this.#i.candles), this.#o?.setViewport(this.#i.viewport), this.#o?.render(), this.#d?.setViewport(this.#i.viewport), this.#d?.render());
+  #H() {
+    this.#s && (this.#o?.setCandles(this.#s.candles), this.#o?.setViewport(this.#s.viewport), this.#o?.render(), this.#d?.setViewport(this.#s.viewport), this.#d?.render());
   }
-  #g() {
-    this.#i && (this.#c?.setCandles(this.#i.candles), this.#c?.setLiveCandle(this.#i.liveCandle), this.#c?.setViewport(this.#i.viewport), this.#c?.render(), this.#i.render(), this.#l?.setCandles(this.#i.candles), this.#l?.setViewport(this.#i.viewport), this.#l?.render(), this.#u?.setViewport(this.#i.viewport), this.#u?.render(), this.#n?.setCandles(this.#i.candles), this.#n?.setViewport(this.#i.viewport), this.#n?.isDragging ? this.#n.renderLiveFeed() : this.#n?.render(), this.#T(), this.#h?.render());
+  #c() {
+    this.#s && (this.#u?.setCandles(this.#s.candles), this.#u?.setLiveCandle(this.#s.liveCandle), this.#u?.setViewport(this.#s.viewport), this.#u?.render(), this.#s.render(), this.#l?.setCandles(this.#s.candles), this.#l?.setViewport(this.#s.viewport), this.#l?.render(), this.#g?.setViewport(this.#s.viewport), this.#g?.render(), this.#n?.setCandles(this.#s.candles), this.#n?.setViewport(this.#s.viewport), this.#n?.isDragging ? this.#n.renderLiveFeed() : this.#n?.render(), this.#H(), this.#h?.render());
   }
-  #m() {
+  #p() {
     return this.#e.activeShapeTool !== null;
   }
-  #X(t) {
-    t !== null && (this.#y = !1, this.#n?.setIsDragging(!1), this.#a?.cancelActiveInteraction()), this.#l?.setActiveTool(t);
+  #Y(t) {
+    t !== null && (this.#w = !1, this.#n?.setIsDragging(!1), this.#a?.cancelActiveInteraction()), this.#l?.setActiveTool(t);
   }
-  #I() {
+  #O() {
     const t = this.#e.openTrades ?? [];
-    return this.#p ? t.map((e) => e.ticket !== this.#p?.ticket ? e : {
+    return this.#C ? t.map((e) => e.ticket !== this.#C?.ticket ? e : {
       ...e,
-      ...this.#p.sl !== void 0 ? { sl: this.#p.sl } : {},
-      ...this.#p.tp !== void 0 ? { tp: this.#p.tp } : {}
+      ...this.#C.sl !== void 0 ? { sl: this.#C.sl } : {},
+      ...this.#C.tp !== void 0 ? { tp: this.#C.tp } : {}
     }) : t;
   }
-  #b() {
-    this.#n?.setTrades(this.#I());
+  #x() {
+    this.#n?.setTrades(this.#O());
   }
-  #B() {
+  #E() {
     const t = this.#e.liveCandle;
-    if (!t || !this.#i) return;
+    if (!t || !this.#s) return;
     const e = pt(t, this.#e.brokerTimezoneOffsetMs);
-    this.#i.updateLiveCandle(e), this.#n?.setLiveCandle(this.#i.liveCandle), this.#n?.setCandles(this.#i.candles);
+    this.#s.updateLiveCandle(e), this.#n?.setLiveCandle(this.#s.liveCandle), this.#n?.setCandles(this.#s.candles);
   }
-  #W({ trade: t, type: e, price: i }) {
-    this.#n && (this.#n.setIsDragging(!0), this.#p = {
+  #z({ trade: t, type: e, price: i }) {
+    this.#n && (this.#n.setIsDragging(!0), this.#C = {
       ticket: t.ticket,
       ...e === "stopLoss" ? { sl: i } : {},
       ...e === "takeProfit" ? { tp: i } : {}
-    }, this.#b(), this.#n.render());
+    }, this.#x(), this.#n.render());
   }
-  #F({ trade: t, type: e, price: i }) {
+  #V({ trade: t, type: e, price: i }) {
     this.#n?.viewport && (this.#n.setIsDragging(!0), this.#n.setTemporaryProtectionDrag({
       visible: !0,
       trade: t,
@@ -3385,28 +3386,28 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       viewport: this.#n.viewport
     }), this.#n.render());
   }
-  #Y({ trade: t, type: e, price: i }) {
-    this.#n?.setIsDragging(!1), this.#k({
+  #N({ trade: t, type: e, price: i }) {
+    this.#n?.setIsDragging(!1), this.#R({
       ticket: t.ticket,
       ...e === "stopLoss" ? { sl: i } : {},
       ...e === "takeProfit" ? { tp: i } : {}
     });
   }
-  #O() {
+  #_() {
     this.#n?.setIsDragging(!1), this.#n?.clearTemporaryProtectionDrag(), this.#n?.render();
   }
-  #k(t) {
-    this.#n?.setIsDragging(!1), this.#p = null, this.#n?.clearTemporaryProtectionDrag(), this.#e.onTradeModify?.(t), this.#b(), this.#n?.render();
+  #R(t) {
+    this.#n?.setIsDragging(!1), this.#C = null, this.#n?.clearTemporaryProtectionDrag(), this.#e.onTradeModify?.(t), this.#x(), this.#n?.render();
   }
-  #L(t) {
-    if (!this.#h || !this.#s) return;
-    if (!this.#i) {
+  #k(t) {
+    if (!this.#h || !this.#i) return;
+    if (!this.#s) {
       this.#h.updateMousePosition(t.clientX, t.clientY), this.#h.render();
       return;
     }
-    const e = vt(this.#s.overlayCanvas, t), i = this.#i.getNearestCandleIndexByX(e.x), r = i === null ? null : this.#i.candles[i] ?? null, s = i === null ? e.x : this.#i.getRawCandleSnapX(e.x);
-    this.#h.updateMousePosition(t.clientX, t.clientY, { snapX: s });
-    const n = this.#i.getPriceAtY(this.#h.mouseY);
+    const e = vt(this.#i.overlayCanvas, t), i = this.#s.getNearestCandleIndexByX(e.x), s = i === null ? null : this.#s.candles[i] ?? null, r = i === null ? e.x : this.#s.getRawCandleSnapX(e.x);
+    this.#h.updateMousePosition(t.clientX, t.clientY, { snapX: r });
+    const n = this.#s.getPriceAtY(this.#h.mouseY);
     this.#d?.setCrosshair({
       visible: !0,
       y: this.#h.mouseY,
@@ -3414,78 +3415,105 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }), this.#o?.setCrosshair({
       visible: !0,
       x: this.#h.mouseX,
-      candle: r
-    }), this.#T(), this.#h.render();
+      candle: s
+    }), this.#H(), this.#h.render();
   }
-  #E() {
-    this.#h?.hide(), this.#o?.hideCrosshair(), this.#d?.hideCrosshair(), this.#T(), this.#h?.render();
+  #G() {
+    this.#h?.hide(), this.#o?.hideCrosshair(), this.#d?.hideCrosshair(), this.#H(), this.#h?.render();
   }
-  #V(t) {
-    if (!this.#i || !this.#n) return;
-    this.#m() || this.#a?.handlePointerEvent(t), t.preventDefault();
+  #U(t) {
+    if (!this.#s || !this.#n) return;
+    this.#p() || this.#a?.handlePointerEvent(t), t.preventDefault();
     const e = t.deltaY < 0 ? 1 : -1;
-    t.ctrlKey || t.metaKey ? this.#i.zoomVertically(e) : this.#i.zoomHorizontally(e), this.#g();
+    t.ctrlKey || t.metaKey ? this.#s.zoomVertically(e) : this.#s.zoomHorizontally(e), this.#c();
   }
-  #z(t) {
-    if (!this.#i) return;
+  #$(t) {
+    if (!this.#s) return;
     t.preventDefault(), t.stopPropagation();
     const e = t.deltaY < 0 ? 1 : -1;
-    this.#i.zoomVertically(e), this.#g();
+    this.#s.zoomVertically(e), this.#c();
   }
-  #N(t) {
-    if (this.#l?.handlePointerEvent(t) ?? !1) {
-      this.#g();
-      return;
+  #D(t) {
+    const e = t.currentTarget;
+    e.style.cursor = e === this.#i?.axisXCanvas ? "ew-resize" : "ns-resize";
+  }
+  #A(t, e) {
+    t.stopPropagation(), t.button === 0 && (t.currentTarget.setPointerCapture(t.pointerId), this.#f = {
+      axis: e,
+      lastClientPosition: e === "x" ? t.clientX : t.clientY,
+      pointerId: t.pointerId
+    }, t.preventDefault());
+  }
+  #X(t) {
+    t.stopPropagation();
+    const e = t.currentTarget, i = e === this.#i?.axisXCanvas ? "x" : "y";
+    if (e.style.cursor = i === "x" ? "ew-resize" : "ns-resize", !this.#f || this.#f.pointerId !== t.pointerId || this.#f.axis !== i) return;
+    const s = i === "x" ? t.clientX : t.clientY, r = s - this.#f.lastClientPosition;
+    if (this.#f.lastClientPosition = s, !this.#s || r === 0) return;
+    const n = (i === "x" ? r : -r) / ne;
+    i === "x" ? this.#s.zoomHorizontally(n) : this.#s.zoomVertically(n), t.preventDefault(), this.#c();
+  }
+  #S(t) {
+    if (t.stopPropagation(), this.#f?.pointerId !== t.pointerId) return;
+    const e = t.currentTarget;
+    e.hasPointerCapture(t.pointerId) && e.releasePointerCapture(t.pointerId), this.#f = null, t.preventDefault();
+  }
+  #J(t) {
+    if (!(!this.#p() && this.#a?.handlePointerEvent(t))) {
+      if (this.#l?.handlePointerEvent(t) ?? !1) {
+        this.#c();
+        return;
+      }
+      this.#p() || (this.#w = !0, this.#T = t.clientX, this.#L = t.clientY);
     }
-    this.#m() || this.#a?.handlePointerEvent(t) || (this.#y = !0, this.#x = t.clientX, this.#S = t.clientY);
   }
-  #_(t) {
+  #K(t) {
     const e = this.#l?.handlePointerEvent(t) ?? !1;
-    if (this.#m() || this.#a?.handlePointerEvent(t), this.#L(t), e) {
-      this.#g(), this.#L(t);
+    if (this.#p() || this.#a?.handlePointerEvent(t), this.#k(t), e) {
+      this.#c(), this.#k(t);
       return;
     }
-    if (!this.#y || !this.#i || this.#m()) return;
-    const i = t.clientX - this.#x, r = t.clientY - this.#S;
-    this.#x = t.clientX, this.#S = t.clientY, this.#i.panHorizontally(i), this.#i.panVertically(r), this.#g(), this.#L(t);
+    if (!this.#w || !this.#s || this.#p()) return;
+    const i = t.clientX - this.#T, s = t.clientY - this.#L;
+    this.#T = t.clientX, this.#L = t.clientY, this.#s.panHorizontally(i), this.#s.panVertically(s), this.#c(), this.#k(t);
   }
-  #G(t) {
-    if (this.#y = !1, this.#l?.handlePointerEvent(t) ?? !1) {
-      this.#g();
+  #j(t) {
+    if (this.#w = !1, this.#l?.handlePointerEvent(t) ?? !1) {
+      this.#c();
       return;
     }
-    this.#m() || this.#a?.handlePointerEvent(t);
+    this.#p() || this.#a?.handlePointerEvent(t);
   }
-  #U(t) {
-    document.body.style.cursor = "crosshair", this.#l?.handlePointerEvent(t), this.#m() || this.#a?.handlePointerEvent(t);
+  #Z(t) {
+    document.body.style.cursor = "crosshair", this.#l?.handlePointerEvent(t), this.#p() || this.#a?.handlePointerEvent(t);
   }
-  #$() {
-    this.#l?.clearHoverState(), document.body.style.cursor = "", this.#E();
+  #q() {
+    this.#l?.clearHoverState(), document.body.style.cursor = "", this.#G();
   }
-  #J(t) {
-    ((this.#l?.handlePointerEvent(t) ?? !1) || this.#m()) && (t.preventDefault(), t.stopPropagation(), this.#g());
+  #Q(t) {
+    ((this.#l?.handlePointerEvent(t) ?? !1) || this.#p()) && (t.preventDefault(), t.stopPropagation(), this.#c());
   }
-  #K(t) {
+  #tt(t) {
     this.#l?.handlePointerEvent(t);
   }
-  #j(t) {
-    (this.#l?.handleKeyboardEvent(t) ?? !1) && (t.preventDefault(), this.#g());
+  #et(t) {
+    (this.#l?.handleKeyboardEvent(t) ?? !1) && (t.preventDefault(), this.#c());
   }
-}, le = Rt(({ className: t, style: e, ...i }, r) => {
-  const s = N(null), n = N(null), o = N(i);
-  return o.current = i, Dt(r, () => ({ resetChartView() {
+}, he = Rt(({ className: t, style: e, ...i }, s) => {
+  const r = N(null), n = N(null), o = N(i);
+  return o.current = i, Dt(s, () => ({ resetChartView() {
     n.current?.resetChartView();
-  } })), rt(() => {
-    const a = s.current;
+  } })), st(() => {
+    const a = r.current;
     if (!a) return;
-    const l = new ne(a, o.current);
+    const l = new oe(a, o.current);
     return n.current = l, () => {
       l.destroy(), n.current = null;
     };
-  }, []), rt(() => {
+  }, []), st(() => {
     n.current?.updateProps(o.current);
   }, [i]), /* @__PURE__ */ At("div", {
-    ref: s,
+    ref: r,
     className: t,
     style: {
       width: "100%",
@@ -3496,5 +3524,5 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
 });
 export {
   c as CHART_CONFIG,
-  le as TradingReload
+  he as TradingReload
 };