react-two.js 0.2.4 → 0.8.22-r.2

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

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