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

package/README.md

@@ -67,8 +67,8 @@ npm install react-two.js react react-dom two.js
 ```
 
 **Requirements** as peer dependencies:
-- React 18.3+
-- Two.js v0.8.21+
+- React 19+
+- Two.js v0.8.22+
 
 > [!IMPORTANT]
 > react-two.js is a React renderer, it must pair with a major version of React, like react-dom.
@@ -158,10 +158,11 @@ function Component() {
   const { two, width, height } = useTwo()
 
   useEffect(() => {
+    if (!two) return;
     two.play();
     console.log('Canvas size:', width, height)
     console.log('Two.js instance:', instance)
-  }, [])
+  }, [two])
 }
 ```
 

package/dist/SVG.d.ts

@@ -2,17 +2,21 @@ import React from 'react';
 import type { Group as Instance } from 'two.js/src/group';
 import { ShapeProps, type EventHandlers } from './Properties';
 type GroupProps = ShapeProps | 'fill' | 'stroke' | 'linewidth' | 'cap' | 'join' | 'miter' | 'closed' | 'curved' | 'automatic';
-export interface SVGProps extends React.PropsWithChildren<{
+type ComponentProps = React.PropsWithChildren<{
     [K in Extract<GroupProps, keyof Instance>]?: Instance[K];
-}>, Partial<EventHandlers> {
-    src?: string;
-    content?: string;
+} & ({
+    src: string;
+    content?: never;
+} | {
+    src?: never;
+    content: string;
+}) & {
     x?: number;
     y?: number;
-    onLoad?: (group: RefSVG, svg: SVGElement | SVGElement[]) => void;
+    onLoad?: (group: Instance, svg: SVGElement | SVGElement[]) => void;
     onError?: (error: Error) => void;
     shallow?: boolean;
-}
+} & Partial<EventHandlers>>;
 export type RefSVG = Instance;
-export declare const SVG: React.ForwardRefExoticComponent<SVGProps & React.RefAttributes<Instance>>;
+export declare const SVG: React.ForwardRefExoticComponent<ComponentProps & React.RefAttributes<Instance>>;
 export {};

package/dist/main.d.ts

@@ -1,7 +1,7 @@
 export { Provider as Canvas } from './Provider';
 export { Context, useTwo, useFrame } from './Context';
 export { Group, type RefGroup } from './Group';
-export { SVG, type RefSVG, type SVGProps } from './SVG';
+export { SVG, type RefSVG } from './SVG';
 export { Path, type RefPath } from './Path';
 export { Points, type RefPoints } from './Points';
 export { Text, type RefText } from './Text';

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

@@ -1,7 +1,7 @@
-import { jsx as k, Fragment as O } from "react/jsx-runtime";
-import P, { createContext as J, useContext as K, useRef as N, useEffect as v, useState as z, useCallback as W, useMemo as w, useImperativeHandle as S } from "react";
+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 F = J({
+const N = z({
   two: null,
   parent: null,
   width: 0,
@@ -10,8 +10,8 @@ const F = J({
   },
   unregisterEventShape: () => {
   }
-}), H = () => K(F), te = (t, f = []) => {
-  const { two: r } = H(), u = N(t);
+}), H = () => J(N), te = (t, f = []) => {
+  const { two: r } = H(), u = F(t);
   v(() => {
     u.current = t;
   }, [t, ...f]), v(() => {
@@ -23,7 +23,7 @@ const F = J({
       n += e / 1e3, u.current?.(n, e);
     }
   }, [r, ...f]);
-}, C = [
+}, R = [
   "onClick",
   "onContextMenu",
   "onDoubleClick",
@@ -78,9 +78,9 @@ function X(t, f) {
   }
   return r;
 }
-function U(t) {
-  process.env.NODE_ENV !== "production" && P.Children.forEach(t, (f) => {
-    if (!P.isValidElement(f))
+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") {
@@ -92,19 +92,19 @@ See: https://github.com/jonobr1/react-two.js#usage`
       );
       return;
     }
-    if (r === P.Fragment) {
-      U(
+    if (r === b.Fragment) {
+      A(
         f.props.children
       );
       return;
     }
-    typeof r == "function" && f.props.children && U(
+    typeof r == "function" && f.props.children && A(
       f.props.children
     );
   });
 }
 const re = (t) => {
-  const { two: f, parent: r } = H(), u = N(null), n = N(/* @__PURE__ */ new Map()), d = N(/* @__PURE__ */ new Set()), l = N(null), [e, o] = z({
+  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,
@@ -151,71 +151,71 @@ const re = (t) => {
   }, [f, e.two, t.width, t.height]), v(() => {
     if (!f && e.two) {
       let c = function() {
-        const T = h.width !== p, V = h.height !== b;
-        T && (p = h.width), V && (b = h.height), (T || V) && o((j) => ({ ...j, width: p, height: b }));
+        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, b = h.height;
+      let p = h.width, P = h.height;
       return (t.fullscreen || t.fitted) && h.bind("update", c), () => {
         h.unbind("update", c);
       };
     }
   }, [f, e.two, t.fullscreen, t.fitted]), v(() => {
-    process.env.NODE_ENV !== "production" && U(t.children);
+    process.env.NODE_ENV !== "production" && A(t.children);
   }, [t.children]), v(() => {
     if (!e.two) return;
-    const a = e.two.renderer.domElement, c = (g, m, y) => {
+    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 A of G) {
-        const _ = n.current.get(A)?.handlers[m];
-        if (_) {
-          const q = $(
+      for (const U of G) {
+        const q = n.current.get(U)?.handlers[w];
+        if (q) {
+          const _ = $(
             y,
             M,
-            A,
+            U,
             I
           );
-          if (_(q), q.stopped)
+          if (q(_), _.stopped)
             break;
         }
       }
     }, h = (g) => {
-      const m = D(g, a), y = x(
+      const w = D(g, a), y = x(
         n.current,
-        m.x,
-        m.y
+        w.x,
+        w.y
       );
       y.length > 0 && c(y, "onClick", g);
     }, p = (g) => {
-      const m = D(g, a), y = x(
+      const w = D(g, a), y = x(
         n.current,
-        m.x,
-        m.y
+        w.x,
+        w.y
       );
       y.length > 0 && c(y, "onContextMenu", g);
-    }, b = (g) => {
-      const m = D(g, a), y = x(
+    }, P = (g) => {
+      const w = D(g, a), y = x(
         n.current,
-        m.x,
-        m.y
+        w.x,
+        w.y
       );
       y.length > 0 && c(y, "onDoubleClick", g);
     }, T = (g) => {
-      const m = D(g, a), y = x(
+      const w = D(g, a), y = x(
         n.current,
-        m.x,
-        m.y
+        w.x,
+        w.y
       );
       y.length > 0 && c(y, "onWheel", g);
     }, V = (g) => {
-      const m = D(g, a), y = x(
+      const w = D(g, a), y = x(
         n.current,
-        m.x,
-        m.y
+        w.x,
+        w.y
       );
       y.length > 0 && (c(y, "onPointerDown", g), g.target instanceof Element && g.target.hasPointerCapture?.(g.pointerId) && (l.current = y[0]));
-    }, j = (g) => {
+    }, C = (g) => {
       if (l.current) {
         const M = n.current.get(l.current);
         if (M?.handlers.onPointerUp) {
@@ -230,17 +230,17 @@ const re = (t) => {
         l.current = null;
         return;
       }
-      const m = D(g, a), y = x(
+      const w = D(g, a), y = x(
         n.current,
-        m.x,
-        m.y
+        w.x,
+        w.y
       );
       y.length > 0 ? c(y, "onPointerUp", g) : t.onPointerMissed && t.onPointerMissed(g);
-    }, L = (g) => {
-      const m = D(g, a), y = x(
+    }, O = (g) => {
+      const w = D(g, a), y = x(
         n.current,
-        m.x,
-        m.y
+        w.x,
+        w.y
       ), M = new Set(y);
       y.length > 0 && c(y, "onPointerMove", g);
       const I = d.current;
@@ -249,24 +249,24 @@ const re = (t) => {
       for (const G of I)
         M.has(G) || (c([G], "onPointerLeave", g), c([G], "onPointerOut", g));
       d.current = M;
-    }, R = (g) => {
-      const m = D(g, a), y = x(
+    }, L = (g) => {
+      const w = D(g, a), y = x(
         n.current,
-        m.x,
-        m.y
+        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", b), a.addEventListener("wheel", T), a.addEventListener("pointerdown", V), a.addEventListener("pointerup", j), a.addEventListener("pointermove", L), a.addEventListener("pointercancel", R), () => {
-      a.removeEventListener("click", h), a.removeEventListener("contextmenu", p), a.removeEventListener("dblclick", b), a.removeEventListener("wheel", T), a.removeEventListener("pointerdown", V), a.removeEventListener("pointerup", j), a.removeEventListener("pointermove", L), a.removeEventListener("pointercancel", R);
+    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(F.Provider, { value: e, children: /* @__PURE__ */ k("div", { ref: u, children: t.children }) });
-}, oe = P.forwardRef(
+  ]), /* @__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,
@@ -275,13 +275,13 @@ const re = (t) => {
       height: e,
       registerEventShape: o,
       unregisterEventShape: s
-    } = H(), i = w(() => new E.Group(), []), { eventHandlers: a, shapeProps: c } = w(() => {
+    } = H(), i = m(() => new E.Group(), []), { eventHandlers: a, shapeProps: c } = m(() => {
       const h = {}, p = {};
-      for (const b in r)
-        C.includes(b) ? h[b] = r[
-          b
+      for (const P in r)
+        R.includes(P) ? h[P] = r[
+          P
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ] : p[b] = r[b];
+        ] : p[P] = r[P];
       return { eventHandlers: h, shapeProps: p };
     }, [r]);
     return v(() => {
@@ -307,7 +307,7 @@ const re = (t) => {
       d,
       a
     ]), S(u, () => i, [i]), /* @__PURE__ */ k(
-      F.Provider,
+      N.Provider,
       {
         value: {
           two: n,
@@ -321,7 +321,7 @@ const re = (t) => {
       }
     );
   }
-), ie = P.forwardRef(
+), ie = b.forwardRef(
   ({ x: t, y: f, src: r, content: u, onLoad: n, onError: d, ...l }, e) => {
     const {
       two: o,
@@ -330,16 +330,23 @@ const re = (t) => {
       height: a,
       registerEventShape: c,
       unregisterEventShape: h
-    } = H(), [p, b] = z(null), { eventHandlers: T, shapeProps: V } = w(() => {
-      const j = {}, L = {};
-      for (const R in l)
-        C.includes(R) ? j[R] = l[
-          R
+    } = 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
-        ] : L[R] = l[R];
-      return { eventHandlers: j, shapeProps: L };
+        ] : 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(
@@ -347,64 +354,55 @@ const re = (t) => {
       );
     }, [r, u]), v(() => {
       if (!o) return;
-      const j = r || u;
-      if (!j) return;
-      let L = !0;
+      const C = r || u;
+      if (!C) return;
+      let O = !0;
       try {
-        const R = o.load(
-          j,
-          (g, m) => {
-            if (L && (b(g), n))
+        o.load(
+          C,
+          (L, g) => {
+            if (O && (P.current?.add(L.children), n))
               try {
-                n(g, m);
-              } catch (y) {
+                requestAnimationFrame(() => n(P.current, g));
+              } catch (w) {
                 console.error(
                   "[react-two.js] Error in SVG onLoad callback:",
-                  y
+                  w
                 );
               }
           }
         );
-        b(R);
-      } catch (R) {
-        if (!L) return;
-        const g = R instanceof Error ? R : new Error("Failed to load SVG");
+      } catch (L) {
+        if (!O) return;
+        const g = L instanceof Error ? L : new Error("Failed to load SVG");
         if (d)
           try {
             d(g);
-          } catch (m) {
+          } catch (w) {
             console.error(
               "[react-two.js] Error in SVG onError callback:",
-              m
+              w
             );
           }
         else
           console.error("[react-two.js] SVG loading error:", g);
       }
       return () => {
-        L = !1;
+        O = !1, P.current?.remove(P.current.children);
       };
     }, [o, r, u, n, d]), v(() => {
-      if (s && p)
-        return s.add(p), () => {
-          s.remove(p);
-        };
-    }, [p, s]), v(() => {
-      if (p) {
-        const j = p;
-        typeof t == "number" && (j.translation.x = t), typeof f == "number" && (j.translation.y = f);
-        const L = { ...V };
-        delete L.children;
-        for (const R in L)
-          R in j && (j[R] = L[R]);
-      }
+      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 (p && Object.keys(T).length > 0)
+      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(
-      F.Provider,
+      N.Provider,
       {
         value: {
           two: o,
@@ -418,12 +416,12 @@ const re = (t) => {
       }
     );
   }
-), se = P.forwardRef(
+), se = b.forwardRef(
   ({ manual: t, x: f, y: r, ...u }, n) => {
-    const { parent: d, registerEventShape: l, unregisterEventShape: e } = H(), o = w(() => new E.Path(), []), { eventHandlers: s, shapeProps: i } = w(() => {
+    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)
-        C.includes(h) ? a[h] = u[
+        R.includes(h) ? a[h] = u[
           h
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : c[h] = u[h];
@@ -443,14 +441,14 @@ const re = (t) => {
       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(O, {});
+    }, [i, o, f, r, t]), S(n, () => o, [o]), /* @__PURE__ */ k(j, {});
   }
-), ae = P.forwardRef(
+), ae = b.forwardRef(
   ({ x: t, y: f, ...r }, u) => {
-    const { parent: n, registerEventShape: d, unregisterEventShape: l } = H(), e = w(() => new E.Points(), []), { eventHandlers: o, shapeProps: s } = w(() => {
+    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)
-        C.includes(c) ? i[c] = r[
+        R.includes(c) ? i[c] = r[
           c
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : a[c] = r[c];
@@ -476,14 +474,14 @@ const re = (t) => {
       l,
       n,
       o
-    ]), S(u, () => e, [e]), /* @__PURE__ */ k(O, {});
+    ]), S(u, () => e, [e]), /* @__PURE__ */ k(j, {});
   }
-), ce = P.forwardRef(
+), ce = b.forwardRef(
   ({ x: t, y: f, ...r }, u) => {
-    const { parent: n, registerEventShape: d, unregisterEventShape: l } = H(), e = w(() => new E.Text(), []), { eventHandlers: o, shapeProps: s } = w(() => {
+    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)
-        C.includes(c) ? i[c] = r[
+        R.includes(c) ? i[c] = r[
           c
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : a[c] = r[c];
@@ -503,17 +501,17 @@ const re = (t) => {
         return d(e, o, n ?? void 0), () => {
           l(e);
         };
-    }, [e, d, l, n, o]), S(u, () => e, [e]), /* @__PURE__ */ k(O, {});
+    }, [e, d, l, n, o]), S(u, () => e, [e]), /* @__PURE__ */ k(j, {});
   }
-), fe = P.forwardRef(
+), fe = b.forwardRef(
   ({ x: t, y: f, resolution: r, ...u }, n) => {
-    const { parent: d, registerEventShape: l, unregisterEventShape: e } = H(), o = w(
+    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 } = w(() => {
+    ), { eventHandlers: s, shapeProps: i } = m(() => {
       const a = {}, c = {};
       for (const h in u)
-        C.includes(h) ? a[h] = u[
+        R.includes(h) ? a[h] = u[
           h
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : c[h] = u[h];
@@ -539,17 +537,17 @@ const re = (t) => {
       e,
       d,
       s
-    ]), S(n, () => o, [o]), /* @__PURE__ */ k(O, {});
+    ]), S(n, () => o, [o]), /* @__PURE__ */ k(j, {});
   }
-), le = P.forwardRef(
+), le = b.forwardRef(
   ({ x: t, y: f, resolution: r, ...u }, n) => {
-    const { parent: d, registerEventShape: l, unregisterEventShape: e } = H(), o = w(
+    const { parent: d, registerEventShape: l, unregisterEventShape: e } = H(), o = m(
       () => new E.Circle(0, 0, 0, r),
       [r]
-    ), { eventHandlers: s, shapeProps: i } = w(() => {
+    ), { eventHandlers: s, shapeProps: i } = m(() => {
       const a = {}, c = {};
       for (const h in u)
-        C.includes(h) ? a[h] = u[
+        R.includes(h) ? a[h] = u[
           h
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : c[h] = u[h];
@@ -575,17 +573,17 @@ const re = (t) => {
       e,
       d,
       s
-    ]), S(n, () => o, [o]), /* @__PURE__ */ k(O, {});
+    ]), S(n, () => o, [o]), /* @__PURE__ */ k(j, {});
   }
-), ue = P.forwardRef(
+), ue = b.forwardRef(
   ({ x: t, y: f, resolution: r, ...u }, n) => {
-    const { parent: d, registerEventShape: l, unregisterEventShape: e } = H(), o = w(
+    const { parent: d, registerEventShape: l, unregisterEventShape: e } = H(), o = m(
       () => new E.Ellipse(0, 0, 0, 0, r),
       [r]
-    ), { eventHandlers: s, shapeProps: i } = w(() => {
+    ), { eventHandlers: s, shapeProps: i } = m(() => {
       const a = {}, c = {};
       for (const h in u)
-        C.includes(h) ? a[h] = u[
+        R.includes(h) ? a[h] = u[
           h
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : c[h] = u[h];
@@ -611,17 +609,17 @@ const re = (t) => {
       e,
       d,
       s
-    ]), S(n, () => o, [o]), /* @__PURE__ */ k(O, {});
+    ]), S(n, () => o, [o]), /* @__PURE__ */ k(j, {});
   }
-), de = P.forwardRef(
+), de = b.forwardRef(
   ({ mode: t, src: f, texture: r, x: u, y: n, ...d }, l) => {
-    const { parent: e, registerEventShape: o, unregisterEventShape: s } = H(), i = w(() => new E.Image(f), [f]), { eventHandlers: a, shapeProps: c } = w(() => {
+    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 b in d)
-        C.includes(b) ? h[b] = d[
-          b
+      for (const P in d)
+        R.includes(P) ? h[P] = d[
+          P
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ] : p[b] = d[b];
+        ] : p[P] = d[P];
       return { eventHandlers: h, shapeProps: p };
     }, [d]);
     return v(() => {
@@ -644,14 +642,14 @@ const re = (t) => {
       s,
       e,
       a
-    ]), S(l, () => i, [i]), /* @__PURE__ */ k(O, {});
+    ]), S(l, () => i, [i]), /* @__PURE__ */ k(j, {});
   }
-), he = P.forwardRef(
+), he = b.forwardRef(
   ({ src: t, x: f, y: r, autoPlay: u, ...n }, d) => {
-    const { parent: l, registerEventShape: e, unregisterEventShape: o } = H(), s = w(() => new E.ImageSequence(t), [t]), { eventHandlers: i, shapeProps: a } = w(() => {
+    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)
-        C.includes(p) ? c[p] = n[
+        R.includes(p) ? c[p] = n[
           p
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : h[p] = n[p];
@@ -677,14 +675,14 @@ const re = (t) => {
       o,
       l,
       i
-    ]), S(d, () => s, [s]), /* @__PURE__ */ k(O, {});
+    ]), S(d, () => s, [s]), /* @__PURE__ */ k(j, {});
   }
-), ve = P.forwardRef(
+), ve = b.forwardRef(
   ({ x1: t, y1: f, x2: r, y2: u, ...n }, d) => {
-    const { parent: l, registerEventShape: e, unregisterEventShape: o } = H(), s = w(() => new E.Line(), []), { eventHandlers: i, shapeProps: a } = w(() => {
+    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)
-        C.includes(p) ? c[p] = n[
+        R.includes(p) ? c[p] = n[
           p
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : h[p] = n[p];
@@ -704,14 +702,14 @@ const re = (t) => {
         return e(s, i, l ?? void 0), () => {
           o(s);
         };
-    }, [s, e, o, l, i]), S(d, () => s, [s]), /* @__PURE__ */ k(O, {});
+    }, [s, e, o, l, i]), S(d, () => s, [s]), /* @__PURE__ */ k(j, {});
   }
-), pe = P.forwardRef(
+), pe = b.forwardRef(
   ({ x: t, y: f, ...r }, u) => {
-    const { parent: n, registerEventShape: d, unregisterEventShape: l } = H(), e = w(() => new E.Polygon(), []), { eventHandlers: o, shapeProps: s } = w(() => {
+    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)
-        C.includes(c) ? i[c] = r[
+        R.includes(c) ? i[c] = r[
           c
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : a[c] = r[c];
@@ -737,14 +735,14 @@ const re = (t) => {
       l,
       n,
       o
-    ]), S(u, () => e, [e]), /* @__PURE__ */ k(O, {});
+    ]), S(u, () => e, [e]), /* @__PURE__ */ k(j, {});
   }
-), ge = P.forwardRef(
+), ge = b.forwardRef(
   ({ x: t, y: f, ...r }, u) => {
-    const { parent: n, registerEventShape: d, unregisterEventShape: l } = H(), e = w(() => new E.Rectangle(), []), { eventHandlers: o, shapeProps: s } = w(() => {
+    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)
-        C.includes(c) ? i[c] = r[
+        R.includes(c) ? i[c] = r[
           c
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : a[c] = r[c];
@@ -770,14 +768,14 @@ const re = (t) => {
       l,
       n,
       o
-    ]), S(u, () => e, [e]), /* @__PURE__ */ k(O, {});
+    ]), S(u, () => e, [e]), /* @__PURE__ */ k(j, {});
   }
-), we = P.forwardRef(
+), me = b.forwardRef(
   ({ x: t, y: f, ...r }, u) => {
-    const { parent: n, registerEventShape: d, unregisterEventShape: l } = H(), e = w(() => new E.RoundedRectangle(), []), { eventHandlers: o, shapeProps: s } = w(() => {
+    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)
-        C.includes(c) ? i[c] = r[
+        R.includes(c) ? i[c] = r[
           c
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : a[c] = r[c];
@@ -809,14 +807,14 @@ const re = (t) => {
       o
     ]), S(u, () => e, [
       e
-    ]), /* @__PURE__ */ k(O, {});
+    ]), /* @__PURE__ */ k(j, {});
   }
-), ye = P.forwardRef(
+), we = b.forwardRef(
   ({ src: t, x: f, y: r, autoPlay: u, ...n }, d) => {
-    const { parent: l, registerEventShape: e, unregisterEventShape: o } = H(), s = w(() => new E.Sprite(t), [t]), { eventHandlers: i, shapeProps: a } = w(() => {
+    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)
-        C.includes(p) ? c[p] = n[
+        R.includes(p) ? c[p] = n[
           p
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : h[p] = n[p];
@@ -842,14 +840,14 @@ const re = (t) => {
       o,
       l,
       i
-    ]), S(d, () => s, [s]), /* @__PURE__ */ k(O, {});
+    ]), S(d, () => s, [s]), /* @__PURE__ */ k(j, {});
   }
-), me = P.forwardRef(
+), ye = b.forwardRef(
   ({ x: t, y: f, ...r }, u) => {
-    const { parent: n, registerEventShape: d, unregisterEventShape: l } = H(), e = w(() => new E.Star(), []), { eventHandlers: o, shapeProps: s } = w(() => {
+    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)
-        C.includes(c) ? i[c] = r[
+        R.includes(c) ? i[c] = r[
           c
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : a[c] = r[c];
@@ -869,29 +867,29 @@ const re = (t) => {
         return d(e, o, n ?? void 0), () => {
           l(e);
         };
-    }, [e, d, l, n, o]), S(u, () => e, [e]), /* @__PURE__ */ k(O, {});
+    }, [e, d, l, n, o]), S(u, () => e, [e]), /* @__PURE__ */ k(j, {});
   }
-), Pe = P.forwardRef(
+), Pe = b.forwardRef(
   ({ x1: t, y1: f, x2: r, y2: u, ...n }, d) => {
-    const l = w(() => new E.LinearGradient(), []);
+    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 = P.forwardRef(
+), be = b.forwardRef(
   ({ x: t, y: f, focalX: r, focalY: u, ...n }, d) => {
-    const l = w(() => new E.RadialGradient(), []);
+    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 = P.forwardRef(
+), Ee = b.forwardRef(
   ({ src: t, ...f }, r) => {
-    const u = w(() => new E.Texture(t), [t]);
+    const u = m(() => new E.Texture(t), [t]);
     return v(() => {
       for (const n in f)
         n in u && (u[n] = f[n]);
@@ -902,7 +900,7 @@ export {
   fe as ArcSegment,
   re as Canvas,
   le as Circle,
-  F as Context,
+  N as Context,
   ue as Ellipse,
   oe as Group,
   de as Image,
@@ -914,10 +912,10 @@ export {
   pe as Polygon,
   be as RadialGradient,
   ge as Rectangle,
-  we as RoundedRectangle,
+  me as RoundedRectangle,
   ie as SVG,
-  ye as Sprite,
-  me as Star,
+  we as Sprite,
+  ye as Star,
   ce as Text,
   Ee as Texture,
   te as useFrame,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-two.js",
-  "version": "0.8.22-r.1",
+  "version": "0.8.22-r.2",
   "type": "module",
   "description": "A React virtual DOM for Two.js — a renderer agnostic two-dimensional drawing API for the web",
   "main": "./dist/react-two-main.es.js",
@@ -82,4 +82,4 @@
     "react-dom": ">=19",
     "two.js": ">=v0.8.22"
   }
-}
+}