@pradeepjadhav/trading-reload-chart 1.0.2 → 1.0.4

package/dist/trading-reload-chart.js

@@ -1,5 +1,5 @@
-import { forwardRef as Mt, useEffect as tt, useImperativeHandle as Rt, useRef as z } from "react";
-import { jsx as Wt } from "react/jsx-runtime";
+import { forwardRef as Rt, useEffect as rt, useImperativeHandle as Dt, useRef as N } from "react";
+import { jsx as At } from "react/jsx-runtime";
 var h = {
   primary: "#7959F7",
   blue: "#2962FF",
@@ -18,61 +18,43 @@ var h = {
   axisYTick: "rgba(255, 255, 255, 0.40)",
   divider: "rgba(255,255,255,0.12)",
   crosshairLabelBackground: "#494949"
-}, f = {
+}, y = {
   ...h,
   gray: "#808080",
   orange: "#ff9500",
-  purple: "#af52de",
-  handleBorder: h.blue,
-  handleFill: h.background
-}, et = {
+  purple: "#af52de"
+}, st = {
   defaultWidthCandles: 10,
   defaultStopLossPercent: 0.1,
   defaultRiskRewardRatio: 1.5,
-  profitFillColor: f.green,
+  profitFillColor: y.green,
   profitFillOpacity: 0.18,
-  lossFillColor: f.red,
+  lossFillColor: y.red,
   lossFillOpacity: 0.18,
-  borderColor: f.gray,
+  borderColor: y.gray,
   borderOpacity: 0,
   borderWidth: 1,
   borderStyle: "solid",
-  midLineColor: f.gray,
+  midLineColor: y.gray,
   midLineOpacity: 0.9,
   midLineWidth: 0.5,
-  midLineStyle: "solid",
-  handleColor: f.handleFill,
-  handleBorderColor: f.handleBorder,
-  handleBorderThickness: 1.5,
-  handleRadius: 5,
-  hoverLineWidth: 2,
-  selectedLineWidth: 2
-}, Dt = {
+  midLineStyle: "solid"
+}, Xt = {
   trendline: {
     lineWidth: 1,
-    lineColor: f.blue,
+    lineColor: y.blue,
     lineOpacity: 1,
     lineStyle: "solid",
-    fillColor: f.blue,
-    fillOpacity: 0,
-    handleColor: f.handleFill,
-    handleBorderColor: f.handleBorder,
-    handleRadius: 5,
-    hoverLineWidth: 1,
-    selectedLineWidth: 1.1
+    fillColor: y.blue,
+    fillOpacity: 0
   },
   rectangle: {
     lineWidth: 1,
-    lineColor: f.purple,
+    lineColor: y.purple,
     lineOpacity: 0.6,
     lineStyle: "solid",
-    fillColor: f.purple,
+    fillColor: y.purple,
     fillOpacity: 0.06,
-    handleColor: f.handleFill,
-    handleBorderColor: f.handleBorder,
-    handleRadius: 5,
-    hoverLineWidth: 1,
-    selectedLineWidth: 1.1,
     textColor: h.white,
     textOpacity: 1,
     textFontFamily: "Arial",
@@ -80,23 +62,18 @@ var h = {
   },
   path: {
     lineWidth: 1,
-    lineColor: f.yellow,
+    lineColor: y.yellow,
     lineOpacity: 0.8,
     lineStyle: "solid",
-    fillColor: f.yellow,
-    fillOpacity: 0,
-    handleColor: f.handleFill,
-    handleBorderColor: f.handleBorder,
-    handleRadius: 5,
-    hoverLineWidth: 1,
-    selectedLineWidth: 1.1
+    fillColor: y.yellow,
+    fillOpacity: 0
   },
   fibRetracement: {
     levels: [
       {
         level: 1,
         label: "1",
-        color: f.gray,
+        color: y.gray,
         opacity: 0.5,
         lineWidth: 1,
         lineStyle: "dashed"
@@ -104,7 +81,7 @@ var h = {
       {
         level: 0.72,
         label: "0.720",
-        color: f.red,
+        color: y.red,
         opacity: 0.5,
         lineWidth: 1,
         lineStyle: "dashed"
@@ -112,7 +89,7 @@ var h = {
       {
         level: 0.618,
         label: "0.618",
-        color: f.orange,
+        color: y.orange,
         opacity: 0.5,
         lineWidth: 1,
         lineStyle: "dashed"
@@ -120,7 +97,7 @@ var h = {
       {
         level: 0.5,
         label: "0.5",
-        color: f.purple,
+        color: y.purple,
         opacity: 0.5,
         lineWidth: 1,
         lineStyle: "dashed"
@@ -128,22 +105,17 @@ var h = {
       {
         level: 0,
         label: "0",
-        color: f.gray,
+        color: y.gray,
         opacity: 0.5,
         lineWidth: 1,
         lineStyle: "dashed"
       }
     ],
-    fillColor: f.gray,
-    fillOpacity: 0,
-    handleColor: f.handleFill,
-    handleBorderColor: f.handleBorder,
-    handleRadius: 5,
-    hoverLineWidth: 1,
-    selectedLineWidth: 1
+    fillColor: y.gray,
+    fillOpacity: 0
   },
-  longPosition: { ...et },
-  shortPosition: { ...et },
+  longPosition: { ...st },
+  shortPosition: { ...st },
   previousDayHighLow: {
     line: {
       color: h.red,
@@ -157,12 +129,12 @@ var h = {
       paddingX: 6
     }
   }
-}, A = { default: "12px Arial" }, it = {
+}, X = { default: "12px Arial" }, nt = {
   width: 1,
   opacity: 0.9,
   style: "dashed",
   dash: [4, 4]
-}, N = {
+}, _ = {
   width: 1,
   opacity: 0.9,
   style: "dotted",
@@ -187,7 +159,7 @@ var h = {
   showVolumeSection: !0,
   showPnlSection: !0,
   showCloseSection: !0
-}, rt = {
+}, ot = {
   width: 32,
   height: 22,
   gapFromStartPriceHandle: 6,
@@ -200,8 +172,8 @@ var h = {
   backgroundOpacity: 0.1,
   textColor: h.white,
   textOpacity: 0.6,
-  font: A.default
-}, st = {
+  font: X.default
+}, at = {
   height: 22,
   widthPNL: 80,
   position: {
@@ -216,7 +188,7 @@ var h = {
   paddingX: 10,
   textColor: h.white,
   textOpacity: 0.85,
-  font: A.default
+  font: X.default
 }, c = {
   zoom: {
     x: {
@@ -275,7 +247,7 @@ var h = {
       borderColor: h.axisBorder,
       borderWidth: 1,
       textColor: h.axisText,
-      font: A.default,
+      font: X.default,
       textAlign: "center",
       tickColor: h.axisTick,
       tickWidth: 1,
@@ -287,7 +259,7 @@ var h = {
         borderColor: h.crosshairLabelBackground,
         borderWidth: 1,
         textColor: h.white,
-        font: A.default,
+        font: X.default,
         paddingX: 8,
         height: 26
       }
@@ -298,7 +270,7 @@ var h = {
       borderColor: h.axisBorder,
       borderWidth: 1,
       textColor: h.axisText,
-      font: A.default,
+      font: X.default,
       textAlign: "left",
       tickCount: 12,
       tickColor: h.axisYTick,
@@ -311,14 +283,14 @@ var h = {
         borderColor: h.crosshairLabelBackground,
         borderWidth: 1,
         textColor: h.white,
-        font: A.default,
+        font: X.default,
         paddingX: 8,
         height: 20
       }
     }
   },
   tradeHandles: {
-    font: A.default,
+    font: X.default,
     textColor: h.white,
     textOpacity: 0.8,
     pnlTextColors: {
@@ -335,7 +307,7 @@ var h = {
         showVolumeSection: !1
       },
       handleLine: {
-        ...it,
+        ...nt,
         color: h.red
       }
     },
@@ -349,7 +321,7 @@ var h = {
         showVolumeSection: !1
       },
       handleLine: {
-        ...it,
+        ...nt,
         color: h.green
       }
     },
@@ -366,40 +338,40 @@ var h = {
       visible: !0,
       dragActivationThresholdPx: 2,
       slHandle: {
-        ...rt,
+        ...ot,
         borderColor: h.red,
         backgroundColor: h.slBackground,
         textColor: h.red
       },
       tpHandle: {
-        ...rt,
+        ...ot,
         borderColor: h.green,
         backgroundColor: h.tpBackground,
         textColor: h.green
       },
       temporarySlHandle: {
-        ...st,
+        ...at,
         borderColor: h.red,
         backgroundColor: h.slBackground,
         textColor: h.red
       },
       temporaryTpHandle: {
-        ...st,
+        ...at,
         borderColor: h.green,
         backgroundColor: h.tpBackground,
         textColor: h.green
       },
       temporarySlLine: {
-        ...N,
+        ..._,
         color: h.red
       },
       temporaryTpLine: {
-        ...N,
+        ..._,
         color: h.green
       }
     }
   },
-  pastTradeIndicators: {
+  closedTradeIndicators: {
     visible: !0,
     arrow: {
       visible: !0,
@@ -415,7 +387,7 @@ var h = {
       opacity: 1
     },
     connectorLine: {
-      ...N,
+      ..._,
       color: h.white,
       opacity: 0.65
     }
@@ -425,8 +397,8 @@ var h = {
     bearish: h.red,
     background: h.background
   },
-  shapes: Dt
-}, nt = [
+  shapes: Xt
+}, lt = [
   300 * 1e3,
   900 * 1e3,
   1800 * 1e3,
@@ -436,27 +408,27 @@ var h = {
   360 * 60 * 1e3,
   720 * 60 * 1e3,
   1440 * 60 * 1e3
-], Bt = (t) => {
+], It = (t) => {
   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)];
-}, Xt = ({ candleSpacing: t, candleTimeframeMs: e, labelWidth: i, minLabelGap: r }) => {
-  if (t <= 0 || e <= 0) return nt[0];
+}, Bt = ({ candleSpacing: t, candleTimeframeMs: e, labelWidth: i, minLabelGap: r }) => {
+  if (t <= 0 || e <= 0) return lt[0];
   const s = i + r;
-  for (const o of nt) if (o / e * t >= s) return o;
-  const n = 1440 * 60 * 1e3, a = n / e * t;
-  return n * Math.ceil(s / a);
-}, At = (t, e) => {
+  for (const a of lt) if (a / e * t >= s) return a;
+  const n = 1440 * 60 * 1e3, o = n / e * t;
+  return n * Math.ceil(s / 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;
-}, It = (t) => {
+}, 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")}`;
-}, Ft = (t) => {
+}, 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")}`;
-}, Yt = class {
+}, Ot = class {
   #t;
   #e;
   candles;
@@ -489,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 = Ft(this.crosshair.candle.time);
+    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, a = r.height, o = this.getCrosshairLabelX(n, e), l = Math.max(0, (i - a) / 2);
-    t.fillStyle = r.backgroundColor, t.fillRect(o, l, n, a), t.strokeStyle = r.borderColor, t.lineWidth = r.borderWidth, t.strokeRect(o, l, n, a), t.fillStyle = r.textColor, t.textAlign = "center", t.textBaseline = "middle", t.fillText(s, o + n / 2, l + a / 2), t.restore();
+    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();
   }
   clearCanvas() {
     this.#e.clearRect(0, 0, this.#t.width, this.#t.height);
@@ -507,18 +479,18 @@ var h = {
   }
   drawAxisLabels() {
     if (!this.viewport) return;
-    const t = this.#e, e = c.axis.axisX, i = this.#t.width, r = Bt(this.candles);
+    const t = this.#e, e = c.axis.axisX, i = this.#t.width, r = 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 = Xt({
+    const s = t.measureText("00:00").width, n = Bt({
       candleSpacing: this.viewport.candleSpacing,
       candleTimeframeMs: r,
       labelWidth: s,
       minLabelGap: e.minLabelGap
-    }), { startIndex: a, endIndex: o } = this.getVisibleCandleIndexRange(i);
-    for (let l = a; l <= o; l += 1) {
+    }), { startIndex: o, endIndex: a } = this.getVisibleCandleIndexRange(i);
+    for (let l = o; l <= a; l += 1) {
       const d = this.getSlotTime(l, r);
-      if (d === null || !At(d, n)) continue;
-      const u = this.getCandleCenterX(l), g = It(d), m = t.measureText(g).width;
+      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));
     }
     t.restore();
@@ -563,7 +535,7 @@ var h = {
   getCrosshairLabelX(t, e) {
     return Math.max(120, Math.min(e - t, this.crosshair.x - t / 2));
   }
-}, p = (t, e = 5) => Number(t.toFixed(e)), Y = ({ price: t, minPrice: e, priceRange: i, chartHeight: r }) => r - (t - e) / i * r, ft = ({ y: t, minPrice: e, priceRange: i, chartHeight: r }) => e + (1 - t / r) * i, Ot = ({ priceRange: t, canvasHeight: e }) => {
+}, 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 [
     1,
@@ -604,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, a = this.getCrosshairLabelY(n, i);
-    t.save(), t.fillStyle = r.backgroundColor, t.fillRect(0, a, e, n), t.strokeStyle = r.borderColor, t.lineWidth = r.borderWidth, t.strokeRect(0, a, e, n), t.font = r.font, t.fillStyle = r.textColor, t.textAlign = "left", t.textBaseline = "middle", t.fillText(s, r.paddingX, a + n / 2), t.restore();
+    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();
   }
   clearCanvas() {
     this.#e.clearRect(0, 0, this.#t.width, this.#t.height);
@@ -620,15 +592,15 @@ var h = {
   }
   drawPriceLabels() {
     if (!this.viewport) return;
-    const t = this.#e, e = this.#t.height, i = c.axis.axisY, r = Ot({
+    const t = this.#e, e = this.#t.height, i = c.axis.axisY, r = 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 a = s; a <= n; a += r) {
-      const o = this.getPriceY(a, e);
-      this.isPriceOutsideCanvas(o, e) || (this.drawTick(o), this.drawPriceLabel(a, o));
+    for (let o = s; o <= n; o += r) {
+      const a = this.getPriceY(o, e);
+      this.isPriceOutsideCanvas(a, e) || (this.drawTick(a), this.drawPriceLabel(o, a));
     }
     t.restore();
   }
@@ -642,7 +614,7 @@ var h = {
     };
   }
   getPriceY(t, e) {
-    return this.viewport ? Y({
+    return this.viewport ? O({
       price: t,
       minPrice: this.viewport.minPrice,
       priceRange: this.viewport.priceRange,
@@ -663,7 +635,7 @@ var h = {
   getCrosshairLabelY(t, e) {
     return Math.max(0, Math.min(e - t, this.crosshair.y - t / 2));
   }
-}, Et = class {
+}, zt = class {
   #t;
   #e;
   mouseX = 0;
@@ -740,7 +712,7 @@ var h = {
   drawLine({ ctx: t, fromX: e, fromY: i, toX: r, toY: s }) {
     t.beginPath(), t.moveTo(e, i), t.lineTo(r, s), t.stroke();
   }
-}, F = 60 * 1e3, pt = 60 * F, zt = 24 * pt, Nt = class {
+}, F = 60 * 1e3, Ct = 60 * F, Nt = 24 * Ct, _t = class {
   #t;
   #e;
   candles;
@@ -834,7 +806,7 @@ var h = {
     return this.getCandleCenterX(e);
   }
   getPriceAtY(t) {
-    return p(ft({
+    return p(mt({
       y: t,
       minPrice: this.minPrice,
       priceRange: this.priceRange,
@@ -868,34 +840,34 @@ var h = {
       startIndex: r,
       chartHeight: i
     });
-    const a = {
+    const o = {
       ctx: t,
       chartWidth: e,
       chartHeight: i
     };
-    this.drawAskPriceLine(a), this.drawBidPriceLine(a);
+    this.drawAskPriceLine(o), this.drawBidPriceLine(o);
   }
   drawCandles({ ctx: t, candles: e, startIndex: i, chartHeight: r }) {
     e.forEach((s, n) => {
-      const a = i + n, o = this.getCandleX(a), l = this.getCandleColor(s), d = this.getCandleYCoordinates(s, r);
+      const o = i + n, a = this.getCandleX(o), l = this.getCandleColor(s), d = this.getCandleYCoordinates(s, r);
       this.drawSingleCandle({
         ctx: t,
-        candleX: o,
+        candleX: a,
         candleColor: l,
         ...d
       });
     });
   }
-  drawSingleCandle({ ctx: t, candleX: e, openY: i, closeY: r, highY: s, lowY: n, candleColor: a }) {
-    t.strokeStyle = a, t.fillStyle = a;
-    const o = e + this.candleWidth / 2;
-    t.beginPath(), t.moveTo(o, s), t.lineTo(o, n), t.stroke();
+  drawSingleCandle({ ctx: t, candleX: e, openY: i, closeY: r, highY: s, 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.fillRect(e, l, this.candleWidth, d);
   }
-  drawPriceLine({ ctx: t, chartWidth: e, chartHeight: i, price: r, color: s, opacity: n, lineWidth: a, dash: o }) {
+  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 = a, t.setLineDash(o), t.beginPath(), t.moveTo(0, l), t.lineTo(e, l), t.stroke(), t.restore();
+    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();
   }
   drawBidPriceLine({ ctx: t, chartWidth: e, chartHeight: i }) {
     const r = this.candles.at(-1);
@@ -958,7 +930,7 @@ var h = {
   }
   getInitialFallbackPercent() {
     const t = this.detectCandleTimeframeMs();
-    return t <= F ? 25e-4 : t <= 5 * F ? 35e-4 : t <= 15 * F ? 5e-3 : t <= pt ? 75e-4 : (t < zt, 0.01);
+    return t <= F ? 25e-4 : t <= 5 * F ? 35e-4 : t <= 15 * F ? 5e-3 : t <= Ct ? 75e-4 : (t < Nt, 0.01);
   }
   detectCandleTimeframeMs() {
     if (this.candles.length < 2) return 15 * F;
@@ -989,8 +961,8 @@ var h = {
     return Math.max(i, Math.min(s, r));
   }
   getNextVerticalPriceRange(t) {
-    const { speed: e, min: i, max: r } = c.zoom.y, s = 1 - t * e, n = this.priceRange * s, a = this.initialPriceRange * (i / 100), o = this.initialPriceRange * (r / 100);
-    return Math.max(a, Math.min(n, o));
+    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);
+    return Math.max(o, Math.min(n, a));
   }
   clearCanvas(t, e, i) {
     t.clearRect(0, 0, e, i);
@@ -1007,7 +979,7 @@ var h = {
     };
   }
   getPriceY(t, e) {
-    return Y({
+    return O({
       price: t,
       minPrice: this.minPrice,
       priceRange: this.priceRange,
@@ -1044,29 +1016,29 @@ var h = {
   }
   #c(t, e) {
     if (!this.#r || !this.#e) return;
-    const i = this.#t, r = i.canvas, s = Y({
+    const i = this.#t, r = i.canvas, s = O({
       price: t,
       minPrice: this.#r.minPrice,
       priceRange: this.#r.priceRange,
       chartHeight: r.height
     });
     if (s < 0 || s > r.height) return;
-    const { line: n, text: a } = this.#e, o = r.width;
-    i.save(), i.font = a.font;
-    const l = i.measureText(e).width, d = o / 2, u = l / 2 + a.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(o, s), i.stroke(), i.setLineDash([]), i.globalAlpha = 1, i.fillStyle = a.color, i.textAlign = "center", i.textBaseline = "middle", i.fillText(e, d, s), i.restore();
+    const { line: n, text: o } = this.#e, a = r.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();
   }
-}, mt = (t, e) => {
+}, vt = (t, e) => {
   const i = t.getBoundingClientRect(), r = t.width / i.width, s = t.height / i.height;
   return {
     x: (e.clientX - i.left) * r,
     y: (e.clientY - i.top) * s
   };
 };
-var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `shape-${Date.now()}-${Math.random().toString(16).slice(2)}`, at = (t, e) => mt(t, e), ot = (t, e) => ({
+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) => ({
   time: e.getNearestCandleTimeForX(t.x),
   price: e.getPriceForY(t.y)
-}), v = (t, e) => ({
+}), C = (t, e) => ({
   x: e.getXForTime(t.time),
   y: e.getYForPrice(t.price)
 }), Ut = (t, e) => {
@@ -1079,22 +1051,22 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     width: r - i,
     height: n - s
   };
-}, _ = (t, e, i) => Ut(v(t, i), v(e, i)), $ = (t, e) => {
+}, 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);
-}, Ct = (t, e, i) => {
+}, yt = (t, e, i) => {
   const r = i.x - e.x, s = i.y - e.y, n = r * r + s * s;
-  if (n === 0) return $(t, e);
-  const a = Math.max(0, Math.min(1, ((t.x - e.x) * r + (t.y - e.y) * s) / n));
-  return $(t, {
-    x: e.x + a * r,
-    y: e.y + a * s
+  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));
+  return K(t, {
+    x: e.x + o * r,
+    y: e.y + o * s
   });
-}, vt = (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 (!vt(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, a = Math.abs(t.y - e.bottom) <= i, o = 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 || a) && o;
-}, b = ({ shapeId: t, type: e, point: i, radius: r = 5, cursor: s, index: n }) => ({
+}, 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 }) => ({
   shapeId: t,
   type: e,
   x: i.x,
@@ -1102,11 +1074,11 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   radius: r,
   cursor: s,
   index: n
-}), J = (t, e) => $(t, e) <= e.radius + 2, E = (t, e = 1) => t === "dashed" ? [e * 6, e * 4] : t === "dotted" ? [e, e * 3] : [], K = (t, e, i) => {
-  t.strokeStyle = P(e.lineColor, e.lineOpacity), t.lineWidth = i ?? e.lineWidth, t.setLineDash(E(e.lineStyle, t.lineWidth));
-}, yt = (t, e, i) => !e || i === void 0 || i <= 0 ? !1 : (t.fillStyle = P(e, i), !0), O = (t) => {
+}), 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));
+}, Pt = (t, e, i) => !e || i === void 0 || i <= 0 ? !1 : (t.fillStyle = P(e, i), !0), E = (t) => {
   t.setLineDash([]);
-}, $t = (t, e, i = {
+}, Jt = (t, e, i = {
   fillColor: "#ffffff",
   borderColor: "#2962ff",
   borderThickness: 3
@@ -1114,15 +1086,15 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   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) => {
-    $t(t, r, i);
+    Jt(t, r, 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("#") ? Jt(t, i) : t;
-}, Jt = (t, e) => {
+  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})`;
-}, jt = (t, e, i) => Math.min(i, Math.max(e, t)), lt = (t, e, i) => e + (t - e) * i, j = (t, 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) {
@@ -1130,7 +1102,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     n < r && (r = n, i = s);
   }
   return i;
-}, Pt = (t) => {
+}, q = (t) => {
   if (t.length < 2) return 900 * 1e3;
   const e = [];
   for (let i = 1; i < t.length; i += 1) {
@@ -1138,10 +1110,15 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     r > 0 && e.push(r);
   }
   return e.length === 0 ? 900 * 1e3 : e.reduce((i, r) => i + r, 0) / e.length;
-}, Kt = (t, e, i) => {
-  const r = j(t, e), s = r + i;
-  return r >= 0 && s >= 0 && s < t.length ? t[s].time : e + Pt(t) * i;
-}, ht = (t) => t instanceof MouseEvent && t.type === "contextmenu" ? !1 : "button" in t && t.type === "pointerdown" ? t.button === 0 : !0, S = class D {
+}, 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;
+}, 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,
+  handleBorderThickness: 1.5,
+  handleRadius: 5
+}, L = class I {
   static defaultConfig = {
     levels: [
       {
@@ -1186,29 +1163,23 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       }
     ],
     fillColor: "#808080",
-    fillOpacity: 0.04,
-    handleColor: "#ffffff",
-    handleBorderColor: "#2962ff",
-    handleBorderThickness: 1.5,
-    handleRadius: 5,
-    hoverLineWidth: 2,
-    selectedLineWidth: 2
+    fillOpacity: 0.04
   };
-  static draw({ ctx: e, shape: i, converter: r, config: s = D.defaultConfig, selected: n = !1, hovered: a = !1 }) {
-    const [o, l] = i.vertices, d = v(o, r), u = v(l, r), g = _(o, l, r), m = Math.min(d.x, u.x), w = Math.max(d.x, u.x);
-    e.save(), yt(e, s.fillColor, s.fillOpacity) && e.fillRect(g.left, g.top, g.width, g.height);
-    for (const C of s.levels) {
-      const x = lt(o.price, l.price, C.level), T = r.getYForPrice(x), H = n ? Math.max(C.lineWidth, s.selectedLineWidth) : a ? Math.max(C.lineWidth, s.hoverLineWidth) : C.lineWidth;
-      e.beginPath(), e.strokeStyle = P(C.color, C.opacity), e.lineWidth = H, e.setLineDash(E(C.lineStyle, H)), e.moveTo(m, T), e.lineTo(w, T), e.stroke(), C.label && (e.setLineDash([]), e.fillStyle = P(C.color, C.opacity), e.font = "11px sans-serif", e.textBaseline = "middle", e.fillText(Number(C.label).toFixed(2).toString(), w + 12, T));
+  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));
     }
-    O(e), (n || a) && V(e, D.getHandles(i, r, s), {
-      fillColor: s.handleColor,
-      borderColor: s.handleBorderColor,
-      borderThickness: s.handleBorderThickness
+    E(e), (n || o) && V(e, I.getHandles(i, r), {
+      fillColor: f.handleColor,
+      borderColor: f.handleBorderColor,
+      borderThickness: f.handleBorderThickness
     }), e.restore();
   }
-  static drawDraft({ ctx: e, vertices: i, converter: r, config: s = D.defaultConfig }) {
-    D.draw({
+  static drawDraft({ ctx: e, vertices: i, converter: r, config: s = I.defaultConfig }) {
+    I.draw({
       ctx: e,
       shape: {
         id: "__draft_fib_retracement__",
@@ -1220,28 +1191,28 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       selected: !0
     });
   }
-  static getHandles(e, i, r = D.defaultConfig) {
-    const [s, n] = e.vertices, a = v(s, i), o = v(n, i);
-    return [b({
+  static getHandles(e, i) {
+    const [r, s] = e.vertices, n = C(r, i), o = C(s, i);
+    return [x({
       shapeId: e.id,
       type: "start",
-      point: a,
-      radius: r.handleRadius,
+      point: n,
+      radius: f.handleRadius,
       cursor: "grab"
-    }), b({
+    }), x({
       shapeId: e.id,
       type: "end",
       point: o,
-      radius: r.handleRadius,
+      radius: f.handleRadius,
       cursor: "grab"
     })];
   }
-  static hitTest({ point: e, shape: i, converter: r, tolerance: s = 8, config: n = D.defaultConfig }) {
-    const [a, o] = i.vertices, l = v(a, r), d = v(o, r), u = Math.min(l.x, d.x), g = Math.max(l.x, d.x);
+  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;
     for (const m of n.levels) {
-      const w = lt(a.price, o.price, m.level), C = r.getYForPrice(w);
-      if (Math.abs(e.y - C) <= s) return !0;
+      const b = dt(o.price, a.price, m.level), v = r.getYForPrice(b);
+      if (Math.abs(e.y - v) <= s) return !0;
     }
     return !1;
   }
@@ -1266,29 +1237,23 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       vertices: [e.vertices[0], r]
     } : e;
   }
-}, k = class I {
+}, M = class Y {
   static defaultConfig = {
     lineWidth: 2,
     lineColor: "#2962ff",
     lineOpacity: 1,
-    lineStyle: "solid",
-    handleColor: "#ffffff",
-    handleBorderColor: "#2962ff",
-    handleBorderThickness: 1.5,
-    handleRadius: 5,
-    hoverLineWidth: 3,
-    selectedLineWidth: 3
+    lineStyle: "solid"
   };
-  static draw({ ctx: e, shape: i, converter: r, config: s = I.defaultConfig, selected: n = !1, hovered: a = !1 }) {
-    const [o, l] = i.vertices, d = v(o, r), u = v(l, r);
-    e.save(), K(e, s, n ? s.selectedLineWidth : a ? s.hoverLineWidth : void 0), e.beginPath(), e.moveTo(d.x, d.y), e.lineTo(u.x, u.y), e.stroke(), O(e), (n || a) && V(e, I.getHandles(i, r, s), {
-      fillColor: s.handleColor,
-      borderColor: s.handleBorderColor,
-      borderThickness: s.handleBorderThickness
+  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), {
+      fillColor: f.handleColor,
+      borderColor: f.handleBorderColor,
+      borderThickness: f.handleBorderThickness
     }), e.restore();
   }
-  static drawDraft({ ctx: e, vertices: i, converter: r, config: s = I.defaultConfig }) {
-    I.draw({
+  static drawDraft({ ctx: e, vertices: i, converter: r, config: s = Y.defaultConfig }) {
+    Y.draw({
       ctx: e,
       shape: {
         id: "__draft_trendline__",
@@ -1300,25 +1265,25 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       selected: !0
     });
   }
-  static getHandles(e, i, r = I.defaultConfig) {
-    const [s, n] = e.vertices, a = v(s, i), o = v(n, i);
-    return [b({
+  static getHandles(e, i) {
+    const [r, s] = e.vertices, n = C(r, i), o = C(s, i);
+    return [x({
       shapeId: e.id,
       type: "start",
-      point: a,
-      radius: r.handleRadius,
+      point: n,
+      radius: f.handleRadius,
       cursor: "grab"
-    }), b({
+    }), x({
       shapeId: e.id,
       type: "end",
       point: o,
-      radius: r.handleRadius,
+      radius: f.handleRadius,
       cursor: "grab"
     })];
   }
   static hitTest({ point: e, shape: i, converter: r, tolerance: s = 8 }) {
-    const [n, a] = i.vertices;
-    return Ct(e, v(n, r), v(a, r)) <= s;
+    const [n, o] = i.vertices;
+    return yt(e, C(n, r), C(o, r)) <= s;
   }
   static move(e, i) {
     return {
@@ -1341,71 +1306,65 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       vertices: [e.vertices[0], r]
     } : e;
   }
-}, M = class B {
+}, R = class B {
   static defaultConfig = {
     lineWidth: 2,
     lineColor: "#2962ff",
     lineOpacity: 1,
     lineStyle: "solid",
     fillColor: "#2962ff",
-    fillOpacity: 0,
-    handleColor: "#ffffff",
-    handleBorderColor: "#2962ff",
-    handleBorderThickness: 1.5,
-    handleRadius: 5,
-    hoverLineWidth: 3,
-    selectedLineWidth: 3
+    fillOpacity: 0
   };
-  static draw({ ctx: e, shape: i, converter: r, config: s = B.defaultConfig, selected: n = !1, hovered: a = !1 }) {
-    const o = i.vertices.map((l) => v(l, r));
-    if (o.length !== 0) {
-      e.save(), K(e, s, n ? s.selectedLineWidth : a ? s.hoverLineWidth : void 0), e.beginPath(), e.moveTo(o[0].x, o[0].y);
-      for (let l = 1; l < o.length; l += 1) e.lineTo(o[l].x, o[l].y);
-      e.stroke(), O(e), o.length >= 2 && B.drawEndArrow({
+  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));
+    if (a.length !== 0) {
+      e.save(), Q(e, s), 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: o[o.length - 2],
-        endPoint: o[o.length - 1],
+        previousPoint: a[a.length - 2],
+        endPoint: a[a.length - 1],
         color: s.lineColor,
         opacity: s.lineOpacity,
-        lineWidth: n ? s.selectedLineWidth ?? s.lineWidth : a ? s.hoverLineWidth ?? s.lineWidth : s.lineWidth
-      }), (n || a) && V(e, B.getHandles(i, r, s), {
-        fillColor: s.handleColor,
-        borderColor: s.handleBorderColor,
-        borderThickness: s.handleBorderThickness
+        lineWidth: s.lineWidth
+      }), (n || o) && V(e, B.getHandles(i, r), {
+        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 a = r ? [...i, r] : i;
+    const o = r ? [...i, r] : i;
     B.draw({
       ctx: e,
       shape: {
         id: "__draft_path__",
         type: "path",
-        vertices: a
+        vertices: o
       },
       converter: s,
       config: n,
       selected: !0
     });
   }
-  static getHandles(e, i, r = B.defaultConfig) {
-    return e.vertices.map((s, n) => b({
+  static getHandles(e, i) {
+    return e.vertices.map((r, s) => x({
       shapeId: e.id,
-      type: n === 0 ? "start" : n === e.vertices.length - 1 ? "end" : "move",
-      point: v(s, i),
-      radius: r.handleRadius,
+      type: s === 0 ? "start" : s === e.vertices.length - 1 ? "end" : "move",
+      point: C(r, i),
+      radius: f.handleRadius,
       cursor: "grab",
-      index: n
+      index: s
     }));
   }
   static hitTest({ point: e, shape: i, converter: r, tolerance: s = 8 }) {
-    const n = i.vertices.map((a) => v(a, r));
+    const n = i.vertices.map((o) => C(o, r));
     if (n.length === 1) {
-      const a = n[0], o = e.x - a.x, l = e.y - a.y;
-      return Math.sqrt(o * o + l * l) <= s;
+      const o = n[0], a = e.x - o.x, l = e.y - o.y;
+      return Math.sqrt(a * a + l * l) <= s;
     }
-    for (let a = 1; a < n.length; a += 1) if (Ct(e, n[a - 1], n[a]) <= s) return !0;
+    for (let o = 1; o < n.length; o += 1) if (yt(e, n[o - 1], n[o]) <= s) return !0;
     return !1;
   }
   static move(e, i) {
@@ -1423,11 +1382,11 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       vertices: e.vertices.map((s, n) => n === i ? r : s)
     };
   }
-  static drawEndArrow({ ctx: e, previousPoint: i, endPoint: r, color: s, opacity: n, lineWidth: a }) {
-    const o = 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 = a, e.setLineDash([]), e.moveTo(r.x, r.y), e.lineTo(r.x - l * Math.cos(o - d), r.y - l * Math.sin(o - d)), e.lineTo(r.x - l * Math.cos(o + d), r.y - l * Math.sin(o + d)), e.closePath(), e.fill(), e.stroke(), e.restore();
+  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();
   }
-}, R = class X {
+}, D = class W {
   static defaultConfig = {
     lineWidth: 2,
     lineColor: "#2962ff",
@@ -1435,27 +1394,21 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     lineStyle: "solid",
     fillColor: "#2962ff",
     fillOpacity: 0.12,
-    handleColor: "#ffffff",
-    handleBorderColor: "#2962ff",
-    handleBorderThickness: 1.5,
-    handleRadius: 5,
-    hoverLineWidth: 3,
-    selectedLineWidth: 3,
     textColor: "#ffffff",
     textOpacity: 1,
     textFontFamily: "Arial",
     textFontSize: 20
   };
-  static draw({ ctx: e, shape: i, converter: r, config: s = X.defaultConfig, selected: n = !1, hovered: a = !1 }) {
-    const [o, l] = i.vertices, d = _(o, l, r);
-    e.save(), yt(e, s.fillColor, s.fillOpacity) && e.fillRect(d.left, d.top, d.width, d.height), K(e, s, n ? s.selectedLineWidth : a ? s.hoverLineWidth : void 0), e.strokeRect(d.left, d.top, d.width, d.height), O(e), X.drawText(e, d, i.text, s), (n || a) && V(e, X.getHandles(i, r, s), {
-      fillColor: s.handleColor,
-      borderColor: s.handleBorderColor,
-      borderThickness: s.handleBorderThickness
+  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), {
+      fillColor: f.handleColor,
+      borderColor: f.handleBorderColor,
+      borderThickness: f.handleBorderThickness
     }), e.restore();
   }
-  static drawDraft({ ctx: e, vertices: i, converter: r, config: s = X.defaultConfig }) {
-    X.draw({
+  static drawDraft({ ctx: e, vertices: i, converter: r, config: s = W.defaultConfig }) {
+    W.draw({
       ctx: e,
       shape: {
         id: "__draft_rectangle__",
@@ -1467,25 +1420,25 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       selected: !0
     });
   }
-  static getHandles(e, i, r = X.defaultConfig) {
-    const [s, n] = e.vertices, a = v(s, i), o = v(n, i), l = a.x <= o.x, d = a.y <= o.y, u = l === d ? "nwse-resize" : "nesw-resize", g = l === d ? "nwse-resize" : "nesw-resize";
-    return [b({
+  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";
+    return [x({
       shapeId: e.id,
       type: "start",
-      point: a,
-      radius: r.handleRadius,
-      cursor: u
-    }), b({
+      point: n,
+      radius: f.handleRadius,
+      cursor: d
+    }), x({
       shapeId: e.id,
       type: "end",
       point: o,
-      radius: r.handleRadius,
-      cursor: g
+      radius: f.handleRadius,
+      cursor: u
     })];
   }
   static hitTest({ point: e, shape: i, converter: r, tolerance: s = 8 }) {
-    const [n, a] = i.vertices;
-    return _t(e, _(n, a, r), s);
+    const [n, o] = i.vertices;
+    return $t(e, J(n, o, r), s);
   }
   static move(e, i) {
     return {
@@ -1512,22 +1465,22 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     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());
   }
-}, wt = [
+}, bt = [
   "USDJPY",
   "GBPJPY",
   "AUDJPY",
   "EURJPY",
   "NZDJPY",
   "CADJPY"
-], bt = ["BTCUSD", "ETHUSD"], xt = [
+], xt = ["BTCUSD", "ETHUSD"], St = [
   "XAUUSD",
   "USOIL",
   "UKOIL",
   "XAGUSD"
-], Tt = (t) => wt.some((e) => t.includes(e.slice(3))) ? 0.01 : bt.includes(t) ? 1 : xt.includes(t) ? 0.01 : 1e-4, Zt = (t, e) => wt.includes(t) ? e * 6.33806 : bt.includes(t) ? e * 1 : (xt.includes(t), e * 10), dt = (t, e, i, r, s) => {
-  const n = s.split(".")[0], a = Tt(n), o = Zt(n, r);
-  return (t === "buy" ? i - e : e - i) / a * o;
-}, L = class y {
+], 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);
+  return (t === "buy" ? i - e : e - i) / o * a;
+}, H = class w {
   static defaultLongConfig = {
     defaultWidthCandles: 10,
     defaultStopLossPercent: 0.25,
@@ -1543,57 +1496,51 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     midLineColor: "#808080",
     midLineOpacity: 0.9,
     midLineWidth: 1,
-    midLineStyle: "dashed",
-    handleColor: "#ffffff",
-    handleBorderColor: "#2962ff",
-    handleBorderThickness: 1.5,
-    handleRadius: 5,
-    hoverLineWidth: 2,
-    selectedLineWidth: 2
+    midLineStyle: "dashed"
   };
-  static defaultShortConfig = { ...y.defaultLongConfig };
-  static draw({ ctx: e, activeSymbol: i, shape: r, converter: s, config: n = r.type === "longPosition" ? y.defaultLongConfig : y.defaultShortConfig, selected: a = !1, hovered: o = !1 }) {
-    const l = y.getGeometry(r, s);
+  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);
     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 = a ? Math.max(n.borderWidth, n.selectedLineWidth) : o ? Math.max(n.borderWidth, n.hoverLineWidth) : n.borderWidth;
-    e.strokeStyle = P(n.borderColor, n.borderOpacity), e.lineWidth = d, e.setLineDash(E(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(E(n.midLineStyle, n.midLineWidth)), e.moveTo(l.box.left, l.entryY), e.lineTo(l.box.right, l.entryY), e.stroke(), O(e), y.drawLabels({
+    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({
       ctx: e,
       activeSymbol: i,
       shape: r,
       geometry: l,
       config: n
-    }), (a || o) && V(e, y.getHandles(r, s, n), {
-      fillColor: n.handleColor,
-      borderColor: n.handleBorderColor,
-      borderThickness: n.handleBorderThickness
+    }), (o || a) && V(e, w.getHandles(r, s), {
+      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" ? y.defaultLongConfig : y.defaultShortConfig }) {
-    const a = s.getTimeForX(s.getXForTime(r.time) + s.getCandleWidth() * n.defaultWidthCandles), o = n.defaultStopLossPercent;
+  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;
     return {
       id: e,
       type: i,
       entry: r,
-      endTime: a,
-      stopLossPercent: o,
-      takeProfitPercent: o * n.defaultRiskRewardRatio
+      endTime: o,
+      stopLossPercent: a,
+      takeProfitPercent: a * n.defaultRiskRewardRatio
     };
   }
   static getGeometry(e, i) {
-    const r = v(e.entry, i), s = i.getXForTime(e.endTime), n = Math.min(r.x, s), a = Math.max(r.x, s), o = e.type === "longPosition", l = o ? e.takeProfitPercent : e.stopLossPercent, d = o ? e.stopLossPercent : e.takeProfitPercent, u = e.entry.price * (1 + l / 100), g = e.entry.price * (1 - d / 100), m = i.getYForPrice(u), w = i.getYForPrice(g), C = Math.min(m, w, r.y), x = Math.max(m, w, r.y), T = {
+    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 = {
       left: n,
-      top: C,
-      right: a,
+      top: v,
+      right: o,
       bottom: r.y,
-      width: a - n,
-      height: Math.abs(r.y - C)
-    }, H = {
+      width: o - n,
+      height: Math.abs(r.y - v)
+    }, k = {
       left: n,
       top: r.y,
-      right: a,
-      bottom: x,
-      width: a - n,
-      height: Math.abs(x - r.y)
+      right: o,
+      bottom: S,
+      width: o - n,
+      height: Math.abs(S - r.y)
     };
     return {
       entryPoint: r,
@@ -1603,63 +1550,63 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       lowerPrice: g,
       box: {
         left: n,
-        top: C,
-        right: a,
-        bottom: x,
-        width: a - n,
-        height: x - C
+        top: v,
+        right: o,
+        bottom: S,
+        width: o - n,
+        height: S - v
       },
-      profitBox: o ? T : H,
-      lossBox: o ? H : T
+      profitBox: a ? T : k,
+      lossBox: a ? k : T
     };
   }
-  static getHandles(e, i, r) {
-    const s = r ?? (e.type === "longPosition" ? y.defaultLongConfig : y.defaultShortConfig), n = y.getGeometry(e, i);
+  static getHandles(e, i) {
+    const r = w.getGeometry(e, i);
     return [
-      b({
+      x({
         shapeId: e.id,
         type: "upperHeight",
         point: {
-          x: n.box.left,
-          y: n.box.top
+          x: r.box.left,
+          y: r.box.top
         },
-        radius: s.handleRadius,
+        radius: f.handleRadius,
         cursor: "ns-resize"
       }),
-      b({
+      x({
         shapeId: e.id,
         type: "lowerHeight",
         point: {
-          x: n.box.left,
-          y: n.box.bottom
+          x: r.box.left,
+          y: r.box.bottom
         },
-        radius: s.handleRadius,
+        radius: f.handleRadius,
         cursor: "ns-resize"
       }),
-      b({
+      x({
         shapeId: e.id,
         type: "start",
         point: {
-          x: n.entryPoint.x,
-          y: n.entryY
+          x: r.entryPoint.x,
+          y: r.entryY
         },
-        radius: s.handleRadius,
+        radius: f.handleRadius,
         cursor: "ns-resize"
       }),
-      b({
+      x({
         shapeId: e.id,
         type: "end",
         point: {
-          x: n.endX,
-          y: n.entryY
+          x: r.endX,
+          y: r.entryY
         },
-        radius: s.handleRadius,
+        radius: f.handleRadius,
         cursor: "ew-resize"
       })
     ];
   }
-  static hitTest({ point: e, shape: i, converter: r, config: s }) {
-    return y.getHandles(i, r, s).some((n) => J(e, n)) ? !0 : vt(e, y.getGeometry(i, r).box);
+  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 move(e, i) {
     return {
@@ -1681,7 +1628,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     } : i === "end" ? {
       ...e,
       endTime: r.time
-    } : i === "upperHeight" ? y.resizeUpperHeight(e, r.price) : i === "lowerHeight" ? y.resizeLowerHeight(e, r.price) : {
+    } : i === "upperHeight" ? w.resizeUpperHeight(e, r.price) : i === "lowerHeight" ? w.resizeLowerHeight(e, r.price) : {
       ...e,
       endTime: s.getTimeForX(s.getXForTime(e.endTime))
     };
@@ -1708,14 +1655,14 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   static drawLabels({ ctx: e, activeSymbol: i, shape: r, geometry: s, config: n }) {
     e.save(), e.font = "11px sans-serif", e.textBaseline = "middle";
-    const a = r.type, o = Tt(i), l = r.entry.price * (r.takeProfitPercent / 100) / o, d = r.entry.price * (r.stopLossPercent / 100) / o, u = s.box.left + 6, g = l / d;
+    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;
     e.fillStyle = P(n.profitFillColor, 0.95);
-    const m = a === "longPosition" ? s.profitBox.top + s.profitBox.height / 10 : s.profitBox.bottom - s.profitBox.height / 10;
+    const m = o === "longPosition" ? s.profitBox.top + s.profitBox.height / 10 : s.profitBox.bottom - s.profitBox.height / 10;
     e.fillText(`${l.toFixed(2)} (${g.toFixed(2)})`, u, m), e.fillStyle = P(n.lossFillColor, 0.95);
-    const w = a === "shortPosition" ? s.lossBox.top + s.lossBox.height / 10 : s.lossBox.bottom - s.lossBox.height / 10;
-    e.fillText(d.toFixed(1), u, w);
+    const b = o === "shortPosition" ? s.lossBox.top + s.lossBox.height / 10 : s.lossBox.bottom - s.lossBox.height / 10;
+    e.fillText(d.toFixed(1), u, b);
   }
-}, qt = class {
+}, Qt = class {
   canvas;
   ctx;
   activeSymbol;
@@ -1729,15 +1676,18 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   handleHitboxes = [];
   draft = null;
   dragState = null;
+  lastTapTime = 0;
+  lastTapShapeId = null;
   onShapeAdded;
   onShapeModified;
   onShapeSelected;
+  onShapeDoubleClicked;
   onToolChange;
   constructor(t) {
     this.canvas = t.canvas;
     const e = this.canvas.getContext("2d");
     if (!e) throw new Error("Failed to get 2d context for ShapesLayer");
-    this.ctx = e, this.activeSymbol = t.activeSymbol, this.candles = t.candles, this.shapes = t.shapes, this.activeTool = t.activeTool ?? null, this.config = this.mergeConfig(t.config), this.onShapeAdded = t.onShapeAdded, this.onShapeModified = t.onShapeModified, this.onShapeSelected = t.onShapeSelected, this.onToolChange = t.onToolChange;
+    this.ctx = e, this.activeSymbol = t.activeSymbol, this.candles = t.candles, this.shapes = t.shapes, this.activeTool = t.activeTool ?? null, this.config = this.mergeConfig(t.config), this.onShapeAdded = t.onShapeAdded, this.onShapeModified = t.onShapeModified, this.onShapeSelected = t.onShapeSelected, this.onShapeDoubleClicked = t.onShapeDoubleClicked, this.onToolChange = t.onToolChange;
   }
   setCandles(t) {
     this.candles = t;
@@ -1769,23 +1719,55 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     this.drawDraft(t), this.rebuildHandleHitboxes();
   }
   handlePointerEvent(t) {
-    return !this.viewport || this.candles.length === 0 ? !1 : t.type === "contextmenu" ? this.handleContextMenu() : t.type === "pointerdown" || t.type === "mousedown" ? this.handlePointerDown(t) : t.type === "pointermove" || t.type === "mousemove" ? this.handlePointerMove(t) : t.type === "pointerup" || t.type === "mouseup" ? this.handlePointerUp() : !1;
+    return !this.viewport || this.candles.length === 0 ? !1 : t.type === "contextmenu" ? this.handleContextMenu() : t.type === "pointerdown" || t.type === "mousedown" ? this.handlePointerDown(t) : t.type === "pointermove" || t.type === "mousemove" ? this.handlePointerMove(t) : t.type === "pointerup" || t.type === "mouseup" ? this.handlePointerUp() : t.type === "dblclick" ? this.handleDoubleClick(t) : !1;
   }
   handleKeyboardEvent(t) {
-    return t.key === "Escape" && this.draft?.type === "path" ? (this.completePathDraft(), !0) : t.key === "Escape" && this.draft ? (this.draft = null, this.setActiveToolAndEmit(null), !0) : t.key === "Escape" && this.selectedShapeId ? (this.setSelectedShapeId(null), !0) : !1;
+    if (t.key === "Escape" && this.draft?.type === "path")
+      return this.completePathDraft(), !0;
+    if (t.key === "Escape" && this.draft)
+      return this.draft = null, this.setActiveToolAndEmit(null), !0;
+    if (t.key === "Escape" && this.selectedShapeId)
+      return this.setSelectedShapeId(null), !0;
+    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;
+      }
+    }
+    return !1;
+  }
+  getArrowKeyDelta(t) {
+    const e = q(this.candles);
+    if (t === "ArrowLeft") return {
+      time: -e,
+      price: 0
+    };
+    if (t === "ArrowRight") return {
+      time: e,
+      price: 0
+    };
+    const i = this.viewport ? this.viewport.priceRange / this.canvas.height * 10 : 0;
+    return t === "ArrowUp" ? {
+      time: 0,
+      price: i
+    } : {
+      time: 0,
+      price: -i
+    };
   }
   handlePointerDown(t) {
-    const e = at(this.canvas, t), i = ot(e, this.getConverter());
+    const e = $(this.canvas, t), i = ht(e, this.getConverter());
     if (this.activeTool)
-      return ht(t) && this.handleToolPointerDown({
+      return ct(t) && this.handleToolPointerDown({
         point: e,
         vertex: i
       }), !0;
-    if (!ht(t)) return !1;
+    if (!ct(t)) return !1;
     const r = this.findHandleAtPoint(e);
     if (r) {
-      const n = this.shapes.find((a) => a.id === r.shapeId);
-      return n ? (this.setSelectedShapeId(n.id), this.dragState = {
+      const n = this.shapes.find((o) => o.id === r.shapeId);
+      return n ? (this.setSelectedShapeId(n.id), this.checkTouchDoubleTap(n, t), this.dragState = {
         edit: {
           mode: "resize",
           shape: n,
@@ -1800,7 +1782,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     const s = this.findShapeAtPoint(e);
     if (s) {
       const n = this.findHandleAtPointForShape(s, e);
-      return n ? (this.setSelectedShapeId(s.id), this.dragState = {
+      return n ? (this.setSelectedShapeId(s.id), this.checkTouchDoubleTap(s, t), this.dragState = {
         edit: {
           mode: "resize",
           shape: s,
@@ -1810,7 +1792,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
           startVertex: i
         },
         lastModifiedShape: s
-      }, this.canvas.style.cursor = n.cursor ?? "grab", !0) : (this.setSelectedShapeId(s.id), this.hoveredShapeId = s.id, this.dragState = {
+      }, this.canvas.style.cursor = n.cursor ?? "grab", !0) : (this.setSelectedShapeId(s.id), this.checkTouchDoubleTap(s, t), this.hoveredShapeId = s.id, this.dragState = {
         edit: {
           mode: "move",
           shape: s,
@@ -1823,7 +1805,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     return this.setSelectedShapeId(null), this.hoveredShapeId = null, this.canvas.style.cursor = "crosshair", !1;
   }
   handlePointerMove(t) {
-    const e = at(this.canvas, t), i = ot(e, this.getConverter());
+    const e = $(this.canvas, t), i = ht(e, this.getConverter());
     if (this.draft)
       return this.updateDraftPreview(i), !0;
     if (this.dragState) {
@@ -1843,6 +1825,16 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     const t = this.dragState.lastModifiedShape;
     return this.dragState = null, this.setSelectedShapeId(t.id), this.emitShapeModified(t), !0;
   }
+  handleDoubleClick(t) {
+    if (!this.onShapeDoubleClicked) return !1;
+    const e = $(this.canvas, t), i = this.findShapeAtPoint(e);
+    return i ? (this.onShapeDoubleClicked(this.createShapeSelectedPayload(i)), !0) : !1;
+  }
+  checkTouchDoubleTap(t, e) {
+    if (!(e instanceof PointerEvent) || e.pointerType !== "touch") return;
+    const i = Date.now();
+    t.id === this.lastTapShapeId && i - this.lastTapTime < 300 && this.onShapeDoubleClicked?.(this.createShapeSelectedPayload(t)), this.lastTapTime = i, this.lastTapShapeId = t.id;
+  }
   handleContextMenu() {
     return this.draft?.type === "path" ? (this.completePathDraft(), !0) : this.activeTool !== null;
   }
@@ -1907,7 +1899,7 @@ 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 = L.createFromVertex({
+    const i = this.getConverter(), r = t === "longPosition" ? this.config.longPosition : this.config.shortPosition, s = H.createFromVertex({
       id: U(),
       type: t,
       entry: e,
@@ -1958,10 +1950,10 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     return this.resizeShape(e.shape, e.handleType, t, e.handleIndex);
   }
   moveShape(t, e) {
-    return t.type === "trendline" ? k.move(t, e) : t.type === "rectangle" ? R.move(t, e) : t.type === "path" ? M.move(t, e) : t.type === "fibRetracement" ? S.move(t, e) : L.move(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" ? k.resize(t, e, i) : t.type === "rectangle" ? R.resize(t, e, i) : t.type === "fibRetracement" ? S.resize(t, e, i) : t.type === "path" ? M.resize(t, r ?? -1, i) : L.resize({
+    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({
       shape: t,
       handleType: e,
       vertex: i,
@@ -1971,7 +1963,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   drawShape({ shape: t, converter: e, selected: i, hovered: r }) {
     if (t.type === "trendline") {
       const n = this.getTrendlineConfig(t);
-      k.draw({
+      M.draw({
         ctx: this.ctx,
         shape: t,
         converter: e,
@@ -1983,7 +1975,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }
     if (t.type === "rectangle") {
       const n = this.getRectangleConfig(t);
-      R.draw({
+      D.draw({
         ctx: this.ctx,
         shape: t,
         converter: e,
@@ -1995,7 +1987,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }
     if (t.type === "path") {
       const n = this.getPathConfig(t);
-      M.draw({
+      R.draw({
         ctx: this.ctx,
         shape: t,
         converter: e,
@@ -2007,7 +1999,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }
     if (t.type === "fibRetracement") {
       const n = this.getFibRetracementConfig(t);
-      S.draw({
+      L.draw({
         ctx: this.ctx,
         shape: t,
         converter: e,
@@ -2018,7 +2010,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       return;
     }
     const s = this.getPositionConfig(t);
-    L.draw({
+    H.draw({
       ctx: this.ctx,
       activeSymbol: this.activeSymbol,
       shape: t,
@@ -2031,7 +2023,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   drawDraft(t) {
     if (this.draft) {
       if (this.draft.type === "trendline") {
-        k.drawDraft({
+        M.drawDraft({
           ctx: this.ctx,
           vertices: this.draft.vertices,
           converter: t,
@@ -2040,7 +2032,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         return;
       }
       if (this.draft.type === "rectangle") {
-        R.drawDraft({
+        D.drawDraft({
           ctx: this.ctx,
           vertices: this.draft.vertices,
           converter: t,
@@ -2049,7 +2041,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         return;
       }
       if (this.draft.type === "fibRetracement") {
-        S.drawDraft({
+        L.drawDraft({
           ctx: this.ctx,
           vertices: this.draft.vertices,
           converter: t,
@@ -2057,7 +2049,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         });
         return;
       }
-      this.draft.type === "path" && M.drawDraft({
+      this.draft.type === "path" && R.drawDraft({
         ctx: this.ctx,
         vertices: this.draft.vertices,
         previewVertex: this.draft.previewVertex,
@@ -2075,18 +2067,18 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     i && e.push(i), r && e.push(r), this.handleHitboxes = e.flatMap((s) => this.getShapeHandles(s, t));
   }
   getShapeHandles(t, e) {
-    return t.type === "trendline" ? k.getHandles(t, e, this.getTrendlineConfig(t)) : t.type === "rectangle" ? R.getHandles(t, e, this.getRectangleConfig(t)) : t.type === "path" ? M.getHandles(t, e, this.getPathConfig(t)) : t.type === "fibRetracement" ? S.getHandles(t, e, this.getFibRetracementConfig(t)) : L.getHandles(t, e, this.getPositionConfig(t));
+    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);
   }
   findHandleAtPoint(t) {
     for (let e = this.handleHitboxes.length - 1; e >= 0; e -= 1) {
       const i = this.handleHitboxes[e];
-      if (J(t, i)) return i;
+      if (j(t, i)) return i;
     }
     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;
+    for (const s of r) if (j(e, s)) return s;
     return null;
   }
   findShapeAtPoint(t) {
@@ -2098,28 +2090,27 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     return null;
   }
   isShapeHit(t, e, i) {
-    return t.type === "trendline" ? k.hitTest({
+    return t.type === "trendline" ? M.hitTest({
       point: e,
       shape: t,
       converter: i
-    }) : t.type === "rectangle" ? R.hitTest({
+    }) : t.type === "rectangle" ? D.hitTest({
       point: e,
       shape: t,
       converter: i
-    }) : t.type === "path" ? M.hitTest({
+    }) : t.type === "path" ? R.hitTest({
       point: e,
       shape: t,
       converter: i
-    }) : t.type === "fibRetracement" ? S.hitTest({
+    }) : t.type === "fibRetracement" ? L.hitTest({
       point: e,
       shape: t,
       converter: i,
       config: this.getFibRetracementConfig(t)
-    }) : L.hitTest({
+    }) : H.hitTest({
       point: e,
       shape: t,
-      converter: i,
-      config: this.getPositionConfig(t)
+      converter: i
     });
   }
   setSelectedShapeId(t) {
@@ -2204,7 +2195,7 @@ 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 = j(this.candles, i);
+        const r = Z(this.candles, i);
         return r >= 0 ? this.candles[r].time : i;
       },
       getCandleWidth: () => t ? this.getCandleStepWidth(t) : 12
@@ -2213,19 +2204,19 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   getXForTime(t) {
     if (!this.viewport || this.candles.length === 0) return 0;
     if (t > this.candles[this.candles.length - 1].time) {
-      const i = Pt(this.candles);
+      const i = q(this.candles);
       return (t - this.candles[0].time) / i * this.viewport.candleSpacing + this.viewport.offsetX + this.viewport.candleWidth / 2;
     }
-    const e = j(this.candles, t);
+    const e = Z(this.candles, t);
     return e < 0 ? 0 : e * this.viewport.candleSpacing + this.viewport.offsetX + this.viewport.candleWidth / 2;
   }
   getTimeForX(t) {
     if (!this.viewport) return Date.now();
     const e = Math.round((t - this.viewport.offsetX - this.viewport.candleWidth / 2) / this.viewport.candleSpacing);
-    return e >= 0 && e < this.candles.length ? this.candles[e].time : this.candles.length === 0 ? Date.now() : Kt(this.candles, this.candles[0].time, e);
+    return e >= 0 && e < this.candles.length ? this.candles[e].time : this.candles.length === 0 ? Date.now() : Zt(this.candles, this.candles[0].time, e);
   }
   getYForPrice(t) {
-    return this.viewport ? Y({
+    return this.viewport ? O({
       price: t,
       minPrice: this.viewport.minPrice,
       priceRange: this.viewport.priceRange,
@@ -2233,7 +2224,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }) : this.canvas.height / 2;
   }
   getPriceForY(t) {
-    return this.viewport ? ft({
+    return this.viewport ? mt({
       y: t,
       minPrice: this.viewport.minPrice,
       priceRange: this.viewport.priceRange,
@@ -2246,38 +2237,38 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   mergeConfig(t) {
     return {
       trendline: {
-        ...k.defaultConfig,
+        ...M.defaultConfig,
         ...t?.trendline ?? {}
       },
       rectangle: {
-        ...R.defaultConfig,
+        ...D.defaultConfig,
         ...t?.rectangle ?? {}
       },
       path: {
-        ...M.defaultConfig,
+        ...R.defaultConfig,
         ...t?.path ?? {}
       },
       fibRetracement: {
-        ...S.defaultConfig,
+        ...L.defaultConfig,
         ...t?.fibRetracement ?? {},
-        levels: t?.fibRetracement?.levels ?? S.defaultConfig.levels
+        levels: t?.fibRetracement?.levels ?? L.defaultConfig.levels
       },
       shortPosition: {
-        ...L.defaultShortConfig,
+        ...H.defaultShortConfig,
         ...t?.shortPosition ?? {}
       },
       longPosition: {
-        ...L.defaultLongConfig,
+        ...H.defaultLongConfig,
         ...t?.longPosition ?? {}
       }
     };
   }
-}, Qt = class {
+}, te = class {
   #t;
   #e;
   isDragging;
   trades = [];
-  pastTrades = [];
+  closedTrades = [];
   candles = [];
   viewport = null;
   liveCandle = null;
@@ -2292,8 +2283,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   setTrades(t) {
     this.trades = t;
   }
-  setPastTrades(t) {
-    this.pastTrades = t;
+  setClosedTrades(t) {
+    this.closedTrades = t;
   }
   setCandles(t) {
     this.candles = t;
@@ -2317,11 +2308,11 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     this.isDragging || this.render();
   }
   render() {
-    this.clearCanvas(), this.resetHitboxes(), this.drawPastTradeIndicators();
+    this.clearCanvas(), this.resetHitboxes(), this.drawClosedTradeIndicators();
     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: a, viewport: o }) => {
+  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;
     return {
       kind: "existingHandle",
@@ -2331,23 +2322,23 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       x: r,
       y: s,
       width: n,
-      height: a,
-      viewport: o,
+      height: o,
+      viewport: a,
       labelArea: {
         x: r,
         y: s,
         width: g,
-        height: a
+        height: o
       },
       closeButtonArea: {
         x: m,
         y: s,
         width: u,
-        height: a
+        height: o
       }
     };
   };
-  createMissingProtectionHitBox = ({ price: t, trade: e, type: i, x: r, y: s, width: n, height: a, viewport: o }) => ({
+  createMissingProtectionHitBox = ({ price: t, trade: e, type: i, x: r, y: s, width: n, height: o, viewport: a }) => ({
     kind: "missingProtectionHandle",
     price: p(t),
     trade: e,
@@ -2355,19 +2346,19 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     x: r,
     y: s,
     width: n,
-    height: a,
-    viewport: o,
+    height: o,
+    viewport: a,
     labelArea: {
       x: r,
       y: s,
       width: n,
-      height: a
+      height: o
     },
     closeButtonArea: {
       x: r + n,
       y: s,
       width: 0,
-      height: a
+      height: o
     }
   });
   drawTrade({ trade: t }) {
@@ -2448,11 +2439,11 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       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();
   }
-  drawHandleSections({ handleType: t, handleX: e, handleY: i, handleWidth: r, handleHeight: s, handleConfig: n, trade: a, y: o }) {
+  drawHandleSections({ handleType: t, handleX: e, handleY: i, handleWidth: r, handleHeight: s, handleConfig: n, trade: o, y: a }) {
     const l = this.#e, d = c.tradeHandles, u = this.getHandleSections({
       handleType: t,
       handleConfig: n,
-      trade: a
+      trade: o
     });
     let g = e;
     l.save(), l.font = d.font, l.textBaseline = "middle", l.globalAlpha = d.textOpacity;
@@ -2460,7 +2451,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       m.visible && (this.drawHandleSectionLabel({
         section: m,
         currentX: g,
-        y: o
+        y: a
       }), g += m.width, g < e + r && this.drawHandleSectionDivider({
         x: g,
         y1: i + 4,
@@ -2473,7 +2464,7 @@ 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 = dt(e.type, e.openPrice, i, e.volume, e.symbol);
+    const r = ut(e.type, e.openPrice, i, e.volume, e.symbol);
     return this.formatPnlLabel(r);
   }
   getHandleWidth(t) {
@@ -2518,18 +2509,18 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   resetHitboxes() {
     this.handleHitboxes = [];
   }
-  drawPastTradeIndicators() {
-    if (!(!c.pastTradeIndicators.visible || !this.viewport || this.candles.length === 0))
-      for (const t of this.pastTrades) {
-        const e = this.getPastTradeIndicatorRenderState(t);
-        e && (this.drawPastTradeConnector(e), this.drawPastTradeArrows(e));
+  drawClosedTradeIndicators() {
+    if (!(!c.closedTradeIndicators.visible || !this.viewport || this.candles.length === 0))
+      for (const t of this.closedTrades) {
+        const e = this.getClosedTradeIndicatorRenderState(t);
+        e && (this.drawClosedTradeConnector(e), this.drawClosedTradeArrows(e));
       }
   }
-  getPastTradeIndicatorRenderState(t) {
+  getClosedTradeIndicatorRenderState(t) {
     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.pastTradeIndicators.arrow, a = n.width, o = n.height;
+    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;
     return {
       trade: t,
       start: {
@@ -2544,12 +2535,12 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         time: t.closeTime,
         price: t.closePrice
       },
-      arrowWidth: a,
-      arrowHeight: o
+      arrowWidth: o,
+      arrowHeight: a
     };
   }
-  drawPastTradeConnector({ start: t, close: e }) {
-    const i = c.pastTradeIndicators.connectorLine;
+  drawClosedTradeConnector({ start: t, close: e }) {
+    const i = c.closedTradeIndicators.connectorLine;
     this.drawConnectorLine({
       x1: t.x,
       y1: t.y,
@@ -2558,32 +2549,32 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       config: i
     });
   }
-  drawPastTradeArrows({ trade: t, start: e, close: i, arrowWidth: r, arrowHeight: s }) {
-    const n = c.pastTradeIndicators.arrow;
+  drawClosedTradeArrows({ trade: t, start: e, close: i, arrowWidth: r, arrowHeight: s }) {
+    const n = c.closedTradeIndicators.arrow;
     if (!n.visible) return;
-    const a = t.type === "buy" ? "sell" : "buy";
-    this.drawPastTradeArrow({
+    const o = t.type === "buy" ? "sell" : "buy";
+    this.drawClosedTradeArrow({
       x: e.x,
       y: e.y,
       type: t.type,
       width: r,
       height: s,
       config: n
-    }), this.drawPastTradeArrow({
+    }), this.drawClosedTradeArrow({
       x: i.x,
       y: i.y,
-      type: a,
+      type: o,
       width: r,
       height: s,
       config: n
     });
   }
-  drawPastTradeArrow({ x: t, y: e, type: i, width: r, height: s, config: n }) {
+  drawClosedTradeArrow({ x: t, y: e, type: i, width: r, height: s, config: n }) {
     if (r <= 0 || s <= 0) return;
-    const a = this.#e, o = i === "buy", l = o ? n.buyColor : n.sellColor, d = o ? n.buyBorderColor : n.sellBorderColor, u = o ? 1 : -1, g = t, m = e, w = t, C = e + u * s, x = s / 2, T = x / Math.SQRT2, H = x / Math.SQRT2, Lt = g - T, Ht = g + T, Z = m + u * H, q = Math.max(1, n.shaftWidthRatio), kt = q + n.borderWidth * 2, Q = () => {
-      a.beginPath(), a.moveTo(w, C), a.lineTo(g, m), a.moveTo(g, m), a.lineTo(Lt, Z), a.moveTo(g, m), a.lineTo(Ht, Z), a.stroke();
+    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 = () => {
+      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();
     };
-    a.save(), a.globalAlpha = n.opacity, a.lineCap = "round", a.lineJoin = "round", a.strokeStyle = d, a.lineWidth = kt, Q(), a.strokeStyle = l, a.lineWidth = q, Q(), a.restore();
+    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;
@@ -2598,9 +2589,9 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       const d = this.candles.length - 1, u = this.getCandleTimeInterval(d), g = (e - r.time) / u;
       return this.getCandleCenterX(d) + g * this.viewport.candleSpacing;
     }
-    const s = this.getFirstCandleIndexAtOrAfterTime(e), n = Math.max(0, s - 1), a = this.candles[n], o = this.candles[s];
-    if (!a || !o || o.time === a.time) return this.getCandleCenterX(n);
-    const l = (e - a.time) / (o.time - a.time);
+    const s = this.getFirstCandleIndexAtOrAfterTime(e), n = Math.max(0, s - 1), o = this.candles[n], a = this.candles[s];
+    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;
   }
   normalizeTimestamp(t) {
@@ -2623,7 +2614,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   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), a = n.handle, o = n.handleLine, l = this.getHandleWidth(a), d = a.height;
+    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;
     return {
       price: t,
       type: e,
@@ -2631,11 +2622,11 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       viewport: r,
       y: s,
       handleStyleConfig: n,
-      handleConfig: a,
-      lineConfig: o,
+      handleConfig: o,
+      lineConfig: a,
       handleX: this.getHandleX({
         handleWidth: l,
-        config: a
+        config: o
       }),
       handleY: s - d / 2,
       handleWidth: l,
@@ -2643,7 +2634,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     };
   }
   getPriceY(t, e) {
-    return Y({
+    return O({
       price: t,
       minPrice: e.minPrice,
       priceRange: e.priceRange,
@@ -2787,12 +2778,12 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     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, a = s.height, o = this.getMissingProtectionHandleX({
+    const s = this.getMissingProtectionHandleConfig(t), n = s.width, o = s.height, a = this.getMissingProtectionHandleX({
       type: t,
       config: s,
       startPriceRenderState: i,
       visibleTypes: r
-    }), l = i.y - a / 2;
+    }), l = i.y - o / 2;
     return {
       price: e.openPrice,
       type: t,
@@ -2800,10 +2791,10 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       viewport: i.viewport,
       y: i.y,
       config: s,
-      handleX: o,
+      handleX: a,
       handleY: l,
       handleWidth: n,
-      handleHeight: a
+      handleHeight: o
     };
   }
   getMissingProtectionHandleX({ type: t, config: e, startPriceRenderState: i, visibleTypes: r }) {
@@ -2831,8 +2822,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }), 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();
   }
   drawMissingProtectionHandleLabel({ type: t, handleX: e, y: i, handleWidth: r, config: s }) {
-    const n = this.#e, a = t === "stopLoss" ? "SL" : "TP", o = e + r / 2;
-    n.save(), n.font = s.font, n.textBaseline = "middle", n.globalAlpha = s.textOpacity, n.fillStyle = s.textColor, n.fillText(a, o - n.measureText(a).width / 2, i), n.restore();
+    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();
   }
   drawTemporaryProtectionDrag() {
     const t = this.getTemporaryProtectionRenderState();
@@ -2845,7 +2836,7 @@ 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), a = this.getTemporaryProtectionLineConfig(e), o = n.widthPNL, l = n.height;
+    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;
     return {
       price: r,
       type: e,
@@ -2853,13 +2844,13 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       viewport: i,
       y: s,
       handleConfig: n,
-      lineConfig: a,
+      lineConfig: o,
       handleX: this.getTemporaryProtectionHandleX({
-        handleWidth: o,
+        handleWidth: a,
         config: n
       }),
       handleY: s - l / 2,
-      handleWidth: o,
+      handleWidth: a,
       handleHeight: l
     };
   }
@@ -2881,9 +2872,9 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       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();
   }
-  drawTemporaryProtectionPnLLabel({ trade: t, type: e, price: i, handleX: r, y: s, handleWidth: n, handleConfig: a }) {
-    const o = this.#e, l = dt(t.type, t.openPrice, i, t.volume, t.symbol), d = this.formatPnlLabel(l), u = r + n / 2;
-    o.save(), o.font = a.font, o.textBaseline = "middle", o.globalAlpha = a.textOpacity, o.fillStyle = this.getProtectionPnlTextColor(e), o.fillText(d, u - o.measureText(d).width / 2, s), o.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();
   }
   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);
@@ -2911,11 +2902,11 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   formatPnlLabel(t) {
     return `${t >= 0 ? "+" : ""}${t.toFixed(2)}`;
   }
-}, te = [
+}, ee = [
   "pointerdown",
   "pointermove",
   "pointerup"
-], ee = class {
+], ie = class {
   #t;
   #e;
   #r;
@@ -2925,8 +2916,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   #l;
   #u;
   #n;
-  #o = null;
   #a = null;
+  #o = null;
   #d = !1;
   #h = 0;
   #f = 0;
@@ -2934,20 +2925,20 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     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;
   }
   cancelActiveInteraction() {
-    this.#a && this.#l?.(), this.#o = null, this.#a = 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.#f = 0;
   }
   handlePointerEvent(t) {
     if (!this.isSupportedEventType(t.type)) return !1;
     const e = this.getCanvasMousePoint(t);
-    if (t.type === "pointermove" && this.#a) return this.handleActiveMissingProtectionDrag(t, e);
-    if (t.type === "pointermove" && this.#o) return this.handleActiveDrag(t, e);
+    if (t.type === "pointermove" && this.#o) return this.handleActiveMissingProtectionDrag(t, e);
+    if (t.type === "pointermove" && this.#a) return this.handleActiveDrag(t, e);
     if (t.type === "pointerup")
-      return this.#a ? this.handleMissingProtectionDragEnd() : this.handleDragEnd();
+      return this.#o ? this.handleMissingProtectionDragEnd() : this.handleDragEnd();
     const i = this.getHoveredHitbox(e);
     return i ? this.handleHoveredHitbox(t, i, e) : (this.resetCursorIfIdle(), !1);
   }
   isSupportedEventType(t) {
-    return te.includes(t);
+    return ee.includes(t);
   }
   getCanvasMousePoint(t) {
     const e = this.#t.getBoundingClientRect(), i = this.#t.width / e.width, r = this.#t.height / e.height;
@@ -2957,67 +2948,67 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     };
   }
   handleActiveDrag(t, e) {
-    if (!this.#o) return !1;
+    if (!this.#a) return !1;
     const i = this.getNextDragPrice(e.y);
-    return this.#o.price = i, this.#s?.({
-      trade: this.#o.trade,
-      type: this.#o.type,
+    return this.#a.price = i, this.#s?.({
+      trade: this.#a.trade,
+      type: this.#a.type,
       price: i
     }), this.consumeEvent(t), !0;
   }
   handleActiveMissingProtectionDrag(t, e) {
-    if (!this.#a || !this.isProtectionHandleType(this.#a.type)) return !1;
+    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)
       return this.consumeEvent(t), !0;
     this.#d = !0;
     const s = this.getNextMissingProtectionPrice(e.y);
-    return this.#a.price = s, this.#c?.({
-      trade: this.#a.trade,
-      type: this.#a.type,
+    return this.#o.price = s, this.#c?.({
+      trade: this.#o.trade,
+      type: this.#o.type,
       price: s
     }), this.consumeEvent(t), !0;
   }
   getNextDragPrice(t) {
-    if (!this.#o) return 0;
-    const e = t - this.#h, i = this.#o.viewport.priceRange / this.#t.height, r = p(this.#f - e * i);
-    return this.isProtectionHandleType(this.#o.type) ? this.constrainExistingProtectionPrice({
+    if (!this.#a) return 0;
+    const e = t - this.#h, i = this.#a.viewport.priceRange / this.#t.height, r = p(this.#f - e * i);
+    return this.isProtectionHandleType(this.#a.type) ? this.constrainExistingProtectionPrice({
       price: r,
-      hitbox: this.#o,
-      type: this.#o.type
+      hitbox: this.#a,
+      type: this.#a.type
     }) : r;
   }
   getNextMissingProtectionPrice(t) {
-    if (!this.#a || !this.isProtectionHandleType(this.#a.type)) return 0;
-    const e = p(this.#a.viewport.minPrice + (this.#t.height - t) / this.#t.height * this.#a.viewport.priceRange);
+    if (!this.#o || !this.isProtectionHandleType(this.#o.type)) return 0;
+    const e = p(this.#o.viewport.minPrice + (this.#t.height - t) / this.#t.height * this.#o.viewport.priceRange);
     return this.constrainProtectionPrice({
       price: e,
-      hitbox: this.#a,
-      type: this.#a.type
+      hitbox: this.#o,
+      type: this.#o.type
     });
   }
   handleDragEnd() {
-    return this.#o && this.modifyActiveDragTrade(), this.#o = null, !1;
+    return this.#a && this.modifyActiveDragTrade(), this.#a = null, !1;
   }
   handleMissingProtectionDragEnd() {
-    return this.#a && this.#d && this.isProtectionHandleType(this.#a.type) ? this.#i?.({
-      trade: this.#a.trade,
-      type: this.#a.type,
-      price: p(this.#a.price)
-    }) : this.#l?.(), this.#a = null, this.#d = !1, !1;
+    return this.#o && this.#d && this.isProtectionHandleType(this.#o.type) ? this.#i?.({
+      trade: this.#o.trade,
+      type: this.#o.type,
+      price: p(this.#o.price)
+    }) : this.#l?.(), this.#o = null, this.#d = !1, !1;
   }
   modifyActiveDragTrade() {
-    if (!this.#o) return;
-    const t = p(this.#o.price);
-    if (this.#o.type === "stopLoss") {
+    if (!this.#a) return;
+    const t = p(this.#a.price);
+    if (this.#a.type === "stopLoss") {
       this.#u?.({
-        ticket: this.#o.trade.ticket,
+        ticket: this.#a.trade.ticket,
         sl: t
       });
       return;
     }
     this.#u?.({
-      ticket: this.#o.trade.ticket,
+      ticket: this.#a.trade.ticket,
       tp: t
     });
   }
@@ -3050,13 +3041,13 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     document.body.style.cursor = t.type === "startPrice" ? "crosshair" : "ns-resize";
   }
   startDrag(t, e) {
-    this.#o = t, this.#h = e, this.#f = t.price;
+    this.#a = t, this.#h = e, this.#f = t.price;
   }
   startMissingProtectionDrag(t, e) {
-    this.#a = t, this.#h = e, this.#d = !1;
+    this.#o = t, this.#h = e, this.#d = !1;
   }
   resetCursorIfIdle() {
-    !this.#o && !this.#a && (document.body.style.cursor = "crosshair");
+    !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;
@@ -3079,7 +3070,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   consumeEvent(t) {
     t.stopPropagation(), t.preventDefault();
   }
-}, ie = class {
+}, re = class {
   #t;
   #e;
   candles;
@@ -3108,18 +3099,18 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     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), a = this.getMaxVolume(n);
-    a <= 0 || this.drawVolumeBars({
+    const n = this.candles.slice(r, s + 1), o = this.getMaxVolume(n);
+    o <= 0 || this.drawVolumeBars({
       ctx: t,
       candles: n,
       startIndex: r,
-      maxVolume: a,
+      maxVolume: o,
       chartHeight: i
     });
   }
   drawVolumeBars({ ctx: t, candles: e, startIndex: i, maxVolume: r, chartHeight: s }) {
-    t.save(), t.globalAlpha = this.opacity, e.forEach((n, a) => {
-      const o = i + a, l = this.getCandleX(o);
+    t.save(), t.globalAlpha = this.opacity, e.forEach((n, o) => {
+      const a = i + o, l = this.getCandleX(a);
       this.drawSingleVolumeBar({
         ctx: t,
         candle: n,
@@ -3133,8 +3124,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     if (!this.viewport || e.volume <= 0) return;
     const n = this.getVolumeAreaHeight(s);
     if (n <= 0) return;
-    const a = n * (e.volume / r), o = Math.min(n, Math.max(a, this.minBarHeight)), l = s - this.bottomOffset - o, d = Math.max(1, this.viewport.candleWidth);
-    t.fillStyle = this.getVolumeBarColor(e), t.fillRect(i, l, d, o);
+    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);
+    t.fillStyle = this.getVolumeBarColor(e), t.fillRect(i, l, d, a);
   }
   getVisibleRange(t) {
     if (!this.viewport) return {
@@ -3165,49 +3156,49 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   clearCanvas() {
     this.#e.clearRect(0, 0, this.#t.width, this.#t.height);
   }
-}, W = (t) => {
+}, A = (t) => {
   const e = document.createElement("canvas");
   return e.className = t, e;
-}, re = (t, e) => {
+}, se = (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";
-  const n = W("trading-reload-chart__volume"), a = W("trading-reload-chart__plot"), o = W("trading-reload-chart__shapes"), l = W("trading-reload-chart__trades"), d = W("trading-reload-chart__overlay"), u = W("trading-reload-chart__axis-x");
-  s.append(n, a, o, l, d, u);
-  const g = W("trading-reload-chart__axis-y");
+  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);
+  const g = A("trading-reload-chart__axis-y");
   return r.append(s, g), i.append(r), t.append(i), {
     root: i,
     layout: r,
     stack: s,
     volumeCanvas: n,
-    candleCanvas: a,
-    shapesCanvas: o,
+    candleCanvas: o,
+    shapesCanvas: a,
     tradesCanvas: l,
     overlayCanvas: d,
     axisXCanvas: u,
     axisYCanvas: g,
     interactionTarget: r
   };
-}, ct = (t) => typeof t == "object" && t !== null && !Array.isArray(t), St = (t, e) => {
+}, 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 (ct(s) && ct(n)) {
-        i[r] = St(n, s);
+      if (gt(s) && gt(n)) {
+        i[r] = Lt(n, s);
         continue;
       }
       i[r] = s;
     }
   }
   return i;
-}, ut = (t) => St(c, t ?? {}), gt = (t, e) => e === void 0 || t.time >= 1e12 ? t : {
+}, ft = (t) => Lt(c, t ?? {}), pt = (t, e) => e === void 0 || t.time >= 1e12 ? t : {
   ...t,
   time: t.time * 1e3 - e
-}, se = class {
+}, ne = class {
   #t;
   #e;
   #r;
@@ -3217,40 +3208,40 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   #l = null;
   #u = null;
   #n = null;
-  #o = null;
   #a = null;
+  #o = null;
   #d = null;
   #h = null;
   #f = !1;
   #v = 0;
   #y = !1;
   #x = 0;
-  #T = 0;
+  #S = 0;
   #p = null;
-  #P = null;
   #w = null;
+  #P = null;
   constructor(t, e) {
-    this.#t = t, this.#e = e, this.#r = ut(e.config), this.#s = re(t, this.#r.colors.background), this.#h = new Et({
+    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,
       crosshairColor: this.#r.crosshair.color,
       crosshairThickness: this.#r.crosshair.thickness,
       crosshairStyle: this.#r.crosshair.style
-    }), this.#R(), this.#W(), this.#H(), this.updateProps(e);
+    }), this.#R(), this.#D(), this.#H(), this.updateProps(e);
   }
   updateProps(t) {
     const e = this.#e.activeShapeTool;
-    this.#e = t, this.#r = ut(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.#B(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?.setPastTrades(t.pastTrades ?? []), this.#b(), this.#A(), this.#g());
+    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());
   }
   resetChartView() {
     this.#i?.resetView(), this.#g();
   }
   destroy() {
-    this.#w?.abort(), this.#w = null, this.#P?.disconnect(), this.#P = null, this.#s?.root.remove(), this.#s = null, this.#c = null, this.#i = null, this.#l = null, this.#u = null, this.#n = null, this.#o = null, this.#a = null, this.#d = null, this.#h = null, this.#f = !1;
+    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;
   }
   #M(t) {
     if (!this.#s || this.#f) return;
-    const e = t.map((r) => gt(r, this.#e.brokerTimezoneOffsetMs));
-    this.#c = new ie({
+    const e = t.map((r) => pt(r, this.#e.brokerTimezoneOffsetMs));
+    this.#c = new re({
       canvas: this.#s.volumeCanvas,
       candles: e,
       bullishColor: this.#r.volume.bullishColor,
@@ -3259,7 +3250,7 @@ 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 Nt({
+    }), this.#i = new _t({
       canvas: this.#s.candleCanvas,
       candles: e,
       baseCandleWidth: this.#r.candles.defaultWidth,
@@ -3269,7 +3260,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       autoFollowLatestCandle: this.#r.candles.autoFollowLatestCandle,
       autoFollowThresholdCandles: this.#r.candles.autoFollowThresholdCandles,
       rightOffsetCandles: this.#r.candles.rightOffsetCandles
-    }), this.#l = new qt({
+    }), this.#l = new Qt({
       canvas: this.#s.shapesCanvas,
       activeSymbol: this.#e.activeSymbol,
       candles: e,
@@ -3285,6 +3276,9 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       onShapeSelected: (r) => {
         this.#e.onShapeSelected?.(r);
       },
+      onShapeDoubleClicked: (r) => {
+        this.#e.onShapeDoubleClicked?.(r);
+      },
       onToolChange: (r) => {
         this.#e.onActiveShapeToolChange?.(r);
       }
@@ -3293,14 +3287,14 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     i && (this.#u = new Gt({
       ctx: i,
       config: this.#r.shapes.previousDayHighLow ?? null
-    }), this.#u.setPreviousDay(this.#e.previousDay)), this.#n = new Qt({ canvas: this.#s.tradesCanvas }), this.#n.setCandles(e), this.#n.setPastTrades(this.#e.pastTrades ?? []), this.#b(), this.#a = new Yt({
+    }), 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,
       candles: e
-    }), this.#d = new Vt({ canvas: this.#s.axisYCanvas }), this.#o = new ee({
+    }), 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.#I(r),
+      onDrag: (r) => this.#W(r),
       onMissingProtectionDrag: (r) => this.#F(r),
       onMissingProtectionDragEnd: (r) => this.#Y(r),
       onMissingProtectionDragCancel: () => this.#O(),
@@ -3310,9 +3304,9 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   #R() {
     if (!this.#s) return;
-    this.#w = new AbortController();
-    const { signal: t } = this.#w, e = this.#s.interactionTarget;
-    e.addEventListener("pointerdown", (i) => this.#N(i), { signal: t }), e.addEventListener("pointerup", (i) => this.#U(i), { signal: t }), e.addEventListener("pointermove", (i) => this.#G(i), { signal: t }), e.addEventListener("pointerenter", (i) => this.#_(i), { signal: t }), e.addEventListener("pointerleave", () => this.#$(), { signal: t }), e.addEventListener("contextmenu", (i) => this.#J(i), { signal: t }), e.addEventListener("wheel", (i) => this.#E(i), {
+    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), {
       passive: !1,
       signal: t
     }), this.#s.axisYCanvas.addEventListener("wheel", (i) => this.#z(i), {
@@ -3320,12 +3314,12 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       signal: t
     }), document.addEventListener("keydown", (i) => this.#j(i), { signal: t });
   }
-  #W() {
-    this.#P = new ResizeObserver(() => {
+  #D() {
+    this.#w = new ResizeObserver(() => {
       this.#H(), this.#g();
-    }), this.#P.observe(this.#t);
+    }), this.#w.observe(this.#t);
   }
-  #D() {
+  #A() {
     const t = this.#r.axis.axisY.width, e = this.#r.axis.axisX.height, i = this.#t.clientWidth, r = this.#t.clientHeight;
     return {
       axisYWidth: t,
@@ -3339,26 +3333,26 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   #H() {
     if (!this.#s) return;
-    const { plotWidth: t, plotHeight: e, axisYWidth: i, axisXHeight: r } = this.#D();
+    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);
     }
     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);
   }
-  #S() {
-    this.#i && (this.#a?.setCandles(this.#i.candles), this.#a?.setViewport(this.#i.viewport), this.#a?.render(), this.#d?.setViewport(this.#i.viewport), this.#d?.render());
+  #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());
   }
   #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.#S(), this.#h?.render());
+    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());
   }
   #m() {
     return this.#e.activeShapeTool !== null;
   }
-  #B(t) {
-    t !== null && (this.#y = !1, this.#n?.setIsDragging(!1), this.#o?.cancelActiveInteraction()), this.#l?.setActiveTool(t);
+  #X(t) {
+    t !== null && (this.#y = !1, this.#n?.setIsDragging(!1), this.#a?.cancelActiveInteraction()), this.#l?.setActiveTool(t);
   }
-  #X() {
+  #I() {
     const t = this.#e.openTrades ?? [];
     return this.#p ? t.map((e) => e.ticket !== this.#p?.ticket ? e : {
       ...e,
@@ -3367,15 +3361,15 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }) : t;
   }
   #b() {
-    this.#n?.setTrades(this.#X());
+    this.#n?.setTrades(this.#I());
   }
-  #A() {
+  #B() {
     const t = this.#e.liveCandle;
     if (!t || !this.#i) return;
-    const e = gt(t, this.#e.brokerTimezoneOffsetMs);
+    const e = pt(t, this.#e.brokerTimezoneOffsetMs);
     this.#i.updateLiveCandle(e), this.#n?.setLiveCandle(this.#i.liveCandle), this.#n?.setCandles(this.#i.candles);
   }
-  #I({ trade: t, type: e, price: i }) {
+  #W({ trade: t, type: e, price: i }) {
     this.#n && (this.#n.setIsDragging(!0), this.#p = {
       ticket: t.ticket,
       ...e === "stopLoss" ? { sl: i } : {},
@@ -3410,25 +3404,25 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       this.#h.updateMousePosition(t.clientX, t.clientY), this.#h.render();
       return;
     }
-    const e = mt(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);
+    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);
     this.#d?.setCrosshair({
       visible: !0,
       y: this.#h.mouseY,
       price: n
-    }), this.#a?.setCrosshair({
+    }), this.#o?.setCrosshair({
       visible: !0,
       x: this.#h.mouseX,
       candle: r
-    }), this.#S(), this.#h.render();
+    }), this.#T(), this.#h.render();
   }
-  #V() {
-    this.#h?.hide(), this.#a?.hideCrosshair(), this.#d?.hideCrosshair(), this.#S(), this.#h?.render();
+  #E() {
+    this.#h?.hide(), this.#o?.hideCrosshair(), this.#d?.hideCrosshair(), this.#T(), this.#h?.render();
   }
-  #E(t) {
+  #V(t) {
     if (!this.#i || !this.#n) return;
-    this.#m() || this.#o?.handlePointerEvent(t), t.preventDefault();
+    this.#m() || 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();
   }
@@ -3443,51 +3437,54 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       this.#g();
       return;
     }
-    this.#m() || this.#o?.handlePointerEvent(t) || (this.#y = !0, this.#x = t.clientX, this.#T = t.clientY);
+    this.#m() || this.#a?.handlePointerEvent(t) || (this.#y = !0, this.#x = t.clientX, this.#S = t.clientY);
   }
-  #G(t) {
+  #_(t) {
     const e = this.#l?.handlePointerEvent(t) ?? !1;
-    if (this.#m() || this.#o?.handlePointerEvent(t), this.#L(t), e) {
+    if (this.#m() || this.#a?.handlePointerEvent(t), this.#L(t), e) {
       this.#g(), this.#L(t);
       return;
     }
     if (!this.#y || !this.#i || this.#m()) return;
-    const i = t.clientX - this.#x, r = t.clientY - this.#T;
-    this.#x = t.clientX, this.#T = t.clientY, this.#i.panHorizontally(i), this.#i.panVertically(r), this.#g(), this.#L(t);
+    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);
   }
-  #U(t) {
+  #G(t) {
     if (this.#y = !1, this.#l?.handlePointerEvent(t) ?? !1) {
       this.#g();
       return;
     }
-    this.#m() || this.#o?.handlePointerEvent(t);
+    this.#m() || this.#a?.handlePointerEvent(t);
   }
-  #_(t) {
-    document.body.style.cursor = "crosshair", this.#l?.handlePointerEvent(t), this.#m() || this.#o?.handlePointerEvent(t);
+  #U(t) {
+    document.body.style.cursor = "crosshair", this.#l?.handlePointerEvent(t), this.#m() || this.#a?.handlePointerEvent(t);
   }
   #$() {
-    this.#l?.clearHoverState(), document.body.style.cursor = "", this.#V();
+    this.#l?.clearHoverState(), document.body.style.cursor = "", this.#E();
   }
   #J(t) {
     ((this.#l?.handlePointerEvent(t) ?? !1) || this.#m()) && (t.preventDefault(), t.stopPropagation(), this.#g());
   }
+  #K(t) {
+    this.#l?.handlePointerEvent(t);
+  }
   #j(t) {
     (this.#l?.handleKeyboardEvent(t) ?? !1) && (t.preventDefault(), this.#g());
   }
-}, oe = Mt(({ className: t, style: e, ...i }, r) => {
-  const s = z(null), n = z(null), a = z(i);
-  return a.current = i, Rt(r, () => ({ resetChartView() {
+}, 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() {
     n.current?.resetChartView();
-  } })), tt(() => {
-    const o = s.current;
-    if (!o) return;
-    const l = new se(o, a.current);
+  } })), rt(() => {
+    const a = s.current;
+    if (!a) return;
+    const l = new ne(a, o.current);
     return n.current = l, () => {
       l.destroy(), n.current = null;
     };
-  }, []), tt(() => {
-    n.current?.updateProps(a.current);
-  }, [i]), /* @__PURE__ */ Wt("div", {
+  }, []), rt(() => {
+    n.current?.updateProps(o.current);
+  }, [i]), /* @__PURE__ */ At("div", {
     ref: s,
     className: t,
     style: {
@@ -3499,5 +3496,5 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
 });
 export {
   c as CHART_CONFIG,
-  oe as TradingReload
+  le as TradingReload
 };