react-two.js 0.8.22-r.5 → 0.8.23

package/dist/Provider.d.ts

@@ -4,6 +4,8 @@ type TwoConstructorProps = ConstructorParameters<typeof Two>[0];
 type TwoConstructorPropsKeys = NonNullable<TwoConstructorProps>;
 type ComponentProps = React.PropsWithChildren<TwoConstructorPropsKeys & {
     onPointerMissed?: (event: PointerEvent) => void;
+} & {
+    container?: React.ComponentProps<'div'>;
 }>;
 export declare const Provider: React.FC<ComponentProps>;
 export {};

package/dist/Text.d.ts

@@ -4,6 +4,7 @@ import { type EventHandlers } from './Properties';
 export type RefText = Instance;
 export declare const Text: React.ForwardRefExoticComponent<{
     visible?: boolean | undefined;
+    value?: string | undefined;
     renderer?: {
         type: "element" | "group" | "path" | "text" | "points" | string;
         elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
@@ -26,12 +27,11 @@ export declare const Text: React.ForwardRefExoticComponent<{
     dashes?: (number[] & {
         offset?: number;
     }) | undefined;
-    value?: string | undefined;
     size?: number | undefined;
+    style?: import("two.js/src/text").StyleProperties | undefined;
     family?: string | undefined;
     leading?: number | undefined;
     alignment?: import("two.js/src/text").AlignmentProperties | undefined;
-    style?: import("two.js/src/text").StyleProperties | undefined;
     weight?: string | number | undefined;
     decoration?: import("two.js/src/text").DecorationProperties | undefined;
     direction?: import("two.js/src/text").DirectionProperties | undefined;

package/dist/Texture.d.ts

@@ -14,9 +14,9 @@ export declare const Texture: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     repeat?: import("two.js/src/effects/texture").RepeatProperties | undefined;
     src?: string | undefined;
+    image?: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | undefined;
     loaded?: boolean | undefined;
     offset?: import("two.js/src/vector").Vector | undefined;
-    image?: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | undefined;
 } & {
     src?: string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement;
 } & {

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

@@ -13,19 +13,19 @@ const ee = Z({
   width: 0,
   height: 0
 }), ce = ee, C = () => {
-  const t = X(ee), s = X(J), r = X(Q);
-  return { ...t, ...s, ...r };
-}, ve = (t, s = []) => {
-  const { two: r } = C(), l = A(t);
+  const n = X(ee), s = X(J), r = X(Q);
+  return { ...n, ...s, ...r };
+}, ve = (n, s = []) => {
+  const { two: r } = C(), l = A(n);
   h(() => {
-    l.current = t;
-  }, [t, ...s]), h(() => {
+    l.current = n;
+  }, [n, ...s]), h(() => {
     if (!r)
       return;
-    let n = 0;
+    let t = 0;
     return r.bind("update", u), () => r.unbind("update", u);
     function u(a, e) {
-      n += e / 1e3, l.current?.(n, e);
+      t += e / 1e3, l.current?.(t, e);
     }
   }, [r, ...s]);
 }, O = [
@@ -42,49 +42,49 @@ const ee = Z({
   "onPointerMove",
   "onPointerCancel"
 ];
-function ie(t, s, r) {
-  const l = s.getBoundingClientRect(), n = t.clientX - l.left - r.width / 2, u = t.clientY - l.top - r.height / 2;
-  return { x: n, y: u };
+function ie(n, s, r) {
+  const l = s.getBoundingClientRect(), t = n.clientX - l.left - r.width / 2, u = n.clientY - l.top - r.height / 2;
+  return { x: t, y: u };
 }
-function U(t, s) {
-  const r = s.getBoundingClientRect(), l = t.clientX - r.left, n = t.clientY - r.top;
-  return { x: l, y: n };
+function U(n, s) {
+  const r = s.getBoundingClientRect(), l = n.clientX - r.left, t = n.clientY - r.top;
+  return { x: l, y: t };
 }
-function se(t, s, r, l) {
-  let n = !1;
+function se(n, s, r, l) {
+  let t = !1;
   return {
-    nativeEvent: t,
+    nativeEvent: n,
     target: s,
     currentTarget: r,
     point: l,
     stopPropagation: () => {
-      n = !0;
+      t = !0;
     },
     get stopped() {
-      return n;
+      return t;
     }
   };
 }
-function ae(t, s, r) {
-  return "visible" in t && !t.visible ? !1 : typeof t.contains == "function" ? t.contains(s, r) : !1;
+function ae(n, s, r) {
+  return "visible" in n && !n.visible ? !1 : typeof n.contains == "function" ? n.contains(s, r) : !1;
 }
-function q(t, s, r) {
+function q(n, s, r) {
   const l = [];
-  for (const [n] of t)
-    ae(n, s, r) && l.push(n);
+  for (const [t] of n)
+    ae(t, s, r) && l.push(t);
   return l;
 }
-function le(t, s) {
-  const r = [t], l = s.get(t);
+function le(n, s) {
+  const r = [n], l = s.get(n);
   if (l?.parent) {
-    let n = l.parent;
-    for (; n; )
-      r.push(n), n = s.get(n)?.parent;
+    let t = l.parent;
+    for (; t; )
+      r.push(t), t = s.get(t)?.parent;
   }
   return r;
 }
-function Y(t) {
-  process.env.NODE_ENV !== "production" && k.Children.forEach(t, (s) => {
+function Y(n) {
+  process.env.NODE_ENV !== "production" && k.Children.forEach(n, (s) => {
     if (!k.isValidElement(s))
       return;
     const r = s.type;
@@ -108,18 +108,18 @@ See: https://github.com/jonobr1/react-two.js#usage`
     );
   });
 }
-const pe = (t) => {
-  const { two: s, parent: r } = C(), l = A(null), n = A(/* @__PURE__ */ new Map()), u = A(/* @__PURE__ */ new Set()), a = A(null), [e, o] = $(s), [c, i] = $(r), [d, f] = $(0), [v, p] = $(0), j = oe(
+const pe = (n) => {
+  const { two: s, parent: r } = C(), l = A(null), t = A(/* @__PURE__ */ new Map()), u = A(/* @__PURE__ */ new Set()), a = A(null), [e, o] = $(s), [c, i] = $(r), [d, f] = $(0), [v, p] = $(0), j = oe(
     (m, S, b) => {
-      n.current.set(m, { shape: m, handlers: S, parent: b });
+      t.current.set(m, { shape: m, handlers: S, parent: b });
     },
     []
   ), M = oe((m) => {
-    n.current.delete(m), u.current.delete(m), a.current === m && (a.current = null);
+    t.current.delete(m), u.current.delete(m), a.current === m && (a.current = null);
   }, []);
   h(() => {
     if (!s) {
-      const S = { ...t };
+      const S = { ...n };
       delete S.children;
       const b = new H(S).appendTo(l.current);
       return o(b), i(b.scene), f(b.width), p(b.height), () => {
@@ -131,8 +131,8 @@ const pe = (t) => {
       };
     }
   }, []), h(() => {
-    !s && (typeof t.width == "number" && (e && (e.width = t.width), f(t.width)), typeof t.height == "number" && (e && (e.height = t.height), p(t.height)));
-  }, [s, e, t.width, t.height]), h(() => {
+    !s && (typeof n.width == "number" && (e && (e.width = n.width), f(n.width)), typeof n.height == "number" && (e && (e.height = n.height), p(n.height)));
+  }, [s, e, n.width, n.height]), h(() => {
     if (!s && e) {
       let S = function() {
         const V = b.width !== I, G = b.height !== L;
@@ -140,19 +140,19 @@ const pe = (t) => {
       };
       const b = e;
       let I = b.width, L = b.height;
-      return (t.fullscreen || t.fitted) && b.bind("update", S), () => {
+      return (n.fullscreen || n.fitted) && b.bind("update", S), () => {
         b.unbind("update", S);
       };
     }
-  }, [s, e, t.fullscreen, t.fitted]), h(() => {
-    process.env.NODE_ENV !== "production" && Y(t.children);
-  }, [t.children]), h(() => {
+  }, [s, e, n.fullscreen, n.fitted]), h(() => {
+    process.env.NODE_ENV !== "production" && Y(n.children);
+  }, [n.children]), h(() => {
     if (!e) return;
     const m = e.renderer.domElement, S = (y, w, P) => {
       if (y.length === 0) return;
-      const N = y[0], B = ie(P, m, e), F = le(N, n.current);
+      const N = y[0], B = ie(P, m, e), F = le(N, t.current);
       for (const ne of F) {
-        const te = n.current.get(ne)?.handlers[w];
+        const te = t.current.get(ne)?.handlers[w];
         if (te) {
           const re = se(
             P,
@@ -166,42 +166,42 @@ const pe = (t) => {
       }
     }, b = (y) => {
       const w = U(y, m), P = q(
-        n.current,
+        t.current,
         w.x,
         w.y
       );
       P.length > 0 && S(P, "onClick", y);
     }, I = (y) => {
       const w = U(y, m), P = q(
-        n.current,
+        t.current,
         w.x,
         w.y
       );
       P.length > 0 && S(P, "onContextMenu", y);
     }, L = (y) => {
       const w = U(y, m), P = q(
-        n.current,
+        t.current,
         w.x,
         w.y
       );
       P.length > 0 && S(P, "onDoubleClick", y);
     }, V = (y) => {
       const w = U(y, m), P = q(
-        n.current,
+        t.current,
         w.x,
         w.y
       );
       P.length > 0 && S(P, "onWheel", y);
     }, G = (y) => {
       const w = U(y, m), P = q(
-        n.current,
+        t.current,
         w.x,
         w.y
       );
       P.length > 0 && (S(P, "onPointerDown", y), y.target instanceof Element && y.target.hasPointerCapture?.(y.pointerId) && (a.current = P[0]));
     }, _ = (y) => {
       if (a.current) {
-        const N = n.current.get(a.current);
+        const N = t.current.get(a.current);
         if (N?.handlers.onPointerUp) {
           const B = ie(y, m, e), F = se(
             y,
@@ -215,14 +215,14 @@ const pe = (t) => {
         return;
       }
       const w = U(y, m), P = q(
-        n.current,
+        t.current,
         w.x,
         w.y
       );
-      P.length > 0 ? S(P, "onPointerUp", y) : t.onPointerMissed && t.onPointerMissed(y);
+      P.length > 0 ? S(P, "onPointerUp", y) : n.onPointerMissed && n.onPointerMissed(y);
     }, z = (y) => {
       const w = U(y, m), P = q(
-        n.current,
+        t.current,
         w.x,
         w.y
       ), N = new Set(P);
@@ -235,7 +235,7 @@ const pe = (t) => {
       u.current = N;
     }, W = (y) => {
       const w = U(y, m), P = q(
-        n.current,
+        t.current,
         w.x,
         w.y
       );
@@ -246,7 +246,7 @@ const pe = (t) => {
     };
   }, [
     e,
-    t.onPointerMissed,
+    n.onPointerMissed,
     j,
     M
   ]);
@@ -256,11 +256,7 @@ const pe = (t) => {
       registerEventShape: j,
       unregisterEventShape: M
     }),
-    [
-      e,
-      j,
-      M
-    ]
+    [e, j, M]
   ), D = g(
     () => ({
       parent: c
@@ -273,11 +269,11 @@ const pe = (t) => {
     }),
     [d, v]
   );
-  return /* @__PURE__ */ E(ee.Provider, { value: x, children: /* @__PURE__ */ E(J.Provider, { value: D, children: /* @__PURE__ */ E(Q.Provider, { value: K, children: /* @__PURE__ */ E("div", { ref: l, children: t.children }) }) }) });
+  return /* @__PURE__ */ E(ee.Provider, { value: x, children: /* @__PURE__ */ E(J.Provider, { value: D, children: /* @__PURE__ */ E(Q.Provider, { value: K, children: /* @__PURE__ */ E("div", { ref: l, ...n.container, children: n.children }) }) }) });
 }, ge = k.forwardRef(
-  ({ x: t, y: s, ...r }, l) => {
+  ({ x: n, y: s, ...r }, l) => {
     const {
-      two: n,
+      two: t,
       parent: u,
       width: a,
       height: e,
@@ -298,12 +294,12 @@ const pe = (t) => {
           u.remove(i);
         };
     }, [u, i]), h(() => {
-      typeof t == "number" && (i.translation.x = t), typeof s == "number" && (i.translation.y = s);
+      typeof n == "number" && (i.translation.x = n), typeof s == "number" && (i.translation.y = s);
       const M = { ...f };
       delete M.children;
       for (const x in M)
         x in i && (i[x] = M[x]);
-    }, [i, t, s, f]), h(() => {
+    }, [i, n, s, f]), h(() => {
       if (Object.keys(d).length > 0)
         return o(i, d, u ?? void 0), () => {
           c(i);
@@ -317,11 +313,11 @@ const pe = (t) => {
     ]), R(l, () => i, [i]);
     const v = g(
       () => ({
-        two: n,
+        two: t,
         registerEventShape: o,
         unregisterEventShape: c
       }),
-      [n, o, c]
+      [t, o, c]
     ), p = g(
       () => ({
         parent: i
@@ -337,7 +333,7 @@ const pe = (t) => {
     return /* @__PURE__ */ E(ce.Provider, { value: v, children: /* @__PURE__ */ E(J.Provider, { value: p, children: /* @__PURE__ */ E(Q.Provider, { value: j, children: r.children }) }) });
   }
 ), ye = k.forwardRef(
-  ({ x: t, y: s, src: r, content: l, onLoad: n, onError: u, ...a }, e) => {
+  ({ x: n, y: s, src: r, content: l, onLoad: t, onError: u, ...a }, e) => {
     const {
       two: o,
       parent: c,
@@ -345,10 +341,10 @@ const pe = (t) => {
       height: d,
       registerEventShape: f,
       unregisterEventShape: v
-    } = C(), p = g(() => new H.Group(), []), j = A(null), M = A(n), x = A(u), D = A({ two: null, key: null });
+    } = C(), p = g(() => new H.Group(), []), j = A(null), M = A(t), x = A(u), D = A({ two: null, key: null });
     h(() => {
-      M.current = n;
-    }, [n]), h(() => {
+      M.current = t;
+    }, [t]), h(() => {
       x.current = u;
     }, [u]);
     const { eventHandlers: K, shapeProps: m } = g(() => {
@@ -419,12 +415,12 @@ const pe = (t) => {
         _ = !1, D.current = { two: null, key: null }, j.current?.remove(j.current.children);
       };
     }, [o, r, l]), h(() => {
-      typeof t == "number" && (p.translation.x = t), typeof s == "number" && (p.translation.y = s);
+      typeof n == "number" && (p.translation.x = n), typeof s == "number" && (p.translation.y = s);
       const L = { ...m };
       delete L.children;
       for (const V in L)
         V in p && (p[V] = L[V]);
-    }, [p, t, s, m]), h(() => {
+    }, [p, n, s, m]), h(() => {
       if (Object.keys(K).length > 0)
         return f(p, K, c ?? void 0), () => {
           v(p);
@@ -452,7 +448,7 @@ const pe = (t) => {
     return /* @__PURE__ */ E(ce.Provider, { value: S, children: /* @__PURE__ */ E(J.Provider, { value: b, children: /* @__PURE__ */ E(Q.Provider, { value: I, children: a.children }) }) });
   }
 ), me = k.forwardRef(
-  ({ manual: t, x: s, y: r, ...l }, n) => {
+  ({ manual: n, x: s, y: r, ...l }, t) => {
     const { parent: u, registerEventShape: a, unregisterEventShape: e } = C(), o = g(() => new H.Path(), []), { eventHandlers: c, shapeProps: i } = g(() => {
       const d = {}, f = {};
       for (const v in l)
@@ -473,14 +469,14 @@ const pe = (t) => {
           e(o);
         };
     }, [o, a, e, u, c]), h(() => {
-      typeof s == "number" && (o.translation.x = s), typeof r == "number" && (o.translation.y = r), typeof t < "u" && (o.automatic = !t);
+      typeof s == "number" && (o.translation.x = s), typeof r == "number" && (o.translation.y = r), typeof n < "u" && (o.automatic = !n);
       for (const d in i)
         d in o && (o[d] = i[d]);
-    }, [i, o, s, r, t]), R(n, () => o, [o]), /* @__PURE__ */ E(T, {});
+    }, [i, o, s, r, n]), R(t, () => o, [o]), /* @__PURE__ */ E(T, {});
   }
 ), we = k.forwardRef(
-  ({ x: t, y: s, ...r }, l) => {
-    const { parent: n, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Points(), []), { eventHandlers: o, shapeProps: c } = g(() => {
+  ({ x: n, y: s, ...r }, l) => {
+    const { parent: t, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Points(), []), { eventHandlers: o, shapeProps: c } = g(() => {
       const i = {}, d = {};
       for (const f in r)
         O.includes(f) ? i[f] = r[
@@ -490,30 +486,30 @@ const pe = (t) => {
       return { eventHandlers: i, shapeProps: d };
     }, [r]);
     return h(() => {
-      if (n)
-        return n.add(e), () => {
-          n.remove(e);
+      if (t)
+        return t.add(e), () => {
+          t.remove(e);
         };
-    }, [n, e]), h(() => {
-      typeof t == "number" && (e.translation.x = t), typeof s == "number" && (e.translation.y = s);
+    }, [t, e]), h(() => {
+      typeof n == "number" && (e.translation.x = n), typeof s == "number" && (e.translation.y = s);
       for (const i in c)
         i in e && (e[i] = c[i]);
-    }, [c, e, t, s]), h(() => {
+    }, [c, e, n, s]), h(() => {
       if (Object.keys(o).length > 0)
-        return u(e, o, n ?? void 0), () => {
+        return u(e, o, t ?? void 0), () => {
           a(e);
         };
     }, [
       e,
       u,
       a,
-      n,
+      t,
       o
     ]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
   }
 ), Pe = k.forwardRef(
-  ({ x: t, y: s, ...r }, l) => {
-    const { parent: n, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Text(), []), { eventHandlers: o, shapeProps: c } = g(() => {
+  ({ x: n, y: s, ...r }, l) => {
+    const { parent: t, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Text(), []), { eventHandlers: o, shapeProps: c } = g(() => {
       const i = {}, d = {};
       for (const f in r)
         O.includes(f) ? i[f] = r[
@@ -523,23 +519,23 @@ const pe = (t) => {
       return { eventHandlers: i, shapeProps: d };
     }, [r]);
     return h(() => {
-      if (n)
-        return n.add(e), () => {
-          n.remove(e);
+      if (t)
+        return t.add(e), () => {
+          t.remove(e);
         };
-    }, [n, e]), h(() => {
-      typeof t == "number" && (e.translation.x = t), typeof s == "number" && (e.translation.y = s);
+    }, [t, e]), h(() => {
+      typeof n == "number" && (e.translation.x = n), typeof s == "number" && (e.translation.y = s);
       for (const i in c)
         i in e && (e[i] = c[i]);
-    }, [c, e, t, s]), h(() => {
+    }, [c, e, n, s]), h(() => {
       if (Object.keys(o).length > 0)
-        return u(e, o, n ?? void 0), () => {
+        return u(e, o, t ?? void 0), () => {
           a(e);
         };
-    }, [e, u, a, n, o]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
+    }, [e, u, a, t, o]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
   }
 ), be = k.forwardRef(
-  ({ x: t, y: s, resolution: r, ...l }, n) => {
+  ({ x: n, y: s, resolution: r, ...l }, t) => {
     const { parent: u, registerEventShape: a, unregisterEventShape: e } = C(), o = g(
       () => new H.ArcSegment(0, 0, 0, 0, 0, 0, r),
       [r]
@@ -558,10 +554,10 @@ const pe = (t) => {
           u.remove(o);
         };
     }, [u, o]), h(() => {
-      typeof t == "number" && (o.translation.x = t), typeof s == "number" && (o.translation.y = s);
+      typeof n == "number" && (o.translation.x = n), typeof s == "number" && (o.translation.y = s);
       for (const d in i)
         d in o && (o[d] = i[d]);
-    }, [i, o, t, s]), h(() => {
+    }, [i, o, n, s]), h(() => {
       if (Object.keys(c).length > 0)
         return a(o, c, u ?? void 0), () => {
           e(o);
@@ -572,10 +568,10 @@ const pe = (t) => {
       e,
       u,
       c
-    ]), R(n, () => o, [o]), /* @__PURE__ */ E(T, {});
+    ]), R(t, () => o, [o]), /* @__PURE__ */ E(T, {});
   }
 ), Ee = k.forwardRef(
-  ({ x: t, y: s, resolution: r, ...l }, n) => {
+  ({ x: n, y: s, resolution: r, ...l }, t) => {
     const { parent: u, registerEventShape: a, unregisterEventShape: e } = C(), o = g(
       () => new H.Circle(0, 0, 0, r),
       [r]
@@ -589,10 +585,10 @@ const pe = (t) => {
       return { eventHandlers: d, shapeProps: f };
     }, [l]);
     return h(() => {
-      typeof t == "number" && (o.translation.x = t), typeof s == "number" && (o.translation.y = s);
+      typeof n == "number" && (o.translation.x = n), typeof s == "number" && (o.translation.y = s);
       for (const d in i)
         d in o && (o[d] = i[d]);
-    }, [o, i, t, s]), h(() => {
+    }, [o, i, n, s]), h(() => {
       if (u)
         return u.add(o), () => {
           u.remove(o);
@@ -608,10 +604,10 @@ const pe = (t) => {
       e,
       u,
       c
-    ]), R(n, () => o, [o]), /* @__PURE__ */ E(T, {});
+    ]), R(t, () => o, [o]), /* @__PURE__ */ E(T, {});
   }
 ), Se = k.forwardRef(
-  ({ x: t, y: s, resolution: r, ...l }, n) => {
+  ({ x: n, y: s, resolution: r, ...l }, t) => {
     const { parent: u, registerEventShape: a, unregisterEventShape: e } = C(), o = g(
       () => new H.Ellipse(0, 0, 0, 0, r),
       [r]
@@ -630,10 +626,10 @@ const pe = (t) => {
           u.remove(o);
         };
     }, [u, o]), h(() => {
-      typeof t == "number" && (o.translation.x = t), typeof s == "number" && (o.translation.y = s);
+      typeof n == "number" && (o.translation.x = n), typeof s == "number" && (o.translation.y = s);
       for (const d in i)
         d in o && (o[d] = i[d]);
-    }, [o, t, s, i]), h(() => {
+    }, [o, n, s, i]), h(() => {
       if (Object.keys(c).length > 0)
         return a(o, c, u ?? void 0), () => {
           e(o);
@@ -644,10 +640,10 @@ const pe = (t) => {
       e,
       u,
       c
-    ]), R(n, () => o, [o]), /* @__PURE__ */ E(T, {});
+    ]), R(t, () => o, [o]), /* @__PURE__ */ E(T, {});
   }
 ), ke = k.forwardRef(
-  ({ mode: t, src: s, texture: r, x: l, y: n, ...u }, a) => {
+  ({ mode: n, src: s, texture: r, x: l, y: t, ...u }, a) => {
     const { parent: e, registerEventShape: o, unregisterEventShape: c } = C(), i = g(() => new H.Image(s), [s]), { eventHandlers: d, shapeProps: f } = g(() => {
       const v = {}, p = {};
       for (const j in u)
@@ -663,10 +659,10 @@ const pe = (t) => {
           e.remove(i);
         };
     }, [e, i]), h(() => {
-      typeof t < "u" && (i.mode = t), typeof r < "u" && (i.texture = r), typeof l == "number" && (i.translation.x = l), typeof n == "number" && (i.translation.y = n);
+      typeof n < "u" && (i.mode = n), typeof r < "u" && (i.texture = r), typeof l == "number" && (i.translation.x = l), typeof t == "number" && (i.translation.y = t);
       for (const v in f)
         v in i && (i[v] = f[v]);
-    }, [i, f, t, r, l, n]), h(() => {
+    }, [i, f, n, r, l, t]), h(() => {
       if (Object.keys(d).length > 0)
         return o(i, d, e ?? void 0), () => {
           c(i);
@@ -680,16 +676,16 @@ const pe = (t) => {
     ]), R(a, () => i, [i]), /* @__PURE__ */ E(T, {});
   }
 ), He = k.forwardRef(
-  ({ src: t, x: s, y: r, autoPlay: l, ...n }, u) => {
-    const { parent: a, registerEventShape: e, unregisterEventShape: o } = C(), c = g(() => new H.ImageSequence(t), [t]), { eventHandlers: i, shapeProps: d } = g(() => {
+  ({ src: n, x: s, y: r, autoPlay: l, ...t }, u) => {
+    const { parent: a, registerEventShape: e, unregisterEventShape: o } = C(), c = g(() => new H.ImageSequence(n), [n]), { eventHandlers: i, shapeProps: d } = g(() => {
       const f = {}, v = {};
-      for (const p in n)
-        O.includes(p) ? f[p] = n[
+      for (const p in t)
+        O.includes(p) ? f[p] = t[
           p
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ] : v[p] = n[p];
+        ] : v[p] = t[p];
       return { eventHandlers: f, shapeProps: v };
-    }, [n]);
+    }, [t]);
     return h(() => {
       if (a)
         return a.add(c), () => {
@@ -713,26 +709,26 @@ const pe = (t) => {
     ]), R(u, () => c, [c]), /* @__PURE__ */ E(T, {});
   }
 ), Re = k.forwardRef(
-  ({ x1: t, y1: s, x2: r, y2: l, ...n }, u) => {
+  ({ x1: n, y1: s, x2: r, y2: l, ...t }, u) => {
     const { parent: a, registerEventShape: e, unregisterEventShape: o } = C(), c = g(() => new H.Line(), []), { eventHandlers: i, shapeProps: d } = g(() => {
       const f = {}, v = {};
-      for (const p in n)
-        O.includes(p) ? f[p] = n[
+      for (const p in t)
+        O.includes(p) ? f[p] = t[
           p
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ] : v[p] = n[p];
+        ] : v[p] = t[p];
       return { eventHandlers: f, shapeProps: v };
-    }, [n]);
+    }, [t]);
     return h(() => {
       if (a)
         return a.add(c), () => {
           a.remove(c);
         };
     }, [a, c]), h(() => {
-      typeof t == "number" && (c.left.x = t), typeof s == "number" && (c.left.y = s), typeof r == "number" && (c.right.x = r), typeof l == "number" && (c.right.y = l);
+      typeof n == "number" && (c.left.x = n), typeof s == "number" && (c.left.y = s), typeof r == "number" && (c.right.x = r), typeof l == "number" && (c.right.y = l);
       for (const f in d)
         f in c && (c[f] = d[f]);
-    }, [d, c, t, s, r, l]), h(() => {
+    }, [d, c, n, s, r, l]), h(() => {
       if (Object.keys(i).length > 0)
         return e(c, i, a ?? void 0), () => {
           o(c);
@@ -740,8 +736,8 @@ const pe = (t) => {
     }, [c, e, o, a, i]), R(u, () => c, [c]), /* @__PURE__ */ E(T, {});
   }
 ), Ce = k.forwardRef(
-  ({ x: t, y: s, ...r }, l) => {
-    const { parent: n, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Polygon(), []), { eventHandlers: o, shapeProps: c } = g(() => {
+  ({ x: n, y: s, ...r }, l) => {
+    const { parent: t, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Polygon(), []), { eventHandlers: o, shapeProps: c } = g(() => {
       const i = {}, d = {};
       for (const f in r)
         O.includes(f) ? i[f] = r[
@@ -751,30 +747,30 @@ const pe = (t) => {
       return { eventHandlers: i, shapeProps: d };
     }, [r]);
     return h(() => {
-      if (n)
-        return n.add(e), () => {
-          n.remove(e);
+      if (t)
+        return t.add(e), () => {
+          t.remove(e);
         };
-    }, [n, e]), h(() => {
-      typeof t == "number" && (e.translation.x = t), typeof s == "number" && (e.translation.y = s);
+    }, [t, e]), h(() => {
+      typeof n == "number" && (e.translation.x = n), typeof s == "number" && (e.translation.y = s);
       for (const i in c)
         i in e && (e[i] = c[i]);
-    }, [c, e, t, s]), h(() => {
+    }, [c, e, n, s]), h(() => {
       if (Object.keys(o).length > 0)
-        return u(e, o, n ?? void 0), () => {
+        return u(e, o, t ?? void 0), () => {
           a(e);
         };
     }, [
       e,
       u,
       a,
-      n,
+      t,
       o
     ]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
   }
 ), je = k.forwardRef(
-  ({ x: t, y: s, ...r }, l) => {
-    const { parent: n, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Rectangle(), []), { eventHandlers: o, shapeProps: c } = g(() => {
+  ({ x: n, y: s, ...r }, l) => {
+    const { parent: t, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Rectangle(), []), { eventHandlers: o, shapeProps: c } = g(() => {
       const i = {}, d = {};
       for (const f in r)
         O.includes(f) ? i[f] = r[
@@ -784,30 +780,30 @@ const pe = (t) => {
       return { eventHandlers: i, shapeProps: d };
     }, [r]);
     return h(() => {
-      if (n)
-        return n.add(e), () => {
-          n.remove(e);
+      if (t)
+        return t.add(e), () => {
+          t.remove(e);
         };
-    }, [n, e]), h(() => {
-      typeof t == "number" && (e.translation.x = t), typeof s == "number" && (e.translation.y = s);
+    }, [t, e]), h(() => {
+      typeof n == "number" && (e.translation.x = n), typeof s == "number" && (e.translation.y = s);
       for (const i in c)
         i in e && (e[i] = c[i]);
-    }, [c, e, t, s]), h(() => {
+    }, [c, e, n, s]), h(() => {
       if (Object.keys(o).length > 0)
-        return u(e, o, n ?? void 0), () => {
+        return u(e, o, t ?? void 0), () => {
           a(e);
         };
     }, [
       e,
       u,
       a,
-      n,
+      t,
       o
     ]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
   }
 ), Le = k.forwardRef(
-  ({ x: t, y: s, ...r }, l) => {
-    const { parent: n, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.RoundedRectangle(), []), { eventHandlers: o, shapeProps: c } = g(() => {
+  ({ x: n, y: s, ...r }, l) => {
+    const { parent: t, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.RoundedRectangle(), []), { eventHandlers: o, shapeProps: c } = g(() => {
       const i = {}, d = {};
       for (const f in r)
         O.includes(f) ? i[f] = r[
@@ -817,20 +813,20 @@ const pe = (t) => {
       return { eventHandlers: i, shapeProps: d };
     }, [r]);
     return h(() => {
-      if (n)
-        return n.add(e), () => {
-          n.remove(e);
+      if (t)
+        return t.add(e), () => {
+          t.remove(e);
         };
-    }, [n, e]), h(() => {
-      typeof t == "number" && (e.translation.x = t), typeof s == "number" && (e.translation.y = s);
+    }, [t, e]), h(() => {
+      typeof n == "number" && (e.translation.x = n), typeof s == "number" && (e.translation.y = s);
       for (const i in c)
         i in e && (e[i] = c[i]);
-    }, [c, e, t, s]), h(() => {
+    }, [c, e, n, s]), h(() => {
       if (Object.keys(o).length > 0)
         return u(
           e,
           o,
-          n ?? void 0
+          t ?? void 0
         ), () => {
           a(e);
         };
@@ -838,23 +834,23 @@ const pe = (t) => {
       e,
       u,
       a,
-      n,
+      t,
       o
     ]), R(l, () => e, [
       e
     ]), /* @__PURE__ */ E(T, {});
   }
 ), Oe = k.forwardRef(
-  ({ src: t, x: s, y: r, autoPlay: l, ...n }, u) => {
-    const { parent: a, registerEventShape: e, unregisterEventShape: o } = C(), c = g(() => new H.Sprite(t), [t]), { eventHandlers: i, shapeProps: d } = g(() => {
+  ({ src: n, x: s, y: r, autoPlay: l, ...t }, u) => {
+    const { parent: a, registerEventShape: e, unregisterEventShape: o } = C(), c = g(() => new H.Sprite(n), [n]), { eventHandlers: i, shapeProps: d } = g(() => {
       const f = {}, v = {};
-      for (const p in n)
-        O.includes(p) ? f[p] = n[
+      for (const p in t)
+        O.includes(p) ? f[p] = t[
           p
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ] : v[p] = n[p];
+        ] : v[p] = t[p];
       return { eventHandlers: f, shapeProps: v };
-    }, [n]);
+    }, [t]);
     return h(() => {
       if (a)
         return a.add(c), () => {
@@ -878,8 +874,8 @@ const pe = (t) => {
     ]), R(u, () => c, [c]), /* @__PURE__ */ E(T, {});
   }
 ), Ve = k.forwardRef(
-  ({ x: t, y: s, ...r }, l) => {
-    const { parent: n, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Star(), []), { eventHandlers: o, shapeProps: c } = g(() => {
+  ({ x: n, y: s, ...r }, l) => {
+    const { parent: t, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Star(), []), { eventHandlers: o, shapeProps: c } = g(() => {
       const i = {}, d = {};
       for (const f in r)
         O.includes(f) ? i[f] = r[
@@ -889,45 +885,45 @@ const pe = (t) => {
       return { eventHandlers: i, shapeProps: d };
     }, [r]);
     return h(() => {
-      if (n)
-        return n.add(e), () => {
-          n.remove(e);
+      if (t)
+        return t.add(e), () => {
+          t.remove(e);
         };
-    }, [n, e]), h(() => {
-      typeof t == "number" && (e.translation.x = t), typeof s == "number" && (e.translation.y = s);
+    }, [t, e]), h(() => {
+      typeof n == "number" && (e.translation.x = n), typeof s == "number" && (e.translation.y = s);
       for (const i in c)
         i in e && (e[i] = c[i]);
-    }, [c, e, t, s]), h(() => {
+    }, [c, e, n, s]), h(() => {
       if (Object.keys(o).length > 0)
-        return u(e, o, n ?? void 0), () => {
+        return u(e, o, t ?? void 0), () => {
           a(e);
         };
-    }, [e, u, a, n, o]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
+    }, [e, u, a, t, o]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
   }
 ), Ge = k.forwardRef(
-  ({ x1: t, y1: s, x2: r, y2: l, ...n }, u) => {
+  ({ x1: n, y1: s, x2: r, y2: l, ...t }, u) => {
     const a = g(() => new H.LinearGradient(), []);
     return h(() => {
-      typeof t == "number" && (a.left.x = t), typeof s == "number" && (a.left.y = s), typeof r == "number" && (a.right.x = r), typeof l == "number" && (a.right.y = l);
-      for (const e in n)
-        e in a && (a[e] = n[e]);
-    }, [a, t, s, r, l, n]), R(u, () => a, [a]), null;
+      typeof n == "number" && (a.left.x = n), typeof s == "number" && (a.left.y = s), typeof r == "number" && (a.right.x = r), typeof l == "number" && (a.right.y = l);
+      for (const e in t)
+        e in a && (a[e] = t[e]);
+    }, [a, n, s, r, l, t]), R(u, () => a, [a]), null;
   }
 ), Te = k.forwardRef(
-  ({ x: t, y: s, focalX: r, focalY: l, ...n }, u) => {
+  ({ x: n, y: s, focalX: r, focalY: l, ...t }, u) => {
     const a = g(() => new H.RadialGradient(), []);
     return h(() => {
-      typeof t == "number" && (a.center.x = t), typeof s == "number" && (a.center.y = s), typeof r == "number" && (a.focal.x = r), typeof l == "number" && (a.focal.y = l);
-      for (const e in n)
-        e in a && (a[e] = n[e]);
-    }, [n, a, t, s, r, l]), R(u, () => a, [a]), null;
+      typeof n == "number" && (a.center.x = n), typeof s == "number" && (a.center.y = s), typeof r == "number" && (a.focal.x = r), typeof l == "number" && (a.focal.y = l);
+      for (const e in t)
+        e in a && (a[e] = t[e]);
+    }, [t, a, n, s, r, l]), R(u, () => a, [a]), null;
   }
 ), Me = k.forwardRef(
-  ({ src: t, ...s }, r) => {
-    const l = g(() => new H.Texture(t), [t]);
+  ({ src: n, ...s }, r) => {
+    const l = g(() => new H.Texture(n), [n]);
     return h(() => {
-      for (const n in s)
-        n in l && (l[n] = s[n]);
+      for (const t in s)
+        t in l && (l[t] = s[t]);
     }, [s, l]), R(r, () => l, [l]), null;
   }
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-two.js",
-  "version": "0.8.22-r.5",
+  "version": "0.8.23",
   "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",
@@ -80,6 +80,6 @@
   "peerDependencies": {
     "react": ">=19",
     "react-dom": ">=19",
-    "two.js": ">=v0.8.22"
+    "two.js": ">=v0.8.23"
   }
 }