@pradeepjadhav/trading-reload-chart 1.0.0

package/dist/trading-reload-chart.js

@@ -0,0 +1,3503 @@
+import { forwardRef as Mt, useEffect as tt, useImperativeHandle as Rt, useRef as z } from "react";
+import { jsx as Wt } from "react/jsx-runtime";
+var h = {
+  primary: "#7959F7",
+  blue: "#2962FF",
+  yellow: "#FBC02D",
+  purple: "#9C27B0",
+  green: "#26A69A",
+  red: "#EF5350",
+  white: "#ffffff",
+  background: "#0F0F0F",
+  handleBackground: "#111827",
+  slBackground: "#2a1111",
+  tpBackground: "#0d2418",
+  axisBorder: "rgb(89, 89, 89)",
+  axisText: "rgba(255, 255, 255, 0.60)",
+  axisTick: "rgba(255,255,255,0.12)",
+  axisYTick: "rgba(255, 255, 255, 0.40)",
+  divider: "rgba(255,255,255,0.12)",
+  crosshairLabelBackground: "#494949"
+}, f = {
+  ...h,
+  gray: "#808080",
+  orange: "#ff9500",
+  purple: "#af52de",
+  handleBorder: h.blue,
+  handleFill: h.background
+}, et = {
+  defaultWidthCandles: 10,
+  defaultStopLossPercent: 0.1,
+  defaultRiskRewardRatio: 1.5,
+  profitFillColor: f.green,
+  profitFillOpacity: 0.18,
+  lossFillColor: f.red,
+  lossFillOpacity: 0.18,
+  borderColor: f.gray,
+  borderOpacity: 0,
+  borderWidth: 1,
+  borderStyle: "solid",
+  midLineColor: f.gray,
+  midLineOpacity: 0.9,
+  midLineWidth: 0.5,
+  midLineStyle: "solid",
+  handleColor: f.handleFill,
+  handleBorderColor: f.handleBorder,
+  handleBorderThickness: 1.5,
+  handleRadius: 5,
+  hoverLineWidth: 2,
+  selectedLineWidth: 2
+}, Dt = {
+  trendline: {
+    lineWidth: 1,
+    lineColor: f.blue,
+    lineOpacity: 1,
+    lineStyle: "solid",
+    fillColor: f.blue,
+    fillOpacity: 0,
+    handleColor: f.handleFill,
+    handleBorderColor: f.handleBorder,
+    handleRadius: 5,
+    hoverLineWidth: 1,
+    selectedLineWidth: 1.1
+  },
+  rectangle: {
+    lineWidth: 1,
+    lineColor: f.purple,
+    lineOpacity: 0.6,
+    lineStyle: "solid",
+    fillColor: f.purple,
+    fillOpacity: 0.06,
+    handleColor: f.handleFill,
+    handleBorderColor: f.handleBorder,
+    handleRadius: 5,
+    hoverLineWidth: 1,
+    selectedLineWidth: 1.1,
+    textColor: h.white,
+    textOpacity: 1,
+    textFontFamily: "Arial",
+    textFontSize: 20
+  },
+  path: {
+    lineWidth: 1,
+    lineColor: f.yellow,
+    lineOpacity: 0.8,
+    lineStyle: "solid",
+    fillColor: f.yellow,
+    fillOpacity: 0,
+    handleColor: f.handleFill,
+    handleBorderColor: f.handleBorder,
+    handleRadius: 5,
+    hoverLineWidth: 1,
+    selectedLineWidth: 1.1
+  },
+  fibRetracement: {
+    levels: [
+      {
+        level: 1,
+        label: "1",
+        color: f.gray,
+        opacity: 0.5,
+        lineWidth: 1,
+        lineStyle: "dashed"
+      },
+      {
+        level: 0.72,
+        label: "0.720",
+        color: f.red,
+        opacity: 0.5,
+        lineWidth: 1,
+        lineStyle: "dashed"
+      },
+      {
+        level: 0.618,
+        label: "0.618",
+        color: f.orange,
+        opacity: 0.5,
+        lineWidth: 1,
+        lineStyle: "dashed"
+      },
+      {
+        level: 0.5,
+        label: "0.5",
+        color: f.purple,
+        opacity: 0.5,
+        lineWidth: 1,
+        lineStyle: "dashed"
+      },
+      {
+        level: 0,
+        label: "0",
+        color: f.gray,
+        opacity: 0.5,
+        lineWidth: 1,
+        lineStyle: "dashed"
+      }
+    ],
+    fillColor: f.gray,
+    fillOpacity: 0,
+    handleColor: f.handleFill,
+    handleBorderColor: f.handleBorder,
+    handleRadius: 5,
+    hoverLineWidth: 1,
+    selectedLineWidth: 1
+  },
+  longPosition: { ...et },
+  shortPosition: { ...et },
+  previousDayHighLow: {
+    line: {
+      color: h.red,
+      width: 1,
+      opacity: 0.7,
+      dash: [4, 16]
+    },
+    text: {
+      color: h.white,
+      font: "11px Arial",
+      paddingX: 6
+    }
+  }
+}, A = { default: "12px Arial" }, it = {
+  width: 1,
+  opacity: 0.9,
+  style: "dashed",
+  dash: [4, 4]
+}, N = {
+  width: 1,
+  opacity: 0.9,
+  style: "dotted",
+  dash: [2, 4]
+}, G = {
+  height: 22,
+  widthVolume: 60,
+  widthPNL: 80,
+  widthClose: 24,
+  position: {
+    placement: "left",
+    margin: 100
+  },
+  borderWidth: 1,
+  borderColor: h.blue,
+  borderOpacity: 0.9,
+  backgroundColor: h.handleBackground,
+  backgroundOpacity: 0.9,
+  sectionDividerColor: h.divider,
+  paddingX: 10,
+  closeButtonColor: h.blue,
+  showVolumeSection: !0,
+  showPnlSection: !0,
+  showCloseSection: !0
+}, rt = {
+  width: 32,
+  height: 22,
+  gapFromStartPriceHandle: 6,
+  gapBetweenHandles: 4,
+  placement: "right",
+  borderWidth: 1,
+  borderColor: h.white,
+  borderOpacity: 0.5,
+  backgroundColor: h.handleBackground,
+  backgroundOpacity: 0.3,
+  textColor: h.white,
+  textOpacity: 0.6,
+  font: A.default
+}, st = {
+  height: 22,
+  widthPNL: 80,
+  position: {
+    placement: "left",
+    margin: 100
+  },
+  borderWidth: 1,
+  borderColor: h.white,
+  borderOpacity: 0.4,
+  backgroundColor: h.handleBackground,
+  backgroundOpacity: 0.9,
+  paddingX: 10,
+  textColor: h.white,
+  textOpacity: 0.85,
+  font: A.default
+}, c = {
+  zoom: {
+    x: {
+      speed: 0.05,
+      min: 0.03,
+      max: 20
+    },
+    y: {
+      speed: 0.1,
+      min: 10,
+      max: 500
+    }
+  },
+  candles: {
+    defaultWidth: 8,
+    defaultGap: 2,
+    minBodyHeight: 1,
+    autoFollowLatestCandle: !0,
+    autoFollowThresholdCandles: 10,
+    rightOffsetCandles: 15,
+    liveAskPriceLine: {
+      visible: !0,
+      width: 1,
+      opacity: 0.7,
+      dash: [4, 6],
+      bullishColor: h.purple,
+      bearishColor: h.purple
+    },
+    liveBidPriceLine: {
+      visible: !0,
+      width: 1,
+      opacity: 0.7,
+      dash: [4, 4],
+      bullishColor: h.green,
+      bearishColor: h.red
+    }
+  },
+  volume: {
+    visible: !0,
+    bullishColor: h.green,
+    bearishColor: h.red,
+    opacity: 0.35,
+    height: 200,
+    bottomOffset: 0,
+    minBarHeight: 1
+  },
+  crosshair: {
+    color: "rgba(255,255,255,0.35)",
+    thickness: 1,
+    style: "dashed"
+  },
+  axis: {
+    axisX: {
+      height: 30,
+      backgroundColor: h.background,
+      borderColor: h.axisBorder,
+      borderWidth: 1,
+      textColor: h.axisText,
+      font: A.default,
+      textAlign: "center",
+      tickColor: h.axisTick,
+      tickWidth: 1,
+      tickLength: 4,
+      labelOffsetY: 16,
+      minLabelGap: 16,
+      crosshairLabel: {
+        backgroundColor: h.crosshairLabelBackground,
+        borderColor: h.crosshairLabelBackground,
+        borderWidth: 1,
+        textColor: h.white,
+        font: A.default,
+        paddingX: 8,
+        height: 26
+      }
+    },
+    axisY: {
+      width: 80,
+      backgroundColor: h.background,
+      borderColor: h.axisBorder,
+      borderWidth: 1,
+      textColor: h.axisText,
+      font: A.default,
+      textAlign: "left",
+      tickCount: 12,
+      tickColor: h.axisYTick,
+      tickWidth: 1,
+      tickLength: 4,
+      tickGap: 64,
+      labelOffsetX: 8,
+      crosshairLabel: {
+        backgroundColor: h.crosshairLabelBackground,
+        borderColor: h.crosshairLabelBackground,
+        borderWidth: 1,
+        textColor: h.white,
+        font: A.default,
+        paddingX: 8,
+        height: 20
+      }
+    }
+  },
+  tradeHandles: {
+    font: A.default,
+    textColor: h.white,
+    textOpacity: 0.8,
+    pnlTextColors: {
+      positive: h.green,
+      negative: h.red
+    },
+    slHandle: {
+      handle: {
+        ...G,
+        borderColor: h.red,
+        borderOpacity: 0.4,
+        backgroundColor: h.slBackground,
+        closeButtonColor: h.red,
+        showVolumeSection: !1
+      },
+      handleLine: {
+        ...it,
+        color: h.red
+      }
+    },
+    tpHandle: {
+      handle: {
+        ...G,
+        borderColor: h.green,
+        borderOpacity: 0.4,
+        backgroundColor: h.tpBackground,
+        closeButtonColor: h.green,
+        showVolumeSection: !1
+      },
+      handleLine: {
+        ...it,
+        color: h.green
+      }
+    },
+    startPriceHandle: {
+      handle: { ...G },
+      handleLine: {
+        width: 1,
+        color: h.blue,
+        opacity: 1,
+        style: "solid"
+      }
+    },
+    missingProtectionHandles: {
+      visible: !0,
+      dragActivationThresholdPx: 2,
+      slHandle: {
+        ...rt,
+        borderColor: h.red,
+        backgroundColor: h.slBackground,
+        textColor: h.red
+      },
+      tpHandle: {
+        ...rt,
+        borderColor: h.green,
+        backgroundColor: h.tpBackground,
+        textColor: h.green
+      },
+      temporarySlHandle: {
+        ...st,
+        borderColor: h.red,
+        backgroundColor: h.slBackground,
+        textColor: h.red
+      },
+      temporaryTpHandle: {
+        ...st,
+        borderColor: h.green,
+        backgroundColor: h.tpBackground,
+        textColor: h.green
+      },
+      temporarySlLine: {
+        ...N,
+        color: h.red
+      },
+      temporaryTpLine: {
+        ...N,
+        color: h.green
+      }
+    }
+  },
+  pastTradeIndicators: {
+    visible: !0,
+    arrow: {
+      visible: !0,
+      width: 60,
+      height: 30,
+      headHeightRatio: 0.45,
+      shaftWidthRatio: 6,
+      buyColor: h.green,
+      buyBorderColor: h.white,
+      sellColor: h.red,
+      sellBorderColor: h.white,
+      borderWidth: 1,
+      opacity: 1
+    },
+    connectorLine: {
+      ...N,
+      color: h.white,
+      opacity: 0.65
+    }
+  },
+  colors: {
+    bullish: h.green,
+    bearish: h.red,
+    background: h.background
+  },
+  shapes: Dt
+}, nt = [
+  300 * 1e3,
+  900 * 1e3,
+  1800 * 1e3,
+  3600 * 1e3,
+  5400 * 1e3,
+  10800 * 1e3,
+  360 * 60 * 1e3,
+  720 * 60 * 1e3,
+  1440 * 60 * 1e3
+], Bt = (t) => {
+  if (t.length < 2) return 900 * 1e3;
+  const e = [];
+  for (let i = 1; i < Math.min(t.length, 10); i++) e.push(t[i].time - t[i - 1].time);
+  return e.sort((i, r) => i - r), e[Math.floor(e.length / 2)];
+}, Xt = ({ candleSpacing: t, candleTimeframeMs: e, labelWidth: i, minLabelGap: r }) => {
+  if (t <= 0 || e <= 0) return nt[0];
+  const s = i + r;
+  for (const o of nt) if (o / e * t >= s) return o;
+  const n = 1440 * 60 * 1e3, a = n / e * t;
+  return n * Math.ceil(s / a);
+}, At = (t, e) => {
+  const i = new Date(t), r = (i.getHours() * 60 + i.getMinutes()) * 60 * 1e3 + i.getSeconds() * 1e3 + i.getMilliseconds();
+  return e >= 1440 * 60 * 1e3 ? r === 0 : r % e === 0;
+}, It = (t) => {
+  const e = new Date(t), i = e.getHours(), r = e.getMinutes();
+  return i === 0 && r === 0 ? String(e.getDate()) : `${String(i).padStart(2, "0")}:${String(r).padStart(2, "0")}`;
+}, Ft = (t) => {
+  const e = new Date(t), i = e.toLocaleDateString("en-US", { weekday: "short" }), r = e.toLocaleDateString("en-US", { month: "short" });
+  return `${i} ${e.getDate()} ${r} ${e.getHours().toString().padStart(2, "0")}.${e.getMinutes().toString().padStart(2, "0")}`;
+}, Yt = class {
+  #t;
+  #e;
+  candles;
+  viewport = null;
+  crosshair = {
+    visible: !1,
+    x: 0,
+    candle: null
+  };
+  constructor(t) {
+    this.#t = t.canvas, this.candles = t.candles;
+    const e = this.#t.getContext("2d");
+    if (!e) throw new Error("Canvas 2D context not supported");
+    this.#e = e;
+  }
+  setCandles(t) {
+    this.candles = t;
+  }
+  setViewport(t) {
+    this.viewport = t;
+  }
+  setCrosshair(t) {
+    this.crosshair = t;
+  }
+  hideCrosshair() {
+    this.crosshair.visible = !1;
+  }
+  render() {
+    this.viewport && (this.clearCanvas(), this.drawBackground(), this.drawTopBorder(), this.candles.length > 0 && this.drawAxisLabels(), this.drawCrosshairTimeLabel());
+  }
+  drawCrosshairTimeLabel() {
+    if (!this.crosshair.visible || !this.crosshair.candle) return;
+    const t = this.#e, e = this.#t.width, i = this.#t.height, r = c.axis.axisX.crosshairLabel, s = Ft(this.crosshair.candle.time);
+    t.save(), t.font = r.font;
+    const n = t.measureText(s).width + r.paddingX * 2, a = r.height, o = this.getCrosshairLabelX(n, e), l = Math.max(0, (i - a) / 2);
+    t.fillStyle = r.backgroundColor, t.fillRect(o, l, n, a), t.strokeStyle = r.borderColor, t.lineWidth = r.borderWidth, t.strokeRect(o, l, n, a), t.fillStyle = r.textColor, t.textAlign = "center", t.textBaseline = "middle", t.fillText(s, o + n / 2, l + a / 2), t.restore();
+  }
+  clearCanvas() {
+    this.#e.clearRect(0, 0, this.#t.width, this.#t.height);
+  }
+  drawBackground() {
+    const t = this.#e, e = c.axis.axisX;
+    t.save(), t.fillStyle = e.backgroundColor, t.fillRect(0, 0, this.#t.width, this.#t.height), t.restore();
+  }
+  drawTopBorder() {
+    const t = this.#e, e = c.axis.axisX;
+    t.save(), t.strokeStyle = e.borderColor, t.lineWidth = e.borderWidth, t.beginPath(), t.moveTo(0, 0), t.lineTo(this.#t.width, 0), t.stroke(), t.restore();
+  }
+  drawAxisLabels() {
+    if (!this.viewport) return;
+    const t = this.#e, e = c.axis.axisX, i = this.#t.width, r = Bt(this.candles);
+    t.save(), t.font = e.font, t.fillStyle = e.textColor, t.textAlign = e.textAlign, t.textBaseline = "middle";
+    const s = t.measureText("00:00").width, n = Xt({
+      candleSpacing: this.viewport.candleSpacing,
+      candleTimeframeMs: r,
+      labelWidth: s,
+      minLabelGap: e.minLabelGap
+    }), { startIndex: a, endIndex: o } = this.getVisibleCandleIndexRange(i);
+    for (let l = a; l <= o; l += 1) {
+      const d = this.getSlotTime(l, r);
+      if (d === null || !At(d, n)) continue;
+      const u = this.getCandleCenterX(l), g = It(d), m = t.measureText(g).width;
+      this.isLabelOutsideCanvas(u, m, i) || (this.drawTick(u), this.drawLabel(g, u));
+    }
+    t.restore();
+  }
+  getVisibleCandleIndexRange(t) {
+    if (!this.viewport) return {
+      startIndex: 0,
+      endIndex: -1
+    };
+    const { candleSpacing: e, offsetX: i } = this.viewport;
+    return {
+      startIndex: Math.max(0, Math.floor(-i / e)),
+      endIndex: Math.ceil((t - i) / e)
+    };
+  }
+  getSlotTime(t, e) {
+    if (t < this.candles.length) {
+      const s = this.candles[t];
+      return s ? s.time : null;
+    }
+    const i = this.candles[this.candles.length - 1];
+    if (!i) return null;
+    const r = t - (this.candles.length - 1);
+    return i.time + r * e;
+  }
+  getCandleCenterX(t) {
+    if (!this.viewport) return 0;
+    const { candleSpacing: e, candleWidth: i, offsetX: r } = this.viewport;
+    return t * e + r + i / 2;
+  }
+  isLabelOutsideCanvas(t, e, i) {
+    return t + e / 2 < 0 || t - e / 2 > i;
+  }
+  drawTick(t) {
+    const e = this.#e, i = c.axis.axisX;
+    e.strokeStyle = i.tickColor, e.lineWidth = i.tickWidth, e.beginPath(), e.moveTo(t, 0), e.lineTo(t, i.tickLength), e.stroke();
+  }
+  drawLabel(t, e) {
+    const i = this.#e, r = c.axis.axisX;
+    i.fillStyle = r.textColor, i.fillText(t, e, r.labelOffsetY);
+  }
+  getCrosshairLabelX(t, e) {
+    return Math.max(120, Math.min(e - t, this.crosshair.x - t / 2));
+  }
+}, p = (t, e = 5) => Number(t.toFixed(e)), Y = ({ price: t, minPrice: e, priceRange: i, chartHeight: r }) => r - (t - e) / i * r, ft = ({ y: t, minPrice: e, priceRange: i, chartHeight: r }) => e + (1 - t / r) * i, Ot = ({ priceRange: t, canvasHeight: e }) => {
+  const i = t / (e / c.axis.axisY.tickGap), r = 10 ** Math.floor(Math.log10(i));
+  for (const s of [
+    1,
+    2,
+    5,
+    10
+  ]) {
+    const n = s * r;
+    if (n >= i) return n;
+  }
+  return 10 * r;
+}, Vt = class {
+  #t;
+  #e;
+  viewport = null;
+  crosshair = {
+    visible: !1,
+    y: 0,
+    price: 0
+  };
+  constructor(t) {
+    this.#t = t.canvas;
+    const e = this.#t.getContext("2d");
+    if (!e) throw new Error("Canvas 2D context not supported");
+    this.#e = e;
+  }
+  setViewport(t) {
+    this.viewport = t;
+  }
+  setCrosshair(t) {
+    this.crosshair = t;
+  }
+  hideCrosshair() {
+    this.crosshair.visible = !1;
+  }
+  render() {
+    this.viewport && (this.clearCanvas(), this.drawBackground(), this.drawLeftBorder(), this.drawPriceLabels(), this.drawCrosshairPriceLabel());
+  }
+  drawCrosshairPriceLabel() {
+    if (!this.crosshair.visible) return;
+    const t = this.#e, e = this.#t.width, i = this.#t.height, r = c.axis.axisY.crosshairLabel, s = p(this.crosshair.price).toFixed(5), n = r.height, a = this.getCrosshairLabelY(n, i);
+    t.save(), t.fillStyle = r.backgroundColor, t.fillRect(0, a, e, n), t.strokeStyle = r.borderColor, t.lineWidth = r.borderWidth, t.strokeRect(0, a, e, n), t.font = r.font, t.fillStyle = r.textColor, t.textAlign = "left", t.textBaseline = "middle", t.fillText(s, r.paddingX, a + n / 2), t.restore();
+  }
+  clearCanvas() {
+    this.#e.clearRect(0, 0, this.#t.width, this.#t.height);
+  }
+  drawBackground() {
+    const t = this.#e, e = c.axis.axisY;
+    t.save(), t.fillStyle = e.backgroundColor, t.fillRect(0, 0, this.#t.width, this.#t.height), t.restore();
+  }
+  drawLeftBorder() {
+    const t = this.#e, e = c.axis.axisY;
+    t.save(), t.strokeStyle = e.borderColor, t.lineWidth = e.borderWidth, t.beginPath(), t.moveTo(0, 0), t.lineTo(0, this.#t.height), t.stroke(), t.restore();
+  }
+  drawPriceLabels() {
+    if (!this.viewport) return;
+    const t = this.#e, e = this.#t.height, i = c.axis.axisY, r = Ot({
+      priceRange: this.viewport.priceRange,
+      canvasHeight: e
+    });
+    t.save(), t.font = i.font, t.fillStyle = i.textColor, t.textAlign = i.textAlign, t.textBaseline = "middle";
+    const { startPrice: s, endPrice: n } = this.getVisiblePriceRange(r);
+    for (let a = s; a <= n; a += r) {
+      const o = this.getPriceY(a, e);
+      this.isPriceOutsideCanvas(o, e) || (this.drawTick(o), this.drawPriceLabel(a, o));
+    }
+    t.restore();
+  }
+  getVisiblePriceRange(t) {
+    return this.viewport ? {
+      startPrice: Math.floor(this.viewport.minPrice / t) * t,
+      endPrice: this.viewport.maxPrice + t
+    } : {
+      startPrice: 0,
+      endPrice: -1
+    };
+  }
+  getPriceY(t, e) {
+    return this.viewport ? Y({
+      price: t,
+      minPrice: this.viewport.minPrice,
+      priceRange: this.viewport.priceRange,
+      chartHeight: e
+    }) : 0;
+  }
+  isPriceOutsideCanvas(t, e) {
+    return t < 0 || t > e;
+  }
+  drawTick(t) {
+    const e = this.#e, i = c.axis.axisY;
+    e.strokeStyle = i.tickColor, e.lineWidth = i.tickWidth, e.beginPath(), e.moveTo(0, t), e.lineTo(i.tickLength, t), e.stroke();
+  }
+  drawPriceLabel(t, e) {
+    const i = this.#e, r = c.axis.axisY;
+    i.fillStyle = r.textColor, i.fillText(p(t).toFixed(5), r.labelOffsetX, e);
+  }
+  getCrosshairLabelY(t, e) {
+    return Math.max(0, Math.min(e - t, this.crosshair.y - t / 2));
+  }
+}, Et = class {
+  #t;
+  #e;
+  mouseX = 0;
+  mouseY = 0;
+  visible = !1;
+  crosshairColor;
+  crosshairThickness;
+  crosshairStyle;
+  constructor(t) {
+    this.#t = t.canvas;
+    const e = this.#t.getContext("2d");
+    if (!e) throw new Error("Canvas 2D context not supported");
+    this.#e = e, this.crosshairColor = t.crosshairColor ?? c.crosshair.color, this.crosshairThickness = t.crosshairThickness ?? c.crosshair.thickness, this.crosshairStyle = t.crosshairStyle ?? c.crosshair.style;
+  }
+  updateMousePosition(t, e, i = {}) {
+    const r = this.getLocalCanvasPoint(t, e), s = i.snapX ?? r.x;
+    this.mouseX = this.clampX(s), this.mouseY = this.clampY(r.y), this.visible = !0;
+  }
+  hide() {
+    this.visible = !1;
+  }
+  applyCrosshairStyle() {
+    const t = this.#e;
+    t.strokeStyle = this.crosshairColor, t.lineWidth = this.crosshairThickness, t.setLineDash(this.getLineDash());
+  }
+  drawVerticalCrosshairLine(t, e) {
+    this.drawLine({
+      ctx: t,
+      fromX: this.mouseX,
+      fromY: 0,
+      toX: this.mouseX,
+      toY: e
+    });
+  }
+  drawHorizontalCrosshairLine(t, e) {
+    this.drawLine({
+      ctx: t,
+      fromX: 0,
+      fromY: this.mouseY,
+      toX: e,
+      toY: this.mouseY
+    });
+  }
+  render() {
+    const t = this.#e, e = this.#t.width, i = this.#t.height;
+    t.clearRect(0, 0, e, i), this.visible && (t.save(), this.applyCrosshairStyle(), this.drawVerticalCrosshairLine(t, i), this.drawHorizontalCrosshairLine(t, e), t.restore());
+  }
+  getLocalCanvasPoint(t, e) {
+    const i = this.#t.getBoundingClientRect(), r = this.#t.width / i.width, s = this.#t.height / i.height;
+    return {
+      x: (t - i.left) * r,
+      y: (e - i.top) * s
+    };
+  }
+  clampX(t) {
+    return this.clamp(t, 0, this.#t.width);
+  }
+  clampY(t) {
+    return this.clamp(t, 0, this.#t.height);
+  }
+  clamp(t, e, i) {
+    return Math.max(e, Math.min(i, t));
+  }
+  getLineDash() {
+    switch (this.crosshairStyle) {
+      case "solid":
+        return [];
+      case "dashed":
+        return [8, 6];
+      case "dotted":
+        return [2, 6];
+    }
+  }
+  drawLine({ ctx: t, fromX: e, fromY: i, toX: r, toY: s }) {
+    t.beginPath(), t.moveTo(e, i), t.lineTo(r, s), t.stroke();
+  }
+}, F = 60 * 1e3, pt = 60 * F, zt = 24 * pt, Nt = class {
+  #t;
+  #e;
+  candles;
+  baseCandleWidth;
+  baseCandleGap;
+  bullishColor;
+  bearishColor;
+  offsetX;
+  zoomX;
+  priceRange;
+  priceCenter;
+  initialPriceRange;
+  autoFollowLatestCandle;
+  isFollowingLatest = !1;
+  autoFollowThresholdCandles;
+  rightOffsetCandles;
+  constructor(t) {
+    this.#t = t.canvas;
+    const e = this.#t.getContext("2d");
+    if (!e) throw new Error("Canvas 2D context not supported");
+    this.#e = e, this.candles = t.candles, this.baseCandleWidth = t.baseCandleWidth ?? c.candles.defaultWidth, this.baseCandleGap = t.baseCandleGap ?? c.candles.defaultGap, this.bullishColor = t.bullishColor ?? c.colors.bullish, this.bearishColor = t.bearishColor ?? c.colors.bearish, this.zoomX = t.zoomX ?? 1, this.autoFollowLatestCandle = t.autoFollowLatestCandle ?? c.candles.autoFollowLatestCandle, this.autoFollowThresholdCandles = t.autoFollowThresholdCandles ?? c.candles.autoFollowThresholdCandles, this.rightOffsetCandles = t.rightOffsetCandles ?? c.candles.rightOffsetCandles, this.offsetX = t.offsetX ?? this.getDefaultOffsetX(), this.isFollowingLatest = this.isWithinAutoFollowThreshold(), this.priceCenter = 0, this.priceRange = 1, this.initialPriceRange = 1, this.initializeViewport(), this.applyManualViewportOverrides(t);
+  }
+  initializeViewport() {
+    if (this.candles.length === 0) {
+      this.setFallbackViewport();
+      return;
+    }
+    const t = this.getInitialVisibleCandles(), { minPrice: e, maxPrice: i } = this.getCandlesPriceBounds(t), r = this.getInitialPriceRange(e, i);
+    this.priceCenter = (e + i) / 2, this.priceRange = r, this.initialPriceRange = r;
+  }
+  isWithinAutoFollowThreshold() {
+    return this.getRightGap() <= this.autoFollowThresholdCandles * this.candleSpacing + 5;
+  }
+  updateLiveCandle(t) {
+    const e = this.candles.at(-1);
+    if (e && e.time === t.time) {
+      this.candles[this.candles.length - 1] = t;
+      return;
+    }
+    this.closeLastCandle(e), this.appendLiveCandle(t), this.updateAutoFollowAfterAppend();
+  }
+  get candleWidth() {
+    return this.baseCandleWidth * this.zoomX;
+  }
+  get candleGap() {
+    return this.baseCandleGap * this.zoomX;
+  }
+  get candleSpacing() {
+    return this.candleWidth + this.candleGap;
+  }
+  get minPrice() {
+    return this.priceCenter - this.priceRange / 2;
+  }
+  get maxPrice() {
+    return this.priceCenter + this.priceRange / 2;
+  }
+  get liveCandle() {
+    return this.candles[this.candles.length - 1];
+  }
+  get viewport() {
+    return {
+      minPrice: this.minPrice,
+      maxPrice: this.maxPrice,
+      priceRange: this.priceRange,
+      offsetX: this.offsetX,
+      zoomX: this.zoomX,
+      candleWidth: this.candleWidth,
+      candleGap: this.candleGap,
+      candleSpacing: this.candleSpacing
+    };
+  }
+  getVisibleRange(t) {
+    return {
+      startIndex: Math.max(0, Math.floor(-this.offsetX / this.candleSpacing)),
+      endIndex: Math.min(this.candles.length - 1, Math.ceil((t - this.offsetX) / this.candleSpacing))
+    };
+  }
+  getCandleX(t) {
+    return t * this.candleSpacing + this.offsetX;
+  }
+  getCandleCenterX(t) {
+    return this.getCandleX(t) + this.candleWidth / 2;
+  }
+  getNearestCandleIndexByX(t) {
+    if (this.candles.length === 0) return null;
+    const e = Math.round((t - this.offsetX - this.candleWidth / 2) / this.candleSpacing);
+    return this.clampCandleIndex(e);
+  }
+  getRawCandleSnapX(t) {
+    const e = Math.round((t - this.offsetX - this.candleWidth / 2) / this.candleSpacing);
+    return this.getCandleCenterX(e);
+  }
+  getPriceAtY(t) {
+    return p(ft({
+      y: t,
+      minPrice: this.minPrice,
+      priceRange: this.priceRange,
+      chartHeight: this.#t.height
+    }));
+  }
+  panHorizontally(t) {
+    this.offsetX += t, this.isFollowingLatest = this.isWithinAutoFollowThreshold();
+  }
+  panVertically(t) {
+    const e = t / this.#t.height * this.priceRange;
+    this.priceCenter += e;
+  }
+  zoomHorizontally(t) {
+    const e = this.getRightEdgeCandleIndex();
+    this.zoomX = this.getNextHorizontalZoom(t), this.offsetX = this.#t.width - e * this.candleSpacing, this.isFollowingLatest = this.isWithinAutoFollowThreshold();
+  }
+  zoomVertically(t) {
+    this.priceRange = this.getNextVerticalPriceRange(t);
+  }
+  resetView() {
+    this.zoomX = 1, this.offsetX = this.getDefaultOffsetX(), this.initializeViewport(), this.isFollowingLatest = this.isWithinAutoFollowThreshold();
+  }
+  render() {
+    const t = this.#e, e = this.#t.width, i = this.#t.height;
+    if (this.clearCanvas(t, e, i), this.candles.length === 0) return;
+    const { startIndex: r, endIndex: s } = this.getVisibleRange(e), n = this.candles.slice(r, s + 1);
+    this.drawCandles({
+      ctx: t,
+      candles: n,
+      startIndex: r,
+      chartHeight: i
+    });
+    const a = {
+      ctx: t,
+      chartWidth: e,
+      chartHeight: i
+    };
+    this.drawAskPriceLine(a), this.drawBidPriceLine(a);
+  }
+  drawCandles({ ctx: t, candles: e, startIndex: i, chartHeight: r }) {
+    e.forEach((s, n) => {
+      const a = i + n, o = this.getCandleX(a), l = this.getCandleColor(s), d = this.getCandleYCoordinates(s, r);
+      this.drawSingleCandle({
+        ctx: t,
+        candleX: o,
+        candleColor: l,
+        ...d
+      });
+    });
+  }
+  drawSingleCandle({ ctx: t, candleX: e, openY: i, closeY: r, highY: s, lowY: n, candleColor: a }) {
+    t.strokeStyle = a, t.fillStyle = a;
+    const o = e + this.candleWidth / 2;
+    t.beginPath(), t.moveTo(o, s), t.lineTo(o, n), t.stroke();
+    const l = Math.min(i, r), d = Math.max(Math.abs(r - i), c.candles.minBodyHeight);
+    t.fillRect(e, l, this.candleWidth, d);
+  }
+  drawPriceLine({ ctx: t, chartWidth: e, chartHeight: i, price: r, color: s, opacity: n, lineWidth: a, dash: o }) {
+    const l = this.getPriceY(p(r), i);
+    t.save(), t.globalAlpha = n, t.strokeStyle = s, t.lineWidth = a, t.setLineDash(o), t.beginPath(), t.moveTo(0, l), t.lineTo(e, l), t.stroke(), t.restore();
+  }
+  drawBidPriceLine({ ctx: t, chartWidth: e, chartHeight: i }) {
+    const r = this.candles.at(-1);
+    !r || !c.candles.liveBidPriceLine.visible || this.drawPriceLine({
+      ctx: t,
+      chartWidth: e,
+      chartHeight: i,
+      price: r.close,
+      color: this.getBidPriceLineColor(r),
+      opacity: c.candles.liveBidPriceLine.opacity,
+      lineWidth: c.candles.liveBidPriceLine.width,
+      dash: c.candles.liveBidPriceLine.dash
+    });
+  }
+  drawAskPriceLine({ ctx: t, chartWidth: e, chartHeight: i }) {
+    const r = this.candles.at(-1);
+    !r || !c.candles.liveAskPriceLine.visible || r.ask == null || this.drawPriceLine({
+      ctx: t,
+      chartWidth: e,
+      chartHeight: i,
+      price: r.ask,
+      color: this.getAskPriceLineColor(r),
+      opacity: c.candles.liveAskPriceLine.opacity,
+      lineWidth: c.candles.liveAskPriceLine.width,
+      dash: c.candles.liveAskPriceLine.dash
+    });
+  }
+  getDefaultOffsetX() {
+    const t = this.getTotalChartWidth(), e = this.getRightOffsetPixels();
+    return this.#t.width - t - e;
+  }
+  getTotalChartWidth() {
+    return this.candles.length * this.candleSpacing;
+  }
+  getRightOffsetPixels() {
+    return this.rightOffsetCandles * this.candleSpacing;
+  }
+  getRightGap() {
+    return this.#t.width - (this.getTotalChartWidth() + this.offsetX) - this.getRightOffsetPixels();
+  }
+  setFallbackViewport() {
+    this.priceCenter = 100, this.priceRange = 20, this.initialPriceRange = this.priceRange;
+  }
+  getInitialVisibleCandles() {
+    const t = Math.ceil(this.#t.width / this.candleSpacing), e = Math.max(0, this.candles.length - t);
+    return this.candles.slice(e);
+  }
+  getCandlesPriceBounds(t) {
+    let e = Number.POSITIVE_INFINITY, i = Number.NEGATIVE_INFINITY;
+    for (const r of t)
+      r.low < e && (e = r.low), r.high > i && (i = r.high);
+    return {
+      minPrice: e,
+      maxPrice: i
+    };
+  }
+  getInitialPriceRange(t, e) {
+    const i = this.getInitialFallbackPercent(), r = p(e - t), s = Math.max(Math.abs((t + e) / 2) * i, 1e-5), n = Math.max(r, s);
+    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 <= pt ? 75e-4 : (t < zt, 0.01);
+  }
+  detectCandleTimeframeMs() {
+    if (this.candles.length < 2) return 15 * F;
+    const t = [];
+    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)];
+  }
+  applyManualViewportOverrides(t) {
+    t.priceCenter !== void 0 && (this.priceCenter = t.priceCenter), t.priceRange !== void 0 && (this.priceRange = t.priceRange, this.initialPriceRange = t.priceRange);
+  }
+  closeLastCandle(t) {
+    t && (t.isClosed = !0);
+  }
+  appendLiveCandle(t) {
+    this.candles.push(t);
+  }
+  updateAutoFollowAfterAppend() {
+    this.isFollowingLatest = this.isWithinAutoFollowThreshold(), this.autoFollowLatestCandle && this.isFollowingLatest && (this.offsetX -= this.candleSpacing);
+  }
+  clampCandleIndex(t) {
+    return Math.max(0, Math.min(this.candles.length - 1, t));
+  }
+  getRightEdgeCandleIndex() {
+    return (this.#t.width - this.offsetX) / this.candleSpacing;
+  }
+  getNextHorizontalZoom(t) {
+    const { speed: e, min: i, max: r } = c.zoom.x, s = this.zoomX + t * e;
+    return Math.max(i, Math.min(s, r));
+  }
+  getNextVerticalPriceRange(t) {
+    const { speed: e, min: i, max: r } = c.zoom.y, s = 1 - t * e, n = this.priceRange * s, a = this.initialPriceRange * (i / 100), o = this.initialPriceRange * (r / 100);
+    return Math.max(a, Math.min(n, o));
+  }
+  clearCanvas(t, e, i) {
+    t.clearRect(0, 0, e, i);
+  }
+  getCandleColor(t) {
+    return t.close >= t.open ? this.bullishColor : this.bearishColor;
+  }
+  getCandleYCoordinates(t, e) {
+    return {
+      openY: this.getPriceY(t.open, e),
+      closeY: this.getPriceY(t.close, e),
+      highY: this.getPriceY(t.high, e),
+      lowY: this.getPriceY(t.low, e)
+    };
+  }
+  getPriceY(t, e) {
+    return Y({
+      price: t,
+      minPrice: this.minPrice,
+      priceRange: this.priceRange,
+      chartHeight: e
+    });
+  }
+  getBidPriceLineColor(t) {
+    return t.close >= t.open ? c.candles.liveBidPriceLine.bullishColor : c.candles.liveBidPriceLine.bearishColor;
+  }
+  getAskPriceLineColor(t) {
+    return t.close >= t.open ? c.candles.liveAskPriceLine.bullishColor : c.candles.liveAskPriceLine.bearishColor;
+  }
+}, Gt = class {
+  #t;
+  #e;
+  #r = null;
+  #s = null;
+  constructor({ ctx: t, config: e }) {
+    this.#t = t, this.#e = e;
+  }
+  setViewport(t) {
+    this.#r = t;
+  }
+  setConfig(t) {
+    this.#e = t;
+  }
+  setPreviousDay(t) {
+    this.#s = t ?? null;
+  }
+  render() {
+    if (!this.#r || !this.#s) return;
+    const { high: t, low: e } = this.#s;
+    Number.isFinite(t) && t > 0 && this.#c(t, "PDH"), Number.isFinite(e) && e > 0 && this.#c(e, "PDL");
+  }
+  #c(t, e) {
+    if (!this.#r || !this.#e) return;
+    const i = this.#t, r = i.canvas, s = Y({
+      price: t,
+      minPrice: this.#r.minPrice,
+      priceRange: this.#r.priceRange,
+      chartHeight: r.height
+    });
+    if (s < 0 || s > r.height) return;
+    const { line: n, text: a } = this.#e, o = r.width;
+    i.save(), i.font = a.font;
+    const l = i.measureText(e).width, d = o / 2, u = l / 2 + a.paddingX;
+    i.globalAlpha = n.opacity, i.strokeStyle = n.color, i.lineWidth = n.width, i.setLineDash(n.dash), i.beginPath(), i.moveTo(0, s), i.lineTo(d - u, s), i.stroke(), i.beginPath(), i.moveTo(d + u, s), i.lineTo(o, s), i.stroke(), i.setLineDash([]), i.globalAlpha = 1, i.fillStyle = a.color, i.textAlign = "center", i.textBaseline = "middle", i.fillText(e, d, s), i.restore();
+  }
+}, mt = (t, e) => {
+  const i = t.getBoundingClientRect(), r = t.width / i.width, s = t.height / i.height;
+  return {
+    x: (e.clientX - i.left) * r,
+    y: (e.clientY - i.top) * s
+  };
+};
+var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `shape-${Date.now()}-${Math.random().toString(16).slice(2)}`, at = (t, e) => mt(t, e), ot = (t, e) => ({
+  time: e.getNearestCandleTimeForX(t.x),
+  price: e.getPriceForY(t.y)
+}), v = (t, e) => ({
+  x: e.getXForTime(t.time),
+  y: e.getYForPrice(t.price)
+}), Ut = (t, e) => {
+  const i = Math.min(t.x, e.x), r = Math.max(t.x, e.x), s = Math.min(t.y, e.y), n = Math.max(t.y, e.y);
+  return {
+    left: i,
+    top: s,
+    right: r,
+    bottom: n,
+    width: r - i,
+    height: n - s
+  };
+}, _ = (t, e, i) => Ut(v(t, i), v(e, i)), $ = (t, e) => {
+  const i = t.x - e.x, r = t.y - e.y;
+  return Math.sqrt(i * i + r * r);
+}, Ct = (t, e, i) => {
+  const r = i.x - e.x, s = i.y - e.y, n = r * r + s * s;
+  if (n === 0) return $(t, e);
+  const a = Math.max(0, Math.min(1, ((t.x - e.x) * r + (t.y - e.y) * s) / n));
+  return $(t, {
+    x: e.x + a * r,
+    y: e.y + a * s
+  });
+}, vt = (t, e, i = 0) => t.x >= e.left - i && t.x <= e.right + i && t.y >= e.top - i && t.y <= e.bottom + i, _t = (t, e, i = 8) => {
+  if (!vt(t, e, i)) return !1;
+  const r = Math.abs(t.x - e.left) <= i, s = Math.abs(t.x - e.right) <= i, n = Math.abs(t.y - e.top) <= i, a = Math.abs(t.y - e.bottom) <= i, o = t.x >= e.left - i && t.x <= e.right + i, l = t.y >= e.top - i && t.y <= e.bottom + i;
+  return (r || s) && l || (n || a) && o;
+}, b = ({ shapeId: t, type: e, point: i, radius: r = 5, cursor: s, index: n }) => ({
+  shapeId: t,
+  type: e,
+  x: i.x,
+  y: i.y,
+  radius: r,
+  cursor: s,
+  index: n
+}), J = (t, e) => $(t, e) <= e.radius + 2, E = (t, e = 1) => t === "dashed" ? [e * 6, e * 4] : t === "dotted" ? [e, e * 3] : [], K = (t, e, i) => {
+  t.strokeStyle = P(e.lineColor, e.lineOpacity), t.lineWidth = i ?? e.lineWidth, t.setLineDash(E(e.lineStyle, t.lineWidth));
+}, yt = (t, e, i) => !e || i === void 0 || i <= 0 ? !1 : (t.fillStyle = P(e, i), !0), O = (t) => {
+  t.setLineDash([]);
+}, $t = (t, e, i = {
+  fillColor: "#ffffff",
+  borderColor: "#2962ff",
+  borderThickness: 3
+}) => {
+  t.save(), t.beginPath(), t.arc(e.x, e.y, e.radius, 0, Math.PI * 2), t.fillStyle = i.fillColor, t.fill(), t.lineWidth = i.borderThickness, t.strokeStyle = i.borderColor, t.stroke(), t.restore();
+}, V = (t, e, i) => {
+  e.forEach((r) => {
+    $t(t, r, i);
+  });
+}, P = (t, e) => {
+  const i = jt(e, 0, 1);
+  return t.startsWith("rgba(") ? t : t.startsWith("rgb(") ? t.replace("rgb(", "rgba(").replace(")", `, ${i})`) : t.startsWith("#") ? Jt(t, i) : t;
+}, Jt = (t, e) => {
+  const i = t.replace("#", ""), r = i.length === 3 ? i.split("").map((s) => `${s}${s}`).join("") : i;
+  return `rgba(${parseInt(r.slice(0, 2), 16)}, ${parseInt(r.slice(2, 4), 16)}, ${parseInt(r.slice(4, 6), 16)}, ${e})`;
+}, jt = (t, e, i) => Math.min(i, Math.max(e, t)), lt = (t, e, i) => e + (t - e) * i, j = (t, e) => {
+  if (t.length === 0) return -1;
+  let i = 0, r = Math.abs(t[0].time - e);
+  for (let s = 1; s < t.length; s += 1) {
+    const n = Math.abs(t[s].time - e);
+    n < r && (r = n, i = s);
+  }
+  return i;
+}, Pt = (t) => {
+  if (t.length < 2) return 900 * 1e3;
+  const e = [];
+  for (let i = 1; i < t.length; i += 1) {
+    const r = t[i].time - t[i - 1].time;
+    r > 0 && e.push(r);
+  }
+  return e.length === 0 ? 900 * 1e3 : e.reduce((i, r) => i + r, 0) / e.length;
+}, Kt = (t, e, i) => {
+  const r = j(t, e), s = r + i;
+  return r >= 0 && s >= 0 && s < t.length ? t[s].time : e + Pt(t) * i;
+}, ht = (t) => t instanceof MouseEvent && t.type === "contextmenu" ? !1 : "button" in t && t.type === "pointerdown" ? t.button === 0 : !0, S = class D {
+  static defaultConfig = {
+    levels: [
+      {
+        level: 1,
+        label: "1",
+        color: "#808080",
+        opacity: 0.8,
+        lineWidth: 1,
+        lineStyle: "dashed"
+      },
+      {
+        level: 0.72,
+        label: "0.720",
+        color: "#ff3b30",
+        opacity: 0.8,
+        lineWidth: 1,
+        lineStyle: "dashed"
+      },
+      {
+        level: 0.618,
+        label: "0.618",
+        color: "#ff9500",
+        opacity: 0.8,
+        lineWidth: 1,
+        lineStyle: "dashed"
+      },
+      {
+        level: 0.5,
+        label: "0.5",
+        color: "#af52de",
+        opacity: 0.8,
+        lineWidth: 1,
+        lineStyle: "dashed"
+      },
+      {
+        level: 0,
+        label: "0",
+        color: "#808080",
+        opacity: 0.8,
+        lineWidth: 1,
+        lineStyle: "dashed"
+      }
+    ],
+    fillColor: "#808080",
+    fillOpacity: 0.04,
+    handleColor: "#ffffff",
+    handleBorderColor: "#2962ff",
+    handleBorderThickness: 1.5,
+    handleRadius: 5,
+    hoverLineWidth: 2,
+    selectedLineWidth: 2
+  };
+  static draw({ ctx: e, shape: i, converter: r, config: s = D.defaultConfig, selected: n = !1, hovered: a = !1 }) {
+    const [o, l] = i.vertices, d = v(o, r), u = v(l, r), g = _(o, l, r), m = Math.min(d.x, u.x), w = Math.max(d.x, u.x);
+    e.save(), yt(e, s.fillColor, s.fillOpacity) && e.fillRect(g.left, g.top, g.width, g.height);
+    for (const C of s.levels) {
+      const x = lt(o.price, l.price, C.level), T = r.getYForPrice(x), H = n ? Math.max(C.lineWidth, s.selectedLineWidth) : a ? Math.max(C.lineWidth, s.hoverLineWidth) : C.lineWidth;
+      e.beginPath(), e.strokeStyle = P(C.color, C.opacity), e.lineWidth = H, e.setLineDash(E(C.lineStyle, H)), e.moveTo(m, T), e.lineTo(w, T), e.stroke(), C.label && (e.setLineDash([]), e.fillStyle = P(C.color, C.opacity), e.font = "11px sans-serif", e.textBaseline = "middle", e.fillText(Number(C.label).toFixed(2).toString(), w + 12, T));
+    }
+    O(e), (n || a) && V(e, D.getHandles(i, r, s), {
+      fillColor: s.handleColor,
+      borderColor: s.handleBorderColor,
+      borderThickness: s.handleBorderThickness
+    }), e.restore();
+  }
+  static drawDraft({ ctx: e, vertices: i, converter: r, config: s = D.defaultConfig }) {
+    D.draw({
+      ctx: e,
+      shape: {
+        id: "__draft_fib_retracement__",
+        type: "fibRetracement",
+        vertices: i
+      },
+      converter: r,
+      config: s,
+      selected: !0
+    });
+  }
+  static getHandles(e, i, r = D.defaultConfig) {
+    const [s, n] = e.vertices, a = v(s, i), o = v(n, i);
+    return [b({
+      shapeId: e.id,
+      type: "start",
+      point: a,
+      radius: r.handleRadius,
+      cursor: "grab"
+    }), b({
+      shapeId: e.id,
+      type: "end",
+      point: o,
+      radius: r.handleRadius,
+      cursor: "grab"
+    })];
+  }
+  static hitTest({ point: e, shape: i, converter: r, tolerance: s = 8, config: n = D.defaultConfig }) {
+    const [a, o] = i.vertices, l = v(a, r), d = v(o, r), u = Math.min(l.x, d.x), g = Math.max(l.x, d.x);
+    if (e.x < u - s || e.x > g + s) return !1;
+    for (const m of n.levels) {
+      const w = lt(a.price, o.price, m.level), C = r.getYForPrice(w);
+      if (Math.abs(e.y - C) <= s) return !0;
+    }
+    return !1;
+  }
+  static move(e, i) {
+    return {
+      ...e,
+      vertices: [{
+        time: e.vertices[0].time + i.time,
+        price: e.vertices[0].price + i.price
+      }, {
+        time: e.vertices[1].time + i.time,
+        price: e.vertices[1].price + i.price
+      }]
+    };
+  }
+  static resize(e, i, r) {
+    return i === "start" ? {
+      ...e,
+      vertices: [r, e.vertices[1]]
+    } : i === "end" ? {
+      ...e,
+      vertices: [e.vertices[0], r]
+    } : e;
+  }
+}, k = class I {
+  static defaultConfig = {
+    lineWidth: 2,
+    lineColor: "#2962ff",
+    lineOpacity: 1,
+    lineStyle: "solid",
+    handleColor: "#ffffff",
+    handleBorderColor: "#2962ff",
+    handleBorderThickness: 1.5,
+    handleRadius: 5,
+    hoverLineWidth: 3,
+    selectedLineWidth: 3
+  };
+  static draw({ ctx: e, shape: i, converter: r, config: s = I.defaultConfig, selected: n = !1, hovered: a = !1 }) {
+    const [o, l] = i.vertices, d = v(o, r), u = v(l, r);
+    e.save(), K(e, s, n ? s.selectedLineWidth : a ? s.hoverLineWidth : void 0), e.beginPath(), e.moveTo(d.x, d.y), e.lineTo(u.x, u.y), e.stroke(), O(e), (n || a) && V(e, I.getHandles(i, r, s), {
+      fillColor: s.handleColor,
+      borderColor: s.handleBorderColor,
+      borderThickness: s.handleBorderThickness
+    }), e.restore();
+  }
+  static drawDraft({ ctx: e, vertices: i, converter: r, config: s = I.defaultConfig }) {
+    I.draw({
+      ctx: e,
+      shape: {
+        id: "__draft_trendline__",
+        type: "trendline",
+        vertices: i
+      },
+      converter: r,
+      config: s,
+      selected: !0
+    });
+  }
+  static getHandles(e, i, r = I.defaultConfig) {
+    const [s, n] = e.vertices, a = v(s, i), o = v(n, i);
+    return [b({
+      shapeId: e.id,
+      type: "start",
+      point: a,
+      radius: r.handleRadius,
+      cursor: "grab"
+    }), b({
+      shapeId: e.id,
+      type: "end",
+      point: o,
+      radius: r.handleRadius,
+      cursor: "grab"
+    })];
+  }
+  static hitTest({ point: e, shape: i, converter: r, tolerance: s = 8 }) {
+    const [n, a] = i.vertices;
+    return Ct(e, v(n, r), v(a, r)) <= s;
+  }
+  static move(e, i) {
+    return {
+      ...e,
+      vertices: [{
+        time: e.vertices[0].time + i.time,
+        price: e.vertices[0].price + i.price
+      }, {
+        time: e.vertices[1].time + i.time,
+        price: e.vertices[1].price + i.price
+      }]
+    };
+  }
+  static resize(e, i, r) {
+    return i === "start" ? {
+      ...e,
+      vertices: [r, e.vertices[1]]
+    } : i === "end" ? {
+      ...e,
+      vertices: [e.vertices[0], r]
+    } : e;
+  }
+}, M = class B {
+  static defaultConfig = {
+    lineWidth: 2,
+    lineColor: "#2962ff",
+    lineOpacity: 1,
+    lineStyle: "solid",
+    fillColor: "#2962ff",
+    fillOpacity: 0,
+    handleColor: "#ffffff",
+    handleBorderColor: "#2962ff",
+    handleBorderThickness: 1.5,
+    handleRadius: 5,
+    hoverLineWidth: 3,
+    selectedLineWidth: 3
+  };
+  static draw({ ctx: e, shape: i, converter: r, config: s = B.defaultConfig, selected: n = !1, hovered: a = !1 }) {
+    const o = i.vertices.map((l) => v(l, r));
+    if (o.length !== 0) {
+      e.save(), K(e, s, n ? s.selectedLineWidth : a ? s.hoverLineWidth : void 0), e.beginPath(), e.moveTo(o[0].x, o[0].y);
+      for (let l = 1; l < o.length; l += 1) e.lineTo(o[l].x, o[l].y);
+      e.stroke(), O(e), o.length >= 2 && B.drawEndArrow({
+        ctx: e,
+        previousPoint: o[o.length - 2],
+        endPoint: o[o.length - 1],
+        color: s.lineColor,
+        opacity: s.lineOpacity,
+        lineWidth: n ? s.selectedLineWidth ?? s.lineWidth : a ? s.hoverLineWidth ?? s.lineWidth : s.lineWidth
+      }), (n || a) && V(e, B.getHandles(i, r, s), {
+        fillColor: s.handleColor,
+        borderColor: s.handleBorderColor,
+        borderThickness: s.handleBorderThickness
+      }), e.restore();
+    }
+  }
+  static drawDraft({ ctx: e, vertices: i, previewVertex: r, converter: s, config: n = B.defaultConfig }) {
+    const a = r ? [...i, r] : i;
+    B.draw({
+      ctx: e,
+      shape: {
+        id: "__draft_path__",
+        type: "path",
+        vertices: a
+      },
+      converter: s,
+      config: n,
+      selected: !0
+    });
+  }
+  static getHandles(e, i, r = B.defaultConfig) {
+    return e.vertices.map((s, n) => b({
+      shapeId: e.id,
+      type: n === 0 ? "start" : n === e.vertices.length - 1 ? "end" : "move",
+      point: v(s, i),
+      radius: r.handleRadius,
+      cursor: "grab",
+      index: n
+    }));
+  }
+  static hitTest({ point: e, shape: i, converter: r, tolerance: s = 8 }) {
+    const n = i.vertices.map((a) => v(a, r));
+    if (n.length === 1) {
+      const a = n[0], o = e.x - a.x, l = e.y - a.y;
+      return Math.sqrt(o * o + l * l) <= s;
+    }
+    for (let a = 1; a < n.length; a += 1) if (Ct(e, n[a - 1], n[a]) <= s) return !0;
+    return !1;
+  }
+  static move(e, i) {
+    return {
+      ...e,
+      vertices: e.vertices.map((r) => ({
+        time: r.time + i.time,
+        price: r.price + i.price
+      }))
+    };
+  }
+  static resize(e, i, r) {
+    return i < 0 || i >= e.vertices.length ? e : {
+      ...e,
+      vertices: e.vertices.map((s, n) => n === i ? r : s)
+    };
+  }
+  static drawEndArrow({ ctx: e, previousPoint: i, endPoint: r, color: s, opacity: n, lineWidth: a }) {
+    const o = Math.atan2(r.y - i.y, r.x - i.x), l = 12, d = Math.PI / 7;
+    e.save(), e.beginPath(), e.strokeStyle = P(s, n), e.fillStyle = P(s, n), e.lineWidth = a, e.setLineDash([]), e.moveTo(r.x, r.y), e.lineTo(r.x - l * Math.cos(o - d), r.y - l * Math.sin(o - d)), e.lineTo(r.x - l * Math.cos(o + d), r.y - l * Math.sin(o + d)), e.closePath(), e.fill(), e.stroke(), e.restore();
+  }
+}, R = class X {
+  static defaultConfig = {
+    lineWidth: 2,
+    lineColor: "#2962ff",
+    lineOpacity: 1,
+    lineStyle: "solid",
+    fillColor: "#2962ff",
+    fillOpacity: 0.12,
+    handleColor: "#ffffff",
+    handleBorderColor: "#2962ff",
+    handleBorderThickness: 1.5,
+    handleRadius: 5,
+    hoverLineWidth: 3,
+    selectedLineWidth: 3,
+    textColor: "#ffffff",
+    textOpacity: 1,
+    textFontFamily: "Arial",
+    textFontSize: 20
+  };
+  static draw({ ctx: e, shape: i, converter: r, config: s = X.defaultConfig, selected: n = !1, hovered: a = !1 }) {
+    const [o, l] = i.vertices, d = _(o, l, r);
+    e.save(), yt(e, s.fillColor, s.fillOpacity) && e.fillRect(d.left, d.top, d.width, d.height), K(e, s, n ? s.selectedLineWidth : a ? s.hoverLineWidth : void 0), e.strokeRect(d.left, d.top, d.width, d.height), O(e), X.drawText(e, d, i.text, s), (n || a) && V(e, X.getHandles(i, r, s), {
+      fillColor: s.handleColor,
+      borderColor: s.handleBorderColor,
+      borderThickness: s.handleBorderThickness
+    }), e.restore();
+  }
+  static drawDraft({ ctx: e, vertices: i, converter: r, config: s = X.defaultConfig }) {
+    X.draw({
+      ctx: e,
+      shape: {
+        id: "__draft_rectangle__",
+        type: "rectangle",
+        vertices: i
+      },
+      converter: r,
+      config: s,
+      selected: !0
+    });
+  }
+  static getHandles(e, i, r = X.defaultConfig) {
+    const [s, n] = e.vertices, a = v(s, i), o = v(n, i), l = a.x <= o.x, d = a.y <= o.y, u = l === d ? "nwse-resize" : "nesw-resize", g = l === d ? "nwse-resize" : "nesw-resize";
+    return [b({
+      shapeId: e.id,
+      type: "start",
+      point: a,
+      radius: r.handleRadius,
+      cursor: u
+    }), b({
+      shapeId: e.id,
+      type: "end",
+      point: o,
+      radius: r.handleRadius,
+      cursor: g
+    })];
+  }
+  static hitTest({ point: e, shape: i, converter: r, tolerance: s = 8 }) {
+    const [n, a] = i.vertices;
+    return _t(e, _(n, a, r), s);
+  }
+  static move(e, i) {
+    return {
+      ...e,
+      vertices: [{
+        time: e.vertices[0].time + i.time,
+        price: e.vertices[0].price + i.price
+      }, {
+        time: e.vertices[1].time + i.time,
+        price: e.vertices[1].price + i.price
+      }]
+    };
+  }
+  static resize(e, i, r) {
+    return i === "start" ? {
+      ...e,
+      vertices: [r, e.vertices[1]]
+    } : i === "end" ? {
+      ...e,
+      vertices: [e.vertices[0], r]
+    } : e;
+  }
+  static drawText(e, i, r, s) {
+    const n = r?.trim();
+    n && (e.save(), e.beginPath(), e.rect(i.left, i.top, i.width, i.height), e.clip(), e.font = `${s.textFontSize}px ${s.textFontFamily}`, e.globalAlpha = s.textOpacity, e.fillStyle = s.textColor, e.textAlign = "center", e.textBaseline = "middle", e.fillText(n, i.left + i.width / 2, i.top + i.height / 2), e.restore());
+  }
+}, wt = [
+  "USDJPY",
+  "GBPJPY",
+  "AUDJPY",
+  "EURJPY",
+  "NZDJPY",
+  "CADJPY"
+], bt = ["BTCUSD", "ETHUSD"], xt = [
+  "XAUUSD",
+  "USOIL",
+  "UKOIL",
+  "XAGUSD"
+], Tt = (t) => wt.some((e) => t.includes(e.slice(3))) ? 0.01 : bt.includes(t) ? 1 : xt.includes(t) ? 0.01 : 1e-4, Zt = (t, e) => wt.includes(t) ? e * 6.33806 : bt.includes(t) ? e * 1 : (xt.includes(t), e * 10), dt = (t, e, i, r, s) => {
+  const n = s.split(".")[0], a = Tt(n), o = Zt(n, r);
+  return (t === "buy" ? i - e : e - i) / a * o;
+}, L = class y {
+  static defaultLongConfig = {
+    defaultWidthCandles: 10,
+    defaultStopLossPercent: 0.25,
+    defaultRiskRewardRatio: 1.5,
+    profitFillColor: "#00c853",
+    profitFillOpacity: 0.18,
+    lossFillColor: "#ff3b30",
+    lossFillOpacity: 0.18,
+    borderColor: "#808080",
+    borderOpacity: 0.8,
+    borderWidth: 1,
+    borderStyle: "solid",
+    midLineColor: "#808080",
+    midLineOpacity: 0.9,
+    midLineWidth: 1,
+    midLineStyle: "dashed",
+    handleColor: "#ffffff",
+    handleBorderColor: "#2962ff",
+    handleBorderThickness: 1.5,
+    handleRadius: 5,
+    hoverLineWidth: 2,
+    selectedLineWidth: 2
+  };
+  static defaultShortConfig = { ...y.defaultLongConfig };
+  static draw({ ctx: e, activeSymbol: i, shape: r, converter: s, config: n = r.type === "longPosition" ? y.defaultLongConfig : y.defaultShortConfig, selected: a = !1, hovered: o = !1 }) {
+    const l = y.getGeometry(r, s);
+    e.save(), e.fillStyle = P(n.profitFillColor, n.profitFillOpacity), e.fillRect(l.profitBox.left, l.profitBox.top, l.profitBox.width, l.profitBox.height), e.fillStyle = P(n.lossFillColor, n.lossFillOpacity), e.fillRect(l.lossBox.left, l.lossBox.top, l.lossBox.width, l.lossBox.height);
+    const d = a ? Math.max(n.borderWidth, n.selectedLineWidth) : o ? Math.max(n.borderWidth, n.hoverLineWidth) : n.borderWidth;
+    e.strokeStyle = P(n.borderColor, n.borderOpacity), e.lineWidth = d, e.setLineDash(E(n.borderStyle, d)), e.strokeRect(l.box.left, l.box.top, l.box.width, l.box.height), e.beginPath(), e.strokeStyle = P(n.midLineColor, n.midLineOpacity), e.lineWidth = n.midLineWidth, e.setLineDash(E(n.midLineStyle, n.midLineWidth)), e.moveTo(l.box.left, l.entryY), e.lineTo(l.box.right, l.entryY), e.stroke(), O(e), y.drawLabels({
+      ctx: e,
+      activeSymbol: i,
+      shape: r,
+      geometry: l,
+      config: n
+    }), (a || o) && V(e, y.getHandles(r, s, n), {
+      fillColor: n.handleColor,
+      borderColor: n.handleBorderColor,
+      borderThickness: n.handleBorderThickness
+    }), e.restore();
+  }
+  static createFromVertex({ id: e, type: i, entry: r, converter: s, config: n = i === "longPosition" ? y.defaultLongConfig : y.defaultShortConfig }) {
+    const a = s.getTimeForX(s.getXForTime(r.time) + s.getCandleWidth() * n.defaultWidthCandles), o = n.defaultStopLossPercent;
+    return {
+      id: e,
+      type: i,
+      entry: r,
+      endTime: a,
+      stopLossPercent: o,
+      takeProfitPercent: o * n.defaultRiskRewardRatio
+    };
+  }
+  static getGeometry(e, i) {
+    const r = v(e.entry, i), s = i.getXForTime(e.endTime), n = Math.min(r.x, s), a = Math.max(r.x, s), o = e.type === "longPosition", l = o ? e.takeProfitPercent : e.stopLossPercent, d = o ? e.stopLossPercent : e.takeProfitPercent, u = e.entry.price * (1 + l / 100), g = e.entry.price * (1 - d / 100), m = i.getYForPrice(u), w = i.getYForPrice(g), C = Math.min(m, w, r.y), x = Math.max(m, w, r.y), T = {
+      left: n,
+      top: C,
+      right: a,
+      bottom: r.y,
+      width: a - n,
+      height: Math.abs(r.y - C)
+    }, H = {
+      left: n,
+      top: r.y,
+      right: a,
+      bottom: x,
+      width: a - n,
+      height: Math.abs(x - r.y)
+    };
+    return {
+      entryPoint: r,
+      endX: s,
+      entryY: r.y,
+      upperPrice: u,
+      lowerPrice: g,
+      box: {
+        left: n,
+        top: C,
+        right: a,
+        bottom: x,
+        width: a - n,
+        height: x - C
+      },
+      profitBox: o ? T : H,
+      lossBox: o ? H : T
+    };
+  }
+  static getHandles(e, i, r) {
+    const s = r ?? (e.type === "longPosition" ? y.defaultLongConfig : y.defaultShortConfig), n = y.getGeometry(e, i);
+    return [
+      b({
+        shapeId: e.id,
+        type: "upperHeight",
+        point: {
+          x: n.box.left,
+          y: n.box.top
+        },
+        radius: s.handleRadius,
+        cursor: "ns-resize"
+      }),
+      b({
+        shapeId: e.id,
+        type: "lowerHeight",
+        point: {
+          x: n.box.left,
+          y: n.box.bottom
+        },
+        radius: s.handleRadius,
+        cursor: "ns-resize"
+      }),
+      b({
+        shapeId: e.id,
+        type: "start",
+        point: {
+          x: n.entryPoint.x,
+          y: n.entryY
+        },
+        radius: s.handleRadius,
+        cursor: "ns-resize"
+      }),
+      b({
+        shapeId: e.id,
+        type: "end",
+        point: {
+          x: n.endX,
+          y: n.entryY
+        },
+        radius: s.handleRadius,
+        cursor: "ew-resize"
+      })
+    ];
+  }
+  static hitTest({ point: e, shape: i, converter: r, config: s }) {
+    return y.getHandles(i, r, s).some((n) => J(e, n)) ? !0 : vt(e, y.getGeometry(i, r).box);
+  }
+  static move(e, i) {
+    return {
+      ...e,
+      entry: {
+        time: e.entry.time + i.time,
+        price: e.entry.price + i.price
+      },
+      endTime: e.endTime + i.time
+    };
+  }
+  static resize({ shape: e, handleType: i, vertex: r, converter: s }) {
+    return i === "start" ? {
+      ...e,
+      entry: {
+        time: e.entry.time,
+        price: r.price
+      }
+    } : i === "end" ? {
+      ...e,
+      endTime: r.time
+    } : i === "upperHeight" ? y.resizeUpperHeight(e, r.price) : i === "lowerHeight" ? y.resizeLowerHeight(e, r.price) : {
+      ...e,
+      endTime: s.getTimeForX(s.getXForTime(e.endTime))
+    };
+  }
+  static resizeUpperHeight(e, i) {
+    const r = Math.max(0, (i - e.entry.price) / e.entry.price * 100);
+    return e.type === "longPosition" ? {
+      ...e,
+      takeProfitPercent: r
+    } : {
+      ...e,
+      stopLossPercent: r
+    };
+  }
+  static resizeLowerHeight(e, i) {
+    const r = Math.max(0, (e.entry.price - i) / e.entry.price * 100);
+    return e.type === "longPosition" ? {
+      ...e,
+      stopLossPercent: r
+    } : {
+      ...e,
+      takeProfitPercent: r
+    };
+  }
+  static drawLabels({ ctx: e, activeSymbol: i, shape: r, geometry: s, config: n }) {
+    e.save(), e.font = "11px sans-serif", e.textBaseline = "middle";
+    const a = r.type, o = Tt(i), l = r.entry.price * (r.takeProfitPercent / 100) / o, d = r.entry.price * (r.stopLossPercent / 100) / o, u = s.box.left + 6, g = l / d;
+    e.fillStyle = P(n.profitFillColor, 0.95);
+    const m = a === "longPosition" ? s.profitBox.top + s.profitBox.height / 10 : s.profitBox.bottom - s.profitBox.height / 10;
+    e.fillText(`${l.toFixed(2)} (${g.toFixed(2)})`, u, m), e.fillStyle = P(n.lossFillColor, 0.95);
+    const w = a === "shortPosition" ? s.lossBox.top + s.lossBox.height / 10 : s.lossBox.bottom - s.lossBox.height / 10;
+    e.fillText(d.toFixed(1), u, w);
+  }
+}, qt = class {
+  canvas;
+  ctx;
+  activeSymbol;
+  candles;
+  viewport = null;
+  shapes;
+  activeTool;
+  config;
+  selectedShapeId = null;
+  hoveredShapeId = null;
+  handleHitboxes = [];
+  draft = null;
+  dragState = null;
+  onShapeAdded;
+  onShapeModified;
+  onShapeSelected;
+  onToolChange;
+  constructor(t) {
+    this.canvas = t.canvas;
+    const e = this.canvas.getContext("2d");
+    if (!e) throw new Error("Failed to get 2d context for ShapesLayer");
+    this.ctx = e, this.activeSymbol = t.activeSymbol, this.candles = t.candles, this.shapes = t.shapes, this.activeTool = t.activeTool ?? null, this.config = this.mergeConfig(t.config), this.onShapeAdded = t.onShapeAdded, this.onShapeModified = t.onShapeModified, this.onShapeSelected = t.onShapeSelected, this.onToolChange = t.onToolChange;
+  }
+  setCandles(t) {
+    this.candles = t;
+  }
+  setViewport(t) {
+    this.viewport = t;
+  }
+  setShapes(t) {
+    this.shapes = t, this.selectedShapeId && !this.shapes.some((e) => e.id === this.selectedShapeId) && this.setSelectedShapeId(null), this.rebuildHandleHitboxes();
+  }
+  setConfig(t) {
+    this.config = this.mergeConfig(t);
+  }
+  setActiveTool(t) {
+    this.activeTool = t, t || (this.draft = null), this.canvas.style.cursor = "crosshair";
+  }
+  clearHoverState() {
+    this.hoveredShapeId = null, this.canvas.style.cursor = "crosshair";
+  }
+  render() {
+    if (this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), !this.viewport) return;
+    const t = this.getConverter();
+    for (const e of this.shapes) this.drawShape({
+      shape: e,
+      converter: t,
+      selected: e.id === this.selectedShapeId,
+      hovered: e.id === this.hoveredShapeId
+    });
+    this.drawDraft(t), this.rebuildHandleHitboxes();
+  }
+  handlePointerEvent(t) {
+    return !this.viewport || this.candles.length === 0 ? !1 : t.type === "contextmenu" ? this.handleContextMenu() : t.type === "pointerdown" || t.type === "mousedown" ? this.handlePointerDown(t) : t.type === "pointermove" || t.type === "mousemove" ? this.handlePointerMove(t) : t.type === "pointerup" || t.type === "mouseup" ? this.handlePointerUp() : !1;
+  }
+  handleKeyboardEvent(t) {
+    return t.key === "Escape" && this.draft?.type === "path" ? (this.completePathDraft(), !0) : t.key === "Escape" && this.draft ? (this.draft = null, this.setActiveToolAndEmit(null), !0) : t.key === "Escape" && this.selectedShapeId ? (this.setSelectedShapeId(null), !0) : !1;
+  }
+  handlePointerDown(t) {
+    const e = at(this.canvas, t), i = ot(e, this.getConverter());
+    if (this.activeTool)
+      return ht(t) && this.handleToolPointerDown({
+        point: e,
+        vertex: i
+      }), !0;
+    if (!ht(t)) return !1;
+    const r = this.findHandleAtPoint(e);
+    if (r) {
+      const n = this.shapes.find((a) => a.id === r.shapeId);
+      return n ? (this.setSelectedShapeId(n.id), this.dragState = {
+        edit: {
+          mode: "resize",
+          shape: n,
+          handleType: r.type,
+          handleIndex: r.index,
+          startPoint: e,
+          startVertex: i
+        },
+        lastModifiedShape: n
+      }, this.canvas.style.cursor = r.cursor ?? "grab", !0) : !1;
+    }
+    const s = this.findShapeAtPoint(e);
+    if (s) {
+      const n = this.findHandleAtPointForShape(s, e);
+      return n ? (this.setSelectedShapeId(s.id), this.dragState = {
+        edit: {
+          mode: "resize",
+          shape: s,
+          handleType: n.type,
+          handleIndex: n.index,
+          startPoint: e,
+          startVertex: i
+        },
+        lastModifiedShape: s
+      }, this.canvas.style.cursor = n.cursor ?? "grab", !0) : (this.setSelectedShapeId(s.id), this.hoveredShapeId = s.id, this.dragState = {
+        edit: {
+          mode: "move",
+          shape: s,
+          startPoint: e,
+          startVertex: i
+        },
+        lastModifiedShape: s
+      }, this.canvas.style.cursor = "move", !0);
+    }
+    return this.setSelectedShapeId(null), this.hoveredShapeId = null, this.canvas.style.cursor = "crosshair", !1;
+  }
+  handlePointerMove(t) {
+    const e = at(this.canvas, t), i = ot(e, this.getConverter());
+    if (this.draft)
+      return this.updateDraftPreview(i), !0;
+    if (this.dragState) {
+      const n = this.applyDrag(i);
+      return this.dragState.lastModifiedShape = n, this.emitShapeModified(n), !0;
+    }
+    if (this.activeTool)
+      return this.canvas.style.cursor = "crosshair", !0;
+    const r = this.findHandleAtPoint(e);
+    if (r)
+      return this.canvas.style.cursor = "pointer", this.hoveredShapeId = r.shapeId, !0;
+    const s = this.findShapeAtPoint(e);
+    return s ? (this.hoveredShapeId = s.id, this.canvas.style.cursor = "pointer", !0) : this.hoveredShapeId !== null ? (this.hoveredShapeId = null, this.canvas.style.cursor = "crosshair", !0) : !1;
+  }
+  handlePointerUp() {
+    if (!this.dragState) return !1;
+    const t = this.dragState.lastModifiedShape;
+    return this.dragState = null, this.setSelectedShapeId(t.id), this.emitShapeModified(t), !0;
+  }
+  handleContextMenu() {
+    return this.draft?.type === "path" ? (this.completePathDraft(), !0) : this.activeTool !== null;
+  }
+  handleToolPointerDown({ vertex: t }) {
+    if (this.activeTool) {
+      if (this.activeTool === "trendline") {
+        this.handleTwoPointDraft("trendline", t);
+        return;
+      }
+      if (this.activeTool === "rectangle") {
+        this.handleTwoPointDraft("rectangle", t);
+        return;
+      }
+      if (this.activeTool === "fibRetracement") {
+        this.handleTwoPointDraft("fibRetracement", t);
+        return;
+      }
+      if (this.activeTool === "path") {
+        this.handlePathDraft(t);
+        return;
+      }
+      (this.activeTool === "shortPosition" || this.activeTool === "longPosition") && this.addPositionShape(this.activeTool, t);
+    }
+  }
+  handleTwoPointDraft(t, e) {
+    if (!this.draft || this.draft.type !== t) {
+      this.draft = {
+        type: t,
+        id: U(),
+        vertices: [e, e]
+      };
+      return;
+    }
+    const i = {
+      id: this.draft.id,
+      type: t,
+      vertices: [this.draft.vertices[0], e]
+    };
+    this.draft = null, this.addShape(i), this.setActiveToolAndEmit(null);
+  }
+  handlePathDraft(t) {
+    if (!this.draft || this.draft.type !== "path") {
+      this.draft = {
+        type: "path",
+        id: U(),
+        vertices: [t],
+        previewVertex: null
+      };
+      return;
+    }
+    this.draft = {
+      ...this.draft,
+      vertices: [...this.draft.vertices, t],
+      previewVertex: null
+    };
+  }
+  completePathDraft() {
+    !this.draft || this.draft.type !== "path" || (this.draft.vertices.length >= 2 && this.addShape({
+      id: this.draft.id,
+      type: "path",
+      vertices: this.draft.vertices
+    }), this.draft = null, this.setActiveToolAndEmit(null));
+  }
+  addPositionShape(t, e) {
+    const i = this.getConverter(), r = t === "longPosition" ? this.config.longPosition : this.config.shortPosition, s = L.createFromVertex({
+      id: U(),
+      type: t,
+      entry: e,
+      converter: i,
+      config: r
+    });
+    this.addShape(s), this.setActiveToolAndEmit(null);
+  }
+  updateDraftPreview(t) {
+    if (this.draft) {
+      if (this.draft.type === "trendline" || this.draft.type === "rectangle" || this.draft.type === "fibRetracement") {
+        this.draft = {
+          ...this.draft,
+          vertices: [this.draft.vertices[0], t]
+        };
+        return;
+      }
+      this.draft.type === "path" && (this.draft = {
+        ...this.draft,
+        previewVertex: t
+      });
+    }
+  }
+  addShape(t) {
+    this.setSelectedShapeId(t.id), this.onShapeAdded?.({
+      type: t.type,
+      id: t.id,
+      shape: t
+    });
+  }
+  emitShapeModified(t) {
+    this.onShapeModified?.({
+      id: t.id,
+      type: t.type,
+      shape: t
+    });
+  }
+  applyDrag(t) {
+    if (!this.dragState) throw new Error("Cannot apply shape drag without active drag state");
+    const { edit: e } = this.dragState;
+    if (e.mode === "move") {
+      const i = {
+        time: t.time - e.startVertex.time,
+        price: t.price - e.startVertex.price
+      };
+      return this.moveShape(e.shape, i);
+    }
+    return this.resizeShape(e.shape, e.handleType, t, e.handleIndex);
+  }
+  moveShape(t, e) {
+    return t.type === "trendline" ? k.move(t, e) : t.type === "rectangle" ? R.move(t, e) : t.type === "path" ? M.move(t, e) : t.type === "fibRetracement" ? S.move(t, e) : L.move(t, e);
+  }
+  resizeShape(t, e, i, r) {
+    return t.type === "trendline" ? k.resize(t, e, i) : t.type === "rectangle" ? R.resize(t, e, i) : t.type === "fibRetracement" ? S.resize(t, e, i) : t.type === "path" ? M.resize(t, r ?? -1, i) : L.resize({
+      shape: t,
+      handleType: e,
+      vertex: i,
+      converter: this.getConverter()
+    });
+  }
+  drawShape({ shape: t, converter: e, selected: i, hovered: r }) {
+    if (t.type === "trendline") {
+      const n = this.getTrendlineConfig(t);
+      k.draw({
+        ctx: this.ctx,
+        shape: t,
+        converter: e,
+        config: n,
+        selected: i,
+        hovered: r
+      });
+      return;
+    }
+    if (t.type === "rectangle") {
+      const n = this.getRectangleConfig(t);
+      R.draw({
+        ctx: this.ctx,
+        shape: t,
+        converter: e,
+        config: n,
+        selected: i,
+        hovered: r
+      });
+      return;
+    }
+    if (t.type === "path") {
+      const n = this.getPathConfig(t);
+      M.draw({
+        ctx: this.ctx,
+        shape: t,
+        converter: e,
+        config: n,
+        selected: i,
+        hovered: r
+      });
+      return;
+    }
+    if (t.type === "fibRetracement") {
+      const n = this.getFibRetracementConfig(t);
+      S.draw({
+        ctx: this.ctx,
+        shape: t,
+        converter: e,
+        config: n,
+        selected: i,
+        hovered: r
+      });
+      return;
+    }
+    const s = this.getPositionConfig(t);
+    L.draw({
+      ctx: this.ctx,
+      activeSymbol: this.activeSymbol,
+      shape: t,
+      converter: e,
+      config: s,
+      selected: i,
+      hovered: r
+    });
+  }
+  drawDraft(t) {
+    if (this.draft) {
+      if (this.draft.type === "trendline") {
+        k.drawDraft({
+          ctx: this.ctx,
+          vertices: this.draft.vertices,
+          converter: t,
+          config: this.config.trendline
+        });
+        return;
+      }
+      if (this.draft.type === "rectangle") {
+        R.drawDraft({
+          ctx: this.ctx,
+          vertices: this.draft.vertices,
+          converter: t,
+          config: this.config.rectangle
+        });
+        return;
+      }
+      if (this.draft.type === "fibRetracement") {
+        S.drawDraft({
+          ctx: this.ctx,
+          vertices: this.draft.vertices,
+          converter: t,
+          config: this.config.fibRetracement
+        });
+        return;
+      }
+      this.draft.type === "path" && M.drawDraft({
+        ctx: this.ctx,
+        vertices: this.draft.vertices,
+        previewVertex: this.draft.previewVertex,
+        converter: t,
+        config: this.config.path
+      });
+    }
+  }
+  rebuildHandleHitboxes() {
+    if (!this.viewport) {
+      this.handleHitboxes = [];
+      return;
+    }
+    const t = this.getConverter(), e = [], i = this.shapes.find((s) => s.id === this.selectedShapeId), r = this.hoveredShapeId && this.hoveredShapeId !== this.selectedShapeId ? this.shapes.find((s) => s.id === this.hoveredShapeId) ?? null : null;
+    i && e.push(i), r && e.push(r), this.handleHitboxes = e.flatMap((s) => this.getShapeHandles(s, t));
+  }
+  getShapeHandles(t, e) {
+    return t.type === "trendline" ? k.getHandles(t, e, this.getTrendlineConfig(t)) : t.type === "rectangle" ? R.getHandles(t, e, this.getRectangleConfig(t)) : t.type === "path" ? M.getHandles(t, e, this.getPathConfig(t)) : t.type === "fibRetracement" ? S.getHandles(t, e, this.getFibRetracementConfig(t)) : L.getHandles(t, e, this.getPositionConfig(t));
+  }
+  findHandleAtPoint(t) {
+    for (let e = this.handleHitboxes.length - 1; e >= 0; e -= 1) {
+      const i = this.handleHitboxes[e];
+      if (J(t, i)) return i;
+    }
+    return null;
+  }
+  findHandleAtPointForShape(t, e) {
+    const i = this.getConverter(), r = this.getShapeHandles(t, i);
+    for (const s of r) if (J(e, s)) return s;
+    return null;
+  }
+  findShapeAtPoint(t) {
+    const e = this.getConverter();
+    for (let i = this.shapes.length - 1; i >= 0; i -= 1) {
+      const r = this.shapes[i];
+      if (this.isShapeHit(r, t, e)) return r;
+    }
+    return null;
+  }
+  isShapeHit(t, e, i) {
+    return t.type === "trendline" ? k.hitTest({
+      point: e,
+      shape: t,
+      converter: i
+    }) : t.type === "rectangle" ? R.hitTest({
+      point: e,
+      shape: t,
+      converter: i
+    }) : t.type === "path" ? M.hitTest({
+      point: e,
+      shape: t,
+      converter: i
+    }) : t.type === "fibRetracement" ? S.hitTest({
+      point: e,
+      shape: t,
+      converter: i,
+      config: this.getFibRetracementConfig(t)
+    }) : L.hitTest({
+      point: e,
+      shape: t,
+      converter: i,
+      config: this.getPositionConfig(t)
+    });
+  }
+  setSelectedShapeId(t) {
+    if (this.selectedShapeId === t) return;
+    if (this.selectedShapeId = t, !t) {
+      this.onShapeSelected?.(null);
+      return;
+    }
+    const e = this.shapes.find((i) => i.id === t);
+    if (!e) {
+      this.onShapeSelected?.(null);
+      return;
+    }
+    this.onShapeSelected?.(this.createShapeSelectedPayload(e));
+  }
+  createShapeSelectedPayload(t) {
+    return t.type === "trendline" ? {
+      shapeId: t.id,
+      type: t.type,
+      config: this.getTrendlineConfig(t)
+    } : t.type === "rectangle" ? {
+      shapeId: t.id,
+      type: t.type,
+      config: this.getRectangleConfig(t)
+    } : t.type === "path" ? {
+      shapeId: t.id,
+      type: t.type,
+      config: this.getPathConfig(t)
+    } : t.type === "fibRetracement" ? {
+      shapeId: t.id,
+      type: t.type,
+      config: this.getFibRetracementConfig(t)
+    } : {
+      shapeId: t.id,
+      type: t.type,
+      config: this.getPositionConfig(t)
+    };
+  }
+  getTrendlineConfig(t) {
+    return {
+      ...this.config.trendline,
+      ...t.config ?? {}
+    };
+  }
+  getRectangleConfig(t) {
+    return {
+      ...this.config.rectangle,
+      ...t.config ?? {}
+    };
+  }
+  getPathConfig(t) {
+    return {
+      ...this.config.path,
+      ...t.config ?? {}
+    };
+  }
+  getFibRetracementConfig(t) {
+    return {
+      ...this.config.fibRetracement,
+      ...t.config ?? {},
+      levels: t.config?.levels ?? this.config.fibRetracement.levels
+    };
+  }
+  getPositionConfig(t) {
+    return {
+      ...t.type === "longPosition" ? this.config.longPosition : this.config.shortPosition,
+      ...t.config ?? {}
+    };
+  }
+  setActiveToolAndEmit(t) {
+    this.setActiveTool(t), this.onToolChange?.(t);
+  }
+  getConverter() {
+    const t = this.viewport;
+    return {
+      candles: this.candles,
+      viewport: t,
+      getXForTime: (e) => this.getXForTime(e),
+      getYForPrice: (e) => this.getYForPrice(e),
+      getTimeForX: (e) => this.getTimeForX(e),
+      getPriceForY: (e) => this.getPriceForY(e),
+      getNearestCandleTimeForX: (e) => {
+        const i = this.getTimeForX(e);
+        if (this.candles.length > 0 && i > this.candles[this.candles.length - 1].time) return i;
+        const r = j(this.candles, i);
+        return r >= 0 ? this.candles[r].time : i;
+      },
+      getCandleWidth: () => t ? this.getCandleStepWidth(t) : 12
+    };
+  }
+  getXForTime(t) {
+    if (!this.viewport || this.candles.length === 0) return 0;
+    if (t > this.candles[this.candles.length - 1].time) {
+      const i = Pt(this.candles);
+      return (t - this.candles[0].time) / i * this.viewport.candleSpacing + this.viewport.offsetX + this.viewport.candleWidth / 2;
+    }
+    const e = j(this.candles, t);
+    return e < 0 ? 0 : e * this.viewport.candleSpacing + this.viewport.offsetX + this.viewport.candleWidth / 2;
+  }
+  getTimeForX(t) {
+    if (!this.viewport) return Date.now();
+    const e = Math.round((t - this.viewport.offsetX - this.viewport.candleWidth / 2) / this.viewport.candleSpacing);
+    return e >= 0 && e < this.candles.length ? this.candles[e].time : this.candles.length === 0 ? Date.now() : Kt(this.candles, this.candles[0].time, e);
+  }
+  getYForPrice(t) {
+    return this.viewport ? Y({
+      price: t,
+      minPrice: this.viewport.minPrice,
+      priceRange: this.viewport.priceRange,
+      chartHeight: this.canvas.height
+    }) : this.canvas.height / 2;
+  }
+  getPriceForY(t) {
+    return this.viewport ? ft({
+      y: t,
+      minPrice: this.viewport.minPrice,
+      priceRange: this.viewport.priceRange,
+      chartHeight: this.canvas.height
+    }) : 0;
+  }
+  getCandleStepWidth(t) {
+    return t.candleSpacing;
+  }
+  mergeConfig(t) {
+    return {
+      trendline: {
+        ...k.defaultConfig,
+        ...t?.trendline ?? {}
+      },
+      rectangle: {
+        ...R.defaultConfig,
+        ...t?.rectangle ?? {}
+      },
+      path: {
+        ...M.defaultConfig,
+        ...t?.path ?? {}
+      },
+      fibRetracement: {
+        ...S.defaultConfig,
+        ...t?.fibRetracement ?? {},
+        levels: t?.fibRetracement?.levels ?? S.defaultConfig.levels
+      },
+      shortPosition: {
+        ...L.defaultShortConfig,
+        ...t?.shortPosition ?? {}
+      },
+      longPosition: {
+        ...L.defaultLongConfig,
+        ...t?.longPosition ?? {}
+      }
+    };
+  }
+}, Qt = class {
+  #t;
+  #e;
+  isDragging;
+  trades = [];
+  pastTrades = [];
+  candles = [];
+  viewport = null;
+  liveCandle = null;
+  handleHitboxes = [];
+  temporaryProtectionDrag = null;
+  constructor(t) {
+    this.#t = t.canvas, this.isDragging = !1;
+    const e = this.#t.getContext("2d");
+    if (!e) throw new Error("Canvas 2D context not supported");
+    this.#e = e;
+  }
+  setTrades(t) {
+    this.trades = t;
+  }
+  setPastTrades(t) {
+    this.pastTrades = t;
+  }
+  setCandles(t) {
+    this.candles = t;
+  }
+  setViewport(t) {
+    this.viewport = t;
+  }
+  setLiveCandle(t) {
+    this.liveCandle = t;
+  }
+  setIsDragging(t) {
+    this.isDragging = t;
+  }
+  setTemporaryProtectionDrag(t) {
+    this.temporaryProtectionDrag = t;
+  }
+  clearTemporaryProtectionDrag() {
+    this.temporaryProtectionDrag = null;
+  }
+  renderLiveFeed() {
+    this.isDragging || this.render();
+  }
+  render() {
+    this.clearCanvas(), this.resetHitboxes(), this.drawPastTradeIndicators();
+    for (const t of this.trades) this.drawTrade({ trade: t });
+    this.drawTemporaryProtectionDrag();
+  }
+  createHitBox = ({ price: t, trade: e, type: i, x: r, y: s, width: n, height: a, viewport: o }) => {
+    const { showCloseSection: l, widthClose: d } = this.getHandleStyleConfig(i).handle, u = l ? d : 0, g = n - u, m = r + n - u;
+    return {
+      kind: "existingHandle",
+      price: p(t),
+      trade: e,
+      type: i,
+      x: r,
+      y: s,
+      width: n,
+      height: a,
+      viewport: o,
+      labelArea: {
+        x: r,
+        y: s,
+        width: g,
+        height: a
+      },
+      closeButtonArea: {
+        x: m,
+        y: s,
+        width: u,
+        height: a
+      }
+    };
+  };
+  createMissingProtectionHitBox = ({ price: t, trade: e, type: i, x: r, y: s, width: n, height: a, viewport: o }) => ({
+    kind: "missingProtectionHandle",
+    price: p(t),
+    trade: e,
+    type: i,
+    x: r,
+    y: s,
+    width: n,
+    height: a,
+    viewport: o,
+    labelArea: {
+      x: r,
+      y: s,
+      width: n,
+      height: a
+    },
+    closeButtonArea: {
+      x: r + n,
+      y: s,
+      width: 0,
+      height: a
+    }
+  });
+  drawTrade({ trade: t }) {
+    const e = this.getTradeHandleRenderState({
+      price: t.openPrice,
+      type: "startPrice",
+      trade: t
+    });
+    if (!e) return;
+    const i = this.getMissingProtectionRenderStates({
+      trade: t,
+      startPriceRenderState: e
+    });
+    this.drawTradeHandleFromRenderState({
+      renderState: e,
+      blockedRanges: this.getLineBlockedRangesFromMissingProtectionHandles(i)
+    }), t.sl && this.drawTradeHandle({
+      price: t.sl,
+      type: "stopLoss",
+      trade: t
+    }), t.tp && this.drawTradeHandle({
+      price: t.tp,
+      type: "takeProfit",
+      trade: t
+    });
+    for (const r of i)
+      this.addMissingProtectionHitbox(r), this.drawMissingProtectionHandleRect({
+        x: r.handleX,
+        y: r.handleY,
+        width: r.handleWidth,
+        config: r.config
+      }), this.drawMissingProtectionHandleLabel(r);
+  }
+  drawTradeHandle({ price: t, type: e, trade: i }) {
+    const r = this.getTradeHandleRenderState({
+      price: t,
+      type: e,
+      trade: i
+    });
+    return r ? (this.drawTradeHandleFromRenderState({ renderState: r }), r) : null;
+  }
+  drawTradeHandleFromRenderState({ renderState: t, blockedRanges: e = [] }) {
+    this.addHandleHitbox(t), this.drawHandleHorizontalLines({
+      ...t,
+      blockedRanges: e
+    }), this.drawHandleRect({
+      x: t.handleX,
+      y: t.handleY,
+      width: t.handleWidth,
+      config: t.handleConfig
+    }), this.drawHandleSections({
+      handleType: t.type,
+      handleX: t.handleX,
+      handleY: t.handleY,
+      handleWidth: t.handleWidth,
+      handleHeight: t.handleHeight,
+      handleConfig: t.handleConfig,
+      trade: t.trade,
+      y: t.y
+    });
+  }
+  drawHandleLine({ x1: t, x2: e, y: i, config: r }) {
+    if (e <= t) return;
+    const s = this.#e;
+    s.save(), s.globalAlpha = r.opacity, s.strokeStyle = r.color, s.lineWidth = r.width, s.setLineDash(this.getHandleLineDash(r)), s.beginPath(), s.moveTo(t, i), s.lineTo(e, i), s.stroke(), s.restore();
+  }
+  drawConnectorLine({ x1: t, y1: e, x2: i, y2: r, config: s }) {
+    const n = this.#e;
+    n.save(), n.globalAlpha = s.opacity, n.strokeStyle = s.color, n.lineWidth = s.width, n.setLineDash(this.getHandleLineDash(s)), n.beginPath(), n.moveTo(t, e), n.lineTo(i, r), n.stroke(), n.restore();
+  }
+  drawHandleRect({ x: t, y: e, width: i, config: r }) {
+    const s = this.#e;
+    this.clearRectArea({
+      x: t,
+      y: e,
+      width: i,
+      height: r.height,
+      padding: Math.max(1, r.borderWidth)
+    }), s.save(), s.globalAlpha = r.backgroundOpacity, s.fillStyle = r.backgroundColor, s.fillRect(t, e, i, r.height), s.globalAlpha = r.borderOpacity, s.strokeStyle = r.borderColor, s.lineWidth = r.borderWidth, s.strokeRect(t, e, i, r.height), s.restore();
+  }
+  drawHandleSections({ handleType: t, handleX: e, handleY: i, handleWidth: r, handleHeight: s, handleConfig: n, trade: a, y: o }) {
+    const l = this.#e, d = c.tradeHandles, u = this.getHandleSections({
+      handleType: t,
+      handleConfig: n,
+      trade: a
+    });
+    let g = e;
+    l.save(), l.font = d.font, l.textBaseline = "middle", l.globalAlpha = d.textOpacity;
+    for (const m of u)
+      m.visible && (this.drawHandleSectionLabel({
+        section: m,
+        currentX: g,
+        y: o
+      }), g += m.width, g < e + r && this.drawHandleSectionDivider({
+        x: g,
+        y1: i + 4,
+        y2: i + s - 4,
+        config: n
+      }));
+    l.restore();
+  }
+  getHandlePnLLabel({ handleType: t, trade: e }) {
+    if (t === "startPrice") return this.formatPnlLabel(e.pnl);
+    const i = t === "stopLoss" ? e.sl : e.tp;
+    if (!i) return "N/A";
+    const r = dt(e.type, e.openPrice, i, e.volume, e.symbol);
+    return this.formatPnlLabel(r);
+  }
+  getHandleWidth(t) {
+    let e = 0;
+    return t.showVolumeSection && (e += t.widthVolume), t.showPnlSection && (e += t.widthPNL), t.showCloseSection && (e += t.widthClose), e;
+  }
+  getHandleX({ handleWidth: t, config: e }) {
+    return this.getPositionedHandleX({
+      handleWidth: t,
+      position: e.position
+    });
+  }
+  getTemporaryProtectionHandleX({ handleWidth: t, config: e }) {
+    return this.getPositionedHandleX({
+      handleWidth: t,
+      position: e.position
+    });
+  }
+  getHandleStyleConfig(t) {
+    switch (t) {
+      case "startPrice":
+        return c.tradeHandles.startPriceHandle;
+      case "stopLoss":
+        return c.tradeHandles.slHandle;
+      case "takeProfit":
+        return c.tradeHandles.tpHandle;
+    }
+  }
+  getProtectionDirection({ trade: t, type: e }) {
+    const i = this.isBuyTrade(t), r = e === "takeProfit" ? 1 : -1;
+    return i ? r : -r;
+  }
+  constrainProtectionPrice({ price: t, trade: e, type: i }) {
+    return this.getProtectionDirection({
+      trade: e,
+      type: i
+    }) > 0 ? p(Math.max(t, e.openPrice)) : p(Math.min(t, e.openPrice));
+  }
+  clearCanvas() {
+    this.#e.clearRect(0, 0, this.#t.width, this.#t.height);
+  }
+  resetHitboxes() {
+    this.handleHitboxes = [];
+  }
+  drawPastTradeIndicators() {
+    if (!(!c.pastTradeIndicators.visible || !this.viewport || this.candles.length === 0))
+      for (const t of this.pastTrades) {
+        const e = this.getPastTradeIndicatorRenderState(t);
+        e && (this.drawPastTradeConnector(e), this.drawPastTradeArrows(e));
+      }
+  }
+  getPastTradeIndicatorRenderState(t) {
+    if (!this.viewport) return null;
+    const e = this.getTimeX(t.startTime), i = this.getTimeX(t.closeTime);
+    if (e === null || i === null) return null;
+    const r = this.getPriceY(t.openPrice, this.viewport), s = this.getPriceY(t.closePrice, this.viewport), n = c.pastTradeIndicators.arrow, a = n.width, o = n.height;
+    return {
+      trade: t,
+      start: {
+        x: e,
+        y: r,
+        time: t.startTime,
+        price: t.openPrice
+      },
+      close: {
+        x: i,
+        y: s,
+        time: t.closeTime,
+        price: t.closePrice
+      },
+      arrowWidth: a,
+      arrowHeight: o
+    };
+  }
+  drawPastTradeConnector({ start: t, close: e }) {
+    const i = c.pastTradeIndicators.connectorLine;
+    this.drawConnectorLine({
+      x1: t.x,
+      y1: t.y,
+      x2: e.x,
+      y2: e.y,
+      config: i
+    });
+  }
+  drawPastTradeArrows({ trade: t, start: e, close: i, arrowWidth: r, arrowHeight: s }) {
+    const n = c.pastTradeIndicators.arrow;
+    if (!n.visible) return;
+    const a = t.type === "buy" ? "sell" : "buy";
+    this.drawPastTradeArrow({
+      x: e.x,
+      y: e.y,
+      type: t.type,
+      width: r,
+      height: s,
+      config: n
+    }), this.drawPastTradeArrow({
+      x: i.x,
+      y: i.y,
+      type: a,
+      width: r,
+      height: s,
+      config: n
+    });
+  }
+  drawPastTradeArrow({ x: t, y: e, type: i, width: r, height: s, config: n }) {
+    if (r <= 0 || s <= 0) return;
+    const a = this.#e, o = i === "buy", l = o ? n.buyColor : n.sellColor, d = o ? n.buyBorderColor : n.sellBorderColor, u = o ? 1 : -1, g = t, m = e, w = t, C = e + u * s, x = s / 2, T = x / Math.SQRT2, H = x / Math.SQRT2, Lt = g - T, Ht = g + T, Z = m + u * H, q = Math.max(1, n.shaftWidthRatio), kt = q + n.borderWidth * 2, Q = () => {
+      a.beginPath(), a.moveTo(w, C), a.lineTo(g, m), a.moveTo(g, m), a.lineTo(Lt, Z), a.moveTo(g, m), a.lineTo(Ht, Z), a.stroke();
+    };
+    a.save(), a.globalAlpha = n.opacity, a.lineCap = "round", a.lineJoin = "round", a.strokeStyle = d, a.lineWidth = kt, Q(), a.strokeStyle = l, a.lineWidth = q, Q(), a.restore();
+  }
+  getTimeX(t) {
+    if (!this.viewport || this.candles.length === 0 || !Number.isFinite(t)) return null;
+    const e = this.normalizeTimestamp(t), i = this.candles[0], r = this.candles[this.candles.length - 1];
+    if (!i || !r) return null;
+    if (this.candles.length === 1) return this.getCandleCenterX(0);
+    if (e <= i.time) {
+      const d = this.getCandleTimeInterval(0), u = (i.time - e) / d;
+      return this.getCandleCenterX(0) - u * this.viewport.candleSpacing;
+    }
+    if (e >= r.time) {
+      const d = this.candles.length - 1, u = this.getCandleTimeInterval(d), g = (e - r.time) / u;
+      return this.getCandleCenterX(d) + g * this.viewport.candleSpacing;
+    }
+    const s = this.getFirstCandleIndexAtOrAfterTime(e), n = Math.max(0, s - 1), a = this.candles[n], o = this.candles[s];
+    if (!a || !o || o.time === a.time) return this.getCandleCenterX(n);
+    const l = (e - a.time) / (o.time - a.time);
+    return this.getCandleCenterX(n) + l * this.viewport.candleSpacing;
+  }
+  normalizeTimestamp(t) {
+    return t < 1e12 ? t * 1e3 : t;
+  }
+  getFirstCandleIndexAtOrAfterTime(t) {
+    let e = 0, i = this.candles.length - 1;
+    for (; e < i; ) {
+      const r = Math.floor((e + i) / 2);
+      this.candles[r].time < t ? e = r + 1 : i = r;
+    }
+    return e;
+  }
+  getCandleCenterX(t) {
+    return this.viewport ? t * this.viewport.candleSpacing + this.viewport.offsetX + this.viewport.candleWidth / 2 : 0;
+  }
+  getCandleTimeInterval(t) {
+    const e = this.candles[t], i = this.candles[t - 1], r = this.candles[t + 1];
+    return e && r && r.time > e.time ? r.time - e.time : e && i && e.time > i.time ? e.time - i.time : 60 * 1e3;
+  }
+  getTradeHandleRenderState({ price: t, type: e, trade: i }) {
+    if (!this.viewport) return null;
+    const r = this.viewport, s = this.getPriceY(t, r), n = this.getHandleStyleConfig(e), a = n.handle, o = n.handleLine, l = this.getHandleWidth(a), d = a.height;
+    return {
+      price: t,
+      type: e,
+      trade: i,
+      viewport: r,
+      y: s,
+      handleStyleConfig: n,
+      handleConfig: a,
+      lineConfig: o,
+      handleX: this.getHandleX({
+        handleWidth: l,
+        config: a
+      }),
+      handleY: s - d / 2,
+      handleWidth: l,
+      handleHeight: d
+    };
+  }
+  getPriceY(t, e) {
+    return Y({
+      price: t,
+      minPrice: e.minPrice,
+      priceRange: e.priceRange,
+      chartHeight: this.#t.height
+    });
+  }
+  addHandleHitbox(t) {
+    this.handleHitboxes.push(this.createHitBox({
+      price: t.price,
+      trade: t.trade,
+      type: t.type,
+      x: t.handleX,
+      y: t.handleY,
+      width: t.handleWidth,
+      height: t.handleHeight,
+      viewport: t.viewport
+    }));
+  }
+  addMissingProtectionHitbox(t) {
+    this.handleHitboxes.push(this.createMissingProtectionHitBox({
+      price: t.price,
+      trade: t.trade,
+      type: t.type,
+      x: t.handleX,
+      y: t.handleY,
+      width: t.handleWidth,
+      height: t.handleHeight,
+      viewport: t.viewport
+    }));
+  }
+  drawHandleHorizontalLines({ handleX: t, handleWidth: e, y: i, lineConfig: r, blockedRanges: s = [] }) {
+    this.drawHorizontalLineAroundBlockedRanges({
+      y: i,
+      config: r,
+      blockedRanges: [{
+        x1: t,
+        x2: t + e
+      }, ...s]
+    });
+  }
+  drawTemporaryProtectionHorizontalLines({ handleX: t, handleWidth: e, y: i, lineConfig: r }) {
+    this.drawHorizontalLineAroundBlockedRanges({
+      y: i,
+      config: r,
+      blockedRanges: [{
+        x1: t,
+        x2: t + e
+      }]
+    });
+  }
+  drawHorizontalLineAroundBlockedRanges({ y: t, config: e, blockedRanges: i }) {
+    const r = this.getMergedBlockedRanges(i);
+    let s = 0;
+    for (const n of r)
+      n.x1 > s && this.drawHandleLine({
+        x1: s,
+        x2: n.x1,
+        y: t,
+        config: e
+      }), s = Math.max(s, n.x2);
+    s < this.#t.width && this.drawHandleLine({
+      x1: s,
+      x2: this.#t.width,
+      y: t,
+      config: e
+    });
+  }
+  getMergedBlockedRanges(t) {
+    const e = t.map((r) => ({
+      x1: Math.max(0, Math.min(r.x1, this.#t.width)),
+      x2: Math.max(0, Math.min(r.x2, this.#t.width))
+    })).filter((r) => r.x2 > r.x1).sort((r, s) => r.x1 - s.x1), i = [];
+    for (const r of e) {
+      const s = i.at(-1);
+      if (!s || r.x1 > s.x2) {
+        i.push({ ...r });
+        continue;
+      }
+      s.x2 = Math.max(s.x2, r.x2);
+    }
+    return i;
+  }
+  getHandleLineDash(t) {
+    switch (t.style) {
+      case "dashed":
+        return t.dash ?? [4, 4];
+      case "dotted":
+        return t.dash ?? [2, 4];
+      default:
+        return [];
+    }
+  }
+  getHandleSections({ handleType: t, handleConfig: e, trade: i }) {
+    const r = this.getHandlePnLLabel({
+      handleType: t,
+      trade: i
+    });
+    return [
+      {
+        label: `${i.volume.toFixed(2)}L`,
+        width: e.widthVolume,
+        visible: e.showVolumeSection
+      },
+      {
+        label: r,
+        width: e.widthPNL,
+        visible: e.showPnlSection,
+        color: this.getHandlePnlTextColor({
+          handleType: t,
+          trade: i
+        })
+      },
+      {
+        label: "×",
+        width: e.widthClose,
+        visible: e.showCloseSection,
+        color: e.closeButtonColor
+      }
+    ];
+  }
+  drawHandleSectionLabel({ section: t, currentX: e, y: i }) {
+    const r = this.#e, s = c.tradeHandles, n = e + t.width / 2;
+    r.fillStyle = t.color ?? s.textColor, r.fillText(t.label, n - r.measureText(t.label).width / 2, i);
+  }
+  drawHandleSectionDivider({ x: t, y1: e, y2: i, config: r }) {
+    const s = this.#e;
+    s.strokeStyle = r.sectionDividerColor, s.lineWidth = 1, s.beginPath(), s.moveTo(t, e), s.lineTo(t, i), s.stroke();
+  }
+  getMissingProtectionRenderStates({ trade: t, startPriceRenderState: e }) {
+    if (!c.tradeHandles.missingProtectionHandles.visible) return [];
+    const i = this.getMissingProtectionHandleTypes(t);
+    return i.map((r) => this.getMissingProtectionHandleRenderState({
+      type: r,
+      trade: t,
+      startPriceRenderState: e,
+      visibleTypes: i
+    }));
+  }
+  getMissingProtectionHandleTypes(t) {
+    const e = [];
+    return t.sl || e.push("stopLoss"), t.tp || e.push("takeProfit"), e;
+  }
+  getMissingProtectionHandleRenderState({ type: t, trade: e, startPriceRenderState: i, visibleTypes: r }) {
+    const s = this.getMissingProtectionHandleConfig(t), n = s.width, a = s.height, o = this.getMissingProtectionHandleX({
+      type: t,
+      config: s,
+      startPriceRenderState: i,
+      visibleTypes: r
+    }), l = i.y - a / 2;
+    return {
+      price: e.openPrice,
+      type: t,
+      trade: e,
+      viewport: i.viewport,
+      y: i.y,
+      config: s,
+      handleX: o,
+      handleY: l,
+      handleWidth: n,
+      handleHeight: a
+    };
+  }
+  getMissingProtectionHandleX({ type: t, config: e, startPriceRenderState: i, visibleTypes: r }) {
+    const s = r.indexOf(t), n = e.gapFromStartPriceHandle + s * (e.width + e.gapBetweenHandles);
+    return e.placement === "left" ? i.handleX - n - e.width : i.handleX + i.handleWidth + n;
+  }
+  getLineBlockedRangesFromMissingProtectionHandles(t) {
+    return t.map((e) => ({
+      x1: e.handleX,
+      x2: e.handleX + e.handleWidth
+    }));
+  }
+  getMissingProtectionHandleConfig(t) {
+    const e = c.tradeHandles.missingProtectionHandles;
+    return t === "stopLoss" ? e.slHandle : e.tpHandle;
+  }
+  drawMissingProtectionHandleRect({ x: t, y: e, width: i, config: r }) {
+    const s = this.#e;
+    this.clearRectArea({
+      x: t,
+      y: e,
+      width: i,
+      height: r.height,
+      padding: Math.max(1, r.borderWidth)
+    }), s.save(), s.globalAlpha = r.backgroundOpacity, s.fillStyle = r.backgroundColor, s.fillRect(t, e, i, r.height), s.globalAlpha = r.borderOpacity, s.strokeStyle = r.borderColor, s.lineWidth = r.borderWidth, s.strokeRect(t, e, i, r.height), s.restore();
+  }
+  drawMissingProtectionHandleLabel({ type: t, handleX: e, y: i, handleWidth: r, config: s }) {
+    const n = this.#e, a = t === "stopLoss" ? "SL" : "TP", o = e + r / 2;
+    n.save(), n.font = s.font, n.textBaseline = "middle", n.globalAlpha = s.textOpacity, n.fillStyle = s.textColor, n.fillText(a, o - n.measureText(a).width / 2, i), n.restore();
+  }
+  drawTemporaryProtectionDrag() {
+    const t = this.getTemporaryProtectionRenderState();
+    t && (this.drawTemporaryProtectionHorizontalLines(t), this.drawTemporaryProtectionHandleRect({
+      x: t.handleX,
+      y: t.handleY,
+      width: t.handleWidth,
+      config: t.handleConfig
+    }), this.drawTemporaryProtectionPnLLabel(t));
+  }
+  getTemporaryProtectionRenderState() {
+    if (!this.temporaryProtectionDrag) return null;
+    const { trade: t, type: e, viewport: i } = this.temporaryProtectionDrag, r = p(this.temporaryProtectionDrag.price), s = this.getPriceY(r, i), n = this.getTemporaryProtectionHandleConfig(e), a = this.getTemporaryProtectionLineConfig(e), o = n.widthPNL, l = n.height;
+    return {
+      price: r,
+      type: e,
+      trade: t,
+      viewport: i,
+      y: s,
+      handleConfig: n,
+      lineConfig: a,
+      handleX: this.getTemporaryProtectionHandleX({
+        handleWidth: o,
+        config: n
+      }),
+      handleY: s - l / 2,
+      handleWidth: o,
+      handleHeight: l
+    };
+  }
+  getTemporaryProtectionHandleConfig(t) {
+    const e = c.tradeHandles.missingProtectionHandles;
+    return t === "stopLoss" ? e.temporarySlHandle : e.temporaryTpHandle;
+  }
+  getTemporaryProtectionLineConfig(t) {
+    const e = c.tradeHandles.missingProtectionHandles;
+    return t === "stopLoss" ? e.temporarySlLine : e.temporaryTpLine;
+  }
+  drawTemporaryProtectionHandleRect({ x: t, y: e, width: i, config: r }) {
+    const s = this.#e;
+    this.clearRectArea({
+      x: t,
+      y: e,
+      width: i,
+      height: r.height,
+      padding: Math.max(1, r.borderWidth)
+    }), s.save(), s.globalAlpha = r.backgroundOpacity, s.fillStyle = r.backgroundColor, s.fillRect(t, e, i, r.height), s.globalAlpha = r.borderOpacity, s.strokeStyle = r.borderColor, s.lineWidth = r.borderWidth, s.strokeRect(t, e, i, r.height), s.restore();
+  }
+  drawTemporaryProtectionPnLLabel({ trade: t, type: e, price: i, handleX: r, y: s, handleWidth: n, handleConfig: a }) {
+    const o = this.#e, l = dt(t.type, t.openPrice, i, t.volume, t.symbol), d = this.formatPnlLabel(l), u = r + n / 2;
+    o.save(), o.font = a.font, o.textBaseline = "middle", o.globalAlpha = a.textOpacity, o.fillStyle = this.getProtectionPnlTextColor(e), o.fillText(d, u - o.measureText(d).width / 2, s), o.restore();
+  }
+  clearRectArea({ x: t, y: e, width: i, height: r, padding: s = 0 }) {
+    this.#e.clearRect(t - s, e - s, i + s * 2, r + s * 2);
+  }
+  getPositionedHandleX({ handleWidth: t, position: e }) {
+    const i = this.#t.width;
+    switch (e.placement) {
+      case "left":
+        return e.margin ?? 0;
+      case "center":
+        return i / 2 - t / 2;
+      case "right":
+        return i - t - (e.margin ?? 0);
+    }
+  }
+  getHandlePnlTextColor({ handleType: t, trade: e }) {
+    return t === "stopLoss" ? this.getProtectionPnlTextColor("stopLoss") : t === "takeProfit" ? this.getProtectionPnlTextColor("takeProfit") : e.pnl >= 0 ? c.tradeHandles.pnlTextColors.positive : c.tradeHandles.pnlTextColors.negative;
+  }
+  getProtectionPnlTextColor(t) {
+    return t === "takeProfit" ? c.tradeHandles.pnlTextColors.positive : c.tradeHandles.pnlTextColors.negative;
+  }
+  isBuyTrade(t) {
+    return String(t.type).toLowerCase().includes("buy");
+  }
+  formatPnlLabel(t) {
+    return `${t >= 0 ? "+" : ""}${t.toFixed(2)}`;
+  }
+}, te = [
+  "pointerdown",
+  "pointermove",
+  "pointerup"
+], ee = class {
+  #t;
+  #e;
+  #r;
+  #s;
+  #c;
+  #i;
+  #l;
+  #u;
+  #n;
+  #o = null;
+  #a = null;
+  #d = !1;
+  #h = 0;
+  #f = 0;
+  constructor(t) {
+    this.#t = t.canvas, this.#e = t.getHandleHitboxes, this.#r = t.getCurrentPrice, this.#s = t.onDrag, this.#c = t.onMissingProtectionDrag, this.#i = t.onMissingProtectionDragEnd, this.#l = t.onMissingProtectionDragCancel, this.#u = t.onTradeModified, this.#n = t.onTradeCloseClicked;
+  }
+  cancelActiveInteraction() {
+    this.#a && this.#l?.(), this.#o = null, this.#a = null, this.#d = !1, this.#h = 0, this.#f = 0;
+  }
+  handlePointerEvent(t) {
+    if (!this.isSupportedEventType(t.type)) return !1;
+    const e = this.getCanvasMousePoint(t);
+    if (t.type === "pointermove" && this.#a) return this.handleActiveMissingProtectionDrag(t, e);
+    if (t.type === "pointermove" && this.#o) return this.handleActiveDrag(t, e);
+    if (t.type === "pointerup")
+      return this.#a ? this.handleMissingProtectionDragEnd() : this.handleDragEnd();
+    const i = this.getHoveredHitbox(e);
+    return i ? this.handleHoveredHitbox(t, i, e) : (this.resetCursorIfIdle(), !1);
+  }
+  isSupportedEventType(t) {
+    return te.includes(t);
+  }
+  getCanvasMousePoint(t) {
+    const e = this.#t.getBoundingClientRect(), i = this.#t.width / e.width, r = this.#t.height / e.height;
+    return {
+      x: (t.clientX - e.left) * i,
+      y: (t.clientY - e.top) * r
+    };
+  }
+  handleActiveDrag(t, e) {
+    if (!this.#o) return !1;
+    const i = this.getNextDragPrice(e.y);
+    return this.#o.price = i, this.#s?.({
+      trade: this.#o.trade,
+      type: this.#o.type,
+      price: i
+    }), this.consumeEvent(t), !0;
+  }
+  handleActiveMissingProtectionDrag(t, e) {
+    if (!this.#a || !this.isProtectionHandleType(this.#a.type)) return !1;
+    const i = e.y - this.#h, r = c.tradeHandles.missingProtectionHandles.dragActivationThresholdPx;
+    if (!this.#d && Math.abs(i) < r)
+      return this.consumeEvent(t), !0;
+    this.#d = !0;
+    const s = this.getNextMissingProtectionPrice(e.y);
+    return this.#a.price = s, this.#c?.({
+      trade: this.#a.trade,
+      type: this.#a.type,
+      price: s
+    }), this.consumeEvent(t), !0;
+  }
+  getNextDragPrice(t) {
+    if (!this.#o) return 0;
+    const e = t - this.#h, i = this.#o.viewport.priceRange / this.#t.height, r = p(this.#f - e * i);
+    return this.isProtectionHandleType(this.#o.type) ? this.constrainExistingProtectionPrice({
+      price: r,
+      hitbox: this.#o,
+      type: this.#o.type
+    }) : r;
+  }
+  getNextMissingProtectionPrice(t) {
+    if (!this.#a || !this.isProtectionHandleType(this.#a.type)) return 0;
+    const e = p(this.#a.viewport.minPrice + (this.#t.height - t) / this.#t.height * this.#a.viewport.priceRange);
+    return this.constrainProtectionPrice({
+      price: e,
+      hitbox: this.#a,
+      type: this.#a.type
+    });
+  }
+  handleDragEnd() {
+    return this.#o && this.modifyActiveDragTrade(), this.#o = null, !1;
+  }
+  handleMissingProtectionDragEnd() {
+    return this.#a && this.#d && this.isProtectionHandleType(this.#a.type) ? this.#i?.({
+      trade: this.#a.trade,
+      type: this.#a.type,
+      price: p(this.#a.price)
+    }) : this.#l?.(), this.#a = null, this.#d = !1, !1;
+  }
+  modifyActiveDragTrade() {
+    if (!this.#o) return;
+    const t = p(this.#o.price);
+    if (this.#o.type === "stopLoss") {
+      this.#u?.({
+        ticket: this.#o.trade.ticket,
+        sl: t
+      });
+      return;
+    }
+    this.#u?.({
+      ticket: this.#o.trade.ticket,
+      tp: t
+    });
+  }
+  getHoveredHitbox(t) {
+    return this.#e().find((e) => this.isPointInsideArea(t, e)) ?? null;
+  }
+  handleHoveredHitbox(t, e, i) {
+    if (e.kind === "missingProtectionHandle") return this.handleMissingProtectionHandleHover(t, e, i);
+    const r = this.isPointInsideArea(i, e.closeButtonArea), s = this.isPointInsideArea(i, e.labelArea);
+    return r ? this.handleCloseButtonHover(t, e) : (this.updateHandleCursor(e), s && t.type === "pointerdown" && e.type !== "startPrice" && this.startDrag(e, i.y), e.type !== "startPrice" ? (this.consumeEvent(t), !0) : !1);
+  }
+  handleMissingProtectionHandleHover(t, e, i) {
+    return document.body.style.cursor = "ns-resize", t.type === "pointerdown" ? (this.startMissingProtectionDrag(e, i.y), this.consumeEvent(t), !0) : (this.consumeEvent(t), !0);
+  }
+  handleCloseButtonHover(t, e) {
+    return document.body.style.cursor = "pointer", t.type !== "pointerdown" ? e.type !== "startPrice" : (this.handleCloseButtonClick(e), this.consumeEvent(t), !0);
+  }
+  handleCloseButtonClick(t) {
+    if (t.type === "startPrice") {
+      this.#n?.({ ticket: t.trade.ticket });
+      return;
+    }
+    this.#u?.({
+      ticket: t.trade.ticket,
+      ...t.type === "stopLoss" ? { sl: null } : {},
+      ...t.type === "takeProfit" ? { tp: null } : {}
+    });
+  }
+  updateHandleCursor(t) {
+    document.body.style.cursor = t.type === "startPrice" ? "crosshair" : "ns-resize";
+  }
+  startDrag(t, e) {
+    this.#o = t, this.#h = e, this.#f = t.price;
+  }
+  startMissingProtectionDrag(t, e) {
+    this.#a = t, this.#h = e, this.#d = !1;
+  }
+  resetCursorIfIdle() {
+    !this.#o && !this.#a && (document.body.style.cursor = "crosshair");
+  }
+  isPointInsideArea(t, e) {
+    const i = t.x >= e.x && t.x <= e.x + e.width, r = t.y >= e.y && t.y <= e.y + e.height;
+    return i && r;
+  }
+  isProtectionHandleType(t) {
+    return t === "stopLoss" || t === "takeProfit";
+  }
+  constrainExistingProtectionPrice({ price: t, hitbox: e, type: i }) {
+    const r = this.isBuyTrade(e), s = e.trade.openPrice, n = this.#r?.() ?? 0;
+    return p(i === "takeProfit" ? r ? Math.max(t, s, n) : Math.min(t, s, n) : r ? Math.min(t, n) : Math.max(t, n));
+  }
+  constrainProtectionPrice({ price: t, hitbox: e, type: i }) {
+    const r = this.isBuyTrade(e), s = e.trade.openPrice, n = this.#r?.() ?? 0;
+    return p(i === "takeProfit" ? r ? Math.max(t, s, n) : Math.min(t, s, n) : r ? Math.min(t, n) : Math.max(t, n));
+  }
+  isBuyTrade(t) {
+    return String(t.trade.type).toLowerCase().includes("buy");
+  }
+  consumeEvent(t) {
+    t.stopPropagation(), t.preventDefault();
+  }
+}, ie = class {
+  #t;
+  #e;
+  candles;
+  viewport = null;
+  bullishColor;
+  bearishColor;
+  opacity;
+  height;
+  bottomOffset;
+  minBarHeight;
+  constructor(t) {
+    this.#t = t.canvas;
+    const e = this.#t.getContext("2d");
+    if (!e) throw new Error("Canvas 2D context not supported");
+    this.#e = e, this.candles = t.candles, this.bullishColor = t.bullishColor ?? c.volume.bullishColor, this.bearishColor = t.bearishColor ?? c.volume.bearishColor, this.opacity = this.clampOpacity(t.opacity ?? c.volume.opacity), this.height = Math.max(0, t.height ?? c.volume.height), this.bottomOffset = Math.max(0, t.bottomOffset ?? c.volume.bottomOffset), this.minBarHeight = Math.max(0, t.minBarHeight ?? c.volume.minBarHeight);
+  }
+  setCandles(t) {
+    this.candles = t;
+  }
+  setLiveCandle(t) {
+  }
+  setViewport(t) {
+    this.viewport = t;
+  }
+  render() {
+    if (this.clearCanvas(), !c.volume.visible || !this.viewport || this.candles.length === 0) return;
+    const t = this.#e, e = this.#t.width, i = this.#t.height, { startIndex: r, endIndex: s } = this.getVisibleRange(e);
+    if (s < r) return;
+    const n = this.candles.slice(r, s + 1), a = this.getMaxVolume(n);
+    a <= 0 || this.drawVolumeBars({
+      ctx: t,
+      candles: n,
+      startIndex: r,
+      maxVolume: a,
+      chartHeight: i
+    });
+  }
+  drawVolumeBars({ ctx: t, candles: e, startIndex: i, maxVolume: r, chartHeight: s }) {
+    t.save(), t.globalAlpha = this.opacity, e.forEach((n, a) => {
+      const o = i + a, l = this.getCandleX(o);
+      this.drawSingleVolumeBar({
+        ctx: t,
+        candle: n,
+        candleX: l,
+        maxVolume: r,
+        chartHeight: s
+      });
+    }), t.restore();
+  }
+  drawSingleVolumeBar({ ctx: t, candle: e, candleX: i, maxVolume: r, chartHeight: s }) {
+    if (!this.viewport || e.volume <= 0) return;
+    const n = this.getVolumeAreaHeight(s);
+    if (n <= 0) return;
+    const a = n * (e.volume / r), o = Math.min(n, Math.max(a, this.minBarHeight)), l = s - this.bottomOffset - o, d = Math.max(1, this.viewport.candleWidth);
+    t.fillStyle = this.getVolumeBarColor(e), t.fillRect(i, l, d, o);
+  }
+  getVisibleRange(t) {
+    if (!this.viewport) return {
+      startIndex: 0,
+      endIndex: -1
+    };
+    const { offsetX: e, candleSpacing: i } = this.viewport;
+    return {
+      startIndex: Math.max(0, Math.floor(-e / i)),
+      endIndex: Math.min(this.candles.length - 1, Math.ceil((t - e) / i))
+    };
+  }
+  getCandleX(t) {
+    return this.viewport ? t * this.viewport.candleSpacing + this.viewport.offsetX : 0;
+  }
+  getMaxVolume(t) {
+    return t.reduce((e, i) => Math.max(e, i.volume), 0);
+  }
+  getVolumeAreaHeight(t) {
+    return Math.max(0, Math.min(this.height, t - this.bottomOffset));
+  }
+  getVolumeBarColor(t) {
+    return t.close >= t.open ? this.bullishColor : this.bearishColor;
+  }
+  clampOpacity(t) {
+    return Math.max(0, Math.min(t, 1));
+  }
+  clearCanvas() {
+    this.#e.clearRect(0, 0, this.#t.width, this.#t.height);
+  }
+}, W = (t) => {
+  const e = document.createElement("canvas");
+  return e.className = t, e;
+}, re = (t, e) => {
+  const i = document.createElement("div");
+  i.className = "trading-reload-chart", i.style.backgroundColor = e, i.tabIndex = 0;
+  const r = document.createElement("div");
+  r.className = "trading-reload-chart__layout";
+  const s = document.createElement("div");
+  s.className = "trading-reload-chart__stack";
+  const n = W("trading-reload-chart__volume"), a = W("trading-reload-chart__plot"), o = W("trading-reload-chart__shapes"), l = W("trading-reload-chart__trades"), d = W("trading-reload-chart__overlay"), u = W("trading-reload-chart__axis-x");
+  s.append(n, a, o, l, d, u);
+  const g = W("trading-reload-chart__axis-y");
+  return r.append(s, g), i.append(r), t.append(i), {
+    root: i,
+    layout: r,
+    stack: s,
+    volumeCanvas: n,
+    candleCanvas: a,
+    shapesCanvas: o,
+    tradesCanvas: l,
+    overlayCanvas: d,
+    axisXCanvas: u,
+    axisYCanvas: g,
+    interactionTarget: r
+  };
+}, ct = (t) => typeof t == "object" && t !== null && !Array.isArray(t), St = (t, e) => {
+  const i = { ...t };
+  for (const r of Object.keys(e)) {
+    const s = e[r], n = t[r];
+    if (s !== void 0) {
+      if (ct(s) && ct(n)) {
+        i[r] = St(n, s);
+        continue;
+      }
+      i[r] = s;
+    }
+  }
+  return i;
+}, ut = (t) => St(c, t ?? {}), gt = (t, e) => e === void 0 || t.time >= 1e12 ? t : {
+  ...t,
+  time: t.time * 1e3 - e
+}, se = class {
+  #t;
+  #e;
+  #r;
+  #s = null;
+  #c = null;
+  #i = null;
+  #l = null;
+  #u = null;
+  #n = null;
+  #o = null;
+  #a = null;
+  #d = null;
+  #h = null;
+  #f = !1;
+  #v = 0;
+  #y = !1;
+  #x = 0;
+  #T = 0;
+  #p = null;
+  #P = null;
+  #w = null;
+  constructor(t, e) {
+    this.#t = t, this.#e = e, this.#r = ut(e.config), this.#s = re(t, this.#r.colors.background), this.#h = new Et({
+      canvas: this.#s.overlayCanvas,
+      crosshairColor: this.#r.crosshair.color,
+      crosshairThickness: this.#r.crosshair.thickness,
+      crosshairStyle: this.#r.crosshair.style
+    }), this.#R(), this.#W(), this.#H(), this.updateProps(e);
+  }
+  updateProps(t) {
+    const e = this.#e.activeShapeTool;
+    this.#e = t, this.#r = ut(t.config), this.#s && (this.#s.root.style.backgroundColor = this.#r.colors.background, this.#s.layout.style.setProperty("--axis-x-height", `${this.#r.axis.axisX.height}px`)), !this.#f && t.candles.length > 0 && this.#M(t.candles), this.#i && (t.activeShapeTool !== e && this.#B(t.activeShapeTool), this.#l?.setConfig(this.#r.shapes), this.#l?.setShapes(t.shapes), this.#l?.setActiveTool(t.activeShapeTool), this.#u?.setConfig(this.#r.shapes.previousDayHighLow ?? null), this.#u?.setPreviousDay(t.previousDay), this.#n?.setPastTrades(t.pastTrades ?? []), this.#b(), this.#A(), this.#g());
+  }
+  resetChartView() {
+    this.#i?.resetView(), this.#g();
+  }
+  destroy() {
+    this.#w?.abort(), this.#w = null, this.#P?.disconnect(), this.#P = null, this.#s?.root.remove(), this.#s = null, this.#c = null, this.#i = null, this.#l = null, this.#u = null, this.#n = null, this.#o = null, this.#a = null, this.#d = null, this.#h = null, this.#f = !1;
+  }
+  #M(t) {
+    if (!this.#s || this.#f) return;
+    const e = t.map((r) => gt(r, this.#e.brokerTimezoneOffsetMs));
+    this.#c = new ie({
+      canvas: this.#s.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
+    }), this.#i = new Nt({
+      canvas: this.#s.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 qt({
+      canvas: this.#s.shapesCanvas,
+      activeSymbol: this.#e.activeSymbol,
+      candles: e,
+      shapes: this.#e.shapes,
+      activeTool: this.#e.activeShapeTool,
+      config: this.#r.shapes,
+      onShapeAdded: (r) => {
+        this.#e.onShapeAdded?.(r);
+      },
+      onShapeModified: (r) => {
+        this.#e.onShapeModified?.(r);
+      },
+      onShapeSelected: (r) => {
+        this.#e.onShapeSelected?.(r);
+      },
+      onToolChange: (r) => {
+        this.#e.onActiveShapeToolChange?.(r);
+      }
+    });
+    const i = this.#s.shapesCanvas.getContext("2d");
+    i && (this.#u = new Gt({
+      ctx: i,
+      config: this.#r.shapes.previousDayHighLow ?? null
+    }), this.#u.setPreviousDay(this.#e.previousDay)), this.#n = new Qt({ canvas: this.#s.tradesCanvas }), this.#n.setCandles(e), this.#n.setPastTrades(this.#e.pastTrades ?? []), this.#b(), this.#a = new Yt({
+      canvas: this.#s.axisXCanvas,
+      candles: e
+    }), this.#d = new Vt({ canvas: this.#s.axisYCanvas }), this.#o = new ee({
+      canvas: this.#s.tradesCanvas,
+      getHandleHitboxes: () => this.#m() ? [] : this.#n?.handleHitboxes ?? [],
+      getCurrentPrice: () => this.#i?.liveCandle?.close ?? 0,
+      onDrag: (r) => this.#I(r),
+      onMissingProtectionDrag: (r) => this.#F(r),
+      onMissingProtectionDragEnd: (r) => this.#Y(r),
+      onMissingProtectionDragCancel: () => this.#O(),
+      onTradeModified: (r) => this.#k(r),
+      onTradeCloseClicked: (r) => this.#e.onTradeClose?.(r)
+    }), this.#f = !0, this.#g();
+  }
+  #R() {
+    if (!this.#s) return;
+    this.#w = new AbortController();
+    const { signal: t } = this.#w, e = this.#s.interactionTarget;
+    e.addEventListener("pointerdown", (i) => this.#N(i), { signal: t }), e.addEventListener("pointerup", (i) => this.#U(i), { signal: t }), e.addEventListener("pointermove", (i) => this.#G(i), { signal: t }), e.addEventListener("pointerenter", (i) => this.#_(i), { signal: t }), e.addEventListener("pointerleave", () => this.#$(), { signal: t }), e.addEventListener("contextmenu", (i) => this.#J(i), { signal: t }), e.addEventListener("wheel", (i) => this.#E(i), {
+      passive: !1,
+      signal: t
+    }), this.#s.axisYCanvas.addEventListener("wheel", (i) => this.#z(i), {
+      passive: !1,
+      signal: t
+    }), document.addEventListener("keydown", (i) => this.#j(i), { signal: t });
+  }
+  #W() {
+    this.#P = new ResizeObserver(() => {
+      this.#H(), this.#g();
+    }), this.#P.observe(this.#t);
+  }
+  #D() {
+    const t = this.#r.axis.axisY.width, e = this.#r.axis.axisX.height, i = this.#t.clientWidth, r = this.#t.clientHeight;
+    return {
+      axisYWidth: t,
+      axisXHeight: e,
+      plotWidth: Math.max(0, i - t),
+      plotHeight: Math.max(0, r - e)
+    };
+  }
+  #C(t, e, i) {
+    t.width = e, t.height = i;
+  }
+  #H() {
+    if (!this.#s) return;
+    const { plotWidth: t, plotHeight: e, axisYWidth: i, axisXHeight: r } = this.#D();
+    if (this.#i && this.#v > 0 && t !== this.#v) {
+      const s = t - this.#v;
+      this.#i.panHorizontally(s);
+    }
+    this.#v = t, this.#C(this.#s.volumeCanvas, t, e), this.#C(this.#s.candleCanvas, t, e), this.#C(this.#s.shapesCanvas, t, e), this.#C(this.#s.overlayCanvas, t, e), this.#C(this.#s.tradesCanvas, t, e), this.#C(this.#s.axisXCanvas, t, r), this.#C(this.#s.axisYCanvas, i, e);
+  }
+  #S() {
+    this.#i && (this.#a?.setCandles(this.#i.candles), this.#a?.setViewport(this.#i.viewport), this.#a?.render(), this.#d?.setViewport(this.#i.viewport), this.#d?.render());
+  }
+  #g() {
+    this.#i && (this.#c?.setCandles(this.#i.candles), this.#c?.setLiveCandle(this.#i.liveCandle), this.#c?.setViewport(this.#i.viewport), this.#c?.render(), this.#i.render(), this.#l?.setCandles(this.#i.candles), this.#l?.setViewport(this.#i.viewport), this.#l?.render(), this.#u?.setViewport(this.#i.viewport), this.#u?.render(), this.#n?.setCandles(this.#i.candles), this.#n?.setViewport(this.#i.viewport), this.#n?.isDragging ? this.#n.renderLiveFeed() : this.#n?.render(), this.#S(), this.#h?.render());
+  }
+  #m() {
+    return this.#e.activeShapeTool !== null;
+  }
+  #B(t) {
+    t !== null && (this.#y = !1, this.#n?.setIsDragging(!1), this.#o?.cancelActiveInteraction()), this.#l?.setActiveTool(t);
+  }
+  #X() {
+    const t = this.#e.openTrades ?? [];
+    return this.#p ? t.map((e) => e.ticket !== this.#p?.ticket ? e : {
+      ...e,
+      ...this.#p.sl !== void 0 ? { sl: this.#p.sl } : {},
+      ...this.#p.tp !== void 0 ? { tp: this.#p.tp } : {}
+    }) : t;
+  }
+  #b() {
+    this.#n?.setTrades(this.#X());
+  }
+  #A() {
+    const t = this.#e.liveCandle;
+    if (!t || !this.#i) return;
+    const e = gt(t, this.#e.brokerTimezoneOffsetMs);
+    this.#i.updateLiveCandle(e), this.#n?.setLiveCandle(this.#i.liveCandle), this.#n?.setCandles(this.#i.candles);
+  }
+  #I({ trade: t, type: e, price: i }) {
+    this.#n && (this.#n.setIsDragging(!0), this.#p = {
+      ticket: t.ticket,
+      ...e === "stopLoss" ? { sl: i } : {},
+      ...e === "takeProfit" ? { tp: i } : {}
+    }, this.#b(), this.#n.render());
+  }
+  #F({ trade: t, type: e, price: i }) {
+    this.#n?.viewport && (this.#n.setIsDragging(!0), this.#n.setTemporaryProtectionDrag({
+      visible: !0,
+      trade: t,
+      type: e,
+      price: i,
+      viewport: this.#n.viewport
+    }), this.#n.render());
+  }
+  #Y({ trade: t, type: e, price: i }) {
+    this.#n?.setIsDragging(!1), this.#k({
+      ticket: t.ticket,
+      ...e === "stopLoss" ? { sl: i } : {},
+      ...e === "takeProfit" ? { tp: i } : {}
+    });
+  }
+  #O() {
+    this.#n?.setIsDragging(!1), this.#n?.clearTemporaryProtectionDrag(), this.#n?.render();
+  }
+  #k(t) {
+    this.#n?.setIsDragging(!1), this.#p = null, this.#n?.clearTemporaryProtectionDrag(), this.#e.onTradeModify?.(t), this.#b(), this.#n?.render();
+  }
+  #L(t) {
+    if (!this.#h || !this.#s) return;
+    if (!this.#i) {
+      this.#h.updateMousePosition(t.clientX, t.clientY), this.#h.render();
+      return;
+    }
+    const e = mt(this.#s.overlayCanvas, t), i = this.#i.getNearestCandleIndexByX(e.x), r = i === null ? null : this.#i.candles[i] ?? null, s = i === null ? e.x : this.#i.getRawCandleSnapX(e.x);
+    this.#h.updateMousePosition(t.clientX, t.clientY, { snapX: s });
+    const n = this.#i.getPriceAtY(this.#h.mouseY);
+    this.#d?.setCrosshair({
+      visible: !0,
+      y: this.#h.mouseY,
+      price: n
+    }), this.#a?.setCrosshair({
+      visible: !0,
+      x: this.#h.mouseX,
+      candle: r
+    }), this.#S(), this.#h.render();
+  }
+  #V() {
+    this.#h?.hide(), this.#a?.hideCrosshair(), this.#d?.hideCrosshair(), this.#S(), this.#h?.render();
+  }
+  #E(t) {
+    if (!this.#i || !this.#n) return;
+    this.#m() || this.#o?.handlePointerEvent(t), t.preventDefault();
+    const e = t.deltaY < 0 ? 1 : -1;
+    t.ctrlKey || t.metaKey ? this.#i.zoomVertically(e) : this.#i.zoomHorizontally(e), this.#g();
+  }
+  #z(t) {
+    if (!this.#i) return;
+    t.preventDefault(), t.stopPropagation();
+    const e = t.deltaY < 0 ? 1 : -1;
+    this.#i.zoomVertically(e), this.#g();
+  }
+  #N(t) {
+    if (this.#l?.handlePointerEvent(t) ?? !1) {
+      this.#g();
+      return;
+    }
+    this.#m() || this.#o?.handlePointerEvent(t) || (this.#y = !0, this.#x = t.clientX, this.#T = t.clientY);
+  }
+  #G(t) {
+    const e = this.#l?.handlePointerEvent(t) ?? !1;
+    if (this.#m() || this.#o?.handlePointerEvent(t), this.#L(t), e) {
+      this.#g(), this.#L(t);
+      return;
+    }
+    if (!this.#y || !this.#i || this.#m()) return;
+    const i = t.clientX - this.#x, r = t.clientY - this.#T;
+    this.#x = t.clientX, this.#T = t.clientY, this.#i.panHorizontally(i), this.#i.panVertically(r), this.#g(), this.#L(t);
+  }
+  #U(t) {
+    if (this.#y = !1, this.#l?.handlePointerEvent(t) ?? !1) {
+      this.#g();
+      return;
+    }
+    this.#m() || this.#o?.handlePointerEvent(t);
+  }
+  #_(t) {
+    document.body.style.cursor = "crosshair", this.#l?.handlePointerEvent(t), this.#m() || this.#o?.handlePointerEvent(t);
+  }
+  #$() {
+    this.#l?.clearHoverState(), document.body.style.cursor = "", this.#V();
+  }
+  #J(t) {
+    ((this.#l?.handlePointerEvent(t) ?? !1) || this.#m()) && (t.preventDefault(), t.stopPropagation(), this.#g());
+  }
+  #j(t) {
+    (this.#l?.handleKeyboardEvent(t) ?? !1) && (t.preventDefault(), this.#g());
+  }
+}, oe = Mt(({ className: t, style: e, ...i }, r) => {
+  const s = z(null), n = z(null), a = z(i);
+  return a.current = i, Rt(r, () => ({ resetChartView() {
+    n.current?.resetChartView();
+  } })), tt(() => {
+    const o = s.current;
+    if (!o) return;
+    const l = new se(o, a.current);
+    return n.current = l, () => {
+      l.destroy(), n.current = null;
+    };
+  }, []), tt(() => {
+    n.current?.updateProps(a.current);
+  }, [i]), /* @__PURE__ */ Wt("div", {
+    ref: s,
+    className: t,
+    style: {
+      width: "100%",
+      height: "100%",
+      ...e
+    }
+  });
+});
+export {
+  c as CHART_CONFIG,
+  oe as TradingReload
+};