react-two.js 0.2.2 → 0.2.4

package/README.md

@@ -10,16 +10,16 @@ npm install react-two.js react react-dom two.js
 ```
 
 ```jsx
-import { Canvas, Circle, useFrame } from 'react-two.js'
+import { Canvas, Rectangle, useFrame } from 'react-two.js'
 
-function RotatingCircle() {
+function RotatingRectangle() {
   const ref = useRef()
   useFrame((t) => ref.current.rotation = t * 0.5)
-  return <Circle ref={ref} radius={50} fill="#00AEFF" />
+  return <Rectangle ref={ref} radius={50} fill="#00AEFF" />
 }
 
-<Canvas width={800} height={600}>
-  <RotatingCircle />
+<Canvas width={800} height={600} autostart={true}>
+  <RotatingRectangle />
 </Canvas>
 ```
 
@@ -71,7 +71,7 @@ npm install react-two.js react react-dom two.js
 - Two.js v0.8.21+
 
 > [!IMPORTANT]
-> react-two.js is a React renderer, it must pair with a major version of React, just like react-dom, react-native, etc.
+> react-two.js is a React renderer, it must pair with a major version of React, like react-dom.
 
 ## First Steps
 
@@ -87,7 +87,7 @@ function App() {
     <Canvas
       width={800}
       height={600}
-      type="svg" // 'svg' | 'canvas' | 'webgl'
+      type="SVGRenderer"
       autostart={true}
     >
       {/* Your scene goes here */}
@@ -101,7 +101,7 @@ function App() {
 All Two.js primitives are available as React components:
 
 ```jsx
-<Canvas width={800} height={600}>
+<Canvas width={800} height={600} autostart={true}>
   <Circle radius={50} fill="#00AEFF" x={400} y={300} />
   <Rectangle width={100} height={60} stroke="#FF0000" linewidth={3} />
   <Polygon sides={6} radius={40} fill="#00FF00" />
@@ -114,9 +114,9 @@ The `useFrame` hook runs on every frame, perfect for animations:
 
 ```jsx
 import { useRef } from 'react'
-import { Circle, useFrame } from 'react-two.js'
+import { Rectangle, useFrame } from 'react-two.js'
 
-function AnimatedCircle() {
+function AnimatedRectangle() {
   const ref = useRef()
 
   useFrame((elapsed) => {
@@ -124,7 +124,7 @@ function AnimatedCircle() {
     ref.current.scale = 1 + Math.sin(elapsed) * 0.2
   })
 
-  return <Circle ref={ref} radius={50} fill="#00AEFF" />
+  return <Rectangle ref={ref} width={50} height={50} fill="#00AEFF" />
 }
 ```
 
@@ -136,9 +136,10 @@ Use `useTwo` to access the underlying Two.js instance:
 import { useTwo } from 'react-two.js'
 
 function Component() {
-  const { instance, width, height } = useTwo()
+  const { two, width, height } = useTwo()
 
   useEffect(() => {
+    two.play();
     console.log('Canvas size:', width, height)
     console.log('Two.js instance:', instance)
   }, [])
@@ -228,7 +229,7 @@ import { useRef } from 'react'
 import { Circle, RefCircle } from 'react-two.js'
 
 function Component() {
-  const circleRef = useRef<RefCircle>(null)
+  const circleRef = useRef<RefCircle | null>(null)
 
   useEffect(() => {
     if (circleRef.current) {
@@ -292,6 +293,7 @@ function () {
 - **[Two.js Documentation](https://two.js.org/docs/)** — Complete Two.js API reference
 - **[Two.js Examples](https://two.js.org/examples/)** — Interactive examples and demos
 - **[Two.js Repository](https://github.com/jonobr1/two.js)** — Source code and issues
+- **[Two.js Tutor on ChatGPT](https://chatgpt.com/g/g-hkcTX8uPm-two-js-tutor)** - Talk to a custom ChatGPT trained on Two.js and react-two.js
 
 ## Development
 

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

@@ -1,22 +1,21 @@
 import { jsx as g, Fragment as R } from "react/jsx-runtime";
-import w, { createContext as G, useContext as L, useRef as I, useEffect as l, useState as b, useImperativeHandle as y, useLayoutEffect as S, useMemo as P } from "react";
+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 C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j = (r, o = []) => {
-  const { two: i } = h(), a = I(r);
+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(() => {
-    a.current = r;
+    s.current = r;
   }, [r, ...o]), l(() => {
     if (!i)
       return;
     let c = 0;
-    return i.bind("update", s), () => i.unbind("update", s);
-    function s(n, t) {
-      var e;
-      c += t / 1e3, (e = a.current) == null || e.call(a, c, t);
+    return i.bind("update", a), () => i.unbind("update", a);
+    function a(n, t) {
+      c += t / 1e3, s.current?.(c, t);
     }
   }, [i, ...o]);
 }, H = (r) => {
-  const { two: o, parent: i } = h(), a = I(null), [c, s] = b({
+  const { two: o, parent: i } = h(), s = E(null), [c, a] = b({
     two: o,
     parent: i,
     width: 0,
@@ -28,16 +27,15 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
     };
     if (!o) {
       let f = function() {
-        const p = d.width !== v, k = !1;
-        p && (v = d.width), (p || k) && s((T) => ({ ...T, width: v, height: E }));
+        const p = d.width !== v, P = !1;
+        p && (v = d.width), (p || P) && a((T) => ({ ...T, width: v, height: C }));
       };
       const u = { ...r };
       delete u.children;
-      const d = new m(u).appendTo(a.current);
-      let v = d.width, E = d.height;
-      s({ two: d, parent: d.scene, width: v, height: E }), d.bind("update", f), t = () => {
-        var k;
-        (k = d.renderer.domElement.parentElement) == null || k.removeChild(
+      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);
@@ -46,10 +44,10 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
     }
     return t;
   }
-  return /* @__PURE__ */ g(C.Provider, { value: c, children: /* @__PURE__ */ g("div", { ref: a, children: r.children }) });
+  return /* @__PURE__ */ g(S.Provider, { value: c, children: /* @__PURE__ */ g("div", { ref: s, children: r.children }) });
 }, M = w.forwardRef(
-  ({ x: r, y: o, ...i }, a) => {
-    const { two: c, parent: s, width: n, height: t } = h(), [e, f] = b(null);
+  ({ 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();
@@ -59,11 +57,11 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
       }
     }, [c]), l(() => {
       const u = e;
-      if (s && u)
-        return s.add(u), () => {
-          s.remove(u);
+      if (a && u)
+        return a.add(u), () => {
+          a.remove(u);
         };
-    }, [e, s]), l(() => {
+    }, [e, a]), l(() => {
       if (e) {
         const u = e;
         typeof r == "number" && (u.translation.x = r), typeof o == "number" && (u.translation.y = o);
@@ -72,17 +70,17 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
         for (const v in d)
           v in u && (u[v] = d[v]);
       }
-    }, [e, r, o, i]), y(a, () => e, [e]), /* @__PURE__ */ g(C.Provider, { value: { two: c, parent: e, width: n, height: t }, children: i.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, ...a }, c) => {
-    const { two: s, parent: n } = h(), [t, e] = b(null);
+  ({ 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);
       };
-    }, [s]), l(() => {
+    }, [a]), l(() => {
       if (n && t)
         return n.add(t), () => {
           n.remove(t);
@@ -91,64 +89,64 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
       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 a)
-          u in f && (f[u] = a[u]);
+        for (const u in s)
+          u in f && (f[u] = s[u]);
       }
-    }, [a, t, o, i, r]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
+    }, [s, t, o, i, r]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
   }
 ), _ = w.forwardRef(
-  ({ x: r, y: o, ...i }, a) => {
-    const { two: c, parent: s } = h(), [n, t] = b(null);
+  ({ 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 (s && n)
-        return s.add(n), () => {
-          s.remove(n);
+      if (a && n)
+        return a.add(n), () => {
+          a.remove(n);
         };
-    }, [s, n]), l(() => {
+    }, [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(a, () => n, [n]), /* @__PURE__ */ g(R, {});
+    }, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
   }
 ), z = w.forwardRef(
-  ({ x: r, y: o, ...i }, a) => {
-    const { two: c, parent: s } = h(), [n, t] = b(null);
+  ({ 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);
       };
     }, [c]), l(() => {
-      if (s && n)
-        return s.add(n), () => {
-          s.remove(n);
+      if (a && n)
+        return a.add(n), () => {
+          a.remove(n);
         };
-    }, [s, n]), l(() => {
+    }, [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(a, () => n, [n]), /* @__PURE__ */ g(R, {});
+    }, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
   }
 ), B = w.forwardRef(
-  ({ x: r, y: o, resolution: i, ...a }, c) => {
-    const { two: s, parent: n } = h(), [t, e] = b(null);
+  ({ 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, s]), l(() => {
+    }, [i, a]), l(() => {
       if (n && t)
         return n.add(t), () => {
           n.remove(t);
@@ -157,27 +155,27 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
       if (t) {
         const f = t;
         typeof r == "number" && (f.translation.x = r), typeof o == "number" && (f.translation.y = o);
-        for (const u in a)
-          u in f && (f[u] = a[u]);
+        for (const u in s)
+          u in f && (f[u] = s[u]);
       }
-    }, [a, t, r, o]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
+    }, [s, t, r, o]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
   }
 ), J = w.forwardRef(
-  ({ x: r, y: o, resolution: i, ...a }, c) => {
-    const { two: s, parent: n } = h(), [t, e] = b(null);
+  ({ 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, s]), l(() => {
+    }, [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 a)
-          u in f && (f[u] = a[u]);
+        for (const u in s)
+          u in f && (f[u] = s[u]);
       }
-    }, [t, a, r, o]), l(() => {
+    }, [t, s, r, o]), l(() => {
       if (n && t)
         return n.add(t), () => {
           n.remove(t);
@@ -185,31 +183,31 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
     }, [n, t]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
   }
 ), K = w.forwardRef(
-  ({ x: r, y: o, resolution: i, ...a }, c) => {
-    const { two: s, parent: n } = h(), [t, e] = b(null);
+  ({ 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, s]), l(() => {
+    }, [i, a]), l(() => {
       if (n && t)
         return n.add(t), () => {
           n.remove(t);
         };
-    }, [n]), l(() => {
+    }, [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 a)
-          u in f && (f[u] = a[u]);
+        for (const u in s)
+          u in f && (f[u] = s[u]);
       }
-    }, [t, r, o, a]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
+    }, [t, r, o, s]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
   }
 ), N = w.forwardRef(
-  ({ mode: r, texture: o, x: i, y: a, ...c }, s) => {
+  ({ mode: r, texture: o, x: i, y: s, ...c }, a) => {
     const { two: n, parent: t } = h(), [e, f] = b(null);
-    return S(() => {
+    return k(() => {
       const u = new m.Image();
       return f(u), () => {
         f(null);
@@ -222,16 +220,16 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
     }, [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 a == "number" && (u.translation.y = a);
+        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, a]), y(s, () => e, [e]), /* @__PURE__ */ g(R, {});
+    }, [e, c, r, o, i, s]), y(a, () => e, [e]), /* @__PURE__ */ g(R, {});
   }
 ), Q = w.forwardRef(
-  ({ paths: r, x: o, y: i, autoPlay: a, ...c }, s) => {
+  ({ paths: r, x: o, y: i, autoPlay: s, ...c }, a) => {
     const { two: n, parent: t } = h(), [e, f] = b(null);
-    return S(() => {
+    return k(() => {
       const u = new m.ImageSequence(r);
       return f(u), () => {
         f(null);
@@ -244,14 +242,14 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
     }, [t, e]), l(() => {
       if (e) {
         const u = e;
-        a ? u.play() : u.pause(), typeof o == "number" && (u.translation.x = o), typeof i == "number" && (u.translation.y = i);
+        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, a]), y(s, () => e, [e]), /* @__PURE__ */ g(R, {});
+    }, [c, e, r, o, i, s]), y(a, () => e, [e]), /* @__PURE__ */ g(R, {});
   }
 ), U = w.forwardRef(
-  ({ x1: r, y1: o, x2: i, y2: a, ...c }, s) => {
+  ({ 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();
@@ -267,82 +265,82 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
     }, [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 a == "number" && (u.right.y = a);
+        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, a]), y(s, () => e, [e]), /* @__PURE__ */ g(R, {});
+    }, [c, e, r, o, i, s]), y(a, () => e, [e]), /* @__PURE__ */ g(R, {});
   }
 ), V = w.forwardRef(
-  ({ x: r, y: o, ...i }, a) => {
-    const { two: c, parent: s } = h(), [n, t] = b(null);
+  ({ 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 (s && n)
-        return s.add(n), () => {
-          s.remove(n);
+      if (a && n)
+        return a.add(n), () => {
+          a.remove(n);
         };
-    }, [s, n]), l(() => {
+    }, [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(a, () => n, [n]), /* @__PURE__ */ g(R, {});
+    }, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
   }
 ), W = w.forwardRef(
-  ({ x: r, y: o, ...i }, a) => {
-    const { two: c, parent: s } = h(), [n, t] = b(null);
+  ({ 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 (s && n)
-        return s.add(n), () => {
-          s.remove(n);
+      if (a && n)
+        return a.add(n), () => {
+          a.remove(n);
         };
-    }, [s, n]), l(() => {
+    }, [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(a, () => n, [n]), /* @__PURE__ */ g(R, {});
+    }, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
   }
 ), Z = w.forwardRef(
-  ({ x: r, y: o, ...i }, a) => {
-    const { two: c, parent: s } = h(), [n, t] = b(null);
+  ({ 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 (s && n)
-        return s.add(n), () => {
-          s.remove(n);
+      if (a && n)
+        return a.add(n), () => {
+          a.remove(n);
         };
-    }, [s, n]), l(() => {
+    }, [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(a, () => n, [n]), /* @__PURE__ */ g(R, {});
+    }, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
   }
 ), $ = w.forwardRef(
-  ({ path: r, x: o, y: i, autoPlay: a, ...c }, s) => {
+  ({ path: r, x: o, y: i, autoPlay: s, ...c }, a) => {
     const { two: n, parent: t } = h(), [e, f] = b(null);
-    return S(() => {
+    return k(() => {
       const u = new m.Sprite(r);
       return f(u), () => {
         f(null);
@@ -352,83 +350,83 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
         return t.add(e), () => {
           t.remove(e);
         };
-    }, [t]), l(() => {
+    }, [t, e]), l(() => {
       if (e) {
         const u = e;
-        typeof o == "number" && (u.translation.x = o), typeof i == "number" && (u.translation.y = i), a ? u.play() : u.pause();
+        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, a]), y(s, () => e, [e]), /* @__PURE__ */ g(R, {});
+    }, [c, e, o, i, s]), y(a, () => e, [e]), /* @__PURE__ */ g(R, {});
   }
 ), D = w.forwardRef(
-  ({ x: r, y: o, ...i }, a) => {
-    const { two: c, parent: s } = h(), [n, t] = b(null);
+  ({ 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 (s && n)
-        return s.add(n), () => {
-          s.remove(n);
+      if (a && n)
+        return a.add(n), () => {
+          a.remove(n);
         };
-    }, [s, n]), l(() => {
+    }, [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(a, () => n, [n]), /* @__PURE__ */ g(R, {});
+    }, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
   }
 ), X = w.forwardRef(
-  ({ x1: r, y1: o, x2: i, y2: a, ...c }, s) => {
-    const n = P(() => new m.LinearGradient(), []);
+  ({ 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 a == "number" && (t.right.y = a);
+        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, a, c]), y(s, () => n, [n]), null;
+    }, [n, r, o, i, s, c]), y(a, () => n, [n]), null;
   }
 ), Y = w.forwardRef(
-  ({ x: r, y: o, focalX: i, focalY: a, ...c }, s) => {
-    const n = P(() => new m.RadialGradient(), []);
+  ({ 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 a == "number" && (n.focal.y = a);
+        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, a]), y(s, () => n, [n]), null;
+    }, [c, n, r, o, i, s]), y(a, () => n, [n]), null;
   }
 ), x = w.forwardRef(
   ({ source: r, ...o }, i) => {
-    const [a, c] = b(null);
+    const [s, c] = b(null);
     return l(() => {
-      const s = new m.Texture(r);
-      return c(s), () => {
+      const a = new m.Texture(r);
+      return c(a), () => {
         c(null);
       };
     }, [r]), l(() => {
-      if (a) {
-        const s = a;
+      if (s) {
+        const a = s;
         for (const n in o)
-          n in s && (s[n] = o[n]);
+          n in a && (a[n] = o[n]);
       }
-    }, [o, a]), y(i, () => a, [a]), null;
+    }, [o, s]), y(i, () => s, [s]), null;
   }
 );
 export {
   B as ArcSegment,
   H as Canvas,
   J as Circle,
-  C as Context,
+  S as Context,
   K as Ellipse,
   M as Group,
   N as Image,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-two.js",
-  "version": "v0.2.2",
+  "version": "v0.2.4",
   "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",
@@ -73,13 +73,13 @@
     "tailwindcss": "^4.1.14",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10",
+    "vite": "^7.1.11",
     "vite-plugin-dts": "^4.5.0",
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
-    "react": ">=19.2.0",
-    "react-dom": ">=19.2.0",
+    "react": ">=19",
+    "react-dom": ">=19",
     "two.js": ">=v0.8.21"
   }
 }