@gearbox-protocol/permissionless-ui 1.26.2 → 1.26.3

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

@@ -1,225 +1,250 @@
-import { jsxs as Y, jsx as p } from "react/jsx-runtime";
-import { createChart as $t } from "lightweight-charts";
-import * as it from "react";
-import { useRef as T, useState as st, useEffect as E } from "react";
-import { useIsMobile as Dt } from "../../hooks/use-media-query.js";
-import { cn as ft } from "../../utils/cn.js";
-import { resolveCSSColor as Vt, generateColorsFromBase as _, hslToHex as Gt } from "../../utils/colors.js";
-import { getDefaultOptions as yt, getDefaultSeries as Ot, getDefaultVerticalLine as Bt } from "./default-config.js";
-import { getXFormatter as Lt, createAdaptiveYAxisFormatter as Yt, formatExactValue as ct } from "./formatters.js";
-import { GraphCurrentValue as jt } from "./graph-current-value.js";
-import { GraphTooltip as Ht } from "./graph-tooltip.js";
-import { VertLine as Wt } from "./plugins/vertical-line.js";
-function _t(t, x, b) {
-  const A = t.labelText ?? "", m = t.value, R = m === void 0 ? "" : typeof m == "number" ? x === "$" ? `$${ct(m, void 0, b)}` : x === "%" ? `${ct(m, void 0, b)}%` : ct(
-    m,
-    x !== "none" && x !== "%" && x !== "$" ? x : void 0,
-    b
-  ) : String(m);
-  return { labelText: A, valueStr: R };
+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(
+    f,
+    S !== "none" && S !== "%" && S !== "$" ? S : void 0,
+    C
+  ) : String(f);
+  return { labelText: A, valueStr: w };
 }
-const ut = [
+const gt = [
+  // 0  green (emerald)
   {
     line: "#02c39a",
     top: "rgba(2, 195, 154, 0.56)",
     bottom: "rgba(2, 195, 154, 0.04)"
   },
+  // 1  blue
   {
     line: "#3b82f6",
     top: "rgba(59, 130, 246, 0.56)",
     bottom: "rgba(59, 130, 246, 0.04)"
   },
+  // 2  red
   {
     line: "#ef4444",
     top: "rgba(239, 68, 68, 0.56)",
     bottom: "rgba(239, 68, 68, 0.04)"
   },
+  // 3  amber
   {
     line: "#f59e0b",
     top: "rgba(245, 158, 11, 0.56)",
     bottom: "rgba(245, 158, 11, 0.04)"
   },
+  // 4  violet
   {
     line: "#8b5cf6",
     top: "rgba(139, 92, 246, 0.56)",
     bottom: "rgba(139, 92, 246, 0.04)"
   },
+  // 5  pink
   {
     line: "#ec4899",
     top: "rgba(236, 72, 153, 0.56)",
     bottom: "rgba(236, 72, 153, 0.04)"
   },
+  // 6  cyan
   {
     line: "#06b6d4",
     top: "rgba(6, 182, 212, 0.56)",
     bottom: "rgba(6, 182, 212, 0.04)"
   },
+  // 7  orange
   {
-    line: "#0ea5e9",
-    top: "rgba(14, 165, 233, 0.56)",
-    bottom: "rgba(14, 165, 233, 0.04)"
+    line: "#ea580c",
+    top: "rgba(234, 88, 12, 0.56)",
+    bottom: "rgba(234, 88, 12, 0.04)"
   },
+  // 8  lime
   {
-    line: "#6366f1",
-    top: "rgba(99, 102, 241, 0.56)",
-    bottom: "rgba(99, 102, 241, 0.04)"
+    line: "#84cc16",
+    top: "rgba(132, 204, 22, 0.56)",
+    bottom: "rgba(132, 204, 22, 0.04)"
   },
+  // 9  fuchsia
   {
     line: "#d946ef",
     top: "rgba(217, 70, 239, 0.56)",
     bottom: "rgba(217, 70, 239, 0.04)"
   },
+  // 10 sky
   {
-    line: "#10b981",
-    top: "rgba(16, 185, 129, 0.56)",
-    bottom: "rgba(16, 185, 129, 0.04)"
-  },
-  {
-    line: "#ea580c",
-    top: "rgba(234, 88, 12, 0.56)",
-    bottom: "rgba(234, 88, 12, 0.04)"
-  },
-  {
-    line: "#84cc16",
-    top: "rgba(132, 204, 22, 0.56)",
-    bottom: "rgba(132, 204, 22, 0.04)"
+    line: "#0ea5e9",
+    top: "rgba(14, 165, 233, 0.56)",
+    bottom: "rgba(14, 165, 233, 0.04)"
   },
+  // 11 teal
   {
-    line: "#0d9488",
-    top: "rgba(13, 148, 136, 0.56)",
-    bottom: "rgba(13, 148, 136, 0.04)"
+    line: "#14b8a6",
+    top: "rgba(20, 184, 166, 0.56)",
+    bottom: "rgba(20, 184, 166, 0.04)"
   },
+  // 12 yellow
   {
     line: "#eab308",
     top: "rgba(234, 179, 8, 0.56)",
     bottom: "rgba(234, 179, 8, 0.04)"
   },
+  // 13 rose
   {
     line: "#f43f5e",
     top: "rgba(244, 63, 94, 0.56)",
     bottom: "rgba(244, 63, 94, 0.04)"
   },
+  // 14 indigo
+  {
+    line: "#6366f1",
+    top: "rgba(99, 102, 241, 0.56)",
+    bottom: "rgba(99, 102, 241, 0.04)"
+  },
+  // 15 emerald
+  {
+    line: "#10b981",
+    top: "rgba(16, 185, 129, 0.56)",
+    bottom: "rgba(16, 185, 129, 0.04)"
+  },
+  // 16 warm-gray
   {
-    line: "#d97706",
-    top: "rgba(217, 119, 6, 0.56)",
-    bottom: "rgba(217, 119, 6, 0.04)"
+    line: "#78716c",
+    top: "rgba(120, 113, 108, 0.56)",
+    bottom: "rgba(120, 113, 108, 0.04)"
   },
+  // 17 slate
   {
     line: "#64748b",
     top: "rgba(100, 116, 139, 0.56)",
     bottom: "rgba(100, 116, 139, 0.04)"
   },
+  // 18 dark-slate
   {
     line: "#475569",
     top: "rgba(71, 85, 105, 0.56)",
     bottom: "rgba(71, 85, 105, 0.04)"
   }
-], Xt = 137.5;
-function Nt(t) {
-  if (t < ut.length)
-    return ut[t];
-  const b = (t - ut.length) * Xt % 360, A = Gt(b, 70, 50), { topColor: m, bottomColor: R } = _(A);
-  return { line: A, top: m, bottom: R };
+], 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 };
 }
-function ce({
-  series: t,
-  className: x,
-  showLegend: b = !1,
+function ge({
+  series: e,
+  className: S,
+  showLegend: C = !1,
   onUnselectSeries: A,
-  xMeasureUnit: m = "time",
-  yMeasureUnit: R = "token",
+  xMeasureUnit: f = "time",
+  yMeasureUnit: w = "token",
   optionsOverrides: B,
-  verticalLineOptions: S,
-  currentValueDecimals: X,
-  useSharedPriceScale: k = !1,
+  verticalLineOptions: R,
+  currentValueDecimals: H,
+  useSharedPriceScale: T = !1,
   showCurrentValue: Pt = !0,
-  graphTitle: q,
-  yScaleMin: dt,
-  yScaleMinMultiple: gt
+  graphTitle: Z,
+  yScaleMin: mt,
+  yScaleMinMultiple: bt
 }) {
-  const N = T(null), V = T(/* @__PURE__ */ new Map()), Z = T(!1), K = T(/* @__PURE__ */ new Set()), mt = T(0), bt = T(!0), J = T(
+  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(
     null
-  ), Tt = T(null), F = T(null), Q = T(null), $ = Dt(), M = it.useMemo(() => t.flatMap((e) => e.data), [t]), kt = it.useMemo(() => {
-    if (t.length > 0) {
-      const e = t[t.length - 1];
-      if (e.data.length > 0)
-        return e.data[e.data.length - 1];
+  ), Tt = P(null), I = P(null), U = P(null), V = Yt(), z = ct.useMemo(() => e.flatMap((t) => t.data), [e]), Ft = ct.useMemo(() => {
+    if (e.length > 0) {
+      const t = e[e.length - 1];
+      if (t.data.length > 0)
+        return t.data[t.data.length - 1];
     }
-  }, [t]), [ht, U] = st(() => {
-    if (!kt) return;
-    const e = /* @__PURE__ */ new Map();
-    for (const a of t)
-      a.data.length > 0 && e.set(a.label, a.data[a.data.length - 1]);
-    return e;
-  }), [pt, I] = st(null), [Ct, vt] = st([]);
-  E(() => {
-    const e = () => {
-      if (N.current && F.current) {
-        const i = F.current.clientWidth, l = F.current.clientHeight;
-        N.current.resize(i, l), N.current.timeScale().fitContent();
+  }, [e]), [W, tt] = ut(() => {
+    if (!Ft) 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([]);
+  $(() => {
+    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();
       }
-    }, a = F.current, n = a ? new ResizeObserver(e) : null;
+    }, a = I.current, n = a ? new ResizeObserver(t) : null;
     return a && n?.observe(a), () => {
       a && n?.unobserve(a);
     };
-  }, []), E(() => {
-    if (!Q.current || Z.current) return;
-    const e = yt(), a = Vt(
+  }, []), $(() => {
+    if (!U.current || K.current) return;
+    const t = yt(), a = Vt(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
-    ), n = $t(Q.current, {
-      ...e,
+    ), n = Gt(U.current, {
+      ...t,
       rightPriceScale: {
-        ...e.rightPriceScale || {},
-        visible: !$,
+        ...t.rightPriceScale || {},
+        visible: !V,
         textColor: a
       },
+      ...V && {
+        crosshair: {
+          ...t.crosshair,
+          mode: Ot.Magnet
+        }
+      },
       ...B
     });
-    return N.current = n, Z.current = !0, () => {
-      n.remove(), N.current = null, Z.current = !1, V.current.clear();
+    return k.current = n, K.current = !0, () => {
+      n.remove(), k.current = null, K.current = !1, y.current.clear();
     };
-  }, [$, B]), E(() => {
-    const e = N.current;
-    if (!e || t.length === 0) return;
-    const n = t.filter((o) => o.data.length > 0).length <= 1 ? dt : gt, i = m === "time" ? Lt(m, M) : Lt(m), l = M.map((o) => o.value), {
+  }, [V, B]), $(() => {
+    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), {
       formatter: c,
-      updateVisibleRange: f,
-      updateLastValues: y
-    } = Yt(l, R, {
+      tickmarksFormatter: g,
+      updateVisibleRange: L,
+      updateLastValues: b
+    } = _t(l, w, {
       yScaleMin: n
     });
-    J.current = f, Tt.current = y;
-    const h = t.filter((o) => o.data.length > 0).map((o) => o.data[o.data.length - 1].value);
-    y(h);
-    const w = yt();
-    e.applyOptions({
+    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();
+    t.applyOptions({
       localization: {
-        ...w.localization || {},
-        timeFormatter: i ? (
+        ...v.localization || {},
+        // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
+        timeFormatter: (o) => (
           // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-          ((o) => i(parseFloat(o), void 0))
-        ) : void 0
+          i.timeFormatter(parseFloat(o), void 0)
+        )
       },
       timeScale: {
-        ...w.timeScale || {},
-        tickMarkFormatter: i ? (
-          // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-          ((o) => i(parseFloat(o), void 0))
-        ) : void 0,
+        ...v.timeScale || {},
+        // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
+        tickMarkFormatter: i.tickMarkFormatter,
         minBarSpacing: 0
       }
     });
-    const C = (M.length > 0 ? Math.min(...M.map((o) => o.value)) : 0) < 0, d = M.some((o) => o.value === 0), g = !C && d, u = t.length > 1 && !k, v = t.length > 1 && !k || $, L = Vt(
+    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(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
     );
-    e.applyOptions({
+    t.applyOptions({
       rightPriceScale: {
-        ...w.rightPriceScale || {},
-        visible: !v,
-        textColor: L,
-        ...g && {
+        ...v.rightPriceScale || {},
+        visible: !F,
+        textColor: M,
+        ...m && {
           scaleMargins: {
             top: 0.3,
             bottom: 0
@@ -227,83 +252,85 @@ function ce({
         }
       }
     });
-    const z = new Set(V.current.keys()), tt = new Set(t.map((o) => o.label));
-    for (const o of z)
-      if (!tt.has(o)) {
-        const r = V.current.get(o);
-        r && (e.removeSeries(r), V.current.delete(o));
+    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 et = Ot(), ot = [];
-    let H = 0;
-    for (let o = 0; o < t.length; o++) {
-      const r = t[o], at = Nt(o), W = r.lineColor ?? r.color ?? at.line;
+    const Mt = Ht(), rt = [];
+    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 = _(W);
+          const s = q(X);
           D = r.topColor, G = s.bottomColor;
         } else if (r.bottomColor)
-          D = _(W).topColor, G = r.bottomColor;
+          D = q(X).topColor, G = r.bottomColor;
         else {
-          const s = _(W);
+          const s = q(X);
           D = s.topColor, G = s.bottomColor;
         }
       else
-        D = r.topColor || at.top, G = r.bottomColor || at.bottom;
+        D = r.topColor || it.top, G = r.bottomColor || it.bottom;
       if (r.data.length === 0) {
-        const s = V.current.get(r.label);
-        s && (e.removeSeries(s), V.current.delete(r.label));
+        const s = y.current.get(r.label);
+        s && (t.removeSeries(s), y.current.delete(r.label));
         continue;
       }
-      const It = (r.data.length > 0 ? Math.min(...r.data.map((s) => s.value)) : 0) < 0, Ft = r.data.some((s) => s.value === 0), zt = !It && Ft, St = k || !u || H === 0 ? "right" : `scale-${H}`;
-      u && ot.push({
+      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: zt,
-        seriesIndex: H
+        shouldPreventNegativeAxis: $t,
+        seriesIndex: _
       });
-      const wt = (k || !u) && n !== void 0 && typeof n == "number", Rt = {
-        lineColor: W,
+      const wt = (T || !u) && n !== void 0 && typeof n == "number", Rt = {
+        lineColor: X,
         topColor: D,
         bottomColor: G,
         priceScaleId: St,
         priceFormat: {
           type: "custom",
+          minMove: 0.01,
           formatter: wt && typeof n == "number" ? (s) => c(
             s < n ? n : s
-          ) : c
+          ) : c,
+          tickmarksFormatter: g
         },
         autoscaleInfoProvider: (s) => {
           if (!wt) return s();
-          const lt = s();
-          if (lt?.priceRange) {
-            const Et = n;
-            lt.priceRange.minValue = Et;
+          const st = s();
+          if (st?.priceRange) {
+            const Dt = n;
+            st.priceRange.minValue = Dt;
           }
-          return lt;
+          return st;
         }
       };
-      let O = V.current.get(r.label);
+      let O = y.current.get(r.label);
       O ? (O.applyOptions(Rt), O.setData(
         r.data.map((s) => ({
           ...s,
           time: s.time
         }))
-      )) : (O = e.addAreaSeries({
-        ...et,
+      )) : (O = t.addSeries(Bt, {
+        ...Mt,
         ...Rt
       }), O.setData(
         r.data.map((s) => ({
           ...s,
           time: s.time
         }))
-      ), V.current.set(r.label, O)), H++;
+      ), y.current.set(r.label, O)), _++;
     }
-    if (u && ot.length > 0)
-      for (const o of ot)
+    if (u && rt.length > 0)
+      for (const o of rt)
         try {
-          const r = e.priceScale(o.priceScaleId);
+          const r = t.priceScale(o.priceScaleId);
           r && r.applyOptions({
             visible: !1,
             autoScale: !0,
@@ -319,7 +346,7 @@ function ce({
             borderVisible: !0,
             borderColor: "rgba(224, 227, 235, 0.1)",
             entireTextOnly: !1,
-            textColor: L
+            textColor: M
           });
         } catch (r) {
           console.warn(
@@ -329,15 +356,15 @@ function ce({
         }
     else if (!u)
       try {
-        const o = e.priceScale("right");
+        const o = t.priceScale("right");
         o && o.applyOptions({
-          visible: !$,
+          visible: !V,
           autoScale: !0,
           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 || g ? 0 : 0.1,
-            ...g && {
+            bottom: n !== void 0 || m ? 0 : 0.1,
+            ...m && {
               top: 0.3
             }
           },
@@ -345,133 +372,133 @@ function ce({
           borderVisible: !0,
           borderColor: "rgba(224, 227, 235, 0.1)",
           entireTextOnly: !1,
-          textColor: L
+          textColor: M
         });
       } catch {
       }
-    n !== void 0 && (k || !u) && e.applyOptions({
+    n !== void 0 && !V && (T || !u) && t.applyOptions({
       handleScroll: {
         vertTouchDrag: !1
       }
     });
-    const nt = new Set(t.map((o) => o.label)), At = nt.size !== K.current.size || [...nt].some((o) => !K.current.has(o)), Mt = M.length !== mt.current;
-    (bt.current || At || Mt || $) && (e.timeScale().fitContent(), bt.current = !1), K.current = nt, mt.current = M.length;
-    const rt = /* @__PURE__ */ new Map();
-    for (const o of t)
-      o.data.length > 0 && rt.set(o.label, o.data[o.data.length - 1]);
-    U(rt.size > 0 ? rt : void 0);
+    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();
+    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);
   }, [
-    t,
-    M,
-    m,
-    R,
-    $,
-    k,
-    dt,
-    gt
-  ]), E(() => {
-    const e = N.current;
-    if (!e || t.length === 0) return;
-    const a = t.length === 1;
+    e,
+    z,
+    f,
+    w,
+    V,
+    T,
+    mt,
+    bt
+  ]), $(() => {
+    const t = k.current;
+    if (!t || e.length === 0) return;
+    const a = e.length === 1;
     let n;
-    for (const l of t)
+    for (const l of e)
       if (l.data.length > 0) {
         n = l.data[l.data.length - 1].time;
         break;
       }
     if (!n) return;
     const i = (l) => {
-      const { time: c = n, seriesData: f, point: y } = l || {}, h = Array.from(V.current.values());
-      if (!y || !c) {
-        const C = /* @__PURE__ */ new Map();
-        for (const d of t)
-          d.data.length > 0 && C.set(d.label, d.data[d.data.length - 1]);
-        if (U(C.size > 0 ? C : void 0), a || k)
-          I(null);
-        else if (h[0] && n) {
-          const g = e.timeScale().timeToCoordinate(n), u = t[0];
-          if (u.data.length > 0) {
-            const v = u.data[u.data.length - 1].value, L = h[0].priceToCoordinate(v);
-            g !== null && L !== null && I({ x: g, y: L });
+      const { time: c = n, seriesData: g, point: L } = l || {}, b = Array.from(y.current.values());
+      if (!L || !c) {
+        const x = /* @__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 });
           }
         }
         return;
       }
-      const w = /* @__PURE__ */ new Map();
-      let P;
-      for (let C = 0; C < t.length; C++) {
-        const d = t[C], g = h[C];
-        if (!g) continue;
-        const u = f?.get(g), v = u && "value" in u ? u.value : void 0, L = d.data[d.data.length - 1], z = v !== void 0 ? v : L?.value ?? 0;
-        C === 0 && (P = z), w.set(d.label, { value: z, time: c });
+      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 });
       }
-      if (U(w), P !== void 0 && h[0]) {
-        const d = e.timeScale().timeToCoordinate(c), g = h[0].priceToCoordinate(P);
-        if (d !== null && g !== null) {
-          const u = F.current;
-          if (u) {
-            const v = u.querySelector(
+      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(
               ".LightweightChart"
             );
-            if (v) {
-              const L = v.getBoundingClientRect(), z = u.getBoundingClientRect(), tt = d + (L.left - z.left), et = g + (L.top - z.top);
-              I({ x: tt, y: et });
+            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 });
             } else
-              I({ x: d, y: g });
+              E({ x: d, y: h });
           } else
-            I({ x: d, y: g });
+            E({ x: d, y: h });
         } else
-          I(null);
+          E(null);
       } else
-        I(null);
+        E(null);
     };
-    return e.subscribeCrosshairMove(i), !a && !k && requestAnimationFrame(() => {
-      const l = Array.from(V.current.values());
-      if (l[0] && n && t[0]?.data.length > 0) {
-        const f = e.timeScale().timeToCoordinate(n), y = t[0].data[t[0].data.length - 1].value, h = l[0].priceToCoordinate(y);
-        f !== null && h !== null && I({ x: f, y: h });
+    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 });
       }
     }), () => {
-      e.unsubscribeCrosshairMove(i);
+      t.unsubscribeCrosshairMove(i), V && t.unsubscribeClick(i);
     };
-  }, [t, k]), E(() => {
-    const e = N.current;
-    if (!e || t.length === 0) return;
-    const a = e.timeScale(), n = Math.max(...t.map((l) => l.data.length)), i = () => {
+  }, [e, T, V]), $(() => {
+    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();
       if (!l) return;
       const c = {
         from: 0,
         to: n - 1
-      }, f = typeof l.from == "number" ? l.from : 0, y = typeof l.to == "number" ? l.to : n - 1;
-      if (J.current) {
-        const C = Math.max(0, Math.floor(f)), d = Math.min(n - 1, Math.ceil(y)), g = [];
-        for (const u of t)
-          for (let v = C; v <= d && v < u.data.length; v++)
-            g.push(u.data[v].value);
-        g.length > 0 && J.current(g);
+      }, 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 h = 0.01;
-      let w = !1;
-      const P = { ...l };
-      f < c.from - h && (P.from = c.from, w = !0), y > c.to + h && (P.to = c.to, w = !0), w && a.setVisibleLogicalRange(P);
+      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);
     };
     return a.subscribeVisibleLogicalRangeChange(i), () => {
       a.unsubscribeVisibleLogicalRangeChange(
         i
       );
     };
-  }, [t]), E(() => {
-    const e = N.current, a = Array.from(V.current.values()), n = [];
-    if (e && a.length > 0 && S) {
-      const i = Bt(), l = a[0];
-      for (const c of S) {
-        const f = new Wt(e, l, c.xCoordinate, {
+  }, [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,
           ...c.options || {}
         });
-        l.attachPrimitive(f), n.push(f);
+        l.attachPrimitive(g), n.push(g);
       }
     }
     return () => {
@@ -481,93 +508,105 @@ function ce({
           i.detachPrimitive(l);
       }
     };
-  }, [S]), E(() => {
-    const e = N.current;
-    if (!e || !S?.length) {
+  }, [R]), $(() => {
+    const t = k.current;
+    if (!t || !R?.length) {
       vt([]);
       return;
     }
     const a = () => {
-      const l = e.timeScale(), c = S.map((f) => l.timeToCoordinate(f.xCoordinate) ?? null);
+      const l = t.timeScale(), c = R.map((g) => l.timeToCoordinate(g.xCoordinate) ?? null);
       vt(c);
     };
     a();
-    const n = e.timeScale(), i = () => {
+    const n = t.timeScale(), i = () => {
       a();
     };
     return n.subscribeVisibleLogicalRangeChange(i), () => {
       n.unsubscribeVisibleLogicalRangeChange(i);
     };
-  }, [S]);
-  const j = t.length === 1, xt = it.useMemo(() => {
-    if (j && t.length > 0) {
-      const e = t[0];
-      if (e.data.length > 0)
-        return e.data[e.data.length - 1];
+  }, [R]);
+  const Y = e.length === 1, xt = ct.useMemo(() => {
+    if (Y && e.length > 0) {
+      const t = e[0];
+      if (t.data.length > 0)
+        return t.data[t.data.length - 1];
     }
-  }, [j, t]);
-  return /* @__PURE__ */ Y(
+  }, [Y, e]);
+  return /* @__PURE__ */ j(
     "div",
     {
-      ref: F,
-      className: ft(
+      ref: I,
+      className: dt(
         "relative z-[1] w-full h-full overflow-hidden p-0",
-        x
+        S
       ),
       children: [
-        q != null && q !== !1 && j ? /* @__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: q }) }) : Pt && j && xt && /* @__PURE__ */ p(
-          jt,
+        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: m,
-            yMeasureUnit: R,
-            decimals: X
+            xMeasureUnit: f,
+            yMeasureUnit: w,
+            decimals: H
+          }
+        ),
+        W && et && /* @__PURE__ */ p(
+          Lt,
+          {
+            points: W,
+            xMeasureUnit: f,
+            yMeasureUnit: w,
+            series: e,
+            position: et,
+            containerRef: I,
+            decimals: H
           }
         ),
-        ht && pt && /* @__PURE__ */ p(
-          Ht,
+        W && !et && !Y && V && /* @__PURE__ */ p(
+          Lt,
           {
-            points: ht,
-            xMeasureUnit: m,
-            yMeasureUnit: R,
-            series: t,
-            position: pt,
-            containerRef: F,
-            decimals: X
+            points: W,
+            xMeasureUnit: f,
+            yMeasureUnit: w,
+            series: e,
+            containerRef: I,
+            decimals: H,
+            className: "top-2 left-2"
           }
         ),
-        b && /* @__PURE__ */ p(qt, { series: t, onUnselect: A }),
-        S && S.length > 0 && Ct.length === S.length && /* @__PURE__ */ p(
+        C && /* @__PURE__ */ p(Jt, { series: e, onUnselect: A }),
+        R && R.length > 0 && Ct.length === R.length && /* @__PURE__ */ p(
           "div",
           {
             className: "absolute inset-0 z-[5] pointer-events-none",
             "aria-hidden": !0,
-            children: S.map((e, a) => {
-              const n = Ct[a], i = e.options ?? {}, l = i.showLabel !== !1;
+            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: f } = _t(
+              const { labelText: c, valueStr: g } = Zt(
                 i,
-                R,
-                X
+                w,
+                H
               );
-              if (!(c || f)) return null;
-              const h = i.labelBackgroundColor ?? i.color ?? "hsl(var(--background))", w = i.labelTextColor ?? "hsl(var(--foreground))", P = `${String(e.xCoordinate)}-${c}`;
-              return /* @__PURE__ */ Y(
+              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}`;
+              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,
                     transform: "translateX(-50%)",
-                    backgroundColor: h,
-                    color: w
+                    backgroundColor: b,
+                    color: N
                   },
                   children: [
                     c && /* @__PURE__ */ p("span", { className: "block", children: c }),
-                    f && /* @__PURE__ */ p("span", { className: ft("block", c && "mt-0.5"), children: f })
+                    g && /* @__PURE__ */ p("span", { className: dt("block", c && "mt-0.5"), children: g })
                   ]
                 },
-                P
+                v
               );
             })
           }
@@ -575,7 +614,7 @@ function ce({
         /* @__PURE__ */ p(
           "div",
           {
-            ref: Q,
+            ref: U,
             className: "LightweightChart w-full h-full overflow-hidden"
           }
         )
@@ -583,16 +622,16 @@ function ce({
     }
   );
 }
-function qt({
-  series: t,
-  onUnselect: x
+function Jt({
+  series: e,
+  onUnselect: S
 }) {
-  return /* @__PURE__ */ p("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: t.map((b, A) => {
-    const m = Nt(A), R = (b.lineColor ?? b.color) || m.line, B = b.data.length === 0;
-    return /* @__PURE__ */ Y(
+  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__ */ j(
       "div",
       {
-        className: ft(
+        className: dt(
           "flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
           B && "opacity-50"
         ),
@@ -601,23 +640,23 @@ function qt({
             "div",
             {
               className: "w-3 h-3 rounded-sm",
-              style: { backgroundColor: R }
+              style: { backgroundColor: w }
             }
           ),
-          /* @__PURE__ */ Y("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
-            b.label,
+          /* @__PURE__ */ j("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
+            C.label,
             B && " (no data)"
           ] }),
-          x && /* @__PURE__ */ p(
+          S && /* @__PURE__ */ p(
             "button",
             {
               type: "button",
-              onClick: (S) => {
-                S.stopPropagation(), x(b.label);
+              onClick: (R) => {
+                R.stopPropagation(), S(C.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 ${b.label}`,
-              children: /* @__PURE__ */ Y(
+              "aria-label": `Remove ${C.label}`,
+              children: /* @__PURE__ */ j(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -642,13 +681,13 @@ function qt({
           )
         ]
       },
-      b.label
+      C.label
     );
   }) });
 }
 export {
-  ut as DEFAULT_SERIES_COLORS,
-  ce as Graph,
+  gt as DEFAULT_SERIES_COLORS,
+  ge as Graph,
   Nt as getSeriesColorPalette,
-  _t as getVerticalLineTooltipContent
+  Zt as getVerticalLineTooltipContent
 };