@gearbox-protocol/ui-kit 4.0.0-next.31 → 4.0.0-next.33

package/dist/esm/components/graph/graph.js

@@ -1,15 +1,15 @@
-import { jsxs as ge, jsx as N } from "react/jsx-runtime";
+import { jsxs as ge, jsx as V } from "react/jsx-runtime";
 import { createChart as ht, CrosshairMode as gt, LineStyle as ae, LineSeries as mt, AreaSeries as pt } from "lightweight-charts";
 import * as Ve from "react";
 import { useRef as K, useState as re, useEffect as A, useLayoutEffect as dt } from "react";
 import { useIsMobile as bt } from "../../hooks/use-media-query.js";
 import { cn as ee } from "../../utils/cn.js";
 import { resolveCSSColor as ne, generateColorsFromBase as ve, hslToHex as St } from "../../utils/colors.js";
-import { getDefaultOptions as Oe, getDefaultSeries as vt, AXIS_TICK_MARK_DENSITY as Se, getDefaultVerticalLine as Ct, AXIS_FONT_SIZE as yt, AXIS_EDGE_LABEL_PADDING_PX as Qe, AXIS_TOP_LABEL_PADDING_PX as Ye, AXIS_TIME_EDGE_PADDING_PX as xt } from "./default-config.js";
+import { getDefaultOptions as Je, getDefaultSeries as vt, AXIS_TICK_MARK_DENSITY as Se, getDefaultVerticalLine as Ct, AXIS_FONT_SIZE as yt, AXIS_EDGE_LABEL_PADDING_PX as Qe, AXIS_TOP_LABEL_PADDING_PX as Ye, AXIS_TIME_EDGE_PADDING_PX as xt } from "./default-config.js";
 import { getXFormatters as Ue, formatExactValue as Le, isRatioUnit as _t, createAdaptiveYAxisFormatter as wt } from "./formatters.js";
 import { GraphCurrentValue as Pt } from "./graph-current-value.js";
-import { GraphTooltip as Tt } from "./graph-tooltip.js";
-import { VertLine as Rt } from "./plugins/vertical-line.js";
+import { GraphTooltip as Rt } from "./graph-tooltip.js";
+import { VertLine as Tt } from "./plugins/vertical-line.js";
 import { pickMinMove as Nt, niceAxisRange as Vt } from "./y-axis-scale.js";
 function ie(e) {
   return e.id ?? e.label;
@@ -19,8 +19,8 @@ function et(e, i, u) {
     return e.values().next().value;
   const f = e.get(u);
   if (f) return f;
-  const c = i.find((d) => d.id === u || d.label === u);
-  return c ? e.get(ie(c)) : void 0;
+  const s = i.find((d) => d.id === u || d.label === u);
+  return s ? e.get(ie(s)) : void 0;
 }
 class Lt {
   _yTop;
@@ -31,7 +31,7 @@ class Lt {
   }
   draw(i) {
     i.useBitmapCoordinateSpace((u) => {
-      const f = u.context, c = u.verticalPixelRatio, d = this._yTop === null ? 0 : this._yTop * c, S = this._yBottom === null ? u.bitmapSize.height : this._yBottom * c, w = Math.min(d, S), k = Math.max(d, S);
+      const f = u.context, s = u.verticalPixelRatio, d = this._yTop === null ? 0 : this._yTop * s, S = this._yBottom === null ? u.bitmapSize.height : this._yBottom * s, w = Math.min(d, S), k = Math.max(d, S);
       f.fillStyle = this._color, f.fillRect(0, w, u.bitmapSize.width, k - w);
     });
   }
@@ -61,8 +61,8 @@ class kt {
   priceBottom;
   color;
   _paneViews;
-  constructor(i, u, f, c) {
-    this.series = i, this.priceTop = u, this.priceBottom = f, this.color = c, this._paneViews = [new Mt(this)];
+  constructor(i, u, f, s) {
+    this.series = i, this.priceTop = u, this.priceBottom = f, this.color = s, this._paneViews = [new Mt(this)];
   }
   updateAllViews() {
     for (const i of this._paneViews) i.update();
@@ -90,13 +90,13 @@ class Dt {
   _color;
   _lineWidth;
   _lineStyle;
-  constructor(i, u, f, c) {
-    this._y = i, this._color = u, this._lineWidth = f, this._lineStyle = c;
+  constructor(i, u, f, s) {
+    this._y = i, this._color = u, this._lineWidth = f, this._lineStyle = s;
   }
   draw(i) {
     i.useBitmapCoordinateSpace((u) => {
       if (this._y === null) return;
-      const f = u.context, c = u.verticalPixelRatio, d = Math.max(1, Math.round(this._lineWidth * c)), S = Math.round(this._y * c);
+      const f = u.context, s = u.verticalPixelRatio, d = Math.max(1, Math.round(this._lineWidth * s)), S = Math.round(this._y * s);
       f.save(), f.strokeStyle = this._color, f.lineWidth = d, f.setLineDash(It(this._lineStyle, d)), f.beginPath(), f.moveTo(0, S), f.lineTo(u.bitmapSize.width, S), f.stroke(), f.restore();
     });
   }
@@ -135,8 +135,8 @@ class Bt {
   lineWidth;
   lineStyle;
   _paneViews;
-  constructor(i, u, f, c, d) {
-    this.series = i, this.price = u, this.color = f, this.lineWidth = c, this.lineStyle = d, this._paneViews = [new Et(this)];
+  constructor(i, u, f, s, d) {
+    this.series = i, this.price = u, this.color = f, this.lineWidth = s, this.lineStyle = d, this._paneViews = [new Et(this)];
   }
   updateAllViews() {
     for (const i of this._paneViews) i.update();
@@ -146,11 +146,11 @@ class Bt {
   }
 }
 function Ft(e, i, u) {
-  const f = e.labelText ?? "", c = e.value, d = c === void 0 ? "" : typeof c == "number" ? i === "$" ? `$${Le(c, void 0, u)}` : i === "%" ? `${Le(c, void 0, u)}%` : Le(
-    c,
+  const f = e.labelText ?? "", s = e.value, d = s === void 0 ? "" : typeof s == "number" ? i === "$" ? `$${Le(s, void 0, u)}` : i === "%" ? `${Le(s, void 0, u)}%` : Le(
+    s,
     i !== "none" && i !== "%" && i !== "$" && !_t(i) ? i : void 0,
     u
-  ) : String(c);
+  ) : String(s);
   return { labelText: f, valueStr: d };
 }
 const tt = 4;
@@ -158,7 +158,7 @@ function zt(e, i, u) {
   const f = { left: e, transform: "translateX(-50%)" };
   if (i <= 0 || !u || u <= 0)
     return f;
-  const c = u / 2, d = tt + c, S = i - tt - c;
+  const s = u / 2, d = tt + s, S = i - tt - s;
   return S < d ? { left: i / 2, transform: "translateX(-50%)" } : { left: Math.min(Math.max(e, d), S), transform: "translateX(-50%)" };
 }
 function At(e, i) {
@@ -286,15 +286,15 @@ const Me = [
 function ot(e) {
   if (e < Me.length)
     return Me[e];
-  const u = (e - Me.length) * Gt % 360, f = St(u, 70, 50), { topColor: c, bottomColor: d } = ve(f);
-  return { line: f, top: c, bottom: d };
+  const u = (e - Me.length) * Gt % 360, f = St(u, 70, 50), { topColor: s, bottomColor: d } = ve(f);
+  return { line: f, top: s, bottom: d };
 }
 function oo({
   series: e,
   className: i,
   showLegend: u = !1,
   onUnselectSeries: f,
-  xMeasureUnit: c = "time",
+  xMeasureUnit: s = "time",
   yMeasureUnit: d = "token",
   optionsOverrides: S,
   verticalLineOptions: w,
@@ -314,7 +314,7 @@ function oo({
   disableZoom: Be = !1,
   hideDefaultTooltip: xe = !1
 }) {
-  const E = K(null), V = K(/* @__PURE__ */ new Map()), _e = K(!1), Fe = K(!0), ze = K([]), le = K(0), B = K(null), we = K(null), Ae = K(null), P = bt(), se = Ve.useMemo(() => e.flatMap((t) => t.data), [e]), nt = Ve.useMemo(() => {
+  const E = K(null), L = K(/* @__PURE__ */ new Map()), _e = K(!1), Fe = K(!0), ze = K([]), le = K(0), B = K(null), we = K(null), Ae = K(null), P = bt(), se = Ve.useMemo(() => e.flatMap((t) => t.data), [e]), nt = Ve.useMemo(() => {
     if (e.length > 0) {
       const t = e[e.length - 1];
       if (t.data.length > 0)
@@ -326,13 +326,13 @@ function oo({
     for (const l of e)
       l.data.length > 0 && t.set(l.label, l.data[l.data.length - 1]);
     return t;
-  }), [We, J] = re(null), [Xe, $e] = re([]), [it, He] = re(0), je = K(/* @__PURE__ */ new Map()), [at, lt] = re({}), [Y, st] = re(0);
+  }), [We, O] = re(null), [Xe, $e] = re([]), [it, He] = re(0), je = K(/* @__PURE__ */ new Map()), [at, lt] = re({}), [Y, st] = re(0);
   A(() => {
     const t = () => {
       try {
         if (B.current && He(B.current.clientWidth), E.current && B.current) {
-          const a = B.current.clientWidth, s = B.current.clientHeight;
-          E.current.resize(a, s);
+          const a = B.current.clientWidth, c = B.current.clientHeight;
+          E.current.resize(a, c);
           try {
             le.current = E.current.paneSize().height;
           } catch {
@@ -346,7 +346,7 @@ function oo({
     };
   }, []), A(() => {
     if (!we.current || _e.current) return;
-    const t = Oe(), l = ne(
+    const t = Je(), l = ne(
       "hsl(var(--muted-foreground))",
       "rgb(163, 163, 163)"
     ), n = ht(we.current, {
@@ -375,7 +375,7 @@ function oo({
       le.current = 0;
     }
     return st((a) => a + 1), () => {
-      n.remove(), E.current = null, _e.current = !1, V.current.clear();
+      n.remove(), E.current = null, _e.current = !1, L.current.clear();
     };
   }, [P]), A(() => {
     const t = E.current;
@@ -414,29 +414,29 @@ function oo({
   }, [Y, S]), A(() => {
     const t = E.current;
     if (!t || e.length === 0) return;
-    const n = e.filter((r) => r.data.length > 0).length <= 1 ? De : Ee, a = c === "time" ? Ue(c, se) : Ue(c), s = /* @__PURE__ */ new Map();
+    const n = e.filter((r) => r.data.length > 0).length <= 1 ? De : Ee, a = s === "time" ? Ue(s, se) : Ue(s), c = /* @__PURE__ */ new Map();
     {
       let r = 0;
       for (const o of e)
-        o.data.length !== 0 && (s.set(
+        o.data.length !== 0 && (c.set(
           o.label,
           o.priceScaleId ?? (r === 0 ? "left" : "right")
         ), r++);
     }
     const h = (r, o, g) => {
-      const { formatter: F, tickmarksFormatter: R, updateVisibleRange: M } = wt(r, o, {
+      const { formatter: F, tickmarksFormatter: T, updateVisibleRange: N } = wt(r, o, {
         yScaleMin: n
       });
-      return { formatter: F, tickmarksFormatter: R, updateVisibleRange: M, labels: g };
+      return { formatter: F, tickmarksFormatter: T, updateVisibleRange: N, labels: g };
     }, m = [];
     if (D)
       for (const r of ["left", "right"]) {
         const o = /* @__PURE__ */ new Set(), g = [];
         let F = d;
-        for (const R of e)
-          if (R.data.length !== 0 && s.get(R.label) === r) {
-            o.size === 0 && R.yMeasureUnit && (F = R.yMeasureUnit), o.add(R.label);
-            for (const M of R.data) g.push(M.value);
+        for (const T of e)
+          if (T.data.length !== 0 && c.get(T.label) === r) {
+            o.size === 0 && T.yMeasureUnit && (F = T.yMeasureUnit), o.add(T.label);
+            for (const N of T.data) g.push(N.value);
           }
         o.size > 0 && m.push(h(g, F, o));
       }
@@ -451,7 +451,7 @@ function oo({
     for (const r of m)
       for (const o of r.labels)
         y.set(o, r);
-    const x = Oe();
+    const x = Je();
     t.applyOptions({
       localization: {
         ...x.localization || {},
@@ -469,7 +469,7 @@ function oo({
         minBarSpacing: 0
       }
     });
-    const v = !D && e.length > 1 && !Z, W = D ? P : e.length > 1 && !Z || P, L = ne(
+    const v = !D && e.length > 1 && !Z, W = D ? P : e.length > 1 && !Z || P, M = ne(
       "hsl(var(--muted-foreground))",
       "rgb(163, 163, 163)"
     );
@@ -481,7 +481,7 @@ function oo({
         ...x.leftPriceScale || {},
         ...S?.leftPriceScale,
         visible: D && !P,
-        textColor: L,
+        textColor: M,
         ...D && Ie && {
           // lightweight-charts uses scale margins; title shown via localization if needed
         }
@@ -490,17 +490,17 @@ function oo({
         ...x.rightPriceScale || {},
         ...S?.rightPriceScale,
         visible: D ? !P : !W,
-        textColor: L
+        textColor: M
       }
     });
-    const U = new Set(V.current.keys()), X = new Set(e.map(ie));
+    const U = new Set(L.current.keys()), X = new Set(e.map(ie));
     for (const r of U)
       if (!X.has(r)) {
-        const o = V.current.get(r);
-        o && (t.removeSeries(o), V.current.delete(r));
+        const o = L.current.get(r);
+        o && (t.removeSeries(o), L.current.delete(r));
       }
     const p = vt(), I = [];
-    let T = 0;
+    let R = 0;
     const $ = e.find((r) => r.data.length > 0), C = /* @__PURE__ */ new Map();
     if (k && k.length > 0)
       for (const r of k) {
@@ -518,39 +518,39 @@ function oo({
         Number.isFinite(r.priceTop) && g.push(r.priceTop), Number.isFinite(r.priceBottom) && g.push(r.priceBottom), C.set(o, g);
       }
     for (let r = 0; r < e.length; r++) {
-      const o = e[r], g = ie(o), F = ot(r), R = o.lineColor ?? o.color ?? F.line;
-      let M, O;
+      const o = e[r], g = ie(o), F = ot(r), T = o.lineColor ?? o.color ?? F.line;
+      let N, J;
       if (o.lineColor ?? o.color)
         if (o.topColor && o.bottomColor)
-          M = o.topColor, O = o.bottomColor;
+          N = o.topColor, J = o.bottomColor;
         else if (o.topColor) {
-          const b = ve(R);
-          M = o.topColor, O = b.bottomColor;
+          const b = ve(T);
+          N = o.topColor, J = b.bottomColor;
         } else if (o.bottomColor)
-          M = ve(R).topColor, O = o.bottomColor;
+          N = ve(T).topColor, J = o.bottomColor;
         else {
-          const b = ve(R);
-          M = b.topColor, O = b.bottomColor;
+          const b = ve(T);
+          N = b.topColor, J = b.bottomColor;
         }
       else
-        M = o.topColor || F.top, O = o.bottomColor || F.bottom;
+        N = o.topColor || F.top, J = o.bottomColor || F.bottom;
       if (o.data.length === 0) {
-        const b = V.current.get(g);
-        b && (t.removeSeries(b), V.current.delete(g));
+        const b = L.current.get(g);
+        b && (t.removeSeries(b), L.current.delete(g));
         continue;
       }
-      const pe = o.data.length > 0 ? Math.min(...o.data.map((b) => b.value)) : 0, ce = o.data.length > 0 ? Math.max(...o.data.map((b) => b.value)) : 0, ue = pe < 0, q = o.data.some((b) => b.value === 0), de = !ue && q, fe = Nt(ce - pe), he = D ? o.priceScaleId ?? (T === 0 ? "left" : "right") : Z || !v || T === 0 ? "right" : `scale-${T}`;
+      const pe = o.data.length > 0 ? Math.min(...o.data.map((b) => b.value)) : 0, ce = o.data.length > 0 ? Math.max(...o.data.map((b) => b.value)) : 0, ue = pe < 0, q = o.data.some((b) => b.value === 0), de = !ue && q, fe = Nt(ce - pe), he = D ? o.priceScaleId ?? (R === 0 ? "left" : "right") : Z || !v || R === 0 ? "right" : `scale-${R}`;
       v && I.push({
         priceScaleId: he || "right",
-        seriesIndex: T
+        seriesIndex: R
       });
-      const Te = (Z || !v) && n !== void 0 && typeof n == "number", ct = C.get(o.label) ?? [], ut = (b) => {
+      const Re = (Z || !v) && n !== void 0 && typeof n == "number", ct = C.get(o.label) ?? [], ut = (b) => {
         const _ = b();
         if (_?.priceRange) {
-          Te && (_.priceRange.minValue = n);
+          Re && (_.priceRange.minValue = n);
           for (const j of ct)
             j < _.priceRange.minValue && (_.priceRange.minValue = j), j > _.priceRange.maxValue && (_.priceRange.maxValue = j);
-          const oe = Te ? n : de && _.priceRange.minValue >= 0 ? 0 : void 0, be = le.current > 0 ? le.current : B.current?.clientHeight ?? 0;
+          const oe = Re ? n : de && _.priceRange.minValue >= 0 ? 0 : void 0, be = le.current > 0 ? le.current : B.current?.clientHeight ?? 0;
           if (be > 0) {
             const j = Vt({
               min: _.priceRange.minValue,
@@ -571,10 +571,10 @@ function oo({
           };
         }
         return _;
-      }, Ze = y.get(o.label) ?? m[0], qe = Ze.formatter, ft = Ze.tickmarksFormatter, Re = {
-        lineColor: R,
-        topColor: M,
-        bottomColor: O,
+      }, Ze = y.get(o.label) ?? m[0], qe = Ze.formatter, ft = Ze.tickmarksFormatter, Te = {
+        lineColor: T,
+        topColor: N,
+        bottomColor: J,
         priceScaleId: he,
         ...o.seriesType === "line" && {
           lineStyle: o.lineStyle ?? ae.Solid
@@ -582,14 +582,14 @@ function oo({
         priceFormat: {
           type: "custom",
           minMove: fe,
-          formatter: Te && typeof n == "number" ? (b) => qe(
+          formatter: Re && typeof n == "number" ? (b) => qe(
             b < n ? n : b
           ) : qe,
           tickmarksFormatter: ft
         },
         autoscaleInfoProvider: ut
-      }, Je = o.seriesType === "line";
-      let z = V.current.get(g);
+      }, Oe = o.seriesType === "line";
+      let z = L.current.get(g);
       const te = o.data.map((b) => ({
         ...b,
         time: b.time
@@ -600,13 +600,13 @@ function oo({
           j.push({ time: Ne });
         te.unshift(...j);
       }
-      z && z.seriesType() !== (Je ? "Line" : "Area") && (t.removeSeries(z), V.current.delete(g), z = void 0), z ? (z.applyOptions(Re), z.setData(te)) : (Je ? z = t.addSeries(mt, {
+      z && z.seriesType() !== (Oe ? "Line" : "Area") && (t.removeSeries(z), L.current.delete(g), z = void 0), z ? (z.applyOptions(Te), z.setData(te)) : (Oe ? z = t.addSeries(mt, {
         ...p,
-        ...Re
+        ...Te
       }) : z = t.addSeries(pt, {
         ...p,
-        ...Re
-      }), z.setData(te), V.current.set(g, z)), T++;
+        ...Te
+      }), z.setData(te), L.current.set(g, z)), R++;
     }
     if (D)
       try {
@@ -617,7 +617,7 @@ function oo({
           alignLabels: !0,
           entireTextOnly: !1,
           tickMarkDensity: Se,
-          textColor: L,
+          textColor: M,
           ...S?.rightPriceScale
         };
         r?.applyOptions(g), o?.applyOptions(g);
@@ -637,7 +637,7 @@ function oo({
             alignLabels: !0,
             entireTextOnly: !1,
             tickMarkDensity: Se,
-            textColor: L
+            textColor: M
           });
         } catch (o) {
           console.warn(
@@ -658,7 +658,7 @@ function oo({
           alignLabels: !0,
           entireTextOnly: !1,
           tickMarkDensity: Se,
-          textColor: L,
+          textColor: M,
           ...S?.rightPriceScale
         });
       } catch {
@@ -672,27 +672,35 @@ function oo({
       if (r.length > 0) {
         const o = Math.min(...r), g = Q !== void 0 ? Math.min(Q, o) : o, F = Math.max(...r);
         if (Number(g) <= Number(F)) {
-          const R = () => {
-            const M = t.timeScale(), O = D && !P, pe = D ? !P : !W, ce = !O, ue = !pe;
-            if (M.applyOptions({
+          const T = () => {
+            const N = t.timeScale();
+            if (s !== "time") {
+              N.applyOptions({
+                fixLeftEdge: !0,
+                fixRightEdge: !0
+              });
+              return;
+            }
+            const J = D && !P, pe = D ? !P : !W, ce = !J, ue = !pe;
+            if (N.applyOptions({
               fixLeftEdge: !ce,
               fixRightEdge: !ue
             }), !ce && !ue) return;
-            const q = M.getVisibleLogicalRange(), de = M.width();
+            const q = N.getVisibleLogicalRange(), de = N.width();
             if (!q || !(de > 0)) return;
             const fe = q.to - q.from;
             if (!(fe > 0)) return;
             const he = xt * fe / de;
-            M.setVisibleLogicalRange({
+            N.setVisibleLogicalRange({
               from: ce ? q.from - he : q.from,
               to: ue ? q.to + he : q.to
             });
           };
           try {
-            t.timeScale().setVisibleRange({ from: g, to: F }), R();
+            t.timeScale().setVisibleRange({ from: g, to: F }), T();
           } catch {
             try {
-              t.timeScale().fitContent(), R();
+              t.timeScale().fitContent(), T();
             } catch {
             }
           }
@@ -708,7 +716,7 @@ function oo({
     Y,
     e,
     se,
-    c,
+    s,
     d,
     P,
     Z,
@@ -726,35 +734,35 @@ function oo({
     if (!t || e.length === 0) return;
     const l = e.length === 1;
     let n;
-    for (const s of e)
-      if (s.data.length > 0) {
-        n = s.data[s.data.length - 1].time;
+    for (const c of e)
+      if (c.data.length > 0) {
+        n = c.data[c.data.length - 1].time;
         break;
       }
     if (!n) return;
-    const a = (s) => {
-      const { time: h = n, seriesData: m, point: y } = s || {}, x = e[0], v = x ? V.current.get(ie(x)) : void 0;
+    const a = (c) => {
+      const { time: h = n, seriesData: m, point: y } = c || {}, x = e[0], v = x ? L.current.get(ie(x)) : void 0;
       if (!y || !h) {
         const X = /* @__PURE__ */ new Map();
         for (const p of e)
           p.data.length > 0 && X.set(p.label, p.data[p.data.length - 1]);
         if (Pe(X.size > 0 ? X : void 0), l || Z || xe)
-          J(null);
+          O(null);
         else if (v && n) {
           const p = e[0];
           if (p && p.data.length > 0) {
-            const T = t.timeScale().timeToCoordinate(n), $ = p.data[p.data.length - 1].value, C = v.priceToCoordinate($);
-            T !== null && C !== null && J({ x: T, y: C });
+            const R = t.timeScale().timeToCoordinate(n), $ = p.data[p.data.length - 1].value, C = v.priceToCoordinate($);
+            R !== null && C !== null && O({ x: R, y: C });
           }
         }
         return;
       }
       const W = /* @__PURE__ */ new Map();
-      let L, U = v;
+      let M, U = v;
       for (let X = 0; X < e.length; X++) {
-        const p = e[X], I = V.current.get(ie(p));
+        const p = e[X], I = L.current.get(ie(p));
         if (!I) continue;
-        const T = m?.get(I), $ = T && "value" in T ? T.value : void 0;
+        const R = m?.get(I), $ = R && "value" in R ? R.value : void 0;
         let C;
         if ($ !== void 0)
           C = $;
@@ -766,33 +774,33 @@ function oo({
           if (Number(h) < H) continue;
           C = At(p.data, Number(h));
         }
-        Number.isNaN(C) || (L === void 0 && (L = C, U = I), W.set(p.label, { value: C, time: h }));
+        Number.isNaN(C) || (M === void 0 && (M = C, U = I), W.set(p.label, { value: C, time: h }));
       }
-      if (Pe(W), L !== void 0 && U) {
-        const p = t.timeScale().timeToCoordinate(h), I = U.priceToCoordinate(L);
+      if (Pe(W), M !== void 0 && U) {
+        const p = t.timeScale().timeToCoordinate(h), I = U.priceToCoordinate(M);
         if (p !== null && I !== null) {
-          const T = B.current;
-          if (T) {
-            const $ = T.querySelector(
+          const R = B.current;
+          if (R) {
+            const $ = R.querySelector(
               ".LightweightChart"
             );
             if ($) {
-              const C = $.getBoundingClientRect(), H = T.getBoundingClientRect(), r = p + (C.left - H.left), o = I + (C.top - H.top);
-              J({ x: r, y: o });
+              const C = $.getBoundingClientRect(), H = R.getBoundingClientRect(), r = p + (C.left - H.left), o = I + (C.top - H.top);
+              O({ x: r, y: o });
             } else
-              J({ x: p, y: I });
+              O({ x: p, y: I });
           } else
-            J({ x: p, y: I });
+            O({ x: p, y: I });
         } else
-          J(null);
+          O(null);
       } else
-        J(null);
+        O(null);
     };
     return t.subscribeCrosshairMove(a), P && t.subscribeClick(a), !l && !Z && !xe && requestAnimationFrame(() => {
-      const s = e[0], h = s ? V.current.get(ie(s)) : void 0;
-      if (h && n && s.data.length > 0) {
-        const y = t.timeScale().timeToCoordinate(n), x = s.data[s.data.length - 1].value, v = h.priceToCoordinate(x);
-        y !== null && v !== null && J({ x: y, y: v });
+      const c = e[0], h = c ? L.current.get(ie(c)) : void 0;
+      if (h && n && c.data.length > 0) {
+        const y = t.timeScale().timeToCoordinate(n), x = c.data[c.data.length - 1].value, v = h.priceToCoordinate(x);
+        y !== null && v !== null && O({ x: y, y: v });
       }
     }), () => {
       t.unsubscribeCrosshairMove(a), P && t.unsubscribeClick(a);
@@ -803,16 +811,16 @@ function oo({
     const l = t.timeScale(), n = () => {
       const a = ze.current;
       if (a.length === 0) return;
-      const s = l.getVisibleRange();
-      if (!s) return;
-      const h = Number(s.from), m = Number(s.to);
+      const c = l.getVisibleRange();
+      if (!c) return;
+      const h = Number(c.from), m = Number(c.to);
       for (const y of a) {
         const x = [];
         for (const v of e)
           if (y.labels.has(v.label))
             for (const W of v.data) {
-              const L = Number(W.time);
-              L >= h && L <= m && x.push(W.value);
+              const M = Number(W.time);
+              M >= h && M <= m && x.push(W.value);
             }
         x.length > 0 && y.updateVisibleRange(x);
       }
@@ -823,25 +831,25 @@ function oo({
       );
     };
   }, [e]), A(() => {
-    const t = E.current, l = Array.from(V.current.values()), n = [];
+    const t = E.current, l = Array.from(L.current.values()), n = [];
     if (t && l.length > 0 && w) {
-      const a = Ct(), s = l[0];
+      const a = Ct(), c = l[0];
       for (const h of w) {
         const m = {
           ...a,
           ...h.options || {}
         };
         m.color && (m.color = ne(m.color, m.color));
-        const y = new Rt(t, s, h.xCoordinate, m);
-        s.attachPrimitive(y), n.push(y);
+        const y = new Tt(t, c, h.xCoordinate, m);
+        c.attachPrimitive(y), n.push(y);
       }
     }
     return () => {
       if (l.length > 0) {
         const a = l[0];
-        for (const s of n)
+        for (const c of n)
           try {
-            a.detachPrimitive(s);
+            a.detachPrimitive(c);
           } catch {
           }
       }
@@ -855,13 +863,13 @@ function oo({
       );
       for (const a of k) {
         if (!Number.isFinite(a.price)) continue;
-        const s = et(
-          V.current,
+        const c = et(
+          L.current,
           e,
           a.seriesLabel
         );
-        if (!s) continue;
-        const h = a.color ? ne(a.color, a.color) : n, m = a.lineWidth ?? 1, y = a.lineStyle ?? ae.Dashed, x = s.createPriceLine({
+        if (!c) continue;
+        const h = a.color ? ne(a.color, a.color) : n, m = a.lineWidth ?? 1, y = a.lineStyle ?? ae.Dashed, x = c.createPriceLine({
           price: a.price,
           color: h,
           lineWidth: m,
@@ -869,15 +877,15 @@ function oo({
           axisLabelVisible: a.axisLabelVisible ?? !0,
           title: a.title ?? ""
         });
-        t.push({ series: s, line: x });
+        t.push({ series: c, line: x });
         const v = new Bt(
-          s,
+          c,
           a.price,
           h,
           m,
           y
         );
-        s.attachPrimitive(v), l.push({ series: s, primitive: v });
+        c.attachPrimitive(v), l.push({ series: c, primitive: v });
       }
     }
     return () => {
@@ -898,16 +906,16 @@ function oo({
       const l = "rgba(239, 68, 68, 0.12)";
       for (const n of G) {
         const a = et(
-          V.current,
+          L.current,
           e,
           n.seriesLabel
         );
         if (!a) continue;
-        const s = n.color ? ne(n.color, l) : l, h = new kt(
+        const c = n.color ? ne(n.color, l) : l, h = new kt(
           a,
           n.priceTop,
           n.priceBottom,
-          s
+          c
         );
         a.attachPrimitive(h), t.push({ series: a, zone: h });
       }
@@ -926,7 +934,7 @@ function oo({
       return;
     }
     const l = () => {
-      const s = t.timeScale(), h = w.map((m) => s.timeToCoordinate(m.xCoordinate) ?? null);
+      const c = t.timeScale(), h = w.map((m) => c.timeToCoordinate(m.xCoordinate) ?? null);
       $e(h), B.current && He(B.current.clientWidth);
     };
     l();
@@ -940,9 +948,9 @@ function oo({
     lt((t) => {
       const l = {};
       let n = !1;
-      for (const [a, s] of je.current) {
-        if (!s) continue;
-        const h = s.offsetWidth;
+      for (const [a, c] of je.current) {
+        if (!c) continue;
+        const h = c.offsetWidth;
         l[a] = h, t[a] !== h && (n = !0);
       }
       return Object.keys(t).length !== Object.keys(l).length && (n = !0), n ? l : t;
@@ -964,20 +972,20 @@ function oo({
         i
       ),
       children: [
-        ye != null && ye !== !1 && me ? /* @__PURE__ */ N("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ N("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: ye }) }) : rt && me && Ke && /* @__PURE__ */ N(
+        ye != null && ye !== !1 && me ? /* @__PURE__ */ V("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ V("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: ye }) }) : rt && me && Ke && /* @__PURE__ */ V(
           Pt,
           {
             point: Ke,
-            xMeasureUnit: c,
+            xMeasureUnit: s,
             yMeasureUnit: d,
             decimals: Ce
           }
         ),
-        Ge && We && /* @__PURE__ */ N(
-          Tt,
+        Ge && We && /* @__PURE__ */ V(
+          Rt,
           {
             points: Ge,
-            xMeasureUnit: c,
+            xMeasureUnit: s,
             yMeasureUnit: d,
             series: e,
             position: We,
@@ -985,8 +993,8 @@ function oo({
             decimals: Ce
           }
         ),
-        u && /* @__PURE__ */ N(Wt, { series: e, onUnselect: f }),
-        w && w.length > 0 && Xe.length === w.length && /* @__PURE__ */ N(
+        u && /* @__PURE__ */ V(Wt, { series: e, onUnselect: f }),
+        w && w.length > 0 && Xe.length === w.length && /* @__PURE__ */ V(
           "div",
           {
             className: "absolute inset-0 z-[5] pointer-events-none",
@@ -994,13 +1002,13 @@ function oo({
             children: w.map((t, l) => {
               const n = Xe[l], a = t.options ?? {};
               if (n === null) return null;
-              const { labelText: s, valueStr: h } = Ft(
+              const { labelText: c, valueStr: h } = Ft(
                 a,
                 d,
                 Ce
               ), m = a.tooltipText ?? "";
-              if (!(s || h || m)) return null;
-              const x = a.labelBackgroundColor ?? a.color ?? "hsl(var(--background))", v = a.labelTextColor ?? "hsl(var(--foreground))", W = `${String(t.xCoordinate)}-${s}-${m}`, L = zt(
+              if (!(c || h || m)) return null;
+              const x = a.labelBackgroundColor ?? a.color ?? "hsl(var(--background))", v = a.labelTextColor ?? "hsl(var(--foreground))", W = `${String(t.xCoordinate)}-${c}-${m}`, M = zt(
                 n,
                 it,
                 at[l]
@@ -1016,14 +1024,14 @@ function oo({
                     m && "pointer-events-auto cursor-default"
                   ),
                   style: {
-                    ...L,
+                    ...M,
                     backgroundColor: x,
                     color: v
                   },
                   children: [
-                    s && /* @__PURE__ */ N("span", { className: "block", children: s }),
-                    h && /* @__PURE__ */ N("span", { className: ee("block", s && "mt-0.5"), children: h }),
-                    m && /* @__PURE__ */ N(
+                    c && /* @__PURE__ */ V("span", { className: "block", children: c }),
+                    h && /* @__PURE__ */ V("span", { className: ee("block", c && "mt-0.5"), children: h }),
+                    m && /* @__PURE__ */ V(
                       "span",
                       {
                         className: "pointer-events-none absolute right-0 top-full z-10 mt-1 hidden w-[280px] whitespace-normal rounded border border-border bg-popover px-2.5 py-1.5 text-left leading-snug text-popover-foreground shadow-md group-hover:block",
@@ -1038,7 +1046,7 @@ function oo({
             })
           }
         ),
-        /* @__PURE__ */ N(
+        /* @__PURE__ */ V(
           "div",
           {
             ref: we,
@@ -1054,16 +1062,16 @@ function Wt({
   onUnselect: i,
   inline: u = !1
 }) {
-  const f = e.every((c) => c.data.length === 0);
-  return /* @__PURE__ */ N(
+  const f = e.every((s) => s.data.length === 0);
+  return /* @__PURE__ */ V(
     "div",
     {
       className: ee(
         "flex flex-wrap",
         u ? "items-center justify-center gap-6" : "absolute top-0 left-2 z-[10] gap-2"
       ),
-      children: e.map((c, d) => {
-        const S = ot(d), w = (c.lineColor ?? c.color) || S.line, k = !f && c.data.length === 0;
+      children: e.map((s, d) => {
+        const S = ot(d), w = (s.lineColor ?? s.color) || S.line, k = !f && s.data.length === 0;
         return /* @__PURE__ */ ge(
           "div",
           {
@@ -1073,7 +1081,7 @@ function Wt({
               k && "opacity-50"
             ),
             children: [
-              /* @__PURE__ */ N(
+              /* @__PURE__ */ V(
                 "div",
                 {
                   className: ee(
@@ -1090,20 +1098,20 @@ function Wt({
                     u ? "text-sm" : "text-[10px] sm:text-xs"
                   ),
                   children: [
-                    c.label,
+                    s.label,
                     k && " (no data)"
                   ]
                 }
               ),
-              i && /* @__PURE__ */ N(
+              i && /* @__PURE__ */ V(
                 "button",
                 {
                   type: "button",
                   onClick: (G) => {
-                    G.stopPropagation(), i(c.label);
+                    G.stopPropagation(), i(s.label);
                   },
                   className: "ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer",
-                  "aria-label": `Remove ${c.label}`,
+                  "aria-label": `Remove ${s.label}`,
                   children: /* @__PURE__ */ ge(
                     "svg",
                     {
@@ -1119,9 +1127,9 @@ function Wt({
                       className: "text-muted-foreground hover:text-foreground",
                       "aria-hidden": "true",
                       children: [
-                        /* @__PURE__ */ N("title", { children: "Close" }),
-                        /* @__PURE__ */ N("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                        /* @__PURE__ */ N("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                        /* @__PURE__ */ V("title", { children: "Close" }),
+                        /* @__PURE__ */ V("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                        /* @__PURE__ */ V("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                       ]
                     }
                   )
@@ -1129,7 +1137,7 @@ function Wt({
               )
             ]
           },
-          c.id ?? c.label
+          s.id ?? s.label
         );
       })
     }