@canplot/react 0.1.24 → 0.2.0

package/dist/canplot.mjs

@@ -1,56 +1,58 @@
-import { jsxs as ft, jsx as A, Fragment as Ut } from "react/jsx-runtime";
-import Q, { createContext as Mt, useContext as tt, useRef as _, useLayoutEffect as z, useEffect as Et, version as Xt, forwardRef as Kt, useMemo as et, useState as V, useId as Ot } from "react";
-import { createStore as Pt, useStore as kt } from "zustand";
-const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t) => e + (t ?? 0), 0), pe = (n, e) => {
-  let t = 0;
-  for (let s = 0; s < n.length; s++)
-    Math.abs(n[s] - e) < Math.abs(n[t] - e) && (t = s);
-  return t;
-}, Ft = (n, e, t, s) => {
-  const { min: o, max: i, origin: r } = I(n, t), l = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, d = (r === "x" ? l.width : l.height) / (i - o);
-  return e / d;
-}, I = (n, e) => {
-  const t = n.scales.find((s) => s.id === e);
-  if (!t)
-    throw new Error(`Scale ${e} not found`);
-  return t;
-}, D = (n, e) => {
-  const t = window.devicePixelRatio || 1;
-  n.lineCap = e?.lineCap ?? "butt", n.lineDashOffset = t * (e?.lineDashOffset ?? 0), n.lineJoin = e?.lineJoin ?? "miter", n.lineWidth = t * (e?.lineWidth ?? 1), n.miterLimit = t * (e?.miterLimit ?? 10), n.strokeStyle = e?.strokeStyle ?? "black", n.fillStyle = e?.fillStyle ?? n.strokeStyle, n.font = e?.font ?? `${10 * t}px sans-serif`, n.textAlign = e?.textAlign ?? "start", n.direction = e?.direction ?? "inherit", n.textBaseline = e?.textBaseline ?? "alphabetic", n.fontKerning = e?.fontKerning ?? "auto";
-}, mt = (n, e, t, s) => {
-  const o = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, { min: i, max: r, origin: l } = I(n, t), d = (l === "x" ? o.width : o.height) / (r - i);
-  return e * d;
-}, H = (n, e, t, s) => {
-  const { min: o, origin: i } = I(n, t), r = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, l = mt(n, e - o, t, s);
-  return i === "x" ? j(
-    r.x + l,
+var Xe = Object.defineProperty;
+var Fe = (e, t, n) => t in e ? Xe(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var X = (e, t, n) => Fe(e, typeof t != "symbol" ? t + "" : t, n);
+import { jsx as A, jsxs as me, Fragment as Ke } from "react/jsx-runtime";
+import ne, { version as Oe, createContext as pe, useRef as k, useCallback as Ye, forwardRef as ze, useState as O, useLayoutEffect as B, useMemo as G, useContext as H, useId as Be, useEffect as Ne } from "react";
+const W = (e, t, n) => Math.min(Math.max(e, t), n), wt = (e) => e.reduce((t, n) => t + (n ?? 0), 0), bt = (e, t) => {
+  let n = 0;
+  for (let s = 0; s < e.length; s++)
+    Math.abs(e[s] - t) < Math.abs(e[n] - t) && (n = s);
+  return n;
+}, $e = (e, t, n, s) => {
+  const { min: o, max: i, origin: r } = _(e, n), c = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, a = (r === "x" ? c.width : c.height) / (i - o);
+  return t / a;
+}, _ = (e, t) => {
+  const n = e.scales.find((s) => s.id === t);
+  if (!n)
+    throw new Error(`Scale ${t} not found`);
+  return n;
+}, L = (e, t) => {
+  const n = window.devicePixelRatio || 1;
+  e.lineCap = t?.lineCap ?? "butt", e.lineDashOffset = n * (t?.lineDashOffset ?? 0), e.lineJoin = t?.lineJoin ?? "miter", e.lineWidth = n * (t?.lineWidth ?? 1), e.miterLimit = n * (t?.miterLimit ?? 10), e.strokeStyle = t?.strokeStyle ?? "black", e.fillStyle = t?.fillStyle ?? e.strokeStyle, e.font = t?.font ?? `${10 * n}px sans-serif`, e.textAlign = t?.textAlign ?? "start", e.direction = t?.direction ?? "inherit", e.textBaseline = t?.textBaseline ?? "alphabetic", e.fontKerning = t?.fontKerning ?? "auto";
+}, ye = (e, t, n, s) => {
+  const o = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, { min: i, max: r, origin: c } = _(e, n), a = (c === "x" ? o.width : o.height) / (r - i);
+  return t * a;
+}, q = (e, t, n, s) => {
+  const { min: o, origin: i } = _(e, n), r = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, c = ye(e, t - o, n, s);
+  return i === "x" ? W(
+    r.x + c,
     r.x - 10 * r.width,
     r.x + 11 * r.width
-  ) : j(
-    r.y + r.height - l,
+  ) : W(
+    r.y + r.height - c,
     r.y - 10 * r.height,
     r.y + 11 * r.height
   );
-}, xe = (n, e, t) => {
-  const { min: s, max: o } = I(n, t);
-  return j(e, s, o);
-}, Y = (n, e, t) => {
-  const s = t === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS;
-  return j(e, s.x, s.x + s.width);
-}, B = (n, e, t) => {
-  const s = t === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS;
-  return j(e, s.y, s.y + s.height);
-}, ut = (n, e, t) => {
-  const { min: s, max: o } = I(n, t);
-  return e >= s && e <= o;
-}, L = (n, e, t, s) => {
-  const { min: o, max: i, origin: r } = I(n, t), l = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, d = r === "x" ? (e - l.x) / l.width : (l.height - e + l.y) / l.height;
-  return o + d * (i - o);
-}, zt = (n) => {
-  const { ctx: e, scales: t } = n;
-  for (const s of t) {
+}, xt = (e, t, n) => {
+  const { min: s, max: o } = _(e, n);
+  return W(t, s, o);
+}, $ = (e, t, n) => {
+  const s = n === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS;
+  return W(t, s.x, s.x + s.width);
+}, V = (e, t, n) => {
+  const s = n === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS;
+  return W(t, s.y, s.y + s.height);
+}, he = (e, t, n) => {
+  const { min: s, max: o } = _(e, n);
+  return t >= s && t <= o;
+}, U = (e, t, n, s) => {
+  const { min: o, max: i, origin: r } = _(e, n), c = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, a = r === "x" ? (t - c.x) / c.width : (c.height - t + c.y) / c.height;
+  return o + a * (i - o);
+}, Ve = (e) => {
+  const { ctx: t, scales: n } = e;
+  for (const s of n) {
     if (!s.axis) continue;
-    e.save(), D(e, {
+    t.save(), L(t, {
       strokeStyle: "black",
       fillStyle: "black",
       lineWidth: 1,
@@ -59,140 +61,107 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t)
     const o = s.axis.canvasRect;
     if (s.origin === "x") {
       if (s.axis.position === "bottom")
-        e.beginPath(), e.moveTo(o.x, o.y), e.lineTo(o.x + o.width, o.y), e.stroke();
+        t.beginPath(), t.moveTo(o.x, o.y), t.lineTo(o.x + o.width, o.y), t.stroke();
       else if (s.axis.position === "top") {
         const i = o.y + o.height;
-        e.beginPath(), e.moveTo(o.x, i), e.lineTo(o.x + o.width, i), e.stroke();
+        t.beginPath(), t.moveTo(o.x, i), t.lineTo(o.x + o.width, i), t.stroke();
       }
     } else if (s.axis.position === "left") {
       const i = o.x + o.width;
-      e.beginPath(), e.moveTo(i, o.y), e.lineTo(i, o.y + o.height), e.stroke();
-    } else s.axis.position === "right" && (e.beginPath(), e.moveTo(o.x, o.y), e.lineTo(o.x, o.y + o.height), e.stroke());
-    e.restore();
+      t.beginPath(), t.moveTo(i, o.y), t.lineTo(i, o.y + o.height), t.stroke();
+    } else s.axis.position === "right" && (t.beginPath(), t.moveTo(o.x, o.y), t.lineTo(o.x, o.y + o.height), t.stroke());
+    t.restore();
   }
-}, dt = {
-  TOP: 400,
-  MIDDLE: 300,
-  BOTTOM: 200,
-  BACKGROUND: 100
-}, Yt = () => Pt((n, e) => {
-  const t = () => {
-    const s = e()._frame;
-    if (!s) throw new Error("No frame set in frame store");
-    return s;
-  };
-  return {
-    _frame: null,
-    getFrame: t,
-    getCtx: () => t().ctx,
-    clampXPosToChartArea: (s, o) => Y(t(), s, o ?? "canvas"),
-    clampYPosToChartArea: (s, o) => B(t(), s, o ?? "canvas"),
-    valToPos: (s, o, i) => H(t(), s, o, i ?? "canvas"),
-    valToPxDistance: (s, o, i) => mt(
-      t(),
-      s,
-      o,
-      i ?? "canvas"
-    ),
-    valFits: (s, o) => ut(t(), s, o),
-    getScale: (s) => I(t(), s),
-    _listeners: [],
-    _subscribe: (s, o) => (e()._listeners.push([o, s]), e()._listeners.sort((i, r) => i[0] - r[0]), () => {
-      const i = e()._listeners.findIndex(([, r]) => r === s);
-      i !== -1 && e()._listeners.splice(i, 1);
-    }),
-    _notifyListeners: (s) => {
-      for (const [, o] of e()._listeners)
-        o(s);
-    }
-  };
-}), Bt = () => Pt((n) => ({
-  notify: () => {
-    n((e) => ({ version: e.version + 1 }));
-  },
-  version: 0
-})), pt = Mt(null), Rt = Mt(null), F = (n, e, t) => {
-  const s = tt(pt), o = tt(Rt);
-  if (!s || !o)
-    throw new Error("useFrame must be used within a CanPlot component");
-  const i = _(e);
-  i.current = e, z(() => (Promise.resolve().then(() => {
-    i.current(s.getState());
-  }), s.getState()._subscribe(
-    (r) => {
-      r._frame && i.current(r);
-    },
-    typeof n == "number" ? n : dt[n]
-  )), [s, n]), Et(() => {
-    o.getState().notify();
-  }, [o, ...t]);
-}, xt = (n) => {
-  const e = tt(pt);
-  if (!e)
-    throw new Error("useFrame must be used within a CanPlot component");
-  return kt(
-    e,
-    n ?? ((t) => t.getFrame())
-  );
 };
-function Nt(n) {
-  return (e) => {
-    for (const t of n) ht(t, e);
+function je(e) {
+  return (t) => {
+    for (const n of e) fe(n, t);
   };
 }
-function $t(n) {
-  return (e) => {
-    const t = [];
-    for (const s of n) {
-      const o = ht(s, e), i = typeof o == "function";
-      t.push(i ? o : () => ht(s, null));
+function He(e) {
+  return (t) => {
+    const n = [];
+    for (const s of e) {
+      const o = fe(s, t), i = typeof o == "function";
+      n.push(i ? o : () => fe(s, null));
     }
     return () => {
-      for (const s of t) s();
+      for (const s of n) s();
     };
   };
 }
-function ht(n, e) {
-  if (typeof n == "function")
-    return n(e);
-  n && (n.current = e);
+function fe(e, t) {
+  if (typeof e == "function")
+    return e(t);
+  e && (e.current = t);
 }
-var Vt = parseInt(Xt.split(".")[0], 10) >= 19 ? $t : Nt;
-const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) => {
-  const i = _(null), r = _(null), l = Ht(r), d = et(Yt, []), u = et(Bt, []);
-  z(() => {
-    d.setState({
-      _frame: Wt(n, l, i.current)
-    });
-    const a = d.getState();
-    a._notifyListeners(a);
-  }, [n, l, i, d]), z(() => d.getState()._subscribe((a) => {
-    const m = a._frame?.ctx;
-    m && m.clearRect(0, 0, m.canvas.width, m.canvas.height);
-  }, dt.BACKGROUND), [d]), z(() => d.getState()._subscribe((a) => {
-    a._frame && zt(a._frame);
-  }, dt.BOTTOM), [d]), z(() => {
-    let a = !1;
-    return u.subscribe(() => {
-      a || (a = !0, window.requestAnimationFrame(() => {
-        a = !1, d.setState((c) => ({
-          _frame: c._frame ? { ...c._frame } : null
-        }));
-        const m = d.getState();
-        m._notifyListeners(m);
-      }));
-    });
-  }, [u, d]);
-  const h = window.devicePixelRatio || 1;
-  return /* @__PURE__ */ ft(
+var We = parseInt(Oe.split(".")[0], 10) >= 19 ? He : je;
+const Ee = pe({
+  listeners: [],
+  subscribe: () => () => {
+  },
+  notifyListeners: () => {
+  }
+}), qe = () => {
+  const e = [];
+  return { listeners: e, subscribe: (s, o) => (e.push([o, s]), e.sort((i, r) => i[0] - r[0]), () => {
+    const i = e.findIndex(([, r]) => r === s);
+    i !== -1 && e.splice(i, 1);
+  }), notifyListeners: () => {
+    for (const [, s] of e)
+      s();
+  } };
+}, ve = pe(null), Re = pe(() => {
+}), Ge = ({ onRequestUpdate: e, children: t }) => {
+  const n = k(e);
+  n.current = e;
+  const s = Ye(() => {
+    n.current();
+  }, [n]);
+  return /* @__PURE__ */ A(Re.Provider, { value: s, children: t });
+}, ke = {
+  TOP: 400,
+  MIDDLE: 300,
+  BOTTOM: 200,
+  BACKGROUND: 100
+};
+class Ae {
+  constructor() {
+    X(this, "_frame", null);
+    X(this, "clampXPosToChartArea", (t, n = "canvas") => $(this.frame, t, n));
+    X(this, "clampYPosToChartArea", (t, n = "canvas") => V(this.frame, t, n));
+    X(this, "valToPos", (t, n, s = "canvas") => q(this.frame, t, n, s));
+    X(this, "valToPxDistance", (t, n, s = "canvas") => ye(this.frame, t, n, s));
+    X(this, "valFits", (t, n) => he(this.frame, t, n));
+    X(this, "getScale", (t) => _(this.frame, t));
+  }
+  _updateFrame(t) {
+    this._frame = t;
+  }
+  get frame() {
+    if (!this._frame)
+      throw new Error("Frame not set in FrameDrawer");
+    return this._frame;
+  }
+  get ctx() {
+    return this.frame.ctx;
+  }
+}
+const Tt = ze(({ configuration: e, children: t, style: n, className: s }, o) => {
+  const i = k(null), r = k(null), c = Je(r), [a, l] = O(() => null);
+  B(() => {
+    l(Qe(e, c, i.current));
+  }, [e, c, i]);
+  const d = window.devicePixelRatio || 1;
+  return /* @__PURE__ */ me(
     "div",
     {
-      ref: Vt([o, r]),
+      ref: We([o, r]),
       className: s,
       style: {
         position: "relative",
         overflow: "hidden",
-        ...t
+        ...n
       },
       "data-canplotroot": !0,
       children: [
@@ -200,92 +169,111 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
           "canvas",
           {
             ref: i,
-            width: l.width * h,
-            height: l.height * h,
+            width: c.width * d,
+            height: c.height * d,
             style: {
               inset: 0,
               position: "absolute",
-              width: `${l.width}px`,
-              height: `${l.height}px`
+              width: `${c.width}px`,
+              height: `${c.height}px`
             }
           }
         ),
-        /* @__PURE__ */ A(
-          jt,
-          {
-            frameStore: d,
-            updateRequestStore: u,
-            children: e
-          }
-        )
+        a && /* @__PURE__ */ A(Ze, { frame: a, children: t })
       ]
     }
   );
-}), jt = ({ frameStore: n, updateRequestStore: e, children: t }) => kt(n, (o) => !!o._frame) ? /* @__PURE__ */ A(Rt.Provider, { value: e, children: /* @__PURE__ */ A(pt.Provider, { value: n, children: t }) }) : null, Ht = (n) => {
-  const [e, t] = V({
+}), Ze = ({ frame: e, children: t }) => {
+  const n = G(qe, []), [s, o] = O(0);
+  B(() => {
+    e?.ctx.clearRect(0, 0, e.ctx.canvas.width, e.ctx.canvas.height);
+  }, [e, s]);
+  const i = k(null);
+  return i.current = e, B(() => {
+    n.subscribe(() => {
+      i.current && Ve(i.current);
+    }, ke.BOTTOM);
+  }, [n]), B(() => {
+    let r = null;
+    return r = window.requestAnimationFrame(() => {
+      r = null, n.notifyListeners();
+    }), () => {
+      r && cancelAnimationFrame(r);
+    };
+  }, [s, i, n]), /* @__PURE__ */ A(Ee.Provider, { value: n, children: /* @__PURE__ */ A(ve.Provider, { value: e, children: /* @__PURE__ */ A(
+    Ge,
+    {
+      onRequestUpdate: () => {
+        o((r) => r + 1);
+      },
+      children: t
+    }
+  ) }) });
+}, Je = (e) => {
+  const [t, n] = O({
     width: 0,
     height: 0
-  }), [s] = V(() => new ResizeObserver((o) => {
+  }), [s] = O(() => new ResizeObserver((o) => {
     for (const i of o) {
-      const r = Math.round(i.contentRect.width), l = Math.round(i.contentRect.height);
-      t(
-        (d) => d.width !== r || d.height !== l ? { ...d, width: r, height: l } : d
+      const r = Math.round(i.contentRect.width), c = Math.round(i.contentRect.height);
+      n(
+        (a) => a.width !== r || a.height !== c ? { ...a, width: r, height: c } : a
       );
     }
   }));
-  return z(() => {
-    if (!n.current) return;
-    const o = n.current.clientWidth, i = n.current.clientHeight;
-    return t(
+  return B(() => {
+    if (!e.current) return;
+    const o = e.current.clientWidth, i = e.current.clientHeight;
+    return n(
       (r) => r.width !== o || r.height !== i ? { ...r, width: o, height: i } : r
-    ), s.observe(n.current, { box: "border-box" }), () => s.disconnect();
-  }, [s, n]), e;
-}, Wt = (n, e, t) => {
-  const s = t?.getContext("2d");
+    ), s.observe(e.current, { box: "border-box" }), () => s.disconnect();
+  }, [s, e]), t;
+}, Qe = (e, t, n) => {
+  const s = n?.getContext("2d");
   if (!s) return null;
   const o = window.devicePixelRatio || 1;
-  if (e.width === 0 || e.height === 0)
+  if (t.width === 0 || t.height === 0)
     return null;
   const i = {
-    x: n.padding.left,
-    y: n.padding.top,
-    width: e.width - n.padding.left - n.padding.right,
-    height: e.height - n.padding.top - n.padding.bottom
+    x: e.padding.left,
+    y: e.padding.top,
+    width: t.width - e.padding.left - e.padding.right,
+    height: t.height - e.padding.top - e.padding.bottom
   };
-  for (const c of n.scales)
-    c.axis && (c.origin === "x" ? (c.axis.position === "bottom" || c.axis.position === "top") && (i.height = Math.max(
+  for (const u of e.scales)
+    u.axis && (u.origin === "x" ? (u.axis.position === "bottom" || u.axis.position === "top") && (i.height = Math.max(
       0,
-      i.height - c.axis.size
-    ), c.axis.position === "top" && (i.y += c.axis.size)) : (c.axis.position === "left" || c.axis.position === "right") && (i.width = Math.max(0, i.width - c.axis.size), c.axis.position === "left" && (i.x += c.axis.size)));
+      i.height - u.axis.size
+    ), u.axis.position === "top" && (i.y += u.axis.size)) : (u.axis.position === "left" || u.axis.position === "right") && (i.width = Math.max(0, i.width - u.axis.size), u.axis.position === "left" && (i.x += u.axis.size)));
   const r = {
     x: i.x * o,
     y: i.y * o,
     width: i.width * o,
     height: i.height * o
-  }, l = [];
-  let d = n.padding.left * o, u = s.canvas.width - n.padding.right * o, h = s.canvas.height - n.padding.bottom * o, a = n.padding.top * o;
-  for (const c of n.scales) {
-    if (!c.axis) {
-      l.push({ ...c, axis: null });
+  }, c = [];
+  let a = e.padding.left * o, l = s.canvas.width - e.padding.right * o, d = s.canvas.height - e.padding.bottom * o, h = e.padding.top * o;
+  for (const u of e.scales) {
+    if (!u.axis) {
+      c.push({ ...u, axis: null });
       continue;
     }
-    let x;
-    if (c.origin === "x")
-      switch (c.axis.position) {
+    let f;
+    if (u.origin === "x")
+      switch (u.axis.position) {
         case "bottom":
-          h -= c.axis.size * o, x = {
+          d -= u.axis.size * o, f = {
             x: i.x,
-            y: h / o,
+            y: d / o,
             width: i.width,
-            height: c.axis.size
+            height: u.axis.size
           };
           break;
         case "top":
-          a += c.axis.size * o, x = {
+          h += u.axis.size * o, f = {
             x: i.x,
-            y: a / o - c.axis.size,
+            y: h / o - u.axis.size,
             width: i.width,
-            height: c.axis.size
+            height: u.axis.size
           };
           break;
         case "left":
@@ -293,20 +281,20 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
           throw new Error("Invalid axis position for x origin");
       }
     else
-      switch (c.axis.position) {
+      switch (u.axis.position) {
         case "left":
-          d += c.axis.size * o, x = {
-            x: d / o - c.axis.size,
+          a += u.axis.size * o, f = {
+            x: a / o - u.axis.size,
             y: i.y,
-            width: c.axis.size,
+            width: u.axis.size,
             height: i.height
           };
           break;
         case "right":
-          u -= c.axis.size * o, x = {
-            x: u / o,
+          l -= u.axis.size * o, f = {
+            x: l / o,
             y: i.y,
-            width: c.axis.size,
+            width: u.axis.size,
             height: i.height
           };
           break;
@@ -314,300 +302,313 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
         case "bottom":
           throw new Error("Invalid axis position for y origin");
       }
-    const f = {
-      x: x.x * o,
-      y: x.y * o,
-      width: x.width * o,
-      height: x.height * o
+    const v = {
+      x: f.x * o,
+      y: f.y * o,
+      width: f.width * o,
+      height: f.height * o
     };
-    l.push({
-      ...c,
+    c.push({
+      ...u,
       axis: {
-        ...c.axis,
-        cssRect: x,
-        canvasRect: f
+        ...u.axis,
+        cssRect: f,
+        canvasRect: v
       }
     });
   }
   return {
     ctx: s,
     dpr: o,
-    padding: n.padding,
-    scales: l,
+    padding: e.padding,
+    scales: c,
     chartAreaCSS: i,
     chartAreaCanvasPX: r
   };
-}, ve = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (F(
-  n,
-  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: l, valToPos: d }) => {
-    const u = i();
-    u.save(), u.beginPath(), D(u, o);
-    for (const h of e) {
-      const a = r(d(h.x, t)), m = l(d(h.y, s));
-      u.lineTo(a, m);
+}, N = (e, t, n) => {
+  const s = H(ve), o = H(Re), i = H(Ee);
+  if (!s || !o)
+    throw new Error("useFrame must be used within a CanPlot component");
+  const [r] = O(() => new Ae());
+  r._updateFrame(s);
+  const c = k(r);
+  c.current = r;
+  const a = k(t);
+  a.current = t, B(() => i.subscribe(
+    () => {
+      a.current(r);
+    },
+    typeof e == "number" ? e : ke[e]
+  ), [i, e, r]), B(() => {
+    o();
+  }, [o, ...n]);
+}, ge = () => {
+  const e = H(ve);
+  if (!e)
+    throw new Error("useFrame must be used within a CanPlot component");
+  return G(() => {
+    const t = new Ae();
+    return t._updateFrame(e), t;
+  }, [e]);
+}, St = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (N(
+  e,
+  ({ ctx: i, clampXPosToChartArea: r, clampYPosToChartArea: c, valToPos: a }) => {
+    i.save(), i.beginPath(), L(i, o);
+    for (const l of t) {
+      const d = r(a(l.x, n)), h = c(a(l.y, s));
+      i.lineTo(d, h);
     }
-    u.stroke(), u.restore();
+    i.stroke(), i.restore();
   },
-  [e, t, s, o]
-), null), ge = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, radius: o = 5, style: i, globalAlpha: r }) => (F(
-  n,
-  ({ getCtx: l, valToPos: d, valFits: u }) => {
-    const h = l();
-    h.save(), h.beginPath();
-    const a = new Path2D();
-    D(h, i), r !== void 0 && (h.globalAlpha = r);
-    for (const m of e) {
-      if (!u(m.x, t) || !u(m.y, s))
+  [t, n, s, o]
+), null), Ct = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, radius: o = 5, style: i, globalAlpha: r }) => (N(
+  e,
+  ({ ctx: c, valToPos: a, valFits: l }) => {
+    c.save(), c.beginPath();
+    const d = new Path2D();
+    L(c, i), r !== void 0 && (c.globalAlpha = r);
+    for (const h of t) {
+      if (!l(h.x, n) || !l(h.y, s))
         continue;
-      const c = d(m.x, t), x = d(m.y, s);
-      a.moveTo(c + o, x), a.arc(c, x, o, 0, Math.PI * 2);
+      const m = a(h.x, n), u = a(h.y, s);
+      d.moveTo(m + o, u), d.arc(m, u, o, 0, Math.PI * 2);
     }
-    h.fill(a), h.stroke(a), h.restore();
+    c.fill(d), c.stroke(d), c.restore();
   },
-  [e, t, s, o, i, r]
-), null), we = ({
-  data: n,
-  xScaleId: e,
-  yScaleId: t,
+  [t, n, s, o, i, r]
+), null), Pt = ({
+  data: e,
+  xScaleId: t,
+  yScaleId: n,
   style: s,
   barWidth: o,
   xPositionOffset: i,
   radius: r,
-  layer: l = "MIDDLE"
-}) => (F(
-  l,
+  layer: c = "MIDDLE"
+}) => (N(
+  c,
   ({
-    getCtx: d,
-    valToPxDistance: u,
-    valToPos: h,
-    clampXPosToChartArea: a,
+    ctx: a,
+    valToPxDistance: l,
+    valToPos: d,
+    clampXPosToChartArea: h,
     clampYPosToChartArea: m
   }) => {
-    if (n.length === 0) return;
-    const c = d();
-    c.save(), D(c, s);
-    const x = u(o, e);
-    c.beginPath();
-    for (const f of n) {
-      const v = h(f.x, e) - x / 2 + i * x, g = m(h(0, t)), S = m(h(f.y, t)), y = g - S, w = a(v), b = a(v + x) - w;
-      r ? c.roundRect(
-        w,
-        S,
+    if (e.length === 0) return;
+    a.save(), L(a, s);
+    const u = l(o, t);
+    a.beginPath();
+    for (const f of e) {
+      const p = d(f.x, t) - u / 2 + i * u, g = m(d(0, n)), w = m(d(f.y, n)), T = g - w, b = h(p), y = h(p + u) - b;
+      r ? a.roundRect(
         b,
+        w,
         y,
+        T,
         r
-      ) : c.rect(w, S, b, y);
+      ) : a.rect(b, w, y, T);
     }
-    c.closePath(), c.fill(), s?.strokeStyle && c.stroke(), c.restore();
+    a.closePath(), a.fill(), s?.strokeStyle && a.stroke(), a.restore();
   },
-  [n, e, t, s, o, i, r]
-), null), be = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (F(
-  n,
-  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: l, valToPos: d }) => {
-    const u = [];
-    for (const a of e) {
-      const m = r(d(a.x, t)), c = l(d(a.y[0], s)), x = l(d(a.y[1], s));
-      u.push({ x: m, y: c }), u.unshift({ x: m, y: x });
+  [e, t, n, s, o, i, r]
+), null), Mt = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (N(
+  e,
+  ({ ctx: i, clampXPosToChartArea: r, clampYPosToChartArea: c, valToPos: a }) => {
+    const l = [];
+    for (const d of t) {
+      const h = r(a(d.x, n)), m = c(a(d.y[0], s)), u = c(a(d.y[1], s));
+      l.push({ x: h, y: m }), l.unshift({ x: h, y: u });
     }
-    const h = i();
-    if (u.length > 0) {
-      h.save(), h.beginPath(), D(h, o), h.moveTo(u[0].x, u[0].y);
-      for (const a of u)
-        h.lineTo(a.x, a.y);
-      h.closePath(), h.fill(), h.restore();
+    if (l.length > 0) {
+      i.save(), i.beginPath(), L(i, o), i.moveTo(l[0].x, l[0].y);
+      for (const d of l)
+        i.lineTo(d.x, d.y);
+      i.closePath(), i.fill(), i.restore();
     }
   },
-  [e, t, s, o]
-), null), Se = ({ layer: n = "MIDDLE", data: e, stroked: t, xScaleId: s, yScaleId: o, style: i }) => (F(
-  n,
-  ({ getCtx: r, clampXPosToChartArea: l, clampYPosToChartArea: d, valToPos: u }) => {
-    const h = [], a = r();
-    for (const f of e) {
-      const p = l(u(f.x, s)), v = d(u(f.y, o));
-      h.push({ x: p, y: v });
+  [t, n, s, o]
+), null), Et = ({ layer: e = "MIDDLE", data: t, stroked: n, xScaleId: s, yScaleId: o, style: i }) => (N(
+  e,
+  ({ ctx: r, clampXPosToChartArea: c, clampYPosToChartArea: a, valToPos: l }) => {
+    const d = [];
+    for (const f of t) {
+      const v = c(l(f.x, s)), p = a(l(f.y, o));
+      d.push({ x: v, y: p });
     }
-    const m = h.at(0), c = h.at(-1);
-    if (!m || !c)
+    const h = d.at(0), m = d.at(-1);
+    if (!h || !m)
       return;
-    const x = d(u(0, o));
-    a.save(), a.beginPath(), D(a, i), a.moveTo(m.x, x);
-    for (const f of h)
-      a.lineTo(f.x, f.y);
-    if (a.lineTo(c.x, x), a.closePath(), a.fill(), t) {
-      a.beginPath(), a.moveTo(m.x, m.y);
-      for (const f of h)
-        a.lineTo(f.x, f.y);
-      a.stroke();
+    const u = a(l(0, o));
+    r.save(), r.beginPath(), L(r, i), r.moveTo(h.x, u);
+    for (const f of d)
+      r.lineTo(f.x, f.y);
+    if (r.lineTo(m.x, u), r.closePath(), r.fill(), n) {
+      r.beginPath(), r.moveTo(h.x, h.y);
+      for (const f of d)
+        r.lineTo(f.x, f.y);
+      r.stroke();
     }
-    a.restore();
+    r.restore();
   },
-  [e, t, s, o, i]
-), null), Te = (n, e) => xt(
-  ({
-    clampXPosToChartArea: t,
-    clampYPosToChartArea: s,
-    getScale: o,
-    valToPos: i,
-    valFits: r
-  }) => {
-    const l = {};
-    for (const d in n) {
-      const u = n[d];
-      switch (u.exceeding) {
+  [t, n, s, o, i]
+), null), Rt = (e, t) => {
+  const n = ge();
+  return G(() => {
+    const { valToPos: s, valFits: o, getScale: i, clampXPosToChartArea: r, clampYPosToChartArea: c } = n, a = {};
+    for (const l in e) {
+      const d = e[l];
+      switch (d.exceeding) {
         case "discard": {
-          if (r(u.value, u.scaleId)) {
-            const h = i(u.value, u.scaleId, e);
-            l[d] = h;
+          if (o(d.value, d.scaleId)) {
+            const h = s(d.value, d.scaleId, t);
+            a[l] = h;
           }
           break;
         }
         case "clamp": {
-          const h = i(u.value, u.scaleId, e);
-          l[d] = o(u.scaleId)?.origin === "x" ? t(h, e) : s(h, e);
+          const h = s(d.value, d.scaleId, t);
+          a[l] = i(d.scaleId)?.origin === "x" ? r(h, t) : c(h, t);
           break;
         }
       }
     }
-    return l;
-  }
-), Ce = ({ layer: n = "BOTTOM", scaleId: e, tickStyle: t, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (F(
-  n,
-  ({ getCtx: l, valToPos: d, getScale: u, getFrame: h }) => {
-    const a = l(), m = u(e);
-    if (!m || !m.axis || m.origin !== "x") return;
-    const c = m.axis, x = c.position === "top" ? c.canvasRect.y + c.canvasRect.height : c.canvasRect.y, f = window.devicePixelRatio || 1, p = x, v = (i ?? 6) * f, g = c.position === "top" ? x - v : x + v, S = (o ?? 12) * f;
-    a.save(), a.fontKerning = "auto", D(a, {
-      ...t
-    }), a.beginPath();
-    const y = Array.isArray(r) ? r : r({ ...m, axis: c }, h());
-    for (const { value: w } of y) {
-      const b = d(w, e, "canvas");
-      a.moveTo(b, p), a.lineTo(b, g);
+    return a;
+  }, [e, t, n]);
+}, kt = ({ layer: e = "BOTTOM", scaleId: t, tickStyle: n, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (N(
+  e,
+  ({ ctx: c, valToPos: a, getScale: l, frame: d }) => {
+    const h = l(t);
+    if (!h || !h.axis || h.origin !== "x") return;
+    const m = h.axis, u = m.position === "top" ? m.canvasRect.y + m.canvasRect.height : m.canvasRect.y, f = window.devicePixelRatio || 1, v = u, p = (i ?? 6) * f, g = m.position === "top" ? u - p : u + p, w = (o ?? 12) * f;
+    c.save(), c.fontKerning = "auto", L(c, {
+      ...n
+    }), c.beginPath();
+    const T = Array.isArray(r) ? r : r({ ...h, axis: m }, d);
+    for (const { value: b } of T) {
+      const y = a(b, t, "canvas");
+      c.moveTo(y, v), c.lineTo(y, g);
     }
-    a.stroke(), a.restore(), a.save(), D(a, {
-      textBaseline: c.position === "top" ? "bottom" : "top",
+    c.stroke(), c.restore(), c.save(), L(c, {
+      textBaseline: m.position === "top" ? "bottom" : "top",
       textAlign: "center",
-      ...t,
+      ...n,
       ...s
     });
-    for (const { value: w, label: b } of y) {
-      const P = d(w, e, "canvas"), T = b.split(`
+    for (const { value: b, label: y } of T) {
+      const x = a(b, t, "canvas"), S = y.split(`
 `);
-      for (let M = 0; M < T.length; M++)
-        a.fillText(T[M], P, g + f * 2 + M * S);
+      for (let E = 0; E < S.length; E++)
+        c.fillText(S[E], x, g + f * 2 + E * w);
     }
-    a.restore();
+    c.restore();
   },
-  [r, e, t, s]
-), null), Me = ({ layer: n = "BOTTOM", scaleId: e, tickStyle: t, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (F(
-  n,
-  ({ getCtx: l, valToPos: d, getScale: u, getFrame: h }) => {
-    const a = l(), m = u(e);
-    if (!m || !m.axis || m.origin !== "y") return;
-    const c = m.axis, x = c.position === "left" ? c.canvasRect.x + c.canvasRect.width : c.canvasRect.x, f = x, p = i ?? 6, v = c.position === "left" ? x - p : x + p, g = o ?? 12, S = Array.isArray(r) ? r : r({ ...m, axis: c }, h());
-    a.save(), a.fontKerning = "auto", D(a, { ...t }), a.beginPath();
-    for (const { value: y } of S) {
-      const w = d(y, e, "canvas");
-      a.moveTo(f, w), a.lineTo(v, w);
+  [r, t, n, s]
+), null), At = ({ layer: e = "BOTTOM", scaleId: t, tickStyle: n, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (N(
+  e,
+  ({ ctx: c, valToPos: a, getScale: l, frame: d }) => {
+    const h = l(t);
+    if (!h || !h.axis || h.origin !== "y") return;
+    const m = h.axis, u = m.position === "left" ? m.canvasRect.x + m.canvasRect.width : m.canvasRect.x, f = u, v = i ?? 6, p = m.position === "left" ? u - v : u + v, g = o ?? 12, w = Array.isArray(r) ? r : r({ ...h, axis: m }, d);
+    c.save(), c.fontKerning = "auto", L(c, { ...n }), c.beginPath();
+    for (const { value: T } of w) {
+      const b = a(T, t, "canvas");
+      c.moveTo(f, b), c.lineTo(p, b);
     }
-    a.stroke(), a.restore(), a.save(), D(a, {
+    c.stroke(), c.restore(), c.save(), L(c, {
       textBaseline: "middle",
-      textAlign: c.position === "left" ? "right" : "left",
-      ...t,
+      textAlign: m.position === "left" ? "right" : "left",
+      ...n,
       ...s
     });
-    for (const { value: y, label: w } of S) {
-      const b = d(y, e, "canvas"), P = w.split(`
+    for (const { value: T, label: b } of w) {
+      const y = a(T, t, "canvas"), x = b.split(`
 `);
-      for (let T = 0; T < P.length; T++)
-        a.fillText(` ${P[T]} `, v, b + T * g);
+      for (let S = 0; S < x.length; S++)
+        c.fillText(` ${x[S]} `, p, y + S * g);
     }
-    a.restore();
+    c.restore();
   },
-  [r, e, t, s]
-), null), k = () => {
-  const n = [];
+  [r, t, n, s]
+), null), D = () => {
+  const e = [];
   return {
-    addEventListener: (e, t) => (n.push({
-      syncKey: e,
-      callback: t
+    addEventListener: (t, n) => (e.push({
+      syncKey: t,
+      callback: n
     }), () => {
-      const s = n.findIndex((o) => o.callback === t);
-      s !== -1 && n.splice(s, 1);
+      const s = e.findIndex((o) => o.callback === n);
+      s !== -1 && e.splice(s, 1);
     }),
-    dispatchEvent: (e, t) => {
-      for (const s of n)
-        s.syncKey === e && s.callback(e, t);
+    dispatchEvent: (t, n) => {
+      for (const s of e)
+        s.syncKey === t && s.callback(t, n);
     }
   };
-}, E = {
-  dblclick: k(),
-  click: k(),
-  contextmenu: k(),
-  move: k(),
-  mousedown: k(),
-  mouseup: k(),
-  spanselect: k(),
-  documentmouseup: k(),
-  pressandwheel: k(),
-  sync_move: k()
-}, R = (n, e, t) => {
-  const s = Q.useRef(t);
-  s.current = t, Q.useEffect(() => E[n].addEventListener(
-    e,
+}, M = {
+  dblclick: D(),
+  click: D(),
+  contextmenu: D(),
+  move: D(),
+  mousedown: D(),
+  mouseup: D(),
+  spanselect: D(),
+  documentmouseup: D(),
+  pressandwheel: D(),
+  sync_move: D()
+}, I = (e, t, n) => {
+  const s = ne.useRef(n);
+  s.current = n, ne.useEffect(() => M[e].addEventListener(
+    t,
     (i, r) => {
       s.current(r, i);
     }
-  ), [e, n, s]);
-}, yt = Q.createContext(""), vt = (n, e) => {
-  const t = Q.useContext(yt);
-  return R(n, t, e);
-}, qt = (n, e, t, s, o) => {
-  if (!e) return;
-  const i = s ?? t.scales.find((a) => a.origin === "x")?.id, r = o ?? t.scales.find((a) => a.origin === "y")?.id;
-  if (!i || !r)
-    return;
-  const l = n.clientX - e.left, d = {
+  ), [t, e, s]);
+}, we = ne.createContext(""), be = (e, t) => {
+  const n = ne.useContext(we);
+  return I(e, n, t);
+}, et = (e, t, n, s, o) => {
+  if (!t) return;
+  const i = s ?? n.scales.find((h) => h.origin === "x")?.id, r = o ?? n.scales.find((h) => h.origin === "y")?.id, c = e.clientX - t.left, a = i ? {
     scaleId: i,
-    value: L(t, l, i, "css")
-  }, u = n.clientY - e.top, h = {
+    value: U(n, c, i, "css")
+  } : null, l = e.clientY - t.top, d = r ? {
     scaleId: r,
-    value: L(t, u, r, "css")
-  };
-  return { pointerSyncPosition: { x: d, y: h }, cssX: l, cssY: u };
-}, O = (n, e) => {
-  const { x: t, y: s } = n, o = t && e.scales.some((r) => r.id === t.scaleId) ? H(e, t.value, t.scaleId, "css") : null, i = s && e.scales.some((r) => r.id === s.scaleId) ? H(e, s.value, s.scaleId, "css") : null;
+    value: U(n, l, r, "css")
+  } : null;
+  return { pointerSyncPosition: { x: a, y: d }, cssX: c, cssY: l };
+}, z = (e, t) => {
+  const { x: n, y: s } = e, o = n && t.scales.some((r) => r.id === n.scaleId) ? q(t, n.value, n.scaleId, "css") : null, i = s && t.scales.some((r) => r.id === s.scaleId) ? q(t, s.value, s.scaleId, "css") : null;
   return {
     cssX: o,
     cssY: i,
     scaled: Object.fromEntries(
-      e.scales.flatMap((r) => {
-        const l = r.origin === "y" ? i : o;
-        return l === null ? [] : [[r.id, L(e, l, r.id, "css")]];
+      t.scales.flatMap((r) => {
+        const c = r.origin === "y" ? i : o;
+        return c === null ? [] : [[r.id, U(t, c, r.id, "css")]];
       })
     )
   };
-}, Tt = (n, e, t) => {
-  const s = H(
-    t,
-    e.from,
-    e.scaleId,
+}, Pe = (e, t, n) => {
+  const s = q(
+    n,
+    t.from,
+    t.scaleId,
     "css"
-  ), o = H(
-    t,
-    e.to,
-    e.scaleId,
+  ), o = q(
+    n,
+    t.to,
+    t.scaleId,
     "css"
-  ), i = t.scales.flatMap(
+  ), i = n.scales.flatMap(
     (r) => {
-      if (r.origin !== n)
+      if (r.origin !== e)
         return [];
-      const l = L(t, s, r.id, "css"), d = L(t, o, r.id, "css");
+      const c = U(n, s, r.id, "css"), a = U(n, o, r.id, "css");
       return [
         {
           scaleId: r.id,
-          from: l,
-          to: d
+          from: c,
+          to: a
         }
       ];
     }
@@ -617,90 +618,91 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
     toCSS: o,
     scaled: i
   };
-}, Ee = ({
-  id: n,
-  onClick: e,
-  onDblClick: t,
+}, Dt = ({
+  id: e,
+  onClick: t,
+  onDblClick: n,
   onMouseMove: s,
   onMouseDown: o,
   onMouseUp: i,
   onDocumentMouseUp: r,
-  onSpanSelect: l,
-  onContextMenu: d,
-  className: u,
-  style: h,
-  sync: a,
+  onSpanSelect: c,
+  onContextMenu: a,
+  className: l,
+  style: d,
+  sync: h,
   innerChildren: m,
-  children: c
+  children: u
 }) => {
-  const x = Ot(), f = n || x;
-  return R("dblclick", f, (p) => {
-    t?.(p);
-  }), R("click", f, (p) => {
-    e?.(p);
-  }), R("move", f, (p) => {
-    s?.(p);
-  }), R("mousedown", f, (p) => {
-    o?.(p);
-  }), R("mouseup", f, (p) => {
-    i?.(p);
-  }), R("documentmouseup", f, (p) => {
-    r?.(p);
-  }), R("spanselect", f, (p) => {
-    l?.(p);
-  }), R("contextmenu", f, (p) => {
-    d?.(p);
-  }), /* @__PURE__ */ ft(yt.Provider, { value: f, children: [
+  const f = Be();
+  return I("dblclick", f, (v) => {
+    n?.(v);
+  }), I("click", f, (v) => {
+    t?.(v);
+  }), I("move", f, (v) => {
+    s?.(v);
+  }), I("mousedown", f, (v) => {
+    o?.(v);
+  }), I("mouseup", f, (v) => {
+    i?.(v);
+  }), I("documentmouseup", f, (v) => {
+    r?.(v);
+  }), I("spanselect", f, (v) => {
+    c?.(v);
+  }), I("contextmenu", f, (v) => {
+    a?.(v);
+  }), /* @__PURE__ */ me(we.Provider, { value: f, children: [
     /* @__PURE__ */ A(
-      Gt,
+      tt,
       {
-        className: u,
-        style: h,
-        sync: a,
+        id: e,
+        className: l,
+        style: d,
+        sync: h,
         children: m
       }
     ),
-    c
+    u
   ] });
-}, Gt = ({ className: n, style: e, sync: t, children: s }) => {
-  const o = _(null), i = xt(), r = _(i);
-  r.current = i;
-  const l = tt(yt), d = t?.key || l, u = _(null), h = _(null), a = _(null), m = () => {
-    const f = o.current?.parentElement;
-    if (f) {
-      if (f.dataset.canplotroot === void 0)
+}, tt = ({ id: e, className: t, style: n, sync: s, children: o }) => {
+  const i = k(null), r = ge().frame, c = k(r);
+  c.current = r;
+  const a = H(we), l = s?.key || a, d = k(null), h = k(null), m = k(null), u = () => {
+    const p = i.current?.parentElement;
+    if (p) {
+      if (p.dataset.canplotroot === void 0)
         throw new Error(
           "ChartAreaInteractions must be used within a CanPlot component"
         );
-      return f.getBoundingClientRect();
+      return p.getBoundingClientRect();
     }
-  }, c = (f, p) => {
-    const v = qt(
-      f,
-      m(),
-      r.current,
-      t?.xViaScaleId,
-      t?.yViaScaleId
+  }, f = (p, g) => {
+    const w = et(
+      p,
+      u(),
+      c.current,
+      s?.xViaScaleId,
+      s?.yViaScaleId
     );
-    v && p(
-      v.pointerSyncPosition,
-      { cssX: v.cssX, cssY: v.cssY },
+    w && g(
+      w.pointerSyncPosition,
+      { cssX: w.cssX, cssY: w.cssY },
       {
-        ctrlKey: f.ctrlKey,
-        altKey: f.altKey,
-        shiftKey: f.shiftKey,
-        metaKey: f.metaKey
+        ctrlKey: p.ctrlKey,
+        altKey: p.altKey,
+        shiftKey: p.shiftKey,
+        metaKey: p.metaKey
       }
     );
-  }, x = _(c);
-  return x.current = c, Et(() => {
-    const f = (y) => {
-      const w = h.current;
-      w && E.spanselect.dispatchEvent(l, {
-        ...w,
+  }, v = k(f);
+  return v.current = f, Ne(() => {
+    const p = (y) => {
+      const x = h.current;
+      x && M.spanselect.dispatchEvent(a, {
+        ...x,
         completed: !0
-      }), E.documentmouseup.dispatchEvent(l, {
-        frame: r.current,
+      }), M.documentmouseup.dispatchEvent(a, {
+        frame: c.current,
         keys: {
           ctrlKey: y.ctrlKey,
           altKey: y.altKey,
@@ -708,317 +710,320 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
           metaKey: y.metaKey
         }
       });
-    }, p = (y) => {
-      const w = {
+    }, g = (y) => {
+      const x = {
         ctrlKey: y.ctrlKey,
         altKey: y.altKey,
         shiftKey: y.shiftKey,
         metaKey: y.metaKey
-      }, b = a.current;
-      if (b && Object.entries(w).some(
-        ([T, M]) => b.keys[T] !== M
+      }, S = m.current;
+      if (S && Object.entries(x).some(
+        ([C, P]) => S.keys[C] !== P
       )) {
-        const T = { ...b, keys: w };
-        a.current = T, E.sync_move.dispatchEvent(d, T);
+        const C = { ...S, keys: x };
+        m.current = C, M.sync_move.dispatchEvent(l, C);
       }
-      const P = h.current;
-      if (P && Object.entries(w).some(
-        ([T, M]) => P.keys[T] !== M
+      const E = h.current;
+      if (E && Object.entries(x).some(
+        ([C, P]) => E.keys[C] !== P
       )) {
         y.stopPropagation(), y.preventDefault();
-        const T = { ...P, keys: w };
-        h.current = T, E.spanselect.dispatchEvent(l, T);
+        const C = { ...E, keys: x };
+        h.current = C, M.spanselect.dispatchEvent(a, C);
       }
-    }, v = (y) => {
-      x.current(
+    }, w = (y) => {
+      v.current(
         y,
-        (w, { cssX: b, cssY: P }, T) => {
-          const M = u.current;
-          if (!M || !w.x || !w.y) return;
-          const C = r.current, N = M.xRangeCss.start, K = b, ot = M.yRangeCss.start, it = P, rt = I(C, w.x.scaleId), ct = I(C, w.y.scaleId);
-          u.current = {
-            xRangeCss: { start: N, end: K },
-            yRangeCss: { start: ot, end: it }
+        (x, { cssX: S, cssY: E }, C) => {
+          const P = d.current;
+          if (!P || !x.x || !x.y) return;
+          const R = c.current, Y = P.xRangeCss.start, ie = S, re = P.yRangeCss.start, ce = E, ae = _(R, x.x.scaleId), le = _(R, x.y.scaleId);
+          d.current = {
+            xRangeCss: { start: Y, end: ie },
+            yRangeCss: { start: re, end: ce }
           };
-          let $ = "below_threshold";
-          const at = Math.abs(ot - it), lt = Math.abs(N - K);
-          at < 10 && lt < 10 ? $ = "below_threshold" : at > 30 && lt > 30 ? $ = "box" : at > lt ? $ = "y" : $ = "x";
-          const wt = {
-            scaleId: rt.id,
-            from: L(
-              C,
-              Y(r.current, N, "css"),
-              rt.id,
+          let j = "below_threshold";
+          const ue = Math.abs(re - ce), de = Math.abs(Y - ie);
+          ue < 10 && de < 10 ? j = "below_threshold" : ue > 30 && de > 30 ? j = "box" : ue > de ? j = "y" : j = "x";
+          const Te = {
+            scaleId: ae.id,
+            from: U(
+              R,
+              $(c.current, Y, "css"),
+              ae.id,
               "css"
             ),
-            to: L(
-              C,
-              Y(r.current, K, "css"),
-              rt.id,
+            to: U(
+              R,
+              $(c.current, ie, "css"),
+              ae.id,
               "css"
             )
-          }, bt = {
-            scaleId: ct.id,
-            from: L(
-              C,
-              B(r.current, ot, "css"),
-              ct.id,
+          }, Se = {
+            scaleId: le.id,
+            from: U(
+              R,
+              V(c.current, re, "css"),
+              le.id,
               "css"
             ),
-            to: L(
-              C,
-              B(r.current, it, "css"),
-              ct.id,
+            to: U(
+              R,
+              V(c.current, ce, "css"),
+              le.id,
               "css"
             )
-          }, W = wt && Tt("x", wt, r.current), q = bt && Tt("y", bt, r.current), Lt = W?.scaled, It = q?.scaled, St = {
-            mode: $,
-            frame: r.current,
+          }, Z = Te && Pe("x", Te, c.current), J = Se && Pe("y", Se, c.current), Ue = Z?.scaled, _e = J?.scaled, Ce = {
+            mode: j,
+            frame: c.current,
             completed: !1,
             x: {
-              css: W && {
-                from: W.fromCSS,
-                to: W.toCSS
+              css: Z && {
+                from: Z.fromCSS,
+                to: Z.toCSS
               },
-              scaled: Lt ?? []
+              scaled: Ue ?? []
             },
             y: {
-              css: q && {
-                from: q.fromCSS,
-                to: q.toCSS
+              css: J && {
+                from: J.fromCSS,
+                to: J.toCSS
               },
-              scaled: It ?? []
+              scaled: _e ?? []
             },
-            keys: T
+            keys: C
           };
-          h.current = St, E.spanselect.dispatchEvent(
-            l,
-            St
+          h.current = Ce, M.spanselect.dispatchEvent(
+            a,
+            Ce
           );
         }
       );
-    }, g = (y) => {
-      x.current(y, (w, b, P) => {
-        const T = O(
-          w,
-          r.current
+    }, T = (y) => {
+      v.current(y, (x, S, E) => {
+        const C = z(
+          x,
+          c.current
         );
-        if (!T) return;
-        if (Object.values(P).some((C) => C)) {
+        if (!C) return;
+        if (Object.values(E).some((R) => R)) {
           y.preventDefault();
-          const C = Math.abs(y.deltaY) > Math.abs(y.deltaX) ? y.deltaY : y.deltaX;
-          E.pressandwheel.dispatchEvent(l, {
-            pointer: T,
-            frame: r.current,
-            keys: P,
+          const R = Math.abs(y.deltaY) > Math.abs(y.deltaX) ? y.deltaY : y.deltaX;
+          M.pressandwheel.dispatchEvent(a, {
+            pointer: C,
+            frame: c.current,
+            keys: E,
             deltaX: y.deltaX,
             deltaY: y.deltaY,
-            deltaAbs: C
+            deltaAbs: R
           });
         }
       });
     };
-    document.addEventListener("mouseup", f), document.addEventListener("keydown", p), document.addEventListener("keyup", p), document.addEventListener("mousemove", v);
-    const S = o.current;
-    return S?.addEventListener("wheel", g, {
+    document.addEventListener("mouseup", p), document.addEventListener("keydown", g), document.addEventListener("keyup", g), document.addEventListener("mousemove", w);
+    const b = i.current;
+    return b?.addEventListener("wheel", T, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", f), document.removeEventListener("keydown", p), document.removeEventListener("keyup", p), document.removeEventListener("mousemove", v), S?.removeEventListener("wheel", g);
+      document.removeEventListener("mouseup", p), document.removeEventListener("keydown", g), document.removeEventListener("keyup", g), document.removeEventListener("mousemove", w), b?.removeEventListener("wheel", T);
     };
-  }, [r, l, d, x]), R("sync_move", d, (f) => {
-    const p = f.positions ? O(
-      f.positions,
-      r.current
+  }, [c, a, l, v]), I("sync_move", l, (p) => {
+    const g = p.positions ? z(
+      p.positions,
+      c.current
     ) : null;
-    a.current = f, E.move.dispatchEvent(l, {
-      frame: r.current,
-      pointer: p ?? null,
-      keys: f.keys
+    m.current = p, M.move.dispatchEvent(a, {
+      frame: c.current,
+      pointer: g ?? null,
+      keys: p.keys,
+      source: p.originInteractionsId === a ? "own" : "sync"
     });
   }), /* @__PURE__ */ A(
     "div",
     {
-      ref: o,
-      id: "interactions",
-      className: n,
+      ref: i,
+      id: e,
+      className: t,
       style: {
         position: "absolute",
-        left: i.chartAreaCSS.x,
-        top: i.chartAreaCSS.y,
-        width: i.chartAreaCSS.width,
-        height: i.chartAreaCSS.height,
+        left: r.chartAreaCSS.x,
+        top: r.chartAreaCSS.y,
+        width: r.chartAreaCSS.width,
+        height: r.chartAreaCSS.height,
         zIndex: 25,
-        ...e
+        ...n
       },
-      onDragStart: (f) => {
-        f.preventDefault();
+      onDragStart: (p) => {
+        p.preventDefault();
       },
-      onClick: (f) => {
-        c(f, (p, v, g) => {
-          const S = O(
-            p,
-            r.current
+      onClick: (p) => {
+        f(p, (g, w, T) => {
+          const b = z(
+            g,
+            c.current
           );
-          S && E.click.dispatchEvent(l, {
-            pointer: S,
-            frame: r.current,
-            keys: g
+          b && M.click.dispatchEvent(a, {
+            pointer: b,
+            frame: c.current,
+            keys: T
           });
         });
       },
-      onMouseLeave: (f) => {
-        c(f, (p, v, g) => {
-          E.sync_move.dispatchEvent(d, {
+      onMouseLeave: (p) => {
+        f(p, (g, w, T) => {
+          M.sync_move.dispatchEvent(l, {
             positions: null,
-            keys: g
+            keys: T,
+            originInteractionsId: a
           });
         });
       },
-      onMouseMove: (f) => {
-        c(f, (p, v, g) => {
-          E.sync_move.dispatchEvent(d, {
-            positions: p,
-            keys: g
+      onMouseMove: (p) => {
+        f(p, (g, w, T) => {
+          M.sync_move.dispatchEvent(l, {
+            positions: g,
+            keys: T,
+            originInteractionsId: a
           });
         });
       },
-      onMouseDown: (f) => {
-        c(f, (p, { cssX: v, cssY: g }, S) => {
-          const y = O(
-            p,
-            r.current
+      onMouseDown: (p) => {
+        f(p, (g, { cssX: w, cssY: T }, b) => {
+          const y = z(
+            g,
+            c.current
           );
-          y && (E.mousedown.dispatchEvent(l, {
+          y && (M.mousedown.dispatchEvent(a, {
             pointer: y,
-            frame: r.current,
-            keys: S
-          }), u.current = {
-            xRangeCss: { start: v, end: v },
-            yRangeCss: { start: g, end: g }
+            frame: c.current,
+            keys: b
+          }), d.current = {
+            xRangeCss: { start: w, end: w },
+            yRangeCss: { start: T, end: T }
           });
         });
       },
-      onMouseUp: (f) => {
-        c(f, (p, v, g) => {
-          const S = O(
-            p,
-            r.current
+      onMouseUp: (p) => {
+        f(p, (g, w, T) => {
+          const b = z(
+            g,
+            c.current
           );
-          if (!S) return;
-          E.mouseup.dispatchEvent(l, {
-            frame: r.current,
-            pointer: S,
-            keys: g
+          if (!b) return;
+          M.mouseup.dispatchEvent(a, {
+            frame: c.current,
+            pointer: b,
+            keys: T
           });
           const y = h.current;
           h.current = null;
-          const w = u.current;
-          if (u.current = null, w && y) {
-            const b = {
+          const x = d.current;
+          if (d.current = null, x && y) {
+            const S = {
               ...y,
-              keys: g,
+              keys: T,
               completed: !0
             };
-            h.current = null, E.spanselect.dispatchEvent(
-              l,
-              b
+            h.current = null, M.spanselect.dispatchEvent(
+              a,
+              S
             );
           }
         });
       },
-      onContextMenu: (f) => {
-        f.preventDefault(), c(f, (p, v, g) => {
-          const S = O(
-            p,
-            r.current
+      onContextMenu: (p) => {
+        p.preventDefault(), f(p, (g, w, T) => {
+          const b = z(
+            g,
+            c.current
           );
-          S && E.contextmenu.dispatchEvent(l, {
-            frame: r.current,
-            pointer: S,
-            keys: g
+          b && M.contextmenu.dispatchEvent(a, {
+            frame: c.current,
+            pointer: b,
+            keys: T
           });
         });
       },
-      onDoubleClick: (f) => {
-        c(f, (p, v, g) => {
-          const S = O(
-            p,
-            r.current
+      onDoubleClick: (p) => {
+        f(p, (g, w, T) => {
+          const b = z(
+            g,
+            c.current
           );
-          S && E.dblclick.dispatchEvent(l, {
-            frame: r.current,
-            pointer: S,
-            keys: g
+          b && M.dblclick.dispatchEvent(a, {
+            frame: c.current,
+            pointer: b,
+            keys: T
           });
         });
       },
-      children: s
+      children: o
     }
   );
-}, Pe = ({ data: n, renderTooltip: e, xScaleId: t }) => {
-  const [s, o] = V(null);
-  vt("move", (r) => {
+}, It = ({ data: e, renderTooltip: t, xScaleId: n }) => {
+  const [s, o] = O(null);
+  be("move", (r) => {
     o(r);
   });
-  const i = et(() => {
+  const i = G(() => {
     if (!s)
       return null;
-    const { frame: r, pointer: l } = s, d = l?.scaled[t];
-    if (d === void 0)
+    const { frame: r, pointer: c } = s, a = c?.scaled[n];
+    if (a === void 0)
       return null;
-    const u = [];
-    let h = d;
-    for (const a of n) {
-      let m = null, c = 1 / 0;
-      for (const [f, p] of a.points.entries()) {
-        if (!ut(r, p.x, t) || !ut(r, p.y, a.yScaleId))
+    const l = [];
+    let d = a;
+    for (const h of e) {
+      let m = null, u = 1 / 0;
+      for (const [v, p] of h.points.entries()) {
+        if (!he(r, p.x, n) || !he(r, p.y, h.yScaleId))
           continue;
-        const v = Math.abs(p.x - d);
-        v < c && (c = v, m = f);
+        const g = Math.abs(p.x - a);
+        g < u && (u = g, m = v);
       }
-      const x = a.points[m ?? -1];
-      if (!x || mt(r, c, t, "css") > 30) {
-        u.push({ seriesId: a.seriesId, y: null });
+      const f = h.points[m ?? -1];
+      if (!f || ye(r, u, n, "css") > 30) {
+        l.push({ seriesId: h.seriesId, y: null });
         continue;
       }
-      h = x.x, u.push({
-        seriesId: a.seriesId,
-        y: x.y
+      d = f.x, l.push({
+        seriesId: h.seriesId,
+        y: f.y
       });
     }
     return {
       frame: r,
-      x: h,
-      points: u
+      x: d,
+      points: l
     };
-  }, [n, s, t]);
-  return e(i);
-}, ke = ({ makeXStyle: n, makeXClassName: e, makeYStyle: t, makeYClassName: s }) => {
-  const [o, i] = V(null);
-  if (vt("move", (m) => {
+  }, [e, s, n]);
+  return t(i);
+}, Lt = ({ makeXStyle: e, makeXClassName: t, makeYStyle: n, makeYClassName: s }) => {
+  const [o, i] = O(null);
+  if (be("move", (m) => {
     i(m);
   }), !o)
     return null;
-  const { frame: r, pointer: l } = o, d = l?.cssX ?? null, u = l?.cssY ?? null, h = d ? Y(r, d, "css") : 0, a = u ? B(r, u, "css") : 0;
-  return /* @__PURE__ */ ft(Ut, { children: [
+  const { frame: r, pointer: c } = o, a = c?.cssX ?? null, l = c?.cssY ?? null, d = a ? $(r, a, "css") : 0, h = l ? V(r, l, "css") : 0;
+  return /* @__PURE__ */ me(Ke, { children: [
     /* @__PURE__ */ A(
       "div",
       {
-        "data-show": !!l,
-        className: e?.(o),
+        "data-show": !!c,
+        className: t?.(o),
         style: {
           position: "absolute",
           left: 0,
-          visibility: d === null ? "hidden" : "visible",
+          visibility: a === null ? "hidden" : "visible",
           top: r.chartAreaCSS.y,
           height: r.chartAreaCSS.height,
           borderColor: "red",
           borderLeftWidth: "1px",
           borderLeftStyle: "solid",
           pointerEvents: "none",
-          opacity: l ? 1 : 0,
-          transform: `translateX(${h}px)`,
-          ...n?.(o)
+          opacity: c ? 1 : 0,
+          transform: `translateX(${d}px)`,
+          ...e?.(o)
         }
       }
     ),
@@ -1026,54 +1031,54 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
       "div",
       {
         className: s?.(o),
-        "data-show": !!l,
+        "data-show": !!c,
         style: {
           position: "absolute",
-          visibility: u === null ? "hidden" : "visible",
+          visibility: l === null ? "hidden" : "visible",
           top: 0,
           height: 0,
           borderTop: "solid 1px red",
           left: r.chartAreaCSS.x,
           width: r.chartAreaCSS.width,
           pointerEvents: "none",
-          opacity: l ? 1 : 0,
-          transform: `translateY(${a}px)`,
-          ...t?.(o)
+          opacity: c ? 1 : 0,
+          transform: `translateY(${h}px)`,
+          ...n?.(o)
         }
       }
     )
   ] });
-}, Re = ({ makeClassName: n, makeStyle: e }) => {
-  const [t, s] = V(null);
-  vt("spanselect", (i) => {
+}, Ut = ({ makeClassName: e, makeStyle: t }) => {
+  const [n, s] = O(null);
+  be("spanselect", (i) => {
     s(
       i.mode === "below_threshold" || i.completed ? null : i
     );
   });
-  const o = et(() => {
-    if (!t || t.mode === "below_threshold")
+  const o = G(() => {
+    if (!n || n.mode === "below_threshold")
       return null;
-    const i = t.mode === "y" ? -1 / 0 : t.x.css?.from ?? -1 / 0, r = t.mode === "y" ? 1 / 0 : t.x.css?.to ?? 1 / 0, l = t.mode === "x" ? -1 / 0 : t.y.css?.from ?? -1 / 0, d = t.mode === "x" ? 1 / 0 : t.y.css?.to ?? 1 / 0, u = Y(t.frame, i, "css"), h = Y(t.frame, r, "css"), a = B(t.frame, l, "css"), m = B(t.frame, d, "css"), c = Math.min(u, h), x = Math.min(a, m), f = Math.abs(h - u), p = Math.abs(m - a);
-    return { leftPx: c, topPx: x, widthPx: f, heightPx: p };
-  }, [t]);
+    const i = n.mode === "y" ? -1 / 0 : n.x.css?.from ?? -1 / 0, r = n.mode === "y" ? 1 / 0 : n.x.css?.to ?? 1 / 0, c = n.mode === "x" ? -1 / 0 : n.y.css?.from ?? -1 / 0, a = n.mode === "x" ? 1 / 0 : n.y.css?.to ?? 1 / 0, l = $(n.frame, i, "css"), d = $(n.frame, r, "css"), h = V(n.frame, c, "css"), m = V(n.frame, a, "css"), u = Math.min(l, d), f = Math.min(h, m), v = Math.abs(d - l), p = Math.abs(m - h);
+    return { leftPx: u, topPx: f, widthPx: v, heightPx: p };
+  }, [n]);
   return /* @__PURE__ */ A(
     "div",
     {
-      className: t ? n?.(t) : void 0,
+      className: n ? e?.(n) : void 0,
       style: {
         position: "absolute",
-        visibility: t ? "visible" : "hidden",
+        visibility: n ? "visible" : "hidden",
         left: `${o?.leftPx ?? 0}px`,
         top: `${o?.topPx ?? 0}px`,
         width: `${o?.widthPx ?? 0}px`,
         height: `${o?.heightPx ?? 0}px`,
         pointerEvents: "none",
-        ...t ? e?.(t) : void 0
+        ...n ? t?.(n) : void 0
       }
     }
   );
-}, Ae = ({ style: n, children: e, scaleId: t, ...s }) => {
-  const o = xt((i) => i.getScale(t)?.axis);
+}, _t = ({ style: e, children: t, scaleId: n, ...s }) => {
+  const o = ge().getScale(n)?.axis;
   return o ? /* @__PURE__ */ A(
     "div",
     {
@@ -1084,38 +1089,38 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
         top: o.cssRect.y,
         height: o.cssRect.height,
         width: o.cssRect.width,
-        ...n
+        ...e
       },
       ...s,
-      children: e
+      children: t
     }
   ) : null;
-}, At = 60, Zt = 30, Dt = "UTC", Jt = "en-GB", De = ({
-  space: n,
-  formatter: e,
-  acceptableIncrements: t
+}, De = 60, nt = 30, Ie = "UTC", st = "en-GB", Xt = ({
+  space: e,
+  formatter: t,
+  acceptableIncrements: n
 } = {}) => (s, o) => {
-  const { min: i, max: r } = s, l = [], d = window.devicePixelRatio || 1, u = (n ?? (s.origin === "x" ? At : Zt)) * d, h = Ft(
+  const { min: i, max: r } = s, c = [], a = window.devicePixelRatio || 1, l = (e ?? (s.origin === "x" ? De : nt)) * a, d = $e(
     o,
-    u,
+    l,
     s.id,
     "canvas"
-  ), a = t ?? G, m = a.find((x) => x > h) ?? a.at(-1) ?? 1;
-  let c = i;
-  if (Math.abs(c % m) > Number.EPSILON) {
-    const x = (m - c % m) % m;
-    c += x;
+  ), h = n ?? Q, m = h.find((f) => f > d) ?? h.at(-1) ?? 1;
+  let u = i;
+  if (Math.abs(u % m) > Number.EPSILON) {
+    const f = (m - u % m) % m;
+    u += f;
   }
-  for (; c <= r && l.length < 1e3; )
-    l.push(c), c += m;
-  return (e ?? Qt)(l);
-}, Qt = (n) => {
-  const e = Math.max(0, Math.ceil(-Math.log10(n[1] - n[0])));
-  return n.map((t) => ({ value: t, label: t.toFixed(e) }));
-}, G = [];
-for (let n = -12; n <= 12; n++)
-  G.push(1 * 10 ** n), G.push(2 * 10 ** n), G.push(5 * 10 ** n);
-const te = 1, _t = 1e3 * te, gt = 60 * _t, nt = 60 * gt, st = 24 * nt, ee = 30 * st, ne = 365 * st, se = [
+  for (; u <= r && c.length < 1e3; )
+    c.push(u), u += m;
+  return (t ?? ot)(c);
+}, ot = (e) => {
+  const t = Math.max(0, Math.ceil(-Math.log10(e[1] - e[0])));
+  return e.map((n) => ({ value: n, label: n.toFixed(t) }));
+}, Q = [];
+for (let e = -12; e <= 12; e++)
+  Q.push(1 * 10 ** e), Q.push(2 * 10 ** e), Q.push(5 * 10 ** e);
+const it = 1, Le = 1e3 * it, xe = 60 * Le, se = 60 * xe, oe = 24 * se, rt = 30 * oe, ct = 365 * oe, at = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1167,70 +1172,70 @@ const te = 1, _t = 1e3 * te, gt = 60 * _t, nt = 60 * gt, st = 24 * nt, ee = 30 *
   [25, "years"],
   [50, "years"],
   [100, "years"]
-], Z = (n) => {
-  const [e, t] = n;
-  switch (t) {
+], ee = (e) => {
+  const [t, n] = e;
+  switch (n) {
     case "milliseconds":
-      return e;
+      return t;
     case "seconds":
-      return e * _t;
+      return t * Le;
     case "minutes":
-      return e * gt;
+      return t * xe;
     case "hours":
-      return e * nt;
+      return t * se;
     case "days":
-      return e * st;
+      return t * oe;
     case "months":
-      return e * ee;
+      return t * rt;
     case "years":
-      return e * ne;
+      return t * ct;
   }
-}, oe = (n, e) => {
-  const t = new Date(n);
-  return t.setUTCMilliseconds(t.getUTCMilliseconds() + e), t.getTime();
-}, ie = (n, e) => {
-  const t = new Date(n);
-  return t.setUTCSeconds(t.getUTCSeconds() + e), t.getTime();
-}, re = (n, e) => {
-  const t = new Date(n);
-  return t.setUTCMinutes(t.getUTCMinutes() + e), t.getTime();
-}, ce = (n, e) => {
-  const t = new Date(n);
-  return t.setUTCHours(t.getUTCHours() + e), t.getTime();
-}, ae = (n, e) => {
-  const t = new Date(n);
-  return t.setUTCDate(t.getUTCDate() + e), t.getTime();
-}, Ct = (n, e) => {
-  const t = new Date(n);
-  return t.setUTCMonth(t.getUTCMonth() + e), t.getTime();
-}, X = (n, e) => {
-  const [t, s] = e;
+}, lt = (e, t) => {
+  const n = new Date(e);
+  return n.setUTCMilliseconds(n.getUTCMilliseconds() + t), n.getTime();
+}, ut = (e, t) => {
+  const n = new Date(e);
+  return n.setUTCSeconds(n.getUTCSeconds() + t), n.getTime();
+}, dt = (e, t) => {
+  const n = new Date(e);
+  return n.setUTCMinutes(n.getUTCMinutes() + t), n.getTime();
+}, ht = (e, t) => {
+  const n = new Date(e);
+  return n.setUTCHours(n.getUTCHours() + t), n.getTime();
+}, ft = (e, t) => {
+  const n = new Date(e);
+  return n.setUTCDate(n.getUTCDate() + t), n.getTime();
+}, Me = (e, t) => {
+  const n = new Date(e);
+  return n.setUTCMonth(n.getUTCMonth() + t), n.getTime();
+}, K = (e, t) => {
+  const [n, s] = t;
   switch (s) {
     case "milliseconds":
-      return oe(n, t);
+      return lt(e, n);
     case "seconds":
-      return ie(n, t);
+      return ut(e, n);
     case "minutes":
-      return re(n, t);
+      return dt(e, n);
     case "hours":
-      return ce(n, t);
+      return ht(e, n);
     case "days":
-      return ae(n, t);
+      return ft(e, n);
     case "months":
-      return Ct(n, t);
+      return Me(e, n);
     case "years":
-      return Ct(n, t * 12);
+      return Me(e, n * 12);
   }
 };
-function J(n, e) {
-  const t = new Date(n), s = new Date(t.toLocaleString("en-US", { timeZone: e })), o = new Date(t.toLocaleString("en-US", { timeZone: "UTC" }));
+function te(e, t) {
+  const n = new Date(e), s = new Date(n.toLocaleString("en-US", { timeZone: t })), o = new Date(n.toLocaleString("en-US", { timeZone: "UTC" }));
   return (s.getTime() - o.getTime()) / (3600 * 1e3);
 }
-const le = (n, e, t = "UTC") => {
-  const [s, o] = e;
-  let i = new Date(n);
+const mt = (e, t, n = "UTC") => {
+  const [s, o] = t;
+  let i = new Date(e);
   const r = () => {
-    i.setUTCHours(-J(i, t), 0, 0, 0);
+    i.setUTCHours(-te(i, n), 0, 0, 0);
   };
   switch (o) {
     case "milliseconds":
@@ -1246,14 +1251,14 @@ const le = (n, e, t = "UTC") => {
       break;
     case "minutes":
       i.setUTCMinutes(
-        Math.ceil(i.getTime() % nt / gt / s) * s,
+        Math.ceil(i.getTime() % se / xe / s) * s,
         0,
         0
       );
       break;
     case "hours":
       i.setUTCHours(
-        Math.ceil(i.getTime() % st / nt / s) * s,
+        Math.ceil(i.getTime() % oe / se / s) * s,
         0,
         0,
         0
@@ -1262,72 +1267,72 @@ const le = (n, e, t = "UTC") => {
     case "days":
     case "months":
     case "years":
-      o === "months" ? i.setUTCDate(1) : o === "years" && i.setUTCMonth(0, 1), r(), i.getTime() < n && (i = new Date(X(i, [1, o])));
+      o === "months" ? i.setUTCDate(1) : o === "years" && i.setUTCMonth(0, 1), r(), i.getTime() < e && (i = new Date(K(i, [1, o])));
       break;
   }
   return i.getTime();
-}, _e = ({
-  timeZone: n = Dt,
-  space: e = At,
-  formatter: t,
+}, Ft = ({
+  timeZone: e = Ie,
+  space: t = De,
+  formatter: n,
   locale: s,
   showTimezone: o
 } = {}) => (i, r) => {
-  const { min: l, max: d } = i, u = Math.floor(r.chartAreaCanvasPX.width / e) + 1, a = (d - l) / u, [m, c] = se.find(
-    (g) => Z(g) >= a
-  ) ?? [1, "milliseconds"], x = le(l, [m, c], n), f = J(x, n), p = [x];
-  let v;
+  const { min: c, max: a } = i, l = Math.floor(r.chartAreaCanvasPX.width / t) + 1, h = (a - c) / l, [m, u] = at.find(
+    (w) => ee(w) >= h
+  ) ?? [1, "milliseconds"], f = mt(c, [m, u], e), v = te(f, e), p = [f];
+  let g;
   for (; ; ) {
-    switch (c) {
+    switch (u) {
       case "milliseconds":
       case "seconds":
       case "minutes":
       case "hours": {
-        v = X(x, [p.length * m, c]);
+        g = K(f, [p.length * m, u]);
         break;
       }
       case "days": {
-        const g = X(x, [
+        const w = K(f, [
           p.length * m,
-          c
+          u
         ]);
-        v = X(g, [
-          f - J(g, n),
+        g = K(w, [
+          v - te(w, e),
           "hours"
         ]);
         break;
       }
       case "months":
       case "years": {
-        const g = X(
-          X(X(x, [f, "hours"]), [
+        const w = K(
+          K(K(f, [v, "hours"]), [
             p.length * m,
-            c
+            u
           ]),
-          [-f, "hours"]
+          [-v, "hours"]
         );
-        v = X(g, [
-          f - J(g, n),
+        g = K(w, [
+          v - te(w, e),
           "hours"
         ]);
         break;
       }
     }
-    if (v > d)
+    if (g > a)
       break;
-    p.push(v);
+    p.push(g);
   }
-  return (t ?? ue({
+  return (n ?? pt({
     locale: s,
     showTimezone: o,
-    timeZone: n
+    timeZone: e
   }))(p);
-}, U = (n, e, t) => n.find((s) => s.type === t)?.value !== e.find((s) => s.type === t)?.value, ue = ({
-  timeZone: n = Dt,
-  locale: e = Jt,
-  showTimezone: t = !0
+}, F = (e, t, n) => e.find((s) => s.type === n)?.value !== t.find((s) => s.type === n)?.value, pt = ({
+  timeZone: e = Ie,
+  locale: t = st,
+  showTimezone: n = !0
 }) => {
-  const s = new Intl.DateTimeFormat(e, {
+  const s = new Intl.DateTimeFormat(t, {
     year: "numeric",
     day: "numeric",
     month: "short",
@@ -1337,73 +1342,74 @@ const le = (n, e, t = "UTC") => {
     second: "numeric",
     fractionalSecondDigits: 3,
     timeZoneName: "short",
-    timeZone: n
+    timeZone: e
   });
   return (o) => {
-    const i = o[1] - o[0], r = i < Z([1, "days"]), l = i < Z([1, "minutes"]), d = i < Z([1, "seconds"]);
-    return o.map((u) => ({ value: u, label: s.formatToParts(new Date(u)) })).map((u, h, a) => {
-      const m = a[h - 1], c = h === 0 || U(u.label, m.label, "year"), x = h === 0 || U(u.label, m.label, "day"), f = h === 0 || U(u.label, m.label, "month"), p = h === 0 || U(u.label, m.label, "hour"), v = h === 0 || U(u.label, m.label, "timeZoneName"), g = h === 0 || U(u.label, m.label, "minute"), S = h === 0 || U(u.label, m.label, "second"), y = h === 0 || U(u.label, m.label, "fractionalSecond"), w = [];
-      if (r && (p || g || v || S || y)) {
-        const b = u.label.find((C) => C.type === "hour")?.value, P = u.label.find((C) => C.type === "minute")?.value, T = u.label.find((C) => C.type === "timeZoneName")?.value;
-        let M = "";
-        if (l) {
-          const C = u.label.find((K) => K.type === "second")?.value, N = u.label.find(
-            (K) => K.type === "fractionalSecond"
+    const i = o[1] - o[0], r = i < ee([1, "days"]), c = i < ee([1, "minutes"]), a = i < ee([1, "seconds"]);
+    return o.map((l) => ({ value: l, label: s.formatToParts(new Date(l)) })).map((l, d, h) => {
+      const m = h[d - 1], u = d === 0 || F(l.label, m.label, "year"), f = d === 0 || F(l.label, m.label, "day"), v = d === 0 || F(l.label, m.label, "month"), p = d === 0 || F(l.label, m.label, "hour"), g = d === 0 || F(l.label, m.label, "timeZoneName"), w = d === 0 || F(l.label, m.label, "minute"), T = d === 0 || F(l.label, m.label, "second"), b = d === 0 || F(l.label, m.label, "fractionalSecond"), y = [];
+      if (r && (p || w || g || T || b)) {
+        const x = l.label.find((P) => P.type === "hour")?.value, S = l.label.find((P) => P.type === "minute")?.value, E = l.label.find((P) => P.type === "timeZoneName")?.value;
+        let C = "";
+        if (c) {
+          const P = l.label.find((Y) => Y.type === "second")?.value, R = l.label.find(
+            (Y) => Y.type === "fractionalSecond"
           )?.value;
-          M = `:${C}` + (d ? `.${N}` : "");
+          C = `:${P}` + (a ? `.${R}` : "");
         }
-        w.push(
-          `${b}:${P}${M}` + (t && v ? ` ${T}` : "")
+        y.push(
+          `${x}:${S}${C}` + (n && g ? ` ${E}` : "")
         );
       }
-      return (x || f) && w.push(
+      return (f || v) && y.push(
         [
-          u.label.find((b) => b.type === "month")?.value,
-          x && u.label.find((b) => b.type === "day")?.value
+          l.label.find((x) => x.type === "month")?.value,
+          f && l.label.find((x) => x.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), c && w.push(u.label.find((b) => b.type === "year")?.value), {
-        value: u.value,
-        label: w.filter((b) => b).join(`
+      ), u && y.push(l.label.find((x) => x.type === "year")?.value), {
+        value: l.value,
+        label: y.filter((x) => x).join(`
 `)
       };
     });
   };
 };
 export {
-  be as AreaPlot,
-  Ae as AxisOverlay,
-  we as BarPlot,
-  dt as CANPLOT_LAYER,
-  ye as CanPlot,
-  Ee as ChartAreaInteractions,
-  ke as Crosshair,
-  ve as LinePlot,
-  ge as ScatterPlot,
-  Re as SelectBox,
-  Se as SparklinePlot,
-  Pe as TooltipsX,
-  Ce as XTicks,
-  Me as YTicks,
-  D as applyStyles,
-  j as clamp,
-  xe as clampUnfit,
-  Y as clampXPosToChartArea,
-  B as clampYPosToChartArea,
-  Qt as defaultNumericalTicksFormatter,
-  pe as findClosestIndex,
-  I as getScale,
-  De as makeLinearTicks,
-  ue as makeTimeTickFormat,
-  _e as makeTimeTicks,
-  L as posToVal,
-  Ft as pxToValDistance,
-  me as sum,
-  F as useDrawEffect,
-  xt as useFrameState,
-  vt as useInteractionsEvent,
-  Te as useXPositioned,
-  ut as valFits,
-  H as valToPos,
-  mt as valToPxDistance
+  Mt as AreaPlot,
+  _t as AxisOverlay,
+  Pt as BarPlot,
+  ke as CANPLOT_LAYER,
+  Tt as CanPlot,
+  Dt as ChartAreaInteractions,
+  Lt as Crosshair,
+  Ae as FrameDrawer,
+  St as LinePlot,
+  Ct as ScatterPlot,
+  Ut as SelectBox,
+  Et as SparklinePlot,
+  It as TooltipsX,
+  kt as XTicks,
+  At as YTicks,
+  L as applyStyles,
+  W as clamp,
+  xt as clampUnfit,
+  $ as clampXPosToChartArea,
+  V as clampYPosToChartArea,
+  ot as defaultNumericalTicksFormatter,
+  bt as findClosestIndex,
+  _ as getScale,
+  Xt as makeLinearTicks,
+  pt as makeTimeTickFormat,
+  Ft as makeTimeTicks,
+  U as posToVal,
+  $e as pxToValDistance,
+  wt as sum,
+  N as useDrawEffect,
+  ge as useFrameState,
+  be as useInteractionsEvent,
+  Rt as useXPositioned,
+  he as valFits,
+  q as valToPos,
+  ye as valToPxDistance
 };
 //# sourceMappingURL=canplot.mjs.map