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

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

@@ -1,5 +1,5 @@
-import { jsx as E, Fragment as T } from "react/jsx-runtime";
-import k, { createContext as Z, useContext as X, useRef as A, useEffect as h, useState as $, useCallback as oe, useMemo as g, useImperativeHandle as R } from "react";
+import { jsx as b, Fragment as O } from "react/jsx-runtime";
+import k, { createContext as Z, useContext as X, useRef as N, useEffect as h, useState as $, useCallback as oe, useMemo as g, useImperativeHandle as R } from "react";
 import H from "two.js";
 const ee = Z({
   two: null,
@@ -13,13 +13,13 @@ 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 t = X(ee), i = X(J), r = X(Q);
+  return { ...t, ...i, ...r };
+}, ve = (t, i = []) => {
+  const { two: r } = C(), l = N(t);
   h(() => {
     l.current = t;
-  }, [t, ...s]), h(() => {
+  }, [t, ...i]), h(() => {
     if (!r)
       return;
     let n = 0;
@@ -27,8 +27,8 @@ const ee = Z({
     function u(a, e) {
       n += e / 1e3, l.current?.(n, e);
     }
-  }, [r, ...s]);
-}, O = [
+  }, [r, ...i]);
+}, L = [
   "onClick",
   "onContextMenu",
   "onDoubleClick",
@@ -42,19 +42,19 @@ 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;
+function se(t, i, r) {
+  const l = i.getBoundingClientRect(), n = t.clientX - l.left - r.width / 2, u = t.clientY - l.top - r.height / 2;
   return { x: n, y: u };
 }
-function U(t, s) {
-  const r = s.getBoundingClientRect(), l = t.clientX - r.left, n = t.clientY - r.top;
+function A(t, i) {
+  const r = i.getBoundingClientRect(), l = t.clientX - r.left, n = t.clientY - r.top;
   return { x: l, y: n };
 }
-function se(t, s, r, l) {
+function ie(t, i, r, l) {
   let n = !1;
   return {
     nativeEvent: t,
-    target: s,
+    target: i,
     currentTarget: r,
     point: l,
     stopPropagation: () => {
@@ -65,29 +65,29 @@ function se(t, s, r, l) {
     }
   };
 }
-function ae(t, s, r) {
-  return "visible" in t && !t.visible ? !1 : typeof t.contains == "function" ? t.contains(s, r) : !1;
+function ae(t, i, r) {
+  return "visible" in t && !t.visible ? !1 : typeof t.contains == "function" ? t.contains(i, r) : !1;
 }
-function q(t, s, r) {
+function U(t, i, r) {
   const l = [];
   for (const [n] of t)
-    ae(n, s, r) && l.push(n);
+    ae(n, i, r) && l.push(n);
   return l;
 }
-function le(t, s) {
-  const r = [t], l = s.get(t);
+function le(t, i) {
+  const r = [t], l = i.get(t);
   if (l?.parent) {
     let n = l.parent;
     for (; n; )
-      r.push(n), n = s.get(n)?.parent;
+      r.push(n), n = i.get(n)?.parent;
   }
   return r;
 }
 function Y(t) {
-  process.env.NODE_ENV !== "production" && k.Children.forEach(t, (s) => {
-    if (!k.isValidElement(s))
+  process.env.NODE_ENV !== "production" && k.Children.forEach(t, (i) => {
+    if (!k.isValidElement(i))
       return;
-    const r = s.type;
+    const r = i.type;
     if (typeof r == "string") {
       console.warn(
         `[react-two.js] <${r}> is not compatible with Canvas.
@@ -99,64 +99,62 @@ See: https://github.com/jonobr1/react-two.js#usage`
     }
     if (r === k.Fragment) {
       Y(
-        s.props.children
+        i.props.children
       );
       return;
     }
-    typeof r == "function" && s.props.children && Y(
-      s.props.children
+    typeof r == "function" && i.props.children && Y(
+      i.props.children
     );
   });
 }
 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(
-    (m, S, b) => {
-      n.current.set(m, { shape: m, handlers: S, parent: b });
+  const { two: i, parent: r } = C(), l = N(null), n = N(/* @__PURE__ */ new Map()), u = N(/* @__PURE__ */ new Set()), a = N(null), [e, o] = $(i), [c, s] = $(r), [d, f] = $(0), [v, p] = $(0), j = oe(
+    (m, S, E) => {
+      n.current.set(m, { shape: m, handlers: S, parent: E });
     },
     []
-  ), M = oe((m) => {
+  ), V = oe((m) => {
     n.current.delete(m), u.current.delete(m), a.current === m && (a.current = null);
   }, []);
   h(() => {
-    if (!s) {
+    if (!i) {
       const S = { ...t };
       delete S.children;
-      const b = new H(S).appendTo(l.current);
-      return o(b), i(b.scene), f(b.width), p(b.height), () => {
-        b.renderer.domElement.parentElement?.removeChild(
-          b.renderer.domElement
-        ), b.pause(), b.unbind(), b.release();
-        const I = H.Instances.indexOf(b);
-        I >= 0 && H.Instances.splice(I, 1), b.clear();
+      const E = new H(S).appendTo(l.current);
+      return o(E), s(E.scene), f(E.width), p(E.height), () => {
+        E.renderer.domElement.parentElement?.removeChild(
+          E.renderer.domElement
+        ), E.pause(), E.unbind(), E.release();
+        const q = H.Instances.indexOf(E);
+        q >= 0 && H.Instances.splice(q, 1), E.clear();
       };
     }
   }, []), 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(() => {
-    if (!s && e) {
+    !i && (typeof t.width == "number" && (e && (e.width = t.width), f(t.width)), typeof t.height == "number" && (e && (e.height = t.height), p(t.height)));
+  }, [i, e, t.width, t.height]), h(() => {
+    if (!i && e) {
       let S = function() {
-        const V = b.width !== I, G = b.height !== L;
-        V && (I = b.width), G && (L = b.height), (V || G) && (f(I), p(L));
+        f(E.width), p(E.height);
       };
-      const b = e;
-      let I = b.width, L = b.height;
-      return (t.fullscreen || t.fitted) && b.bind("update", S), () => {
-        b.unbind("update", S);
+      const E = e;
+      return E.renderer.bind("resize", S), () => {
+        E.renderer.unbind("resize", S);
       };
     }
-  }, [s, e, t.fullscreen, t.fitted]), h(() => {
+  }, [i, e]), h(() => {
     process.env.NODE_ENV !== "production" && Y(t.children);
   }, [t.children]), h(() => {
     if (!e) return;
-    const m = e.renderer.domElement, S = (y, w, P) => {
+    const m = e.renderer.domElement, S = (y, P, w) => {
       if (y.length === 0) return;
-      const N = y[0], B = ie(P, m, e), F = le(N, n.current);
-      for (const ne of F) {
-        const te = n.current.get(ne)?.handlers[w];
+      const I = y[0], B = se(w, m, e), z = le(I, n.current);
+      for (const ne of z) {
+        const te = n.current.get(ne)?.handlers[P];
         if (te) {
-          const re = se(
-            P,
-            N,
+          const re = ie(
+            w,
+            I,
             ne,
             B
           );
@@ -164,104 +162,100 @@ const pe = (t) => {
             break;
         }
       }
-    }, b = (y) => {
-      const w = U(y, m), P = q(
+    }, E = (y) => {
+      const P = A(y, m), w = U(
         n.current,
-        w.x,
-        w.y
+        P.x,
+        P.y
       );
-      P.length > 0 && S(P, "onClick", y);
-    }, I = (y) => {
-      const w = U(y, m), P = q(
+      w.length > 0 && S(w, "onClick", y);
+    }, q = (y) => {
+      const P = A(y, m), w = U(
         n.current,
-        w.x,
-        w.y
+        P.x,
+        P.y
       );
-      P.length > 0 && S(P, "onContextMenu", y);
-    }, L = (y) => {
-      const w = U(y, m), P = q(
+      w.length > 0 && S(w, "onContextMenu", y);
+    }, G = (y) => {
+      const P = A(y, m), w = U(
         n.current,
-        w.x,
-        w.y
+        P.x,
+        P.y
       );
-      P.length > 0 && S(P, "onDoubleClick", y);
-    }, V = (y) => {
-      const w = U(y, m), P = q(
+      w.length > 0 && S(w, "onDoubleClick", y);
+    }, T = (y) => {
+      const P = A(y, m), w = U(
         n.current,
-        w.x,
-        w.y
+        P.x,
+        P.y
       );
-      P.length > 0 && S(P, "onWheel", y);
-    }, G = (y) => {
-      const w = U(y, m), P = q(
+      w.length > 0 && S(w, "onWheel", y);
+    }, D = (y) => {
+      const P = A(y, m), w = U(
         n.current,
-        w.x,
-        w.y
+        P.x,
+        P.y
       );
-      P.length > 0 && (S(P, "onPointerDown", y), y.target instanceof Element && y.target.hasPointerCapture?.(y.pointerId) && (a.current = P[0]));
+      w.length > 0 && (S(w, "onPointerDown", y), y.target instanceof Element && y.target.hasPointerCapture?.(y.pointerId) && (a.current = w[0]));
     }, _ = (y) => {
       if (a.current) {
-        const N = n.current.get(a.current);
-        if (N?.handlers.onPointerUp) {
-          const B = ie(y, m, e), F = se(
+        const I = n.current.get(a.current);
+        if (I?.handlers.onPointerUp) {
+          const B = se(y, m, e), z = ie(
             y,
             a.current,
             a.current,
             B
           );
-          N.handlers.onPointerUp(F);
+          I.handlers.onPointerUp(z);
         }
         a.current = null;
         return;
       }
-      const w = U(y, m), P = q(
+      const P = A(y, m), w = U(
         n.current,
-        w.x,
-        w.y
+        P.x,
+        P.y
       );
-      P.length > 0 ? S(P, "onPointerUp", y) : t.onPointerMissed && t.onPointerMissed(y);
-    }, z = (y) => {
-      const w = U(y, m), P = q(
+      w.length > 0 ? S(w, "onPointerUp", y) : t.onPointerMissed && t.onPointerMissed(y);
+    }, F = (y) => {
+      const P = A(y, m), w = U(
         n.current,
-        w.x,
-        w.y
-      ), N = new Set(P);
-      P.length > 0 && S(P, "onPointerMove", y);
+        P.x,
+        P.y
+      ), I = new Set(w);
+      w.length > 0 && S(w, "onPointerMove", y);
       const B = u.current;
-      for (const F of N)
-        B.has(F) || (S([F], "onPointerEnter", y), S([F], "onPointerOver", y));
-      for (const F of B)
-        N.has(F) || (S([F], "onPointerLeave", y), S([F], "onPointerOut", y));
-      u.current = N;
+      for (const z of I)
+        B.has(z) || (S([z], "onPointerEnter", y), S([z], "onPointerOver", y));
+      for (const z of B)
+        I.has(z) || (S([z], "onPointerLeave", y), S([z], "onPointerOut", y));
+      u.current = I;
     }, W = (y) => {
-      const w = U(y, m), P = q(
+      const P = A(y, m), w = U(
         n.current,
-        w.x,
-        w.y
+        P.x,
+        P.y
       );
-      P.length > 0 && S(P, "onPointerCancel", y), a.current = null;
+      w.length > 0 && S(w, "onPointerCancel", y), a.current = null;
     };
-    return m.addEventListener("click", b), m.addEventListener("contextmenu", I), m.addEventListener("dblclick", L), m.addEventListener("wheel", V), m.addEventListener("pointerdown", G), m.addEventListener("pointerup", _), m.addEventListener("pointermove", z), m.addEventListener("pointercancel", W), () => {
-      m.removeEventListener("click", b), m.removeEventListener("contextmenu", I), m.removeEventListener("dblclick", L), m.removeEventListener("wheel", V), m.removeEventListener("pointerdown", G), m.removeEventListener("pointerup", _), m.removeEventListener("pointermove", z), m.removeEventListener("pointercancel", W);
+    return m.addEventListener("click", E), m.addEventListener("contextmenu", q), m.addEventListener("dblclick", G), m.addEventListener("wheel", T), m.addEventListener("pointerdown", D), m.addEventListener("pointerup", _), m.addEventListener("pointermove", F), m.addEventListener("pointercancel", W), () => {
+      m.removeEventListener("click", E), m.removeEventListener("contextmenu", q), m.removeEventListener("dblclick", G), m.removeEventListener("wheel", T), m.removeEventListener("pointerdown", D), m.removeEventListener("pointerup", _), m.removeEventListener("pointermove", F), m.removeEventListener("pointercancel", W);
     };
   }, [
     e,
     t.onPointerMissed,
     j,
-    M
+    V
   ]);
-  const x = g(
+  const M = g(
     () => ({
       two: e,
       registerEventShape: j,
-      unregisterEventShape: M
+      unregisterEventShape: V
     }),
-    [
-      e,
-      j,
-      M
-    ]
-  ), D = g(
+    [e, j, V]
+  ), x = g(
     () => ({
       parent: c
     }),
@@ -273,9 +267,9 @@ 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__ */ b(ee.Provider, { value: M, children: /* @__PURE__ */ b(J.Provider, { value: x, children: /* @__PURE__ */ b(Q.Provider, { value: K, children: /* @__PURE__ */ b("div", { ref: l, ...t.container, children: t.children }) }) }) });
 }, ge = k.forwardRef(
-  ({ x: t, y: s, ...r }, l) => {
+  ({ x: t, y: i, ...r }, l) => {
     const {
       two: n,
       parent: u,
@@ -283,38 +277,38 @@ const pe = (t) => {
       height: e,
       registerEventShape: o,
       unregisterEventShape: c
-    } = C(), i = g(() => new H.Group(), []), { eventHandlers: d, shapeProps: f } = g(() => {
-      const M = {}, x = {};
-      for (const D in r)
-        O.includes(D) ? M[D] = r[
-          D
+    } = C(), s = g(() => new H.Group(), []), { eventHandlers: d, shapeProps: f } = g(() => {
+      const V = {}, M = {};
+      for (const x in r)
+        L.includes(x) ? V[x] = r[
+          x
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ] : x[D] = r[D];
-      return { eventHandlers: M, shapeProps: x };
+        ] : M[x] = r[x];
+      return { eventHandlers: V, shapeProps: M };
     }, [r]);
     h(() => {
       if (u)
-        return u.add(i), () => {
-          u.remove(i);
-        };
-    }, [u, i]), h(() => {
-      typeof t == "number" && (i.translation.x = t), 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(() => {
+        return u.add(s), () => {
+          u.remove(s);
+        };
+    }, [u, s]), h(() => {
+      typeof t == "number" && (s.translation.x = t), typeof i == "number" && (s.translation.y = i);
+      const V = { ...f };
+      delete V.children;
+      for (const M in V)
+        M in s && (s[M] = V[M]);
+    }, [s, t, i, f]), h(() => {
       if (Object.keys(d).length > 0)
-        return o(i, d, u ?? void 0), () => {
-          c(i);
+        return o(s, d, u ?? void 0), () => {
+          c(s);
         };
     }, [
-      i,
+      s,
       o,
       c,
       u,
       d
-    ]), R(l, () => i, [i]);
+    ]), R(l, () => s, [s]);
     const v = g(
       () => ({
         two: n,
@@ -324,9 +318,9 @@ const pe = (t) => {
       [n, o, c]
     ), p = g(
       () => ({
-        parent: i
+        parent: s
       }),
-      [i]
+      [s]
     ), j = g(
       () => ({
         width: a,
@@ -334,31 +328,31 @@ const pe = (t) => {
       }),
       [a, e]
     );
-    return /* @__PURE__ */ E(ce.Provider, { value: v, children: /* @__PURE__ */ E(J.Provider, { value: p, children: /* @__PURE__ */ E(Q.Provider, { value: j, children: r.children }) }) });
+    return /* @__PURE__ */ b(ce.Provider, { value: v, children: /* @__PURE__ */ b(J.Provider, { value: p, children: /* @__PURE__ */ b(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: t, y: i, src: r, content: l, onLoad: n, onError: u, ...a }, e) => {
     const {
       two: o,
       parent: c,
-      width: i,
+      width: s,
       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 = N(null), V = N(n), M = N(u), x = N({ two: null, key: null });
     h(() => {
-      M.current = n;
+      V.current = n;
     }, [n]), h(() => {
-      x.current = u;
+      M.current = u;
     }, [u]);
     const { eventHandlers: K, shapeProps: m } = g(() => {
-      const L = {}, V = {};
-      for (const G in a)
-        O.includes(G) ? L[G] = a[
-          G
+      const G = {}, T = {};
+      for (const D in a)
+        L.includes(D) ? G[D] = a[
+          D
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ] : V[G] = a[G];
-      return { eventHandlers: L, shapeProps: V };
+        ] : T[D] = a[D];
+      return { eventHandlers: G, shapeProps: T };
     }, [a]);
     h(() => {
       j.current = p;
@@ -375,56 +369,56 @@ const pe = (t) => {
       );
     }, [r, l]), h(() => {
       if (!o) return;
-      const L = r || l;
-      if (!L) return;
-      const V = L, G = D.current;
-      if (G.two === o && G.key === V)
+      const G = r || l;
+      if (!G) return;
+      const T = G, D = x.current;
+      if (D.two === o && D.key === T)
         return;
       let _ = !0;
-      D.current = { two: o, key: V };
+      x.current = { two: o, key: T };
       try {
         o.load(
-          L,
-          (z, W) => {
+          G,
+          (F, W) => {
             if (!_) return;
-            j.current?.add(z.children);
-            const y = M.current;
+            j.current?.add(F.children);
+            const y = V.current;
             if (y)
               try {
                 requestAnimationFrame(() => y(j.current, W));
-              } catch (w) {
+              } catch (P) {
                 console.error(
                   "[react-two.js] Error in SVG onLoad callback:",
-                  w
+                  P
                 );
               }
           }
         );
-      } catch (z) {
+      } catch (F) {
         if (!_) return;
-        const W = z instanceof Error ? z : new Error("Failed to load SVG"), y = x.current;
+        const W = F instanceof Error ? F : new Error("Failed to load SVG"), y = M.current;
         if (y)
           try {
             y(W);
-          } catch (w) {
+          } catch (P) {
             console.error(
               "[react-two.js] Error in SVG onError callback:",
-              w
+              P
             );
           }
         else
           console.error("[react-two.js] SVG loading error:", W);
       }
       return () => {
-        _ = !1, D.current = { two: null, key: null }, j.current?.remove(j.current.children);
+        _ = !1, x.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);
-      const L = { ...m };
-      delete L.children;
-      for (const V in L)
-        V in p && (p[V] = L[V]);
-    }, [p, t, s, m]), h(() => {
+      typeof t == "number" && (p.translation.x = t), typeof i == "number" && (p.translation.y = i);
+      const G = { ...m };
+      delete G.children;
+      for (const T in G)
+        T in p && (p[T] = G[T]);
+    }, [p, t, i, m]), h(() => {
       if (Object.keys(K).length > 0)
         return f(p, K, c ?? void 0), () => {
           v(p);
@@ -437,26 +431,26 @@ const pe = (t) => {
         unregisterEventShape: v
       }),
       [o, f, v]
-    ), b = g(
+    ), E = g(
       () => ({
         parent: p
       }),
       [p]
-    ), I = g(
+    ), q = g(
       () => ({
-        width: i,
+        width: s,
         height: d
       }),
-      [i, d]
+      [s, d]
     );
-    return /* @__PURE__ */ E(ce.Provider, { value: S, children: /* @__PURE__ */ E(J.Provider, { value: b, children: /* @__PURE__ */ E(Q.Provider, { value: I, children: a.children }) }) });
+    return /* @__PURE__ */ b(ce.Provider, { value: S, children: /* @__PURE__ */ b(J.Provider, { value: E, children: /* @__PURE__ */ b(Q.Provider, { value: q, children: a.children }) }) });
   }
 ), me = k.forwardRef(
-  ({ manual: t, x: s, y: r, ...l }, n) => {
-    const { parent: u, registerEventShape: a, unregisterEventShape: e } = C(), o = g(() => new H.Path(), []), { eventHandlers: c, shapeProps: i } = g(() => {
+  ({ manual: t, x: i, y: r, ...l }, n) => {
+    const { parent: u, registerEventShape: a, unregisterEventShape: e } = C(), o = g(() => new H.Path(), []), { eventHandlers: c, shapeProps: s } = g(() => {
       const d = {}, f = {};
       for (const v in l)
-        O.includes(v) ? d[v] = l[
+        L.includes(v) ? d[v] = l[
           v
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : f[v] = l[v];
@@ -473,21 +467,21 @@ 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);
-      for (const d in i)
-        d in o && (o[d] = i[d]);
-    }, [i, o, s, r, t]), R(n, () => o, [o]), /* @__PURE__ */ E(T, {});
+      typeof i == "number" && (o.translation.x = i), typeof r == "number" && (o.translation.y = r), typeof t < "u" && (o.automatic = !t);
+      for (const d in s)
+        d in o && (o[d] = s[d]);
+    }, [s, o, i, r, t]), R(n, () => o, [o]), /* @__PURE__ */ b(O, {});
   }
-), we = k.forwardRef(
-  ({ x: t, y: s, ...r }, l) => {
+), Pe = k.forwardRef(
+  ({ x: t, y: i, ...r }, l) => {
     const { parent: n, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Points(), []), { eventHandlers: o, shapeProps: c } = g(() => {
-      const i = {}, d = {};
+      const s = {}, d = {};
       for (const f in r)
-        O.includes(f) ? i[f] = r[
+        L.includes(f) ? s[f] = r[
           f
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : d[f] = r[f];
-      return { eventHandlers: i, shapeProps: d };
+      return { eventHandlers: s, shapeProps: d };
     }, [r]);
     return h(() => {
       if (n)
@@ -495,10 +489,10 @@ const pe = (t) => {
           n.remove(e);
         };
     }, [n, e]), h(() => {
-      typeof t == "number" && (e.translation.x = t), typeof s == "number" && (e.translation.y = s);
-      for (const i in c)
-        i in e && (e[i] = c[i]);
-    }, [c, e, t, s]), h(() => {
+      typeof t == "number" && (e.translation.x = t), typeof i == "number" && (e.translation.y = i);
+      for (const s in c)
+        s in e && (e[s] = c[s]);
+    }, [c, e, t, i]), h(() => {
       if (Object.keys(o).length > 0)
         return u(e, o, n ?? void 0), () => {
           a(e);
@@ -509,18 +503,18 @@ const pe = (t) => {
       a,
       n,
       o
-    ]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
+    ]), R(l, () => e, [e]), /* @__PURE__ */ b(O, {});
   }
-), Pe = k.forwardRef(
-  ({ x: t, y: s, ...r }, l) => {
+), we = k.forwardRef(
+  ({ x: t, y: i, ...r }, l) => {
     const { parent: n, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Text(), []), { eventHandlers: o, shapeProps: c } = g(() => {
-      const i = {}, d = {};
+      const s = {}, d = {};
       for (const f in r)
-        O.includes(f) ? i[f] = r[
+        L.includes(f) ? s[f] = r[
           f
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : d[f] = r[f];
-      return { eventHandlers: i, shapeProps: d };
+      return { eventHandlers: s, shapeProps: d };
     }, [r]);
     return h(() => {
       if (n)
@@ -528,25 +522,25 @@ const pe = (t) => {
           n.remove(e);
         };
     }, [n, e]), h(() => {
-      typeof t == "number" && (e.translation.x = t), typeof s == "number" && (e.translation.y = s);
-      for (const i in c)
-        i in e && (e[i] = c[i]);
-    }, [c, e, t, s]), h(() => {
+      typeof t == "number" && (e.translation.x = t), typeof i == "number" && (e.translation.y = i);
+      for (const s in c)
+        s in e && (e[s] = c[s]);
+    }, [c, e, t, i]), h(() => {
       if (Object.keys(o).length > 0)
         return u(e, o, n ?? void 0), () => {
           a(e);
         };
-    }, [e, u, a, n, o]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
+    }, [e, u, a, n, o]), R(l, () => e, [e]), /* @__PURE__ */ b(O, {});
   }
 ), be = k.forwardRef(
-  ({ x: t, y: s, resolution: r, ...l }, n) => {
+  ({ x: t, y: i, resolution: r, ...l }, n) => {
     const { parent: u, registerEventShape: a, unregisterEventShape: e } = C(), o = g(
       () => new H.ArcSegment(0, 0, 0, 0, 0, 0, r),
       [r]
-    ), { eventHandlers: c, shapeProps: i } = g(() => {
+    ), { eventHandlers: c, shapeProps: s } = g(() => {
       const d = {}, f = {};
       for (const v in l)
-        O.includes(v) ? d[v] = l[
+        L.includes(v) ? d[v] = l[
           v
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : f[v] = l[v];
@@ -558,10 +552,10 @@ const pe = (t) => {
           u.remove(o);
         };
     }, [u, o]), h(() => {
-      typeof t == "number" && (o.translation.x = t), typeof s == "number" && (o.translation.y = s);
-      for (const d in i)
-        d in o && (o[d] = i[d]);
-    }, [i, o, t, s]), h(() => {
+      typeof t == "number" && (o.translation.x = t), typeof i == "number" && (o.translation.y = i);
+      for (const d in s)
+        d in o && (o[d] = s[d]);
+    }, [s, o, t, i]), h(() => {
       if (Object.keys(c).length > 0)
         return a(o, c, u ?? void 0), () => {
           e(o);
@@ -572,27 +566,27 @@ const pe = (t) => {
       e,
       u,
       c
-    ]), R(n, () => o, [o]), /* @__PURE__ */ E(T, {});
+    ]), R(n, () => o, [o]), /* @__PURE__ */ b(O, {});
   }
 ), Ee = k.forwardRef(
-  ({ x: t, y: s, resolution: r, ...l }, n) => {
+  ({ x: t, y: i, resolution: r, ...l }, n) => {
     const { parent: u, registerEventShape: a, unregisterEventShape: e } = C(), o = g(
       () => new H.Circle(0, 0, 0, r),
       [r]
-    ), { eventHandlers: c, shapeProps: i } = g(() => {
+    ), { eventHandlers: c, shapeProps: s } = g(() => {
       const d = {}, f = {};
       for (const v in l)
-        O.includes(v) ? d[v] = l[
+        L.includes(v) ? d[v] = l[
           v
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : f[v] = l[v];
       return { eventHandlers: d, shapeProps: f };
     }, [l]);
     return h(() => {
-      typeof t == "number" && (o.translation.x = t), typeof s == "number" && (o.translation.y = s);
-      for (const d in i)
-        d in o && (o[d] = i[d]);
-    }, [o, i, t, s]), h(() => {
+      typeof t == "number" && (o.translation.x = t), typeof i == "number" && (o.translation.y = i);
+      for (const d in s)
+        d in o && (o[d] = s[d]);
+    }, [o, s, t, i]), h(() => {
       if (u)
         return u.add(o), () => {
           u.remove(o);
@@ -608,17 +602,17 @@ const pe = (t) => {
       e,
       u,
       c
-    ]), R(n, () => o, [o]), /* @__PURE__ */ E(T, {});
+    ]), R(n, () => o, [o]), /* @__PURE__ */ b(O, {});
   }
 ), Se = k.forwardRef(
-  ({ x: t, y: s, resolution: r, ...l }, n) => {
+  ({ x: t, y: i, resolution: r, ...l }, n) => {
     const { parent: u, registerEventShape: a, unregisterEventShape: e } = C(), o = g(
       () => new H.Ellipse(0, 0, 0, 0, r),
       [r]
-    ), { eventHandlers: c, shapeProps: i } = g(() => {
+    ), { eventHandlers: c, shapeProps: s } = g(() => {
       const d = {}, f = {};
       for (const v in l)
-        O.includes(v) ? d[v] = l[
+        L.includes(v) ? d[v] = l[
           v
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : f[v] = l[v];
@@ -630,10 +624,10 @@ const pe = (t) => {
           u.remove(o);
         };
     }, [u, o]), h(() => {
-      typeof t == "number" && (o.translation.x = t), typeof s == "number" && (o.translation.y = s);
-      for (const d in i)
-        d in o && (o[d] = i[d]);
-    }, [o, t, s, i]), h(() => {
+      typeof t == "number" && (o.translation.x = t), typeof i == "number" && (o.translation.y = i);
+      for (const d in s)
+        d in o && (o[d] = s[d]);
+    }, [o, t, i, s]), h(() => {
       if (Object.keys(c).length > 0)
         return a(o, c, u ?? void 0), () => {
           e(o);
@@ -644,14 +638,14 @@ const pe = (t) => {
       e,
       u,
       c
-    ]), R(n, () => o, [o]), /* @__PURE__ */ E(T, {});
+    ]), R(n, () => o, [o]), /* @__PURE__ */ b(O, {});
   }
 ), ke = k.forwardRef(
-  ({ mode: t, src: s, texture: r, x: l, y: n, ...u }, a) => {
-    const { parent: e, registerEventShape: o, unregisterEventShape: c } = C(), i = g(() => new H.Image(s), [s]), { eventHandlers: d, shapeProps: f } = g(() => {
+  ({ mode: t, src: i, texture: r, x: l, y: n, ...u }, a) => {
+    const { parent: e, registerEventShape: o, unregisterEventShape: c } = C(), s = g(() => new H.Image(i), [i]), { eventHandlers: d, shapeProps: f } = g(() => {
       const v = {}, p = {};
       for (const j in u)
-        O.includes(j) ? v[j] = u[
+        L.includes(j) ? v[j] = u[
           j
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : p[j] = u[j];
@@ -659,32 +653,32 @@ const pe = (t) => {
     }, [u]);
     return h(() => {
       if (e)
-        return e.add(i), () => {
-          e.remove(i);
+        return e.add(s), () => {
+          e.remove(s);
         };
-    }, [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);
+    }, [e, s]), h(() => {
+      typeof t < "u" && (s.mode = t), typeof r < "u" && (s.texture = r), typeof l == "number" && (s.translation.x = l), typeof n == "number" && (s.translation.y = n);
       for (const v in f)
-        v in i && (i[v] = f[v]);
-    }, [i, f, t, r, l, n]), h(() => {
+        v in s && (s[v] = f[v]);
+    }, [s, f, t, r, l, n]), h(() => {
       if (Object.keys(d).length > 0)
-        return o(i, d, e ?? void 0), () => {
-          c(i);
+        return o(s, d, e ?? void 0), () => {
+          c(s);
         };
     }, [
-      i,
+      s,
       o,
       c,
       e,
       d
-    ]), R(a, () => i, [i]), /* @__PURE__ */ E(T, {});
+    ]), R(a, () => s, [s]), /* @__PURE__ */ b(O, {});
   }
 ), 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: t, x: i, y: r, autoPlay: l, ...n }, u) => {
+    const { parent: a, registerEventShape: e, unregisterEventShape: o } = C(), c = g(() => new H.ImageSequence(t), [t]), { eventHandlers: s, shapeProps: d } = g(() => {
       const f = {}, v = {};
       for (const p in n)
-        O.includes(p) ? f[p] = n[
+        L.includes(p) ? f[p] = n[
           p
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : v[p] = n[p];
@@ -696,12 +690,12 @@ const pe = (t) => {
           a.remove(c);
         };
     }, [a, c]), h(() => {
-      l ? c.play() : c.pause(), typeof s == "number" && (c.translation.x = s), typeof r == "number" && (c.translation.y = r);
+      l ? c.play() : c.pause(), typeof i == "number" && (c.translation.x = i), typeof r == "number" && (c.translation.y = r);
       for (const f in d)
         f in c && (c[f] = d[f]);
-    }, [d, c, s, r, l]), h(() => {
-      if (Object.keys(i).length > 0)
-        return e(c, i, a ?? void 0), () => {
+    }, [d, c, i, r, l]), h(() => {
+      if (Object.keys(s).length > 0)
+        return e(c, s, a ?? void 0), () => {
           o(c);
         };
     }, [
@@ -709,15 +703,15 @@ const pe = (t) => {
       e,
       o,
       a,
-      i
-    ]), R(u, () => c, [c]), /* @__PURE__ */ E(T, {});
+      s
+    ]), R(u, () => c, [c]), /* @__PURE__ */ b(O, {});
   }
 ), Re = k.forwardRef(
-  ({ x1: t, y1: s, x2: r, y2: l, ...n }, u) => {
-    const { parent: a, registerEventShape: e, unregisterEventShape: o } = C(), c = g(() => new H.Line(), []), { eventHandlers: i, shapeProps: d } = g(() => {
+  ({ x1: t, y1: i, x2: r, y2: l, ...n }, u) => {
+    const { parent: a, registerEventShape: e, unregisterEventShape: o } = C(), c = g(() => new H.Line(), []), { eventHandlers: s, shapeProps: d } = g(() => {
       const f = {}, v = {};
       for (const p in n)
-        O.includes(p) ? f[p] = n[
+        L.includes(p) ? f[p] = n[
           p
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : v[p] = n[p];
@@ -729,26 +723,26 @@ const pe = (t) => {
           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 t == "number" && (c.left.x = t), typeof i == "number" && (c.left.y = i), 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(() => {
-      if (Object.keys(i).length > 0)
-        return e(c, i, a ?? void 0), () => {
+    }, [d, c, t, i, r, l]), h(() => {
+      if (Object.keys(s).length > 0)
+        return e(c, s, a ?? void 0), () => {
           o(c);
         };
-    }, [c, e, o, a, i]), R(u, () => c, [c]), /* @__PURE__ */ E(T, {});
+    }, [c, e, o, a, s]), R(u, () => c, [c]), /* @__PURE__ */ b(O, {});
   }
 ), Ce = k.forwardRef(
-  ({ x: t, y: s, ...r }, l) => {
+  ({ x: t, y: i, ...r }, l) => {
     const { parent: n, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Polygon(), []), { eventHandlers: o, shapeProps: c } = g(() => {
-      const i = {}, d = {};
+      const s = {}, d = {};
       for (const f in r)
-        O.includes(f) ? i[f] = r[
+        L.includes(f) ? s[f] = r[
           f
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : d[f] = r[f];
-      return { eventHandlers: i, shapeProps: d };
+      return { eventHandlers: s, shapeProps: d };
     }, [r]);
     return h(() => {
       if (n)
@@ -756,10 +750,10 @@ const pe = (t) => {
           n.remove(e);
         };
     }, [n, e]), h(() => {
-      typeof t == "number" && (e.translation.x = t), typeof s == "number" && (e.translation.y = s);
-      for (const i in c)
-        i in e && (e[i] = c[i]);
-    }, [c, e, t, s]), h(() => {
+      typeof t == "number" && (e.translation.x = t), typeof i == "number" && (e.translation.y = i);
+      for (const s in c)
+        s in e && (e[s] = c[s]);
+    }, [c, e, t, i]), h(() => {
       if (Object.keys(o).length > 0)
         return u(e, o, n ?? void 0), () => {
           a(e);
@@ -770,18 +764,18 @@ const pe = (t) => {
       a,
       n,
       o
-    ]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
+    ]), R(l, () => e, [e]), /* @__PURE__ */ b(O, {});
   }
 ), je = k.forwardRef(
-  ({ x: t, y: s, ...r }, l) => {
+  ({ x: t, y: i, ...r }, l) => {
     const { parent: n, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Rectangle(), []), { eventHandlers: o, shapeProps: c } = g(() => {
-      const i = {}, d = {};
+      const s = {}, d = {};
       for (const f in r)
-        O.includes(f) ? i[f] = r[
+        L.includes(f) ? s[f] = r[
           f
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : d[f] = r[f];
-      return { eventHandlers: i, shapeProps: d };
+      return { eventHandlers: s, shapeProps: d };
     }, [r]);
     return h(() => {
       if (n)
@@ -789,10 +783,10 @@ const pe = (t) => {
           n.remove(e);
         };
     }, [n, e]), h(() => {
-      typeof t == "number" && (e.translation.x = t), typeof s == "number" && (e.translation.y = s);
-      for (const i in c)
-        i in e && (e[i] = c[i]);
-    }, [c, e, t, s]), h(() => {
+      typeof t == "number" && (e.translation.x = t), typeof i == "number" && (e.translation.y = i);
+      for (const s in c)
+        s in e && (e[s] = c[s]);
+    }, [c, e, t, i]), h(() => {
       if (Object.keys(o).length > 0)
         return u(e, o, n ?? void 0), () => {
           a(e);
@@ -803,18 +797,18 @@ const pe = (t) => {
       a,
       n,
       o
-    ]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
+    ]), R(l, () => e, [e]), /* @__PURE__ */ b(O, {});
   }
 ), Le = k.forwardRef(
-  ({ x: t, y: s, ...r }, l) => {
+  ({ x: t, y: i, ...r }, l) => {
     const { parent: n, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.RoundedRectangle(), []), { eventHandlers: o, shapeProps: c } = g(() => {
-      const i = {}, d = {};
+      const s = {}, d = {};
       for (const f in r)
-        O.includes(f) ? i[f] = r[
+        L.includes(f) ? s[f] = r[
           f
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : d[f] = r[f];
-      return { eventHandlers: i, shapeProps: d };
+      return { eventHandlers: s, shapeProps: d };
     }, [r]);
     return h(() => {
       if (n)
@@ -822,10 +816,10 @@ const pe = (t) => {
           n.remove(e);
         };
     }, [n, e]), h(() => {
-      typeof t == "number" && (e.translation.x = t), typeof s == "number" && (e.translation.y = s);
-      for (const i in c)
-        i in e && (e[i] = c[i]);
-    }, [c, e, t, s]), h(() => {
+      typeof t == "number" && (e.translation.x = t), typeof i == "number" && (e.translation.y = i);
+      for (const s in c)
+        s in e && (e[s] = c[s]);
+    }, [c, e, t, i]), h(() => {
       if (Object.keys(o).length > 0)
         return u(
           e,
@@ -842,14 +836,14 @@ const pe = (t) => {
       o
     ]), R(l, () => e, [
       e
-    ]), /* @__PURE__ */ E(T, {});
+    ]), /* @__PURE__ */ b(O, {});
   }
 ), 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: t, x: i, y: r, autoPlay: l, ...n }, u) => {
+    const { parent: a, registerEventShape: e, unregisterEventShape: o } = C(), c = g(() => new H.Sprite(t), [t]), { eventHandlers: s, shapeProps: d } = g(() => {
       const f = {}, v = {};
       for (const p in n)
-        O.includes(p) ? f[p] = n[
+        L.includes(p) ? f[p] = n[
           p
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : v[p] = n[p];
@@ -861,12 +855,12 @@ const pe = (t) => {
           a.remove(c);
         };
     }, [a, c]), h(() => {
-      typeof s == "number" && (c.translation.x = s), typeof r == "number" && (c.translation.y = r), l ? c.play() : c.pause();
+      typeof i == "number" && (c.translation.x = i), typeof r == "number" && (c.translation.y = r), l ? c.play() : c.pause();
       for (const f in d)
         f in c && (c[f] = d[f]);
-    }, [d, c, s, r, l]), h(() => {
-      if (Object.keys(i).length > 0)
-        return e(c, i, a ?? void 0), () => {
+    }, [d, c, i, r, l]), h(() => {
+      if (Object.keys(s).length > 0)
+        return e(c, s, a ?? void 0), () => {
           o(c);
         };
     }, [
@@ -874,19 +868,19 @@ const pe = (t) => {
       e,
       o,
       a,
-      i
-    ]), R(u, () => c, [c]), /* @__PURE__ */ E(T, {});
+      s
+    ]), R(u, () => c, [c]), /* @__PURE__ */ b(O, {});
   }
 ), Ve = k.forwardRef(
-  ({ x: t, y: s, ...r }, l) => {
+  ({ x: t, y: i, ...r }, l) => {
     const { parent: n, registerEventShape: u, unregisterEventShape: a } = C(), e = g(() => new H.Star(), []), { eventHandlers: o, shapeProps: c } = g(() => {
-      const i = {}, d = {};
+      const s = {}, d = {};
       for (const f in r)
-        O.includes(f) ? i[f] = r[
+        L.includes(f) ? s[f] = r[
           f
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ] : d[f] = r[f];
-      return { eventHandlers: i, shapeProps: d };
+      return { eventHandlers: s, shapeProps: d };
     }, [r]);
     return h(() => {
       if (n)
@@ -894,41 +888,41 @@ const pe = (t) => {
           n.remove(e);
         };
     }, [n, e]), h(() => {
-      typeof t == "number" && (e.translation.x = t), typeof s == "number" && (e.translation.y = s);
-      for (const i in c)
-        i in e && (e[i] = c[i]);
-    }, [c, e, t, s]), h(() => {
+      typeof t == "number" && (e.translation.x = t), typeof i == "number" && (e.translation.y = i);
+      for (const s in c)
+        s in e && (e[s] = c[s]);
+    }, [c, e, t, i]), h(() => {
       if (Object.keys(o).length > 0)
         return u(e, o, n ?? void 0), () => {
           a(e);
         };
-    }, [e, u, a, n, o]), R(l, () => e, [e]), /* @__PURE__ */ E(T, {});
+    }, [e, u, a, n, o]), R(l, () => e, [e]), /* @__PURE__ */ b(O, {});
   }
 ), Ge = k.forwardRef(
-  ({ x1: t, y1: s, x2: r, y2: l, ...n }, u) => {
+  ({ x1: t, y1: i, x2: r, y2: l, ...n }, 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);
+      typeof t == "number" && (a.left.x = t), typeof i == "number" && (a.left.y = i), 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;
+    }, [a, t, i, r, l, n]), R(u, () => a, [a]), null;
   }
 ), Te = k.forwardRef(
-  ({ x: t, y: s, focalX: r, focalY: l, ...n }, u) => {
+  ({ x: t, y: i, focalX: r, focalY: l, ...n }, 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);
+      typeof t == "number" && (a.center.x = t), typeof i == "number" && (a.center.y = i), 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;
+    }, [n, a, t, i, r, l]), R(u, () => a, [a]), null;
   }
 ), Me = k.forwardRef(
-  ({ src: t, ...s }, r) => {
+  ({ src: t, ...i }, r) => {
     const l = g(() => new H.Texture(t), [t]);
     return h(() => {
-      for (const n in s)
-        n in l && (l[n] = s[n]);
-    }, [s, l]), R(r, () => l, [l]), null;
+      for (const n in i)
+        n in l && (l[n] = i[n]);
+    }, [i, l]), R(r, () => l, [l]), null;
   }
 );
 export {
@@ -943,7 +937,7 @@ export {
   Re as Line,
   Ge as LinearGradient,
   me as Path,
-  we as Points,
+  Pe as Points,
   Ce as Polygon,
   Te as RadialGradient,
   je as Rectangle,
@@ -951,7 +945,7 @@ export {
   ye as SVG,
   Oe as Sprite,
   Ve as Star,
-  Pe as Text,
+  we as Text,
   Me as Texture,
   ve as useFrame,
   C as useTwo

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-two.js",
-  "version": "0.8.22-r.5",
+  "version": "0.8.23-r.1",
   "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",
@@ -63,6 +63,7 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/ui": "^3.2.4",
+    "baseline-browser-mapping": "^2.9.14",
     "clsx": "^2.1.1",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",
@@ -80,6 +81,6 @@
   "peerDependencies": {
     "react": ">=19",
     "react-dom": ">=19",
-    "two.js": ">=v0.8.22"
+    "two.js": ">=v0.8.23"
   }
 }