@gearbox-protocol/ui-kit 3.14.0-next.38 → 3.14.0-next.39

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

@@ -1,99 +1,99 @@
 import { jsxs as ne, jsx as w } from "react/jsx-runtime";
-import { createChart as Ue, CrosshairMode as et, LineStyle as ee, LineSeries as tt, AreaSeries as ot } from "lightweight-charts";
-import * as Ce from "react";
-import { useRef as q, useState as ye, useEffect as E } from "react";
-import { useIsMobile as rt } from "../../hooks/use-media-query.js";
+import { createChart as ot, CrosshairMode as rt, LineStyle as ee, LineSeries as nt, AreaSeries as lt } from "lightweight-charts";
+import * as ye from "react";
+import { useRef as Z, useState as ce, useEffect as $ } from "react";
+import { useIsMobile as it } from "../../hooks/use-media-query.js";
 import { cn as le } from "../../utils/cn.js";
-import { resolveCSSColor as U, generateColorsFromBase as ce, hslToHex as nt } from "../../utils/colors.js";
-import { getDefaultOptions as je, getDefaultSeries as lt, getDefaultVerticalLine as it } from "./default-config.js";
-import { getXFormatters as He, formatExactValue as xe, createAdaptiveYAxisFormatter as at } from "./formatters.js";
-import { GraphCurrentValue as st } from "./graph-current-value.js";
-import { GraphTooltip as ct } from "./graph-tooltip.js";
-import { VertLine as ut } from "./plugins/vertical-line.js";
-class ft {
+import { resolveCSSColor as U, generateColorsFromBase as ue, hslToHex as at } from "../../utils/colors.js";
+import { getDefaultOptions as je, getDefaultSeries as st, getDefaultVerticalLine as ct } from "./default-config.js";
+import { getXFormatters as He, formatExactValue as xe, createAdaptiveYAxisFormatter as ut } from "./formatters.js";
+import { GraphCurrentValue as ft } from "./graph-current-value.js";
+import { GraphTooltip as ht } from "./graph-tooltip.js";
+import { VertLine as dt } from "./plugins/vertical-line.js";
+class pt {
   _yTop;
   _yBottom;
   _color;
-  constructor(l, f, c) {
-    this._yTop = l, this._yBottom = f, this._color = c;
+  constructor(n, f, c) {
+    this._yTop = n, this._yBottom = f, this._color = c;
   }
-  draw(l) {
-    l.useBitmapCoordinateSpace((f) => {
-      const c = f.context, d = f.verticalPixelRatio, v = this._yTop === null ? 0 : this._yTop * d, F = this._yBottom === null ? f.bitmapSize.height : this._yBottom * d, x = Math.min(v, F), M = Math.max(v, F);
+  draw(n) {
+    n.useBitmapCoordinateSpace((f) => {
+      const c = f.context, d = f.verticalPixelRatio, v = this._yTop === null ? 0 : this._yTop * d, z = this._yBottom === null ? f.bitmapSize.height : this._yBottom * d, x = Math.min(v, z), M = Math.max(v, z);
       c.fillStyle = this._color, c.fillRect(0, x, f.bitmapSize.width, M - x);
     });
   }
 }
-class ht {
+class mt {
   _source;
   _yTop = null;
   _yBottom = null;
-  constructor(l) {
-    this._source = l;
+  constructor(n) {
+    this._source = n;
   }
   update() {
-    const l = this._source.series;
-    this._yTop = this._source.priceTop === void 0 ? null : l.priceToCoordinate(this._source.priceTop), this._yBottom = this._source.priceBottom === void 0 ? null : l.priceToCoordinate(this._source.priceBottom);
+    const n = this._source.series;
+    this._yTop = this._source.priceTop === void 0 ? null : n.priceToCoordinate(this._source.priceTop), this._yBottom = this._source.priceBottom === void 0 ? null : n.priceToCoordinate(this._source.priceBottom);
   }
   /** Draw beneath the series line/area so the data stays readable. */
   zOrder() {
     return "bottom";
   }
   renderer() {
-    return new ft(this._yTop, this._yBottom, this._source.color);
+    return new pt(this._yTop, this._yBottom, this._source.color);
   }
 }
-class dt {
+class gt {
   series;
   priceTop;
   priceBottom;
   color;
   _paneViews;
-  constructor(l, f, c, d) {
-    this.series = l, this.priceTop = f, this.priceBottom = c, this.color = d, this._paneViews = [new ht(this)];
+  constructor(n, f, c, d) {
+    this.series = n, this.priceTop = f, this.priceBottom = c, this.color = d, this._paneViews = [new mt(this)];
   }
   updateAllViews() {
-    for (const l of this._paneViews) l.update();
+    for (const n of this._paneViews) n.update();
   }
   paneViews() {
     return this._paneViews;
   }
 }
-function pt(t, l) {
-  switch (t) {
+function bt(e, n) {
+  switch (e) {
     case ee.Dotted:
-      return [l, l];
+      return [n, n];
     case ee.Dashed:
-      return [2 * l, 2 * l];
+      return [2 * n, 2 * n];
     case ee.LargeDashed:
-      return [6 * l, 6 * l];
+      return [6 * n, 6 * n];
     case ee.SparseDotted:
-      return [l, 4 * l];
+      return [n, 4 * n];
     default:
       return [];
   }
 }
-class mt {
+class vt {
   _y;
   _color;
   _lineWidth;
   _lineStyle;
-  constructor(l, f, c, d) {
-    this._y = l, this._color = f, this._lineWidth = c, this._lineStyle = d;
+  constructor(n, f, c, d) {
+    this._y = n, this._color = f, this._lineWidth = c, this._lineStyle = d;
   }
-  draw(l) {
-    l.useBitmapCoordinateSpace((f) => {
+  draw(n) {
+    n.useBitmapCoordinateSpace((f) => {
       if (this._y === null) return;
-      const c = f.context, d = f.verticalPixelRatio, v = Math.max(1, Math.round(this._lineWidth * d)), F = Math.round(this._y * d);
-      c.save(), c.strokeStyle = this._color, c.lineWidth = v, c.setLineDash(pt(this._lineStyle, v)), c.beginPath(), c.moveTo(0, F), c.lineTo(f.bitmapSize.width, F), c.stroke(), c.restore();
+      const c = f.context, d = f.verticalPixelRatio, v = Math.max(1, Math.round(this._lineWidth * d)), z = Math.round(this._y * d);
+      c.save(), c.strokeStyle = this._color, c.lineWidth = v, c.setLineDash(bt(this._lineStyle, v)), c.beginPath(), c.moveTo(0, z), c.lineTo(f.bitmapSize.width, z), c.stroke(), c.restore();
     });
   }
 }
-class gt {
+class St {
   _source;
   _y = null;
-  constructor(l) {
-    this._source = l;
+  constructor(n) {
+    this._source = n;
   }
   update() {
     this._y = this._source.series.priceToCoordinate(this._source.price);
@@ -108,7 +108,7 @@ class gt {
     return "top";
   }
   renderer() {
-    return new mt(
+    return new vt(
       this._y,
       this._source.color,
       this._source.lineWidth,
@@ -116,35 +116,39 @@ class gt {
     );
   }
 }
-class bt {
+class Ct {
   series;
   price;
   color;
   lineWidth;
   lineStyle;
   _paneViews;
-  constructor(l, f, c, d, v) {
-    this.series = l, this.price = f, this.color = c, this.lineWidth = d, this.lineStyle = v, this._paneViews = [new gt(this)];
+  constructor(n, f, c, d, v) {
+    this.series = n, this.price = f, this.color = c, this.lineWidth = d, this.lineStyle = v, this._paneViews = [new St(this)];
   }
   updateAllViews() {
-    for (const l of this._paneViews) l.update();
+    for (const n of this._paneViews) n.update();
   }
   paneViews() {
     return this._paneViews;
   }
 }
-function vt(t, l, f) {
-  const c = t.labelText ?? "", d = t.value, v = d === void 0 ? "" : typeof d == "number" ? l === "$" ? `$${xe(d, void 0, f)}` : l === "%" ? `${xe(d, void 0, f)}%` : xe(
+function yt(e, n, f) {
+  const c = e.labelText ?? "", d = e.value, v = d === void 0 ? "" : typeof d == "number" ? n === "$" ? `$${xe(d, void 0, f)}` : n === "%" ? `${xe(d, void 0, f)}%` : xe(
     d,
-    l !== "none" && l !== "%" && l !== "$" ? l : void 0,
+    n !== "none" && n !== "%" && n !== "$" ? n : void 0,
     f
   ) : String(d);
   return { labelText: c, valueStr: v };
 }
-function St(t, l) {
-  for (let f = t.length - 1; f >= 0; f--)
-    if (Number(t[f].time) <= l)
-      return t[f].value;
+const Oe = 40;
+function xt(e, n) {
+  return n <= 0 ? { left: e, transform: "translateX(-50%)" } : e <= Oe ? { left: e, transform: "translateX(4px)" } : e >= n - Oe ? { left: e, transform: "translateX(calc(-100% - 4px))" } : { left: e, transform: "translateX(-50%)" };
+}
+function wt(e, n) {
+  for (let f = e.length - 1; f >= 0; f--)
+    if (Number(e[f].time) <= n)
+      return e[f].value;
   return 0;
 }
 const we = [
@@ -262,70 +266,70 @@ const we = [
     top: "rgba(71, 85, 105, 0.56)",
     bottom: "rgba(71, 85, 105, 0.04)"
   }
-], Ct = 137.5;
-function Oe(t) {
-  if (t < we.length)
-    return we[t];
-  const f = (t - we.length) * Ct % 360, c = nt(f, 70, 50), { topColor: d, bottomColor: v } = ce(c);
+], _t = 137.5;
+function qe(e) {
+  if (e < we.length)
+    return we[e];
+  const f = (e - we.length) * _t % 360, c = at(f, 70, 50), { topColor: d, bottomColor: v } = ue(c);
   return { line: c, top: d, bottom: v };
 }
-function Bt({
-  series: t,
-  className: l,
+function Wt({
+  series: e,
+  className: n,
   showLegend: f = !1,
   onUnselectSeries: c,
   xMeasureUnit: d = "time",
   yMeasureUnit: v = "token",
-  optionsOverrides: F,
+  optionsOverrides: z,
   verticalLineOptions: x,
   priceLineOptions: M,
   zoneOptions: j,
-  currentValueDecimals: ue,
-  useSharedPriceScale: A = !1,
+  currentValueDecimals: fe,
+  useSharedPriceScale: G = !1,
   dualYAxis: D = !1,
   defaultVisiblePriceScaleId: _e = "right",
   leftPriceScaleTitle: Ne,
-  rightPriceScaleTitle: xt,
-  showCurrentValue: Xe = !0,
-  graphTitle: fe,
+  rightPriceScaleTitle: Tt,
+  showCurrentValue: Ze = !0,
+  graphTitle: he,
   yScaleMin: Te,
   yScaleMinMultiple: Ve,
-  visibleTimeFrom: Z,
+  visibleTimeFrom: K,
   disableZoom: ie = !1,
-  hideDefaultTooltip: he = !1
+  hideDefaultTooltip: de = !1
 }) {
-  const z = q(null), C = q(/* @__PURE__ */ new Map()), de = q(!1), Pe = q(!0), Re = q([]), K = q(null), pe = q(null), ae = q(null), V = rt(), H = Ce.useMemo(() => t.flatMap((o) => o.data), [t]), qe = Ce.useMemo(() => {
-    if (t.length > 0) {
-      const o = t[t.length - 1];
+  const E = Z(null), C = Z(/* @__PURE__ */ new Map()), pe = Z(!1), Pe = Z(!0), Le = Z([]), I = Z(null), me = Z(null), ae = Z(null), V = it(), H = ye.useMemo(() => e.flatMap((o) => o.data), [e]), Ke = ye.useMemo(() => {
+    if (e.length > 0) {
+      const o = e[e.length - 1];
       if (o.data.length > 0)
         return o.data[o.data.length - 1];
     }
-  }, [t]), [Le, me] = ye(() => {
-    if (!qe) return;
+  }, [e]), [Re, ge] = ce(() => {
+    if (!Ke) return;
     const o = /* @__PURE__ */ new Map();
-    for (const s of t)
+    for (const s of e)
       s.data.length > 0 && o.set(s.label, s.data[s.data.length - 1]);
     return o;
-  }), [Me, O] = ye(null), [ke, De] = ye([]);
-  E(() => {
+  }), [Me, O] = ce(null), [ke, De] = ce([]), [Je, Ie] = ce(0);
+  $(() => {
     const o = () => {
       try {
-        if (z.current && K.current) {
-          const a = K.current.clientWidth, i = K.current.clientHeight;
-          z.current.resize(a, i);
+        if (I.current && Ie(I.current.clientWidth), E.current && I.current) {
+          const a = I.current.clientWidth, i = I.current.clientHeight;
+          E.current.resize(a, i);
         }
       } catch {
       }
-    }, s = K.current, n = s ? new ResizeObserver(o) : null;
-    return ae.current = n, s && n?.observe(s), () => {
-      s && n?.unobserve(s), n?.disconnect(), ae.current = null;
+    }, s = I.current, l = s ? new ResizeObserver(o) : null;
+    return ae.current = l, s && l?.observe(s), () => {
+      s && l?.unobserve(s), l?.disconnect(), ae.current = null;
     };
-  }, []), E(() => {
-    if (!pe.current || de.current) return;
+  }, []), $(() => {
+    if (!me.current || pe.current) return;
     const o = je(), s = U(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
-    ), n = ie ? {
+    ), l = ie ? {
       handleScale: {
         mouseWheel: !1,
         pinch: !1,
@@ -338,7 +342,7 @@ function Bt({
         horzTouchDrag: !1,
         vertTouchDrag: !1
       }
-    } : {}, a = Ue(pe.current, {
+    } : {}, a = ot(me.current, {
       ...o,
       leftPriceScale: {
         ...o.leftPriceScale || {},
@@ -353,17 +357,17 @@ function Bt({
       ...V && {
         crosshair: {
           ...o.crosshair,
-          mode: et.Magnet
+          mode: rt.Magnet
         }
       },
-      ...n,
-      ...F
+      ...l,
+      ...z
     });
-    return z.current = a, de.current = !0, () => {
-      ae.current?.disconnect(), ae.current = null, a.remove(), z.current = null, de.current = !1, C.current.clear();
+    return E.current = a, pe.current = !0, () => {
+      ae.current?.disconnect(), ae.current = null, a.remove(), E.current = null, pe.current = !1, C.current.clear();
     };
-  }, [V, F, ie]), E(() => {
-    const o = z.current;
+  }, [V, z, ie]), $(() => {
+    const o = E.current;
     o && o.applyOptions(
       ie ? {
         handleScale: {
@@ -393,51 +397,51 @@ function Bt({
         }
       }
     );
-  }, [ie]), E(() => {
-    const o = z.current;
-    if (!o || t.length === 0) return;
-    const n = t.filter((r) => r.data.length > 0).length <= 1 ? Te : Ve, a = d === "time" ? He(d, H) : He(d), i = /* @__PURE__ */ new Map();
+  }, [ie]), $(() => {
+    const o = E.current;
+    if (!o || e.length === 0) return;
+    const l = e.filter((r) => r.data.length > 0).length <= 1 ? Te : Ve, a = d === "time" ? He(d, H) : He(d), i = /* @__PURE__ */ new Map();
     {
       let r = 0;
-      for (const e of t)
-        e.data.length !== 0 && (i.set(
-          e.label,
-          e.priceScaleId ?? (r === 0 ? "left" : "right")
+      for (const t of e)
+        t.data.length !== 0 && (i.set(
+          t.label,
+          t.priceScaleId ?? (r === 0 ? "left" : "right")
         ), r++);
     }
-    const u = (r, e, p) => {
+    const u = (r, t, p) => {
       const {
         formatter: k,
         tickmarksFormatter: T,
-        updateVisibleRange: $,
-        updateLastValues: Fe
-      } = at(r, e, {
-        yScaleMin: n
-      }), be = t.filter((J) => J.data.length > 0 && p.has(J.label)).map((J) => J.data[J.data.length - 1].value);
-      return Fe(be), { formatter: k, tickmarksFormatter: T, updateVisibleRange: $, labels: p };
+        updateVisibleRange: A,
+        updateLastValues: ze
+      } = ut(r, t, {
+        yScaleMin: l
+      }), ve = e.filter((J) => J.data.length > 0 && p.has(J.label)).map((J) => J.data[J.data.length - 1].value);
+      return ze(ve), { formatter: k, tickmarksFormatter: T, updateVisibleRange: A, labels: p };
     }, h = [];
     if (D)
       for (const r of ["left", "right"]) {
-        const e = /* @__PURE__ */ new Set(), p = [];
+        const t = /* @__PURE__ */ new Set(), p = [];
         let k = v;
-        for (const T of t)
+        for (const T of e)
           if (T.data.length !== 0 && i.get(T.label) === r) {
-            e.size === 0 && T.yMeasureUnit && (k = T.yMeasureUnit), e.add(T.label);
-            for (const $ of T.data) p.push($.value);
+            t.size === 0 && T.yMeasureUnit && (k = T.yMeasureUnit), t.add(T.label);
+            for (const A of T.data) p.push(A.value);
           }
-        e.size > 0 && h.push(u(p, k, e));
+        t.size > 0 && h.push(u(p, k, t));
       }
     else {
-      const r = H.map((p) => p.value), e = new Set(
-        t.filter((p) => p.data.length > 0).map((p) => p.label)
+      const r = H.map((p) => p.value), t = new Set(
+        e.filter((p) => p.data.length > 0).map((p) => p.label)
       );
-      h.push(u(r, v, e));
+      h.push(u(r, v, t));
     }
-    Re.current = h;
+    Le.current = h;
     const b = /* @__PURE__ */ new Map();
     for (const r of h)
-      for (const e of r.labels)
-        b.set(e, r);
+      for (const t of r.labels)
+        b.set(t, r);
     const S = je();
     o.applyOptions({
       localization: {
@@ -455,7 +459,7 @@ function Bt({
         minBarSpacing: 0
       }
     });
-    const P = (H.length > 0 ? Math.min(...H.map((r) => r.value)) : 0) < 0, _ = H.some((r) => r.value === 0), m = !P && _, y = !D && t.length > 1 && !A, R = D ? V : t.length > 1 && !A || V, L = U(
+    const P = (H.length > 0 ? Math.min(...H.map((r) => r.value)) : 0) < 0, _ = H.some((r) => r.value === 0), m = !P && _, y = !D && e.length > 1 && !G, L = D ? V : e.length > 1 && !G || V, R = U(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
     );
@@ -466,15 +470,15 @@ function Bt({
       leftPriceScale: {
         ...S.leftPriceScale || {},
         visible: D && !V,
-        textColor: L,
+        textColor: R,
         ...D && Ne && {
           // lightweight-charts uses scale margins; title shown via localization if needed
         }
       },
       rightPriceScale: {
         ...S.rightPriceScale || {},
-        visible: D ? !V : !R,
-        textColor: L,
+        visible: D ? !V : !L,
+        textColor: R,
         ...m && !D && {
           scaleMargins: {
             top: 0.3,
@@ -483,106 +487,106 @@ function Bt({
         }
       }
     });
-    const N = new Set(C.current.keys()), X = new Set(t.map((r) => r.label));
+    const N = new Set(C.current.keys()), q = new Set(e.map((r) => r.label));
     for (const r of N)
-      if (!X.has(r)) {
-        const e = C.current.get(r);
-        e && (o.removeSeries(e), C.current.delete(r));
+      if (!q.has(r)) {
+        const t = C.current.get(r);
+        t && (o.removeSeries(t), C.current.delete(r));
       }
-    const Q = lt(), te = [];
+    const Q = st(), te = [];
     let oe = 0;
-    const Be = t.find((r) => r.data.length > 0), re = /* @__PURE__ */ new Map();
+    const Fe = e.find((r) => r.data.length > 0), re = /* @__PURE__ */ new Map();
     if (M && M.length > 0)
       for (const r of M) {
         if (!Number.isFinite(r.price)) continue;
-        const e = r.seriesLabel ?? Be?.label;
-        if (!e) continue;
-        const p = re.get(e) ?? [];
-        p.push(r.price), re.set(e, p);
+        const t = r.seriesLabel ?? Fe?.label;
+        if (!t) continue;
+        const p = re.get(t) ?? [];
+        p.push(r.price), re.set(t, p);
       }
     if (j && j.length > 0)
       for (const r of j) {
-        const e = r.seriesLabel ?? Be?.label;
-        if (!e) continue;
-        const p = re.get(e) ?? [];
-        Number.isFinite(r.priceTop) && p.push(r.priceTop), Number.isFinite(r.priceBottom) && p.push(r.priceBottom), re.set(e, p);
+        const t = r.seriesLabel ?? Fe?.label;
+        if (!t) continue;
+        const p = re.get(t) ?? [];
+        Number.isFinite(r.priceTop) && p.push(r.priceTop), Number.isFinite(r.priceBottom) && p.push(r.priceBottom), re.set(t, p);
       }
-    for (let r = 0; r < t.length; r++) {
-      const e = t[r], p = Oe(r), k = e.lineColor ?? e.color ?? p.line;
-      let T, $;
-      if (e.lineColor ?? e.color)
-        if (e.topColor && e.bottomColor)
-          T = e.topColor, $ = e.bottomColor;
-        else if (e.topColor) {
-          const g = ce(k);
-          T = e.topColor, $ = g.bottomColor;
-        } else if (e.bottomColor)
-          T = ce(k).topColor, $ = e.bottomColor;
+    for (let r = 0; r < e.length; r++) {
+      const t = e[r], p = qe(r), k = t.lineColor ?? t.color ?? p.line;
+      let T, A;
+      if (t.lineColor ?? t.color)
+        if (t.topColor && t.bottomColor)
+          T = t.topColor, A = t.bottomColor;
+        else if (t.topColor) {
+          const g = ue(k);
+          T = t.topColor, A = g.bottomColor;
+        } else if (t.bottomColor)
+          T = ue(k).topColor, A = t.bottomColor;
         else {
-          const g = ce(k);
-          T = g.topColor, $ = g.bottomColor;
+          const g = ue(k);
+          T = g.topColor, A = g.bottomColor;
         }
       else
-        T = e.topColor || p.top, $ = e.bottomColor || p.bottom;
-      if (e.data.length === 0) {
-        const g = C.current.get(e.label);
-        g && (o.removeSeries(g), C.current.delete(e.label));
+        T = t.topColor || p.top, A = t.bottomColor || p.bottom;
+      if (t.data.length === 0) {
+        const g = C.current.get(t.label);
+        g && (o.removeSeries(g), C.current.delete(t.label));
         continue;
       }
-      const be = (e.data.length > 0 ? Math.min(...e.data.map((g) => g.value)) : 0) < 0, J = e.data.some((g) => g.value === 0), Ze = !be && J, ze = D ? e.priceScaleId ?? (oe === 0 ? "left" : "right") : A || !y || oe === 0 ? "right" : `scale-${oe}`;
+      const ve = (t.data.length > 0 ? Math.min(...t.data.map((g) => g.value)) : 0) < 0, J = t.data.some((g) => g.value === 0), Qe = !ve && J, Ee = D ? t.priceScaleId ?? (oe === 0 ? "left" : "right") : G || !y || oe === 0 ? "right" : `scale-${oe}`;
       y && te.push({
-        priceScaleId: ze || "right",
-        shouldPreventNegativeAxis: Ze,
+        priceScaleId: Ee || "right",
+        shouldPreventNegativeAxis: Qe,
         seriesIndex: oe
       });
-      const We = (A || !y) && n !== void 0 && typeof n == "number", Ke = re.get(e.label) ?? [], Je = (g) => {
-        const B = g();
-        if (B?.priceRange) {
-          We && (B.priceRange.minValue = n);
-          for (const G of Ke)
-            G < B.priceRange.minValue && (B.priceRange.minValue = G), G > B.priceRange.maxValue && (B.priceRange.maxValue = G);
+      const We = (G || !y) && l !== void 0 && typeof l == "number", Ye = re.get(t.label) ?? [], Ue = (g) => {
+        const F = g();
+        if (F?.priceRange) {
+          We && (F.priceRange.minValue = l);
+          for (const X of Ye)
+            X < F.priceRange.minValue && (F.priceRange.minValue = X), X > F.priceRange.maxValue && (F.priceRange.maxValue = X);
         }
-        return B;
-      }, $e = b.get(e.label) ?? h[0], Ee = $e.formatter, Qe = $e.tickmarksFormatter, ve = {
+        return F;
+      }, Ae = b.get(t.label) ?? h[0], $e = Ae.formatter, et = Ae.tickmarksFormatter, Se = {
         lineColor: k,
         topColor: T,
-        bottomColor: $,
-        priceScaleId: ze,
-        ...e.seriesType === "line" && {
-          lineStyle: e.lineStyle ?? ee.Solid
+        bottomColor: A,
+        priceScaleId: Ee,
+        ...t.seriesType === "line" && {
+          lineStyle: t.lineStyle ?? ee.Solid
         },
         priceFormat: {
           type: "custom",
           minMove: 0.01,
-          formatter: We && typeof n == "number" ? (g) => Ee(
-            g < n ? n : g
-          ) : Ee,
-          tickmarksFormatter: Qe
+          formatter: We && typeof l == "number" ? (g) => $e(
+            g < l ? l : g
+          ) : $e,
+          tickmarksFormatter: et
         },
-        autoscaleInfoProvider: Je
-      }, Ae = e.seriesType === "line";
-      let I = C.current.get(e.label);
-      const Y = e.data.map((g) => ({
+        autoscaleInfoProvider: Ue
+      }, Ge = t.seriesType === "line";
+      let B = C.current.get(t.label);
+      const Y = t.data.map((g) => ({
         ...g,
         time: g.time
       }));
-      if (Z !== void 0 && Y.length > 0 && Number(Y[0].time) > Z) {
-        const g = Number(Y[0].time), B = g - Z, G = 86400, Ye = B > 180 * G ? 7 * G : B > 30 * G ? G : 6 * 3600, Ge = [];
-        for (let Se = Z; Se < g; Se += Ye)
-          Ge.push({ time: Se });
-        Y.unshift(...Ge);
+      if (K !== void 0 && Y.length > 0 && Number(Y[0].time) > K) {
+        const g = Number(Y[0].time), F = g - K, X = 86400, tt = F > 180 * X ? 7 * X : F > 30 * X ? X : 6 * 3600, Xe = [];
+        for (let Ce = K; Ce < g; Ce += tt)
+          Xe.push({ time: Ce });
+        Y.unshift(...Xe);
       }
-      I && I.seriesType() !== (Ae ? "Line" : "Area") && (o.removeSeries(I), C.current.delete(e.label), I = void 0), I ? (I.applyOptions(ve), I.setData(Y)) : (Ae ? I = o.addSeries(tt, {
+      B && B.seriesType() !== (Ge ? "Line" : "Area") && (o.removeSeries(B), C.current.delete(t.label), B = void 0), B ? (B.applyOptions(Se), B.setData(Y)) : (Ge ? B = o.addSeries(nt, {
         ...Q,
-        ...ve
-      }) : I = o.addSeries(ot, {
+        ...Se
+      }) : B = o.addSeries(lt, {
         ...Q,
-        ...ve
-      }), I.setData(Y), C.current.set(e.label, I)), oe++;
+        ...Se
+      }), B.setData(Y), C.current.set(t.label, B)), oe++;
     }
     if (D)
       try {
-        const r = o.priceScale("left"), e = o.priceScale("right"), p = {
+        const r = o.priceScale("left"), t = o.priceScale("right"), p = {
           visible: !V,
           autoScale: !0,
           scaleMargins: { top: 0.1, bottom: 0.1 },
@@ -590,16 +594,16 @@ function Bt({
           borderVisible: !0,
           borderColor: "rgba(224, 227, 235, 0.1)",
           entireTextOnly: !1,
-          textColor: L
+          textColor: R
         };
-        r?.applyOptions(p), e?.applyOptions(p);
+        r?.applyOptions(p), t?.applyOptions(p);
       } catch {
       }
     else if (y && te.length > 0)
       for (const r of te)
         try {
-          const e = o.priceScale(r.priceScaleId);
-          e && e.applyOptions({
+          const t = o.priceScale(r.priceScaleId);
+          t && t.applyOptions({
             visible: !1,
             autoScale: !0,
             scaleMargins: {
@@ -614,12 +618,12 @@ function Bt({
             borderVisible: !0,
             borderColor: "rgba(224, 227, 235, 0.1)",
             entireTextOnly: !1,
-            textColor: L
+            textColor: R
           });
-        } catch (e) {
+        } catch (t) {
           console.warn(
             `Failed to configure price scale ${r.priceScaleId} for series ${r.seriesIndex}:`,
-            e
+            t
           );
         }
     else if (!y)
@@ -631,7 +635,7 @@ function Bt({
           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,
+            bottom: l !== void 0 || m ? 0 : 0.1,
             ...m && {
               top: 0.3
             }
@@ -640,18 +644,18 @@ function Bt({
           borderVisible: !0,
           borderColor: "rgba(224, 227, 235, 0.1)",
           entireTextOnly: !1,
-          textColor: L
+          textColor: R
         });
       } catch {
       }
-    if (n !== void 0 && !V && (A || !y) && o.applyOptions({
+    if (l !== void 0 && !V && (G || !y) && o.applyOptions({
       handleScroll: {
         vertTouchDrag: !1
       }
     }), H.length > 0) {
-      const r = H.map((e) => Number(e.time)).filter((e) => Number.isFinite(e));
+      const r = H.map((t) => Number(t.time)).filter((t) => Number.isFinite(t));
       if (r.length > 0) {
-        const e = Math.min(...r), p = Z !== void 0 ? Math.min(Z, e) : e, k = Math.max(...r);
+        const t = Math.min(...r), p = K !== void 0 ? Math.min(K, t) : t, k = Math.max(...r);
         if (Number(p) <= Number(k))
           try {
             o.timeScale().setVisibleRange({ from: p, to: k });
@@ -664,48 +668,48 @@ function Bt({
       }
     }
     Pe.current && (Pe.current = !1);
-    const ge = /* @__PURE__ */ new Map();
-    for (const r of t)
-      r.data.length > 0 && ge.set(r.label, r.data[r.data.length - 1]);
-    me(ge.size > 0 ? ge : void 0);
+    const be = /* @__PURE__ */ new Map();
+    for (const r of e)
+      r.data.length > 0 && be.set(r.label, r.data[r.data.length - 1]);
+    ge(be.size > 0 ? be : void 0);
   }, [
-    t,
+    e,
     H,
     d,
     v,
     V,
-    A,
+    G,
     D,
     _e,
     Ne,
     Te,
     Ve,
-    Z,
+    K,
     M,
     j
-  ]), E(() => {
-    const o = z.current;
-    if (!o || t.length === 0) return;
-    const s = t.length === 1;
-    let n;
-    for (const i of t)
+  ]), $(() => {
+    const o = E.current;
+    if (!o || e.length === 0) return;
+    const s = e.length === 1;
+    let l;
+    for (const i of e)
       if (i.data.length > 0) {
-        n = i.data[i.data.length - 1].time;
+        l = i.data[i.data.length - 1].time;
         break;
       }
-    if (!n) return;
+    if (!l) return;
     const a = (i) => {
-      const { time: u = n, seriesData: h, point: b } = i || {}, S = Array.from(C.current.values());
+      const { time: u = l, seriesData: h, point: b } = i || {}, S = Array.from(C.current.values());
       if (!b || !u) {
         const _ = /* @__PURE__ */ new Map();
-        for (const m of t)
+        for (const m of e)
           m.data.length > 0 && _.set(m.label, m.data[m.data.length - 1]);
-        if (me(_.size > 0 ? _ : void 0), s || A || he)
+        if (ge(_.size > 0 ? _ : void 0), s || G || de)
           O(null);
-        else if (S[0] && n) {
-          const y = o.timeScale().timeToCoordinate(n), R = t[0];
-          if (R.data.length > 0) {
-            const L = R.data[R.data.length - 1].value, N = S[0].priceToCoordinate(L);
+        else if (S[0] && l) {
+          const y = o.timeScale().timeToCoordinate(l), L = e[0];
+          if (L.data.length > 0) {
+            const R = L.data[L.data.length - 1].value, N = S[0].priceToCoordinate(R);
             y !== null && N !== null && O({ x: y, y: N });
           }
         }
@@ -713,33 +717,33 @@ function Bt({
       }
       const W = /* @__PURE__ */ new Map();
       let P;
-      for (let _ = 0; _ < t.length; _++) {
-        const m = t[_], y = C.current.get(m.label);
+      for (let _ = 0; _ < e.length; _++) {
+        const m = e[_], y = C.current.get(m.label);
         if (!y) continue;
-        const R = h?.get(y), L = R && "value" in R ? R.value : void 0;
+        const L = h?.get(y), R = L && "value" in L ? L.value : void 0;
         let N;
-        if (L !== void 0)
-          N = L;
+        if (R !== void 0)
+          N = R;
         else if (s) {
-          const X = Number(u), Q = m.data.length > 0 ? Number(m.data[0].time) : Number.POSITIVE_INFINITY;
-          X < Q ? N = Number.NaN : N = m.data[m.data.length - 1]?.value ?? 0;
+          const q = Number(u), Q = m.data.length > 0 ? Number(m.data[0].time) : Number.POSITIVE_INFINITY;
+          q < Q ? N = Number.NaN : N = m.data[m.data.length - 1]?.value ?? 0;
         } else {
-          const X = m.data.length > 0 ? Number(m.data[0].time) : Number.POSITIVE_INFINITY;
-          if (Number(u) < X) continue;
-          N = St(m.data, Number(u));
+          const q = m.data.length > 0 ? Number(m.data[0].time) : Number.POSITIVE_INFINITY;
+          if (Number(u) < q) continue;
+          N = wt(m.data, Number(u));
         }
         Number.isNaN(N) || (P === void 0 && (P = N), W.set(m.label, { value: N, time: u }));
       }
-      if (me(W), P !== void 0 && S[0]) {
+      if (ge(W), P !== void 0 && S[0]) {
         const m = o.timeScale().timeToCoordinate(u), y = S[0].priceToCoordinate(P);
         if (m !== null && y !== null) {
-          const R = K.current;
-          if (R) {
-            const L = R.querySelector(
+          const L = I.current;
+          if (L) {
+            const R = L.querySelector(
               ".LightweightChart"
             );
-            if (L) {
-              const N = L.getBoundingClientRect(), X = R.getBoundingClientRect(), Q = m + (N.left - X.left), te = y + (N.top - X.top);
+            if (R) {
+              const N = R.getBoundingClientRect(), q = L.getBoundingClientRect(), Q = m + (N.left - q.left), te = y + (N.top - q.top);
               O({ x: Q, y: te });
             } else
               O({ x: m, y });
@@ -750,27 +754,27 @@ function Bt({
       } else
         O(null);
     };
-    return o.subscribeCrosshairMove(a), V && o.subscribeClick(a), !s && !A && !he && requestAnimationFrame(() => {
+    return o.subscribeCrosshairMove(a), V && o.subscribeClick(a), !s && !G && !de && requestAnimationFrame(() => {
       const i = Array.from(C.current.values());
-      if (i[0] && n && t[0]?.data.length > 0) {
-        const h = o.timeScale().timeToCoordinate(n), b = t[0].data[t[0].data.length - 1].value, S = i[0].priceToCoordinate(b);
+      if (i[0] && l && e[0]?.data.length > 0) {
+        const h = o.timeScale().timeToCoordinate(l), b = e[0].data[e[0].data.length - 1].value, S = i[0].priceToCoordinate(b);
         h !== null && S !== null && O({ x: h, y: S });
       }
     }), () => {
       o.unsubscribeCrosshairMove(a), V && o.unsubscribeClick(a);
     };
-  }, [t, A, V, he]), E(() => {
-    const o = z.current;
-    if (!o || t.length === 0) return;
-    const s = o.timeScale(), n = () => {
-      const a = Re.current;
+  }, [e, G, V, de]), $(() => {
+    const o = E.current;
+    if (!o || e.length === 0) return;
+    const s = o.timeScale(), l = () => {
+      const a = Le.current;
       if (a.length === 0) return;
       const i = s.getVisibleRange();
       if (!i) return;
       const u = Number(i.from), h = Number(i.to);
       for (const b of a) {
         const S = [];
-        for (const W of t)
+        for (const W of e)
           if (b.labels.has(W.label))
             for (const P of W.data) {
               const _ = Number(P.time);
@@ -779,42 +783,42 @@ function Bt({
         S.length > 0 && b.updateVisibleRange(S);
       }
     };
-    return s.subscribeVisibleLogicalRangeChange(n), () => {
+    return s.subscribeVisibleLogicalRangeChange(l), () => {
       s.unsubscribeVisibleLogicalRangeChange(
-        n
+        l
       );
     };
-  }, [t]), E(() => {
-    const o = z.current, s = Array.from(C.current.values()), n = [];
+  }, [e]), $(() => {
+    const o = E.current, s = Array.from(C.current.values()), l = [];
     if (o && s.length > 0 && x) {
-      const a = it(), i = s[0];
+      const a = ct(), i = s[0];
       for (const u of x) {
         const h = {
           ...a,
           ...u.options || {}
         };
         h.color && (h.color = U(h.color, h.color));
-        const b = new ut(o, i, u.xCoordinate, h);
-        i.attachPrimitive(b), n.push(b);
+        const b = new dt(o, i, u.xCoordinate, h);
+        i.attachPrimitive(b), l.push(b);
       }
     }
     return () => {
       if (s.length > 0) {
         const a = s[0];
-        for (const i of n)
+        for (const i of l)
           a.detachPrimitive(i);
       }
     };
-  }, [x, t]), E(() => {
+  }, [x, e]), $(() => {
     const o = [], s = [];
     if (M && M.length > 0) {
-      const n = Array.from(C.current.values())[0], a = U(
+      const l = Array.from(C.current.values())[0], a = U(
         "hsl(var(--destructive))",
         "rgb(239, 68, 68)"
       );
       for (const i of M) {
         if (!Number.isFinite(i.price)) continue;
-        const u = i.seriesLabel ? C.current.get(i.seriesLabel) : n;
+        const u = i.seriesLabel ? C.current.get(i.seriesLabel) : l;
         if (!u) continue;
         const h = i.color ? U(i.color, i.color) : a, b = i.lineWidth ?? 1, S = i.lineStyle ?? ee.Dashed, W = u.createPriceLine({
           price: i.price,
@@ -825,7 +829,7 @@ function Bt({
           title: i.title ?? ""
         });
         o.push({ series: u, line: W });
-        const P = new bt(
+        const P = new Ct(
           u,
           i.price,
           h,
@@ -836,25 +840,25 @@ function Bt({
       }
     }
     return () => {
-      for (const { series: n, primitive: a } of s)
+      for (const { series: l, primitive: a } of s)
         try {
-          n.detachPrimitive(a);
+          l.detachPrimitive(a);
         } catch {
         }
-      for (const { series: n, line: a } of o)
+      for (const { series: l, line: a } of o)
         try {
-          n.removePriceLine(a);
+          l.removePriceLine(a);
         } catch {
         }
     };
-  }, [M, t]), E(() => {
+  }, [M, e]), $(() => {
     const o = [];
     if (j && j.length > 0) {
-      const s = Array.from(C.current.values())[0], n = "rgba(239, 68, 68, 0.12)";
+      const s = Array.from(C.current.values())[0], l = "rgba(239, 68, 68, 0.12)";
       for (const a of j) {
         const i = a.seriesLabel ? C.current.get(a.seriesLabel) : s;
         if (!i) continue;
-        const u = a.color ? U(a.color, n) : n, h = new dt(
+        const u = a.color ? U(a.color, l) : l, h = new gt(
           i,
           a.priceTop,
           a.priceBottom,
@@ -864,83 +868,86 @@ function Bt({
       }
     }
     return () => {
-      for (const { series: s, zone: n } of o)
+      for (const { series: s, zone: l } of o)
         try {
-          s.detachPrimitive(n);
+          s.detachPrimitive(l);
         } catch {
         }
     };
-  }, [j, t]), E(() => {
-    const o = z.current;
+  }, [j, e]), $(() => {
+    const o = E.current;
     if (!o || !x?.length) {
       De([]);
       return;
     }
     const s = () => {
       const i = o.timeScale(), u = x.map((h) => i.timeToCoordinate(h.xCoordinate) ?? null);
-      De(u);
+      De(u), I.current && Ie(I.current.clientWidth);
     };
     s();
-    const n = o.timeScale(), a = () => {
+    const l = o.timeScale(), a = () => {
       s();
     };
-    return n.subscribeVisibleLogicalRangeChange(a), () => {
-      n.unsubscribeVisibleLogicalRangeChange(a);
+    return l.subscribeVisibleLogicalRangeChange(a), () => {
+      l.unsubscribeVisibleLogicalRangeChange(a);
     };
-  }, [x, t]);
-  const se = t.length === 1, Ie = Ce.useMemo(() => {
-    if (se && t.length > 0) {
-      const o = t[0];
+  }, [x, e]);
+  const se = e.length === 1, Be = ye.useMemo(() => {
+    if (se && e.length > 0) {
+      const o = e[0];
       if (o.data.length > 0)
         return o.data[o.data.length - 1];
     }
-  }, [se, t]);
+  }, [se, e]);
   return /* @__PURE__ */ ne(
     "div",
     {
-      ref: K,
+      ref: I,
       className: le(
         "relative z-[1] w-full h-full overflow-hidden p-0",
-        l
+        n
       ),
       children: [
-        fe != null && fe !== !1 && se ? /* @__PURE__ */ w("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ w("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: fe }) }) : Xe && se && Ie && /* @__PURE__ */ w(
-          st,
+        he != null && he !== !1 && se ? /* @__PURE__ */ w("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ w("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: he }) }) : Ze && se && Be && /* @__PURE__ */ w(
+          ft,
           {
-            point: Ie,
+            point: Be,
             xMeasureUnit: d,
             yMeasureUnit: v,
-            decimals: ue
+            decimals: fe
           }
         ),
-        Le && Me && /* @__PURE__ */ w(
-          ct,
+        Re && Me && /* @__PURE__ */ w(
+          ht,
           {
-            points: Le,
+            points: Re,
             xMeasureUnit: d,
             yMeasureUnit: v,
-            series: t,
+            series: e,
             position: Me,
-            containerRef: K,
-            decimals: ue
+            containerRef: I,
+            decimals: fe
           }
         ),
-        f && /* @__PURE__ */ w(yt, { series: t, onUnselect: c }),
+        f && /* @__PURE__ */ w(Nt, { series: e, onUnselect: c }),
         x && x.length > 0 && ke.length === x.length && /* @__PURE__ */ w(
           "div",
           {
             className: "absolute inset-0 z-[5] pointer-events-none",
             "aria-hidden": !0,
             children: x.map((o, s) => {
-              const n = ke[s], a = o.options ?? {}, i = a.showLabel !== !1;
-              if (n === null || !i) return null;
-              const { labelText: u, valueStr: h } = vt(
+              const l = ke[s], a = o.options ?? {}, i = a.showLabel !== !1;
+              if (l === null || !i) return null;
+              const { labelText: u, valueStr: h } = yt(
                 a,
                 v,
-                ue
+                fe
               ), b = a.tooltipText ?? "";
               if (!(u || h || b)) return null;
-              const W = a.labelBackgroundColor ?? a.color ?? "hsl(var(--background))", P = a.labelTextColor ?? "hsl(var(--foreground))", _ = `${String(o.xCoordinate)}-${u}-${b}`;
+              const W = a.labelBackgroundColor ?? a.color ?? "hsl(var(--background))", P = a.labelTextColor ?? "hsl(var(--foreground))", _ = `${String(o.xCoordinate)}-${u}-${b}`, m = xt(
+                l,
+                Je
+              );
               return /* @__PURE__ */ ne(
                 "div",
                 {
@@ -949,8 +956,7 @@ function Bt({
                     b && "pointer-events-auto cursor-default"
                   ),
                   style: {
-                    left: n,
-                    transform: "translateX(-50%)",
+                    ...m,
                     backgroundColor: W,
                     color: P
                   },
@@ -975,7 +981,7 @@ function Bt({
         /* @__PURE__ */ w(
           "div",
           {
-            ref: pe,
+            ref: me,
             className: "LightweightChart w-full h-full overflow-hidden"
           }
         )
@@ -983,9 +989,9 @@ function Bt({
     }
   );
 }
-function yt({
-  series: t,
-  onUnselect: l,
+function Nt({
+  series: e,
+  onUnselect: n,
   inline: f = !1
 }) {
   return /* @__PURE__ */ w(
@@ -995,8 +1001,8 @@ function yt({
         "flex flex-wrap gap-2",
         f ? "items-center" : "absolute top-0 left-2 z-[10]"
       ),
-      children: t.map((c, d) => {
-        const v = Oe(d), F = (c.lineColor ?? c.color) || v.line, x = c.data.length === 0;
+      children: e.map((c, d) => {
+        const v = qe(d), z = (c.lineColor ?? c.color) || v.line, x = c.data.length === 0;
         return /* @__PURE__ */ ne(
           "div",
           {
@@ -1009,19 +1015,19 @@ function yt({
                 "div",
                 {
                   className: "w-3 h-3 rounded-sm",
-                  style: { backgroundColor: F }
+                  style: { backgroundColor: z }
                 }
               ),
               /* @__PURE__ */ ne("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
                 c.label,
                 x && " (no data)"
               ] }),
-              l && /* @__PURE__ */ w(
+              n && /* @__PURE__ */ w(
                 "button",
                 {
                   type: "button",
                   onClick: (M) => {
-                    M.stopPropagation(), l(c.label);
+                    M.stopPropagation(), n(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 ${c.label}`,
@@ -1058,9 +1064,11 @@ function yt({
 }
 export {
   we as DEFAULT_SERIES_COLORS,
-  Bt as Graph,
-  yt as GraphLegend,
-  Oe as getSeriesColorPalette,
-  St as getStepForwardValue,
-  vt as getVerticalLineTooltipContent
+  Wt as Graph,
+  Nt as GraphLegend,
+  Oe as VERTICAL_LINE_LABEL_EDGE_PADDING,
+  qe as getSeriesColorPalette,
+  wt as getStepForwardValue,
+  xt as getVerticalLineLabelStyle,
+  yt as getVerticalLineTooltipContent
 };