@gearbox-protocol/permissionless-ui 1.26.3 → 1.26.5

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

@@ -1,24 +1,24 @@
-import { jsxs as j, jsx as p } from "react/jsx-runtime";
-import { createChart as Gt, CrosshairMode as Ot, AreaSeries as Bt } from "lightweight-charts";
-import * as ct from "react";
-import { useRef as P, useState as ut, useEffect as $ } from "react";
-import { useIsMobile as Yt } from "../../hooks/use-media-query.js";
-import { cn as dt } from "../../utils/cn.js";
-import { resolveCSSColor as Vt, generateColorsFromBase as q, hslToHex as jt } from "../../utils/colors.js";
-import { getDefaultOptions as yt, getDefaultSeries as Ht, getDefaultVerticalLine as Wt } from "./default-config.js";
-import { getXFormatters as kt, createAdaptiveYAxisFormatter as _t, formatExactValue as ft } from "./formatters.js";
-import { GraphCurrentValue as Xt } from "./graph-current-value.js";
-import { GraphTooltip as Lt } from "./graph-tooltip.js";
-import { VertLine as qt } from "./plugins/vertical-line.js";
-function Zt(e, S, C) {
-  const A = e.labelText ?? "", f = e.value, w = f === void 0 ? "" : typeof f == "number" ? S === "$" ? `$${ft(f, void 0, C)}` : S === "%" ? `${ft(f, void 0, C)}%` : ft(
+import { jsxs as j, jsx as h } from "react/jsx-runtime";
+import { createChart as At, CrosshairMode as It, AreaSeries as zt } from "lightweight-charts";
+import * as at from "react";
+import { useRef as z, useState as lt, useEffect as D } from "react";
+import { useIsMobile as $t } from "../../hooks/use-media-query.js";
+import { cn as ct } from "../../utils/cn.js";
+import { resolveCSSColor as St, generateColorsFromBase as X, hslToHex as Dt } from "../../utils/colors.js";
+import { getDefaultOptions as wt, getDefaultSeries as Et, getDefaultVerticalLine as Gt } from "./default-config.js";
+import { getXFormatters as Rt, createAdaptiveYAxisFormatter as Bt, formatExactValue as it } from "./formatters.js";
+import { GraphCurrentValue as Ot } from "./graph-current-value.js";
+import { GraphTooltip as Yt } from "./graph-tooltip.js";
+import { VertLine as Ht } from "./plugins/vertical-line.js";
+function jt(e, v, m) {
+  const M = e.labelText ?? "", f = e.value, S = f === void 0 ? "" : typeof f == "number" ? v === "$" ? `$${it(f, void 0, m)}` : v === "%" ? `${it(f, void 0, m)}%` : it(
     f,
-    S !== "none" && S !== "%" && S !== "$" ? S : void 0,
-    C
+    v !== "none" && v !== "%" && v !== "$" ? v : void 0,
+    m
   ) : String(f);
-  return { labelText: A, valueStr: w };
+  return { labelText: M, valueStr: S };
 }
-const gt = [
+const st = [
   // 0  green (emerald)
   {
     line: "#02c39a",
@@ -133,60 +133,60 @@ const gt = [
     top: "rgba(71, 85, 105, 0.56)",
     bottom: "rgba(71, 85, 105, 0.04)"
   }
-], Kt = 137.5;
-function Nt(e) {
-  if (e < gt.length)
-    return gt[e];
-  const C = (e - gt.length) * Kt % 360, A = jt(C, 70, 50), { topColor: f, bottomColor: w } = q(A);
-  return { line: A, top: f, bottom: w };
+], Wt = 137.5;
+function Vt(e) {
+  if (e < st.length)
+    return st[e];
+  const m = (e - st.length) * Wt % 360, M = Dt(m, 70, 50), { topColor: f, bottomColor: S } = X(M);
+  return { line: M, top: f, bottom: S };
 }
-function ge({
+function ie({
   series: e,
-  className: S,
-  showLegend: C = !1,
-  onUnselectSeries: A,
+  className: v,
+  showLegend: m = !1,
+  onUnselectSeries: M,
   xMeasureUnit: f = "time",
-  yMeasureUnit: w = "token",
-  optionsOverrides: B,
-  verticalLineOptions: R,
-  currentValueDecimals: H,
-  useSharedPriceScale: T = !1,
-  showCurrentValue: Pt = !0,
+  yMeasureUnit: S = "token",
+  optionsOverrides: Y,
+  verticalLineOptions: C,
+  currentValueDecimals: q,
+  useSharedPriceScale: y = !1,
+  showCurrentValue: yt = !0,
   graphTitle: Z,
-  yScaleMin: mt,
-  yScaleMinMultiple: bt
+  yScaleMin: ut,
+  yScaleMinMultiple: ft
 }) {
-  const k = P(null), y = P(/* @__PURE__ */ new Map()), K = P(!1), J = P(/* @__PURE__ */ new Set()), ht = P(0), pt = P(!0), Q = P(
+  const k = z(null), w = z(/* @__PURE__ */ new Map()), K = z(!1), gt = z(!0), J = z(
     null
-  ), Tt = P(null), I = P(null), U = P(null), V = Yt(), z = ct.useMemo(() => e.flatMap((t) => t.data), [e]), Ft = ct.useMemo(() => {
+  ), kt = z(null), $ = z(null), Q = z(null), V = $t(), A = at.useMemo(() => e.flatMap((t) => t.data), [e]), Nt = at.useMemo(() => {
     if (e.length > 0) {
       const t = e[e.length - 1];
       if (t.data.length > 0)
         return t.data[t.data.length - 1];
     }
-  }, [e]), [W, tt] = ut(() => {
-    if (!Ft) return;
+  }, [e]), [dt, U] = lt(() => {
+    if (!Nt) return;
     const t = /* @__PURE__ */ new Map();
     for (const a of e)
       a.data.length > 0 && t.set(a.label, a.data[a.data.length - 1]);
     return t;
-  }), [et, E] = ut(null), [Ct, vt] = ut([]);
-  $(() => {
+  }), [mt, I] = lt(null), [bt, ht] = lt([]);
+  D(() => {
     const t = () => {
-      if (k.current && I.current) {
-        const i = I.current.clientWidth, l = I.current.clientHeight;
-        k.current.resize(i, l), k.current.timeScale().fitContent();
+      if (k.current && $.current) {
+        const l = $.current.clientWidth, s = $.current.clientHeight;
+        k.current.resize(l, s);
       }
-    }, a = I.current, n = a ? new ResizeObserver(t) : null;
-    return a && n?.observe(a), () => {
-      a && n?.unobserve(a);
+    }, a = $.current, r = a ? new ResizeObserver(t) : null;
+    return a && r?.observe(a), () => {
+      a && r?.unobserve(a);
     };
-  }, []), $(() => {
-    if (!U.current || K.current) return;
-    const t = yt(), a = Vt(
+  }, []), D(() => {
+    if (!Q.current || K.current) return;
+    const t = wt(), a = St(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
-    ), n = Gt(U.current, {
+    ), r = At(Q.current, {
       ...t,
       rightPriceScale: {
         ...t.rightPriceScale || {},
@@ -196,55 +196,55 @@ function ge({
       ...V && {
         crosshair: {
           ...t.crosshair,
-          mode: Ot.Magnet
+          mode: It.Magnet
         }
       },
-      ...B
+      ...Y
     });
-    return k.current = n, K.current = !0, () => {
-      n.remove(), k.current = null, K.current = !1, y.current.clear();
+    return k.current = r, K.current = !0, () => {
+      r.remove(), k.current = null, K.current = !1, w.current.clear();
     };
-  }, [V, B]), $(() => {
+  }, [V, Y]), D(() => {
     const t = k.current;
     if (!t || e.length === 0) return;
-    const n = e.filter((o) => o.data.length > 0).length <= 1 ? mt : bt, i = f === "time" ? kt(f, z) : kt(f), l = z.map((o) => o.value), {
+    const r = e.filter((o) => o.data.length > 0).length <= 1 ? ut : ft, l = f === "time" ? Rt(f, A) : Rt(f), s = A.map((o) => o.value), {
       formatter: c,
-      tickmarksFormatter: g,
-      updateVisibleRange: L,
-      updateLastValues: b
-    } = _t(l, w, {
-      yScaleMin: n
+      tickmarksFormatter: u,
+      updateVisibleRange: N,
+      updateLastValues: g
+    } = Bt(s, S, {
+      yScaleMin: r
     });
-    Q.current = L, Tt.current = b;
-    const N = e.filter((o) => o.data.length > 0).map((o) => o.data[o.data.length - 1].value);
-    b(N);
-    const v = yt();
+    J.current = N, kt.current = g;
+    const P = e.filter((o) => o.data.length > 0).map((o) => o.data[o.data.length - 1].value);
+    g(P);
+    const L = wt();
     t.applyOptions({
       localization: {
-        ...v.localization || {},
+        ...L.localization || {},
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
         timeFormatter: (o) => (
           // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-          i.timeFormatter(parseFloat(o), void 0)
+          l.timeFormatter(parseFloat(o), void 0)
         )
       },
       timeScale: {
-        ...v.timeScale || {},
+        ...L.timeScale || {},
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-        tickMarkFormatter: i.tickMarkFormatter,
+        tickMarkFormatter: l.tickMarkFormatter,
         minBarSpacing: 0
       }
     });
-    const d = (z.length > 0 ? Math.min(...z.map((o) => o.value)) : 0) < 0, h = z.some((o) => o.value === 0), m = !d && h, u = e.length > 1 && !T, F = e.length > 1 && !T || V, M = Vt(
+    const d = (A.length > 0 ? Math.min(...A.map((o) => o.value)) : 0) < 0, x = A.some((o) => o.value === 0), b = !d && x, p = e.length > 1 && !y, T = e.length > 1 && !y || V, F = St(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
     );
     t.applyOptions({
       rightPriceScale: {
-        ...v.rightPriceScale || {},
-        visible: !F,
-        textColor: M,
-        ...m && {
+        ...L.rightPriceScale || {},
+        visible: !T,
+        textColor: F,
+        ...b && {
           scaleMargins: {
             top: 0.3,
             bottom: 0
@@ -252,86 +252,86 @@ function ge({
         }
       }
     });
-    const ot = new Set(y.current.keys()), nt = new Set(e.map((o) => o.label));
-    for (const o of ot)
-      if (!nt.has(o)) {
-        const r = y.current.get(o);
-        r && (t.removeSeries(r), y.current.delete(o));
+    const tt = new Set(w.current.keys()), et = new Set(e.map((o) => o.label));
+    for (const o of tt)
+      if (!et.has(o)) {
+        const n = w.current.get(o);
+        n && (t.removeSeries(n), w.current.delete(o));
       }
-    const Mt = Ht(), rt = [];
+    const Pt = Et(), ot = [];
     let _ = 0;
     for (let o = 0; o < e.length; o++) {
-      const r = e[o], it = Nt(o), X = r.lineColor ?? r.color ?? it.line;
-      let D, G;
-      if (r.lineColor ?? r.color)
-        if (r.topColor && r.bottomColor)
-          D = r.topColor, G = r.bottomColor;
-        else if (r.topColor) {
-          const s = q(X);
-          D = r.topColor, G = s.bottomColor;
-        } else if (r.bottomColor)
-          D = q(X).topColor, G = r.bottomColor;
+      const n = e[o], H = Vt(o), E = n.lineColor ?? n.color ?? H.line;
+      let G, B;
+      if (n.lineColor ?? n.color)
+        if (n.topColor && n.bottomColor)
+          G = n.topColor, B = n.bottomColor;
+        else if (n.topColor) {
+          const i = X(E);
+          G = n.topColor, B = i.bottomColor;
+        } else if (n.bottomColor)
+          G = X(E).topColor, B = n.bottomColor;
         else {
-          const s = q(X);
-          D = s.topColor, G = s.bottomColor;
+          const i = X(E);
+          G = i.topColor, B = i.bottomColor;
         }
       else
-        D = r.topColor || it.top, G = r.bottomColor || it.bottom;
-      if (r.data.length === 0) {
-        const s = y.current.get(r.label);
-        s && (t.removeSeries(s), y.current.delete(r.label));
+        G = n.topColor || H.top, B = n.bottomColor || H.bottom;
+      if (n.data.length === 0) {
+        const i = w.current.get(n.label);
+        i && (t.removeSeries(i), w.current.delete(n.label));
         continue;
       }
-      const zt = (r.data.length > 0 ? Math.min(...r.data.map((s) => s.value)) : 0) < 0, Et = r.data.some((s) => s.value === 0), $t = !zt && Et, St = T || !u || _ === 0 ? "right" : `scale-${_}`;
-      u && rt.push({
-        priceScaleId: St || "right",
-        shouldPreventNegativeAxis: $t,
+      const Lt = (n.data.length > 0 ? Math.min(...n.data.map((i) => i.value)) : 0) < 0, Tt = n.data.some((i) => i.value === 0), Ft = !Lt && Tt, vt = y || !p || _ === 0 ? "right" : `scale-${_}`;
+      p && ot.push({
+        priceScaleId: vt || "right",
+        shouldPreventNegativeAxis: Ft,
         seriesIndex: _
       });
-      const wt = (T || !u) && n !== void 0 && typeof n == "number", Rt = {
-        lineColor: X,
-        topColor: D,
-        bottomColor: G,
-        priceScaleId: St,
+      const Ct = (y || !p) && r !== void 0 && typeof r == "number", xt = {
+        lineColor: E,
+        topColor: G,
+        bottomColor: B,
+        priceScaleId: vt,
         priceFormat: {
           type: "custom",
           minMove: 0.01,
-          formatter: wt && typeof n == "number" ? (s) => c(
-            s < n ? n : s
+          formatter: Ct && typeof r == "number" ? (i) => c(
+            i < r ? r : i
           ) : c,
-          tickmarksFormatter: g
+          tickmarksFormatter: u
         },
-        autoscaleInfoProvider: (s) => {
-          if (!wt) return s();
-          const st = s();
-          if (st?.priceRange) {
-            const Dt = n;
-            st.priceRange.minValue = Dt;
+        autoscaleInfoProvider: (i) => {
+          if (!Ct) return i();
+          const nt = i();
+          if (nt?.priceRange) {
+            const Mt = r;
+            nt.priceRange.minValue = Mt;
           }
-          return st;
+          return nt;
         }
       };
-      let O = y.current.get(r.label);
-      O ? (O.applyOptions(Rt), O.setData(
-        r.data.map((s) => ({
-          ...s,
-          time: s.time
+      let O = w.current.get(n.label);
+      O ? (O.applyOptions(xt), O.setData(
+        n.data.map((i) => ({
+          ...i,
+          time: i.time
         }))
-      )) : (O = t.addSeries(Bt, {
-        ...Mt,
-        ...Rt
+      )) : (O = t.addSeries(zt, {
+        ...Pt,
+        ...xt
       }), O.setData(
-        r.data.map((s) => ({
-          ...s,
-          time: s.time
+        n.data.map((i) => ({
+          ...i,
+          time: i.time
         }))
-      ), y.current.set(r.label, O)), _++;
+      ), w.current.set(n.label, O)), _++;
     }
-    if (u && rt.length > 0)
-      for (const o of rt)
+    if (p && ot.length > 0)
+      for (const o of ot)
         try {
-          const r = t.priceScale(o.priceScaleId);
-          r && r.applyOptions({
+          const n = t.priceScale(o.priceScaleId);
+          n && n.applyOptions({
             visible: !1,
             autoScale: !0,
             scaleMargins: {
@@ -346,15 +346,15 @@ function ge({
             borderVisible: !0,
             borderColor: "rgba(224, 227, 235, 0.1)",
             entireTextOnly: !1,
-            textColor: M
+            textColor: F
           });
-        } catch (r) {
+        } catch (n) {
           console.warn(
             `Failed to configure price scale ${o.priceScaleId} for series ${o.seriesIndex}:`,
-            r
+            n
           );
         }
-    else if (!u)
+    else if (!p)
       try {
         const o = t.priceScale("right");
         o && o.applyOptions({
@@ -363,8 +363,8 @@ function ge({
           scaleMargins: {
             top: 0.1,
             // No bottom margin when yScaleMin is set so the scale doesn't extend below the minimum (avoids negative labels like -10M)
-            bottom: n !== void 0 || m ? 0 : 0.1,
-            ...m && {
+            bottom: r !== void 0 || b ? 0 : 0.1,
+            ...b && {
               top: 0.3
             }
           },
@@ -372,249 +372,231 @@ function ge({
           borderVisible: !0,
           borderColor: "rgba(224, 227, 235, 0.1)",
           entireTextOnly: !1,
-          textColor: M
+          textColor: F
         });
       } catch {
       }
-    n !== void 0 && !V && (T || !u) && t.applyOptions({
+    if (r !== void 0 && !V && (y || !p) && t.applyOptions({
       handleScroll: {
         vertTouchDrag: !1
       }
-    });
-    const at = new Set(e.map((o) => o.label)), At = at.size !== J.current.size || [...at].some((o) => !J.current.has(o)), It = z.length !== ht.current;
-    (pt.current || At || It || V) && (t.timeScale().fitContent(), pt.current = !1), J.current = at, ht.current = z.length;
-    const lt = /* @__PURE__ */ new Map();
+    }), A.length > 0) {
+      const o = A.map((E) => Number(E.time)), n = Math.min(...o), H = Math.max(...o);
+      t.timeScale().setVisibleRange({ from: n, to: H });
+    }
+    gt.current && (gt.current = !1);
+    const rt = /* @__PURE__ */ new Map();
     for (const o of e)
-      o.data.length > 0 && lt.set(o.label, o.data[o.data.length - 1]);
-    tt(lt.size > 0 ? lt : void 0);
+      o.data.length > 0 && rt.set(o.label, o.data[o.data.length - 1]);
+    U(rt.size > 0 ? rt : void 0);
   }, [
     e,
-    z,
+    A,
     f,
-    w,
+    S,
     V,
-    T,
-    mt,
-    bt
-  ]), $(() => {
+    y,
+    ut,
+    ft
+  ]), D(() => {
     const t = k.current;
     if (!t || e.length === 0) return;
     const a = e.length === 1;
-    let n;
-    for (const l of e)
-      if (l.data.length > 0) {
-        n = l.data[l.data.length - 1].time;
+    let r;
+    for (const s of e)
+      if (s.data.length > 0) {
+        r = s.data[s.data.length - 1].time;
         break;
       }
-    if (!n) return;
-    const i = (l) => {
-      const { time: c = n, seriesData: g, point: L } = l || {}, b = Array.from(y.current.values());
-      if (!L || !c) {
-        const x = /* @__PURE__ */ new Map();
+    if (!r) return;
+    const l = (s) => {
+      const { time: c = r, seriesData: u, point: N } = s || {}, g = Array.from(w.current.values());
+      if (!N || !c) {
+        const R = /* @__PURE__ */ new Map();
         for (const d of e)
-          d.data.length > 0 && x.set(d.label, d.data[d.data.length - 1]);
-        if (tt(x.size > 0 ? x : void 0), a || T)
-          E(null);
-        else if (b[0] && n) {
-          const h = t.timeScale().timeToCoordinate(n), m = e[0];
-          if (m.data.length > 0) {
-            const u = m.data[m.data.length - 1].value, F = b[0].priceToCoordinate(u);
-            h !== null && F !== null && E({ x: h, y: F });
+          d.data.length > 0 && R.set(d.label, d.data[d.data.length - 1]);
+        if (U(R.size > 0 ? R : void 0), a || y)
+          I(null);
+        else if (g[0] && r) {
+          const x = t.timeScale().timeToCoordinate(r), b = e[0];
+          if (b.data.length > 0) {
+            const p = b.data[b.data.length - 1].value, T = g[0].priceToCoordinate(p);
+            x !== null && T !== null && I({ x, y: T });
           }
         }
         return;
       }
-      const N = /* @__PURE__ */ new Map();
-      let v;
-      for (let x = 0; x < e.length; x++) {
-        const d = e[x], h = b[x];
-        if (!h) continue;
-        const m = g?.get(h), u = m && "value" in m ? m.value : void 0, F = d.data[d.data.length - 1], M = u !== void 0 ? u : F?.value ?? 0;
-        x === 0 && (v = M), N.set(d.label, { value: M, time: c });
+      const P = /* @__PURE__ */ new Map();
+      let L;
+      for (let R = 0; R < e.length; R++) {
+        const d = e[R], x = g[R];
+        if (!x) continue;
+        const b = u?.get(x), p = b && "value" in b ? b.value : void 0, T = d.data[d.data.length - 1], F = p !== void 0 ? p : T?.value ?? 0;
+        R === 0 && (L = F), P.set(d.label, { value: F, time: c });
       }
-      if (tt(N), v !== void 0 && b[0]) {
-        const d = t.timeScale().timeToCoordinate(c), h = b[0].priceToCoordinate(v);
-        if (d !== null && h !== null) {
-          const m = I.current;
-          if (m) {
-            const u = m.querySelector(
+      if (U(P), L !== void 0 && g[0]) {
+        const d = t.timeScale().timeToCoordinate(c), x = g[0].priceToCoordinate(L);
+        if (d !== null && x !== null) {
+          const b = $.current;
+          if (b) {
+            const p = b.querySelector(
               ".LightweightChart"
             );
-            if (u) {
-              const F = u.getBoundingClientRect(), M = m.getBoundingClientRect(), ot = d + (F.left - M.left), nt = h + (F.top - M.top);
-              E({ x: ot, y: nt });
+            if (p) {
+              const T = p.getBoundingClientRect(), F = b.getBoundingClientRect(), tt = d + (T.left - F.left), et = x + (T.top - F.top);
+              I({ x: tt, y: et });
             } else
-              E({ x: d, y: h });
+              I({ x: d, y: x });
           } else
-            E({ x: d, y: h });
+            I({ x: d, y: x });
         } else
-          E(null);
+          I(null);
       } else
-        E(null);
+        I(null);
     };
-    return t.subscribeCrosshairMove(i), V && t.subscribeClick(i), !a && !T && requestAnimationFrame(() => {
-      const l = Array.from(y.current.values());
-      if (l[0] && n && e[0]?.data.length > 0) {
-        const g = t.timeScale().timeToCoordinate(n), L = e[0].data[e[0].data.length - 1].value, b = l[0].priceToCoordinate(L);
-        g !== null && b !== null && E({ x: g, y: b });
+    return t.subscribeCrosshairMove(l), V && t.subscribeClick(l), !a && !y && requestAnimationFrame(() => {
+      const s = Array.from(w.current.values());
+      if (s[0] && r && e[0]?.data.length > 0) {
+        const u = t.timeScale().timeToCoordinate(r), N = e[0].data[e[0].data.length - 1].value, g = s[0].priceToCoordinate(N);
+        u !== null && g !== null && I({ x: u, y: g });
       }
     }), () => {
-      t.unsubscribeCrosshairMove(i), V && t.unsubscribeClick(i);
+      t.unsubscribeCrosshairMove(l), V && t.unsubscribeClick(l);
     };
-  }, [e, T, V]), $(() => {
+  }, [e, y, V]), D(() => {
     const t = k.current;
     if (!t || e.length === 0) return;
-    const a = t.timeScale(), n = Math.max(...e.map((l) => l.data.length)), i = () => {
-      if (n === 0) return;
-      const l = a.getVisibleLogicalRange();
+    const a = t.timeScale(), r = () => {
+      if (!J.current) return;
+      const l = a.getVisibleRange();
       if (!l) return;
-      const c = {
-        from: 0,
-        to: n - 1
-      }, g = typeof l.from == "number" ? l.from : 0, L = typeof l.to == "number" ? l.to : n - 1;
-      if (Q.current) {
-        const x = Math.max(0, Math.floor(g)), d = Math.min(n - 1, Math.ceil(L)), h = [];
-        for (const m of e)
-          for (let u = x; u <= d && u < m.data.length; u++)
-            h.push(m.data[u].value);
-        h.length > 0 && Q.current(h);
-      }
-      const b = 0.01;
-      let N = !1;
-      const v = { ...l };
-      g < c.from - b && (v.from = c.from, N = !0), L > c.to + b && (v.to = c.to, N = !0), N && a.setVisibleLogicalRange(v);
+      const s = Number(l.from), c = Number(l.to), u = [];
+      for (const N of e)
+        for (const g of N.data) {
+          const P = Number(g.time);
+          P >= s && P <= c && u.push(g.value);
+        }
+      u.length > 0 && J.current(u);
     };
-    return a.subscribeVisibleLogicalRangeChange(i), () => {
+    return a.subscribeVisibleLogicalRangeChange(r), () => {
       a.unsubscribeVisibleLogicalRangeChange(
-        i
+        r
       );
     };
-  }, [e]), $(() => {
-    const t = k.current, a = Array.from(y.current.values()), n = [];
-    if (t && a.length > 0 && R) {
-      const i = Wt(), l = a[0];
-      for (const c of R) {
-        const g = new qt(t, l, c.xCoordinate, {
-          ...i,
+  }, [e]), D(() => {
+    const t = k.current, a = Array.from(w.current.values()), r = [];
+    if (t && a.length > 0 && C) {
+      const l = Gt(), s = a[0];
+      for (const c of C) {
+        const u = new Ht(t, s, c.xCoordinate, {
+          ...l,
           ...c.options || {}
         });
-        l.attachPrimitive(g), n.push(g);
+        s.attachPrimitive(u), r.push(u);
       }
     }
     return () => {
       if (a.length > 0) {
-        const i = a[0];
-        for (const l of n)
-          i.detachPrimitive(l);
+        const l = a[0];
+        for (const s of r)
+          l.detachPrimitive(s);
       }
     };
-  }, [R]), $(() => {
+  }, [C]), D(() => {
     const t = k.current;
-    if (!t || !R?.length) {
-      vt([]);
+    if (!t || !C?.length) {
+      ht([]);
       return;
     }
     const a = () => {
-      const l = t.timeScale(), c = R.map((g) => l.timeToCoordinate(g.xCoordinate) ?? null);
-      vt(c);
+      const s = t.timeScale(), c = C.map((u) => s.timeToCoordinate(u.xCoordinate) ?? null);
+      ht(c);
     };
     a();
-    const n = t.timeScale(), i = () => {
+    const r = t.timeScale(), l = () => {
       a();
     };
-    return n.subscribeVisibleLogicalRangeChange(i), () => {
-      n.unsubscribeVisibleLogicalRangeChange(i);
+    return r.subscribeVisibleLogicalRangeChange(l), () => {
+      r.unsubscribeVisibleLogicalRangeChange(l);
     };
-  }, [R]);
-  const Y = e.length === 1, xt = ct.useMemo(() => {
-    if (Y && e.length > 0) {
+  }, [C]);
+  const W = e.length === 1, pt = at.useMemo(() => {
+    if (W && e.length > 0) {
       const t = e[0];
       if (t.data.length > 0)
         return t.data[t.data.length - 1];
     }
-  }, [Y, e]);
+  }, [W, e]);
   return /* @__PURE__ */ j(
     "div",
     {
-      ref: I,
-      className: dt(
+      ref: $,
+      className: ct(
         "relative z-[1] w-full h-full overflow-hidden p-0",
-        S
+        v
       ),
       children: [
-        Z != null && Z !== !1 && Y ? /* @__PURE__ */ p("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ p("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: Z }) }) : Pt && Y && xt && /* @__PURE__ */ p(
-          Xt,
-          {
-            point: xt,
-            xMeasureUnit: f,
-            yMeasureUnit: w,
-            decimals: H
-          }
-        ),
-        W && et && /* @__PURE__ */ p(
-          Lt,
+        Z != null && Z !== !1 && W ? /* @__PURE__ */ h("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ h("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: Z }) }) : yt && W && pt && /* @__PURE__ */ h(
+          Ot,
           {
-            points: W,
+            point: pt,
             xMeasureUnit: f,
-            yMeasureUnit: w,
-            series: e,
-            position: et,
-            containerRef: I,
-            decimals: H
+            yMeasureUnit: S,
+            decimals: q
           }
         ),
-        W && !et && !Y && V && /* @__PURE__ */ p(
-          Lt,
+        dt && mt && /* @__PURE__ */ h(
+          Yt,
           {
-            points: W,
+            points: dt,
             xMeasureUnit: f,
-            yMeasureUnit: w,
+            yMeasureUnit: S,
             series: e,
-            containerRef: I,
-            decimals: H,
-            className: "top-2 left-2"
+            position: mt,
+            containerRef: $,
+            decimals: q
           }
         ),
-        C && /* @__PURE__ */ p(Jt, { series: e, onUnselect: A }),
-        R && R.length > 0 && Ct.length === R.length && /* @__PURE__ */ p(
+        m && /* @__PURE__ */ h(_t, { series: e, onUnselect: M }),
+        C && C.length > 0 && bt.length === C.length && /* @__PURE__ */ h(
           "div",
           {
             className: "absolute inset-0 z-[5] pointer-events-none",
             "aria-hidden": !0,
-            children: R.map((t, a) => {
-              const n = Ct[a], i = t.options ?? {}, l = i.showLabel !== !1;
-              if (n === null || !l) return null;
-              const { labelText: c, valueStr: g } = Zt(
-                i,
-                w,
-                H
+            children: C.map((t, a) => {
+              const r = bt[a], l = t.options ?? {}, s = l.showLabel !== !1;
+              if (r === null || !s) return null;
+              const { labelText: c, valueStr: u } = jt(
+                l,
+                S,
+                q
               );
-              if (!(c || g)) return null;
-              const b = i.labelBackgroundColor ?? i.color ?? "hsl(var(--background))", N = i.labelTextColor ?? "hsl(var(--foreground))", v = `${String(t.xCoordinate)}-${c}`;
+              if (!(c || u)) return null;
+              const g = l.labelBackgroundColor ?? l.color ?? "hsl(var(--background))", P = l.labelTextColor ?? "hsl(var(--foreground))", L = `${String(t.xCoordinate)}-${c}`;
               return /* @__PURE__ */ j(
                 "div",
                 {
                   className: "absolute top-2 px-2 py-1 rounded text-xs font-medium whitespace-nowrap shadow-sm border border-border",
                   style: {
-                    left: n,
+                    left: r,
                     transform: "translateX(-50%)",
-                    backgroundColor: b,
-                    color: N
+                    backgroundColor: g,
+                    color: P
                   },
                   children: [
-                    c && /* @__PURE__ */ p("span", { className: "block", children: c }),
-                    g && /* @__PURE__ */ p("span", { className: dt("block", c && "mt-0.5"), children: g })
+                    c && /* @__PURE__ */ h("span", { className: "block", children: c }),
+                    u && /* @__PURE__ */ h("span", { className: ct("block", c && "mt-0.5"), children: u })
                   ]
                 },
-                v
+                L
               );
             })
           }
         ),
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ h(
           "div",
           {
-            ref: U,
+            ref: Q,
             className: "LightweightChart w-full h-full overflow-hidden"
           }
         )
@@ -622,40 +604,40 @@ function ge({
     }
   );
 }
-function Jt({
+function _t({
   series: e,
-  onUnselect: S
+  onUnselect: v
 }) {
-  return /* @__PURE__ */ p("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: e.map((C, A) => {
-    const f = Nt(A), w = (C.lineColor ?? C.color) || f.line, B = C.data.length === 0;
+  return /* @__PURE__ */ h("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: e.map((m, M) => {
+    const f = Vt(M), S = (m.lineColor ?? m.color) || f.line, Y = m.data.length === 0;
     return /* @__PURE__ */ j(
       "div",
       {
-        className: dt(
+        className: ct(
           "flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
-          B && "opacity-50"
+          Y && "opacity-50"
         ),
         children: [
-          /* @__PURE__ */ p(
+          /* @__PURE__ */ h(
             "div",
             {
               className: "w-3 h-3 rounded-sm",
-              style: { backgroundColor: w }
+              style: { backgroundColor: S }
             }
           ),
           /* @__PURE__ */ j("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
-            C.label,
-            B && " (no data)"
+            m.label,
+            Y && " (no data)"
           ] }),
-          S && /* @__PURE__ */ p(
+          v && /* @__PURE__ */ h(
             "button",
             {
               type: "button",
-              onClick: (R) => {
-                R.stopPropagation(), S(C.label);
+              onClick: (C) => {
+                C.stopPropagation(), v(m.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 ${m.label}`,
               children: /* @__PURE__ */ j(
                 "svg",
                 {
@@ -671,9 +653,9 @@ function Jt({
                   className: "text-muted-foreground hover:text-foreground",
                   "aria-hidden": "true",
                   children: [
-                    /* @__PURE__ */ p("title", { children: "Close" }),
-                    /* @__PURE__ */ p("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                    /* @__PURE__ */ p("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    /* @__PURE__ */ h("title", { children: "Close" }),
+                    /* @__PURE__ */ h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                    /* @__PURE__ */ h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                   ]
                 }
               )
@@ -681,13 +663,13 @@ function Jt({
           )
         ]
       },
-      C.label
+      m.label
     );
   }) });
 }
 export {
-  gt as DEFAULT_SERIES_COLORS,
-  ge as Graph,
-  Nt as getSeriesColorPalette,
-  Zt as getVerticalLineTooltipContent
+  st as DEFAULT_SERIES_COLORS,
+  ie as Graph,
+  Vt as getSeriesColorPalette,
+  jt as getVerticalLineTooltipContent
 };