@gearbox-protocol/ui-kit 3.14.0-next.9 → 4.0.0-next.2

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

@@ -1,30 +1,161 @@
-import { jsxs as K, jsx as p } from "react/jsx-runtime";
-import { createChart as We, CrosshairMode as Ye, AreaSeries as Ge } from "lightweight-charts";
-import * as fe from "react";
-import { useRef as L, useState as de, useEffect as $ } from "react";
-import { useIsMobile as Be } from "../../hooks/use-media-query.js";
-import { cn as he } from "../../utils/cn.js";
-import { resolveCSSColor as Me, generateColorsFromBase as ee, hslToHex as je } from "../../utils/colors.js";
-import { getDefaultOptions as Pe, getDefaultSeries as He, getDefaultVerticalLine as _e } from "./default-config.js";
-import { getXFormatters as Te, createAdaptiveYAxisFormatter as Xe, formatExactValue as ge } from "./formatters.js";
-import { GraphCurrentValue as qe } from "./graph-current-value.js";
-import { GraphTooltip as Ke } from "./graph-tooltip.js";
-import { VertLine as Je } from "./plugins/vertical-line.js";
-function Qe(t, v, u) {
-  const D = t.labelText ?? "", g = t.value, N = g === void 0 ? "" : typeof g == "number" ? v === "$" ? `$${ge(g, void 0, u)}` : v === "%" ? `${ge(g, void 0, u)}%` : ge(
-    g,
-    v !== "none" && v !== "%" && v !== "$" ? v : void 0,
+import { jsxs as le, jsx as w } from "react/jsx-runtime";
+import { createChart as it, CrosshairMode as st, LineStyle as te, LineSeries as ct, AreaSeries as ut } from "lightweight-charts";
+import * as xe from "react";
+import { useRef as O, useState as U, useEffect as G, useLayoutEffect as ft } from "react";
+import { useIsMobile as ht } from "../../hooks/use-media-query.js";
+import { cn as ae } from "../../utils/cn.js";
+import { resolveCSSColor as ee, generateColorsFromBase as fe, hslToHex as dt } from "../../utils/colors.js";
+import { getDefaultOptions as Xe, getDefaultSeries as mt, getDefaultVerticalLine as pt } from "./default-config.js";
+import { getXFormatters as qe, formatExactValue as we, createAdaptiveYAxisFormatter as gt } from "./formatters.js";
+import { GraphCurrentValue as bt } from "./graph-current-value.js";
+import { GraphTooltip as vt } from "./graph-tooltip.js";
+import { VertLine as Ct } from "./plugins/vertical-line.js";
+class St {
+  _yTop;
+  _yBottom;
+  _color;
+  constructor(l, u, h) {
+    this._yTop = l, this._yBottom = u, this._color = h;
+  }
+  draw(l) {
+    l.useBitmapCoordinateSpace((u) => {
+      const h = u.context, c = u.verticalPixelRatio, b = this._yTop === null ? 0 : this._yTop * c, L = this._yBottom === null ? u.bitmapSize.height : this._yBottom * c, x = Math.min(b, L), R = Math.max(b, L);
+      h.fillStyle = this._color, h.fillRect(0, x, u.bitmapSize.width, R - x);
+    });
+  }
+}
+class yt {
+  _source;
+  _yTop = null;
+  _yBottom = null;
+  constructor(l) {
+    this._source = l;
+  }
+  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);
+  }
+  /** Draw beneath the series line/area so the data stays readable. */
+  zOrder() {
+    return "bottom";
+  }
+  renderer() {
+    return new St(this._yTop, this._yBottom, this._source.color);
+  }
+}
+class xt {
+  series;
+  priceTop;
+  priceBottom;
+  color;
+  _paneViews;
+  constructor(l, u, h, c) {
+    this.series = l, this.priceTop = u, this.priceBottom = h, this.color = c, this._paneViews = [new yt(this)];
+  }
+  updateAllViews() {
+    for (const l of this._paneViews) l.update();
+  }
+  paneViews() {
+    return this._paneViews;
+  }
+}
+function wt(e, l) {
+  switch (e) {
+    case te.Dotted:
+      return [l, l];
+    case te.Dashed:
+      return [2 * l, 2 * l];
+    case te.LargeDashed:
+      return [6 * l, 6 * l];
+    case te.SparseDotted:
+      return [l, 4 * l];
+    default:
+      return [];
+  }
+}
+class _t {
+  _y;
+  _color;
+  _lineWidth;
+  _lineStyle;
+  constructor(l, u, h, c) {
+    this._y = l, this._color = u, this._lineWidth = h, this._lineStyle = c;
+  }
+  draw(l) {
+    l.useBitmapCoordinateSpace((u) => {
+      if (this._y === null) return;
+      const h = u.context, c = u.verticalPixelRatio, b = Math.max(1, Math.round(this._lineWidth * c)), L = Math.round(this._y * c);
+      h.save(), h.strokeStyle = this._color, h.lineWidth = b, h.setLineDash(wt(this._lineStyle, b)), h.beginPath(), h.moveTo(0, L), h.lineTo(u.bitmapSize.width, L), h.stroke(), h.restore();
+    });
+  }
+}
+class Nt {
+  _source;
+  _y = null;
+  constructor(l) {
+    this._source = l;
+  }
+  update() {
+    this._y = this._source.series.priceToCoordinate(this._source.price);
+  }
+  /**
+   * Draw on the top pane (top canvas) so a liquidation price line stays above
+   * every series' area/line fill, price zones and the crosshair — native
+   * `createPriceLine` only draws in the "normal" group and can be hidden behind
+   * a later series in multi-series charts.
+   */
+  zOrder() {
+    return "top";
+  }
+  renderer() {
+    return new _t(
+      this._y,
+      this._source.color,
+      this._source.lineWidth,
+      this._source.lineStyle
+    );
+  }
+}
+class Tt {
+  series;
+  price;
+  color;
+  lineWidth;
+  lineStyle;
+  _paneViews;
+  constructor(l, u, h, c, b) {
+    this.series = l, this.price = u, this.color = h, this.lineWidth = c, this.lineStyle = b, this._paneViews = [new Nt(this)];
+  }
+  updateAllViews() {
+    for (const l of this._paneViews) l.update();
+  }
+  paneViews() {
+    return this._paneViews;
+  }
+}
+function Vt(e, l, u) {
+  const h = e.labelText ?? "", c = e.value, b = c === void 0 ? "" : typeof c == "number" ? l === "$" ? `$${we(c, void 0, u)}` : l === "%" ? `${we(c, void 0, u)}%` : we(
+    c,
+    l !== "none" && l !== "%" && l !== "$" ? l : void 0,
     u
-  ) : String(g);
-  return { labelText: D, valueStr: N };
+  ) : String(c);
+  return { labelText: h, valueStr: b };
+}
+const Ze = 4;
+function Pt(e, l, u) {
+  const h = { left: e, transform: "translateX(-50%)" };
+  if (l <= 0 || !u || u <= 0)
+    return h;
+  const c = u / 2, b = Ze + c, L = l - Ze - c;
+  return L < b ? { left: l / 2, transform: "translateX(-50%)" } : { left: Math.min(Math.max(e, b), L), transform: "translateX(-50%)" };
 }
-function Ze(t, v) {
-  for (let u = t.length - 1; u >= 0; u--)
-    if (Number(t[u].time) <= v)
-      return t[u].value;
+function Lt(e, l) {
+  for (let u = e.length - 1; u >= 0; u--)
+    if (Number(e[u].time) <= l)
+      return e[u].value;
   return 0;
 }
-const me = [
+const _e = [
   // 0  green (emerald)
   {
     line: "#02c39a",
@@ -139,65 +270,70 @@ const me = [
     top: "rgba(71, 85, 105, 0.56)",
     bottom: "rgba(71, 85, 105, 0.04)"
   }
-], Ue = 137.5;
-function Le(t) {
-  if (t < me.length)
-    return me[t];
-  const u = (t - me.length) * Ue % 360, D = je(u, 70, 50), { topColor: g, bottomColor: N } = ee(D);
-  return { line: D, top: g, bottom: N };
+], Rt = 137.5;
+function Ke(e) {
+  if (e < _e.length)
+    return _e[e];
+  const u = (e - _e.length) * Rt % 360, h = dt(u, 70, 50), { topColor: c, bottomColor: b } = fe(h);
+  return { line: h, top: c, bottom: b };
 }
-function ht({
-  series: t,
-  className: v,
+function Ot({
+  series: e,
+  className: l,
   showLegend: u = !1,
-  onUnselectSeries: D,
-  xMeasureUnit: g = "time",
-  yMeasureUnit: N = "token",
-  optionsOverrides: _,
+  onUnselectSeries: h,
+  xMeasureUnit: c = "time",
+  yMeasureUnit: b = "token",
+  optionsOverrides: L,
   verticalLineOptions: x,
-  currentValueDecimals: te,
-  useSharedPriceScale: M = !1,
-  showCurrentValue: De = !0,
-  graphTitle: oe,
-  yScaleMin: be,
-  yScaleMinMultiple: pe,
-  visibleTimeFrom: E,
-  disableZoom: J = !1
+  priceLineOptions: R,
+  zoneOptions: E,
+  currentValueDecimals: he,
+  useSharedPriceScale: j = !1,
+  dualYAxis: I = !1,
+  defaultVisiblePriceScaleId: Ne = "right",
+  leftPriceScaleTitle: Te,
+  rightPriceScaleTitle: kt,
+  showCurrentValue: Je = !0,
+  graphTitle: de,
+  yScaleMin: Ve,
+  yScaleMinMultiple: Pe,
+  visibleTimeFrom: K,
+  disableZoom: ie = !1,
+  hideDefaultTooltip: me = !1
 }) {
-  const R = L(null), w = L(/* @__PURE__ */ new Map()), re = L(!1), ve = L(!0), ne = L(
-    null
-  ), Ie = L(null), O = L(null), ae = L(null), Q = L(null), V = Be(), I = fe.useMemo(() => t.flatMap((e) => e.data), [t]), ze = fe.useMemo(() => {
-    if (t.length > 0) {
-      const e = t[t.length - 1];
-      if (e.data.length > 0)
-        return e.data[e.data.length - 1];
+  const W = O(null), y = O(/* @__PURE__ */ new Map()), pe = O(!1), Le = O(!0), Re = O([]), B = O(null), ge = O(null), se = O(null), V = ht(), X = xe.useMemo(() => e.flatMap((t) => t.data), [e]), Qe = xe.useMemo(() => {
+    if (e.length > 0) {
+      const t = e[e.length - 1];
+      if (t.data.length > 0)
+        return t.data[t.data.length - 1];
     }
-  }, [t]), [Ce, le] = de(() => {
-    if (!ze) 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;
-  }), [xe, z] = de(null), [Se, Ne] = de([]);
-  $(() => {
-    const e = () => {
+  }, [e]), [Me, be] = U(() => {
+    if (!Qe) return;
+    const t = /* @__PURE__ */ new Map();
+    for (const i of e)
+      i.data.length > 0 && t.set(i.label, i.data[i.data.length - 1]);
+    return t;
+  }), [ke, q] = U(null), [De, Ie] = U([]), [Ye, Be] = U(0), Fe = O(/* @__PURE__ */ new Map()), [Ue, et] = U({}), [ce, tt] = U(0);
+  G(() => {
+    const t = () => {
       try {
-        if (R.current && O.current) {
-          const l = O.current.clientWidth, i = O.current.clientHeight;
-          R.current.resize(l, i);
+        if (B.current && Be(B.current.clientWidth), W.current && B.current) {
+          const s = B.current.clientWidth, a = B.current.clientHeight;
+          W.current.resize(s, a);
         }
       } catch {
       }
-    }, a = O.current, r = a ? new ResizeObserver(e) : null;
-    return Q.current = r, a && r?.observe(a), () => {
-      a && r?.unobserve(a), r?.disconnect(), Q.current = null;
+    }, i = B.current, n = i ? new ResizeObserver(t) : null;
+    return se.current = n, i && n?.observe(i), () => {
+      i && n?.unobserve(i), n?.disconnect(), se.current = null;
     };
-  }, []), $(() => {
-    if (!ae.current || re.current) return;
-    const e = Pe(), a = Me(
+  }, []), G(() => {
+    if (!ge.current || pe.current) return;
+    const t = Xe(), i = ee(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
-    ), r = J ? {
+    ), n = ie ? {
       handleScale: {
         mouseWheel: !1,
         pinch: !1,
@@ -210,29 +346,34 @@ function ht({
         horzTouchDrag: !1,
         vertTouchDrag: !1
       }
-    } : {}, l = We(ae.current, {
-      ...e,
+    } : {}, s = it(ge.current, {
+      ...t,
+      leftPriceScale: {
+        ...t.leftPriceScale || {},
+        visible: !1,
+        textColor: i
+      },
       rightPriceScale: {
-        ...e.rightPriceScale || {},
+        ...t.rightPriceScale || {},
         visible: !V,
-        textColor: a
+        textColor: i
       },
       ...V && {
         crosshair: {
-          ...e.crosshair,
-          mode: Ye.Magnet
+          ...t.crosshair,
+          mode: st.Magnet
         }
       },
-      ...r,
-      ..._
+      ...n,
+      ...L
     });
-    return R.current = l, re.current = !0, () => {
-      Q.current?.disconnect(), Q.current = null, l.remove(), R.current = null, re.current = !1, w.current.clear();
+    return W.current = s, pe.current = !0, tt((a) => a + 1), () => {
+      se.current?.disconnect(), se.current = null, s.remove(), W.current = null, pe.current = !1, y.current.clear();
     };
-  }, [V, _, J]), $(() => {
-    const e = R.current;
-    e && e.applyOptions(
-      J ? {
+  }, [V, L, ie]), G(() => {
+    const t = W.current;
+    t && t.applyOptions(
+      ie ? {
         handleScale: {
           mouseWheel: !1,
           pinch: !1,
@@ -260,47 +401,89 @@ function ht({
         }
       }
     );
-  }, [J]), $(() => {
-    const e = R.current;
-    if (!e || t.length === 0) return;
-    const r = t.filter((o) => o.data.length > 0).length <= 1 ? be : pe, l = g === "time" ? Te(g, I) : Te(g), i = I.map((o) => o.value), {
-      formatter: c,
-      tickmarksFormatter: f,
-      updateVisibleRange: P,
-      updateLastValues: m
-    } = Xe(i, N, {
-      yScaleMin: r
-    });
-    ne.current = P, Ie.current = m;
-    const T = t.filter((o) => o.data.length > 0).map((o) => o.data[o.data.length - 1].value);
-    m(T);
-    const k = Pe();
-    e.applyOptions({
+  }, [ie]), G(() => {
+    const t = W.current;
+    if (!t || e.length === 0) return;
+    const n = e.filter((r) => r.data.length > 0).length <= 1 ? Ve : Pe, s = c === "time" ? qe(c, X) : qe(c), a = /* @__PURE__ */ new Map();
+    {
+      let r = 0;
+      for (const o of e)
+        o.data.length !== 0 && (a.set(
+          o.label,
+          o.priceScaleId ?? (r === 0 ? "left" : "right")
+        ), r++);
+    }
+    const f = (r, o, m) => {
+      const {
+        formatter: D,
+        tickmarksFormatter: T,
+        updateVisibleRange: $,
+        updateLastValues: We
+      } = gt(r, o, {
+        yScaleMin: n
+      }), Ce = e.filter((J) => J.data.length > 0 && m.has(J.label)).map((J) => J.data[J.data.length - 1].value);
+      return We(Ce), { formatter: D, tickmarksFormatter: T, updateVisibleRange: $, labels: m };
+    }, d = [];
+    if (I)
+      for (const r of ["left", "right"]) {
+        const o = /* @__PURE__ */ new Set(), m = [];
+        let D = b;
+        for (const T of e)
+          if (T.data.length !== 0 && a.get(T.label) === r) {
+            o.size === 0 && T.yMeasureUnit && (D = T.yMeasureUnit), o.add(T.label);
+            for (const $ of T.data) m.push($.value);
+          }
+        o.size > 0 && d.push(f(m, D, o));
+      }
+    else {
+      const r = X.map((m) => m.value), o = new Set(
+        e.filter((m) => m.data.length > 0).map((m) => m.label)
+      );
+      d.push(f(r, b, o));
+    }
+    Re.current = d;
+    const v = /* @__PURE__ */ new Map();
+    for (const r of d)
+      for (const o of r.labels)
+        v.set(o, r);
+    const C = Xe();
+    t.applyOptions({
       localization: {
-        ...k.localization || {},
+        ...C.localization || {},
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-        timeFormatter: (o) => (
+        timeFormatter: (r) => (
           // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-          l.timeFormatter(parseFloat(o), void 0)
+          s.timeFormatter(parseFloat(r), void 0)
         )
       },
       timeScale: {
-        ...k.timeScale || {},
+        ...C.timeScale || {},
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-        tickMarkFormatter: l.tickMarkFormatter,
+        tickMarkFormatter: s.tickMarkFormatter,
         minBarSpacing: 0
       }
     });
-    const d = (I.length > 0 ? Math.min(...I.map((o) => o.value)) : 0) < 0, S = I.some((o) => o.value === 0), h = !d && S, C = t.length > 1 && !M, b = t.length > 1 && !M || V, A = Me(
+    const P = (X.length > 0 ? Math.min(...X.map((r) => r.value)) : 0) < 0, _ = X.some((r) => r.value === 0), p = !P && _, S = !I && e.length > 1 && !j, M = I ? V : e.length > 1 && !j || V, k = ee(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
     );
-    e.applyOptions({
+    t.applyOptions({
+      ...I && {
+        defaultVisiblePriceScaleId: Ne
+      },
+      leftPriceScale: {
+        ...C.leftPriceScale || {},
+        visible: I && !V,
+        textColor: k,
+        ...I && Te && {
+          // lightweight-charts uses scale margins; title shown via localization if needed
+        }
+      },
       rightPriceScale: {
-        ...k.rightPriceScale || {},
-        visible: !b,
-        textColor: A,
-        ...h && {
+        ...C.rightPriceScale || {},
+        visible: I ? !V : !M,
+        textColor: k,
+        ...p && !I && {
           scaleMargins: {
             top: 0.3,
             bottom: 0
@@ -308,92 +491,129 @@ function ht({
         }
       }
     });
-    const X = new Set(w.current.keys()), se = new Set(t.map((o) => o.label));
-    for (const o of X)
-      if (!se.has(o)) {
-        const n = w.current.get(o);
-        n && (e.removeSeries(n), w.current.delete(o));
+    const N = new Set(y.current.keys()), Z = new Set(e.map((r) => r.label));
+    for (const r of N)
+      if (!Z.has(r)) {
+        const o = y.current.get(r);
+        o && (t.removeSeries(o), y.current.delete(r));
+      }
+    const Q = mt(), oe = [];
+    let re = 0;
+    const Ee = e.find((r) => r.data.length > 0), ne = /* @__PURE__ */ new Map();
+    if (R && R.length > 0)
+      for (const r of R) {
+        if (!Number.isFinite(r.price)) continue;
+        const o = r.seriesLabel ?? Ee?.label;
+        if (!o) continue;
+        const m = ne.get(o) ?? [];
+        m.push(r.price), ne.set(o, m);
+      }
+    if (E && E.length > 0)
+      for (const r of E) {
+        const o = r.seriesLabel ?? Ee?.label;
+        if (!o) continue;
+        const m = ne.get(o) ?? [];
+        Number.isFinite(r.priceTop) && m.push(r.priceTop), Number.isFinite(r.priceBottom) && m.push(r.priceBottom), ne.set(o, m);
       }
-    const Ae = He(), ie = [];
-    let U = 0;
-    for (let o = 0; o < t.length; o++) {
-      const n = t[o], q = Le(o), W = n.lineColor ?? n.color ?? q.line;
-      let F, Y;
-      if (n.lineColor ?? n.color)
-        if (n.topColor && n.bottomColor)
-          F = n.topColor, Y = n.bottomColor;
-        else if (n.topColor) {
-          const s = ee(W);
-          F = n.topColor, Y = s.bottomColor;
-        } else if (n.bottomColor)
-          F = ee(W).topColor, Y = n.bottomColor;
+    for (let r = 0; r < e.length; r++) {
+      const o = e[r], m = Ke(r), D = o.lineColor ?? o.color ?? m.line;
+      let T, $;
+      if (o.lineColor ?? o.color)
+        if (o.topColor && o.bottomColor)
+          T = o.topColor, $ = o.bottomColor;
+        else if (o.topColor) {
+          const g = fe(D);
+          T = o.topColor, $ = g.bottomColor;
+        } else if (o.bottomColor)
+          T = fe(D).topColor, $ = o.bottomColor;
         else {
-          const s = ee(W);
-          F = s.topColor, Y = s.bottomColor;
+          const g = fe(D);
+          T = g.topColor, $ = g.bottomColor;
         }
       else
-        F = n.topColor || q.top, Y = n.bottomColor || q.bottom;
-      if (n.data.length === 0) {
-        const s = w.current.get(n.label);
-        s && (e.removeSeries(s), w.current.delete(n.label));
+        T = o.topColor || m.top, $ = o.bottomColor || m.bottom;
+      if (o.data.length === 0) {
+        const g = y.current.get(o.label);
+        g && (t.removeSeries(g), y.current.delete(o.label));
         continue;
       }
-      const Fe = (n.data.length > 0 ? Math.min(...n.data.map((s) => s.value)) : 0) < 0, $e = n.data.some((s) => s.value === 0), Ee = !Fe && $e, Re = M || !C || U === 0 ? "right" : `scale-${U}`;
-      C && ie.push({
-        priceScaleId: Re || "right",
-        shouldPreventNegativeAxis: Ee,
-        seriesIndex: U
+      const Ce = (o.data.length > 0 ? Math.min(...o.data.map((g) => g.value)) : 0) < 0, J = o.data.some((g) => g.value === 0), ot = !Ce && J, Ae = I ? o.priceScaleId ?? (re === 0 ? "left" : "right") : j || !S || re === 0 ? "right" : `scale-${re}`;
+      S && oe.push({
+        priceScaleId: Ae || "right",
+        shouldPreventNegativeAxis: ot,
+        seriesIndex: re
       });
-      const Ve = (M || !C) && r !== void 0 && typeof r == "number", ke = {
-        lineColor: W,
-        topColor: F,
-        bottomColor: Y,
-        priceScaleId: Re,
+      const $e = (j || !S) && n !== void 0 && typeof n == "number", rt = ne.get(o.label) ?? [], nt = (g) => {
+        const z = g();
+        if (z?.priceRange) {
+          $e && (z.priceRange.minValue = n);
+          for (const H of rt)
+            H < z.priceRange.minValue && (z.priceRange.minValue = H), H > z.priceRange.maxValue && (z.priceRange.maxValue = H);
+        }
+        return z;
+      }, Ge = v.get(o.label) ?? d[0], je = Ge.formatter, lt = Ge.tickmarksFormatter, Se = {
+        lineColor: D,
+        topColor: T,
+        bottomColor: $,
+        priceScaleId: Ae,
+        ...o.seriesType === "line" && {
+          lineStyle: o.lineStyle ?? te.Solid
+        },
         priceFormat: {
           type: "custom",
           minMove: 0.01,
-          formatter: Ve && typeof r == "number" ? (s) => c(
-            s < r ? r : s
-          ) : c,
-          tickmarksFormatter: f
+          formatter: $e && typeof n == "number" ? (g) => je(
+            g < n ? n : g
+          ) : je,
+          tickmarksFormatter: lt
         },
-        autoscaleInfoProvider: (s) => {
-          if (!Ve) return s();
-          const j = s();
-          if (j?.priceRange) {
-            const H = r;
-            j.priceRange.minValue = H;
-          }
-          return j;
-        }
-      };
-      let G = w.current.get(n.label);
-      const B = n.data.map((s) => ({
-        ...s,
-        time: s.time
+        autoscaleInfoProvider: nt
+      }, He = o.seriesType === "line";
+      let F = y.current.get(o.label);
+      const Y = o.data.map((g) => ({
+        ...g,
+        time: g.time
       }));
-      if (E !== void 0 && B.length > 0 && Number(B[0].time) > E) {
-        const s = Number(B[0].time), j = s - E, H = 86400, Oe = j > 180 * H ? 7 * H : j > 30 * H ? H : 6 * 3600, ye = [];
-        for (let ue = E; ue < s; ue += Oe)
-          ye.push({ time: ue });
-        B.unshift(...ye);
+      if (K !== void 0 && Y.length > 0 && Number(Y[0].time) > K) {
+        const g = Number(Y[0].time), z = g - K, H = 86400, at = z > 180 * H ? 7 * H : z > 30 * H ? H : 6 * 3600, Oe = [];
+        for (let ye = K; ye < g; ye += at)
+          Oe.push({ time: ye });
+        Y.unshift(...Oe);
       }
-      G ? (G.applyOptions(ke), G.setData(B)) : (G = e.addSeries(Ge, {
-        ...Ae,
-        ...ke
-      }), G.setData(B), w.current.set(n.label, G)), U++;
+      F && F.seriesType() !== (He ? "Line" : "Area") && (t.removeSeries(F), y.current.delete(o.label), F = void 0), F ? (F.applyOptions(Se), F.setData(Y)) : (He ? F = t.addSeries(ct, {
+        ...Q,
+        ...Se
+      }) : F = t.addSeries(ut, {
+        ...Q,
+        ...Se
+      }), F.setData(Y), y.current.set(o.label, F)), re++;
     }
-    if (C && ie.length > 0)
-      for (const o of ie)
+    if (I)
+      try {
+        const r = t.priceScale("left"), o = t.priceScale("right"), m = {
+          visible: !V,
+          autoScale: !0,
+          scaleMargins: { top: 0.1, bottom: 0.1 },
+          alignLabels: !0,
+          borderVisible: !0,
+          borderColor: "rgba(224, 227, 235, 0.1)",
+          entireTextOnly: !1,
+          textColor: k
+        };
+        r?.applyOptions(m), o?.applyOptions(m);
+      } catch {
+      }
+    else if (S && oe.length > 0)
+      for (const r of oe)
         try {
-          const n = e.priceScale(o.priceScaleId);
-          n && n.applyOptions({
+          const o = t.priceScale(r.priceScaleId);
+          o && o.applyOptions({
             visible: !1,
             autoScale: !0,
             scaleMargins: {
               top: 0.1,
               bottom: 0.1,
-              ...o.shouldPreventNegativeAxis && {
+              ...r.shouldPreventNegativeAxis && {
                 top: 0.3,
                 bottom: 0
               }
@@ -402,25 +622,25 @@ function ht({
             borderVisible: !0,
             borderColor: "rgba(224, 227, 235, 0.1)",
             entireTextOnly: !1,
-            textColor: A
+            textColor: k
           });
-        } catch (n) {
+        } catch (o) {
           console.warn(
-            `Failed to configure price scale ${o.priceScaleId} for series ${o.seriesIndex}:`,
-            n
+            `Failed to configure price scale ${r.priceScaleId} for series ${r.seriesIndex}:`,
+            o
           );
         }
-    else if (!C)
+    else if (!S)
       try {
-        const o = e.priceScale("right");
-        o && o.applyOptions({
+        const r = t.priceScale("right");
+        r && r.applyOptions({
           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: r !== void 0 || h ? 0 : 0.1,
-            ...h && {
+            bottom: n !== void 0 || p ? 0 : 0.1,
+            ...p && {
               top: 0.3
             }
           },
@@ -428,240 +648,362 @@ function ht({
           borderVisible: !0,
           borderColor: "rgba(224, 227, 235, 0.1)",
           entireTextOnly: !1,
-          textColor: A
+          textColor: k
         });
       } catch {
       }
-    if (r !== void 0 && !V && (M || !C) && e.applyOptions({
+    if (n !== void 0 && !V && (j || !S) && t.applyOptions({
       handleScroll: {
         vertTouchDrag: !1
       }
-    }), I.length > 0) {
-      const o = I.map((F) => Number(F.time)), n = Math.min(...o), q = E !== void 0 ? Math.min(E, n) : n, W = Math.max(...o);
-      e.timeScale().setVisibleRange({ from: q, to: W });
+    }), X.length > 0) {
+      const r = X.map((o) => Number(o.time)).filter((o) => Number.isFinite(o));
+      if (r.length > 0) {
+        const o = Math.min(...r), m = K !== void 0 ? Math.min(K, o) : o, D = Math.max(...r);
+        if (Number(m) <= Number(D))
+          try {
+            t.timeScale().setVisibleRange({ from: m, to: D });
+          } catch {
+            try {
+              t.timeScale().fitContent();
+            } catch {
+            }
+          }
+      }
     }
-    ve.current && (ve.current = !1);
-    const ce = /* @__PURE__ */ new Map();
-    for (const o of t)
-      o.data.length > 0 && ce.set(o.label, o.data[o.data.length - 1]);
-    le(ce.size > 0 ? ce : void 0);
+    Le.current && (Le.current = !1);
+    const ve = /* @__PURE__ */ new Map();
+    for (const r of e)
+      r.data.length > 0 && ve.set(r.label, r.data[r.data.length - 1]);
+    be(ve.size > 0 ? ve : void 0);
   }, [
-    t,
-    I,
-    g,
-    N,
+    e,
+    X,
+    c,
+    b,
     V,
-    M,
-    be,
-    pe,
+    j,
+    I,
+    Ne,
+    Te,
+    Ve,
+    Pe,
+    K,
+    R,
     E
-  ]), $(() => {
-    const e = R.current;
-    if (!e || t.length === 0) return;
-    const a = t.length === 1;
-    let r;
-    for (const i of t)
-      if (i.data.length > 0) {
-        r = i.data[i.data.length - 1].time;
+  ]), G(() => {
+    const t = W.current;
+    if (!t || e.length === 0) return;
+    const i = e.length === 1;
+    let n;
+    for (const a of e)
+      if (a.data.length > 0) {
+        n = a.data[a.data.length - 1].time;
         break;
       }
-    if (!r) return;
-    const l = (i) => {
-      const { time: c = r, seriesData: f, point: P } = i || {}, m = Array.from(w.current.values());
-      if (!P || !c) {
-        const y = /* @__PURE__ */ new Map();
-        for (const d of t)
-          d.data.length > 0 && y.set(d.label, d.data[d.data.length - 1]);
-        if (le(y.size > 0 ? y : void 0), a || M)
-          z(null);
-        else if (m[0] && r) {
-          const S = e.timeScale().timeToCoordinate(r), h = t[0];
-          if (h.data.length > 0) {
-            const C = h.data[h.data.length - 1].value, b = m[0].priceToCoordinate(C);
-            S !== null && b !== null && z({ x: S, y: b });
+    if (!n) return;
+    const s = (a) => {
+      const { time: f = n, seriesData: d, point: v } = a || {}, C = Array.from(y.current.values());
+      if (!v || !f) {
+        const _ = /* @__PURE__ */ new Map();
+        for (const p of e)
+          p.data.length > 0 && _.set(p.label, p.data[p.data.length - 1]);
+        if (be(_.size > 0 ? _ : void 0), i || j || me)
+          q(null);
+        else if (C[0] && n) {
+          const S = t.timeScale().timeToCoordinate(n), M = e[0];
+          if (M.data.length > 0) {
+            const k = M.data[M.data.length - 1].value, N = C[0].priceToCoordinate(k);
+            S !== null && N !== null && q({ x: S, y: N });
           }
         }
         return;
       }
-      const T = /* @__PURE__ */ new Map();
-      let k;
-      for (let y = 0; y < t.length; y++) {
-        const d = t[y], S = m[y];
+      const A = /* @__PURE__ */ new Map();
+      let P;
+      for (let _ = 0; _ < e.length; _++) {
+        const p = e[_], S = y.current.get(p.label);
         if (!S) continue;
-        const h = f?.get(S), C = h && "value" in h ? h.value : void 0;
-        let b;
-        if (C !== void 0)
-          b = C;
-        else if (a) {
-          const A = Number(c), X = d.data.length > 0 ? Number(d.data[0].time) : Number.POSITIVE_INFINITY;
-          A < X ? b = Number.NaN : b = d.data[d.data.length - 1]?.value ?? 0;
-        } else
-          b = Ze(d.data, Number(c));
-        Number.isNaN(b) || (k === void 0 && (k = b), T.set(d.label, { value: b, time: c }));
+        const M = d?.get(S), k = M && "value" in M ? M.value : void 0;
+        let N;
+        if (k !== void 0)
+          N = k;
+        else if (i) {
+          const Z = Number(f), Q = p.data.length > 0 ? Number(p.data[0].time) : Number.POSITIVE_INFINITY;
+          Z < Q ? N = Number.NaN : N = p.data[p.data.length - 1]?.value ?? 0;
+        } else {
+          const Z = p.data.length > 0 ? Number(p.data[0].time) : Number.POSITIVE_INFINITY;
+          if (Number(f) < Z) continue;
+          N = Lt(p.data, Number(f));
+        }
+        Number.isNaN(N) || (P === void 0 && (P = N), A.set(p.label, { value: N, time: f }));
       }
-      if (le(T), k !== void 0 && m[0]) {
-        const d = e.timeScale().timeToCoordinate(c), S = m[0].priceToCoordinate(k);
-        if (d !== null && S !== null) {
-          const h = O.current;
-          if (h) {
-            const C = h.querySelector(
+      if (be(A), P !== void 0 && C[0]) {
+        const p = t.timeScale().timeToCoordinate(f), S = C[0].priceToCoordinate(P);
+        if (p !== null && S !== null) {
+          const M = B.current;
+          if (M) {
+            const k = M.querySelector(
               ".LightweightChart"
             );
-            if (C) {
-              const b = C.getBoundingClientRect(), A = h.getBoundingClientRect(), X = d + (b.left - A.left), se = S + (b.top - A.top);
-              z({ x: X, y: se });
+            if (k) {
+              const N = k.getBoundingClientRect(), Z = M.getBoundingClientRect(), Q = p + (N.left - Z.left), oe = S + (N.top - Z.top);
+              q({ x: Q, y: oe });
             } else
-              z({ x: d, y: S });
+              q({ x: p, y: S });
           } else
-            z({ x: d, y: S });
+            q({ x: p, y: S });
         } else
-          z(null);
+          q(null);
       } else
-        z(null);
+        q(null);
     };
-    return e.subscribeCrosshairMove(l), V && e.subscribeClick(l), !a && !M && requestAnimationFrame(() => {
-      const i = Array.from(w.current.values());
-      if (i[0] && r && t[0]?.data.length > 0) {
-        const f = e.timeScale().timeToCoordinate(r), P = t[0].data[t[0].data.length - 1].value, m = i[0].priceToCoordinate(P);
-        f !== null && m !== null && z({ x: f, y: m });
+    return t.subscribeCrosshairMove(s), V && t.subscribeClick(s), !i && !j && !me && requestAnimationFrame(() => {
+      const a = Array.from(y.current.values());
+      if (a[0] && n && e[0]?.data.length > 0) {
+        const d = t.timeScale().timeToCoordinate(n), v = e[0].data[e[0].data.length - 1].value, C = a[0].priceToCoordinate(v);
+        d !== null && C !== null && q({ x: d, y: C });
       }
     }), () => {
-      e.unsubscribeCrosshairMove(l), V && e.unsubscribeClick(l);
+      t.unsubscribeCrosshairMove(s), V && t.unsubscribeClick(s);
     };
-  }, [t, M, V]), $(() => {
-    const e = R.current;
-    if (!e || t.length === 0) return;
-    const a = e.timeScale(), r = () => {
-      if (!ne.current) return;
-      const l = a.getVisibleRange();
-      if (!l) return;
-      const i = Number(l.from), c = Number(l.to), f = [];
-      for (const P of t)
-        for (const m of P.data) {
-          const T = Number(m.time);
-          T >= i && T <= c && f.push(m.value);
-        }
-      f.length > 0 && ne.current(f);
+  }, [e, j, V, me]), G(() => {
+    const t = W.current;
+    if (!t || e.length === 0) return;
+    const i = t.timeScale(), n = () => {
+      const s = Re.current;
+      if (s.length === 0) return;
+      const a = i.getVisibleRange();
+      if (!a) return;
+      const f = Number(a.from), d = Number(a.to);
+      for (const v of s) {
+        const C = [];
+        for (const A of e)
+          if (v.labels.has(A.label))
+            for (const P of A.data) {
+              const _ = Number(P.time);
+              _ >= f && _ <= d && C.push(P.value);
+            }
+        C.length > 0 && v.updateVisibleRange(C);
+      }
     };
-    return a.subscribeVisibleLogicalRangeChange(r), () => {
-      a.unsubscribeVisibleLogicalRangeChange(
-        r
+    return i.subscribeVisibleLogicalRangeChange(n), () => {
+      i.unsubscribeVisibleLogicalRangeChange(
+        n
       );
     };
-  }, [t]), $(() => {
-    const e = R.current, a = Array.from(w.current.values()), r = [];
-    if (e && a.length > 0 && x) {
-      const l = _e(), i = a[0];
-      for (const c of x) {
-        const f = new Je(e, i, c.xCoordinate, {
-          ...l,
-          ...c.options || {}
+  }, [e]), G(() => {
+    const t = W.current, i = Array.from(y.current.values()), n = [];
+    if (t && i.length > 0 && x) {
+      const s = pt(), a = i[0];
+      for (const f of x) {
+        const d = {
+          ...s,
+          ...f.options || {}
+        };
+        d.color && (d.color = ee(d.color, d.color));
+        const v = new Ct(t, a, f.xCoordinate, d);
+        a.attachPrimitive(v), n.push(v);
+      }
+    }
+    return () => {
+      if (i.length > 0) {
+        const s = i[0];
+        for (const a of n)
+          try {
+            s.detachPrimitive(a);
+          } catch {
+          }
+      }
+    };
+  }, [x, e, ce]), G(() => {
+    const t = [], i = [];
+    if (R && R.length > 0) {
+      const n = Array.from(y.current.values())[0], s = ee(
+        "hsl(var(--destructive))",
+        "rgb(239, 68, 68)"
+      );
+      for (const a of R) {
+        if (!Number.isFinite(a.price)) continue;
+        const f = a.seriesLabel ? y.current.get(a.seriesLabel) : n;
+        if (!f) continue;
+        const d = a.color ? ee(a.color, a.color) : s, v = a.lineWidth ?? 1, C = a.lineStyle ?? te.Dashed, A = f.createPriceLine({
+          price: a.price,
+          color: d,
+          lineWidth: v,
+          lineStyle: C,
+          axisLabelVisible: a.axisLabelVisible ?? !0,
+          title: a.title ?? ""
         });
-        i.attachPrimitive(f), r.push(f);
+        t.push({ series: f, line: A });
+        const P = new Tt(
+          f,
+          a.price,
+          d,
+          v,
+          C
+        );
+        f.attachPrimitive(P), i.push({ series: f, primitive: P });
       }
     }
     return () => {
-      if (a.length > 0) {
-        const l = a[0];
-        for (const i of r)
-          l.detachPrimitive(i);
+      for (const { series: n, primitive: s } of i)
+        try {
+          n.detachPrimitive(s);
+        } catch {
+        }
+      for (const { series: n, line: s } of t)
+        try {
+          n.removePriceLine(s);
+        } catch {
+        }
+    };
+  }, [R, e, ce]), G(() => {
+    const t = [];
+    if (E && E.length > 0) {
+      const i = Array.from(y.current.values())[0], n = "rgba(239, 68, 68, 0.12)";
+      for (const s of E) {
+        const a = s.seriesLabel ? y.current.get(s.seriesLabel) : i;
+        if (!a) continue;
+        const f = s.color ? ee(s.color, n) : n, d = new xt(
+          a,
+          s.priceTop,
+          s.priceBottom,
+          f
+        );
+        a.attachPrimitive(d), t.push({ series: a, zone: d });
       }
+    }
+    return () => {
+      for (const { series: i, zone: n } of t)
+        try {
+          i.detachPrimitive(n);
+        } catch {
+        }
     };
-  }, [x, t]), $(() => {
-    const e = R.current;
-    if (!e || !x?.length) {
-      Ne([]);
+  }, [E, e, ce]), G(() => {
+    const t = W.current;
+    if (!t || !x?.length) {
+      Ie([]);
       return;
     }
-    const a = () => {
-      const i = e.timeScale(), c = x.map((f) => i.timeToCoordinate(f.xCoordinate) ?? null);
-      Ne(c);
+    const i = () => {
+      const a = t.timeScale(), f = x.map((d) => a.timeToCoordinate(d.xCoordinate) ?? null);
+      Ie(f), B.current && Be(B.current.clientWidth);
     };
-    a();
-    const r = e.timeScale(), l = () => {
-      a();
+    i();
+    const n = t.timeScale(), s = () => {
+      i();
     };
-    return r.subscribeVisibleLogicalRangeChange(l), () => {
-      r.unsubscribeVisibleLogicalRangeChange(l);
+    return n.subscribeVisibleLogicalRangeChange(s), () => {
+      n.unsubscribeVisibleLogicalRangeChange(s);
     };
-  }, [x, t]);
-  const Z = t.length === 1, we = fe.useMemo(() => {
-    if (Z && t.length > 0) {
-      const e = t[0];
-      if (e.data.length > 0)
-        return e.data[e.data.length - 1];
+  }, [x, e, ce]), ft(() => {
+    et((t) => {
+      const i = {};
+      let n = !1;
+      for (const [s, a] of Fe.current) {
+        if (!a) continue;
+        const f = a.offsetWidth;
+        i[s] = f, t[s] !== f && (n = !0);
+      }
+      return Object.keys(t).length !== Object.keys(i).length && (n = !0), n ? i : t;
+    });
+  });
+  const ue = e.length === 1, ze = xe.useMemo(() => {
+    if (ue && e.length > 0) {
+      const t = e[0];
+      if (t.data.length > 0)
+        return t.data[t.data.length - 1];
     }
-  }, [Z, t]);
-  return /* @__PURE__ */ K(
+  }, [ue, e]);
+  return /* @__PURE__ */ le(
     "div",
     {
-      ref: O,
-      className: he(
+      ref: B,
+      className: ae(
         "relative z-[1] w-full h-full overflow-hidden p-0",
-        v
+        l
       ),
       children: [
-        oe != null && oe !== !1 && Z ? /* @__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: oe }) }) : De && Z && we && /* @__PURE__ */ p(
-          qe,
+        de != null && de !== !1 && ue ? /* @__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: de }) }) : Je && ue && ze && /* @__PURE__ */ w(
+          bt,
           {
-            point: we,
-            xMeasureUnit: g,
-            yMeasureUnit: N,
-            decimals: te
+            point: ze,
+            xMeasureUnit: c,
+            yMeasureUnit: b,
+            decimals: he
           }
         ),
-        Ce && xe && /* @__PURE__ */ p(
-          Ke,
+        Me && ke && /* @__PURE__ */ w(
+          vt,
           {
-            points: Ce,
-            xMeasureUnit: g,
-            yMeasureUnit: N,
-            series: t,
-            position: xe,
-            containerRef: O,
-            decimals: te
+            points: Me,
+            xMeasureUnit: c,
+            yMeasureUnit: b,
+            series: e,
+            position: ke,
+            containerRef: B,
+            decimals: he
           }
         ),
-        u && /* @__PURE__ */ p(et, { series: t, onUnselect: D }),
-        x && x.length > 0 && Se.length === x.length && /* @__PURE__ */ p(
+        u && /* @__PURE__ */ w(Mt, { series: e, onUnselect: h }),
+        x && x.length > 0 && De.length === x.length && /* @__PURE__ */ w(
           "div",
           {
             className: "absolute inset-0 z-[5] pointer-events-none",
             "aria-hidden": !0,
-            children: x.map((e, a) => {
-              const r = Se[a], l = e.options ?? {}, i = l.showLabel !== !1;
-              if (r === null || !i) return null;
-              const { labelText: c, valueStr: f } = Qe(
-                l,
-                N,
-                te
+            children: x.map((t, i) => {
+              const n = De[i], s = t.options ?? {}, a = s.showLabel !== !1;
+              if (n === null || !a) return null;
+              const { labelText: f, valueStr: d } = Vt(
+                s,
+                b,
+                he
+              ), v = s.tooltipText ?? "";
+              if (!(f || d || v)) return null;
+              const A = s.labelBackgroundColor ?? s.color ?? "hsl(var(--background))", P = s.labelTextColor ?? "hsl(var(--foreground))", _ = `${String(t.xCoordinate)}-${f}-${v}`, p = Pt(
+                n,
+                Ye,
+                Ue[i]
               );
-              if (!(c || f)) return null;
-              const m = l.labelBackgroundColor ?? l.color ?? "hsl(var(--background))", T = l.labelTextColor ?? "hsl(var(--foreground))", k = `${String(e.xCoordinate)}-${c}`;
-              return /* @__PURE__ */ K(
+              return /* @__PURE__ */ le(
                 "div",
                 {
-                  className: "absolute top-2 px-2 py-1 rounded text-xs font-medium whitespace-nowrap shadow-sm border border-border",
+                  ref: (S) => {
+                    Fe.current.set(i, S);
+                  },
+                  className: ae(
+                    "group absolute top-2 px-2 py-1 rounded text-xs font-medium whitespace-nowrap shadow-sm border border-border",
+                    v && "pointer-events-auto cursor-default"
+                  ),
                   style: {
-                    left: r,
-                    transform: "translateX(-50%)",
-                    backgroundColor: m,
-                    color: T
+                    ...p,
+                    backgroundColor: A,
+                    color: P
                   },
                   children: [
-                    c && /* @__PURE__ */ p("span", { className: "block", children: c }),
-                    f && /* @__PURE__ */ p("span", { className: he("block", c && "mt-0.5"), children: f })
+                    f && /* @__PURE__ */ w("span", { className: "block", children: f }),
+                    d && /* @__PURE__ */ w("span", { className: ae("block", f && "mt-0.5"), children: d }),
+                    v && /* @__PURE__ */ w(
+                      "span",
+                      {
+                        className: "pointer-events-none absolute right-0 top-full z-10 mt-1 hidden w-[280px] whitespace-normal rounded border border-border bg-popover px-2.5 py-1.5 text-left leading-snug text-popover-foreground shadow-md group-hover:block",
+                        role: "tooltip",
+                        children: v
+                      }
+                    )
                   ]
                 },
-                k
+                _
               );
             })
           }
         ),
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ w(
           "div",
           {
-            ref: ae,
+            ref: ge,
             className: "LightweightChart w-full h-full overflow-hidden"
           }
         )
@@ -669,73 +1011,87 @@ function ht({
     }
   );
 }
-function et({
-  series: t,
-  onUnselect: v
+function Mt({
+  series: e,
+  onUnselect: l,
+  inline: u = !1
 }) {
-  return /* @__PURE__ */ p("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: t.map((u, D) => {
-    const g = Le(D), N = (u.lineColor ?? u.color) || g.line, _ = u.data.length === 0;
-    return /* @__PURE__ */ K(
-      "div",
-      {
-        className: he(
-          "flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
-          _ && "opacity-50"
-        ),
-        children: [
-          /* @__PURE__ */ p(
-            "div",
-            {
-              className: "w-3 h-3 rounded-sm",
-              style: { backgroundColor: N }
-            }
-          ),
-          /* @__PURE__ */ K("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
-            u.label,
-            _ && " (no data)"
-          ] }),
-          v && /* @__PURE__ */ p(
-            "button",
-            {
-              type: "button",
-              onClick: (x) => {
-                x.stopPropagation(), v(u.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 ${u.label}`,
-              children: /* @__PURE__ */ K(
-                "svg",
+  const h = e.every((c) => c.data.length === 0);
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      className: ae(
+        "flex flex-wrap gap-2",
+        u ? "items-center" : "absolute top-0 left-2 z-[10]"
+      ),
+      children: e.map((c, b) => {
+        const L = Ke(b), x = (c.lineColor ?? c.color) || L.line, R = !h && c.data.length === 0;
+        return /* @__PURE__ */ le(
+          "div",
+          {
+            className: ae(
+              "flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
+              R && "opacity-50"
+            ),
+            children: [
+              /* @__PURE__ */ w(
+                "div",
                 {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "12",
-                  height: "12",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  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" })
-                  ]
+                  className: "w-3 h-3 rounded-sm",
+                  style: { backgroundColor: x }
+                }
+              ),
+              /* @__PURE__ */ le("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
+                c.label,
+                R && " (no data)"
+              ] }),
+              l && /* @__PURE__ */ w(
+                "button",
+                {
+                  type: "button",
+                  onClick: (E) => {
+                    E.stopPropagation(), l(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}`,
+                  children: /* @__PURE__ */ le(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "12",
+                      height: "12",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "text-muted-foreground hover:text-foreground",
+                      "aria-hidden": "true",
+                      children: [
+                        /* @__PURE__ */ w("title", { children: "Close" }),
+                        /* @__PURE__ */ w("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                        /* @__PURE__ */ w("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                      ]
+                    }
+                  )
                 }
               )
-            }
-          )
-        ]
-      },
-      u.label
-    );
-  }) });
+            ]
+          },
+          c.label
+        );
+      })
+    }
+  );
 }
 export {
-  me as DEFAULT_SERIES_COLORS,
-  ht as Graph,
-  Le as getSeriesColorPalette,
-  Ze as getStepForwardValue,
-  Qe as getVerticalLineTooltipContent
+  _e as DEFAULT_SERIES_COLORS,
+  Ot as Graph,
+  Mt as GraphLegend,
+  Ze as VERTICAL_LINE_LABEL_EDGE_PADDING,
+  Ke as getSeriesColorPalette,
+  Lt as getStepForwardValue,
+  Pt as getVerticalLineLabelStyle,
+  Vt as getVerticalLineTooltipContent
 };