react-two.js 0.2.4 → 0.8.22

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

@@ -1,448 +1,1219 @@
-import { jsx as g, Fragment as R } from "react/jsx-runtime";
-import w, { createContext as G, useContext as L, useRef as E, useEffect as l, useState as b, useImperativeHandle as y, useLayoutEffect as k, useMemo as I } from "react";
-import m from "two.js";
-const S = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(S), j = (r, o = []) => {
-  const { two: i } = h(), s = E(r);
-  l(() => {
-    s.current = r;
-  }, [r, ...o]), l(() => {
-    if (!i)
+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({
+  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)
       return;
-    let c = 0;
-    return i.bind("update", a), () => i.unbind("update", a);
-    function a(n, t) {
-      c += t / 1e3, s.current?.(c, t);
+    let f = 0;
+    return s.bind("update", l), () => s.unbind("update", l);
+    function l(a, m) {
+      f += m / 1e3, d.current?.(f, m);
     }
-  }, [i, ...o]);
-}, H = (r) => {
-  const { two: o, parent: i } = h(), s = E(null), [c, a] = b({
-    two: o,
-    parent: i,
-    width: 0,
-    height: 0
+  }, [s, ...n]);
+}, J = [
+  "onClick",
+  "onContextMenu",
+  "onDoubleClick",
+  "onWheel",
+  "onPointerDown",
+  "onPointerUp",
+  "onPointerOver",
+  "onPointerOut",
+  "onPointerEnter",
+  "onPointerLeave",
+  "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 B(t, n) {
+  const s = n.getBoundingClientRect(), d = t.clientX - s.left, f = t.clientY - s.top;
+  return { x: d, y: f };
+}
+function W(t, n, s, d) {
+  let f = !1;
+  return {
+    nativeEvent: t,
+    target: n,
+    currentTarget: s,
+    point: d,
+    stopPropagation: () => {
+      f = !0;
+    },
+    get stopped() {
+      return f;
+    }
+  };
+}
+function C(t, n, s) {
+  return "visible" in t && !t.visible ? !1 : typeof t.contains == "function" ? t.contains(n, s) : !1;
+}
+function $(t, n, s) {
+  const d = [];
+  for (const [f] of t)
+    C(f, n, s) && d.push(f);
+  return d;
+}
+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;
+  }
+  return s;
+}
+function K(t) {
+  process.env.NODE_ENV !== "production" && k.Children.forEach(t, (n) => {
+    if (!k.isValidElement(n))
+      return;
+    const s = n.type;
+    if (typeof s == "string") {
+      console.warn(
+        `[react-two.js] <${s}> 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);
+      return;
+    }
+    typeof s == "function" && n.props.children && K(n.props.children);
   });
-  l(n, [r]);
-  function n() {
-    let t = () => {
+}
+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 });
+    },
+    []
+  ), g = U((e) => {
+    f.current.delete(e), l.current.delete(e), a.current === e && (a.current = null);
+  }, []);
+  w(S, [t]);
+  function S() {
+    let e = () => {
     };
-    if (!o) {
-      let f = function() {
-        const p = d.width !== v, P = !1;
-        p && (v = d.width), (p || P) && a((T) => ({ ...T, width: v, height: C }));
+    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 u = { ...r };
-      delete u.children;
-      const d = new m(u).appendTo(s.current);
-      let v = d.width, C = d.height;
-      a({ two: d, parent: d.scene, width: v, height: C }), d.bind("update", f), t = () => {
-        d.renderer.domElement.parentElement?.removeChild(
-          d.renderer.domElement
-        ), d.unbind("update", f);
-        const p = m.Instances.indexOf(d);
-        m.Instances.splice(p, 1), d.pause();
+      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 = () => {
+        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();
       };
     }
-    return t;
+    return e;
   }
-  return /* @__PURE__ */ g(S.Provider, { value: c, children: /* @__PURE__ */ g("div", { ref: s, children: r.children }) });
-}, M = w.forwardRef(
-  ({ x: r, y: o, ...i }, s) => {
-    const { two: c, parent: a, width: n, height: t } = h(), [e, f] = b(null);
-    return l(() => {
-      if (c) {
-        const u = new m.Group();
-        return f(u), () => {
-          f(null);
+  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
+          );
+          if (Z(x), x.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) => {
+      if (a.current) {
+        const R = f.current.get(a.current);
+        if (R?.handlers.onPointerUp) {
+          const G = O(r, e, m.two), V = W(
+            r,
+            a.current,
+            a.current,
+            G
+          );
+          R.handlers.onPointerUp(V);
+        }
+        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;
+    };
+    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);
+    };
+  }, [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) => {
+    const {
+      two: f,
+      parent: l,
+      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);
         };
+    }, [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]);
       }
-    }, [c]), l(() => {
-      const u = e;
-      if (a && u)
-        return a.add(u), () => {
-          a.remove(u);
+    }, [g, t, n, u]), w(() => {
+      if (g && Object.keys(e).length > 0)
+        return i(g, e, l ?? void 0), () => {
+          o(g);
         };
-    }, [e, a]), l(() => {
-      if (e) {
-        const u = e;
-        typeof r == "number" && (u.translation.x = r), typeof o == "number" && (u.translation.y = o);
-        const d = { ...i };
-        delete d.children;
-        for (const v in d)
-          v in u && (u[v] = d[v]);
+    }, [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
       }
-    }, [e, r, o, i]), y(s, () => e, [e]), /* @__PURE__ */ g(S.Provider, { value: { two: c, parent: e, width: n, height: t }, children: i.children });
+    );
   }
-), O = w.forwardRef(
-  ({ manual: r, x: o, y: i, ...s }, c) => {
-    const { two: a, parent: n } = h(), [t, e] = b(null);
-    return l(() => {
-      const f = new m.Path();
-      return e(f), () => {
-        e(null);
+), 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 = _(
+      () => ({
+        ...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.Path();
+      return r(p), () => {
+        r(null);
       };
-    }, [a]), l(() => {
-      if (n && t)
-        return n.add(t), () => {
-          n.remove(t);
+    }, [j]), w(() => {
+      if (T && v)
+        return T.add(v), () => {
+          T.remove(v);
+        };
+    }, [T, v]), w(() => {
+      if (v && Object.keys(y).length > 0)
+        return H(v, y, T ?? void 0), () => {
+          h(v);
         };
-    }, [n, t]), l(() => {
-      if (t) {
-        const f = t;
-        typeof o == "number" && (f.translation.x = o), typeof i == "number" && (f.translation.y = i), typeof r < "u" && (f.automatic = !r);
-        for (const u in s)
-          u in f && (f[u] = s[u]);
+    }, [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]);
       }
-    }, [s, t, o, i, r]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
+    }, [E, v, n, s, t]), N(b, () => v, [v]), /* @__PURE__ */ A(L, {});
   }
-), _ = w.forwardRef(
-  ({ x: r, y: o, ...i }, s) => {
-    const { two: c, parent: a } = h(), [n, t] = b(null);
-    return l(() => {
-      const e = new m.Points();
-      return t(e), () => {
-        t(null);
+), 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);
       };
-    }, [c, r, o]), l(() => {
-      if (a && n)
-        return a.add(n), () => {
-          a.remove(n);
+    }, [f, t, n]), w(() => {
+      if (l && i)
+        return l.add(i), () => {
+          l.remove(i);
         };
-    }, [a, n]), l(() => {
-      if (n) {
-        const e = n;
-        typeof r == "number" && (e.translation.x = r), typeof o == "number" && (e.translation.y = o);
-        for (const f in i)
-          f in e && (e[f] = i[f]);
+    }, [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]);
       }
-    }, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
+    }, [S, i, t, n]), w(() => {
+      if (i && Object.keys(g).length > 0)
+        return a(i, g, l ?? void 0), () => {
+          m(i);
+        };
+    }, [i, a, m, l, g]), N(d, () => i, [i]), /* @__PURE__ */ A(L, {});
   }
-), z = w.forwardRef(
-  ({ x: r, y: o, ...i }, s) => {
-    const { two: c, parent: a } = h(), [n, t] = b(null);
-    return l(() => {
-      const e = new m.Text();
-      return t(e), () => {
-        t(null);
+), 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);
       };
-    }, [c]), l(() => {
-      if (a && n)
-        return a.add(n), () => {
-          a.remove(n);
+    }, [b]), w(() => {
+      if (j && h)
+        return j.add(h), () => {
+          j.remove(h);
         };
-    }, [a, n]), l(() => {
-      if (n) {
-        const e = n;
-        typeof r == "number" && (e.translation.x = r), typeof o == "number" && (e.translation.y = o);
-        for (const f in i)
-          f in e && (e[f] = i[f]);
+    }, [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]);
       }
-    }, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
+    }, [c, h, t, n]), w(() => {
+      if (h && Object.keys(r).length > 0)
+        return T(h, r, j ?? void 0), () => {
+          H(h);
+        };
+    }, [h, T, H, j, r]), N(E, () => h, [h]), /* @__PURE__ */ A(L, {});
   }
-), B = w.forwardRef(
-  ({ x: r, y: o, resolution: i, ...s }, c) => {
-    const { two: a, parent: n } = h(), [t, e] = b(null);
-    return l(() => {
-      const f = new m.ArcSegment(0, 0, 0, 0, 0, 0, i);
-      return e(f), () => {
-        e(null);
+), 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);
       };
-    }, [i, a]), l(() => {
-      if (n && t)
-        return n.add(t), () => {
-          n.remove(t);
+    }, [s, j]), w(() => {
+      if (T && v)
+        return T.add(v), () => {
+          T.remove(v);
         };
-    }, [n, t]), l(() => {
-      if (t) {
-        const f = t;
-        typeof r == "number" && (f.translation.x = r), typeof o == "number" && (f.translation.y = o);
-        for (const u in s)
-          u in f && (f[u] = s[u]);
+    }, [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]);
       }
-    }, [s, t, r, o]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
+    }, [E, v, t, n]), w(() => {
+      if (v && Object.keys(y).length > 0)
+        return H(v, y, T ?? void 0), () => {
+          h(v);
+        };
+    }, [v, H, h, T, y]), N(b, () => v, [v]), /* @__PURE__ */ A(L, {});
   }
-), J = w.forwardRef(
-  ({ x: r, y: o, resolution: i, ...s }, c) => {
-    const { two: a, parent: n } = h(), [t, e] = b(null);
-    return l(() => {
-      const f = new m.Circle(0, 0, 0, i);
-      return e(f), () => {
-        e(null);
+), 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);
       };
-    }, [i, a]), l(() => {
-      if (t) {
-        const f = t;
-        typeof r == "number" && (f.translation.x = r), typeof o == "number" && (f.translation.y = o);
-        for (const u in s)
-          u in f && (f[u] = s[u]);
+    }, [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]);
       }
-    }, [t, s, r, o]), l(() => {
-      if (n && t)
-        return n.add(t), () => {
-          n.remove(t);
+    }, [v, E, t, n]), w(() => {
+      if (T && v)
+        return T.add(v), () => {
+          T.remove(v);
         };
-    }, [n, t]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
+    }, [T, v]), w(() => {
+      if (v && Object.keys(y).length > 0)
+        return H(v, y, T ?? void 0), () => {
+          h(v);
+        };
+    }, [v, H, h, T, y]), N(b, () => v, [v]), /* @__PURE__ */ A(L, {});
   }
-), K = w.forwardRef(
-  ({ x: r, y: o, resolution: i, ...s }, c) => {
-    const { two: a, parent: n } = h(), [t, e] = b(null);
-    return l(() => {
-      const f = new m.Ellipse(0, 0, 0, 0, i);
-      return e(f), () => {
-        e(null);
+), 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);
       };
-    }, [i, a]), l(() => {
-      if (n && t)
-        return n.add(t), () => {
-          n.remove(t);
+    }, [s, l]), w(() => {
+      if (a && o)
+        return a.add(o), () => {
+          a.remove(o);
         };
-    }, [n, t]), l(() => {
-      if (t) {
-        const f = t;
-        typeof r == "number" && (f.translation.x = r), typeof o == "number" && (f.translation.y = o);
-        for (const u in s)
-          u in f && (f[u] = s[u]);
+    }, [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]);
       }
-    }, [t, r, o, s]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
+    }, [o, t, n, e]), w(() => {
+      if (o && Object.keys(S).length > 0)
+        return m(o, S, a ?? void 0), () => {
+          i(o);
+        };
+    }, [o, m, i, a, S]), N(f, () => o, [o]), /* @__PURE__ */ A(L, {});
   }
-), N = w.forwardRef(
-  ({ mode: r, texture: o, x: i, y: s, ...c }, a) => {
-    const { two: n, parent: t } = h(), [e, f] = b(null);
-    return k(() => {
-      const u = new m.Image();
-      return f(u), () => {
-        f(null);
+), 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);
       };
-    }, [n]), l(() => {
-      if (t && e)
-        return t.add(e), () => {
-          t.remove(e);
+    }, [T]), w(() => {
+      if (H && r)
+        return H.add(r), () => {
+          H.remove(r);
         };
-    }, [t, e]), l(() => {
-      if (e) {
-        const u = e;
-        typeof r < "u" && (u.mode = r), typeof o < "u" && (u.texture = o), typeof i == "number" && (u.translation.x = i), typeof s == "number" && (u.translation.y = s);
-        for (const d in c)
-          d in u && (u[d] = c[d]);
+    }, [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]);
       }
-    }, [e, c, r, o, i, s]), y(a, () => e, [e]), /* @__PURE__ */ g(R, {});
+    }, [r, b, t, n, s, d]), w(() => {
+      if (r && Object.keys(p).length > 0)
+        return h(r, p, H ?? void 0), () => {
+          v(r);
+        };
+    }, [r, h, v, H, p]), N(j, () => r, [r]), /* @__PURE__ */ A(L, {});
   }
-), Q = w.forwardRef(
-  ({ paths: r, x: o, y: i, autoPlay: s, ...c }, a) => {
-    const { two: n, parent: t } = h(), [e, f] = b(null);
-    return k(() => {
-      const u = new m.ImageSequence(r);
-      return f(u), () => {
-        f(null);
+), 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);
       };
-    }, [n, r]), l(() => {
-      if (t && e)
-        return t.add(e), () => {
-          t.remove(e);
+    }, [a, t]), w(() => {
+      if (m && g)
+        return m.add(g), () => {
+          m.remove(g);
         };
-    }, [t, e]), l(() => {
-      if (e) {
-        const u = e;
-        s ? u.play() : u.pause(), typeof o == "number" && (u.translation.x = o), typeof i == "number" && (u.translation.y = i);
-        for (const d in c)
-          d in u && (u[d] = c[d]);
+    }, [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]);
       }
-    }, [c, e, r, o, i, s]), y(a, () => e, [e]), /* @__PURE__ */ g(R, {});
+    }, [u, g, t, n, s, d]), w(() => {
+      if (g && Object.keys(e).length > 0)
+        return i(g, e, m ?? void 0), () => {
+          o(g);
+        };
+    }, [g, i, o, m, e]), N(l, () => g, [g]), /* @__PURE__ */ A(L, {});
   }
-), U = w.forwardRef(
-  ({ x1: r, y1: o, x2: i, y2: s, ...c }, a) => {
-    const { two: n, parent: t } = h(), [e, f] = b(null);
-    return l(() => {
-      const u = new m.Line();
-      return f(u), () => {
-        f(null);
+), 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);
       };
-    }, [n]), l(() => {
-      const u = e;
-      if (t && u)
-        return t.add(u), () => {
-          t.remove(u);
+    }, [T]), w(() => {
+      const R = r;
+      if (H && R)
+        return H.add(R), () => {
+          H.remove(R);
         };
-    }, [t, e]), l(() => {
-      if (e) {
-        const u = e;
-        typeof r == "number" && (u.left.x = r), typeof o == "number" && (u.left.y = o), typeof i == "number" && (u.right.x = i), typeof s == "number" && (u.right.y = s);
-        for (const d in c)
-          d in u && (u[d] = c[d]);
+    }, [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]);
       }
-    }, [c, e, r, o, i, s]), y(a, () => e, [e]), /* @__PURE__ */ g(R, {});
+    }, [b, r, t, n, s, d]), w(() => {
+      if (r && Object.keys(p).length > 0)
+        return h(r, p, H ?? void 0), () => {
+          v(r);
+        };
+    }, [r, h, v, H, p]), N(j, () => r, [r]), /* @__PURE__ */ A(L, {});
   }
-), V = w.forwardRef(
-  ({ x: r, y: o, ...i }, s) => {
-    const { two: c, parent: a } = h(), [n, t] = b(null);
-    return l(() => {
-      const e = new m.Polygon();
-      return t(e), () => {
-        t(null);
+), 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);
       };
-    }, [c]), l(() => {
-      if (a && n)
-        return a.add(n), () => {
-          a.remove(n);
+    }, [f]), w(() => {
+      if (l && i)
+        return l.add(i), () => {
+          l.remove(i);
         };
-    }, [a, n]), l(() => {
-      if (n) {
-        const e = n;
-        typeof r == "number" && (e.translation.x = r), typeof o == "number" && (e.translation.y = o);
-        for (const f in i)
-          f in e && (e[f] = i[f]);
+    }, [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]);
       }
-    }, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
+    }, [S, i, t, n]), w(() => {
+      if (i && Object.keys(g).length > 0)
+        return a(i, g, l ?? void 0), () => {
+          m(i);
+        };
+    }, [i, a, m, l, g]), N(d, () => i, [i]), /* @__PURE__ */ A(L, {});
   }
-), W = w.forwardRef(
-  ({ x: r, y: o, ...i }, s) => {
-    const { two: c, parent: a } = h(), [n, t] = b(null);
-    return l(() => {
-      const e = new m.Rectangle();
-      return t(e), () => {
-        t(null);
+), 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);
       };
-    }, [c]), l(() => {
-      if (a && n)
-        return a.add(n), () => {
-          a.remove(n);
+    }, [b]), w(() => {
+      if (j && h)
+        return j.add(h), () => {
+          j.remove(h);
         };
-    }, [a, n]), l(() => {
-      if (n) {
-        const e = n;
-        typeof r == "number" && (e.translation.x = r), typeof o == "number" && (e.translation.y = o);
-        for (const f in i)
-          f in e && (e[f] = i[f]);
+    }, [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]);
       }
-    }, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
+    }, [c, h, t, n]), w(() => {
+      if (h && Object.keys(r).length > 0)
+        return T(h, r, j ?? void 0), () => {
+          H(h);
+        };
+    }, [h, T, H, j, r]), N(E, () => h, [h]), /* @__PURE__ */ A(L, {});
   }
-), Z = w.forwardRef(
-  ({ x: r, y: o, ...i }, s) => {
-    const { two: c, parent: a } = h(), [n, t] = b(null);
-    return l(() => {
-      const e = new m.RoundedRectangle();
-      return t(e), () => {
-        t(null);
+), 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);
       };
-    }, [c]), l(() => {
-      if (a && n)
-        return a.add(n), () => {
-          a.remove(n);
+    }, [b]), w(() => {
+      if (j && h)
+        return j.add(h), () => {
+          j.remove(h);
         };
-    }, [a, n]), l(() => {
-      if (n) {
-        const e = n;
-        typeof r == "number" && (e.translation.x = r), typeof o == "number" && (e.translation.y = o);
-        for (const f in i)
-          f in e && (e[f] = i[f]);
+    }, [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]);
       }
-    }, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
+    }, [c, h, t, n]), w(() => {
+      if (h && Object.keys(r).length > 0)
+        return T(h, r, j ?? void 0), () => {
+          H(h);
+        };
+    }, [h, T, H, j, r]), N(E, () => h, [h]), /* @__PURE__ */ A(L, {});
   }
-), $ = w.forwardRef(
-  ({ path: r, x: o, y: i, autoPlay: s, ...c }, a) => {
-    const { two: n, parent: t } = h(), [e, f] = b(null);
-    return k(() => {
-      const u = new m.Sprite(r);
-      return f(u), () => {
-        f(null);
+), 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);
       };
-    }, [r, n]), l(() => {
-      if (t && e)
-        return t.add(e), () => {
-          t.remove(e);
+    }, [t, T]), w(() => {
+      if (H && r)
+        return H.add(r), () => {
+          H.remove(r);
         };
-    }, [t, e]), l(() => {
-      if (e) {
-        const u = e;
-        typeof o == "number" && (u.translation.x = o), typeof i == "number" && (u.translation.y = i), s ? u.play() : u.pause();
-        for (const d in c)
-          d in u && (u[d] = c[d]);
+    }, [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]);
       }
-    }, [c, e, o, i, s]), y(a, () => e, [e]), /* @__PURE__ */ g(R, {});
+    }, [b, r, n, s, d]), w(() => {
+      if (r && Object.keys(p).length > 0)
+        return h(r, p, H ?? void 0), () => {
+          v(r);
+        };
+    }, [r, h, v, H, p]), N(j, () => r, [r]), /* @__PURE__ */ A(L, {});
   }
-), D = w.forwardRef(
-  ({ x: r, y: o, ...i }, s) => {
-    const { two: c, parent: a } = h(), [n, t] = b(null);
-    return l(() => {
-      const e = new m.Star();
-      return t(e), () => {
-        t(null);
+), 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);
       };
-    }, [c]), l(() => {
-      if (a && n)
-        return a.add(n), () => {
-          a.remove(n);
+    }, [b]), w(() => {
+      if (j && h)
+        return j.add(h), () => {
+          j.remove(h);
         };
-    }, [a, n]), l(() => {
-      if (n) {
-        const e = n;
-        typeof r == "number" && (e.translation.x = r), typeof o == "number" && (e.translation.y = o);
-        for (const f in i)
-          f in e && (e[f] = i[f]);
+    }, [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]);
       }
-    }, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
+    }, [c, h, t, n]), w(() => {
+      if (h && Object.keys(r).length > 0)
+        return T(h, r, j ?? void 0), () => {
+          H(h);
+        };
+    }, [h, T, H, j, r]), N(E, () => h, [h]), /* @__PURE__ */ A(L, {});
   }
-), X = w.forwardRef(
-  ({ x1: r, y1: o, x2: i, y2: s, ...c }, a) => {
-    const n = I(() => new m.LinearGradient(), []);
-    return l(() => {
-      if (n) {
-        const t = n;
-        typeof r == "number" && (t.left.x = r), typeof o == "number" && (t.left.y = o), typeof i == "number" && (t.right.x = i), typeof s == "number" && (t.right.y = s);
-        for (const e in c)
-          e in t && (t[e] = c[e]);
+), 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]);
       }
-    }, [n, r, o, i, s, c]), y(a, () => n, [n]), null;
+    }, [a, t, n, s, d, f]), N(l, () => a, [a]), null;
   }
-), Y = w.forwardRef(
-  ({ x: r, y: o, focalX: i, focalY: s, ...c }, a) => {
-    const n = I(() => new m.RadialGradient(), []);
-    return l(() => {
-      if (n) {
-        const t = n;
-        typeof r == "number" && (n.center.x = r), typeof o == "number" && (n.center.y = o), typeof i == "number" && (n.focal.x = i), typeof s == "number" && (n.focal.y = s);
-        for (const e in c)
-          e in t && (t[e] = c[e]);
+), 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]);
       }
-    }, [c, n, r, o, i, s]), y(a, () => n, [n]), null;
+    }, [f, a, t, n, s, d]), N(l, () => a, [a]), null;
   }
-), x = w.forwardRef(
-  ({ source: r, ...o }, i) => {
-    const [s, c] = b(null);
-    return l(() => {
-      const a = new m.Texture(r);
-      return c(a), () => {
-        c(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);
       };
-    }, [r]), l(() => {
-      if (s) {
-        const a = s;
-        for (const n in o)
-          n in a && (a[n] = o[n]);
+    }, [t]), w(() => {
+      if (d) {
+        const l = d;
+        for (const a in n)
+          a in l && (l[a] = n[a]);
       }
-    }, [o, s]), y(i, () => s, [s]), null;
+    }, [n, d]), N(s, () => d, [d]), null;
   }
 );
 export {
-  B as ArcSegment,
-  H as Canvas,
-  J as Circle,
-  S as Context,
-  K as Ellipse,
-  M as Group,
-  N as Image,
-  Q as ImageSequence,
-  U as Line,
-  X as LinearGradient,
-  O as Path,
-  _ as Points,
-  V as Polygon,
-  Y as RadialGradient,
-  W as Rectangle,
-  Z as RoundedRectangle,
-  $ as Sprite,
-  D as Star,
-  z as Text,
-  x as Texture,
-  j as useFrame,
-  h as useTwo
+  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
 };