@pradeepjadhav/trading-reload-chart 1.2.0 → 1.4.0

package/dist/trading-reload-chart.js

@@ -1,4 +1,4 @@
-import { forwardRef as Mt, useEffect as st, useImperativeHandle as Rt, useRef as _ } from "react";
+import { forwardRef as kt, useEffect as st, useImperativeHandle as Rt, useRef as _ } from "react";
 import { jsx as Dt } from "react/jsx-runtime";
 var h = {
   primary: "#7959F7",
@@ -159,7 +159,7 @@ var h = {
   showVolumeSection: !0,
   showPnlSection: !0,
   showCloseSection: !0
-}, ot = {
+}, at = {
   width: 32,
   height: 22,
   gapFromStartPriceHandle: 6,
@@ -173,7 +173,7 @@ var h = {
   textColor: h.white,
   textOpacity: 0.6,
   font: X.default
-}, at = {
+}, ot = {
   height: 22,
   widthPNL: 80,
   position: {
@@ -240,6 +240,16 @@ var h = {
     thickness: 1,
     style: "dashed"
   },
+  watermark: {
+    text: "",
+    position: "center",
+    fontSize: 48,
+    fontWeight: 700,
+    fontFamily: "Inter, system-ui, -apple-system, sans-serif",
+    color: h.white,
+    opacity: 0.25,
+    padding: 16
+  },
   axis: {
     axisX: {
       height: 30,
@@ -338,25 +348,25 @@ var h = {
       visible: !0,
       dragActivationThresholdPx: 2,
       slHandle: {
-        ...ot,
+        ...at,
         borderColor: h.red,
         backgroundColor: h.slBackground,
         textColor: h.red
       },
       tpHandle: {
-        ...ot,
+        ...at,
         borderColor: h.green,
         backgroundColor: h.tpBackground,
         textColor: h.green
       },
       temporarySlHandle: {
-        ...at,
+        ...ot,
         borderColor: h.red,
         backgroundColor: h.slBackground,
         textColor: h.red
       },
       temporaryTpHandle: {
-        ...at,
+        ...ot,
         borderColor: h.green,
         backgroundColor: h.tpBackground,
         textColor: h.green
@@ -416,9 +426,9 @@ var h = {
 }, It = ({ candleSpacing: t, candleTimeframeMs: e, labelWidth: i, minLabelGap: s }) => {
   if (t <= 0 || e <= 0) return lt[0];
   const r = i + s;
-  for (const a of lt) if (a / e * t >= r) return a;
-  const n = 1440 * 60 * 1e3, o = n / e * t;
-  return n * Math.ceil(r / o);
+  for (const o of lt) if (o / e * t >= r) return o;
+  const n = 1440 * 60 * 1e3, a = n / e * t;
+  return n * Math.ceil(r / a);
 }, Bt = (t, e) => {
   const i = new Date(t), s = (i.getHours() * 60 + i.getMinutes()) * 60 * 1e3 + i.getSeconds() * 1e3 + i.getMilliseconds();
   return e >= 1440 * 60 * 1e3 ? s === 0 : s % e === 0;
@@ -428,7 +438,7 @@ var h = {
 }, Ft = (t) => {
   const e = new Date(t), i = e.toLocaleDateString("en-US", { weekday: "short" }), s = e.toLocaleDateString("en-US", { month: "short" });
   return `${i} ${e.getDate()} ${s} ${e.getHours().toString().padStart(2, "0")}.${e.getMinutes().toString().padStart(2, "0")}`;
-}, Yt = class {
+}, Vt = class {
   #t;
   #e;
   candles;
@@ -463,8 +473,8 @@ var h = {
     if (!this.crosshair.visible || !this.crosshair.candle) return;
     const t = this.#e, e = this.#t.width, i = this.#t.height, s = c.axis.axisX.crosshairLabel, r = Ft(this.crosshair.candle.time);
     t.save(), t.font = s.font;
-    const n = t.measureText(r).width + s.paddingX * 2, o = s.height, a = this.getCrosshairLabelX(n, e), l = Math.max(0, (i - o) / 2);
-    t.fillStyle = s.backgroundColor, t.fillRect(a, l, n, o), t.strokeStyle = s.borderColor, t.lineWidth = s.borderWidth, t.strokeRect(a, l, n, o), t.fillStyle = s.textColor, t.textAlign = "center", t.textBaseline = "middle", t.fillText(r, a + n / 2, l + o / 2), t.restore();
+    const n = t.measureText(r).width + s.paddingX * 2, a = s.height, o = this.getCrosshairLabelX(n, e), l = Math.max(0, (i - a) / 2);
+    t.fillStyle = s.backgroundColor, t.fillRect(o, l, n, a), t.strokeStyle = s.borderColor, t.lineWidth = s.borderWidth, t.strokeRect(o, l, n, a), t.fillStyle = s.textColor, t.textAlign = "center", t.textBaseline = "middle", t.fillText(r, o + n / 2, l + a / 2), t.restore();
   }
   clearCanvas() {
     this.#e.clearRect(0, 0, this.#t.width, this.#t.height);
@@ -486,12 +496,12 @@ var h = {
       candleTimeframeMs: s,
       labelWidth: r,
       minLabelGap: e.minLabelGap
-    }), { startIndex: o, endIndex: a } = this.getVisibleCandleIndexRange(i);
-    for (let l = o; l <= a; l += 1) {
+    }), { startIndex: a, endIndex: o } = this.getVisibleCandleIndexRange(i);
+    for (let l = a; l <= o; l += 1) {
       const d = this.getSlotTime(l, s);
       if (d === null || !Bt(d, n)) continue;
-      const u = this.getCandleCenterX(l), g = Wt(d), v = t.measureText(g).width;
-      this.isLabelOutsideCanvas(u, v, i) || (this.drawTick(u), this.drawLabel(g, u));
+      const u = this.getCandleCenterX(l), g = Wt(d), p = t.measureText(g).width;
+      this.isLabelOutsideCanvas(u, p, i) || (this.drawTick(u), this.drawLabel(g, u));
     }
     t.restore();
   }
@@ -535,7 +545,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)), E = ({ price: t, minPrice: e, priceRange: i, chartHeight: s }) => s - (t - e) / i * s, mt = ({ y: t, minPrice: e, priceRange: i, chartHeight: s }) => e + (1 - t / s) * i, Et = ({ priceRange: t, canvasHeight: e }) => {
+}, m = (t, e = 5) => Number(t.toFixed(e)), Y = ({ price: t, minPrice: e, priceRange: i, chartHeight: s }) => s - (t - e) / i * s, mt = ({ y: t, minPrice: e, priceRange: i, chartHeight: s }) => e + (1 - t / s) * i, Yt = ({ priceRange: t, canvasHeight: e }) => {
   const i = t / (e / c.axis.axisY.tickGap), s = 10 ** Math.floor(Math.log10(i));
   for (const r of [
     1,
@@ -547,7 +557,7 @@ var h = {
     if (n >= i) return n;
   }
   return 10 * s;
-}, Ot = class {
+}, Et = class {
   #t;
   #e;
   viewport = null;
@@ -576,8 +586,8 @@ var h = {
   }
   drawCrosshairPriceLabel() {
     if (!this.crosshair.visible) return;
-    const t = this.#e, e = this.#t.width, i = this.#t.height, s = c.axis.axisY.crosshairLabel, r = p(this.crosshair.price).toFixed(5), n = s.height, o = this.getCrosshairLabelY(n, i);
-    t.save(), t.fillStyle = s.backgroundColor, t.fillRect(0, o, e, n), t.strokeStyle = s.borderColor, t.lineWidth = s.borderWidth, t.strokeRect(0, o, e, n), t.font = s.font, t.fillStyle = s.textColor, t.textAlign = "left", t.textBaseline = "middle", t.fillText(r, s.paddingX, o + n / 2), t.restore();
+    const t = this.#e, e = this.#t.width, i = this.#t.height, s = c.axis.axisY.crosshairLabel, r = m(this.crosshair.price).toFixed(5), n = s.height, a = this.getCrosshairLabelY(n, i);
+    t.save(), t.fillStyle = s.backgroundColor, t.fillRect(0, a, e, n), t.strokeStyle = s.borderColor, t.lineWidth = s.borderWidth, t.strokeRect(0, a, e, n), t.font = s.font, t.fillStyle = s.textColor, t.textAlign = "left", t.textBaseline = "middle", t.fillText(r, s.paddingX, a + n / 2), t.restore();
   }
   clearCanvas() {
     this.#e.clearRect(0, 0, this.#t.width, this.#t.height);
@@ -592,15 +602,15 @@ var h = {
   }
   drawPriceLabels() {
     if (!this.viewport) return;
-    const t = this.#e, e = this.#t.height, i = c.axis.axisY, s = Et({
+    const t = this.#e, e = this.#t.height, i = c.axis.axisY, s = Yt({
       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: r, endPrice: n } = this.getVisiblePriceRange(s);
-    for (let o = r; o <= n; o += s) {
-      const a = this.getPriceY(o, e);
-      this.isPriceOutsideCanvas(a, e) || (this.drawTick(a), this.drawPriceLabel(o, a));
+    for (let a = r; a <= n; a += s) {
+      const o = this.getPriceY(a, e);
+      this.isPriceOutsideCanvas(o, e) || (this.drawTick(o), this.drawPriceLabel(a, o));
     }
     t.restore();
   }
@@ -614,7 +624,7 @@ var h = {
     };
   }
   getPriceY(t, e) {
-    return this.viewport ? E({
+    return this.viewport ? Y({
       price: t,
       minPrice: this.viewport.minPrice,
       priceRange: this.viewport.priceRange,
@@ -630,12 +640,12 @@ var h = {
   }
   drawPriceLabel(t, e) {
     const i = this.#e, s = c.axis.axisY;
-    i.fillStyle = s.textColor, i.fillText(p(t).toFixed(5), s.labelOffsetX, e);
+    i.fillStyle = s.textColor, i.fillText(m(t).toFixed(5), s.labelOffsetX, e);
   }
   getCrosshairLabelY(t, e) {
     return Math.max(0, Math.min(e - t, this.crosshair.y - t / 2));
   }
-}, zt = class {
+}, Ot = class {
   #t;
   #e;
   mouseX = 0;
@@ -654,6 +664,9 @@ var h = {
     const s = this.getLocalCanvasPoint(t, e), r = i.snapX ?? s.x;
     this.mouseX = this.clampX(r), this.mouseY = this.clampY(s.y), this.visible = !0;
   }
+  setPosition(t, e) {
+    this.mouseX = this.clampX(t), this.mouseY = this.clampY(e), this.visible = !0;
+  }
   hide() {
     this.visible = !1;
   }
@@ -712,7 +725,7 @@ var h = {
   drawLine({ ctx: t, fromX: e, fromY: i, toX: s, toY: r }) {
     t.beginPath(), t.moveTo(e, i), t.lineTo(s, r), t.stroke();
   }
-}, F = 60 * 1e3, Ct = 60 * F, Vt = 24 * Ct, Nt = class {
+}, F = 60 * 1e3, Ct = 60 * F, zt = 24 * Ct, Nt = class {
   #t;
   #e;
   candles;
@@ -790,6 +803,31 @@ var h = {
       endIndex: Math.min(this.candles.length - 1, Math.ceil((t - this.offsetX) / this.candleSpacing))
     };
   }
+  getViewState() {
+    return this.candles.length === 0 || this.candleSpacing <= 0 || this.#t.width <= 0 ? null : {
+      rightmostVisibleTime: this.getRightmostVisibleTime(),
+      rightmostVisibleX: this.getRightmostVisibleX(),
+      rightEdgeTime: this.getRightEdgeTime(),
+      visibleDurationMs: this.getVisibleDurationMs()
+    };
+  }
+  setViewState(t) {
+    if (this.candles.length === 0 || this.#t.width <= 0 || !this.hasUsableTimeframe()) return;
+    const e = Number.isFinite(t.rightmostVisibleTime) ? t.rightmostVisibleTime : t.rightEdgeTime, i = Number.isFinite(t.visibleDurationMs) ? t.visibleDurationMs : 0, s = Number.isFinite(t.rightmostVisibleX) ? t.rightmostVisibleX : 1;
+    if (!Number.isFinite(e) || i <= 0) return;
+    const r = this.detectCandleTimeframeMs(), n = this.baseCandleWidth + this.baseCandleGap, a = this.#t.width * r / i, o = n > 0 ? a / n : this.zoomX;
+    this.zoomX = Math.max(c.zoom.x.min, Math.min(o, c.zoom.x.max)), this.offsetX = this.#t.width * s - this.getTimeDeltaInCandleSlots(e) * this.candleSpacing - this.candleWidth / 2, this.isFollowingLatest = this.isWithinAutoFollowThreshold();
+  }
+  setCursorState(t) {
+    if (this.candles.length === 0 || !Number.isFinite(t.time) || !Number.isFinite(t.price)) return null;
+    const e = this.getCandleIndexByTime(t.time), i = this.candles[e];
+    return i ? {
+      candle: i,
+      candleIndex: e,
+      x: this.getCandleCenterX(e),
+      y: this.getPriceY(t.price, this.#t.height)
+    } : null;
+  }
   getCandleX(t) {
     return t * this.candleSpacing + this.offsetX;
   }
@@ -806,7 +844,7 @@ var h = {
     return this.getCandleCenterX(e);
   }
   getPriceAtY(t) {
-    return p(mt({
+    return m(mt({
       y: t,
       minPrice: this.minPrice,
       priceRange: this.priceRange,
@@ -840,34 +878,34 @@ var h = {
       startIndex: s,
       chartHeight: i
     });
-    const o = {
+    const a = {
       ctx: t,
       chartWidth: e,
       chartHeight: i
     };
-    this.drawAskPriceLine(o), this.drawBidPriceLine(o);
+    this.drawAskPriceLine(a), this.drawBidPriceLine(a);
   }
   drawCandles({ ctx: t, candles: e, startIndex: i, chartHeight: s }) {
     e.forEach((r, n) => {
-      const o = i + n, a = this.getCandleX(o), l = this.getCandleColor(r), d = this.getCandleYCoordinates(r, s);
+      const a = i + n, o = this.getCandleX(a), l = this.getCandleColor(r), d = this.getCandleYCoordinates(r, s);
       this.drawSingleCandle({
         ctx: t,
-        candleX: a,
+        candleX: o,
         candleColor: l,
         ...d
       });
     });
   }
-  drawSingleCandle({ ctx: t, candleX: e, openY: i, closeY: s, highY: r, lowY: n, candleColor: o }) {
-    t.strokeStyle = o, t.fillStyle = o;
-    const a = e + this.candleWidth / 2;
-    t.beginPath(), t.moveTo(a, r), t.lineTo(a, n), t.stroke();
+  drawSingleCandle({ ctx: t, candleX: e, openY: i, closeY: s, highY: r, lowY: n, candleColor: a }) {
+    t.strokeStyle = a, t.fillStyle = a;
+    const o = e + this.candleWidth / 2;
+    t.beginPath(), t.moveTo(o, r), t.lineTo(o, n), t.stroke();
     const l = Math.min(i, s), d = Math.max(Math.abs(s - i), c.candles.minBodyHeight);
     t.fillRect(e, l, this.candleWidth, d);
   }
-  drawPriceLine({ ctx: t, chartWidth: e, chartHeight: i, price: s, color: r, opacity: n, lineWidth: o, dash: a }) {
-    const l = this.getPriceY(p(s), i);
-    t.save(), t.globalAlpha = n, t.strokeStyle = r, t.lineWidth = o, t.setLineDash(a), t.beginPath(), t.moveTo(0, l), t.lineTo(e, l), t.stroke(), t.restore();
+  drawPriceLine({ ctx: t, chartWidth: e, chartHeight: i, price: s, color: r, opacity: n, lineWidth: a, dash: o }) {
+    const l = this.getPriceY(m(s), i);
+    t.save(), t.globalAlpha = n, t.strokeStyle = r, t.lineWidth = a, t.setLineDash(o), t.beginPath(), t.moveTo(0, l), t.lineTo(e, l), t.stroke(), t.restore();
   }
   drawBidPriceLine({ ctx: t, chartWidth: e, chartHeight: i }) {
     const s = this.candles.at(-1);
@@ -884,11 +922,11 @@ var h = {
   }
   drawAskPriceLine({ ctx: t, chartWidth: e, chartHeight: i }) {
     const s = this.candles.at(-1);
-    !s || !c.candles.liveAskPriceLine.visible || s.ask == null || this.drawPriceLine({
+    !s || !c.candles.liveAskPriceLine.visible || this.drawPriceLine({
       ctx: t,
       chartWidth: e,
       chartHeight: i,
-      price: s.ask,
+      price: s.ask ?? s.close,
       color: this.getAskPriceLineColor(s),
       opacity: c.candles.liveAskPriceLine.opacity,
       lineWidth: c.candles.liveAskPriceLine.width,
@@ -925,12 +963,12 @@ var h = {
     };
   }
   getInitialPriceRange(t, e) {
-    const i = this.getInitialFallbackPercent(), s = p(e - t), r = Math.max(Math.abs((t + e) / 2) * i, 1e-5), n = Math.max(s, r);
+    const i = this.getInitialFallbackPercent(), s = m(e - t), r = Math.max(Math.abs((t + e) / 2) * i, 1e-5), n = Math.max(s, r);
     return n + n * 0.2;
   }
   getInitialFallbackPercent() {
     const t = this.detectCandleTimeframeMs();
-    return t <= F ? 25e-4 : t <= 5 * F ? 35e-4 : t <= 15 * F ? 5e-3 : t <= Ct ? 75e-4 : (t < Vt, 0.01);
+    return t <= F ? 25e-4 : t <= 5 * F ? 35e-4 : t <= 15 * F ? 5e-3 : t <= Ct ? 75e-4 : (t < zt, 0.01);
   }
   detectCandleTimeframeMs() {
     if (this.candles.length < 2) return 15 * F;
@@ -938,6 +976,9 @@ var h = {
     for (let e = 1; e < Math.min(this.candles.length, 10); e++) t.push(this.candles[e].time - this.candles[e - 1].time);
     return t.sort((e, i) => e - i), t[Math.floor(t.length / 2)];
   }
+  hasUsableTimeframe() {
+    return this.detectCandleTimeframeMs() > 0;
+  }
   applyManualViewportOverrides(t) {
     t.priceCenter !== void 0 && (this.priceCenter = t.priceCenter), t.priceRange !== void 0 && (this.priceRange = t.priceRange, this.initialPriceRange = t.priceRange);
   }
@@ -956,13 +997,58 @@ var h = {
   getRightEdgeCandleIndex() {
     return (this.#t.width - this.offsetX) / this.candleSpacing;
   }
+  getRightmostVisibleTime() {
+    const t = this.getRightmostVisibleIndex();
+    return this.candles[t]?.time ?? 0;
+  }
+  getRightmostVisibleX() {
+    const t = this.getRightmostVisibleIndex();
+    if (this.#t.width <= 0) return 1;
+    const e = this.getCandleCenterX(t) / this.#t.width;
+    return Math.max(0, Math.min(e, 1));
+  }
+  getRightmostVisibleIndex() {
+    return this.candles.length === 0 ? 0 : this.clampCandleIndex(Math.round((this.#t.width - this.offsetX - this.candleWidth) / this.candleSpacing));
+  }
+  getRightEdgeTime() {
+    const t = this.candles.at(-1), e = this.detectCandleTimeframeMs();
+    if (!t || e <= 0) return 0;
+    const i = this.getRightEdgeCandleIndex() - (this.candles.length - 1);
+    return t.time + i * e;
+  }
+  getVisibleDurationMs() {
+    const t = this.detectCandleTimeframeMs();
+    return t <= 0 || this.candleSpacing <= 0 ? 0 : this.#t.width * t / this.candleSpacing;
+  }
+  getTimeDeltaInCandleSlots(t) {
+    const e = this.candles[0];
+    return !e || this.detectCandleTimeframeMs() <= 0 ? 0 : (t - e.time) / this.detectCandleTimeframeMs();
+  }
+  getCandleIndexByTime(t) {
+    if (this.candles.length === 0 || !Number.isFinite(t)) return 0;
+    const e = this.candles.length - 1, i = this.candles[0]?.time ?? 0, s = this.candles[e]?.time ?? 0, r = this.detectCandleTimeframeMs();
+    if (t <= i) return 0;
+    if (t >= s + Math.max(r, 0)) return e;
+    const n = this.findCandleIndexAtOrAfter(t);
+    if (this.candles[n]?.time === t) return n;
+    const a = Math.max(0, n - 1), o = this.candles[a]?.time ?? 0, l = this.candles[n]?.time ?? 0;
+    return t < o + r || t - o <= l - t ? a : n;
+  }
+  findCandleIndexAtOrAfter(t) {
+    let e = 0, i = this.candles.length - 1;
+    for (; e < i; ) {
+      const s = Math.floor((e + i) / 2);
+      (this.candles[s]?.time ?? 0) < t ? e = s + 1 : i = s;
+    }
+    return e;
+  }
   getNextHorizontalZoom(t) {
     const { speed: e, min: i, max: s } = c.zoom.x, r = this.zoomX + t * e;
     return Math.max(i, Math.min(r, s));
   }
   getNextVerticalPriceRange(t) {
-    const { speed: e, min: i, max: s } = c.zoom.y, r = 1 - t * e, n = this.priceRange * r, o = this.initialPriceRange * (i / 100), a = this.initialPriceRange * (s / 100);
-    return Math.max(o, Math.min(n, a));
+    const { speed: e, min: i, max: s } = c.zoom.y, r = 1 - t * e, n = this.priceRange * r, a = this.initialPriceRange * (i / 100), o = this.initialPriceRange * (s / 100);
+    return Math.max(a, Math.min(n, o));
   }
   clearCanvas(t, e, i) {
     t.clearRect(0, 0, e, i);
@@ -979,7 +1065,7 @@ var h = {
     };
   }
   getPriceY(t, e) {
-    return E({
+    return Y({
       price: t,
       minPrice: this.minPrice,
       priceRange: this.priceRange,
@@ -995,13 +1081,13 @@ var h = {
 }, _t = class {
   #t;
   #e;
-  #r = null;
+  #n = null;
   #i = null;
   constructor({ ctx: t, config: e }) {
     this.#t = t, this.#e = e;
   }
   setViewport(t) {
-    this.#r = t;
+    this.#n = t;
   }
   setConfig(t) {
     this.#e = t;
@@ -1010,24 +1096,29 @@ var h = {
     this.#i = t ?? null;
   }
   render() {
-    if (!this.#r || !this.#i) return;
+    if (!this.#n || !this.#i) return;
     const { high: t, low: e } = this.#i;
-    Number.isFinite(t) && t > 0 && this.#u(t, "PDH"), Number.isFinite(e) && e > 0 && this.#u(e, "PDL");
+    Number.isFinite(t) && t > 0 && this.#h(t, "PDH"), Number.isFinite(e) && e > 0 && this.#h(e, "PDL");
   }
-  #u(t, e) {
-    if (!this.#r || !this.#e) return;
-    const i = this.#t, s = i.canvas, r = E({
+  #h(t, e) {
+    if (!this.#n || !this.#e) return;
+    const i = this.#t, s = i.canvas, r = Y({
       price: t,
-      minPrice: this.#r.minPrice,
-      priceRange: this.#r.priceRange,
+      minPrice: this.#n.minPrice,
+      priceRange: this.#n.priceRange,
       chartHeight: s.height
     });
     if (r < 0 || r > s.height) return;
-    const { line: n, text: o } = this.#e, a = s.width;
-    i.save(), i.font = o.font;
-    const l = i.measureText(e).width, d = a / 2, u = l / 2 + o.paddingX;
-    i.globalAlpha = n.opacity, i.strokeStyle = n.color, i.lineWidth = n.width, i.setLineDash(n.dash), i.beginPath(), i.moveTo(0, r), i.lineTo(d - u, r), i.stroke(), i.beginPath(), i.moveTo(d + u, r), i.lineTo(a, r), i.stroke(), i.setLineDash([]), i.globalAlpha = 1, i.fillStyle = o.color, i.textAlign = "center", i.textBaseline = "middle", i.fillText(e, d, r), i.restore();
+    const { line: n, text: a } = this.#e, o = s.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, r), i.lineTo(d - u, r), i.stroke(), i.beginPath(), i.moveTo(d + u, r), i.lineTo(o, r), i.stroke(), i.setLineDash([]), i.globalAlpha = 1, i.fillStyle = a.color, i.textAlign = "center", i.textBaseline = "middle", i.fillText(e, d, r), i.restore();
   }
+}, f = {
+  handleColor: h.background,
+  handleBorderColor: h.blue,
+  handleBorderThickness: 1.5,
+  handleRadius: 5
 }, vt = (t, e) => {
   const i = t.getBoundingClientRect(), s = t.width / i.width, r = t.height / i.height;
   return {
@@ -1038,7 +1129,7 @@ var h = {
 var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `shape-${Date.now()}-${Math.random().toString(16).slice(2)}`, q = (t, e) => vt(t, e), ht = (t, e) => ({
   time: e.getNearestCandleTimeForX(t.x),
   price: e.getPriceForY(t.y)
-}), C = (t, e) => ({
+}), v = (t, e) => ({
   x: e.getXForTime(t.time),
   y: e.getYForPrice(t.price)
 }), Gt = (t, e) => {
@@ -1051,22 +1142,22 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     width: s - i,
     height: n - r
   };
-}, K = (t, e, i) => Gt(C(t, i), C(e, i)), J = (t, e) => {
+}, K = (t, e, i) => Gt(v(t, i), v(e, i)), J = (t, e) => {
   const i = t.x - e.x, s = t.y - e.y;
   return Math.sqrt(i * i + s * s);
 }, yt = (t, e, i) => {
   const s = i.x - e.x, r = i.y - e.y, n = s * s + r * r;
   if (n === 0) return J(t, e);
-  const o = Math.max(0, Math.min(1, ((t.x - e.x) * s + (t.y - e.y) * r) / n));
+  const a = Math.max(0, Math.min(1, ((t.x - e.x) * s + (t.y - e.y) * r) / n));
   return J(t, {
-    x: e.x + o * s,
-    y: e.y + o * r
+    x: e.x + a * s,
+    y: e.y + a * r
   });
 }, wt = (t, e, i = 0) => t.x >= e.left - i && t.x <= e.right + i && t.y >= e.top - i && t.y <= e.bottom + i, Ut = (t, e, i = 8) => {
   if (!wt(t, e, i)) return !1;
-  const s = Math.abs(t.x - e.left) <= i, r = Math.abs(t.x - e.right) <= i, n = Math.abs(t.y - e.top) <= i, o = Math.abs(t.y - e.bottom) <= i, a = t.x >= e.left - i && t.x <= e.right + i, l = t.y >= e.top - i && t.y <= e.bottom + i;
-  return (s || r) && l || (n || o) && a;
-}, x = ({ shapeId: t, type: e, point: i, radius: s = 5, cursor: r, index: n }) => ({
+  const s = Math.abs(t.x - e.left) <= i, r = Math.abs(t.x - e.right) <= i, n = Math.abs(t.y - e.top) <= i, 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 (s || r) && l || (n || a) && o;
+}, P = ({ shapeId: t, type: e, point: i, radius: s = 5, cursor: r, index: n }) => ({
   shapeId: t,
   type: e,
   x: i.x,
@@ -1074,9 +1165,9 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   radius: s,
   cursor: r,
   index: n
-}), j = (t, e) => J(t, e) <= e.radius + 2, V = (t, e = 1) => t === "dashed" ? [e * 6, e * 4] : t === "dotted" ? [e, e * 3] : [], tt = (t, e, i) => {
-  t.strokeStyle = b(e.lineColor, e.lineOpacity), t.lineWidth = i ?? e.lineWidth, t.setLineDash(V(e.lineStyle, t.lineWidth));
-}, Pt = (t, e, i) => !e || i === void 0 || i <= 0 ? !1 : (t.fillStyle = b(e, i), !0), O = (t) => {
+}), j = (t, e) => J(t, e) <= e.radius + 2, z = (t, e = 1) => t === "dashed" ? [e * 6, e * 4] : t === "dotted" ? [e, e * 3] : [], tt = (t, e, i) => {
+  t.strokeStyle = x(e.lineColor, e.lineOpacity), t.lineWidth = i ?? e.lineWidth, t.setLineDash(z(e.lineStyle, t.lineWidth));
+}, bt = (t, e, i) => !e || i === void 0 || i <= 0 ? !1 : (t.fillStyle = x(e, i), !0), E = (t) => {
   t.setLineDash([]);
 }, $t = (t, e, i = {
   fillColor: "#ffffff",
@@ -1084,11 +1175,11 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   borderThickness: 3
 }) => {
   t.save(), t.beginPath(), t.arc(e.x, e.y, e.radius, 0, Math.PI * 2), t.fillStyle = i.fillColor, t.fill(), t.lineWidth = i.borderThickness, t.strokeStyle = i.borderColor, t.stroke(), t.restore();
-}, z = (t, e, i) => {
+}, O = (t, e, i) => {
   e.forEach((s) => {
     $t(t, s, i);
   });
-}, b = (t, e) => {
+}, x = (t, e) => {
   const i = Kt(e, 0, 1);
   return t.startsWith("rgba(") ? t : t.startsWith("rgb(") ? t.replace("rgb(", "rgba(").replace(")", `, ${i})`) : t.startsWith("#") ? qt(t, i) : t;
 }, qt = (t, e) => {
@@ -1113,12 +1204,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
 }, Jt = (t, e, i) => {
   const s = Z(t, e), r = s + i;
   return s >= 0 && r >= 0 && r < t.length ? t[r].time : e + Q(t) * i;
-}, ct = (t) => t instanceof MouseEvent && t.type === "contextmenu" ? !1 : "button" in t && t.type === "pointerdown" ? t.button === 0 : !0, f = {
-  handleColor: h.background,
-  handleBorderColor: h.blue,
-  handleBorderThickness: 1.5,
-  handleRadius: 5
-}, L = class I {
+}, ct = (t) => t instanceof MouseEvent && t.type === "contextmenu" ? !1 : "button" in t && t.type === "pointerdown" ? t.button === 0 : !0, L = class I {
   static defaultConfig = {
     levels: [
       {
@@ -1165,14 +1251,14 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     fillColor: "#808080",
     fillOpacity: 0.04
   };
-  static draw({ ctx: e, shape: i, converter: s, config: r = I.defaultConfig, selected: n = !1, hovered: o = !1 }) {
-    const [a, l] = i.vertices, d = C(a, s), u = C(l, s), g = K(a, l, s), v = Math.min(d.x, u.x), w = Math.max(d.x, u.x);
-    e.save(), Pt(e, r.fillColor, r.fillOpacity) && e.fillRect(g.left, g.top, g.width, g.height);
-    for (const m of r.levels) {
-      const S = dt(a.price, l.price, m.level), T = s.getYForPrice(S), k = m.lineWidth;
-      e.beginPath(), e.strokeStyle = b(m.color, m.opacity), e.lineWidth = k, e.setLineDash(V(m.lineStyle, k)), e.moveTo(v, T), e.lineTo(w, T), e.stroke(), m.label && (e.setLineDash([]), e.fillStyle = b(m.color, m.opacity), e.font = "11px sans-serif", e.textBaseline = "middle", e.fillText(Number(m.label).toFixed(2).toString(), w + 12, T));
+  static draw({ ctx: e, shape: i, converter: s, config: r = I.defaultConfig, selected: n = !1, hovered: a = !1 }) {
+    const [o, l] = i.vertices, d = v(o, s), u = v(l, s), g = K(o, l, s), p = Math.min(d.x, u.x), w = Math.max(d.x, u.x);
+    e.save(), bt(e, r.fillColor, r.fillOpacity) && e.fillRect(g.left, g.top, g.width, g.height);
+    for (const C of r.levels) {
+      const S = dt(o.price, l.price, C.level), T = s.getYForPrice(S), k = C.lineWidth;
+      e.beginPath(), e.strokeStyle = x(C.color, C.opacity), e.lineWidth = k, e.setLineDash(z(C.lineStyle, k)), e.moveTo(p, T), e.lineTo(w, T), e.stroke(), C.label && (e.setLineDash([]), e.fillStyle = x(C.color, C.opacity), e.font = "11px sans-serif", e.textBaseline = "middle", e.fillText(Number(C.label).toFixed(2).toString(), w + 12, T));
     }
-    O(e), (n || o) && z(e, I.getHandles(i, s), {
+    E(e), (n || a) && O(e, I.getHandles(i, s), {
       fillColor: f.handleColor,
       borderColor: f.handleBorderColor,
       borderThickness: f.handleBorderThickness
@@ -1192,27 +1278,27 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     });
   }
   static getHandles(e, i) {
-    const [s, r] = e.vertices, n = C(s, i), o = C(r, i);
-    return [x({
+    const [s, r] = e.vertices, n = v(s, i), a = v(r, i);
+    return [P({
       shapeId: e.id,
       type: "start",
       point: n,
       radius: f.handleRadius,
       cursor: "grab"
-    }), x({
+    }), P({
       shapeId: e.id,
       type: "end",
-      point: o,
+      point: a,
       radius: f.handleRadius,
       cursor: "grab"
     })];
   }
   static hitTest({ point: e, shape: i, converter: s, tolerance: r = 8, config: n = I.defaultConfig }) {
-    const [o, a] = i.vertices, l = C(o, s), d = C(a, s), u = Math.min(l.x, d.x), g = Math.max(l.x, d.x);
+    const [a, o] = i.vertices, l = v(a, s), d = v(o, s), u = Math.min(l.x, d.x), g = Math.max(l.x, d.x);
     if (e.x < u - r || e.x > g + r) return !1;
-    for (const v of n.levels) {
-      const w = dt(o.price, a.price, v.level), m = s.getYForPrice(w);
-      if (Math.abs(e.y - m) <= r) return !0;
+    for (const p of n.levels) {
+      const w = dt(a.price, o.price, p.level), C = s.getYForPrice(w);
+      if (Math.abs(e.y - C) <= r) return !0;
     }
     return !1;
   }
@@ -1237,23 +1323,23 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       vertices: [e.vertices[0], s]
     } : e;
   }
-}, M = class Y {
+}, R = class V {
   static defaultConfig = {
     lineWidth: 2,
     lineColor: "#2962ff",
     lineOpacity: 1,
     lineStyle: "solid"
   };
-  static draw({ ctx: e, shape: i, converter: s, config: r = Y.defaultConfig, selected: n = !1, hovered: o = !1 }) {
-    const [a, l] = i.vertices, d = C(a, s), u = C(l, s);
-    e.save(), tt(e, r), e.beginPath(), e.moveTo(d.x, d.y), e.lineTo(u.x, u.y), e.stroke(), O(e), (n || o) && z(e, Y.getHandles(i, s), {
+  static draw({ ctx: e, shape: i, converter: s, config: r = V.defaultConfig, selected: n = !1, hovered: a = !1 }) {
+    const [o, l] = i.vertices, d = v(o, s), u = v(l, s);
+    e.save(), tt(e, r), e.beginPath(), e.moveTo(d.x, d.y), e.lineTo(u.x, u.y), e.stroke(), E(e), (n || a) && O(e, V.getHandles(i, s), {
       fillColor: f.handleColor,
       borderColor: f.handleBorderColor,
       borderThickness: f.handleBorderThickness
     }), e.restore();
   }
-  static drawDraft({ ctx: e, vertices: i, converter: s, config: r = Y.defaultConfig }) {
-    Y.draw({
+  static drawDraft({ ctx: e, vertices: i, converter: s, config: r = V.defaultConfig }) {
+    V.draw({
       ctx: e,
       shape: {
         id: "__draft_trendline__",
@@ -1266,24 +1352,24 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     });
   }
   static getHandles(e, i) {
-    const [s, r] = e.vertices, n = C(s, i), o = C(r, i);
-    return [x({
+    const [s, r] = e.vertices, n = v(s, i), a = v(r, i);
+    return [P({
       shapeId: e.id,
       type: "start",
       point: n,
       radius: f.handleRadius,
       cursor: "grab"
-    }), x({
+    }), P({
       shapeId: e.id,
       type: "end",
-      point: o,
+      point: a,
       radius: f.handleRadius,
       cursor: "grab"
     })];
   }
   static hitTest({ point: e, shape: i, converter: s, tolerance: r = 8 }) {
-    const [n, o] = i.vertices;
-    return yt(e, C(n, s), C(o, s)) <= r;
+    const [n, a] = i.vertices;
+    return yt(e, v(n, s), v(a, s)) <= r;
   }
   static move(e, i) {
     return {
@@ -1306,7 +1392,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       vertices: [e.vertices[0], s]
     } : e;
   }
-}, R = class B {
+}, D = class B {
   static defaultConfig = {
     lineWidth: 2,
     lineColor: "#2962ff",
@@ -1315,19 +1401,19 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     fillColor: "#2962ff",
     fillOpacity: 0
   };
-  static draw({ ctx: e, shape: i, converter: s, config: r = B.defaultConfig, selected: n = !1, hovered: o = !1 }) {
-    const a = i.vertices.map((l) => C(l, s));
-    if (a.length !== 0) {
-      e.save(), tt(e, r), e.beginPath(), e.moveTo(a[0].x, a[0].y);
-      for (let l = 1; l < a.length; l += 1) e.lineTo(a[l].x, a[l].y);
-      e.stroke(), O(e), a.length >= 2 && B.drawEndArrow({
+  static draw({ ctx: e, shape: i, converter: s, config: r = B.defaultConfig, selected: n = !1, hovered: a = !1 }) {
+    const o = i.vertices.map((l) => v(l, s));
+    if (o.length !== 0) {
+      e.save(), tt(e, r), 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(), E(e), o.length >= 2 && B.drawEndArrow({
         ctx: e,
-        previousPoint: a[a.length - 2],
-        endPoint: a[a.length - 1],
+        previousPoint: o[o.length - 2],
+        endPoint: o[o.length - 1],
         color: r.lineColor,
         opacity: r.lineOpacity,
         lineWidth: r.lineWidth
-      }), (n || o) && z(e, B.getHandles(i, s), {
+      }), (n || a) && O(e, B.getHandles(i, s), {
         fillColor: f.handleColor,
         borderColor: f.handleBorderColor,
         borderThickness: f.handleBorderThickness
@@ -1335,13 +1421,13 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }
   }
   static drawDraft({ ctx: e, vertices: i, previewVertex: s, converter: r, config: n = B.defaultConfig }) {
-    const o = s ? [...i, s] : i;
+    const a = s ? [...i, s] : i;
     B.draw({
       ctx: e,
       shape: {
         id: "__draft_path__",
         type: "path",
-        vertices: o
+        vertices: a
       },
       converter: r,
       config: n,
@@ -1349,22 +1435,22 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     });
   }
   static getHandles(e, i) {
-    return e.vertices.map((s, r) => x({
+    return e.vertices.map((s, r) => P({
       shapeId: e.id,
       type: r === 0 ? "start" : r === e.vertices.length - 1 ? "end" : "move",
-      point: C(s, i),
+      point: v(s, i),
       radius: f.handleRadius,
       cursor: "grab",
       index: r
     }));
   }
   static hitTest({ point: e, shape: i, converter: s, tolerance: r = 8 }) {
-    const n = i.vertices.map((o) => C(o, s));
+    const n = i.vertices.map((a) => v(a, s));
     if (n.length === 1) {
-      const o = n[0], a = e.x - o.x, l = e.y - o.y;
-      return Math.sqrt(a * a + l * l) <= r;
+      const a = n[0], o = e.x - a.x, l = e.y - a.y;
+      return Math.sqrt(o * o + l * l) <= r;
     }
-    for (let o = 1; o < n.length; o += 1) if (yt(e, n[o - 1], n[o]) <= r) return !0;
+    for (let a = 1; a < n.length; a += 1) if (yt(e, n[a - 1], n[a]) <= r) return !0;
     return !1;
   }
   static move(e, i) {
@@ -1382,11 +1468,11 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       vertices: e.vertices.map((r, n) => n === i ? s : r)
     };
   }
-  static drawEndArrow({ ctx: e, previousPoint: i, endPoint: s, color: r, opacity: n, lineWidth: o }) {
-    const a = Math.atan2(s.y - i.y, s.x - i.x), l = 12, d = Math.PI / 7;
-    e.save(), e.beginPath(), e.strokeStyle = b(r, n), e.fillStyle = b(r, n), e.lineWidth = o, e.setLineDash([]), e.moveTo(s.x, s.y), e.lineTo(s.x - l * Math.cos(a - d), s.y - l * Math.sin(a - d)), e.lineTo(s.x - l * Math.cos(a + d), s.y - l * Math.sin(a + d)), e.closePath(), e.fill(), e.stroke(), e.restore();
+  static drawEndArrow({ ctx: e, previousPoint: i, endPoint: s, color: r, opacity: n, lineWidth: a }) {
+    const o = Math.atan2(s.y - i.y, s.x - i.x), l = 12, d = Math.PI / 7;
+    e.save(), e.beginPath(), e.strokeStyle = x(r, n), e.fillStyle = x(r, n), e.lineWidth = a, e.setLineDash([]), e.moveTo(s.x, s.y), e.lineTo(s.x - l * Math.cos(o - d), s.y - l * Math.sin(o - d)), e.lineTo(s.x - l * Math.cos(o + d), s.y - l * Math.sin(o + d)), e.closePath(), e.fill(), e.stroke(), e.restore();
   }
-}, D = class W {
+}, A = class W {
   static defaultConfig = {
     lineWidth: 2,
     lineColor: "#2962ff",
@@ -1399,9 +1485,9 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     textFontFamily: "Arial",
     textFontSize: 20
   };
-  static draw({ ctx: e, shape: i, converter: s, config: r = W.defaultConfig, selected: n = !1, hovered: o = !1 }) {
-    const [a, l] = i.vertices, d = K(a, l, s);
-    e.save(), Pt(e, r.fillColor, r.fillOpacity) && e.fillRect(d.left, d.top, d.width, d.height), tt(e, r), e.strokeRect(d.left, d.top, d.width, d.height), O(e), W.drawText(e, d, i.text, r), (n || o) && z(e, W.getHandles(i, s), {
+  static draw({ ctx: e, shape: i, converter: s, config: r = W.defaultConfig, selected: n = !1, hovered: a = !1 }) {
+    const [o, l] = i.vertices, d = K(o, l, s);
+    e.save(), bt(e, r.fillColor, r.fillOpacity) && e.fillRect(d.left, d.top, d.width, d.height), tt(e, r), e.strokeRect(d.left, d.top, d.width, d.height), E(e), W.drawText(e, d, i.text, r), (n || a) && O(e, W.getHandles(i, s), {
       fillColor: f.handleColor,
       borderColor: f.handleBorderColor,
       borderThickness: f.handleBorderThickness
@@ -1421,24 +1507,24 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     });
   }
   static getHandles(e, i) {
-    const [s, r] = e.vertices, n = C(s, i), o = C(r, i), a = n.x <= o.x, l = n.y <= o.y, d = a === l ? "nwse-resize" : "nesw-resize", u = a === l ? "nwse-resize" : "nesw-resize";
-    return [x({
+    const [s, r] = e.vertices, n = v(s, i), a = v(r, i), o = n.x <= a.x, l = n.y <= a.y, d = o === l ? "nwse-resize" : "nesw-resize", u = o === l ? "nwse-resize" : "nesw-resize";
+    return [P({
       shapeId: e.id,
       type: "start",
       point: n,
       radius: f.handleRadius,
       cursor: d
-    }), x({
+    }), P({
       shapeId: e.id,
       type: "end",
-      point: o,
+      point: a,
       radius: f.handleRadius,
       cursor: u
     })];
   }
   static hitTest({ point: e, shape: i, converter: s, tolerance: r = 8 }) {
-    const [n, o] = i.vertices;
-    return Ut(e, K(n, o, s), r);
+    const [n, a] = i.vertices;
+    return Ut(e, K(n, a, s), r);
   }
   static move(e, i) {
     return {
@@ -1465,22 +1551,22 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     const n = s?.trim();
     n && (e.save(), e.beginPath(), e.rect(i.left, i.top, i.width, i.height), e.clip(), e.font = `${r.textFontSize}px ${r.textFontFamily}`, e.globalAlpha = r.textOpacity, e.fillStyle = r.textColor, e.textAlign = "center", e.textBaseline = "middle", e.fillText(n, i.left + i.width / 2, i.top + i.height / 2), e.restore());
   }
-}, bt = [
+}, xt = [
   "USDJPY",
   "GBPJPY",
   "AUDJPY",
   "EURJPY",
   "NZDJPY",
   "CADJPY"
-], xt = ["BTCUSD", "ETHUSD"], St = [
+], Pt = ["BTCUSD", "ETHUSD"], St = [
   "XAUUSD",
   "USOIL",
   "UKOIL",
   "XAGUSD"
-], Tt = (t) => bt.some((e) => t.includes(e.slice(3))) ? 0.01 : xt.includes(t) ? 1 : St.includes(t) ? 0.01 : 1e-4, jt = (t, e) => bt.includes(t) ? e * 6.33806 : xt.includes(t) ? e * 1 : (St.includes(t), e * 10), ut = (t, e, i, s, r) => {
-  const n = r.split(".")[0], o = Tt(n), a = jt(n, s);
-  return (t === "buy" ? i - e : e - i) / o * a;
-}, H = class P {
+], Tt = (t) => xt.some((e) => t.includes(e.slice(3))) ? 0.01 : Pt.includes(t) ? 1 : St.includes(t) ? 0.01 : 1e-4, jt = (t, e) => xt.includes(t) ? e * 6.33806 : Pt.includes(t) ? e * 1 : (St.includes(t), e * 10), ut = (t, e, i, s, r) => {
+  const n = r.split(".")[0], a = Tt(n), o = jt(n, s);
+  return (t === "buy" ? i - e : e - i) / a * o;
+}, H = class b {
   static defaultLongConfig = {
     defaultWidthCandles: 10,
     defaultStopLossPercent: 0.25,
@@ -1498,48 +1584,48 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     midLineWidth: 1,
     midLineStyle: "dashed"
   };
-  static defaultShortConfig = { ...P.defaultLongConfig };
-  static draw({ ctx: e, activeSymbol: i, shape: s, converter: r, config: n = s.type === "longPosition" ? P.defaultLongConfig : P.defaultShortConfig, selected: o = !1, hovered: a = !1 }) {
-    const l = P.getGeometry(s, r);
-    e.save(), e.fillStyle = b(n.profitFillColor, n.profitFillOpacity), e.fillRect(l.profitBox.left, l.profitBox.top, l.profitBox.width, l.profitBox.height), e.fillStyle = b(n.lossFillColor, n.lossFillOpacity), e.fillRect(l.lossBox.left, l.lossBox.top, l.lossBox.width, l.lossBox.height);
+  static defaultShortConfig = { ...b.defaultLongConfig };
+  static draw({ ctx: e, activeSymbol: i, shape: s, converter: r, config: n = s.type === "longPosition" ? b.defaultLongConfig : b.defaultShortConfig, selected: a = !1, hovered: o = !1 }) {
+    const l = b.getGeometry(s, r);
+    e.save(), e.fillStyle = x(n.profitFillColor, n.profitFillOpacity), e.fillRect(l.profitBox.left, l.profitBox.top, l.profitBox.width, l.profitBox.height), e.fillStyle = x(n.lossFillColor, n.lossFillOpacity), e.fillRect(l.lossBox.left, l.lossBox.top, l.lossBox.width, l.lossBox.height);
     const d = n.borderWidth;
-    e.strokeStyle = b(n.borderColor, n.borderOpacity), e.lineWidth = d, e.setLineDash(V(n.borderStyle, d)), e.strokeRect(l.box.left, l.box.top, l.box.width, l.box.height), e.beginPath(), e.strokeStyle = b(n.midLineColor, n.midLineOpacity), e.lineWidth = n.midLineWidth, e.setLineDash(V(n.midLineStyle, n.midLineWidth)), e.moveTo(l.box.left, l.entryY), e.lineTo(l.box.right, l.entryY), e.stroke(), O(e), P.drawLabels({
+    e.strokeStyle = x(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 = x(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), b.drawLabels({
       ctx: e,
       activeSymbol: i,
       shape: s,
       geometry: l,
       config: n
-    }), (o || a) && z(e, P.getHandles(s, r), {
+    }), (a || o) && O(e, b.getHandles(s, r), {
       fillColor: f.handleColor,
       borderColor: f.handleBorderColor,
       borderThickness: f.handleBorderThickness
     }), e.restore();
   }
-  static createFromVertex({ id: e, type: i, entry: s, converter: r, config: n = i === "longPosition" ? P.defaultLongConfig : P.defaultShortConfig }) {
-    const o = r.getTimeForX(r.getXForTime(s.time) + r.getCandleWidth() * n.defaultWidthCandles), a = n.defaultStopLossPercent;
+  static createFromVertex({ id: e, type: i, entry: s, converter: r, config: n = i === "longPosition" ? b.defaultLongConfig : b.defaultShortConfig }) {
+    const a = r.getTimeForX(r.getXForTime(s.time) + r.getCandleWidth() * n.defaultWidthCandles), o = n.defaultStopLossPercent;
     return {
       id: e,
       type: i,
       entry: s,
-      endTime: o,
-      stopLossPercent: a,
-      takeProfitPercent: a * n.defaultRiskRewardRatio
+      endTime: a,
+      stopLossPercent: o,
+      takeProfitPercent: o * n.defaultRiskRewardRatio
     };
   }
   static getGeometry(e, i) {
-    const s = C(e.entry, i), r = i.getXForTime(e.endTime), n = Math.min(s.x, r), o = Math.max(s.x, r), a = e.type === "longPosition", l = a ? e.takeProfitPercent : e.stopLossPercent, d = a ? e.stopLossPercent : e.takeProfitPercent, u = e.entry.price * (1 + l / 100), g = e.entry.price * (1 - d / 100), v = i.getYForPrice(u), w = i.getYForPrice(g), m = Math.min(v, w, s.y), S = Math.max(v, w, s.y), T = {
+    const s = v(e.entry, i), r = i.getXForTime(e.endTime), n = Math.min(s.x, r), a = Math.max(s.x, r), 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), p = i.getYForPrice(u), w = i.getYForPrice(g), C = Math.min(p, w, s.y), S = Math.max(p, w, s.y), T = {
       left: n,
-      top: m,
-      right: o,
+      top: C,
+      right: a,
       bottom: s.y,
-      width: o - n,
-      height: Math.abs(s.y - m)
+      width: a - n,
+      height: Math.abs(s.y - C)
     }, k = {
       left: n,
       top: s.y,
-      right: o,
+      right: a,
       bottom: S,
-      width: o - n,
+      width: a - n,
       height: Math.abs(S - s.y)
     };
     return {
@@ -1550,20 +1636,20 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       lowerPrice: g,
       box: {
         left: n,
-        top: m,
-        right: o,
+        top: C,
+        right: a,
         bottom: S,
-        width: o - n,
-        height: S - m
+        width: a - n,
+        height: S - C
       },
-      profitBox: a ? T : k,
-      lossBox: a ? k : T
+      profitBox: o ? T : k,
+      lossBox: o ? k : T
     };
   }
   static getHandles(e, i) {
-    const s = P.getGeometry(e, i);
+    const s = b.getGeometry(e, i);
     return [
-      x({
+      P({
         shapeId: e.id,
         type: "upperHeight",
         point: {
@@ -1573,7 +1659,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         radius: f.handleRadius,
         cursor: "ns-resize"
       }),
-      x({
+      P({
         shapeId: e.id,
         type: "lowerHeight",
         point: {
@@ -1583,7 +1669,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         radius: f.handleRadius,
         cursor: "ns-resize"
       }),
-      x({
+      P({
         shapeId: e.id,
         type: "start",
         point: {
@@ -1593,7 +1679,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         radius: f.handleRadius,
         cursor: "ns-resize"
       }),
-      x({
+      P({
         shapeId: e.id,
         type: "end",
         point: {
@@ -1606,7 +1692,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     ];
   }
   static hitTest({ point: e, shape: i, converter: s }) {
-    return P.getHandles(i, s).some((r) => j(e, r)) ? !0 : wt(e, P.getGeometry(i, s).box);
+    return b.getHandles(i, s).some((r) => j(e, r)) ? !0 : wt(e, b.getGeometry(i, s).box);
   }
   static move(e, i) {
     return {
@@ -1628,7 +1714,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     } : i === "end" ? {
       ...e,
       endTime: s.time
-    } : i === "upperHeight" ? P.resizeUpperHeight(e, s.price) : i === "lowerHeight" ? P.resizeLowerHeight(e, s.price) : {
+    } : i === "upperHeight" ? b.resizeUpperHeight(e, s.price) : i === "lowerHeight" ? b.resizeLowerHeight(e, s.price) : {
       ...e,
       endTime: r.getTimeForX(r.getXForTime(e.endTime))
     };
@@ -1655,11 +1741,11 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   static drawLabels({ ctx: e, activeSymbol: i, shape: s, geometry: r, config: n }) {
     e.save(), e.font = "11px sans-serif", e.textBaseline = "middle";
-    const o = s.type, a = Tt(i), l = s.entry.price * (s.takeProfitPercent / 100) / a, d = s.entry.price * (s.stopLossPercent / 100) / a, u = r.box.left + 6, g = l / d;
-    e.fillStyle = b(n.profitFillColor, 0.95);
-    const v = o === "longPosition" ? r.profitBox.top + r.profitBox.height / 10 : r.profitBox.bottom - r.profitBox.height / 10;
-    e.fillText(`${l.toFixed(2)} (${g.toFixed(2)})`, u, v), e.fillStyle = b(n.lossFillColor, 0.95);
-    const w = o === "shortPosition" ? r.lossBox.top + r.lossBox.height / 10 : r.lossBox.bottom - r.lossBox.height / 10;
+    const a = s.type, o = Tt(i), l = s.entry.price * (s.takeProfitPercent / 100) / o, d = s.entry.price * (s.stopLossPercent / 100) / o, u = r.box.left + 6, g = l / d;
+    e.fillStyle = x(n.profitFillColor, 0.95);
+    const p = a === "longPosition" ? r.profitBox.top + r.profitBox.height / 10 : r.profitBox.bottom - r.profitBox.height / 10;
+    e.fillText(`${l.toFixed(2)} (${g.toFixed(2)})`, u, p), e.fillStyle = x(n.lossFillColor, 0.95);
+    const w = a === "shortPosition" ? r.lossBox.top + r.lossBox.height / 10 : r.lossBox.bottom - r.lossBox.height / 10;
     e.fillText(d.toFixed(1), u, w);
   }
 }, Zt = class {
@@ -1769,7 +1855,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     if (!ct(t)) return !1;
     const s = this.findHandleAtPoint(e);
     if (s) {
-      const n = this.shapes.find((o) => o.id === s.shapeId);
+      const n = this.shapes.find((a) => a.id === s.shapeId);
       return n ? (this.setSelectedShapeId(n.id), this.checkTouchDoubleTap(n, t), this.dragState = {
         edit: {
           mode: "resize",
@@ -1953,10 +2039,10 @@ var $ = () => 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" ? 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);
+    return t.type === "trendline" ? R.move(t, e) : t.type === "rectangle" ? A.move(t, e) : t.type === "path" ? D.move(t, e) : t.type === "fibRetracement" ? L.move(t, e) : H.move(t, e);
   }
   resizeShape(t, e, i, s) {
-    return t.type === "trendline" ? M.resize(t, e, i) : t.type === "rectangle" ? D.resize(t, e, i) : t.type === "fibRetracement" ? L.resize(t, e, i) : t.type === "path" ? R.resize(t, s ?? -1, i) : H.resize({
+    return t.type === "trendline" ? R.resize(t, e, i) : t.type === "rectangle" ? A.resize(t, e, i) : t.type === "fibRetracement" ? L.resize(t, e, i) : t.type === "path" ? D.resize(t, s ?? -1, i) : H.resize({
       shape: t,
       handleType: e,
       vertex: i,
@@ -1966,7 +2052,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   drawShape({ shape: t, converter: e, selected: i, hovered: s }) {
     if (t.type === "trendline") {
       const n = this.getTrendlineConfig(t);
-      M.draw({
+      R.draw({
         ctx: this.ctx,
         shape: t,
         converter: e,
@@ -1978,7 +2064,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }
     if (t.type === "rectangle") {
       const n = this.getRectangleConfig(t);
-      D.draw({
+      A.draw({
         ctx: this.ctx,
         shape: t,
         converter: e,
@@ -1990,7 +2076,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }
     if (t.type === "path") {
       const n = this.getPathConfig(t);
-      R.draw({
+      D.draw({
         ctx: this.ctx,
         shape: t,
         converter: e,
@@ -2026,7 +2112,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   drawDraft(t) {
     if (this.draft) {
       if (this.draft.type === "trendline") {
-        M.drawDraft({
+        R.drawDraft({
           ctx: this.ctx,
           vertices: this.draft.vertices,
           converter: t,
@@ -2035,7 +2121,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         return;
       }
       if (this.draft.type === "rectangle") {
-        D.drawDraft({
+        A.drawDraft({
           ctx: this.ctx,
           vertices: this.draft.vertices,
           converter: t,
@@ -2052,7 +2138,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         });
         return;
       }
-      this.draft.type === "path" && R.drawDraft({
+      this.draft.type === "path" && D.drawDraft({
         ctx: this.ctx,
         vertices: this.draft.vertices,
         previewVertex: this.draft.previewVertex,
@@ -2070,7 +2156,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     i && e.push(i), s && e.push(s), this.handleHitboxes = e.flatMap((r) => this.getShapeHandles(r, t));
   }
   getShapeHandles(t, e) {
-    return t.type === "trendline" ? M.getHandles(t, e) : t.type === "rectangle" ? D.getHandles(t, e) : t.type === "path" ? R.getHandles(t, e) : t.type === "fibRetracement" ? L.getHandles(t, e) : H.getHandles(t, e);
+    return t.type === "trendline" ? R.getHandles(t, e) : t.type === "rectangle" ? A.getHandles(t, e) : t.type === "path" ? D.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) {
@@ -2093,15 +2179,15 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     return null;
   }
   isShapeHit(t, e, i) {
-    return t.type === "trendline" ? M.hitTest({
+    return t.type === "trendline" ? R.hitTest({
       point: e,
       shape: t,
       converter: i
-    }) : t.type === "rectangle" ? D.hitTest({
+    }) : t.type === "rectangle" ? A.hitTest({
       point: e,
       shape: t,
       converter: i
-    }) : t.type === "path" ? R.hitTest({
+    }) : t.type === "path" ? D.hitTest({
       point: e,
       shape: t,
       converter: i
@@ -2219,7 +2305,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     return e >= 0 && e < this.candles.length ? this.candles[e].time : this.candles.length === 0 ? Date.now() : Jt(this.candles, this.candles[0].time, e);
   }
   getYForPrice(t) {
-    return this.viewport ? E({
+    return this.viewport ? Y({
       price: t,
       minPrice: this.viewport.minPrice,
       priceRange: this.viewport.priceRange,
@@ -2240,15 +2326,15 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   mergeConfig(t) {
     return {
       trendline: {
-        ...M.defaultConfig,
+        ...R.defaultConfig,
         ...t?.trendline ?? {}
       },
       rectangle: {
-        ...D.defaultConfig,
+        ...A.defaultConfig,
         ...t?.rectangle ?? {}
       },
       path: {
-        ...R.defaultConfig,
+        ...D.defaultConfig,
         ...t?.path ?? {}
       },
       fibRetracement: {
@@ -2315,53 +2401,53 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     for (const t of this.trades) this.drawTrade({ trade: t });
     this.drawTemporaryProtectionDrag();
   }
-  createHitBox = ({ price: t, trade: e, type: i, x: s, y: r, width: n, height: o, viewport: a }) => {
-    const { showCloseSection: l, widthClose: d } = this.getHandleStyleConfig(i).handle, u = l ? d : 0, g = n - u, v = s + n - u;
+  createHitBox = ({ price: t, trade: e, type: i, x: s, y: r, width: n, height: a, viewport: o }) => {
+    const { showCloseSection: l, widthClose: d } = this.getHandleStyleConfig(i).handle, u = l ? d : 0, g = n - u, p = s + n - u;
     return {
       kind: "existingHandle",
-      price: p(t),
+      price: m(t),
       trade: e,
       type: i,
       x: s,
       y: r,
       width: n,
-      height: o,
-      viewport: a,
+      height: a,
+      viewport: o,
       labelArea: {
         x: s,
         y: r,
         width: g,
-        height: o
+        height: a
       },
       closeButtonArea: {
-        x: v,
+        x: p,
         y: r,
         width: u,
-        height: o
+        height: a
       }
     };
   };
-  createMissingProtectionHitBox = ({ price: t, trade: e, type: i, x: s, y: r, width: n, height: o, viewport: a }) => ({
+  createMissingProtectionHitBox = ({ price: t, trade: e, type: i, x: s, y: r, width: n, height: a, viewport: o }) => ({
     kind: "missingProtectionHandle",
-    price: p(t),
+    price: m(t),
     trade: e,
     type: i,
     x: s,
     y: r,
     width: n,
-    height: o,
-    viewport: a,
+    height: a,
+    viewport: o,
     labelArea: {
       x: s,
       y: r,
       width: n,
-      height: o
+      height: a
     },
     closeButtonArea: {
       x: s + n,
       y: r,
       width: 0,
-      height: o
+      height: a
     }
   });
   drawTrade({ trade: t }) {
@@ -2442,20 +2528,20 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       padding: Math.max(1, s.borderWidth)
     }), r.save(), r.globalAlpha = s.backgroundOpacity, r.fillStyle = s.backgroundColor, r.fillRect(t, e, i, s.height), r.globalAlpha = s.borderOpacity, r.strokeStyle = s.borderColor, r.lineWidth = s.borderWidth, r.strokeRect(t, e, i, s.height), r.restore();
   }
-  drawHandleSections({ handleType: t, handleX: e, handleY: i, handleWidth: s, handleHeight: r, handleConfig: n, trade: o, y: a }) {
+  drawHandleSections({ handleType: t, handleX: e, handleY: i, handleWidth: s, handleHeight: r, handleConfig: n, trade: a, y: o }) {
     const l = this.#e, d = c.tradeHandles, u = this.getHandleSections({
       handleType: t,
       handleConfig: n,
-      trade: o
+      trade: a
     });
     let g = e;
     l.save(), l.font = d.font, l.textBaseline = "middle", l.globalAlpha = d.textOpacity;
-    for (const v of u)
-      v.visible && (this.drawHandleSectionLabel({
-        section: v,
+    for (const p of u)
+      p.visible && (this.drawHandleSectionLabel({
+        section: p,
         currentX: g,
-        y: a
-      }), g += v.width, g < e + s && this.drawHandleSectionDivider({
+        y: o
+      }), g += p.width, g < e + s && this.drawHandleSectionDivider({
         x: g,
         y1: i + 4,
         y2: i + r - 4,
@@ -2504,7 +2590,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     return this.getProtectionDirection({
       trade: e,
       type: i
-    }) > 0 ? p(Math.max(t, e.openPrice)) : p(Math.min(t, e.openPrice));
+    }) > 0 ? m(Math.max(t, e.openPrice)) : m(Math.min(t, e.openPrice));
   }
   clearCanvas() {
     this.#e.clearRect(0, 0, this.#t.width, this.#t.height);
@@ -2523,7 +2609,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     if (!this.viewport) return null;
     const e = this.getTimeX(t.openTime), i = this.getTimeX(t.closeTime);
     if (e === null || i === null) return null;
-    const s = this.getPriceY(t.openPrice, this.viewport), r = this.getPriceY(t.closePrice, this.viewport), n = c.closedTradeIndicators.arrow, o = n.width, a = n.height;
+    const s = this.getPriceY(t.openPrice, this.viewport), r = this.getPriceY(t.closePrice, this.viewport), n = c.closedTradeIndicators.arrow, a = n.width, o = n.height;
     return {
       trade: t,
       start: {
@@ -2538,8 +2624,8 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         time: t.closeTime,
         price: t.closePrice
       },
-      arrowWidth: o,
-      arrowHeight: a
+      arrowWidth: a,
+      arrowHeight: o
     };
   }
   drawClosedTradeConnector({ start: t, close: e }) {
@@ -2555,7 +2641,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   drawClosedTradeArrows({ trade: t, start: e, close: i, arrowWidth: s, arrowHeight: r }) {
     const n = c.closedTradeIndicators.arrow;
     if (!n.visible) return;
-    const o = t.type === "buy" ? "sell" : "buy";
+    const a = t.type === "buy" ? "sell" : "buy";
     this.drawClosedTradeArrow({
       x: e.x,
       y: e.y,
@@ -2566,7 +2652,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }), this.drawClosedTradeArrow({
       x: i.x,
       y: i.y,
-      type: o,
+      type: a,
       width: s,
       height: r,
       config: n
@@ -2574,10 +2660,10 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   drawClosedTradeArrow({ x: t, y: e, type: i, width: s, height: r, config: n }) {
     if (s <= 0 || r <= 0) return;
-    const o = this.#e, a = i === "buy", l = a ? n.buyColor : n.sellColor, d = a ? n.buyBorderColor : n.sellBorderColor, u = a ? 1 : -1, g = Math.max(1, s / n.shaftWidthRatio), v = g + n.borderWidth * 2, w = t, m = e + u * (v / 2), S = t, T = m + u * r, k = r * n.headHeightRatio, et = s / 2, Ht = w - et, kt = w + et, N = m + u * k, it = () => {
-      o.beginPath(), o.moveTo(S, T), o.lineTo(w, N), o.moveTo(w, m), o.lineTo(Ht, N), o.moveTo(w, m), o.lineTo(kt, N), o.stroke();
+    const a = this.#e, o = i === "buy", l = o ? n.buyColor : n.sellColor, d = o ? n.buyBorderColor : n.sellBorderColor, u = o ? 1 : -1, g = Math.max(1, s / n.shaftWidthRatio), p = g + n.borderWidth * 2, w = t, C = e + u * (p / 2), S = t, T = C + u * r, k = r * n.headHeightRatio, et = s / 2, Ht = w - et, Mt = w + et, N = C + u * k, it = () => {
+      a.beginPath(), a.moveTo(S, T), a.lineTo(w, N), a.moveTo(w, C), a.lineTo(Ht, N), a.moveTo(w, C), a.lineTo(Mt, N), a.stroke();
     };
-    o.save(), o.globalAlpha = n.opacity, o.lineCap = "round", o.lineJoin = "round", o.strokeStyle = d, o.lineWidth = v, it(), o.strokeStyle = l, o.lineWidth = g, it(), o.restore();
+    a.save(), a.globalAlpha = n.opacity, a.lineCap = "round", a.lineJoin = "round", a.strokeStyle = d, a.lineWidth = p, it(), a.strokeStyle = l, a.lineWidth = g, it(), a.restore();
   }
   getTimeX(t) {
     if (!this.viewport || this.candles.length === 0 || !Number.isFinite(t)) return null;
@@ -2592,9 +2678,9 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       const d = this.candles.length - 1, u = this.getCandleTimeInterval(d), g = (e - s.time) / u;
       return this.getCandleCenterX(d) + g * this.viewport.candleSpacing;
     }
-    const r = this.getFirstCandleIndexAtOrAfterTime(e), n = Math.max(0, r - 1), o = this.candles[n], a = this.candles[r];
-    if (!o || !a || a.time === o.time) return this.getCandleCenterX(n);
-    const l = (e - o.time) / (a.time - o.time);
+    const r = this.getFirstCandleIndexAtOrAfterTime(e), n = Math.max(0, r - 1), a = this.candles[n], o = this.candles[r];
+    if (!a || !o || o.time === a.time) return this.getCandleCenterX(n);
+    const l = (e - a.time) / (o.time - a.time);
     return this.getCandleCenterX(n) + l * this.viewport.candleSpacing;
   }
   normalizeTimestamp(t) {
@@ -2617,7 +2703,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   getTradeHandleRenderState({ price: t, type: e, trade: i }) {
     if (!this.viewport) return null;
-    const s = this.viewport, r = this.getPriceY(t, s), n = this.getHandleStyleConfig(e), o = n.handle, a = n.handleLine, l = this.getHandleWidth(o), d = o.height;
+    const s = this.viewport, r = this.getPriceY(t, s), n = this.getHandleStyleConfig(e), a = n.handle, o = n.handleLine, l = this.getHandleWidth(a), d = a.height;
     return {
       price: t,
       type: e,
@@ -2625,11 +2711,11 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       viewport: s,
       y: r,
       handleStyleConfig: n,
-      handleConfig: o,
-      lineConfig: a,
+      handleConfig: a,
+      lineConfig: o,
       handleX: this.getHandleX({
         handleWidth: l,
-        config: o
+        config: a
       }),
       handleY: r - d / 2,
       handleWidth: l,
@@ -2637,7 +2723,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     };
   }
   getPriceY(t, e) {
-    return E({
+    return Y({
       price: t,
       minPrice: e.minPrice,
       priceRange: e.priceRange,
@@ -2781,12 +2867,12 @@ var $ = () => 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: s }) {
-    const r = this.getMissingProtectionHandleConfig(t), n = r.width, o = r.height, a = this.getMissingProtectionHandleX({
+    const r = this.getMissingProtectionHandleConfig(t), n = r.width, a = r.height, o = this.getMissingProtectionHandleX({
       type: t,
       config: r,
       startPriceRenderState: i,
       visibleTypes: s
-    }), l = i.y - o / 2;
+    }), l = i.y - a / 2;
     return {
       price: e.openPrice,
       type: t,
@@ -2794,10 +2880,10 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       viewport: i.viewport,
       y: i.y,
       config: r,
-      handleX: a,
+      handleX: o,
       handleY: l,
       handleWidth: n,
-      handleHeight: o
+      handleHeight: a
     };
   }
   getMissingProtectionHandleX({ type: t, config: e, startPriceRenderState: i, visibleTypes: s }) {
@@ -2825,8 +2911,8 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }), r.save(), r.globalAlpha = s.backgroundOpacity, r.fillStyle = s.backgroundColor, r.fillRect(t, e, i, s.height), r.globalAlpha = s.borderOpacity, r.strokeStyle = s.borderColor, r.lineWidth = s.borderWidth, r.strokeRect(t, e, i, s.height), r.restore();
   }
   drawMissingProtectionHandleLabel({ type: t, handleX: e, y: i, handleWidth: s, config: r }) {
-    const n = this.#e, o = t === "stopLoss" ? "SL" : "TP", a = e + s / 2;
-    n.save(), n.font = r.font, n.textBaseline = "middle", n.globalAlpha = r.textOpacity, n.fillStyle = r.textColor, n.fillText(o, a - n.measureText(o).width / 2, i), n.restore();
+    const n = this.#e, a = t === "stopLoss" ? "SL" : "TP", o = e + s / 2;
+    n.save(), n.font = r.font, n.textBaseline = "middle", n.globalAlpha = r.textOpacity, n.fillStyle = r.textColor, n.fillText(a, o - n.measureText(a).width / 2, i), n.restore();
   }
   drawTemporaryProtectionDrag() {
     const t = this.getTemporaryProtectionRenderState();
@@ -2839,7 +2925,7 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   getTemporaryProtectionRenderState() {
     if (!this.temporaryProtectionDrag) return null;
-    const { trade: t, type: e, viewport: i } = this.temporaryProtectionDrag, s = p(this.temporaryProtectionDrag.price), r = this.getPriceY(s, i), n = this.getTemporaryProtectionHandleConfig(e), o = this.getTemporaryProtectionLineConfig(e), a = n.widthPNL, l = n.height;
+    const { trade: t, type: e, viewport: i } = this.temporaryProtectionDrag, s = m(this.temporaryProtectionDrag.price), r = this.getPriceY(s, i), n = this.getTemporaryProtectionHandleConfig(e), a = this.getTemporaryProtectionLineConfig(e), o = n.widthPNL, l = n.height;
     return {
       price: s,
       type: e,
@@ -2847,13 +2933,13 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       viewport: i,
       y: r,
       handleConfig: n,
-      lineConfig: o,
+      lineConfig: a,
       handleX: this.getTemporaryProtectionHandleX({
-        handleWidth: a,
+        handleWidth: o,
         config: n
       }),
       handleY: r - l / 2,
-      handleWidth: a,
+      handleWidth: o,
       handleHeight: l
     };
   }
@@ -2875,9 +2961,9 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       padding: Math.max(1, s.borderWidth)
     }), r.save(), r.globalAlpha = s.backgroundOpacity, r.fillStyle = s.backgroundColor, r.fillRect(t, e, i, s.height), r.globalAlpha = s.borderOpacity, r.strokeStyle = s.borderColor, r.lineWidth = s.borderWidth, r.strokeRect(t, e, i, s.height), r.restore();
   }
-  drawTemporaryProtectionPnLLabel({ trade: t, type: e, price: i, handleX: s, y: r, handleWidth: n, handleConfig: o }) {
-    const a = this.#e, l = ut(t.type, t.openPrice, i, t.volume, t.symbol), d = this.formatPnlLabel(l), u = s + n / 2;
-    a.save(), a.font = o.font, a.textBaseline = "middle", a.globalAlpha = o.textOpacity, a.fillStyle = this.getProtectionPnlTextColor(e), a.fillText(d, u - a.measureText(d).width / 2, r), a.restore();
+  drawTemporaryProtectionPnLLabel({ trade: t, type: e, price: i, handleX: s, y: r, handleWidth: n, handleConfig: a }) {
+    const o = this.#e, l = ut(t.type, t.openPrice, i, t.volume, t.symbol), d = this.formatPnlLabel(l), u = s + 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, r), o.restore();
   }
   clearRectArea({ x: t, y: e, width: i, height: s, padding: r = 0 }) {
     this.#e.clearRect(t - r, e - r, i + r * 2, s + r * 2);
@@ -2912,31 +2998,31 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
 ], ee = class {
   #t;
   #e;
-  #r;
+  #n;
   #i;
-  #u;
-  #s;
-  #l;
+  #h;
   #g;
-  #n;
+  #s;
+  #o;
+  #f;
+  #r = null;
   #a = null;
-  #o = null;
   #d = !1;
-  #h = 0;
-  #m = 0;
+  #u = 0;
+  #l = 0;
   constructor(t) {
-    this.#t = t.canvas, this.#e = t.getHandleHitboxes, this.#r = t.getCurrentPrice, this.#i = t.onDrag, this.#u = t.onMissingProtectionDrag, this.#s = t.onMissingProtectionDragEnd, this.#l = t.onMissingProtectionDragCancel, this.#g = t.onTradeModified, this.#n = t.onTradeCloseClicked;
+    this.#t = t.canvas, this.#e = t.getHandleHitboxes, this.#n = t.getCurrentPrice, this.#i = t.onDrag, this.#h = t.onMissingProtectionDrag, this.#g = t.onMissingProtectionDragEnd, this.#s = t.onMissingProtectionDragCancel, this.#o = t.onTradeModified, this.#f = t.onTradeCloseClicked;
   }
   cancelActiveInteraction() {
-    this.#o && this.#l?.(), this.#a = null, this.#o = null, this.#d = !1, this.#h = 0, this.#m = 0;
+    this.#a && this.#s?.(), this.#r = null, this.#a = null, this.#d = !1, this.#u = 0, this.#l = 0;
   }
   handlePointerEvent(t) {
     if (!this.isSupportedEventType(t.type)) return !1;
     const e = this.getCanvasMousePoint(t);
-    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 === "pointermove" && this.#a) return this.handleActiveMissingProtectionDrag(t, e);
+    if (t.type === "pointermove" && this.#r) return this.handleActiveDrag(t, e);
     if (t.type === "pointerup")
-      return this.#o ? this.handleMissingProtectionDragEnd() : this.handleDragEnd();
+      return this.#a ? this.handleMissingProtectionDragEnd() : this.handleDragEnd();
     const i = this.getHoveredHitbox(e);
     return i ? this.handleHoveredHitbox(t, i, e) : (this.resetCursorIfIdle(), !1);
   }
@@ -2951,67 +3037,67 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     };
   }
   handleActiveDrag(t, e) {
-    if (!this.#a) return !1;
+    if (!this.#r) return !1;
     const i = this.getNextDragPrice(e.y);
-    return this.#a.price = i, this.#i?.({
-      trade: this.#a.trade,
-      type: this.#a.type,
+    return this.#r.price = i, this.#i?.({
+      trade: this.#r.trade,
+      type: this.#r.type,
       price: i
     }), this.consumeEvent(t), !0;
   }
   handleActiveMissingProtectionDrag(t, e) {
-    if (!this.#o || !this.isProtectionHandleType(this.#o.type)) return !1;
-    const i = e.y - this.#h, s = c.tradeHandles.missingProtectionHandles.dragActivationThresholdPx;
+    if (!this.#a || !this.isProtectionHandleType(this.#a.type)) return !1;
+    const i = e.y - this.#u, s = c.tradeHandles.missingProtectionHandles.dragActivationThresholdPx;
     if (!this.#d && Math.abs(i) < s)
       return this.consumeEvent(t), !0;
     this.#d = !0;
     const r = this.getNextMissingProtectionPrice(e.y);
-    return this.#o.price = r, this.#u?.({
-      trade: this.#o.trade,
-      type: this.#o.type,
+    return this.#a.price = r, this.#h?.({
+      trade: this.#a.trade,
+      type: this.#a.type,
       price: r
     }), this.consumeEvent(t), !0;
   }
   getNextDragPrice(t) {
-    if (!this.#a) return 0;
-    const e = t - this.#h, i = this.#a.viewport.priceRange / this.#t.height, s = p(this.#m - e * i);
-    return this.isProtectionHandleType(this.#a.type) ? this.constrainExistingProtectionPrice({
+    if (!this.#r) return 0;
+    const e = t - this.#u, i = this.#r.viewport.priceRange / this.#t.height, s = m(this.#l - e * i);
+    return this.isProtectionHandleType(this.#r.type) ? this.constrainExistingProtectionPrice({
       price: s,
-      hitbox: this.#a,
-      type: this.#a.type
+      hitbox: this.#r,
+      type: this.#r.type
     }) : s;
   }
   getNextMissingProtectionPrice(t) {
-    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);
+    if (!this.#a || !this.isProtectionHandleType(this.#a.type)) return 0;
+    const e = m(this.#a.viewport.minPrice + (this.#t.height - t) / this.#t.height * this.#a.viewport.priceRange);
     return this.constrainProtectionPrice({
       price: e,
-      hitbox: this.#o,
-      type: this.#o.type
+      hitbox: this.#a,
+      type: this.#a.type
     });
   }
   handleDragEnd() {
-    return this.#a && this.modifyActiveDragTrade(), this.#a = null, !1;
+    return this.#r && this.modifyActiveDragTrade(), this.#r = null, !1;
   }
   handleMissingProtectionDragEnd() {
-    return this.#o && this.#d && this.isProtectionHandleType(this.#o.type) ? this.#s?.({
-      trade: this.#o.trade,
-      type: this.#o.type,
-      price: p(this.#o.price)
-    }) : this.#l?.(), this.#o = null, this.#d = !1, !1;
+    return this.#a && this.#d && this.isProtectionHandleType(this.#a.type) ? this.#g?.({
+      trade: this.#a.trade,
+      type: this.#a.type,
+      price: m(this.#a.price)
+    }) : this.#s?.(), this.#a = null, this.#d = !1, !1;
   }
   modifyActiveDragTrade() {
-    if (!this.#a) return;
-    const t = p(this.#a.price);
-    if (this.#a.type === "stopLoss") {
-      this.#g?.({
-        ticket: this.#a.trade.ticket,
+    if (!this.#r) return;
+    const t = m(this.#r.price);
+    if (this.#r.type === "stopLoss") {
+      this.#o?.({
+        ticket: this.#r.trade.ticket,
         sl: t
       });
       return;
     }
-    this.#g?.({
-      ticket: this.#a.trade.ticket,
+    this.#o?.({
+      ticket: this.#r.trade.ticket,
       tp: t
     });
   }
@@ -3031,10 +3117,10 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   handleCloseButtonClick(t) {
     if (t.type === "startPrice") {
-      this.#n?.({ ticket: t.trade.ticket });
+      this.#f?.({ ticket: t.trade.ticket });
       return;
     }
-    this.#g?.({
+    this.#o?.({
       ticket: t.trade.ticket,
       ...t.type === "stopLoss" ? { sl: null } : {},
       ...t.type === "takeProfit" ? { tp: null } : {}
@@ -3044,13 +3130,13 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     document.body.style.cursor = t.type === "startPrice" ? "crosshair" : "ns-resize";
   }
   startDrag(t, e) {
-    this.#a = t, this.#h = e, this.#m = t.price;
+    this.#r = t, this.#u = e, this.#l = t.price;
   }
   startMissingProtectionDrag(t, e) {
-    this.#o = t, this.#h = e, this.#d = !1;
+    this.#a = t, this.#u = e, this.#d = !1;
   }
   resetCursorIfIdle() {
-    !this.#a && !this.#o && (document.body.style.cursor = "crosshair");
+    !this.#r && !this.#a && (document.body.style.cursor = "crosshair");
   }
   isPointInsideArea(t, e) {
     const i = t.x >= e.x && t.x <= e.x + e.width, s = t.y >= e.y && t.y <= e.y + e.height;
@@ -3060,12 +3146,12 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     return t === "stopLoss" || t === "takeProfit";
   }
   constrainExistingProtectionPrice({ price: t, hitbox: e, type: i }) {
-    const s = this.isBuyTrade(e), r = e.trade.openPrice, n = this.#r?.() ?? 0;
-    return p(i === "takeProfit" ? s ? Math.max(t, r, n) : Math.min(t, r, n) : s ? Math.min(t, n) : Math.max(t, n));
+    const s = this.isBuyTrade(e), r = e.trade.openPrice, n = this.#n?.() ?? 0;
+    return m(i === "takeProfit" ? s ? Math.max(t, r, n) : Math.min(t, r, n) : s ? Math.min(t, n) : Math.max(t, n));
   }
   constrainProtectionPrice({ price: t, hitbox: e, type: i }) {
-    const s = this.isBuyTrade(e), r = e.trade.openPrice, n = this.#r?.() ?? 0;
-    return p(i === "takeProfit" ? s ? Math.max(t, r, n) : Math.min(t, r, n) : s ? Math.min(t, n) : Math.max(t, n));
+    const s = this.isBuyTrade(e), r = e.trade.openPrice, n = this.#n?.() ?? 0;
+    return m(i === "takeProfit" ? s ? Math.max(t, r, n) : Math.min(t, r, n) : s ? Math.min(t, n) : Math.max(t, n));
   }
   isBuyTrade(t) {
     return String(t.trade.type).toLowerCase().includes("buy");
@@ -3102,18 +3188,18 @@ var $ = () => 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: s, endIndex: r } = this.getVisibleRange(e);
     if (r < s) return;
-    const n = this.candles.slice(s, r + 1), o = this.getMaxVolume(n);
-    o <= 0 || this.drawVolumeBars({
+    const n = this.candles.slice(s, r + 1), a = this.getMaxVolume(n);
+    a <= 0 || this.drawVolumeBars({
       ctx: t,
       candles: n,
       startIndex: s,
-      maxVolume: o,
+      maxVolume: a,
       chartHeight: i
     });
   }
   drawVolumeBars({ ctx: t, candles: e, startIndex: i, maxVolume: s, chartHeight: r }) {
-    t.save(), t.globalAlpha = this.opacity, e.forEach((n, o) => {
-      const a = i + o, l = this.getCandleX(a);
+    t.save(), t.globalAlpha = this.opacity, e.forEach((n, a) => {
+      const o = i + a, l = this.getCandleX(o);
       this.drawSingleVolumeBar({
         ctx: t,
         candle: n,
@@ -3127,8 +3213,8 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     if (!this.viewport || e.volume <= 0) return;
     const n = this.getVolumeAreaHeight(r);
     if (n <= 0) return;
-    const o = n * (e.volume / s), a = Math.min(n, Math.max(o, this.minBarHeight)), l = r - this.bottomOffset - a, d = Math.max(1, this.viewport.candleWidth);
-    t.fillStyle = this.getVolumeBarColor(e), t.fillRect(i, l, d, a);
+    const a = n * (e.volume / s), o = Math.min(n, Math.max(a, this.minBarHeight)), l = r - this.bottomOffset - o, d = Math.max(1, this.viewport.candleWidth);
+    t.fillStyle = this.getVolumeBarColor(e), t.fillRect(i, l, d, o);
   }
   getVisibleRange(t) {
     if (!this.viewport) return {
@@ -3159,30 +3245,107 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   clearCanvas() {
     this.#e.clearRect(0, 0, this.#t.width, this.#t.height);
   }
-}, A = (t) => {
+}, se = {
+  center: {
+    textAlign: "center",
+    textBaseline: "middle"
+  },
+  "top-center": {
+    textAlign: "center",
+    textBaseline: "top"
+  },
+  "bottom-center": {
+    textAlign: "center",
+    textBaseline: "bottom"
+  },
+  "left-center": {
+    textAlign: "left",
+    textBaseline: "middle"
+  },
+  "right-center": {
+    textAlign: "right",
+    textBaseline: "middle"
+  }
+}, re = ({ position: t, width: e, padding: i }) => {
+  switch (t) {
+    case "left-center":
+      return i;
+    case "right-center":
+      return e - i;
+    default:
+      return e / 2;
+  }
+}, ne = ({ position: t, height: e, padding: i }) => {
+  switch (t) {
+    case "top-center":
+      return i;
+    case "bottom-center":
+      return e - i;
+    default:
+      return e / 2;
+  }
+}, ae = (t) => ({
+  ...se[t.position],
+  x: re(t),
+  y: ne(t)
+}), oe = (t) => Number.isFinite(t) ? Math.min(Math.max(t, 0), 1) : 1, le = class {
+  #t;
+  #e;
+  #n;
+  #i = 0;
+  #h = 0;
+  constructor(t) {
+    this.#t = t.canvas, this.#n = t.config;
+    const e = this.#t.getContext("2d");
+    if (!e) throw new Error("Canvas 2D context not supported");
+    this.#e = e;
+  }
+  setConfig(t) {
+    this.#n = t;
+  }
+  resize(t, e) {
+    this.#i = t, this.#h = e;
+  }
+  render() {
+    const t = this.#e, { text: e } = this.#n;
+    if (t.setTransform(1, 0, 0, 1, 0, 0), t.clearRect(0, 0, this.#t.width, this.#t.height), !e || this.#i <= 0 || this.#h <= 0) return;
+    const { x: i, y: s, textAlign: r, textBaseline: n } = ae({
+      position: this.#n.position,
+      width: this.#i,
+      height: this.#h,
+      padding: this.#n.padding
+    });
+    t.save(), t.font = this.#g(), t.textAlign = r, t.textBaseline = n, t.fillStyle = this.#n.color, t.globalAlpha = oe(this.#n.opacity), t.fillText(e, i, s), t.restore();
+  }
+  #g() {
+    const { fontSize: t, fontWeight: e, fontFamily: i } = this.#n;
+    return `${e} ${t}px ${i}`;
+  }
+}, M = (t) => {
   const e = document.createElement("canvas");
   return e.className = t, e;
-}, se = (t, e) => {
+}, he = (t, e) => {
   const i = document.createElement("div");
   i.className = "trading-reload-chart", i.style.backgroundColor = e, i.tabIndex = 0;
   const s = document.createElement("div");
   s.className = "trading-reload-chart__layout";
   const r = document.createElement("div");
   r.className = "trading-reload-chart__stack";
-  const n = A("trading-reload-chart__volume"), o = A("trading-reload-chart__plot"), a = A("trading-reload-chart__shapes"), l = A("trading-reload-chart__trades"), d = A("trading-reload-chart__overlay"), u = A("trading-reload-chart__axis-x");
-  r.append(n, o, a, l, d, u);
-  const g = A("trading-reload-chart__axis-y");
-  return s.append(r, g), i.append(s), t.append(i), {
+  const n = M("trading-reload-chart__volume"), a = M("trading-reload-chart__watermark"), o = M("trading-reload-chart__plot"), l = M("trading-reload-chart__shapes"), d = M("trading-reload-chart__trades"), u = M("trading-reload-chart__overlay"), g = M("trading-reload-chart__axis-x");
+  r.append(n, a, o, l, d, u, g);
+  const p = M("trading-reload-chart__axis-y");
+  return s.append(r, p), i.append(s), t.append(i), {
     root: i,
     layout: s,
     stack: r,
     volumeCanvas: n,
+    watermarkCanvas: a,
     candleCanvas: o,
-    shapesCanvas: a,
-    tradesCanvas: l,
-    overlayCanvas: d,
-    axisXCanvas: u,
-    axisYCanvas: g,
+    shapesCanvas: l,
+    tradesCanvas: d,
+    overlayCanvas: u,
+    axisXCanvas: g,
+    axisYCanvas: p,
     interactionTarget: s
   };
 }, gt = (t) => typeof t == "object" && t !== null && !Array.isArray(t), Lt = (t, e) => {
@@ -3201,76 +3364,113 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
 }, ft = (t) => Lt(c, t ?? {}), pt = (t, e) => e === void 0 || t.time >= 1e12 ? t : {
   ...t,
   time: t.time * 1e3 - e
-}, re = 12, ne = class {
+}, de = 0, ce = 50, ue = (t) => !t.ctrlKey && !t.metaKey || t.deltaMode === de && Math.abs(t.deltaY) < ce ? "x" : "y", ge = 12, fe = class {
   #t;
   #e;
-  #r;
+  #n;
   #i = null;
-  #u = null;
-  #s = null;
-  #l = null;
+  #h = null;
   #g = null;
-  #n = null;
-  #a = null;
+  #s = null;
   #o = null;
-  #d = null;
-  #h = null;
-  #m = !1;
-  #y = 0;
-  #w = !1;
-  #T = 0;
-  #L = 0;
   #f = null;
-  #C = null;
-  #P = null;
-  #b = null;
+  #r = null;
+  #a = null;
+  #d = null;
+  #u = null;
+  #l = null;
+  #x = !1;
+  #P = 0;
+  #S = !1;
+  #D = 0;
+  #A = 0;
+  #p = null;
+  #v = null;
+  #T = null;
+  #L = null;
+  #X = !1;
+  #b = !1;
+  #I = null;
+  #y = null;
   constructor(t, e) {
-    this.#t = t, this.#e = e, this.#r = ft(e.config), this.#i = se(t, this.#r.colors.background), this.#h = new zt({
+    this.#t = t, this.#e = e, this.#n = ft(e.config), this.#i = he(t, this.#n.colors.background), this.#l = new Ot({
       canvas: this.#i.overlayCanvas,
-      crosshairColor: this.#r.crosshair.color,
-      crosshairThickness: this.#r.crosshair.thickness,
-      crosshairStyle: this.#r.crosshair.style
-    }), this.#B(), this.#W(), this.#M(), this.updateProps(e);
+      crosshairColor: this.#n.crosshair.color,
+      crosshairThickness: this.#n.crosshair.thickness,
+      crosshairStyle: this.#n.crosshair.style
+    }), this.#g = new le({
+      canvas: this.#i.watermarkCanvas,
+      config: this.#n.watermark
+    }), this.#N(), this.#_(), this.#W(), this.updateProps(e);
   }
   updateProps(t) {
     const e = this.#e.activeShapeTool;
-    this.#e = t, this.#r = ft(t.config), this.#i && (this.#i.root.style.backgroundColor = this.#r.colors.background, this.#i.layout.style.setProperty("--axis-x-height", `${this.#r.axis.axisX.height}px`)), !this.#m && t.candles.length > 0 && this.#I(t.candles), this.#s && (t.activeShapeTool !== e && this.#Y(t.activeShapeTool), this.#l?.setConfig(this.#r.shapes), this.#l?.setShapes(t.shapes), this.#l?.setActiveTool(t.activeShapeTool), this.#g?.setConfig(this.#r.shapes.previousDayHighLow ?? null), this.#g?.setPreviousDay(t.previousDay), this.#n?.setClosedTrades(t.closedTrades ?? []), this.#x(), this.#O(), this.#c());
+    this.#e = t, this.#n = ft(t.config), this.#i && (this.#i.root.style.backgroundColor = this.#n.colors.background, this.#i.layout.style.setProperty("--axis-x-height", `${this.#n.axis.axisX.height}px`)), !this.#x && t.candles.length > 0 && this.#z(t.candles), this.#s && (t.activeShapeTool !== e && this.#$(t.activeShapeTool), this.#o?.setConfig(this.#n.shapes), this.#o?.setShapes(t.shapes), this.#o?.setActiveTool(t.activeShapeTool), this.#g?.setConfig(this.#n.watermark), this.#f?.setConfig(this.#n.shapes.previousDayHighLow ?? null), this.#f?.setPreviousDay(t.previousDay), this.#r?.setClosedTrades(t.closedTrades ?? []), this.#k(), this.#K(), this.#c(), this.#C());
   }
   resetChartView() {
-    this.#s?.resetView(), this.#c();
+    this.#s?.resetView(), this.#c(), this.#C();
+  }
+  setView(t) {
+    this.#s && (this.#X = !0, this.#s.setViewState(t), this.#X = !1, this.#I = this.#s.getViewState(), this.#c());
+  }
+  getView() {
+    return this.#s?.getViewState() ?? null;
+  }
+  setCursor(t) {
+    if (!t) {
+      this.#b = !0, this.#V(), this.#b = !1, this.#y = null;
+      return;
+    }
+    if (!this.#s || !this.#l || !this.#i) return;
+    const e = this.#s.setCursorState(t);
+    e && (this.#b = !0, this.#l.setPosition(e.x, e.y), this.#d?.setCrosshair({
+      visible: !0,
+      x: e.x,
+      candle: e.candle
+    }), this.#u?.setCrosshair({
+      visible: !0,
+      y: e.y,
+      price: t.price
+    }), this.#H(), this.#l.render(), this.#b = !1, this.#y = {
+      ...t,
+      time: e.candle.time
+    });
+  }
+  hideCursor() {
+    this.setCursor(null);
   }
   destroy() {
-    this.#b?.abort(), this.#b = null, this.#P?.disconnect(), this.#P = null, this.#i?.root.remove(), this.#i = null, this.#u = null, this.#s = null, this.#l = null, this.#g = null, this.#n = null, this.#a = null, this.#o = null, this.#d = null, this.#h = null, this.#f = null, this.#m = !1;
+    this.#L?.abort(), this.#L = null, this.#T?.disconnect(), this.#T = null, this.#i?.root.remove(), this.#i = null, this.#h = null, this.#g = null, this.#s = null, this.#o = null, this.#f = null, this.#r = null, this.#a = null, this.#d = null, this.#u = null, this.#l = null, this.#p = null, this.#x = !1;
   }
-  #I(t) {
-    if (!this.#i || this.#m) return;
+  #z(t) {
+    if (!this.#i || this.#x) return;
     const e = t.map((s) => pt(s, this.#e.brokerTimezoneOffsetMs));
-    this.#u = new ie({
+    this.#h = new ie({
       canvas: this.#i.volumeCanvas,
       candles: e,
-      bullishColor: this.#r.volume.bullishColor,
-      bearishColor: this.#r.volume.bearishColor,
-      opacity: this.#r.volume.opacity,
-      height: this.#r.volume.height,
-      bottomOffset: this.#r.volume.bottomOffset,
-      minBarHeight: this.#r.volume.minBarHeight
+      bullishColor: this.#n.volume.bullishColor,
+      bearishColor: this.#n.volume.bearishColor,
+      opacity: this.#n.volume.opacity,
+      height: this.#n.volume.height,
+      bottomOffset: this.#n.volume.bottomOffset,
+      minBarHeight: this.#n.volume.minBarHeight
     }), this.#s = new Nt({
       canvas: this.#i.candleCanvas,
       candles: e,
-      baseCandleWidth: this.#r.candles.defaultWidth,
-      baseCandleGap: this.#r.candles.defaultGap,
-      bullishColor: this.#r.colors.bullish,
-      bearishColor: this.#r.colors.bearish,
-      autoFollowLatestCandle: this.#r.candles.autoFollowLatestCandle,
-      autoFollowThresholdCandles: this.#r.candles.autoFollowThresholdCandles,
-      rightOffsetCandles: this.#r.candles.rightOffsetCandles
-    }), this.#l = new Zt({
+      baseCandleWidth: this.#n.candles.defaultWidth,
+      baseCandleGap: this.#n.candles.defaultGap,
+      bullishColor: this.#n.colors.bullish,
+      bearishColor: this.#n.colors.bearish,
+      autoFollowLatestCandle: this.#n.candles.autoFollowLatestCandle,
+      autoFollowThresholdCandles: this.#n.candles.autoFollowThresholdCandles,
+      rightOffsetCandles: this.#n.candles.rightOffsetCandles
+    }), this.#o = new Zt({
       canvas: this.#i.shapesCanvas,
       activeSymbol: this.#e.activeSymbol,
       candles: e,
       shapes: this.#e.shapes,
       activeTool: this.#e.activeShapeTool,
-      config: this.#r.shapes,
+      config: this.#n.shapes,
       onShapeAdded: (s) => {
         this.#e.onShapeAdded?.(s);
       },
@@ -3291,43 +3491,43 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       }
     });
     const i = this.#i.shapesCanvas.getContext("2d");
-    i && (this.#g = new _t({
+    i && (this.#f = new _t({
       ctx: i,
-      config: this.#r.shapes.previousDayHighLow ?? null
-    }), this.#g.setPreviousDay(this.#e.previousDay)), this.#n = new Qt({ canvas: this.#i.tradesCanvas }), this.#n.setCandles(e), this.#n.setClosedTrades(this.#e.closedTrades ?? []), this.#x(), this.#o = new Yt({
+      config: this.#n.shapes.previousDayHighLow ?? null
+    }), this.#f.setPreviousDay(this.#e.previousDay)), this.#r = new Qt({ canvas: this.#i.tradesCanvas }), this.#r.setCandles(e), this.#r.setClosedTrades(this.#e.closedTrades ?? []), this.#k(), this.#d = new Vt({
       canvas: this.#i.axisXCanvas,
       candles: e
-    }), this.#d = new Ot({ canvas: this.#i.axisYCanvas }), this.#a = new ee({
+    }), this.#u = new Et({ canvas: this.#i.axisYCanvas }), this.#a = new ee({
       canvas: this.#i.tradesCanvas,
-      getHandleHitboxes: () => this.#p() ? [] : this.#n?.handleHitboxes ?? [],
+      getHandleHitboxes: () => this.#m() ? [] : this.#r?.handleHitboxes ?? [],
       getCurrentPrice: () => this.#s?.liveCandle?.close ?? 0,
-      onDrag: (s) => this.#z(s),
-      onMissingProtectionDrag: (s) => this.#V(s),
-      onMissingProtectionDragEnd: (s) => this.#N(s),
-      onMissingProtectionDragCancel: () => this.#_(),
-      onTradeModified: (s) => this.#R(s),
+      onDrag: (s) => this.#J(s),
+      onMissingProtectionDrag: (s) => this.#j(s),
+      onMissingProtectionDragEnd: (s) => this.#Z(s),
+      onMissingProtectionDragCancel: () => this.#Q(),
+      onTradeModified: (s) => this.#F(s),
       onTradeCloseClicked: (s) => this.#e.onTradeClose?.(s)
-    }), this.#m = !0, this.#c();
+    }), this.#x = !0, this.#c();
   }
-  #B() {
+  #N() {
     if (!this.#i) return;
-    this.#b = new AbortController();
-    const { signal: t } = this.#b, e = this.#i.interactionTarget;
-    e.addEventListener("pointerdown", (i) => this.#q(i), { signal: t }), e.addEventListener("pointerup", (i) => this.#J(i), { signal: t }), e.addEventListener("pointermove", (i) => this.#K(i), { signal: t }), e.addEventListener("pointerenter", (i) => this.#j(i), { signal: t }), e.addEventListener("pointerleave", () => this.#Z(), { signal: t }), e.addEventListener("contextmenu", (i) => this.#Q(i), { signal: t }), e.addEventListener("dblclick", (i) => this.#tt(i), { signal: t }), e.addEventListener("wheel", (i) => this.#U(i), {
+    this.#L = new AbortController();
+    const { signal: t } = this.#L, e = this.#i.interactionTarget;
+    e.addEventListener("pointerdown", (i) => this.#it(i), { signal: t }), e.addEventListener("pointerup", (i) => this.#rt(i), { signal: t }), e.addEventListener("pointermove", (i) => this.#st(i), { signal: t }), e.addEventListener("pointerenter", (i) => this.#nt(i), { signal: t }), e.addEventListener("pointerleave", () => this.#at(), { signal: t }), e.addEventListener("contextmenu", (i) => this.#ot(i), { signal: t }), e.addEventListener("dblclick", (i) => this.#lt(i), { signal: t }), e.addEventListener("wheel", (i) => this.#tt(i), {
       passive: !1,
       signal: t
-    }), this.#i.axisXCanvas.addEventListener("pointerenter", (i) => this.#D(i), { signal: t }), this.#i.axisXCanvas.addEventListener("pointerdown", (i) => this.#A(i, "x"), { signal: t }), this.#i.axisXCanvas.addEventListener("pointermove", (i) => this.#X(i), { signal: t }), this.#i.axisXCanvas.addEventListener("pointerup", (i) => this.#S(i), { signal: t }), this.#i.axisXCanvas.addEventListener("pointercancel", (i) => this.#S(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointerenter", (i) => this.#D(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointerdown", (i) => this.#A(i, "y"), { signal: t }), this.#i.axisYCanvas.addEventListener("pointermove", (i) => this.#X(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointerup", (i) => this.#S(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointercancel", (i) => this.#S(i), { signal: t }), this.#i.axisYCanvas.addEventListener("wheel", (i) => this.#$(i), {
+    }), this.#i.axisXCanvas.addEventListener("pointerenter", (i) => this.#Y(i), { signal: t }), this.#i.axisXCanvas.addEventListener("pointerdown", (i) => this.#E(i, "x"), { signal: t }), this.#i.axisXCanvas.addEventListener("pointermove", (i) => this.#O(i), { signal: t }), this.#i.axisXCanvas.addEventListener("pointerup", (i) => this.#R(i), { signal: t }), this.#i.axisXCanvas.addEventListener("pointercancel", (i) => this.#R(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointerenter", (i) => this.#Y(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointerdown", (i) => this.#E(i, "y"), { signal: t }), this.#i.axisYCanvas.addEventListener("pointermove", (i) => this.#O(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointerup", (i) => this.#R(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointercancel", (i) => this.#R(i), { signal: t }), this.#i.axisYCanvas.addEventListener("wheel", (i) => this.#et(i), {
       passive: !1,
       signal: t
-    }), document.addEventListener("keydown", (i) => this.#et(i), { signal: t });
+    }), document.addEventListener("keydown", (i) => this.#ht(i), { signal: t });
   }
-  #W() {
-    this.#P = new ResizeObserver(() => {
-      this.#M(), this.#c();
-    }), this.#P.observe(this.#t);
+  #_() {
+    this.#T = new ResizeObserver(() => {
+      this.#W(), this.#c(), this.#C();
+    }), this.#T.observe(this.#t);
   }
-  #F() {
-    const t = this.#r.axis.axisY.width, e = this.#r.axis.axisX.height, i = this.#t.clientWidth, s = this.#t.clientHeight;
+  #G() {
+    const t = this.#n.axis.axisY.width, e = this.#n.axis.axisX.height, i = this.#t.clientWidth, s = this.#t.clientHeight;
     return {
       axisYWidth: t,
       axisXHeight: e,
@@ -3335,192 +3535,230 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       plotHeight: Math.max(0, s - e)
     };
   }
-  #v(t, e, i) {
+  #w(t, e, i) {
     t.width = e, t.height = i;
   }
-  #M() {
+  #W() {
     if (!this.#i) return;
-    const { plotWidth: t, plotHeight: e, axisYWidth: i, axisXHeight: s } = this.#F();
-    if (this.#s && this.#y > 0 && t !== this.#y) {
-      const r = t - this.#y;
+    const { plotWidth: t, plotHeight: e, axisYWidth: i, axisXHeight: s } = this.#G();
+    if (this.#s && this.#P > 0 && t !== this.#P) {
+      const r = t - this.#P;
       this.#s.panHorizontally(r);
     }
-    this.#y = t, this.#v(this.#i.volumeCanvas, t, e), this.#v(this.#i.candleCanvas, t, e), this.#v(this.#i.shapesCanvas, t, e), this.#v(this.#i.overlayCanvas, t, e), this.#v(this.#i.tradesCanvas, t, e), this.#v(this.#i.axisXCanvas, t, s), this.#v(this.#i.axisYCanvas, i, e);
+    this.#P = t, this.#w(this.#i.volumeCanvas, t, e), this.#w(this.#i.watermarkCanvas, t, e), this.#w(this.#i.candleCanvas, t, e), this.#w(this.#i.shapesCanvas, t, e), this.#w(this.#i.overlayCanvas, t, e), this.#w(this.#i.tradesCanvas, t, e), this.#w(this.#i.axisXCanvas, t, s), this.#w(this.#i.axisYCanvas, i, e), this.#g?.resize(t, e);
   }
   #H() {
-    this.#s && (this.#o?.setCandles(this.#s.candles), this.#o?.setViewport(this.#s.viewport), this.#o?.render(), this.#d?.setViewport(this.#s.viewport), this.#d?.render());
+    this.#s && (this.#d?.setCandles(this.#s.candles), this.#d?.setViewport(this.#s.viewport), this.#d?.render(), this.#u?.setViewport(this.#s.viewport), this.#u?.render());
   }
   #c() {
-    this.#s && (this.#u?.setCandles(this.#s.candles), this.#u?.setLiveCandle(this.#s.liveCandle), this.#u?.setViewport(this.#s.viewport), this.#u?.render(), this.#s.render(), this.#l?.setCandles(this.#s.candles), this.#l?.setViewport(this.#s.viewport), this.#l?.render(), this.#g?.setViewport(this.#s.viewport), this.#g?.render(), this.#n?.setCandles(this.#s.candles), this.#n?.setViewport(this.#s.viewport), this.#n?.isDragging ? this.#n.renderLiveFeed() : this.#n?.render(), this.#H(), this.#h?.render());
+    this.#s && (this.#h?.setCandles(this.#s.candles), this.#h?.setLiveCandle(this.#s.liveCandle), this.#h?.setViewport(this.#s.viewport), this.#h?.render(), this.#g?.render(), this.#s.render(), this.#o?.setCandles(this.#s.candles), this.#o?.setViewport(this.#s.viewport), this.#o?.render(), this.#f?.setViewport(this.#s.viewport), this.#f?.render(), this.#r?.setCandles(this.#s.candles), this.#r?.setViewport(this.#s.viewport), this.#r?.isDragging ? this.#r.renderLiveFeed() : this.#r?.render(), this.#H(), this.#l?.render());
   }
-  #p() {
+  #m() {
     return this.#e.activeShapeTool !== null;
   }
-  #Y(t) {
-    t !== null && (this.#w = !1, this.#n?.setIsDragging(!1), this.#a?.cancelActiveInteraction()), this.#l?.setActiveTool(t);
+  #C() {
+    if (this.#X) return;
+    const t = this.#s?.getViewState() ?? null;
+    !t || this.#U(this.#I, t) || (this.#I = t, this.#e.onViewChange?.(t));
   }
-  #E() {
+  #M(t) {
+    if (!this.#b) {
+      if (!t) {
+        if (this.#y === null) return;
+        this.#y = null, this.#e.onCursorMove?.(null);
+        return;
+      }
+      this.#y !== null && this.#y.time === t.time && this.#y.price === t.price || (this.#y = t, this.#e.onCursorMove?.(t));
+    }
+  }
+  #U(t, e) {
+    return t !== null && Math.abs(t.rightmostVisibleTime - e.rightmostVisibleTime) < 0.5 && Math.abs(t.rightmostVisibleX - e.rightmostVisibleX) < 1e-4 && Math.abs(t.rightEdgeTime - e.rightEdgeTime) < 0.5 && Math.abs(t.visibleDurationMs - e.visibleDurationMs) < 0.5;
+  }
+  #$(t) {
+    t !== null && (this.#S = !1, this.#r?.setIsDragging(!1), this.#a?.cancelActiveInteraction()), this.#o?.setActiveTool(t);
+  }
+  #q() {
     const t = this.#e.openTrades ?? [];
-    return this.#C ? t.map((e) => e.ticket !== this.#C?.ticket ? e : {
+    return this.#v ? t.map((e) => e.ticket !== this.#v?.ticket ? e : {
       ...e,
-      ...this.#C.sl !== void 0 ? { sl: this.#C.sl } : {},
-      ...this.#C.tp !== void 0 ? { tp: this.#C.tp } : {}
+      ...this.#v.sl !== void 0 ? { sl: this.#v.sl } : {},
+      ...this.#v.tp !== void 0 ? { tp: this.#v.tp } : {}
     }) : t;
   }
-  #x() {
-    this.#n?.setTrades(this.#E());
+  #k() {
+    this.#r?.setTrades(this.#q());
   }
-  #O() {
+  #K() {
     const t = this.#e.liveCandle;
     if (!t || !this.#s) return;
     const e = pt(t, this.#e.brokerTimezoneOffsetMs);
-    this.#s.updateLiveCandle(e), this.#n?.setLiveCandle(this.#s.liveCandle), this.#n?.setCandles(this.#s.candles);
+    this.#s.updateLiveCandle(e), this.#r?.setLiveCandle(this.#s.liveCandle), this.#r?.setCandles(this.#s.candles);
   }
-  #z({ trade: t, type: e, price: i }) {
-    this.#n && (this.#n.setIsDragging(!0), this.#C = {
+  #J({ trade: t, type: e, price: i }) {
+    this.#r && (this.#r.setIsDragging(!0), this.#v = {
       ticket: t.ticket,
       ...e === "stopLoss" ? { sl: i } : {},
       ...e === "takeProfit" ? { tp: i } : {}
-    }, this.#x(), this.#n.render());
+    }, this.#k(), this.#r.render());
   }
-  #V({ trade: t, type: e, price: i }) {
-    this.#n?.viewport && (this.#n.setIsDragging(!0), this.#n.setTemporaryProtectionDrag({
+  #j({ trade: t, type: e, price: i }) {
+    this.#r?.viewport && (this.#r.setIsDragging(!0), this.#r.setTemporaryProtectionDrag({
       visible: !0,
       trade: t,
       type: e,
       price: i,
-      viewport: this.#n.viewport
-    }), this.#n.render());
+      viewport: this.#r.viewport
+    }), this.#r.render());
   }
-  #N({ trade: t, type: e, price: i }) {
-    this.#n?.setIsDragging(!1), this.#R({
+  #Z({ trade: t, type: e, price: i }) {
+    this.#r?.setIsDragging(!1), this.#F({
       ticket: t.ticket,
       ...e === "stopLoss" ? { sl: i } : {},
       ...e === "takeProfit" ? { tp: i } : {}
     });
   }
-  #_() {
-    this.#n?.setIsDragging(!1), this.#n?.clearTemporaryProtectionDrag(), this.#n?.render();
+  #Q() {
+    this.#r?.setIsDragging(!1), this.#r?.clearTemporaryProtectionDrag(), this.#r?.render();
   }
-  #R(t) {
-    this.#n?.setIsDragging(!1), this.#C = null, this.#n?.clearTemporaryProtectionDrag(), this.#e.onTradeModify?.(t), this.#x(), this.#n?.render();
+  #F(t) {
+    this.#r?.setIsDragging(!1), this.#v = null, this.#r?.clearTemporaryProtectionDrag(), this.#e.onTradeModify?.(t), this.#k(), this.#r?.render();
   }
-  #k(t) {
-    if (!this.#h || !this.#i) return;
-    if (!this.#s) {
-      this.#h.updateMousePosition(t.clientX, t.clientY), this.#h.render();
-      return;
-    }
+  #B(t) {
+    if (!this.#l || !this.#i) return null;
+    if (!this.#s)
+      return this.#l.updateMousePosition(t.clientX, t.clientY), this.#l.render(), null;
     const e = vt(this.#i.overlayCanvas, t), i = this.#s.getNearestCandleIndexByX(e.x), s = i === null ? null : this.#s.candles[i] ?? null, r = i === null ? e.x : this.#s.getRawCandleSnapX(e.x);
-    this.#h.updateMousePosition(t.clientX, t.clientY, { snapX: r });
-    const n = this.#s.getPriceAtY(this.#h.mouseY);
-    this.#d?.setCrosshair({
+    this.#l.updateMousePosition(t.clientX, t.clientY, { snapX: r });
+    const n = this.#s.getPriceAtY(this.#l.mouseY);
+    return this.#u?.setCrosshair({
       visible: !0,
-      y: this.#h.mouseY,
+      y: this.#l.mouseY,
       price: n
-    }), this.#o?.setCrosshair({
+    }), this.#d?.setCrosshair({
       visible: !0,
-      x: this.#h.mouseX,
+      x: this.#l.mouseX,
       candle: s
-    }), this.#H(), this.#h.render();
+    }), this.#H(), this.#l.render(), s ? {
+      time: s.time,
+      price: n
+    } : null;
   }
-  #G() {
-    this.#h?.hide(), this.#o?.hideCrosshair(), this.#d?.hideCrosshair(), this.#H(), this.#h?.render();
+  #V() {
+    this.#l?.hide(), this.#d?.hideCrosshair(), this.#u?.hideCrosshair(), this.#H(), this.#l?.render();
   }
-  #U(t) {
-    if (!this.#s || !this.#n) return;
-    this.#p() || this.#a?.handlePointerEvent(t), t.preventDefault();
+  #tt(t) {
+    if (!this.#s || !this.#r) return;
+    this.#m() || this.#a?.handlePointerEvent(t), t.preventDefault();
     const e = t.deltaY < 0 ? 1 : -1;
-    t.ctrlKey || t.metaKey ? this.#s.zoomVertically(e) : this.#s.zoomHorizontally(e), this.#c();
+    ue(t) === "y" ? this.#s.zoomVertically(e) : this.#s.zoomHorizontally(e), this.#c(), this.#C();
   }
-  #$(t) {
+  #et(t) {
     if (!this.#s) return;
     t.preventDefault(), t.stopPropagation();
     const e = t.deltaY < 0 ? 1 : -1;
-    this.#s.zoomVertically(e), this.#c();
+    this.#s.zoomVertically(e), this.#c(), this.#C();
   }
-  #D(t) {
+  #Y(t) {
     const e = t.currentTarget;
     e.style.cursor = e === this.#i?.axisXCanvas ? "ew-resize" : "ns-resize";
   }
-  #A(t, e) {
-    t.stopPropagation(), t.button === 0 && (t.currentTarget.setPointerCapture(t.pointerId), this.#f = {
+  #E(t, e) {
+    t.stopPropagation(), t.button === 0 && (t.currentTarget.setPointerCapture(t.pointerId), this.#p = {
       axis: e,
       lastClientPosition: e === "x" ? t.clientX : t.clientY,
       pointerId: t.pointerId
     }, t.preventDefault());
   }
-  #X(t) {
+  #O(t) {
     t.stopPropagation();
     const e = t.currentTarget, i = e === this.#i?.axisXCanvas ? "x" : "y";
-    if (e.style.cursor = i === "x" ? "ew-resize" : "ns-resize", !this.#f || this.#f.pointerId !== t.pointerId || this.#f.axis !== i) return;
-    const s = i === "x" ? t.clientX : t.clientY, r = s - this.#f.lastClientPosition;
-    if (this.#f.lastClientPosition = s, !this.#s || r === 0) return;
-    const n = -r / re;
-    i === "x" ? this.#s.zoomHorizontally(n) : this.#s.zoomVertically(n), t.preventDefault(), this.#c();
-  }
-  #S(t) {
-    if (t.stopPropagation(), this.#f?.pointerId !== t.pointerId) return;
+    if (e.style.cursor = i === "x" ? "ew-resize" : "ns-resize", !this.#p || this.#p.pointerId !== t.pointerId || this.#p.axis !== i) return;
+    const s = i === "x" ? t.clientX : t.clientY, r = s - this.#p.lastClientPosition;
+    if (this.#p.lastClientPosition = s, !this.#s || r === 0) return;
+    const n = -r / ge;
+    i === "x" ? this.#s.zoomHorizontally(n) : this.#s.zoomVertically(n), t.preventDefault(), this.#c(), this.#C();
+  }
+  #R(t) {
+    if (t.stopPropagation(), this.#p?.pointerId !== t.pointerId) return;
     const e = t.currentTarget;
-    e.hasPointerCapture(t.pointerId) && e.releasePointerCapture(t.pointerId), this.#f = null, t.preventDefault();
+    e.hasPointerCapture(t.pointerId) && e.releasePointerCapture(t.pointerId), this.#p = null, t.preventDefault();
   }
-  #q(t) {
-    if (!(!this.#p() && this.#a?.handlePointerEvent(t))) {
-      if (this.#l?.handlePointerEvent(t) ?? !1) {
+  #it(t) {
+    if (!(!this.#m() && this.#a?.handlePointerEvent(t))) {
+      if (this.#o?.handlePointerEvent(t) ?? !1) {
         this.#c();
         return;
       }
-      this.#p() || (this.#w = !0, this.#T = t.clientX, this.#L = t.clientY);
+      this.#m() || (this.#S = !0, this.#D = t.clientX, this.#A = t.clientY);
     }
   }
-  #K(t) {
-    const e = this.#l?.handlePointerEvent(t) ?? !1;
-    if (this.#p() || this.#a?.handlePointerEvent(t), this.#k(t), e) {
-      this.#c(), this.#k(t);
+  #st(t) {
+    const e = this.#o?.handlePointerEvent(t) ?? !1;
+    this.#m() || this.#a?.handlePointerEvent(t);
+    let i = this.#B(t);
+    if (e) {
+      this.#c(), i = this.#B(t), this.#M(i);
       return;
     }
-    if (!this.#w || !this.#s || this.#p()) return;
-    const i = t.clientX - this.#T, s = t.clientY - this.#L;
-    this.#T = t.clientX, this.#L = t.clientY, this.#s.panHorizontally(i), this.#s.panVertically(s), this.#c(), this.#k(t);
+    if (!this.#S || !this.#s || this.#m()) {
+      this.#M(i);
+      return;
+    }
+    const s = t.clientX - this.#D, r = t.clientY - this.#A;
+    this.#D = t.clientX, this.#A = t.clientY, this.#s.panHorizontally(s), this.#s.panVertically(r), this.#c(), i = this.#B(t), this.#M(i), this.#C();
   }
-  #J(t) {
-    if (this.#w = !1, this.#l?.handlePointerEvent(t) ?? !1) {
-      this.#c();
+  #rt(t) {
+    if (this.#S = !1, this.#o?.handlePointerEvent(t) ?? !1) {
+      this.#c(), this.#C();
       return;
     }
-    this.#p() || this.#a?.handlePointerEvent(t);
+    this.#m() || this.#a?.handlePointerEvent(t), this.#C();
   }
-  #j(t) {
-    document.body.style.cursor = "crosshair", this.#l?.handlePointerEvent(t), this.#p() || this.#a?.handlePointerEvent(t);
+  #nt(t) {
+    document.body.style.cursor = "crosshair", this.#o?.handlePointerEvent(t), this.#m() || this.#a?.handlePointerEvent(t);
   }
-  #Z() {
-    this.#l?.clearHoverState(), document.body.style.cursor = "", this.#G();
+  #at() {
+    this.#o?.clearHoverState(), document.body.style.cursor = "", this.#V(), this.#M(null);
   }
-  #Q(t) {
-    ((this.#l?.handlePointerEvent(t) ?? !1) || this.#p()) && (t.preventDefault(), t.stopPropagation(), this.#c());
+  #ot(t) {
+    ((this.#o?.handlePointerEvent(t) ?? !1) || this.#m()) && (t.preventDefault(), t.stopPropagation(), this.#c());
   }
-  #tt(t) {
-    this.#l?.handlePointerEvent(t);
+  #lt(t) {
+    this.#o?.handlePointerEvent(t);
   }
-  #et(t) {
-    this.#it(t.target) || (this.#l?.handleKeyboardEvent(t) ?? !1) && (t.preventDefault(), this.#c());
+  #ht(t) {
+    this.#dt(t.target) || (this.#o?.handleKeyboardEvent(t) ?? !1) && (t.preventDefault(), this.#c());
   }
-  #it(t) {
+  #dt(t) {
     return t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement || t instanceof HTMLElement && t.isContentEditable;
   }
-}, le = Mt(({ className: t, style: e, ...i }, s) => {
-  const r = _(null), n = _(null), o = _(i);
-  return o.current = i, Rt(s, () => ({ resetChartView() {
-    n.current?.resetChartView();
-  } })), st(() => {
-    const a = r.current;
-    if (!a) return;
-    const l = new ne(a, o.current);
+}, Ce = kt(({ className: t, style: e, ...i }, s) => {
+  const r = _(null), n = _(null), a = _(i);
+  return a.current = i, Rt(s, () => ({
+    resetChartView() {
+      n.current?.resetChartView();
+    },
+    getView() {
+      return n.current?.getView() ?? null;
+    },
+    setView(o) {
+      n.current?.setView(o);
+    },
+    setCursor(o) {
+      n.current?.setCursor(o);
+    },
+    hideCursor() {
+      n.current?.hideCursor();
+    }
+  })), st(() => {
+    const o = r.current;
+    if (!o) return;
+    const l = new fe(o, a.current);
     return n.current = l, () => {
       l.destroy(), n.current = null;
     };
   }, []), st(() => {
-    n.current?.updateProps(o.current);
+    n.current?.updateProps(a.current);
   }, [i]), /* @__PURE__ */ Dt("div", {
     ref: r,
     className: t,
@@ -3533,5 +3771,5 @@ var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
 });
 export {
   c as CHART_CONFIG,
-  le as TradingReload
+  Ce as TradingReload
 };