react-two.js 0.8.22 → 0.8.23

package/dist/react-two-main.es.js

@@ -1,29 +1,34 @@
-import { jsx as A, Fragment as L } from "react/jsx-runtime";
-import k, { createContext as M, useContext as D, useRef as z, useEffect as w, useState as F, useCallback as U, useMemo as _, useImperativeHandle as N, useLayoutEffect as Q } from "react";
-import I from "two.js";
-const X = M({
+import { jsx as E, Fragment as T } from "react/jsx-runtime";
+import k, { createContext as Z, useContext as X, useRef as A, useEffect as h, useState as $, useCallback as oe, useMemo as g, useImperativeHandle as R } from "react";
+import H from "two.js";
+const ee = Z({
   two: null,
-  parent: null,
-  width: 0,
-  height: 0,
   registerEventShape: () => {
   },
   unregisterEventShape: () => {
   }
-}), q = () => D(X), se = (t, n = []) => {
-  const { two: s } = q(), d = z(t);
-  w(() => {
-    d.current = t;
-  }, [t, ...n]), w(() => {
-    if (!s)
+}), J = Z({
+  parent: null
+}), Q = Z({
+  width: 0,
+  height: 0
+}), ce = ee, C = () => {
+  const n = X(ee), s = X(J), r = X(Q);
+  return { ...n, ...s, ...r };
+}, ve = (n, s = []) => {
+  const { two: r } = C(), l = A(n);
+  h(() => {
+    l.current = n;
+  }, [n, ...s]), h(() => {
+    if (!r)
       return;
-    let f = 0;
-    return s.bind("update", l), () => s.unbind("update", l);
-    function l(a, m) {
-      f += m / 1e3, d.current?.(f, m);
+    let t = 0;
+    return r.bind("update", u), () => r.unbind("update", u);
+    function u(a, e) {
+      t += e / 1e3, l.current?.(t, e);
     }
-  }, [s, ...n]);
-}, J = [
+  }, [r, ...s]);
+}, O = [
   "onClick",
   "onContextMenu",
   "onDoubleClick",
@@ -37,1183 +42,913 @@ const X = M({
   "onPointerMove",
   "onPointerCancel"
 ];
-function O(t, n, s) {
-  const d = n.getBoundingClientRect(), f = t.clientX - d.left - s.width / 2, l = t.clientY - d.top - s.height / 2;
-  return { x: f, y: l };
+function ie(n, s, r) {
+  const l = s.getBoundingClientRect(), t = n.clientX - l.left - r.width / 2, u = n.clientY - l.top - r.height / 2;
+  return { x: t, y: u };
 }
-function B(t, n) {
-  const s = n.getBoundingClientRect(), d = t.clientX - s.left, f = t.clientY - s.top;
-  return { x: d, y: f };
+function U(n, s) {
+  const r = s.getBoundingClientRect(), l = n.clientX - r.left, t = n.clientY - r.top;
+  return { x: l, y: t };
 }
-function W(t, n, s, d) {
-  let f = !1;
+function se(n, s, r, l) {
+  let t = !1;
   return {
-    nativeEvent: t,
-    target: n,
-    currentTarget: s,
-    point: d,
+    nativeEvent: n,
+    target: s,
+    currentTarget: r,
+    point: l,
     stopPropagation: () => {
-      f = !0;
+      t = !0;
     },
     get stopped() {
-      return f;
+      return t;
     }
   };
 }
-function C(t, n, s) {
-  return "visible" in t && !t.visible ? !1 : typeof t.contains == "function" ? t.contains(n, s) : !1;
+function ae(n, s, r) {
+  return "visible" in n && !n.visible ? !1 : typeof n.contains == "function" ? n.contains(s, r) : !1;
 }
-function $(t, n, s) {
-  const d = [];
-  for (const [f] of t)
-    C(f, n, s) && d.push(f);
-  return d;
+function q(n, s, r) {
+  const l = [];
+  for (const [t] of n)
+    ae(t, s, r) && l.push(t);
+  return l;
 }
-function P(t, n) {
-  const s = [t], d = n.get(t);
-  if (d?.parent) {
-    let f = d.parent;
-    for (; f; )
-      s.push(f), f = n.get(f)?.parent;
+function le(n, s) {
+  const r = [n], l = s.get(n);
+  if (l?.parent) {
+    let t = l.parent;
+    for (; t; )
+      r.push(t), t = s.get(t)?.parent;
   }
-  return s;
+  return r;
 }
-function K(t) {
-  process.env.NODE_ENV !== "production" && k.Children.forEach(t, (n) => {
-    if (!k.isValidElement(n))
+function Y(n) {
+  process.env.NODE_ENV !== "production" && k.Children.forEach(n, (s) => {
+    if (!k.isValidElement(s))
       return;
-    const s = n.type;
-    if (typeof s == "string") {
+    const r = s.type;
+    if (typeof r == "string") {
       console.warn(
-        `[react-two.js] <${s}> is not compatible with Canvas.
+        `[react-two.js] <${r}> is not compatible with Canvas.
 Only react-two.js components (Circle, Rectangle, Group, etc.) can be used inside <Canvas>.
 Place DOM elements outside of the Canvas component.
 See: https://github.com/jonobr1/react-two.js#usage`
       );
       return;
     }
-    if (s === k.Fragment) {
-      K(n.props.children);
+    if (r === k.Fragment) {
+      Y(
+        s.props.children
+      );
       return;
     }
-    typeof s == "function" && n.props.children && K(n.props.children);
+    typeof r == "function" && s.props.children && Y(
+      s.props.children
+    );
   });
 }
-const fe = (t) => {
-  const { two: n, parent: s } = q(), d = z(null), f = z(/* @__PURE__ */ new Map()), l = z(/* @__PURE__ */ new Set()), a = z(null), [m, i] = F({
-    two: n,
-    parent: s,
-    width: 0,
-    height: 0,
-    registerEventShape: () => {
-    },
-    unregisterEventShape: () => {
-    }
-  }), o = U(
-    (e, u, c) => {
-      f.current.set(e, { shape: e, handlers: u, parent: c });
+const pe = (n) => {
+  const { two: s, parent: r } = C(), l = A(null), t = A(/* @__PURE__ */ new Map()), u = A(/* @__PURE__ */ new Set()), a = A(null), [e, o] = $(s), [c, i] = $(r), [d, f] = $(0), [v, p] = $(0), j = oe(
+    (m, S, b) => {
+      t.current.set(m, { shape: m, handlers: S, parent: b });
     },
     []
-  ), g = U((e) => {
-    f.current.delete(e), l.current.delete(e), a.current === e && (a.current = null);
+  ), M = oe((m) => {
+    t.current.delete(m), u.current.delete(m), a.current === m && (a.current = null);
   }, []);
-  w(S, [t]);
-  function S() {
-    let e = () => {
-    };
-    if (!n) {
-      let c = function() {
-        const H = b.width !== j, h = !1;
-        H && (j = b.width), (H || h) && i((v) => ({ ...v, width: j, height: T }));
-      };
-      const E = { ...t };
-      delete E.children, delete E.onPointerMissed;
-      const b = new I(E).appendTo(d.current);
-      let j = b.width, T = b.height;
-      i((H) => ({
-        ...H,
-        two: b,
-        parent: b.scene,
-        width: j,
-        height: T,
-        registerEventShape: o,
-        unregisterEventShape: g
-      })), b.bind("update", c), e = () => {
+  h(() => {
+    if (!s) {
+      const S = { ...n };
+      delete S.children;
+      const b = new H(S).appendTo(l.current);
+      return o(b), i(b.scene), f(b.width), p(b.height), () => {
         b.renderer.domElement.parentElement?.removeChild(
           b.renderer.domElement
-        ), b.unbind("update", c);
-        const H = I.Instances.indexOf(b);
-        I.Instances.splice(H, 1), b.pause();
+        ), b.pause(), b.unbind(), b.release();
+        const I = H.Instances.indexOf(b);
+        I >= 0 && H.Instances.splice(I, 1), b.clear();
       };
     }
-    return e;
-  }
-  return w(() => {
-    process.env.NODE_ENV !== "production" && K(t.children);
-  }, [t.children]), w(() => {
-    if (!m.two) return;
-    const e = m.two.renderer.domElement, u = (r, y, p) => {
-      if (r.length === 0) return;
-      const R = r[0], G = O(p, e, m.two), V = P(R, f.current);
-      for (const Y of V) {
-        const Z = f.current.get(Y)?.handlers[y];
-        if (Z) {
-          const x = W(
-            p,
-            R,
-            Y,
-            G
+  }, []), h(() => {
+    !s && (typeof n.width == "number" && (e && (e.width = n.width), f(n.width)), typeof n.height == "number" && (e && (e.height = n.height), p(n.height)));
+  }, [s, e, n.width, n.height]), h(() => {
+    if (!s && e) {
+      let S = function() {
+        const V = b.width !== I, G = b.height !== L;
+        V && (I = b.width), G && (L = b.height), (V || G) && (f(I), p(L));
+      };
+      const b = e;
+      let I = b.width, L = b.height;
+      return (n.fullscreen || n.fitted) && b.bind("update", S), () => {
+        b.unbind("update", S);
+      };
+    }
+  }, [s, e, n.fullscreen, n.fitted]), h(() => {
+    process.env.NODE_ENV !== "production" && Y(n.children);
+  }, [n.children]), h(() => {
+    if (!e) return;
+    const m = e.renderer.domElement, S = (y, w, P) => {
+      if (y.length === 0) return;
+      const N = y[0], B = ie(P, m, e), F = le(N, t.current);
+      for (const ne of F) {
+        const te = t.current.get(ne)?.handlers[w];
+        if (te) {
+          const re = se(
+            P,
+            N,
+            ne,
+            B
           );
-          if (Z(x), x.stopped)
+          if (te(re), re.stopped)
             break;
         }
       }
-    }, c = (r) => {
-      const y = B(r, e), p = $(f.current, y.x, y.y);
-      p.length > 0 && u(p, "onClick", r);
-    }, E = (r) => {
-      const y = B(r, e), p = $(f.current, y.x, y.y);
-      p.length > 0 && u(p, "onContextMenu", r);
-    }, b = (r) => {
-      const y = B(r, e), p = $(f.current, y.x, y.y);
-      p.length > 0 && u(p, "onDoubleClick", r);
-    }, j = (r) => {
-      const y = B(r, e), p = $(f.current, y.x, y.y);
-      p.length > 0 && u(p, "onWheel", r);
-    }, T = (r) => {
-      const y = B(r, e), p = $(f.current, y.x, y.y);
-      p.length > 0 && (u(p, "onPointerDown", r), r.target instanceof Element && r.target.hasPointerCapture?.(r.pointerId) && (a.current = p[0]));
-    }, H = (r) => {
+    }, b = (y) => {
+      const w = U(y, m), P = q(
+        t.current,
+        w.x,
+        w.y
+      );
+      P.length > 0 && S(P, "onClick", y);
+    }, I = (y) => {
+      const w = U(y, m), P = q(
+        t.current,
+        w.x,
+        w.y
+      );
+      P.length > 0 && S(P, "onContextMenu", y);
+    }, L = (y) => {
+      const w = U(y, m), P = q(
+        t.current,
+        w.x,
+        w.y
+      );
+      P.length > 0 && S(P, "onDoubleClick", y);
+    }, V = (y) => {
+      const w = U(y, m), P = q(
+        t.current,
+        w.x,
+        w.y
+      );
+      P.length > 0 && S(P, "onWheel", y);
+    }, G = (y) => {
+      const w = U(y, m), P = q(
+        t.current,
+        w.x,
+        w.y
+      );
+      P.length > 0 && (S(P, "onPointerDown", y), y.target instanceof Element && y.target.hasPointerCapture?.(y.pointerId) && (a.current = P[0]));
+    }, _ = (y) => {
       if (a.current) {
-        const R = f.current.get(a.current);
-        if (R?.handlers.onPointerUp) {
-          const G = O(r, e, m.two), V = W(
-            r,
+        const N = t.current.get(a.current);
+        if (N?.handlers.onPointerUp) {
+          const B = ie(y, m, e), F = se(
+            y,
             a.current,
             a.current,
-            G
+            B
           );
-          R.handlers.onPointerUp(V);
+          N.handlers.onPointerUp(F);
         }
         a.current = null;
         return;
       }
-      const y = B(r, e), p = $(f.current, y.x, y.y);
-      p.length > 0 ? u(p, "onPointerUp", r) : t.onPointerMissed && t.onPointerMissed(r);
-    }, h = (r) => {
-      const y = B(r, e), p = $(f.current, y.x, y.y), R = new Set(p);
-      p.length > 0 && u(p, "onPointerMove", r);
-      const G = l.current;
-      for (const V of R)
-        G.has(V) || (u([V], "onPointerEnter", r), u([V], "onPointerOver", r));
-      for (const V of G)
-        R.has(V) || (u([V], "onPointerLeave", r), u([V], "onPointerOut", r));
-      l.current = R;
-    }, v = (r) => {
-      const y = B(r, e), p = $(f.current, y.x, y.y);
-      p.length > 0 && u(p, "onPointerCancel", r), a.current = null;
+      const w = U(y, m), P = q(
+        t.current,
+        w.x,
+        w.y
+      );
+      P.length > 0 ? S(P, "onPointerUp", y) : n.onPointerMissed && n.onPointerMissed(y);
+    }, z = (y) => {
+      const w = U(y, m), P = q(
+        t.current,
+        w.x,
+        w.y
+      ), N = new Set(P);
+      P.length > 0 && S(P, "onPointerMove", y);
+      const B = u.current;
+      for (const F of N)
+        B.has(F) || (S([F], "onPointerEnter", y), S([F], "onPointerOver", y));
+      for (const F of B)
+        N.has(F) || (S([F], "onPointerLeave", y), S([F], "onPointerOut", y));
+      u.current = N;
+    }, W = (y) => {
+      const w = U(y, m), P = q(
+        t.current,
+        w.x,
+        w.y
+      );
+      P.length > 0 && S(P, "onPointerCancel", y), a.current = null;
     };
-    return e.addEventListener("click", c), e.addEventListener("contextmenu", E), e.addEventListener("dblclick", b), e.addEventListener("wheel", j), e.addEventListener("pointerdown", T), e.addEventListener("pointerup", H), e.addEventListener("pointermove", h), e.addEventListener("pointercancel", v), () => {
-      e.removeEventListener("click", c), e.removeEventListener("contextmenu", E), e.removeEventListener("dblclick", b), e.removeEventListener("wheel", j), e.removeEventListener("pointerdown", T), e.removeEventListener("pointerup", H), e.removeEventListener("pointermove", h), e.removeEventListener("pointercancel", v);
+    return m.addEventListener("click", b), m.addEventListener("contextmenu", I), m.addEventListener("dblclick", L), m.addEventListener("wheel", V), m.addEventListener("pointerdown", G), m.addEventListener("pointerup", _), m.addEventListener("pointermove", z), m.addEventListener("pointercancel", W), () => {
+      m.removeEventListener("click", b), m.removeEventListener("contextmenu", I), m.removeEventListener("dblclick", L), m.removeEventListener("wheel", V), m.removeEventListener("pointerdown", G), m.removeEventListener("pointerup", _), m.removeEventListener("pointermove", z), m.removeEventListener("pointercancel", W);
     };
-  }, [m.two, t.onPointerMissed, o, g]), /* @__PURE__ */ A(X.Provider, { value: m, children: /* @__PURE__ */ A("div", { ref: d, children: t.children }) });
-}, ce = k.forwardRef(
-  ({ x: t, y: n, ...s }, d) => {
+  }, [
+    e,
+    n.onPointerMissed,
+    j,
+    M
+  ]);
+  const x = g(
+    () => ({
+      two: e,
+      registerEventShape: j,
+      unregisterEventShape: M
+    }),
+    [e, j, M]
+  ), D = g(
+    () => ({
+      parent: c
+    }),
+    [c]
+  ), K = g(
+    () => ({
+      width: d,
+      height: v
+    }),
+    [d, v]
+  );
+  return /* @__PURE__ */ E(ee.Provider, { value: x, children: /* @__PURE__ */ E(J.Provider, { value: D, children: /* @__PURE__ */ E(Q.Provider, { value: K, children: /* @__PURE__ */ E("div", { ref: l, ...n.container, children: n.children }) }) }) });
+}, ge = k.forwardRef(
+  ({ x: n, y: s, ...r }, l) => {
     const {
-      two: f,
-      parent: l,
+      two: t,
+      parent: u,
       width: a,
-      height: m,
-      registerEventShape: i,
-      unregisterEventShape: o
-    } = q(), [g, S] = F(null), { eventHandlers: e, shapeProps: u } = _(() => {
-      const c = {}, E = {};
-      for (const b in s)
-        J.includes(b) ? c[b] = s[b] : E[b] = s[b];
-      return { eventHandlers: c, shapeProps: E };
-    }, [s]);
-    return w(() => {
-      if (f) {
-        const c = new I.Group();
-        return S(c), () => {
-          S(null);
-        };
-      }
-    }, [f]), w(() => {
-      const c = g;
-      if (l && c)
-        return l.add(c), () => {
-          l.remove(c);
+      height: e,
+      registerEventShape: o,
+      unregisterEventShape: c
+    } = C(), i = g(() => new H.Group(), []), { eventHandlers: d, shapeProps: f } = g(() => {
+      const M = {}, x = {};
+      for (const D in r)
+        O.includes(D) ? M[D] = r[
+          D
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : x[D] = r[D];
+      return { eventHandlers: M, shapeProps: x };
+    }, [r]);
+    h(() => {
+      if (u)
+        return u.add(i), () => {
+          u.remove(i);
         };
-    }, [g, l]), w(() => {
-      if (g) {
-        const c = g;
-        typeof t == "number" && (c.translation.x = t), typeof n == "number" && (c.translation.y = n);
-        const E = { ...u };
-        delete E.children;
-        for (const b in E)
-          b in c && (c[b] = E[b]);
-      }
-    }, [g, t, n, u]), w(() => {
-      if (g && Object.keys(e).length > 0)
-        return i(g, e, l ?? void 0), () => {
-          o(g);
+    }, [u, i]), h(() => {
+      typeof n == "number" && (i.translation.x = n), typeof s == "number" && (i.translation.y = s);
+      const M = { ...f };
+      delete M.children;
+      for (const x in M)
+        x in i && (i[x] = M[x]);
+    }, [i, n, s, f]), h(() => {
+      if (Object.keys(d).length > 0)
+        return o(i, d, u ?? void 0), () => {
+          c(i);
         };
-    }, [g, i, o, l, e]), N(d, () => g, [g]), /* @__PURE__ */ A(
-      X.Provider,
-      {
-        value: {
-          two: f,
-          parent: g,
-          width: a,
-          height: m,
-          registerEventShape: i,
-          unregisterEventShape: o
-        },
-        children: s.children
-      }
+    }, [
+      i,
+      o,
+      c,
+      u,
+      d
+    ]), R(l, () => i, [i]);
+    const v = g(
+      () => ({
+        two: t,
+        registerEventShape: o,
+        unregisterEventShape: c
+      }),
+      [t, o, c]
+    ), p = g(
+      () => ({
+        parent: i
+      }),
+      [i]
+    ), j = g(
+      () => ({
+        width: a,
+        height: e
+      }),
+      [a, e]
     );
+    return /* @__PURE__ */ E(ce.Provider, { value: v, children: /* @__PURE__ */ E(J.Provider, { value: p, children: /* @__PURE__ */ E(Q.Provider, { value: j, children: r.children }) }) });
   }
-), ie = k.forwardRef(
-  ({
-    manual: t,
-    x: n,
-    y: s,
-    // Event handlers
-    onClick: d,
-    onContextMenu: f,
-    onDoubleClick: l,
-    onWheel: a,
-    onPointerDown: m,
-    onPointerUp: i,
-    onPointerOver: o,
-    onPointerOut: g,
-    onPointerEnter: S,
-    onPointerLeave: e,
-    onPointerMove: u,
-    onPointerCancel: c,
-    // All other props are shape props
-    ...E
-  }, b) => {
-    const { two: j, parent: T, registerEventShape: H, unregisterEventShape: h } = q(), [v, r] = F(null), y = _(
+), ye = k.forwardRef(
+  ({ x: n, y: s, src: r, content: l, onLoad: t, onError: u, ...a }, e) => {
+    const {
+      two: o,
+      parent: c,
+      width: i,
+      height: d,
+      registerEventShape: f,
+      unregisterEventShape: v
+    } = C(), p = g(() => new H.Group(), []), j = A(null), M = A(t), x = A(u), D = A({ two: null, key: null });
+    h(() => {
+      M.current = t;
+    }, [t]), h(() => {
+      x.current = u;
+    }, [u]);
+    const { eventHandlers: K, shapeProps: m } = g(() => {
+      const L = {}, V = {};
+      for (const G in a)
+        O.includes(G) ? L[G] = a[
+          G
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : V[G] = a[G];
+      return { eventHandlers: L, shapeProps: V };
+    }, [a]);
+    h(() => {
+      j.current = p;
+    }, [p]), h(() => {
+      if (c && p)
+        return c.add(p), () => {
+          c.remove(p);
+        };
+    }, [p, c]), h(() => {
+      !r && !l && console.warn(
+        '[react-two.js] SVG component requires either "src" or "content" prop'
+      ), r && l && console.warn(
+        '[react-two.js] SVG component has both "src" and "content" props. Using "src" and ignoring "content"'
+      );
+    }, [r, l]), h(() => {
+      if (!o) return;
+      const L = r || l;
+      if (!L) return;
+      const V = L, G = D.current;
+      if (G.two === o && G.key === V)
+        return;
+      let _ = !0;
+      D.current = { two: o, key: V };
+      try {
+        o.load(
+          L,
+          (z, W) => {
+            if (!_) return;
+            j.current?.add(z.children);
+            const y = M.current;
+            if (y)
+              try {
+                requestAnimationFrame(() => y(j.current, W));
+              } catch (w) {
+                console.error(
+                  "[react-two.js] Error in SVG onLoad callback:",
+                  w
+                );
+              }
+          }
+        );
+      } catch (z) {
+        if (!_) return;
+        const W = z instanceof Error ? z : new Error("Failed to load SVG"), y = x.current;
+        if (y)
+          try {
+            y(W);
+          } catch (w) {
+            console.error(
+              "[react-two.js] Error in SVG onError callback:",
+              w
+            );
+          }
+        else
+          console.error("[react-two.js] SVG loading error:", W);
+      }
+      return () => {
+        _ = !1, D.current = { two: null, key: null }, j.current?.remove(j.current.children);
+      };
+    }, [o, r, l]), h(() => {
+      typeof n == "number" && (p.translation.x = n), typeof s == "number" && (p.translation.y = s);
+      const L = { ...m };
+      delete L.children;
+      for (const V in L)
+        V in p && (p[V] = L[V]);
+    }, [p, n, s, m]), h(() => {
+      if (Object.keys(K).length > 0)
+        return f(p, K, c ?? void 0), () => {
+          v(p);
+        };
+    }, [p, f, v, c, K]), R(e, () => p, [p]);
+    const S = g(
+      () => ({
+        two: o,
+        registerEventShape: f,
+        unregisterEventShape: v
+      }),
+      [o, f, v]
+    ), b = g(
       () => ({
-        ...d && { onClick: d },
-        ...f && { onContextMenu: f },
-        ...l && { onDoubleClick: l },
-        ...a && { onWheel: a },
-        ...m && { onPointerDown: m },
-        ...i && { onPointerUp: i },
-        ...o && { onPointerOver: o },
-        ...g && { onPointerOut: g },
-        ...S && { onPointerEnter: S },
-        ...e && { onPointerLeave: e },
-        ...u && { onPointerMove: u },
-        ...c && { onPointerCancel: c }
+        parent: p
       }),
-      [
-        d,
-        f,
-        l,
-        a,
-        m,
-        i,
-        o,
-        g,
-        S,
-        e,
-        u,
-        c
-      ]
+      [p]
+    ), I = g(
+      () => ({
+        width: i,
+        height: d
+      }),
+      [i, d]
     );
-    return w(() => {
-      const p = new I.Path();
-      return r(p), () => {
-        r(null);
-      };
-    }, [j]), w(() => {
-      if (T && v)
-        return T.add(v), () => {
-          T.remove(v);
+    return /* @__PURE__ */ E(ce.Provider, { value: S, children: /* @__PURE__ */ E(J.Provider, { value: b, children: /* @__PURE__ */ E(Q.Provider, { value: I, children: a.children }) }) });
+  }
+), me = k.forwardRef(
+  ({ manual: n, x: s, y: r, ...l }, t) => {
+    const { parent: u, registerEventShape: a, unregisterEventShape: e } = C(), o = g(() => new H.Path(), []), { eventHandlers: c, shapeProps: i } = g(() => {
+      const d = {}, f = {};
+      for (const v in l)
+        O.includes(v) ? d[v] = l[
+          v
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : f[v] = l[v];
+      return { eventHandlers: d, shapeProps: f };
+    }, [l]);
+    return h(() => {
+      if (u)
+        return u.add(o), () => {
+          u.remove(o);
         };
-    }, [T, v]), w(() => {
-      if (v && Object.keys(y).length > 0)
-        return H(v, y, T ?? void 0), () => {
-          h(v);
+    }, [u, o]), h(() => {
+      if (Object.keys(c).length > 0)
+        return a(o, c, u ?? void 0), () => {
+          e(o);
         };
-    }, [v, H, h, T, y]), w(() => {
-      if (v) {
-        const p = v;
-        typeof n == "number" && (p.translation.x = n), typeof s == "number" && (p.translation.y = s), typeof t < "u" && (p.automatic = !t);
-        for (const R in E)
-          R in p && (p[R] = E[R]);
-      }
-    }, [E, v, n, s, t]), N(b, () => v, [v]), /* @__PURE__ */ A(L, {});
+    }, [o, a, e, u, c]), h(() => {
+      typeof s == "number" && (o.translation.x = s), typeof r == "number" && (o.translation.y = r), typeof n < "u" && (o.automatic = !n);
+      for (const d in i)
+        d in o && (o[d] = i[d]);
+    }, [i, o, s, r, n]), R(t, () => o, [o]), /* @__PURE__ */ E(T, {});
   }
-), ae = k.forwardRef(
-  ({ x: t, y: n, ...s }, d) => {
-    const { two: f, parent: l, registerEventShape: a, unregisterEventShape: m } = q(), [i, o] = F(null), { eventHandlers: g, shapeProps: S } = _(() => {
-      const e = {}, u = {};
-      for (const c in s)
-        J.includes(c) ? e[c] = s[c] : u[c] = s[c];
-      return { eventHandlers: e, shapeProps: u };
-    }, [s]);
-    return w(() => {
-      const e = new I.Points();
-      return o(e), () => {
-        o(null);
-      };
-    }, [f, t, n]), w(() => {
-      if (l && i)
-        return l.add(i), () => {
-          l.remove(i);
+), we = k.forwardRef(
+  ({ x: n, y: s, ...r }, l) => {
+    const { parent: t, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Points(), []), { eventHandlers: o, shapeProps: c } = g(() => {
+      const i = {}, d = {};
+      for (const f in r)
+        O.includes(f) ? i[f] = r[
+          f
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : d[f] = r[f];
+      return { eventHandlers: i, shapeProps: d };
+    }, [r]);
+    return h(() => {
+      if (t)
+        return t.add(e), () => {
+          t.remove(e);
         };
-    }, [l, i]), w(() => {
-      if (i) {
-        const e = i;
-        typeof t == "number" && (e.translation.x = t), typeof n == "number" && (e.translation.y = n);
-        for (const u in S)
-          u in e && (e[u] = S[u]);
-      }
-    }, [S, i, t, n]), w(() => {
-      if (i && Object.keys(g).length > 0)
-        return a(i, g, l ?? void 0), () => {
-          m(i);
+    }, [t, e]), h(() => {
+      typeof n == "number" && (e.translation.x = n), typeof s == "number" && (e.translation.y = s);
+      for (const i in c)
+        i in e && (e[i] = c[i]);
+    }, [c, e, n, s]), h(() => {
+      if (Object.keys(o).length > 0)
+        return u(e, o, t ?? void 0), () => {
+          a(e);
         };
-    }, [i, a, m, l, g]), N(d, () => i, [i]), /* @__PURE__ */ A(L, {});
+    }, [
+      e,
+      u,
+      a,
+      t,
+      o
+    ]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
   }
-), ue = k.forwardRef(
-  ({
-    x: t,
-    y: n,
-    // Event handlers
-    onClick: s,
-    onContextMenu: d,
-    onDoubleClick: f,
-    onWheel: l,
-    onPointerDown: a,
-    onPointerUp: m,
-    onPointerOver: i,
-    onPointerOut: o,
-    onPointerEnter: g,
-    onPointerLeave: S,
-    onPointerMove: e,
-    onPointerCancel: u,
-    // All other props are shape props
-    ...c
-  }, E) => {
-    const { two: b, parent: j, registerEventShape: T, unregisterEventShape: H } = q(), [h, v] = F(null), r = _(
-      () => ({
-        ...s && { onClick: s },
-        ...d && { onContextMenu: d },
-        ...f && { onDoubleClick: f },
-        ...l && { onWheel: l },
-        ...a && { onPointerDown: a },
-        ...m && { onPointerUp: m },
-        ...i && { onPointerOver: i },
-        ...o && { onPointerOut: o },
-        ...g && { onPointerEnter: g },
-        ...S && { onPointerLeave: S },
-        ...e && { onPointerMove: e },
-        ...u && { onPointerCancel: u }
-      }),
-      [
-        s,
-        d,
-        f,
-        l,
-        a,
-        m,
-        i,
-        o,
-        g,
-        S,
-        e,
-        u
-      ]
-    );
-    return w(() => {
-      const y = new I.Text();
-      return v(y), () => {
-        v(null);
-      };
-    }, [b]), w(() => {
-      if (j && h)
-        return j.add(h), () => {
-          j.remove(h);
+), Pe = k.forwardRef(
+  ({ x: n, y: s, ...r }, l) => {
+    const { parent: t, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Text(), []), { eventHandlers: o, shapeProps: c } = g(() => {
+      const i = {}, d = {};
+      for (const f in r)
+        O.includes(f) ? i[f] = r[
+          f
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : d[f] = r[f];
+      return { eventHandlers: i, shapeProps: d };
+    }, [r]);
+    return h(() => {
+      if (t)
+        return t.add(e), () => {
+          t.remove(e);
         };
-    }, [j, h]), w(() => {
-      if (h) {
-        const y = h;
-        typeof t == "number" && (y.translation.x = t), typeof n == "number" && (y.translation.y = n);
-        for (const p in c)
-          p in y && (y[p] = c[p]);
-      }
-    }, [c, h, t, n]), w(() => {
-      if (h && Object.keys(r).length > 0)
-        return T(h, r, j ?? void 0), () => {
-          H(h);
+    }, [t, e]), h(() => {
+      typeof n == "number" && (e.translation.x = n), typeof s == "number" && (e.translation.y = s);
+      for (const i in c)
+        i in e && (e[i] = c[i]);
+    }, [c, e, n, s]), h(() => {
+      if (Object.keys(o).length > 0)
+        return u(e, o, t ?? void 0), () => {
+          a(e);
         };
-    }, [h, T, H, j, r]), N(E, () => h, [h]), /* @__PURE__ */ A(L, {});
+    }, [e, u, a, t, o]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
   }
-), de = k.forwardRef(
-  ({
-    x: t,
-    y: n,
-    resolution: s,
-    // Event handlers
-    onClick: d,
-    onContextMenu: f,
-    onDoubleClick: l,
-    onWheel: a,
-    onPointerDown: m,
-    onPointerUp: i,
-    onPointerOver: o,
-    onPointerOut: g,
-    onPointerEnter: S,
-    onPointerLeave: e,
-    onPointerMove: u,
-    onPointerCancel: c,
-    // All other props are shape props
-    ...E
-  }, b) => {
-    const { two: j, parent: T, registerEventShape: H, unregisterEventShape: h } = q(), [v, r] = F(null), y = _(
-      () => ({
-        ...d && { onClick: d },
-        ...f && { onContextMenu: f },
-        ...l && { onDoubleClick: l },
-        ...a && { onWheel: a },
-        ...m && { onPointerDown: m },
-        ...i && { onPointerUp: i },
-        ...o && { onPointerOver: o },
-        ...g && { onPointerOut: g },
-        ...S && { onPointerEnter: S },
-        ...e && { onPointerLeave: e },
-        ...u && { onPointerMove: u },
-        ...c && { onPointerCancel: c }
-      }),
-      [
-        d,
-        f,
-        l,
-        a,
-        m,
-        i,
-        o,
-        g,
-        S,
-        e,
-        u,
-        c
-      ]
-    );
-    return w(() => {
-      const p = new I.ArcSegment(0, 0, 0, 0, 0, 0, s);
-      return r(p), () => {
-        r(null);
-      };
-    }, [s, j]), w(() => {
-      if (T && v)
-        return T.add(v), () => {
-          T.remove(v);
+), be = k.forwardRef(
+  ({ x: n, y: s, resolution: r, ...l }, t) => {
+    const { parent: u, registerEventShape: a, unregisterEventShape: e } = C(), o = g(
+      () => new H.ArcSegment(0, 0, 0, 0, 0, 0, r),
+      [r]
+    ), { eventHandlers: c, shapeProps: i } = g(() => {
+      const d = {}, f = {};
+      for (const v in l)
+        O.includes(v) ? d[v] = l[
+          v
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : f[v] = l[v];
+      return { eventHandlers: d, shapeProps: f };
+    }, [l]);
+    return h(() => {
+      if (u)
+        return u.add(o), () => {
+          u.remove(o);
         };
-    }, [T, v]), w(() => {
-      if (v) {
-        const p = v;
-        typeof t == "number" && (p.translation.x = t), typeof n == "number" && (p.translation.y = n);
-        for (const R in E)
-          R in p && (p[R] = E[R]);
-      }
-    }, [E, v, t, n]), w(() => {
-      if (v && Object.keys(y).length > 0)
-        return H(v, y, T ?? void 0), () => {
-          h(v);
+    }, [u, o]), h(() => {
+      typeof n == "number" && (o.translation.x = n), typeof s == "number" && (o.translation.y = s);
+      for (const d in i)
+        d in o && (o[d] = i[d]);
+    }, [i, o, n, s]), h(() => {
+      if (Object.keys(c).length > 0)
+        return a(o, c, u ?? void 0), () => {
+          e(o);
         };
-    }, [v, H, h, T, y]), N(b, () => v, [v]), /* @__PURE__ */ A(L, {});
+    }, [
+      o,
+      a,
+      e,
+      u,
+      c
+    ]), R(t, () => o, [o]), /* @__PURE__ */ E(T, {});
   }
-), le = k.forwardRef(
-  ({
-    x: t,
-    y: n,
-    resolution: s,
-    // Event handlers
-    onClick: d,
-    onContextMenu: f,
-    onDoubleClick: l,
-    onWheel: a,
-    onPointerDown: m,
-    onPointerUp: i,
-    onPointerOver: o,
-    onPointerOut: g,
-    onPointerEnter: S,
-    onPointerLeave: e,
-    onPointerMove: u,
-    onPointerCancel: c,
-    // All other props are shape props
-    ...E
-  }, b) => {
-    const { two: j, parent: T, registerEventShape: H, unregisterEventShape: h } = q(), [v, r] = F(null), y = _(
-      () => ({
-        ...d && { onClick: d },
-        ...f && { onContextMenu: f },
-        ...l && { onDoubleClick: l },
-        ...a && { onWheel: a },
-        ...m && { onPointerDown: m },
-        ...i && { onPointerUp: i },
-        ...o && { onPointerOver: o },
-        ...g && { onPointerOut: g },
-        ...S && { onPointerEnter: S },
-        ...e && { onPointerLeave: e },
-        ...u && { onPointerMove: u },
-        ...c && { onPointerCancel: c }
-      }),
-      [
-        d,
-        f,
-        l,
-        a,
-        m,
-        i,
-        o,
-        g,
-        S,
-        e,
-        u,
-        c
-      ]
-    );
-    return w(() => {
-      const p = new I.Circle(0, 0, 0, s);
-      return r(p), () => {
-        r(null);
-      };
-    }, [s, j]), w(() => {
-      if (v) {
-        const p = v;
-        typeof t == "number" && (p.translation.x = t), typeof n == "number" && (p.translation.y = n);
-        for (const R in E)
-          R in p && (p[R] = E[R]);
-      }
-    }, [v, E, t, n]), w(() => {
-      if (T && v)
-        return T.add(v), () => {
-          T.remove(v);
+), Ee = k.forwardRef(
+  ({ x: n, y: s, resolution: r, ...l }, t) => {
+    const { parent: u, registerEventShape: a, unregisterEventShape: e } = C(), o = g(
+      () => new H.Circle(0, 0, 0, r),
+      [r]
+    ), { eventHandlers: c, shapeProps: i } = g(() => {
+      const d = {}, f = {};
+      for (const v in l)
+        O.includes(v) ? d[v] = l[
+          v
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : f[v] = l[v];
+      return { eventHandlers: d, shapeProps: f };
+    }, [l]);
+    return h(() => {
+      typeof n == "number" && (o.translation.x = n), typeof s == "number" && (o.translation.y = s);
+      for (const d in i)
+        d in o && (o[d] = i[d]);
+    }, [o, i, n, s]), h(() => {
+      if (u)
+        return u.add(o), () => {
+          u.remove(o);
         };
-    }, [T, v]), w(() => {
-      if (v && Object.keys(y).length > 0)
-        return H(v, y, T ?? void 0), () => {
-          h(v);
+    }, [u, o]), h(() => {
+      if (Object.keys(c).length > 0)
+        return a(o, c, u ?? void 0), () => {
+          e(o);
         };
-    }, [v, H, h, T, y]), N(b, () => v, [v]), /* @__PURE__ */ A(L, {});
+    }, [
+      o,
+      a,
+      e,
+      u,
+      c
+    ]), R(t, () => o, [o]), /* @__PURE__ */ E(T, {});
   }
-), ge = k.forwardRef(
-  ({ x: t, y: n, resolution: s, ...d }, f) => {
-    const { two: l, parent: a, registerEventShape: m, unregisterEventShape: i } = q(), [o, g] = F(null), { eventHandlers: S, shapeProps: e } = _(() => {
-      const u = {}, c = {};
-      for (const E in d)
-        J.includes(E) ? u[E] = d[E] : c[E] = d[E];
-      return { eventHandlers: u, shapeProps: c };
-    }, [d]);
-    return w(() => {
-      const u = new I.Ellipse(0, 0, 0, 0, s);
-      return g(u), () => {
-        g(null);
-      };
-    }, [s, l]), w(() => {
-      if (a && o)
-        return a.add(o), () => {
-          a.remove(o);
+), Se = k.forwardRef(
+  ({ x: n, y: s, resolution: r, ...l }, t) => {
+    const { parent: u, registerEventShape: a, unregisterEventShape: e } = C(), o = g(
+      () => new H.Ellipse(0, 0, 0, 0, r),
+      [r]
+    ), { eventHandlers: c, shapeProps: i } = g(() => {
+      const d = {}, f = {};
+      for (const v in l)
+        O.includes(v) ? d[v] = l[
+          v
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : f[v] = l[v];
+      return { eventHandlers: d, shapeProps: f };
+    }, [l]);
+    return h(() => {
+      if (u)
+        return u.add(o), () => {
+          u.remove(o);
         };
-    }, [a, o]), w(() => {
-      if (o) {
-        const u = o;
-        typeof t == "number" && (u.translation.x = t), typeof n == "number" && (u.translation.y = n);
-        for (const c in e)
-          c in u && (u[c] = e[c]);
-      }
-    }, [o, t, n, e]), w(() => {
-      if (o && Object.keys(S).length > 0)
-        return m(o, S, a ?? void 0), () => {
-          i(o);
+    }, [u, o]), h(() => {
+      typeof n == "number" && (o.translation.x = n), typeof s == "number" && (o.translation.y = s);
+      for (const d in i)
+        d in o && (o[d] = i[d]);
+    }, [o, n, s, i]), h(() => {
+      if (Object.keys(c).length > 0)
+        return a(o, c, u ?? void 0), () => {
+          e(o);
         };
-    }, [o, m, i, a, S]), N(f, () => o, [o]), /* @__PURE__ */ A(L, {});
+    }, [
+      o,
+      a,
+      e,
+      u,
+      c
+    ]), R(t, () => o, [o]), /* @__PURE__ */ E(T, {});
   }
-), he = k.forwardRef(
-  ({
-    mode: t,
-    texture: n,
-    x: s,
-    y: d,
-    // Event handlers
-    onClick: f,
-    onContextMenu: l,
-    onDoubleClick: a,
-    onWheel: m,
-    onPointerDown: i,
-    onPointerUp: o,
-    onPointerOver: g,
-    onPointerOut: S,
-    onPointerEnter: e,
-    onPointerLeave: u,
-    onPointerMove: c,
-    onPointerCancel: E,
-    // All other props are shape props
-    ...b
-  }, j) => {
-    const { two: T, parent: H, registerEventShape: h, unregisterEventShape: v } = q(), [r, y] = F(null), p = _(
-      () => ({
-        ...f && { onClick: f },
-        ...l && { onContextMenu: l },
-        ...a && { onDoubleClick: a },
-        ...m && { onWheel: m },
-        ...i && { onPointerDown: i },
-        ...o && { onPointerUp: o },
-        ...g && { onPointerOver: g },
-        ...S && { onPointerOut: S },
-        ...e && { onPointerEnter: e },
-        ...u && { onPointerLeave: u },
-        ...c && { onPointerMove: c },
-        ...E && { onPointerCancel: E }
-      }),
-      [
-        f,
-        l,
-        a,
-        m,
-        i,
-        o,
-        g,
-        S,
-        e,
-        u,
-        c,
-        E
-      ]
-    );
-    return Q(() => {
-      const R = new I.Image();
-      return y(R), () => {
-        y(null);
-      };
-    }, [T]), w(() => {
-      if (H && r)
-        return H.add(r), () => {
-          H.remove(r);
+), ke = k.forwardRef(
+  ({ mode: n, src: s, texture: r, x: l, y: t, ...u }, a) => {
+    const { parent: e, registerEventShape: o, unregisterEventShape: c } = C(), i = g(() => new H.Image(s), [s]), { eventHandlers: d, shapeProps: f } = g(() => {
+      const v = {}, p = {};
+      for (const j in u)
+        O.includes(j) ? v[j] = u[
+          j
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : p[j] = u[j];
+      return { eventHandlers: v, shapeProps: p };
+    }, [u]);
+    return h(() => {
+      if (e)
+        return e.add(i), () => {
+          e.remove(i);
         };
-    }, [H, r]), w(() => {
-      if (r) {
-        const R = r;
-        typeof t < "u" && (R.mode = t), typeof n < "u" && (R.texture = n), typeof s == "number" && (R.translation.x = s), typeof d == "number" && (R.translation.y = d);
-        for (const G in b)
-          G in R && (R[G] = b[G]);
-      }
-    }, [r, b, t, n, s, d]), w(() => {
-      if (r && Object.keys(p).length > 0)
-        return h(r, p, H ?? void 0), () => {
-          v(r);
+    }, [e, i]), h(() => {
+      typeof n < "u" && (i.mode = n), typeof r < "u" && (i.texture = r), typeof l == "number" && (i.translation.x = l), typeof t == "number" && (i.translation.y = t);
+      for (const v in f)
+        v in i && (i[v] = f[v]);
+    }, [i, f, n, r, l, t]), h(() => {
+      if (Object.keys(d).length > 0)
+        return o(i, d, e ?? void 0), () => {
+          c(i);
         };
-    }, [r, h, v, H, p]), N(j, () => r, [r]), /* @__PURE__ */ A(L, {});
+    }, [
+      i,
+      o,
+      c,
+      e,
+      d
+    ]), R(a, () => i, [i]), /* @__PURE__ */ E(T, {});
   }
-), pe = k.forwardRef(
-  ({ paths: t, x: n, y: s, autoPlay: d, ...f }, l) => {
-    const { two: a, parent: m, registerEventShape: i, unregisterEventShape: o } = q(), [g, S] = F(null), { eventHandlers: e, shapeProps: u } = _(() => {
-      const c = {}, E = {};
-      for (const b in f)
-        J.includes(b) ? c[b] = f[b] : E[b] = f[b];
-      return { eventHandlers: c, shapeProps: E };
-    }, [f]);
-    return Q(() => {
-      const c = new I.ImageSequence(t);
-      return S(c), () => {
-        S(null);
-      };
-    }, [a, t]), w(() => {
-      if (m && g)
-        return m.add(g), () => {
-          m.remove(g);
+), He = k.forwardRef(
+  ({ src: n, x: s, y: r, autoPlay: l, ...t }, u) => {
+    const { parent: a, registerEventShape: e, unregisterEventShape: o } = C(), c = g(() => new H.ImageSequence(n), [n]), { eventHandlers: i, shapeProps: d } = g(() => {
+      const f = {}, v = {};
+      for (const p in t)
+        O.includes(p) ? f[p] = t[
+          p
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : v[p] = t[p];
+      return { eventHandlers: f, shapeProps: v };
+    }, [t]);
+    return h(() => {
+      if (a)
+        return a.add(c), () => {
+          a.remove(c);
         };
-    }, [m, g]), w(() => {
-      if (g) {
-        const c = g;
-        d ? c.play() : c.pause(), typeof n == "number" && (c.translation.x = n), typeof s == "number" && (c.translation.y = s);
-        for (const E in u)
-          E in c && (c[E] = u[E]);
-      }
-    }, [u, g, t, n, s, d]), w(() => {
-      if (g && Object.keys(e).length > 0)
-        return i(g, e, m ?? void 0), () => {
-          o(g);
+    }, [a, c]), h(() => {
+      l ? c.play() : c.pause(), typeof s == "number" && (c.translation.x = s), typeof r == "number" && (c.translation.y = r);
+      for (const f in d)
+        f in c && (c[f] = d[f]);
+    }, [d, c, s, r, l]), h(() => {
+      if (Object.keys(i).length > 0)
+        return e(c, i, a ?? void 0), () => {
+          o(c);
         };
-    }, [g, i, o, m, e]), N(l, () => g, [g]), /* @__PURE__ */ A(L, {});
+    }, [
+      c,
+      e,
+      o,
+      a,
+      i
+    ]), R(u, () => c, [c]), /* @__PURE__ */ E(T, {});
   }
-), me = k.forwardRef(
-  ({
-    x1: t,
-    y1: n,
-    x2: s,
-    y2: d,
-    // Event handlers
-    onClick: f,
-    onContextMenu: l,
-    onDoubleClick: a,
-    onWheel: m,
-    onPointerDown: i,
-    onPointerUp: o,
-    onPointerOver: g,
-    onPointerOut: S,
-    onPointerEnter: e,
-    onPointerLeave: u,
-    onPointerMove: c,
-    onPointerCancel: E,
-    // All other props are shape props
-    ...b
-  }, j) => {
-    const { two: T, parent: H, registerEventShape: h, unregisterEventShape: v } = q(), [r, y] = F(null), p = _(
-      () => ({
-        ...f && { onClick: f },
-        ...l && { onContextMenu: l },
-        ...a && { onDoubleClick: a },
-        ...m && { onWheel: m },
-        ...i && { onPointerDown: i },
-        ...o && { onPointerUp: o },
-        ...g && { onPointerOver: g },
-        ...S && { onPointerOut: S },
-        ...e && { onPointerEnter: e },
-        ...u && { onPointerLeave: u },
-        ...c && { onPointerMove: c },
-        ...E && { onPointerCancel: E }
-      }),
-      [
-        f,
-        l,
-        a,
-        m,
-        i,
-        o,
-        g,
-        S,
-        e,
-        u,
-        c,
-        E
-      ]
-    );
-    return w(() => {
-      const R = new I.Line();
-      return y(R), () => {
-        y(null);
-      };
-    }, [T]), w(() => {
-      const R = r;
-      if (H && R)
-        return H.add(R), () => {
-          H.remove(R);
+), Re = k.forwardRef(
+  ({ x1: n, y1: s, x2: r, y2: l, ...t }, u) => {
+    const { parent: a, registerEventShape: e, unregisterEventShape: o } = C(), c = g(() => new H.Line(), []), { eventHandlers: i, shapeProps: d } = g(() => {
+      const f = {}, v = {};
+      for (const p in t)
+        O.includes(p) ? f[p] = t[
+          p
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : v[p] = t[p];
+      return { eventHandlers: f, shapeProps: v };
+    }, [t]);
+    return h(() => {
+      if (a)
+        return a.add(c), () => {
+          a.remove(c);
         };
-    }, [H, r]), w(() => {
-      if (r) {
-        const R = r;
-        typeof t == "number" && (R.left.x = t), typeof n == "number" && (R.left.y = n), typeof s == "number" && (R.right.x = s), typeof d == "number" && (R.right.y = d);
-        for (const G in b)
-          G in R && (R[G] = b[G]);
-      }
-    }, [b, r, t, n, s, d]), w(() => {
-      if (r && Object.keys(p).length > 0)
-        return h(r, p, H ?? void 0), () => {
-          v(r);
+    }, [a, c]), h(() => {
+      typeof n == "number" && (c.left.x = n), typeof s == "number" && (c.left.y = s), typeof r == "number" && (c.right.x = r), typeof l == "number" && (c.right.y = l);
+      for (const f in d)
+        f in c && (c[f] = d[f]);
+    }, [d, c, n, s, r, l]), h(() => {
+      if (Object.keys(i).length > 0)
+        return e(c, i, a ?? void 0), () => {
+          o(c);
         };
-    }, [r, h, v, H, p]), N(j, () => r, [r]), /* @__PURE__ */ A(L, {});
+    }, [c, e, o, a, i]), R(u, () => c, [c]), /* @__PURE__ */ E(T, {});
   }
-), ye = k.forwardRef(
-  ({ x: t, y: n, ...s }, d) => {
-    const { two: f, parent: l, registerEventShape: a, unregisterEventShape: m } = q(), [i, o] = F(null), { eventHandlers: g, shapeProps: S } = _(() => {
-      const e = {}, u = {};
-      for (const c in s)
-        J.includes(c) ? e[c] = s[c] : u[c] = s[c];
-      return { eventHandlers: e, shapeProps: u };
-    }, [s]);
-    return w(() => {
-      const e = new I.Polygon();
-      return o(e), () => {
-        o(null);
-      };
-    }, [f]), w(() => {
-      if (l && i)
-        return l.add(i), () => {
-          l.remove(i);
+), Ce = k.forwardRef(
+  ({ x: n, y: s, ...r }, l) => {
+    const { parent: t, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Polygon(), []), { eventHandlers: o, shapeProps: c } = g(() => {
+      const i = {}, d = {};
+      for (const f in r)
+        O.includes(f) ? i[f] = r[
+          f
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : d[f] = r[f];
+      return { eventHandlers: i, shapeProps: d };
+    }, [r]);
+    return h(() => {
+      if (t)
+        return t.add(e), () => {
+          t.remove(e);
         };
-    }, [l, i]), w(() => {
-      if (i) {
-        const e = i;
-        typeof t == "number" && (e.translation.x = t), typeof n == "number" && (e.translation.y = n);
-        for (const u in S)
-          u in e && (e[u] = S[u]);
-      }
-    }, [S, i, t, n]), w(() => {
-      if (i && Object.keys(g).length > 0)
-        return a(i, g, l ?? void 0), () => {
-          m(i);
+    }, [t, e]), h(() => {
+      typeof n == "number" && (e.translation.x = n), typeof s == "number" && (e.translation.y = s);
+      for (const i in c)
+        i in e && (e[i] = c[i]);
+    }, [c, e, n, s]), h(() => {
+      if (Object.keys(o).length > 0)
+        return u(e, o, t ?? void 0), () => {
+          a(e);
         };
-    }, [i, a, m, l, g]), N(d, () => i, [i]), /* @__PURE__ */ A(L, {});
+    }, [
+      e,
+      u,
+      a,
+      t,
+      o
+    ]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
   }
-), oe = k.forwardRef(
-  ({
-    x: t,
-    y: n,
-    // Event handlers
-    onClick: s,
-    onContextMenu: d,
-    onDoubleClick: f,
-    onWheel: l,
-    onPointerDown: a,
-    onPointerUp: m,
-    onPointerOver: i,
-    onPointerOut: o,
-    onPointerEnter: g,
-    onPointerLeave: S,
-    onPointerMove: e,
-    onPointerCancel: u,
-    // All other props are shape props
-    ...c
-  }, E) => {
-    const { two: b, parent: j, registerEventShape: T, unregisterEventShape: H } = q(), [h, v] = F(null), r = _(
-      () => ({
-        ...s && { onClick: s },
-        ...d && { onContextMenu: d },
-        ...f && { onDoubleClick: f },
-        ...l && { onWheel: l },
-        ...a && { onPointerDown: a },
-        ...m && { onPointerUp: m },
-        ...i && { onPointerOver: i },
-        ...o && { onPointerOut: o },
-        ...g && { onPointerEnter: g },
-        ...S && { onPointerLeave: S },
-        ...e && { onPointerMove: e },
-        ...u && { onPointerCancel: u }
-      }),
-      [
-        s,
-        d,
-        f,
-        l,
-        a,
-        m,
-        i,
-        o,
-        g,
-        S,
-        e,
-        u
-      ]
-    );
-    return w(() => {
-      const y = new I.Rectangle();
-      return v(y), () => {
-        v(null);
-      };
-    }, [b]), w(() => {
-      if (j && h)
-        return j.add(h), () => {
-          j.remove(h);
+), je = k.forwardRef(
+  ({ x: n, y: s, ...r }, l) => {
+    const { parent: t, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Rectangle(), []), { eventHandlers: o, shapeProps: c } = g(() => {
+      const i = {}, d = {};
+      for (const f in r)
+        O.includes(f) ? i[f] = r[
+          f
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : d[f] = r[f];
+      return { eventHandlers: i, shapeProps: d };
+    }, [r]);
+    return h(() => {
+      if (t)
+        return t.add(e), () => {
+          t.remove(e);
         };
-    }, [j, h]), w(() => {
-      if (h) {
-        const y = h;
-        typeof t == "number" && (y.translation.x = t), typeof n == "number" && (y.translation.y = n);
-        for (const p in c)
-          p in y && (y[p] = c[p]);
-      }
-    }, [c, h, t, n]), w(() => {
-      if (h && Object.keys(r).length > 0)
-        return T(h, r, j ?? void 0), () => {
-          H(h);
+    }, [t, e]), h(() => {
+      typeof n == "number" && (e.translation.x = n), typeof s == "number" && (e.translation.y = s);
+      for (const i in c)
+        i in e && (e[i] = c[i]);
+    }, [c, e, n, s]), h(() => {
+      if (Object.keys(o).length > 0)
+        return u(e, o, t ?? void 0), () => {
+          a(e);
         };
-    }, [h, T, H, j, r]), N(E, () => h, [h]), /* @__PURE__ */ A(L, {});
+    }, [
+      e,
+      u,
+      a,
+      t,
+      o
+    ]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
   }
-), ve = k.forwardRef(
-  ({
-    x: t,
-    y: n,
-    // Event handlers
-    onClick: s,
-    onContextMenu: d,
-    onDoubleClick: f,
-    onWheel: l,
-    onPointerDown: a,
-    onPointerUp: m,
-    onPointerOver: i,
-    onPointerOut: o,
-    onPointerEnter: g,
-    onPointerLeave: S,
-    onPointerMove: e,
-    onPointerCancel: u,
-    // All other props are shape props
-    ...c
-  }, E) => {
-    const { two: b, parent: j, registerEventShape: T, unregisterEventShape: H } = q(), [h, v] = F(null), r = _(
-      () => ({
-        ...s && { onClick: s },
-        ...d && { onContextMenu: d },
-        ...f && { onDoubleClick: f },
-        ...l && { onWheel: l },
-        ...a && { onPointerDown: a },
-        ...m && { onPointerUp: m },
-        ...i && { onPointerOver: i },
-        ...o && { onPointerOut: o },
-        ...g && { onPointerEnter: g },
-        ...S && { onPointerLeave: S },
-        ...e && { onPointerMove: e },
-        ...u && { onPointerCancel: u }
-      }),
-      [
-        s,
-        d,
-        f,
-        l,
-        a,
-        m,
-        i,
-        o,
-        g,
-        S,
-        e,
-        u
-      ]
-    );
-    return w(() => {
-      const y = new I.RoundedRectangle();
-      return v(y), () => {
-        v(null);
-      };
-    }, [b]), w(() => {
-      if (j && h)
-        return j.add(h), () => {
-          j.remove(h);
+), Le = k.forwardRef(
+  ({ x: n, y: s, ...r }, l) => {
+    const { parent: t, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.RoundedRectangle(), []), { eventHandlers: o, shapeProps: c } = g(() => {
+      const i = {}, d = {};
+      for (const f in r)
+        O.includes(f) ? i[f] = r[
+          f
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : d[f] = r[f];
+      return { eventHandlers: i, shapeProps: d };
+    }, [r]);
+    return h(() => {
+      if (t)
+        return t.add(e), () => {
+          t.remove(e);
         };
-    }, [j, h]), w(() => {
-      if (h) {
-        const y = h;
-        typeof t == "number" && (y.translation.x = t), typeof n == "number" && (y.translation.y = n);
-        for (const p in c)
-          p in y && (y[p] = c[p]);
-      }
-    }, [c, h, t, n]), w(() => {
-      if (h && Object.keys(r).length > 0)
-        return T(h, r, j ?? void 0), () => {
-          H(h);
+    }, [t, e]), h(() => {
+      typeof n == "number" && (e.translation.x = n), typeof s == "number" && (e.translation.y = s);
+      for (const i in c)
+        i in e && (e[i] = c[i]);
+    }, [c, e, n, s]), h(() => {
+      if (Object.keys(o).length > 0)
+        return u(
+          e,
+          o,
+          t ?? void 0
+        ), () => {
+          a(e);
         };
-    }, [h, T, H, j, r]), N(E, () => h, [h]), /* @__PURE__ */ A(L, {});
+    }, [
+      e,
+      u,
+      a,
+      t,
+      o
+    ]), R(l, () => e, [
+      e
+    ]), /* @__PURE__ */ E(T, {});
   }
-), we = k.forwardRef(
-  ({
-    path: t,
-    x: n,
-    y: s,
-    autoPlay: d,
-    // Event handlers
-    onClick: f,
-    onContextMenu: l,
-    onDoubleClick: a,
-    onWheel: m,
-    onPointerDown: i,
-    onPointerUp: o,
-    onPointerOver: g,
-    onPointerOut: S,
-    onPointerEnter: e,
-    onPointerLeave: u,
-    onPointerMove: c,
-    onPointerCancel: E,
-    // All other props are shape props
-    ...b
-  }, j) => {
-    const { two: T, parent: H, registerEventShape: h, unregisterEventShape: v } = q(), [r, y] = F(null), p = _(
-      () => ({
-        ...f && { onClick: f },
-        ...l && { onContextMenu: l },
-        ...a && { onDoubleClick: a },
-        ...m && { onWheel: m },
-        ...i && { onPointerDown: i },
-        ...o && { onPointerUp: o },
-        ...g && { onPointerOver: g },
-        ...S && { onPointerOut: S },
-        ...e && { onPointerEnter: e },
-        ...u && { onPointerLeave: u },
-        ...c && { onPointerMove: c },
-        ...E && { onPointerCancel: E }
-      }),
-      [
-        f,
-        l,
-        a,
-        m,
-        i,
-        o,
-        g,
-        S,
-        e,
-        u,
-        c,
-        E
-      ]
-    );
-    return Q(() => {
-      const R = new I.Sprite(t);
-      return y(R), () => {
-        y(null);
-      };
-    }, [t, T]), w(() => {
-      if (H && r)
-        return H.add(r), () => {
-          H.remove(r);
+), Oe = k.forwardRef(
+  ({ src: n, x: s, y: r, autoPlay: l, ...t }, u) => {
+    const { parent: a, registerEventShape: e, unregisterEventShape: o } = C(), c = g(() => new H.Sprite(n), [n]), { eventHandlers: i, shapeProps: d } = g(() => {
+      const f = {}, v = {};
+      for (const p in t)
+        O.includes(p) ? f[p] = t[
+          p
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : v[p] = t[p];
+      return { eventHandlers: f, shapeProps: v };
+    }, [t]);
+    return h(() => {
+      if (a)
+        return a.add(c), () => {
+          a.remove(c);
         };
-    }, [H, r]), w(() => {
-      if (r) {
-        const R = r;
-        typeof n == "number" && (R.translation.x = n), typeof s == "number" && (R.translation.y = s), d ? R.play() : R.pause();
-        for (const G in b)
-          G in R && (R[G] = b[G]);
-      }
-    }, [b, r, n, s, d]), w(() => {
-      if (r && Object.keys(p).length > 0)
-        return h(r, p, H ?? void 0), () => {
-          v(r);
+    }, [a, c]), h(() => {
+      typeof s == "number" && (c.translation.x = s), typeof r == "number" && (c.translation.y = r), l ? c.play() : c.pause();
+      for (const f in d)
+        f in c && (c[f] = d[f]);
+    }, [d, c, s, r, l]), h(() => {
+      if (Object.keys(i).length > 0)
+        return e(c, i, a ?? void 0), () => {
+          o(c);
         };
-    }, [r, h, v, H, p]), N(j, () => r, [r]), /* @__PURE__ */ A(L, {});
+    }, [
+      c,
+      e,
+      o,
+      a,
+      i
+    ]), R(u, () => c, [c]), /* @__PURE__ */ E(T, {});
   }
-), Se = k.forwardRef(
-  ({
-    x: t,
-    y: n,
-    // Event handlers
-    onClick: s,
-    onContextMenu: d,
-    onDoubleClick: f,
-    onWheel: l,
-    onPointerDown: a,
-    onPointerUp: m,
-    onPointerOver: i,
-    onPointerOut: o,
-    onPointerEnter: g,
-    onPointerLeave: S,
-    onPointerMove: e,
-    onPointerCancel: u,
-    // All other props are shape props
-    ...c
-  }, E) => {
-    const { two: b, parent: j, registerEventShape: T, unregisterEventShape: H } = q(), [h, v] = F(null), r = _(
-      () => ({
-        ...s && { onClick: s },
-        ...d && { onContextMenu: d },
-        ...f && { onDoubleClick: f },
-        ...l && { onWheel: l },
-        ...a && { onPointerDown: a },
-        ...m && { onPointerUp: m },
-        ...i && { onPointerOver: i },
-        ...o && { onPointerOut: o },
-        ...g && { onPointerEnter: g },
-        ...S && { onPointerLeave: S },
-        ...e && { onPointerMove: e },
-        ...u && { onPointerCancel: u }
-      }),
-      [
-        s,
-        d,
-        f,
-        l,
-        a,
-        m,
-        i,
-        o,
-        g,
-        S,
-        e,
-        u
-      ]
-    );
-    return w(() => {
-      const y = new I.Star();
-      return v(y), () => {
-        v(null);
-      };
-    }, [b]), w(() => {
-      if (j && h)
-        return j.add(h), () => {
-          j.remove(h);
+), Ve = k.forwardRef(
+  ({ x: n, y: s, ...r }, l) => {
+    const { parent: t, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Star(), []), { eventHandlers: o, shapeProps: c } = g(() => {
+      const i = {}, d = {};
+      for (const f in r)
+        O.includes(f) ? i[f] = r[
+          f
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] : d[f] = r[f];
+      return { eventHandlers: i, shapeProps: d };
+    }, [r]);
+    return h(() => {
+      if (t)
+        return t.add(e), () => {
+          t.remove(e);
         };
-    }, [j, h]), w(() => {
-      if (h) {
-        const y = h;
-        typeof t == "number" && (y.translation.x = t), typeof n == "number" && (y.translation.y = n);
-        for (const p in c)
-          p in y && (y[p] = c[p]);
-      }
-    }, [c, h, t, n]), w(() => {
-      if (h && Object.keys(r).length > 0)
-        return T(h, r, j ?? void 0), () => {
-          H(h);
+    }, [t, e]), h(() => {
+      typeof n == "number" && (e.translation.x = n), typeof s == "number" && (e.translation.y = s);
+      for (const i in c)
+        i in e && (e[i] = c[i]);
+    }, [c, e, n, s]), h(() => {
+      if (Object.keys(o).length > 0)
+        return u(e, o, t ?? void 0), () => {
+          a(e);
         };
-    }, [h, T, H, j, r]), N(E, () => h, [h]), /* @__PURE__ */ A(L, {});
+    }, [e, u, a, t, o]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
   }
-), Ee = k.forwardRef(
-  ({ x1: t, y1: n, x2: s, y2: d, ...f }, l) => {
-    const a = _(() => new I.LinearGradient(), []);
-    return w(() => {
-      if (a) {
-        const m = a;
-        typeof t == "number" && (m.left.x = t), typeof n == "number" && (m.left.y = n), typeof s == "number" && (m.right.x = s), typeof d == "number" && (m.right.y = d);
-        for (const i in f)
-          i in m && (m[i] = f[i]);
-      }
-    }, [a, t, n, s, d, f]), N(l, () => a, [a]), null;
+), Ge = k.forwardRef(
+  ({ x1: n, y1: s, x2: r, y2: l, ...t }, u) => {
+    const a = g(() => new H.LinearGradient(), []);
+    return h(() => {
+      typeof n == "number" && (a.left.x = n), typeof s == "number" && (a.left.y = s), typeof r == "number" && (a.right.x = r), typeof l == "number" && (a.right.y = l);
+      for (const e in t)
+        e in a && (a[e] = t[e]);
+    }, [a, n, s, r, l, t]), R(u, () => a, [a]), null;
   }
-), be = k.forwardRef(
-  ({ x: t, y: n, focalX: s, focalY: d, ...f }, l) => {
-    const a = _(() => new I.RadialGradient(), []);
-    return w(() => {
-      if (a) {
-        const m = a;
-        typeof t == "number" && (a.center.x = t), typeof n == "number" && (a.center.y = n), typeof s == "number" && (a.focal.x = s), typeof d == "number" && (a.focal.y = d);
-        for (const i in f)
-          i in m && (m[i] = f[i]);
-      }
-    }, [f, a, t, n, s, d]), N(l, () => a, [a]), null;
+), Te = k.forwardRef(
+  ({ x: n, y: s, focalX: r, focalY: l, ...t }, u) => {
+    const a = g(() => new H.RadialGradient(), []);
+    return h(() => {
+      typeof n == "number" && (a.center.x = n), typeof s == "number" && (a.center.y = s), typeof r == "number" && (a.focal.x = r), typeof l == "number" && (a.focal.y = l);
+      for (const e in t)
+        e in a && (a[e] = t[e]);
+    }, [t, a, n, s, r, l]), R(u, () => a, [a]), null;
   }
-), Re = k.forwardRef(
-  ({ source: t, ...n }, s) => {
-    const [d, f] = F(null);
-    return w(() => {
-      const l = new I.Texture(t);
-      return f(l), () => {
-        f(null);
-      };
-    }, [t]), w(() => {
-      if (d) {
-        const l = d;
-        for (const a in n)
-          a in l && (l[a] = n[a]);
-      }
-    }, [n, d]), N(s, () => d, [d]), null;
+), Me = k.forwardRef(
+  ({ src: n, ...s }, r) => {
+    const l = g(() => new H.Texture(n), [n]);
+    return h(() => {
+      for (const t in s)
+        t in l && (l[t] = s[t]);
+    }, [s, l]), R(r, () => l, [l]), null;
   }
 );
 export {
-  de as ArcSegment,
-  fe as Canvas,
-  le as Circle,
-  X as Context,
-  ge as Ellipse,
-  ce as Group,
-  he as Image,
-  pe as ImageSequence,
-  me as Line,
-  Ee as LinearGradient,
-  ie as Path,
-  ae as Points,
-  ye as Polygon,
-  be as RadialGradient,
-  oe as Rectangle,
-  ve as RoundedRectangle,
-  we as Sprite,
-  Se as Star,
-  ue as Text,
-  Re as Texture,
-  se as useFrame,
-  q as useTwo
+  be as ArcSegment,
+  pe as Canvas,
+  Ee as Circle,
+  ce as Context,
+  Se as Ellipse,
+  ge as Group,
+  ke as Image,
+  He as ImageSequence,
+  Re as Line,
+  Ge as LinearGradient,
+  me as Path,
+  we as Points,
+  Ce as Polygon,
+  Te as RadialGradient,
+  je as Rectangle,
+  Le as RoundedRectangle,
+  ye as SVG,
+  Oe as Sprite,
+  Ve as Star,
+  Pe as Text,
+  Me as Texture,
+  ve as useFrame,
+  C as useTwo
 };